/* ══════════════════════════════════════════════════════════
   The Passion Hair — shared service detail-page styles
   Category theme comes from :root { --cat, --cat-d, --cat-l, --cat-bg }
   set inline on each page.
   ══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing:border-box; margin:0; padding:0; }
html { scroll-behavior:smooth; }
body { font-family:'Inter',sans-serif; font-weight:300; background:var(--bg); color:var(--fg); overflow-x:hidden; -webkit-font-smoothing:antialiased; }
a { color:inherit; text-decoration:none; }
img { display:block; max-width:100%; }
button { cursor:pointer; border:none; background:none; font:inherit; }

:root {
  --bg:#FAF9F6; --bg2:#F3EFE7; --bg3:#EDE6DA; --fg:#28221C; --fg2:#47392E; --muted:#887568; --dim:#B4A696;
  --accent:#C2A47A; --accent-d:#9E7F50; --led:#D4981A; --led-l:#F0C050;
  --border:rgba(40,34,28,0.09); --border-s:rgba(40,34,28,0.16); --panel:rgba(40,34,28,0.038);
  --shadow:0 22px 56px rgba(40,34,28,0.13); --shadow-sm:0 6px 20px rgba(40,34,28,0.08); --r:14px; --r-sm:8px;
  /* fallbacks; pages override */
  --cat:#C2A47A; --cat-d:#9E7F50; --cat-l:#EFE0CC; --cat-bg:#F6EEE2;
}
body::after { content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background: radial-gradient(ellipse 160% 90% at 10% 5%, rgba(212,152,26,0.03) 0%, transparent 55%),
              radial-gradient(ellipse 120% 70% at 90% 95%, rgba(194,164,122,0.05) 0%, transparent 50%),
              radial-gradient(ellipse 80% 110% at 55% 45%, rgba(220,208,190,0.04) 0%, transparent 60%); }

@keyframes ledPulse { 0%,100%{opacity:.55} 50%{opacity:1} }
[data-reveal] { opacity:0; transform:translateY(20px); transition:opacity .7s ease, transform .7s ease; }
[data-reveal].visible { opacity:1; transform:none; }

.shell { max-width:1180px; margin:0 auto; padding:0 2rem; }
.eyebrow { display:inline-block; font-size:.62rem; font-weight:700; letter-spacing:.24em; text-transform:uppercase; color:var(--cat-d); margin-bottom:.6rem; }
.led-bar { position:relative; z-index:1; height:2px; background:linear-gradient(90deg,transparent,var(--led-l) 25%,var(--led) 50%,var(--led-l) 75%,transparent); animation:ledPulse 3.5s ease-in-out infinite; }

/* NAV */
#nav { position:fixed; top:0; left:0; right:0; z-index:200; transition:background .35s, box-shadow .35s; }
#nav.pinned { background:rgba(250,249,246,.93); backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px); box-shadow:0 1px 0 var(--border); }
.nav-inner { max-width:1180px; margin:0 auto; padding:0 2rem; height:64px; display:flex; align-items:center; justify-content:space-between; }
.nav-logo { font-family:'Cormorant Garamond',serif; font-size:1.4rem; font-weight:500; letter-spacing:.02em; color:var(--fg); }
.nav-logo em { font-style:italic; color:var(--accent-d); }
.nav-links { display:flex; gap:2rem; list-style:none; font-size:.74rem; letter-spacing:.08em; text-transform:uppercase; }
@media (max-width:720px){ .nav-links{ display:none; } }
.nav-links a { color:var(--fg2); transition:color .2s; }
.nav-links a:hover, .nav-links a.active { color:var(--accent-d); }
.nav-book { padding:.48rem 1.35rem; font-size:.7rem; font-weight:600; letter-spacing:.14em; text-transform:uppercase; background:var(--fg); color:var(--bg); border-radius:2px; transition:background .2s; }
.nav-book:hover { background:var(--accent-d); }

