/* 01-tokens.css */
/* ============================================================
   Acqua Viva Studio, gettoni.

   TRE FONTI, e ognuna da' una cosa sola (DESIGN.md):
     - il LINGUAGGIO viene dalla registrazione del cliente (Eyeconic):
       Inter, titoli in maiuscolo a due toni, «//», bottoni a filo,
       filetti pieni, spigoli vivi;
     - il PETROLIO viene dal manifesto che gli piace, campionato in
       sette punti: da #041C22 a #104344;
     - la SABBIA, il nero e l'ottone vengono dal piano sequenza: il
       fondale, la montatura, il calibro e la cerniera.
   Il giallo del riferimento non c'e': dove li' c'e' il giallo qui
   c'e' il petrolio, e dove li' c'e' il nero qui c'e' l'abisso.

   OGNI COPPIA E' MISURATA (python3 tools/tavolozza.py). I numeri fra
   parentesi sono rapporti di contrasto veri, non stime.
   ============================================================ */

@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/inter-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: 'Inter';
  font-style: normal;
  font-weight: 200 800;
  font-display: swap;
  src: url('../fonts/inter-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 {
  /* --- il petrolio ------------------------------------------------ */
  --abisso: #041C22;       /* piede, menu, blocco firma */
  --petrolio: #093B44;     /* la fascia di marca */
  --petrolio-2: #0D4A54;   /* la scheda dentro il petrolio, l'hover */
  --laguna: #176370;       /* il petrolio come parola sul chiaro (6,27 su carta) */
  --schiuma: #9CC7CB;      /* l'accento sul buio (6,65 su petrolio, 9,58 su abisso) */

  /* --- la sabbia --------------------------------------------------- */
  --carta: #F7F4EF;        /* la pagina */
  --sabbia: #EFE9E1;       /* fascia alterna, schede */
  --sabbia-2: #E1D7CC;     /* il fondale del filmato nel punto chiaro */
  --bianco: #FFFFFF;

  /* --- l'inchiostro ------------------------------------------------ */
  --inchiostro: #0C1618;   /* 16,74 su carta */
  --corpo: #3F4B4D;        /* 8,23 su carta, 7,49 su sabbia */
  --tenue: #5F6B6C;        /* la seconda voce dei titoli: 5,03 su carta, 4,57 su sabbia */

  /* --- l'ottone ---------------------------------------------------- */
  --ottone: #B89968;       /* SOLO grafica sul chiaro (2,46); 4,53 su petrolio, 6,53 su abisso */
  --ottone-ink: #7A5F2E;   /* l'ottone quando e' una parola sul chiaro (5,46) */

  /* --- sul buio ---------------------------------------------------- */
  --su-buio: #F3EEE6;      /* 10,57 su petrolio, 15,22 su abisso */
  --su-buio-2: #B5C6C8;    /* 6,90 su petrolio, 9,94 su abisso */

  /* --- filetti ----------------------------------------------------- */
  --linea: #D9D1C5;        /* decorativo */
  --linea-ui: #7E8788;     /* il bordo dei campi: 3,35 su carta */
  --linea-buio: rgba(243, 238, 230, 0.22);

  /* --- i colori che una sezione riscrive ---------------------------- */
  --bg: var(--carta);
  --fg: var(--inchiostro);
  --fg-2: var(--corpo);
  --fg-3: var(--tenue);
  --accento: var(--laguna);
  --rule: var(--inchiostro);

  /* --- tipografia ---------------------------------------------------- */
  --font: 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
  --h1: clamp(2.75rem, 1.2rem + 7.4vw, 8.25rem);
  --h2: clamp(2.1rem, 1.1rem + 4.3vw, 5.25rem);
  --h2-sm: clamp(1.75rem, 1.2rem + 2.2vw, 3.25rem);
  --h3: clamp(1.15rem, 1.05rem + 0.45vw, 1.5rem);
  --slash: clamp(1.05rem, 0.95rem + 0.5vw, 1.4rem);
  --body: clamp(1rem, 0.96rem + 0.2vw, 1.125rem);
  --small: 0.875rem;
  --tiny: 0.78rem;

  /* --- spazio ---------------------------------------------------------- */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4.5rem;
  --space-9: 7rem;
  --section: clamp(4.5rem, 3rem + 7vw, 9.5rem);
  --gutter: clamp(1.25rem, 0.4rem + 4.2vw, 4.5rem);
  --wrap: 82.5rem;
  --gap: clamp(1rem, 0.6rem + 1.6vw, 2.9rem);

  /* --- forme ------------------------------------------------------------ */
  --header-h: 4.75rem;
  --r-lastra: 1.25rem;     /* il solo raggio del sito: il lato alto delle lastre */
  --bordo: 1.5px;

  /* --- moto --------------------------------------------------------------- */
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --slow: 900ms;
  --mid: 420ms;
  --fast: 200ms;

  /* altezza della sezione del piano sequenza */
  --seq-vh: 900vh;
}

@media (max-width: 900px) {
  :root { --seq-vh: 760vh; --header-h: 4rem; }
}

/* 02-base.css */
/* ============================================================
   Base: reset, tipografia, bottoni, occhielli.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: var(--header-h); }
body {
  margin: 0;
  background: var(--carta);
  color: var(--inchiostro);
  font-family: var(--font);
  font-size: var(--body);
  line-height: 1.6;
  font-feature-settings: 'ss01', 'cv11', 'calt';
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
picture { width: 100%; height: 100%; }
picture img { width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 0.2em; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p, h1, h2, h3, h4, figure, blockquote, dl, dd { margin: 0; }
address { font-style: normal; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
[hidden] { display: none !important; }
table { border-collapse: collapse; width: 100%; }

:focus-visible { outline: 2px solid var(--accento); outline-offset: 3px; }
.band-petrolio :focus-visible, .band-abisso :focus-visible, .site-footer :focus-visible,
.site-menu :focus-visible, .videohero :focus-visible { outline-color: var(--schiuma); }

.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: absolute; left: var(--space-4); top: -4rem; z-index: 200;
  background: var(--inchiostro); color: var(--carta); padding: var(--space-3) var(--space-5);
  text-decoration: none; transition: top var(--fast) var(--ease);
}
.skip-link:focus { top: var(--space-4); }

/* --- titoli ---------------------------------------------------------
   Il riferimento: Inter a peso medio, TUTTO MAIUSCOLO, spaziatura
   stretta, interlinea a filo. La seconda voce del titolo e' un <em>
   che non inclina niente: cambia tono. */
h1, h2, .display {
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: -0.035em;
  line-height: 0.98;
  text-wrap: balance;
}
h1 { font-size: var(--h1); letter-spacing: -0.04em; line-height: 0.94; }
h2 { font-size: var(--h2); }
h3 {
  font-size: var(--h3); font-weight: 600; text-transform: uppercase;
  letter-spacing: -0.012em; line-height: 1.15;
}
h1 em, h2 em, .display em { font-style: normal; color: var(--fg-3); }

/* --- l'occhiello «//» -------------------------------------------------
   Il segno lo mette il foglio. La seconda dichiarazione da' un testo
   alternativo vuoto dove il browser lo capisce: chi ascolta la pagina
   non sente «barra barra» a ogni sezione. */
.slash {
  font-size: var(--slash); font-weight: 500; line-height: 1.32;
  letter-spacing: -0.012em; color: var(--fg-3); max-width: 24em;
}
.slash::before { content: '// '; content: '// ' / ''; }
.slash--lg { font-size: clamp(1.15rem, 1rem + 0.8vw, 1.7rem); max-width: 26em; }
.slash--body { font-size: var(--body); font-weight: 400; line-height: 1.6; letter-spacing: 0; color: var(--fg-2); max-width: 38em; }
.slash-title { font-size: clamp(1.3rem, 1.1rem + 0.8vw, 1.75rem); }
.slash-title::before { content: '//'; content: '//' / ''; }

