/* ========================================
   CSS Variables & Reset (IDENTICO AL "CHI SIAMO")
======================================== */
:root {
  /* Noble heritage palette */
  --background: hsl(40, 30%, 96%);
  --foreground: hsl(30, 20%, 15%);
  --card: hsl(40, 25%, 94%);
  --primary: hsl(350, 45%, 25%);
  --primary-foreground: hsl(40, 30%, 96%);
  --secondary: hsl(38, 35%, 90%);
  --muted: hsl(75, 15%, 85%);
  --muted-foreground: hsl(30, 15%, 38%); /* 5.4:1 su --background e --card (AA) */
  --accent: hsl(75, 25%, 35%);
  --border: hsl(35, 20%, 85%);

  /* Le ombre del foglio sono gia' tutte calde tranne una: il token nomina
     quel bruno vinoso (rgba(44,14,22)) perche' un nero neutro sotto una
     superficie color pergamena legge grigio sporco. */
  --ombra-tinta: 345 52% 11%;
  --ombra-bassa: 0 2px 20px hsl(var(--ombra-tinta) / 0.08);
  --ombra-media: 0 10px 30px hsl(var(--ombra-tinta) / 0.12);
  --ombra-alta: 0 20px 50px hsl(var(--ombra-tinta) / 0.18);
  
  /* Typography */
  --font-serif: 'Cormorant Garamond', Georgia, serif;
  --font-sans: 'Cardo', Georgia, serif;
  
  /* Transitions */
  --transition-slow: 0.8s cubic-bezier(0.25, 0.1, 0.25, 1);
  --transition-gentle: 0.5s ease;
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* Larghezza della scrollbar, per i blocchi a piena larghezza: 100% qui
   e' il viewport senza scrollbar, 100vw la include. Vedi .stagione-scena. */
html {
  --scrollbar: calc(100vw - 100%);
}

body {
  font-family: var(--font-sans);
  font-weight: 400;
  letter-spacing: 0.01em;
  background-color: var(--background);
  color: var(--foreground);
  line-height: 1.6;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-serif);
  font-weight: 400;
  letter-spacing: 0.02em;
  line-height: 1.2;
}

img {
  max-width: 100%;
  height: auto;
  display: block;
}

a {
  text-decoration: none;
  color: inherit;
}

button {
  font-family: inherit;
  cursor: pointer;
  border: none;
  background: none;
}

/* ========================================
   Header SEMPRE FISSO - IDENTICO AL "CHI SIAMO"
======================================== */
.header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: all 0.5s ease;
  pointer-events: none;
}

.header.scrolled {
  background: color-mix(in srgb, var(--background) 95%, transparent);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--ombra-bassa);
  pointer-events: auto;
}

.header-content {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 80px;
  pointer-events: auto;
}

/* Logo container */
.combined-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  transition: opacity var(--transition-gentle);
  max-width: 200px;
  pointer-events: auto;
  position: relative;
}

.logo-main {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
}

/* Container per i loghi simbolo */
.logo-symbol-container {
  position: relative;
  width: 62px;
  height: 62px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Stile per i loghi simbolo */
.logo-default, .logo-scrolled {
  width: 62px;
  height: 62px;
  object-fit: contain;
  transition: opacity 0.3s ease;
  position: absolute;
  left: 0;
  top: 0;
}

/* Logo di default (logo1w.png) visibile quando NON scrolled */
.logo-default {
  opacity: 1;
}

/* Logo scrolled (logo-1.webp) nascosto quando NON scrolled */
.logo-scrolled {
  opacity: 0;
}

/* Quando la header è scrolled */
.header.scrolled .logo-default {
  opacity: 0;
}

.header.scrolled .logo-scrolled {
  opacity: 1;
}

/* Container per i loghi testo */
.logo-text {
  margin-left: 1rem;
  position: relative;
  width: 150px;
  height: 50px;
  display: flex;
  align-items: center;
}

/* Stile per i loghi di testo */
.logo-text-default, .logo-text-scrolled {
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: auto;
  max-height: 50px;
  object-fit: contain;
  transition: opacity 0.3s ease;
}

/* Logo di testo default (hero-provaw.png) visibile quando NON scrolled */
.logo-text-default {
  opacity: 1;
}

/* Logo di testo scrolled (hero-prova.png) nascosto quando NON scrolled */
.logo-text-scrolled {
  opacity: 0;
}

/* Quando la header è scrolled */
.header.scrolled .logo-text-default {
  opacity: 0;
}

.header.scrolled .logo-text-scrolled {
  opacity: 1;
}

/* Separatore verticale tra logo e testo */
.logo-main::after {
  content: '';
  position: absolute;
  right: -1.5rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1px;
  height: 60px;
  background: color-mix(in srgb, var(--background) 30%, transparent);
  transition: all var(--transition-gentle);
}

.header.scrolled .logo-main::after {
  background: var(--border);
}

/* Navigation */
.nav {
  display: none;
  gap: 2.5rem;
  pointer-events: auto;
}

.nav-link {
  font-size: 0.875rem;
  color: white;
  text-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);
  transition: color 0.3s ease;
  position: relative;
  padding: 0.5rem 0;
  pointer-events: auto;
  font-weight: 400;
}

.header.scrolled .nav-link {
  color: var(--foreground);
  text-shadow: none;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}

.nav-link:hover::after {
  transform: scaleX(1);
}

/* La navbar naviga tra pagine, non tra sezioni: la pagina corrente e'
   marcata in HTML con aria-current, non calcolata allo scroll. */
.nav-link[aria-current="page"]::after {
  transform: scaleX(1);
}

/* Mobile Menu Button */
.mobile-menu-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  min-width: 44px;
  min-height: 44px;
  padding: 0.5rem;
  z-index: 1001;
  pointer-events: auto;
}

.mobile-menu-btn span {
  width: 24px;
  height: 1px;
  background: white;
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.5));
  transition: all 0.3s ease;
}

.header.scrolled .mobile-menu-btn span {
  background: var(--foreground);
  filter: none;
}

.mobile-menu-btn.active span:nth-child(1) {
  transform: rotate(45deg) translate(6px, 6px);
}

.mobile-menu-btn.active span:nth-child(2) {
  opacity: 0;
}

.mobile-menu-btn.active span:nth-child(3) {
  transform: rotate(-45deg) translate(6px, -6px);
}

/* Open mobile nav overlay */

/* ========================================
   Layout del contenuto principale
======================================== */
.container {
  width: 100%;
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

.main-content {
  position: relative;
  z-index: 10;
  background: var(--background);
}

.section {
  padding: 6rem 0;
}

@media (min-width: 768px) {
  .section {
    padding: 8rem 0;
  }
}

@media (min-width: 1024px) {
  .section {
    padding: 10rem 0;
  }
}

/* ========================================
   Hero Section - PARALLAX IDENTICO AL "CHI SIAMO"
======================================== */
.hero-cosafacciamo {
  /* L'originale era 6000x4000 e 7,1 MB: 309 KB nel caso comune, 629 KB
     dove servono davvero. Le due soglie devono restare identiche a quelle
     dei due <link rel="preload"> nell'<head>, o il browser scarica due
     hero invece di una. */
  background-image: url("../../assets/cosa-facciamo-hero-1440.webp");
  background-size: cover;
  background-position: center;
  color: var(--primary-foreground);
  text-align: center;
  padding: 0;
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}

@media (min-width: 1440.02px), (resolution > 1.5x) {
  .hero-cosafacciamo {
    background-image: url("../../assets/cosa-facciamo-hero-2400.webp");
  }
}

.hero-cosafacciamo::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.4);
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  margin-top: 80px;
  padding: 2rem 1rem;
}

@media (min-width: 768px) {
  .hero-content {
    margin-top: 100px;
    padding: 4rem 2rem;
  }
}

@media (min-width: 1024px) {
  .hero-content {
    margin-top: 120px;
    padding: 6rem 3rem;
  }
}

.hero-label {
  font-size: 0.875rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0.8;
  margin-bottom: 1rem;
}

.hero-title {
  font-size: clamp(2.5rem, 6vw, 4rem);
  margin-bottom: 1.5rem;
}

.divider {
  width: 60px;
  height: 1px;
  background: currentColor;
  opacity: 0.6;
  margin: 2rem auto;
}

.divider-center {
  margin-left: auto;
  margin-right: auto;
}

.hero-subtitle {
  font-size: 1.125rem;
  max-width: 64rem;
  margin: 0 auto;
  opacity: 0.9;
  line-height: 1.8;
  font-weight: 400;
}

/* ========================================
   Attività Section
======================================== */
.attivita {
  background: #ffffff;
  /* La scena stagionale chiude la sezione da sola, a filo: il padding
     verticale di base lascerebbe un vuoto bianco tra la foto e la
     sezione successiva invece di lasciarla toccare il bordo. */
  padding-bottom: 0;
}

.attivita-header {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 4rem;
}

.section-label {
  font-size: 0.75rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: var(--muted-foreground);
  margin-bottom: 1rem;
}

.section-title {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: 1.5rem;
}

