/*
Theme Name:   Ensoul Theme
Description:  Ensoul's Twenty Twenty-Five child theme. In combination with Ensoul React Blocks
Author:       Ensoul
Template:     twentytwentyfive
Version:      1.0.2
Text Domain:  twentytwentyfivechild
*/

/* ==========================================================================
   Indice
   1.  Base
   2.  Accessibilità e focus
   3.  Utility e tipografia
   4.  Bottoni (CTA)
   5.  Form (Gravity Forms)
   6.  Header
   7.  Menu mobile
   8.  Hero e foglio bianco
   9.  Footer
   10. Blocco "Immagine con hotspot"
   11. Blocco "Scene con hotspot"
   11b. Blocco "Oggetto 3D"
   12. Accordion (FAQ)
   13. Pagine: Home
   14. Pagine: About us
   15. Pagine: Experience and Solutions
   16. Pagine: Contatti, Work with us, Certifications
   17. Pagine: Settori
   18. Pagine: Progetto
   18b. Pagine: 404
   19. Regole recuperate da North
   ========================================================================== */

/* ==========================================================================
   1. Base
   ========================================================================== */

body {
  overflow-x: hidden;
}

::selection {
  background-color: #d5d5d5;
  color: #212121;
}

::-moz-selection {
  background-color: #d5d5d5;
  color: #212121;
}

::-webkit-selection {
  background-color: #d5d5d5;
  color: #212121;
}

/* clic su un'ancora (#...): la pagina scorre fluida fino al punto, non salta.
   scroll-margin lascia lo spazio dell'header fisso sopra il punto d'arrivo */
html {
  scroll-behavior: smooth;
}

:target {
  scroll-margin-top: var(--header-h, 80px);
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

/* messaggio della modalità risparmio energia (idle-mode.js) */
#inactivity_message {
  display: flex;
  align-items: center;
  justify-content: center;
  background: black;
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  color: #999;
  padding: 0 2rem;
  text-align: center;
}

/* ==========================================================================
   2. Accessibilità e focus
   ========================================================================== */

/* Focus da tastiera (solo :focus-visible: col mouse o al tocco non compare).
   Link e campi usano il contorno di North (--focus-outline): al posto del
   giallo predefinito, poco visibile sul bianco, il colore del testo (marrone
   sulle pagine, bianco su fondi scuri e immagini). Le CTA: sezione 4. */
:root {
  --focus-outline: 2px solid currentColor;
}

/* niente contorno quando il focus arriva da clic o tocco: il tema padre
   (Twenty Twenty-Five) lo mette su ogni :focus */
:focus:not(:focus-visible) {
  outline: none;
}

.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* "Salta al contenuto": quando compare ha la forma e i colori della CTA */
.skip-link.screen-reader-text:focus {
  min-height: 34px;
  clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  background-color: var(--color-primary-500);
  color: white;
}

/* ==========================================================================
   3. Utility e tipografia
   ========================================================================== */

/* elemento fermo durante lo scroll (es. colonna di sinistra di Our Process) */
.sticky {
  position: sticky;
  top: 20px;
  /* nelle columns (h-full di North) l'elemento sarebbe alto quanto la riga e
     non avrebbe spazio per restare fermo */
  align-self: start;
  height: auto;
}

@media (max-width: 767px) {
  .sticky {
    position: static;
  }
}

/* Apice nei titoli ("Our" Work, Experience "and" Solutions): nell'editor si
   seleziona la parola e si sceglie Superscript dal menu del testo */
:is(h1, h2, h3, h4) sup {
  display: inline-block;
  margin-right: 0.15em;
  font-size: var(--text-paragraph-xl);
  line-height: normal;
  vertical-align: top;
}

/* Eyebrow: punto + etichetta mono maiuscola sopra i titoli di sezione */
.eyebrow {
  display: flex;
  align-items: center;
  gap: var(--spacing-xs);
  font-family: var(--wp--preset--font-family--ibm-plex-mono);
  font-weight: 300;
  text-transform: uppercase;
}

.eyebrow::before {
  content: "";
  flex: none;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.5;
}

/* titoli in IBM Plex Mono (apertura dei settori e dei progetti) */
.title-mono {
  font-family: var(--wp--preset--font-family--ibm-plex-mono);
  font-weight: 400;
}

/* Testi: Roboto Light, su desktop e su mobile (interlinee e
   spaziatura dell'1% su desktop: token di North). Etichette mono, eyebrow e
   pill hanno il loro peso. */
p.font-paragraph:not(.eyebrow, .pill, .mono) {
  font-weight: 300;
}

/* il grassetto resta grassetto (bolder di 300 sarebbe solo 400) */
p.font-paragraph :is(strong, b) {
  font-weight: 700;
}

/* Mobile: i titoli dei settori e dei progetti sono in IBM Plex Sans */
@media (max-width: 767px) {
  .title-mono {
    font-family: var(--wp--preset--font-family--ibm-plex-sans);
  }
}

/* ==========================================================================
   4. Bottoni (CTA)
   Primary e secondary con i lati obliqui (padding e colori: token
   bottoni di North). .ens-btn è l'<a> nel sito e il <div> nell'editor.
   ========================================================================== */

.ens-btn-primary,
.ens-btn-secondary {
  min-height: 34px;
  clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  letter-spacing: 0.02em;
}

/* Download delle certificazioni: 13px, gli altri bottoni 14 (token) */
:is(.home-certs, .cert-row) .ens-btn {
  --btn-font-size: 13px;
  letter-spacing: 0;
}

/* etichetta doppia, all'hover salgono insieme di una riga (functions.php,
   feruglio_btn_roll). I .2em fra le due righe evitano che si sfiorino. */
.btn-roll,
.gform_wrapper.gform-theme--framework .btn-roll {
  position: relative;
  display: block;
  overflow: clip;
}

.btn-roll__line {
  display: block;
  transition: translate 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}

.btn-roll__line + .btn-roll__line {
  position: absolute;
  top: calc(100% + 0.2em);
  left: 0;
  width: 100%;
}

@media (hover: hover) {
  .ens-btn:hover .btn-roll__line,
  .gform_button:hover .btn-roll__line {
    translate: 0 calc(-100% - 0.2em);
  }
}

@media (prefers-reduced-motion: reduce) {
  .btn-roll__line {
    transition: none;
  }
}

/* focus da tastiera: il clip-path del parallelogramma taglierebbe il
   contorno, quindi va sull'etichetta */
:is(.ens-btn, .gform_button):focus-visible {
  outline: none;
}

:is(.ens-btn, .gform_button):focus-visible .btn-roll {
  outline: 2px solid currentColor;
  outline-offset: 3px;
}

/* ==========================================================================
   5. Form (Gravity Forms)
   Il nome del campo sta nel campo (segnaposto di GF; le
   etichette sono nascoste solo alla vista, in GF "Visibilità etichetta"),
   linea 8px sotto, 24px fra un campo e l'altro. Sulle pagine marrone su
   bianco con linee grigie, nel footer bianco su viola (--form-*).
   .gform_wrapper in più: il CSS di GF ha la stessa specificità e viene dopo.
   ========================================================================== */

.gform_wrapper.gform-theme--framework {
  --form-color: var(--color-primary-500);
  --form-line: var(--color-secondary-200);
  --form-btn-bg: var(--color-primary-500);
  --form-btn-color: var(--color-white);
  --form-size: var(--text-paragraph-base);
  --form-leading: 20px;
  --gf-ctrl-btn-bg-color-primary: var(--form-btn-bg);
  --gf-ctrl-btn-bg-color-hover-primary: var(--form-btn-bg);
  --gf-ctrl-btn-color-primary: var(--form-btn-color);
  --gf-ctrl-btn-color-hover-primary: var(--form-btn-color);
}

.site-footer .gform_wrapper.gform-theme--framework {
  --form-color: var(--color-white);
  --form-line: var(--color-white);
  --form-btn-bg: var(--color-white);
  --form-btn-color: var(--color-primary-500);
}

.gform_wrapper.gform-theme--framework .gform_fields {
  row-gap: var(--spacing-m);
}

.gform_wrapper.gform-theme--framework .gfield_required,
.gform_required_legend {
  display: none;
}

.gform_wrapper.gform-theme--framework :is(input[type="text"], input[type="email"], textarea) {
  block-size: auto;
  min-block-size: 0;
  padding: 0 0 var(--spacing-xs);
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--form-line);
  border-radius: 0;
  box-shadow: none;
  color: var(--form-color);
  font-family: var(--wp--preset--font-family--roboto);
  font-size: var(--form-size);
  font-weight: 300;
  line-height: var(--form-leading);
}

.gform_wrapper.gform-theme--framework :is(input, textarea)::placeholder {
  color: var(--form-color);
  opacity: 1;
}

