/* =====================================================
   FONT
   Sostituisci i percorsi con i file reali del font "Ronzino"
   quando li avrai (cartella /fonts).
===================================================== */
@font-face {
  font-family: 'Ronzino';
  src: url('../fonts/Ronzino-Regular.woff2') format('woff2'),
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ronzino';
  src: url('../fonts/Ronzino-Medium.woff2') format('woff2'),
       url('../fonts/Ronzino-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Ronzino';
  src: url('../fonts/Ronzino-Oblique.woff2') format('woff2'),
       url('../fonts/Ronzino-Oblique.woff') format('woff');
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

/* =====================================================
   RESET / BASE
   Regole condivise da tutte le pagine del sito.
===================================================== */
* {
  box-sizing: border-box;
}

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: 'Ronzino', 'Helvetica Neue', Arial, sans-serif;
  background: var(--color-green);
  overflow-x: hidden;
}

:root {
  --color-green: #00ff1a;
  --color-black: #000000;
  --color-white: #ffffff;
  --color-grey: #d9d9d9;
  --color-grey-light: #bdbdbd;

  --border-thickness: clamp(8px, 1vw, 10px);
  --gap-thickness: clamp(8px, 1vw, 10px);

  --nav-font-size: clamp(16px, 1.6vw, 15pt);
  --nav-side-padding: clamp(24px, 4vw, 40px);
  --nav-vertical-padding: clamp(20px, 4vh, 48px);
}

a {
  color: inherit;
}

/* =====================================================
   FRAME DI PAGINA (bordi verdi)
   Verde solo in alto e a sinistra su tutta l'altezza.
   Nessun verde in basso. Verde a destra SOLO accanto
   alla sezione "riga inferiore" (vedi .row-right-border).
===================================================== */
.site-frame {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  min-height: 100dvh;
  background: var(--color-green);
  padding: var(--border-thickness) 0 0 var(--border-thickness);
  gap: var(--gap-thickness);
}

/* riga generica full-width, senza bordo verde a destra (es. header) */
.frame-row {
  background: var(--color-white);
  flex: 0 0 auto;
}

/* riga con striscia verde a destra (es. sezione con il gioco) */
.frame-row--bordered-right {
  display: flex;
  flex: 1 1 auto;
}

.frame-row--bordered-right > .frame-row__content {
  background: var(--color-white);
  flex: 1 1 auto;
  position: relative;
  overflow: hidden;
}

.frame-row--bordered-right > .frame-row__border {
  flex: 0 0 var(--border-thickness);
  background: var(--color-green);
}

/* =====================================================
   NAVBAR
   Riusabile su tutte le pagine (Work, Process, Contact...).
===================================================== */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--nav-vertical-padding) var(--nav-side-padding);
}

.navbar__logo {
  font-size: var(--nav-font-size);
  color: var(--color-black);
  font-weight: 300;
  white-space: nowrap;
  text-decoration: none;
}

.navbar__links {
  display: flex;
  gap: clamp(1rem, 1vw, 1rem);
}

.navbar__links a {
  font-size: var(--nav-font-size);
  color: var(--color-black);
  text-decoration: none;
  font-weight: 300;
}

.navbar__links a:hover,
.navbar__links a:focus-visible {
  color: var(--color-green);
}

.navbar__links a.is-active {
  font-weight: 500; 
}

@media (max-width: 640px) {
  .navbar__links {
    gap: 0.5rem;
  }
  .navbar__logo {
    font-size: clamp(13px, 3.4vw, 16px);
  }
  .navbar__links a {
    font-size: clamp(13px, 3.4vw, 16px);
  }
}

/* =====================================================
   SEZIONE GIOCO (home page)
===================================================== */
.game-section {
  min-height: 42vh;
  cursor: none;
}

.game-section__ball {
  position: absolute;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--color-grey);
  top: 0;
  left: 0;
  will-change: transform;
}

.game-section__paddle {
  position: absolute;
  height: clamp(14px, 2vh, 24px);
  width: min(32%, 523px);
  background: var(--color-black);
  bottom: clamp(24px, 5vh, 48px);
  left: 0;
  border-radius: 2px;
  will-change: transform;
}

/* HERO (riga superiore con la navbar) */
.hero {
  min-height: 42vh;
  display: flex;
  flex-direction: column;
}