.attivita-intro {
  font-size: 1.2rem;
  line-height: 1.8;
  color: var(--muted-foreground);
  margin-top: 2rem;
  max-width: 56rem;
  margin-left: auto;
  margin-right: auto;
}

/* ========================================
   Il quadrante dell'anno
   Un solo anello sottile e vuoto. Le stagioni non stanno dentro il
   cerchio: gli stanno intorno, agganciate al bordo da un trattino
   radiale, in senso orario dall'alto. Al passaggio l'anello si contrae
   verso la stagione scelta e vi atterra come pallino pieno.

   Sul contrasto: il porpora del sito e' troppo scuro per reggere come
   linea di un pixel sopra una fotografia. Anello e trattini vanno
   quindi in crema con un'ombra sotto, e il porpora si concentra dove
   e' denso — il pallino, che il tratto crema circonda come alone.
======================================== */
.quadrante-wrap {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
}

/* Il terreno del quadrante. Anello, trattini e nomi sono segni chiari e
   sottili appoggiati su quattro fotografie diversissime: il cielo bianco
   dell'inverno e le colline verdi della primavera se li mangiavano. Non
   e' un problema di opacita' dei segni — e' che mancava un fondo. Questa
   pozza scura, larga abbastanza da coprire anche i nomi fuori dall'anello
   e sfumata fino a zero ben prima delle etichette di lavoro, gliene da'
   uno che viaggia con loro qualunque foto ci sia sotto. */
.quadrante-wrap::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: calc(var(--quadrante) * 3.6);
  height: calc(var(--quadrante) * 2.7);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
  z-index: -1;
  /* La coda deve morire lentissima: su un cielo piatto come quello
     dell'inverno qualsiasi spigolo nella rampa si legge come una cupola
     grigia. Molte fermate ravvicinate piu' una sfocatura leggera e il
     bordo non esiste — resta solo la pozza. */
  background: radial-gradient(
    ellipse at center,
    hsl(350 55% 6% / 0.46) 0%,
    hsl(350 55% 6% / 0.42) 18%,
    hsl(350 55% 6% / 0.33) 34%,
    hsl(350 55% 6% / 0.22) 48%,
    hsl(350 55% 6% / 0.13) 62%,
    hsl(350 55% 6% / 0.06) 76%,
    hsl(350 55% 6% / 0.02) 88%,
    hsl(350 55% 6% / 0) 100%
  );
  filter: blur(22px);
  opacity: 0.9;
  transition: opacity 0.6s ease;
}

/* A stagione scelta i tre nomi spenti hanno piu' bisogno di fondo:
   la pozza si chiude di un soffio invece di lasciarli al caso. */
.stagione-scena.chiuso .quadrante-wrap::before {
  opacity: 1;
}

.quadrante {
  position: relative;
  width: var(--quadrante);
  height: var(--quadrante);
}

.quadrante-disegno {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
  /* Sulla foto il tratto crema da solo si perde nei punti chiari */
  /* Due ombre, non una: quella stretta stacca il tratto dai punti chiari,
     quella larga gli tiene un alone scuro anche sopra il cielo bianco. */
  filter:
    drop-shadow(0 1px 2px hsl(350 55% 6% / 0.8))
    drop-shadow(0 0 10px hsl(350 55% 6% / 0.5));
}

/* Il cerchio fa da solo tutto il gesto: si contrae verso l'ancora della
   stagione e li' diventa il pallino. "non-scaling-stroke" tiene il tratto
   a 1.25px veri per tutto il viaggio, altrimenti a scala 0.065 sparirebbe;
   il riempimento porpora entra a corsa quasi finita, se no in volo si
   vedrebbe un disco viola grande quanto il cerchio. */
.quadrante-anello {
  fill: transparent;
  stroke: hsl(40 30% 97% / 0.92);
  stroke-width: 1.7;
  transform-box: view-box;
  transform-origin: 200px 200px;
  will-change: transform;
  transition:
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    fill 0.3s ease,
    stroke 0.5s ease,
    stroke-width 0.5s ease;
}

.quadrante[data-chiusa] .quadrante-anello {
  transform: scale(0.065);
  fill: var(--primary);
  stroke: hsl(40 30% 97% / 1);
  stroke-width: 2.3;
  transition:
    transform 0.75s cubic-bezier(0.16, 1, 0.3, 1),
    fill 0.28s ease 0.46s,
    stroke 0.5s ease,
    stroke-width 0.5s ease;
}

/* L'origine della contrazione e' il punto in cui il cerchio tocca
   l'ancora: cx/cy 200, r 176 nel viewBox. */
.quadrante[data-chiusa="inverno"] .quadrante-anello   { transform-origin: 200px 24px; }
.quadrante[data-chiusa="primavera"] .quadrante-anello { transform-origin: 376px 200px; }
.quadrante[data-chiusa="estate"] .quadrante-anello    { transform-origin: 200px 376px; }
.quadrante[data-chiusa="autunno"] .quadrante-anello   { transform-origin: 24px 200px; }

