/* MODELLO "ATELIER GEOMETRICO" — ricalca ilcolorista.salon */
:root{
  --bg:#fff;--carta:#f4f4f4;--ink:#1f1f1f;--muted:#6f6f6f;--g1:#c9c9c9;--g2:#9a9a9a;--pesca:#f4a48c;--pesca2:#f7c5b6;
  --acc:var(--ink);--accInk:#fff;--line:rgba(31,31,31,.15);
  --serif:'Cormorant Garamond',Georgia,serif;--sans:'Karla',system-ui,sans-serif;
  --ease:cubic-bezier(.16,1,.3,1);--pad:clamp(18px,4.4vw,70px);--sab:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 16px/1.7 var(--sans);overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit}
main{overflow-x:clip}
.wrap{max-width:1380px;margin:0 auto;padding:0 var(--pad)}
.giant{font:200 clamp(56px,9vw,140px)/.9 var(--sans);letter-spacing:-.04em;text-transform:lowercase}
.btn{display:inline-flex;gap:12px;align-items:center;padding:16px 26px;background:var(--ink);color:#fff;font:400 14px var(--sans);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer}

/* header */
.hdr{position:fixed;inset:0 0 auto;z-index:50;display:flex;justify-content:space-between;align-items:flex-start;padding:22px var(--pad);pointer-events:none}
.hdr>*{pointer-events:auto}
.logo{background:var(--ink);color:#fff;text-decoration:none;padding:12px 18px 14px;font:300 26px/1 var(--serif)}
.logo i{font-style:italic}
.hdr .r{display:flex;align-items:center;gap:18px;background:rgba(255,255,255,.9);backdrop-filter:blur(8px);padding:10px 16px;border-radius:999px}
.hdr .r a,.hdr .r button{font:500 12px var(--sans);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;background:none;border:0;color:var(--ink);cursor:pointer}
.hdr .r .wa{display:inline-flex;align-items:center;gap:6px}
.hdr .r .wa::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--pesca)}
.menu{position:fixed;inset:0;z-index:45;background:var(--pesca2);display:flex;flex-direction:column;justify-content:center;padding:0 var(--pad);clip-path:circle(0% at calc(100% - 60px) 40px);transition:clip-path .9s var(--ease)}
.menu-open .menu{clip-path:circle(150% at calc(100% - 60px) 40px)}
.menu a{font:300 clamp(44px,7vw,92px)/1.1 var(--serif);text-decoration:none}
.menu a:hover{font-style:italic}

/* hero: titolo serif + collage di cerchi e forme pesca */
.hero{min-height:100vh;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:center;gap:clamp(20px,4vw,60px);padding:130px var(--pad) 60px;max-width:1380px;margin:0 auto}
.hero h1{font:300 clamp(48px,6.4vw,104px)/.98 var(--serif);letter-spacing:-.01em}
.hero h1 i{color:var(--pesca)}
.hero p{color:var(--muted);max-width:40ch;margin:26px 0 30px}
.coll{position:relative;aspect-ratio:1/1.02}
.coll>*{position:absolute}
.sh{background:var(--pesca)}
.sh.c1{width:46%;aspect-ratio:1;border-radius:50%;left:4%;top:6%;background:var(--pesca2)}
.sh.r1{width:34%;height:42%;right:2%;bottom:6%}
.sh.c2{width:16%;aspect-ratio:1;border-radius:50%;right:26%;top:2%}
.ph{overflow:hidden}
.ph img{width:100%;height:100%;object-fit:cover}
.ph.a{width:52%;aspect-ratio:1;border-radius:50%;left:14%;top:14%}
.ph.b{width:38%;height:48%;right:8%;top:16%}
.ph.c{width:30%;aspect-ratio:1;border-radius:50%;left:36%;bottom:0;border:8px solid #fff}

/* manifesto */
.mani{padding:clamp(100px,16vh,180px) var(--pad);text-align:center}
.mani p{font:300 clamp(26px,3.2vw,44px)/1.3 var(--serif);max-width:28ch;margin:0 auto}
.mani p em{color:var(--pesca)}

/* titolo a gradazione */
.metodo{background:var(--carta);padding:clamp(100px,14vh,170px) 0}
.grad span{display:block}
.grad span:nth-child(1){color:var(--g1);font-size:.5em}
.grad span:nth-child(2){padding-left:.6em}
.grad span:nth-child(2) b{font-weight:200;color:var(--pesca)}
.grad span:nth-child(3){color:var(--g2);padding-left:1.6em;font-size:.8em}
.metodo .grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(20px,3vw,50px);margin-top:clamp(60px,9vh,100px)}
.step b{display:block;font:300 34px/1.1 var(--serif);margin:14px 0 8px}
.step span{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:var(--pesca);font-weight:500}
.step p{color:var(--muted)}

