/* ===== PROTOZI AGENCY - Global Styles ===== */

/* ===== Tendina di transizione =====
   Identica al design system: pannello pieno che sale dal basso col logo
   centrato, non un wipe orizzontale. Fuori schermo a riposo: su un ingresso
   diretto non si vede affatto, esattamente come nel test. */
#page-curtain {
  position: fixed;
  inset: 0;
  background: #101316;
  z-index: 10000;
  transform: translateY(101%);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
  will-change: transform;
}
#page-curtain-logo {
  width: clamp(140px, 20vw, 220px);
  height: auto;
  opacity: 0;
  clip-path: inset(0 100% 0 0);
  -webkit-clip-path: inset(0 100% 0 0);
}


@import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@300;400;500;600;700&display=swap');

/* ===== Custom Properties ===== */
:root {
  --bg: #111111;
  --bg-card: #1a1a1a;
  --bg-nav: #0d0d0d;
  --accent: #00AEEF;
  --accent-hover: #33BEFF;
  --text: #ffffff;
  --text-muted: #999999;
  --border: rgba(255, 255, 255, 0.08);
  --font-heading: 'Bebas Neue', sans-serif;
  --font-body: 'Inter', sans-serif;
  --radius-sm: 4px;
  --radius-md: 8px;
  --transition: 0.3s ease;
  --max-width: 1280px;
  /* Presi dal file del marchio (assets/images/logonexit.webp), non a occhio:
     sono i quattro colori pieni che compaiono nel logo. */
  --logo-pink:   #E5007E;
  --logo-green:  #009540;
  --logo-blue:   #009EE2;
  --logo-yellow: #FFEC00;
}

/* ===== Reset ===== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-body);
  line-height: 1.6;
  overflow-x: hidden;
}

/* ===== Grain Texture ===== */
body::after {
  content: '';
  position: fixed;
  inset: -50%;
  width: 200%;
  height: 200%;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='1'/%3E%3C/svg%3E");
  background-repeat: repeat;
  background-size: 180px 180px;
  opacity: 0.035;
  pointer-events: none;
  z-index: 9999;
  mix-blend-mode: overlay;
  animation: grain-shift 8s steps(10) infinite;
  will-change: transform;
}

@keyframes grain-shift {
  0%  { transform: translate(0, 0); }
  10% { transform: translate(-2%, -3%); }
  20% { transform: translate(3%, 1%); }
  30% { transform: translate(-1%, 4%); }
  40% { transform: translate(4%, -2%); }
  50% { transform: translate(-3%, 2%); }
  60% { transform: translate(2%, -4%); }
  70% { transform: translate(-4%, 1%); }
  80% { transform: translate(1%, 3%); }
  90% { transform: translate(3%, -1%); }
  100%{ transform: translate(0, 0); }
}
img, video { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { cursor: pointer; border: none; background: none; font-family: inherit; }
input, textarea, select { font-family: inherit; }

/* ===== Typography ===== */
h1, h2, h3, h4 {
  font-family: var(--font-heading);
  letter-spacing: 0.02em;
  line-height: 1.1;
  text-transform: uppercase;
}
h1 { font-size: clamp(3rem, 8vw, 7rem); }
h2 { font-size: clamp(2rem, 5vw, 4rem); }
h3 { font-size: clamp(1.5rem, 3vw, 2.5rem); }
h4 { font-size: clamp(1.2rem, 2vw, 1.8rem); }
p { font-size: 1rem; color: var(--text-muted); line-height: 1.75; }

/* ===== Layout Utilities ===== */
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 2rem; }
.section { padding: 6rem 0; }
.section-sm { padding: 4rem 0; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.flex { display: flex; }
.flex-center { display: flex; align-items: center; justify-content: center; }
.flex-between { display: flex; align-items: center; justify-content: space-between; }
.flex-col { flex-direction: column; }
.gap-1 { gap: 0.5rem; }
.gap-2 { gap: 1rem; }
.gap-3 { gap: 1.5rem; }
.gap-4 { gap: 2rem; }
.text-center { text-align: center; }
.text-accent { color: var(--accent); }
.text-muted { color: var(--text-muted); }
.mb-1 { margin-bottom: 0.5rem; }
.mb-2 { margin-bottom: 1rem; }
.mb-3 { margin-bottom: 1.5rem; }
.mb-4 { margin-bottom: 2rem; }
.mt-4 { margin-top: 2rem; }

/* ===== Tag / Badge ===== */
.tag {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-sm);
  margin-bottom: 1rem;
}

/* ===== Buttons ===== */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.875rem 2rem;
  border-radius: var(--radius-sm);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  transition: var(--transition);
}
.btn img { width: 12px; height: 12px; }
.btn-primary {
  background: var(--accent);
  color: #111;
}
.btn-primary:hover { background: var(--accent-hover); transform: translateY(-2px); }
.btn-outline {
  background: transparent;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-outline:hover { border-color: var(--accent); color: var(--accent); }
.btn-dark {
  background: #222;
  color: var(--text);
  border: 1px solid var(--border);
}
.btn-dark:hover { background: #333; }
.btn-arrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text);
  transition: var(--transition);
}
.btn-arrow:hover { color: var(--accent); gap: 0.75rem; }
.btn-arrow img { width: 12px; }

/* ===== Navigation ===== */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(13, 13, 13, 0.95);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}
.nav-inner {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav-logo { display: flex; align-items: center; }
.nav-logo img { height: 44px; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 2rem;
}
.nav-links a {
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  transition: var(--transition);
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }
.nav-cta { margin-left: 1rem; }
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 6px;
  /* 44x44: soglia minima per il tocco. I tratti restano 24px, cresce l'area. */
  width: 44px;
  height: 44px;
  margin-right: -10px; /* riallinea i tratti al bordo, non il bottone */
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--text);
  border-radius: 2px;
  transition: transform 0.3s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.2s ease,
              background 0.3s ease;
}
.hamburger:active span { background: var(--logo-pink); }
.hamburger.open span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); }
.hamburger.open span:nth-child(2) { opacity: 0; }
.hamburger.open span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); }

/* ===== Mobile Menu ===== */
/* Il menu overlay e definito per intero nella sezione
   "Full-screen Overlay Menu" piu in basso. */

/* ===== Hero ===== */
.hero {
  position: relative;
  /* Qui `vh` e non `svh`, al contrario di .statement-pin, e la differenza
     non e' una svista. L'hero e' una copertura: video e velo stanno a
     inset 0 e devono arrivare al bordo sempre. Su iOS `svh` e' il viewport
     **con la barra aperta**, il piu' corto: appena la barra si ritira lo
     schermo cresce di 60-90px e sotto l'hero resta una striscia scoperta
     (segnalazione utenti). `vh` su iOS e' il viewport a barra ritirata, il
     piu' alto: copre in ogni stato, al massimo eccede sotto la barra, che
     su un fondo pieno non si vede. Lo statement puo' stare a `svh` perche'
     non copre niente: il fondo lo dipinge la sezione. */
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: calc(72px + env(safe-area-inset-top, 0px));
  /* La scatola copre a `lvh`, ma il contenuto va centrato su quello che
     si vede davvero, che all'arrivo e' `svh` — la barra del browser e'
     ancora aperta. Senza questo il blocco nasce basso di meta' barra e
     si assesta solo quando la barra si ritira: da fuori sembra che il
     tutto schermo arrivi in due tempi (segnalazione utenti).
     Con box-sizing: border-box il padding sta dentro la min-height,
     quindi la scatola resta 100vh e copre come prima; cambia solo dove
     cade il centro. Su desktop lvh, svh e vh coincidono e il calc vale
     zero; dove svh non esiste la dichiarazione decade e si torna al
     comportamento di adesso. */
  padding-bottom: calc(100lvh - 100svh);
}
.hero-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  background: #0d1117;
  object-fit: cover;
  object-position: center center;
  z-index: 0;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: rgba(13, 13, 13, 0.80);
  z-index: 1;
}
.hero-content {
  position: relative;
  z-index: 2;
  width: 100%;
  text-align: center;
  padding: 0 2rem;
}
.hs-line {
  display: block;
}
.hs-line--title {
  font-family: var(--font-heading);
  font-size: clamp(1.8rem, 8vw, 9rem);
  line-height: 0.88;
  letter-spacing: 0.02em;
  overflow: visible;
}
.hs-sub-wrap {
  height: 0;
  overflow: hidden;
}
.hs-line--sub {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 4.5vw, 5rem);
  line-height: 0.92;
  overflow: hidden;
  padding-bottom: 0.05em;
  margin-bottom: -0.05em;
}
.hs-line--title + .hs-line--title { margin-top: 0.4rem; }
.hs-sub-wrap + .hs-line--title { margin-top: 0.4rem; }
.hs-inner {
  display: block;
}
.hs-line--title .hs-inner {
  color: var(--text);
}
.hero-label {
  position: absolute;
  z-index: 3;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #fff;
  top: 50%;
  transform: translateY(-50%);
  text-decoration: none;
  transition: opacity 0.3s;
}
.hero-label--left { left: 5rem; }
.hero-label--right { right: 5rem; }
.hero-label--right:hover { opacity: 0.7; }
.hero-socials {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1rem;
  z-index: 3;
}
/* Da telefono le icone restano solo in fondo alla pagina: qui stanno sul
   fotogramma dell'hero, dove lo spazio sotto il titolo e' gia' contato. */
@media (max-width: 768px) {
  .hero-socials { display: none; }
}
.hero-social {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 1.5px solid rgba(255,255,255,0.65);
  background: transparent;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow: hidden;
  color: #fff;
  text-decoration: none;
  transition: color 0.45s ease, border-color 0.45s ease;
}
.hero-social::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: -10%;
  width: 120%;
  height: 110%;
  background: #fff;
  border-radius: 50% 50% 0 0 / 30% 30% 0 0;
  transform: translateY(105%);
  transition: transform 0.55s cubic-bezier(0.33, 1, 0.68, 1);
  z-index: 0;
}
.hero-social:hover::before { transform: translateY(0); }
.hero-social:hover { color: #000; border-color: #fff; }
.hero-social svg { position: relative; z-index: 1; }
.hero-scroll-cli {
  display: none;
  position: absolute;
  bottom: calc(2.5rem + 46px + 0.9rem);
  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  font-family: 'Courier New', monospace;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #fff;
  white-space: nowrap;
  user-select: none;
  align-items: center;
}
.hero-scroll-text {
  display: inline-block;
  overflow: hidden;
  vertical-align: bottom;
  width: 0;
  animation: typewrite 4s infinite;
}
@keyframes typewrite {
  0%  { width: 0ch;                  animation-timing-function: steps(11, end); }
  30% { width: calc(11ch + 1.6em);  animation-timing-function: steps(1, end); }
  80% { width: calc(11ch + 1.6em);  animation-timing-function: steps(1, end); }
  81% { width: 0ch; }
  100%{ width: 0ch; }
}
.hero-scroll-cursor {
  display: inline-block;
  width: 0.45em;
  height: 0.85em;
  background: #fff;
  vertical-align: text-bottom;
  margin-left: 0.4em;
  animation: cliCursor 1s step-end infinite;
}
@keyframes cliCursor {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}
.hero-tag {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
  display: block;
  opacity: 0;
}
.hero h1 {
  font-size: clamp(5rem, 14vw, 12rem);
  line-height: 0.9;
  color: var(--text);
  margin-bottom: 0;
}
.hero h1 span { display: block; opacity: 0; }
.hero-subtitle {
  font-size: 1.1rem;
  color: var(--text-muted);
  max-width: 500px;
  margin-top: 2rem;
}
.scroll-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-top: 3rem;
  transition: var(--transition);
  opacity: 0;
}
.scroll-indicator:hover { color: var(--accent); }
.scroll-indicator::before {
  content: '';
  width: 1px;
  height: 40px;
  background: var(--text-muted);
  display: block;
}

/* ===== Page Hero ===== */
.page-hero {
  position: relative;
  height: 380px;
  display: flex;
  align-items: center;
  overflow: hidden;
  margin-top: calc(72px + env(safe-area-inset-top, 0px));
}
.page-hero-bg {
  position: absolute;
  inset: 0;
  object-fit: cover;
  width: 100%;
  height: 100%;
  opacity: 0.3;
  /* Dove ancorare il ritaglio: `cover` su un hero largo e basso butta via
     meta della foto sopra e sotto, e il soggetto non sta sempre al centro.
     Ogni hero lo sposta con --hero-bg-y invece di ritagliare il file. */
  object-position: 50% var(--hero-bg-y, 50%);
}
.page-hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(0,0,0,0.85) 0%, rgba(0,0,0,0.4) 100%);
}
.page-hero-content {
  position: relative;
  z-index: 1;
  max-width: var(--max-width);
  margin: 0 auto;
  padding: 0 2rem;
  width: 100%;
}
.page-hero h1 {
  font-size: clamp(3rem, 8vw, 6rem);
  color: var(--text);
}

/* ===== Client Logos ===== */
.logos-section {
  padding: 3rem 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  overflow: hidden;
}
.logos-track {
  display: flex;
  align-items: center;
  gap: 4rem;
  animation: scroll-logos 80s linear infinite;
  width: max-content;
}
.logos-track img {
  /* I rapporti dei marchi vanno da 0,74:1 a 7,71:1: a sola altezza i loghi
     quadrati sparivano accanto ai wordmark lunghi. Due tetti pareggiano la
     presenza ottica; larghezza e altezza restano auto, una misura esplicita
     non cede al tetto e schiaccia l'immagine. */
  width: auto;
  height: auto;
  max-width: 136px;
  max-height: 32px;
  flex: none;
  opacity: 0.5;
  filter: brightness(0) invert(1);
  transition: var(--transition);
}
.logos-track img:hover { opacity: 1; }
@keyframes scroll-logos {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* ===== About Section ===== */
.about-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}
.about-img {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 4/5;
  position: relative;
}
.about-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* ===== Case Study Cards ===== */
.cs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.cs-card {
  position: relative;
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 16/9;
  display: block;
}
.cs-card:first-child {
  grid-column: 1 / -1;
  aspect-ratio: 21/9;
}
.cs-card img.cs-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.5s ease;
}
.cs-card:hover img.cs-img { transform: scale(1.05); }
.cs-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(0deg, rgba(0,0,0,0.8) 0%, transparent 60%);
}
.cs-info {
  position: absolute;
  bottom: 1.5rem;
  left: 1.5rem;
  right: 1.5rem;
}
.cs-logo { height: 28px; margin-bottom: 0.75rem; }
.cs-title { font-family: var(--font-heading); font-size: 1.8rem; color: var(--text); }
.cs-year { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }

/* ===== Services ===== */
.services-list { display: flex; flex-direction: column; }
.service-item {
  display: flex;
  align-items: flex-start;
  gap: 2rem;
  /* La corsia a destra e la stanza che serve alla freccia: in hover trasla
     di 10px e cresce del 15%, cioe ~12px oltre il proprio bordo. Il blocco
     ha `overflow:hidden`, quindi senza spazio la punta veniva tagliata di
     netto e restava solo la coda. Toglierlo non e la strada: la freccia
     uscirebbe dal riempimento bianco e galleggerebbe nello sfondo scuro. */
  padding: 2rem 1rem 2rem 0;
  border-bottom: 1px solid var(--border);
  transition: border-color 0.4s ease;
  text-decoration: none;
  position: relative;
}
/* white bg fill from left — the Awwwards signature move */
.service-item::before {
  content: '';
  position: absolute;
  /* Sborda ai lati invece di fermarsi sul contenuto: il numero e il primo
     elemento a sinistra, senza padding, e con `inset: 0` il bordo del bianco
     cadeva **esattamente** sul glifo — da telefono sembrava tagliato. Cosi il
     contenuto resta allineato al resto della sezione e il colore gli fa
     spazio intorno. Serviva togliere `overflow: hidden` dal blocco. */
  inset: 0 -1rem;
  background: #ffffff;
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.65s cubic-bezier(0.76, 0, 0.24, 1);
  z-index: 0;
  pointer-events: none;
}
.service-item:hover::before { transform: scaleX(1); }
.service-item:hover { border-color: transparent; padding-left: 0; }
.service-num {
  font-family: var(--font-heading);
  font-size: 1rem;
  color: var(--text-muted);
  min-width: 3rem;
  padding-top: 0.25rem;
  position: relative;
  z-index: 1;
  transition: color 0.4s ease;
}
.service-item:hover .service-num { color: var(--accent); }
.service-content { flex: 1; position: relative; z-index: 1; }
.service-name {
  font-family: var(--font-heading);
  font-size: 2rem;
  color: var(--text);
  transition: color 0.35s ease;
}
.service-item:hover .service-name { color: #111111; }
.service-desc { color: var(--text-muted); font-size: 0.9rem; margin-top: 0.5rem; transition: color 0.35s ease; }
.service-item:hover .service-desc { color: rgba(17,17,17,0.6); }
.service-tags { display: flex; flex-wrap: wrap; gap: 0.5rem; margin-top: 0.75rem; }
.service-tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  padding: 0.2rem 0.6rem;
  border-radius: 50px;
  transition: color 0.35s ease, border-color 0.35s ease;
}
.service-item:hover .service-tag { border-color: rgba(17,17,17,0.2); color: rgba(17,17,17,0.55); }
.service-arrow {
  color: var(--text-muted);
  font-size: 1.5rem;
  align-self: center;
  position: relative;
  z-index: 1;
  /* La scala cresce verso sinistra: cosi la sporgenza a destra vale sempre
     i 10px della traslazione, quale che sia la larghezza del glifo. Con
     l'origine al centro dipendeva dal font, e iOS ne usa uno diverso per
     la freccia. */
  transform-origin: right center;
  transition: color 0.35s ease, transform 0.4s cubic-bezier(0.34,1.56,0.64,1);
  will-change: transform;
}
.service-item:hover .service-arrow { color: #111111; transform: translateX(10px) scale(1.15); }
/* Entrance override — skew adds kinetic feel */
.service-item.reveal {
  transform: translateY(50px) skewY(2deg);
  transition: opacity 0.8s cubic-bezier(0.16,1,0.3,1), transform 0.85s cubic-bezier(0.16,1,0.3,1);
}
.service-item.reveal.visible { transform: none; }

/* ===== Testimonials v2 ===== */
.testimonial-list {
  display: block;
}
.tcard {
  display: grid;
  grid-template-columns: 1fr 240px 170px;
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--bg-card);
  border: 1px solid var(--border);
  min-height: 260px;
  position: sticky;
  top: 88px;
  margin-bottom: 1.5rem;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.18);
  will-change: transform;
  transform-origin: top center;
}
.tcard:last-child { margin-bottom: 0; }
.tcard:nth-child(1) { z-index: 1; }
.tcard:nth-child(2) { z-index: 2; }
.tcard:nth-child(3) { z-index: 3; }
.tcard:nth-child(4) { z-index: 4; }
.tcard:nth-child(5) { z-index: 5; }
.tcard-left {
  padding: 2.5rem 2.75rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1.5rem;
}
.tcard-lead {
  font-family: var(--font-heading);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.55;
  text-transform: uppercase;
  color: var(--text);
  margin: 0;
  flex: 1;
}
/* ===== Recensioni clienti =====
   Stessa scocca delle card caso (sticky, stessa pila): cambia solo che
   non hanno immagine ne numeri, quindi una colonna sola. Colore e
   famiglia dichiarati a mano, le regole nude di questo foglio vincono. */
.tcard--review {
  grid-template-columns: 1fr 280px;
}
.tcard--review .tcard-left {
  justify-content: center;
}
.tcard-rev-author {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 2.5rem 2rem;
  border-left: 1px solid var(--border);
}
.tra-name {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.05;
  text-transform: uppercase;
  color: var(--text);
}
.tcard--review .tcard-lead {
  font-family: var(--font-body);
  font-size: 1.05rem;
  font-weight: 300;
  line-height: 1.7;
  text-transform: none;
  color: rgba(255, 255, 255, 0.85);
  max-width: 68ch;
}
.tcard--review .tcard-lead::before {
  content: "";
  display: block;
  width: 28px;
  height: 2px;
  margin-bottom: 1.5rem;
  background: var(--logo-pink);
}

.tcard-video {
  margin-top: 1.25rem;
  border-radius: var(--radius-md);
  overflow: hidden;
  /* Il video si monta da nx-lazy-video.js quando ci si avvicina: fino a quel
     momento il box e vuoto. Un fondo appena piu chiaro della pagina lo fa
     leggere come un riquadro che sta arrivando invece che come un buco. */
  background: var(--bg-card);
}
.tcard-video video {
  width: 100%;
  height: auto;
  display: block;
}