.quadrante-raggio {
  stroke: hsl(40 30% 97% / 0.8);
  stroke-width: 1.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 0;
  transition: stroke-dashoffset 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

/* I trattini si riassorbono con l'anello */
.quadrante[data-chiusa] .quadrante-raggio {
  stroke-dashoffset: 1;
}

/* --- Le quattro ancore, fuori dal cerchio --- */
.stagione-ancora {
  position: absolute;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.6rem;
  min-height: 44px;
  white-space: nowrap;
  color: #fff;
  opacity: 0.88;
  transition:
    opacity 0.45s ease,
    gap 0.5s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagione-ancora.active,
.stagione-ancora:hover {
  opacity: 1;
}

/* A cerchio chiuso le altre tre non spariscono: restano come fantasmi,
   ancora cliccabili. Senza di loro, per cambiare stagione bisognerebbe
   uscire dalla scena e rientrare a ogni volta.

   A 0.2 pero' non erano fantasmi, erano invisibili: sopra il cielo
   dell'inverno o le colline della primavera sparivano del tutto, e con
   loro l'unico modo di cambiare stagione restando dentro la scena. Il
   gradino di gerarchia lo fa gia' il sottolineato — che solo l'attiva ha
   — quindi qui basta la meta' esatta della luce, non un decimo. */
.quadrante[data-chiusa] .stagione-ancora:not(.active) {
  opacity: 0.5;
}

.quadrante[data-chiusa] .stagione-ancora:not(.active):hover,
.quadrante[data-chiusa] .stagione-ancora:not(.active):focus-visible {
  opacity: 1;
}

.stagione-ancora:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 4px;
  border-radius: 3px;
  opacity: 1;
}

.ancora-icona {
  width: 1.75rem;
  height: 1.75rem;
  flex: none;
  filter:
    drop-shadow(0 1px 2px hsl(350 55% 6% / 0.85))
    drop-shadow(0 0 8px hsl(350 55% 6% / 0.5));
  transition: transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

/* L'icona della stagione scelta si stringe accanto al nome */
.quadrante[data-chiusa] .stagione-ancora.active {
  gap: 0.3rem;
}

.quadrante[data-chiusa] .stagione-ancora.active .ancora-icona {
  transform: scale(0.62);
}

.ancora-nome {
  position: relative;
  font-family: var(--font-serif);
  font-size: 1.05rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  text-shadow:
    0 1px 2px hsl(350 55% 6% / 0.85),
    0 2px 12px hsl(350 55% 6% / 0.6);
}

/* La stagione attiva si sottolinea in crema, non in porpora: su una
   foto scura il porpora come colore di testo non reggerebbe. */
.ancora-nome::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 1px;
  background: hsl(40 30% 96% / 0.9);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagione-ancora.active .ancora-nome::after {
  transform: scaleX(1);
}

/* Posizioni: fuori dal bordo, sul prolungamento del trattino */
.ancora-inverno {
  left: 50%;
  bottom: 100%;
  transform: translateX(-50%);
  margin-bottom: 0.15rem;
}

.ancora-estate {
  left: 50%;
  top: 100%;
  transform: translateX(-50%);
  margin-top: 0.15rem;
}

.ancora-primavera {
  left: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-left: 0.15rem;
}

/* Sul fianco sinistro l'ordine si specchia, cosi' l'icona resta
   l'elemento piu' vicino all'anello su entrambi i lati. */
.ancora-autunno {
  right: 100%;
  top: 50%;
  transform: translateY(-50%);
  margin-right: 0.15rem;
  flex-direction: row-reverse;
}

@media (prefers-reduced-motion: reduce) {
  .quadrante-anello,
  .quadrante[data-chiusa] .quadrante-anello,
  .quadrante-raggio,
  .ancora-icona,
  .ancora-nome::after,
  .stagione-ancora {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
}

/* ========================================
   Scena stagionale — pannello a piena larghezza e alto quanto lo schermo.
   Il quadrante sta al centro, i lavori della stagione gli fanno corona
   attorno, la vigna in quella stagione sta dietro a tutto. Cambiare
   stagione dissolve insieme il fondale e i lavori: mai un taglio secco.
======================================== */
.stagione-scena {
  /* diametro dell'anello; le ancore stanno fuori da questa misura */
  --quadrante: clamp(12rem, 30vh, 19rem);
  position: relative;
  width: calc(100vw - var(--scrollbar, 0px));
  left: 50%;
  transform: translateX(-50%);
  min-height: 100vh;
  min-height: 100svh; /* viewport "piccola" mobile: niente salti quando la barra degli indirizzi si nasconde */
  overflow: hidden;
}

/* Fondali: quattro foto sovrapposte, una sola visibile alla volta */
.stagione-fondali {
  position: absolute;
  inset: 0;
  z-index: 1;
}

.stagione-fondale {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  opacity: 0;
  transform: scale(1.035);
  transition: opacity 1.3s cubic-bezier(0.4, 0, 0.2, 1), transform 1.9s cubic-bezier(0.4, 0, 0.2, 1);
}

.stagione-fondale.active {
  opacity: 1;
  transform: scale(1);
}

.stagione-fondale[data-stagione="inverno"] {
  background-image: url("../../assets/stagione-inverno-2000.webp");
}

.stagione-fondale[data-stagione="primavera"] {
  background-image: url("../../assets/stagione-primavera-2000.webp");
}

.stagione-fondale[data-stagione="estate"] {
  background-image: url("../../assets/stagione-estate-2000.webp");
}

.stagione-fondale[data-stagione="autunno"] {
  background-image: url("../../assets/stagione-autunno-2000.webp");
}

/* Velo fisso (non cambia con la stagione): scurisce appena i bordi alto e
   basso, quanto basta perché le etichette restino leggibili ovunque
   cadano, senza spegnere la foto al centro. */
.stagione-velo {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    hsl(350, 55%, 6%, 0.5) 0%,
    hsl(350, 55%, 6%, 0.05) 24%,
    hsl(350, 55%, 6%, 0.05) 68%,
    hsl(350, 55%, 6%, 0.55) 100%
  );
}

/* Etichette di lavoro: un gruppo per stagione, sovrapposti nello stesso
   riquadro, dissolvenza incrociata quando cambia quello attivo. */
.stagione-lavori {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: min(100%, 96rem);
  z-index: 2;
}

.stagione-lavori-gruppo {
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.9s ease, visibility 0s linear 0.9s;
}

.stagione-lavori-gruppo.active {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.9s ease 0.15s, visibility 0s linear 0s;
}

.lavoro-etichetta {
  position: absolute;
  max-width: 15rem;
  padding: 1rem 1.25rem;
  border: 1px solid #fff;
  border-radius: 2px;
  /* Le parole lunghe ("Scacchiatura/Palettizzatura") vanno a capo
     dentro la card invece di uscirne: sillabazione italiana (la pagina
     e' lang="it") e, come ultima risorsa, spezzatura della parola. */
  overflow-wrap: break-word;
  hyphens: auto;
  -webkit-hyphens: auto;
  background: hsl(350, 50%, 8%, 0.68); /* bianco >= 8.8:1 sul punto piu' chiaro di ogni stagione */
  backdrop-filter: blur(6px) saturate(1.1);
  -webkit-backdrop-filter: blur(6px) saturate(1.1);
  color: #fff;
  opacity: 0;
  transform: translateY(12px);
  transition:
    opacity 0.7s ease,
    transform 0.7s ease,
    translate 0.65s cubic-bezier(0.16, 1, 0.3, 1);
}

.stagione-lavori-gruppo.active .lavoro-etichetta {
  opacity: 1;
  transform: translateY(0);
}

/* Ognuna entra con un attimo di scarto dall'altra: un piccolo ritmo,
   non cinque elementi che scattano tutti insieme. */
.stagione-lavori-gruppo.active .pos-1 { transition-delay: 0.15s; }
.stagione-lavori-gruppo.active .pos-2 { transition-delay: 0.26s; }
.stagione-lavori-gruppo.active .pos-3 { transition-delay: 0.37s; }
.stagione-lavori-gruppo.active .pos-4 { transition-delay: 0.48s; }
.stagione-lavori-gruppo.active .pos-5 { transition-delay: 0.59s; }

.lavoro-titolo {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
  margin: 0 0 0.4rem;
  color: #fff;
}

.lavoro-testo {
  font-size: 0.875rem;
  line-height: 1.6;
  color: hsl(40, 25%, 92%);
  margin: 0;
}

/* --- La corona: i cinque lavori negli spazi liberi attorno all'anello.
   I quattro angoli piu' uno sotto, dove il quadrante lascia campo: le
   direzioni cardinali restano ai nomi delle stagioni. --- */
.pos-1 { top: 14%; left: 5%; }
.pos-2 { top: 14%; right: 5%; }
.pos-3 { bottom: 21%; left: 5%; }
.pos-4 { bottom: 21%; right: 5%; }
.pos-5 {
  bottom: 4%;
  left: 50%;
  translate: -50% 0;
}

/* A cerchio chiuso la zona di rispetto centrale si stringe e i lavori
   rientrano di un soffio: un premio per l'attenzione, non una
   riorganizzazione. Solo spostamento, niente larghezza: allargarle
   voleva dire rifare il layout — e ri-sfocare il backdrop — a ogni
   frame, su cinque card sopra una foto a schermo pieno. */
.stagione-scena.chiuso .pos-1 { translate: 1.5% 4%; }
.stagione-scena.chiuso .pos-2 { translate: -1.5% 4%; }
.stagione-scena.chiuso .pos-3 { translate: 1.5% -4%; }
.stagione-scena.chiuso .pos-4 { translate: -1.5% -4%; }
.stagione-scena.chiuso .pos-5 { translate: -50% -3%; }

/* Tra i 768 e i 1200 px il quadrante con i suoi nomi ai fianchi e le due
   colonne di lavori arrivano a toccarsi: entrambi cedono qualcosa. */
@media (min-width: 768px) and (max-width: 1200px) {
  .stagione-scena {
    --quadrante: clamp(10rem, 24vh, 15rem);
  }

  .lavoro-etichetta {
    max-width: 12.5rem;
    padding: 0.85rem 1rem;
  }

  .lavoro-titolo {
    font-size: 1.05rem;
  }

  .lavoro-testo {
    font-size: 0.8rem;
  }

}

/* Quando la scena non ha spazio per la corona — telefoni, ma anche
   schermi larghi e bassi come un telefono in orizzontale — le card
   smettono di stare in posizioni fisse sopra la foto e scendono nel
   flusso sotto al quadrante. La scena cresce con loro invece di
   tagliarle: nessuna card esce piu' dalla sezione, qualunque sia la
   lunghezza del testo o l'altezza dello schermo. */
@media (max-width: 767.98px), (max-height: 640px) {
  .stagione-scena {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .quadrante-wrap {
    position: relative;
    top: auto;
    left: auto;
    transform: none;
    flex: none;
    /* Lo spazio per le ancore sopra e sotto l'anello, che stanno
       fuori dal suo ingombro. */
    margin: 4rem 0 3.5rem;
  }

  .stagione-lavori {
    position: relative;
    top: auto;
    bottom: auto;
    left: auto;
    transform: none;
    flex: 1 0 auto;
    display: grid;
    align-content: center;
    width: min(100%, 60rem);
    padding: 0 4% 3rem;
  }

  /* I quattro gruppi restano sovrapposti nella stessa cella: la
     dissolvenza incrociata continua a funzionare, e l'altezza della
     scena e' quella del gruppo piu' lungo — cambiare stagione non fa
     saltare la pagina. */
  .stagione-lavori-gruppo {
    position: relative;
    inset: auto;
    grid-area: 1 / 1;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: flex-start;
    gap: 0.85rem;
  }

  /* Specificita' pari a .stagione-scena.chiuso .pos-N, ma dichiarata
     dopo: nel flusso lo scarto a cerchio chiuso non ha senso. */
  .stagione-scena .stagione-lavori-gruppo .lavoro-etichetta {
    position: relative;
    inset: auto;
    translate: none;
  }
}

/* Posizioni sparse sull'immagine — desktop */

@media (prefers-reduced-motion: reduce) {
  .stagione-fondale,
  .lavoro-etichetta {
    transition-duration: 0.25s;
    transform: none !important;
  }

  .stagione-fondale.active {
    transform: none;
  }
}

/* ========================================
   Processi Section - Timeline Ondulata
======================================== */
.processi {
  background: var(--background);
  position: relative;
  overflow: hidden;
}

.processi-header {
  text-align: center;
  max-width: 48rem;
  margin: 0 auto 6rem;
}

/* Contenitore della timeline: una sola colonna, stretta e centrata —
   le immagini si scostano a destra e sinistra ma restano dentro questo
   corridoio, mai vicine al bordo del container. */
.processi-timeline {
  position: relative;
  max-width: 40rem;
  margin: 0 auto;
  padding: 1rem 0 0;
}

/* Il filo: dritto, dal primo pallino fino al cerchio finale. Le card
   si spostano, il filo no — come un tralcio che porta germogli alternati. */
.timeline-wave {
  position: absolute;
  left: 50%;
  top: 0;
  bottom: 0;
  width: 1px;
  transform: translateX(-50%);
  z-index: 1;
}

.timeline-wave-path {
  width: 100%;
  height: 100%;
  background: linear-gradient(
    to bottom,
    transparent 0%,
    var(--primary) 6%,
    var(--primary) 100%
  );
  opacity: 0.35;
}

/* Contenitori degli step */
.processi-steps {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 5rem;
}

/* La riga NON si sposta: resta a piena larghezza così il pallino, che
   vive qui, cade sempre sul filo centrale. È la card al suo interno a
   scostarsi a destra o sinistra. */
.processo-row {
  position: relative;
  /* Sopra al filo (z-index:1): la card deve coprirlo dove si sovrappongono,
     lasciandolo visibile solo negli spazi vuoti tra una card e l'altra. */
  z-index: 2;
}

/* Pallino sul filo */
.pallino-centrale {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--background);
  border: 2px solid var(--primary);
  z-index: 20;
}

/* La card-immagine: il testo vive sopra la foto, sullo stesso schema di
   kicker + titolo + paragrafo del riferimento, ma nella voce tipografica
   di Bacco (corsivo Cormorant, non maiuscolo). */
.processo-step {
  position: relative;
  width: 84%;
  max-width: 26rem;
  margin: 0 auto;
  aspect-ratio: 3 / 4;
  overflow: hidden;
}

.processo-step > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}

.processo-step:hover > img {
  transform: scale(1.04);
}

/* Velo che affonda la metà inferiore della foto nel colore di sfondo
   della sezione (--background, non --card): sfuma verso l'alto per
   rivelare l'immagine, così il testo nero della caption vive su una
   superficie leggibile invece che sulla foto nuda. Solo colore, nessun
   backdrop-filter: la foto resta nitida ovunque sia ancora visibile,
   non è la foto stessa a sfocarsi. */
.processo-step::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    hsl(40 30% 96% / 0) 0%,
    hsl(40 30% 96% / 0.55) 58%,
    hsl(40 30% 96% / 0.92) 76%,
    hsl(40 30% 96% / 1) 92%
  );
  pointer-events: none;
}

