/*
Theme Name: Bluorchid Aesthetics, WBJ Child
Template: hello-elementor
Author: Workflows by Josh
Author URI: https://workflowsbyjosh.com
Description: Custom child theme for Bluorchid Aesthetics, Lekki Phase 1, Lagos. Doctor-led aesthetic medicine, med spa and training academy. Built by Workflows by Josh.
Version: 1.1
Text Domain: bluorchid-child
*/

/* ==========================================================================
   BLUORCHID DESIGN SYSTEM
   Lifted from the approved design source, not reconstructed. Token names,
   values and rule order are as designed.

   Two changes only:
     1. The hero background was a 110KB base64 JPEG on one line. It is now
        --hero-img, set from the media library in header.php.
     2. BluNaira leads both font stacks. It covers exactly one codepoint,
        U+20A6. Neither Cormorant Garamond nor DM Sans carries a naira sign
        in any subset, so without it every price renders as a box.
   ========================================================================== */

@font-face {
  font-family: "BluNaira";
  src: local("Segoe UI"), local("Noto Sans"), local("DejaVu Sans"),
       local("Arial Unicode MS"), local("Liberation Sans");
  unicode-range: U+20A6;
  font-display: swap;
}

/*
 * THE RESET, AND WHY IT IS SPLIT IN TWO.
 *
 * This used to be one line zeroing margin and padding on every element on the
 * page. On this theme's own pages that is harmless, because every rule below
 * sets its own spacing. On an Elementor page it is destructive: Elementor
 * buttons lost their padding and rendered as bare text on a coloured block,
 * and headings lost their margins and collapsed into empty bands.
 *
 * box-sizing is safe everywhere and stays universal. The margin and padding
 * reset is now scoped to this theme's own header, footer, main and modal, so
 * it cannot reach anything Elementor renders.
 */
*, *::before, *::after { box-sizing: border-box; }

/*
 * NO WILDCARD RESET. AT ALL.
 *
 * Three attempts to scope one were all wrong in the same way: every scope I
 * chose still contained Elementor's output, because page.php renders it inside
 * this theme's own <main>. A descendant `*` cannot be made safe on a site where
 * another builder renders into your container.
 *
 * So there is none. The elements this theme actually uses are listed by name,
 * which is longer to write and impossible to get wrong.
 */
nav#navbar ul, nav#navbar li, nav#navbar p,
footer#colophon ul, footer#colophon li, footer#colophon p, footer#colophon h1,
footer#colophon h2, footer#colophon h3, footer#colophon h4,
.blu-modal p, .blu-modal h1, .blu-modal h2, .blu-modal h3, .blu-modal ul, .blu-modal li,
.vbar p, .vbar ul, .vbar li,
.trust-bar p, .trust-bar ul, .trust-bar li,
body[class*="blu-page"] main h1, body[class*="blu-page"] main h2,
body[class*="blu-page"] main h3, body[class*="blu-page"] main h4,
body[class*="blu-page"] main h5, body[class*="blu-page"] main h6,
body[class*="blu-page"] main p,  body[class*="blu-page"] main ul,
body[class*="blu-page"] main ol, body[class*="blu-page"] main li,
body[class*="blu-page"] main figure, body[class*="blu-page"] main blockquote,
body[class*="blu-page"] main dl, body[class*="blu-page"] main dd {
  margin: 0;
  padding: 0;
}

body[class*="blu-page"] main ul,
body[class*="blu-page"] main ol,
nav#navbar ul, footer#colophon ul { list-style: none; }

:root {
  --white:   #ffffff;
  --off:     #faf9f7;
  --cream:   #f4f1ec;
  --dark:    #1c1c1a;
  --mid:     #5a5a54;
  --light:   #9a9a92;
  --green:   #4a7c2f;
  --green2:  #5e9a3a;
  --gold:    #b8965a;
  --serif:   'BluNaira', 'Cormorant Garamond', Georgia, serif;
  --sans:    'BluNaira', 'DM Sans', sans-serif;
  --hero-img: none; /* set in header.php from the media library */
}

html { scroll-behavior: smooth; }

body {
  font-family: var(--sans);
  background: var(--white);
  color: var(--dark);
  overflow-x: hidden;
}

/* ── NAV ── */
body[class*="blu-page"] > nav#navbar,
nav#navbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.5rem 4rem;
  transition: background 0.4s, backdrop-filter 0.4s, box-shadow 0.4s;
}
nav.scrolled {
  background: rgba(255,255,255,0.96);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
nav#navbar .logo img {
  height: 52px;
  width: auto;
}
nav#navbar ul {
  list-style: none;
  display: flex; gap: 2.5rem; align-items: center;
}
nav#navbar ul li a {
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--dark);
  transition: color 0.2s;
}
nav#navbar ul li a:hover { color: var(--green); }
nav#navbar .nav-cta a {
  border: 1px solid var(--green);
  color: var(--green);
  padding: 0.55rem 1.4rem;
  border-radius: 2px;
  font-size: 0.75rem;
  letter-spacing: 0.14em;
  transition: background 0.2s, color 0.2s;
}
nav#navbar .nav-cta a:hover {
  background: var(--green);
  color: var(--white);
}
.nav-transparent a { color: var(--white) !important; }
.nav-transparent .nav-cta a {
  border-color: rgba(255,255,255,0.7);
  color: var(--white) !important;
}
.nav-transparent .nav-cta a:hover {
  background: rgba(255,255,255,0.15);
  color: var(--white) !important;
}

/* ── HERO ── */
#hero {
  position: relative;
  height: 100vh; min-height: 680px;
  display: flex; align-items: flex-end;
  padding: 0 4rem 7rem;
  overflow: hidden;
}
#hero .hero-bg {
  position: absolute; inset: 0;
  background-image: var(--hero-img);
  background-size: cover;
  background-position: center 30%;
  filter: brightness(0.55);
  transform: scale(1.04);
  transition: transform 8s ease;
}
#hero.loaded .hero-bg { transform: scale(1); }
#hero .hero-content {
  position: relative; z-index: 2;
  max-width: 680px;
}
.hero-eyebrow {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  margin-bottom: 1.2rem;
}
.hero-headline {
  font-family: var(--serif);
  font-size: clamp(3rem, 6vw, 5.2rem);
  font-weight: 300;
  line-height: 1.08;
  color: var(--white);
  margin-bottom: 1.6rem;
}
.hero-sub {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.7;
  color: rgba(255,255,255,0.8);
  max-width: 440px;
  margin-bottom: 2.8rem;
}
.hero-actions {
  display: flex; gap: 1.2rem; align-items: center; flex-wrap: wrap;
}
.btn-primary {
  background: var(--green);
  color: var(--white);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.9rem 2.2rem;
  border-radius: 2px;
  transition: background 0.2s, transform 0.2s;
}
.btn-primary:hover { background: var(--green2); transform: translateY(-1px); }
.btn-ghost {
  color: rgba(255,255,255,0.85);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.78rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 0.9rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.4);
  transition: color 0.2s, border-color 0.2s;
}
.btn-ghost:hover { color: var(--white); border-color: var(--white); }

/* Trust bar */
.trust-bar {
  background: var(--dark);
  padding: 1.1rem 4rem;
  display: flex; align-items: center; justify-content: center; gap: 0;
  overflow: hidden;
}
.trust-item {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0 2.5rem;
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.7);
  white-space: nowrap;
}
.trust-item:not(:last-child) {
  border-right: 1px solid rgba(255,255,255,0.15);
}
.trust-dot {
  width: 4px; height: 4px;
  border-radius: 50%;
  background: var(--green);
  flex-shrink: 0;
}

/* ── SECTIONS SHARED ── */
/* Scoped. Elementor renders its own <section> elements, and a bare
   `section` rule put 7rem of padding inside every one of them, which is what
   produced the vast empty gaps on the Elementor-built pages. This theme's own
   sections all live inside .blu-page, set on <body>. */
body[class*="blu-page"] > #main > section,
body[class*="blu-page"] > main > section { padding: 7rem 4rem; }
.section-label {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1.2rem;
}
.section-headline {
  font-family: var(--serif);
  font-size: clamp(2rem, 4vw, 3.2rem);
  font-weight: 300;
  line-height: 1.15;
  color: var(--dark);
}

/* ── MANIFESTO ── */
#manifesto {
  background: var(--off);
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
  padding: 7rem 4rem;
}
#manifesto .manifesto-image {
  position: relative;
  height: 560px;
  overflow: hidden;
  border-radius: 2px;
}
#manifesto .manifesto-image img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s ease;
}
#manifesto .manifesto-image:hover img { transform: scale(1.03); }
#manifesto .manifesto-text { }
#manifesto .manifesto-text p {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--mid);
  margin-bottom: 1.4rem;
}
#manifesto .manifesto-text p:last-of-type {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  color: var(--dark);
  font-weight: 400;
}
.badge-row {
  display: flex; gap: 1rem; flex-wrap: wrap; margin-top: 2rem;
}
.badge {
  border: 1px solid rgba(74,124,47,0.3);
  color: var(--green);
  padding: 0.4rem 1rem;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

/* ── RESULTS ── */
#results {
  background: var(--white);
  padding: 7rem 4rem;
}
#results .results-header {
  display: flex; justify-content: space-between; align-items: flex-end;
  margin-bottom: 3.5rem;
}
#results .results-header p {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--mid);
  max-width: 340px;
  line-height: 1.7;
}
.before-after-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.ba-card {
  overflow: hidden; border-radius: 2px;
  position: relative;
  cursor: pointer;
}
.ba-card img {
  width: 100%; height: 320px;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
.ba-card:hover img { transform: scale(1.04); }
.ba-card .ba-label {
  position: absolute; bottom: 0; left: 0; right: 0;
  background: linear-gradient(transparent, rgba(0,0,0,0.55));
  padding: 1.5rem 1rem 0.8rem;
  font-family: var(--sans);
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
}
.results-cta {
  text-align: center;
  margin-top: 3rem;
}
.btn-outline {
  display: inline-block;
  border: 1px solid var(--green);
  color: var(--green);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 0.85rem 2.4rem;
  border-radius: 2px;
  transition: background 0.2s, color 0.2s;
}
.btn-outline:hover { background: var(--green); color: var(--white); }

/* ── TESTIMONIAL ── */
#testimonials {
  background: var(--dark);
  padding: 7rem 4rem;
  text-align: center;
}
#testimonials .section-label { color: rgba(74,124,47,0.9); }
#testimonials .section-headline { color: var(--white); margin-bottom: 4rem; }
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(255,255,255,0.07);
}
.t-card {
  background: rgba(255,255,255,0.03);
  padding: 3rem 2.5rem;
  text-align: left;
  transition: background 0.3s;
}
.t-card:hover { background: rgba(255,255,255,0.06); }
.t-stars {
  color: var(--gold);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  margin-bottom: 1.4rem;
}
.t-quote {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.6;
  color: rgba(255,255,255,0.88);
  margin-bottom: 1.6rem;
}
.t-name {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.4);
}

/* ── TREATMENTS ── */
#treatments {
  background: var(--cream);
  padding: 7rem 4rem;
}
#treatments .treatments-header {
  max-width: 560px;
  margin-bottom: 4rem;
}
#treatments .treatments-header p {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 300;
  color: var(--mid);
  margin-top: 1rem;
  line-height: 1.7;
}
.treatments-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: rgba(0,0,0,0.06);
}
.t-service {
  background: var(--cream);
  padding: 3rem 2.5rem;
  transition: background 0.3s;
}
.t-service:hover { background: var(--white); }
.t-service-num {
  font-family: var(--serif);
  font-size: 2.5rem;
  font-weight: 300;
  color: rgba(74,124,47,0.2);
  line-height: 1;
  margin-bottom: 1.4rem;
}
.t-service-name {
  font-family: var(--serif);
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--dark);
  margin-bottom: 1rem;
  line-height: 1.3;
}
.t-service-desc {
  font-family: var(--sans);
  font-size: 0.86rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: 1.8rem;
}
.t-service-link {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  text-decoration: none;
  border-bottom: 1px solid rgba(74,124,47,0.3);
  padding-bottom: 2px;
  transition: border-color 0.2s;
}
.t-service-link:hover { border-color: var(--green); }
.treatments-footer#colophon,
body[class*="blu-page"] > footer#colophon {
  text-align: center;
  margin-top: 3.5rem;
}

/* ── WHY US ── */
#why {
  background: var(--white);
  padding: 7rem 4rem;
}
#why .why-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
  margin-top: 4rem;
}
.why-points { display: flex; flex-direction: column; gap: 2.5rem; }
.why-point { display: flex; gap: 1.5rem; }
.why-num {
  font-family: var(--serif);
  font-size: 2rem;
  font-weight: 300;
  color: var(--green);
  opacity: 0.4;
  line-height: 1;
  flex-shrink: 0;
  width: 2rem;
  text-align: right;
}
.why-text h4 {
  font-family: var(--serif);
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--dark);
  margin-bottom: 0.5rem;
}
.why-text p {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.7;
}
.why-image {
  position: sticky; top: 6rem;
  height: 520px; overflow: hidden; border-radius: 2px;
}
.why-image img {
  width: 100%; height: 100%; object-fit: cover;
}

