@media (max-width: 1024px) {
    .nav-links {
      display: none !important;
    }

    .hamburger {
      display: flex !important;
    }
  }

  @media (min-width: 1025px) {
    .hamburger {
      display: none !important;
    }
  }



  /* FORCE HORIZONTAL DESKTOP NAV */
  nav {
    display: flex !important;
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
  }

  .nav-links {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-end !important;
    align-items: center !important;
    gap: 2.2rem !important;
    list-style: none !important;
    width: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  .nav-links li {
    display: inline-flex !important;
    position: relative !important;
    width: auto !important;
  }

  .nav-links a {
    display: inline-flex !important;
    white-space: nowrap !important;
  }

  .dropdown-menu {
    position: absolute !important;
    top: 100% !important;
    left: 0 !important;
    display: none !important;
    flex-direction: column !important;
    min-width: 240px !important;
    z-index: 999 !important;
  }

  .dropdown:hover .dropdown-menu {
    display: flex !important;
  }

  .dropdown.open .dropdown-menu {
    display: flex !important;
  }

  /* Re-assert the collapse to hamburger below 1024px — must come after the
     unconditional "FORCE HORIZONTAL DESKTOP NAV" rules above so it wins the
     cascade on small/real-device widths instead of nav-links staying forced open. */
  @media (max-width: 1024px) {
    .nav-links {
      display: none !important;
    }

    .hamburger {
      display: flex !important;
    }
  }

  @media (min-width: 1025px) {
    .hamburger {
      display: none !important;
    }
  }

/* ===== HERO ===== */
  .hero {
    min-height: 100vh;
    display: flex;
    align-items: center;
    position: relative;
    padding: 7rem 4rem 2rem;
    overflow: hidden;
  }

  .hero-bg {
    position: absolute;
    inset: 0;
    overflow: hidden;
    background:
        linear-gradient(
            90deg,
            rgba(5,5,5,1) 0%,
            rgba(5,5,5,0.98) 22%,
            rgba(5,5,5,0.88) 32%,
            rgba(5,5,5,0.62) 45%,
            rgba(5,5,5,0.35) 58%,
            rgba(5,5,5,0.15) 72%,
            rgba(5,5,5,0.03) 88%,
            rgba(5,5,5,0) 100%
        ),
        radial-gradient(
            circle at 88% 72%,
            rgba(255,255,255,0.08) 0%,
            rgba(0,206,209,0.05) 22%,
            transparent 48%
        ),
        url('../images/hero/Hero.jpeg');
    background-repeat: no-repeat, no-repeat, no-repeat;
    background-position: center, center, 88% 72%;
    background-size: cover, cover, cover;
}

  @media (max-width: 768px) {
    .hero-bg {
      background-position: center, center, 78% 68%;
    }

    .hero-bg::after {
      -webkit-mask-image: radial-gradient(ellipse 200px 240px at 78% 68%, transparent 0%, transparent 55%, black 100%);
      mask-image: radial-gradient(ellipse 200px 240px at 78% 68%, transparent 0%, transparent 55%, black 100%);
    }
  }

.hero-bg::after {
    content: "";
    position: absolute;
    inset: 0;
    pointer-events: none;
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,0.15) 0%,
            transparent 20%,
            transparent 70%,
            rgba(0,0,0,0.45) 100%
        ),
        radial-gradient(
            ellipse at center,
            transparent 45%,
            rgba(0,0,0,0.08) 80%,
            rgba(0,0,0,0.24) 100%
        );
    /* Protect the subject's face (anchored at 88% 72%, matching .hero-bg's image
       position) from the vignette/bottom-fade above so it keeps Hero.jpeg's
       original brightness while the rest of the frame stays cinematic. */
    -webkit-mask-image: radial-gradient(ellipse 260px 320px at 88% 72%, transparent 0%, transparent 55%, black 100%);
    mask-image: radial-gradient(ellipse 260px 320px at 88% 72%, transparent 0%, transparent 55%, black 100%);
}

  .hero-inner {
    position: relative;
    z-index: 2;
    max-width: 1200px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr;
    align-items: center;
    width: 100%;
  }

  .hero-eyebrow {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.8rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--gold);
    margin-bottom: 0.9rem;
    display: flex;
    align-items: center;
    gap: 0.8rem;
    opacity: 0;
    animation: fadeUp 0.8s ease 0.2s forwards;
  }

  .hero-eyebrow::before {
    content: '';
    display: block;
    width: 32px;
    height: 1px;
    background: var(--gold);
  }

  .hero-headline {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(2.3rem, 3.6vw + 2vh, 4.6rem);
    line-height: 1.04;
    letter-spacing: 0.015em;
    color: var(--white);
    margin-bottom: 1rem;
    opacity: 0;
    animation: fadeUp 0.8s ease 0.35s forwards;
  }

  .hero-headline em {
    font-style: normal;
    color: var(--gold);
    display: block;
  }

  .hero-sub {
    font-size: 1.02rem;
    font-weight: 400;
    color: #c9c7c2;
    line-height: 1.55;
    max-width: 640px;
    margin-bottom: 1.3rem;
    opacity: 0;
    animation: fadeUp 0.8s ease 0.5s forwards;
  }

  .hero-btns {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
    margin-bottom: 0.4rem;
    opacity: 0;
    animation: fadeUp 0.8s ease 0.65s forwards;
  }

  .btn-primary {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: var(--gold);
    color: var(--black);
    padding: 0.9rem 2rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, background 0.25s ease, border-color 0.25s ease;
    border: 2px solid var(--gold);
  }

  .btn-primary:hover {
    background: var(--gold-light);
    border-color: var(--gold-light);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,206,209,0.22);
  }

  .btn-outline {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: transparent;
    color: var(--white);
    padding: 0.9rem 2rem;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    border-radius: 2px;
    border: 2px solid var(--border);
    transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease, border-color 0.25s ease, color 0.25s ease;
  }

  .btn-outline:hover {
    border-color: var(--gold);
    color: var(--gold);
    transform: translateY(-2px);
    box-shadow: 0 10px 24px rgba(0,0,0,0.25);
  }

  .hero-card {
    background: var(--card);
    border: 1px solid var(--border);
    border-radius: 4px;
    padding: 2.5rem;
    position: relative;
    opacity: 0;
    animation: fadeUp 0.8s ease 0.8s forwards;
  }

  .hero-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--gold), transparent);
    border-radius: 4px 4px 0 0;
  }

  .hero-stat {
    margin-bottom: 1.8rem;
    padding-bottom: 1.8rem;
    border-bottom: 1px solid var(--border);
  }

  .hero-stat:last-child { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }

  .stat-number {
    font-family: 'Bebas Neue', sans-serif;
    font-size: 2.8rem;
    color: var(--gold);
    line-height: 1;
    letter-spacing: 0.04em;
  }

  .stat-label {
    font-size: 0.82rem;
    color: #a6a39d;
    font-weight: 500;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    margin-top: 0.3rem;
  }

  /* ===== TICKER ===== */
  .ticker-wrap {
    background: var(--gold);
    padding: 0.6rem 0;
    overflow: hidden;
    position: sticky;
    top: 96px;
    z-index: 999;
  }

  .ticker-track {
    display: flex;
    gap: 0;
    animation: ticker 30s linear infinite;
    white-space: nowrap;
  }

  .ticker-item {
    font-family: 'Bebas Neue', sans-serif;
    font-size: clamp(0.72rem, 2.2vw, 0.95rem);
    letter-spacing: 0.15em;
    color: var(--black);
    padding: 0 2.5rem;
  }

  .ticker-dot {
    color: rgba(0,0,0,0.3);
    margin-right: 2.5rem;
  }

  @media (max-width: 1024px) {

    
    .gallery-grid {
      grid-template-columns: 1fr 1fr;
      gap: 1rem;
    }

    nav {
      padding: 1rem 1.5rem !important;
    }

    .hero-inner {
      grid-template-columns: 1fr;
    }

    nav { padding: 0.8rem 1.2rem; }
    .nav-links { display: none; }
    .hamburger { display: flex; }
    .hero { padding: 5rem 2rem 3rem; }
    .hero-inner { grid-template-columns: 1fr; gap: 3rem; }
    .hero-card { max-width: 480px; }
    section { padding: 3.5rem 2rem; }
    .pillars-section { padding: 3.5rem 2rem; }
    .story-grid { grid-template-columns: 1fr; gap: 2.5rem; }
    .story-portrait { position: static; max-width: 340px; margin: 0 auto; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem; }
    .pillars-grid { grid-template-columns: 1fr; }
    .programs-grid { grid-template-columns: 1fr; }
    .approach-grid { grid-template-columns: 1fr; gap: 3rem; }
    .why-grid { grid-template-columns: 1fr; }
    .clients-section { padding: 4rem 2rem; }
    footer { padding: 4rem 2rem; }
    .footer-inner { grid-template-columns: 1fr; gap: 2.5rem; }
    .footer-bottom { flex-direction: column; text-align: center; gap: 0.5rem; }
    .mission-section { padding: 3.5rem 2rem; }
    .cta-section { padding: 3.5rem 2rem; }
    .stats-bar { padding: 4rem 2rem; margin-top: 3.5rem; }
  }

  @media (max-width: 640px) {
    .stats-grid { grid-template-columns: 1fr 1fr; }
    .stat-big { font-size: 3.4rem; }
    .hero-btns { flex-direction: column; }
    .mission-btns { flex-direction: column; align-items: center; }
    .cta-btns { flex-direction: column; align-items: center; }
    .gallery-grid { grid-template-columns: 1fr; }
  }

  /* Divider line */
  .divider {
    width: 48px;
    height: 2px;
    background: var(--gold);
    margin: 1.5rem 0 2rem;
  }

