/* pagine artigiano: su misura, laboratorio, lavori, e sezioni "come lo costruisco" nei prodotti */
.page-hero{padding:3.5rem 0 4rem}
.page-hero h1{font:300 clamp(2.2rem,5vw,3.8rem)/1.08 var(--serif);letter-spacing:-.02em;margin-bottom:1rem;max-width:20ch}
.page-hero .lead{color:var(--muted);max-width:52ch;margin-bottom:2rem;font-size:1.1rem}
.cs{padding:0 0 5.5rem}
.cs h2{font:300 clamp(1.7rem,3vw,2.4rem)/1.15 var(--serif);margin-bottom:1rem;max-width:22ch}
.cs .sub{color:var(--muted);max-width:56ch;margin-bottom:2.4rem}
.sand{background:var(--ash);padding:5rem 0;margin-bottom:5.5rem}

/* passaggi numerati */
.flow{display:grid;grid-template-columns:repeat(4,1fr);gap:2rem;counter-reset:f;padding:0;list-style:none}
.flow li{counter-increment:f;border-top:1px solid rgba(42,29,20,.2);padding-top:1.1rem}
.flow li::before{content:counter(f,decimal-leading-zero);display:block;font:500 .8rem var(--sans);letter-spacing:.18em;color:var(--brass);margin-bottom:.6rem}
.flow b{display:block;font:500 1.2rem/1.25 var(--serif);margin-bottom:.4rem}
.flow span{color:var(--muted);font-size:.97rem}

/* cosa costruisco */
.kinds{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem}
.kinds a{text-decoration:none;display:block}
.kinds .ph{aspect-ratio:4/3;margin-bottom:1rem}
.kinds h3{font-size:1.3rem;margin-bottom:.4rem}
.kinds p{color:var(--muted);font-size:.98rem}

/* elenco puntato sobrio */
.ticks{list-style:none;padding:0;display:grid;gap:.7rem;max-width:60ch}
.ticks li{padding-left:1.4rem;position:relative}
.ticks li::before{content:"";position:absolute;left:0;top:.6em;width:7px;height:7px;border:1.5px solid var(--brass);border-radius:50%}
.ticks b{font-weight:500}

/* essenze */
.woods{display:grid;grid-template-columns:repeat(3,1fr);gap:1.2rem}
.woods>div{background:#fff;padding:1.4rem 1.4rem 1.5rem;border-top:6px solid var(--c,#c99a63)}
.woods h3{font-size:1.25rem;margin-bottom:.35rem}
.woods p{color:var(--muted);font-size:.95rem}

/* domande frequenti */
.faq{max-width:760px;border-top:1px solid rgba(42,29,20,.15)}
.faq details{border-bottom:1px solid rgba(42,29,20,.15);padding:1rem 0}
.faq summary{cursor:pointer;font:500 1.12rem var(--serif);list-style:none;display:flex;justify-content:space-between;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:var(--brass);font:300 1.4rem/1 var(--sans)}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--muted);margin-top:.6rem;max-width:62ch}

/* lavori realizzati */
.works{display:grid;grid-template-columns:repeat(2,1fr);gap:2.5rem 2rem}
.works .ph{aspect-ratio:4/3;margin-bottom:1rem}
.works h3{font-size:1.35rem;margin-bottom:.3rem}
.works .meta{font-size:.85rem;letter-spacing:.08em;text-transform:uppercase;color:var(--brass);margin-bottom:.5rem}
.works p{color:var(--muted)}

