*{box-sizing:border-box;margin:0;padding:0}
:root{
  /* palette presa dal centro vero: insegna arancione, pareti greige, bancone bianco, prodotti verde oliva */
  --latte:#faf8f5;
  --greige:#e9e3dc;
  --greige-sc:#b9afa5;
  --ink:#2f2926;
  --muto:#5f5750;
  --linea:#ddd5cb;
  --corallo:#e8512b;
  --corallo-sc:#b93a1a; /* corallo per testo su chiaro (contrasto 5:1) */
  --oliva:#8fa82e;
  --sans:'Jost',system-ui,sans-serif;
}
html{scroll-behavior:smooth;scroll-padding-top:84px}
body{font-family:var(--sans);font-size:18px;line-height:1.6;color:var(--ink);background:var(--latte);-webkit-font-smoothing:antialiased}
img{display:block;width:100%;height:100%;object-fit:cover}
a{color:inherit;text-decoration:none}
ul{list-style:none}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.pause :focus-visible,.contact :focus-visible,footer :focus-visible{outline-color:#fff}

h1,h2,h3{font-family:var(--sans);font-weight:300;line-height:1.05;letter-spacing:-.025em;color:var(--ink)}
h2{font-size:clamp(36px,4.6vw,64px)}
p{max-width:62ch}

.skip{position:absolute;left:-999px;top:8px;background:var(--ink);color:#fff;padding:10px 16px;border-radius:999px;z-index:100}
.skip:focus{left:8px}

.pill{display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:0 28px;border-radius:999px;font-weight:500;font-size:16px;cursor:pointer;border:2px solid transparent;transition:background-color .2s,color .2s,border-color .2s;font-family:inherit}
.pill-coral{background:var(--corallo);color:var(--ink)}
.pill-coral:hover{background:#f0693f}
.pill-outline{border-color:var(--ink);color:var(--ink)}
.pill-outline:hover{background:var(--ink);color:#fff}
.link{font-weight:500;color:var(--corallo-sc);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;transition:color .2s}
.link:hover{color:var(--ink)}
.link.center{display:block;width:max-content;margin:44px auto 0}

/* header */
.site-header{height:76px;padding:0 5vw;display:flex;align-items:center;gap:32px;position:sticky;top:0;z-index:30;background:rgba(250,248,245,.92);backdrop-filter:blur(10px)}
.brand{display:inline-flex;align-items:center;gap:10px;font-weight:400;font-size:21px;letter-spacing:-.01em}
.brand-logo{width:30px;height:38px;color:var(--corallo)}
.main-nav{display:flex;gap:34px;margin-left:auto;font-weight:400;font-size:16px}
.main-nav a{padding:8px 0;border-bottom:2px solid transparent;transition:border-color .2s}
.main-nav a:hover{border-color:var(--corallo)}
.header-cta{min-height:44px;padding:0 22px}
.menu-toggle{display:none;width:48px;height:48px;border:0;background:none;cursor:pointer;margin-left:auto;position:relative}
.menu-toggle span{position:absolute;left:12px;right:12px;height:2px;background:var(--ink);border-radius:2px;transition:transform .25s,top .25s}
.menu-toggle span:first-child{top:18px}
.menu-toggle span:last-child{top:28px}
.menu-toggle[aria-expanded="true"] span:first-child{top:23px;transform:rotate(45deg)}
.menu-toggle[aria-expanded="true"] span:last-child{top:23px;transform:rotate(-45deg)}

/* hero: titolo grande, goccia che cade, poi la foto vera del centro a tutta larghezza */
.hero{padding:clamp(28px,4vw,64px) 5vw clamp(56px,7vw,100px)}
.hero-top{display:grid;grid-template-columns:1.3fr .7fr;gap:4vw;align-items:center}
.place{font-weight:500;color:var(--corallo-sc);margin-bottom:20px;font-size:17px}
h1{font-size:clamp(46px,6.8vw,106px);font-weight:300;line-height:.98;letter-spacing:-.04em;max-width:12ch}
.lead{font-size:clamp(19px,1.5vw,22px);color:var(--muto);margin-top:28px;max-width:44ch;line-height:1.5}
.hero-actions{display:flex;align-items:center;gap:30px;flex-wrap:wrap;margin-top:36px}

.stage{position:relative;display:grid;place-items:center;aspect-ratio:1/1;width:100%;max-width:380px;justify-self:center}
.stage-logo{position:relative;width:46%;height:58%;color:var(--corallo);animation:cade .9s cubic-bezier(.3,1.4,.5,1) both}
.ring{position:absolute;inset:18%;border:2px solid var(--corallo);border-radius:50%;opacity:0;animation:onda 2.4s ease-out both}
.r1{animation-delay:.75s}.r2{animation-delay:1.05s}.r3{animation-delay:1.35s}
/* l'unico momento animato: una goccia cade nell'acqua e le onde si allargano */
@keyframes cade{0%{transform:translateY(-140%);opacity:0}30%{opacity:1}100%{transform:none;opacity:1}}
@keyframes onda{0%{transform:scale(.3);opacity:.7}100%{transform:scale(1.5);opacity:0}}

.hero-photo{position:relative;margin-top:clamp(40px,5vw,72px);aspect-ratio:2.2/1;border-radius:40px 0 40px 40px;overflow:hidden;background:var(--greige)}
.rating{position:absolute;left:20px;bottom:20px;display:flex;align-items:center;gap:10px;background:var(--latte);color:var(--ink);font-size:15px;font-weight:500;padding:10px 18px;border-radius:999px}
.stars{display:flex;gap:2px;color:var(--corallo)}
.stars svg{width:17px;height:17px}

/* trattamenti */
.menu-section{padding:clamp(60px,8vw,120px) 5vw}
.section-head{display:grid;grid-template-columns:1fr 1fr;gap:6vw;align-items:end;margin-bottom:clamp(36px,5vw,60px)}
.section-head p{color:var(--muto)}
.treatments{border-top:2px solid var(--ink)}
.treatments li{border-bottom:1px solid var(--linea)}
.treatments a{display:grid;grid-template-columns:minmax(220px,1fr) 1.4fr .7fr 36px;gap:4vw;align-items:center;padding:30px 0;transition:background-color .25s,padding .25s}
.treatments h3{font-size:clamp(28px,3vw,42px);font-weight:400}
.treatments p{color:var(--muto);font-size:17px}
.tech{font-weight:500;color:var(--corallo-sc);font-size:16px}
.row-drop{width:26px;height:26px;color:var(--greige-sc);transition:color .25s,transform .25s}
.treatments a:hover{background:var(--greige);padding-left:20px;padding-right:20px}
.treatments a:hover .row-drop{color:var(--corallo);transform:translateY(3px)}
.note{margin-top:32px;color:var(--muto)}

/* pausa */
.pause{background:var(--ink);color:#e6dfd8;padding:clamp(72px,9vw,130px) 5vw;display:grid;grid-template-columns:1.1fr .9fr;gap:6vw;align-items:end}
.pause h2{color:#fff;font-size:clamp(38px,5.4vw,82px);line-height:1}
.pause p{font-size:20px;color:#d2cac2;max-width:44ch}

/* chi siamo */
.about{display:grid;grid-template-columns:1.1fr .9fr;gap:7vw;align-items:center;padding:clamp(72px,9vw,130px) 5vw}
.about-photo{aspect-ratio:1.3/1;border-radius:40px 0 40px 40px;overflow:hidden;background:var(--greige)}
.about-copy{max-width:540px}
.about-copy p{margin:24px 0 0;color:var(--muto)}
.about-copy .pill{margin-top:34px}

/* galleria */
.gallery{background:var(--greige);padding:clamp(72px,9vw,130px) 5vw}
.mosaic{display:grid;grid-template-columns:1.5fr 1fr;gap:20px;align-items:stretch}
.mosaic figure{overflow:hidden;background:var(--greige-sc)}
.m1{aspect-ratio:1.4/1;border-radius:40px 0 40px 40px}
.m2{border-radius:40px 40px 0 40px;min-height:300px}

/* contatti */
.contact{background:var(--ink);color:#e6dfd8;display:grid;grid-template-columns:1fr 1fr;gap:7vw;padding:clamp(72px,9vw,130px) 5vw;align-items:start}
.contact h2{color:#fff}
.contact .lead{color:#d2cac2}
.details{display:grid;gap:18px;margin:38px 0}
.details dt,.hours dt{font-size:15px;color:#b3aaa1}
.details dd{font-size:20px}
.details a{text-decoration:underline;text-decoration-color:var(--corallo);text-decoration-thickness:2px;text-underline-offset:4px}
.hours{margin-bottom:38px;max-width:420px}
.hours h3{color:#fff;font-size:28px;font-weight:400;margin-bottom:10px}
.open-now{display:inline-flex;align-items:center;gap:8px;font-size:15px;font-weight:500;color:#d2cac2;margin-bottom:12px}
.open-now:before{content:'';width:9px;height:9px;border-radius:50%;background:#8a8078}
.open-now.is-open{color:#fff}
.open-now.is-open:before{background:var(--oliva);box-shadow:0 0 0 4px rgba(143,168,46,.3)}
.hours dl div{display:flex;justify-content:space-between;gap:20px;padding:11px 0;border-bottom:1px solid rgba(255,255,255,.16)}
.hours dd{color:#fff;font-weight:500}

.contact-side{display:grid;gap:24px}
.door{aspect-ratio:1.6/1;border-radius:40px 0 40px 40px;overflow:hidden;background:var(--greige-sc)}
.door img{object-position:50% 4%}
.book{background:var(--latte);color:var(--ink);padding:clamp(28px,3.4vw,44px);border-radius:40px 0 40px 40px}
.book h3{font-size:clamp(28px,2.6vw,36px);font-weight:400}
.book-sub{color:var(--muto);font-size:16px;margin:10px 0 26px}
.field{margin-bottom:20px}
.field label{display:block;font-size:15px;font-weight:500;margin-bottom:8px}
.field input,.field select,.field textarea{width:100%;min-height:50px;padding:12px 16px;border:1.5px solid var(--linea);border-radius:14px;background:#fff;font-family:inherit;font-size:17px;color:var(--ink);transition:border-color .2s}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--ink);box-shadow:0 0 0 3px rgba(232,81,43,.35)}
.field textarea{resize:vertical;min-height:90px}
.book .pill{width:100%}

footer{background:var(--ink);color:#b3aaa1;padding:28px 5vw;display:flex;align-items:center;justify-content:space-between;gap:20px;border-top:1px solid rgba(255,255,255,.14);font-size:15px}
footer .brand{color:#fff;font-size:18px}
footer .brand-logo{width:22px;height:28px}
footer .link{color:#fff}

.mobile-bar{position:fixed;bottom:0;left:0;right:0;z-index:40;display:none;gap:10px;padding:10px 16px calc(10px + env(safe-area-inset-bottom));background:var(--latte);border-top:1px solid var(--linea)}
.mobile-bar .pill{flex:1}

@media(max-width:1000px){
  .main-nav{gap:22px}
  .header-cta{display:none}
  .hero-top{grid-template-columns:1fr}
  .stage{max-width:200px;justify-self:start;order:-1;margin-bottom:10px}
  .pause,.section-head,.about,.contact{grid-template-columns:1fr}
  .treatments a{grid-template-columns:1fr 1.4fr 36px;grid-template-areas:"h p d" "t p d"}
  .treatments h3{grid-area:h}.treatments p{grid-area:p}.treatments .tech{grid-area:t}.treatments .row-drop{grid-area:d}
  .hero-photo{aspect-ratio:1.6/1}
}
@media(max-width:700px){
  body{font-size:17px}
  .site-header{height:68px;gap:12px}
  .menu-toggle{display:block}
  .main-nav{display:none;position:absolute;left:0;right:0;top:68px;background:var(--latte);flex-direction:column;gap:0;padding:8px 5vw 20px;border-bottom:1px solid var(--linea)}
  .main-nav.open{display:flex}
  .main-nav a{padding:16px 0;font-size:19px;border-bottom:1px solid var(--linea)}
  html{scroll-padding-top:72px}
  .stage{max-width:150px}
  .hero-actions .pill{width:100%}
  .hero-photo{aspect-ratio:4/3;border-radius:28px 0 28px 28px}
  .hero-photo img{object-position:62% 50%}
  .rating{left:10px;bottom:10px;font-size:13px;padding:8px 14px;gap:8px}
  .stars svg{width:14px;height:14px}
  .treatments a{grid-template-columns:1fr 28px;grid-template-areas:"h d" "p p" "t t";gap:8px 16px;padding:24px 0}
  .treatments a:hover{padding-left:0;padding-right:0}
  .about-photo,.m1,.m2,.door,.book{border-radius:28px 0 28px 28px}
  .mosaic{grid-template-columns:1fr}
  .m2{aspect-ratio:1.4/1;min-height:0}
  .m2 img{object-position:50% 60%}
  .mobile-bar{display:flex}
  footer{flex-direction:column;text-align:center;padding-bottom:100px}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*:before{animation:none!important;transition:none!important}
  .ring{display:none}
}