/* ═══════════════════════════════════════════════════════════════════════
   Aora Studio — registro OH Architecture
   Fondo chiaro, nero pieno, grotesque stretta, display enorme in maiuscolo,
   griglia 12 colonne con margine di 2rem, movimenti lenti su due ease.
   Nessuna dipendenza esterna: Switzer e Lenis sono in locale.
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:Switzer;src:url(media/font/switzer-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:Switzer;src:url(media/font/switzer-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:Switzer;src:url(media/font/switzer-700.woff2) format('woff2');font-weight:700;font-display:swap}

:root{
  /* Palette — gli stessi valori di OH, più un verde preso dall'aurora */
  --bianco:#fcfcfc;
  --nero:#080807;
  --grigio:#dcddde;
  --grigio-scuro:#545454;
  --grigio-chiaro:#f1f0ee;
  --accento:#1f4d3d;

  --font:'Switzer','Manrope',Arial,sans-serif;

  /* Griglia */
  --margine:2rem;
  --gap:1rem;
  --colonne:12;

  /* Scala tipografica (le misure di OH, in rem che scalano col viewport) */
  --t-display-l:10.56rem;
  --t-display:7.6rem;
  --t-h1:5.47rem;
  --t-h2:3.93rem;
  --t-h3:2.83rem;
  --t-h4:2.04rem;
  --t-h5:1.46rem;
  --t-large:1.51rem;
  --t-main:1.05rem;
  --t-small:.875rem;

  --lh-display:.95em;
  --lh-head:1.05em;
  --lh-body:1.2em;
  --ls-head:-.03em;
  --ls-body:-.01em;

  /* Spazi verticali di sezione */
  --sp-l:13.48rem;
  --sp-m:9.05rem;
  --sp-s:6.07rem;

  /* Le ease del sito originale */
  --e1:cubic-bezier(.87,0,.13,1);
  --e2:cubic-bezier(.16,1,.3,1);
  --e3:cubic-bezier(.53,.23,.25,1);
  --e-tr:cubic-bezier(.76,0,.24,1);
  --e-load:cubic-bezier(.83,0,.17,1);
  --d-slide:.95s;
}

/* Il root scala col viewport: è così che sull'originale il display resta
   enorme e proporzionato a ogni larghezza senza una media query per misura. */
html{font-size:clamp(12.35px,1.1115vw,18.05px);-webkit-text-size-adjust:100%}
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto !important}
.lenis.lenis-stopped{overflow:hidden}

