/* ========================================================
   THE MISSING LINK — Tony Robbins-style Product Page
   Dark/cinematic hero, clean white content, dramatic CTAs
   ======================================================== */

/* --- Design Tokens --- */
:root {
  --text-xs:   clamp(0.75rem,  0.7rem  + 0.25vw, 0.875rem);
  --text-sm:   clamp(0.875rem, 0.8rem  + 0.35vw, 1rem);
  --text-base: clamp(1rem,     0.95rem + 0.25vw, 1.125rem);
  --text-lg:   clamp(1.125rem, 1rem    + 0.75vw, 1.5rem);
  --text-xl:   clamp(1.5rem,   1.2rem  + 1.25vw, 2.25rem);
  --text-2xl:  clamp(2rem,     1.2rem  + 2.5vw,  3.5rem);
  --text-3xl:  clamp(2.5rem,   1rem    + 4vw,    5rem);
  --text-hero: clamp(3rem,     0.5rem  + 7vw,    8rem);

  --space-1:  0.25rem;
  --space-2:  0.5rem;
  --space-3:  0.75rem;
  --space-4:  1rem;
  --space-5:  1.25rem;
  --space-6:  1.5rem;
  --space-8:  2rem;
  --space-10: 2.5rem;
  --space-12: 3rem;
  --space-16: 4rem;
  --space-20: 5rem;
  --space-24: 6rem;
  --space-32: 8rem;

  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  --radius-full: 9999px;

  --transition-interactive: 180ms cubic-bezier(0.16, 1, 0.3, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);

  --content-narrow: 640px;
  --content-default: 960px;
  --content-wide: 1280px;

  --font-display: 'Raleway', 'Helvetica Neue', sans-serif;
  --font-body: 'Raleway', 'Helvetica Neue', sans-serif;

  /* Dark nav / charcoal */
  --color-dark: #0D0D0D;
  --color-dark-surface: #1A1A1A;

  /* Light content sections */
  /* All-dark theme */
  --color-bg: #0D0D0D;
  --color-bg-off: #161616;
  --color-bg-elevated: #1A1A1A;
  --color-text: #FFFFFF;
  --color-text-muted: rgba(255, 255, 255, 0.72);
  --color-text-faint: rgba(255, 255, 255, 0.45);
  --color-border: rgba(255, 255, 255, 0.10);

  /* Accent — SmartMinds orange */
  --color-accent: #fcb141;
  --color-accent-hover: #e9a035;
}

/* [data-theme="dark"] not needed — this is a fixed light/dark design like TR */

/* ========================================================
   NAV
   ======================================================== */
.site-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: var(--space-4) var(--space-6);
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.site-nav.scrolled {
  background: rgba(13,13,13,0.95);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(255,255,255,0.06);
}

.nav-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.nav-logo-img {
  height: 38px;
  width: auto;
  display: block;
}
.nav-logo-icon-only .nav-logo-img {
  height: 36px;
  width: 36px;
}

