/* ══════════════════════════════════════════════════════════════
   Sezioni della pagina che scorre sopra lo stage fisso.
   Token e regole: references/DESIGN.md — 5 grigi + un solo
   elemento colorato, radius 0, nessuna ombra, righelli 1px.
   Scala fluida: tutto in rem su html{font-size:1.05vw}.
   ══════════════════════════════════════════════════════════════ */

html{font-size:1.05vw}
/* Sul telefono il rem segue ancora la larghezza, ma dentro un tetto e
   un pavimento (2026-09-25): a 390px vale come prima, e un Android da
   360px o un iPhone Pro Max da 430px non rimpiccioliscono o gonfiano
   tutto ciò che non ha già una misura sua. */
@media (max-width:900px){ html{font-size:clamp(9.6px, 2.6vw, 11px)} }

/* La pagina è trasparente e non cattura i click, tranne dove serve */
#page{position:relative;z-index:1;pointer-events:none}
/* summary: le voci di Perché Salzillo si aprono col + (non erano cliccabili) */
#page a, #page button, #page input, #page textarea, #page summary, #page .contact{pointer-events:auto}

/* 180vh e non più 300 (2026-09-28, «troppo a rilento»): la discesa
   della torre ora chiede ~3,8 schermate invece di ~5,7 */
#hero-spacer{height:130vh}   /* 2026-09-30: tutto il tratto prima di Perché noi ~35% più rapido */

/* Capitolo pinnato: il contenuto tiene mentre il fondo evolve */
.chapter{height:260vh}
.chapter .sticky, #s-cerniera .sticky, #s-cantieri .sticky,
#s-ristrutturazioni .sticky,
#s-piuma .sticky, #s-cases .sticky, #s-storia .sticky{
  position:sticky;top:0;height:100vh;overflow:hidden;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:2.5rem;
}

.sec-label{
  font-size:.75rem;font-weight:700;letter-spacing:.12em;
  color:var(--text-muted);text-transform:uppercase;margin-bottom:1.6rem;
}
/* Il numero di capitolo fra parentesi quadre, come in img-10 e img-15:
   sta accanto alla dicitura, non al posto suo — la reference può
   permettersi il solo numero, qui il visitatore deve anche capire
   di che capitolo si parla. */
.cap-num{color:var(--text-display);margin-right:.9em}
.sec-display{
  font-size:6.8rem;line-height:.78;font-weight:600;
  letter-spacing:0;text-transform:uppercase;color:var(--text-display);
  margin-bottom:2rem;
}
/* La finestra della riga respira sopra di un filo, e il filo si riprende
   col margine negativo: la posizione non cambia, ma i diacritici delle
   maiuscole (la Ù di PIÙ) smettono di essere tagliati dall'overflow —
   con line-height .73 l'accento sta fuori dal content box.
   Il reveal fa SALIRE le righe (yPercent 112 → 0): il bordo che deve
   clippare è quello di sotto, e quello resta dov'è. */
.sec-display .line{display:block;overflow:hidden;padding-top:.2em;margin-top:-.2em}
.sec-display .line__in{display:block;will-change:transform}

/* ── Il wipe: come compare ogni titolo ─────────────────────
   Due fronti sullo stesso asse verticale, entrambi scrubbati da
   js/type.js → wipeReveal(). `--wipe` è una maschera con stacco
   netto (due stop alla stessa posizione): sopra il fronte il testo
   c'è, sotto non c'è ancora — è il taglio a metà parola che si
   vede in img-06. `--heat` viene dopo, riga per riga, e porta
   l'arancio al colore di default.
   Valori a riposo = 1: senza JS il titolo è semplicemente lì. */
@property --wipe{ syntax:'<number>'; inherits:false; initial-value:1 }
@property --heat{ syntax:'<number>'; inherits:false; initial-value:1 }
/* Quanto il titolo è già virato al massimo contrasto. Eredita, perché
   a leggerlo è `--display-ink` sulle righe figlie. */
@property --nero{ syntax:'<number>'; inherits:true; initial-value:0 }

.sec-display{--display-ink:var(--text-display)}
/* I tre titoli dei capitoli hanno lo stesso corpo (committente, 2026-09-24).
   È il più grande che tiene SOSTENIBILITA' (14 lettere) nella sua colonna:
   al corpo pieno di .sec-display usciva e finiva sopra il mattone. */
#s01-arte .sec-display, #s02-struttura .sec-display, #s03-finiture .sec-display{font-size:5.8rem}
.sec-display--q{--display-ink:var(--text-bright)}
/* Il titolo che si scurisce mentre scorri (capitolo 01): il grigio di
   sistema su fondo cemento tiene poco, e la schermata è chiara per
   tutta la sua corsa. `--text-max` vira col tema, quindi è «nero sul
   cemento» senza scrivere un colore fisso. Il valore lo muove lo
   scroll (js/scroll.js → initViraTitolo); a riposo è 0, cioè il
   titolo di sempre. */
.sec-display--vira{
  --display-ink:color-mix(in srgb, var(--text-max) calc(var(--nero) * 100%), var(--text-display));
}
/* …tranne la prima riga (SOLIDITA'), che resta nel grigio dei titoli come
   SOSTENIBILITA' e SOSTANZA: solo la seconda va al nero (2026-09-24). */
.sec-display--vira .line:first-child .line__in{--display-ink:var(--text-display)}
/* Titolo nel blu istituzionale del marchio (#4A6C93, assets/logo/marchio.svg):
   chiesto per "DISPONIBILI ORA" il 2026-09-23. Passa da --display-ink e
   non da color, così il wipe arancione si raffredda nel blu. */
.sec-display--blu{--display-ink:var(--marchio-blu)}
/* L'etichetta del capitolo vira con lo stesso tempo del titolo (2026-09-23) */
.sec-label--vira{
  color:color-mix(in srgb, var(--text-max) calc(var(--nero) * 100%), var(--text-muted));
}
/* il numero [ 01 ] vira col resto dell'etichetta (2026-09-24) */
.sec-label--vira .cap-num{color:inherit}
/* e dal 2026-09-24 anche il paragrafo */
.sec-body.sec-body--vira{
  color:color-mix(in srgb, var(--text-max) calc(var(--nero) * 100%), var(--text-bright));
}