*,*::before,*::after{box-sizing:border-box}
body{
  margin:0;background:var(--bianco);color:var(--nero);
  font-family:var(--font);font-size:var(--t-main);font-weight:500;
  line-height:var(--lh-body);letter-spacing:var(--ls-body);
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
body.is-locked{overflow:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,h5,p,figure,blockquote{margin:0}
ul{margin:0;padding:0;list-style:none}
[hidden]{display:none !important}
::selection{background:var(--nero);color:var(--bianco)}

/* ─── Utility tipografiche ─────────────────────────────────────────── */
.u-display-l,.u-display,.u-h1,.u-h2,.u-h3,.u-h4,.u-h5{
  font-weight:500;letter-spacing:var(--ls-head);line-height:var(--lh-head);
}
.u-display-l{font-size:var(--t-display-l);line-height:var(--lh-display);text-transform:uppercase}
.u-display{font-size:var(--t-display);line-height:var(--lh-display);text-transform:uppercase}
.u-h1{font-size:var(--t-h1)}
.u-h2{font-size:var(--t-h2)}
.u-h3{font-size:var(--t-h3);line-height:1.05em}
.u-h4{font-size:var(--t-h4);line-height:1.2em;font-weight:400}
.u-h5{font-size:var(--t-h5);line-height:1.2em}
.u-large{font-size:var(--t-large);font-weight:500;line-height:1.2em}
.u-small{font-size:var(--t-small);font-weight:500;line-height:1.2em}
.u-label{font-size:var(--t-small);font-weight:700;text-transform:uppercase;line-height:1.2em}
.u-mute{color:var(--grigio-scuro)}
.u-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ─── Impalcatura ──────────────────────────────────────────────────── */
.wrap{padding-inline:var(--margine)}
/* Le sezioni centrali scendono di poco: sotto il 96% il registro si perde,
   sopra il 98% non si nota. Hero e footer restano a grandezza piena.
   I token si ridichiarano qui, non a :root, perché un calc(var()) dentro una
   custom property si risolve sull'elemento che la dichiara. --margine resta
   intatto: il bordo sinistro deve cadere sulla stessa verticale della hero. */
.riduci{
  --scala:.965;
  --t-display-l:calc(10.56rem * var(--scala));
  --t-display:calc(7.6rem * var(--scala));
  --t-h1:calc(5.47rem * var(--scala));
  --t-h2:calc(3.93rem * var(--scala));
  --t-h3:calc(2.83rem * var(--scala));
  --t-h4:calc(2.04rem * var(--scala));
  --t-h5:calc(1.46rem * var(--scala));
  --t-large:calc(1.51rem * var(--scala));
  --t-main:calc(1.05rem * var(--scala));
  --t-small:calc(.875rem * var(--scala));
  --sp-l:calc(13.48rem * var(--scala));
  --sp-m:calc(9.05rem * var(--scala));
  --sp-s:calc(6.07rem * var(--scala));
  font-size:var(--t-main);
}
.sez{padding-block:var(--sp-m)}
.sez--s{padding-block:var(--sp-s)}
.sez--l{padding-block:var(--sp-l)}

/* ═══ Preloader ═════════════════════════════════════════════════════
   Il testo sale e il duplicato lo sostituisce dal basso, mentre una
   riga bianca attraversa lo schermo in due tempi. Poi il velo svanisce. */
.pre{position:fixed;inset:0;z-index:99999;background:var(--nero);overflow:hidden;display:flex;align-items:flex-end;
  opacity:1;transition:opacity .35s var(--e3)}
.pre.is-off{opacity:0;pointer-events:none}
.pre__line{position:absolute;top:0;left:0;width:100%;height:.3em;background:var(--bianco);
  transform:translateX(-100%);transition:transform 1s var(--e-tr)}
.pre__in{width:100%;padding:var(--margine);display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
/* Le due parole stanno nella stessa cella: la scatola prende la larghezza
   della più lunga, così la seconda non viene tagliata mentre sale. */
.pre__word{display:grid;overflow:hidden;
  color:var(--bianco);font-size:9rem;font-weight:700;line-height:.8em;letter-spacing:var(--ls-head);text-transform:uppercase}
.pre__word > span{grid-area:1 / 1;white-space:nowrap;transition:transform .875s var(--e-load)}
.pre__dup{transform:translateY(100%)}
.pre__note{color:var(--bianco);max-width:22ch}
.pre.is-roll .pre__base{transform:translateY(-100%)}
.pre.is-roll .pre__dup{transform:translateY(0)}

/* ═══ Velo di transizione fra pagine ════════════════════════════════ */
.tr-screen{position:fixed;inset:0;z-index:2147483647;background:var(--nero);
  opacity:0;visibility:hidden;transition:opacity .35s var(--e2),visibility .35s}
.tr-screen.is-on{opacity:1;visibility:visible}

/* ═══ Barra di navigazione ══════════════════════════════════════════ */
.nav{position:absolute;top:0;left:0;width:100%;z-index:60;padding:var(--margine);
  display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:2rem;pointer-events:none;color:var(--bianco)}
.nav > nav{justify-self:center}
.nav a{pointer-events:auto}
/* Sulle pagine interne la hero non c'è: la barra scrive in nero sul chiaro. */
body.is-interna .nav{color:var(--nero)}
/* A menu aperto la pillola nera sparirebbe sul nero: le si dà un bordo. */
body.menu-aperto .dock .pill:not(.pill--chiara){box-shadow:inset 0 0 0 .094rem rgba(252,252,252,.34)}
.nav__mark{font-size:var(--t-h2);font-weight:700;letter-spacing:var(--ls-head);line-height:.9em;overflow:hidden;display:block}
.nav__mark span{display:block;transform:translateY(120%);transition:transform var(--d-slide) var(--e2) .1s}
body.is-ready .nav__mark span{transform:translateY(0)}
.nav__links{display:flex;gap:.75rem}
.nav__links li{overflow:hidden}
.nav__links a{position:relative;display:inline-block;line-height:1.3em;
  transform:translateY(200%);transition:transform var(--d-slide) var(--e2)}
body.is-ready .nav__links a{transform:translateY(0);transition-delay:calc(.2s + var(--i,0) * .0625s)}
.nav__links a::after{content:'';position:absolute;left:0;bottom:.15em;width:100%;height:.06em;background:currentColor;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--e2)}
.nav__links a:hover::after{transform:scaleX(1);transform-origin:0 50%}

/* Le due pillole restano fisse per tutta la pagina, come sull'originale */
.dock{position:fixed;top:var(--margine);right:var(--margine);z-index:80;display:flex;gap:.5rem;pointer-events:none;
  opacity:0;transform:translateY(-1rem);transition:opacity .8s var(--e2) .35s,transform .8s var(--e2) .35s}
body.is-ready .dock{opacity:1;transform:none}
.dock > *{pointer-events:auto}

.pill{display:inline-flex;align-items:center;gap:1rem;height:fit-content;width:fit-content;
  padding:1rem 1.25rem;border-radius:100vw;background:var(--nero);color:var(--bianco);
  font-size:var(--t-small);font-weight:700;text-transform:uppercase;white-space:nowrap;line-height:1em;
  position:relative;overflow:hidden;transition:color .5s var(--e2)}
.pill > span{position:relative;z-index:2}
.pill__dot{position:relative;z-index:2;width:.5em;height:.5em;border-radius:50%;box-shadow:inset 0 0 0 .09em currentColor}
.pill::before{content:'';position:absolute;inset:0;background:var(--bianco);border-radius:100vw;
  transform:translateY(101%);transition:transform .55s var(--e2)}
.pill:hover{color:var(--nero)}
.pill:hover::before{transform:translateY(0)}
.pill--ico{padding:1rem;gap:0}
.ico-menu{position:relative;z-index:2;display:flex;flex-direction:column;justify-content:center;
  gap:.28em;width:1.2em;height:1.2em}
.ico-menu i{display:block;height:.11em;background:currentColor;
  transition:transform .45s var(--e1),opacity .25s var(--e2)}
body.menu-aperto .ico-menu i:nth-child(1){transform:translateY(.39em) rotate(45deg)}
body.menu-aperto .ico-menu i:nth-child(2){opacity:0}
body.menu-aperto .ico-menu i:nth-child(3){transform:translateY(-.39em) rotate(-45deg)}
.pill--chiara{background:var(--grigio-chiaro);color:var(--nero)}
.pill--chiara::before{background:var(--nero)}
.pill--chiara:hover{color:var(--bianco)}
.pill--bordo{background:transparent;color:var(--nero);box-shadow:inset 0 0 0 .094rem var(--grigio)}
.pill--bordo::before{background:var(--nero)}
.pill--bordo:hover{color:var(--bianco)}

/* ═══ Menu a tutto schermo ══════════════════════════════════════════ */
.menu{position:fixed;inset:0;z-index:70;background:var(--nero);color:var(--bianco);
  clip-path:polygon(0 0,100% 0,100% 0,0 0);transition:clip-path .8s var(--e1),visibility .8s;
  display:flex;flex-direction:column;justify-content:flex-end;padding:var(--margine);visibility:hidden}
.menu.is-open{clip-path:polygon(0 0,100% 0,100% 100%,0 100%);visibility:visible}
.menu__links{display:flex;flex-direction:column;gap:.1em}
.menu__links li{overflow:hidden}
.menu__links a{display:block;font-size:var(--t-h1);font-weight:500;letter-spacing:var(--ls-head);line-height:1.15em;
  transform:translateY(115%);transition:transform .8s var(--e2),opacity .5s var(--e2);opacity:.6}
.menu.is-open .menu__links a{transform:translateY(0);transition-delay:calc(.18s + var(--i,0) * .06s)}
.menu__links a:hover{opacity:1}
.menu__foot{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;margin-top:3.5rem;
  opacity:0;transition:opacity .5s var(--e2)}
.menu.is-open .menu__foot{opacity:1;transition-delay:.5s}

/* ═══ Hero ══════════════════════════════════════════════════════════ */
.hero{position:relative;height:100svh;min-height:38rem;overflow:hidden;color:var(--bianco);display:flex;flex-direction:column}
/* Sfumatura bianca sul bordo basso: la pagina continua sotto. Resta sotto il testo della hero */
.hero::after{content:'';position:absolute;left:0;right:0;bottom:0;height:calc(var(--margine) * 1.5);z-index:2;pointer-events:none;
  background:linear-gradient(to bottom,rgba(252,252,252,0),rgba(252,252,252,.55) 55%,var(--bianco))}
.hero__media{position:absolute;inset:-10% 0;z-index:0;overflow:hidden;will-change:transform}
.hero__img{width:100%;height:100%;object-fit:cover;transform:scale(1.1);filter:blur(5px);
  transition:transform 1.8s var(--e2),filter 1.8s var(--e2)}
body.is-ready .hero__img{transform:scale(1);filter:blur(0)}
/* La tela che disegna la foto piu' la luce sull'aurora. Copre l'immagine
   di base, che resta sotto come ripiego se WebGL non parte. Stessa entrata
   in scena, cosi lo scambio non si vede. */
.hero__gl{position:absolute;inset:0;width:100%;height:100%;display:block;z-index:1;
  pointer-events:none;opacity:0;transform:scale(1.1);filter:blur(5px);
  transition:opacity .4s var(--e2),transform 1.8s var(--e2),filter 1.8s var(--e2)}
.hero__gl.is-pronto{opacity:1}
body.is-ready .hero__gl{transform:scale(1);filter:blur(0)}

.hero__veil{position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,7,.5) 0%,rgba(8,8,7,.05) 30%,rgba(8,8,7,.15) 58%,rgba(8,8,7,.75) 100%)}
.hero__dim{position:absolute;inset:0;z-index:2;background:var(--nero);opacity:0;pointer-events:none}

