/* Vital Hair Therapy — website styles */
:root{--bg:#F7F0EB;--surface:#FFFBF8;--nude:#EEE0D7;--nude2:#E2CCBF;--rose:#8C5646;--ink:#34231F;--muted:#6E5750;--line:#E6D5CB;--btn:#34231F;--btnInk:#FBF5F1;--onInk:#E6C4B4;--onInkMuted:#CDB8AE;--skin1:#E4B39E;--skin2:#F0D2C2;--fat:#F1DFA9;--hair:#3A2722;--bulb:#B88570;--serif:'Cormorant Garamond',Georgia,serif;--sans:'Hanken Grotesk',system-ui,sans-serif}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased}
a{color:var(--rose)}a:hover{color:var(--ink)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 30px;border-radius:999px;background:var(--btn);color:var(--btnInk);text-decoration:none;font-family:var(--sans);font-size:15px;font-weight:500;letter-spacing:.02em;border:1px solid var(--btn);cursor:pointer;transition:transform .2s,opacity .2s;box-sizing:border-box}
.btn:hover{opacity:.9;color:var(--btnInk);transform:translateY(-1px)}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--nude2)}
.btn.ghost:hover{color:var(--ink);border-color:var(--ink)}
.btn.rose{background:var(--rose);border-color:var(--rose);color:#FFF8F4}
.btn[disabled]{opacity:.3;cursor:not-allowed;transform:none}
.nav a{color:var(--ink);text-decoration:none;font-size:14px;font-weight:500}
.nav a:hover{color:var(--rose)}
.photo{display:flex;align-items:flex-end;padding:20px;box-sizing:border-box;background:var(--nude);color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.16em;text-transform:uppercase;box-shadow:inset 0 0 0 1px var(--line)}
.seg{flex:1;height:3px;border-radius:3px;background:var(--line)}
.seg.on{background:var(--rose)}
.opt{display:flex;align-items:center;gap:16px;width:100%;text-align:left;padding:16px 18px;border-radius:18px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-family:var(--sans);cursor:pointer;min-height:72px;box-sizing:border-box;transition:border-color .2s}
.opt:hover{border-color:var(--nude2)}
.opt.on{border-color:var(--rose);box-shadow:0 0 0 1px var(--rose),0 10px 30px rgba(140,86,70,.10)}
.dot{width:20px;height:20px;border-radius:50%;border:1.5px solid var(--nude2);flex:none;box-sizing:border-box}
.opt.on .dot{border:6px solid var(--rose)}
.cal{height:48px;border-radius:12px;border:0;background:transparent;color:var(--ink);font-family:var(--sans);font-size:15px;cursor:pointer}
.cal:hover{background:var(--nude)}
.cal.on{background:var(--rose);color:#FFF8F4}
.cal.off{color:#B9A39A;cursor:default;background:transparent}
.cal.blank{visibility:hidden}
.mbtn{width:44px;height:44px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);cursor:pointer;font-size:18px}
.mbtn[disabled]{opacity:.35;cursor:not-allowed}
.slot{min-height:46px;border-radius:12px;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-family:var(--sans);font-size:15px;cursor:pointer}
.slot:hover{border-color:var(--nude2)}
.slot.on{background:var(--rose);color:#FFF8F4;border-color:var(--rose)}
.field{display:flex;flex-direction:column;gap:8px;font-size:13px;font-weight:500;color:var(--muted)}
.field input,.field textarea,.field select{font-family:var(--sans);font-size:16px;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:14px 16px;min-height:50px;box-sizing:border-box;width:100%}
.field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--rose);outline-offset:1px}
.faq{width:100%;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:16px 0;background:transparent;border:0;color:var(--ink);font-family:var(--serif);font-size:23px;text-align:left;cursor:pointer;min-height:44px}
.faq:hover{color:var(--rose)}

html{scroll-behavior:smooth}
img{max-width:100%}
.faqd summary{list-style:none}
.faqd summary::-webkit-details-marker{display:none}
.faqd{border-bottom:1px solid var(--line)}
.faqd .ic{font-family:var(--sans);font-size:24px;font-weight:300;color:var(--rose)}
.faqd[open] .ic{transform:rotate(45deg)}
.faq{transition:color .2s}
@media (max-width:760px){header.nav nav{display:none}header.nav a[href^="tel"]{display:none}}