/* trattamenti */
.tratt{padding:clamp(100px,14vh,170px) 0}
.tratt .row{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:20px;align-items:baseline;padding:26px 0;border-bottom:1px solid var(--line)}
.tratt .row:first-of-type{border-top:1px solid var(--line)}
.tratt h3{font:300 clamp(30px,3.6vw,52px)/1 var(--serif)}
.tratt h3 small{display:block;font:400 15px/1.6 var(--sans);color:var(--muted);margin-top:8px;max-width:60ch}
.tratt .pr{font:400 15px var(--sans);letter-spacing:.08em;white-space:nowrap}
@media (hover:hover) and (pointer:fine){.tratt .row h3{transition:transform .6s var(--ease)}.tratt .row:hover h3{transform:translateX(14px);font-style:italic}}

/* staff a scaletta, ritratti B/N negli anelli */
.staff{padding:0 0 clamp(100px,14vh,170px)}
.scal span{display:block}
.scal span:nth-child(1){color:var(--g1)}
.scal span:nth-child(2){color:var(--g2);padding-left:1.1em}
.scal span:nth-child(3){padding-left:2.4em}
.team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(24px,4vw,70px);margin-top:clamp(50px,8vh,90px)}
.pp{text-align:center}
.pp:nth-child(2){margin-top:80px}
.ring{border-radius:50%;padding:14px;background:var(--pesca);aspect-ratio:1}
.pp:nth-child(2) .ring{background:var(--pesca2)}
.ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;filter:grayscale(1);border:6px solid #fff}
.pp b{display:block;font:300 32px var(--serif);margin-top:18px}
.pp span{color:var(--muted);font-size:14px;letter-spacing:.1em;text-transform:uppercase}

/* news */
.news{background:var(--carta);padding:clamp(100px,14vh,160px) 0}
.news .cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin-top:50px}
.nc figure{aspect-ratio:4/3;overflow:hidden}
.nc img{width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}
@media (hover:hover) and (pointer:fine){.nc:hover img{transform:scale(1.05)}}
.nc small{display:block;margin-top:14px;color:var(--muted);font-size:13px;letter-spacing:.1em;text-transform:uppercase}
.nc h3{font:300 28px/1.15 var(--serif);margin-top:6px}

/* prenota */
.pren{padding:clamp(100px,14vh,170px) 0}
.pren .grid{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(30px,6vw,100px)}
.pren .q{font:500 12px var(--sans);letter-spacing:.16em;text-transform:uppercase;color:var(--muted);margin:24px 0 10px}
.pren .tf-ch{border-radius:0}
.pren .tf-ch.on{background:var(--pesca);border-color:var(--pesca);color:var(--ink)}
.pren .btn{margin-top:26px}
.pren .alt{font-size:13px;color:var(--muted);margin-top:10px}
.pren .dot{width:min(360px,70%);aspect-ratio:1;border-radius:50%;background:var(--pesca2);display:grid;place-items:center;text-align:center;font:300 clamp(26px,2.6vw,36px)/1.15 var(--serif);padding:40px;margin-top:40px}

footer{border-top:1px solid var(--line);padding:50px 0 calc(30px + var(--sab));font-size:14px}
footer .wrap{display:flex;justify-content:space-between;gap:24px;flex-wrap:wrap}
footer small{color:var(--muted)}

.js .coll>*{opacity:0}
.static .coll>*{opacity:1!important;transform:none!important}

@media (max-width:900px){
  .hero{grid-template-columns:minmax(0,1fr);padding-top:110px;min-height:auto}
  .coll{width:100%;max-width:460px;margin:20px auto 0}
  .metodo .grid,.team,.news .cards,.pren .grid{grid-template-columns:minmax(0,1fr)}
  .pp:nth-child(2){margin-top:0}
  .team{max-width:340px;margin-left:auto;margin-right:auto}
  .hdr .r .soc{display:none}
  .pren .dot{display:none}
}