/* ============================================================
   COLLETTI INGEGNERIA — stile.css
   Design system "tavola tecnica": carta millimetrata, hairline,
   font mono per etichette e quote, blu blueprint + arancio
   cantiere. Un solo foglio condiviso da tutte le pagine.
   ============================================================ */

/* ---------- Token ---------- */
:root {
  --ink-950: #0b0e13;
  --ink-900: #10151c;
  --ink-800: #161d27;
  --ink-700: #212b38;

  --carta: #f2f1ec;          /* fondo caldo, carta da spolvero */
  --surface: #fbfaf7;
  --line: #ddd9cf;

  --text: #20242b;
  --muted: #646a73;
  --text-inv: #edeef0;
  --muted-inv: #8b95a3;

  --blu: #33506d;            /* blu blueprint */
  --blu-chiaro: #8fa9c4;
  --arancio: #c65127;        /* arancio cantiere */

  --font-display: "Archivo", "Helvetica Neue", "Arial Nova", sans-serif;
  --font-body: "Inter", -apple-system, "Segoe UI", Roboto, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;

  --r-lg: 6px;
  --r-md: 4px;
  --r-sm: 2px;

  --shadow-1: 0 2px 10px rgba(16, 21, 28, .05);
  --shadow-2: 0 18px 44px rgba(16, 21, 28, .13);

  --header-h: 76px;
  --ease-out: cubic-bezier(.22, 1, .36, 1);
}

/* ---------- Reset & base ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  font-family: var(--font-body);
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--text);
  background: var(--carta);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  animation: pagina-entra .6s var(--ease-out);
}
@keyframes pagina-entra { from { opacity: 0; } }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { list-style: none; }
button { font: inherit; cursor: pointer; border: 0; background: none; }

::selection { background: rgba(51, 80, 109, .22); }

::-webkit-scrollbar { width: 11px; }
::-webkit-scrollbar-track { background: var(--ink-900); }
::-webkit-scrollbar-thumb { background: var(--ink-700); border-radius: 0; border: 2px solid var(--ink-900); }
::-webkit-scrollbar-thumb:hover { background: var(--blu); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  line-height: 1.08;
  letter-spacing: -.02em;
  color: var(--ink-900);
}

/* Colonne architettoniche: hairline verticali su tutta la pagina */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    linear-gradient(90deg, rgba(128, 128, 128, .09) 1px, transparent 1px) 25vw 0 / 25vw 100% no-repeat,
    linear-gradient(90deg, rgba(128, 128, 128, .09) 1px, transparent 1px) 50vw 0 / 25vw 100% no-repeat,
    linear-gradient(90deg, rgba(128, 128, 128, .09) 1px, transparent 1px) 75vw 0 / 25vw 100% no-repeat;
}
@media (max-width: 820px) { body::after { display: none; } }

/* ---------- Utility ---------- */
.container { width: min(1180px, 92vw); margin-inline: auto; position: relative; z-index: 2; }

.section { padding: clamp(72px, 9vw, 120px) 0; position: relative; }
.section-dark { background: var(--ink-900); color: var(--text-inv); }
.section-dark h2, .section-dark h3 { color: #fff; }

/* Titoli fantasma in outline dietro le sezioni */
[data-ghost] { overflow: hidden; }
[data-ghost]::before {
  content: attr(data-ghost);
  position: absolute;
  top: .02em;
  left: -.03em;
  z-index: 0;
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(6rem, 17vw, 15rem);
  line-height: 1;
  letter-spacing: -.02em;
  text-transform: uppercase;
  color: transparent;
  -webkit-text-stroke: 1px rgba(32, 36, 43, .10);
  pointer-events: none;
  white-space: nowrap;
  transform: translateY(var(--gy, 0));
  will-change: transform;
}
.section-dark[data-ghost]::before { -webkit-text-stroke-color: rgba(255, 255, 255, .07); }

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--blu);
  margin-bottom: 18px;
}
.eyebrow::before {
  content: "";
  width: 30px; height: 1px;
  background: var(--arancio);
}
.section-dark .eyebrow { color: var(--blu-chiaro); }

.h-xl { font-size: clamp(2.5rem, 6.5vw, 4.6rem); font-weight: 700; }
.h-lg { font-size: clamp(1.9rem, 4vw, 2.9rem); font-weight: 700; }
.h-md { font-size: clamp(1.25rem, 2vw, 1.55rem); font-weight: 600; }

.lead { font-size: clamp(1.02rem, 1.5vw, 1.18rem); color: var(--muted); max-width: 62ch; }
.section-dark .lead { color: var(--muted-inv); }

.grad-text { color: var(--blu); }
.section-dark .grad-text,
.hero .grad-text, .hero-pagina .grad-text { color: var(--blu-chiaro); }

.center { text-align: center; }
.center .lead { margin-inline: auto; }
.mt-1 { margin-top: 14px; } .mt-2 { margin-top: 28px; } .mt-3 { margin-top: 48px; }

/* ---------- Bottoni (hairline, riempimento a tendina su hover, magnetici via JS) ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 26px;
  border-radius: var(--r-sm);
  border: 1px solid var(--ink-900);
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .82rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--ink-900);
  background: transparent;
  overflow: hidden;
  isolation: isolate;
  transition: color .35s, border-color .35s, transform .3s var(--ease-out);
  will-change: transform;
}
.btn::before {                    /* tendina d'inchiostro al passaggio */
  content: "";
  position: absolute;
  inset: 0;
  background: var(--ink-900);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .45s var(--ease-out);
  z-index: -1;
}
.btn:hover { color: var(--carta); }
.btn:hover::before { transform: scaleX(1); }
.btn::after {                     /* tacca angolare arancio */
  content: "";
  position: absolute;
  top: 0; right: 0;
  width: 9px; height: 9px;
  background: var(--arancio);
  clip-path: polygon(100% 0, 0 0, 100% 100%);
  transition: width .3s, height .3s;
}
.btn:hover::after { width: 13px; height: 13px; }

