/* =================================================================
   Valerio Balatroni — sito vetrina · restyle "poster editoriale"
   Design system: token-based, mobile-first.

   Idea guida: la pagina come poster — titoli enormi a righe
   sfalsate, un corsivo serif (Fraunces) usato come "voce a mano"
   dentro i titoli, i cerchi del Lago d'Iseo come vero elemento
   grafico, un solo blocco scuro (il case study) per pagina.

   Font self-hosted in /fonts (nessun CDN esterno — niente richieste
   a Google Fonts, niente problemi GDPR, cache in mano nostra):
   · Manrope variabile (pesi 200-800) per tutto il corpo
   · Fraunces variabile corsivo, solo come accento nei titoli
   ================================================================= */

/* ---------- 0. Font ---------- */
@font-face {
  font-family: "Manrope";
  src: url("../fonts/manrope-variable.woff2") format("woff2-variations");
  font-weight: 200 800;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Fraunces";
  src: url("../fonts/fraunces-italic-variable.woff2") format("woff2-variations");
  font-weight: 100 900;
  font-style: italic;
  font-display: swap;
}

/* ---------- 1. Design tokens ---------- */
:root {
  /* Tema unico, deliberatamente chiaro. "light" forzato anche per i
     controlli nativi del browser così restano chiari a prescindere
     dal sistema. */
  color-scheme: light;

  /* Palette "carta + blu": il fondo e' una carta neutra calda (non
     crema, che tirava verso il beige), il bianco puro resta per le
     sezioni alternate. Su un neutro il blu di Brescia stacca molto
     piu' che su un fondo gia' azzurro. */
  --bg: #f7f6f2;
  --bg-elevated: #ffffff;
  --bg-inset: #efeee8;
  --text: #1a1b1d;
  --text-muted: #6a6c6f;
  --border: #e4e2db;
  --accent: #075da8;
  --accent-strong: #054a86;
  --accent-2: #0b83c4;
  --focus-ring: #075da8;
  --danger: #b3261e;

  /* Blocco pieno (case study): blu Brescia a tutta larghezza. E' il
     momento piu' riconoscibile della pagina, quindi porta il colore
     dell'identita', non un grigio scuro qualsiasi. */
  --ink: #075da8;
  --ink-text: #f2f8fd;
  --ink-muted: rgba(242, 248, 253, .78);
  --ink-border: rgba(242, 248, 253, .35);
  /* Celeste per i dettagli che devono staccare SUL blu pieno: l'azzurro
     --accent-2 su --ink darebbe contrasto 1,6, cioe' invisibile. */
  --celeste: #8fd3f4;

  --font-sans: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI",
    Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Fraunces", Georgia, "Times New Roman", serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas,
    "Liberation Mono", monospace;

  --radius-sm: 8px;
  --radius-md: 14px;
  --radius-lg: 24px;

  --shadow-sm: 0 1px 2px rgba(26, 27, 29, .06);
  --shadow-md: 0 12px 32px -16px rgba(26, 27, 29, .2);

  --container: 1200px;

  --space-1: .25rem;
  --space-2: .5rem;
  --space-3: .75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 4.5rem;
  --space-10: 6rem;

  /* Scala poster: il display è molto più grande di prima. */
  --fs-display: clamp(2.6rem, 8.2vw, 7rem);
  --fs-h1: clamp(2.4rem, 5.5vw, 4.5rem);
  --fs-h2: clamp(1.9rem, 4vw, 3rem);
  --fs-h3: clamp(1.25rem, 1.15rem + .4vw, 1.5rem);
  --fs-lead: clamp(1.05rem, 1rem + .3vw, 1.25rem);
  --fs-body: 1rem;
  --fs-small: .875rem;
  --fs-eyebrow: .72rem;

  --ease: cubic-bezier(.4, 0, .2, 1);
  --dur: .18s;
}

/* ---------- 2. Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  /* Vedi la nota su body: il clip va messo anche qui perché il
     pannello del menu (position: fixed) sfugge al contenimento del
     body e continuerebbe ad allargare la pagina. */
  overflow-x: hidden;
  overflow-x: clip;
}
html:focus-within { scroll-behavior: smooth; }
body {
  min-height: 100svh;
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  line-height: 1.6;
  color: var(--text);
  background: var(--bg);
  /* I cerchi decorativi e il menu fuori schermo sporgono di proposito
     oltre il bordo destro. "hidden" impedisce il trascinamento ma
     lascia la pagina scorrevole via script; "clip" (dove supportato)
     la blocca del tutto — niente sbandamenti orizzontali su mobile. */
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, picture, svg, video { display: block; max-width: 100%; }
/* L'attributo hidden deve avere l'ultima parola: senza questo, una
   qualsiasi regola d'autore con display (es. .field { display: grid })
   lo scavalca e l'elemento resta visibile. */
[hidden] { display: none !important; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; }
a { color: inherit; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); }
p, li { max-width: 68ch; }
ul, ol { padding-left: 1.15em; }
h1, h2, h3, h4 { line-height: 1.1; letter-spacing: -.02em; }

@media (prefers-reduced-motion: reduce) {
  html:focus-within { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- 3. Accessibilità / utility ---------- */
.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.skip-link {
  position: absolute;
  top: -3rem; left: var(--space-4);
  z-index: 100;
  background: var(--accent);
  color: #fff;
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  transition: top var(--dur) var(--ease);
}
.skip-link:focus { top: var(--space-4); }

:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: var(--radius-sm);
}

/* ---------- 4. Layout primitives ---------- */
.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: clamp(1.25rem, 4vw, 3rem);
}

.section { padding-block: var(--space-9); }
.section--tight { padding-block: var(--space-7); }
.section--inset { background: var(--bg-inset); }
/* Alternanza carta/bianco: le sezioni bianche staccano dal fondo
   carta senza bisogno di bordi o righe di separazione. */
.section--white { background: var(--bg-elevated); }

