/* ===================================================================
   Renew Vitality — Landing Page (V1 Control)
   Brand palette extracted from booknew.vitalityhrt.com
   =================================================================== */

:root {
  /* Brand */
  --gold: #d7c68e;
  --gold-dark: #b8a76a;
  --gold-darker: #9a8b58;
  --cream: #ebe4be;
  --cream-bg: #f5efd3;

  /* Surfaces */
  --black: #01090e;
  --near-black: #141414;
  --surface-dark: #0d1419;
  --surface-low: #151c21;
  --surface-mid: #192026;
  --surface-high: #242b30;

  /* Text */
  --text-light: #dce3ea;
  --text-cream: #cdc6b6;
  --text-dark: #141414;
  --text-dim: #45464B;
  --text-muted: #6b6e72;

  /* Borders */
  --border-subtle: rgba(215, 198, 142, 0.15);
  --border-cream-light: rgba(235, 228, 190, 0.1);

  /* Spacing */
  --max-container: 1200px;
  --section-lg: 96px;
  --section-md: 64px;
  --gutter: 24px;
  --gutter-mobile: 20px;

  /* Type */
  --font-display: "Montserrat", system-ui, -apple-system, sans-serif;
  --font-body: "Inter", system-ui, -apple-system, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--surface-dark);
  color: var(--text-light);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img { max-width: 100%; height: auto; display: block; }

a { color: var(--gold); text-decoration: none; }
a:hover { color: var(--gold-dark); }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  letter-spacing: -0.01em;
}

.container {
  max-width: var(--max-container);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}
@media (min-width: 768px) {
  .container { padding: 0 var(--gutter); }
}

.label-sm {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1;
}

/* === Top bar === */
.topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  height: 72px;
  background: rgba(13, 20, 25, 0.85);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid var(--border-cream-light);
  box-shadow: 0 20px 40px rgba(13, 20, 25, 0.4);
}
.topbar__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 100%;
  max-width: var(--max-container);
  margin: 0 auto;
  padding: 0 var(--gutter-mobile);
}
.topbar__logo {
  display: flex;
  align-items: center;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gold);
  text-decoration: none;
}
.topbar__logo img {
  height: 44px;
  width: auto;
  display: block;
}
@media (min-width: 768px) {
  .topbar__logo img { height: 56px; }
}
.topbar__phone {
  font-weight: 700;
  color: var(--gold);
  font-size: 14px;
}
@media (min-width: 768px) {
  .topbar { height: 92px; }
  .topbar__inner { padding: 0 var(--gutter); }
  .topbar__logo { font-size: 22px; }
  .topbar__phone { font-size: 16px; }
}

/* === Hero === */
.hero {
  position: relative;
  background: var(--black);
  padding: 80px 0 96px;
  min-height: 88vh;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hero__video {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  background: url(/assets/img/hero-video-poster.webp) center / cover var(--black);
}
.hero__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(180deg,
      rgba(1, 9, 14, 0.55) 0%,
      rgba(1, 9, 14, 0.45) 50%,
      rgba(1, 9, 14, 0.65) 100%);
  pointer-events: none;
}
@media (min-width: 900px) {
  .hero { padding: 120px 0 140px; min-height: 82vh; }
  .hero__overlay {
    background:
      linear-gradient(100deg,
        rgba(1, 9, 14, 0.78) 0%,
        rgba(1, 9, 14, 0.55) 35%,
        rgba(1, 9, 14, 0.30) 65%,
        rgba(1, 9, 14, 0.15) 100%);
  }
}
/* Text-shadow for readability over video */
.hero__h1, .hero__sub {
  text-shadow: 0 2px 16px rgba(0, 0, 0, 0.6);
}
.hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 40px;
}
.hero__image-wrap { display: none; }
.hero__badge {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 24px;
  background: rgba(215, 198, 142, 0.1);
  border: 1px solid rgba(215, 198, 142, 0.25);
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hero__h1 {
  font-size: clamp(36px, 7vw, 64px);
  margin-bottom: 20px;
  line-height: 1.05;
}
.hero__h1 span { color: var(--gold); }
.hero__sub {
  font-size: clamp(17px, 1.5vw, 19px);
  color: var(--text-cream);
  margin-bottom: 32px;
  max-width: 540px;
}
.hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 24px;
  margin-top: 24px;
}
.hero__trust-item {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-cream);
}
.hero__trust-item svg {
  width: 18px; height: 18px;
  color: var(--gold);
}
@media (min-width: 900px) {
  .hero__inner {
    flex-direction: row;
    align-items: center;
    gap: 64px;
  }
  .hero__content { flex: 1; max-width: 720px; }
}

