/* 01-tokens.css */
/* ============================================================
   Cengel Holding, gettoni.

   La tavolozza viene dai due filmati: l'85% dei pixel saturi sta fra
   tinta 20 e 40 gradi, cioe' l'ottone, i mattoni al sole, il parquet
   e il progetto in filo d'oro. Il bianco della pagina, le lastre
   rientrate e la struttura del colore (bianco, una lastra accesa, una
   profonda, il nero del modulo) sono del riferimento. Ogni rapporto
   qui sotto e' calcolato, non stimato. Vedi DESIGN.md §2.
   ============================================================ */

@font-face {
  font-family: 'Red Hat Display';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/redhat-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: 'Red Hat Display';
  font-style: normal;
  font-weight: 300 900;
  font-display: swap;
  src: url('../fonts/redhat-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: 'Fira Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/fira-300-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: 'Fira Sans'; font-style: normal; font-weight: 300; font-display: swap; src: url('../fonts/fira-300-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: 'Fira Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/fira-400-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: 'Fira Sans'; font-style: normal; font-weight: 400; font-display: swap; src: url('../fonts/fira-400-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: 'Fira Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/fira-500-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: 'Fira Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('../fonts/fira-500-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: 'Fira Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/fira-600-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: 'Fira Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('../fonts/fira-600-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 {
  /* --- fondi ------------------------------------------------------ */
  --paper:     #FFFFFF;   /* la pagina, bianca come il riferimento */
  --paper-2:   #F5F3EF;   /* il riempimento delle schede, scaldato */
  --stone:     #EDE9E2;   /* la fascia chiara: l'intonaco */
  --ink:       #14171A;   /* il portone: il modulo e il piede.  bianco 17,1:1 */
  --ink-2:     #1F2327;   /* le lastre sopra l'inchiostro */
  --door:      #1E2B26;   /* il verde del portone georgiano: la lastra profonda.  bianco 14,9:1 */
  --door-2:    #28372F;   /* le lastre sopra il verde */
  --brick:     #7A4E3A;   /* il mattone al sole: la lastra accesa.  bianco 7,1:1 */
  --brick-2:   #8A5A44;   /* le lastre sopra il mattone */

  /* --- inchiostri -------------------------------------------------- */
  --text:      #14171A;   /* 17,1:1 su bianco */
  --body:      #454B50;   /*  8,8:1 su bianco, 7,9 sulla pietra */
  --muted:     #6B7176;   /*  4,9:1 su bianco, 4,4 sulla pietra: etichette e testo grande, mai un paragrafo sulla pietra */
  --on-dark:      #F4F2EC;   /* 16,0:1 su inchiostro, 13,9 sul verde */
  --on-dark-soft: #B6BDB8;   /*  9,5:1 su inchiostro, 7,8 sul verde */
  --on-brick:      #FFFFFF;
  --on-brick-soft: #F0DDD3;  /*  5,6:1 sul mattone */

  /* --- l'accento ---------------------------------------------------
     L'ottone e' un filetto, un numero grande, la striscia del piede e
     la parola in evidenza dentro un titolo scuro. Sul bianco le parole
     in ottone usano --brass-text. Sopra la pellicola tutto cio' che e'
     testo e' bianco. */
  --brass:      #B8924A;  /* 2,9:1 su bianco: MAI una parola qui. 6,3 con l'inchiostro sopra */
  --brass-text: #7A5A1E;  /* 6,4:1 su bianco, 5,7 sulla pietra */
  --brass-lit:  #E2C27A;  /* 10,6:1 su inchiostro, 9,2 sul verde, 4,1 sul mattone (solo filetti li') */

  /* --- filetti ---------------------------------------------------------- */
  --line:      #E3DFD8;
  --line-ui:   #8A8F94;   /* bordo dei campi: 3,3 su bianco, 2,9 sulla pietra (li' i campi stanno su bianco) */
  --line-dark: rgba(244, 242, 236, .16);
  --focus:     #7A5A1E;
  --alert:     #A3372B;   /* 5,8:1 su bianco */
  --alert-lit: #F2A08F;

  /* --- la velatura sopra i filmati: inchiostro caldo, non nero ------ */
  --veil-ink: 18, 15, 12;

  /* --- tipografia -------------------------------------------------------- */
  --display: 'Red Hat Display', 'Helvetica Neue', Arial, sans-serif;
  --sans:    'Fira Sans', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  --t-h1:    clamp(2.6rem, 1.4rem + 4.6vw, 5.4rem);
  --t-h2:    clamp(1.9rem, 1.3rem + 2.4vw, 3.2rem);
  --t-h3:    1.25rem;
  --t-big:   clamp(2.6rem, 1.8rem + 3vw, 4.4rem);
  --t-lede:  clamp(1.1rem, 1rem + .4vw, 1.3rem);
  --t-body:  1.0625rem;
  --t-small: .9375rem;
  --t-label: .78rem;
  --t-btn:   .9375rem;

  /* --- forma ---------------------------------------------------------------- */
  --r-plate: 24px;
  --r:       16px;
  --r-btn:   10px;
  --r-sm:    8px;
  --r-field: 8px;

  --shadow-float: 0 2px 6px rgba(20, 23, 26, .06), 0 24px 56px -22px rgba(20, 23, 26, .35);
  --shadow-card:  0 18px 50px -20px rgba(122, 78, 58, .55);

  /* --- ritmo ------------------------------------------------------------------ */
  --s1: .25rem;  --s2: .5rem;   --s3: .75rem;
  --s4: 1rem;    --s5: 1.5rem;  --s6: 2rem;
  --s7: 3rem;    --s8: 4rem;    --s9: 6rem;
  --s10: 8rem;

  --gutter:   clamp(1.25rem, .6rem + 2.4vw, 3.5rem);
  --measure:  36rem;
  --page-max: 78rem;
  --header-h: 68px;

  --ease: cubic-bezier(.215, .61, .355, 1);
}

@media (max-width: 900px) {
  :root { --header-h: 58px; --r-plate: 18px; }
}

/* 02-base.css */
/* ============================================================
   Fondamenta: reimpostazione, tipografia, il bottone, l'etichetta,
   il selettore, gli elenchi, le entrate.
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--body);
  font-family: var(--sans);
  font-size: var(--t-body);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, video, canvas, svg { display: block; max-width: 100%; }
img { height: auto; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
p { margin: 0; }
p + p { margin-top: .9em; }

/* I titoli sono in Red Hat Display a 400, stretti di spaziatura, mai
   il grassetto: e' il riferimento. La parte in un altro tono dentro
   un titolo e' <em>, resa in grigio sul bianco e in ottone chiaro
   sulle lastre scure. */
h1, h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: 1.04;
  letter-spacing: -.028em;
  color: var(--text);
  text-wrap: balance;
}
h1 { font-size: var(--t-h1); line-height: 1.02; letter-spacing: -.032em; }
h2 { font-size: var(--t-h2); }
h1 em, h2 em { font-style: normal; color: var(--muted); }
h3, h4 { margin: 0; font-size: var(--t-h3); font-weight: 500; line-height: 1.3; letter-spacing: -.006em; color: var(--text); }
.lede { font-size: var(--t-lede); line-height: 1.5; color: var(--body); text-wrap: pretty; }
.prose { max-width: var(--measure); }
.prose p + p { margin-top: 1em; }
.prose a { color: var(--brass-text); }
strong, b { font-weight: 600; color: var(--text); }
.ul { color: var(--text); font-weight: 500; }

a { color: inherit; }
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible,
textarea:focus-visible, select:focus-visible, [tabindex]:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 3px;
  border-radius: 3px;
}
[id] { scroll-margin-top: calc(var(--header-h) + var(--s5)); }

.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(--gutter); top: -100px; z-index: 100;
  padding: .7rem 1.1rem; background: var(--ink); color: var(--on-dark);
  border-radius: var(--r-btn); text-decoration: none; font-weight: 500;
}
.skip-link:focus { top: .6rem; }

/* Il segnaposto si vede. */
.todo { color: var(--alert); text-decoration: underline dotted currentColor; text-underline-offset: 3px; }

.wrap { width: min(100% - var(--gutter) * 2, var(--page-max)); margin-inline: auto; }

/* ------------------------------------------------------------
   L'ETICHETTA: maiuscolo spaziato, come «SUPERLÓGICA COM NEXUS PARA
   ADMINISTRADORES» sopra i titoli delle lastre del riferimento.
   ------------------------------------------------------------ */
.tag {
  display: block;
  margin: 0 0 var(--s4);
  color: var(--brass-text);
  font-size: var(--t-label);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  line-height: 1.3;
}
/* sopra la pellicola l'etichetta e' una cella chiara con l'inchiostro:
   contrasto interno, non dipende dal fotogramma */
.tag--film {
  position: absolute; left: .8rem; top: .8rem; margin: 0;
  padding: .42rem .65rem .38rem;
  background: rgba(255, 255, 255, .92); color: var(--text);
  border-radius: var(--r-sm);
  letter-spacing: .1em;
}

/* ------------------------------------------------------------
   IL BOTTONE: il segno del sito. Rettangolo pieno a raggio 10 con
   l'etichetta a sinistra e la freccia lunga a destra, come «Saiba
   mais». Inchiostro sul bianco; ottone sulle lastre scure; bianco sul
   mattone e sopra la pellicola.
   ------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; justify-content: space-between; gap: 1.4rem;
  padding: .85rem 1.2rem .85rem 1.5rem;
  background: var(--ink);
  color: var(--on-dark);
  border: 0;
  border-radius: var(--r-btn);
  font-family: var(--sans);
  font-size: var(--t-btn);
  font-weight: 500;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s var(--ease), color .2s var(--ease), transform .2s var(--ease);
}
.btn-arrow { display: inline-grid; place-items: center; width: 24px; flex: none; transition: transform .25s var(--ease); }
.btn-arrow svg { width: 24px; height: 16px; }
.btn:hover { background: var(--ink-2); }
.btn:hover .btn-arrow { transform: translateX(4px); }

.btn--ghost { background: transparent; color: var(--text); box-shadow: inset 0 0 0 1px var(--line-ui); }
.btn--ghost:hover { background: var(--paper-2); }
.btn--light { background: var(--paper); color: var(--text); }
.btn--light:hover { background: var(--paper-2); }
.btn--film { background: var(--paper); color: var(--text); box-shadow: 0 12px 34px -12px rgba(18, 15, 12, .7); }
.btn--film:hover { background: var(--paper-2); }
.btn--sm { padding: .62rem .9rem .62rem 1.1rem; font-size: .875rem; gap: 1rem; }
.btn--sm .btn-arrow, .btn--sm .btn-arrow svg { width: 20px; }
.btn--wide { width: 100%; }
.actions { display: flex; flex-wrap: wrap; gap: var(--s3); margin-top: var(--s5); }

/* ------------------------------------------------------------
   IL SELETTORE: nel riferimento il modulo apre con due scelte, e la
   scelta porta un quadratino pieno con la spunta. Radio: senza
   JavaScript e' gia' un selettore.
   ------------------------------------------------------------ */
.seg { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0; padding: 0; border: 0; }
.seg input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.seg label {
  display: inline-flex; align-items: center; gap: .6rem;
  padding: .55rem .9rem .55rem .55rem;
  border-radius: var(--r-sm);
  background: var(--paper-2);
  color: var(--text);
  font-size: var(--t-small);
  font-weight: 500;
  cursor: pointer;
  transition: background .25s ease, color .25s ease;
}
.seg label::before {
  content: ''; width: 22px; height: 22px; flex: none; border-radius: 6px;
  background: var(--paper); box-shadow: inset 0 0 0 1px var(--line-ui);
  transition: background .2s, box-shadow .2s;
}
.seg label:hover { background: var(--stone); }
.seg input:checked + label::before {
  background: var(--brick); box-shadow: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 16px; background-position: center; background-repeat: no-repeat;
}
.seg input:focus-visible + label { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ------------------------------------------------------------
   Elenchi.
   ------------------------------------------------------------ */
.chip-list { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: var(--s4); font-size: .8125rem; font-weight: 500; color: var(--text); }
.chip-list li { padding: .3rem .6rem .26rem; background: var(--paper); border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.check-list { display: grid; gap: .65rem; margin-top: var(--s5); }
.check-list li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: .6rem; align-items: start; }
.check-list svg { width: 20px; height: 20px; color: var(--brass-text); margin-top: .15em; }
.note { margin-top: var(--s5); max-width: 62ch; font-size: var(--t-small); color: var(--muted); }

/* ------------------------------------------------------------
   Entrate in scena, sempre dietro `.js`. Tre reti in app.js.
   ------------------------------------------------------------ */
.js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity .6s var(--ease), transform .6s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }

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

/* 03-layout.css */
/* ============================================================
   Impaginato: fasce e lastre, testata, menu, piede, apertura di
   pagina.
   ============================================================ */

/* ------------------------------------------------------------
   Le fasce: bianco, pietra, e LE LASTRE RIENTRATE a raggio 24 in
   mattone, verde portone e inchiostro. La lastra e' il gesto del
   riferimento: la fascia colorata non tocca il bordo dello schermo.
   ------------------------------------------------------------ */
.section { padding-block: clamp(3.5rem, 2rem + 5vw, 7rem); }
.section--tight { padding-block: clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.band--stone { background: var(--stone); }
.band--soft { background: var(--paper-2); }

.plate {
  margin-inline: var(--gutter);
  border-radius: var(--r-plate);
  padding-inline: 0;
}
.plate + .plate { margin-top: var(--s4); }
.plate .plate-inner, .plate .wrap {
  width: min(100% - clamp(1.25rem, .6rem + 3vw, 4.5rem) * 2, var(--page-max));
  margin-inline: auto;
}
.band--brick { background: var(--brick); color: var(--on-brick-soft); }
.band--door { background: var(--door); color: var(--on-dark-soft); }
.band--ink { background: var(--ink); color: var(--on-dark-soft); }
.band--brick h1, .band--brick h2, .band--brick h3, .band--brick strong, .band--brick b,
.band--door h1, .band--door h2, .band--door h3, .band--door strong, .band--door b,
.band--ink h1, .band--ink h2, .band--ink h3, .band--ink strong, .band--ink b { color: #FFFFFF; }
.band--brick .lede, .band--door .lede, .band--ink .lede,
.band--brick .prose, .band--door .prose, .band--ink .prose { color: var(--on-dark); }
.band--brick .lede { color: #FFFFFF; }
.band--door h2 em, .band--ink h2 em { color: var(--brass-lit); }
.band--brick h2 em { color: var(--on-brick-soft); }
.band--door .tag, .band--ink .tag { color: var(--brass-lit); }
.band--brick .tag { color: #FFFFFF; }
.band--door .note, .band--ink .note { color: var(--on-dark-soft); }
.band--brick .note { color: var(--on-brick-soft); }
.band--door .btn, .band--ink .btn { background: var(--brass); color: var(--ink); }
.band--door .btn:hover, .band--ink .btn:hover { background: var(--brass-lit); }
.band--brick .btn { background: #FFFFFF; color: var(--text); }
.band--brick .btn:hover { background: var(--paper-2); }
.band--door .btn--ghost, .band--ink .btn--ghost, .band--brick .btn--ghost { background: transparent; color: #FFFFFF; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .4); }
.band--door .btn--ghost:hover, .band--ink .btn--ghost:hover, .band--brick .btn--ghost:hover { background: rgba(255, 255, 255, .08); }
.band--door .check-list svg, .band--ink .check-list svg { color: var(--brass-lit); }
.band--brick .check-list svg { color: #FFFFFF; }
.band--door .prose a, .band--ink .prose a { color: var(--brass-lit); }
.band--brick .prose a { color: #FFFFFF; }
.band--stone + .band--stone, .band--soft + .band--soft { padding-top: 0; }

/* Intestazione di sezione: occhiello, titolo, sommario a destra. */
.section-head {
  display: grid; gap: var(--s4) var(--gutter);
  margin-bottom: clamp(2rem, 1.2rem + 2.6vw, 3.5rem);
}
.section-head h2 { max-width: 20ch; }
.sh-intro { align-self: end; max-width: 46ch; font-size: var(--t-lede); line-height: 1.45; }
.band--door .sh-intro, .band--ink .sh-intro { color: var(--on-dark); }
.band--brick .sh-intro { color: #FFFFFF; }
.section-head--center { text-align: center; justify-items: center; }
.section-head--center h2 { max-width: 24ch; }
@media (min-width: 901px) {
  .section-head:not(.section-head--center) { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); align-items: end; }
}

/* Due colonne: intestazione a sinistra, corpo a destra. */
.two { display: grid; gap: var(--s6) var(--gutter); }
.two-head h2 { max-width: 16ch; }
.two-head .lede { margin-top: var(--s4); max-width: 34ch; }
@media (min-width: 901px) { .two { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* ------------------------------------------------------------
   TESTATA. Bianca, sottile, sempre piena: il palco parte sotto di
   lei. Marchio a sinistra, le voci subito dopo (non centrate, non a
   destra: e' il riferimento), a destra la lingua, il telefono e
   l'unico bottone pieno.
   ------------------------------------------------------------ */
.site-header {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: clamp(1rem, .4rem + 2vw, 2.6rem);
  height: var(--header-h);
  padding-inline: var(--gutter);
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-brand { flex: none; text-decoration: none; color: var(--text); }
.wordmark { display: inline-flex; align-items: center; gap: .55rem; color: inherit; }
.mark { width: 22px; height: 28px; flex: none; color: var(--text); }
.wordmark-text { display: inline-flex; align-items: baseline; gap: .35rem; white-space: nowrap; line-height: 1; }
.wordmark-text b { font-family: var(--display); font-weight: 500; font-size: 1.32rem; letter-spacing: -.02em; color: var(--text); }
.wordmark-text span { font-family: var(--sans); font-weight: 400; font-size: .95rem; color: var(--muted); letter-spacing: .01em; }
.wordmark--light .mark, .wordmark--light .wordmark-text b { color: #FFFFFF; }
.wordmark--light .wordmark-text span { color: var(--on-dark-soft); }

.nav-main { min-width: 0; }
.nav-list { display: flex; align-items: center; gap: clamp(.9rem, .2rem + 1.4vw, 1.8rem); }
.nav-link {
  display: inline-flex; align-items: center; padding: .55rem 0;
  color: var(--body); font-size: .9375rem; font-weight: 500; text-decoration: none; white-space: nowrap;
  border-bottom: 1.5px solid transparent;
  transition: border-color .2s var(--ease), color .2s var(--ease);
}
.nav-link:hover { color: var(--text); }
.nav-link[aria-current='page'] { color: var(--text); border-bottom-color: var(--brass); }

.header-tools { display: flex; align-items: center; gap: .6rem; flex: none; margin-inline-start: auto; }
.header-phone {
  display: inline-flex; align-items: center; gap: .45rem;
  color: var(--text); font-size: .9375rem; font-weight: 500; text-decoration: none; white-space: nowrap;
}
.header-phone svg { width: 18px; height: 18px; color: var(--brass-text); }
.header-phone:hover { color: var(--brass-text); }
.lang-switch {
  display: inline-grid; place-items: center; min-width: 2.4rem; height: 2.4rem;
  border-radius: var(--r-sm); background: var(--paper-2); color: var(--text);
  font-size: .8125rem; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; text-decoration: none;
}
.lang-switch:hover { background: var(--stone); }
.menu-toggle {
  display: none; align-items: center; justify-content: center;
  width: 2.5rem; height: 2.4rem;
  background: var(--paper-2); border-radius: var(--r-sm);
  color: var(--text); text-decoration: none;
}
.menu-bars { display: grid; gap: 5px; }
.menu-bars span { display: block; width: 16px; height: 1.6px; background: currentColor; }

/* Le voci italiane sono piu' lunghe di quelle inglesi: la barra si
   misura sull'italiano a 1440 e sotto i 1320 le voci passano nel menu. */
@media (max-width: 1500px) { .header-phone span { display: none; } }
@media (max-width: 1320px) {
  .nav-main { display: none; }
  .menu-toggle { display: inline-flex; }
}
@media (max-width: 480px) {
  .wordmark-text span { display: none; }
  .cta-book { display: none; }
}

/* ------------------------------------------------------------
   IL MENU A TUTTO SCHERMO. Inchiostro, le voci numerate, la lingua
   e il telefono in fondo. Si apre con :target prima che il
   JavaScript arrivi.
   ------------------------------------------------------------ */
.site-menu { position: fixed; inset: 0; z-index: 60; opacity: 0; visibility: hidden; transition: opacity .28s var(--ease), visibility .28s; }
.site-menu:target, .site-menu.is-open { opacity: 1; visibility: visible; }
.menu-scrim { position: absolute; inset: 0; background: rgba(18, 15, 12, .5); }
.menu-inner {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(30rem, 100%);
  display: flex; flex-direction: column;
  overflow-y: auto;
  background: var(--ink);
  color: var(--on-dark);
  box-shadow: var(--shadow-float);
  transform: translateX(24px);
  transition: transform .32s var(--ease);
}
.site-menu:target .menu-inner, .site-menu.is-open .menu-inner { transform: none; }
html.menu-open { overflow: hidden; }
.menu-head { display: flex; align-items: center; justify-content: space-between; padding: 1rem var(--gutter); height: var(--header-h); border-bottom: 1px solid var(--line-dark); }
.menu-close {
  width: 38px; height: 38px; display: grid; place-items: center;
  border-radius: var(--r-sm); background: var(--ink-2); color: var(--on-dark);
  font-size: 1.5rem; line-height: 1; text-decoration: none;
}
.menu-groups { padding: var(--s5) var(--gutter); display: grid; gap: var(--s6); }
.menu-h { margin: 0 0 var(--s2); color: var(--brass-lit); font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.menu-row {
  display: grid; grid-template-columns: 2.2rem minmax(0, 1fr) auto; align-items: center; gap: .6rem;
  padding: .85rem 0;
  color: var(--on-dark); text-decoration: none; font-size: 1.1rem; font-weight: 500;
  border-top: 1px solid var(--line-dark);
}
.menu-row:hover .btn-arrow { transform: translateX(4px); }
.menu-row[aria-current='page'] .menu-label { text-decoration: underline; text-underline-offset: 5px; text-decoration-color: var(--brass); }
.menu-row .btn-arrow { color: var(--brass-lit); }
.menu-n { font-family: var(--display); font-size: .9rem; color: var(--brass-lit); }
.menu-label small { display: block; font-size: .8125rem; font-weight: 400; color: var(--on-dark-soft); }
.menu-foot {
  margin-top: auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: 1.1rem var(--gutter);
  border-top: 1px solid var(--line-dark);
  font-size: .9rem; font-weight: 500;
}
.menu-foot a { color: var(--on-dark); text-decoration: none; }
.menu-langs { display: flex; gap: 1rem; text-transform: uppercase; letter-spacing: .08em; font-size: .8125rem; }
.menu-langs a[aria-current='true'] { color: var(--brass-lit); }
.menu-phone { display: inline-flex; align-items: center; gap: .5rem; }
.menu-phone svg { width: 18px; height: 18px; color: var(--brass-lit); }

/* ------------------------------------------------------------
   PIEDE. Quasi nero con le colonne in maiuscoletto, la striscia
   d'ottone con le due sedi (nel riferimento e' blu), la riga legale.
   ------------------------------------------------------------ */
.site-footer { background: var(--ink); color: var(--on-dark-soft); }
.footer-body { padding-block: var(--s8) var(--s7); }
.footer-top { display: grid; gap: var(--s7) var(--gutter); }
@media (min-width: 901px) { .footer-top { grid-template-columns: minmax(0, 1.1fr) minmax(0, 2fr); } }
.footer-blurb { margin-top: var(--s5); max-width: 34ch; font-size: var(--t-small); }
.footer-social { display: flex; gap: .6rem; margin-top: var(--s5); }
.footer-social a { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--r-sm); background: var(--ink-2); color: var(--on-dark); }
.footer-social svg { width: 18px; height: 18px; }
.footer-social a:hover { color: var(--brass-lit); }
.footer-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(10rem, 100%), 1fr)); gap: var(--s6) var(--s5); }
.footer-h { margin: 0 0 var(--s4); color: #FFFFFF; font-size: var(--t-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.footer-col ul { display: grid; gap: .6rem; font-size: var(--t-small); }
.footer-col a { color: var(--on-dark-soft); text-decoration: none; }
.footer-col a:hover { color: #FFFFFF; text-decoration: underline; text-underline-offset: 4px; }

.footer-strip { background: var(--brass); color: var(--ink); font-size: .875rem; line-height: 1.6; }
.footer-strip .wrap { padding-block: var(--s4); display: grid; gap: .25rem; }
.footer-strip b { color: var(--ink); font-weight: 600; }
.footer-strip a { color: var(--ink); font-weight: 500; }
.fs-sep { opacity: .5; }

.footer-legal { background: var(--paper-2); color: var(--muted); font-size: .8125rem; line-height: 1.7; }
.footer-legal .wrap { padding-block: var(--s4); display: grid; gap: var(--s2); max-width: none; }
.footer-legal p { max-width: 100ch; }
.footer-copy { display: flex; flex-wrap: wrap; gap: var(--s4); }
.footer-copy a { color: var(--muted); }

/* ------------------------------------------------------------
   Apertura di pagina interna: etichetta e titolo a sinistra,
   sommario e bottoni a destra, poi la fotografia larga a raggio 16.
   ------------------------------------------------------------ */
.page-hero { padding-block: clamp(2.2rem, 1.2rem + 3vw, 4rem) clamp(2rem, 1.2rem + 3vw, 3.5rem); }
.breadcrumb ol { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: var(--s5); font-size: .8125rem; font-weight: 500; color: var(--muted); }
.breadcrumb li + li::before { content: '/'; margin-right: .5rem; color: var(--brass); }
.breadcrumb a { color: var(--muted); text-decoration: none; }
.breadcrumb a:hover { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.ph-grid { display: grid; gap: var(--s5) var(--gutter); }
.ph-text h1 { max-width: 16ch; }
.ph-side .lede { max-width: 42ch; }
@media (min-width: 901px) {
  .ph-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; }
}
.ph-figure { position: relative; margin-top: clamp(2rem, 1.2rem + 2.6vw, 3.5rem); border-radius: var(--r); overflow: hidden; }
.ph-figure img { width: 100%; aspect-ratio: 21 / 9; object-fit: cover; }
.hero-meta {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: var(--s5);
  margin: var(--s6) 0 0; padding-top: var(--s5); border-top: 1px solid var(--line);
}
.hero-meta dt { font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.hero-meta dd { margin: .3rem 0 0; font-family: var(--display); font-size: 1.7rem; line-height: 1.1; letter-spacing: -.02em; color: var(--text); }
@media (max-width: 700px) { .ph-figure img { aspect-ratio: 4 / 3; } }

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

   DUE FILMATI, DUE MESTIERI, DUE FORMATI. L'apertura riproduce e
   basta: <video> muto in ciclo a 48 fps. Il racconto si scrubba:
   957 JPEG a 48 fps disegnati su canvas.

   Il palco parte SOTTO la barra ed e' alto quanto lo schermo meno la
   barra. Il testo sta sulla pellicola nuda, bianco, con una velatura
   in inchiostro caldo e un alone sulle lettere. Niente schede sopra i
   filmati. Le densita' si misurano con tools/misura.mjs e
   tools/contrasto.py (README §Misure).
   ============================================================ */

/* ------------------------------------------------------------
   L'apertura. Riga di servizio e titolo in due righe in basso a
   sinistra, la seconda rientrata (la meta' spostata del riferimento),
   un bottone solo in basso a destra, e il filo d'ottone che si
   disegna una volta (DESIGN.md §6).
   ------------------------------------------------------------ */
.videohero {
  position: relative;
  height: calc(100svh - var(--header-h));
  min-height: 34rem;
  overflow: hidden;
  background: var(--ink);
  isolation: isolate;
}
.film-stage { position: absolute; inset: 0; }
.vh-video, .vh-poster, .vh-poster img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: 50% 50%;
}
.vh-poster { z-index: 0; }
.vh-video { z-index: 1; }

/* La velatura: dal basso in inchiostro caldo, piatta sotto il blocco
   e a zero entro il 55%. Leggera: il contrasto delle parole grandi lo
   fa l'alone sulle lettere. Si misura sulle scatole vere. */
.vh-veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background:
    linear-gradient(to top, rgba(var(--veil-ink), .58) 0%, rgba(var(--veil-ink), .5) 24%, rgba(var(--veil-ink), .36) 40%, rgba(var(--veil-ink), .12) 52%, rgba(var(--veil-ink), 0) 62%);
}

/* IL FILO. Il filo ciano del riferimento, in ottone: una linea di un
   pixel e mezzo che si disegna da sinistra a destra all'apertura,
   una volta sola. Sta sopra la velatura e sotto il testo. */
.vh-wire { position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; pointer-events: none; opacity: .85; }
.vh-wire path {
  stroke: var(--brass-lit); stroke-width: 1.5; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: wire 2.6s var(--ease) .5s forwards;
}
@keyframes wire { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) { .vh-wire path { stroke-dashoffset: 0; animation: none; } }

.vh-inner {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 3;
  display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end;
  gap: var(--s6) var(--gutter);
  padding: 0 var(--gutter) clamp(1.8rem, 1rem + 3.2vh, 3.4rem);
}
/* L'alone: tre strati che seguono le lettere (memoria «filmato di
   apertura luminoso»). */
.vh-kicker {
  margin: 0 0 var(--s4);
  color: #FFFFFF;
  /* 24 px, non 22: sopra i 24 la norma chiede 3:1 invece di 4,5, e la
     riga sta dove la velatura e' ancora leggera. Misurato: a 22 px
     stava a 2,85:1 contro 4,5. */
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1.35;
  max-width: 30ch;
  text-shadow: 0 1px 2px rgba(var(--veil-ink), .6), 0 0 18px rgba(var(--veil-ink), .5);
}
.vh-title {
  display: grid;
  color: #FFFFFF;
  font-size: clamp(2.6rem, 1.2rem + 5.2vw, 6rem);
  line-height: .98;
  text-shadow: 0 1px 2px rgba(var(--veil-ink), .5), 0 0 26px rgba(var(--veil-ink), .38), 0 0 80px rgba(var(--veil-ink), .42);
}
.vh-title em { color: var(--brass-lit); }
.vh-l2 { margin-left: clamp(1.5rem, 1rem + 6vw, 8rem); }
.vh-side { display: grid; gap: var(--s4); justify-items: end; }
.vh-scroll {
  display: inline-flex; align-items: center; gap: .6rem;
  color: rgba(255, 255, 255, .9); font-size: var(--t-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none;
  text-shadow: 0 1px 2px rgba(var(--veil-ink), .6);
}
.vh-scroll i { width: 18px; height: 28px; border: 1.4px solid rgba(255, 255, 255, .6); border-radius: 9px; position: relative; }
.vh-scroll i::after { content: ''; position: absolute; left: 50%; top: 6px; width: 2px; height: 6px; margin-left: -1px; border-radius: 1px; background: #FFFFFF; animation: scrollcue 1.9s var(--ease) infinite; }
@keyframes scrollcue { 0%, 100% { transform: translateY(0); opacity: 1; } 55% { transform: translateY(8px); opacity: .2; } }

/* Il caso stretto e' un altro strumento: `cover` tiene la fetta
   centrale, il titolo va a tutta larghezza, il rientro si toglie. */
@media (max-width: 900px) {
  .vh-inner { grid-template-columns: minmax(0, 1fr); gap: var(--s5); padding-bottom: clamp(1.4rem, 1rem + 2vh, 2.4rem); }
  .vh-title { font-size: clamp(2.2rem, 1.2rem + 6.4vw, 3.6rem); }
  .vh-l2 { margin-left: 0; }
  .vh-kicker { font-size: 1.05rem; }
  .vh-side { justify-items: start; }
  .vh-scroll { display: none; }
  .vh-veil {
    background:
      linear-gradient(to top, rgba(var(--veil-ink), .72) 0%, rgba(var(--veil-ink), .62) 34%, rgba(var(--veil-ink), .26) 56%, rgba(var(--veil-ink), 0) 70%);
  }
}

/* ------------------------------------------------------------
   Il racconto.

   L'altezza della sezione E' la velocita' dello scrub: i 957
   fotogrammi si distribuiscono su `altezza - 100svh`. A 1500vh su
   uno schermo da 900 sono 13 px per fotogramma a 48 fps, cioe' 630
   px per secondo di pellicola.
   ------------------------------------------------------------ */
.scrolly { position: relative; height: calc(var(--seq-vh, 1500) * 1vh); background: var(--ink); }
@media (max-width: 900px) { .scrolly { height: calc(var(--seq-vh-n, 1900) * 1vh); } }

/* Il palco e' una griglia: una riga vuota, una riga con le didascalie
   (a sinistra o a destra), e in fondo la sezione in scala. */
.scrolly-stage {
  position: sticky; top: var(--header-h);
  height: calc(100svh - var(--header-h));
  overflow: hidden;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 1fr auto auto;
  padding: 0 var(--gutter) clamp(1.2rem, .8rem + 1.6vh, 2rem);
}
.scrolly-canvas, .scrolly-poster { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; }
.scrolly-poster img { width: 100%; height: 100%; object-fit: cover; }
[data-painted='true'] .scrolly-poster { opacity: 0; }

/* LA VELATURA DEL RACCONTO. Dal basso, piatta sotto il blocco e a
   zero entro il 55%; piu' una lavata sul lato attivo, che segue il
   capitolo via :has(). La sinistra e' piu' densa perche' a sinistra
   c'e' la finestra (p95 0,58 contro 0,28). Senza :has() restano
   tutt'e due. */
.scrolly-veil {
  position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: linear-gradient(to top,
    rgba(var(--veil-ink), .64) 0%,
    rgba(var(--veil-ink), .56) 28%,
    rgba(var(--veil-ink), .3) 44%,
    rgba(var(--veil-ink), 0) 58%);
}
.scrolly-veil::before, .scrolly-veil::after {
  content: ''; position: absolute; inset: 0; opacity: 1; transition: opacity .5s var(--ease);
}
.scrolly-veil::before { background: linear-gradient(to right, rgba(var(--veil-ink), .55) 0%, rgba(var(--veil-ink), .28) 34%, rgba(var(--veil-ink), 0) 58%); }
.scrolly-veil::after { background: linear-gradient(to left, rgba(var(--veil-ink), .5) 0%, rgba(var(--veil-ink), .26) 34%, rgba(var(--veil-ink), 0) 58%); }
.scrolly-stage:has(.scrolly-phase.is-active[data-side='left']) .scrolly-veil::after { opacity: 0; }
.scrolly-stage:has(.scrolly-phase.is-active[data-side='right']) .scrolly-veil::before { opacity: 0; }

/* Le didascalie e l'apertura stanno nella STESSA riga. Il motore
   scrive opacita' e trasformazione sulla fase e sull'apertura:
   niente transform qui sopra. */
.scrolly-lead, .scrolly-captions { grid-area: 2 / 1; position: relative; z-index: 3; width: 100%; }
.scrolly-captions { display: grid; }
.scrolly-phase { grid-area: 1 / 1; opacity: 0; pointer-events: none; }
.scrolly-lead, .scrolly-phase[data-side='left'] { justify-self: start; }
.scrolly-phase[data-side='right'] { justify-self: end; }

.cap { max-width: 31rem; color: #FFFFFF; }
.cap-tag {
  position: relative;
  display: block; height: 1px;
  margin: 0 0 var(--s4);
}
/* IL FILO sopra il titolo: un filetto d'ottone che si disegna da
   sinistra a destra quando il capitolo entra. La riga di servizio con
   il numerale e il tema non c'e' piu': a 12 px sulla pellicola stava
   fra 2,07:1 e 3,35:1, e diceva quello che i nomi sotto le tacche
   dicono gia'. Resta per i lettori di schermo. */
.cap-wire { position: absolute; left: 0; top: 0; height: 1px; width: 100%; background: var(--brass-lit); transform: scaleX(0); transform-origin: left; transition: transform .42s var(--ease); }
.cap-title {
  color: #FFFFFF;
  font-size: clamp(1.8rem, 1.15rem + 1.9vw, 2.7rem);
  line-height: 1.04;
  text-shadow: 0 1px 2px rgba(var(--veil-ink), .5), 0 0 24px rgba(var(--veil-ink), .4), 0 0 70px rgba(var(--veil-ink), .4);
}
.cap-title em { color: var(--brass-lit); }
.cap-text {
  margin-top: var(--s3);
  max-width: 44ch;
  font-size: 1.125rem;
  color: rgba(255, 255, 255, .95);
  text-shadow: 0 1px 2px rgba(var(--veil-ink), .55), 0 0 22px rgba(var(--veil-ink), .45);
}
.cap--lead .cap-title { font-size: clamp(2.1rem, 1.2rem + 2.8vw, 3.6rem); }
.cap--lead .cap-wire { transform: none; }
.lead-hint { display: inline-flex; align-items: center; gap: .6em; margin-top: var(--s4); color: rgba(255, 255, 255, .88); font-size: var(--t-label); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.lead-hint span { width: 18px; height: 28px; flex: none; border: 1.4px solid rgba(255, 255, 255, .6); border-radius: 9px; position: relative; }
.lead-hint span::after {
  content: ''; position: absolute; left: 50%; top: 6px; width: 2px; height: 6px; margin-left: -1px;
  border-radius: 1px; background: #FFFFFF;
  animation: scrollcue 1.9s var(--ease) infinite;
}

/* L'ENTRATA: il filo si traccia, e le due righe scendono di otto
   pixel a 90 e 180 ms. */
.scrolly-phase .cap-title, .scrolly-phase .cap-text {
  opacity: 0; translate: 0 -8px;
  transition: opacity .4s var(--ease), translate .5s var(--ease);
}
.scrolly-phase.is-active .cap-title, .scrolly-phase.is-active .cap-text { opacity: 1; translate: 0 0; }
.scrolly-phase.is-active .cap-wire { transform: scaleX(1); }
.scrolly-phase.is-active .cap-title { transition-delay: .09s; }
.scrolly-phase.is-active .cap-text { transition-delay: .18s; }

/* ------------------------------------------------------------
   LA SEZIONE IN SCALA. Sul bordo basso: una linea che il motore
   riempie in larghezza, sei tacche ai confini VERI dei capitoli e
   sotto ogni tacca il nome; la corrente in ottone via :has(). Il
   motore scrive l'opacita' di `.scrolly-counter` come rovescio
   dell'apertura.
   ------------------------------------------------------------ */
.scrolly-counter { grid-area: 3 / 1; position: relative; z-index: 3; height: 34px; margin-top: var(--s5); }
.route { position: absolute; inset: 0; }
.route-track { position: absolute; left: 0; right: 0; top: 5px; height: 2px; background: rgba(255, 255, 255, .3); }
.scrolly-progress { position: absolute; inset: 0; overflow: hidden; }
.scrolly-progress i { display: block; height: 100%; width: 0; background: var(--brass-lit); }
.stop { position: absolute; left: var(--at); top: 0; width: 12px; height: 12px; margin-left: -6px; }
.stop i { position: absolute; inset: 0; border-radius: 50%; background: var(--ink); border: 1.5px solid rgba(255, 255, 255, .85); box-shadow: 0 0 0 3px rgba(var(--veil-ink), .35); transition: background .3s var(--ease); }
.stop b {
  position: absolute; left: 0; top: 18px;
  font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; white-space: nowrap;
  color: rgba(255, 255, 255, .62);
  text-shadow: 0 1px 2px rgba(var(--veil-ink), .6);
  transition: color .3s var(--ease);
}
.scrolly-stage:has(.scrolly-phase:nth-child(1).is-active) .stop[data-k='1'],
.scrolly-stage:has(.scrolly-phase:nth-child(2).is-active) .stop[data-k='2'],
.scrolly-stage:has(.scrolly-phase:nth-child(3).is-active) .stop[data-k='3'],
.scrolly-stage:has(.scrolly-phase:nth-child(4).is-active) .stop[data-k='4'],
.scrolly-stage:has(.scrolly-phase:nth-child(5).is-active) .stop[data-k='5'],
.scrolly-stage:has(.scrolly-phase:nth-child(6).is-active) .stop[data-k='6'] { --on: 1; }
.scrolly-stage:has(.scrolly-phase:nth-child(1).is-active) .stop[data-k='1'] i,
.scrolly-stage:has(.scrolly-phase:nth-child(2).is-active) .stop[data-k='2'] i,
.scrolly-stage:has(.scrolly-phase:nth-child(3).is-active) .stop[data-k='3'] i,
.scrolly-stage:has(.scrolly-phase:nth-child(4).is-active) .stop[data-k='4'] i,
.scrolly-stage:has(.scrolly-phase:nth-child(5).is-active) .stop[data-k='5'] i,
.scrolly-stage:has(.scrolly-phase:nth-child(6).is-active) .stop[data-k='6'] i { background: var(--brass-lit); border-color: var(--brass-lit); }
.scrolly-stage:has(.scrolly-phase:nth-child(1).is-active) .stop[data-k='1'] b,
.scrolly-stage:has(.scrolly-phase:nth-child(2).is-active) .stop[data-k='2'] b,
.scrolly-stage:has(.scrolly-phase:nth-child(3).is-active) .stop[data-k='3'] b,
.scrolly-stage:has(.scrolly-phase:nth-child(4).is-active) .stop[data-k='4'] b,
.scrolly-stage:has(.scrolly-phase:nth-child(5).is-active) .stop[data-k='5'] b,
.scrolly-stage:has(.scrolly-phase:nth-child(6).is-active) .stop[data-k='6'] b { color: #FFFFFF; }

@media (max-width: 900px) {
  .cap { max-width: none; }
  .cap--lead .cap-tag { display: none; }
  .scrolly-lead, .scrolly-phase[data-side='right'], .scrolly-phase[data-side='left'] { justify-self: stretch; }
  .cap-title { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2rem); }
  .cap-text { font-size: var(--t-body); }
  .scrolly-counter { margin-top: var(--s4); height: 14px; }
  .stop b { display: none; }
  /* IL CASO STRETTO: il testo va a tutta larghezza e `cover` tiene la
     fetta centrale, che e' un'altra inquadratura. Piu' densa, piu'
     alta, e le lavate laterali si tolgono. */
  .scrolly-veil {
    background: linear-gradient(to top,
      rgba(var(--veil-ink), .7) 0%,
      rgba(var(--veil-ink), .62) 34%,
      rgba(var(--veil-ink), .26) 54%,
      rgba(var(--veil-ink), 0) 68%);
  }
  .scrolly-veil::before, .scrolly-veil::after { display: none; }
}

/* ------------------------------------------------------------
   Il ripiego senza JavaScript. `data-mode="static"` e' quello che
   parte nell'HTML; il motore promuove. L'ATTRIBUTO STA SULLA
   SEZIONE STESSA (lezione PodoClinic).
   ------------------------------------------------------------ */
.scrolly[data-mode='static'] { height: auto; background: var(--paper); }
.scrolly[data-mode='static'] .scrolly-stage {
  position: static; height: auto; overflow: visible;
  display: block; padding: 0;
}
.scrolly[data-mode='static'] .scrolly-canvas, .scrolly[data-mode='static'] .scrolly-veil, .scrolly[data-mode='static'] .scrolly-counter { display: none; }
.scrolly[data-mode='static'] .scrolly-poster { position: relative; height: clamp(22rem, 56svh, 40rem); }
.scrolly[data-mode='static'] .scrolly-lead { width: min(100% - var(--gutter) * 2, var(--page-max)); margin-inline: auto; padding-block: var(--s7) 0; justify-self: auto; }
.scrolly[data-mode='static'] .scrolly-captions {
  display: grid; gap: var(--s8);
  width: min(100% - var(--gutter) * 2, var(--page-max)); margin-inline: auto;
  padding-block: var(--s7) var(--s9);
}
.scrolly[data-mode='static'] .scrolly-phase { grid-area: auto; opacity: 1; pointer-events: auto; display: grid; gap: var(--s5); justify-self: auto; }
.scrolly[data-mode='static'] .cap { max-width: 40rem; color: var(--text); }
.scrolly[data-mode='static'] .cap-tag { margin-bottom: var(--s4); }
.scrolly[data-mode='static'] .cap-wire { background: var(--brass); transform: none; }
.scrolly[data-mode='static'] .cap-title, .scrolly[data-mode='static'] .cap-text { color: var(--text); text-shadow: none; }
.scrolly[data-mode='static'] .cap-title em { color: var(--muted); }
.scrolly[data-mode='static'] .cap-text { color: var(--body); }
.scrolly[data-mode='static'] .scrolly-phase .cap-title, .scrolly[data-mode='static'] .scrolly-phase .cap-text { opacity: 1; translate: 0 0; }
.scrolly[data-mode='static'] .lead-hint { display: none; }
.scrolly[data-mode='static'] .scrolly-still img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r); }
[data-mode='scrub'] .scrolly-still { display: none; }

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

   Tre regole valgono per tutto il file: le schede hanno il
   riempimento appena percepibile e nessun bordo ne' ombra (il
   riferimento); le righe si separano con un filetto; l'accento vive
   nel numero, nel filetto sopra il blocco e nella parola in un altro
   tono, mai in una barra a sinistra.
   ============================================================ */

/* La scheda: da bianco a pietra chiara, dall'alto in basso, come
   «+130 mil». */
.card-fill { background: linear-gradient(to bottom, var(--paper) 0%, var(--paper-2) 100%); border-radius: var(--r); }

/* ------------------------------------------------------------
   La frase che si accende.
   ------------------------------------------------------------ */
.statement { padding-block: clamp(3rem, 2rem + 4vw, 6rem); }
.statement-text {
  max-width: 24ch;
  font-family: var(--display); font-weight: 400;
  font-size: clamp(2rem, 1.2rem + 3.2vw, 4.2rem); line-height: 1.06; letter-spacing: -.03em;
  color: var(--text); text-wrap: balance;
}
.statement-text .w { display: inline; transition: opacity .5s var(--ease); transition-delay: calc(var(--i) * 45ms); }
.js .statement .w { opacity: .16; }
.js .statement.is-in .w { opacity: 1; }
.statement-text em { font-style: normal; color: var(--muted); }
.statement-cite { margin-top: var(--s5); font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }

/* ------------------------------------------------------------
   Le quattro linee: schede con la fotografia, il numero, il testo e
   le voci in pastiglia.
   ------------------------------------------------------------ */
.svc-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s4); }
.svc {
  display: flex; flex-direction: column;
  background: linear-gradient(to bottom, var(--paper) 0%, var(--paper-2) 100%);
  border-radius: var(--r); overflow: hidden;
  color: inherit; text-decoration: none;
  transition: transform .3s var(--ease);
}
.svc:hover { transform: translateY(-3px); }
.svc-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.svc-body { display: flex; flex-direction: column; flex: 1; padding: var(--s5); }
.svc-n { font-family: var(--display); font-size: .95rem; font-weight: 500; letter-spacing: .06em; color: var(--brass-text); margin-bottom: var(--s3); }
.svc-body h3 { font-size: 1.3rem; }
.svc-body > p { margin-top: var(--s3); font-size: var(--t-small); }
.svc-go {
  margin-top: auto; padding-top: var(--s5);
  display: inline-flex; align-items: center; gap: .8rem;
  font-size: .875rem; font-weight: 500; color: var(--text);
}
.svc-go .btn-arrow { color: var(--brass-text); }
.svc:hover .svc-go .btn-arrow { transform: translateX(4px); }
@media (max-width: 1100px) { .svc-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .svc-grid { grid-template-columns: 1fr; } }

/* ------------------------------------------------------------
   Il confronto: intro in pietra, il modo di sempre in bianco,
   il nostro pieno in mattone con l'ombra. E' la scheda del
   riferimento («sem / com Superlógica»), e qui il mattone e' l'unica
   ombra della pagina fuori dal pannello.
   ------------------------------------------------------------ */
.cmp { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr) minmax(0, 1.2fr); gap: 0; align-items: stretch; }
.cmp-intro { padding: clamp(1.5rem, 1rem + 2vw, 3rem); background: var(--stone); border-radius: var(--r) 0 0 var(--r); display: grid; align-content: center; }
.cmp-intro p { max-width: 30ch; color: var(--text); font-size: var(--t-lede); line-height: 1.45; }
.cmp-col { padding: clamp(1.5rem, 1rem + 2vw, 3rem); display: grid; align-content: start; gap: var(--s5); }
.cmp-col h3 { font-family: var(--display); font-weight: 400; font-size: 1.5rem; letter-spacing: -.02em; }
.cmp-col ul { display: grid; gap: var(--s4); }
.cmp-col li { font-size: var(--t-small); line-height: 1.5; max-width: 38ch; }
.cmp-col--plain { background: var(--paper-2); }
.cmp-col--plain li { color: var(--muted); }
.cmp-col--full { background: var(--brick); color: #FFFFFF; border-radius: var(--r); box-shadow: var(--shadow-card); position: relative; z-index: 1; }
.cmp-col--full h3, .cmp-col--full li { color: #FFFFFF; }
.cmp-col--full .actions { margin-top: var(--s2); }
@media (max-width: 900px) {
  .cmp { grid-template-columns: 1fr; }
  .cmp-intro { border-radius: var(--r) var(--r) 0 0; }
}

/* ------------------------------------------------------------
   La lastra con la fisarmonica e la fotografia.
   ------------------------------------------------------------ */
.plate-inner { display: grid; gap: var(--s7) var(--gutter); align-items: start; }
.plate-text h2 { max-width: 18ch; }
.plate-text .lede { margin-top: var(--s4); max-width: 46ch; }
.plate-figure { position: relative; border-radius: var(--r); overflow: hidden; align-self: center; }
.plate-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; }
@media (min-width: 901px) {
  .plate-inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); }
  .plate-inner > .plate-figure { margin-left: auto; width: min(100%, 26rem); }
}
@media (max-width: 900px) { .plate-figure img { aspect-ratio: 4 / 3; } }

/* La fisarmonica: righe con il filetto e il segno piu' (il
   riferimento). Un <details> nativo. */
.acc-list { margin-top: var(--s6); border-top: 1px solid rgba(255, 255, 255, .22); }
.acc { border-bottom: 1px solid var(--line); }
.acc-list .acc { border-bottom-color: rgba(255, 255, 255, .22); }
.acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: var(--s4);
  padding: var(--s4) 0; cursor: pointer; list-style: none;
  font-size: 1.15rem; font-weight: 500; color: inherit;
}
.acc-list .acc summary { color: #FFFFFF; }
.acc summary::-webkit-details-marker { display: none; }
.acc-sign { flex: none; width: 26px; height: 26px; display: grid; place-items: center; color: inherit; opacity: .7; transition: transform .25s var(--ease); }
.acc-sign svg { width: 20px; height: 20px; }
.acc[open] .acc-sign { transform: rotate(45deg); }
.acc-body { padding-bottom: var(--s5); max-width: 56ch; font-size: var(--t-small); line-height: 1.6; }
.acc-list .acc-body { color: var(--on-dark-soft); }
.band--brick .acc-list .acc-body { color: var(--on-brick-soft); }
.acc-link { display: inline-flex; align-items: center; gap: .8rem; margin-top: var(--s3); font-weight: 500; color: #FFFFFF; text-decoration: none; }
.acc-link .btn-arrow { color: var(--brass-lit); }
.acc-link:hover .btn-arrow { transform: translateX(4px); }

/* ------------------------------------------------------------
   I numeri: la scheda del riferimento, etichetta in alto e numero
   grande e leggero in basso.
   ------------------------------------------------------------ */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(13rem, 100%), 1fr)); gap: var(--s4); margin: 0; }
.stat {
  display: grid; align-content: space-between; gap: var(--s7);
  min-height: 12rem;
  padding: var(--s5);
  background: linear-gradient(to bottom, var(--paper) 0%, var(--paper-2) 100%);
  border-radius: var(--r);
}
.stat dt { font-size: var(--t-small); color: var(--muted); }
.stat dd { margin: 0; font-family: var(--display); font-weight: 300; font-size: var(--t-big); line-height: .95; letter-spacing: -.035em; color: var(--text); }
.stat dd small { font-size: .5em; font-weight: 400; letter-spacing: 0; margin: 0 .1em; }
.band--stone .stat { background: linear-gradient(to bottom, var(--paper) 0%, var(--paper-2) 100%); }
.band--door .stat, .band--ink .stat { background: linear-gradient(to bottom, rgba(255, 255, 255, .06) 0%, rgba(255, 255, 255, .02) 100%); }
.band--door .stat dd, .band--ink .stat dd { color: #FFFFFF; }
.band--door .stat dt, .band--ink .stat dt { color: var(--on-dark-soft); }

/* ============================================================
   IL BLOCCO FIRMA: la stanza in tre stati.
   ============================================================ */
.rooms-tool { display: grid; gap: var(--s5); }
.rooms-stage {
  position: relative; overflow: hidden; border-radius: var(--r);
  aspect-ratio: 16 / 9; background: var(--ink);
  touch-action: pan-y; user-select: none; -webkit-user-select: none;
}
.rooms-img, .rooms-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rooms-img { pointer-events: none; }
.rooms-img--design { clip-path: inset(0 calc((100 - var(--a)) * 1%) 0 0); }
.rooms-img--home { clip-path: inset(0 calc((100 - var(--b)) * 1%) 0 0); }
.rooms-handle {
  position: absolute; top: 0; bottom: 0; width: 44px; margin-left: -22px; padding: 0;
  border: 0; background: transparent; cursor: ew-resize; touch-action: none;
}
.rooms-handle::before { content: ''; position: absolute; left: 50%; top: 0; bottom: 0; width: 2px; margin-left: -1px; background: #FFFFFF; box-shadow: 0 0 0 1px rgba(18, 15, 12, .25); }
.rooms-handle i {
  position: absolute; left: 50%; top: 50%; width: 38px; height: 38px; margin: -19px 0 0 -19px;
  border-radius: 50%; background: #FFFFFF; box-shadow: 0 4px 14px rgba(18, 15, 12, .35);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 7l-5 5 5 5M15 7l5 5-5 5' fill='none' stroke='%2314171A' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 20px; background-position: center; background-repeat: no-repeat;
}
.rooms-handle:focus-visible i { outline: 2px solid var(--brass); outline-offset: 2px; }
.rooms-label {
  position: absolute; bottom: .9rem; padding: .4rem .7rem .36rem;
  background: rgba(18, 15, 12, .62); color: #FFFFFF; border-radius: var(--r-sm);
  font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
  pointer-events: none; white-space: nowrap;
}
.rooms-label--home { left: .9rem; }
.rooms-label--design { left: 50%; transform: translateX(-50%); }
.rooms-label--shell { right: .9rem; }
.rooms-label--design { left: calc((var(--a) + var(--b)) / 2 * 1%); }
.rooms-static { display: none; }
html:not(.js) .rooms-stage { display: none; }
html:not(.js) .rooms-static { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s3); }
.rooms-static-item img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--r-sm); }
.rooms-static-item figcaption { margin-top: .5rem; font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.rooms-bar { display: grid; gap: var(--s5); align-items: start; }
.rooms-legend { display: grid; gap: var(--s3); }
.rooms-legend li { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: var(--s3); font-size: var(--t-small); padding: .5rem 0; border-top: 1px solid var(--line); }
.rooms-legend b { font-weight: 500; color: var(--text); }
.rooms-snap { display: flex; flex-wrap: wrap; gap: .4rem; }
.rooms-snap button {
  padding: .55rem .95rem .5rem; border: 0; border-radius: 999px;
  background: var(--paper-2); color: var(--text); font: inherit; font-size: .875rem; font-weight: 500; cursor: pointer;
  transition: background .2s;
}
.rooms-snap button:hover { background: var(--stone); }
.rooms-snap button[aria-pressed='true'] { background: var(--ink); color: var(--on-dark); }
html:not(.js) .rooms-snap { display: none; }
.rooms-note { font-size: var(--t-small); color: var(--muted); max-width: 70ch; }
@media (min-width: 901px) { .rooms-bar { grid-template-columns: minmax(0, 1.4fr) auto; } }

.rooms-ask { display: grid; gap: var(--s6) var(--gutter); margin-top: clamp(3rem, 2rem + 3vw, 5rem); padding-top: clamp(2.5rem, 1.5rem + 2.6vw, 4rem); border-top: 1px solid var(--line); }
.rooms-ask-text h3 { font-family: var(--display); font-weight: 400; font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing: -.025em; line-height: 1.08; max-width: 18ch; }
.rooms-ask-text > p { margin-top: var(--s4); max-width: 44ch; }
.rooms-ask-form { padding: clamp(1.25rem, .8rem + 1.6vw, 2.2rem); background: linear-gradient(to bottom, var(--paper) 0%, var(--paper-2) 100%); border-radius: var(--r); }
@media (min-width: 901px) { .rooms-ask { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }

/* ============================================================
   DALLA A ALLA Z: la riga del tempo e le nove fasi.
   ============================================================ */
.timeline { margin-bottom: var(--s7); }
/* Griglia e non flex: con nove segmenti in percentuale piu' otto
   vuoti da 3 px la riga sforava di 24 px a 390. Le frazioni
   distribuiscono lo spazio che resta DOPO i vuoti. */
.tl { display: grid; grid-template-columns: var(--cols, repeat(9, 1fr)); gap: 3px; }
.tl-seg { min-width: 0; display: grid; gap: .5rem; }
.tl-seg i { display: block; height: 10px; border-radius: 3px; background: var(--brass); opacity: calc(.45 + var(--k, 0)); }
.tl-seg:nth-child(odd) i { background: var(--brass); }
.tl-seg:nth-child(even) i { background: var(--brick); }
.tl-seg span { font-family: var(--display); font-size: .8rem; font-weight: 500; color: var(--muted); }
.tl-total { margin-top: var(--s3); font-size: var(--t-small); color: var(--muted); }
.ph-list { display: grid; border-top: 1px solid var(--line); }
.ph { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: var(--s4) var(--s5); padding: var(--s5) 0; border-bottom: 1px solid var(--line); }
.ph-n { font-family: var(--display); font-size: 1.3rem; font-weight: 400; color: var(--brass-text); padding-top: .1rem; }
.ph-body h3 { font-size: 1.3rem; }
.ph-body > p { margin-top: .45rem; max-width: 60ch; font-size: var(--t-small); }
.ph-meta { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(11rem, 100%), 1fr)); gap: var(--s3) var(--s5); margin: var(--s4) 0 0; }
.ph-meta dt { font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.ph-meta dd { margin: .2rem 0 0; font-size: var(--t-small); color: var(--text); }
@media (max-width: 700px) { .ph { grid-template-columns: 2.6rem minmax(0, 1fr); } .tl-seg span { display: none; } }

/* ------------------------------------------------------------
   Righe numerate.
   ------------------------------------------------------------ */
.row-list { border-top: 1px solid var(--line); }
.row {
  display: grid; grid-template-columns: 4rem minmax(0, 1fr) auto; gap: var(--s3) var(--s5);
  padding: var(--s5) 0; border-bottom: 1px solid var(--line);
}
.row-n { font-family: var(--display); font-size: 1.2rem; color: var(--brass-text); padding-top: .2rem; }
.row-body p { margin-top: .45rem; max-width: 56ch; font-size: var(--t-small); }
.row-meta { align-self: start; padding: .36rem .6rem .3rem; background: var(--paper-2); border-radius: var(--r-sm); font-size: .8125rem; font-weight: 500; color: var(--text); white-space: nowrap; }
.band--door .row-list, .band--door .row, .band--ink .row-list, .band--ink .row { border-color: var(--line-dark); }
.band--door .row-n, .band--ink .row-n { color: var(--brass-lit); }
.band--door .row-meta, .band--ink .row-meta { background: rgba(255, 255, 255, .08); color: var(--on-dark); }
.band--door .row-body p, .band--ink .row-body p { color: var(--on-dark-soft); }
@media (max-width: 700px) { .row { grid-template-columns: 2.6rem minmax(0, 1fr); } .row-meta { grid-column: 2; justify-self: start; } }

/* ------------------------------------------------------------
   Schede con l'icona: tre o quattro per riga.
   ------------------------------------------------------------ */
.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(16rem, 100%), 1fr)); gap: var(--s4); }
.card { padding: clamp(1.3rem, 1rem + 1.2vw, 1.9rem); background: linear-gradient(to bottom, var(--paper) 0%, var(--paper-2) 100%); border-radius: var(--r); display: grid; gap: .5rem; align-content: start; }
.card-ico { width: 40px; height: 40px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--paper); color: var(--brass-text); margin-bottom: .4rem; box-shadow: inset 0 0 0 1px var(--line); }
.card-ico svg { width: 22px; height: 22px; }
.card p { font-size: var(--t-small); }
.card-meta { margin-top: .3rem; font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-text); }
.band--stone .card { background: linear-gradient(to bottom, var(--paper) 0%, #FAF9F6 100%); }
.band--door .card, .band--ink .card { background: linear-gradient(to bottom, rgba(255, 255, 255, .07) 0%, rgba(255, 255, 255, .03) 100%); }
.band--door .card-ico, .band--ink .card-ico { background: rgba(255, 255, 255, .06); color: var(--brass-lit); box-shadow: none; }
.band--door .card p, .band--ink .card p { color: var(--on-dark-soft); }
.band--door .card-meta, .band--ink .card-meta { color: var(--brass-lit); }

/* ------------------------------------------------------------
   Tabella.
   ------------------------------------------------------------ */
.table-scroll { position: relative; overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; font-size: var(--t-small); }
.table th, .table td { padding: .85rem 1rem .85rem 0; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
.table thead th { font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); border-bottom-color: var(--line-ui); }
.table tbody th { font-weight: 500; color: var(--text); white-space: nowrap; }

/* ------------------------------------------------------------
   Domande: la fisarmonica sul bianco.
   ------------------------------------------------------------ */
.faq { border-top: 1px solid var(--line); }
.faq .acc summary { padding: var(--s5) 0; color: var(--text); }
.faq .acc-body { color: var(--body); max-width: 60ch; }

/* ------------------------------------------------------------
   Immagine e testo.
   ------------------------------------------------------------ */
.split { display: grid; gap: var(--s6) var(--gutter); align-items: center; }
.split-figure { position: relative; border-radius: var(--r); overflow: hidden; }
.split-figure img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.split-body h2 { max-width: 16ch; }
.split-body .prose { margin-top: var(--s4); }
@media (min-width: 901px) {
  .split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .split--flip .split-figure { order: 2; }
}

/* ------------------------------------------------------------
   Galleria: tre colonne, rapporto fisso, didascalia in etichetta.
   ------------------------------------------------------------ */
.gal { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s4); }
.gal-item figure { border-radius: var(--r); overflow: hidden; background: linear-gradient(to bottom, var(--paper) 0%, var(--paper-2) 100%); }
.gal-item img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.gal-item figcaption { padding: .7rem .9rem .8rem; font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
@media (max-width: 900px) { .gal { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------------------
   Le voci: la scheda con il tondo e la frase (il riferimento).
   ------------------------------------------------------------ */
.qt-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(18rem, 100%), 1fr)); gap: var(--s4); }
.qt {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--s3) var(--s4); align-items: start;
  padding: var(--s5);
  background: linear-gradient(to bottom, var(--paper) 0%, var(--paper-2) 100%); border-radius: var(--r);
}
.qt-badge { grid-row: 1 / 3; width: 52px; height: 52px; display: grid; place-items: center; border-radius: 50%; background: var(--ink); color: var(--brass-lit); font-family: var(--display); font-weight: 500; font-size: 1rem; letter-spacing: .04em; }
.qt blockquote { margin: 0; }
.qt blockquote p { font-size: 1.1rem; line-height: 1.45; color: var(--text); }
.qt-who { grid-column: 2; font-size: var(--t-small); color: var(--muted); }
.qt-who b { display: block; font-weight: 500; color: var(--text); }

/* ------------------------------------------------------------
   I progetti: esempi dichiarati.
   ------------------------------------------------------------ */
.prj-list { display: grid; gap: var(--s6); }
.prj { display: grid; gap: var(--s5) var(--gutter); align-items: center; padding: var(--s4); background: linear-gradient(to bottom, var(--paper) 0%, var(--paper-2) 100%); border-radius: var(--r); }
.prj-figure { position: relative; border-radius: var(--r-sm); overflow: hidden; }
.prj-figure img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.prj-body { padding: var(--s3) var(--s3) var(--s3) 0; }
.prj-body h3 { font-family: var(--display); font-weight: 400; font-size: 1.7rem; letter-spacing: -.02em; line-height: 1.1; }
.prj-body > p:not(.tag) { margin-top: var(--s3); font-size: var(--t-small); max-width: 50ch; }
.prj-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(8rem, 100%), 1fr)); gap: var(--s3) var(--s4); margin: var(--s5) 0 0; padding-top: var(--s4); border-top: 1px solid var(--line); }
.prj-facts dt { font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.prj-facts dd { margin: .2rem 0 0; font-family: var(--display); font-size: 1.25rem; color: var(--text); }
@media (min-width: 901px) {
  .prj { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); }
  .prj:nth-child(even) .prj-figure { order: 2; }
  .prj:nth-child(even) .prj-body { padding-left: var(--s3); }
}