/* Right-side cluster: text links + CTA */
.nav-right {
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.nav-link {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: rgba(255, 255, 255, 0.78);
  text-decoration: none;
  transition: color 0.2s ease;
}
.nav-link:hover,
.nav-link:focus-visible,
.nav-link[aria-current="page"] {
  color: var(--color-accent);
}
/* Hamburger toggle — visible only on mobile */
.nav-toggle {
  display: none;
  background: transparent;
  border: 0;
  padding: 10px;
  margin: 0;
  cursor: pointer;
  width: 44px;
  height: 44px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
}
.nav-toggle-line {
  display: block;
  width: 22px;
  height: 1.5px;
  background: #ffffff;
  margin: 5px auto;
  transition: transform 0.25s ease, opacity 0.2s ease;
}

@media (max-width: 767px) {
  .nav-right {
    display: none;
  }
  .nav-toggle {
    display: block;
  }
}

/* Fullscreen mobile menu overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background: rgba(13, 13, 13, 0.98);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.mobile-menu.is-open {
  opacity: 1;
  pointer-events: auto;
}
.mobile-menu-close {
  position: absolute;
  top: 18px;
  right: 18px;
  width: 44px;
  height: 44px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mobile-menu-close span {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 22px;
  height: 1.5px;
  background: #ffffff;
  transform-origin: center;
}
.mobile-menu-close span:nth-child(1) {
  transform: translate(-50%, -50%) rotate(45deg);
}
.mobile-menu-close span:nth-child(2) {
  transform: translate(-50%, -50%) rotate(-45deg);
}
.mobile-menu-nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-7, 2.5rem);
  text-align: center;
}
.mobile-menu-link {
  font-family: var(--font-body);
  font-size: 1.5rem;
  font-weight: 300;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.92);
  text-decoration: none;
  transition: color 0.2s ease;
}
.mobile-menu-link:hover,
.mobile-menu-link:focus-visible {
  color: var(--color-accent);
}

@media (min-width: 768px) {
  .mobile-menu {
    display: none;
  }
}

body.menu-open {
  overflow: hidden;
}

.nav-cta {
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) var(--space-5);
  background: var(--color-accent);
  color: var(--color-dark);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-decoration: none;
  border-radius: var(--radius-full);
  transition: background var(--transition-interactive), transform var(--transition-interactive);
}
.nav-cta:hover {
  background: var(--color-accent-hover);
}
.nav-cta:active {
  transform: scale(0.97);
}

/* ========================================================
   HERO — Full-bleed photo, text left
   ======================================================== */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: flex-end;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
}
.hero-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 40%;
}
.hero-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgba(8, 12, 18, 0.78) 0%,
    rgba(10, 12, 18, 0.55) 45%,
    rgba(10, 12, 18, 0.35) 75%,
    rgba(10, 8, 6, 0.25) 100%
  );
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-32) var(--space-6) clamp(3rem, 8vh, 6rem);
  width: 100%;
}

.hero h1 {
  font-family: var(--font-display);
  font-size: clamp(2.34rem, 0.43rem + 3.83vw, 3.61rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.12;
  margin-bottom: var(--space-6);
  max-width: 820px;
  letter-spacing: -0.005em;
}

/* Giant editorial wordmark hero */
.hero h1.hero-wordmark {
  font-family: var(--font-display);
  font-size: clamp(2.55rem, 1.1rem + 5.05vw, 5.4rem);
  font-weight: 200;
  color: #fff;
  line-height: 0.95;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  margin-bottom: var(--space-6);
  max-width: none;
}
@media (max-width: 767px) {
  .hero h1.hero-wordmark {
    font-size: clamp(2rem, 1.1rem + 3.6vw, 3.25rem);
  }
}

.hero-sub {
  font-family: var(--font-body);
  font-size: clamp(1rem, 0.85rem + 0.45vw, 1.25rem);
  font-weight: 300;
  color: rgba(255,255,255,0.9);
  margin-bottom: var(--space-8);
  max-width: 560px;
  line-height: 1.5;
}

.hero-offer {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.68);
  margin-bottom: var(--space-8);
  max-width: 460px;
  line-height: 1.55;
  font-style: italic;
  letter-spacing: 0.005em;
}

.hero-explainer {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 400;
  color: rgba(255, 255, 255, 0.55);
  margin: var(--space-4) 0 0;
  max-width: none;
  line-height: 1.5;
  letter-spacing: 0.02em;
  white-space: nowrap;
}
@media (max-width: 767px) {
  .hero-explainer {
    white-space: normal;
    max-width: none;
    font-size: 0.72rem;
    line-height: 1.6;
  }
  .hero-explainer-intro {
    display: block;
    white-space: nowrap;
  }
}

.btn-hero {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-6);
  background: transparent;
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-accent);
  transition: background var(--transition-interactive), color var(--transition-interactive), transform var(--transition-interactive), box-shadow var(--transition-interactive);
  cursor: pointer;
}
.btn-hero:hover,
.btn-hero:focus-visible {
  background: var(--color-accent);
  color: var(--color-dark);
  box-shadow: 0 6px 24px rgba(252,177,65,0.28);
}
.btn-hero:active {
  transform: scale(0.97);
}

/* ========================================================
   SECTIONS — Content containers
   ======================================================== */
.section {
  padding: clamp(var(--space-12), 8vw, var(--space-24)) var(--space-6);
}
.section-inner {
  max-width: var(--content-wide);
  margin: 0 auto;
}