.prose p { color: var(--fg-2); max-width: 40em; }
.prose p + p { margin-top: 1em; }
.prose--wide p { max-width: 46em; }
.prose a, .fine a, .chk a { color: var(--accento); }
.fine { margin-top: var(--space-6); font-size: var(--small); color: var(--fg-3); max-width: 52em; }
.todo { background: #FFE9A8; color: #3d2f00; padding: 0 0.3em; }

/* --- il bottone del riferimento ------------------------------------------
   Rettangolo a spigolo vivo, bordo pieno, maiuscolo, la freccia in
   diagonale. Al passaggio si riempie e la freccia esce dall'angolo. */
.btn {
  --b-fg: var(--fg); --b-bg: transparent; --b-hover-fg: var(--bg); --b-hover-bg: var(--fg);
  display: inline-flex; align-items: center; gap: 0.7em;
  padding: 1.15em 1.75em 1.1em;
  border: var(--bordo) solid var(--b-fg);
  background: var(--b-bg); color: var(--b-fg);
  font-size: 0.95rem; font-weight: 500; letter-spacing: 0.045em; text-transform: uppercase;
  line-height: 1; text-decoration: none; white-space: nowrap;
  transition: background var(--mid) var(--ease), color var(--mid) var(--ease), border-color var(--mid) var(--ease);
}
.btn .arw { width: 0.95em; height: 0.95em; flex: none; transition: transform var(--mid) var(--ease); }
.btn:hover, .btn:focus-visible { background: var(--b-hover-bg); color: var(--b-hover-fg); }
.btn:hover .arw, .btn:focus-visible .arw { transform: translate(0.18em, -0.18em); }
.btn--sm { padding: 0.85em 1.15em 0.8em; font-size: 0.8rem; }
.btn--block { width: 100%; justify-content: center; }
.btn--solid { --b-bg: var(--inchiostro); --b-fg: var(--carta); border-color: var(--inchiostro); --b-hover-bg: var(--petrolio); --b-hover-fg: var(--su-buio); }
.btn--solid:hover, .btn--solid:focus-visible { border-color: var(--petrolio); }
.btn--light { --b-fg: var(--su-buio); --b-hover-bg: var(--su-buio); --b-hover-fg: var(--abisso); }
.btn--paper { --b-bg: var(--carta); --b-fg: var(--inchiostro); border-color: var(--carta); --b-hover-bg: var(--schiuma); --b-hover-fg: var(--abisso); }
.btn--paper:hover, .btn--paper:focus-visible { border-color: var(--schiuma); }
.actions { display: flex; flex-wrap: wrap; gap: var(--space-4); margin-top: var(--space-6); }

.more {
  display: inline-flex; align-items: center; gap: 0.6em; margin-top: var(--space-5);
  font-size: var(--small); font-weight: 500; letter-spacing: 0.045em; text-transform: uppercase; text-decoration: none;
  border-bottom: 1px solid currentColor; padding-bottom: 0.3em;
}
.more .arw { width: 0.9em; height: 0.9em; transition: transform var(--mid) var(--ease); }
.more:hover .arw { transform: translate(0.18em, -0.18em); }

.tag {
  display: inline-block; padding: 0.5em 0.85em 0.45em; margin-bottom: var(--space-5);
  border: 1px solid var(--fg); font-size: var(--tiny); font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; line-height: 1;
}

/* --- il marchio ------------------------------------------------------------ */
.brand { display: inline-flex; align-items: center; gap: 0.7rem; color: inherit; }
.mark { width: 2.7rem; height: auto; flex: none; }
.mark-lens, .mark-dot { fill: currentColor; }
.mark-cut { stroke: var(--bg); }
.mark-dot { fill: var(--bg); }
.brand-text { display: flex; flex-direction: column; line-height: 1; }
.brand-word { font-weight: 800; font-size: 1.42rem; letter-spacing: -0.05em; text-transform: lowercase; }
.brand-sub { margin-top: 0.22rem; padding-left: 0.08em; font-weight: 500; font-size: 0.56rem; letter-spacing: 0.62em; text-transform: uppercase; }
.brand--stack { flex-direction: column; align-items: flex-start; gap: 1.1rem; }
.brand--stack .mark { width: 5.5rem; }
.brand--stack .brand-word { font-size: 2.6rem; }
.brand--stack .brand-sub { font-size: 0.7rem; margin-top: 0.5rem; }

/* --- entrata in scena ---------------------------------------------------------
   Il riferimento fa entrare i blocchi dal basso mentre tornano a
   fuoco. Lo stato nascosto sta DIETRO la classe .js: senza JavaScript
   nessuno lo rivelerebbe mai. */
.js [data-reveal] {
  opacity: 0; transform: translateY(28px); filter: blur(6px);
  transition: opacity var(--slow) var(--ease), transform var(--slow) var(--ease), filter var(--slow) var(--ease);
}
.js [data-reveal].is-in { opacity: 1; transform: none; filter: none; }

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

/* 03-layout.css */
/* ============================================================
   Impaginazione: contenitore, fasce, testata, menu, piede.
   ============================================================ */

.wrap { width: 100%; max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--section); background: var(--bg); color: var(--fg); position: relative; }
.section--tight { padding-block: calc(var(--section) * 0.6); }

/* --- le fasce: una sezione riscrive i suoi colori ------------------------ */
.band-sabbia { --bg: var(--sabbia); }
.band-bianco { --bg: var(--bianco); }
.band-petrolio {
  --bg: var(--petrolio); --fg: var(--su-buio); --fg-2: var(--su-buio-2); --fg-3: var(--schiuma);
  --accento: var(--schiuma); --rule: var(--linea-buio);
}
.band-abisso {
  --bg: var(--abisso); --fg: var(--su-buio); --fg-2: var(--su-buio-2); --fg-3: var(--schiuma);
  --accento: var(--schiuma); --rule: var(--linea-buio);
}

/* --- la testa di sezione del riferimento -----------------------------------
   Titolo a sinistra, colonna stretta a destra con le frecce sopra e
   la riga «//» sotto, e un filetto pieno a tutta larghezza. */
.sec-head {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(14rem, 24rem);
  gap: var(--space-6) var(--gap); align-items: end;
  padding-bottom: clamp(2rem, 1.4rem + 2.4vw, 4.25rem);
  margin-bottom: clamp(2rem, 1.4rem + 2.4vw, 4.25rem);
  border-bottom: 1px solid var(--rule);
}
.sec-head h2 { padding-left: clamp(0rem, -1.5rem + 4vw, 2.6rem); }
.sec-aside { display: flex; flex-direction: column; gap: var(--space-6); align-items: flex-start; }
.sec-aside .rail-nav { align-self: flex-end; }
.sec-head--flip { grid-template-columns: minmax(14rem, 24rem) minmax(0, 1fr); border-bottom: 0; padding-bottom: 0; }
.sec-head--flip h2 { text-align: right; padding-left: 0; }
.sec-head--split { align-items: center; }
.sec-head--split .sec-aside { flex-direction: row; align-items: center; gap: var(--space-5); }
.sec-thumb { width: clamp(6rem, 4rem + 6vw, 11.5rem); aspect-ratio: 1.12; flex: none; overflow: hidden; }
.sec-foot { display: flex; justify-content: center; margin-top: var(--space-8); }
.sec-foot .actions { margin-top: 0; }

@media (max-width: 860px) {
  .sec-head, .sec-head--flip { grid-template-columns: 1fr; align-items: start; }
  .sec-head h2 { padding-left: 0; }
  .sec-head--flip h2 { text-align: left; order: -1; }
  .sec-aside .rail-nav { align-self: flex-start; order: 2; }
}

/* --- le due frecce tonde della giostra ---------------------------------------
   Nel riferimento una e' gialla e l'altra grigia: qui petrolio pieno
   e sabbia. */
.rail-nav { display: flex; gap: var(--space-3); }
.rail-btn {
  width: 3rem; height: 3rem; border-radius: 50%; display: grid; place-items: center;
  background: var(--petrolio); color: var(--su-buio);
  transition: background var(--mid) var(--ease), color var(--mid) var(--ease), transform var(--mid) var(--ease);
}
.rail-btn svg { width: 1.2rem; height: 1.2rem; }
.rail-btn--prev { background: var(--sabbia-2); color: var(--inchiostro); }
.rail-btn:hover { background: var(--inchiostro); color: var(--carta); }
.rail-btn:active { transform: scale(0.94); }
.rail-btn[disabled] { opacity: 0.35; pointer-events: none; }

.rail {
  display: flex; gap: var(--gap); overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; -ms-overflow-style: none; overscroll-behavior-x: contain;
  margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter);
}
.rail::-webkit-scrollbar { display: none; }
.rail > li { flex: 0 0 calc((100% - var(--gap) * 2) / 3); scroll-snap-align: start; min-width: 0; }
@media (max-width: 1100px) { .rail > li { flex-basis: calc((100% - var(--gap)) / 2); } }
@media (max-width: 700px) { .rail > li { flex-basis: 80%; } }

/* --- testata ---------------------------------------------------------------------
   La striscia del riferimento: chiara, quasi opaca, a tutta larghezza.
   Niente sfocatura: sopra il piano sequenza costerebbe un ricalcolo a
   ogni fotogramma. */
.site-header {
  position: sticky; top: 0; z-index: 90; height: var(--header-h);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-5);
  padding-inline: var(--gutter);
  --bg: var(--carta);
  background: rgba(247, 244, 239, 0.92); color: var(--inchiostro);
  border-bottom: 1px solid rgba(12, 22, 24, 0.1);
  transition: transform var(--mid) var(--ease);
}
/* sulle pagine col filmato la barra gli sta SOPRA, come nel riferimento */
body[data-film] .site-header { position: fixed; left: 0; right: 0; }
.site-header[data-hidden='true'] { transform: translateY(-101%); }
.site-brand { text-decoration: none; justify-self: start; display: inline-flex; }
.nav-main { display: flex; gap: clamp(1.25rem, 0.2rem + 2.2vw, 3.2rem); }
.nav-link {
  font-size: 1rem; text-decoration: none; padding: 0.4em 0; position: relative; white-space: nowrap;
}
.nav-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left; transition: transform var(--mid) var(--ease);
}
.nav-link:hover::after, .nav-link[aria-current='page']::after { transform: scaleX(1); }
.header-cta { justify-self: end; display: flex; align-items: center; gap: var(--space-4); }
.lang-switch {
  width: 2.4rem; height: 2.4rem; border-radius: 50%; border: var(--bordo) solid currentColor;
  display: grid; place-items: center; font-size: 0.74rem; font-weight: 600; letter-spacing: 0.04em; text-decoration: none;
  transition: background var(--mid) var(--ease), color var(--mid) var(--ease);
}
.lang-switch:hover { background: var(--inchiostro); color: var(--carta); }
.menu-toggle { display: none; align-items: center; gap: 0.7rem; text-decoration: none; font-size: 0.85rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; justify-self: end; }
.menu-bars { display: grid; gap: 6px; width: 1.6rem; }
.menu-bars span { height: 1.5px; background: currentColor; }