/* ===== Light Section Theme ===== */
.section-light {
  background: #ffffff;
  color: #212121;
}
.section-light h1, .section-light h2, .section-light h3,
.section-light h4, .section-light h5, .section-light h6 { color: #212121; }
.section-light p { color: #555555; }
.section-light a:not(.btn):not(.btn-arrow):not(.service-item):not(.blog-card):not(.cs-card) { color: #212121; }
.section-light .tag {
  background: rgba(33, 33, 33, 0.06);
  color: #212121;
  border-color: rgba(33, 33, 33, 0.18);
}
.section-light .divider { background: #212121; }
.section-light .btn-arrow { color: #212121; }
.section-light .btn-arrow::after { background: #212121; }

/* Logos on light bg */
.section-light .logos-track img { filter: brightness(0); }
.section-light.logos-section {
  border-top-color: rgba(33, 33, 33, 0.1);
  border-bottom-color: rgba(33, 33, 33, 0.1);
}

/* About */
.section-light .about-grid p { color: #555555; }

/* Services */
.section-light .service-item { border-bottom-color: rgba(33, 33, 33, 0.1); }
.section-light .service-item::before { background: #111111; }
.section-light .service-num { color: #999999; }
.section-light .service-name { color: #212121; }
.section-light .service-desc { color: #666666; }
.section-light .service-tag {
  color: #555555;
  border-color: rgba(33, 33, 33, 0.15);
}
.section-light .service-arrow { color: #888888; }
.section-light .service-item:hover .service-name { color: #ffffff; }
.section-light .service-item:hover .service-desc { color: rgba(255, 255, 255, 0.7); }
.section-light .service-item:hover .service-tag { border-color: rgba(255, 255, 255, 0.25); color: rgba(255, 255, 255, 0.65); }
.section-light .service-item:hover .service-arrow { color: #ffffff; }

/* Testimonials */
.section-light .tcard {
  background: #ffffff;
  border-color: rgba(33, 33, 33, 0.1);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06);
}
.section-light .tcard-lead { color: #212121; }
.section-light .tcard-rev-author { border-left-color: rgba(33, 33, 33, 0.1); }
.section-light .tra-name { color: #212121; }

/* Form */
.section-light .form-section {
  background: #f5f5f5;
  border: 1px solid rgba(33, 33, 33, 0.1);
}
.section-light .form-group label { color: #212121; }
.section-light input[type="text"],
.section-light input[type="email"],
.section-light input[type="tel"],
.section-light select,
.section-light textarea {
  background: #ffffff;
  border-color: rgba(33, 33, 33, 0.18);
  color: #212121;
}
.section-light input::placeholder { color: #aaaaaa; }
.cfn-section input[type="text"],
.cfn-section input[type="email"],
.cfn-section input[type="tel"] { background: #e8e8e8; }
.section-light .checkbox-label {
  color: #555555;
  border-color: rgba(33, 33, 33, 0.12);
}
.section-light .checkbox-label:hover { border-color: rgba(33, 33, 33, 0.35); color: #212121; }

/* Blog */
.section-light .blog-card {
  background: #f5f5f5;
  border-color: rgba(33, 33, 33, 0.1);
}
.section-light .blog-card:hover { border-color: rgba(33, 33, 33, 0.25); }
.section-light .blog-title { color: #212121; }
.section-light .blog-author { color: #777777; }
.section-light .blog-cat { background: rgba(33, 33, 33, 0.08); color: #333333; }
.section-light .blog-date { color: #888888; }
.section-light .blog-body { border-top-color: rgba(33, 33, 33, 0.1); }

/* ===== Awards ===== */
.awards-section { background: var(--bg-card); }
.awards-list { display: flex; flex-direction: column; }
.award-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}
.award-item:hover { padding-left: 0.5rem; }
.award-name { font-size: 0.95rem; color: var(--text); }
.award-client { font-size: 0.85rem; color: var(--text-muted); }

/* ===== Process Steps ===== */
.process-steps {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
  flex-wrap: wrap;
}
.process-step {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.process-step::after {
  content: '→';
  color: var(--accent);
  margin-left: 0.5rem;
}
.process-step:last-child::after { display: none; }

/* ===== Contact Form ===== */
.form-section { background: var(--bg-card); border-radius: var(--radius-md); padding: 3rem; }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; }
.form-group { display: flex; flex-direction: column; gap: 0.5rem; }
.form-group.full { grid-column: 1 / -1; }
.form-group label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.form-group input,
.form-group textarea,
.form-group select {
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 0.875rem 1rem;
  color: var(--text);
  font-size: 0.9rem;
  outline: none;
  transition: var(--transition);
}
.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus { border-color: var(--accent); }
.form-group textarea { resize: vertical; min-height: 120px; }
.form-group select option { background: #1a1a1a; }
.checkbox-group { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 0.5rem; }
.checkbox-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.5rem 1rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  transition: var(--transition);
}
.checkbox-label:hover { border-color: var(--accent); color: var(--text); }
.checkbox-label input[type="checkbox"] { accent-color: var(--accent); }

/* ===== Contact Form New (Framer-style) ===== */
.cfn-section {
  background: #e8e8e8 !important;
  padding: 5rem 0 6rem;
}
.cfn-heading {
  font-size: clamp(4.5rem, 9vw, 10.5rem);
  font-style: normal;
  font-weight: 900;
  text-align: center;
  text-transform: uppercase;
  color: #212121;
  /* Era 0.78: quando il titolo va a capo (schermi molto larghi o molto
     stretti) le due righe si scavalcavano e la seconda sembrava tagliata.
     0.9 e lo stesso valore di .cfn-group-label, cosi i due titoli della
     sezione hanno la stessa gabbia. Il padding e la stessa cosa in
     verticale: Bebas a questi corpi sborda dalla riga, e senza margine
     l'inchiostro finisce fuori dal box (misurato: 4px sopra). */
  line-height: 0.9;
  padding-top: 0.06em;
  letter-spacing: -0.03em;
  /* I due titoli della sezione sono un blocco solo di tre righe, quindi lo
     stacco fra loro deve valere quanto lo stacco fra le righe dentro il
     primo. Misurato a 1920 e 2560: le righe interne distano 28px, mentre
     fra i due titoli ce n'erano 93 — i 2rem di qui piu i 2rem di
     padding-top di .cfn-groups. Azzerati tutti e due, restano gli stessi
     28px: il ritmo lo detta solo line-height. */
  margin-bottom: 0;
  font-family: var(--font-heading);
}
.cfn-form { display: flex; flex-direction: column; gap: 0; }
.cfn-groups {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 3rem;
  /* Vedi .cfn-heading: questo padding cadeva fra i due titoli e rompeva la
     spaziatura del blocco. */
  padding-top: 0;
  padding-bottom: 2.5rem;
}
.cfn-groups--single {
  grid-template-columns: 1fr;
}
.cfn-pills--centered { justify-content: center; }
.cfn-group-label {
  font-size: clamp(4.5rem, 9vw, 10.5rem);
  font-weight: 900;
  text-transform: uppercase;
  font-style: normal;
  font-family: var(--font-heading);
  color: #212121 !important;
  line-height: 0.9;
  padding-bottom: 0.06em;
  letter-spacing: -0.03em;
  text-align: center;
  margin-bottom: 1.5rem;
}
.cfn-service-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #212121;
  text-align: center;
  margin-bottom: 1rem;
}
.cfn-pills { display: flex; flex-wrap: wrap; gap: 0.45rem; }
.cfn-pill { cursor: pointer; }
.cfn-pill input[type="radio"] { display: none; }
.cfn-pill span {
  display: inline-flex;
  align-items: center;
  height: 32px;
  padding: 0 14px;
  border-radius: 100px;
  border: 1px solid rgba(33,33,33,0.25);
  font-size: 0.78rem;
  font-weight: 500;
  color: #212121;
  background: transparent;
  transition: border-color 0.22s ease, background 0.22s ease, color 0.22s ease;
  white-space: nowrap;
}
.cfn-pill:hover span { border-color: rgba(33,33,33,0.5); background: rgba(33,33,33,0.06); }
.cfn-pill input:checked + span {
  background: #212121;
  border-color: #212121;
  color: #fff;
}
.cfn-bottom {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 2rem;
}
.cfn-inputs {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2.5rem;
}
.cfn-input-wrap { display: flex; flex-direction: column; gap: 0.45rem; }
.cfn-input-wrap label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #212121;
}
.cfn-input-wrap input {
  background: transparent;
  border: none;
  border-bottom: 1px dashed rgba(33,33,33,0.3);
  border-radius: 0;
  padding: 0.55rem 0;
  font-size: 0.88rem;
  color: #212121;
  outline: none;
  font-family: var(--font-body);
  transition: border-color 0.22s ease;
}
.cfn-input-wrap input:focus { border-bottom-color: #212121; border-bottom-style: solid; }
.cfn-input-wrap input::placeholder { color: rgba(33,33,33,0.4); }
/* Un colore del marchio per campo, come nel menu: la linea che si accende
   dice quale campo hai in mano. Si mira il name e non la posizione, cosi'
   spostando un campo il colore lo segue. */
.cfn-input-wrap input[name="nome"]:focus     { border-bottom-color: var(--logo-pink); }
.cfn-input-wrap input[name="email"]:focus    { border-bottom-color: var(--logo-green); }
.cfn-input-wrap input[name="telefono"]:focus { border-bottom-color: var(--logo-blue); }
.cfn-submit {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: #212121;
  color: #fff;
  border: none;
  border-radius: 100px;
  padding: 0 0.4rem 0 1.4rem;
  height: 48px;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  font-family: var(--font-body);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.22s ease, transform 0.2s ease;
}
.cfn-submit-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #fff;
  color: #212121;
  font-size: 1.1rem;
  line-height: 1;
  flex-shrink: 0;
}
.cfn-submit:hover { background: #000; transform: translateY(-1px); }
@media (max-width: 768px) {
  /* Il corpo scende su tutti e due i titoli insieme. Prima scendeva solo il
     primo: a 390px restavano 50,7px contro 72px, e il secondo titolo era il
     42% piu grande di quello che gli sta sopra. */
  .cfn-heading,
  .cfn-group-label { font-size: clamp(3rem, 13vw, 5rem); }
  .cfn-groups { grid-template-columns: 1fr; gap: 1.5rem; }
  .cfn-bottom { gap: 1.5rem; }
  .cfn-inputs { grid-template-columns: 1fr; gap: 1.5rem; }
  .cfn-submit { align-self: stretch; justify-content: center; }
}

/* ===== Blog Cards ===== */
.blog-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.blog-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  display: block;
  transition: var(--transition);
}
.blog-card:hover { transform: translateY(-4px); border-color: rgba(0,174,239,0.2); }
.blog-img-wrap { aspect-ratio: 4/3; overflow: hidden; }
.blog-img-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; }
.blog-card:hover .blog-img-wrap img { transform: scale(1.05); }
.blog-body { padding: 1.5rem; }
.blog-meta { display: flex; align-items: center; gap: 1rem; margin-bottom: 0.75rem; }
.blog-cat {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
}
.blog-date { font-size: 0.75rem; color: var(--text-muted); }
.blog-title {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  color: var(--text);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}
.blog-author { font-size: 0.8rem; color: var(--text-muted); }

/* ===== Team Cards ===== */
.team-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.team-card {
  display: block;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  transition: var(--transition);
}
.team-card:hover { transform: translateY(-4px); border-color: rgba(0,174,239,0.2); }
.team-img-wrap { aspect-ratio: 3/4; overflow: hidden; }
/* I ritratti sono clip in loop, non foto: il video prende le stesse
   regole dell'immagine (il poster le usa finche non e montato) e lo
   stesso avvicinamento in hover. */
.team-img-wrap img,
.team-img-wrap video { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.5s ease; }
.team-card:hover .team-img-wrap img,
.team-card:hover .team-img-wrap video { transform: scale(1.05); }
.team-body { padding: 1.25rem; }
.team-name { font-family: var(--font-heading); font-size: 1.4rem; color: var(--text); }
.team-role { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.25rem; }
.team-socials { display: flex; gap: 0.75rem; margin-top: 0.75rem; }
.team-socials a { opacity: 0.5; transition: var(--transition); }
.team-socials a:hover { opacity: 1; }
.team-socials img { width: 16px; height: 16px; filter: brightness(0) invert(1); }

/* ===== Career Cards ===== */
.career-list { display: flex; flex-direction: column; gap: 1rem; }
.career-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 1.75rem 2rem;
  transition: var(--transition);
  text-decoration: none;
}
.career-card:hover { border-color: var(--accent); transform: translateX(4px); }
.career-title { font-family: var(--font-heading); font-size: 1.8rem; color: var(--text); }
.career-meta { display: flex; align-items: center; gap: 1rem; margin-top: 0.5rem; }
.career-type {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  padding: 0.2rem 0.6rem;
  border-radius: 50px;
}
.career-location { font-size: 0.8rem; color: var(--text-muted); }
.career-arrow { font-size: 1.5rem; color: var(--text-muted); transition: var(--transition); }
.career-card:hover .career-arrow { color: var(--accent); }

/* ===== FAQ Accordion ===== */
.faq-list { display: flex; flex-direction: column; }
.faq-item { border-bottom: 1px solid var(--border); }
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  font-size: 1rem;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  transition: var(--transition);
}
.faq-question:hover { color: var(--accent); }
.faq-icon {
  width: 24px;
  height: 24px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: var(--text-muted);
  flex-shrink: 0;
  transition: var(--transition);
}
.faq-item.open .faq-icon { transform: rotate(45deg); border-color: var(--accent); color: var(--accent); }
.faq-answer { display: none; padding-bottom: 1.5rem; }
.faq-item.open .faq-answer { display: block; }
.faq-answer p { color: var(--text-muted); line-height: 1.75; }

/* ===== Pricing ===== */
.pricing-toggle {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 3rem;
}
.toggle-label { font-size: 0.9rem; font-weight: 600; color: var(--text-muted); }
.toggle-switch {
  width: 52px;
  height: 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 50px;
  position: relative;
  cursor: pointer;
  transition: var(--transition);
}
.toggle-switch.active { background: var(--accent); border-color: var(--accent); }
.toggle-knob {
  position: absolute;
  top: 3px;
  left: 3px;
  width: 20px;
  height: 20px;
  background: var(--text);
  border-radius: 50%;
  transition: var(--transition);
}
.toggle-switch.active .toggle-knob { transform: translateX(24px); }
.pricing-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 3rem;
  max-width: 480px;
}
.pricing-card.featured { border-color: var(--accent); }
.pricing-plan-name {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.pricing-price {
  font-family: var(--font-heading);
  font-size: 4rem;
  color: var(--text);
  margin: 1rem 0;
}
.pricing-period { font-size: 0.85rem; color: var(--text-muted); }
.pricing-features { margin: 2rem 0; display: flex; flex-direction: column; gap: 0.75rem; }
.pricing-feature {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-muted);
}
.pricing-feature::before {
  content: '✓';
  color: var(--accent);
  font-weight: 700;
  flex-shrink: 0;
}
.timeline-list { display: flex; flex-direction: column; gap: 0; }
.timeline-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 0;
  border-bottom: 1px solid var(--border);
}
.timeline-phase { font-weight: 600; font-size: 0.95rem; }
.timeline-dur { font-size: 0.85rem; color: var(--accent); }

/* ===== Contact Info ===== */
.contact-info-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; margin-bottom: 4rem; }
.contact-info-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2rem;
  text-align: center;
}
.contact-info-label {
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.contact-info-value { font-size: 1rem; color: var(--text); }

/* ===== Case Study Detail ===== */
.cs-detail-meta {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
  padding: 2rem;
  background: var(--bg-card);
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
}
.cs-detail-meta-item {}
.cs-detail-meta-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.25rem;
}
.cs-detail-meta-value { font-weight: 600; font-size: 0.95rem; }
.cs-hero-img {
  width: 100%;
  border-radius: var(--radius-md);
  margin-bottom: 3rem;
  aspect-ratio: 16/7;
  object-fit: cover;
}
.cs-content h3 {
  font-size: 1.8rem;
  margin: 2rem 0 1rem;
  color: var(--text);
}
.cs-content p { color: var(--text-muted); margin-bottom: 1rem; line-height: 1.8; }
.cs-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 2rem 0; }
.cs-gallery img { border-radius: var(--radius-md); aspect-ratio: 4/3; object-fit: cover; }

/* ===== Blog Detail ===== */
.blog-detail-header { margin-bottom: 2rem; }
.blog-detail-meta { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1rem; }
.blog-hero-img {
  width: 100%;
  /* Serve esplicito: gli attributi width/height nel markup arrivano come
     suggerimenti di presentazione, e senza un `height` d'autore che li
     scavalchi la foto resterebbe alta 550px come l'originale, con
     `aspect-ratio` ignorato (vale solo se una delle due misure e auto).
     Le schede in indice non hanno il problema perche li il CSS dichiara
     gia sia width sia height. */
  height: auto;
  border-radius: var(--radius-md);
  margin: 2rem 0;
  aspect-ratio: 16/7;
  object-fit: cover;
}
.blog-content h2, .blog-content h3 {
  font-size: clamp(1.2rem, 3vw, 1.8rem);
  margin: 2rem 0 1rem;
  color: var(--text);
}
.blog-content p { color: var(--text-muted); margin-bottom: 1rem; line-height: 1.8; }

/* ===== Team Detail ===== */
.team-detail-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: start;
}
.team-detail-img {
  border-radius: var(--radius-md);
  overflow: hidden;
  aspect-ratio: 3/4;
}
.team-detail-img img { width: 100%; height: 100%; object-fit: cover; }
.team-detail-meta { display: flex; flex-direction: column; gap: 1rem; margin-top: 1.5rem; }
.team-meta-item { display: flex; gap: 0.5rem; font-size: 0.9rem; }
.team-meta-label { color: var(--text-muted); font-weight: 600; min-width: 120px; }
.team-meta-value { color: var(--text); }

/* ===== Career Detail ===== */
.career-detail-content { max-width: 800px; }
.career-detail-content h4 {
  font-size: 1.4rem;
  margin: 2rem 0 1rem;
  color: var(--text);
}
.career-detail-content p { color: var(--text-muted); line-height: 1.8; margin-bottom: 1rem; }

/* ===== About Working Process ===== */
.process-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; }
.process-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2rem;
  position: relative;
  overflow: hidden;
}
.process-num {
  font-family: var(--font-heading);
  font-size: 6rem;
  color: rgba(0,174,239,0.1);
  position: absolute;
  bottom: -1rem;
  right: 1rem;
  line-height: 1;
}
.process-step-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.75rem;
}
.process-card h4 { font-size: 1.3rem; margin-bottom: 0.75rem; }
.process-card p { font-size: 0.85rem; }

/* ===== Stats ===== */
.stats-row { display: flex; gap: 3rem; margin: 2rem 0; }
.stat-item {}
.stat-big {
  font-family: var(--font-heading);
  font-size: 3rem;
  color: var(--accent);
}
.stat-desc { font-size: 0.85rem; color: var(--text-muted); }

/* ===== Service Detail ===== */
.service-detail-content { max-width: 800px; }
.service-detail-content h2 { margin-bottom: 1.5rem; }
.service-detail-content p { color: var(--text-muted); line-height: 1.8; margin-bottom: 1rem; }
.service-detail-content h3 { font-size: 1.6rem; margin: 2rem 0 1rem; }
.service-feature-list { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin: 1.5rem 0; }
.service-feature-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.9rem;
  color: var(--text-muted);
  padding: 1rem;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.service-feature-item::before { content: '→'; color: var(--accent); }

/* ===== CTA Section ===== */
.cta-section {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  text-align: center;
  padding: 5rem 2rem;
}
.cta-section h2 { margin-bottom: 2rem; }

/* ===== 404 ===== */
.not-found {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 2rem;
  padding-top: 72px;
}
.not-found h1 { font-size: clamp(6rem, 20vw, 16rem); color: rgba(0,174,239,0.1); margin-bottom: -2rem; }
.not-found h2 { font-size: 2rem; margin-bottom: 1rem; }
.not-found p { margin-bottom: 2rem; }

/* ===== Footer ===== */
.footer {
  background: var(--bg-nav);
  border-top: 1px solid var(--border);
  padding: 0 0 2rem;
}
.footer-social-bar {
  display: flex;
  border-bottom: 1px solid var(--border);
}
.footer-social-link {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2.2rem 1rem;
  font-family: var(--font-heading);
  font-size: clamp(1.4rem, 3vw, 2.2rem);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.85);
  border-right: 1px solid var(--border);
  position: relative;
  overflow: hidden;
  transition: color 0.45s ease;
}
.footer-social-link:last-child { border-right: none; }
.footer-social-link::before {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: var(--logo-pink);
  /* 101 e non 100: a riposo il velo resta un pixel piu' giu'. Con 100 il
     bordo di sopra affiorava sul filo del bottone e si leggeva come una
     riga colorata sotto la scritta — invisibile finche' erano tutti rosa,
     evidente da quando ogni rete ha il suo colore. */
  transform: translateY(101%);
  transition: transform 0.55s cubic-bezier(0.33, 1, 0.68, 1);
  z-index: 0;
}
.footer-social-link span { position: relative; z-index: 1; }
.footer-social-link:hover { color: #ffffff; }
.footer-social-link:hover::before { transform: translateY(0); }
/* I quattro colori del marchio nell'ordine: rosa, verde, blu, giallo. Il
   legame resta l'indirizzo e non la posizione, cosi la stessa rete ha lo
   stesso colore in fondo alla pagina e nel piede dell'hero — dove le voci
   sono elencate nello stesso ordine. */
.footer-social-link[href*="facebook"]::before  { background: var(--logo-pink); }
.footer-social-link[href*="instagram"]::before { background: var(--logo-green); }
.footer-social-link[href*="linkedin"]::before  { background: var(--logo-blue); }
.footer-social-link[href*="youtube"]::before   { background: var(--logo-yellow); }
/* Sul giallo il bianco non si legge: quella sola scritta va scura. */
.footer-social-link[href*="youtube"]:hover { color: #121212; }
/* Da telefono quattro voci in fila non ci stanno: la scritta resta a 1.4rem
   (il clamp non scende sotto) e "INSTAGRAM" chiede 85px, piu' i 32 di
   respiro, contro i 97 di un quarto di 390px — e il link ha overflow
   hidden, quindi la parola veniva tagliata invece di traboccare. Due per
   riga: la misura torna larga il doppio e il corpo resta quello. */
@media (max-width: 520px) {
  .footer-social-bar { flex-wrap: wrap; }
  .footer-social-link { flex: 1 0 50%; }
  .footer-social-link:nth-child(2n) { border-right: none; }
  .footer-social-link:nth-child(-n+2) { border-bottom: 1px solid var(--border); }
}
.footer .container { padding-top: 4rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem 5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border);
}
.footer-logo { margin-bottom: 1rem; }
.footer-logo img { height: 32px; }
.footer-desc { font-size: 0.875rem; color: var(--text-muted); }
.footer-desc + .footer-desc { margin-top: 0.75rem; }
.footer-col h5 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  color: var(--text);
  margin-bottom: 1.25rem;
  letter-spacing: 0.05em;
}
.footer-col ul { display: flex; flex-direction: column; gap: 0.75rem; }
.footer-col ul a {
  font-size: 0.875rem;
  color: var(--text-muted);
  transition: var(--transition);
}
.footer-col ul a:hover { color: var(--accent); padding-left: 0.25rem; }
/* Stessa sequenza del menu: rosa, verde, blu, giallo, e poi si ricomincia */
.footer-col ul li:nth-child(4n+1) a:hover { color: var(--logo-pink); }
.footer-col ul li:nth-child(4n+2) a:hover { color: var(--logo-green); }
.footer-col ul li:nth-child(4n+3) a:hover { color: var(--logo-blue); }
.footer-col ul li:nth-child(4n+4) a:hover { color: var(--logo-yellow); }
.footer-contact-item { display: flex; gap: 0.5rem; font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.5rem; }
.footer-bottom {
  padding-top: 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.footer-copyright { font-size: 0.8rem; color: var(--text-muted); }
/* Da telefono il footer, una colonna sotto l'altra, era alto 1366px su
   390: una schermata e mezza di link. Link Rapidi e Piani vanno affiancati
   (le voci piu' lunghe, "Ufficio Marketing", stanno in mezza riga), testo
   e contatti restano a tutta larghezza, e gli spazi scendono. */
@media (max-width: 768px) {
  .footer-social-link { padding: 1.25rem 1rem; }
  .footer .container { padding-top: 2.5rem; }
  .footer-grid {
    grid-template-columns: 1fr 1fr;
    gap: 2rem 1.5rem;
    padding-bottom: 2rem;
  }
  .footer-grid > :first-child,
  .footer-grid > :last-child { grid-column: 1 / -1; }
  .footer-col h5 { margin-bottom: 0.75rem; }
  .footer-col ul { gap: 0.6rem; }
  .footer-bottom { padding-top: 1.5rem; }
}

/* ===== Sections & Dividers ===== */
.section-header { margin-bottom: 3rem; }
.divider { width: 60px; height: 2px; background: var(--accent); margin: 1rem 0; }

/* ===== Back Link ===== */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 2rem;
  transition: var(--transition);
}
.back-link:hover { color: var(--accent); }

/* ===== Responsive ===== */
@media (max-width: 1024px) {
  .grid-4, .team-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .cs-detail-meta { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: repeat(2, 1fr); }
  .about-grid { gap: 3rem; }
  .contact-info-grid { grid-template-columns: 1fr; }
}

@media (max-width: 768px) {
  .nav-links, .nav-cta { display: none; }
  .hamburger { display: flex; gap: 6px; }
  h1 { font-size: clamp(3rem, 12vw, 6rem); }
  .hero h1 { font-size: clamp(4rem, 16vw, 8rem); }
  .hs-line--title { font-size: clamp(2.4rem, 13vw, 6rem); }
  .hero-content { padding: 0 1.5rem; }
  .hero-label { display: none; }
  .hero-scroll-cli { display: flex; }
  .grid-2, .grid-3, .cs-grid, .blog-grid, .form-grid { grid-template-columns: 1fr; }
  .cs-card:first-child { aspect-ratio: 16/9; }
  .about-grid { grid-template-columns: 1fr; }
  .team-detail-grid { grid-template-columns: 1fr; }
  .team-grid { grid-template-columns: repeat(2, 1fr); }
  .process-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; text-align: center; }
  .stats-row { flex-wrap: wrap; gap: 1.5rem; }
  .cs-detail-meta { grid-template-columns: repeat(2, 1fr); }
  .service-feature-list { grid-template-columns: 1fr; }
  .section { padding: 4rem 0; }
  .career-card { flex-direction: column; align-items: flex-start; }
  .tcard { grid-template-columns: 1fr; top: 72px; margin-bottom: 1rem; }
  .tcard--review { grid-template-columns: 1fr; }
  .tcard-rev-author { border-left: none; border-top: 1px solid var(--border); padding: 1.5rem 2rem; }
  .section-light .tcard-rev-author { border-top-color: rgba(33,33,33,0.1); }
}

@media (max-width: 480px) {
  .team-grid { grid-template-columns: 1fr; }
  .blog-grid { grid-template-columns: 1fr; }
  .container { padding: 0 1.25rem; }
  /* pari al padding del contenitore: da telefono la fascia bianca arriva
     esattamente ai bordi dello schermo invece di fermarsi a meta */
  .service-item::before { inset: 0 -1.25rem; }
  .form-section { padding: 1.5rem; }
  .hs-line--title { font-size: clamp(2rem, 14vw, 3.5rem); }
  .hero-content { padding: 0 1.25rem; }
}

/* ===== Nav scrolled state ===== */
.nav.scrolled {
  background: rgba(13, 13, 13, 0.98);
  box-shadow: 0 1px 20px rgba(0,0,0,0.4);
}

/* ===== Page Load =====
   Il velo d'ingresso NON sta sull'opacita del body. Su iOS un body con
   opacita animata diventa un livello composito, e i figli
   `position: fixed` vengono disegnati nel posto sbagliato: prima la nav
   finiva nella status bar, poi lo statement pinnato si e trovato addosso
   il diagramma della Regia. Solo a volte, perche arrivando da un'altra
   pagina `html.nx-arrived` spegne la transizione e il livello non nasce.

   Nota per chi legge il rect: il difetto non si vede in
   getBoundingClientRect, che resta corretto. Sbaglia il compositore, non
   il layout — si vede solo in uno scatto.

   Lo stesso ingresso lo fa un velo `position: fixed`, che non e antenato
   di niente. Era gia cosi dal commit 364c2a8; il revert 4a8a974
   dell'header se l'e portato via insieme al resto, e la sovrapposizione
   e tornata. Se ricapita di revertare quel giro, questo pezzo va
   rimesso. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  background: var(--bg);
  z-index: 9998;
  pointer-events: none;
  opacity: 1;
}
body.page-ready::before {
  opacity: 0;
  transition: opacity 0.4s ease;
}

/* ===== Preloader ===== */
#preloader {
  position: fixed;
  inset: 0;
  background: #0a0a0a;
  z-index: 99999;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-end;
  padding: 2rem clamp(1.5rem, 4vw, 3rem) 3rem;
}
#preloader.exit {
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.85s cubic-bezier(0.76, 0, 0.24, 1);
}
#preloader-inner { display: flex; flex-direction: column; gap: 0.25rem; }
#preloader-label {
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--text-muted);
}
#preloader-num {
  font-family: var(--font-heading);
  font-size: clamp(6rem, 20vw, 16rem);
  /* Il colore lo cambia il JS a ogni fotogramma, ma il primo lo dipinge il
     CSS: con var(--text) il contatore nasceva bianco e virava al rosa un
     istante dopo. Qui parte gia' dal primo colore della scala. */
  color: var(--logo-pink);
  line-height: 1;
  letter-spacing: -0.02em;
  /* Le cifre restano nascoste finche' Bebas non e' arrivato (~300ms): il
     "00" del markup, grande mezzo schermo, si vedeva prima nel font di
     ripiego e poi saltare in quello giusto. */
  visibility: hidden;
}
#preloader.avviato #preloader-num { visibility: visible; }
#preloader-bar {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 2px;
  background: var(--accent);
  width: 0%;
  transition: width 0.06s linear;
}

/* ===== Scroll Reveal ===== */
/* Spring easing: fast out, slight overshoot feel */
:root {
  --spring: cubic-bezier(0.16, 1, 0.3, 1);
  --spring-bounce: cubic-bezier(0.34, 1.56, 0.64, 1);
}

.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 0.75s var(--spring),
              transform 0.75s var(--spring);
}
.reveal.reveal-up-far {
  transform: translateY(60px);
}
.reveal.reveal-down {
  transform: translateY(-40px);
}
.reveal.reveal-left {
  transform: translateX(-40px);
}
.reveal.reveal-right {
  transform: translateX(40px);
}
.reveal.reveal-scale-sm {
  transform: scale(0.95);
  opacity: 0;
}
.reveal.reveal-scale-big {
  /* Matches Framer's video scale(0.4) reveal */
  transform: scale(0.4);
  opacity: 0;
  transition: opacity 1s var(--spring),
              transform 1s var(--spring);
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: 0.08s; }
.reveal-delay-2 { transition-delay: 0.16s; }
.reveal-delay-3 { transition-delay: 0.24s; }
.reveal-delay-4 { transition-delay: 0.32s; }
.reveal-delay-5 { transition-delay: 0.4s; }