/* blocco richiesta preventivo */
.ask{background:var(--pioppo,#f3ebd8);padding:3rem;display:grid;grid-template-columns:1.2fr 1fr;gap:2.5rem;align-items:center}
.ask h2{margin-bottom:.6rem}
.ask p{color:#6a5845}

/* rimando incrociato nelle pagine prodotto */
.adapt{display:grid;grid-template-columns:repeat(2,1fr);gap:.9rem 2rem;margin:1.4rem 0 1.6rem;padding:0;list-style:none}
.adapt li{border-left:2px solid var(--brass);padding:.25rem 0 .25rem 1rem}
.adapt b{display:block;font:500 1.05rem var(--serif)}
.adapt span{color:var(--muted);font-size:.93rem}

/* segnaposto: materiale da ricevere da Fabrizio (da togliere prima della pubblicazione) */
.todo{outline:2px dashed #d08a1e;outline-offset:6px;background:#fff6e2;position:relative}
.todo-note{display:block;font:500 .78rem/1.4 var(--sans);letter-spacing:.04em;color:#a2620a;background:#fff6e2;border:1px dashed #d08a1e;padding:.55rem .8rem;margin:.6rem 0 1rem;max-width:62ch}
.todo-note::before{content:"DA COMPLETARE · "}
.slot{aspect-ratio:4/3;background:repeating-linear-gradient(135deg,#f6efe2 0 14px,#efe5d3 14px 28px);display:flex;align-items:center;justify-content:center;text-align:center;color:#8a6a3c;font-size:.9rem;padding:1rem;border:1px dashed #d0b58a}

@media (max-width:900px){
  .flow{grid-template-columns:1fr 1fr}
  .kinds,.woods{grid-template-columns:1fr 1fr}
  .ask{grid-template-columns:1fr;padding:2rem}
}
@media (max-width:620px){
  .flow,.kinds,.woods,.works,.adapt{grid-template-columns:1fr}
}
/* menu con più voci */
nav{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:.4rem 1.5rem}
nav a{margin-left:0}
nav a[aria-current=page]{color:var(--ink);border-bottom:1px solid var(--brass)}
@media (max-width:600px){nav{justify-content:flex-start;gap:.4rem 1.1rem}nav a{font-size:.92rem}}

/* due colonne, valida anche nella pagina Cube (che non carica prod.css) */
.cduo{display:grid;grid-template-columns:1fr 1.1fr;gap:3.5rem;align-items:center}
.cduo h2{font:300 clamp(1.7rem,3vw,2.4rem)/1.15 var(--serif);margin-bottom:1rem;max-width:20ch}
.cduo p{color:var(--muted);max-width:50ch;margin-bottom:1rem}
.cduo h3{font:500 1.3rem var(--serif);margin:1.8rem 0 0}
.craft{padding:0 0 5.5rem;margin-top:-1.5rem}
@media (max-width:820px){.cduo{grid-template-columns:1fr;gap:2rem}}

/* menu a tendina Prodotti */
.dd{position:relative;padding-bottom:.6rem;margin-bottom:-.6rem}
.dd-t::after{content:"";display:inline-block;width:.36em;height:.36em;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin:0 0 .22em .5em;opacity:.7}
.dd-m{position:absolute;top:100%;left:-1rem;min-width:13.5rem;background:#fff;border:1px solid rgba(42,29,20,.12);box-shadow:0 16px 32px -20px rgba(60,40,20,.55);padding:.45rem 0;display:none;z-index:30;text-align:left}
.dd-m a{display:block;padding:.55rem 1.1rem;color:var(--muted);white-space:nowrap;text-decoration:none;border:0}
.dd-m a:hover,.dd-m a[aria-current=page]{color:var(--ink);background:var(--ash)}
.dd:hover .dd-m,.dd:focus-within .dd-m,.dd.open .dd-m{display:block}
/* pagine di categoria */
.catpage{padding-top:0}
.catpage .phead h1{font:300 clamp(2rem,4.4vw,3.2rem)/1.1 var(--serif);letter-spacing:-.02em;margin:0 0 .8rem;max-width:22ch}
.catpage .kicker{margin-bottom:.7rem}
.catpage .kicker{font:500 .75rem var(--sans);letter-spacing:.2em;text-transform:uppercase;color:var(--brass)}
/* pagine prodotto: percorso, sottotitolo dell'h1, prezzo */
.crumb{display:flex;flex-wrap:wrap;align-items:center;gap:.2rem .5rem;font:500 .75rem var(--sans);letter-spacing:.16em;text-transform:uppercase;margin-bottom:.9rem}
.crumb a{color:var(--brass);text-decoration:none;padding:.5rem 0}
.crumb a:hover{color:var(--ink)}
.crumb span{color:var(--muted)}
.h1s{display:block;font:300 .44em/1.3 var(--sans);letter-spacing:0;color:var(--muted);margin-top:.5rem}
.price-line{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .7rem;margin:-.4rem 0 1.5rem;font:400 1.6rem var(--serif);color:var(--ink)}
.price-line small{font:400 .9rem var(--sans);color:var(--muted)}
.price-line a{font:400 .8rem var(--sans);color:var(--muted);text-decoration:none;border-bottom:1px solid rgba(168,122,47,.5);padding:.6rem 0 .1rem;margin-left:auto}
/* smartphone: meno vuoti e tocchi più comodi */
@media (max-width:820px){
  .pp-hero{margin-bottom:3rem}
  .duo,.gallery,.band{margin-bottom:3rem}
  .craft{padding-bottom:2.5rem}
  .back{margin-bottom:1rem}
  footer{padding-top:1rem}
  .price-line a{margin-left:0;flex-basis:100%}
}
@media (max-width:600px){
  nav a{padding:.65rem 0}
  .foot a{display:inline-block;padding:.55rem 0}
  .ctas .link{padding-top:.5rem}
}
nav.crumb{justify-content:flex-start;width:auto;gap:.2rem .5rem}
nav.crumb a{margin:0;font-size:inherit;color:var(--brass);padding:.5rem 0}
@media (max-width:820px){.craft{padding-bottom:0}section.pp{padding-bottom:2rem}.price-line a{flex-basis:auto}}
@media (max-width:600px){.dd{padding-bottom:0;margin-bottom:0}nav.crumb{display:flex;width:auto}}
.dd-t{display:inline-block}
/* categorie come pulsanti sopra la griglia dei prodotti */
.catchips{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.catchips a{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1.1rem;border:1px solid rgba(42,29,20,.25);border-radius:2px;background:#fff;color:var(--ink);text-decoration:none;font-size:.95rem;transition:background .2s,color .2s,border-color .2s}
.catchips a:hover,.catchips a[aria-current=page]{background:var(--ink);border-color:var(--ink);color:#fff}
@media (max-width:600px){.catchips{gap:.5rem}.catchips a{padding:.45rem .9rem;font-size:.92rem}}
/* essenze su richiesta, in alto nelle pagine prodotto */
.essenze-row{margin:0 0 1.5rem}
.er-t{display:flex;flex-wrap:wrap;align-items:baseline;gap:.2rem .8rem;font-size:.9rem;color:var(--muted);margin-bottom:.7rem}
.er-t a{font-size:.82rem;color:var(--ink);text-decoration:none;border-bottom:1px solid var(--brass);padding:.35rem 0 .05rem}
.essenze-row ul{display:flex;flex-wrap:wrap;gap:.75rem .5rem;list-style:none;padding:0;margin:0}
.essenze-row li{width:62px;display:flex;flex-direction:column;align-items:center;gap:.35rem;font-size:.74rem;line-height:1.2;text-align:center;color:var(--ink)}
.sw{width:36px;height:36px;border-radius:50%;background:repeating-linear-gradient(104deg,var(--a) 0 4px,var(--b) 4px 6px,var(--a) 6px 11px,var(--b) 11px 12px);box-shadow:inset 0 0 0 1px rgba(0,0,0,.1),0 2px 6px -3px rgba(60,40,20,.5)}
.craft>div>p{color:var(--muted);max-width:62ch}
.craft>div>p{margin-bottom:1rem}
.cube-page .craft{padding-bottom:4rem}
@media (max-width:820px){.cube-page .craft{padding-bottom:3rem}}
/* telefono: foto principale del prodotto più piccola, così il nome entra nella prima schermata */
@media (max-width:820px){.pp-hero .ph.sq{width:78%;margin:0 auto}.pp-hero{gap:1.4rem}}
.flow.flow5{grid-template-columns:repeat(5,1fr);gap:1.6rem}
@media (max-width:1000px){.flow.flow5{grid-template-columns:repeat(3,1fr)}}
@media (max-width:620px){.flow.flow5{grid-template-columns:1fr;gap:1.2rem}}
/* Wave: onde sonore nella pianta della stanza */
.room .fx{display:none}
.room .fx.on{display:inline}
.room .in{stroke:#a87a2f;stroke-width:1.6;stroke-dasharray:3 5;animation:flow 1s linear infinite}
.room .ray{stroke:#8f5a36;stroke-width:1.4;stroke-linecap:round;stroke-dasharray:34;stroke-dashoffset:34;animation:spread 2.2s ease-out infinite;animation-delay:var(--d)}
.room .rings circle{fill:none;stroke:#a87a2f;stroke-width:1;opacity:0;transform-box:fill-box;transform-origin:center;animation:ring 2.2s ease-out infinite}
.room .rings .r2{animation-delay:1.1s}
@keyframes flow{to{stroke-dashoffset:-16}}
@keyframes spread{0%{stroke-dashoffset:34;opacity:0}15%{opacity:.9}60%{stroke-dashoffset:0;opacity:.7}100%{stroke-dashoffset:0;opacity:0}}
@keyframes ring{0%{transform:scale(.9);opacity:.6}100%{transform:scale(2.6);opacity:0}}
@media (prefers-reduced-motion:reduce){.room .in,.room .ray,.room .rings circle{animation:none}.room .ray{stroke-dashoffset:0;opacity:.7}}
.labph{aspect-ratio:4/3;border-radius:2px}
/* home: foto del laboratorio accanto a "Dal tuo impianto al mobile finito" */
.met-head{display:grid;grid-template-columns:1fr 1fr;gap:3rem;align-items:center;margin-bottom:3rem}
.met-head .intro{margin-bottom:0}
.met-ph{display:block;aspect-ratio:4/3;overflow:hidden;border-radius:2px}
.met-ph img{display:block;width:100%;height:100%;object-fit:cover;transition:transform 1s cubic-bezier(.2,.7,.2,1)}
.met-ph:hover img{transform:scale(1.03)}
@media (max-width:820px){.met-head{grid-template-columns:1fr;gap:1.6rem;margin-bottom:2.4rem}}
.ctas{display:flex;flex-wrap:wrap;gap:.8rem 1.2rem;align-items:center}
.link{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--brass);padding-bottom:.15rem}
.link:hover{color:var(--brass)}
/* contatti in fondo a ogni pagina */
.fcta{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem 2rem;padding:2rem 1.5rem;margin-bottom:1.6rem;border-top:1px solid rgba(42,29,20,.14);border-bottom:1px solid rgba(42,29,20,.14)}
.fcta p{font:300 1.35rem/1.3 var(--serif);color:var(--ink);margin:0;max-width:44ch}
.fcta .link.tel{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
.fcta .link.tel svg{color:var(--brass)}
@media (max-width:600px){.fcta{padding:1.6rem 1.5rem}.fcta p{font-size:1.2rem}}