/* ============================================================
   OFFICINE SERENA — main.css
   Tutti gli stili specifici dei componenti e delle sezioni
   ============================================================ */

/* ============================================================
   SITE BRAND — logo assoluto top-LEFT, sovrapposto alla hero
   ============================================================ */
.site-brand {
  position: absolute;
  top: 50px;
  left: 50px;
  z-index: 200;
}

.site-logo {
  display: flex;
  align-items: center;
}

.site-logo__img {
  width: 160px;
  height: auto;
  display: block;
}

.site-logo__text {
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 1.125rem;
  line-height: 1.2;
  color: var(--color-white);
}

/* ============================================================
   NAVIGATION — sticky, appare dopo la hero
   ============================================================ */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: var(--color-beige);
  border-bottom: 1px solid var(--color-light-green); /* #B1C1A7 — Figma */
  /* Nessuna altezza fissa: la gestisce il padding del container */
}

.site-header .container {
  max-width: none;     /* Il nav deve essere sempre full-width — nessun cap a 1920px */
  padding-top: 20px;
  padding-bottom: 16px;
  padding-left: 50px;  /* fisso 50px dal bordo viewport, non dal container */
  padding-right: 50px;
}

@media (max-width: 768px) {
  .site-header .container {
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }
}

.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  /* Nessun height: 100% — con padding esplicito non serve */
}

/* Logo nel nav: nascosto fino a quando l'header non è sticky.
   Usa opacity + visibility (non display) per permettere la transizione CSS. */
.nav-logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* Diventa visibile con fade quando JS aggiunge .is-sticky all'header */
.site-header.is-sticky .nav-logo {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* ============================================================
   NO-HERO — pagine senza page builder (es. Privacy Policy)
   Il nav è subito in cima: mostra logo nel nav, nascondi .site-brand
   ============================================================ */
.no-hero .site-brand {
  display: none;
}

.no-hero .site-header .nav-logo {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: none;
}

/* Primary menu */
.primary-nav {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-left: auto; /* spinge il menu (e le azioni a destra) verso il lato destro */
  list-style: none;  /* nel caso wp_nav_menu non usi items_wrap e produca un <ul> */
  padding: 0;
  margin-bottom: 0;
}

/* Rimuove i pallini sia dagli <li> diretti sia da eventuali <ul> annidati */
.primary-nav ul,
.primary-nav li {
  list-style: none;
  padding: 0;
  margin: 0;
}

.primary-nav > li,
.primary-nav ul > li {
  display: flex;
  align-items: center;
}

.primary-nav a {
  font-family: var(--font-body);
  font-size: var(--text-supertitle);
  font-weight: 600;
  color: var(--color-black);
  line-height: var(--leading-normal);
  padding: 0.375rem 1rem;
  border-radius: var(--btn-radius);
  transition: background-color 0.2s ease, color 0.2s ease;
}

.primary-nav a:hover {
  background-color: rgba(239, 223, 128, 0.35); /* --color-yellow @ 35% */
}

.primary-nav .current-menu-item > a,
.primary-nav .current-page-ancestor > a {
  background-color: var(--color-yellow);
  color: var(--color-black);
}

/* Header actions (phone + CTA) */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.nav-phone {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: var(--text-body-mid);
  font-weight: 500;
  color: var(--color-black);
  transition: color 0.2s ease;
}

.nav-phone:hover {
  color: var(--color-green);
}

/* CTA Menu — wp_nav_menu con theme_location 'cta'.
   Gli <li> vengono appiattiti; ogni <a> è stilato come pulsante.
   Per variare lo stile, aggiungere la classe btn--outline / btn--yellow
   alla voce di menu da Aspetto → Menu (campo "Classi CSS"). */
.cta-nav {
  display: contents; /* gli <li> figli si inseriscono nel flex di .nav-actions */
  list-style: none;
  margin: 0;
  padding: 0;
}
.cta-nav li {
  list-style: none;
}
.cta-nav li a {
  /* Stile base pulsante primario — override con classi menu item */
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: var(--btn-radius);
  font-size: var(--text-body-mid);
  font-weight: 600;
  line-height: 1;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
  /* Default: stile primario (verde) */
  background-color: var(--color-green);
  color: var(--color-white);
  border: 1px solid var(--color-green);
}
.cta-nav li a:hover {
  background-color: color-mix(in srgb, var(--color-green) 85%, black);
  border-color: color-mix(in srgb, var(--color-green) 85%, black);
}
/* Stile outline — aggiungi classe "btn--outline" alla voce di menu */
.cta-nav li.btn--outline a,
.cta-nav li a.btn--outline {
  background-color: transparent;
  color: var(--color-green);
  border-color: var(--color-green);
}
.cta-nav li.btn--outline a:hover,
.cta-nav li a.btn--outline:hover {
  background-color: var(--color-green);
  color: var(--color-white);
}
/* Stile giallo — aggiungi classe "btn--yellow" alla voce di menu */
.cta-nav li.btn--yellow a,
.cta-nav li a.btn--yellow {
  background-color: var(--color-yellow);
  color: var(--color-black);
  border-color: var(--color-yellow);
}
.cta-nav li.btn--yellow a:hover,
.cta-nav li a.btn--yellow:hover {
  background-color: color-mix(in srgb, var(--color-yellow) 85%, black);
  border-color: color-mix(in srgb, var(--color-yellow) 85%, black);
}

.btn {
  max-width: 320px;
}

.btn--primary {
  background-color: var(--color-green);
  color: var(--color-white);
  border: 1px solid var(--color-green);
}

.btn--primary:hover {
  background-color: var(--color-black);
  border-color: var(--color-black);
}

.btn--outline {
  background-color: transparent;
  color: var(--color-black);
  border: 1px solid var(--color-black);
}

.btn--outline:hover {
  background-color: var(--color-black);
  color: var(--color-white);
}

.btn--yellow {
  background-color: var(--color-yellow);
  color: var(--color-black);
  border: 1px solid var(--color-yellow);
}

.btn--yellow:hover {
  background-color: var(--color-black);
  color: var(--color-white);
  border-color: var(--color-black);
}

/* Hamburger (mobile) */
.nav-toggle {
  display: none;
  width: 48px;
  height: 48px;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  cursor: pointer;
}

.nav-toggle span {
  display: block;
  width: 28px;
  height: 2px;
  background-color: var(--color-black);
  transition: transform 0.3s ease, opacity 0.3s ease;
}

.nav-toggle.is-active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.nav-toggle.is-active span:nth-child(2) { opacity: 0; }
.nav-toggle.is-active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Mobile menu drawer */
.mobile-menu {
  display: none;
  position: fixed;
  inset: 0;
  background-color: var(--color-beige);
  z-index: 200; /* sopra site-header (100) e site-brand (200) — copre tutto */
  padding: 0 50px var(--space-2xl); /* top gestito dalla topbar sticky */
  overflow-y: auto;
}

.mobile-menu.is-open {
  display: flex;
  flex-direction: column;
}

/* Barra sticky in cima al drawer — logo a sx, X a dx */
.mobile-menu__topbar {
  position: sticky;
  top: 0;
  z-index: 1;
  background-color: var(--color-beige);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 0;           /* allineata al padding laterale del drawer */
  margin-bottom: var(--space-xl);
}

/* Specificità (0,2,0) > .mobile-menu a (0,1,1) — sovrascrive border-bottom e padding del drawer */
.mobile-menu .mobile-menu__logo {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  text-decoration: none;
  border-bottom: none;
  padding: 0;
  font-size: inherit;
}

/* Pulsante X */
.mobile-menu__close {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 0;
  width: 48px;
  height: 48px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 0;
}

.mobile-menu__close span {
  display: block;
  width: 28px;
  height: 2px;
  background-color: var(--color-black);
}

.mobile-menu__close span:nth-child(1) { transform: translateY(1px) rotate(45deg); }
.mobile-menu__close span:nth-child(2) { transform: translateY(-1px) rotate(-45deg); }

/* Nasconde il toggle hamburger quando il menu è aperto */
.mobile-menu.is-open ~ * .nav-toggle,
body.menu-is-open .nav-toggle {
  opacity: 0;
  pointer-events: none;
}

/* Rimuove i pallini dai link generati da wp_nav_menu */
.mobile-menu ul,
.mobile-menu li {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Link voci menu */
.mobile-menu > ul > li > a,
.mobile-menu > li > a,
.mobile-menu a {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 3.5rem);
  font-weight: 400;
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  color: var(--color-black);
  line-height: 1.2;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(49, 46, 41, 0.2);
  display: block;
}

/* Mobile menu phone link */
.mobile-menu__phone {
  display: block;
  margin-top: var(--space-xl);
  font-family: var(--font-body);
  font-size: var(--text-body-big);
  font-weight: 600;
  color: var(--color-green);
  padding-top: var(--space-xl);
  border-top: 1px solid rgba(49, 46, 41, 0.15);
}

/* Sotto i 768px padding laterale segue --container-pad (20px) */
@media (max-width: 768px) {
  .mobile-menu {
    padding-left: var(--container-pad);
    padding-right: var(--container-pad);
  }
}

/* ============================================================
   HERO SECTION
   ============================================================ */
.hero {
  position: relative;
  background-color: var(--color-beige);
  overflow: hidden;
  min-height: 740px;
}

.hero-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
  padding: var(--section-spacing) var(--container-pad);
  min-height: 740px;
}

