
:root{--wips-navy:#071b3a;--wips-navy-2:#0b2b57;--wips-gold:#d6a323;--wips-gold-2:#f3c84b;--wips-dark:#101827;--wips-muted:#667085;--wips-soft:#f7f4ec;--wips-white:#fff;--wips-green:#145b49}body{font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:#243044;background:#fff}a{text-decoration:none}.topbar{background:var(--wips-navy);color:#fff;font-size:.88rem;padding:.55rem 0}.topbar a{color:#fff}.navbar{background:rgba(255,255,255,.96);backdrop-filter:blur(12px);box-shadow:0 8px 25px rgba(7,27,58,.08)}.navbar-brand{font-weight:800;color:var(--wips-navy)!important;letter-spacing:-.02em}.brand-logo{height:48px;width:48px;object-fit:contain;border-radius:12px;margin-right:10px}.nav-link{font-weight:650;color:var(--wips-navy)!important}.nav-link:hover,.nav-link.active{color:var(--wips-gold)!important}.btn-wips{background:linear-gradient(135deg,var(--wips-gold),var(--wips-gold-2));color:var(--wips-navy)!important;border:0;border-radius:999px;padding:.78rem 1.35rem;font-weight:800;box-shadow:0 15px 30px rgba(214,163,35,.25)}.btn-wips:hover{transform:translateY(-2px);box-shadow:0 18px 36px rgba(214,163,35,.32)}.btn-outline-wips{border:1.5px solid rgba(255,255,255,.75);color:#fff!important;border-radius:999px;padding:.76rem 1.3rem;font-weight:750}.btn-outline-dark-wips{border:1.5px solid var(--wips-navy);color:var(--wips-navy)!important;border-radius:999px;padding:.76rem 1.3rem;font-weight:750}.hero-dynamic{position:relative;min-height:760px;background:radial-gradient(circle at 20% 20%,rgba(214,163,35,.34),transparent 26%),linear-gradient(135deg,rgba(7,27,58,.95),rgba(11,43,87,.90)),url('../img/education/campus-5.webp') center/cover no-repeat;color:#fff;overflow:hidden}.hero-dynamic:after{content:"";position:absolute;inset:auto -10% -20% -10%;height:45%;background:#fff;border-radius:50% 50% 0 0/24% 24% 0 0}.hero-dynamic .container{position:relative;z-index:2;padding-top:115px;padding-bottom:170px}.hero-kicker{display:inline-flex;align-items:center;gap:.5rem;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);padding:.55rem .9rem;border-radius:999px;font-weight:800;color:#fff}.hero-dynamic h1{font-size:clamp(2.6rem,5vw,5.5rem);line-height:.98;font-weight:900;letter-spacing:-.06em;margin-top:1.2rem}.hero-dynamic .lead{font-size:1.2rem;max-width:710px;color:rgba(255,255,255,.84)}.hero-panel{background:rgba(255,255,255,.95);color:var(--wips-navy);border-radius:34px;padding:1.2rem;box-shadow:0 25px 70px rgba(0,0,0,.28);position:relative}.hero-panel img{border-radius:24px;width:100%;height:270px;object-fit:cover}.floating-card{position:absolute;left:-32px;bottom:42px;background:#fff;color:var(--wips-navy);padding:1rem 1.1rem;border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.18);max-width:210px}.floating-card strong{font-size:1.9rem;color:var(--wips-gold)}.section{padding:92px 0}.section-soft{background:var(--wips-soft)}.section-dark{background:linear-gradient(135deg,var(--wips-navy),#051225);color:#fff}.eyebrow{color:var(--wips-gold);text-transform:uppercase;letter-spacing:.16em;font-weight:900;font-size:.78rem}.section-title{max-width:820px;margin:0 auto 3rem;text-align:center}.section-title h2,.split-content h2{font-size:clamp(2rem,3.5vw,3.5rem);line-height:1.05;font-weight:900;color:var(--wips-navy);letter-spacing:-.04em}.section-dark .section-title h2,.section-dark h2{color:#fff}.section-title p{color:var(--wips-muted);font-size:1.08rem}.section-dark .section-title p{color:rgba(255,255,255,.74)}.feature-card{background:#fff;border-radius:28px;padding:2rem;height:100%;box-shadow:0 15px 45px rgba(7,27,58,.08);border:1px solid rgba(7,27,58,.06);transition:.35s}.feature-card:hover{transform:translateY(-9px);box-shadow:0 25px 60px rgba(7,27,58,.14)}.feature-card .icon{height:58px;width:58px;border-radius:20px;display:grid;place-items:center;background:rgba(214,163,35,.14);color:var(--wips-gold);font-size:1.65rem;margin-bottom:1.2rem}.feature-card h4{font-weight:850;color:var(--wips-navy)}.feature-card p{color:var(--wips-muted)}.metric-tile{background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.15);border-radius:24px;padding:1.5rem;text-align:center}.metric-tile span{font-size:2.5rem;font-weight:950;color:var(--wips-gold)}.metric-tile p{margin:0;color:rgba(255,255,255,.82);font-weight:650}.programme-card{border-radius:32px;overflow:hidden;background:#fff;box-shadow:0 18px 50px rgba(7,27,58,.10);height:100%;transition:.35s}.programme-card:hover{transform:translateY(-8px)}.programme-card img{height:220px;width:100%;object-fit:cover}.programme-card .body{padding:1.7rem}.tag{display:inline-block;background:rgba(214,163,35,.14);color:#8a650b;border-radius:999px;padding:.35rem .75rem;font-weight:800;font-size:.76rem;margin-bottom:.9rem}.timeline{position:relative}.timeline:before{content:"";position:absolute;left:22px;top:0;bottom:0;width:3px;background:linear-gradient(var(--wips-gold),var(--wips-navy))}.timeline-item{position:relative;padding-left:70px;margin-bottom:1.6rem}.timeline-dot{position:absolute;left:0;top:0;height:48px;width:48px;border-radius:50%;background:var(--wips-gold);color:var(--wips-navy);display:grid;place-items:center;font-weight:900;box-shadow:0 10px 25px rgba(214,163,35,.3)}.timeline-card{background:#fff;border-radius:24px;padding:1.4rem;box-shadow:0 10px 34px rgba(7,27,58,.08)}.tools-strip{display:flex;flex-wrap:wrap;gap:.75rem}.tool-pill{border:1px solid rgba(7,27,58,.12);background:#fff;border-radius:999px;padding:.6rem .9rem;font-weight:800;color:var(--wips-navy);box-shadow:0 6px 18px rgba(7,27,58,.06)}.cta-banner{background:linear-gradient(135deg,var(--wips-navy),var(--wips-navy-2));border-radius:34px;color:#fff;padding:3rem;position:relative;overflow:hidden}.cta-banner:after{content:"";position:absolute;right:-90px;top:-90px;width:260px;height:260px;border-radius:50%;background:rgba(214,163,35,.23)}.image-stack{position:relative}.image-stack img{border-radius:32px;box-shadow:0 24px 60px rgba(7,27,58,.16)}.image-stack .note{position:absolute;right:-25px;bottom:30px;background:#fff;border-radius:22px;padding:1.1rem;box-shadow:0 20px 45px rgba(7,27,58,.15);max-width:220px}.news-card{background:#fff;border-radius:26px;overflow:hidden;box-shadow:0 13px 38px rgba(7,27,58,.08);height:100%;transition:.35s}.news-card:hover{transform:translateY(-7px)}.news-card img{height:195px;width:100%;object-fit:cover}.news-card .body{padding:1.45rem}.page-hero{background:linear-gradient(135deg,rgba(7,27,58,.95),rgba(7,27,58,.78)),url('../img/education/campus-4.webp') center/cover no-repeat;color:#fff;padding:105px 0 90px}.page-hero h1{font-size:clamp(2.4rem,4vw,4.6rem);font-weight:950;letter-spacing:-.05em}.footer{background:#050f22;color:rgba(255,255,255,.78);padding:70px 0 30px}.footer a{color:rgba(255,255,255,.82)}.footer h5{color:#fff;font-weight:850}.footer-logo{height:54px;width:54px;object-fit:contain;border-radius:14px;background:#fff}.whatsapp-float{position:fixed;right:22px;bottom:22px;z-index:999;background:#25d366;color:#fff;width:58px;height:58px;border-radius:50%;display:grid;place-items:center;font-size:1.8rem;box-shadow:0 18px 40px rgba(0,0,0,.22)}@media(max-width:991px){.hero-dynamic{min-height:auto}.hero-dynamic .container{padding-top:75px;padding-bottom:110px}.floating-card{position:static;margin-top:1rem}.section{padding:68px 0}.cta-banner{padding:2rem}.image-stack .note{position:static;margin-top:1rem}.timeline:before{left:17px}.timeline-item{padding-left:55px}.timeline-dot{height:38px;width:38px}}


/* v0.5 homepage refinement: better hero readability and web-native masterclass presentation */
.hero-dynamic {
  background:
    radial-gradient(circle at 18% 18%, rgba(214, 163, 35, 0.28), transparent 24%),
    linear-gradient(135deg, rgba(7, 27, 58, 0.88), rgba(5, 15, 34, 0.92)),
    url('../img/education/campus-5.webp') center/cover no-repeat;
}

.hero-dynamic h1 {
  color: #ffffff;
  text-shadow: 0 8px 28px rgba(0, 0, 0, 0.45);
  max-width: 790px;
}

.hero-dynamic .lead {
  color: rgba(255, 255, 255, 0.94);
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.25);
}