.stack { display: flex; flex-direction: column; }
.stack-sm { gap: var(--space-3); }
.stack-md { gap: var(--space-4); }
.stack-lg { gap: var(--space-5); }
.stack-xl { gap: var(--space-8); }
.cluster { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

.items-center { align-items: center; }
.items-start { align-items: start; }
.text-center { text-align: center; }
.text-small { font-size: var(--fs-small); }
.max-w-prose { max-width: 62ch; }
.max-w-narrow { max-width: 42ch; }
.gap-8 { gap: var(--space-8); }
.mt-3 { margin-top: var(--space-3); }
.mt-4 { margin-top: var(--space-4); }
.mb-4 { margin-bottom: var(--space-4); }
.mb-6 { margin-bottom: var(--space-6); }

.grid {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 640px) {
  .grid--2 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 900px) {
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
  .grid--4 { grid-template-columns: repeat(4, 1fr); }
}

/* ---------- 5. Tipografia ---------- */
/* La "voce": corsivo serif d'accento dentro i titoli. Generato dal
   marcatore *parola* nei testi del CMS (vedi src/lib/site.ts).

   PAREGGIO OTTICO. Due caratteri diversi alla stessa font-size non
   si leggono della stessa dimensione: quello che conta all'occhio è
   l'altezza delle minuscole. Manrope ce l'ha a 0,54em, Fraunces
   corsivo a 0,47em — cioè il corsivo, a parità di font-size, appare
   circa il 13% più piccolo del testo che gli sta accanto. Va quindi
   ingrandito per stare in pari.

   Il rapporto non è uno solo perché Fraunces ha l'asse "optical
   size": più il titolo è grande, più il disegno assottiglia le
   minuscole. Da qui due misure diverse — una per i titoli di sezione
   (--voice-scale) e una per i titoloni da poster, che cambia anche
   per fascia di schermo (--voice-scale-display, poco più sotto).

   Ingrandire un pezzo di riga però alzerebbe l'interlinea di quella
   riga sola, spostando le maschere del poster. Per questo il corsivo
   si ridà l'interlinea del blocco che lo contiene, dichiarata in
   --voice-lh: la riga resta alta esattamente come prima.

   ATTENZIONE: i due valori non vanno dichiarati dentro em.voice. Una
   proprietà scritta sull'elemento stesso batte qualsiasi valore
   ereditato, e le regole di contesto qui sotto non arriverebbero mai
   al corsivo. Stanno quindi come ripiego dentro var(), che è il modo
   corretto di dare un default a una proprietà pensata per ereditare.
     1.14 = pareggio per i titoli di sezione
     1.1  = interlinea di h1…h4 */
em.voice {
  font-family: var(--font-serif);
  font-style: italic;
  font-weight: 400;
  font-size: calc(1em * var(--voice-scale, 1.14));
  line-height: calc(var(--voice-lh, 1.1) / var(--voice-scale, 1.14));
  letter-spacing: 0;
  color: var(--accent);
}
/* Contesti con un'interlinea propria: se non la dichiarassero qui, il
   corsivo si porterebbe dietro quella dei titoli e la riga crescerebbe. */
p, li, .lead, .note { --voice-lh: 1.6; }
.method blockquote { --voice-lh: 1.3; }
.svc-head h2 { --voice-lh: 1.08; }

/* Titoloni. Il pareggio va rifatto per fascia di larghezza, perché i
   titoli sono fluidi: su un telefono il titolo del poster sta sui
   40px e Fraunces ha lì le minuscole più alte, su desktop arriva a
   110px e il carattere le assottiglia. Un valore solo andrebbe bene
   di qua e male di là. */
:root { --voice-scale-display: 1.12; }
@media (min-width: 700px) { :root { --voice-scale-display: 1.16; } }
@media (min-width: 1000px) { :root { --voice-scale-display: 1.19; } }
.frill { color: var(--accent-2); font-style: normal; }

.mono, .eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.eyebrow { display: inline-flex; align-items: center; gap: .8em; }
.eyebrow::before {
  content: "";
  width: 3rem; height: 1px;
  background: var(--accent-2);
}

h1, .h1 { font-size: var(--fs-h1); font-weight: 800; letter-spacing: -.035em; }
h2, .h2 { font-size: var(--fs-h2); font-weight: 800; letter-spacing: -.03em; }
h3, .h3 { font-size: var(--fs-h3); font-weight: 700; }

.lead {
  font-size: var(--fs-lead);
  color: var(--text-muted);
  max-width: 56ch;
}
.lead strong { color: var(--text); }

.text-muted { color: var(--text-muted); }

/* ---------- 6. Header / navigazione ---------- */
/* Assoluto, non fisso: sul poster l'header appartiene alla "copertina"
   e scorre via con lei — così non galleggia mai sopra il blocco scuro
   del case study, dove il blend multiply lo renderebbe illeggibile. */
.site-header {
  position: absolute;
  inset: 0 0 auto 0;
  z-index: 50;
  mix-blend-mode: multiply;
  pointer-events: none;
}
.site-header .container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: 1.1rem;
}
.site-header a, .site-header button { pointer-events: auto; }
/* Compensazione: header fisso, le pagine partono con aria in alto. */
main { padding-top: 4.25rem; }

.brand {
  display: inline-flex;
  align-items: baseline;
  gap: .1em;
  font-weight: 800;
  letter-spacing: -.02em;
  text-decoration: none;
  white-space: nowrap;
}
.brand::after { content: "."; color: var(--accent-2); }
.brand .mark { display: none; }

/* Marchio caricato dal pannello. L'altezza è fissata in rem e la
   larghezza segue le proporzioni del file: così lo stesso SVG regge
   sia il logo per esteso sia il solo segno ridotto, senza ritagli. */
.brand--logo::after { content: none; }
.brand-logo {
  display: block;
  height: 1.35rem;
  width: auto;
  max-width: 15rem;
}
/* Versione negativa: si accende sola dentro una sezione scura. */
.brand-logo--light { display: none; }
[data-surface="ink"] .brand-logo--dark { display: none; }
[data-surface="ink"] .brand-logo--light { display: block; }

.main-nav { display: flex; gap: 1.6rem; margin-left: auto; margin-right: 1.4rem; }
.main-nav a {
  font-size: .85rem;
  font-weight: 600;
  text-decoration: none;
  color: var(--text-muted);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.main-nav a:hover { color: var(--accent); }
.main-nav a[aria-current="page"] { color: var(--text); }
.main-nav a[aria-current="page"]::after {
  content: "";
  display: block;
  height: 2px;
  background: var(--accent-2);
  border-radius: 2px;
}

/* CTA di contatto sempre nel primo schermo, desktop e mobile */
.nav-cta {
  background: var(--accent);
  color: #fff;
  text-decoration: none;
  font-size: .85rem;
  font-weight: 700;
  padding: .55rem 1.1rem;
  border-radius: 999px;
  white-space: nowrap;
  transition: background-color var(--dur) var(--ease);
}
.nav-cta:hover { background: var(--accent-strong); }

.nav-toggle {
  display: none;
  background: none;
  border: 0;
  padding: .4rem;
  color: var(--text);
}
.nav-toggle svg { width: 1.4rem; height: 1.4rem; }
.nav-toggle .icon-close { display: none; }
.nav-toggle[aria-expanded="true"] .icon-open { display: none; }
.nav-toggle[aria-expanded="true"] .icon-close { display: block; }

.nav-scrim { display: none; }

@media (max-width: 859px) {
  .site-header .container { gap: var(--space-3); }
  /* Ordine a schermo stretto: marchio, poi CTA spinta a destra, e
     l'hamburger come ultimo elemento nell'angolo. */
  .brand { flex: none; order: 1; }
  .nav-cta { order: 2; margin-left: auto; font-size: .8rem; padding: .5rem .95rem; }
  .nav-scrim { order: 3; }
  .main-nav { order: 4; }
  .nav-toggle {
    display: block;
    order: 5;
    /* Sopra lo scrim: senza questo, da menu aperto la X non risponde
       al tocco perché lo sfondo scuro la copre. */
    position: relative;
    z-index: 3;
  }
  .nav-scrim {
    display: block;
    position: fixed;
    inset: 0;
    z-index: 1;
    background: rgba(36, 30, 20, .35);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--dur) var(--ease);
  }
  .nav-scrim[data-open="true"] { opacity: 1; pointer-events: auto; }
  .main-nav {
    position: fixed;
    top: 0; right: 0; bottom: 0;
    z-index: 2;
    width: min(78vw, 320px);
    background: var(--bg-elevated);
    border-left: 1px solid var(--border);
    flex-direction: column;
    gap: var(--space-5);
    padding: 5.5rem var(--space-6) var(--space-6);
    transform: translateX(100%);
    /* Chiuso: fuori schermo E invisibile. La visibility evita due
       cose insieme — che il pannello allarghi la pagina in orizzontale
       e che i suoi link restino raggiungibili da tastiera e screen
       reader mentre il menu è chiuso. */
    visibility: hidden;
    transition: transform .28s var(--ease), visibility .28s var(--ease);
  }
  .main-nav[data-open="true"] { transform: translateX(0); visibility: visible; }
  .main-nav a { font-size: 1.15rem; color: var(--text); }
  /* Nel menu aperto il blend "multiply" renderebbe strano lo sfondo
     del pannello: il pannello è opaco, quindi va bene comunque; il
     toggle resta sopra lo scrim. */
  .site-header { mix-blend-mode: normal; }
}