/* Sui fondi scuri il bottone è carta su inchiostro (inverte al passaggio) */
.hero .btn, .hero-pagina .btn, .section-dark .btn,
.header .btn, .menu-mobile .btn, .footer .btn {
  border-color: rgba(255, 255, 255, .5);
  color: #fff;
}
.hero .btn::before, .hero-pagina .btn::before, .section-dark .btn::before,
.header .btn::before, .menu-mobile .btn::before, .footer .btn::before {
  background: var(--carta);
}
.hero .btn:hover, .hero-pagina .btn:hover, .section-dark .btn:hover,
.header .btn:hover, .menu-mobile .btn:hover, .footer .btn:hover {
  color: var(--ink-900);
  border-color: var(--carta);
}

/* Variante secondaria: più leggera, senza tacca */
.btn-ghost { border-color: rgba(255, 255, 255, .22); color: rgba(255, 255, 255, .85); }
.btn-ghost::after { display: none; }
.btn-ghost::before { background: rgba(255, 255, 255, .1); }
.hero .btn-ghost:hover, .hero-pagina .btn-ghost:hover, .section-dark .btn-ghost:hover { color: #fff; border-color: rgba(255, 255, 255, .7); }

/* .btn-dark resta per compatibilità: eredita lo stile base */

.btn .fr { transition: transform .3s var(--ease-out); }
.btn:hover .fr { transform: translateX(5px); }

/* ---------- Barra avanzamento scroll ---------- */
#barra-scroll {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 100%;
  background: linear-gradient(90deg, var(--blu), var(--arancio));
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: 1000;
}

/* ---------- Velo di transizione pagina (iniettato dal JS) ---------- */
#velo {
  position: fixed;
  inset: 0;
  background: var(--ink-950);
  transform: scaleY(0);
  transform-origin: 50% 100%;
  z-index: 1200;
  pointer-events: none;
  display: grid;
  place-items: center;
}
#velo.attivo {
  transform: scaleY(1);
  transition: transform .45s var(--ease-out);
  pointer-events: auto;
}
#velo span {
  font-family: var(--font-mono);
  font-size: .8rem;
  letter-spacing: .3em;
  text-transform: uppercase;
  color: var(--blu-chiaro);
  opacity: 0;
  transition: opacity .2s .25s;
}
#velo.attivo span { opacity: 1; }

/* ---------- Header ---------- */
.header {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: var(--header-h);
  display: flex;
  align-items: center;
  z-index: 900;
  transition: background .4s, box-shadow .4s, height .4s, border-color .4s;
  border-bottom: 1px solid transparent;
}
.header.compatta {
  height: 60px;
  background: rgba(11, 14, 19, .88);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom-color: rgba(255, 255, 255, .08);
}
.header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.logo img { height: 32px; width: auto; }

.nav { display: flex; align-items: center; gap: 4px; }
.nav a {
  position: relative;
  padding: 10px 14px;
  font-family: var(--font-mono);
  font-size: .78rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .68);
  transition: color .25s;
}
.nav a::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 4px;
  height: 1px;
  background: var(--arancio);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .35s var(--ease-out);
}
.nav a:hover { color: #fff; }
.nav a:hover::after, .nav a.attiva::after { transform: scaleX(1); }
.nav a.attiva { color: #fff; }
.nav .btn { padding: 12px 20px; margin-left: 12px; font-size: .72rem; }

/* Hamburger */
.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 10px;
  z-index: 950;
}
.hamburger span {
  width: 26px; height: 2px;
  background: #fff;
  transition: transform .35s var(--ease-out), opacity .25s;
}
.hamburger.aperto span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.hamburger.aperto span:nth-child(2) { opacity: 0; }
.hamburger.aperto span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Menu mobile */
.menu-mobile {
  position: fixed;
  inset: 0;
  background: rgba(11, 14, 19, .97);
  backdrop-filter: blur(18px);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  z-index: 940;
  opacity: 0;
  pointer-events: none;
  transition: opacity .35s;
}
.menu-mobile.aperto { opacity: 1; pointer-events: auto; }
.menu-mobile a {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 6vw, 2.2rem);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: rgba(255, 255, 255, .82);
  padding: 10px 20px;
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .45s var(--ease-out), transform .45s var(--ease-out), color .25s;
}
.menu-mobile.aperto a { opacity: 1; transform: none; }
.menu-mobile a:hover, .menu-mobile a.attiva { color: var(--blu-chiaro); }

