/* Casa Madre · sito «a schermo intero» (12/11/2026)
   Si aggiunge a style.css (quello del sito a scorrimento, invariato).
   Nella versione finale build_dist.py toglie la parte «pannello della prova» (in fondo).
   Modi (classe su <html>, decisa nello <head>):
     .fs-schermo  computer: una sezione per schermo, transizione A / B / C
     .fs-nativo   telefono e tablet: scorrimento nativo con aggancio + dissolvenza dei contenuti
     .fs-normale  «riduci movimento» del sistema: scorrimento normale */

:root{--hdr:76px}
@media (max-width:640px){:root{--hdr:64px}}

/* ================================================================ comuni */
.fs-dots,.fs-velo,.fs-giu{display:none}
.fs-ultima{padding-bottom:0!important}

/* intestazione scura quando la sezione è scura */
.top,.top .wm,.top .wm em,.brand__sub,.nav a,.nav__cta,.menu-btn span{transition:background-color .5s,color .5s,border-color .5s,opacity .2s}
html[data-tema="scuro"] .top{background:rgba(21,18,15,.86);border-bottom-color:var(--line-light);color:var(--paper)}
html[data-tema="scuro"] .top .wm{color:var(--paper)}
html[data-tema="scuro"] .top .wm em{color:var(--accent-light)}
html[data-tema="scuro"] .brand__sub{color:var(--muted-light)}
html[data-tema="scuro"] .brand__logo{opacity:0}   /* logo CM-1 (14/11/2026): sulle sezioni scure il negativo */
html[data-tema="scuro"] .brand__logo--neg{opacity:1}
html[data-tema="scuro"] .nav__cta{background:var(--paper);color:var(--ink)}
html[data-tema="scuro"] .nav__cta:hover{background:var(--accent);color:#fff}
html[data-tema="scuro"] .menu-btn span{background:var(--paper)}
.nav a[aria-current="true"]{opacity:1;box-shadow:inset 0 -2px 0 var(--accent)}
html[data-tema="scuro"] .nav a[aria-current="true"]{box-shadow:inset 0 -2px 0 var(--accent-light)}
@media (max-width:820px){
  html[data-tema="scuro"] .nav{background:var(--ink)}
  html[data-tema="scuro"] .nav a{border-bottom-color:var(--line-light)}
  .nav a[aria-current="true"]{box-shadow:none;color:var(--accent)}
}

/* struttura delle sezioni divise (vale in tutti i modi) */
.fs-id1__grid .sec__head{margin-bottom:44px}
.fs-id2 .core__side{display:grid;gap:20px}
@media (min-width:961px){
  .fs-id1__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:clamp(32px,4.4vw,72px);align-items:center}
  .fs-id1__grid .sec__head{margin-bottom:0}
  .fs-id2 .core__side{grid-template-columns:1fr 1fr;grid-template-rows:auto auto auto;gap:0 clamp(20px,2vw,32px)}
  .fs-id2 .core__item{display:grid;grid-row:span 3;grid-template-rows:subgrid;align-content:start}
}

/* piede dentro l'ultima sezione */
.fs-ultima .foot{margin-top:clamp(64px,10vh,120px)}

/* puntini laterali (computer e tablet larghi) */
@media (min-width:821px){
  .fs-dots{display:flex;position:fixed;right:clamp(12px,1.5vw,28px);top:50%;transform:translateY(-50%);z-index:18;
    flex-direction:column;align-items:center;gap:4px}
}
.fs-dot{position:relative;display:grid;place-items:center;width:22px;height:22px;padding:0;border:0;background:none;cursor:pointer}
.fs-dot::before{content:"";width:7px;height:7px;border-radius:999px;background:var(--ink);opacity:.26;
  transition:height .4s cubic-bezier(.2,.7,.2,1),opacity .3s,background-color .4s}