/* ── FOUNDER ── */
#founder {
  background: var(--off);
  padding: 7rem 4rem;
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  gap: 5rem;
  align-items: center;
}
#founder .founder-text .section-headline {
  margin-bottom: 1.8rem;
}
#founder .founder-text p {
  font-family: var(--sans);
  font-size: 0.92rem;
  font-weight: 300;
  line-height: 1.85;
  color: var(--mid);
  margin-bottom: 1.2rem;
}
#founder .founder-text .dr-name {
  font-family: var(--serif);
  font-size: 1.4rem;
  font-style: italic;
  color: var(--dark);
  font-weight: 400;
  margin-bottom: 0.3rem;
}
#founder .founder-text .dr-title {
  font-family: var(--sans);
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 2rem;
}
.founder-image {
  height: 540px; overflow: hidden; border-radius: 2px;
  background: var(--cream);
  display: flex; align-items: center; justify-content: center;
}
.founder-image img {
  width: 100%; height: 100%; object-fit: cover;
}
.founder-placeholder {
  text-align: center; color: var(--light);
  font-family: var(--serif); font-size: 1.1rem; font-style: italic;
}

/* ── CONSULTATION ── */
#consultation {
  background: var(--dark);
  padding: 7rem 4rem;
}
#consultation .section-label { color: rgba(74,124,47,0.9); }
#consultation .section-headline { color: var(--white); margin-bottom: 1rem; }
#consultation .consult-sub {
  font-family: var(--sans);
  font-size: 0.95rem;
  font-weight: 300;
  color: rgba(255,255,255,0.6);
  max-width: 520px;
  line-height: 1.75;
  margin-bottom: 3.5rem;
}
.consult-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: start;
}
.consult-points { display: flex; flex-direction: column; gap: 1.4rem; }
.consult-point {
  display: flex; gap: 1rem; align-items: flex-start;
}
.consult-dash {
  color: var(--green); font-size: 1rem; line-height: 1.5; flex-shrink: 0;
}
.consult-point p {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 300;
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
}
.consult-cta-box {
  background: rgba(255,255,255,0.04);
  border: 1px solid rgba(74,124,47,0.25);
  padding: 3rem;
  border-radius: 2px;
}
.consult-price {
  font-family: var(--serif);
  font-size: 2.8rem;
  font-weight: 300;
  color: var(--white);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.consult-price-note {
  font-family: var(--sans);
  font-size: 0.75rem;
  font-weight: 300;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.08em;
  margin-bottom: 2.2rem;
}
.btn-green {
  display: inline-block;
  background: var(--green);
  color: var(--white);
  text-decoration: none;
  font-family: var(--sans);
  font-size: 0.76rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  padding: 1rem 2.5rem;
  border-radius: 2px;
  transition: background 0.2s;
  width: 100%; text-align: center;
}
.btn-green:hover { background: var(--green2); }

/* ── FAQ ── */
#faq {
  background: var(--off);
  padding: 7rem 4rem;
}
#faq .faq-header {
  max-width: 480px;
  margin-bottom: 4rem;
}
#faq .faq-header p {
  font-family: var(--sans);
  font-size: 0.9rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.7;
  margin-top: 1rem;
}
.faq-list { display: flex; flex-direction: column; }
.faq-item {
  border-top: 1px solid rgba(0,0,0,0.09);
  padding: 1.8rem 0;
}
.faq-item:last-child { border-bottom: 1px solid rgba(0,0,0,0.09); }
.faq-question {
  display: flex; justify-content: space-between; align-items: flex-start;
  cursor: pointer; gap: 2rem;
}
.faq-question h4 {
  font-family: var(--serif);
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--dark);
  line-height: 1.4;
}
.faq-icon {
  font-size: 1.2rem;
  color: var(--green);
  flex-shrink: 0;
  transition: transform 0.25s;
  margin-top: 0.1rem;
}
.faq-item.open .faq-icon { transform: rotate(45deg); }
.faq-answer {
  max-height: 0; overflow: hidden;
  transition: max-height 0.35s ease, padding 0.35s ease;
}
.faq-item.open .faq-answer { max-height: 300px; padding-top: 1rem; }
.faq-answer p {
  font-family: var(--sans);
  font-size: 0.88rem;
  font-weight: 300;
  color: var(--mid);
  line-height: 1.8;
  max-width: 680px;
}

/* ── FOOTER ── */
/* Scoped to this theme's own footer. A bare `footer` rule painted every
   Elementor footer widget dark and added 4rem of padding. */
footer#colophon {
  background: var(--dark);
  padding: 4rem 4rem 2.5rem;
  border-top: 1px solid rgba(74,124,47,0.2);
}
.footer-grid {
  display: grid;
  grid-template-columns: 1.8fr 1fr 1fr 1fr;
  gap: 3rem;
  margin-bottom: 3.5rem;
}
.footer-brand img { height: 44px; margin-bottom: 1.2rem; filter: brightness(0) invert(1); opacity: 0.85; }
.footer-brand p {
  font-family: var(--sans);
  font-size: 0.82rem;
  font-weight: 300;
  color: rgba(255,255,255,0.45);
  line-height: 1.75;
}
.footer-col h5 {
  font-family: var(--sans);
  font-size: 0.68rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.35);
  margin-bottom: 1.2rem;
}
.footer-col a, .footer-col p {
  display: block;
  font-family: var(--sans);
  font-size: 0.84rem;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  margin-bottom: 0.7rem;
  transition: color 0.2s;
}
.footer-col a:hover { color: var(--green); }
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,0.07);
  padding-top: 1.5rem;
  display: flex; justify-content: space-between; align-items: center;
}
.footer-bottom p {
  font-family: var(--sans);
  font-size: 0.72rem;
  color: rgba(255,255,255,0.25);
}

/* ── FADE IN ── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.75s ease, transform 0.75s ease;
}
.reveal.visible {
  opacity: 1;
  transform: none;
}
.reveal-delay-1 { transition-delay: 0.1s; }
.reveal-delay-2 { transition-delay: 0.2s; }
.reveal-delay-3 { transition-delay: 0.3s; }
.reveal-delay-4 { transition-delay: 0.4s; }

/* ── MOBILE ── */
@media (max-width: 900px) {
  nav { padding: 1.2rem 1.5rem; }
  nav#navbar ul { display: none; }
  section, #manifesto, #founder { padding: 4rem 1.5rem; }
  .trust-bar { padding: 0.8rem 1rem; flex-wrap: wrap; gap: 0.5rem; }
  .trust-item { padding: 0.4rem 1rem; font-size: 0.64rem; }
  .trust-item:not(:last-child) { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.1); }
  #hero { padding: 0 1.5rem 5rem; }
  #manifesto { grid-template-columns: 1fr; gap: 2.5rem; }
  #manifesto .manifesto-image { height: 300px; }
  .before-after-grid { grid-template-columns: 1fr 1fr; }
  .ba-card img { height: 220px; }
  .testimonial-grid { grid-template-columns: 1fr; gap: 1px; }
  .treatments-grid { grid-template-columns: 1fr; gap: 1px; }
  #why .why-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .why-image { display: none; }
  #founder { grid-template-columns: 1fr; gap: 2.5rem; }
  .founder-image { height: 340px; }
  .consult-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  .footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
}
/* ==========================================================================
   WORKFLOWS BY JOSH, ADDITIONS TO THE APPROVED DESIGN
   Everything above this line is the design system as designed. Everything
   below is what a live WordPress site needs and a static mockup did not.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. MOBILE NAVIGATION
   The source hides the nav entirely below 900px and puts nothing in its
   place, so on a phone there is no way to reach any other page. Since most
   of this clinic's traffic arrives from Instagram, that is the single most
   expensive line in the stylesheet. A drawer replaces it.
   -------------------------------------------------------------------------- */

.burger {
  display: none;
  flex-direction: column; justify-content: center; gap: 5px;
  width: 44px; height: 44px; padding: 0 10px;
  background: none; border: 0; cursor: pointer;
}
.burger span {
  display: block; height: 1px; background: var(--dark);
  transition: transform .3s ease, opacity .2s ease;
}
.nav-transparent .burger span { background: var(--white); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.drawer {
  display: none;
  position: fixed; inset: 64px 0 0;
  z-index: 998;
  background: var(--white);
  padding: 1.5rem 1.5rem 3rem;
  overflow-y: auto;
}
.drawer.is-open { display: block; }
.drawer ul { list-style: none; margin: 0; padding: 0; }
.drawer li + li { border-top: 1px solid rgba(0,0,0,.07); }
.drawer a {
  display: block; padding: 1.1rem 0;
  font-family: var(--sans); font-size: 1rem; font-weight: 300;
  letter-spacing: .06em; color: var(--dark); text-decoration: none;
}
.drawer .btn-green { margin-top: 1.6rem; width: 100%; text-align: center; }

@media (max-width: 900px) {
  .burger { display: inline-flex; }
  /* the image the source dropped on mobile comes back, shorter */
  .why-image { display: block !important; height: 260px; }
  .why-image img { height: 100%; object-fit: cover; }
}

/* --------------------------------------------------------------------------
   2. TIGHTER PHONE SIZING
   The source drops from desktop straight to one mobile block at 900px. On a
   390px screen the hero headline still renders at 3rem and the section
   padding stays at 1.5rem, which crowds the type.
   -------------------------------------------------------------------------- */

@media (max-width: 560px) {
  .hero-headline { font-size: 2.55rem; }
  .section-headline { font-size: 1.9rem; }
  section, #manifesto, #founder { padding: 3.2rem 1.25rem; }
  .before-after-grid { gap: 0.75rem; }
  .ba-card img { height: 180px; }
  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .hero-actions { flex-direction: column; align-items: stretch; }
  .hero-actions a { text-align: center; }
}

/* --------------------------------------------------------------------------
   3. CONSULTATION MODAL
   Opened by anything carrying data-blu-modal. A value on that attribute
   preselects a treatment family.
   -------------------------------------------------------------------------- */

.bmodal { position: fixed; inset: 0; z-index: 1000; display: none; }
.bmodal.is-open { display: block; }
.bmodal__bg { position: absolute; inset: 0; background: rgba(28,28,26,.66); backdrop-filter: blur(2px); }
.bmodal__box {
  position: relative; margin: auto; inset: 0; top: 50%;
  transform: translateY(-50%);
  width: calc(100% - 2rem); max-width: 480px;
  max-height: calc(100dvh - 3rem); overflow-y: auto;
  background: var(--white); border-radius: 2px;
  padding: 2.4rem 1.9rem 1.8rem;
  box-shadow: 0 24px 70px rgba(0,0,0,.3);
}
.bmodal__box h3 {
  font-family: var(--serif); font-weight: 300; font-size: 1.9rem;
  color: var(--dark); line-height: 1.15; margin-bottom: .5rem;
}
.bmodal__lead { font-family: var(--sans); font-size: .85rem; font-weight: 300; color: var(--mid); margin-bottom: 1.6rem; }
.bmodal__x {
  position: absolute; top: .6rem; right: .9rem;
  width: 40px; height: 40px; font-size: 1.7rem; line-height: 1;
  color: var(--light); background: none; border: 0; cursor: pointer;
}
.bmodal__x:hover { color: var(--dark); }

.bfield { margin-bottom: 1rem; }
.bfield label {
  display: block; font-family: var(--sans); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--light);
  margin-bottom: .45rem;
}
.bfield select {
  width: 100%; padding: .9rem .95rem;
  font-family: var(--sans); font-size: .95rem; font-weight: 300; color: var(--dark);
  background: var(--off); border: 1px solid rgba(0,0,0,.14); border-radius: 2px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--light) 50%),
                    linear-gradient(135deg, var(--light) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.bfield select:disabled { color: var(--light); background-color: #f2f1ee; }

.bnote {
  font-family: var(--sans); font-size: .82rem; font-weight: 300; line-height: 1.6;
  color: var(--mid); background: rgba(74,124,47,.06);
  border-left: 2px solid var(--green); padding: .8rem .9rem; margin-bottom: 1.2rem;
}
.bnote:empty { display: none; }
.bnote--gate { background: rgba(184,150,90,.10); border-left-color: var(--gold); }

#blu-go { display: block; width: 100%; text-align: center; }
#blu-go[aria-disabled="true"] { opacity: .45; pointer-events: none; }

.bmodal__alt {
  margin-top: 1rem; text-align: center;
  font-family: var(--sans); font-size: .78rem; font-weight: 300; color: var(--light);
}
.bmodal__alt a { color: var(--green); }

/* --------------------------------------------------------------------------
   4. WOOCOMMERCE AND WORDPRESS FALLBACK
   Cart, checkout, my account and order-received render through page.php.
   Without this they arrive unstyled.
   -------------------------------------------------------------------------- */

.blu-wp-content { max-width: 1200px; margin: 0 auto; padding: 5rem 4rem; }
.blu-wp-content h1, .blu-wp-content h2 { font-family: var(--serif); font-weight: 300; color: var(--dark); }
.blu-wp-content a { color: var(--green); }
@media (max-width: 900px) { .blu-wp-content { padding: 3rem 1.5rem; } }

.woocommerce .button, .woocommerce button.button, .woocommerce a.button,
.woocommerce input.button, .woocommerce #respond input#submit {
  background: var(--green) !important; color: var(--white) !important;
  border-radius: 2px !important;
  font-family: var(--sans) !important; font-size: .75rem !important; font-weight: 500 !important;
  letter-spacing: .16em; text-transform: uppercase; padding: .9rem 1.8rem !important;
}
.woocommerce .button:hover, .woocommerce a.button:hover { background: var(--green2) !important; }
.woocommerce-message, .woocommerce-info { border-top-color: var(--green) !important; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--green) !important; }