/* ---------- Carta millimetrata (hero + pagine interne) ---------- */
.hero-griglia,
.griglia-blueprint {
  position: absolute;
  inset: 0;
  z-index: 0;
  background-image:
    linear-gradient(rgba(143, 169, 196, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 169, 196, .045) 1px, transparent 1px),
    linear-gradient(rgba(143, 169, 196, .09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(143, 169, 196, .09) 1px, transparent 1px);
  background-size: 18px 18px, 18px 18px, 90px 90px, 90px 90px;
  mask-image: radial-gradient(ellipse 95% 90% at 50% 40%, #000 40%, transparent 80%);
  -webkit-mask-image: radial-gradient(ellipse 95% 90% at 50% 40%, #000 40%, transparent 80%);
}

/* Crocini di registro agli angoli */
.angolo {
  position: absolute;
  width: 22px; height: 22px;
  z-index: 3;
  opacity: .5;
}
.angolo::before, .angolo::after {
  content: "";
  position: absolute;
  background: var(--blu-chiaro);
}
.angolo::before { top: 50%; left: 0; right: 0; height: 1px; }
.angolo::after { left: 50%; top: 0; bottom: 0; width: 1px; }
.a-tl { top: 88px; left: 26px; }
.a-tr { top: 88px; right: 26px; }
.a-bl { bottom: 26px; left: 26px; }
.a-br { bottom: 26px; right: 26px; }

/* Mirino CAD che segue il cursore */
.mirino {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  opacity: 0;
  transition: opacity .4s;
}
.hero:hover .mirino { opacity: 1; }
.mirino::before, .mirino::after {
  content: "";
  position: absolute;
  background: rgba(143, 169, 196, .22);
}
.mirino::before { left: 0; right: 0; top: var(--cy, 50%); height: 1px; }
.mirino::after { top: 0; bottom: 0; left: var(--cx, 50%); width: 1px; }
.mirino .coord {
  position: absolute;
  top: var(--cy, 50%);
  left: var(--cx, 50%);
  transform: translate(14px, 14px);
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .08em;
  color: rgba(143, 169, 196, .75);
  white-space: nowrap;
}

/* ---------- HERO home ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  align-items: center;
  background:
    radial-gradient(ellipse 60% 50% at 75% 35%, rgba(51, 80, 109, .16), transparent 70%),
    var(--ink-950);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}

.hero-contenuto {
  padding: calc(var(--header-h) + 40px) 0 110px;
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(30px, 5vw, 70px);
  align-items: center;
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 10px 16px;
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: var(--r-sm);
  background: rgba(255, 255, 255, .03);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .82);
}
.hero-eyebrow .punto {
  width: 7px; height: 7px;
  background: var(--arancio);
  box-shadow: 0 0 0 0 rgba(198, 81, 39, .6);
  animation: pulsa 2.2s infinite;
}
@keyframes pulsa {
  70% { box-shadow: 0 0 0 10px rgba(198, 81, 39, 0); }
  100% { box-shadow: 0 0 0 0 rgba(198, 81, 39, 0); }
}

.hero h1 {
  color: #fff;
  margin: 26px 0 22px;
  max-width: 15ch;
}
.hero h1 .riga { display: block; overflow: hidden; }
.hero h1 .riga > span {
  display: inline-block;
  transform: translateY(110%);
  animation: sali .9s var(--ease-out) forwards;
}
.hero h1 .riga:nth-child(2) > span { animation-delay: .12s; }
@keyframes sali { to { transform: translateY(0); } }

/* Parola che si "decodifica" (scramble via JS) */
.rotatore { display: inline-block; color: var(--blu-chiaro); min-width: 5ch; }
.rotatore.scomposta { color: var(--arancio); }

.hero .lead {
  color: rgba(237, 238, 240, .72);
  opacity: 0;
  animation: appari .8s .5s forwards;
}
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-top: 40px;
  opacity: 0;
  animation: appari .8s .75s forwards;
}
@keyframes appari { to { opacity: 1; } }

/* Disegno tecnico che si traccia da solo */
.hero-disegno { position: relative; }
.hero-disegno svg {
  width: 100%;
  height: auto;
  display: block;
  overflow: visible;
  animation: galleggia-piano 8s ease-in-out infinite alternate;
}
@keyframes galleggia-piano { to { transform: translateY(-10px); } }
.hero-disegno .d {
  fill: none;
  stroke: rgba(143, 169, 196, .8);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
  animation: traccia 1.4s var(--ease-out) forwards;
}
.hero-disegno .d2 { stroke: rgba(143, 169, 196, .38); }
.hero-disegno .quota { stroke: rgba(198, 81, 39, .85); stroke-width: 1; }
.hero-disegno .d:nth-of-type(1) { animation-delay: .2s; }
.hero-disegno .d:nth-of-type(2) { animation-delay: .45s; }
.hero-disegno .d:nth-of-type(3) { animation-delay: .7s; }
.hero-disegno .d:nth-of-type(4) { animation-delay: .95s; }
.hero-disegno .d:nth-of-type(5) { animation-delay: 1.2s; }
.hero-disegno .d:nth-of-type(6) { animation-delay: 1.45s; }
.hero-disegno .d:nth-of-type(7) { animation-delay: 1.7s; }
.hero-disegno .d:nth-of-type(8) { animation-delay: 1.95s; }
.hero-disegno .d:nth-of-type(9) { animation-delay: 2.2s; }
.hero-disegno .d:nth-of-type(10) { animation-delay: 2.45s; }
.hero-disegno .d:nth-of-type(11) { animation-delay: 2.7s; }
.hero-disegno .d:nth-of-type(12) { animation-delay: 2.9s; }
.hero-disegno .d:nth-of-type(13) { animation-delay: 3.1s; }
.hero-disegno .d:nth-of-type(14) { animation-delay: 3.3s; }
@keyframes traccia { to { stroke-dashoffset: 0; } }
.hero-disegno text {
  font-family: var(--font-mono);
  font-size: 11px;
  fill: rgba(198, 81, 39, .9);
  letter-spacing: .08em;
  opacity: 0;
  animation: appari .6s 3.2s forwards;
}
.hero-disegno .etichetta-svg { fill: rgba(143, 169, 196, .65); }
.punto-rilievo { animation: lampeggia 2.6s infinite; }
@keyframes lampeggia { 0%, 100% { opacity: .9; } 50% { opacity: .15; } }

.scroll-hint {
  position: absolute;
  bottom: 22px; left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .34em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .45);
  writing-mode: vertical-rl;
  z-index: 3;
}
.scroll-hint::after {
  content: "";
  width: 1px; height: 44px;
  background: linear-gradient(rgba(255, 255, 255, .5), transparent);
  animation: fila 1.8s ease-in-out infinite;
  transform-origin: 50% 0;
}
@keyframes fila {
  0% { transform: scaleY(0); }
  50% { transform: scaleY(1); }
  100% { transform: scaleY(0); transform-origin: 50% 100%; }
}

/* ---------- Hero pagine interne ---------- */
.hero-pagina {
  position: relative;
  padding: calc(var(--header-h) + clamp(56px, 9vw, 110px)) 0 clamp(56px, 8vw, 96px);
  background:
    radial-gradient(ellipse 55% 70% at 80% 20%, rgba(51, 80, 109, .15), transparent 70%),
    var(--ink-950);
  color: #fff;
  overflow: hidden;
  isolation: isolate;
}
.hero-pagina h1 { color: #fff; }
.hero-pagina .lead { color: rgba(237, 238, 240, .7); margin-top: 18px; }
.briciole {
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--arancio);
  margin-bottom: 16px;
}
.briciole a { color: rgba(255, 255, 255, .5); transition: color .25s; }
.briciole a:hover { color: #fff; }
.briciole span { margin: 0 8px; color: rgba(255, 255, 255, .3); }

/* ---------- Marquee ---------- */
.marquee {
  position: relative;
  background: var(--ink-950);
  padding: 20px 0;
  overflow: hidden;
  border-top: 1px solid rgba(255, 255, 255, .08);
  border-bottom: 1px solid rgba(255, 255, 255, .08);
}
.marquee-track {
  display: flex;
  gap: 56px;
  width: max-content;
  animation: scorri 38s linear infinite;
}
.marquee:hover .marquee-track { animation-play-state: paused; }
.marquee-track span {
  font-family: var(--font-mono);
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .3em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(255, 255, 255, .42);
  transition: color .3s;
}
.marquee-track span:hover { color: var(--blu-chiaro); }
.marquee-track .sep { color: var(--arancio); letter-spacing: 0; }
@keyframes scorri { to { transform: translateX(-50%); } }

/* ---------- Numeri / contatori ---------- */
.griglia-numeri {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  border: 1px solid rgba(255, 255, 255, .12);
}
.numero {
  position: relative;
  text-align: left;
  padding: 34px 28px 30px;
  border-right: 1px solid rgba(255, 255, 255, .12);
  transition: background .35s;
}
.numero:last-child { border-right: 0; }
.numero:hover { background: rgba(143, 169, 196, .06); }
.numero::before {
  content: "";
  position: absolute;
  top: 10px; left: 10px;
  width: 8px; height: 8px;
  border-top: 1px solid var(--arancio);
  border-left: 1px solid var(--arancio);
  opacity: 0;
  transition: opacity .3s;
}
.numero:hover::before { opacity: 1; }
.numero .cifra {
  font-family: var(--font-mono);
  font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 500;
  color: var(--blu-chiaro);
}
.numero .etichetta {
  margin-top: 6px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-inv);
}

/* ---------- Card base ---------- */
.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-1);
  transition: transform .4s var(--ease-out), box-shadow .4s, border-color .4s, outline-color .3s;
  outline: 1px dashed transparent;
  outline-offset: 6px;
}
.card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-2);
  border-color: rgba(51, 80, 109, .45);
  outline-color: rgba(51, 80, 109, .5);   /* selezione CAD tratteggiata */
}
.section-dark .card { border-color: rgba(255, 255, 255, .1); }
.section-dark .card:hover { outline-color: rgba(143, 169, 196, .5); }
/* le card sono sempre chiare: i titoli restano scuri anche dentro .section-dark */
.section-dark .card h2, .section-dark .card h3, .section-dark .card h4 { color: var(--ink-900); }