/* ===== FINAL TYPOGRAPHY OVERRIDES ===== */

/* PROGRAM NUMBERS */
.prog-num {
  font-size: clamp(2.5rem, 6vw, 4rem) !important;
  color: rgba(0,206,209,0.38) !important;
}

/* HOW I WORK TEXT */
.step-text {
  font-size: 1.02rem !important;
  line-height: 1.8 !important;
  color: #bcbcbc !important;
}


/* ===== NAV MENU FINAL OVERRIDE ===== */
.nav-links > li > a,
.nav-links a {
  color: #ffffff !important;
  font-size: 0.92rem !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em !important;
  transition: color 0.25s ease !important;
}

.nav-links > li > a:hover,
.nav-links a:hover {
  color: #00CED1 !important;
}


/* ===== PREMIUM TYPOGRAPHY HIERARCHY ===== */

.milestone-num,
.section-label,
.hero-eyebrow,
.clients-label,
.footer-role {
  color: rgba(0,206,209,0.95) !important;
}

.milestone-title,
.step-title,
.prog-title,
.pillar-title {
  letter-spacing: 0.03em !important;
}


/* ===== PREMIUM READABILITY SYSTEM ===== */

body {
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

.story-text p,
.approach-left p,
.cta-text,
.mission-text,
.milestone-text,
.step-text,
.prog-list li,
.why-text,
.pillar-text {
  font-weight: 400 !important;
  letter-spacing: 0.01em;
}

/* Sharper white hierarchy */
.section-title,
.hero-headline,
.cta-title,
.mission-title {
  color: #f2efe9 !important;
}

/* Better paragraph rhythm */
.story-text p,
.approach-left p,
.cta-text,
.mission-text {
  line-height: 1.9 !important;
}

/* Premium card readability */
.program-card,
.milestone-card,
.why-card,
.approach-step {
  border-color: rgba(255,255,255,0.07) !important;
}

/* Cleaner muted text */
.stat-label,
.footer-tagline,
.footer-copy,
.footer-tagline-bottom {
  color: #9f9a92 !important;
}


/* ===== EMOTIONAL EMPHASIS SYSTEM ===== */

strong {
  color: #f3f0ea;
  font-weight: 700;
}

.story-text strong,
.prog-subtitle strong,
.cta-text strong,
.mission-text strong,
.approach-left strong,
.why-text strong {
  color: #ffffff;
}

.story-quote strong {
  color: #ffffff;
  font-weight: 700;
}

/* Improve emotional rhythm */
.story-text p,
.approach-left p,
.cta-text,
.mission-text {
  max-width: 95%;
}


/* ===== SECTION ANCHOR OFFSET FIX ===== */

#journey,
#programs,
#framework,
#approach,
#clients,
#connect {
  scroll-margin-top: 0;
}