/* ---------- 7. Bottoni & link ---------- */
.btn-ink {
  display: inline-flex;
  align-items: center;
  gap: .7rem;
  background: var(--text);
  color: var(--bg);
  text-decoration: none;
  font-weight: 700;
  padding: 1rem 1.7rem;
  border-radius: 999px;
  transition: background-color var(--dur) var(--ease);
  white-space: nowrap;
}
.btn-ink:hover { background: var(--accent); }

/* Bottoni del form (classi storiche riusate) */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .6rem;
  font-weight: 700;
  border: 1px solid var(--text);
  background: none;
  padding: .9rem 1.5rem;
  border-radius: 999px;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.btn-primary { background: var(--text); border-color: var(--text); color: var(--bg); }
.btn-primary:hover:not(:disabled) { background: var(--accent); border-color: var(--accent); }
.btn:disabled { opacity: .55; cursor: default; }
.btn-block { width: 100%; }

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-weight: 700;
  text-decoration: none;
  color: var(--text);
  white-space: nowrap;
}
.link-arrow .arrow {
  color: var(--accent);
  display: inline-block;
  transition: transform var(--dur) var(--ease);
}
.link-arrow:hover .arrow { transform: translateX(4px); }

.link-quiet {
  color: var(--text-muted);
  text-decoration: underline;
  text-decoration-color: var(--border);
  text-underline-offset: .2em;
  font-size: var(--fs-small);
}
.link-quiet:hover { color: var(--text); text-decoration-color: var(--accent); }

/* ---------- 8. Cerchi del Lago d'Iseo ---------- */
.rings {
  position: absolute;
  right: -18vw;
  top: 50%;
  transform: translateY(-50%);
  width: min(58vw, 640px);
  aspect-ratio: 1;
  color: var(--accent);
  opacity: .5;
  pointer-events: none;
  z-index: 0;
}
.rings--ink {
  right: auto;
  left: -20vw;
  color: var(--ink-text);
  opacity: .16;
}
@media (max-width: 760px) {
  .rings { width: 72vw; right: -22vw; opacity: .35; }
  .rings--ink { right: auto; left: -30vw; }
}

/* ---------- 9. Hero poster ---------- */
.hero-poster {
  min-height: calc(100svh - 4.25rem);
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  padding-block: var(--space-8) var(--space-8);
}
.hero-poster .container { position: relative; z-index: 1; }
.kicker { margin-bottom: var(--space-6); display: inline-flex; align-items: center; gap: .8em; }
.kicker::before { content: ""; width: 3rem; height: 1px; background: var(--accent-2); }

.poster {
  font-size: var(--fs-display);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .99;
  /* Corsivo: alle misure da poster Fraunces assottiglia le minuscole,
     quindi qui serve un pareggio più generoso che nei titoli piccoli. */
  --voice-scale: var(--voice-scale-display);
  --voice-lh: .99;
}
/* Ogni riga è una finestra da cui il testo risale (animazione GSAP).
   La finestra deve però essere più alta della riga, altrimenti taglia
   quello che esce dal riquadro del testo: sotto le discendenti (la g
   di "Ogni" e di "progetto" scende 0,25em sotto la linea di base,
   quella del corsivo anche 0,30em), sopra le ascendenti del corsivo e
   gli accenti delle maiuscole. Lo spazio aggiunto viene ripreso da un
   margine negativo di pari valore: l'interlinea del poster non cambia
   di un pixel.
   Se tocchi questi valori, allinea yPercent in js/animations.js —
   la riga deve restare fuori dalla finestra prima di risalire. */
.poster .line {
  display: block;
  overflow: hidden;
  padding-top: .14em;
  padding-bottom: .24em;
  margin-top: -.14em;
  margin-bottom: -.24em;
}
.poster .line-inner { display: block; }
.poster .line:nth-child(2) .line-inner { margin-left: clamp(1.5rem, 8vw, 7rem); }
.poster .line:nth-child(3) .line-inner { margin-left: clamp(.5rem, 3vw, 2.5rem); }

.hero-below {
  margin-top: var(--space-7);
  margin-left: clamp(1.5rem, 8vw, 7rem);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-6);
}
.hero-below .note {
  max-width: 46ch;
  color: var(--text-muted);
  font-size: 1.05rem;
}
.hero-below .note strong { color: var(--text); }