/* --------------------------------------------------------------------------
   4b. FAQ AS A BUTTON
   The source used a div with onclick. A button is keyboard reachable and
   announces its open state to a screen reader. These rules make it look
   identical to the designed div.
   -------------------------------------------------------------------------- */

.faq-question {
  width: 100%; background: none; border: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
}

/* --------------------------------------------------------------------------
   4c. SCROLL ANIMATION, OFF
   The source faded every block in from 28px below as it entered the viewport.
   On a long page that reads as text floating rather than as polish, so it is
   neutralised here rather than deleted. The classes stay in the markup, so
   turning it back on is one rule.
   -------------------------------------------------------------------------- */

.reveal,
.reveal-delay-1,
.reveal-delay-2,
.reveal-delay-3,
.reveal-delay-4 {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
  transition-delay: 0s !important;
}

/* --------------------------------------------------------------------------
   4d. SIGNATURE TREATMENTS, REWORKED
   The source gave three flat cream panels. These earn their space: a hairline
   that draws across on hover, an oversized ghost numeral, a live starting
   price read from WooCommerce, and two distinct actions rather than one link.
   -------------------------------------------------------------------------- */

.treatments-grid { gap: 2px; }

.t-service {
  position: relative;
  padding: 3.4rem 2.6rem 2.8rem;
  overflow: hidden;
  transition: background .35s ease, transform .35s ease;
}
.t-service::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0; height: 2px;
  background: var(--gold);
  transform: scaleX(0); transform-origin: left;
  transition: transform .45s cubic-bezier(.22,.61,.36,1);
}
.t-service:hover::before { transform: scaleX(1); }
.t-service:hover { background: var(--white); }

.t-service-num {
  position: absolute; top: 1.6rem; right: 2rem;
  font-family: var(--serif); font-weight: 300;
  font-size: 5.5rem; line-height: 1;
  color: rgba(74,124,47,0.10);
  margin: 0; pointer-events: none;
  transition: color .35s ease;
}
.t-service:hover .t-service-num { color: rgba(184,150,90,0.22); }

.t-service-name { position: relative; font-size: 1.45rem; }

.t-service-from {
  font-family: var(--sans); font-size: 0.72rem; font-weight: 400;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--gold); margin-bottom: 1.1rem;
}
.t-service-from span { font-family: var(--serif); font-size: 1.05rem; letter-spacing: 0; text-transform: none; }

.t-service-gate {
  display: inline-block;
  font-family: var(--sans); font-size: 0.64rem; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--mid); background: rgba(0,0,0,.05);
  padding: .35rem .7rem; border-radius: 2px; margin-bottom: 1.2rem;
}

.t-service-actions { display: flex; flex-wrap: wrap; gap: 1.6rem; align-items: center; }
.t-service-link { background: none; border: 0; cursor: pointer; }
.t-service-link--solid {
  border: 1px solid var(--green); border-bottom-color: var(--green);
  padding: .6rem 1.3rem; border-radius: 2px;
  transition: background .2s ease, color .2s ease;
}
.t-service-link--solid:hover { background: var(--green); color: var(--white); }

/* --------------------------------------------------------------------------
   4e. FOUNDER, REWORKED
   The source was text beside a photo. This gives the photo an offset gold
   frame, lifts her name onto a rule, adds a pull quote in her own voice, and
   sets three credentials beneath. Same content, more presence.
   -------------------------------------------------------------------------- */

#founder {
  align-items: center;
  grid-template-columns: 1.1fr 1fr;
}
/* The portrait sits with her name rather than opposite it, so the order reads
   credentials, then portrait, then signature, on every screen size. */
.founder-aside { display: flex; flex-direction: column; gap: 2.2rem; }
.founder-sign { margin-top: 0; }
@media (max-width: 900px) {
  #founder { grid-template-columns: 1fr; }
  .founder-aside { gap: 1.8rem; }
}

.founder-quote {
  font-family: var(--serif); font-weight: 300; font-style: italic;
  font-size: 1.5rem; line-height: 1.45; color: var(--dark);
  border-left: 2px solid var(--gold);
  padding-left: 1.6rem; margin: 0 0 2rem;
}

.founder-sign { position: relative; padding-top: 1.8rem; margin-top: .5rem; }
.founder-sign::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 54px; height: 1px; background: var(--gold);
}

.founder-creds {
  display: flex; flex-wrap: wrap; gap: 2.2rem;
  margin: 2rem 0 2.2rem;
}
.founder-cred strong {
  display: block;
  font-family: var(--serif); font-weight: 300; font-size: 1.7rem;
  color: var(--green); line-height: 1;
}
.founder-cred span {
  display: block; margin-top: .4rem;
  font-family: var(--sans); font-size: 0.66rem; font-weight: 400;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--light);
}

.founder-image { position: relative; overflow: visible; background: none; }
.founder-image::after {
  content: ""; position: absolute;
  inset: 1.6rem -1.6rem -1.6rem 1.6rem;
  border: 1px solid rgba(184,150,90,.45);
  border-radius: 2px; z-index: 0; pointer-events: none;
}
.founder-image img {
  position: relative; z-index: 1;
  border-radius: 2px;
}

@media (max-width: 900px) {
  .founder-image::after { inset: 1rem -1rem -1rem 1rem; }
  .founder-quote { font-size: 1.25rem; }
  .t-service-num { font-size: 4rem; top: 1.2rem; right: 1.4rem; }
}

/* --------------------------------------------------------------------------
   4f. LOGO
   The supplied logo has a white background baked in, so it showed as a white
   box over the dark hero and, in the footer, the brightness/invert filter
   turned that whole box solid white. Two files replace it: a transparent PNG
   for the nav and a light version for the footer. The filter is removed,
   because filtering an image you cannot see is guesswork.
   -------------------------------------------------------------------------- */

.footer-brand img {
  filter: none;
  opacity: 1;
  height: 52px;
  width: auto;
}
nav#navbar .logo img { height: 46px; width: auto; }
@media (max-width: 900px) { nav#navbar .logo img { height: 38px; } }

/* --------------------------------------------------------------------------
   4g. MANIFESTO IMAGE
   The live site presents this one tilted, with a white mount and a soft
   shadow, rather than as a flat crop. That is what makes it read as a
   photograph on a shelf instead of a stock banner.
   -------------------------------------------------------------------------- */

#manifesto .manifesto-image {
  height: auto;
  overflow: visible;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
#manifesto .manifesto-image img {
  width: 100%; height: auto;
  max-height: 520px;
  object-fit: cover;
  border: 14px solid var(--white);
  border-radius: 2px;
  box-shadow: 0 18px 44px rgba(0,0,0,.16);
  transform: rotate(-2.5deg);
  transition: transform .5s cubic-bezier(.22,.61,.36,1);
}
#manifesto .manifesto-image:hover img { transform: rotate(0deg) scale(1.01); }

@media (max-width: 900px) {
  #manifesto .manifesto-image { height: auto; padding: 1rem .5rem; }
  #manifesto .manifesto-image img { border-width: 10px; max-height: 340px; }
}

/* --------------------------------------------------------------------------
   4h. NAV, NOT STICKY
   The source pinned the nav with position: fixed, so it rode down the page and
   grew a white bar as soon as you scrolled. It now sits at the top of the
   document and scrolls away with everything else. No bar, no background, no
   state change, nothing following you down the page.

   It stays absolutely positioned over the hero so the hero image still runs to
   the top of the screen behind it, and switches to normal flow on every other
   page, where there is no hero to sit over.
   -------------------------------------------------------------------------- */

nav#navbar {
  position: absolute;
  top: 0; left: 0; right: 0;
  z-index: 100;
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  transition: none;
}
nav#navbar.scrolled {
  background: transparent;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}

/* Inner pages have no hero behind the nav, so it takes its own space. */
body:not(.blu-page-home) nav#navbar {
  position: static;
  background: var(--off);
  border-bottom: 1px solid rgba(0,0,0,.06);
}

/* The hero fills the viewport with the nav sitting over it. */
body.blu-page-home { position: relative; }

/* The drawer opens from the top of the document rather than the viewport,
   since the nav is no longer pinned there. */
.drawer { position: absolute; top: 100%; inset-inline: 0; bottom: auto; }
body:not(.blu-page-home) .drawer { position: absolute; }

/* --------------------------------------------------------------------------
   4i. TREATMENT CARDS, RESTING STATE
   The white ground and the gold rule were a hover reward. On a phone there is
   no hover, so most people never saw either. They are the resting state now,
   and hover lifts the card instead.
   -------------------------------------------------------------------------- */

.t-service {
  background: var(--white);
  border: 1px solid rgba(0,0,0,.06);
}
.t-service::before { transform: scaleX(1); }
.t-service:hover {
  background: var(--white);
  transform: translateY(-3px);
  box-shadow: 0 14px 34px rgba(0,0,0,.07);
}
.t-service .t-service-num { color: rgba(184,150,90,0.20); }
.t-service:hover .t-service-num { color: rgba(184,150,90,0.34); }

.treatments-grid { background: transparent; gap: 1.5rem; }
@media (max-width: 900px) { .treatments-grid { gap: 1.2rem; } }

/* --------------------------------------------------------------------------
   4j. TREATMENTS PAGE
   Each group sits in its own tinted panel, so the eye separates facials from
   lasers from injectables without reading a heading. Six tints, all mixed from
   the brand palette: gold, sage, mint, cream, ink and blush.
   -------------------------------------------------------------------------- */

#t-hero {
  position: relative; background: var(--dark);
  padding: 9rem 4rem 5.5rem; overflow: hidden;
}
#t-hero::before {
  content: ""; position: absolute; inset: 0;
  background: var(--hero-img) center 32% / cover no-repeat;
  opacity: .28; filter: grayscale(.35);
}
#t-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(105deg, rgba(28,28,26,.92) 0%, rgba(28,28,26,.72) 55%, rgba(28,28,26,.45) 100%);
}
.t-hero-ghost {
  position: absolute; right: 2rem; bottom: -2.4rem;
  font-family: var(--serif); font-weight: 300;
  font-size: clamp(5rem, 13vw, 11rem); line-height: .8;
  color: rgba(255,255,255,.035); pointer-events: none; user-select: none; white-space: nowrap;
}
.t-hero-in { position: relative; z-index: 2; max-width: 660px; }
.t-hero-ghost { z-index: 1; }
#t-hero .section-label { color: rgba(255,255,255,.45); display: flex; align-items: center; gap: .7rem; }
#t-hero .section-headline { color: var(--white); margin: .6rem 0 1.4rem; }
#t-hero .section-headline em { color: var(--gold); font-style: italic; }
.t-hero-sub {
  font-family: var(--sans); font-size: .92rem; font-weight: 300; line-height: 1.8;
  color: rgba(255,255,255,.6); max-width: 520px;
}
.lbl-rule { display: inline-block; width: 22px; height: 1px; background: currentColor; opacity: .6; }
.section-label.center { justify-content: center; display: flex; align-items: center; gap: .7rem; }
.section-headline.center { text-align: center; }

/* ---- search and filters ---- */
/* Not sticky. It scrolls away with everything else. */
#t-find {
  background: var(--white);
  border-bottom: 1px solid rgba(0,0,0,.07);
  padding: 2.4rem 4rem 1.6rem; text-align: center;
}
.t-search {
  width: 100%; max-width: 560px; padding: 1rem 1.2rem;
  font-family: var(--sans); font-size: .9rem; font-weight: 300; color: var(--dark);
  background: var(--off); border: 1px solid rgba(0,0,0,.14); border-radius: 2px;
}
.t-search::placeholder { color: var(--light); }
.t-search:focus { outline: none; border-color: var(--green); background: var(--white); }

.t-pills { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin: 1.4rem 0 1rem; }
.t-pill {
  display: inline-flex; align-items: center; gap: .45rem;
  font-family: var(--sans); font-size: .64rem; font-weight: 500;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--mid); background: var(--white);
  border: 1px solid rgba(0,0,0,.14); border-radius: 100px;
  padding: .55rem 1rem; cursor: pointer; transition: all .2s ease;
}
.t-pill span { font-size: .58rem; color: var(--light); letter-spacing: 0; }
.t-pill:hover { border-color: var(--green); color: var(--green); }
.t-pill.is-on { background: var(--dark); border-color: var(--dark); color: var(--white); }
.t-pill.is-on span { color: var(--gold); }

.t-showing {
  font-family: var(--sans); font-size: .74rem; font-weight: 300;
  color: var(--light); font-style: italic;
}

/* ---- panels ----
   Each group is its own colour field, so the eye separates facials from laser
   from injectables before reading a word. Eight tints, every one mixed from
   the brand green, gold, cream and ink. */
.t-panels { background: var(--white); padding: 0 0 3rem; }
.t-panel { padding: 2.6rem 4rem 1.6rem; }
.t-panel[hidden] { display: none; }

