:root{
  --ink:#1c1420; --plum:#241832; --plum-2:#33223f;
  --cream:#f6efe3; --cream-dim:#e9dfc9;
  --brass:#c9a24b; --brass-bright:#e0bd6a;
  --rust:#c4592d; --lavender:#a99bc4;
  --line:rgba(246,239,227,0.14);
  --shadow:0 20px 50px rgba(0,0,0,0.35);
}
*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0; background:var(--cream); color:var(--ink); font-family:'Work Sans',sans-serif; -webkit-font-smoothing:antialiased;}
h1,h2,h3,.display{font-family:'Anton',sans-serif; font-weight:400; letter-spacing:.01em; text-transform:uppercase; line-height:.95;}
.mono{font-family:'IBM Plex Mono',monospace;}
a{color:inherit;}
button{font-family:inherit;}
.wrap{max-width:1120px; margin:0 auto; padding:0 28px;}
.eyebrow{font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--rust); display:flex; align-items:center; gap:10px;}
.eyebrow::before{content:""; width:16px; height:1px; background:var(--rust);}
.btn{display:inline-flex; align-items:center; gap:8px; padding:14px 26px; border-radius:2px; border:1px solid transparent; font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.06em; text-transform:uppercase; cursor:pointer; transition:transform .15s,box-shadow .15s,background .15s;}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--rust); color:var(--cream);}
.btn-primary:hover{background:#d6612f; box-shadow:0 8px 20px rgba(196,89,45,.35);}
.btn-outline{background:transparent; border-color:var(--plum); color:var(--plum);}
.btn-outline:hover{background:var(--plum); color:var(--cream);}
.btn-ghost{background:transparent; border-color:var(--line); color:var(--cream);}
.btn-ghost:hover{border-color:var(--brass); color:var(--brass-bright);}
.btn:disabled{opacity:.4; cursor:not-allowed;}
.btn-sm{padding:9px 16px; font-size:11.5px;}
.btn-danger{background:transparent; border-color:var(--rust); color:var(--rust);}
.btn-danger:hover{background:var(--rust); color:#fff;}

header{position:sticky; top:0; z-index:50; background:var(--plum); border-bottom:1px solid var(--line);}
nav.wrap{display:flex; align-items:center; justify-content:space-between; height:76px;}
.brand{display:flex; align-items:center; gap:12px; color:var(--cream); text-decoration:none;}
.brand .display{font-size:22px; color:var(--cream);}
.brand .display span{color:var(--brass-bright);}
.spiral{width:34px; height:34px; animation:spin 18s linear infinite; flex-shrink:0;}
@keyframes spin{to{transform:rotate(360deg);}}
.navlinks{display:flex; align-items:center; gap:6px;}
.navlink{padding:10px 16px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:.05em; text-transform:uppercase; color:var(--lavender); text-decoration:none; border-radius:2px; cursor:pointer; background:none; border:none;}
.navlink:hover{color:var(--cream);}
.navlink.active{color:var(--brass-bright); background:rgba(201,162,75,.1);}
.navstatus{font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--lavender); padding-left:14px; margin-left:8px; border-left:1px solid var(--line); white-space:nowrap;}
.nav-hamburger{display:none; background:none; border:none; color:var(--cream); font-size:26px; line-height:1; cursor:pointer; padding:4px 8px;}

.page{display:none;} .page.active{display:block;}

.hero{background:radial-gradient(ellipse at 78% 20%, rgba(201,162,75,.16), transparent 55%), var(--plum); color:var(--cream); padding:96px 0 110px; position:relative; overflow:hidden; border-bottom:1px solid var(--line);}
.hero-grid{display:grid; grid-template-columns:1.15fr .85fr; gap:56px; align-items:center;}
.hero h1{font-size:clamp(40px,6vw,74px); color:var(--cream); margin:18px 0 22px;}
.hero h1 em{font-style:normal; color:var(--brass-bright);}
.hero p.lead{font-size:18px; line-height:1.6; color:var(--lavender); max-width:46ch; margin:0 0 34px;}
.hero-ctas{display:flex; gap:14px; flex-wrap:wrap;}
.hero-spiral-wrap{position:relative; display:flex; align-items:center; justify-content:center;}
.hero-spiral{width:100%; max-width:380px; animation:spin 40s linear infinite;}
.hero-stats{display:flex; gap:34px; margin-top:44px; padding-top:26px; border-top:1px solid var(--line);}
.stat .num{font-family:'Anton',sans-serif; font-size:30px; color:var(--brass-bright); display:block;}
.stat .lbl{font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--lavender);}

