/* Regole di impaginazione del nuovo sito (29/09/2026). Si carica per ultimo, dopo i fogli del
   prototipo e delle pagine, e mette d'accordo i loro rapporti di colonna e i loro padding: prima
   ogni componente aveva i suoi (1fr 1.15fr con il 9%, 1.2fr 1fr con il 12%...) e la seconda
   colonna partiva da 25 punti diversi.

   ORIZZONTALE
   1. Un contenitore solo: il testo parte da --gutter su ogni pagina e a ogni larghezza.
   2. Sul contenitore c'è una griglia a 12 colonne con --gap. Un blocco di testo può partire solo
      da quattro linee: il bordo, il terzo, la metà, i due terzi.
        - due parti alla pari (titolo e contenuto, immagine e testo): la seconda parte dalla metà;
        - titolo largo con un testo di lato: il testo parte dai due terzi;
        - tre elementi in fila: terzi; quattro: quarti (la metà è una di queste linee).
   3. Largo vuol dire tutta la larghezza del contenitore. Al vivo vuol dire da un bordo all'altro
      della finestra, e vale per immagini, fasce di colore e linee di separazione: il testo resta
      comunque sul bordo del contenitore. Niente vie di mezzo.
   4. Dentro una card (fascia colorata, pannello) il testo rientra del padding della card, uguale
      a destra e a sinistra: così la metà della card cade sulla metà della pagina.
   VERTICALE
   5. Fra due sezioni c'è sempre lo stesso spazio, --section sotto l'una e sopra l'altra. Fra
      blocchi fratelli dentro una sezione (le storie dei servizi, i capitoli di un caso) c'è
      --section una volta sola. Nessuna altezza minima che crea vuoti, tranne le hero.
   6. Una fascia colorata ha --band sopra e sotto il testo.
   ECCEZIONI: sono centrati le hero con il vortice (Perché Deep, Grazie) e il titolo dei servizi
   in home, che apre la sezione larga. */

:root {
  --gap: clamp(20px, 2.3vw, 32px);
  --section: clamp(64px, 7.8vw, 112px);
  --band: clamp(56px, 6.25vw, 96px);
  /* Larghezze di colonna: il 100% è quello del contenitore in cui si usano. */
  --half: calc((100% - var(--gap)) / 2);
  --third: calc((100% - 2 * var(--gap)) / 3);
  --two-thirds: calc((100% - 2 * var(--gap)) / 3 * 2 + var(--gap));
  /* Il bordo del contenitore anche dentro un elemento al vivo, oltre i 1760px compresi. */
  --edge: max(var(--gutter), calc((100% - 1760px) / 2 + var(--gutter)));
}

/* 1 e 3. Home: clienti, progetti e recensioni tornano nel contenitore. Il prototipo li spostava
   per lasciare spazio al nastro, che però passa già dietro il contenuto a sfondo pieno. */
.wide-wrap, .portfolio { max-width: 1760px; padding-inline: var(--gutter); }
.portfolio, .reviews { padding-inline: var(--gutter); }
.portfolio > .section-heading, .reviews > .section-heading { padding-inline: 0; }
.clients-heading { max-width: none; padding-right: 0; }
.client-wall { width: 100%; }

/* 3. Home, servizi: le linee delle righe vanno da un bordo all'altro della finestra, il contenuto
   resta nel contenitore. Le disegnano gli pseudo-elementi, così l'effetto al passaggio del mouse
   (padding-left) non sposta le linee; main taglia i pochi pixel della barra di scorrimento. */
main { overflow-x: clip; }
.service-list > a, .service-list > a:first-child { position: relative; border: 0; }
.service-list > a::after, .service-list > a:first-child::before { content: ""; position: absolute; left: calc(50% - 50vw); right: calc(50% - 50vw); bottom: 0; border-bottom: 1px solid var(--line); pointer-events: none; }
.service-list > a:first-child::before { top: 0; bottom: auto; }

