/* ==========================================================================
   T-Building — stile condiviso
   Ordine: font · token · base · layout · componenti comuni · header · sezioni · footer
   Naming: BEM con prefisso tb- (tb-blocco__elemento--modificatore).
   Gli agganci JS sono attributi data-tb="...", mai classi di stile.
   ========================================================================== */

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

@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/lora-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url(../fonts/lora-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Lora corsivo 400: solo per il corsivo nel testo degli articoli (.tb-article__body em); il browser lo scarica solo se serve */
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/lora-italic-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Lora';
  font-style: italic;
  font-weight: 400;
  font-display: swap;
  src: url(../fonts/lora-italic-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Font di riserva con le metriche dei font del sito (larghezza media, ascendenti, discendenti, misurate dai woff2 su un testo del sito):
   finche' Montserrat e Lora non sono arrivati il testo occupa gia' lo stesso spazio, e al cambio di font niente salti di layout (CLS) */
@font-face { font-family: 'Montserrat Fallback'; src: local('Arial'), local('ArialMT'); size-adjust: 107.62%; ascent-override: 89.95%; descent-override: 23.32%; line-gap-override: 0%; }
@font-face { font-family: 'Lora Fallback'; src: local('Times New Roman'), local('TimesNewRomanPSMT'); size-adjust: 114.5%; ascent-override: 87.86%; descent-override: 23.93%; line-gap-override: 0%; }
@font-face { font-family: 'Lora Fallback'; font-style: italic; src: local('Times New Roman Italic'), local('TimesNewRomanPS-ItalicMT'); size-adjust: 110.7%; ascent-override: 90.87%; descent-override: 24.75%; line-gap-override: 0%; }

/* ---------- token ---------- */
:root {
  /* colori */
  --tb-blue: #243668;
  --tb-blue-2: #2E4480;
  --tb-blue-3: #182648;
  --tb-teal: #1FB6C1;
  --tb-teal-2: #7EDDE3;
  --tb-teal-3: #0E7C86;
  --tb-teal-4: #0A6A73; /* turchese scuro per gli occhielli su fondi chiari a sfumatura (>= 4,5:1 anche sul punto piu' scuro del fondo) */
  /* azzurri tra il blu e il turchese (per gli sfondi a sfumatura, vedi tb-bg) */
  --tb-sky: #2D7FB8;   /* azzurro medio */
  --tb-sky-2: #8CC8EA; /* azzurro chiaro */
  --tb-pale: #EEF6F7;
  --tb-grey: #F5F6F8;   /* grigio chiarissimo: fondo delle sezioni chiare */
  --tb-grey-2: #ECEEF2; /* estremo piu' scuro della sfumatura; anche il vano della porta */
  --tb-grey-3: #F5F5F5; /* anta della porta */
  --tb-white: #fff;
  --tb-ink: #10233F;
  --tb-ink-2: #4A5A75;
  /* colori dei Mondi (palette PROVVISORIA, in attesa di quella dell'agenzia): "luce" = tinta della luce dietro la porta
     e dello sfondo del page-hero; "testo" = occhielli e sottotitoli sul fondo chiaro (contrasto >= 4,5:1);
     "glow" = intensità (alpha) della luce, da ricalcolare con `node tools/door-glow.js` se si cambia "luce". */
  --tb-tone-1-light: #C8825A; --tb-tone-1-text: #8B4F2C; --tb-tone-1-glow: 51%; /* 1 Real Estate: rame */
  --tb-tone-2-light: #B9788F; --tb-tone-2-text: #7E4259; --tb-tone-2-glow: 54%; /* 2 Hospitality: malva */
  --tb-tone-3-light: #7FAF93; --tb-tone-3-text: #3F6B52; --tb-tone-3-glow: 73%; /* 3 Wellness: salvia */
  --tb-tone-4-light: #7D80C4; --tb-tone-4-text: #45488F; --tb-tone-4-glow: 49%; /* 4 Corporate: indaco */
  --tb-tone-5-light: #CDA85A; --tb-tone-5-text: #7A5C1E; --tb-tone-5-glow: 51%; /* 5 Residential: ocra */
  /* font */
  --tb-font: Montserrat, "Montserrat Fallback", "Helvetica Neue", Arial, sans-serif;
  --tb-font-title: Lora, "Lora Fallback", Georgia, "Times New Roman", serif;
  /* testo: paragrafi di corpo (prose, card, lead, liste, callout; il footer resta piccolo) */
  --tb-text: 18px; --tb-text-lh: 1.6;
  /* misure */
  --tb-w: min(1440px, 92vw);
  --tb-section-pad: clamp(96px, 14vw, 180px);
  --tb-header-h: calc(86px + env(safe-area-inset-top, 0px)); /* altezza dell'header fisso: 20 + logo 46 + 20 (mobile: vedi media query) */
  --tb-block-pad: clamp(72px, 10vw, 140px); /* blocchi delle pagine interne: stesso ritmo della Home, meno respiro */

  box-sizing: border-box;
  padding-top: env(safe-area-inset-top, 0px);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}

/* ---------- base ---------- */
html { scroll-padding-top: env(safe-area-inset-top, 0px); }
*, *::before, *::after { box-sizing: inherit; }
html, body { margin: 0; }
body { background: var(--tb-blue); color: var(--tb-white); font-family: var(--tb-font); font-weight: 300; line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
a { color: inherit; text-decoration: none; }
a:focus-visible { outline: 2px solid var(--tb-teal); outline-offset: 4px; }

/* ---------- layout ---------- */
.tb-container { width: var(--tb-w); margin: 0 auto; }
.tb-section { padding: var(--tb-section-pad) 0; }
.tb-block { padding: var(--tb-block-pad) 0; }
.tb-section--light { background: var(--tb-grey); color: var(--tb-ink); }
.tb-section--light a { color: var(--tb-ink); }
.tb-section--flush-bottom { padding-bottom: 0; }
.tb-section--tight-top { padding-top: clamp(40px, 5vw, 72px); }

/* ---------- componenti comuni ---------- */
.tb-kicker { font-size: 15px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--tb-teal); margin: 0 0 28px; }
.tb-section--light .tb-kicker { color: var(--tb-world-text, var(--tb-teal-4)); }
.tb-kicker--spaced { margin-top: 72px; }

.tb-title { margin: 0 0 32px; font-family: var(--tb-font-title); font-weight: 400; font-size: clamp(28px, 3.6vw, 52px); line-height: 1.12; letter-spacing: -.01em; max-width: 22ch; }

.tb-copy { font-size: var(--tb-text); line-height: var(--tb-text-lh); color: var(--tb-ink-2); max-width: 46ch; margin: 40px 0 0; }
.tb-nowrap { white-space: nowrap; }
.tb-copy--flush { margin-top: 0; }
.tb-copy--muted { color: rgba(255,255,255,.8); }
.tb-copy--body { max-width: 60ch; }

.tb-cta { display: inline-block; margin-top: 28px; padding: 14px 22px; border: 1px solid currentColor; font-family: inherit; color: inherit; background: transparent; cursor: pointer; transition: background .3s, color .3s; }
/* CTA: bottoni e link-freccia hanno lo stesso carattere (maiuscolo, 15px, peso 500, tracking .06em) */
.tb-cta, .tb-doors__link, .tb-strip__link, .tb-card__link, .tb-cases__link { font-size: 15px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.tb-cta, .tb-doors__link { position: relative; }
/* filo luminoso: un tratto del bordo (30%) che all'hover gira attorno al bottone; colore da --tb-cta-line */
.tb-cta__line { position: absolute; inset: -1px; width: calc(100% + 2px); height: calc(100% + 2px); overflow: visible; pointer-events: none; fill: none; stroke: var(--tb-cta-line, var(--tb-teal)); stroke-width: 2px; stroke-dasharray: 30 100; stroke-dashoffset: 30; transition: stroke-dashoffset 1s ease-in-out; }
.tb-cta__line rect { x: 1px; y: 1px; width: calc(100% - 2px); height: calc(100% - 2px); }
.tb-cta:hover, .tb-doors__link:hover { background: color-mix(in srgb, var(--tb-cta-line, var(--tb-teal)) 14%, transparent); transition: background 1s ease-in-out; }
.tb-cta--pending { cursor: default; opacity: .75; }
.tb-cta--pending:hover { background: transparent; }
.tb-cta:hover .tb-cta__line, .tb-doors__link:hover .tb-cta__line, .tb-cta:focus-visible .tb-cta__line, .tb-doors__link:focus-visible .tb-cta__line { stroke-dashoffset: -100; }
@media (prefers-reduced-motion: reduce) { .tb-cta__line { transition: none; } .tb-cta:hover .tb-cta__line, .tb-doors__link:hover .tb-cta__line { stroke-dashoffset: 30; } }

/* link sottolineati: una righetta di 20px sotto il testo che si allunga a tutta la larghezza al rollover (al posto di text-decoration) */
.tb-card__link, .tb-contact__detail a, .tb-field__check-label a, .tb-prose a, .tb-strip__link, .tb-cases__link, .tb-footer__links a {
  padding-bottom: 3px; background: linear-gradient(currentColor, currentColor) left bottom / 20px 1px no-repeat; transition: background-size .4s ease, color .3s;
}
.tb-card__link:hover, .tb-contact__detail a:hover, .tb-field__check-label a:hover, .tb-prose a:hover, .tb-strip__link:hover, .tb-cases__link:hover, .tb-footer__links a:hover,
.tb-card__link:focus-visible, .tb-contact__detail a:focus-visible, .tb-field__check-label a:focus-visible, .tb-prose a:focus-visible, .tb-strip__link:focus-visible, .tb-cases__link:focus-visible, .tb-footer__links a:focus-visible { background-size: 100% 1px; }
@media (prefers-reduced-motion: reduce) { .tb-card__link, .tb-contact__detail a, .tb-field__check-label a, .tb-prose a, .tb-strip__link, .tb-cases__link, .tb-footer__links a { transition: color .3s; } }

/* invisibile → visibile */
.tb-reveal { max-width: 36ch; font-size: clamp(22px, 2.9vw, 40px); line-height: 1.3; }
.tb-reveal__line { display: block; opacity: .08; filter: blur(10px); will-change: opacity, filter; }
.tb-reveal__line--em { font-weight: 500; color: var(--tb-teal-2); }
.tb-section--light .tb-reveal__line--em { color: var(--tb-teal-4); }
.tb-reveal__word { font-weight: 500; color: var(--tb-teal-2); } /* stesso font e colore della riga evidenziata (rev. 29/10) */
.tb-section--light .tb-reveal__word { color: var(--tb-teal-4); }
.tb-reveal__line + .tb-reveal__line { margin-top: .35em; }
@media (prefers-reduced-motion: reduce) {
  .tb-reveal__line { opacity: 1; filter: none; }
}

/* ---------- sfondi a sfumatura (tb-bg) ----------
   Un componente unico: la sezione prende `tb-bg` e uno o piu' modificatori; le sfumature stanno sul ::before (piu' grande della sezione,
   cosi' puo' derivare senza mostrare i bordi), la grana sul ::after. Niente immagini di sfondo, niente blur, niente canvas.
   Il ::before e' composto da: fascia luminosa diagonale (opzionale), tre bagliori radiali (g1 chiaro, g2 secondario, g3 d'angolo)
   e una sfumatura lineare di base. Ogni bagliore ha un profilo "ease" a 9 passaggi (--bg-e1..3), cosi' non c'e' un bordo netto.
   Valori della variante "C" scelta in fase 1. Colori solo da token: si cambiano con --bg-from/--bg-to/--bg-g1..3, la forza con --bg-k1..3 (% di opacita' al centro).
   Modificatori: posizione del bagliore principale `tb-bg--glow-tr|tl|br|bl|t|b`, intensita' `tb-bg--soft|strong`,
   `tb-bg--light` (fondo chiaro), `tb-bg--teal` (card e callout turchesi), `tb-bg--drift` (deriva lentissima, solo hero e testate). */
.tb-bg {
  --bg-from: var(--tb-blue-2); --bg-to: var(--tb-blue-3); --bg-angle: 172deg;
  --bg-g1: var(--tb-sky-2); --bg-k1: 32; --bg-x1: 84%; --bg-y1: 8%;  --bg-r1: min(780px, 60vw) min(640px, 75vw); /* luce principale; raggi in lunghezze (con le percentuali dentro min() il gradiente non e' valido) */
  --bg-g2: var(--tb-teal);  --bg-k2: 34; --bg-x2: 58%; --bg-y2: 0%;   --bg-r2: min(520px, 40vw) min(420px, 50vw); /* turchese, accanto alla luce */
  --bg-g3: var(--tb-sky);   --bg-k3: 22; --bg-x3: calc(100% - var(--bg-x1)); --bg-y3: calc(100% - var(--bg-y1)); --bg-r3: min(620px, 50vw) min(560px, 60vw); /* azzurro, sul lato opposto */
  --bg-band-k: 0; --bg-band-angle: 135deg; --bg-band-at: 66%; --bg-band-w: 26%; --bg-band-c: var(--tb-sky-2);
  --bg-gain: 1; --bg-grain: .05; --bg-fade: linear-gradient(transparent, transparent);
  position: relative; isolation: isolate; overflow: clip; background-color: var(--bg-to);
}
.tb-bg::before, .tb-bg::after { content: ""; position: absolute; z-index: -1; pointer-events: none; }
.tb-bg::before {
  inset: -12%;
  --bg-e1: color-mix(in srgb, var(--bg-g1) calc(var(--bg-k1) * var(--bg-gain) * 1%), transparent) 0%, color-mix(in srgb, var(--bg-g1) calc(var(--bg-k1) * var(--bg-gain) * .74%), transparent) 12%, color-mix(in srgb, var(--bg-g1) calc(var(--bg-k1) * var(--bg-gain) * .54%), transparent) 24%, color-mix(in srgb, var(--bg-g1) calc(var(--bg-k1) * var(--bg-gain) * .38%), transparent) 36%, color-mix(in srgb, var(--bg-g1) calc(var(--bg-k1) * var(--bg-gain) * .26%), transparent) 48%, color-mix(in srgb, var(--bg-g1) calc(var(--bg-k1) * var(--bg-gain) * .16%), transparent) 60%, color-mix(in srgb, var(--bg-g1) calc(var(--bg-k1) * var(--bg-gain) * .08%), transparent) 72%, color-mix(in srgb, var(--bg-g1) calc(var(--bg-k1) * var(--bg-gain) * .03%), transparent) 84%, transparent 100%;
  --bg-e2: color-mix(in srgb, var(--bg-g2) calc(var(--bg-k2) * var(--bg-gain) * 1%), transparent) 0%, color-mix(in srgb, var(--bg-g2) calc(var(--bg-k2) * var(--bg-gain) * .74%), transparent) 12%, color-mix(in srgb, var(--bg-g2) calc(var(--bg-k2) * var(--bg-gain) * .54%), transparent) 24%, color-mix(in srgb, var(--bg-g2) calc(var(--bg-k2) * var(--bg-gain) * .38%), transparent) 36%, color-mix(in srgb, var(--bg-g2) calc(var(--bg-k2) * var(--bg-gain) * .26%), transparent) 48%, color-mix(in srgb, var(--bg-g2) calc(var(--bg-k2) * var(--bg-gain) * .16%), transparent) 60%, color-mix(in srgb, var(--bg-g2) calc(var(--bg-k2) * var(--bg-gain) * .08%), transparent) 72%, color-mix(in srgb, var(--bg-g2) calc(var(--bg-k2) * var(--bg-gain) * .03%), transparent) 84%, transparent 100%;
  --bg-e3: color-mix(in srgb, var(--bg-g3) calc(var(--bg-k3) * var(--bg-gain) * 1%), transparent) 0%, color-mix(in srgb, var(--bg-g3) calc(var(--bg-k3) * var(--bg-gain) * .74%), transparent) 12%, color-mix(in srgb, var(--bg-g3) calc(var(--bg-k3) * var(--bg-gain) * .54%), transparent) 24%, color-mix(in srgb, var(--bg-g3) calc(var(--bg-k3) * var(--bg-gain) * .38%), transparent) 36%, color-mix(in srgb, var(--bg-g3) calc(var(--bg-k3) * var(--bg-gain) * .26%), transparent) 48%, color-mix(in srgb, var(--bg-g3) calc(var(--bg-k3) * var(--bg-gain) * .16%), transparent) 60%, color-mix(in srgb, var(--bg-g3) calc(var(--bg-k3) * var(--bg-gain) * .08%), transparent) 72%, color-mix(in srgb, var(--bg-g3) calc(var(--bg-k3) * var(--bg-gain) * .03%), transparent) 84%, transparent 100%;
  --bg-eb: transparent calc(var(--bg-band-at) - var(--bg-band-w)), color-mix(in srgb, var(--bg-band-c) calc(var(--bg-band-k) * var(--bg-gain) * .08%), transparent) calc(var(--bg-band-at) - var(--bg-band-w) * .75), color-mix(in srgb, var(--bg-band-c) calc(var(--bg-band-k) * var(--bg-gain) * .26%), transparent) calc(var(--bg-band-at) - var(--bg-band-w) * .5), color-mix(in srgb, var(--bg-band-c) calc(var(--bg-band-k) * var(--bg-gain) * .62%), transparent) calc(var(--bg-band-at) - var(--bg-band-w) * .25), color-mix(in srgb, var(--bg-band-c) calc(var(--bg-band-k) * var(--bg-gain) * 1%), transparent) var(--bg-band-at), color-mix(in srgb, var(--bg-band-c) calc(var(--bg-band-k) * var(--bg-gain) * .62%), transparent) calc(var(--bg-band-at) + var(--bg-band-w) * .25), color-mix(in srgb, var(--bg-band-c) calc(var(--bg-band-k) * var(--bg-gain) * .26%), transparent) calc(var(--bg-band-at) + var(--bg-band-w) * .5), color-mix(in srgb, var(--bg-band-c) calc(var(--bg-band-k) * var(--bg-gain) * .08%), transparent) calc(var(--bg-band-at) + var(--bg-band-w) * .75), transparent calc(var(--bg-band-at) + var(--bg-band-w));
  background-image:
    var(--bg-grain-layer, linear-gradient(transparent, transparent)),
    var(--bg-fade),
    linear-gradient(var(--bg-band-angle), var(--bg-eb)),
    radial-gradient(var(--bg-r1) at var(--bg-x1) var(--bg-y1), var(--bg-e1)),
    radial-gradient(var(--bg-r2) at var(--bg-x2) var(--bg-y2), var(--bg-e2)),
    radial-gradient(var(--bg-r3) at var(--bg-x3) var(--bg-y3), var(--bg-e3)),
    linear-gradient(var(--bg-angle), var(--bg-from) 0%, var(--bg-to) 100%);
}
/* grana: un SVG piccolo ripetuto, fermo, opacita' 4-6%: spezza le fasce di colore delle sfumature scure */
.tb-bg::after { inset: 0; background: url("../img/grain.svg") 0 0 / 160px 160px repeat; opacity: var(--bg-grain); }
/* marchio in filigrana (tb-section--mark): il ::after della sezione ospita il logo (solo il marchio, senza wordmark), a destra, alto il 70% della sezione,
   4% di opacita' su chiaro e 6% su scuro. L'altezza e' l'80% del 70% della sezione (56%) ma mai oltre lo spazio che il testo lascia libero a destra
   (--tb-mark-text = larghezza della colonna di testo + respiro): il marchio sta nella colonna vuota e non tocca le righe. Il ::after era la grana: qui la grana passa come ultimo strato del ::before (grain-soft.svg, 4%). Sotto gli 860px non c'e'. */
.tb-section--reveal { --tb-mark-text: calc(23.4 * clamp(22px, 2.9vw, 40px) + 40px); } /* colonna di .tb-reveal: 36ch del suo corpo */
.tb-section--mark { --bg-grain-layer: url("../img/grain-soft.svg"); }
.tb-section--mark.tb-bg::after { inset: auto; top: 0; bottom: 0; margin-block: auto; height: calc(min(70%, calc(var(--tb-w) - var(--tb-mark-text, 760px))) * .8); aspect-ratio: 1; right: calc((100% - var(--tb-w)) / 2); background: url("../img/logo-mark.svg") center / contain no-repeat; opacity: .04; }
.tb-section--mark.tb-bg:not(.tb-section--light)::after { background-image: url("../img/logo-mark-light.svg"); opacity: .06; }
@media (max-width: 860px) { .tb-section--mark.tb-bg::after { display: none; } }
/* posizione del bagliore principale (le sezioni consecutive alternano) */
.tb-bg--glow-tr { --bg-x1: 84%; --bg-y1: 8%;  --bg-x2: 58%; --bg-y2: 0%; }
.tb-bg--glow-tl { --bg-x1: 16%; --bg-y1: 8%;  --bg-x2: 42%; --bg-y2: 0%; }
.tb-bg--glow-br { --bg-x1: 84%; --bg-y1: 92%; --bg-x2: 58%; --bg-y2: 100%; }
.tb-bg--glow-bl { --bg-x1: 16%; --bg-y1: 92%; --bg-x2: 42%; --bg-y2: 100%; }
.tb-bg--glow-t  { --bg-x1: 50%; --bg-y1: 0%;  --bg-x2: 78%; --bg-y2: 0%; }
.tb-bg--glow-b  { --bg-x1: 50%; --bg-y1: 100%; --bg-x2: 22%; --bg-y2: 100%; }
/* intensita' */
.tb-bg--soft { --bg-gain: .6; }
.tb-bg--strong { --bg-gain: 1.45; }
/* fondo chiaro */
.tb-bg--light { --bg-from: var(--tb-grey); --bg-to: var(--tb-grey-2); --bg-angle: 165deg; --bg-g1: var(--tb-white); --bg-k1: 70; --bg-g2: var(--tb-sky-2); --bg-k2: 12; --bg-g3: var(--tb-white); --bg-k3: 0; --bg-grain: .03; }
/* fondo profondo (i luoghi): stesso blu della hero in tutta la sezione, luci piu' discrete */
.tb-bg--deep { --bg-from: var(--tb-blue-3); --bg-to: var(--tb-blue-3); --bg-gain: .5; }
/* footer: continua il blu in fondo al dialogo (stessa base), con una luce appena accennata solo in basso: in alto e' identico alla fine del dialogo, nessun stacco */
.tb-bg--footer { --bg-from: var(--tb-blue-3); --bg-to: var(--tb-blue-3); --bg-gain: .45; --bg-k3: 0; --bg-r1: min(780px, 60vw) 200px; --bg-r2: min(520px, 40vw) 160px; }
/* fine sezione calma: nessuna luce sul bordo basso, per appoggiarsi senza stacco alla sezione sotto (dialogo -> footer) */
/* il ::before sborda del 12% per lato, quindi il bordo basso della sezione sta al 90% dell'altezza del livello (1,12 / 1,24) */
.tb-bg--calm-end { --bg-k3: 0; --bg-to: var(--tb-blue-3); --bg-fade: linear-gradient(to bottom, transparent 55%, var(--tb-blue-3) 90%); }
/* card e callout turchesi */
.tb-bg--teal { --bg-from: var(--tb-teal); --bg-to: color-mix(in srgb, var(--tb-teal) 70%, var(--tb-teal-2)); --bg-angle: 150deg; --bg-g1: var(--tb-white); --bg-k1: 40; --bg-x1: 70%; --bg-y1: 95%; --bg-g2: var(--tb-teal-3); --bg-k2: 16; --bg-x2: 95%; --bg-y2: 0%; --bg-g3: var(--tb-teal-2); --bg-k3: 0; --bg-grain: .04; }
/* occhielli: sulle sfumature il turchese pieno non regge 4,5:1 (servirebbe un fondo piu' scuro del blu di base), quindi chiaro sui fondi scuri, scuro sui chiari */
.tb-bg .tb-kicker { color: color-mix(in srgb, var(--tb-teal-2) 80%, var(--tb-white)); }
.tb-bg--light .tb-kicker { color: var(--tb-world-text, var(--tb-teal-4)); }
/* deriva lentissima (solo hero e testate): transform sul livello piu' grande della sezione */
.tb-bg--drift::before { will-change: transform; animation: tb-bg-drift 90s ease-in-out infinite alternate; }
@keyframes tb-bg-drift { from { transform: translate3d(-2%, 1.5%, 0) scale(1.02); } to { transform: translate3d(2%, -1.5%, 0) scale(1.08); } }
@media (prefers-reduced-motion: reduce) { .tb-bg--drift::before { animation: none; will-change: auto; } }

/* ---------- header ---------- */
.tb-header { position: fixed; inset: 0 0 auto 0; z-index: 20; display: flex; justify-content: space-between; align-items: center; padding: calc(20px + env(safe-area-inset-top, 0px)) 4vw 20px; color: var(--tb-white); transition: color .4s, background-color .4s;
  /* fascia semitrasparente con sfocatura nel tono della sezione sotto, cosi' menu e logo non si sovrappongono a testi e immagini che scorrono */
  background: rgba(46,68,128,.9); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.tb-header--light { color: var(--tb-blue); background: rgba(243,244,246,.9); }
/* sopra la sezione porte (fondo bianco) */
.tb-header--white { color: var(--tb-blue); background: rgba(255,255,255,.9); }
/* sopra la sezione dei luoghi: stesso blu profondo del suo fondo (--tb-blue-3) */
.tb-header--deep { background: rgba(24,38,72,.9); }
/* sopra hero e page-hero resta trasparente */
.tb-header--hero { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.tb-header__logo svg { display: block; height: 46px; width: auto; }
.tb-header__nav { display: flex; align-items: center; gap: 28px; font-size: 12px; font-weight: 400; letter-spacing: .1em; text-transform: uppercase; }
.tb-header__nav a { white-space: nowrap; }
.tb-header__burger { display: none; }
/* voce con sottomenu (Mondi): su desktop il dropdown si apre con hover, focus da tastiera o il pulsante freccia */
.tb-header__item--sub { position: relative; display: flex; align-items: center; gap: 2px; }
.tb-header__link--label { cursor: pointer; }
.tb-header__subtoggle { position: relative; width: 20px; height: 20px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
.tb-header__subtoggle::before { content: ""; position: absolute; left: 50%; top: 50%; width: 5px; height: 5px; border: solid currentColor; border-width: 0 1.5px 1.5px 0; transform: translate(-50%, -70%) rotate(45deg); transition: transform .3s; }
.tb-header__item--open .tb-header__subtoggle::before { transform: translate(-50%, -30%) rotate(225deg); }
@media (min-width: 861px) { .tb-header__item--sub:hover .tb-header__subtoggle::before, .tb-header__item--sub:focus-within .tb-header__subtoggle::before { transform: translate(-50%, -30%) rotate(225deg); } }
.tb-header__sub { list-style: none; margin: 0; padding: 16px 0 12px; position: absolute; top: calc(100% + 16px); left: -18px; min-width: 250px; color: var(--tb-white); background: rgba(24,38,72,.97); box-shadow: 0 24px 48px -24px rgba(0,0,0,.5); opacity: 0; visibility: hidden; transform: translateY(6px); transition: opacity .25s, transform .25s, visibility .25s; }
.tb-header__item--sub:hover .tb-header__sub, .tb-header__item--sub:focus-within .tb-header__sub, .tb-header__item--open .tb-header__sub { opacity: 1; visibility: visible; transform: none; }
/* ponte invisibile sui 16px tra la voce e il pannello: passando dall'una all'altro l'hover non si perde */
@media (min-width: 861px) { .tb-header__sub::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 16px; } }
.tb-header__sub a { display: block; padding: 11px 24px; transition: background-color .25s; }
.tb-header__sub a:hover, .tb-header__sub a:focus-visible { background: rgba(255,255,255,.09); }
.tb-header__nav a[aria-current="page"] { color: var(--tb-teal-2); }
.tb-header--light .tb-header__nav > a[aria-current="page"], .tb-header--white .tb-header__nav > a[aria-current="page"] { color: var(--tb-teal-4); }
.tb-header__nav .tb-header__link--label[aria-current] { color: var(--tb-teal-2); }
@media (max-width: 860px) {
  /* menu mobile: pannello a tutta altezza sopra la pagina; logo e pulsante restano sopra il pannello */
  .tb-header__logo, .tb-header__burger { position: relative; z-index: 2; }
  .tb-header__burger { display: block; width: 44px; height: 44px; margin-right: -10px; padding: 0; border: 0; background: none; color: inherit; cursor: pointer; }
  .tb-header__burger-line { position: absolute; left: 10px; right: 10px; height: 1.5px; background: currentColor; transition: transform .3s, top .3s; }
  .tb-header__burger-line:nth-child(1) { top: 17px; }
  .tb-header__burger-line:nth-child(2) { top: 26px; }
  .tb-header--menu { color: var(--tb-white); background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .tb-header--menu .tb-header__burger-line:nth-child(1) { top: 21px; transform: rotate(45deg); }
  .tb-header--menu .tb-header__burger-line:nth-child(2) { top: 21px; transform: rotate(-45deg); }
  .tb-header__nav { display: none; }
  .tb-header--menu .tb-header__nav { display: flex; flex-direction: column; align-items: stretch; gap: 0; position: fixed; inset: 0; z-index: 1; height: 100vh; height: 100dvh; padding: calc(var(--tb-header-h) + 16px) 8vw calc(28px + env(safe-area-inset-bottom, 0px)); overflow-y: auto; overscroll-behavior: contain; color: var(--tb-white); background: var(--tb-blue-3); font-family: var(--tb-font-title); font-size: 28px; line-height: 1.2; letter-spacing: 0; text-transform: none; }
  .tb-header__nav a { white-space: normal; }
  .tb-header__link { display: block; padding: 14px 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .tb-header__item--sub { display: grid; grid-template-columns: 1fr 44px; gap: 0; border-bottom: 1px solid rgba(255,255,255,.14); }
  .tb-header__item--sub .tb-header__link { border-bottom: 0; }
  .tb-header__subtoggle { width: 44px; height: 44px; }
  .tb-header__subtoggle::before { width: 8px; height: 8px; }
  .tb-header__sub { position: static; grid-column: 1 / -1; min-width: 0; padding: 0; background: none; box-shadow: none; opacity: 1; visibility: visible; transform: none; max-height: 0; overflow: hidden; transition: max-height .4s ease; }
  .tb-header__item--sub:hover .tb-header__sub, .tb-header__item--sub:focus-within .tb-header__sub { transform: none; }
  .tb-header__item--open .tb-header__sub { max-height: 480px; padding-bottom: 12px; }
  .tb-header__sub a { padding: 10px 0 10px 16px; font-size: 20px; color: rgba(255,255,255,.86); }
  .tb-header__nav .tb-header__lang { margin: auto 0 0; padding-top: 32px; font-family: var(--tb-font); font-size: 14px; }
  html.tb-menu-open { overflow: hidden; }
}
@media (max-width: 860px) {
  :root { --tb-header-h: calc(62px + env(safe-area-inset-top, 0px)); }
  .tb-header { padding: calc(12px + env(safe-area-inset-top, 0px)) 4vw 12px; }
  .tb-header__logo svg { height: 38px; }
}

/* ---------- hero ---------- */
.tb-hero { position: relative; height: 100vh; height: 100lvh; min-height: 560px; overflow: hidden; background: var(--tb-blue-3); }
.tb-hero__clouds { position: absolute; inset: -10%; pointer-events: none; }
.tb-hero__cloud { position: absolute; border-radius: 50%; will-change: transform; opacity: .9; }
.tb-hero__cloud--1 { width: 60vw; height: 60vw; left: -10vw; top: -20vw; background: radial-gradient(circle, rgba(46,68,128,.95) 0%, rgba(46,68,128,.5) 35%, rgba(46,68,128,0) 70%); }
.tb-hero__cloud--2 { width: 55vw; height: 55vw; right: -12vw; top: -10vw; background: radial-gradient(circle, rgba(31,182,193,.5) 0%, rgba(31,182,193,.22) 35%, rgba(31,182,193,0) 70%); }
.tb-hero__cloud--3 { width: 70vw; height: 50vw; left: 20vw; bottom: -25vw; background: radial-gradient(circle, rgba(126,221,227,.32) 0%, rgba(126,221,227,.14) 35%, rgba(126,221,227,0) 70%); }
.tb-hero__cloud--4 { width: 40vw; height: 40vw; right: 10vw; bottom: -5vw; background: radial-gradient(circle, rgba(200,232,236,.3) 0%, rgba(200,232,236,.12) 35%, rgba(200,232,236,0) 70%); }
.tb-hero__glow { position: absolute; left: 0; top: 0; width: 60vmax; height: 60vmax; margin: -30vmax 0 0 -30vmax; border-radius: 50%; pointer-events: none; background: radial-gradient(circle, rgba(126,221,227,.32) 0%, rgba(31,182,193,.14) 28%, rgba(31,182,193,0) 62%); opacity: 0; will-change: transform, opacity; }
/* il canvas (punti e onda) entra in dissolvenza di .5s sopra la base CSS (fondo + nuvole, identica con e senza JS): niente sostituzione
   di colpo. La dissolvenza la fa app.js (heroAtmosphere) al primo fotogramma disegnato; senza JS il canvas e' vuoto e resta a 0 */
.tb-hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; }
/* ingresso del testo (script tb-hero-boot nel parziale header): tb-intro = primo fotogramma dell'animazione di app.js (righe sotto la maschera,
   testo a 0), messo prima del primo paint; tb-intro-late = app.js in ritardo, il testo entra da solo in CSS. Solo transform e opacity: CLS 0 */
.tb-intro .tb-hero__line-text { transform: translateY(110%); }
.tb-intro .tb-hero__aside { opacity: 0; }
.tb-intro-late .tb-hero__line-text { transition: transform .5s cubic-bezier(.215, .61, .355, 1); }
.tb-intro-late .tb-hero__aside { transition: opacity .5s ease; }
.tb-hero__content { position: absolute; left: 50%; bottom: 12vh; bottom: calc(100lvh - 100svh + 12vh); transform: translateX(-50%); z-index: 2; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 48px; align-items: end; pointer-events: none; }
@media (max-width: 860px) { .tb-hero__content { grid-template-columns: 1fr; gap: 24px; } }
.tb-hero__title { margin: 0; font-family: var(--tb-font-title); font-weight: 400; font-size: clamp(38px, 6.4vw, 92px); line-height: 1.02; letter-spacing: -.015em; max-width: 12ch; text-shadow: 0 2px 40px rgba(6,21,48,.35); }
.tb-hero__line { display: block; overflow: hidden; padding-bottom: .14em; margin-bottom: -.14em; }
.tb-hero__line-text { display: block; }
.tb-hero__aside { margin-bottom: .6em; max-width: 44ch; }
.tb-hero__kicker { margin-bottom: 18px; }
.tb-hero__subtitle { margin: 0 0 24px; font-family: var(--tb-font-title); font-weight: 400; font-size: clamp(24px, 2.5vw, 38px); line-height: 1.15; letter-spacing: -.01em; text-shadow: 0 2px 40px rgba(6,21,48,.35); }
.tb-hero__subtitle::after { content: ""; display: block; width: 68px; height: 1px; margin-top: 24px; background: var(--tb-teal); }
.tb-hero__text { margin: 0; font-size: clamp(16px, 1.35vw, var(--tb-text)); max-width: 40ch; color: #DDF4F6; }
.tb-hero__cue { position: absolute; right: 4vw; bottom: calc(28px + env(safe-area-inset-bottom, 0px)); bottom: calc(100lvh - 100svh + 28px + env(safe-area-inset-bottom, 0px)); z-index: 2; display: flex; align-items: center; gap: 14px; font-size: 12px; letter-spacing: .1em; color: var(--tb-teal-2); }
.tb-hero__cue-line { display: block; width: 1px; height: 44px; background: var(--tb-teal); transform-origin: top; }
/* sugli schermi bassi il testo non arriva a toccare "Da dove vuoi iniziare?" */
@media (max-width: 860px) {
  .tb-hero__content { bottom: max(12vh, 96px); bottom: calc(100lvh - 100svh + max(12vh, 96px)); }
}

/* ---------- porte: testata ferma + fila di pannelli che scorre in orizzontale ---------- */
/* desktop (da 861px): si blocca tutta la sezione in 100svh, quindi gli spazi dipendono anche dall'altezza (vh) */
.tb-doors {
  --tb-doors-gutter: calc((100vw - var(--tb-w)) / 2); /* stesso margine del .tb-container: testata e prima porta allineate alle altre sezioni */
  --tb-doors-head-top: calc(var(--tb-header-h) + clamp(8px, 2vh, 28px));
  --tb-doors-pad-top: clamp(20px, 5vh, 56px);
  --tb-doors-pad-bottom: clamp(20px, 5vh, 64px);
  --tb-doors-text-gap: clamp(20px, 4vh, 48px); /* spazio fisso tra la porta e il nome */
  --tb-door-h: clamp(104px, 21vh, 190px);
  --tb-panel-gap: clamp(8px, 1.6vh, 16px);
  position: relative; z-index: 1; display: flex; flex-direction: column; height: 100vh; height: 100svh; overflow: hidden;
  background: var(--tb-white); color: var(--tb-ink);
}
.tb-doors__head { flex: 0 0 auto; display: grid; grid-template-columns: 1fr; gap: clamp(12px, 2.4vh, 24px); padding: var(--tb-doors-head-top) var(--tb-doors-gutter) clamp(24px, 6vh, 72px); }
@media (min-width: 861px) and (min-height: 760px) { .tb-doors__head { padding-bottom: clamp(32px, 6vh, 96px); } } /* piu' aria sotto la testata dove l'altezza lo permette; sugli schermi bassi la fila di pannelli ha bisogno dello spazio */
@media (min-width: 1024px) {
  .tb-doors__head { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(48px, 8vw, 160px); align-items: end; }
}
.tb-doors .tb-kicker { margin-bottom: clamp(10px, 2vh, 28px); color: var(--tb-teal-4); }
.tb-doors__title { margin: 0; max-width: 16ch; font-size: clamp(28px, min(3.6vw, 6vh), 52px); }
.tb-doors__text { margin: 0; max-width: 40ch; font-size: var(--tb-text); font-weight: 300; line-height: var(--tb-text-lh); color: var(--tb-ink); } /* stesso corpo del testo delle altre sezioni */
@media (min-width: 1024px) { .tb-doors__text { max-width: none; } } /* il paragrafo riempie la sua colonna: composizione meno sbilanciata a sinistra */
.tb-doors__viewport { flex: 1 1 auto; min-height: 0; overflow: hidden; }
.tb-doors__track { display: flex; align-items: stretch; height: 100%; width: max-content; padding-left: calc(var(--tb-doors-gutter) - 32px); }

.tb-doors__panel { flex: 0 0 auto; width: clamp(300px, 27vw, 560px); height: 100%; padding: calc(var(--tb-doors-pad-top) + var(--tb-door-h) + var(--tb-doors-text-gap)) 40px var(--tb-doors-pad-bottom) 32px; display: flex; flex-direction: column; justify-content: flex-start; gap: var(--tb-panel-gap); position: relative; border-left: 1px solid rgba(16,35,63,.18); }
.tb-doors__hit { position: absolute; inset: 0; z-index: 0; }
.tb-doors__panel:has(.tb-doors__hit[href]:not([href="#"])) { cursor: pointer; }
.tb-doors__link { z-index: 1; }
.tb-doors__num { position: absolute; top: var(--tb-doors-pad-top); left: 32px; font-size: 12px; color: var(--tb-world-text); font-weight: 500; letter-spacing: .1em; }
.tb-doors__name { margin: 0; font-family: var(--tb-font-title); font-size: 35px; font-weight: 400; line-height: 1.05; letter-spacing: -.01em; }
.tb-doors__sub, .tb-doors__desc { margin: 0; max-width: 36ch; }
.tb-doors__sub { font-size: 14px; font-weight: 500; color: var(--tb-world-text); }
.tb-doors__desc { font-size: var(--tb-text); line-height: var(--tb-text-lh); color: var(--tb-ink-2); }
/* "Scopri": stesso carattere delle CTA (vedi sopra), come bottone con filo da 1px */
.tb-doors__link { width: fit-content; margin-top: clamp(8px, 2.4vh, 28px); padding: 14px 24px; border: 1px solid currentColor; transition: background .3s, color .3s, border-color .3s; }
.tb-doors__link { --tb-cta-line: var(--tb-world-text); }
@media (max-height: 800px) { .tb-doors__link { margin-top: 4px; } } /* schermi non molto alti: la fila deve restare nell'altezza */
/* colori del Mondo: un pannello (tone-N) o una pagina (data-tb-world="N") espone luce, testo e intensita:
   il resto del CSS legge solo --tb-world-light / --tb-world-text / --tb-world-glow */
.tb-doors__panel--tone-1, [data-tb-world="1"] { --tb-world-light: var(--tb-tone-1-light); --tb-world-text: var(--tb-tone-1-text); --tb-world-glow: var(--tb-tone-1-glow); }
.tb-doors__panel--tone-2, [data-tb-world="2"] { --tb-world-light: var(--tb-tone-2-light); --tb-world-text: var(--tb-tone-2-text); --tb-world-glow: var(--tb-tone-2-glow); }
.tb-doors__panel--tone-3, [data-tb-world="3"] { --tb-world-light: var(--tb-tone-3-light); --tb-world-text: var(--tb-tone-3-text); --tb-world-glow: var(--tb-tone-3-glow); }
.tb-doors__panel--tone-4, [data-tb-world="4"] { --tb-world-light: var(--tb-tone-4-light); --tb-world-text: var(--tb-tone-4-text); --tb-world-glow: var(--tb-tone-4-glow); }
.tb-doors__panel--tone-5, [data-tb-world="5"] { --tb-world-light: var(--tb-tone-5-light); --tb-world-text: var(--tb-tone-5-text); --tb-world-glow: var(--tb-tone-5-glow); }

/* schermi bassi (es. 1366x650): con il testo a 18px e il bottone "Scopri" la fila non starebbe in altezza, quindi porta e spazi si stringono
   e il pannello si allarga un po' (meno righe di testo) */
@media (min-width: 861px) and (max-height: 760px) {
  .tb-doors { --tb-door-h: clamp(84px, 14vh, 190px); --tb-doors-text-gap: 14px; --tb-doors-pad-top: 16px; --tb-doors-pad-bottom: 16px; --tb-panel-gap: 8px; }
  .tb-doors__head { padding-bottom: clamp(16px, 3vh, 40px); }
  .tb-doors__panel { width: clamp(300px, 32vw, 560px); }
}

/* schermi stretti (tablet orizzontale): pannello piu' largo, per lo stesso motivo */
@media (min-width: 861px) and (max-width: 1279px) { .tb-doors__panel { width: clamp(340px, 36vw, 560px); } }

/* porta in alto a destra. Le proporzioni sono quelle di 96x170, l'altezza segue lo schermo */
.tb-door { position: absolute; right: clamp(20px, 3vw, 64px); top: var(--tb-doors-pad-top); height: var(--tb-door-h); aspect-ratio: 96 / 170; perspective: 600px; }
.tb-door__frame { position: absolute; inset: 0; background: var(--tb-grey-2); } /* il vano: nessun contorno, solo un grigio piu' chiaro dell'anta */
.tb-door__light { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 0%, color-mix(in srgb, var(--tb-world-light, #1FB6C1) var(--tb-world-glow, 35%), transparent) 100%); opacity: 0; transition: opacity 1.2s ease calc(.2s + var(--tb-door-delay, 0s)); }
/* anta: grigio chiaro e nessun contorno (le linee da 1px sotto la prospettiva sfarfallavano); e' gia' un livello a se' prima che l'animazione parta */
.tb-door__leaf { position: absolute; inset: 0; background: var(--tb-grey-3); transform-origin: left center; transform: rotateY(0deg); will-change: transform; backface-visibility: hidden; -webkit-backface-visibility: hidden; transition: transform 1.4s cubic-bezier(.2,.7,.2,1) var(--tb-door-delay, 0s); }
.tb-door__leaf::after { content: ""; position: absolute; right: 10px; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--tb-teal-3); }
.tb-doors__panel--open .tb-door__leaf, .tb-doors__panel:hover .tb-door__leaf { transform: rotateY(-62deg); }
.tb-doors__panel--open .tb-door__light, .tb-doors__panel:hover .tb-door__light { opacity: 1; }
.tb-doors__panel:hover .tb-door__leaf { transform: rotateY(-78deg); }

/* mobile (fino a 860px): la testata scorre via, si blocca solo la fila, a tutto schermo sotto la fascia dell'header.
   La sezione è trasparente, il fondo chiaro sta su testata e fila (angoli squadrati) */
@media (max-width: 860px) {
  .tb-doors { height: auto; display: block; overflow: visible; background: transparent; }
  .tb-doors__head { background: var(--tb-white); }
  .tb-doors__viewport { height: calc(100vh - var(--tb-header-h)); height: calc(100svh - var(--tb-header-h)); background: var(--tb-white); }
  /* fascia chiara dietro l'header, sopra la fila bloccata: solo mentre e' bloccata, altrimenti coprirebbe le ultime righe della testata */
  .tb-doors--pinned .tb-doors__viewport { box-shadow: 0 calc(-1 * var(--tb-header-h)) 0 0 var(--tb-white); }
  .tb-doors__track { padding-left: 0; }
  /* porta e testo raggruppati (spazio fisso di 40px) e centrati in verticale nella fila a tutto schermo */
  .tb-doors__panel { width: min(480px, 78vw); margin-right: 40px; padding: var(--tb-doors-pad-top) 40px var(--tb-doors-pad-bottom) 32px; justify-content: center; }
  .tb-door { position: relative; right: auto; top: auto; flex: 0 0 auto; align-self: flex-start; margin-bottom: calc(40px - var(--tb-panel-gap)); }
}
@media (prefers-reduced-motion: reduce) {
  .tb-doors { height: auto; display: block; background: var(--tb-white); padding-bottom: 96px; }
  .tb-doors__head { padding-bottom: 48px; }
  .tb-doors__viewport { height: auto; overflow: visible; background: none; }
  .tb-doors__track { flex-wrap: wrap; height: auto; width: auto; padding: 0 var(--tb-doors-gutter); }
  .tb-doors__panel { flex: 1 1 300px; width: auto; height: auto; margin: 0; padding: 32px 4vw 40px 32px; justify-content: flex-start; }
  .tb-doors__num { position: static; }
  .tb-door { display: none; }
}

/* ---------- come funziona: card che si sfogliano ---------- */
/* overflow-y visibile: la sfumatura (che sborda del 12%) continua sotto la sezione porte, che sta sopra (z-index) */
.tb-stack { position: relative; overflow: clip visible; background: var(--tb-blue); }
.tb-stack__viewport { height: 100vh; height: 100svh; display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; align-items: center; width: var(--tb-w); margin: 0 auto; }
.tb-stack__cards { position: relative; height: min(58vh, 520px); }
.tb-card { position: absolute; inset: 0; background: var(--tb-pale); color: var(--tb-ink); padding: clamp(28px, 4vw, 48px); display: flex; flex-direction: column; justify-content: space-between; transform-origin: center top; will-change: transform; box-shadow: 0 40px 80px -30px rgba(0,0,0,.5); }
.tb-card--accent { color: var(--tb-blue); }
/* la sfumatura sborda del 12% (inset -12%) e farebbe sporgere la card (scrollHeight 582 su 520): qui il livello e' grande come la card e i centri dei bagliori
   sono ricalcolati in modo che cadano negli stessi punti di prima (x' = -12% + 124% * x) */
.tb-card.tb-bg::before { inset: 0; }
.tb-card.tb-bg--teal { --bg-x1: 74.8%; --bg-y1: 105.8%; --bg-x2: 105.8%; --bg-y2: -12%; }
.tb-card__label { font-size: 15px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--tb-teal-3); } /* stile occhiello: "1 — Cosa facciamo" */
.tb-card--accent .tb-card__label { color: var(--tb-blue); }
/* due gradini sotto il titolo di sezione (46 -> 34px a 1440x900, 28 -> 22px su mobile, dove il titolo di sezione e' 24px): la card e' subordinata al titolo a sinistra */
.tb-card__title { margin: 0; font-size: clamp(22px, min(2.6vw, 4.2vh), 34px); font-weight: 300; line-height: 1.1; max-width: 16ch; }
.tb-card__title strong { font-weight: 500; }
/* schermi bassi su desktop: titolo ridotto dall'altezza (sopra) e riga piu' larga, cosi' la card non trabocca */

.tb-card__text { margin: 0; font-size: var(--tb-text); line-height: var(--tb-text-lh); max-width: 40ch; color: var(--tb-ink-2); }
.tb-card--accent .tb-card__text { color: var(--tb-blue); }
.tb-card__link { font-weight: 500; }
/* titolo e testo di tutte le card: larghezza piena della card e, da desktop, 630px (meno righe, meno altezza) */
.tb-card__title, .tb-card__text { max-width: 100%; }
@media (min-width: 1024px) { .tb-card__title, .tb-card__text { width: 630px; } }
/* ultima card: fondo piu' chiaro (testo blu leggibile) e link in evidenza come un bottone */
.tb-card.tb-bg--teal { --bg-from: color-mix(in srgb, var(--tb-teal) 45%, var(--tb-teal-2)); --bg-to: var(--tb-teal-2); }
.tb-card--accent .tb-card__link { display: block; width: fit-content; margin-top: 20px; padding: 12px 20px; border: 1px solid currentColor; background-image: none; transition: background-color .3s, color .3s; }
.tb-card--accent .tb-card__link:hover, .tb-card--accent .tb-card__link:focus-visible { background-color: var(--tb-blue); color: var(--tb-teal-2); }
@media (max-width: 860px) {
  .tb-stack__viewport { grid-template-columns: 1fr; align-content: center; gap: 24px; }
  .tb-stack__title { font-size: 24px; margin-bottom: 8px; }
  .tb-stack__text { display: none; }
}
/* card pinnate: titolo sotto l'header, card che si adattano all'altezza disponibile */
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  .tb-stack__viewport { display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 20px; padding: calc(74px + env(safe-area-inset-top, 0px)) 0 20px; }
  .tb-stack__cards { flex: 0 1 min(58vh, 520px); flex-basis: min(58svh, 520px); height: auto; min-height: 0; }
}
@media (max-width: 860px) and (max-height: 700px) {
  .tb-stack__viewport .tb-kicker { margin-bottom: 14px; }
  .tb-stack__title { font-size: 22px; }
  .tb-card { padding: 24px; }
  .tb-card__title { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  .tb-stack__cards { height: auto; display: grid; gap: 16px; }
  .tb-card { position: static; }
  .tb-stack__viewport { height: auto; padding: 96px 0; }
}

/* ---------- luoghi (showcase): colonna di foto che "cavalcano" un campo di onde fermo sullo schermo ---------- */
.tb-showcase { --tb-sc-size: 360px; --tb-sc-gap: 2rem; position: relative; background: var(--tb-blue-3); overflow-x: clip; padding-bottom: clamp(72px, 10vw, 140px); }
.tb-showcase__head { margin-bottom: clamp(24px, 6vh, 64px); }
.tb-showcase__title { margin-bottom: 0; }
.tb-showcase__stage { position: relative; padding: 6vh 0; }
.tb-showcase__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; align-items: center; }
/* --tb-x: scostamento orizzontale (seno sull'indice) impostato dal JS; left e non transform, cosi' l'elemento non crea un contesto di impilamento
   e la didascalia puo' stare sopra la scritta mentre la foto sta sotto */
.tb-showcase__item { position: relative; left: var(--tb-x, 0px); width: var(--tb-sc-size); margin: 0 0 var(--tb-sc-gap); }
.tb-showcase__item:last-child { margin-bottom: 0; }
.tb-showcase__link { display: block; color: var(--tb-white); }
.tb-showcase__frame { display: block; width: 100%; aspect-ratio: 1; perspective: 900px; }
.tb-showcase__media { position: relative; z-index: 0; display: block; width: 100%; height: 100%; overflow: hidden; background: var(--tb-blue-2); will-change: transform, opacity; }
.tb-showcase__image { display: block; width: 100%; height: 100%; object-fit: cover; }
/* didascalia sopra la scritta decorativa (z-index 2 contro 1): resta leggibile */
.tb-showcase__caption { position: relative; z-index: 2; display: flex; flex-direction: column; gap: 4px; margin-top: 16px; }
.tb-showcase__name { font-family: var(--tb-font-title); font-size: clamp(19px, 1.7vw, 24px); line-height: 1.15; }
.tb-showcase__place { font-size: 14px; color: rgba(255,255,255,.82); }
.tb-showcase__world { display: inline-flex; align-items: center; gap: 8px; margin-top: 4px; font-size: 11px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--tb-world-light, var(--tb-teal)) 74%, #fff); }
.tb-showcase__world::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tb-world-light, var(--tb-teal)); }
.tb-showcase__link:focus-visible { outline: 2px solid var(--tb-teal); outline-offset: 8px; }
/* scritta grande: ferma a meta' schermo per tutta la sezione (sticky, altezza 0), scorre da destra a sinistra con lo scroll (JS) */
.tb-showcase__ticker { position: sticky; top: 50vh; z-index: 1; height: 0; pointer-events: none; mix-blend-mode: screen; }
.tb-showcase__ticker-text { position: absolute; left: 0; top: 0; transform: translateY(-50%); white-space: nowrap; font-family: var(--tb-font-title); font-weight: 400; font-size: clamp(88px, 12vw, 190px); line-height: 1; letter-spacing: -.02em; color: var(--tb-teal); opacity: .6; will-change: transform; }
@media (max-width: 860px) {
  .tb-showcase { --tb-sc-size: 62vw; --tb-sc-gap: 4rem; }
  .tb-showcase__stage { padding: 8vh 0; }
  .tb-showcase__ticker { top: 52svh; }
  .tb-showcase__ticker-text { font-size: clamp(56px, 17vw, 96px); }
}
/* senza movimento: griglia statica con le didascalie, scritta ferma */
@media (prefers-reduced-motion: reduce) {
  .tb-showcase__stage { padding: 0; }
  .tb-showcase__ticker { position: static; height: auto; mix-blend-mode: normal; margin-bottom: clamp(32px, 5vw, 56px); }
  .tb-showcase__ticker-text { position: static; display: block; transform: none; white-space: normal; font-size: clamp(32px, 6vw, 72px); line-height: 1.1; opacity: .5; }
  .tb-showcase__list { display: grid; align-items: start; grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 1fr)); gap: clamp(32px, 5vw, 56px) clamp(20px, 3vw, 40px); max-width: 1020px; }
  .tb-showcase__item { left: 0; margin: 0; width: auto; }
  .tb-showcase__link, .tb-showcase__frame { width: 100%; max-width: 340px; }
  .tb-showcase__media { will-change: auto; }
}

/* variante landscape: stesse foto in frame orizzontali 3:2, griglia sfalsata 3+3 (la seconda riga e' traslata di meta' card), parallasse verticale (JS) al posto del campo d'onda.
   Larghezza della card: 420px, ridotta quando 3,5 card + gli spazi non stanno nello schermo (cosi' niente didascalie tagliate ai bordi). */
.tb-showcase--landscape { --tb-sc-gap: 24px; --tb-sc-w: min(420px, calc((100vw - 8vw - 2.5 * var(--tb-sc-gap)) / 3.5)); --tb-sc-shift: calc((var(--tb-sc-w) + var(--tb-sc-gap)) / 4); }
.tb-showcase--landscape .tb-showcase__list { display: grid; grid-template-columns: repeat(3, var(--tb-sc-w)); justify-content: center; align-items: start; gap: clamp(72px, 8vw, 120px) var(--tb-sc-gap); }
.tb-showcase--landscape .tb-showcase__item { width: auto; margin: 0; left: calc(-1 * var(--tb-sc-shift)); }
.tb-showcase--landscape .tb-showcase__item:nth-child(n+4) { left: var(--tb-sc-shift); }
.tb-showcase--landscape .tb-showcase__frame { aspect-ratio: 3 / 2; }
/* la parallasse sposta frame e didascalia (non l'<li>: un livello proprio per l'<li> metterebbe la didascalia sotto la scritta) */
.tb-showcase--landscape .tb-showcase__frame, .tb-showcase--landscape .tb-showcase__caption { will-change: transform; }
@media (max-width: 860px) {
  .tb-showcase--landscape { --tb-sc-w: min(420px, 84vw); }
  .tb-showcase--landscape .tb-showcase__list { grid-template-columns: var(--tb-sc-w); gap: 56px; }
  .tb-showcase--landscape .tb-showcase__item, .tb-showcase--landscape .tb-showcase__item:nth-child(n+4) { left: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .tb-showcase--landscape .tb-showcase__list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); max-width: 1180px; margin: 0 auto; gap: 40px 24px; }
  .tb-showcase--landscape .tb-showcase__item, .tb-showcase--landscape .tb-showcase__item:nth-child(n+4) { left: 0; }
  .tb-showcase--landscape .tb-showcase__link, .tb-showcase--landscape .tb-showcase__frame { max-width: none; }
  .tb-showcase--landscape .tb-showcase__frame, .tb-showcase--landscape .tb-showcase__caption { will-change: auto; }
}

/* variante accordion (la didascalia ha gia' la larghezza finale del pannello aperto, in unita' del contenitore: il testo non va a capo mentre il pannello si apre, e compare solo a pannello quasi aperto): riga di sei pannelli, uno aperto (flex 4) e gli altri strisce (flex 1); senza scritta. Un pannello e' un <button> a tutta la sua <li>,
   la didascalia e' un fratello e si vede solo sul pannello aperto (opacity: resta nell'albero di accessibilita'). Tablet: piu' bassa e strisce piu' sottili.
   Mobile: fisarmonica verticale (attivo 52svh, gli altri 64px con il nome). */
.tb-showcase--accordion { --tb-ac-h: min(72svh, 760px); --tb-ac-min: 72px; --tb-ac-ease: cubic-bezier(.65, 0, .35, 1); --tb-ac-time: 700ms; }
.tb-showcase--accordion .tb-showcase__list { display: flex; flex-direction: row; align-items: stretch; gap: 12px; height: var(--tb-ac-h); container-type: inline-size; }
.tb-showcase--accordion .tb-showcase__item { flex: 1 1 0; min-width: var(--tb-ac-min); width: auto; margin: 0; left: 0; overflow: hidden; background: var(--tb-blue-2); transition: flex-grow var(--tb-ac-time) var(--tb-ac-ease); }
.tb-showcase--accordion .tb-showcase__item--active { flex-grow: 4; }
.tb-showcase__panel { position: absolute; inset: 0; display: block; width: 100%; height: 100%; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; color: inherit; cursor: pointer; }
.tb-showcase__panel:focus-visible { outline: 2px solid var(--tb-teal-2); outline-offset: -4px; }
.tb-showcase--accordion .tb-showcase__image { position: absolute; inset: 0; transform: scale(1.04); transition: transform var(--tb-ac-time) var(--tb-ac-ease); }
.tb-showcase--accordion .tb-showcase__item--active .tb-showcase__image { transform: none; }
.tb-showcase--accordion .tb-showcase__caption { position: absolute; left: 0; bottom: 0; z-index: 1; width: max(340px, calc((100cqw - 60px) * 4 / 9)); margin: 0; padding: 120px 40px 36px; gap: 8px; pointer-events: none;
  background: linear-gradient(to top, rgba(24,38,72,.94) 0%, rgba(24,38,72,.62) 50%, rgba(24,38,72,0) 100%); opacity: 0; transition: opacity 150ms ease; }
.tb-showcase--accordion .tb-showcase__item--active .tb-showcase__caption { opacity: 1; transition: opacity 300ms ease 450ms; }
.tb-showcase--accordion .tb-showcase__name { font-size: clamp(32px, 3vw, 40px); line-height: 1.1; }
.tb-showcase--accordion .tb-showcase__place { font-size: 18px; color: rgba(255,255,255,.9); }
.tb-showcase--accordion .tb-showcase__world { font-size: 15px; letter-spacing: .08em; }
.tb-showcase--accordion .tb-showcase__world::before { width: 10px; height: 10px; }
@media (min-width: 720px) and (max-width: 1023px) { .tb-showcase--accordion { --tb-ac-h: 56svh; --tb-ac-min: 56px; } .tb-showcase--accordion .tb-showcase__caption { padding: 96px 28px 28px; } }
@media (max-width: 719px) {
  .tb-showcase--accordion .tb-showcase__list { flex-direction: column; gap: 8px; height: auto; }
  .tb-showcase--accordion .tb-showcase__item { flex: none; min-width: 0; height: 64px; transition: height var(--tb-ac-time) var(--tb-ac-ease); }
  .tb-showcase--accordion .tb-showcase__item--active { height: 52svh; }
  .tb-showcase--accordion .tb-showcase__caption { width: 100%; padding: 72px 20px 20px; opacity: 1; transition: none; }
  .tb-showcase--accordion .tb-showcase__name { font-size: 28px; }
  .tb-showcase--accordion .tb-showcase__item:not(.tb-showcase__item--active) .tb-showcase__caption { top: 0; bottom: auto; height: 64px; padding: 0 20px; display: flex; flex-direction: row; align-items: center; background: linear-gradient(90deg, rgba(24,38,72,.78), rgba(24,38,72,.25)); }
  .tb-showcase--accordion .tb-showcase__item:not(.tb-showcase__item--active) .tb-showcase__name { font-size: 22px; }
  .tb-showcase--accordion .tb-showcase__item:not(.tb-showcase__item--active) :is(.tb-showcase__place, .tb-showcase__world) { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tb-showcase--accordion { --tb-ac-time: 0ms; }
  .tb-showcase--accordion .tb-showcase__item, .tb-showcase--accordion .tb-showcase__image, .tb-showcase--accordion .tb-showcase__caption, .tb-showcase--accordion .tb-showcase__item--active .tb-showcase__caption { transition: none; }
}

/* ---------- fondatrice + libri ---------- */
/* da 1024px: due colonne a 96px, il ritratto resta a vista sotto l'header (sticky) mentre il testo scorre; sotto, sta sopra il testo e non e' sticky.
   Altezza massima = quella visibile sotto l'header, cosi' sugli schermi bassi non esce dallo schermo (il riquadro si allarga e la foto si ritaglia). */
.tb-founder { display: grid; grid-template-columns: 1fr; gap: 40px; }
.tb-founder .tb-copy { max-width: 62ch; } /* paragrafi piu' larghi: meno righe */
.tb-founder__portrait { width: 100%; max-width: min(100%, 480px); aspect-ratio: 4/5; background: linear-gradient(160deg, var(--tb-blue-2), var(--tb-blue)); position: relative; overflow: hidden; }
.tb-founder__image { position: absolute; inset: -12% 0; width: 100%; height: 124%; object-fit: cover; }
@media (min-width: 1024px) {
  .tb-founder { grid-template-columns: 5fr 7fr; gap: 96px; align-items: start; }
  .tb-founder__portrait { position: sticky; top: calc(var(--tb-header-h) + 32px); max-width: none; max-height: calc(100vh - var(--tb-header-h) - 64px); max-height: calc(100svh - var(--tb-header-h) - 64px); }
}
.tb-founder__books { display: flex; gap: 24px; margin-top: 40px; }
.tb-founder__book { width: 120px; aspect-ratio: 2/3; background: var(--tb-blue); color: var(--tb-teal-2); font-size: 11px; padding: 12px; line-height: 1.3; display: flex; align-items: end; }
.tb-founder__book--accent { background: var(--tb-teal); color: var(--tb-blue); }
.tb-founder__book--cover { width: 140px; padding: 0; box-shadow: 0 24px 48px -24px rgba(16,35,63,.55); }
.tb-founder__book-image { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------- dialogo ---------- */
/* il dialogo non e' piu' attaccato al footer: respiro sotto la lista */
.tb-dialog { padding-bottom: clamp(64px, 8vw, 112px); }
/* testata: occhiello e titolo a sinistra, paragrafo a destra allineato in basso (come in "Perche' ora") */
.tb-dialog__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.tb-dialog__head-main > :last-child { margin-bottom: 0; }
@media (min-width: 1024px) { .tb-dialog__head { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(48px, 8vw, 128px); align-items: end; } .tb-dialog__head .tb-copy { max-width: none; } }
.tb-dialog__list { list-style: none; margin: 48px 0 0; padding: 0; border-top: 1px solid rgba(255,255,255,.15); }
.tb-dialog__link { display: grid; grid-template-columns: 200px 1fr auto; gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid rgba(255,255,255,.15); font-size: clamp(18px, 1.6vw, 22px); transition: padding-left .35s ease, color .3s; }
@media (max-width: 640px) { .tb-dialog__link { grid-template-columns: 1fr; gap: 6px; } }
.tb-dialog__label { font-weight: 500; }
.tb-dialog__text { color: rgba(255,255,255,.8); font-size: var(--tb-text); line-height: var(--tb-text-lh); }
.tb-dialog__arrow { color: var(--tb-teal-2); }
/* righe di un Mondo (rev. 29/10): etichetta e freccia nel colore del Mondo, come le porte della Home */
.tb-dialog li[data-tb-world] .tb-dialog__label, .tb-dialog li[data-tb-world] .tb-dialog__arrow { color: var(--tb-world-light); }
.tb-dialog__link:hover { padding-left: 14px; color: var(--tb-teal-2); }

/* ---------- contatti: sezione scura, info a sinistra e modulo a destra ---------- */
/* il modulo e' fatto per essere sostituito da Contact Form 7: le classi tb-field* si mettono sul markup del tema */
.tb-contact__layout { display: grid; grid-template-columns: minmax(0, 1fr); gap: clamp(48px, 7vw, 72px); align-items: start; }
@media (min-width: 1024px) { .tb-contact__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: clamp(56px, 7vw, 112px); } }
.tb-contact__title { margin-bottom: 28px; max-width: 24ch; font-size: clamp(28px, 3vw, 44px); }
.tb-contact__details { margin: 40px 0 0; padding: 0; display: grid; gap: 20px; }
.tb-contact__detail { display: grid; gap: 4px; }
.tb-contact__detail dt { font-size: 15px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--tb-teal-2) 80%, var(--tb-white)); }
.tb-contact__detail dd { margin: 0; font-size: var(--tb-text); line-height: var(--tb-text-lh); }
.tb-contact__detail a:hover { color: var(--tb-teal-2); }
.tb-contact__flag { font-size: 13px; font-weight: 500; letter-spacing: .06em; color: rgba(255,255,255,.7); }
.tb-contact__form { display: grid; gap: 28px; }
.tb-field { display: grid; gap: 10px; }
.tb-field__label { font-size: 15px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; }
.tb-field__control { width: 100%; margin: 0; padding: 14px 16px; font: inherit; font-size: var(--tb-text); line-height: 1.4; color: var(--tb-white); background-color: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.4); border-radius: 0; transition: border-color .3s, background-color .3s; }
.tb-field__control::placeholder { color: rgba(255,255,255,.62); opacity: 1; }
.tb-field__control:hover { border-color: rgba(255,255,255,.7); }
.tb-field__control:focus-visible, .tb-field__check:focus-visible { outline: 2px solid var(--tb-teal-2); outline-offset: 3px; }
.tb-field__control:focus-visible { border-color: var(--tb-teal-2); background-color: rgba(255,255,255,.1); }
textarea.tb-field__control { resize: vertical; min-height: 140px; }
.tb-field__control--select { appearance: none; -webkit-appearance: none; padding-right: 48px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23fff' stroke-width='1.6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 18px center; }
.tb-field__control--select:invalid { color: rgba(255,255,255,.62); }
.tb-field__control--select option { color: var(--tb-ink); background: var(--tb-white); }
.tb-field__control[aria-invalid="true"] { border-color: #FFA79B; }
.tb-field__error { margin: 0; font-size: 15px; line-height: 1.4; color: #FFB8AE; }
.tb-field--check { grid-template-columns: auto 1fr; align-items: start; column-gap: 14px; }
.tb-field__check { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--tb-teal); }
.tb-field__check-label { font-size: 15px; padding-top: 1px; line-height: var(--tb-text-lh); color: rgba(255,255,255,.88); }

.tb-field--check .tb-field__error { grid-column: 2; }
.tb-contact__submit { justify-self: start; margin-top: 4px; }
.tb-contact__submit:focus-visible { outline: 2px solid var(--tb-teal-2); outline-offset: 4px; }
.tb-contact__status { min-height: 1.6em; margin: 0; font-size: var(--tb-text); line-height: var(--tb-text-lh); color: var(--tb-teal-2); }
/* marchio in filigrana sotto i recapiti, nella colonna di sinistra */
.tb-contact__info::after { content: ""; display: block; width: 120px; aspect-ratio: 1; margin-top: clamp(40px, 6vw, 72px); background: url("../img/logo-mark-light.svg") center / contain no-repeat; opacity: .1; }
.tb-contact.tb-section--light .tb-contact__info::after { background-image: url("../img/logo-mark.svg"); opacity: .08; }
/* variante chiara (tone 'light'): stessi componenti con i colori dell'inchiostro */
.tb-contact.tb-section--light .tb-copy--muted { color: var(--tb-ink-2); }
.tb-contact.tb-section--light .tb-contact__detail dt { color: var(--tb-teal-4); }
.tb-contact.tb-section--light .tb-contact__detail a:hover { color: var(--tb-teal-3); }
.tb-contact.tb-section--light .tb-field__control { color: var(--tb-ink); background-color: rgba(16,35,63,.04); border-color: rgba(16,35,63,.4); }
.tb-contact.tb-section--light .tb-field__control::placeholder, .tb-contact.tb-section--light .tb-field__control--select:invalid { color: rgba(16,35,63,.6); }
.tb-contact.tb-section--light .tb-field__control:hover { border-color: rgba(16,35,63,.7); }
.tb-contact.tb-section--light .tb-field__control:focus-visible, .tb-contact.tb-section--light .tb-field__check:focus-visible, .tb-contact.tb-section--light .tb-contact__submit:focus-visible { outline-color: var(--tb-teal-4); }
.tb-contact.tb-section--light .tb-field__control:focus-visible { border-color: var(--tb-teal-4); background-color: rgba(16,35,63,.07); }
.tb-contact.tb-section--light .tb-field__control--select { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%2310233F' stroke-width='1.6'/%3E%3C/svg%3E"); }
.tb-contact.tb-section--light .tb-field__control[aria-invalid="true"] { border-color: #B3261E; }
.tb-contact.tb-section--light .tb-field__error { color: #B3261E; }
.tb-contact.tb-section--light .tb-field__check-label { color: var(--tb-ink-2); }
.tb-contact.tb-section--light .tb-field__check { accent-color: var(--tb-teal-4); }
.tb-contact.tb-section--light .tb-contact__status { color: var(--tb-teal-4); }
/* nelle pagine di un Mondo la sezione e' chiusa in alto da un filo nel colore del Mondo (era del callout finale) */
[data-tb-world] .tb-contact { border-top: 4px solid var(--tb-world-light); }

/* ==========================================================================
   Pagine interne — blocchi generici
   prose · page-hero · lead · text · grid · cases · callout · appear
   ========================================================================== */

/* testo che arriva da un campo WYSIWYG: qui (e solo qui) si stilano i tag discendenti */
.tb-prose, .tb-page-hero, .tb-dimensions, .tb-strip, .tb-method, .tb-lead, .tb-grid, .tb-cases, .tb-callout { font-synthesis: none; }
.tb-prose { font-size: var(--tb-text); line-height: var(--tb-text-lh); color: rgba(255,255,255,.8); }
.tb-section--light .tb-prose { color: var(--tb-ink-2); }
.tb-prose > :first-child { margin-top: 0; }
.tb-prose > :last-child { margin-bottom: 0; }
.tb-prose p { margin: 0 0 1.1em; max-width: 60ch; }
.tb-prose h3 { margin: 1.8em 0 .7em; font-size: 20px; font-weight: 500; line-height: 1.3; color: var(--tb-white); }
.tb-section--light .tb-prose h3 { color: var(--tb-ink); }
.tb-prose hr { width: 64px; height: 0; margin: 2.6em 0 0; border: 0; border-top: 1px solid var(--tb-teal-2); }
.tb-section--light .tb-prose hr { border-top-color: var(--tb-teal-4); }
.tb-prose ul, .tb-prose ol { margin: 0 0 1.1em; padding-left: 1.2em; }
.tb-prose li { margin: 0 0 .75em; padding-left: .3em; max-width: 60ch; }
.tb-prose li::marker { color: var(--tb-teal-2); }
.tb-section--light .tb-prose li::marker { color: var(--tb-teal-4); }
.tb-prose a:hover { color: var(--tb-teal-2); }
.tb-section--light .tb-prose a:hover { color: var(--tb-teal-3); }
.tb-prose strong, .tb-prose em { font-weight: 500; color: var(--tb-white); }
.tb-prose em { font-style: normal; }
.tb-section--light .tb-prose strong, .tb-section--light .tb-prose em { color: var(--tb-ink); }
@media (min-width: 861px) {
  .tb-prose--list-cols-2 ul, .tb-prose--list-cols-2 ol { column-count: 2; column-gap: 56px; }
  .tb-prose--list-cols-2 li { break-inside: avoid; max-width: none; }
}

/* page-hero */
.tb-page-hero { padding: clamp(140px, 20vw, 240px) 0 clamp(72px, 9vw, 128px); color: var(--tb-white); }
/* la luce principale prende il colore del Mondo (senza Mondo resta azzurra) */
.tb-page-hero.tb-bg { --bg-g1: var(--tb-world-light, var(--tb-sky-2)); --bg-k1: 40; }
.tb-page-hero__label { margin-bottom: 36px; }
.tb-page-hero__inner > * { max-width: 900px; }
.tb-page-hero__title { margin: 0 0 28px; font-family: var(--tb-font-title); font-weight: 400; font-size: clamp(36px, 4.2vw, 56px); line-height: 1.08; letter-spacing: -.015em; text-wrap: balance; }
.tb-page-hero__subtitle { margin: 0; font-size: clamp(18px, 1.8vw, 24px); line-height: 1.4; max-width: 60ch; color: #DDF4F6; }
/* sottotitolo di un articolo (Pensieri): Lora 24, non grassetto */
.tb-page-hero__subtitle--serif { font-family: var(--tb-font-title); font-weight: 400; font-size: 24px; line-height: 1.35; letter-spacing: -.005em; max-width: 46ch; }
.tb-page-hero--image .tb-page-hero__subtitle--serif { font-weight: 400; }

/* page-hero con foto: la domanda e' l'h1, contenuto in basso a sinistra; sopra la foto un velo blu-3 -> colore del Mondo e la grana di tb-bg. Nessuna deriva. */
.tb-page-hero--image { position: relative; isolation: isolate; overflow: clip; display: flex; align-items: flex-end; min-height: 560px; min-height: min(80vh, 820px); min-height: max(560px, min(80svh, 820px)); padding: calc(var(--tb-header-h) + 40px) 0 clamp(48px, 7vw, 96px); background: var(--tb-blue-3); }
.tb-page-hero--image .tb-page-hero__inner { width: var(--tb-w); }
.tb-page-hero__image { position: absolute; top: -15%; left: 0; z-index: -3; width: 100%; height: 115%; /* 15% in piu' sopra: la parallasse (app.js) lo riporta a filo */ object-fit: cover; object-position: var(--tb-focal, 50% 50%); }
.tb-page-hero__veil { position: absolute; inset: 0; z-index: -2; pointer-events: none;
  /* da sinistra in basso (blu-3 .85, tenuto fino al 45% della diagonale) a destra in alto (colore del Mondo .45); sotto, una fascia dal basso che tiene scura
     la zona del testo anche dove la diagonale si schiarisce; in cima una fascia scura che tiene leggibile il menu su foto chiare (contrasti: tools/verify/re-ritmo.js) */
  background:
    linear-gradient(to bottom, rgba(24,38,72,.7) 0, rgba(24,38,72,0) calc(var(--tb-header-h) + 90px)),
    linear-gradient(to top, rgba(24,38,72,.45) 0%, rgba(24,38,72,.45) 30%, rgba(24,38,72,0) 85%),
    linear-gradient(to top right, rgba(24,38,72,.85) 0%, rgba(24,38,72,.85) 40%, color-mix(in srgb, var(--tb-world-light, var(--tb-sky-2)) 45%, transparent) 100%); }
.tb-page-hero--tone { background: linear-gradient(to top right, var(--tb-blue-3) 0%, var(--tb-blue-2) 45%, color-mix(in srgb, var(--tb-world-light, var(--tb-sky-2)) 75%, var(--tb-blue-3)) 100%); } /* senza foto: il velo sta sul tono del Mondo */
.tb-page-hero--image::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: url("../img/grain.svg") 0 0 / 160px 160px repeat; opacity: .05; }
.tb-page-hero--image .tb-page-hero__label { display: flex; align-items: center; gap: 14px; margin-bottom: 28px; color: var(--tb-world-light, var(--tb-teal-2)); }
.tb-page-hero--image .tb-page-hero__label::before { content: ""; flex: 0 0 auto; width: 32px; height: 2px; background: var(--tb-world-light, var(--tb-teal)); }
.tb-page-hero--image .tb-page-hero__title { margin-bottom: 24px; }
.tb-page-hero--image .tb-page-hero__subtitle { font-weight: 400; }
@media (prefers-reduced-motion: no-preference) {
  .tb-page-hero--image .tb-page-hero__inner { animation: tb-hero-in 1s ease .15s both; }
}
@keyframes tb-hero-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }

/* lead */
.tb-lead__statement { margin: 0; font-weight: 300; font-size: clamp(26px, 3.4vw, 48px); line-height: 1.22; letter-spacing: -.01em; max-width: 24ch; }
.tb-lead__title { margin-bottom: 0; }
.tb-lead__stats { list-style: none; margin: 56px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; }
.tb-lead__stat { border-top: 1px solid rgba(255,255,255,.18); padding: 28px 0 8px; }
.tb-section--light .tb-lead__stat { border-top-color: rgba(16,35,63,.18); }
.tb-lead__stat > span { display: block; }
.tb-lead__stat-value { font-weight: 300; font-size: clamp(52px, 6.4vw, 92px); line-height: 1; letter-spacing: -.02em; color: var(--tb-teal-2); }
.tb-section--light .tb-lead__stat-value { color: var(--tb-teal-4); }
.tb-lead__stat-unit { margin-top: 10px; font-size: 15px; font-weight: 500; }
.tb-lead__stat-label { margin-top: 4px; font-size: 13px; letter-spacing: .04em; color: rgba(255,255,255,.8); }
.tb-section--light .tb-lead__stat-label { color: var(--tb-ink-2); }
.tb-lead__text { margin-top: 28px; }
.tb-lead__statement + .tb-lead__text { margin-top: 48px; }
.tb-lead__stats + .tb-lead__text { margin-top: 56px; }
/* paragrafo sotto i numeri: la conclusione, senza riquadro, in serif grande con un filo turchese sopra */
.tb-lead__stats ~ .tb-lead__text { max-width: 30ch; margin: clamp(56px, 7vw, 96px) 0 0; font-family: var(--tb-font-title); font-weight: 400; font-size: clamp(26px, 3vw, 44px); line-height: 1.2; letter-spacing: -.01em; color: var(--tb-white); }
.tb-lead__stats ~ .tb-lead__text::before { content: ""; display: block; width: 68px; height: 1px; margin-bottom: clamp(24px, 3vw, 36px); background: var(--tb-teal); }
.tb-section--light .tb-lead__stats ~ .tb-lead__text { color: var(--tb-ink); }
.tb-section--light .tb-lead__stats ~ .tb-lead__text::before { background: var(--tb-teal-4); }
/* testata a due colonne (1/2 + 1/2) con il paragrafo in basso; sotto i 1024px le due parti si impilano */
.tb-lead__head { display: grid; grid-template-columns: minmax(0, 1fr); gap: 32px; }
.tb-lead__head-main > :last-child { margin-bottom: 0; }
.tb-lead__head + .tb-lead__stats { margin-top: clamp(48px, 6vw, 72px); }
@media (min-width: 1024px) { .tb-lead__head { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(48px, 8vw, 128px); align-items: end; } .tb-lead__intro { max-width: none; } }
@media (max-width: 860px) {
  .tb-lead__stats { grid-template-columns: 1fr; margin-top: 40px; }
  .tb-lead__stat { padding: 22px 0 18px; }
}

/* text */
.tb-text__title { margin-bottom: 40px; }
.tb-text__main > .tb-cta { margin-top: 30px; }
.tb-text--aside .tb-text__layout { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 56px; align-items: start; }
.tb-text__aside { border-left: 1px solid rgba(255,255,255,.18); padding-left: 40px; }
.tb-section--light .tb-text__aside { border-left-color: rgba(16,35,63,.18); }
.tb-text__aside .tb-prose h3:first-child { margin-top: 0; }
@media (max-width: 860px) {
  .tb-text--aside .tb-text__layout { grid-template-columns: 1fr; gap: 40px; }
  .tb-text__aside { border-left: 0; border-top: 1px solid rgba(255,255,255,.18); padding: 32px 0 0; }
  .tb-section--light .tb-text__aside { border-top-color: rgba(16,35,63,.18); }
}

/* grid */
.tb-grid__head { margin-bottom: clamp(40px, 5vw, 72px); }
.tb-grid__title { margin-bottom: 24px; }
.tb-grid__items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 48px; }
.tb-grid--cols-2 .tb-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tb-grid__item { border-top: 1px solid rgba(255,255,255,.18); padding: 24px 0 48px; }
.tb-section--light .tb-grid__item { border-top-color: rgba(16,35,63,.18); }
.tb-grid__num { display: block; margin-bottom: 20px; font-size: 12px; font-weight: 500; letter-spacing: .1em; color: var(--tb-teal-2); }
.tb-section--light .tb-grid__num { color: var(--tb-teal-4); }
.tb-grid__item-title { margin: 0 0 16px; font-family: var(--tb-font-title); font-weight: 400; font-size: clamp(22px, 2.1vw, 30px); line-height: 1.15; letter-spacing: -.01em; }
.tb-grid__item-text p { margin-bottom: 0; }
.tb-grid__outro { margin-top: 16px; }
@media (max-width: 860px) {
  .tb-grid__items, .tb-grid--cols-2 .tb-grid__items { grid-template-columns: 1fr; }
  .tb-grid__item { padding-bottom: 36px; }
}

/* dimensions: voci a righe con numero grande (colore del Mondo); le righe compaiono una a una (stesso stato iniziale di tb-reveal) */
.tb-dimensions__head { display: grid; gap: 32px; margin-bottom: clamp(48px, 6vw, 88px); }
.tb-dimensions__title { margin-bottom: 0; }
.tb-dimensions__intro > :first-child { margin-top: 0; }
.tb-dimensions__lead { margin: 24px 0 0; max-width: 46ch; font-size: var(--tb-text); font-weight: 500; line-height: var(--tb-text-lh); color: var(--tb-white); }
@media (min-width: 1024px) {
  .tb-dimensions__head { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(48px, 8vw, 128px); align-items: end; }
}
.tb-dimensions__list { list-style: none; margin: 0; padding: 0; }
.tb-dimensions__row { display: grid; grid-template-columns: clamp(110px, 12vw, 172px) minmax(0, 5fr) minmax(0, 6fr); column-gap: clamp(24px, 4vw, 64px); align-items: start; padding: 40px 0; }
.tb-dimensions__row { will-change: auto; } /* il livello si attiva solo mentre la riga si anima (JS) */
.tb-dimensions__row + .tb-dimensions__row { margin-top: 0; border-top: 1px solid rgba(255,255,255,.12); }
.tb-dimensions__num { font-family: var(--tb-font-title); font-weight: 400; font-size: clamp(64px, 8vw, 112px); line-height: .9; letter-spacing: -.02em; color: var(--tb-world-light, var(--tb-teal-2)); }
.tb-dimensions__item-title { margin: 0; font-family: var(--tb-font-title); font-weight: 400; font-size: clamp(28px, 2.3vw, 32px); line-height: 1.15; letter-spacing: -.01em; }
.tb-dimensions__item-text { margin: 0; max-width: 44ch; font-size: var(--tb-text); line-height: var(--tb-text-lh); color: rgba(255,255,255,.8); }
/* su fondo chiaro (tone: light, es. Habitat Evolutivo): testo, frase di chiusura e filetti in inchiostro, numeri nel colore testo del Mondo */
.tb-dimensions.tb-section--light .tb-dimensions__item-text { color: var(--tb-ink-2); }
.tb-dimensions.tb-section--light .tb-dimensions__lead { color: var(--tb-ink); }
.tb-dimensions.tb-section--light .tb-dimensions__row + .tb-dimensions__row { border-top-color: rgba(16,35,63,.16); }
.tb-dimensions.tb-section--light .tb-dimensions__num { color: var(--tb-world-text, var(--tb-teal-4)); }
@media (max-width: 1023px) {
  .tb-dimensions__row { grid-template-columns: clamp(88px, 14vw, 132px) minmax(0, 1fr); }
  .tb-dimensions__num { grid-row: 1 / span 2; }
  .tb-dimensions__item-text { margin-top: 16px; }
}
@media (max-width: 600px) {
  .tb-dimensions__row { display: block; padding: 32px 0; }
  .tb-dimensions__num { display: block; margin-bottom: 16px; font-size: 56px; }
  .tb-dimensions__item-text { margin-top: 14px; }
}

/* strip: anteprima visiva (foto senza didascalie); la parallasse muove l'immagine di +-20px dentro il suo riquadro */
.tb-strip { padding-bottom: clamp(40px, 5vw, 72px); } /* come il padding alto (tight): il vuoto sotto le foto e' uguale a quello sopra la frase */
.tb-strip__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 12px 32px; margin-bottom: clamp(32px, 4vw, 56px); }
.tb-strip__text { margin: 0; font-family: var(--tb-font-title); font-weight: 400; font-size: clamp(24px, 2.3vw, 28px); line-height: 1.2; letter-spacing: -.01em; }
.tb-section--light .tb-strip__link:hover { color: var(--tb-world-text, var(--tb-teal-3)); }
.tb-strip__list { list-style: none; margin-top: 0; margin-bottom: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.tb-strip__media { position: relative; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(160deg, var(--tb-blue-2), var(--tb-blue)); }
.tb-strip__image { position: absolute; left: 0; top: -20px; display: block; width: 100%; height: calc(100% + 40px); object-fit: cover; will-change: transform; }
@media (max-width: 860px) {
  .tb-strip__list { display: flex; width: 100%; padding: 0 4vw; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 4vw; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .tb-strip__list::-webkit-scrollbar { display: none; }
  .tb-strip__item { flex: 0 0 78vw; scroll-snap-align: start; }
}
@media (prefers-reduced-motion: reduce) { .tb-strip__image { will-change: auto; } }

/* method: colonna sinistra fissa, colonna destra che scorre; trattini, etichette e bordo dell'inciso nel colore del Mondo */
.tb-method__layout { display: grid; gap: 48px; }
.tb-method__title { margin-bottom: 28px; }
.tb-method__side > :last-child { margin-bottom: 0; }
.tb-method__main { display: grid; gap: 64px; }
.tb-method__subtitle { margin: 0 0 20px; font-family: var(--tb-font-title); font-weight: 400; font-size: 24px; line-height: 1.2; letter-spacing: -.005em; }
.tb-method__text { margin: 0; max-width: 60ch; font-size: var(--tb-text); line-height: var(--tb-text-lh); color: rgba(255,255,255,.8); }
.tb-method__text + .tb-method__text { margin-top: 1.1em; }
.tb-method__text strong { font-weight: 500; color: var(--tb-white); }
.tb-method__list { list-style: none; margin: 0; padding: 0; }
.tb-method__text + .tb-method__list { margin-top: 20px; }
.tb-method__item { position: relative; margin: 0; padding-left: 36px; max-width: 60ch; font-size: var(--tb-text); line-height: var(--tb-text-lh); color: rgba(255,255,255,.8); }
.tb-method__item + .tb-method__item { margin-top: .75em; }
.tb-method__item::before { content: ""; position: absolute; left: 0; top: .85em; width: 18px; height: 2px; background: var(--tb-world-light, var(--tb-teal-2)); }
.tb-method__pills { list-style: none; margin: 24px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 12px; }
.tb-method__pill { margin: 0; padding: 9px 20px; border: 1px solid var(--tb-world-light, var(--tb-teal-2)); font-size: 13px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--tb-white); }
.tb-method__inset { padding: 8px 0 8px clamp(24px, 3vw, 40px); border-left: 3px solid var(--tb-world-light, var(--tb-teal-2)); }
.tb-method__inset-title { margin: 0 0 28px; max-width: 26ch; font-family: var(--tb-font-title); font-weight: 400; font-size: clamp(24px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -.01em; }
.tb-method__inset-cols { display: grid; gap: 20px 40px; }
.tb-method__inset-cols .tb-method__text { margin: 0; }
.tb-method__outro { margin: 32px 0 0; max-width: 60ch; font-size: var(--tb-text); font-weight: 500; line-height: var(--tb-text-lh); color: var(--tb-white); }
/* su fondo chiaro (tone: light, es. Wellness e Hospitality): testi in inchiostro, segni e bordi nel colore testo del Mondo */
.tb-method.tb-section--light .tb-method__text, .tb-method.tb-section--light .tb-method__item { color: var(--tb-ink-2); }
.tb-method.tb-section--light .tb-method__text strong, .tb-method.tb-section--light .tb-method__outro, .tb-method.tb-section--light .tb-method__pill { color: var(--tb-ink); }
.tb-method.tb-section--light .tb-method__item::before { background: var(--tb-world-text, var(--tb-teal-4)); }
.tb-method.tb-section--light .tb-method__pill, .tb-method.tb-section--light .tb-method__inset { border-color: var(--tb-world-text, var(--tb-teal-4)); }
@media (min-width: 640px) { .tb-method__inset-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) {
  .tb-method__layout { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); column-gap: clamp(56px, 7vw, 112px); align-items: start; }
  /* sotto l'header fisso: la colonna resta ferma mentre il resto scorre */
  .tb-method__side { position: sticky; top: calc(var(--tb-header-h) + 32px); }
}

/* cases */
.tb-cases__head { margin-bottom: clamp(40px, 5vw, 72px); }
.tb-cases__heading { margin-bottom: 24px; }
.tb-cases__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 6vw, 88px) 56px; }
.tb-cases__card { display: flex; flex-direction: column; }
.tb-cases__media { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 28px; background: linear-gradient(160deg, var(--tb-blue-2), var(--tb-blue)); }
.tb-cases__image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.tb-cases__title { margin: 0; font-family: var(--tb-font-title); font-weight: 400; font-size: clamp(24px, 2.4vw, 34px); line-height: 1.1; letter-spacing: -.01em; }
.tb-cases__place { margin: 8px 0 18px; font-size: 13px; font-weight: 500; color: color-mix(in srgb, var(--tb-world-light, var(--tb-teal-2)) 74%, #fff); }
.tb-section--light .tb-cases__place { color: var(--tb-world-text, var(--tb-teal-4)); }
.tb-cases__text { margin: 0; font-size: var(--tb-text); line-height: var(--tb-text-lh); max-width: 46ch; color: rgba(255,255,255,.8); }
.tb-section--light .tb-cases__text { color: var(--tb-ink-2); }
.tb-cases__credits { list-style: none; margin: 20px 0 0; padding: 0; font-size: 14px; line-height: 1.55; color: rgba(255,255,255,.7); }
.tb-section--light .tb-cases__credits { color: var(--tb-ink-2); }
.tb-cases__credit + .tb-cases__credit { margin-top: 4px; }
.tb-cases__title + .tb-cases__text { margin-top: 14px; } /* scheda senza luogo: il testo non si attacca al titolo */
.tb-cases__link { display: inline-block; align-self: flex-start; margin-top: auto; padding-top: 20px; }

.tb-cases__outro { margin-top: 56px; }
@media (max-width: 860px) {
  .tb-cases__list { grid-template-columns: 1fr; }
}

/* callout */
.tb-callout__text { margin: 0; font-family: var(--tb-font-title); font-weight: 400; font-size: clamp(28px, 3.6vw, 52px); line-height: 1.15; letter-spacing: -.01em; max-width: 24ch; }
.tb-callout__title { margin-bottom: 20px; }
.tb-callout__title + .tb-callout__text { font-family: var(--tb-font); font-weight: 300; font-size: var(--tb-text); line-height: var(--tb-text-lh); max-width: 60ch; letter-spacing: 0; }
.tb-callout__body { margin-top: 20px; }
/* accent (rev. 29/10: "il turchese pieno non piace, sfumarlo"): bianco a sinistra, dove sta il testo (scuro), che sfuma nell'azzurro a destra,
   con una luce turchese chiara in basso a destra e il bianco che entra dall'alto. */
.tb-callout--accent { color: var(--tb-blue); }
.tb-callout--accent.tb-bg--teal {
  --bg-from: var(--tb-white); --bg-to: color-mix(in srgb, var(--tb-sky-2) 70%, var(--tb-teal-2)); --bg-angle: 105deg;
  --bg-g1: var(--tb-teal); --bg-k1: 35; --bg-x1: 85%; --bg-y1: 90%; --bg-r1: min(1200px, 90vw) min(820px, 110vw);
  --bg-g2: var(--tb-white); --bg-k2: 75; --bg-x2: 20%; --bg-y2: 10%; --bg-r2: min(700px, 55vw) min(460px, 55vw);
  --bg-g3: var(--tb-sky-2); --bg-k3: 0;
  --bg-grain: .03;
}
/* la luce si muove allo scroll (app.js, accentLight): GSAP scrive --bg-x1/-y1/-k1/-x2/-k2 sulla sezione. Senza JS o con "riduci movimento" resta ferma qui. */
/* nelle pagine di un Mondo il callout finale e' chiuso in alto da un filo nel colore del Mondo */
[data-tb-world] .tb-callout--accent { border-top: 4px solid var(--tb-world-light); }
.tb-callout--accent .tb-kicker { color: var(--tb-teal-4); }
.tb-callout--accent .tb-cta { --tb-cta-line: var(--tb-teal-3); }
.tb-callout--accent .tb-prose, .tb-callout--accent .tb-prose strong, .tb-callout--accent .tb-prose em { color: var(--tb-blue); }
.tb-callout--accent .tb-prose li::marker { color: var(--tb-teal-4); }

/* appear: comparsa leggera all'ingresso nel viewport (classi messe dal JS; senza JS tutto è visibile) */
.tb-appear { opacity: 0; transform: translateY(14px); transition: opacity .8s ease, transform .8s ease; }
.tb-appear--in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .tb-appear { opacity: 1; transform: none; transition: none; }
}

/* ---------- footer ---------- */
/* stessa posizione e stesso box di quando stava in fondo all'ultima sezione: lo spazio sotto
   (il padding inferiore di sezione, che la sezione "dialogo" azzera) è un margine, fuori dal box */
.tb-footer { --tb-footer-pad: 96px; padding: var(--tb-footer-pad) 0 calc(var(--tb-footer-pad) + env(safe-area-inset-bottom, 0px) + var(--tb-section-pad)); font-size: 13px; color: rgba(255,255,255,.66); }
@media (max-width: 860px) { .tb-footer { --tb-footer-pad: 64px; } }
.tb-footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 12px 32px; }
.tb-footer__text { margin: 0; }
.tb-footer__social { display: flex; gap: 16px; margin-left: auto; }
.tb-footer__social-link { display: inline-flex; color: inherit; opacity: .8; transition: opacity .3s, color .3s; }
.tb-footer__social-link:hover, .tb-footer__social-link:focus-visible { opacity: 1; color: var(--tb-teal-2); }
.tb-footer__links { display: flex; gap: 24px; }
.tb-footer__links a:hover, .tb-footer__links a:focus-visible { color: var(--tb-white); }
.tb-footer--divider { border-top: 1px solid rgba(255,255,255,.35); }
.tb-footer--compact { padding-bottom: calc(var(--tb-footer-pad) + env(safe-area-inset-bottom, 0px)); }