/* Bagliore che segue il cursore */
.card-luce {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  opacity: 0;
  transition: opacity .4s;
  pointer-events: none;
  background: radial-gradient(320px circle at var(--mx, 50%) var(--my, 50%), rgba(51, 80, 109, .08), transparent 65%);
}
.card:hover .card-luce { opacity: 1; }

/* ---------- Card servizio ---------- */
.griglia-servizi {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.card-servizio { padding: 34px 30px; overflow: hidden; }
.card-servizio .num {
  position: absolute;
  top: 18px; right: 22px;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .1em;
  color: var(--muted);
  opacity: .55;
  transition: color .3s, opacity .3s;
}
.card-servizio .num::before { content: "/ "; color: var(--arancio); }
.card-servizio:hover .num { opacity: 1; color: var(--blu); }
/* Icone "schizzo tecnico": mini tavole su carta millimetrata
   che si ridisegnano a tratto quando la card viene sfiorata */
.icona {
  width: 64px; height: 64px;
  display: grid;
  place-items: center;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background:
    linear-gradient(rgba(51, 80, 109, .07) 1px, transparent 1px) 0 0 / 8px 8px,
    linear-gradient(90deg, rgba(51, 80, 109, .07) 1px, transparent 1px) 0 0 / 8px 8px,
    #fff;
  margin-bottom: 22px;
  transition: border-color .4s, transform .4s var(--ease-out);
}
.icona svg { width: 38px; height: 38px; overflow: visible; }
.icona .t { fill: none; stroke: var(--blu); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.icona .a { fill: none; stroke: var(--arancio); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.card:hover .icona { border-color: var(--blu); transform: rotate(-2deg) scale(1.05); }
.card:hover .icona path, .card:hover .icona circle {
  stroke-dasharray: 1;
  animation: ridisegna .9s var(--ease-out) both;
}
.card:hover .icona path:nth-of-type(2), .card:hover .icona circle:nth-of-type(2) { animation-delay: .12s; }
.card:hover .icona path:nth-of-type(3), .card:hover .icona circle:nth-of-type(3) { animation-delay: .24s; }
.card:hover .icona path:nth-of-type(4), .card:hover .icona circle:nth-of-type(4) { animation-delay: .36s; }
@keyframes ridisegna { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.card-servizio h3 { font-size: 1.16rem; margin-bottom: 10px; }
.card-servizio p { font-size: .95rem; color: var(--muted); }

/* ---------- Card progetto ---------- */
.griglia-progetti {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  counter-reset: fig;
}
.card-progetto { overflow: hidden; display: flex; flex-direction: column; counter-increment: fig; }
.card-progetto .foto {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.card-progetto .foto::before {          /* etichetta da tavola tecnica */
  content: "FIG. " counter(fig, decimal-leading-zero);
  position: absolute;
  top: 12px; right: 12px;
  z-index: 2;
  font-family: var(--font-mono);
  font-size: .64rem;
  letter-spacing: .18em;
  color: rgba(255, 255, 255, .85);
  background: rgba(11, 14, 19, .55);
  border: 1px solid rgba(255, 255, 255, .2);
  padding: 4px 8px;
  backdrop-filter: blur(6px);
}
.card-progetto .foto img,
.card-progetto .foto .cover-blueprint {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .8s var(--ease-out), filter .5s;
}
.card-progetto:hover .foto img { transform: scale(1.07); }
.card-progetto .foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(11, 14, 19, .5), transparent 45%);
  opacity: .8;
  transition: opacity .4s;
}
.card-progetto:hover .foto::after { opacity: .35; }

/* Copertina "blueprint" per progetti senza foto */
.cover-blueprint {
  display: grid;
  place-items: center;
  background:
    linear-gradient(rgba(143, 169, 196, .07) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(90deg, rgba(143, 169, 196, .07) 1px, transparent 1px) 0 0 / 22px 22px,
    linear-gradient(140deg, var(--ink-700), var(--ink-950));
}
.cover-blueprint b {
  font-family: var(--font-mono);
  font-size: 2.7rem;
  font-weight: 500;
  color: var(--blu-chiaro);
  opacity: .9;
}

.chip {
  position: absolute;
  top: 12px; left: 12px;
  z-index: 2;
  padding: 5px 10px;
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: .64rem;
  font-weight: 500;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(11, 14, 19, .55);
  border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(6px);
}
.card-progetto .info { padding: 22px 24px 26px; }
.card-progetto h3 { font-size: 1.16rem; margin-bottom: 6px; }
.card-progetto .luogo {
  display: flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: .7rem;
  font-weight: 500;
  color: var(--blu);
  text-transform: uppercase;
  letter-spacing: .16em;
  margin-bottom: 10px;
}
.card-progetto .luogo svg { width: 13px; height: 13px; }
.card-progetto p { font-size: .93rem; color: var(--muted); }

/* ---------- Filtri lavori ---------- */
.filtri {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
  margin-bottom: 46px;
}
.filtro {
  padding: 11px 20px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--muted);
  transition: all .3s var(--ease-out);
}
.filtro:hover { border-color: var(--blu); color: var(--blu); transform: translateY(-2px); }
.filtro.attivo {
  background: var(--ink-900);
  color: #fff;
  border-color: var(--ink-900);
}
.filtro.attivo::before { content: "▸ "; color: var(--arancio); }
.card-progetto.nascosta { display: none; }
.card-progetto.appare { animation: card-in .55s var(--ease-out); }
@keyframes card-in {
  from { opacity: 0; transform: translateY(26px) scale(.96); }
}

/* ---------- Sezione chi siamo (split) ---------- */
.split {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: clamp(36px, 6vw, 80px);
  align-items: center;
}
.split-foto { position: relative; }
.split-foto .principale {
  border-radius: var(--r-md);
  box-shadow: var(--shadow-2);
  aspect-ratio: 4 / 3;
  object-fit: cover;
  width: 100%;
}
.split-foto .fluttuante {
  position: absolute;
  width: 46%;
  border-radius: var(--r-sm);
  box-shadow: var(--shadow-2);
  border: 4px solid var(--carta);
  bottom: -34px; right: -18px;
  aspect-ratio: 1;
  object-fit: cover;
  animation: galleggia 6s ease-in-out infinite alternate;
}
@keyframes galleggia { to { transform: translateY(-14px); } }
.split-foto .badge-anni {
  position: absolute;
  top: -24px; left: -20px;
  padding: 16px 20px;
  border-radius: var(--r-sm);
  background: var(--ink-900);
  color: #fff;
  box-shadow: var(--shadow-2);
  text-align: left;
  border-left: 3px solid var(--arancio);
  animation: galleggia 7s ease-in-out infinite alternate-reverse;
}
.badge-anni .cifra {
  font-family: var(--font-mono);
  font-size: 1.8rem;
  font-weight: 500;
  color: var(--blu-chiaro);
}
.badge-anni small {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--muted-inv);
}

.lista-check { margin-top: 26px; display: grid; gap: 13px; }
.lista-check li { display: flex; gap: 12px; align-items: flex-start; font-weight: 500; }
.lista-check .segno {
  flex: 0 0 auto;
  width: 22px; height: 22px;
  margin-top: 3px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--ink-900);
  color: var(--arancio);
}
.lista-check .segno svg { width: 12px; height: 12px; }

/* ---------- Card staff ---------- */
.griglia-staff {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}
.card-persona { overflow: hidden; text-align: left; }
.card-persona .foto {
  position: relative;
  aspect-ratio: 1;
  overflow: hidden;
}
.card-persona .foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform .7s var(--ease-out), filter .7s;
  filter: saturate(.85);
}
.card-persona:hover .foto img { transform: scale(1.06); filter: saturate(1.05); }
.card-persona .foto::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(160deg, rgba(51, 80, 109, 0) 55%, rgba(51, 80, 109, .3));
  opacity: 0;
  transition: opacity .5s;
}
.card-persona:hover .foto::after { opacity: 1; }
.card-persona .info { padding: 18px 18px 22px; border-top: 1px solid var(--line); }
.card-persona h3 { font-size: 1.06rem; }
.card-persona .ruolo {
  display: inline-block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: .68rem;
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--blu);
}
.card-persona .ruolo::before { content: "/ "; color: var(--arancio); }