.t-panel--gold     { --tint: #f8f2e6; --accent: #a5834a; --head: #8c6d38; }
.t-panel--sage     { --tint: #edf2e8; --accent: #4a7c2f; --head: #3c6626; }
.t-panel--mint     { --tint: #e6efe4; --accent: #5e9a3a; --head: #3f6d27; }
.t-panel--cream    { --tint: #f4f1ec; --accent: #a58a55; --head: #7d6539; }
.t-panel--blush    { --tint: #faf0e2; --accent: #c2a878; --head: #93764a; }
.t-panel--ink      { --tint: #ecedea; --accent: #5a5a54; --head: #3c3c37; }
.t-panel { background: var(--tint); }

.t-panel-head {
  position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: .3rem 1rem;
  padding: 0 0 1rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--accent);
}
.t-panel-head::before { content: none; }
.t-panel-head h2 {
  font-family: var(--serif); font-weight: 400; font-size: 1.6rem;
  letter-spacing: -.01em; color: var(--head); margin: 0;
}
.t-panel-blurb {
  font-family: var(--sans); font-size: .76rem; font-weight: 300;
  color: var(--mid); flex: 1; min-width: 180px;
}
.t-panel-count {
  display: grid; place-items: center; width: 26px; height: 26px;
  border-radius: 50%; background: var(--accent); color: var(--white);
  font-family: var(--sans); font-size: .66rem; font-weight: 500;
}

/* ---- a single treatment ---- */
.t-item {
  display: grid;
  grid-template-columns: 1fr 150px 230px;
  align-items: center; gap: .4rem 1.8rem;
  padding: 1.15rem 1.4rem;
  transition: box-shadow .2s ease, transform .2s ease;
  border-radius: 2px;
  /* The white card with its coloured edge is the resting state, not a hover
     reward. On a phone there is no hover, so most people never saw it. */
  background: var(--white);
  border-left: 3px solid var(--accent);
  margin-bottom: .5rem;
}
.t-item:last-child { margin-bottom: 0; }
.t-item { position: relative; }
.t-item::before { content: none; }
.t-item:hover {
  box-shadow: 0 6px 20px rgba(0,0,0,.07);
  transform: translateY(-1px);
}

/* Consultation-first rows read differently at a glance, without shouting. */
.t-item--gated .t-item-name { color: var(--head); font-style: italic; font-weight: 600; }
.t-item[hidden] { display: none; }

.t-item-name {
  /* Cormorant Garamond at 500. The 400 read too light against the body copy,
     so the name stopped being the first thing the eye landed on. */
  font-family: var(--serif); font-size: 1.24rem; font-weight: 600;
  letter-spacing: -.005em; color: var(--head); margin-bottom: .25rem;
}
.t-mins {
  font-family: var(--sans); font-size: .6rem; font-weight: 400;
  letter-spacing: .1em; text-transform: uppercase; color: var(--light);
  margin-left: .55rem; border: 1px solid rgba(0,0,0,.1);
  border-radius: 100px; padding: .15rem .5rem; white-space: nowrap;
}
.t-item-desc {
  font-family: var(--sans); font-size: .79rem; font-weight: 300; line-height: 1.65;
  color: var(--mid); max-width: 60ch;
}

.t-item-price { text-align: right; white-space: nowrap; }
.t-item-price strong {
  display: block; font-family: var(--sans); font-size: 1.22rem; font-weight: 500;
  color: var(--dark); letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.t-item-price .t-item-atc { font-size: .85rem; font-weight: 400; color: var(--mid); }
.t-item-price span {
  display: block; margin-top: .1rem;
  font-family: var(--sans); font-size: .58rem; font-weight: 300;
  letter-spacing: .1em; text-transform: uppercase; color: var(--light);
}

.t-item-cta { display: flex; gap: .5rem; justify-content: flex-end; }

.t-go {
  display: inline-flex; align-items: center; justify-content: center;
  white-space: nowrap;
  font-family: var(--sans); font-size: .62rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase;
  padding: .68rem 1.25rem; border-radius: 2px; border: 1px solid transparent;
  cursor: pointer; text-decoration: none; transition: all .2s ease;
}
.t-go--green { background: var(--accent, var(--green)); color: var(--white); }
.t-go--green:hover { filter: brightness(1.12); }
.t-go--gold  { background: none; color: var(--gold); border-color: rgba(184,150,90,.5); }
.t-go--gold:hover { background: rgba(184,150,90,.1); border-color: var(--gold); }
.t-go--light { background: var(--white); color: var(--green); }
.t-go--light:hover { background: var(--cream); }
.t-go--wa { background: #2aa84a; color: var(--white); }
.t-go--wa:hover { background: #25913f; }

/* Add sits beside Book Now as a quiet second action, not a full-width slab. */
.t-add {
  display: inline-flex; align-items: center; gap: .3rem;
  padding: .68rem 1rem; border-radius: 2px;
  background: none; border: 1px solid rgba(0,0,0,.16);
  font-family: var(--sans); font-size: .62rem; font-weight: 500;
  letter-spacing: .15em; text-transform: uppercase; color: var(--mid);
  cursor: pointer; transition: all .2s ease; white-space: nowrap;
}
.t-add span { font-size: .85rem; line-height: 1; }
.t-add { background: var(--off); }
.t-add:hover { border-color: var(--accent); color: var(--accent); background: var(--white); }
.t-add.is-in { background: var(--accent); border-color: var(--accent); color: var(--white); }

.t-empty {
  text-align: center; padding: 3rem 1rem;
  font-family: var(--sans); font-size: .9rem; font-weight: 300; color: var(--mid);
}
.t-link { background: none; border: 0; color: var(--green); cursor: pointer; font: inherit; text-decoration: underline; }

@media (max-width: 1100px) {
  .t-item { grid-template-columns: 1fr auto; }
  .t-item-cta { grid-column: 1 / -1; justify-content: flex-start; padding-top: .4rem; }
}

/* ---- reading the prices ---- */
#t-know { background: var(--cream); padding: 6rem 4rem; }
#t-know .section-headline { font-size: 2.1rem; margin-bottom: 2.6rem; }
#t-know .section-headline em { color: var(--gold); font-style: italic; }

.t-know-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1.2rem; margin-bottom: 2.4rem; }
.t-know-card {
  background: var(--white); border-radius: 3px; padding: 2rem 1.8rem;
  border-top: 2px solid rgba(184,150,90,.5);
}
.t-know-n {
  display: inline-grid; place-items: center; width: 30px; height: 30px;
  border-radius: 4px; background: rgba(74,124,47,.12); color: var(--green);
  font-family: var(--sans); font-size: .68rem; font-weight: 500; margin-bottom: .9rem;
}
.t-know-card h3 { font-family: var(--serif); font-size: 1.12rem; font-weight: 400; color: var(--dark); margin-bottom: .55rem; }
.t-know-card p { font-family: var(--sans); font-size: .8rem; font-weight: 300; line-height: 1.75; color: var(--mid); }

.t-multi {
  background: rgba(74,124,47,.09); border-radius: 3px;
  padding: 2rem 2.2rem; max-width: 720px; margin: 0 auto; text-align: center;
}
.t-multi h3 { font-family: var(--serif); font-size: 1.3rem; font-weight: 400; color: var(--dark); margin-bottom: .7rem; }
.t-multi p { font-family: var(--sans); font-size: .84rem; font-weight: 300; line-height: 1.8; color: var(--mid); margin-bottom: 1.4rem; }
.t-multi strong { font-weight: 500; color: var(--dark); }
.t-multi-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }

/* ---- close ---- */
#t-close {
  background: var(--dark); margin: 0 4rem 5rem; border-radius: 4px;
  padding: 4rem 3rem; text-align: center;
}
#t-close .section-label { color: rgba(255,255,255,.4); justify-content: center; display: flex; align-items: center; gap: .7rem; }
#t-close .section-headline { color: var(--white); margin: .8rem 0 1.2rem; font-size: 2.1rem; }
#t-close .section-headline em { color: var(--gold); font-style: italic; }
.t-close-sub {
  font-family: var(--sans); font-size: .86rem; font-weight: 300; line-height: 1.8;
  color: rgba(255,255,255,.55); max-width: 54ch; margin: 0 auto 1.8rem;
}
.t-close-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }

@media (max-width: 900px) {
  #t-hero { padding: 5.5rem 1.5rem 3.5rem; }
  #t-find { padding: 1.8rem 1.2rem 1.2rem; }
  .t-panels { padding: 0 0 2rem; }
  .t-panel { padding: 1.8rem 1.1rem 1rem; }
  .t-item { padding: 1rem .9rem; }
  .t-item-cta .t-go, .t-item-cta .t-add { flex: 1; }
  .t-know-grid { grid-template-columns: 1fr; }
  #t-know { padding: 3.5rem 1.5rem; }
  #t-close { margin: 0 1rem 3rem; padding: 2.6rem 1.4rem; }
  .t-close-cta .t-go, .t-multi-cta .t-go { width: 100%; }
}

/* --------------------------------------------------------------------------
   4k. THE VISIT BAR
   The one thing on this site that follows you down the page. It earns that by
   holding what you have chosen.
   -------------------------------------------------------------------------- */

.vbar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 940;
  display: flex; align-items: center; gap: 1rem;
  padding: .8rem 4rem; background: var(--white);
  border-top: 1px solid rgba(0,0,0,.1);
  box-shadow: 0 -8px 30px rgba(0,0,0,.09);
}
.vbar[hidden] { display: none; }

.vbar-sum {
  flex: 1; display: flex; align-items: center; gap: .55rem;
  padding: .75rem 1.1rem; background: var(--off);
  border: 1px solid rgba(184,150,90,.45); border-radius: 100px;
  font-family: var(--sans); font-size: .76rem; font-weight: 300; color: var(--mid);
  cursor: pointer;
}
.vbar-count { font-weight: 500; color: var(--green); }
.vbar-total { font-weight: 500; color: var(--dark); }
.vbar-dot { color: var(--light); }
.vbar-caret { margin-left: auto; color: var(--gold); font-size: .7rem; transition: transform .25s ease; }
.vbar.is-open .vbar-caret { transform: rotate(180deg); }
.vbar-go { white-space: nowrap; }

.vbar-open {
  display: none; position: absolute; left: 4rem; right: 4rem; bottom: 100%;
  background: var(--white); border: 1px solid rgba(0,0,0,.1); border-bottom: 0;
  border-radius: 3px 3px 0 0; padding: 1rem 1.4rem;
  box-shadow: 0 -8px 30px rgba(0,0,0,.09);
}
.vbar.is-open .vbar-open { display: block; }
.vbar-list { max-height: 34vh; overflow-y: auto; }
.vtray-item {
  display: flex; align-items: center; gap: .9rem; padding: .6rem 0;
  border-bottom: 1px solid rgba(0,0,0,.07);
  font-family: var(--sans); font-size: .82rem; font-weight: 300; color: var(--mid);
}
.vtray-item strong { flex: 1; font-weight: 400; color: var(--dark); }
.vtray-x { background: none; border: 0; cursor: pointer; color: var(--light); font-size: 1.1rem; padding: 0 .3rem; }
.vtray-x:hover { color: var(--gold); }
.vbar-note { font-family: var(--sans); font-size: .74rem; font-weight: 300; color: var(--light); padding-top: .8rem; }

@media (max-width: 900px) {
  .vbar { flex-wrap: wrap; padding: .7rem 1rem; gap: .6rem; }
  .vbar-sum { font-size: .7rem; padding: .6rem .9rem; }
  .vbar-go { width: 100%; }
  .vbar-open { left: 1rem; right: 1rem; }
}

/* --------------------------------------------------------------------------
   5. HOUSEKEEPING
   -------------------------------------------------------------------------- */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; }

.wa-float {
  position: fixed; right: 1rem; bottom: 1rem; z-index: 950;
  width: 54px; height: 54px; border-radius: 50%;
  background: var(--green); display: grid; place-items: center;
  box-shadow: 0 6px 22px rgba(0,0,0,.18);
}
.wa-float svg { width: 26px; height: 26px; fill: #fff; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .reveal { opacity: 1 !important; transform: none !important; }
  html { scroll-behavior: auto; }
}

/* --------------------------------------------------------------------------
   VIDEO STRIP
   YouTube Shorts, so 9:16. A 16:9 frame letterboxes them with black bars down
   both sides. Nothing loads until someone clicks: the card is a thumbnail and
   the player is swapped in on demand, because an iframe costs about half a
   megabyte and sets cookies before anyone has asked to watch.
   -------------------------------------------------------------------------- */

.vidstrip { background: var(--off); padding: 5rem 4rem; }
.vidstrip--dark { background: var(--dark); }
.vidstrip--dark .section-headline { color: var(--white); }
.vidstrip--dark .section-headline em { color: var(--gold); font-style: italic; }
.vidstrip--dark .section-label { color: rgba(255,255,255,.45); }
.vidstrip--dark .vidstrip-sub { color: rgba(255,255,255,.5); }
.vidstrip--dark .vidcard-cap { color: rgba(255,255,255,.7); }

.vidstrip-head { text-align: center; max-width: 620px; margin: 0 auto 2.4rem; }
.vidstrip-head .section-label { justify-content: center; display: flex; align-items: center; gap: .7rem; }
.vidstrip-head .section-headline { font-size: 2rem; margin: .7rem 0 .8rem; }
.vidstrip-head .section-headline em { font-style: italic; color: var(--gold); }
.vidstrip-sub {
  font-family: var(--sans); font-size: .86rem; font-weight: 300; line-height: 1.7;
  color: var(--mid);
}

.vidstrip-rail {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(210px, 1fr);
  gap: 1rem; overflow-x: auto; padding-bottom: .5rem;
  scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch;
}
.vidstrip-rail::-webkit-scrollbar { height: 4px; }
.vidstrip-rail::-webkit-scrollbar-thumb { background: rgba(184,150,90,.4); border-radius: 4px; }

.vidcard {
  position: relative; display: block; padding: 0; border: 0; cursor: pointer;
  background: var(--dark); border-radius: 3px; overflow: hidden;
  aspect-ratio: 9 / 16;                 /* Shorts. Never 16 / 9. */
  scroll-snap-align: start;
  transition: transform .25s ease, box-shadow .25s ease;
}
.vidcard:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,.24); }

