/* Mae Home · pagine servizio: Ristrutturazione casa, Progettazione, Arredo.
   Si carica dopo base.css e componenti.css. Ogni pagina ha il suo momento forte:
   ristrutturazione i lavori in provini + Pordenone, progettazione il disegno che diventa render,
   arredo la parete aperta con prese, luci e scarichi segnati prima di chiudere. */

/* ---------- Apertura delle pagine servizio: testo a sinistra, foto a destra, riga di partenza sotto ---------- */
.sv__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap)}
.sv__bc{grid-column:1/-1}
.sv__occ,.sv__t,.sv__lead,.sv__act,.sv__prova{grid-column:1/span 8}
.sv__fig{grid-column:9/-1;grid-row:2/span 5;align-self:end;margin:0;min-width:0}
.sv__frame{aspect-ratio:4/5;max-height:calc(100svh - var(--hdr) - 150px);margin-left:auto}
.sv__fig .cap{justify-content:flex-start}
.sv__t{max-width:none}
@media (min-width:1024px){.sv__t{font-size:clamp(46px,4.6vw,74px)}}
.sv .ap__lead{max-width:36em}
.sv__act{display:flex;flex-wrap:wrap;align-items:center;gap:12px;margin-top:clamp(24px,3vw,36px)}
.sv__prova{margin-top:clamp(16px,2vw,24px)}
/* la promessa degli annunci accanto alla prova: sopralluogo e preventivo gratuiti */
.prova__free{display:inline-flex;align-items:center;gap:8px;color:var(--inchiostro)}
.prova__free strong{font-weight:600}
.prova__free .i{color:var(--rovere)}
.prova__g{display:inline-flex;align-items:center;flex-wrap:wrap;gap:4px 12px}
.sv__riga{grid-column:1/-1}
.sv__wide .sv__fig{grid-column:8/-1}
.sv__wide .sv__frame{aspect-ratio:16/10}
.sv__wide .sv__occ,.sv__wide .sv__t,.sv__wide .sv__lead,.sv__wide .sv__act,.sv__wide .sv__prova{grid-column:1/span 6}
.anim .sv__act,.anim .sv__prova{animation:liftIn 1.1s var(--ease) .7s both}
/* i tre inviti stanno su una riga anche con «Chiedi un sopralluogo gratuito» */
@media (min-width:1024px){.sv__act{gap:10px}.sv__act .btn{font-size:16px;padding:0 20px}.sv__act .btn--text{padding:0 0 0 8px}}
@media (max-width:1023px){
  .sv__grid{grid-template-columns:minmax(0,1fr)}
  .sv__grid>*{grid-column:1/-1!important}
  .sv__fig{grid-row:auto;order:5;margin:28px 0 0}
  .sv__bc{order:0}.sv__occ{order:1}.sv__t{order:2}.sv__lead{order:3}.sv__prova{order:4;margin-top:16px;font-size:17px}.sv__riga{order:6;margin-top:32px}.sv__act{order:7;margin-top:28px}
  .sv__frame,.sv__wide .sv__frame{aspect-ratio:16/10;max-height:none;width:100%}
  .sv__act .btn--line,.sv__act .btn--text{display:none}
}
@media (max-width:599px){.sv__act .btn{width:100%}}

/* titolo di sezione con l'attacco a destra (come «Pordenone» in home) */
.sv__head{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:28px;align-items:end}
.sv__head .h2{grid-column:1/span 8}
.sv__head .lead{grid-column:8/-1}
@media (min-width:1024px){.sv__head .h2{grid-row:1}.sv__head .lead{grid-row:2}}
@media (max-width:1023px){.sv__head .h2,.sv__head .lead{grid-column:1/-1}}

/* due colonne: titolo a sinistra, testo a destra */
.duo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:28px;align-items:start}
.duo>.h2{grid-column:1/span 5;position:sticky;top:calc(var(--hdr) + 40px)}
.duo__txt{grid-column:7/-1}
.duo__txt>*+*{margin-top:22px}
.duo__txt .body{max-width:34em}
@media (max-width:1023px){.duo>.h2{grid-column:1/-1;position:static}.duo__txt{grid-column:1/-1}}