/* === CTA Button === */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 32px;
  background: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  color: var(--near-black);
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 10px 30px rgba(215, 198, 142, 0.15);
  width: 100%;
  text-align: center;
}
.btn:hover {
  filter: brightness(1.05);
  transform: translateY(-1px);
  box-shadow: 0 14px 40px rgba(215, 198, 142, 0.25);
  color: var(--near-black);
}
.btn:active { transform: scale(0.98); }
.btn--ghost {
  background: transparent;
  border: 1px solid rgba(215, 198, 142, 0.4);
  color: var(--gold);
  box-shadow: none;
}
.btn--ghost:hover {
  background: rgba(215, 198, 142, 0.05);
  color: var(--gold);
}
@media (min-width: 768px) {
  .btn { width: auto; padding: 18px 40px; font-size: 13px; }
}

/* === Generic sections === */
.section { padding: var(--section-md) 0; }
.section--cream {
  background: var(--cream-bg);
  color: var(--text-dark);
}
.section--white {
  background: #fff;
  color: var(--text-dark);
}
.section--dark {
  background: var(--surface-dark);
}
.section--darkest {
  background: var(--black);
}
@media (min-width: 768px) {
  .section { padding: var(--section-lg) 0; }
}

.section__title {
  text-align: center;
  font-size: clamp(28px, 4vw, 36px);
  margin-bottom: 12px;
}
.section__sub {
  text-align: center;
  font-size: 16px;
  color: var(--text-dim);
  max-width: 600px;
  margin: 0 auto 48px;
}
.section--dark .section__sub,
.section--darkest .section__sub {
  color: var(--text-cream);
}

.section__divider {
  width: 60px;
  height: 2px;
  background: var(--gold-darker);
  margin: 0 auto 32px;
}

/* === Cards / Symptoms === */
.symptoms {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
}
@media (min-width: 768px) {
  .symptoms { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}
@media (min-width: 1100px) {
  .symptoms { grid-template-columns: repeat(4, 1fr); }
}
.symptom {
  padding: 24px;
  background: rgba(255, 255, 255, 0.45);
  border: 1px solid rgba(42, 49, 55, 0.1);
  backdrop-filter: blur(4px);
  display: flex;
  flex-direction: row;
  gap: 16px;
  align-items: flex-start;
}
@media (min-width: 1100px) {
  .symptom { flex-direction: column; gap: 16px; }
}
.symptom__icon {
  width: 36px; height: 36px;
  color: var(--gold-darker);
  flex-shrink: 0;
}
.symptom h3 {
  font-size: 19px;
  margin: 0 0 6px;
}
.symptom p { margin: 0; font-size: 14.5px; color: var(--text-dim); }

/* === Process steps === */
.steps {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
}
@media (min-width: 900px) {
  .steps { grid-template-columns: repeat(3, 1fr); gap: 48px; }
}
.step {
  display: flex;
  gap: 20px;
  align-items: flex-start;
}
@media (min-width: 900px) {
  .step { flex-direction: column; align-items: center; text-align: center; }
}
.step__num {
  width: 56px; height: 56px;
  border-radius: 50%;
  border: 2px solid var(--gold);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 700;
  flex-shrink: 0;
}
.step h3 {
  font-size: 20px;
  color: var(--text-light);
  margin: 0 0 8px;
}
.section--white .step h3, .section--cream .step h3 { color: var(--text-dark); }
.step p { color: var(--text-cream); font-size: 15px; margin: 0; }
.section--white .step p, .section--cream .step p { color: var(--text-dim); }

/* === Doctors === */
.doctors {
  display: grid;
  grid-template-columns: 1fr;
  gap: 40px;
  max-width: 1000px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .doctors { grid-template-columns: repeat(3, 1fr); gap: 32px; }
}
.doctor { text-align: center; }
.doctor__photo {
  aspect-ratio: 4 / 5;       /* portrait, matches actual head-shot proportions */
  overflow: hidden;
  margin-bottom: 24px;
  border-radius: 4px;
  box-shadow: 0 18px 40px -12px rgba(0, 0, 0, 0.55);
  border: 1px solid var(--border-subtle);
  background: var(--surface-low);  /* gold-ish fill while loading */
}
.doctor__photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 18%;     /* bias upward toward face/head */
  display: block;
}
.doctor h4 {
  font-size: 22px;
  color: var(--gold);
  margin: 0 0 6px;
}
.doctor__credentials {
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-cream);
  margin: 0 0 8px;
}
.doctor__specialty {
  font-size: 14px;
  color: var(--text-dim);
  margin: 0;
}
.section--dark .doctor__specialty { color: var(--text-cream); }