/* al focus solo la linea, più marcata (niente riquadro del browser) */
.gform_wrapper.gform-theme--framework :is(input[type="text"], input[type="email"], textarea):focus {
  outline: none;
  box-shadow: none;
  border-bottom-color: var(--form-color);
}

/* il messaggio cresce con il testo fino a un massimo, poi scorre con una
   barra sottile del colore della linea */
.gform_wrapper.gform-theme--framework textarea {
  field-sizing: content;
  resize: none;
  scrollbar-width: thin;
  scrollbar-color: var(--form-line) transparent;
}

/* sulle pagine il messaggio parte alto 88px più la riga */
.gform_wrapper.gform-theme--framework:not(.site-footer *) textarea {
  min-block-size: calc(var(--form-leading) + 88px + var(--spacing-xs));
  max-block-size: 240px;
}

/* nel footer il messaggio è una riga come gli altri campi e si apre quando
   lo si scrive */
.site-footer .gform_wrapper.gform-theme--framework textarea {
  max-block-size: 160px;
  transition: min-block-size 0.3s ease;
}

.site-footer .gform_wrapper.gform-theme--framework textarea:focus {
  min-block-size: 120px;
}

/* GF stampa inline #gform_wrapper_N { --gf-radius: 3px }: l'ID vince sul tema,
   quindi il raggio va forzato sul bottone. Testo 14px con l'1%. */
.gform_wrapper.gform-theme--framework .gform_footer {
  margin-top: var(--spacing-l);
  padding: 0;
}

.gform_wrapper.gform-theme--framework .gform_button.button {
  --gf-ctrl-btn-radius: 0;
  min-height: 34px;
  padding: 8px 26px 6px;
  border: 0;
  border-radius: 0 !important;
  clip-path: polygon(18px 0, 100% 0, calc(100% - 18px) 100%, 0 100%);
  font-size: 14px !important;
  font-weight: var(--btn-font-weight) !important;
  letter-spacing: 0.02em;
  text-transform: uppercase !important;
}

/* mobile: nel footer campi da 14px */
@media (max-width: 767px) {
  .site-footer .gform_wrapper.gform-theme--framework {
    --form-size: var(--text-paragraph-sm);
    --form-leading: 19px;
  }
}

.gform_wrapper.gform-theme--framework :is(.gform_validation_errors, .gfield_validation_message),
.gform_confirmation_message {
  color: var(--form-color, currentColor);
}

/* ==========================================================================
   6. Header (pattern header)
   Barra con logo, menu e CTA. Trasparente sopra la hero e bianco dopo
   (.is-solid); si nasconde scendendo (.is-hidden): assets/js/header.js.
   ========================================================================== */

section.site-header__bar {
  position: relative;
  z-index: 41;
  border-bottom: 1px solid var(--color-white);
}

.site-header__right > .ensoul-group > div {
  column-gap: var(--spacing-2xl);
}

.site-header__nav {
  display: flex;
  gap: var(--spacing-xl);
  white-space: nowrap;
  font-family: var(--wp--preset--font-family--ibm-plex-mono);
  font-weight: 500;
}

.site-header__bar .hamburger-button {
  color: var(--color-white);
}

/* Mobile: CTA più piccola accanto all'hamburger, che ha le linee
   sottili larghe 32px (l'icona di North da 24 portata a 48, linee da 1.5px) */
@media (max-width: 767px) {
  .site-header__right > .ensoul-group > div {
    column-gap: var(--spacing-s);
  }

  .site-header__bar .ens-btn {
    --btn-font-size: 12px;
  }

  .site-header__bar .hamburger-button svg {
    width: 48px;
    height: 48px;
    margin: -12px -8px -12px 0;
  }

  .site-header__bar .hamburger-button path {
    stroke-width: 1.5px;
    vector-effect: non-scaling-stroke;
  }
}

/* Barra stretta (header-compact, header.js): le voci non ci stanno più e
   si passa all'hamburger come su mobile, con il logo intero */
header.header-compact .site-header__nav {
  display: none !important;
}

header.header-compact .site-header__right > .ensoul-group > div {
  column-gap: var(--spacing-m);
}

header.header-compact .site-header__bar .hamburger-button svg {
  width: 48px;
  height: 48px;
  margin: -12px -8px -12px 0;
}

header.header-compact .site-header__bar .hamburger-button path {
  stroke-width: 1.5px;
  vector-effect: non-scaling-stroke;
}

/* nascosto in scroll: lo gestisce header.js, quello di North
   (header-hidden-on-scroll) lampeggiava a fine scroll con Lenis */
header.header-scroll-hide.header-hidden-on-scroll {
  transform: none;
}

header.header-scroll-hide.is-hidden {
  transform: translateY(-100%);
}

/* trasparente sopra la hero, bianco dopo */
section.site-header__bar > div {
  transition: background-color 0.3s ease, color 0.3s ease;
}

header:not(.is-solid) section.site-header__bar > div {
  background-color: transparent !important;
}

header.is-solid:not(.header-menu-open) section.site-header__bar {
  border-bottom-color: var(--color-primary-500);
}

header.is-solid:not(.header-menu-open) section.site-header__bar > div {
  background-color: var(--color-white) !important;
}

header.is-solid:not(.header-menu-open) .site-header__bar :is(.has-white-color, a:not(.ens-btn), .hamburger-button) {
  color: var(--color-primary-500) !important;
}

/* su fondo bianco il logo è blu (il blu del marchio); bianco altrove */
header.is-solid:not(.header-menu-open) .site-header__bar .logo-block [fill="#fff"] {
  fill: #35499c;
}

/* su fondo bianco la CTA bianca sparirebbe: prende i colori della primary
   (variabili dei bottoni di North: le sue utility !important vincono) */
header.is-solid:not(.header-menu-open) .site-header__bar .ens-btn-secondary {
  --color-button: var(--color-white);
  --color-button-hover: var(--color-white);
  --color-button-background: var(--color-primary-500);
  --color-button-background-hover: var(--color-primary-500);
}

/* menu mobile aperto: niente logo e niente linea sotto la barra; la barra è
   trasparente, così il gradiente del pannello parte dal bordo alto dello
   schermo senza stacchi */
header.header-menu-open .site-header__bar {
  border-bottom-color: transparent;
  transition: none;
}

header.header-menu-open section.site-header__bar > div {
  background-color: transparent !important;
}

/* menu aperto: resta solo la X, logo e CTA spariscono subito.
   Alla chiusura ricompaiono in dissolvenza (con la linea sotto la barra)
   mentre la tenda risale */
header.header-menu-open .site-header__bar :is(.logo-block, .wp-block-ensoul-button) {
  opacity: 0;
  visibility: hidden;
  transition: none;
}

.site-header__bar :is(.logo-block, .wp-block-ensoul-button) {
  transition: opacity 0.4s ease 0.15s, visibility 0s 0.15s;
}

section.site-header__bar {
  transition: border-color 0.3s ease;
}

/* Settori sotto "Projects" (functions.php, feruglio_sectors_submenu).
   Nella barra, all'hover o col focus da tastiera: il bordo dell'header si
   sdoppia e scende, aprendo sotto la barra una striscia a tutta larghezza con
   lo sfondo sfocato e i settori in orizzontale. La striscia è fixed sotto
   l'header (--header-h: header.js) e prende i colori dell'header; le voci
   partono sotto "Projects". */
.sectors-menu {
  margin: 0;
  padding: 0;
  list-style: none;
}

.site-header__nav .has-sectors {
  position: relative;
  --strip-h: 52px;
  --strip-ease: cubic-bezier(0.76, 0, 0.24, 1);
}

/* ponte invisibile fra la voce e la striscia, per non perdere l'hover */
.site-header__nav .has-sectors::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: 32px;
}

.site-header__nav .sectors-menu {
  position: fixed;
  z-index: 40;
  top: var(--header-h, 66px);
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  gap: var(--spacing-xl);
  height: var(--strip-h);
  /* le voci partono sotto "Projects" (--sectors-x: header.js) */
  padding-inline: var(--sectors-x, 24px) var(--spacing-content-padding, 24px);
  background: rgb(255 255 255 / 0.08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path 0.5s var(--strip-ease), visibility 0s linear 0.5s;
}

/* il bordo sdoppiato: parte sopra la striscia, sul bordo della barra, e
   scende fino al suo fondo insieme al taglio che la apre */
.site-header__nav .sectors-menu::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: -1px;
  border-bottom: 1px solid var(--color-white);
  transition: translate 0.5s var(--strip-ease);
}

.site-header__nav .has-sectors:is(:hover, :focus-within) .sectors-menu {
  clip-path: inset(0 0 -1px 0);
  visibility: visible;
  transition: clip-path 0.5s var(--strip-ease), visibility 0s;
}