.hero-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 611px;
}

.hero-label {
  font-size: var(--text-supertitle);
  font-weight: 600;
  color: var(--color-black);
}

.hero-title {
  font-size: clamp(2.5rem, 5vw, var(--text-title-big));
  letter-spacing: -0.03em;
  color: var(--color-black);
}

.hero-body {
  font-size: var(--text-body-big);
  color: var(--color-black);
  max-width: 395px;
}

.hero-body strong {
  font-weight: 700;
}

.hero-ctas {
  display: flex;
  gap: 0.625rem;
  flex-wrap: wrap;
}

.hero-image {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1000 / 720;
  background-color: var(--color-gray-light);
}

.hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   PAGE HERO — blocco hero (homepage e pagine interne)
   ============================================================ */
.page-hero {
  background-color: var(--color-beige);
  overflow: hidden;
}

/* Con immagine: 2 colonne 5/7; la riga si estende all'altezza del testo */
.page-hero-inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  align-items: center;
  min-height: 740px;  /* altezza minima hero — mantiene l'immagine alta anche a viewport stretta */
}

/* Senza immagine: colonna unica con padding standard */
.page-hero-inner:not(.has-image) {
  grid-template-columns: 1fr;
  min-height: 0;
  padding: var(--section-spacing) var(--container-pad);
}

.page-hero-content {
  display: flex;
  flex-direction: column;
  gap: 1.875rem;              /* 30px — Figma */
  padding: var(--section-spacing) 3rem var(--section-spacing) 50px; /* sx: 50px fisso — Figma */
  max-width: 611px;
}

/* Eyebrow / supertitle nella hero — usa il verde primario delle site options */
.page-hero .supertitle {
  color: var(--color-green);
}

/* CTA buttons nella hero */
.page-hero-ctas {
  display: flex;
  gap: 0.625rem;              /* 10px — Figma */
  flex-wrap: wrap;
}

/* Immagine: proporzione fissa 5/4, centrata verticalmente nella riga grid. */
.page-hero-image {
  aspect-ratio: 5 / 4;
  align-self: center;
  margin: 20px 20px 20px 0;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--color-gray-light);
}

.page-hero-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* WYSIWYG body — il campo usa l'editor e wrappa in <p>.
   Reset margini WordPress, bold e link stilati. */
.page-hero-body p {
  margin: 0;
}
.page-hero-body p + p {
  margin-top: 0.5em;
}
.page-hero-body strong,
.page-hero-body b {
  font-weight: 700;
}
.page-hero-body a {
  color: inherit;
  text-decoration: underline;
}

/* Responsive — tablet e mobile */
@media (max-width: 1024px) {
  .page-hero-inner,
  .page-hero-inner:not(.has-image) {
    grid-template-columns: 1fr;
    padding: var(--section-spacing) var(--container-pad);
    gap: 2rem; /* gap tra testo e immagine nella versione stacked */
  }
  .page-hero-content {
    padding: 0;
    max-width: none;
  }
  .page-hero-image {
    /* Reset dei margini desktop — il padding del container gestisce gli spazi laterali */
    margin: 0;
    aspect-ratio: 5 / 4;
  }
}

/* ============================================================
   SECTION: INGEGNERIA (sub-hero intro)
   ============================================================ */
.section-ingegneria {
  background-color: var(--color-beige);
  padding: var(--section-spacing) var(--container-pad);
  text-align: center;
}

.section-ingegneria .intro-text {
  max-width: 774px;
  margin: 0 auto;
}

.section-ingegneria .intro-text .title-mid {
  margin-bottom: var(--space-lg);
}

/* ============================================================
   SECTION: TESTO + IMMAGINE (split reversibile)
   Nessun container — immagine a 20px dai bordi viewport.
   Posizione immagine controllata da classe: --img-left / --img-right.
   ============================================================ */
.storia-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  min-height: 560px;
  overflow: hidden; /* evita che l'immagine sfori nella colonna testo */
}

/* Immagine a SINISTRA (default) */
.storia-inner--img-left .storia-image {
  order: -1;
  margin: 20px 0 20px 20px; /* 20px dal bordo sinistro viewport */
}

.storia-inner--img-left .storia-content {
  padding: var(--section-spacing) clamp(var(--container-pad), 7vw, 7rem) var(--section-spacing) clamp(2rem, 5vw, 5rem);
}

/* Immagine a DESTRA */
.storia-inner--img-right .storia-image {
  order: 1;
  margin: 20px 20px 20px 0; /* 20px dal bordo destro viewport */
}

.storia-inner--img-right .storia-content {
  padding: var(--section-spacing) clamp(2rem, 5vw, 5rem) var(--section-spacing) clamp(var(--container-pad), 7vw, 7rem);
}

/* Immagine — proporzioni e stile */
.storia-image {
  align-self: stretch;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--color-gray-light);
  min-width: 0; /* previene overflow del grid track */
}

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

/* Contenuto testuale */
.storia-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  min-width: 0; /* previene overflow del grid track */
}

.storia-title {
  font-size: clamp(2rem, 4vw, var(--text-title-mid));
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
}

.storia-body {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

@media (max-width: 900px) {
  .storia-inner,
  .storia-inner--img-left,
  .storia-inner--img-right {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .storia-inner--img-left .storia-image,
  .storia-inner--img-right .storia-image {
    order: -1;
    margin: 20px 20px 0 20px;
    aspect-ratio: 16 / 9;
    align-self: auto;
  }
  .storia-inner--img-left .storia-content,
  .storia-inner--img-right .storia-content {
    padding: var(--space-xl) var(--container-pad);
  }
}

/* ============================================================
   SECTION: BANNER IMAGE (fullwidth rounded)
   ============================================================ */
.section-banner {
  padding: 0 20px;
  margin-bottom: 0; /* overlap gestito da section-partner */
  isolation: isolate; /* contiene il blur — non sfoca elementi esterni */
}

.section-banner .banner-image {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 1880 / 720;
  background-color: var(--color-gray-light);
}

/* Blur progressivo sulla parte bassa — la maschera gradiente lo fa partire da zero */
.section-banner .banner-image::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  mask-image: linear-gradient(to bottom, transparent 45%, black 100%);
  -webkit-mask-image: linear-gradient(to bottom, transparent 45%, black 100%);
  border-radius: inherit;
  pointer-events: none;
}

/* Gradiente scuro in basso sull'immagine banner */
.section-banner .banner-image::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 2;
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.00) 44.54%, rgba(0, 0, 0, 0.40) 100%);
  pointer-events: none;
}

.section-banner .banner-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (max-width: 768px) {
  .section-banner .banner-image {
    aspect-ratio: 5 / 4;
  }
}

/* ============================================================
   SECTION: PARTNER + SERVIZI
   Layout: testo sinistra (50px dal bordo) | card destra (20px dal bordo).
   Il background verde opaco inizia 20px sotto il banner.
   I bottoni delle card si allineano in basso tramite flex + margin-top:auto.
   ============================================================ */
.section-partner {
  background: rgba(177, 193, 167, 0.2) !important; /* var(--color-light-green) @ 0.2 — !important sovrascrive stili inline/yellow */
  padding-bottom: var(--section-spacing);
  margin-top: 20px; /* background inizia 20px sotto il banner */
  overflow: visible; /* permette alle card di fuoriuscire in alto */
}

/* Grid principale: colonna testo fissa | colonne card */
.partner-layout {
  display: grid;
  grid-template-columns: clamp(260px, 22vw, 340px) 1fr;
  gap: clamp(3rem, 6vw, 6rem);
  align-items: start;
  padding-left: var(--container-pad);  /* 50px — allineato come hero */
  padding-right: 20px;                 /* 20px dal bordo destro */
}

/* Colonna testo */
.partner-content {
  padding-top: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.partner-title {
  font-size: clamp(2rem, 4vw, var(--text-title-mid));
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  color: var(--color-black);
}

.partner-body {
  color: var(--color-black);
}

/* Griglia 3 card — margin-top negativo: le card salgono nel banner */
.services-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-lg);
  align-items: stretch;
  margin-top: -220px; /* overlap di 220px dentro il banner */
  position: relative;
  z-index: 1; /* card sopra il blur del banner */
}

/* Card come colonna flex: il body cresce, il bottone resta in fondo */
.service-card {
  display: flex;
  flex-direction: column;
}

.service-card__image {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 2;
  background-color: var(--color-gray-light);
  flex-shrink: 0;
}

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

/* Body flex:1 → tutti i bottoni finiscono alla stessa altezza */
.service-card__body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-top: var(--space-md);
}

