/* =============================================================================
   /book-session/ — the email-campaign landing page.
   =============================================================================
   Built from the design handoff "Book Session". One goal: the GoHighLevel form.
   No nav, no outbound links above the fold, nothing that competes with it.

   Scoped under .bs-page so it can sit on top of styles.css without fighting it:
   the site stylesheet supplies the fonts, the reset and .ghl-form-wrap, this
   file supplies everything the landing page draws on screen.

   Colours come from the handoff. Two of them are the site's own tokens under a
   different name (#161519 is --green, #C9A13B is --clay to within one step),
   so they are taken from the variables; the rest — the two deeper golds that
   carry text on cream, the off-white panel, the hairlines — only exist here.
   ========================================================================== */

.bs-page {
  --bs-ink: var(--green, #161519);
  --bs-ink-hover: #2A2830;
  --bs-cream: #F3F1EC;
  --bs-offwhite: #FBFAF7;
  --bs-gold: var(--clay, #C9A13B);   /* accent on dark */
  --bs-gold-mid: #9C7A1E;            /* numbers, the FAQ plus */
  --bs-gold-text: #7A5C0E;           /* eyebrows and links on cream — passes AA */
  --bs-text-2: #3A3732;
  --bs-muted: #5C5850;
  --bs-muted-2: #6B675F;
  --bs-on-dark: #E2DED5;
  --bs-foot: #B9B4AA;
  --bs-line: #DDD8CD;
  --bs-line-2: #D6CFBF;
  --bs-placeholder: #E4E0D7;
  --bs-tile: #EDE9E0;

  margin: 0;
  background: var(--bs-cream);
  color: var(--bs-ink);
  font-family: var(--sans, system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}

.bs-page a { color: var(--bs-gold-text); }
.bs-page a:hover { color: var(--bs-ink); }
.bs-page h1, .bs-page h2, .bs-page p, .bs-page ul, .bs-page ol, .bs-page blockquote, .bs-page figure { margin: 0; }
.bs-page ul, .bs-page ol { padding: 0; list-style: none; }

.bs-wrap { max-width: 1120px; margin: 0 auto; }
.bs-wrap-narrow { max-width: 880px; margin: 0 auto; }
.bs-sec { padding: clamp(48px, 8vw, 104px) 20px; }
.bs-sec-tight { padding: clamp(48px, 8vw, 96px) 20px; }
.bs-on-white { background: #fff; }

.bs-serif { font-family: var(--serif, Georgia, serif); }
.bs-eyebrow {
  font-size: 13px; font-weight: 700; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--bs-gold-text);
}
.bs-page .bs-h2 {
  font-family: var(--serif, Georgia, serif); font-weight: 600;
  font-size: clamp(28px, 3.6vw, 42px); line-height: 1.12; text-wrap: balance;
}

/* --- header: logo and the two numbers, nothing else ----------------------- */
.bs-head { background: var(--bs-ink); border-bottom: 1px solid var(--bs-ink-hover); }
.bs-head-inner {
  max-width: 1120px; margin: 0 auto; padding: 14px 20px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap;
}
.bs-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; text-decoration: none; }
.bs-brand img { height: clamp(22px, 3vw, 30px); width: auto; display: block; }
.bs-brand-loc {
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--bs-on-dark);
}
.bs-contact { display: flex; gap: 16px; font-size: 14px; color: var(--bs-on-dark); }
.bs-contact a { font-weight: 600; color: #F3F1EC; text-decoration: none; }
.bs-contact a:hover { color: var(--bs-gold); }

/* --- hero: the offer on the left, the form on the right ------------------- */
.bs-hero { background: var(--bs-ink); color: #F3F1EC; }
.bs-hero-grid {
  padding: clamp(20px, 5vw, 72px) 20px clamp(28px, 6vw, 80px);
  display: flex; flex-wrap: wrap; gap: clamp(20px, 5vw, 64px); align-items: center;
}
.bs-hero-copy { flex: 1 1 360px; min-width: 0; display: flex; flex-direction: column; gap: clamp(12px, 2vw, 22px); }
.bs-page .bs-h1 {
  font-family: var(--serif, Georgia, serif); font-weight: 600;
  font-size: clamp(30px, 5.4vw, 60px); line-height: 1.08;
  letter-spacing: -0.01em; text-wrap: balance; color: #F3F1EC;
}
.bs-h1 .gold { color: var(--bs-gold); }
.bs-cadence { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.2; font-weight: 600; color: var(--bs-gold); }
.bs-sub { font-size: clamp(17px, 1.8vw, 21px); line-height: 1.45; color: var(--bs-on-dark); max-width: 34em; text-wrap: pretty; }
.bs-points {
  margin-top: 4px; display: flex; flex-direction: column; gap: 8px;
  font-size: clamp(15px, 1.5vw, 18px); color: #F3F1EC;
}
.bs-points li { display: flex; align-items: center; gap: 12px; }
/* the diamond from the printed postcard */
.bs-points li::before { content: ""; width: 8px; height: 8px; background: var(--bs-gold); transform: rotate(45deg); flex: none; }

.bs-card {
  flex: 1 1 340px; max-width: 460px; min-width: 0;
  background: #fff; color: var(--bs-ink); border-radius: 14px;
  padding: clamp(20px, 3vw, 32px); box-shadow: 0 20px 60px rgba(0,0,0,0.35);
  display: flex; flex-direction: column; gap: 12px;
}
.bs-page .bs-card h2 { font-family: var(--serif, Georgia, serif); font-weight: 600; font-size: 24px; line-height: 1.2; }
.bs-card .ghl-form-wrap { min-height: 560px; }
.bs-card .ghl-form-wrap iframe { border-radius: 4px; }
.bs-note { font-size: 13px; font-weight: 600; color: var(--bs-text-2); }
.bs-consent { font-size: 11px; line-height: 1.45; color: var(--bs-muted-2); }

/* --- what the free session includes --------------------------------------- */
.bs-split { display: flex; flex-wrap: wrap; gap: clamp(28px, 5vw, 64px); align-items: center; }
.bs-split-copy { flex: 1 1 380px; min-width: 0; display: flex; flex-direction: column; gap: 24px; }
.bs-split-media { flex: 1 1 360px; min-width: 0; }
.bs-split-media img {
  width: 100%; aspect-ratio: 4/5; height: auto; object-fit: cover;
  border-radius: 14px; display: block; background: var(--bs-placeholder);
}
.bs-steps { display: flex; flex-direction: column; }
.bs-steps li {
  display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px;
  padding: 16px 0; border-top: 1px solid var(--bs-line);
  font-size: 18px; line-height: 1.4;
}
.bs-steps li:last-child { border-bottom: 1px solid var(--bs-line); }
.bs-steps b { font-family: var(--serif, Georgia, serif); font-weight: 500; color: var(--bs-gold-mid); font-size: 18px; }

/* --- the one testimonial, from this centre -------------------------------- */
.bs-quote { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 48px); align-items: center; }
/* elizabeth-w.jpg is not a plain portrait: a gold ring badge is drawn into the
   file, with bars bleeding off the top and bottom edges. The home page shows the
   whole badge; here the design calls for a plain circle, so the image is zoomed
   inside a circular mask until only the portrait within the ring is left. */
.bs-portrait {
  width: 160px; height: 160px; flex: none; display: block;
  border-radius: 50%; overflow: hidden; background: #fff;
}
.bs-portrait img { width: 100%; height: 100%; object-fit: cover; transform: scale(1.6); display: block; }
.bs-quote-body { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 16px; }
.bs-quote-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.bs-stars { color: var(--bs-gold); letter-spacing: 3px; font-size: 18px; }
.bs-pill {
  font-size: 14px; font-weight: 600; color: var(--bs-text-2);
  background: var(--bs-cream); border-radius: 999px; padding: 5px 12px;
}
.bs-page blockquote.bs-said {
  font-family: var(--serif, Georgia, serif); font-weight: 400;
  font-size: clamp(20px, 2.4vw, 27px); line-height: 1.4; text-wrap: pretty;
}
.bs-said-by { font-size: 16px; }
.bs-said-by span { color: var(--bs-muted); }
.bs-disclaimer { font-size: 13px; color: var(--bs-muted-2); }

/* --- the BONEMORE study, which the email promises ------------------------- */
.bs-study {
  border: 1px solid var(--bs-line-2); border-radius: 14px; background: var(--bs-offwhite);
  padding: clamp(22px, 4vw, 44px); display: flex; flex-direction: column; gap: 20px;
}
.bs-page .bs-study h2 {
  font-family: var(--serif, Georgia, serif); font-weight: 600;
  font-size: clamp(24px, 3vw, 34px); line-height: 1.18; text-wrap: balance;
}
.bs-study-body { font-size: 17px; line-height: 1.55; color: var(--bs-text-2); text-wrap: pretty; }
.bs-study-body b { color: var(--bs-ink); }
.bs-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.bs-tile { border-radius: 10px; padding: 18px 20px; display: flex; flex-direction: column; gap: 4px; background: var(--bs-tile); }
.bs-tile span { font-size: 13px; font-weight: 600; color: var(--bs-muted); }
.bs-tile b { font-family: var(--serif, Georgia, serif); font-weight: 600; font-size: 26px; line-height: 1.5; }
.bs-tile small { font-size: 14px; color: var(--bs-muted); }
.bs-tile-dark { background: var(--bs-ink); color: #F3F1EC; }
.bs-tile-dark span { color: var(--bs-gold); }
.bs-tile-dark b { font-size: 34px; line-height: 1.2; }
.bs-tile-dark small { color: #D5D0C6; }
.bs-cite { font-size: 13px; line-height: 1.5; color: var(--bs-muted-2); }
.bs-page .bs-pubmed {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 8px;
  font-weight: 700; font-size: 16px; color: var(--bs-ink);
  border-bottom: 2px solid var(--bs-gold); padding-bottom: 3px; text-decoration: none;
}
.bs-page .bs-pubmed:hover { border-bottom-color: var(--bs-ink); }

/* --- three questions, native <details> ------------------------------------ */
.bs-faq { display: flex; flex-direction: column; gap: 24px; }
.bs-acc { display: flex; flex-direction: column; border-top: 1px solid var(--bs-line); }
.bs-acc details { border-bottom: 1px solid var(--bs-line); }
.bs-acc summary {
  cursor: pointer; display: flex; justify-content: space-between; align-items: center;
  gap: 16px; padding: 20px 0; font-size: 19px; font-weight: 600; list-style: none;
}
.bs-acc summary::-webkit-details-marker { display: none; }
.bs-plus { font-size: 26px; font-weight: 400; color: var(--bs-gold-mid); transition: transform .2s; flex: none; line-height: 1; }
.bs-acc details[open] .bs-plus { transform: rotate(45deg); }
.bs-acc p { margin: 0 0 22px; font-size: 17px; line-height: 1.6; color: var(--bs-text-2); max-width: 40em; }

/* --- visit ---------------------------------------------------------------- */
.bs-visit { display: flex; flex-wrap: wrap; gap: clamp(24px, 4vw, 56px); align-items: stretch; }
.bs-visit-info { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }
.bs-field { display: flex; flex-direction: column; gap: 4px; }
.bs-field-label { font-size: 12px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--bs-gold-text); }
.bs-field, .bs-field p { font-size: 18px; line-height: 1.45; }
.bs-page .bs-field a { color: var(--bs-ink); text-decoration: none; }
.bs-page .bs-field a:hover { color: var(--bs-gold-text); text-decoration: underline; }
.bs-page .bs-btn {
  align-self: flex-start; display: inline-flex; align-items: center; height: 52px;
  padding: 0 26px; border-radius: 8px; background: var(--bs-ink); color: #F3F1EC;
  font-weight: 700; font-size: 16px; text-decoration: none; transition: background .15s;
}
.bs-page .bs-btn:hover { background: var(--bs-ink-hover); color: #fff; }
.bs-map { flex: 1.4 1 360px; min-width: 0; min-height: 340px; border-radius: 14px; overflow: hidden; background: var(--bs-placeholder); }
.bs-map iframe { width: 100%; height: 100%; min-height: 340px; border: 0; display: block; }

/* --- footer --------------------------------------------------------------- */
.bs-foot { background: var(--bs-ink); color: var(--bs-foot); padding: 28px 20px; }
.bs-foot-inner {
  max-width: 1120px; margin: 0 auto; display: flex; flex-wrap: wrap;
  justify-content: space-between; gap: 12px; font-size: 13px; line-height: 1.5;
}
.bs-page .bs-foot a { color: var(--bs-gold); }

@media (max-width: 760px) {
  .bs-portrait { width: 120px; height: 120px; }
}

/* The only anchor on the page is "Book your free session" -> #book. */
@media (prefers-reduced-motion: no-preference) {
  html:has(.bs-page) { scroll-behavior: smooth; }
}