/* un fatto vero, in evidenza: filetto rovere e testo d'inchiostro */
.vero{display:grid;grid-template-columns:40px minmax(0,1fr);gap:0 16px;max-width:34em;font-size:18px;line-height:1.65}
.vero::before{content:"";height:1px;margin-top:.85em;background:var(--rovere)}
.vero strong{color:var(--inchiostro)}
.link-col{display:grid;justify-items:start;gap:6px}

/* ---------- Ristrutturazione · Cosa comprende: i lavori in provini ---------- */
.lav{list-style:none;margin:clamp(48px,5vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(48px,4.4vw,72px) var(--col-gap)}
.lav__i{min-width:0}
.lav__f{aspect-ratio:4/5;margin-bottom:22px}
.lav__t{font-size:clamp(21px,1.6vw,24px);font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--inchiostro)}
.lav__d{margin-top:10px;font-size:17px;line-height:1.6;max-width:30em}
.lav__anche{margin-top:clamp(48px,5vw,80px);padding-top:24px;border-top:1px solid var(--linea-forte);max-width:52em;font-size:19px;line-height:1.65;color:var(--inchiostro)}
@media (min-width:1024px){.lav__i:nth-child(3n+2){margin-top:72px}}
@media (max-width:1023px){.lav{grid-template-columns:repeat(2,minmax(0,1fr))}}
/* su telefono i provini scorrono di lato, come le storie della home */
@media (max-width:599px){
  .lav{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;margin-inline:calc(-1*var(--gutter));padding:0 var(--gutter) 8px;scrollbar-width:none}
  .lav::-webkit-scrollbar{display:none}
  .lav__i{flex:0 0 min(78%,320px);scroll-snap-align:start;scroll-margin-left:var(--gutter)}
}

/* ---------- Ristrutturazione · Solo il bagno ---------- */
.bagno__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:48px;align-items:center}
.bagno__txt{grid-column:1/span 6}
.bagno__p{margin-top:28px}
.bagno__act{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:36px}
.bagno__fig{grid-column:8/span 4;margin:0}
.bagno__frame{aspect-ratio:9/16;max-height:82svh;margin-inline:auto}
@media (max-width:1023px){.bagno__txt,.bagno__fig{grid-column:1/-1}.bagno__fig{max-width:340px}}
@media (max-width:599px){.bagno__fig{max-width:260px}}
@media (max-width:599px){.bagno__act .btn{width:100%;white-space:normal;text-align:left}}

/* ---------- Ristrutturazione · La prova: Pordenone ---------- */
.pn__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:clamp(40px,4vw,56px);margin-top:clamp(56px,6vw,96px);align-items:start}
.pn__ba{grid-column:1/span 5;grid-row:1/span 2;margin:0}
.pn__facts{grid-column:7/-1;grid-row:1}
/* cosa si è fatto a Pordenone, in parole (14/10: al posto dei numeri) */
.pn__fatti{grid-column:7/-1;grid-row:1;list-style:none;margin:0;padding:0;counter-reset:pf}
.pn__fatti li{display:flex;align-items:baseline;gap:16px;padding:18px 0;border-top:1px solid var(--linea);font-size:clamp(18px,1.5vw,22px);font-weight:500;line-height:1.3;letter-spacing:-.01em;color:var(--inchiostro)}
.pn__fatti li:last-child{border-bottom:1px solid var(--linea)}
.pn__fatti li::before{counter-increment:pf;content:counter(pf,decimal-leading-zero);flex:none;font-size:15px;font-weight:600;color:var(--rovere-ink);font-variant-numeric:tabular-nums}
.pn__storia{grid-column:7/span 3;grid-row:2/span 2;list-style:none;margin:0;padding:0}
.pn__link{grid-column:7/-1;grid-row:2;display:grid;justify-items:start;gap:6px;align-self:end}
.pn__invito{margin-top:clamp(72px,8vw,120px)}
.pn .fact{grid-template-columns:clamp(160px,13vw,200px) minmax(0,1fr)}
@media (max-width:1023px){
  .pn__ba,.pn__facts,.pn__fatti,.pn__storia,.pn__link{grid-column:1/-1;grid-row:auto}
  .pn__ba{max-width:520px}
  .pn__storia{max-width:320px}
}
@media (max-width:599px){.pn .fact{grid-template-columns:1fr}.pn__storia{max-width:260px}}

