:root {
  --ground: #faf8f6; --tile: #ffffff; --ink: #2b2126; --ink2: #6e5f66; --ink3: #96878e;
  --taupe: #c9bfb2; --taupe-soft: #ece6dd; --cream: #f3efe9;
  --accent: #8e3b5c; --accent-soft: #f0e0e7;
  --line: #e5dcd8; --line-soft: #efe8e4; --wash: #f4edea;
  --display: "Fraunces", Georgia, "Times New Roman", serif;
  --body: "Source Sans 3", "Segoe UI", system-ui, sans-serif;
  --script: "Great Vibes", cursive;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.65; }
img { max-width: 100%; display: block; }
a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 3px; }

.wrap { max-width: 1020px; margin: 0 auto; padding: 0 22px; }
.narrow { max-width: 720px; margin: 0 auto; }

/* ---------- header ---------- */
.top { background: #ffffff; box-shadow: 0 1px 3px rgba(43,33,38,0.06); position: sticky; top: 0; z-index: 30; }
.top .bar { display: flex; align-items: center; gap: 16px; padding: 12px 0; flex-wrap: wrap; }
.brand { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--ink); }
.brand:hover { text-decoration: none; }
.brand img { height: 48px; width: auto; object-fit: contain; border-radius: 0; }
.brand .strap { line-height: 1.25; border-left: 1px solid var(--line); padding-left: 14px; }
.brand .strap span { font-size: 11px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink2); display: block; }
.brand .strap b { font-family: var(--body); font-size: 12.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); display: block; font-weight: 700; }
/* service-area strip (SEO + orientation) */
.service-strip { background: var(--wash); border-top: 1px solid var(--line-soft); border-bottom: 1px solid var(--line); }
.service-strip .wrap { font-size: 12.5px; color: var(--ink2); text-align: center; padding: 7px 22px; letter-spacing: 0.01em; }
.service-strip b { color: var(--accent); font-weight: 700; }
.top nav { display: flex; gap: 2px 16px; flex-wrap: wrap; margin-left: auto; align-items: center; }
.top nav a { color: var(--ink2); font-weight: 600; font-size: 15px; padding: 6px 2px; }
.top nav a:hover { color: var(--accent); text-decoration: none; }
.top nav a.here { color: var(--accent); }
.btn { display: inline-block; background: var(--accent); font-weight: 700; font-size: 16px;
  border: none; border-radius: 999px; padding: 13px 26px; cursor: pointer; text-align: center; }
/* Pin colour across every link state — a:visited (0,1,1) otherwise beats .btn and dims the text. */
.btn, .btn:link, .btn:visited, .btn:hover, .btn:active, .btn:focus { color: #ffffff; text-decoration: none; }
.btn:hover { filter: brightness(1.08); }
.btn.ghost, .btn.ghost:link, .btn.ghost:visited, .btn.ghost:hover, .btn.ghost:active, .btn.ghost:focus { background: transparent; color: var(--accent); border: 1.5px solid var(--accent); }
.btn.soft, .btn.soft:link, .btn.soft:visited, .btn.soft:hover, .btn.soft:active, .btn.soft:focus { background: var(--wash); color: var(--ink); border: 1px solid var(--line); }
.ctaband .btn, .ctaband .btn:link, .ctaband .btn:visited, .ctaband .btn:hover, .ctaband .btn:active, .ctaband .btn:focus { background: #ffffff; color: var(--accent); }
.reassure { display: block; font-size: 13.5px; color: var(--ink3); margin-top: 8px; }

/* ---------- hero ---------- */
.hero { padding: 64px 0 46px; }
.hero .grid { display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 44px; align-items: center; }
.hero h1 { font-family: var(--display); font-weight: 600; font-size: clamp(32px, 4.6vw, 50px); line-height: 1.12; margin: 0 0 18px; text-wrap: balance; }
.hero .lede { font-size: 19px; color: var(--ink2); max-width: 34em; margin: 0 0 26px; }
.hero .sig { font-family: var(--script); font-size: 30px; margin-top: 22px; color: var(--ink); }
.hero .photo img { border-radius: 16px; box-shadow: 0 12px 40px rgba(43,33,38,0.13); aspect-ratio: 4/5; object-fit: cover; width: 100%; }
.eyebrow { font-size: 12.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent); font-weight: 700; margin-bottom: 12px; }

/* ---------- sections ---------- */
section { padding: 46px 0; }
section.tint { background: var(--cream); }
h2 { font-family: var(--display); font-weight: 600; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.18; margin: 0 0 14px; text-wrap: balance; }
h3 { font-family: var(--display); font-weight: 600; font-size: 21px; margin: 1.5em 0 0.5em; }
.sub { color: var(--ink2); font-size: 18px; max-width: 40em; margin-top: 0; }
p { max-width: 42em; }

.cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 16px; margin-top: 26px; }
.cardlink { background: var(--tile); border: 1px solid var(--line); border-radius: 14px; padding: 22px; color: var(--ink); display: block; }
.cardlink:hover { border-color: var(--accent); text-decoration: none; box-shadow: 0 6px 22px rgba(43,33,38,0.07); }
.cardlink b { font-family: var(--display); font-size: 19px; font-weight: 600; display: block; margin-bottom: 6px; }
.cardlink span { color: var(--ink2); font-size: 15px; }
.cardlink .go { color: var(--accent); font-weight: 700; font-size: 14px; display: block; margin-top: 12px; }

.chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }
.chips a { border: 1px solid var(--line); background: var(--tile); color: var(--ink); border-radius: 999px; padding: 10px 18px; font-size: 15.5px; font-weight: 600; }
.chips a:hover { border-color: var(--accent); color: var(--accent); text-decoration: none; }

/* three steps */
.steps3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 18px; margin-top: 26px; counter-reset: st; }
.steps3 div { background: var(--tile); border: 1px solid var(--line); border-radius: 14px; padding: 22px; position: relative; }
.steps3 div::before { counter-increment: st; content: counter(st); font-family: var(--display); font-weight: 700; font-size: 26px; color: var(--taupe); display: block; margin-bottom: 8px; }
.steps3 b { display: block; margin-bottom: 6px; font-size: 17px; }
.steps3 p { font-size: 15px; color: var(--ink2); margin: 0; }

/* quote / testimonial */
.saying { border-left: 3px solid var(--taupe); padding: 6px 0 6px 24px; margin: 28px 0; }
.saying p { font-family: var(--display); font-size: 20px; line-height: 1.5; font-style: italic; margin: 0 0 8px; }
.saying cite { font-style: normal; color: var(--ink2); font-size: 14.5px; }

/* promise box */
.promise { background: var(--tile); border: 1px solid var(--line); border-radius: 16px; padding: 28px; margin-top: 26px; }
.promise ul { margin: 12px 0 0; padding-left: 0; list-style: none; display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px 26px; }
.promise li { padding-left: 26px; position: relative; font-size: 15.5px; }
.promise li::before { content: "♡"; position: absolute; left: 0; color: var(--accent); }

/* gallery */
.gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-top: 22px; }
.gallery figure { margin: 0; }
.gallery img { border-radius: 12px; aspect-ratio: 3/4; object-fit: cover; width: 100%; }
.gallery figcaption { font-size: 13.5px; color: var(--ink2); margin-top: 7px; }

/* price tables */
.pricetable { width: 100%; border-collapse: collapse; background: var(--tile); border: 1px solid var(--line); border-radius: 14px; overflow: hidden; margin: 18px 0; font-size: 16px; }
.pricetable th { background: var(--wash); text-align: left; font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink3); padding: 12px 16px; }
.pricetable td { padding: 12px 16px; border-top: 1px solid var(--line-soft); }
.pricetable .num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600; }
.pricetable .note-row td { font-size: 14px; color: var(--ink2); }
.tablewrap { overflow-x: auto; }

/* FAQ */
details { background: var(--tile); border: 1px solid var(--line); border-radius: 12px; padding: 4px 20px; margin: 10px 0; max-width: 46em; }
details summary { font-weight: 700; cursor: pointer; padding: 12px 0; font-size: 16.5px; }
details p { color: var(--ink2); margin-top: 0; }