/* ---------- pensieri (blog): elenco e articolo ---------- */
.tb-posts__head { margin-bottom: clamp(32px, 4vw, 56px); }
.tb-posts__title { margin-bottom: 0; }
.tb-posts__filter { display: flex; flex-wrap: wrap; gap: 10px 12px; margin-bottom: clamp(40px, 5vw, 64px); }
.tb-posts__chip { padding: 10px 18px; border: 1px solid rgba(16,35,63,.28); font-size: 14px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; transition: background .3s, color .3s, border-color .3s; }
.tb-section--light .tb-posts__chip:hover, .tb-section--light .tb-posts__chip:focus-visible { border-color: var(--tb-teal-4); color: var(--tb-teal-3); }
.tb-section--light .tb-posts__chip--current { background: var(--tb-blue); border-color: var(--tb-blue); color: var(--tb-white); }
.tb-posts__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 40px); }
@media (max-width: 1023px) { .tb-posts__list { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 639px) { .tb-posts__list { grid-template-columns: 1fr; } }
.tb-post-card { position: relative; display: flex; flex-direction: column; height: 100%; }
.tb-post-card--text { padding-top: 28px; border-top: 1px solid rgba(16,35,63,.28); }
.tb-post-card__media { aspect-ratio: 4 / 3; overflow: hidden; margin-bottom: 24px; background: linear-gradient(160deg, var(--tb-blue-2), var(--tb-blue)); }
.tb-post-card__image { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .8s cubic-bezier(.65, 0, .35, 1); }
.tb-post-card:hover .tb-post-card__image { transform: scale(1.04); }
.tb-post-card__meta { margin: 0 0 12px; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--tb-teal-4); }
.tb-post-card__rubrica::before { content: "/ "; }
/* numero progressivo dei Pensieri (rev13: niente date): in Lora, dentro l'occhiello della scheda e del page-hero, senza maiuscole ne' spaziatura */
.tb-num { margin-right: .9em; font-family: var(--tb-font-title); font-size: 1.2em; font-weight: 400; letter-spacing: 0; text-transform: none; font-variant-numeric: lining-nums; }
.tb-post-card__title { margin: 0 0 14px; font-family: var(--tb-font-title); font-weight: 400; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -.01em; }
.tb-post-card__link::after { content: ""; position: absolute; inset: 0; }
.tb-section--light .tb-post-card__link:hover { color: var(--tb-teal-3); }
.tb-post-card:has(.tb-post-card__link:focus-visible) { outline: 2px solid var(--tb-teal-4); outline-offset: 8px; }
.tb-post-card__link:focus-visible { outline: none; }
.tb-post-card__excerpt { margin: 0; font-size: var(--tb-text); line-height: var(--tb-text-lh); color: var(--tb-ink-2); }
.tb-post-card__date { margin: auto 0 0; padding-top: 20px; font-size: 13px; letter-spacing: .04em; color: var(--tb-ink-2); }
.tb-posts__pager { margin-top: 48px; display: flex; flex-wrap: wrap; gap: 12px; font-size: 15px; letter-spacing: .06em; }
.tb-posts__pager .page-numbers { padding: 6px 12px; border: 1px solid rgba(16,35,63,.3); }
.tb-posts__pager .current { background: var(--tb-blue); color: var(--tb-white); border-color: var(--tb-blue); }
@media (prefers-reduced-motion: reduce) { .tb-post-card__image { transition: none; } .tb-post-card:hover .tb-post-card__image { transform: none; } }
/* box tipografico (Pensieri senza immagini, rev. 29/10): scheda chiara con filo sottile, numero grande, "Leggi" in fondo; si solleva al passaggio */
.tb-post-card--box { padding: clamp(28px, 3vw, 40px); background: color-mix(in srgb, var(--tb-white) 65%, transparent); border: 1px solid color-mix(in srgb, var(--tb-ink) 12%, transparent); border-top: 2px solid var(--tb-teal-4);
  transition: transform .5s cubic-bezier(.2, .7, .2, 1), box-shadow .5s, background-color .5s, border-color .5s; }