/* 5. Spazio fra le sezioni */
.internal .inner-page { --chapter-space: var(--section); --chapter-gap: var(--gap); }
.detail-page { --detail-space: var(--section); }
.service-contact, .internal .service-contact, .detail-page .service-contact { padding-block: var(--section); }
.detail-page .service-demo, .about-page .service-demo { padding-block: var(--section); }
.about-page #clienti { padding-top: var(--section); padding-bottom: var(--section); }
.related-services { padding-block: var(--section); }
.case-chapter, .case-work, .case-closing, .case-result { padding-block: var(--section); }
.portfolio-directory { padding-bottom: var(--section); }
.service-story { padding-block: var(--section) 0; }
.story-contenuti { padding-bottom: var(--section); }
.services, .method, .contact { min-height: 0; }
.services, .projects, .method, .intelligence, .contact { padding-block: var(--section); }
.clients { padding-bottom: var(--section); }
.reviews { padding-block: var(--section); }

/* Home, metodo: i tre punti (esperienza senior, prove, squadra su misura) sotto il testo. */
.method-points { margin: 0 0 28px; }
.method-points > div { padding: 18px 0; border-top: 1px solid var(--line); }
.method-points > div:last-child { border-bottom: 1px solid var(--line); }
.method-points dt { font: 600 clamp(18px, 1.5vw, 22px)/1.3 Montserrat, sans-serif; letter-spacing: -.02em; color: var(--fg); }
.method-points dd { margin: 6px 0 0; font-size: 16px; line-height: 1.6; color: #c4c0c1; }
.method .method-copy > p { max-width: none; }
.method .method-copy h2 { font-size: clamp(40px, 4.3vw, 64px); }

/* 6. Fasce colorate: testo sul bordo del contenitore */
.detail-page .service-quote { padding: var(--band) var(--edge); }
.detail-page .service-quote blockquote { max-width: var(--two-thirds); }

/* 2. Colonne */
@media (min-width: 761px) {
  /* titolo largo, testo di lato ai due terzi */
  .guide-section-heading:not(.detail-page .detail-topics > *, .detail-faq > *, .faq-chapter > *, .split-chapter > *) { display: grid; grid-template-columns: var(--two-thirds) minmax(0, 1fr); column-gap: var(--gap); }
  .guide-section-heading:not(.detail-page .detail-topics > *, .detail-faq > *, .faq-chapter > *, .split-chapter > *) > p { max-width: none; }
  .about-page #clienti .guide-section-heading { grid-template-columns: var(--two-thirds) minmax(0, 1fr); column-gap: var(--gap); }
  .detail-page .detail-works .guide-section-heading { column-gap: var(--gap); }
  /* Home, clienti: il blocco parte dal terzo, a sinistra c'è il simbolo dell'«1» (ribbon.js, posa
     2). La frase sta alla metà del blocco, che cade sui due terzi della pagina. */
  .clients > .clients-heading, .clients > .client-wall { margin-left: calc(var(--third) + var(--gap)); width: auto; }
  .clients-heading { display: grid; grid-template-columns: var(--half) minmax(0, 1fr); column-gap: var(--gap); align-items: end; }
  .internal .service-contact, .detail-page .service-contact { grid-template-columns: var(--two-thirds) minmax(0, 1fr); column-gap: var(--gap); }
  .contact-copy { width: var(--two-thirds); }

  /* elenchi con il titolo sopra: partono dal terzo, voce e descrizione si dividono ai due terzi */
  .guide-topics { margin-left: calc(var(--third) + var(--gap)); }
  .guide-topics > div { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--gap); }
  .about-page #metodo .guide-topics { column-gap: var(--gap); max-width: none; }

  /* due parti alla pari: la seconda dalla metà */
  .intelligence .section-heading { display: grid; grid-template-columns: var(--half) minmax(0, 1fr); column-gap: var(--gap); }
  .method-copy { width: var(--half); max-width: none; }
  .project-grid, .review-pair, .review-feature,
  .detail-page .detail-topics, .detail-page .detail-faq, .related-services,
  .about-page .team-chapter, .branding-page .split-chapter, .branding-page .faq-chapter,
  .case-brief, .case-chapter, .case-work, .case-closing, .case-result, .case-next,
  .service-works, .reviews-grid, .contact-inline .contact-shell,
  .detail-page .service-demo > div, .about-page .service-demo > div,
  .service-proof, .detail-proof, .branding-page .service-proof {
    grid-template-columns: var(--half) minmax(0, 1fr); column-gap: var(--gap);
  }
  .directory-row, .about-page #clienti .directory-row { grid-template-columns: var(--half) minmax(0, 1fr) 28px; column-gap: var(--gap); }

  /* immagine su due terzi, testo su un terzo (e viceversa) */
  .story-composition, .story-pubblicita .story-composition { grid-template-columns: var(--two-thirds) minmax(0, 1fr); column-gap: var(--gap); }
  .story-branding .story-composition, .story-ufficio-stampa .story-composition { grid-template-columns: minmax(0, 1fr) var(--two-thirds); column-gap: var(--gap); }

  /* griglie a 12, a 3 e a 4: stesso gap, così le linee coincidono */
  .detail-works .service-works, .branding-page .service-works, .service-works.service-works-pairs,
  .case-gallery, .case-gallery.is-filtered, .detail-page .service-sites,
  .archive-grid, .mag-layout, .reading-routes, .article-related > div, .magazine-page .front-aside,
  .detail-web .detail-intro figure { column-gap: var(--gap); }
  .detail-works .service-works, .branding-page .service-works { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .resource-list { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--gap); }

  /* Home, servizi: sezione larga, per alternare con le sezioni a metà. L'elenco prende tutto il
     contenitore: il nome sulla prima metà, la frase dalla metà, la freccia sul bordo destro. */
  .services-intro { max-width: 820px; margin-inline: auto; text-align: center; }
  .service-list { width: 100%; margin-top: var(--section); }
  .service-list > a { grid-template-columns: var(--half) minmax(0, 1fr) auto; column-gap: var(--gap); padding-block: clamp(22px, 2.2vw, 32px); }
  .service-list span { font-size: clamp(28px, 3.1vw, 48px); }
  .service-list small { grid-column: 2; grid-row: 1; font-size: clamp(15px, 1.25vw, 18px); }
  .service-list .arrow { grid-column: 3; grid-row: 1; }
  .service-list span, .service-list small { text-shadow: 0 0 18px var(--bg), 0 0 6px var(--bg); } /* leggibili sopra la scena */

  /* titolo di un caso con il sottotitolo di lato */
  .case-title { display: grid; grid-template-columns: var(--two-thirds) minmax(0, 1fr); column-gap: var(--gap); align-items: end; }
  /* Contatti: le due immagini sotto il modulo si dividono a metà */
  .contact-page .contact-art .hero-art { max-width: none; margin-inline: 0; grid-template-columns: var(--half) minmax(0, 1fr); column-gap: var(--gap); }

  /* Rilasci: il mese nel primo terzo, le voci dal terzo come l'elenco sopra. Il registro è un
     richtext piatto (h2, h3, p): ogni h2 sta sulla riga della prima voce del suo mese. */
  .cl-log { max-width: none; margin-inline: 0; display: grid; grid-template-columns: var(--third) minmax(0, 1fr); column-gap: var(--gap); align-items: start; }
  .cl-log > * { grid-column: 2; max-width: 760px; }
  .cl-log > h2 { grid-column: 1; }
  .cl-log > h2 + h3 { margin-top: 80px; padding-top: 30px; border-top: 1px solid var(--line); }
  .cl-log > h2:first-child + h3 { margin-top: 0; }
}

