/* =========================================================================
   Studio Tecnico Marino — foglio di stile unico
   Direzione: "Planimetria" — griglia millimetrata, linee di quota, tratto tecnico
   Nessuna libreria. Nessun build step.
   ========================================================================= */

/* ---------- 1. Token ---------- */
:root{
  /* Inchiostri */
  --ink:          #0E1419;
  --ink-2:        #3A4753;
  --ink-3:        #6B7B8A;
  --ink-4:        #9AA8B4;

  /* Blueprint */
  --blue:         #1B4B73;
  --blue-2:       #2E6DA0;
  --blue-soft:    #E7EEF5;

  /* Carta */
  --paper:        #FFFFFF;
  --paper-2:      #F5F7F9;
  --paper-3:      #ECF0F4;
  --line:         #DCE3E9;
  --line-2:       #C6D0D9;

  /* Accento studio */
  --gold:         #E3BE00;
  --gold-dk:      #B89900;
  --gold-ink:     #2E2600;

  /* Utilità */
  --ok:           #1F7A5A;
  --err:          #A6322A;

  /* Griglia millimetrata */
  --grid-1:       rgba(27,75,115,.055);
  --grid-2:       rgba(27,75,115,.10);

  /* Tipografia */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-body:    "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --f-mono:    "IBM Plex Mono", ui-monospace, "Courier New", monospace;

  /* Ritmo — questo clamp è la correzione del padding fisso da 140px */
  --pad-y:     clamp(64px, 9vw, 132px);
  --pad-x:     clamp(20px, 5vw, 64px);
  --gap:       clamp(20px, 3vw, 40px);
  --maxw:      1240px;
  --nav-h:     68px;

  --ease:      cubic-bezier(.22,.61,.36,1);
  --ease-out:  cubic-bezier(.16,1,.3,1);
}

/* ---------- 2. Reset ---------- */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:var(--f-body);
  font-size:clamp(16px,.42vw + 15px,18px);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg,iframe{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
h1,h2,h3,h4{margin:0;font-family:var(--f-display);font-weight:700;line-height:1.04;letter-spacing:-.022em;text-wrap:balance}
p{margin:0 0 1.05em}
ul{margin:0;padding:0;list-style:none}
:focus-visible{outline:2.5px solid var(--blue);outline-offset:3px;border-radius:2px}

/* ---------- 3. Tipografia di scala ---------- */
.t-hero  {font-size:clamp(2.9rem,8.2vw,6.6rem);letter-spacing:-.035em;line-height:.94}
.t-xl    {font-size:clamp(2.1rem,5vw,4rem);letter-spacing:-.03em}
.t-lg    {font-size:clamp(1.6rem,3vw,2.5rem);letter-spacing:-.025em}
.t-md    {font-size:clamp(1.18rem,1.6vw,1.5rem);letter-spacing:-.015em}
.lead    {font-size:clamp(1.06rem,1.5vw,1.32rem);color:var(--ink-2);max-width:60ch;line-height:1.6}
.prose p {max-width:66ch;color:var(--ink-2)}

.eyebrow{
  font-family:var(--f-mono);font-size:.72rem;font-weight:500;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blue);
  display:inline-flex;align-items:center;gap:.7em;
}
.eyebrow::before{content:"";width:26px;height:1px;background:currentColor;flex:none}
.eyebrow.on-dark{color:var(--gold)}
.mono{font-family:var(--f-mono);font-variant-numeric:tabular-nums}

/* ---------- 4. Impianto ---------- */
.wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
.sect{padding-block:var(--pad-y);position:relative}
.sect--tight{padding-block:clamp(48px,6vw,84px)}
.sect--dark{background:var(--ink);color:#EEF2F5}
.sect--dark p{color:#AEBBC6}
.sect--paper{background:var(--paper-2)}

.grid-bg{
  background-image:
    linear-gradient(var(--grid-1) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-1) 1px,transparent 1px),
    linear-gradient(var(--grid-2) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid-2) 1px,transparent 1px);
  background-size:16px 16px,16px 16px,80px 80px,80px 80px;
}

.sect-head{display:flex;flex-direction:column;gap:16px;margin-bottom:clamp(36px,5vw,64px)}
.sect-head .lead{margin:0}

/* Riga di quota decorativa: due tacche e una linea */
.rule-dim{display:flex;align-items:center;gap:0;margin:0;height:12px}
.rule-dim::before,.rule-dim::after{content:"";width:1px;height:12px;background:var(--line-2);flex:none}
.rule-dim i{flex:1;height:1px;background:var(--line-2);display:block}