.tb-post-card--box:hover, .tb-post-card--box:has(.tb-post-card__link:focus-visible) { transform: translateY(-4px); background: var(--tb-white); border-color: color-mix(in srgb, var(--tb-teal-4) 35%, transparent); border-top-color: var(--tb-teal-4); box-shadow: 0 28px 48px -32px rgba(16,35,63,.45); }
.tb-post-card--box:has(.tb-post-card__link:focus-visible) { outline-offset: 4px; }
.tb-post-card__box-num { margin: 0 0 clamp(28px, 3vw, 40px); font-family: var(--tb-font-title); font-weight: 400; font-size: clamp(56px, 5vw, 76px); line-height: .9; letter-spacing: -.02em; color: color-mix(in srgb, var(--tb-teal-4) 55%, transparent); transition: color .5s; }
.tb-post-card--box:hover .tb-post-card__box-num { color: var(--tb-teal-4); }
.tb-post-card__more { margin: auto 0 0; padding-top: 28px; font-size: 13px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--tb-teal-4); }
.tb-post-card__more::after { content: "→"; display: inline-block; margin-left: .5em; transition: transform .4s; }
.tb-post-card--box:hover .tb-post-card__more::after { transform: translateX(6px); }
@media (prefers-reduced-motion: reduce) { .tb-post-card--box, .tb-post-card--box:hover { transition: none; transform: none; } .tb-post-card__more::after { transition: none; } }

