/* components.css — componenti law_firm (studio legale associato). Registro istituzionale: fondo chiaro
   caldo, blocchi PIENI in cotto, taglio squadrato, fotografia di AMBIENTI (mai volti presi altrove).
   Il segno del verticale è la TARGA piena che scavalca la fotografia: il contrasto del titolo è
   strutturale e non dipende dal fotogramma. I token vivono in tokens.css. */

/* ===========================================================================
   Intestazione
   =========================================================================== */

/* Fascia di servizio sopra l'header (recapito e orari), come nei riferimenti della categoria. Sotto i
   900px sparisce: il telefono lo porta già la barra fissa in basso, e ripeterlo è la terza volta. */
.topbar { background: var(--brand); color: var(--on-dark); font-size: var(--text-sm); }
.topbar__row { display: var(--topbar-display); align-items: center; justify-content: flex-end; gap: var(--space-5); min-height: 34px; }
.topbar a { color: var(--on-dark); }
.topbar a:hover { color: var(--accent-lt); }
.topbar__item { display: inline-flex; align-items: center; gap: var(--space-2); }
@media (max-width: 899.98px) { .topbar { display: none; } }

/* ⚠ Lo sticky di un header block-based richiede questo: il wrapper .wp-block-template-part crea un
   contenitore che limita il position:sticky del figlio. `display:contents` lo toglie di mezzo. */
.wp-block-template-part { display: contents; }

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: var(--paper);
  border-bottom: 1px solid var(--line);
}
.site-header__row {
  display: flex; align-items: center; gap: var(--space-5);
  padding-block: var(--space-4);
}
/* Header centrato: spazio sopra = sotto su OGNI figlio (regola 16). */
.site-header__row > * { align-self: center; margin-block: 0; }

.wordmark { display: inline-flex; align-items: center; gap: var(--space-3); }
.wordmark__logo { width: clamp(150px, 20vw, 210px); height: auto; }
/* Wordmark tipografico (il demo non ha un marchio: lo studio-tipo non ne possiede uno). */
.wordmark__name { font-family: var(--font-display); font-size: 1.18rem; line-height: 1.1; color: var(--ink); }
.wordmark__tag {
  display: block; font-family: var(--font-body); font-size: 0.62rem; font-weight: 600;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-ink);
  margin-top: 3px;
}

.site-nav { margin-left: auto; }
.site-header .site-nav .wp-block-navigation-item__content,
.site-header .site-nav .wp-block-navigation-item__label {
  font-family: var(--font-body); font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink);
  /* ⚠ Un'etichetta lunga («Aree di attività») che va a capo alza TUTTA la testata (misurato: 81 → 103px)
     e sembra una nav su due righe mentre è una voce su due linee. Le voci non vanno mai a capo. */
  white-space: nowrap;
}
/* ⚠ WP inietta `.wp-block-navigation .wp-block-navigation-item__content` (0,2,0) DOPO il tema: a parità
   di specificità vince lui. Serve un livello in più E il colore anche sullo __label. */
.site-header .site-nav .wp-block-navigation-item__content:hover,
.site-header .site-nav .wp-block-navigation-item__content:hover .wp-block-navigation-item__label { color: var(--accent-ink); }
.site-header .site-nav .wp-block-navigation .wp-block-navigation-item.current-menu-item .wp-block-navigation-item__label { color: var(--accent-ink); }
/* ⚠ Lo spazio fra le voci si DICHIARA qui: appoggiarsi al block-gap che WP inietta sul layout flex del
   blocco significa dipendere da una regola che non è nostra — e senza, le voci si incollano in una sola
   parola («HOMELO STUDIOAREE…», misurato: gap `normal`).
   La ul del blocco nasce inoltre flex-wrap:wrap: con margin-left:auto sulla nav una voce in più resta
   orfana su una seconda riga e l'header cresce. Sopra i 900 si tiene in riga. */
.site-header .site-nav .wp-block-navigation__container { gap: var(--space-5); }
@media (min-width: 900px) { .site-header .site-nav .wp-block-navigation__container { flex-wrap: nowrap; } }

.site-header__cta { margin-left: var(--space-2); }
/* ⚠ Il selettore porta DUE classi apposta: `.btn` (0,1,0) è dichiarata più sotto in questo stesso foglio e
   le media query NON aggiungono specificità ⇒ un `@media{.site-header__cta{display:none}}` perde contro il
   `display:inline-flex` di `.btn` e il bottone resta visibile su mobile (misurato: flex a tutte le
   larghezze, header 109px a 390). Sotto i 900 la barra fissa in basso porta già «Scrivici»: in testata
   sarebbe la terza ripetizione. */
@media (max-width: 899.98px) { .site-header .site-header__cta { display: none; } }

/* --- Menu mobile (overlay wp:navigation) --- */
.site-header .wp-block-navigation__responsive-container.is-menu-open {
  height: 100vh; max-height: 100vh; overflow-y: auto; -webkit-overflow-scrolling: touch;
}
/* ⚠ Il fondo dell'overlay lo impone WP con
   `.wp-block-navigation:not(.has-background) .…__responsive-container.is-menu-open:not(.disable-default-overlay)`
   = (0,4,0), iniettato DOPO il tema: una regola a 3 classi PERDE in silenzio e l'overlay resta BIANCO.
   Si vince solo ricopiando il suo schema di selettori. */
.site-header .wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) {
  background: var(--brand-dark); color: var(--on-dark);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__label {
  color: var(--on-dark); font-size: 1rem; letter-spacing: 0.1em;
}
/* ⚠ Le voci finivano a destra e tagliate: non serve correggere l'<a> (è shrink), il colpevole è il primo
   antenato largo quanto lo schermo con l'allineamento contrario. Si allinea il PADRE. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
  align-items: stretch; width: 100%;
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
  width: 100%; border-bottom: 1px solid rgba(246,242,234,.16);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { padding-block: var(--space-4); width: 100%; }
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: var(--space-8); padding-bottom: var(--space-9); }
.site-header .wp-block-navigation__responsive-container-close {
  top: var(--space-5); right: var(--space-5); padding: var(--space-2);
  color: var(--accent-lt); width: 44px; height: 44px;
}
.site-header .wp-block-navigation__responsive-container-close svg { width: 28px; height: 28px; }
.site-header .wp-block-navigation__responsive-container-close:hover { color: var(--on-dark); }
/* Hamburger: WP lo lascia a `currentcolor`. ⚠ SOLO sotto i 600px, cioè dove WP lo mostra davvero: senza
   il vincolo il `display:flex` batte il `display:none` di WP e il bottone resta visibile ANCHE a desktop,
   occupando spazio nella nav e mandando le voci a capo. */
@media (max-width: 599.98px) {
  .site-header .wp-block-navigation__responsive-container-open {
    color: var(--ink); width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  }
  .site-header .wp-block-navigation__responsive-container-open svg { width: 26px; height: 26px; fill: currentColor; }
}
/* Fascia 900–1080px: marchio + quattro voci + bottone stanno stretti (misurato a 900: somma 785 su 841 di
   riga utile, con le voci a filo). Si stringono spaziatura e lettere quel tanto che basta a tenere la
   testata a una riga sola senza toccare le altre larghezze. */
@media (min-width: 900px) and (max-width: 1080px) {
  .site-header__row { gap: var(--space-4); }
  .site-header .site-nav .wp-block-navigation__container { gap: var(--space-4); }
  .site-header .site-nav .wp-block-navigation-item__content,
  .site-header .site-nav .wp-block-navigation-item__label { font-size: 0.71rem; letter-spacing: 0.08em; }
  .site-header__cta { font-size: 0.72rem; padding-inline: var(--space-5); }
}
/* Fascia di confine 600–899px: WP mostra ancora la nav estesa ma le voci non entrano accanto al marchio. */
@media (min-width: 600px) and (max-width: 899.98px) {
  .site-header .site-nav .wp-block-navigation-item__content,
  .site-header .site-nav .wp-block-navigation-item__label { font-size: 0.68rem; letter-spacing: 0.08em; }
  .wordmark__name { font-size: 1rem; }
}

/* ===========================================================================
   Bottoni — SQUADRATI: nella categoria il raggio zero è il registro
   =========================================================================== */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2);
  font-family: var(--font-body); font-size: 0.8rem; font-weight: 600;
  letter-spacing: 0.1em; text-transform: uppercase;
  padding: var(--space-3) var(--space-6); border-radius: var(--radius);
  border: 1px solid transparent; background: var(--brand); color: var(--on-dark);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.btn:hover { background: var(--brand-dark); }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--ghost:hover { background: var(--ink); color: var(--paper); }
