*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --bg:#f7f7f5;--surface:#ffffff;--border:#eaeae4;
  --text:#1c1c1c;--text-2:#52525b;--muted:#71717a;--subtle:#a1a1aa;--alt:#f4f4f5;
  --coral:#D96C4A;--coral-dim:rgba(217,108,74,0.12);
  --green:#2E4D3A;--navy:#2C3A47;--tan:#8B7355;--gold:#C9960C;--dark:#1c1c1c;
  --ease:cubic-bezier(0.16,1,0.3,1);
}
html{scroll-behavior:smooth}
body{font-family:'Inter',-apple-system,BlinkMacSystemFont,sans-serif;font-size:16px;line-height:1.6;color:var(--text);background:var(--bg);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:rgba(217,108,74,0.18)}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{max-width:1120px;margin:0 auto;padding:0 24px}
.section{padding:96px 0}
.section-white{background:var(--surface)}

/* NUMBERED SECTION HEADER */
.sh{display:flex;align-items:center;gap:14px;margin-bottom:48px}
.sh-num{font-size:11px;font-weight:700;letter-spacing:2px;color:var(--coral);font-variant-numeric:tabular-nums;white-space:nowrap}
.sh-label{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--muted);white-space:nowrap}
.sh-rule{flex:1;height:1px;background:var(--border)}