/* Scostamento: la card va a destra o sinistra, la riga (e quindi il
   pallino sul filo) resta ferma al centro. "Abbastanza centrate": è un
   respiro di poco più di due dita, non un salto verso il bordo — per
   questo uno scarto fisso (transform) e non una percentuale del
   contenitore, che a schermi diversi lo farebbe crescere a dismisura. */
.processo-step.offset-right {
  transform: translateX(2.75rem);
}

.processo-step.offset-left {
  transform: translateX(-2.75rem);
}

.processo-caption {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 1.75rem 1.75rem 2rem;
  color: var(--foreground);
}

.processo-kicker {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.7rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.75rem;
}

.processo-kicker-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--primary);
  box-shadow: 0 0 0 3px hsl(350 45% 25% / 0.22);
  flex-shrink: 0;
}

.processo-title {
  font-style: italic;
  font-size: 1.6rem;
  margin-bottom: 0.85rem;
  color: var(--foreground);
}

.processo-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--foreground);
}

/* Il cerchio finale: stesso linguaggio dei pallini sul filo, solo più
   grande — la sintesi visiva del percorso, non un altro passaggio. */
.processi-finale {
  position: relative;
  z-index: 10;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding-top: 4.5rem;
}

/* Raccordo tra l'ultimo pallino sul filo (che vive dentro .processi-steps,
   quindi si ferma al suo bordo inferiore) e il cerchio finale: uno stelo
   breve, non l'intero filo, per non attraversare anche il testo sotto. */
.processi-finale-circle::before {
  content: '';
  position: absolute;
  top: calc(-1 * 4.5rem);
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  height: 4.5rem;
  background: var(--primary);
  opacity: 0.35;
}

.processi-finale-circle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: 1.5px solid var(--primary);
  background: var(--background);
  box-shadow: var(--ombra-media);
  margin-bottom: 1.75rem;
}

.processi-finale-circle-dot {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--primary);
}

.processi-finale-text {
  max-width: 30rem;
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--foreground);
}

/* ========================================
   Tecniche — frase fissa + tecniche a turno

   Due modi, mai insieme:
   • DEFAULT (nessun JS, prefers-reduced-motion, viewport troppo bassa):
     tutto impilato e leggibile — frase intera, tre tecniche in colonna,
     tutte e tre le parole della frase accese. È il fallback apposta.
   • data-modo="scroll" (acceso da cosa-facciamo.js): la scena si aggancia
     allo schermo per la corsa della pista e le tecniche si danno il
     cambio una alla volta.

   Nota sui nomi: la parola DENTRO la frase è .tecniche-chiave, il titolo
   del pannello è .tecnica-titolo. Volutamente diversi — la vecchia
   sezione aveva .tecniche-grid nell'HTML e .tecnica-grid nel CSS, e la
   griglia a due colonne non si è mai applicata.
======================================== */
.tecniche {
  background: var(--card);

  /* --muted-foreground su --card sta a 4.04:1, sotto la soglia per il
     testo corrente. Scurito verso --foreground resta lo stesso marrone
     caldo della palette ma passa a 5.35:1. */
  --tecnica-inchiostro: var(--muted-foreground);
  --tecnica-inchiostro: color-mix(in srgb, var(--muted-foreground) 75%, var(--foreground));
}

/* Il blu di sistema della selezione non appartiene a questa palette.
   Limitato alla sezione per non toccare il resto della pagina. */
.tecniche ::selection {
  background: color-mix(in srgb, var(--primary) 16%, transparent);
  color: var(--primary);
}

.tecniche-intro {
  max-width: 42rem;
  margin: 0 auto;
  text-align: center;
}

.tecniche-intro .divider {
  margin-bottom: 0;
}

/* ----------------------------------------
   Pista e scena
---------------------------------------- */
.tecniche-track {
  position: relative;
  margin-top: 3rem;
}

/* Una fetta di corsa per tecnica, più la scena agganciata. */
.tecniche[data-modo="scroll"] .tecniche-track {
  --tecnica-corsa: 58vh;
  height: calc(100vh + var(--tecnica-corsa) * 3);
  margin-top: 0;
}

.tecniche[data-modo="scroll"] .tecniche-stage {
  position: sticky;
  top: 0;
  height: 100vh;
  display: flex;
  align-items: center;
  /* L'header è fisso e opaco una volta scrollati: senza questo spazio
     la prima riga della frase gli finirebbe sotto. */
  padding: 6rem 0 2.5rem;
}

/* svh e non vh dove c'è: su mobile la barra URL che si ritrae non deve
   cambiare l'altezza della scena mentre è agganciata, o la pagina
   scatta a metà sequenza. */
@supports (height: 100svh) {
  .tecniche[data-modo="scroll"] .tecniche-track {
    --tecnica-corsa: 58svh;
    height: calc(100svh + var(--tecnica-corsa) * 3);
  }

  .tecniche[data-modo="scroll"] .tecniche-stage {
    height: 100svh;
  }
}

.tecniche-scena {
  display: grid;
  gap: 2.75rem;
  width: 100%;
}

/* ----------------------------------------
   La frase
---------------------------------------- */
.tecniche-frase {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(1.5rem, 1.1rem + 1.85vw, 2.6rem);
  /* Abbastanza alta da lasciare respirare i fili sotto le tre parole:
     più stretta, il filo di una riga sfiorava la riga seguente. */
  line-height: 1.44;
  letter-spacing: 0.005em;
  color: var(--tecnica-inchiostro);
  text-wrap: balance;
}

/* Le tre parole: filo spento sempre, filo pieno quando tocca a loro.
   inline-block perché il filo è un pseudo-elemento posizionato — sono
   parole singole, non rischiano di spezzarsi a fine riga. */
.tecniche-chiave {
  position: relative;
  display: inline-block;
  color: var(--foreground);
  transition: color 0.55s cubic-bezier(0.16, 1, 0.3, 1);
}

.tecniche-chiave::before,
.tecniche-chiave::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.16em;
  pointer-events: none;
}

.tecniche-chiave::before {
  height: 1px;
  background: currentColor;
  opacity: 0.22;
}

/* Il filo cresce da sinistra quando la parola entra e si ritira verso
   destra quando esce: l'origine cambia con lo stato, così il gesto è
   un passaggio e non un rimbalzo. A scaleX(1) l'origine non si vede,
   quindi lo scambio non produce scatti. */