/* ===== Text Mask Reveal (Framer-style) ===== */
/* Wrapper: overflow:hidden clips the text below the baseline */
.line-mask {
  display: block;
  overflow: hidden;
  /* slight padding so descenders aren't clipped; on top it keeps the
     accent of capital letters (the È of "È riuscire"), which Bebas
     draws above the 0.92 line-height */
  padding: 0.2em 0 0.08em;
  margin: -0.2em 0 -0.08em;
}
/* Inner text starts below the mask, slides up into view */
.line-inner {
  display: block;
  transform: translateY(105%);
  transition: transform 0.9s var(--spring);
  will-change: transform;
}
.line-mask.visible .line-inner {
  transform: translateY(0);
}
/* Stagger delays for multi-line headings */
.line-mask:nth-child(2) .line-inner { transition-delay: 0.1s; }
.line-mask:nth-child(3) .line-inner { transition-delay: 0.2s; }
.line-mask:nth-child(4) .line-inner { transition-delay: 0.3s; }

/* Hero entrance handled by GSAP after preloader */

/* ===== Featured Creations – Scroll Reveal ===== */
.cs-reveal-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
.cs-reveal-grid .cs-card:first-child {
  grid-column: 1 / -1;
  height: 560px;
  aspect-ratio: unset;
}
.cs-reveal-grid .cs-card {
  height: 400px;
  aspect-ratio: unset;
  transform: translateY(28px);
  transition: transform 1s cubic-bezier(0.16, 1, 0.3, 1);
}
.cs-reveal-grid .cs-card.revealed { transform: translateY(0); }

/* wipe-reveal cover — lifts from bottom to top */
.cs-reveal-grid .cs-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--bg);
  z-index: 5;
  transform-origin: bottom;
  transform: scaleY(1);
  transition: transform 1s cubic-bezier(0.77, 0, 0.175, 1);
}
.cs-reveal-grid .cs-card.revealed::before { transform: scaleY(0); }

/* stagger right-column cards */
.cs-reveal-grid .cs-card:nth-child(3),
.cs-reveal-grid .cs-card:nth-child(5) { transition-delay: 0.2s; }
.cs-reveal-grid .cs-card:nth-child(3)::before,
.cs-reveal-grid .cs-card:nth-child(5)::before { transition-delay: 0.2s; }

/* ghost project number */
.cs-num {
  position: absolute;
  top: 0.4rem;
  right: 1rem;
  font-family: var(--font-heading);
  font-size: clamp(5rem, 10vw, 9rem);
  color: rgba(255,255,255,0.055);
  line-height: 1;
  z-index: 2;
  pointer-events: none;
  user-select: none;
  letter-spacing: -0.02em;
}

/* gold accent line that sweeps in */
.cs-reveal-grid .cs-info::before {
  content: '';
  display: block;
  height: 2px;
  background: var(--accent);
  width: 0;
  margin-bottom: 1rem;
  transition: width 0.7s cubic-bezier(0.16, 1, 0.3, 1) 0.55s;
}
.cs-reveal-grid .cs-card.revealed .cs-info::before { width: 48px; }

/* parallax wrapper injected by JS — oversized so image never shows edges */
.cs-parallax-wrap {
  position: absolute;
  inset: -24px;
  will-change: transform;
  z-index: 0;
}
.cs-parallax-wrap .cs-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.cs-reveal-grid .cs-card:hover .cs-parallax-wrap .cs-img { transform: scale(1.04); }

@media (max-width: 768px) {
  .cs-reveal-grid { grid-template-columns: 1fr; }
  .cs-reveal-grid .cs-card:first-child { height: 300px; }
  .cs-reveal-grid .cs-card { height: 260px; }
  .cs-reveal-grid .cs-card:nth-child(3),
  .cs-reveal-grid .cs-card:nth-child(5) { transition-delay: 0s; }
  .cs-reveal-grid .cs-card:nth-child(3)::before,
  .cs-reveal-grid .cs-card:nth-child(5)::before { transition-delay: 0s; }
}

/* ===== Featured Creations – Single Column ===== */
.cs-featured-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 4rem;
}
.cs-featured-title {
  font-family: var(--font-heading);
  font-size: clamp(3.5rem, 7vw, 6.5rem);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 0.88;
  color: var(--text);
  margin: 0;
  letter-spacing: -0.02em;
}
.cs-featured-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.8rem 1rem 0.8rem 1.5rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
  transition: background 0.3s, border-color 0.3s;
  flex-shrink: 0;
  align-self: flex-end;
}
.cs-featured-btn:hover { background: rgba(255, 255, 255, 0.07); border-color: rgba(255, 255, 255, 0.4); }
.cs-btn-plus {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 300;
  line-height: 1;
}

.cs-featured-list {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.cs-feat-entry {
  display: block;
  text-decoration: none;
  position: sticky;
  top: 88px;
  margin-bottom: 1.5rem;
  background: var(--bg);
}
.cs-feat-entry:nth-child(1) { z-index: 1; }
.cs-feat-entry:nth-child(2) { z-index: 2; }
.cs-feat-entry:nth-child(3) { z-index: 3; }
.cs-feat-entry:nth-child(4) { z-index: 4; }
.cs-feat-entry:nth-child(5) { z-index: 5; }
.cs-feat-entry:nth-child(6) { z-index: 6; }

.cs-feat-img-box {
  position: relative;
  width: 100%;
  height: 440px;
  border-radius: var(--radius-md);
  overflow: hidden;
}
.cs-feat-img-box .cs-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease, filter 0.6s ease;
}
.cs-feat-entry:hover .cs-feat-img-box .cs-img {
  transform: scale(1.15);
  filter: blur(8px);
}

/* centered logo overlay */
.cs-feat-center-logo {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  pointer-events: none;
}
/* La foto di Smart Gain e l'unica 1,5:1 fra gli sfondi dei casi (gli altri
   sono 1,76:1) e ha il soggetto in alto: la testa comincia al 13% dell'altezza.
   Nel riquadro della home, che e 2,76:1, `cover` mostra solo il 54% centrale
   dell'immagine — da 22,8% a 77,2% — e la testa restava fuori. Spostando il
   punto di ancoraggio al 20% la finestra sale a 9,1%-63,4% e il viso ci sta.
   La regola sta qui perche style.css lo caricano sia la home sia il portfolio,
   e cosi vale in tutti i contenitori senza toccare il markup generato dal CMS. */
/* Il file ora e il taglio orizzontale in WebP: il selettore va sul nome
   nuovo, e l'attributo src resta quello anche quando il browser sceglie
   l'AVIF dal <picture>. L'inquadratura e la stessa (il sorgente era gia
   3:2), quindi la correzione serve ancora. */
img[src$="sg-cover-w.webp"] { object-position: 50% 20%; }

.cs-center-logo {
  height: 36px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: 0.9;
}
.cs-center-logo.cs-logo-company {
  /* I loghi dei clienti vanno da 1,57:1 (Ohana, impilato) a 4,5:1
     (Luxforsale). Con la sola larghezza Ohana rendeva 240x153 contro i 62-80
     degli altri. Si limitano tutte e due le dimensioni e il rapporto fa il
     resto: con `width: 55%` il tetto in altezza schiacciava l'immagine invece
     di rimpicciolirla, perche una larghezza esplicita non cede. */
  width: auto;
  height: auto;
  max-width: min(55%, 240px);
  max-height: 80px;
  filter: drop-shadow(0 2px 12px rgba(0,0,0,0.8));
  opacity: 0.92;
}
.cs-center-logo.cs-logo-white {
  filter: brightness(0) invert(1) drop-shadow(0 2px 12px rgba(0,0,0,0.8));
}
.cs-center-logo-txt {
  display: block;
  text-align: center;
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  line-height: 1.35;
  opacity: 0.92;
  text-shadow: 0 2px 12px rgba(0,0,0,0.55);
}

/* meta row below card */
.cs-feat-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 0;
  border-bottom: 1px solid var(--border);
}
.cs-feat-name {
  font-family: var(--font-heading);
  font-size: clamp(1.3rem, 2.5vw, 2rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--text);
  letter-spacing: -0.01em;
  line-height: 1;
}
.cs-feat-year { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.35rem; }
/* Da quanto tempo il cliente e' con noi. L'anno del progetto sopra e'
   stato tolto su richiesta: resta solo questa riga, e prende lo stacco
   che aveva l'anno sotto il nome. I casi in home sono in ordine di questo
   anno, dal piu' vecchio. */
.cs-feat-since {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  margin-top: 0.35rem;
}
.cs-feat-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--text-muted);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: border-color 0.3s, color 0.3s, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.cs-feat-entry:hover .cs-feat-arrow {
  border-color: var(--accent);
  color: var(--accent);
  transform: rotate(-45deg);
}

/* parallax wrap compatibility */
.cs-feat-img-box .cs-parallax-wrap {
  position: absolute;
  inset: -24px;
  will-change: transform;
  z-index: 0;
}
.cs-feat-img-box .cs-parallax-wrap .cs-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.6s ease;
}
.cs-feat-entry:hover .cs-feat-img-box .cs-parallax-wrap .cs-img { transform: scale(1.04); }

@media (max-width: 768px) {
  .cs-feat-img-box { height: 280px; }
  .cs-featured-title { font-size: clamp(2.8rem, 12vw, 4rem); }
  /* Il tasto scende sotto le schede: in cima chiedeva di andarsene prima
     ancora di aver visto qualcosa. Il tasto pero' sta dentro la testata,
     quindi da solo `order` non lo porterebbe fuori da li': `display:
     contents` scioglie la testata e i suoi due figli diventano figli del
     contenitore, dove l'ordine vale. Il margine della testata se ne va
     con la sua scatola, quindi passa al titolo. */
  .casi-section .container { display: flex; flex-direction: column; }
  .cs-featured-header { display: contents; }
  .cs-featured-title { order: 1; margin-bottom: 2.5rem; }
  .cs-featured-list { order: 2; }
  /* Solo il tasto della testata: `display: contents` toglie la scatola,
     non l'elemento, quindi l'antenato resta buono per mirarlo — e il
     "Parliamone" della chiusura, che porta la stessa classe, non si trova
     addosso un ordine e un margine che non sono suoi. */
  .cs-featured-header .cs-featured-btn {
    order: 3;
    align-self: stretch;
    justify-content: center;
    margin-top: 2.5rem;
  }
}

/* ===== FAQ smooth animation ===== */
.faq-answer {
  display: block;
  max-height: 0;
  overflow: hidden;
  padding-bottom: 0;
  opacity: 0;
  transition: max-height 0.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.3s ease,
              padding-bottom 0.3s ease;
}
.faq-item.open .faq-answer {
  max-height: 400px;
  opacity: 1;
  padding-bottom: 1.5rem;
}

/* ===== Cursor Glow ===== */
.cursor-glow {
  position: fixed;
  top: 0; left: 0;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(0,174,239,0.06) 0%, transparent 70%);
  pointer-events: none;
  z-index: 9999;
  transform: translate3d(0, 0, 0) translate(-50%, -50%);
  will-change: transform;
}

/* ===== Hover line animation for nav links ===== */
.nav-links a:not(.btn) {
  position: relative;
}

/* ===== Marquee pause on hover ===== */
.logos-section:hover .logos-track { animation-play-state: paused; }

/* ===== Statement Pin Section ===== */
.statement-section {
  background: var(--bg);
}
.statement-pin {
  display: flex;
  align-items: center;
  /* svh e non vh: su iOS 100vh e' il viewport a barra ritirata, quindi il
     blocco e' piu' alto di quello che si vede e il pin chiude piu' tardi
     della sezione. Il fallback in vh resta per chi non ha svh. */
  min-height: 100vh;
  min-height: 100svh;
  padding: 4rem 0;
}
.statement-text {
  display: block;
}
.statement-line {
  display: block;
  font-family: var(--font-heading);
  /* Il tetto sta a 9rem perche la riga piu lunga ("senza una regia") ci
     entra nel container da 1216px. Una riga da ~26 caratteri a 144px non ci
     starebbe: andrebbe a capo dentro .statement-line e `overflow: hidden`
     taglierebbe il secondo rigo. Se il copy si allunga, va abbassato. */
  font-size: clamp(3.5rem, 8vw, 9rem);
  line-height: 1.05;
  overflow: hidden;
  padding-top: 0.4em;
  margin-top: -0.4em;
  padding-bottom: 0.1em;
  margin-bottom: -0.1em;
}
.statement-inner {
  display: block;
  font-style: normal;
  color: var(--text);
  transform: translateY(160%);
  will-change: transform;
}
.statement-line--stroke .statement-inner {
  -webkit-text-stroke: 2px var(--text);
  color: transparent;
}
/* Variante sticky (n-exit): la sezione e alta quanto la corsa e il palco
   resta fermo in cima mentre le righe salgono. La frase ha quattro righe e
   la piu lunga fa 17 battute contro le 15 di "senza una regia": il corpo
   scende in proporzione, e nowrap fa si che una riga troppo lunga sbordi
   (visibile) invece di andare a capo dentro overflow hidden (tagliata). */
.statement-section--sticky {
  background: var(--bg-card);
  position: relative;
  height: 260vh;
  height: 260svh;
}
.statement-section--sticky .statement-pin {
  position: sticky;
  top: 0;
  height: 100vh;
  height: 100svh;
  min-height: 0;
}
.statement-section--sticky .statement-line {
  /* 12.5vw: la riga piu lunga ("qualcuno le porta") misura ~6.1 volte il
     corpo, e a 320px restano 280px utili. 17vh: quattro righe piu il
     padding del palco devono stare anche su un portatile basso. */
  font-size: clamp(2.5rem, min(12.5vw, 17vh), 8rem);
  white-space: nowrap;
}
@media (prefers-reduced-motion: reduce) {
  .statement-section--sticky { height: auto; }
  .statement-section--sticky .statement-pin { position: static; }
  .statement-section--sticky .statement-inner { transform: none; }
}

/* ===== Valori Section ===== */
.valori-section {
  background: var(--bg-card);
  overflow: hidden;
  padding-top: 0;
}

.valori-ticker-wrap {
  border-bottom: 1px solid var(--border);
  padding: 1.5rem 0;
  text-align: center;
}
.valori-ticker-item {
  font-family: var(--font-heading);
  font-size: clamp(2.5rem, 4.5vw, 4rem);
  letter-spacing: 0.04em;
  color: var(--text);
}

.valori-cards {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1.25rem;
}
.vcard {
  grid-column: span 2;
  position: relative;
  background: #ffffff;
  border-radius: 12px;
  padding: 2rem;
  overflow: hidden;
  cursor: default;
  display: flex;
  flex-direction: column;
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}
.vcard:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.35);
}
.vcard:nth-child(4) { grid-column: 2 / span 2; }
.vcard:nth-child(5) { grid-column: 4 / span 2; }

.vcard-inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.vcard-head {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin-bottom: 0.9rem;
}
.vcard-num {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(33, 33, 33, 0.35);
  flex-shrink: 0;
}
.vcard-name {
  font-size: 1.3rem;
  font-weight: 700;
  color: #212121;
  line-height: 1.2;
  margin: 0;
}
.vcard-desc {
  font-size: 0.875rem;
  color: rgba(33, 33, 33, 0.62);
  line-height: 1.7;
  margin: 0 0 1.5rem 0;
  flex: 1;
}
.vcard-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.vcard-tag {
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(33, 33, 33, 0.6);
  border: 1px solid rgba(33, 33, 33, 0.15);
  border-radius: 100px;
  padding: 0.25rem 0.7rem;
  letter-spacing: 0.02em;
  transition: border-color 0.3s ease, color 0.3s ease;
}

/* Conic spotlight hover effect */
.vcard-spotlight {
  position: absolute;
  width: 200%;
  height: 200%;
  top: -50%;
  left: -50%;
  opacity: 0;
  pointer-events: none;
  background: conic-gradient(
    from 0deg at 50% 50%,
    rgba(0, 174, 239, 0.0) 0deg,
    rgba(0, 174, 239, 0.18) 36deg,
    rgba(0, 174, 239, 0.0) 80deg,
    rgba(0, 174, 239, 0.0) 220deg,
    rgba(0, 174, 239, 0.12) 266deg,
    rgba(0, 174, 239, 0.0) 310deg,
    rgba(0, 174, 239, 0.0) 360deg
  );
  transition: opacity 0.5s ease;
}
.vcard:hover .vcard-spotlight {
  opacity: 1;
  animation: valori-spotlight-spin 5s linear infinite;
}
@keyframes valori-spotlight-spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.vcard:hover .vcard-tag {
  border-color: rgba(33, 33, 33, 0.22);
}

@media (max-width: 900px) {
  .valori-cards {
    grid-template-columns: repeat(2, 1fr);
  }
  .vcard,
  .vcard:nth-child(4),
  .vcard:nth-child(5) {
    grid-column: span 1;
  }
}
@media (max-width: 540px) {
  .valori-cards {
    grid-template-columns: 1fr;
  }
  .valori-ticker-item { font-size: 2.2rem; }
}

/* ===== Framer-style Nav Override ===== */

/* Transparent base, dark on scroll */
.nav {
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: none;
  padding-top: env(safe-area-inset-top, 0px);
}
/* Sopra il video la barra e' trasparente e le voci ci si perdono dentro:
   con lo sfondo chiaro e mosso "Casi" e "Pensiero" sfarfallano. Una velatura
   che sfuma verso il basso le tiene leggibili senza rimettere una superficie
   piena. Sparisce quando la barra si compatta e prende il suo fondo. */
.nav::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 190%;
  background: linear-gradient(to bottom,
    rgba(0, 0, 0, 0.62) 0%,
    rgba(0, 0, 0, 0.34) 45%,
    rgba(0, 0, 0, 0) 100%);
  pointer-events: none;
  z-index: -1;
  transition: opacity 0.4s ease;
}
.nav.scrolled::before { opacity: 0; }

.nav.scrolled {
  background: rgba(13, 13, 13, 0.88);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.06);
  box-shadow: none;
}