@media (max-width: 1080px) {
  .site-header { grid-template-columns: 1fr auto auto; }
  .nav-main { display: none; }
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 560px) {
  .cta-book { display: none; }
  .brand-word { font-size: 1.25rem; }
  .mark { width: 2.2rem; }
}

/* --- menu -------------------------------------------------------------------------- */
.site-menu {
  position: fixed; inset: 0; z-index: 120; overflow-y: auto;
  --bg: var(--abisso);
  background: var(--abisso); color: var(--su-buio);
  visibility: hidden; opacity: 0; transition: opacity var(--mid) var(--ease), visibility 0s linear var(--mid);
}
.site-menu:target, .site-menu.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.menu-open { overflow: hidden; }
.menu-inner { min-height: 100%; display: flex; flex-direction: column; padding: calc(var(--header-h) + var(--space-5)) var(--gutter) var(--space-7); }
.menu-close {
  position: absolute; top: 1rem; right: var(--gutter); width: 3rem; height: 3rem; border-radius: 50%;
  border: var(--bordo) solid currentColor; display: grid; place-items: center; font-size: 1.6rem; text-decoration: none; line-height: 1;
}
.menu-list { border-top: 1px solid var(--linea-buio); }
.menu-list a {
  display: grid; grid-template-columns: 3rem 1fr; gap: 0 var(--space-4); align-items: baseline;
  padding: clamp(0.9rem, 0.6rem + 1.2vw, 1.5rem) 0; border-bottom: 1px solid var(--linea-buio); text-decoration: none;
}
.menu-list em { font-style: normal; font-size: var(--small); color: var(--schiuma); font-variant-numeric: tabular-nums; }
.menu-list span { font-size: clamp(1.6rem, 1.1rem + 2.6vw, 3rem); font-weight: 500; text-transform: uppercase; letter-spacing: -0.03em; line-height: 1.05; }
.menu-list small { grid-column: 2; font-size: var(--small); color: var(--su-buio-2); }
.menu-list a[aria-current='page'] span { color: var(--schiuma); }
.menu-foot { margin-top: auto; padding-top: var(--space-7); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-5); }
.menu-contact { display: grid; gap: var(--space-2); }
.menu-contact a { text-decoration: none; font-size: 1.1rem; }
.menu-langs { display: flex; gap: var(--space-5); align-items: end; }
.menu-langs a { text-decoration: none; text-transform: uppercase; font-size: var(--small); letter-spacing: 0.08em; color: var(--su-buio-2); }
.menu-langs a[aria-current='true'] { color: var(--su-buio); border-bottom: 1px solid currentColor; }

/* --- piede ---------------------------------------------------------------------------
   Nero nel riferimento, abisso qui. Il nome enorme a due toni, la
   riga in maiuscolo, il campo a filo, il bottone chiaro pieno. */
.site-footer {
  --bg: var(--abisso); --fg: var(--su-buio); --fg-2: var(--su-buio-2); --fg-3: var(--schiuma); --accento: var(--schiuma);
  background: var(--abisso); color: var(--su-buio); padding-top: clamp(4rem, 3rem + 5vw, 7.5rem);
}
.footer-grid { display: grid; grid-template-columns: minmax(0, 1.55fr) repeat(3, minmax(0, 0.6fr)); gap: var(--space-7) var(--gap); padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.footer-word { font-size: clamp(3rem, 1.6rem + 6vw, 6.4rem); font-weight: 800; letter-spacing: -0.06em; line-height: 0.86; text-transform: lowercase; }
.footer-word em { font-style: normal; color: var(--schiuma); }
.footer-line { margin-top: var(--space-7); font-size: 1rem; font-weight: 500; letter-spacing: 0.02em; text-transform: uppercase; max-width: 26em; }
.footer-col h2 { font-size: 1rem; font-weight: 500; letter-spacing: 0.02em; color: var(--schiuma); margin-bottom: var(--space-5); line-height: 1.3; }
.footer-col ul { display: grid; gap: 0.85rem; }
.footer-col a { text-decoration: none; }
.footer-col a:hover, .footer-col a[aria-current='page'] { color: var(--schiuma); }
.footer-col address { color: var(--su-buio-2); line-height: 1.5; }
.footer-legal {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--space-3) var(--space-6);
  padding-block: var(--space-5); border-top: 1px solid var(--linea-buio); font-size: var(--small); color: var(--su-buio-2);
}
.footer-legal a { text-decoration: none; }
.footer-legal a:hover { color: var(--su-buio); }
@media (max-width: 1000px) { .footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 600px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* 04-scrolly.css */
/* ============================================================
   I due filmati: l'apertura che riproduce e il piano sequenza che
   si scrubba. Tutti e due a PIENO CAMPO, 100svh, tutto il resto
   galleggia sopra.
   ============================================================ */

/* --- l'apertura -----------------------------------------------------
   L'impaginazione e' quella del riferimento: titolo enorme in alto a
   sinistra, elenco in alto a destra, riga piccola in basso a
   sinistra, cerchio «Scorri» al centro, scheda bianca in basso a
   destra.

   LA VELATURA E' TARATA SU QUESTO FILMATO, che per nove secondi e'
   una bottega buia e per sei un tramonto col cielo a #DDC9AC: il
   titolo bianco deve reggere sul cielo, non sulla bottega. Le
   densita' sono misurate sul fotogramma piu' chiaro dentro la zona
   di ogni testo (python3 tools/contrasto.py): vedi DESIGN.md §6. */
.videohero {
  position: relative; height: 100svh; min-height: 38rem; overflow: hidden;
  --bg: var(--abisso); background: var(--abisso); color: var(--bianco);
}
.vh-poster, .videohero video { position: absolute; inset: 0; width: 100%; height: 100%; }
.videohero video { object-fit: cover; }
.vh-poster img { object-fit: cover; }
.vh-veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(4, 28, 34, 0.8) 0%, rgba(4, 28, 34, 0.66) 28%, rgba(4, 28, 34, 0.44) 52%, rgba(4, 28, 34, 0.46) 76%, rgba(4, 28, 34, 0.8) 100%),
    linear-gradient(90deg, rgba(4, 28, 34, 0.42) 0%, rgba(4, 28, 34, 0) 60%),
    linear-gradient(270deg, rgba(4, 28, 34, 0.4) 0%, rgba(4, 28, 34, 0) 40%);
}
.vh-inner {
  position: relative; z-index: 2; height: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto;
  padding: calc(var(--header-h) + clamp(1.5rem, 0.5rem + 4vh, 4.5rem)) var(--gutter) clamp(1.75rem, 1rem + 3vh, 3.5rem);
  display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto 1fr auto; gap: var(--space-5) var(--gap);
}
.videohero h1 { grid-column: 1; grid-row: 1; max-width: 11em; text-shadow: 0 1px 28px rgba(4, 28, 34, 0.35); }
.videohero h1 em { color: var(--schiuma); }
.vh-lines { grid-column: 2; grid-row: 1; padding-top: 0.9rem; display: grid; gap: 1.05rem; align-content: start; }
.vh-lines a {
  font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.4rem); font-weight: 600; letter-spacing: -0.012em; text-transform: uppercase;
  text-decoration: none; line-height: 1.1; text-shadow: 0 1px 18px rgba(4, 28, 34, 0.5);
  background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size var(--mid) var(--ease);
}
.vh-lines a:hover { background-size: 100% 1px; }
.vh-sub {
  grid-column: 1; grid-row: 3; align-self: end; max-width: 17em;
  font-size: clamp(1.1rem, 0.95rem + 0.7vw, 1.55rem); line-height: 1.3; letter-spacing: -0.012em;
  text-shadow: 0 1px 18px rgba(4, 28, 34, 0.55);
}
.vh-scroll {
  position: absolute; left: 50%; bottom: clamp(1.75rem, 1rem + 3vh, 3.5rem); transform: translateX(-50%);
  width: 6.75rem; height: 6.75rem; border-radius: 50%; border: var(--bordo) solid currentColor;
  display: grid; place-items: center; text-decoration: none; font-size: 1rem;
  transition: background var(--mid) var(--ease), color var(--mid) var(--ease);
}
.vh-scroll:hover { background: var(--bianco); color: var(--abisso); }
.vh-card {
  grid-column: 2; grid-row: 3; align-self: end; justify-self: end;
  display: grid; grid-template-columns: 9.5rem minmax(0, 13rem); gap: 0.35rem;
  text-decoration: none; color: var(--inchiostro);
}
.vh-card-img { background: var(--bianco); overflow: hidden; aspect-ratio: 1.08; }
.vh-card-img img { transition: transform var(--slow) var(--ease); }
.vh-card:hover .vh-card-img img { transform: scale(1.06); }
.vh-card-text { background: var(--bianco); padding: 1rem 1.1rem; display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-4); }
.vh-card-text b { font-size: 1.12rem; font-weight: 500; text-transform: uppercase; letter-spacing: -0.012em; line-height: 1.18; }
.vh-card-go { display: inline-flex; align-items: center; gap: 0.7rem; font-size: 0.98rem; color: var(--tenue); }
.vh-card-go i {
  width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--petrolio); flex: none; position: relative;
}
.vh-card-go i::after {
  content: ''; position: absolute; left: 54%; top: 50%; transform: translate(-50%, -50%);
  border-style: solid; border-width: 0.32rem 0 0.32rem 0.5rem; border-color: transparent transparent transparent var(--su-buio);
}

/* la pausa: piccola, in basso a sinistra, sotto la riga. La disegna
   il CSS: due stanghette quando riproduce, un triangolo da ferma. */
