/* ---- CSS Variables ---- */
:root {
  --navy:        #1a2d5a;
  --navy-deep:   #0f1e40;
  --navy-mid:    #243668;
  --gold:        #f5a623;
  --gold-light:  #ffc84b;
  --gold-dark:   #d4860a;
  --white:       #ffffff;
  --off-white:   #f5f7fa;
  --light-gray:  #eef1f7;
  --text-dark:   #1a2d5a;
  --text-mid:    #4a5568;
  --text-light:  #718096;
  --green:       #2d8a4e;
  --red:         #d63031;
  --shadow:      0 4px 24px rgba(26,45,90,.10);
  --shadow-lg:   0 8px 40px rgba(26,45,90,.18);
  --radius:      10px;
  --radius-lg:   16px;
  --font-h:      'Montserrat', sans-serif;
  --font-b:      'Poppins', sans-serif;
  --ease:        all .3s ease;
}

/* ---- Reset ---- */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:var(--font-b);color:var(--text-dark);background:var(--white);line-height:1.6;font-size:15px}
ul{list-style:none}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}

/* ---- Layout ---- */
.container{max-width:1160px;margin:0 auto;padding:0 24px}
section{padding:64px 0}
.section-light{background:var(--off-white)}
.section-white{background:var(--white)}
.section-navy{background:var(--navy)}

/* ---- Typography helpers ---- */
.sec-title{font-family:var(--font-h);font-size:28px;font-weight:800;color:var(--navy);margin-bottom:8px;line-height:1.25}
.sec-title.center{text-align:center}
.sec-title.white{color:var(--white)}
.sec-sub{font-size:18px;color:var(--text-mid);margin-bottom:32px;line-height:1.75}
.sec-sub.center{text-align:center}

/* ---- Buttons ---- */
.btn{display:inline-block;font-family:var(--font-h);font-weight:700;font-size:18px;padding:18px 28px;border-radius:6px;border:none;cursor:pointer;transition:var(--ease);text-transform:uppercase;letter-spacing:.6px}
.btn-gold{background:var(--gold);color:var(--navy-deep)}
.btn-gold:hover{background:var(--gold-dark);transform:translateY(-2px);box-shadow:0 6px 18px rgba(245,166,35,.35)}
.btn-outline-white{background:transparent;color:var(--white);border:2px solid rgba(255,255,255,.55)}
.btn-outline-white:hover{background:rgba(255,255,255,.12);border-color:var(--white)}
.btn-outline-navy{background:transparent;color:var(--navy);border:2px solid var(--navy)}
.btn-outline-navy:hover{background:var(--navy);color:var(--white)}
.btn-outline-navy.sm{padding:9px 18px;font-size:12px}
.w-full{width:100%;text-align:center;display:block}

/* =========================================
   TOP BAR — PDF Section 1
   ========================================= */
.topbar{
  position:sticky;top:0;z-index:1000;
  background:var(--navy-deep);
  padding:11px 0;
  border-bottom:2.5px solid var(--gold);
  transition:var(--ease)
}
.topbar.scrolled{box-shadow:0 4px 24px rgba(0,0,0,.35)}
.topbar-inner{display:flex;align-items:center;justify-content:space-between;gap:16px}

/* Logo */
.logo-wrap{display:flex;align-items:center;gap:12px}
.logo-name{line-height:1}
.logo-cfp{font-family:var(--font-h);font-size:19px;font-weight:900;color:var(--white)}
.logo-cfp{font-family:var(--font-h);font-size:19px;font-weight:400;color:var(--gold)}
.logo-div{width:1px;height:26px;background:rgba(255,255,255,.25)}
.logo-cfp{font-family:var(--font-h);font-size:17px;font-weight:800;color:var(--gold)}
.logo-cfp sup{font-size:9px}

/* Nav right */
.topbar-nav{display:flex;align-items:center;gap:18px}
.topbar-call{display:flex;align-items:center;gap:7px;color:var(--white);font-size:18px;font-weight:500;transition:var(--ease)}
.topbar-call:hover{color:var(--gold)}
.topbar-call i{color:var(--gold)}
.topbar-wa{width:34px;height:34px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;color:var(--white);font-size:17px;transition:var(--ease)}
.topbar-wa:hover{transform:scale(1.12)}