/* ========================================================
   SPLIT TEXT — Large heading left, body right (TR style)
   ======================================================== */
.split-text {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 768px) {
  .split-text {
    grid-template-columns: 5fr 7fr;
    gap: var(--space-12);
  }
}

.split-heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.2;
  letter-spacing: 0.01em;
}
.split-heading em {
  font-style: italic;
  color: var(--color-accent);
  font-weight: 300;
}

.split-body p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-5);
}
.split-body p:last-child {
  margin-bottom: 0;
}
.split-body em {
  font-style: italic;
  color: var(--color-accent);
  font-weight: 500;
}

/* ========================================================
   DIVIDER
   ======================================================== */
.section-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  max-width: var(--content-wide);
  margin: 0 auto;
}

/* ========================================================
   EMPOWER — Icon bullet list (left heading, right items)
   ======================================================== */
.empower-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 768px) {
  .empower-grid {
    grid-template-columns: 1fr 2fr;
    gap: var(--space-12);
  }
}

.empower-heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.15;
  letter-spacing: 0.01em;
}

.empower-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-5);
}
.empower-item {
  display: flex;
  align-items: flex-start;
  gap: var(--space-4);
}
.empower-icon {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-accent);
}
.empower-icon svg {
  width: 48px;
  height: 48px;
}
.empower-item p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text);
  line-height: 1.5;
  padding-top: var(--space-3);
}

/* ========================================================
   QUOTE BANNER — Full-bleed photo with centered quote
   ======================================================== */
.quote-banner {
  position: relative;
  padding: clamp(var(--space-16), 10vw, var(--space-32)) var(--space-6);
  text-align: center;
  overflow: hidden;
}
.quote-banner-bg {
  position: absolute;
  inset: 0;
}
.quote-banner-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.quote-banner-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0,0,0,0.6);
}
.quote-banner-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}
.quote-text {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 300;
  color: #fff;
  line-height: 1.4;
  font-style: italic;
  margin-bottom: var(--space-6);
}
.quote-text::before { content: "\201C"; }
.quote-text::after { content: "\201D"; }
.quote-attribution {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: rgba(255,255,255,0.8);
  font-weight: 500;
}

/* ========================================================
   COURSE BREAKDOWN — Part 1/2/3 grid
   ======================================================== */
.breakdown-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 200;
  color: var(--color-text);
  line-height: 1.05;
  letter-spacing: 0.02em;
  margin-bottom: var(--space-8);
}

.breakdown-divider {
  border: none;
  border-top: 1px solid var(--color-border);
  margin-bottom: var(--space-8);
}

.breakdown-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 768px) {
  .breakdown-grid {
    grid-template-columns: 1fr 1fr;
    gap: var(--space-10) var(--space-12);
  }
}

.breakdown-part {
  padding-bottom: var(--space-8);
  border-bottom: 1px solid var(--color-border);
}
.breakdown-part:last-child {
  border-bottom: none;
}
@media (min-width: 768px) {
  .breakdown-part {
    border-bottom: none;
  }
  .breakdown-grid > .breakdown-part:nth-child(1),
  .breakdown-grid > .breakdown-part:nth-child(2) {
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--color-border);
  }
}

.part-label {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  color: var(--color-text-faint);
  margin-bottom: var(--space-3);
}
.part-title {
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: var(--space-3);
}
.part-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
}
.part-body em {
  font-style: italic;
  color: var(--color-accent);
  font-weight: 500;
}
.breakdown-footnote {
  font-family: var(--font-body);
  font-size: var(--text-sm);
  line-height: 1.65;
  color: var(--color-text-muted);
  text-align: center;
  max-width: 760px;
  margin: var(--space-10) auto 0;
  font-style: italic;
}

/* ========================================================
   FAQ — Two-column: heading left, accordion right
   ======================================================== */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
}
@media (min-width: 768px) {
  .faq-grid {
    grid-template-columns: 2fr 3fr;
    gap: var(--space-12);
  }
}

.faq-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-2);
}
.faq-label-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
}

.faq-title {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 200;
  color: var(--color-text);
  line-height: 1.05;
  margin-bottom: var(--space-6);
}