/* Su fondo scuro il bottone si inverte: crema piena con testo cotto (10,31). */
.btn--light { background: var(--paper); color: var(--brand); }
.btn--light:hover { background: var(--accent-lt); color: var(--ink); }
.btn--outline-light { background: transparent; color: var(--on-dark); border-color: rgba(246,242,234,.5); }
.btn--outline-light:hover { background: var(--paper); color: var(--brand); border-color: var(--paper); }

/* ===========================================================================
   Testata — foto a piena larghezza + TARGA piena che la scavalca
   =========================================================================== */
/* Testata cinematografica: la fotografia occupa la finestra intera e RESTA mentre il contenuto le scorre
   sopra (`position: sticky`), con una deriva di parallasse governata da reveal.js. È la richiesta
   dell'owner — «una foto più grande, o una foto che fa da sfondo mentre scorre» — e insieme il registro
   del template di riferimento.
   ⚠ Lo sticky vive nel flusso: la media occupa una finestra e poi la RESTITUISCE con un margine negativo
   pari alla propria altezza, così il corpo della testata le si sovrappone invece di finirle sotto. */
.hero { background: var(--paper); position: relative; }
/* ⚠ Il fondo della testata è SCURO di suo, non solo per via della fotografia: i segni chiari (indice,
   numerale, indicatore) devono reggere anche se lo scatto non carica — e axe, che risolve il fondo sulla
   catena degli antenati e non sui pixel, misurava l'ocra chiara contro l'intonaco a 1,98. */
.hero--cinema { min-height: calc(100vh - var(--chrome)); display: flex; flex-direction: column; background: var(--night); }
.hero__media {
  position: sticky; top: 0; height: calc(100vh - var(--chrome)); margin-bottom: calc(-100vh + var(--chrome));
  background: var(--night); overflow: hidden; z-index: 0;
}
/* La foto è più alta della finestra: la deriva di parallasse ha così margine per muoversi senza scoprire
   i bordi. `will-change` la promuove a livello proprio (niente sfarfallii durante lo scorrimento). */
.hero__media img { width: 100%; height: 116%; margin-top: -8%; object-fit: cover; will-change: transform; }
/* Il velo non rende leggibile il titolo — quello sta sulla targa, e il suo contrasto è strutturale — ma
   tiene unita la banda e lega la fotografia al cotto. Doppio gradiente: scurisce in alto per l'header e
   in basso per l'attacco della sezione seguente. */
.hero__veil {
  position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(26,19,15,.58) 0%, rgba(26,19,15,.12) 34%, rgba(26,19,15,.22) 62%, var(--scrim-deep) 100%),
    radial-gradient(120% 80% at 18% 78%, rgba(26,19,15,.42) 0%, rgba(26,19,15,0) 62%);
}
.hero__body {
  position: relative; z-index: 1;
  min-height: var(--hero-min-h, calc(100vh - var(--chrome))); display: flex; flex-direction: column; justify-content: var(--hero-justify, flex-end);
  padding-block: var(--hero-pad-top) var(--space-8);
}
/* Indice editoriale: un numerale e un filetto che si allunga — il dispositivo del riferimento, qui reso
   come SEGNO (aria-hidden), non come copy. */
.hero__index {
  display: var(--hero-index-display); align-items: center; gap: var(--space-4);
  font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600;
  letter-spacing: var(--tracking-label); color: var(--on-dark-muted);
  margin-bottom: auto;
}
.hero__index { filter: drop-shadow(0 1px 4px rgba(26,19,15,.55)); }
.hero__index i { display: block; width: clamp(40px, 9vw, 132px); height: 2px; background: var(--accent-lt); transform-origin: left center; transform: scaleX(0); transition: transform 1.1s var(--ease) .2s; }
.hero--cinema .hero__index i { transform: scaleX(1); }
.hero__index b { font-weight: 600; color: var(--accent-lt); }
.hero__plate {
  position: relative; z-index: 1;
  background: var(--brand); color: var(--on-dark);
  padding: clamp(var(--space-6), 4vw, var(--space-8));
  max-width: var(--hero-plate-w, 52rem);
  border-top: 3px solid var(--accent);
  box-shadow: var(--shadow-md);
}
/* Filetto che si DISEGNA sotto il titolo quando la targa entra in scena. */
.hero__hr {
  display: block; height: 2px; width: 96px; background: var(--accent-lt);
  margin: var(--space-5) 0 var(--space-2); transform: scaleX(0); transform-origin: left center;
  transition: transform 1.1s var(--ease) .45s;
}
.hero--cinema .hero__hr { transform: scaleX(1); }
/* Staffa d'angolo: due filetti che si disegnano ad angolo retto, in alto a destra della composizione.
   Fa coppia col filetto dell'indice in alto a sinistra e incornicia la testata senza aggiungere UNA
   PAROLA di copy. ⚠ Il primo tentativo era una freccia diagonale: leggeva come due tratti scollegati —
   un segno grafico va GUARDATO al vero, non dedotto dal codice. */
.hero__mark { display: var(--hero-mark-display, block); position: absolute; right: 0; top: 30%; width: 74px; height: 74px; pointer-events: none;
  filter: drop-shadow(0 1px 4px rgba(26,19,15,.55)); }
.hero__mark::before, .hero__mark::after { content: ""; position: absolute; background: var(--accent-lt); }
.hero__mark::before { right: 0; top: 0; height: 2px; width: 0; transition: width .8s var(--ease) .5s; }
.hero__mark::after { right: 0; top: 0; width: 2px; height: 0; transition: height .8s var(--ease) .9s; }
.hero--cinema .hero__mark::before { width: 100%; }
.hero--cinema .hero__mark::after { height: 100%; }

.hero__scroll { position: absolute; left: 50%; bottom: var(--space-4); width: 1px; height: 52px; overflow: hidden; background: rgba(246,242,234,.22); }
.hero__scroll::after { content: ""; position: absolute; inset: 0; background: var(--accent-lt); animation: fp-scroll 2.4s var(--ease) infinite; }
@keyframes fp-scroll { 0% { transform: translateY(-100%); } 60%, 100% { transform: translateY(100%); } }
@media (prefers-reduced-motion: reduce) { .hero__scroll::after { animation: none; transform: none; } }
@media (max-width: 700px) { .hero__mark { display: none; } .hero__scroll { display: none; } }
.hero__plate .eyebrow { color: var(--accent-lt); }
.hero__plate h1 { color: var(--on-dark); }
/* ⚠ La misura di lettura sta sul PARAGRAFO, mai sul contenitore del display. */
.hero__lead { margin-top: var(--space-4); color: var(--on-dark-muted); font-size: var(--text-md); max-width: var(--hero-lead-w, 54ch); }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-6); }
/* Testata senza fotografia (fallback design-only: nessuna foto hero-grade ⇒ nessuna foto finta). */
.hero--design .hero__body { padding-top: var(--section-y); min-height: 0; }
.hero--design .hero__plate { max-width: var(--hero-plate-w, 52rem); margin-top: 0; }