/* ------------------------------------------------------------
   I quartieri: righe con il nome e i minuti.
   ------------------------------------------------------------ */
.areas-office { margin-top: var(--s6); font-style: normal; font-size: var(--t-small); color: var(--body); line-height: 1.7; }
.areas-office b { display: block; font-weight: 500; color: var(--text); }
.areas-office a { color: var(--text); font-weight: 500; }
.area-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(14rem, 100%), 1fr)); gap: 0 var(--s6); border-top: 1px solid var(--line); }
.area-list li { display: flex; justify-content: space-between; gap: var(--s3); padding: .8rem 0; border-bottom: 1px solid var(--line); font-size: var(--t-small); }
.area-list b { font-weight: 500; color: var(--text); }
.area-list span { color: var(--muted); white-space: nowrap; }

/* ------------------------------------------------------------
   Il gruppo: quattro schede con l'anno grande.
   ------------------------------------------------------------ */
.grp-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(15rem, 100%), 1fr)); gap: var(--s4); }
.grp { display: grid; gap: .4rem; align-content: start; padding: var(--s5); background: linear-gradient(to bottom, var(--paper) 0%, var(--paper-2) 100%); border-radius: var(--r); }
.grp-since { font-family: var(--display); font-weight: 300; font-size: 2.6rem; letter-spacing: -.03em; line-height: 1; color: var(--text); margin-bottom: var(--s3); }
.grp h3 { font-size: 1.1rem; }
.grp-city { font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--brass-text); }
.grp > p:not(.grp-city) { font-size: var(--t-small); margin-top: .3rem; }
.grp--uk { background: var(--door); }
.grp--uk .grp-since, .grp--uk h3 { color: #FFFFFF; }
.grp--uk .grp-city { color: var(--brass-lit); }
.grp--uk > p:not(.grp-city) { color: var(--on-dark-soft); }

/* La chiamata: una lastra scura con titolo a sinistra e bottoni a
   destra. */
.cta-inner { align-items: end; }
.cta-body h2 { max-width: 18ch; }
.cta-body .lede { margin-top: var(--s4); max-width: 44ch; }
.cta-side { display: grid; gap: var(--s3); justify-items: start; }
.cta .actions { margin-top: 0; }
.cta-phone { display: inline-flex; align-items: center; gap: .5rem; font-weight: 500; color: #FFFFFF; text-decoration: none; }
.cta-phone svg { width: 18px; height: 18px; color: var(--brass-lit); }
@media (min-width: 901px) { .cta-inner { grid-template-columns: minmax(0, 1fr) auto; } .cta-side { justify-items: end; } }

/* Collegamenti alle altre pagine: righe con filetto. */
.pl-list { border-top: 1px solid var(--line); }
.pl-list a {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr) auto; align-items: center; gap: var(--s4);
  padding: var(--s4) 0; border-bottom: 1px solid var(--line);
  color: var(--text); text-decoration: none;
}
.pl-list b { font-weight: 500; }
.pl-list span:not(.btn-arrow) { font-size: var(--t-small); color: var(--body); }
.pl-list .btn-arrow { color: var(--brass-text); }
.pl-list a:hover .btn-arrow { transform: translateX(4px); }
@media (max-width: 700px) { .pl-list a { grid-template-columns: minmax(0, 1fr) auto; } .pl-list span:not(.btn-arrow) { grid-column: 1; } }

/* Contatti. */
.contact-grid { display: grid; gap: var(--s7) var(--gutter); }
@media (min-width: 901px) { .contact-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); } }
.contact-side h2 { max-width: 14ch; }
.contact-side .lede { margin-top: var(--s4); max-width: 36ch; }
.contact-aside { display: grid; gap: var(--s4); margin: var(--s6) 0 0; }
.contact-aside dt { font-size: var(--t-label); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.contact-aside dd { margin: .25rem 0 0; color: var(--text); line-height: 1.6; }
.contact-aside a { color: var(--text); }
.contact-form { background: linear-gradient(to bottom, var(--paper) 0%, var(--paper-2) 100%); border-radius: var(--r); padding: clamp(1.25rem, .8rem + 1.6vw, 2.2rem); }

/* 06-forms.css */
/* ============================================================
   Moduli. Etichetta sopra il campo, campi a raggio 8, il selettore
   con il quadratino spuntato: il modulo del riferimento, in chiaro.
   Il bordo di un campo e' interfaccia: --line-ui sta a 3,3:1 sul
   bianco.
   ============================================================ */
.form-grid { display: grid; gap: var(--s4); }
.field { display: grid; gap: .4rem; }
.field label, .fieldset-legend { font-size: var(--t-small); font-weight: 500; color: var(--text); }
.req { color: var(--alert); }
.field input, .field select, .field textarea {
  width: 100%; padding: .85rem .95rem;
  border: 1px solid var(--line-ui); border-radius: var(--r-field);
  background: var(--paper); color: var(--text);
  font: inherit; font-size: var(--t-small);
}
.field input::placeholder, .field textarea::placeholder { color: var(--muted); }
.field textarea { resize: vertical; min-height: 6rem; }
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; border-color: var(--focus); }
.field input[aria-invalid='true'], .field textarea[aria-invalid='true'] { border-color: var(--alert); }
.field-error { font-size: .8125rem; font-weight: 500; color: var(--alert); }
@media (min-width: 620px) {
  .form-grid { grid-template-columns: 1fr 1fr; }
  .form-grid > *:not(.field--half) { grid-column: 1 / -1; }
}
.choice { border: 0; margin: 0; padding: 0; display: grid; gap: .5rem; }
.seg--form { margin-top: .1rem; }
.seg--form label { background: var(--paper); box-shadow: inset 0 0 0 1px var(--line); }
.seg--form label:hover { background: var(--paper-2); }