.promo-banner{background:var(--brass); color:var(--plum); font-family:'IBM Plex Mono',monospace; font-size:13px; text-align:center; padding:10px 20px; letter-spacing:.02em;}

section{padding:88px 0;}
.section-head{display:flex; justify-content:space-between; align-items:flex-end; gap:24px; margin-bottom:48px; flex-wrap:wrap;}
.section-head h2{font-size:clamp(28px,4vw,42px); color:var(--plum); margin:12px 0 0;}
.section-head p{color:#5c5266; max-width:46ch; margin:12px 0 0; line-height:1.6;}

.services-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1px; background:#ddd0b3; border:1px solid #ddd0b3;}
.service-card{background:var(--cream); padding:32px 28px; position:relative; transition:background .2s;}
.service-card:hover{background:var(--cream-dim);}
.service-card .idx{font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--rust);}
.service-card h3{font-size:22px; color:var(--plum); margin:14px 0 10px;}
.service-card p{color:#5c5266; font-size:14.5px; line-height:1.6; margin:0 0 16px;}
.service-card .price{font-family:'IBM Plex Mono',monospace; font-size:13px; color:var(--rust);}

.how{background:var(--plum-2); color:var(--cream);}
.how .section-head h2{color:var(--cream);} .how .section-head p{color:var(--lavender);}
.steps{display:grid; grid-template-columns:repeat(4,1fr); gap:28px;}
.step{border-top:2px solid var(--brass); padding-top:18px;}
.step .num{font-family:'Anton',sans-serif; font-size:36px; color:var(--brass-bright); display:block; margin-bottom:8px;}
.step h4{font-family:'IBM Plex Mono',monospace; text-transform:uppercase; font-size:13px; letter-spacing:.05em; margin:0 0 8px; color:var(--cream);}
.step p{color:var(--lavender); font-size:14px; line-height:1.6; margin:0;}

footer{background:var(--ink); color:var(--lavender); padding:44px 0; font-family:'IBM Plex Mono',monospace; font-size:12px;}
footer .wrap{display:flex; justify-content:space-between; flex-wrap:wrap; gap:14px; align-items:center;}

.panel{background:#fff; border:1px solid #e4d9c2; border-radius:4px; padding:36px; box-shadow:var(--shadow);}
.form-grid{display:grid; grid-template-columns:1fr 1fr; gap:18px;}
.field{margin-bottom:18px; display:flex; flex-direction:column; gap:8px;}
.field.full{grid-column:1/-1;}
label{font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; letter-spacing:.06em; color:var(--plum);}
input,select,textarea{font-family:'Work Sans',sans-serif; font-size:15px; padding:12px 14px; border:1px solid #d8cbae; border-radius:2px; background:var(--cream); color:var(--ink); width:100%;}
input:focus,select:focus,textarea:focus{outline:2px solid var(--rust); outline-offset:1px; background:#fff;}
textarea{resize:vertical; min-height:80px;}
.hint{font-size:12px; color:#8a7f68;}
.error-text{font-size:12px; color:var(--rust); display:none;}
.field.invalid input,.field.invalid select,.field.invalid textarea{border-color:var(--rust);}
.field.invalid .error-text{display:block;}
.form-error{background:rgba(196,89,45,.08); border:1px solid var(--rust); color:var(--rust); padding:12px 14px; border-radius:2px; font-size:13.5px; margin-bottom:16px; display:none;}
.form-error.show{display:block;}

.two-col{display:grid; grid-template-columns:1.1fr .9fr; gap:36px; align-items:start;}
.slot-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:8px; margin-top:6px;}
.slot{padding:10px 6px; text-align:center; border:1px solid #d8cbae; border-radius:2px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; background:var(--cream); cursor:pointer;}
.slot:hover{border-color:var(--rust);}
.slot.selected{background:var(--rust); border-color:var(--rust); color:#fff;}
.slot.taken{opacity:.35; text-decoration:line-through; cursor:not-allowed;}

.badge{display:inline-block; font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; padding:4px 9px; border-radius:20px;}
.badge.upcoming,.badge.assigned{background:rgba(196,89,45,.12); color:var(--rust);}
.badge.pending{background:rgba(169,155,196,.2); color:var(--plum);}
.badge.completed{background:rgba(126,150,98,.18); color:#4c6b3a;}
.badge.cancelled{background:rgba(51,34,63,.1); color:var(--plum);}

.stars{color:var(--brass); font-size:16px; letter-spacing:2px;}
.stars.dim{color:#d8cbae;}
.star-input{display:flex; gap:6px; font-size:30px; cursor:pointer; margin-bottom:4px;}
.star-input .star{color:#d8cbae; transition:color .1s;}
.star-input .star.filled{color:var(--brass);}
.review-card{border:1px solid #e4d9c2; border-radius:2px; padding:20px 22px; background:#fff; margin-bottom:16px;}
.review-card .rhead{display:flex; justify-content:space-between; align-items:flex-start; gap:12px; flex-wrap:wrap;}
.review-card .rname{font-weight:700; font-size:15px; color:var(--plum);}
.review-card .rmeta{font-family:'IBM Plex Mono',monospace; font-size:11px; color:#8a7f68; margin-top:2px;}
.review-card .rtext{margin:12px 0 0; font-size:14px; line-height:1.65; color:#3f3648;}
.review-reply{margin-top:14px; padding:12px 14px; background:var(--cream-dim); border-left:3px solid var(--brass); font-size:13.5px; line-height:1.6;}
.review-reply .label{font-family:'IBM Plex Mono',monospace; font-size:10.5px; text-transform:uppercase; letter-spacing:.05em; color:var(--rust); margin-bottom:4px;}
.review-form-card{border:1px solid #e4d9c2; border-radius:2px; padding:20px 22px; background:var(--cream-dim); margin-bottom:16px;}
.review-form-card h4{margin:0 0 4px; font-size:15px; color:var(--plum);}
.review-form-card .meta{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:#8a7f68; margin-bottom:14px;}
.photo-preview-row{display:flex; gap:10px; flex-wrap:wrap;}
label.toggle-pill{display:flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:12.5px; font-weight:normal; text-transform:none; letter-spacing:0; color:var(--ink);}
.address-suggestions{position:absolute; top:100%; left:0; right:0; z-index:50; background:#fff; border:1px solid #d8cbae; border-top:none; max-height:220px; overflow-y:auto; display:none;}
.address-suggestions.show{display:block;}
.address-suggestions .suggestion{padding:10px 14px; font-size:13.5px; cursor:pointer; border-bottom:1px solid #eee0c4;}
.address-suggestions .suggestion:last-child{border-bottom:none;}
.address-suggestions .suggestion:hover{background:var(--cream-dim);}

#page-book .wrap{max-width:1320px;}
#page-book .two-col{gap:48px;}
#page-book .panel{padding:44px;}
.appt-card{border:1px solid #e4d9c2; border-left:4px solid var(--rust); border-radius:2px; padding:22px 26px; margin-bottom:14px; background:#fff; display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap;}
.appt-card h4{margin:0 0 6px; font-family:'Work Sans',sans-serif; font-weight:700; font-size:17px; color:var(--plum);}
.appt-card .meta{font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:#8a7f68;}
#page-book .wrap{max-width:1320px;}
#page-book .two-col{gap:48px;}
#page-book .panel{padding:44px;}
.appt-actions button{background:none; border:none; cursor:pointer; font-family:'IBM Plex Mono',monospace; font-size:11.5px; text-transform:uppercase; color:var(--rust); text-decoration:underline; padding:4px 0;}

.empty{text-align:center; padding:50px 20px; color:#8a7f68; border:1px dashed #d8cbae; border-radius:4px;}
.empty .display{color:var(--plum); font-size:24px; margin-bottom:8px;}

.profile-summary{display:flex; align-items:center; gap:16px; padding:22px; background:var(--plum); color:var(--cream); border-radius:4px; margin-bottom:26px;}
.avatar{width:52px; height:52px; border-radius:50%; background:var(--brass); color:var(--plum); display:flex; align-items:center; justify-content:center; font-family:'Anton',sans-serif; font-size:20px; flex-shrink:0;}
.profile-summary .name{font-family:'Anton',sans-serif; font-size:19px;}
.profile-summary .sub{font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--lavender); margin-top:3px;}

.toast{position:fixed; bottom:26px; left:50%; transform:translateX(-50%) translateY(20px); background:var(--plum); color:var(--cream); padding:14px 22px; border-radius:3px; font-family:'IBM Plex Mono',monospace; font-size:13px; border-left:3px solid var(--brass-bright); box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:opacity .25s,transform .25s; z-index:200; max-width:88vw;}
.toast.show{opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto;}
.toast.error{border-left-color:var(--rust);}

.gate{text-align:center; padding:70px 30px;}
.gate .display{font-size:30px; color:var(--plum); margin-bottom:10px;}
.gate p{color:#5c5266; max-width:44ch; margin:0 auto 26px; line-height:1.6;}

/* modal */
.modal-overlay{position:fixed; inset:0; background:rgba(28,20,32,.6); display:none; align-items:center; justify-content:center; z-index:150; padding:20px;}
.modal-overlay.show{display:flex;}
.modal{background:#fff; border-radius:4px; max-width:440px; width:100%; padding:34px; box-shadow:var(--shadow); position:relative; max-height:90vh; overflow-y:auto;}
.modal-close{position:absolute; top:16px; right:16px; background:none; border:none; font-size:22px; cursor:pointer; color:#8a7f68; line-height:1;}
.modal h2{font-size:26px; color:var(--plum); margin:0 0 6px;}
.modal .sub{color:#8a7f68; font-size:13.5px; margin-bottom:22px;}
.modal-switch{text-align:center; margin-top:16px; font-size:13.5px; color:#5c5266;}
.modal-switch button{background:none; border:none; color:var(--rust); text-decoration:underline; cursor:pointer; font-size:13.5px; padding:0;}

/* admin */
.admin-shell{display:grid; grid-template-columns:220px 1fr; min-height:calc(100vh - 76px);}
.admin-sidebar{background:var(--plum); color:var(--cream); padding:28px 0;}
.admin-nav{display:flex; flex-direction:column;}
.admin-nav button{text-align:left; background:none; border:none; color:var(--lavender); padding:13px 26px; font-family:'IBM Plex Mono',monospace; font-size:13px; letter-spacing:.04em; text-transform:uppercase; cursor:pointer;}
.admin-nav button:hover{color:var(--cream);}
.admin-nav button.active{color:var(--brass-bright); background:rgba(201,162,75,.1); border-left:3px solid var(--brass-bright);}
.admin-main{padding:40px 44px; background:var(--cream);}
.admin-view{display:none;} .admin-view.active{display:block;}
.admin-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:28px; flex-wrap:wrap; gap:14px;}
.admin-head h2{font-size:26px; color:var(--plum); margin:0;}
table{width:100%; border-collapse:collapse; background:#fff; border:1px solid #e4d9c2;}
th,td{text-align:left; padding:12px 16px; font-size:13.5px; border-bottom:1px solid #eee0c4;}
th{font-family:'IBM Plex Mono',monospace; font-size:11px; text-transform:uppercase; letter-spacing:.05em; color:var(--plum); background:var(--cream-dim);}
tr:last-child td{border-bottom:none;}
.inline-edit{display:flex; gap:8px; align-items:center;}
.inline-edit input{width:100px; padding:6px 8px; font-size:13px;}
.row-actions button{margin-right:6px;}
.settings-panel{max-width:520px;}
.toggle-pill{display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:12px;}

@media (max-width:860px){
  .hero-grid{grid-template-columns:1fr;} .hero-spiral-wrap{order:-1;} .hero-spiral{max-width:220px;}
  .services-grid{grid-template-columns:1fr;} .steps{grid-template-columns:repeat(2,1fr);}
  .form-grid{grid-template-columns:1fr;} .two-col{grid-template-columns:1fr;}
  .slot-grid{grid-template-columns:repeat(2,1fr);}
  .admin-shell{grid-template-columns:1fr;} .admin-sidebar{padding:12px 0;}
  .admin-nav{flex-direction:row; overflow-x:auto;}

  .nav-hamburger{display:block;}
  .navlinks{
    display:none; position:fixed; top:76px; left:0; right:0; z-index:100;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--plum); border-bottom:1px solid var(--line);
    padding:10px 20px 20px; max-height:calc(100vh - 76px); overflow-y:auto;
  }
  .navlinks.show{display:flex;}
  .navlinks .navlink{text-align:left; padding:14px 10px;}
  .navstatus{border-left:none; padding-left:0; margin-left:0; margin-top:10px; display:block;}

  #page-book .wrap{max-width:100%;}
  #page-book .panel{padding:26px 20px;}
  .modal{padding:26px 20px; max-width:94vw;}
  table{font-size:12.5px;}
  th, td{padding:10px 8px;}
  .table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch;}
  .appt-card{padding:18px 18px;}
  .row-actions button{margin-bottom:4px;}
}

@media (max-width:480px){
  .btn{padding:12px 18px; font-size:12.5px;}
  .hero h1{font-size:34px;}
  .panel{padding:24px 18px;}
}