/* ===========================================================================
   Lo Studio (featured) — testo in colonna + fotografia verticale affiancata
   =========================================================================== */
.studio__grid {
  display: grid; gap: clamp(var(--space-6), 4vw, var(--space-8));
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); align-items: center;
}
.studio__body p + p { margin-top: var(--space-4); }
.studio__fig { position: relative; }
.studio__fig img { width: 100%; aspect-ratio: var(--fig-ratio); object-fit: cover; object-position: var(--fig-object-pos); }
/* Filetto d'ocra che aggancia la foto alla colonna di testo: non è testo, quindi l'ocra piena è legittima. */
.studio__fig::before {
  content: ""; position: absolute; left: calc(-1 * var(--space-5)); top: var(--space-6);
  bottom: var(--space-6); width: 3px; background: var(--accent);
}
@media (max-width: 860px) {
  .studio__grid { grid-template-columns: 1fr; }
  .studio__fig img { aspect-ratio: 4 / 3; }
  .studio__fig::before { display: none; }
}

/* ===========================================================================
   Aree di attività — IL blocco firma della categoria:
   colonna fotografica che sborda dal bordo + pannello chiaro che la scavalca con la griglia a icone
   =========================================================================== */
.areas { background: var(--surface); }
.areas__grid { display: grid; grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); align-items: stretch; }
.areas__fig { position: relative; }
/* La colonna esce dal contenitore fino al bordo sinistro della pagina — e si ferma LÌ.
   ⚠ Non si usa l'idioma `calc(50% - 50vw)`: quel 50% si risolve sul contenitore dell'elemento, che qui è
   la CELLA di griglia (480px), non il container (1200px) ⇒ il margine risultava il doppio del dovuto e la
   foto partiva a −360, buttando fuori schermo 360px di immagine. Lo screenshot non lo mostra (il bordo
   sinistro resta pieno in entrambi i casi): lo dice solo la misura.
   Lo scarto giusto è la distanza fra il bordo pagina e il contenitore, cioè esattamente ciò che
   `.container` lascia ai lati: `max(gutter, (100vw - container)/2)`. */
.areas__fig { margin-left: calc(-1 * var(--bleed)); }
/* ⚠ La colonna e' ALTA: una fotografia stirata su tutta la sua altezza perde l'inquadratura (misurato
   84% su una panoramica). I due token vanno insieme — il rapporto da solo perderebbe contro height:100%
   — e i default riproducono esattamente il comportamento storico. */
.areas__fig img { width: 100%; height: var(--areas-fig-h, 100%); min-height: var(--areas-fig-min); object-fit: cover; aspect-ratio: var(--areas-fig-ratio); }
.areas__panel {
  position: relative; z-index: 1;
  margin-left: calc(-1 * var(--overlap)); margin-block: var(--space-8);
  background: var(--paper); padding: clamp(var(--space-6), 3.5vw, var(--space-8));
  border-top: 3px solid var(--accent);
}
.areas__intro { max-width: 60ch; }
/* ⚠ Elenco a UNA colonna, con l'icona di fianco al titolo: a due colonne dentro un pannello stretto le
   righe misuravano 27 caratteri — si spezzavano ogni tre parole, ed è la ragione per cui il testo
   sembrava «poco attraente». Una colonna piena porta la misura a ~55 e fa dell'elenco un blocco
   editoriale invece di una griglia compressa. */
.areas__list { display: grid; gap: var(--space-6); margin-top: var(--space-7); }
.areas__list .area { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--space-4) var(--space-5); align-items: start; }
.areas__list .area h3 { margin-top: 0; align-self: center; }
.areas__list .area .area__icon { grid-row: 1; align-self: center; }
.areas__list .area p { grid-column: 2; margin-top: var(--space-2); }
/* filetto sottile fra un ambito e l'altro: separa senza pesare */
.areas__list .area + .area { border-top: 1px solid var(--line); padding-top: var(--space-6); }
/* ⚠ `display:block` NON è decorativo: lo <span> è inline e un inline IGNORA width/height — l'icona
   restava 0×0 con la maschera perfettamente risolta (misurato nel DOM, invisibile nello screenshot). */
.area__icon {
  display: block; width: 30px; height: 30px; background: var(--accent-ink);
  -webkit-mask: var(--icon) no-repeat center / contain;
  mask: var(--icon) no-repeat center / contain;
}
/* ⚠ Le maschere vivono QUI, nel CSS del verticale: `url("../assets/…")` si risolve rispetto al FOGLIO.
   In uno style inline dentro il post_content NON risolverebbe (il rewrite tocca solo i .php del tema, e
   nel DB il PHP non gira) e le icone resterebbero invisibili — difetto già pagato per intero.
   ⚠ Ogni icona appartiene al SUO ambito, e l'ambito lo sceglie il cliente: il nome arriva dall'IR
   (`items/<i>/icon`, leaf di copy gated dal catalogo del verticale), non dalla posizione nel pattern.
   Aggiungere un'area vuol dire aggiungere QUI la riga e il file: senza la regola la maschera resta
   vuota e l'icona sparisce senza errori. */
.area[data-icon="civile"]         { --icon: url("../assets/img/icons/civile.svg"); }
.area[data-icon="arbitrati"]      { --icon: url("../assets/img/icons/arbitrati.svg"); }
.area[data-icon="immobiliare"]    { --icon: url("../assets/img/icons/immobiliare.svg"); }
.area[data-icon="amministrativo"] { --icon: url("../assets/img/icons/amministrativo.svg"); }
.area[data-icon="penale"]         { --icon: url("../assets/img/icons/penale.svg"); }
.area[data-icon="ambiente"]       { --icon: url("../assets/img/icons/ambiente.svg"); }
.area[data-icon="famiglia"]       { --icon: url("../assets/img/icons/famiglia.svg"); }
.area[data-icon="sinistri"]       { --icon: url("../assets/img/icons/sinistri.svg"); }
.area[data-icon="crediti"]        { --icon: url("../assets/img/icons/crediti.svg"); }
.area[data-icon="contratti"]      { --icon: url("../assets/img/icons/contratti.svg"); }
/* Materie del diritto amministrativo: il vocabolario nasceva su uno studio generalista e non le copriva. */
.area[data-icon="appalti"]        { --icon: url("../assets/img/icons/appalti.svg"); }
.area[data-icon="urbanistica"]    { --icon: url("../assets/img/icons/urbanistica.svg"); }
.area[data-icon="edilizia"]       { --icon: url("../assets/img/icons/edilizia.svg"); }
.area[data-icon="beni-culturali"] { --icon: url("../assets/img/icons/beni-culturali.svg"); }
.area[data-icon="beni-pubblici"]  { --icon: url("../assets/img/icons/beni-pubblici.svg"); }
.area[data-icon="accesso-atti"]   { --icon: url("../assets/img/icons/accesso-atti.svg"); }
.area[data-icon="silenzio-pa"]    { --icon: url("../assets/img/icons/silenzio-pa.svg"); }
.area[data-icon="partenariato"]   { --icon: url("../assets/img/icons/partenariato.svg"); }
.area[data-icon="commercio"]      { --icon: url("../assets/img/icons/commercio.svg"); }
.area h3 { margin-top: var(--space-4); }
.area p { margin-top: var(--space-2); color: var(--ink-muted); }
/* Senza fotografia (demo, o progetto senza uno scatto adatto) il pannello prende tutta la riga invece di
   restare schiacciato in una colonna di destra accanto al vuoto. */
