/* ==========================================================================
   Regie Tiu — Speaker Site
   Shared stylesheet for all pages. Plain CSS, no build step —
   safe to paste as-is into a GoHighLevel custom CSS block, or keep
   as a linked stylesheet if the embed supports separate assets.

   Token system and mobile nav pattern sourced from the approved
   homepage mockup (regie-tiu-homepage-mockup.html).
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Anton&family=Fraunces:ital,wght@0,600;1,500;1,600&family=Inter:wght@400;500;600;700;800&display=swap');

:root {
  --navy-deep: #0A0E27;
  --navy-surface: #131A3D;
  --navy-surface-2: #1B2350;
  --gold: #F5A623;
  --gold-light: #FBD37A;
  --cream: #F3F1EA;
  --slate: #7C84AC;
  --max: 1180px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--navy-deep);
  color: var(--cream);
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

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

.display {
  font-family: 'Anton', 'Arial Narrow', sans-serif;
  text-transform: uppercase;
  letter-spacing: 0.01em;
  line-height: 0.95;
}
.quote-face {
  font-family: 'Fraunces', Georgia, serif;
  font-style: italic;
  font-weight: 500;
}

a { color: inherit; }
a:focus-visible, button:focus-visible { outline: 3px solid var(--gold-light); outline-offset: 3px; }

.wrap { max-width: var(--max); margin: 0 auto; padding: 0 28px; }

h1, h2, h3, h4 { margin: 0; color: var(--cream); }
p { margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

/* ---------- Nav ---------- */
nav {
  position: sticky; top: 0; z-index: 50;
  background: rgba(10, 14, 39, 0.88);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid rgba(245, 166, 35, 0.15);
}
.nav-inner {
  display: flex; align-items: center; justify-content: space-between;
  padding: 18px 28px; max-width: var(--max); margin: 0 auto;
}
.nav-logo { font-family: 'Anton', sans-serif; font-size: 1.15rem; letter-spacing: 0.04em; text-decoration: none; color: var(--cream); }
.nav-links { display: flex; gap: 32px; list-style: none; margin: 0; padding: 0; font-size: 0.9rem; font-weight: 500; }
.nav-links a { text-decoration: none; color: var(--slate); transition: color .2s; }
.nav-links a:hover, .nav-links a.active { color: var(--cream); }
.nav-cta {
  background: var(--gold); color: var(--navy-deep); font-weight: 700; font-size: 0.85rem;
  padding: 10px 20px; border-radius: 3px; text-decoration: none; letter-spacing: 0.02em;
  transition: background .2s; white-space: nowrap;
}
.nav-cta:hover { background: var(--gold-light); }
.nav-toggle { display: none; }
.mobile-menu { display: none; }

/* ---------- Buttons ---------- */
.btn-primary {
  background: var(--gold); color: var(--navy-deep); font-weight: 700; font-size: 0.95rem;
  padding: 16px 30px; border-radius: 3px; text-decoration: none; display: inline-block;
  border: none; cursor: pointer;
  transition: transform .2s, background .2s; letter-spacing: 0.01em;
}
.btn-primary:hover { background: var(--gold-light); transform: translateY(-2px); }
.btn-secondary {
  border: 1.5px solid rgba(243, 241, 234, 0.3); color: var(--cream); font-weight: 600; font-size: 0.95rem;
  padding: 15px 28px; border-radius: 3px; text-decoration: none; display: inline-block;
  background: none; cursor: pointer;
  transition: border-color .2s, background .2s;
}
.btn-secondary:hover { border-color: var(--gold); background: rgba(245, 166, 35, 0.06); }
.btn-row { display: flex; gap: 16px; flex-wrap: wrap; }