.hero__meta{position:relative;z-index:3;margin-top:auto;padding:var(--margine);
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);align-items:center}
.hero__meta > *{overflow:hidden}
.hero__meta > * > *{display:block;transform:translateY(210%);transition:transform var(--d-slide) var(--e2)}
body.is-ready .hero__meta > * > *{transform:translateY(0);transition-delay:calc(.5s + var(--i,0) * .0825s)}
.hero__meta .is-r{text-align:right}
.hero__meta a{position:relative;width:fit-content;margin-left:auto}
.hero__meta a::after{content:'';position:absolute;left:0;bottom:0;width:100%;height:.07em;background:currentColor;
  transform-origin:0 50%;transition:transform .5s var(--e2)}
.hero__meta a:hover::after{transform:scaleX(0);transform-origin:100% 50%}

.hero__bottom{position:relative;z-index:3;margin-top:auto;padding:var(--margine);
  display:flex;align-items:flex-end;justify-content:space-between;gap:2rem}
.hero__claim{max-width:24ch}
.hero__scroll{white-space:nowrap;overflow:hidden}
.hero__scroll span{display:block;transform:translateY(140%);transition:transform var(--d-slide) var(--e2) .9s}
body.is-ready .hero__scroll span{transform:translateY(0)}
/* Freccia fissa in basso al centro: bianca sulla hero, nera sul resto */
.guida{position:fixed;left:50%;bottom:calc(var(--margine) * .6);z-index:65;width:.8rem;height:1.1rem;
  margin-left:-.4rem;color:var(--nero);pointer-events:none;opacity:0;transition:opacity .6s var(--e2),color .4s var(--e2)}