.story-section,
.programs-section,
.approach-section,
.why-section,
.cta-section {
  position: relative;
  z-index: 2;
  background: #0a0a0a;
}


/* ===== FRAMEWORK POSITIONING ===== */

.pillars-section .programs-intro p {
  color: #d0ccc6 !important;
  font-size: 1.12rem !important;
  line-height: 1.9 !important;
  font-weight: 400 !important;
}

.pillar-title::first-line {
  color: rgba(0,206,209,0.95);
}


/* ===== EM FRAMEWORK STRIP ===== */

.framework-strip {
  background: #0c0c0c;
  border-top: 1px solid rgba(255,255,255,0.05);
  border-bottom: 1px solid rgba(255,255,255,0.05);
  padding: 2.8rem 4rem;
  position: relative;
  z-index: 3;
}

.framework-strip-inner {
  max-width: 1250px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2.5rem;
  flex-wrap: wrap;
}

.framework-heading {
  width: 100%;
  text-align: center;
  margin-bottom: 0.8rem;
}

.framework-heading span {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(0,206,209,0.95);
}

.framework-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  min-width: 280px;
  transition: transform 0.25s ease;
}

.framework-item:hover {
  transform: translateY(-3px);
}

.framework-number {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3rem;
  line-height: 1;
  color: rgba(0,206,209,0.22);
}