.vh-sub { padding-bottom: 3.5rem; }
.vh-pause {
  position: absolute; left: var(--gutter); bottom: clamp(1.75rem, 1rem + 3vh, 3.5rem);
  width: 2.4rem; height: 2.4rem; border-radius: 50%; border: var(--bordo) solid currentColor; color: var(--bianco); display: grid; place-items: center;
  transition: background var(--mid) var(--ease), color var(--mid) var(--ease);
}
.vh-pause i { width: 0.62rem; height: 0.72rem; border-left: 0.2rem solid currentColor; border-right: 0.2rem solid currentColor; }
.vh-pause[aria-pressed='true'] i { width: 0; height: 0; border-style: solid; border-width: 0.38rem 0 0.38rem 0.6rem; border-color: transparent transparent transparent currentColor; margin-left: 0.12rem; }
.vh-pause:hover { background: var(--bianco); color: var(--abisso); }

@media (max-width: 900px) {
  .vh-inner { grid-template-columns: 1fr; grid-template-rows: auto auto 1fr auto; }
  .vh-lines { grid-column: 1; grid-row: 2; padding-top: 0; grid-auto-flow: column; justify-content: start; gap: 1.2rem; }
  .vh-lines a { font-size: 0.9rem; }
  .vh-sub { grid-row: 4; max-width: 15em; }
  .vh-card, .vh-scroll { display: none; }
}
@media (max-width: 480px) { .vh-lines { grid-auto-flow: row; gap: 0.6rem; } }

/* --- il piano sequenza ---------------------------------------------------
   Il materiale e' CHIARO: un fondale sabbia da #92806E negli angoli a
   #E1D7CC al centro, con dentro oggetti neri. Quindi testo scuro, e
   dietro ogni blocco di testo un BAGLIORE chiaro nel tono del
   fondale, alla stessa densita' su tutti i capitoli. Nessuna fascia
   e nessuna velatura di pagina: il filmato e' il prodotto. */
.scrolly { position: relative; height: var(--seq-vh); --bg: var(--sabbia-2); background: var(--sabbia-2); color: var(--inchiostro); }
.scrolly-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.scrolly-canvas, .scrolly-poster, .scrolly-veil { position: absolute; inset: 0; width: 100%; height: 100%; }
.scrolly-poster img { object-fit: cover; }
.scrolly[data-painted='true'] .scrolly-poster { opacity: 0; transition: opacity var(--mid) linear; }
/* La velatura NON copre il filmato: e' solo il fondo dello strumento,
   una striscia sabbia alta quanto il regolo, perche' in due capitoli
   la lastra nera arriva fino al bordo basso e tacche e numeri scuri
   ci sparirebbero sopra. Compare con il regolo, non prima. */
.scrolly-veil {
  pointer-events: none; opacity: 0; transition: opacity var(--mid) linear;
  background: linear-gradient(0deg, rgba(232, 223, 212, 0.9) 0, rgba(232, 223, 212, 0.9) 3.6rem, rgba(232, 223, 212, 0) 7.5rem);
}
.scrolly[data-mode='scrub'] .scrolly-veil { opacity: 1; }
.scrolly[data-mode='scrub'] .scrolly-still { display: none; }

.scrolly-lead, .scrolly-phase { position: absolute; inset: 0; pointer-events: none; }
.scrolly-phase { opacity: 0; }
.cap {
  --halo: 240, 232, 222; --halo-d: 0.6;
  position: absolute; left: var(--gutter); width: min(39rem, 44vw); pointer-events: auto; isolation: isolate;
}
.cap::before {
  content: ''; position: absolute; z-index: -1; inset: -70% -55% -70% -60%;
  background: radial-gradient(ellipse closest-side, rgba(var(--halo), var(--halo-d)) 0%, rgba(var(--halo), var(--halo-d)) 46%, rgba(var(--halo), 0) 100%);
}
.scrolly-phase[data-side='alto'] .cap { top: calc(var(--header-h) + clamp(2rem, 1rem + 6vh, 5rem)); }
.scrolly-phase[data-side='basso'] .cap, .cap--lead { bottom: clamp(5.75rem, 4.5rem + 4vh, 8rem); }
.cap-num { display: flex; align-items: baseline; gap: 0.7rem; font-size: 0.95rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--space-4); }
.cap-num b { font-weight: 600; font-variant-numeric: tabular-nums; padding: 0.3em 0.55em 0.25em; background: var(--inchiostro); color: var(--carta); line-height: 1; }
.cap h3, .cap h2 {
  font-size: clamp(1.8rem, 1rem + 2.2vw, 3rem); font-weight: 500; text-transform: uppercase; letter-spacing: -0.035em; line-height: 1;
  text-shadow: 0 0 18px rgba(var(--halo), 0.9), 0 0 3px rgba(var(--halo), 0.7);
}
.cap h2 em, .cap h3 em { font-style: normal; color: var(--corpo); }
.cap p:not(.slash) { margin-top: var(--space-4); font-size: 1.5rem; line-height: 1.32; letter-spacing: -0.012em; max-width: 21em; text-shadow: 0 0 14px rgba(var(--halo), 0.95), 0 0 3px rgba(var(--halo), 0.8); }
.cap .slash { color: var(--inchiostro); margin-bottom: var(--space-4); text-shadow: 0 0 14px rgba(var(--halo), 0.95); }

/* il contatore e il regolo */
.scrolly-counter {
  position: absolute; right: var(--gutter); bottom: clamp(3.6rem, 3rem + 2vh, 4.6rem);
  display: flex; align-items: baseline; gap: 0.5rem; font-variant-numeric: tabular-nums; opacity: 0;
}
.scrolly-counter b { font-size: clamp(2.4rem, 1.6rem + 2.4vw, 4rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; text-shadow: 0 0 22px rgba(240, 232, 222, 0.95), 0 0 6px rgba(240, 232, 222, 0.9); }
.scrolly-counter span { font-size: 1rem; color: var(--corpo); }
.regolo {
  position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(1.25rem, 0.9rem + 1.4vh, 2rem); height: 1.75rem; opacity: 0;
  border-bottom: 1.5px solid var(--inchiostro);
  background: repeating-linear-gradient(90deg, rgba(12, 22, 24, 0.75) 0 1px, transparent 1px 1.25%) 0 100% / 100% 0.5rem no-repeat;
}
.reg-mark { position: absolute; left: var(--x); bottom: 0; width: 1.5px; height: 1.05rem; background: var(--inchiostro); }
.reg-mark b { position: absolute; bottom: 1.15rem; left: 50%; transform: translateX(-50%); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.04em; font-variant-numeric: tabular-nums; }
.regolo > i { position: absolute; left: 0; bottom: -1.5px; height: 3px; width: 0; background: var(--inchiostro); }
/* il becco del calibro: il bordo destro della barra del motore */
.regolo > i::after {
  content: ''; position: absolute; right: -5px; bottom: 0; width: 10px; height: 1.55rem;
  background: var(--ottone); border: 1.5px solid var(--inchiostro);
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 100%, 0 72%);
}

@media (max-width: 900px) {
  .cap { width: auto; right: var(--gutter); }
  .cap::before { inset: -45% -12% -45% -12%; background: radial-gradient(ellipse closest-side, rgba(var(--halo), var(--halo-d)) 0%, rgba(var(--halo), var(--halo-d)) 70%, rgba(var(--halo), 0) 100%); }
  .cap p:not(.slash) { font-size: 1.22rem; }
  .scrolly-counter { display: none; }
  .reg-mark b { font-size: 0.62rem; }
}

/* --- il ripiego: static e' lo stato che sta nell'HTML ---------------------------
   Senza JavaScript, o con il movimento ridotto, la sezione e' una
   colonna editoriale: il poster con il titolo, poi sei righe con il
   fermo immagine e il suo testo. */
.scrolly[data-mode='static'] { height: auto; background: var(--carta); }
.scrolly[data-mode='static'] .scrolly-stage { position: relative; height: auto; overflow: visible; }
.scrolly[data-mode='static'] .scrolly-canvas,
.scrolly[data-mode='static'] .scrolly-veil,
.scrolly[data-mode='static'] .scrolly-counter,
.scrolly[data-mode='static'] .regolo { display: none; }
.scrolly[data-mode='static'] .scrolly-poster { position: relative; height: 70svh; min-height: 24rem; }
.scrolly[data-mode='static'] .scrolly-lead { position: absolute; inset: 0 0 auto 0; height: 70svh; min-height: 24rem; }
.scrolly[data-mode='static'] .scrolly-captions {
  max-width: calc(var(--wrap) + var(--gutter) * 2); margin-inline: auto; padding: var(--section) var(--gutter);
  display: grid; gap: clamp(3rem, 2rem + 4vw, 6rem);
}
.scrolly[data-mode='static'] .scrolly-phase {
  position: relative; inset: auto; opacity: 1; pointer-events: auto;
  display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: var(--gap); align-items: center;
}
.scrolly[data-mode='static'] .scrolly-phase:nth-child(even) .scrolly-still { order: 2; }
.scrolly[data-mode='static'] .scrolly-phase .cap { position: relative; left: auto; top: auto; bottom: auto; width: auto; }
.scrolly[data-mode='static'] .scrolly-phase .cap::before { display: none; }
.scrolly[data-mode='static'] .scrolly-phase .cap h3,
.scrolly[data-mode='static'] .scrolly-phase .cap p { text-shadow: none; }
.scrolly[data-mode='static'] .scrolly-still { order: -1; aspect-ratio: 16 / 9; overflow: hidden; margin: 0; }
@media (max-width: 800px) {
  .scrolly[data-mode='static'] .scrolly-phase { grid-template-columns: 1fr; }
  .scrolly[data-mode='static'] .scrolly-phase:nth-child(even) .scrolly-still { order: -1; }
}