/* Il campo della fotografia: una cella tratteggiata con l'icona e
   la riga che dice cosa mandare. Il nome del file compare dopo la
   scelta. */
.file-box {
  position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .8rem;
  padding: .9rem 1rem; border: 1px dashed var(--line-ui); border-radius: var(--r-field); background: var(--paper);
  cursor: pointer; transition: border-color .2s, background .2s;
}
.file-box:hover, .file-box.is-over { border-color: var(--brass-text); background: var(--paper-2); }
.file-box input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.file-box-ico { width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-sm); background: var(--paper-2); color: var(--brass-text); }
.file-box-ico svg { width: 20px; height: 20px; }
.file-box-text { font-size: var(--t-small); color: var(--muted); }
.file-box.has-file .file-box-text { color: var(--text); font-weight: 500; }

.consents { display: grid; gap: var(--s3); }
.consent { display: grid; grid-template-columns: auto 1fr; gap: .65rem; align-items: start; }
.consent input { margin: .3rem 0 0; width: 17px; height: 17px; accent-color: var(--brick); }
.consent label { font-size: .8125rem; color: var(--muted); line-height: 1.5; }
.consent label a { text-decoration: underline; }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-actions { display: grid; gap: var(--s3); }
.form-note { margin: 0; font-size: .8125rem; color: var(--muted); }
.form-done { display: none; }
form[data-state='done'] { display: none; }
form[data-state='done'] + .form-done { display: block; padding: var(--s5); background: var(--stone); border-radius: var(--r); }
.form-done h3 { margin-bottom: var(--s2); }