.site-header__nav .has-sectors:is(:hover, :focus-within) .sectors-menu::after {
  translate: 0 var(--strip-h);
}

/* le voci entrano dopo il bordo, una dopo l'altra */
.site-header__nav .sectors-menu li {
  opacity: 0;
  translate: 0 8px;
  transition: opacity 0.2s ease, translate 0.2s ease;
}

.site-header__nav .has-sectors:is(:hover, :focus-within) .sectors-menu li {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.4s ease, translate 0.5s cubic-bezier(0.19, 1, 0.22, 1);
}

.site-header__nav .has-sectors:is(:hover, :focus-within) .sectors-menu li:nth-child(1) { transition-delay: 0.2s; }
.site-header__nav .has-sectors:is(:hover, :focus-within) .sectors-menu li:nth-child(2) { transition-delay: 0.26s; }
.site-header__nav .has-sectors:is(:hover, :focus-within) .sectors-menu li:nth-child(3) { transition-delay: 0.32s; }
.site-header__nav .has-sectors:is(:hover, :focus-within) .sectors-menu li:nth-child(n + 4) { transition-delay: 0.38s; }

.site-header__nav .sectors-menu a {
  color: inherit;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.2s ease;
}

.site-header__nav .sectors-menu a:hover {
  opacity: 0.6;
}

/* header trasparente: con la striscia aperta anche la barra ha lo stesso
   fondo sfocato. Lo strato è un ::before dietro il contenuto, perché un backdrop-filter sulla
   barra farebbe da riferimento al fixed della striscia */