.faq-contact {
  display: inline-flex;
  align-items: center;
  padding: var(--space-3) var(--space-6);
  border: 1px solid var(--color-accent);
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
  transition: background var(--transition-interactive), border-color var(--transition-interactive), color var(--transition-interactive);
}
.faq-contact:hover {
  background: var(--color-accent);
  border-color: var(--color-accent);
  color: var(--color-dark);
}

.faq-accordion {
  display: flex;
  flex-direction: column;
}
.faq-item {
  border-bottom: 1px solid var(--color-border);
}
.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-5) 0;
  font-family: var(--font-body);
  font-size: var(--text-lg);
  font-weight: 500;
  color: var(--color-text);
  text-align: left;
  cursor: pointer;
  background: none;
  border: none;
  transition: color var(--transition-interactive);
}
.faq-question:hover {
  color: var(--color-text-muted);
}
.faq-chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  transition: transform 0.3s var(--ease-out);
}
.faq-item.open .faq-chevron {
  transform: rotate(180deg);
}
.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.4s var(--ease-out), padding 0.3s var(--ease-out);
}
.faq-item.open .faq-answer {
  max-height: 800px;
  padding-bottom: var(--space-5);
}
.faq-answer p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}
.faq-answer p:last-child {
  margin-bottom: 0;
}
.faq-inline-link {
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid rgba(252, 177, 65, 0.4);
  transition: border-color 0.2s ease, color 0.2s ease;
}
.faq-inline-link:hover,
.faq-inline-link:focus-visible {
  border-bottom-color: var(--color-accent);
  color: var(--color-accent-hover);
}
.faq-inline-link em {
  font-style: italic;
  color: inherit;
}
.faq-question-text {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
  text-align: left;
  line-height: 1.4;
}
.faq-question-text em,
.faq-question em {
  display: inline;
  white-space: normal;
}
.faq-question em {
  font-style: italic;
  color: var(--color-accent);
  font-weight: 400;
}

/* ========================================================
   BOTTOM CTA — Full-bleed mountain photo
   ======================================================== */
.cta-banner {
  position: relative;
  min-height: 55vh;
  display: flex;
  align-items: center;
  overflow: hidden;
}
.cta-banner-bg {
  position: absolute;
  inset: 0;
}
.cta-banner-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 30%;
}
.cta-banner-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    rgba(8, 12, 18, 0.78) 0%,
    rgba(10, 12, 18, 0.55) 50%,
    rgba(10, 8, 6, 0.4) 100%
  );
}
.cta-banner-content {
  position: relative;
  z-index: 2;
  max-width: var(--content-wide);
  margin: 0 auto;
  padding: var(--space-16) var(--space-6);
  width: 100%;
}
.cta-banner h2 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: 200;
  color: #fff;
  line-height: 1.1;
  margin-bottom: var(--space-4);
  max-width: 600px;
  letter-spacing: 0.02em;
}
.cta-banner-sub {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: rgba(255,255,255,0.85);
  margin-bottom: var(--space-6);
  max-width: 480px;
  line-height: 1.6;
}

.btn-cta-outline {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-6);
  background: transparent;
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-accent);
  transition: background var(--transition-interactive), color var(--transition-interactive), transform var(--transition-interactive), box-shadow var(--transition-interactive);
  cursor: pointer;
}
.btn-cta-outline:hover,
.btn-cta-outline:focus-visible {
  background: var(--color-accent);
  color: var(--color-dark);
  box-shadow: 0 6px 24px rgba(252,177,65,0.28);
}
.btn-cta-outline:active {
  transform: scale(0.97);
}

/* ========================================================
   FOOTER — Dark
   ======================================================== */
.site-footer {
  background: var(--color-dark);
  padding: var(--space-10) var(--space-6);
  text-align: center;
}
.footer-inner {
  max-width: var(--content-default);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-4);
}
.footer-brand {
  display: flex;
  align-items: center;
  text-decoration: none;
}
.footer-logo-img {
  height: 36px;
  width: auto;
  display: block;
  opacity: 0.85;
  transition: opacity 0.2s ease;
}
.footer-brand:hover .footer-logo-img {
  opacity: 1;
}
.footer-copy {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  color: rgba(255,255,255,0.35);
}
.footer-copy a {
  color: rgba(255,255,255,0.35);
  text-decoration: underline;
}
.footer-copy a:hover {
  color: rgba(255,255,255,0.6);
}