.guida svg{display:block;width:100%;height:100%;animation:freccia 1.8s var(--e2) infinite}
body.is-ready .guida{opacity:.6}
body.guida-fine .guida,body.menu-aperto .guida{opacity:0}
@keyframes freccia{0%,100%{transform:translateY(-.2rem);opacity:.5}50%{transform:translateY(.2rem);opacity:1}}

/* ═══ Righe che salgono da dietro una maschera ══════════════════════
   È il movimento portante del sito originale: ogni riga di testo è
   ritagliata dal suo contenitore e rientra dal basso, sfalsata. */
.ln{display:block;overflow:hidden}
.ln__i{display:block;transform:translateY(120%);will-change:transform;
  transition:transform var(--d-slide) var(--e2)}
.is-in .ln__i{transform:translateY(0);transition-delay:calc(var(--i,0) * .0625s)}
body.is-ready .hero .ln__i{transform:translateY(0);transition-delay:calc(.35s + var(--i,0) * .0825s)}
/* Il display a scaletta: ogni riga rientra un po' più della precedente */
.is-scala .ln{padding-left:calc(var(--i,0) * 4.6vw)}

/* Blocchi semplici che salgono con opacità */
.rv-up{opacity:0;transform:translateY(20px);transition:opacity .8s var(--e2),transform .95s var(--e2)}
.rv-up.is-in{opacity:1;transform:none;transition-delay:calc(var(--i,0) * .0625s)}

/* ═══ Rivelazione di un blocco visivo ═══════════════════════════════ */
.rivela{position:relative;overflow:hidden}
.rivela__in{width:100%;height:100%;transform:scale(1.05);transition:transform 1.2s var(--e2)}
.rivela__in:has(.pannello){transform:none}
.rivela .pannello__img,.rivela .pannello__aurora{transform:scale(1.06);transition:transform 1.2s var(--e2)}
.rivela.is-in .pannello__img,.rivela.is-in .pannello__aurora{transform:scale(1)}
.rivela__cover{position:absolute;inset:0;z-index:4;background:var(--bianco);opacity:1;transition:opacity .6s var(--e2)}
.rivela.is-in .rivela__in{transform:scale(1)}
.rivela.is-in .rivela__cover{opacity:0}