.tecniche-chiave::after {
  height: 2px;
  background: var(--primary);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.tecniche-chiave.is-attiva {
  color: var(--primary);
}

.tecniche-chiave.is-attiva::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* Fuori dal modo scroll non c'è un turno: tutte e tre le parole valgono,
   e tutte e tre le tecniche sono sotto gli occhi. */
.tecniche:not([data-modo="scroll"]) .tecniche-chiave {
  color: var(--primary);
}

.tecniche:not([data-modo="scroll"]) .tecniche-chiave::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ----------------------------------------
   Colonna delle tecniche
---------------------------------------- */
.tecniche-colonna {
  display: grid;
  gap: 1.75rem;
}

.tecniche-rail {
  display: none;
  position: relative;
  overflow: hidden;
  background: var(--border);
  height: 1px;
  width: 100%;
  max-width: 7rem;
}

.tecniche[data-modo="scroll"] .tecniche-rail {
  display: block;
}

.tecniche-rail-fill {
  position: absolute;
  inset: 0;
  background: var(--primary);
  transform-origin: left center;
  transform: scaleX(var(--avanzamento, 0));
}

.tecniche-pannelli {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 3.25rem;
}

.tecnica-scheda {
  margin: 0;
}

.tecnica-titolo {
  margin: 0;
  font-family: var(--font-serif);
  font-weight: 300;
  font-size: clamp(2.5rem, 1.5rem + 4.2vw, 4.75rem);
  line-height: 1;
  letter-spacing: -0.012em;
  color: var(--primary);
}

.tecnica-filo {
  display: block;
  width: 3.25rem;
  height: 1px;
  margin: 1.4rem 0 1.3rem;
  background: var(--primary);
  opacity: 0.45;
}

.tecnica-testo {
  margin: 0;
  max-width: 26rem;
  font-size: 1.0625rem;
  line-height: 1.8;
  color: var(--tecnica-inchiostro);
}

/* ----------------------------------------
   Il cambio: i tre pannelli occupano la stessa cella e si danno il
   turno. Niente position:absolute — la cella prende l'altezza del
   pannello più alto e non c'è salto quando cambia il testo.

   Restano nell'albero di accessibilità: si spengono con opacity, non
   con visibility o hidden, così uno screen reader legge tutte e tre
   le tecniche invece della sola in scena.
---------------------------------------- */
.tecniche[data-modo="scroll"] .tecniche-pannelli {
  gap: 0;
}

.tecniche[data-modo="scroll"] .tecnica-scheda {
  grid-area: 1 / 1;
  opacity: 0;
  /* --deriva la scrive JS con il verso dello scorrimento: chi esce va
     dalla parte opposta a chi entra, come i fotogrammi di una pellicola
     verticale. */
  transform: translateY(var(--deriva, 1.15rem));
  filter: blur(4px);
  pointer-events: none;
  /* Niente will-change: promuoverebbe tre layer sfocati in permanenza
     per un passaggio che dura mezzo secondo ogni tanto. La transizione
     compone da sola quando serve. */
  transition:
    opacity 0.6s cubic-bezier(0.16, 1, 0.3, 1),
    transform 0.72s cubic-bezier(0.16, 1, 0.3, 1),
    filter 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

.tecniche[data-modo="scroll"] .tecnica-scheda.is-attiva {
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
  pointer-events: auto;
}

/* ----------------------------------------
   Da 900px: frase a sinistra, tecniche a destra, binario verticale
---------------------------------------- */
@media (min-width: 900px) {
  .tecniche-scena {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
    gap: clamp(3rem, 5.5vw, 6rem);
    align-items: center;
  }

  .tecniche[data-modo="scroll"] .tecniche-colonna {
    grid-template-columns: 1px minmax(0, 1fr);
    gap: clamp(1.5rem, 2.2vw, 2.5rem);
    align-items: stretch;
  }

  .tecniche[data-modo="scroll"] .tecniche-rail {
    width: 1px;
    height: 100%;
    max-width: none;
  }

  .tecniche[data-modo="scroll"] .tecniche-rail-fill {
    transform-origin: center top;
    transform: scaleY(var(--avanzamento, 0));
  }
}

/* Telefoni stretti: la scena deve stare in una schermata senza tagliare
   né la frase né il pannello. */
@media (max-width: 479.98px) {
  .tecniche-frase {
    font-size: 1.3rem;
    line-height: 1.4;
  }

  .tecniche-scena {
    gap: 2rem;
  }

  .tecnica-titolo {
    font-size: 2.35rem;
  }

  .tecnica-filo {
    margin: 1.1rem 0 1rem;
  }

  .tecnica-testo {
    font-size: 1rem;
    line-height: 1.7;
  }
}

/* Sotto i 900px la scena è impilata e occupa meno della schermata: con
   il respiro sopra molto maggiore di quello sotto sedeva troppo in
   basso. Il margine in alto resta comunque sopra l'header fisso. */
@media (max-width: 899.98px) {
  .tecniche[data-modo="scroll"] .tecniche-stage {
    padding: 5.5rem 0 4.5rem;
  }
}

/* A movimento ridotto vale il fallback impilato (il JS non accende
   nemmeno il modo scroll): qui si spengono solo le transizioni che
   restano appese agli stati di default. */
@media (prefers-reduced-motion: reduce) {
  .tecniche-chiave,
  .tecniche-chiave::after,
  .tecnica-scheda {
    transition-duration: 0.01ms;
  }
}

/* ========================================
   CTA Section — due colonne compatte: niente più foto/scrim, solo un
   blocco basso in --primary con due azioni indipendenti (contatto e
   newsletter) separate da un filo verticale che sparisce quando le due
   metà si impilano su mobile.
======================================== */
.cta {
  background-color: var(--primary);
  background-image: none;
  color: var(--primary-foreground);
  text-align: center;
  padding: 3.5rem 0;
}

@media (min-width: 768px) {
  .cta {
    padding: 4rem 0;
  }
}

@media (min-width: 1024px) {
  .cta {
    padding: 4.5rem 0;
  }
}

.cta-split {
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.cta-half {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-divider {
  display: none;
}

@media (min-width: 768px) {
  .cta-split {
    flex-direction: row;
    gap: 3rem;
  }

  .cta-half {
    flex: 1 1 0;
    justify-content: center;
  }

  /* Nessun bordo fisso: si estende all'altezza della metà più alta
     grazie allo stretch di default del flex item. */
  .cta-divider {
    display: block;
    width: 1px;
    background: color-mix(in srgb, var(--primary-foreground) 22%, transparent);
  }
}

.cta-title {
  font-size: clamp(1.4rem, 2.4vw, 1.85rem);
  margin-bottom: 1.5rem;
  text-wrap: balance;
}

.cta-newsletter-form {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cta-newsletter-field {
  display: flex;
  align-items: flex-end;
  gap: 0.75rem;
  width: 100%;
  max-width: 22rem;
}

.cta-newsletter-field input {
  flex: 1 1 auto;
  min-width: 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid color-mix(in srgb, var(--primary-foreground) 45%, transparent);
  padding: 0.6rem 0;
  color: var(--primary-foreground);
  font-family: var(--font-sans);
  font-size: 1rem;
  font-weight: 400;
  transition: border-color 0.3s ease;
}

.cta-newsletter-field input::placeholder {
  color: color-mix(in srgb, var(--primary-foreground) 70%, transparent);
}

.cta-newsletter-field input:focus {
  outline: none;
  border-color: var(--primary-foreground);
}

.cta-newsletter-field input[aria-invalid="true"] {
  border-color: hsl(4, 70%, 78%);
}

.cta-newsletter-submit {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 42px;
  height: 42px;
  margin-bottom: 1px;
  border: 1px solid var(--primary-foreground);
  color: var(--primary-foreground);
  transition: background-color 0.3s ease, color 0.3s ease;
}

.cta-newsletter-submit:hover {
  background: var(--primary-foreground);
  color: var(--primary);
}

.cta-newsletter-submit:focus-visible {
  outline: 2px solid var(--primary-foreground);
  outline-offset: 3px;
}

.cta-newsletter-submit svg {
  transition: transform 0.3s ease;
}

.cta-newsletter-submit:hover svg {
  transform: translateX(2px);
}

.cta-newsletter-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cta-newsletter-message {
  margin-top: 0.85rem;
  min-height: 1.2em;
  font-size: 0.85rem;
  color: color-mix(in srgb, var(--primary-foreground) 85%, transparent);
}

.cta-newsletter-message[data-state="error"] {
  color: hsl(4, 70%, 78%);
}

.cta-newsletter-message[data-state="success"] {
  color: hsl(90, 40%, 78%);
}

/* Stessa famiglia del pulsante "Invia" del form in Contatti: bordo
   sottile, spigolo vivo, maiuscolo trackato, si riempie al hover con la
   freccia che scivola — non il pulsante a pillola con ombra usato
   altrove sul sito. Qui i colori sono invertiti (bordo e testo chiari)
   perché il pulsante vive sullo scrim scuro della sezione CTA. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  padding: 0.9rem 1.75rem;
  border-radius: 0;
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

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

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

.btn-primary:focus-visible {
  outline: 2px solid var(--primary-foreground);
  outline-offset: 3px;
}

.btn-primary svg {
  transition: transform 0.3s ease;
}

.btn-primary:hover svg {
  transform: translateX(4px);
}

/* Footer — nessun sigillo e nessuna cornice a doppio filo: il footer
   attacca direttamente dopo l'ultima sezione, separato solo dal filo di
   bordo. Sfondo chiaro, niente fotografia: il tocco distintivo è
   tipografico. */
.footer {
  position: relative;
  background: var(--card);
  color: var(--foreground);
  padding: 5rem 0 3rem;
  border-top: 1px solid var(--border);
}

@media (min-width: 768px) {
  .footer {
    padding: 6rem 0 3rem;
  }
}

/* Senza il sigillo sopra non c'è più niente da scavalcare: il padding
   che gli faceva spazio sparisce con lui. */
.footer-grid {
  display: grid;
  gap: 3rem;
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 6rem;
    align-items: start;
  }

  /* Nel markup il form viene prima (così su una colonna è la prima cosa
     che si vede): qui, su due colonne, le info tornano a sinistra e il
     form a destra, il disegno originale — solo l'ordine visivo cambia,
     non quello del DOM/tab. */
  .footer-info {
    order: 1;
  }

  .footer-form {
    order: 2;
  }
}

.footer-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.75rem, 3vw, 2.5rem);
  margin-bottom: 2rem;
  color: var(--primary);
}

.footer-details {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.footer-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}

.footer-detail-icon {
  width: 14px;
  height: 14px;
  flex-shrink: 0;
}

.footer-detail p {
  color: var(--muted-foreground);
  line-height: 1.6;
  font-size: 1.1rem;
}

/* Chiamare e scrivere sono i due gesti che una persona fa dal telefono:
   44px di area toccabile, senza aprire lo spazio tra le righe. */
.footer-detail a {
  display: inline-block;
  padding-block: 0.6rem;
  margin-block: -0.45rem;
  transition: color 0.3s ease;
}

.footer-detail a:hover,
.footer-detail a:focus-visible {
  color: var(--primary);
}

.footer-form {
  position: relative;
}

.form-title {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: 1.75rem;
  margin-bottom: 1.75rem;
  color: var(--primary);
}

.form-field {
  position: relative;
  margin-bottom: 1.75rem;
}

.form-field input,
.form-field textarea {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1px solid hsl(40, 30%, 92%, 0.3);
  padding: 0.75rem 0;
  color: var(--primary-foreground);
  font-family: var(--font-sans);
  font-size: 1.1rem;
  font-weight: 400;
  transition: border-color 0.3s ease;
  resize: none;
}

.form-field input:focus,
.form-field textarea:focus {
  outline: none;
  border-color: hsl(40, 45%, 85%, 0.7);
}

.form-field label {
  position: absolute;
  left: 0;
  top: 0.75rem;
  font-size: 1.1rem;
  color: hsl(40, 30%, 92%, 0.55);
  transition: all 0.3s ease;
  pointer-events: none;
}

.form-field input:focus + label,
.form-field input:not(:placeholder-shown) + label,
.form-field textarea:focus + label,
.form-field textarea:not(:placeholder-shown) + label {
  top: -0.75rem;
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.form-submit {
    display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.875rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--background) 80%, transparent);
  transition: color 0.3s ease;
  margin-top: 1rem;
}

.form-submit:hover {
  color: var(--primary-foreground);
}

.form-submit:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.form-submit svg {
  transition: transform 0.3s ease;
}

.form-submit:hover svg {
  transform: translateX(4px);
}

.footer-quicklinks {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  margin-bottom: 2rem;
}

.footer-quicklink {
  display: inline-block;
  width: fit-content;
  padding: 0.65rem 0;
  min-height: 44px;
  font-size: 1.05rem;
  color: var(--muted-foreground);
  border-bottom: 1px solid transparent;
  transition: color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.footer-quicklink:hover,
.footer-quicklink:focus-visible {
  color: var(--primary);
  border-color: var(--primary);
  transform: translateX(4px);
}

.footer-quicklink:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.footer-social {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}

/* Stessa famiglia di .btn/.form-submit: spigolo vivo, non più il cerchio
   icona-sola — il nome del social ora è scritto, non solo suggerito. */
.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.65rem 1.1rem;
  border-radius: 0;
  border: 1px solid var(--border);
  color: var(--muted-foreground);
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: border-color 0.3s ease, color 0.3s ease, background-color 0.3s ease;
}

.footer-social-link:hover,
.footer-social-link:focus-visible {
  color: var(--primary-foreground);
  background: var(--primary);
  border-color: var(--primary);
}

.footer-social-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

.footer-social-link svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

@media (prefers-reduced-motion: reduce) {
  .footer-quicklink:hover,
  .footer-quicklink:focus-visible {
    transform: none;
  }
}

/* Footer Bottom */
.footer-bottom {
  margin-top: 4rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-wrap: wrap;
  flex-direction: column;
  align-items: center;
  gap: 1.25rem;
  text-align: center;
}

/* Il logotipo, centrato, sempre sulla propria riga sopra P.IVA/copyright
   — anche nel layout a riga di desktop (vedi flex-basis sotto). */
.footer-logo {
  flex: 1 0 100%;
  display: flex;
  justify-content: center;
}

.footer-logo img {
  height: 2rem;
  width: auto;
}

@media (min-width: 768px) {
  .footer-bottom {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

.footer-brand {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 0.6rem;
  font-family: var(--font-serif);
  font-size: 1.125rem;
  letter-spacing: 0.2em;
  color: var(--primary);
}

@media (min-width: 768px) {
  .footer-brand {
    justify-content: flex-start;
  }
}

.footer-piva {
  font-family: var(--font-sans);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--muted-foreground);
}

.footer-legal {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.75rem;
}

@media (min-width: 768px) {
  .footer-legal {
    align-items: flex-end;
  }
}

.footer-copyright {
  font-size: 0.875rem;
  color: var(--muted-foreground);
}

/* Firma di chi ha realizzato il sito: dicitura piu' logo, una riga sola.
   Resta sotto il copyright, ma leggibile — niente opacita' addosso: il
   passo indietro lo fa gia' il corpo piccolo e il colore attenuato. */
.footer-credit {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.15rem 0.55rem;
  font-size: 0.8rem;
  letter-spacing: 0.04em;
  color: var(--muted-foreground);
}

@media (min-width: 768px) {
  .footer-credit {
    justify-content: flex-end;
  }
}

/* Segnaposto cliccabile: <a> senza href — e' la forma che l'HTML prevede
   per "qui ci andra' un link". Focus e puntatore ci sono gia', cosi'
   il giorno che arriva l'indirizzo basta aggiungere href. */
.footer-credit-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  border-radius: 2px;
  transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Al passaggio il marchio fa solo un piccolo "pop": nessuna linea sotto,
   solo scala e un filo di sollevamento. */
.footer-credit-logo:hover,
.footer-credit-logo:focus-visible {
  transform: translateY(-1px) scale(1.08);
}

.footer-credit-logo:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
}

/* Il file ha circa il 15% di margine interno sopra e sotto: l'altezza
   dichiarata qui e' quindi piu' alta del segno che si vede davvero.
   Sta alla pari con il corpo del testo accanto, un po' piu' presente. */
.footer-credit-logo img {
  display: block;
  height: 1.4rem;
  width: auto;
  max-width: none;
}

@media (prefers-reduced-motion: reduce) {
  .footer-credit-logo {
    transition-duration: 0.01ms;
  }

  .footer-credit-logo:hover,
  .footer-credit-logo:focus-visible {
    transform: none;
  }
}

.footer-legal-links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.4rem 1.25rem;
}

