/* Shared styles for The Stylist Salon service pages.
   Matches the site's light "white and gold" system (see index.html tokens). */

:root{
  --espresso:#faf6ec;
  --espresso-2:#ffffff;
  --espresso-3:#f4ecdd;
  --cream:#2a221b;
  --cream-2:#fbf7f0;
  --gold:#c9a24a;
  --gold-lt:#a07d2a;
  --gold-grad:linear-gradient(110deg,#e6c887,#c9a24a 45%,#f0dcae 82%);
  --ink:#2a221b;
  --ink-mut:rgba(42,34,27,.6);
  --cream-mut:rgba(42,34,27,.6);
  --serif:"Bodoni Moda",Georgia,serif;
  --sans:"Jost",system-ui,sans-serif;
  --pad:clamp(1.25rem,5vw,6rem);
  --maxw:1180px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{font-family:var(--sans);background:var(--espresso);color:var(--cream);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.65}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
::selection{background:var(--gold);color:#1b1510}
body::after{content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;opacity:.05;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}

.eyebrow{font-family:var(--sans);font-weight:500;font-size:.72rem;letter-spacing:.42em;text-transform:uppercase;color:#a07d2a;display:inline-flex;align-items:center;gap:.8rem}
.eyebrow::before{content:"";width:34px;height:1px;background:var(--gold);opacity:.7}
h1,h2,h3{font-family:var(--serif);font-weight:500;line-height:1.05;letter-spacing:-.01em}
em,.it{font-style:italic}
.wrap{max-width:var(--maxw);margin:0 auto}

.btn{display:inline-flex;align-items:center;gap:.7rem;font-family:var(--sans);font-weight:500;font-size:.82rem;letter-spacing:.16em;text-transform:uppercase;padding:1.05rem 1.9rem;border-radius:999px;cursor:pointer;border:1px solid transparent;transition:.35s cubic-bezier(.2,.7,.3,1)}
.btn-gold{background:var(--gold-grad);color:#1b1510;box-shadow:0 14px 30px -12px rgba(201,162,74,.6)}
.btn-gold:hover{transform:translateY(-3px);box-shadow:0 22px 40px -14px rgba(201,162,74,.75)}
.btn-ghost{border-color:rgba(42,34,27,.32);color:var(--cream);background:none}
.btn-ghost:hover{border-color:#a07d2a;color:var(--gold-lt);transform:translateY(-3px)}
.btn .arr{transition:transform .35s}
.btn:hover .arr{transform:translate(4px,-2px)}

/* header */
header{position:fixed;top:0;left:0;width:100%;z-index:1000;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:1.4rem var(--pad);transition:.4s ease}
header.scrolled{background:rgba(250,246,236,.9);backdrop-filter:blur(14px);padding-top:.9rem;padding-bottom:.9rem;border-bottom:1px solid rgba(201,162,74,.22)}
.brand{font-family:var(--serif);font-size:1.15rem;letter-spacing:.02em;display:flex;align-items:center;gap:.6rem;white-space:nowrap}
.brand b{font-weight:500}
.brand .dot{color:#a07d2a}
.nav-right{display:flex;align-items:center;gap:1.1rem}
.nav-right .back{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--cream-mut);transition:.3s}
.nav-right .back:hover{color:var(--cream)}
.nav-book{padding:.7rem 1.4rem;font-size:.72rem}

/* hero */
.svc-hero{position:relative;padding:9rem var(--pad) 3.2rem;background:radial-gradient(70% 50% at 50% 10%,rgba(201,162,74,.14),transparent 62%),var(--espresso);text-align:center}
.svc-hero .wrap{max-width:60ch}
.svc-hero .eyebrow{justify-content:center}
.svc-hero h1{font-size:clamp(2.4rem,5.6vw,4.4rem);margin:.6rem 0 0}
.svc-hero h1 .shine{background:linear-gradient(110deg,#b8893a,#7e6320 45%,#b8923f 82%);-webkit-background-clip:text;background-clip:text;color:transparent}
.lede{margin-top:1.3rem;font-size:clamp(1rem,1.5vw,1.14rem);font-weight:300;color:var(--cream-mut)}
.hero-cta{margin-top:2.1rem;display:flex;flex-wrap:wrap;gap:.9rem;justify-content:center}

/* trust strip */
.trust{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem;margin-top:2rem}
.trust span{font-size:.75rem;letter-spacing:.06em;color:var(--gold-lt);border:1px solid rgba(201,162,74,.32);background:rgba(201,162,74,.07);border-radius:999px;padding:.5rem 1.05rem}

/* sections */
.sec{padding:clamp(2.6rem,5vw,4.2rem) var(--pad)}
.sec.light{background:var(--espresso-2)}
.sec h2{font-size:clamp(1.9rem,4vw,3rem)}
.sec .sub{margin-top:1.1rem;font-weight:300;color:var(--ink-mut);max-width:62ch}
.prose{max-width:66ch}
.prose p{margin-top:1.1rem;color:var(--ink-mut);font-weight:300}
.prose p strong{color:var(--ink);font-weight:500}

/* included grid */
.incl{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;margin-top:2rem}
.incl div{background:var(--cream-2);border:1px solid rgba(201,162,74,.22);border-radius:18px;padding:1.7rem 1.6rem}
.incl h3{font-size:1.3rem;margin-bottom:.5rem}
.incl p{font-size:.95rem;color:var(--ink-mut);font-weight:300}

/* steps */
.steps{counter-reset:s;margin-top:2rem;display:grid;gap:1rem}
.steps li{list-style:none;counter-increment:s;display:flex;gap:1.1rem;align-items:flex-start;background:var(--cream-2);border:1px solid rgba(42,34,27,.1);border-radius:16px;padding:1.4rem 1.5rem}
.steps li::before{content:"0" counter(s);font-family:var(--serif);font-style:italic;color:#a07d2a;font-size:1.15rem;flex:none}
.steps b{display:block;font-family:var(--serif);font-weight:500;font-size:1.2rem;margin-bottom:.2rem}
.steps p{font-size:.95rem;color:var(--ink-mut);font-weight:300}

/* before / after */
.ba-grid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-top:2rem}
.ba-grid figure{margin:0;border-radius:18px;overflow:hidden;border:1px solid rgba(42,34,27,.12);position:relative;aspect-ratio:4/5}
.ba-grid img{width:100%;height:100%;object-fit:cover}
.ba-grid figcaption{position:absolute;left:12px;top:12px;font-size:.6rem;letter-spacing:.2em;text-transform:uppercase;background:rgba(15,11,8,.7);color:#fff;padding:.32rem .62rem;border-radius:999px}

/* FAQ */
.faq{margin-top:2rem;max-width:74ch}
.faq details{border-bottom:1px solid rgba(42,34,27,.14);padding:1.15rem 0}
.faq summary{cursor:pointer;list-style:none;font-family:var(--serif);font-size:1.22rem;display:flex;justify-content:space-between;align-items:center;gap:1rem}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";color:#a07d2a;font-family:var(--sans);font-size:1.3rem;flex:none;transition:.3s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq p{margin-top:.8rem;color:var(--ink-mut);font-weight:300;max-width:66ch}

/* CTA band */
.cta-band{background:radial-gradient(80% 70% at 15% 0%,rgba(201,162,74,.14),transparent 55%),var(--espresso-3);text-align:center;padding:clamp(2.6rem,5vw,4rem) var(--pad)}
.cta-band h2{font-size:clamp(1.8rem,3.6vw,2.8rem)}
.cta-band .lede{margin-left:auto;margin-right:auto;max-width:52ch}
.cta-band .hero-cta{margin-top:1.8rem}
.callnote{margin-top:1.2rem;font-size:.88rem;color:var(--ink-mut)}
.callnote a{color:#8a6d28;border-bottom:1px solid rgba(138,109,40,.4)}

/* related posts */
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-top:2rem}
.related a{background:var(--cream-2);border:1px solid rgba(42,34,27,.1);border-radius:16px;padding:1.4rem 1.5rem;transition:.35s cubic-bezier(.2,.7,.3,1)}
.related a:hover{transform:translateY(-3px);border-color:rgba(201,162,74,.5)}
.related .k{font-size:.62rem;letter-spacing:.2em;text-transform:uppercase;color:#a07d2a}
.related b{display:block;font-family:var(--serif);font-weight:500;font-size:1.15rem;margin-top:.5rem;line-height:1.2}

/* other services */
.others{display:flex;flex-wrap:wrap;gap:.6rem;margin-top:1.6rem}
.others a{font-size:.78rem;letter-spacing:.04em;color:var(--gold-lt);border:1px solid rgba(201,162,74,.34);border-radius:999px;padding:.55rem 1.1rem;transition:.3s}
.others a:hover{background:rgba(201,162,74,.12);color:#8a6d28}

footer{background:var(--espresso-3);padding:clamp(2.4rem,5vw,3.4rem) var(--pad);border-top:1px solid rgba(201,162,74,.14);text-align:center;color:var(--cream-mut);font-size:.82rem;line-height:1.9}
footer a{color:var(--gold-lt)}
footer strong{font-family:var(--serif);color:var(--cream);font-weight:500}

@media(max-width:900px){
  .incl,.related{grid-template-columns:1fr}
}
@media(max-width:560px){
  .nav-right .back .back-x{display:none}
  .ba-grid{grid-template-columns:1fr}
}