/* === Mid CTA banner === */
.mid-cta {
  background: var(--near-black);
  padding: 56px 0;
  border-top: 1px solid var(--border-cream-light);
  border-bottom: 1px solid var(--border-cream-light);
  text-align: center;
}
.mid-cta__inner {
  display: flex;
  flex-direction: column;
  gap: 20px;
  align-items: center;
}
.mid-cta h2 {
  font-size: clamp(22px, 3vw, 30px);
  max-width: 600px;
  color: var(--text-light);
}
@media (min-width: 900px) {
  .mid-cta__inner {
    flex-direction: row;
    justify-content: space-between;
    text-align: left;
  }
}

/* === Testimonials === */
.testimonials {
  display: grid;
  grid-template-columns: 1fr;
  gap: 20px;
}
@media (min-width: 900px) {
  .testimonials { grid-template-columns: repeat(3, 1fr); }
}
.testimonial {
  background: #fff;
  padding: 32px;
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.06);
  border-radius: 4px;
}
.testimonial__stars {
  display: flex;
  gap: 2px;
  color: var(--gold-dark);
  margin-bottom: 18px;
}
.testimonial__stars svg { width: 18px; height: 18px; }
.testimonial__quote {
  font-style: italic;
  color: var(--text-dark);
  font-size: 15.5px;
  line-height: 1.6;
  margin: 0 0 18px;
}
.testimonial__author {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-dark);
  margin: 0;
}
.testimonial__attribution {
  display: flex;
  align-items: center;
  gap: 12px;
}
.testimonial__photo {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 20%;
  flex-shrink: 0;
  border: 2px solid var(--gold-dark);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

/* === Included list === */
.included-wrap {
  display: flex;
  flex-direction: column;
  gap: 40px;
}
@media (min-width: 900px) {
  .included-wrap { flex-direction: row; gap: 80px; align-items: center; }
}
.included-img {
  flex: 1;
  aspect-ratio: 16/9;
  overflow: hidden;
  border: 1px solid var(--border-cream-light);
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
}
.included-img img { width: 100%; height: 100%; object-fit: cover; }
.included-list { flex: 1; }
.included-list h2 { font-size: clamp(28px, 4vw, 36px); margin-bottom: 32px; color: var(--text-light); }
.included-list ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 22px; }
.included-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
}
.included-list li svg {
  width: 22px; height: 22px;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
}
.included-list strong {
  display: block;
  font-size: 16px;
  color: var(--text-light);
  margin-bottom: 4px;
}
.included-list p { margin: 0; font-size: 14.5px; color: var(--text-cream); }

/* === Trust pillars === */
.pillars {
  display: grid;
  grid-template-columns: 1fr;
  gap: 32px;
  text-align: center;
}
@media (min-width: 768px) {
  .pillars { grid-template-columns: repeat(3, 1fr); gap: 48px; }
}
.pillar__icon {
  width: 56px; height: 56px;
  background: rgba(215, 198, 142, 0.08);
  color: var(--gold);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 20px;
}
.pillar h4 {
  font-size: 19px;
  color: var(--text-light);
  margin: 0 0 8px;
}
.pillar p {
  font-size: 14.5px;
  color: var(--text-cream);
  margin: 0;
  max-width: 300px;
  margin: 0 auto;
}