@media (min-width: 768px) {
  .footer-legal-links {
    justify-content: flex-end;
  }
}

.footer-legal-link {
  display: inline-block;
  font-family: inherit;
  font-size: 0.8rem;
  color: var(--muted-foreground);
  background: none;
  border: none;
  padding: 0;
  /* Area di tocco alta 44px riassorbita dal margine negativo, cosi' il
     dito ha dove premere senza che la riga si allarghi. Le due
     dichiarazioni vanno dopo il "padding: 0" del reset del <button>:
     prima, veniva azzerata l'imbottitura e restava il margine negativo
     da solo — e su mobile, dove i link vanno a capo, le due righe si
     sovrapponevano. */
  padding-block: 0.7rem;
  margin-block: -0.55rem;
  cursor: pointer;
  text-underline-offset: 3px;
  text-decoration: underline;
  text-decoration-color: transparent;
  transition: color 0.3s ease, text-decoration-color 0.3s ease;
}

.footer-legal-link:hover,
.footer-legal-link:focus-visible {
  color: var(--primary);
  text-decoration-color: currentColor;
}

.footer-legal-link:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

/* ========================================
   Banner cookie — informativo: spiega cosa carica il sito da domini
   esterni (Google Fonts, script da CDN) e registra la scelta, ma non
   blocca nulla — il sito non usa cookie di profilazione/tracciamento.
======================================== */
.cookie-banner {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  z-index: 2000;
  max-width: 640px;
  margin: 0 auto;
  background: var(--background);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: var(--ombra-alta);
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transform: translateY(calc(100% + 2rem));
  opacity: 0;
  transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.4s ease;
}

.cookie-banner[data-visible="true"] {
  transform: translateY(0);
  opacity: 1;
}

.cookie-banner-text {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--muted-foreground);
}

.cookie-banner-text a {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.cookie-banner-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  justify-content: flex-end;
}

.cookie-banner-btn {
  font-family: inherit;
  font-size: 0.8rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.7rem 1.4rem;
  border-radius: 9999px;
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease, transform 0.3s ease;
}

.cookie-banner-btn-accept {
  background: var(--primary);
  color: var(--primary-foreground);
  border: 1px solid var(--primary);
}

.cookie-banner-btn-accept:hover {
  background: hsl(350, 45%, 20%);
  transform: translateY(-1px);
}

.cookie-banner-btn-reject {
  background: transparent;
  color: var(--muted-foreground);
  border: 1px solid var(--border);
}

