/* ===================================================================
   NAHAR-STYLE OVERRIDES — bold, playful, kid-friendly
   =================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fredoka:wght@400;500;600;700&family=Nunito:wght@400;600;700;800;900&display=swap');

:root{
  --np-purple: #0097B2;
  --np-purple-dark: #0097B2;
  --np-purple-deep: #0097B2;
  --np-green: #7ED957;
  --np-green-deep: #7ED957;
  --np-blue: #0097B2;
  --np-blue-mid: #0097B2;
  --np-orange: #FADC6E;
  --np-orange-deep: #FADC6E;
  --np-yellow: #FADC6E;
  --np-pink: #D962A2;
  --np-teal: #7ED957;
  --np-lime: #7ED957;
}

html, body { font-family: 'Nunito', system-ui, sans-serif !important; }
h1, h2, h3, h4, .num, .eyebrow, .btn, .nm, .name { font-family: 'Fredoka', 'Nunito', sans-serif !important; letter-spacing: -0.01em !important; }

/* =================== HERO — BOLD PURPLE BLOB =================== */
.hero{
  background: var(--np-purple) !important;
  min-height: 100vh !important;
  position: relative !important;
  overflow: hidden !important;
  padding: 130px 0 100px !important;
  color: #fff !important;
}

.hero .slides,
.hero .grain,
.hero::before, .hero::after { display:none !important; }

/* Big concentric ring decorations - left side */
.hero::before{
  content:"" !important; display:block !important;
  position:absolute !important;
  left:-180px !important; top:60px !important;
  width: 520px !important; height: 520px !important;
  border-radius: 50% !important;
  border: 80px solid rgba(255,255,255,.06) !important;
  pointer-events:none !important;
  z-index: 1 !important;
}
.hero::after{
  content:"" !important; display:block !important;
  position:absolute !important;
  left: 80px !important; top: 320px !important;
  width: 90px !important; height: 90px !important;
  border-radius: 50% !important;
  background: rgba(255,255,255,.18) !important;
  pointer-events:none !important;
  z-index: 1 !important;
}

/* Hero content layout */
.hero .content {
  position: relative !important;
  z-index: 5 !important;
  display: grid !important;
  grid-template-columns: 1fr 1.05fr !important;
  gap: 40px !important;
  align-items: center !important;
  max-width: 1400px !important;
  margin: 0 auto !important;
  padding: 0 40px !important;
  min-height: 70vh !important;
}
.hero .text-col{ position:relative !important; z-index: 6 !important; }
.hero .photo-col{
  position: relative !important;
  width: 100% !important;
  aspect-ratio: 1/1 !important;
  z-index: 4 !important;
}
.hero .photo-col .blob{
  position: absolute !important;
  inset: 0 !important;
  width: 100% !important; height: 100% !important;
  background-image: var(--hero-photo, url('assets/photos/p10.jpg')) !important;
  background-size: cover !important;
  background-position: center !important;
  -webkit-mask-image: none !important;
          mask-image: none !important;
  border-radius: 48px !important;
  filter: contrast(1.05) saturate(1.15) !important;
}
/* decorative dot inside the blob, top-left */
.hero .photo-col::before{
  content:"" !important;
  position:absolute !important;
  left: -8% !important; top: 14% !important;
  width: 50px !important; height: 50px !important;
  background: var(--np-yellow) !important;
  border-radius: 50% !important;
  z-index: 5 !important;
  box-shadow: 0 0 0 12px rgba(251,191,36,.25) !important;
}
/* small floating circle inside blob area */
.hero .photo-col::after{
  content:"" !important;
  position:absolute !important;
  right: -4% !important; bottom: 10% !important;
  width: 30px !important; height: 30px !important;
  background: var(--np-pink) !important;
  border-radius: 50% !important;
  z-index: 5 !important;
}