.areas__grid > .areas__panel:only-child { grid-column: 1 / -1; margin-left: 0; }
@media (max-width: 980px) {
  .areas__grid { grid-template-columns: 1fr; }
  .areas__fig { margin-left: 0; }
  .areas__fig img { min-height: 260px; aspect-ratio: 16 / 9; }
  .areas__panel { margin-left: 0; margin-top: calc(-1 * var(--overlap)); }
}
@media (max-width: 620px) { .areas__list .area { grid-template-columns: 26px minmax(0, 1fr); } }

/* Pagina Aree di attività: elenco disteso con una colonna fotografica che lo accompagna.
   ⚠ La foto NON è una banda panoramica: gli scatti di questo verticale sono verticali (ambienti), e un
   taglio panoramico li decapita. Resta nel suo formato nativo e diventa una colonna che segue la lettura. */
.areas-page__cols { display: grid; grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr); gap: clamp(var(--space-6), 4vw, var(--space-8)); align-items: start; }
/* La colonna porta TRE ambienti distribuiti lungo la lettura: con un solo scatto la pagina restava
   spoglia per due terzi della sua altezza. Il passo è calcolato sull'elenco a fianco, così ogni foto
   accompagna un gruppo di ambiti invece di ammucchiarsi in cima. */
.areas-page__gallery { display: grid; gap: clamp(var(--space-8), 9vw, var(--space-10)); }
/* ⚠ Le tre foto della colonna sono ALLINEATE e identiche: sfalsare la mediana con un margine negativo la
   faceva sporgere di 32px e la rendeva larga 32 in più — a colpo d'occhio sembrava semplicemente «più
   grande», che è come l'ha vista il cliente. In una colonna verticale lo sfalsamento non legge come ritmo,
   legge come errore di allineamento. */
.areas-page__fig img { width: 100%; aspect-ratio: var(--fig-ratio); object-fit: cover; }
/* Le fotografie possono essere dichiarate NON ingrandibili: sono illustrazioni, non una galleria.
   Si spegne il GESTO (pointer-events) e il cursore torna neutro. ⚠ Il CSS non toglie il link dal
   percorso di tabulazione: quello lo fa `tabindex` nel markup, gestito a parte. */
a.zoom { pointer-events: var(--fig-zoom-pe, auto); cursor: var(--fig-zoom-cursor, zoom-in); }
@media (max-width: 900px) {
  .areas-page__cols { grid-template-columns: 1fr; }
  .areas-page__gallery { grid-template-columns: repeat(2, 1fr); gap: var(--tile-gap); }
  .areas-page__gallery > :first-child { grid-column: 1 / -1; }
  .areas-page__fig img { aspect-ratio: 4 / 3; }
}
/* Griglia delle aree distesa: una colonna larga, testo lungo leggibile. */
.areas-page { display: grid; gap: var(--space-7); }
.area-row {
  display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: var(--space-5);
  padding-bottom: var(--space-7); border-bottom: 1px solid var(--line);
}
.area-row:last-child { border-bottom: 0; padding-bottom: 0; }
.area-row p { margin-top: var(--space-3); color: var(--ink-muted); max-width: 72ch; }
@media (max-width: 620px) { .area-row { grid-template-columns: 1fr; gap: var(--space-3); } }

/* ===========================================================================
   La storia — linea del tempo (innesto dal secondo template della categoria)
   =========================================================================== */
.timeline { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(var(--space-5), 3vw, var(--space-7)); margin-top: var(--space-8); }
.tl-step { position: relative; padding-top: var(--space-7); }
/* La linea che lega i passi: si spegne quando la griglia va a una colonna. */
.tl-step::before { content: ""; position: absolute; left: 0; right: calc(-1 * clamp(var(--space-5), 3vw, var(--space-7))); top: 7px; border-top: 1px solid var(--line); }
.tl-step:last-child::before { right: 0; }
/* Il marcatore è un QUADRATO, non un bollo: il registro non arrotonda. */
.tl-step::after { content: ""; position: absolute; left: 0; top: 0; width: 15px; height: 15px; background: var(--accent); }
.tl-step h3 { color: var(--ink); }
.tl-step p { margin-top: var(--space-3); color: var(--ink-muted); }
@media (max-width: 800px) {
  .timeline { grid-template-columns: 1fr; }
  .tl-step::before { display: none; }
}

/* ===========================================================================
   Come lavoriamo (trust) — banda scura con l'elenco dei fatti
   =========================================================================== */
.worklike { background: var(--ink); color: var(--on-dark); }
.worklike .eyebrow { color: var(--accent-lt); }
.worklike h2 { color: var(--on-dark); }
.worklike__lead { color: var(--on-dark-muted); font-size: var(--text-md); max-width: 60ch; margin-top: var(--space-4); }
.worklike__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-5) var(--space-7); margin-top: var(--space-7); }
.worklike__item {
  display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: var(--space-4); align-items: start;
  color: var(--on-dark-muted); padding-top: var(--space-4); border-top: 1px solid rgba(246,242,234,.16);
}
.worklike__item::before { content: ""; width: 10px; height: 10px; margin-top: .55em; background: var(--accent-lt); }
@media (max-width: 760px) { .worklike__grid { grid-template-columns: 1fr; } }

/* ===========================================================================
   Fascia contatti (contact_band) — blocco pieno in cotto
   =========================================================================== */
.cta-band { background: var(--brand); color: var(--on-dark); padding-block: var(--section-y); }
.cta-band .eyebrow { color: var(--accent-lt); }
.cta-band h2 { color: var(--on-dark); }
.cta-band__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--space-7); align-items: center; }
.cta-band__lead { color: var(--on-dark-muted); font-size: var(--text-md); margin-top: var(--space-4); max-width: 56ch; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: var(--space-3); }
@media (max-width: 820px) { .cta-band__row { grid-template-columns: 1fr; } }

/* ===========================================================================
   Testata delle pagine interne — COMPATTA (l'h1 non usa la scala della testata)
   =========================================================================== */
.page-head { background: var(--surface); border-bottom: 1px solid var(--line); padding-block: var(--space-7) var(--space-6); }
.page-head h1 { font-size: var(--text-xl); }
.page-head__lead { color: var(--ink-muted); font-size: var(--text-md); margin-top: var(--space-4); max-width: 62ch; }

/* ===========================================================================
   Pagina Contatti — due colonne: modulo a sinistra, recapiti in scheda chiara a destra
   =========================================================================== */