.cookie-banner-btn-reject:hover {
  color: var(--foreground);
  border-color: var(--muted-foreground);
}

.cookie-banner-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .cookie-banner {
    transition: opacity 0.3s ease;
    transform: none;
  }

  .cookie-banner-btn-accept:hover {
    transform: none;
  }
}

@media (min-width: 640px) {
  .cookie-banner {
    left: auto;
    right: 1.5rem;
    bottom: 1.5rem;
    width: 420px;
  }
}

/* ========================================
   Animations
======================================== */
@keyframes fadeUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fade-up {
  animation: fadeUp 0.8s ease forwards;
}

/* ========================================
   Responsive
======================================== */
@media (max-width: 767.98px) {
  /* Logo responsive */
  .logo-default, .logo-scrolled {
    width: 60px;
    height: 60px;
  }
  
  .logo-main::after {
    height: 50px;
    right: -1rem;
  }
  
  /* Hero section */
  .hero-cosafacciamo {
    min-height: 80vh;
  }
  
  .hero-content {
    margin-top: 60px;
  }
  
  /* Calendario mobile */

  
  /* Timeline mobile: lo scarto destra/sinistra si riduce, non sparisce —
     resta la stessa idea di respiro, solo più discreta su uno schermo
     stretto dove un salto di quasi 3rem toccherebbe il bordo. */
  .processi-steps {
    gap: 3.5rem;
  }

  .processo-step {
    width: 92%;
  }

  .processo-step.offset-right {
    transform: translateX(1.1rem);
  }

  .processo-step.offset-left {
    transform: translateX(-1.1rem);
  }

  .processi-finale {
    padding-top: 3.5rem;
  }

  .processi-finale-circle::before {
    top: calc(-1 * 3.5rem);
    height: 3.5rem;
  }

  /* Scena stagionale mobile: il quadrante si stringe e sale in alto —
     centrato mangerebbe l'altezza che serve ai lavori — e la corona si
     apre in una colonna alternata sinistra/destra sotto di esso. I nomi
     delle stagioni stanno sui fianchi dell'anello, quindi il diametro
     va tenuto basso: sommato a "Primavera" e "Autunno" ai lati, deve
     stare dentro i 360px di un telefono stretto. */
  .stagione-scena {
    --quadrante: clamp(7.5rem, 22vh, 10rem);
  }

  .stagione-ancora {
    gap: 0.4rem;
    padding: 0.4rem 0.35rem;
  }

  .quadrante[data-chiusa] .stagione-ancora.active {
    gap: 0.25rem;
  }

  .ancora-icona {
    width: 1.3rem;
    height: 1.3rem;
  }

  .ancora-nome {
    font-size: 0.76rem;
    letter-spacing: 0.07em;
  }

  .lavoro-etichetta {
    max-width: min(15rem, 74%);
    padding: 0.65rem 0.85rem;
  }

  .lavoro-titolo {
    font-size: 0.95rem;
    margin-bottom: 0.25rem;
  }

  .lavoro-testo {
    font-size: 0.72rem;
    line-height: 1.45;
  }

  /* Una colonna sola sotto il quadrante, con le card alternate
     sinistra/destra: resta il ritmo sparso della corona, ma ogni card
     occupa il proprio posto nel flusso e non puo' coprire la vicina
     ne' finire fuori dalla scena. */
  .stagione-lavori-gruppo {
    flex-direction: column;
    flex-wrap: nowrap;
  }

  .lavoro-etichetta:nth-child(odd) {
    align-self: flex-start;
  }

  .lavoro-etichetta:nth-child(even) {
    align-self: flex-end;
  }

  /* Mobile menu */
  .nav {
    display: none;
  }
  
}

@media (max-width: 479.98px) {
  /* Logo molto piccolo */
  .logo-default, .logo-scrolled {
    width: 50px;
    height: 50px;
  }
  
  .logo-main::after {
    height: 40px;
  }
  
  /* Hero section */
  .hero-cosafacciamo {
    min-height: 70vh;
  }
  
  .hero-content {
    margin-top: 40px;
  }
  
  /* Section padding */
  .section {
    padding: 4rem 0;
  }
  
  /* Calendario mobile small */
  .stagione-scena {
    --quadrante: clamp(6rem, 19vh, 8rem);
  }

  .ancora-nome {
    font-size: 0.68rem;
    letter-spacing: 0.05em;
  }

  .ancora-icona {
    width: 1.1rem;
    height: 1.1rem;
  }

  .lavoro-etichetta {
    max-width: min(14rem, 78%);
    padding: 0.6rem 0.75rem;
  }

  .lavoro-titolo {
    font-size: 0.95rem;
  }

  .lavoro-testo {
    font-size: 0.75rem;
    line-height: 1.5;
  }
  
  /* Timeline mobile small: qui lo scarto sparisce, le card restano
     centrate — sotto i 480px anche un respiro di 1rem comincia a
     mordere il margine del contenitore. */
  .processi-steps {
    gap: 3rem;
  }

  .processo-step {
    width: 100%;
  }

  .processo-step.offset-right,
  .processo-step.offset-left {
    transform: none;
  }

  .processo-title {
    font-size: 1.35rem;
  }

  .processi-finale-text {
    font-size: 1.05rem;
  }

  /* CTA buttons */
  .btn {
    min-width: 180px;
    padding: 0.875rem 1.5rem;
  }
}

