/*
Theme Name: Signature Beauty Studio
Author: ARC Creative Co
Description: Custom block theme for Signature Beauty Studio. Generated by src/wp_export.py.
Version: 1.0.1790785473
Requires at least: 6.6
Text Domain: signature-beauty
*/
/* Signature Beauty Studio — site styles.
   Tokens mirror _Brand-Kits/Signature-Beauty-Studio/tokens.json. Edit here, then rebuild. */

@font-face{font-family:'Great Vibes';font-style:normal;font-weight:400;font-display:swap;src:url(assets/fonts/great-vibes-400.woff2) format('woff2')}
@font-face{font-family:'Lora';font-style:normal;font-weight:400 700;font-display:swap;src:url(assets/fonts/lora-variable.woff2) format('woff2')}
@font-face{font-family:'Lora';font-style:italic;font-weight:400 700;font-display:swap;src:url(assets/fonts/lora-italic-variable.woff2) format('woff2')}

:root{
  --ivory:#FAF6EF; --card:#FFFDF9; --linen:#E4DCCD; --sand:#F0E9DC;
  --ink:#111111; --body-ink:#2B2824; --meta:#5E574D;
  --gold:#9C7A3F; --gold-text:#8A6A32; --gold-on-dark:#C9A96E;
  --script:'Great Vibes','Snell Roundhand',cursive;
  --serif:'Lora',Georgia,'Times New Roman',serif;
  --wrap:1160px; --gutter:clamp(16px,4vw,40px);
  --sect:clamp(56px,8vw,104px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--ivory); color:var(--body-ink); font-family:var(--serif); font-size:17px; line-height:1.7}
img{max-width:100%; height:auto; display:block}
a{color:var(--gold-text); text-underline-offset:3px}
a:hover{color:var(--ink)}
:focus-visible{outline:2px solid var(--gold); outline-offset:3px}
.skip{position:absolute; left:-999px; top:8px; background:var(--ink); color:var(--ivory); padding:8px 14px; z-index:50}
.skip:focus{left:8px}

.wrap{max-width:var(--wrap); margin-inline:auto; padding-inline:var(--gutter)}
.narrow{max-width:760px}

/* ---------- type ---------- */
h1,h2{font-family:var(--script); font-weight:400; color:var(--gold); margin:0; text-wrap:balance}
h1{font-size:clamp(50px,7vw,78px); line-height:1.06}
h2{font-size:clamp(40px,5vw,54px); line-height:1.1}
h3{font-family:var(--serif); font-weight:500; font-size:clamp(20px,2.2vw,24px); line-height:1.3; color:var(--ink); margin:0}
h4{font-family:var(--serif); font-weight:600; font-size:17px; color:var(--ink); margin:0}
p{margin:0}
.prose{display:grid; gap:18px; max-width:66ch}
.prose ul,.prose ol{margin:0; padding-left:22px; display:grid; gap:8px}
.lede{font-size:clamp(17px,1.6vw,19px); color:var(--body-ink); max-width:58ch}
.small{font-size:14px; line-height:1.55; color:var(--meta)}
.eyebrow{font-weight:500; font-size:12px; letter-spacing:.22em; text-transform:uppercase; color:var(--gold-text); display:flex; align-items:center; gap:12px; margin:0}
.eyebrow::before{content:""; width:28px; height:1px; background:currentColor; flex:none}
.stack{display:grid; gap:18px; align-content:start}
.stack-lg{display:grid; gap:28px; align-content:start}