/* ========================================================
   SKIP LINK
   ======================================================== */
.skip-link {
  position: absolute;
  top: -100%;
  left: var(--space-4);
  z-index: 999;
  padding: var(--space-2) var(--space-4);
  background: var(--color-accent);
  color: var(--color-dark);
  text-decoration: none;
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}
.skip-link:focus {
  top: var(--space-2);
}

/* ========================================================
   SACRED GEOMETRY OVERLAYS
   ======================================================== */
.sacred-geometry {
  position: absolute;
  z-index: 1;
  pointer-events: none;
}
.sacred-geometry svg {
  width: 100%;
  height: 100%;
}

/* Empower section: positioned behind, uses currentColor for dark-on-light */
.section-empower {
  position: relative;
  overflow: hidden;
}
.empower-geometry {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(80vh, 600px);
  height: min(80vh, 600px);
  color: var(--color-text);
}

@media (max-width: 767px) {
  .empower-geometry {
    width: 90vw;
    height: 90vw;
  }
}

/* Hero: large Metatron's Cube, centered */
.hero-geometry {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(80vh, 640px);
  height: min(80vh, 640px);
}

/* Quote banner: smaller, centered */
.quote-geometry {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(55vh, 420px);
  height: min(55vh, 420px);
}

/* CTA banner: right-side offset */
.cta-geometry {
  top: 50%;
  left: 50%;
  right: auto;
  transform: translate(-50%, -50%);
  width: min(80vh, 640px);
  height: min(80vh, 640px);
}

@media (max-width: 767px) {
  .hero-geometry {
    width: 85vw;
    height: 85vw;
  }
  .quote-geometry {
    width: 70vw;
    height: 70vw;
  }
  .cta-geometry {
    width: 95vw;
    height: 95vw;
  }
}

/* ========================================================
   SCROLL REVEAL
   ======================================================== */
.fade-in { opacity: 1; }
@supports (animation-timeline: scroll()) {
  .fade-in {
    opacity: 0;
    animation: reveal-fade linear both;
    animation-timeline: view();
    animation-range: entry 0% entry 80%;
  }
}
@keyframes reveal-fade { to { opacity: 1; } }

/* ========================================================
   MOBILE
   ======================================================== */
@media (max-width: 767px) {
  .hero {
    min-height: 90vh;
  }
  .hero-content {
    padding: var(--space-24) var(--space-4) clamp(2.5rem, 8vh, 4rem);
  }
  .hero h1 {
    font-size: clamp(1.79rem, 1.19rem + 2.72vw, 2.47rem);
    line-height: 1.12;
  }
  .hero-sub {
    font-size: clamp(0.9rem, 0.8rem + 0.4vw, 1rem);
    line-height: 1.55;
    margin-bottom: var(--space-6);
  }
  .hero-bg img {
    object-position: center 35%;
  }
  .hero-overlay {
    background: linear-gradient(
      to bottom,
      rgba(8, 12, 18, 0.65) 0%,
      rgba(10, 12, 18, 0.45) 60%,
      rgba(10, 8, 6, 0.3) 100%
    );
  }
  .site-nav {
    padding: var(--space-3) var(--space-4);
  }
  .nav-logo-img {
    height: 30px;
    max-width: 60vw;
  }
  .nav-cta {
    padding: var(--space-2) var(--space-3);
    font-size: 0.7rem;
  }
  .split-heading {
    font-size: var(--text-xl);
  }
  .empower-heading {
    font-size: var(--text-xl);
  }
  .breakdown-title {
    font-size: var(--text-2xl);
  }
  .faq-title {
    font-size: var(--text-2xl);
  }
  .cta-banner {
    min-height: 50vh;
  }
  .cta-banner h2 {
    font-size: var(--text-2xl);
  }
  .cta-banner-overlay {
    background: linear-gradient(
      to bottom,
      rgba(8, 12, 18, 0.7) 0%,
      rgba(10, 12, 18, 0.5) 60%,
      rgba(10, 8, 6, 0.4) 100%
    );
  }
  .btn-hero, .btn-cta-outline, .btn-audience {
    padding: var(--space-2) var(--space-5);
    font-size: var(--text-xs);
  }
}