.fs-dot:hover::before{opacity:.6}
.fs-dot[aria-current="true"]::before{height:22px;opacity:1;background:var(--accent)}
.fs-dot--gruppo{margin-top:10px}
html[data-tema="scuro"] .fs-dot::before{background:var(--paper)}
html[data-tema="scuro"] .fs-dot[aria-current="true"]::before{background:var(--accent-light)}
.fs-dot__lbl{position:absolute;right:30px;top:50%;transform:translate(6px,-50%);white-space:nowrap;pointer-events:none;
  font:600 12px/1 var(--sans);letter-spacing:.03em;background:var(--ink);color:var(--paper);padding:7px 11px;border-radius:999px;
  opacity:0;transition:opacity .2s,transform .2s}
html[data-tema="scuro"] .fs-dot__lbl{background:var(--paper);color:var(--ink)}
.fs-dot:hover .fs-dot__lbl,.fs-dot:focus-visible .fs-dot__lbl{opacity:1;transform:translate(0,-50%)}
.fs-dot:focus-visible{outline:2px solid var(--accent);outline-offset:1px;border-radius:999px}

/* ================================================================ COMPUTER: una sezione per schermo */
.fs-schermo,.fs-schermo body{height:100%;overflow:hidden;overscroll-behavior:none}
.fs-schermo{scroll-behavior:auto}
.fs-schermo .top{position:fixed;left:0;right:0;top:0}
.fs-schermo .fs-deck{position:fixed;inset:0;overflow:hidden;overflow:clip;background:var(--paper)}
.fs-schermo .fs-slide{position:absolute;inset:0;display:flex;flex-direction:column;visibility:hidden;
  padding:calc(var(--hdr) + clamp(14px,3vh,40px)) 0 clamp(18px,4vh,48px);
  overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;scrollbar-width:thin;background:var(--paper)}
.fs-schermo .fs-slide.sec--dark{background:var(--ink)}
.fs-schermo .fs-slide.sec--tint{background:var(--paper-2)}
.fs-schermo .fs-slide.is-on,.fs-schermo .fs-slide.is-via{visibility:visible}
.fs-schermo .fs-slide.is-on{z-index:1}
/* portatili bassi: intestazione e margini più stretti */
@media (max-height:680px){
  .fs-schermo{--hdr:64px}
  .fs-schermo .top__in{height:64px}
  .fs-schermo .fs-slide{padding:calc(var(--hdr) + clamp(10px,2vh,20px)) 0 clamp(14px,2.6vh,24px)}
}
/* contenuto centrato in altezza; se non ci sta, parte dall'alto e la sezione scorre dentro (niente testo tagliato) */
.fs-schermo .fs-slide>.wrap{width:100%;margin:auto}

/* telo cinabro della transizione C */
.fs-schermo .fs-velo{display:grid;place-items:center;position:fixed;inset:0;z-index:15;background:var(--accent);
  transform:translateY(100%);visibility:hidden;pointer-events:none}