/* Desktop: center nav-links + show hamburger */
@media (min-width: 769px) {
  .nav-inner {
    position: relative;
  }
  /* La riga non appartiene piu' al solo registro: attraversa tutta la barra
     e diventa la struttura su cui poggia anche il logo. Va da un capo
     all'altro del contenitore, a filo del logo e dei tratti. */
  .nav-inner::after {
    content: '';
    position: absolute;
    left: 2rem;
    right: 2rem;
    bottom: 8px;
    height: 1px;
    background: rgba(255, 255, 255, 0.22);
  }
  /* Il logo scendeva su un asse suo: ora ha l'altezza e il piede della voce,
     cosi appoggia sulla stessa riga invece di galleggiarci sopra. */
  .nav-logo {
    align-items: flex-end;
    height: 55px;
    padding-bottom: 0.55rem;
  }
  /* L'hamburger non e' un satellite del registro: ci si appoggia sopra.
     Stessa altezza della voce, stesso piede, e il filo sotto prosegue anche
     sotto i tratti, cosi la base e' una sola per tutto il blocco a destra.
     I tratti crescono a 32px per reggere il confronto con le voci da 15px.
     margin-right -8px: la meta' dei 16px di guardia dentro il bottone, cosi
     i tratti finiscono esattamente a filo del logo dall'altra parte. */
  .hamburger {
    display: flex;
    width: 48px;
    height: 55px;
    padding-bottom: 0.55rem;
    justify-content: center;
    gap: 8px;
    margin-right: -8px;
  }
  .hamburger span { width: 32px; }
  .hamburger:hover span { background: var(--logo-pink); }
  /* Con gap 8px i centri stanno a 5px dall'asse, non a 4: la croce va
     ritarata o i due tratti non combaciano. */
  .hamburger.open span:nth-child(1) { transform: translateY(5px) rotate(45deg); }
  .hamburger.open span:nth-child(2) { transform: translateY(-5px) rotate(-45deg); }

  /* ── Ingresso ──
     Le animazioni hanno fill "backwards": lo stato di partenza esiste solo
     mentre girano. Se il JS non aggiunge mai .nav-in, la barra resta
     semplicemente visibile invece di sparire. */
  @keyframes nxRigaIn {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  @keyframes nxVoceIn {
    from { opacity: 0; transform: translateY(9px); }
    to   { opacity: 1; transform: none; }
  }
  @keyframes nxTrattoIn {
    from { transform: scaleX(0); }
    to   { transform: scaleX(1); }
  }
  /* Il freno: lo stesso stato di partenza delle animazioni, ma dal primo
     paint. Lo mette lo script nel <head> della home, lo toglie main.js
     nell'istante in cui aggiunge .nav-in — da li' in poi comandano le
     animazioni. Serve perche' `backwards` riempie solo mentre l'animazione
     gira: prima la barra si disegnava finita e all'ingresso ripartiva da
     zero, e sembrava caricata due volte (segnalazione utenti).
     Senza JS la classe non arriva mai e la barra resta visibile: la rete di
     sicurezza che il fill `backwards` dava da solo non si perde. */
  html.nx-nav-freno .nav .nav-logo,
  html.nx-nav-freno .nav .nav-links a:not(.btn) {
    opacity: 0;
  }
  html.nx-nav-freno .nav .nav-inner::after {
    transform-origin: left center;
    transform: scaleX(0);
  }
  html.nx-nav-freno .nav .hamburger span {
    transform-origin: right center;
    transform: scaleX(0);
  }

  .nav.nav-in .nav-inner::after {
    transform-origin: left center;
    animation: nxRigaIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
  .nav.nav-in .nav-logo,
  .nav.nav-in .nav-links a:not(.btn) {
    animation: nxVoceIn 0.62s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
  .nav.nav-in .nav-logo { animation-delay: 0.08s; }
  .nav.nav-in .nav-links a:not(.btn):nth-of-type(1) { animation-delay: 0.26s; }
  .nav.nav-in .nav-links a:not(.btn):nth-of-type(2) { animation-delay: 0.33s; }
  .nav.nav-in .nav-links a:not(.btn):nth-of-type(3) { animation-delay: 0.40s; }
  .nav.nav-in .nav-links a:not(.btn):nth-of-type(4) { animation-delay: 0.47s; }
  .nav.nav-in .nav-links a:not(.btn):nth-of-type(5) { animation-delay: 0.54s; }
  .nav.nav-in .nav-links a:not(.btn):nth-of-type(6) { animation-delay: 0.61s; }
  .nav.nav-in .hamburger span {
    transform-origin: right center;
    animation: nxTrattoIn 0.5s cubic-bezier(0.22, 1, 0.36, 1) backwards;
  }
  .nav.nav-in .hamburger span:nth-child(1) { animation-delay: 0.62s; }
  .nav.nav-in .hamburger span:nth-child(2) { animation-delay: 0.69s; }

  /* ── A pagina scorsa ──
     La barra si fa piu' sobria: i numeri si spengono quasi del tutto e la
     riga si assottiglia di tono. Nessuna misura cambia, quindi niente
     scatti di impaginazione. */
  .nav.scrolled .nav-links a:not(.btn)::after { color: rgba(255, 255, 255, 0.26); }
  .nav.scrolled .nav-inner::after { background: rgba(255, 255, 255, 0.12); }

  /* ===== Registro: numerino sopra la voce, una riga sotto il gruppo =====
     Il gruppo sta a destra, accostato all'hamburger. La riga orizzontale e'
     il bordo inferiore del contenitore, cosi corre sotto tutte le voci in una
     volta sola e non va ricucita voce per voce. */
  .nav-links {
    margin-left: auto;
    margin-right: 0;
    padding-right: 1.25rem;
    gap: 0;
    align-items: stretch;
    counter-reset: nxvoce;
  }

  /* La voce e' una colonna: numero sopra, etichetta sotto. Il separatore
     verticale e' il bordo sinistro, quindi si allunga da solo quanto la voce
     ed e' sempre alto uguale. */
  .nav-links a:not(.btn) {
    counter-increment: nxvoce;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.4rem;
    height: auto;
    padding: 0 1.4rem 0.55rem;
    border: 0;
    border-radius: 0;
    overflow: visible;
    font-size: 0.95rem;
    font-weight: 400;
    letter-spacing: 0.01em;
    text-transform: none;
    color: rgba(255, 255, 255, 0.92);
    white-space: nowrap;
    transition: color 0.3s ease, box-shadow 0.3s ease;
  }
  .nav-links a:not(.btn) + a:not(.btn) {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
  }
  .nav-links a:not(.btn):first-child { padding-left: 1rem; }
  .nav-links a:not(.btn):last-of-type { padding-right: 1.4rem; }

  /* Il numerino: `order:-1` lo manda sopra l'etichetta senza toccare
     l'ordine del markup. */
  .nav-links a:not(.btn)::after {
    display: block;
    order: -1;
    content: counter(nxvoce, decimal-leading-zero);
    position: static;
    font-size: 0.62rem;
    font-weight: 500;
    letter-spacing: 0.22em;
    color: rgba(255, 255, 255, 0.42);
    transition: color 0.3s ease;
  }

  .nav-links a:not(.btn):hover { color: #fff; }
  .nav-links a:not(.btn).active { color: #fff; }

  /* Un colore del marchio per voce: fucsia, verde, blu, giallo, nell'ordine
     del marchio e delle quattro voci. E' la stessa sequenza dei numeri di
     .service-item, e il menu a tendina la ripete voce per voce. Il colore e'
     della voce, non dello stato: la pagina corrente tiene il suo invece di
     virare al giallo, e a dire dove si e' restano il testo bianco e il segno
     sotto. */
  .nav-links a:not(.btn):nth-of-type(1):hover::after,
  .nav-links a:not(.btn):nth-of-type(1).active::after { color: var(--logo-pink); }
  .nav-links a:not(.btn):nth-of-type(2):hover::after,
  .nav-links a:not(.btn):nth-of-type(2).active::after { color: var(--logo-green); }
  .nav-links a:not(.btn):nth-of-type(3):hover::after,
  .nav-links a:not(.btn):nth-of-type(3).active::after { color: var(--logo-blue); }
  .nav-links a:not(.btn):nth-of-type(4):hover::after,
  .nav-links a:not(.btn):nth-of-type(4).active::after { color: var(--logo-yellow); }

  /* ── Il cursore ──
     Un segno solo che scorre da una voce all'altra invece di accendersi e
     spegnersi sotto ciascuna: e' il movimento che lega il registro. Sta
     fermo sotto la voce corrente e va a prendere quella sotto il mouse.
     Posizione e larghezza le detta il JS (nxCursore in main.js). */
  .nav-cursore {
    position: absolute;
    left: 0;
    bottom: -1px;
    width: 0;
    height: 2px;
    background: var(--logo-yellow);
    opacity: 0;
    pointer-events: none;
    transform: translateX(0);
    transition: transform 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                width 0.42s cubic-bezier(0.22, 1, 0.36, 1),
                background 0.3s ease,
                opacity 0.3s ease;
  }
  .nav-cursore.acceso { opacity: 1; }
  .nav-cursore.ospite { background: var(--logo-pink); }
  /* Il segno prende il colore della voce sotto il mouse. Il cursore e'
     l'ultimo figlio del gruppo, quindi lo si raggiunge dalla voce con il
     combinatore di fratelli: nessun colore da scrivere nel JS. */
  /* A riposo il segno sta sotto la voce corrente e ne prende il colore. */
  .nav-links a:not(.btn):nth-of-type(1).active ~ .nav-cursore { background: var(--logo-pink); }
  .nav-links a:not(.btn):nth-of-type(2).active ~ .nav-cursore { background: var(--logo-green); }
  .nav-links a:not(.btn):nth-of-type(3).active ~ .nav-cursore { background: var(--logo-blue); }
  .nav-links a:not(.btn):nth-of-type(4).active ~ .nav-cursore { background: var(--logo-yellow); }
  /* Sotto il mouse il segno si sposta e cambia colore. Queste righe stanno
     DOPO quelle della voce corrente e hanno la stessa specificita': vince
     l'ultima, quindi l'ospite batte il padrone di casa qualunque sia la
     posizione delle due voci. Con :not(.active) e l'ordine per posizione
     sarebbe stato il numero della voce a decidere, non il mouse. */
  .nav-links a:not(.btn):nth-of-type(1):hover ~ .nav-cursore { background: var(--logo-pink); }
  .nav-links a:not(.btn):nth-of-type(2):hover ~ .nav-cursore { background: var(--logo-green); }
  .nav-links a:not(.btn):nth-of-type(3):hover ~ .nav-cursore { background: var(--logo-blue); }
  .nav-links a:not(.btn):nth-of-type(4):hover ~ .nav-cursore { background: var(--logo-yellow); }

  /* Il cursore vive dentro il gruppo: il gruppo diventa il suo riferimento,
     e l'ultima voce va cercata per tipo, o il segno le ruberebbe il piede. */
  .nav-links { position: relative; }

  /* Il pulsante "Parliamo" vive dentro lo stesso gruppo ma non e' una voce
     del registro: resta una pillola, centrata sull'altezza delle altre. */
  .nav-links .nav-cta {
    align-self: center;
    margin-left: 1.25rem;
    margin-bottom: 0.2rem;
  }

  /* A pagina scorsa la barra si accende e prende il suo filo sotto: cadrebbe
     11px sotto quello del registro, due righe parallele che sembrano un
     errore di disegno. Sul desktop resta solo la riga del registro. */
  .nav.scrolled { border-bottom-color: transparent; }
}


/* Hamburger: 2 lines only */
.hamburger span:nth-child(3) { display: none; }
/* gap 6px + tratto 2px: i centri stanno a 4px dall'asse, quindi 4px di
   traslazione li fa combaciare esattamente. La rotazione viene dopo. */
.hamburger.open span:nth-child(1) { transform: translateY(4px) rotate(45deg); }
.hamburger.open span:nth-child(2) {
  opacity: 1;
  transform: translateY(-4px) rotate(-45deg);
}

/* ===== Full-screen Overlay Menu ===== */

.mobile-menu {
  display: flex !important;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  height: -webkit-fill-available;
  height: 100dvh; /* barra del browser inclusa: il footer resta visibile */
  background: #0d0d0d;
  z-index: 9999;
  flex-direction: column;
  /* nessun padding sul contenitore: lo gestiscono header, corpo e footer,
     cosi il footer resta incollato al fondo del viewport */
  padding: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.38s ease, visibility 0.38s ease;
}
.mobile-menu.open {
  visibility: visible;
  opacity: 1;
  pointer-events: all;
}

/* Overlay header: logo + close btn (injected via JS) */
.overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding: clamp(1.25rem, 2.5vh, 1.75rem) clamp(1.5rem, 4vw, 4rem);
  border-bottom: 1px solid var(--border);
}
.overlay-logo { display: flex; align-items: center; }
.overlay-logo-img { height: 40px; width: auto; display: block; }
.overlay-logo--text {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  letter-spacing: 0.06em;
  color: var(--text);
}
.overlay-close-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 1.1rem;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50px;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  transition: var(--transition);
}
.overlay-close-btn:hover {
  color: var(--text);
  border-color: rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.04);
}
/* la × disegnata con due tratti: allineata a qualsiasi dimensione di testo */
.overlay-close-x { position: relative; width: 12px; height: 12px; flex-shrink: 0; }
.overlay-close-x::before,
.overlay-close-x::after {
  content: "";
  position: absolute;
  top: 50%; left: 0;
  width: 100%; height: 1.5px;
  background: currentColor;
}
.overlay-close-x::before { transform: rotate(45deg); }
.overlay-close-x::after  { transform: rotate(-45deg); }

/* ── Corpo: voci a sinistra, immagine e recapiti a destra ── */
.overlay-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr);
  align-items: stretch;
  min-height: 0;
}
.overlay-header, .overlay-footer { flex: 0 0 auto; }
.overlay-nav {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(0.15rem, 0.8vh, 0.6rem);
  padding: clamp(2rem, 5vh, 4rem) clamp(1.5rem, 4vw, 4rem);
}
.overlay-row {
  display: flex;
  align-items: center;
  gap: clamp(0.9rem, 2vw, 1.6rem);
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.45s ease, transform 0.45s cubic-bezier(0.16, 1, 0.3, 1);
}
.mobile-menu.open .overlay-row { opacity: 1; transform: none; }
.overlay-num {
  flex-shrink: 0;
  width: 2ch;
  padding-top: 0.15em;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  transition: color var(--transition);
}
.overlay-link {
  font-family: var(--font-heading);
  font-size: clamp(2rem, 4.6vw, 4rem);
  line-height: 1.1;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--text);
  text-decoration: none;
  transition: color 0.25s ease, transform 0.25s ease;
}
@media (hover: hover) and (pointer: fine) {
  .overlay-row:hover .overlay-link { color: var(--accent); transform: translateX(8px); }
  .overlay-row:hover .overlay-num  { color: var(--accent); }
  /* un colore del marchio per voce */
  /* La prima riga e' Home, che nella nav in chiaro non c'e': dalla seconda
     in poi le due liste dicono lo stesso colore per la stessa voce, fucsia
     verde blu giallo. */
  .overlay-row:nth-child(1):hover .overlay-link,
  .overlay-row:nth-child(1):hover .overlay-num { color: var(--logo-blue); }
  .overlay-row:nth-child(2):hover .overlay-link,
  .overlay-row:nth-child(2):hover .overlay-num { color: var(--logo-pink); }
  .overlay-row:nth-child(3):hover .overlay-link,
  .overlay-row:nth-child(3):hover .overlay-num { color: var(--logo-green); }
  .overlay-row:nth-child(4):hover .overlay-link,
  .overlay-row:nth-child(4):hover .overlay-num { color: var(--logo-blue); }
  .overlay-row:nth-child(5):hover .overlay-link,
  .overlay-row:nth-child(5):hover .overlay-num { color: var(--logo-yellow); }
}

/* Da touch il feedback e sul tap: immediato e senza stato residuo. */
.overlay-link:active { color: var(--logo-pink); }
.overlay-row:active .overlay-num { color: var(--logo-pink); }

/* Pagina corrente: da mobile la nav in chiaro non c'e, il menu e l'unico
   punto in cui si legge dove si e. Il colore e' quello della voce, lo stesso
   che dice la nav in chiaro: la riga si accende del suo, non del giallo per
   tutte. La barretta segue con currentColor, cosi' il colore si scrive in un
   posto solo. */
.overlay-row--current .overlay-num::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 0.35em;
  background: currentColor;
}
.overlay-row--current:nth-child(1) .overlay-link,
.overlay-row--current:nth-child(1) .overlay-num { color: var(--logo-blue); }
.overlay-row--current:nth-child(2) .overlay-link,
.overlay-row--current:nth-child(2) .overlay-num { color: var(--logo-pink); }
.overlay-row--current:nth-child(3) .overlay-link,
.overlay-row--current:nth-child(3) .overlay-num { color: var(--logo-green); }
.overlay-row--current:nth-child(4) .overlay-link,
.overlay-row--current:nth-child(4) .overlay-num { color: var(--logo-blue); }
.overlay-row--current:nth-child(5) .overlay-link,
.overlay-row--current:nth-child(5) .overlay-num { color: var(--logo-yellow); }
/* comparsa scalata */
.mobile-menu.open .overlay-row:nth-child(1) { transition-delay: 0.06s; }
.mobile-menu.open .overlay-row:nth-child(2) { transition-delay: 0.12s; }
.mobile-menu.open .overlay-row:nth-child(3) { transition-delay: 0.18s; }
.mobile-menu.open .overlay-row:nth-child(4) { transition-delay: 0.24s; }
.mobile-menu.open .overlay-row:nth-child(5) { transition-delay: 0.30s; }
.mobile-menu.open .overlay-row:nth-child(6) { transition-delay: 0.36s; }
.mobile-menu.open .overlay-row:nth-child(7) { transition-delay: 0.42s; }
.mobile-menu.open .overlay-row:nth-child(8) { transition-delay: 0.48s; }

/* colonna destra: e una cella della griglia, non un absolute — non copre il testo */
.overlay-side {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  border-left: 1px solid var(--border);
  overflow: hidden;
}
.overlay-image {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  /* Era 0.22, e sopra ci passava un velo che partiva da 0.35: la foto
     restava un rettangolo nero piatto (mediana 12, max 15 su 255 —
     nessuna gamma tonale). Il tetto e il file: bghero.png e uno scatto
     notturno, al 100% e senza velo arriva a max 33. Qui ne resta la gran
     parte, e il velo scurisce solo la parte bassa. */
  opacity: 0.8;
}
/* Il velo scurisce solo dove servono i contatti: leggero in cima, pieno
   sotto. Cosi la foto si legge e il testo bianco resta a contrasto. */
.overlay-side::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg,
    rgba(13,13,13,0.06) 0%,
    rgba(13,13,13,0.24) 45%,
    rgba(13,13,13,0.90) 70%,
    rgba(13,13,13,0.96) 100%);
}
.overlay-contacts {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: clamp(1.5rem, 4vw, 3rem);
}
.overlay-contacts-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 0.5rem;
}
.overlay-contact {
  font-family: var(--font-heading);
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  letter-spacing: 0.02em;
  color: var(--text);
  text-decoration: none;
  transition: color var(--transition);
}
.overlay-contact:hover { color: var(--accent); }
.overlay-place { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.5rem; }

/* ── Footer ── */
.overlay-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem;
  padding: clamp(1rem, 2vh, 1.5rem) clamp(1.5rem, 4vw, 4rem);
  padding-bottom: max(clamp(1rem, 2vh, 1.5rem), env(safe-area-inset-bottom, 0px));
  border-top: 1px solid var(--border);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.overlay-social { display: flex; gap: 1.5rem; }
.overlay-social a { color: var(--text-muted); text-decoration: none; transition: color var(--transition); }
.overlay-social a:hover { color: var(--text); }

@media (max-width: 900px) {
  /* In colonna le due celle si spartivano l'altezza in parti uguali: tra
     l'ultima voce e i recapiti restava una fascia vuota di un terzo dello
     schermo. La colonna destra ora e alta quanto il suo contenuto e le voci
     si prendono il resto. */
  .overlay-body { grid-template-columns: 1fr; grid-template-rows: 1fr auto; }
  .overlay-side { border-left: none; border-top: 1px solid var(--border); }
  /* `overflow:hidden` azzera il minimo automatico della cella: su schermi
     bassi la griglia la schiacciava e i recapiti sparivano del tutto. */
  .overlay-side { min-height: min-content; }
  .overlay-image { opacity: 0.14; }
  .overlay-nav {
    justify-content: center;
    padding-top: clamp(1rem, 3vh, 2rem);
    padding-bottom: clamp(1.5rem, 3vh, 2.5rem);
  }
  .overlay-contacts { padding-top: clamp(1.25rem, 3vh, 2rem); }
}
@media (max-width: 600px) {
  .overlay-link { font-size: clamp(1.75rem, 8.5vw, 2.6rem); }
  .overlay-num { font-size: 0.62rem; }
  .overlay-logo-img { height: 32px; }
  .overlay-close-label { display: none; }
  /* 44x44 come l'hamburger: erano 40 e si sbagliava il tap sul bordo */
  .overlay-close-btn { padding: 0; width: 44px; height: 44px; justify-content: center; }
  .overlay-contacts-label { margin-bottom: 0.25rem; }
  .overlay-place { display: none; }
  .overlay-footer { font-size: 0.68rem; }
  .overlay-social { gap: 1rem; }

  /* La riga intera diventa bersaglio: prima si poteva toccare solo il testo,
     e sotto la x-height restava una fascia morta tra una voce e l'altra. */
  .overlay-nav { gap: 0; padding-top: 0.5rem; }
  .overlay-row {
    gap: 1rem;
    min-height: 56px;
    padding: 0.35rem 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  }
  .overlay-row:last-child { border-bottom: none; }
  .overlay-link { flex: 1; display: flex; align-items: center; min-height: 44px; }
  .overlay-num { align-self: center; padding-top: 0; }
  /* la tacca della pagina corrente sta a fianco del numero, non sotto:
     in riga singola una barra orizzontale sfondava l'allineamento */
  .overlay-row--current .overlay-num::after { margin-top: 0.3em; }
}

/* Notch e barre di sistema: header e footer dell'overlay ci finivano sotto */
.overlay-header { padding-top: max(clamp(1.25rem, 2.5vh, 1.75rem), env(safe-area-inset-top, 0px)); }

@media (prefers-reduced-motion: reduce) {
  .overlay-row { transition: none; transform: none; opacity: 1; }
  .mobile-menu { transition: opacity 0.01s linear, visibility 0.01s linear; }
  .nav .nav-logo, .nav .nav-links a, .nav .hamburger span,
  .nav-inner::after { animation: none !important; }
  .nav-cursore { transition: opacity 0.01s linear !important; }
  .hamburger span { transition: none; }
}
/* Telefoni piccoli in verticale: le voci si stringono quel tanto che basta
   a far entrare anche i recapiti, invece di mandare il menu a scorrere. */
@media (max-width: 600px) and (max-height: 700px) {
  .overlay-row { min-height: 48px; padding: 0.15rem 0; }
  .overlay-link { font-size: clamp(1.5rem, 7vw, 2.1rem); min-height: 40px; }
  .overlay-nav { padding-top: 0.25rem; padding-bottom: 0.5rem; }
  .overlay-contact { font-size: 1rem; }
  .overlay-contacts { gap: 0.2rem; padding-top: 1rem; padding-bottom: 1rem; }
}

/* schermi bassi in orizzontale: niente immagine, tutto compatto */
@media (max-height: 520px) {
  .overlay-side { display: none; }
  .overlay-body { grid-template-columns: 1fr; }
  .overlay-nav { justify-content: flex-start; padding-top: 1rem; padding-bottom: 1rem; }
  .overlay-link { font-size: clamp(1.4rem, 5vh, 2rem); }
  .overlay-footer { display: none; }
}

/* ===== Nav: sparisce scorrendo in giu ===== */
/* Vale a ogni larghezza: la nav e fixed e opaca, e nelle schede caso
   i metadati in cima finivano tagliati. Riappare scorrendo in su. */
/* Non si sposta: si dissolve. Su Safari iOS, con le barre del browser
   ritratte, la striscia della status bar non ritaglia il layer composito
   della nav: scivolando in su con translateY(-100%) veniva dipinta li
   dentro, col logo sopra l'orologio. Misurato sull'iPhone: viewport 733,
   nav a -73, logo a -59..-15, cioe 0..44 sullo schermo dentro i 59 della
   status bar. Sparendo in opacita non si sposta niente sopra il bordo del
   viewport, quindi non c'e niente da ritagliare. */
#nav {
  transition: opacity 0.34s ease,
              background 0.3s ease,
              box-shadow 0.3s ease;
}
body.nav-hidden #nav {
  opacity: 0;
  pointer-events: none;
  /* Su WebKit il backdrop-filter non segue l'opacita dell'elemento: a nav
     invisibile restava una sfumatura lattiginosa in cima, evidente sopra
     le sezioni chiare. Va spento insieme all'opacita. */
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@media (prefers-reduced-motion: reduce) {
  #nav { transition: none; }
}

/* Su telefono la nav e piena, senza vetro. Safari iOS campiona i pixel
   della pagina per tingere la striscia della status bar: con la nav
   translucida (rgba .88 + blur) sopra una sezione chiara il bianco
   filtrava e la fascia si schiariva, col fantasma del logo dentro. */
@media (max-width: 768px) {
  .nav.scrolled {
    background: #0d0d0d;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }
}

/* Tappo della status bar (solo telefono). Su Safari iOS la fascia sopra
   il viewport prende il colore della prima riga di pixel della pagina:
   misurato sull'iPhone con una barra alta 6px, che ha tinto tutti i 59px
   della fascia. Sopra la nav sta un livello trasparente, quindi la fascia
   campionava il contenuto che scorre e sembrava che passasse sopra
   l'header. Questo tappo e l'ultimo livello dipinto, quindi vince lui.
   Dev'essere un elemento vero in fondo al body: provato come html::before
   e non funziona — resta dentro il viewport, come una riga di traverso a
   meta fascia. Costa zero px di layout. */
#nx-topcap { display: none; }
@media (max-width: 768px) {
  #nx-topcap {
    display: block;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 6px;
    background: #0d0d0d;
    z-index: 2147483647;
    pointer-events: none;
  }
}

/* ===== Nexit Brand Color Accents ===== */

/* 1. Preloader bar: logo rainbow */
#preloader-bar {
  background: linear-gradient(90deg, var(--logo-pink) 0%, var(--logo-blue) 40%, var(--logo-green) 70%, var(--logo-yellow) 100%);
}


/* 3. Section divider dot (callback to yellow "i" dot in logo) */
.divider {
  position: relative;
  overflow: visible;
}
.divider::after {
  content: '';
  position: absolute;
  right: -10px;
  top: 50%;
  transform: translateY(-50%);
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--logo-yellow);
}

/* 4. Service numbers: logo color rotation */
.service-item:nth-child(1) .service-num { color: var(--logo-pink); }
.service-item:nth-child(2) .service-num { color: var(--logo-green); }
.service-item:nth-child(3) .service-num { color: var(--logo-blue); }
.service-item:nth-child(4) .service-num { color: var(--logo-yellow); }
/* On hover (white bg fill) restore gold — higher specificity wins */
.service-item:nth-child(1):hover .service-num,
.service-item:nth-child(2):hover .service-num,
.service-item:nth-child(3):hover .service-num,
.service-item:nth-child(4):hover .service-num { color: var(--accent); }

/* 5. Stats row numbers: logo colors */
.stats-row .stat-item:nth-child(1) .stat-big { color: var(--logo-pink); }
.stats-row .stat-item:nth-child(2) .stat-big { color: var(--logo-blue); }
.stats-row .stat-item:nth-child(3) .stat-big { color: var(--logo-green); }
.stats-row .stat-item:nth-child(4) .stat-big { color: var(--logo-yellow); }

/* 6. Portfolio grid card accent sweep line: logo colors */
.cs-reveal-grid .cs-card:nth-child(1) .cs-info::before { background: var(--logo-pink); }
.cs-reveal-grid .cs-card:nth-child(2) .cs-info::before { background: var(--logo-green); }
.cs-reveal-grid .cs-card:nth-child(3) .cs-info::before { background: var(--logo-blue); }
.cs-reveal-grid .cs-card:nth-child(4) .cs-info::before { background: var(--logo-yellow); }
.cs-reveal-grid .cs-card:nth-child(5) .cs-info::before { background: var(--logo-pink); }

/* 7. Portfolio featured list arrow: logo color per entry on hover */
.cs-feat-entry:nth-child(1):hover .cs-feat-arrow { border-color: var(--logo-pink); color: var(--logo-pink); }
.cs-feat-entry:nth-child(2):hover .cs-feat-arrow { border-color: var(--logo-green); color: var(--logo-green); }
.cs-feat-entry:nth-child(3):hover .cs-feat-arrow { border-color: var(--logo-blue); color: var(--logo-blue); }
.cs-feat-entry:nth-child(4):hover .cs-feat-arrow { border-color: var(--logo-yellow); color: var(--logo-yellow); }
.cs-feat-entry:nth-child(5):hover .cs-feat-arrow { border-color: var(--logo-pink); color: var(--logo-pink); }

/* 8. Hero social icons: un colore del marchio per rete */
.hero-social::before { background: var(--logo-pink); }
.hero-social:hover { color: #ffffff; border-color: var(--logo-pink); }
.hero-social[href*="facebook"]::before  { background: var(--logo-pink); }
.hero-social[href*="instagram"]::before { background: var(--logo-green); }
.hero-social[href*="linkedin"]::before  { background: var(--logo-blue); }
.hero-social[href*="youtube"]::before   { background: var(--logo-yellow); }
.hero-social[href*="facebook"]:hover  { border-color: var(--logo-pink); }
.hero-social[href*="instagram"]:hover { border-color: var(--logo-green); }
.hero-social[href*="linkedin"]:hover  { border-color: var(--logo-blue); }
/* Come in fondo alla pagina: sul giallo il segno va scuro. */
.hero-social[href*="youtube"]:hover { color: #121212; border-color: var(--logo-yellow); }

/* 9. Process step arrows: logo color per step */
.process-step:nth-child(1)::after { color: var(--logo-pink); }
.process-step:nth-child(2)::after { color: var(--logo-green); }
.process-step:nth-child(3)::after { color: var(--logo-blue); }
.process-step:nth-child(4)::after { color: var(--logo-yellow); }

/* 10. Nav active: fill already handled by wipe-from-bottom ::before */


/* 11. Cursor glow: blue tint (matches primary accent) */
.cursor-glow {
  background: radial-gradient(circle, rgba(0, 174, 239, 0.06) 0%, transparent 70%);
}


/* ============================================================
   FONDAMENTA — Sezioni contenuto (Tensione, Regia, Metodo)
   ============================================================ */

/* ===== 02 La tensione — misure del design system ===== */
.tension-section {
  /* Era il grafite #202429 del design system, ma il palco della scena e
     sceso a #14161a per non far sbiancare la lastra: due valori diversi
     lasciavano uno scalino di fondo fra il titolo e la scena. Un solo
     valore per tutta la sezione. */
  background: #14161a;
  padding: 0;
  border-top: 1px solid var(--border);
}
.tension-wrap {
  padding: clamp(150px, 19vh, 250px) clamp(20px, 4vw, 80px) clamp(110px, 13vh, 190px);
}
.tension-meta {
  display: flex;
  /* Tolto l'occhiello a sinistra: il contatore resta nell'angolo destro
     dov'era, invece di scivolare sotto il titolo. */
  justify-content: flex-end;
  gap: 1.5rem;
}
.tension-count {
  margin: 0;
  font-size: 11px;
  line-height: 1;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55);
}
.tension-count { font-weight: 400; }

/* blocco testo allineato a destra, come nel test */
.tension-head {
  margin-left: auto;
  max-width: 940px;
  margin-top: clamp(40px, 6vw, 80px);
}
.tension-kicker {
  margin: 0 0 16px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
}
.tension-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(44px, 6.4vw, 104px);
  line-height: 0.92;
  letter-spacing: 0.01em;
  text-transform: none;
  color: #fff;
}
.tension-title span { color: rgba(255,255,255,0.55); }
.tension-lead {
  margin: 28px 0 0;
  max-width: 640px;
  font-size: clamp(16px, 1.4vw, 19px);
  line-height: 1.6;
  color: rgba(255,255,255,0.72);
  text-wrap: pretty;
}

.tension-item {
  display: grid;
  grid-template-columns: 16px 44px minmax(0, 1fr);
  gap: 14px 18px;
  /* Era `center`, con una riga sola per voce. Ora la terza colonna e un
     blocco alto: centrato, trattino e numero finivano a meta paragrafo. */
  align-items: start;
  padding: clamp(26px, 3.4vw, 38px) 0;
  border-top: 1px solid rgba(255,255,255,0.14);
}
/* Il trattino e il numero vanno allineati alla prima riga del nome, non
   al bordo della cella: mezzo carattere piu in basso. */