section.site-header__bar::before {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(255 255 255 / 0.08);
  -webkit-backdrop-filter: blur(14px);
  backdrop-filter: blur(14px);
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

header:not(.is-solid):has(.has-sectors:is(:hover, :focus-within)) section.site-header__bar::before {
  opacity: 1;
}

/* header bianco: niente sfocatura, striscia bianca piena e bordo marrone,
   come la barra */
header.is-solid .site-header__nav .sectors-menu {
  background: var(--color-white);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

header.is-solid .site-header__nav .sectors-menu::after {
  border-bottom-color: var(--color-primary-500);
}

@media (prefers-reduced-motion: reduce) {
  .site-header__nav .sectors-menu,
  .site-header__nav .sectors-menu::after,
  .site-header__nav .sectors-menu li {
    transition: none !important;
  }
}

/* ==========================================================================
   7. Menu mobile (pannello a tutto schermo del pattern header)
   ========================================================================== */

/* North lo mostra con display. Il breakout !important di North sta sulla
   <section> esterna, quindi posizione e fondo vanno sul div */
div.site-menu {
  position: fixed;
  inset: 0;
  z-index: 40;
  overflow-y: auto;
  overscroll-behavior: contain;
  background-image: linear-gradient(
    180deg,
    var(--color-primary-500),
    color-mix(in srgb, var(--color-primary-500) 35%, black)
  );
}

div.site-menu > div {
  min-height: 100%;
}

/* contatti in fondo: Regular 14/20 con 8px fra le righe */
section.site-menu__foot p {
  font-weight: 400 !important;
  line-height: 20px !important;
}

section.site-menu__foot p + p {
  margin-top: var(--spacing-xs);
}

/* hamburger e X si scambiano di colpo: la dissolvenza di North le mostrava
   sovrapposte per un attimo */
.site-header__bar :is(.hamburger-open, .hamburger-close) {
  transition: none;
}

/* un transform sulla section farebbe da blocco contenitore al fixed del div.
   North la mostra con display: allow-discrete fa durare la chiusura quanto
   la tenda che risale */
section.site-menu.header-menu-panel {
  transform: none;
  opacity: 1;
  transition: display 0.55s allow-discrete;
}

/* Apertura: il pannello scende come una tenda dall'alto, poi le voci salgono
   una dopo l'altra e infine i contatti in fondo. Chiusura: la tenda risale. */
div.site-menu {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.55s cubic-bezier(0.76, 0, 0.24, 1);
}

.header-menu-panel--open div.site-menu {
  clip-path: inset(0);
}

@starting-style {
  .header-menu-panel--open div.site-menu {
    clip-path: inset(0 0 100% 0);
  }
}

div.site-menu h2,
section.site-menu__foot {
  opacity: 0;
  translate: 0 24px;
  transition: opacity 0.2s ease, translate 0.2s ease;
}

.header-menu-panel--open div.site-menu :is(h2, section.site-menu__foot) {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.5s ease, translate 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.header-menu-panel--open div.site-menu h2:nth-child(1) { transition-delay: 0.25s; }
.header-menu-panel--open div.site-menu h2:nth-child(2) { transition-delay: 0.3s; }
.header-menu-panel--open div.site-menu h2:nth-child(3) { transition-delay: 0.35s; }
.header-menu-panel--open div.site-menu h2:nth-child(4) { transition-delay: 0.4s; }
.header-menu-panel--open div.site-menu h2:nth-child(5) { transition-delay: 0.45s; }
.header-menu-panel--open div.site-menu h2:nth-child(6) { transition-delay: 0.5s; }
.header-menu-panel--open div.site-menu h2:nth-child(n + 7) { transition-delay: 0.55s; }
.header-menu-panel--open div.site-menu section.site-menu__foot { transition-delay: 0.65s; }

@starting-style {
  .header-menu-panel--open div.site-menu :is(h2, section.site-menu__foot) {
    opacity: 0;
    translate: 0 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  div.site-menu,
  div.site-menu :is(h2, section.site-menu__foot) {
    transition: none !important;
  }
}

/* settori sotto "Projects", più piccoli e rientrati */
div.site-menu .sectors-menu {
  margin: calc(-1 * var(--spacing-s)) 0 var(--spacing-l) var(--spacing-s);
  font-family: var(--wp--preset--font-family--ibm-plex-mono);
  font-size: var(--text-paragraph-base);
  text-transform: uppercase;
}

div.site-menu .sectors-menu li + li {
  margin-top: var(--spacing-xs);
}

/* entrano come le voci del pannello, una dopo l'altra subito dopo "Projects" */
div.site-menu .sectors-menu li {
  opacity: 0;
  translate: 0 16px;
  transition: opacity 0.2s ease, translate 0.2s ease;
}

.header-menu-panel--open div.site-menu .sectors-menu li {
  opacity: 1;
  translate: 0 0;
  transition: opacity 0.5s ease, translate 0.7s cubic-bezier(0.19, 1, 0.22, 1);
}

.header-menu-panel--open div.site-menu .sectors-menu li:nth-child(1) { transition-delay: 0.34s; }
.header-menu-panel--open div.site-menu .sectors-menu li:nth-child(2) { transition-delay: 0.38s; }
.header-menu-panel--open div.site-menu .sectors-menu li:nth-child(3) { transition-delay: 0.42s; }
.header-menu-panel--open div.site-menu .sectors-menu li:nth-child(n + 4) { transition-delay: 0.46s; }

@starting-style {
  .header-menu-panel--open div.site-menu .sectors-menu li {
    opacity: 0;
    translate: 0 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  div.site-menu .sectors-menu li {
    transition: none !important;
  }
}

div.site-menu .sectors-menu a {
  color: var(--color-white);
  text-decoration: none;
}

/* ==========================================================================
   8. Hero e foglio bianco
   Sulle pagine che iniziano con una sezione con immagine di sfondo
   (body.header-over, assets/js/header.js) l'header sta sopra la hero.
   ========================================================================== */

/* North mette nel body lo spazio per l'header: sopra la hero non serve */
body.header-over {
  padding-top: 0 !important;
}

/* lo spazio va dentro la hero, sul div con lo sfondo (--header-h: header.js) */
body.header-over main > section:first-child > div {
  padding-top: var(--header-h);
}

/* La hero si ferma quando il suo fondo arriva in fondo allo schermo e il resto
   della pagina le scorre sopra come un foglio bianco, come nel sito attuale.
   Il foglio è main::before, dalla fine della hero (--hero-h: header.js) in
   giù: copre anche gli spazi fra le sezioni. Parte esattamente dove finisce
   la hero, così da fermi non ne copre il fondo (si sovrappone solo
   scorrendo, quando la hero resta ferma). */
body.header-over main {
  position: relative;
}

/* da sticky, left/right sono i limiti dello schermo e non più uno spostamento:
   quelli del breakout di North (50%) la spingerebbero di mezzo schermo */
body.header-over main > section:first-child {
  position: sticky;
  top: min(0px, 100svh - var(--hero-h, 100svh));
  left: 0;
  right: auto;
  z-index: 0;
}

body.header-over main::before {
  content: "";
  position: absolute;
  z-index: 1;
  top: var(--hero-h, 100svh);
  bottom: 0;
  left: 50%;
  width: calc(100vw - var(--scrollbar-compensation, 0px));
  translate: -50% 0;
  background: var(--color-white);
}

body.header-over main > :not(:first-child) {
  position: relative;
  z-index: 2;
}

/* ==========================================================================
   9. Footer (pattern footer)
   ========================================================================== */

/* linea sopra il footer (separa le sezioni viola che lo precedono) */
footer {
  border-top: 1px solid var(--color-white);
}

/* form sotto titolo e testo, 32px più in basso */
.site-footer__talk .gform_wrapper {
  margin-top: var(--spacing-l);
}

/* mobile: margini laterali di 24px (le pagine ne hanno 16) */
@media (max-width: 767px) {
  div.site-footer > div {
    padding-inline: var(--spacing-m) !important;
  }

  /* in fondo solo i 32px della fascia */
  .site-footer__info .ensoul-paragraph:last-child,
  .site-footer__info p:last-child {
    margin-bottom: 0 !important;
  }
}

/* desktop: il filetto prima del contatto, alto quanto tutta la fascia, sul
   primo filetto delle certificazioni; il form parte dopo il filetto come il
   titolo (32px) */
@media (min-width: 768px) {
  .site-footer > div > .ensoul-columns-section > .ensoul-columns-block > .ensoul-column-wrapper {
    align-self: stretch !important;
  }

  .site-footer__talk {
    border-left: 1px solid var(--color-white);
  }

  .site-footer__talk .gform_wrapper {
    padding-left: var(--spacing-l);
  }
}

/* ==========================================================================
   10. Blocco "Immagine con hotspot" (blocks/hotspots, blocks/hotspot)
   Punti e card stanno in percentuale sul palco, che ha le proporzioni
   dell'immagine: restano al loro posto a ogni larghezza. Aperto, il "+"
   diventa "−" e la card si apre intorno, con il "−" nell'angolo in basso a
   sinistra (25.5px dal bordo, 16px dal fondo); view.js la gira se lì non c'è
   spazio (.is-below, .is-flip-x, .is-pinned).
   ========================================================================== */

.hotspots {
  --hs-stage-w: 100cqw;
  --hs-left: 0px;
  position: relative;
  container-type: inline-size;
}

.hotspots__stage {
  position: relative;
  aspect-ratio: var(--hs-ratio, auto);
}

.hotspots__image {
  display: block;
  width: 100%;
  height: 100%;
}

/* Livelli sopra l'immagine (render.php): posizione e larghezza in % sul
   palco, sotto i punti */
.hotspots__layer {
  position: absolute;
  height: auto;
  pointer-events: none;
}

/* Tilt (view.js): col mouse ogni livello si sposta al massimo di
   --tilt-max per la sua profondità (--depth, 0-1), in senso opposto al
   mouse; i punti seguono il livello su cui stanno */
.hotspots.has-layers {
  --tilt-max: 7px;
}

.hotspots.has-layers :is(.hotspots__image, .hotspots__layer, .hotspot) {
  translate:
    calc(var(--tilt-x, 0) * var(--depth, 0) * var(--tilt-max) * -1)
    calc(var(--tilt-y, 0) * var(--depth, 0) * var(--tilt-max) * -1);
  transition: translate 0.8s cubic-bezier(0.22, 0.61, 0.36, 1);
}

@media (prefers-reduced-motion: reduce) {
  .hotspots.has-layers :is(.hotspots__image, .hotspots__layer, .hotspot) {
    translate: none;
  }
}

/* ogni hotspot copre il palco: punto e card si posizionano sul palco */
.hotspot {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hotspot > * {
  pointer-events: auto;
}

/* la card aperta copre gli altri punti, il suo "−" sta sopra la card */
.hotspot.is-open {
  z-index: 4;
}

/* Punto: "+" bianco (default), "+" marrone, pallini dell'hero */
.hotspot__toggle {
  position: absolute;
  z-index: 3;
  left: var(--x);
  top: var(--y);
  translate: -50% -50%;
  width: 41px;
  height: 41px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: transparent url("assets/icons/hotspot-plus.svg") center / contain no-repeat;
  cursor: pointer;
  transition: scale 0.3s ease;
}

/* pallini dell'hero: due misure, piccolo e grande quando è aperto (al clic
   cresce) */
.hotspot__toggle:is(.hotspot__toggle--dot-lg, .hotspot__toggle--dot-md, .hotspot__toggle--dot-sm) {
  width: 21px;
  height: 21px;
  background-image: url("assets/icons/hotspot-dot-lg.svg");
  transition: width 0.35s ease, height 0.35s ease, scale 0.3s ease;
}

.hotspot.is-open .hotspot__toggle:is(.hotspot__toggle--dot-lg, .hotspot__toggle--dot-md, .hotspot__toggle--dot-sm) {
  width: 35px;
  height: 35px;
}

.hotspot__toggle--plus-primary {
  width: 31.36px;
  height: 31.36px;
  background-image: url("assets/icons/hotspot-plus-primary.svg");
}

/* aperto, il "+" diventa "−" (bianco sulla card marrone) */
.hotspot.is-open .hotspot__toggle--plus {
  border-radius: 0;
  background: url("assets/icons/card-close.svg") center / 21px 2px no-repeat;
}

.hotspot.is-open .hotspot__toggle--plus-primary {
  border-radius: 0;
  background: url("assets/icons/card-close-white.svg") center / 21px 2px no-repeat;
}

@media (hover: hover) {
  .hotspot:not(.is-open) .hotspot__toggle:hover {
    scale: 1.12;
  }
}

.hotspot__toggle:focus-visible {
  outline: 2px solid var(--color-primary-500);
  outline-offset: 3px;
}

/* Card chiara (default, scene dei settori): titolo, testo e foto; sotto, il
   "−". Apertura come nel sito attuale: la card sale e si ingrandisce appena,
   poi le voci entrano una dopo l'altra (titolo, testo, foto). Alla chiusura
   la card sfuma prima di sparire (display con allow-discrete). */
.hotspot__card {
  --card-w: 297px;
  position: absolute;
  z-index: 1;
  left: calc(var(--x) - 25.5px);
  bottom: calc(100% - var(--y) - 16px);
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: var(--card-w);
  padding: 16px 16px 40px;
  border-radius: 8px;
  background: var(--color-white);
  color: var(--color-primary-500);
  transform-origin: 25.5px 100%;
  transition:
    opacity 0.38s ease,
    translate 0.5s cubic-bezier(0.22, 0.9, 0.3, 1),
    scale 0.5s cubic-bezier(0.22, 0.9, 0.3, 1),
    display 0.5s allow-discrete;
}

.hotspot__card[hidden] {
  display: none;
  opacity: 0;
  translate: 0 14px;
  scale: 0.97;
}

.hotspot__card > * {
  margin: 0 !important;
  transition: opacity 0.32s ease, translate 0.44s cubic-bezier(0.22, 0.9, 0.3, 1);
}

/* con la freccia (blocco Icona, link al progetto) il titolo e la freccia
   stanno sulla stessa riga; il resto a tutta larghezza */
.hotspot__card:has(> .card-arrow):not([hidden]) {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  column-gap: var(--spacing-xs);
}

.hotspot__card:has(> .card-arrow) > :not(.wp-block-ensoul-heading, .card-arrow) {
  grid-column: 1 / -1;
}

.hotspot__card .card-arrow {
  transition: opacity 0.32s ease, translate 0.44s cubic-bezier(0.22, 0.9, 0.3, 1);
}

@media (hover: hover) {
  .hotspot__card .card-arrow:hover {
    translate: 4px 0;
  }
}

.hotspot__card > :nth-child(1) { transition-delay: 0.08s; }
.hotspot__card > :nth-child(2) { transition-delay: 0.15s; }
.hotspot__card > :nth-child(3) { transition-delay: 0.21s; }
.hotspot__card > :nth-child(n + 4) { transition-delay: 0.27s; }

@starting-style {
  .hotspot__card {
    opacity: 0;
    translate: 0 14px;
    scale: 0.97;
  }

  .hotspot__card > * {
    opacity: 0;
    translate: 0 9px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hotspot__card,
  .hotspot__card > * {
    transition: none;
  }
}

.hotspot__card figure,
.hotspot__card img {
  width: 100%;
}

.hotspot__card img {
  margin-top: 8px;
  aspect-ratio: 265 / 149;
  height: auto;
  object-fit: cover;
  border-radius: 8px;
}

/* girata in giù: il "−" nell'angolo in alto */
.hotspot.is-below .hotspot__card {
  transform-origin: 25.5px 0;
  top: calc(var(--y) - 16px);
  bottom: auto;
  padding: 40px 16px 16px;
}

/* girata a sinistra: il "−" nell'angolo a destra */
.hotspot.is-flip-x .hotspot__card {
  transform-origin: calc(100% - 25.5px) 100%;
  left: calc(var(--x) + 25.5px - var(--card-w));
}

/* non sta né sopra né sotto: in cima alla parte visibile */
.hotspot.is-pinned .hotspot__card {
  left: clamp(8px - var(--hs-left), var(--x) - 25.5px, 100cqw - var(--hs-left) - var(--card-w) - 8px);
  top: 8px;
  bottom: auto;
  padding: 16px;
}

/* "Posizione card: fissa" */
.hotspot--card-fixed .hotspot__card {
  left: var(--card-x);
  top: var(--card-y);
  bottom: auto;
  padding: 16px;
}

/* Card marrone (pagina progetto): fondo primary, testo bianco */
.hotspot--primary .hotspot__card {
  background: var(--color-primary-500);
  color: var(--color-white);
}

/* Card scura (hero): etichetta a pillola, immagine e didascalia mono */
.hotspot--dark .hotspot__card {
  --card-w: 274px;
  gap: 16px;
  background: var(--color-secondary-50);
  color: var(--color-white);
}

/* il puntino sopra la card scura */
.hotspot--dark.hotspot--card-fixed .hotspot__card::before {
  content: "";
  position: absolute;
  left: 147px;
  top: -16px;
  width: 8px;
  height: 8px;
  background: url("assets/icons/hero-dot.svg") center / contain no-repeat;
}

.hotspot--dark .hotspot__card img {
  width: 105px;
  margin: 0 auto;
  aspect-ratio: auto;
  border-radius: 0;
  object-fit: contain;
}

.hotspot__card .pill {
  align-self: flex-end;
  padding: 4px 8px;
  border: 0.5px solid currentColor;
  border-radius: 24px;
}

.hotspot__card :is(.pill, .mono) {
  font-family: var(--wp--preset--font-family--ibm-plex-mono);
  font-weight: 300;
}

@media (max-width: 767px) {
  /* Con l'altezza mobile il palco tiene quell'altezza e l'immagine si allarga
     in proporzione, spostata sul punto di fuoco. */
  .hotspots.has-mobile-crop {
    --hs-stage-w: calc(var(--hs-mobile-height) * var(--hs-ratio-n));
    --hs-left: calc(var(--hs-focus) * (100cqw - var(--hs-stage-w)));
    height: var(--hs-mobile-height);
    overflow: hidden;
  }

  .hotspots.has-mobile-crop .hotspots__stage {
    width: var(--hs-stage-w);
    height: 100%;
    left: var(--hs-left);
  }

  .hotspot__card {
    --card-w: min(297px, calc(100cqw - 32px));
  }

  /* card scura (hero) compatta in basso a sinistra: il treno resta visibile */
  .hotspot--dark .hotspot__card {
    --card-w: 212px;
    gap: 8px;
    padding: 12px;
  }

  .hotspot--dark.hotspot--card-fixed .hotspot__card {
    left: 16px;
    top: auto;
    bottom: 8px;
  }

  .hotspot--dark.hotspot--card-fixed .hotspot__card::before {
    display: none;
  }

  .hotspot--dark .hotspot__card img {
    width: 48px;
  }

  .hotspot--dark .hotspot__card .pill {
    white-space: nowrap;
  }

  /* i punti dell'hero in proporzione al treno, che su mobile è più piccolo */
  .hotspot__toggle:is(.hotspot__toggle--dot-lg, .hotspot__toggle--dot-md, .hotspot__toggle--dot-sm) {
    scale: 0.6;
  }
}

/* ==========================================================================
   11. Blocco "Scene con hotspot" (blocks/hotspot-scenes)
   Il blocco è alto una schermata per scena e il riquadro resta fermo (sticky)
   mentre la pagina scorre; view.js accende la scena e la scheda giuste.
   ========================================================================== */

.hotspot-scenes {
  height: calc(var(--scenes) * 100svh);
}

.hotspot-scenes__frame {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
}

/* il gruppo con lo sfondo riempie il riquadro */
.hotspot-scenes__frame > section,
.hotspot-scenes__frame > section > div {
  height: 100%;
}

/* le scene una sopra l'altra, in basso; si vede solo quella attiva */
.hotspot-scenes__frame .hotspots {
  position: absolute;
  inset: auto 0 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.5s ease, visibility 0.5s;
}

.hotspot-scenes__frame .hotspots.is-active {
  opacity: 1;
  visibility: visible;
}

/* schede in alto (30px): quella della scena attiva in grassetto.
   Sopra il gruppo con lo sfondo, il cui contenuto ha z-10 */
.hotspot-scenes__tabs {
  position: absolute;
  z-index: 20;
  top: 30px;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-s);
  max-width: calc(var(--spacing-container-content) + 2 * var(--north-gutter, 24px));
  margin-inline: auto;
  padding-inline: var(--north-gutter, 24px);
  font-family: var(--wp--preset--font-family--ibm-plex-sans);
  font-size: var(--text-paragraph-2xl);
  text-transform: uppercase;
  transition: translate 0.25s;
}

/* con l'header visibile le schede scendono sotto di lui (--header-h:
   header.js), insieme alla sua comparsa */
/* sotto l'header solo quando l'header copre il riquadro, di quanto lo copre
   (--tabs-push: view.js) */
.hotspot-scenes__tabs {
  translate: 0 var(--tabs-push, 0px);
}

.hotspot-scenes__tabs a {
  color: var(--color-white);
  text-decoration: none;
  opacity: 0.3;
  transition: opacity 0.3s ease;
}

.hotspot-scenes__tabs a:hover,
.hotspot-scenes__tabs a.is-active {
  opacity: 1;
}

.hotspot-scenes__tabs a.is-active {
  font-weight: 700;
}

@media (max-width: 767px) {
  /* mobile: Roboto 18px, Light le schede spente e Bold quella attiva */
  .hotspot-scenes__tabs {
    top: var(--spacing-m);
    font-family: var(--wp--preset--font-family--roboto);
    font-size: var(--text-paragraph-lg);
    font-weight: 300;
  }

  /* una parola per riga ("Train / sector"): larghezza minima, va a capo a
     ogni spazio senza testi doppi */
  .hotspot-scenes__tabs a {
    width: min-content;
  }
}

/* ==========================================================================
   11b. Blocco "Oggetto 3D" (blocks/object-3d)
   Riquadro quadrato alto --o3d-h (mobile --o3d-h-m): view.js ci disegna il
   globo o la vite che ruotano, nel colore del testo. --o3d-fill è il fondo
   delle facce della vite (copre le parti nascoste): come la pagina.
   ========================================================================== */

/* larghezza fissa e quadrato: dentro le colonne in flex non si allarga;
   l'allineamento è quello della colonna */
.object-3d {
  --o3d-fill: var(--color-white, #fff);
  flex: none;
  width: var(--o3d-h, 338px);
  max-width: 100%;
  aspect-ratio: 1;
  color: var(--color-primary-500);
}

/* vite e sedile: linee marrone scuro, come i disegni nel Figma */
.object-3d--screw,
.object-3d--seat {
  color: #49331d;
}

.object-3d canvas {
  display: block;
  width: 100%;
  height: 100%;
}

@media (max-width: 767px) {
  .object-3d {
    width: var(--o3d-h-m, 240px);
  }
}

/* editor: segnaposto */
.object-3d__placeholder {
  display: grid;
  place-items: center;
  height: 100%;
  border: 1px dashed currentColor;
  border-radius: 50%;
  font-family: var(--wp--preset--font-family--ibm-plex-mono);
  font-size: 14px;
}

/* ==========================================================================
   12. Accordion (FAQ)
   Domande in IBM Plex Sans 24px su desktop, Roboto Light 14px
   su mobile, 24px sopra e sotto (16 su mobile), filetti marroni. Icona dal
   tema (icons/accordion.svg, il "+") che aperta diventa "−",
   niente bordo sopra la prima domanda.
   ========================================================================== */

.wp-block-ensoul-accordion-section {
  --color-border-accordion: var(--color-primary-500);
  --spacing-accordion-y: 24px;
  border-top-width: 0;
}

.wp-block-ensoul-accordion-section [data-accordion-trigger] {
  font-family: var(--wp--preset--font-family--ibm-plex-sans);
  font-size: var(--text-paragraph-2xl) !important;
  font-weight: 400;
  line-height: normal;
}

@media (max-width: 767px) {
  .wp-block-ensoul-accordion-section {
    --spacing-accordion-y: 16px;
  }

  .wp-block-ensoul-accordion-section [data-accordion-trigger] {
    font-family: var(--wp--preset--font-family--roboto);
    font-size: var(--text-paragraph-sm) !important;
    font-weight: 300;
    line-height: var(--text-paragraph-sm--line-height);
  }
}

[data-accordion-trigger] svg path:first-child {
  transition: opacity 0.35s ease;
}

.wp-block-ensoul-accordion-item.is-open [data-accordion-trigger] svg path:first-child {
  opacity: 0;
}

/* ==========================================================================
   13. Pagine: Home
   ========================================================================== */

/* Hero: il treno esce a tutta larghezza e la sua parte bassa (binari) passa
   sotto "Who we are" (141px su 1280 = 11vw). */
.home-hero__train {
  margin-top: var(--spacing-m);
}

@media (min-width: 768px) {
  .home-hero__train {
    margin-bottom: -11vw;
  }
}

.home-hero__who,
.home-hero__who-text {
  position: relative;
  z-index: 4;
}

.home-hero h1 {
  max-width: 709px;
  line-height: 1.03;
}

/* testo dell'hero: 290px allineato al bordo destro */
@media (min-width: 768px) {
  .home-hero__intro .wp-block-ensoul-paragraph {
    max-width: 290px;
    margin-left: auto;
  }
}

/* mobile: i testi dell'hero e di "Who we are" rientrati a destra */
@media (max-width: 767px) {
  .home-hero__intro .ensoul-column-wrapper ~ .ensoul-column-wrapper,
  .home-hero__who-text {
    padding-left: var(--spacing-5xl);
  }

  .home-hero__who-text .ensoul-columns-block {
    row-gap: var(--spacing-s);
  }
}

/* Card settore: filetti sopra e sotto a tutta larghezza, verticali tra le
   colonne. Ogni card porta alla pagina del settore; accanto al titolo la
   freccia (blocco Icona). Titolo e freccia stanno su una riga della griglia,
   immagine e testo occupano tutta la larghezza. */
.sector-cards {
  border-block: 1px solid var(--color-primary-500);
  color: var(--color-primary-500);
}

.sector-card {
  position: relative;
  isolation: isolate;
  justify-content: flex-end;
}

.sector-card .column {
  display: grid;
  /* prima colonna larga quanto la parola più lunga del titolo, freccia
     subito dopo e in alto. Immagine e testo attraversano anche la seconda
     colonna, così non allargano quella del titolo */
  grid-template-columns: min-content minmax(36px, 1fr);
  align-content: end;
  align-items: center;
  column-gap: 4px;
  row-gap: var(--spacing-m);
}

.sector-card .column > :not(.card-arrow) {
  grid-column: 1 / -1;
}

.sector-card .column > .wp-block-ensoul-heading {
  grid-column: 1;
}

/* 36px e 4px dal titolo, allineata alla prima riga */
.sector-card .card-arrow {
  grid-column: 2;
  align-self: start;
  justify-self: start;
  width: 36px;
}

.sector-card .card-arrow svg {
  width: 36px;
  height: 36px;
}

/* l'immagine in basso nel suo spazio, alla stessa altezza nelle tre card */
.sector-card .wp-block-ensoul-image {
  align-self: end;
}

@media (min-width: 768px) {
  .sector-cards .ensoul-column-wrapper ~ .ensoul-column-wrapper {
    border-left: 1px solid var(--color-primary-500);
  }
}

/* Hover (come le card della landing): il fondo oro compare in dissolvenza,
   l'immagine si rimpicciolisce verso l'alto, titolo e freccia salgono e sotto
   compare il testo. Di quanto salire (--th) e rimpicciolire (--isc) lo
   calcola sector-cards.js. Su mobile niente hover: testo e freccia visibili. */
@media (hover: hover) and (min-width: 768px) {
  .sector-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background:
      radial-gradient(120% 100% at 88% 6%, #ffb000 0%, rgb(255 176 0 / 0) 58%),
      radial-gradient(120% 110% at 10% 80%, #b87400 0%, rgb(184 116 0 / 0) 62%),
      linear-gradient(135deg, #7a4a00 0%, #5b3600 40%, #2e1b00 100%);
    opacity: 0;
    transition: opacity 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  /* le immagini hanno il fondo bianco: col multiply sul fondo oro sparisce.
     Sta già sullo stato normale (sul bianco non cambia nulla), così all'hover
     non si crea un nuovo livello mentre parte la transizione */
  .sector-card img {
    mix-blend-mode: multiply;
    transform-origin: center top;
    transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .sector-card :is(.wp-block-ensoul-heading, .card-arrow) {
    transition: transform 0.55s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .sector-card .card-arrow svg {
    opacity: 0;
    translate: -12px 0;
    transition: opacity 0.3s ease, translate 0.4s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .sector-card p {
    position: absolute;
    left: var(--spacing-m);
    right: var(--spacing-m);
    bottom: var(--spacing-m);
    opacity: 0;
    transform: translateY(12px);
    transition: opacity 0.22s ease, transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .sector-card:is(:hover, :focus-visible) {
    color: var(--color-white);
    transition: color 0.3s ease;
  }

  .sector-card:is(:hover, :focus-visible)::before {
    opacity: 1;
    transition: opacity 1.05s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  }

  .sector-card:is(:hover, :focus-visible) img {
    transform: scale(var(--isc, 0.7));
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .sector-card:is(:hover, :focus-visible) :is(.wp-block-ensoul-heading, .card-arrow) {
    transform: translateY(calc(-1 * var(--th, 120px)));
    transition: transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1);
  }

  .sector-card:is(:hover, :focus-visible) .card-arrow svg {
    opacity: 1;
    translate: 0 0;
    transition: opacity 0.45s ease 0.12s, translate 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s;
  }

  .sector-card:is(:hover, :focus-visible) p {
    opacity: 1;
    transform: none;
    transition: opacity 0.45s ease 0.12s, transform 0.6s cubic-bezier(0.22, 0.61, 0.36, 1) 0.12s;
  }
}

@media (max-width: 767px) {
  .sector-cards .ensoul-column-wrapper ~ .ensoul-column-wrapper {
    border-top: 1px solid var(--color-primary-500);
  }
}

/* Slider prodotti: a tutta larghezza, parte allineato al contenuto ed esce dal
   bordo destro. Ogni slide è larga quanto la sua foto (alta 446px). */
.products-slider .swiper {
  padding-inline: max(var(--north-gutter, 24px), (100% - var(--spacing-container-content)) / 2);
}

.products-slider .swiper-slide {
  width: auto;
}

.products-slider img {
  border-radius: 8px;
}

/* Certificazioni (home e pattern "Our certifications"): larghezze e spazi
   sono sulle colonne; qui solo il filetto fra una colonna e l'altra
   (orizzontale su mobile, dove sono una sotto l'altra) */
@media (min-width: 768px) {
  .home-certs .ensoul-column-wrapper ~ .ensoul-column-wrapper {
    border-left: 1px solid currentColor;
  }
}

@media (max-width: 767px) {
  .home-certs .ensoul-column-wrapper ~ .ensoul-column-wrapper {
    border-top: 1px solid currentColor;
  }
}

/* ==========================================================================
   14. Pagine: About us
   ========================================================================== */

/* valori: etichetta mono sopra ogni foto, foto con gli angoli arrotondati */
.values p {
  font-family: var(--wp--preset--font-family--ibm-plex-mono);
  font-weight: 300;
  color: var(--color-black, #000);
}

.values img {
  border-radius: 8px;
}

/* mobile: i valori uno accanto all'altro, si scorrono di lato */
@media (max-width: 767px) {
  .values .ensoul-columns-block {
    display: flex;
    gap: var(--spacing-xl);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
  }

  .values .ensoul-columns-block::-webkit-scrollbar {
    display: none;
  }

  .values .ensoul-column-wrapper {
    flex: 0 0 100%;
    scroll-snap-align: start;
  }
}

/* Realizzazioni iconiche (slider di North con la timeline). L'anno è il nome
   del blocco Slide (data-slide-title): compare grande dietro e nella barra */
.iconic-slider .swiper {
  overflow: hidden;
  isolation: isolate;
}

.iconic-slider .swiper-slide {
  position: relative;
}

.iconic-slider .swiper-slide::before {
  content: attr(data-slide-title);
  position: absolute;
  z-index: -1;
  top: -10%;
  left: 50%;
  translate: -50% 0;
  font-family: var(--wp--preset--font-family--ibm-plex-mono);
  font-size: min(543px, 42vw);
  font-weight: 300;
  line-height: 1;
  white-space: nowrap;
  color: var(--color-white);
  opacity: 0.04;
  pointer-events: none;
}

.iconic-slider .content-slider-prev-next {
  color: var(--color-white);
}

/* barra degli anni: un segmento per slide, quello attivo pieno */
.iconic-slider .content-slider-timeline {
  gap: 8px;
  margin: var(--spacing-2xl) 0 0;
  padding: 0;
  border: 0;
}

.iconic-slider .timeline-marker {
  position: relative;
  flex: 1;
  height: 2px;
  background: rgb(255 255 255 / 0.1);
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.iconic-slider .timeline-marker-current {
  background: var(--color-white);
}

.iconic-slider .timeline-marker-wrap {
  position: static;
  transform: none;
}

.iconic-slider .timeline-marker-dot {
  display: none;
}

.iconic-slider .timeline-marker-title {
  margin-top: 6px;
  font-family: var(--wp--preset--font-family--ibm-plex-mono);
  font-size: var(--text-paragraph-sm);
  font-weight: 300;
  text-align: center;
  color: var(--color-white);
}

/* mobile: la barra degli anni anche qui al posto dei pallini, anni
   in mono da 12px; l'anno grande dietro in alto */
@media (max-width: 767px) {
  .iconic-slider .p-timeline.max-md\:hidden {
    display: block;
  }

  .iconic-slider .swiper-pagination {
    display: none;
  }

  .iconic-slider .content-slider-timeline {
    gap: 4px;
    margin-top: var(--spacing-l);
  }

  .iconic-slider .timeline-marker-title {
    font-size: var(--text-paragraph-xs);
  }

  .iconic-slider .swiper-slide::before {
    top: 0;
    font-size: 150px;
  }
}

/* frase sulle certificazioni: il sedile dietro, sbiadito */
section.statement > div {
  background-size: auto 100% !important;
  background-repeat: no-repeat;
}

/* ==========================================================================
   15. Pagine: Experience and Solutions
   ========================================================================== */

/* barra dei servizi: voci distribuite su tutta la riga, freccia in giù */
.services-nav {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--spacing-xs);
  padding: 0;
  list-style: none;
}

.services-nav a {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-xs);
  padding: 8px 16px;
  font-family: var(--wp--preset--font-family--roboto);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.02em;
  color: var(--color-primary-500);
  text-decoration: none;
}

.services-nav a::after {
  content: "";
  width: 8px;
  height: 14px;
  background: url("assets/icons/arrow-down.svg") center / contain no-repeat;
  transition: translate 0.3s ease;
}

.services-nav a:hover::after {
  translate: 0 3px;
}

/* foto dei servizi (sopra c'è un blocco Divider): velo arancio in modalità colore */
.service-photo figure {
  position: relative;
  overflow: hidden;
  border-radius: 8px;
}

.service-photo figure::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgb(195 124 0 / 0.2);
  mix-blend-mode: color;
  pointer-events: none;
}

.service-photo img {
  width: 100%;
  border-radius: 8px;
}


/* Mobile: titolo a scaletta, "Experience" a sinistra, "and" piccolo
   al centro fra le righe e "Solutions" a destra (una parola per riga con il
   word-spacing; l'ultima riga va a destra), voci dei servizi su due colonne
   allineate ai bordi e filetto sopra la foto di ogni servizio */
@media (max-width: 767px) {
  h1.title-stagger {
    --tw-leading: 60px;
    position: relative;
    text-align: left !important;
    text-align-last: right;
    word-spacing: 100vw;
  }

  h1.title-stagger sup {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    translate: 0 -50%;
    margin: 0;
    font-family: var(--wp--preset--font-family--roboto);
    font-size: var(--text-paragraph-sm);
    font-weight: 300;
    line-height: 18px;
    text-align: center;
    text-align-last: center;
  }

  .services-nav {
    display: grid;
    grid-template-columns: 1fr 1fr;
    row-gap: var(--spacing-m);
    padding-block: var(--spacing-m);
  }

  .services-nav li:nth-child(even) {
    justify-self: end;
  }

  .services-nav a {
    padding: 8px 0;
  }


}

/* Our Process (pattern sincronizzato, anche nei settori): fondo con gli
   angoli in alto arrotondati; a sinistra titolo e globo fermi (classe sticky
   sulla colonna), a destra gli step separati da blocchi Divider che arrivano
   al bordo dello schermo */
section.process > div {
  border-radius: 16px 16px 0 0;
}

/* il numero (apice) sta fuori, a sinistra: titolo, anche su più righe, e
   testo partono dallo stesso margine */
.process-steps h3 {
  position: relative;
  padding: 41px 0 0 42px;
}

.process-steps h3 sup {
  position: absolute;
  top: 41px;
  left: 29px;
  margin: 0;
  font-family: var(--wp--preset--font-family--ibm-plex-mono);
  font-size: var(--text-paragraph-sm);
  font-weight: 300;
}

.process-steps p {
  max-width: none;
  padding: 14px max(0px, 100% - 436px) 40px 42px;
}

@media (min-width: 768px) {
  .process-steps {
    margin-right: calc(-1 * var(--spacing-content-padding));
    border-left: 1px solid var(--color-white);
  }
}

@media (max-width: 767px) {
  .process-steps h3 {
    padding: var(--spacing-m) 0 0 16px;
  }

  .process-steps h3 sup {
    top: var(--spacing-m);
    left: 0;
  }

  .process-steps p {
    padding: var(--spacing-xs) 0 var(--spacing-m) 16px;
  }

}

/* ==========================================================================
   16. Pagine: Contatti, Work with us, Certifications
   ========================================================================== */

/* apertura: titolo, immagine al centro e testo stretto a destra */
.page-intro p {
  max-width: 289px;
}

/* posizioni aperte: come l'accordion delle FAQ, ma con il filetto anche sopra
   la prima voce, titoli in IBM Plex anche su mobile e "+" da 32px.
   La classe sta sull'<ul> dell'accordion. */
.positions.wp-block-ensoul-accordion-section {
  --spacing-accordion-y: 24px;
  border-top-width: var(--spacing-dimension-border);
}

.positions.wp-block-ensoul-accordion-section [data-accordion-trigger] {
  font-family: var(--wp--preset--font-family--ibm-plex-sans);
}

/* mobile: titoli da 24px, più grandi delle domande delle FAQ */
@media (max-width: 767px) {
  .positions.wp-block-ensoul-accordion-section [data-accordion-trigger] {
    font-family: var(--wp--preset--font-family--ibm-plex-sans);
    font-size: var(--text-paragraph-2xl) !important;
    font-weight: 400;
    line-height: normal;
  }
}

.positions.wp-block-ensoul-accordion-section [data-accordion-trigger] svg {
  width: 32px;
}

.positions.wp-block-ensoul-accordion-section [data-accordion-trigger] svg path {
  vector-effect: non-scaling-stroke;
  stroke-width: 1.5;
}

/* ==========================================================================
   17. Pagine: Settori (pattern sincronizzato "Pagina settore", Query Loop
   sui Progetti del settore)
   ========================================================================== */

.projects-list {
  margin-top: var(--spacing-8xl);
}

.projects-list .wp-block-post-template {
  margin: 0;
  padding: 0;
  list-style: none;
}

/* fra un progetto e l'altro c'è un blocco Divider a tutta larghezza in testa
   a ogni progetto: sopra il primo non serve */
.projects-list .wp-block-post-template > li:first-child > .ensoul-divider {
  display: none;
}

/* dati del progetto (anche nella pagina del progetto): etichetta mono
   maiuscola sopra il valore in grassetto */
.project-facts .column > p:first-child {
  font-family: var(--wp--preset--font-family--ibm-plex-mono);
  font-weight: 300;
  text-transform: uppercase;
}

.project-facts .ensoul-columns-block {
  row-gap: var(--spacing-l);
}

@media (max-width: 767px) {
  .project-facts .ensoul-columns-block {
    row-gap: var(--spacing-s);
  }
}

/* Mobile: ogni progetto parte dall'immagine, poi titolo, testo, dati e
   "Scopri" al centro. La prima colonna (titolo, testo e bottone) si scioglie con display: contents
   (le colonne in flex hanno ciascuna un <style> davanti: si contano con "of"),
   così i suoi blocchi si ordinano insieme alle altre colonne. */
@media (max-width: 767px) {
  .projects-list {
    margin-top: var(--spacing-4xl);
  }

  .project-row > .ensoul-columns-block {
    display: flex;
    flex-direction: column;
    row-gap: 0;
  }

  .project-row > div > .ensoul-column-wrapper:nth-child(1 of .ensoul-column-wrapper),
  .project-row > div > .ensoul-column-wrapper:nth-child(1 of .ensoul-column-wrapper) > .column {
    display: contents;
  }

  .project-row > div > .ensoul-column-wrapper:nth-child(2 of .ensoul-column-wrapper) {
    order: 1;
    margin-bottom: var(--spacing-l);
  }

  .project-row > div > .ensoul-column-wrapper:nth-child(1 of .ensoul-column-wrapper) h2 {
    order: 2;
  }

  .project-row > div > .ensoul-column-wrapper:nth-child(1 of .ensoul-column-wrapper) p {
    order: 3;
  }

  .project-row > div > .ensoul-column-wrapper:nth-child(3 of .ensoul-column-wrapper) {
    order: 4;
    margin-top: var(--spacing-xl);
  }

  .project-row > div > .ensoul-column-wrapper:nth-child(1 of .ensoul-column-wrapper) .wp-block-ensoul-button {
    order: 5;
    align-self: center;
    margin-top: var(--spacing-xl) !important;
  }
}

/* ==========================================================================
   18. Pagine: Progetto (patterns project-simple e project-detailed)
   ========================================================================== */

/* apertura semplice: il titolo grande in trasparenza dietro il disegno,
   tagliato ai bordi del contenuto (senza scroll orizzontale) */
.project-hero {
  isolation: isolate;
  overflow-x: clip;
}

.project-hero .column {
  position: relative;
}

.project-hero .ghost-title {
  position: absolute;
  z-index: -1;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  margin: 0 !important;
  font-family: var(--wp--preset--font-family--ibm-plex-sans);
  font-weight: 300;
  line-height: 1;
  /* la dimensione dei titoli di North è !important in un layer: la scritta
     (heading-base, 40px) si ingrandisce con scale fino a circa 260px */
  scale: 6.5;
  white-space: nowrap;
  color: var(--color-primary-500);
  opacity: 0.04;
  pointer-events: none;
}

@media (max-width: 767px) {
  .project-hero .ghost-title {
    scale: 2.4;
  }
}

/* card in alto a destra: foto quadrata e testo, con il bordo */
.project-card .ensoul-columns-block {
  gap: var(--spacing-s);
  padding: var(--spacing-xs);
  border: 1px solid var(--color-primary-500);
  border-radius: 8px;
}

.project-card img {
  aspect-ratio: 1;
  object-fit: cover;
  border-radius: 8px;
}

/* Mobile: testi dell'intro rientrati a destra e dati del progetto
   nell'ordine anno, azienda, tecniche, materiali, durata, pezzi */
@media (max-width: 767px) {
  .project-intro__text {
    padding-left: var(--spacing-5xl);
  }

  .project-intro__text .ensoul-columns-block {
    row-gap: var(--spacing-xs);
  }

  .single-progetto .project-facts .ensoul-column-wrapper:nth-child(n + 3) {
    order: 2;
  }

  .single-progetto .project-facts .ensoul-column-wrapper:nth-child(n + 5) {
    order: 1;
  }
}

/* apertura articolata: la scena a hotspot */
.project-scene {
  margin-top: var(--spacing-2xl);
}

/* foto con gli angoli arrotondati (foto grande, problema, galleria) */
.project-photo img {
  width: 100%;
  border-radius: 8px;
}

.project-gallery .project-photo img {
  aspect-ratio: 395 / 527;
  object-fit: cover;
}

.project-gallery + .project-gallery .project-photo img {
  aspect-ratio: 602 / 451;
}

/* Problema e soluzione (sezione viola a tutta larghezza): su desktop filetto
   verticale al centro e orizzontale fra le due parti, dal centro al bordo
   destro (la sezione lo taglia ai bordi dello schermo). Le linee a tutta
   larghezza (fra le parti su mobile, sotto la soluzione) sono blocchi Divider. */
section.project-story {
  overflow-x: clip;
}

@media (min-width: 768px) {
  .project-story__row .ensoul-column-wrapper ~ .ensoul-column-wrapper {
    border-left: 1px solid var(--color-white);
    padding-left: var(--spacing-m);
  }

  .project-story__row + .project-story__row .ensoul-column-wrapper ~ .ensoul-column-wrapper {
    position: relative;
  }

  .project-story__row + .project-story__row .ensoul-column-wrapper ~ .ensoul-column-wrapper::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100vw;
    border-top: 1px solid var(--color-white);
  }

}

/* ==========================================================================
   18b. Pagine: 404 (pattern sincronizzato "Pagina 404", templates/404.html)
   ========================================================================== */

/* "404" enorme in trasparenza dietro il contenuto, come l'anno delle
   realizzazioni in About us; tagliato ai bordi dello schermo */
section.not-found > div {
  overflow: clip;
}

.not-found__ghost {
  position: absolute;
  z-index: 0;
  top: 50%;
  left: 50%;
  translate: -50% -50%;
  margin: 0 !important;
  font-family: var(--wp--preset--font-family--ibm-plex-mono);
  font-weight: 300;
  line-height: 1;
  /* la dimensione dei titoli di North è !important in un layer: si ingrandisce
     con scale (heading-base, 40px -> ~560px) */
  scale: 14;
  white-space: nowrap;
  opacity: 0.05;
  pointer-events: none;
}

/* contenuto sopra il "404" */
section.not-found .ensoul-columns-section {
  position: relative;
  z-index: 1;
}

/* le due CTA affiancate, larghe quanto il loro testo */
.not-found__ctas .ensoul-columns-block {
  display: flex !important;
  flex-wrap: wrap;
  gap: var(--spacing-s);
}

/* North dà a ogni colonna flex: 1 con un selettore per id */
.not-found__ctas .ensoul-column-wrapper {
  width: auto !important;
  flex: none !important;
}

/* link ai settori: in riga, mono, con la freccia che scorre all'hover */
.not-found__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-xs) var(--spacing-xl);
  padding: 0;
  list-style: none;
  font-family: var(--wp--preset--font-family--ibm-plex-mono);
}

.not-found__links a {
  color: inherit;
  text-decoration: none;
}

.not-found__links a::after {
  content: "→";
  display: inline-block;
  margin-left: 0.5em;
  transition: translate 0.3s ease;
}

.not-found__links a:hover::after {
  translate: 4px 0;
}

@media (max-width: 767px) {
  .not-found__ghost {
    scale: 6;
  }

  .not-found__links {
    flex-direction: column;
  }
}

/* ==========================================================================
   19. Regole recuperate da North dal vecchio file di variabili (prima in
   uploads/north/north-custom.css, che North chiede di spostare qui). Tolte la
   regola che annullava il focus da tastiera e le ::selection doppie (usavano
   variabili inesistenti e sovrascrivevano quelle della sezione 1).
   Restano in fondo: alcune devono vincere su regole di North e del tema.
   ========================================================================== */

.w-screen {
  width: calc(100vw - var(--scrollbar-width)) !important;
}

.-ml-\[50vw\] {
  margin-left: calc(50vw * -1 + var(--scrollbar-width) / 2) !important;
}

.-mr-\[50vw\] {
  margin-right: calc(50vw * -1 + var(--scrollbar-width) / 2) !important;
}

@media (max-width: 768px) {
  .max-md\:w-screen {
    width: calc(100vw - var(--scrollbar-width)) !important;
  }

  .max-md\:-ml-\[50vw\] {
    margin-left: calc(50vw * -1 + var(--scrollbar-width) / 2) !important;
  }

  .max-md\:-mr-\[50vw\] {
    margin-right: calc(50vw * -1 + var(--scrollbar-width) / 2) !important;
  }
}

::-webkit-scrollbar {
  width: var(--scrollbar-width);
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--color-primary-500);
}

.max-w-container-columns {
  max-width: var(--spacing-container-columns) !important;
}

.max-w-container-content {
  max-width: var(--spacing-container-content) !important;
}

:where(figure) {
  margin-bottom: 0;
}

:where(.wp-site-blocks) > main {
  margin-top: 0;
}

.header-wrapper .header-content {
  padding: 0 30px;
}

.header-block-wrapper .header-main-row {
  max-width: var(--spacing-container-content);
  margin: 0 auto;
  border-radius: 8px;
  padding: 16px 24px;
  margin-top: 24px;
}

.image-location-maps,
.text-location-maps {
  display: none !important;
}

.leaflet-popup-content {
  width: 160px;
}

@media (width <= 48rem) {
  .content-slider {
    padding-bottom: 60px;
  }
  .content-slider-next,
  .content-slider-prev {
    top: auto;
    bottom: 0;
  }
}

.content-slider.autoscroll .swiper-slide figure {
  max-height: 60vh;
}

@media (max-width: 1024px) {
  .content-slider.autoscrol .swiper-slide figure {
    height: 45vh;
  }
}

.slide-index-display {
  display: none;
}

.aspect-ratio-group {
  position: relative;
  width: 100%;
  height: 0;
  padding-top: 56.25%;
  iframe {
    height: auto !important;
  }
}