/* example badge (for placeholder stories) */
.example-badge { display: inline-block; background: #fff3cd; border: 1px solid #e6d9a8; color: #7a6520; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; border-radius: 6px; padding: 4px 10px; margin-bottom: 12px; }

/* before & after gallery */
.ba-gallery { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 24px; }
.ba-card { background: var(--tile); border: 1px solid var(--line); border-radius: 16px; padding: 16px; }
.ba-card h3 { font-family: var(--display); font-size: 19px; font-weight: 600; margin: 4px 0 12px; }
.ba-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; align-items: stretch; }
.ba-shot { position: relative; }
.ba-shot img { border-radius: 10px; aspect-ratio: 3/4; object-fit: cover; width: 100%; }
.ba-tag { position: absolute; top: 8px; left: 8px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; border-radius: 6px; padding: 4px 9px; color: #fff; }
.ba-tag.before { background: rgba(43,33,38,0.78); }
.ba-tag.after { background: var(--accent); }
.ba-card p { font-size: 14.5px; color: var(--ink2); margin: 12px 0 0; max-width: none; }
.ba-arrow { display: flex; align-items: center; justify-content: center; }

/* CTA band */
.ctaband { background: var(--accent); color: #fff; text-align: center; padding: 54px 22px; }
.ctaband h2 { color: #fff; }
.ctaband p { color: #f2dbe5; margin: 0 auto 24px; max-width: 36em; }
.ctaband .btn { background: #fff; color: var(--accent); }
.ctaband .reassure { color: #eccbd9; }

/* form */
.form label { display: block; margin-bottom: 16px; }
.form label span { display: block; font-weight: 700; font-size: 14.5px; margin-bottom: 6px; }
.form label em { font-weight: 400; color: var(--ink3); font-style: normal; font-size: 13px; }
.form input, .form select, .form textarea { width: 100%; font-size: 16px; font-family: var(--body); padding: 13px; border: 1px solid var(--line); border-radius: 10px; background: var(--tile); color: var(--ink); }
.form textarea { min-height: 130px; resize: vertical; }
.form input:focus, .form select:focus, .form textarea:focus { outline: 2px solid var(--accent); border-color: var(--accent); }

/* article */
.article { padding: 54px 0; }
.article .body { max-width: 44em; }
.article h1 { font-family: var(--display); font-weight: 600; font-size: clamp(30px, 4vw, 42px); line-height: 1.15; margin: 0 0 10px; text-wrap: balance; }
.article .meta { color: var(--ink3); font-size: 14.5px; margin-bottom: 26px; }
.article .body h2 { font-size: 25px; margin-top: 1.6em; }
.article .body ul { max-width: 42em; }
.article .aside { background: var(--wash); border: 1px solid var(--line); border-radius: 12px; padding: 18px 22px; margin: 24px 0; font-size: 15.5px; max-width: 44em; }

/* footer */
footer { border-top: 1px solid var(--line); margin-top: 40px; padding: 40px 0 30px; background: var(--cream); }
footer .cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 26px; }
footer h4 { font-family: var(--display); font-size: 17px; margin: 0 0 10px; }
footer p, footer a { font-size: 15px; color: var(--ink2); }
footer .tag { font-family: var(--script); font-size: 26px; color: var(--ink); }
footer .fine { margin-top: 28px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--ink3); }

@media (max-width: 860px) {
  .top { position: static; }
  .top .bar { justify-content: center; text-align: center; }
  .brand { justify-content: center; }
  .brand .strap { border-left: none; padding-left: 0; }
  .top nav { margin-left: 0; width: 100%; justify-content: center; gap: 4px 14px; font-size: 15px; }
  .top nav a.btn { flex-basis: 100%; margin-top: 6px; }
}
@media (max-width: 760px) {
  body { font-size: 16px; }
  .hero { padding: 34px 0 26px; }
  .hero .grid { grid-template-columns: 1fr; gap: 24px; }
  .hero .photo { order: -1; max-width: 320px; margin: 0 auto; }
  .hero h1 { font-size: clamp(28px, 8vw, 38px); }
  section { padding: 36px 0; }
  .ctaband { padding: 42px 18px; }
  .promise ul { grid-template-columns: 1fr; }
}


/* ================= LIVE PREVIEW: STYLE + COLOUR PICKER (temporary) ================= */
#look-picker{background:#241a1e;color:#fff;display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;
  padding:9px 16px;font-family:'Source Sans 3',system-ui,sans-serif;font-size:13px}
#look-picker .lp-lbl{font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#e9c9d6;font-weight:700}
#look-picker .lp-grp{display:flex;gap:6px;align-items:center;flex-wrap:wrap}
#look-picker .lp-s{background:transparent;color:#f3e7ec;border:1px solid #5a464e;border-radius:8px;
  padding:5px 11px;font-size:12.5px;cursor:pointer;font-family:inherit}
#look-picker .lp-s.on{background:#fff;color:#241a1e;border-color:#fff;font-weight:700}
#look-picker .lp-c{width:22px;height:22px;border-radius:50%;border:2px solid #5a464e;cursor:pointer;padding:0}
#look-picker .lp-c.on{border-color:#fff;box-shadow:0 0 0 2px #241a1e,0 0 0 3px #fff}
#look-picker .lp-note{margin-left:auto;font-size:11px;color:#9a8a90;font-style:italic}
@media print{#look-picker{display:none!important}}

/* ---- colour schemes ---- */
html[data-scheme="1"]{--accent:#A8506A;--accent-ink:#8E3E56;--ground:#FBF7F5;--cream:#F4E9E7;--wash:#F6EDEB;--accent-soft:#F0DEE4;--line:#E8DCD9;--line-soft:#F0E7E4;--ink:#2C2226;--ink2:#6F5F66;--taupe:#CDB6B4}
html[data-scheme="2"]{--accent:#5E7353;--accent-ink:#4C6043;--ground:#F7F8F3;--cream:#EBEFE4;--wash:#EEF1E8;--accent-soft:#E1E8D9;--line:#DDE2D3;--line-soft:#E7EBDD;--ink:#26291F;--ink2:#5F6656;--taupe:#B9C0A8}
html[data-scheme="3"]{--accent:#2F6E68;--accent-ink:#245853;--ground:#F4F9F8;--cream:#E1EFEC;--wash:#E8F2F0;--accent-soft:#D8E8E4;--line:#D4E4E0;--line-soft:#DEEAE7;--ink:#1F2A28;--ink2:#566662;--taupe:#A8C4BF}
html[data-scheme="4"]{--accent:#9A6234;--accent-ink:#7E4F29;--ground:#FAF7F2;--cream:#F0E7DB;--wash:#F3ECE0;--accent-soft:#EADFCC;--line:#E6DCCC;--line-soft:#EDE4D5;--ink:#2B2620;--ink2:#6B5F50;--taupe:#CBB79A}
html[data-scheme="5"]{--accent:#6E5C86;--accent-ink:#584A6C;--ground:#F8F7FA;--cream:#ECE8F0;--wash:#F0EDF4;--accent-soft:#E4DCEC;--line:#DED8E6;--line-soft:#E8E3EE;--ink:#272430;--ink2:#615C6E;--taupe:#BDB2CE}

/* ---- style 2 · Quiet Clarity (clean sans, centred, soft cards) ---- */
html[data-style="2"]{--display:'Figtree',sans-serif;--body:'Inter',sans-serif}
html[data-style="2"] .hero .grid{grid-template-columns:1fr;text-align:center}
html[data-style="2"] .hero .lede{margin-left:auto;margin-right:auto}
html[data-style="2"] .hero .photo{max-width:360px;margin:20px auto 0;order:0}
html[data-style="2"] h1,html[data-style="2"] h2{font-weight:700;letter-spacing:-.01em}
html[data-style="2"] .cardlink{box-shadow:0 6px 20px rgba(43,33,38,.08)}

/* ---- style 3 · Restored (luxe fashion, big Didone) ---- */
html[data-style="3"]{--display:'Bodoni Moda',serif;--body:'Jost',sans-serif}
html[data-style="3"] .hero h1{font-size:clamp(36px,5.5vw,60px);font-weight:700}
html[data-style="3"] h2{font-size:clamp(27px,4vw,38px);font-weight:700}
html[data-style="3"] .eyebrow{letter-spacing:.22em}
html[data-style="3"] .top nav a,html[data-style="3"] .brand .strap span,html[data-style="3"] .brand .strap b{font-family:'Jost',sans-serif}
html[data-style="3"] .cardlink{border:none;border-top:1px solid var(--taupe);border-radius:0;background:transparent}

/* ---- style 4 · Sanctuary (soft organic) ---- */
html[data-style="4"]{--display:'Marcellus',serif;--body:'Nunito Sans',sans-serif}
html[data-style="4"] .hero h1{font-weight:400}
html[data-style="4"] .hero .photo img{border-radius:50% 50% 48% 48% / 60% 60% 40% 40%}
html[data-style="4"] .cardlink{border-radius:22px;box-shadow:0 8px 26px rgba(43,33,38,.09)}
html[data-style="4"] .btn{border-radius:999px}
html[data-style="4"] .gallery img,html[data-style="4"] .ba-shot img{border-radius:22px}
html[data-style="4"] .ctaband{border-radius:40px 40px 0 0}

/* homepage service-card photos */
.cardlink img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:10px;margin-bottom:14px;display:block}
html[data-style="4"] .cardlink img{border-radius:16px}

/* men's hero video + result collages */
.hero .photo video{width:100%;border-radius:16px;box-shadow:0 12px 40px rgba(43,33,38,0.13);aspect-ratio:4/5;object-fit:cover;background:#241a1e;display:block}
html[data-style="4"] .hero .photo video{border-radius:22px}
.result-collage{margin:26px auto 0;max-width:560px}
.result-collage img{border-radius:12px;width:100%;display:block}
.result-collage figcaption{font-size:13.5px;color:var(--ink2);margin-top:8px;text-align:center}