/* ═══ 01 — Studio ═══════════════════════════════════════════════════ */
.studio__head{margin-bottom:var(--sp-s)}
.studio__body{display:grid;grid-template-columns:repeat(var(--colonne),minmax(0,1fr));gap:var(--gap)}
.studio__fig{grid-column:span 3}
.studio__testo{grid-column:5 / span 5;display:flex;flex-direction:column;gap:1.5rem;align-items:flex-start}
.studio__testo p{max-width:52ch}
.studio__aside{grid-column:11 / span 2;text-align:right}

/* Pannello tipografico: sta al posto della fotografia finché non c'è */
.pannello{aspect-ratio:3 / 4;background:var(--grigio-chiaro);position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;padding:1.4rem}
.pannello--nero{background:var(--nero);color:var(--bianco)}
.pannello--largo{aspect-ratio:4 / 3}
.pannello__n{position:relative;z-index:3;font-size:var(--t-display);font-weight:700;line-height:.78em;
  letter-spacing:var(--ls-head);margin-top:auto}
.pannello__t{position:relative;z-index:3;font-size:var(--t-h5);font-weight:500;letter-spacing:var(--ls-head)}
.pannello__aurora,.pannello__img{position:absolute;inset:0;z-index:1;object-fit:cover;width:100%;height:100%}
.pannello__aurora{opacity:.42}
/* Sotto la foto il testo bianco sparirebbe: un velo scuro in alto e in basso
   lo rende leggibile senza spegnere l'immagine al centro. */
.pannello--foto{background:var(--nero);color:var(--bianco)}
.pannello--foto::after{content:'';position:absolute;inset:0;z-index:2;pointer-events:none;
  background:linear-gradient(180deg,rgba(8,8,7,.46) 0%,rgba(8,8,7,.06) 32%,rgba(8,8,7,.14) 58%,rgba(8,8,7,.66) 100%)}
.pannello--muto::after{display:none}
.pannello--muto{padding:0}

/* ═══ 02 — Servizi (griglia sfalsata) ═══════════════════════════════ */
.lavori__titolo{display:flex;align-items:flex-start;justify-content:space-between;gap:2rem;margin-bottom:var(--sp-s)}
.lavori__conteggio{font-size:var(--t-display);font-weight:500;line-height:.95em;letter-spacing:var(--ls-head)}
.lavori{display:grid;grid-template-columns:1fr 1fr;gap:var(--gap) calc(var(--gap) * 2)}
.lavoro:nth-child(even){margin-top:26vh}
.lavoro{display:block;margin-bottom:12vh}
.lavoro__media{position:relative;overflow:hidden;aspect-ratio:4 / 3;background:var(--grigio-chiaro)}
.lavoro__media .pannello{aspect-ratio:auto;height:100%}
.lavoro__cap{display:flex;align-items:baseline;gap:1.5rem;padding-top:.8rem}
.lavoro__cap .is-fine{margin-left:auto;color:var(--grigio-scuro)}
.lavoro .pannello__n{transition:transform 1s var(--e2)}
.lavoro:hover .pannello__n{transform:translateY(-.05em)}

/* ═══ Dati ══════════════════════════════════════════════════════════ */
.dati__head{margin-bottom:var(--sp-s)}
.dati__head h2{max-width:15ch}
.dati__lista{border-top:.094rem solid var(--grigio)}
.dato{display:grid;grid-template-columns:5rem 13rem 1fr;gap:var(--gap);align-items:baseline;
  padding:1.4rem 0;border-bottom:.094rem solid var(--grigio)}
.dato__i{color:var(--grigio-scuro)}
/* Il numero e' la porta verso la fonte: un filetto lo dichiara cliccabile,
   perche' un (01) grigio da solo non sembra un link. */
a.dato__i{width:fit-content;padding-bottom:.2em;border-bottom:.094rem solid var(--grigio);
  transition:color .4s var(--e2),border-color .4s var(--e2)}
a.dato__i:hover{color:var(--nero);border-color:var(--nero)}
.dato__n{font-size:var(--t-h4);font-weight:500;letter-spacing:var(--ls-head);line-height:1em}
.dato p{max-width:62ch}
.dati__nota{margin-top:2.5rem;max-width:62ch;color:var(--grigio-scuro)}

