/* Medica Line — design system dedicato (spec §9.1/§11.9).
   Layout = codice dell'agenzia, versionato. Contenuti = bozze validate dalla clinica.
   Palette "linea di cura": petrol + acciaio (token canonici in fondo al file).
   Type: Bricolage Grotesque (display) + Hanken Grotesk (testo + etichette in maiuscoletto). */

/* Token legacy (ml-*) ora ALIAS della palette canonica "linea di cura" (definita
   più sotto in :root). Un solo verde/oro/inchiostro su tutte le pagine: cambiando
   il token cambia ovunque. La palette canonica deriva da TenantConfig.tema
   (--colore-primario/-accento/-testo/-sfondo). */
:root {
  /* Alias del contenitore canonico (--maxw 1240): un solo bordo per tutte le pagine. */
  --max-width: 1240px;
  --primario: var(--petrol);
  --accento: var(--brass);
  --testo: var(--ink2);
  --sfondo: var(--paper);
  --crema: var(--card2);
  --ombra: 0 10px 40px rgba(8, 40, 38, .14);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0; font-family: var(--font-testo); color: var(--testo);
  background: var(--sfondo); line-height: 1.65; -webkit-font-smoothing: antialiased;
  /* Sticky footer: il body riempie sempre il viewport, il contenuto cresce. */
  min-height: 100vh; min-height: 100dvh; display: flex; flex-direction: column;
}
main { flex: 1 0 auto; }
h1, h2, h3 { font-family: var(--font-titoli); font-weight: 700; letter-spacing: -.02em; line-height: 1.1; text-wrap: balance; }
a { color: var(--primario); text-decoration: none; }
a:hover { color: var(--accento); }
img { max-width: 100%; display: block; }
.skip-link { position: absolute; left: -999px; }
.skip-link:focus { left: 1rem; top: 1rem; background: #fff; padding: .5rem; z-index: 100; }
:focus-visible { outline: 3px solid var(--accento); outline-offset: 3px; }

/* Header legacy (.ml-header glass): rimosso — la nav unica è .tnav (in fondo al file). */

/* .btn-cta = alias del bottone primario: stessa identica resa di .btn.btn-primary
   (raggruppato nei selettori della sezione "BASE condivisa" in fondo al file).
   Tenuto perché i partial condivisi (_blocco, _cta_manychat) lo emettono. */

/* Hero / trust / sezioni / reveal legacy (.ml-hero, .ml-trust, .ml-section, .reveal):
   rimossi — sostituiti dal sistema "linea di cura" (.thero, .tmethod, .tsec-head,
   .treveal). Il contenitore griglia/card resta (usato da _card_trattamento). */

.griglia { display: grid; gap: 1.8rem; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); }
/* Card trattamento — stesso sistema token delle altre card (.ml-*-card). */
.card {
  display: flex; flex-direction: column; overflow: hidden; background: var(--card2);
  border: 1px solid var(--line-lt); border-radius: var(--radius-card);
  transition: transform .18s ease, box-shadow .18s ease;
}
.card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(8,40,38,.1); }
.card img { width: 100%; height: 210px; object-fit: cover; }
.card-body { padding: 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.card-body h3 { margin: 0; font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; font-size: 1.3rem; }
.card-body h3 a { color: var(--ink2); }
.card-body h3 a:hover { color: var(--brass); text-decoration: none; }
.card-body p { margin: 0; color: var(--ink-soft); }

/* Split / aree-cura / CTA-band / footer legacy (.ml-split, .ml-area, .ml-percorso,
   .ml-band, .ml-footer): rimossi — sostituiti da .tmethod, .ml-area-layout,
   .ml-percorso-card, .tcta (via _cta_band) e .tfoot. */

/* width:100% serve perché main è un flex item: i margini auto disabilitano lo stretch
   e main si restringeva al contenuto (≠ banda della testata). Così riempie la banda
   piena come .ml-pagehead → titolo e corpo allineati a sinistra. */
main { width: 100%; max-width: var(--max-width); margin: 0 auto; padding: 0 var(--pad) 4rem; }
.messaggi { max-width: var(--max-width); margin: 1.5rem auto 0; }
.messaggi .success { color: var(--primario); font-weight: 600; }
.prosa { line-height: 1.8; font-size: 1.05rem; } .prosa p { margin: 0 0 1rem; }
.prosa h2, .prosa h3 { color: var(--primario); margin: 1.6rem 0 .6rem; }
.prosa a { color: var(--primario); text-decoration: underline; }

/* ---------- Page head (band per liste/dettagli) ---------- */
.ml-pagehead {
  /* Stessa hero della home: petrol piatto + bagliore brass (token canonici). */
  background:
    radial-gradient(700px 320px at 85% -20%, rgba(110, 140, 160,.16), transparent 55%),
    var(--petrol);
  color: #fff; border-bottom: 1px solid var(--line-dk);
}
/* Stesso contenitore del nav/.wrap → titolo allineato al logo. */
.ml-pagehead__inner { max-width: var(--maxw); margin: 0 auto; padding: 3.5rem var(--pad); }
.ml-pagehead__eyebrow { font-family: var(--f-label); font-weight: 600; text-transform: uppercase; letter-spacing: .1em; font-size: .72rem; color: var(--brass-soft); margin: 0 0 .7rem; }
.ml-pagehead h1 { font-size: clamp(2rem, 5vw, 3.2rem); margin: 0; color: #fff; }
.ml-pagehead p { margin: .8rem 0 0; opacity: .88; max-width: 70ch; }
.ml-breadcrumb { font-size: .85rem; margin: 0 0 1rem; opacity: .8; }
.ml-breadcrumb a { color: #e7dcc4; } .ml-breadcrumb a:hover { color: var(--accento); }
/* Byline cliccabile nell'header dell'articolo (porta alla scheda del professionista). */
.ml-pagehead__meta time { white-space: nowrap; }
.ml-pagehead__author { color: #fff; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; text-decoration-color: rgba(255,255,255,.4); transition: color .15s ease, text-decoration-color .15s ease; }
.ml-pagehead__author:hover { color: var(--brass-soft); text-decoration-color: var(--brass-soft); }

/* ---------- Filtri categoria ---------- */
.ml-filtri { display: flex; flex-wrap: wrap; gap: .6rem; margin: 0 auto 2.5rem; max-width: var(--max-width); padding: 2rem var(--pad) 0; }
.ml-chip {
  display: inline-block; padding: .45rem 1rem; border: 1px solid #d9d2c2; border-radius: 999px;
  font-size: .88rem; color: var(--primario); background: #fff; transition: all .15s;
}
.ml-chip:hover, .ml-chip[aria-current="true"] { background: var(--primario); color: #fff; border-color: var(--primario); text-decoration: none; }

/* ---------- Dettaglio ---------- */
.ml-detail { display: grid; gap: 3rem; grid-template-columns: 1.6fr 1fr; align-items: start; padding-top: 3rem; }
.ml-detail__media img { width: 100%; border-radius: 8px; box-shadow: var(--ombra); }
.ml-aside {
  background: var(--crema); border: 1px solid #e8e2d4; border-radius: 8px; padding: 1.6rem;
  position: sticky; top: 90px;
}
.ml-aside h3 { margin: 0 0 .8rem; font-size: 1.05rem; color: var(--primario); text-transform: uppercase; letter-spacing: 1px; }
.ml-aside ul { list-style: none; margin: 0 0 1.2rem; padding: 0; }
.ml-aside li { padding: .35rem 0; border-bottom: 1px solid #e8e2d4; }
.ml-aside li:last-child { border-bottom: 0; }
.ml-specs { margin: 0; }
.ml-specs > div { padding: .65rem 0; border-bottom: 1px solid var(--line-lt); }
.ml-specs > div:last-child { border-bottom: 0; }
.ml-specs dt { font-family: var(--f-label); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: .3rem; }
.ml-specs dd { margin: 0; color: var(--ink2); font-size: .95rem; }
.ml-specs dd.ml-tags { display: flex; flex-wrap: wrap; gap: .4rem; }
.ml-spec-list { list-style: none; margin: 0; padding: 0; }
.ml-spec-list li { display: flex; gap: .6rem; line-height: 1.45; margin: .35rem 0; font-size: .95rem; color: var(--ink2); }
.ml-spec-list li::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--brass); margin-top: .5em; }
.ml-tech-card__tipo { font-size: .9rem; color: var(--ink-soft); margin: 0; }
.ml-note { background: #fff7e8; border-left: 3px solid var(--accento); padding: 1rem 1.2rem; border-radius: 4px; margin: 1.5rem 0; }
.ml-note h3 { margin: 0 0 .4rem; color: var(--primario); font-size: 1rem; }
.ml-faq details { border-bottom: 1px solid #e3ddcf; padding: .9rem 0; }
.ml-faq summary { cursor: pointer; font-weight: 600; color: var(--primario); }
.ml-faq summary::marker { color: var(--accento); }
.ml-faq p { margin: .6rem 0 0; opacity: .85; }
.ml-tags { display: flex; flex-wrap: wrap; gap: .5rem; }
.ml-tag { font-size: .82rem; background: var(--primario); color: #fff; padding: .25rem .7rem; border-radius: 4px; }
.ml-tag:hover { background: var(--accento); color: #1a1a1a; text-decoration: none; }
.ml-empty { grid-column: 1 / -1; text-align: center; padding: 4rem 1.5rem; opacity: .7; }

/* ---------- Macro-area: percorsi + zone (struttura tipo sito reale) ---------- */
.ml-percorsi { display: grid; gap: 1.4rem; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); margin: 0 0 3rem; }
.ml-percorso-card { display: flex; flex-direction: column; background: var(--card2, #fff); border: 1px solid var(--line-lt, rgba(20,48,46,.12)); border-radius: 14px; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.ml-percorso-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(16,32,48,.1); text-decoration: none; }
.ml-percorso-card img { width: 100%; height: 150px; object-fit: cover; }
.ml-percorso-card__body { padding: 1.1rem 1.2rem 1.3rem; display: flex; flex-direction: column; gap: .5rem; }
.ml-percorso-card__body h3 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; color: var(--ink2); margin: 0; }
.ml-percorso-card__body p { color: var(--ink-soft); font-size: .95rem; margin: 0; }
.ml-scopri { margin-top: auto; font-family: var(--f-label); font-size: .76rem; letter-spacing: .08em; text-transform: uppercase; color: var(--brass); display: inline-flex; gap: .5rem; }
.ml-percorso-sec { margin: 2.6rem 0; }
.ml-percorso-sec > h2 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.025em; color: var(--ink2); border-bottom: 2px solid var(--brass); display: inline-block; padding-bottom: .25rem; margin-bottom: 1.2rem; }
.ml-zona { font-family: var(--f-label); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-soft); margin: 1.6rem 0 .9rem; }
.ml-uomo { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line-lt, rgba(20,48,46,.12)); }
.ml-uomo > h2 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.025em; color: var(--ink2); margin-bottom: 1rem; }

/* ---------- Liste interne: spaziatura + griglie dedicate ---------- */
.ml-listing { padding: clamp(3rem, 6vw, 5rem) 0; background: var(--paper); }

/* Sezioni correlate nelle pagine di dettaglio (card via componenti) */
.ml-correlati { padding: clamp(2.5rem, 5vw, 4rem) 0; border-top: 1px solid var(--line-lt); }
.ml-correlati > .wrap > h2 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; color: var(--ink2); margin: 0 0 1.4rem; }

/* Team: avatar rotondo (foto o iniziale), 4 colonne */
.ml-team { display: grid; gap: 1.6rem; grid-template-columns: repeat(4, 1fr); }
@media (max-width: 900px) { .ml-team { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .ml-team { grid-template-columns: 1fr; } }
.ml-prof-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: .9rem; background: var(--card2); border: 1px solid var(--line-lt); border-radius: var(--radius-card); padding: 2rem 1.2rem; transition: transform .18s ease, box-shadow .18s ease; }
.ml-prof-card:hover { transform: translateY(-3px); box-shadow: 0 14px 30px rgba(8,40,38,.1); text-decoration: none; }
.ml-avatar { width: 120px; height: 120px; border-radius: 50%; overflow: hidden; background: var(--petrol); display: flex; align-items: center; justify-content: center; flex: none; }
.ml-avatar__img { width: 100%; height: 100%; object-fit: cover; }
.ml-avatar__ph { font-family: var(--f-display); font-weight: 700; font-size: 2.1rem; letter-spacing: .02em; color: var(--brass-soft); }
.ml-prof-card h3 { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; color: var(--ink2); margin: 0; }
.ml-prof-card p { color: var(--ink-soft); font-size: .9rem; margin: 0; }
.ml-team-group { margin-bottom: 2.6rem; scroll-margin-top: 96px; }
.ml-team-h { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.02em; color: var(--ink2); margin: 0 0 1.2rem; padding-bottom: .35rem; border-bottom: 2px solid var(--brass); display: inline-block; }

/* Archivio team con indice (TOC) laterale delle specialità (oltre 4 gruppi).
   La pagina si allarga per ospitare sidebar + griglia. Sotto le 4, layout
   semplice a una colonna (--notoc) con la griglia 4-col di default. */
.wrap.ml-team-wrap--wide { max-width: min(1480px, 94vw); }
.ml-team-layout { display: grid; grid-template-columns: 260px 1fr; gap: clamp(1.6rem, 4vw, 3.2rem); align-items: start; }
.ml-team-layout--notoc { grid-template-columns: 1fr; }
/* Nell'archivio con TOC la griglia riempie il main: 3 colonne (poi 2, poi 1). */
.ml-team-layout:not(.ml-team-layout--notoc) .ml-team-main .ml-team { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ml-team-layout:not(.ml-team-layout--notoc) .ml-team-main .ml-team { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .ml-team-layout:not(.ml-team-layout--notoc) .ml-team-main .ml-team { grid-template-columns: 1fr; } }
.ml-team-toc { position: sticky; top: 96px; }
.ml-team-toc__h { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: var(--brass); margin: 0 0 .8rem; }
.ml-team-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .15rem; }
.ml-team-toc a { display: flex; align-items: center; justify-content: space-between; gap: .6rem; padding: .5rem .7rem; border-radius: 9px; color: var(--ink-soft); font-size: .92rem; font-weight: 600; text-decoration: none; transition: background .15s ease, color .15s ease; }
.ml-team-toc a:hover { background: rgba(14,59,56,.05); color: var(--ink2); text-decoration: none; }
.ml-team-toc a.on { background: rgba(14,59,56,.06); color: var(--petrol); }
.ml-team-toc a em { font-style: normal; font-family: var(--f-label); font-size: .72rem; color: var(--brass); background: rgba(110,140,160,.16); border-radius: 100px; padding: .05rem .5rem; flex: none; }
.ml-team-toc a.on em { color: #1c1304; background: var(--brass); }
@media (max-width: 820px) {
  .ml-team-layout { grid-template-columns: 1fr; gap: 1.4rem; }
  .ml-team-toc { position: static; top: auto; }
  .ml-team-toc ul { flex-direction: row; flex-wrap: wrap; gap: .4rem; }
  .ml-team-toc a { border: 1px solid var(--line-lt); border-radius: 100px; padding: .4rem .8rem; font-size: .85rem; }
  .ml-team-group { scroll-margin-top: 72px; }
}

/* Pagina aree di cura: contenuto + sidebar con il team della specialità */
.ml-area-layout { display: grid; grid-template-columns: 1fr 280px; gap: clamp(1.6rem, 4vw, 3rem); align-items: start; }
.ml-area-layout--noteam { grid-template-columns: 1fr; }
.ml-area-team { position: sticky; top: 96px; background: var(--card2); border: 1px solid var(--line-lt); border-radius: var(--radius-card); padding: 1.2rem 1.1rem; }
.ml-area-team__h { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .12em; font-size: .7rem; color: var(--brass); margin: 0 0 .9rem; }
.ml-team-mini { list-style: none; margin: 0 0 .6rem; padding: 0; display: flex; flex-direction: column; gap: .2rem; }
.ml-team-mini a { display: flex; align-items: center; gap: .7rem; padding: .45rem .5rem; border-radius: 10px; text-decoration: none; transition: background .15s ease; }
.ml-team-mini a:hover { background: rgba(14,59,56,.05); text-decoration: none; }
.ml-avatar--sm { width: 46px; height: 46px; }
.ml-avatar--sm .ml-avatar__ph { font-size: 1rem; }
.ml-team-mini__txt { display: flex; flex-direction: column; min-width: 0; line-height: 1.25; }
.ml-team-mini__txt strong { font-family: var(--f-display); font-weight: 700; font-size: .92rem; color: var(--ink2); }
.ml-team-mini__txt em { font-style: normal; font-size: .78rem; color: var(--ink-soft); }
.ml-team-mini__all { font-family: var(--f-label); font-size: .74rem; letter-spacing: .06em; text-transform: uppercase; color: var(--brass); display: inline-flex; gap: .4rem; }
@media (max-width: 820px) {
  .ml-area-layout { grid-template-columns: 1fr; gap: 1.6rem; }
  .ml-area-team { position: static; top: auto; }
  .ml-team-mini { flex-direction: row; flex-wrap: wrap; }
  .ml-team-mini a { flex: 1 1 220px; }
}

/* Tecnologie: card grandi, 2 colonne */
.ml-tech { display: grid; gap: 1.8rem; grid-template-columns: repeat(2, 1fr); }
@media (max-width: 760px) { .ml-tech { grid-template-columns: 1fr; } }
.ml-tech-card { display: flex; flex-direction: column; background: var(--card2); border: 1px solid var(--line-lt); border-radius: var(--radius-card); overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; }
.ml-tech-card:hover { transform: translateY(-3px); box-shadow: 0 16px 36px rgba(8,40,38,.12); text-decoration: none; }
.ml-tech-card__media img { width: 100%; height: 260px; object-fit: cover; display: block; }
.ml-tech-card__body { padding: 1.6rem 1.8rem 1.9rem; display: flex; flex-direction: column; gap: .5rem; }
.ml-tech-card__brand { font-family: var(--f-label); font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); }
/* Bio a schema fisso (professionista): stesse sezioni per tutti */
.ml-bio section { margin-top: 1.6rem; }
.ml-bio h2 { font-family: var(--f-display); font-weight: 700; font-size: 1.2rem; letter-spacing: -.01em; color: var(--ink2); margin: 0 0 .5rem; padding-bottom: .3rem; border-bottom: 1px solid var(--line-lt); }
.ml-bio p { color: var(--ink-soft); margin: .4rem 0; }
.ml-tech-card__body h3 { font-family: var(--f-display); font-weight: 700; font-size: clamp(1.4rem, 2.4vw, 1.9rem); letter-spacing: -.02em; color: var(--ink2); margin: 0; }
.ml-tech-card__body p { color: var(--ink-soft); margin: 0; }

/* ---------- Pagina grazie (centrata, design system) ---------- */
.ml-thanks { background: radial-gradient(700px 320px at 85% -20%, rgba(110, 140, 160,.16), transparent 55%), var(--petrol); color: #fff; text-align: center; padding: clamp(5rem, 12vh, 9rem) 0; }
.ml-thanks .eyebrow { color: var(--brass-soft); display: flex; justify-content: center; margin-bottom: 1.4rem; }
.ml-thanks h1 { font-family: var(--f-display); font-weight: 700; font-size: clamp(3rem, 8vw, 5.5rem); line-height: 1; letter-spacing: -.03em; color: #fff; margin: 0; }
.ml-thanks p { color: rgba(255,255,255,.86); max-width: 46ch; margin: 1.4rem auto 0; font-size: clamp(1.02rem, 1.6vw, 1.18rem); }
.ml-thanks__cta { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; margin-top: 2.4rem; }

/* ---------- Scheda professionista ---------- */
.ml-prof { display: grid; gap: 2.5rem; grid-template-columns: 320px 1fr; align-items: start; padding-top: 3rem; }
.ml-prof__side { position: sticky; top: 96px; }
/* Foto reale, MAI ritagliata: sta nel riquadro per larghezza e altezza, ratio intatto. */
.ml-prof__photo { display: block; margin: 0 auto; max-width: 100%; max-height: 460px; width: auto; height: auto; border-radius: 8px; box-shadow: var(--ombra); }
/* Segnaposto foto: avatar petrol + iniziali, riquadro 4:3 (basso, non «lungo»). */
.ml-prof__ph { aspect-ratio: 4 / 3; width: 100%; background: var(--petrol); display: flex; align-items: center; justify-content: center; }
.ml-prof__ph span { font-family: var(--f-display); font-weight: 700; font-size: clamp(3rem, 6vw, 4.5rem); letter-spacing: .02em; color: var(--brass-soft); }
.ml-prof__albo { font-size: .85rem; opacity: .7; margin-top: .5rem; }
.ml-prof__tratt { margin-top: 1.6rem; padding-top: 1.2rem; border-top: 1px solid var(--line-lt); }
.ml-prof__tratt h2 { font-family: var(--f-label); text-transform: uppercase; letter-spacing: .12em; font-size: .72rem; color: var(--brass); margin: 0 0 .7rem; }
@media (max-width: 880px) { .ml-prof__side { position: static; top: auto; } }

/* ---------- Contatti: form + mappa in sidebar destra ---------- */
.ml-contatti { display: grid; grid-template-columns: 1fr 420px; gap: clamp(1.6rem, 4vw, 3.2rem); align-items: start; padding-top: 3rem; }
.ml-contatti--solo { grid-template-columns: 1fr; max-width: 720px; margin: 0 auto; }
.ml-contatti__main .ml-form { max-width: none; margin: 0; padding-top: 0; }
.ml-contatti__side { position: sticky; top: 96px; }
.ml-contatti__side .ml-mappa { max-width: none; margin: 0; }
@media (max-width: 820px) {
  .ml-contatti { grid-template-columns: 1fr; max-width: 640px; }
  .ml-contatti__side { position: static; top: auto; }
}

/* ---------- Pagine legali (privacy) ---------- */
.ml-legal { padding-top: 2.5rem; }
.ml-legal .prosa { max-width: 72ch; }
.ml-legal__box { max-width: 72ch; margin-top: 2.5rem; padding-top: 1.6rem; border-top: 1px solid var(--line-lt); }
.ml-legal__box h2 { font-family: var(--f-display); font-size: 1.2rem; color: var(--petrol); margin: 1.2rem 0 .3rem; }
.ml-legal__box p { color: var(--ink-soft); line-height: 1.6; }

/* ---------- Blog / Articoli ---------- */
/* Card articolo: riusa .card (token). Kicker categoria + meta autore·data. */
.card-kicker { font-family: var(--f-label); font-weight: 600; font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--brass); }
.card-meta { margin: 0; font-size: .84rem; color: var(--ink-soft); }
/* Dettaglio articolo: colonna di lettura centrata. */
.ml-article { max-width: 72ch; margin: 0; padding-top: 3rem; }
.ml-article__media img { width: 100%; border-radius: var(--radius-card); box-shadow: var(--ombra); margin-bottom: 2rem; }
.ml-article__lead { font-size: 1.2rem; line-height: 1.6; color: var(--ink2); margin: 0 0 1.6rem; }
.ml-article .prosa { font-size: 1.08rem; }
.ml-article__autore { display: flex; align-items: center; gap: 1rem; margin: 2.4rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--line-lt); }
.ml-article__autore .ml-avatar { flex: none; }
.ml-article__autore-txt { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; }
.ml-article__autore-nome { margin: 0; font-family: var(--f-display); font-weight: 700; line-height: 1.15; color: var(--ink2); }
.ml-article__autore-nome a { color: var(--ink2); }
.ml-article__autore-nome a:hover { color: var(--brass); }
.ml-article__autore-ruolo { margin: 0; font-size: .9rem; line-height: 1.2; color: var(--ink-soft); }
/* Bibliografia (fonti scientifiche dell'articolo) */
.ml-article .fonti { margin: 1.6rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--line-lt); }
.fonti__titolo { font-family: var(--f-display); font-weight: 700; font-size: 1.15rem; color: var(--ink2); margin: 0 0 1rem; }
.fonti__lista { margin: 0; padding-left: 1.4rem; display: flex; flex-direction: column; gap: .8rem; }
.fonti__item { font-size: .92rem; line-height: 1.45; color: var(--ink-soft); }
.fonti__rif { color: var(--ink2); font-weight: 600; }
a.fonti__rif:hover { color: var(--brass); }
.fonti__meta { display: block; margin-top: .15rem; color: var(--ink-soft); }

/* ---------- Articolo: indice (TOC) laterale ----------
   Quando JS trova ≥2 <h2> sposta il testo in .ml-article__main e affianca l'indice.
   Il layout riempie la banda piena di main (come la testata): il testo resta
   ALLINEATO A SINISTRA col titolo (niente contenitore centrato e rientrato),
   l'indice va nel margine destro, la colonna centrale flessibile fa da respiro. */
.ml-article .prosa h2 { scroll-margin-top: 96px; }
.ml-article--toc {
  max-width: none;  /* annulla il 72ch di .ml-article: qui si riempie la banda piena */
  display: grid;
  grid-template-columns: minmax(0, 72ch) minmax(clamp(2rem, 5vw, 4.5rem), 1fr) clamp(200px, 19vw, 244px);
  align-items: start;
}
.ml-article--toc .ml-article__main { grid-column: 1; grid-row: 1; min-width: 0; }
.ml-toc { grid-column: 3; grid-row: 1; position: sticky; top: 96px; align-self: start; }
.ml-toc__label { font-family: var(--f-label); font-weight: 600; text-transform: uppercase; letter-spacing: .14em; font-size: .7rem; color: var(--brass); margin: 0 0 .8rem; }
.ml-toc__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .1rem; max-height: calc(100vh - 140px); overflow-y: auto; }
.ml-toc__link { display: block; padding: .5rem .7rem; border-radius: 9px; color: var(--ink-soft); font-size: .9rem; line-height: 1.35; font-weight: 600; text-decoration: none; overflow-wrap: break-word; hyphens: auto; transition: background .15s ease, color .15s ease; }
.ml-toc__link:hover { background: rgba(14,59,56,.05); color: var(--ink2); text-decoration: none; }
.ml-toc__link.is-active { background: rgba(14,59,56,.06); color: var(--petrol); }

@media (max-width: 1024px) {
  .ml-article--toc { display: block; max-width: 72ch; }
  .ml-toc { position: static; top: auto; margin: 0 0 2rem; padding: 1rem 1.1rem; background: var(--card2); border: 1px solid var(--line-lt); border-radius: var(--radius-card); }
  .ml-toc__list { max-height: none; overflow: visible; }
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
/* Paginazione */
.paginazione { display: flex; align-items: center; justify-content: center; gap: 1.4rem; margin-top: 3rem; font-size: .92rem; }
.paginazione__stato { color: var(--ink-soft); font-family: var(--f-label); letter-spacing: .04em; }
.paginazione__link { font-weight: 600; color: var(--petrol); }
.paginazione__link:hover { color: var(--brass); text-decoration: none; }

/* ---------- Mappa (immagine statica via proxy: chiave server-side, no cookie) ---------- */
.ml-mappa { max-width: 640px; margin: 2.5rem auto 0; }
.ml-mappa h2 { font-family: var(--f-display); font-weight: 700; letter-spacing: -.02em; color: var(--ink2); margin: 0 0 .4rem; }
.ml-mappa__addr { color: var(--ink-soft); margin: 0 0 1rem; }
.ml-mappa__link { display: block; position: relative; border-radius: var(--radius-card); overflow: hidden; border: 1px solid var(--line-lt); }
.ml-mappa__link:hover { text-decoration: none; }
.ml-mappa__img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.ml-mappa__ext { position: absolute; right: .6rem; bottom: .6rem; background: var(--paper); color: var(--petrol); font-family: var(--f-label); font-size: .72rem; letter-spacing: .04em; padding: .3rem .6rem; border-radius: 100px; box-shadow: 0 2px 8px rgba(8,40,38,.18); }

/* ---------- Form contatti ---------- */
.ml-form { max-width: 640px; margin: 0 auto; padding-top: 3rem; }
.ml-form p { margin: 0 0 1.1rem; }
.ml-form label { display: block; font-weight: 600; margin-bottom: .3rem; color: var(--primario); }
.ml-form input[type=text], .ml-form input[type=email], .ml-form textarea, .ml-form select {
  width: 100%; padding: .7rem .85rem; border: 1px solid #d3ccba; border-radius: 4px;
  font: inherit; background: #fff;
}
/* Input testo e select: stessa altezza (campo alto e leggibile) */
.ml-form input[type=text], .ml-form input[type=email], .ml-form select { min-height: 3.4rem; }
/* Select trattamento: più grande, optgroup per area */
.ml-form select { padding: .9rem 1rem; font-size: 1.05rem; line-height: 1.4; cursor: pointer; }
.ml-form select optgroup { font-weight: 700; color: var(--petrol); }
.ml-form select option { font-weight: 400; color: var(--ink2); padding: .3rem 0; }
.ml-form .consenso { display: flex; gap: .6rem; align-items: flex-start; font-weight: 400; font-size: .92rem; }
.ml-form .consenso label { font-weight: 400; color: var(--testo); }
.ml-form .consenso .ml-privacy-link { color: var(--petrol); font-weight: 600; text-decoration: underline; text-underline-offset: 2px; }
.ml-form .consenso .ml-privacy-link:hover { color: var(--brass); }
.ml-form .req { color: #b91c1c; font-weight: 700; text-decoration: none; border: 0; cursor: help; }
.ml-form .err { color: #b91c1c; font-size: .85rem; display: block; margin-top: .2rem; }
/* Errore di consenso reso fuori dal <label> (checkbox): rientra come i campi. */
.ml-form .err--blocco { margin: -.6rem 0 1.1rem; }
/* Riepilogo errori a fondo form (a11y: role=alert, riceve focus). */
.ml-form__alert { background: #fdf2f2; border: 1px solid #f0c5c5; border-radius: 10px; padding: .85rem 1.1rem; margin: 0 0 1.4rem; color: #8a1c1c; }
.ml-form__alert strong { display: block; }
.ml-form__alert p { margin: .35rem 0 0; font-size: .92rem; }
.ml-form__alert:focus { outline: 3px solid var(--accento); outline-offset: 2px; }
/* Stato disabilitato/pending dei bottoni (submit in invio). */
.btn:disabled, .btn-cta:disabled { opacity: .6; pointer-events: none; }

/* ---------- Blocchi pagina ---------- */
.blocco-hero { background: var(--crema); border-radius: 8px; padding: 3rem 2rem; text-align: center; margin: 2rem 0; }
.blocco-hero h2 { font-size: clamp(1.8rem, 4vw, 2.6rem); color: var(--primario); }
.blocco-testo, .blocco-faq, .blocco-gallery, .blocco-cta { margin: 2.5rem 0; }
.cta-manychat { text-align: center; margin: 3rem 0; }

@media (max-width: 900px) {
  .ml-detail, .ml-prof { grid-template-columns: 1fr; }
  .ml-aside { position: static; }
}

/* ============================================================
   DESIGN TOKENS — sorgente unica del look "linea di cura".
   Colori/font derivano da TenantConfig.tema (CSS variables): cambiando un token
   qui (o nel tema) cambia ovunque. I token legacy (--primario...) sono alias di
   questi (vedi inizio file). Nessun valore hardcodato nei template di pagina.
   ============================================================ */
:root{
  /* Palette */
  --petrol:var(--colore-primario,#0E3B38);
  --petrol-deep:#082826;
  --paper:var(--colore-sfondo,#EEF1EC);
  --card2:#FBFBF8;
  /* --brass = acciaio: ACCENTO SECONDARIO (eyebrow, bordi, nodi, focus). Non è oro. */
  --brass:var(--colore-accento,#6E8CA0);
  --brass-soft:#9DB3C2;
  /* --cta = oro caldo: solo i BOTTONI D'AZIONE primari. Unico elemento caldo della
     palette → l'azione spicca sul petrol (complementare). ~oklch(76% .13 75). */
  --cta:#CDA13F;
  --cta-hover:#E0B65C;
  --cta-ink:#2A1D04;
  /* Bordo bronzo: definisce il contorno del bottone su sfondo chiaro (paper) dove
     il riempimento oro stacca poco — WCAG 1.4.11 ≥3:1. Sull'hero petrol è invisibile. */
  --cta-line:#9A7220;
  --ink2:var(--colore-testo,#14302E);
  --ink-soft:#41514E;
  --line-dk:rgba(255,255,255,.14);
  --line-lt:rgba(20,48,46,.12);
  /* Tipografia */
  --f-display:var(--font-titoli,'Bricolage Grotesque',sans-serif);
  --f-body:var(--font-testo,'Hanken Grotesk',sans-serif);
  /* Voce "etichetta": Hanken in maiuscoletto (niente più mono → tono caldo-umano). */
  --f-label:var(--f-body);
  --fs-eyebrow:.72rem;
  --fs-body:clamp(1rem,1.2vw,1.08rem);
  --fs-h3:clamp(1.35rem,2.8vw,2rem);
  --fs-h2:clamp(1.9rem,4.2vw,3.1rem);
  --fs-h1:clamp(2.6rem,7.6vw,6rem);
  /* Spazio / forma / moto */
  --maxw:1240px;
  --pad:clamp(20px,5vw,64px);
  --space-section:clamp(72px,11vh,128px);
  --radius-pill:100px;
  --radius-card:14px;
  --ease-out:cubic-bezier(.23,1,.32,1);
}
.tpl-home{background:var(--paper);color:var(--ink2);font-family:var(--f-body)}

/* BASE condivisa (non scoped alla home): contenitore, eyebrow, bottoni.
   Così tutte le pagine del tenant ereditano lo stesso look. */
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
/* Dentro <main> il contenitore è già <main> (stesso 1240/--pad del pagehead):
   i blocchi con container proprio sono pass-through, evitano doppio padding. */
main .wrap, main .ml-filtri{max-width:none;padding-left:0;padding-right:0}
.eyebrow{font-family:var(--f-label);font-size:var(--fs-eyebrow);font-weight:600;letter-spacing:.1em;text-transform:uppercase}
/* Peso unico della "voce etichetta" (Hanken in maiuscoletto): senza mono il 400
   risulterebbe troppo esile, il 600 dà presenza mantenendo il tono caldo. */
.thero-meta,.tpillar-k,.tfoot-col h5,.trep-go,.ml-zona,.ml-scopri,.ml-team-toc__h,.ml-area-team__h,.ml-team-mini__all,.ml-tech-card__brand,.ml-prof__tratt h2,.ml-specs dt,.ml-mappa__ext,.ml-team-toc a em{font-weight:600}
.btn,.btn-cta{display:inline-flex;align-items:center;gap:9px;font-family:var(--f-body);font-weight:600;font-size:.9rem;padding:13px 22px;border-radius:var(--radius-pill);border:1px solid transparent;cursor:pointer;transition:transform .16s var(--ease-out),background .2s var(--ease-out),color .2s,border-color .2s;white-space:nowrap}
.btn-primary,.btn-cta{background:var(--cta);color:var(--cta-ink);border-color:var(--cta-line)}
.btn-primary:hover,.btn-cta:hover{background:var(--cta-hover);text-decoration:none}
.btn-ghost{background:transparent;color:#fff;border-color:rgba(255,255,255,.28)}
.btn-ghost:hover{border-color:#fff;text-decoration:none}
/* lift solo su dispositivi con hover reale; press feedback ovunque */
@media(hover:hover) and (pointer:fine){.btn:hover,.btn-cta:hover{transform:translateY(-2px)}}
.btn:active,.btn-cta:active{transform:scale(.97)}
.btn .btn-arrow{font-size:1.05em;line-height:1;transition:transform .16s var(--ease-out)}
@media(hover:hover) and (pointer:fine){.btn:hover .btn-arrow{transform:translateX(3px)}}
.btn-arrow{font-size:1.05em;line-height:1}

/* NAV — unica su tutte le pagine. Default: barra solida petrol sticky (stesso
   verde della hero home). Sulla home (.tpl-home) diventa trasparente sull'hero. */
.tnav{position:sticky;top:0;z-index:30;padding:18px 0;background:var(--petrol);border-bottom:1px solid var(--line-dk)}
.tpl-home .tnav{position:absolute;top:0;left:0;right:0;padding:18px 0;background:transparent;border-bottom:0}
.tnav .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.tnav-in{display:flex;align-items:center;justify-content:space-between;gap:24px}
.tnav .brand{display:flex;align-items:center;gap:11px;color:#fff}
.tnav .brand-mark{width:34px;height:34px;flex:none}
.tnav .brand-logo{display:block;height:auto;flex:none}
.tnav .brand-name{font-family:var(--f-display);font-weight:700;font-size:1.18rem;letter-spacing:-.01em;color:#fff}
.tnav .brand-name b{color:var(--brass-soft);font-weight:700}
.tnav-menu{display:flex;align-items:center;gap:clamp(20px,3vw,30px)}
.tnav-links{display:flex;gap:30px;align-items:center}
.tnav-links a{color:rgba(255,255,255,.82);font-size:.92rem;font-weight:500;transition:color .2s}
.tnav-links a:hover{color:#fff;text-decoration:none}
/* Pagina corrente: testo pieno + sottolineatura acciaio (stato/wayfinding, non oro). */
.tnav-links a.on{color:#fff;text-decoration:underline;text-decoration-color:var(--brass-soft);text-decoration-thickness:2px;text-underline-offset:6px}
/* Sottomenu (header + dropdown): si apre su hover/focus a desktop. */
.tnav-item{position:relative;display:inline-flex;align-items:center}
.tnav-caret{font-size:.7em;opacity:.7;margin-left:3px}
.tnav-sub{position:absolute;top:100%;left:-.5rem;min-width:210px;background:var(--petrol-deep);border:1px solid var(--line-dk);border-radius:12px;padding:.5rem;display:flex;flex-direction:column;gap:.1rem;opacity:0;visibility:hidden;transform:translateY(-6px);transition:opacity .2s var(--ease-out),transform .2s var(--ease-out),visibility .2s;box-shadow:0 18px 40px rgba(0,0,0,.28);z-index:31}
.tnav-has-sub:hover .tnav-sub,.tnav-has-sub:focus-within .tnav-sub{opacity:1;visibility:visible;transform:none}
.tnav-sub a{padding:.55rem .7rem;border-radius:8px;color:rgba(255,255,255,.82);font-size:.9rem;font-weight:500;white-space:nowrap}
.tnav-sub a:hover{background:rgba(255,255,255,.08);color:#fff;text-decoration:none}
@media(prefers-reduced-motion:reduce){.tnav-sub{transition:none}}
/* CTA del nav: auto-sufficiente (le pagine interne non hanno .tpl-home .btn). */
.tnav-cta{display:inline-flex;align-items:center;gap:8px;background:var(--cta);color:var(--cta-ink);font-family:var(--f-body);font-weight:600;font-size:.9rem;padding:11px 20px;border-radius:100px;border:1px solid var(--cta-line);white-space:nowrap;transition:transform .16s var(--ease-out),background .2s}
.tnav-cta:hover{background:var(--cta-hover);color:var(--cta-ink);text-decoration:none}
.tnav-cta:active{transform:scale(.97)}
/* Hamburger (solo mobile) */
.tnav-toggle{display:none;flex-direction:column;justify-content:center;gap:5px;width:42px;height:38px;background:transparent;border:0;cursor:pointer;padding:8px;flex:none}
.tnav-toggle span{display:block;height:2px;width:100%;background:#fff;border-radius:2px;transition:transform .25s var(--ease-out),opacity .2s}
@media(max-width:880px){
  .tnav-toggle{display:inline-flex}
  /* Logo ~20% più piccolo su mobile, allineato a sinistra */
  .tnav .brand{transform:scale(.8);transform-origin:left center}
  .tnav.open .tnav-toggle span:nth-child(1){transform:translateY(7px) rotate(45deg)}
  .tnav.open .tnav-toggle span:nth-child(2){opacity:0}
  .tnav.open .tnav-toggle span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
  /* Menu a comparsa animato dall'alto */
  .tnav-menu{position:absolute;top:100%;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--petrol-deep);padding:.4rem var(--pad) 1.3rem;box-shadow:0 18px 40px rgba(0,0,0,.28);transform:translateY(-14px);opacity:0;visibility:hidden;transition:transform .28s var(--ease-out),opacity .28s,visibility .28s}
  .tnav.open .tnav-menu{transform:translateY(0);opacity:1;visibility:visible}
  .tnav-links{flex-direction:column;align-items:stretch;gap:0}
  .tnav-links a{padding:.9rem 0;border-bottom:1px solid var(--line-dk);font-size:1.02rem}
  /* Sottomenu su mobile: sempre visibile, rientrato (niente hover sul touch). */
  .tnav-item{flex-direction:column;align-items:stretch}
  .tnav-caret{display:none}
  .tnav-sub{position:static;opacity:1;visibility:visible;transform:none;background:transparent;border:0;box-shadow:none;padding:0 0 0 1rem;min-width:0}
  .tnav-sub a{padding:.7rem 0;font-size:.96rem;color:rgba(255,255,255,.7)}
  .tnav-cta{margin-top:1rem;justify-content:center}
}
@media(prefers-reduced-motion:reduce){.tnav-menu{transition:opacity .01s}}

/* HERO */
.thero{position:relative;color:#fff;padding-top:clamp(150px,20vh,210px);padding-bottom:clamp(80px,12vh,140px);overflow:hidden;
  background:linear-gradient(110deg,rgba(8,40,38,.92) 0%,rgba(14,59,56,.78) 45%,rgba(14,59,56,.45) 100%),url("img/hero.webp") center/cover no-repeat var(--petrol)}
.thero::after{content:"";position:absolute;inset:0;pointer-events:none;background:radial-gradient(120% 80% at 85% -10%,rgba(110, 140, 160,.16),transparent 55%)}
.thero-grid{position:relative;z-index:2}
.thero-eyebrow{color:var(--brass-soft);margin-bottom:30px;display:flex;align-items:center;gap:14px}
.thero-eyebrow .tick{width:34px;height:1px;background:var(--brass);display:inline-block}
.thero h1{font-family:var(--f-display);font-weight:700;font-size:clamp(2.6rem,7.6vw,6rem);line-height:1;letter-spacing:-.035em;max-width:15ch;color:#fff;text-wrap:balance}
.thero h1 .accent{color:var(--brass-soft)}
.thero-sub{margin-top:32px;max-width:46ch;font-size:clamp(1.02rem,1.6vw,1.22rem);color:rgba(255,255,255,.86);text-wrap:pretty}
.thero-cta{display:flex;flex-wrap:wrap;gap:14px;margin-top:42px}
.thero-meta{margin-top:46px;display:flex;gap:28px;flex-wrap:wrap;font-family:var(--f-label);font-size:.74rem;letter-spacing:.06em;color:rgba(255,255,255,.74);text-transform:uppercase}
.thero-meta span{display:flex;align-items:center;gap:9px}
.thero-meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--brass)}
.thero-line{position:absolute;left:0;right:0;bottom:0;width:100%;height:220px;z-index:1;pointer-events:none}
.thero-line path{fill:none;stroke:var(--brass);stroke-width:2;stroke-dasharray:2400;stroke-dashoffset:2400;animation:tdraw 2.4s cubic-bezier(.7,0,.2,1) .25s forwards}
.thero-line .node{fill:var(--brass);opacity:0;animation:tpop .5s ease 2.1s forwards}
@keyframes tdraw{to{stroke-dashoffset:0}}
@keyframes tpop{to{opacity:1}}

/* REPARTI */
.treparti{padding:clamp(72px,11vh,128px) 0;position:relative}
.tsec-head{display:flex;justify-content:space-between;align-items:end;gap:30px;flex-wrap:wrap;margin-bottom:54px}
.tsec-head .eyebrow{color:var(--brass)}
.tsec-title{font-family:var(--f-display);font-weight:700;font-size:clamp(1.9rem,4.2vw,3.1rem);line-height:1.03;letter-spacing:-.025em;max-width:18ch;margin-top:14px;color:var(--ink2);text-wrap:balance}
.tsec-lead{max-width:40ch;color:var(--ink-soft);font-size:1.02rem}
/* --node-x: stessa coordinata X per linea e nodo, così restano allineati a
   ogni breakpoint (prima usavano due clamp diversi). */
.trep-list{position:relative;border-top:1px solid var(--line-lt);--node-x:clamp(26px,4vw,52px)}
.trep-list::before{content:"";position:absolute;left:var(--node-x);top:0;bottom:0;width:2px;background:linear-gradient(var(--brass),rgba(110, 140, 160,.15));transform:translateX(-50%) scaleY(0);transform-origin:top;transition:transform 1.1s ease}
.trep-list.lit::before{transform:translateX(-50%) scaleY(1)}
.trep{display:grid;grid-template-columns:clamp(60px,9vw,120px) 1fr auto;gap:clamp(16px,4vw,48px);align-items:center;padding:clamp(14px,2.4vw,22px) 0;border-bottom:1px solid var(--line-lt);position:relative;transition:background .3s}
.trep:hover{background:rgba(110, 140, 160,.05);text-decoration:none}
.trep-node{position:relative;display:flex;align-items:center}
.trep-node .dot{width:13px;height:13px;border-radius:50%;background:var(--paper);border:2px solid var(--brass);position:absolute;left:var(--node-x);top:50%;transform:translate(-50%,-50%);z-index:2}
.trep:hover .trep-node .dot{background:var(--brass)}
.trep-body h3{font-family:var(--f-display);font-weight:600;font-size:clamp(1.35rem,2.8vw,2rem);letter-spacing:-.02em;line-height:1.05;color:var(--ink2);margin:0}
.trep-body p{color:var(--ink-soft);margin-top:6px;max-width:42ch;font-size:1rem}
/* nodo allineato al titolo (non al centro del blocco) per evitare il fuori-centro */
.trep{align-items:start}
.trep-node{align-self:stretch}
.trep-node .dot{top:1.15rem}
.trep-go{align-self:start;margin-top:.15rem}
.trep-go{font-family:var(--f-label);font-size:.78rem;letter-spacing:.05em;text-transform:uppercase;color:var(--ink2);display:flex;align-items:center;gap:9px;white-space:nowrap}
.trep-go .arrow{transition:transform .25s;color:var(--brass)}
.trep:hover .trep-go .arrow{transform:translateX(5px)}

/* METODO */
.tmethod{background:var(--petrol);color:#fff;padding:clamp(72px,11vh,120px) 0;position:relative;overflow:hidden}
.tmethod::before{content:"";position:absolute;left:0;top:0;height:2px;width:100%;background:var(--line-dk)}
.tmethod-grid{display:grid;grid-template-columns:1.1fr 1fr;gap:clamp(40px,7vw,90px);align-items:start}
.tmethod-grid .eyebrow{color:var(--brass-soft)}
.tmethod h2{font-family:var(--f-display);font-weight:700;font-size:clamp(1.8rem,4vw,2.9rem);line-height:1.04;letter-spacing:-.025em;margin-top:14px;max-width:16ch;color:#fff;text-wrap:balance}
.tmethod h2 em{color:var(--brass-soft);font-style:normal}
.tpillars{display:flex;flex-direction:column;gap:2px}
.tpillar{padding:24px 0;border-top:1px solid var(--line-dk)}
.tpillar:last-child{border-bottom:1px solid var(--line-dk)}
.tpillar-k{font-family:var(--f-label);font-size:.74rem;letter-spacing:.1em;color:var(--brass-soft);text-transform:uppercase}
.tpillar h4{font-family:var(--f-display);font-weight:600;font-size:1.3rem;margin-top:9px;letter-spacing:-.01em;color:#fff}
.tpillar p{color:rgba(255,255,255,.7);margin-top:6px;font-size:.98rem;max-width:48ch}

/* CTA */
.tcta{padding:clamp(80px,13vh,150px) 0;text-align:center;background:var(--paper)}
.tcta .eyebrow{color:var(--brass);justify-content:center;display:flex;margin-bottom:22px}
.tcta h2{font-family:var(--f-display);font-weight:700;font-size:clamp(2.2rem,6vw,4.4rem);line-height:1;letter-spacing:-.035em;max-width:16ch;margin:0 auto;color:var(--ink2);text-wrap:balance}
.tcta p{color:var(--ink-soft);margin-top:22px;font-size:1.1rem;max-width:44ch;margin-left:auto;margin-right:auto}
.tcta .btn-primary{margin-top:38px;padding:17px 32px;font-size:1rem}

/* FOOTER restyle — condiviso su tutte le pagine (.wrap è scoped a .tpl-home) */
.tfoot{background:var(--petrol-deep);color:rgba(255,255,255,.66);padding:64px 0 40px;margin-top:auto}
.tfoot .wrap{max-width:var(--maxw);margin:0 auto;padding-left:var(--pad);padding-right:var(--pad)}
.tfoot-top{display:flex;justify-content:space-between;gap:40px;flex-wrap:wrap;padding-bottom:40px;border-bottom:1px solid var(--line-dk)}
.tfoot .brand-name{color:#fff;font-family:var(--f-display);font-size:1.3rem}
.tfoot-logo{display:block;height:auto}
.tfoot .brand-name b{color:var(--brass-soft)}
.tfoot-col h5{font-family:var(--f-label);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;color:var(--brass-soft);margin-bottom:16px}
.tfoot-col a,.tfoot-col p{display:block;font-size:.95rem;margin-bottom:9px;color:rgba(255,255,255,.7)}
.tfoot-col a:hover{color:#fff;text-decoration:none}
.tfoot-cols{display:flex;gap:clamp(40px,7vw,90px);flex-wrap:wrap}
.tfoot-bot{display:flex;justify-content:space-between;gap:20px;flex-wrap:wrap;margin-top:30px;font-size:.82rem;color:rgba(255,255,255,.62);font-family:var(--f-label);letter-spacing:.04em}

/* REVEAL — il contenuto è visibile di default; lo stato nascosto si attiva solo
   con JS (html.js-reveal), così senza JS / crawler / headless nulla resta vuoto. */
.treveal{transition:opacity .6s var(--ease-out),transform .6s var(--ease-out)}
html.js-reveal .treveal{opacity:0;transform:translateY(16px)}
html.js-reveal .treveal.in{opacity:1;transform:none}

@media(max-width:880px){
  .tmethod-grid{grid-template-columns:1fr;gap:36px}
  .trep{grid-template-columns:44px 1fr;gap:16px}
  .trep-go{display:none}
  /* col nodo = 44px: ricentra --node-x (linea e dot lo seguono insieme) */
  .trep-list{--node-x:22px}
}
@media(prefers-reduced-motion:reduce){
  .tpl-home *{animation:none!important;transition:none!important}
  .treveal{opacity:1;transform:none}
  .thero-line path{stroke-dashoffset:0}
  .trep-list::before{transform:translateX(-50%) scaleY(1)}
}

/* ---------- Cookie banner (CMP) ---------- */
.cmp-sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);border:0}
body.cmp-lock{overflow:hidden}
.cmp-overlay{position:fixed;inset:0;z-index:1200;background:rgba(8,40,38,.5);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);animation:cmp-fade .28s ease both}
.cmp-overlay[hidden]{display:none}
.cmp-banner{position:fixed;left:50%;bottom:clamp(14px,2.5vw,30px);transform:translateX(-50%);width:80%;max-width:1080px;z-index:1300;
  background:var(--card2,#FBFBF8);color:var(--ink2);border:1px solid var(--line-lt);border-radius:var(--radius-card,14px);
  box-shadow:0 22px 60px rgba(8,40,38,.32);padding:clamp(1.1rem,2.4vw,1.8rem);
  animation:cmp-rise .46s var(--ease-out,cubic-bezier(.23,1,.32,1)) both}
.cmp-banner[hidden]{display:none}
.cmp-banner:focus{outline:none}
.cmp-inner{display:flex;gap:clamp(1rem,2.6vw,2.2rem);align-items:center;flex-wrap:wrap}
.cmp-text{flex:1 1 300px;min-width:0}
.cmp-title{margin:0 0 .35rem;font-family:var(--f-display);font-size:1.2rem;font-weight:700;letter-spacing:-.02em;color:var(--petrol)}
.cmp-text p{margin:0;font-size:.92rem;line-height:1.55;color:var(--ink-soft)}
.cmp-form{flex:1 1 360px;display:flex;flex-direction:column;gap:.85rem;border:0;margin:0;padding:0}
.cmp-opts{display:flex;gap:.5rem;flex-wrap:wrap;border:0;padding:0;margin:0;min-width:0}
.cmp-opt{display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;font-weight:600;color:var(--ink2);
  padding:.42rem .85rem;border:1px solid var(--line-lt);border-radius:var(--radius-pill,100px);cursor:pointer;user-select:none;
  transition:border-color .15s ease,background .15s ease}
.cmp-opt:hover{border-color:var(--brass)}
.cmp-opt input{accent-color:var(--brass);margin:0}
.cmp-opt--locked{opacity:.6;cursor:default}
.cmp-opt--locked:hover{border-color:var(--line-lt)}
.cmp-actions{display:flex;gap:.5rem;flex-wrap:wrap}
.cmp-btn{flex:1 1 auto;padding:.7rem 1.15rem;border-radius:11px;font-family:var(--f-body);font-size:.88rem;font-weight:700;
  cursor:pointer;border:1px solid transparent;transition:transform .12s ease,filter .15s ease,background .15s ease}
.cmp-btn:active{transform:scale(.97)}
.cmp-btn--ghost{background:transparent;color:var(--petrol);border-color:var(--line-lt)}
.cmp-btn--ghost:hover{background:rgba(14,59,56,.06)}
.cmp-btn--solid{background:var(--brass);color:#1c1304;border-color:var(--brass)}
.cmp-btn--solid:hover{filter:brightness(1.06)}
.cmp-banner.cmp-out{animation:cmp-sink .42s var(--ease-out,cubic-bezier(.23,1,.32,1)) both}
.cmp-overlay.cmp-out{animation:cmp-defade .42s ease both}
@keyframes cmp-rise{from{opacity:0;transform:translateX(-50%) translateY(20px)}to{opacity:1;transform:translateX(-50%) translateY(0)}}
@keyframes cmp-fade{from{opacity:0}to{opacity:1}}
@keyframes cmp-sink{from{opacity:1;transform:translateX(-50%) translateY(0)}to{opacity:0;transform:translateX(-50%) translateY(26px)}}
@keyframes cmp-defade{from{opacity:1}to{opacity:0}}
@media(max-width:680px){
  .cmp-banner{width:calc(100% - 24px);bottom:12px;padding:1.1rem}
  .cmp-actions .cmp-btn{flex:1 1 100%}
}
@media(prefers-reduced-motion:reduce){
  .cmp-banner,.cmp-overlay{animation:none}
  .cmp-btn:active{transform:none}
}