
:root{
  --ink:#49333f;
  --deep:#2f2229;
  --wine:#7b4559;
  --rose:#c996a8;
  --powder:#ead8df;
  --paper:#fffaf8;
  --soft:#f5e9ed;
  --line:rgba(73,51,63,.14);
  --muted:#786773;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:Arial,Helvetica,sans-serif;line-height:1.6}
a{color:inherit;text-decoration:none}
img{display:block;width:100%}
button,input,textarea,select{font:inherit}
.anchor-nav{
  position:fixed;left:50%;top:18px;transform:translateX(-50%);z-index:70;
  display:flex;gap:.35rem;padding:.4rem;background:#ffffffdd;backdrop-filter:blur(15px);
  border:1px solid var(--line);border-radius:999px;box-shadow:0 14px 38px rgba(73,51,63,.08)
}
.anchor-nav a{padding:.62rem .75rem;border-radius:999px;font-size:.66rem;font-weight:800}
.anchor-nav a.active,.anchor-nav a:hover{background:var(--deep);color:#fff}
.brand{position:fixed;left:20px;top:18px;z-index:72;font:700 1.15rem Georgia,serif}
.book-now{position:fixed;right:20px;top:18px;z-index:72;background:var(--wine);color:#fff;padding:.72rem .95rem;border-radius:999px;font-size:.7rem;font-weight:800}
.hero{
  min-height:100vh;display:grid;grid-template-columns:.9fr 1.1fr;
  background:linear-gradient(135deg,#f8ecef,#ead4db)
}
.hero-copy{padding:11vw 4vw 7vw 7vw;display:flex;flex-direction:column;justify-content:center}
.kicker{font-size:.66rem;letter-spacing:.2em;font-weight:800;color:#9b6b7c}
h1,h2,h3{font-family:Georgia,serif;letter-spacing:-.035em}
h1{font-size:clamp(4rem,7.5vw,7.6rem);line-height:.9;margin:.7rem 0 1.3rem}
.hero-copy p,.section p{color:var(--muted);max-width:620px}
.actions{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.7rem}
.btn{display:inline-flex;align-items:center;justify-content:center;padding:.9rem 1.1rem;border:1px solid var(--deep);border-radius:999px;font-weight:800;cursor:pointer}
.btn.primary{background:var(--deep);color:#fff}
.hero-art{padding:5vw;display:flex;align-items:center}
.hero-art img{border-radius:46px 46px 160px 46px;box-shadow:0 35px 80px rgba(73,51,63,.12)}
.split-strip{display:grid;grid-template-columns:1fr 1fr;border-bottom:1px solid var(--line)}
.split-strip article{padding:1.4rem 6vw}
.split-strip article:first-child{background:#f3e7eb}.split-strip article:last-child{background:#e4c8d2}
.split-strip b{display:block;font:700 1.6rem Georgia}.split-strip span{font-size:.72rem;color:var(--muted)}

.section{padding:7vw 6vw}.soft{background:var(--soft)}
.section-head{display:grid;grid-template-columns:.75fr 1.25fr;gap:4vw;align-items:end;margin-bottom:2.7rem}
.section-head h2{font-size:clamp(2.8rem,5vw,5.2rem);line-height:.95;margin:.4rem 0}
.compare-shell{max-width:980px;margin:auto}
.compare-frame{
  position:relative;aspect-ratio:3/2;border-radius:34px;overflow:hidden;
  border:1px solid var(--line);background:#ead8df
}
.compare-frame img{position:absolute;inset:0;height:100%;object-fit:cover}
.compare-after{clip-path:inset(0 50% 0 0)}
.compare-line{position:absolute;top:0;bottom:0;left:50%;width:3px;background:#fff;box-shadow:0 0 0 1px #0001}
.compare-line:after{content:"↔";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:52px;height:52px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--deep);font-weight:900}
.compare-range{width:100%;margin-top:1rem}
.compare-note{text-align:center;color:var(--muted);font-size:.78rem}

.style-lab{display:grid;grid-template-columns:.8fr 1.2fr;background:var(--deep);color:#fff}
.style-copy{padding:7vw 6vw}.style-copy .kicker{color:#e0b7c6}.style-copy p{color:#cabcc3}
.style-ui{margin:5vw;background:#fff;color:var(--ink);border-radius:30px;padding:2rem}
.option{margin-bottom:1.25rem}.option>span{display:block;font-size:.7rem;font-weight:800;letter-spacing:.12em;margin-bottom:.55rem}
.choice-row{display:flex;gap:.45rem;flex-wrap:wrap}
.choice-row button{border:1px solid var(--line);background:#fff;padding:.7rem .85rem;border-radius:999px;cursor:pointer}
.choice-row button.active{background:var(--rose);color:#fff;border-color:var(--rose)}
.style-result{border-top:1px solid var(--line);padding-top:1.1rem}
.style-result strong{display:block;font:700 2rem Georgia;color:#8a576a}
.style-result p{color:var(--muted)}

.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem}
.service-card{background:#fff;border:1px solid var(--line);border-radius:26px;padding:1.3rem}
.service-card h3{margin:.2rem 0}.service-card p{color:var(--muted)}.service-card strong{color:#8a576a}
.filters{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:1.6rem}
.filters button{border:1px solid var(--line);background:#fff;padding:.62rem .8rem;border-radius:999px;cursor:pointer}
.filters button.active{background:var(--deep);color:#fff}
.service-card.hidden{display:none}

.booking-layout{display:grid;grid-template-columns:.8fr 1.2fr;gap:5vw}
.slots{display:grid;grid-template-columns:repeat(3,1fr);gap:.55rem}
.slots button{padding:.9rem;border:1px solid var(--line);background:#fff;border-radius:16px;cursor:pointer}
.slots button.active{background:var(--powder)}
.booking-note{margin-top:1rem;padding:1rem;background:var(--powder);border-radius:18px}
.pagehero{padding:10vw 6vw 5vw;background:linear-gradient(135deg,#f4e8ec,#ead3db)}
.pagehero h1{font-size:clamp(3.5rem,7vw,7rem)}

.formlayout{display:grid;grid-template-columns:.8fr 1.2fr;gap:5vw;padding:6vw}
.form{display:grid;gap:1rem}.field label{display:block;font-size:.7rem;font-weight:800;letter-spacing:.12em;margin-bottom:.35rem}
.field input,.field textarea,.field select{width:100%;padding:.9rem;border:1px solid var(--line);background:#fff;border-radius:14px}
.status{min-height:1.3em;color:#8a576a;font-weight:800}
.footer{padding:3rem 6vw;border-top:1px solid var(--line);display:grid;grid-template-columns:1.2fr .8fr .8fr;gap:2rem}
.footer h4{font-size:.78rem;letter-spacing:.12em}.footer a,.footer p{display:block;color:var(--muted);font-size:.8rem;margin:.25rem 0}
@media(max-width:930px){
  .anchor-nav{top:auto;bottom:14px;width:calc(100% - 24px);overflow:auto;justify-content:flex-start}
  .brand{top:14px}.book-now{top:14px}body{padding-bottom:82px}
  .hero,.style-lab,.booking-layout,.formlayout{grid-template-columns:1fr}
  .hero-copy{padding:18vw 5vw 5vw}.hero-art{padding:0 5vw 10vw}
  .section-head{grid-template-columns:1fr}.service-grid{grid-template-columns:1fr 1fr}
  .style-copy{padding-bottom:2vw}.style-ui{margin-top:0}
}
@media(max-width:620px){
  .brand{font-size:1rem}.book-now{font-size:.64rem}
  .hero-copy{padding:28vw 20px 5vw}.hero-art{padding:0 20px 12vw}
  h1{font-size:clamp(3.2rem,17vw,5rem)}
  .section,.pagehero,.formlayout{padding-left:20px;padding-right:20px}
  .split-strip,.service-grid{grid-template-columns:1fr}
  .style-copy{padding:14vw 20px 4vw}.style-ui{margin:0 20px 14vw}
  .slots{grid-template-columns:1fr 1fr}
  .footer{grid-template-columns:1fr;padding-left:20px;padding-right:20px}
}