.service-card__title {
  font-size: clamp(1.25rem, 2vw, var(--text-title-mid));
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.service-card__text {
  color: var(--color-black);
  opacity: 0.75;
}

/* Bottone sempre in basso, allineato tra le card */
.service-card__cta {
  margin-top: auto;
  align-self: flex-start;
}

@media (max-width: 1100px) {
  .partner-layout {
    grid-template-columns: 1fr;
    padding-right: var(--container-pad);
  }
}

@media (max-width: 768px) {
  .services-cards {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   SECTION: STATS — immagine sinistra + elenco statistiche destra
   ============================================================ */
.section-stats {
  background-color: var(--color-beige);
  padding: var(--section-spacing) var(--container-pad);
}

/* Layout senza immagini: colonna singola dentro .container */
.stats-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  max-width: 1228px;
  margin-left: auto;
}

/* Layout con immagini: breakout dal container.
   La section ha padding laterale di --container-pad (50px).
   Usiamo margin-left negativo per annullarlo e portare l'immagine a 20px
   dal bordo sinistro della viewport.
   Proporzioni immagine Figma: 484×560px (ratio ~6:7, portrait).
   L'immagine smargina 32px sopra e sotto rispetto alla lista statistiche:
   aggiungiamo padding verticale alla .stats-list e margin negativo al pannello. */
.stats-inner.has-images {
  display: grid;
  grid-template-columns: clamp(320px, 30vw, 484px) 1fr; /* larghezza Figma: 484px */
  gap: clamp(4.5rem, 12vw, 12rem);
  align-items: stretch;
  max-width: none;
  margin-left: calc(-1 * var(--container-pad) + 20px); /* neutralizza 50px + porta a 20px */
  margin-right: 0;
}

/* Pannello immagine — stack di immagini sovrapposte, una visibile alla volta.
   margin-top/bottom negativi creano il bleed di 32px sopra e sotto la lista. */
.stats-image-panel {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  background-color: var(--color-gray-light);
  align-self: stretch;
  margin-top: -32px;
  margin-bottom: -32px;
}

.stats-img {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.5s ease;
}

.stats-img.is-active {
  opacity: 1;
}

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

/* Elenco statistiche */
.stats-list {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: var(--space-lg);
}

.stat-row {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  cursor: default;
  transition: opacity 0.25s ease;
}

/* Dimming delle voci non hover quando una è attiva */
.stats-list:has(.stat-row:hover) .stat-row:not(:hover) {
  opacity: 0.4;
}

.stat-text {
  font-family: var(--font-display);
  font-size: clamp(2rem, 4.5vw, var(--text-title-big));
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  letter-spacing: -0.03em;
  color: var(--color-black);
  line-height: var(--leading-tight);
}

.stat-divider {
  width: 100%;
  height: 1px;
  background-color: var(--color-brown);
  opacity: 0.25;
}

/* Mobile — nasconde l'immagine, torna a layout lista */
@media (max-width: 768px) {
  .stats-inner.has-images {
    display: flex;
    flex-direction: column;
    margin-left: 0;   /* annulla il margin-left negativo desktop */
    gap: var(--space-lg);
  }
  .stats-image-panel {
    display: none;
  }
}

/* ============================================================
   SECTION: PARTNER (yellow background)
   ============================================================ */
.section-partner {
  background-color: var(--color-yellow);
  padding: var(--section-spacing) var(--container-pad);
}

.partner-inner {
  display: grid;
  grid-template-columns: 427px 1fr;
  gap: var(--space-2xl);
  align-items: start;
}

.partner-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.partner-title {
  font-size: clamp(2rem, 4vw, var(--text-title-big));
  letter-spacing: -0.03em;
  color: var(--color-black);
}

.partner-body {
  font-size: var(--text-body-big);
  color: var(--color-black);
}

/* Service cards grid */
.services-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.service-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xl);
}

.service-card__image {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 400 / 540;
  background-color: var(--color-gray-light);
}

.service-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.service-card:hover .service-card__image img {
  transform: scale(1.03);
}

.service-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.service-card__title {
  font-size: clamp(1.5rem, 3vw, var(--text-title-mid));
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.service-card__text {
  font-size: var(--text-body-big);
  color: var(--color-black);
}

/* ============================================================
   SECTION: STORIA (split layout)
   ============================================================ */
.section-storia {
  background-color: var(--color-beige);
}

.storia-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
}

.storia-image {
  border-radius: var(--radius);
  overflow: hidden;
  /* aspect-ratio rimosso: conflittava con align-self:stretch causando
     overflow del track di griglia su viewport 1024–1536px */
  background-color: var(--color-gray-light);
}

.storia-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.storia-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.storia-title {
  font-size: clamp(2rem, 4vw, var(--text-title-big));
  letter-spacing: -0.03em;
  color: var(--color-black);
}

.storia-body {
  font-size: var(--text-body-big);
  color: var(--color-black);
  line-height: var(--leading-normal);
}

/* Breakpoint intermedio — laptop 13–15" (1024–1280px):
   il layout a due colonne diventa troppo stretto; si impila.
   L'immagine mantiene i 20px di margine laterale. */
@media (max-width: 1280px) {
  .storia-inner,
  .storia-inner--img-left,
  .storia-inner--img-right {
    grid-template-columns: 1fr;
    min-height: auto;
  }
  .storia-inner--img-left .storia-image,
  .storia-inner--img-right .storia-image {
    order: 0;
    margin: 20px 20px 0 20px;
    aspect-ratio: 16 / 9;
    min-height: 480px;
    align-self: auto;
  }
  .storia-inner--img-left .storia-content,
  .storia-inner--img-right .storia-content {
    order: 1;
    padding: var(--space-xl) var(--container-pad);
  }
}

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  background-color: var(--color-green);
  color: var(--color-beige);
  padding: var(--space-3xl) var(--container-pad) var(--space-lg);
}

/* Brand area: logo (simbolo + nome) + tagline */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  padding-bottom: var(--space-3xl);
}

.footer-logo {
  display: block;
  width: auto;
  height: 120px;
  object-fit: contain;
  object-position: left center;
}

.footer-logo--text {
  font-family: var(--font-display);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-beige);
  line-height: 1.2;
}

.footer-tagline {
  font-size: var(--text-body-mid);
  color: rgba(var(--color-beige-rgb), 0.75);
}

/* Link grid: 4 colonne */
.footer-top {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  gap: var(--space-2xl);
  padding-bottom: var(--space-3xl);
}

.footer-col-title {
  font-family: var(--font-body);
  font-size: var(--text-supertitle);
  font-weight: 600;
  color: var(--color-beige);
  margin-bottom: var(--space-md);
}

.footer-col nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.footer-col nav a {
  font-size: var(--text-body-mid);
  font-weight: 500;
  color: rgba(var(--color-beige-rgb), 0.8);
  transition: color 0.2s ease;
}

.footer-col nav a:hover {
  color: var(--color-yellow);
}

.footer-contact-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  margin-bottom: var(--space-xl);
  font-style: normal;
}

.footer-contact-info p {
  font-size: var(--text-body-mid);
  font-weight: 500;
  color: rgba(var(--color-beige-rgb), 0.8);
}

.footer-contact-info a {
  color: rgba(var(--color-beige-rgb), 0.8);
  transition: color 0.2s ease;
}

.footer-contact-info a:hover {
  color: var(--color-yellow);
}

/* Social icons row */
.footer-social {
  display: flex;
  gap: 0.875rem;
  align-items: center;
  flex-wrap: wrap;
}

.footer-social a {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid rgba(var(--color-beige-rgb), 0.25);
  color: rgba(var(--color-beige-rgb), 0.75);
  transition: border-color 0.2s ease, color 0.2s ease, background-color 0.2s ease;
}

.footer-social a:hover {
  border-color: var(--color-yellow);
  color: var(--color-yellow);
  background-color: rgba(239, 223, 128, 0.08);
}

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--space-lg);
}

.footer-bottom p {
  font-size: var(--text-body-small);
  color: rgba(var(--color-beige-rgb), 0.55);
}

.footer-note {
  text-align: right;
  font-size: var(--text-body-small);
  color: rgba(var(--color-beige-rgb), 0.55);
}

.footer-note p {
  font-size: inherit;
  color: inherit;
}

.footer-note a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.2s ease;
}

.footer-note a:hover {
  color: var(--color-yellow);
}

/* ============================================================
   AZIENDA — Timeline
   ============================================================ */
.section-timeline {
  background-color: var(--color-beige);
  overflow: hidden;
  position: relative; /* ancora per il .timeline-slider-bg full-width */
}

/* Layout 2 colonne full-width */
.timeline-inner {
  display: flex;
  align-items: stretch;
  min-height: 700px;
  position: relative;
  z-index: 1; /* sopra il .timeline-slider-bg assoluto */
}

/* ── Colonna sinistra: lista ── */
.timeline-content {
  flex: 0 0 50%;
  padding: var(--section-spacing) var(--container-pad) var(--section-spacing) var(--container-pad-large);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.timeline-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-3xl); /* ~53px come in Figma */
}

.timeline-row {
  display: flex;
  align-items: flex-end;
  gap: var(--space-2xl);
}

.timeline-year {
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 4.5vw, var(--text-title-big)); /* max 72px */
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  color: var(--color-black);
  letter-spacing: -0.03em;
  line-height: 1.1;
  white-space: nowrap;
  flex-shrink: 0;
}

.timeline-desc {
  font-size: var(--text-body-big);
  color: var(--color-black);
  line-height: var(--leading-normal);
  padding-bottom: 0.15em; /* allineamento baseline con anno */
}