.tension-dash { margin-top: 0.62em; }
.tension-num { margin-top: -0.06em; }
.tension-item--last { border-bottom: 1px solid rgba(255,255,255,0.14); }
.tension-dash {
  width: 16px;
  height: 2px;
  background: var(--dash, var(--accent));
  align-self: center;
}
.tension-num {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(22px, 2.2vw, 30px);
  line-height: 1;
  letter-spacing: 0.02em;
  color: rgba(255,255,255,0.5);
}
.tension-name {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--dash, var(--accent));
}
/* La promessa del mestiere: un gradino sopra il corpo, per far vedere
   dove comincia ogni voce quando si scorre l'elenco. */
.tension-text {
  margin: 0;
  max-width: 640px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(24px, 3.2vw, 34px);
  line-height: 1.04;
  letter-spacing: 0.01em;
  color: #fff;
  text-wrap: pretty;
}
.tension-copy {
  margin: 14px 0 0;
  max-width: 640px;
  font-size: clamp(15px, 1.2vw, 16px);
  line-height: 1.65;
  color: rgba(255,255,255,0.7);
  text-wrap: pretty;
}
.tension-copy + .tension-copy { margin-top: 0.8em; }

/* Il tasto che apre il corpo esiste solo col JS: e' lui a mettere
   data-js sulla scheda. Senza script il corpo resta aperto e il tasto
   non si vede, cosi' non si offre un comando morto. */
.tension-more { display: none; }

/* ===== le schede dei mestieri ========================================
   Quattro schede in pagina, una sotto l'altra, uguali a ogni larghezza.
   Prima erano tre sezioni diverse che dicevano la stessa copia: la pila
   di cartelle sotto i 900 (ogni scheda incollata in alto, la successiva
   che le saliva sopra con 14px di linguetta), l'elenco fino a 1199 e la
   scena inchiodata sopra. Della pila resta la forma della scheda — la
   fascia di tinta in alto, il numero a sinistra, il corpo che si apre al
   tocco — perche' e' quella che si vede nella sezione oggi.
   Il corpo si apre al tocco e non sta aperto: le voci portano due o tre
   paragrafi e su un 390 arrivano a 872px. */
.tension-list {
  margin-top: clamp(28px, 5vw, 56px);
}
/* La corsa dopo l'ultima scheda serviva alla pila: teneva alla 04 lo
   spazio per restare incollata. Senza pila e' solo vuoto, e con lei se
   ne va anche il fondo accorciato della sezione, che era la contropartita
   di quel respiro: il padding torna quello della regola di apertura. */
.tension-list::after { display: none; }
.tension-item {
  /* Niente pila: le quattro schede stanno in pagina una sotto l'altra a
     ogni larghezza. Impilate, la sezione si leggeva in tre modi diversi
     — la pila sotto i 900, l'elenco fino a 1199, la scena sopra — e le
     tre cose dicevano la stessa copia.
     `relative` e non `static`: il tasto che copre la scheda e' assoluto
     e si ancora all'antenato posizionato. */
  position: relative;
  z-index: auto;
  /* Tiene insieme la misura e il testo della promessa, cosi' non possono
     divergere: la min-height della scheda chiusa si calcola da qui. */
  --say-fs: clamp(24px, 3.2vw, 34px);
  /* Col trattino via restano due colonne: il numero e il testo. */
  grid-template-columns: 40px minmax(0, 1fr);
  gap: 8px 14px;
  padding: clamp(16px, 4vw, 20px) clamp(16px, 4vw, 22px) clamp(18px, 4.6vw, 24px);
  background: #14161a;
  border: 1px solid rgba(255, 255, 255, 0.14);
  /* La fascia di tinta in alto: nata perche' impilando era la parte che
     restava scoperta piu' a lungo, resta perche' e' il segno che dice di
     quale mestiere si parla prima ancora di leggerlo. */
  border-top: 3px solid var(--dash, var(--accent));
}
/* Attaccate servivano alla pila: un vuoto nel flusso era una finestra su
   quello che stava dietro. In pagina si staccano, come sopra i 900. */
.tension-item + .tension-item { margin-top: 16px; }
/* Il filetto in fondo all'ultima serviva all'elenco, non alla pila. */
.tension-item--last { border-bottom: 1px solid rgba(255, 255, 255, 0.14); }
/* Ridondante: la tinta ora e' la fascia. */
.tension-dash { display: none; }
.tension-num { margin-top: 0; }
/* Spazio a destra per il segno, o il nome ci finisce sotto. */
.tension-say { padding-right: 26px; }
.tension-name { margin-bottom: 6px; }

/* Il comando e' la scheda intera, non un tasto in fondo.
   In fondo era il posto peggiore: la scheda incollata viene coperta dal
   basso da quella dopo, quindi il tasto spariva per primo e restava
   premibile solo sull'ultima scheda visibile (misurato: 01, 02 e 03
   sempre coperte). Per giunta la scheda si vedeva mozza, tagliata a
   meta' contenuto e senza comando: era questo a farla sembrare rotta.
   Ora il bersaglio copre tutta la scheda e il segno sta in alto a
   destra, nella parte che resta scoperta piu' a lungo. */
.tension-item[data-js] .tension-more {
  display: block;
  position: absolute;
  inset: 0;
  z-index: 1;
  margin: 0;
  padding: 0;
  background: none;
  border: 0;
  cursor: pointer;
  color: var(--dash, var(--accent));
  -webkit-tap-highlight-color: transparent;
}
/* Aperta, il bersaglio si ritira sulla testata: sotto c'e' il testo da
   leggere e da selezionare. */
.tension-item[data-open="true"] .tension-more { bottom: auto; height: 64px; }
.tension-item[data-js] .tension-more:focus-visible {
  outline: 2px solid var(--dash, var(--accent));
  outline-offset: -3px;
}
/* L'etichetta resta per chi legge con la voce. */
.tension-more-lab {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}
.tension-more-ic {
  position: absolute;
  top: clamp(17px, 4.2vw, 21px);
  right: clamp(15px, 4vw, 21px);
  width: 13px;
  height: 13px;
}
.tension-more-ic::before,
.tension-more-ic::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 1.5px;
  background: currentColor;
  transform: translateY(-50%);
  transition: transform 260ms cubic-bezier(0.35, 0, 0, 1);
}
/* Chiusa e' un piu', aperta le due aste si sovrappongono: un meno. */
.tension-item[data-open="false"] .tension-more-ic::after {
  transform: translateY(-50%) rotate(90deg);
}
.tension-item[data-open="false"] .tension-body { display: none; }
/* Quattro schede della stessa altezza, col contenuto centrato: e' la
   forma che avevano solo sopra i 900, e che ora vale a ogni larghezza.
   Il conto e' quello della scheda a due righe di promessa — due righe
   (1.04 di interlinea), l'occhiello col suo margine, i due padding. */
.tension-item[data-open="false"] {
  min-height: calc(var(--say-fs) * 2.08 + 26px
                   + clamp(34px, 2.8vw, 44px) + clamp(38px, 3.2vw, 50px));
  align-items: center;
}

/* La scheda aperta esce dalla pila. Incollata, il suo corpo resta
   dipinto dietro a quelle sopra e spunta nei 14px fra una e l'altra:
   righe di testo mozze in mezzo alla pila. E poi un corpo lungo
   inchiodato in cima non si legge — si vuole scorrerlo. Uscendo dalla
   pila scorre normale e le altre gli passano sopra.
   Il salto che questo causa lo ricuce nx-rail.js, che rimette il punto
   dov'era subito dopo.
   `relative` e non `static`: lo z-index vale solo sugli elementi
   posizionati, e da statica la scheda aperta finirebbe sotto quelle
   incollate prima di lei — che le coprirebbero il titolo.
   Si ferma tutta la pila, non solo la scheda aperta: bastava che una
   sola restasse incollata per coprire l'ultimo paragrafo di quella
   aperta (misurati 87px mangiati dalla 04 sulla 03). Con una scheda
   aperta si legge, non si sfoglia: l'elenco torna piano e la pila
   riprende alla chiusura. */
.tension-list[data-qualcuna-aperta] .tension-item { position: relative; }

/* Da 900px in su la pila resta la stessa, con le misure della colonna
   larga: la scheda respira di piu' e il numero sta in una colonna sua.
   La riga di testo non segue la larghezza della finestra — oltre le ~75
   battute si perde il capo riga —, quindi il corpo si ferma e la scheda
   no: e' la scheda a fare la pila, non il paragrafo. */
@media (min-width: 900px) {
  .tension-item {
    grid-template-columns: 72px minmax(0, 1fr);
    gap: 10px 24px;
    padding: clamp(34px, 2.8vw, 44px) clamp(28px, 2.8vw, 40px) clamp(38px, 3.2vw, 50px);
  }
  .tension-item[data-open="true"] .tension-more { height: 84px; }
  .tension-more-ic { top: 30px; right: 30px; width: 15px; height: 15px; }
  .tension-say { padding-right: 48px; }
  /* Il testo sta a sinistra: la testata smette di essere allineata a
     destra, e la pila la segue. Sotto i 1200 le due cose restano una
     sopra l'altra — una colonna da 38% di 1100 non regge un titolo a
     quel corpo. */
  .tension-head { margin-left: 0; }
  .tension-list { max-width: 1180px; }
  /* La promessa si ferma a 720: la piu' lunga ne chiede 749 su una riga,
     quindi a due righe ci va sempre, a ogni larghezza. Averla a una riga
     qui e a due la' voleva dire schede alte diverse, e la pila esce
     sfalsata. */
  .tension-text { max-width: 720px; font-size: var(--say-fs); }
  /* Schede alte uguali, --say-fs, stacco di 16px e corsa spenta stavano
     qui quando sotto i 900 c'era la pila: ora valgono a ogni larghezza e
     sono scesi alla regola base. La riserva sta sulla scheda e non sulla
     promessa perche' messa sul testo la riga in piu' restava tutta in
     fondo e la scheda si leggeva mozza (segnalato); sulla scheda, con il
     contenuto centrato, lo stesso vuoto si divide sopra e sotto. */
  /* Il fondo della sezione resta paddato. Da telefono la corsa della
     pila e' gia' respiro e il fondo era stato accorciato a 40-72; qui
     la corsa sta dentro la colonna delle schede, quindi sotto la riga
     di chiusura restavano 72px e la sezione chiara partiva addosso
     (segnalato con lo screenshot).
     Stessa cosa di lato: la sezione arrivava a 80px dal bordo dello
     schermo mentre tutte le altre stanno dentro .container — 1280 piu'
     2rem, che su un 1905 vuol dire 313px di margine. Da sola sembrava
     appoggiata ai bordi. Qui prende la stessa misura del resto del
     sito, cosi' scorrendo da una sezione all'altra il testo parte
     sempre dalla stessa colonna. Il fondo scuro resta a tutta
     larghezza: sta sulla sezione, non su questo blocco. */
  .tension-wrap {
    padding-bottom: clamp(96px, 12vh, 180px);
    padding-left: 2rem;
    padding-right: 2rem;
    max-width: calc(var(--max-width) + 4rem);
    margin-left: auto;
    margin-right: auto;
  }
  /* Col mouse il comando va dichiarato: da telefono la scheda si tocca e
     basta, qui prima il corpo era aperto e non c'era niente da scoprire.
     Il bersaglio e' tutta la scheda, quindi si accende tutta la scheda —
     il piu' da solo, a 1100px dall'occhio che legge, non si vede. Solo la
     scheda chiusa e solo con un puntatore vero: sul touch :hover resta
     appiccicato dopo il tocco. */
  @media (hover: hover) {
    .tension-item[data-js][data-open="false"]:hover {
      border-color: var(--dash, var(--accent));
      background: #181b20;
    }
    .tension-item[data-js][data-open="false"]:hover .tension-more-ic { opacity: 1; }
    .tension-more-ic { opacity: 0.72; transition: opacity 200ms ease; }
  }
}

/* ===== da 1200: il testo a sinistra sta fermo, la pila scorre a destra =
   Due colonne, 38 e 62. La testata (occhiello, titolo, lead) si incolla
   in alto e resta li' per tutta la corsa della pila: prima la meta'
   sinistra della sezione era vuota per mille pixel di scroll.
   La testata prende due righe della griglia, la pila e la chiusura:
   cosi' resta ferma fino in fondo alla sezione e non si sfila a meta'.
   Perche' lo sticky funzioni dentro la griglia serve `align-items:
   start` — stirata sull'area, la testata non avrebbe dove muoversi.
   Sotto i 1200 non si divide: 38% di 1100 fa una colonna da 400px, e il
   titolo a 70px di corpo non ci sta. */
@media (min-width: 1200px) {
  .tension-wrap {
    display: grid;
    /* 42/58. Col contenuto fermo a 1280 come il resto del sito la
       scheda arriva a ~700: il tetto a 880 non serve piu', e la colonna
       del testo si riprende quello che le mancava — a 38/62 il titolo
       stava in 414px e andava su quattro righe. */
    grid-template-columns: 42fr 58fr;
    column-gap: clamp(40px, 4vw, 72px);
    align-items: start;
  }
  /* Il contatore resta nell'angolo in alto a destra, sopra le colonne. */
  .tension-meta { grid-column: 1 / -1; }
  .tension-head {
    grid-column: 1;
    grid-row: 2 / span 2;
    position: sticky;
    top: 84px;
    max-width: none;
  }
  /* Il titolo scende di corpo: la colonna sta sui 507 e a 104px
     "TRASFORMARLI" sfonderebbe. Il tetto e' 48 e non 64 perche' la riga
     piu' lunga ("E RIUSCIRE A TRASFORMARLI") chiede circa 10,3 volte il
     corpo: a 64 va a capo da sola e il titolo diventa quattro righe
     invece di due. */
  .tension-title { font-size: clamp(38px, 3.4vw, 48px); }
  .tension-list {
    grid-column: 2;
    grid-row: 2;
    max-width: none;
    /* Allineata alla prima riga della testata, non 24px piu' su. */
    margin-top: clamp(40px, 6vw, 80px);
  }
  .tension-close { grid-column: 2; grid-row: 3; }
}

.tension-close {
  margin: clamp(32px, 4vw, 48px) 0 0;
  font-size: clamp(19px, 1.8vw, 24px);
  font-weight: 300;
  line-height: 1.5;
  color: rgba(255,255,255,0.85);
}

/* ===== 02 — la scena: la sezione trattiene lo scroll ================
   Da 1200 in su la 02 diventa un palco inchiodato: la domanda resta
   ferma a sinistra e a destra passa un mestiere per volta, uno solo.
   Sullo schermo ci sono due cose, non sei — la prova coi quattro tavoli
   che convergevano era troppo affollata.
   Non c'e' markup nuovo: i turni sono le stesse quattro schede che
   stanno in pagina quando la scena non si accende, e il palco esiste
   solo da acceso (prima e' display: contents). Cosi' la copia sta in
   pagina una volta sola, per chi legge, per chi ascolta e per Google.
   La classe nx-tens-live la mette nx-rail.js, e solo dopo aver
   misurato che il turno piu' alto ci sta nel palco: se non ci sta
   resta il layout in pagina, che e' gia' buono. */
.tension-stage { display: contents; }

@media (min-width: 1200px) {
  /* La pista: quanto scroll vale la scena. Tre schermate in tutto — il
     palco piu' quattro turni da 50svh, mezza schermata l'uno. Prima
     erano 68 (3,7 schermate): il gesto si legge uguale, la pagina si
     accorcia di 700px. Sotto i 50 la dissolvenza incrociata diventa
     piu' lunga del tratto in cui il turno sta fermo. */
  html.nx-tens-live .tension-list {
    height: calc(100svh + 200svh);
    margin-top: clamp(40px, 6vw, 80px);
  }
  html.nx-tens-live .tension-list::after { display: none; }

  html.nx-tens-live .tension-stage {
    display: block;
    position: sticky;
    /* 84 e' il filo sotto il nav, come la colonna di sinistra. */
    top: 84px;
    height: calc(100svh - 132px);
  }

  /* I turni stanno tutti nello stesso posto e si danno il cambio: il
     moto lo scrive lo script (solo transform e opacity). Niente
     aria-hidden sui turni spenti — e' la copia della sezione, la
     leggono gli screen reader tutta di seguito. */
  html.nx-tens-live .tension-item {
    position: absolute;
    inset: 0;
    margin: 0;
    padding: 0;
    min-height: 0;
    background: none;
    border: 0;
    box-shadow: none;
    display: flex;
    flex-direction: column;
    justify-content: center;
    opacity: 0;
    will-change: transform, opacity;
    /* I turni sono anche .reveal, che porta `transition: opacity .75s`:
       lasciata accesa, ogni fotogramma scritto dallo script verrebbe
       inseguito con 750ms di ritardo e la dissolvenza andrebbe per
       conto suo. Qui il tempo lo fa lo scroll. */
    transition: none;
  }
  /* Il corpo e' sempre aperto: il turno ha lo schermo tutto per se',
     non c'e' niente da nascondere dietro un comando. */
  html.nx-tens-live .tension-item .tension-body { display: block; }
  /* Il tasto va spento con la stessa forza con cui e' acceso: la regola
     che lo mostra e' `.tension-item[data-js] .tension-more`, quindi qui
     serve la scheda nel selettore, o resta un bersaglio invisibile alto
     quanto il palco — che falsa anche la misura del contenuto. */
  html.nx-tens-live .tension-item .tension-more,
  html.nx-tens-live .tension-item .tension-dash { display: none; }

  /* Il numero diventa la scenografia del turno. */
  html.nx-tens-live .tension-num {
    margin: 0 0 clamp(16px, 2vh, 28px);
    font-size: clamp(64px, 7vw, 104px);
    line-height: 0.82;
    color: var(--dash, var(--accent));
    opacity: 0.9;
  }
  html.nx-tens-live .tension-say { padding: 0; }
  html.nx-tens-live .tension-name {
    margin-bottom: clamp(10px, 1.4vh, 18px);
    font-size: 13px;
    letter-spacing: 0.1em;
  }
  html.nx-tens-live .tension-text {
    max-width: 18ch;
    font-size: clamp(38px, 3.9vw, 58px);
    line-height: 1.0;
  }
  html.nx-tens-live .tension-copy {
    margin-top: clamp(14px, 2vh, 24px);
    max-width: 58ch;
    font-size: clamp(14px, 1.05vw, 16px);
    line-height: 1.6;
  }

  /* La colonna di sinistra resta ferma per tutta la pista: e' gia'
     sticky, qui prende solo l'aria del palco. */
  html.nx-tens-live .tension-lead { margin-top: clamp(20px, 3vh, 32px); }

  /* ===== la bussola: dove sei, dentro la scena =====================
     La costruisce lo script (e' arredo della scena, non copia): quattro
     voci col nome del mestiere, la riga che avanza e il contatore. Le
     voci sono tasti veri, cosi' si salta a un turno anche da tastiera. */
  .tens-nav {
    margin-top: clamp(26px, 4vh, 48px);
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .tens-nav-item {
    display: grid;
    grid-template-columns: 26px 1fr;
    gap: 12px;
    align-items: center;
    padding: 9px 0;
    background: none;
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.12);
    text-align: left;
    cursor: pointer;
    color: rgba(255, 255, 255, 0.45);
    font: 500 12px/1.3 var(--font-body, inherit);
    letter-spacing: 0.06em;
    text-transform: uppercase;
    transition: color 260ms ease;
  }
  .tens-nav-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.12); }
  .tens-nav-item span:first-child { font-family: var(--font-heading); font-size: 15px; letter-spacing: 0.04em; }
  .tens-nav-item[data-on="true"] { color: #fff; }
  .tens-nav-item[data-on="true"] span:first-child { color: var(--c); }
  .tens-nav-item:hover { color: rgba(255, 255, 255, 0.8); }
  .tens-nav-item:focus-visible { outline: 2px solid var(--c); outline-offset: 2px; }
  .tens-bar {
    position: relative;
    height: 2px;
    margin-top: 18px;
    background: rgba(255, 255, 255, 0.12);
  }
  .tens-bar i {
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 100%;
    background: var(--c, var(--accent));
    transform-origin: 0 50%;
    transform: scaleX(0);
  }
  .tens-count {
    margin: 10px 0 0;
    font-size: 11px;
    letter-spacing: 0.1em;
    color: rgba(255, 255, 255, 0.5);
  }
}

/* ===== 03 Una sola regia ===== */
.regia-head {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: 4rem;
  align-items: end;
  margin-bottom: 4.5rem;
}
.regia-head-side p { max-width: 46ch; margin-bottom: 1.5rem; }

.regia-schema {
  --schema-line: rgba(33,33,33,0.18);
  border: 1px solid var(--schema-line);
  border-radius: var(--radius-md);
  padding: clamp(1.5rem, 4vw, 3rem);
  background: rgba(255,255,255,0.45);
}
.regia-planes {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}
.regia-plane {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  padding: 1.25rem 1.25rem 1.5rem;
  border: 1px solid var(--schema-line);
  border-top: 3px solid var(--plane, var(--accent));
  border-radius: var(--radius-sm);
  background: #fff;
  transition: var(--transition);
}
.regia-plane:hover { transform: translateY(-3px); box-shadow: 0 8px 24px rgba(0,0,0,0.07); }
.regia-plane-name {
  font-family: var(--font-heading);
  font-size: 1.25rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #212121;
}
.regia-plane-desc { font-size: 0.8rem; line-height: 1.4; color: rgba(33,33,33,0.6); }
/* connettore verticale sotto ogni piano */
.regia-plane::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.75rem;
  width: 1px;
  height: 1.75rem;
  background: var(--plane, var(--accent));
  opacity: 0.55;
}

.regia-bus {
  position: relative;
  margin: 1.75rem 0 0;
  height: 3.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-sm);
  background: #212121;
}
.regia-bus-label {
  font-family: var(--font-heading);
  font-size: 1.15rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #fff;
}
.regia-bus::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: -1.6rem;
  width: 1px;
  height: 1.6rem;
  background: rgba(33,33,33,0.35);
}

.regia-out {
  margin-top: 1.6rem;
  display: flex;
  justify-content: center;
}
.regia-out-label {
  display: inline-block;
  padding: 0.7rem 2.25rem;
  border: 1px solid #212121;
  border-radius: 50px;
  font-family: var(--font-heading);
  font-size: 1.15rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #212121;
}
.regia-fig {
  margin-top: 2rem;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(33,33,33,0.5);
  text-align: center;
}

/* variante su fondo scuro */
.regia-section:not(.section-light) .regia-schema { --schema-line: var(--border); background: rgba(255,255,255,0.02); }
.regia-section:not(.section-light) .regia-plane { background: var(--bg-card); }
.regia-section:not(.section-light) .regia-plane-name { color: var(--text); }
.regia-section:not(.section-light) .regia-plane-desc { color: var(--text-muted); }
.regia-section:not(.section-light) .regia-bus { background: var(--text); }
.regia-section:not(.section-light) .regia-bus-label { color: var(--bg); }
.regia-section:not(.section-light) .regia-bus::after { background: var(--border); }
.regia-section:not(.section-light) .regia-out-label { border-color: var(--text); color: var(--text); }
.regia-section:not(.section-light) .regia-fig { color: var(--text-muted); }

/* ===== 04 Metodo — process card su fondo chiaro ===== */
.metodo-section .section-header { margin-bottom: 3.5rem; }
.metodo-lead { margin-top: 1rem; }
.section-light .process-card {
  background: #fff;
  border-color: rgba(33,33,33,0.1);
}
.section-light .process-card h4 { color: #212121; }
.section-light .process-num { color: rgba(0,174,239,0.14); }
.process-card { display: flex; flex-direction: column; gap: 0.5rem; }
.process-card h4 { margin-bottom: 0; }
.process-card > p { margin-bottom: 0; }

/* ===== Responsive — sezioni contenuto ===== */
@media (max-width: 1024px) {
  .regia-head { grid-template-columns: 1fr; gap: 2rem; align-items: start; }
  .regia-planes { grid-template-columns: repeat(2, 1fr); gap: 1rem 1.5rem; }
  /* i connettori verticali non hanno senso con la griglia 2x2 */
  .regia-plane::after { display: none; }
  .regia-bus { margin-top: 2rem; }
}

@media (max-width: 768px) {
  /* Sotto i 768 il numero scende sopra il blocco invece di stare in una
     colonna sua: 44px di incolonnamento su uno schermo stretto li toglie
     al testo, che e la parte che si legge. */
  .tension-item { grid-template-columns: 16px minmax(0,1fr); gap: 10px 14px; }
  .tension-num { grid-column: 2; margin-bottom: -6px; margin-top: -0.12em; }
  .tension-say { grid-column: 2; }
  .tension-dash { margin-top: 0.5em; }
  .regia-head { margin-bottom: 3rem; }
  .regia-schema { padding: 1.25rem; }
  .regia-out-label, .regia-bus-label { font-size: 1rem; letter-spacing: 0.16em; }
}

@media (max-width: 480px) {
  .regia-planes { grid-template-columns: 1fr; }
  .regia-plane { padding: 1rem; }
}

/* ===== Nav: 6 voci — compattazione su tablet ===== */
@media (max-width: 1024px) and (min-width: 769px) {
  /* Serve il selettore lungo: `.nav-links a` da solo (0,1,1) perde contro
     `.nav-links a:not(.btn)` (0,2,1) e non arriverebbe mai. */
  .nav-links { margin-right: 0; padding-right: 0.85rem; }
  .nav-links a:not(.btn) { padding: 0 0.85rem 0.45rem; font-size: 0.84rem; gap: 0.3rem; }
  .nav-links a:not(.btn):first-child { padding-left: 0.6rem; }
  .nav-links a:not(.btn)::after { font-size: 0.56rem; letter-spacing: 0.16em; }
  .nav-links .nav-cta { height: 26px; padding: 0 10px; font-size: 0.66rem; margin-left: 0.5rem; }
  .nav-logo img { height: 36px; }
}

/* ===== Page hero — variante estesa (eyebrow + H1 + lead + azioni) ===== */
/* --hero-bg-y sposta l'ancoraggio verticale del ritaglio. L'asse e quello di
   `object-position`, che si legge al contrario di come si dice a voce:
   valori BASSI mostrano la parte alta della foto (l'immagine scende),
   valori ALTI mostrano la parte bassa (l'immagine sale). 50% = centro.
   Il valore giusto si trova rendendo l'hero, non a calcolo.

   Le classi portano il numero e non un nome: con tre valori in giro
   "high"/"low" diceva a meta se si riferiva al ritaglio o al soggetto, e si
   sbagliava verso. Qui il valore e nel markup, senza interpretazione. */
.page-hero--bg-15 { --hero-bg-y: 15%; } /* n-exit: teste dentro, HUD intero */
.page-hero--bg-40 { --hero-bg-y: 40%; } /* service: chiude l'arco di luce */
.page-hero--bg-78 { --hero-bg-y: 78%; } /* blog: figura intera con l'ombra */

.page-hero--tall {
  height: auto;
  min-height: 420px;
  padding: clamp(3.5rem, 9vh, 6.5rem) 0;
  align-items: center;
}
.page-hero--tall .page-hero-overlay {
  background: linear-gradient(90deg, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.55) 60%, rgba(0,0,0,0.35) 100%);
}
.page-hero--tall h1 {
  font-size: clamp(2.25rem, 5.5vw, 4.5rem);
  max-width: 26ch;
}
.page-hero-lead {
  margin-top: 1.5rem;
  max-width: 58ch;
  font-size: clamp(1rem, 1.4vw, 1.15rem);
  color: rgba(255,255,255,0.82);
}
.page-hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem 1.75rem;
  margin-top: 2.25rem;
}