.contact-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: clamp(var(--space-6), 4vw, var(--space-8)); align-items: start; }
.contact-form { display: grid; gap: var(--space-4); }
.contact-form h2 { font-size: var(--text-lg); }
.field { display: grid; gap: var(--space-2); }
.field label { font-size: var(--text-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-muted); }
.field input, .field textarea {
  font: inherit; color: var(--ink); background: var(--paper);
  border: 1px solid var(--line); border-radius: var(--radius); padding: var(--space-3);
}
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--focus); outline-offset: 1px; }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.consent { display: flex; gap: var(--space-3); align-items: flex-start; font-size: var(--text-sm); color: var(--ink-muted); }
.consent a { color: var(--accent-ink); text-decoration: underline; }
.form-note { font-size: var(--text-sm); color: var(--ink-muted); }
.contact-info { background: var(--surface); padding: clamp(var(--space-5), 3vw, var(--space-7)); border-top: 3px solid var(--accent); }
.contact-info h2 { font-size: var(--text-lg); }
.contact-info dl { margin-top: var(--space-5); display: grid; gap: var(--space-4); }
.contact-info dt { font-size: var(--text-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); }
.contact-info dd { margin: var(--space-1) 0 0; color: var(--ink); }
.contact-info a:hover { color: var(--accent-ink); }
.hours { margin-top: var(--space-1); }
/* ⚠ L'elenco orari è CONDIVISO fra la scheda contatti (fondo chiaro) e il footer (fondo cotto profondo):
   non fissa un colore, lo EREDITA dal contesto. Fissarlo su --ink lo rendeva illeggibile nel footer
   (1,07:1, misurato) — un componente condiviso nasce chiaro, ed è così che sparisce sullo scuro. */
.hours li { display: flex; justify-content: space-between; gap: var(--space-4); padding-block: 2px; }
.map-link { display: inline-block; margin-top: var(--space-5); font-size: var(--text-sm); font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-ink); border-bottom: 1px solid var(--accent); padding-bottom: 2px; }
@media (max-width: 860px) { .contact-cols { grid-template-columns: 1fr; } .field--row { grid-template-columns: 1fr; } }

/* Prosa delle pagine legali/testuali */
.prose h2 { margin-top: var(--space-7); }
.prose h3 { margin-top: var(--space-5); }
.prose p, .prose ul { margin-top: var(--space-4); max-width: 72ch; color: var(--ink-muted); }
.prose ul { list-style: disc; padding-left: 1.2rem; }
.prose li { margin-top: var(--space-2); }
.prose a { color: var(--accent-ink); text-decoration: underline; }

/* ===========================================================================
   Piè di pagina
   =========================================================================== */
.site-footer { background: var(--brand-dark); color: var(--on-dark-muted); padding-block: var(--space-8) var(--space-6); }
.site-footer h2, .site-footer h3 { color: var(--on-dark); font-size: var(--text-lg); }
.site-footer a { color: var(--on-dark-muted); }
.site-footer a:hover { color: var(--accent-lt); }
.site-footer__grid { display: grid; grid-template-columns: var(--footer-cols, 1.3fr 1fr 1fr); gap: clamp(var(--space-6), 4vw, var(--space-8)); }
/* ⚠ Le tracce sono TRE ma le colonne possono essere due: la colonna degli orari sparisce, con il suo
   markup, per uno studio che non li dichiara. Senza questa regola resterebbe una traccia vuota da 329px
   sulla destra — un buco che si vede, non un dettaglio (misurato: 427/329/329 con due soli figli). */
.site-footer__grid:has(> :nth-child(2):last-child) { grid-template-columns: var(--footer-cols-2, 1.3fr 1fr); }
.site-footer__col h3 { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--accent-lt); }
.site-footer__col ul { margin-top: var(--space-4); display: grid; gap: var(--space-2); }
.site-footer__col address { font-style: normal; margin-top: var(--space-4); display: grid; gap: var(--space-1); }
.site-footer__legal {
  margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid rgba(246,242,234,.16);
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-4);
  font-size: var(--text-sm);
}
/* ⚠ `justify-content: space-between` NON centra l'elemento mediano: con tre celle 1fr/auto/1fr sì. */
.site-footer__legal > :nth-child(2) { justify-self: center; }
.site-footer__legal > :last-child { justify-self: end; }
.powered { display: inline-flex; align-items: center; gap: var(--space-2); }
.powered img { width: 20px; height: 20px; }
@media (max-width: 820px) {
  .site-footer__grid { grid-template-columns: 1fr; }
  .site-footer__legal { grid-template-columns: 1fr; text-align: center; }
  .site-footer__legal > :nth-child(2), .site-footer__legal > :last-child { justify-self: center; }
}

/* ===========================================================================
   Barra CTA fissa (solo mobile)
   =========================================================================== */
.cta-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 60;
  display: none; background: var(--brand); border-top: 1px solid var(--brand-mid);
}
.cta-bar__row { display: grid; grid-template-columns: 1fr 1fr; }
.cta-bar a {
  display: flex; align-items: center; justify-content: center; min-height: 56px;
  font-size: 0.78rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
  color: var(--on-dark);
}
.cta-bar a + a { border-left: 1px solid var(--brand-mid); }
.cta-bar a:hover { background: var(--brand-dark); }
@media (max-width: 899.98px) {
  .cta-bar { display: block; }
  body { padding-bottom: 56px; }
}

/* ===========================================================================
   Lightbox (reveal.js la crea NASCOSTA e la apre con .is-open)
   ⚠ Senza lo stato nascosto l'overlay resta sempre visibile e INTERCETTA OGNI CLICK: il sito sembra
   funzionare al crawl («tutte 200») ed è inutilizzabile. Difetto già pagato, trovato da un cliente.
   =========================================================================== */
.fp-lb {
  position: fixed; inset: 0; z-index: 200; display: none; align-items: center; justify-content: center;
  background: rgba(20,15,12,.94); padding: clamp(var(--space-5), 5vw, var(--space-8));
}
.fp-lb.is-open { display: flex; }
.fp-lb__img { max-width: min(94vw, 1500px); max-height: 88vh; width: auto; height: auto; box-shadow: 0 30px 80px rgba(0,0,0,.55); }
/* La X è DISEGNATA (due barre incrociate): il glifo × a questa misura è sottile e mal centrato. Il testo
   del bottone sparisce ma l'aria-label resta, ed è quello che lo nomina. */
.fp-lb__x {
  position: absolute; top: clamp(12px, 2.2vw, 28px); right: clamp(12px, 2.2vw, 28px);
  width: 48px; height: 48px; padding: 0; font-size: 0; line-height: 0; cursor: pointer;
  color: var(--on-dark); background: rgba(246,242,234,.10); border: 1px solid rgba(246,242,234,.28);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.fp-lb__x::before, .fp-lb__x::after { content: ""; position: absolute; left: 50%; top: 50%; width: 19px; height: 1.5px; background: currentColor; }
.fp-lb__x::before { transform: translate(-50%, -50%) rotate(45deg); }
.fp-lb__x::after  { transform: translate(-50%, -50%) rotate(-45deg); }
.fp-lb__x:hover { background: var(--accent); border-color: var(--accent); color: var(--ink); transform: rotate(90deg); }
.fp-lb__x:focus-visible { outline: 2px solid var(--accent-lt); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) { .fp-lb__x { transition: none; } .fp-lb__x:hover { transform: none; } }

/* Foto apribili: il cursore dichiara l'affordance. */
a.zoom { display: block; cursor: var(--fig-zoom-cursor, zoom-in); }
a.zoom img { transition: transform var(--dur) var(--ease); }
a.zoom:hover img { transform: scale(1.02); }
@media (prefers-reduced-motion: reduce) { a.zoom img, a.zoom:hover img { transition: none; transform: none; } }

/* ===========================================================================
   «Linee che appaiono» — il dispositivo di dinamismo chiesto dall'owner.
   Un filetto non è un ornamento fermo: si DISEGNA quando la sua sezione entra in scena, o sotto il
   puntatore. Tutto in `transform: scaleX`, mai in opacity — un elemento che sfuma trascina il testo
   vicino sotto la soglia AA e può impedire alle immagini che contiene di scaricarsi.
   ⚠ Fail-visible: senza JS la classe `.is-visible` non arriva mai, quindi il filetto DEVE partire
   disegnato e ridursi solo quando il tema è governato da reveal.js (`html.js`).
   =========================================================================== */
.js .reveal .rule,
.js .reveal.rule { transform: scaleX(0); transform-origin: left center; transition: transform .9s var(--ease) .15s; }
.js .reveal.is-visible .rule,
.js .reveal.rule.is-visible { transform: scaleX(1); }
.rule--center { transform-origin: center; }

/* Filetto di separazione delle aree: si disegna da sinistra quando la riga entra. */
.area-row { border-bottom: 0; position: relative; }
.area-row::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line);
  transform-origin: left center; transition: transform 1s var(--ease);
}
.js .area-row.reveal::after { transform: scaleX(0); }
.js .area-row.reveal.is-visible::after { transform: scaleX(1); }
.area-row:last-child::after { display: none; }