.card-titolare {
  display: grid;
  grid-template-columns: 340px 1fr;
  overflow: hidden;
  margin-bottom: 54px;
}
.card-titolare .foto { overflow: hidden; }
.card-titolare .foto img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top;
  transition: transform .8s var(--ease-out);
}
.card-titolare:hover .foto img { transform: scale(1.04); }
.card-titolare .info { padding: clamp(28px, 4vw, 52px); align-self: center; }
.card-titolare .ruolo-big {
  font-family: var(--font-mono);
  font-size: .74rem;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--arancio);
}
.card-titolare h2 { margin: 8px 0 14px; }

/* ---------- Contatti ---------- */
.griglia-contatti {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin-bottom: 54px;
}
.card-contatto { padding: 30px 24px; text-align: left; }
.card-contatto .icona { margin: 0 0 18px; }
.card-contatto h3 { font-size: 1rem; margin-bottom: 6px; }
.card-contatto p, .card-contatto a { font-size: .92rem; color: var(--muted); }
.card-contatto a:hover { color: var(--blu); }
.card-contatto .orari { display: grid; gap: 3px; font-size: .9rem; }

.blocco-form {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
}
.form-card { padding: clamp(28px, 4vw, 44px); }
.form-griglia { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.campo { position: relative; }
.campo.intero { grid-column: 1 / -1; }
.campo input, .campo textarea {
  width: 100%;
  padding: 15px 16px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--carta);
  font: inherit;
  font-size: .95rem;
  color: var(--text);
  transition: border-color .3s, box-shadow .3s, background .3s;
}
.campo textarea { min-height: 140px; resize: vertical; }
.campo input:focus, .campo textarea:focus {
  outline: none;
  border-color: var(--blu);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(51, 80, 109, .14);
}
.campo input::placeholder, .campo textarea::placeholder { color: #9aa0a9; }

.mappa {
  border-radius: var(--r-md);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  border: 1px solid var(--line);
  min-height: 420px;
}
.mappa iframe { width: 100%; height: 100%; border: 0; display: block; filter: grayscale(.5) contrast(1.02); }

.avviso-invio {
  margin-top: 14px;
  font-family: var(--font-mono);
  font-size: .78rem;
  letter-spacing: .04em;
  color: #0a7a4b;
  opacity: 0;
  transition: opacity .4s;
}
.avviso-invio.visibile { opacity: 1; }

/* ---------- Fascia CTA: tavola tecnica su carta bianca ---------- */
.cta-banda {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-md);
  background:
    linear-gradient(rgba(51, 80, 109, .05) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(90deg, rgba(51, 80, 109, .05) 1px, transparent 1px) 0 0 / 18px 18px,
    linear-gradient(rgba(51, 80, 109, .1) 1px, transparent 1px) 0 0 / 90px 90px,
    linear-gradient(90deg, rgba(51, 80, 109, .1) 1px, transparent 1px) 0 0 / 90px 90px,
    #fff;
  border: 1px solid var(--ink-900);
  color: var(--text);
  padding: clamp(40px, 6vw, 68px) clamp(26px, 5vw, 64px) clamp(26px, 4vw, 40px);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  isolation: isolate;
}
.cta-banda::before {              /* squadratura interna della tavola */
  content: "";
  position: absolute;
  inset: 10px;
  border: 1px solid rgba(51, 80, 109, .3);
  border-radius: 2px;
  pointer-events: none;
}
.cta-banda::after {               /* crocino di registro arancio */
  content: "+";
  position: absolute;
  top: 16px; right: 24px;
  font-family: var(--font-mono);
  font-size: 1.1rem;
  color: var(--arancio);
}
.cta-banda h2 { color: var(--ink-900); max-width: 22ch; }
.cta-banda p { color: var(--muted); margin-top: 10px; max-width: 48ch; }

/* Cartiglio in fondo alla tavola */
.cartiglio {
  flex-basis: 100%;
  display: flex;
  flex-wrap: wrap;
  border: 1px solid var(--ink-900);
  background: #fff;
  position: relative;
  z-index: 1;
}
.cartiglio > div {
  flex: 1 1 auto;
  padding: 10px 18px;
  border-right: 1px solid var(--line);
  display: grid;
  gap: 2px;
}
.cartiglio > div:last-child { border-right: 0; }
.cartiglio span {
  font-family: var(--font-mono);
  font-size: .58rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--muted);
}
.cartiglio b {
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .8rem;
  color: var(--ink-900);
}
.cartiglio .evidenza b { color: var(--arancio); }
.cartiglio a { transition: color .25s; }
.cartiglio a:hover { color: var(--blu); }