/* URGENCY BAR */
.urgency-bar{background:var(--dark);color:rgba(255,255,255,.6);font-size:13px;font-weight:500;text-align:center;padding:10px 24px;display:flex;align-items:center;justify-content:center;gap:10px}
.urgency-dot{width:6px;height:6px;background:var(--coral);border-radius:50%;animation:pulse 2s ease-in-out infinite;flex-shrink:0}
.urgency-bar strong{color:#fff}
.urgency-bar a{color:var(--coral);font-weight:600;transition:opacity .15s}
.urgency-bar a:hover{opacity:.8}

/* NAV */
.nav{position:sticky;top:0;z-index:100;background:var(--surface);border-bottom:1px solid var(--border);transition:box-shadow .2s}
.nav.scrolled{box-shadow:0 2px 20px rgba(0,0,0,.04)}
.nav-inner{display:flex;align-items:center;gap:32px;height:64px}
.nav-logo{font-size:18px;font-weight:900;color:var(--text);letter-spacing:-.5px;flex-shrink:0}
.nav-logo span{color:var(--coral)}
.nav-links{display:flex;align-items:center;gap:4px;flex:1}
.nav-links > a{font-size:14px;font-weight:500;color:var(--muted);padding:6px 10px;border-radius:8px;transition:all .15s}
.nav-links > a:hover{color:var(--text);background:var(--alt)}
.nav-actions{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* Courses dropdown. CSS opens it on hover; main.js opens it on click and on
   the keyboard, through .open. Deliberately no :focus-within here: it would
   match the toggle inside .nav-drop, and the menu would spring back open the
   moment Escape returned focus to the toggle.

   .nav-drop-menu is a transparent wrapper whose padding bridges the gap
   between the toggle and the card. With a plain margin the pointer leaves the
   menu while crossing that gap and it shuts under the cursor. */
.nav-drop{position:relative}
.nav-drop-toggle{display:inline-flex;align-items:center;gap:6px;font-family:inherit;font-size:14px;font-weight:500;
  color:var(--muted);background:none;border:none;border-radius:8px;padding:6px 10px;cursor:pointer;transition:all .15s}
.nav-drop-toggle:hover,.nav-drop.open .nav-drop-toggle{color:var(--text);background:var(--alt)}
.nav-drop-toggle svg{transition:transform .18s var(--ease)}
.nav-drop:hover .nav-drop-toggle svg,.nav-drop.open .nav-drop-toggle svg{transform:rotate(180deg)}
.nav-drop-menu{position:absolute;top:100%;left:0;padding-top:8px;min-width:288px;z-index:110;
  opacity:0;visibility:hidden;transform:translateY(-4px);
  transition:opacity .15s var(--ease),transform .15s var(--ease),visibility .15s}
.nav-drop:hover .nav-drop-menu,.nav-drop.open .nav-drop-menu{
  opacity:1;visibility:visible;transform:translateY(0)}
.nav-drop-card{background:var(--surface);border:1px solid var(--border);border-radius:12px;padding:6px;
  box-shadow:0 8px 28px rgba(0,0,0,.07)}
.nav-drop-item{display:block;padding:9px 12px;border-radius:8px;transition:background .15s}
.nav-drop-item:hover,.nav-drop-item:focus-visible{background:var(--alt)}
.nav-drop-name{display:block;font-size:14px;font-weight:600;color:var(--text);transition:color .15s}
.nav-drop-item:hover .nav-drop-name{color:var(--coral)}
.nav-drop-desc{display:block;font-size:12px;color:var(--subtle);margin-top:2px}
.nav-drop-all{display:block;margin-top:6px;padding:9px 12px;border-top:1px solid var(--border);
  font-size:12.5px;font-weight:600;color:var(--muted);letter-spacing:.02em;transition:color .15s}
.nav-drop-all:hover{color:var(--coral)}
.nav-login{font-size:14px;font-weight:600;color:var(--text-2);padding:8px 16px;border-radius:8px;transition:all .15s}
.nav-login:hover{background:var(--alt);color:var(--text)}

/* BUTTONS */
.btn-coral{display:inline-flex;align-items:center;gap:6px;background:var(--coral);color:#fff;font-size:14px;font-weight:700;padding:10px 20px;border-radius:10px;border:none;cursor:pointer;transition:all .15s var(--ease);white-space:nowrap;font-family:inherit}
.btn-coral:hover{background:#c45e3c;transform:translateY(-1px);box-shadow:0 4px 16px rgba(0,0,0,.08)}
.btn-coral-lg{font-size:16px;padding:16px 32px;border-radius:12px}
.btn-outline{display:inline-flex;align-items:center;gap:6px;background:transparent;color:var(--text-2);font-size:14px;font-weight:600;padding:10px 20px;border-radius:10px;border:1px solid var(--border);cursor:pointer;transition:all .15s;white-space:nowrap;font-family:inherit}
.btn-outline:hover{background:var(--alt);color:var(--text)}
.btn-outline-lg{font-size:15px;padding:14px 24px;border-radius:12px}
.btn-ghost-light{display:inline-flex;align-items:center;gap:6px;background:transparent;color:rgba(255,255,255,.6);font-size:15px;font-weight:600;padding:14px 24px;border-radius:10px;border:1px solid rgba(255,255,255,.15);cursor:pointer;transition:all .15s;font-family:inherit}
.btn-ghost-light:hover{background:rgba(255,255,255,.06);color:#fff;border-color:rgba(255,255,255,.3)}

/* HERO */
/* Minus the announcement bar and nav above it. The hero sits 106px down the page, so a flat 100vh made it overflow the viewport by exactly that much and pushed the stats bar out of sight. */
.hero{position:relative;background:var(--dark);min-height:calc(100vh - 106px);display:flex;flex-direction:column;justify-content:flex-end;padding-top:64px;padding-bottom:34px;overflow:hidden}
.hero-meta{display:flex;align-items:center;gap:16px;margin-bottom:40px;flex-wrap:wrap}
.hero-tag{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.35)}
.hero-tag-sep{width:4px;height:4px;border-radius:50%;background:rgba(255,255,255,.15);flex-shrink:0}
.hero-tag-coral{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--coral)}
.hero-heading{font-size:clamp(44px,7.5vw,88px);font-weight:900;letter-spacing:-2.5px;line-height:1.02;color:#fff;margin-bottom:32px}
.hero-heading em{font-style:normal;color:var(--coral)}
.hero-rule{height:1px;background:rgba(255,255,255,.08);margin-bottom:32px}
.hero-bottom{display:grid;grid-template-columns:1fr auto;gap:48px;align-items:center}
.hero-sub{font-size:17px;color:rgba(255,255,255,.45);line-height:1.65;max-width:480px}
.hero-ctas{display:flex;align-items:center;gap:12px;flex-shrink:0}
.hero-stats{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid rgba(255,255,255,.08);margin-top:56px;padding-top:32px}
.hero-stat{padding-right:32px}
.hero-stat+.hero-stat{padding-left:32px;border-left:1px solid rgba(255,255,255,.08)}
.hero-stat-val{font-size:32px;font-weight:900;color:#fff;letter-spacing:-1px;line-height:1;font-variant-numeric:tabular-nums}
.hero-stat-val em{font-style:normal;color:var(--coral)}
.hero-stat-val small{font-size:16px;font-weight:600;color:rgba(255,255,255,.25);letter-spacing:0}
.hero-stat-label{font-size:12px;font-weight:500;color:rgba(255,255,255,.3);margin-top:6px}

/* HERO HOME REDESIGN */
.hero-split { display:grid; grid-template-columns:1fr 0.9fr; gap:32px; align-items:center; flex:1; z-index:1; position:relative; min-height:680px; padding-bottom:120px; padding-top:40px;}
.hero-split .hero-heading{font-size:clamp(44px,4vw,60px);font-weight:900;letter-spacing:-1.5px;line-height:1.2;color:#fff;margin-bottom:24px;position:relative;}
.hero-highlight{position:relative;display:inline-block;z-index:1;color:var(--coral);}
.hero-underline{position:absolute;left:0;right:0;bottom:-10px;width:100%;height:15px;z-index:-1;}
.hero-split .hero-sub{font-size:16px;color:rgba(255,255,255,.7);line-height:1.6;max-width:440px;margin-bottom:40px;}
.hero-split .hero-ctas{display:flex;align-items:center;gap:16px;margin-bottom:48px;}
.hero-stats-row{display:flex;gap:32px;align-items:center;flex-wrap:wrap;}
.hero-stats-row .hero-stat-pill{display:flex;align-items:center;gap:10px;font-size:13px;font-weight:500;color:rgba(255,255,255,.7);}
.hero-stats-row .hero-stat-pill svg{color:rgba(255,255,255,.4);}

/* COLLAGE */
.hero-collage{position:relative;width:100%;height:100%;min-height:560px;}
.collage-item{position:absolute;border-radius:24px;overflow:hidden;box-shadow:0 16px 40px rgba(0,0,0,0.15);}
.collage-item img{width:100%;height:100%;object-fit:cover;display:block;}
.collage-1{width:320px;height:420px;top:40px;left:50px;z-index:2;}
.collage-3{width:140px;height:140px;top:10px;right:40px;z-index:1;border-radius:24px;}
.collage-6{width:160px;height:160px;bottom:70px;right:20px;z-index:3;border-radius:24px;}

.collage-card-wrapper{position:absolute;}
.collage-card{background:var(--surface);border-radius:12px;padding:12px 20px 12px 12px;display:flex;align-items:center;gap:14px;box-shadow:0 12px 32px rgba(0,0,0,0.15);}
.cc-avatar{width:42px;height:42px;border-radius:50%;object-fit:cover;}
.cc-info{display:flex;flex-direction:column;gap:2px;white-space:nowrap;}
.cc-info strong{font-size:14px;color:var(--text);font-weight:800;line-height:1.2;}
.cc-info span{font-size:12px;color:var(--muted);font-weight:500;}
.cc-icon{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;background:rgba(14,165,233,.15);color:#0ea5e9;}

.collage-2{top:110px;right:-10px;z-index:4;}
.collage-4{bottom:20px;right:80px;z-index:5;}

.collage-card-small{background:var(--surface);border-radius:12px;padding:12px 16px;display:flex;flex-direction:column;gap:6px;box-shadow:0 12px 32px rgba(0,0,0,0.15);position:relative;z-index:2;}
.cc-badge{background:rgba(217,108,74,0.12);color:var(--coral);font-weight:800;font-size:14px;padding:4px 8px;border-radius:6px;display:inline-block;width:max-content;}
.collage-card-small span:last-child{font-size:12px;color:var(--muted);font-weight:600;}
.collage-5{top:240px;left:-20px;z-index:5;}
.collage-connector{position:absolute;bottom:-30px;right:-30px;width:50px;height:50px;z-index:1;}

/* WAVE DIVIDER */
.hero-wave-divider{position:absolute;bottom:-1px;left:0;width:100%;overflow:hidden;line-height:0;z-index:1;}
.hero-wave-divider svg{display:block;width:calc(100% + 1.3px);height:80px;}

/* TOOLS MARQUEE */
.tools-section{padding:70px 0 50px;background:var(--surface);border-bottom:1px solid var(--border);overflow:hidden;}
.tools-title{font-size:14px;font-weight:600;color:var(--muted);text-transform:uppercase;letter-spacing:1px;margin-bottom:32px;}
.marquee-wrapper{width:100%;overflow:hidden;position:relative;display:flex;}
.marquee{display:flex;gap:56px;align-items:center;animation:scrollMarquee 40s linear infinite;white-space:nowrap;}
.marquee-tool{font-size:18px;font-weight:800;letter-spacing:-.4px;color:var(--subtle);flex-shrink:0;}
@keyframes scrollMarquee { 0% { transform: translateX(0); } 100% { transform: translateX(calc(-50% - 28px)); } }
@media (prefers-reduced-motion: reduce) {
  .marquee{animation:none;flex-wrap:wrap;justify-content:center;gap:24px 40px;white-space:normal;}
}

/* STAT PILLS:exact .lx-stat-pill from dashboard */
.pills-strip{background:var(--bg);padding:56px 0}
.pills-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.stat-pill{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:18px;box-shadow:0 2px 12px rgba(0,0,0,.02);transition:all .3s var(--ease);display:flex;align-items:center;gap:14px}
.stat-pill:hover{box-shadow:0 8px 24px rgba(0,0,0,.04);transform:translateY(-2px)}
.stat-icon{width:40px;height:40px;border-radius:10px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.si-coral{background:rgba(217,108,74,.12)}
.si-green{background:rgba(46,77,58,.12)}
.si-navy{background:rgba(44,58,71,.12)}
.si-tan{background:rgba(139,115,85,.12)}
.stat-val{font-size:24px;font-weight:800;color:var(--text);line-height:1;font-variant-numeric:tabular-nums}
.stat-suffix{font-size:13px;font-weight:600;color:var(--subtle)}
.stat-label{font-size:12px;color:var(--muted);font-weight:500;margin-top:3px}

/* WHY SECTION */
.why-grid{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.why-img{border-radius:16px;overflow:hidden;aspect-ratio:4/3;background:var(--alt)}
.why-img img{width:100%;height:100%;object-fit:cover}
.why-points{display:flex;flex-direction:column;gap:12px;margin-top:32px}
.why-point{display:flex;gap:16px;align-items:flex-start;padding:16px;background:var(--surface);border-radius:12px;border:1px solid var(--border);transition:all .3s var(--ease)}
.why-point:hover{box-shadow:0 4px 20px rgba(0,0,0,.04);transform:translateY(-1px)}
.why-point-icon{width:36px;height:36px;border-radius:9px;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.why-point h3{font-size:14px;font-weight:700;color:var(--text);margin-bottom:3px}
.why-point p{font-size:13px;color:var(--muted);line-height:1.5}

/* TICKER */
.ticker{background:var(--surface);border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:18px 0;overflow:hidden}
.ticker-track{display:flex;animation:marquee 28s linear infinite;width:max-content}
.ticker-item{display:flex;align-items:center;gap:10px;padding:0 24px;font-size:13px;font-weight:600;color:var(--muted);white-space:nowrap}
.ticker-dot{width:4px;height:4px;border-radius:50%;background:var(--border);flex-shrink:0}
.ticker-item span{color:var(--text)}

/* CURRICULUM:dashboard .lx-hc style */



.session-block{display:grid;grid-template-columns:300px 1fr;gap:48px;margin-top:56px;padding-top:40px;border-top:1px solid var(--border)}
.session-kicker{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--coral);margin-bottom:10px}
.session-title{font-size:20px;font-weight:800;letter-spacing:-.3px;margin-bottom:8px}
.session-sub{font-size:14px;color:var(--muted);line-height:1.6}
.session-row{display:flex;gap:28px;align-items:baseline;padding:13px 0;border-bottom:1px solid var(--border)}
.session-row:first-child{padding-top:0}
.session-row:last-child{border-bottom:none;padding-bottom:0}
.session-mins{font-size:13px;font-weight:700;color:var(--coral);font-variant-numeric:tabular-nums;min-width:60px;white-space:nowrap}
.session-activity{font-size:14px;color:var(--text-2)}
.wc-dark{background:var(--dark)}
.wc-green{background:var(--green)}
.wc-navy{background:var(--navy)}
.wc-coral{background:#8B3A1F}







/* OUTCOMES */
.outcomes-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.outcome-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px;transition:all .3s var(--ease)}
.outcome-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.04);transform:translateY(-2px)}
.outcome-num{font-size:44px;font-weight:900;letter-spacing:-2px;line-height:1;color:var(--text);font-variant-numeric:tabular-nums;margin-bottom:10px}
.outcome-num em{font-style:normal;color:var(--coral)}
.outcome-label{font-size:14px;font-weight:700;color:var(--text);margin-bottom:6px}
.outcome-sub{font-size:13px;color:var(--muted);line-height:1.55}

/* IMAGE STRIP */
.img-strip{display:grid;grid-template-columns:2fr 1fr 1fr;gap:12px;margin-top:48px;border-radius:16px;overflow:hidden}
.img-strip-item{overflow:hidden;background:var(--alt)}
.img-strip-item:first-child{aspect-ratio:16/9}
.img-strip-item:not(:first-child){aspect-ratio:4/3}
.img-strip-item img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.img-strip-item:hover img{transform:scale(1.03)}

/* TESTIMONIALS */
.testimonials-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.testimonial-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:24px;transition:all .3s var(--ease);display:flex;flex-direction:column}
.testimonial-card:hover{box-shadow:0 8px 32px rgba(0,0,0,.04);transform:translateY(-2px)}
.stars{display:flex;gap:3px;margin-bottom:16px}
.star{width:12px;height:12px;background:var(--coral);clip-path:polygon(50% 0%,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%)}
.testimonial-quote{font-size:14px;color:var(--text-2);line-height:1.65;flex:1;margin-bottom:20px}
.testimonial-footer{display:flex;align-items:center;gap:12px;padding-top:16px;border-top:1px solid var(--border);margin-top:auto}
.avatar{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:800;color:#fff;flex-shrink:0;letter-spacing:.5px}
.testimonial-name{font-size:13px;font-weight:700;color:var(--text)}
.testimonial-role{font-size:12px;color:var(--muted)}

/* PRICING */
.pricing-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;align-items:start}
.pricing-card{background:var(--surface);border:1px solid var(--border);border-radius:16px;padding:28px}
.pricing-card-featured{margin-top:-16px;padding:36px 28px;border-color:var(--coral);box-shadow:0 0 0 1px var(--coral)}
.pricing-badge{display:inline-flex;align-items:center;font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;background:var(--coral-dim);color:var(--coral);padding:5px 10px;border-radius:6px;margin-bottom:20px}
.pricing-tier{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.pricing-amount{font-size:44px;font-weight:900;letter-spacing:-2px;color:var(--text);line-height:1;font-variant-numeric:tabular-nums;margin-bottom:6px}
.pricing-amount small{font-size:20px;font-weight:600;letter-spacing:0;color:var(--muted)}
.pricing-note{font-size:12px;color:var(--muted);margin-bottom:24px;line-height:1.5}
.pricing-savings{font-size:12px;font-weight:700;color:var(--green);margin-bottom:24px}
.pricing-features{display:flex;flex-direction:column;gap:10px;margin-bottom:28px}
.pricing-feature{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--text-2)}
.pricing-check{width:18px;height:18px;border-radius:50%;background:rgba(46,77,58,.1);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--green);font-size:10px;font-weight:800}
.pricing-btn{width:100%;justify-content:center}
.pricing-badge-navy{background:rgba(44,58,71,.1);color:var(--navy)}
.pricing-badge-tan{background:rgba(201,150,12,.12);color:var(--gold)}
.pricing-plan-name{font-size:22px;font-weight:800;letter-spacing:-.5px;color:var(--text);margin-bottom:10px}
.pricing-schedule{display:flex;flex-direction:column;gap:5px;margin-bottom:20px;padding-bottom:20px;border-bottom:1px solid var(--border)}
.pricing-schedule-item{font-size:13px;color:var(--muted);display:flex;align-items:center;gap:7px}
.pricing-schedule-item::before{content:'';width:3px;height:3px;border-radius:50%;background:var(--border);flex-shrink:0}
.fee-rows{border-top:1px solid var(--border);margin-top:20px;padding-top:4px}
.fee-row{display:flex;justify-content:space-between;align-items:center;padding:9px 0;font-size:13px;color:var(--muted);border-bottom:1px solid var(--border)}
.fee-total-row{display:flex;justify-content:space-between;align-items:center;padding:14px 0 0}
.fee-total-label{font-size:15px;font-weight:800;color:var(--text)}
.fee-total-val{font-size:26px;font-weight:900;color:var(--gold);letter-spacing:-1px;font-variant-numeric:tabular-nums}
.fee-was{text-decoration:line-through;color:var(--subtle);margin-right:6px}
.pricing-installment{font-size:12px;color:#777777;text-align:center;margin-top:16px;line-height:1.4}
.pricing-urgency{font-size:11px;font-weight:600;color:var(--coral);text-align:center;margin-top:12px;letter-spacing:.3px}

/* FAQ */
.faq-list{border:1px solid var(--border);border-radius:16px;overflow:hidden}
.faq-item{border-bottom:1px solid var(--border);background:var(--surface)}
.faq-item:last-child{border-bottom:none}
.faq-q{width:100%;background:none;border:none;text-align:left;padding:22px 24px;font-size:15px;font-weight:600;color:var(--text);cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:16px;transition:background .15s;font-family:inherit}
.faq-q:hover,.faq-q.open{background:var(--alt)}
.faq-icon{width:22px;height:22px;border-radius:50%;border:1px solid var(--border);display:flex;align-items:center;justify-content:center;font-size:14px;color:var(--muted);flex-shrink:0;transition:all .2s var(--ease)}
.faq-q.open .faq-icon{background:var(--dark);border-color:var(--dark);color:#fff;transform:rotate(45deg)}
.faq-a{max-height:0;overflow:hidden;transition:max-height .3s var(--ease)}
.faq-a-inner{padding:0 24px 22px;font-size:14px;color:var(--text-2);line-height:1.65}

/* FINAL CTA */
.final-cta{background:var(--dark);padding:112px 0;text-align:center}
.final-cta-tag{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--coral);margin-bottom:24px}
.final-cta h2{font-size:clamp(32px,5vw,60px);font-weight:900;letter-spacing:-2px;color:#fff;max-width:640px;margin:0 auto 16px;line-height:1.08}
.final-cta p{font-size:16px;color:rgba(255,255,255,.4);max-width:420px;margin:0 auto 40px;line-height:1.6}
.final-ctas{display:flex;align-items:center;justify-content:center;gap:14px}
.final-note{font-size:12px;color:rgba(255,255,255,.25);margin-top:20px}

/* FOOTER */
.footer{background:var(--surface);border-top:1px solid var(--border);padding:48px 0 32px}
.footer-inner{display:grid;grid-template-columns:1.5fr 1fr 1fr 1fr;gap:48px;margin-bottom:40px}
.footer-logo{font-size:16px;font-weight:900;letter-spacing:-.5px;margin-bottom:10px}
.footer-logo span{color:var(--coral)}
.footer-tagline{font-size:13px;color:var(--muted);line-height:1.5;max-width:200px}
.footer-col h4{font-size:11px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--muted);margin-bottom:16px}
.footer-col a{display:block;font-size:13px;color:var(--text-2);margin-bottom:10px;transition:color .15s}
.footer-col a:hover{color:var(--text)}
.footer-bottom{padding-top:24px;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;font-size:12px;color:var(--subtle)}

/* ANIMATIONS */
@keyframes fadeSlideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
[data-reveal]{opacity:0;transform:translateY(12px)}
[data-reveal].revealed{animation:fadeSlideUp .6s var(--ease) forwards}

/* BREADCRUMB */
.crumb{display:flex;align-items:center;gap:8px;font-size:12px;color:var(--subtle);padding:16px 0;flex-wrap:wrap}
.crumb a{color:var(--muted);transition:color .15s}
.crumb a:hover{color:var(--text)}
.crumb-sep{color:var(--border)}
.crumb [aria-current]{color:var(--text-2);font-weight:600}

/* COMPACT HERO:course pages sit below the fold-filling homepage hero */
.hero-compact{min-height:auto;padding-top:64px;padding-bottom:56px;justify-content:flex-start}
.hero-compact .hero-heading{font-size:clamp(38px,5.6vw,68px);letter-spacing:-2px;margin-bottom:28px}
.hero-compact .hero-meta{margin-bottom:28px}

/* COURSE CARDS:gap-trick grid, one divider line between cards */
.course-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:16px;overflow:hidden}
.course-card{position:relative;background:var(--surface);padding:32px 28px 28px;display:flex;flex-direction:column;transition:background .18s var(--ease);overflow:hidden}
.course-card:hover{background:var(--alt)}
.course-ghost{position:absolute;right:16px;bottom:-14px;font-size:96px;font-weight:900;color:rgba(28,28,28,.035);font-variant-numeric:tabular-nums;line-height:1;pointer-events:none;user-select:none}
.course-kicker{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--coral);margin-bottom:12px}
.course-name{font-size:23px;font-weight:800;letter-spacing:-.6px;color:var(--text);margin-bottom:10px;line-height:1.15}
.course-desc{font-size:14px;color:var(--muted);line-height:1.6;margin-bottom:20px}
.course-tools{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:22px}
.course-tool{font-size:11px;font-weight:600;padding:4px 9px;border-radius:6px;background:var(--alt);color:var(--text-2);border:1px solid var(--border)}
.course-facts{display:flex;flex-direction:column;gap:7px;margin-bottom:22px;padding-top:18px;border-top:1px solid var(--border)}
.course-fact{display:flex;justify-content:space-between;align-items:baseline;font-size:13px;color:var(--muted)}
.course-fact strong{color:var(--text);font-weight:700;font-variant-numeric:tabular-nums}
.course-fact .course-fee{color:var(--gold);font-weight:800;font-size:15px}
.course-cta{margin-top:auto;display:flex;align-items:center;gap:6px;font-size:14px;font-weight:700;color:var(--text);transition:gap .15s var(--ease)}
.course-card:hover .course-cta{gap:10px}
.course-cta svg{flex-shrink:0}

/* COURSE MEDIA:photo above the card body on the course index */
.course-thumb{aspect-ratio:16/10;margin:-32px -28px 22px;overflow:hidden;background:var(--alt)}
.course-thumb img{width:100%;height:100%;object-fit:cover;transition:transform .4s var(--ease)}
.course-card:hover .course-thumb img{transform:scale(1.04)}

/* FORMAT STRIP:the single class format, explained once */
.format-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden;margin-top:40px}
.format-item{background:var(--surface);padding:22px}
.format-label{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin-bottom:8px}
.format-val{font-size:15px;font-weight:700;color:var(--text);line-height:1.4}

/* SINGLE PRICING CARD:one class format, so the card pairs with a note beside it */
.pricing-one{display:grid;grid-template-columns:minmax(0,420px) minmax(0,1fr);gap:48px;align-items:start}
.pricing-one .pricing-card{border-color:var(--coral);box-shadow:0 0 0 1px var(--coral)}
.pricing-aside{padding-top:8px}
.pricing-aside h3{font-size:19px;font-weight:800;letter-spacing:-.4px;color:var(--text);margin-bottom:10px}
.pricing-aside p{font-size:14px;color:var(--muted);line-height:1.65;margin-bottom:28px;max-width:420px}
.pricing-aside-row{display:flex;gap:20px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--border)}
.pricing-aside-row:last-child{border-bottom:none}
.pricing-aside-key{font-size:12px;font-weight:700;letter-spacing:1px;text-transform:uppercase;color:var(--coral);min-width:104px;flex-shrink:0}
.pricing-aside-val{font-size:14px;color:var(--text-2);line-height:1.55}

/* RELATED COURSES */
.related-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--border);border:1px solid var(--border);border-radius:14px;overflow:hidden}
.related-card{background:var(--surface);padding:26px;transition:background .18s var(--ease);display:block}
.related-card:hover{background:var(--alt)}
.related-kicker{font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase;color:var(--coral);margin-bottom:10px}
.related-name{font-size:19px;font-weight:800;letter-spacing:-.4px;color:var(--text);margin-bottom:8px}
.related-desc{font-size:13px;color:var(--muted);line-height:1.55}

