/* Glam Hair Salon — chaptered, no imagery */
:root{
  --ink:#141414; --ink-2:#333; --mute:#7A7570; --hair:#D9D3CA; --hair-2:#EAE5DD; --bone:#F5F2ED; --white:#FFFFFF; --gold:#8C6B2F; --gold-2:#B8924A;
  --rail:88px; --g:28px; --maxw:1160px;
  --serif:'Newsreader',Georgia,'Times New Roman',serif;
  --grot:'Archivo','Helvetica Neue',Arial,sans-serif;
}
*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{ margin:0; font-family:var(--grot); font-size:16px; line-height:1.55; color:var(--ink); background:var(--bone); -webkit-font-smoothing:antialiased; }
a{ color:var(--ink); text-decoration:underline; text-underline-offset:3px; text-decoration-thickness:1px; }
a:hover{ color:var(--gold); }
svg{ width:1em; height:1em; flex-shrink:0; }
h1,h2,h3{ font-family:var(--serif); font-weight:400; margin:0 0 .45em; color:var(--ink); line-height:1; letter-spacing:-.01em; }
h1{ font-size:clamp(3rem,7.5vw,7rem); }
h2{ font-size:clamp(2.2rem,4.4vw,4rem); }
h3{ font-size:1.5rem; line-height:1.15; }
p{ margin:0 0 1em; }
.eyebrow{ font-size:.68rem; letter-spacing:.24em; text-transform:uppercase; color:var(--mute); margin-bottom:18px; display:flex; gap:14px; align-items:center; }
.eyebrow::before{ content:""; width:28px; height:1px; background:var(--ink); }
.lede{ font-size:1.12rem; max-width:52ch; color:var(--ink-2); }
.small{ font-size:.82rem; color:var(--mute); }
i.g{ font-style:italic; color:var(--gold); }