/* ===== Lista responsabilità (nome + comportamento) ===== */
.resp-list { border-top: 1px solid var(--border); }
.resp-item {
  display: grid;
  grid-template-columns: 16rem 1fr;
  gap: 1.5rem 2.5rem;
  align-items: baseline;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--border);
  transition: var(--transition);
}
.resp-item:hover { background: rgba(255,255,255,0.02); }
.resp-name {
  font-family: var(--font-heading);
  font-size: clamp(1.35rem, 2.2vw, 1.9rem);
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text);
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.resp-num {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--accent);
}
.resp-desc { color: var(--text-muted); line-height: 1.75; max-width: 62ch; }

.section-light .resp-list, .section-light .resp-item { border-color: rgba(33,33,33,0.1); }
.section-light .resp-item:hover { background: rgba(33,33,33,0.02); }
.section-light .resp-name { color: #212121; }

/* ===== Banda CTA finale ===== */
.cta-band { text-align: center; }
.cta-band h2 { max-width: 24ch; margin: 0 auto 1.25rem; }
.cta-band p { max-width: 60ch; margin: 0 auto 2rem; }

@media (max-width: 768px) {
  .page-hero--tall { min-height: 0; padding: 3rem 0; }
  .page-hero--tall h1 { max-width: none; }
  .resp-item { grid-template-columns: 1fr; gap: 0.5rem; padding: 1.5rem 0; }
}

/* ===== Service feature list: supporto a testi lunghi ===== */
.service-feature-item { align-items: flex-start; line-height: 1.6; }
.service-feature-item::before { line-height: 1.6; flex-shrink: 0; }
.section-light .service-feature-item {
  background: #fff;
  border-color: rgba(33,33,33,0.1);
  color: rgba(33,33,33,0.7);
}
@media (max-width: 768px) {
  .service-feature-list { grid-template-columns: 1fr; }
}

/* ===== Team: card con biografia + placeholder foto ===== */
/* Quattro persone: una riga sola, come la .team-grid base. Con tre colonne
   la quarta scheda restava sola sulla seconda riga, sbilanciata a sinistra. */
.team-grid--bio { grid-template-columns: repeat(4, 1fr); }
.team-card--static { cursor: default; }
.team-card--static:hover { transform: none; border-color: var(--border); }
.team-img-wrap--ph {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(0,174,239,0.14) 0%, transparent 60%),
    var(--bg);
  border-bottom: 1px solid var(--border);
}
.team-initials {
  font-family: var(--font-heading);
  font-size: 3.5rem;
  line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(255,255,255,0.22);
}
.team-ph-hint {
  position: absolute;
  bottom: 0.75rem;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  white-space: nowrap;
}

/* ===== Progetti interni ===== */
.internal-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.internal-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 2rem;
  transition: var(--transition);
}
.internal-card:hover { border-color: rgba(0,174,239,0.3); transform: translateY(-3px); }
.internal-name {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text);
  margin-bottom: 0.75rem;
}
.internal-note { font-size: 0.85rem; line-height: 1.65; color: var(--text-muted); }
.internal-badge {
  display: inline-block;
  margin-top: 1rem;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 50px;
  padding: 0.2rem 0.65rem;
}

@media (max-width: 1024px) {
  .team-grid--bio, .internal-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .team-grid--bio, .internal-grid { grid-template-columns: 1fr; }
  .contact-info-grid { grid-template-columns: 1fr; }
}

/* ===== Consensi form: label lunghe, impilate ===== */
.checkbox-group--consent { flex-direction: column; flex-wrap: nowrap; gap: 0.75rem; }
.checkbox-group--consent .checkbox-label {
  align-items: flex-start;
  gap: 0.7rem;
  line-height: 1.55;
  padding: 0.85rem 1rem;
}
.checkbox-group--consent .checkbox-label input[type="checkbox"] {
  margin-top: 0.2rem;
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

/* ===== Form home: campo contesto, consenso, feedback ===== */
.cfn-context { margin-top: 2rem; }
.cfn-context-label {
  display: block;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.cfn-context textarea {
  width: 100%;
  padding: 1rem 0;
  background: transparent;
  border: none;
  border-bottom: 1px solid rgba(33,33,33,0.2);
  border-radius: 0;
  color: #212121;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  resize: vertical;
  transition: var(--transition);
}
.cfn-context textarea:focus { outline: none; border-bottom-color: var(--logo-yellow); }
.cfn-context textarea::placeholder { color: rgba(33,33,33,0.4); }

.cfn-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.5rem;
  margin-top: 2rem;
}
.cfn-actions .checkbox-label {
  align-items: flex-start;
  gap: 0.7rem;
  max-width: 46ch;
  line-height: 1.55;
  color: rgba(33,33,33,0.65);
  border-color: rgba(33,33,33,0.15);
}
.cfn-actions .checkbox-label:hover { color: #212121; border-color: var(--accent); }
.cfn-actions .checkbox-label input[type="checkbox"] { margin-top: 0.2rem; flex-shrink: 0; }
.cfn-actions .checkbox-label a { color: inherit; text-decoration: underline; }

.cfn-feedback {
  margin-top: 1.25rem;
  min-height: 1.4em;
  font-size: 0.9rem;
  line-height: 1.55;
}
.cfn-feedback.is-idle { color: rgba(33,33,33,0.6); }
.cfn-feedback.is-err  { color: #B3372B; }
.cfn-feedback.is-ok   { color: #2F7D46; font-weight: 500; }

@media (max-width: 768px) {
  .cfn-actions { flex-direction: column; align-items: stretch; }
  .cfn-actions .checkbox-label { max-width: none; }
  .cfn-actions .cfn-submit { width: 100%; justify-content: center; }
}

/* Il form della home sul fondo scuro della pagina n-exit. Stessa gabbia, si
   girano solo i colori: la regola base e scritta per il chiaro (#212121,
   fondo #e8e8e8 con !important), quindi qui ogni colore va ridichiarato. */
.cfn-section--dark {
  background: var(--bg) !important;
  border-top: 1px solid var(--border);
}
.cfn-section--dark .cfn-heading,
.cfn-section--dark .cfn-group-label { color: var(--text) !important; }
.cfn-section--dark .cfn-service-label,
.cfn-section--dark .cfn-input-wrap label { color: var(--text); }
.cfn-section--dark .cfn-context-label { color: var(--text-muted); }
.cfn-section--dark .cfn-pill span {
  border-color: rgba(255, 255, 255, 0.25);
  color: var(--text);
}
.cfn-section--dark .cfn-pill:hover span { border-color: rgba(255, 255, 255, 0.5); background: rgba(255, 255, 255, 0.06); }
.cfn-section--dark .cfn-pill input:checked + span {
  background: var(--text);
  border-color: var(--text);
  color: var(--bg);
}
.cfn-section--dark .cfn-input-wrap input {
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.3);
  color: var(--text);
}
.cfn-section--dark .cfn-input-wrap input:focus { border-bottom-color: var(--text); }
.cfn-section--dark .cfn-input-wrap input[name="nome"]:focus     { border-bottom-color: var(--logo-pink); }
.cfn-section--dark .cfn-input-wrap input[name="email"]:focus    { border-bottom-color: var(--logo-green); }
.cfn-section--dark .cfn-input-wrap input[name="telefono"]:focus { border-bottom-color: var(--logo-blue); }
.cfn-section--dark .cfn-input-wrap input::placeholder,
.cfn-section--dark .cfn-context textarea::placeholder { color: rgba(255, 255, 255, 0.4); }
.cfn-section--dark .cfn-context textarea {
  border-bottom-color: rgba(255, 255, 255, 0.2);
  color: var(--text);
}
.cfn-section--dark .cfn-context textarea:focus { border-bottom-color: var(--logo-yellow); }
.cfn-section--dark .cfn-actions .checkbox-label {
  color: rgba(255, 255, 255, 0.65);
  border-color: rgba(255, 255, 255, 0.15);
}
.cfn-section--dark .cfn-actions .checkbox-label:hover { color: var(--text); border-color: var(--accent); }
.cfn-section--dark .cfn-submit { background: var(--accent); color: var(--bg); }
.cfn-section--dark .cfn-submit:hover { background: var(--accent-hover); }
.cfn-section--dark .cfn-submit-icon { background: var(--bg); color: var(--text); }
.cfn-section--dark .cfn-feedback.is-idle { color: rgba(255, 255, 255, 0.6); }
.cfn-section--dark .cfn-feedback.is-err  { color: #FF7A6B; }
.cfn-section--dark .cfn-feedback.is-ok   { color: #5FD08A; }

/* Form "Raccontaci la tua storia" in fondo al blog: stessa gabbia del form
   della home, con un paragrafo sotto i titoli, quattro campi su due colonne
   e una nota sotto l'invio. Colore e corpo dichiarati a mano: le regole
   `p` nude del foglio vincono sull'ereditarieta. */
.cfn-intro {
  max-width: 62ch;
  margin: 0 auto;
  text-align: center;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.65;
  color: rgba(33,33,33,0.7);
}
.cfn-inputs--2 { grid-template-columns: repeat(2, 1fr); row-gap: 2rem; }
.cfn-input-wrap input[name="progetto"]:focus { border-bottom-color: var(--logo-blue); }
.cfn-input-wrap input[name="link"]:focus     { border-bottom-color: var(--logo-yellow); }
.cfn-note {
  margin-top: 0.5rem;
  max-width: 62ch;
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.55;
  color: rgba(33,33,33,0.55);
}
.cfn-section--dark .cfn-intro { color: rgba(255, 255, 255, 0.7); }
.cfn-section--dark .cfn-note  { color: rgba(255, 255, 255, 0.5); }
.cfn-section--dark .cfn-input-wrap input[name="progetto"]:focus { border-bottom-color: var(--logo-blue); }
.cfn-section--dark .cfn-input-wrap input[name="link"]:focus     { border-bottom-color: var(--logo-yellow); }
@media (max-width: 768px) {
  .cfn-inputs--2 { grid-template-columns: 1fr; row-gap: 1.5rem; }
  .cfn-intro { font-size: 0.95rem; }
}


/* ===== Sezione Casi in home ===== */
.casi-section { padding-top: clamp(4.5rem, 8vh, 7rem); }

/* ===== 02 La tensione — la sezione come una stampa fuori registro =====
   Ogni mestiere e una lastra: magenta il marketing, blu il software, verde i
   dati. Le tre stampano sullo stesso foglio e non combaciano, e fuori registro
   non si legge niente — che e cosa succede quando i tre tavoli sono separati.
   Lo scroll e la manopola del registro: una lastra per volta scende a zero e
   la sua riga diventa nitida. In chiusura scendono tutte e tre e la frase
   finale si compone, senza che nessuna lastra la contenga per intero.

   Il bianco non e dipinto: le lastre sono livelli in `mix-blend-mode: screen`
   su fondo scuro, e magenta+blu+verde sovrapposti a registro tornano quasi
   bianchi. E' cio che rende il registro una cosa che si vede.

   La pista e nascosta di default: la accende nx-registro.js solo se le
   preferenze utente consentono il movimento. Senza JS, o con
   prefers-reduced-motion, resta in pagina il blocco statico data-sy-base. */
.reg-track {
  display: none;
  /* Il foglio ha una sua voce da macchina: il monospazio non sta fra i token
     del sito perche qui e l'unico posto che lo usa. */
  --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  /* Gli inchiostri non sono i token del marchio ma le stesse tinte smorzate:
     a piena saturazione, sommate in `screen` e ripetute su tre livelli, il
     magenta e il ciano urlavano piu del testo che dovevano far leggere.
     Ognuna e miscelata al 22% con il proprio grigio di luminanza: cambia il
     tono, non il colore. */
  --ink-mkt: #CC2E84;   /* --logo-pink smorzato */
  --ink-sw:  #1CA4D7;   /* --logo-blue smorzato */
  --ink-dat: #3FA856;   /* --logo-green smorzato */
}
html.nx-reg-live .reg-track { display: block; }
html.nx-reg-live [data-sy-base] { display: none; }

/* La regola globale `p { color: var(--text-muted) }` vince sull'ereditarieta:
   senza questa riga il testo delle lastre stampa grigio invece che nel colore
   del mestiere, e tutto il meccanismo del registro smette di leggersi. */
.reg-ink p, .reg-ink span { color: inherit; }

/* ===== il palco ==================================================== */

.reg { position: relative; background: #0E1114; }

/* La pista e alta quanto la corsa piu una schermata: la barra sticky
   resta ferma per tutta la corsa e p va da 0 a 1 esattamente li dentro. */
.reg-track { --run: 400svh; height: calc(100svh + var(--run)); }
@media (max-width: 760px) { .reg-track { --run: 340svh; } }

.reg-sticky {
  position: sticky; top: 0;
  height: 100svh;
  overflow: hidden;
  isolation: isolate;            /* le lastre si sommano sul foglio, non sulla pagina */
  background:
    radial-gradient(120% 90% at 50% 42%, #191d22 0%, #0E1114 62%, #090b0d 100%);
}

/* foglio: un rettangolo appena percepibile, da stampatore */
.reg-sheet {
  position: absolute;
  inset: clamp(14px, 2.4vw, 34px);
  border: 1px solid rgba(255,255,255,.055);
  pointer-events: none;
  z-index: 1;
}

/* ===== chrome fisso (non stampato: non entra nel blend) ============= */

.reg-hud {
  text-shadow: 0 0 14px #0E1114, 0 0 5px #0E1114, 0 0 2px #0E1114;
  position: absolute; inset: clamp(52px, 6vw, 96px);
  z-index: 6; pointer-events: none;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto 1fr auto;
  gap: 12px;
}
/* L'occhiello non e in scena: era l'unico elemento senza la voce della
   tipografia, prosa grigia in un angolo. Il titolo apre da solo. La frase
   resta nel blocco statico e nel testo per gli screen reader. */
.reg-count {
  grid-column: 2; grid-row: 1;
  font: 400 clamp(11px,1.15vw,13px)/1 var(--mono);
  letter-spacing: .16em;
  color: rgba(255,255,255,.42);
}

/* barra di controllo colore, in basso a sinistra */
.reg-strip { grid-column: 1; grid-row: 3; align-self: end; }
.reg-strip-row { display: flex; align-items: flex-end; gap: clamp(8px,1.2vw,14px); }
.reg-patch {
  --on: 0;
  width: clamp(30px, 4.4vw, 56px);
  height: clamp(10px, 1.5vw, 16px);
  background: var(--ink);
  opacity: calc(.22 + .78 * var(--on));
  transform: scaleY(calc(1 + .55 * var(--on)));
  transform-origin: 50% 100%;
  position: relative;
}
.reg-strip-lab {
  margin-top: 12px;
  font: 400 clamp(10px,1.05vw,12px)/1 var(--mono);
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.38);
  min-height: 1em;
}
.reg-strip-lab b { font-weight: 400; color: rgba(255,255,255,.82); }

/* lettura dello scarto, in basso a destra */
.reg-read { grid-column: 2; grid-row: 3; text-align: right; }
.reg-read-n {
  font: 400 clamp(22px,3.4vw,44px)/1 var(--mono);
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
  color: rgba(255,255,255,.86);
}
.reg-read-n small { font-size: .42em; letter-spacing: .1em; color: rgba(255,255,255,.4); margin-left: .5em; }
.reg-read-lab {
  margin-top: 6px;
  font: 400 clamp(9px,1vw,11px)/1 var(--mono);
  letter-spacing: .2em; text-transform: uppercase;
  color: rgba(255,255,255,.32);
}
.reg-rule {
  margin-top: 10px; margin-left: auto;
  width: clamp(90px, 14vw, 190px); height: 2px;
  background: rgba(255,255,255,.12);
  position: relative; overflow: hidden;
}
.reg-rule i {
  position: absolute; inset: 0;
  background: #fff;
  transform: scaleX(var(--fit,0));
  transform-origin: 100% 50%;
}

/* ===== il torchio: tre lastre sovrapposte ========================== */

.reg-press {
  --o0: 1; --o1: 1; --o2: 1;
  --a-head: 1; --a-lead: 0; --a-work: 0; --a-close: 0;
  position: absolute; inset: 0; z-index: 3;
  transform: scale(var(--zoom,1));
  will-change: transform;
}
.reg-ink {
  position: absolute; inset: 0;
  mix-blend-mode: screen;
  color: var(--ink);
  will-change: transform, opacity;
  transform: translate3d(0,0,0);
}
.reg-ink[data-i="0"] { --ink: var(--ink-mkt); opacity: var(--o0); }
.reg-ink[data-i="1"] { --ink: var(--ink-sw);  opacity: var(--o1); }
.reg-ink[data-i="2"] { --ink: var(--ink-dat); opacity: var(--o2); }

/* crocini di registro: stanno DENTRO la lastra, cosi si spostano con
   lei. Quando le tre collimano i dodici crocini tornano quattro. */
.reg-cross {
  position: absolute;
  opacity: .78;
  width: clamp(18px, 2.4vw, 28px); height: clamp(18px, 2.4vw, 28px);
}
.reg-cross::before, .reg-cross::after {
  content: ""; position: absolute; background: currentColor;
}
.reg-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; margin-left: -.5px; }
.reg-cross::after  { top: 50%; left: 0; right: 0; height: 1px; margin-top: -.5px; }
.reg-cross i {
  position: absolute; inset: 26%;
  border: 1px solid currentColor; border-radius: 50%;
}
.reg-cross--tl { left: clamp(20px,2.8vw,42px); top: clamp(20px,2.8vw,42px); }
.reg-cross--tr { right: clamp(20px,2.8vw,42px); top: clamp(20px,2.8vw,42px); }
.reg-cross--bl { left: clamp(20px,2.8vw,42px); bottom: clamp(20px,2.8vw,42px); }
.reg-cross--br { right: clamp(20px,2.8vw,42px); bottom: clamp(20px,2.8vw,42px); }

/* le tre lastre stampano la stessa gabbia: cambia solo cosa e inchiostrato */
.reg-slab {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  width: min(1080px, 86vw);
}
.reg-slab--head  { opacity: var(--a-head); }
.reg-lead {
  margin-top: clamp(20px, 2.6vw, 38px);
  max-width: 56ch;
  font-size: clamp(15px, 1.55vw, 20px);
  font-weight: 300; line-height: 1.5;
  opacity: var(--a-lead, 0);
}
.reg-slab--work  { opacity: var(--a-work); transform: translate(-50%, calc(-50% + var(--work-y, 0px))); }
.reg-slab--close { opacity: var(--a-close); }

.reg-title {
  font-family: var(--font-heading);
  font-size: clamp(46px, 9.2vw, 132px);
  line-height: .90;
  letter-spacing: .005em;
  text-transform: none;
}

/* le tre righe di lavoro: gabbia identica in tutte le lastre, ogni
   lastra inchiostra solo la sua. Le altre restano trasparenti ma
   tengono lo spazio, cosi i tre livelli combaciano al pixel. */
.reg-row {
  display: grid;
  grid-template-columns: clamp(38px,5vw,64px) minmax(0,1fr);
  column-gap: clamp(14px,2.2vw,28px);
  align-items: baseline;
  padding: clamp(14px,2.4vw,30px) 0;
  opacity: 0;
}
.reg-ink[data-i="0"] .reg-row[data-f="0"],
.reg-ink[data-i="1"] .reg-row[data-f="1"],
.reg-ink[data-i="2"] .reg-row[data-f="2"] { opacity: 1; }

.reg-n {
  font: 400 clamp(11px,1.2vw,14px)/1 var(--mono);
  letter-spacing: .14em;
  opacity: .75;
}
.reg-name {
  font-family: var(--font-heading);
  font-size: clamp(30px, 5.2vw, 66px);
  line-height: .95;
  display: block;
}
.reg-say {
  margin-top: clamp(4px,.7vw,10px);
  font-size: clamp(15px, 1.75vw, 23px);
  font-weight: 300; line-height: 1.42;
  max-width: 34ch;
}

.reg-close-line {
  font-family: var(--font-heading);
  font-size: clamp(34px, 6.6vw, 92px);
  line-height: 1.0;
}
.reg-close-line span { opacity: 0; }
.reg-ink[data-i="0"] .reg-close-line span[data-f="0"],
.reg-ink[data-i="1"] .reg-close-line span[data-f="1"],
.reg-ink[data-i="2"] .reg-close-line span[data-f="2"] { opacity: 1; }

/* grana di carta + vignettatura: sopra le lastre, fuori dal blend */
.reg-grain {
  position: absolute; inset: -60px; z-index: 5; pointer-events: none;
  opacity: .16; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2'/></filter><rect width='140' height='140' filter='url(%23n)' opacity='.6'/></svg>");
}
.reg-sr {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.reg-vig {
  position: absolute; inset: 0; z-index: 4; pointer-events: none;
  background: radial-gradient(115% 85% at 50% 46%, transparent 52%, rgba(0,0,0,.62) 100%);
}

/* ===== mobile ====================================================== */
@media (max-width: 760px) {
  /* il crocino sta sul bordo del foglio, l'HUD dentro: su schermo stretto
     la distanza fra i due va tenuta a mano o si pestano. */
  .reg-hud { inset: 44px 20px; }
  .reg-cross { width: 15px; height: 15px; }
  .reg-cross--tl, .reg-cross--tr { top: 14px; }
  .reg-cross--bl, .reg-cross--br { bottom: 14px; }
  .reg-cross--tl, .reg-cross--bl { left: 14px; }
  .reg-cross--tr, .reg-cross--br { right: 14px; }
  .reg-sheet { inset: 8px; }
  .reg-slab { width: 88vw; }
  .reg-title { font-size: clamp(44px, 13vw, 64px); }
  .reg-name { font-size: clamp(34px, 9vw, 46px); }
  .reg-say { font-size: clamp(16px, 4.3vw, 19px); }
  .reg-close-line { font-size: clamp(38px, 12vw, 56px); }
  .reg-row { grid-template-columns: 1fr; row-gap: 2px; padding: 16px 0; }
  .reg-n { letter-spacing: .18em; }
  .reg-say { max-width: none; }
  .reg-strip-row { gap: 8px; }
  .reg-strip-lab { margin-top: 9px; letter-spacing: .16em; }
  .reg-patch { width: clamp(26px,8vw,40px); }
}



/* La scena rail della 02 stava qui: lastra video che si contrae e colonna
   dei mestieri a fuoco uno per volta. Tolta col video — la sezione ora e'
   la pila di schede, sopra fra le .tension-*. Il codice resta in
   prototipo-rail.html. */

/* ===== Pensiero — 02 Quattro formati (parità design system) ===== */
.formati-section {
  padding-top: clamp(3.5rem, 7vh, 6rem);
  padding-bottom: clamp(5rem, 11vh, 9rem);
}
.formati-grid {
  /* Il margine serviva a staccare la griglia dall'occhiello "02 — Quattro
     formati", che non c'e piu: sommato al padding-top della sezione
     lasciava fino a 9rem di vuoto sotto l'hero. */
  margin-top: 0;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr));
  gap: clamp(1.25rem, 2.5vw, 2rem);
}
.formato-card {
  border: 1px solid rgba(255, 255, 255, 0.16);
  padding: clamp(1.25rem, 2.5vw, 2rem);
}
.formato-num {
  margin: 0;
  font-size: 0.65625rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--logo-yellow);
}
.formato-name {
  margin: 0.875rem 0 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.625rem, 2.6vw, 2.25rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: none;
}
.formato-desc {
  margin: 0.75rem 0 0;
  font-size: 0.90625rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.68);
  text-wrap: pretty;
}
.formati-note {
  margin: 1.5rem 0 0;
  font-size: 0.75rem;
  line-height: 1.7;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}

/* ===== La regia — 04 Metodo in quattro fasi (parità design system) ===== */
.fasi-section {
  padding-top: clamp(6rem, 14vh, 12.5rem);
  padding-bottom: clamp(6rem, 14vh, 12.5rem);
}
.fasi-head {
  display: flex;
  /* Tolto l'occhiello a sinistra: il contatore resta nell'angolo destro
     dov'era, invece di scivolare sotto il titolo. */
  justify-content: flex-end;
  gap: 1.5rem;
}
.fasi-count {
  margin: 0;
  font-size: 0.6875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.55);
}
.fasi-count { font-weight: 400; }
.fasi-title {
  max-width: 760px;
  margin: clamp(2.25rem, 5vw, 4rem) 0 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 4.75rem);
  line-height: 0.94;
  letter-spacing: 0.01em;
  text-transform: none;
}
.fasi-title-dim { color: rgba(255, 255, 255, 0.55); }
.fasi-rail {
  display: block;
  width: 100%;
  height: auto;
  margin-top: clamp(2rem, 4vw, 3rem);
  overflow: visible;
}
.fasi-rail rect {
  fill: var(--bg, #0d0d0d);
  stroke: var(--logo-yellow);
  stroke-width: 1.5;
}
.fasi-rail-line {
  fill: none;
  stroke: var(--logo-yellow);
  stroke-width: 1.6;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.19, 1, 0.22, 1) 0.1s;
}
.fasi-rail.visible .fasi-rail-line { stroke-dashoffset: 0; }
.fasi-grid {
  margin-top: clamp(1.25rem, 2.5vw, 2rem);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.fase {
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  padding-top: 1.25rem;
}
.fase-num {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.125rem, 3.4vw, 3.25rem);
  line-height: 1;
  color: var(--logo-yellow);
}
.fase-name {
  margin: 0.875rem 0 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.5rem, 2.4vw, 2rem);
  line-height: 1;
  letter-spacing: 0.02em;
  text-transform: none;
}
.fase-desc {
  margin: 0.75rem 0 0;
  font-size: 0.9375rem;
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.68);
  text-wrap: pretty;
}