/* ---------- Hero ---------- */
.hero {
  position: relative; overflow: hidden;
  padding: 80px 0 0;
  background:
    radial-gradient(ellipse 900px 500px at 80% 10%, rgba(245, 166, 35, 0.08), transparent 60%),
    var(--navy-deep);
}
.hero-grid {
  display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 20px; align-items: center;
  min-height: 640px; position: relative;
}
.loyalty-word {
  position: absolute; left: -6px; top: 38%; transform: translateY(-50%);
  font-family: 'Anton', sans-serif; text-transform: uppercase;
  font-size: clamp(70px, 13vw, 190px);
  line-height: 0.85; letter-spacing: 0.01em;
  color: transparent;
  -webkit-text-stroke: 1px rgba(245, 166, 35, 0.12);
  z-index: 1; pointer-events: none; white-space: nowrap;
}
.hero-content { position: relative; z-index: 3; padding-bottom: 60px; }
.eyebrow {
  display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em;
  color: var(--gold); text-transform: uppercase; margin-bottom: 22px;
}
.hero-tagline {
  font-size: clamp(2.1rem, 4.2vw, 3.4rem);
  margin: 0 0 22px; font-weight: 800; letter-spacing: -0.01em;
}
.hero-tagline .accent { color: var(--gold); }
.hero-sub {
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 500;
  font-size: 1.25rem; color: var(--cream); opacity: 0.85; max-width: 480px; margin: 0 0 34px;
}
.hero-photo {
  position: relative; z-index: 2; align-self: end;
  height: 560px; border-radius: 4px 4px 0 0; overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
}
.hero-photo img {
  width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%;
}
.hero-photo::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 14, 39, 0) 55%, rgba(10, 14, 39, 0.85) 100%);
  pointer-events: none;
}

/* ---------- Press bar ---------- */
.press-bar {
  border-top: 1px solid rgba(243, 241, 234, 0.08);
  border-bottom: 1px solid rgba(243, 241, 234, 0.08);
  padding: 26px 0;
}
.press-inner { display: flex; flex-direction: column; align-items: center; gap: 22px; text-align: center; }
.press-label { font-size: 0.72rem; letter-spacing: 0.16em; color: var(--slate); font-weight: 700; text-transform: uppercase; white-space: nowrap; }
.press-logos { display: flex; gap: 48px; flex-wrap: wrap; align-items: center; justify-content: center; width: 100%; }
.press-logos img {
  /* Logos have wildly different native aspect ratios (Business Insider and
     Yahoo Finance are elongated wordmarks; NBC is a near-square badge).
     Bounding by both max-height AND max-width keeps every mark inside the
     same footprint instead of the wordmarks dwarfing the compact ones. */
  height: auto; width: auto;
  max-height: 26px; max-width: 140px;
  /* Flattens each brand mark to a single off-white silhouette so the row
     reads as one consistent system instead of clashing brand colors. */
  filter: brightness(0) invert(1);
  opacity: 0.65;
  transition: opacity .25s;
}
.press-logos img:hover { opacity: 1; }
.press-logos .cnbc-select {
  display: inline-flex; align-items: center; gap: 10px;
  color: var(--cream); opacity: 0.65; transition: opacity .25s;
}
.press-logos .cnbc-select:hover { opacity: 1; }
.press-logos .cnbc-select .cnbc-mark { font-weight: 800; font-size: 1.3rem; letter-spacing: 0.01em; }
.press-logos .cnbc-select .divider { width: 1px; height: 18px; background: currentColor; opacity: 0.5; }
.press-logos .cnbc-select .select-mark { font-weight: 600; font-size: 0.95rem; letter-spacing: 0.06em; }

/* ---------- Section shared ---------- */
section { padding: 100px 0; }
.section-inner-narrow { max-width: 760px; margin: 0 auto; text-align: center; }
.eyebrow-line { display: flex; align-items: center; gap: 14px; justify-content: center; margin-bottom: 28px; }
.eyebrow-line::before, .eyebrow-line::after { content: ''; height: 1px; width: 36px; background: rgba(245, 166, 35, 0.4); }
.eyebrow-text { font-size: 0.78rem; letter-spacing: 0.14em; color: var(--gold); text-transform: uppercase; font-weight: 700; margin: 0 0 14px; }