/* =====================================================
   PAGINA WORK
   Sfondo bianco. Restano solo due elementi verdi:
   - una barra verticale in alto a sinistra
   - una barra orizzontale centrale a piena larghezza
   Entrambe sono decorazioni fisse, non scorrono con la galleria.
===================================================== */
.page-work {
  position: relative;
  height: 100vh; /* CAMBIATO: era min-height, ora l'altezza è fissa e vincolata allo schermo */
  height: 100dvh;
  display: flex; /* NUOVO: layout verticale a colonna */
  flex-direction: column; /* NUOVO */
  background: var(--color-white);
  overflow: hidden; /* impedisce lo scroll verticale della pagina */
}

.page-work > header {
  flex: 0 0 auto; /* NUOVO: la navbar mantiene sempre la sua altezza naturale */
}

.page-work__vbar {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--border-thickness);
  height: 49vh;
  background: var(--color-green);
  z-index: 3;
}

.page-work__hbar {
  position: absolute;
  top: 49vh;
  left: 0;
  right: 0;
  height: var(--border-thickness);
  background: var(--color-green);
  z-index: 3;
}

/* ---- galleria progetti (scroll orizzontale) ---- */
.work-gallery {
  display: flex;
  align-items: stretch; /* NUOVO: gli item si allungano per riempire l'altezza disponibile */
  flex: 1 1 auto; /* NUOVO: occupa tutto lo spazio verticale rimasto tra navbar e barra nera */
  min-height: 0; /* NUOVO: necessario perché un flex item con overflow si restringa correttamente */
  gap: clamp(16px, 1.6vw, 28px);
  overflow-x: auto;
  overflow-y: hidden;
  padding: clamp(16px, 3vh, 32px) clamp(24px, 4vw, 64px) 0 clamp(24px, 11vw, 200px); /* CAMBIATO: padding-top ridotto (era clamp(48px, 8vh, 96px)) */
  scroll-behavior: smooth;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.work-gallery::-webkit-scrollbar {
  display: none;
}

.work-item {
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}

.work-item__thumb {
  flex: 1 1 auto;
  min-height: 0;
  height: 100%;
  aspect-ratio: 521 / 614;
  overflow: hidden;
  background: var(--color-grey);
}

.work-item__thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}

.work-item__caption {
  margin-top: clamp(12px, 1.4vh, 18px);
  font-family: 'Ronzino', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: 11pt;
  line-height: 1.35;
  color: #383838;
}


.work-item__caption:hover,
.work-item__caption:focus-visible {
  color: var(--color-green);
}

.work-item__caption span {
  display: block;
}

/* ---- barra nera: indicatore di scroll della galleria ---- */
.work-scrollbar {
  position: relative;
  flex: 0 0 auto;
  height: clamp(14px, 2vh, 24px);
  margin: clamp(32px, 5vh, 64px) clamp(24px, 4vw, 64px) clamp(24px, 4vh, 48px) clamp(24px, 4vw, 64px);
}

.work-scrollbar__thumb {
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: min(32%, 523px);
  background: var(--color-black);
  border-radius: 2px;
  will-change: transform;
}

@media (max-width: 640px) {
  
}

/* =====================================================
   PAGINA CONTACT
   Pagina "ferma": nessuno scroll, tutto il contenuto deve
   rientrare in 100vh. Verde solo a sinistra (piena altezza)
   e a destra ma solo nella metà inferiore.
===================================================== */
.page-contact {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  overflow: hidden;
}

.page-contact > header {
  flex: 0 0 auto;
}

.page-contact__leftbar {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--border-thickness);
  height: 100%;
  background: var(--color-green);
  z-index: 3;
}

.page-contact__rightbar {
  position: absolute;
  top: 49vh;
  right: 0;
  bottom: 0;
  width: var(--border-thickness);
  background: var(--color-green);
  z-index: 3;
}

/* ---- griglia a 3 colonne ---- */
.contact-grid {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  column-gap: clamp(300px, 50vw, 400px);
  padding: var(--nav-vertical-padding) var(--nav-side-padding);
  overflow: hidden; 
}