.assess-kicker{font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);margin:56px 0 16px}

/* RESPONSIVE */
@media(max-width:960px){
  /* HERO REDESIGN MOBILE */
  .hero-split{grid-template-columns:1fr; gap:48px; text-align:center; min-height:0; padding-top:24px; padding-bottom:88px;}
  .hero-split .hero-heading{font-size:clamp(36px,8vw,56px);}
  .hero-split .hero-sub{margin-left:auto; margin-right:auto;}
  /* two side-by-side buttons do not fit a phone: let them wrap rather than
     run off the right edge */
  .hero-split .hero-ctas{justify-content:center; flex-wrap:wrap;}
  .hero-split .hero-meta{justify-content:center;}
  .hero-stats-row{justify-content:center;}
  .hero-collage{min-height:460px; max-width:460px; margin:0 auto;}
  
  .pills-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:1fr;gap:40px}
  
  .session-block{grid-template-columns:1fr;gap:24px}
  .outcomes-grid{grid-template-columns:repeat(2,1fr)}
  .testimonials-grid{grid-template-columns:1fr}
  .pricing-grid{grid-template-columns:1fr}
  .pricing-card-featured{margin-top:0}
  .hero-bottom{grid-template-columns:1fr;gap:24px}
  .hero-stats{grid-template-columns:repeat(2,1fr);row-gap:24px}
  .hero-stat+.hero-stat{border-left:none}
  .hero-stat{padding-left:0}
  .footer-inner{grid-template-columns:1fr 1fr;gap:32px}
  .img-strip{grid-template-columns:1fr 1fr}
  .img-strip-item:first-child{grid-column:span 2}
  .course-grid{grid-template-columns:1fr}
  .format-strip{grid-template-columns:repeat(2,1fr)}
  .pricing-one{grid-template-columns:1fr;gap:32px}
  .related-grid{grid-template-columns:1fr}
}
@media(max-width:700px){
  .hero-collage{display:none;}
  .hero-split{gap:0; padding-bottom:64px;}
  /* the strip wraps at this width and the dot separators strand themselves at
     the end of a line, so spacing carries the rhythm instead */
  .hero-split .hero-tag-sep{display:none;}
  .hero-split .hero-meta{gap:6px 18px;}
}
@media(max-width:600px){

  .container{padding:0 16px}
  .section{padding:64px 0}
  .nav-links{display:none}
  .pills-grid,.outcomes-grid{grid-template-columns:1fr}
  .hero-stats{grid-template-columns:1fr 1fr}
  .final-ctas{flex-direction:column}
  .footer-inner{grid-template-columns:1fr;gap:24px}
  .img-strip{grid-template-columns:1fr}
  .img-strip-item:first-child{grid-column:auto}
  .urgency-bar{font-size:12px}
  .format-strip{grid-template-columns:1fr}
  .course-thumb{margin:-32px -20px 20px}
  .course-card{padding:28px 20px 24px}
}