.tb-article__figure { margin: 0 0 clamp(40px, 5vw, 72px); }
.tb-article__image { display: block; width: 100%; height: auto; max-height: 68vh; object-fit: cover; }
.tb-article__caption { margin-top: 12px; font-size: 13px; letter-spacing: .02em; color: var(--tb-ink-2); }
.tb-article__layout { display: grid; gap: 32px; }
.tb-article__meta { margin: 0; display: grid; gap: 20px; }
.tb-article__meta dt { font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--tb-teal-4); }
.tb-article__meta dd { margin: 6px 0 0; font-size: 16px; line-height: 1.4; color: var(--tb-ink); }
@media (min-width: 1024px) {
  .tb-article__layout { grid-template-columns: minmax(0, 3fr) minmax(0, 9fr); column-gap: clamp(48px, 6vw, 96px); }
  .tb-article__meta { position: sticky; top: calc(var(--tb-header-h) + 32px); align-self: start; }
  /* con locandina (eventi), rev. 29/10: due colonne, a sinistra locandina e sotto i metadati, a destra il testo */
  .tb-article__layout--poster { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto 1fr; grid-template-areas: "poster main" "meta main"; row-gap: 40px; }
  .tb-article__layout--poster .tb-article__meta { grid-area: meta; position: static; }
  .tb-article__layout--poster .tb-article__main { grid-area: main; }
  .tb-article__layout--poster .tb-article__poster { grid-area: poster; align-self: start; }
}
/* locandina: sotto 1024px dopo i metadati, larga al massimo 420px */
.tb-article__poster { margin: 0; max-width: 420px; aspect-ratio: 3 / 4; overflow: hidden; background: var(--tb-grey-2); }
@media (min-width: 1024px) { .tb-article__poster { max-width: none; } }
.tb-article__poster-image { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; }
.tb-article__body { max-width: 680px; }
.tb-article__body h2 { margin: 2em 0 .6em; font-family: var(--tb-font-title); font-weight: 400; font-size: clamp(26px, 2.6vw, 36px); line-height: 1.15; letter-spacing: -.01em; color: var(--tb-ink); }
.tb-article__body h2:first-child { margin-top: 0; }
.tb-article__body blockquote { margin: 2em 0; padding: 0 0 0 28px; border-left: 2px solid var(--tb-teal-4); font-family: var(--tb-font-title); font-size: clamp(22px, 2.2vw, 30px); line-height: 1.3; color: var(--tb-ink); }
.tb-article__body blockquote p { margin: 0; max-width: none; }
/* corsivo vero (Lora italic) solo negli articoli: altrove in .tb-prose <em> resta peso 500 (Montserrat self-hosted non ha il corsivo) */
.tb-article__body em { font-family: var(--tb-font-title); font-style: italic; font-weight: 400; font-size: 1.05em; color: var(--tb-ink); }
.tb-article__body figure { margin: 2em 0; }
.tb-article__body img { display: block; max-width: 100%; height: auto; }
.tb-article__body figcaption { margin-top: 10px; font-size: 13px; color: var(--tb-ink-2); }
.tb-article__back { margin-top: 48px; }