/* ---------- Footer ---------- */
.footer {
  background: var(--ink-950);
  color: var(--muted-inv);
  padding: 76px 0 0;
  position: relative;
  overflow: hidden;
}
.footer::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(198, 81, 39, .6), transparent);
}
.footer::after {                    /* wordmark fantasma in fondo */
  content: "COLLETTI";
  position: absolute;
  bottom: -0.18em;
  left: 50%;
  transform: translateX(-50%);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: clamp(5rem, 15vw, 13rem);
  line-height: 1;
  letter-spacing: .02em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(255, 255, 255, .05);
  pointer-events: none;
  white-space: nowrap;
}
.footer-griglia {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1fr;
  gap: 40px;
  padding-bottom: 54px;
  position: relative;
  z-index: 1;
}
.footer .logo img { height: 30px; margin-bottom: 18px; }
.footer p { font-size: .92rem; max-width: 34ch; }
.footer h4 {
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 500;
  font-size: .72rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  margin-bottom: 18px;
}
.footer h4::before { content: "/ "; color: var(--arancio); }
.footer li { margin-bottom: 10px; font-size: .93rem; }
.footer a { transition: color .25s, padding-left .25s; }
.footer a:hover { color: var(--blu-chiaro); padding-left: 5px; }
.footer .orari-riga { display: flex; justify-content: space-between; gap: 14px; }
.footer .orari-riga b { color: var(--text-inv); font-weight: 500; font-family: var(--font-mono); font-size: .84rem; }
.footer-fondo {
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 22px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 10px;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  position: relative;
  z-index: 1;
}
.footer-fondo .cuore { color: var(--arancio); }