/* ═══ Metodo ════════════════════════════════════════════════════════ */
.metodo{display:grid;grid-template-columns:repeat(var(--colonne),minmax(0,1fr));gap:var(--gap)}
.metodo__col{grid-column:span 3}
.metodo__lista{margin-top:1.5rem;border-top:.094rem solid var(--grigio)}
.metodo__lista li{display:flex;gap:1.5rem;padding:.7rem 0;border-bottom:.094rem solid var(--grigio)}
.metodo__lista .is-n{color:var(--grigio-scuro);min-width:2.6rem}
.metodo__testo{grid-column:5 / span 7;display:flex;flex-direction:column;gap:2.2rem;align-items:flex-start}

/* ═══ CTA ═══════════════════════════════════════════════════════════ */
.cta{text-align:center;padding-block:var(--sp-l)}
.cta__pill{display:flex;justify-content:center;margin-bottom:var(--sp-s)}


/* ─── Nota del riquadro che non è un'offerta ───────────────────────── */
.lavoro__nota{margin-top:1rem;max-width:52ch;color:var(--grigio-scuro);font-size:var(--t-small);line-height:1.45em}

/* ─── Pagine di approfondimento ────────────────────────────────────── */
.pagina__fig{margin-bottom:var(--sp-s)}
.pagina__fig .pannello{aspect-ratio:21 / 9}
.pagina__lede{max-width:38ch;margin-top:1.8rem}
.pagina__head{margin-bottom:var(--sp-s)}

/* Tre fatti in fila, come la riga di dati sotto la hero dell'originale */
.fatti{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap);
  border-top:.094rem solid var(--grigio);border-bottom:.094rem solid var(--grigio);
  padding-block:1.4rem;margin-bottom:var(--sp-s)}
.fatti__v{margin-top:.4rem;font-size:var(--t-h5);font-weight:500;letter-spacing:var(--ls-head);
  line-height:1.2em;text-transform:none}

/* Elenco numerato a filetti, lo stesso della lista del metodo */
.elenco{border-top:.094rem solid var(--grigio);width:100%}
.elenco li{display:grid;grid-template-columns:4rem 1fr;gap:var(--gap);
  padding:.8rem 0;border-bottom:.094rem solid var(--grigio)}
.elenco .is-n{color:var(--grigio-scuro)}


/* ─── Pagine di offerta: i blocchi che spiegano ────────────────────── */

/* Cos'e': due o tre righe, isolate fra due filetti. Serve a far capire
   l'offerta, non a raccontarla: il dettaglio sta nei blocchi sotto. */
.cose{border-top:.094rem solid var(--grigio);border-bottom:.094rem solid var(--grigio);
  padding-block:2.4rem;margin-bottom:var(--sp-s)}
.cose__t{max-width:44ch;margin-top:1.2rem}

/* Come funziona: due o tre riquadri numerati, non un muro di testo. */
.livelli{margin-bottom:var(--sp-s)}
.livelli__eti{margin-bottom:1.6rem}
.livelli__griglia{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,20rem),1fr));gap:var(--gap)}
.livello{background:var(--grigio-chiaro);padding:1.6rem;display:flex;flex-direction:column;gap:.9rem}
.livello__n{color:var(--grigio-scuro)}
.livello__t{margin-bottom:0}
.livello p{color:var(--grigio-scuro);line-height:1.5em}
.livelli__nota{margin-top:1.6rem;max-width:70ch;color:var(--grigio-scuro);
  font-size:var(--t-small);line-height:1.55em}
.livelli__nota b{color:var(--nero);font-weight:700}

/* Il percorso: il passo in nero, la spiegazione in grigio, sulla stessa riga */
.elenco--passi li{align-items:baseline}
.elenco--passi b{font-weight:700}
.elenco--passi span:last-child{color:var(--grigio-scuro);line-height:1.5em}
.elenco--passi b + *,.elenco--passi b{color:var(--nero)}

/* Il confine fra le tre offerte: la colonna corrente e' piena, le altre
   sono link alle rispettive pagine. E' la risposta a "in cosa differisce". */