/* ---------- loghi: griglia da 5, in grigio; a colori al passaggio ---------- */
.tb-logos__head { margin-bottom: clamp(32px, 4vw, 56px); }
.tb-logos__title { margin-bottom: 0; }
.tb-logos__head .tb-copy { margin-top: 24px; }
.tb-logos__group { margin: clamp(40px, 5vw, 64px) 0 20px; font-size: 14px; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--tb-world-text, var(--tb-teal-4)); }
.tb-logos__head + .tb-logos__group { margin-top: 0; }
.tb-logos__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
@media (min-width: 640px) { .tb-logos__list { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .tb-logos__list { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 24px; } }
.tb-logos__item { display: flex; align-items: center; justify-content: center; min-height: 96px; padding: 12px; border: 1px solid rgba(16,35,63,.12); background: rgba(255,255,255,.55); }
.tb-logos__link { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
/* loghi in un riquadro 48x132 (40x110 da mobile): stesse proporzioni del 80x220 dei file, cosi' i loghi molto larghi non sovrastano gli altri */
.tb-logos__image { display: block; width: auto; height: auto; max-width: min(100%, 110px); max-height: 40px; opacity: .75; filter: grayscale(1); transition: opacity .4s, filter .4s; }
@media (min-width: 640px) { .tb-logos__image { max-width: min(100%, 132px); max-height: 48px; } }
.tb-logos__item:hover .tb-logos__image, .tb-logos__item:focus-within .tb-logos__image { opacity: 1; filter: none; }
.tb-logos__name { font-size: 14px; font-weight: 500; color: var(--tb-ink-2); }
@media (prefers-reduced-motion: reduce) { .tb-logos__image { transition: none; } }

/* ---------- libri: copertine con testo ---------- */
.tb-books__head { margin-bottom: clamp(40px, 5vw, 72px); }
.tb-books__title { margin-bottom: 0; }
.tb-books__head .tb-copy { margin-top: 24px; }
.tb-books__grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: clamp(56px, 7vw, 96px); }
.tb-books__book { display: grid; grid-template-columns: 1fr; gap: 32px; align-items: start; align-content: start; }
@media (min-width: 720px) { .tb-books__book { grid-template-columns: minmax(180px, 3fr) minmax(0, 9fr); gap: clamp(32px, 5vw, 72px); } }
@media (min-width: 1100px) { .tb-books__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(48px, 5vw, 80px); } .tb-books__book { grid-template-columns: 1fr; } }
.tb-books__cover { width: min(100%, 260px); aspect-ratio: 2 / 3; background: var(--tb-blue); box-shadow: 0 30px 60px -30px rgba(16,35,63,.55); }
.tb-books__cover-image { display: block; width: 100%; height: 100%; object-fit: cover; }
.tb-books__cover-fallback { display: flex; align-items: flex-end; height: 100%; padding: 16px; font-size: 13px; color: var(--tb-teal-2); }
.tb-books__book-title { margin: 0 0 8px; font-family: var(--tb-font-title); font-weight: 400; font-size: clamp(26px, 2.6vw, 38px); line-height: 1.1; letter-spacing: -.01em; }
.tb-books__imprint { margin: 0 0 24px; font-size: 14px; font-weight: 500; letter-spacing: .04em; color: var(--tb-world-text, var(--tb-teal-4)); }
.tb-books__text { margin: 0 0 1.1em; max-width: 56ch; font-size: var(--tb-text); line-height: var(--tb-text-lh); color: var(--tb-ink-2); }
.tb-section:not(.tb-section--light) .tb-books__text { color: rgba(255,255,255,.8); }
.tb-books__body .tb-cta { margin-top: 12px; }