/* ===== Home 03 Una sola regia + 04 Metodo (parità design system) ===== */
.regia-section,
.metodo-section {
  --nx-ink: #15181B;
  --nx-paper: #F2EFE7;
  --nx-muted: #767676;
  background: var(--nx-paper);
  color: var(--nx-ink);
}
.regia-section h2,
.regia-section h3,
.metodo-section h2,
.metodo-section h3 { color: var(--nx-ink); }
.regia-section p,
.metodo-section p { color: rgba(21, 24, 27, 0.75); }

.regia-section { padding: clamp(6.875rem, 13vh, 11.875rem) 0; }

.regia-toprow,
.metodo-toprow {
  display: flex;
  justify-content: flex-end;
  gap: 1.5rem;
}
.regia-count,
.metodo-count {
  margin: 0;
  font-size: 0.6875rem;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nx-muted);
}
.regia-count, .metodo-count { font-weight: 400; }

.regia-intro { max-width: 860px; margin-top: clamp(2.25rem, 5vw, 4rem); }
.regia-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.625rem, 5.6vw, 5.375rem);
  line-height: 0.94;
  letter-spacing: 0.01em;
  text-transform: none;
}
.regia-lead {
  margin: 1.5rem 0 0;
  font-size: clamp(1rem, 1.4vw, 1.15625rem);
  line-height: 1.6;
  text-wrap: pretty;
}
.regia-link {
  display: inline-block;
  margin-top: 1.375rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1;
  color: var(--nx-ink);
  border-bottom: 2px solid var(--logo-yellow);
  padding-bottom: 6px;
}
.regia-link:hover { color: var(--nx-ink); }

/* Fig. 02 — diagramma animato: i quattro piani e le curve che entrano
   nel nodo Regia. Erano state tolte (c10e0c7) e sono tornate su
   richiesta: sono loro a dire che i quattro piani finiscono nella stessa
   linea — la fila di carte da sola lo lascia soltanto intendere. */
.regia-fig02 { position: relative; margin: clamp(2.5rem, 5vw, 4.5rem) 0 0; }
.regia-dia-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.regia-fig02 { --dia-gap: clamp(14px, 2.2vw, 30px); --dia-col: calc((100% - 3 * var(--dia-gap)) / 4); }
.regia-dia-cards {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--dia-gap);
}
/* Le carte: estetica editoriale, niente ombra/gradiente/3D. La riga alta
   porta il progressivo e il quadratino di tinta, la tinta piena torna sul
   bordo basso — che e' anche il punto da cui parte la linea verso la regia
   (nx-home-sections.js misura cr.bottom), cosi' tinta e tratto combaciano.
   Il fondo e' un bianco appena caldo, non un grigio neutro: su #F2EFE7 un
   grigio freddo stonerebbe. */
.regia-dcard {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #FAF9F5;
  border: 1px solid rgba(21, 24, 27, 0.55);
  border-bottom: none;
  padding: 0 0 clamp(14px, 1.4vw, 20px);
  will-change: transform;
  transition: background 220ms cubic-bezier(0.35, 0, 0, 1),
              border-color 220ms cubic-bezier(0.35, 0, 0, 1);
}
/* Col mouse sopra: la carta si schiarisce e il bordo si chiude. Niente
   sollevamento, niente ombra — il segnale forte lo da' la linea che si
   accende nello schema. */
.regia-dcard.is-hover { background: #FFFFFF; border-color: var(--nx-ink); }
.regia-dcard.is-hover::after { height: 5px; }
.regia-dcard::after { transition: height 220ms cubic-bezier(0.35, 0, 0, 1); }
/* La riga di tinta e' l'ultimo elemento del bordo: 3px pieni a filo del
   fondo carta, senza stacco. */
.regia-dcard::after {
  content: '';
  position: absolute;
  left: -1px;
  right: -1px;
  bottom: 0;
  height: 3px;
  background: var(--plane);
}
.regia-dcard-top {
  display: flex;
  align-items: center;
  gap: clamp(10px, 1.1vw, 16px);
  padding: clamp(9px, 0.85vw, 12px) clamp(14px, 1.5vw, 20px);
  border-bottom: 1px solid rgba(21, 24, 27, 0.18);
}
.regia-dcard-num {
  flex: none;
  font-size: 0.6875rem;
  font-weight: 400;
  line-height: 1;
  letter-spacing: 0.16em;
  color: var(--nx-muted);
  font-variant-numeric: tabular-nums;
}
.regia-dcard-rule {
  flex: 1 1 auto;
  height: 1px;
  min-width: 12px;
  background: rgba(21, 24, 27, 0.22);
}
.regia-dcard-dot {
  flex: none;
  width: 8px;
  height: 8px;
  background: var(--plane);
}
.regia-dcard-name {
  /* Un gradino sotto: il nome era 34 e il nodo Regia, che deve stare
     nella stessa famiglia, sarebbe dovuto diventare una lastra. A 28 le
     cinque caselle si guardano alla pari. */
  margin: clamp(16px, 1.9vw, 26px) 0 0;
  padding: 0 clamp(14px, 1.5vw, 20px);
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  line-height: 0.96;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--nx-ink);
}
.regia-dcard-desc {
  margin: clamp(8px, 0.9vw, 12px) 0 0;
  padding: 0 clamp(14px, 1.5vw, 20px);
  font-size: clamp(0.78125rem, 0.88vw, 0.875rem);
  line-height: 1.45;
  color: var(--nx-muted);
  text-wrap: pretty;
}
/* Il divario e' la stanza in cui corrono le curve: senza, le linee non
   avrebbero dove disegnarsi e i capi si sovrapporrebbero. */
.regia-dia-gap { height: clamp(96px, 12vw, 160px); }
.regia-dia-hubrow {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}
/* Il nodo e' una carta come le altre, non un'etichetta: stessa larghezza
   di una colonna, stesso corpo del nome, stesso filo di tinta sul bordo
   basso — solo che qui la tinta le porta tutte e quattro, perche' e' il
   punto in cui si incontrano. Prima era 148x59 contro 282x169: accanto
   alle quattro carte sembrava un bottone. */
.regia-dia-hub {
  position: relative;
  width: var(--dia-col);
  background: var(--nx-ink);
  color: #fff;
  padding: clamp(22px, 2.2vw, 30px) clamp(14px, 1.5vw, 20px) clamp(24px, 2.4vw, 32px);
  box-shadow: 8px 8px 0 rgba(21, 24, 27, 0.16), 0 24px 44px -22px rgba(21, 24, 27, 0.5);
  will-change: transform;
}
.regia-dia-hub::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 3px;
  background: linear-gradient(90deg,
    var(--logo-pink) 0 25%, var(--logo-green) 25% 50%,
    var(--logo-blue) 50% 75%, var(--logo-yellow) 75% 100%);
}
.regia-dia-hub p {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.25rem, 1.9vw, 1.75rem);
  line-height: 0.96;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
  text-align: center;
}
/* La didascalia non si stampa piu' in pagina: sotto la figura era una
   riga di testo in piu' da leggere che non aggiungeva niente a quello
   che lo schema gia' dice (segnalazione utenti). Resta nel DOM e non
   cancellata, perche' e' il nome accessibile della <figure>. */
.regia-fig02-cap {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Statement dentro la sezione, come nel design system */
.regia-statement {
  margin-top: clamp(2.5rem, 5vw, 4rem);
  background: var(--nx-ink);
  color: #fff;
  padding: clamp(28px, 4vw, 56px);
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 300px), 1fr));
  gap: 24px 48px;
  align-items: end;
}
.regia-statement-label {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--logo-yellow);
}
.regia-section .regia-statement-text {
  margin: 18px 0 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.875rem, 3.6vw, 3.375rem);
  line-height: 0.98;
  letter-spacing: 0.015em;
  max-width: 720px;
  color: #fff;
  text-wrap: balance;
}
.regia-section .regia-statement-sub {
  margin: 0;
  font-size: 1rem;
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.7);
  max-width: 420px;
  text-wrap: pretty;
}

/* 04 Metodo — traccia orizzontale pinnata */
.metodo-section { padding: clamp(4rem, 8vh, 7rem) 0 clamp(3.5rem, 7vh, 6rem); }
.metodo-intro { max-width: 760px; margin-top: clamp(1.75rem, 3.5vw, 2.75rem); }
.metodo-title {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 4.75rem);
  line-height: 0.94;
  letter-spacing: 0.01em;
  text-transform: none;
}
.metodo-title-dim { color: rgba(21, 24, 27, 0.55); }
.metodo-section .metodo-lead {
  margin: 1.125rem 0 0;
  font-size: clamp(1rem, 1.4vw, 1.15625rem);
  line-height: 1.6;
  color: rgba(21, 24, 27, 0.72);
}
.metodo-wrap { position: relative; margin-top: clamp(1rem, 2vw, 1.75rem); }
.metodo-pin { position: relative; }
/* Barra e progresso stanno sulla colonna del container, come il titolo e
   "04/06": prima il palco aveva un rientro suo (clamp 20/4vw/80px) e in una
   sola sezione convivevano tre bordi diversi — 141, 60 e 1437 a 1512px.
   Sborda solo la traccia, a destra, che e' quello che fa spuntare la fase
   successiva oltre il bordo. */
.metodo-bar,
.metodo-progress {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-left: 2rem;
  padding-right: 2rem;
}
.metodo-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 22px;
}
.metodo-dir { transition: opacity 500ms cubic-bezier(0.35, 0, 0, 1); }
.metodo-dir, .metodo-counter {
  margin: 0;
  font-size: 0.6875rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nx-muted);
}
.metodo-track {
  margin-left: max(2rem, calc((100% - var(--max-width)) / 2 + 2rem));
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.metodo-track::-webkit-scrollbar { display: none; }
.metodo-panel {
  flex: 0 0 min(76vw, 560px);
  scroll-snap-align: start;
  padding: 8px clamp(24px, 3vw, 56px) 20px 0;
  margin-right: clamp(24px, 3vw, 56px);
  border-right: 1px solid rgba(21, 24, 27, 0.18);
  transition: opacity 420ms cubic-bezier(0.35, 0, 0, 1);
}
.metodo-panel:last-child { border-right: none; }
.metodo-panel-n {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 500;
  line-height: 1;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--nx-muted);
  transition: opacity 180ms cubic-bezier(0.35, 0, 0, 1);
}
.metodo-panel-title {
  margin: 22px 0 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(3.25rem, 6.4vw, 5.75rem);
  line-height: 0.88;
  letter-spacing: 0.01em;
  text-transform: none;
}
.metodo-panel-desc {
  margin: 20px 0 0;
  font-size: 1.03125rem;
  line-height: 1.6;
  color: rgba(21, 24, 27, 0.72);
  max-width: 500px;
  text-wrap: pretty;
}
.metodo-fade, .metodo-hint { display: none; }
.metodo-progress { margin-top: 28px; }
.metodo-progress-rail { position: relative; height: 2px; background: rgba(21, 24, 27, 0.15); }
.metodo-progress-fill {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 0;
  background: var(--logo-yellow);
}
.metodo-ticks {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}
.metodo-tick {
  background: none;
  border: none;
  cursor: pointer;
  padding: 10px 6px;
  font-family: var(--font-body);
  font-size: 0.6875rem;
  font-weight: 600;
  line-height: 1;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--nx-muted);
  transition: color 180ms cubic-bezier(0.35, 0, 0, 1);
}
.metodo-ticks .metodo-tick:first-child { padding-left: 0; }
.metodo-ticks .metodo-tick:last-child { padding-right: 0; }

/* Da telefono le carte stanno a coppie, due sopra e due sotto. La carta
   scende sotto i 150px di larghezza al telefono piu' stretto, quindi qui
   si stringe tutto insieme: rientri, passo verticale e corpo del testo.
   La misura che detta il tetto e' "OPERATIVITA" in Bebas, che deve stare
   su una riga anche a 320px. */
@media (max-width: 759px) {
  /* Le curve spariscono: qui le carte stanno a coppie e le linee
     passerebbero dietro a quelle sotto, lasciando spuntare monconi
     colorati nei distacchi. Resta il tratto verticale nel divario, che
     dice la stessa cosa — tutto converge nella regia — letto dall'alto
     in basso. L'SVG resta nel flusso a opacity 0 e non in display:none:
     getTotalLength su un nodo non renderizzato torna zero. */
  .regia-dia-svg { opacity: 0; }
  .regia-dia-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(10px, 2.5vw, 16px);
  }
  .regia-dia-gap { position: relative; height: clamp(48px, 13vw, 72px); }
  .regia-dia-gap::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 1px;
    margin-left: -0.5px;
    background: rgba(21, 24, 27, 0.22);
  }
  .regia-dia-hub {
    width: calc((100% - var(--dia-gap)) / 2);
    padding: clamp(16px, 4vw, 22px) 14px clamp(18px, 4.4vw, 24px);
  }
  .regia-dia-hub p { font-size: clamp(1.125rem, 5.4vw, 1.75rem); }
  .regia-dcard { padding-bottom: clamp(12px, 3vw, 18px); }
  .regia-dcard-top {
    gap: clamp(6px, 2vw, 10px);
    padding: clamp(9px, 2.4vw, 12px) clamp(11px, 3.2vw, 16px);
  }
  .regia-dcard-dot { width: 7px; height: 7px; }
  .regia-dcard-name {
    margin-top: clamp(12px, 3.6vw, 20px);
    padding-inline: clamp(11px, 3.2vw, 16px);
    font-size: clamp(1.125rem, 5.4vw, 1.75rem);
  }
  .regia-dcard-desc {
    margin-top: clamp(5px, 1.6vw, 8px);
    padding-inline: clamp(11px, 3.2vw, 16px);
    font-size: clamp(0.75rem, 2.9vw, 0.875rem);
    line-height: 1.4;
  }
}

@media (max-width: 480px) {
  .metodo-bar,
  .metodo-progress { padding-left: 1.25rem; padding-right: 1.25rem; }
  .metodo-track { margin-left: 1.25rem; }
}
/* "COLLABORAZIONE" a 52px non sta nei 76vw del pannello: sotto 360px
   l'ultima fase si allargava e a fine corsa finiva a filo del bordo. */
@media (max-width: 359px) {
  .metodo-panel-title { font-size: 2.5rem; }
}

/* Le quattro etichette misurano 467px + 24 di gap: sotto ~555px di viewport
   vanno a capo e la riga si spezza in due (segnalazione utenti). Da telefono
   restano la barra di avanzamento e il contatore "Fase 01 / 04"; le fasi si
   raggiungono scorrendo, che li' e' il gesto naturale. */
@media (max-width: 560px) {
  .metodo-ticks { display: none; }
}

/* Colori delle due sezioni: servono selettori scoped, altrimenti
   .section-light p (0,1,1) vince sulle classi singole. */
.regia-section .regia-count,
.regia-section .regia-dcard-desc,
.metodo-section .metodo-count,
.metodo-section .metodo-dir,
.metodo-section .metodo-counter,
.metodo-section .metodo-panel-n { color: var(--nx-muted); }
.regia-section .regia-dcard-name { color: var(--nx-ink); }
.regia-section .regia-dcard-num { color: var(--nx-muted); }
.regia-section .regia-lead { color: rgba(21, 24, 27, 0.75); }
.regia-section .regia-statement-label { color: var(--logo-yellow); }
.metodo-section .metodo-panel-desc { color: rgba(21, 24, 27, 0.72); }

/* n-exit "La nostra storia": la traccia di 04 Metodo con tappe molto piu'
   lunghe, sul fondo scuro della pagina. Il palco taglia quello che sfora
   (overflow hidden sul pin), quindi qui corpo e titolo si stringono rispetto
   al metodo. I colori sono dichiarati su ogni testo: le regole nude p/h2/h3
   di questo foglio vincono sull'ereditarieta'. */
.storia-section {
  background: var(--bg);
  color: var(--text);
  border-top: 1px solid var(--border);
}
.storia-section .storia-intro { margin-bottom: clamp(1.5rem, 3vw, 2.5rem); }
.storia-section .metodo-dir,
.storia-section .metodo-counter,
.storia-section .metodo-panel-n,
.storia-section .metodo-tick { color: var(--text-muted); }
.storia-section .metodo-panel { border-right-color: rgba(255, 255, 255, 0.12); }
.storia-section .metodo-panel-title {
  margin-top: 18px;
  font-size: clamp(2.75rem, 5.2vw, 4.75rem);
  line-height: 0.95;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text);
}
.storia-section .storia-panel-sub {
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-size: clamp(1.0625rem, 1.5vw, 1.3125rem);
  font-weight: 600;
  line-height: 1.3;
  color: var(--accent);
  max-width: 620px;
}
.storia-section .metodo-panel-desc {
  margin: 14px 0 0;
  font-family: var(--font-body);
  font-size: 1rem;
  line-height: 1.6;
  color: var(--text-muted);
  max-width: 620px;
}
.storia-section .metodo-panel-desc + .metodo-panel-desc { margin-top: 10px; }
.storia-section .metodo-progress-rail { background: rgba(255, 255, 255, 0.12); }
.storia-close {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(1.5rem, 4vw, 4rem);
  margin-top: clamp(4rem, 10vh, 7rem);
  padding-top: clamp(2rem, 4vw, 3rem);
  border-top: 1px solid var(--border);
}
.storia-section .storia-close-title { margin: 0; color: var(--text); }
.storia-section .storia-close-body p {
  margin: 0 0 1.1rem;
  font-family: var(--font-body);
  font-size: clamp(1rem, 1.3vw, 1.0625rem);
  line-height: 1.75;
  color: var(--text-muted);
}
.storia-section .storia-close-body p:last-child { margin-bottom: 0; }
@media (max-width: 860px) {
  .storia-close { grid-template-columns: 1fr; }
}
@media (max-width: 759px) {
  .storia-section .metodo-panel-title { margin-top: 12px; font-size: clamp(2.25rem, 11vw, 3.25rem); }
  .storia-section .storia-panel-sub { margin-top: 10px; font-size: 1rem; }
  .storia-section .metodo-panel-desc { margin-top: 10px; font-size: 0.9375rem; line-height: 1.55; }
  .storia-section .metodo-panel { padding-bottom: 8px; }
  .storia-section .metodo-progress { margin-top: 18px; }
}
/* 320px: il palco sforava di ~50px e il pin taglia senza avviso */
@media (max-width: 359px) {
  .storia-section .metodo-bar { margin-bottom: 14px; }
  .storia-section .metodo-progress { margin-top: 12px; }
  .storia-section .metodo-panel-title { font-size: 2.125rem; }
  .storia-section .metodo-panel-desc { font-size: 0.875rem; line-height: 1.5; }
}

/* Durante la transizione: via la grana (fixed 200%x200% in mix-blend-mode
   overlay, la costa piu cara del sito da comporre) e via il glow del cursore.
   Sotto la tendina non si vedono, e i frame servono all'animazione. */
body.pt-leaving::after { display: none; }
body.pt-leaving .cursor-glow { display: none; }

/* Arrivo da una transizione interna: dal primo paint la tendina copre gia,
   il preloader non si vede e il body non rifa il suo fade. Prima i due
   caricamenti si sovrapponevano — sulla home in modo evidente, perche il
   preloader compare col parse e veniva rimosso solo a fine body da main.js. */
html.nx-arrived #preloader { display: none !important; }
/* Arrivando da un'altra pagina il velo non deve nemmeno esserci: la
   tendina copre gia dal primo paint. */
html.nx-arrived body::before { opacity: 0 !important; transition: none !important; }
html.nx-arrived #page-curtain { transform: translateY(0); }
html.nx-arrived #page-curtain-logo {
  opacity: 1;
  clip-path: inset(0 0 0 0);
  -webkit-clip-path: inset(0 0 0 0);
}

/* ===== Casi chiusi =====
   Per ora si apre solo il caso Luxforsale. Bottoni e schede restano dove
   sono e come sono: cambia solo il puntatore, che non promette piu' un
   viaggio che non avviene (main.js, blocco "Casi"). */
.caso-chiuso { cursor: default; }

/* ===== Home 02 "Orbita": le quattro aree girano su una ghiera mentre il
   palco resta fermo (sticky + rAF in assets/js/nx-orbita.js). Portata dal
   prototipo nexit-sezione-02 con i nomi prefissati orb-: quelli generici
   (.track, .stage, .col) si sarebbero presi regole d'altri. ===== */
.orb-section,.orb-layer{
  /* come la scena "La tecnologia senza una regia" */
  --orb-stage:var(--bg); --orb-muted:rgba(255,255,255,.72); --orb-dim:rgba(255,255,255,.4); --orb-line:rgba(255,255,255,.12);
  --orb-nav:72px; --orb-pad:clamp(20px,4vw,80px);
  color:#fff; font-family:var(--font-body); line-height:1.6;
}
:where(.orb-section,.orb-layer) button{font:inherit;color:inherit;background:none;border:0;cursor:pointer;padding:0}
.orb-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* le regole nude p/h2/h3 del foglio vincono sull'ereditarieta: qui si
   ridice tutto quello che il prototipo prendeva dal body */
