/* ============================================================
   The GlowHaus Aesthetics, Selby / York.
   Bespoke brand build grounded in the real identity:
   warm gold monogram (GH) on cream, seen on the practitioner's
   own price list cards and treatment room wall decal.
   Elegant spaced serif wordmark, soft rose accents, calm and
   medically credible. Nurse led, consultation first.
   ============================================================ */

:root {
  --gold:       #A6874F;   /* her real price-list gold */
  --gold-deep:  #8C7040;
  --gold-bright:#C6A567;
  --oat:        #EDE6D8;   /* her price-list cream */
  --porcelain:  #FBF8F3;   /* page base */
  --espresso:   #3A2F22;   /* headings, footer */
  --ink:        #4A4038;   /* body */
  --rose:       #B98072;   /* soft accent from her sub headers */
  --muted:      #7C7062;
  --white:      #FFFFFF;

  --line:       rgba(58, 47, 34, .14);
  --line-soft:  rgba(58, 47, 34, .07);

  --font-head: "Cormorant Garamond", Georgia, serif;
  --font-body: "Jost", "Segoe UI", sans-serif;

  --radius: 10px;
  --radius-sm: 6px;
  --shadow: 0 20px 44px rgba(58, 47, 34, .14);
  --shadow-soft: 0 10px 24px rgba(58, 47, 34, .08);
  --wrap: 1120px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
}

body {
  font-family: var(--font-body);
  color: var(--ink);
  background: var(--porcelain);
  line-height: 1.74;
  font-size: 1.05rem;
  -webkit-font-smoothing: antialiased;
}

img { max-width: 100%; display: block; }
a { color: var(--gold-deep); }
.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 22px; }

h1, h2, h3, h4 { font-family: var(--font-head); color: var(--espresso); line-height: 1.18; font-weight: 600; }
h1 { font-size: clamp(2.2rem, 5.2vw, 3.7rem); letter-spacing: .01em; }
h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); }
h3 { font-size: 1.28rem; }

.skip-link { position: absolute; left: -999px; top: 0; z-index: 200; background: var(--espresso); color: #fff; padding: 10px 18px; }
.skip-link:focus { left: 0; }

.demo-ribbon { background: var(--espresso); color: #E4D9C4; font-size: .82rem; text-align: center; padding: 7px 14px; letter-spacing: .02em; }
.demo-ribbon strong { color: var(--gold-bright); }

/* wordmark: her real gold GH monogram, rebuilt in CSS (the IG asset is only 150px) */
.gh-mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 54px; height: 54px; border-radius: 50%;
  border: 1.5px solid var(--gold); background: var(--oat);
  font-family: var(--font-head); font-weight: 700; font-size: 1.35rem; color: var(--gold-deep);
  letter-spacing: -.02em;
}

/* ---------- header ---------- */
.site-header { position: sticky; top: 0; z-index: 100; background: rgba(251, 248, 243, .95); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-soft); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 12px 22px; }
.brand { display: flex; align-items: center; gap: 13px; text-decoration: none; }
.brand-name { font-family: var(--font-head); color: var(--espresso); font-size: 1.15rem; letter-spacing: .16em; text-transform: uppercase; line-height: 1.2; }
.brand-name small { display: block; font-family: var(--font-body); font-weight: 600; color: var(--gold); font-size: .62rem; letter-spacing: .38em; text-transform: uppercase; }