.contact-col {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

/* titolo di sezione, es. "Services", "Education", "Workshop" */
.contact-heading {
  font-family: 'Ronzino', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(12px, 1.05vw, 17px);
  color: #949494;
  margin: clamp(40px, 2.5vh, 20px) 0 clamp(5px, 0.8vh, 5px) 0;
}

.contact-col > .contact-heading:first-child {
  margin-top: 1rem;
}

/* testo normale (nero) */
.contact-text,
.services-list li,
.entry__title,
.entry__subtitle {
  font-family: 'Ronzino', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(11px, 0.95vw, 15px);
  line-height: 1.35;
  color: var(--color-black);
}

/* date / durata, corsivo */
.entry__date {
  font-family: 'Ronzino', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-style: italic;
  font-size: clamp(11px, 0.95vw, 15px);
  line-height: 1.35;
  color: var(--color-black);
}

/* lista servizi (colonna 1, senza date) */
.services-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* blocco esperienza/workshop ripetibile: titolo + sottotitolo + data */
.entry {
  margin-bottom: clamp(6px, 1.1vh, 14px);
}

.entry p {
  margin: 0;
}

/* foto sotto la lista servizi */
.contact-photos {
  display: flex;
  gap: clamp(6px, 0.8vw, 12px);
  margin: clamp(40px, 2.5vh, 18px) 0;
  flex: 0 1 auto;
  min-height: 0;
}

.contact-photos img {
  height: clamp(70px, 16vh, 178px);
  width: auto;
  object-fit: cover;
  display: block;
}

/* invito al contatto + email */
.contact-invite {
  margin-top: 0;
  padding-top: -3rem;
}

.contact-links {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.contact-links a {
  font-family: 'Ronzino', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(11px, 0.95vw, 15px);
  color: var(--color-black);
  text-decoration: none;
}

.contact-links a:hover,
.contact-links a:focus-visible {
  color: var(--color-green);
}

@media (max-width: 640px) {

  /* Su mobile la pagina NON è più "ferma": si può scrollare normalmente,
     perché tutto il contenuto in una sola colonna non entra in 100vh. */
  .page-contact {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .contact-grid {
    height: auto;
    overflow: visible;
    padding: 16px 24px 48px 24px;
  }

  /* .contact-col "sparisce" come contenitore: i suoi figli diretti
     (.contact-services, .contact-photos, .contact-info, .contact-education,
     .contact-experiences, .contact-workshop, .contact-other) diventano
     figli diretti di .contact-grid e possono essere riordinati con "order" */
  .contact-grid {
    display: flex;
    flex-direction: column;
  }

  .contact-col {
    display: contents;
  }

  /* ordine richiesto: contatti, foto, servizi, poi le altre due colonne */
  .contact-info      { order: 1; }
  .contact-photos    { order: 2; }
  .contact-services  { order: 3; }
  .contact-education { order: 4; }
  .contact-experiences { order: 5; }
  .contact-workshop  { order: 6; }
  .contact-other     { order: 7; }

  .contact-info,
  .contact-photos,
  .contact-services,
  .contact-education,
  .contact-experiences,
  .contact-workshop,
  .contact-other {
    margin-bottom: 28px;
  }

  .contact-photos {
    /* su mobile le 3 foto occupano tutta la larghezza invece di essere
       dimensionate in base all'altezza dello schermo */
    margin: 0 0 28px 0;
  }

  .contact-photos img {
    height: auto;
    width: calc((100% - 2 * 8px) / 3);
  }

  .contact-heading {
    font-size: 15px;
    margin-top: 20px;
  }

  .contact-text,
  .services-list li,
  .entry__title,
  .entry__subtitle,
  .entry__date,
  .contact-links a {
    font-size: 15px;
  }
}

/* =====================================================
   PAGINA PROGETTO (template riusabile per tutti i progetti)
   Pagina "ferma": niente scroll verticale. Tre elementi verdi:
   - in alto a destra (metà larghezza)
   - in basso a sinistra (metà altezza)
   - una riga orizzontale che separa il testo dalla galleria
===================================================== */

.page-project {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  overflow: hidden;
}

.page-project > header {
  flex: 0 0 auto;
}

.page-project__topbar {
  position: absolute;
  top: 0;
  left: 50%;
  right: 0;
  height: var(--border-thickness);
  background: var(--color-green);
  z-index: 3;
}

.page-project__leftbar {
  position: absolute;
  left: 0;
  top: 49vh;
  bottom: 0;
  width: var(--border-thickness);
  background: var(--color-green);
  z-index: 3;
}

/* ---- corpo pagina: testo (fisso) + divisore + galleria ---- */
.project-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative; /* ancora la preview grande */
}

.project-content {
  flex: 1 1 auto;
  min-height: 0;
  display: grid;
  grid-template-columns: clamp(160px, 14vw, 260px) 1fr;
  gap: clamp(24px, 3vw, 48px);
  padding: var(--nav-vertical-padding) var(--nav-side-padding);
  overflow: hidden;
}

/* ---- area centrale: testo + preview grande in overlay ---- */
.project-main {
  flex: 1 1 auto;
  min-height: 0;
  position: relative;
  overflow: hidden;
}

:root {
  --project-title-col: clamp(140px, 15vw, 270px);
  --project-side-padding: clamp(24px, 4vw, 64px);
  --project-row-gap: clamp(24px, 3vw, 56px);
}


.project-title {
  flex: 0 0 var(--project-title-col);
  font-family: 'Ronzino', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 40px);
  color: var(--color-black);
  margin: 0;
}

.project-description {
  flex: 1 1 auto;
  max-width: 90ch;
  font-family: 'Ronzino', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(18px, 1.8vw, 40px);
  line-height: 1.5;
  color: var(--color-black);
}

.project-description p {
  margin: 0 0 1em 0;
}

.project-meta {
  display: flex;
  gap: var(--project-row-gap);
  color: #383838;
  font-size: clamp(13px, 1.35vw, 20px);
}

.project-meta__spacer {
   flex: 0 0 var(--project-title-col);
}


.project-meta__category,
.project-meta__year {
  flex: 0 0 auto;
  font-family: 'Ronzino', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(13px, 1.35vw, 20px);
}

/* ---- preview grande, fissa al centro, appare on-hover/click ---- */
.project-preview {
  position: absolute;
  top: 37%;
  left: 50%;
  transform: translate(-50%, -50%);
  height: max(30vh, 700px);
  overflow: hidden;
  background: var(--color-grey);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
  z-index: 4;
  box-shadow: 0 20px 45px rgba(0, 0, 0, 0.18);
}

.project-preview.is-visible {
  opacity: 1;
  pointer-events: auto;
}

.project-preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ---- divisore orizzontale verde ---- */
.project-divider {
  flex: 0 0 auto;
  height: var(--border-thickness);
  background: var(--color-green);
}

.project-gallery {
  flex: 0 0 auto;
  height: clamp(90px, 12.5vh, 150px); /* invariata: l'altezza della barra non cambia mai */
  display: flex;
  align-items: stretch;
  gap: 2px;
  background: var(--color-green);
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.project-gallery::-webkit-scrollbar {
  display: none;
}

.project-gallery img {
  height: 100%;
  width: auto;
  /* CAMBIATO: da "flex: 0 0 auto" a "flex: 1 0 auto".
     - grow:1 → se le miniature insieme non riempiono la riga, si allargano
       tutte proporzionalmente per occupare lo spazio vuoto (niente più verde a vista)
     - shrink:0 (invariato) → se invece sono tante e superano la larghezza
       disponibile, non si restringono: restano alla loro dimensione naturale
       e la riga scrolla in orizzontale, come ora */
  flex: 1 0 auto;
  display: block;
  object-fit: cover; /* invariato: è questo che "zooma" (ritaglia) l'immagine
                         quando il suo riquadro si allarga, senza deformarla
                         e senza cambiare l'altezza fissa della barra */
  cursor: pointer;
}

@media (max-width: 640px) {

  /* pagina scrollabile, niente più 100vh fisso */
  .page-project {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .project-body {
    overflow: visible;
  }

  /* da griglia titolo|testo a colonna singola impilata */
  .project-content {
    grid-template-columns: 1fr;
    gap: 12px;
    padding: 24px 24px 0 24px;
    overflow: visible;
  }

  .project-title {
    font-size: 24px;
  }

  .project-description {
    font-size: 16px;
    max-width: none;
  }

  .project-meta {
    font-size: 13px;
    padding: 0;
    margin-top: 2rem;
    gap: 16px;
  }

  .project-meta__spacer {
    display: none; /* su mobile è già tutto una colonna, non serve indentare oltre */
  }

  /* ===== QUI la parte che risolve le immagini =====
     Niente più height fissa: il riquadro si adatta all'immagine
     (orizzontale → largo e basso, verticale → stretto e alto),
     restando sempre dentro lo schermo grazie a max-width/max-height. */
  .project-preview {
    top: 38%;
    width: auto;
    height: auto;
    max-width: 90vw;
    max-height: 70vh;
  }

  .project-preview img {
    width: auto;
    height: auto;
    max-width: 90vw;
    max-height: 70vh;
    object-fit: contain; /* CAMBIATO: era "cover" (ereditato dal desktop), tagliava l'immagine */
  }

  .project-gallery {
    height: clamp(70px, 16vh, 110px);
  }
}


/* =====================================================
   PAGINA PROCESS
   Pagina "ferma": niente scroll verticale. Frame verde "a girandola":
   - barra in alto, piena larghezza
   - barra a sinistra, solo meta' superiore (sotto la barra in alto)
   - divisore orizzontale a circa meta' altezza (49vh, come nelle altre pagine)
   - barra a destra, solo meta' inferiore (sotto il divisore)
   Nessun bordo in basso.
===================================================== */
.process-page {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  background: var(--color-white);
  overflow: hidden;
}

.process-page > header {
  flex: 0 0 auto;
}

.process-page__topbar {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--border-thickness);
  background: var(--color-green);
  z-index: 3;
}

.process-page__leftbar {
  position: absolute;
  left: 0;
  top: 0;
  height: 49vh;
  width: var(--border-thickness);
  background: var(--color-green);
  z-index: 3;
}

.process-page__divider {
  position: absolute;
  left: 0;
  right: 0;
  top: 49vh;
  height: var(--border-thickness);
  background: var(--color-green);
  z-index: 3;
}

.process-page__rightbar {
  position: absolute;
  right: 0;
  top: 49vh;
  bottom: 0;
  width: var(--border-thickness);
  background: var(--color-green);
  z-index: 3;
}

.process-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative; /* NUOVO: ancora l'immagine unica di destra */
}

/* NUOVO: larghezza della colonna destra, condivisa da griglia e immagine
   cosi' non possono disallinearsi (stessa logica gia' usata per project-meta) */
.process-page {
  --process-side-width: min(32vw, 520px);
}

/* ---- riga 1: solo testo (la colonna destra resta vuota, riservata all'immagine) ---- */
.process-intro {
  flex: 1 1 50%;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr var(--process-side-width); /* CAMBIATO: era "1fr auto" */
  align-items: start;
  gap: clamp(32px, 5vw, 90px);
  padding: clamp(24px, 5vh, 56px) var(--nav-side-padding) clamp(16px, 3vh, 32px) var(--nav-side-padding);
  overflow: hidden;
}

.process-text {
  font-family: 'Ronzino', 'Helvetica Neue', Arial, sans-serif;
  font-weight: 400;
  font-size: clamp(15px, 1.5vw, 19px);
  line-height: 1.55;
  color: var(--color-black);
  max-width: 75ch;
  overflow: hidden;
}

.process-text p {
  margin: 0 0 1em 0;
}

.process-text p:last-child {
  margin-bottom: 0;
}

/* lo scarabocchio/parole non sono piu' qui: c'e' un'unica immagine
   a destra (.process-side-visual) che copre tutta l'altezza, vedi sotto */

/* ---- riga 2: foto ciclica + parole con stroke ---- */
.process-showcase {
  flex: 1 1 50%;
  min-height: 0;
  display: grid;
  grid-template-columns: 1fr var(--process-side-width); /* CAMBIATO: era "1fr auto", ora stessa variabile di .process-intro */
  align-items: center;
  gap: clamp(32px, 5vw, 90px);
  padding: clamp(16px, 3vh, 32px) var(--nav-side-padding);
  overflow: hidden;
  margin-top: -10vh;
}

.process-photo {
  position: relative;
  width: 100%;
  max-width: 885px;
  aspect-ratio: 875 / 400; 
  background: var(--color-grey);
  overflow: hidden;
}

.process-photo img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.8s ease;
}