/* 07-panels.css */
/* ============================================================
   Il pannello di contatto. Entra al 40% dello scorrimento o dopo 25
   secondi, mai all'apertura, trattenuto sopra i filmati e sopra il
   blocco firma. Chiuso una volta, resta chiuso sette giorni.
   Galleggia davvero, quindi ha l'ombra.
   ============================================================ */
.b2b-panel {
  position: fixed; right: var(--s4); bottom: var(--s4); z-index: 70;
  width: min(24rem, calc(100vw - var(--s4) * 2));
  max-height: min(78svh, 42rem); overflow-y: auto;
  padding: var(--s5);
  background: var(--paper); border-radius: var(--r);
  box-shadow: var(--shadow-float);
  transform: translateY(14px); opacity: 0;
  transition: opacity .34s var(--ease), transform .34s var(--ease);
}
.b2b-panel.is-open { opacity: 1; transform: none; }
.b2b-close {
  position: absolute; top: var(--s3); right: var(--s3);
  width: 30px; height: 30px; display: grid; place-items: center;
  border: 0; border-radius: var(--r-sm); background: var(--paper-2); color: var(--text);
  font-size: 1.1rem; cursor: pointer;
}
.b2b-panel h2 { font-size: 1.55rem; margin-bottom: var(--s4); padding-right: var(--s6); }
.b2b-intro { font-size: var(--t-small); color: var(--muted); margin-bottom: var(--s4); }
.b2b-choices { display: grid; gap: var(--s2); }
.b2b-option {
  display: grid; gap: .15rem; width: 100%; text-align: left;
  padding: var(--s3) var(--s4);
  border: 0; border-radius: var(--r-sm);
  background: var(--paper-2); font: inherit; cursor: pointer;
  transition: background .2s;
}
.b2b-option:hover { background: var(--stone); }
.b2b-option b { font-weight: 500; color: var(--text); }
.b2b-option > span { font-size: .8125rem; color: var(--muted); }
.b2b-phone { margin-top: var(--s4); font-size: .8125rem; color: var(--muted); }
.b2b-phone a { color: var(--text); font-weight: 600; }
.b2b-back, .b2b-toggle-more {
  margin-bottom: var(--s3); padding: 0; border: 0; background: none;
  color: var(--brass-text); font-size: .8125rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; cursor: pointer;
}
.b2b-toggle-more { margin: var(--s2) 0 0; }
@media (max-width: 620px) {
  .b2b-panel { right: var(--s2); left: var(--s2); bottom: var(--s2); width: auto; }
}