/* WHATSAPP FLOATING BUTTON */
.wa-float{position:fixed;bottom:24px;right:24px;z-index:999;width:56px;height:56px;border-radius:50%;background:#25D366;display:flex;align-items:center;justify-content:center;box-shadow:0 4px 16px rgba(0,0,0,.15);transition:transform .15s var(--ease),box-shadow .15s}
.wa-float:hover{transform:scale(1.08);box-shadow:0 6px 24px rgba(0,0,0,.2)}

/* FOOTER LINK COLOUR PARITY:the bottom row used inline handlers before */
.footer-bottom a{color:var(--muted);transition:color .15s}
.footer-bottom a:hover{color:var(--text)}

@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  [data-reveal]{opacity:1;transform:none}
}

/* The headline number in the fee table, now that there is only one of them. */
.fee-emph{font-weight:800;color:var(--text)}


/* the road itself: one continuous rail, inset so it stops at the first and
   last marker rather than running off into the section padding */



/* square marker, never a circle. The --bg ring masks the rail behind it. */

.wk:hover 




.wk:hover 




@media(max-width:600px){
  
  
  
  
}

/* 10-WEEK CURRICULUM ROADMAP */
/* A centre rail with the weeks alternating either side of it. Odd weeks sit
   left, even weeks right, each joined back to the rail by a short stub, so the
   eye zig-zags down the route in teaching order. Collapses to a single left
   rail on narrow screens, where two columns would leave the cards too tight to
   read. */