/* Mobile bar */
.topbar-mob{display:none;gap:7px}
.mob-btn{padding:7px 18px;border-radius:5px;font-size:11px;font-weight:600;background:rgba(255,255,255,.12);color:var(--white);border:1px solid rgba(255,255,255,.25);transition:var(--ease)}
.mob-btn.wa{background:#25D366;border-color:#25D366}
.mob-btn.cta{background:var(--gold);color:var(--navy);border-color:var(--gold)}

/* =========================================
   HERO — PDF Section 2
   ========================================= */
.hero{
  background:linear-gradient(135deg,var(--navy-deep) 0%,var(--navy) 55%,#1e3a6e 100%);
  background-color: var(--navy);
  padding:60px 0 70px;
  position:relative;overflow:hidden
}
.hero::before{
  content:'';position:absolute;top:-100px;right:-100px;
  width:420px;height:420px;border-radius:50%;
  background:radial-gradient(circle,rgba(245,166,35,.07) 0%,transparent 70%)
}
.hero-grid{display:grid;grid-template-columns:1fr 390px;gap:48px;align-items:start}

/* Left copy */
.hero-badge{margin-bottom:16px}
.badge{display:inline-block;background:rgba(245,166,35,.14);color:var(--gold);border:1px solid rgba(245,166,35,.4);padding:5px 18px;border-radius:50px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.8px}
.hero-h1{font-family:var(--font-h);font-size:33px;font-weight:900;color:var(--white);line-height:1.28;margin-bottom:18px}
.hero-h1 .yellow{color:var(--gold)}
.hero-body{color:rgba(255,255,255,.78);font-size:18px;line-height:1.85;margin-bottom:22px; font-weight: 500; }
.hero-body strong{color:var(--gold)}

/* Ideal-for chips */
.ideal-grid{display:grid;grid-template-columns:1fr 1fr;gap:9px;margin-bottom:22px}
.ideal-chip{display:flex;align-items:center;gap:8px;color:rgba(255,255,255,.85);font-size:18px;font-weight:500}
.ideal-chip i{color:var(--gold);font-size:18px;flex-shrink:0}

/* Outcomes list */
.outcomes-head{font-family:var(--font-h);font-size:15px;font-weight:700;color:var(--white);margin-bottom:11px}
.outcomes-list{display:flex;flex-direction:column;gap:8px;margin-bottom:26px}
.outcomes-list li{display:flex;align-items:flex-start;gap:9px;color:rgba(255,255,255,.78);font-size:18px;line-height:1.5}
.outcomes-list li i{color:var(--gold);margin-top:2px;flex-shrink:0}

.hero-ctas{display:flex;gap:18px;flex-wrap:wrap}

/* Lead form card */
.form-card{background:var(--white);border-radius:var(--radius-lg);padding:28px 26px;box-shadow:0 12px 48px rgba(0,0,0,.28);position:sticky;top:88px}
.form-card h3{font-family:var(--font-h);font-size:17px;font-weight:800;color:var(--navy);line-height:1.35;margin-bottom:18px}
.form-card h3 span{color:var(--gold-dark)}
.form-card.dark{background:var(--navy-mid)}
.form-card.dark h3{color:var(--white)}
.form-card.dark .fld{background:rgba(255,255,255,.09);color:var(--white);border-color:rgba(255,255,255,.18)}
.form-card.dark .fld::placeholder{color:rgba(255,255,255,.55)}
.fg{margin-bottom:11px}
.fld{width:100%;padding:11px 18px;border:1.5px solid #cdd5e4;border-radius:6px;font-family:var(--font-b);font-size:18px;color:var(--text-dark);background:var(--white);transition:var(--ease);appearance:none}
.fld:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(245,166,35,.15)}
.form-trust{font-size:11px;color:var(--text-light);text-align:center;margin-top:9px}
.form-card.dark .form-trust{color:rgba(255,255,255,.45)}

/* =========================================
   STATS STRIP — PDF Section 11
   ========================================= */
.stats-strip{background:var(--gold);padding:16px 0}
.stats-row{display:flex;align-items:center;justify-content:center;flex-wrap:wrap}
.stat-item{display:flex;flex-direction:column;align-items:center;padding:8px 34px;text-align:center}
.stat-num{font-family:var(--font-h);font-size:21px;font-weight:900;color:var(--navy-deep);line-height:1}
.stat-lbl{font-size:11px;font-weight:700;color:var(--navy);text-transform:uppercase;letter-spacing:.45px;margin-top:3px}
.stat-sep{width:1px;height:34px;background:rgba(26,45,90,.22)}

/* =========================================
   OUR GLOBAL ACCREDITATIONS — PDF Section 11
   ========================================= */
.accred-cards{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:32px}
.accred-card{background:var(--white);border-radius:var(--radius);padding:20px 12px;text-align:center;box-shadow:var(--shadow);border-bottom:3px solid transparent;transition:var(--ease)}
.accred-card.hi{border-bottom-color:var(--gold)}
.accred-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.accred-n{display:block;font-family:var(--font-h);font-size:20px;font-weight:900;color:var(--navy);line-height:1;margin-bottom:5px}
.accred-d{display:block;font-size:10px;font-weight:700;color:var(--text-mid);text-transform:uppercase;letter-spacing:.4px}

/* =========================================
   PARTNER LOGOS — PDF Section 11 (Recruiters)
   ========================================= */
.partners{padding:36px 0;border-bottom:1px solid var(--light-gray)}
.partners-lbl{text-align:center;font-size:18px;font-weight:700;color:var(--text-mid);text-transform:uppercase;letter-spacing:.6px;margin-bottom:22px}
.logo-row{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:18px}
.logo-pill{padding:9px 20px;border:1.5px solid #cdd5e4;border-radius:7px;font-family:var(--font-h);font-size:12px;font-weight:800;color:var(--navy);background:var(--white);transition:var(--ease)}
.logo-pill:hover{border-color:var(--gold);color:var(--gold-dark);transform:translateY(-2px)}

/* =========================================
   THE WEALTH MANAGEMENT BOOM — PDF Section 5
   ========================================= */
.boom-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px;align-items:center;margin-bottom:40px}
.boom-h2{font-family:var(--font-h);font-size:25px;font-weight:800;color:var(--navy);margin-bottom:10px}
.boom-p{color:var(--text-mid);font-size:18px;line-height:1.8;margin-bottom:18px}
.check-list{display:flex;flex-direction:column;gap:10px}
.check-list li{display:flex;align-items:flex-start;gap:9px;font-size:18px;color:var(--text-dark);line-height:1.5}
.check-list li i{color:var(--green);margin-top:2px;flex-shrink:0}

/* Boom data card */
.boom-card{background:var(--navy);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-lg)}
.boom-card-hd{background:var(--gold);color:var(--navy-deep);font-family:var(--font-h);font-size:18px;font-weight:800;padding:12px 20px;text-transform:uppercase;letter-spacing:.5px}
.boom-row{display:flex;justify-content:space-between;align-items:center;padding:18px 20px;border-bottom:1px solid rgba(255,255,255,.07);color:rgba(255,255,255,.82);font-size:18px}
.boom-row:last-child{border-bottom:none}
.boom-val{font-family:var(--font-h);font-weight:800;color:#6effa3}

/* CTA banner */
.cta-banner{background:var(--light-gray);border-radius:var(--radius);padding:20px 28px;display:flex;align-items:center;justify-content:center;gap:18px;border:2px dashed #c4cfe0;flex-wrap:wrap}
.cta-q{font-size:26px;color:var(--navy);font-weight:900}
.cta-txt{font-family:var(--font-h);font-size:17px;font-weight:800;color:var(--navy)}

/* =========================================
   WHERE THIS CAREER CAN TAKE YOU — PDF Section 9
   ========================================= */
.career-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:18px;margin-top:28px}
.career-card{background:var(--light-gray);border-radius:var(--radius);padding:22px 18px;text-align:center;transition:var(--ease);border-bottom:3px solid transparent;cursor:default}
.career-card:hover{background:var(--navy);border-bottom-color:var(--gold);transform:translateY(-4px)}
.career-card:hover .cc-icon{color:var(--gold)}
.career-card:hover .cc-lbl{color:var(--white)}
.cc-icon{font-size:26px;color:var(--navy);margin-bottom:9px;display:block;transition:var(--ease)}
.cc-lbl{font-size:12px;font-weight:700;color:var(--text-dark);line-height:1.3;transition:var(--ease)}

/* =========================================
   SALARY TABLE — PDF Section 10
   ========================================= */
.salary-wrap{margin:28px 0}
.salary-tbl{width:100%;border-collapse:collapse;border-radius:var(--radius);overflow:hidden}
.salary-tbl th{background:var(--gold);color:var(--navy-deep);font-family:var(--font-h);font-size:12px;font-weight:800;padding:18px 20px;text-align:left;text-transform:uppercase;letter-spacing:.5px}
.salary-tbl td{padding:18px 20px;color:rgba(255,255,255,.83);font-size:18px;border-bottom:1px solid rgba(255,255,255,.07)}
.salary-tbl tr:last-child td{border-bottom:none}
.salary-tbl tr:hover td{background:rgba(245,166,35,.07)}
.sal-val{font-family:var(--font-h);font-weight:800;color:var(--gold-light) !important}
.salary-note{color:rgba(255,255,255,.5);font-size:12px;text-align:center;font-style:italic;margin-top:10px}

/* =========================================
   NOT SURE / SKILL GAP — PDF Section 4 + 7
   ========================================= */
.skillgap-grid{display:grid;grid-template-columns:100px 1fr 310px;gap:32px;align-items:start}
.sg-avatar{width:90px;height:90px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;color:var(--gold);box-shadow:0 4px 20px rgba(26,45,90,.2);flex-shrink:0}
.sg-mid h2{font-family:var(--font-h);font-size:20px;font-weight:800;color:var(--navy);margin-bottom:10px;line-height:1.35}
.sg-mid p{color:var(--text-mid);font-size:18px;line-height:1.8;margin-bottom:18px}
.sg-mid ul{display:flex;flex-direction:column;gap:8px;margin-bottom:20px}
.sg-mid li{display:flex;align-items:center;gap:8px;font-size:18px;color:var(--text-dark)}
.sg-mid li i{color:var(--green)}
.gap-card{background:var(--white);border-radius:var(--radius-lg);padding:22px;box-shadow:var(--shadow-lg);border-top:4px solid var(--navy)}
.gap-card h3{font-family:var(--font-h);font-size:18px;font-weight:800;color:var(--navy);margin-bottom:16px}
.gap-row{margin-bottom:18px}
.gap-lbl{font-size:11px;font-weight:700;color:var(--text-mid);display:block;margin-bottom:4px;text-transform:uppercase;letter-spacing:.4px}
.gap-bar{height:7px;background:#e2e8f0;border-radius:4px;overflow:hidden}
.gap-fill{height:100%;background:linear-gradient(90deg,var(--navy),var(--gold));border-radius:4px}

/* =========================================
   THE REAL PROBLEM — PDF Section 3
   ========================================= */
.problem-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px;margin-bottom:28px}
.prob-card{display:flex;align-items:flex-start;gap:18px;padding:18px 20px;border-radius:var(--radius);background:#fff5f5;border:1.5px solid #fecaca}
.prob-card i{color:var(--red);font-size:19px;margin-top:1px;flex-shrink:0}
.prob-card p{font-size:18px;color:var(--text-dark);line-height:1.55}
.prob-shift{background:var(--light-gray);border-radius:var(--radius);padding:20px 26px;border-left:4px solid var(--gold)}
.prob-shift p{font-size:18px;color:var(--text-mid);line-height:1.8}
.prob-shift strong{color:var(--navy)}

/* =========================================
   HIDDEN ADVANTAGE — PDF Section 4
   ========================================= */
.adv-grid{display:grid;grid-template-columns:1fr 1fr;gap:48px}
.adv-left h2{font-family:var(--font-h);font-size:23px;font-weight:800;color:var(--navy);margin-bottom:10px}
.adv-left > p{color:var(--text-mid);font-size:18px;margin-bottom:18px}
.adv-list{display:flex;flex-direction:column;gap:10px;margin-bottom:18px}
.adv-item{display:flex;align-items:flex-start;gap:9px;font-size:18px;color:var(--text-dark);line-height:1.5}
.adv-item i{color:var(--green);margin-top:2px}
.adv-note{font-size:18px;color:var(--text-mid);font-style:italic;background:var(--light-gray);padding:18px 16px;border-radius:8px;border-left:3px solid var(--gold)}
.adv-right{background:var(--navy);border-radius:var(--radius-lg);padding:28px}
.adv-right h3{font-family:var(--font-h);font-size:15px;font-weight:700;color:var(--gold);margin-bottom:16px}
.adv-out{display:flex;flex-direction:column;gap:11px;margin-bottom:18px}
.adv-out li{display:flex;align-items:flex-start;gap:9px;font-size:18px;color:rgba(255,255,255,.82)}
.adv-out li i{color:var(--gold);margin-top:2px}
.adv-tagline{font-size:12px;color:rgba(255,255,255,.5);font-style:italic;border-top:1px solid rgba(255,255,255,.12);padding-top:18px}

/* =========================================
   TRANSFORMATION TABLE — PDF Section 6
   ========================================= */
.trans-wrap{margin-top:28px}
.trans-tbl{width:100%;border-collapse:collapse;border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow)}
.trans-tbl th{background:var(--navy);color:var(--gold);font-family:var(--font-h);font-size:18px;font-weight:800;padding:15px 22px;text-align:left;text-transform:uppercase;letter-spacing:.5px}
.trans-tbl td{padding:18px 22px;font-size:18px;border-bottom:1px solid var(--light-gray);color:var(--text-dark)}
.trans-tbl tr:last-child td{border-bottom:none}
.trans-tbl tr:nth-child(even) td{background:var(--off-white)}
.trans-tbl td:last-child{font-weight:700;color:var(--navy)}

/* =========================================
   WHAT YOU LEARN — PDF Section 7
   ========================================= */
.skills-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-bottom:38px}
.skill-card{background:var(--white);border-radius:var(--radius-lg);padding:24px 20px;box-shadow:var(--shadow);transition:var(--ease);border-bottom:3px solid transparent}
.skill-card:hover{transform:translateY(-5px);border-bottom-color:var(--gold);box-shadow:var(--shadow-lg)}
.sk-icon{width:50px;height:50px;background:var(--navy);border-radius:11px;display:flex;align-items:center;justify-content:center;margin-bottom:18px}
.sk-icon i{font-size:20px;color:var(--gold)}
.skill-card h4{font-family:var(--font-h);font-size:18px;font-weight:800;color:var(--navy);margin-bottom:5px}
.skill-card p{font-size:12px;color:var(--text-mid);line-height:1.65}

/* =========================================
   PRACTICAL TOOLKIT — PDF Section 8
   ========================================= */
.toolkit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:28px}
.tk-card{background:var(--light-gray);border-radius:var(--radius);padding:22px 16px;text-align:center;transition:var(--ease);border-top:3px solid transparent}
.tk-card:hover{border-top-color:var(--navy);transform:translateY(-4px)}
.tk-card i{font-size:26px;color:var(--navy);margin-bottom:11px;display:block}
.tk-card p{font-size:12px;color:var(--text-mid);line-height:1.6}