/* YouTube's hqdefault is 4:3 with the Short letterboxed inside it, so the
   thumbnail is scaled up and centre-cropped to fill the vertical card. */
.vidcard-thumb {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; transform: scale(1.42);
  opacity: .9; transition: opacity .25s ease;
}
.vidcard:hover .vidcard-thumb { opacity: 1; }

.vidcard-play {
  position: absolute; inset: 0; margin: auto;
  width: 54px; height: 54px; border-radius: 50%;
  background: rgba(74,124,47,.92); display: grid; place-items: center;
  transition: transform .25s ease, background .25s ease;
}
.vidcard:hover .vidcard-play { transform: scale(1.08); background: var(--green); }
.vidcard-play svg { width: 26px; height: 26px; fill: #fff; margin-left: 2px; }

.vidcard-cap {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 2;
  padding: 2.2rem .9rem .8rem;
  background: linear-gradient(transparent, rgba(0,0,0,.78));
  font-family: var(--sans); font-size: .72rem; font-weight: 300; line-height: 1.45;
  color: rgba(255,255,255,.92); text-align: left;
}
.vidcard.is-playing .vidcard-play,
.vidcard.is-playing .vidcard-cap,
.vidcard.is-playing .vidcard-thumb { display: none; }
.vidcard iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

@media (max-width: 900px) {
  .vidstrip { padding: 3.2rem 1.2rem; }
  .vidstrip-rail { grid-auto-columns: minmax(168px, 1fr); }
  .vidstrip-head .section-headline { font-size: 1.7rem; }
}

/* --------------------------------------------------------------------------
   CONSULTATION PAGE
   -------------------------------------------------------------------------- */

#c-hero {
  position: relative; background: var(--dark); padding: 9rem 4rem 5rem; overflow: hidden;
}
#c-hero::before {
  content: ""; position: absolute; inset: 0;
  background: var(--hero-img) center 30% / cover no-repeat;
  opacity: .22; filter: grayscale(.4);
}
#c-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(28,28,26,.94) 0%, rgba(28,28,26,.74) 58%, rgba(28,28,26,.5) 100%);
}
.c-hero-in { position: relative; z-index: 2; max-width: 720px; }
#c-hero .section-headline { font-size: clamp(2.4rem, 5.2vw, 4rem); line-height: 1.1; }
#c-hero .section-label { color: rgba(255,255,255,.45); display: flex; align-items: center; gap: .7rem; }
#c-hero .section-headline { color: var(--white); margin: .6rem 0 1.3rem; }
#c-hero .section-headline em { color: var(--gold); font-style: italic; }
.c-hero-sub {
  font-family: var(--sans); font-size: .92rem; font-weight: 300; line-height: 1.85;
  color: rgba(255,255,255,.62); max-width: 540px; margin-bottom: 2rem;
}
.c-hero-cta { display: flex; flex-wrap: wrap; gap: .7rem; margin-bottom: 2.2rem; }
.t-go--ghost { background: none; color: var(--white); border-color: rgba(255,255,255,.35); }
.t-go--ghost:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.6); }
.c-hero-price {
  display: flex; align-items: baseline; gap: 1rem; flex-wrap: wrap;
  padding: 1.1rem 1.6rem; max-width: 520px;
  border-left: 2px solid var(--gold); border-radius: 0 3px 3px 0;
  background: rgba(184,150,90,.09);
}
.c-hero-price strong {
  font-family: var(--sans); font-size: 1.75rem; font-weight: 500;
  color: var(--white); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.c-hero-price span {
  font-family: var(--sans); font-size: .68rem; font-weight: 300;
  letter-spacing: .1em; text-transform: uppercase; color: var(--gold);
}

/* ---- the chooser, one section rather than six cards ---- */
#c-choose { background: var(--off); padding: 5rem 4rem; }
.c-pick {
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 3.5rem;
  align-items: center; max-width: 1100px; margin: 0 auto;
}
.c-pick-copy .section-label { display: flex; align-items: center; gap: .7rem; }
.c-pick-copy .section-headline { font-size: 2.1rem; margin: .7rem 0 .9rem; }
.c-pick-copy .section-headline em { color: var(--gold); font-style: italic; }
.c-pick-sub {
  font-family: var(--sans); font-size: .88rem; font-weight: 300; line-height: 1.8; color: var(--mid);
}
.c-pick-note {
  margin-top: 1.1rem; padding: .9rem 1.1rem;
  background: rgba(74,124,47,.07); border-left: 2px solid var(--green); border-radius: 2px;
  font-family: var(--sans); font-size: .82rem; font-weight: 300; line-height: 1.7; color: var(--mid);
}
.c-pick-note:empty { display: none; }

.c-pick-box {
  background: var(--white); border: 1px solid rgba(0,0,0,.09);
  border-top: 3px solid var(--green); border-radius: 3px; padding: 2rem 1.8rem;
  box-shadow: 0 14px 38px rgba(0,0,0,.06);
}
.c-pick-box label {
  display: block; margin-bottom: .5rem;
  font-family: var(--sans); font-size: .66rem; font-weight: 500;
  letter-spacing: .18em; text-transform: uppercase; color: var(--light);
}
.c-pick-box select {
  width: 100%; padding: .95rem 1rem;
  font-family: var(--sans); font-size: .95rem; font-weight: 300; color: var(--dark);
  background: var(--off); border: 1px solid rgba(0,0,0,.16); border-radius: 2px;
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--light) 50%),
                    linear-gradient(135deg, var(--light) 50%, transparent 50%);
  background-position: calc(100% - 20px) 50%, calc(100% - 15px) 50%;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
}
.c-pick-price { margin: 1.3rem 0; }
.c-pick-price strong {
  display: block; font-family: var(--sans); font-size: 1.9rem; font-weight: 500;
  color: var(--dark); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.c-pick-price span {
  display: block; margin-top: .25rem;
  font-family: var(--sans); font-size: .68rem; font-weight: 300;
  letter-spacing: .08em; color: var(--light);
}
.c-pick-box .t-go { width: 100%; }
.c-pick-wa {
  display: block; text-align: center; margin-top: .9rem;
  font-family: var(--sans); font-size: .76rem; font-weight: 300;
  color: var(--green); text-decoration: underline;
}

/* ---- what makes this different ---- */
#c-diff {
  background: var(--white); padding: 5.5rem 4rem;
  display: grid; grid-template-columns: 1fr 1.1fr; gap: 3.5rem; align-items: center;
}
.c-diff-img img {
  width: 100%; border: 14px solid var(--white); border-radius: 2px;
  box-shadow: 0 18px 44px rgba(0,0,0,.16); transform: rotate(-2.5deg);
}
.c-diff-copy .section-label { display: flex; align-items: center; gap: .7rem; }
.c-diff-copy .section-headline { font-size: 2rem; margin: .7rem 0 1.1rem; }
.c-diff-copy .section-headline em { color: var(--gold); font-style: italic; }
.c-diff-copy p {
  font-family: var(--sans); font-size: .87rem; font-weight: 300; line-height: 1.85;
  color: var(--mid); margin-bottom: .9rem; max-width: 62ch;
}
.c-diff-copy p em { font-style: italic; color: var(--dark); }
.c-diff-kicker {
  font-family: var(--serif) !important; font-size: 1.22rem !important;
  font-style: italic; color: var(--dark) !important; margin-top: 1.2rem !important;
}

/* ---- step by step ---- */
#c-walk {
  background: var(--cream); padding: 5.5rem 4rem;
  display: grid; grid-template-columns: 1.25fr .75fr; gap: 3.5rem; align-items: start;
}
.c-walk-copy .section-label { display: flex; align-items: center; gap: .7rem; }
.c-walk-copy .section-headline { font-size: 2rem; margin: .7rem 0 2rem; }
.c-walk-copy .section-headline em { color: var(--gold); font-style: italic; }
.c-walk-item {
  display: flex; gap: 1.2rem; align-items: flex-start;
  padding: 1.1rem 0; border-top: 1px solid rgba(0,0,0,.1);
}
.c-walk-n {
  font-family: var(--serif); font-weight: 300; font-size: 1.7rem; line-height: 1;
  color: rgba(184,150,90,.5); min-width: 44px; flex-shrink: 0;
}
.c-walk-item h3 { font-family: var(--serif); font-size: 1.08rem; font-weight: 600; color: var(--dark); margin-bottom: .3rem; }
.c-walk-item p { font-family: var(--sans); font-size: .82rem; font-weight: 300; line-height: 1.75; color: var(--mid); max-width: 64ch; }
.c-walk-img { position: sticky; top: 2rem; }
.c-walk-img img { width: 100%; border-radius: 3px; }

/* ---- same chair ---- */
#c-chair { background: var(--off); padding: 5rem 4rem; }
.c-chair-head { max-width: 640px; margin-bottom: 2rem; }
.c-chair-head .section-label { display: flex; align-items: center; gap: .7rem; }
.c-chair-head .section-headline { font-size: 1.95rem; margin: .7rem 0 .8rem; }
.c-chair-head .section-headline em { color: var(--gold); font-style: italic; }
.c-chair-note { font-family: var(--sans); font-size: .72rem; font-weight: 300; font-style: italic; color: var(--light); }
.c-chair-strip { display: grid; grid-template-columns: repeat(5,1fr); gap: .5rem; }
.c-chair-card { position: relative; margin: 0; overflow: hidden; border-radius: 2px; }
.c-chair-card img { width: 100%; aspect-ratio: 4/5; object-fit: cover; display: block; }
.c-chair-card figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.6rem .7rem .6rem;
  background: linear-gradient(transparent, rgba(0,0,0,.72));
  font-family: var(--sans); font-size: .58rem; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.92);
}

/* ---- golden ratio ---- */
#c-ratio {
  position: relative; background: var(--dark); padding: 5.5rem 4rem; overflow: hidden;
  display: grid; grid-template-columns: 1.2fr .8fr; gap: 3rem; align-items: center;
}
.c-ratio-copy .section-label { color: rgba(255,255,255,.4); display: flex; align-items: center; gap: .7rem; }
.c-ratio-copy .section-headline { color: var(--white); font-size: 2rem; margin: .7rem 0 1.1rem; }
.c-ratio-copy .section-headline em { color: var(--gold); font-style: italic; }
.c-ratio-copy p {
  font-family: var(--sans); font-size: .87rem; font-weight: 300; line-height: 1.85;
  color: rgba(255,255,255,.58); margin-bottom: .9rem; max-width: 62ch;
}
.c-ratio-kicker {
  font-family: var(--serif) !important; font-size: 1.22rem !important; font-style: italic;
  color: var(--gold) !important; margin-top: 1.3rem !important;
}
.c-ratio-phi {
  font-family: var(--serif); font-size: 16rem; line-height: 1; font-weight: 300;
  color: rgba(184,150,90,.14); text-align: center; user-select: none;
}

@media (max-width: 1000px) {
  .c-pick, #c-diff, #c-walk, #c-ratio { grid-template-columns: 1fr; gap: 2.2rem; }
  .c-walk-img { position: static; }
  .c-ratio-phi { display: none; }
  .c-chair-strip { grid-template-columns: repeat(3,1fr); }
}
@media (max-width: 900px) {
  #c-choose, #c-diff, #c-walk, #c-chair, #c-ratio { padding: 3.4rem 1.4rem; }
  .c-chair-strip { grid-template-columns: 1fr 1fr; }
  .c-diff-img img { border-width: 10px; }
}

#c-hour { background: var(--white); padding: 5.5rem 4rem; }
.c-steps { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; }
.c-step {
  display: block; padding: 2rem 1.7rem; border-bottom: 0;
  background: var(--off); border-radius: 3px; border-top: 2px solid var(--gold);
}
.c-step-n { display: block; margin-bottom: .8rem; min-width: 0; font-size: 2.6rem; }
@media (max-width: 900px) { .c-steps { grid-template-columns: 1fr; } }
.c-hour-head { max-width: 640px; margin-bottom: 2.4rem; }
.c-hour-head .section-headline { font-size: 2.1rem; margin-top: .7rem; }
.c-hour-head .section-headline em { color: var(--gold); font-style: italic; }

.c-steps { display: grid; gap: 1.6rem; margin-bottom: 2.4rem; }
.c-step { display: flex; gap: 1.4rem; align-items: flex-start; padding-bottom: 1.6rem; border-bottom: 1px solid rgba(0,0,0,.07); }
.c-step:last-child { border-bottom: 0; }
.c-step-n {
  font-family: var(--serif); font-weight: 300; font-size: 2.2rem; line-height: 1;
  color: rgba(184,150,90,.45); flex-shrink: 0; min-width: 56px;
}
.c-step h3 { font-family: var(--serif); font-size: 1.2rem; font-weight: 500; color: var(--dark); margin-bottom: .4rem; }
.c-step p { font-family: var(--sans); font-size: .85rem; font-weight: 300; line-height: 1.8; color: var(--mid); max-width: 66ch; }

