/* ═══════════════════════════════════════════════════════════════
   ESTRO — CORREZIONI RESPONSIVE (tutto il sito)
   Caricato per ultimo su ogni pagina, dopo gli stili inline: qui
   stanno solo le regole che servono perché nulla venga tagliato o
   esca dallo schermo, a qualsiasi larghezza e zoom del browser.
   Le regole sono per componente, quindi valgono su tutte le pagine
   che lo usano.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1. Le colonne non si allargano oltre lo schermo ────────────
   Di default una colonna di griglia (o un figlio flex) non si
   stringe sotto la sua parola più lunga: con i titoli a 90-150px la
   colonna diventava più larga dello schermo e trascinava fuori
   anche testi e form. Con min-width: 0 la colonna resta larga
   quanto il suo spazio; i titoli li adatta js/responsive.js. */
main :is(section, .container, [class*="__inner"], [class*="__grid"],
         [class*="__header"], [class*="__head"], [class*="__content"],
         [class*="__text"], [class*="__left"], [class*="__right"],
         [class*="-sticky"], [class*="__sticky"]) > * {
  min-width: 0;
}
main img, main video, main iframe { max-width: 100%; }

/* ── 2. Testi lunghi: vanno a capo tra le parole, mai dentro ─────
   Nessuna sillabazione e nessuna parola spezzata: se una parola non
   entra, è il corpo del titolo a ridursi (js/responsive.js). */
main :is(h1, h2, h3, h4, p, li, a, label) {
  overflow-wrap: normal;
  word-break: normal;
  hyphens: manual;
}

/* ── 3. Tablet e smartphone ─────────────────────────────────── */
@media (max-width: 900px) {
  /* Sottotitoli delle timeline: erano forzati su una riga sola e
     uscivano dallo schermo */
  .smm-panel__statement-sub,
  .svc-stat-video__desc--nowrap {
    white-space: normal !important;
  }

  /* "Prendiamoci un caffè" (pagine Servizi): titolo sopra, form
     sotto, a tutta larghezza */
  .svc-caffe .container,
  .svc-caffe .svc-generic-sticky > .container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: clamp(1.5rem, 6vw, 2.5rem) !important;
  }
  .svc-caffe__form {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Timeline a tappe: la barra scorre in orizzontale e non taglia
     più in verticale le etichette delle tappe */
  .svc-tabs__strip {
    flex: 0 0 auto !important;
    height: auto !important;
    min-height: 0 !important;
    overflow-y: visible !important;
    padding-bottom: 0.75rem !important;
  }
  .svc-tabs { min-height: 0 !important; }
}

/* ── 4. Griglie che su smartphone non passavano a una colonna ───
   Influencer: "I talent pronti", statistica con video, nomi delle
   collaborazioni; News: card dei risultati. */
@media (max-width: 900px) {
  .art-results__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}