.orb-count,.orb-kicker{line-height:1.6}
.orb-title{letter-spacing:normal;text-transform:none;color:#fff}
.orb-st-name{font-family:var(--font-body);text-transform:none;letter-spacing:normal;line-height:1.3}
.orb-st-text{color:#fff;text-transform:none;letter-spacing:normal}
.orb-section{position:relative;background:var(--orb-stage);border-block:1px solid var(--orb-line)}
.orb-head{max-width:1360px;margin:0 auto;padding:clamp(110px,15vh,200px) var(--orb-pad) clamp(20px,4vh,40px);display:grid;gap:22px 64px;align-items:end}
.orb-count{font-size:13px;color:var(--orb-dim);letter-spacing:.06em;grid-column:1/-1;margin-bottom:8px}
.orb-kicker{font-size:clamp(15px,1.2vw,17px);color:var(--orb-muted)}
.orb-title{font-family:var(--font-heading);font-weight:400;font-size:clamp(44px,5.2vw,76px);line-height:.95;margin-top:12px;text-wrap:balance}
.orb-title-dim{color:rgba(255,255,255,.45);transition:color 1s}
.orb-section.is-done .orb-title-dim{color:#fff}
.orb-lead{font-size:clamp(15px,1.1vw,16.5px);line-height:1.65;color:var(--orb-muted);max-width:56ch}
@media (min-width:1000px){.orb-head{grid-template-columns:minmax(0,6fr) minmax(0,5fr)}}

/* ---- la pista: quanto scroll vale la scena ---- */
.orb-track{position:relative;height:calc(100svh + 300svh)}
.orb-stage{position:sticky;top:var(--orb-nav);height:calc(100svh - var(--orb-nav));overflow:hidden;
  max-width:1360px;margin:0 auto}

/* ---- l'orbita ---- */
.orb-ring{position:absolute;aspect-ratio:1;pointer-events:none}
.orb-ring svg{width:100%;height:100%;overflow:visible;display:block}
.orb-ring .o-l{position:absolute;inset:0}
.orb-ring .o-l-ticks,.orb-ring .o-l-spin,.orb-ring .o-l-nodes{will-change:transform}
.orb-ring .o-l-nodes svg.o-node{position:absolute;width:6%;height:6%;overflow:visible;will-change:transform}
.orb-ring.is-scatto .o-l-ticks,.orb-ring.is-scatto .o-l-spin,.orb-ring.is-scatto .o-l-nodes,.orb-ring.is-scatto .o-node{transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.orb-ring .o-ticks line{stroke:rgba(255,255,255,.16);stroke-width:1}
.orb-ring .o-ticks line.big{stroke:rgba(255,255,255,.34);stroke-width:1.2}
.orb-ring .o-base{fill:none;stroke:rgba(255,255,255,.1);stroke-width:1.5}
.orb-ring .o-arc{fill:none;stroke-width:2;stroke-linecap:butt}
.orb-ring .o-node circle.gap{fill:var(--orb-stage)}
.orb-ring .o-node text{font-family:var(--font-heading);font-size:30px;letter-spacing:1px;fill:rgba(255,255,255,.3);transition:fill .4s}
.orb-ring .o-node.on text{fill:var(--nc)}
.orb-ring .o-count{font-family:var(--font-heading);font-size:64px;fill:#fff;letter-spacing:2px}
.orb-ring .o-count tspan.tot{fill:rgba(255,255,255,.3)}
.orb-pointer{position:absolute;height:1px;background:linear-gradient(90deg,rgba(255,255,255,0),rgba(255,255,255,.28));pointer-events:none}

/* ---- i quattro testi, appesi all'orbita ---- */
.orb-col{position:absolute;left:var(--orb-pad);top:0;bottom:0;width:min(46%,560px)}
.orb-st{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;will-change:transform,opacity}
.orb-st-top{display:flex;align-items:baseline;gap:14px}
.orb-st-num{font-family:var(--font-heading);font-size:clamp(34px,3vw,46px);line-height:.85;color:var(--c)}
.orb-st-name{font-size:14px;font-weight:500;color:var(--c)}
.orb-st-text{font-family:var(--font-heading);font-weight:400;font-size:clamp(36px,3.6vw,56px);line-height:1;margin-top:16px;max-width:15ch;text-wrap:balance}
.orb-st-body{margin-top:24px;max-width:48ch}
.orb-st-copy{font-size:clamp(15px,1.1vw,16.5px);line-height:1.7;color:var(--orb-muted);text-wrap:pretty}
.orb-st-copy + .orb-st-copy{margin-top:1em}
/* anteprima: le prime righe vere del testo, che sfumano */
.orb-col .orb-st-copy:first-child{display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;color:rgba(255,255,255,.82);
  -webkit-mask:linear-gradient(180deg,#000 45%,transparent 100%);mask:linear-gradient(180deg,#000 45%,transparent 100%);cursor:pointer}
.orb-col .orb-st-copy:not(:first-child){display:none}

.orb-st-more{display:inline-flex;align-items:center;gap:14px;margin-top:26px;align-self:flex-start;font-size:14px;font-weight:500;color:#fff}
.orb-st-more .orb-ic{position:relative;width:44px;height:44px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.28);
  transition:border-color .4s,background-color .4s}
.orb-st-more .orb-ic::before,.orb-st-more .orb-ic::after{content:"";position:absolute;width:12px;height:1.5px;background:#fff;transition:transform .5s cubic-bezier(.7,0,.2,1)}
.orb-st-more .orb-ic::after{transform:rotate(90deg)}
.orb-st-more:hover .orb-ic{border-color:var(--c);background:color-mix(in srgb,var(--c) 14%,transparent)}
.orb-st-more:hover .orb-ic::before{transform:rotate(90deg)}.orb-st-more:hover .orb-ic::after{transform:rotate(180deg)}
.orb-st-more:focus-visible{outline:none}.orb-st-more:focus-visible .orb-ic{outline:2px solid var(--c);outline-offset:3px}

/* ---- sotto i 900: l'orbita sale da sotto, il testo le sta sopra ---- */
@media (max-width:899px){
  .orb-col{left:var(--orb-pad);right:var(--orb-pad);width:auto;top:0;bottom:auto;height:62%}
  .orb-st{justify-content:flex-start;padding-top:clamp(24px,5vh,48px)}
  .orb-st-text{font-size:clamp(34px,9vw,46px);margin-top:12px;max-width:none}
  .orb-st-body{margin-top:16px}
  .orb-st-more{margin-top:14px}
  .orb-col{height:56%}
}

/* telefono basso (320x568): la fase 04 va su quattro righe e "Scopri"
   finiva sull'arco. Testo piu' raccolto; la ghiera cala in nx-orbita.js
   con la stessa query. */
@media (max-width:599px) and (max-height:620px){
  .orb-st-text{font-size:30px}
  .orb-col .orb-st:not(.is-open) .orb-st-copy:first-child{-webkit-line-clamp:2}
}

/* ---- "Scopri": il testo intero si apre sul posto ----
   La colonna tiene tutto: .orb-st-in non supera il palco e, se il testo e'
   piu' lungo, scorre il corpo e non la pagina. Prima si apriva uno strato
   a tutto schermo, tolto su richiesta. */
.orb-st-in{display:flex;flex-direction:column;max-height:100%;min-height:0}
/* margine sopra e sotto: aperto, il testo lungo arrivava al bordo del palco
   e il numero dell'area finiva tagliato */
.orb-st{padding-block:clamp(28px,6vh,64px)}
@media (max-width:899px){.orb-st{padding-top:clamp(24px,5vh,48px);padding-bottom:0}}
.orb-st.is-open .orb-st-body{min-height:0;overflow-y:auto;padding-right:10px;scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.25) transparent}
.orb-col .orb-st.is-open .orb-st-copy{display:block;-webkit-line-clamp:unset;overflow:visible;-webkit-mask:none;mask:none;cursor:auto;color:var(--orb-muted);animation:orb-sale .5s cubic-bezier(.2,.7,.2,1) both}
.orb-col .orb-st.is-open .orb-st-copy:first-child{color:rgba(255,255,255,.88);animation:none}
.orb-col .orb-st.is-open .orb-st-copy:nth-child(2){animation-delay:.06s}
.orb-col .orb-st.is-open .orb-st-copy:nth-child(3){animation-delay:.12s}
@keyframes orb-sale{from{opacity:0;transform:translateY(14px)}}
/* il + diventa - */
.orb-st.is-open .orb-st-more .orb-ic::before,
.orb-st.is-open .orb-st-more:hover .orb-ic::before,
.orb-st.is-open .orb-st-more .orb-ic::after,
.orb-st.is-open .orb-st-more:hover .orb-ic::after{transform:rotate(180deg)}
.orb-st.is-open .orb-st-more .orb-ic{border-color:var(--c)}
.orb-st-more{flex-shrink:0}
@media (prefers-reduced-motion:reduce){.orb-col .orb-st.is-open .orb-st-copy{animation:none}}
/* ---- da telefono "Scopri" apre invece lo strato di lettura a tutto
   schermo, che si allarga a cerchio dal pulsante (sotto i 900px, deciso
   in nx-orbita.js). Da desktop si apre sul posto, qui sopra. ---- */
.orb-layer{position:fixed;inset:0;z-index:1500;background:var(--orb-stage);will-change:clip-path;contain:layout paint;overflow-y:auto;overflow-x:hidden;overscroll-behavior:contain;
  padding:calc(env(safe-area-inset-top,0px) + clamp(80px,12vh,130px)) var(--orb-pad) calc(env(safe-area-inset-bottom,0px) + 80px)}
.orb-layer{clip-path:circle(0px at var(--ox,50%) var(--oy,50%));visibility:hidden;pointer-events:none;
  transition:clip-path .55s cubic-bezier(.65,0,.35,1),visibility 0s linear .55s}
.orb-layer.is-open{clip-path:circle(var(--or,150vmax) at var(--ox,50%) var(--oy,50%));visibility:visible;pointer-events:auto;
  transition:clip-path .7s cubic-bezier(.65,0,.35,1),visibility 0s}
.orb-layer.is-open .orb-st-top,.orb-layer.is-open .orb-st-text,.orb-layer.is-open .orb-st-copy{animation:orb-strato .6s cubic-bezier(.2,.7,.2,1) both}
.orb-layer.is-open .orb-st-top{animation-delay:.3s}.orb-layer.is-open .orb-st-text{animation-delay:.36s}
.orb-layer.is-open .orb-st-copy:nth-child(1){animation-delay:.44s}.orb-layer.is-open .orb-st-copy:nth-child(2){animation-delay:.5s}.orb-layer.is-open .orb-st-copy:nth-child(3){animation-delay:.56s}
@keyframes orb-strato{from{opacity:0;transform:translateY(22px)}}
@media (prefers-reduced-motion:reduce){.orb-layer,.orb-layer.is-open{transition:none}.orb-layer.is-open *{animation:none!important}}
.orb-layer-ring{position:fixed;width:min(110vmin,1000px);aspect-ratio:1;right:calc(min(110vmin,1000px) * -.55);top:50%;margin-top:calc(min(110vmin,1000px) * -.5);
  border-radius:50%;border:1px solid rgba(255,255,255,.08);pointer-events:none}
.orb-layer-close{position:fixed;top:calc(env(safe-area-inset-top,0px) + 22px);right:var(--orb-pad);width:52px;height:52px;border-radius:50%;z-index:2;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.25);background:var(--orb-stage);transition:transform .5s cubic-bezier(.7,0,.2,1),border-color .3s}
.orb-layer-close::before,.orb-layer-close::after{content:"";position:absolute;width:16px;height:1.5px;background:#fff;transform:rotate(45deg)}
.orb-layer-close::after{transform:rotate(-45deg)}
.orb-layer-close:hover{transform:rotate(90deg);border-color:var(--c)}
.orb-layer-close:focus-visible{outline:2px solid var(--c);outline-offset:3px}
.orb-layer-in{position:relative;max-width:1080px;min-height:calc(100% + 1px)}
.orb-layer .orb-st-text{font-size:clamp(40px,5vw,76px);max-width:18ch}
.orb-layer .orb-st-body{max-width:none;margin-top:clamp(28px,5vh,48px);columns:2 320px;column-gap:clamp(32px,4vw,64px)}
.orb-layer .orb-st-copy{font-size:clamp(15.5px,1.1vw,17px);line-height:1.75}
.orb-layer .orb-st-copy:first-child{color:rgba(255,255,255,.92)}
.orb-layer .orb-st-more{display:none}

/* ===== I bottoni prendono la tinta della voce di menu =====
   Stessa sequenza del registro in alto: Il Metodo fucsia, Casi verde,
   Storie blu, N-exit giallo. La voce si legge dalla classe .active del menu
   con :has, cosi' nessuna pagina deve dichiararla (le sottopagine seguono la
   loro voce: servizi sotto Il Metodo, casi sotto Casi, articoli sotto
   Storie). Home, note legali e 404 non hanno voce e restano sull'accent.
   Su fucsia e verde il testo e' bianco: il #111 dell'accent li' si legge
   male. */
body:has(.nav-links a:nth-of-type(1).active) { --tinta: var(--logo-pink);   --tinta-ink: #fff; }
body:has(.nav-links a:nth-of-type(2).active) { --tinta: var(--logo-green);  --tinta-ink: #fff; }
body:has(.nav-links a:nth-of-type(3).active) { --tinta: var(--logo-blue);   --tinta-ink: #111; }
body:has(.nav-links a:nth-of-type(4).active) { --tinta: var(--logo-yellow); --tinta-ink: #111; }
body:has(.nav-links a.active) .btn-primary {
  background: var(--tinta);
  color: var(--tinta-ink);
}
body:has(.nav-links a.active) .btn-primary:hover {
  background: color-mix(in srgb, var(--tinta) 82%, #fff);
}
body:has(.nav-links a.active) .btn-arrow:hover { color: var(--tinta); }
body:has(.nav-links a.active) .case-row .cta-btn:hover {
  background: var(--tinta);
  border-color: var(--tinta);
  color: var(--tinta-ink);
}
body:has(.nav-links a.active) .cs-editorial .nextcase .btn-next {
  background: var(--tinta);
  color: var(--tinta-ink);
}

/* ===== Home 03 "Regia", versione minimal (dal prototipo
   nexit-regia-minimal): carte rettangolari color carta con ombra sfalsata,
   un'oscillazione lenta che ruota attorno all'attacco in basso (cosi' la
   linea resta agganciata), numero colorato che ondeggia, striscia colorata
   sotto e nodo Regia scuro con la striscia nei quattro colori. Le varianti
   V3..V9 si sovrappongono in ordine, come nel prototipo. I colori sono
   quelli del marchio (--logo-*), non gli esadecimali del prototipo. ===== */
.regia-section .regia-dcard {
  min-width: 0;
  min-height: 122px;
  justify-content: center;
  padding: 16px 18px 18px;
  background: #fffefa;
  border: 1px solid rgba(21,24,27,.08);
  border-radius: 0;
  box-shadow: 0 5px 9px -5px rgba(21,24,27,.18), 0 16px 27px -17px rgba(21,24,27,.35);
  transform-origin: 50% 100%;
  animation: regia-card-idle 6.4s ease-in-out infinite;
  transition: background 220ms ease, box-shadow 300ms ease;
}
.regia-section .regia-dcard:nth-child(2){animation-delay:-1.6s}
.regia-section .regia-dcard:nth-child(3){animation-delay:-3.2s}
.regia-section .regia-dcard:nth-child(4){animation-delay:-4.8s}
.regia-section .regia-dcard-top {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 0;
  border: 0;
  gap: 0;
}
.regia-section .regia-dcard-num {
  color: #85867e;
  font-size: 10px;
  letter-spacing: .04em;
}
.regia-section .regia-dcard-rule { display: none; }
/* Original animation reads this node's computed background color. */
.regia-section .regia-dcard-dot { position:absolute;visibility: hidden; }
.regia-section .regia-dcard-name {
  margin: 0;
  padding: 0 12px 0 0;
  color: #15181b;
  font-size: clamp(28px, 2.7vw, 40px);
  line-height: 1.04;
  letter-spacing: 0;
}
.regia-section .regia-dcard-desc {
  margin: 7px 0 0;
  padding: 0;
  color: #454944;
  font-size: 15px;
  line-height: 1.4;
  text-wrap: pretty;
}
.regia-section .regia-dcard::after {
  left: 50%;
  right: auto;
  width: 30px;
  height: 2px;
  bottom: -1px;
  transform: translateX(-50%);
  transition: width 250ms ease;
}
.regia-section .regia-dcard.is-hover {
  background: #fff;
  border-color: rgba(21,24,27,.12);
  box-shadow: 0 7px 12px -6px rgba(21,24,27,.2),0 20px 32px -17px rgba(21,24,27,.42);
  animation-play-state: paused;
}
.regia-section .regia-dcard.is-hover::after { height: 2px; width: 46px; }
.regia-section .regia-dia-hub {
  border-radius: 0;
  padding-block: 17px;
  box-shadow: 0 7px 12px -6px rgba(21,24,27,.24),0 18px 30px -16px rgba(21,24,27,.38);
}
.regia-section .regia-dia-hub p {
  font-size: clamp(28px, 2.7vw, 40px);
  line-height: 1.04;
  letter-spacing: .02em;
}
@keyframes regia-card-idle {
  0%,100% {rotate: -.25deg}
  50% {rotate: .25deg}
}
@media(prefers-reduced-motion:reduce){
  .regia-section .regia-dcard {animation:none;rotate:none;transition:none}
}

/* V3 — warm, raised surfaces with a visible lower edge. */
.regia-section .regia-dcard {
  background: linear-gradient(165deg, #FFFDF8 0%, #F3F0E8 100%);
  border: 1px solid #e2ddcf;
  border-top-color: #ffffff;
  border-left-color: #fffdf8;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    inset -1px 0 0 rgba(255,253,248,.5),
    0 1px 0 #e5dfd2,
    0 2px 0 #ded7c8,
    0 3px 0 #d6cebe,
    0 4px 0 #cec5b3,
    0 5px 0 #c7bdaa,
    0 9px 10px -5px rgba(101,84,52,.28),
    0 24px 23px -12px rgba(89,73,45,.34),
    0 42px 40px -22px rgba(103,85,52,.3);
}
.regia-section .regia-dcard.is-hover {
  background: linear-gradient(165deg, #FFFDF8 0%, #F3F0E8 100%);
  border-color: #e2ddcf;
  border-top-color: #fff;
  border-left-color: #fffdf8;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,1),
    inset -1px 0 0 rgba(255,253,248,.6),
    0 1px 0 #e5dfd2,
    0 2px 0 #ded7c8,
    0 3px 0 #d6cebe,
    0 4px 0 #cec5b3,
    0 5px 0 #c7bdaa,
    0 10px 12px -5px rgba(101,84,52,.3),
    0 29px 27px -12px rgba(89,73,45,.38),
    0 48px 46px -20px rgba(103,85,52,.32);
}
.regia-section .regia-dia-hub {
  border-top: 1px solid rgba(255,253,248,.22);
  border-left: 1px solid rgba(255,253,248,.12);
  background: linear-gradient(165deg,#25292c 0%,#15181b 100%);
  box-shadow: 0 1px 0 #111416,0 2px 0 #0f1214,0 3px 0 #0d1012,0 4px 0 #0b0e10,0 5px 0 #090c0e,
    0 10px 12px -5px rgba(72,59,37,.32),0 28px 28px -13px rgba(72,59,37,.4),0 44px 42px -24px rgba(103,85,52,.3);
}

/* V4 — fine black outline, independent of the raised surface. */
.regia-section .regia-dcard,
.regia-section .regia-dcard.is-hover,
.regia-section .regia-dia-hub {
  outline: .5px solid #000;
  outline-offset: -.5px;
}

/* V5 — reference composition, with the established warm raised finish. */
.regia-section .regia-dcard {
  min-height: 124px;
  padding: 19px 22px 21px;
  background: linear-gradient(165deg, #FFFDF8 0%, #F3F0E8 100%);
  border-color: rgba(21,24,27,.1);
  outline: .5px solid rgba(0,0,0,.65);
  outline-offset: -.5px;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    9px 10px 0 rgba(119,112,96,.17),
    0 18px 23px -15px rgba(72,62,43,.34),
    0 35px 38px -26px rgba(103,85,52,.26);
}
.regia-section .regia-dcard-top {visibility:hidden}
.regia-section .regia-dcard-name {
  margin:0;
  padding:0;
  font-size:clamp(28px,2.5vw,36px);
  letter-spacing:.025em;
}
.regia-section .regia-dcard-desc {margin-top:9px;color:#666861;font-size:15px;line-height:1.45}
.regia-section .regia-dcard::after,
.regia-section .regia-dcard.is-hover::after {
  top:-1px;
  bottom:auto;
  left:-1px;
  right:-1px;
  width:auto;
  height:4px;
  transform:none;
}
.regia-section .regia-dcard.is-hover {
  border-color:rgba(21,24,27,.1);
  outline:.5px solid rgba(0,0,0,.65);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
    10px 11px 0 rgba(119,112,96,.2),
    0 22px 28px -15px rgba(72,62,43,.38),
    0 39px 42px -24px rgba(103,85,52,.3);
}
.regia-section .regia-dia-hub {
  width:186px;
  padding:18px 20px;
  background:linear-gradient(165deg,#202427 0%,#15181b 100%);
  border:0;
  box-shadow:9px 10px 0 rgba(63,62,57,.23),0 23px 30px -17px rgba(72,62,43,.32);
}
.regia-section .regia-dia-hub::after {display:none}
.regia-section .regia-dia-hub p {font-size:32px;letter-spacing:.06em;line-height:1.05}

/* V6 — lower color stripe, no outline; shadows unchanged. */
.regia-section .regia-dcard,
.regia-section .regia-dcard.is-hover,
.regia-section .regia-dia-hub {
  outline: none;
  border-color: transparent;
}
.regia-section .regia-dcard::after,
.regia-section .regia-dcard.is-hover::after {
  top: auto;
  bottom: -1px;
}

/* V7 — hover lift from the video; restore the wider Regia node. */
.regia-section .regia-dcard {
  translate:0 0;
  transition:translate 350ms cubic-bezier(.2,.7,.2,1),box-shadow 350ms ease,background 220ms ease;
}
@media(hover:hover) and (pointer:fine){
  .regia-section .regia-dcard.is-hover {
    translate:0 -8px;
    box-shadow:inset 0 1px 0 rgba(255,255,255,.95),
      10px 13px 0 rgba(119,112,96,.17),
      0 24px 24px -11px rgba(72,62,43,.4),
      0 42px 40px -21px rgba(103,85,52,.3);
  }
}
.regia-section .regia-dia-hub {
  width:var(--dia-col);
  padding:17px 20px;
  border:1px solid transparent;
  border-top-color:rgba(255,253,248,.22);
  border-left-color:rgba(255,253,248,.12);
  outline:none;
  background:linear-gradient(165deg,#25292c 0%,#15181b 100%);
  box-shadow:0 1px 0 #111416,0 2px 0 #0f1214,0 3px 0 #0d1012,0 4px 0 #0b0e10,0 5px 0 #090c0e,
    0 10px 12px -5px rgba(72,59,37,.32),0 28px 28px -13px rgba(72,59,37,.4),0 44px 42px -24px rgba(103,85,52,.3);
}
.regia-section .regia-dia-hub::after {display:block;height:3px}
.regia-section .regia-dia-hub p {font-size:clamp(28px,2.7vw,40px);line-height:1.04;letter-spacing:.02em}
@media(prefers-reduced-motion:reduce){
  .regia-section .regia-dcard,.regia-section .regia-dcard.is-hover {translate:none;transition:none}
}

/* V8 — requested solid card background. */
.regia-section .regia-dcard,
.regia-section .regia-dcard.is-hover {
  background: #FFFDF8;
}

/* V9 — subtle animated numbering, in the same heading typeface. */
.regia-section .regia-dcard-top {
  visibility:visible;
  top:12px;
  right:14px;
}
.regia-section .regia-dcard-num {
  display:block;
  font-family:var(--font-heading);
  font-size:19px;
  font-weight:400;
  line-height:1;
  letter-spacing:.04em;
  color:var(--plane);
  transform-origin:50% 30%;
  animation:regia-number-sway 3.8s ease-in-out infinite;
}
.regia-section .regia-dcard:nth-child(2) .regia-dcard-num {animation-delay:-.9s}
.regia-section .regia-dcard:nth-child(3) .regia-dcard-num {animation-delay:-1.8s}
.regia-section .regia-dcard:nth-child(4) .regia-dcard-num {animation-delay:-2.7s}
.regia-section .regia-dcard-name {padding-right:23px}
.regia-section .regia-dia-hub::after {
  background:linear-gradient(90deg,var(--logo-pink) 0 25%,var(--logo-green) 25% 50%,var(--logo-blue) 50% 75%,var(--logo-yellow) 75% 100%);
}
@keyframes regia-number-sway {
  0%,100% {transform:translateY(1.5px) rotate(-6deg)}
  50% {transform:translateY(-2px) rotate(6deg)}
}
@media(prefers-reduced-motion:reduce){
  .regia-section .regia-dcard-num {animation:none;transform:none}
}

/* Da telefono le carte restano a coppie, due sopra e due sotto, come prima
   della versione minimal (il prototipo le metteva in colonna: tolto su
   richiesta). Le curve restano nascoste e il tratto verticale nel divario
   porta al nodo, come nel blocco da telefono piu' sopra; qui si
   ridimensiona solo la carta nuova. Il tetto lo detta ancora
   "OPERATIVITA" in Bebas, che deve stare su una riga anche a 320px. */
@media (max-width: 759px) {
  .regia-section .regia-dia-cards {
    grid-template-columns: repeat(2, 1fr);
    gap: clamp(12px, 3.2vw, 18px);
  }
  .regia-section .regia-dcard {
    min-height: 0;
    /* in alto e non al centro: nella stessa fila una descrizione va su due
       righe e l'altra no, e centrati i nomi finivano ad altezze diverse */
    justify-content: flex-start;
    padding: clamp(14px, 3.8vw, 19px) clamp(12px, 3.4vw, 18px) clamp(15px, 4vw, 20px);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      6px 7px 0 rgba(119,112,96,.17),
      0 14px 18px -12px rgba(72,62,43,.34);
  }
  .regia-section .regia-dcard-top { top: clamp(9px, 2.6vw, 12px); right: clamp(10px, 3vw, 14px); padding: 0; }
  .regia-section .regia-dcard-num { font-size: clamp(14px, 4vw, 19px); }
  .regia-section .regia-dcard-name {
    margin: 0;
    padding: 0 clamp(18px, 5vw, 23px) 0 0;
    font-size: clamp(1.2rem, 6vw, 1.75rem);
  }
  .regia-section .regia-dcard-desc {
    margin-top: 6px;
    padding: 0;
    font-size: clamp(0.75rem, 3.1vw, 0.875rem);
    line-height: 1.4;
  }
  .regia-section .regia-dia-hub {
    width: calc((100% - var(--dia-gap)) / 2);
    padding: clamp(14px, 3.8vw, 17px) 14px;
  }
  .regia-section .regia-dia-hub p { font-size: clamp(1.25rem, 6vw, 1.75rem); }
}

/* ===== Home 03: tutto come in produzione tranne le carte =====
   Delle versioni minimal restano solo le carte. Il nodo Regia torna quello
   di produzione (nero pieno, lettere spaziate, ombra sfalsata, niente
   striscia) e da telefono tornano le curve colorate che passano tra le due
   file: niente tratto verticale, divario alto come su desktop. Sta in fondo
   apposta, per vincere su tutte le regole della 03 scritte sopra. */
.regia-section .regia-dia-hub {
  width: auto;
  padding: 16px 46px 15px;
  background: var(--nx-ink);
  border: 0;
  outline: none;
  box-shadow: 8px 8px 0 rgba(21, 24, 27, 0.16), 0 24px 44px -22px rgba(21, 24, 27, 0.5);
}
.regia-section .regia-dia-hub::after { display: none; }
.regia-section .regia-dia-hub p {
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.12em;
}
@media (max-width: 759px) {
  .regia-section .regia-dia-svg { opacity: 1; }
  /* righe uguali: "Software, dati e automazioni" va su due righe da 390px
     in su e, alte quanto il contenuto, le carte sotto venivano piu' grandi */
  .regia-section .regia-dia-cards { gap: var(--dia-gap); grid-auto-rows: 1fr; }
  .regia-section .regia-dia-gap { height: clamp(96px, 12vw, 160px); }
  .regia-section .regia-dia-gap::before { display: none; }
  .regia-section .regia-dia-hub { width: auto; padding: 16px 46px 15px; }
  .regia-section .regia-dia-hub p { font-size: 1.5rem; }
}

/* ===== Blog: in fondo all'articolo, storia precedente e successiva =====
   L'ordine e' quello dell'indice. Alla prima manca "precedente": la
   successiva resta comunque a destra (margin-left:auto). */
.blog-pager { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; }
.blog-pager-next { margin-left: auto; }
/* da telefono le due voci non stavano su una riga (354px su 350 a 390) */
@media (max-width: 420px) {
  .blog-pager { gap: 1rem; }
  .blog-pager a { font-size: 0.75rem; }
}