.confine{margin-bottom:var(--sp-s)}
.confine__eti{margin-bottom:1.6rem}
.confine__griglia{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.confine__c{border-top:.094rem solid var(--grigio);padding-top:1rem;
  display:block;color:var(--grigio-scuro);transition:color .4s var(--e2),border-color .4s var(--e2)}
a.confine__c:hover{color:var(--nero);border-color:var(--nero)}
.confine__c.is-attiva{border-top-color:var(--nero);color:var(--nero)}
.confine__n{margin-bottom:1.1rem;color:inherit}
.confine__r{padding-block:.7rem;border-top:.094rem solid var(--grigio)}
.confine__r span{display:block;margin-bottom:.25rem}
.confine__r p{font-size:var(--t-small);line-height:1.45em}
.confine__c.is-attiva .confine__r p{color:var(--nero)}

/* ═══ Footer ════════════════════════════════════════════════════════ */
.footer{border-top:.094rem solid var(--grigio);padding:var(--margine);
  display:grid;grid-template-columns:repeat(var(--colonne),minmax(0,1fr));gap:var(--gap);
  padding-top:3rem;padding-bottom:1.5rem}
.footer__brand{grid-column:span 3}
.footer__mark{font-size:var(--t-display);font-weight:700;line-height:.78em;letter-spacing:var(--ls-head);margin-top:1rem}
.footer__nav{grid-column:5 / span 4}
.footer__nav ul{margin-top:1rem}
.footer__nav a{font-size:var(--t-h3);font-weight:500;letter-spacing:var(--ls-head);line-height:1.25em;
  position:relative;display:inline-block}
.footer__nav a::after{content:'';position:absolute;left:0;bottom:.14em;width:100%;height:.05em;background:currentColor;
  transform:scaleX(0);transform-origin:100% 50%;transition:transform .5s var(--e2)}
.footer__nav a:hover::after{transform:scaleX(1);transform-origin:0 50%}
.footer__info{grid-column:10 / span 3;display:flex;flex-direction:column;gap:2.5rem}
.footer__info p{margin-top:1rem}
.footer__bottom{grid-column:span 12;display:grid;grid-template-columns:repeat(4,1fr);gap:var(--gap);
  margin-top:var(--sp-s);align-items:end}
.footer__bottom a:hover{text-decoration:underline}
.footer__bottom .is-r{text-align:right}

/* ═══ Pagine secondarie ═════════════════════════════════════════════ */
.pagina{padding-top:calc(var(--margine) + 7rem)}
.pagina__head{margin-bottom:var(--sp-s)}
.blocco{display:grid;grid-template-columns:repeat(var(--colonne),minmax(0,1fr));gap:var(--gap);
  padding-block:2.2rem;border-top:.094rem solid var(--grigio)}
.blocco__l{grid-column:span 3}
.blocco__r{grid-column:5 / span 7;display:flex;flex-direction:column;gap:1rem;align-items:flex-start}
.blocco__r p{max-width:64ch}

/* ═══ Form ══════════════════════════════════════════════════════════ */
.form{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem var(--gap)}
.campo{display:flex;flex-direction:column;gap:.5rem}
.campo--full{grid-column:span 2}
.campo > span{font-size:var(--t-small);font-weight:700;text-transform:uppercase;color:var(--grigio-scuro)}
.campo input,.campo textarea,.campo select{font:inherit;color:inherit;background:transparent;border:0;
  border-bottom:.094rem solid var(--grigio);padding:.7rem 0;outline:none;resize:vertical;
  border-radius:0;transition:border-color .4s var(--e2)}
.campo input:focus,.campo textarea:focus,.campo select:focus{border-color:var(--nero)}
.campo input::placeholder,.campo textarea::placeholder{color:var(--grigio);opacity:1}
/* La freccia nativa cambia da browser a browser: la disegniamo noi. */
.campo select{-webkit-appearance:none;appearance:none;cursor:pointer;padding-right:1.5rem;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 9px) calc(50% + 2px),calc(100% - 4px) calc(50% + 2px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.campo select:invalid,.campo select option[value=""]{color:var(--grigio-scuro)}

/* Consenso: la casella sta sulla riga del testo, non sopra */
.consenso{flex-direction:row;align-items:flex-start;gap:.8rem;margin-top:.6rem}
.consenso input{flex:0 0 auto;width:1.05em;height:1.05em;margin-top:.15em;
  accent-color:var(--nero);border-bottom:0}
.campo.consenso .consenso__t{font-size:var(--t-small);color:var(--grigio-scuro);line-height:1.45em;
  font-weight:500;text-transform:none;letter-spacing:var(--ls-body)}
.grazie{padding:2rem 0}
.grazie__t{font-size:var(--t-h2);font-weight:500;letter-spacing:var(--ls-head)}

/* ═══ Marquee ═══════════════════════════════════════════════════════ */
.scorre{border-top:.094rem solid var(--grigio);border-bottom:.094rem solid var(--grigio);overflow:hidden;padding-block:1.2rem}
.scorre__in{display:flex;width:max-content;animation:scorri 42s linear infinite}
.scorre__t{display:flex;gap:2.5rem;padding-right:2.5rem;white-space:nowrap;
  font-size:var(--t-h4);font-weight:500;letter-spacing:var(--ls-head);text-transform:uppercase}
@keyframes scorri{to{transform:translateX(-50%)}}

/* ═══ Adattamenti ═══════════════════════════════════════════════════ */
@media (max-width:1024px){
  :root{--margine:1.5rem;--t-display-l:7rem;--t-display:5rem;--t-h1:3.6rem;--t-h2:2.6rem;--t-h3:2rem}
  .riduci{--t-display-l:calc(7rem * var(--scala));--t-display:calc(5rem * var(--scala));
          --t-h1:calc(3.6rem * var(--scala));--t-h2:calc(2.6rem * var(--scala));--t-h3:calc(2rem * var(--scala))}
  .studio__fig{grid-column:span 4}
  .studio__testo{grid-column:6 / span 7}
  .studio__aside{display:none}
  .metodo__col{grid-column:span 4}
  .metodo__testo{grid-column:6 / span 7}
  .footer__brand{grid-column:span 4}
  .footer__nav{grid-column:6 / span 3}
  .footer__info{grid-column:10 / span 3}
  .blocco__l{grid-column:span 4}
  .blocco__r{grid-column:6 / span 7}
}
@media (max-width:767px){
  :root{--margine:1.25rem;--t-display-l:3.4rem;--t-display:3rem;--t-h1:2.5rem;--t-h2:2rem;--t-h3:1.6rem;--t-h4:1.4rem;
        --sp-l:6rem;--sp-m:4.5rem;--sp-s:3rem}
  .riduci{--t-display-l:calc(3.4rem * var(--scala));--t-display:calc(3rem * var(--scala));
          --t-h1:calc(2.5rem * var(--scala));--t-h2:calc(2rem * var(--scala));
          --t-h3:calc(1.6rem * var(--scala));--t-h4:calc(1.4rem * var(--scala));
          --sp-l:calc(6rem * var(--scala));--sp-m:calc(4.5rem * var(--scala));--sp-s:calc(3rem * var(--scala))}
  html{font-size:15.2px}
  .nav__links{display:none}
  /* Su schermo stretto le due pillole coprono il marchio: resta il menu. */
  .dock .pill:not(.pill--chiara){display:none}
  .nav__mark{font-size:1.6rem}
  .hero__meta{grid-template-columns:1fr 1fr;row-gap:.4rem}
  .hero__meta .is-r{text-align:left}
  .hero__meta a{margin-left:0}
  .hero__bottom{flex-direction:column;align-items:flex-start;gap:1.5rem}
  .is-scala .ln{padding-left:0}
  .studio__body,.metodo,.footer,.blocco{grid-template-columns:1fr}
  .studio__fig,.studio__testo,.metodo__col,.metodo__testo,
  .footer__brand,.footer__nav,.footer__info,.footer__bottom,.blocco__l,.blocco__r{grid-column:1 / -1}
  .studio__fig{max-width:60%}
  .lavori__titolo{flex-direction:column;gap:.4rem}
  .lavori{grid-template-columns:1fr}
  .lavoro:nth-child(even){margin-top:0}
  .lavoro{margin-bottom:3rem}
  .dato{grid-template-columns:3.5rem 1fr;row-gap:.4rem}
  .dato__n,.dato p{grid-column:2}
  .fatti{grid-template-columns:1fr;row-gap:1rem}
  .confine__griglia{grid-template-columns:1fr;row-gap:1.6rem}
  .livelli__griglia{grid-template-columns:1fr}
  .cose{padding-block:1.8rem}
  .pagina__fig .pannello{aspect-ratio:3 / 2}
  .elenco li{grid-template-columns:3.2rem 1fr}
  .form{grid-template-columns:1fr}
  .campo--full{grid-column:span 1}
  .footer__bottom{grid-template-columns:1fr 1fr;row-gap:1rem}
  .footer__bottom .is-r{text-align:left}
  .pre__word{font-size:4rem}
}
@media (prefers-reduced-motion:reduce){
  *{animation-duration:.01ms !important;transition-duration:.01ms !important}
  .ln__i{transform:none !important}
  .rv-up{opacity:1 !important;transform:none !important}
}