/* ========================================================
   ABOUT ADRIAN  — trust confirmation section
   ======================================================== */
.section-about {
  background: var(--color-bg);
}
.about-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-8);
  max-width: 1000px;
  margin: 0 auto;
  align-items: center;
}
/* Hide the empty photo placeholder on mobile — it takes too much space.
   When a real portrait photo is added (replacing the placeholder), this
   rule can be removed or scoped so the photo shows beneath the text. */
.about-photo:has(.about-photo-placeholder) {
  display: none;
}
@media (min-width: 768px) {
  .about-photo:has(.about-photo-placeholder) {
    display: block;
  }
}
@media (min-width: 768px) {
  .about-grid {
    grid-template-columns: 280px 1fr;
    gap: var(--space-12);
  }
}
.about-photo {
  width: 100%;
}
.about-photo img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 6px;
  filter: grayscale(0.15);
}
.about-photo-placeholder {
  aspect-ratio: 4 / 5;
  background: linear-gradient(135deg, #1a1a1a 0%, #262626 100%);
  border: 1px solid rgba(252, 177, 65, 0.15);
  border-radius: 6px;
  display: flex;
  align-items: flex-end;
  justify-content: flex-start;
  padding: var(--space-5);
  color: rgba(255, 255, 255, 0.45);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: 0.2em;
}
.about-body .about-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  color: var(--color-accent);
  margin-bottom: var(--space-3);
  line-height: 1.4;
}
.about-heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 300;
  color: var(--color-text);
  line-height: 1.15;
  letter-spacing: 0.005em;
  margin-bottom: var(--space-5);
}
.about-body .about-lede {
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-style: italic;
  color: var(--color-text);
  margin-bottom: var(--space-5);
  line-height: 1.6;
}
.about-body p {
  font-family: var(--font-body);
  font-size: var(--text-base);
  color: var(--color-text-muted);
  line-height: 1.7;
  margin-bottom: var(--space-4);
}
.about-body p:last-child {
  margin-bottom: 0;
}
.about-body .about-link {
  display: inline-block;
  margin-top: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-base);
  font-weight: 500;
  color: var(--color-accent);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s var(--ease-out);
}
.about-body .about-link:hover,
.about-body .about-link:focus-visible {
  border-bottom-color: var(--color-accent);
}

/* ========================================================
   THRESHOLD TEASER  — invitation to the deeper page
   ======================================================== */
.section-threshold-teaser {
  padding: var(--space-20) 0;
}
.threshold-teaser-grid {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
}
.threshold-teaser-eyebrow {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.25em;
  color: var(--color-accent);
  margin: 0 0 var(--space-6);
}
.threshold-teaser-heading {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 0.9rem + 2.2vw, 2.5rem);
  font-weight: 300;
  color: #fff;
  line-height: 1.2;
  letter-spacing: 0;
  margin: 0 0 var(--space-6);
}
.threshold-teaser-heading em {
  font-style: italic;
  color: var(--color-accent);
  font-weight: 300;
}
.threshold-teaser-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  margin: 0 0 var(--space-8);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}
.threshold-teaser-body em {
  font-style: italic;
  color: var(--color-accent);
  font-weight: 500;
}
.threshold-teaser-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--color-accent);
  text-decoration: none;
  padding: var(--space-2) 0;
  border-bottom: 1.5px solid var(--color-accent);
  transition: gap 0.2s ease, color 0.2s ease;
}
.threshold-teaser-link:hover,
.threshold-teaser-link:focus-visible {
  gap: var(--space-3);
  color: var(--color-accent-hover);
}
@media (max-width: 767px) {
  .section-threshold-teaser {
    padding: var(--space-16) var(--space-4);
  }
}

/* ========================================================
   WHAT IT IS / ISN'T  — comparison section
   ======================================================== */