/* =========================================
   PROGRAM CURRICULUM
   ========================================= */
.curr-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:22px}
.curr-item{display:flex;align-items:center;gap:11px;background:var(--white);border-radius:7px;padding:18px 16px;font-size:18px;font-weight:600;color:var(--text-dark);box-shadow:0 2px 8px rgba(26,45,90,.06);border-left:4px solid var(--gold);transition:var(--ease)}
.curr-item:hover{transform:translateX(4px);border-left-color:var(--navy)}
.curr-item i{color:var(--gold);flex-shrink:0;font-size:11px}

/* =========================================
   ACCREDITATION LOGOS — PDF Section 11
   ========================================= */
.accred-scroll-wrap {
  overflow: hidden;
  width: 100%;
  padding: 24px 0 8px;
  /* Fade edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image:         linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

.accred-scroll-track {
  display: flex;
  align-items: center;
  gap: 20px;
  width: max-content;
  animation: accredScroll 8s linear infinite;
}

/* Pause on hover */
.accred-scroll-wrap:hover .accred-scroll-track {
  animation-play-state: paused;
}

@keyframes accredScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}

/* Responsive for accreditations scroll */
@media (max-width: 768px) {
  .accred-scroll-track { gap: 16px; animation-duration: 18s; }
}