/* ---------- Area riservata in breve: il telefono fermo, più piccolo ---------- */
.area-b__grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:56px;align-items:center}
.area-b__txt{grid-column:1/span 6}
.area-b__p{margin-top:24px}
.area-b__link{display:flex;flex-wrap:wrap;align-items:center;gap:16px 28px;margin-top:32px}
@media (max-width:599px){.area-b__link .btn{width:100%}}
.area-b__dev{grid-column:8/-1;margin:0;display:flex;flex-direction:column;align-items:center}
/* l'invito viene dopo il telefono: su computer sotto il testo, su telefono dopo il disegno */
@media (min-width:1024px){.area-b__grid{row-gap:32px}.area-b__txt{grid-row:1;align-self:end}.area-b__link{grid-column:1/span 6;grid-row:2;align-self:start;margin-top:0}.area-b__dev{grid-row:1/span 2}}
.area-b__phone{zoom:.82}
.area-b__dev .cap{margin-top:24px}
@media (max-width:1023px){.area-b__txt,.area-b__dev,.area-b__link{grid-column:1/-1}.area-b__link{margin-top:0}}
@media (max-width:429px){.area-b__phone{zoom:.76}}
@media (max-width:369px){.area-b__phone{zoom:.7}}

/* etichetta dei render: sempre visibile, i render non si spacciano per foto */
.render-tag{position:absolute;left:14px;top:14px;z-index:3;padding:6px 10px 7px;font-size:16px;font-weight:600;line-height:1;letter-spacing:.01em;color:#fff;background:rgba(26,26,26,.66);pointer-events:none}
.frame--render{aspect-ratio:16/9;margin:0}

/* ---------- Progettazione · il disegno che diventa render (scorrendo) ---------- */
.dr{margin:clamp(48px,5vw,80px) 0 0}
.dr__frame{position:relative;aspect-ratio:16/9;max-height:80svh;width:100%;overflow:visible;background:var(--bianco);border:1px solid var(--linea)}
.dr__disegno{position:absolute;inset:0;width:100%;height:100%;color:rgba(60,83,102,.5)}
.dr__render{position:absolute;inset:0;overflow:hidden;background:#DDE2E5}
.dr__render img{width:100%;height:100%;object-fit:cover}
.dr__linea{position:absolute;top:0;bottom:0;left:0;z-index:2;width:2px;margin-left:-1px;background:var(--rovere);opacity:0;pointer-events:none}
.dr__dopo{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:40px;align-items:start;margin-top:clamp(56px,6vw,96px)}
.dr__dopo .vero{grid-column:1/span 4}
.dr__coppia{grid-column:6/-1;list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:var(--col-gap)}
.dr__dopo>.dr__coppia:only-child{grid-column:1/-1}
@media (max-width:1023px){.dr__dopo .vero,.dr__coppia{grid-column:1/-1}.dr__frame{aspect-ratio:4/3}}
@media (max-width:599px){.dr__coppia{grid-template-columns:1fr}.dr .crop{display:none}}

/* ---------- Progettazione · le pratiche, con la tavola CILA/SCIA ---------- */
.prat{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:48px;align-items:start}
.prat__txt{grid-column:1/span 7}
.prat__p{margin-top:28px}
.prat__vero{margin-top:28px}
.prat__link{margin-top:32px}
.prat__tav{grid-column:9/-1;position:sticky;top:calc(var(--hdr) + 40px)}
.tav{position:relative;aspect-ratio:4/3;border:1px solid var(--linea-forte);background:var(--bianco);color:rgba(169,118,73,.75);overflow:hidden}
.tav .plate__draw{position:absolute;inset:0;width:100%;height:100%}
.tav__tag{position:absolute;right:16px;bottom:16px;display:grid;padding:8px 14px 10px;border:1px solid var(--linea-forte);background:var(--bianco);color:var(--inchiostro);font-size:clamp(20px,1.6vw,24px);font-weight:300;line-height:1.15;letter-spacing:.02em}
.tav__tag b{font-weight:300}
.tav__tag b+b{color:var(--rovere-ink)}
@media (max-width:1023px){.prat__txt,.prat__tav{grid-column:1/-1}.prat__tav{position:static;max-width:520px}}

/* ---------- Progettazione · stai comprando casa? ---------- */
.compra{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:40px;align-items:center}
.compra__fig{grid-column:1/span 5;margin:0}
.compra__txt{grid-column:7/-1}
.compra__p{margin-top:28px}
.compra__vero{margin-top:24px}
.compra__btn{margin-top:32px}
@media (max-width:1023px){.compra__fig,.compra__txt{grid-column:1/-1}}
@media (max-width:599px){.compra__btn{width:100%}}

/* ---------- Progettazione · quattro passi su una traccia chiara ---------- */
.passi{position:relative;list-style:none;margin:clamp(48px,5vw,72px) 0 0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--col-gap)}
.passi__rail{position:absolute;left:0;right:0;top:7px;height:1px;background:var(--linea-forte);pointer-events:none}
.passi__fill{position:absolute;inset:0;background:var(--rovere);transform-origin:left}
.passo{position:relative;padding-top:44px;min-width:0}
.passo__node{position:absolute;top:0;left:0;width:15px;height:15px;border-radius:50%;border:1px solid var(--rovere);background:var(--rovere);transition:background-color .5s,transform .5s var(--ease)}
.passo__n{display:block;margin-bottom:16px;font-size:clamp(44px,4vw,64px);font-weight:300;letter-spacing:-.05em;line-height:1;color:var(--inchiostro)}
.passo__t{margin:0 0 8px;font-size:22px;font-weight:600;letter-spacing:-.015em;line-height:1.3;color:var(--inchiostro)}
.passo__d{font-size:17px;line-height:1.6;max-width:22em}
.passi.is-js .passo__node{background:var(--calce)}
.passi.is-js .passo.is-on .passo__node{background:var(--rovere);transform:scale(1.15)}
.passi__link{display:flex;flex-wrap:wrap;gap:8px 36px;margin-top:clamp(40px,4vw,56px)}
@media (max-width:1023px){
  .passi{grid-template-columns:1fr;gap:40px;padding-left:44px}
  .passi__rail{left:7px;right:auto;top:8px;bottom:0;width:1px;height:auto}
  .passi__fill{transform-origin:top}
  .passo{padding-top:0}
  .passo__node{left:-44px;top:10px}
  .passo__n{font-size:44px;margin-bottom:10px}
}

/* ---------- Arredo · la parete aperta ---------- */
.pa{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--col-gap);row-gap:clamp(40px,4vw,64px);align-items:start}
.pa__txt{grid-column:1/span 6}
.pa__p{margin-top:28px}
.pa__fig{grid-column:9/-1;grid-row:1/span 3;margin:0}
.pa__dis{grid-column:1/span 7;margin:0}
.pa__vero{grid-column:1/span 7;display:grid;justify-items:start;gap:20px}
.pa__svg{width:100%;height:auto;overflow:visible;color:var(--inchiostro)}
.pa__muro{color:rgba(60,83,102,.45)}
.pa__tubi{color:var(--rovere)}
.pa__tubi path{stroke-dasharray:1;stroke-dashoffset:0}
.pa__etich{font-family:var(--f);font-size:17px}
@media (max-width:599px){.pa__etich{font-size:30px}.pa__svg{margin-inline:-8px}}
/* Arredo dentro Ristrutturazione (14/10): testo a sinistra, la parete a destra, niente foto */
@media (min-width:1024px){.pa--ristr .pa__txt{grid-column:1/span 5}.pa--ristr .pa__dis{grid-column:7/-1;grid-row:1/span 2;align-self:center}.pa--ristr .pa__vero{grid-column:1/span 5}}
.pa--ristr .pa__p+.pa__p{margin-top:16px}
@media (max-width:1023px){.pa__txt,.pa__fig,.pa__dis,.pa__vero{grid-column:1/-1;grid-row:auto}.pa__fig{max-width:420px}}