/* ---------- Torna su ---------- */
#torna-su {
  position: fixed;
  right: 26px; bottom: 26px;
  width: 50px; height: 50px;
  border-radius: var(--r-sm);
  display: grid;
  place-items: center;
  background: var(--ink-900);
  border: 1px solid rgba(255, 255, 255, .15);
  color: #fff;
  opacity: 0;
  transform: translateY(18px);
  pointer-events: none;
  transition: opacity .35s, transform .35s var(--ease-out), background .3s;
  z-index: 800;
}
#torna-su.visibile { opacity: 1; transform: none; pointer-events: auto; }
#torna-su:hover { background: var(--ink-700); border-color: var(--arancio); transform: translateY(-4px); }
#torna-su svg { width: 20px; height: 20px; }

/* ---------- Reveal allo scroll ---------- */
[data-reveal] {
  opacity: 0;
  transform: translateY(34px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  transition-delay: var(--d, 0s);
  will-change: opacity, transform;
}
[data-reveal="sinistra"] { transform: translateX(-44px); }
[data-reveal="destra"] { transform: translateX(44px); }
[data-reveal="zoom"] { transform: scale(.94); }
[data-reveal].in-vista { opacity: 1; transform: none; }

/* ---------- Tilt 3D ---------- */
[data-tilt] { transform-style: preserve-3d; }
[data-tilt] > * { transform: translateZ(0); }

/* ---------- Responsive ---------- */
@media (max-width: 1020px) {
  .griglia-servizi, .griglia-progetti { grid-template-columns: repeat(2, 1fr); }
  .griglia-staff { grid-template-columns: repeat(2, 1fr); }
  .griglia-numeri { grid-template-columns: repeat(2, 1fr); }
  .griglia-numeri .numero:nth-child(2n) { border-right: 0; }
  .griglia-numeri .numero:nth-child(-n+2) { border-bottom: 1px solid rgba(255, 255, 255, .12); }
  .griglia-contatti { grid-template-columns: repeat(2, 1fr); }
  .footer-griglia { grid-template-columns: 1fr 1fr; }
  .card-titolare { grid-template-columns: 280px 1fr; }
  .hero-contenuto { grid-template-columns: 1fr; }
  .hero-disegno { display: none; }
}

@media (max-width: 820px) {
  .nav { display: none; }
  .hamburger { display: flex; }
  .split { grid-template-columns: 1fr; }
  .split-foto { order: -1; margin-bottom: 30px; }
  .blocco-form { grid-template-columns: 1fr; }
  .card-titolare { grid-template-columns: 1fr; }
  .card-titolare .foto img { max-height: 420px; }
  .angolo { display: none; }
}

@media (max-width: 640px) {
  .griglia-servizi, .griglia-progetti { grid-template-columns: 1fr; }
  .griglia-staff { grid-template-columns: repeat(2, 1fr); }
  .griglia-numeri { grid-template-columns: 1fr 1fr; }
  .griglia-contatti { grid-template-columns: 1fr; }
  .form-griglia { grid-template-columns: 1fr; }
  .footer-griglia { grid-template-columns: 1fr; }
  .hero-cta .btn { width: 100%; justify-content: center; }
  .split-foto .badge-anni { left: 0; }
}

/* ---------- Motion ridotto ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001s !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001s !important;
  }
  html { scroll-behavior: auto; }
  [data-reveal] { opacity: 1; transform: none; }
  .hero-disegno .d { stroke-dashoffset: 0; }
  .hero-disegno text { opacity: 1; }
  .mirino { display: none; }
}

/* ---------- Honeypot anti-spam ---------- */
.honey { position: absolute !important; left: -6000px !important; width: 1px; height: 1px; overflow: hidden; }

/* ============================================================
   Ritocchi responsive: mobile e tablet, sezione per sezione
   ============================================================ */
.griglia-4 { grid-template-columns: repeat(4, 1fr); }
.sezione-numeri { padding-block: 70px; }

@media (max-width: 1020px) {
  .griglia-4 { grid-template-columns: repeat(2, 1fr); }
  /* su tablet il prospetto tecnico resta visibile, sotto il testo */
  .hero-disegno { display: block; max-width: 500px; margin-top: 34px; }
}

@media (max-width: 820px) {
  .cta-banda { padding: 34px 22px 22px; }
  .cartiglio > div { flex: 1 1 50%; border-bottom: 1px solid var(--line); }
  .cartiglio > div:nth-last-child(-n+2) { border-bottom: 0; }
  .cartiglio b { overflow-wrap: anywhere; }
}

@media (max-width: 640px) {
  .section { padding: 56px 0; }
  .sezione-numeri { padding-block: 44px; }

  /* Hero più compatto: meno vuoti, niente disegno né hint */
  .hero { min-height: 92svh; }
  .hero-contenuto { padding: calc(var(--header-h) + 12px) 0 48px; gap: 0; }
  .hero h1 { margin: 18px 0 14px; }
  .hero .lead { font-size: 1rem; }
  .hero-cta { margin-top: 26px; gap: 12px; }
  .hero-disegno, .scroll-hint, .mirino { display: none; }
  .solo-desktop { display: none; }

  .marquee { padding: 13px 0; }
  .marquee-track { gap: 32px; }

  .numero { padding: 18px 16px; }
  .numero .cifra { font-size: 1.65rem; }
  .numero .etichetta { font-size: .6rem; letter-spacing: .12em; }

  /* Chi siamo: spazio vero per badge e foto fluttuante */
  .split-foto { margin-bottom: 62px; }
  .split-foto .fluttuante { right: 0; bottom: -30px; }
  .split-foto .badge-anni { top: -14px; padding: 12px 16px; }
  .badge-anni .cifra { font-size: 1.4rem; }

  /* In home bastano 4 progetti: la pagina resta corta */
  #portfolio .card-progetto:nth-child(n+5) { display: none; }

  /* Filtri lavori: una riga scorrevole invece di tre righe di bottoni */
  .filtri {
    flex-wrap: nowrap;
    justify-content: flex-start;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin-inline: -4vw;
    padding-inline: 4vw;
    padding-bottom: 10px;
    scrollbar-width: none;
  }
  .filtri::-webkit-scrollbar { display: none; }
  .filtro { flex: 0 0 auto; }

  .card-servizio { padding: 26px 22px; }
  .card-servizio .icona { margin-bottom: 16px; }
  .card-progetto .info { padding: 18px 18px 22px; }
  .card-titolare .info { padding: 26px 22px; }
  .card-titolare h2 { font-size: 1.6rem; }

  .griglia-servizi, .griglia-progetti, .griglia-staff, .griglia-contatti { gap: 14px; }
  .griglia-staff { grid-template-columns: 1fr 1fr; }
  .card-persona .info { padding: 14px 12px 18px; }
  .card-persona h3 { font-size: .95rem; }
  .card-persona .ruolo { font-size: .6rem; }

  .mappa { min-height: 320px; }
  .form-card { padding: 24px 20px; }

  .cta-banda { gap: 22px; }
  .cta-banda .btn { width: 100%; justify-content: center; }
  .cartiglio > div { flex: 1 1 100%; border-bottom: 1px solid var(--line); padding: 9px 14px; }
  .cartiglio > div:last-child { border-bottom: 0; }

  #torna-su { right: 16px; bottom: 16px; width: 44px; height: 44px; }
}

/* ---------- Footer su mobile: brand centrato, colonne affiancate ---------- */
@media (max-width: 640px) {
  .footer { padding-top: 52px; }
  .footer-griglia { grid-template-columns: 1fr 1fr; gap: 30px 20px; padding-bottom: 40px; }
  .footer-griglia > div:first-child { grid-column: 1 / -1; text-align: center; }
  .footer-griglia > div:first-child .logo img { margin-inline: auto; height: 26px; }
  .footer p { font-size: .84rem; line-height: 1.6; max-width: 34ch; margin-inline: auto; }
  .footer-griglia > div:last-child { grid-column: 1 / -1; }
  .footer h4 { font-size: .64rem; margin-bottom: 12px; }
  .footer li { font-size: .85rem; margin-bottom: 8px; }
  .footer::after { font-size: 4.4rem; }
  .footer-fondo { flex-direction: column; align-items: center; gap: 6px; text-align: center; font-size: .62rem; }
}

/* ---------- Leggibilità mobile: card a piena larghezza e testi respirabili ---------- */
@media (max-width: 640px) {
  .griglia-4 { grid-template-columns: 1fr; }          /* le 4 card della home: una per riga */
  .h-lg { font-size: clamp(1.55rem, 7vw, 1.9rem); }   /* titoli sezione: a capo più naturale */
  .card-servizio { padding: 28px 24px; }
  .card-servizio h3 { font-size: 1.12rem; }
  .card-servizio p { font-size: .95rem; }
  .card-persona h3 { font-size: 1rem; }
  .card-persona .ruolo { font-size: .62rem; letter-spacing: .06em; }
  .lead { font-size: 1rem; }
}

/* Tre celle numeri: su schermi stretti la terza occupa tutta la riga */
@media (max-width: 1020px) {
  .griglia-numeri .numero:nth-child(3) { grid-column: 1 / -1; border-right: 0; }
}

/* ---------- Switch lingua ---------- */
.nav .lingua, .menu-mobile .lingua {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-mono);
  font-size: .72rem;
  font-weight: 500;
  letter-spacing: .14em;
  color: rgba(255, 255, 255, .75);
  padding: 9px 12px;
  border: 1px solid rgba(255, 255, 255, .2);
  border-radius: var(--r-sm);
  margin-left: 8px;
  transition: color .25s, border-color .25s;
}
.nav .lingua::after { display: none; }
.nav .lingua:hover, .menu-mobile .lingua:hover { color: #fff; border-color: rgba(255, 255, 255, .6); }
.lingua svg { width: 18px; height: 12px; border-radius: 1px; display: block; flex: 0 0 auto; }
.menu-mobile .lingua { font-size: .85rem; margin: 20px 0 0; }

/* Copertina blueprint anche nelle card persona senza foto */
.card-persona .foto .cover-blueprint { width: 100%; height: 100%; }