@media (max-width: 480px) {
  .accred-scroll-track { gap: 12px; animation-duration: 14s; }
}
.accred-logo-box{border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border:2px solid transparent;transition:var(--ease)}
.accred-logo-box:hover{border-color:var(--gold);background:var(--white)}
.accred-logo-box i{font-size:22px;color:var(--navy)}
.accred-logo-box span{font-family:var(--font-h);font-size:10px;font-weight:800;color:var(--navy)}

/* =========================================
   RECRUITERS — PDF Section 11
   ========================================= */
.recruiter-row{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px;justify-content:center}
.rec-pill{padding:11px 22px;background:var(--white);border-radius:7px;border:1.5px solid #cdd5e4;font-family:var(--font-h);font-size:12px;font-weight:800;color:var(--navy);transition:var(--ease);box-shadow:0 2px 8px rgba(26,45,90,.06)}
.rec-pill:hover{border-color:var(--gold);transform:translateY(-2px);box-shadow:0 6px 16px rgba(26,45,90,.12)}

/* =========================================
   MENTORS
   ========================================= */
.mentors-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.mentor-card{background:var(--white);border-radius:var(--radius-lg);padding:26px 18px;text-align:center;box-shadow:var(--shadow);transition:var(--ease);border-bottom:3px solid transparent}
.mentor-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg);border-bottom-color:var(--gold)}
.mentor-av{width:78px;height:78px;border-radius:50%;background:var(--navy);display:flex;align-items:center;justify-content:center;margin:0 auto 18px;color:var(--gold)}
.mentor-card h4{font-family:var(--font-h);font-size:18px;font-weight:800;color:var(--navy);margin-bottom:4px}
.mentor-card p{font-size:11px;color:var(--text-mid);margin-bottom:9px}
.mentor-tag{display:inline-block;background:rgba(245,166,35,.12);color:var(--gold-dark);border:1px solid rgba(245,166,35,.3);padding:3px 10px;border-radius:50px;font-size:10px;font-weight:700}