/* ---------- Burden / deep cause ---------- */
.burden-line {
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 500;
  font-size: clamp(1.5rem, 2.6vw, 2.1rem); color: var(--slate); margin: 0 0 34px;
}
.burden-body { font-size: 1.1rem; color: var(--cream); opacity: 0.85; margin-bottom: 34px; }
.deep-cause {
  font-family: 'Anton', sans-serif; text-transform: uppercase; letter-spacing: 0.01em;
  font-size: clamp(1.6rem, 3.2vw, 2.6rem); color: var(--cream); margin: 0;
}
.deep-cause .g { color: var(--gold); }

/* ---------- Big idea band ---------- */
.big-idea {
  background: linear-gradient(135deg, var(--gold) 0%, #E8941A 100%);
  color: var(--navy-deep); padding: 90px 0; text-align: center;
}
.big-idea-text {
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600;
  font-size: clamp(1.8rem, 4vw, 3rem); max-width: 820px; margin: 0 auto 24px; line-height: 1.25;
}
.big-idea-sub { font-size: 1.05rem; font-weight: 600; max-width: 560px; margin: 0 auto 30px; opacity: 0.85; }
.big-idea a {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 800; text-decoration: none;
  border-bottom: 2px solid var(--navy-deep); padding-bottom: 3px; font-size: 0.95rem;
}

/* ---------- Framework ---------- */
.fw-head { text-align: center; max-width: 640px; margin: 0 auto 60px; }
.fw-title { font-size: clamp(1.8rem, 3.2vw, 2.5rem); margin: 0 0 14px; }
.fw-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; }
.fw-card {
  background: var(--navy-surface); border: 1px solid rgba(245, 166, 35, 0.12);
  border-radius: 6px; padding: 38px 30px; position: relative; overflow: hidden;
}
.fw-num {
  font-family: 'Anton', sans-serif; font-size: 3.2rem; color: transparent;
  -webkit-text-stroke: 1.5px rgba(245, 166, 35, 0.5); line-height: 1; margin-bottom: 18px; display: block;
}
.fw-card h3 { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 1.3rem; margin: 0 0 12px; letter-spacing: 0.01em; }
.fw-card p { color: var(--slate); font-size: 0.95rem; margin: 0; line-height: 1.65; }

/* Numbered step list inside a card (e.g. methodology answers) —
   manual numerals in a span, same idiom as .check-list's checkmarks. */
.step-answers { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.step-answers li { display: flex; gap: 10px; align-items: baseline; color: var(--slate); font-size: 0.95rem; line-height: 1.65; }
.step-answers .step-num { flex: none; font-family: 'Anton', sans-serif; color: var(--gold); font-size: 0.85rem; min-width: 1.1em; }

/* ---------- Meet Regie / two-column photo blocks ---------- */
.split-block { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 50px; align-items: center; }
.split-block.reverse { grid-template-columns: 1.15fr 0.85fr; }
.split-block.reverse .split-photo { order: 2; }
.split-photo {
  height: 420px; align-self: stretch; border-radius: 6px; overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5);
}
.split-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 25%; }
.split-body p { color: var(--cream); opacity: 0.85; font-size: 1.05rem; margin-bottom: 14px; }
.split-body p:last-of-type { margin-bottom: 28px; }

/* ---------- Video reel ---------- */
.reel-frame {
  position: relative; aspect-ratio: 16/9; background: var(--navy-surface);
  border: 1px solid rgba(245, 166, 35, 0.15); border-radius: 6px;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.reel-play {
  width: 76px; height: 76px; border-radius: 50%; background: var(--gold);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  border: none;
}
.reel-note {
  position: absolute; bottom: 18px; color: var(--slate); font-size: 0.85rem;
  font-style: italic; font-family: 'Fraunces', Georgia, serif;
}

/* ---------- Stats strip ---------- */
.stats-strip {
  background: var(--navy-surface); border-top: 1px solid rgba(245, 166, 35, 0.1); border-bottom: 1px solid rgba(245, 166, 35, 0.1);
  padding: 70px 0;
}
.stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; text-align: center; }
.stat-num { font-family: 'Anton', sans-serif; font-size: clamp(2.2rem, 4vw, 3.2rem); color: var(--gold); line-height: 1; }
.stat-label { font-size: 0.82rem; color: var(--slate); margin-top: 10px; letter-spacing: 0.03em; }