@media (min-width: 1101px) {
  .guide-feature, .magazine-page .lead-story, .blog-featured, .article-cover-grid, .lp-card {
    grid-template-columns: var(--half) minmax(0, 1fr); column-gap: var(--gap);
  }
  .front-page { grid-template-columns: var(--two-thirds) minmax(0, 1fr); column-gap: var(--gap); }
  .site-footer-main { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--gap); }
}

/* 7. RUOLI TIPOGRAFICI (30/09/2026). I fogli del prototipo scrivevano un corpo per componente e
   uno per ogni breakpoint: lo stesso titolo di sezione usciva a 46, 58, 60, 65 o 86 px secondo la
   pagina. Qui ogni ruolo prende il suo token da typography.css, e siccome i token sono clamp non
   servono media query. Il foglio si carica per ultimo; ogni gruppo ripete dentro :is() i selettori
   dei fogli di pagina, così ne eguaglia la specificità e vince per ordine.
   Fuori dai ruoli, e voluti: il titolo e il testo dell'hero della home e di Perché Deep (vortice),
   i numeri delle metriche (case-metric, proof-ratings, metric-topics), le citazioni in Montserrat,
   il modulo contatti compatto, l'elenco servizi della home, i titoli delle card dei casi.
   Le pagine riprogettate con un foglio loro (deepcms-v3, intelligence-v3) restano fuori: il
   prefisso :root:not(:has(...)) le esclude, senza nesting CSS per i browser meno recenti. */