.process-photo img.is-active {
  opacity: 1;
}

/* ---- immagine unica di destra: copre tutta l'altezza (riga 1 + riga 2)
        e passa DIETRO alla barra verde del divisore ---- */
.process-side-visual {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 15rem;
  width: var(--process-side-width); /* stessa variabile della griglia: sempre allineata */
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2; /* sopra allo sfondo bianco, ma SOTTO al divisore (z-index:3) -> ci passa sotto */
  pointer-events: none;
}

.process-side-visual img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
}

@media (max-width: 640px) {
  .process-page {
    height: auto;
    min-height: 100vh;
    overflow: visible;
  }

  .process-body {
    overflow: visible;
  }

  .process-page__divider {
    display: none;
  }

  .process-intro,
  .process-showcase {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 20px 24px;
  }

  .process-text {
    font-size: 14px;
    max-width: none;
    margin-bottom: 4rem;
  }

  /* su mobile l'immagine unica esce dal posizionamento assoluto
     (le barre verdi sono comunque nascoste) e diventa un blocco normale,
     centrato, tra le due sezioni di testo/foto */
  .process-side-visual {
    position: static;
    width: auto;
    max-width: 73vw;
    max-height: 43vh;
    margin: 2rem auto;
  }

  .process-photo {
    max-width: none;
  }
}