/* ---------- 5. Bottoni ---------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  min-height:52px;padding:0 28px;
  font-family:var(--f-display);font-weight:600;font-size:1rem;letter-spacing:-.01em;
  border:1.5px solid transparent;border-radius:2px;
  transition:background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),transform .25s var(--ease);
  white-space:nowrap;
}
.btn:active{transform:translateY(1px)}
.btn--gold{background:var(--gold);color:var(--gold-ink);border-color:var(--gold)}
.btn--gold:hover{background:var(--gold-dk);border-color:var(--gold-dk)}
.btn--ink{background:var(--ink);color:#fff;border-color:var(--ink)}
.btn--ink:hover{background:var(--blue);border-color:var(--blue)}
.btn--ghost{border-color:var(--line-2);color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink);background:var(--ink);color:#fff}
.btn--ghost-w{border-color:rgba(255,255,255,.34);color:#fff}
.btn--ghost-w:hover{background:#fff;color:var(--ink);border-color:#fff}
.btn--wide{width:100%}
.btn svg{width:19px;height:19px;flex:none}

/* ---------- 6. Navigazione ---------- */
.nav{
  position:fixed;inset:0 0 auto 0;z-index:80;height:var(--nav-h);
  display:flex;align-items:center;
  transition:background .35s var(--ease),box-shadow .35s var(--ease),border-color .35s var(--ease);
  border-bottom:1px solid transparent;
}
.nav__in{display:flex;align-items:center;gap:20px;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
.nav__logo{display:flex;align-items:center;gap:11px;flex:none;margin-right:auto}
.nav__logo img{width:38px;height:auto;transition:filter .35s var(--ease)}
.nav__logo span{font-family:var(--f-display);font-weight:700;font-size:.94rem;letter-spacing:-.015em;line-height:1.15;color:#fff;transition:color .35s var(--ease)}
.nav__logo span i{display:block;font-style:normal;font-family:var(--f-mono);font-weight:400;font-size:.6rem;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-top:2px}

.nav__links{display:flex;align-items:center;gap:4px}
.nav__links a{
  font-family:var(--f-display);font-weight:600;font-size:.92rem;letter-spacing:-.01em;
  padding:9px 14px;border-radius:2px;color:#fff;opacity:.86;
  transition:opacity .2s,background .2s,color .35s var(--ease);
}
.nav__links a:hover{opacity:1;background:rgba(255,255,255,.1)}
.nav__cta{display:flex;align-items:center;gap:10px;flex:none}
.nav__cta .btn{min-height:42px;padding:0 18px;font-size:.9rem}

/* stato "scrollato" e pagine chiare */
.nav.is-solid,
.nav.is-open,
body.light-nav .nav{background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom-color:var(--line)}
.nav.is-solid .nav__logo span,
.nav.is-open .nav__logo span,
body.light-nav .nav .nav__logo span{color:var(--ink)}
.nav.is-solid .nav__logo img,
.nav.is-open .nav__logo img,
body.light-nav .nav .nav__logo img{filter:invert(1) brightness(.18)}
.nav.is-solid .nav__links a,
body.light-nav .nav .nav__links a{color:var(--ink)}
.nav.is-solid .nav__links a:hover,
body.light-nav .nav .nav__links a:hover{background:var(--paper-3)}
.nav.is-solid .btn--ghost-w,
body.light-nav .nav .btn--ghost-w{border-color:var(--line-2);color:var(--ink)}
.nav.is-solid .btn--ghost-w:hover,
body.light-nav .nav .btn--ghost-w:hover{background:var(--ink);color:#fff;border-color:var(--ink)}

/* burger */
.burger{display:none;width:46px;height:46px;align-items:center;justify-content:center;flex:none;border-radius:2px}
.burger i{display:block;width:22px;height:2px;background:#fff;position:relative;transition:background .2s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0;width:22px;height:2px;background:inherit;transition:transform .3s var(--ease)}
.burger i::before{top:-7px}
.burger i::after{top:7px}
.nav.is-solid .burger i,body.light-nav .nav .burger i{background:var(--ink)}
.nav.is-open .burger i{background:transparent}
.nav.is-open .burger i::before{transform:translateY(7px) rotate(45deg);background:var(--ink)}
.nav.is-open .burger i::after{transform:translateY(-7px) rotate(-45deg);background:var(--ink)}

@media (max-width:960px){
  .burger{display:flex}
  .nav__links{
    position:fixed;inset:var(--nav-h) 0 auto 0;
    flex-direction:column;align-items:stretch;gap:0;
    background:var(--paper);border-bottom:1px solid var(--line);
    padding:8px var(--pad-x) 22px;
    transform:translateY(-14px);opacity:0;pointer-events:none;
    transition:transform .3s var(--ease),opacity .3s var(--ease);
    max-height:calc(100dvh - var(--nav-h));overflow-y:auto;
  }
  .nav.is-open .nav__links{transform:none;opacity:1;pointer-events:auto}
  /* display:block, altrimenti il bordo inferiore si ferma dove finisce il
     testo e si vedono trattini grigi di lunghezze diverse */
  .nav__links a{display:block;color:var(--ink);opacity:1;font-size:1.15rem;padding:15px 4px;border-bottom:1px solid var(--line)}
  .nav__links li:last-child a{border-bottom:0}
  .nav__cta .btn--ghost-w{display:none}
}
/* Sotto i 700px restano solo logo e hamburger: le azioni sono nella barra
   fissa in basso, e i bottoni spingevano l'hamburger fuori dallo schermo. */
@media (max-width:700px){
  .nav__cta .btn{display:none}
}

/* ---------- 7. Hero: il lotto ---------- */
.hero{
  position:relative;min-height:100svh;display:flex;align-items:flex-end;
  background:var(--ink);color:#fff;overflow:hidden;
  padding-block:calc(var(--nav-h) + 40px) clamp(48px,7vw,90px);
}
.hero__grid{
  position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(rgba(255,255,255,.085) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.085) 1px,transparent 1px);
  background-size:18px 18px,18px 18px,90px 90px,90px 90px;
  mask-image:radial-gradient(115% 95% at 72% 40%,#000 20%,transparent 78%);
  -webkit-mask-image:radial-gradient(115% 95% at 72% 40%,#000 20%,transparent 78%);
}
.hero__glow{position:absolute;width:120vmax;height:120vmax;right:-38vmax;top:-46vmax;background:radial-gradient(circle,rgba(27,75,115,.55) 0%,transparent 62%);pointer-events:none}
.hero__lot{position:absolute;right:clamp(-60px,-2vw,0px);bottom:0;width:min(58vw,720px);opacity:.85;pointer-events:none}
.hero__in{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x)}
.hero__eyebrow{margin-bottom:26px}
.hero h1{margin-bottom:26px;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--gold);display:block}
.hero__sub{font-size:clamp(1.05rem,1.5vw,1.3rem);color:#B9C6D2;max-width:46ch;margin-bottom:38px}
.hero__cta{display:flex;flex-wrap:wrap;gap:14px;margin-bottom:clamp(40px,6vw,72px)}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:8px 34px;padding-top:22px;
  border-top:1px solid rgba(255,255,255,.14);
  font-family:var(--f-mono);font-size:.74rem;letter-spacing:.11em;text-transform:uppercase;color:#8598A8;
}
.hero__meta b{color:#fff;font-weight:500}
.hero__scroll{
  position:absolute;left:50%;bottom:18px;transform:translateX(-50%);z-index:3;
  display:flex;flex-direction:column;align-items:center;gap:8px;
  font-family:var(--f-mono);font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:#7E90A0;
}
.hero__scroll i{display:block;width:1px;height:34px;background:linear-gradient(var(--gold),transparent);animation:drop 2.1s var(--ease) infinite}
@keyframes drop{0%{transform:scaleY(0);transform-origin:top}45%{transform:scaleY(1);transform-origin:top}55%{transform:scaleY(1);transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
@media (max-width:860px){.hero__lot{width:105vw;right:-12vw;opacity:.4}.hero__scroll{display:none}}

/* ---------- 8. La costruzione (scena sticky) ---------- */
.build{position:relative;background:var(--paper-2)}
.build__inner{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr);gap:clamp(24px,4vw,72px);max-width:var(--maxw);margin-inline:auto;padding-inline:var(--pad-x);align-items:start}

/* La scena occupa tutta l'altezza dello schermo e tiene la tavola al centro:
   prima era agganciata in alto e lasciava una fascia vuota sotto. */
.scene{
  position:sticky;top:0;align-self:start;
  height:100svh;padding-top:var(--nav-h);
  display:flex;align-items:center;justify-content:center;
}
/* Larghezza e altezza derivano entrambe dal rapporto del disegno, quindi
   l'SVG riempie il riquadro esattamente: mai bande bianche dentro la cornice. */
@supports not (aspect-ratio: 3 / 2){
  .scene__frame{height:0;padding-bottom:67.1%}
  .scene__frame > *{position:absolute;inset:0}
}
.scene__frame{
  position:relative;
  width:min(100%, calc(min(64svh, 560px) * 1.4901));
  aspect-ratio:900/604;
  margin-inline:auto;
  display:flex;align-items:center;justify-content:center;
  border:1px solid var(--line);background:var(--paper);
  border-radius:3px;overflow:hidden;
}
.scene__grid{position:absolute;inset:0;opacity:1;transition:opacity .6s var(--ease)}
.scene__tag{
  position:absolute;left:16px;top:14px;z-index:4;
  font-family:var(--f-mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);
}
.scene__tag b{color:var(--blue);font-weight:500}
.scene__bar{position:absolute;left:16px;right:16px;bottom:14px;z-index:4;display:flex;gap:5px}
.scene__bar span{flex:1;height:3px;background:rgba(14,20,25,.16);border-radius:2px;overflow:hidden}
.scene__bar span::after{content:"";display:block;height:100%;width:100%;background:var(--blue);transform:scaleX(var(--fill,0));transform-origin:left;transition:transform .12s linear}
.scene svg{width:100%;height:100%;position:relative;z-index:2}

/* colonna testi */
.phases{padding-block:clamp(40px,7vh,90px)}
.phase{min-height:88vh;display:flex;flex-direction:column;justify-content:center;padding-block:clamp(24px,5vh,60px)}
.phase__num{
  font-family:var(--f-mono);font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;
  color:var(--ink-4);display:flex;align-items:center;gap:10px;margin-bottom:18px;
}
.phase__num b{color:var(--paper);background:var(--blue);font-weight:500;padding:3px 8px;border-radius:2px;letter-spacing:.1em}
.phase h3{margin-bottom:14px}
.phase>p{color:var(--ink-2);max-width:46ch}
.phase__list{display:flex;flex-direction:column;gap:0;margin-top:24px;border-top:1px solid var(--line)}
.phase__list li{
  display:flex;gap:14px;align-items:baseline;
  padding:13px 2px;border-bottom:1px solid var(--line);
  font-size:1rem;color:var(--ink);
}
.phase__list li::before{
  content:attr(data-n);flex:none;
  font-family:var(--f-mono);font-size:.68rem;color:var(--blue);letter-spacing:.06em;
  min-width:24px;
}
/* rivelazione progressiva */
.phase{opacity:.32;transition:opacity .55s var(--ease)}
.phase.is-live{opacity:1}

@media (max-width:900px){
  .build__inner{grid-template-columns:minmax(0,1fr);gap:0}

  /* Stesso gesto del desktop: la tavola resta ferma sotto la barra di
     navigazione e il testo le scorre sotto, una fase alla volta. */
  .scene{
    position:sticky;top:var(--nav-h);align-self:start;
    height:auto;padding-top:0;z-index:5;
    margin-top:clamp(18px,4vw,34px);
  }
  /* fascia opaca a tutta larghezza dietro la tavola: senza, il testo della
     fase precedente si intravede scorrere nel varco sopra la cornice */
  .scene::before{
    content:"";position:absolute;z-index:-1;
    left:calc(var(--pad-x) * -1);right:calc(var(--pad-x) * -1);
    top:calc(var(--nav-h) * -1);bottom:-16px;
    background:var(--paper-2);
  }
  .scene__frame{width:100%;max-width:none}

  .phases{padding-block:10px 28px}
  .phase{min-height:56vh;padding-block:26px}
  /* sul telefono la fase non attiva resta leggibile: al 32% del desktop,
     con lo schermo piccolo, il testo diventava illeggibile */
  .phase{opacity:.55}
  .phase.is-live{opacity:1}
}

/* ---------- 9. Servizi tecnici ---------- */
.svc{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:1px;background:var(--line);border:1px solid var(--line)}
.svc__item{background:var(--paper);padding:clamp(26px,3vw,40px);display:flex;flex-direction:column;gap:12px;position:relative;transition:background .3s var(--ease)}
.svc__item:hover{background:var(--paper-2)}
.svc__item::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease)}
.svc__item:hover::before{transform:scaleX(1)}
.svc__n{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.16em;color:var(--ink-4)}
.svc__item h3{font-size:1.32rem}
.svc__item p{margin:0;color:var(--ink-2);font-size:.98rem}
.svc__icon{width:34px;height:34px;stroke:var(--blue);stroke-width:1.4;fill:none;margin-bottom:4px}

/* ---------- 10. Numeri (segnaposto) ---------- */
.stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:clamp(24px,4vw,56px)}
.stat__n{font-family:var(--f-display);font-weight:700;font-size:clamp(3rem,6vw,4.6rem);line-height:1;letter-spacing:-.04em;color:var(--gold)}
.stat__k{font-family:var(--f-mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:#93A3B1;margin-top:12px}
/* il "+" e la "h" restano legati al numero ma un gradino piu' piccoli */
.stat__plus,.stat__unit{font-size:.62em;letter-spacing:0;margin-left:.02em}
.ph-note{
  margin-top:clamp(30px,4vw,48px);padding:16px 18px;
  border:1.5px dashed var(--gold);background:rgba(227,190,0,.07);
  font-family:var(--f-mono);font-size:.8rem;line-height:1.7;color:#D8C88A;
}
.ph-note b{color:var(--gold);display:block;margin-bottom:4px;letter-spacing:.12em;text-transform:uppercase;font-size:.7rem}

/* ---------- 11. Lavori / galleria ---------- */
.filters{display:flex;gap:8px;overflow-x:auto;padding-bottom:6px;margin-bottom:clamp(22px,3vw,34px);scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filters button{
  flex:none;min-height:42px;padding:0 18px;border:1px solid var(--line-2);border-radius:2px;
  font-family:var(--f-display);font-weight:600;font-size:.9rem;color:var(--ink-2);
  transition:all .22s var(--ease);
}
.filters button:hover{border-color:var(--ink-3);color:var(--ink)}
.filters button[aria-pressed="true"]{background:var(--ink);border-color:var(--ink);color:#fff}

/* Mosaico modulare.
   - grid-auto-flow:dense richiude da sola ogni casella lasciata libera;
   - l'altezza di riga (--row) la calcola il JS dalla larghezza di colonna,
     cosi' ogni tessera e' alta esattamente una riga e nulla sfonda;
   - l'ultima foto si allarga fino a chiudere la riga finale.
   Il risultato regge qualsiasi numero di foto, anche dopo un filtro. */
.works{
  display:grid;grid-template-columns:repeat(2,1fr);
  gap:clamp(8px,1.2vw,16px);
  grid-auto-flow:dense;
  grid-auto-rows:var(--row,34vw);
}
@media (min-width:700px){.works{grid-template-columns:repeat(3,1fr);grid-auto-rows:var(--row,22vw)}}
@media (min-width:1080px){.works{grid-template-columns:repeat(4,1fr);grid-auto-rows:var(--row,17vw)}}
.work{
  position:relative;margin:0;overflow:hidden;background:var(--paper-3);
  height:100%;border-radius:2px;cursor:zoom-in;
  transition:opacity .35s var(--ease),transform .35s var(--ease);
}
.work picture{display:block;width:100%;height:100%}
.work img{width:100%;height:100%;object-fit:cover;transition:transform .6s var(--ease-out)}
.work:hover img{transform:scale(1.06)}
.work figcaption{
  position:absolute;inset:auto 0 0 0;z-index:2;
  padding:26px 14px 12px;
  background:linear-gradient(transparent,rgba(14,20,25,.86));
  color:#fff;font-family:var(--f-mono);font-size:.68rem;letter-spacing:.05em;
  opacity:0;transform:translateY(8px);transition:all .35s var(--ease);
}
.work:hover figcaption,.work:focus-within figcaption{opacity:1;transform:none}
.work[hidden]{display:none}
/* La tessera grande copre 2 colonne per 2 righe: stesso rapporto delle altre. */
.work.is-wide{grid-column:span 2;grid-row:span 2}
/* Tessera verticale, per le immagini piu' alte che larghe (planimetrie,
   prospetti): una colonna per due righe, cosi' non vengono decapitate. */
.work.is-tall{grid-row:span 2}

/* lightbox */
/* Il tag <dialog> nasce con width e height "fit-content" e un max-width
   del browser: senza azzerarli la foto restava piccola al centro. */
.lb{
  position:fixed;inset:0;width:100%;height:100%;
  max-width:none;max-height:none;margin:0;border:0;
  z-index:200;display:none;place-items:center;
  /* tracce esplicite: senza, l'area della griglia si dimensiona sul contenuto
     e il max-height percentuale dell'immagine non si risolve, cosi' la foto
     sfora in altezza */
  grid-template-columns:minmax(0,1fr);
  grid-template-rows:minmax(0,1fr);
  background:rgba(8,12,16,.96);
  padding:clamp(10px,2.5vw,40px);
  overflow:hidden;
}
.lb[open]{display:grid}
.lb::backdrop{background:rgba(8,12,16,.96)}
.lb img{
  width:auto;height:auto;
  min-width:0;min-height:0;
  max-width:100%;max-height:100%;
  object-fit:contain;border-radius:2px;
  transition:opacity .18s linear;
}
/* mentre arriva la versione grande resta a video la miniatura, un po' morbida */
.lb.is-loading img{opacity:.55;filter:blur(1px)}
.lb.is-loading::after{
  content:"";position:absolute;left:50%;top:50%;width:34px;height:34px;margin:-17px 0 0 -17px;
  border:2px solid rgba(255,255,255,.25);border-top-color:#E3BE00;border-radius:50%;
  animation:lb-gira .7s linear infinite;
}
@keyframes lb-gira{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){
  .lb.is-loading::after{animation:none}
  .lb img{transition:none}
  .lb.is-loading img{filter:none}
}
.lb__btn{position:absolute;width:52px;height:52px;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.09);border-radius:50%;transition:background .2s}
.lb__btn:hover{background:rgba(255,255,255,.2)}
.lb__btn svg{width:22px;height:22px;stroke:currentColor;stroke-width:1.8;fill:none}
.lb__close{top:14px;right:14px}
.lb__prev{left:14px;top:50%;transform:translateY(-50%)}
.lb__next{right:14px;top:50%;transform:translateY(-50%)}
@media (max-width:600px){.lb__prev{left:8px}.lb__next{right:8px}.lb__btn{width:46px;height:46px}}

/* ---------- 12. Studio / storia ---------- */
.studio{display:grid;grid-template-columns:minmax(0,1fr);gap:clamp(28px,4vw,64px)}
@media (min-width:900px){.studio{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}}
.studio__aside{align-self:start;display:flex;flex-direction:column;gap:26px;align-items:flex-start}
/* La colonna resta ferma solo dove c'e' spazio: sul telefono era appiccicata
   e finiva sopra al testo della storia. */
@media (min-width:900px){
  .studio__aside{position:sticky;top:calc(var(--nav-h) + 32px)}
}
.studio__shot{margin:0;width:100%;position:relative}
.studio__shot picture{display:block;overflow:hidden;border-radius:3px;background:var(--paper-3)}
.studio__shot img{width:100%;height:auto;display:block}
.studio__shot figcaption{
  display:flex;justify-content:space-between;gap:12px;
  margin-top:10px;padding-top:9px;border-top:1px solid var(--line-2);
  font-family:var(--f-mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--ink-3);
}
/* tacche di quota alle estremita' della didascalia, come su una tavola */
.studio__shot figcaption::before,
.studio__shot figcaption::after{
  content:"";position:absolute;top:100%;width:1px;height:9px;background:var(--line-2);
}
.studio__shot figcaption::before{left:0}
.studio__shot figcaption::after{right:0}
.quote{
  font-family:var(--f-display);font-weight:600;font-size:clamp(1.35rem,2.4vw,2rem);
  line-height:1.22;letter-spacing:-.02em;color:var(--ink);
  padding-left:22px;border-left:3px solid var(--gold);margin:0;
}
.quote cite{display:block;font-family:var(--f-mono);font-size:.7rem;font-style:normal;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-4);margin-top:14px}
.studio__body p{color:var(--ink-2);max-width:64ch}
.studio__body p:first-of-type{font-size:1.14rem;color:var(--ink)}
.collab{margin-top:30px;padding:22px 24px;background:var(--paper-2);border:1px solid var(--line);border-radius:3px}
.collab h4{font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:12px}
.collab ul{display:flex;flex-wrap:wrap;gap:8px}
.collab li{font-family:var(--f-mono);font-size:.8rem;color:var(--ink-2);border:1px solid var(--line-2);border-radius:2px;padding:5px 11px}

/* ---------- 13. Contatti ---------- */
.contact{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,64px)}
@media (min-width:900px){.contact{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
.ctc-list{display:flex;flex-direction:column;border-top:1px solid rgba(255,255,255,.14)}
.ctc-list a,.ctc-list div{
  display:flex;align-items:center;gap:16px;min-height:64px;padding:12px 2px;
  border-bottom:1px solid rgba(255,255,255,.14);transition:padding-left .28s var(--ease)
}
.ctc-list a:hover{padding-left:10px}
.ctc-list .k{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:#8598A8;flex:none;width:104px}
/* senza min-width:0 il valore non puo' restringersi: sotto i 400px l'email
   lunga sforava e il body, che nasconde l'eccedenza, tagliava la pagina */
.ctc-list .v{min-width:0;overflow-wrap:anywhere}
@media (max-width:420px){
  .ctc-list a,.ctc-list div{flex-direction:column;align-items:flex-start;gap:3px;padding:14px 2px}
  .ctc-list .k{width:auto}
}
.ctc-list .v{font-family:var(--f-display);font-weight:600;font-size:1.06rem;color:#fff;letter-spacing:-.01em}
.ctc-list .v small{display:block;font-family:var(--f-body);font-weight:400;font-size:.82rem;color:#8598A8;letter-spacing:0;margin-top:1px}
.hours{background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.14);border-radius:3px;padding:22px 24px;margin-top:26px}
.hours h4{font-family:var(--f-mono);font-size:.7rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:12px}
.hours dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:8px 20px;font-size:.95rem}
.hours dt{color:#8598A8}
.hours dd{margin:0;color:#EEF2F5}

/* ---------- 14. Form ---------- */
.form{display:flex;flex-direction:column;gap:16px}
.field{display:flex;flex-direction:column;gap:7px}
.field label{font-family:var(--f-mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-3)}
.field input,.field textarea{
  width:100%;font-family:var(--f-body);
  font-size:16px;                 /* mai sotto 16px: evita lo zoom automatico su iOS */
  min-height:52px;padding:13px 16px;
  color:var(--ink);background:var(--paper);
  border:1.5px solid var(--line-2);border-radius:2px;
  transition:border-color .2s,box-shadow .2s;
}
.field textarea{min-height:150px;resize:vertical;line-height:1.55}
.field input::placeholder,.field textarea::placeholder{color:var(--ink-4)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(27,75,115,.13)}
.field input:user-invalid,.field textarea:user-invalid{border-color:var(--err)}
.field .hint{font-size:.82rem;color:var(--ink-3)}
.form__row{display:grid;grid-template-columns:1fr;gap:16px}
@media (min-width:620px){.form__row{grid-template-columns:1fr 1fr}}
.hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;overflow:hidden}
.form__note{font-size:.86rem;color:var(--ink-3);margin:0}
/* etichette e note leggibili anche quando il modulo sta su fondo scuro */
.sect--dark .field label,.sect--dark .field .hint,.sect--dark .form__note{color:#93A3B1}

/* risposta del backend PHP (usa le classi Bootstrap: le ridefinisco qui) */
.form-response:empty{display:none}
.form-response .alert{padding:15px 18px;border-radius:2px;font-size:.95rem;border:1.5px solid;margin-top:6px}
.form-response .alert ul{list-style:disc;padding-left:20px;margin:0}
.form-response .alert-success{background:#E6F4EE;border-color:var(--ok);color:#14523C}
.form-response .alert-danger{background:#FBEAE8;border-color:var(--err);color:#7C241E}
.form-response .close{display:none}

/* ---------- 15. Page header (pagine interne) ---------- */
.phead{background:var(--ink);color:#fff;padding-block:calc(var(--nav-h) + clamp(56px,8vw,104px)) clamp(48px,7vw,88px);position:relative;overflow:hidden}
.phead__grid{position:absolute;inset:0;background-image:linear-gradient(rgba(255,255,255,.05) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.05) 1px,transparent 1px);background-size:80px 80px;mask-image:radial-gradient(100% 90% at 30% 30%,#000,transparent 75%);-webkit-mask-image:radial-gradient(100% 90% at 30% 30%,#000,transparent 75%)}
.phead__in{position:relative;z-index:2}
.phead h1{margin:18px 0 16px}
.phead p{color:#AEBBC6;max-width:52ch;margin:0}

/* Quando l'intestazione e il blocco successivo sono entrambi scuri, i due
   riempimenti si sommavano e producevano una fascia nera vuota di quasi
   180px. Qui si avvicinano e una riga sottile fa da separatore. */
.phead--flush{padding-bottom:clamp(14px,1.9vw,24px)}
.phead--flush + main > .sect--dark:first-child{
  padding-top:clamp(20px,2.6vw,34px);
}

/* ---------- 16. Mappa ---------- */
.map{border:1px solid var(--line);border-radius:3px;overflow:hidden;background:var(--paper-3)}
.map iframe{width:100%;height:clamp(280px,42vw,440px);border:0;display:block}

/* ---------- 17. CTA a piena larghezza ---------- */
.cta{background:var(--blue);color:#fff;text-align:center}
.cta h2{margin-bottom:16px;max-width:20ch;margin-inline:auto}
.cta p{color:#C4D6E5;max-width:48ch;margin-inline:auto;margin-bottom:32px}
.cta__btns{display:flex;flex-wrap:wrap;gap:14px;justify-content:center}

/* ---------- 18. Footer ---------- */
.foot{background:var(--ink);color:#8598A8;padding-block:clamp(48px,6vw,72px) 30px;font-size:.92rem}
.foot__grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(28px,4vw,52px);padding-bottom:36px;border-bottom:1px solid rgba(255,255,255,.12)}
.foot h4{font-family:var(--f-mono);font-size:.68rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-bottom:16px}
.foot li{margin-bottom:9px}
.foot a:hover{color:#fff}
.foot__brand img{width:52px;margin-bottom:16px}
.foot__brand p{color:#8598A8;font-size:.9rem;max-width:32ch;margin:0}
.foot__bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:12px 24px;padding-top:24px;font-family:var(--f-mono);font-size:.72rem;letter-spacing:.06em}
.foot__social{display:flex;gap:10px;margin-top:18px}
.foot__social a{width:44px;height:44px;display:grid;place-items:center;border:1px solid rgba(255,255,255,.18);border-radius:2px;transition:all .22s var(--ease)}
.foot__social a:hover{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.foot__social svg{width:20px;height:20px;fill:currentColor}

/* ---------- 19. Barra azioni mobile ---------- */
.dock{
  position:fixed;left:0;right:0;bottom:0;z-index:70;display:none;
  grid-template-columns:1fr 1fr 1fr;
  background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-top:1px solid var(--line);
  padding-bottom:env(safe-area-inset-bottom);
}
.dock a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;min-height:60px;font-family:var(--f-mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-2);border-right:1px solid var(--line)}
.dock a:last-child{border-right:0}
.dock svg{width:20px;height:20px;stroke:var(--blue);stroke-width:1.6;fill:none}
.dock a.wa svg{stroke:none;fill:#25D366}
@media (max-width:760px){
  .dock{display:grid}
  body{padding-bottom:60px}
  .hero__scroll{display:none}
}

/* ---------- 20. Rivelazione allo scroll ---------- */
.rv{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease-out),transform .8s var(--ease-out)}
.rv.in{opacity:1;transform:none}
.rv-d1{transition-delay:.08s}.rv-d2{transition-delay:.16s}.rv-d3{transition-delay:.24s}

/* ---------- 21. Disegno tecnico: stili dell'SVG ---------- */
/* Se il JavaScript non parte, data-mode non viene mai scritto: in quel caso
   mostriamo la casa gia' finita invece di una tavola bianca. */
.build:not([data-mode]) .draw{--p0:1;--p1:1;--p2:1;--p3:1;--p4:1;--p5:1}
.build:not([data-mode]) .scene__grid{opacity:0}

.draw{
  --p0:0;--p1:0;--p2:0;--p3:0;--p4:0;--p5:0;
  fill:none;
  stroke:var(--blue);
  stroke-width:1.6;
  stroke-linecap:round;
  stroke-linejoin:round;
  transition:stroke .7s var(--ease);
}
.draw [data-draw]{stroke-dasharray:1;}
.draw #g0 [data-draw]{stroke-dashoffset:calc((1 - var(--p0)) * 1px)}
.draw #g1 [data-draw]{stroke-dashoffset:calc((1 - var(--p1)) * 1px)}
.draw #g2 [data-draw]{stroke-dashoffset:calc((1 - var(--p2)) * 1px)}
.draw #g3 [data-draw]{stroke-dashoffset:calc((1 - var(--p3)) * 1px)}
.draw #g4 [data-draw]{stroke-dashoffset:calc((1 - var(--p4)) * 1px)}

/* elementi che compaiono in dissolvenza invece che disegnarsi */
.draw #g0 .pop{opacity:var(--p0)}
.draw #g1 .pop{opacity:var(--p1)}
.draw #g2 .pop{opacity:var(--p2)}
.draw #g3 .pop{opacity:var(--p3)}
.draw #g4 .pop{opacity:var(--p4)}

/* .xray = quello che esiste solo finche' la casa e' un disegno:
   scavo, pilastri, quote, etichette. Svanisce quando arriva il colore. */
.draw .xray{opacity:calc(1 - var(--p5))}
.draw #g0 .pop.xray{opacity:calc(var(--p0) * (1 - var(--p5)))}
.draw #g1 .pop.xray{opacity:calc(var(--p1) * (1 - var(--p5)))}
.draw #g2 .pop.xray{opacity:calc(var(--p2) * (1 - var(--p5)))}
.draw #g3 .pop.xray{opacity:calc(var(--p3) * (1 - var(--p5)))}
.draw #g4 .pop.xray{opacity:calc(var(--p4) * (1 - var(--p5)))}

/* quote e testi tecnici */
.draw .dim{stroke:var(--ink-4);stroke-width:1}
.draw .dash{stroke-dasharray:6 5!important;stroke-dashoffset:0!important;stroke:var(--ink-4);stroke-width:1}
.draw .hatch{stroke:var(--blue-2);stroke-width:.9}
.draw text{
  fill:var(--ink-4);stroke:none;
  font-family:var(--f-mono);font-size:13px;letter-spacing:.08em;
}
.draw .lbl{fill:var(--blue);font-size:12px}

/* il render finale: i riempimenti a colori */
.draw #paint{opacity:var(--p5)}
.draw #paint *{stroke:none}
/* quando la casa è "reale" il tratto diventa inchiostro e la griglia sparisce */
.scene.is-real .scene__grid{opacity:0}
.scene.is-real .draw{stroke:#4A3325}

@media (prefers-reduced-motion:reduce){
  .draw{--p0:1;--p1:1;--p2:1;--p3:1;--p4:1;--p5:1}
  .rv{opacity:1;transform:none;transition:none}
  .hero__scroll i{animation:none}
  .phase{opacity:1}
  .scene{position:static;height:auto;padding-top:0}
}

/* ---------- 22. Utility ---------- */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mt-s{margin-top:14px}.mt-m{margin-top:26px}.mt-l{margin-top:44px}
.center{text-align:center}
.nowrap{white-space:nowrap}