/* Linea della cronologia: si allunga verso il passo successivo. */
.js .tl-step.reveal::before { transform: scaleX(0); transform-origin: left center; transition: transform 1.1s var(--ease) .2s; }
.js .tl-step.reveal.is-visible::before { transform: scaleX(1); }

/* Sottolineature che crescono sotto il puntatore: nav, link del footer, link della scheda contatti. */
.site-header .site-nav .wp-block-navigation-item__content { position: relative; }
.site-header .site-nav .wp-block-navigation-item__content::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent);
  transform: scaleX(0); transform-origin: left center; transition: transform .34s var(--ease);
}
.site-header .site-nav .wp-block-navigation-item__content:hover::after { transform: scaleX(1); }

.site-footer__col li a, .contact-info a, .prose a, .topbar a { position: relative; }
.site-footer__col li a::after, .contact-info a::after, .topbar a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -3px; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: left center; transition: transform .34s var(--ease);
}
.site-footer__col li a:hover::after, .contact-info a:hover::after, .topbar a:hover::after { transform: scaleX(1); }

/* Titolo di colonna del footer: filetto che si disegna all'ingresso della banda. */
.site-footer__col h3 { position: relative; padding-bottom: var(--space-3); }
.site-footer__col h3::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 44px; height: 2px; background: var(--accent);
}

/* ===========================================================================
   Ritmo verticale per RUOLO della banda — non un solo passo ripetuto.
   Una pagina che respira alterna gradi diversi: l'attacco dopo la testata è ampio, la banda scura è più
   serrata (il colore pesa già), la chiamata all'azione è compatta perché deve suonare come una battuta.
   =========================================================================== */
.section--studio { padding-block: calc(var(--section-y) * 1.45) calc(var(--section-y) * 1.1); }
.section--storia { padding-block: calc(var(--section-y) * 1.2); }
.worklike        { padding-block: calc(var(--section-y) * 0.88); }
.cta-band        { padding-block: calc(var(--section-y) * 0.72); }
.areas__panel    { margin-block: calc(var(--space-8) * 1.25); }

/* ===========================================================================
   Sovrapposizioni: i piani si scavalcano invece di stare in fila.
   ⚠ Restano DENTRO la propria banda: `.section` porta `overflow-x: clip`, e quando un asse è `clip`
   l'altro dichiarato `visible` diventa `clip` a sua volta — un elemento che sporgesse verticalmente
   verrebbe tagliato, non mostrato.
   =========================================================================== */
@media (min-width: 861px) {
  /* la fotografia morde la colonna di testo e sfora sul lato esterno: la coppia non è più due rettangoli
     affiancati ma due piani a quote diverse */
  .studio__fig { margin-left: calc(-1 * var(--space-4)); margin-right: calc(-1 * var(--gutter)); }
  .studio__grid { align-items: center; }
  /* la linea del tempo risale sotto il proprio testo introduttivo */
  .timeline { margin-top: calc(var(--space-8) - var(--space-4)); }
  /* la scheda dei recapiti si alza rispetto al modulo */
  .contact-info { margin-top: calc(-1 * var(--space-6)); }
  /* i fatti della banda scura sfalsano di colonna */
  /* ⚠ In una griglia a due colonne lo sfalsamento non legge come ritmo: legge come errore di
     allineamento — la stessa lezione gia' pagata sulla colonna fotografica. Ora e' una leva. */
  .worklike__grid > :nth-child(even) { margin-top: var(--worklike-offset); }
}
@media (min-width: 981px) {
  /* la colonna fotografica della pagina Aree sfora anche sopra, agganciandosi alla testata di pagina */
  .areas-page__fig { margin-top: calc(-1 * var(--space-7)); }
}

/* ===========================================================================
   Reattività al puntatore: ogni superficie viva risponde, con misura.
   =========================================================================== */
.area, .tl-step, .area-row, .worklike__item, .site-footer__col li, .contact-info dd, .hours li {
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.area:hover, .area-row:hover { transform: translateX(4px); }
.area:hover .area__icon, .area-row:hover .area__icon { background: var(--brand); }
.area__icon { transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.area:hover .area__icon { transform: scale(1.08); }
.tl-step:hover::after { background: var(--brand); }
.tl-step::after { transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.tl-step:hover::after { transform: rotate(45deg); }
.worklike__item:hover { color: var(--on-dark); }
.worklike__item::before { transition: background var(--dur) var(--ease), transform var(--dur) var(--ease); }
.worklike__item:hover::before { background: var(--on-dark); transform: rotate(45deg); }
.btn { transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.btn:hover { transform: translateY(-2px); }
.studio__fig img, .areas__fig img, .areas-page__fig img { transition: transform .9s var(--ease); }
.studio__fig:hover img, .areas-page__fig:hover img { transform: scale(1.03); }
@media (prefers-reduced-motion: reduce) {
  .area:hover, .area-row:hover, .btn:hover, .tl-step:hover::after, .worklike__item:hover::before,
  .studio__fig:hover img, .areas-page__fig:hover img { transform: none; }
}

/* Seconda staffa, in basso a DESTRA: con quella in alto incornicia la composizione dal lato libero.
   ⚠ In basso a sinistra finiva sotto la targa, cioè invisibile — un segno va collocato dove c'è spazio,
   e lo si scopre guardando, non deducendolo. */
.hero__mark--bl { top: auto; bottom: var(--space-8); }
.hero__mark--bl::before { top: auto; bottom: 0; transition-delay: .8s; }
.hero__mark--bl::after { top: auto; bottom: 0; transition-delay: 1.2s; }

/* La targa tocca il bordo della pagina: nella categoria il blocco pieno non sta educatamente dentro la
   colonna, la sfonda. Stesso calcolo del bordo usato per la colonna fotografica delle aree. */
@media (min-width: 861px) {
  /* ⚠ La targa arriva a filo pagina recuperando `--bleed` col margine negativo e ricompensandolo col
     padding — e per questo la sua LARGHEZZA MASSIMA deve crescere della stessa quantità. Senza, il padding
     (680px a 2560, 972 a 3000) divora una max-width fissa da 832 e il testo finisce in una colonna da 8px,
     una parola per riga. Difetto vero, visto da un cliente su un monitor largo: la misura del CONTENUTO
     resta costante solo se la scatola cresce quanto il compenso. */
  .hero__plate { max-width: var(--hero-plate-w, 52rem);
    margin-left: calc(-1 * var(--hero-plate-bleed, var(--bleed)));
    padding-left: calc(var(--hero-plate-pad-l, var(--bleed)) + clamp(var(--space-6), 4vw, var(--space-8)));
    max-width: calc(var(--hero-plate-w, 48rem) + var(--hero-plate-pad-l, var(--bleed)) + 2 * clamp(var(--space-6), 4vw, var(--space-8)));
  }
  /* le fotografie prendono più scena: la colonna cresce a scapito del margine, non del testo */
  .studio__grid { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); }
}
/* La parallasse ha bisogno di margine: la foto è più alta della cella e si muove dentro il proprio riquadro. */
.studio__fig, .areas__fig, .areas-page__fig { overflow: hidden; }
.studio__fig img, .areas-page__fig img { height: 112%; margin-top: -6%; will-change: transform; }
.areas__fig img { min-height: var(--areas-fig-min-wide); margin-top: var(--areas-fig-mt); will-change: transform; }

/* ===========================================================================
   La fotografia prende scena: gli ambienti di questo studio SONO l'argomento, non un contorno.
   Nessuno scatto cambia — cambia quanto spazio gli si dà.
   =========================================================================== */
@media (min-width: 861px) {
  .studio__fig img { aspect-ratio: var(--fig-ratio-wide); }
  .studio__grid { grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); }
}
@media (min-width: 981px) {
  .areas__grid { grid-template-columns: minmax(0, 0.46fr) minmax(0, 0.54fr); }
  .areas__fig img { min-height: var(--areas-fig-min-xl); }
  .areas-page__cols { grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr); }
  .areas-page__fig img { aspect-ratio: var(--fig-ratio-wide); }
}

/* Reattività estesa: link, voci, figure e schede rispondono tutte, con la stessa misura. */
a, li, figure, article, dd, .btn, .card { transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease); }
.site-footer__col li:hover { transform: translateX(3px); }
.hours li:hover { color: var(--on-dark); }
.contact-info dd:hover { color: var(--accent-ink); }
.topbar__item:hover { color: var(--accent-lt); }
.map-link { transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease), letter-spacing var(--dur) var(--ease); }
.map-link:hover { color: var(--brand); border-color: var(--brand); letter-spacing: .08em; }
.wordmark { transition: transform var(--dur) var(--ease); }
.wordmark:hover { transform: translateY(-1px); }
.wordmark__tag { transition: letter-spacing var(--dur) var(--ease); }
.wordmark:hover .wordmark__tag { letter-spacing: .3em; }
@media (prefers-reduced-motion: reduce) {
  .site-footer__col li:hover, .wordmark:hover { transform: none; }
  .map-link:hover, .wordmark:hover .wordmark__tag { letter-spacing: inherit; }
}