.hero .badge{
  display:inline-flex !important;
  width: auto !important;
  background: #fff !important;
  color: var(--np-purple) !important;
  border:0 !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  font-weight: 700 !important;
  font-family: 'Fredoka', sans-serif !important;
  align-self: flex-start !important;
}
.hero .badge .pulse{ background: var(--np-orange) !important; }

.hero h1{
  font-family: 'Fredoka', sans-serif !important;
  color:#fff !important;
  -webkit-text-fill-color: #fff !important;
  font-size: clamp(46px, 5.5vw, 82px) !important;
  font-weight: 700 !important;
  line-height: 1.02 !important;
  margin: 24px 0 !important;
  letter-spacing: -0.02em !important;
  display: block !important;
  background: none !important;
  text-shadow: 0 2px 0 rgba(46,16,101,.15) !important;
}
.hero h1 br{ display:block !important; }
.hero h1 .accent, .hero h1 .underline{
  color: var(--np-yellow) !important;
  background: none !important;
  -webkit-text-fill-color: var(--np-yellow) !important;
  border:0 !important;
  padding: 0 !important;
}
.hero h1 .underline{ color: #fff !important; -webkit-text-fill-color: #fff !important; text-decoration: none !important; border-bottom: 0 !important; }

.hero .lead{
  color: rgba(255,255,255,.92) !important;
  font-size: 19px !important;
  max-width: 540px !important;
  font-weight: 500 !important;
}

.hero .actions{ display:inline-flex !important; gap: 18px !important; align-items:center !important; flex-wrap:wrap !important; }
.hero .actions .btn-primary{
  background: var(--np-yellow) !important;
  color: #0097B2 !important;
  border: 0 !important;
  border-radius: 999px !important;
  padding: 18px 32px !important;
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 600 !important;
  box-shadow: 0 8px 0 rgba(0,0,0,.2) !important;
  width: auto !important;
  display: inline-flex !important;
}
.hero .actions .btn-primary:hover{ transform: translateY(2px) !important; box-shadow: 0 6px 0 rgba(0,0,0,.2) !important; }
.hero .actions .video-cta{ color: #fff !important; }
.hero .actions .video-cta .play{ background: rgba(255,255,255,.2) !important; color:#fff !important; border:2px solid #fff !important; }

/* Hide vintage badge, doodles - we'll use Nahar style instead */
.badge-est{ display:none !important; }
.hero-doodles{ display: none !important; }

/* "10 Years" floating box top right of hero */
.hero .meta{ display:none !important; }

/* =================== STICKY BOTTOM CTA BAR =================== */
.sticky-cta{
  position: fixed !important;
  bottom: 0 !important; right: 0 !important;
  display: flex !important;
  z-index: 90 !important;
  font-family: 'Fredoka', sans-serif !important;
}
.sticky-cta a{
  padding: 12px 18px !important;
  color: #fff !important;
  text-decoration: none !important;
  font-weight: 600 !important;
  font-size: 12px !important;
  letter-spacing: .02em !important;
  display:inline-flex !important; align-items:center !important; gap:6px !important;
  border-top-left-radius: 14px !important;
  border-top-right-radius: 14px !important;
  margin-right: 3px !important;
  transition: transform .15s ease !important;
}
.sticky-cta a:hover{ transform: translateY(-3px) !important; }
.sticky-cta .c1{ background: var(--np-blue) !important; }
.sticky-cta .c2{ background: var(--np-pink) !important; }
.sticky-cta .c3{ background: var(--np-pink) !important; margin-right: 0 !important; }

/* Floating rocket mascot */
.rocket{
  position: fixed !important;
  bottom: 50px !important;
  right: 18px !important;
  width: 40px !important; height: 56px !important;
  z-index: 95 !important;
  animation: bob 3s ease-in-out infinite !important;
  pointer-events: none !important;
}
@keyframes bob {
  0%, 100%{ transform: translateY(0) rotate(-3deg); }
  50%{ transform: translateY(-12px) rotate(3deg); }
}

/* =================== RIGHT RAIL TABS =================== */
.rail{
  position: fixed !important;
  right: 0 !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  z-index: 80 !important;
  font-family: 'Fredoka', sans-serif !important;
}
.rail a{
  writing-mode: vertical-rl !important;
  text-orientation: mixed !important;
  transform: rotate(180deg) !important;
  background: var(--np-blue) !important;
  color: #fff !important;
  padding: 12px 7px !important;
  border-top-left-radius: 10px !important;
  border-bottom-left-radius: 10px !important;
  text-decoration: none !important;
  font-weight: 700 !important;
  font-size: 11px !important;
  letter-spacing: .03em !important;
  box-shadow: -3px 0 0 rgba(0,0,0,.1) !important;
}
.rail a.r2{ background: var(--np-orange) !important; }

/* "10 Years" floating box (top right hero) */
.tenyrs{
  position: absolute !important;
  top: 100px !important; right: 24px !important;
  background: #fff !important;
  border-radius: 18px !important;
  padding: 14px 18px !important;
  z-index: 6 !important;
  box-shadow: 0 8px 24px rgba(0,0,0,.18) !important;
  font-family: 'Fredoka', sans-serif !important;
  text-align: center !important;
  width: 78px !important;
}
.tenyrs .big{ font-size: 30px !important; font-weight:700 !important; color: var(--np-pink) !important; line-height: 1 !important; }
.tenyrs .sm{ font-size: 9px !important; color: #555 !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: .1em !important; margin-top: 4px !important; }

/* =================== HEADER =================== */
.utility{ background: var(--np-purple-dark) !important; color:#fff !important; }
.utility a{ color: #fff !important; }
.header{ background: transparent !important; box-shadow: none !important; position:absolute !important; top: 38px !important; left:0; right:0; z-index: 50 !important; }
.header.scrolled{ background: var(--np-purple) !important; box-shadow: 0 4px 20px rgba(0,0,0,.15) !important; position: fixed !important; top: 0 !important; }
.header .brand{ color:#fff !important; }
.header .brand img{ background:#fff !important; padding: 4px !important; border-radius: 8px !important; }
.header .brand .name, .header .brand .name span{ color:#fff !important; }
.header .brand .name{ font-family: 'Manrope', sans-serif !important; letter-spacing: normal !important; }
.header .nav a{ color:#fff !important; }
.header .nav a:hover{ color: var(--np-yellow) !important; }
.header .submenu{ background: #fff !important; }
.header .submenu a{ color: var(--np-purple) !important; }
.header .btn-primary{ background: var(--np-yellow) !important; color: var(--np-purple-dark) !important; border: 0 !important; border-radius: 999px !important; }

/* =================== TICKER =================== */
.ticker{ background: var(--np-orange) !important; color:#0E1530 !important; }

/* =================== VALUES MARQUEE =================== */
.values-mq{ background: var(--np-yellow) !important; color: var(--np-purple-dark) !important; }
.values-mq .star{ color: var(--np-purple) !important; }

/* Rainbow strip stays */

/* =================== WELCOME =================== */
.welcome{ background: #fff !important; }
.welcome h2{ color: var(--np-purple-dark) !important; font-size: clamp(36px, 4vw, 56px) !important; }
.welcome .accent, .welcome h2 .accent{ color: var(--np-pink) !important; -webkit-text-fill-color: var(--np-pink) !important; background: none !important; }
.welcome .eyebrow{ color: var(--np-pink) !important; font-family: 'Fredoka', sans-serif !important; }
.welcome .btn-navy{ background: var(--np-purple) !important; color:#fff !important; border-radius: 999px !important; }

/* =================== PILLARS — solid color speech-bubble cards =================== */
.pillars{
  background: #fff !important;
  padding: 80px 0 !important;
}
.pillars .head h2{ color: var(--np-purple-dark) !important; font-size: clamp(36px, 4vw, 56px) !important; }
.pillars .head h2 .accent{ color: var(--np-pink) !important; -webkit-text-fill-color: var(--np-pink) !important; background: none !important; }
.pillars .head .eyebrow{ color: var(--np-pink) !important; }
.pillars .pillar-grid{
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 26px !important;
  margin-top: 50px !important;
}
.pillars .pillar{
  background: var(--np-green) !important;
  border-radius: 32px !important;
  padding: 44px !important;
  position: relative !important;
  color: #fff !important;
  overflow: hidden !important;
  min-height: 280px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}
.pillars .pillar:nth-child(2){ background: var(--np-blue) !important; }
.pillars .pillar:nth-child(3){ background: var(--np-orange) !important; }
.pillars .pillar:nth-child(4){ background: var(--np-purple) !important; }
.pillars .pillar:nth-child(1) h3, .pillars .pillar:nth-child(1) p, .pillars .pillar:nth-child(1) .num,
.pillars .pillar:nth-child(3) h3, .pillars .pillar:nth-child(3) p, .pillars .pillar:nth-child(3) .num{ color:#0E1530 !important; }

.pillars .pillar::before{
  content:"" !important;
  position:absolute !important;
  top: 22px !important; right: 22px !important;
  width: 12px !important; height: 12px !important;
  background: rgba(255,255,255,.4) !important;
  border-radius: 50% !important;
}
.pillars .pillar .ring{
  position: absolute !important;
  right: -30px !important; bottom: -20px !important;
  width: 230px !important; height: 230px !important;
  border-radius: 50% !important;
  overflow: hidden !important;
  border: 0 !important;
  background: rgba(255,255,255,.15) !important;
  opacity: .85 !important;
  z-index: 1 !important;
}
.pillars .pillar .ring img{ width: 100% !important; height:100% !important; object-fit: cover !important; mix-blend-mode: luminosity !important; opacity:.6 !important; }
.pillars .pillar .num{
  font-family: 'Fredoka', sans-serif !important;
  color: rgba(255,255,255,.7) !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  letter-spacing: .15em !important;
  margin-bottom: 8px !important;
  position: relative !important; z-index: 2 !important;
}
.pillars .pillar h3{
  font-family: 'Fredoka', sans-serif !important;
  color: #fff !important;
  font-size: 38px !important;
  font-weight: 700 !important;
  line-height: 1.05 !important;
  letter-spacing: -0.02em !important;
  margin: 0 0 14px 0 !important;
  position: relative !important; z-index: 2 !important;
  max-width: 60% !important;
}
.pillars .pillar h3 .it{ font-style: normal !important; }
.pillars .pillar p{
  color: rgba(255,255,255,.92) !important;
  font-size: 15px !important;
  line-height: 1.55 !important;
  position: relative !important; z-index: 2 !important;
  max-width: 60% !important;
  margin-bottom: 20px !important;
}
.pillars .pillar .quote{ display:none !important; }
.pillars .pillar::after{
  content: "Explore Now ▸" !important;
  display: inline-block !important;
  background: rgba(255,255,255,.95) !important;
  color: #0E1530 !important;
  padding: 10px 20px !important;
  border-radius: 999px !important;
  font-family: 'Fredoka', sans-serif !important;
  font-weight: 600 !important;
  font-size: 13px !important;
  width: fit-content !important;
  position: relative !important; z-index: 2 !important;
}
.pillars .pillar:nth-child(2)::after{ color: var(--np-blue) !important; }
.pillars .pillar:nth-child(3)::after{ color: #0E1530 !important; }
.pillars .pillar:nth-child(4)::after{ color: var(--np-purple-dark) !important; }
.pillars .doodle{ color: var(--np-yellow) !important; opacity: .5 !important; }

/* =================== PHASES =================== */
.phases{ background: linear-gradient(180deg, #fff 0%, #FADC6E 100%) !important; }
.phases .head h2{ color: var(--np-purple-dark) !important; }
.phases .head h2 .accent{ color: var(--np-pink) !important; -webkit-text-fill-color: var(--np-pink) !important; background: none !important; }
.phases .phase{
  background: #fff !important;
  border-radius: 22px !important;
  border: 0 !important;
  box-shadow: 0 10px 30px rgba(76, 29, 149, 0.1) !important;
  padding: 30px !important;
  position: relative !important;
}
.phases .phase img.bg{ display:none !important; }
.phases .phase .num{
  background: var(--np-green) !important;
  color: #fff !important;
  border-radius: 999px !important;
  display:inline-block !important;
  padding: 6px 14px !important;
  font-family: 'Fredoka', sans-serif !important;
  font-size: 14px !important;
}
.phases .phase:nth-child(2) .num{ background: var(--np-blue) !important; }
.phases .phase:nth-child(3) .num{ background: var(--np-orange) !important; }
.phases .phase:nth-child(1) .num, .phases .phase:nth-child(3) .num{ color:#0E1530 !important; }
.phases .phase h3{ color: var(--np-purple-dark) !important; font-size: 28px !important; }

/* =================== WHY/STATS =================== */
.why{ background: var(--np-purple) !important; color: #fff !important; }
.why h2{ color: #fff !important; }
.why h2 .accent{ color: var(--np-yellow) !important; -webkit-text-fill-color: var(--np-yellow) !important; }
.why .eyebrow{ color: var(--np-yellow) !important; }
.why .lead{ color: rgba(255,255,255,.9) !important; }
.why .stat{ background: rgba(255,255,255,.1) !important; border-radius: 22px !important; border: 0 !important; backdrop-filter: blur(8px) !important; }
.why .stat .num{ color: var(--np-yellow) !important; }
.why .btn-gold{ background: var(--np-yellow) !important; color: var(--np-purple-dark) !important; border-radius: 999px !important; }

/* =================== EDGE =================== */
.edge{ background: #fff !important; }
.edge .head h2{ color: var(--np-purple-dark) !important; }
.edge .edge-col{ border-radius: 22px !important; padding: 24px !important; background: #0097B2 !important; border: 0 !important; }
.edge .edge-col:nth-child(1){ background: #7ED957 !important; }
.edge .edge-col:nth-child(2){ background: #FADC6E !important; }
.edge .edge-col:nth-child(3){ background: #D962A2 !important; }
.edge .edge-col:nth-child(4){ background: #0097B2 !important; }
.edge .edge-col h3{ color: var(--np-purple-dark) !important; }
.edge .edge-col .num{ color: var(--np-purple) !important; -webkit-text-fill-color: var(--np-purple) !important; background: none !important; }
.edge .edge-col:nth-child(4) h3{ color: #0E1530 !important; }
.edge .edge-col:nth-child(4) .num{ color: #0E1530 !important; -webkit-text-fill-color: #0E1530 !important; }

/* =================== PROGRAMS =================== */
.programs{ background: #fff !important; }
.programs h2{ color: var(--np-purple-dark) !important; }
.programs h2 .accent{ color: var(--np-pink) !important; -webkit-text-fill-color: var(--np-pink) !important; background: none !important; }
.programs .prog{ border-radius: 22px !important; box-shadow: 0 10px 30px rgba(76,29,149,.08) !important; border: 0 !important; }

/* =================== BEYOND =================== */
.beyond{ background: linear-gradient(180deg, #fff 0%, #7ED957 100%) !important; }
.beyond h2{ color: var(--np-purple-dark) !important; }
.beyond h2 .accent{ color: var(--np-pink) !important; -webkit-text-fill-color: var(--np-pink) !important; }

/* =================== INSPIRE =================== */
.inspire{ background: var(--np-blue) !important; color: #fff !important; }
.inspire h2{ color: #fff !important; }
.inspire h2 .accent{ color: var(--np-yellow) !important; -webkit-text-fill-color: var(--np-yellow) !important; }
.inspire .eyebrow{ color: var(--np-yellow) !important; }
.inspire p{ color: #fff !important; opacity: .92; }
.inspire .head p{ color: #fff !important; }

/* =================== TESTI =================== */
.testi{ background: linear-gradient(180deg, #0097B2 0%, #fff 100%) !important; }
.testi h2{ color: #fff !important; }
.testi h2 .accent{ color: var(--np-orange) !important; -webkit-text-fill-color: var(--np-orange) !important; }
.testi .testi-card{ border-radius: 22px !important; border: 0 !important; box-shadow: 0 10px 30px rgba(76,29,149,.08) !important; }
.testi .testi-card .qmark{ color: var(--np-purple) !important; }
.testi .testi-card:nth-child(2){ background: var(--np-yellow) !important; }
.testi .testi-card:nth-child(3){ background: var(--np-green) !important; color: #0E1530 !important; }
.testi .testi-card:nth-child(3) blockquote, .testi .testi-card:nth-child(3) .nm, .testi .testi-card:nth-child(3) .role{ color: #0E1530 !important; }

/* =================== GALLERY =================== */
.gallery{ background: #fff !important; }
.gallery h2{ color: var(--np-purple-dark) !important; }
.gallery h2 .accent{ color: var(--np-pink) !important; -webkit-text-fill-color: var(--np-pink) !important; }
.gallery .filters button.active{ background: var(--np-purple) !important; color:#fff !important; border-radius: 999px !important; border:0 !important; }
.gallery .filters button{ border-radius: 999px !important; font-family: 'Fredoka', sans-serif !important; }
.gallery .tile{ border-radius: 18px !important; }

/* =================== TOPPERS =================== */
.toppers{ background: linear-gradient(180deg, #fff 0%, #FADC6E 100%) !important; }
.toppers h2{ color: var(--np-purple-dark) !important; }
.toppers h2 .accent{ color: var(--np-pink) !important; -webkit-text-fill-color: var(--np-pink) !important; }
.toppers .topper{ border-radius: 22px !important; border: 0 !important; background: #fff !important; box-shadow: 0 10px 30px rgba(76,29,149,.08) !important; }
.toppers .topper .photo{ background: var(--np-purple) !important; color: #fff !important; }
.toppers .topper:nth-child(2) .photo{ background: var(--np-green) !important; color:#0E1530 !important; }
.toppers .topper:nth-child(3) .photo{ background: var(--np-orange) !important; color:#0E1530 !important; }
.toppers .topper:nth-child(4) .photo{ background: var(--np-blue) !important; }
.toppers .topper:nth-child(5) .photo{ background: var(--np-pink) !important; }
.toppers .topper .pct{ color: var(--np-purple-dark) !important; }

/* =================== PRINCIPAL =================== */
.principal{ background: linear-gradient(180deg, #fff 0%, #0097B2 100%) !important; color: #2a1f3d !important; }
.principal h2{ color: var(--np-purple-dark) !important; }
.principal h2 .accent{ color: var(--np-pink) !important; -webkit-text-fill-color: var(--np-pink) !important; }
.principal blockquote{ color: #2a1f3d !important; opacity: 1 !important; }
.principal .body p{ color: #463a5a !important; opacity: 1 !important; }
.principal .signature .name{ color: var(--np-purple-dark) !important; }
.principal .signature .role{ color: var(--np-pink) !important; }
.principal .quote-mark{ color: var(--np-pink) !important; opacity: .6 !important; }
.principal .signature{ border-top-color: rgba(106, 47, 196, .15) !important; }

/* =================== AFFIL =================== */
.affil{ background: #fff !important; }
.affil .badge-a{ border-radius: 999px !important; border: 2px solid var(--np-purple) !important; padding: 12px 22px !important; }
.affil .badge-a .ic{ background: var(--np-purple) !important; color: #fff !important; }

/* =================== NEWS =================== */
.news{ background: linear-gradient(180deg, #fff 0%, #7ED957 100%) !important; }
.news h2{ color: var(--np-purple-dark) !important; }
.news h2 .accent{ color: var(--np-pink) !important; -webkit-text-fill-color: var(--np-pink) !important; }
.news .news-card{ border-radius: 22px !important; border: 0 !important; box-shadow: 0 10px 30px rgba(76,29,149,.08) !important; }
.news .news-card .date{ background: var(--np-purple) !important; color: #fff !important; border-radius: 14px !important; }
.news .news-card:nth-child(2) .date{ background: var(--np-orange) !important; color:#0E1530 !important; }
.news .news-card:nth-child(3) .date{ background: var(--np-green) !important; color:#0E1530 !important; }

/* =================== ADMIT =================== */
.admit{ background: var(--np-purple) !important; color: #fff !important; }
.admit h2{ color: #fff !important; }
.admit h2 .accent{ color: var(--np-yellow) !important; -webkit-text-fill-color: var(--np-yellow) !important; }
.admit .eyebrow{ color: var(--np-yellow) !important; }
.admit .lead{ color: rgba(255,255,255,.9) !important; }
.admit .step .n{ background: var(--np-yellow) !important; color: var(--np-purple-dark) !important; }
.admit .form-card{ border-radius: 24px !important; }

/* =================== FOOTER =================== */
.footer{ background: var(--np-purple-deep) !important; color: #fff !important; }
.footer .brand-blk img{ background: #fff !important; padding: 4px !important; border-radius: 8px !important; }
.footer .brand-blk .nm{ font-family: 'Nunito', sans-serif !important; }
.footer h4{ color: var(--np-yellow) !important; font-family: 'Fredoka', sans-serif !important; }
.footer a{ color: rgba(255,255,255,.85) !important; }
.footer a:hover{ color: var(--np-yellow) !important; }

/* WhatsApp button raise so it doesn't conflict with sticky bar */
.wa{ bottom: 90px !important; right: 24px !important; }

/* Page bottom padding so content isn't hidden behind sticky bar */
body{ padding-bottom: 70px !important; }

/* MOBILE */
@media (max-width: 880px){
  .hero .content{ grid-template-columns: 1fr !important; padding: 0 24px !important; }
  .hero .content::after{ position: relative !important; width: 100% !important; right: 0 !important; top:0 !important; transform: none !important; margin-top: 30px !important; aspect-ratio: 4/5 !important; }
  .pillars .pillar-grid{ grid-template-columns: 1fr !important; }
  .pillars .pillar h3, .pillars .pillar p{ max-width: 100% !important; }
  .pillars .pillar .ring{ display:none !important; }
  .rail{ display:none !important; }
  .tenyrs{ display:none !important; }
  .sticky-cta{ display:none !important; }
  .rocket{ display:none !important; }
  .header .cta-wrap .btn-primary{ display:none !important; }
  /* Reduce hero top gap + lower WhatsApp now that sticky bar is hidden */
  .hero{ padding: 90px 0 60px !important; }
  .hero .content{ min-height: auto !important; }
  .wa{ bottom: 20px !important; }
  body{ padding-bottom: 0 !important; }

  /* Header padding on mobile */
  .header .container.row{ padding: 12px 20px !important; }

  /* Mobile nav open — white panel needs dark text */
  .nav.open{ padding: 0 20px 16px !important; }
  .nav.open a{ color: var(--np-purple-dark) !important; }
  .nav.open .submenu a{ color: var(--np-purple) !important; }
  .nav.open .has-sub > a{ color: var(--np-purple-dark) !important; }
}


/* phase-fix — content top-aligned, tighter height */
.phases .phase{ justify-content: flex-start !important; min-height: auto !important; padding: 36px !important; }
.phases .phase::after{ display:none !important; }
.phases .phase .num{ display:inline-block !important; margin-bottom: 20px !important; }
.phases .phase h3{ margin: 0 0 6px !important; }
.phases .phase .sub{ color: #6b5e7c !important; margin-bottom: 22px !important; }
.phases .phase ul li{ color: #0097B2 !important; opacity: 1 !important; }
.phases .phase .more{ color: var(--np-purple-dark) !important; border-color: rgba(107, 28, 153, .3) !important; margin-top: 22px !important; align-self: flex-start !important; }