.hero-panel img {
  height: 310px;
  object-position: center;
}

.hero-panel:before {
  content: "Professional Learning";
  position: absolute;
  right: 24px;
  top: 24px;
  background: rgba(7, 27, 58, 0.88);
  color: #fff;
  border-radius: 999px;
  padding: 0.45rem 0.75rem;
  font-weight: 850;
  font-size: 0.78rem;
  z-index: 2;
}

.masterclass-web-section h2 {
  font-size: clamp(2.2rem, 4vw, 4.1rem);
  font-weight: 950;
  color: var(--wips-navy);
  letter-spacing: -0.055em;
  line-height: 1.02;
}

.masterclass-intro {
  font-size: 1.08rem;
  color: #344054;
  line-height: 1.75;
}

.training-dashboard {
  background: #fff;
  border: 1px solid rgba(7, 27, 58, 0.08);
  border-radius: 34px;
  padding: 2rem;
  box-shadow: 0 25px 70px rgba(7, 27, 58, 0.12);
  position: relative;
  overflow: hidden;
}

.training-dashboard:after {
  content: "";
  position: absolute;
  right: -90px;
  top: -90px;
  width: 240px;
  height: 240px;
  background: rgba(214, 163, 35, 0.14);
  border-radius: 50%;
}

.training-top {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.4rem;
}