.framework-title {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: #f3f0ea;
  margin-bottom: 0.3rem;
}

.framework-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: #c8c4bd;
}

.framework-divider {
  width: 1px;
  height: 72px;
  background: rgba(0,206,209,0.12);
}

@media (max-width: 1024px) {

  .framework-strip {
    padding: 2.5rem 2rem;
  }

  .framework-strip-inner {
    flex-direction: column;
    align-items: stretch;
    gap: 2rem;
  }

  .framework-divider {
    display: none;
  }

  .framework-item {
    min-width: auto;
  }

  .framework-heading {
    margin-bottom: 1rem;
  }
}


/* ===== EMOTIONAL POSITIONING UPGRADES ===== */

.stats-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr);
  gap: 4rem;
  align-items: center;
}

.hero-belief {
  display: block;
  margin-top: 1rem;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #f1eee8;
  font-weight: 500;
}

.belief-statement {
  text-align: center;
  padding: 4rem 2rem 2rem;
  font-family: 'Bebas Neue', sans-serif;
  font-size: 3rem;
  letter-spacing: 0.06em;
  color: rgba(0,206,209,0.92);
}

/* Stronger readability */
.story-text p,
.milestone-text,
.step-text,
.prog-list li,
.framework-text,
.why-text,
.cta-text {
  font-size: 1.14rem !important;
  line-height: 1.95 !important;
}

/* Better stat labels */
.stat-label {
  font-size: 1rem !important;
  line-height: 1.45 !important;
  color: #c9c5bf !important;
  max-width: 280px;
}

/* Cleaner stat alignment */
.stat-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
}

@media (max-width: 1024px) {

  .stats-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .belief-statement {
    font-size: 2.2rem;
    line-height: 1.4;
  }

  .hero-belief {
    font-size: 1.08rem;
  }
}


/* ===== CLEAN PREMIUM NAV (from CLEAN_REBUILD) ===== */

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 4rem;
  background: rgba(10,10,10,0.82);
  backdrop-filter: blur(12px);
  z-index: 9999;
  border-bottom: 1px solid rgba(255,255,255,0.05);
}

.logo-link {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
}

.em-logo {
  height: 64px;
  width: auto;
  object-fit: contain;
  opacity: 0.95;
}

@media (max-width: 768px) {
  .em-logo {
    height: 40px;
  }
}

/* ===== EM FRAMEWORK BUTTON ===== */

.btn-framework {
  background: transparent !important;
  border: 1px solid rgba(0,206,209,0.42) !important;
  color: #f1eee8 !important;
  backdrop-filter: blur(8px);
  transition: all 0.28s ease !important;
}

.btn-framework:hover {
  background: rgba(0,206,209,0.08) !important;
  border-color: rgba(0,206,209,0.72) !important;
  color: #ffffff !important;
  transform: translateY(-2px);
  box-shadow: 0 0 30px rgba(0,206,209,0.10);
}

.hero-actions {
  gap: 1rem !important;
  flex-wrap: wrap;
}

/* Better visual breathing */
.hero-content {
  max-width: 760px;
}


/* ===== HORIZONTAL STATS ROW ===== */
.hero-stats-row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 2.5rem;
  margin-top: 1.2rem;
}

@media (max-width: 480px) {
  .hero-stats-row {
    flex-direction: column;
    gap: 1.2rem;
  }
  .hero-stat-divider {
    width: 100%;
    height: 1px;
    align-self: auto;
  }
}

.hero-stat-divider {
  width: 1px;
  background: var(--border);
  align-self: stretch;
  flex-shrink: 0;
}


  @media (max-width: 1024px) {
    .ticker-wrap {
      top: 72px;
    }
  }