/* === Final CTA === */
.final-cta {
  background: var(--black);
  padding: 96px 0;
  text-align: center;
  position: relative;
}
.final-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at center, rgba(215, 198, 142, 0.05), transparent 60%);
  pointer-events: none;
}
.final-cta__inner {
  position: relative;
  max-width: 720px;
  margin: 0 auto;
}
.final-cta__badge {
  display: inline-block;
  padding: 6px 14px;
  margin-bottom: 24px;
  border: 1px solid rgba(215, 198, 142, 0.4);
  color: var(--gold);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
}
.final-cta h2 {
  font-size: clamp(36px, 6vw, 56px);
  color: var(--text-light);
  margin-bottom: 20px;
  line-height: 1.05;
}
.final-cta__sub {
  font-size: 18px;
  color: var(--text-cream);
  margin-bottom: 40px;
  max-width: 580px;
  margin-left: auto;
  margin-right: auto;
}
.final-cta__phone {
  margin-top: 20px;
  font-size: 14px;
  color: var(--text-cream);
}

/* === FAQ === */
.faq { max-width: 800px; margin: 0 auto; }
.faq details {
  border-bottom: 1px solid var(--border-cream-light);
  padding: 8px 0;
}
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  font-weight: 700;
  font-size: 16px;
  color: var(--text-light);
}
.section--white .faq summary, .section--cream .faq summary { color: var(--text-dark); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: '+';
  color: var(--gold);
  font-size: 24px;
  font-weight: 300;
  transition: transform 0.2s;
}
.faq details[open] summary::after { transform: rotate(45deg); }
.faq details p {
  margin: 0;
  padding: 0 0 16px;
  color: var(--text-cream);
  font-size: 15px;
  line-height: 1.65;
}
.section--white .faq details p, .section--cream .faq details p { color: var(--text-dim); }

/* === Footer === */
footer {
  background: var(--surface-low);
  padding: 64px var(--gutter-mobile);
  border-top: 1px solid var(--border-cream-light);
  text-align: center;
}
footer .wordmark {
  display: block;
  margin: 0 auto 12px;
  height: 56px;
  width: auto;
  opacity: 0.85;
}
footer .tagline {
  font-size: 13px;
  color: var(--text-cream);
  margin: 4px 0;
}
footer .accent-line {
  width: 60px;
  height: 2px;
  background: var(--gold);
  margin: 24px auto 28px;
  opacity: 0.5;
}
footer .links {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 18px;
  margin-bottom: 28px;
}
footer .links a {
  font-size: 12px;
  color: var(--text-cream);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
footer .links a:hover { color: var(--gold); }
footer .disclaimer {
  font-size: 11px;
  color: rgba(205, 198, 182, 0.5);
  max-width: 720px;
  margin: 0 auto 20px;
  line-height: 1.6;
}
footer .copyright {
  font-size: 11px;
  color: rgba(205, 198, 182, 0.35);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

/* === Sticky mobile bottom CTA === */
.sticky-cta {
  position: fixed;
  bottom: 0; left: 0; right: 0;
  padding: 12px;
  background: rgba(13, 20, 25, 0.92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-top: 1px solid var(--border-cream-light);
  z-index: 100;
  box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.6);
  transform: translateY(0);
  transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform;
}
.sticky-cta.is-hidden {
  transform: translateY(110%);
  pointer-events: none;
}

/* === Third-party chat widget — hide default LiveChat on mobile, replaced by .rv-chat-fab === */
@media (max-width: 899px) {
  /* Hide default LiveChat / GHL chat / similar widgets on mobile;
     our .rv-chat-fab is the visible entry point. */
  #chat-widget-container,
  #livechat-compact-container,
  #livechat-eye-catcher,
  iframe[src*="livechatinc.com"],
  iframe[src*="livechat.com"],
  iframe[id*="livechat" i],
  iframe[name*="LC_" i],
  div[class*="livechat" i] {
    display: none !important;
  }
}
/* Desktop — let LiveChat use its own default positioning */
.sticky-cta .btn { box-shadow: none; }

/* === Custom compact chat bubble (mobile only — replaces LiveChat minimized bar) === */
.rv-chat-fab {
  display: none;
}
@media (max-width: 899px) {
  .rv-chat-fab {
    position: fixed;
    bottom: 88px; /* sits above the sticky mobile CTA */
    right: 14px;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--black);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    z-index: 90;
    padding: 0;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(255, 255, 255, 0.08);
    transition: transform 0.18s ease, box-shadow 0.18s ease;
    -webkit-tap-highlight-color: transparent;
  }
  .rv-chat-fab:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 22px rgba(0, 0, 0, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.12);
  }
  .rv-chat-fab:active {
    transform: scale(0.95);
  }
  .rv-chat-fab svg {
    width: 24px;
    height: 24px;
    pointer-events: none;
  }
  /* When sticky CTA is hidden (hero CTA on screen), pull the FAB down a bit */
  body:has(.sticky-cta.is-hidden) .rv-chat-fab {
    bottom: 20px;
  }
}
@media (min-width: 900px) {
  .sticky-cta { display: none; }
}