.cta-pair { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

.scroll-hint {
  position: absolute;
  bottom: var(--space-5);
  left: clamp(1.25rem, 4vw, 3rem);
  display: flex;
  align-items: center;
  gap: .7rem;
}
.scroll-hint .bar {
  width: 1px; height: 3rem;
  background: var(--text-muted);
  animation: drip 1.8s ease-in-out infinite;
  transform-origin: top;
}
@keyframes drip { 50% { transform: scaleY(.4); } }
@media (max-width: 760px) {
  .hero-below { margin-left: 0; }
  .cta-pair { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }

.scroll-hint { display: none; }
}

/* ---------- 10. Intestazione di pagina (pagine interne) ---------- */
.page-head { padding-block: var(--space-8) var(--space-7); position: relative; overflow: clip; }
.page-head h1 {
  font-size: clamp(2.4rem, 6vw, 5rem);
  letter-spacing: -.04em;
  line-height: 1;
  margin-block: var(--space-4) var(--space-4);
  max-width: 18ch;
  --voice-scale: var(--voice-scale-display);
  --voice-lh: 1;
}
.page-head .lead { max-width: 52ch; }

/* ---------- 11. Elenco poster (servizi / capacità / approccio) ---------- */
/* 42rem: il titolo sta in due righe invece di tre — con tre, il
   corsivo si spezzava a metà e perdeva forza. */
.svc-head { margin-bottom: var(--space-8); max-width: 42rem; }
.svc-head h2 { margin-top: var(--space-3); line-height: 1.08; }

.svc {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(1rem, 4vw, 3.5rem);
  align-items: baseline;
  padding-block: var(--space-6);
  border-top: 1px solid var(--border);
  text-decoration: none;
}
.svc:last-of-type { border-bottom: 1px solid var(--border); }
.svc .n {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.3rem, 2.6vw, 2rem);
  color: var(--accent-2);
  min-width: 3.2em;
}
.svc h3 {
  font-size: clamp(1.8rem, 4.5vw, 3.4rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
a.svc:hover h3 { color: var(--accent); transform: translateX(.35em); }
.svc p { color: var(--text-muted); max-width: 56ch; margin-top: var(--space-3); }
/* Sfalsamento progressivo, da poster */
@media (min-width: 861px) {
  .svc:nth-of-type(2) { padding-left: 4rem; }
  .svc:nth-of-type(3) { padding-left: 8rem; }
  .svc:nth-of-type(4) { padding-left: 12rem; }
}

.feature-list { list-style: none; padding: 0; display: grid; gap: var(--space-2); margin-top: var(--space-4); }
.feature-list li { display: flex; gap: .75rem; align-items: baseline; max-width: none; }
.feature-list li::before { content: "–"; color: var(--accent-2); flex: none; }

/* ---------- 11-bis. Il metodo: la spina dorsale ----------
   Volutamente ALLINEATO, al contrario dell'elenco servizi che e'
   sfalsato: una sequenza si legge meglio in colonna, e la differenza
   di impaginazione dice da sola "questo e' un percorso, non un
   elenco". Linea e pallini sono ancorati allo stesso asse
   (--spine-x) cosi' restano allineati a ogni dimensione. */
.flow {
  --spine-x: 1.1rem;
  --pad: clamp(1.1rem, 2.2vw, 1.6rem);
  --dot: 1.15rem;
  --dot-y: calc(var(--pad) + .55rem);
  position: relative;
  display: grid;
}
.step {
  display: grid;
  grid-template-columns: 6rem 1fr;
  gap: clamp(1rem, 3vw, 2.5rem);
  padding-block: var(--pad);
  position: relative;
}
.step::before {
  content: "";
  position: absolute;
  left: var(--spine-x);
  transform: translateX(-50%);
  top: 0; bottom: 0;
  width: 1px;
  background: var(--border);
}
/* Il primo tratto parte dal proprio pallino, l'ultimo ci finisce:
   la linea non sborda mai oltre la sequenza. */
.step:first-child::before { top: calc(var(--dot-y) + var(--dot) / 2); }
.step:last-child::before { bottom: auto; height: calc(var(--dot-y) + var(--dot) / 2); }
.step .marker { z-index: 1; display: flex; align-items: baseline; }
.step .dot {
  position: absolute;
  left: var(--spine-x);
  top: var(--dot-y);
  transform: translateX(-50%);
  width: var(--dot); height: var(--dot);
  border-radius: 50%;
  /* Il pallino "buca" la linea: prende il fondo della sezione che lo
     ospita, quindi va ridichiarato dove il fondo cambia. */
  background: var(--bg);
  border: 2px solid var(--accent);
  transition: background-color var(--dur) var(--ease);
  z-index: 2;
}
.section--white .step .dot { background: var(--bg-elevated); }
.section--inset .step .dot { background: var(--bg-inset); }
.step:hover .dot { background: var(--accent); }
.step .n {
  font-family: var(--font-serif);
  font-style: italic;
  font-size: clamp(1.15rem, 2.2vw, 1.65rem);
  color: var(--accent-2);
  margin-left: calc(var(--spine-x) + var(--dot) / 2 + .9rem);
  white-space: nowrap;
}
.step h3 {
  font-size: clamp(1.35rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.05;
  margin-bottom: var(--space-2);
}
.step p { color: var(--text-muted); max-width: 58ch; }
.step .outcome {
  display: inline-flex;
  align-items: baseline;
  gap: .55rem;
  margin-top: var(--space-3);
  font-weight: 700;
  font-size: .93rem;
}
.step .outcome::before { content: "\2192"; color: var(--accent-2); }

@media (max-width: 760px) {
  .step { grid-template-columns: 1fr; gap: .2rem; }
  .step::before, .step .dot { display: none; }
  .step .n { margin-left: 0; }
}

/* ---------- 11-ter. Fascia strumenti ----------
   Qui il posizionamento diventa esplicito: i nomi degli strumenti
   sono tutti allo stesso peso, di proposito — nessuno e' "il mio". */
.tools {
  margin-top: clamp(2rem, 4vw, 3rem);
  padding: clamp(1.5rem, 3vw, 2.2rem);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--bg-inset);
}
.tools .chips {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-bottom: var(--space-4);
  padding: 0;
  list-style: none;
}
.tools .chip {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .06em;
  text-transform: uppercase;
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  color: var(--text-muted);
  padding: .4rem .8rem;
  border-radius: 999px;
  white-space: nowrap;
  max-width: none;
}
.tools p { max-width: 62ch; color: var(--text-muted); }
.tools p strong { color: var(--text); }

/* ---------- 11-quater. Servizi, taglio editoriale (home) ----------
   Niente riquadri: filetto sottile, icona e titolo grande. Le due
   colonne sono sfalsate in verticale, così l'occhio scende a zigzag
   invece di leggere una griglia — stessa logica del titolo poster.
   Meno "template", più pagina di rivista. */
.svc-list {
  display: grid;
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .svc-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(2rem, 5vw, 4.5rem);
  }
  .svc-list > :nth-child(2) { margin-top: 3.5rem; }
  .svc-list > :nth-child(3) { margin-top: -1.5rem; }
  .svc-list > :nth-child(4) { margin-top: 2rem; }
  /* Oltre la quarta voce il ritmo riparte, così la sezione regge
     anche se dal pannello ne vengono aggiunte altre. */
  .svc-list > :nth-child(6) { margin-top: 3.5rem; }
  .svc-list > :nth-child(7) { margin-top: -1.5rem; }
  .svc-list > :nth-child(8) { margin-top: 2rem; }
}
.svc-item {
  display: block;
  padding-block: var(--space-5);
  border-top: 1px solid var(--border);
  text-decoration: none;
  transition: border-top-color var(--dur) var(--ease);
}
.svc-item:hover { border-top-color: var(--accent); }
.svc-item-head {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-bottom: var(--space-2);
}
.svc-item h3 {
  font-size: clamp(1.3rem, 2.4vw, 1.9rem);
  font-weight: 800;
  letter-spacing: -.03em;
  line-height: 1.1;
  transition: color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.svc-item:hover h3 { color: var(--accent); transform: translateX(.25em); }
.svc-item p { color: var(--text-muted); font-size: .95rem; max-width: 40ch; }
.svc-item .go {
  display: inline-block;
  margin-top: var(--space-3);
  color: var(--accent-2);
  font-weight: 700;
  font-size: .9rem;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.svc-item:hover .go { opacity: 1; transform: translateX(0); }

/* Icona: stessa famiglia ovunque compaia */
.svc-icon { display: block; width: 2.2rem; height: 2.2rem; color: var(--accent); flex: none; }
.svc-icon svg { width: 100%; height: 100%; }
.svc .svc-icon { width: 2.4rem; height: 2.4rem; margin-bottom: var(--space-3); }

@media (max-width: 759px) {
  .svc-list > * { margin-top: 0 !important; }
}

/* ---------- 11-quinquies. Pagina Servizi ----------
   Ogni servizio è un blocco a piena pagina, non una riga d'elenco:
   a sinistra il discorso, a destra le informazioni che servono per
   decidere (cosa include, da quanto parte, quanto dura). L'alternanza
   carta/bianco separa un servizio dall'altro senza righe. */

/* Indice in testa: sommario per chi legge, mappa per i motori. */
.svc-index {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.svc-index-link {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  border-radius: 999px;
  padding: .5rem 1rem .5rem .7rem;
  font-size: var(--fs-small);
  font-weight: 700;
  text-decoration: none;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.svc-index-link:hover { border-color: var(--accent); color: var(--accent); }
.svc-index-link .svc-icon { width: 1.35rem; height: 1.35rem; }

.service-block { scroll-margin-top: 1.5rem; }
.service-grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .service-grid { grid-template-columns: 1.05fr .95fr; gap: var(--space-8); }
}
.service-main h2 {
  font-size: clamp(1.9rem, 4vw, 3rem);
  letter-spacing: -.035em;
  line-height: 1.05;
  margin-block: var(--space-3) var(--space-4);
}
.service-main .lead { margin-bottom: var(--space-4); max-width: 46ch; }
.service-for {
  color: var(--text-muted);
  max-width: 46ch;
  margin-bottom: var(--space-5);
  font-size: var(--fs-small);
}
.service-for strong { color: var(--text); }

.service-includes h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-3);
}
.service-includes .feature-list { margin-top: 0; }

/* Le informazioni "dure": prezzo d'ingresso, tempi, tecnologie. */
.service-spec {
  margin-top: var(--space-6);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  display: grid;
  gap: var(--space-4);
}
.service-spec .spec-row { display: grid; gap: .15rem; }
.service-spec dt {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.service-spec dd { margin: 0; font-weight: 700; }
.service-spec .spec-price {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--accent);
  line-height: 1.1;
}
.service-spec .spec-note {
  font-weight: 400;
  font-size: var(--fs-small);
  color: var(--text-muted);
}

.price-note {
  max-width: 62ch;
  color: var(--text-muted);
  font-size: var(--fs-small);
  border-left: 2px solid var(--accent-2);
  padding-left: var(--space-4);
}

/* ---------- 11-sexies. Domande frequenti ----------
   <details> nativo: funziona senza JavaScript, è accessibile da
   tastiera, e il testo delle risposte resta nel documento — quindi
   leggibile da Google e dagli assistenti anche quando è chiuso. */
.faq { display: grid; max-width: 68ch; }
.faq-item { border-top: 1px solid var(--border); }
.faq-item:last-child { border-bottom: 1px solid var(--border); }
.faq-item summary {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-4);
  padding-block: var(--space-4);
  cursor: pointer;
  font-weight: 700;
  font-size: 1.05rem;
  list-style: none;
  transition: color var(--dur) var(--ease);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--accent); }