/* ---------- placeholders for facts the client still has to give us ---------- */
mark.todo{background:transparent; color:#8A4B34; border:1px dashed #C9A08A; border-radius:3px; padding:0 5px; font-style:normal; font-size:.92em; white-space:normal}

/* ---------- buttons, chips ---------- */
.actions{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.btn{display:inline-flex; align-items:center; justify-content:center; font-family:var(--serif); font-weight:500; font-size:13px; letter-spacing:.16em; text-transform:uppercase; padding:15px 26px; background:var(--ink); color:var(--ivory); border:1px solid var(--ink); text-decoration:none; line-height:1.2}
.btn:hover{background:#2a2622; color:var(--ivory)}
.btn.ghost{background:transparent; color:var(--ink); border-color:var(--linen)}
.btn.ghost:hover{border-color:var(--ink)}
.chips{display:flex; flex-wrap:wrap; gap:8px; margin:0; padding:0; list-style:none}
.chips li,.chips a{font-size:13px; padding:5px 14px; border-radius:999px; border:1px solid var(--linen); color:var(--meta); background:var(--card); text-decoration:none}
.chips a:hover{border-color:var(--gold); color:var(--ink)}

/* ---------- header ---------- */
.site-head{position:sticky; top:0; z-index:20; background:var(--ivory); border-bottom:1px solid var(--linen)}
.site-head .wrap{display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:76px}
.brand{display:block; line-height:0; text-decoration:none}
.brand img{height:56px; width:auto; max-width:100%}
@media (max-width:420px){ .brand img{height:46px} }
.brand .s{font-family:var(--script); color:var(--gold); font-size:34px}
.brand .t{font-weight:500; font-size:9.5px; letter-spacing:.5em; text-transform:uppercase; color:var(--ink); padding-left:3px}
.nav{display:flex; align-items:center; gap:clamp(14px,2vw,28px)}
.nav ul{display:flex; gap:clamp(14px,2vw,26px); list-style:none; margin:0; padding:0}
.nav a{font-weight:500; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); text-decoration:none; padding-block:6px; border-bottom:1px solid transparent}
.nav a:hover,.nav a[aria-current="page"]{border-bottom-color:var(--gold)}
.nav .btn{padding:12px 18px; font-size:12px; color:var(--ivory)}
.nav .btn:hover{border-bottom-color:var(--ink)}
.menu-btn{display:none; background:none; border:1px solid var(--linen); padding:10px 12px; font:inherit; font-size:12px; letter-spacing:.18em; text-transform:uppercase; color:var(--ink); cursor:pointer}
@media (max-width:980px){
  .menu-btn{display:inline-block}
  .nav{position:absolute; left:0; right:0; top:100%; background:var(--ivory); border-bottom:1px solid var(--linen); flex-direction:column; align-items:stretch; gap:0; padding:8px var(--gutter) 20px; display:none}
  .nav.open{display:flex}
  .nav ul{flex-direction:column; gap:0}
  .nav ul a{display:block; padding-block:14px; border-bottom:1px solid var(--linen)}
  .nav .btn{margin-top:16px}
}

/* ---------- sections ---------- */
.sect{padding-block:var(--sect)}
.sect.tight{padding-block:calc(var(--sect) * .6)}
.band{background:var(--card); border-block:1px solid var(--linen)}
.dark{background:var(--ink); color:#E4DDD1}
.dark h2,.dark h1{color:var(--gold-on-dark)}
.dark h3{color:#F3EDE2}
.dark .eyebrow{color:var(--gold-on-dark)}
.dark p{color:#CFC7BA}
.dark .btn{background:var(--gold-on-dark); border-color:var(--gold-on-dark); color:var(--ink)}
.dark .btn.ghost{background:transparent; color:#F3EDE2; border-color:#3a3530}
.sect-head{display:grid; gap:14px; margin-bottom:clamp(28px,4vw,48px); max-width:720px}
.sect-head.center{margin-inline:auto; text-align:center; justify-items:center}
.sect-head.center .eyebrow::after{content:""; width:28px; height:1px; background:currentColor}

/* ---------- hero ---------- */
.hero{padding-block:clamp(40px,6vw,88px) var(--sect)}
.hero .wrap{display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); gap:clamp(28px,5vw,72px); align-items:center}
.hero .copy{display:grid; gap:22px; align-content:start}
.hero.simple .wrap{grid-template-columns:minmax(0,1fr)}
.hero.simple .copy{max-width:780px}
@media (max-width:820px){ .hero .wrap{grid-template-columns:1fr} }
.crumbs{font-size:13px; color:var(--meta); display:flex; flex-wrap:wrap; gap:6px}
.crumbs a{color:var(--meta)}

/* image placeholder: the caption doubles as the MiniMax art brief */
.ph{position:relative; background:var(--sand); border:1px solid var(--linen); aspect-ratio:4/5; max-width:100%; display:grid; place-items:end start; padding:18px; overflow:hidden}
.ph.wide{aspect-ratio:16/10}
.ph.square{aspect-ratio:1/1}
.ph::before{content:""; position:absolute; inset:14px; border:1px solid rgba(156,122,63,.35)}
.ph span{position:relative; font-size:12px; line-height:1.45; color:var(--meta); font-style:italic; max-width:32ch}
.ph span b{display:block; font-style:normal; font-weight:500; font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-text); margin-bottom:4px}

.art{display:block; width:100%; height:auto; aspect-ratio:4/5; object-fit:cover; background:var(--sand)}
.art.square{aspect-ratio:1/1}

/* ---------- grids ---------- */
.grid-3{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(18px,2.4vw,28px)}
.grid-2{display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:clamp(22px,3vw,44px)}
.split{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:clamp(28px,5vw,72px); align-items:center}
.split.top{align-items:start}
@media (max-width:900px){ .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:760px){ .grid-3,.grid-2,.split{grid-template-columns:1fr} }

.svc{display:grid; gap:12px; align-content:start; padding-top:18px; border-top:1px solid var(--gold)}
.svc p{font-size:15.5px; line-height:1.6}
.svc .more{font-size:12px; font-weight:500; letter-spacing:.18em; text-transform:uppercase; text-decoration:none; color:var(--gold-text)}
.svc .more::after{content:" →"}

/* process — a real sequence, so numbered */
.steps{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(18px,2.4vw,28px); counter-reset:s}
.steps li{counter-increment:s; display:grid; gap:10px; align-content:start}
.steps li::before{content:counter(s); font-family:var(--script); font-size:44px; line-height:1; color:var(--gold)}
.steps p{font-size:15.5px; line-height:1.6}
@media (max-width:900px){ .steps{grid-template-columns:repeat(2,minmax(0,1fr))} }
@media (max-width:520px){ .steps{grid-template-columns:1fr} }

/* facts list (lasts / sessions / healing) */
.facts{display:grid; grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr)); border-top:1px solid var(--linen); margin:0}
.facts div{padding:18px 18px 18px 0; border-bottom:1px solid var(--linen)}
.facts dt{font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--meta); font-weight:500}
.facts dd{margin:4px 0 0; font-size:19px; color:var(--ink)}

/* healing timeline */
.timeline{list-style:none; margin:0; padding:0; border-left:1px solid var(--gold); display:grid; gap:22px}
.timeline li{padding-left:24px; position:relative; display:grid; gap:4px}
.timeline li::before{content:""; position:absolute; left:-5px; top:9px; width:9px; height:9px; border-radius:50%; background:var(--ivory); border:1px solid var(--gold)}
.timeline b{font-weight:500; color:var(--ink)}

/* comparison table */
.table-wrap{overflow-x:auto; border:1px solid var(--linen); background:var(--card)}
table{border-collapse:collapse; width:100%; min-width:620px; font-size:15px}
th,td{text-align:left; padding:14px 18px; border-bottom:1px solid var(--linen); vertical-align:top}
thead th{font-weight:500; font-size:12px; letter-spacing:.16em; text-transform:uppercase; color:var(--meta); background:var(--ivory)}
tbody th{font-weight:500; color:var(--ink)}
tbody tr:last-child th,tbody tr:last-child td{border-bottom:0}

/* FAQ */
.faq{display:grid; border-top:1px solid var(--linen)}
.faq details{border-bottom:1px solid var(--linen)}
.faq summary{cursor:pointer; list-style:none; display:flex; justify-content:space-between; gap:18px; padding:20px 0; font-weight:500; font-size:18px; color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+"; font-family:var(--serif); font-weight:400; font-size:24px; line-height:1; color:var(--gold)}
.faq details[open] summary::after{content:"–"}
.faq .a{padding:0 0 22px; max-width:66ch; display:grid; gap:12px}

/* quote */
.quote{border-left:1px solid var(--gold); padding-left:24px; display:grid; gap:10px; max-width:640px}
.quote p{font-style:italic; font-size:21px; line-height:1.55; color:var(--ink)}

/* list of links (locations, related) */
.linklist{list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(auto-fill,minmax(min(100%,210px),1fr)); gap:0 28px}
.linklist li{border-bottom:1px solid var(--linen)}
.linklist a{display:flex; justify-content:space-between; gap:12px; padding:13px 0; color:var(--ink); text-decoration:none}
.linklist a::after{content:"→"; color:var(--gold)}
.linklist a:hover{color:var(--gold-text)}
.region{display:grid; gap:14px; align-content:start}
.region + .region{margin-top:40px}
.also{font-size:14px; color:var(--meta)}

/* gallery */
.gallery{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
@media (max-width:760px){ .gallery{grid-template-columns:repeat(2,minmax(0,1fr))} }
.gallery figure{margin:0; display:grid; gap:8px}
.gallery figcaption{font-size:13.5px; line-height:1.5; color:var(--meta)}
.gallery figcaption b{font-weight:500; font-size:15px}
.gallery figcaption a{color:var(--ink)}
.gallery .ai{font-size:11.5px; letter-spacing:.04em; color:var(--meta); font-style:italic}

/* price rows */
.prices{display:grid; border-top:1px solid var(--linen)}
.prices div{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:6px 24px; padding:18px 0; border-bottom:1px solid var(--linen); align-items:baseline}
.prices .n{font-weight:500; color:var(--ink); font-size:18px}
.prices .p{font-size:18px; color:var(--ink); text-align:right}
.prices .d{grid-column:1 / -1; font-size:14.5px; color:var(--meta)}

/* booking panel */
.panel{background:var(--card); border:1px solid var(--linen); padding:clamp(22px,3.4vw,40px); display:grid; gap:18px; align-content:start}
.contact-list{list-style:none; margin:0; padding:0; display:grid; gap:14px}
.contact-list li{display:grid; gap:2px}
.contact-list span{font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--meta); font-weight:500}

/* CTA band */
.cta .wrap{display:grid; grid-template-columns:minmax(0,1.2fr) auto; gap:24px 48px; align-items:center}
@media (max-width:760px){ .cta .wrap{grid-template-columns:1fr} }

/* ---------- footer ---------- */
.site-foot{background:var(--ink); color:#CFC7BA; padding-block:64px 36px; font-size:15px}
.site-foot .cols{display:grid; grid-template-columns:minmax(0,1.3fr) repeat(3,minmax(0,1fr)); gap:32px}
@media (max-width:860px){ .site-foot .cols{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .site-foot .cols{grid-template-columns:1fr} }
.site-foot .brand img{width:180px; height:auto}
.site-foot .brand .t{color:#F3EDE2}
.site-foot h4{color:#F3EDE2; font-size:12px; letter-spacing:.2em; text-transform:uppercase; font-weight:500; margin-bottom:12px}
.site-foot ul{list-style:none; margin:0; padding:0; display:grid; gap:8px}
.site-foot a{color:#CFC7BA; text-decoration:none}
.site-foot a:hover{color:var(--gold-on-dark)}
.site-foot mark.todo{color:#E3B39D; border-color:#8A6552}
.site-foot .legal{margin-top:48px; padding-top:22px; border-top:1px solid #2a2724; display:flex; flex-wrap:wrap; justify-content:space-between; gap:12px; font-size:13px; color:#9C958A}

@media (prefers-reduced-motion:reduce){ *{scroll-behavior:auto!important; transition:none!important} }

/* ---------- WordPress adjustments ---------- */
.wp-site-blocks{padding:0}
.wp-site-blocks > *{margin-block-start:0}
header.wp-block-template-part{position:sticky; top:0; z-index:20}
body.admin-bar header.wp-block-template-part{top:32px}
@media (max-width:782px){ body.admin-bar header.wp-block-template-part{top:46px} }
header.wp-block-template-part .site-head{position:static}
main.wp-block-post-content{margin:0}
:where(.wp-block-group.is-layout-flow) > *{margin-block:0}
.wp-block-heading, .wp-block-list{margin:0}