.c-credit {
  background: rgba(74,124,47,.08); border-left: 2px solid var(--green);
  border-radius: 3px; padding: 1.8rem 2rem; max-width: 760px;
}
.c-credit h3 { font-family: var(--serif); font-size: 1.25rem; font-weight: 500; color: var(--dark); margin-bottom: .55rem; }
.c-credit p { font-family: var(--sans); font-size: .85rem; font-weight: 300; line-height: 1.8; color: var(--mid); }

#c-faq { background: var(--white); padding: 5.5rem 4rem; }
#c-faq .faq-list { max-width: 900px; }
#c-faq .faq-item { border-top-color: rgba(0,0,0,.08); }
#c-faq .faq-header { max-width: 560px; margin-bottom: 2.4rem; }
#c-faq .faq-header .section-headline { font-size: 2.1rem; margin-top: .7rem; }
#c-faq .faq-header .section-headline em { color: var(--gold); font-style: italic; }

#c-close { background: var(--cream); padding: 5.5rem 4rem; text-align: center; }
#c-close .section-label { color: var(--green); justify-content: center; display: flex; align-items: center; gap: .7rem; }
#c-close .section-headline { color: var(--dark); margin: .8rem 0 1rem; font-size: 2.2rem; }
#c-close .section-headline em { color: var(--gold); font-style: italic; }
.c-close-sub {
  font-family: var(--sans); font-size: .86rem; font-weight: 300; line-height: 1.8;
  color: var(--mid); max-width: 48ch; margin: 0 auto 1.8rem;
}
#c-close .t-go--light { background: var(--green); color: var(--white); }
#c-close .t-go--light:hover { background: var(--green2); }
.c-close-cta { display: flex; flex-wrap: wrap; justify-content: center; gap: .7rem; }

@media (max-width: 1000px) { .c-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 900px) {
  #c-hero { padding: 5.5rem 1.4rem 3.5rem; }
  #c-choose, #c-hour, #c-faq, #c-close { padding: 3.4rem 1.4rem; }
  .c-grid { grid-template-columns: 1fr; }
  .c-step { gap: .9rem; }
  .c-step-n { font-size: 1.7rem; min-width: 40px; }
  .c-close-cta .t-go { width: 100%; }
}

/* --------------------------------------------------------------------------
   MED SPA PAGE
   Reuses the treatments panel and row components. Only what is particular to
   this page is defined here.
   -------------------------------------------------------------------------- */

#m-hero { position: relative; background: var(--dark); padding: 9rem 4rem 5.5rem; overflow: hidden; }
#m-hero::before {
  content: ""; position: absolute; inset: 0;
  background: var(--hero-img) center 30% / cover no-repeat;
  opacity: .24; filter: grayscale(.4);
}
#m-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(28,28,26,.93) 0%, rgba(28,28,26,.72) 58%, rgba(28,28,26,.45) 100%);
}
.m-hero-in { position: relative; z-index: 2; max-width: 680px; }
#m-hero .section-label { color: rgba(255,255,255,.45); display: flex; align-items: center; gap: .7rem; }
#m-hero .section-headline { color: var(--white); font-size: clamp(2.4rem,5vw,3.6rem); line-height: 1.1; margin: .6rem 0 1.3rem; }
#m-hero .section-headline em { color: var(--gold); font-style: italic; }
.m-hero-sub {
  font-family: var(--sans); font-size: .93rem; font-weight: 300; line-height: 1.85;
  color: rgba(255,255,255,.62); max-width: 540px; margin-bottom: 2rem;
}

#m-listen {
  background: var(--white); padding: 5.5rem 4rem;
  display: grid; grid-template-columns: 1.35fr .65fr; gap: 3.5rem; align-items: start;
}
.m-listen-copy .section-label { display: flex; align-items: center; gap: .7rem; }
.m-listen-copy .section-headline { font-size: 2.1rem; margin: .7rem 0 1.2rem; }
.m-listen-copy .section-headline em { color: var(--gold); font-style: italic; }
.m-listen-copy p {
  font-family: var(--sans); font-size: .87rem; font-weight: 300; line-height: 1.9;
  color: var(--mid); margin-bottom: 1rem; max-width: 64ch;
}
.m-kicker {
  font-family: var(--serif) !important; font-size: 1.2rem !important; font-style: italic;
  color: var(--dark) !important; line-height: 1.55 !important; margin-top: 1.4rem !important;
}
.m-quote {
  background: var(--cream); border-left: 2px solid var(--gold);
  border-radius: 0 3px 3px 0; padding: 1.8rem; margin: 0; position: sticky; top: 2rem;
}
.m-quote p {
  font-family: var(--serif); font-size: 1.08rem; font-style: italic; line-height: 1.7;
  color: var(--dark); margin-bottom: 1rem;
}
.m-quote cite {
  font-family: var(--sans); font-size: .64rem; font-style: normal;
  letter-spacing: .16em; text-transform: uppercase; color: var(--light);
}

#m-approach { background: var(--off); padding: 4.5rem 4rem; text-align: center; }
#m-approach .section-headline { font-size: 2.1rem; margin: .7rem auto 1.4rem; }
#m-approach .section-headline em { color: var(--gold); font-style: italic; }
.m-approach-body { max-width: 720px; margin: 0 auto; }
.m-approach-body p {
  font-family: var(--sans); font-size: .87rem; font-weight: 300; line-height: 1.9;
  color: var(--mid); margin-bottom: 1rem;
}

.m-group-head {
  display: flex; gap: 1.2rem; align-items: flex-start;
  padding: 0 0 1.1rem; margin-bottom: 1.1rem;
  border-bottom: 1px solid var(--accent);
}
.m-group-n {
  font-family: var(--serif); font-weight: 300; font-size: 2.4rem; line-height: 1;
  color: var(--accent); opacity: .45; flex-shrink: 0;
}
.m-group-head h2 {
  font-family: var(--serif); font-weight: 400; font-size: 1.55rem;
  color: var(--head); margin-bottom: .35rem;
}
.m-group-head > div > p {
  font-family: var(--sans); font-size: .8rem; font-weight: 300; line-height: 1.75;
  color: var(--mid); max-width: 72ch;
}
.m-group-head .t-panel-count { flex-shrink: 0; margin-left: auto; }

#m-oversight {
  background: var(--cream); padding: 5.5rem 4rem;
  display: grid; grid-template-columns: 1.15fr .85fr; gap: 3.5rem; align-items: center;
}
.m-over-copy .section-label { display: flex; align-items: center; gap: .7rem; }
.m-over-copy .section-headline { font-size: 2.1rem; margin: .7rem 0 1.1rem; }
.m-over-copy .section-headline em { color: var(--gold); font-style: italic; }
.m-over-copy p {
  font-family: var(--sans); font-size: .87rem; font-weight: 300; line-height: 1.9;
  color: var(--mid); margin-bottom: 1rem; max-width: 62ch;
}
.m-gigi {
  background: var(--white); border-left: 2px solid var(--green);
  border-radius: 0 3px 3px 0; padding: 1.6rem 1.8rem; margin: 1.8rem 0;
}
.m-gigi p {
  font-family: var(--serif) !important; font-size: 1.12rem !important; font-style: italic;
  color: var(--dark) !important; line-height: 1.7 !important; margin-bottom: .9rem !important;
}
.m-gigi cite {
  display: block; font-family: var(--serif); font-style: italic; font-size: 1rem; color: var(--dark);
}
.m-gigi cite span {
  display: block; margin-top: .25rem;
  font-family: var(--sans); font-size: .62rem; font-style: normal;
  letter-spacing: .14em; text-transform: uppercase; color: var(--green);
}
.m-over-img img { width: 100%; border-radius: 3px; }

#m-faq { background: var(--white); padding: 5.5rem 4rem; }
#m-faq .faq-header { max-width: 560px; margin-bottom: 2.2rem; }
#m-faq .faq-header .section-label { display: flex; align-items: center; gap: .7rem; }
#m-faq .faq-header .section-headline { font-size: 2.1rem; margin: .7rem 0 .8rem; }
#m-faq .faq-header .section-headline em { color: var(--gold); font-style: italic; }
#m-faq .faq-header p { font-family: var(--sans); font-size: .85rem; font-weight: 300; color: var(--mid); }
#m-faq .faq-list { max-width: 900px; }

@media (max-width: 1000px) {
  #m-listen, #m-oversight { grid-template-columns: 1fr; gap: 2.2rem; }
  .m-quote { position: static; }
}
@media (max-width: 900px) {
  #m-hero { padding: 5.5rem 1.4rem 3.5rem; }
  #m-listen, #m-approach, #m-oversight, #m-faq { padding: 3.4rem 1.4rem; }
  .m-group-head { flex-wrap: wrap; gap: .7rem; }
  .m-group-n { font-size: 1.8rem; }
}

/* --------------------------------------------------------------------------
   REVIEWS PAGE
   -------------------------------------------------------------------------- */

#r-hero { position: relative; background: var(--dark); padding: 9rem 4rem 4rem; overflow: hidden; }
#r-hero::before {
  content: ""; position: absolute; inset: 0;
  background: var(--hero-img) center 28% / cover no-repeat; opacity: .2; filter: grayscale(.45);
}
#r-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(28,28,26,.94) 0%, rgba(28,28,26,.76) 60%, rgba(28,28,26,.5) 100%);
}
.r-hero-in { position: relative; z-index: 2; max-width: 780px; }
#r-hero .section-label { color: rgba(255,255,255,.45); display: flex; align-items: center; gap: .7rem; }
#r-hero .section-headline { color: var(--white); font-size: clamp(2.3rem,4.8vw,3.4rem); line-height: 1.12; margin: .6rem 0 1.2rem; }
#r-hero .section-headline em { color: var(--gold); font-style: italic; }
.r-hero-sub {
  font-family: var(--sans); font-size: .9rem; font-weight: 300; line-height: 1.85;
  color: rgba(255,255,255,.6); max-width: 600px; margin-bottom: 2.4rem;
}
.r-stats { display: grid; grid-template-columns: repeat(4,1fr); gap: 1rem; max-width: 640px; }
.r-stat { border-left: 1px solid rgba(184,150,90,.4); padding-left: 1rem; }
.r-stat strong {
  display: block; font-family: var(--serif); font-size: 1.9rem; font-weight: 300;
  color: var(--gold); line-height: 1;
}
.r-stat span {
  display: block; margin-top: .3rem;
  font-family: var(--sans); font-size: .6rem; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.45);
}

.r-head { max-width: 620px; margin-bottom: 2.2rem; }
.r-head .section-label { display: flex; align-items: center; gap: .7rem; }
.r-head .section-headline { font-size: 2.1rem; margin: .7rem 0 .8rem; }
.r-head .section-headline em { color: var(--gold); font-style: italic; }
.r-head p { font-family: var(--sans); font-size: .85rem; font-weight: 300; line-height: 1.8; color: var(--mid); }

#r-video { background: var(--white); padding: 5rem 4rem 4rem; }
#r-video .vidstrip { background: transparent; padding: 0 0 2.5rem; }
#r-video .vidstrip-head { display: none; }

/* 21 videos is too many for one sideways rail, so this one wraps into a grid
   and the cards come down in size. */