/* =========================================
   SUCCESS STORIES
   ========================================= */
.stories-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px;margin-top:34px}
.story-card{background:var(--white);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow);transition:var(--ease)}
.story-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.story-vid{height:155px;background:linear-gradient(135deg,#1a1a2e,#16213e);display:flex;align-items:center;justify-content:center;cursor:pointer;transition:var(--ease)}
.story-vid:hover{background:linear-gradient(135deg,#16213e,#0f3460)}
.play-ic{color:#ff0000;transition:var(--ease)}
.story-vid:hover .play-ic{transform:scale(1.15)}
.story-name{font-family:var(--font-h);font-size:18px;font-weight:800;color:var(--navy);padding:18px 15px 3px}
.story-role{font-size:11px;color:var(--text-mid);padding:0 15px 18px}

/* =========================================
   SUCCESS STORIES — YouTube Videos
   ========================================= */
.video-scroll{display:flex;gap:18px;overflow-x:auto;padding-bottom:12px;scrollbar-width:thin;scrollbar-color:rgba(26,45,90,.35) transparent}
.video-scroll::-webkit-scrollbar{height:8px}
.video-scroll::-webkit-scrollbar-thumb{background:rgba(26,45,90,.35);border-radius:999px}
.video-card{flex:0 0 250px;max-width:250px;background:var(--white);border-radius:var(--radius-lg);box-shadow:var(--shadow);overflow:hidden;text-decoration:none;transition:transform .25s,box-shadow .25s}
.video-card:hover{transform:translateY(-6px);box-shadow:var(--shadow-lg)}
.video-thumb{height:140px;background-size:cover;background-position:center center;position:relative}
.video-thumb::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,0) 35%,rgba(0,0,0,.55) 100%)}
.video-thumb::before{content:'â–¶';position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);font-size:32px;color:rgba(255,255,255,.92);text-shadow:0 4px 12px rgba(0,0,0,.45);pointer-events:none;}
.video-title{font-family:var(--font-h);font-size:18px;font-weight:800;color:var(--navy);padding:12px 12px 18px;line-height:1.3}

/* =========================================
   FAQ
   ========================================= */
.faq-list{max-width:780px;margin:28px auto 0;display:flex;flex-direction:column;gap:10px}
.faq-item{border-radius:var(--radius);border:1.5px solid #cdd5e4;overflow:hidden;background:var(--white)}
.faq-q{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 20px;background:transparent;border:none;cursor:pointer;font-family:var(--font-b);font-size:18px;font-weight:700;color:var(--navy);text-align:left;gap:10px;transition:var(--ease)}
.faq-q:hover{background:var(--light-gray)}
.faq-item.open .faq-q{background:var(--navy);color:var(--white)}
.faq-item.open .faq-q i{color:var(--gold)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .35s ease}
.faq-a p{padding:18px 20px;font-size:18px;color:var(--text-mid);line-height:1.75;border-top:1px solid var(--light-gray)}

/* =========================================
   FINAL CTA — PDF Section 12
   ========================================= */
.final-cta{background:linear-gradient(135deg,var(--navy-deep),var(--navy-mid))}
.final-grid{display:grid;grid-template-columns:1fr 410px;gap:48px;align-items:start}
.final-h2{font-family:var(--font-h);font-size:26px;font-weight:900;color:var(--white);margin-bottom:12px;line-height:1.3}
.final-p{color:rgba(255,255,255,.68);font-size:18px;margin-bottom:22px;line-height:1.75}
.final-list{display:flex;flex-direction:column;gap:10px}
.final-list li{display:flex;align-items:flex-start;gap:9px;color:rgba(255,255,255,.78);font-size:18px}
.final-list li i{color:var(--gold);margin-top:2px}

/* =========================================
   FOOTER
   ========================================= */
.footer{background:var(--navy-deep);padding:28px 0;border-top:2.5px solid var(--gold)}
.footer-in{display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center}
.footer-in p{color:rgba(255,255,255,.5);font-size:11px;max-width:380px;margin-top:5px}
.footer-links{display:flex;gap:22px}
.footer-links a{color:rgba(255,255,255,.5);font-size:11px;transition:var(--ease)}
.footer-links a:hover{color:var(--gold)}
.footer-copy{color:rgba(255,255,255,.3);font-size:10px}

/* =========================================
   RESPONSIVE
   ========================================= */
@media(max-width:1024px){
  .hero-grid{grid-template-columns:1fr 330px;gap:30px}
  .accred-cards{grid-template-columns:repeat(3,1fr)}
  .career-grid{grid-template-columns:repeat(3,1fr)}
  .skillgap-grid{grid-template-columns:1fr 290px}
  .skillgap-grid .sg-avatar-wrap{display:none}
  .final-grid{grid-template-columns:1fr 350px}
}
@media(max-width:860px){
  .hero-grid{grid-template-columns:1fr}
  .hero-right{order:-1}
  .form-card{position:static}
  .boom-grid,.adv-grid,.skillgap-grid,.final-grid{grid-template-columns:1fr}
  .mentors-grid,.stories-grid{grid-template-columns:repeat(2,1fr)}
  .skills-grid{grid-template-columns:repeat(2,1fr)}
  .toolkit-grid{grid-template-columns:repeat(2,1fr)}
  .curr-grid{grid-template-columns:1fr}
  .career-grid{grid-template-columns:repeat(3,1fr)}
  .hero-h1{font-size:24px}
  .sec-title{font-size:22px}
}
@media(max-width:600px){
  .topbar-nav{display:none}
  .topbar-mob{display:flex}
  .hero-h1{font-size:20px}
  .ideal-grid{grid-template-columns:1fr}
  .accred-cards{grid-template-columns:repeat(2,1fr)}
  .career-grid{grid-template-columns:repeat(2,1fr)}
  .skills-grid,.toolkit-grid,.mentors-grid,.stories-grid{grid-template-columns:1fr}
  .problem-grid{grid-template-columns:1fr}
  .stats-row{gap:0}
  .stat-item{padding:7px 16px}
  .stat-sep{display:none}
  .hero-ctas{flex-direction:column}
  .hero-ctas .btn{text-align:center}
  .cta-banner{padding:16px;gap:12px}
  section{padding:44px 0}
  .final-grid{grid-template-columns:1fr}
  /* Topbar mobile improvements */
  .topbar { padding: 8px 0; }
  .topbar-inner { gap: 8px; flex-direction: column; align-items: center; }
  .logo-wrap { gap: 8px; order: -1; }
  .logo-img { height: 28px !important; }
  .logo-name { font-size: 16px; }
  .topbar-mob { order: 1; justify-content: center; }
  .topbar-mob .mob-btn { padding: 6px 10px; font-size: 10px; }
}

/* =========================================
   INLINE SVG ICON SYSTEM — no CDN required
   ========================================= */
.ic {
  display:inline-flex;
  align-items:center;
  justify-content:center;
  flex-shrink:0;
}
.ic svg {
  fill: currentColor;
  width: 1em;
  height: 1em;
  display:block;
}
/* Size variants */
.ic-sm  { font-size: 12px; }
.ic-md  { font-size: 16px; }
.ic-lg  { font-size: 22px; }
.ic-xl  { font-size: 28px; }
.ic-2x  { font-size: 32px; }
.ic-3x  { font-size: 48px; }

/* ---- Icon color & size fixes ---- */
.topbar-call .ic { color: var(--gold); }
.topbar-wa .ic   { color: var(--white); font-size: 18px; }
.ideal-chip .ic  { color: var(--gold); font-size: 18px; }
.outcomes-list li .ic { color: var(--gold); margin-top: 2px; }
.check-list li .ic    { color: var(--green); margin-top: 2px; }
.sg-mid li .ic        { color: var(--green); }
.adv-item .ic         { color: var(--green); margin-top: 2px; }
.adv-out li .ic       { color: var(--gold); margin-top: 2px; }
.final-list li .ic    { color: var(--gold); margin-top: 2px; }
.prob-card .ic        { color: var(--red); font-size: 19px; margin-top: 1px; flex-shrink: 0; }
.boom-card .ic        { color: var(--green); }
.check-list .ic       { color: var(--green); }
.faq-q .ic            { flex-shrink: 0; }
.faq-item.open .faq-q .ic { color: var(--gold); }
.sk-icon .ic          { font-size: 20px; color: var(--gold); }
.tk-card .ic          { font-size: 26px; color: var(--navy); margin-bottom: 11px; }
.career-card .ic      { font-size: 26px; color: var(--navy); margin-bottom: 9px; display: block; transition: var(--ease); }
.career-card:hover .ic { color: var(--gold); }
.mentor-av .ic        { color: var(--gold); }
.play-ic .ic          { color: #ff0000; font-size: 32px; }
.curr-item .ic        { color: var(--gold); flex-shrink: 0; font-size: 10px; }
.accred-logo-box .ic  { font-size: 22px; color: var(--navy); }
.sg-avatar .ic        { color: var(--gold); font-size: 48px; }
.footer-in .ic        { color: var(--white); }


/* =========================================
   IMAGE STYLES
   ========================================= */

/* Logo images in topbar */
.logo-img { display:block; object-fit:contain; }

/* Hero illustration */
.hero-illus {
  width: 100%;
  border-radius: 12px;
  margin-bottom: 16px;
  display: block;
  box-shadow: 0 8px 32px rgba(0,0,0,0.35);
}

/* Partner logo pills with images */
.logo-pill img {
  height: 32px;
  display: block;
  object-fit: contain;
}
.logo-pill {
  padding: 8px 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 120px;
}

/* Accreditation logo boxes with images */
.accred-logo-box {
  overflow: hidden;
  padding: 0;
}
.accred-logo-box img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 7px;
  display: block;
}

/* Mentor avatar images */
.mentor-av {
  overflow: hidden;
}
.mentor-av img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
}

/* Story thumbnails */
.story-vid {
  overflow: hidden;
}
.story-vid img {
  width: 100%;
  display: block;
  border-radius: 0;
}

/* Graduate illustration */
.sg-avatar {
  overflow: hidden;
}
.sg-avatar img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Responsive image adjustments */
@media (max-width: 600px) {
  .hero-illus { display: none; }
  .logo-img { height: 28px !important; }
}

/* =========================================
   PARTNER LOGOS — INFINITE SCROLL CAROUSEL
   ========================================= */

/* Remove old logo-row / logo-pill styles for the scroll version */
.logo-scroll-wrap {
  overflow: hidden;
  width: 100%;
  padding: 24px 0 8px;
  /* Fade edges */
  -webkit-mask-image: linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
  mask-image:         linear-gradient(to right, transparent 0%, black 8%, black 92%, transparent 100%);
}

/* Separate multiple scroll rows */
.logo-scroll-wrap + .logo-scroll-wrap {
  margin-top: 18px;
}

/* Reverse direction on the second row for better visual variety */
.logo-scroll-track.reverse {
  animation-direction: reverse;
}

.logo-scroll-track {
  display: flex;
  align-items: center;
  gap: 48px;
  width: max-content;
  animation: logoScroll 28s linear infinite;
}

/* Pause on hover */
.logo-scroll-wrap:hover .logo-scroll-track {
  animation-play-state: paused;
}

@keyframes logoScroll {
  0%   { transform: translateX(0); }
  100% { transform: translateX(-50%); } /* moves exactly one set-width */
}

.logo-scroll-item {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #fff;
  border: 1.5px solid #e8edf5;
  border-radius: 10px;
  transition: border-color .25s, box-shadow .25s, transform .25s;
}

/* Responsive sizing */
@media (max-width: 768px) {
  .logo-scroll-item {
    height: 52px;
    min-width: 110px;
    padding: 8px 16px;
  }
  .logo-scroll-item img { height: 32px; }
  .logo-scroll-track { gap: 28px; animation-duration: 20s; }
}

@media (max-width: 480px) {
  .logo-scroll-item {
    height: 44px;
    min-width: 90px;
    padding: 6px 12px;
  }
  .logo-scroll-item img { height: 26px; }
  .logo-scroll-track { gap: 18px; animation-duration: 16s; }
}


/* =========================================
   MENTOR SLIDER — HORIZONTAL CARD SLIDER
   ========================================= */

.mentors-section { overflow: hidden; }

.mentor-featured-row {
  display: flex;
  gap: 16px;
  justify-content: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  margin: 28px 0 16px;
  padding-bottom: 8px;
}

.mentor-featured-row::-webkit-scrollbar {
  height: 6px;
}

.mentor-featured-row::-webkit-scrollbar-thumb {
  background: rgba(26, 45, 90, 0.35);
  border-radius: 999px;
}

.mentor-featured-row .mentor-card {
  flex: 0 0 220px;
  max-width: 220px;
}

@media (max-width: 768px) {
  .mentor-featured-row {
    flex-wrap: wrap;
    overflow-x: visible;
  }

  .mentor-featured-row .mentor-card {
    flex: 0 0 100%;
    max-width: 100%;
  }
}

.mentor-slider-wrap {
  position: relative;
  display: flex;
  align-items: center;
  gap: 0;
  margin-top: 12px;
}

/* Arrow buttons */
.slider-arrow {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 2px solid var(--navy);
  background: var(--white);
  color: var(--navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all .25s;
  z-index: 10;
  position: relative;
}

.slider-arrow svg {
  width: 22px;
  height: 22px;
  fill: var(--navy);
  transition: fill .25s;
}

.slider-arrow:hover {
  background: var(--navy);
  border-color: var(--navy);
}

.slider-arrow:hover svg { fill: var(--white); }

/* Viewport — clips cards */
.mentor-slider-viewport {
  flex: 1;
  overflow: hidden;
  margin: 0 12px;
}

/* Track — slides horizontally */
.mentor-slider-track {
  display: flex;
  gap: 20px;
  will-change: transform;
}

/* Responsive for mentor scroll */
@media (max-width: 768px) {
  .mentor-slider-track { gap: 16px; }
}

@media (max-width: 480px) {
  .mentor-slider-track { gap: 12px; }
}

/* Individual card — redesigned with real photo */
.mentor-card {
  flex: 0 0 calc(25% - 15px);   /* 4 cards desktop */
  background: var(--white);
  border-radius: var(--radius-lg);
  overflow: hidden;
  box-shadow: var(--shadow);
  transition: transform .3s, box-shadow .3s;
  border-bottom: 3px solid transparent;
  display: flex;
  flex-direction: column;
}

.mentor-card:hover {
  transform: translateY(-6px);
  box-shadow: var(--shadow-lg);
  border-bottom-color: var(--gold);
}

/* Photo area — portrait, top-aligned */
.mentor-photo-wrap {
  width: 100%;
  aspect-ratio: 3 / 4;
  overflow: hidden;
  background: var(--light-gray);
  position: relative;
}

.mentor-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  display: block;
  transition: transform .4s ease;
}

.mentor-card:hover .mentor-photo {
  transform: scale(1.04);
}

/* Info area */
.mentor-info {
  padding: 16px 16px 18px;
  text-align: center;
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
}

.mentor-info h4 {
  font-family: var(--font-h);
  font-size: 18px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1.3;
  margin: 0;
}

.mentor-info p {
  font-size: 11px;
  color: var(--text-mid);
  line-height: 1.5;
  margin: 0;
}

/* Keep existing mentor-tag styles */

/* Dot indicators */
.mentor-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  margin-top: 24px;
}

.mentor-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  border: none;
  background: #ccd4e0;
  cursor: pointer;
  padding: 0;
  transition: all .25s;
}

.mentor-dot.active {
  background: var(--navy);
  transform: scale(1.25);
}

.mentor-dot:hover { background: var(--gold); }

/* ── Responsive card widths ── */
@media (max-width: 1024px) {
  .mentor-card { flex: 0 0 calc(33.333% - 18px); }
}

@media (max-width: 768px) {
  .mentor-card { flex: 0 0 calc(50% - 10px); }
  .mentor-slider-track { gap: 16px; }
  .slider-arrow { width: 38px; height: 38px; }
}

@media (max-width: 480px) {
  .mentor-card { flex: 0 0 calc(100% - 0px); }
  .mentor-slider-track { gap: 12px; }
  .slider-arrow { width: 34px; height: 34px; }
  .slider-arrow svg { width: 18px; height: 18px; }
  .mentor-slider-wrap { gap: 0; }
  .mentor-slider-viewport { margin: 0 6px; }
}