/* ---------- Testimonials ---------- */
.testi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; margin-top: 56px; }
.testi-card { background: var(--navy-surface); border-left: 3px solid var(--gold); border-radius: 2px; padding: 32px 34px; }
.testi-quote { font-family: 'Fraunces', Georgia, serif; font-style: italic; font-size: 1.08rem; margin: 0 0 18px; color: var(--cream); opacity: 0.92; }
.testi-name { font-weight: 700; font-size: 0.9rem; }
.testi-role { color: var(--slate); font-size: 0.85rem; }

/* ---------- Closing CTA ---------- */
.closing-cta { text-align: center; padding: 56px 0 110px; position: relative; overflow: hidden; }
.closing-inner { position: relative; z-index: 1; }
.closing-title { font-size: clamp(2rem, 4.5vw, 3.2rem); margin: 0 0 30px; }

/* ---------- Article / long-form prose ---------- */
.article-block { max-width: 760px; }
.article-block p { font-size: 1.05rem; color: var(--cream); opacity: 0.88; }
.pull-statement {
  font-family: 'Fraunces', Georgia, serif; font-style: italic; font-weight: 600;
  font-size: clamp(1.4rem, 2.6vw, 1.9rem); color: var(--gold-light);
  border-left: 3px solid var(--gold); padding-left: 24px; margin: 34px 0;
}
.category-label {
  display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em;
  color: var(--slate); text-transform: uppercase; margin-top: 10px;
}

/* ---------- Page header (interior pages) ---------- */
.page-header { padding: 64px 0 0; }
.page-header-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; align-items: center; min-height: 460px; }
.page-header-photo { height: 460px; align-self: end; border-radius: 4px 4px 0 0; overflow: hidden; box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.5); }
.page-header-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; }

/* ---------- Placeholder block (e.g. team photo) ---------- */
.photo-placeholder {
  border: 2px dashed rgba(245, 166, 35, 0.3); border-radius: 6px;
  aspect-ratio: 16/10; display: flex; align-items: center; justify-content: center;
  text-align: center; color: var(--slate); font-size: 0.9rem; padding: 32px;
  background: rgba(255, 255, 255, 0.02);
}

/* ---------- Key takeaways ---------- */
.check-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.check-list li { display: flex; gap: 16px; align-items: flex-start; font-size: 1.02rem; color: var(--cream); }
.check-list .mark {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  background: rgba(245, 166, 35, 0.15); color: var(--gold);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 0.8rem; margin-top: 2px;
}

/* ---------- Format cards ---------- */
.format-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.format-card { border: 1px solid rgba(245, 166, 35, 0.12); border-radius: 6px; padding: 30px; background: var(--navy-surface); }
.format-card h3 { font-family: 'Anton', sans-serif; text-transform: uppercase; font-size: 1.15rem; margin: 0 0 12px; color: var(--gold); letter-spacing: 0.01em; }
.format-card p { color: var(--slate); font-size: 0.95rem; }

/* ---------- Numbered process ---------- */
.process-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 28px; }
.process-list li { display: flex; gap: 20px; }
.process-num {
  flex: none; font-family: 'Anton', sans-serif; font-size: 1.4rem; color: var(--gold);
  width: 44px; height: 44px; border: 1px solid rgba(245, 166, 35, 0.3); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
}
.process-body h4 { font-size: 1.05rem; font-weight: 700; color: var(--cream); margin: 0 0 4px; }
.process-body p { color: var(--slate); font-size: 0.95rem; margin: 0; }