/* 05-blocks.css */
/* ============================================================
   I blocchi.
   ============================================================ */

/* --- apertura di pagina interna -------------------------------------- */
.pagehero { padding: calc(var(--space-7) + 0.5rem) 0 clamp(3rem, 2rem + 4vw, 6rem); background: var(--carta); }
.crumbs { display: flex; gap: 0.6rem; font-size: var(--small); color: var(--tenue); margin-bottom: clamp(2rem, 1rem + 4vw, 4.5rem); }
.crumbs a { text-decoration: none; }
.crumbs a:hover { color: var(--inchiostro); }
.ph-grid { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: var(--gap); align-items: end; }
.pagehero:not(.pagehero--img) .ph-grid { grid-template-columns: minmax(0, 1fr); }
.pagehero h1 { font-size: clamp(2.6rem, 1.2rem + 6vw, 6.75rem); }
.ph-text .slash { margin-top: clamp(1.5rem, 1rem + 2vw, 3rem); }
.ph-media { aspect-ratio: 4 / 5; overflow: hidden; max-height: 78svh; justify-self: end; width: 100%; }
@media (max-width: 900px) { .ph-grid { grid-template-columns: 1fr; } .ph-media { aspect-ratio: 4 / 3; } }

/* --- le forme ----------------------------------------------------------- */
.forma-link { display: block; text-decoration: none; }
.forma-media { position: relative; display: block; aspect-ratio: 1.14; overflow: hidden; background: var(--sabbia-2); }
.forma-media img { transition: transform var(--slow) var(--ease), filter var(--mid) var(--ease); }
.forma-go {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -30%); opacity: 0;
  transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
}
.forma-link:hover .forma-media img, .forma-link:focus-visible .forma-media img { transform: scale(1.04); filter: brightness(0.72); }
.forma-link:hover .forma-go, .forma-link:focus-visible .forma-go { opacity: 1; transform: translate(-50%, -50%); }
.forma-foot { display: flex; justify-content: space-between; align-items: baseline; gap: var(--space-4); margin-top: clamp(1.25rem, 1rem + 1vw, 2.25rem); }
.forma-foot b { font-size: var(--h3); font-weight: 600; text-transform: uppercase; letter-spacing: -0.012em; line-height: 1.15; }
.forma-foot span { color: var(--tenue); font-variant-numeric: tabular-nums; white-space: nowrap; }
.forma-note { display: block; margin-top: var(--space-2); color: var(--corpo); font-size: 0.98rem; max-width: 28em; }

/* --- la fascia di marca ---------------------------------------------------- */
.man-top {
  display: grid; grid-template-columns: minmax(14rem, 22rem) minmax(0, 1fr); gap: var(--gap); align-items: start;
  padding-bottom: clamp(2.5rem, 1.5rem + 3vw, 5rem); border-bottom: 1px solid var(--rule);
}
.man-top h2 { text-align: right; font-size: clamp(2.2rem, 1rem + 5vw, 5.6rem); }
.man-thumb { width: min(100%, 14.5rem); aspect-ratio: 1.36; overflow: hidden; margin-bottom: clamp(1.5rem, 1rem + 2vw, 3rem); }
.man-body { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 6vw, 8rem); padding-top: clamp(2.5rem, 1.5rem + 3vw, 5rem); }
.man-text > p { margin-top: var(--space-3); color: var(--fg-2); max-width: 40em; }
.man-pair { display: grid; grid-template-columns: 1.27fr 1fr; gap: var(--gap); align-items: start; margin-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); padding-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem); border-bottom: 1px solid var(--rule); }
.man-pair > div:first-child { aspect-ratio: 1.34; overflow: hidden; }
.man-pair > div:last-child { aspect-ratio: 1.82; overflow: hidden; }
.man-more { padding-top: clamp(2rem, 1.5rem + 2vw, 3.5rem); }
.man-more p { color: var(--fg-2); max-width: 42em; }
.man-more p + p { margin-top: 1em; }
.man-tall { aspect-ratio: 0.74; overflow: hidden; }
@media (max-width: 900px) {
  .man-top, .man-body { grid-template-columns: 1fr; }
  .man-top h2 { text-align: left; order: -1; }
  .man-tall { aspect-ratio: 4 / 3; }
}

/* --- le lastre: il solo lato alto arrotondato, accostate senza spazio --------- */
.lastre { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: clamp(3rem, 2rem + 4vw, 6rem); }
.lastre--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.lastre--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cards .lastre { margin-top: 0; }
.lastra {
  border: 1px solid var(--fg); border-radius: var(--r-lastra) var(--r-lastra) 0 0;
  padding: clamp(1.5rem, 1rem + 1.6vw, 2.4rem); margin-left: -1px;
}
.lastra:first-child { margin-left: 0; }
.band-petrolio .lastra, .band-abisso .lastra { border-color: rgba(243, 238, 230, 0.55); }
.lastra h3 { margin-bottom: var(--space-4); }
.lastra p { color: var(--fg-2); }
.lastra-n { display: block; font-size: var(--small); font-weight: 600; letter-spacing: 0.08em; color: var(--fg-3); margin-bottom: var(--space-5); font-variant-numeric: tabular-nums; }
@media (max-width: 900px) {
  .lastre, .lastre--4, .lastre--2 { grid-template-columns: 1fr; }
  .lastra { margin-left: 0; margin-top: -1px; }
  .lastra + .lastra { border-radius: 0; }
}
@media (min-width: 901px) and (max-width: 1200px) { .lastre--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .lastre--4 .lastra:nth-child(3) { margin-left: 0; } .lastre--4 .lastra:nth-child(n + 3) { margin-top: -1px; border-radius: 0; } }

/* --- «Tre misure»: il blocco firma -------------------------------------------------
   Una tavola tecnica a gesso, come la lastra del filmato: tratto
   chiaro per l'occhiale, ottone per le quote, e la sigla che si legge
   all'interno di ogni asta. */
.mis-grid { display: grid; grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr); gap: clamp(2rem, 1rem + 5vw, 6.5rem); align-items: center; }
.mis-text h2 { font-size: var(--h2-sm); margin-top: var(--space-5); }
.mis-text h2 em { color: var(--schiuma); }
.mis-lede { margin-top: var(--space-5); color: var(--fg-2); max-width: 32em; }
.mis-controls { margin-top: var(--space-7); display: grid; gap: var(--space-5); max-width: 30rem; }

/* la barra a segmenti: la voce scelta SI INVERTE, fondo chiaro pieno e
   testo scuro. Un passo di tono non si vedrebbe. */
.seg { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid rgba(243, 238, 230, 0.55); }
.seg-btn { padding: 0.85em 0.5em 0.8em; font-size: 0.82rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--su-buio-2); transition: background var(--fast) var(--ease), color var(--fast) var(--ease); }
.seg-btn + .seg-btn { border-left: 1px solid rgba(243, 238, 230, 0.55); }
.seg-btn:hover { color: var(--su-buio); background: rgba(243, 238, 230, 0.08); }
.seg-btn[aria-pressed='true'] { background: var(--su-buio); color: var(--abisso); }