/* ── Colonna destra: slider ── */
.timeline-slider-wrap {
  flex: 0 0 50%;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: center; /* centra verticalmente frecce + immagini rispetto alla colonna sinistra */
  overflow: hidden;
}

.timeline-slider-bg {
  position: absolute;
  inset: 0;
  background-color: var(--color-light-green);
  opacity: 0.2;
  pointer-events: none;
  z-index: 0;
}

/* Frecce in alto a destra */
.timeline-arrows {
  position: relative;
  z-index: 2;
  display: flex;
  gap: var(--space-xs);
  padding: var(--space-lg) var(--container-pad) 0;
  justify-content: flex-end;
}

.timeline-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--color-brown);
  border-radius: 50%;
  transition: color 0.2s ease, background-color 0.2s ease;
  flex-shrink: 0;
}

.timeline-arrow:hover {
  color: var(--color-black);
  background-color: rgba(49, 46, 41, 0.07);
}

.timeline-arrow:disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* Viewport + track */
.timeline-slider-viewport {
  position: relative;
  z-index: 1;
  flex: 0 0 auto; /* si ridimensiona sul contenuto, non si allunga a riempire la colonna */
  overflow: hidden;
  padding: var(--space-lg) 20px var(--space-lg) var(--space-lg); /* 20px destro = margine finale ultimo slide */
  display: flex;
  align-items: center;
}

.timeline-slider-track {
  display: flex;
  gap: var(--space-lg);
  transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  will-change: transform;
}

.timeline-slide {
  flex: 0 0 400px;
  height: 540px;
  border-radius: var(--radius);
  overflow: hidden;
  mix-blend-mode: multiply;
}

.timeline-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   AZIENDA — Team / Certificazioni
   ============================================================ */
.section-team {
  background-color: var(--color-beige);
  padding: var(--section-spacing) var(--container-pad);
  text-align: center;
}

.section-team .intro-text {
  max-width: 774px;
  margin: 0 auto var(--space-3xl);
}

.section-certs {
  /* Sfondo: verde chiaro a 20% opacità — stessa tinta della Timeline */
  background-color: rgba(var(--color-light-green-rgb), 0.2);
  padding: var(--space-2xl) var(--container-pad-large);
}

.certs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl); /* 64px — dal Figma */
  align-items: stretch;
}

.cert-card {
  background-color: var(--color-beige);
  border-bottom: 1.5px solid var(--color-mid-green);
  border-radius: var(--radius);
  padding: 2.5rem; /* 40px — dal Figma */
  display: flex;
  flex-direction: column;
  gap: 1.0625rem; /* 17px — gap tra titolo e testo */
  line-height: var(--leading-normal);
}

.cert-title {
  font-family: var(--font-body);
  font-size: var(--text-supertitle);
  font-weight: 600;
  color: var(--color-black);
}

.cert-body {
  font-size: var(--text-body-big);
  color: var(--color-black);
}

/* ============================================================
   METODO — Fasi
   ============================================================ */
.section-processo {
  background-color: var(--color-beige);
  padding: var(--space-xl) var(--container-pad) var(--space-3xl);
}

.processo-intro {
  text-align: center;
  max-width: 774px;
  margin: 0 auto var(--space-3xl);
}

.fase-block {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: var(--space-2xl);
  align-items: flex-start;
  padding: var(--space-3xl) 0;
}

.fase-label {
  color: var(--color-green, #24483A);
  font-family: var(--font-body);
  font-size: 21px;
  font-style: normal;
  font-weight: 600;
  line-height: 120%;
}

.fase-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  padding-top: 3.25rem; /* ≈ 52px — testo allineato in alto con offset dall'immagine */
}

.fase-title {
  font-size: clamp(2rem, 4vw, var(--text-title-big));
  letter-spacing: -0.03em;
  color: var(--color-black);
}

.fase-body {
  font-size: var(--text-body-big);
  color: var(--color-black);
}

.fase-body ul {
  list-style: disc;
  padding-left: 1.25rem;
  margin-top: var(--space-sm);
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.fase-media {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 740 / 500;
  background-color: var(--color-gray-light);
}

.fase-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Fase media: slider (2+ immagini) --- */
.fase-media--slider {
  position: relative;
  overflow: hidden;
}

.fase-slider-viewport {
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.fase-slider-track {
  display: flex;
  height: 100%;
  transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}

.fase-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

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

/* Frecce navigazione — overlay bottom-right sull'immagine */
.fase-arrows {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  gap: var(--space-xs);
  z-index: 2;
}

.fase-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  color: var(--color-brown);
  border-radius: 50%;
  background-color: var(--color-beige);
  backdrop-filter: blur(4px);
  transition: color 0.2s ease, background-color 0.2s ease;
  flex-shrink: 0;
}

.fase-arrow:hover {
  color: var(--color-black);
  background-color: var(--color-beige);
}

.fase-arrow:disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* ============================================================
   SERVIZI — Lista servizi
   ============================================================ */
.section-servizi-list {
  background-color: var(--color-beige);
  padding: var(--space-xl) var(--container-pad) var(--space-3xl);
}

.servizio-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-2xl);
  align-items: center;
  padding: var(--space-3xl) 0;
  border-top: 1px solid rgba(49, 46, 41, 0.2);
}

.servizio-block:nth-child(even) .servizio-content { order: 2; }
.servizio-block:nth-child(even) .servizio-media   { order: 1; }

.servizio-content {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.servizio-label {
  font-size: var(--text-body-mid);
  font-weight: 600;
  color: var(--color-green);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.servizio-title {
  font-size: clamp(1.75rem, 3.5vw, var(--text-title-big));
  letter-spacing: -0.03em;
  color: var(--color-black);
}

.servizio-body {
  font-size: var(--text-body-big);
  color: var(--color-black);
}

.servizio-media {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 740 / 500;
  background-color: var(--color-gray-light);
}

.servizio-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ============================================================
   PROGETTI — Grid
   ============================================================ */
.section-progetti {
  background-color: var(--color-beige);
  padding: var(--section-spacing) var(--container-pad);
}

.progetti-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-xl);
}

.progetto-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  cursor: pointer;
}

.progetto-card__image {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 880 / 634;
  background-color: var(--color-gray-light);
}

.progetto-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.progetto-card:hover .progetto-card__image img {
  transform: scale(1.03);
}

.progetto-card__meta {
  display: flex;
  gap: var(--space-sm);
  font-size: var(--text-body-small);
  font-weight: 500;
  color: rgba(0,0,0,0.5);
}