.faq-sign {
  position: relative;
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-top: .35rem;
}
.faq-sign::before, .faq-sign::after {
  content: "";
  position: absolute;
  inset: 50% 0 auto 0;
  height: 1.5px;
  background: var(--accent);
  transition: transform var(--dur) var(--ease);
}
.faq-sign::after { transform: rotate(90deg); }
.faq-item[open] .faq-sign::after { transform: rotate(0deg); }
.faq-answer { padding-bottom: var(--space-5); }
.faq-answer p { color: var(--text-muted); max-width: 62ch; }

/* ---------- 11-septies. Portfolio: il racconto in tre tempi ---------- */
.story {
  display: grid;
  gap: var(--space-6);
  grid-template-columns: 1fr;
  counter-reset: story;
}
@media (min-width: 860px) {
  .story { grid-template-columns: repeat(3, 1fr); gap: var(--space-7); }
}
.story-step {
  counter-increment: story;
  border-top: 1px solid var(--border);
  padding-top: var(--space-4);
}
.story-step h3 {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -.02em;
  margin-bottom: var(--space-3);
}
.story-step h3::before {
  content: counter(story, decimal-leading-zero);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  font-weight: 500;
  color: var(--accent-2);
}
.story-step p { color: var(--text-muted); font-size: .95rem; }

/* ---------- 11-octies. Contatti ----------
   Il form pesa più della colonna informativa, non il contrario: è
   quello che deve attirare l'occhio appena la pagina si apre. */
.contact-head { position: relative; overflow: clip; }
.contact-head .container { position: relative; z-index: 1; }

.contact-grid {
  display: grid;
  gap: var(--space-7);
  grid-template-columns: 1fr;
  align-items: start;
}
@media (min-width: 900px) {
  .contact-grid { grid-template-columns: 1.15fr .85fr; gap: var(--space-8); }
}
.contact-side { display: grid; gap: var(--space-6); }
.contact-fact { display: grid; gap: var(--space-2); }
.contact-fact p { color: var(--text-muted); font-size: .95rem; max-width: 40ch; }
.contact-fact p strong { color: var(--text); }
.contact-mail {
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--accent);
  text-decoration: none;
  word-break: break-word;
}
.contact-mail:hover { text-decoration: underline; text-underline-offset: .2em; }

/* ---------- 12. Frase-manifesto ---------- */
.method { padding-block: var(--space-6) var(--space-9); }
.method blockquote {
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 300;
  letter-spacing: -.02em;
  line-height: 1.3;
  max-width: 30ch;
  margin-inline: auto;
  text-align: center;
}
.method blockquote em.voice { color: var(--accent-2); }

/* ---------- 13. Blocco inchiostro (case study) ---------- */
.case-ink {
  background: var(--ink);
  color: var(--ink-text);
  padding-block: var(--space-9);
  position: relative;
  overflow: hidden;
}
.case-ink .container { position: relative; z-index: 1; }
.case-ink .mono, .case-ink .eyebrow { color: var(--ink-muted); }
/* Le etichette "Stack"/"Categoria"/"Ruolo" usano di base --text-muted,
   che e' pensato per lo sfondo chiaro: sul blu pieno il contrasto
   crolla a 1,27 e spariscono. Stesso trattamento delle eyebrow qui
   sopra — contrasto verificato 6,25. */