.mis-field label { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.86rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.mis-field output { font-variant-numeric: tabular-nums; color: var(--ottone); letter-spacing: 0.02em; }
.mis-field small { display: block; margin-top: 0.35rem; font-size: var(--tiny); color: var(--su-buio-2); }
.mis-field input[type='range'] {
  --fill: 50%; appearance: none; -webkit-appearance: none; width: 100%; height: 1.75rem; margin: 0.35rem 0 0; background: transparent; cursor: ew-resize;
}
.mis-field input[type='range']::-webkit-slider-runnable-track { height: 1.5px; background: linear-gradient(90deg, var(--ottone) var(--fill), rgba(243, 238, 230, 0.4) var(--fill)); }
.mis-field input[type='range']::-moz-range-track { height: 1.5px; background: rgba(243, 238, 230, 0.4); }
.mis-field input[type='range']::-moz-range-progress { height: 1.5px; background: var(--ottone); }
.mis-field input[type='range']::-webkit-slider-thumb {
  -webkit-appearance: none; width: 12px; height: 1.6rem; margin-top: calc(-0.8rem + 0.75px); background: var(--ottone); border: 1.5px solid var(--abisso); border-radius: 0;
  clip-path: polygon(0 0, 100% 0, 100% 78%, 50% 100%, 0 78%);
}
.mis-field input[type='range']::-moz-range-thumb { width: 10px; height: 1.5rem; background: var(--ottone); border: 1.5px solid var(--abisso); border-radius: 0; }
.mis-field input[type='range']:focus-visible { outline: 2px solid var(--schiuma); outline-offset: 4px; }

.mis-board { border: 1px solid rgba(243, 238, 230, 0.28); background: linear-gradient(160deg, #0A2A31 0%, #06222A 100%); padding: clamp(1rem, 0.5rem + 2vw, 2.5rem); }
.mis-svg { width: 100%; height: auto; overflow: visible; }
.mis-chalk path { fill: none; stroke: var(--su-buio); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; transition: d var(--mid) var(--ease); }
.mis-quote path { fill: none; stroke: var(--ottone); stroke-width: 1.2; transition: d var(--mid) var(--ease); }
.mis-num text { fill: var(--ottone); font-family: var(--font); font-size: 12.5px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; }
.mis-num tspan { fill: var(--su-buio); font-weight: 600; }
.mis-board figcaption { display: grid; grid-template-columns: auto 1fr; gap: 0.2rem var(--space-5); align-items: baseline; margin-top: var(--space-4); padding-top: var(--space-5); border-top: 1px solid rgba(243, 238, 230, 0.28); }
.mis-board figcaption span { font-size: var(--tiny); font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; color: var(--su-buio-2); }
.mis-board figcaption b { font-size: clamp(1.6rem, 1.1rem + 2vw, 2.9rem); font-weight: 500; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; justify-self: end; line-height: 1; }
.mis-board figcaption small { grid-column: 1 / -1; font-size: var(--small); color: var(--su-buio-2); margin-top: var(--space-3); }
@media (max-width: 960px) { .mis-grid { grid-template-columns: 1fr; } .mis-board { order: -1; } }
/* sul telefono il disegno si rimpicciolisce di tre volte: le quote
   scritte a 12,5 unita' diventerebbero illeggibili, e la sigla andrebbe
   a capo a meta' */
@media (max-width: 700px) {
  .mis-num text { font-size: 21px; letter-spacing: 0.04em; }
  .mis-chalk path { stroke-width: 3; }
  .mis-quote path { stroke-width: 1.8; }
  .mis-board figcaption { grid-template-columns: 1fr; }
  .mis-board figcaption b { justify-self: start; white-space: nowrap; }
}

/* --- l'invito e il nastro --------------------------------------------------------------- */
.invito { overflow: hidden; padding-bottom: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); }
.inv-media { position: absolute; inset: 0 0 0 38%; }
.inv-media::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--abisso) 0%, rgba(4, 28, 34, 0.72) 26%, rgba(4, 28, 34, 0.18) 64%, rgba(4, 28, 34, 0.3) 100%), linear-gradient(0deg, rgba(4, 28, 34, 0.75) 0%, rgba(4, 28, 34, 0) 40%); }
.invito .wrap { position: relative; }
.inv-text { max-width: 46rem; }
.inv-text h2 em { color: var(--schiuma); }
.inv-text p { margin-top: var(--space-5); color: var(--su-buio-2); max-width: 30em; }
.inv-text .actions { margin-top: clamp(2.5rem, 2rem + 2vw, 4rem); }
.nastro { position: relative; display: flex; overflow: hidden; margin-top: clamp(3.5rem, 2.5rem + 4vw, 6.5rem); gap: 0.6rem; }
.nastro-track { display: flex; gap: 0.6rem; flex: none; min-width: 100%; justify-content: space-around; animation: nastro 48s linear infinite; }
.nastro:hover .nastro-track { animation-play-state: paused; }
.chip { display: inline-flex; align-items: center; gap: 0.9rem; padding: 1.5rem 2.4rem; background: var(--sabbia); color: var(--inchiostro); white-space: nowrap; font-size: clamp(0.95rem, 0.85rem + 0.5vw, 1.35rem); font-weight: 600; text-transform: uppercase; letter-spacing: -0.012em; }
.ico { width: 1.7em; height: 1.7em; flex: none; }
@keyframes nastro { to { transform: translateX(calc(-100% - 0.6rem)); } }
@media (max-width: 800px) { .inv-media { inset: 0; } .inv-media::after { background: rgba(4, 28, 34, 0.74); } .chip { padding: 1rem 1.4rem; } }
@media (prefers-reduced-motion: reduce) { .nastro { overflow-x: auto; } .nastro-track { animation: none; } .nastro-track[aria-hidden='true'] { display: none; } }

/* --- le voci ------------------------------------------------------------------------------ */
.voci { --bg: var(--sabbia); }
.rail--voci { gap: 0.75rem; }
.rail--voci > li { flex-basis: calc((100% - 1.5rem) / 3); }
@media (max-width: 1100px) { .rail--voci > li { flex-basis: calc((100% - 0.75rem) / 2); } }
@media (max-width: 700px) { .rail--voci > li { flex-basis: 86%; } }
.voce { background: var(--bianco); padding: clamp(1.4rem, 1rem + 1.2vw, 2rem); display: flex; flex-direction: column; gap: var(--space-5); }
.voce-top { display: flex; justify-content: space-between; align-items: center; }
.voce-q { width: 2rem; height: 1.5rem; fill: var(--tenue); }
.stars { display: inline-flex; gap: 0.35rem; }
.stars i { width: 1.05rem; height: 1.05rem; background: var(--ottone); clip-path: polygon(50% 0, 61.8% 35.5%, 98% 35.5%, 68.5% 57.5%, 79.4% 92%, 50% 70.5%, 20.6% 92%, 31.5% 57.5%, 2% 35.5%, 38.2% 35.5%); }
.voce blockquote p { color: var(--corpo); }
.voce-who { display: flex; align-items: center; gap: var(--space-4); margin-top: auto; }
.voce-ini { width: 3rem; height: 3rem; border-radius: 50%; background: var(--petrolio); color: var(--su-buio); display: grid; place-items: center; font-weight: 600; font-size: 1.1rem; flex: none; }
.voce-who b { display: block; font-size: 1.12rem; font-weight: 500; text-transform: uppercase; letter-spacing: -0.005em; }
.voce-who small { color: var(--tenue); font-size: 0.98rem; }

/* --- le tre linee --------------------------------------------------------------------------- */
.linee { --bg: var(--bianco); }
.linee .sec-head { margin-bottom: clamp(2.5rem, 2rem + 3vw, 5rem); align-items: center; }
.linee-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap); }
.linea a { position: relative; display: block; aspect-ratio: 0.86; overflow: hidden; text-decoration: none; background: var(--sabbia-2); }
.linea img { transition: transform var(--slow) var(--ease); }
.linea a:hover img, .linea a:focus-visible img { transform: scale(1.045); }
/* la targa velata del riferimento: qui la sfocatura si puo' usare,
   sotto c'e' una fotografia ferma e non il piano sequenza */
.linea-tag {
  position: absolute; left: 5.5%; right: 5.5%; bottom: 4.5%; display: flex; justify-content: center; align-items: center; gap: 0.9rem;
  padding: 1.35rem 1rem; background: rgba(247, 244, 239, 0.78); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  color: var(--inchiostro); transition: background var(--mid) var(--ease);
}
.linea-tag b { font-size: clamp(1rem, 0.9rem + 0.5vw, 1.3rem); font-weight: 500; text-transform: uppercase; letter-spacing: 0.005em; }
.linea-tag .arw { width: 1rem; height: 1rem; transition: transform var(--mid) var(--ease); }
.linea a:hover .linea-tag { background: var(--carta); }
.linea a:hover .arw { transform: translate(0.18em, -0.18em); }
.linea-text { position: absolute; left: 5.5%; right: 5.5%; top: 4.5%; color: var(--bianco); font-size: 1rem; text-shadow: 0 1px 14px rgba(4, 28, 34, 0.7); opacity: 0; transform: translateY(-6px); transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease); }
.linea a:hover .linea-text, .linea a:focus-visible .linea-text { opacity: 1; transform: none; }
.linea a::before { content: ''; position: absolute; inset: 0 0 60% 0; z-index: 1; background: linear-gradient(180deg, rgba(4, 28, 34, 0.62), rgba(4, 28, 34, 0)); opacity: 0; transition: opacity var(--mid) var(--ease); pointer-events: none; }
.linea a:hover::before, .linea a:focus-visible::before { opacity: 1; }
.linea-text { z-index: 2; }
@media (max-width: 800px) { .linee-grid { grid-template-columns: 1fr; } .linea a { aspect-ratio: 1.1; } }

/* --- le righe con la fotografia inclinata ---------------------------------------------------- */
.righe .sec-head { border-bottom: 1px solid var(--rule); }
.righe-list { display: grid; gap: clamp(1rem, 0.6rem + 1.4vw, 2.2rem); }
.riga {
  display: grid; grid-template-columns: minmax(0, 1fr) clamp(9rem, 5rem + 12vw, 17rem); gap: var(--gap); align-items: center;
  background: var(--sabbia); padding: clamp(1.75rem, 1rem + 3vw, 4.5rem) clamp(1.5rem, 0.5rem + 8vw, 13.5rem); overflow: hidden;
}
.riga h3 { font-size: clamp(1.2rem, 1.05rem + 0.7vw, 1.75rem); margin-bottom: var(--space-4); }
.riga-media { aspect-ratio: 0.98; overflow: hidden; transform: rotate(-14deg); transition: transform var(--slow) var(--ease); }
.riga:nth-child(even) .riga-media { transform: rotate(11deg); }
.riga:hover .riga-media { transform: rotate(0deg) scale(1.04); }
@media (max-width: 700px) { .riga { grid-template-columns: 1fr; } .riga-media { width: 9rem; justify-self: end; } }

/* --- l'annuncio della prova virtuale ----------------------------------------------------------- */
.ann-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); gap: clamp(2rem, 1rem + 5vw, 7rem); align-items: center; }
.ann-text h2 { font-size: var(--h2-sm); margin-bottom: var(--space-5); }
.ann-media { position: relative; aspect-ratio: 0.92; overflow: hidden; }
.ann-frame { position: absolute; inset: 9% 12%; pointer-events: none; display: grid; place-items: center; }
.ann-frame i { position: absolute; width: 2.2rem; height: 2.2rem; border: 2px solid var(--carta); }
.ann-frame i:nth-child(1) { top: 0; left: 0; border-right: 0; border-bottom: 0; }
.ann-frame i:nth-child(2) { top: 0; right: 0; border-left: 0; border-bottom: 0; }
.ann-frame i:nth-child(3) { bottom: 0; left: 0; border-right: 0; border-top: 0; }
.ann-frame i:nth-child(4) { bottom: 0; right: 0; border-left: 0; border-top: 0; }
.mark--ghost { display: none; }
@media (max-width: 900px) { .ann-grid { grid-template-columns: 1fr; } .ann-media { aspect-ratio: 4 / 3; } }