@media (max-width: 700px) {
  .svc-talent-pronti .container,
  .svc-talent-pronti .svc-generic-sticky > .container {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 1.5rem !important;
  }
  .svc-stat-video__stat {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: 0.5rem !important;
  }
  .svc-collab-grid__items { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .svc-collab-grid__name { white-space: normal !important; font-size: min(17.6px, 4.3vw) !important; }
  .art-results__grid { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ── 5. Case Studies: hero su smartphone ────────────────────────
   Testo e video quadrato affiancati non stanno sotto i 760px: la
   statistica finiva sotto il video. Qui testo sopra e video sotto,
   a tutta larghezza; la hero cresce quanto serve. */
@media (max-width: 760px) {
  html body main > section.cs-hero {
    height: auto !important;
    min-height: 100svh !important;
  }
  html body main > section.cs-hero > .container.cs-hero__inner {
    grid-template-columns: minmax(0, 1fr) !important;
    row-gap: clamp(1.5rem, 6vw, 2.25rem) !important;
    align-items: start !important;
  }
  .cs-hero__reel {
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 520px;
    margin-inline: auto !important;
  }
  .cs-hero__stats { flex-wrap: wrap; row-gap: 1rem; }
}

/* ── 6. Home: i pannelli crescono col contenuto ─────────────────
   About, Amici, FAQ e Contatti erano alti esattamente
   una schermata e ritagliavano: su finestre basse o con lo zoom il
   fondo del contenuto (paragrafi, CTA) veniva tagliato. Ora che
   nessuna di queste sezioni blocca lo scroll, la schermata resta la
   misura minima ma il pannello può crescere. Il Passaparola resta
   escluso: le sue colonne scorrono e prendono l'altezza dal
   pannello, che deve restare di una schermata. */
html body .about-sticky,
html body .amici-sticky,
html body .page-faq__inner,
html body .hc-inner {
  height: auto !important;
  min-height: 100dvh;
}
html body .about-sticky > .container,
html body .about-sticky .about-section__grid {
  height: auto !important;
  min-height: 0 !important;
}
html body .about-sticky > .container {
  min-height: 100dvh !important;
  display: flex !important;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(var(--nav-h) + 1rem) clamp(2rem, 5vh, 3.5rem) !important;
}

/* Passaparola: sotto i 640px di altezza il pannello perdeva
   l'altezza fissa e le colonne che scorrono lo allungavano a
   decine di migliaia di pixel. Resta di una schermata (con un
   minimo), e le colonne scorrono dentro. */
html body .wall-sticky {
  height: max(100dvh, 560px) !important;
  overflow: hidden !important;
}

/* ── 7. Home, Servizi su tablet e smartphone ────────────────────
   Le 10 card restavano su 5 colonne anche a 375px: testi tagliati e
   numeri sovrapposti. Qui 2 colonne (1 sotto i 420px), la scena
   scorre come una sezione normale e, visto che sul touch non c'è
   hover, categoria, titolo e descrizione sono subito visibili; la
   card intera resta il link al servizio. */
@media (max-width: 768px) {
  .ht-pin--svc { height: auto !important; }
  .ht-services {
    position: relative !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
  }
  .svc-inner {
    padding-top: calc(var(--nav-h) + 1.5rem) !important;
    padding-bottom: calc(clamp(86px, 11.5vh, 108px) + 2.5rem) !important;
  }
  .svc-cards-wrap { padding-inline: var(--gutter, 1.5rem) !important; }
  .svc-cards-track {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 0.75rem !important;
  }
  .svc-card {
    height: auto !important;
    min-height: 0 !important;
    border: 1px solid rgba(255,255,255,0.12) !important;
    border-radius: 14px !important;
    align-items: stretch !important;
  }
  .svc-card::before, .svc-card::after { display: none !important; }
  .svc-card__inner {
    transform: none !important;
    padding: 2.6rem 0.95rem 1rem !important;
  }
  .svc-card__num { font-size: 1.6rem !important; top: 0.6rem !important; right: 0.7rem !important; }
  .svc-card__tag { padding-right: 0 !important; }
  .svc-card__title { height: auto !important; max-width: none !important; margin-bottom: 0.4rem !important; }
  .svc-card__desc,
  .svc-fx-real .svc-card__desc {
    opacity: 1 !important;
    height: auto !important;
    font-size: 15px !important;
    line-height: 1.45 !important;
  }
  .svc-card__go { display: none !important; }
}
@media (max-width: 420px) {
  .svc-cards-track { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ── 8. Home, Tips & Tricks su una colonna ──────────────────────
   La card grande restava impostata su due righe della griglia
   desktop e, in colonna singola, si riduceva a 12px. */
@media (max-width: 900px) {
  .tips-grid {
    grid-template-rows: none !important;
    grid-auto-rows: auto !important;
    height: auto !important;
    max-height: none !important;
  }
  .tips-grid .tip-card--feature {
    grid-row: auto !important;
    grid-column: auto !important;
    min-height: clamp(260px, 70vw, 420px) !important;
  }
  .tips-grid .tip-card { min-height: clamp(185px, 50vw, 300px); }
}

/* ── 9. FAQ: il testo sta sempre sopra il video di sfondo ───────
   Su tablet e smartphone il pannello delle domande tornava
   "static": il suo z-index non valeva più e il video nero di
   sfondo (assoluto) gli veniva disegnato sopra, nascondendo titolo
   e domande. */
html body .page-faq__inner {
  position: relative !important;
  z-index: 3;
}

/* ── 10. FAQ: statistiche della hero ────────────────────────────
   Tre numeri a 97px su una riga: su smartphone il terzo usciva
   dallo schermo. Vanno a capo e il corpo scala con la larghezza. */
@media (max-width: 700px) {
  .faq-hero__stat { flex-wrap: wrap !important; row-gap: 1.25rem !important; }
  .faq-hero__stat-num { font-size: min(97.5px, 17vw) !important; }
}

/* ── 11. Influencer, "I settori": griglia su smartphone ─────────
   Sei colonne da 55px con etichette a 11px: i nomi lunghi
   ("Elettronica di consumo") uscivano dallo schermo. */
@media (max-width: 700px) {
  .svc-settori__grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; row-gap: 1.25rem !important; }
  .svc-settori__item span { white-space: normal !important; text-align: center; font-size: 12.5px !important; }
}
@media (max-width: 420px) {
  .svc-settori__grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
}

/* ── FAQ delle pagine servizi: spazi ────────────────────────────
   Qui il pannello è .page-faq__sticky (alto una schermata) e
   .page-faq__inner sta dentro: il minimo di una schermata della
   regola 6 (pensata per la home) lo faceva sbordare, il centraggio
   saltava e il titolo finiva sotto il menu. Ora l'interno è alto
   quanto il contenuto, il blocco è centrato nello spazio libero
   sotto il menu e il titolo non ha più margini negativi. */
html body main > section.page-faq > .page-faq__sticky .page-faq__inner {
  min-height: 0 !important;
  height: auto !important;
}
html body main > section.page-faq > .page-faq__sticky {
  padding-block: calc(5.5rem + clamp(1.5rem, 4vh, 3rem)) clamp(2rem, 5vh, 3.5rem) !important;
  justify-content: center;
  justify-content: safe center;
}
html body main > section.page-faq > .page-faq__sticky .page-faq__title {
  margin-top: 0 !important;
  margin-bottom: clamp(1.5rem, 3.5vh, 2.5rem) !important;
}

/* ══ ARROTONDAMENTI UNIFORMI — riferimento: la nav ═══════════════
   La nav è una pillola (alta 72px, raggio pieno). Tutto il sito
   segue la stessa forma:
   · --r-pill: CTA, pulsanti, tab, etichette, campi su una riga
   · --r-box:  card, pannelli, immagini, video, aree di testo e
               angoli delle sezioni che salgono → 36px, metà
               dell'altezza della nav
   Prima convivevano 6, 8, 9, 10, 12, 14, 16, 18, 20, 22, 28, 32 e
   41px. */
:root { --r-pill: 999px; --r-box: 36px; }

/* CTA, pulsanti, etichette */
html body :is(.btn, .d24-quote__cta, .contact-hub__pill, .cst-tab,
  .lcn-apply__file-label, .cs-view, .cs-tag, .svc-integrazione__pill,
  .svc-talent-pronti__label, button[type="submit"]) {
  border-radius: var(--r-pill) !important;
}

/* card, pannelli, media */
html body :is(.wall__card, .tip-card, .cst-img, .cst-info, .sr-reel__card,
  .svc-tabs__panel, .svc-tabs__media, .wd-deep__p, .wd-shot__ph-block,
  .svc-hero__form-card, .svc-ai-workflow__card, .svc-ai-workflow__icon-wrap,
  .svc-collab-grid__photo, .svc-settori__item, .svc-talent-pronti__visual,
  .imk-intro__photo, .lcn-about__photo, .nw-card, .nw-featured__card,
  .cs-cardv, .cs2-figure, .cs2-sidebar, .cs2-sidebar__thumb, .cs2-cta-block,
  .d24-numbers__col, .d24-result, .d24-visual, .contact-hub__col,
  .faq-item) {
  border-radius: var(--r-box) !important;
}

/* campi dei form: su una riga a pillola, aree di testo a 36px */
html body :is(.svc-caffe__field, .svc-hero__field, .contact-home__field,
  .lcn-apply__input, .lcn-apply__select,
  .hc-form input:not([type="checkbox"]), .hc-form select) {
  border-radius: var(--r-pill) !important;
}
html body :is(textarea.svc-caffe__field, textarea.svc-hero__field,
  textarea.contact-home__field, textarea.lcn-apply__input, .hc-form textarea) {
  border-radius: var(--r-box) !important;
}

/* griglia servizi in homepage: angoli esterni */
html body .svc-card:nth-child(1)  { border-top-left-radius: var(--r-box) !important; }
html body .svc-card:nth-child(5)  { border-top-right-radius: var(--r-box) !important; }
html body .svc-card:nth-child(6)  { border-bottom-left-radius: var(--r-box) !important; }
html body .svc-card:nth-child(10) { border-bottom-right-radius: var(--r-box) !important; }

/* sezioni che salgono: stessi 36px in tutte le pagine (prima 32–41) */
html.js-reveal body .sx-rise {
  border-radius: calc((1 - var(--sxi, 1)) * 36px) calc((1 - var(--sxi, 1)) * 36px) 0 0 !important;
}
/* regole locali più specifiche da allineare */
html body .tips-grid .tip-card { border-radius: var(--r-box) !important; }
html body .sf-social a { border-radius: var(--r-pill) !important; }
/* aree di testo: la regola a pillola dei campi (che contiene
   .hc-form input, più specifica) le prendeva per errore → raggio
   36px e un filo più di spazio interno, così il placeholder non
   finisce dentro la curva degli angoli */
html body textarea:is(.svc-caffe__field, .svc-hero__field, .contact-home__field, .lcn-apply__input).hc-textarea,
html body .hc-form textarea.svc-caffe__field,
html body .hc-form textarea,
html body textarea.svc-caffe__field,
html body textarea.svc-hero__field,
html body textarea.contact-home__field {
  border-radius: var(--r-box) !important;
  padding: 18px 24px !important;
}

/* ══ RITMO VERTICALE — titoli di sezione ═══════════════════════════
   Due sole misure in tutto il sito (prima da 8 a 146px):
   · titolo → sottotitolo / testo introduttivo: --gap-lead 16px
   · titolo → contenuto (griglie, liste, loghi, card): --gap-block 48px
   L'elemento che segue perde il proprio margine alto, così lo
   stacco è solo quello del titolo. */
:root { --gap-lead: 16px; --gap-block: 48px; --gap-items: 24px; }

html body :is(.hc-title, .svc-caffe__title, .smm-panel__big-title,
  .imk-intro__title, .svc-talent-pronti__title, .svc-ai-workflow__title,
  .pc-prod__title) {
  margin-bottom: var(--gap-lead) !important;
}
html body :is(.hc-title, .svc-caffe__title, .smm-panel__big-title,
  .imk-intro__title, .svc-talent-pronti__title, .svc-ai-workflow__title,
  .pc-prod__title) + * {
  margin-top: 0 !important;
}

html body :is(.svc-clients__title, .cs2__title, .tips-section__heading,
  .page-faq__title, .svc-section-title, .svc-tools__title,
  .svc-process__title, .contact-hub__claim) {
  margin-bottom: var(--gap-block) !important;
}
html body :is(.svc-clients__title, .cs2__title, .tips-section__heading,
  .page-faq__title, .svc-section-title, .svc-tools__title,
  .svc-process__title, .contact-hub__claim) + * {
  margin-top: 0 !important;
}

/* ── Ritmo verticale: casi particolari ─────────────────────────────
   :not(#_) alza la specificità quanto un id: alcune regole locali
   (FAQ, Social Ads, Web Design) battevano quelle sopra. */

/* titolo → contenuto 48px dove il titolo ha regole locali più forti */
html body :is(.page-faq__title, .svc-process__title, .wall__title,
  .svc-tools__title, .tips-section__heading):not(#_) {
  margin-bottom: var(--gap-block) !important;
}
html body :is(.page-faq__title, .svc-process__title, .wall__title,
  .svc-tools__title, .tips-section__heading):not(#_) + * {
  margin-top: 0 !important;
}
/* titolo → sottotitolo 16px */
html body .smm-panel__big-title:not(#_) { margin-bottom: var(--gap-lead) !important; }
/* il genitore ha già uno spazio fra gli elementi: il margine del
   titolo completa fino a 16px invece di sommarsi */
html body .svc-caffe__title:not(#_) { margin-bottom: 0 !important; }   /* gap 16 del genitore */
html body .hc-title:not(#_)         { margin-bottom: 8px !important; } /* + gap 8 = 16 */

/* titolo ultimo elemento della sua intestazione: lo stacco lo dà
   l'intestazione, il titolo non aggiunge niente */
html body :is(.svc-clients__title, .cs2__title, .svc-section-title):last-child:not(#_) {
  margin-bottom: 0 !important;
}
html body :has(> :is(.svc-clients__title, .cs2__title):last-child),
html body .wd-deep__aside,
html body .svc-path__head,
html body .svc-integrazione__header {
  margin-bottom: var(--gap-block) !important;
}
/* regole locali ancora più forti (selettori con id nelle pagine) */
html body :has(> :is(.svc-clients__title, .cs2__title):last-child):not(#_):not(#_),
html body .svc-integrazione__header:not(#_):not(#_) {
  margin-bottom: var(--gap-block) !important;
}
html body .smm-panel__big-title:not(#_):not(#_) { margin-bottom: var(--gap-lead) !important; }
html body .svc-integrazione__header > .svc-section-title:not(#_):not(#_) { margin-bottom: 0 !important; }
/* Contatti: l'intestazione aveva un'altezza fissa che distribuiva
   spazio extra fra titolo e sottotitolo */
html body .hc-header:not(#_) { height: auto !important; min-height: 0 !important; justify-content: flex-start !important; }

/* ── Ritmo verticale: spazi fra elementi ripetuti ──────────────────
   Griglie di card ed elementi in serie: un solo gap, 24px (prima
   17, 20, 23, 32, 40, 46 e 61px). I campi dei form: 16px (prima
   11 in home e 14 nelle pagine servizi). Le colonne affiancate
   (testo/immagine) restano come sono. */
html body :is(.cst-grid, .nw-grid, .tips-grid, .svc-collab-grid__items,
  .svc-process__grid, .svc-settori__grid, .svc-ai-workflow__grid,
  .svc-tools__grid, .contact-hub__grid, .wd-deep__lead, .svc-tabs,
  .svc-stat-video__stat):not(#_) {
  gap: var(--gap-items) !important;
}
html body :is(.hc-form, .hc-row, .svc-caffe__form, .svc-hero__form-row):not(#_) {
  gap: 16px !important;
}

/* ── Ritmo verticale: sezioni a scorrimento normale ───────────────
   Stesso spazio sopra e sotto (--section-py) dove era sbilanciato:
   "Un sito cucito su misura" aveva 40px sotto, gli strumenti di
   Google Ads e i talenti di Influencer valori irregolari. */
html body :is(.wd-deep, .svc-tools-section, .svc-talent-pronti):not(#_) {
  padding-block: var(--section-py) !important;
}
/* strumenti Google Ads: lo spazio lo dà la sezione, il blocco interno niente */
html body .svc-tools-section:not(#_) { min-height: 0 !important; }
html body .svc-tools-section > .svc-tools:not(#_) { padding-block: 0 !important; margin-block: 0 !important; }

/* ── Anello della hero: arrotondamento originale ──────────────────
   Con 36px le card larghe ~107px diventavano quasi ovali e
   sembravano più distanziate: tornano ai 12px di prima. */
html body .sr-reel__card:not(#_) { border-radius: 12px !important; }

/* ══ RITMO VERTICALE — contenuto → CTA ═════════════════════════════
   Riferimento: Tips & Tricks in homepage, fra le card e la CTA
   (--cards-cta-gap: clamp(2rem, 3.5vw, 3rem), 48px a 1536px).
   Prima: 8–24px nei form, ~20px nelle tab, 40/118px su Google Ads,
   45px sotto i case studies. Nei form il pulsante sta in un
   contenitore che ha già 16px fra gli elementi: si aggiunge la
   differenza. */
:root { --cta-gap: clamp(2rem, 3.5vw, 3rem); }
html body :is(.cs2__footer, .tips-section__cta, .service-detail__cta-box,
  .service-detail__body + div, .about-section__cta,
  div:has(> .lcn-apply__submit)):not(#_) {
  margin-top: var(--cta-gap) !important;
}
html body .svc-tabs__copy .btn:not(#_) { margin-top: var(--cta-gap) !important; }
html body :is(.hc-form, .svc-caffe__form) > :is(.btn, button[type="submit"]):not(#_) {
  margin-top: calc(var(--cta-gap) - 16px) !important;
}
/* compensazioni: spazi già presenti nei contenitori */
html body .hc-consents:not(#_) { height: auto !important; min-height: 0 !important; }
html body .svc-tabs__copy .btn:not(#_) { margin-top: calc(var(--cta-gap) - 10px) !important; }   /* gap 10 del contenitore */
html body div:has(> .lcn-apply__submit):not(#_) { margin-top: calc(var(--cta-gap) - 14px) !important; } /* gap 14 del form */
/* homepage: la seconda riga dei consensi sborda di 18px sotto il suo
   contenitore; case studies: 28px fra griglia e pulsante vengono
   dalla struttura del contenitore */
html body #contatti .hc-form > .hc-submit:not(#_) { margin-top: calc(var(--cta-gap) - 16px) !important; }
html body .cs2__footer:not(#_):not(#_) { margin-top: var(--cta-gap) !important; }

/* ══ RITMO VERTICALE — stesso spazio sopra e sotto il contenuto ═════
   I pannelli delle sezioni avevano margini interni diversi sopra e
   sotto (Contatti 104/30px: "Invia" quasi attaccato al bordo; Case
   Studies e Tips 101/112; FAQ 92/48). Ora --section-py sopra e
   sotto. */
html body :is(.hc-inner, .cs2-sticky, #tipsStickyEl, #faq .page-faq__inner):not(#_) {
  padding-top: var(--section-py) !important;
  padding-bottom: var(--section-py) !important;
}
/* Case Studies e Tips: la CTA sborda di 28px dal suo contenitore,
   dentro il margine inferiore → il margine sotto la compensa */
/* Contatti in homepage: sopra, il titolo ha ~27px di spazio vuoto
   sopra le lettere (85px visibili); sotto, il footer sale di ~13px
   sulla sezione. Il margine sotto scende di 14px così lo spazio
   visibile sotto "Invia" è uguale a quello sopra il titolo. */
html body #contatti .hc-inner:not(#_):not(#_) { padding-bottom: calc(var(--section-py) - 14px) !important; }

/* ══ FORM GHL — solo il contenitore ═══════════════════════════════
   I form sono di GoHighLevel e il loro aspetto (campi, label,
   pulsante) è nel CSS del form, dentro GHL: da qui non si può
   toccare, sta in un iframe. Vedi css/ghl-form*.css e
   css/ghl-form.README.md.
   La pagina decide solo dove sta il form: larghezza, centratura,
   niente bordo né fondo dell'iframe. L'altezza la imposta lo script
   di GHL (form_embed.js), quindi qui non si fissa. */
html body :is(iframe[src*="leadconnectorhq.com"], iframe[src*="msgsndr.com"],
  iframe[src*="gohighlevel"], iframe[id^="inline-"]):not(#_) {
  display: block !important;
  width: 100% !important;
  max-width: 1240px !important;
  margin-inline: auto !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color-scheme: normal;
}

/* ══ TITOLI — stessa scala della homepage ═════════════════════════
   Le pagine servizi avevano ognuna la propria misura (48, 50, 59,
   60, 65px, pesi 700/800/900). Ora usano le tre misure della
   homepage (definite in tokens.css), per ruolo:
     · titolo lungo / frase (intestazioni di sezione, "Alcuni amici")
                                   → --t-sub, come "Alcuni amici" in home
     · titolo breve (una parola: FAQ, Contatti) → --t-xl, solo in home
       ("Domande Frequenti" è una frase: --t-sub)
     · "Prendiamoci un caffè": sta nella colonna di sinistra accanto al
       form, dove 144px non entrano: usa --t-sub e la colonna cede spazio
   Peso 900, crenatura e altezza di riga uguali a quelli della home.
   Il fit di js/responsive.js interviene solo se una parola non entra. */
html body :is(.svc-section-title, .svc-tools__title,
  .imk-intro__title, .svc-talent-pronti__title, .svc-ai-approccio__title,
  .svc-ai-workflow__title, .svc-process__title, .smm-panel__big-title,
  .pc-prod__title, .svc-caffe__title, .page-faq__title):not(#_):not(#_) {
  font-size: var(--t-sub) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
}

/* "Prendiamoci un caffè": col corpo --t-sub la parola più lunga chiede
   ~8,3em; la colonna di sinistra cresce un po' (il form resta a due
   colonne di campi). Sotto i 769px il blocco è già a colonna singola. */
@media (min-width: 769px) {
  html body .svc-caffe .svc-caffe__inner:not(#_):not(#_) {
    grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  }
}

/* H1 della testata: più grande di ogni altro titolo della pagina
   (--t-h1 = 6,2vw, contro il 5,2vw di --t-sub). Frasi brevi su righe
   fisse: la riga più larga ("Produzione") entra nella colonna di sinistra. */
html body .svc-hero__title:not(#_):not(#_) {
  font-size: var(--t-h1) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
}

/* "Un approccio trasparente": col corpo --t-sub la parola più lunga
   chiede 8,5em, 4px più della colonna di sinistra (50/50). La colonna
   cresce quel tanto che basta; sotto il breakpoint di colonna singola
   la regola non vale. */
@media (min-width: 1025px) {
  html body .svc-ai-approccio__inner:not(#_):not(#_) {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr);
  }
}
@media (max-width: 1024px) {
  html body .svc-ai-approccio__inner:not(#_):not(#_) { grid-template-columns: 1fr; gap: 2.5rem; }
}

/* ══ SPAZI — pannelli delle pagine servizi come in homepage ═══════
   In home i pannelli (Case studies, Tips, FAQ, Contatti) hanno
   --section-py sopra e sotto. Qui erano 72/72, 104/45, 124/45 e
   36/36 a seconda del tipo di sezione. Ora tutti uguali; sopra mai
   sotto la nav che passa sopra il pannello. Il pannello "Come portiamo
   la tua attività" (.svc-path__sticky, 104/45) resta com'è: ha tanto
   contenuto che con 112/112 supera lo schermo; stessa cosa per il pannello
   del form "Prendiamoci un caffè" (36/36, tarato per farci stare il form) e
   per "I sei vantaggi" di Social ADS (tarato a parte). */
html body :is(.svc-generic-sticky, .page-faq__sticky):not(#ads-vantaggi > *):not(.svc-caffe-runway > *):not(#_) {
  /* sopra e sotto lo stesso valore: sotto i 1100px --section-py (8vw)
     scende sotto la distanza dalla nav, e prima il vuoto sotto restava
     più piccolo di quello sopra */
  padding-block: max(var(--section-py), calc(var(--nav-h) + 0.75rem)) !important;
}
/* "I sei vantaggi" (Social ADS): era 117/45 */
html body #ads-vantaggi > .svc-generic-sticky:not(#_) {
  padding-block: calc(var(--nav-h) + 0.75rem) !important;
}

/* ══ "LA TUA IMMAGINE SOCIAL COSTRUITA CON NOI." e analoghe ═══════
   Il pannello delle pagine servizi (.svc-path__sticky) aveva 104px
   sopra e 45px sotto: il vuoto sotto era meno della metà di quello
   sopra. Ora sopra e sotto sono uguali: lo stesso valore (quanto
   serve per stare sotto la nav) e il contenuto centrato nell'altezza
   dello schermo, così su schermi alti lo spazio in più si divide a
   metà e su schermi bassi il pannello cresce senza tagliare. */
html body .svc-path__sticky:not(#_):not(#_) {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  height: auto !important;
  min-height: 100dvh !important;
  padding-block: calc(var(--nav-h) + 0.75rem) !important;
}

/* ══ FORM DELLA HERO — casella messaggio senza scroll ═════════════
   La textarea era alta 58px con scroll interno (overflow auto): con
   zoom e schermi stretti il segnaposto va a capo e compariva la barra.
   Ora ha un'altezza minima di tre righe, niente scroll, e js/
   responsive.js la fa crescere mentre si scrive. */
html body .svc-hero__form textarea:not(#_):not(#_) {
  overflow: hidden !important;
  resize: none !important;
  min-height: 96px !important;
  height: 96px;
  border-radius: 28px !important;
  line-height: 1.4 !important;
}

/* ══ MARGINE DESTRO — pagine servizi ══════════════════════════════
   .container ha il margine solo a sinistra (padding-inline-end: 0 in
   base.css): sotto i 1440px di larghezza testi, titoli e card
   arrivavano a filo del bordo destro dello schermo mentre a sinistra
   c'erano 24–72px. Qui il margine destro è uguale al sinistro. */
html body main:has(> .svc-hero) .container:not(#_):not(#_) {
  padding-inline-end: var(--gutter) !important;
}

/* ══ "I SEI VANTAGGI" — titolo scheda e cifra ═════════════════════
   Con titoli lunghi ("AUMENTIAMO I PROFITTI") la parola più lunga
   toccava la cifra (01–06, in alto a destra) o spingeva la colonna
   fuori dalla scheda. La cifra scala con lo schermo e la riserva del
   titolo è calcolata sulla cifra, non più fissa a 40px. */
html body main > section.svc-process .svc-process__card:not(#_):not(#_)::after {
  font-size: clamp(1.1rem, 1.6vw, 1.75rem) !important;
  right: clamp(0.8rem, 1.4vw, 1.8rem) !important;
}
html body main > section.svc-process .svc-process__card-title:not(#_):not(#_) {
  padding-right: clamp(1.5rem, 2.6vw, 3.4rem) !important;
}

/* ══ MENU (mega-menu) — solo schermi zoomati / stretti ════════════
   Sopra i 1400px il menu è quello di prima, senza regole qui.
   Tra 769 e 1400px (zoom del browser) le tre colonne uguali non
   bastavano: Servizi e Esplora hanno link su una riga e la colonna
   Team, a destra, veniva tagliata. Qui Servizi e Esplora prendono la
   larghezza che serve ai loro link (restano su una riga, come sopra)
   e Team il resto, con margini interni più corti. Sotto i 960px il
   resto non basta per la card Team: resta il menu a due colonne. */
html body .nav__mega-inner:not(#_):not(#_) {
  max-height: calc(100dvh - var(--nav-h) - 16px);
  overflow-y: auto;
}
@media (min-width: 769px) and (max-width: 1400px) {
  html body .nav__mega-inner:not(#_):not(#_) {
    grid-template-columns: max-content max-content minmax(0, 1fr);
  }
  html body .nav__mega-panel:not(#_):not(#_) { padding: 1.25rem !important; min-width: 0; }
  html body .nav__mega-panel--dark:first-child:not(#_):not(#_) { padding-right: 1.25rem !important; }
  html body .nav__mega-links--2col:not(#_):not(#_) { column-gap: 1rem; }
  html body .nav__mega-headline:not(#_):not(#_),
  html body .nav__mega-headline strong:not(#_):not(#_) { white-space: normal !important; font-size: 1.2rem !important; }
  html body .nav__mega-avatars .nav__avatar:not(#_):not(#_) { width: 40px; height: 40px; }
  html body .nav__mega-avatars .nav__avatar + .nav__avatar:not(#_):not(#_) { margin-left: -12px; }
}
@media (min-width: 769px) and (max-width: 960px) {
  html body .nav__mega-inner:not(#_):not(#_) { grid-template-columns: minmax(0, 1fr) max-content; }
  html body .nav__mega-panel--pink:not(#_):not(#_) { display: none; }
}
/* telefono: una colonna, link a capo nella propria colonna */
@media (max-width: 768px) {
  html body .nav__mega-inner:not(#_):not(#_) { grid-template-columns: minmax(0, 1fr); }
  html body .nav__mega-panel:not(#_):not(#_) { min-width: 0; }
  html body .nav__mega-links--2col:not(#_):not(#_) {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 1rem;
  }
  html body .nav__mega-panel--dark:first-child:not(#_):not(#_) { padding-right: 1.5rem; }
  html body .nav__mega-links a:not(#_):not(#_),
  html body .nav__mega-headline:not(#_):not(#_) { white-space: normal !important; }
}

/* "Alcuni amici soddisfatti…": fucsia in tutte le pagine (in Social ADS
   era bianco per una regola locale) */
html body main .svc-clients .svc-clients__title:not(#_):not(#_) { color: var(--primary, #DB005A) !important; }

/* ══ SPAZI DOPPI — "I talent pronti" (Influencer) ═════════════════
   La sezione aveva 112px di padding suo e dentro il pannello ne
   aveva altri 94: 206px sopra il contenuto. E il blocco "Ad
   integrazione possiamo occuparci di" chiudeva con altri 86px sotto
   le pillole, prima del 94 del pannello: ~180px di fondo rosa vuoto.
   Il respiro lo dà il pannello, uno solo. */
html body section.svc-talent-pronti:not(#_):not(#_) { padding-block: 0 !important; }
html body .svc-talent-pronti .svc-integrazione:not(#_):not(#_) { padding-bottom: 0 !important; }

/* ══ "Costruiamo il tuo sito, pezzo per pezzo." (Web design) ══════
   Fra titolo e tab c'erano 14px; nelle altre pagine (Social media,
   Influencer, AI…) sono 48, come ovunque fra titolo e contenuto. */
html body .svc-path__head:not(#_):not(#_) { margin-bottom: var(--gap-block, 48px) !important; }
/* "I talent pronti" ha più contenuto di uno schermo (talent + blocco
   integrazione): non va agganciato a 100dvh, o la parte che non entra
   viene tagliata. Scorre normalmente, con il padding del pannello. */
html body section.svc-talent-pronti:not(#_):not(#_) { height: auto !important; min-height: 0 !important; }
html body section.svc-talent-pronti > .svc-generic-sticky:not(#_):not(#_) {
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* "Estro è il tuo compagno ideale…" (Social ADS): la sezione aveva un
   suo padding (56–76px) più i 94 del pannello: 150–170px sopra e sotto.
   Resta solo quello del pannello, uguale sopra e sotto. */
html body main > section.svc-process:not(#_):not(#_) { padding-block: 0 !important; }
/* Su schermi alti il pannello era agganciato con una corsa di scroll in
   più: sotto le schede restavano 150–250px di fucsia vuoto. Senza
   aggancio: sopra e sotto lo stesso padding, a qualsiasi altezza. */
html body main > section#ads-vantaggi:not(#_):not(#_) { height: auto !important; min-height: 0 !important; }
html body main > section#ads-vantaggi > .svc-generic-sticky:not(#_):not(#_) {
  position: relative !important;
  height: auto !important;
  min-height: 0 !important;
  overflow: visible !important;
}

/* "ALCUNI AMICI SODDISFATTI / CHE CI HANNO DATO FIDUCIA": due righe in
   tutte le pagine e a qualsiasi larghezza (come in homepage). Il corpo
   scala con lo schermo (--t-amici) così ogni riga entra intera. */
html body .svc-clients__title:not(#_):not(#_) {
  font-size: var(--t-amici) !important;
  font-weight: 900 !important;
  letter-spacing: -0.03em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
}

/* ── Case study Dama24: ritmo e titolo contatti ───────────── */
html body .cs2-body:not(#_):not(#_) { padding-block: clamp(3rem, 6vw, 5rem) !important; }
html body .cs2-contact .cs2-contact__title:not(#_):not(#_) {
  font-size: clamp(2rem, 4.4vw, 3.75rem) !important;
  line-height: 1 !important;
  overflow-wrap: normal;
  hyphens: none;
}
html body .cs2-contact .cs2-contact__inner:not(#_):not(#_) {
  padding-block: var(--section-py);
  gap: clamp(2rem, 5vw, 6rem);
}
@media (max-width: 1024px) {
  html body .cs2-contact .cs2-contact__inner:not(#_):not(#_) { grid-template-columns: 1fr; }
}

/* ── Case studies: hero sub leggibile, CTA come nelle altre pagine ── */
html body .cs-hero .cs-hero__sub:not(#_):not(#_) {
  font-size: clamp(1rem, 1.15vw, 1.1rem) !important;
  color: rgba(255,255,255,.65) !important;
  max-width: 44ch;
}
html body .cs-cta .cs-cta__title:not(#_):not(#_) {
  font-size: clamp(2rem, 4.4vw, 3.75rem) !important;
  line-height: 1 !important;
}
html body .cs-cta .cs-cta__inner:not(#_):not(#_) {
  padding-block: var(--section-py);
  gap: clamp(2rem, 5vw, 6rem);
}
@media (max-width: 1024px) {
  html body .cs-cta .cs-cta__inner:not(#_):not(#_) { grid-template-columns: 1fr; }
}

/* ── Arrotondamenti: elementi rimasti fuori dalla regola (case studies, Dama24, servizi) ── */
html body :is(.cs-hero__reel video, .cs-card, .cs-ocard-wrap, .cs-grid-card,
  .smm-panel__visual, .svc-hero__video-wrap, .svc-hero__img-wrap,
  .svc-process__card, .svc-advantages__item, .svc-features__visual,
  .svc-features__placeholder, .svc-content-block__visual, .cs2__tile,
  .svc-magic__cat .svc-magic__placeholder, .svc-tabs__media) {
  border-radius: var(--r-box) !important;
}
html body :is(.svc-hero__img-wrap img, .svc-content-block__visual img) { border-radius: inherit !important; }
html body :is(.cs2-sidebar__search input, .cs2-sidebar__item a, .cst-tab, .cst-stat,
  .cs-trust-tab, .cs-trust-stat, .svc-tabs__tab:focus-visible, .contact-home__submit) {
  border-radius: var(--r-pill) !important;
}
html body :is(.cs-cta, .cs2-contact) :is(.svc-caffe__field, .contact-home__field):not(textarea) {
  border-radius: var(--r-pill) !important;
}
html body :is(.cs-cta, .cs2-contact) textarea { border-radius: var(--r-box) !important; }
html body :is(.cs-trust-img, .cs-trust-info) { border-radius: var(--r-box) !important; }
/* pannelli che salgono nei servizi: 36px come le sezioni */
html body .smm-panel:is(:nth-child(n+2)) { border-radius: var(--r-box) var(--r-box) 0 0 !important; }


/* ── Case study Dama: corpo con lo spazio standard ───────────────
   Era 80px sopra e sotto; ora --section-py come le altre sezioni. */
html body .cs2-body:not(#_) { padding-top: var(--section-py) !important; padding-bottom: var(--section-py) !important; }

/* ══ CASE STUDY DAMA — colonna "altri case studies" con lo zoom ════
   Sotto i 1024px di larghezza (cioè con lo zoom del browser) la
   colonna veniva nascosta. Resta a fianco del testo, più stretta,
   agganciata durante lo scroll; solo sul telefono va sotto. */
@media (min-width: 769px) and (max-width: 1024px) {
  html body .cs2-body__layout:not(#_) {
    grid-template-columns: minmax(0, 1fr) 300px !important;
    gap: clamp(1.5rem, 3vw, 2.5rem) !important;
  }
  html body .cs2-sidebar:not(#_) { display: flex !important; }
}
/* colonna compatta su schermi bassi o stretti: miniatura piccola e
   titolo su tutta la larghezza, così le 5 voci stanno nella
   schermata mentre la colonna è agganciata */
@media (min-width: 769px) and (max-width: 1024px), (min-width: 769px) and (max-height: 1000px) {
  html body .cs2-sidebar:not(#_) { padding: 16px !important; gap: 10px !important; }
  html body .cs2-sidebar__list:not(#_) { gap: 4px !important; }
  html body .cs2-sidebar__item a:not(#_) { padding: 6px !important; gap: 12px !important; align-items: center !important; grid-template-columns: 64px minmax(0, 1fr) !important; }
  html body .cs2-sidebar__thumb:not(#_) { width: 64px !important; height: 48px !important; flex: 0 0 64px !important; }
  html body .cs2-sidebar__title:not(#_) { font-size: 14px !important; line-height: 1.3 !important; }
}
@media (min-width: 769px) and (max-height: 700px) {
  html body .cs2-sidebar__search:not(#_) { display: none !important; }
}
/* rete di sicurezza: mai oltre lo schermo (scorre al suo interno) */
@media (min-width: 769px) {
  html body .cs2-sidebar:not(#_) {
    max-height: calc(100dvh - var(--nav-h) - 40px) !important;
    overflow-y: auto !important;
  }
}
/* hero di Dama: esattamente una schermata. Su schermi bassi o
   zoomati il logo (195px) la allungava oltre lo schermo: il logo si
   adatta allo spazio che resta (max 195px come prima), i testi no. */
html body .d24-hero:not(#_) { height: 100dvh !important; min-height: 0 !important; }
html body .d24-hero__logo:not(#_) {
  height: clamp(70px, calc(100dvh - 450px), 195px) !important;
  width: auto !important;
  max-width: 100% !important;
}
/* logo della hero di Dama: una regola più forte lo allargava a tutta
   la colonna mentre l'altezza si riduceva → deformato. Larghezza
   automatica e proporzioni sempre salve. */
html body .d24-hero__logo:not(#_):not(#_) {
  width: auto !important;
  max-width: 100% !important;
  object-fit: contain !important;
  justify-self: start !important;
  align-self: start !important;
}

/* ── Dama: loghi della colonna dentro un cerchio ─────────────────
   Fondo fucsia appena accennato, logo centrato con margine interno
   (i loghi sono larghi: dentro un cerchio vanno ridotti). */
html body .cs2-sidebar__thumb:not(#_):not(#_) {
  width: 96px !important;
  height: 96px !important;
  flex: 0 0 96px !important;
  border-radius: 50% !important;
  background: rgba(219, 0, 90, 0.07) !important;
  border: 1px solid rgba(219, 0, 90, 0.18) !important;
  overflow: hidden !important;
  display: grid !important;
  place-items: center !important;
}
html body .cs2-sidebar__thumb img:not(#_):not(#_) {
  width: 70% !important;
  height: 70% !important;
  padding: 0 !important;
  object-fit: contain !important;
}
html body .cs2-sidebar__item a:not(#_):not(#_) { grid-template-columns: 96px minmax(0, 1fr) !important; }
@media (min-width: 769px) and (max-width: 1024px), (min-width: 769px) and (max-height: 1000px) {
  html body .cs2-sidebar__thumb:not(#_):not(#_) { width: 56px !important; height: 56px !important; flex: 0 0 56px !important; }
  html body .cs2-sidebar__item a:not(#_):not(#_) { grid-template-columns: 56px minmax(0, 1fr) !important; }
}
@media (min-width: 769px) and (max-height: 600px) {
  html body .cs2-sidebar:not(#_):not(#_) { padding: 12px !important; gap: 8px !important; }
  html body .cs2-sidebar__thumb:not(#_):not(#_) { width: 48px !important; height: 48px !important; flex: 0 0 48px !important; }
  html body .cs2-sidebar__item a:not(#_):not(#_) { grid-template-columns: 48px minmax(0, 1fr) !important; padding: 4px !important; }
}


/* ══ CASE STUDIES — Progetti: solo lo spazio sopra e sotto ══════════
   Testata, scena dell'anello e griglia restano come erano. Lo spazio
   sopra resta quello originale (7rem = 112px, che tiene "I lavori"
   sotto il menu anche con lo zoom) e sotto ha lo stesso valore, come
   le sezioni delle altre pagine. Il pannello cresce con il contenuto:
   con lo zoom non viene più tagliato, la pagina scorre. */
html body main #cs-works > .cs-works__sticky:not(#_):not(#_) {
  height: auto !important;
  min-height: 0 !important;
  padding-top: max(var(--section-py), 7rem) !important;
  padding-bottom: max(var(--section-py), 7rem) !important;
}
/* loghi nei cerchi più grandi (con lo zoom erano troppo piccoli) */
html body .cs2-sidebar__thumb img:not(#_):not(#_) { width: 80% !important; height: 80% !important; }
@media (min-width: 769px) and (max-width: 1024px), (min-width: 769px) and (max-height: 1000px) {
  html body .cs2-sidebar__thumb:not(#_):not(#_):not(#_) { width: 72px !important; height: 72px !important; flex: 0 0 72px !important; }
  html body .cs2-sidebar__item a:not(#_):not(#_):not(#_) { grid-template-columns: 72px minmax(0, 1fr) !important; }
}
@media (min-width: 769px) and (max-height: 600px) {
  html body .cs2-sidebar__thumb:not(#_):not(#_):not(#_) { width: 58px !important; height: 58px !important; flex: 0 0 58px !important; }
  html body .cs2-sidebar__item a:not(#_):not(#_):not(#_) { grid-template-columns: 58px minmax(0, 1fr) !important; }
}
/* la scena dell'anello torna al minimo originale della pagina (540px):
   con 320px le card (alte ~520px a grandezza piena) uscivano dalla
   scena e coprivano testata e scritta "Trascina…". */
html body main #cs-works > .cs-works__sticky .cs-ring-stage:not(#_):not(#_) {
  height: clamp(540px, 56dvh, 640px) !important;
}

/* ══ FAQ e LAVORA CON NOI — hero a tutta schermata ══════════════════
   Una regola generale ("height: auto !important") faceva crescere le
   hero col contenuto: erano più basse dello schermo (si vedeva già la
   sezione dopo) o, con lo zoom, più alte. Ora occupano la schermata. */
html body main > section.lcn-hero:not(#_) {
  height: 100dvh !important;
  min-height: 0 !important;
}
/* FAQ: i tre numeri (60+ / 13 / 24h) a 150px non stavano nella
   colonna destra e uscivano dallo schermo. Si dimensionano sulla
   larghezza della colonna, sempre con il massimo di 150px. */
html body .faq-hero__right:not(#_) { container-type: inline-size; min-width: 0; }
html body .faq-hero__stat:not(#_) { gap: 4cqw !important; flex-wrap: nowrap !important; }
html body .faq-hero__stat-num:not(#_):not(#_) { font-size: min(150px, 14cqw) !important; }
/* Lavora con noi su schermi bassi/zoomati: il blocco (titolo, testo,
   CTA, numeri) non stava nella schermata e saliva sotto il menu.
   Via i margini extra sopra e sotto, titolo un filo più piccolo in
   base all'altezza. */
@media (max-height: 700px) and (min-width: 769px) {
  html body .lcn-hero__top:not(#_) { margin-top: 0 !important; }
  html body .lcn-hero__stats:not(#_) { margin-bottom: 0 !important; }
  html body .lcn-hero__title:not(#_):not(#_) { font-size: min(150px, 26vw, 9vh) !important; }
}
html body main > section.lcn-hero:not(#_):not(#_) { padding-top: max(104px, calc(var(--nav-h) + 1.5rem)) !important; }
@media (max-height: 600px) and (min-width: 769px) {
  html body .lcn-hero__title:not(#_):not(#_):not(#_) { font-size: min(150px, 26vw, 8vh) !important; }
}
@media (max-height: 600px) and (min-width: 769px) {
  html body .lcn-hero__title:not(#_):not(#_) { margin-bottom: 0.5rem !important; }
  html body .lcn-hero__bottom:not(#_):not(#_) { padding-top: 0.5rem !important; }
  html body .lcn-hero__sub:not(#_):not(#_) { margin-bottom: 0.75rem !important; }
  html body .lcn-hero__stats:not(#_):not(#_) { padding-top: 0.75rem !important; }
  html body .lcn-hero__stat-num:not(#_):not(#_) { font-size: min(150px, 26vw, 5.5vh) !important; }
}

/* ── FAQ e Lavora con noi: spazio standard sopra e sotto ─────────── */
html body :is(.faq-body, .lcn-about, .lcn-positions, .lcn-apply):not(#_) {
  padding-top: var(--section-py) !important;
  padding-bottom: var(--section-py) !important;
}
/* FAQ: la colonna delle categorie (agganciata) su schermi bassi o
   zoomati usciva dal fondo. Voci più compatte (stesso corpo 16px). */
@media (min-width: 769px) and (max-height: 700px) {
  html body .faq-nav__list a:not(#_) { padding-top: 3px !important; padding-bottom: 3px !important; line-height: 1.35 !important; }
  html body .faq-nav__label:not(#_) { margin-bottom: 10px !important; }
}
/* Lavora con noi: il titolo della hero (H1) era fermato a 60px da una
   regola generale, quanto i titoli di sezione (H2): nessuna
   gerarchia. Torna la misura della pagina (10.5% dell'altezza, max
   150px → ~90px a 1536×864, come le hero dei servizi). Sotto i 700px
   di altezza valgono le riduzioni qui sopra. */
@media (min-height: 701px) {
  html body main .lcn-hero__title:not(#_) { font-size: min(150px, 26vw, 10.5vh) !important; }
}

/* ── Pagina FAQ: domande a righe, come le FAQ di homepage e servizi ──
   Niente riquadro bianco arrotondato: righe separate da una linea
   sottile, testo allineato al bordo sinistro. */
html body .faq-item:not(#_):not(#_) {
  background: transparent !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  border: 0 !important;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important;
  margin-bottom: 0 !important;
}
html body .faq-item__q:not(#_) { padding-left: 0 !important; padding-right: 0 !important; }
html body .faq-item__a:not(#_) { padding-left: 0 !important; padding-right: 0 !important; }
/* FAQ: troppe linee. Resta solo il separatore fra le domande (come
   nelle FAQ di homepage e servizi); via la linea accanto al titolo
   di ogni categoria, quella sopra la risposta aperta e quella sotto
   la hero. */
html body .faq-group__line:not(#_) { display: none !important; }
html body .faq-item__a:not(#_):not(#_) { border-top: 0 !important; }
html body .faq-hero:not(#_) { border-bottom: 0 !important; }
/* FAQ: con lo zoom (larghezza ≤ 1024px) la sezione "Scrivici" passava
   a 24px di margine laterale e non era più allineata a hero,
   categorie e footer (6vw). Stesso margine del resto della pagina. */
@media (min-width: 769px) {
  html body main > section.faq-contact:not(#_) {
    padding-left: clamp(1.5rem, 6vw, 7rem) !important;
    padding-right: clamp(1.5rem, 6vw, 7rem) !important;
  }
}

/* Icona dell'occhio nelle FAQ: le ciglia arrivano al bordo del
   riquadro dell'SVG e le estremità tonde dei tratti venivano
   tagliate. Il disegno può uscire dal riquadro. */
html body svg:is(.eye-open, .eye-closed) { overflow: visible !important; }

/* ── "Parliamoci" allineata al resto della pagina ────────────────────
   Case Studies: hero e Progetti hanno margine clamp(1.25rem, 4vw, 3rem)
   e contenuto max 1400px centrato; Dama: hero e corpo clamp(1.5rem,
   5vw, 6rem). Le sezioni "Parliamoci" usavano 6vw (24px con lo zoom)
   e non erano allineate a niente. */
@media (min-width: 769px) {
  html body main > section.cs-cta:not(#_) {
    padding-left: clamp(1.25rem, 4vw, 3rem) !important;
    padding-right: clamp(1.25rem, 4vw, 3rem) !important;
  }
  html body main > section.cs-cta > .cs-cta__inner:not(#_) {
    max-width: 1400px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  html body main > section.cs2-contact:not(#_) {
    padding-left: clamp(1.5rem, 5vw, 6rem) !important;
    padding-right: clamp(1.5rem, 5vw, 6rem) !important;
  }
}

/* FAQ: l'icona occhio toccava il bordo destro di .faq-item (overflow:hidden) e veniva tagliata */
html body .faq-item:not(#_) { padding-right: 12px !important; overflow: clip !important; overflow-clip-margin: 8px; }
html body .faq-item__icon:not(#_) { flex-shrink: 0 !important; }

/* Form hero servizi: radius di sistema (fondo e campi: vedi "Form nella hero delle pagine servizi: restyling") */
html body .svc-hero__form-card:not(#_) { border-radius: var(--r-box, 36px) !important; }

/* Sezioni pre-footer (Parliamoci / Candidati ora / Scrivici…): stesso margine
   sinistro del resto della pagina (--gutter) a qualsiasi zoom */
html body :is(.svc-caffe:not(.hc-section), .cs-cta):not(#_) {
  padding-left: var(--gutter) !important;
  padding-right: var(--gutter) !important;
}
html body .svc-caffe:not(.hc-section) > .container:not(#_) { padding-left: 0 !important; padding-right: 0 !important; }
html body .svc-caffe:not(.hc-section) > .container > .hc-header:not(#_) { padding-left: 0 !important; margin-left: 0 !important; }
html body .cs-cta__inner:not(#_) { margin-left: 0 !important; }
/* News, Tips e articoli: il contenuto sta a clamp(1.5rem, 5vw, 6rem) */
html body :is(.nw-contact, .art-contact, .tt-contact):not(#_) {
  padding-left: clamp(1.5rem, 5vw, 6rem) !important;
  padding-right: clamp(1.5rem, 5vw, 6rem) !important;
}

/* Radius di sistema: pill per campi a una riga, 36px per box/media/textarea */
html body :is(.contact-hub .container, .art-hero__sidebar, .art-pkg, .tt-sidebar, .tt-sidebar__item, .tt-sidebar__thumb, .imk-intro__photo img, .svc-hero__textarea):not(#_) { border-radius: var(--r-box, 36px) !important; }
html body .tt-sidebar__search input:not(#_) { border-radius: 999px !important; }
html body .tt-sidebar__thumb:not(#_) { overflow: hidden; }
html body .tt-sidebar__item > a:not(#_) { border-radius: var(--r-box, 36px) !important; }
html body .svc-hero__form-card textarea.svc-hero__field:not(#_):not(#__) { border-radius: var(--r-box, 36px) !important; }

/* News, Tips e articoli: H1 come le hero dei servizi (gerarchia: H1 > H2 pre-footer) */
html body :is(.nw-hero__title, .art-hero__title, .tt-hero__title):not(#_) {
  font-size: clamp(2.5rem, 6.2vw, 5.6rem) !important;
  line-height: 0.95 !important;
  overflow-wrap: normal !important; word-break: normal !important; hyphens: manual !important;
}
/* Articoli: ritmo verticale di sistema tra inizio/fine articolo e blocchi scuri */
html body :is(.tt-body, .art-pricing):not(#_) { padding-top: var(--section-py) !important; padding-bottom: var(--section-py) !important; }
html body .art-answer:not(#_) { padding-top: var(--section-py) !important; }
html body .art-faq:not(#_) { padding-bottom: var(--section-py) !important; }
html body .art-hero__title:not(#_) { font-size: min(clamp(2.5rem, 6.2vw, 5.6rem), 8.5vh) !important; }

/* News / Tips hero: la scritta NEWS/TIPS non deve essere coperta dal titolo.
   Watermark in flusso, sopra il titolo, allineato a destra. */
html body .nw-hero:not(#_) { flex-direction: column !important; justify-content: flex-end !important; align-items: stretch !important; min-height: 100dvh !important; }
html body .nw-hero__watermark:not(#_) {
  position: relative !important; inset: auto !important; z-index: 1 !important;
  justify-content: flex-end !important; overflow: visible !important; margin-bottom: clamp(1rem, 3vh, 2.5rem);
}
html body .nw-hero__watermark-text:not(#_) { font-size: min(20vw, 22vh) !important; line-height: .8 !important; padding-right: 0 !important; }
html body .nw-hero__watermark:not(#_) { padding-right: clamp(1.5rem, 5vw, 6rem) !important; }
html body .nw-hero__title:not(#_) { font-size: min(clamp(2.5rem, 6.2vw, 5.6rem), 9vh) !important; }

/* ── Allineamento verticale unico per News, Tips, Case Studies, Dama e articoli:
      bordo sinistro/destro dei contenuti = clamp(1.5rem, 5vw, 6rem) a ogni schermo ── */
:root { --page-x: clamp(1.5rem, 5vw, 6rem); }
html body :is(.cs-hero, .cs-works__sticky, .cs-cta, .art-faq):not(#_):not(#__) {
  padding-left: var(--page-x) !important; padding-right: var(--page-x) !important;
}
html body :is(.cs-hero__inner, .cs-works__head, .cs-cta__inner):not(#_):not(#__) {
  max-width: none !important; margin-left: 0 !important; margin-right: 0 !important;
}
html body .art-faq__label:not(#_) { margin-left: 0 !important; }
html body .cs2-figure--wide:not(#_) { margin-left: 0 !important; margin-right: 0 !important; }
html body .art-faq > *:not(#_):not(#__) { margin-left: 0 !important; margin-right: 0 !important; }

/* ── Pagina News senza foto: layout editoriale ──────────────────────────
   In evidenza: card scura a tutta larghezza. Elenco: righe con divisori
   (stesso linguaggio delle FAQ), categoria | titolo + estratto | freccia. */
html body .nw-grid-wrap:not(:has(img)) .nw-featured:not(#_) { max-width: none !important; margin: 0 0 var(--gap-block, 48px) !important; }
html body .nw-grid-wrap:not(:has(img)) .nw-featured__card:not(#_) {
  display: block !important; background: #0a0a0a !important; color: #fff !important;
  border: 0 !important; border-radius: var(--r-box, 36px) !important; box-shadow: none !important;
}
html body .nw-grid-wrap:not(:has(img)) .nw-featured__card:not(#_)::before { display: none !important; }
html body .nw-grid-wrap:not(:has(img)) .nw-featured__body:not(#_) {
  padding: clamp(2rem, 5vw, 5rem) !important; max-width: 1100px;
  display: flex !important; flex-direction: column; align-items: flex-start; gap: 16px;
}
html body .nw-grid-wrap:not(:has(img)) .nw-featured__title:not(#_) {
  color: #fff !important; font-size: clamp(1.9rem, 3.6vw, 3.5rem) !important; line-height: 1.02 !important; margin: 0 !important;
}
html body .nw-grid-wrap:not(:has(img)) .nw-featured__excerpt:not(#_) { color: rgba(255,255,255,.7) !important; font-size: 1.05rem !important; margin: 0 !important; max-width: 640px; }
html body .nw-grid-wrap:not(:has(img)) .nw-featured__card .nw-card__date:not(#_) { color: rgba(255,255,255,.55) !important; }
html body .nw-grid-wrap:not(:has(img)) .nw-featured__cta:not(#_) {
  margin-top: calc(var(--cta-gap, 2.5rem) - 16px) !important; background: var(--primary, #DB005A); color: #fff !important;
  border-radius: 999px; padding: 14px 26px; letter-spacing: .08em; transition: background .25s;
}
html body .nw-grid-wrap:not(:has(img)) .nw-featured__card:hover .nw-featured__cta:not(#_) { background: #b8004b; }

html body .nw-grid-wrap:not(:has(img)) .nw-grid:not(#_) { display: block !important; border-top: 1px solid rgba(0,0,0,.1); }
html body .nw-grid-wrap:not(:has(img)) .nw-card:not(#_) {
  display: block !important; background: transparent !important; box-shadow: none !important; border-radius: 0 !important;
  border-bottom: 1px solid rgba(0,0,0,.1) !important; transform: none !important;
}
html body .nw-grid-wrap:not(:has(img)) .nw-card__body:not(#_) {
  display: grid !important; grid-template-columns: minmax(160px, 22%) 1fr auto; grid-template-areas: "cat title cta" "cat ex cta";
  column-gap: clamp(1.5rem, 4vw, 4rem); row-gap: 10px; align-items: start; padding: clamp(1.75rem, 3vw, 2.5rem) 0 !important;
}
html body .nw-grid-wrap:not(:has(img)) .nw-card__cat:not(#_) { grid-area: cat; margin: .45em 0 0 !important; }
html body .nw-grid-wrap:not(:has(img)) .nw-card__title:not(#_) {
  grid-area: title; margin: 0 !important; font-size: clamp(1.25rem, 2vw, 1.9rem) !important; line-height: 1.12 !important; transition: color .25s;
}
html body .nw-grid-wrap:not(:has(img)) .nw-card__excerpt:not(#_) { grid-area: ex; margin: 0 !important; max-width: 640px; }
html body .nw-grid-wrap:not(:has(img)) .nw-card__cta:not(#_) {
  grid-area: cta; align-self: center; margin: 0 !important; width: 56px; height: 56px; border-radius: 999px;
  border: 1px solid rgba(0,0,0,.15); display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 0 !important; color: var(--primary, #DB005A); transition: background .25s, color .25s, border-color .25s;
}
html body .nw-grid-wrap:not(:has(img)) .nw-card__cta:not(#_)::after { content: '→'; font-size: 20px; }
html body .nw-grid-wrap:not(:has(img)) .nw-card:hover .nw-card__title:not(#_) { color: var(--primary, #DB005A) !important; }
html body .nw-grid-wrap:not(:has(img)) .nw-card:hover .nw-card__cta:not(#_) { background: var(--primary, #DB005A); border-color: var(--primary, #DB005A); color: #fff; }
@media (max-width: 700px) {
  html body .nw-grid-wrap:not(:has(img)) .nw-card__body:not(#_) { grid-template-columns: 1fr auto; grid-template-areas: "cat cta" "title cta" "ex ex"; }
}
html body .nw-grid-wrap:not(:has(img)) :is(.nw-featured__body, .nw-card__body):not(#_) { background: transparent !important; }
html body .nw-grid-wrap:not(:has(img)) :is(.nw-featured__card, .nw-featured__body, .nw-card):not(#_)::before,
html body .nw-grid-wrap:not(:has(img)) :is(.nw-featured__card, .nw-featured__body, .nw-card):not(#_)::after { display: none !important; }
html body .nw-grid-wrap:not(:has(img)) .nw-card:not(#_) { border-left: 0 !important; border-right: 0 !important; border-top: 0 !important; }

/* Contatti: form con box di sfondo pieno e campi grigi pieni (niente trasparenze),
   stesso schema del form nelle hero servizi */

/* ── Margine laterale UNICO di sito (pagine + footer): clamp(1.5rem, 5vw, 6rem) ── */
:root:not(#_) { --gutter: clamp(1.5rem, 5vw, 6rem) !important; --page-x: var(--gutter); }
html body .site-footer:not(#_) { padding-left: var(--gutter) !important; padding-right: var(--gutter) !important; }
html body :is(.faq-hero, .faq-body, .faq-contact, .lcn-hero, .lcn-about, .lcn-positions, .lcn-apply):not(#_):not(#__) {
  padding-left: var(--gutter) !important; padding-right: var(--gutter) !important;
}
html body .about-section__right:not(#_) { padding-left: 0 !important; }
/* Il .container centrato (max 1440) spostava i contenuti verso il centro sugli
   schermi larghi: ora parte sempre dal margine di sito, come il footer */
html body .container:not(#_) { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
html body .site-footer .sf-inner:not(#_):not(#__) { padding-left: 0 !important; padding-right: 0 !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
/* Footer: colonne con spazi uguali tra loro, dal margine sinistro al destro */
@media (min-width: 1025px) {
  html body .site-footer .sf-cols:not(#_) { grid-template-columns: repeat(4, auto) !important; justify-content: center !important; column-gap: clamp(4rem, 9vw, 10rem) !important; }
}
/* Footer: la scritta ESTRO di sfondo va da margine a margine dei contenuti
   (stessi bordi della riga Privacy / © ). 3.923 = larghezza di "ESTRO" in em. */
html body .site-footer:not(#_) { container-type: inline-size; }
html body .site-footer .sf-ghost:not(#_) {
  justify-content: flex-start !important; padding-left: calc(var(--gutter) - 0.0462em) !important;
  font-size: calc(100cqw / 3.886) !important;
}
html body .svc-hero .svc-hero__right:not(#_):not(#__) { padding-right: 0 !important; margin-right: 0 !important; }
html body .page-faq__title:not(#_):not(#__) { white-space: nowrap !important; width: max-content !important; max-width: 100% !important; margin-left: auto !important; margin-right: auto !important; }

/* ── Pagine servizi: gerarchia titoli ──────────────────────────────────
   H1 hero = il più grande possibile senza spezzare la parola più lunga
   ("INFLUENCER" = 7.18em nella colonna del 46%) → 6.3vw.
   Tutti gli H2 di sezione = una sola misura, maiuscolo, ~3/4 della hero. */
html body .svc-hero .svc-hero__title:not(#_):not(#__) { font-size: min(6.3vw, 14vh) !important; }
@media (max-width: 768px) { html body .svc-hero .svc-hero__title:not(#_):not(#__) { font-size: min(11vw, 4rem) !important; } }
html body:has(.svc-hero) :is(main, section) h2:not(footer *):not(#_):not(#__) {
  font-size: clamp(1.9rem, 4.6vw, 5.5rem) !important;
  text-transform: uppercase !important;
}
@media (max-width: 600px) {
  html body:has(.svc-hero) :is(main, section) h2:not(footer *):not(#_):not(#__) { font-size: 24px !important; }
  html body:has(.svc-hero) .svc-clients__title:not(#_):not(#__),
  html body:has(.svc-hero) .svc-clients__title *:not(#_) { white-space: normal !important; }
}
/* "Prendiamoci un caffè!": le lettere hanno già la loro salita legata allo
   scroll; la comparsa .wl-wait/.wl-in del titolo intero si sommava e lo
   faceva saltare su e giù. Resta solo l'animazione delle lettere. */
/* "Prendiamoci un caffè!": stessa comparsa degli altri titoli (.wl-wait → .wl-in).
   Le singole lettere non seguono più lo scroll (si sommava alla comparsa e
   faceva saltare il titolo su e giù). */
html body .svc-caffe__title .tl:not(#_) { opacity: 1 !important; transform: none !important; }
html.js-reveal body .svc-caffe__title.wl-wait:not(.wl-in):not(#_) { opacity: 0 !important; }

/* Case Studies: stesse misure dei titoli delle pagine servizi
   (H1 hero = come .svc-hero__title, H2 di sezione = come gli H2 servizi) */
html body .cs-hero__title:not(#_):not(#__) { font-size: min(6.3vw, 14vh) !important; }
html body main :is(.cs-works, .cs-cta) :is(.cs-works__title, .cs-cta__title):not(#_):not(#__) { font-size: clamp(1.9rem, 4.6vw, 5.5rem) !important; }
@media (max-width: 768px) { html body .cs-hero__title:not(#_):not(#__) { font-size: min(11vw, 4rem) !important; } }
@media (max-width: 600px) { html body main :is(.cs-works, .cs-cta) :is(.cs-works__title, .cs-cta__title):not(#_):not(#__) { font-size: 24px !important; } }
html body .page-faq__title:not(#_):not(#__):not(#___) { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; position: relative; left: 50%; transform: translateX(-50%); }

/* ── Tips & Tricks (pagina con le foto) ─────────────────────────────── */
/* Titoli come le pagine servizi */
html body:has(.nw-card__img) .nw-hero__title:not(#_):not(#__):not(#___) { font-size: min(6.3vw, 14vh) !important; }
html body:has(.nw-card__img) .nw-contact__title:not(#_):not(#__):not(#___) { font-size: clamp(1.9rem, 4.6vw, 5.5rem) !important; }
@media (max-width: 768px) { html body:has(.nw-card__img) .nw-hero__title:not(#_):not(#__):not(#___) { font-size: min(11vw, 4rem) !important; } }
@media (max-width: 600px) { html body:has(.nw-card__img) .nw-contact__title:not(#_):not(#__):not(#___) { font-size: 24px !important; } }
/* Hero più corta: non più a tutto schermo */
html body:has(.nw-card__img) .nw-hero:not(#_):not(#__) { min-height: 0 !important; }
/* Card come quelle di Case Studies: 360×498 → foto quadrata + fascia 138 */
html body .nw-grid:has(.nw-card__img):not(#_) {
  grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr)) !important; gap: 24px !important;
}
html body .nw-grid .nw-card:has(.nw-card__img):not(#_) {
  aspect-ratio: 360 / 498; height: auto !important; display: flex !important; flex-direction: column; overflow: hidden;
}
html body .nw-grid .nw-card:has(.nw-card__img) .nw-card__thumb:not(#_) { aspect-ratio: 1 / 1 !important; flex: none; }
html body .nw-grid .nw-card:has(.nw-card__img) .nw-card__body:not(#_) {
  flex: 1; min-height: 0; padding: 18px 20px !important; display: flex !important; flex-direction: column; gap: 8px; justify-content: center;
}
html body .nw-grid .nw-card:has(.nw-card__img) :is(.nw-card__excerpt, .nw-card__cta, .nw-card__date):not(#_) { display: none !important; }
html body .nw-grid .nw-card:has(.nw-card__img) .nw-card__cat:not(#_) { margin: 0 !important; }
html body .nw-grid .nw-card:has(.nw-card__img) .nw-card__title:not(#_) {
  margin: 0 !important; font-size: 17px !important; line-height: 1.2 !important;
  display: block !important;
}
html body .nw-grid .nw-card:has(.nw-card__img) .nw-card__title:not(#_):not(#__) {
  font-size: 15px !important; line-height: 1.2 !important;
  display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important;
  overflow: hidden !important; max-height: 3.6em !important;
}
/* Tips: 4 card per riga (2 sotto i 1024px, 1 sotto i 600px); titoli bold, non maiuscoli */
html body .nw-grid:has(.nw-card__img):not(#_):not(#__) { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; }
@media (max-width: 1024px) { html body .nw-grid:has(.nw-card__img):not(#_):not(#__) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 600px)  { html body .nw-grid:has(.nw-card__img):not(#_):not(#__) { grid-template-columns: 1fr !important; } }
html body .nw-grid .nw-card:has(.nw-card__img) .nw-card__title:not(#_):not(#__):not(#___) {
  text-transform: none !important; font-weight: 700 !important; letter-spacing: 0 !important; font-size: 16px !important;
}
@media (min-width: 1025px) and (max-width: 1439px) { html body .nw-grid:has(.nw-card__img):not(#_):not(#__) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } }
html body .nw-grid .nw-card:has(.nw-card__img) .nw-card__body:not(#_):not(#__) { padding: 14px 18px !important; gap: 6px !important; }
/* Tips: card in evidenza — titolo come le card (bold, non maiuscolo) e
   elementi più leggibili */
html body .nw-featured__card:has(.nw-featured__img) .nw-featured__body:not(#_) { display: flex !important; flex-direction: column; align-items: flex-start; gap: 14px; }
html body .nw-featured__card:has(.nw-featured__img) .nw-featured__title:not(#_):not(#__) {
  text-transform: none !important; font-weight: 700 !important; letter-spacing: -0.01em !important;
  font-size: clamp(1.5rem, 2.3vw, 2.5rem) !important; line-height: 1.15 !important; color: #080808 !important; margin: 0 !important;
}
html body .nw-featured__card:has(.nw-featured__img) .nw-card__date:not(#_):not(#__) { color: rgba(0,0,0,.7) !important; font-size: 15px !important; margin: 0 !important; }
html body .nw-featured__card:has(.nw-featured__img) .nw-featured__excerpt:not(#_):not(#__) { color: rgba(0,0,0,.78) !important; font-size: 17px !important; line-height: 1.55 !important; margin: 0 !important; max-width: 60ch; }
html body .nw-featured__card:has(.nw-featured__img) .nw-featured__cat:not(#_):not(#__) { font-size: 14px !important; margin: 0 !important; }
html body .nw-featured__card:has(.nw-featured__img) .nw-featured__cta:not(#_):not(#__) {
  margin-top: calc(var(--cta-gap, 2.5rem) - 14px) !important; background: var(--primary, #DB005A); color: #fff !important;
  border-radius: 999px; padding: 14px 26px; transition: background .25s;
}
html body .nw-featured__card:has(.nw-featured__img):hover .nw-featured__cta:not(#_):not(#__) { background: #b8004b; }

/* ── Articolo Tips: sidebar "Altri articoli" fissa e tutta visibile ── */
html body .tt-sidebar:not(#_) {
  position: sticky !important; top: 96px !important;
  max-height: calc(100dvh - 96px - 24px) !important; overflow: hidden !important;
  gap: 12px !important; padding: 18px 18px !important;
}
html body .tt-sidebar__list:not(#_) { gap: 4px !important; }
html body .tt-sidebar__item > a:not(#_):not(#__) {
  display: grid !important; grid-template-columns: auto 1fr; align-items: center; gap: 12px !important; padding: 6px !important;
}
html body .tt-sidebar__thumb:not(#_):not(#__) {
  width: clamp(44px, 7.6dvh, 80px) !important; height: clamp(44px, 7.6dvh, 80px) !important;
  aspect-ratio: 1 / 1; border-radius: 16px !important; flex: none;
}
html body .tt-sidebar__title:not(#_):not(#__) {
  font-size: 14px !important; line-height: 1.3 !important;
  display: -webkit-box !important; -webkit-box-orient: vertical !important; -webkit-line-clamp: 3 !important; overflow: hidden !important;
}
/* Articoli: titoli come nelle pagine servizi */
html body .tt-hero__title:not(#_):not(#__):not(#___) { font-size: min(6.3vw, 14vh) !important; }
html body .tt-contact__title:not(#_):not(#__):not(#___) { font-size: clamp(1.9rem, 4.6vw, 5.5rem) !important; }
@media (max-width: 768px) { html body .tt-hero__title:not(#_):not(#__):not(#___) { font-size: min(11vw, 4rem) !important; } }
@media (max-width: 600px) { html body .tt-contact__title:not(#_):not(#__):not(#___) { font-size: 24px !important; } }
html body .tt-body__inner:not(#_):not(#__) { max-width: none !important; }

/* ── Hero di news e tips & tricks = altezza della hero FAQ (la FAQ resta com'è) ──
   stessa altezza minima, stesso spazio sotto la nav e sotto il testo,
   stessi margini laterali; contenuto ancorato in basso come nella FAQ */
:root { --hero-min: max(34rem, 72dvh); }
html body :is(.faq-hero, .nw-hero):not(#_):not(#__):not(#___) {
  min-height: 34rem !important;
  min-height: max(34rem, 72vh) !important;
  min-height: var(--hero-min) !important;
  padding-top: max(140px, calc(var(--nav-h) + 3rem)) !important;
  padding-bottom: clamp(5rem, 9vw, 8rem) !important;
}
html body .nw-hero:not(#_):not(#__):not(#___) .nw-hero__inner {
  padding-left: var(--gutter) !important; padding-right: var(--gutter) !important;
}

/* ── Contatti: form largo quanto il titolo, fondo fucsia ──
   .ct-col prende la larghezza dal titolo "Contatti"; sottotitolo e form
   non contano nella misura (width:0 + min-width:100%) e la riempiono. */
html body .ct-inner .ct-col:not(#_):not(#__) {
  display: flex; flex-direction: column; align-items: stretch;
  width: fit-content; max-width: 100%; margin-inline: auto;
}
html body .ct-inner .ct-col .hc-header:not(#_):not(#__) { width: 100%; }
html body .ct-inner .ct-col :is(.hc-sub, .hc-form):not(#_):not(#__) {
  width: 0 !important; min-width: 100% !important; max-width: none !important;
}

/* ── Titoli FAQ e Lavora con noi: stessa scala delle altre pagine ──
   una parola (FAQ) → --t-xl · frasi di testata → --t-h1 ·
   titoli di sezione e dei form → --t-sub */
html body .lcn-hero__title:not(#_):not(#__):not(#___):not(#____) { font-size: var(--t-h1) !important; font-weight: 900 !important; letter-spacing: -0.03em !important; line-height: 1 !important; }
html body :is(.faq-contact__title, .lcn-positions__heading, .lcn-apply__title):not(#_):not(#__):not(#___):not(#____) {
  font-size: var(--t-sub) !important; font-weight: 900 !important; letter-spacing: -0.03em !important; line-height: 1 !important;
}

/* ── Contatti: form nero con celle più calde (dimensioni originali del form e della hero) ── */
html body .ct-inner .hc-form:not(#_):not(#__) {
  background: #0b0b0d !important; border: 1px solid #2c2c33 !important;
  border-radius: var(--r-box, 36px) !important; padding: clamp(1.5rem, 3vw, 2.5rem) !important;
}
html body .ct-inner .hc-form .svc-caffe__field:not(#_):not(#__):not(#___) { background: #1b1a22 !important; border: 1px solid #3a3946 !important; color: #fff !important; }
html body .ct-inner .hc-form .svc-caffe__field:not(#_):not(#__):not(#___):focus { background: #24222e !important; border-color: #fff !important; }
html body .ct-inner .hc-form .svc-caffe__field:not(#_):not(#__)::placeholder { color: rgba(255,255,255,.55) !important; }

/* ── Articolo news: titoli sulla scala del sito ──
   testata (titolo lungo di articolo) → tra --t-sub e --t-h1, senza
   spezzare le parole · titoli di sezione e del form → --t-sub ·
   sottotitoli del corpo → come negli articoli tips & tricks */
html body .art-hero__title:not(#_):not(#__):not(#___) { font-size: min(var(--t-h1), 4.4vw) !important; font-weight: 900 !important; letter-spacing: -0.03em !important; line-height: 1.02 !important; }
@media (max-width: 768px) { html body .art-hero__title:not(#_):not(#__):not(#___) { font-size: min(11vw, 3rem) !important; } }
html body :is(.art-pricing__title, .art-timeline__title, .art-results__title, .art-faq__title, .art-contact__title):not(#_):not(#__):not(#___) {
  font-size: var(--t-sub) !important; font-weight: 900 !important; letter-spacing: -0.03em !important; line-height: 1 !important;
}
html body .art-h2:not(#_):not(#__):not(#___) { font-size: clamp(1.4rem, 3vw, 2rem) !important; line-height: 1.02 !important; }

/* ── Pagina News: ordine finale (le regole sopra si sovrapponevano) ──
   titolo di testata come le hero dei servizi, titolo del form come gli
   altri form, sezioni con lo stesso respiro del resto del sito. */
html body .nw-hero__title:not(#_):not(#__):not(#___):not(#____) {
  font-size: min(var(--t-h1), 9vh) !important; font-weight: 900 !important;
  letter-spacing: -0.03em !important; line-height: 1 !important; max-width: 16ch;
}
html body .nw-hero__sub:not(#_):not(#__):not(#___) { max-width: 52ch; font-size: clamp(1rem, 1.3vw, 1.15rem) !important; line-height: 1.6 !important; }
html body .nw-contact__title:not(#_):not(#__):not(#___):not(#____) { font-size: var(--t-sub) !important; font-weight: 900 !important; letter-spacing: -0.03em !important; line-height: 1 !important; }
html body .nw-grid-wrap:not(#_):not(#__) { padding-block: var(--section-py) !important; padding-inline: var(--gutter) !important; }


/* ── News: regole visive del sito applicate alla pagina ──
   superficie bianca come le altre pagine, 36px sulle card, pillola sulle
   CTA, testi mai sotto 14px (etichette) / 16px (corpo), stacchi 16/24/48,
   contorno visibile da tastiera. */
html body .nw-grid-wrap:not(#_):not(#__):not(#___) { background: #fff !important; }
html body .nw-grid-wrap:not(:has(img)) .nw-grid:not(#_):not(#__) { border-top-color: rgba(0,0,0,.12) !important; }
html body .nw-grid-wrap:not(:has(img)) :is(.nw-card__cat, .nw-featured__cat):not(#_):not(#__) {
  font-size: 14px !important; letter-spacing: .14em !important; font-weight: 700 !important; color: var(--primary) !important;
}
html body .nw-grid-wrap:not(:has(img)) .nw-card__date:not(#_):not(#__) { font-size: 14px !important; }
html body .nw-grid-wrap:not(:has(img)) .nw-card__excerpt:not(#_):not(#__) { font-size: 16px !important; line-height: 1.6 !important; color: rgba(0,0,0,.65) !important; }
html body .nw-grid-wrap:not(:has(img)) .nw-card__title:not(#_):not(#__):not(#___) { font-weight: 900 !important; letter-spacing: -.02em !important; color: #080808; }
html body .nw-grid-wrap:not(:has(img)) .nw-featured__body:not(#_):not(#__) { gap: var(--gap-items, 24px) !important; }
html body .nw-grid-wrap:not(:has(img)) .nw-featured__title:not(#_):not(#__):not(#___) { font-size: min(var(--t-sub), 4.2vw) !important; font-weight: 900 !important; letter-spacing: -.03em !important; }
html body .nw-grid-wrap:not(:has(img)) .nw-featured__cta:not(#_):not(#__) { font-size: 14px !important; font-weight: 600 !important; text-transform: uppercase; }
html body .nw-hero__kicker:not(#_):not(#__):not(#___) { font-size: 14px !important; }
html body .nw-card:focus-visible, html body .nw-featured__card:focus-visible { outline: 3px solid var(--primary); outline-offset: 4px; }

/* ── Articolo News ───────────────────────────────────────────────────
   Il titolo della hero è lungo: resta alla misura massima che entra
   (min(6.2vw…, 8.5vh)); i titoli di sezione stanno sempre a ~3/4 */
html body :is(.art-pricing__title, .art-timeline__title, .art-results__title, .art-faq__title, .art-contact__title):not(#_):not(#__):not(#___) {
  font-size: min(clamp(1.9rem, 4.65vw, 4.2rem), 6.4vh) !important;
}
/* FAQ allineate al margine come le altre sezioni (prima centrate in 1440px) */
html body .art-faq:not(#_):not(#__) { align-items: stretch !important; }
html body .art-faq > *:not(#_):not(#__):not(#___) { max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; }
@media (max-width: 600px) { html body :is(.art-pricing__title, .art-timeline__title, .art-results__title, .art-faq__title, .art-contact__title):not(#_):not(#__):not(#___) { font-size: 24px !important; } }

/* ── Pagina News (senza foto): stesse regole di Tips & Tricks / servizi ── */
html body:has(.nw-grid-wrap):not(:has(.nw-card__img)) .nw-hero__title:not(#_):not(#__):not(#___) { font-size: min(6.3vw, 14vh) !important; }
html body:has(.nw-grid-wrap):not(:has(.nw-card__img)) .nw-hero:not(#_):not(#__) { min-height: 0 !important; }
html body:has(.nw-grid-wrap):not(:has(.nw-card__img)) .nw-contact__title:not(#_):not(#__):not(#___) { font-size: clamp(1.9rem, 4.6vw, 5.5rem) !important; }
@media (max-width: 768px) { html body:has(.nw-grid-wrap):not(:has(.nw-card__img)) .nw-hero__title:not(#_):not(#__):not(#___) { font-size: min(11vw, 4rem) !important; } }
@media (max-width: 600px) { html body:has(.nw-grid-wrap):not(:has(.nw-card__img)) .nw-contact__title:not(#_):not(#__):not(#___) { font-size: 24px !important; } }
/* titoli degli articoli: bold, non maiuscoli, sotto i titoli di sezione */
html body .nw-grid-wrap:not(:has(img)) .nw-featured__title:not(#_):not(#__) {
  text-transform: none !important; font-weight: 700 !important; letter-spacing: -0.01em !important;
  font-size: clamp(1.5rem, 2.3vw, 2.5rem) !important; line-height: 1.15 !important;
}
html body .nw-grid-wrap:not(:has(img)) .nw-card__title:not(#_):not(#__) {
  text-transform: none !important; font-weight: 700 !important; letter-spacing: -0.01em !important;
  font-size: clamp(1.15rem, 1.45vw, 1.5rem) !important; line-height: 1.25 !important;
}
html body .nw-grid-wrap:not(:has(img)) .nw-featured__excerpt:not(#_):not(#__) { font-size: 17px !important; color: rgba(255,255,255,.78) !important; }
html body .nw-grid-wrap:not(:has(img)) .nw-card__excerpt:not(#_):not(#__) { font-size: 16px !important; color: rgba(0,0,0,.7) !important; }

/* ══ NEWS (senza foto) — layout definitivo ════════════════════════════
   In evidenza: card scura compatta. Altre news: griglia di card
   (3 / 2 / 1 per riga) con radius 36, padding 32, freccia a pillola. */
html body .nw-grid-wrap:not(:has(img)) .nw-featured__body:not(#a):not(#b):not(#c):not(#d):not(#e) {
  padding: clamp(1.75rem, 3.5vw, 3rem) !important; gap: 14px !important; max-width: 900px !important;
}
html body .nw-grid-wrap:not(:has(img)) .nw-featured__title:not(#a):not(#b):not(#c):not(#d):not(#e) {
  font-size: clamp(1.5rem, 2.3vw, 2.5rem) !important; font-weight: 700 !important; text-transform: none !important;
  letter-spacing: -0.01em !important; line-height: 1.15 !important;
}
html body .nw-grid-wrap:not(:has(img)) .nw-featured__cta:not(#a):not(#b):not(#c):not(#d):not(#e) { margin-top: 10px !important; }

html body .nw-grid-wrap:not(:has(img)) .nw-grid:not(#a):not(#b):not(#c):not(#d):not(#e) {
  display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; gap: 24px !important; border-top: 0 !important;
}
@media (max-width: 1024px) { html body .nw-grid-wrap:not(:has(img)) .nw-grid:not(#a):not(#b):not(#c):not(#d):not(#e) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } }
@media (max-width: 600px)  { html body .nw-grid-wrap:not(:has(img)) .nw-grid:not(#a):not(#b):not(#c):not(#d):not(#e) { grid-template-columns: 1fr !important; } }
html body .nw-grid-wrap:not(:has(img)) .nw-card:not(#a):not(#b):not(#c):not(#d):not(#e) {
  display: flex !important; background: #f4f4f4 !important; border: 0 !important; border-radius: var(--r-box, 36px) !important;
  box-shadow: none !important; position: relative; overflow: hidden; transition: background .25s;
}
html body .nw-grid-wrap:not(:has(img)) .nw-card:hover:not(#a):not(#b):not(#c):not(#d):not(#e) { background: #ececec !important; }
html body .nw-grid-wrap:not(:has(img)) .nw-card__body:not(#a):not(#b):not(#c):not(#d):not(#e) {
  display: flex !important; flex-direction: column !important; align-items: flex-start; gap: 12px !important;
  padding: 32px !important; width: 100%; grid-template-columns: none !important;
}
html body .nw-grid-wrap:not(:has(img)) .nw-card__cat:not(#a):not(#b):not(#c):not(#d):not(#e) { margin: 0 !important; }
html body .nw-grid-wrap:not(:has(img)) .nw-card__title:not(#a):not(#b):not(#c):not(#d):not(#e) {
  margin: 0 !important; font-size: clamp(1.2rem, 1.5vw, 1.5rem) !important; font-weight: 700 !important;
  text-transform: none !important; letter-spacing: -0.01em !important; line-height: 1.2 !important; color: #080808 !important;
}
html body .nw-grid-wrap:not(:has(img)) .nw-card__excerpt:not(#a):not(#b):not(#c):not(#d):not(#e) { margin: 0 !important; max-width: none !important; }
html body .nw-grid-wrap:not(:has(img)) .nw-card__cta:not(#a):not(#b):not(#c):not(#d):not(#e) {
  margin-top: auto !important; padding-top: 0; width: 48px !important; height: 48px !important; border-radius: 999px !important;
  border: 1px solid rgba(0,0,0,.15) !important; display: inline-flex !important; align-items: center; justify-content: center;
  font-size: 0 !important; color: var(--primary, #DB005A) !important; background: #fff; flex: none;
}
html body .nw-grid-wrap:not(:has(img)) .nw-card__cta:not(#a):not(#b):not(#c):not(#d):not(#e)::after { content: '→' !important; font-size: 20px !important; line-height: 1 !important; }
html body .nw-grid-wrap:not(:has(img)) .nw-card:hover .nw-card__cta:not(#a):not(#b):not(#c):not(#d):not(#e) { background: var(--primary, #DB005A) !important; border-color: var(--primary, #DB005A) !important; color: #fff !important; }
html body .nw-grid-wrap:not(:has(img)) .nw-card__body > .nw-card__excerpt + .nw-card__cta:not(#a):not(#b):not(#c):not(#d):not(#e) { margin-top: auto !important; }
/* cornice animata: stessi angoli della card */
html body .nw-grid-wrap .nw-trace rect:not(#a) { rx: 34.5px; ry: 34.5px; }
html body .nw-grid-wrap:not(:has(img)) .nw-grid:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f) { grid-auto-rows: 1fr !important; }
html body .nw-grid-wrap:not(:has(img)) .nw-card__cta:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f) { align-self: flex-start !important; margin-left: 0 !important; margin-right: 0 !important; }
/* News: freccia della card disegnata (SVG) e centrata nel cerchio */
html body .nw-grid-wrap:not(:has(img)) .nw-card__cta:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f)::after {
  content: '' !important; display: block !important; width: 18px !important; height: 18px !important; font-size: 0 !important;
  background: currentColor !important; margin: 0 !important;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body .nw-grid-wrap:not(:has(img)) .nw-card__cta:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f) { padding: 0 !important; line-height: 0 !important; text-indent: 0 !important; gap: 0 !important; }
/* News: card in evidenza con il video della hero in sfondo (niente nero pieno) */
html body .nw-featured__card:has(.nw-featured__video):not(#a):not(#b):not(#c):not(#d):not(#e) { position: relative !important; overflow: hidden !important; isolation: isolate; }
html body .nw-featured__video:not(#a) {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; pointer-events: none;
  transform: scale(1.15); filter: hue-rotate(-54deg) saturate(1.05) brightness(0.62); opacity: .85;
}
html body .nw-featured__card:has(.nw-featured__video):not(#a):not(#b):not(#c):not(#d):not(#e)::after {
  content: '' !important; display: block !important; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(90deg, rgba(0,0,0,.82) 0%, rgba(0,0,0,.55) 45%, rgba(0,0,0,.1) 100%) !important;
}
html body .nw-featured__card:has(.nw-featured__video) .nw-featured__body:not(#a):not(#b):not(#c):not(#d):not(#e) { position: relative; z-index: 1; background: transparent !important; }
/* News: card in evidenza con grafica statica nel mood del sito
   (bagliori fucsia come le sezioni scure + griglia sottile), niente video */
html body .nw-grid-wrap:not(:has(img)) .nw-featured__card:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f) {
  position: relative !important; overflow: hidden !important; isolation: isolate;
  background:
    radial-gradient(60% 90% at 92% 20%, rgba(219,0,90,.55) 0%, rgba(219,0,90,0) 60%),
    radial-gradient(45% 70% at 70% 110%, rgba(120,0,90,.45) 0%, rgba(120,0,90,0) 65%),
    radial-gradient(35% 50% at 100% 100%, rgba(255,60,140,.25) 0%, rgba(255,60,140,0) 70%),
    #0a0a0a !important;
}
html body .nw-grid-wrap:not(:has(img)) .nw-featured__card:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f)::after {
  content: '' !important; display: block !important; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px) !important;
  background-size: 48px 48px !important;
  -webkit-mask-image: linear-gradient(90deg, transparent 25%, #000 75%); mask-image: linear-gradient(90deg, transparent 25%, #000 75%);
}

/* ══ CTA con freccia: un solo sistema in tutto il sito ═══════════════
   (esclusa la CTA "Contattaci" della nav). Stesse misure di .btn:
   14px / 600 / maiuscolo / 1.68px · padding 16×32 · alt. 54 · pillola ·
   gap 12. Freccia = stessa icona SVG 16px; --back la gira a sinistra. */
:root { --cta-arrow-svg: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14M13 6l6 6-6 6'/%3E%3C/svg%3E"); }
html body .cta-arrow:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f) {
  display: inline-flex !important; align-items: center !important; justify-content: center !important; gap: 12px !important;
  padding: 16px 32px !important; min-height: 54px !important; height: auto !important; box-sizing: border-box !important;
  font-family: var(--font-secondary, "DM Sans", sans-serif) !important; font-size: 14px !important; font-weight: 600 !important;
  letter-spacing: 1.68px !important; text-transform: uppercase !important; line-height: 22.4px !important;
  border-radius: 999px !important; white-space: nowrap; text-decoration: none !important;
}
html body .cta-arrow:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f)::after {
  content: '' !important; display: block !important; position: static !important; flex: none !important;
  width: 16px !important; height: 16px !important; background: currentColor !important; transform: none;
  -webkit-mask: var(--cta-arrow-svg) center / contain no-repeat; mask: var(--cta-arrow-svg) center / contain no-repeat;
  transition: transform .25s ease;
}
html body .cta-arrow--back:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f)::after { order: -1; transform: scaleX(-1); }
html body .cta-arrow:hover:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f)::after { transform: translateX(3px); }
html body .cta-arrow--back:hover:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f)::after { transform: scaleX(-1) translateX(3px); }
html body a:hover .cta-arrow:not(.cta-arrow--back):not(#a):not(#b):not(#c):not(#d):not(#e):not(#f)::after { transform: translateX(3px); }
/* "Leggi l'articolo" è uno span dentro la card: stesso aspetto di .btn--primary */
html body .nw-featured__cta.cta-arrow:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f) { background: var(--primary, #DB005A) !important; color: #fff !important; margin-top: 10px !important; }
/* freccia nel cerchio delle card News: stessa icona */
html body .nw-grid-wrap:not(:has(img)) .nw-card__cta:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f)::after {
  -webkit-mask: var(--cta-arrow-svg) center / contain no-repeat !important; mask: var(--cta-arrow-svg) center / contain no-repeat !important;
}
/* "Tutti i …": stesso stile a contorno ovunque, alto 54 come gli altri
   (il contorno è un'ombra interna, non aggiunge altezza) */
html body .cta-arrow--back:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g) {
  background: transparent !important; border: 0 !important; box-shadow: inset 0 0 0 2px currentColor !important; color: #0b0b0c !important;
}
html body .cta-arrow--back:hover:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g) { background: #0b0b0c !important; color: #fff !important; box-shadow: inset 0 0 0 2px #0b0b0c !important; }
html body [data-nav-theme="dark"] .cta-arrow--back:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g) { color: #fff !important; }
html body [data-nav-theme="dark"] .cta-arrow--back:hover:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g) { background: #fff !important; color: #0b0b0c !important; box-shadow: inset 0 0 0 2px #fff !important; }
html body .cta-arrow--back:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g)::before { display: none !important; }
html body .d24-back__link.cta-arrow--back:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { color: #fff !important; }
html body .d24-back__link.cta-arrow--back:hover:not(#a):not(#b):not(#c):not(#d):not(#e):not(#f):not(#g):not(#h) { background: #fff !important; color: #0b0b0c !important; box-shadow: inset 0 0 0 2px #fff !important; }

/* Homepage, About: testo leggibile (era nero al 60%, peso 400 → grigio chiaro
   e sottile). Grigio molto scuro, peso 500, 17px, interlinea 1.65 */
html body .about-section__body p:not(.about-section__pull):not(#a):not(#b):not(#c) {
  color: #222 !important; font-weight: 500 !important; font-size: 17px !important; line-height: 1.65 !important;
}
html body .about-section__body p strong:not(#a):not(#b):not(#c) { color: #080808 !important; font-weight: 700 !important; }

/* ── Leggibilità del body: stessa base del body About della home ──
   16px, interlinea 1.6; su bianco nero al 60% (valore dell'About),
   su nero bianco al 72% (valore già usato nelle sezioni scure). */
html body :is(.faq-item__a, .faq-item__a p, .faq-item__body, .faq-item__body p,
  .lcn-about__text p, .cs2-p, .cs2-list li):not(#_):not(#__) {
  color: var(--ink-body) !important; font-size: var(--text-body, 1rem) !important; line-height: 1.6 !important; font-weight: 400 !important;
}
html body :is(.faq-hero__sub, .d24-hero__sub, .lcn-positions__notice,
  .svc-caffe__sub):not(#_):not(#__) {
  color: var(--ink-body-dark) !important;
}
html body :is(.faq-item__a, .faq-item__body, .lcn-about__text, .cs2-p) strong:not(#_):not(#__) { color: #000 !important; }

/* ── Home · Case studies: card apribile + loghi un filo più grandi ──
   La card di testo è un link al case study. La freccia riprende quella
   delle card Servizi (cerchio fucsia, compare in hover/focus) ed è
   assoluta: non sposta nulla. Su touch resta visibile e discreta. */
html body .cs2-sticky a.cst-info:not(#_):not(#__) {
  position: relative; display: flex; flex-direction: column;
  color: inherit; text-decoration: none; cursor: pointer;
  transition: border-color .3s ease, box-shadow .3s ease;
}
html body .cs2-sticky a.cst-info:not(#_):not(#__):hover,
html body .cs2-sticky a.cst-info:not(#_):not(#__):focus-visible { border-color: var(--primary, #DB005A) !important; }
html body .cs2-sticky a.cst-info:not(#_):not(#__):focus-visible { outline: 2px solid var(--primary, #DB005A); outline-offset: 3px; }
.cst-info__go {
  position: absolute; top:  1rem; right: 1rem; z-index: 3;
  width: 46px; height: 46px; display: grid; place-items: center;
  border-radius: 50%; background: var(--primary, #DB005A); color: #fff;
  opacity: 0; transform: scale(.6) rotate(-45deg);
  transition: opacity .3s ease, transform .45s cubic-bezier(.34,1.56,.64,1);
  pointer-events: none;
}
.cst-info__go svg { width: 22px; height: 22px; }
a.cst-info:hover .cst-info__go, a.cst-info:focus-visible .cst-info__go { opacity: 1; transform: none; }
@media (hover: none) { .cst-info__go { opacity: .9; transform: none; } }
html body .cs2-sticky .cst-info__brand img[src*="prada"]:not(#_)     { transform: scale(1.65); }
html body .cs2-sticky .cst-info__brand img[src*="miumiu"]:not(#_)    { transform: scale(1.62); }
html body .cs2-sticky .cst-info__brand img[src*="fanuc"]:not(#_)     { transform: scale(1.65); }
html body .cs2-sticky .cst-info__brand img[src*="aristonlogo"]:not(#_){ transform: scale(1.54); }
html body .cs2-sticky .cst-info__brand img[src*="biorepair"]:not(#_) { transform: scale(1.65); }
html body .cs2-sticky .cst-info__brand img[src*="bravo"]:not(#_)     { transform: scale(.77); }

/* ── Home · Tips & Tricks: stesso hover della pagina Tips & Tricks ──
   Card intera cliccabile (<a>). Hover = bordo + ombra che si alzano e
   contorno fucsia che gira intorno alla card (.nw-trace, tracciato da
   js/responsive.js). Via parallasse, tilt e deriva dell'immagine. */
html body a.tip-card:not(#_):not(#__) {
  position: relative; display: flex; flex-direction: column; text-decoration: none; color: inherit; cursor: pointer;
  border: 1px solid rgba(0,0,0,.07) !important; border-radius: var(--r-box, 36px) !important; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 20px -10px rgba(0,0,0,.16) !important;
  transition: box-shadow .4s var(--ease-out, cubic-bezier(.16,1,.3,1)), border-color .4s ease, transform .6s var(--rv-ease, ease) !important;
  --tc-rx: 0deg !important; --tc-ry: 0deg !important; --tc-ix: 0px !important; --tc-iy: 0px !important;
  --tc-tx: 0px !important; --tc-sx: 0px !important; --tc-sy: 0px !important; --tc-is: 1 !important;
  --tc-z-img: 0px !important; --tc-z-tit: 0px !important; --tc-z-date: 0px !important;
}
html body a.tip-card:not(#_):not(#__):hover {
  border-color: rgba(0,0,0,.12) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 16px 34px -14px rgba(0,0,0,.24) !important;
}
html body a.tip-card:not(#_):not(#__):focus-visible { outline: 3px solid var(--primary, #DB005A); outline-offset: 4px; }
html body a.tip-card:not(#_):not(#__):hover .tip-card__img img { animation: none !important; transform: none !important; }
html body a.tip-card:not(#_):not(#__) .tip-card__img::after { display: none !important; }
.tip-card .nw-trace { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; overflow: visible; }
.tip-card .nw-trace rect {
  fill: none; stroke: var(--primary, #DB005A); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: var(--nw-len, 0); stroke-dashoffset: var(--nw-len, 0);
  transition: stroke-dashoffset .55s cubic-bezier(.35,0,.25,1);
}
.tip-card:hover .nw-trace rect, .tip-card:focus-visible .nw-trace rect { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .tip-card .nw-trace rect { transition: opacity .2s ease; stroke-dashoffset: 0; opacity: 0; }
  .tip-card:hover .nw-trace rect { opacity: 1; }
}

/* ── CTA e card: stesso comportamento per componenti con la stessa funzione ──
   Riferimento: .btn--primary (fucsia a riposo, nero in hover, sollevamento
   di 2px, durata e curva di sistema). Le CTA delle card News/Tips seguono
   lo stesso schema invece di un fucsia più scuro; le card si alzano con la
   stessa ombra. */
html body :is(.nw-featured__cta, .nw-card__cta, .cs-view, .cst-info__go):not(#_):not(#__) {
  transition: background-color var(--dur-base, .3s) var(--ease-out, ease), color var(--dur-base, .3s) var(--ease-out, ease),
              border-color var(--dur-base, .3s) var(--ease-out, ease), transform var(--dur-base, .3s) var(--ease-out, ease),
              opacity var(--dur-base, .3s) ease, gap .35s var(--ease-out, ease);
}
html body .nw-featured__card:hover .nw-featured__cta:not(#_):not(#__):not(#___),
html body .nw-grid-wrap:not(:has(img)) .nw-featured__card:hover .nw-featured__cta:not(#_):not(#__):not(#___) { background: #000 !important; color: #fff !important; }
html body .nw-grid-wrap:not(:has(img)) .nw-card:hover .nw-card__cta:not(#_):not(#__):not(#___):not(#____) {
  background: var(--primary, #DB005A) !important; border-color: var(--primary, #DB005A) !important; color: #fff !important;
}

/* ════════════════════════════════════════════════════════════════════
   PASSATA FINALE: leggibilità, CTA/card, componenti nuovi
   Token: --ink-body (nero 70%) e --ink-body-dark (bianco 80%) in tokens.css.
   Gerarchia: titoli/domande 800-900, body 400 a 16px, strong pieno.
   ════════════════════════════════════════════════════════════════════ */

/* ── Leggibilità: body su fondo chiaro ── */
html body :is(.service-detail__body, .service-detail__body p, .svc-tabs__text,
  .svc-tabs__points li, .imk-intro__text, .imk-intro__text p,
  .svc-talent-pronti__item p, .smm-panel__statement-sub,
  .svc-path__head .smm-panel__statement-sub, .lcn-about__text p):not(#_):not(#__):not(#___) {
  color: var(--ink-body) !important; font-size: var(--text-body, 1rem) !important;
  font-weight: 400 !important; line-height: 1.6 !important; opacity: 1 !important;
}
html body :is(.service-detail__body, .svc-tabs__text, .imk-intro__text, .svc-talent-pronti__item p, .lcn-about__text) strong:not(#_):not(#__):not(#___) { color: #000 !important; font-weight: 700 !important; }
html body .svc-path__head .smm-panel__statement-sub:not(#_):not(#__):not(#___) { font-weight: 500 !important; white-space: normal !important; }
/* …e su fondo scuro (sezioni .svc-bg-dark) */
html body main > section.svc-bg-dark :is(.service-detail__body, .service-detail__body p, .svc-tabs__text,
  .svc-tabs__points li, .imk-intro__text, .imk-intro__text p, .svc-talent-pronti__item p, .smm-panel__statement-sub):not(#_):not(#__):not(#___) {
  color: var(--ink-body-dark) !important;
}
html body main > section.svc-bg-dark :is(.service-detail__body, .svc-tabs__text, .imk-intro__text, .svc-talent-pronti__item p) strong:not(#_):not(#__):not(#___) { color: #fff !important; }

/* ── FAQ (tutte): risposta più leggibile ma sempre sotto la domanda ── */
html body :is(.faq-item__a, .faq-item__a p, .page-faq__answer-inner):not(#_):not(#__):not(#___) {
  color: var(--ink-body) !important; font-size: var(--text-body, 1rem) !important; font-weight: 400 !important; line-height: 1.65 !important;
}
html body :is(.faq-item__a, .page-faq__answer-inner) strong:not(#_):not(#__):not(#___) { color: #000 !important; font-weight: 700 !important; }
html body :is(.page-faq--dark, main > section.svc-bg-dark) .page-faq__answer-inner:not(#_):not(#__):not(#___) { color: var(--ink-body-dark) !important; }
html body :is(.faq-item__q-text, .page-faq__question):not(#_):not(#__):not(#___) { font-weight: 800; }

/* ── Influencer: stesso fondo da "I talent" a "Ad integrazione" fino alla sezione nera ── */
html body main > section#imkTalent:not(#_):not(#__),
html body main > section#imkTalent > .svc-integrazione:not(#_):not(#__),
html body main > section#imkTalent > .svc-integrazione > .container:not(#_):not(#__) {
  background: #f8f3f6 !important; border: 0 !important; box-shadow: none !important;
}
html body main > section#imkTalent .svc-integrazione::before,
html body main > section#imkTalent .svc-integrazione::after,
html body main > section#imkTalent::before,
html body main > section#imkTalent::after { content: none !important; display: none !important; }
html body main > section#imkTalent > .svc-integrazione:not(#_):not(#__) {
  margin-bottom: 0 !important; padding-bottom: clamp(2rem, 4.5vw, 3.25rem) !important;
}

/* ── Dama: colonna "Altri case study" più grande, dentro la viewport senza tagli ── */
@media (min-width: 1025px) { html body .cs2-body__layout:not(#_):not(#__) { grid-template-columns: minmax(0, 1fr) clamp(400px, 31vw, 480px) !important; } }
@media (max-width: 1024px) { html body .cs2-body__layout:not(#_):not(#__) { grid-template-columns: minmax(0, 1fr) !important; } }
html body .cs2-sidebar:not(#_):not(#__):not(#___) {
  top: calc(var(--nav-h) + 16px) !important;
  padding: clamp(1rem, 2.4dvh, 1.6rem) clamp(1rem, 1.6vw, 1.4rem) !important;
  gap: clamp(.6rem, 1.6dvh, 1.1rem) !important;
  max-height: none !important; overflow: visible !important;
}
html body .cs2-sidebar__item > a:not(#_):not(#__):not(#___) {
  grid-template-columns: clamp(60px, 10dvh, 96px) minmax(0, 1fr) !important; gap: 14px !important; padding: 6px !important; align-items: center !important;
}
html body .cs2-sidebar__thumb:not(#_):not(#__):not(#___):not(#____) {
  width: clamp(60px, 10dvh, 96px) !important; height: clamp(60px, 10dvh, 96px) !important; flex: 0 0 auto !important; aspect-ratio: 1 / 1;
}
html body .cs2-sidebar__thumb img:not(#_):not(#__):not(#___) { width: 84% !important; height: 84% !important; object-fit: contain !important; }
html body .cs2-sidebar__title:not(#_):not(#__):not(#___) {
  font-size: clamp(14px, 1.05vw, 16px) !important; line-height: 1.35 !important; color: var(--ink-body) !important; font-weight: 500 !important;
}
html body .cs2-sidebar__item.active .cs2-sidebar__title:not(#_):not(#__):not(#___) { color: var(--primary) !important; font-weight: 600 !important; }
@media (min-width: 769px) and (max-height: 640px) { html body .cs2-sidebar__search:not(#_):not(#__) { display: none !important; } }

/* ── Allegati dei case study (componente riusabile) ──
   <section class="cs-attach"> con <a class="cs-attach__item"> per PDF, presentazioni, documenti.
   Hover come le card Tips: bordo e ombra che si alzano, freccia fucsia. */
.cs-attach { margin-top: clamp(2.5rem, 5vw, 4rem); }
.cs-attach__list { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); margin: 0; padding: 0; list-style: none; }
.cs-attach__item {
  position: relative; display: grid; grid-template-columns: 48px minmax(0, 1fr) auto; align-items: center; gap: 14px;
  padding: 16px 18px; background: #fff; color: inherit; text-decoration: none; cursor: pointer;
  border: 1px solid rgba(0,0,0,.07); border-radius: var(--r-box, 36px);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 20px -10px rgba(0,0,0,.16);
  transition: box-shadow .4s var(--ease-out, ease), border-color .4s ease;
}
.cs-attach__item:hover, .cs-attach__item:focus-visible {
  border-color: rgba(219,0,90,.45); box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 16px 34px -14px rgba(0,0,0,.24);
}
.cs-attach__item:focus-visible { outline: 3px solid var(--primary, #DB005A); outline-offset: 4px; }
.cs-attach__icon {
  width: 48px; height: 48px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(219,0,90,.08); color: var(--primary, #DB005A); font: 700 12px/1 var(--font-secondary); letter-spacing: .06em; text-transform: uppercase;
}
.cs-attach__title { display: block; font: 700 16px/1.3 var(--font-secondary); color: #080808; }
.cs-attach__meta { display: block; margin-top: 2px; font: 400 14px/1.3 var(--font-secondary); color: var(--ink-body); }
.cs-attach__go {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--primary, #DB005A); color: #fff;
  transition: transform var(--dur-base, .3s) var(--ease-out, ease);
}
.cs-attach__go svg { width: 18px; height: 18px; }
.cs-attach__item:hover .cs-attach__go { transform: translate(2px, -2px); }

/* ── News: CTA "Leggi l'articolo" come le altre CTA (pillola fucsia, hover invertito) ── */
html body .nw-featured__cta:not(#_):not(#__):not(#___) {
  display: inline-flex !important; align-items: center; gap: .6rem; width: fit-content;
  background: var(--primary, #DB005A) !important; color: #fff !important; border: 2px solid var(--primary, #DB005A) !important;
  border-radius: var(--r-pill, 999px) !important; padding: 14px 26px !important;
  font: 600 14px/1 var(--font-secondary) !important; letter-spacing: .12em !important; text-transform: uppercase !important;
}
html body .nw-featured__card:hover .nw-featured__cta:not(#_):not(#__):not(#___):not(#____):not(#_____) {
  background: #fff !important; color: var(--primary, #DB005A) !important; border-color: #fff !important;
}
html body .nw-grid-wrap:has(.nw-card__img) .nw-featured__card:hover .nw-featured__cta:not(#_):not(#__):not(#___):not(#____):not(#_____) {
  background: #000 !important; color: #fff !important; border-color: #000 !important;
}

/* ── News: card staccate dallo sfondo (profondità molto discreta) ── */
html body .nw-grid-wrap:not(:has(img)):not(#_):not(#__) { background: #f5f5f5 !important; }
html body .nw-grid-wrap:not(:has(img)) .nw-grid:not(#_):not(#__):not(#___) { border-top: 0 !important; display: grid !important; gap: 16px; }
html body .nw-grid-wrap:not(:has(img)) .nw-card:not(#_):not(#__):not(#___):not(#____) {
  background: #fff !important; border: 1px solid rgba(0,0,0,.07) !important; border-radius: var(--r-box, 36px) !important;
  padding-inline: clamp(1.25rem, 3vw, 2.5rem); overflow: hidden;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 20px -10px rgba(0,0,0,.16) !important;
  transition: box-shadow .4s var(--ease-out, ease), border-color .4s ease !important;
}
html body .nw-grid-wrap:not(:has(img)) .nw-card:hover:not(#_):not(#__):not(#___):not(#____):not(#_____) {
  background: #fff !important; border-color: rgba(0,0,0,.12) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 16px 34px -14px rgba(0,0,0,.24) !important;
}
html body .nw-grid-wrap:has(img) .nw-card:not(#_):not(#__):not(#___) { border: 1px solid rgba(0,0,0,.08) !important; }

/* ── Articolo News: FAQ sullo stesso margine dei risultati, titolo form come gli altri form ── */
html body :is(.art-faq, .art-results):not(#_):not(#__):not(#___) { padding-left: var(--gutter) !important; }
@media (max-width: 1099px) { html body :is(.art-faq, .art-results):not(#_):not(#__):not(#___) { padding-right: var(--gutter) !important; } }
html body :is(.art-contact__title, .tt-contact__title):not(#_):not(#__):not(#___):not(#____) {
  font-size: var(--t-sub) !important; font-weight: 900 !important; letter-spacing: -0.03em !important; line-height: 1 !important;
}
@media (max-width: 600px) { html body :is(.art-contact__title, .tt-contact__title):not(#_):not(#__):not(#___):not(#____) { font-size: 24px !important; } }

/* ── Tips: hero con la stessa misura delle altre hero di lista; data sulle card ── */
html body .nw-hero__title:not(#_):not(#__):not(#___):not(#____):not(#_____) {
  font-size: min(var(--t-h1), 9vh) !important; font-weight: 900 !important; letter-spacing: -0.03em !important; line-height: 1 !important;
}
@media (max-width: 768px) { html body .nw-hero__title:not(#_):not(#__):not(#___):not(#____):not(#_____) { font-size: min(11vw, 3rem) !important; } }
html body .nw-grid .nw-card:has(.nw-card__img) .nw-card__date:not(#_):not(#__):not(#___) {
  display: block !important; font: 500 14px/1.3 var(--font-secondary) !important; color: var(--ink-body) !important; letter-spacing: .02em; margin: 0 !important;
}

/* ── Tips articolo: data leggibile, parola in evidenza (stessa logica degli <em> dei titoli) ── */
html body .tt-hero__date:not(#_):not(#__):not(#___) { font-size: 14px !important; font-weight: 500 !important; color: var(--ink-body) !important; letter-spacing: .02em !important; }
html body .tt-hero__title em:not(#_):not(#__) { font-style: normal; color: var(--primary, #DB005A) !important; }

/* ── FAQ pagina: voce attiva della colonna Categorie (aggiornata da JS) ── */
html body .faq-nav__list a.is-active:not(#_):not(#__):not(#___) {
  color: #080808 !important; font-weight: 700 !important; border-left-color: var(--primary, #DB005A) !important; background: rgba(219,0,90,.07);
}

/* ── Contatti: social, card con l'hover delle Tips, ritmo verticale ── */
/* Card sedi/social/chiamaci: stesso hover delle card Tips (bordo e ombra neutra, contorno fucsia che gira), nessun movimento */
html body .contact-hub__col:not(#_):not(#__) { position: relative; transition: box-shadow .4s var(--ease-out, ease), border-color .4s ease !important; }
html body .contact-hub__col:not(#_):not(#__):hover {
  transform: none !important; border-color: rgba(0,0,0,.12) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 16px 34px -14px rgba(0,0,0,.24) !important;
}
html body .contact-hub__col:hover .contact-hub__cat:not(#_):not(#__) { transform: none !important; }
.contact-hub__col .nw-trace { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; overflow: visible; }
.contact-hub__col .nw-trace rect {
  fill: none; stroke: var(--primary, #DB005A); stroke-width: 3; stroke-linecap: round;
  stroke-dasharray: var(--nw-len, 0); stroke-dashoffset: var(--nw-len, 0);
  transition: stroke-dashoffset .55s cubic-bezier(.35,0,.25,1);
}
.contact-hub__col:hover .nw-trace rect { stroke-dashoffset: 0; }
@media (prefers-reduced-motion: reduce) {
  .contact-hub__col .nw-trace rect { transition: opacity .2s ease; stroke-dashoffset: 0; opacity: 0; }
  .contact-hub__col:hover .nw-trace rect { opacity: 1; }
}
/* i quattro social su più righe: le pillole vanno a capo, mai tagliate */
html body .contact-hub__pills:not(#_):not(#__) { flex-wrap: wrap !important; }

/* ── Join Us: immagini ── */
.lcn-about__photo > .lcn-about__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; }
html body .lcn-about__photo:not(#_):not(#__) { min-height: clamp(260px, 38vw, 520px); background-image: none; border-radius: var(--r-box, 36px); overflow: hidden; }

/* ── Hero FAQ / News / Tips: altezza identica (non solo minima) ──
   Il contenuto di News e Tips è più alto della FAQ: titolo largo e sottotitolo
   su due righe lo fanno stare dentro la stessa altezza. */
html body :is(.faq-hero, .nw-hero):not(#_):not(#__):not(#___):not(#____) {
  height: var(--hero-min) !important; min-height: var(--hero-min) !important; box-sizing: border-box;
}
html body .nw-hero .nw-hero__title:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) { max-width: 22ch; margin-bottom: 12px !important; }
html body .nw-hero .nw-hero__sub:not(#_):not(#__):not(#___):not(#____) { max-width: 60ch; margin-top: 0 !important; }
html body .nw-hero .nw-hero__inner:not(#_):not(#__):not(#___) { padding-bottom: 0 !important; }

/* ── Influencer: "I talent" + "Ad integrazione" = un solo fondo, senza stacchi ──
   Il JS avvolge il contenuto in .svc-generic-sticky: i selettori ">" non
   arrivavano all'elemento. Tutti i livelli prendono lo stesso colore. */
html body main #imkTalent:not(#_):not(#__):not(#___),
html body main #imkTalent .svc-generic-sticky:not(#_):not(#__):not(#___),
html body main #imkTalent .svc-integrazione:not(#_):not(#__):not(#___),
html body main #imkTalent .svc-integrazione .container:not(#_):not(#__):not(#___),
html body main #imkTalent .svc-integrazione__header:not(#_):not(#__):not(#___),
html body main #imkTalent .svc-integrazione__pills:not(#_):not(#__):not(#___) {
  background: #f8f3f6 !important; background-image: none !important; border: 0 !important; box-shadow: none !important;
}
html body main #imkTalent .svc-generic-sticky:not(#_):not(#__):not(#___) { padding-bottom: clamp(2rem, 4.5vw, 3.25rem) !important; }
html body main #imkTalent .svc-integrazione:not(#_):not(#__):not(#___) { padding-bottom: 0 !important; margin-bottom: 0 !important; }

/* ── Articolo News: la FAQ riserva la corsia "Ultime news" come tutte le altre sezioni ──
   Stessa misura del corpo (gutter + 320px di corsia + 3rem): il bordo destro
   coincide con quello dei risultati ("6-12 mesi"). */
@media (min-width: 1100px) {
  html body .art-faq:not(#_):not(#__):not(#___):not(#____) { padding-right: calc(320px + var(--gutter) + 3rem) !important; }
}

/* ── News: card bianche su fondo grigio chiaro, leggero rilievo ──
   (il layout a 3 colonne resta quello del blocco sopra; qui solo superficie) */
html body .nw-grid-wrap:not(:has(img)):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) { background: #f5f5f5 !important; }
html body .nw-grid-wrap:not(:has(img)) .nw-card:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) {
  background: #fff !important; border: 1px solid rgba(0,0,0,.07) !important; padding-inline: 0 !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 8px 20px -10px rgba(0,0,0,.16) !important;
  transition: box-shadow .4s var(--ease-out, ease), border-color .4s ease !important;
}
html body .nw-grid-wrap:not(:has(img)) .nw-card:hover:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) {
  background: #fff !important; border-color: rgba(0,0,0,.12) !important;
  box-shadow: 0 2px 4px rgba(0,0,0,.06), 0 16px 34px -14px rgba(0,0,0,.24) !important;
}

/* ── SMM: contenitore della timeline = rapporto reale delle immagini (1500×1200 = 5:4) ──
   Il riquadro prende l'altezza dalla larghezza e l'immagine lo riempie
   esattamente (stesso rapporto): nessun crop, nessuna banda, nessuna deformazione. */
html body main .svc-path__sticky .svc-tabs__media:not(#_):not(#__):not(#___) {
  aspect-ratio: 5 / 4 !important; height: auto !important; min-height: 0 !important; width: 100%; align-self: center; padding: 0 !important; border: 0 !important; background: transparent !important;
}
html body main .svc-tabs__media > .svc-tabs__media-img:not(#_):not(#__):not(#___) {
  position: absolute; inset: 0; width: 100% !important; height: 100% !important; object-fit: cover; object-position: center; display: block; border-radius: inherit;
}

/* ── Influencer: respiro sotto "Ad integrazione" (stesso ritmo delle altre sezioni), fondo invariato ── */
html body main #imkTalent .svc-generic-sticky:not(#_):not(#__):not(#___):not(#____) { padding-bottom: var(--section-py) !important; }

/* ── Case Studies: niente corse sticky più alte dello schermo ──
   #cs-works e .cs-cta tenevano un pannello sticky (914px e 1078px, più alti
   della viewport) dentro una corsa da 118dvh: lo scroll restava "agganciato" e
   la barra di scorrimento non rifletteva la lunghezza reale. Ora le sezioni
   scorrono normalmente, come le altre pagine. */
html body main #cs-works:not(#_):not(#__):not(#___) { min-height: 0 !important; }
html body main #cs-works > .cs-works__sticky:not(#_):not(#__):not(#___) { position: relative !important; top: auto !important; min-height: 0 !important; }
html body main > section.cs-cta:not(#_):not(#__):not(#___) { min-height: 0 !important; }
html body main > section.cs-cta > .cs-cta__inner:not(#_):not(#__):not(#___) { position: relative !important; top: auto !important; min-height: 0 !important; }

/* ── "Leggi l'articolo": due varianti, scelte dal fondo, identiche ai riferimenti della home ──
   · fondo scuro (News in evidenza)  = "Scopri tutti i Tips & Tricks":
       fucsia · bordo 2px · hover bianco con testo nero, sollevamento -3px,
       ombra 0 14px 34px rgba(0,0,0,.35), transizione .32s var(--ease-out)
   · fondo chiaro (Tips in evidenza) = "Scarica la brochure" (.btn--primary):
       fucsia · hover nero con testo bianco, sollevamento -2px, --shadow-md,
       transizione var(--dur-fast) var(--ease-out)
   Niente tendina (::before) né freccia, come nei due riferimenti. L'hover
   parte dall'intera card, che è il link. */
html body .nw-featured__cta:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______) {
  display: inline-flex !important; align-items: center !important; gap: var(--space-3, .75rem) !important; width: fit-content;
  padding: var(--space-4, 1rem) var(--space-8, 2rem) !important; min-height: 0 !important; height: auto !important; margin-top: 10px !important;
  font: 600 14px/1.6 var(--font-secondary) !important; letter-spacing: .12em !important; text-transform: uppercase !important;
  border-radius: var(--r-pill, 999px) !important; position: relative; z-index: 2; cursor: pointer; white-space: nowrap;
  background: var(--primary, #DB005A) !important; color: #fff !important;
}
html body .nw-featured__cta:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______)::before { display: none !important; }
html body .nw-featured__cta:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______)::after { content: none !important; display: none !important; }
/* scuro */
html body .nw-grid-wrap:not(:has(.nw-card__img)) .nw-featured__cta:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______) {
  border: 2px solid var(--primary, #DB005A) !important;
  transition: background .32s var(--ease-out, ease), border-color .32s var(--ease-out, ease), color .32s var(--ease-out, ease), transform .32s var(--ease-out, ease), box-shadow .32s var(--ease-out, ease) !important;
}
html body .nw-grid-wrap:not(:has(.nw-card__img)) .nw-featured__card:hover .nw-featured__cta:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______),
html body .nw-grid-wrap:not(:has(.nw-card__img)) .nw-featured__card:focus-visible .nw-featured__cta:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______) {
  background: #fff !important; color: #000 !important; border-color: #fff !important; transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.35);
}
/* chiaro */
html body .nw-grid-wrap:has(.nw-card__img) .nw-featured__cta:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______) {
  border: 0 !important;
  transition: background var(--dur-fast, 180ms) var(--ease-out, ease), color var(--dur-fast, 180ms) var(--ease-out, ease), border-color var(--dur-fast, 180ms) var(--ease-out, ease), transform var(--dur-fast, 180ms) var(--ease-out, ease), box-shadow var(--dur-fast, 180ms) var(--ease-out, ease) !important;
}
html body .nw-grid-wrap:has(.nw-card__img) .nw-featured__card:hover .nw-featured__cta:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______),
html body .nw-grid-wrap:has(.nw-card__img) .nw-featured__card:focus-visible .nw-featured__cta:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______) {
  background: #000 !important; color: #fff !important; transform: translateY(-2px); box-shadow: var(--shadow-md);
}

/* ── Join Us · "Chi siamo": titolo vero (senza icona), testo più presente, blocco bilanciato sull'immagine ── */
html body .lcn-about__title:not(#_):not(#__):not(#___) {
  font-family: var(--font-primary); font-size: var(--t-sub) !important; font-weight: 900 !important; line-height: 1 !important;
  letter-spacing: -0.03em !important; text-transform: uppercase; color: #080808; margin: 0 0 var(--gap-block, 48px) !important;
}
html body .lcn-about:not(#_):not(#__) { align-items: stretch !important; gap: clamp(2rem, 5vw, 5rem) !important; }
html body .lcn-about__left:not(#_):not(#__) { display: flex; flex-direction: column; justify-content: center; }
html body .lcn-about__text:not(#_):not(#__) { display: flex; flex-direction: column; gap: 1.25rem; max-width: 60ch; }
html body .lcn-about__text p:not(#_):not(#__):not(#___):not(#____) {
  font-size: clamp(1.0625rem, 1.35vw, 1.3rem) !important; line-height: 1.6 !important; margin: 0 !important;
}
html body .lcn-about__photo:not(#_):not(#__):not(#___) { min-height: clamp(260px, 30vw, 420px); }
@media (max-width: 860px) { html body .lcn-about__photo:not(#_):not(#__):not(#___) { min-height: 0; aspect-ratio: 5 / 4; } }

/* ── Contatti: icone social/sedi/telefono tutte dello stesso set (24px, stroke 1.8) ── */
html body .contact-hub__icon:not(#_):not(#__) { width: 20px !important; height: 20px !important; flex: none; display: block; color: currentColor; }
html body .contact-hub__pill:not(#_):not(#__) { gap: .6rem !important; align-items: center !important; line-height: 1; }

/* ── Dama · Materiali: tutte le card identiche, qualunque sia il contenuto ── */
.cs-attach__list { grid-auto-rows: 1fr; }
.cs-attach__list > li { display: flex; }
.cs-attach__item { flex: 1 1 auto; width: 100%; min-height: 96px; box-sizing: border-box; align-items: center; }
.cs-attach__item > span:nth-child(2) { min-width: 0; align-self: center; }
.cs-attach__title { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.6em; }
.cs-attach__meta { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; min-height: 2.6em; }
.cs-attach__icon, .cs-attach__go { flex: none; }

/* ── Dama · CTA finale: stessa misura delle altre CTA (--t-sub), testo più breve invece di font più piccolo ── */
html body .cs2-contact__title:not(#_):not(#__):not(#___):not(#____) {
  font-size: var(--t-sub) !important; font-weight: 900 !important; letter-spacing: -0.03em !important; line-height: 1 !important;
}
@media (max-width: 600px) { html body .cs2-contact__title:not(#_):not(#__):not(#___):not(#____) { font-size: 24px !important; } }

/* ── Titoli dei blocchi CTA/form di chiusura: UN solo corpo in tutto il sito (--t-cta) ──
   Prima: 49–75px a seconda della pagina (regole per pagina, alcune legate all'altezza della finestra). */
html body :is(.cs-cta__title, .faq-contact__title, .nw-contact__title, .lcn-apply__title, .cs2-contact__title,
  .art-contact__title, .tt-contact__title, .svc-caffe__title, .hc-contact__title):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______):not(#________) {
  font-size: var(--t-cta) !important; font-weight: 900 !important; letter-spacing: -0.03em !important; line-height: 1 !important;
}

/* La colonna del titolo non scende sotto la parola più lunga (a --t-cta): così lo
   script di adattamento non rimpicciolisce il titolo e la misura resta uguale ovunque. */
@media (min-width: 861px) {
  html body :is(.faq-contact__inner, .nw-contact__inner, .art-contact__inner, .tt-contact__inner, .cs-cta__inner, .cs2-contact__inner):not(#_):not(#__):not(#___) {
    grid-template-columns: minmax(min-content, 1fr) minmax(0, 1fr) !important;
  }
}

/* ════════════════════════════════════════════════════════════════════
   TIMELINE PAGINE SERVIZI (.svc-path / .svc-tabs): sistema visivo comune
   Un solo blocco per le 10 pagine. Struttura, markup e navigazione invariati.
   Regole di resa:
   · l'immagine è la protagonista: riquadro il più alto possibile, rapporto 5:4 reale
   · ombre neutre e morbide, niente alone fucsia sul contenitore
   · la linea sta SEMPRE dietro e si ferma prima dei numeri (alone dello sfondo attorno al nodo)
   · nessun sottolineato sotto i titoli dei passi
   · i nodi non sono mai tagliati: la barra non ritaglia (padding per scala e anello)
   ════════════════════════════════════════════════════════════════════ */
html body .svc-path { --tl-bg: #fff; --tl-node: 46px; --tl-pad-top: 16px; }
html body main > section.svc-bg-dark .svc-path__sticky,
html body main > section.svc-bg-dark.svc-path { --tl-bg: #0d0a0c; }

/* — Barra: nodi su una riga, mai ritagliati; spazio sopra per scala e anello — */
html body .svc-tabs__strip:not(#_):not(#__):not(#___) {
  padding: var(--tl-pad-top) 0 6px; --n: 6;
}
@media (min-width: 1101px) { html body .svc-tabs__strip:not(#_):not(#__):not(#___) { overflow: visible !important; } }
/* — Linea: dietro i nodi, centrata sul loro asse — */
html body .svc-tabs__strip:not(#_):not(#__):not(#___)::before,
html body .svc-tabs__strip:not(#_):not(#__):not(#___)::after {
  top: calc(var(--tl-pad-top) + var(--tl-node) / 2 - 2px); height: 4px; border-radius: 4px; z-index: 0;
}
html body .svc-tabs__strip:not(#_):not(#__):not(#___)::before { background: rgba(219,0,90,.14); }
html body .svc-tabs__strip:not(#_):not(#__):not(#___)::after {
  background: linear-gradient(90deg, var(--primary-hover, #a8003f) 0%, var(--primary, #DB005A) 60%, #ff2e7e 100%);
  transition: width .6s var(--ease-out, cubic-bezier(.16,1,.3,1));
}

/* — Nodi: sempre pieni (opachi) e circondati da un anello del colore dello sfondo, così la linea
     non li attraversa né li tocca in nessuno stato — */
html body .svc-tabs__num:not(#_):not(#__):not(#___) {
  position: relative; z-index: 2; flex: none; box-sizing: border-box;
  width: var(--tl-node); height: var(--tl-node); min-width: var(--tl-node); line-height: 1; font-size: 16px; font-weight: 800;
  color: var(--primary, #DB005A); background: var(--tl-bg); border: 2px solid rgba(219,0,90,.38);
  box-shadow: 0 0 0 6px var(--tl-bg);
  transition: transform var(--dur-base, 320ms) var(--ease-out, ease), background var(--dur-base, 320ms) ease,
              border-color var(--dur-base, 320ms) ease, color var(--dur-base, 320ms) ease;
}
html body .svc-tabs__tab.is-done .svc-tabs__num:not(#_):not(#__):not(#___) {
  background: #fbe3ec; border-color: var(--primary, #DB005A); color: var(--primary, #DB005A);
}
html body .svc-tabs__tab:hover .svc-tabs__num:not(#_):not(#__):not(#___) {
  border-color: var(--primary, #DB005A); transform: translateY(-2px);
}
html body .svc-tabs__tab.is-active .svc-tabs__num:not(#_):not(#__):not(#___) {
  background: var(--primary, #DB005A); border-color: var(--primary, #DB005A); color: #fff; transform: scale(1.1);
  box-shadow: 0 0 0 6px var(--tl-bg), 0 0 0 8px rgba(219,0,90,.4);
}
html body .svc-tabs__tab.is-active:hover .svc-tabs__num:not(#_):not(#__):not(#___) { transform: scale(1.1) translateY(-2px); }
html body .svc-tabs__tab:focus-visible { outline-offset: 10px; }

/* — Etichette e titoli dei passi: leggibili, nessun sottolineato in nessuno stato — */
html body .svc-tabs__tag:not(#_):not(#__):not(#___) { color: rgba(219,0,90,.66); font-weight: 700; }
html body .svc-tabs__tab:hover .svc-tabs__tag:not(#_):not(#__):not(#___),
html body .svc-tabs__tab.is-active .svc-tabs__tag:not(#_):not(#__):not(#___) { color: var(--primary, #DB005A); }
html body .svc-tabs__title:not(#_):not(#__):not(#___) { color: rgba(8,8,8,.66); }
html body .svc-tabs__tab:hover .svc-tabs__title:not(#_):not(#__):not(#___),
html body .svc-tabs__tab.is-active .svc-tabs__title:not(#_):not(#__):not(#___) { color: #080808; }
html body .svc-tabs__tab:not(#_):not(#__),
html body .svc-tabs__tab:hover:not(#_):not(#__),
html body .svc-tabs__tab *:not(#_):not(#__) { text-decoration: none !important; }
html body .svc-tabs__tab:not(#_):not(#__)::after,
html body .svc-tabs__tab:not(#_):not(#__)::before { content: none !important; display: none !important; border: 0 !important; }

/* — Card attiva: pulita, neutra; solo un filo fucsia sottile in alto come accento — */
html body .svc-tabs__panels:not(#_):not(#__) { isolation: isolate; }
html body .svc-tabs__panels:not(#_):not(#__)::before { content: none; }
html body .svc-tabs__panel:not(#_):not(#__):not(#___) {
  position: relative; overflow: hidden;
  background: #fff; border: 1px solid rgba(0,0,0,.08);
  box-shadow: 0 1px 2px rgba(0,0,0,.05), 0 14px 32px -22px rgba(0,0,0,.28);
}
html body .svc-tabs__panel:not(#_):not(#__):not(#___)::before {
  content: ''; position: absolute; left: 0; top: 0; height: 3px; width: 100%;
  background: linear-gradient(90deg, var(--primary, #DB005A) 0, var(--primary, #DB005A) 18%, rgba(219,0,90,0) 55%);
  animation: svcBarIn .7s var(--ease-out, ease) both; transform-origin: left;
}
@keyframes svcBarIn { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* — Immagine: protagonista, senza cornici decorative, ombra neutra e leggera — */
html body .svc-tabs__media:not(#_):not(#__):not(#___) {
  border: 0 !important; background: transparent; box-shadow: 0 10px 24px -14px rgba(0,0,0,.30);
}
html body .svc-tabs__panel:not(#_):not(#__) .svc-tabs__media-img { animation: svcMediaIn .8s var(--ease-out, ease) both; }
@keyframes svcMediaIn { from { transform: scale(1.03); opacity: .75; } to { transform: none; opacity: 1; } }

/* — Contenuto: ingresso a cascata, punti con pallino fucsia — */
html body .svc-tabs__panel:not(#_):not(#__) .svc-tabs__copy > * { animation: svcCopyIn .55s var(--ease-out, ease) both; }
html body .svc-tabs__panel:not(#_):not(#__) .svc-tabs__copy > *:nth-child(2) { animation-delay: .06s; }
html body .svc-tabs__panel:not(#_):not(#__) .svc-tabs__copy > *:nth-child(3) { animation-delay: .12s; }
html body .svc-tabs__panel:not(#_):not(#__) .svc-tabs__copy > *:nth-child(4) { animation-delay: .18s; }
@keyframes svcCopyIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
html body .svc-tabs__points li:not(#_):not(#__):not(#___)::before { background: var(--primary, #DB005A) !important; }
@media (prefers-reduced-motion: reduce) {
  html body .svc-tabs__panel::before, html body .svc-tabs__media-img,
  html body .svc-tabs__panel .svc-tabs__copy > * { animation: none !important; }
}

/* — Sezioni scure — */
html body main > section.svc-bg-dark .svc-tabs__num:not(#_):not(#__):not(#___) { color: #fff; border-color: rgba(219,0,90,.6); }
html body main > section.svc-bg-dark .svc-tabs__tab.is-done .svc-tabs__num:not(#_):not(#__):not(#___) { background: #3a0f22; }
html body main > section.svc-bg-dark .svc-tabs__tab.is-active .svc-tabs__num:not(#_):not(#__):not(#___) { background: var(--primary, #DB005A); }
html body main > section.svc-bg-dark .svc-tabs__strip:not(#_):not(#__):not(#___)::before { background: rgba(219,0,90,.3); }
html body main > section.svc-bg-dark .svc-tabs__tag:not(#_):not(#__):not(#___) { color: rgba(255,120,175,.9); }
html body main > section.svc-bg-dark .svc-tabs__title:not(#_):not(#__):not(#___) { color: rgba(255,255,255,.8); }
html body main > section.svc-bg-dark .svc-tabs__tab.is-active .svc-tabs__title:not(#_):not(#__):not(#___),
html body main > section.svc-bg-dark .svc-tabs__tab:hover .svc-tabs__title:not(#_):not(#__):not(#___) { color: #fff; }
html body main > section.svc-bg-dark .svc-tabs__panel:not(#_):not(#__):not(#___) { background: #141014; border-color: rgba(255,255,255,.10); box-shadow: 0 14px 32px -22px rgba(0,0,0,.8); }

/* — Tablet e mobile: la barra scorre in orizzontale, i nodi restano interi (padding su tutti i lati) — */
@media (max-width: 1100px) {
  html body .svc-tabs__strip:not(#_):not(#__):not(#___) { overflow-x: auto; overflow-y: hidden; padding: var(--tl-pad-top) 18px 14px; }
  html body .svc-tabs__tab:not(#_):not(#__) { flex: 0 0 auto; }
}

/* — Layout: fisso e dentro la schermata quando i riquadri ci stanno, altrimenti scorre — */
@media (min-width: 1101px) and (min-height: 700px) {
  html body .svc-path:not(.svc-path--flow):not(#_):not(#__):not(#___) { height: 112dvh !important; }
  html body .svc-path:not(.svc-path--flow) .svc-path__sticky:not(#_):not(#__):not(#___) {
    height: 100dvh !important; min-height: 0 !important; overflow: hidden !important;
    padding-top: calc(var(--nav-h) + .5rem) !important; padding-bottom: clamp(.75rem, 2.4dvh, 1.5rem) !important;
  }
  html body .svc-path:not(.svc-path--flow) .svc-path__sticky > .container:not(#_):not(#__):not(#___) { justify-content: center !important; }
  html body .svc-path__sticky .svc-path__head:not(#_):not(#__):not(#___) { margin-bottom: clamp(.5rem, 1.6dvh, 1.25rem) !important; }
  html body .svc-path__sticky .svc-path__head .smm-panel__big-title:not(#_):not(#__):not(#___) { font-size: min(var(--t-sub), 7dvh) !important; }
  html body .svc-path__sticky .svc-tabs:not(#_):not(#__):not(#___) { gap: clamp(.5rem, 1.4dvh, 1.1rem); }
  html body .svc-path:not(.svc-path--flow) .svc-tabs__panels:not(#_):not(#__):not(#___) { flex: 0 1 auto !important; }
  /* il riquadro prende l'altezza (immagine protagonista) e l'immagine la riempie col suo rapporto */
  html body .svc-path:not(.svc-path--flow) .svc-tabs__panel:not(#_):not(#__):not(#___):not(#____) {
    height: auto !important; min-height: clamp(320px, 45dvh, 600px) !important;
    grid-template-columns: min(46%, calc((clamp(320px, 45dvh, 600px) - 2.5rem) * 1.25)) minmax(0, 1fr) !important; grid-template-rows: minmax(0, 1fr);
    padding: clamp(.75rem, 1.8dvh, 1.25rem) !important; align-items: center; gap: clamp(1.5rem, 3vw, 3rem) !important;
  }
  html body .svc-path:not(.svc-path--flow) .svc-tabs__media:not(#_):not(#__):not(#___):not(#____) {
    aspect-ratio: 5 / 4 !important; width: 100% !important; height: auto !important; align-self: center;
  }
}
@media (max-width: 1100px), (max-height: 699px) {
  html body .svc-path:not(#_):not(#__):not(#___) { height: auto !important; min-height: 0 !important; }
  html body .svc-path__sticky:not(#_):not(#__):not(#___) { position: relative !important; height: auto !important; overflow: visible !important; padding-top: max(var(--section-py), calc(var(--nav-h) + .75rem)) !important; padding-bottom: var(--section-py) !important; }
}
html body .svc-path.svc-path--flow:not(#_):not(#__):not(#___) { height: auto !important; min-height: 0 !important; }
html body .svc-path.svc-path--flow .svc-path__sticky:not(#_):not(#__):not(#___) {
  position: relative !important; height: auto !important; min-height: 0 !important; overflow: visible !important;
  padding-top: max(var(--section-py), calc(var(--nav-h) + .75rem)) !important; padding-bottom: var(--section-py) !important;
}
html body .svc-path.svc-path--flow .svc-tabs__panel:not(#_):not(#__):not(#___):not(#____) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; height: auto !important; }
html body .svc-path.svc-path--flow .svc-tabs__media:not(#_):not(#__):not(#___):not(#____):not(#_____) { width: 100% !important; height: auto !important; aspect-ratio: 5 / 4 !important; }
@media (max-width: 760px) {
  html body .svc-tabs__panel:not(#_):not(#__):not(#___):not(#____):not(#_____) { grid-template-columns: minmax(0, 1fr) !important; }
}

/* ── Contatti · hero: titolo e form alle dimensioni originali; il pannello cresce con il contenuto (nessun taglio) ──
   Sopra: sotto la nav. Sotto il form: --section-py, lo stesso respiro che c'è sotto "Vedi tutti i case studies" in home. */
html body .ct-section:not(#_):not(#__):not(#___) { height: auto !important; min-height: 100dvh; }
html body .ct-inner:not(#_):not(#__):not(#___):not(#____) {
  position: relative !important; top: auto !important; height: auto !important; min-height: 100dvh; overflow: visible !important;
  padding-top: calc(var(--nav-h) + .5rem) !important; padding-bottom: var(--section-py) !important; justify-content: center !important;
}

/* ── Contatti: sezione "Facciamo prendere forma…" compatta, testo leggibile, social ──
   Nessun box nuovo: solo spazi reali della sezione e resa di testo e icone. */
html body .contact-hub:not(#_):not(#__):not(#___) { height: auto !important; min-height: 0 !important; }
/* spazio sopra e sotto = quello della sezione Case Studies in home (--section-py); angoli: solo quelli alti della sezione che sale, mai quelli bassi */
html body .contact-hub > .container:not(#_):not(#__):not(#___) {
  position: relative !important; top: auto !important; height: auto !important; min-height: 0 !important; overflow: visible !important;
  padding-top: var(--section-py) !important; padding-bottom: var(--section-py) !important; justify-content: flex-start !important;
  border-radius: inherit !important;
}
html body .contact-hub:not(#_):not(#__):not(#___) { border-bottom-left-radius: 0 !important; border-bottom-right-radius: 0 !important; }
html body .contact-hub__claim-big:not(#_):not(#__):not(#___):not(#____) { font-size: var(--t-sub) !important; font-weight: 900 !important; letter-spacing: -0.03em !important; line-height: 1 !important; }
html body .contact-hub__claim-intro:not(#_):not(#__):not(#___):not(#____) {
  color: var(--ink-body) !important; font-size: clamp(1rem, 1.3vw, 1.2rem) !important; font-weight: 500 !important; line-height: 1.6 !important; opacity: 1 !important; letter-spacing: 0 !important;
}
/* social: solo icone, grandi, uguali, in riga regolare; area cliccabile 56px */
html body .contact-hub__socials:not(#_):not(#__) { display: flex; flex-wrap: nowrap; justify-content: center; gap: clamp(6px, .8vw, 14px); }
html body .contact-hub__social:not(#_):not(#__) {
  display: grid; place-items: center; width: clamp(40px, 3.6vw, 56px); height: clamp(40px, 3.6vw, 56px); border-radius: 50%; flex: none;
  background: var(--primary, #DB005A); color: #fff; text-decoration: none; cursor: pointer;
  transition: background var(--dur-fast, 180ms) var(--ease-out, ease), transform var(--dur-fast, 180ms) var(--ease-out, ease), box-shadow var(--dur-fast, 180ms) var(--ease-out, ease);
}
html body .contact-hub__social .contact-hub__icon:not(#_):not(#__) { width:  clamp(18px, 1.7vw, 26px) !important; height: clamp(18px, 1.7vw, 26px) !important; color: #fff; }
html body .contact-hub__social:hover:not(#_):not(#__), html body .contact-hub__social:focus-visible:not(#_):not(#__) {
  background: #000; transform: translateY(-2px); box-shadow: var(--shadow-md);
}
html body .contact-hub__social:focus-visible:not(#_):not(#__) { outline: 3px solid var(--primary, #DB005A); outline-offset: 3px; }
@media (max-width: 768px) {
  html body .contact-hub__social:not(#_):not(#__) { width: 56px; height: 56px; }
  html body .contact-hub__social .contact-hub__icon:not(#_):not(#__) { width: 26px !important; height: 26px !important; }
  html body .contact-hub__socials:not(#_):not(#__) { gap: 14px; }
}

/* ── Contatti: form un po' più basso di prima e più aria sotto "Scrivici, facci domande…" ── */
html body .ct-inner .ct-col .hc-header:not(#_):not(#__):not(#___) { margin-bottom: clamp(1.25rem, 2.4vw, 2.25rem) !important; }
html body .ct-inner .hc-form:not(#_):not(#__):not(#___):not(#____) { padding: clamp(1.25rem, 2.4vw, 2rem) clamp(1.5rem, 3vw, 2.5rem) !important; }
html body .ct-inner .hc-form, html body .ct-inner .hc-form .hc-row { gap: .55rem !important; }
html body .ct-inner .hc-form textarea.svc-caffe__field:not(#_):not(#__):not(#___):not(#____) { min-height: 80px !important; height: 80px !important; }

/* ── Contatti: il fondo del pannello bianco è un colore pieno, non solo un gradiente ──
   Lo script degli angoli (js/main.js) campiona il colore sopra il footer che sale: con il solo
   gradiente trovava il nero di .contact-hub e lo mostrava dietro gli angoli del footer. */
html body .contact-hub > .container:not(#_):not(#__):not(#___) { background-color: #fff !important; }

/* ── Form nella hero delle pagine servizi: "Invia" in hover = sfondo bianco, testo nero ──
   (come le CTA su fondo scuro del sito; niente tendina nera) */
html body .svc-hero__form-card .svc-hero__submit:not(#_):not(#__):not(#___)::before { display: none !important; }
html body .svc-hero__form-card .svc-hero__submit:not(#_):not(#__):not(#___) { border: 2px solid var(--primary, #DB005A); }
html body .svc-hero__form-card .svc-hero__submit:hover:not(#_):not(#__):not(#___),
html body .svc-hero__form-card .svc-hero__submit:focus-visible:not(#_):not(#__):not(#___) {
  background: #fff !important; color: #000 !important; border-color: #fff !important;
}

/* ── Homepage · FAQ (sezione nera): risposta chiara e leggibile ──
   Il blocco "FAQ globali" colorava le risposte in nero (corretto sul bianco, illeggibile sul nero
   della home). Qui le risposte seguono il fondo: bianco all'80%, peso 400, 16px, interlinea 1,7;
   le domande restano bianche a 20px/600, quindi DOMANDA > RISPOSTA. */
html body #faq .page-faq__answer-inner:not(#_):not(#__):not(#___):not(#____),
html body #faq .page-faq__answer-inner p:not(#_):not(#__):not(#___):not(#____) {
  color: var(--ink-body-dark) !important; font-size: var(--text-body, 1rem) !important; font-weight: 400 !important;
  line-height: 1.7 !important; opacity: 1 !important;
}
html body #faq .page-faq__answer-inner strong:not(#_):not(#__):not(#___):not(#____),
html body #faq .page-faq__answer-inner a:not(#_):not(#__):not(#___):not(#____) { color: #fff !important; font-weight: 700 !important; }

/* ── Influencer · "I talent pronti…": l'immagine finisce pulita, senza alone scuro ──
   Veniva da box-shadow: 0 32px 80px rgba(0,0,0,.14) !important su .svc-talent-pronti__visual. */
html body main .svc-talent-pronti__visual:not(#_):not(#__):not(#___),
html body main > section.svc-bg-dark.svc-talent-pronti .svc-talent-pronti__visual:not(#_):not(#__):not(#___) {
  box-shadow: none !important; filter: none !important;
}
html body main .svc-talent-pronti__visual img:not(#_):not(#__):not(#___) { filter: none !important; box-shadow: none !important; }
html body main .svc-talent-pronti__visual:not(#_):not(#__):not(#___)::before,
html body main .svc-talent-pronti__visual:not(#_):not(#__):not(#___)::after { content: none !important; display: none !important; }

/* ════════════════════════════════════════════════════════════════════
   SCHERMI ZOOMATI / BASSI (zoom del browser 125–200%, finestre basse)
   Condizione: desktop con altezza ≤ 820px. Sopra questa altezza non cambia nulla.
   Hero delle pagine servizi: tutto il contenuto dentro la schermata, senza scroll interno;
   si lavora su padding, gap, altezze dei campi e corpo del titolo, non si nasconde nulla.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 861px) and (max-height: 820px) {
  html body .svc-hero--videobg:not(#_):not(#__):not(#___) { min-height: 100dvh !important; height: auto !important; }
  html body .svc-hero--videobg .svc-hero__inner:not(#_):not(#__):not(#___) {
    padding-top: clamp(.5rem, 1.6dvh, 1rem) !important; padding-bottom: clamp(.75rem, 2.4dvh, 1.5rem) !important;
    align-items: center !important; min-height: calc(100dvh - var(--nav-h)) !important; box-sizing: border-box;
  }
  html body .svc-hero__title:not(#_):not(#__):not(#___):not(#____) { font-size: min(var(--t-h1), 10.5dvh) !important; }
  html body .svc-hero__left:not(#_):not(#__):not(#___) { gap: clamp(.5rem, 1.6dvh, 1rem) !important; }
  html body .svc-hero__platforms:not(#_):not(#__):not(#___) img { width: clamp(28px, 4.4dvh, 40px); height: auto; }
  html body .svc-hero__sub:not(#_):not(#__):not(#___) { margin-block: 0 !important; line-height: 1.45 !important; }
  /* card del form */
  html body .svc-hero__form-card:not(#_):not(#__):not(#___) { padding: clamp(.75rem, 2dvh, 1.5rem) clamp(1rem, 1.6vw, 1.5rem) !important; }
  html body .svc-hero__form-card-label:not(#_):not(#__):not(#___) { margin-bottom: clamp(6px, 1.4dvh, 14px) !important; }
  html body .svc-hero__form:not(#_):not(#__):not(#___), html body .svc-hero__form-row:not(#_):not(#__):not(#___) { gap: clamp(6px, 1.2dvh, 10px) !important; }
  html body .svc-hero__form-card .svc-hero__field:not(#_):not(#__):not(#___):not(#____) { padding-block: clamp(6px, 1.2dvh, 12px) !important; }
  html body .svc-hero__form-card .svc-hero__textarea:not(#_):not(#__):not(#___):not(#____) { height: clamp(44px, 8dvh, 84px) !important; min-height: 0 !important; overflow: hidden; }
  html body .svc-hero__form-card .f-label:not(#_):not(#__):not(#___) { margin-bottom: 2px !important; }
  html body .svc-hero__form-card .svc-hero__submit:not(#_):not(#__):not(#___):not(#____) { min-height: clamp(38px, 6dvh, 48px) !important; padding-block: 8px !important; margin-top: 2px !important; }
}
@media (min-width: 861px) and (max-height: 620px) {
  html body .svc-hero__title:not(#_):not(#__):not(#___):not(#____) { font-size: min(var(--t-h1), 9dvh) !important; line-height: .98 !important; }
  html body .svc-hero__form-card:not(#_):not(#__):not(#___) { padding: .6rem 1rem !important; }
  html body .svc-hero__form-card .svc-hero__field:not(textarea):not(#_):not(#__):not(#___):not(#____) { padding-block: 7px !important; }
    html body .svc-hero__form-card .hc-consents:not(#_):not(#__):not(#___) { gap: 2px !important; }
  html body .svc-hero__form-card .svc-hero__submit:not(#_):not(#__):not(#___):not(#____) { min-height: 38px !important; padding-block: 6px !important; }
  html body .svc-hero__left:not(#_):not(#__):not(#___) { gap: .4rem !important; }
}
@media (min-width: 861px) and (max-height: 620px) {
  /* informativa privacy = microcopy a 14px (scala del design system) */
  html body .svc-hero__form-card .hc-consents .svc-caffe__privacy,
  html body .svc-hero__form-card .hc-consents .svc-caffe__privacy span,
  html body .svc-hero__form-card .hc-consents .svc-caffe__privacy a,
  html body .svc-hero__form-card .hc-consents .svc-caffe__privacy em { font-size: 14px !important; line-height: 1.3 !important; }
  html body .svc-hero--videobg .svc-hero__inner:not(#_):not(#__):not(#___) { padding-bottom: .5rem !important; }
}

/* ── Zoom/schermi bassi: hero Dama24 e hero Contatti dentro la schermata (stessa condizione: desktop, altezza ≤ 820px) ── */
@media (min-width: 861px) and (max-height: 820px) {
  html body .d24-hero__inner:not(#_):not(#__):not(#___) { padding-bottom: clamp(.75rem, 2.4dvh, 1.5rem) !important; }
  html body .d24-hero__meta:not(#_):not(#__):not(#___) { padding-top: clamp(.75rem, 2.4dvh, 1.5rem) !important; padding-bottom: clamp(.75rem, 2.6dvh, 1.75rem) !important; }
  html body .d24-hero__logo:not(#_):not(#__):not(#___) { max-height: 22dvh; width: auto; }

  html body .ct-section:not(#_):not(#__):not(#___) { min-height: 100dvh; }
  html body .ct-inner:not(#_):not(#__):not(#___):not(#____) {
    min-height: 100dvh; padding-top: calc(var(--nav-h) + .25rem) !important; padding-bottom: clamp(.75rem, 3dvh, 1.75rem) !important; justify-content: center !important;
  }
  html body .ct-inner .ct-col .hc-title:not(#_):not(#__):not(#___):not(#____) { font-size: min(150px, 26vw, 12dvh) !important; }
  html body .ct-inner .ct-col .hc-header:not(#_):not(#__):not(#___) { margin-bottom: clamp(.5rem, 1.6dvh, 1.25rem) !important; }
  html body .ct-inner .hc-form:not(#_):not(#__):not(#___):not(#____) { padding: clamp(.75rem, 1.8dvh, 1.5rem) clamp(1.25rem, 2.4vw, 2rem) !important; gap: clamp(5px, 1dvh, 9px) !important; }
  html body .ct-inner .hc-form .hc-row:not(#_):not(#__):not(#___) { gap: clamp(5px, 1dvh, 9px) !important; }
  html body .ct-inner .hc-form input.svc-caffe__field:not(#_):not(#__):not(#___):not(#____) { height: clamp(34px, 4.8dvh, 50px) !important; min-height: 0 !important; }
  html body .ct-inner .hc-form textarea.svc-caffe__field:not(#_):not(#__):not(#___):not(#____) { height: clamp(40px, 7dvh, 80px) !important; min-height: 0 !important; }
  html body .ct-inner .hc-form .f-label:not(#_):not(#__):not(#___) { margin-bottom: 2px !important; }
}
@media (min-width: 861px) and (max-height: 620px) {
  html body .ct-inner .hc-form:not(#_):not(#__):not(#___):not(#____) { zoom: .86; }
  html body .ct-inner .hc-form .svc-caffe__privacy, html body .ct-inner .hc-form .svc-caffe__privacy span, html body .ct-inner .hc-form .svc-caffe__privacy a { font-size: 14px !important; line-height: 1.3 !important; }
}

/* ── Contatti zoom: ulteriore compattezza, mai scroll dentro il form ── */
html body .ct-inner .hc-form textarea.svc-caffe__field:not(#_):not(#__):not(#___):not(#____),
html body .svc-hero__form-card textarea:not(#_):not(#__):not(#___):not(#____) { overflow-y: hidden !important; resize: none !important; }
@media (min-width: 861px) and (max-height: 820px) {
  html body .ct-inner .ct-col .hc-title:not(#_):not(#__):not(#___):not(#____) { font-size: min(150px, 26vw, 10dvh) !important; }
  html body .ct-inner .ct-col .hc-sub:not(#_):not(#__):not(#___) { font-size: 14px !important; letter-spacing: .04em !important; }
  html body .ct-inner .hc-form .svc-caffe__privacy, html body .ct-inner .hc-form .svc-caffe__privacy span, html body .ct-inner .hc-form .svc-caffe__privacy a, html body .ct-inner .hc-form .svc-caffe__privacy em { font-size: 14px !important; line-height: 1.3 !important; }
  html body .ct-inner .hc-form .hc-consents:not(#_):not(#__):not(#___) { gap: 2px !important; }
  html body .ct-inner .hc-form .hc-submit:not(#_):not(#__):not(#___):not(#____) { min-height: 40px !important; padding-block: 8px !important; }
}
@media (min-width: 861px) and (max-height: 620px) {
  html body .ct-inner .hc-form:not(#_):not(#__):not(#___):not(#____) { zoom: .8; }
  html body .ct-inner .ct-col .hc-title:not(#_):not(#__):not(#___):not(#____) { font-size: min(150px, 26vw, 9dvh) !important; }
}
@media (min-width: 861px) and (max-height: 820px) {
  /* il titolo si riduce: la colonna (che prende la larghezza dal titolo) non scende sotto una misura utile per il form */
  html body .ct-inner .ct-col:not(#_):not(#__):not(#___) { min-width: min(100%, 600px); }
}

/* ── Zoom forte (larghezza 761–1100px): le card delle timeline restano immagine a sinistra + testo e CTA a destra ──
   Web Design e tutte le pagine che usano la stessa timeline: la composizione NON diventa una pila verticale;
   si stringono colonne, gap, padding e il corpo dell'immagine. Sotto i 761px (telefono) resta la pila. */
@media (min-width: 761px) and (max-width: 1100px) {
  html body #wd-stack .svc-tabs__panel.wd-pan:not(#_):not(#__):not(#___),
  html body main > section.svc-path .svc-tabs__panel:not(#_):not(#__):not(#___):not(#____) {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important; grid-template-rows: auto !important;
    gap: clamp(1rem, 2.4vw, 2rem) !important; padding: clamp(.9rem, 2vw, 1.5rem) !important; align-items: center !important; height: auto !important;
  }
  html body #wd-stack .svc-tabs__panel.wd-pan .svc-tabs__media:not(#_):not(#__):not(#___):not(#____),
  html body main > section.svc-path .svc-tabs__media:not(#_):not(#__):not(#___):not(#____):not(#_____) {
    order: 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 5 / 4 !important;
  }
  html body #wd-stack .svc-tabs__panel.wd-pan .wd-shot:not(#_):not(#__):not(#___) { min-height: 0 !important; height: 100% !important; }
  html body #wd-stack .svc-tabs__panel.wd-pan .svc-tabs__copy:not(#_):not(#__):not(#___):not(#____),
  html body main > section.svc-path .svc-tabs__copy:not(#_):not(#__):not(#___):not(#____) {
    order: 1 !important; padding: 0 !important; gap: clamp(.5rem, 1.4vw, 1rem) !important; justify-content: center !important;
  }
}

/* ── Zoom (altezza ≤ 820px): campo "Messaggio" più alto, spazio distribuito invece di comprimere i campi ──
   La card del form riempie l'altezza disponibile nella hero e il surplus va alla textarea (con tetto);
   input, label, CTA e padding restano alle misure compatte già definite. */
@media (min-width: 861px) and (max-height: 820px) {
  html body .svc-hero--videobg .svc-hero__right:not(#_):not(#__):not(#___) { align-self: stretch !important; display: flex !important; flex-direction: column; justify-content: center; }
  html body .svc-hero__form-card:not(#_):not(#__):not(#___):not(#____) { display: flex !important; flex-direction: column; flex: 0 1 auto; max-height: 100%; }
  html body .svc-hero__form-card .svc-hero__form:not(#_):not(#__):not(#___):not(#____) { display: flex !important; flex-direction: column; flex: 1 1 auto; min-height: 0; }
  html body .svc-hero__form-card .svc-hero__form > .f-field:has(textarea):not(#_):not(#__):not(#___) { display: flex; flex-direction: column; flex: 1 1 0; min-height: 0; }
  html body .svc-hero__form-card .svc-hero__textarea:not(#_):not(#__):not(#___):not(#____):not(#_____) {
    flex: 1 1 0; height: auto !important; min-height: clamp(64px, 11dvh, 96px) !important; max-height: 190px; overflow-y: hidden !important;
  }
  html body .svc-hero--videobg .svc-hero__inner:not(#_):not(#__):not(#___):not(#____) { padding-bottom: clamp(.4rem, 1.6dvh, 1rem) !important; }
}
@media (min-width: 861px) and (max-height: 620px) {
  html body .svc-hero__form-card .svc-hero__textarea:not(#_):not(#__):not(#___):not(#____):not(#_____) { min-height: 56px !important; }
}

/* ── Zoom: la gerarchia dei titoli resta evidente (titolo hero > titoli di sezione) ──
   Con poca altezza i titoli di sezione scendono più di quelli della hero:
   hero ≈ 10,5dvh (9dvh sotto 620px) contro sezioni ≈ 8,2dvh (6,6dvh). */
@media (min-width: 861px) and (max-height: 820px) {
  :root:not(#_):not(#__) { --t-sub: min(clamp(1.75rem, 5.2vw, 5.1rem), 8.2dvh); --t-cta: min(clamp(1.9rem, 4.6vw, 5.5rem), 7.4dvh); }
}
@media (min-width: 861px) and (max-height: 620px) {
  :root:not(#_):not(#__) { --t-sub: min(clamp(1.75rem, 5.2vw, 5.1rem), 6.6dvh); --t-cta: min(clamp(1.9rem, 4.6vw, 5.5rem), 6.2dvh); }
}
@media (min-width: 861px) and (max-height: 820px) {
  /* il surplus verticale della hero va alla textarea (fino a 150px) */
  html body .svc-hero__form-card:not(#_):not(#__):not(#___):not(#____):not(#_____) { flex: 1 1 auto; }
  html body .svc-hero__form-card .svc-hero__textarea:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) { max-height: 150px; }
}
@media (min-width: 861px) and (max-height: 620px) {
  html body .svc-hero__form-card .svc-hero__textarea:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) { min-height: 62px !important; }
  html body .svc-hero__form-card:not(#_):not(#__):not(#___):not(#____):not(#_____) { padding: .5rem 1rem !important; }
  html body .svc-hero__form-card .svc-hero__form-card-label { margin-bottom: 4px !important; }
  html body .svc-hero__form-card .svc-hero__form, html body .svc-hero__form-card .svc-hero__form-row { gap: 4px !important; }
  html body .svc-hero__form-card .svc-hero__field:not(textarea):not(#_):not(#__):not(#___):not(#____):not(#_____) { padding-block: 6px !important; }
}
@media (min-width: 861px) and (max-height: 620px) {
  html body .svc-hero__form-card .svc-hero__textarea:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______) { min-height: 56px !important; }
  html body .svc-hero__form-card .svc-hero__submit:not(#_):not(#__):not(#___):not(#____):not(#_____) { min-height: 36px !important; }
  html body .svc-hero__form-card .hc-consents { gap: 0 !important; margin-top: 0 !important; }
  html body .svc-hero--videobg .svc-hero__inner:not(#_):not(#__):not(#___):not(#____):not(#_____) { padding-bottom: .3rem !important; }
}
@media (min-width: 861px) and (max-height: 820px) {
  html body .svc-hero__form-card:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) { gap: clamp(4px, 1dvh, 10px) !important; row-gap: clamp(4px, 1dvh, 10px) !important; }
  html body .svc-hero__form-card .svc-hero__form-card-label:not(#_):not(#__):not(#___):not(#____) { margin-bottom: 0 !important; }
}
@media (min-width: 861px) and (max-height: 620px) {
  html body .svc-hero__form-card .hc-consents .svc-caffe__privacy, html body .svc-hero__form-card .hc-consents .svc-caffe__privacy span { line-height: 1.2 !important; }
}
@media (min-width: 861px) and (max-width: 1100px) and (max-height: 820px) {
  /* colonna del form più larga: meno righe di informativa, più altezza per il messaggio */
  html body .svc-hero--videobg .svc-hero__inner:not(#_):not(#__):not(#___):not(#____):not(#_____) { grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr) !important; }
}

/* ── Zoom: titoli di sezione delle pagine servizi sul token ridotto, così il titolo hero resta ≥ 1,25× ── */
@media (min-width: 861px) and (max-height: 820px) {
  html body main > section.svc-path .svc-path__head .smm-panel__big-title:not(#_):not(#__):not(#___):not(#____),
  html body :is(.svc-section-title, .svc-tools__title, .imk-intro__title, .svc-talent-pronti__title, .svc-ai-approccio__title, .svc-ai-workflow__title, .svc-process__title, .smm-panel__big-title, .pc-prod__title, .svc-caffe__title, .page-faq__title, .svc-clients__title):not(#_):not(#__):not(#___):not(#____) {
    font-size: var(--t-sub) !important;
  }
  html body .nw-hero__title:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) { font-size: min(var(--t-h1), 10.5dvh) !important; }
  html body .ct-inner .ct-col .hc-title:not(#_):not(#__):not(#___):not(#____):not(#_____) { font-size: min(150px, 26vw, 10.5dvh) !important; }
}

/* ════════════════════════════════════════════════════════════════════
   GERARCHIA TIPOGRAFICA NELLO ZOOM (desktop, altezza ≤ 820px)
   Hero ≈ 1,4 × titolo di sezione ≈ 1,4² × titolo di card.
   Si riusano i token del design system (--t-h1, --t-hero, --t-sub, --t-xl, --t-svc, --t-amici, --t-cta):
   il titolo hero NON si riduce; scendono i livelli sotto, in proporzione.
   Fuori da questa condizione i token restano quelli di tokens.css.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 861px) and (max-height: 820px) {
  :root:not(#_):not(#__):not(#___) {
    --z-hero: min(clamp(2.2rem, 6.2vw, 5.6rem), 10.5dvh);       /* H1 di pagina (servizi, News, Tips, Contatti…) */
    --z-hero-home: clamp(3rem, 7vw, 9rem);                        /* hero homepage = --t-hero */
    --t-sub:   calc(var(--z-hero) / 1.4);                         /* titoli di sezione */
    --t-cta:   calc(var(--z-hero) / 1.4);
    --t-xl:    min(150px, 10vw, calc(var(--z-hero-home) / 1.4));  /* titoli brevi di sezione in home */
    --t-svc:   min(clamp(1.75rem, 6.2vw, 7.4rem), calc(var(--z-hero-home) / 1.4));
    --t-amici: min(clamp(1rem, 5.2vw, 5.1rem), calc(var(--z-hero-home) / 1.4));
    --t-card:  calc(var(--t-sub) / 1.4);                          /* titoli di card/contenuto */
  }
}
@media (min-width: 861px) and (max-height: 620px) {
  :root:not(#_):not(#__):not(#___) { --z-hero: min(clamp(2.2rem, 6.2vw, 5.6rem), 9dvh); }
}
@media (min-width: 861px) and (max-height: 820px) {
  /* titoli di card/contenuto: sempre sotto il titolo di sezione (≈ 1/1,4) */
  html body .contact-hub__title:not(#_):not(#__):not(#___):not(#____) { font-size: min(clamp(1.8rem, 3vw, 2.6rem), max(18px, var(--t-card))) !important; line-height: 1.05 !important; }
  /* titoli grandi più compatti in altezza */
  html body :is(.svc-hero__title, .nw-hero__title, .lcn-hero__title, .cs-hero__title, .hc-title, .faq-hero__title):not(#_):not(#__):not(#___):not(#____):not(#_____) { line-height: .98 !important; }
  html body :is(.smm-panel__big-title, .svc-section-title, .cs-works__title, .contact-hub__claim-big, .lcn-about__title, .nw-contact__title, .faq-contact__title):not(#_):not(#__):not(#___):not(#____):not(#_____) { line-height: 1 !important; }
}

/* ── Zoom: UN solo corpo per tutti i titoli di sezione, quello di "Passaparola" (--t-xl) ──
   Il titolo hero resta il più grande (hero = 1,4 × sezione). I titoli lunghi vanno a capo
   o restano su più righe: la font-size non cambia mai in base alla lunghezza. */
@media (min-width: 861px) and (max-height: 820px) {
  :root:not(#_):not(#__):not(#___):not(#____) {
    --t-section: calc(var(--z-hero) / 1.4);
    --t-xl: var(--t-section); --t-sub: var(--t-section); --t-cta: var(--t-section);
    --t-svc: var(--t-section); --t-amici: var(--t-section); --t-card: calc(var(--t-section) / 1.4);
  }
  html body :is(.wall__title, .cs2__title, .tips-section__heading, .svc-title, .svc-clients__title, #contatti .hc-title,
    .cs-works__title, .cs-cta__title, .contact-hub__claim-big, .page-faq__title, .faq-contact__title, .nw-contact__title,
    .lcn-about__title, .lcn-positions__heading, .lcn-apply__title, .art-pricing__title, .art-timeline__title, .art-results__title,
    .art-faq__title, .art-contact__title, .tt-contact__title, .cs2-contact__title, .smm-panel__big-title, .svc-section-title,
    .svc-tools__title, .imk-intro__title, .svc-talent-pronti__title, .svc-ai-approccio__title, .svc-ai-workflow__title,
    .svc-process__title, .pc-prod__title, .svc-caffe__title):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______) {
    font-size: var(--t-section) !important; line-height: 1 !important; letter-spacing: -0.03em !important; font-weight: 900 !important;
  }
}
@media (min-width: 861px) and (max-height: 620px) {
  :root:not(#_):not(#__):not(#___):not(#____) { --z-hero: min(clamp(2.2rem, 6.2vw, 5.6rem), 9dvh); }
}

/* ── Zoom · Home: titoli di sezione più grandi (hero home resta più grande: hero = 1,2 × sezione) ──
   Case Studies, Tips, Servizi, Alcuni amici, FAQ, Contatti, About. "Alcuni amici" è su due righe fisse:
   il corpo è limitato dalla larghezza (5,2vw, come in tokens.css) perché ogni riga entri intera. */
@media (min-width: 861px) and (max-height: 820px) {
  html:has(.ht-hero) :root, html:has(.ht-hero) {
    --t-home-section: calc(var(--z-hero-home) / 1.2);
  }
  html:has(.ht-hero) body :is(.wall__title, .cs2__title, .tips-section__heading, .svc-title, #contatti .hc-title, #faq .page-faq__title):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______):not(#________) {
    font-size: var(--t-home-section) !important;
  }
  html:has(.ht-hero) body .svc-clients__title:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______):not(#________) {
    font-size: min(var(--t-home-section), 5.2vw) !important;
  }
}

/* ── Zoom: i valori dei titoli della home valgono per TUTTE le pagine ──
   sezione = hero home / 1,2 (74,7px a 1280×720); la hero di ogni pagina = hero home (--t-hero), quindi
   resta 1,2× i titoli di sezione. Card = sezione / 1,4. Nessuna dimensione per singola pagina. */
@media (min-width: 861px) and (max-height: 820px) {
  :root:not(#_):not(#__):not(#___):not(#____):not(#_____) {
    --z-hero: var(--z-hero-home);
    --t-section: calc(var(--z-hero-home) / 1.2);
    --t-xl: var(--t-section); --t-sub: var(--t-section); --t-cta: var(--t-section); --t-svc: var(--t-section);
    --t-amici: min(var(--t-section), 5.2vw); --t-card: calc(var(--t-section) / 1.4); --t-home-section: var(--t-section);
  }
  html body :is(.svc-hero__title, .nw-hero__title, .lcn-hero__title, .cs-hero__title, .ct-inner .ct-col .hc-title):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______) {
    font-size: var(--z-hero) !important; line-height: .98 !important;
  }
}
@media (min-width: 861px) and (max-height: 620px) {
  :root:not(#_):not(#__):not(#___):not(#____):not(#_____) { --z-hero: var(--z-hero-home); }
}
@media (min-width: 861px) and (max-height: 820px) {
  /* "Alcuni amici…" è su due righe fisse: stesso criterio della home (corpo limitato dalla larghezza) */
  html body .svc-clients__title:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______):not(#________) { font-size: var(--t-amici) !important; }
  /* "Prendiamoci un caffè": la colonna del titolo non scende sotto la parola più lunga, la font-size non cambia */
  html body .svc-caffe .svc-caffe__inner:not(#_):not(#__):not(#___):not(#____) { grid-template-columns: minmax(min-content, 1.12fr) minmax(0, .88fr) !important; }
}
@media (min-width: 861px) and (max-height: 820px) {
  /* la colonna del titolo hero non scende sotto la parola più lunga (la font-size non si tocca) */
  html body .svc-hero--videobg .svc-hero__inner:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) { grid-template-columns: minmax(min-content, 1fr) minmax(0, 1.1fr) !important; }
  html body .svc-ai-approccio__inner:not(#_):not(#__):not(#___):not(#____) { grid-template-columns: minmax(min-content, 1.08fr) minmax(0, .92fr) !important; }
}
@media (min-width: 861px) and (max-height: 620px) {
  /* colonna testo della hero: solo interlinee e gap (il corpo del titolo non cambia) */
  html body .svc-hero__title:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______):not(#________) { line-height: .9 !important; margin-bottom: 4px !important; }
  html body .svc-hero__sub:not(#_):not(#__):not(#___):not(#____) { line-height: 1.3 !important; font-size: 14px !important; }
  html body .svc-hero__platforms:not(#_):not(#__):not(#___) { margin-bottom: 8px !important; }
  html body .svc-hero__kicker:not(#_):not(#__):not(#___) { margin-bottom: 2px !important; }
}
@media (min-width: 861px) and (max-height: 820px) { :root:not(#_):not(#__):not(#___) { --hero-min: min(max(34rem, 72dvh), 100dvh); } }
@media (min-width: 861px) and (max-height: 820px) {
  /* stessi valori della home anche nel case study Fanuc e negli articoli */
  html body :is(.d24-block__title, .d24-numbers__title, .d24-results__title, .d24-contact__title):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______):not(#________) {
    font-size: var(--t-section) !important; line-height: 1 !important; letter-spacing: -0.03em !important;
  }
  html body :is(.art-hero__title, .tt-hero__title):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______):not(#________) {
    font-size: var(--z-hero) !important; line-height: .98 !important;
  }
}
@media (min-width: 861px) and (max-height: 820px) {
  /* articolo news: il titolo hero (a corpo pieno) usa tutta la larghezza: la corsia "Ultime news" parte dal corpo, non dalla hero */
  html body .art-hero__inner:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) { padding-right: var(--gutter) !important; }
}

/* ── Zoom: hero che stanno nella schermata (senza tagli) ── */
@media (min-width: 861px) and (max-height: 820px) {
  /* le righe del titolo sono quelle decise dai <br>: niente righe in più per il solo corpo grande */
  html body .svc-hero__title:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______):not(#________):not(#_________) { white-space: nowrap !important; }
}
@media (min-width: 861px) and (max-height: 700px) {
  /* Contatti: form ridotto in proporzione tra 621 e 700px di altezza (sotto i 620 resta 0,8) */
  html body .ct-inner .hc-form:not(#_):not(#__):not(#___):not(#____) { zoom: .88; }
}
@media (min-width: 861px) and (max-height: 620px) {
  html body .ct-inner .hc-form:not(#_):not(#__):not(#___):not(#____):not(#_____) { zoom: .8; }
}

/* ════════════════════════════════════════════════════════════════════
   ZOOM · hero: mai tagliate, mai sotto la nav (desktop, altezza ≤ 820px)
   Le hero crescono con il contenuto (min-height = schermata) invece di avere un'altezza fissa
   che taglia sopra (sotto la nav) o sotto; gli spazi si riducono, i corpi dei titoli no.
   ════════════════════════════════════════════════════════════════════ */
@media (min-width: 861px) and (max-height: 820px) {
  /* News e Tips: testo sotto la nav, altezza minima uguale alla FAQ ma libera di crescere */
  html body :is(.faq-hero, .nw-hero):not(#_):not(#__):not(#___):not(#____):not(#_____) { height: auto !important; min-height: var(--hero-min) !important; }
  html body .nw-hero:not(#_):not(#__):not(#___):not(#____):not(#_____) {
    padding-top: calc(var(--nav-h) + 1.25rem) !important; padding-bottom: clamp(1.5rem, 4dvh, 3rem) !important; justify-content: flex-end !important;
  }
  html body .nw-hero .nw-hero__title:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______) { max-width: none; }

  /* Articoli (News e Tips): la hero sta nella schermata */
  html body :is(.art-hero, .tt-hero):not(#_):not(#__):not(#___):not(#____):not(#_____) {
    min-height: 0 !important; height: auto !important;
    padding-top: calc(var(--nav-h) + 1rem) !important; padding-bottom: clamp(1rem, 3dvh, 2rem) !important;
  }
  html body :is(.art-hero, .tt-hero) :is(.art-hero__meta, .tt-hero__meta):not(#_):not(#__):not(#___) { margin-bottom: .5rem !important; }
  html body :is(.art-hero__intro, .tt-hero__intro):not(#_):not(#__):not(#___):not(#____) { margin-top: .5rem !important; }

  /* Lavora con noi: altezza minima = schermata, nessun ritaglio; più respiro sopra e sotto */
  html body main > section.lcn-hero:not(#_):not(#__):not(#___):not(#____) {
    height: auto !important; min-height: 100dvh !important; overflow: visible !important;
    padding-top: calc(var(--nav-h) + 2rem) !important; padding-bottom: clamp(1.5rem, 4dvh, 3rem) !important;
  }
}

/* ── Zoom · timeline Web Design (e analoghe): sempre placeholder/immagine a sinistra, testo + CTA a destra ── */
@media (min-width: 761px) and (max-height: 820px) {
  html body #wd-stack .svc-tabs__panel.wd-pan:not(#_):not(#__):not(#___):not(#____),
  html body main > section.svc-path .svc-tabs__panel:not(#_):not(#__):not(#___):not(#____):not(#_____) {
    grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr) !important; grid-template-rows: auto !important; height: auto !important;
    gap: clamp(1rem, 2.4vw, 2.5rem) !important; padding: clamp(.9rem, 2vw, 1.75rem) !important; align-items: center !important;
  }
  html body #wd-stack .svc-tabs__panel.wd-pan .svc-tabs__media:not(#_):not(#__):not(#___):not(#____):not(#_____),
  html body main > section.svc-path .svc-tabs__media:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) {
    order: 0 !important; width: 100% !important; height: auto !important; min-height: 0 !important; aspect-ratio: 5 / 4 !important;
  }
  html body #wd-stack .svc-tabs__panel.wd-pan .svc-tabs__copy:not(#_):not(#__):not(#___):not(#____):not(#_____),
  html body main > section.svc-path .svc-tabs__copy:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) {
    order: 1 !important; padding: 0 !important; justify-content: center !important;
  }
}

/* ── Zoom · Contatti: titolo hero > titolo di sezione, form meno compresso (messaggio utilizzabile) ── */
@media (min-width: 861px) and (max-height: 820px) {
  html body .ct-inner .ct-col .hc-title:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______):not(#________) { font-size: calc(var(--z-hero) * 1.12) !important; }
  html body .ct-inner .hc-form:not(#_):not(#__):not(#___):not(#____):not(#_____) { zoom: 1 !important; }
  html body .ct-inner .hc-form input.svc-caffe__field:not(#_):not(#__):not(#___):not(#____):not(#_____) { height: clamp(36px, 5dvh, 46px) !important; }
  html body .ct-inner .hc-form textarea.svc-caffe__field:not(#_):not(#__):not(#___):not(#____):not(#_____) { height: clamp(76px, 13dvh, 130px) !important; min-height: 0 !important; }
  html body .ct-section:not(#_):not(#__):not(#___):not(#____) { height: auto !important; }
  html body .ct-inner:not(#_):not(#__):not(#___):not(#____):not(#_____) { height: auto !important; min-height: 100dvh; padding-bottom: clamp(1rem, 3dvh, 2rem) !important; }
}

/* ── Zoom: compattazione degli spazi (non dei corpi) per far stare le hero nella schermata ── */
@media (min-width: 861px) and (max-height: 820px) {
  /* News/Tips: la scritta NEWS di sfondo non occupa altezza nel flusso */
  html body .nw-hero__watermark:not(#_):not(#__):not(#___):not(#____) { position: absolute !important; inset: 0 !important; margin: 0 !important; pointer-events: none; }
  html body .nw-hero__kicker:not(#_):not(#__):not(#___):not(#____) { margin-bottom: .5rem !important; }
  /* Lavora con noi */
  html body main > section.lcn-hero:not(#_):not(#__):not(#___):not(#____):not(#_____) { padding-top: calc(var(--nav-h) + 1rem) !important; }
  html body .lcn-hero__kicker:not(#_):not(#__):not(#___) { margin-bottom: .5rem !important; }
  html body .lcn-hero__title:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______):not(#________) { margin-bottom: .75rem !important; }
  html body .lcn-hero__bottom:not(#_):not(#__):not(#___):not(#____) { padding-top: .5rem !important; }
  html body .lcn-hero__sub:not(#_):not(#__):not(#___):not(#____) { margin-bottom: .75rem !important; }
  html body .lcn-hero__stats:not(#_):not(#__):not(#___):not(#____) { padding-top: .875rem !important; }
  /* Articoli */
  html body :is(.art-hero, .tt-hero):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) { padding-top: calc(var(--nav-h) + .5rem) !important; padding-bottom: clamp(.75rem, 2dvh, 1.25rem) !important; }
  html body :is(.art-hero__title, .tt-hero__title):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______):not(#________):not(#_________) { margin-bottom: .75rem !important; }
  /* Contatti */
  html body .ct-inner .ct-col .hc-title:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______):not(#________):not(#_________) { font-size: calc(var(--z-hero) * 1.06) !important; }
  html body .ct-inner .hc-form textarea.svc-caffe__field:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) { height: clamp(72px, 11dvh, 120px) !important; }
  html body .ct-inner .ct-col .hc-header:not(#_):not(#__):not(#___):not(#____) { margin-bottom: clamp(.5rem, 1.4dvh, 1rem) !important; }
}
@media (min-width: 861px) and (max-height: 820px) {
  /* con poca altezza il corpo hero (e, in proporzione, quello delle sezioni) ha un tetto in dvh */
  :root:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) { --z-hero-home: min(clamp(3rem, 7vw, 9rem), 15dvh); }
  html body .ct-inner .hc-form input.svc-caffe__field:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) { height: clamp(34px, 4.6dvh, 44px) !important; }
  html body .ct-inner .hc-form textarea.svc-caffe__field:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______) { height: clamp(72px, 10dvh, 110px) !important; }
}
@media (min-width: 861px) and (max-height: 640px) {
  html body .ct-inner .hc-form:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) { zoom: .86 !important; }
}

/* ── Zoom · form nella hero dei servizi: misure in dvh, il form sta nella schermata anche senza scaling ── */
@media (min-width: 861px) and (max-height: 820px) {
  html body .svc-hero__form-card:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______) { padding: clamp(.45rem, 1.5dvh, 1.1rem) clamp(.9rem, 1.4vw, 1.4rem) !important; gap: clamp(2px, .8dvh, 8px) !important; }
  html body .svc-hero__form-card .svc-hero__form-card-label:not(#_):not(#__):not(#___):not(#____):not(#_____) { font-size: clamp(15px, 2.4dvh, 18px) !important; line-height: 1.2 !important; margin: 0 0 clamp(2px, .6dvh, 6px) !important; }
  html body .svc-hero__form-card .svc-hero__form:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______), html body .svc-hero__form-card .svc-hero__form-row:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) { gap: clamp(3px, .9dvh, 8px) !important; }
  html body .svc-hero__form-card .f-label:not(#_):not(#__):not(#___):not(#____):not(#_____) { font-size: clamp(13px, 2.1dvh, 16px) !important; line-height: 1.15 !important; margin: 0 0 1px !important; }
  html body .svc-hero__form-card .svc-hero__field:not(textarea):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) { height: clamp(30px, 5dvh, 44px) !important; min-height: 0 !important; padding-block: 0 !important; line-height: 1 !important; }
  html body .svc-hero__form-card .svc-hero__textarea:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______) { min-height: clamp(44px, 8dvh, 96px) !important; padding-block: 8px !important; }
  html body .svc-hero__form-card .hc-consents:not(#_):not(#__):not(#___):not(#____) { gap: 0 !important; margin: 0 !important; }
  html body .svc-hero__form-card .hc-consents .svc-caffe__privacy, html body .svc-hero__form-card .hc-consents .svc-caffe__privacy span, html body .svc-hero__form-card .hc-consents .svc-caffe__privacy a, html body .svc-hero__form-card .hc-consents .svc-caffe__privacy em { font-size: clamp(12px, 2dvh, 14px) !important; line-height: 1.2 !important; }
  html body .svc-hero__form-card .svc-hero__submit:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) { min-height: clamp(32px, 5.2dvh, 46px) !important; height: auto; padding-block: 4px !important; margin: 2px 0 0 !important; }
  html body .svc-hero--videobg .svc-hero__inner:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______) { padding-bottom: clamp(.5rem, 2dvh, 1.25rem) !important; }
}

/* ── Zoom · Contatti: titolo più vicino al sottotitolo, respiro corretto sotto il form ── */
@media (min-width: 861px) and (max-height: 820px) {
  html body .ct-inner .ct-col .hc-header:not(#_):not(#__):not(#___):not(#____):not(#_____) { gap: 0 !important; }
  html body .ct-inner .ct-col .hc-title:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______):not(#________):not(#_________):not(#__________) { margin-bottom: 0 !important; line-height: .9 !important; padding-bottom: 0 !important; }
  html body .ct-inner .ct-col .hc-sub:not(#_):not(#__):not(#___):not(#____):not(#_____) { margin-top: 2px !important; line-height: 1.3 !important; }
  html body .ct-inner:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) { padding-bottom: clamp(2rem, 6dvh, var(--section-py)) !important; }
}
@media (min-width: 861px) and (max-height: 820px) {
  /* la sezione dopo sale di 22px sulla hero: il respiro sotto il form la compensa */
  html body .ct-inner:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______) { padding-bottom: clamp(2.75rem, 8dvh, var(--section-py)) !important; }
}

/* ── Home: spazio sopra "Scopri tutti i Tips & Tricks" = spazio sopra "Scarica la brochure" (About) ──
   Entrambi partono da --cta-gap, ma sotto la griglia delle card restano 27px di aria (margine interno della CTA e
   del contenitore) contro i 12 del testo About: si compensano 15px, così il vuoto visibile è lo stesso a ogni zoom. */
html body .tips-section__cta:not(#_):not(#__):not(#___) { margin-top: calc(var(--cta-gap) - 15px) !important; }

/* ── Zoom · form hero servizi: messaggio più basso e fondo libero (la sezione dopo sale di ~22px sulla hero) ── */
@media (min-width: 861px) and (max-height: 820px) {
  html body .svc-hero__form-card .svc-hero__textarea:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______):not(#________) {
    min-height: clamp(40px, 6.5dvh, 68px) !important; max-height: clamp(48px, 9dvh, 84px) !important; flex: 0 0 auto !important; height: clamp(44px, 8dvh, 76px) !important;
  }
  html body .svc-hero__form-card .svc-hero__form > .f-field:has(textarea):not(#_):not(#__):not(#___):not(#____) { flex: 0 0 auto !important; }
  html body .svc-hero--videobg .svc-hero__inner:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______):not(#________) { padding-bottom: clamp(2.25rem, 6dvh, 3.25rem) !important; }
  html body .svc-hero__right:not(#_):not(#__):not(#___):not(#____) { justify-content: center !important; }
}
@media (min-width: 861px) and (max-height: 820px) {
  /* il messaggio occupa lo spazio che resta (fino a 120px) lasciando libero il fondo della hero */
  html body .svc-hero__form-card .svc-hero__textarea:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______):not(#________):not(#_________) {
    flex: 1 1 0 !important; height: auto !important; min-height: clamp(40px, 6.5dvh, 68px) !important; max-height: 120px !important;
  }
  html body .svc-hero__form-card .svc-hero__form > .f-field:has(textarea):not(#_):not(#__):not(#___):not(#____):not(#_____) { flex: 1 1 0 !important; min-height: 0; }
}
@media (min-width: 861px) and (max-height: 820px) {
  html body .svc-hero__form-card .svc-hero__form > .f-field:has(textarea):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) { flex: 0 0 auto !important; }
  html body .svc-hero__form-card .svc-hero__textarea:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______):not(#________):not(#_________):not(#__________) {
    flex: 0 0 auto !important; height: clamp(52px, 14dvh, 130px) !important; min-height: 0 !important; max-height: none !important;
  }
  html body .svc-hero__form-card .svc-hero__submit:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______) {
    min-height: clamp(42px, 6.4dvh, 52px) !important; padding: 12px 24px !important; font-size: 14px !important; margin-top: clamp(4px, 1dvh, 10px) !important;
  }
  html body .svc-hero__form-card .hc-consents:not(#_):not(#__):not(#___):not(#____):not(#_____) { margin-top: clamp(3px, .8dvh, 8px) !important; }
}

/* ── Zoom (tranne home): form della sezione prima del footer = stessa larghezza (38vw) su tutte le pagine,
   allineato a destra con il margine di sito, come il contenuto delle sezioni sopra ── */
@media (min-width: 861px) and (max-height: 820px) {
  html:not(:has(.ht-hero)) body :is(.svc-caffe__inner, .faq-contact__inner, .nw-contact__inner, .cs-cta__inner, .cs2-contact__inner, .art-contact__inner, .tt-contact__inner, .lcn-apply__layout):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______) {
    grid-template-columns: minmax(min-content, 1fr) 35vw !important; column-gap: clamp(1rem, 2vw, 2rem) !important;
    max-width: none !important; width: 100% !important; margin-inline: 0 !important; padding-inline: 0 !important; justify-content: space-between;
  }
  html:not(:has(.ht-hero)) body :is(.svc-caffe__form, .faq-contact .hc-form, .nw-contact .hc-form, .cs-cta .hc-form, .cs2-contact .hc-form, .art-contact .hc-form, .tt-contact .hc-form, .lcn-apply__form):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) {
    width: 35vw !important; max-width: 100% !important; margin-left: auto !important; margin-right: 0 !important;
  }
  html:not(:has(.ht-hero)) body :is(.svc-caffe, .faq-contact, .nw-contact, .cs-cta, .cs2-contact, .art-contact, .tt-contact):not(#_):not(#__):not(#___):not(#____):not(#_____) { padding-inline: var(--gutter) !important; }
}

/* ── Zoom (tranne home): form prima del footer più compatto in verticale ── */
@media (min-width: 861px) and (max-height: 820px) {
  html:not(:has(.ht-hero)) body :is(.svc-caffe, .faq-contact, .nw-contact, .cs-cta, .cs2-contact, .art-contact, .tt-contact, .lcn-apply) :is(form, .svc-caffe__form):not(#_):not(#__):not(#___):not(#____):not(#_____) { gap: clamp(5px, 1dvh, 9px) !important; }
  html:not(:has(.ht-hero)) body :is(.svc-caffe, .faq-contact, .nw-contact, .cs-cta, .cs2-contact, .art-contact, .tt-contact, .lcn-apply) .hc-row:not(#_):not(#__):not(#___):not(#____):not(#_____) { gap: clamp(5px, 1dvh, 9px) !important; }
  html:not(:has(.ht-hero)) body :is(.svc-caffe, .faq-contact, .nw-contact, .cs-cta, .cs2-contact, .art-contact, .tt-contact, .lcn-apply) input.svc-caffe__field:not(#_):not(#__):not(#___):not(#____):not(#_____), 
  html:not(:has(.ht-hero)) body :is(.svc-caffe, .faq-contact, .nw-contact, .cs-cta, .cs2-contact, .art-contact, .tt-contact, .lcn-apply) :is(input, select):not([type=checkbox]):not(#_):not(#__):not(#___):not(#____):not(#_____) { height: clamp(34px, 5dvh, 44px) !important; min-height: 0 !important; padding-block: 0 !important; }
  html:not(:has(.ht-hero)) body :is(.svc-caffe, .faq-contact, .nw-contact, .cs-cta, .cs2-contact, .art-contact, .tt-contact, .lcn-apply) textarea:not(#_):not(#__):not(#___):not(#____):not(#_____) { height: clamp(50px, 9dvh, 84px) !important; min-height: 0 !important; padding-block: 8px !important; overflow-y: hidden !important; resize: none !important; }
  html:not(:has(.ht-hero)) body :is(.svc-caffe, .faq-contact, .nw-contact, .cs-cta, .cs2-contact, .art-contact, .tt-contact, .lcn-apply) .f-label:not(#_):not(#__):not(#___):not(#____):not(#_____) { margin-bottom: 2px !important; font-size: clamp(13px, 2.1dvh, 16px) !important; line-height: 1.15 !important; }
  html:not(:has(.ht-hero)) body :is(.svc-caffe, .faq-contact, .nw-contact, .cs-cta, .cs2-contact, .art-contact, .tt-contact, .lcn-apply) .hc-consents:not(#_):not(#__):not(#___):not(#____) { gap: 0 !important; margin: 0 !important; }
  html:not(:has(.ht-hero)) body :is(.svc-caffe, .faq-contact, .nw-contact, .cs-cta, .cs2-contact, .art-contact, .tt-contact, .lcn-apply) .svc-caffe__privacy:not(#_):not(#__):not(#___):not(#____):not(#_____) { font-size: 14px !important; line-height: 1.25 !important; }
  html:not(:has(.ht-hero)) body :is(.svc-caffe, .faq-contact, .nw-contact, .cs-cta, .cs2-contact, .art-contact, .tt-contact, .lcn-apply) :is(button[type=submit], .btn):not(#_):not(#__):not(#___):not(#____):not(#_____) { min-height: clamp(40px, 6dvh, 50px) !important; padding-block: 10px !important; margin-top: clamp(3px, .8dvh, 8px) !important; }
}

/* ── Zoom (tranne home): form prima del footer · messaggio un po' più alto, informativa un po' più piccola ── */
@media (min-width: 861px) and (max-height: 820px) {
  html:not(:has(.ht-hero)) body :is(.svc-caffe, .faq-contact, .nw-contact, .cs-cta, .cs2-contact, .art-contact, .tt-contact, .lcn-apply) textarea:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) { height: clamp(64px, 12dvh, 104px) !important; }
  html:not(:has(.ht-hero)) body :is(.svc-caffe, .faq-contact, .nw-contact, .cs-cta, .cs2-contact, .art-contact, .tt-contact, .lcn-apply) :is(.svc-caffe__privacy, .svc-caffe__privacy span, .svc-caffe__privacy a, .svc-caffe__privacy em):not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) { font-size: 12.5px !important; line-height: 1.25 !important; }
}

/* ══ Articoli News: sottotitoli e tabelle (pagine generate dai testi di
   estro.agency/news). Corpo scuro: stessi colori di .art-p / .art-h2 ══ */
html body .art-body__inner > .art-h2:not(:first-child):not(#a):not(#b):not(#c) { margin-top: var(--gap-block, 48px) !important; }
html body .art-h3:not(#a):not(#b) {
  color: #fff; font-family: var(--font-secondary, "DM Sans", sans-serif); font-size: 20px; font-weight: 700;
  line-height: 1.3; margin: 32px 0 12px;
}
html body .art-body .art-list li:not(#a) { color: rgba(255,255,255,.68); }
html body .art-table-wrap:not(#a) {
  margin: 8px 0 28px; overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid rgba(255,255,255,.12); border-radius: var(--r-box, 36px);
}
html body .art-table:not(#a) {
  width: 100%; border-collapse: collapse; min-width: 520px;
  font-family: var(--font-secondary, "DM Sans", sans-serif); font-size: 15px; line-height: 1.5;
}
html body .art-table :is(th, td):not(#a) { text-align: left; vertical-align: top; padding: 16px 22px; border-bottom: 1px solid rgba(255,255,255,.1); }
html body .art-table tr:last-child td:not(#a) { border-bottom: 0; }
html body .art-table th:not(#a) { color: #fff; font-weight: 700; font-size: 14px; letter-spacing: .06em; text-transform: uppercase; background: rgba(255,255,255,.04); }
html body .art-table td:not(#a) { color: rgba(255,255,255,.72); }
html body .art-table td:first-child:not(#a) { color: #fff; font-weight: 600; }

/* ══ Nav: foto del team negli avatar (menu "Siamo oltre 40 Creativi" e
   pulsante Join Us). Le foto sono quadrate: ingrandite 2,6× e centrate
   sul viso di ciascuno (posizioni misurate sulle foto). ══ */
html body :is(.nav__mega-avatars, .nav__joinus-avatars) .nav__avatar:not(#a):not(#b) {
  background-color: #2a2a2a !important; background-repeat: no-repeat !important; background-size: 257% !important;
}
html body :is(.nav__mega-avatars, .nav__joinus-avatars) .nav__avatar:not(#a):not(#b)::before,
html body :is(.nav__mega-avatars, .nav__joinus-avatars) .nav__avatar:not(#a):not(#b)::after { display: none !important; }
html body .nav__mega-avatars .nav__avatar:nth-child(1):not(#a):not(#b) { background-image: url("../assets/img/team/team-1.webp") !important; background-position: 57% 12% !important; }
html body .nav__mega-avatars .nav__avatar:nth-child(2):not(#a):not(#b) { background-image: url("../assets/img/team/team-2.webp") !important; background-position: 47% 22% !important; }
html body .nav__mega-avatars .nav__avatar:nth-child(3):not(#a):not(#b) { background-image: url("../assets/img/team/team-3.webp") !important; background-position: 50% 50% !important; }
html body .nav__mega-avatars .nav__avatar:nth-child(4):not(#a):not(#b) { background-image: url("../assets/img/team/team-4.webp") !important; background-position: 53% 16% !important; }
html body .nav__mega-avatars .nav__avatar:nth-child(5):not(#a):not(#b) { background-image: url("../assets/img/team/team-5.webp") !important; background-position: 47% 12% !important; }
html body .nav__joinus-avatars .nav__avatar:nth-child(1):not(#a):not(#b) { background-image: url("../assets/img/team/team-2.webp") !important; background-size: 195% !important; background-position: 50% 30% !important; }
html body .nav__joinus-avatars .nav__avatar:nth-child(2):not(#a):not(#b) { background-image: url("../assets/img/team/team-4.webp") !important; background-position: 53% 16% !important; }

/* ══ Articoli Tips & Tricks: sottotitolo di secondo livello (testi da
   estro.agency/tips-tricks). Corpo chiaro: stesso nero di .tt-h2 ══ */
html body .tt-h3:not(#a):not(#b) {
  color: #080808; font-family: var(--font-secondary, "DM Sans", sans-serif); font-size: 20px; font-weight: 700;
  line-height: 1.3; margin: 32px 0 12px;
}
html body .tt-body__inner > .tt-h2:first-child:not(#a):not(#b) { margin-top: 0 !important; }

/* Home, Case studies: card senza pagina sul sito originale (Prada, Miu Miu).
   Stesso aspetto delle altre, ma non cliccabile: niente freccia e niente hover */
html body .cs2-sticky div.cst-info--static:not(#_):not(#__) { position: relative; color: inherit; cursor: default; }

/* ══ Pagina AI: video Vimeo di sfondo nella hero ═════════════════════
   Il player è 16:9, la hero no: l'iframe è grande quanto serve per
   coprire tutto il riquadro (come object-fit: cover), centrato e ritagliato.
   Dietro c'è il fondo scuro della hero, che si vede mentre il video carica. */
html body .svc-hero__vimeo:not(#_) {
  position: absolute; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: #141014; container-type: size;
}
html body .svc-hero__vimeo iframe:not(#_) {
  position: absolute; top: 50%; left: 50%; border: 0;
  width: max(100cqw, 177.78cqh); height: max(100cqh, 56.25cqw); max-width: none !important; max-height: none !important;
  transform: translate(-50%, -50%);
}
/* movimento ridotto: niente video, resta il fondo scuro con la velatura */
@media (prefers-reduced-motion: reduce) { html body .svc-hero__vimeo iframe:not(#_) { display: none; } }

/* ══ Contatti: i campi stanno direttamente sulla pagina, senza contenitore ══
   (niente pannello attorno al form: solo celle piene e grigie, non trasparenti) */
html body .ct-inner .hc-form:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______):not(#_______):not(#________):not(#_________) {
  background: transparent !important; border: 0 !important; border-radius: 0 !important;
  box-shadow: none !important; padding: 0 !important;
}

/* ══ Form nella hero delle pagine servizi: restyling ═════════════════
   Tinta unita (#141414, niente blur né trasparenze), profondità con
   un'ombra, titolo nel font dei titoli come le hero ("SCRIVICI." col
   punto fucsia), campi con bordo pieno e focus fucsia ben visibile,
   casella privacy disegnata. Le misure che crescono valgono solo sugli
   schermi alti (da 900px di altezza): sotto restano le regole compatte. */
html body .svc-hero__form-card:not(#_):not(#__):not(#___) {
  background: rgba(14,6,14,.56) !important; border: 1px solid rgba(255,255,255,.16) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.25) !important; backdrop-filter: blur(20px) saturate(1.25) !important;
  box-shadow: 0 30px 60px -30px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.14) !important;
}
html body .svc-hero__form-card .svc-hero__form-card-label:not(#_):not(#__):not(#___) {
  font-family: var(--font-primary) !important; font-size: clamp(1.3rem, 1.75vw, 1.7rem) !important; font-weight: 900 !important;
  text-transform: uppercase !important; letter-spacing: -0.02em !important; line-height: 1 !important; color: #fff !important;
}
html body .svc-hero__form-card .svc-hero__form-card-label:not(#_):not(#__):not(#___)::after { content: '.'; color: var(--primary, #DB005A); }
html body .svc-hero__form-card .svc-hero__form-card-sub:not(#_):not(#__) {
  font-family: var(--font-secondary); font-size: 14px; line-height: 1.45; font-weight: 400;
  color: rgba(255,255,255,.72); margin: 6px 0 16px;
}
@media (min-width: 861px) and (max-height: 899px) { html body .svc-hero__form-card .svc-hero__form-card-sub:not(#_):not(#__) { display: none; } }
@media (min-height: 900px) { html body .svc-hero__form-card:not(#_):not(#__):not(#___):not(#____) { padding: 30px 32px !important; } }

/* campi: bordo pieno, hover, focus fucsia con alone (contrasto e visibilità da tastiera) */
html body .svc-hero__form-card .svc-hero__field:not(#_):not(#__):not(#___):not(#____) {
  background: rgba(255,255,255,.09) !important; border: 1px solid rgba(255,255,255,.24) !important; color: #fff !important;
  transition: border-color .2s ease, box-shadow .2s ease !important;
}
html body .svc-hero__form-card .svc-hero__field:hover:not(:focus):not(#_):not(#__):not(#___):not(#____) { border-color: rgba(255,255,255,.5) !important; background: rgba(255,255,255,.12) !important; }
html body .svc-hero__form-card .svc-hero__field:focus:not(#_):not(#__):not(#___):not(#____) {
  background: rgba(255,255,255,.13) !important; border-color: var(--primary, #DB005A) !important;
  box-shadow: 0 0 0 3px rgba(219,0,90,.3) !important; outline: none !important;
}
html body .svc-hero__form-card .svc-hero__field:not(#_):not(#__):not(#___):not(#____)::placeholder { color: rgba(255,255,255,.6) !important; opacity: 1; }
html body .svc-hero__form-card .f-label:not(#_):not(#__):not(#___) { font-size: 14px !important; font-weight: 600 !important; letter-spacing: .02em !important; color: rgba(255,255,255,.88) !important; }
html body .svc-hero__form-card .f-label__req:not(#_):not(#__):not(#___) { color: var(--primary, #DB005A) !important; }

/* consensi: casella disegnata (20px, fucsia da selezionata), link con sottolineatura fucsia */
html body .svc-hero__form-card .svc-hero__privacy input[type="checkbox"]:not(#_):not(#__):not(#___) {
  -webkit-appearance: none; appearance: none; flex: none; width: 20px; height: 20px; margin: 0 !important;
  border: 1.5px solid rgba(255,255,255,.45); border-radius: 6px; background: rgba(255,255,255,.09); display: inline-grid; place-content: center;
  cursor: pointer; transition: background-color .2s ease, border-color .2s ease, box-shadow .2s ease;
}
html body .svc-hero__form-card .svc-hero__privacy input[type="checkbox"]:hover:not(#_):not(#__):not(#___) { border-color: rgba(255,255,255,.8); }
html body .svc-hero__form-card .svc-hero__privacy input[type="checkbox"]:checked:not(#_):not(#__):not(#___) { background: var(--primary, #DB005A); border-color: var(--primary, #DB005A); }
html body .svc-hero__form-card .svc-hero__privacy input[type="checkbox"]:checked:not(#_):not(#__):not(#___)::after {
  content: ''; width: 12px; height: 12px; background: #fff;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat;
}
html body .svc-hero__form-card .svc-hero__privacy input[type="checkbox"]:focus-visible:not(#_):not(#__):not(#___) { outline: 2px solid #fff; outline-offset: 2px; }
html body .svc-hero__form-card .svc-hero__privacy a:not(#_):not(#__):not(#___) { color: #fff !important; text-decoration: underline; text-decoration-color: var(--primary, #DB005A); text-underline-offset: 3px; text-decoration-thickness: 2px; }
html body .svc-hero__form-card .svc-hero__privacy a:hover:not(#_):not(#__):not(#___) { color: var(--primary, #DB005A) !important; }

/* pulsante: ombra fucsia che lo stacca dalla scheda */
html body .svc-hero__form-card .svc-hero__submit:not(#_):not(#__):not(#___):not(#____) { box-shadow: 0 14px 30px -16px rgba(219,0,90,.9); }
html body .svc-hero__form-card .svc-hero__submit:hover:not(#_):not(#__):not(#___):not(#____) { box-shadow: 0 14px 30px -16px rgba(255,255,255,.5); }

/* ══ Pagina AI · timeline: il riquadro si adatta alle immagini ═══════════
   Le foto sono 1920×900 (32:15): nel vecchio riquadro 5:4 ne sarebbe
   rimasto un terzo. Ora il riquadro ha il loro rapporto (nessun taglio),
   il video del passo 04 il suo 16:9, e alle immagini va più larghezza.
   Vale solo per #ai-stack: le altre timeline restano come sono. */
html body #ai-stack .svc-tabs__media:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) {
  aspect-ratio: 32 / 15 !important; width: 100% !important; height: auto !important; min-height: 0 !important; align-self: center;
}
html body #ai-stack #ai-pan-4 .svc-tabs__media:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) { aspect-ratio: 16 / 9 !important; }
html body #ai-stack .svc-tabs__media-video:not(#_) { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; display: block; }
@media (min-width: 761px) {
  html body #ai-stack .svc-tabs__panel:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
}
@media (min-width: 761px) and (max-width: 1100px), (min-width: 761px) and (max-height: 820px) {
  html body #ai-stack .svc-tabs__panel:not(#_):not(#__):not(#___):not(#____):not(#_____):not(#______) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; }
}

/* ══ Pagina AI · passo 04: video con un solo comando (play/pausa) ═══════
   Nessuna interfaccia di Vimeo (titolo, autore, mi piace, condividi...).
   Il pulsante copre tutto il riquadro: un clic sul video = play/pausa.
   Il cerchio fucsia con l'icona si vede da fermo; in riproduzione sparisce
   e riappare (con la pausa) al passaggio del mouse o col focus da tastiera. */
html body #ai-pan-4 .svc-tabs__media-video:not(#_) { pointer-events: none; }
html body #ai-pan-4 .svc-tabs__media-toggle:not(#_):not(#__) {
  position: absolute; inset: 0; z-index: 2; width: 100%; height: 100%; margin: 0; padding: 0;
  border: 0; background: transparent; cursor: pointer; display: grid; place-items: center; border-radius: inherit;
  -webkit-tap-highlight-color: transparent;
}
html body #ai-pan-4 .svc-tabs__media-toggle:not(#_):not(#__)::before {
  content: ''; width: 68px; height: 68px; border-radius: 50%; background: var(--primary, #DB005A);
  box-shadow: 0 14px 30px -12px rgba(0,0,0,.55);
  transition: opacity .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1), background-color .2s ease;
}
html body #ai-pan-4 .svc-tabs__media-toggle:not(#_):not(#__)::after {
  content: ''; position: absolute; width: 26px; height: 26px; background: #fff; transition: opacity .25s ease, transform .35s cubic-bezier(.34,1.56,.64,1);
  -webkit-mask: var(--ai-play) center / contain no-repeat; mask: var(--ai-play) center / contain no-repeat; transform: translateX(2px);
  --ai-play: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M7 4.5v15l13-7.5z'/%3E%3C/svg%3E");
  --ai-pause: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 4h4.5v16H6zM13.5 4H18v16h-4.5z'/%3E%3C/svg%3E");
}
html body #ai-pan-4 .svc-tabs__media-toggle:hover:not(#_):not(#__)::before { background: #fff; transform: scale(1.06); }
html body #ai-pan-4 .svc-tabs__media-toggle:hover:not(#_):not(#__)::after { background: var(--primary, #DB005A); }
html body #ai-pan-4 .svc-tabs__media-toggle:focus-visible:not(#_):not(#__) { outline: 3px solid var(--primary, #DB005A); outline-offset: -6px; }
/* in riproduzione: icona di pausa, nascosta finché non c'è hover o focus */
html body #ai-pan-4 .svc-tabs__media-toggle.is-playing:not(#_):not(#__)::after { -webkit-mask-image: var(--ai-pause); mask-image: var(--ai-pause); transform: none; }
html body #ai-pan-4 .svc-tabs__media-toggle.is-playing:not(#_):not(#__)::before,
html body #ai-pan-4 .svc-tabs__media-toggle.is-playing:not(#_):not(#__)::after { opacity: 0; }
html body #ai-pan-4 .svc-tabs__media-toggle.is-playing:hover:not(#_):not(#__)::before,
html body #ai-pan-4 .svc-tabs__media-toggle.is-playing:hover:not(#_):not(#__)::after,
html body #ai-pan-4 .svc-tabs__media-toggle.is-playing:focus-visible:not(#_):not(#__)::before,
html body #ai-pan-4 .svc-tabs__media-toggle.is-playing:focus-visible:not(#_):not(#__)::after { opacity: 1; }
@media (hover: none) {
  html body #ai-pan-4 .svc-tabs__media-toggle.is-playing:not(#_):not(#__)::before,
  html body #ai-pan-4 .svc-tabs__media-toggle.is-playing:not(#_):not(#__)::after { opacity: 0; }
}

/* ══ MOBILE / TOUCH — bersagli di tocco e testi leggibili ═══════════════
   · bersagli ≥ 44×44px. Dove l'aspetto non deve cambiare (logo, menu, CTA
     della barra, icone social) si estende solo l'area di tocco con un
     pseudo-elemento invisibile; per i link di testo in elenco (footer, menu)
     si porta la riga a 44px.
   · etichette e CTA mai sotto i 14px sugli schermi stretti. */
@media (max-width: 1024px), (pointer: coarse) {
  html body :is(.nav__logo, .nav__joinus, .nav__menu-btn, .sf-social a):not(#_):not(#__) { position: relative; }
  html body :is(.nav__logo, .nav__joinus, .nav__menu-btn, .sf-social a):not(#_):not(#__)::after {
    content: ''; position: absolute; left: 50%; top: 50%;
    width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
  html body :is(.sf-links a, .sf-legal__links a):not(#_):not(#__) { display: inline-flex; align-items: center; min-height: 44px; }
  html body .sf-links:not(#_):not(#__) { gap: 0; }
  html body .sf-legal__links:not(#_):not(#__) { flex-wrap: wrap; gap: 0 20px; }
  html body .nav__mega-links a:not(#_):not(#__) { display: flex; align-items: center; min-height: 44px; }
  html body .contact-hub__pill:not(#_):not(#__) { min-height: 44px; }
}

/* CTA e pulsanti: una sola misura in tutto il sito (14px) e il testo può andare a capo
   quando lo schermo è molto stretto, invece di essere tagliato */
html body :is(.btn, .nav__joinus):not(#_):not(#__):not(#___) { font-size: 14px !important; }
@media (max-width: 420px) {
  html body .btn:not(#_):not(#__):not(#___) { white-space: normal !important; text-align: center; max-width: 100%; line-height: 1.25; }
}

/* Tips: la card in evidenza non deve superare la larghezza dello schermo */
html body .nw-featured__card:not(#_):not(#__) { grid-template-columns: minmax(0, 1fr); }
html body .nw-featured__card > *:not(#_):not(#__) { min-width: 0; }
html body .nw-featured__img:not(#_):not(#__) { max-width: 100%; }

@media (max-width: 768px) {
  html body :is(.page-hero__kicker, .page-hero__meta-item, .service-row__num):not(#_):not(#__):not(#___) { font-size: 14px !important; }
  html body :is(.d24-hero__meta-label, .d24-block__eyebrow, .d24-contact__label, .d24-intro__label, .d24-numbers__label, .d24-results__label, .d24-numbers__col-title, .d24-back__brand):not(#_):not(#__):not(#___) {
    font-size: 14px !important; letter-spacing: .08em !important;
  }
}

/* ── Mobile/touch · rifiniture ─────────────────────────────────────────── */
@media (max-width: 1024px), (pointer: coarse) {
  html body :is(.sf-links a, .sf-legal__links a):not(#_):not(#__):not(#___) { min-width: 44px; }
  html body .contact-hub__pill:not(#_):not(#__):not(#___):not(#____) { min-height: 44px !important; }
  html body .cst-tab:not(#_):not(#__):not(#___) { min-height: 44px; }
}
/* informativa privacy dei form, "Sfoglia" del CV, CTA citazione e settori: mai sotto i 14px */
html body :is(.contact-home__privacy, .contact-home__privacy span, .contact-home__privacy a, .contact-home__privacy em, .lcn-apply__file-label strong, .d24-quote__cta):not(#_):not(#__):not(#___) { font-size: 14px !important; }
@media (max-width: 768px) {
  html body .svc-settori__item span:not(#_):not(#__):not(#___) { font-size: 14px !important; line-height: 1.25; }
}
@media (max-width: 1024px), (pointer: coarse) {
  html body .svc-hero__platforms a:not(#_):not(#__):not(#___) { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; }
}