/* HERO — blurred about-top + ecru + category wash */
.svc-hero { position:relative; overflow:hidden; padding:8.5rem 0 3.5rem; }
.svc-hero-bg { position:absolute; inset:-40px; background:url('/about-top.jpg') center center / cover no-repeat var(--bg3); filter:blur(11px) saturate(.9); transform:scale(1.1); }
.svc-hero-wash { position:absolute; inset:0; background:linear-gradient(180deg, rgba(243,239,231,.66) 0%, rgba(237,230,218,.85) 100%); }
.svc-hero-catwash { position:absolute; inset:0; background:var(--cat); opacity:.13; mix-blend-mode:multiply; }
.svc-hero-inner { position:relative; z-index:2; }
.crumb { font-size:.7rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:1.4rem; display:flex; align-items:center; gap:.45rem; }
.crumb a { color:var(--muted); transition:color .2s; }
.crumb a:hover { color:var(--cat-d); }
.crumb .material-symbols-outlined { font-size:15px; color:var(--dim); }
.crumb .here { color:var(--fg2); }
.hero-row { display:flex; align-items:center; gap:1.5rem; }
.hero-ic { width:78px; height:78px; border-radius:20px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--bg); border:1px solid var(--cat-l); color:var(--cat-d); box-shadow:var(--shadow-sm); }
.hero-ic .material-symbols-outlined { font-size:40px; }
.hero-ic svg { width:38px; height:38px; }
.hero-big { font-family:'Cormorant Garamond',serif; font-weight:400; font-size:clamp(2.4rem,5.2vw,4rem); line-height:1.04; letter-spacing:-.015em; }
.hero-big em { font-style:italic; color:var(--cat-d); }
.hero-sub { margin-top:1.1rem; font-size:.95rem; color:var(--fg2); line-height:1.85; max-width:660px; }

/* AT-A-GLANCE STRIP */
.glance { display:flex; flex-wrap:wrap; gap:1rem; margin-top:2rem; }
.glance-item { flex:1; min-width:130px; background:rgba(250,249,246,.7); backdrop-filter:blur(6px); border:1px solid var(--border-s); border-radius:var(--r-sm); padding:1rem 1.2rem; }
.g-num { font-family:'Cormorant Garamond',serif; font-size:1.9rem; font-weight:600; color:var(--cat-d); line-height:1; }
.g-lbl { font-size:.68rem; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-top:.4rem; }