#r-video .vidstrip-rail {
  grid-auto-flow: row;
  grid-template-columns: repeat(7, 1fr);
  overflow-x: visible;
  gap: .7rem;
}
@media (max-width: 1400px) { #r-video .vidstrip-rail { grid-template-columns: repeat(6,1fr); } }
@media (max-width: 1200px) { #r-video .vidstrip-rail { grid-template-columns: repeat(5,1fr); } }
@media (max-width: 1000px) { #r-video .vidstrip-rail { grid-template-columns: repeat(4,1fr); } }
@media (max-width: 760px)  { #r-video .vidstrip-rail { grid-template-columns: repeat(3,1fr); } }
@media (max-width: 480px)  { #r-video .vidstrip-rail { grid-template-columns: repeat(2,1fr); } }
#r-video .vidcard-cap { font-size: .62rem; padding: 1.6rem .6rem .6rem; }
#r-video .vidcard-play { width: 40px; height: 40px; }
#r-video .vidcard-play svg { width: 19px; height: 19px; }

.r-vquotes { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.r-vquote {
  margin: 0; padding: 1.5rem 1.6rem; background: var(--off);
  border-left: 2px solid var(--gold); border-radius: 0 3px 3px 0;
}
.r-vquote p {
  font-family: var(--serif); font-size: 1rem; font-style: italic; line-height: 1.7;
  color: var(--dark); margin-bottom: .9rem;
}
.r-vquote cite {
  display: block; font-family: var(--sans); font-size: .76rem; font-style: normal;
  font-weight: 500; color: var(--dark);
}
.r-vquote cite span {
  display: block; margin-top: .2rem;
  font-size: .6rem; font-weight: 300; letter-spacing: .12em;
  text-transform: uppercase; color: var(--light);
}

#r-ba { background: var(--off); padding: 5rem 4rem; }
.r-ba-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 1rem; }
.r-ba-card { margin: 0; background: var(--white); border-radius: 3px; overflow: hidden; border: 1px solid rgba(0,0,0,.07); }
.r-ba-card img { width: 100%; aspect-ratio: 16/10; object-fit: cover; display: block; }
.r-ba-card figcaption { padding: 1.1rem 1.3rem 1.4rem; }
.r-ba-card strong {
  display: block; font-family: var(--serif); font-size: 1.1rem; font-weight: 600; color: var(--dark);
}
.r-ba-card span {
  display: block; margin: .15rem 0 .7rem;
  font-family: var(--sans); font-size: .62rem; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--gold);
}
.r-ba-card q {
  display: block; font-family: var(--serif); font-size: .95rem; font-style: italic;
  line-height: 1.65; color: var(--mid); quotes: none;
}
.r-ba-note {
  margin-top: 1.4rem; text-align: center;
  font-family: var(--sans); font-size: .72rem; font-weight: 300; font-style: italic; color: var(--light);
}

#r-written { background: var(--white); padding: 5rem 4rem; }
.r-wall { columns: 3; column-gap: 1rem; }
.r-card {
  break-inside: avoid; margin-bottom: 1rem; padding: 1.5rem 1.6rem;
  background: var(--off); border-radius: 3px; border-top: 2px solid var(--green);
}
.r-card-top { display: flex; align-items: center; gap: .8rem; margin-bottom: .7rem; }
.r-avatar {
  display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%;
  background: var(--green); color: var(--white); flex-shrink: 0;
  font-family: var(--sans); font-size: .72rem; font-weight: 500; letter-spacing: .04em;
}
.r-card-top strong { display: block; font-family: var(--sans); font-size: .85rem; font-weight: 500; color: var(--dark); }
.r-card-top span {
  display: block; font-family: var(--sans); font-size: .6rem; font-weight: 300;
  letter-spacing: .1em; text-transform: uppercase; color: var(--light);
}
.r-card-stars { color: var(--gold); font-size: .8rem; letter-spacing: .12em; margin-bottom: .55rem; }
.r-card-text { font-family: var(--serif); font-size: 1rem; font-style: italic; line-height: 1.7; color: var(--mid); }

#r-rating { background: var(--cream); padding: 5rem 4rem; }
#r-rating .section-headline { font-size: 2.1rem; margin: .7rem 0 2.2rem; }
#r-rating .section-headline em { color: var(--gold); font-style: italic; }
.r-rating-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 1rem; max-width: 980px; margin: 0 auto; }
.r-rating-big, .r-rating-cell {
  background: var(--white); border-radius: 3px; padding: 1.8rem 1.4rem; text-align: center;
}
.r-rating-big strong { display: block; font-family: var(--serif); font-size: 3.4rem; font-weight: 300; color: var(--green); line-height: 1; }
.r-rating-stars { display: block; color: var(--gold); font-size: 1rem; letter-spacing: .2em; margin: .5rem 0 .3rem; }
.r-rating-lbl, .r-rating-cell span {
  display: block; font-family: var(--sans); font-size: .6rem; font-weight: 400;
  letter-spacing: .14em; text-transform: uppercase; color: var(--light);
}
.r-rating-cell strong { display: block; font-family: var(--serif); font-size: 2.1rem; font-weight: 300; color: var(--dark); line-height: 1; margin-bottom: .5rem; }

.r-close-price { margin: 0 auto 1.6rem; }
.r-close-price strong {
  display: block; font-family: var(--sans); font-size: 1.8rem; font-weight: 500;
  color: var(--dark); letter-spacing: -.02em; font-variant-numeric: tabular-nums;
}
.r-close-price span {
  display: block; margin-top: .25rem;
  font-family: var(--sans); font-size: .66rem; font-weight: 300;
  letter-spacing: .1em; text-transform: uppercase; color: var(--green);
}

@media (max-width: 1000px) {
  .r-stats { grid-template-columns: 1fr 1fr; }
  .r-vquotes, .r-ba-grid { grid-template-columns: 1fr 1fr; }
  .r-wall { columns: 2; }
  .r-rating-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  #r-hero { padding: 5.5rem 1.4rem 3rem; }
  #r-video, #r-ba, #r-written, #r-rating { padding: 3.4rem 1.4rem; }
  .r-vquotes, .r-ba-grid { grid-template-columns: 1fr; }
  .r-wall { columns: 1; }
}

/* --------------------------------------------------------------------------
   SECTION JUMP BAR
   Used on the reviews page. These rules existed for the old treatments layout
   and were removed with it when that page moved to filter pills, leaving the
   reviews bar as unstyled browser links.

   It is a div, not a nav. The design system pins every bare nav element to the
   top of the viewport, which would park this over the hero.
   -------------------------------------------------------------------------- */

.t-jump {
  position: static; z-index: auto; padding: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  background: var(--white); border-bottom: 1px solid rgba(0,0,0,.07);
}
.t-jump a {
  padding: 1.1rem .5rem; text-align: center; text-decoration: none;
  font-family: var(--sans); font-size: .66rem; font-weight: 400;
  letter-spacing: .18em; text-transform: uppercase; color: var(--mid);
  border-right: 1px solid rgba(0,0,0,.06);
  transition: color .2s ease, background .2s ease;
}
.t-jump a:last-child { border-right: 0; }
.t-jump a:hover { color: var(--green); background: var(--off); }

@media (max-width: 900px) {
  .t-jump { grid-template-columns: 1fr 1fr; }
  .t-jump a:nth-child(2) { border-right: 0; }
  .t-jump a:nth-child(-n+2) { border-bottom: 1px solid rgba(0,0,0,.06); }
  .t-jump a { padding: .9rem .4rem; font-size: .6rem; }
}

/* --------------------------------------------------------------------------
   FAQ AND LEGAL PAGES
   Both run a contents rail beside the body. On the FAQ the rail sticks, since
   73 questions is a long scroll and losing your place in it is the problem the
   rail exists to solve.
   -------------------------------------------------------------------------- */

#q-hero, #l-hero { position: relative; background: var(--dark); padding: 8rem 4rem 4rem; overflow: hidden; }
#q-hero::before, #l-hero::before {
  content: ""; position: absolute; inset: 0;
  background: var(--hero-img) center 30% / cover no-repeat; opacity: .18; filter: grayscale(.5);
}
#q-hero::after, #l-hero::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(28,28,26,.95) 0%, rgba(28,28,26,.78) 60%, rgba(28,28,26,.55) 100%);
}
.q-hero-in, .l-hero-in { position: relative; z-index: 2; max-width: 720px; }
#q-hero .section-label, #l-hero .section-label { color: rgba(255,255,255,.45); display: flex; align-items: center; gap: .7rem; }
#q-hero .section-headline, #l-hero .section-headline {
  color: var(--white); font-size: clamp(2.1rem,4.4vw,3.1rem); line-height: 1.14; margin: .6rem 0 1.1rem;
}
#q-hero .section-headline em, #l-hero .section-headline em { color: var(--gold); font-style: italic; }
.q-hero-sub, .l-hero-sub {
  font-family: var(--sans); font-size: .9rem; font-weight: 300; line-height: 1.8;
  color: rgba(255,255,255,.6); max-width: 560px;
}

#q-find {
  background: var(--white); border-bottom: 1px solid rgba(0,0,0,.07);
  padding: 2.2rem 4rem 1.4rem; text-align: center;
}

.q-body {
  background: var(--white); padding: 3rem 4rem 5rem;
  display: grid; grid-template-columns: 260px 1fr; gap: 3rem; align-items: start;
}
.q-side { position: sticky; top: 2rem; }
.q-side-lbl {
  font-family: var(--sans); font-size: .62rem; font-weight: 500;
  letter-spacing: .2em; text-transform: uppercase; color: var(--light); margin-bottom: .8rem;
}
/* A div, not a nav. The design system pins every bare nav element to the
   viewport with position: fixed, which had this rail floating over the page
   instead of sitting in its column. These also reset anything that leaks in. */
.q-side-nav {
  position: static; z-index: auto; padding: 0;
  display: flex; flex-direction: column;
}
.q-side-nav a {
  display: flex; justify-content: space-between; align-items: center; gap: .6rem;
  padding: .7rem .8rem; border-left: 2px solid rgba(0,0,0,.08);
  font-family: var(--sans); font-size: .78rem; font-weight: 300;
  color: var(--mid); text-decoration: none; transition: all .2s ease;
}
.q-side-nav a:hover { border-left-color: var(--green); color: var(--green); background: var(--off); }
.q-side-nav a span {
  font-size: .6rem; font-weight: 400; color: var(--light);
  border: 1px solid rgba(0,0,0,.1); border-radius: 100px; padding: .1rem .45rem;
}

/* These are <section> elements, so they inherit the design system's
   section { padding: 7rem 4rem }. Reset it. */
.q-group, .l-section { padding: 0; }
.q-group { margin-bottom: 2.6rem; }
.q-group[hidden] { display: none; }
.q-group-title {
  font-family: var(--serif); font-size: 1.5rem; font-weight: 500; color: var(--dark);
  padding-bottom: .7rem; margin-bottom: .4rem;
  border-bottom: 2px solid var(--gold);
}
.q-main .faq-item[hidden] { display: none; }
.q-main .faq-question h4 { font-size: 1.02rem; }

/* legal */
.l-main { max-width: 900px; }
.l-section { margin-bottom: 3rem; }
.l-title {
  display: flex; align-items: baseline; gap: .9rem;
  font-family: var(--serif); font-size: 1.6rem; font-weight: 500; color: var(--dark);
  padding-bottom: .7rem; margin-bottom: 1.4rem;
  border-bottom: 2px solid var(--gold);
}
.l-num { font-family: var(--serif); font-weight: 300; font-size: 1.5rem; color: rgba(184,150,90,.6); }
.l-clause { margin-bottom: 1.5rem; }
.l-clause h3 {
  font-family: var(--sans); font-size: .82rem; font-weight: 500;
  letter-spacing: .04em; color: var(--dark); margin-bottom: .4rem;
}
.l-clause p {
  font-family: var(--sans); font-size: .85rem; font-weight: 300; line-height: 1.85;
  color: var(--mid); max-width: 76ch;
}
.l-contact {
  background: var(--off); border-left: 2px solid var(--green);
  border-radius: 0 3px 3px 0; padding: 1.6rem 1.8rem; margin-top: 2rem;
}
.l-contact h3 { font-family: var(--serif); font-size: 1.15rem; font-weight: 500; color: var(--dark); margin-bottom: .5rem; }
.l-contact p { font-family: var(--sans); font-size: .84rem; font-weight: 300; line-height: 1.85; color: var(--mid); }
.l-contact a { color: var(--green); }

@media (max-width: 1000px) {
  .q-body { grid-template-columns: 1fr; gap: 1.6rem; }
  .q-side { position: static; }
  .q-side nav { flex-direction: row; flex-wrap: wrap; gap: .4rem; }
  .q-side-nav a { border-left: 0; border: 1px solid rgba(0,0,0,.12); border-radius: 100px; padding: .5rem .9rem; font-size: .7rem; }
}
@media (max-width: 900px) {
  #q-hero, #l-hero { padding: 5.5rem 1.4rem 3rem; }
  #q-find { padding: 1.8rem 1.2rem 1.1rem; }
  .q-body { padding: 2rem 1.4rem 3.5rem; }
  .q-group-title, .l-title { font-size: 1.3rem; }
}

/* --------------------------------------------------------------------------
   ARMOUR
   Plugins on this install inject their own colours into buttons and
   accordions, and a header and footer builder replaces the theme's own. These
   rules make the theme's components win regardless.

   Specificity here is deliberate, not accidental. Each selector is tied to a
   component this theme owns, so nothing leaks into Elementor pages.
   -------------------------------------------------------------------------- */

/* Buttons. The crimson was a plugin styling every button on the site. */
.btn-green,
.t-go,
.t-add,
.vbar-sum,
.faq-question,
.t-pill,
.vidcard,
.vtray-x,
.burger {
  outline: none;
  box-shadow: none;
}
.btn-green:focus-visible,
.t-go:focus-visible,
.t-add:focus-visible,
.faq-question:focus-visible,
.t-pill:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.btn-green,
a.btn-green,
button.btn-green {
  background: var(--green) !important;
  border-color: var(--green) !important;
  color: var(--white) !important;
}
.btn-green:hover,
a.btn-green:hover,
button.btn-green:hover {
  background: var(--green2) !important;
  border-color: var(--green2) !important;
  color: var(--white) !important;
}