/* ---------- Forms ---------- */
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.form-field { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; }
.form-field.full { grid-column: 1 / -1; }
.form-field label { font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate); }
.form-field input, .form-field select, .form-field textarea {
  background: var(--navy-surface); border: 1px solid rgba(245, 166, 35, 0.15); border-radius: 4px;
  padding: 14px 16px; color: var(--cream); font-family: 'Inter', sans-serif; font-size: 0.95rem;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { outline: none; border-color: var(--gold); }
.form-field textarea { resize: vertical; min-height: 120px; }
.contact-direct { font-family: 'Anton', sans-serif; font-size: clamp(1.6rem, 3vw, 2.1rem); color: var(--gold); margin: 24px 0; }

/* ---------- Footer ---------- */
footer { border-top: 1px solid rgba(243, 241, 234, 0.08); padding: 56px 0 40px; }
.footer-top { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 30px; margin-bottom: 40px; }
/* flex-shrink:0 on the press block and its rows is the actual fix here —
   without it, this whole block gets compressed to whatever space is left
   over next to the social links instead of wrapping onto its own line,
   which is what caused the logos to shrink/break unevenly before. */
.footer-press { display: flex; flex-direction: column; gap: 14px; opacity: 0.5; flex-shrink: 0; }
.footer-press-row { display: flex; gap: 22px; align-items: center; flex-shrink: 0; }
.footer-press img { height: auto; width: auto; max-height: 16px; max-width: 86px; flex-shrink: 0; filter: brightness(0) invert(1); }
.footer-press .cnbc-select { display: inline-flex; align-items: center; gap: 8px; color: var(--cream); }
.footer-press .cnbc-select .cnbc-mark { font-weight: 800; font-size: 0.85rem; }
.footer-press .cnbc-select .divider { width: 1px; height: 11px; background: currentColor; opacity: 0.5; }
.footer-press .cnbc-select .select-mark { font-weight: 600; font-size: 0.65rem; letter-spacing: 0.06em; }
.footer-links { display: flex; gap: 24px; list-style: none; padding: 0; margin: 0; font-size: 0.85rem; color: var(--slate); flex-wrap: wrap; }
.footer-links a { text-decoration: none; color: var(--slate); transition: color .2s; }
.footer-links a:hover { color: var(--gold); }
.footer-waitlist a { color: var(--gold); font-weight: 700; text-decoration: none; }
.footer-bottom {
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px;
  padding-top: 26px; border-top: 1px solid rgba(243, 241, 234, 0.06); font-size: 0.8rem; color: var(--slate);
}
.footer-bottom a { color: var(--gold); }

/* ---------- Utility ---------- */
.text-center { text-align: center; }
.muted { color: var(--slate); }

/* ---------- Responsive ---------- */
@media (max-width: 880px) {
  .nav-links { display: none; }
  .nav-toggle {
    display: flex; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer; padding: 6px;
  }
  .mobile-menu {
    display: flex; flex-direction: column; max-height: 0; overflow: hidden;
    background: var(--navy-surface); transition: max-height .3s ease;
  }
  .mobile-menu.open { max-height: 320px; }
  .mobile-menu a {
    color: var(--cream); text-decoration: none; padding: 16px 28px;
    border-top: 1px solid rgba(243, 241, 234, 0.06); font-weight: 500; font-size: 0.95rem;
  }
  .hero-grid { grid-template-columns: 1fr; min-height: auto; }
  .hero-photo { height: 380px; order: -1; }
  .hero-photo img { object-position: 50% 40%; }
  .loyalty-word { display: none; }
  .fw-grid, .format-grid { grid-template-columns: 1fr; }
  .stats-grid { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
  .testi-grid { grid-template-columns: 1fr; }
  .press-inner { justify-content: center; text-align: center; }
  .footer-top { flex-direction: column; }
  .split-block, .split-block.reverse, .page-header-grid { grid-template-columns: 1fr; }
  .split-block.reverse .split-photo { order: -1; }
  .split-photo, .page-header-photo { height: 340px; }
  .split-photo img { object-position: 50% 10%; }
  /* Desktop's 40% is tuned for the wider, shorter page-header column.
     Stacked full-width on mobile the container is proportionally
     taller relative to its width, so the same crop point sits closer
     to the top of the head — needs its own value. */
  .form-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; scroll-behavior: auto !important; }
}