.training-label {
  display: inline-block;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--wips-gold);
  font-size: 0.72rem;
  font-weight: 950;
  margin-bottom: 0.35rem;
}

.training-top h3 {
  font-size: 1.65rem;
  font-weight: 900;
  color: var(--wips-navy);
  margin: 0;
}

.seat-card {
  background: linear-gradient(135deg, var(--wips-navy), var(--wips-navy-2));
  color: #fff;
  border-radius: 24px;
  padding: 1rem 1.25rem;
  text-align: center;
  min-width: 115px;
  box-shadow: 0 15px 35px rgba(7, 27, 58, 0.22);
}

.seat-card small {
  display: block;
  color: rgba(255, 255, 255, 0.74);
  font-weight: 700;
}

.seat-card strong {
  font-size: 2.15rem;
  color: var(--wips-gold);
  line-height: 1;
}

.training-mini-card {
  height: 100%;
  background: #f8fafc;
  border: 1px solid rgba(7, 27, 58, 0.08);
  border-radius: 22px;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: 0.3s;
}

.training-mini-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 34px rgba(7, 27, 58, 0.1);
}

.training-mini-card i {
  font-size: 1.45rem;
  color: var(--wips-gold);
}

.training-mini-card b {
  color: var(--wips-navy);
}

.training-mini-card span {
  font-size: 0.9rem;
  color: var(--wips-muted);
}

.learning-path {
  display: grid;
  gap: 0.8rem;
  position: relative;
  z-index: 1;
}

.path-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: #fff;
  border: 1px solid rgba(7, 27, 58, 0.08);
  border-radius: 22px;
  padding: 1rem;
  box-shadow: 0 10px 24px rgba(7, 27, 58, 0.05);
}

.path-item span {
  height: 42px;
  width: 42px;
  min-width: 42px;
  border-radius: 14px;
  background: rgba(214, 163, 35, 0.16);
  color: #9c7417;
  font-weight: 950;
  display: grid;
  place-items: center;
}

.path-item b {
  display: block;
  color: var(--wips-navy);
  font-size: 1rem;
}

.path-item small {
  display: block;
  color: var(--wips-muted);
  line-height: 1.55;
  margin-top: 0.2rem;
}

@media (max-width: 991px) {
  .training-top {
    align-items: flex-start;
    flex-direction: column;
  }

  .seat-card {
    text-align: left;
  }

  .hero-panel img {
    height: 260px;
  }
}
/* Hero image correction */
.wips-hero-visual {
  position: relative;
  padding: 18px 18px 96px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: 34px;
  box-shadow: 0 28px 70px rgba(0, 0, 0, 0.28);
  overflow: visible;
}

.wips-hero-visual img {
  display: block;
  width: 100%;
  height: 360px;
  object-fit: cover;
  object-position: center;
  border-radius: 24px;
}