.progetto-card__title {
  font-size: clamp(1.5rem, 2.5vw, var(--text-title-mid));
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.progetto-card__excerpt {
  font-size: var(--text-body-big);
  color: var(--color-black);
}

/* ============================================================
   CONTATTI
   ============================================================ */
.section-contatti {
  background-color: var(--color-beige);
  padding: var(--section-spacing) var(--container-pad);
}

.contatti-heading {
  margin-bottom: var(--space-3xl);
  max-width: 820px;
}

.contatti-inner {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: var(--space-3xl);
  align-items: start;
}

/* Left column — info items in Fraunces */
.contatti-info {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

.contatti-info__item {
  font-family: var(--font-display);
  font-size: clamp(1.375rem, 1.8vw, 2rem);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  line-height: var(--leading-tight);
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.contatti-info__item a:hover {
  color: var(--color-green);
}

/* Contact form */
.contact-form {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 0.375rem;
}

.form-group label {
  font-family: var(--font-body);
  font-size: var(--text-body-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: rgba(49, 46, 41, 0.55);
  line-height: var(--leading-normal);
}

.form-group input,
.form-group select,
.form-group textarea {
  width: 100%;
  padding: 0.75rem 0;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(49, 46, 41, 0.25);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-big);
  color: var(--color-black);
  transition: border-color 0.2s ease;
  appearance: none;
}

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus {
  outline: none;
  border-bottom-color: var(--color-green);
}

.form-group input::placeholder,
.form-group textarea::placeholder {
  color: rgba(49, 46, 41, 0.35);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
  line-height: var(--leading-normal);
}

/* Select with chevron icon */
.form-group--select .form-select-wrap {
  position: relative;
}

.form-group--select select {
  padding-right: 2rem;
  cursor: pointer;
}

.form-select-icon {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  color: var(--color-brown);
}

/* Privacy checkbox */
.form-group--checkbox {
  margin-top: var(--space-xs);
}

.form-checkbox {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}

.form-checkbox input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.form-checkbox__box {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(49, 46, 41, 0.4);
  border-radius: 4px;
  background-color: transparent;
  transition: background-color 0.15s ease, border-color 0.15s ease;
  margin-top: 2px;
}

.form-checkbox input[type="checkbox"]:checked ~ .form-checkbox__box {
  background-color: var(--color-green);
  border-color: var(--color-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 7L5.5 10L11.5 4' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.form-checkbox__label {
  font-size: var(--text-body-mid);
  color: rgba(49, 46, 41, 0.75);
  line-height: 1.5;
}

.form-checkbox__label a {
  text-decoration: underline;
  color: inherit;
}

.form-checkbox__label a:hover {
  color: var(--color-green);
}

.form-submit {
  margin-top: var(--space-sm);
}

/* Responsive */
@media (max-width: 960px) {
  .contatti-inner {
    grid-template-columns: 1fr;
    gap: var(--space-2xl);
  }
}

/* ============================================================
   SETTORI — Grid
   ============================================================ */
.section-settori {
  background-color: var(--color-beige);
  padding: var(--section-spacing) var(--container-pad);
}

.settori-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.settore-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}

.settore-card__image {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 540 / 360;
  background-color: var(--color-gray-light);
}

.settore-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.settore-card:hover .settore-card__image img {
  transform: scale(1.03);
}

.settore-card__title {
  font-size: clamp(1.25rem, 2vw, var(--text-title-mid));
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.settore-card__text {
  font-size: var(--text-body-big);
  color: var(--color-black);
}

/* ============================================================
   CTA BANNER (dark green strip)
   ============================================================ */
.section-cta-banner {
  background-color: var(--color-green);
  padding: var(--section-spacing) var(--container-pad);
}

.cta-banner-inner {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--space-2xl);
  align-items: center;
}

.cta-banner-title {
  font-size: clamp(2rem, 4vw, var(--text-title-big));
  color: var(--color-white);
  letter-spacing: -0.03em;
}

.cta-banner-body {
  font-size: var(--text-body-big);
  color: rgba(255,255,255,0.75);
  margin-top: var(--space-md);
  max-width: 600px;
}

/* ============================================================
   ANIMATIONS (intersection observer)
   ============================================================ */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.6s ease, transform 0.6s ease;
}

[data-animate].is-visible {
  opacity: 1;
  transform: translateY(0);
}

[data-animate-delay="1"] { transition-delay: 0.1s; }
[data-animate-delay="2"] { transition-delay: 0.2s; }
[data-animate-delay="3"] { transition-delay: 0.3s; }

/* ============================================================
   RESPONSIVE — Nav hamburger (max 1200px)
   ============================================================ */
@media (max-width: 1200px) {
  .nav-toggle { display: flex; }   /* mostra hamburger */
  .primary-nav { display: none; }  /* nasconde link desktop */
  .nav-actions { display: none; }  /* nasconde telefono + CTA */
}

/* ============================================================
   RESPONSIVE — Tablet (max 1024px)
   ============================================================ */
@media (max-width: 1024px) {
  :root {
    --container-pad:       2rem;
    --container-pad-large: 2rem;   /* segue --container-pad su tablet */
    --section-spacing: 4rem;
    --text-title-big:  3.5rem;
    --text-title-mid:  2.25rem;
  }

  .hero-inner { grid-template-columns: 1fr; min-height: auto; }
  .hero-image { display: none; }

  .partner-inner { grid-template-columns: 1fr; }
  .services-cards { grid-template-columns: repeat(2, 1fr); }

  .storia-inner,
  .storia-inner--img-left,
  .storia-inner--img-right,
  .contatti-inner { grid-template-columns: 1fr; }

  /* Hero page: layout impilato — testo sopra, immagine sotto */
  .page-hero-inner.has-image {
    grid-template-columns: 1fr;
    min-height: 0;
    gap: 0;
  }
  .page-hero-content {
    padding: var(--section-spacing) var(--container-pad);
    max-width: none;
  }
  .page-hero-image {
    align-self: auto;         /* torna al flow normale nella colonna singola */
    margin: 0;
    aspect-ratio: 5 / 4;     /* mantiene proporzione 5/4 in layout stacked */
  }

  .fase-block,
  .servizio-block { grid-template-columns: 1fr; }
  .fase-block:nth-child(even) .fase-content,
  .fase-block:nth-child(even) .fase-media,
  .servizio-block:nth-child(even) .servizio-content,
  .servizio-block:nth-child(even) .servizio-media { order: unset; }

  .timeline-item { grid-template-columns: 140px 1fr; }
  .timeline-image { display: none; }

  .footer-top { grid-template-columns: 1fr 1fr; gap: var(--space-xl); }

  .cta-banner-inner { grid-template-columns: 1fr; }

  .progetti-grid { grid-template-columns: 1fr; }
  .settori-grid { grid-template-columns: repeat(2, 1fr); }
  .certs-grid  { grid-template-columns: 1fr; gap: var(--space-lg); }
  .section-certs { padding: var(--space-xl) var(--container-pad); }
}

/* ============================================================
   RESPONSIVE — Mobile (max 768px)
   ============================================================ */
@media (max-width: 768px) {
  :root {
    --container-pad:   1.25rem;
    --section-spacing: 3rem;
    --text-title-big:  2.5rem;
    --text-title-mid:  1.75rem;
    --text-supertitle: 1rem;
    --space-3xl:       3rem;
    --space-2xl:       2.5rem;
  }

  /* Fix bullets mobile menu */
  .mobile-menu li {
    list-style: none;
    display: block;
  }

  /* Logo brand ridotto su mobile */
  .site-brand { top: 1.25rem; left: var(--container-pad); }
  .site-logo__img { width: 120px; }

  .hero-inner { padding: var(--space-2xl) var(--container-pad); }
  .hero-ctas { flex-direction: column; }
  .hero-ctas .btn { width: 100%; justify-content: center; }

  .services-cards { grid-template-columns: 1fr; }
  .settori-grid   { grid-template-columns: 1fr; }

  .timeline-item { grid-template-columns: 100px 1fr; gap: var(--space-lg); } /* vecchio — inert */

  /* Timeline mobile: colonne impilate */
  .timeline-inner {
    flex-direction: column;
    min-height: 0;
  }
  .timeline-content {
    flex: 0 0 auto;
    width: 100%;
    padding-left: var(--container-pad-large);
    padding-right: var(--container-pad-large);
  }
  .timeline-slider-wrap {
    flex: 0 0 auto;
    width: 100%;
  }
  /* Slider mobile: padding simmetrico, slide larga quanto il viewport meno i margini */
  .timeline-slider-viewport {
    padding: var(--container-pad); /* margini simmetrici = container-pad (20px mobile) */
  }
  .timeline-slide {
    flex: 0 0 calc(100vw - 2 * var(--container-pad)); /* larghezza viewport meno margini */
    height: auto;
    aspect-ratio: 400 / 540; /* stesso rapporto del desktop */
  }
  /* Voce timeline: anno sopra, testo sotto */
  .timeline-row {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-xs);
  }

  .footer-top { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: var(--space-sm); text-align: center; }

  .stats-grid { margin-left: 0; }

  .progetto-meta-grid { grid-template-columns: 1fr; }
  .progetto-gallery   { grid-template-columns: 1fr; }
}

/* ============================================================
   SINGLE PROGETTO — Dettaglio
   ============================================================ */
.page-hero--project .page-hero-inner {
  align-items: start;
  padding-bottom: var(--space-3xl);
}

.section-progetto-meta {
  background-color: var(--color-beige);
  padding: var(--space-2xl) var(--container-pad);
  border-bottom: 1px solid rgba(49, 46, 41, 0.15);
}

.progetto-meta-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-xl);
}

.progetto-meta-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.progetto-meta-label {
  font-size: var(--text-body-small);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--color-green);
}

.progetto-meta-value {
  font-size: clamp(1.5rem, 2.5vw, var(--text-title-mid));
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.section-progetto-body {
  background-color: var(--color-beige);
  padding: var(--section-spacing) var(--container-pad);
}

.progetto-body-inner {
  max-width: 760px;
  margin: 0 auto;
  font-size: var(--text-body-big);
  color: var(--color-black);
  line-height: var(--leading-relaxed);
}

.progetto-body-inner p + p {
  margin-top: 1.25rem;
}

.progetto-body-inner h2,
.progetto-body-inner h3 {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.section-progetto-gallery {
  background-color: var(--color-beige);
  padding: 0 var(--container-pad) var(--space-3xl);
}

.progetto-gallery {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-lg);
}

.progetto-gallery__item {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 880 / 634;
  background-color: var(--color-gray-light);
}

.progetto-gallery__item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.progetto-gallery__item:hover img {
  transform: scale(1.02);
}

/* Full-width for odd last item */
.progetto-gallery__item:last-child:nth-child(odd) {
  grid-column: 1 / -1;
  aspect-ratio: 1880 / 720;
}

.section-progetto-back {
  background-color: var(--color-beige);
  padding: var(--space-xl) var(--container-pad) var(--space-3xl);
}

.progetto-back-inner {
  border-top: 1px solid rgba(49, 46, 41, 0.15);
  padding-top: var(--space-xl);
}

/* ============================================================
   ARCHIVE PROGETTO — Paginazione
   ============================================================ */
.section-progetti--archive {
  padding-top: var(--space-2xl);
}

.archive-pagination {
  margin-top: var(--space-3xl);
}

.archive-pagination ul {
  display: flex;
  justify-content: center;
  gap: var(--space-sm);
  list-style: none;
  padding: 0;
  margin: 0;
}

.archive-pagination ul li a,
.archive-pagination ul li span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.5rem;
  height: 2.5rem;
  padding: 0 0.75rem;
  border: 1px solid rgba(49, 46, 41, 0.3);
  border-radius: 8px;
  font-size: var(--text-body-mid);
  font-weight: 500;
  color: var(--color-black);
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  white-space: nowrap;
}