.site-nav ul { display: flex; gap: 26px; list-style: none; align-items: center; }
.site-nav a { text-decoration: none; color: var(--ink); font-weight: 600; font-size: .95rem; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--gold-deep); }
.site-nav .nav-cta { background: var(--espresso); color: #fff; padding: 10px 24px; border-radius: 999px; }
.site-nav .nav-cta:hover { background: #000; color: #fff; }

.nav-toggle { display: none; background: none; border: 1.5px solid var(--espresso); border-radius: 8px; padding: 7px 10px; cursor: pointer; }
.nav-toggle span { display: block; width: 20px; height: 2px; background: var(--espresso); margin: 4px 0; }

@media (max-width: 880px) {
  .nav-toggle { display: block; }
  .site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; background: var(--porcelain); border-bottom: 1px solid var(--line); box-shadow: var(--shadow-soft); }
  .site-nav.open { display: block; }
  .site-nav ul { flex-direction: column; gap: 0; padding: 10px 0; }
  .site-nav li { width: 100%; text-align: center; }
  .site-nav a { display: block; padding: 13px 0; }
  .site-nav .nav-cta { margin: 10px auto; display: inline-block; }
}

/* ---------- hero ---------- */
.hero { position: relative; background: var(--espresso); overflow: hidden; }
.hero-media { position: absolute; inset: 0; }
.hero-media img { width: 100%; height: 100%; object-fit: cover; opacity: .38; }
.hero-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(58,47,34,.55) 0%, rgba(58,47,34,.9) 88%); }
.hero-inner { position: relative; z-index: 2; text-align: center; padding: clamp(80px, 13vw, 165px) 22px clamp(64px, 9vw, 110px); }
.hero-kicker { font-weight: 600; letter-spacing: .42em; text-transform: uppercase; font-size: .74rem; color: var(--gold-bright); }
.hero h1 { color: #fff; margin: 16px auto; max-width: 740px; }
.hero p.lead { max-width: 580px; margin: 0 auto 30px; color: #E4D9C4; font-size: 1.12rem; }
.hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

.btn { display: inline-block; text-decoration: none; font-weight: 600; letter-spacing: .04em; padding: 14px 32px; border-radius: 999px; transition: transform .15s ease, background .15s ease; font-size: .96rem; }
.btn:hover { transform: translateY(-2px); }
.btn-gold { background: var(--gold); color: #fff; }
.btn-gold:hover { background: var(--gold-deep); }
.btn-outline { border: 1.5px solid var(--gold-bright); color: #fff; }
.btn-outline:hover { background: var(--gold-bright); color: var(--espresso); }
.btn-espresso { background: var(--espresso); color: #fff; }
.btn-espresso:hover { background: #000; }

/* trust strip */
.trust-strip { background: var(--gold); color: #fff; }
.trust-strip .wrap { display: flex; justify-content: center; gap: clamp(18px, 5vw, 60px); flex-wrap: wrap; padding: 15px 22px; }
.trust-strip span { font-size: .86rem; letter-spacing: .1em; text-transform: uppercase; }

/* ---------- sections ---------- */
section { padding: clamp(56px, 8vw, 100px) 0; }
.section-head { text-align: center; max-width: 660px; margin: 0 auto 46px; }
.section-head .eyebrow { font-weight: 600; letter-spacing: .42em; text-transform: uppercase; font-size: .72rem; color: var(--gold-deep); }
.section-head h2 { margin-top: 12px; }
.section-head p { margin-top: 12px; color: var(--muted); }

.band-oat { background: var(--oat); }
.band-espresso { background: var(--espresso); }
.band-espresso h2, .band-espresso h3 { color: var(--porcelain); }
.band-espresso p { color: #D8C9AC; }
.band-espresso .eyebrow { color: var(--gold-bright); }

/* split */
.split { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.split-media { border-radius: var(--radius); overflow: hidden; box-shadow: var(--shadow); }
.split-media img { width: 100%; aspect-ratio: 4/5; object-fit: cover; }
@media (max-width: 840px) { .split { grid-template-columns: 1fr; } }

.tick-list { list-style: none; margin-top: 18px; }
.tick-list li { padding: 8px 0 8px 32px; position: relative; }
.tick-list li::before { content: ""; position: absolute; left: 2px; top: 15px; width: 8px; height: 8px; border-radius: 50%; background: var(--gold); }

/* treatment cards */
.treat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 960px) { .treat-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 620px) { .treat-grid { grid-template-columns: 1fr; } }
.treat-card { background: var(--white); border-radius: var(--radius); padding: 28px 26px; box-shadow: var(--shadow-soft); border-top: 3px solid var(--gold); display: flex; flex-direction: column; gap: 8px; text-decoration: none; transition: transform .18s ease, box-shadow .18s ease; }
.treat-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.treat-card h3 { color: var(--espresso); }
.treat-card p { color: var(--muted); font-size: .95rem; }
.treat-card .price-line { margin-top: auto; padding-top: 10px; font-weight: 700; color: var(--gold-deep); font-size: .92rem; }

/* price tables */
.treat-block { max-width: 780px; margin: 0 auto 34px; background: var(--white); border-radius: var(--radius); box-shadow: var(--shadow-soft); overflow: hidden; }
.treat-block h3 { background: var(--espresso); color: var(--porcelain); padding: 16px 26px; font-size: 1.12rem; letter-spacing: .04em; }
.treat-block h3 small { display: block; font-family: var(--font-body); font-weight: 400; font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-bright); margin-top: 3px; }
.treat-block table { width: 100%; border-collapse: collapse; }
.treat-block th, .treat-block td { padding: 14px 26px; text-align: left; border-bottom: 1px solid var(--line-soft); font-weight: 400; font-size: .98rem; }
.treat-block th small { display: block; color: var(--muted); font-size: .85rem; }
.treat-block td:last-child { text-align: right; font-weight: 700; color: var(--espresso); white-space: nowrap; }
.treat-block tr:last-child td, .treat-block tr:last-child th { border-bottom: none; }
.consult-tag { display: inline-block; background: var(--oat); color: var(--gold-deep); font-size: .76rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; padding: 4px 14px; border-radius: 999px; }
.price-note { max-width: 780px; margin: 0 auto; font-size: .9rem; color: var(--muted); text-align: center; }

/* reviews */
.review-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; }
@media (max-width: 780px) { .review-grid { grid-template-columns: 1fr; } }
.review-card { background: var(--white); border-radius: var(--radius); padding: 30px 28px 26px; box-shadow: var(--shadow-soft); position: relative; }
.review-card::before { content: "\201C"; font-family: var(--font-head); font-size: 3rem; color: var(--gold-bright); position: absolute; top: 10px; left: 22px; line-height: 1; }
.review-card blockquote { margin-top: 24px; color: var(--ink); font-size: .99rem; }
.review-card cite { display: block; margin-top: 14px; font-style: normal; font-weight: 700; color: var(--gold-deep); font-size: .9rem; }
.review-stars { color: #D9A036; letter-spacing: 2px; margin-top: 4px; font-size: .95rem; }

/* info cards */
.info-card { background: var(--white); border-radius: var(--radius); padding: 30px 28px; box-shadow: var(--shadow-soft); }
.info-card h3 { margin-bottom: 12px; }
.info-card + .info-card { margin-top: 22px; }
.info-card ul { list-style: none; }
.info-card li { padding: 7px 0; border-bottom: 1px solid var(--line-soft); }
.info-card li:last-child { border-bottom: none; }

/* CTA band */
.cta-band { text-align: center; }
.cta-band .btn { margin-top: 24px; }

/* ---------- footer ---------- */
.site-footer { background: var(--espresso); color: #C6B79C; padding: 54px 0 30px; }
.footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 34px; }
@media (max-width: 840px) { .footer-grid { grid-template-columns: 1fr; } }
.site-footer h4 { color: var(--gold-bright); font-size: .88rem; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 12px; }
.site-footer a { color: #E4D9C4; text-decoration: none; }
.site-footer a:hover { color: var(--gold-bright); }
.site-footer ul { list-style: none; }
.site-footer li { padding: 4px 0; }
.footer-bottom { border-top: 1px solid rgba(228, 217, 196, .15); margin-top: 38px; padding-top: 20px; font-size: .82rem; display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footer-bottom a { color: var(--gold-bright); }

/* page hero (inner pages) */
.page-hero { background: var(--espresso); text-align: center; padding: clamp(56px, 8vw, 100px) 22px; }
.page-hero h1 { color: #fff; }
.page-hero p { color: #D8C9AC; max-width: 640px; margin: 14px auto 0; }
.page-hero .eyebrow { font-weight: 600; letter-spacing: .42em; text-transform: uppercase; font-size: .72rem; color: var(--gold-bright); }