/* ========================================
   Mobile — menu a tutto schermo
======================================== */
@media (max-width: 767.98px) {
  /* Il simbolo scende alla stessa altezza del logo testuale */
  .logo-symbol-container,
  .logo-default,
  .logo-scrolled {
    width: 52px;
    height: 52px;
  }

  /* A menu chiuso resta solo il simbolo: il lettering collassa
     senza spostare il simbolo, e rientra al suo posto all'apertura. */
  .logo-main {
    gap: 0;
  }

  .logo-text {
    width: 0;
    height: 52px;
    margin-left: 0;
    opacity: 0;
    overflow: hidden;
    transform: translateX(-14px);
    transition:
      width 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      margin-left 0.55s cubic-bezier(0.16, 1, 0.3, 1),
      transform 0.6s cubic-bezier(0.16, 1, 0.3, 1) 0.08s,
      opacity 0.45s ease 0.12s;
  }

  .logo-text-default,
  .logo-text-scrolled {
    max-height: 44px;
    width: 140px;
  }

  .header.menu-open .logo-text {
    width: 140px;
    margin-left: 1rem;
    opacity: 1;
    transform: translateX(0);
  }

  /* Sul crema del menu servono le versioni a colori */
  .header.menu-open .logo-default,
  .header.menu-open .logo-text-default {
    opacity: 0;
  }

  .header.menu-open .logo-scrolled,
  .header.menu-open .logo-text-scrolled {
    opacity: 1;
  }

  .header.menu-open .mobile-menu-btn span {
    background: var(--primary);
    filter: none;
  }

  /* Il separatore verticale appartiene alla lettura desktop */
  .logo-main::after {
    display: none;
  }

  /* Il logo vive sopra l'overlay, non sotto */
  .combined-logo {
    z-index: 1001;
  }

  /* --- Overlay --- */
  .nav {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 999;
    flex-direction: column;
    justify-content: center;
    gap: 0;
    padding: 96px 1.5rem 3rem;
    background:
      radial-gradient(120% 90% at 12% 0%, hsl(38, 55%, 94%) 0%, transparent 62%),
      linear-gradient(168deg, var(--background) 0%, var(--secondary) 58%, hsl(35, 26%, 86%) 100%);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    visibility: hidden;
    /* Un livello suo: il ritaglio dell'apertura ridipinge questo
       sfondo e basta, non la pagina che ha sotto. */
    will-change: clip-path, opacity;
    pointer-events: none;
    transition:
      clip-path 0.62s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.3s ease 0.14s,
      visibility 0s linear 0.62s;
  }

  .nav.nav-open {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      clip-path 0.62s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.24s ease,
      visibility 0s linear 0s;
  }

  .nav .nav-link {
    color: var(--foreground);
    text-shadow: none;
    font-family: var(--font-serif);
    font-size: clamp(1.75rem, 8vw, 2.5rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.2;
    padding: 1rem 0;
    border-top: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.4s ease,
      transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      color 0.3s ease;
  }

  .nav .nav-link:last-child {
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  }

  .nav .nav-link:active {
    color: var(--primary);
  }

  /* L'underline desktop non ha senso su una lista a tutta pagina */
  .nav .nav-link::after {
    display: none;
  }

  .nav.nav-open .nav-link {
    opacity: 1;
    transform: translateY(0);
  }

  .nav.nav-open .nav-link:nth-child(1) { transition-delay: 0.20s, 0.20s, 0s; }
  .nav.nav-open .nav-link:nth-child(2) { transition-delay: 0.26s, 0.26s, 0s; }
  .nav.nav-open .nav-link:nth-child(3) { transition-delay: 0.32s, 0.32s, 0s; }
  .nav.nav-open .nav-link:nth-child(4) { transition-delay: 0.38s, 0.38s, 0s; }
  .nav.nav-open .nav-link:nth-child(5) { transition-delay: 0.44s, 0.44s, 0s; }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .nav,
  .nav.nav-open,
  .logo-text,
  .nav .nav-link,
  .nav.nav-open .nav-link {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
}

@media (max-width: 767.98px) {
  .combined-logo {
    max-width: none;
  }

}

/* WCAG 2.4.7. Fuori da ogni media query apposta: era intrappolato dentro
   il blocco a movimento ridotto e sul desktop non si applicava mai.
   Sull'header trasparente in cima alla hero il primary non si vede: il
   ring e' bianco finche' l'header non e' .scrolled. */
.nav .nav-link:focus-visible,
.combined-logo:focus-visible,
.mobile-menu-btn:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 4px;
  border-radius: 2px;
}

.header:not(.scrolled) .nav .nav-link:focus-visible,
.header:not(.scrolled) .combined-logo:focus-visible,
.header:not(.scrolled) .mobile-menu-btn:focus-visible {
  outline-color: var(--primary-foreground);
}

/* ========================================
   Menu a overlay anche da desktop
   L'hamburger e' l'unica porta della navigazione: sopra i 768px
   l'overlay riprende la logica mobile, con piu' respiro.
======================================== */
@media (min-width: 768px) {
  .nav {
    display: flex;
    position: fixed;
    inset: 0;
    z-index: 999;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 0;
    padding: 140px clamp(3rem, 10vw, 10rem) 5rem;
    background:
      radial-gradient(110% 80% at 10% 0%, hsl(38, 55%, 94%) 0%, transparent 60%),
      linear-gradient(168deg, var(--background) 0%, var(--secondary) 58%, hsl(35, 26%, 86%) 100%);
    clip-path: inset(0 0 100% 0);
    opacity: 0;
    visibility: hidden;
    /* Un livello suo: il ritaglio dell'apertura ridipinge questo
       sfondo e basta, non la pagina che ha sotto. */
    will-change: clip-path, opacity;
    pointer-events: none;
    transition:
      clip-path 0.62s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.3s ease 0.14s,
      visibility 0s linear 0.62s;
  }

  .nav.nav-open {
    clip-path: inset(0 0 0 0);
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transition:
      clip-path 0.62s cubic-bezier(0.16, 1, 0.3, 1),
      opacity 0.24s ease,
      visibility 0s linear 0s;
  }

  .nav .nav-link {
    width: 100%;
    max-width: 780px;
    color: var(--foreground);
    text-shadow: none;
    font-family: var(--font-serif);
    font-size: clamp(2rem, 3.6vw, 3.25rem);
    font-weight: 400;
    letter-spacing: 0.01em;
    line-height: 1.2;
    padding: 1.1rem 0;
    border-top: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
    opacity: 0;
    transform: translateY(18px);
    transition:
      opacity 0.4s ease,
      transform 0.5s cubic-bezier(0.16, 1, 0.3, 1),
      color 0.3s ease;
  }

  .nav .nav-link:last-child {
    border-bottom: 1px solid color-mix(in srgb, var(--primary) 14%, transparent);
  }

  .nav .nav-link:hover {
    color: var(--primary);
  }

  /* L'underline desktop non ha senso su una lista a tutta pagina */
  .nav .nav-link::after {
    display: none;
  }

  .nav.nav-open .nav-link {
    opacity: 1;
    transform: translateY(0);
  }

  .nav.nav-open .nav-link:nth-child(1) { transition-delay: 0.20s, 0.20s, 0s; }
  .nav.nav-open .nav-link:nth-child(2) { transition-delay: 0.26s, 0.26s, 0s; }
  .nav.nav-open .nav-link:nth-child(3) { transition-delay: 0.32s, 0.32s, 0s; }
  .nav.nav-open .nav-link:nth-child(4) { transition-delay: 0.38s, 0.38s, 0s; }
  .nav.nav-open .nav-link:nth-child(5) { transition-delay: 0.44s, 0.44s, 0s; }

  /* Il logo resta leggibile sopra il crema dell'overlay */
  .combined-logo {
    z-index: 1001;
  }

  .header.menu-open .logo-default,
  .header.menu-open .logo-text-default {
    opacity: 0;
  }

  .header.menu-open .logo-scrolled,
  .header.menu-open .logo-text-scrolled {
    opacity: 1;
  }

  .header.menu-open .logo-main::after {
    background: var(--border);
  }

  .header.menu-open .mobile-menu-btn span {
    background: var(--primary);
    filter: none;
  }
}

@media (min-width: 768px) and (prefers-reduced-motion: reduce) {
  .nav,
  .nav.nav-open,
  .nav .nav-link,
  .nav.nav-open .nav-link {
    transition-duration: 0.01ms;
    transition-delay: 0s;
  }
}

/* ========================================
   Pagina corrente dentro l'overlay
   Porpora del sito piu' un segno a margine: il colore da solo
   non basterebbe a distinguere la voce attiva.
======================================== */
.nav .nav-link[aria-current="page"] {
  color: var(--primary);
  font-weight: 700;
  padding-left: 1.75rem;
}

.nav .nav-link[aria-current="page"]::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--primary);
}

/* ========================================
   Lettering al centro della navbar
   Il simbolo resta a sinistra, il lettering sta al centro esatto della
   barra: si misura quindi sul contenitore dell'header, non sull'ancora
   del logo (per questo nell'HTML vive fuori da essa). Decorativo e
   inerte: il bersaglio "home" resta il simbolo.
======================================== */
.header-content {
  position: relative;
}

.logo-text {
  position: absolute;
  left: 50%;
  top: 50%;
  margin-left: 0;
  transform: translate(-50%, -50%);
  z-index: 1001;
  pointer-events: none;
}

/* La barra verticale separava il simbolo dal lettering che gli stava
   accanto. Ora che il lettering e' altrove non separa piu' niente. */
.logo-main::after {
  display: none;
}

/* Su telefono il lettering compare solo a menu aperto. Non si allarga
   piu' da destra del simbolo (era agganciato a lui): ora e' gia' al
   centro e semplicemente entra. */
@media (max-width: 767.98px) {
  .logo-text {
    width: 140px;
    height: 52px;
    margin-left: 0;
    overflow: visible;
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.94);
    transition:
      opacity 0.4s ease,
      transform 0.55s cubic-bezier(0.16, 1, 0.3, 1);
  }

  .header.menu-open .logo-text {
    width: 140px;
    margin-left: 0;
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
  .logo-text {
    transition-duration: 0.01ms;
  }
}

/* ========================================
   Il lampo blu al tocco su mobile
   Non e' una cosa sola, e "-webkit-tap-highlight-color" ne spegne solo
   la prima delle tre:
   1. l'highlight del tap — gia' spento nel reset, ribadito qui su html
      perche' la proprieta' si eredita e va dichiarata sulla radice;
   2. la selezione del testo — basta che il dito si sposti di un pixel
      mentre tocca e il browser seleziona la parola, dipingendola di blu.
      E' questa che di solito sopravvive al reset;
   3. il callout di iOS al tocco prolungato.
   Il testo dei contenuti resta selezionabile: si blocca solo la parte
   interattiva dell'interfaccia, dove selezionare non serve.
======================================== */
html {
  -webkit-tap-highlight-color: transparent;
  -webkit-text-size-adjust: 100%;
}

a,
button,
label,
summary,
[role="button"] {
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Telefono e mail si copiano: qui la selezione serve davvero. */
a[href^="tel:"],
a[href^="mailto:"] {
  -webkit-touch-callout: default;
  -webkit-user-select: text;
  user-select: text;
}

/* E se una selezione avviene comunque, che sia nei colori del sito. */
::selection {
  background: color-mix(in srgb, var(--primary) 22%, transparent);
  color: var(--foreground);
}

/* ========================================
   Blocco dello scorrimento quando l'overlay del menu e' aperto.
   Vedi il commento in "bloccaScorrimento" nel JS: si tiene ferma la
   pagina senza toglierla dal flusso, cosi' l'apertura del menu non
   paga un rilayout dell'intero documento nel fotogramma sbagliato.
   Il posto della barra resta prenotato sempre, cosi' toglierla non
   sposta di un pixel quello che c'e' sotto.
======================================== */
html {
  scrollbar-gutter: stable;
}

html.scorrimento-bloccato,
html.scorrimento-bloccato body {
  overflow: hidden;
}

/* Alcuni blocchi a piena larghezza si misurano con
   "--scrollbar: calc(100vw - 100%)". A barra nascosta quel calcolo
   diventa negativo e la sezione si allarga di quindici pixel proprio
   mentre il menu si apre: un rilayout di una sezione alta quanto lo
   schermo, nel fotogramma peggiore. Senza barra la compensazione da'
   fare e' zero, e messa qui il valore non oscilla. */
html.scorrimento-bloccato {
  --scrollbar: 0px;
}

/* L'overlay non passa lo scorrimento a quello che ha dietro. */
.nav {
  overscroll-behavior: contain;
}

/* L'indirizzo di sede e' un <address>: e' l'elemento che i motori di
   ricerca leggono come recapito dell'attivita'. Il corsivo di default
   qui non c'entra niente con il resto del footer. */
.footer-address {
  font-style: normal;
  line-height: inherit;
}