:root:not(:has(link[href*="deepcms-v3.css"], link[href*="intelligence-v3.css"])) body :is(.inner-copy h1, .detail-hero h1, .case-title h1, .editorial h1):not(.vortex *) {
  font-size: var(--t-display); line-height: var(--lh-display);
}
:root:not(:has(link[href*="deepcms-v3.css"], link[href*="intelligence-v3.css"])) body :is(.internal .service-contact h2, .contact h2, .services-intro h2, .method h2, .method .method-copy h2,
           .intelligence h2, .projects .section-heading h2, .reviews .section-heading h2, .reviews h2,
           .internal .story-heading h2) {
  font-size: var(--t-h2-xl); line-height: var(--lh-h2-xl);
}
:root:not(:has(link[href*="deepcms-v3.css"], link[href*="intelligence-v3.css"])) body .about-page #metodo > * > h2, :root:not(:has(link[href*="deepcms-v3.css"], link[href*="intelligence-v3.css"])) body .about-page #metodo .guide-section-heading h2 { font-size: var(--t-h2-xl); line-height: var(--lh-h2-xl); }
:root:not(:has(link[href*="deepcms-v3.css"], link[href*="intelligence-v3.css"])) body :is(.guide-section-heading > h2, .internal .guide-section-heading > h2, .rich-dark h2,
           .case-chapter h2, .case-work h2, .case-closing h2, .service-proof h2, .branding-page .service-proof h2,
           .service-demo h2, .internal .service-demo > div > h2, .cl-log h2, .reading-routes h2, .intro-wall h2,
           .contact-page .contact-inline .contact-intro h2) {
  font-size: var(--t-h2); line-height: var(--lh-h2);
}
:root:not(:has(link[href*="deepcms-v3.css"], link[href*="intelligence-v3.css"])) body :is(.guide-topics dt, .detail-topics dt, .branding-page .split-chapter dt, .about-page .team-chapter dt,
           .case-work dt, .case-chapter .case-text h3, .rich-dark h3, .cl-log h3, .editorial h3, .reading-body h3,
           .directory-row h3, .proof-block .directory-row h3, .method-points dt, .faq-answer summary, .detail-faq summary,
           .detail-works .service-work-name, .service-work-name, .branding-page .service-work-name):not(.metric-topics *) {
  font-size: var(--t-h3); line-height: var(--lh-h3);
}
:root:not(:has(link[href*="deepcms-v3.css"], link[href*="intelligence-v3.css"])) body .about-page #metodo dt { font-size: var(--t-h3); line-height: var(--lh-h3); }
:root:not(:has(link[href*="deepcms-v3.css"], link[href*="intelligence-v3.css"])) body :is(.inner-copy .inner-lead, .detail-hero-copy > p, .guide-section-heading > p, .detail-topics .guide-section-heading > p,
           .internal .service-contact p, .service-contact p, .services-intro p, .method p, .contact p, .case-brief > p,
           .case-brief p, .case-result-copy > p, .intro-wall .wall-copy > p:not(.wall-eyebrow), .contact-intro > p:not(.contact-place, .contact-note),
           .internal .story-copy > p:not(.story-scope)):not(.vortex *) {
  font-size: var(--t-lead); line-height: var(--lh-lead);
}
:root:not(:has(link[href*="deepcms-v3.css"], link[href*="intelligence-v3.css"])) body :is(.rich-dark, .rich-dark p, .rich-dark li, .faq-answer p, .case-chapter p, .case-chapter .case-text p,
           .case-chapter .case-text li, .guide-topics dd, .detail-topics dd, .branding-page .split-chapter dd, .case-work dd,
           .service-demo p, .detail-page .service-demo p, .about-page .service-demo > div p, .service-demo .demo-text p,
           .service-proof p, .detail-page .detail-proof p, .review-card blockquote, .cl-log, .about-page #metodo .myth-evidence p,
           .intro-wall .wall-points li):not(.demo-label, .service-label, .case-period, .case-context, .service-note) {
  font-size: var(--t-body); line-height: var(--lh-body);
}
:root:not(:has(link[href*="deepcms-v3.css"], link[href*="intelligence-v3.css"])) body .about-page #metodo dd { font-size: var(--t-body); line-height: var(--lh-body); }
:root:not(:has(link[href*="deepcms-v3.css"], link[href*="intelligence-v3.css"])) body :is(.method-points dd, .directory-row p, .service-work-text, .detail-works .service-work-text, .project > p,
           .product-description p, .clients-heading p, .contact-intro .contact-place, .contact-intro .contact-note, .detail-proof .service-note, .internal .story-copy .story-scope, .demo-points li,
           .service-proof .service-label, .detail-proof .service-label, .text-link, .service-demo .text-link,
           .inner-copy .text-link, .detail-hero .text-link) {
  font-size: var(--t-small); line-height: var(--lh-small);
}
:root:not(:has(link[href*="deepcms-v3.css"], link[href*="intelligence-v3.css"])) body :is(figcaption, .intro-work figcaption, .branding-page .intro-work figcaption, .detail-intro figcaption,
           .service-demo figcaption, .detail-page .service-demo figcaption, .about-page .service-demo figcaption,
           .case-detail-page figcaption, .art-caption, .about-page .team-chapter .art-caption, .product figcaption,
           .case-caption p, .service-demo .demo-label, .internal .hero-page-marker, .page-context, .vortex .page-context,
           .detail-marker, .case-quote figcaption span:last-child):not(.trio-shot figcaption, .review-quote figcaption, .proof-quote figcaption, .review-card figcaption,
               .detail-web .detail-intro > figure > figcaption, .detail-web .detail-intro figcaption, .review-campaign > figcaption) {
  font-size: var(--t-caption); line-height: var(--lh-caption);
}

/* Banner cookie del pacchetto: il suo h2 non prende la scala dei titoli del sito. */
#dcms-cookie .dcms-cookie-title { font-size: 18px !important; line-height: 1.25 !important; letter-spacing: -.01em !important; font-weight: 700 !important; }

/* Titolo dei post: frasi lunghe, non la scala display delle pagine. */
.article-cover h1.post-hero-title { font-size: clamp(32px, 3.6vw, 52px) !important; line-height: 1.12 !important; text-wrap: pretty; }