.archive-pagination ul li a:hover {
  background-color: var(--color-green);
  border-color: var(--color-green);
  color: var(--color-white);
}

.archive-pagination ul li span.current {
  background-color: var(--color-green);
  border-color: var(--color-green);
  color: var(--color-white);
}

/* ============================================================
   SOLUZIONI — Griglia + Card
   ============================================================ */
/* Hero archivio soluzioni */
.section-soluzioni-hero {
  background-color: var(--color-beige);
  padding: var(--section-spacing) var(--container-pad);
}

/* Ogni categoria occupa una banda full-width con sfondo light-green */
.soluzioni-group {
  background-color: rgba(177, 193, 167, 0.2);
  padding: var(--section-spacing) 0;
  overflow: hidden;
}

.soluzioni-group:nth-child(even) {
  background-color: var(--color-beige);
}

/* Header della categoria: titolo grande Fraunces + intro opzionale */
.soluzioni-group__header {
  padding: 0 var(--container-pad) var(--space-2xl);
}

.soluzioni-group__title {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  letter-spacing: -0.03em;
  color: var(--color-black);
  line-height: 1.05;
}

/* Track orizzontale scorrevole */
.soluzioni-cards {
  display: flex;
  gap: var(--space-xl);
  padding: 0 var(--container-pad);
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  cursor: grab;
  width: max-content;
  max-width: none;
}

.soluzioni-cards::-webkit-scrollbar {
  display: none;
}

/* Card singola: 400px × [immagine 540px + corpo] */
.soluzione-card {
  width: 400px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  transition: transform 0.25s ease;
}

.soluzione-card:hover {
  transform: translateY(-4px);
}

.soluzione-card__link {
  display: flex;
  flex-direction: column;
  flex: 1;
  color: inherit;
  text-decoration: none;
}

.soluzione-card__image {
  border-radius: var(--radius);
  overflow: hidden;
  height: 320px;
  background-color: rgba(177, 193, 167, 0.4);
  flex-shrink: 0;
}

.soluzione-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.soluzione-card:hover .soluzione-card__image img {
  transform: scale(1.04);
}

.soluzione-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
  padding: var(--space-lg) 0;
  flex: 1;
}

.soluzione-card__title {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  font-size: clamp(1.5rem, 2.5vw, 3rem);
  letter-spacing: -0.02em;
  color: var(--color-black);
  line-height: 1.1;
}

.soluzione-card__excerpt {
  font-size: var(--text-body-mid);
  color: var(--color-black);
  flex: 1;
  line-height: var(--leading-normal);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.soluzione-card__cta {
  align-self: flex-start;
  margin-top: var(--space-sm);
}

/* Singola soluzione — Specifiche tecniche */
.section-soluzione-specs {
  background-color: var(--color-yellow);
  padding: var(--section-spacing) var(--container-pad);
}

.specs-table {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.spec-row {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: var(--space-xl);
  padding: var(--space-md) 0;
  border-bottom: 1px solid rgba(49, 46, 41, 0.2);
}

.spec-row:last-child {
  border-bottom: none;
}

.spec-label {
  font-size: var(--text-body-mid);
  font-weight: 600;
  color: var(--color-black);
}

.spec-value {
  font-size: var(--text-body-mid);
  color: var(--color-black);
}

/* Singola soluzione — corpo testo */
.section-soluzione-body {
  background-color: var(--color-beige);
  padding: var(--section-spacing) var(--container-pad);
}

.soluzione-body-inner {
  max-width: 760px;
  margin: 0 auto;
  font-size: var(--text-body-big);
  color: var(--color-black);
  line-height: 1.7;
}

.soluzione-body-inner p + p { margin-top: 1.25rem; }

.soluzione-body-inner h2,
.soluzione-body-inner h3 {
  font-family: var(--font-display);
  font-variation-settings: 'SOFT' 0, 'WONK' 1;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  letter-spacing: -0.02em;
}

.section-soluzione-gallery {
  background-color: var(--color-beige);
  padding: 0 var(--container-pad) var(--space-3xl);
}

/* ============================================================
   OFFERTE DI LAVORO
   ============================================================ */
.section-offerte {
  background-color: var(--color-beige);
  padding: var(--section-spacing) var(--container-pad);
}

.offerte-list {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
  max-width: 900px;
}

.offerta-card {
  background-color: var(--color-white);
  border: 1px solid rgba(49, 46, 41, 0.15);
  border-radius: var(--radius);
  padding: var(--space-xl);
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  transition: box-shadow 0.2s ease;
}

.offerta-card:hover {
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08);
}

.offerta-card__header {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.offerta-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.offerta-tag {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.75rem;
  border-radius: 100px;
  font-size: var(--text-body-small);
  font-weight: 600;
}

.offerta-tag--tipo {
  background-color: var(--color-green);
  color: var(--color-white);
}

.offerta-tag--sede {
  background-color: rgba(36, 72, 58, 0.1);
  color: var(--color-green);
}

.offerta-tag--scadenza {
  background-color: rgba(239, 223, 128, 0.6);
  color: var(--color-brown);
}

.offerta-card__title {
  font-size: clamp(1.5rem, 3vw, var(--text-title-mid));
  letter-spacing: -0.02em;
  color: var(--color-black);
}

.offerta-card__title a {
  color: inherit;
}

.offerta-card__title a:hover {
  color: var(--color-green);
}

.offerta-card__excerpt {
  font-size: var(--text-body-big);
  color: var(--color-black);
  line-height: var(--leading-normal);
}

.offerta-card__footer {
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.offerte-empty {
  padding: var(--space-3xl) 0;
}

/* ============================================================
   RESPONSIVE — Soluzioni & Offerte
   ============================================================ */
@media (max-width: 1024px) {
  /* soluzioni-cards è ora flex carousel: nessuna modifica grid necessaria */
  .spec-row { grid-template-columns: 200px 1fr; }
  .soluzioni-cards { padding-left: var(--container-pad); }
  .soluzioni-group__header { padding-left: var(--container-pad); }
}

@media (max-width: 768px) {
  .soluzione-card { width: 300px; }
  .soluzione-card__image { height: 240px; }
  .soluzioni-group__title { font-size: clamp(2rem, 8vw, 2.5rem); }
  .spec-row { grid-template-columns: 1fr; gap: var(--space-xs); }
  .offerta-card__footer { flex-direction: column; }
  .offerta-card__footer .btn { width: 100%; justify-content: center; }
}

/* ============================================================
   JOBS CAROUSEL — Lavora con Noi
   ============================================================ */
.section-jobs-carousel {
  background-color: var(--color-beige);
  padding: var(--section-spacing) 0;
  overflow: hidden;
}

/* Header: title + intro (no arrows) */
.jobs-carousel-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
  margin-bottom: var(--space-xl);
  max-width: 640px;
}

.jobs-carousel-header .title-big {
  color: var(--color-black);
}

.jobs-carousel-intro {
  font-size: var(--text-body-big);
  color: rgba(49, 46, 41, 0.65);
}

/* Row with arrows, flush-right, just above the carousel track */
.jobs-carousel-nav-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 0;
}

/* Navigation arrows */
.jobs-carousel-nav {
  display: flex;
  gap: var(--space-xs);
}

.jobs-carousel-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: transparent;
  color: var(--color-brown);
  border: none;
  cursor: pointer;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.jobs-carousel-btn:hover {
  color: var(--color-green);
}

.jobs-carousel-btn:disabled {
  opacity: 0.25;
  pointer-events: none;
}

.jobs-carousel-btn svg {
  display: block;
}

/* Track — padding sinistro speculare al bordo sinistro del .container */
.jobs-carousel-track-wrap {
  padding-top: 30px;
  padding-left: max(
    var(--container-pad),
    calc((100vw - var(--container-max)) / 2 + var(--container-pad))
  );
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.jobs-carousel-track-wrap::-webkit-scrollbar {
  display: none;
}

.jobs-carousel-track {
  display: flex;
  gap: var(--space-xl);
  width: max-content;
  padding-right: max(
    var(--container-pad),
    calc((100vw - var(--container-max)) / 2 + var(--container-pad))
  );
}

/* Job card — image-first, no box */
.job-card {
  width: 400px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.job-card__image {
  border-radius: var(--radius);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background-color: var(--color-light-green);
  margin-bottom: var(--space-xl);
}

.job-card__image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.job-card:hover .job-card__image img {
  transform: scale(1.03);
}

.job-card__image-placeholder {
  width: 100%;
  height: 100%;
  background-color: var(--color-light-green);
}

.job-card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.job-card__title {
  font-size: clamp(1.625rem, 2vw, 2.0625rem); /* ~33px */
  letter-spacing: -0.02em;
  color: var(--color-black);
  line-height: var(--leading-tight);
}

.job-card__excerpt {
  font-size: var(--text-body-big);
  color: rgba(49, 46, 41, 0.65);
  line-height: var(--leading-normal);
}

/* Sezioni descrizione / requisiti */
.job-card__field {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.job-card__field-label {
  font-size: var(--text-body-mid);
  font-weight: 600;
  color: var(--color-green);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin: 0;
}

.job-card__field-body {
  font-size: var(--text-body-big);
  color: rgba(49, 46, 41, 0.72);
  line-height: var(--leading-normal);
}

/* Reset margini WordPress per il WYSIWYG nella card */
.job-card__field-body p  { margin: 0 0 0.4em; }
.job-card__field-body p:last-child { margin-bottom: 0; }
.job-card__field-body ul,
.job-card__field-body ol { margin: 0 0 0.4em 1.25em; padding: 0; }
.job-card__field-body li { margin-bottom: 0.2em; }

.job-card__cta {
  align-self: flex-start;
  margin-top: var(--space-sm);
}

.jobs-empty {
  color: rgba(49, 46, 41, 0.65);
  font-size: var(--text-body-big);
  margin-bottom: var(--space-xl);
}

.jobs-empty__cta {
  margin-top: var(--space-sm);
}

/* Responsive */
@media (max-width: 768px) {
  .job-card { width: 300px; }
}
                                                      


/* ============================================================
   POST CAROUSEL  (.section-post-carousel)
   Layout: aside (con padding-left del container) + track full-bleed a destra.
   Stessa logica del jobs carousel: nessun container wrapper attorno al track.
   ============================================================ */

.section-post-carousel {
  background: rgba(177, 193, 167, 0.18);
  padding: 5rem 0;
  overflow-x: clip; /* impedisce scrollbar orizzontale sulla pagina */
}

/* Riga frecce — flush right, allineata al bordo destro del container */
.pc-header {
  display: flex;
  justify-content: flex-end;
  padding-right: max(
    var(--container-pad),
    calc((100vw - var(--container-max)) / 2 + var(--container-pad))
  );
  margin-bottom: 30px;
}

/* Frecce prev/next */
.pc-arrows {
  display: flex;
  gap: 0.5rem;
}

.pc-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  color: var(--color-brown);
  transition: color 0.2s ease;
  flex-shrink: 0;
}

.pc-arrow:disabled {
  opacity: 0.25;
  pointer-events: none;
}

.pc-arrow:not(:disabled):hover {
  color: var(--color-green);
}

.pc-arrow svg {
  display: block;
}

/* Layout flex: aside fisso a sinistra, track occupa tutto il resto */
.pc-layout {
  display: flex;
  align-items: flex-start;
  gap: 3.75rem;
}

/* Aside: padding-left = margine sinistro del container */
.pc-aside {
  flex-shrink: 0;
  width: calc(
    clamp(260px, 28vw, 520px)
    + max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)))
  );
  padding-left: max(
    var(--container-pad),
    calc((100vw - var(--container-max)) / 2 + var(--container-pad))
  );
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 1.875rem;
  padding-top: 0.5rem;
}