.t-go--green { background: var(--accent, var(--green)) !important; color: var(--white) !important; }
.t-go--gold  { background: none !important; color: var(--gold) !important; }
.t-go--light { background: var(--white) !important; color: var(--green) !important; }
.t-go--wa    { background: #2aa84a !important; color: var(--white) !important; }

/* The FAQ accordion. The rows were turning crimson on hover. */
.faq-item,
.faq-question,
.faq-question:hover,
.faq-question:focus,
.faq-question[aria-expanded="true"] {
  background: transparent !important;
  color: inherit !important;
}
.faq-question:hover h4 { color: var(--green) !important; }
.faq-question h4 { color: var(--dark) !important; }
.faq-icon { color: var(--green) !important; }

/* The visit bar and the tray. */
.vbar { background: var(--white) !important; }
.vbar-sum { background: var(--off) !important; color: var(--mid) !important; }

/* Treatment rows. */
.t-item { background: var(--white) !important; }
.t-item--gated .t-item-name { color: var(--head) !important; }

/* --------------------------------------------------------------------------
   CART AND CHECKOUT
   WooCommerce's default markup, dressed to match the rest of the site.
   Nothing here changes behaviour, only appearance.
   -------------------------------------------------------------------------- */

.woocommerce, .woocommerce-page { background: var(--off); }
.blu-wp-content {
  max-width: 1080px; margin: 0 auto; padding: 4.5rem 2rem 6rem;
}
.woocommerce-cart .blu-wp-content,
.woocommerce-checkout .blu-wp-content { max-width: 1000px; }

/* headings */
.woocommerce h2, .woocommerce h3,
.woocommerce-billing-fields h3,
#order_review_heading {
  font-family: var(--serif) !important; font-weight: 500 !important;
  font-size: 1.5rem !important; letter-spacing: -.01em;
  color: var(--dark) !important; margin-bottom: 1.1rem !important;
}

/* ---- forms ---- */
.woocommerce form .form-row { margin-bottom: 1.1rem; padding: 0; }
.woocommerce form .form-row label {
  display: block; margin-bottom: .4rem;
  font-family: var(--sans); font-size: .68rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--light);
}

/* Everyone knows the fields are required. The red star only adds anxiety. */
.woocommerce form .form-row .required,
.woocommerce form .form-row abbr.required,
.woocommerce .required { display: none !important; }
.woocommerce form .form-row.woocommerce-invalid label { color: #b4483c; }

.woocommerce form .form-row input.input-text,
.woocommerce form .form-row textarea,
.woocommerce form .form-row select,
.woocommerce .select2-container .select2-selection--single {
  width: 100%; padding: .9rem 1rem; height: auto;
  font-family: var(--sans); font-size: .92rem; font-weight: 300; color: var(--dark);
  background: var(--white); border: 1px solid rgba(0,0,0,.16); border-radius: 2px;
  transition: border-color .2s ease;
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
  outline: none; border-color: var(--green);
}
.woocommerce form .form-row input.input-text::placeholder { color: var(--light); }

/* ---- tables ---- */
.woocommerce table.shop_table {
  border: 1px solid rgba(0,0,0,.09); border-radius: 3px;
  border-collapse: separate; background: var(--white);
}
.woocommerce table.shop_table th {
  font-family: var(--sans); font-size: .64rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; color: var(--light);
  border-bottom: 1px solid rgba(0,0,0,.09); padding: 1rem 1.2rem;
}
.woocommerce table.shop_table td {
  font-family: var(--sans); font-size: .88rem; font-weight: 300; color: var(--mid);
  border-top: 1px solid rgba(0,0,0,.06); padding: 1.1rem 1.2rem; vertical-align: middle;
}
.woocommerce table.shop_table td.product-name a,
.woocommerce table.shop_table .product-name {
  font-family: var(--serif); font-size: 1.08rem; font-weight: 500;
  color: var(--dark); text-decoration: none;
}
.woocommerce table.shop_table .product-name dl.variation,
.woocommerce table.shop_table .product-name p {
  font-family: var(--sans); font-size: .78rem; font-weight: 300;
  color: var(--green); margin-top: .25rem;
}
.woocommerce table.shop_table td.product-total,
.woocommerce table.shop_table .amount {
  font-family: var(--sans); font-weight: 500; color: var(--dark);
  font-variant-numeric: tabular-nums;
}
.woocommerce table.shop_table tfoot th,
.woocommerce table.shop_table tr.order-total th { color: var(--dark); }
.woocommerce table.shop_table tr.order-total .amount { font-size: 1.25rem; }
.woocommerce a.remove {
  color: var(--light) !important; font-weight: 300;
}
.woocommerce a.remove:hover { color: var(--gold) !important; background: none !important; }
.woocommerce .quantity input.qty {
  width: 64px; padding: .5rem; text-align: center;
  border: 1px solid rgba(0,0,0,.16); border-radius: 2px;
}

/* ---- buttons ---- */
.woocommerce .button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #place_order,
.woocommerce .checkout-button {
  font-family: var(--sans) !important; font-size: .7rem !important; font-weight: 500 !important;
  letter-spacing: .16em !important; text-transform: uppercase !important;
  padding: 1rem 1.8rem !important; border-radius: 2px !important;
  background: var(--green) !important; color: var(--white) !important;
  border: 0 !important; transition: background .2s ease;
}
.woocommerce .button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce #place_order:hover { background: var(--green2) !important; }
.woocommerce .checkout-button, .woocommerce #place_order { width: 100%; }
.woocommerce button.button[name="update_cart"] {
  background: none !important; color: var(--mid) !important;
  border: 1px solid rgba(0,0,0,.18) !important;
}
.woocommerce button.button[name="update_cart"]:hover {
  border-color: var(--green) !important; color: var(--green) !important; background: none !important;
}

/* ---- checkout layout ---- */
.woocommerce-checkout .col2-set { display: grid; grid-template-columns: 1fr; gap: 0; width: 100%; }
.woocommerce-checkout .col2-set .col-1,
.woocommerce-checkout .col2-set .col-2 { width: 100%; float: none; }
.woocommerce-checkout #customer_details { max-width: 560px; margin-bottom: 2.6rem; }
#order_review { background: var(--white); border: 1px solid rgba(0,0,0,.09); border-radius: 3px; padding: 1.8rem; }
#order_review .shop_table { border: 0; }

.woocommerce-checkout #payment {
  background: transparent !important; border-radius: 0; margin-top: 1.4rem;
}
.woocommerce-checkout #payment ul.payment_methods {
  border: 1px solid rgba(0,0,0,.09); border-radius: 3px; background: var(--white); padding: 1.1rem;
}
.woocommerce-checkout #payment div.payment_box {
  background: var(--cream) !important; border-radius: 2px;
  font-family: var(--sans); font-size: .82rem; font-weight: 300; color: var(--mid);
}
.woocommerce-checkout #payment div.payment_box::before { border-bottom-color: var(--cream) !important; }
.woocommerce-checkout #payment div.form-row.place-order { padding: 1.2rem 0 0 !important; }

/* ---- cart totals ---- */
.cart_totals {
  background: var(--white); border: 1px solid rgba(0,0,0,.09);
  border-radius: 3px; padding: 1.8rem;
}
.cart_totals h2 { margin-bottom: 1rem !important; }
.woocommerce-cart .cart-collaterals { width: 100%; }
.woocommerce-cart .cart-collaterals .cart_totals { width: 100%; max-width: 420px; float: right; }

/* ---- messages and empty states ---- */
.woocommerce-message, .woocommerce-info, .woocommerce-error {
  background: var(--white) !important; border-top: 2px solid var(--green) !important;
  border-radius: 3px; font-family: var(--sans); font-size: .86rem; font-weight: 300; color: var(--mid);
}
.woocommerce-error { border-top-color: #b4483c !important; }
.woocommerce-message::before, .woocommerce-info::before { color: var(--green) !important; }
.cart-empty, .woocommerce-info {
  font-family: var(--sans) !important; font-size: .95rem !important; font-weight: 300 !important;
}

@media (max-width: 900px) {
  .blu-wp-content { padding: 2.6rem 1.2rem 4rem; }
  .woocommerce table.shop_table th, .woocommerce table.shop_table td { padding: .8rem; }
  .woocommerce-cart .cart-collaterals .cart_totals { max-width: none; float: none; }
  #order_review, .cart_totals { padding: 1.2rem; }
}

/* --------------------------------------------------------------------------
   CHECKOUT FORM, SECOND PASS
   The first pass left the fields floating in space. They sit in a card now,
   with tighter labels and the pairs actually paired.
   -------------------------------------------------------------------------- */

.woocommerce-checkout #customer_details {
  background: var(--white); border: 1px solid rgba(0,0,0,.09);
  border-top: 2px solid var(--green); border-radius: 3px;
  padding: 2rem 1.9rem 1.6rem; max-width: 620px;
}
.woocommerce-checkout .woocommerce-billing-fields h3 {
  font-size: 1.35rem !important; margin-bottom: .35rem !important;
}
.woocommerce-checkout .woocommerce-billing-fields::before {
  content: "We only need enough to confirm your appointment.";
  display: block; margin-bottom: 1.4rem;
  font-family: var(--sans); font-size: .82rem; font-weight: 300; color: var(--mid);
}

/* First and last name sit side by side, everything else runs full width. */
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper {
  display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem;
}
.woocommerce-checkout .woocommerce-billing-fields__field-wrapper > .form-row {
  grid-column: 1 / -1; float: none !important; width: 100% !important;
}
.woocommerce-checkout #billing_first_name_field { grid-column: 1 / 2 !important; }
.woocommerce-checkout #billing_last_name_field  { grid-column: 2 / 3 !important; }

.woocommerce form .form-row label {
  font-size: .62rem; letter-spacing: .18em; color: var(--light);
  margin-bottom: .35rem;
}
.woocommerce form .form-row input.input-text,
.woocommerce form .form-row select {
  padding: .82rem .95rem; font-size: .9rem;
  background: var(--off); border-color: rgba(0,0,0,.12);
}
.woocommerce form .form-row input.input-text:focus,
.woocommerce form .form-row select:focus {
  background: var(--white); border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(74,124,47,.1);
}

#order_review_heading { margin-top: 2.4rem !important; }

@media (max-width: 600px) {
  .woocommerce-checkout #customer_details { padding: 1.4rem 1.2rem 1rem; }
  .woocommerce-checkout .woocommerce-billing-fields__field-wrapper { grid-template-columns: 1fr; }
  .woocommerce-checkout #billing_first_name_field,
  .woocommerce-checkout #billing_last_name_field { grid-column: 1 / -1 !important; }
}

/* --------------------------------------------------------------------------
   ELEMENTOR PAGES ARE LEFT ALONE
   page.php wraps its content in .blu-wp-content, which is right for the cart,
   the checkout and a plain WordPress page. It is wrong for a page built in
   Elementor: those layouts are designed edge to edge, and a 1080px container
   with padding crushes them.

   So the container releases itself the moment Elementor owns the page. The
   Woo styling above stays, because it is all scoped to .woocommerce.
   -------------------------------------------------------------------------- */

body.elementor-page .blu-wp-content,
body[class*="elementor-page-"] .blu-wp-content {
  max-width: none;
  padding: 0;
  margin: 0;
}

/*
 * NOTHING OF OURS REACHES INSIDE ELEMENTOR.
 *
 * An earlier version of this block tried to neutralise the theme's typography
 * inside Elementor with `font-family: inherit` and `background: revert` on
 * .elementor-button. That was a bad mistake: `revert` rolls a property back to
 * the BROWSER default, not to Elementor's own value, so it stripped Elementor's
 * button styling entirely and left plain serif links with a stray background.
 *
 * The correct approach is to declare nothing here at all. Every rule this theme
 * writes is already scoped to a class this theme owns, so none of them can
 * reach an Elementor page in the first place. The only thing that genuinely
 * needed undoing was page.php's container, which is handled above.
 */

/* --------------------------------------------------------------------------
   NO HORIZONTAL SCROLL ON MOBILE
   The consultation page scrolled sideways on a phone: the page sat shifted
   left with white space down the right. body had overflow-x: hidden, but a
   body rule alone does not hold when html is the scrolling element, and a
   handful of oversized decorative pieces were wider than the viewport.
   -------------------------------------------------------------------------- */

html { overflow-x: hidden; max-width: 100%; }
body  { overflow-x: hidden; max-width: 100%; position: relative; }

/* Nothing this theme renders may exceed the screen. */
body[class*="blu-page"] main,
body[class*="blu-page"] main > section,
nav#navbar, footer#colophon, .trust-bar, .vbar {
  max-width: 100%;
}

/* The decorative pieces that were causing it. */
.t-hero-ghost { max-width: 100vw; overflow: hidden; }
.c-ratio-phi  { max-width: 100%; overflow: hidden; }

/* Long words and unbroken strings, which push a column wider than the phone. */
body[class*="blu-page"] main h1,
body[class*="blu-page"] main h2,
body[class*="blu-page"] main h3,
body[class*="blu-page"] main p,
.t-item-name, .t-item-desc, .c-card p, .r-card-text, .l-clause p {
  overflow-wrap: break-word;
  word-wrap: break-word;
}

/* Images and media never exceed their column. */
body[class*="blu-page"] main img,
body[class*="blu-page"] main iframe,
body[class*="blu-page"] main video,
footer#colophon img {
  max-width: 100%;
  height: auto;
}

@media (max-width: 900px) {
  /* Grids that were still declaring fixed track widths on a phone. */
  .t-item { grid-template-columns: 1fr !important; }
  .t-item-price { text-align: left; }
  .c-pick, #c-diff, #c-walk, #c-ratio, #m-listen, #m-oversight,
  .c-know-grid, .r-rating-grid, .t-know-grid {
    grid-template-columns: 1fr !important;
  }
  .vidstrip-rail { grid-auto-columns: minmax(150px, 1fr); }
  #t-hero .section-headline,
  #c-hero .section-headline,
  #m-hero .section-headline,
  #r-hero .section-headline { font-size: clamp(1.9rem, 8vw, 2.6rem); }
}