/* buttons: pill-free, underline system */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:12px; font-family:var(--grot); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; padding:16px 24px; background:var(--ink); color:var(--white); border:1px solid var(--ink); text-decoration:none !important; cursor:pointer; white-space:nowrap; }
.btn:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }
.btn-o{ background:transparent; color:var(--ink); } .btn-o:hover{ background:var(--ink); color:#fff; border-color:var(--ink); }
.btn-w{ background:var(--white); color:var(--ink); border-color:var(--white); } .btn-w:hover{ background:var(--gold); border-color:var(--gold); color:#fff; }
.btn-block{ width:100%; }
.actions{ display:flex; gap:12px; flex-wrap:wrap; }
.link{ font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; font-weight:600; text-decoration:none; border-bottom:1px solid var(--ink); padding-bottom:3px; }
.link:hover{ border-color:var(--gold); }

/* shell: fixed rail + top strip */
.rail{ position:fixed; left:0; top:0; bottom:0; width:var(--rail); border-right:1px solid var(--hair); background:var(--bone); z-index:90; display:flex; flex-direction:column; align-items:center; padding:22px 0; }
.rail .mono{ font-family:var(--serif); font-size:1.6rem; line-height:1; text-decoration:none; }
.rail ol{ list-style:none; margin:auto 0; padding:0; display:grid; gap:18px; }
.rail li a{ display:block; text-decoration:none; font-size:.66rem; letter-spacing:.14em; color:var(--mute); writing-mode:vertical-rl; transform:rotate(180deg); padding:6px 0; border-right:1px solid transparent; }
.rail li a.on{ color:var(--ink); border-right-color:var(--ink); }
.rail .ph{ writing-mode:vertical-rl; transform:rotate(180deg); font-size:.66rem; letter-spacing:.14em; text-decoration:none; color:var(--ink); }
.top{ position:fixed; top:0; left:var(--rail); right:0; height:64px; display:flex; align-items:center; justify-content:space-between; padding:0 var(--g); z-index:90; background:var(--bone); border-bottom:1px solid var(--hair); }
.top .name{ font-family:var(--serif); font-size:1.35rem; text-decoration:none; letter-spacing:-.01em; }
.top .name small{ font-family:var(--grot); font-size:.62rem; letter-spacing:.26em; text-transform:uppercase; color:var(--mute); margin-left:12px; }
.top nav{ display:flex; gap:24px; }
.top nav a{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; padding:4px 0; border-bottom:1px solid transparent; white-space:nowrap; }
.top nav a:hover,.top nav a.active{ border-bottom-color:var(--ink); color:var(--ink); }
.top .r{ display:flex; gap:14px; align-items:center; }
.top .btn{ padding:11px 16px; }
.burger{ display:none; width:40px; height:40px; border:1px solid var(--ink); background:transparent; cursor:pointer; place-items:center; }
.burger span,.burger span::before,.burger span::after{ content:""; display:block; width:18px; height:1.5px; background:var(--ink); position:relative; transition:.2s; }
.burger span::before{ position:absolute; top:-6px; } .burger span::after{ position:absolute; top:6px; }
.burger.open span{ background:transparent; } .burger.open span::before{ top:0; transform:rotate(45deg); } .burger.open span::after{ top:0; transform:rotate(-45deg); }
.drawer{ display:none; }
main{ margin-left:var(--rail); padding-top:64px; }

/* chapters */
.ch{ display:grid; grid-template-columns:minmax(0,1fr); padding:64px var(--g); border-bottom:1px solid var(--hair); position:relative; }
.ch .in{ max-width:var(--maxw); width:100%; margin:0 auto; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0 var(--g); align-content:center; }
.ch .in>*{ min-width:0; }
.ch .no{ grid-column:1/3; font-family:var(--serif); font-size:.95rem; color:var(--mute); padding-top:10px; }
.ch .no b{ display:block; font-size:3rem; font-weight:400; color:var(--ink); line-height:1; margin-bottom:6px; }
.ch .body{ grid-column:3/13; }
.ch-dark{ background:var(--ink); color:#CFC8BD; } .ch-dark h1,.ch-dark h2,.ch-dark h3,.ch-dark .no b{ color:var(--bone); } .ch-dark .eyebrow{ color:#9A9288; } .ch-dark .eyebrow::before{ background:var(--bone); } .ch-dark .lede{ color:#CFC8BD; } .ch-dark a{ color:var(--bone); } .ch-dark .link{ border-color:var(--bone); } .ch-dark .btn-o{ color:var(--bone); border-color:var(--bone); } .ch-dark .btn-o:hover{ background:var(--bone); color:var(--ink); }
.ch-white{ background:var(--white); }

/* hero chapter */
.hero{ min-height:calc(100vh - 64px); }
.hero .body{ grid-column:3/13; display:grid; grid-template-columns:7fr 4fr; gap:var(--g); align-items:end; }
.hero h1{ margin-bottom:26px; }
.stamp{ border:1px solid var(--ink); padding:22px; }
.ch-dark .stamp{ border-color:#5A544C; }
.stamp .pct{ font-family:var(--serif); font-size:clamp(4rem,9vw,7.5rem); line-height:.85; margin:0 0 8px; }
.stamp .pct sup{ font-size:.35em; vertical-align:top; margin-left:4px; }
.stamp p{ font-size:.9rem; margin:0 0 14px; }
.stamp .row{ display:flex; justify-content:space-between; gap:12px; font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); border-top:1px solid var(--hair); padding-top:12px; }
.ch-dark .stamp .row{ border-color:#5A544C; color:#9A9288; }

/* services list with filter (CSS :has) */
.tabs{ display:flex; gap:0; border-bottom:1px solid var(--ink); margin-bottom:6px; flex-wrap:wrap; }
.tabs label{ font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; padding:12px 18px 12px 0; cursor:pointer; color:var(--mute); margin-right:18px; border-bottom:2px solid transparent; margin-bottom:-1px; }
.svc-filter input{ position:absolute; opacity:0; pointer-events:none; }
.svc-filter:has(#f-all:checked) label[for=f-all],.svc-filter:has(#f-cut:checked) label[for=f-cut],.svc-filter:has(#f-color:checked) label[for=f-color],.svc-filter:has(#f-treat:checked) label[for=f-treat],.svc-filter:has(#f-style:checked) label[for=f-style]{ color:var(--ink); border-bottom-color:var(--ink); }
.svc-filter:has(#f-cut:checked) .row:not([data-cat=cut]),.svc-filter:has(#f-color:checked) .row:not([data-cat=color]),.svc-filter:has(#f-treat:checked) .row:not([data-cat=treat]),.svc-filter:has(#f-style:checked) .row:not([data-cat=style]){ display:none; }
.svc{ list-style:none; margin:0; padding:0; }
.svc .row{ display:grid; grid-template-columns:minmax(0,1fr) auto auto; gap:0 20px; align-items:baseline; padding:14px 0; border-bottom:1px solid var(--hair); }
.svc .row b{ font-family:var(--serif); font-weight:400; font-size:1.25rem; }
.svc .row b small{ font-family:var(--grot); font-size:.72rem; color:var(--mute); margin-left:10px; letter-spacing:.06em; }
.svc .row .t{ font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mute); }
.svc .row .p{ font-family:var(--serif); font-size:1.2rem; text-align:right; white-space:nowrap; }
.svc .row .p s{ color:var(--mute); font-size:.85rem; margin-right:8px; }
.svc .row .p em{ font-style:normal; display:block; font-family:var(--grot); font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); }
.svc .row p{ grid-column:1/-1; margin:4px 0 0; font-size:.86rem; color:var(--mute); }
.ch-dark .svc .row{ border-color:#3A3631; } .ch-dark .svc .row .p s,.ch-dark .svc .row .t,.ch-dark .svc .row b small{ color:#9A9288; } .ch-dark .svc .row .p em{ color:var(--gold-2); }

/* team */
.team{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:var(--g); }
.st{ border-top:1px solid var(--ink); padding-top:16px; }
.st .init{ font-family:var(--serif); font-size:3.2rem; line-height:1; margin-bottom:14px; }
.st b{ display:block; font-family:var(--serif); font-weight:400; font-size:1.3rem; }
.st .role{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); margin-bottom:10px; }
.st p{ font-size:.88rem; color:var(--ink-2); margin:0 0 10px; }
.st .tags{ font-size:.74rem; color:var(--mute); }
.ch-dark .st{ border-color:var(--bone); } .ch-dark .st p{ color:#CFC8BD; } .ch-dark .st .role,.ch-dark .st .tags{ color:#9A9288; }

/* booking wizard */
.wiz{ border:1px solid var(--ink); background:var(--white); }
.wiz .steps{ display:grid; grid-template-columns:repeat(4,1fr); border-bottom:1px solid var(--ink); }
.wiz .steps span{ padding:12px 16px; font-size:.66rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); border-right:1px solid var(--hair); }
.wiz .steps span:last-child{ border-right:0; }
.wiz .steps span.on{ color:var(--ink); background:var(--hair-2); }
.wiz .steps span.done{ color:var(--ink); }
.wiz .pane{ display:none; padding:26px; }
.wiz .pane.on{ display:block; }
.wiz h3{ margin-bottom:16px; }
.opts{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
.opts label{ display:flex; justify-content:space-between; gap:12px; align-items:baseline; border:1px solid var(--hair); padding:14px 16px; cursor:pointer; font-size:.95rem; }
.opts label:hover{ border-color:var(--ink); }
.opts label b{ font-family:var(--serif); font-weight:400; font-size:1.1rem; }
.opts label small{ font-size:.72rem; color:var(--mute); }
.opts label .p{ font-family:var(--serif); white-space:nowrap; }
.opts label .p s{ color:var(--mute); font-size:.8rem; margin-right:6px; }
.opts input{ position:absolute; opacity:0; pointer-events:none; }
.opts label.sel{ border-color:var(--ink); background:var(--bone); box-shadow:inset 0 0 0 1px var(--ink); }
.slots{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; }
.slots label{ text-align:center; justify-content:center; padding:11px 6px; font-size:.85rem; }
.days{ display:flex; gap:8px; flex-wrap:wrap; margin-bottom:14px; }
.days label{ border:1px solid var(--hair); padding:9px 12px; font-size:.78rem; letter-spacing:.06em; cursor:pointer; text-align:center; min-width:74px; }
.days label small{ display:block; font-size:.62rem; color:var(--mute); letter-spacing:.14em; text-transform:uppercase; }
.days label.sel{ border-color:var(--ink); background:var(--bone); box-shadow:inset 0 0 0 1px var(--ink); }
.wiz .nav{ display:flex; justify-content:space-between; gap:12px; margin-top:22px; border-top:1px solid var(--hair); padding-top:18px; }
.wiz .sum{ border-top:1px solid var(--ink); margin-top:8px; padding-top:14px; font-size:.92rem; }
.wiz .sum div{ display:flex; justify-content:space-between; gap:12px; padding:4px 0; }
.wiz .sum .tot{ font-family:var(--serif); font-size:1.4rem; border-top:1px solid var(--hair); margin-top:6px; padding-top:8px; }
.wiz .sum .d{ color:var(--gold); }
.f{ margin-bottom:14px; }
.f label{ display:block; font-size:.64rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); margin-bottom:6px; }
.f input,.f select,.f textarea{ width:100%; font:inherit; font-size:.95rem; padding:11px 12px; border:1px solid var(--hair); background:var(--white); color:var(--ink); border-radius:0; }
.f input:focus,.f select:focus,.f textarea:focus{ outline:none; border-color:var(--ink); }
.f textarea{ min-height:80px; resize:vertical; }
.frow{ display:grid; grid-template-columns:1fr 1fr; gap:0 14px; }
.fine{ font-size:.74rem; color:var(--mute); margin:10px 0 0; }
.success{ display:none; padding:30px; }

/* hours & map-less location */
.loc{ display:grid; grid-template-columns:1fr 1fr; gap:var(--g); }
.addr{ font-family:var(--serif); font-size:clamp(1.6rem,3vw,2.4rem); line-height:1.15; margin-bottom:12px; }
.hours{ list-style:none; padding:0; margin:0; }
.hours li{ display:flex; justify-content:space-between; gap:14px; padding:10px 0; border-bottom:1px solid var(--hair); font-size:.95rem; }
.hours li span:last-child{ font-family:var(--serif); text-align:right; }
.ch-dark .hours li{ border-color:#3A3631; }

/* reviews */
.rv{ columns:2; column-gap:var(--g); }
.rv figure{ break-inside:avoid; margin:0 0 26px; border-left:1px solid var(--ink); padding-left:18px; }
.rv blockquote{ margin:0 0 8px; font-family:var(--serif); font-size:1.3rem; line-height:1.3; }
.rv figcaption{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--mute); }
.ch-dark .rv figure{ border-color:var(--bone); } .ch-dark .rv figcaption{ color:#9A9288; }

/* faq */
.faq details{ border-bottom:1px solid var(--hair); }
.faq summary{ list-style:none; cursor:pointer; padding:16px 0; font-family:var(--serif); font-size:1.25rem; display:flex; justify-content:space-between; gap:16px; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--grot); color:var(--mute); }
.faq details[open] summary::after{ content:"\2013"; }
.faq details p{ margin:0 0 16px; font-size:.95rem; color:var(--ink-2); max-width:62ch; }
.ch-dark .faq details{ border-color:#3A3631; } .ch-dark .faq details p{ color:#CFC8BD; }

/* page head (inner pages) */
.phead{ padding:64px var(--g) 40px; border-bottom:1px solid var(--hair); }
.phead .in{ max-width:var(--maxw); margin:0 auto; }
.crumbs{ font-size:.66rem; letter-spacing:.2em; text-transform:uppercase; color:var(--mute); margin-bottom:18px; }
.sec{ padding:56px var(--g); border-bottom:1px solid var(--hair); }
.sec .in{ max-width:var(--maxw); margin:0 auto; display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:0 var(--g); }
.sec .in>*{ min-width:0; }
.legal{ grid-column:3/11; }
.legal h2{ font-size:1.5rem; margin-top:28px; }
.legal p,.legal li{ font-size:.95rem; overflow-wrap:anywhere; }

/* footer */
.foot{ margin-left:var(--rail); background:var(--ink); color:#9A9288; padding:52px var(--g) 24px; font-size:.86rem; }
.foot .in{ max-width:var(--maxw); margin:0 auto; }
.foot-grid{ display:grid; grid-template-columns:1.4fr 1fr 1fr 1.3fr; gap:var(--g); padding-bottom:32px; border-bottom:1px solid #3A3631; }
.foot h4{ font-family:var(--grot); font-size:.64rem; letter-spacing:.24em; text-transform:uppercase; color:#9A9288; margin:0 0 12px; }
.foot ul{ list-style:none; padding:0; margin:0; display:grid; gap:7px; }
.foot a{ color:#CFC8BD; text-decoration:none; } .foot a:hover{ color:var(--gold-2); }
.foot .name{ font-family:var(--serif); font-size:1.5rem; color:var(--bone); }
.foot p{ overflow-wrap:anywhere; }
.foot-bottom{ display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap; padding-top:18px; font-size:.74rem; }
.foot-bottom ul{ display:flex; gap:14px; flex-wrap:wrap; }
.mcta{ display:none; }

@media (min-width:1025px){ html{ scroll-snap-type:y proximity; } .ch{ scroll-snap-align:start; scroll-margin-top:64px; } }
@media (max-width:1200px){ .top nav{ gap:14px; } .top nav a{ letter-spacing:.14em; } .top .name small{ display:none; } }
@media (max-width:1024px){
  :root{ --rail:0px; }
  .rail{ display:none; }
  .top{ left:0; }
  .top nav{ display:none; } .burger{ display:grid; }
  .drawer{ display:block; position:fixed; top:64px; left:0; right:0; background:var(--bone); border-bottom:1px solid var(--ink); padding:6px var(--g) 22px; transform:translateY(-6px); opacity:0; pointer-events:none; transition:.18s; z-index:89; }
  .drawer.open{ transform:none; opacity:1; pointer-events:auto; }
  .drawer a{ display:block; padding:13px 0; border-bottom:1px solid var(--hair); font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; text-decoration:none; }
  .drawer a.btn{ margin-top:14px; border-bottom:0; }
  .ch{ min-height:0; padding:52px var(--g); }
  .ch .no{ grid-column:1/-1; display:flex; gap:12px; align-items:baseline; margin-bottom:18px; padding-top:0; } .ch .no b{ font-size:2rem; margin:0; }
  .ch .body,.hero .body{ grid-column:1/-1; }
  .hero .body{ grid-template-columns:1fr; }
  .team{ grid-template-columns:1fr 1fr; }
  .legal{ grid-column:1/-1; }
  .foot-grid{ grid-template-columns:1fr 1fr; }
}
@media (max-width:640px){
  .ch{ padding:44px 20px; } .phead,.sec{ padding-left:20px; padding-right:20px; } .foot{ padding-left:20px; padding-right:20px; }
  .top{ padding:0 20px; } .top .r .btn{ display:none; }
  .svc .row{ grid-template-columns:minmax(0,1fr) auto; } .svc .row .t{ display:none; }
  .tabs label{ margin-right:10px; padding-right:8px; }
  .team,.loc,.frow,.opts{ grid-template-columns:1fr; } .slots{ grid-template-columns:1fr 1fr 1fr; }
  .rv{ columns:1; }
  .wiz .steps{ grid-template-columns:1fr 1fr; } .wiz .steps span{ border-bottom:1px solid var(--hair); } .wiz .pane{ padding:18px; }
  .foot-grid{ grid-template-columns:1fr; }
  .actions .btn{ width:100%; }
  .mcta{ display:block; position:fixed; left:0; right:0; bottom:0; z-index:200; padding:10px 20px; background:var(--bone); border-top:1px solid var(--ink); }
  body{ padding-bottom:70px; } body.pg-book{ padding-bottom:0; } body.pg-book .mcta{ display:none; }
}