/* ---------- footer: colonne di menu e Pensieri recenti ---------- */
.tb-footer__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px 32px; padding-bottom: 48px; margin-bottom: 40px; border-bottom: 1px solid rgba(255,255,255,.18); }
@media (min-width: 1024px) { .tb-footer__grid { grid-template-columns: 2fr 2fr 2fr 4fr; } }
.tb-footer__title { margin: 0 0 18px; font-size: 12px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--tb-teal-2); }
.tb-footer__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.tb-footer__list a { color: rgba(255,255,255,.86); transition: color .3s; }
.tb-footer__list a:hover, .tb-footer__list a:focus-visible { color: var(--tb-white); }
.tb-footer__date { display: block; margin-top: 2px; font-size: 12px; color: rgba(255,255,255,.55); }
@media (max-width: 639px) { .tb-footer__col--posts { grid-column: 1 / -1; } }

/* ---------- Mondo 0: T-Building (turchese del marchio), per la pagina del metodo ---------- */
[data-tb-world="0"] { --tb-world-light: var(--tb-teal); --tb-world-text: var(--tb-teal-4); --tb-world-glow: 52%; }

/* ---------- scheda: etichetta (es. Passato) ---------- */
.tb-post-card__badge { margin-left: 10px; padding: 3px 8px; border: 1px solid currentColor; font-size: 11px; letter-spacing: .1em; }