.pc-title {
  font-size: clamp(2.5rem, 4.5vw, 4.5rem);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-black);
  margin: 0;
}

.pc-body {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--color-black);
  max-width: 38ch;
  margin: 0;
}

/* Track: flex:1 → prende tutto lo spazio fino al bordo destro viewport */
.pc-track-wrap {
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  overflow-y: visible;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.pc-track-wrap::-webkit-scrollbar {
  display: none;
}

.pc-track {
  display: flex;
  gap: 2.5rem;
}

/* Spacer dopo l'ultima card — pseudo-element è più affidabile di padding-right su flex container */
.pc-track::after {
  content: '';
  display: block;
  flex-shrink: 0;
  min-width: 20px;
}

/* Card */
.pc-card {
  flex-shrink: 0;
  width: clamp(280px, 22vw, 400px);
}

.pc-card__link {
  display: block;
  text-decoration: none;
  color: inherit;
}

.pc-card__image {
  border-radius: var(--radius, 12px);
  overflow: hidden;
  aspect-ratio: 3 / 4;
  background: var(--color-beige);
  margin-bottom: 1.875rem;
}

/* Mini-slider gallery nelle card */
.pc-card__image--slider {
  position: relative;
}

.pc-cslider-track {
  display: flex;
  width: 100%;
  height: 100%;
  transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.pc-cslider-slide {
  flex: 0 0 100%;
  width: 100%;
  height: 100%;
}

.pc-cslider-slide img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.pc-card__image img,
.pc-card__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.45s ease;
}

.pc-card__placeholder {
  background: var(--color-light-green);
}

.pc-card__link:hover .pc-card__image img {
  transform: scale(1.04);
}

/* Card non cliccabile — nessun hover e cursore default */
.pc-card--no-link .pc-card__link {
  cursor: default;
  pointer-events: none;
}

.pc-card__body {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pc-card__title {
  font-size: clamp(1.375rem, 2vw, 2rem);
  line-height: 1.15;
  margin: 0;
  color: var(--color-black);
}

.pc-card__excerpt {
  font-size: 1rem;
  line-height: 1.5;
  color: var(--color-black);
  opacity: 0.65;
  margin: 0;
}

.pc-empty {
  opacity: 0.5;
  font-size: 1rem;
  padding: 3rem 0;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .pc-layout {
    flex-direction: column;
    gap: 2rem;
  }

  .pc-aside {
    width: auto;
    max-width: calc(
      600px
      + max(var(--container-pad), calc((100vw - var(--container-max)) / 2 + var(--container-pad)))
    );
  }

  /* In column layout align-items:flex-start fa sì che track-wrap si restringa al
     contenuto — il che azzera l'overflow scrollabile. Forziamo width:100% affinché
     overflow-x:auto funzioni correttamente anche su mobile. */
  .pc-track-wrap {
    width: 100%;
  }

  /* Il track parte dal margine sinistro del container, come faceva l'aside nel
     layout a riga. Sotto 640px viene sovrascritto dalla regola più semplice. */
  .pc-track {
    padding-left: max(
      var(--container-pad),
      calc((100vw - var(--container-max)) / 2 + var(--container-pad))
    );
  }
}

@media (max-width: 640px) {
  .section-post-carousel {
    padding: 3.5rem 0;
  }

  .pc-aside {
    padding-left: var(--container-pad);
    width: auto;
  }

  .pc-header {
    padding-right: var(--container-pad);
  }

  /* padding-right rimosso: lo spacer ::after su .pc-track gestisce il margine finale */

  .pc-card {
    width: clamp(240px, 72vw, 320px);
  }

  .pc-track {
    gap: 1.25rem;
    padding-left: var(--container-pad); /* 20px da bordo sinistro viewport */
  }
}


/* ============================================================
   PROJECTS LIST  (.section-projects-list)
   ============================================================ */

.section-projects-list {
  padding: 5rem 0 6rem;
}

/* Intro di sezione */
.plist-intro {
  margin-bottom: 4rem;
  max-width: 720px;
}

.plist-intro__title {
  font-size: clamp(2rem, 3.5vw, 3rem);
  line-height: 1.1;
  margin: 0 0 1rem;
}

.plist-intro__text {
  font-size: 1.125rem;
  line-height: 1.5;
  margin: 0;
  opacity: .75;
}

/* Lista: gap verticale tra item */
.plist-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Item nascosto (Load More) */
.plist-item--hidden {
  display: none;
}

/* Singolo progetto */
.plist-item {
  padding: 4rem 0;
  border-top: 1px solid rgba(49, 46, 41, 0.15);
}

.plist-item:last-child {
  border-bottom: 1px solid rgba(49, 46, 41, 0.15);
}

/* --- Top: testo + immagine --- */
.plist-top {
  display: grid;
  grid-template-columns: clamp(260px, 32%, 520px) 1fr;
  gap: 3rem;
  align-items: flex-start;
  margin-bottom: 3rem;
}

.plist-info {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding-top: 0.25rem;
}

.plist-eyebrow {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.2;
  color: var(--color-green, #24483a);
  margin: 0;
}

.plist-title {
  font-size: clamp(1.75rem, 3vw, 3rem);
  line-height: 1.1;
  margin: 0;
  color: var(--color-dark, #312e29);
}

.plist-desc {
  font-size: 1.125rem;
  line-height: 1.5;
  color: var(--color-dark, #312e29);
  margin: 0;
  max-width: 38ch;
}

.plist-image {
  border-radius: var(--radius, 12px);
  overflow: hidden;
  aspect-ratio: 16 / 7;
  background: #c4c4c4;
  position: relative; /* needed for gallery nav overlay */
}

.plist-image img,
.plist-image__placeholder {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Gallery slides — stacked, only .is-active visible */
.plist-gallery__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.plist-gallery__slide.is-active {
  opacity: 1;
  pointer-events: auto;
  position: relative; /* first active slide drives the aspect-ratio height */
}

/* Nav arrows — bottom-right corner (same style as .fase-arrow) */
.plist-gallery__nav {
  position: absolute;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  gap: var(--space-xs, 0.5rem);
  z-index: 10;
}

.plist-gallery__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-color: var(--color-beige, #edebdf);
  backdrop-filter: blur(4px);
  border: none;
  cursor: pointer;
  color: var(--color-brown, #312e29);
  transition: color 0.2s ease, background-color 0.2s ease;
  flex-shrink: 0;
}

.plist-gallery__btn:hover {
  color: var(--color-black, #000);
  background-color: var(--color-beige, #edebdf);
}

.plist-gallery__btn:disabled {
  opacity: 0.35;
  pointer-events: none;
}

/* --- Bottom: La Soluzione + Il Risultato --- */
.plist-bottom {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 5rem;
  align-items: flex-start;
}

/* Etichetta di sezione */
.plist-section-label {
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 1.25rem;
}

.plist-section-label--green { color: var(--color-green, #24483a); }
.plist-section-label--dark  { color: var(--color-dark, #312e29); }

/* Colonna soluzioni: 3 step in riga */
.plist-steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
}

/* Colonna risultato: larghezza fissa */
.plist-result {
  width: clamp(260px, 22vw, 400px);
  flex-shrink: 0;
}

/* Singolo step */
.plist-step {
  display: flex;
  gap: 1.375rem;
  align-items: flex-start;
}

.plist-step__badge {
  flex-shrink: 0;
  width: 3rem;
  height: 3rem;
  border-radius: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-sans, 'Inter', sans-serif);
  font-size: 1.3125rem;
  font-weight: 600;
  line-height: 1;
  margin-top: 0.05em;
}

.plist-step__badge--outline {
  border: 1px solid var(--color-green, #24483a);
  color: var(--color-green, #24483a);
  background: transparent;
}

.plist-step__badge--solid {
  background: var(--color-green, #24483a);
  color: #fff;
}

.plist-step__badge--solid svg {
  width: 1.5rem;
  height: 1.5rem;
}

.plist-step__text {
  font-size: 1.125rem;
  line-height: 1.4;
  color: var(--color-dark, #312e29);
  margin: 0;
  flex: 1;
}

/* Pulsante Load More */
.plist-more {
  display: flex;
  justify-content: center;
  margin-top: 3.5rem;
}

.plist-empty {
  opacity: .5;
  font-size: 1rem;
  padding: 3rem 0;
}

/* --- Responsive --- */
@media (max-width: 1100px) {
  .plist-top {
    grid-template-columns: 1fr;
  }

  .plist-image {
    aspect-ratio: 16 / 9;
  }

  .plist-bottom {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .plist-result {
    width: 100%;
  }
}

@media (max-width: 768px) {
  .plist-steps {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .plist-item {
    padding: 3rem 0;
  }
}

/* ============================================================
   PROSE — contenuto classico WP (the_content) su pagine senza
   page builder (Privacy Policy, Note Legali, ecc.)
   Scoped a .body-big per non toccare nulla del page builder.
   ============================================================ */

/* Wrapper */
.body-big {
  max-width: 760px;
  font-size: clamp(0.9375rem, 1.1vw, 1.0625rem);
  line-height: 1.75;
  color: var(--color-black);
}

/* Paragrafi */
.body-big p {
  margin-bottom: 1.25em;
}

.body-big p:last-child {
  margin-bottom: 0;
}

/* Headings */
.body-big h2,
.body-big h3,
.body-big h4,
.body-big h5,
.body-big h6 {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 1.15;
  color: var(--color-black);
  margin-top: 2.25em;
  margin-bottom: 0.6em;
}

.body-big h2 { font-size: clamp(1.5rem, 2.2vw, 2rem); }
.body-big h3 { font-size: clamp(1.25rem, 1.8vw, 1.625rem); }
.body-big h4 { font-size: clamp(1.125rem, 1.4vw, 1.375rem); }
.body-big h5,
.body-big h6 { font-size: 1rem; font-family: var(--font-body); font-weight: 600; }

/* Prima h2/h3 subito dopo il titolo pagina: meno spazio sopra */
.body-big > h2:first-child,
.body-big > h3:first-child {
  margin-top: 0.75em;
}

/* Link */
.body-big a {
  color: var(--color-green);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.body-big a:hover {
  color: var(--color-brown);
}

/* Strong / em */
.body-big strong { font-weight: 600; }
.body-big em     { font-style: italic; }

/* Liste */
.body-big ul,
.body-big ol {
  padding-left: 1.5em;
  margin-bottom: 1.25em;
}

.body-big ul { list-style-type: disc; }
.body-big ol { list-style-type: decimal; }

.body-big li {
  margin-bottom: 0.4em;
  line-height: 1.65;
}

.body-big li:last-child {
  margin-bottom: 0;
}

/* Liste annidate */
.body-big ul ul,
.body-big ol ol,
.body-big ul ol,
.body-big ol ul {
  margin-top: 0.4em;
  margin-bottom: 0;
}

/* Blockquote */
.body-big blockquote {
  border-left: 3px solid var(--color-green);
  margin: 1.75em 0;
  padding: 0.5em 0 0.5em 1.5em;
  color: rgba(49, 46, 41, 0.7);
  font-style: italic;
}

/* Separatore */
.body-big hr {
  border: none;
  border-top: 1px solid var(--color-light-green);
  margin: 2.5em 0;
}

/* Codice inline */
.body-big code {
  font-family: monospace;
  font-size: 0.875em;
  background: rgba(177, 193, 167, 0.2);
  padding: 0.1em 0.4em;
  border-radius: 3px;
}

/* Spaziatura dell'intera sezione (nessuna hero sopra) */
.no-hero .container.section {
  padding-top: var(--section-spacing);
  padding-bottom: var(--section-spacing);
}

/* ============================================================
   CONTACT FORM 7 — override stili per tema Officine Serena
   CF7 wrappa i campi in .wpcf7-form-control-wrap; la <span>
   non deve aggiungere layout. Il submit CF7 è <input type="submit">,
   non <button>, quindi serve regola dedicata.
   ============================================================ */

/* Normalizza i wrapper CF7 */
.wpcf7-form-control-wrap {
  display: block;
}

/* Campi CF7 — stesso stile underline dei campi nativi */
.wpcf7 .wpcf7-form-control:not([type="checkbox"]):not([type="submit"]) {
  width: 100%;
  padding: 0.75rem 0;
  background-color: transparent;
  border: none;
  border-bottom: 1px solid rgba(49, 46, 41, 0.25);
  border-radius: 0;
  font-family: var(--font-body);
  font-size: var(--text-body-big);
  color: var(--color-black);
  transition: border-color 0.2s ease;
  appearance: none;
  box-shadow: none;
}

.wpcf7 .wpcf7-form-control:not([type="checkbox"]):not([type="submit"]):focus {
  outline: none;
  border-bottom-color: var(--color-green);
  box-shadow: none;
}

.wpcf7 .wpcf7-form-control::placeholder {
  color: rgba(49, 46, 41, 0.35);
}

/* Textarea CF7 */
.wpcf7 textarea.wpcf7-form-control {
  resize: vertical;
  min-height: 120px;
  line-height: var(--leading-normal);
}

/* Select CF7 — mantiene il padding-right per l'icona chevron */
.wpcf7 select.wpcf7-form-control {
  padding-right: 2rem;
  cursor: pointer;
}

/* Nasconde l'asterisco CF7 "campo obbligatorio" standalone */
.wpcf7 .wpcf7-not-valid-tip,
.wpcf7 .wpcf7-response-output {
  font-size: var(--text-body-small);
}
.wpcf7 abbr[title] {
  text-decoration: none;
}

/* Accettazione privacy CF7: input nascosto + label visibile */
.wpcf7 .wpcf7-acceptance {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  cursor: pointer;
}

.wpcf7 .wpcf7-acceptance input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

/* Box finto checkbox — segue il checkbox CF7 come fratello */
.wpcf7 .wpcf7-acceptance .wpcf7-list-item-label::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border: 1.5px solid rgba(49, 46, 41, 0.4);
  border-radius: 3px;
  background-color: transparent;
  vertical-align: middle;
  margin-right: 0.75rem;
  margin-top: -2px;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}

.wpcf7 .wpcf7-acceptance input[type="checkbox"]:checked ~ .wpcf7-list-item-label::before {
  background-color: var(--color-green);
  border-color: var(--color-green);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M2.5 7L5.5 10L11.5 4' stroke='white' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: center;
}

.wpcf7 .wpcf7-acceptance .wpcf7-list-item-label {
  font-size: var(--text-body-mid);
  color: rgba(49, 46, 41, 0.75);
  line-height: 1.5;
}

.wpcf7 .wpcf7-acceptance .wpcf7-list-item-label a {
  text-decoration: underline;
  color: inherit;
}

.wpcf7 .wpcf7-acceptance .wpcf7-list-item-label a:hover {
  color: var(--color-green);
}

/* Submit CF7 — stessa resa del .btn.btn--primary */
.wpcf7 input[type="submit"].wpcf7-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  font-family: var(--font-body);
  font-size: var(--text-body-mid);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  line-height: 1;
  border-radius: 999px;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
  text-decoration: none;
  background-color: var(--color-green);
  color: var(--color-white);
  border: 1px solid var(--color-green);
}

.wpcf7 input[type="submit"].wpcf7-submit:hover {
  background-color: var(--color-black);
  border-color: var(--color-black);
}

/* ============================================================
   SHAPEGRID — canvas sfondo interattivo
   Canvas a z-index:1 → visibile su tutta la pagina; pointer-events:none
   fa sì che clic, scroll e interazioni funzionino normalmente.
   Il header (z-index:100) e l'admin bar WP (z-index:99999) rimangono
   sopra il canvas senza regole aggiuntive.
   ============================================================ */
#os-shapegrid {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  display: block;
}