.case-ink .spec-row dt { color: var(--ink-muted); }
.case-ink .eyebrow::before { background: var(--accent-2); }
.case-grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: var(--space-8);
  align-items: center;
}
.case-ink h2 {
  font-size: clamp(2.4rem, 5vw, 4.2rem);
  letter-spacing: -.03em;
  line-height: 1;
  margin-block: var(--space-4) var(--space-5);
  --voice-scale: var(--voice-scale-display);
  --voice-lh: 1;
}
.case-ink h2 em.voice { color: var(--accent-2); font-weight: 300; }
.case-ink p { color: var(--ink-muted); max-width: 46ch; margin-bottom: var(--space-6); }
.tags { display: flex; flex-wrap: wrap; gap: .6rem; margin-bottom: var(--space-6); }
.tag {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  border: 1px solid var(--ink-border);
  padding: .35rem .8rem;
  border-radius: 999px;
  white-space: nowrap;
}
/* Link principale in fondo a un blocco. Era nato dentro il blocco blu,
   quindi aveva il colore chiaro fisso: sulla carta era invisibile.
   Ora il colore di base è quello del testo normale e viene ribaltato
   solo dove serve, dentro le superfici scure. */
.link-big {
  display: inline-block;
  color: var(--text);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 2px solid var(--accent);
  padding-bottom: .2rem;
  transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.link-big:hover { color: var(--accent); }
[data-surface="ink"] .link-big { color: var(--ink-text); border-bottom-color: var(--accent-2); }
[data-surface="ink"] .link-big:hover { color: var(--celeste); border-bottom-color: var(--celeste); }

/* Screenshot vero, se presente */
.case-shot-img {
  border-radius: var(--radius-md);
  box-shadow: 0 32px 64px -24px rgba(5, 40, 70, .45);
  transform: rotate(2deg);
}
/* Segnaposto "interfaccia" finché non c'è uno screenshot reale */
.shot {
  background: var(--bg-elevated);
  color: var(--text);
  border-radius: var(--radius-md);
  padding: var(--space-5);
  transform: rotate(2deg);
  box-shadow: 0 32px 64px -24px rgba(5, 40, 70, .45);
  display: grid;
  gap: .7rem;
}
.shot .row { display: flex; gap: .7rem; align-items: center; }
.shot .pill { height: .8rem; border-radius: 4px; background: var(--bg-inset); flex: 1; }
.shot .pill.b { background: color-mix(in srgb, var(--accent) 25%, var(--bg-inset)); }
.shot .sq { width: 2.2rem; height: 2.2rem; border-radius: 8px; background: var(--accent); flex: none; }
.shot .foot { font-family: var(--font-mono); font-size: .68rem; color: var(--text-muted); text-align: right; }
@media (max-width: 860px) {
  .case-grid { grid-template-columns: 1fr; gap: var(--space-6); }
}

/* ---------- 13-bis. Il form in fondo alla home ---------- */
#scrivimi { scroll-margin-top: 2rem; }
.write-grid {
  display: grid;
  gap: var(--space-7);
  align-items: start;
  grid-template-columns: 1fr;
}
@media (min-width: 900px) {
  .write-grid { grid-template-columns: .9fr 1.1fr; }
}
.write-title {
  font-size: clamp(2rem, 4.5vw, 3.4rem);
  letter-spacing: -.035em;
  line-height: 1.05;
  --voice-lh: 1.05;
  margin-block: var(--space-3) var(--space-4);
  max-width: 14ch;
}
.write-grid .text-muted a { color: var(--accent); }

/* ---------- 14. Invito di chiusura pagina ---------- */
.signoff-poster { padding-block: var(--space-9) var(--space-8); text-align: center; }
.signoff-poster .mono { display: block; margin-bottom: var(--space-5); }
.signoff-poster a.big {
  display: inline-block;
  text-decoration: none;
  font-size: clamp(2.2rem, 6.5vw, 5.5rem);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: 1.05;
  max-width: 18ch;
  --voice-scale: var(--voice-scale-display);
  --voice-lh: 1.05;
}
.signoff-poster a.big:hover em.voice { text-decoration: underline; text-decoration-thickness: .05em; text-underline-offset: .12em; }
.signoff-poster .sub { margin-top: var(--space-5); color: var(--text-muted); margin-inline: auto; }
.signoff-poster .sub a { color: var(--accent); text-decoration: underline; text-underline-offset: .18em; }

/* ---------- 15. Componenti di contenuto vari ---------- */
.hero-grid {
  display: grid;
  gap: var(--space-8);
  align-items: center;
}
@media (min-width: 860px) {
  .hero-grid { grid-template-columns: 1.1fr .9fr; }
}

.badge {
  display: inline-flex;
  align-items: center;
  padding: .25rem .7rem;
  border-radius: 999px;
  border: 1px solid var(--accent-2);
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.placeholder-media {
  display: grid;
  place-items: center;
  aspect-ratio: 16 / 10;
  background: var(--bg-inset);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
  color: var(--text-muted);
  font-family: var(--font-mono);
  font-size: var(--fs-small);
  text-align: center;
  padding: var(--space-4);
}
.placeholder-media--wide { aspect-ratio: 21 / 9; }

/* Segno grafico al posto delle immagini mancanti: finché non ci sono
   ritratto e screenshot reali, meglio un elemento voluto che un
   riquadro tratteggiato con scritto "segnaposto" — che finisce nei
   risultati di ricerca e dice al visitatore "non è finito". */
.portrait-mark, .card-mark {
  display: grid;
  place-items: center;
  background: var(--bg-inset);
  border-radius: var(--radius-lg);
  color: var(--accent);
  overflow: hidden;
}
.portrait-mark { aspect-ratio: 16 / 10; }
.portrait-mark svg { width: 62%; opacity: .5; }
.card-mark { aspect-ratio: 16 / 10; }
.card-mark svg { width: 55%; opacity: .45; }

.spec-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-6) var(--space-8);
  max-width: none;
}
.spec-row { display: flex; flex-direction: column; gap: .3em; }
.spec-row dt {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.spec-row dd { margin: 0; font-weight: 700; }

/* ---------- 16. Carosello (Altri lavori) ---------- */
.carousel-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  margin-bottom: var(--space-6);
}
.carousel-nav { display: flex; gap: var(--space-2); }
.carousel-btn {
  display: inline-grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  color: var(--text);
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.carousel-btn svg { width: 1.125rem; height: 1.125rem; }
.carousel-btn:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.carousel-btn:disabled { opacity: .35; cursor: default; }

.carousel-track {
  display: flex;
  gap: var(--space-6);
  list-style: none;
  padding: 0 0 var(--space-2);
  margin: 0;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scrollbar-width: none;
}
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-card {
  flex: 0 0 min(340px, 82vw);
  scroll-snap-align: start;
  opacity: .55;
  transform: scale(.97);
  transition: opacity .35s var(--ease), transform .35s var(--ease);
}
.carousel-card.is-active { opacity: 1; transform: scale(1); }
.carousel-dots {
  display: flex;
  justify-content: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
}
.carousel-dot {
  width: .5rem; height: .5rem;
  padding: 0;
  border: 0;
  border-radius: 999px;
  background: var(--border);
  transition: background var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.carousel-dot.is-active { background: var(--accent); transform: scale(1.4); }

/* ---------- 17. Form contatti ---------- */
.card {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  display: grid;
  gap: var(--space-5);
}
.field { display: grid; gap: .45rem; }
.field label {
  font-family: var(--font-mono);
  font-size: var(--fs-eyebrow);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.field input, .field textarea, .field select {
  border: 0;
  border-bottom: 1px solid var(--border);
  border-radius: 0;
  background: none;
  padding: .55rem .1rem;
  width: 100%;
  transition: border-color var(--dur) var(--ease);
}
.field textarea { min-height: 8.5rem; resize: vertical; }
.field input:focus, .field textarea:focus, .field select:focus {
  outline: none;
  border-bottom-color: var(--accent);
}

/* Menu a tendina: aspetto nativo rimosso e freccia disegnata da noi,
   così l'oggetto ha la stessa riga sottile degli altri campi invece
   del riquadro di sistema. */
.select-wrap { position: relative; display: grid; }
.field select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 2rem;
  cursor: pointer;
  color: var(--text);
}
.field select:invalid { color: var(--text-muted); }
.select-arrow {
  position: absolute;
  right: .2rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  color: var(--accent);
  pointer-events: none;
}
.field-hint { font-size: var(--fs-small); color: var(--text-muted); }
.honeypot { position: absolute; left: -9999px; opacity: 0; pointer-events: none; }
.form-status { min-height: 1.5em; font-weight: 600; max-width: none; }
.form-status[data-state="success"] { color: var(--accent-strong); }
.form-status[data-state="error"] { color: var(--danger); }

/* ---------- 18. Footer ---------- */
.site-footer {
  border-top: 1px solid var(--border);
  padding-block: var(--space-6);
  font-size: var(--fs-small);
  color: var(--text-muted);
}
.site-footer .container {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-4);
  align-items: center;
  justify-content: space-between;
}
.site-footer a { text-decoration: none; }
.site-footer a:hover { color: var(--accent); }

/* ---------- 19. Portfolio: galleria, griglia, navigazione ----------
   Aggiunto con il rifacimento del portfolio: ogni progetto può avere
   più schermate, e i progetti con abbastanza contenuto hanno una
   pagina propria. */

/* --- Galleria a scorrimento ---
   Il meccanismo è lo scroll nativo con scroll-snap: funziona col dito,
   col trackpad e da tastiera anche se JavaScript non parte. Le frecce
   e i pallini li accende main.js e sono un di più. */
.gal { position: relative; }
.gal-rail {
  display: flex;
  gap: var(--space-4);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  /* Spazio sotto per l'ombra delle schermate, che altrimenti verrebbe
     tagliata dal contenitore che scorre. */
  padding-bottom: var(--space-3);
  scrollbar-width: thin;
  scrollbar-color: var(--border) transparent;
  /* Il rail è focalizzabile per lo scorrimento da tastiera: l'anello di
     focus deve stare comodo, non incollato alle immagini. */
  border-radius: var(--radius-md);
}
.gal-rail::-webkit-scrollbar { height: 6px; }
.gal-rail::-webkit-scrollbar-thumb { background: var(--border); border-radius: 99px; }
.gal-rail::-webkit-scrollbar-track { background: transparent; }

.gal-slide {
  /* Volutamente più larga di metà contenitore: così due schermate non
     ci stanno mai affiancate e si vede sempre lo spigolo della
     successiva, che è l'invito a scorrere. Se ci stessero entrambe, i
     comandi non avrebbero niente da comandare. */
  flex: 0 0 min(100%, 46rem);
  scroll-snap-align: start;
  margin: 0;
}
.gal-slide img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
}
.gal-slide figcaption {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-top: var(--space-3);
  display: flex;
  gap: .6em;
  align-items: baseline;
}
.gal-n { color: var(--accent); font-weight: 700; }