/* Padding for sticky mobile CTA */
body { padding-bottom: 80px; }
@media (min-width: 900px) {
  body { padding-bottom: 0; }
}

/* ===================================================================
   FORMS — HubSpot embeds: A (contact form) and B (4-step quiz)
   The developer embed renders HubSpot's own markup into .hs-form-html and
   styles it through --hsf-* custom properties, so the theme is set on our
   wrapper (.hs-form) rather than by out-specifying HubSpot's selectors.
   =================================================================== */

/* Card around the contact form */
.form-card {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-cream-light);
  padding: 32px 24px;
  border-radius: 4px;
  max-width: 540px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .form-card { padding: 40px 36px; }
}

/* Card around the quiz */
.quiz {
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid var(--border-cream-light);
  padding: 32px 20px;
  border-radius: 4px;
  max-width: 600px;
  margin: 0 auto;
}
@media (min-width: 768px) {
  .quiz { padding: 48px 40px; }
}

.hs-form {
  text-align: left;
  scroll-margin-top: 96px;  /* clear the sticky top bar when a quiz step scrolls it into view */

  --hsf-global__font-family: var(--font-body);
  --hsf-global__font-size: 15.5px;
  --hsf-global__color: var(--text-light);
  --hsf-global__error-color: #ff7a6e;

  /* Our card is the background — drop HubSpot's own box */
  --hsf-background__background-color: transparent;
  --hsf-background__padding: 0;
  --hsf-row__vertical-spacing: 18px;
  --hsf-row__horizontal-spacing: 18px;
  --hsf-module__vertical-spacing: 6px;

  --hsf-field-label__font-size: 13px;
  --hsf-field-label__color: var(--text-cream);
  --hsf-field-label-requiredindicator__color: var(--gold);

  --hsf-field-input__font-size: 16px;  /* >= 16px to prevent iOS auto-zoom */
  --hsf-field-input__color: var(--text-light);
  --hsf-field-input__background-color: rgba(255, 255, 255, 0.04);
  --hsf-field-input__border-color: rgba(215, 198, 142, 0.18);
  --hsf-field-input__border-radius: 4px;
  --hsf-field-input__padding: 14px 16px;
  --hsf-field-input__placeholder-color: rgba(205, 198, 182, 0.4);

  /* A checkbox is as big as its padding; without this it inherits the input's */
  --hsf-field-checkbox__padding: 10px;
  --hsf-field-checkbox__border-color: rgba(215, 198, 142, 0.4);
  --hsf-field-checkbox__color: var(--gold);
  --hsf-field-radio__padding: 10px;
  --hsf-field-radio__border-color: rgba(215, 198, 142, 0.4);
  --hsf-field-radio__color: var(--gold);

  --hsf-richtext__font-size: 12.5px;
  --hsf-richtext__color: var(--text-cream);
  --hsf-erroralert__font-size: 12.5px;

  --hsf-button__width: 100%;
  --hsf-button__font-size: 13px;
  --hsf-button__font-weight: 700;
  --hsf-button__color: var(--near-black);
  --hsf-button__background-color: var(--gold);
  --hsf-button__background-image: linear-gradient(135deg, var(--gold) 0%, var(--gold-dark) 100%);
  --hsf-button__border-radius: 4px;
  --hsf-button__padding: 18px 32px;
  --hsf-button__box-shadow: 0 10px 30px rgba(215, 198, 142, 0.15);

  /* Only shows if a progress bar is added to the form in HubSpot */
  --hsf-progressbar-text__color: var(--gold);
  --hsf-progressbar-progressLine__background-color: var(--gold);
  --hsf-progressbar-trackLine__background-color: rgba(215, 198, 142, 0.12);
}

/* Shown until HubSpot has fetched and rendered the form */
.hs-form .hs-form-html:empty::before {
  content: "Loading form…";
  display: block;
  padding: 40px 0;
  text-align: center;
  font-size: 14px;
  color: var(--text-cream);
  opacity: 0.7;
}