/* STICKY CHIP NAV */
.chipbar { position:sticky; top:64px; z-index:100; background:rgba(250,249,246,.94); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border-bottom:1px solid var(--border); padding:.75rem 0; }
.chipbar-inner { display:flex; gap:.55rem; overflow-x:auto; max-width:1180px; margin:0 auto; padding:0 2rem; scrollbar-width:none; -ms-overflow-style:none; }
.chipbar-inner::-webkit-scrollbar { display:none; }
.chip { flex-shrink:0; display:inline-flex; align-items:center; gap:.42rem; font-size:.72rem; letter-spacing:.03em; color:var(--fg2); background:var(--bg2); border:1px solid var(--border); border-radius:22px; padding:.44rem .95rem; transition:background .25s, color .25s, border-color .25s; white-space:nowrap; cursor:pointer; }
.chip .material-symbols-outlined { font-size:16px; color:var(--cat); transition:color .25s; }
.chip svg { width:15px; height:15px; color:var(--cat); transition:color .25s; }
.chip:hover, .chip.active { background:var(--cat); color:#fff; border-color:transparent; }
.chip:hover .material-symbols-outlined, .chip.active .material-symbols-outlined,
.chip:hover svg, .chip.active svg { color:#fff; }

/* SUBCATEGORY BLOCKS */
main { position:relative; z-index:1; }
.subcat { padding:3.4rem 0; border-bottom:1px solid var(--border); scroll-margin-top:120px; background:var(--cat-bg); }
.subcat:last-of-type { border-bottom:none; }
.subcat-head { display:flex; align-items:center; gap:1rem; margin-bottom:1.1rem; }
.subcat-icon { width:54px; height:54px; border-radius:15px; flex-shrink:0; display:flex; align-items:center; justify-content:center; background:var(--cat-l); color:var(--cat-d); }
.subcat-icon .material-symbols-outlined { font-size:27px; }
.subcat-icon svg { width:26px; height:26px; }
.subcat-titles { flex:1; }
.subcat-name { font-family:'Cormorant Garamond',serif; font-size:1.85rem; font-weight:500; line-height:1.1; }
.subcat-count { font-size:.72rem; color:var(--cat-d); white-space:nowrap; font-weight:500; }
.subcat-blurb { font-size:.92rem; color:var(--fg2); line-height:1.9; max-width:720px; margin-bottom:1.9rem; }

.svc-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(285px,1fr)); gap:1rem; }
.svc-card { position:relative; overflow:hidden; display:flex; flex-direction:column; background:var(--bg); border:1px solid var(--cat-l); border-radius:var(--r); padding:1.2rem 1.25rem 1.2rem 1.45rem; transition:transform .28s ease, box-shadow .28s ease, border-color .28s ease; }
.svc-card::before { content:''; position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--cat); opacity:.85; }
.svc-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-sm); border-color:var(--cat); }
.svc-card-top { display:flex; align-items:flex-start; gap:.6rem; margin-bottom:.5rem; }
.svc-dot { width:8px; height:8px; border-radius:50%; background:var(--cat); margin-top:.42rem; flex-shrink:0; }
.svc-card-name { font-size:.9rem; font-weight:600; color:var(--fg); line-height:1.38; }
.svc-card-note { font-size:.77rem; color:var(--muted); line-height:1.62; margin:0 0 1rem 1.4rem; }
.svc-card-note:empty { display:none; }
.svc-card-foot { margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:.6rem; padding-top:.7rem; }
.svc-card-price { font-family:'Cormorant Garamond',serif; font-size:1.25rem; font-weight:600; color:var(--cat-d); white-space:nowrap; }
.svc-card-price small { font-family:'Inter',sans-serif; font-size:.62rem; font-weight:500; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); display:block; margin-bottom:-.1rem; }
.svc-card-btn { display:inline-flex; align-items:center; gap:.35rem; font-size:.67rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--fg); background:var(--bg2); border:1px solid var(--border-s); border-radius:20px; padding:.44rem .9rem; transition:background .2s, color .2s, border-color .2s; }
.svc-card-btn:hover { background:var(--cat); color:#fff; border-color:transparent; }
.svc-card-btn .material-symbols-outlined { font-size:15px; }

/* NOTE BAND (aesthetics disclaimer etc) */
.noteband { background:var(--cat-bg); border:1px solid var(--cat-l); border-radius:var(--r); padding:1.4rem 1.6rem; margin:2.4rem 0 0; display:flex; gap:1rem; align-items:flex-start; }
.noteband .material-symbols-outlined { color:var(--cat-d); font-size:24px; flex-shrink:0; }
.noteband p { font-size:.82rem; color:var(--fg2); line-height:1.75; }
.noteband strong { color:var(--fg); font-weight:600; }

/* CTA */
.cta { position:relative; z-index:1; background:var(--fg); color:var(--bg); text-align:center; padding:4.5rem 2rem; }
.cta h2 { font-family:'Cormorant Garamond',serif; font-weight:400; font-size:clamp(1.9rem,4vw,2.8rem); line-height:1.12; margin-bottom:.7rem; }
.cta h2 em { font-style:italic; color:var(--led-l); }
.cta p { font-size:.88rem; color:var(--bg3); max-width:480px; margin:0 auto 1.7rem; line-height:1.75; }
.cta-btn { display:inline-flex; align-items:center; gap:.5rem; padding:.85rem 2rem; background:var(--led); color:var(--fg); font-size:.76rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; border-radius:3px; transition:transform .2s, background .2s; }
.cta-btn:hover { transform:translateY(-2px); background:var(--led-l); }
.cta-links { margin-top:1.6rem; display:flex; gap:1.5rem; justify-content:center; flex-wrap:wrap; font-size:.72rem; letter-spacing:.08em; text-transform:uppercase; }
.cta-links a { color:var(--bg3); border-bottom:1px solid transparent; padding-bottom:2px; transition:border-color .2s, color .2s; }
.cta-links a:hover { color:var(--led-l); border-color:var(--led-l); }

footer { position:relative; z-index:1; background:#211C17; color:var(--bg3); text-align:center; font-size:.72rem; letter-spacing:.02em; padding:2.2rem 1.5rem; line-height:1.7; }

@media (max-width:600px){
  .hero-row { gap:1rem; }
  .hero-ic { width:62px; height:62px; border-radius:16px; }
  .hero-ic .material-symbols-outlined { font-size:32px; }
  .glance-item { min-width:calc(50% - .5rem); }
}

/* ══════════════════════════════════════════════════════════
   SERVICE MAP — concern → service constellation + co-booking
   ══════════════════════════════════════════════════════════ */
.smap-section { position:relative; z-index:1; background:var(--bg); padding:3.4rem 0 1.5rem; }
.smap-intro { text-align:center; max-width:700px; margin:0 auto 1.8rem; }
.smap-intro h2 { font-family:'Cormorant Garamond',serif; font-weight:400; font-size:clamp(1.7rem,3.6vw,2.5rem); line-height:1.12; margin-bottom:.6rem; }
.smap-intro h2 em { font-style:italic; color:var(--cat-d); }
.smap-intro p { font-size:.9rem; color:var(--fg2); line-height:1.8; }

.smap-concerns { display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center; margin-bottom:1.5rem; }
.smap-concern { display:inline-flex; align-items:center; gap:.45rem; font-size:.75rem; letter-spacing:.01em; color:var(--fg2); background:var(--bg); border:1px solid var(--border-s); border-radius:22px; padding:.5rem 1rem; cursor:pointer; transition:background .22s, color .22s, border-color .22s, transform .22s; }
.smap-concern .material-symbols-outlined { font-size:17px; color:var(--cat); transition:color .22s; }
.smap-concern:hover { border-color:var(--cat); transform:translateY(-1px); }
.smap-concern.active { background:var(--cat); color:#fff; border-color:transparent; }
.smap-concern.active .material-symbols-outlined { color:#fff; }

.smap-stage { position:relative; background:linear-gradient(180deg,var(--cat-bg),var(--bg)); border:1px solid var(--cat-l); border-radius:var(--r); padding:1.7rem 1.4rem 1.9rem; overflow:hidden; }
.smap-svg { position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:1; }
.smap-svg path { fill:none; stroke-linecap:round; opacity:0; transition:opacity .35s ease; }
.smap-svg path.show { opacity:.55; }
.smap-hub { position:relative; z-index:3; width:max-content; max-width:92%; margin:0 auto 1.5rem; text-align:center; background:var(--cat); color:#fff; border-radius:14px; padding:.7rem 1.3rem; box-shadow:0 8px 22px rgba(40,34,28,.18); }
.smap-hub .hub-label { font-family:'Cormorant Garamond',serif; font-size:1.2rem; font-weight:500; line-height:1.1; }
.smap-hub .hub-count { font-size:.66rem; opacity:.9; letter-spacing:.08em; text-transform:uppercase; margin-top:.2rem; }
.smap-nodes { position:relative; z-index:2; display:flex; flex-direction:column; gap:1.05rem; }
.smap-group-label { font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); margin-bottom:.5rem; text-align:center; }
.smap-pills { display:flex; flex-wrap:wrap; gap:.4rem; justify-content:center; }
.smap-node { font-size:.72rem; color:var(--fg2); background:var(--bg); border:1px solid var(--border-s); border-radius:16px; padding:.34rem .72rem; cursor:pointer; transition:background .22s, color .22s, border-color .22s, transform .22s, opacity .22s, box-shadow .22s; }
.smap-node[data-on="1"] { background:var(--nc); color:#fff; border-color:transparent; transform:translateY(-2px); box-shadow:0 6px 16px rgba(40,34,28,.16); }
.smap-stage.focused .smap-node:not([data-on="1"]) { opacity:.26; }
.smap-node.paired { box-shadow:0 0 0 2px var(--cat); }
.smap-legend { display:flex; flex-wrap:wrap; gap:.4rem 1.4rem; justify-content:center; margin-top:1.3rem; font-size:.72rem; color:var(--muted); }
.smap-legend span { display:inline-flex; align-items:center; gap:.4rem; }
.smap-legend i { width:16px; height:0; border-top:2px solid var(--cat); display:inline-block; }
.smap-legend i.dash { border-top-style:dashed; }
@media (max-width:600px){
  .smap-node { font-size:.68rem; padding:.3rem .6rem; }
  .smap-stage { padding:1.3rem 1rem 1.5rem; }
}

/* ══════════════════════════════════════════════════════════
   FAQ
   ══════════════════════════════════════════════════════════ */
.faq-section { position:relative; z-index:1; background:var(--bg2); padding:4.2rem 0; }
.faq-head { text-align:center; max-width:640px; margin:0 auto 2.2rem; }
.faq-head h2 { font-family:'Cormorant Garamond',serif; font-weight:400; font-size:clamp(1.9rem,4vw,2.8rem); line-height:1.12; margin-bottom:.6rem; }
.faq-head h2 em { font-style:italic; color:var(--cat-d); }
.faq-head p { font-size:.9rem; color:var(--fg2); line-height:1.8; }
.faq-list { max-width:830px; margin:0 auto; }
.faq-item { background:var(--bg); border:1px solid var(--border); border-radius:var(--r-sm); margin-bottom:.7rem; overflow:hidden; transition:border-color .25s, box-shadow .25s; }
.faq-item.open { border-color:var(--cat-l); box-shadow:var(--shadow-sm); }
.faq-q { width:100%; text-align:left; display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.05rem 1.3rem; font-size:.9rem; font-weight:500; color:var(--fg); cursor:pointer; line-height:1.4; }
.faq-q .material-symbols-outlined { color:var(--cat); transition:transform .28s ease; flex-shrink:0; font-size:22px; }
.faq-item.open .faq-q .material-symbols-outlined { transform:rotate(45deg); }
.faq-a { max-height:0; overflow:hidden; transition:max-height .32s ease; }
.faq-a-inner { padding:0 1.3rem 1.2rem; font-size:.85rem; color:var(--fg2); line-height:1.82; }
.faq-a-inner strong { color:var(--fg); font-weight:600; }