.roadmap{list-style:none;position:relative}
.roadmap::before{content:"";position:absolute;left:50%;margin-left:-1px;top:28px;bottom:28px;width:2px;background:var(--border)}
.wk-step{position:relative;width:calc(50% - 34px);margin-bottom:18px}
.wk-step:nth-child(odd){margin-right:auto}
.wk-step:nth-child(even){margin-left:auto}
.wk-step:last-child{margin-bottom:0}
/* stub joining card to rail */
.wk-step::before{content:"";position:absolute;top:32px;width:28px;height:1px;background:var(--border)}
.wk-step:nth-child(odd)::before{right:-28px}
.wk-step:nth-child(even)::before{left:-28px}
/* square marker, centred on the rail */
.wk-node{position:absolute;top:27px;width:12px;height:12px;box-shadow:0 0 0 4px var(--bg);transition:transform .16s var(--ease)}
.wk-step:nth-child(odd) .wk-node{right:-40px}
.wk-step:nth-child(even) .wk-node{left:-40px}
.wk-step:hover .wk-node{transform:scale(1.25)}

.curriculum-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px}
.week-card{border-radius:16px;padding:24px;transition:transform .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease);position:relative;overflow:hidden;border:1px solid rgba(255,255,255,0.06);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.week-card:hover{transform:translateY(-4px) scale(1.01);box-shadow:0 20px 40px rgba(0,0,0,.3), 0 0 0 1px rgba(255,255,255,0.15);border-color:rgba(255,255,255,0.15)}
/* Flat, per the house rule against decorative gradients. These were gradients
   until now, which also made the cards translucent enough to pick up whatever
   sat behind them. */