.wips-hero-visual::before {
  content: "Professional Learning";
  position: absolute;
  right: 34px;
  top: 34px;
  background: rgba(7, 27, 58, 0.92);
  color: #ffffff;
  border-radius: 999px;
  padding: 0.45rem 0.75rem;
  font-weight: 850;
  font-size: 0.78rem;
  z-index: 3;
}

.wips-hero-visual .floating-card {
  position: absolute;
  left: -36px;
  bottom: 72px;
  z-index: 4;
  background: #ffffff;
  border-radius: 22px;
  padding: 1.1rem 1.25rem;
  width: 210px;
  box-shadow: 0 18px 45px rgba(7, 27, 58, 0.18);
}

.wips-hero-visual .floating-card small {
  color: var(--wips-navy);
  font-weight: 700;
}

.wips-hero-visual .floating-card strong {
  color: var(--wips-gold);
  font-size: 2rem;
  line-height: 1.1;
}

.hero-panel-stats {
  position: absolute;
  left: 18px;
  right: 18px;
  bottom: 18px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
  background: rgba(255, 255, 255, 0.98);
  border-radius: 22px;
  padding: 1rem;
  box-shadow: 0 12px 34px rgba(7, 27, 58, 0.1);
}

.hero-panel-stats div {
  text-align: center;
}

.hero-panel-stats b {
  display: block;
  color: var(--wips-navy);
  font-weight: 900;
}

.hero-panel-stats span {
  display: block;
  color: var(--wips-muted);
  font-size: 0.88rem;
}

@media (max-width: 991px) {
  .wips-hero-visual {
    margin-top: 2rem;
  }

  .wips-hero-visual img {
    height: 280px;
  }

  .wips-hero-visual .floating-card {
    left: 18px;
    bottom: 82px;
  }
}

@media (max-width: 575px) {
  .wips-hero-visual {
    padding-bottom: 120px;
  }

  .hero-panel-stats {
    grid-template-columns: 1fr;
    gap: 0.75rem;
  }

  .wips-hero-visual .floating-card {
    position: relative;
    left: auto;
    bottom: auto;
    width: 100%;
    margin-top: -35px;
  }
}
/* Hero CTA visibility fix */
.hero-dynamic .hero-actions,
.hero-dynamic .d-flex.flex-wrap.gap-3 {
  position: relative;
  z-index: 10;
  margin-bottom: 2.5rem;
}

.hero-dynamic .btn,
.hero-dynamic a.btn {
  position: relative;
  z-index: 11;
}

.hero-dynamic {
  padding-bottom: 7.5rem;
}

.hero-dynamic::after,
.hero-dynamic .hero-wave {
  z-index: 1;
}
/* Inner page hero/title readability fix */
.page-title,
.page-hero,
.inner-hero,
.breadcrumbs,
.page-header {
  position: relative;
}

.page-title h1,
.page-title h2,
.page-hero h1,
.page-hero h2,
.inner-hero h1,
.inner-hero h2,
.breadcrumbs h1,
.page-header h1,
.page-header h2 {
  color: #ffffff !important;
  text-shadow: 0 8px 28px rgba(247, 243, 243, 0.55);
}

.page-title p,
.page-hero p,
.inner-hero p,
.breadcrumbs p,
.page-header p {
  color: rgba(255, 255, 255, 0.94) !important;
  text-shadow: 0 3px 14px rgba(0, 0, 0, 0.35);
}

.page-title .eyebrow,
.page-hero .eyebrow,
.inner-hero .eyebrow,
.breadcrumbs .eyebrow,
.page-header .eyebrow,
.page-title .section-label,
.page-hero .section-label,
.inner-hero .section-label {
  color: #f2c94c !important;
  text-shadow: 0 3px 12px rgba(0, 0, 0, 0.35);
}

/* For page headers using dark image backgrounds */
.page-title::before,
.page-hero::before,
.inner-hero::before,
.breadcrumbs::before,
.page-header::before {
  background: linear-gradient(
    135deg,
    rgba(232, 234, 237, 0.86),
    rgba(7, 27, 58, 0.74)
  );
}
/* Header logo RC number */
.wips-logo-block {
  gap: 0.65rem;
  text-decoration: none;
}

.wips-logo-text {
  display: flex;
  flex-direction: column;
  line-height: 1.05;
}

.wips-logo-text span {
  font-weight: 900;
  color: var(--wips-navy);
  font-size: 1.15rem;
  letter-spacing: -0.02em;
}

.wips-logo-text small {
  margin-top: 0.25rem;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--wips-gold);
  letter-spacing: 0.08em;
}

@media (max-width: 575px) {
  .wips-logo-text span {
    font-size: 0.98rem;
  }

  .wips-logo-text small {
    font-size: 0.65rem;
  }
}