/* selettore lingua (nel menu, in fondo): nel tema lo genera Polylang, nel prototipo e' statico */
.tb-header__lang { display: flex; gap: 14px; font-size: 12px; letter-spacing: .1em; }
.tb-header__lang a { opacity: .7; transition: opacity .3s; }
.tb-header__lang a:hover, .tb-header__lang a[aria-current] { opacity: 1; }
.tb-header__lang [aria-disabled] { opacity: .4; }
.tb-method__side-text { margin-top: 1.1em; }
.tb-contact__text--next { margin-top: 1.1em; }
.tb-contact__title--big { max-width: 16ch; font-size: clamp(36px, 5vw, 72px); line-height: 1.05; }
.tb-founder__cta { margin-right: 12px; }
.tb-contact--page { padding-top: calc(var(--tb-header-h) + clamp(48px, 8vw, 112px)); }

/* ---------- text con citazione nella colonna destra (text--aside) ---------- */
.tb-text__aside--quote { align-self: stretch; display: flex; align-items: center; }
.tb-text__quote { margin: 0; max-width: 40ch; font-family: var(--tb-font-title); font-weight: 400; font-size: clamp(22px, 2.3vw, 32px); line-height: 1.25; letter-spacing: -.01em; color: var(--tb-teal-2); }
.tb-section--light .tb-text__quote { color: var(--tb-world-text, var(--tb-teal-4)); }
.tb-text__quote p { margin: 0; }
@media (max-width: 860px) { .tb-text__quote { font-size: clamp(22px, 6vw, 28px); } }

/* ---------- callout con immagine a destra ---------- */
.tb-callout--image .tb-callout__inner { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
@media (min-width: 861px) { .tb-callout--image .tb-callout__inner { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(40px, 6vw, 96px); } }
.tb-callout__figure { margin: 0; }
.tb-callout__image { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; box-shadow: 0 30px 60px -30px rgba(0,0,0,.55); }
.tb-callout__figure--portrait { justify-self: center; width: min(100%, 360px); }
.tb-callout__figure--portrait .tb-callout__image { aspect-ratio: 2 / 3; }

/* ---------- rifinitura pre-presentazione ---------- */
/* text: immagine nella colonna destra (4:3); con aside_image_fit 'logo' il logo intero su un riquadro chiaro */
.tb-text__aside:has(.tb-text__figure) { align-self: stretch; display: flex; flex-direction: column; justify-content: center; border-left: 0; padding-left: 0; }
.tb-text__figure { margin: 0; aspect-ratio: 4 / 3; overflow: hidden; background: linear-gradient(160deg, var(--tb-blue-2), var(--tb-blue)); }
.tb-text__image { display: block; width: 100%; height: 100%; object-fit: cover; }
.tb-text__figure--logo { display: flex; align-items: center; justify-content: center; padding: 14%; background: var(--tb-grey-3); }
.tb-text__figure--logo .tb-text__image { height: auto; max-height: 100%; object-fit: contain; }
.tb-text__aside .tb-text__quote + .tb-prose, .tb-text__aside > * + .tb-text__figure { margin-top: 32px; }
@media (max-width: 860px) { .tb-text__aside:has(.tb-text__figure) { border-top: 0; padding-top: 0; } }

/* lead "citazione": frase di Caterina in Lora (max 22ch per riga su desktop), firma sotto in Montserrat piccolo */
.tb-lead__quote { margin: 0; }
.tb-lead--quote .tb-lead__statement { margin: 0; max-width: 22ch; font-family: var(--tb-font-title); font-weight: 400; font-size: clamp(30px, 3.8vw, 54px); line-height: 1.15; letter-spacing: -.015em; }
.tb-lead--quote .tb-lead__statement p { margin: 0; }
.tb-lead__signature { margin-top: clamp(24px, 3vw, 36px); font-size: 14px; font-weight: 500; letter-spacing: .04em; color: var(--tb-teal-2); }
.tb-section--light .tb-lead__signature { color: var(--tb-world-text, var(--tb-teal-4)); }
.tb-lead__quote + .tb-lead__text { margin-top: 48px; }
@media (max-width: 860px) { .tb-lead--quote .tb-lead__statement { max-width: none; } }

/* cases: sottotitolo di gruppo (h3) sopra le schede di quel gruppo */
.tb-cases__group { margin: 0 0 clamp(28px, 3vw, 40px); font-size: 15px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: color-mix(in srgb, var(--tb-world-light, var(--tb-teal-2)) 74%, #fff); }
.tb-section--light .tb-cases__group { color: var(--tb-world-text, var(--tb-teal-4)); }
.tb-cases__list + .tb-cases__group { margin-top: clamp(64px, 8vw, 112px); padding-top: clamp(40px, 5vw, 64px); border-top: 1px solid rgba(255,255,255,.14); }
.tb-section--light .tb-cases__list + .tb-cases__group { border-top-color: rgba(16,35,63,.16); }

/* articolo/evento: frase in evidenza (occhiello + Lora 24px), bottone principale e link secondario */
.tb-article__intro { margin-bottom: 32px; }
.tb-article__intro-label { margin-bottom: 14px; }
/* titolo dell'intervento largo quanto i paragrafi sotto (.tb-article__body, 680px): prima 34ch, piu' stretto */
.tb-article__intro-text { margin: 0; max-width: 680px; font-family: var(--tb-font-title); font-weight: 400; font-size: 24px; line-height: 1.3; letter-spacing: -.005em; color: var(--tb-ink); }
.tb-article__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 36px; margin-top: 48px; }
.tb-article__actions .tb-article__back { margin-top: 0; }
.tb-article__back--link { font-size: 15px; font-weight: 500; color: var(--tb-ink-2); text-decoration: underline; text-underline-offset: 5px; text-decoration-thickness: 1px; }
.tb-article__back--link:hover { color: var(--tb-world-text, var(--tb-teal-4)); }

/* schede: pannello turchese 4:3 col numero (Pensiero senza immagine), locandina 3:4 (evento) */
.tb-post-card__media--num { position: relative; display: flex; align-items: flex-end; padding: 24px 28px; }
.tb-post-card__big-num { position: relative; z-index: 1; font-family: var(--tb-font-title); font-weight: 400; font-size: clamp(72px, 7vw, 112px); line-height: .9; letter-spacing: -.02em; color: var(--tb-blue); }
.tb-post-card__media--portrait { aspect-ratio: 3 / 4; }
.tb-post-card__media--portrait .tb-post-card__image { object-position: 50% 0; } /* la testata della locandina resta intera */

/* ---------- ritocchi pre-freeze (22/10) ---------- */
/* header: filetto verticale tra l'ultima voce e IT/EN, 24px per lato (28px di gap del menu - 4) (sul pannello mobile non serve) */
@media (min-width: 861px) { .tb-header__lang { margin-left: -4px; padding-left: 24px; border-left: 1px solid color-mix(in srgb, currentColor 30%, transparent); } }

/* ancore: lo scroll (app.js, anchors) si ferma sotto l'header; la sezione porte e la hero tengono gia' lo spazio dell'header nella loro testata */
[id] { scroll-margin-top: var(--tb-header-h); }
.tb-hero, .tb-doors { scroll-margin-top: 0; }
.tb-hero__cue[href] { transition: color .3s; }
.tb-hero__cue[href]:hover, .tb-hero__cue[href]:focus-visible { color: var(--tb-white); }
.tb-hero__cue[href]:focus-visible { outline: 2px solid var(--tb-teal-2); outline-offset: 6px; }

/* titoli: righe bilanciate (lo spazio unificatore tra le ultime due parole lo mette tb_title() / tb_nbsp_last() in PHP) */
.tb-title, .tb-reveal__line, .tb-strip__text, .tb-post-card__title, .tb-post-row__title { text-wrap: balance; }

/* lead e text: due layout, mai mischiati. Centrato (tb-lead--editorial / tb-text--editorial) solo senza colonna laterale, immagine, logo e marchio:
   occhiello e titolo (max 820px) centrati, paragrafo a epigrafe centrato 20px/1,6 max 60ch. Con aside o marchio: due colonne allineate a sinistra. */
.tb-lead--editorial .tb-container, .tb-text--editorial .tb-container { text-align: center; }
.tb-lead--editorial .tb-lead__title, .tb-text--editorial .tb-text__title { margin-left: auto; margin-right: auto; max-width: 820px; }
.tb-lead--editorial .tb-lead__statement { margin-left: auto; margin-right: auto; }
.tb-text--editorial .tb-text__title { margin-bottom: 0; }
.tb-lead--editorial .tb-lead__text, .tb-text--editorial .tb-prose p { max-width: 60ch; margin: 28px auto 0; font-size: 20px; line-height: 1.6; }
.tb-lead--editorial .tb-kicker + .tb-lead__text { margin-top: 0; }
.tb-text--editorial .tb-prose { margin-top: 28px; }
.tb-text--editorial .tb-prose > p:first-child { margin-top: 0; }
.tb-text--editorial .tb-prose ul, .tb-text--editorial .tb-prose ol { max-width: 60ch; margin: 28px auto 0; text-align: left; }
.tb-text--editorial .tb-prose li { max-width: none; }

/* Pensieri: apertura dell'archivio (lead seguito dall'elenco) 48px sopra, 96px sotto; l'elenco parte subito */
.tb-lead:has(+ .tb-posts) { padding: 48px 0 96px; }
.tb-lead + .tb-posts { padding-top: 0; }
@media (max-width: 860px) { .tb-lead:has(+ .tb-posts) { padding: 40px 0 64px; } }

/* page-hero con foto: velo leggero (ritratti in bianco e nero): il colore del Mondo al 40% del velo leggero di prima, scuro solo nel terzo inferiore */
.tb-page-hero--veil-light .tb-page-hero__veil { background:
    linear-gradient(to top, rgba(24,38,72,.8) 0%, rgba(24,38,72,.55) 18%, rgba(24,38,72,0) 33.4%),
    linear-gradient(to top right, color-mix(in srgb, var(--tb-world-light, var(--tb-teal)) 13%, transparent) 0%, color-mix(in srgb, var(--tb-world-light, var(--tb-teal)) 7%, transparent) 100%); }

/* strisce di foto: tante colonne quante le foto; verticali ritagliate dall'alto; variante piccola alta 240px */
@media (min-width: 861px) { .tb-strip__list { grid-template-columns: repeat(var(--tb-strip-n, 4), minmax(0, 1fr)); } }
.tb-strip__image--portrait { object-position: 50% 18%; }
.tb-strip--small .tb-strip__media { aspect-ratio: auto; height: 240px; }
.tb-strip__credit { margin-top: 12px; margin-bottom: 0; font-size: 12px; letter-spacing: .04em; color: var(--tb-ink-2); opacity: .8; }
.tb-section:not(.tb-section--light) .tb-strip__credit { color: inherit; opacity: .6; }

/* Eventi: lista a righe (post-list layout rows). Data | titolo, luogo, invito | miniatura 4:3 di 220px (solo se c'e' l'immagine) */
.tb-posts__rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid rgba(16,35,63,.18); }
.tb-post-row { position: relative; display: grid; grid-template-columns: 150px minmax(0, 1fr) 220px; column-gap: clamp(24px, 4vw, 64px); align-items: start; padding: clamp(28px, 3vw, 40px) 0; border-bottom: 1px solid rgba(16,35,63,.18); }
.tb-post-row--past { opacity: .7; }
.tb-post-row__date { margin: 0; display: grid; gap: 10px; }
.tb-post-row__day { font-family: var(--tb-font-title); font-weight: 400; font-size: 48px; line-height: 1; letter-spacing: -.02em; color: var(--tb-ink); }
.tb-post-row__month { font-size: 13px; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; color: var(--tb-teal-4); }
.tb-post-row__title { margin: 0 0 10px; font-family: var(--tb-font-title); font-weight: 400; font-size: 28px; line-height: 1.15; letter-spacing: -.01em; max-width: 30ch; }
.tb-post-row__link::after { content: ""; position: absolute; inset: 0; }
.tb-post-row__link:hover { color: var(--tb-teal-3); }
.tb-post-row__link:focus-visible { outline: none; }
.tb-post-row:has(.tb-post-row__link:focus-visible) { outline: 2px solid var(--tb-teal-4); outline-offset: 4px; }
.tb-post-row__place { margin: 0 0 18px; font-size: 15px; line-height: 1.5; color: var(--tb-ink-2); }
.tb-post-row__cta { position: relative; z-index: 1; display: inline-flex; align-items: center; gap: 8px; font-size: 15px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--tb-teal-4); }
.tb-post-row__cta::after { content: "→"; }
.tb-post-row__cta[href]:hover, .tb-post-row__cta[href]:focus-visible { color: var(--tb-teal-3); }
/* miniatura: riquadro 4:3 con fondo blu-3 al 6%, immagine intera (una locandina verticale si vede tutta, piu' piccola) */
.tb-post-row__media { grid-column: 3; width: 220px; aspect-ratio: 4 / 3; overflow: hidden; background: color-mix(in srgb, var(--tb-blue-3) 6%, transparent); }
.tb-post-row__image { display: block; width: 100%; height: 100%; object-fit: contain; transition: transform .8s cubic-bezier(.65, 0, .35, 1); }
.tb-post-row:hover .tb-post-row__image { transform: scale(1.04); }
@media (max-width: 860px) {
  .tb-post-row { grid-template-columns: minmax(0, 1fr); row-gap: 16px; }
  .tb-post-row__date { display: flex; align-items: baseline; gap: 12px; }
  .tb-post-row__media { grid-column: auto; width: 100%; margin-top: 8px; }
}
@media (prefers-reduced-motion: reduce) { .tb-post-row__image { transition: none; } .tb-post-row:hover .tb-post-row__image { transform: none; } }