.wc-dark{background:var(--dark)}
.wc-green{background:var(--green)}
.wc-navy{background:var(--navy)}
.wc-coral{background:#8B3A1F}
.week-num{font-size:11px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:rgba(255,255,255,.35);margin-bottom:8px;font-variant-numeric:tabular-nums}
.week-title{font-size:17px;font-weight:800;color:#fff;letter-spacing:-.3px;margin-bottom:12px}
/* the week's topics, as an actual list rather than one bullet-run sentence */
/* CSS columns, not grid: a grid fills row-major, so reading down the first
   column would give every other topic. Columns flow down then across, which
   is the order the weeks actually teach in. */
.week-list{list-style:none;column-count:1}
.week-list li{break-inside:avoid;-webkit-column-break-inside:avoid;margin-bottom:3px}
.week-list li{position:relative;padding-left:14px;font-size:13px;line-height:1.5;color:rgba(255,255,255,.55)}
.week-list li::before{content:"";position:absolute;left:0;top:9px;width:5px;height:1px;background:rgba(255,255,255,.35)}
.week-tools{display:flex;flex-wrap:wrap;gap:6px;margin-top:16px}
.week-tool{font-size:11px;font-weight:600;padding:4px 10px;border-radius:6px;background:rgba(255,255,255,.1);color:rgba(255,255,255,.65)}
.week-ghost{position:absolute;right:18px;bottom:-8px;font-size:80px;font-weight:900;color:rgba(255,255,255,.04);font-variant-numeric:tabular-nums;line-height:1;pointer-events:none;user-select:none}

@media(max-width:900px){
  .roadmap::before{left:5px;margin-left:0}
  .wk-step{width:auto;margin-left:38px!important;margin-right:0!important}
  .wk-step::before,
  .wk-step:nth-child(odd)::before,
  .wk-step:nth-child(even)::before{left:-26px;right:auto;width:26px}
  .wk-node,
  .wk-step:nth-child(odd) .wk-node,
  .wk-step:nth-child(even) .wk-node{left:-38px;right:auto}
}
@media(max-width:600px){
  .wk-step{margin-left:26px!important}
  .wk-step::before,
  .wk-step:nth-child(odd)::before,
  .wk-step:nth-child(even)::before{left:-18px;width:18px}
  .wk-node,
  .wk-step:nth-child(odd) .wk-node,
  .wk-step:nth-child(even) .wk-node{left:-26px;width:10px;height:10px}
  .week-card{padding:20px}
}

/* HERO PHOTOGRAPH + ENTRANCE */
/* The photograph fills what used to be roughly 250px of empty space above the
   headline: the hero is anchored to the bottom of the viewport, so on a laptop
   the top half was simply blank. */
.hero-media{position:absolute;inset:0;z-index:0}
.hero-media img{width:100%;height:100%;object-fit:cover;object-position:center 32%}
/* A flat scrim, not a gradient. The house rules forbid gradient overlays on
   hero backgrounds, and a single opacity reads cleaner behind large type. */
.hero-media::after{content:"";position:absolute;inset:0;background:rgba(16,16,16,.80)}
.hero-inner{position:relative;z-index:1;width:100%}

.hero-heading .hero-line{display:block}

@keyframes heroRise{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
/* Runs on load rather than on scroll: the hero is above the fold, and gating
   the h1 behind an IntersectionObserver would leave it invisible if the script
   fails. "both" holds the start frame through the delay and the end frame
   after, so the final state is what persists. */
.hero-anim{animation:heroRise .75s var(--ease) both}

@media(prefers-reduced-motion:reduce){
  .hero-anim{animation:none}
}

/* Short viewports: on a 900px laptop the stats bar fell below the fold, which
   put the page's only proof out of sight at the moment it matters most.
   Keyed to viewport height rather than width, because that is the actual
   constraint. */
@media(max-height:940px){
  .hero{padding-top:76px;padding-bottom:26px}
  .hero-heading{font-size:clamp(40px,6.4vw,68px);margin-bottom:24px}
  .hero-meta{margin-bottom:26px}
  .hero-rule{margin-bottom:24px}
  .hero-sub{font-size:14px}
}

/* ── MOTION LAYER ──────────────────────────────────────────────────────────
   CSS only, per the house rule against animation libraries, and hung off the
   reveal observer that already exists rather than a second one. Durations stay
   in the documented 150-180ms band for interactions; the one exception is the
   section rule, which is a slower deliberate gesture rather than a response to
   a pointer. */

/* The numbered section rule draws itself in from the left as the header
   reveals. .sh already carries data-reveal, so this needs no new markup. */
.sh-rule{transform:scaleX(0);transform-origin:left;transition:transform .55s var(--ease) .12s}
.sh.revealed .sh-rule{transform:scaleX(1)}

/* Nav: an underline growing from the left reads as more considered than a
   background swap, and it points along the reading direction. */
.nav-links > a{position:relative}
.nav-links > a::after{content:"";position:absolute;left:10px;right:10px;bottom:3px;height:1px;
  background:var(--coral);transform:scaleX(0);transform-origin:left;transition:transform .18s var(--ease)}
.nav-links > a:hover::after{transform:scaleX(1)}

/* The arrow leads the eye out of the control it sits in. */
.btn-coral svg,.course-cta svg,.related-card svg,.btn-ghost-light svg{transition:transform .18s var(--ease)}
.btn-coral:hover svg,.course-cta:hover svg,.related-card:hover svg,.btn-ghost-light:hover svg{transform:translateX(3px)}

/* Course cards previously changed only their background on hover, which left
   the card feeling inert. Colouring the title makes the whole card read as one
   target. */
.course-card{transition:background .16s var(--ease)}
.course-name{transition:color .16s var(--ease)}
.course-card:hover .course-name{color:var(--coral)}

@media(prefers-reduced-motion:reduce){
  /* Without this the rule would stay at scaleX(0) and simply never appear. */
  .sh-rule{transform:none}
  .nav-links > a::after{transition:none}
  .nav-drop-menu{transition:none;transform:none}
  .nav-drop:hover .nav-drop-menu,.nav-drop.open .nav-drop-menu{transform:none}
  .nav-drop-toggle svg{transition:none}
}

/* =========================================
   COURSE CARDS
========================================= */
.course-grid-new { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 32px; }
/* position:relative anchors the .card-title a::before click target to the card.
   Without it the overlay resolves against the nearest positioned ancestor and
   swallows clicks across the whole section. */
.course-card-new { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; display: flex; flex-direction: column; transition: transform .18s var(--ease), box-shadow .18s var(--ease); }
.course-card-new:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(0,0,0,.08); }
.card-thumb-wrap { position: relative; width: 100%; aspect-ratio: 16/10; overflow: hidden; }
.card-thumb-wrap img { width: 100%; height: 100%; object-fit: cover; transition: transform .18s var(--ease); }
.course-card-new:hover .card-thumb-wrap img { transform: scale(1.05); }
.card-content-wrap { padding: 28px 24px 24px; display: flex; flex-direction: column; flex: 1; }
.card-meta { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.meta-dot { color: var(--border); }
.card-title { font-size: 20px; font-weight: 800; color: var(--text); margin-top: 12px; line-height: 1.3; letter-spacing: -.5px; }
.card-title a { color: inherit; text-decoration: none; }
.card-title a::before { content: ""; position: absolute; inset: 0; z-index: 1; }
.card-desc-new { font-size: 14px; color: var(--text-2); line-height: 1.6; margin-top: 10px; }
.card-duration { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text-2); margin-top: 14px; font-weight: 500; }
.card-duration svg { color: var(--muted); flex-shrink: 0; }
.card-divider { border: none; border-top: 1px solid var(--border); margin: 24px 0 20px; }
.card-footer-new { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: auto; position: relative; z-index: 2; }
.btn-card-action { font-size: 14px; font-weight: 700; color: var(--coral); display: inline-flex; align-items: center; gap: 4px; transition: gap .18s var(--ease); }
.btn-card-action::after { content: "\2192"; font-weight: 400; transition: transform .18s var(--ease); }
.course-card-new:hover .btn-card-action::after { transform: translateX(4px); }

@media(max-width: 960px) {
}

@media(max-width: 600px) {
  .course-grid-new { grid-template-columns: 1fr; }
}