/* ===== 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;
  --logo-pink:   #E91E8C;
  --logo-green:  #2DB34A;
  --logo-blue:   #00AEEF;
  --logo-yellow: #F7D000;
}

/* ===== 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;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding-top: calc(72px + env(safe-area-inset-top, 0px));
}
.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;
}
.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 20s linear infinite;
  width: max-content;
}
.logos-track img {
  height: 28px;
  width: auto;
  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); }
.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);
  transform: translateY(100%);
  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); }
.footer .container { padding-top: 4rem; }
.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1.5fr;
  gap: 3rem;
  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); max-width: 260px; }
.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; }
.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); }

/* ===== 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-grid { grid-template-columns: 1fr; }
  .footer-bottom { flex-direction: column; gap: 1rem; 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 */
  padding-bottom: 0.08em;
  margin-bottom: -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. */
img[src$="sg-bg-2.jpg"] { 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 3,85: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; }
.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); }
  .cs-featured-header { margin-bottom: 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;
  min-height: 100vh;
  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;
}

/* ===== 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); }
  }
  .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):hover::after { color: var(--logo-pink); }
  .nav-links a:not(.btn).active { color: #fff; }
  .nav-links a:not(.btn).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 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 */
  .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-yellow); }
  .overlay-row:nth-child(5):hover .overlay-link,
  .overlay-row:nth-child(5):hover .overlay-num { color: var(--logo-blue); }
  .overlay-row:nth-child(6):hover .overlay-link,
  .overlay-row:nth-child(6):hover .overlay-num { color: var(--logo-pink); }
}