.section-comparison {
  position: relative;
  background: var(--color-dark);
  color: #fff;
  overflow: hidden;
}
.comparison-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.comparison-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.55;
}
.comparison-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    180deg,
    rgba(8, 12, 18, 0.78) 0%,
    rgba(10, 12, 18, 0.6) 50%,
    rgba(8, 12, 18, 0.82) 100%
  );
}
.comparison-geometry {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(75vh, 620px);
  height: min(75vh, 620px);
  z-index: 1;
  pointer-events: none;
  color: #fff;
}
.comparison-geometry svg {
  width: 100%;
  height: 100%;
}
.section-comparison > .section-inner {
  position: relative;
  z-index: 2;
}
.comparison-title {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 300;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -0.005em;
  margin-bottom: var(--space-10);
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
}
.comparison-title em {
  font-style: italic;
  color: var(--color-accent);
  font-weight: 300;
}
.comparison-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: var(--space-12);
  row-gap: 0;
  max-width: 1100px;
  margin: 0 auto;
  border-top: 1px solid rgba(255, 255, 255, 0.10);
}
.comparison-col {
  padding: 0;
  background: transparent;
  border: 0;
}
.comparison-col-header {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-5) 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
}
.comparison-col-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  width: auto;
  height: auto;
  border-radius: 0;
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
}
.comparison-col-label {
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color: rgba(255, 255, 255, 0.55);
}
.comparison-not .comparison-col-mark {
  color: #e25c4a;
  font-size: 1.15rem;
  font-weight: 600;
}
.comparison-not li::before {
  content: "✕";
  position: absolute;
  left: 0;
  top: calc(var(--space-5) + 1px);
  color: #e25c4a;
  font-size: 1.05rem;
  font-weight: 600;
  line-height: 1.5;
}
.comparison-is li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: calc(var(--space-5) + 1px);
  color: var(--color-accent);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.5;
}
.comparison-is .comparison-col-mark {
  color: var(--color-accent);
  font-size: 1.2rem;
  font-weight: 600;
}
.comparison-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}
.comparison-col li {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.5;
  padding: var(--space-5) 0 var(--space-5) calc(1.4em + 12px);
  border-bottom: 1px solid rgba(255, 255, 255, 0.10);
  position: relative;
}
.comparison-not li {
  color: rgba(255, 255, 255, 0.42);
  font-weight: 400;
}
.comparison-is li {
  color: #fff;
  font-weight: 500;
}
.comparison-footnote {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.62);
  text-align: center;
  max-width: 760px;
  margin: var(--space-12) auto 0;
  font-style: italic;
}

@media (max-width: 767px) {
  .comparison-grid {
    grid-template-columns: 1fr;
    column-gap: 0;
  }
  .comparison-title {
    font-size: var(--text-xl);
  }
  /* On mobile, keep NOT and IS stacked but visually grouped */
  .comparison-is .comparison-col-header {
    margin-top: var(--space-6);
  }
}

/* ========================================================
   EMPOWER footnote
   ======================================================== */
.empower-footnote {
  grid-column: 1 / -1;
  text-align: center;
  white-space: nowrap;
  max-width: none;
  font-family: var(--font-body);
  font-size: var(--text-sm);
  font-style: italic;
  color: var(--color-text-muted);
  line-height: 1.65;
  margin-top: var(--space-6);
  padding-left: 0;
}
@media (max-width: 767px) {
  .empower-footnote {
    grid-column: 1;
    padding-left: 0;
    white-space: normal;
    text-align: center;
    font-size: 0.85rem;
  }
}

/* ========================================================
   STEP 3 aside text (assessment breakdown)
   ======================================================== */