/* ===========================================================================
   Intestazione fusa con la testata cinematografica — SOLO sulla home.
   L'header non sta sopra la fotografia: ci galleggia dentro, e la testata guadagna la finestra intera.
   ⚠ Vincolato a `body:has(.hero--cinema)`: una testata trasparente o scura su una pagina che NON ha
   l'hero lascerebbe l'header illeggibile — difetto già pagato altrove su TUTTE le pagine interne.
   ⚠ Il fondo è SOLIDO, non trasparente: axe risolve il colore di fondo sulla catena degli antenati, non
   sui pixel, e un header trasparente con testo chiaro verrebbe misurato contro l'intonaco (e sarebbe
   davvero illeggibile se la foto non caricasse).
   =========================================================================== */
body:has(.hero--cinema) .site-header { background: var(--night); border-bottom-color: rgba(246,242,234,.14); }
body:has(.hero--cinema) .wordmark__name { color: var(--on-dark); }
body:has(.hero--cinema) .wordmark__tag { color: var(--accent-lt); }
body:has(.hero--cinema) .site-header .site-nav .wp-block-navigation-item__content,
body:has(.hero--cinema) .site-header .site-nav .wp-block-navigation-item__label { color: var(--on-dark); }
body:has(.hero--cinema) .site-header .site-nav .wp-block-navigation-item__content:hover,
body:has(.hero--cinema) .site-header .site-nav .wp-block-navigation-item__content:hover .wp-block-navigation-item__label { color: var(--accent-lt); }
body:has(.hero--cinema) .site-header .wp-block-navigation__responsive-container-open { color: var(--on-dark); }
body:has(.hero--cinema) .site-header__cta { background: var(--paper); color: var(--brand); }
body:has(.hero--cinema) .site-header__cta:hover { background: var(--accent-lt); color: var(--ink); }

/* La testata risale sotto il cromo e prende tutta la finestra: la fotografia parte dal bordo superiore.
   ⚠ DUE classi apposta: `.wp-block-post-content > *` azzera `margin-block` e a parità di specificità
   (0,1,0) vince, lasciando la testata inchiodata sotto l'header — misurato `margin-top: 0px` con la regola
   scritta e apparentemente applicata. È la regola 23: il CSS si verifica nel DOM calcolato. */
.hero.hero--cinema { margin-top: calc(-1 * var(--chrome)); min-height: 100vh; }
.hero--cinema .hero__media { height: 100vh; margin-bottom: -100vh; }
.hero--cinema .hero__body { min-height: var(--hero-min-h, 100vh); padding-top: calc(var(--chrome) + var(--space-6)); padding-bottom: var(--hero-pad-b, var(--space-8)); }

/* ⚠ L'altezza dell'intestazione dev'essere DETERMINISTICA: la testata cinematografica ci sottrae il token
   `--chrome`, e se il marchio va a capo l'header cresce (misurato: 103px a 900 e 88px a 390 invece di 81 e
   77) e la testata parte disallineata. Il marchio non va mai a capo, e nelle fasce strette rimpicciolisce. */
.wordmark__name { white-space: nowrap; }
@media (min-width: 900px) and (max-width: 1080px) { .wordmark__name { font-size: 0.98rem; } }
@media (max-width: 599.98px) { .wordmark__name { font-size: 0.94rem; } .wordmark__tag { font-size: 0.56rem; } }

/* ⚠ Le due larghezze che restavano disallineate erano DUE cause diverse, trovate misurando: a 900px il
   bottone della testata andava a capo (226×70 invece di 226×48) e a 600px si impilava la nav (284×61).
   Un'etichetta di comando non va MAI a capo, e la nav resta in riga anche nella fascia intermedia. */
.btn { white-space: nowrap; }
@media (min-width: 600px) and (max-width: 899.98px) {
  /* ⚠ La targhetta RESTA: nasconderla accorcia l'header di 13px e la testata cinematografica, che sottrae
     il token `--chrome`, finisce a -13. Bastano corpo ridotto e gap più stretto per tenere la nav in riga. */
  .wordmark__name { font-size: 0.9rem; }
  .site-header .site-nav .wp-block-navigation__container { gap: var(--space-3); flex-wrap: nowrap; }
}

/* ⚠ L'altezza dell'intestazione è FISSATA, non dedotta dalle metriche del font: la testata cinematografica
   sottrae il token `--chrome`, e bastava cambiare il corpo del marchio di 0,28rem perché l'header passasse
   da 65 a 63 e la testata finisse a -2. Con una riga di altezza dichiarata il cromo non si muove più,
   qualunque cosa succeda dentro. I tre valori corrispondono ai tre `--chrome`. */
/* ⚠ Con `box-sizing: border-box` il `min-height` COMPRENDE il padding: i valori sono quelli della scatola
   intera (header = riga + 1px di filetto), non del solo contenuto. Scriverne 33 non alzava nulla. */
.site-header__row { min-height: 80px; }
@media (min-width: 600px) and (max-width: 899.98px) { .site-header__row { min-height: 64px; } }
@media (max-width: 599.98px) { .site-header__row { min-height: 76px; } }

/* La banda contatti e il piè di pagina sono due cotti vicini e a fine pagina si fondevano in un'unica
   massa bruna: un filetto d'ocra li separa e chiude la composizione con lo stesso segno con cui si apre. */