/* Each hidden attribution field sits in a row of its own — collapse those rows */
.hs-form .hsfc-Row:has(> [data-hsfc-id="HiddenField"]) { display: none; }

.hs-form .hsfc-FieldLabel {
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.hs-form .hsfc-TextInput:focus,
.hs-form .hsfc-TextareaInput:focus {
  --hsf-field-input__border-color: var(--gold);
  --hsf-field-input__background-color: rgba(255, 255, 255, 0.06);
}
.hs-form .hsfc-TextareaInput { min-height: 100px; }

/* Dropdown lists float over the page, so they need a solid surface */
.hs-form .hsfc-DropdownOptions {
  --hsf-field-input__background-color: var(--surface-high);
  --hsf-field-input__border-color: rgba(215, 198, 142, 0.4);
}
.hs-form .hsfc-DropdownOptions__List { scrollbar-color: rgba(215, 198, 142, 0.4) transparent; }

/* Checkbox and consent labels are sentences, not field captions */
.hs-form .hsfc-CheckboxFieldGroup__Options .hsfc-FieldLabel,
.hs-form .hsfc-CheckboxField .hsfc-FieldLabel {
  font-weight: 400;
  letter-spacing: 0;
  text-transform: none;
}
.hs-form .hsfc-DataPrivacyField { --hsf-row__vertical-spacing: 10px; }
.hs-form .hsfc-RichText {
  line-height: 1.55;
  opacity: 0.8;
}

/* Quiz steps: the question reads as a heading, the answers as cards */
.hs-form .hsfc-CheckboxFieldGroup,
.hs-form .hsfc-DropdownField { --hsf-module__vertical-spacing: 20px; }
.hs-form .hsfc-CheckboxFieldGroup > .hsfc-FieldLabel,
.hs-form .hsfc-DropdownField > .hsfc-FieldLabel {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 700;
  line-height: 1.25;
  letter-spacing: -0.01em;
  text-transform: none;
  color: var(--text-light);
}
@media (min-width: 768px) {
  .hs-form .hsfc-CheckboxFieldGroup > .hsfc-FieldLabel,
  .hs-form .hsfc-DropdownField > .hsfc-FieldLabel { font-size: 28px; }
}
.hs-form .hsfc-CheckboxFieldGroup__Options {
  --hsf-field-label__font-size: 15.5px;
  --hsf-field-label__color: var(--text-light);
}
.hs-form .hsfc-CheckboxFieldGroup__Options > div:not(:last-child) { margin-bottom: 12px; }
.hs-form .hsfc-CheckboxFieldGroup__Options label.hsfc-FieldLabel {
  gap: 14px;
  padding: 16px 18px;
  background: rgba(255, 255, 255, 0.03);
  border: 1px solid rgba(215, 198, 142, 0.18);
  border-radius: 4px;
  cursor: pointer;
  transition: all 0.15s;
}
.hs-form .hsfc-CheckboxFieldGroup__Options label.hsfc-FieldLabel:hover {
  background: rgba(215, 198, 142, 0.06);
  border-color: rgba(215, 198, 142, 0.4);
}
.hs-form .hsfc-CheckboxFieldGroup__Options label.hsfc-FieldLabel:has(input:checked) {
  border-color: var(--gold);
}

.hs-form .hsfc-Button {
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.hs-form .hsfc-Button:not([disabled]):hover { filter: brightness(1.05); }
/* "Previous" is the first of two buttons — ghost, like .btn--ghost */
.hs-form .hsfc-NavigationRow__Buttons > .hsfc-Button:first-child:not(:only-child) {
  flex: 0 0 auto;
  --hsf-button__width: auto;
  --hsf-button__padding: 18px 24px;
  --hsf-button__color: var(--gold);
  --hsf-button__background-color: transparent;
  --hsf-button__background-image: none;
  --hsf-button__border-width: 1px;
  --hsf-button__border-style: solid;
  --hsf-button__border-color: rgba(215, 198, 142, 0.4);
  --hsf-button__box-shadow: none;
  --hsf-button--hover__background-color: rgba(215, 198, 142, 0.05);
}

/* === Utility === */
.hidden { display: none !important; }
.text-gold { color: var(--gold); }