.part-body-aside {
  margin-top: var(--space-3);
  font-style: italic;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

/* ========================================================
   WHO THIS IS FOR — audience section
   ======================================================== */
.section-audience {
  background: var(--color-dark);
  color: #fff;
  padding-top: var(--space-20);
  padding-bottom: var(--space-20);
  position: relative;
  overflow: hidden;
}
.audience-bg {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.audience-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0.55;
}
.audience-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(
      180deg,
      rgba(8, 12, 18, 0.78) 0%,
      rgba(10, 12, 18, 0.62) 50%,
      rgba(8, 12, 18, 0.82) 100%
    ),
    radial-gradient(
      ellipse at 50% 50%,
      rgba(10, 8, 6, 0.10) 0%,
      rgba(10, 8, 6, 0.40) 100%
    );
}
.audience-geometry {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(80vh, 640px);
  height: min(80vh, 640px);
}
@media (max-width: 767px) {
  .audience-geometry {
    width: 95vw;
    height: 95vw;
  }
}
.audience-inner {
  max-width: 760px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 2;
}
.audience-heading {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: 300;
  color: #fff;
  line-height: 1.2;
  letter-spacing: -0.005em;
  margin-bottom: var(--space-6);
}
.audience-heading em {
  font-style: italic;
  color: var(--color-accent);
}
.audience-body {
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.78);
  margin-bottom: var(--space-8);
}
.audience-body p {
  margin: 0 0 var(--space-4);
}
.audience-body p:last-child {
  margin-bottom: 0;
}
.btn-audience {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: var(--space-2) var(--space-6);
  background: transparent;
  color: var(--color-accent);
  font-family: var(--font-body);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-radius: var(--radius-full);
  border: 1.5px solid var(--color-accent);
  transition: background var(--transition-interactive), color var(--transition-interactive), transform var(--transition-interactive), box-shadow var(--transition-interactive);
  cursor: pointer;
}
.btn-audience:hover,
.btn-audience:focus-visible {
  background: var(--color-accent);
  color: var(--color-dark);
  box-shadow: 0 6px 24px rgba(252, 177, 65, 0.28);
}
.btn-audience:active {
  transform: scale(0.97);
}
@media (max-width: 767px) {
  .audience-heading {
    font-size: var(--text-xl);
  }
  .section-audience {
    padding-top: var(--space-12);
    padding-bottom: var(--space-12);
  }
}

/* ============================================================
   Heading consistency: kill em italics/orange in headings.
   Use class .tml on em inside headings for the brand name
   to keep it orange.
   ============================================================ */
h1 em,
h2 em,
h3 em,
.split-heading em,
.comparison-title em,
.audience-heading em,
.threshold-teaser-heading em,
.ab-h2 em,
.ab-hero h1 em {
  font-style: normal;
  font-weight: inherit;
  color: inherit;
}
h1 em.tml,
h2 em.tml,
h3 em.tml,
.ab-h2 em.tml,
.ab-hero h1 em.tml,
.split-heading em.tml,
.comparison-title em.tml,
.audience-heading em.tml,
.threshold-teaser-heading em.tml {
  color: var(--color-accent);
  font-style: normal;
  font-weight: inherit;
}

/* ============================================================
   Unified moody backdrop treatment — applies to every image
   section across the site. Mirrors the audience/comparison
   treatment: heavy dark vignette, low image opacity, warm edges.
   ============================================================ */

/* Images: dim them everywhere (a touch brighter than before) */
.quote-banner-bg img,
.cta-banner-bg img,
.comparison-bg img,
.audience-bg img,
.ab-section-bg .ab-bg img,
.ab-cta-bg img,
.ab-hero-bg img {
  opacity: 0.58 !important;
}

/* Hero image: brighter than the others */
.hero-bg img {
  opacity: 0.72 !important;
}

/* The darkening + warm-edge formula (cinematic vignette) - lifted slightly */
.quote-banner-overlay,
.cta-banner-overlay,
.comparison-overlay,
.audience-overlay,
.ab-section-bg .ab-bg-overlay,
.ab-cta-overlay,
.ab-hero-overlay {
  background:
    radial-gradient(
      ellipse 70% 60% at 50% 50%,
      rgba(13, 13, 13, 0.78) 0%,
      rgba(13, 13, 13, 0.62) 45%,
      rgba(13, 13, 13, 0.40) 85%,
      rgba(13, 13, 13, 0.28) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8, 12, 18, 0.40) 0%,
      rgba(8, 12, 18, 0.18) 50%,
      rgba(8, 12, 18, 0.50) 100%
    ) !important;
}

/* Hero: lighter overlay than the rest */
.hero-overlay {
  background:
    radial-gradient(
      ellipse 75% 65% at 50% 55%,
      rgba(13, 13, 13, 0.55) 0%,
      rgba(13, 13, 13, 0.40) 45%,
      rgba(13, 13, 13, 0.22) 85%,
      rgba(13, 13, 13, 0.12) 100%
    ),
    linear-gradient(
      180deg,
      rgba(8, 12, 18, 0.25) 0%,
      rgba(8, 12, 18, 0.10) 50%,
      rgba(8, 12, 18, 0.40) 100%
    ) !important;
}