.fs-velo svg{width:clamp(72px,8vw,120px);height:auto;overflow:visible}
.fs-velo path{fill:none;stroke:#fff;stroke-width:16;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:100;stroke-dashoffset:100}

/* ---- misure da computer: valgono da 961 px in su (sul telefono col «blocco» resta l'impaginazione del telefono) ---- */
@media (min-width:961px){
.fs-schermo .wrap{max-width:clamp(1240px,82vw,1560px)}
@media (max-width:1380px){.fs-schermo .wrap{padding-left:56px;padding-right:56px}}

/* invito a scorrere, solo sulla prima sezione */
.fs-schermo .fs-giu{display:block;position:absolute;left:50%;bottom:clamp(14px,3vh,30px);width:22px;height:34px;margin-left:-11px;
  border:1.5px solid rgba(21,18,15,.32);border-radius:999px}
.fs-giu::after{content:"";position:absolute;left:50%;top:7px;width:4px;height:7px;margin-left:-2px;border-radius:2px;
  background:var(--accent);animation:fs-giu 1.8s cubic-bezier(.5,0,.5,1) infinite}
@keyframes fs-giu{0%{transform:translateY(0);opacity:0}25%{opacity:1}70%{transform:translateY(12px);opacity:0}100%{opacity:0}}

/* misure che seguono l'altezza dello schermo */
.fs-schermo .h2{font-size:clamp(36px,min(5vw,8.6vh),92px)}
.fs-schermo .eyebrow{margin-bottom:clamp(14px,2.6vh,22px)}
.fs-schermo .sec__head{margin-bottom:clamp(22px,4.6vh,60px)}
.fs-schermo .sec__lead{margin-top:clamp(14px,2.8vh,26px);font-size:clamp(16px,2.2vh,20px);max-width:clamp(560px,40vw,680px)}

/* 1 · apertura */
.fs-schermo .hero__title{font-size:clamp(46px,min(7vw,12.4vh),136px);margin-bottom:clamp(18px,3.4vh,30px)}
.fs-schermo .hero__lead{font-size:clamp(16.5px,2.3vh,21px);max-width:clamp(540px,36vw,640px);margin-bottom:clamp(20px,4vh,36px)}
.fs-schermo .hero__stack{height:min(720px,62vh)}

/* 2 · per chi lavoriamo */
.fs-schermo .pillars{border:0}
.fs-schermo .pillars__in{border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
/* colonne di pari larghezza (testi simmetrici): la riga verticale sta nello spazio tra le colonne */
.fs-schermo .pillars__in{column-gap:clamp(40px,4vw,80px)}
.fs-schermo .pillars article,.fs-schermo .pillars article+article{position:relative;border-left:0;
  padding:clamp(34px,7vh,84px) 0 clamp(38px,8vh,92px)}
.fs-schermo .pillars article+article::before{content:"";position:absolute;top:0;bottom:0;left:calc(clamp(40px,4vw,80px) / -2);
  border-left:1px solid var(--line)}
.fs-schermo .pillars span{font:condensed 800 clamp(40px,8vh,100px)/1 var(--display);font-variation-settings:'opsz' 96;
  letter-spacing:0;margin-bottom:clamp(18px,3.6vh,38px)}
.fs-schermo .pillars h2{font-size:clamp(34px,min(3.8vw,7vh),70px);margin-bottom:clamp(12px,2.2vh,22px);max-width:5.8em} /* tutti e tre su due righe */
.fs-schermo .pillars p{font-size:clamp(15px,2vh,20px);max-width:23em}

/* 3 · prima di tutto, l'identità */
.fs-schermo .core__main{padding:clamp(26px,4.6vh,42px) clamp(28px,3vw,42px)}
.fs-schermo .core__main h3{font-size:clamp(34px,min(3.8vw,6.6vh),70px);margin-bottom:clamp(14px,3vh,30px)}
.fs-schermo .core__main li{padding:clamp(7px,1.45vh,14px) 0;font-size:clamp(15px,2.1vh,19px)}
.fs-schermo .core__lbl{margin-bottom:clamp(14px,2.8vh,22px)}

/* 4 · poi la facciamo vivere / se serve una spinta */
.fs-schermo .fs-id2 .core__item{padding:clamp(30px,6.4vh,64px) clamp(28px,3.2vw,52px)}
.fs-schermo .fs-id2 .core__lbl{margin-bottom:clamp(18px,3.6vh,32px)}
.fs-schermo .fs-id2 .core__item{container-type:inline-size}
.fs-schermo .fs-id2 .core__item h3{font-size:clamp(28px,min(7.4cqi,6.6vh),64px);margin-bottom:clamp(10px,2vh,18px)}
.fs-schermo .fs-id2 .core__item p:last-child{font-size:clamp(15.5px,2.3vh,21px);text-wrap:balance}

/* 5 · servizi «al centro» */
.fs-schermo #servizi .sec__head{margin-bottom:clamp(20px,4.4vh,56px)}
.fs-schermo .d-grid{gap:clamp(24px,3vw,40px)}
.fs-schermo .d-col{gap:clamp(12px,3.2vh,34px)}
.fs-schermo .d-item{padding-top:clamp(10px,1.8vh,16px)}
.fs-schermo .d-item h3{font-size:clamp(17px,2.5vh,23px);margin:clamp(6px,1.1vh,10px) 0 clamp(4px,.9vh,8px)}
.fs-schermo .d-item p{font-size:clamp(14px,1.95vh,17.5px);max-width:22em}
.fs-schermo .d-col--l .d-item p{margin-left:auto}
.fs-schermo .d-main{padding:clamp(24px,4.6vh,42px) clamp(24px,2.6vw,36px)}
.fs-schermo .d-main h3{font-size:clamp(38px,min(4.6vw,7.4vh),76px);margin:clamp(8px,1.4vh,12px) 0 clamp(8px,1.6vh,14px)}
.fs-schermo .d-main p{font-size:clamp(14.5px,2vh,18.5px);margin-bottom:clamp(12px,2.2vh,20px)}

/* 6-10 · lavori, una riga per schermo */
.fs-schermo .fs-lav .sec__head{margin-bottom:clamp(18px,3.8vh,48px)}
.fs-schermo .fs-lav .works{gap:clamp(24px,3vw,40px)}
.fs-schermo .work--big{gap:clamp(28px,3.6vw,56px)}
.fs-schermo .work__img{margin-bottom:clamp(14px,2.6vh,26px)}
.fs-schermo .work--big .work__img{margin-bottom:0}
.fs-schermo .work__img img{height:auto}
.fs-schermo .fs-lav--1 .work__img img{max-height:40vh}
.fs-schermo .fs-lav--coppia .work__img img{max-height:44vh}
.fs-schermo .fs-lav--sola .work__img img{max-height:64vh}
.fs-schermo .work h3{font-size:clamp(28px,min(3vw,5.4vh),50px);margin:clamp(8px,1.6vh,14px) 0 clamp(6px,1.2vh,10px)}
.fs-schermo .work--big h3{font-size:clamp(36px,min(3.8vw,7vh),66px)}
.fs-schermo .work p{font-size:clamp(14.5px,2vh,19px);max-width:clamp(520px,34vw,620px)}
.fs-schermo .fs-lav--sola .work p{max-width:460px}
.fs-schermo .fs-lav--coppia .work p:not(.work__tags){max-width:30em} /* le due schede della coppia: due righe ciascuna */

/* 11 · metodo */
.fs-schermo #metodo .sec__head{margin-bottom:clamp(24px,5.4vh,64px)}
.fs-schermo .vb__step{min-height:clamp(170px,32vh,340px)}
.fs-schermo .vb__step h3{font-size:clamp(26px,min(2.4vw,4.6vh),44px)}
.fs-schermo .vb__step p{font-size:clamp(14.5px,2vh,19px)}

/* 12 · contatti: modulo più compatto, sempre usabile */
.fs-schermo .fs-ultima>.wrap{margin-top:auto;margin-bottom:auto}
.fs-schermo .contact{align-items:center;gap:clamp(40px,5vw,72px)}
.fs-schermo .contact .sec__lead{margin-top:clamp(14px,2.8vh,26px)}
.fs-schermo .contact__where{margin-top:clamp(16px,3.4vh,30px)}
.fs-schermo .form{display:grid;grid-template-columns:1fr 1fr;gap:clamp(10px,1.8vh,18px) 14px;padding:clamp(20px,3.6vh,36px)}
.fs-schermo .form>*{grid-column:1/-1}
.fs-schermo .form label{gap:clamp(6px,1vh,8px)}
.fs-schermo .form input[type=text]{padding:clamp(9px,1.6vh,14px) 14px}
.fs-schermo .form textarea{height:clamp(64px,12vh,124px);padding:12px 14px}
.fs-schermo .form legend{margin-bottom:clamp(8px,1.3vh,10px)}
.fs-schermo .chips{gap:clamp(6px,1vh,8px)}
.fs-schermo .chips span{padding:clamp(7px,1.25vh,10px) 14px;font-size:14px}
.fs-schermo .form .btn{grid-column:1;justify-self:start;align-self:center;margin-top:0;height:clamp(44px,6.6vh,52px)}
.fs-schermo .form__note{grid-column:2;align-self:center;justify-self:end;text-align:right}
.fs-schermo .form>.form__mezzo{grid-column:auto}   /* nome | email o telefono sulla stessa riga (hardening 12/11) */
/* piede: una striscia in fondo all'ultima sezione */
.fs-schermo .fs-ultima .foot{flex:none;margin-top:clamp(16px,3vh,32px);padding:clamp(14px,2.4vh,22px) 0}
.fs-schermo .foot__in{grid-template-columns:auto 1fr auto;align-items:center}
.fs-schermo .foot__in>div{display:flex;align-items:center;gap:20px}
.fs-schermo .foot .wm--light{font-size:24px}
.fs-schermo .foot__logo{--h:56px}   /* logo CM-1 (14/11/2026) nella striscia del piede */
.fs-schermo .foot p{margin-top:0}
.fs-schermo .foot__nav{justify-content:center}
.fs-schermo .fs-ultima .foot__legal{margin-top:clamp(8px,1.5vh,14px);padding-top:clamp(8px,1.5vh,12px)}   /* riga legale (12/11) */
.fs-schermo .fs-ultima .foot__legal p{font-size:12.5px}
@media (max-height:680px){   /* portatili bassi: il piede con la riga legale resta nella schermata (12/11) */
  .fs-schermo .fs-ultima .foot{margin-top:12px;padding:10px 0}
  .fs-schermo .fs-ultima .foot__legal{margin-top:4px;padding-top:5px}
}
@media (max-height:600px){   /* finestre molto basse (portatili 1280×720): modulo e piede più stretti, tutto resta usabile */
  .fs-schermo .form{padding:16px 20px}
  .fs-schermo .form textarea{height:56px}
  .fs-schermo .fs-ultima .foot{margin-top:8px;padding:8px 0}
}
} /* fine misure da computer */

/* ================================================================ TELEFONO E TABLET: scorrimento nativo */
.fs-nativo{scroll-snap-type:y proximity;scroll-padding-top:0}
.fs-nativo .top{position:fixed;left:0;right:0;top:0}
.fs-nativo .fs-slide{min-height:100svh;scroll-snap-align:start;display:flex;flex-direction:column;
  padding-top:calc(var(--hdr) + 44px);padding-bottom:64px}
.fs-nativo .fs-slide>.wrap{width:100%;margin:auto}
.fs-nativo .pillars{border:0}
.fs-nativo .fs-ultima>.wrap{margin-bottom:0}
.fs-nativo .fs-anim{opacity:0;transform:translateY(22px);
  transition:opacity calc(.8s * var(--fs-scala,1)) cubic-bezier(.2,.7,.2,1),transform calc(.9s * var(--fs-scala,1)) cubic-bezier(.2,.7,.2,1);
  transition-delay:calc(var(--i,0) * 80ms * var(--fs-scala,1))}
.fs-nativo .vista .fs-anim{opacity:1;transform:none}
@media (max-width:640px){
  .fs-nativo .fs-slide{padding-top:calc(var(--hdr) + 32px);padding-bottom:48px}
}

/* ================================================================ MOVIMENTO RIDOTTO: scorrimento normale */
.fs-normale{scroll-behavior:auto}
.fs-normale .fs-id1{padding-bottom:20px}
.fs-normale .fs-id2{padding-top:0}
.fs-normale .fs-lav:not(.fs-lav--5){padding-bottom:32px}
.fs-normale .fs-lav:not(.fs-lav--1){padding-top:32px}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}

/* ?foto=1 (solo per fotografare le schermate): niente animazioni CSS */
.fs-foto .fs-anim,.fs-foto .top,.fs-foto .top *,.fs-foto .fs-dot::before{transition:none!important}