/* --- numeri ---------------------------------------------------------------------------------------- */
.stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr)); border-top: 1px solid var(--rule); }
.stat-row > div { padding: clamp(1.5rem, 1rem + 1.6vw, 2.6rem) var(--space-5) clamp(1.5rem, 1rem + 1.6vw, 2.6rem) 0; border-bottom: 1px solid var(--rule); display: flex; flex-direction: column; }
.stat-row dt { order: 2; margin-top: var(--space-3); font-size: var(--small); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); }
.stat-row dd { font-size: clamp(2.4rem, 1.6rem + 3vw, 4.5rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; font-variant-numeric: tabular-nums; }
.stat-row p { order: 3; margin-top: var(--space-3); color: var(--fg-2); font-size: 0.98rem; max-width: 22em; }

/* --- righe numerate ---------------------------------------------------------------------------------- */
.row-list { margin-top: calc(clamp(2rem, 1.4rem + 2.4vw, 4.25rem) * -1); }
.row-item {
  display: grid; grid-template-columns: 4rem minmax(0, 0.9fr) minmax(0, 1.3fr) auto; gap: var(--space-4) var(--gap); align-items: baseline;
  padding: clamp(1.4rem, 1rem + 1.4vw, 2.4rem) 0; border-bottom: 1px solid var(--linea);
}
.row-n { font-size: var(--small); font-weight: 600; letter-spacing: 0.08em; color: var(--fg-3); font-variant-numeric: tabular-nums; }
.row-item p { color: var(--fg-2); max-width: 40em; }
.row-meta { font-size: var(--small); color: var(--fg-3); white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 860px) { .row-item { grid-template-columns: 2.5rem minmax(0, 1fr); } .row-item p, .row-meta { grid-column: 2; } }

/* --- passi ----------------------------------------------------------------------------------------------- */
.step-list { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); counter-reset: none; }
.step-list--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.step-list--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.step-list li { border-left: 1px solid var(--rule); padding: 0 var(--space-5) var(--space-5); display: flex; flex-direction: column; }
.step-n { font-size: clamp(2.2rem, 1.6rem + 2vw, 3.6rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: var(--fg-3); margin-bottom: clamp(2rem, 1.5rem + 3vw, 5rem); font-variant-numeric: tabular-nums; }
.step-list h3 { margin-bottom: var(--space-3); }
.step-list p { color: var(--fg-2); font-size: 0.98rem; }
.step-meta { margin-top: auto; padding-top: var(--space-5); font-size: var(--small); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accento); }
@media (max-width: 1000px) { .step-list, .step-list--3, .step-list--5 { grid-template-columns: 1fr 1fr; gap: var(--space-7) 0; } }
@media (max-width: 560px) { .step-list, .step-list--3, .step-list--5 { grid-template-columns: 1fr; } .step-n { margin-bottom: var(--space-5); } }

/* --- immagine e testo ---------------------------------------------------------------------------------------- */
.sp-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1rem + 5vw, 7rem); align-items: center; }
.split--flip .sp-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.sp-media { aspect-ratio: 1.18; overflow: hidden; }
.sp-text h2 { font-size: var(--h2-sm); margin: var(--space-4) 0 var(--space-5); }
.ticks { margin-top: var(--space-6); border-top: 1px solid var(--linea); }
.ticks li { padding: 0.85rem 0 0.85rem 1.9rem; border-bottom: 1px solid var(--linea); position: relative; color: var(--fg-2); }
.ticks li::before { content: ''; position: absolute; left: 0.15rem; top: 1.35rem; width: 0.85rem; height: 0.45rem; border-left: 1.5px solid var(--accento); border-bottom: 1.5px solid var(--accento); transform: rotate(-45deg); }
@media (max-width: 900px) { .sp-grid, .split--flip .sp-grid { grid-template-columns: 1fr; } .split--flip .sp-media { order: -1; } }

/* --- tabella ---------------------------------------------------------------------------------------------------- */
.table-scroll { position: relative; overflow-x: auto; }
.tbl { min-width: 36rem; }
.tbl th, .tbl td { text-align: left; padding: 1.15rem var(--space-5) 1.15rem 0; border-bottom: 1px solid var(--linea); vertical-align: baseline; }
.tbl thead th { font-size: var(--small); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fg-3); border-bottom: 1px solid var(--rule); }
.tbl tbody th { font-weight: 600; text-transform: uppercase; letter-spacing: -0.005em; font-size: 1.02rem; }
.tbl td { color: var(--fg-2); }
.tbl .num { font-variant-numeric: tabular-nums; }
.tbl td.num:last-child, .tbl th.num:last-child { text-align: right; padding-right: 0; white-space: nowrap; color: var(--fg); }
.tbl--orari { min-width: 0; }
.tbl--orari th { font-weight: 500; text-transform: none; font-size: var(--body); width: 45%; }
.tbl--orari td { text-align: right; padding-right: 0; font-variant-numeric: tabular-nums; }
.tbl--orari .sep { margin: 0 0.6em; color: var(--fg-3); }
.tbl--orari .closed { color: var(--fg-3); }
.tbl--orari tr[data-today='true'] th, .tbl--orari tr[data-today='true'] td { color: var(--laguna); font-weight: 600; }
.orari-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--gap); align-items: start; }
.orari-grid h2 { font-size: var(--h2-sm); margin-bottom: var(--space-5); }
@media (max-width: 800px) { .orari-grid { grid-template-columns: 1fr; } }
.live { margin-top: var(--space-5); display: inline-flex; align-items: center; gap: 0.6rem; font-size: var(--small); font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; }
.live::before { content: ''; width: 0.55rem; height: 0.55rem; border-radius: 50%; background: var(--tenue); }
.live[data-open='true']::before { background: #1F8A5B; box-shadow: 0 0 0 4px rgba(31, 138, 91, 0.18); }

/* --- domande -------------------------------------------------------------------------------------------------------- */
.faq-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 1rem + 5vw, 7rem); align-items: start; }
.faq-head h2 { font-size: var(--h2-sm); margin-bottom: var(--space-5); }
.faq-list { border-top: 1px solid var(--rule); }
.qa { border-bottom: 1px solid var(--linea); }
.qa summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; gap: var(--space-5); align-items: center; padding: 1.4rem 0; font-size: clamp(1.02rem, 0.98rem + 0.3vw, 1.2rem); font-weight: 600; text-transform: uppercase; letter-spacing: -0.008em; line-height: 1.25; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary i { position: relative; width: 2.4rem; height: 2.4rem; border-radius: 50%; background: var(--sabbia-2); flex: none; transition: background var(--mid) var(--ease), transform var(--mid) var(--ease); }
.qa summary i::before, .qa summary i::after { content: ''; position: absolute; left: 50%; top: 50%; width: 0.85rem; height: 1.5px; background: var(--inchiostro); transform: translate(-50%, -50%); transition: background var(--mid) var(--ease); }
.qa summary i::after { transform: translate(-50%, -50%) rotate(90deg); }
.qa[open] summary i { background: var(--petrolio); transform: rotate(45deg); }
.qa[open] summary i::before, .qa[open] summary i::after { background: var(--su-buio); }
.qa-body { padding: 0 3.5rem 1.6rem 0; }
.qa-body p { color: var(--fg-2); max-width: 44em; }
.qa-body p + p { margin-top: 0.8em; }
@media (max-width: 900px) { .faq-grid { grid-template-columns: 1fr; } }

/* --- testo ------------------------------------------------------------------------------------------------------------ */
.text-grid { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: clamp(2rem, 1rem + 5vw, 7rem); align-items: start; }
.text-grid h2 { font-size: var(--h2-sm); }
.textblock .slash { margin-bottom: var(--space-5); }
.textblock .prose p { font-size: clamp(1.05rem, 1rem + 0.35vw, 1.25rem); }
@media (max-width: 900px) { .text-grid { grid-template-columns: 1fr; } }

/* --- collegamenti alle altre pagine ------------------------------------------------------------------------------------- */
.pl-list { border-top: 1px solid var(--rule); margin-top: calc(clamp(2rem, 1.4rem + 2.4vw, 4.25rem) * -1); }
.pl-list a { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) auto; gap: var(--gap); align-items: baseline; padding: clamp(1.3rem, 1rem + 1.2vw, 2.2rem) 0; border-bottom: 1px solid var(--linea); text-decoration: none; transition: padding var(--mid) var(--ease); }
.pl-list b { font-size: clamp(1.4rem, 1.1rem + 1.5vw, 2.5rem); font-weight: 500; text-transform: uppercase; letter-spacing: -0.03em; line-height: 1.05; }
.pl-list span { color: var(--fg-2); }
.pl-list .arw { width: 1.3rem; height: 1.3rem; align-self: center; transition: transform var(--mid) var(--ease); }
.pl-list a:hover { padding-left: var(--space-4); }
.pl-list a:hover .arw { transform: translate(0.2em, -0.2em); }
@media (max-width: 760px) { .pl-list a { grid-template-columns: minmax(0, 1fr) auto; } .pl-list span { grid-column: 1; grid-row: 2; } }

/* --- chiusura -----------------------------------------------------------------------------------------------------------
   Il fondo e' la fotografia fuori fuoco; la scheda bianca al centro le
   fa da cornice, a fuoco, e porta sotto titolo, riga e bottone. */