.sec-display:not(.ignite){
  --wipe:1;
  -webkit-mask-image:linear-gradient(to bottom,#000 calc(var(--wipe) * 100%),transparent calc(var(--wipe) * 100%));
  mask-image:linear-gradient(to bottom,#000 calc(var(--wipe) * 100%),transparent calc(var(--wipe) * 100%));
}
.sec-display:not(.ignite) .line__in{
  --heat:1;
  color:color-mix(in srgb, var(--display-ink) calc(var(--heat) * 100%), var(--accent));
}
/* Enfasi bicolore: le ultime righe del titolo vanno al massimo di
   contrasto — bianco puro sulla notte, nero sul cemento (`--max` vira
   col tema, quindi è lo stesso attributo a fare entrambi i versi).
   Si scrive su --display-ink, non su color, altrimenti scavalcherebbe
   il raffreddamento del wipe e la riga non passerebbe mai dall'arancio.
   `DESIGN.md` vieta il bianco puro sui titoli: è la riga sbagliata
   corretta nel briefing — le catture della reference la smentiscono. */
.sec-display .line__in.is-max{--display-ink:var(--text-max)}
.sec-body{
  font-size:1.05rem;line-height:1.5;font-weight:400;
  color:var(--text-bright);max-width:34rem;
}
.todo{color:var(--text-muted);font-size:.85em;letter-spacing:.02em}

/* ── Il paragrafo in alto a destra ─────────────────────────
   Chiesto per il capitolo 01 (2026-09-23): il titolo resta solo in
   basso a sinistra e la schermata si legge in diagonale. Il blocco è
   in posizione assoluta dentro lo sticky, quindi esce dalla colonna
   che spinge tutto in fondo senza toccarla.
   `top` non è il margine della sezione ma quello dell'header, che è
   fisso e passa sopra: sotto i 7rem il testo gli finirebbe dietro. */
/* Allineato a sinistra (committente, 2026-09-24; prima centrato), con gli
   a capo voluti: una frase per blocco. */
/* In basso a destra, col fondo allineato a quello del titolo (padding
   dello sticky 2,5rem + margine sotto il titolo 2rem) — committente,
   2026-09-24; prima stava in alto, sotto l'header. */
.chapter--nota-alta .sec-body{
  position:absolute;bottom:4.5rem;right:2.5rem;
  max-width:36rem;text-align:left;hyphens:none;
  font-size:1.35rem;line-height:1.45;font-weight:700;
}
/* una frase per blocco, righe bilanciate dentro ogni frase */
.sec-body .frase{display:block;text-wrap:balance}
/* parole chiave nel blu del marchio (committente, 2026-09-24) */
.sec-body .blu{color:var(--marchio-blu)}
@media (max-width:900px){
  .chapter--nota-alta .sec-body{
    position:static;max-width:none;text-align:left;margin-top:1.4rem;
  }
}

/* ── Interstiziali (statement senza numero) ───────────────── */
#s-piuma .sticky--mid{justify-content:center}
/* Stessa legge del display hero: il corpo si ancora all'ALTEZZA del
   viewport (la reference fa così), con un tetto in vw perché la riga
   non sfondi la colonna. La copy che teneva il tetto in vw basso
   ("UN MODO DI COSTRUIRE", 11,8em) era di #s-via, tolta il
   2026-09-23: ora la classe la usa solo il capitolo della piuma, e
   chi ci scriverà una copy più corta si ritroverà il termine in vh
   al comando, col corpo più grande. */
.sec-display--st{font-size:min(20.8vh, 8.0vw);line-height:.73}
/* Giustezza alternata: non è una riga più lunga, è un blocco costruito
   su due allineamenti — e l'ultima riga deborda oltre il bordo destro,
   come faceva la hero. Nessuna sezione la usa più da quando #s-via è
   stata tolta (2026-09-23): resta perché è un pattern del sistema,
   pronto per la prossima schermata-manifesto. */
.sec-display--alt .line--dx{text-align:right;margin-right:calc(-1 * var(--bleed-sez, 4vw))}
/* L'altra faccia della stessa regola: una riga che non si allinea a
   destra ma RIENTRA (img-23). Il padding sta sulla .line, non sul suo
   contenuto: la maschera del wipe lavora sulla riga intera. */
.line--rientro{padding-left:1.4em}
.chapter--m{height:230vh}

/* ── Sezioni 4 e 5: due colonne speculari ──────────────────
   Nella reference la 4 ha l'oggetto a sinistra e il testo a destra
   (img-10), la 5 è la sua immagine speculare (img-15). Lo scambio
   avviene nella stessa transizione in cui il fondo vira.
   Lo slot dell'oggetto resta VUOTO: lo riempie lo step 05 col
   mattone. Qui si prepara solo il posto. */
.chapter--duo .sticky{
  display:grid;grid-template-columns:1fr 1fr;
  align-items:center;column-gap:3rem;
}
.duo__testo{display:flex;flex-direction:column;justify-content:center;min-width:0}
/* Due paragrafi corti affiancati invece di un blocco solo: nella
   reference (img-10, img-15) stanno su circa un terzo di larghezza
   ciascuno, sotto il titolo. */
.duo__para{display:grid;grid-template-columns:1fr 1fr;gap:2.2rem;max-width:34rem}
.duo__para .sec-body{max-width:none}
.duo__oggetto{position:relative;min-width:0;align-self:stretch}
/* il canvas della sequenza del mattone (js/effects/brick.js) */
.mattone__pel{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Capitolo C: l'oggetto sta al centro-sinistra, il titolo a destra.
   Col bake trasparente le crepe si aprono sul cemento della pagina e
   arrivano fino al bordo del canvas, dove venivano tagliate di netto:
   una linea verticale a metà schermo. La maschera le fa svanire invece
   di troncarle — sul bordo destro, dove incontrano il titolo, e in
   basso, dove escono dallo schermo. */
.piuma__oggetto, .mattone-volo{
  position:absolute;left:0;top:0;width:56%;height:100%;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(to right,#000 74%,transparent 99%);
  mask-image:linear-gradient(to right,#000 74%,transparent 99%);
}
/* Il mattone unico di 02 → 03 → piuma (2026-09-24): sta nel fondo fisso
   e lo sposta solo la y, quindi niente sticky da inseguire. Parte fuori
   schermo in alto; sul mobile non c'è (lì i mattoni sono posati). */
.mattone-volo{will-change:transform}
/* Sul telefono (2026-09-25) il mattone è di nuovo UNO, come sul
   desktop: una fascia a tutta larghezza nel fondo fisso, dietro le
   scritte di 02, 03 e piuma, che js/scroll.js (mattoneTelefono) aggancia
   ai tre riquadri vuoti delle sezioni e tiene al centro dello schermo
   mentre passa dall'uno all'altro. */
@media (max-width:900px){
  .mattone-volo{
    width:100%;height:min(40svh, 300px);
    -webkit-mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
    mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
    visibility:hidden;
  }
}
/* default: oggetto a sinistra, testo a destra (sezione 4) */
.chapter--duo .duo__oggetto{order:1}
.chapter--duo .duo__testo  {order:2}
/* speculare: testo a sinistra, oggetto a destra (sezione 5) */
.chapter--duo.duo--specchio .duo__testo  {order:1}
.chapter--duo.duo--specchio .duo__oggetto{order:2}

/* Il disegno tecnico in basso a sinistra della sezione 5 (img-15):
   linee grigie e un quadratino arancione fermo. */
/* Il disegno è appeso SOTTO il testo e non entra nella centratura della
   colonna: così titolo e paragrafi del 03 stanno alla stessa altezza di
   quelli del 02 (committente, 2026-09-24: «posizioni come la slide prima»). */
.duo__testo{position:relative}
/* Il paragrafo della 02 su due righe larghe quanto il titolo (2026-09-24):
   min-content fa della parola più lunga del titolo la misura della colonna. */
/* Dal 2026-09-24 il testo del 02 è lungo (scritto dal committente) e non
   sta più in due righe: resta largo quanto il titolo. Il 03 fa lo stesso. */
/* il paragrafo si allarga fino al margine destro, non più largo solo
   quanto il titolo (committente, 2026-09-24) */
#s02-struttura .duo__para, #s03-finiture .duo__para{display:block;max-width:none}
/* Stesso corpo e peso del paragrafo della 01, e un po' più staccati dal
   titolo (committente, 2026-09-24). */
#s02-struttura .sec-body, #s03-finiture .sec-body{font-size:1.35rem;line-height:1.45;font-weight:700}
#s02-struttura .duo__para, #s03-finiture .duo__para{margin-top:1.6rem}
.duo__dia{display:block;width:15rem;height:11rem;position:absolute;top:100%;left:0;margin-top:2.4rem}

/* ── Capitolo piuma: le parole si accendono una alla volta ──
   Il testo sta a destra e il campo di filamenti resta libero a
   sinistra, come nella reference. Serve spazio di scroll: la
   virata notte→cemento si compie tutta dentro questa sezione. */
/* 600vh = 1.620 px per riga a viewport 1080, la misura del faretto
   nella reference. A 320vh ne dava 864 e il faretto passava alla riga
   dopo prima che si leggesse quella accesa. */
/* 340vh: caduta 120vh + una pausa a mattone schiantato + i 200vh in cui
   sale il pannello di Perché noi (2026-09-30). Più corta, il pannello
   copriva il mattone ancora a mezz'aria. */
#s-piuma{height:340vh}
/* Il blocco è ancorato a destra ma le righe partono tutte dalla
   stessa colonna, come DEFY / GRAVITY / WITH / ELEGANCE in img-17:
   `width:max-content` fa sì che il blocco si stringa sulla riga più
   lunga, e dentro le righe sono allineate a sinistra. Prima ogni
   riga si allineava per conto suo a destra, e ballavano. */
#s-piuma .sticky--mid{align-items:flex-end}
#s-piuma .sec-display--st{width:max-content;max-width:52%;text-align:left}

/* Faretto riga per riga: `--cur` va da 0 (quasi invisibile) a 1
   (leggibile) ed è ciò che GSAP scrubba. Non si accumula — nella
   ref le righe già passate tornano chiare come quelle non ancora
   raggiunte, ed è quel contrasto a far leggere il movimento.
   Il colore resta un color-mix, così la riga continua a seguire la
   virata del tema mentre si accende: niente rgb congelato inline. */
@property --cur{ syntax:'<number>'; inherits:false; initial-value:0 }
.ignite .line{
  --cur:0;
  color:color-mix(in srgb, var(--ignite-on) calc(var(--cur) * 100%), var(--ignite-off));
}
/* Il quadratino d'accento sta su una colonna fissa a sinistra del
   blocco e scende soltanto di riga in riga: la x non la tocca il JS. */
.ignite{position:relative}
.ignite__dot{
  /* +15% e un filo più in basso del centro riga (committente, 2026-09-24) */
  position:absolute;left:-3.4rem;top:0;width:.483rem;height:.483rem;
  margin-top:calc(-.24rem + .15em);
  background:var(--accent);pointer-events:none;opacity:0;will-change:transform;
}

/* ── Perché Salzillo: sei chip che orbitano ───────────────── */
/* Erano ~1.093 px in tutto — la sezione passava in un colpo di rotella.
   450vh = ~1.200 px per voce. */
#s-perche{background:var(--bg);padding:8rem 2.5rem;min-height:450vh}
.perche{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;
        align-items:center;justify-content:center;gap:2.4rem}
/* Le chip ORBITANO: stanno vicine al titolo, non ai bordi dello schermo.
   A 78rem finivano contro il margine e la figura non si leggeva più come
   un sistema attorno a un centro (img-35). */
.orbita{position:relative;width:min(62rem,80vw);aspect-ratio:16/8}
.orbita__titolo{
  position:absolute;inset:0;display:flex;flex-direction:column;
  align-items:center;justify-content:center;
  font-size:min(13vh,7vw);line-height:.86;font-weight:600;text-transform:uppercase;
  color:var(--text-display);text-align:center;pointer-events:none;
}
/* le chip: riquadro scuro, pallino arancione, etichetta, + che apre */
.chip-o{
  position:absolute;width:15rem;background:var(--surface-2);
  border:1px solid var(--rule);padding:.7rem .9rem;
}
.chip-o summary{
  display:flex;align-items:center;gap:.6rem;cursor:pointer;list-style:none;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;color:var(--text-display);
}
.chip-o summary::-webkit-details-marker{display:none}
.chip-o__i{width:.5rem;height:.5rem;background:var(--accent);flex:0 0 auto}
/* Il + sta in una cella sua, divisa da un filo: nella reference la chip è
   due riquadri accostati, non un'etichetta con un segno in coda. */
.chip-o summary b{
  margin:-.7rem -.9rem -.7rem auto;padding:.7rem .9rem;
  display:flex;align-items:center;align-self:stretch;
  border-left:1px solid var(--rule);
  color:var(--text-muted);font-weight:600;
}
.chip-o[open] summary b{color:var(--accent)}
.chip-o .sec-body{font-size:.82rem;margin-top:.6rem;max-width:none}
/* sei posizioni attorno al titolo */
.chip-o--1{left:0;top:6%}
.chip-o--2{right:0;top:6%}
.chip-o--3{left:-2%;top:42%}
.chip-o--4{right:-2%;top:42%}
.chip-o--5{left:12%;bottom:2%}
.chip-o--6{right:12%;bottom:2%}
/* la CTA: l'unico fondo arancione della pagina, centrata sotto l'orbita
   come in img-35. Il selettore è doppio apposta: .btn-accent, che la
   allinea a sinistra, sta più in basso nel foglio e a parità di
   specificità vincerebbe lei. */
.perche .perche__cta{
  display:inline-block;align-self:center;
  text-decoration:none;background:var(--accent);color:var(--accent-ink);
  font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.85rem;
  padding:1rem 2.2rem;border-radius:var(--radius-btn);
}
.perche .perche__cta:hover{background:var(--accent-hi)}

/* ── Servizi & certificazioni ─────────────────────────────── */
/* Erano ~114 px per card: nessun termine di paragone li difende.
   320vh = ~430 px per card. */
/* Il contenuto si incolla, come in tutte le altre sezioni alte: senza
   sticky la griglia resta in cima e i restanti 220vh sono schermo nero.
   (Difetto che veniva da prima dello step 06 — stessa causa della
   sezione ristrutturazioni.) */
#s-servizi{background:var(--bg);min-height:320vh}
.servizi{
  position:sticky;top:0;min-height:100vh;padding:8rem 2.5rem;
  display:flex;flex-direction:column;justify-content:center;
}
/* I filtri dei servizi sono stati tolti il 2026-09-24 (committente). */
.servizi__grid{
  /* tre colonne, non quattro: le voci sono sei e la griglia si chiude
     in due righe piene invece di lasciare due celle vuote in fondo */
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;   /* otto voci dal 2026-09-30 */
  background:var(--divider-solid,#3D3D3D);border:1px solid var(--divider-solid,#3D3D3D);
}
.svc{background:var(--surface-1);padding:1.6rem;min-height:11rem}
.svc[hidden]{display:none}
.svc__t{
  font-size:1.15rem;font-weight:600;text-transform:uppercase;
  color:var(--text-display);margin-bottom:.7rem;line-height:1.1;
}

/* ── In vendita: schede immobile ───────────────────────────
   Le altre due categorie sono gallerie da guardare; questa deve far
   chiedere informazioni, quindi ogni immobile è una scheda con i
   suoi dati e una sola azione in fondo. Stessa griglia a filo dei
   servizi: fondo chiaro, filetti, nessun angolo arrotondato. */
#s-vendita{background:var(--bg)}
.vendita{
  position:relative;min-height:100vh;padding:9.5rem 2.5rem 4.5rem;
  display:flex;flex-direction:column;justify-content:center;
}
.vendita__grid{
  list-style:none;display:grid;grid-template-columns:repeat(3,1fr);
  gap:1.5rem;margin-top:2rem;
}
.imm{display:flex;flex-direction:column;background:var(--surface-1);border:1px solid var(--rule)}
.imm__foto{
  /* 16/10 e non 4/3: con tre schede in colonna la pagina deve stare
     in una schermata sola, titolo e dati compresi */
  aspect-ratio:16/10;display:flex;align-items:center;justify-content:center;
  background:var(--surface-2);border-bottom:1px solid var(--rule);
}
.imm__t{
  font-size:1.3rem;font-weight:600;line-height:1.1;text-transform:uppercase;
  color:var(--text-max);padding:1.2rem 1.2rem .9rem;
}
.imm__dati{display:grid;grid-template-columns:1fr 1fr;gap:1rem;padding:0 1.2rem 1.3rem}
.imm__dati dt{margin-bottom:.3rem;color:var(--text-muted);font-size:.7rem}
.imm__v{font-size:.95rem;font-weight:600;color:var(--text-bright)}
/* l'azione chiude la scheda e sta sempre in fondo, anche se una
   scheda ha meno dati delle altre */
.imm__cta{
  margin-top:auto;display:flex;align-items:center;justify-content:space-between;
  gap:1rem;padding:1rem 1.2rem;border-top:1px solid var(--rule);
  text-decoration:none;text-transform:uppercase;letter-spacing:.06em;
  font-size:.8rem;font-weight:700;color:var(--text-display);
  transition:background .2s ease,color .2s ease;
}
.imm__cta::after{content:"→";color:var(--accent)}
.imm__cta:hover{background:var(--surface-2);color:var(--text-max)}

/* ── Storia: timeline orizzontale ─────────────────────────── */
/* la timeline sta al centro dello schermo: con flex-end (l'impostazione
   comune degli sticky) le tappe restavano schiacciate in basso sotto
   settecento pixel di nero */
/* 26 opere (2026-09-30): la corsa cresce con la track, stesso passo di quando erano 11 a 700vh */
#s-storia{height:1800vh;background:var(--bg)}
#s-storia .sticky{justify-content:center}
#s-storia .sec-label{margin-bottom:2.4rem}
.storia-track{
  display:flex;gap:1.5rem;padding:0 2.5rem;
  will-change:transform;width:max-content;align-items:stretch;
}
.tappa{
  flex:0 0 auto;width:22vw;padding:0 0 1.4rem;
  background:var(--surface-1);border:1px solid var(--divider-solid,#3D3D3D);
}
/* foto dell'opera in cima, poi anno, luogo e tipo (2026-09-24) */
.tappa__foto{display:block;width:100%;aspect-ratio:4/3;object-fit:cover;margin-bottom:1.2rem}
.tappa > :not(.tappa__foto){padding:0 1.4rem}
.tappa__luogo{font-size:1.05rem;font-weight:700;color:var(--text-bright);margin-bottom:.3rem}
.tappa__tipo{font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--marchio-blu)}
.tappa__anno{
  display:block;font-size:3.4rem;font-weight:600;line-height:.9;
  color:var(--text-display);margin-bottom:.9rem;
}

/* ── Scelta dei lavori: le due card su fondo notte ─────────── */
#s-cases{height:340vh}
#s-cases .sticky--cases{justify-content:center;align-items:center;padding:2.5rem}

/* Il velo è ciò che si apre: parte ritagliato sulla card e cresce
   fino a coprire lo schermo. Il suo colore è il cemento *fisso*,
   così quando arriva a pieno schermo coincide esattamente col
   --paper della pagina (che nel frattempo è virato) e sparisce
   senza che si veda il passaggio di consegne. */
.cases-veil{
  position:fixed;inset:0;z-index:0;pointer-events:none;
  background:var(--paper-l);opacity:0;
  clip-path:inset(50% 50% 50% 50%);will-change:clip-path;
}

.cases-choice{
  position:relative;z-index:1;
  display:flex;gap:3.4rem;align-items:stretch;justify-content:center;
  width:100%;max-width:52rem;
}
.case-card{
  position:relative;flex:1 1 0;aspect-ratio:5/6;
  background:var(--paper-l);color:#0F0F0F;text-decoration:none;
  display:flex;flex-direction:column;justify-content:flex-end;
  padding:1.6rem;overflow:hidden;
}
.case-card__dia{position:absolute;inset:0;width:100%;height:100%;display:block}
/* Il corpo è tarato sulla parola più lunga, RISTRUTTURAZIONI (16 lettere
   contro le 12 di RENOVATION): a 2,4rem sfondava la colonna e il browser
   la spezzava col trattino. Sta su una riga sola, come nella reference. */
.case-card__t{
  position:relative;font-size:2.1rem;font-weight:600;line-height:.88;
  text-transform:uppercase;letter-spacing:-.01em;color:#0F0F0F;
  hyphens:none;
}
.case-card__ft{
  position:relative;display:flex;justify-content:space-between;align-items:baseline;
  margin-top:1.1rem;padding-top:.7rem;border-top:1px solid rgba(0,0,0,.55);
}
.case-card__ft .lbl{color:#0F0F0F;font-size:.72rem}
/* Titoli più bassi, meno sovrapposti ai disegni (committente, 2026-09-24):
   piede più vicino al titolo e meno margine sotto. */
.case-card{padding-bottom:1rem}
/* Interlinea aperta: fra NUOVE e COSTRUZIONI passa la riga blu della
   spirale, e a .88 lo spazio era più sottile del tratto (2026-09-24). */
.case-card__t{line-height:1.2}
.case-card__ft{margin-top:.6rem}
/* Il disegno di In vendita specchiato: la freccia scende a destra e
   lascia libero il titolo a sinistra. Solo la card, non il 03. */
.case-card[data-dia="squadra"] .case-card__dia{transform:scaleX(-1)}

/* Nella reference l'arancione è riservato al DIAGRAMMA: il titolo della
   card resta nero sempre. Era questo il titolo arancione di img-27 —
   uno stato di hover, non un colore fisso.
   Lo hover della ref (img-28) fa un'altra cosa: la card puntata si
   completa e l'altra si spegne. */
.cases-choice:hover .case-card{opacity:.45}
.cases-choice:hover .case-card:hover{opacity:1}
.case-card,.case-card__t{transition:opacity .35s ease}

/* ── Cantieri: galleria orizzontale, su cemento ─────────────
   Foto ORIZZONTALI e piccole (≈465×310 nella reference), staccate fra
   loro. Prima erano due lastroni da 56vw × 58vh: era quello a far
   sembrare la galleria ferma, non la durata — che è già più lenta
   della reference e non va toccata. */
#s-cantieri{height:500vh;background:var(--bg)}
/* Ristrutturazioni con la disposizione di Perché noi (2026-09-30) */
/* 170vh col contenuto incollato: le chip in basso hanno il tempo di comparire */
#s-ristrutturazioni{background:var(--bg);height:170vh}
#s-ristrutturazioni .perche{position:sticky;top:0;height:100vh}
@media (max-width:900px){ #s-ristrutturazioni{height:auto} #s-ristrutturazioni .perche{position:static;height:auto} }
.orbita .orbita__titolo--lungo{font-size:min(7vh,3.3vw)}
/* il prezzo sotto il titolo, in blu: «da» piccolissimo, la cifra grande */
.orbita__prezzo{display:flex;align-items:baseline;gap:.25em;margin-top:.25em;color:var(--marchio-blu);font-size:.9em;line-height:1;text-transform:none}
.orbita__prezzo small{font-size:.22em;font-weight:600;letter-spacing:.06em;text-transform:uppercase}
#s-ristrutturazioni .chip-o--3{left:-8%}
#s-ristrutturazioni .chip-o--4{right:-8%}
@media (max-width:900px){ #s-ristrutturazioni .chip-o--3, #s-ristrutturazioni .chip-o--4{left:auto;right:auto} .orbita .orbita__titolo--lungo{font-size:8.5vw} }
#s-cantieri .sticky--wide, #s-ristrutturazioni .sticky--wide{
  justify-content:center;padding:2.5rem 0;
}
.sec-label--cases{padding:0 2.5rem}
.galleria{position:relative}
/* il nome in alto al centro, grande e nero: cambia mentre la track scorre */
.galleria__nome{
  position:absolute;top:9%;left:0;right:0;text-align:center;
  font-size:3.4rem;font-weight:600;line-height:1;text-transform:uppercase;
  color:var(--text-max);letter-spacing:-.01em;pointer-events:none;
}
/* la categoria resta ferma in basso a sinistra, lockup bicolore su due
   righe: nella reference (img-32) è un blocco grande — CONSTRUCTION/ in
   grigio sopra, RESIDENTIAL in nero sotto — non una micro-etichetta. */
.galleria__cat{
  position:absolute;left:2.5rem;bottom:7%;
  font-size:1.7rem;font-weight:600;line-height:1.02;letter-spacing:-.005em;
  text-transform:uppercase;color:var(--marchio-blu);   /* blu del marchio, 2026-09-23 */
}
.galleria__cat span{display:block;color:var(--text-muted)}
.cases-track{
  display:flex;gap:1.5rem;padding:0 2.5rem;
  will-change:transform;width:max-content;align-items:center;
}
.case{
  position:relative;flex:0 0 auto;
  width:26vw;aspect-ratio:465/310;
}
.case img{width:100%;height:100%;object-fit:cover;display:block;background:var(--surface-2)}
/* il contatore in alto a sinistra della card, come nella ref */
.case__n{
  position:absolute;top:.7rem;left:.8rem;
  font-size:.72rem;font-weight:700;letter-spacing:.08em;color:#fff;
  mix-blend-mode:difference;
}
/* i posti delle ristrutturazioni: la struttura c'è, le foto no */
.case--vuota .case__posto{
  width:100%;height:100%;display:flex;align-items:center;justify-content:center;
  border:1px dashed var(--divider-solid,#3D3D3D);background:var(--surface-2);
}
.case--vuota .case__posto .todo{font-size:.78rem;letter-spacing:.06em}
/* le ristrutturazioni sono servizi, non foto (2026-09-30): stessa card, col testo */
.case--servizio{background:var(--surface-2);border:1px solid var(--divider-solid,#3D3D3D)}
.case__testo{height:100%;display:flex;flex-direction:column;justify-content:flex-end;gap:.8rem;padding:2.4rem 1.6rem 1.6rem}
.case__svc{font-size:1.5rem;font-weight:600;line-height:1.05;text-transform:uppercase;color:var(--text-max)}
.case--servizio .case__n{color:var(--text-muted);mix-blend-mode:normal}
.imm__foto{position:relative;overflow:hidden}
.imm__foto img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
/* modulo: due invii, WhatsApp pieno ed email a filo */
.contact__invia{display:flex;flex-wrap:wrap;gap:.8rem;margin-top:2rem}
.contact__invia .btn-accent{margin-top:0}
.btn-accent--vuoto{background:transparent;color:var(--text-display);box-shadow:inset 0 0 0 1px var(--divider-solid,#3D3D3D)}
/* niente riquadro né gradiente: su cemento la foto sta da sola e
   la didascalia è il lockup bicolore in basso, come nella reference */
/* titolo e didascalia impilati a sinistra: allineati ai due estremi
   della card, l'etichetta finiva accanto al titolo della card dopo */
.case__meta{display:flex;flex-direction:column;align-items:flex-start;gap:.5rem}
.case__title{
  font-size:2.2rem;font-weight:600;line-height:.92;
  text-transform:uppercase;color:var(--text-max);
}
.case__cat{display:block;color:var(--text-muted)}
.case__meta .lbl{color:var(--text-muted)}

/* ── Contatti ─────────────────────────────────────────────── */
/* La reference dà 3.240 px al finale: non deve arrivare di colpo. */
#s-contatti{background:var(--surface-1);border-top:1px solid var(--rule);min-height:275vh}
.contact{position:sticky;top:0;min-height:100vh;display:flex;flex-direction:column;justify-content:flex-end;padding:6rem 2.5rem 2rem}
.sec-display--sm{font-size:5.4rem}
.contact__cols{
  display:grid;grid-template-columns:1fr 1fr;gap:3rem;
  padding:3rem 0;border-top:1px solid var(--rule);
}
.contact__block .lbl{display:block;margin:1.6rem 0 .5rem;color:var(--text-muted)}
.contact__block .lbl:first-child{margin-top:0}
.contact__form{display:flex;flex-direction:column;max-width:30rem}
.contact__form .lbl{margin:1.1rem 0 .4rem;color:var(--text-muted)}
.contact__form input,.contact__form textarea{
  background:transparent;border:0;border-bottom:1px solid var(--divider-solid,#3D3D3D);
  color:var(--text-bright);font-family:inherit;font-size:1rem;padding:.5rem 0;
  resize:vertical;
}
.contact__form input:focus,.contact__form textarea:focus{outline:none;border-bottom-color:var(--text-bright)}
/* l'unico elemento colorato della pagina */
.btn-accent{
  margin-top:2rem;align-self:flex-start;
  background:var(--accent);color:var(--accent-ink);border:0;border-radius:var(--radius-btn);
  font-family:inherit;font-weight:700;font-size:.9rem;letter-spacing:.08em;text-transform:uppercase;
  padding:1rem 2.2rem;cursor:pointer;
}
.btn-accent:hover{filter:brightness(1.12)}
.contact__foot{
  display:flex;justify-content:space-between;gap:1rem;
  padding-top:1.4rem;border-top:1px solid var(--rule);
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width:900px){
  /* la corsa della camera sulla torre (2026-09-25: la torre si muove
     anche qui); dopo la 01 le sezioni hanno fondo pieno, così lo stage
     fisso non trapela più sotto il testo */
  #hero-spacer{height:160vh}
  #s-cases{background:var(--bg)}
  .chapter, .chapter--m{height:auto}
  .chapter .sticky, #s-cerniera .sticky, #s-cantieri .sticky,
  #s-ristrutturazioni .sticky,
  #s-piuma .sticky, #s-cases .sticky, #s-storia .sticky{
    position:static;height:auto;min-height:70vh;padding:1.8rem;
  }
  #s-piuma,#s-cases,#s-cerniera,#s-cantieri,#s-ristrutturazioni,#s-storia{height:auto}
  #s-cerniera-b{height:auto}
  #s-cerniera-b .sticky{position:static;height:auto;min-height:70vh;padding:1.8rem}
  #s-piuma .sticky--mid{text-align:left;align-items:flex-start}
  #s-piuma .sec-display--st{max-width:none}
  .cases-choice{flex-direction:column;gap:1.4rem;max-width:none}
  .case-card{aspect-ratio:4/3}
  .cases-veil{display:none}          /* niente apertura: le card restano card */
  /* la galleria si impila: nome e categoria tornano in flusso, altrimenti
     restano in posizione assoluta sopra le foto e spariscono */
  .galleria__nome,.galleria__cat{position:static;text-align:left;padding:0 1.8rem}
  .galleria__nome{font-size:2.4rem;margin-bottom:1.2rem}
  .galleria__cat{font-size:1.3rem;margin-top:1.2rem}
  .cases-track,.storia-track{flex-direction:column;width:auto;padding:0 1.8rem}
  .case{width:100%}
  .case img{height:42vh}
  .tappa{width:100%}
  .sec-display{font-size:4.2rem}
  #s01-arte .sec-display, #s02-struttura .sec-display, #s03-finiture .sec-display{font-size:4rem}
  .duo__dia{position:static}
  /* Capitoli 02 e 03 su una colonna: a due colonne il testo aveva
     161px di larghezza su un telefono e i titoli sbordavano. */
  .chapter--duo .sticky{grid-template-columns:1fr;row-gap:1.5rem}
  .sec-display--q{font-size:3.2rem}
  .sec-display--st{font-size:3.6rem}
  .servizi,.contact,.perche,.vendita{position:static;min-height:0;padding:3rem 1.8rem}
  /* la fascia alta qui è a due righe (logo + nav): il titolo della
     sezione deve passarci sotto, non finirci addosso */
  .vendita{padding-top:6rem}
  .vendita__grid{grid-template-columns:1fr}
  #s-servizi{min-height:0}
  #s-contatti{min-height:0}
  #s-perche{min-height:0;padding:3rem 0}
  .servizi__grid{grid-template-columns:1fr 1fr}
  .orbita{aspect-ratio:auto;display:flex;flex-direction:column;gap:.8rem}
  .orbita__titolo{position:static;font-size:3.2rem;margin-bottom:1rem}
  .chip-o{position:static;width:100%}
  .contact__cols{grid-template-columns:1fr}
}

/* ── Telefono: i capitoli 01–03 e la piuma (2026-09-25) ─────
   Una colonna sola e un ritmo solo: etichetta, titolo, paragrafo, con
   lo stesso margine di 16px ai lati. La 01 è una schermata intera
   posata sull'ultimo fotogramma della torre, col testo in basso su un
   velo di cemento; la 02 e la 03 hanno il mattone sopra il testo; la
   piuma ha il mattone schiantato sopra il titolo. */
@media (max-width:900px){
  .chapter .sticky, #s-piuma .sticky{padding:56px 16px}
  /* Niente velo: la torre se ne va prima che arrivi il testo, e al suo
     posto c'è il mattone, che passa dietro le scritte (2026-09-25) */
  #s01-arte .sticky{min-height:100svh;justify-content:flex-end;padding-bottom:48px}
  #s01-arte .sec-display, #s02-struttura .sec-display, #s03-finiture .sec-display{
    font-size:min(8.6vw, 3.4rem);line-height:.86;margin-bottom:0;
  }
  .sec-label{font-size:11px;margin-bottom:14px}
  .chapter--nota-alta .sec-body, #s02-struttura .sec-body, #s03-finiture .sec-body{
    font-size:16px;line-height:1.5;font-weight:600;margin-top:18px;
  }
  #s02-struttura .duo__para, #s03-finiture .duo__para{margin-top:0}
  .chapter--duo .sticky{min-height:0;row-gap:8px}
  /* il riquadro del mattone va da bordo a bordo e sfuma in alto e in
     basso: il fondo del render non coincide al pixel col cemento */
  .chapter--duo .duo__oggetto, #s-piuma .piuma__oggetto{
    height:min(40svh, 300px);margin:0 -16px;
    -webkit-mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
    mask-image:linear-gradient(to bottom, transparent, #000 14%, #000 86%, transparent);
  }

  /* Sotto il titolo, mezzo schermo di cemento: è lì che il mattone
     rompe il pavimento, con GRAVITA' sopra e il nero di Perché Salzillo
     subito sotto le crepe (committente, 2026-09-25). */
  #s-piuma .sticky{min-height:0;justify-content:flex-start;padding-bottom:40svh}
  #s-piuma .piuma__oggetto{position:relative;width:auto}
  #s-piuma .sec-display--st{font-size:min(15vw, 4.2rem);line-height:.8;margin:8px 0 0}
  /* il faretto resta, ma le righe spente restano leggibili */
  .ignite .line{
    color:color-mix(in srgb, var(--ignite-on) calc(max(var(--cur), .45) * 100%), var(--ignite-off));
  }
  .ignite__dot{left:-12px}
}

/* ── Telefono: perché, servizi, opere (2026-09-25) ────────────
   Stesso ritmo dei capitoli: 56px sopra e sotto, 16px ai lati. Le due
   gallerie diventano caroselli che si sfogliano col dito — una
   schermata ciascuna invece di quattro foto giganti in colonna — con un
   pezzo della foto dopo che spunta a destra e il nome che segue la foto
   in vista (js/nav.js). */
@media (max-width:900px){
  #s-perche{padding:0}
  .perche{padding:56px 16px;gap:28px}
  .perche .sec-label{margin-bottom:0}
  .orbita{width:100%;gap:10px}
  .orbita__titolo{font-size:min(12vw, 3.4rem);margin-bottom:14px}
  .chip-o{padding:14px 16px}
  .chip-o summary{font-size:15px;min-height:24px}
  .chip-o summary b{margin:-14px -16px -14px auto;padding:14px 16px}
  .chip-o .sec-body{font-size:14px}
  .perche .perche__cta{font-size:13px;padding:16px 24px;width:100%;text-align:center}

  .servizi{padding:56px 16px}
  .servizi .sec-label{margin-bottom:18px}
  .servizi__grid{grid-template-columns:1fr}
  .svc{min-height:0;padding:18px 16px}
  .svc__t{font-size:16px;margin-bottom:6px}
  .svc .sec-body{font-size:14px}

  #s-cases .sticky{min-height:0;padding:56px 16px}
  .cases-choice{gap:12px}
  .case-card{flex:none;width:100%;aspect-ratio:16/9;padding:16px}
  .case-card__t{font-size:26px}
  .case-card__ft .lbl{font-size:11px}

  #s-cantieri .sticky, #s-ristrutturazioni .sticky{min-height:0;padding:56px 0}
  /* più grandi da telefono (committente, 2026-09-30: non si leggeva) */
  .galleria__nome{font-size:36px;padding:0 16px;margin-bottom:16px}
  .galleria__cat{font-size:22px;padding:0 16px;margin-top:16px}
  #ristrNome{display:none}   /* il nome non scorre: ripeteva la prima card */
  .case--servizio{aspect-ratio:auto;min-height:260px}
  .case__svc{font-size:24px}
  .case--servizio .sec-body{font-size:16px;line-height:1.45}
  .cases-track{
    flex-direction:row;width:auto;gap:12px;padding:0 16px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding:0 16px;
    scrollbar-width:none;pointer-events:auto;
  }
  .cases-track::-webkit-scrollbar{display:none}
  .case{flex:0 0 84%;width:auto;aspect-ratio:4/3;scroll-snap-align:start}
  .case img{height:100%}
}

/* ── Telefono: in vendita, storia, contatti (2026-09-25) ──────
   In vendita resta una colonna di schede, più compatte. La storia
   diventa un carosello come le gallerie: undici opere in una schermata
   invece di sei. Nei contatti il piè di pagina va in colonna e lascia
   posto al tasto WhatsApp, e i campi hanno 16px: sotto, Safari su
   iPhone ingrandisce la pagina a ogni tocco su un campo. */
@media (max-width:900px){
  .vendita{padding:56px 16px}
  .vendita .sec-label--cases{padding:0}
  .vendita .sec-display--sm{font-size:min(11vw, 3rem);margin-bottom:0}
  .vendita__grid{gap:16px;margin-top:20px}
  .imm__foto{aspect-ratio:16/9}
  .imm__t{font-size:18px;padding:16px 16px 10px}
  .imm__dati{gap:12px;padding:0 16px 16px}
  .imm__dati dt{font-size:11px}
  .imm__v{font-size:15px}
  .imm__cta{font-size:13px;padding:16px;min-height:48px}

  #s-storia .sticky{min-height:0;padding:56px 0}
  #s-storia .sec-label{padding:0 16px;margin-bottom:18px}
  .storia-track{
    flex-direction:row;width:auto;gap:12px;padding:0 16px;
    overflow-x:auto;overscroll-behavior-x:contain;
    scroll-snap-type:x mandatory;scroll-padding:0 16px;
    scrollbar-width:none;pointer-events:auto;
  }
  .storia-track::-webkit-scrollbar{display:none}
  .tappa{flex:0 0 78%;width:auto;padding-bottom:16px;scroll-snap-align:start}
  .tappa__foto{margin-bottom:14px}
  .tappa > :not(.tappa__foto){padding:0 16px}
  .tappa__anno{font-size:40px;margin-bottom:8px}
  .tappa__luogo{font-size:16px}
  .tappa__tipo{font-size:11px}

  .contact{padding:56px 16px 24px}
  .contact .sec-display--sm{font-size:min(14vw, 4rem);margin-bottom:0}
  .contact__cols{gap:36px;padding:28px 0}
  .contact__block .lbl{font-size:11px;margin:24px 0 8px}
  .contact__block .sec-body{font-size:16px}
  .contact__link{display:inline-block;padding:4px 0}
  .contact__form{max-width:none}
  .contact__form .lbl{font-size:11px;margin:18px 0 6px}
  .contact__form input,.contact__form textarea{font-size:16px;padding:10px 0}
  .contact__form .btn-accent{width:100%;margin-top:24px;padding:16px}
  .contact__foot{
    flex-direction:column;gap:8px;padding-right:0;
    padding-bottom:calc(72px + env(safe-area-inset-bottom));
  }
}

/* ── Telefono: rifinitura (2026-09-25) ────────────────────────
   Nessun testo sotto i 12px: le micro-etichette erano tarate in cqw e
   rem sul desktop, e a 360px scendevano fino a 7px. */
@media (max-width:900px){
  #page .lbl{font-size:12px}
  .case__n{font-size:15px}
  .todo, .case--vuota .case__posto .todo{font-size:12px}
  .corner .lbl{font-size:11px}
  .btn-accent{font-size:14px}
  /* Safari: lo stage fisso è alto 100vh, cioè quanto lo schermo con la
     barra degli indirizzi NASCOSTA. Lockup e angolo si alzano di quanto
     la barra occupa in quel momento (100dvh segue la barra), così stanno
     sempre sopra il bordo visibile e scendono con lui quando la barra si
     nasconde — come il tasto WhatsApp. */
  .lockup, .corner{margin-bottom:calc(100lvh - 100dvh)}
  /* …e lo stesso per la schermata di caricamento: «46 ANNI DI CANTIERI»
     e la percentuale finivano sotto la barra (committente, 2026-09-25) */
  .preloader{padding-bottom:calc(2.5% + 100lvh - 100dvh)}
  .stage.hero-via .hero, .stage.hero-via .lockup,
  .stage.hero-via .corner, .stage.hero-via .grid{visibility:hidden !important}
}

@media (prefers-reduced-motion:reduce){
  .cases-track,.storia-track{transform:none !important}
}

/* Perché Salzillo porta con sé la notte: i token vivi sono fissati qui
   dentro, così il suo fondo è nero in ogni istante, qualunque sia --t.
   Sul desktop serve al pannello che sale sopra la gravità (vedi sotto);
   sul telefono evita che la sezione resti chiara e diventi nera di colpo
   a metà lettura, quando --t scatta (2026-09-25: stava solo nel desktop). */
#s-perche{
  --paper:var(--paper-d);--sunk:var(--sunk-d);--lift:var(--lift-d);
  --ink:var(--ink-d);--ink2:var(--ink2-d);--mute:var(--mute-d);--max:var(--max-d);
  --rule:var(--rule-d);--divider:var(--div-d);
  --bg:var(--paper);--surface-1:var(--sunk);--surface-2:var(--lift);
  --text-display:var(--ink);--text-bright:var(--ink2);--text-muted:var(--mute);
  --text-max:var(--max);--divider-solid:var(--divider);
  background:var(--paper-d);
}

/* ── Pagine: da "perché Salzillo" ai contatti (2026-09-23) ────────
   Ogni sezione marcata data-pagina è alta ESATTAMENTE uno schermo, e
   js/pagine.js porta da una all'altra con un gesto e uno scorrimento
   animato. Qui si spengono le altezze lunghe e gli sticky che servivano
   quando era lo scroll a far avanzare il contenuto. Solo desktop: sotto
   i 900px la pagina resta a scorrimento libero, come prima. */
@media (min-width:901px){
  /* !important perché le altezze lunghe stanno su selettori a id
     (#s-perche{min-height:450vh}…): così l'unica dichiarazione resta
     l'attributo nell'HTML, senza ripetere qui l'elenco delle sezioni. */
  [data-pagina]{height:100vh !important;min-height:0 !important;padding:0 !important;overflow:hidden}
  /* Perché Salzillo sale come un pannello notte sopra la gravità, che
     nei suoi ultimi 100vh è ancora ferma: un passaggio solo, senza
     tenda (2026-09-24). Fondo nero fisso, non var(--bg): deve esserlo
     già mentre sale, prima che --t abbia finito di virare. */
  /* Il pannello porta con sé la notte: i token vivi sono fissati qui
     dentro, così il tema della pagina (--t) può virare solo a pannello
     arrivato, e il cemento ancora scoperto sopra non passa dal grigio. */
  #s-perche{margin-top:-100vh;position:relative;z-index:1}
  [data-pagina] > .sticky, .perche, .servizi, .contact, .vendita{
    position:relative;top:auto;height:100vh;min-height:0;
  }
  /* 6rem in cima: la fascia dell'header. Prima l'etichetta PERCHE'
     SALZILLO finiva sotto la nav. */
  .perche{padding:6rem 2.5rem 2.5rem}
  .servizi{padding:6rem 2.5rem 2.5rem}
  .vendita{padding:6rem 2.5rem 2.5rem}
  /* In vendita tiene lo schermo per un tratto prima che arrivi la storia
     (committente, 2026-09-24: con un filo di scroll in più diventava
     tutto nero e la sezione si perdeva). La sezione è più alta di uno
     schermo e il contenuto le resta incollato; overflow:clip e non
     hidden, che farebbe della sezione un contenitore di scroll e
     spegnerebbe lo sticky. */
  #s-vendita{height:150vh !important;overflow:clip}
  #s-vendita .vendita{position:sticky;top:0}
  .contact{padding:6rem 2.5rem 2rem}

  /* tre card e non più due nello stesso spazio: RISTRUTTURAZIONI
     sfondava la card e veniva tagliata */
  .cases-choice{max-width:72rem}
  /* il nome del progetto staccato dalla nav: a 9% le stava attaccato
     (committente, 2026-09-23); a 20% sta a metà fra nav e foto */
  .galleria__nome{top:20%}
  .case-card__t{font-size:1.75rem}
}
/* Il tasto che salta il resto di una galleria: centrato in basso. */
/* In altezza è centrato sulla categoria a sinistra (.galleria__cat: due
   righe da 1,7rem × 1,02, col fondo al 7%): il suo centro sta a metà di
   quel blocco, qualunque sia l'altezza del bottone. */
.salta{
  position:absolute;left:50%;bottom:calc(7% + 1.734rem);transform:translate(-50%,50%);z-index:2;
  border-radius:var(--radius-btn);
  display:inline-flex;align-items:center;gap:.6rem;
  font-size:.75rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;
  color:var(--accent-ink);background:var(--marchio-blu);text-decoration:none;
  padding:.85rem 1.4rem;
}
.salta:hover{background:var(--accent-hi)}
@media (max-width:900px){ .salta{display:none} }

/* ── WhatsApp: tasto fisso in basso a destra (2026-09-24) ───────
   Minimal: cerchio nero, bordo e simbolo nel blu del marchio. Sta fuori
   da #page (che non cattura i click) ed è sopra tutto tranne l'header. */
/* Il tasto tondo: nero, bordo e simbolo nel blu del marchio. Lo usano il
   WhatsApp fisso e i tre social nei contatti. */
.tondo{
  width:3.4rem;height:3.4rem;min-width:48px;min-height:48px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;flex:0 0 auto;
  background:#0F0F0F;border:2px solid var(--marchio-blu);color:var(--marchio-blu);
  transition:background .2s ease,color .2s ease;
}
.tondo svg{width:48%;height:48%;display:block}
.tondo:hover{background:var(--marchio-blu);color:#fff}
.wa{position:fixed;right:1.6rem;bottom:1.6rem;z-index:6}
/* i social nei contatti */
.social{display:flex;gap:.8rem;margin-top:.2rem}
/* telefono ed email cliccabili, senza sottolineatura di sistema */
.contact__link{color:inherit;text-decoration:none;border-bottom:1px solid var(--rule)}
.contact__link:hover{color:var(--text-max);border-bottom-color:var(--marchio-blu)}
/* la firma dell'agenzia nel piè di pagina */
.contact__foot .contact__firma{color:var(--text-display);text-decoration:none}
.contact__foot .contact__firma:hover{color:var(--marchio-blu)}
/* il piè di pagina lascia spazio al tasto, che altrimenti copre «© 2026» */
.contact__foot{padding-right:4.6rem}
/* Sul telefono il tasto segue il bordo basso visibile: quando la barra
   di Safari si nasconde scende con lui. Lockup e «[ SCORRI ]» della
   hero fanno lo stesso (sotto, «rifinitura»): committente, 2026-09-25. */
@media (max-width:900px){
  .wa{right:16px;bottom:calc(16px + env(safe-area-inset-bottom))}
}

/* ── la scheda di un progetto (js/progetti.js, committente 2026-09-25) ──
   Un livello sopra il sito: la pagina sotto resta ferma dov'era, e
   chiudere è tornare esattamente lì. Sempre su cemento, come le
   gallerie da cui si arriva. */
.case__apri{position:absolute;inset:0;z-index:2;display:flex;align-items:flex-end;justify-content:flex-end;
  padding:.9rem 1rem;text-decoration:none;cursor:pointer}
.case__apri span{font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:#fff;background:var(--marchio-blu);padding:.45em .8em;opacity:0;transform:translateY(4px);
  transition:opacity .25s ease,transform .25s ease}
.case__apri:hover span,.case__apri:focus-visible span{opacity:1;transform:none}
body.scheda-aperta{overflow:hidden}
.scheda{
  position:fixed;inset:0;z-index:50;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;background:#CEC9C9;color:#3A3838;
}
.scheda[hidden]{display:none}
.scheda__barra{
  position:sticky;top:0;z-index:1;display:flex;align-items:center;
  padding:1.2rem 2.5rem;background:rgba(206,201,201,.92);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
}
.scheda__indietro{
  font:inherit;font-size:.8rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;
  color:var(--marchio-blu);background:none;border:1px solid var(--marchio-blu);
  padding:.7em 1.2em;cursor:pointer;transition:background .2s ease,color .2s ease;
}
.scheda__indietro:hover,.scheda__indietro:focus-visible{background:var(--marchio-blu);color:#fff}
.scheda__corpo{padding:2rem 2.5rem 5rem;max-width:1400px;margin:0 auto}
.scheda__lbl{font-size:1rem;font-weight:600;text-transform:uppercase;color:var(--marchio-blu);letter-spacing:-.005em}
.scheda__lbl span:first-child{color:#8F8B8B}
.scheda__t{font-size:4rem;font-weight:600;line-height:.95;text-transform:uppercase;color:#0F0F0F;margin:.6rem 0 2rem}
.scheda__t.todo{font-size:2rem;color:#6E6A6A}
.scheda__dati{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin:0 0 2.5rem;
  padding:1.2rem 0;border-top:1px solid rgba(0,0,0,.14);border-bottom:1px solid rgba(0,0,0,.14)}
.scheda__dati dt{color:#8F8B8B;margin-bottom:.4rem}
.scheda__dati dd{margin:0;font-size:1.15rem;font-weight:600;color:#0F0F0F}
.scheda__dati dd.todo{font-size:.95rem;font-weight:400;color:#6E6A6A}
.scheda__foto{display:grid;grid-template-columns:1fr 1fr;gap:1.2rem}
.scheda__foto img{width:100%;aspect-ratio:3/2;object-fit:cover;display:block;background:#BFBABA}
.scheda__foto img:first-child{grid-column:1 / -1;aspect-ratio:16/8}
.scheda__posto{aspect-ratio:3/2;display:flex;align-items:center;justify-content:center;
  border:1px dashed #A9A4A4;background:#C6C1C1}
.scheda__posto:first-child{grid-column:1 / -1;aspect-ratio:16/8}
@media (max-width:900px){
  .case__apri span{display:none}
  .scheda__barra{padding:8px 16px;padding-top:calc(8px + env(safe-area-inset-top))}
  .scheda__indietro{font-size:13px;min-height:44px;padding:0 16px}
  .scheda__corpo{padding:20px 16px calc(48px + env(safe-area-inset-bottom))}
  .scheda__lbl{font-size:14px}
  .scheda__t{font-size:clamp(34px,10vw,44px);margin:8px 0 20px}
  .scheda__t.todo{font-size:22px}
  .scheda__dati{grid-template-columns:1fr;gap:14px;margin-bottom:24px}
  .scheda__dati dt{font-size:12px}
  .scheda__dati dd{font-size:17px}
  .scheda__dati dd.todo{font-size:14px}
  .scheda__foto{grid-template-columns:1fr;gap:10px}
  .scheda__foto img,.scheda__foto img:first-child,.scheda__posto,.scheda__posto:first-child{grid-column:auto;aspect-ratio:4/3}
  .scheda__posto .todo{font-size:12px}
}