.site-footer { border-top: 2px solid var(--accent); }

/* ⚠ La fascia di servizio deve entrare nella stessa pila del resto del cromo: la fotografia della testata
   è `position: sticky`, cioè POSIZIONATA, e un elemento posizionato dipinge sopra il contenuto in FLUSSO —
   la fascia c'era, col suo cotto (misurato 0→34, fondo rgb(94,42,28)), e la foto la copriva. Il risultato
   sembrava un'intestazione «tagliata», con una striscia di fotografia sopra. */
.topbar { position: relative; z-index: 50; }

/* ⚠ Nell'overlay del menu le voci partivano da left: 0, incollate al bordo dello schermo (misurato: tutte
   e quattro a 0, contenitore con padding 0). Il rientro va sul CONTENUTO della voce, non sul contenitore:
   così i filetti di separazione continuano a correre da bordo a bordo mentre il testo respira. */
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
  padding-inline: var(--space-6);
}
.site-header .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
  right: var(--space-6);
}

/* ⚠ Nota e consenso del modulo correvano a 91 caratteri per riga: oltre gli 80 l'occhio perde il capo
   della riga successiva. La misura di lettura si mette sul PARAGRAFO, non sul contenitore. */
.contact-form .consent, .contact-form .form-note { max-width: 62ch; }

/* Banda fotografica della pagina Contatti: la via su cui affaccia lo studio, subito sotto la testata di
   pagina. È l'unico scatto orizzontale del materiale, quindi l'unico che una banda panoramica non
   decapita — un ambiente verticale, tagliato così, perderebbe soffitto e pavimento.
   La pagina restava altrimenti un modulo accanto a una scheda, senza un'immagine del luogo. */
.contact-band { background: var(--paper); position: relative; z-index: 1; overflow: hidden; }
.contact-band__fig { position: relative; overflow: hidden; }
.contact-band__fig img { width: 100%; height: var(--contact-fig-h, clamp(230px, 34vw, 420px)); object-fit: cover; object-position: center 62%; will-change: transform; }

/* Cifre TABELLARI dove i numeri stanno incolonnati: gli orari del footer e della scheda contatti si
   leggono per confronto verticale, e con le cifre proporzionali le colonne ballano.
   Le cifre della fascia di servizio seguono la stessa regola. */
.hours li, .topbar__item, .contact-info dd { font-variant-numeric: tabular-nums; }
/* Cifre alla vecchia maniera nei titoli display: l'anno di fondazione dentro un serif sta meglio con le
   figure non allineate, che si comportano come lettere invece di sporgere. */
.tl-step h3, .hero__index b { font-variant-numeric: oldstyle-nums; }

/* ⚠ Un bottone in coda a un elenco rivelato non può stare attaccato al testo: gli elementi sopra entrano
   traslati di 24px e durante l'animazione GLI FINISCONO DENTRO (misurato: aria 0px a riposo, −24 durante
   la rivelazione). Lo stacco dev'essere maggiore della traslazione, e il bottone entra a sua volta invece
   di restare fermo mentre le cose gli scorrono sopra. */
.panel-more { margin-top: var(--space-8); }
/* Stesso stacco per ogni comando che chiude un blocco di prosa. */
.studio__body > p:last-child:has(.btn) { margin-top: var(--space-7); }

/* Il piè di pagina NON si anima all'ingresso: è la chiusura della lettura, e un movimento proprio lì
   aggiunge peso dove serve quiete. Restano gli stati di HOVER, che rispondono a un gesto voluto invece di
   arrivare da soli. La regola è di sbarramento: se un domani qualcuno rimettesse un `.reveal` qui dentro,
   resterebbe comunque fermo. */
.site-footer .reveal,
.site-footer .reveal.is-visible { transform: none !important; clip-path: none !important; transition: none !important; }
.site-footer .reveal--wipe::after { display: none; }

/* ===========================================================================
   Trama geometrica di riempimento — opt-in, spenta di default
   Le testate di pagina e le colonne alte lasciano larghe zone senza nulla di
   disegnato: un fondo colorato non e' contenuto, ed e' il buco che si vede.
   La trama e' fatta di gradienti ripetuti (zero richieste di rete, zero DOM),
   accesa solo dove il progetto la dichiara col token.
   =========================================================================== */
.page-head { position: relative; overflow: hidden; }
/* il contenuto sta SOPRA la trama: senza questo il decoro copre il testo e il contrasto crolla */
.page-head > * { position: relative; z-index: 1; }
.page-head::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 0;
  opacity: var(--trama-opacita, 0);
  background:
    repeating-linear-gradient(90deg, var(--trama-colore, transparent) 0 1px, transparent 1px 26px),
    repeating-linear-gradient(0deg,  var(--trama-colore, transparent) 0 1px, transparent 1px 26px);
  -webkit-mask-image: linear-gradient(105deg, transparent 60%, #000 78%, #000 100%);
          mask-image: linear-gradient(105deg, transparent 60%, #000 78%, #000 100%);
}
/* Un quarto di cerchio nell'angolo: chiude la diagonale che la trama apre. */
.page-head::before {
  content: ""; position: absolute; right: calc(-1 * var(--space-8)); top: calc(-1 * var(--space-8));
  width: clamp(180px, 26vw, 420px); aspect-ratio: 1; pointer-events: none; z-index: 0;
  opacity: var(--trama-opacita, 0);
  border: 1px solid var(--trama-colore, transparent); border-radius: 50%;
}
.areas__fig { position: relative; }
.areas__fig::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; top: 0; pointer-events: none;
  z-index: -1; opacity: var(--trama-opacita, 0);
  background: repeating-linear-gradient(0deg, var(--trama-colore, transparent) 0 1px, transparent 1px 22px);
}

/* ===========================================================================
   Vetrina documenti (.cat-row) — il markup lo genera build-downloads.mjs, ma il
   verticale non l'aveva mai vestito: le schede restavano incolonnate a sinistra
   con meta' pagina vuota. Griglia centrata, copertina incorniciata, titolo e
   scaricamento sotto.
   =========================================================================== */
.cat-row {
  /* le schede RIEMPIONO la riga: centrarle a larghezza fissa lasciava fasce vuote ai lati
     (misurato: i buchi per pagina da 5,8 a 9,0). */
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
  gap: clamp(var(--space-5), 3vw, var(--space-7));
  align-items: start;
  margin-top: var(--space-6);
}
.cat { display: grid; gap: var(--space-3); text-align: var(--cat-align, center); }
.cat__media {
  position: relative; display: block; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
  box-shadow: var(--shadow-sm);
  transition: transform .5s var(--ease), box-shadow .5s var(--ease);
}
/* la copertina di un PDF e' quasi bianca: il rapporto fisso le da' una forma stabile e il taglio
   dall'alto mostra la parte che porta il marchio, non il fondo pagina. */
.cat__media img { width: 100%; aspect-ratio: 3 / 4; object-fit: contain; background: var(--paper); display: block; }
.cat__media:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.cat__name { font-family: var(--font-display); font-size: var(--text-md); line-height: var(--lh-snug); }
.cat__dl {
  display: inline-flex; align-items: center; gap: var(--space-2); justify-self: center;
  font-size: var(--text-sm); letter-spacing: var(--tracking-label); text-transform: uppercase;
  color: var(--accent-ink); border-bottom: 1px solid currentColor; padding-bottom: 2px;
}
.cat__dl:hover { color: var(--ink); }
/* il titolo di collezione si allinea alla griglia centrata invece di restare a filo sinistro */
.cat-row + h2, h2 + .cat-row { margin-top: var(--space-6); }