/* Immagine singola: nessun comando, nessuna striscia. */
.gal-single { margin: 0; }
.gal-single img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
  border: 1px solid var(--border);
  background: var(--bg-elevated);
  box-shadow: var(--shadow-md);
}
.gal-single figcaption {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-top: var(--space-3);
}

/* Comandi della galleria */
.gal-ctrl {
  display: flex;
  align-items: center;
  gap: var(--space-4);
  margin-top: var(--space-4);
}
.gal-arrow {
  width: 2.4rem; height: 2.4rem;
  flex: none;
  display: grid; place-items: center;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--bg-elevated);
  color: var(--text);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
.gal-arrow svg { width: 1.1rem; height: 1.1rem; }
.gal-arrow:hover:not(:disabled) { border-color: var(--accent); color: var(--accent); }
.gal-arrow:disabled { opacity: .3; cursor: default; }
.gal-dots { display: flex; gap: .45rem; flex-wrap: wrap; }
.gal-dot {
  width: .5rem; height: .5rem;
  padding: 0;
  border: 0; border-radius: 50%;
  background: var(--border);
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.gal-dot.is-active { background: var(--accent); transform: scale(1.35); }

/* Galleria dentro il blocco blu: bordi e comandi vanno ribaltati,
   altrimenti spariscono sul fondo pieno. */
.gal--ink .gal-slide img,
.gal--ink.gal-single img { border-color: var(--ink-border); }
.gal--ink .gal-slide figcaption,
.gal--ink.gal-single figcaption { color: var(--ink-muted); }
.gal--ink .gal-n { color: var(--celeste, #8fd3f4); }
.gal--ink .gal-rail { scrollbar-color: var(--ink-border) transparent; }
.gal--ink .gal-rail::-webkit-scrollbar-thumb { background: var(--ink-border); }
.gal--ink .gal-arrow {
  background: transparent;
  border-color: var(--ink-border);
  color: var(--ink-text);
}
.gal--ink .gal-arrow:hover:not(:disabled) { background: rgba(242, 248, 253, .14); border-color: var(--ink-text); color: var(--ink-text); }
.gal--ink .gal-dot { background: var(--ink-border); }
.gal--ink .gal-dot.is-active { background: var(--ink-text); }

/* --- Griglia dei progetti --- */
.proj-grid {
  display: grid;
  gap: var(--space-7) var(--space-6);
  grid-template-columns: 1fr;
}
@media (min-width: 760px) {
  .proj-grid { grid-template-columns: repeat(2, 1fr); }
  /* Con un progetto solo la scheda diventa una fascia larga: una card
     stretta in mezzo a due colonne vuote fa sembrare l'elenco monco. */
  .proj-grid[data-count="1"] { grid-template-columns: 1fr; }
  .proj-grid[data-count="1"] .proj-card {
    grid-template-columns: 1.05fr .95fr;
    align-items: center;
    gap: var(--space-6);
  }
}
@media (min-width: 1080px) {
  .proj-grid[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
}

.proj-card { display: grid; gap: var(--space-4); align-content: start; }
.proj-cover {
  border-radius: var(--radius-md);
  overflow: hidden;
  border: 1px solid var(--border);
  background: var(--bg-inset);
  aspect-ratio: 16 / 10;
}
.proj-cover img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: top center;
  transition: transform .5s var(--ease);
}
.proj-card:hover .proj-cover img { transform: scale(1.03); }
.proj-cover-empty {
  width: 100%; height: 100%;
  display: grid; place-items: center;
  background:
    repeating-linear-gradient(-45deg, transparent 0 10px, color-mix(in srgb, var(--accent) 7%, transparent) 10px 11px),
    var(--bg-inset);
}
.proj-cover-empty span {
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.proj-body { display: grid; gap: var(--space-2); }
.proj-body .mono { font-size: .65rem; }
.proj-body h3 { font-size: 1.35rem; letter-spacing: -.025em; line-height: 1.15; }
.proj-body h3 a { text-decoration: none; }
.proj-body h3 a:hover { color: var(--accent); }
/* Tutta la scheda cliccabile, non solo il titolo: il bersaglio grande
   è quello che si usa davvero, soprattutto col dito. */
.proj-body h3 a::after {
  content: "";
  position: absolute;
  inset: 0;
}
.proj-card { position: relative; }
.proj-body h3 .ext { color: var(--text-muted); font-size: .8em; }
.proj-body p { color: var(--text-muted); font-size: .95rem; }
.proj-stack {
  display: flex; flex-wrap: wrap; gap: .4rem;
  list-style: none; padding: 0; margin-top: var(--space-2);
}
.proj-stack li {
  font-family: var(--font-mono);
  font-size: .62rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: .22rem .55rem;
}

/* --- Briciole di pane e navigazione fra progetti --- */
.crumbs {
  display: flex; align-items: center; gap: .6rem;
  font-family: var(--font-mono);
  font-size: .68rem;
  letter-spacing: .06em;
  color: var(--text-muted);
  margin-bottom: var(--space-4);
}
.crumbs a { color: var(--text-muted); text-decoration: none; }
.crumbs a:hover { color: var(--accent); }

.proj-nav-wrap { border-top: 1px solid var(--border); }
.proj-nav {
  display: flex;
  justify-content: space-between;
  gap: var(--space-5);
  flex-wrap: wrap;
}
.proj-nav-item {
  display: grid;
  gap: .25rem;
  text-decoration: none;
  max-width: 22ch;
}
.proj-nav-item--next { text-align: right; margin-left: auto; }
.proj-nav-item strong {
  font-size: 1.15rem;
  letter-spacing: -.02em;
  font-weight: 800;
}
.proj-nav-item:hover strong { color: var(--accent); }

/* Link secondario dentro il blocco blu (accanto al link principale). */
.link-small-ink {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--ink-muted);
  text-decoration: none;
  border-bottom: 1px solid var(--ink-border);
  padding-bottom: .15em;
}
.link-small-ink:hover { color: var(--ink-text); border-bottom-color: var(--ink-text); }

/* ---------- 20. Lightbox ----------
   Il pannello vive fuori dal flusso della pagina, sopra tutto. Sfondo
   quasi nero ma non nero pieno: sul blu del sito un nero assoluto
   stacca in modo duro, questo lo accompagna. */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(11, 15, 20, .97);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-4);
  padding: clamp(1rem, 4vw, 3rem);
}
.lb-stage {
  margin: 0;
  max-width: min(96vw, 1400px);
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  align-items: center;
}
.lb-stage img {
  max-width: 100%;
  /* Lascia spazio alla didascalia sotto e ai margini: senza questo
     limite un'immagine molto alta esce dallo schermo. */
  max-height: 78vh;
  width: auto;
  border-radius: var(--radius-md);
  background: var(--bg-elevated);
}
.lb-stage figcaption {
  display: flex;
  gap: 1em;
  align-items: baseline;
  justify-content: center;
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: rgba(255, 255, 255, .62);
  text-align: center;
}
.lb-stage figcaption span:first-child { color: var(--celeste); font-weight: 700; }

.lb-close,
.lb-arrow {
  flex: none;
  display: grid;
  place-items: center;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 50%;
  background: transparent;
  color: #fff;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lb-close:hover,
.lb-arrow:hover { background: rgba(255, 255, 255, .16); border-color: rgba(255, 255, 255, .6); }
.lb-close { position: absolute; top: clamp(1rem, 3vw, 2rem); right: clamp(1rem, 3vw, 2rem); width: 2.75rem; height: 2.75rem; }
.lb-close svg { width: 1.2rem; height: 1.2rem; }
.lb-arrow { width: 3rem; height: 3rem; }
.lb-arrow svg { width: 1.3rem; height: 1.3rem; }

/* Su schermo stretto le frecce laterali mangerebbero l'immagine:
   scendono sotto, appoggiate al bordo inferiore. */
@media (max-width: 700px) {
  .lightbox { flex-wrap: wrap; align-content: center; }
  .lb-stage { order: -1; flex-basis: 100%; }
  .lb-stage img { max-height: 66vh; }
}

/* L'immagine cliccabile: il cursore e un lieve stacco dicono che si
   può ingrandire, senza aggiungere icone sopra la schermata. */
.gal-zoom {
  display: block;
  cursor: zoom-in;
  border-radius: var(--radius-md);
  transition: transform .35s var(--ease);
}
.gal-zoom:hover { transform: translateY(-3px); }
.gal-zoom img { margin: 0; }

/* ---------- 21. Dicono di me ----------
   Nessun riquadro: le recensioni sono testo, con il virgolettato serif
   come unico segno grafico. Stesso ritmo sfalsato dei servizi in Home. */
.rec-list {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8) 0;
}
@media (min-width: 800px) {
  .rec-list {
    grid-template-columns: repeat(2, 1fr);
    column-gap: clamp(2.5rem, 6vw, 5rem);
  }
  .rec-list > :nth-child(2) { margin-top: 3rem; }
  .rec-list > :nth-child(3) { margin-top: -1rem; }
  .rec-list > :nth-child(4) { margin-top: 2rem; }
  .rec-list > :nth-child(6) { margin-top: 3rem; }
  .rec-list > :nth-child(7) { margin-top: -1rem; }
  .rec-list > :nth-child(8) { margin-top: 2rem; }
}
.rec {
  display: grid;
  gap: var(--space-3);
  position: relative;
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
}
.rec-stars { display: flex; gap: .15rem; color: var(--accent); }
.rec-stars svg { width: .95rem; height: .95rem; }
.rec-text {
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--text);
  max-width: 46ch;
}
/* Le virgolette aperte in Fraunces: l'unico ornamento, coerente con
   l'accento usato nei titoli. */
.rec-text::before {
  content: "“";
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--accent-2);
  font-size: 1.6em;
  line-height: 0;
  margin-right: .12em;
  vertical-align: -.28em;
}
.rec-who {
  font-family: var(--font-mono);
  font-size: .7rem;
  letter-spacing: .06em;
  color: var(--text-muted);
  display: flex;
  flex-wrap: wrap;
  gap: .55em;
  align-items: baseline;
}
.rec-who b { color: var(--text); font-weight: 700; letter-spacing: .04em; }

.rec-foot {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  flex-wrap: wrap;
}
.rec-foot .rec-tot {
  font-family: var(--font-mono);
  font-size: .72rem;
  letter-spacing: .06em;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: .7em;
  flex-wrap: wrap;
}