/* 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. */
.overlay-link--current { color: var(--logo-yellow); }
.overlay-row--current .overlay-num { color: var(--logo-yellow); }
.overlay-row--current .overlay-num::after {
  content: "";
  display: block;
  width: 100%;
  height: 2px;
  margin-top: 0.35em;
  background: 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: pink hover fill */
.hero-social::before { background: var(--logo-pink); }
.hero-social:hover { color: #ffffff; border-color: var(--logo-pink); }

/* 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-list { margin-top: clamp(48px, 7vw, 96px); }
.tension-item {
  display: grid;
  grid-template-columns: 16px 44px minmax(0, 1fr);
  gap: 14px 18px;
  align-items: center;
  padding: 24px 0;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.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-text {
  margin: 0;
  max-width: 640px;
  font-size: 17px;
  line-height: 1.6;
  color: rgba(255,255,255,0.85);
  text-wrap: pretty;
}
.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);
}

/* ===== 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) {
  .tension-item { grid-template-columns: 16px minmax(0,1fr); gap: 10px 14px; }
  .tension-num { grid-column: 2; margin-bottom: -6px; }
  .tension-text { grid-column: 2; }
  .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(--accent); }
.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; }
}


/* ===== 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); }
}



/* ===== 02 La tensione — la sezione come una sola inquadratura =====
   Seconda strada della sezione 02, accanto al registro (che resta in
   prototipo-registro.html). Il gesto arriva dal rail della landing di
   Chrome: una lastra a tutto schermo che si contrae in un riquadro e
   libera la colonna dei testi accanto.

   Qui la lastra e la foto di uno che disegna connessioni a mano su un
   muro grande, e i quattro mestieri le scorrono accanto uno per volta.
   Il colore non e decorativo: ogni riga sale dal grigio al proprio
   inchiostro solo quando e il suo turno, le altre restano grigie —
   la sezione dice che i quattro tavoli non parlano insieme, e li fa
   vedere parlare uno alla volta.

   La pista e nascosta di default: la accende nx-rail.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. */
.rail-scene {
  display: none;
  /* Gli inchiostri sono i quattro colori del marchio smorzati per il
     fondo scuro: a piena saturazione il magenta vibra e il giallo
     brucia sotto il drop-shadow. Il grigio di partenza e anche il
     valore da cui lo script interpola (g = 92 in nx-rail.js). */
  --rail-ink-mkt: #D11D80;
  --rail-ink-sw:  #02A1DC;
  --rail-ink-dat: #2A9F45;
  --rail-ink-ops: #E1BF02;
  --rail-ink-off: #5C5C5C;
}
html.nx-rail-live .rail-scene { display: block; }
html.nx-rail-live [data-sy-base] { display: none; }

/* La regola globale `p { color: var(--text-muted) }` vince
   sull'ereditarieta: senza questa riga i testi della scena stampano
   grigi qualunque cosa scriva lo script. */
.rail-blk p, .rail-blk span { color: inherit; }

.rail-sr {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ===== occhiello e titolo: aprono fuori dalla scena ================ */
.rail-head {
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(64px, 14vh, 150px) clamp(20px, 4vw, 80px) clamp(30px, 7vh, 80px);
  display: grid;
  gap: clamp(14px, 2vh, 22px);
}
.rail-count {
  margin: 0;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(255, 255, 255, 0.58);
}
.rail-title {
  margin: 0;
  max-width: 1000px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.4rem, 6.4vw, 5.6rem);
  line-height: 0.98;
  letter-spacing: 0.005em;
  color: #fff;
  text-wrap: pretty;
}
/* La seconda meta del titolo e la promessa, e sta un gradino sotto il
   problema. A .5 su questo fondo il grigio sembrava slavato invece che
   voluto: a .34 legge come una seconda voce. Il colore vero resta nella
   scena, dove ogni inchiostro e un mestiere. */
.rail-title span { display: block; color: rgba(255, 255, 255, 0.34); }

/* ===== il palco: pista lunga, inquadratura ferma =================== */
/* La pista e il tempo della scena: 560svh sono quattro righe con una
   sosta di lettura vera. Sotto i 400 le righe si accavallano. */
.rail-track { position: relative; height: 560svh; }
@media (max-width: 760px) { .rail-track { height: 480svh; } }

.rail-stage {
  position: sticky;
  top: 0;
  height: 100svh;
  overflow: hidden;
  /* Lo stesso fondo della sezione: la lastra e una resa su fondo chiaro
     e a tutto schermo sbiancava la pagina, quindi il valore e sceso da
     #202429 a qui e la sezione lo ha seguito. Su questo fondo il
     riquadro legge come una lastra appoggiata, non come un buco di
     luce. */
  background: #14161a;
  display: flex;
  align-items: center;
  gap: clamp(24px, 4vw, 72px);
  /* Il margine e padding del palco, non avanzo lasciato dal centraggio:
     cosi vale a ogni istante della contrazione e non solo quando i conti
     tornano. La lastra ci sta dentro perche lo script la misura da
     stage.clientHeight, che con box-sizing: border-box e il palco
     compreso il padding. */
  padding: clamp(16px, 4vh, 56px) clamp(16px, 4vw, 56px);
}

.rail-card {
  position: relative;
  flex: none;
  /* misura d'ingresso: piena inquadratura meno il margine. Da qui in poi
     la scrive lo script, in px, per non passare da un layout che
     ricalcola a ogni fotogramma. */
  width: calc(100vw - 2 * clamp(16px, 4vw, 56px));
  height: calc(100svh - 2 * clamp(16px, 4vh, 56px));
  margin: 0;
  border-radius: 26px;
  background: #1a1a1a;
  overflow: hidden;
}
/* La lastra e un video (il poster usa le stesse regole finche il
   video non e montato). La tastiera sta al centro dell'inquadratura,
   quindi qui non serve spostare il punto di ancoraggio. */
.rail-card video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  background: #1a1a1a;
  /* Nessun filtro: la resa va in pagina come e stata fatta. Il fondo
     chiaro del video contro il grafite scuro della sezione e una scelta,
     non una svista — provato anche scurito e non piaceva. */
}

.rail-side {
  position: relative;
  flex: 1;
  min-width: 0;
  height: min(66svh, 560px);
  opacity: 0;   /* la apre lo script quando la foto ha finito di contrarsi */
}

/* Le quattro righe stanno impilate nello stesso posto: a fuoco una
   sola, le altre traslate sopra e sotto. */
.rail-blk {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  will-change: transform, opacity;
}
.rail-lab {
  margin: 0 0 1.1rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: var(--rail-ink-off);
}
.rail-say {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  /* Un gradino sopra il taglio del canvas (era 3,4vw / 3,4rem):
     accanto a una lastra da 640px il testo restava minuto. */
  font-size: clamp(1.8rem, 3.9vw, 4rem);
  line-height: 1.02;
  letter-spacing: 0.01em;
  color: var(--rail-ink-off);
  text-wrap: pretty;
}
/* L'ombra colorata sotto la riga e l'inchiostro che tocca il foglio:
   regge il fluttuare, altrimenti il testo galleggia nel vuoto. */
.rail-sh {
  height: 15px;
  margin-top: clamp(22px, 3.4vh, 46px);
  border-radius: 50%;
  filter: blur(7px);
}
.rail-blk[data-i="0"] .rail-sh { width: min(70%, 370px); }
.rail-blk[data-i="1"] .rail-sh { width: min(72%, 380px); }
.rail-blk[data-i="2"] .rail-sh { width: min(62%, 330px); }
.rail-blk[data-i="3"] .rail-sh { width: min(66%, 350px); }

/* Il fluttuare non dipende dallo scroll: sta in CSS e non nel rAF, cosi
   e un thread in meno da far quadrare. */
@keyframes rail-flo {
  0%, 100% { transform: translate3d(0, 0, 0); }
  50%      { transform: translate3d(0, -13px, 0); }
}
@keyframes rail-flos {
  0%, 100% { transform: scaleX(1);    opacity: 0.30; }
  50%      { transform: scaleX(0.88); opacity: 0.17; }
}
.rail-blk[data-i="0"] .rail-float { animation: rail-flo 6.6s ease-in-out infinite; }
.rail-blk[data-i="1"] .rail-float { animation: rail-flo 7s   ease-in-out infinite; }
.rail-blk[data-i="2"] .rail-float { animation: rail-flo 8.4s ease-in-out infinite 0.6s; }
.rail-blk[data-i="3"] .rail-float { animation: rail-flo 7.8s ease-in-out infinite 1.2s; }
.rail-blk[data-i="0"] .rail-sh { animation: rail-flos 6.6s ease-in-out infinite; }
.rail-blk[data-i="1"] .rail-sh { animation: rail-flos 7s   ease-in-out infinite; }
.rail-blk[data-i="2"] .rail-sh { animation: rail-flos 8.4s ease-in-out infinite 0.6s; }
.rail-blk[data-i="3"] .rail-sh { animation: rail-flos 7.8s ease-in-out infinite 1.2s; }

/* ===== chiusura: fuori dalla scena, come nel registro ============== */
/* La chiusura e un fermo immagine, non un blocco che passa: la sezione
   si inchioda e le righe salgono mentre il lettore sta fermo, come lo
   statement "La tecnologia senza una regia e solo un costo". Il pin lo
   mette ScrollTrigger, qui c'e solo la gabbia: una schermata piena col
   testo centrato, cosi durante il fermo non c'e vuoto sopra ne sotto. */
/* Il fermo e sticky e non un pin di ScrollTrigger. Il pin funzionava,
   ma inserisce uno spacer nel flusso: i pin creati dopo (questo script e
   deferred, e ritaglia le righe su fonts.ready) restano fuori
   dall'ordine di refresh degli altri, e lo statement piu sotto in pagina
   si trovava start ed end sfasati di 1301px — la mia stessa corsa — e
   finiva sovrapposto alle schede del metodo. Sticky non tocca il flusso
   e la pista della scena qui sopra lo usa gia: una tecnica sola per
   tutta la sezione. */
.rail-outro {
  position: relative;
  /* una schermata di sosta piu la corsa. Con le sole due righe grosse
     la corsa e 120svh: i 160svh dello statement servivano quando in
     mezzo c'era anche il lead, e adesso lascerebbero una sosta lunga a
     frase gia composta. */
  height: 220svh;
}
.rail-out {
  position: sticky;
  top: 0;
  max-width: 1240px;
  margin: 0 auto;
  padding: clamp(32px, 6vh, 72px) clamp(20px, 4vw, 80px);
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  /* Erano 4,5vh, tarati su lead + due righe. Fra le sole due righe
     grosse quel passo le staccava in due frasi: cosi si leggono come un
     blocco, che e quello che dicono. */
  gap: clamp(6px, 1vh, 14px);
}

/* La chiusura si compone come lo statement "La tecnologia senza una
   regia e solo un costo": ogni riga e una finestra con `overflow:
   hidden` e il testo sta sotto la maschera, fuori vista, finche lo
   scroll non lo fa salire. Non un fade: la riga non c'e e poi entra.

   Le righe le taglia nx-rail.js misurando dove il testo va a capo per
   davvero, e le ritaglia al cambio di larghezza. In pagina niente span:
   il markup resta una frase sola.

   Il padding con margine negativo e lo stesso trucco dello statement:
   senza, la maschera tosa gli accenti sopra e le code di g e p sotto. */
.rail-line {
  display: block;
  overflow: hidden;
  padding-top: 0.36em;
  margin-top: -0.36em;
  padding-bottom: 0.16em;
  margin-bottom: -0.16em;
}
.rail-line-in {
  display: block;
  font-style: normal;
  /* 130%: la riga sta interamente sotto il bordo della maschera, code
     comprese. Lo scroll la porta a 0. */
  transform: translateY(130%);
  will-change: transform;
}
.rail-close {
  margin: 0;
  max-width: 1100px;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(2.2rem, 7vw, 6rem);
  line-height: 0.98;
  letter-spacing: 0.01em;
  color: #fff;
  text-wrap: pretty;
}
.rail-close--soft { color: rgba(255, 255, 255, 0.5); }
/* Solo mobile: a 390px il clamp cadeva sul minimo (2,2rem = 35px, perche
   7vw sono 27) e la chiusura restava piccola in mezzo a uno schermo
   vuoto. Qui la misura la fa la larghezza: 12vw sono 47px a 390 e 43 a
   360, e le due frasi riempiono il fermo invece di galleggiarci. */
@media (max-width: 760px) {
  .rail-close { font-size: clamp(2.6rem, 12vw, 4rem); }
}

[data-rail-reveal] { will-change: transform, opacity; }

/* ===== impilato ===================================================== */
/* Affiancare sotto i 900px non si puo: con la foto a tutta larghezza la
   colonna dei testi resta a zero px e le righe spariscono. */
@media (max-width: 899px) {
  .rail-stage { flex-direction: column; justify-content: center; gap: clamp(18px, 3vh, 34px); }
  /* `flex: 1` serve affiancati, dove fa crescere la colonna in larghezza.
     Impilati l'asse principale e verticale, e li serve una via di mezzo:
     senza tetto la colonna si prende tutto l'avanzo e la lastra resta
     incollata a top 0, senza margine; bloccata a un'altezza fissa non si
     restringe e a meta contrazione la somma sfonda il palco, che con
     overflow: hidden taglia lo spigolo alto della lastra — sopra
     squadrato, sotto tondo. Quindi: cresce e si restringe sull'avanzo
     (flex: 1 1 0, min-height 0) ma non oltre il tetto. */
  .rail-side {
    flex: 1 1 0;
    width: 100%;
    height: auto;
    min-height: 0;
    max-height: min(38svh, 320px);
  }
  /* Impilato c'e margine: il testo piu alto occupa 56px su una
     colonna da 464, quindi 8vw invece di 6,4 senza rischio di sfondare. */
  .rail-say { font-size: clamp(1.8rem, 8vw, 2.8rem); }
}

/* ===== 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 */
.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-dia-cards {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(14px, 2.2vw, 30px);
}
.regia-dcard {
  position: relative;
  background: linear-gradient(165deg, #FFFDF8 0%, #F3F0E8 100%);
  border: 1px solid rgba(21, 24, 27, 0.15);
  padding: clamp(16px, 1.8vw, 24px) clamp(14px, 1.6vw, 22px);
  box-shadow: 8px 8px 0 rgba(21, 24, 27, 0.07), 0 16px 30px -18px rgba(21, 24, 27, 0.25);
  will-change: transform;
}
.regia-dcard::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--plane);
}
.regia-dcard-name {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: clamp(1.1875rem, 1.7vw, 1.5rem);
  line-height: 1;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--nx-ink);
}
.regia-dcard-desc {
  margin: 8px 0 0;
  font-size: 0.71875rem;
  line-height: 1.5;
  color: var(--nx-muted);
}
.regia-dia-gap { height: clamp(96px, 12vw, 160px); }
.regia-dia-hubrow {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: center;
}
.regia-dia-hub {
  position: relative;
  background: var(--nx-ink);
  color: #fff;
  padding: 16px 46px 15px;
  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 p {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 1.5rem;
  line-height: 1;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
}
.regia-fig02-cap {
  margin: 20px 0 0;
  font-size: 0.65625rem;
  line-height: 1.5;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--nx-muted);
}

/* 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; padding-left: clamp(20px, 4vw, 80px); }
.metodo-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 24px;
  justify-content: space-between;
  align-items: center;
  padding-right: clamp(20px, 4vw, 80px);
  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 {
  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: 420px;
  text-wrap: pretty;
}
.metodo-fade, .metodo-hint { display: none; }
.metodo-progress { margin-top: 28px; padding-right: clamp(20px, 4vw, 80px); }
.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; }

@media (max-width: 759px) {
  .regia-dia-cards { grid-template-columns: repeat(2, 1fr); }
}

/* 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-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); }

/* 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; }