.chiusura { position: relative; overflow: hidden; padding: clamp(3rem, 2rem + 4vw, 6rem) var(--gutter) clamp(4rem, 3rem + 5vw, 8rem); background: var(--sabbia-2); }
.ch-media { position: absolute; inset: -4%; }
.ch-media img { filter: blur(16px) saturate(0.9); transform: scale(1.06); }
.ch-card { position: relative; z-index: 1; width: min(55rem, 100%); margin-inline: auto; background: var(--bianco); padding: 0.75rem 0.75rem 0; }
.ch-window { aspect-ratio: 1.5; overflow: hidden; }
.ch-body { padding: clamp(1.75rem, 1.4rem + 2vw, 3.2rem) clamp(1rem, 0.5rem + 3vw, 3.5rem) clamp(2.25rem, 1.8rem + 2.4vw, 3.8rem); text-align: center; }
.ch-body h2 { font-size: clamp(1.6rem, 1.2rem + 1.8vw, 2.75rem); font-weight: 600; letter-spacing: -0.025em; }
.ch-body .slash { margin: var(--space-4) auto 0; max-width: 30em; font-weight: 400; }
.ch-body .actions { justify-content: center; margin-top: clamp(1.75rem, 1.4rem + 1.6vw, 3rem); }

/* 06-forms.css */
/* ============================================================
   Moduli.
   Il campo del riferimento: rettangolo a filo, spigolo vivo, il
   segnaposto dentro. Qui l'etichetta resta SOPRA e sempre visibile
   (un segnaposto che sparisce non e' un'etichetta), e il bordo e' il
   gettone --linea-ui, che a 3,35:1 passa la soglia dei componenti.
   ============================================================ */

.ct-grid { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: clamp(2rem, 1rem + 5vw, 7rem); align-items: start; }
.ct-side h2 { font-size: var(--h2-sm); margin-bottom: var(--space-5); }
.ct-lines { margin-top: var(--space-7); border-top: 1px solid var(--rule); }
.ct-lines li { display: grid; grid-template-columns: 8rem minmax(0, 1fr); gap: var(--space-4); padding: 1.1rem 0; border-bottom: 1px solid var(--linea); align-items: baseline; }
.ct-lines span { font-size: var(--small); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; color: var(--tenue); }
.ct-lines a { text-decoration: none; font-size: 1.12rem; }
.ct-lines a:hover { color: var(--laguna); }
.ct-lines address { font-size: 1.05rem; line-height: 1.5; }
@media (max-width: 900px) { .ct-grid { grid-template-columns: 1fr; } }

.form { display: grid; gap: var(--space-6); }
.form--full { background: var(--bianco); padding: clamp(1.5rem, 1rem + 2.4vw, 3.2rem); }
.fields { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.fld { display: grid; gap: 0.5rem; }
.fld--wide { grid-column: 1 / -1; }
.fld label { font-size: var(--small); font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }
.fld label em { font-style: normal; color: var(--laguna); }
.fld input, .fld select, .fld textarea {
  width: 100%; padding: 0.95rem 1rem; border: var(--bordo) solid var(--linea-ui); border-radius: 0; background: var(--bianco);
  color: var(--inchiostro); transition: border-color var(--fast) var(--ease);
}
.fld textarea { resize: vertical; min-height: 7rem; }
.fld select { appearance: none; -webkit-appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--inchiostro) 50%), linear-gradient(135deg, var(--inchiostro) 50%, transparent 50%); background-position: calc(100% - 1.35rem) 55%, calc(100% - 1rem) 55%; background-size: 0.36rem 0.36rem; background-repeat: no-repeat; padding-right: 2.6rem; }
.fld input:hover, .fld select:hover, .fld textarea:hover, .fld input:focus, .fld select:focus, .fld textarea:focus { border-color: var(--inchiostro); }
.fld[data-invalid='true'] input, .fld[data-invalid='true'] select, .fld[data-invalid='true'] textarea { border-color: #A3271B; }
.fld-err { font-size: var(--small); color: #A3271B; min-height: 0; }
.fld-err:empty { display: none; }
.hp { position: absolute; left: -200vw; width: 1px; height: 1px; overflow: hidden; }
.consents { display: grid; gap: var(--space-3); }
.chk { display: grid; grid-template-columns: 1.25rem minmax(0, 1fr); gap: 0.75rem; align-items: start; font-size: var(--small); color: var(--corpo); line-height: 1.5; }
.chk input { width: 1.25rem; height: 1.25rem; margin: 0.1rem 0 0; accent-color: var(--petrolio); border-radius: 0; }
.chk input[aria-invalid='true'] { outline: 2px solid #A3271B; outline-offset: 2px; }
.form .actions { margin-top: 0; }
.form-ok { padding: var(--space-5); border: var(--bordo) solid var(--petrolio); color: var(--petrolio); font-weight: 500; }
@media (max-width: 640px) { .fields { grid-template-columns: 1fr; } }

/* --- il campo del piede: a filo chiaro sull'abisso ------------------------ */
.notify { margin-top: var(--space-5); max-width: 28.75rem; display: grid; gap: var(--space-4); }
.notify .fields { grid-template-columns: 1fr; gap: 0; }
.notify .fld input { background: transparent; border-color: rgba(243, 238, 230, 0.7); color: var(--su-buio); padding: 1.2rem 1.4rem; }
.notify .fld input::placeholder { color: var(--su-buio-2); opacity: 1; }
.notify .fld input:hover, .notify .fld input:focus { border-color: var(--su-buio); }
.notify .fld-err { color: #FFB4A8; margin-top: 0.4rem; }
.notify .chk { color: var(--su-buio-2); }
.notify .chk a { color: var(--schiuma); }
.notify .chk input { accent-color: var(--schiuma); }
.notify .btn { padding-block: 1.5em 1.45em; font-size: 1rem; }
.notify .form-ok { border-color: var(--schiuma); color: var(--schiuma); }

/* 07-panels.css */
/* ============================================================
   Il pannello di contatto.

   Entra al 40% dello scorrimento o dopo 25 secondi, quello che
   viene prima; mai all'ingresso, mai all'uscita del mouse; tenuto
   fermo sopra i due filmati e sopra il modulo di pagina. Congedato
   una volta, resta congedato sette giorni. Il bottone «Prenota» in
   testata apre lo stesso pannello, cosi' non e' mai l'unica strada.

   Una domanda sola prima dei campi: per cosa vieni. Le tre risposte
   sono le tre linee dello studio, piu' «non lo so ancora».
   ============================================================ */

.b2b-panel {
  position: fixed; right: var(--space-5); bottom: var(--space-5); z-index: 80;
  width: min(25rem, calc(100vw - var(--space-5) * 2));
  max-height: min(40rem, calc(100svh - var(--space-7)));
  overflow-y: auto;
  padding: var(--space-7) var(--space-5) var(--space-5);
  --bg: var(--bianco);
  background: var(--bianco); color: var(--inchiostro);
  border: var(--bordo) solid var(--inchiostro);
  box-shadow: 0 24px 60px rgba(4, 28, 34, 0.22);   /* l'unica ombra del sito: galleggia davvero */
  transform: translateY(16px); opacity: 0;
  transition: opacity var(--mid) var(--ease), transform var(--mid) var(--ease);
}
.b2b-panel.is-open { opacity: 1; transform: none; }
.b2b-close {
  position: absolute; top: 0.6rem; right: 0.6rem; width: 2.4rem; height: 2.4rem; border-radius: 50%;
  display: grid; place-items: center; background: var(--sabbia); font-size: 1.4rem; line-height: 1;
  transition: background var(--fast) var(--ease), color var(--fast) var(--ease);
}
.b2b-close:hover { background: var(--inchiostro); color: var(--carta); }
.b2b-panel h2 { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em; margin-bottom: var(--space-3); }
.b2b-intro { font-size: var(--small); color: var(--corpo); margin-bottom: var(--space-5); }
.b2b-choices { display: grid; }
.b2b-option {
  display: grid; gap: 0.2rem; text-align: left; padding: 0.95rem 2.2rem 0.95rem 0; border-top: 1px solid var(--linea); position: relative;
  transition: padding var(--fast) var(--ease), color var(--fast) var(--ease);
}
.b2b-option:last-child { border-bottom: 1px solid var(--linea); }
.b2b-option b { font-size: 0.98rem; font-weight: 600; text-transform: uppercase; letter-spacing: -0.005em; }
.b2b-option span { font-size: var(--small); color: var(--tenue); }
.b2b-option::after {
  content: ''; position: absolute; right: 0.4rem; top: 50%; width: 0.6rem; height: 0.6rem;
  border-top: 1.5px solid currentColor; border-right: 1.5px solid currentColor; transform: translateY(-50%) rotate(0deg);
}
.b2b-option:hover { padding-left: 0.6rem; color: var(--laguna); }
.b2b-back { padding: 0 0 var(--space-4); font-size: var(--small); color: var(--tenue); text-transform: uppercase; letter-spacing: 0.06em; }
.b2b-back::before { content: '\2190\00a0'; }
.b2b-back:hover { color: var(--inchiostro); }
.b2b-panel .form { gap: var(--space-5); }
.b2b-panel .fields { grid-template-columns: 1fr; gap: var(--space-4); }
.b2b-panel .btn { width: 100%; justify-content: center; }

@media (max-width: 620px) {
  .b2b-panel { right: var(--space-3); left: var(--space-3); bottom: var(--space-3); width: auto; }
}