/* contatti: marchio in filigrana grande nella colonna sinistra (campo mark), stessa intensita' di tb-section--mark */
.tb-contact--mark .tb-contact__info::after { width: min(100%, 440px); margin-top: clamp(48px, 6vw, 96px); opacity: .06; }
.tb-contact--mark.tb-section--light .tb-contact__info::after { opacity: .04; }
@media (max-width: 860px) { .tb-contact--mark .tb-contact__info::after { display: none; } }

/* contatti senza titolo (pagina Contatti, il titolo sta nel page-hero): il testo come sottotitolo, in Lora 24px, colore pieno */
.tb-contact__text--lead { max-width: 26ch; font-family: var(--tb-font-title); font-weight: 400; font-size: 24px; line-height: 1.35; letter-spacing: -.01em; color: var(--tb-white); }
.tb-contact.tb-section--light .tb-contact__text--lead { color: var(--tb-ink); }

/* griglia con il colore del Mondo per voce (pagina Mondi): filetto, numero e sottotitolo nel colore; link "Scopri" */
.tb-grid__item--world, .tb-section--light .tb-grid__item--world { border-top: 3px solid var(--tb-world-light); }
.tb-section--light .tb-grid__item--world .tb-grid__num, .tb-grid__item-sub { color: var(--tb-world-text, var(--tb-teal-4)); }
.tb-grid__item-sub { margin: -6px 0 16px; font-size: 15px; font-weight: 500; line-height: 1.4; }
.tb-block:not(.tb-section--light) .tb-grid__item-sub { color: var(--tb-world-light, var(--tb-teal-2)); }
.tb-grid__link { display: inline-block; margin-top: 20px; font-size: 15px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; background: linear-gradient(currentColor, currentColor) 0 100% / 0 1px no-repeat; transition: background-size .4s, color .3s; }
.tb-grid__link:hover, .tb-grid__link:focus-visible { background-size: 100% 1px; }

/* ===== giro pagine (22/10): Habitat Evolutivo ===== */
/* marchio a sinistra (mark_side: left): il marchio nella colonna sinistra, il testo nella colonna destra (max 720px). Sotto gli 860px il marchio non c'e' e il testo torna a tutta larghezza. */
@media (min-width: 861px) {
  .tb-section--mark-left.tb-bg::after { right: auto; left: calc((100% - var(--tb-w)) / 2); }
  .tb-section--mark-left .tb-container { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 720px); }
  .tb-section--mark-left .tb-container > * { grid-column: 2; }
}

/* paragrafi piu' larghi da desktop: corpo 68ch, stesso 68ch per l'epigrafe delle fasce centrate */
@media (min-width: 1024px) {
  .tb-prose p, .tb-prose li, .tb-copy--body { max-width: 68ch; }
  .tb-lead--editorial .tb-lead__text, .tb-text--editorial .tb-prose p, .tb-text--editorial .tb-prose ul, .tb-text--editorial .tb-prose ol { max-width: 68ch; }
  .tb-text--editorial .tb-prose li { max-width: none; }
}

/* righe con link (tb/dialog) nelle pagine interne: in chiaro, padding uguale sopra e sotto, titolo da solo quando manca il testo a destra */
.tb-block.tb-dialog { padding-bottom: var(--tb-block-pad); }
@media (min-width: 1024px) { .tb-dialog__head--solo { grid-template-columns: minmax(0, 1fr); } }
.tb-dialog__head--solo .tb-title { margin-bottom: 0; }
.tb-section--light .tb-dialog__list, .tb-section--light .tb-dialog__link { border-color: color-mix(in srgb, var(--tb-ink) 15%, transparent); }
.tb-section--light .tb-dialog__link { color: var(--tb-ink); }
.tb-section--light .tb-dialog__text { color: var(--tb-ink-2); }
.tb-section--light .tb-dialog__arrow { color: var(--tb-teal-4); }
.tb-section--light.tb-dialog li[data-tb-world] .tb-dialog__label, .tb-section--light.tb-dialog li[data-tb-world] .tb-dialog__arrow { color: var(--tb-world-text); }
.tb-section--light .tb-dialog__link:hover, .tb-section--light .tb-dialog__link:focus-visible { color: var(--tb-teal-3); }

/* video di sfondo (campo video di lead e text, tb_video_bg), a destra, sfuma verso sinistra; sotto la grana (::after), sopra la sfumatura (::before). Niente video con riduzione del movimento. */
.tb-video-bg { position: absolute; z-index: -1; top: 0; right: 0; width: min(70%, 1100px); height: 100%; object-fit: cover; opacity: .55; pointer-events: none;
  -webkit-mask-image: linear-gradient(to left, #000 35%, transparent); mask-image: linear-gradient(to left, #000 35%, transparent); }
/* full: tutta la larghezza, quasi pieno; sfuma solo un po' verso sinistra e resta un velo sotto il testo centrato */
.tb-video-bg--full { width: 100%; opacity: .85; -webkit-mask-image: linear-gradient(to left, #000 50%, rgba(0,0,0,.55)); mask-image: linear-gradient(to left, #000 50%, rgba(0,0,0,.55)); }
@media (max-width: 860px) { .tb-video-bg { width: 100%; opacity: .3; -webkit-mask-image: linear-gradient(to top, #000 20%, transparent); mask-image: linear-gradient(to top, #000 20%, transparent); } }
@media (max-width: 860px) { .tb-video-bg--full { opacity: .6; -webkit-mask-image: none; mask-image: none; } }
/* screen: video con le luci su fondo nero (onde dell'Autrice): in fusione screen il nero non si vede e le linee si accendono sul blu della sezione */
.tb-video-bg--screen { width: 100%; opacity: 1; mix-blend-mode: screen; -webkit-mask-image: linear-gradient(to left, #000 45%, rgba(0,0,0,.35)); mask-image: linear-gradient(to left, #000 45%, rgba(0,0,0,.35)); }
@media (max-width: 860px) { .tb-video-bg--screen { opacity: .8; } }
@media (prefers-reduced-motion: reduce) { .tb-video-bg { display: none; } }

/* striscia: la foto deborda di 1px per lato (il riquadro la ritaglia), cosi' sui bordi a mezzo pixel non resta il filetto blu dello sfondo del riquadro */
.tb-strip__image { left: -1px; width: calc(100% + 2px); }

/* frase di chiusura accent (bianco che sfuma nell'azzurro) con il marchio blu, come sulle fasce chiare */
.tb-callout--accent.tb-section--mark.tb-bg::after { background-image: url("../img/logo-mark.svg"); opacity: .06; }

/* lista eventi: la locandina e' un link alla scheda, intera e senza fondo (niente zoom, che tagliava i testi):
   sta nel riquadro con le sue proporzioni, allineata a destra, e al passaggio si solleva con un'ombra */
.tb-post-row__media { position: relative; z-index: 1; display: flex; justify-content: flex-end; align-items: flex-start; overflow: visible; background: none; }
.tb-post-row__image { width: auto; height: auto; max-width: 100%; max-height: 100%; box-shadow: 0 2px 6px rgba(20, 30, 60, .12);
  transition: transform .4s cubic-bezier(.2, .7, .3, 1), box-shadow .4s cubic-bezier(.2, .7, .3, 1); }
.tb-post-row:hover .tb-post-row__image, .tb-post-row__media:focus-visible .tb-post-row__image { transform: translateY(-6px); box-shadow: 0 16px 32px -8px rgba(20, 30, 60, .3); }
@media (max-width: 860px) { .tb-post-row__media { justify-content: flex-start; aspect-ratio: auto; } .tb-post-row__image { max-width: min(100%, 320px); } }
@media (prefers-reduced-motion: reduce) { .tb-post-row:hover .tb-post-row__image { transform: none; } }

/* scheda evento: la locandina intera, con le sue proporzioni (niente riquadro 3:4 che la tagliava, niente fondo grigio) */
.tb-article__poster { aspect-ratio: auto; overflow: visible; background: none; }
.tb-article__poster-image { height: auto; object-fit: contain; box-shadow: 0 2px 6px rgba(20, 30, 60, .12); }

/* =====================================================================================================================
   Rifinitura go-live (giovedi' 12/11/2026, richieste di Roberta e Caterina)
   ===================================================================================================================== */

/* selettore lingua: piu' evidente su desktop (lingua corrente in un riquadro, peso 500); su mobile sta sempre nella barra, accanto all'hamburger
   (la copia tb-header__lang--bar del parziale header), e non piu' in fondo al menu */
.tb-header__lang { gap: 4px; }
.tb-header__lang a { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; height: 30px; padding: 0 8px; border: 1px solid transparent; font-weight: 500; letter-spacing: .1em; opacity: .72; transition: opacity .3s, border-color .3s; }
.tb-header__lang a:hover, .tb-header__lang a:focus-visible { opacity: 1; border-color: color-mix(in srgb, currentColor 30%, transparent); }
.tb-header__lang a[aria-current] { opacity: 1; border-color: color-mix(in srgb, currentColor 60%, transparent); }
@media (min-width: 861px) {
  .tb-header__lang { font-size: 13px; }
  .tb-header__lang--bar { display: none; }
}
@media (max-width: 860px) {
  .tb-header__lang--bar { position: relative; z-index: 2; display: flex; margin: 0 4px 0 auto; font-size: 13px; }
  .tb-header__lang--bar a { min-width: 40px; height: 40px; padding: 0 6px; } /* area di tocco */
  .tb-header__nav .tb-header__lang { display: none; }
}

/* T-Building, "bellezza invisibile": su mobile la citazione sta tra "...e altri no." e "La sua identita'..." (copia --inline, vedi parziale text)
   e la stessa frase in nero nel paragrafo sparisce; la colonna laterale (sotto il testo) non serve piu'. Desktop invariato. */
.tb-text__quote--inline { display: none; }
@media (max-width: 860px) {
  .tb-text__quote--inline { display: block; margin: 0 0 .6em; }
  .tb-text__quote-dup { display: none; }
  .tb-text__aside--inline { display: none; }
}

/* Pensieri: respiro sopra i filtri delle aree (prima l'archivio partiva a filo dell'introduzione) */
.tb-lead + .tb-posts:has(.tb-posts__filter) { padding-top: clamp(32px, 4vw, 56px); }

/* bottoni ed etichette sopra un link esteso a tutta la scheda (riga evento, card Pensiero): non devono intercettare il clic.
   "Dettagli" senza indirizzo e' uno span sopra il link della riga: con z-index 1 il clic sulla scritta non arrivava a nessun link */
.tb-post-row__cta:not([href]), .tb-post-card__big-num, .tb-post-card__more { pointer-events: none; }
.tb-post-row:hover .tb-post-row__cta:not([href]) { color: var(--tb-teal-3); }

/* Mondi (porte), mobile: numero, porta e nome sempre alla stessa distanza e alla stessa altezza in tutti i pannelli.
   Prima il gruppo era centrato in verticale (la porta saliva o scendeva secondo la lunghezza del testo) e il numero restava fisso in alto */
@media (max-width: 860px) and (prefers-reduced-motion: no-preference) {
  .tb-doors__panel { justify-content: flex-start; padding-top: max(24px, calc((100svh - var(--tb-header-h) - 600px) / 2)); }
  .tb-doors__num { position: static; margin: 0 0 20px; line-height: 1; }
  .tb-door { margin-bottom: 32px; }
}

/* Corporate, apertura su mobile: in verticale si vede una striscia della foto; si inquadra la colonna di vetro luminosa intera (al 69% della larghezza) */
@media (max-width: 860px) { main[data-tb-world="4"] .tb-page-hero__image { object-position: 76% 50%; } }

/* pagina Grazie (e page-hero con bottone): il bottone sotto il sottotitolo */
.tb-page-hero__cta { margin-top: clamp(28px, 4vh, 44px); color: var(--tb-white); --tb-cta-line: var(--tb-white); }

/* footer: firma dell'agenzia ("Sito web realizzato da Klorofilla" + foglia). Bianca come le altre righe secondarie del footer
   (colore ereditato da .tb-footer, rgba(255,255,255,.66)), foglia compresa (11/11/2026: prima era verde #76B949) */
.tb-footer__credit { margin-top: 20px; }
.tb-footer__credit-text { display: flex; align-items: center; gap: 6px; margin: 0; font-size: 12px; color: inherit; }
.tb-footer__credit-brand { display: inline-flex; align-items: center; gap: 6px; color: inherit; font-weight: 500; }
.tb-footer__credit-icon { display: block; flex: 0 0 auto; width: 16px; height: 16px; color: inherit; }

/* fluidita' su telefono e tablet: la sfocatura dietro l'header fisso (backdrop-filter) si ridisegna a ogni frame di scroll e su mobile costa molto.
   Sui dispositivi touch niente sfocatura, fascia quasi piena (stessi colori) */
@media (hover: none) and (pointer: coarse) {
  .tb-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: rgba(46,68,128,.97); }
  .tb-header--light { background: rgba(243,244,246,.97); }
  .tb-header--white { background: rgba(255,255,255,.97); }
  .tb-header--deep { background: rgba(24,38,72,.97); }
  .tb-header--hero, .tb-header--menu { background: transparent; }
}