/* ============================================================
   DESIGN TOKENS — derived from the MedPro Ascend logo
   ============================================================ */
:root{
  --indigo-900:#241457;
  --indigo-800:#2E1B72;
  --indigo-700:#3D2B8C;
  --purple-500:#5B3FCB;
  --teal-400:#2EC4C4;
  --teal-600:#1B8F94;
  --gold-500:#F0A93A;
  --gold-600:#D68F1F;
  --ink-900:#16142A;
  --ink-600:#4A4863;
  --paper-0:#FBFAFE;
  --mist-100:#EEF0F9;
  --mist-200:#E2E5F5;
  --line:#DEE1F0;

  --font-display:'Fraunces', serif;
  --font-body:'Inter', sans-serif;
  --font-utility:'Poppins', sans-serif;

  --radius-lg:18px;
  --radius-md:12px;
  --shadow-soft:0 10px 40px -12px rgba(36,20,87,0.18);
  --shadow-strong:0 20px 60px -15px rgba(36,20,87,0.28);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; }
body{
  font-family:var(--font-body);
  color:var(--ink-900);
  background:var(--paper-0);
  margin:0;
}
img{ max-width:100%; display:block; }
a{ text-decoration:none; }
h1,h2,h3,h4{ font-family:var(--font-display); color:var(--indigo-900); margin:0; }
.section-pad{ padding:100px 0; }
.container-xl{ max-width:1280px; margin:0 auto; padding:0 24px; }

.eyebrow{
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--teal-600);
}

/* ============================================================
   TOP UTILITY BAR
   ============================================================ */
.topbar{
  background:var(--indigo-900);
  color:rgba(255,255,255,0.88);
  font-family:var(--font-body);
  font-size:13.5px;
  padding:8px 0;
}
.topbar .container-fluid{
  max-width:1280px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:8px;
  padding:0 24px;
}
.topbar .tb-left{
  display:flex;
  align-items:center;
  gap:26px;
  flex-wrap:wrap;
}
.topbar .tb-item{
  display:flex;
  align-items:center;
  gap:8px;
  white-space:nowrap;
}
.topbar .tb-item i{
  color:var(--gold-500);
  font-size:13px;
}
.topbar a{ color:inherit; }
.topbar a:hover{ color:var(--gold-500); }
.topbar .tb-social{
  display:flex;
  gap:14px;
}
.topbar .tb-social a{
  width:26px; height:26px;
  border:1px solid rgba(255,255,255,0.25);
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:11.5px;
  transition:all .2s ease;
}
.topbar .tb-social a:hover{
  background:var(--gold-500);
  border-color:var(--gold-500);
  color:var(--indigo-900);
}

/* ============================================================
   CUSTOM STICKY HEADER / NAVIGATION  (no bootstrap navbar classes)
   ============================================================ */
.site-header{
  position:sticky;
  top:0;
  z-index:1000;
  background:#ffffff;
  border-bottom:1px solid var(--line);
  transition:box-shadow .25s ease, padding .25s ease;
}
.site-header.is-scrolled{
  box-shadow:var(--shadow-soft);
}
.nav-wrap{
  max-width:1280px;
  margin:0 auto;
  padding:14px 24px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:24px;
}
.brand-logo{ display:flex; align-items:center; }
.brand-logo img{
  height:56px;
  width:auto;
  transition:height .25s ease;
}
.site-header.is-scrolled .brand-logo img{ height:46px; }

.main-menu{
  list-style:none;
  display:flex;
  align-items:center;
  gap:6px;
  margin:0;
  padding:0;
}
.main-menu > li{ position:relative; }
.main-menu > li > a{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-utility);
  font-size:14.5px;
  font-weight:600;
  color:var(--ink-900);
  padding:12px 16px;
  border-radius:8px;
  transition:color .2s ease, background .2s ease;
}
.main-menu > li > a i.caret{
  font-size:10px;
  color:var(--teal-600);
  transition:transform .2s ease;
}
.main-menu > li > a:hover,
.main-menu > li.active > a{
  color:var(--purple-500);
  background:var(--mist-100);
}
.main-menu > li:hover > a i.caret{ transform:rotate(180deg); }

/* dropdown */
.has-dropdown .dropdown-panel{
  position:absolute;
  top:calc(100% + 10px);
  left:0;
  min-width:250px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-strong);
  padding:10px;
  opacity:0;
  visibility:hidden;
  transform:translateY(8px);
  transition:all .22s ease;
  z-index:1100;
}
.has-dropdown:hover .dropdown-panel,
.has-dropdown.open .dropdown-panel{
  opacity:1;
  visibility:visible;
  transform:translateY(0);
}
.dropdown-panel a{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 12px;
  border-radius:8px;
  font-size:14px;
  font-weight:500;
  color:var(--ink-900);
  font-family:var(--font-body);
  transition:background .18s ease, color .18s ease, padding-left .18s ease;
}
.dropdown-panel a i{
  color:var(--teal-600);
  width:18px;
  text-align:center;
}
.dropdown-panel a:hover{
  background:var(--mist-100);
  color:var(--purple-500);
  padding-left:16px;
}
.dropdown-panel a + a{ margin-top:2px; }

.header-actions{ display:flex; align-items:center; gap:18px; }
.btn-quick-contact{
  font-family:var(--font-utility);
  font-weight:600;
  font-size:13.5px;
  letter-spacing:0.02em;
  color:#fff;
  background:linear-gradient(120deg, var(--purple-500), var(--teal-600));
  padding:12px 24px;
  border-radius:50px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  box-shadow:0 10px 24px -8px rgba(91,63,203,0.55);
  transition:transform .2s ease, box-shadow .2s ease;
  white-space:nowrap;
}
.btn-quick-contact:hover{
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 14px 30px -8px rgba(91,63,203,0.65);
}

/* mobile toggle */
.menu-toggle{
  display:none;
  width:44px; height:44px;
  border-radius:10px;
  border:1px solid var(--line);
  background:#fff;
  align-items:center;
  justify-content:center;
  cursor:pointer;
  flex-direction:column;
  gap:5px;
}
.menu-toggle span{
  width:20px; height:2px;
  background:var(--indigo-900);
  border-radius:2px;
  transition:all .25s ease;
}
.menu-toggle.active span:nth-child(1){ transform:translateY(7px) rotate(45deg); }
.menu-toggle.active span:nth-child(2){ opacity:0; }
.menu-toggle.active span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); }

/* ============================================================
   HERO / BANNER
   ============================================================ */
.hero{
  position:relative;
  min-height:88vh;
  display:flex;
  align-items:center;
  background-image:
    linear-gradient(115deg, rgba(22,14,60,0.88) 0%, rgba(36,20,87,0.78) 42%, rgba(27,143,148,0.55) 100%),
    url('https://images.unsplash.com/photo-1576091160550-2173dba999ef?q=80&w=1920&auto=format&fit=crop');
  background-size:cover;
  background-position:center;
  overflow:hidden;
}
.hero-inner{
  position:relative;
  z-index:2;
  max-width:1280px;
  margin:0 auto;
  padding:80px 24px 120px;
  width:100%;
}
.hero-content{ max-width:680px; }
.hero .eyebrow{
  color:var(--gold-500);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.hero .eyebrow::before{
  content:"";
  width:34px; height:1px;
  background:var(--gold-500);
  display:inline-block;
}
.hero h1{
  color:#fff;
  font-weight:600;
  font-size:clamp(34px, 5.4vw, 62px);
  line-height:1.08;
  margin:18px 0 22px;
  letter-spacing:-0.01em;
}
.hero h1 em{
  font-style:italic;
  background:linear-gradient(120deg, var(--gold-500), #ffd68a);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
}
.hero p.lead{
  color:rgba(255,255,255,0.86);
  font-size:17px;
  line-height:1.7;
  max-width:540px;
  margin-bottom:36px;
}
.hero-btns{ display:flex; gap:16px; flex-wrap:wrap; }
.btn-primary-cta, .btn-outline-cta{
  font-family:var(--font-utility);
  font-weight:600;
  font-size:14.5px;
  padding:15px 30px;
  border-radius:50px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:all .25s ease;
}
.btn-primary-cta{
  background:var(--gold-500);
  color:var(--indigo-900);
  box-shadow:0 14px 30px -10px rgba(240,169,58,0.7);
}
.btn-primary-cta:hover{
  background:#ffbf52;
  color:var(--indigo-900);
  transform:translateY(-2px);
}
.btn-outline-cta{
  border:1.5px solid rgba(255,255,255,0.55);
  color:#fff;
  background:transparent;
}
.btn-outline-cta:hover{
  border-color:#fff;
  background:rgba(255,255,255,0.12);
  color:#fff;
  transform:translateY(-2px);
}

/* --- signature element: ascending stars, echoing the logo's star + paper-plane motif --- */
.ascend-trail{ position:absolute; inset:0; z-index:1; pointer-events:none; overflow:hidden; }
.ascend-trail .spark{
  position:absolute; bottom:-40px; color:var(--gold-500); opacity:0; animation:rise linear infinite;
}
.ascend-trail .plane{
  position:absolute; bottom:-60px; right:8%; color:rgba(255,255,255,0.75); font-size:22px;
  animation:planeRise 14s ease-in infinite;
}
@keyframes rise{
  0%{ transform:translateY(0) translateX(0) scale(0.6) rotate(0deg); opacity:0; }
  12%{ opacity:0.9; }
  85%{ opacity:0.5; }
  100%{ transform:translateY(-90vh) translateX(40px) scale(1.1) rotate(45deg); opacity:0; }
}
@keyframes planeRise{
  0%{ transform:translateY(0) translateX(0) rotate(-40deg); opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  100%{ transform:translateY(-70vh) translateX(-60px) rotate(-40deg); opacity:0; }
}

/* ============================================================
   TRUST / RATING STRIP  — raised over the hero's bottom edge
   ============================================================ */
.trust-strip{
  position:relative;
  z-index:3;
  margin-top:-86px;
  padding-bottom:60px;
}
.trust-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:22px;
}
.trust-card{
  background:#fff;
  border-radius:var(--radius-lg);
  box-shadow:var(--shadow-strong);
  padding:26px 22px;
  display:flex;
  align-items:flex-start;
  gap:16px;
  border:1px solid var(--line);
  transition:transform .25s ease, box-shadow .25s ease;
}
.trust-card:hover{ transform:translateY(-4px); box-shadow:0 26px 60px -18px rgba(36,20,87,0.32); }
.trust-card .ic{
  flex:0 0 auto;
  width:46px; height:46px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:18px;
  color:#fff;
  background:linear-gradient(140deg, var(--purple-500), var(--teal-600));
}
.trust-card:nth-child(1) .ic{ background:linear-gradient(140deg, var(--gold-600), var(--gold-500)); }
.trust-card:nth-child(2) .ic{ background:linear-gradient(140deg, var(--purple-500), var(--indigo-700)); }
.trust-card:nth-child(3) .ic{ background:linear-gradient(140deg, var(--teal-600), var(--teal-400)); }
.trust-card:nth-child(4) .ic{ background:linear-gradient(140deg, var(--indigo-700), var(--purple-500)); }
.trust-card .tc-value{
  font-family:var(--font-display);
  font-size:22px;
  font-weight:600;
  color:var(--indigo-900);
  line-height:1.2;
}
.trust-card .tc-label{
  font-family:var(--font-utility);
  font-size:12.5px;
  color:var(--ink-600);
  font-weight:500;
  margin-top:2px;
}
.trust-card .stars{ color:var(--gold-500); font-size:12px; margin-top:4px; letter-spacing:2px; }

/* ============================================================
   ABOUT SECTION
   ============================================================ */
.about-section{ background:var(--paper-0); }
.about-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:64px;
  align-items:center;
}
.about-media{ position:relative; }
.about-media .frame{
  position:relative;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-strong);
}
.about-media img{ width:100%; height:520px; object-fit:cover; }
.about-media .badge-float{
  position:absolute;
  bottom:-26px;
  right:-26px;
  background:#fff;
  border-radius:var(--radius-md);
  box-shadow:var(--shadow-strong);
  padding:18px 22px;
  display:flex;
  align-items:center;
  gap:14px;
  border:1px solid var(--line);
}
.about-media .badge-float .num{
  font-family:var(--font-display);
  font-size:28px;
  font-weight:600;
  color:var(--purple-500);
  line-height:1;
}
.about-media .badge-float .txt{
  font-family:var(--font-utility);
  font-size:11.5px;
  font-weight:600;
  color:var(--ink-600);
  text-transform:uppercase;
  letter-spacing:0.05em;
  max-width:110px;
  line-height:1.35;
}
.about-media::before{
  content:"";
  position:absolute;
  top:-18px; left:-18px;
  width:120px; height:120px;
  border:2px solid var(--teal-400);
  border-radius:var(--radius-lg);
  z-index:-1;
}

.about-content .eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.about-content .eyebrow::before{
  content:""; width:34px; height:1px; background:var(--teal-600); display:inline-block;
}
.about-content h2{
  font-size:clamp(28px, 3.6vw, 42px);
  font-weight:600;
  line-height:1.18;
  margin:16px 0 20px;
}
.about-content h2 em{
  font-style:italic;
  color:var(--purple-500);
}
.about-content p{
  color:var(--ink-600);
  font-size:16px;
  line-height:1.8;
  margin-bottom:16px;
}
.about-points{
  list-style:none;
  padding:0;
  margin:26px 0 32px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 20px;
}
.about-points li{
  display:flex;
  align-items:flex-start;
  gap:10px;
  font-size:14.5px;
  font-weight:500;
  color:var(--ink-900);
}
.about-points li i{
  color:#fff;
  background:var(--teal-600);
  width:20px; height:20px;
  min-width:20px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:10px;
  margin-top:2px;
}
.btn-about{
  font-family:var(--font-utility);
  font-weight:600;
  font-size:14.5px;
  color:#fff;
  background:var(--indigo-900);
  padding:16px 32px;
  border-radius:50px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:all .25s ease;
  box-shadow:0 14px 30px -12px rgba(36,20,87,0.55);
}
.btn-about:hover{
  background:var(--purple-500);
  color:#fff;
  transform:translateY(-2px);
  box-shadow:0 16px 34px -12px rgba(91,63,203,0.55);
}

/* ============================================================
   COUNTER SECTION
   ============================================================ */
.counter-section{
  position:relative;
  background:linear-gradient(120deg, var(--indigo-900) 0%, var(--indigo-700) 55%, var(--teal-600) 130%);
  overflow:hidden;
}
.counter-section::before{
  content:"";
  position:absolute;
  inset:0;
  background-image:radial-gradient(rgba(255,255,255,0.08) 1.5px, transparent 1.5px);
  background-size:26px 26px;
  opacity:0.5;
}
.counter-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:0;
}
.counter-card{
  text-align:center;
  padding:20px 24px;
  border-right:1px solid rgba(255,255,255,0.14);
}
.counter-card:last-child{ border-right:none; }
.counter-card .ic{
  width:54px; height:54px;
  margin:0 auto 18px;
  border-radius:50%;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.22);
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
  color:var(--gold-500);
}
.counter-card .num{
  font-family:var(--font-display);
  font-size:clamp(34px, 4vw, 46px);
  font-weight:600;
  color:#fff;
  line-height:1;
  display:flex;
  align-items:baseline;
  justify-content:center;
  gap:2px;
}
.counter-card .num .suffix{ font-size:0.55em; color:var(--gold-500); font-weight:600; }
.counter-card .label{
  font-family:var(--font-utility);
  font-size:13.5px;
  font-weight:500;
  color:rgba(255,255,255,0.78);
  margin-top:10px;
  letter-spacing:0.02em;
}

/* ============================================================
   COURSES SECTION — premium cards, solid colors only (no gradients)
   ============================================================ */
.courses-section{ background:var(--mist-100); }
.courses-head{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:24px;
  margin-bottom:52px;
  flex-wrap:wrap;
}
.courses-head .eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.courses-head .eyebrow::before{
  content:""; width:34px; height:1px; background:var(--teal-600); display:inline-block;
}
.courses-head h2{
  font-size:clamp(28px, 3.4vw, 40px);
  font-weight:600;
  line-height:1.2;
  margin-top:14px;
  max-width:560px;
}
.courses-head p{
  color:var(--ink-600);
  font-size:15.5px;
  max-width:420px;
  line-height:1.7;
  margin:0;
}

.courses-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:30px;
}

.course-card{
  background:#ffffff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.course-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-strong);
  border-color:var(--teal-400);
}

.course-media{
  position:relative;
  overflow:hidden;
}
.course-media img{
  width:100%;
  height:230px;
  object-fit:cover;
  transition:transform .4s ease;
}
.course-card:hover .course-media img{ transform:scale(1.06); }

.course-tag{
  position:absolute;
  top:16px;
  left:16px;
  background:var(--gold-500);
  color:var(--indigo-900);
  font-family:var(--font-utility);
  font-size:11.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  padding:6px 14px;
  border-radius:50px;
}

.course-price{
  position:absolute;
  bottom:-20px;
  right:20px;
  background:var(--indigo-900);
  color:#fff;
  font-family:var(--font-display);
  font-weight:600;
  font-size:19px;
  padding:12px 20px;
  border-radius:var(--radius-md);
  line-height:1;
  box-shadow:var(--shadow-soft);
}
.course-price .old{
  display:block;
  font-family:var(--font-body);
  font-weight:400;
  font-size:11.5px;
  color:rgba(255,255,255,0.6);
  text-decoration:line-through;
  margin-bottom:3px;
}

.course-body{
  padding:34px 26px 28px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.course-meta{
  display:flex;
  align-items:center;
  gap:18px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  color:var(--teal-600);
  margin-bottom:14px;
}
.course-meta span{ display:flex; align-items:center; gap:6px; }
.course-meta i{ font-size:12px; }

.course-body h3{
  font-size:21px;
  font-weight:600;
  line-height:1.3;
  margin-bottom:10px;
}
.course-body p{
  color:var(--ink-600);
  font-size:14.5px;
  line-height:1.7;
  margin-bottom:22px;
  flex:1;
}

.course-foot{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding-top:20px;
  border-top:1px solid var(--mist-200);
}
.course-rating{
  display:flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  color:var(--ink-900);
}
.course-rating i{ color:var(--gold-500); font-size:11px; }

.btn-view-course{
  font-family:var(--font-utility);
  font-weight:600;
  font-size:13.5px;
  color:#fff;
  background:var(--purple-500);
  padding:11px 22px;
  border-radius:50px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  transition:background .2s ease, transform .2s ease;
}
.btn-view-course:hover{
  background:var(--indigo-900);
  color:#fff;
  transform:translateX(2px);
}
.btn-view-course i{ font-size:12px; }

/* ============================================================
   WHY CHOOSE US SECTION — premium split layout, solid colors only
   ============================================================ */
.why-section{ background:var(--paper-0); }
.why-grid{
  display:grid;
  grid-template-columns:0.82fr 1.18fr;
  gap:0;
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-strong);
}

.why-intro{
  background:var(--indigo-900);
  color:#fff;
  padding:56px 46px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  position:relative;
}
.why-intro .ic-mark{
  width:58px; height:58px;
  border-radius:14px;
  background:var(--gold-500);
  color:var(--indigo-900);
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
  margin-bottom:26px;
}
.why-intro .eyebrow{ color:var(--teal-400); }
.why-intro .eyebrow::before{
  content:""; width:34px; height:1px; background:var(--teal-400); display:inline-block; margin-right:10px;
}
.why-intro h2{
  color:#fff;
  font-size:clamp(28px, 3.2vw, 38px);
  font-weight:600;
  line-height:1.22;
  margin:16px 0 20px;
}
.why-intro h2 em{ font-style:italic; color:var(--gold-500); }
.why-intro p{
  color:rgba(255,255,255,0.72);
  font-size:15px;
  line-height:1.8;
  margin:0;
}
.why-intro .why-stat{
  display:flex;
  align-items:center;
  gap:14px;
  margin-top:36px;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,0.16);
}
.why-intro .why-stat .n{
  font-family:var(--font-display);
  font-size:34px;
  font-weight:600;
  color:var(--gold-500);
  line-height:1;
}
.why-intro .why-stat .t{
  font-family:var(--font-utility);
  font-size:12px;
  font-weight:500;
  color:rgba(255,255,255,0.72);
  max-width:150px;
  line-height:1.4;
}

.why-list{
  background:#fff;
  padding:28px 10px;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
}
.why-item{
  display:flex;
  align-items:flex-start;
  gap:16px;
  padding:26px 30px;
  border-bottom:1px solid var(--mist-200);
  transition:background .2s ease;
}
.why-item:hover{ background:var(--mist-100); }
/* remove border on last row items */
.why-item:nth-last-child(-n+2){ border-bottom:none; }
/* vertical divider between the two columns */
.why-item:nth-child(odd){ border-right:1px solid var(--mist-200); }

.why-item .ic{
  flex:0 0 auto;
  width:44px; height:44px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  font-size:17px;
  color:#fff;
}
.why-item:nth-child(8n+1) .ic{ background:var(--teal-600); }
.why-item:nth-child(8n+2) .ic{ background:var(--purple-500); }
.why-item:nth-child(8n+3) .ic{ background:var(--gold-600); }
.why-item:nth-child(8n+4) .ic{ background:var(--indigo-700); }
.why-item:nth-child(8n+5) .ic{ background:var(--indigo-700); }
.why-item:nth-child(8n+6) .ic{ background:var(--gold-600); }
.why-item:nth-child(8n+7) .ic{ background:var(--purple-500); }
.why-item:nth-child(8n+8) .ic{ background:var(--teal-600); }

.why-item h4{
  font-family:var(--font-utility);
  font-size:15.5px;
  font-weight:600;
  color:var(--indigo-900);
  margin:0 0 6px;
}
.why-item p{
  font-family:var(--font-body);
  font-size:13.5px;
  line-height:1.65;
  color:var(--ink-600);
  margin:0;
}

/* ============================================================
   LEARNING PROCESS SECTION — premium alternating timeline
   Solid colors only · image nodes instead of icon fonts · no buttons
   ============================================================ */
.process-section{ background:var(--mist-100); overflow:hidden; }
.process-head{
  text-align:center;
  max-width:620px;
  margin:0 auto 70px;
}
.process-head .eyebrow{ display:inline-flex; align-items:center; gap:10px; justify-content:center; }
.process-head .eyebrow::before, .process-head .eyebrow::after{
  content:""; width:34px; height:1px; background:var(--teal-600); display:inline-block;
}
.process-head h2{
  font-size:clamp(28px, 3.4vw, 40px);
  font-weight:600;
  line-height:1.2;
  margin:16px 0 14px;
}
.process-head h2 em{ font-style:italic; color:var(--purple-500); }
.process-head p{
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.7;
  margin:0;
}

.timeline{ position:relative; max-width:980px; margin:0 auto; }
.timeline::before{
  content:"";
  position:absolute;
  left:50%;
  top:6px;
  bottom:6px;
  width:2px;
  background:var(--teal-600);
  transform:translateX(-50%);
}

.tl-item{
  position:relative;
  display:grid;
  grid-template-columns:1fr 128px 1fr;
  align-items:center;
  gap:0 36px;
  padding:34px 0;
}

.tl-side{ min-width:0; }
.tl-side.tl-left{ grid-column:1; text-align:right; }
.tl-side.tl-right{ grid-column:3; text-align:left; }
.tl-side:empty{ display:none; }

.tl-step-label{
  font-family:var(--font-utility);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--teal-600);
  display:block;
  margin-bottom:8px;
}
.tl-side h3{
  font-size:20px;
  font-weight:600;
  margin-bottom:8px;
}
.tl-side p{
  color:var(--ink-600);
  font-size:14.5px;
  line-height:1.7;
  margin:0;
}

.tl-node{
  grid-column:2;
  display:flex;
  justify-content:center;
  position:relative;
  z-index:2;
}
.tl-node-circle{
  width:112px;
  height:112px;
  border-radius:50%;
  background:#fff;
  border:3px solid var(--mist-200);
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:var(--shadow-soft);
  position:relative;
}
.tl-node-circle img{
  width:100%;
  height:100%;
  border-radius:50%;
  object-fit:cover;
}
.tl-node-badge{
  position:absolute;
  top:-8px;
  right:-8px;
  width:32px; height:32px;
  border-radius:50%;
  background:var(--gold-500);
  color:var(--indigo-900);
  font-family:var(--font-display);
  font-weight:700;
  font-size:13px;
  display:flex; align-items:center; justify-content:center;
  border:3px solid var(--mist-100);
}

/* per-step accent border color, cycling through solid brand colors */
.tl-item:nth-child(6n+1) .tl-node-circle{ border-color:var(--indigo-700); }
.tl-item:nth-child(6n+2) .tl-node-circle{ border-color:var(--teal-600); }
.tl-item:nth-child(6n+3) .tl-node-circle{ border-color:var(--purple-500); }
.tl-item:nth-child(6n+4) .tl-node-circle{ border-color:var(--gold-600); }
.tl-item:nth-child(6n+5) .tl-node-circle{ border-color:var(--indigo-700); }
.tl-item:nth-child(6n+6) .tl-node-circle{ border-color:var(--teal-600); }

/* ============================================================
   LEARNING PROCESS SECTION — premium vertical timeline
   solid colors only, PNG image nodes instead of icon fonts
   ============================================================ */
.process-section{ background:var(--mist-100); }
.process-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 64px;
}
.process-head .eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.process-head .eyebrow::before,
.process-head .eyebrow::after{
  content:""; width:34px; height:1px; background:var(--teal-600); display:inline-block;
}
.process-head h2{
  font-size:clamp(28px, 3.4vw, 40px);
  font-weight:600;
  line-height:1.2;
  margin:16px 0 14px;
}
.process-head h2 em{ font-style:italic; color:var(--purple-500); }
.process-head p{
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.75;
  margin:0;
}

.timeline{
  position:relative;
  max-width:980px;
  margin:0 auto;
}
.timeline-spine{
  position:absolute;
  top:0; bottom:0;
  left:50%;
  width:2px;
  background:var(--line);
  transform:translateX(-50%);
}

.timeline-item{
  position:relative;
  display:flex;
  align-items:center;
  gap:36px;
  margin-bottom:54px;
}
.timeline-item:last-child{ margin-bottom:0; }
.timeline-item.right{ flex-direction:row-reverse; }

.timeline-card{
  flex:1;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:26px 28px;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.timeline-item:hover .timeline-card{
  border-color:var(--teal-400);
  box-shadow:var(--shadow-soft);
}
.timeline-item.left .timeline-card{ text-align:right; }
.timeline-item.right .timeline-card{ text-align:left; }

.timeline-card .step-no{
  font-family:var(--font-utility);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.1em;
  color:var(--teal-600);
}
.timeline-card h3{
  font-size:19.5px;
  font-weight:600;
  margin:8px 0 8px;
}
.timeline-card p{
  color:var(--ink-600);
  font-size:14px;
  line-height:1.7;
  margin:0;
}

.timeline-node{
  position:relative;
  flex:0 0 auto;
  width:88px; height:88px;
  border-radius:50%;
  background:#fff;
  border:4px solid var(--paper-0);
  box-shadow:0 0 0 2px var(--line);
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  z-index:2;
}
.timeline-node img{
  width:100%;
  height:100%;
  object-fit:cover;
}

.timeline-item:nth-child(6n+1) .timeline-node{ box-shadow:0 0 0 2px var(--teal-600); }
.timeline-item:nth-child(6n+2) .timeline-node{ box-shadow:0 0 0 2px var(--purple-500); }
.timeline-item:nth-child(6n+3) .timeline-node{ box-shadow:0 0 0 2px var(--gold-600); }
.timeline-item:nth-child(6n+4) .timeline-node{ box-shadow:0 0 0 2px var(--indigo-700); }
.timeline-item:nth-child(6n+5) .timeline-node{ box-shadow:0 0 0 2px var(--teal-600); }
.timeline-item:nth-child(6n+6) .timeline-node{ box-shadow:0 0 0 2px var(--purple-500); }

.timeline-spacer{ flex:1; }

/* ============================================================
   CALL TO ACTION SECTION — solid color, no card grid
   ============================================================ */
.cta-section{
  background:var(--indigo-900);
  padding:80px 0;
  position:relative;
  border-top:4px solid var(--gold-500);
}
.cta-inner{
  text-align:center;
  max-width:680px;
  margin:0 auto;
}
.cta-inner .eyebrow{
  color:var(--teal-400);
  display:inline-flex;
  align-items:center;
  gap:10px;
}
.cta-inner .eyebrow::before,
.cta-inner .eyebrow::after{
  content:""; width:34px; height:1px; background:var(--teal-400); display:inline-block;
}
.cta-inner h2{
  color:#fff;
  font-size:clamp(28px, 3.8vw, 42px);
  font-weight:600;
  line-height:1.2;
  margin:18px 0 18px;
}
.cta-inner h2 em{ font-style:italic; color:var(--gold-500); }
.cta-inner p{
  color:rgba(255,255,255,0.75);
  font-size:16px;
  line-height:1.75;
  margin:0 0 36px;
}
.cta-btns{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:18px;
  flex-wrap:wrap;
}
.btn-cta-primary, .btn-cta-secondary{
  font-family:var(--font-utility);
  font-weight:600;
  font-size:14.5px;
  padding:16px 34px;
  border-radius:50px;
  display:inline-flex;
  align-items:center;
  gap:10px;
  transition:all .25s ease;
}
.btn-cta-primary{
  background:var(--gold-500);
  color:var(--indigo-900);
}
.btn-cta-primary:hover{
  background:#ffbf52;
  color:var(--indigo-900);
  transform:translateY(-2px);
}
.btn-cta-secondary{
  background:transparent;
  border:1.5px solid rgba(255,255,255,0.4);
  color:#fff;
}
.btn-cta-secondary:hover{
  border-color:#fff;
  background:rgba(255,255,255,0.08);
  color:#fff;
  transform:translateY(-2px);
}

/* ============================================================
   STUDENT SUCCESS STORIES — premium testimonial owl slider
   ============================================================ */
.testimonial-section{ background:var(--paper-0); overflow:hidden; }
.testimonial-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 56px;
}
.testimonial-head .eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.testimonial-head .eyebrow::before,
.testimonial-head .eyebrow::after{
  content:""; width:34px; height:1px; background:var(--teal-600); display:inline-block;
}
.testimonial-head h2{
  font-size:clamp(28px, 3.4vw, 40px);
  font-weight:600;
  line-height:1.2;
  margin:16px 0 14px;
}
.testimonial-head h2 em{ font-style:italic; color:var(--purple-500); }
.testimonial-head p{
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.75;
  margin:0;
}

.testimonial-slider{ padding-bottom:14px; }
.testimonial-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:34px 30px;
  margin:6px 12px 26px;
  height:100%;
  display:flex;
  flex-direction:column;
  transition:border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.testimonial-card:hover{
  border-color:var(--teal-400);
  box-shadow:var(--shadow-strong);
  transform:translateY(-4px);
}
.testimonial-card .quote-mark{
  width:42px; height:42px;
  border-radius:10px;
  background:var(--mist-100);
  color:var(--purple-500);
  display:flex; align-items:center; justify-content:center;
  font-size:17px;
  margin-bottom:20px;
}
.testimonial-card .stars{
  color:var(--gold-500);
  font-size:12.5px;
  letter-spacing:3px;
  margin-bottom:14px;
}
.testimonial-card .quote-text{
  color:var(--ink-600);
  font-size:14.5px;
  line-height:1.8;
  flex:1;
  margin-bottom:24px;
}
.testimonial-card .student{
  display:flex;
  align-items:center;
  gap:14px;
  padding-top:20px;
  border-top:1px solid var(--mist-200);
}
.testimonial-card .student img{
  width:52px; height:52px;
  border-radius:50%;
  object-fit:cover;
  border:2px solid var(--mist-200);
}
.testimonial-card .student .name{
  font-family:var(--font-utility);
  font-size:14.5px;
  font-weight:600;
  color:var(--indigo-900);
}
.testimonial-card .student .role{
  font-size:12.5px;
  color:var(--teal-600);
  font-weight:500;
  margin-top:2px;
}

/* Owl Carousel overrides — custom, premium, solid colors only */
.testimonial-slider .owl-stage-outer{ padding:6px 0 10px; }
.testimonial-slider .owl-stage{ display:flex; }
.testimonial-slider .owl-item{ display:flex; height:auto; }
.testimonial-slider .owl-item .testimonial-card{ width:100%; }
.testimonial-slider .owl-nav{
  position:absolute;
  top:-96px;
  right:24px;
  display:flex;
  gap:10px;
}
.testimonial-slider .owl-nav button.owl-prev,
.testimonial-slider .owl-nav button.owl-next{
  width:44px; height:44px;
  border-radius:50%;
  background:#fff !important;
  border:1px solid var(--line) !important;
  color:var(--indigo-900) !important;
  font-size:16px !important;
  display:flex; align-items:center; justify-content:center;
  transition:background .2s ease, color .2s ease, border-color .2s ease;
}
.testimonial-slider .owl-nav button.owl-prev:hover,
.testimonial-slider .owl-nav button.owl-next:hover{
  background:var(--indigo-900) !important;
  border-color:var(--indigo-900) !important;
  color:#fff !important;
}
.testimonial-slider .owl-dots{
  display:flex;
  justify-content:center;
  gap:10px;
  margin-top:8px;
}
.testimonial-slider .owl-dots .owl-dot span{
  width:9px; height:9px;
  margin:0;
  border-radius:50%;
  background:var(--mist-200);
  display:block;
  transition:background .2s ease, transform .2s ease;
}
.testimonial-slider .owl-dots .owl-dot.active span{
  background:var(--purple-500);
  transform:scale(1.3);
}

/* ============================================================
   CAMPUS GALLERY — premium bento grid, fancybox lightbox
   ============================================================ */
.gallery-section{ background:var(--mist-100); }
.gallery-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 56px;
}
.gallery-head .eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.gallery-head .eyebrow::before,
.gallery-head .eyebrow::after{
  content:""; width:34px; height:1px; background:var(--teal-600); display:inline-block;
}
.gallery-head h2{
  font-size:clamp(28px, 3.4vw, 40px);
  font-weight:600;
  line-height:1.2;
  margin:16px 0 14px;
}
.gallery-head h2 em{ font-style:italic; color:var(--purple-500); }
.gallery-head p{
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.75;
  margin:0;
}

.gallery-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  grid-auto-rows:190px;
  gap:16px;
}
.gallery-item{
  position:relative;
  display:block;
  border-radius:var(--radius-md);
  overflow:hidden;
  background:#fff;
}
.gallery-item.big{ grid-column:1 / span 2; grid-row:1 / span 2; }
.gallery-item.tall{ grid-row:1 / span 2; }

.gallery-item img{
  width:100%;
  height:100%;
  object-fit:cover;
  transition:transform .5s ease;
  display:block;
}
.gallery-item .gallery-veil{
  position:absolute;
  inset:0;
  background:rgba(22,14,60,0.55);
  opacity:0;
  transition:opacity .3s ease;
  display:flex;
  align-items:center;
  justify-content:center;
}
.gallery-item .gallery-veil .expand-ic{
  width:56px; height:56px;
  border-radius:50%;
  background:var(--gold-500);
  color:var(--indigo-900);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:19px;
  transform:scale(0.7);
  transition:transform .3s ease;
}
.gallery-item:hover img{ transform:scale(1.08); }
.gallery-item:hover .gallery-veil{ opacity:1; }
.gallery-item:hover .gallery-veil .expand-ic{ transform:scale(1); }

/* ============================================================
   CERTIFICATIONS & PLACEMENT — content-led, ticket-style deliverables
   ============================================================ */
.cert-section{ background:var(--paper-0); }
.cert-head{
  text-align:center;
  max-width:760px;
  margin:0 auto 44px;
}
.cert-head .eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.cert-head .eyebrow::before,
.cert-head .eyebrow::after{
  content:""; width:34px; height:1px; background:var(--teal-600); display:inline-block;
}
.cert-head h2{
  font-size:clamp(28px, 3.6vw, 42px);
  font-weight:600;
  line-height:1.2;
  margin:16px 0 26px;
}
.cert-head h2 em{ font-style:italic; color:var(--purple-500); }

.cert-motto{
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(19px, 2.2vw, 25px);
  color:var(--indigo-900);
  line-height:1.55;
  max-width:640px;
  margin:0 auto 26px;
  position:relative;
  padding:0 10px;
}
.cert-motto i{ color:var(--gold-500); font-size:16px; margin:0 8px; }

.cert-head p.desc{
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.8;
  max-width:680px;
  margin:0 auto;
}

.cert-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:26px;
  margin-top:54px;
}
.cert-ticket{
  position:relative;
  background:#fff;
  border:1px solid var(--line);
  border-top:4px solid var(--teal-600);
  border-radius:var(--radius-md);
  padding:30px 24px 28px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.cert-ticket:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow-strong);
}
.cert-ticket:nth-child(2){ border-top-color:var(--purple-500); }
.cert-ticket:nth-child(3){ border-top-color:var(--gold-600); }
.cert-ticket:nth-child(4){ border-top-color:var(--indigo-700); }

.cert-ticket .ic{
  width:52px; height:52px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-size:20px;
  margin-bottom:18px;
}
.cert-ticket:nth-child(1) .ic{ background:var(--teal-600); }
.cert-ticket:nth-child(2) .ic{ background:var(--purple-500); }
.cert-ticket:nth-child(3) .ic{ background:var(--gold-600); }
.cert-ticket:nth-child(4) .ic{ background:var(--indigo-700); }

.cert-ticket h3{
  font-size:18px;
  font-weight:600;
  margin:0 0 10px;
}
.cert-ticket p{
  color:var(--ink-600);
  font-size:14px;
  line-height:1.7;
  margin:0;
}

/* ============================================================
   TRAINERS SECTION — premium showcase, solid colors only
   ============================================================ */
.trainers-section{ background:var(--mist-100); }
.trainers-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 56px;
}
.trainers-head .eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.trainers-head .eyebrow::before,
.trainers-head .eyebrow::after{
  content:""; width:34px; height:1px; background:var(--teal-600); display:inline-block;
}
.trainers-head h2{
  font-size:clamp(28px, 3.4vw, 40px);
  font-weight:600;
  line-height:1.2;
  margin:16px 0 14px;
}
.trainers-head h2 em{ font-style:italic; color:var(--purple-500); }
.trainers-head p{
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.75;
  margin:0;
}

.trainers-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:30px;
}
.trainer-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform .25s ease, box-shadow .25s ease;
}
.trainer-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-strong);
}
.trainer-photo{
  position:relative;
  height:340px;
  overflow:hidden;
}
.trainer-photo img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
  transition:transform .4s ease;
}
.trainer-card:hover .trainer-photo img{ transform:scale(1.05); }

.trainer-card:nth-child(1) .trainer-photo{ border-bottom:4px solid var(--teal-600); }
.trainer-card:nth-child(2) .trainer-photo{ border-bottom:4px solid var(--purple-500); }
.trainer-card:nth-child(3) .trainer-photo{ border-bottom:4px solid var(--gold-600); }

.trainer-body{ padding:26px 24px 28px; text-align:center; }
.trainer-body h3{
  font-size:20px;
  font-weight:600;
  margin:0 0 8px;
}
.trainer-exp{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  color:var(--teal-600);
  margin-bottom:14px;
}
.trainer-exp i{ font-size:11px; }

.trainer-spec{
  display:inline-block;
  font-family:var(--font-utility);
  font-size:12px;
  font-weight:600;
  color:#fff;
  background:var(--indigo-900);
  padding:8px 18px;
  border-radius:50px;
  letter-spacing:0.02em;
}
.trainer-card:nth-child(2) .trainer-spec{ background:var(--purple-500); }
.trainer-card:nth-child(3) .trainer-spec{ background:var(--gold-600); }

/* ============================================================
   BLOG SECTION — solid colors only, no icons
   ============================================================ */
.blog-section{ background:var(--paper-0); }
.blog-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 56px;
}
.blog-head .eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.blog-head .eyebrow::before,
.blog-head .eyebrow::after{
  content:""; width:34px; height:1px; background:var(--teal-600); display:inline-block;
}
.blog-head h2{
  font-size:clamp(28px, 3.4vw, 40px);
  font-weight:600;
  line-height:1.2;
  margin:16px 0 14px;
}
.blog-head h2 em{ font-style:italic; color:var(--purple-500); }
.blog-head p{
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.75;
  margin:0;
}

.blog-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:30px;
}
.blog-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  display:flex;
  flex-direction:column;
  transition:transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.blog-card:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow-strong);
  border-color:var(--teal-400);
}
.blog-media{ overflow:hidden; }
.blog-media img{
  width:100%;
  height:210px;
  object-fit:cover;
  transition:transform .4s ease;
  display:block;
}
.blog-card:hover .blog-media img{ transform:scale(1.06); }

.blog-body{
  padding:26px 24px 24px;
  display:flex;
  flex-direction:column;
  flex:1;
}
.blog-tag{
  display:inline-block;
  align-self:flex-start;
  font-family:var(--font-utility);
  font-size:11px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.06em;
  color:#fff;
  background:var(--teal-600);
  padding:6px 14px;
  border-radius:50px;
  margin-bottom:16px;
}
.blog-card:nth-child(2) .blog-tag{ background:var(--purple-500); }
.blog-card:nth-child(3) .blog-tag{ background:var(--gold-600); }

.blog-body h3{
  font-size:19px;
  font-weight:600;
  line-height:1.35;
  margin:0 0 10px;
}
.blog-body p{
  color:var(--ink-600);
  font-size:14px;
  line-height:1.7;
  margin-bottom:20px;
  flex:1;
}
.blog-meta{
  font-family:var(--font-utility);
  font-size:12px;
  color:var(--ink-faint, #8987a0);
  margin-bottom:16px;
}
.blog-meta .dot{ margin:0 6px; }

.blog-readmore{
  font-family:var(--font-utility);
  font-weight:600;
  font-size:13.5px;
  color:var(--purple-500);
  padding-top:16px;
  border-top:1px solid var(--mist-200);
  display:inline-block;
  transition:color .2s ease, padding-left .2s ease;
}
.blog-readmore:hover{
  color:var(--indigo-900);
  padding-left:4px;
}

/* ============================================================
   PLACEMENT ASSISTANCE — partner logo owl carousel
   grayscale by default, full color on hover
   ============================================================ */
.partners-section{ background:var(--mist-100); overflow:hidden; }
.partners-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 50px;
}
.partners-head .eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.partners-head .eyebrow::before,
.partners-head .eyebrow::after{
  content:""; width:34px; height:1px; background:var(--teal-600); display:inline-block;
}
.partners-head h2{
  font-size:clamp(26px, 3.2vw, 36px);
  font-weight:600;
  line-height:1.25;
  margin:16px 0 14px;
}
.partners-head h2 em{ font-style:italic; color:var(--purple-500); }
.partners-head p{
  color:var(--ink-600);
  font-size:15px;
  line-height:1.7;
  margin:0;
}

.logos-slider .owl-stage{ display:flex; align-items:stretch; }
.logos-slider .owl-item{ display:flex; }

.logo-item{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  width:100%;
  min-height:120px;
  display:flex;
  align-items:center;
  justify-content:center;
  padding:22px 26px;
  transition:border-color .25s ease, box-shadow .25s ease;
}
.logo-item:hover{
  border-color:var(--teal-400);
  box-shadow:var(--shadow-soft);
}
.logo-item img{
  max-width:100%;
  max-height:56px;
  width:auto;
  filter:grayscale(100%);
  opacity:0.68;
  transition:filter .3s ease, opacity .3s ease, transform .3s ease;
}
.logo-item:hover img{
  filter:grayscale(0%);
  opacity:1;
  transform:scale(1.06);
}

/* ============================================================
   FAQ + CONTACT — compact premium side-by-side section
   solid colors only; FAQ toggle drawn in pure CSS (no icon font)
   ============================================================ */
.fc-section{ background:var(--paper-0); }
.fc-head{
  text-align:center;
  max-width:640px;
  margin:0 auto 46px;
}
.fc-head .eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.fc-head .eyebrow::before,
.fc-head .eyebrow::after{
  content:""; width:34px; height:1px; background:var(--teal-600); display:inline-block;
}
.fc-head h2{
  font-size:clamp(26px, 3.2vw, 36px);
  font-weight:600;
  line-height:1.25;
  margin:16px 0 14px;
}
.fc-head h2 em{ font-style:italic; color:var(--purple-500); }
.fc-head p{
  color:var(--ink-600);
  font-size:15px;
  line-height:1.7;
  margin:0;
}

.fc-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:40px;
  align-items:start;
}

/* ---------- FAQ column ---------- */
.faq-col h3, .contact-col h3{
  font-size:19px;
  font-weight:600;
  margin:0 0 20px;
  color:var(--indigo-900);
}
.faq-list{
  border-top:1px solid var(--line);
}
.faq-item{
  border-bottom:1px solid var(--line);
}
.faq-question{
  width:100%;
  background:none;
  border:none;
  padding:18px 4px;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:16px;
  cursor:pointer;
  text-align:left;
  font-family:var(--font-utility);
  font-size:14.5px;
  font-weight:600;
  color:var(--indigo-900);
  transition:color .2s ease;
}
.faq-item.active .faq-question{ color:var(--purple-500); }

.faq-toggle{
  position:relative;
  flex:0 0 auto;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--indigo-900);
}
.faq-item.active .faq-toggle{ background:var(--purple-500); }
.faq-toggle::before,
.faq-toggle::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  background:#fff;
  transform:translate(-50%,-50%);
  transition:transform .25s ease, opacity .25s ease;
}
.faq-toggle::before{ width:10px; height:2px; }
.faq-toggle::after{ width:2px; height:10px; }
.faq-item.active .faq-toggle::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }

.faq-answer{
  display:none;
  padding:0 30px 20px 4px;
}
.faq-answer p{
  color:var(--ink-600);
  font-size:14px;
  line-height:1.75;
  margin:0;
}

/* ---------- Contact form column ---------- */
.contact-col{
  background:var(--mist-100);
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:32px 30px;
}
.contact-form .form-row{ margin-bottom:16px; }
.form-field{
  position:relative;
}
.form-field .f-ic{
  position:absolute;
  left:16px;
  top:16px;
  color:var(--teal-600);
  font-size:14px;
}
.form-field input,
.form-field textarea{
  width:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px 14px 44px;
  font-family:var(--font-body);
  font-size:14px;
  color:var(--ink-900);
  outline:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.form-field textarea{
  padding-top:14px;
  resize:vertical;
  min-height:110px;
}
.form-field input::placeholder,
.form-field textarea::placeholder{ color:var(--ink-faint, #9997ab); }
.form-field input:focus,
.form-field textarea:focus{
  border-color:var(--teal-600);
  box-shadow:0 0 0 3px rgba(27,143,148,0.12);
}

.btn-send{
  width:100%;
  background:var(--indigo-900);
  color:#fff;
  border:none;
  font-family:var(--font-utility);
  font-weight:600;
  font-size:14.5px;
  padding:15px 20px;
  border-radius:10px;
  cursor:pointer;
  transition:background .2s ease, transform .2s ease;
}
.btn-send:hover{ background:var(--purple-500); transform:translateY(-1px); }

/* ============================================================
   FOOTER — background image with a solid overlay tint (no gradient)
   ============================================================ */
.site-footer{
  position:relative;
  background-image:url('https://images.unsplash.com/photo-1576091160399-112ba8d25d1d?q=80&w=1920&auto=format&fit=crop');
  background-size:cover;
  background-position:center;
  color:#fff;
}
.site-footer::before{
  content:"";
  position:absolute;
  inset:0;
  background:rgba(22,14,60,0.93); /* solid tint, not a gradient */
}
.footer-top{
  position:relative;
  z-index:2;
  padding:76px 0 46px;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.3fr 0.8fr 0.9fr 1fr;
  gap:44px;
}

.footer-brand img{ height:50px; margin-bottom:20px; }
.footer-about p{
  color:rgba(255,255,255,0.7);
  font-size:14px;
  line-height:1.8;
  margin:0 0 24px;
  max-width:320px;
}
.footer-social{ display:flex; gap:12px; }
.footer-social a{
  width:38px; height:38px;
  border-radius:50%;
  border:1px solid rgba(255,255,255,0.25);
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-size:14px;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.footer-social a:hover{
  background:var(--gold-500);
  border-color:var(--gold-500);
  color:var(--indigo-900);
}

.footer-col h4{
  font-family:var(--font-utility);
  font-size:14px;
  font-weight:700;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:#fff;
  margin:0 0 24px;
  position:relative;
  padding-bottom:13px;
}
.footer-col h4::after{
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:30px; height:2px;
  background:var(--gold-500);
}
.footer-links{ list-style:none; padding:0; margin:0; }
.footer-links li{ margin-bottom:13px; }
.footer-links a{
  color:rgba(255,255,255,0.7);
  font-size:14px;
  transition:color .2s ease, padding-left .2s ease;
}
.footer-links a:hover{ color:var(--gold-500); padding-left:4px; }

.footer-contact{ list-style:none; padding:0; margin:0; }
.footer-contact li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  margin-bottom:16px;
  color:rgba(255,255,255,0.7);
  font-size:14px;
  line-height:1.6;
}
.footer-contact i{
  color:var(--gold-500);
  margin-top:3px;
  width:16px;
  flex:0 0 auto;
}

.footer-bottom{
  position:relative;
  z-index:2;
  border-top:1px solid rgba(255,255,255,0.14);
  padding:22px 0;
}
.footer-bottom-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  flex-wrap:wrap;
  gap:14px;
}
.footer-bottom p{
  margin:0;
  font-size:13px;
  color:rgba(255,255,255,0.6);
}
.footer-legal{ display:flex; align-items:center; gap:16px; }
.footer-legal a{
  font-size:13px;
  color:rgba(255,255,255,0.6);
  transition:color .2s ease;
}
.footer-legal a:hover{ color:#fff; }
.footer-legal .sep{ color:rgba(255,255,255,0.3); }

/* ============================================================
   COURSE DETAILS PAGE — solid colors only, PNG images instead of icon fonts
   ============================================================ */

/* ---- Page banner: title only, solid background ---- */
.cd-banner{
  background:var(--indigo-900);
  padding:70px 0;
  text-align:center;
}
.cd-banner h1{
  color:#fff;
  font-size:clamp(28px, 4vw, 44px);
  font-weight:600;
  margin:0;
}
.cd-banner .rule{
  width:70px; height:3px;
  background:var(--gold-500);
  margin:20px auto 0;
  border-radius:2px;
}

/* ---- Two column layout ---- */
.cd-section{ background:var(--paper-0); }
.cd-grid{
  display:grid;
  grid-template-columns:1.55fr 1fr;
  gap:44px;
  align-items:start;
}

/* ---- Left: course main content ---- */
.cd-hero-img{
  border-radius:var(--radius-lg);
  overflow:hidden;
  margin-bottom:28px;
}
.cd-hero-img img{ width:100%; height:auto; display:block; }

.cd-meta-row{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-bottom:30px;
}
.cd-meta-item{
  display:flex;
  align-items:center;
  gap:10px;
  background:var(--mist-100);
  border:1px solid var(--line);
  border-radius:50px;
  padding:9px 18px 9px 9px;
}
.cd-meta-item img{
  width:30px; height:30px;
  border-radius:50%;
  display:block;
}
.cd-meta-item .m-label{
  font-family:var(--font-utility);
  font-size:10.5px;
  color:var(--ink-600);
  display:block;
  line-height:1.2;
}
.cd-meta-item .m-value{
  font-family:var(--font-utility);
  font-size:13.5px;
  font-weight:700;
  color:var(--indigo-900);
  line-height:1.2;
}

.cd-main h2{
  font-size:24px;
  font-weight:600;
  margin:44px 0 16px;
}
.cd-main h2:first-of-type{ margin-top:0; }
.cd-main p{
  color:var(--ink-600);
  font-size:15px;
  line-height:1.85;
  margin:0 0 16px;
}

.cd-check-list{
  list-style:none;
  padding:0;
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:14px 24px;
}
.cd-check-list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:14.5px;
  color:var(--ink-900);
  font-weight:500;
  line-height:1.5;
}
.cd-check-list li img{
  width:22px; height:22px;
  border-radius:6px;
  margin-top:1px;
  flex:0 0 auto;
}

.cd-curriculum{
  list-style:none;
  padding:0;
  margin:0;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.cd-curriculum li{
  display:flex;
  align-items:center;
  gap:16px;
  padding:18px 20px;
  border-bottom:1px solid var(--line);
  background:#fff;
}
.cd-curriculum li:last-child{ border-bottom:none; }
.cd-curriculum li:nth-child(even){ background:var(--mist-100); }
.cd-curriculum .mod-no{
  font-family:var(--font-display);
  font-weight:600;
  font-size:16px;
  color:var(--purple-500);
  flex:0 0 auto;
  width:38px;
}
.cd-curriculum .mod-title{
  font-family:var(--font-utility);
  font-size:14.5px;
  font-weight:600;
  color:var(--indigo-900);
}

.cd-apply-list{
  list-style:none;
  padding:0;
  margin:0;
}
.cd-apply-list li{
  display:flex;
  align-items:flex-start;
  gap:12px;
  font-size:14.5px;
  color:var(--ink-600);
  line-height:1.7;
  margin-bottom:12px;
}
.cd-apply-list li img{
  width:20px; height:20px;
  border-radius:6px;
  margin-top:2px;
  flex:0 0 auto;
}

/* ---- Right: sidebar (sticky, contained within the left column's height) ---- */
.cd-sidebar{
  display:flex;
  flex-direction:column;
  gap:28px;
  position:sticky;
  top:24px;
  align-self:start;
}

/* ---- Course information table ---- */
.cd-table-wrap{
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
  margin-bottom:8px;
}
.cd-table{
  width:100%;
  border-collapse:collapse;
  font-family:var(--font-body);
}
.cd-table tr{ border-bottom:1px solid var(--line); }
.cd-table tr:last-child{ border-bottom:none; }
.cd-table tr:nth-child(even){ background:var(--mist-100); }
.cd-table th, .cd-table td{
  padding:15px 20px;
  text-align:left;
  font-size:14px;
  vertical-align:middle;
}
.cd-table th{
  width:42%;
  font-family:var(--font-utility);
  font-weight:600;
  font-size:13px;
  color:var(--indigo-900);
  border-right:1px solid var(--line);
}
.cd-table td{
  color:var(--ink-600);
  font-weight:500;
}
.cd-widget{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:26px 24px;
}
.cd-widget h3{
  font-size:17px;
  font-weight:600;
  margin:0 0 20px;
  color:var(--indigo-900);
}

.other-course-item{
  display:flex;
  gap:14px;
  align-items:center;
  padding:12px 0;
  border-bottom:1px solid var(--mist-200);
}
.other-course-item:last-child{ border-bottom:none; padding-bottom:0; }
.other-course-item:first-child{ padding-top:0; }
.other-course-item img{
  width:76px; height:64px;
  border-radius:10px;
  object-fit:cover;
  flex:0 0 auto;
}
.other-course-item .oc-title{
  font-family:var(--font-utility);
  font-size:13.5px;
  font-weight:600;
  color:var(--indigo-900);
  line-height:1.35;
  margin-bottom:6px;
}
.other-course-item .oc-title a{ color:inherit; }
.other-course-item .oc-title a:hover{ color:var(--purple-500); }
.other-course-item .oc-price{
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:700;
  color:var(--teal-600);
}

.cd-widget .form-row{ margin-bottom:14px; }
.cd-widget .form-field{ position:relative; }
.cd-widget .form-field img.f-ic-img{
  position:absolute;
  left:14px;
  top:14px;
  width:18px; height:18px;
  border-radius:5px;
  z-index:2;
}
.cd-widget .form-field input,
.cd-widget .form-field textarea{
  padding-left:42px;
}

/* ============================================================
   SERVICES PAGE — curriculum levels with tab switcher
   solid colors only, no icon fonts (colored dot bullets instead)
   ============================================================ */
.svc-section{ background:var(--paper-0); }
.svc-intro{
  text-align:center;
  max-width:760px;
  margin:0 auto 50px;
}
.svc-intro .eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.svc-intro .eyebrow::before,
.svc-intro .eyebrow::after{
  content:""; width:34px; height:1px; background:var(--teal-600); display:inline-block;
}
.svc-intro h2{
  font-size:clamp(28px, 3.4vw, 40px);
  font-weight:600;
  line-height:1.22;
  margin:16px 0 16px;
}
.svc-intro h2 em{ font-style:italic; color:var(--purple-500); }
.svc-intro p{
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.8;
  margin:0;
}

.level-tabs{
  display:flex;
  justify-content:center;
  gap:14px;
  flex-wrap:wrap;
  margin-bottom:52px;
}
.level-tab{
  font-family:var(--font-utility);
  font-weight:700;
  font-size:13.5px;
  letter-spacing:0.02em;
  padding:14px 28px;
  border-radius:50px;
  border:1.5px solid var(--line);
  background:#fff;
  color:var(--ink-600);
  cursor:pointer;
  transition:background .2s ease, border-color .2s ease, color .2s ease;
}
.level-tab .tab-num{
  font-family:var(--font-display);
  font-size:15px;
  margin-right:8px;
}
.level-tab.active{
  background:var(--indigo-900);
  border-color:var(--indigo-900);
  color:#fff;
}
.level-tab:hover:not(.active){
  border-color:var(--teal-400);
  color:var(--indigo-900);
}

.level-panel{ display:none; }
.level-panel.active{ display:block; }

.level-head{
  text-align:center;
  margin-bottom:42px;
}
.level-head .level-title{
  font-family:var(--font-display);
  font-size:clamp(24px, 3vw, 32px);
  font-weight:600;
  color:var(--indigo-900);
  margin-bottom:10px;
}
.level-head .level-title em{ font-style:italic; color:var(--purple-500); }
.level-head p{
  color:var(--ink-600);
  font-size:14.5px;
  line-height:1.7;
  max-width:620px;
  margin:0 auto;
}

.level-cols{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
  align-items:start;
}
.level-col{
  background:#fff;
  border:1px solid var(--line);
  border-top:4px solid var(--teal-600);
  border-radius:var(--radius-md);
  padding:28px 24px;
}
.level-col:nth-child(2){ border-top-color:var(--purple-500); }
.level-col:nth-child(3){ border-top-color:var(--gold-600); }

.level-col h4{
  font-family:var(--font-utility);
  font-size:15.5px;
  font-weight:700;
  letter-spacing:0.03em;
  text-transform:uppercase;
  color:var(--indigo-900);
  margin:0 0 20px;
}

.topic-group{ margin-bottom:20px; }
.topic-group:last-child{ margin-bottom:0; }
.topic-group h5{
  font-family:var(--font-body);
  font-style:italic;
  font-size:13.5px;
  font-weight:700;
  color:var(--purple-500);
  margin:0 0 10px;
}
.level-col:nth-child(1) .topic-group h5{ color:var(--teal-600); }
.level-col:nth-child(3) .topic-group h5{ color:var(--gold-600); }

.topic-list{ list-style:none; padding:0; margin:0; }
.topic-list li{
  position:relative;
  padding-left:18px;
  font-size:13.5px;
  color:var(--ink-600);
  line-height:1.7;
  margin-bottom:9px;
}
.topic-list li:last-child{ margin-bottom:0; }
.topic-list li::before{
  content:"";
  position:absolute;
  left:0; top:7px;
  width:7px; height:7px;
  border-radius:2px;
  background:var(--teal-600);
}
.level-col:nth-child(2) .topic-list li::before{ background:var(--purple-500); }
.level-col:nth-child(3) .topic-list li::before{ background:var(--gold-600); }

/* ============================================================
   SERVICES PAGE — intro content + "Enroll Your Seat" form
   ============================================================ */
.svc-enroll-section{ background:var(--mist-100); }
.svc-enroll-grid{
  display:grid;
  grid-template-columns:1.3fr 0.9fr;
  gap:46px;
  align-items:start;
}
.svc-enroll-content .eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.svc-enroll-content .eyebrow::before{
  content:""; width:34px; height:1px; background:var(--teal-600); display:inline-block;
}
.svc-enroll-content h2{
  font-size:clamp(26px, 3.4vw, 38px);
  font-weight:600;
  line-height:1.22;
  margin:16px 0 18px;
}
.svc-enroll-content h2 em{ font-style:italic; color:var(--purple-500); }
.svc-enroll-content p{
  color:var(--ink-600);
  font-size:15px;
  line-height:1.8;
  margin:0 0 16px;
}
.svc-enroll-content .about-points{ margin-top:24px; margin-bottom:0; }

.enroll-widget{
  background:#fff;
  border:1px solid var(--line);
  border-top:4px solid var(--gold-500);
  border-radius:var(--radius-lg);
  padding:30px 26px;
  position:sticky;
  top:24px;
}
.enroll-widget h3{
  font-size:19px;
  font-weight:600;
  margin:0 0 6px;
  color:var(--indigo-900);
}
.enroll-widget .sub{
  font-size:13px;
  color:var(--ink-600);
  margin:0 0 22px;
}

/* ============================================================
   SERVICES PAGE — Why Take This Course / Advantages (card grid)
   ============================================================ */
.adv-section{ background:var(--mist-100); }
.adv-head{
  text-align:center;
  max-width:680px;
  margin:0 auto 50px;
}
.adv-head .eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.adv-head .eyebrow::before,
.adv-head .eyebrow::after{
  content:""; width:34px; height:1px; background:var(--teal-600); display:inline-block;
}
.adv-head h2{
  font-size:clamp(28px, 3.4vw, 40px);
  font-weight:600;
  line-height:1.22;
  margin:16px 0 14px;
}
.adv-head h2 em{ font-style:italic; color:var(--purple-500); }
.adv-head p{
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.75;
  margin:0;
}
.adv-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}
.adv-card{
  background:#fff;
  border:1px solid var(--line);
  border-top:4px solid var(--teal-600);
  border-radius:var(--radius-md);
  padding:30px 26px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.adv-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-strong); }
.adv-card:nth-child(2){ border-top-color:var(--purple-500); }
.adv-card:nth-child(3){ border-top-color:var(--gold-600); }
.adv-card:nth-child(4){ border-top-color:var(--indigo-700); }
.adv-card:nth-child(5){ border-top-color:var(--purple-500); }
.adv-card:nth-child(6){ border-top-color:var(--gold-600); }
.adv-card .ic{
  width:50px; height:50px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-size:19px;
  margin-bottom:18px;
  background:var(--teal-600);
}
.adv-card:nth-child(2) .ic{ background:var(--purple-500); }
.adv-card:nth-child(3) .ic{ background:var(--gold-600); }
.adv-card:nth-child(4) .ic{ background:var(--indigo-700); }
.adv-card:nth-child(5) .ic{ background:var(--purple-500); }
.adv-card:nth-child(6) .ic{ background:var(--gold-600); }
.adv-card h3{ font-size:17.5px; font-weight:600; margin:0 0 10px; }
.adv-card p{ color:var(--ink-600); font-size:14px; line-height:1.7; margin:0; }

/* ============================================================
   SERVICES PAGE — Eligibility
   ============================================================ */
.elig-section{ background:var(--paper-0); }
.elig-head{
  text-align:center;
  max-width:680px;
  margin:0 auto 50px;
}
.elig-head .eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.elig-head .eyebrow::before,
.elig-head .eyebrow::after{
  content:""; width:34px; height:1px; background:var(--teal-600); display:inline-block;
}
.elig-head h2{
  font-size:clamp(28px, 3.4vw, 40px);
  font-weight:600;
  line-height:1.22;
  margin:16px 0 14px;
}
.elig-head h2 em{ font-style:italic; color:var(--purple-500); }
.elig-head p{ color:var(--ink-600); font-size:15.5px; line-height:1.75; margin:0; }

.elig-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:22px;
}
.elig-item{
  display:flex;
  align-items:flex-start;
  gap:16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:24px 22px;
}
.elig-item .num{
  flex:0 0 auto;
  width:38px; height:38px;
  border-radius:50%;
  background:var(--indigo-900);
  color:#fff;
  font-family:var(--font-display);
  font-weight:600;
  font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.elig-item:nth-child(2) .num{ background:var(--purple-500); }
.elig-item:nth-child(3) .num{ background:var(--gold-600); }
.elig-item:nth-child(4) .num{ background:var(--teal-600); }
.elig-item:nth-child(5) .num{ background:var(--indigo-700); }
.elig-item:nth-child(6) .num{ background:var(--purple-500); }
.elig-item h4{ font-size:15px; font-weight:600; color:var(--indigo-900); margin:0 0 6px; }
.elig-item p{ font-size:13.5px; color:var(--ink-600); line-height:1.6; margin:0; }

/* ============================================================
   SERVICES PAGE — Fees Structure + Finance Facility
   ============================================================ */
.fees-section{ background:var(--mist-100); }
.fees-head{
  text-align:center;
  max-width:680px;
  margin:0 auto 46px;
}
.fees-head .eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.fees-head .eyebrow::before,
.fees-head .eyebrow::after{
  content:""; width:34px; height:1px; background:var(--teal-600); display:inline-block;
}
.fees-head h2{
  font-size:clamp(28px, 3.4vw, 40px);
  font-weight:600;
  line-height:1.22;
  margin:16px 0 14px;
}
.fees-head h2 em{ font-style:italic; color:var(--purple-500); }
.fees-head p{ color:var(--ink-600); font-size:15.5px; line-height:1.75; margin:0; }

.fees-card{
  max-width:640px;
  margin:0 auto;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  box-shadow:var(--shadow-soft);
}
.fees-table{
  width:100%;
  border-collapse:collapse;
}
.fees-table tr{ border-bottom:1px solid var(--line); }
.fees-table tr:nth-child(even){ background:var(--mist-100); }
.fees-table td{
  padding:17px 26px;
  font-size:14.5px;
  color:var(--ink-600);
}
.fees-table td:first-child{ font-weight:600; color:var(--indigo-900); }
.fees-table td:last-child{ text-align:right; font-family:var(--font-utility); font-weight:600; color:var(--ink-900); }
.fees-table tr.total{ background:var(--indigo-900); }
.fees-table tr.total td{ color:#fff; font-size:16px; padding:20px 26px; }
.fees-table tr.total td:first-child{ color:#fff; }
.fees-table tr.total td:last-child{ color:var(--gold-500); font-size:19px; }

.finance-note{
  display:flex;
  align-items:center;
  gap:16px;
  max-width:640px;
  margin:26px auto 0;
  background:#fff;
  border:1px solid var(--line);
  border-left:4px solid var(--teal-600);
  border-radius:var(--radius-md);
  padding:20px 24px;
}
.finance-note .ic{
  flex:0 0 auto;
  width:44px; height:44px;
  border-radius:12px;
  background:var(--teal-600);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:17px;
}
.finance-note h4{ font-size:14.5px; font-weight:600; color:var(--indigo-900); margin:0 0 4px; }
.finance-note p{ font-size:13px; color:var(--ink-600); margin:0; line-height:1.6; }

/* ============================================================
   SERVICES PAGE — FAQ + Map side by side
   ============================================================ */
.map-embed{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  height:100%;
  min-height:420px;
}
.map-embed iframe{
  width:100%;
  height:100%;
  min-height:420px;
  border:0;
  display:block;
}

/* ============================================================
   SERVICES PAGE — Eligibility, Fees Structure, FAQ + Map
   ============================================================ */
.eligibility-section{ background:var(--paper-0); }
.elig-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
  margin-top:46px;
}
.elig-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:28px 24px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.elig-card:hover{ transform:translateY(-4px); box-shadow:var(--shadow-soft); }
.elig-card .ic{
  width:48px; height:48px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-size:19px;
  margin-bottom:18px;
}
.elig-card:nth-child(3n+1) .ic{ background:var(--teal-600); }
.elig-card:nth-child(3n+2) .ic{ background:var(--purple-500); }
.elig-card:nth-child(3n+3) .ic{ background:var(--gold-600); }
.elig-card h4{
  font-size:16px;
  font-weight:600;
  margin:0 0 8px;
  color:var(--indigo-900);
}
.elig-card p{
  font-size:13.5px;
  color:var(--ink-600);
  line-height:1.7;
  margin:0;
}

/* ---- Fees Structure ---- */
.fees-section{ background:var(--mist-100); }
.fees-section .cd-table-wrap{ max-width:760px; margin:0 auto; background:#fff; }

.finance-note{
  max-width:760px;
  margin:26px auto 0;
  background:#fff;
  border:1px solid var(--line);
  border-left:4px solid var(--teal-600);
  border-radius:var(--radius-md);
  padding:20px 24px;
  display:flex;
  align-items:center;
  gap:16px;
}
.finance-note .ic{
  width:44px; height:44px;
  border-radius:50%;
  background:var(--teal-600);
  color:#fff;
  display:flex; align-items:center; justify-content:center;
  font-size:17px;
  flex:0 0 auto;
}
.finance-note h4{
  font-size:15px;
  font-weight:600;
  margin:0 0 4px;
  color:var(--indigo-900);
}
.finance-note p{
  font-size:13.5px;
  color:var(--ink-600);
  margin:0;
  line-height:1.6;
}

/* ---- FAQ + Map ---- */
.map-col{
  border-radius:var(--radius-lg);
  overflow:hidden;
  border:1px solid var(--line);
  min-height:440px;
}
.map-col iframe{
  width:100%;
  height:100%;
  min-height:440px;
  border:0;
  display:block;
}

/* ============================================================
   SERVICES PAGE — Advantages of This Course (icon-card grid)
   ============================================================ */
.adv-section{ background:var(--paper-0); }
.adv-head{
  text-align:center;
  max-width:680px;
  margin:0 auto 50px;
}
.adv-head .eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.adv-head .eyebrow::before,
.adv-head .eyebrow::after{
  content:""; width:34px; height:1px; background:var(--teal-600); display:inline-block;
}
.adv-head h2{
  font-size:clamp(28px, 3.4vw, 40px);
  font-weight:600;
  line-height:1.22;
  margin:16px 0 14px;
}
.adv-head h2 em{ font-style:italic; color:var(--purple-500); }
.adv-head p{
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.8;
  margin:0;
}

.adv-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:26px;
}
.adv-card{
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:28px 24px;
  transition:transform .25s ease, box-shadow .25s ease;
}
.adv-card:hover{ transform:translateY(-5px); box-shadow:var(--shadow-strong); }
.adv-card .ic{
  width:50px; height:50px;
  border-radius:14px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-size:19px;
  margin-bottom:18px;
}
.adv-card:nth-child(6n+1) .ic{ background:var(--teal-600); }
.adv-card:nth-child(6n+2) .ic{ background:var(--purple-500); }
.adv-card:nth-child(6n+3) .ic{ background:var(--gold-600); }
.adv-card:nth-child(6n+4) .ic{ background:var(--indigo-700); }
.adv-card:nth-child(6n+5) .ic{ background:var(--teal-600); }
.adv-card:nth-child(6n+6) .ic{ background:var(--purple-500); }
.adv-card h4{
  font-size:16.5px;
  font-weight:600;
  color:var(--indigo-900);
  margin:0 0 10px;
}
.adv-card p{
  color:var(--ink-600);
  font-size:14px;
  line-height:1.7;
  margin:0;
}

/* ============================================================
   ELIGIBILITY SECTION
   ============================================================ */
.elig-section{ background:var(--mist-100); }
.elig-head{
  text-align:center;
  max-width:680px;
  margin:0 auto 44px;
}
.elig-head .eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.elig-head .eyebrow::before,
.elig-head .eyebrow::after{
  content:""; width:34px; height:1px; background:var(--teal-600); display:inline-block;
}
.elig-head h2{
  font-size:clamp(28px, 3.4vw, 40px);
  font-weight:600;
  line-height:1.22;
  margin:16px 0 14px;
}
.elig-head h2 em{ font-style:italic; color:var(--purple-500); }
.elig-head p{
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.8;
  margin:0;
}
.elig-list{
  list-style:none;
  padding:0;
  margin:0;
  max-width:900px;
  margin:0 auto;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px 26px;
}
.elig-list li{
  display:flex;
  align-items:flex-start;
  gap:14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:18px 20px;
  font-size:14.5px;
  color:var(--ink-900);
  font-weight:500;
  line-height:1.6;
}
.elig-list li .num{
  flex:0 0 auto;
  width:28px; height:28px;
  border-radius:50%;
  background:var(--teal-600);
  color:#fff;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:700;
  display:flex; align-items:center; justify-content:center;
}
.elig-list li:nth-child(2n) .num{ background:var(--purple-500); }

/* ============================================================
   FEES STRUCTURE SECTION
   ============================================================ */
.fees-section{ background:var(--paper-0); }
.fees-head{
  text-align:center;
  max-width:680px;
  margin:0 auto 44px;
}
.fees-head .eyebrow{ display:inline-flex; align-items:center; gap:10px; }
.fees-head .eyebrow::before,
.fees-head .eyebrow::after{
  content:""; width:34px; height:1px; background:var(--teal-600); display:inline-block;
}
.fees-head h2{
  font-size:clamp(28px, 3.4vw, 40px);
  font-weight:600;
  line-height:1.22;
  margin:16px 0 14px;
}
.fees-head h2 em{ font-style:italic; color:var(--purple-500); }
.fees-head p{
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.8;
  margin:0;
}

.fees-table-wrap{
  max-width:820px;
  margin:0 auto 30px;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
}
.fees-table{
  width:100%;
  border-collapse:collapse;
}
.fees-table thead th{
  background:var(--indigo-900);
  color:#fff;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  padding:16px 22px;
  text-align:left;
}
.fees-table tbody tr{ border-bottom:1px solid var(--line); }
.fees-table tbody tr:last-child{ border-bottom:none; }
.fees-table tbody tr:nth-child(even){ background:var(--mist-100); }
.fees-table tbody tr.highlight{ background:var(--mist-200); }
.fees-table td{
  padding:16px 22px;
  font-size:14.5px;
  color:var(--ink-900);
}
.fees-table td.level-name{ font-weight:600; }
.fees-table td.price{
  font-family:var(--font-display);
  font-weight:600;
  color:var(--purple-500);
  font-size:16px;
}
.fees-table td .old-price{
  text-decoration:line-through;
  color:var(--ink-faint, #9997ab);
  font-family:var(--font-body);
  font-weight:400;
  font-size:13px;
  margin-right:8px;
}

.finance-callout{
  max-width:820px;
  margin:0 auto;
  background:var(--indigo-900);
  border-radius:var(--radius-md);
  padding:26px 28px;
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
}
.finance-callout .fc-badge{
  flex:0 0 auto;
  width:52px; height:52px;
  border-radius:14px;
  background:var(--gold-500);
  color:var(--indigo-900);
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
}
.finance-callout .fc-text{ flex:1; min-width:220px; }
.finance-callout h4{
  color:#fff;
  font-size:16px;
  font-weight:600;
  margin:0 0 6px;
}
.finance-callout p{
  color:rgba(255,255,255,0.72);
  font-size:13.5px;
  line-height:1.6;
  margin:0;
}

/* ============================================================
   FAQ + MAP — side by side
   ============================================================ */
.map-col{
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  min-height:420px;
}
.map-col iframe{
  width:100%;
  height:100%;
  min-height:420px;
  border:0;
  display:block;
}

/* ============================================================
   CONTACT PAGE — info cards + form/map grid
   (reuses .trust-card, .contact-col, .map-col from earlier sections)
   ============================================================ */
.contact-info-section{ background:var(--mist-100); padding-top:70px; }
.contact-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:44px;
  align-items:start;
}
.contact-grid .contact-col{ background:#fff; }
.contact-grid h3{
  font-size:19px;
  font-weight:600;
  margin:0 0 20px;
  color:var(--indigo-900);
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:991.98px){
  .main-menu{
    position:fixed;
    top:0; right:0;
    height:100vh;
    width:min(84vw, 340px);
    background:#fff;
    flex-direction:column;
    align-items:stretch;
    padding:90px 20px 30px;
    gap:2px;
    box-shadow:-16px 0 50px rgba(22,14,60,0.18);
    transform:translateX(100%);
    transition:transform .3s ease;
    overflow-y:auto;
  }
  .main-menu.mobile-open{ transform:translateX(0); }
  .main-menu > li{ width:100%; }
  .main-menu > li > a{
    width:100%;
    justify-content:space-between;
    padding:15px 12px;
    border-bottom:1px solid var(--mist-200);
    border-radius:0;
  }
  .has-dropdown .dropdown-panel{
    position:static;
    opacity:1; visibility:visible; transform:none;
    box-shadow:none;
    border:none;
    background:var(--mist-100);
    display:none;
    padding:6px;
    margin-bottom:6px;
    border-radius:10px;
  }
  .has-dropdown.open .dropdown-panel{ display:block; }
  .menu-toggle{ display:flex; }
  .header-actions .btn-quick-contact span.full-label{ display:none; }
  .mobile-overlay{
    position:fixed; inset:0;
    background:rgba(22,14,60,0.4);
    z-index:999;
    opacity:0; visibility:hidden;
    transition:all .25s ease;
  }
  .mobile-overlay.show{ opacity:1; visibility:visible; }

  .trust-grid{ grid-template-columns:repeat(2, 1fr); }
  .courses-grid{ grid-template-columns:repeat(2, 1fr); }
  .why-grid{ grid-template-columns:1fr; }
  .why-intro{ padding:46px 34px; }

  .gallery-grid{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:220px; }
  .gallery-item.big{ grid-column:1 / span 2; grid-row:auto; }
  .gallery-item.tall{ grid-row:auto; }

  .cert-grid{ grid-template-columns:repeat(2, 1fr); }

  .trainers-grid{ grid-template-columns:repeat(2, 1fr); }
  .blog-grid{ grid-template-columns:repeat(2, 1fr); }
  .fc-grid{ grid-template-columns:1fr; gap:50px; }
  .footer-grid{ grid-template-columns:repeat(2, 1fr); gap:40px 30px; }
  .cd-grid{ grid-template-columns:1fr; gap:50px; }
  .cd-check-list{ grid-template-columns:1fr; }
  .cd-sidebar{ position:static; top:auto; }
  .level-cols{ grid-template-columns:1fr; gap:22px; }
  .svc-enroll-grid{ grid-template-columns:1fr; gap:50px; }
  .enroll-widget{ position:static; top:auto; }
  .adv-grid{ grid-template-columns:repeat(2, 1fr); }
  .elig-list{ grid-template-columns:1fr; }
  .map-col{ min-height:340px; }
  .map-col iframe{ min-height:340px; }
  .contact-grid{ grid-template-columns:1fr; gap:36px; }

  .timeline-spine{ left:34px; }
  .timeline-item,
  .timeline-item.right{ flex-direction:row; gap:24px; }
  .timeline-item .timeline-card,
  .timeline-item.left .timeline-card,
  .timeline-item.right .timeline-card{ text-align:left; order:2; flex:1; }
  .timeline-node{ width:68px; height:68px; order:1; }
  .timeline-spacer{ display:none; }
  .about-grid{ grid-template-columns:1fr; gap:70px 0; }
  .about-media img{ height:420px; }
  .counter-grid{ grid-template-columns:repeat(2, 1fr); row-gap:36px; }
  .counter-card:nth-child(2n){ border-right:none; }
  .counter-card:nth-child(1),.counter-card:nth-child(2){ border-bottom:1px solid rgba(255,255,255,0.14); padding-bottom:32px; }
}
@media (max-width:767.98px){
  .topbar .tb-item.tb-address{ display:none; }
  .hero{ min-height:78vh; }
  .section-pad{ padding:70px 0; }
  .trust-strip{ margin-top:-60px; }
  .cta-btns{ flex-direction:column; align-items:stretch; }
  .btn-cta-primary, .btn-cta-secondary{ justify-content:center; }
  .testimonial-slider .owl-nav{ position:static; justify-content:center; margin-bottom:24px; }
}
@media (max-width:575.98px){
  .hero-btns{ flex-direction:column; align-items:flex-start; }
  .btn-primary-cta, .btn-outline-cta{ width:100%; justify-content:center; }
  .trust-grid{ grid-template-columns:1fr; }
  .courses-grid{ grid-template-columns:1fr; }
  .courses-head{ align-items:flex-start; }
  .why-list{ grid-template-columns:1fr; }
  .why-item:nth-child(odd){ border-right:none; }
  .why-item:nth-last-child(-n+2){ border-bottom:1px solid var(--mist-200); }
  .why-item:last-child{ border-bottom:none; }

  .gallery-grid{ grid-template-columns:1fr; grid-auto-rows:220px; }
  .gallery-item.big{ grid-column:1; }
  .cert-grid{ grid-template-columns:1fr; }
  .trainers-grid{ grid-template-columns:1fr; }
  .blog-grid{ grid-template-columns:1fr; }
  .logo-item{ min-height:96px; padding:16px 18px; }
  .contact-col{ padding:26px 20px; }
  .footer-grid{ grid-template-columns:1fr; gap:36px; }
  .footer-bottom-inner{ flex-direction:column; text-align:center; }
  .cd-banner{ padding:50px 0; }
  .cd-widget{ padding:22px 18px; }
  .cd-meta-row{ gap:10px; }
  .level-tab{ padding:11px 20px; font-size:12.5px; }
  .adv-grid{ grid-template-columns:1fr; }
  .fees-table th, .fees-table td{ padding:12px 14px; font-size:13px; }
  .finance-callout{ flex-direction:column; text-align:center; }

  .timeline-spine{ left:26px; }
  .timeline-item{ gap:16px; margin-bottom:34px; }
  .timeline-node{ width:52px; height:52px; border-width:3px; }
  .timeline-card{ padding:18px 18px; }
  .about-points{ grid-template-columns:1fr; }
  .about-media .badge-float{
    position:static;
    margin-top:-40px;
    margin-left:16px;
    width:calc(100% - 32px);
  }
  .counter-grid{ grid-template-columns:1fr; }
  .counter-card{ border-right:none !important; border-bottom:1px solid rgba(255,255,255,0.14); padding-bottom:28px !important; }
  .counter-card:last-child{ border-bottom:none; }
}

/* ============================================================
   SERVICES — Program Overview (content left · image right)
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only. Includes its own responsive rules.
   ============================================================ */
.pgm-section{ background:var(--mist-100); }
.pgm-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:72px;
  align-items:center;
}

/* ---------- Content (left) ---------- */
.pgm-title{
  font-size:clamp(28px, 3.6vw, 42px);
  font-weight:600;
  line-height:1.2;
  margin:0 0 22px;
}
.pgm-title em{ font-style:italic; color:var(--purple-500); }
.pgm-text{
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.85;
  margin:0 0 16px;
}

.pgm-points{
  list-style:none;
  padding:0;
  margin:30px 0 34px;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
.pgm-point{
  display:flex;
  align-items:center;
  gap:14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:16px 18px;
  font-family:var(--font-utility);
  font-size:13.5px;
  font-weight:600;
  line-height:1.45;
  color:var(--indigo-900);
  transition:border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.pgm-point:hover{
  border-color:var(--teal-400);
  transform:translateY(-3px);
  box-shadow:var(--shadow-soft);
}
.pgm-point .ic{
  flex:0 0 auto;
  width:44px; height:44px;
  border-radius:12px;
  display:flex; align-items:center; justify-content:center;
  color:#fff;
  font-size:17px;
  background:var(--teal-600);
}
.pgm-point:nth-child(2) .ic{ background:var(--purple-500); }
.pgm-point:nth-child(3) .ic{ background:var(--gold-600); }
.pgm-point:nth-child(4) .ic{ background:var(--indigo-700); }

/* ---------- Enroll strip (text + main button) ---------- */
.pgm-cta{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  background:var(--indigo-900);
  border-radius:var(--radius-lg);
  padding:22px 24px;
}
.pgm-cta-ic{
  flex:0 0 auto;
  width:52px; height:52px;
  border-radius:50%;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.22);
  color:var(--gold-500);
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
}
.pgm-cta-text{ flex:1; min-width:200px; }
.pgm-cta-text strong{
  display:block;
  font-family:var(--font-utility);
  font-size:15px;
  font-weight:600;
  color:#fff;
  margin-bottom:3px;
}
.pgm-cta-text span{
  font-size:13.5px;
  line-height:1.5;
  color:rgba(255,255,255,0.72);
}
.pgm-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--gold-500);
  color:var(--indigo-900);
  font-family:var(--font-utility);
  font-weight:700;
  font-size:14.5px;
  padding:15px 28px;
  border-radius:50px;
  white-space:nowrap;
  transition:background .2s ease, transform .2s ease, gap .2s ease;
}
.pgm-btn i{ font-size:12px; }
.pgm-btn:hover{
  background:#ffbf52;
  color:var(--indigo-900);
  transform:translateY(-2px);
  gap:14px;
}

/* ---------- Image (right) — swap the <img> src any time ---------- */
.pgm-media{ position:relative; }
.pgm-media::before{               /* teal outline accent, top-right */
  content:"";
  position:absolute;
  top:-16px; right:-16px;
  width:58%; height:58%;
  border:2px solid var(--teal-400);
  border-radius:var(--radius-lg);
  z-index:0;
}
.pgm-media::after{                /* gold block accent, bottom-right */
  content:"";
  position:absolute;
  bottom:-16px; right:-16px;
  width:84px; height:84px;
  background:var(--gold-500);
  border-radius:var(--radius-md);
  z-index:0;
}
.pgm-frame{
  position:relative;
  z-index:1;
  aspect-ratio:4 / 5;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--mist-200);
  box-shadow:var(--shadow-strong);
}
.pgm-frame img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}
.pgm-float{
  position:absolute;
  left:-26px;
  bottom:38px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:16px 22px 16px 16px;
  box-shadow:var(--shadow-strong);
}
.pgm-float .ic{
  width:46px; height:46px;
  border-radius:12px;
  background:var(--gold-500);
  color:var(--indigo-900);
  display:flex; align-items:center; justify-content:center;
  font-size:19px;
}
.pgm-float .num{
  display:block;
  font-family:var(--font-display);
  font-size:26px;
  font-weight:600;
  line-height:1;
  color:var(--purple-500);
  margin-bottom:4px;
}
.pgm-float .lbl{
  display:block;
  font-family:var(--font-utility);
  font-size:11px;
  font-weight:600;
  text-transform:uppercase;
  letter-spacing:0.05em;
  color:var(--ink-600);
}

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .pgm-grid{ grid-template-columns:1fr; gap:60px; }
  .pgm-media{ width:100%; max-width:600px; margin:0 auto; }
  .pgm-frame{ aspect-ratio:4 / 3; }
  .pgm-media::before{ top:-10px; right:-10px; }
  .pgm-media::after{ bottom:-10px; right:-10px; }
  .pgm-float{ left:16px; bottom:-22px; }
}
@media (max-width:575.98px){
  .pgm-points{ grid-template-columns:1fr; }
  .pgm-cta{ flex-direction:column; align-items:flex-start; padding:22px 20px; }
  .pgm-btn{ width:100%; justify-content:center; }
  .pgm-float{ padding:12px 16px 12px 12px; }
  .pgm-float .num{ font-size:22px; }
}


/* ============================================================
   SERVICES — Why Choose Us (intro panel + 6 animated cards)
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only. Includes its own responsive + motion rules.
   All class names start with  wcu-  so nothing else is affected.
   ============================================================ */
.wcu-section{ background:var(--paper-0); }
.wcu-grid{
  display:grid;
  grid-template-columns:0.78fr 1.22fr;
  gap:36px;
  align-items:start;
}

/* ---------- Scroll-reveal (only active when the section's script runs) ---------- */
.wcu-js .wcu-reveal:not(.is-in){ opacity:0; }
.wcu-reveal.is-in{ animation:wcu-rise .75s cubic-bezier(.2,.8,.2,1) var(--d, 0s) backwards; }
.wcu-intro.wcu-reveal.is-in{ animation-name:wcu-slide; }

/* ---------- Left: intro panel ---------- */
.wcu-intro{
  position:relative;
  overflow:hidden;
  background:var(--indigo-900);
  border-radius:var(--radius-lg);
  padding:46px 38px;
  color:#fff;
}
.wcu-intro > *{ position:relative; z-index:1; }
.wcu-intro::before{                 /* slowly rotating dashed ring */
  content:"";
  position:absolute;
  top:-90px; right:-90px;
  width:270px; height:270px;
  border:2px dashed rgba(255,255,255,0.13);
  border-radius:50%;
  animation:wcu-spin 45s linear infinite;
  pointer-events:none;
}
.wcu-intro::after{                  /* soft circle, bottom-left */
  content:"";
  position:absolute;
  bottom:-70px; left:-70px;
  width:180px; height:180px;
  background:rgba(255,255,255,0.045);
  border-radius:50%;
  pointer-events:none;
}

.wcu-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--teal-400);
}
.wcu-eyebrow::before{
  content:"";
  width:34px; height:1px;
  background:var(--teal-400);
  display:inline-block;
}
.wcu-title{
  color:#fff;
  font-size:clamp(28px, 3.2vw, 38px);
  font-weight:600;
  line-height:1.2;
  margin:16px 0 18px;
}
.wcu-title em{ font-style:italic; color:var(--gold-500); }
.wcu-lead{
  color:rgba(255,255,255,0.74);
  font-size:15px;
  line-height:1.8;
  margin:0;
}

/* ---------- "3 connected pillars" visual ---------- */
.wcu-pillars{
  margin-top:34px;
  padding-top:28px;
  border-top:1px solid rgba(255,255,255,0.16);
}
.wcu-pillars-head{
  display:flex;
  align-items:baseline;
  gap:12px;
  margin-bottom:24px;
}
.wcu-pillars-num{
  font-family:var(--font-display);
  font-size:46px;
  font-weight:600;
  line-height:1;
  color:var(--gold-500);
}
.wcu-pillars-label{
  font-family:var(--font-utility);
  font-size:13px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.86);
}
.wcu-chain{
  display:flex;
  align-items:flex-start;
  margin-bottom:22px;
}
.wcu-node{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
}
.wcu-node-ic{
  position:relative;
  width:54px; height:54px;
  border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-size:20px;
  color:#fff;
  border:2px solid rgba(255,255,255,0.28);
  transition:transform .3s ease;
}
.wcu-node-ic::after{                /* pulsing ring */
  content:"";
  position:absolute;
  inset:-2px;
  border:2px solid rgba(255,255,255,0.55);
  border-radius:50%;
  animation:wcu-ring 2.8s ease-out infinite;
}
.wcu-node.n1 .wcu-node-ic{ background:var(--teal-600); }
.wcu-node.n2 .wcu-node-ic{ background:var(--purple-500); }
.wcu-node.n2 .wcu-node-ic::after{ animation-delay:.9s; }
.wcu-node.n3 .wcu-node-ic{ background:var(--gold-500); color:var(--indigo-900); }
.wcu-node.n3 .wcu-node-ic::after{ animation-delay:1.8s; }
.wcu-node-lbl{
  font-family:var(--font-utility);
  font-size:11px;
  font-weight:600;
  color:rgba(255,255,255,0.86);
  white-space:nowrap;
}
.wcu-link{
  position:relative;
  flex:1;
  min-width:18px;
  height:2px;
  margin-top:26px;
  background:rgba(255,255,255,0.22);
}
.wcu-link::after{                   /* dot travelling along the connector */
  content:"";
  position:absolute;
  top:-3px; left:0;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--gold-500);
  opacity:0;
  animation:wcu-travel 2.6s linear infinite;
}
.wcu-link + .wcu-node + .wcu-link::after{ animation-delay:1.3s; }
.wcu-pillars-text{
  color:rgba(255,255,255,0.8);
  font-size:14.5px;
  line-height:1.65;
  margin:0;
}

/* ---------- Right: six cards ---------- */
.wcu-list{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:20px;
}
.wcu-card{
  --c:var(--teal-600);
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:30px 26px 32px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.wcu-card:nth-child(2){ --c:var(--purple-500); --d:.12s; }
.wcu-card:nth-child(3){ --c:var(--gold-600); }
.wcu-card:nth-child(4){ --c:var(--indigo-700); --d:.12s; }
.wcu-card:nth-child(5){ --c:var(--teal-600); }
.wcu-card:nth-child(6){ --c:var(--purple-500); --d:.12s; }

.wcu-card::after{                   /* accent bar that grows on hover */
  content:"";
  position:absolute;
  left:0; bottom:0;
  width:100%; height:4px;
  background:var(--c);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .45s ease;
}
.wcu-num{
  position:absolute;
  top:16px; right:22px;
  font-family:var(--font-display);
  font-size:46px;
  font-weight:600;
  line-height:1;
  color:var(--c);
  opacity:.13;
  transition:opacity .35s ease, transform .35s ease;
  pointer-events:none;
}
.wcu-ic{
  position:relative;
  width:54px; height:54px;
  border-radius:15px;
  background:var(--c);
  color:#fff;
  font-size:21px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .35s ease;
}
.wcu-ic::after{                     /* ring that pops in on hover */
  content:"";
  position:absolute;
  inset:-7px;
  border:2px solid var(--c);
  border-radius:22px;
  opacity:0;
  transform:scale(.85);
  transition:opacity .3s ease, transform .3s ease;
}
.wcu-card h3{
  color:var(--indigo-900);
  font-size:19px;
  font-weight:600;
  line-height:1.3;
  margin:24px 0 10px;
}
.wcu-card p{
  color:var(--ink-600);
  font-size:14px;
  line-height:1.75;
  margin:0;
}

/* ---------- Hover effects (mouse devices only) ---------- */
@media (hover:hover){
  .wcu-card:hover{
    transform:translateY(-8px);
    border-color:var(--c);
    box-shadow:var(--shadow-strong);
  }
  .wcu-card:hover::after{ transform:scaleX(1); }
  .wcu-card:hover .wcu-ic{ transform:rotate(-8deg) scale(1.06); }
  .wcu-card:hover .wcu-ic::after{ opacity:1; transform:scale(1); }
  .wcu-card:hover .wcu-ic i{ animation:wcu-pop .6s ease; }
  .wcu-card:hover .wcu-num{ opacity:.28; transform:translateY(-4px); }
  .wcu-node:hover .wcu-node-ic{ transform:translateY(-4px); }
}

/* ---------- Keyframes ---------- */
@keyframes wcu-rise{
  from{ opacity:0; transform:translateY(34px); }
  to{ opacity:1; transform:none; }
}
@keyframes wcu-slide{
  from{ opacity:0; transform:translateX(-40px); }
  to{ opacity:1; transform:none; }
}
@keyframes wcu-spin{ to{ transform:rotate(360deg); } }
@keyframes wcu-ring{
  0%{ transform:scale(1); opacity:.55; }
  70%, 100%{ transform:scale(1.6); opacity:0; }
}
@keyframes wcu-travel{
  0%{ left:0; opacity:0; }
  15%{ opacity:1; }
  85%{ opacity:1; }
  100%{ left:calc(100% - 8px); opacity:0; }
}
@keyframes wcu-pop{
  0%{ transform:scale(1); }
  40%{ transform:scale(1.35) rotate(8deg); }
  100%{ transform:scale(1); }
}

/* ---------- Responsive ---------- */
/* Sticky intro panel on large screens tall enough to hold it */
@media (min-width:1100px) and (min-height:760px){
  .wcu-intro{ position:sticky; top:110px; }
}
/* Tablet & below: panel goes on top, cards below */
@media (max-width:1099.98px){
  .wcu-grid{ grid-template-columns:1fr; gap:30px; }
}
/* Tablet landscape: panel splits into text | pillars */
@media (min-width:900px) and (max-width:1099.98px){
  .wcu-intro{
    display:grid;
    grid-template-columns:1.1fr 0.9fr;
    gap:44px;
    align-items:center;
  }
  .wcu-pillars{
    margin-top:0;
    padding-top:0;
    border-top:none;
    padding-left:36px;
    border-left:1px solid rgba(255,255,255,0.16);
  }
}
@media (max-width:575.98px){
  .wcu-intro{ padding:36px 24px; }
  .wcu-list{ grid-template-columns:1fr; gap:16px; }
  .wcu-card{ padding:26px 22px 28px; }
  .wcu-num{ font-size:38px; }
}
@media (max-width:399.98px){
  .wcu-node-ic{ width:46px; height:46px; font-size:17px; }
  .wcu-link{ margin-top:22px; }
  .wcu-pillars-num{ font-size:40px; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .wcu-section *,
  .wcu-section *::before,
  .wcu-section *::after{
    animation:none !important;
    transition:none !important;
  }
  .wcu-js .wcu-reveal:not(.is-in){ opacity:1; }
}


/* ============================================================
   SERVICES — What We Teach (path stepper + 4 highlighted tracks)
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only. Includes its own responsive + motion rules.
   All class names start with  wwt-  so nothing else is affected.
   ============================================================ */
.wwt-section{ background:var(--mist-100); }

/* ---------- Scroll-reveal (only active when the section's script runs) ---------- */
.wwt-js .wwt-reveal:not(.is-in){ opacity:0; }
.wwt-reveal.is-in{ animation:wwt-rise .75s cubic-bezier(.2,.8,.2,1) var(--d, 0s) backwards; }

/* ---------- Section heading ---------- */
.wwt-head{
  text-align:center;
  max-width:780px;
  margin:0 auto 44px;
}
.wwt-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--teal-600);
}
.wwt-eyebrow::before,
.wwt-eyebrow::after{
  content:"";
  width:34px; height:1px;
  background:var(--teal-600);
  display:inline-block;
}
.wwt-title{
  font-size:clamp(28px, 3.6vw, 42px);
  font-weight:600;
  line-height:1.2;
  margin:16px 0 16px;
}
.wwt-title em{ font-style:italic; color:var(--purple-500); }
.wwt-lead{
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.8;
  margin:0;
}

/* ---------- Three-level path stepper ---------- */
.wwt-path{
  list-style:none;
  display:flex;
  max-width:700px;
  margin:0 auto 56px;
  padding:0;
}
.wwt-step{
  --c:var(--teal-600);
  position:relative;
  flex:1;
  text-align:center;
}
.wwt-step:nth-child(2){ --c:var(--purple-500); }
.wwt-step:nth-child(3){ --c:var(--gold-600); }
.wwt-step-n{
  position:relative;
  z-index:2;
  width:46px; height:46px;
  margin:0 auto 12px;
  border-radius:50%;
  background:var(--c);
  color:#fff;
  font-family:var(--font-display);
  font-size:17px;
  font-weight:600;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 6px var(--mist-100);
  transition:transform .55s cubic-bezier(.2,.8,.2,1), opacity .55s ease;
}
.wwt-step:nth-child(2) .wwt-step-n{ transition-delay:.18s; }
.wwt-step:nth-child(3) .wwt-step-n{ transition-delay:.36s; }
.wwt-step-t{
  display:block;
  padding:0 6px;
  font-family:var(--font-utility);
  font-size:13.5px;
  font-weight:600;
  color:var(--indigo-900);
  line-height:1.4;
}
/* connector: ::before = grey base line, ::after = coloured line that fills in */
.wwt-step:not(:last-child)::before,
.wwt-step:not(:last-child)::after{
  content:"";
  position:absolute;
  top:22px;
  left:calc(50% + 30px);
  right:calc(-50% + 30px);
  height:2px;
}
.wwt-step:not(:last-child)::before{ background:#cfd3ea; }
.wwt-step:not(:last-child)::after{
  background:var(--c);
  transform-origin:left;
  transition:transform .9s ease .4s;
}
.wwt-js .wwt-path:not(.is-in) .wwt-step:not(:last-child)::after{ transform:scaleX(0); }
.wwt-js .wwt-path:not(.is-in) .wwt-step-n{ transform:scale(.55); opacity:0; }

/* ---------- Track grid ---------- */
.wwt-grid{
  display:grid;
  grid-template-columns:repeat(12, 1fr);
  gap:24px;
}
.wwt-science{ grid-column:span 7; --c:var(--teal-600); }
.wwt-soft{ grid-column:span 5; --c:var(--purple-500); --d:.12s; }
.wwt-ai{ grid-column:span 12; }
.wwt-behave{ grid-column:span 12; --c:var(--indigo-700); }

.wwt-track{
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:36px 32px 34px;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.wwt-track::before{                 /* colour bar along the top */
  content:"";
  position:absolute;
  top:0; left:0; right:0;
  height:5px;
  background:var(--c);
}
.wwt-track-head{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:26px;
}
.wwt-track-ic{
  position:relative;
  flex:0 0 auto;
  width:58px; height:58px;
  border-radius:16px;
  background:var(--c);
  color:#fff;
  font-size:23px;
  display:flex; align-items:center; justify-content:center;
  animation:wwt-float 4.2s ease-in-out infinite;
}
.wwt-soft .wwt-track-ic{ animation-delay:-1.4s; }
.wwt-ai .wwt-track-ic{ animation-delay:-2.8s; }
.wwt-behave .wwt-track-ic{ animation-delay:-.7s; }
.wwt-track-title{
  color:var(--indigo-900);
  font-size:clamp(24px, 2.4vw, 30px);
  font-weight:600;
  line-height:1.15;
  margin:0;
}
.wwt-count{
  margin-left:auto;
  display:flex;
  align-items:baseline;
  gap:8px;
}
.wwt-count-n{
  font-family:var(--font-display);
  font-size:38px;
  font-weight:600;
  line-height:1;
  color:var(--c);
}
.wwt-count-l{
  font-family:var(--font-utility);
  font-size:11.5px;
  font-weight:600;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--ink-600);
}

/* ---------- Chips (Science · Behavioral Conditioning) ---------- */
.wwt-chips{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.wwt-chip{
  display:inline-flex;
  align-items:flex-start;
  gap:9px;
  max-width:100%;
  background:var(--mist-100);
  border:1px solid var(--line);
  border-radius:12px;
  padding:9px 14px;
  font-family:var(--font-body);
  font-size:13.5px;
  font-weight:500;
  line-height:1.45;
  color:var(--ink-900);
  transition:background .25s ease, color .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.wwt-chip::before{
  content:"";
  flex:0 0 auto;
  width:7px; height:7px;
  margin-top:6px;
  border-radius:2px;
  background:var(--c);
  transition:background .25s ease, transform .25s ease;
}

/* ---------- Rows (Soft Skills) ---------- */
.wwt-rows{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  gap:10px;
}
.wwt-row{
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--mist-100);
  border:1px solid var(--line);
  border-radius:12px;
  padding:13px 16px;
  transition:background .25s ease, border-color .25s ease, transform .25s ease, box-shadow .25s ease;
}
.wwt-row-n{
  flex:0 0 auto;
  min-width:26px;
  font-family:var(--font-display);
  font-size:15px;
  font-weight:600;
  color:var(--c);
  transition:color .25s ease;
}
.wwt-row-t{
  flex:1;
  font-family:var(--font-utility);
  font-size:14px;
  font-weight:600;
  color:var(--indigo-900);
  line-height:1.4;
  transition:color .25s ease;
}
.wwt-row i{
  flex:0 0 auto;
  font-size:12px;
  color:#fff;
  opacity:0;
  transform:translateX(-8px);
  transition:opacity .25s ease, transform .25s ease;
}

/* ---------- AI Tools — the highlighted dark panel ---------- */
.wwt-ai{
  --c:var(--gold-500);
  background:var(--indigo-900);
  border-color:var(--indigo-900);
}
.wwt-ai > *{ position:relative; z-index:1; }
.wwt-ai::after{                     /* slowly rotating dashed ring */
  content:"";
  position:absolute;
  top:-120px; right:-110px;
  width:320px; height:320px;
  border:2px dashed rgba(255,255,255,0.12);
  border-radius:50%;
  animation:wwt-spin 50s linear infinite;
  pointer-events:none;
}
.wwt-ai .wwt-track-title{ color:#fff; }
.wwt-ai .wwt-track-ic{ background:var(--gold-500); color:var(--indigo-900); }
.wwt-ai .wwt-track-ic::after{       /* pulsing ring around the AI icon */
  content:"";
  position:absolute;
  inset:-2px;
  border:2px solid var(--gold-500);
  border-radius:18px;
  animation:wwt-ring 2.8s ease-out infinite;
}
.wwt-ai .wwt-count-n{ color:var(--gold-500); }
.wwt-ai .wwt-count-l{ color:rgba(255,255,255,0.7); }

.wwt-tools{
  list-style:none;
  margin:0; padding:0;
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:16px;
}
.wwt-tool{
  display:flex;
  align-items:center;
  gap:16px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:16px;
  padding:20px;
  transition:background .3s ease, border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}
.wwt-tool-ic{
  flex:0 0 auto;
  width:52px; height:52px;
  border-radius:50%;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.22);
  color:var(--gold-500);
  font-size:20px;
  display:flex; align-items:center; justify-content:center;
  transition:background .3s ease, color .3s ease, transform .3s ease, border-color .3s ease;
}
.wwt-tool-name{
  display:block;
  font-family:var(--font-display);
  font-size:19px;
  font-weight:600;
  line-height:1.25;
  color:#fff;
  margin-bottom:3px;
  transition:color .3s ease;
}
.wwt-tool-role{
  display:block;
  font-size:13.5px;
  line-height:1.5;
  color:rgba(255,255,255,0.74);
  transition:color .3s ease;
}

/* ---------- Entrance for the items inside each track ---------- */
.wwt-js .wwt-track:not(.is-in) .wwt-chip,
.wwt-js .wwt-track:not(.is-in) .wwt-row,
.wwt-js .wwt-track:not(.is-in) .wwt-tool{ opacity:0; }
.wwt-track.is-in .wwt-chip,
.wwt-track.is-in .wwt-row,
.wwt-track.is-in .wwt-tool{
  animation:wwt-pop .5s cubic-bezier(.2,.8,.2,1) calc(var(--i, 0) * 45ms + .3s) backwards;
}

/* ---------- Hover effects (mouse devices only) ---------- */
@media (hover:hover){
  .wwt-track:hover{
    border-color:var(--c);
    box-shadow:var(--shadow-strong);
  }
  .wwt-chip:hover{
    background:var(--c);
    border-color:var(--c);
    color:#fff;
    transform:translateY(-3px);
    box-shadow:0 12px 22px -12px rgba(22,20,42,0.45);
  }
  .wwt-chip:hover::before{ background:#fff; transform:rotate(45deg) scale(1.15); }

  .wwt-row:hover{
    background:var(--c);
    border-color:var(--c);
    transform:translateX(6px);
    box-shadow:0 12px 22px -12px rgba(22,20,42,0.45);
  }
  .wwt-row:hover .wwt-row-n,
  .wwt-row:hover .wwt-row-t{ color:#fff; }
  .wwt-row:hover i{ opacity:1; transform:none; }

  .wwt-tool:hover{
    background:var(--gold-500);
    border-color:var(--gold-500);
    transform:translateY(-5px);
    box-shadow:0 18px 30px -16px rgba(0,0,0,0.6);
  }
  .wwt-tool:hover .wwt-tool-ic{
    background:var(--indigo-900);
    border-color:var(--indigo-900);
    color:var(--gold-500);
    transform:rotate(-10deg) scale(1.08);
  }
  .wwt-tool:hover .wwt-tool-name{ color:var(--indigo-900); }
  .wwt-tool:hover .wwt-tool-role{ color:var(--indigo-800); }
}

/* ---------- Keyframes ---------- */
@keyframes wwt-rise{
  from{ opacity:0; transform:translateY(34px); }
  to{ opacity:1; transform:none; }
}
@keyframes wwt-pop{
  from{ opacity:0; transform:translateY(14px) scale(.94); }
  to{ opacity:1; transform:none; }
}
@keyframes wwt-float{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-5px); }
}
@keyframes wwt-spin{ to{ transform:rotate(360deg); } }
@keyframes wwt-ring{
  0%{ transform:scale(1); opacity:.6; }
  70%, 100%{ transform:scale(1.4); opacity:0; }
}

/* ---------- Responsive ---------- */
@media (max-width:1099.98px){
  .wwt-science,
  .wwt-soft,
  .wwt-ai,
  .wwt-behave{ grid-column:1 / -1; }
  .wwt-tools{ grid-template-columns:repeat(2, 1fr); }
}
@media (min-width:700px) and (max-width:1099.98px){
  .wwt-rows{ grid-template-columns:1fr 1fr; gap:10px 14px; }
  .wwt-row:last-child:nth-child(odd){ grid-column:1 / -1; }
}
@media (max-width:699.98px){
  .wwt-tools{ grid-template-columns:1fr; }
}
@media (max-width:575.98px){
  .wwt-head{ margin-bottom:34px; }
  .wwt-path{ margin-bottom:42px; }
  .wwt-step-n{ width:40px; height:40px; font-size:15px; margin-bottom:10px; }
  .wwt-step:not(:last-child)::before,
  .wwt-step:not(:last-child)::after{ top:19px; left:calc(50% + 26px); right:calc(-50% + 26px); }
  .wwt-step-t{ font-size:12px; padding:0 2px; }

  .wwt-track{ padding:32px 20px 26px; }
  .wwt-track-head{ gap:14px; margin-bottom:22px; }
  .wwt-track-ic{ width:50px; height:50px; font-size:20px; border-radius:14px; }
  .wwt-count{ flex-basis:100%; margin-left:0; }
  .wwt-count-n{ font-size:32px; }
  .wwt-chip{ font-size:13px; padding:8px 12px; }
  .wwt-tool{ padding:16px; gap:14px; }
  .wwt-tool-ic{ width:46px; height:46px; font-size:18px; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .wwt-section *,
  .wwt-section *::before,
  .wwt-section *::after{
    animation:none !important;
    transition:none !important;
  }
  .wwt-js .wwt-reveal:not(.is-in),
  .wwt-js .wwt-track:not(.is-in) .wwt-chip,
  .wwt-js .wwt-track:not(.is-in) .wwt-row,
  .wwt-js .wwt-track:not(.is-in) .wwt-tool{ opacity:1; }
  .wwt-js .wwt-path:not(.is-in) .wwt-step-n{ transform:none; opacity:1; }
  .wwt-js .wwt-path:not(.is-in) .wwt-step:not(:last-child)::after{ transform:none; }
}


/* ============================================================
   SERVICES — Why Take This Course (6 animated flip cards)
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only. Includes its own responsive + motion rules.
   All class names start with  wtc-  so nothing else is affected.
   ============================================================ */
.wtc-section{ background:var(--paper-0); }

/* ---------- Scroll-reveal ---------- */
.wtc-js .wtc-reveal:not(.is-in){ opacity:0; }
.wtc-reveal.is-in{ animation:wtc-rise .7s cubic-bezier(.2,.8,.2,1) var(--d, 0s) backwards; }

/* ---------- Heading ---------- */
.wtc-head{
  text-align:center;
  max-width:720px;
  margin:0 auto 50px;
}
.wtc-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--teal-600);
}
.wtc-eyebrow::before,
.wtc-eyebrow::after{
  content:"";
  width:34px; height:1px;
  background:var(--teal-600);
  display:inline-block;
}
.wtc-title{
  font-size:clamp(28px, 3.6vw, 42px);
  font-weight:600;
  line-height:1.22;
  margin:16px 0 16px;
}
.wtc-title em{ font-style:italic; color:var(--purple-500); }
.wtc-lead{
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.8;
  margin:0;
}
.wtc-hint{
  display:inline-flex;
  align-items:center;
  gap:8px;
  margin-top:18px;
  font-family:var(--font-utility);
  font-size:12px;
  font-weight:600;
  color:var(--ink-faint, #9997ab);
}
.wtc-hint i{ font-size:11px; color:var(--gold-600); }

/* ---------- Grid ---------- */
.wtc-grid{
  display:grid;
  grid-template-columns:repeat(3, 1fr);
  gap:28px;
}

/* ---------- Flip card shell ---------- */
.wtc-card{
  --c:var(--teal-600);
  perspective:1500px;
  height:280px;
}
.wtc-card:nth-child(2){ --c:var(--purple-500); --d:.08s; }
.wtc-card:nth-child(3){ --c:var(--gold-600); --d:.16s; }
.wtc-card:nth-child(4){ --c:var(--indigo-700); --d:.24s; }
.wtc-card:nth-child(5){ --c:var(--teal-600); --d:.32s; }
.wtc-card:nth-child(6){ --c:var(--purple-500); --d:.4s; }

.wtc-inner{
  position:relative;
  width:100%; height:100%;
  transition:transform .7s cubic-bezier(.22,.9,.3,1);
  transform-style:preserve-3d;
  cursor:pointer;
}
/* flip on hover for mouse devices, or via .is-flipped (tap) on touch devices */
@media (hover:hover){
  .wtc-card:hover .wtc-inner{ transform:rotateY(180deg); }
}
.wtc-card.is-flipped .wtc-inner{ transform:rotateY(180deg); }

.wtc-front, .wtc-back{
  position:absolute;
  inset:0;
  backface-visibility:hidden;
  -webkit-backface-visibility:hidden;
  border-radius:var(--radius-lg);
  padding:30px 26px;
  display:flex;
  flex-direction:column;
}
.wtc-front{
  background:#fff;
  border:1px solid var(--line);
  box-shadow:var(--shadow-soft);
}
.wtc-back{
  background:var(--c);
  color:#fff;
  transform:rotateY(180deg);
  justify-content:center;
}

/* ---------- Front face ---------- */
.wtc-front .wtc-num{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:600;
  color:var(--c);
  letter-spacing:0.04em;
}
.wtc-front .wtc-ic{
  width:60px; height:60px;
  margin:18px 0 20px;
  border-radius:16px;
  background:var(--c);
  color:#fff;
  font-size:23px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .4s ease;
}
.wtc-card:hover .wtc-front .wtc-ic{ transform:scale(1.08) rotate(-6deg); }
.wtc-front h3{
  font-size:18px;
  font-weight:600;
  color:var(--indigo-900);
  line-height:1.3;
  margin:0 0 auto;
}
.wtc-flip-cue{
  align-self:flex-end;
  display:flex;
  align-items:center;
  gap:6px;
  font-family:var(--font-utility);
  font-size:11px;
  font-weight:600;
  color:var(--c);
  opacity:.85;
}
.wtc-flip-cue i{ font-size:10px; animation:wtc-spin-hint 2.6s linear infinite; }

/* ---------- Back face ---------- */
.wtc-back .wtc-back-ic{
  width:40px; height:40px;
  margin-bottom:14px;
  border-radius:11px;
  background:rgba(255,255,255,0.18);
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
}
.wtc-back h4{
  font-size:15.5px;
  font-weight:700;
  margin:0 0 10px;
  line-height:1.3;
}
.wtc-back p{
  font-size:13.5px;
  line-height:1.7;
  margin:0;
  color:rgba(255,255,255,0.92);
}
.wtc-back p strong{ color:#fff; font-weight:700; }

/* ---------- Keyframes ---------- */
@keyframes wtc-rise{
  from{ opacity:0; transform:translateY(30px); }
  to{ opacity:1; transform:none; }
}
@keyframes wtc-spin-hint{
  0%, 80%, 100%{ transform:rotate(0deg); }
  90%{ transform:rotate(180deg); }
}

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .wtc-grid{ grid-template-columns:repeat(2, 1fr); }
}
@media (max-width:575.98px){
  .wtc-grid{ grid-template-columns:1fr; gap:20px; }
  .wtc-card{ height:auto; min-height:238px; }
  .wtc-front, .wtc-back{ padding:24px 22px; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .wtc-section *,
  .wtc-section *::before,
  .wtc-section *::after{
    animation:none !important;
    transition:none !important;
  }
  .wtc-js .wtc-reveal:not(.is-in){ opacity:1; }
}

/* ============================================================
   SERVICES — "Ready to Start Your Career?" full-width CTA
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only — the background photo gets a single solid
   tint overlay, not a gradient. All class names start with cta2-.
   ============================================================ */
.cta2-section{
  position:relative;
  overflow:hidden;
  padding:110px 0;
  text-align:center;
  color:#fff;
  background-image:url('https://images.unsplash.com/photo-1600880292203-757bb62b4baf?q=80&w=1920&auto=format&fit=crop');
  background-size:cover;
  background-position:center;
}
.cta2-section::before{                /* solid tint, not a gradient */
  content:"";
  position:absolute;
  inset:0;
  background:rgba(22,14,60,0.88);
}

/* ---------- Floating sparks + paper plane (decorative, aria-hidden) ---------- */
.cta2-trail{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.cta2-trail .spark{
  position:absolute;
  bottom:-40px;
  color:var(--gold-500);
  opacity:0;
  animation:cta2-rise linear infinite;
}
.cta2-trail .plane{
  position:absolute;
  bottom:-60px;
  right:10%;
  color:rgba(255,255,255,0.55);
  font-size:22px;
  animation:cta2-plane 13s ease-in infinite;
}
@keyframes cta2-rise{
  0%{ transform:translateY(0) translateX(0) scale(.6) rotate(0deg); opacity:0; }
  12%{ opacity:.9; }
  85%{ opacity:.4; }
  100%{ transform:translateY(-90vh) translateX(36px) scale(1.05) rotate(40deg); opacity:0; }
}
@keyframes cta2-plane{
  0%{ transform:translateY(0) translateX(0) rotate(-40deg); opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  100%{ transform:translateY(-65vh) translateX(-55px) rotate(-40deg); opacity:0; }
}

/* ---------- Content ---------- */
.cta2-inner{
  position:relative;
  z-index:2;
  max-width:660px;
  margin:0 auto;
}
.cta2-js .cta2-reveal:not(.is-in){ opacity:0; }
.cta2-reveal.is-in{ animation:cta2-rise-in .75s cubic-bezier(.2,.8,.2,1) var(--d, 0s) backwards; }

.cta2-badge{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:rgba(255,255,255,0.1);
  border:1px solid rgba(255,255,255,0.28);
  border-radius:50px;
  padding:9px 20px;
  font-family:var(--font-utility);
  font-size:12px;
  font-weight:600;
  letter-spacing:0.03em;
  color:#fff;
  margin-bottom:26px;
}
.cta2-badge .dot{
  width:8px; height:8px;
  border-radius:50%;
  background:var(--gold-500);
  position:relative;
}
.cta2-badge .dot::after{
  content:"";
  position:absolute;
  inset:-4px;
  border-radius:50%;
  border:1.5px solid var(--gold-500);
  animation:cta2-ping 1.8s ease-out infinite;
}

.cta2-title{
  color:#fff;
  font-size:clamp(30px, 4.4vw, 46px);
  font-weight:600;
  line-height:1.16;
  margin:0 0 20px;
}
.cta2-title em{
  font-style:italic;
  color:var(--gold-500);
}
.cta2-text{
  color:rgba(255,255,255,0.82);
  font-size:16px;
  line-height:1.8;
  margin:0 0 38px;
}

.cta2-btn{
  position:relative;
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:var(--gold-500);
  color:var(--indigo-900);
  font-family:var(--font-utility);
  font-weight:700;
  font-size:15.5px;
  padding:18px 40px;
  border-radius:50px;
  transition:transform .25s ease, gap .25s ease, background .25s ease;
}
.cta2-btn i{ font-size:15px; }
.cta2-btn::before{                    /* pulsing ring behind the button */
  content:"";
  position:absolute;
  inset:0;
  border-radius:50px;
  border:2px solid var(--gold-500);
  animation:cta2-btn-pulse 2.4s ease-out infinite;
}
.cta2-btn:hover{
  background:#ffbf52;
  color:var(--indigo-900);
  transform:translateY(-3px);
  gap:16px;
}

/* ---------- Keyframes ---------- */
@keyframes cta2-rise-in{
  from{ opacity:0; transform:translateY(28px); }
  to{ opacity:1; transform:none; }
}
@keyframes cta2-ping{
  0%{ transform:scale(1); opacity:.8; }
  100%{ transform:scale(2.2); opacity:0; }
}
@keyframes cta2-btn-pulse{
  0%{ transform:scale(1); opacity:.65; }
  100%{ transform:scale(1.18); opacity:0; }
}

/* ---------- Responsive ---------- */
@media (max-width:575.98px){
  .cta2-section{ padding:80px 0; }
  .cta2-badge{ font-size:11px; padding:8px 16px; }
  .cta2-btn{ width:100%; justify-content:center; padding:17px 24px; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .cta2-section *,
  .cta2-section *::before,
  .cta2-section *::after{
    animation:none !important;
    transition:none !important;
  }
  .cta2-trail{ display:none; }
  .cta2-js .cta2-reveal:not(.is-in){ opacity:1; }
}


/* ============================================================
   SERVICES — Fees Structure (left image · right content)
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only. Includes its own responsive + motion rules.
   All class names start with  fee-  so nothing else is affected.
   ============================================================ */
.fee-section{ background:var(--mist-100); }
.fee-grid{
  display:grid;
  grid-template-columns:0.85fr 1.15fr;
  gap:56px;
  align-items:center;
}

/* ---------- Scroll-reveal ---------- */
.fee-js .fee-reveal:not(.is-in){ opacity:0; }
.fee-reveal.is-in{ animation:fee-rise .75s cubic-bezier(.2,.8,.2,1) var(--d, 0s) backwards; }

/* ---------- Left: image ---------- */
.fee-media{ position:relative; }
.fee-media::before{                 /* teal outline accent, top-left */
  content:"";
  position:absolute;
  top:-16px; left:-16px;
  width:56%; height:56%;
  border:2px solid var(--teal-400);
  border-radius:var(--radius-lg);
  z-index:0;
}
.fee-frame{
  position:relative;
  z-index:1;
  aspect-ratio:4 / 5;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--mist-200);
  box-shadow:var(--shadow-strong);
}
.fee-frame img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}

.fee-save{                          /* pulsing "save" ribbon, top-right of the image */
  position:absolute;
  top:20px; right:-14px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:8px;
  background:var(--gold-500);
  color:var(--indigo-900);
  font-family:var(--font-utility);
  font-weight:700;
  font-size:12.5px;
  padding:10px 16px;
  border-radius:50px;
  box-shadow:var(--shadow-soft);
  animation:fee-pulse 2.6s ease-in-out infinite;
}
.fee-save i{ font-size:11px; }

.fee-price-badge{                   /* floating price card, bottom-left of the image */
  position:absolute;
  left:-24px;
  bottom:-26px;
  z-index:2;
  background:var(--indigo-900);
  color:#fff;
  border-radius:var(--radius-md);
  padding:18px 24px;
  box-shadow:var(--shadow-strong);
  text-align:left;
}
.fee-price-badge .lbl{
  display:block;
  font-family:var(--font-utility);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.05em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.62);
  margin-bottom:4px;
}
.fee-price-badge .amt{
  display:flex;
  align-items:baseline;
  gap:8px;
  font-family:var(--font-display);
  font-weight:600;
  color:#fff;
}
.fee-price-badge .amt .cur{ font-size:18px; }
.fee-price-badge .amt .num{ font-size:32px; }

/* ---------- Right: content ---------- */
.fee-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--teal-600);
}
.fee-eyebrow::before{
  content:"";
  width:34px; height:1px;
  background:var(--teal-600);
  display:inline-block;
}
.fee-title{
  font-size:clamp(28px, 3.6vw, 42px);
  font-weight:600;
  line-height:1.2;
  margin:16px 0 20px;
}
.fee-title em{ font-style:italic; color:var(--purple-500); }
.fee-text{
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.85;
  margin:0 0 28px;
}
.fee-text strong{ color:var(--indigo-900); }

/* ---------- Payment option chips ---------- */
.fee-chips{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin:0 0 28px;
  padding:0;
}
.fee-chip{
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:14px 20px;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.fee-chip .ic{
  flex:0 0 auto;
  width:38px; height:38px;
  border-radius:10px;
  background:var(--teal-600);
  color:#fff;
  font-size:15px;
  display:flex; align-items:center; justify-content:center;
}
.fee-chip:nth-child(2) .ic{ background:var(--purple-500); }
.fee-chip .t{
  font-family:var(--font-utility);
  font-size:13.5px;
  font-weight:700;
  color:var(--indigo-900);
  line-height:1.3;
}
.fee-chip .s{
  display:block;
  font-family:var(--font-body);
  font-size:12px;
  font-weight:400;
  color:var(--ink-600);
  margin-top:2px;
}
.fee-chip:hover{
  transform:translateY(-3px);
  border-color:var(--teal-400);
  box-shadow:var(--shadow-soft);
}

/* ---------- Finance callout ---------- */
.fee-finance{
  display:flex;
  align-items:center;
  gap:18px;
  flex-wrap:wrap;
  background:var(--indigo-900);
  border-radius:var(--radius-md);
  padding:22px 24px;
  margin-bottom:32px;
}
.fee-finance .ic{
  flex:0 0 auto;
  width:48px; height:48px;
  border-radius:14px;
  background:var(--gold-500);
  color:var(--indigo-900);
  font-size:19px;
  display:flex; align-items:center; justify-content:center;
}
.fee-finance-text{ flex:1; min-width:220px; }
.fee-finance-text h4{
  color:#fff;
  font-family:var(--font-utility);
  font-size:15px;
  font-weight:600;
  margin:0 0 5px;
}
.fee-finance-text p{
  color:rgba(255,255,255,0.72);
  font-size:13.5px;
  line-height:1.6;
  margin:0;
}

/* ---------- Button ---------- */
.fee-btn{
  display:inline-flex;
  align-items:center;
  gap:10px;
  background:var(--gold-500);
  color:var(--indigo-900);
  font-family:var(--font-utility);
  font-weight:700;
  font-size:14.5px;
  padding:16px 32px;
  border-radius:50px;
  transition:background .25s ease, transform .25s ease, gap .25s ease, box-shadow .25s ease;
  box-shadow:0 14px 30px -14px rgba(240,169,58,0.7);
}
.fee-btn i{ font-size:12.5px; }
.fee-btn:hover{
  background:#ffbf52;
  color:var(--indigo-900);
  transform:translateY(-3px);
  gap:14px;
}

/* ---------- Keyframes ---------- */
@keyframes fee-rise{
  from{ opacity:0; transform:translateY(30px); }
  to{ opacity:1; transform:none; }
}
@keyframes fee-pulse{
  0%, 100%{ transform:scale(1); }
  50%{ transform:scale(1.06); }
}

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .fee-grid{ grid-template-columns:1fr; gap:60px; }
  .fee-media{ max-width:460px; margin:0 auto; }
  .fee-media::before{ top:-10px; left:-10px; }
  .fee-save{ top:16px; right:8px; }
  .fee-price-badge{ left:16px; bottom:-22px; }
}
@media (max-width:575.98px){
  .fee-price-badge{ padding:14px 18px; left:12px; bottom:-20px; }
  .fee-price-badge .amt .num{ font-size:26px; }
  .fee-chips{ flex-direction:column; }
  .fee-chip{ width:100%; }
  .fee-finance{ padding:20px; }
  .fee-btn{ width:100%; justify-content:center; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .fee-section *,
  .fee-section *::before,
  .fee-section *::after{
    animation:none !important;
    transition:none !important;
  }
  .fee-js .fee-reveal:not(.is-in){ opacity:1; }
}


/* ============================================================
   ABOUT US PAGE — Intro section (content left · image right)
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only. Includes its own responsive + motion rules.
   All class names start with  abt-  so nothing else is affected.
   ============================================================ */
.abt-section{ background:var(--paper-0); }
.abt-grid{
  display:grid;
  grid-template-columns:1.05fr 0.95fr;
  gap:64px;
  align-items:center;
}

/* ---------- Scroll-reveal ---------- */
.abt-js .abt-reveal:not(.is-in){ opacity:0; }
.abt-reveal.is-in{ animation:abt-rise .8s cubic-bezier(.2,.8,.2,1) var(--d, 0s) backwards; }

/* ---------- Left: content ---------- */
.abt-content{ position:relative; }
.abt-quote-mark{                    /* large ghost quote mark behind the heading */
  position:absolute;
  top:-46px; left:-14px;
  font-family:var(--font-display);
  font-size:150px;
  line-height:1;
  color:var(--indigo-900);
  opacity:.05;
  z-index:0;
  pointer-events:none;
  user-select:none;
}
.abt-content > *{ position:relative; z-index:1; }

.abt-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--teal-600);
}
.abt-eyebrow-line{                  /* animated underline that draws in */
  width:34px; height:1px;
  background:var(--teal-600);
  display:inline-block;
  position:relative;
  overflow:hidden;
}
.abt-eyebrow-line::after{
  content:"";
  position:absolute; inset:0;
  background:var(--teal-600);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .8s ease .2s;
}
.abt-js .abt-reveal.is-in .abt-eyebrow-line::after{ transform:scaleX(1); }
.abt-js .abt-eyebrow-line::after{ transform:scaleX(0); }

.abt-lead{
  font-family:var(--font-display);
  font-weight:500;
  font-size:clamp(23px, 2.6vw, 30px);
  line-height:1.42;
  color:var(--indigo-900);
  margin:20px 0 24px;
}
.abt-lead em{ font-style:italic; color:var(--purple-500); }

.abt-text{
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.9;
  margin:0 0 18px;
}
.abt-text:last-child{ margin-bottom:0; }
.abt-text strong{ color:var(--indigo-900); font-weight:600; }

/* ---------- Right: image ---------- */
.abt-media{ position:relative; }
.abt-media::before{                 /* teal outline accent, top-right */
  content:"";
  position:absolute;
  top:-18px; right:-18px;
  width:58%; height:52%;
  border:2px solid var(--teal-400);
  border-radius:var(--radius-lg);
  z-index:0;
  transition:top .5s ease, right .5s ease;
}
.abt-media::after{                  /* gold block accent, bottom-left */
  content:"";
  position:absolute;
  bottom:-16px; left:-16px;
  width:74px; height:74px;
  background:var(--gold-500);
  border-radius:var(--radius-md);
  z-index:0;
}
.abt-frame{
  position:relative;
  z-index:1;
  aspect-ratio:4 / 4.6;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--mist-200);
  box-shadow:var(--shadow-strong);
}
.abt-frame img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
@media (hover:hover){
  .abt-media:hover .abt-frame img{ transform:scale(1.06); }
  .abt-media:hover::before{ top:-24px; right:-24px; }
}

.abt-badge{                         /* floating mentor badge, bottom-right overlapping the image */
  position:absolute;
  right:-22px;
  bottom:34px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:14px;
  background:var(--indigo-900);
  border-radius:var(--radius-md);
  padding:16px 22px 16px 16px;
  box-shadow:var(--shadow-strong);
  animation:abt-float 4.4s ease-in-out infinite;
}
.abt-badge .ic{
  flex:0 0 auto;
  width:46px; height:46px;
  border-radius:12px;
  background:var(--gold-500);
  color:var(--indigo-900);
  display:flex; align-items:center; justify-content:center;
  font-size:19px;
}
.abt-badge .txt{
  font-family:var(--font-utility);
  font-size:13px;
  font-weight:700;
  color:#fff;
  line-height:1.35;
  max-width:140px;
}

/* ---------- Keyframes ---------- */
@keyframes abt-rise{
  from{ opacity:0; transform:translateY(32px); }
  to{ opacity:1; transform:none; }
}
@keyframes abt-float{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-7px); }
}

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .abt-grid{ grid-template-columns:1fr; gap:64px; }
  .abt-media{ order:-1; max-width:520px; margin:0 auto; }
  .abt-quote-mark{ font-size:120px; top:-36px; left:-6px; }
}
@media (max-width:575.98px){
  .abt-quote-mark{ font-size:90px; top:-26px; }
  .abt-lead{ font-size:22px; }
  .abt-badge{ right:8px; bottom:-20px; padding:12px 18px 12px 12px; }
  .abt-badge .ic{ width:40px; height:40px; font-size:16px; }
  .abt-badge .txt{ font-size:12px; max-width:120px; }
  .abt-media::after{ width:56px; height:56px; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .abt-section *,
  .abt-section *::before,
  .abt-section *::after{
    animation:none !important;
    transition:none !important;
  }
  .abt-js .abt-reveal:not(.is-in){ opacity:1; }
  .abt-js .abt-eyebrow-line::after{ transform:scaleX(1); }
}

/* ============================================================
   ABOUT US PAGE — What Are We Here For (dark statement + bridge visual)
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only. Includes its own responsive + motion rules.
   All class names start with  waw-  so nothing else is affected.
   ============================================================ */
.waw-section{
  position:relative;
  overflow:hidden;
  background:var(--indigo-900);
  color:#fff;
}
.waw-section > *{ position:relative; z-index:1; }
.waw-section::before{               /* slowly rotating dashed ring, top-right */
  content:"";
  position:absolute;
  top:-130px; right:-120px;
  width:340px; height:340px;
  border:2px dashed rgba(255,255,255,0.1);
  border-radius:50%;
  animation:waw-spin 55s linear infinite;
  pointer-events:none;
}
.waw-section::after{                /* soft solid circle, bottom-left */
  content:"";
  position:absolute;
  bottom:-90px; left:-90px;
  width:220px; height:220px;
  background:rgba(255,255,255,0.035);
  border-radius:50%;
  pointer-events:none;
}

/* ---------- Scroll-reveal ---------- */
.waw-js .waw-reveal:not(.is-in){ opacity:0; }
.waw-reveal.is-in{ animation:waw-rise .8s cubic-bezier(.2,.8,.2,1) var(--d, 0s) backwards; }

/* ---------- Heading block ---------- */
.waw-inner{
  margin:0 auto;
  text-align:center;
}
.waw-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.18em;
  text-transform:uppercase;
  color:var(--teal-400);
}
.waw-eyebrow::before,
.waw-eyebrow::after{
  content:"";
  width:30px; height:1px;
  background:var(--teal-400);
  display:inline-block;
}
.waw-title{
  color:#fff;
  font-size:clamp(28px, 4vw, 42px);
  font-weight:600;
  line-height:1.2;
  margin:20px 0 22px;
}
.waw-text{
  color:rgba(255,255,255,0.8);
  font-size:16px;
  line-height:1.95;
  margin:0;
}
.waw-text strong{
  color:var(--gold-500);
  font-weight:700;
}

/* ---------- Bridge visual ---------- */
.waw-bridge{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:22px;
  max-width:640px;
  margin:56px auto 0;
}
.waw-node{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
  flex:0 0 auto;
  transition:transform .3s ease;
}
.waw-node-ic{
  width:66px; height:66px;
  border-radius:50%;
  background:rgba(255,255,255,0.08);
  border:2px solid rgba(255,255,255,0.25);
  display:flex; align-items:center; justify-content:center;
  font-size:24px;
  color:#fff;
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.waw-node.n2 .waw-node-ic{ color:var(--indigo-900); background:var(--gold-500); border-color:var(--gold-500); }
.waw-node-label{
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  color:rgba(255,255,255,0.85);
  text-align:center;
  max-width:120px;
  line-height:1.35;
}
@media (hover:hover){
  .waw-node:hover{ transform:translateY(-5px); }
  .waw-node:not(.n2):hover .waw-node-ic{
    background:rgba(255,255,255,0.16);
    border-color:#fff;
  }
}

.waw-link{
  position:relative;
  flex:1;
  min-width:60px;
  max-width:180px;
  height:2px;
  background:rgba(255,255,255,0.2);
}
.waw-link::before{                  /* dot travelling along the bridge */
  content:"";
  position:absolute;
  top:-3px; left:0;
  width:8px; height:8px;
  border-radius:50%;
  background:var(--gold-500);
  opacity:0;
  animation:waw-travel 3s linear infinite;
}
.waw-link-mid{                      /* small icon marking the midpoint of the bridge */
  position:absolute;
  top:50%; left:50%;
  transform:translate(-50%, -50%);
  width:34px; height:34px;
  border-radius:50%;
  background:var(--indigo-900);
  border:2px solid var(--gold-500);
  color:var(--gold-500);
  display:flex; align-items:center; justify-content:center;
  font-size:12px;
}

/* ---------- Keyframes ---------- */
@keyframes waw-rise{
  from{ opacity:0; transform:translateY(28px); }
  to{ opacity:1; transform:none; }
}
@keyframes waw-spin{ to{ transform:rotate(360deg); } }
@keyframes waw-travel{
  0%{ left:0; opacity:0; }
  15%{ opacity:1; }
  85%{ opacity:1; }
  100%{ left:calc(100% - 8px); opacity:0; }
}

/* ---------- Responsive ---------- */
@media (max-width:575.98px){
  .waw-bridge{ gap:14px; margin-top:44px; }
  .waw-node-ic{ width:54px; height:54px; font-size:20px; }
  .waw-node-label{ font-size:11.5px; max-width:92px; }
  .waw-link{ min-width:34px; }
  .waw-link-mid{ width:28px; height:28px; font-size:10px; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .waw-section *,
  .waw-section *::before,
  .waw-section *::after{
    animation:none !important;
    transition:none !important;
  }
  .waw-js .waw-reveal:not(.is-in){ opacity:1; }
}

/* ============================================================
   ABOUT US PAGE — From the Founder's Desk (letter-style card)
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only. Includes its own responsive + motion rules.
   All class names start with  fnd-  so nothing else is affected.
   ============================================================ */
.fnd-section{ background:var(--mist-100); }

/* ---------- Scroll-reveal ---------- */
.fnd-js .fnd-reveal:not(.is-in){ opacity:0; }
.fnd-reveal.is-in{ animation:fnd-rise .8s cubic-bezier(.2,.8,.2,1) var(--d, 0s) backwards; }

/* ---------- Letter card ---------- */
.fnd-card{
  position:relative;
  overflow:hidden;
  max-width:820px;
  margin:0 auto;
  background:#fff;
  border-top:5px solid var(--gold-500);
  border-radius:var(--radius-lg);
  padding:56px 60px 48px;
  box-shadow:var(--shadow-strong);
}
.fnd-card > *{ position:relative; z-index:1; }
.fnd-quote-mark{                    /* large ghost quote mark, top-right of the card */
  position:absolute;
  top:-10px; right:26px;
  font-family:var(--font-display);
  font-size:170px;
  line-height:1;
  color:var(--indigo-900);
  opacity:.05;
  z-index:0;
  pointer-events:none;
  user-select:none;
}

.fnd-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--teal-600);
}
.fnd-eyebrow::before{
  content:"";
  width:34px; height:1px;
  background:var(--teal-600);
  display:inline-block;
}
.fnd-title{
  font-size:clamp(26px, 3.2vw, 36px);
  font-weight:600;
  line-height:1.22;
  margin:16px 0 28px;
}

.fnd-letter p{
  font-family:var(--font-display);
  font-style:italic;
  font-weight:400;
  font-size:17px;
  line-height:1.85;
  color:var(--ink-600);
  margin:0 0 20px;
}
.fnd-letter p:last-child{ margin-bottom:0; }
.fnd-letter p strong{
  font-style:normal;
  font-weight:600;
  color:var(--indigo-900);
}

/* ---------- Founders row: Poulami (left) · Ahana (right), each with her own photo ---------- */
.fnd-founders{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-top:40px;
  padding-top:32px;
  border-top:1px dashed var(--line);
}
.fnd-founder{
  display:flex;
  align-items:center;
  gap:18px;
}
.fnd-founder.right{
  flex-direction:row-reverse;
  text-align:right;
}
.fnd-founder-photo{
  flex:0 0 auto;
  width:92px; height:92px;
  border-radius:50%;
  overflow:hidden;
  border:3px solid #fff;
  box-shadow:0 0 0 3px var(--teal-400);
  transition:transform .3s ease, box-shadow .3s ease;
}
.fnd-founder.right .fnd-founder-photo{ box-shadow:0 0 0 3px var(--gold-500); }
.fnd-founder-photo img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.fnd-founder-text .name{
  font-family:var(--font-display);
  font-size:17.5px;
  font-weight:600;
  color:var(--indigo-900);
  line-height:1.3;
}
.fnd-founder-text .role{
  display:block;
  font-family:var(--font-utility);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--teal-600);
  margin-top:4px;
}
.fnd-founder.right .fnd-founder-text .role{ color:var(--gold-600); }

@media (hover:hover){
  .fnd-founder:hover .fnd-founder-photo{
    transform:translateY(-4px) scale(1.04);
  }
  .fnd-founder:hover .fnd-founder-photo{ box-shadow:0 0 0 3px var(--indigo-900); }
}

/* ---------- Keyframes ---------- */
@keyframes fnd-rise{
  from{ opacity:0; transform:translateY(28px); }
  to{ opacity:1; transform:none; }
}

/* ---------- Responsive ---------- */
@media (max-width:767.98px){
  .fnd-card{ padding:44px 34px 38px; }
  .fnd-quote-mark{ font-size:130px; right:14px; }
}
@media (max-width:575.98px){
  .fnd-card{ padding:38px 22px 32px; border-radius:var(--radius-md); }
  .fnd-quote-mark{ font-size:100px; top:-6px; right:10px; }
  .fnd-letter p{ font-size:15.5px; }
  .fnd-founders{ grid-template-columns:1fr; gap:24px; }
  .fnd-founder.right{ flex-direction:row; text-align:left; }
  .fnd-founder-photo{ width:76px; height:76px; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .fnd-section *,
  .fnd-section *::before,
  .fnd-section *::after{
    animation:none !important;
    transition:none !important;
  }
  .fnd-js .fnd-reveal:not(.is-in){ opacity:1; }
}


/* ============================================================
   ABOUT US PAGE — Mission / Vision / Values (tabbed panels)
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only. Includes its own responsive + motion rules.
   All class names start with  mvv-  so nothing else is affected.
   ============================================================ */
.mvv-section{ background:var(--paper-0); overflow:hidden; }

/* ---------- Scroll-reveal ---------- */
.mvv-js .mvv-reveal:not(.is-in){ opacity:0; }
.mvv-reveal.is-in{ animation:mvv-rise .75s cubic-bezier(.2,.8,.2,1) var(--d, 0s) backwards; }

/* ---------- Heading ---------- */
.mvv-head{
  text-align:center;
  max-width:700px;
  margin:0 auto 46px;
}
.mvv-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--teal-600);
}
.mvv-eyebrow::before,
.mvv-eyebrow::after{
  content:"";
  width:34px; height:1px;
  background:var(--teal-600);
  display:inline-block;
}
.mvv-title{
  font-size:clamp(28px, 3.6vw, 42px);
  font-weight:600;
  line-height:1.22;
  margin:16px 0 14px;
}
.mvv-title em{ font-style:italic; color:var(--purple-500); }
.mvv-lead{
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.8;
  margin:0;
}

/* ---------- Tab switcher ---------- */
.mvv-tabs{
  display:flex;
  justify-content:center;
  gap:12px;
  flex-wrap:wrap;
  margin-bottom:8px;
}
.mvv-tab{
  --c:var(--teal-600);
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:50px;
  padding:13px 26px 13px 16px;
  font-family:var(--font-utility);
  font-weight:700;
  font-size:14px;
  color:var(--ink-600);
  cursor:pointer;
  transition:border-color .25s ease, color .25s ease, background .25s ease, transform .25s ease;
}
.mvv-tab[data-tab="vision"]{ --c:var(--purple-500); }
.mvv-tab[data-tab="values"]{ --c:var(--gold-600); }
.mvv-tab .ic{
  width:30px; height:30px;
  border-radius:50%;
  background:var(--mist-100);
  color:var(--c);
  display:flex; align-items:center; justify-content:center;
  font-size:13px;
  transition:background .25s ease, color .25s ease;
}
.mvv-tab.active{
  border-color:var(--c);
  color:var(--indigo-900);
  background:#fff;
  transform:translateY(-2px);
  box-shadow:var(--shadow-soft);
}
.mvv-tab.active .ic{ background:var(--c); color:#fff; }
.mvv-tab:not(.active):hover{ border-color:var(--c); color:var(--indigo-900); }

/* ---------- Panels ---------- */
.mvv-panels{ position:relative; margin-top:40px; }
.mvv-panel{
  display:none;
  grid-template-columns:0.85fr 1.15fr;
  gap:48px;
  align-items:center;
}
.mvv-panel.active{ display:grid; }

/* left: statement card */
.mvv-statement{
  --c:var(--teal-600);
  position:relative;
  overflow:hidden;
  background:var(--indigo-900);
  border-radius:var(--radius-lg);
  padding:40px 34px;
  color:#fff;
}
.mvv-panel[data-panel="vision"] .mvv-statement{ --c:var(--purple-500); }
.mvv-panel[data-panel="values"] .mvv-statement{ --c:var(--gold-500); }
.mvv-statement > *{ position:relative; z-index:1; }
.mvv-statement::before{              /* big ghost icon, bottom-right */
  content:"";
  position:absolute;
  right:-30px; bottom:-30px;
  width:160px; height:160px;
  border:2px dashed rgba(255,255,255,0.12);
  border-radius:50%;
  animation:mvv-spin 40s linear infinite;
}
.mvv-statement-ic{
  width:56px; height:56px;
  border-radius:16px;
  background:var(--c);
  color:var(--indigo-900);
  font-size:22px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:22px;
}
.mvv-panel[data-panel="mission"] .mvv-statement-ic,
.mvv-panel[data-panel="vision"] .mvv-statement-ic{ color:#fff; }
.mvv-statement h3{
  color:#fff;
  font-size:22px;
  font-weight:600;
  line-height:1.3;
  margin:0 0 14px;
}
.mvv-statement p{
  color:rgba(255,255,255,0.78);
  font-size:14.5px;
  line-height:1.8;
  margin:0;
}

/* right: bullet list */
.mvv-list{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:14px;
}
.mvv-item{
  --c:var(--teal-600);
  display:flex;
  align-items:flex-start;
  gap:16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:18px 20px;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.mvv-panel[data-panel="vision"] .mvv-item{ --c:var(--purple-500); }
.mvv-panel[data-panel="values"] .mvv-item{ --c:var(--gold-600); }
.mvv-item .n{
  flex:0 0 auto;
  width:34px; height:34px;
  border-radius:10px;
  background:var(--c);
  color:#fff;
  font-family:var(--font-display);
  font-size:14px;
  font-weight:600;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s ease;
}
.mvv-item-text{ flex:1; }
.mvv-item-text .t{
  display:block;
  font-family:var(--font-utility);
  font-size:14.5px;
  font-weight:700;
  color:var(--indigo-900);
  margin-bottom:3px;
}
.mvv-item-text .s{
  display:block;
  font-size:13.5px;
  line-height:1.6;
  color:var(--ink-600);
}
@media (hover:hover){
  .mvv-item:hover{
    border-color:var(--c);
    transform:translateX(6px);
    box-shadow:var(--shadow-soft);
  }
  .mvv-item:hover .n{ transform:rotate(-8deg) scale(1.08); }
}

/* values-only: single-line items (no description) get tighter spacing */
.mvv-item.compact{ align-items:center; padding:16px 20px; }
.mvv-item.compact .t{ margin-bottom:0; }

/* ---------- Keyframes ---------- */
@keyframes mvv-rise{
  from{ opacity:0; transform:translateY(28px); }
  to{ opacity:1; transform:none; }
}
@keyframes mvv-spin{ to{ transform:rotate(360deg); } }

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .mvv-panel{ grid-template-columns:1fr; gap:30px; }
}
@media (max-width:575.98px){
  .mvv-tabs{ gap:8px; }
  .mvv-tab{ padding:11px 18px 11px 12px; font-size:12.5px; }
  .mvv-tab .ic{ width:26px; height:26px; font-size:11px; }
  .mvv-statement{ padding:30px 24px; }
  .mvv-item{ padding:15px 16px; gap:12px; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .mvv-section *,
  .mvv-section *::before,
  .mvv-section *::after{
    animation:none !important;
    transition:none !important;
  }
  .mvv-js .mvv-reveal:not(.is-in){ opacity:1; }
}


/* ============================================================
   ABOUT US PAGE — Why Choose Us (content left · image right)
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only. Includes its own responsive + motion rules.
   All class names start with  awc-  so nothing else is affected.
   (Different prefix from the Services page's "wcu-" Why Choose Us,
   so both can live in the same stylesheet without clashing.)
   ============================================================ */
.awc-section{ background:var(--mist-100); }
.awc-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:60px;
  align-items:center;
}

/* ---------- Scroll-reveal ---------- */
.awc-js .awc-reveal:not(.is-in){ opacity:0; }
.awc-reveal.is-in{ animation:awc-rise .8s cubic-bezier(.2,.8,.2,1) var(--d, 0s) backwards; }

/* ---------- Left: content ---------- */
.awc-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--teal-600);
}
.awc-eyebrow::before{
  content:"";
  width:34px; height:1px;
  background:var(--teal-600);
  display:inline-block;
}
.awc-title{
  font-size:clamp(28px, 3.6vw, 40px);
  font-weight:600;
  line-height:1.22;
  margin:16px 0 18px;
}
.awc-title em{ font-style:italic; color:var(--purple-500); }
.awc-lead{
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.85;
  margin:0 0 28px;
}

.awc-list{
  list-style:none;
  margin:0 0 28px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.awc-item{
  display:flex;
  align-items:center;
  gap:16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:15px 18px;
  min-width:0;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.awc-item .ic{
  flex:0 0 auto;
  width:38px; height:38px;
  border-radius:10px;
  background:var(--teal-600);
  color:#fff;
  font-size:15px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s ease;
}
.awc-item:nth-child(2) .ic{ background:var(--purple-500); }
.awc-item:nth-child(3) .ic{ background:var(--gold-600); }
.awc-item:nth-child(4) .ic{ background:var(--indigo-700); }
.awc-item:nth-child(5) .ic{ background:var(--teal-600); }
.awc-item span.t{
  flex:1 1 auto;
  min-width:0;
  font-family:var(--font-body);
  font-size:14px;
  font-weight:500;
  color:var(--indigo-900);
  line-height:1.5;
}
@media (hover:hover){
  .awc-item:hover{
    border-color:var(--teal-400);
    transform:translateX(6px);
    box-shadow:var(--shadow-soft);
  }
  .awc-item:hover .ic{ transform:rotate(-8deg) scale(1.08); }
}

.awc-closing{
  display:flex;
  gap:14px;
  align-items:flex-start;
  border-left:3px solid var(--gold-500);
  padding-left:18px;
}
.awc-closing p{
  font-family:var(--font-display);
  font-style:italic;
  font-size:16px;
  line-height:1.7;
  color:var(--indigo-900);
  margin:0;
}

/* ---------- Right: image ---------- */
.awc-media{ position:relative; }
.awc-media::before{                 /* teal outline accent, top-right */
  content:"";
  position:absolute;
  top:-18px; right:-18px;
  width:56%; height:52%;
  border:2px solid var(--teal-400);
  border-radius:var(--radius-lg);
  z-index:0;
  transition:top .5s ease, right .5s ease;
}
.awc-media::after{                  /* gold block accent, bottom-left */
  content:"";
  position:absolute;
  bottom:-16px; left:-16px;
  width:70px; height:70px;
  background:var(--gold-500);
  border-radius:var(--radius-md);
  z-index:0;
}
.awc-frame{
  position:relative;
  z-index:1;
  aspect-ratio:4 / 4.8;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--mist-200);
  box-shadow:var(--shadow-strong);
}
.awc-frame img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
@media (hover:hover){
  .awc-media:hover .awc-frame img{ transform:scale(1.06); }
  .awc-media:hover::before{ top:-24px; right:-24px; }
}

.awc-badge{                         /* floating badge, bottom-right overlapping the image */
  position:absolute;
  right:-20px;
  bottom:30px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--indigo-900);
  border-radius:var(--radius-md);
  padding:14px 20px 14px 14px;
  box-shadow:var(--shadow-strong);
  animation:awc-float 4.4s ease-in-out infinite;
}
.awc-badge .ic{
  flex:0 0 auto;
  width:40px; height:40px;
  border-radius:11px;
  background:var(--gold-500);
  color:var(--indigo-900);
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
}
.awc-badge .txt{
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:700;
  color:#fff;
  line-height:1.35;
  max-width:130px;
}

/* ---------- Keyframes ---------- */
@keyframes awc-rise{
  from{ opacity:0; transform:translateY(30px); }
  to{ opacity:1; transform:none; }
}
@keyframes awc-float{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .awc-grid{ grid-template-columns:1fr; gap:56px; }
  .awc-media{ order:-1; max-width:480px; margin:0 auto; }
}
@media (max-width:575.98px){
  .awc-item{ padding:13px 15px; gap:12px; }
  .awc-item .ic{ width:34px; height:34px; font-size:13px; }
  .awc-badge{ right:8px; bottom:-18px; padding:11px 16px 11px 10px; }
  .awc-badge .ic{ width:36px; height:36px; font-size:14px; }
  .awc-badge .txt{ font-size:11.5px; max-width:110px; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .awc-section *,
  .awc-section *::before,
  .awc-section *::after{
    animation:none !important;
    transition:none !important;
  }
  .awc-js .awc-reveal:not(.is-in){ opacity:1; }
}

/* ============================================================
   ABOUT US PAGE — Without MedPro Ascend (image left · content right)
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only. Includes its own responsive + motion rules.
   All class names start with  wma-  so nothing else is affected.
   ============================================================ */
.wma-section{ background:var(--paper-0); }
.wma-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:60px;
  align-items:center;
}

/* ---------- Scroll-reveal ---------- */
.wma-js .wma-reveal:not(.is-in){ opacity:0; }
.wma-reveal.is-in{ animation:wma-rise .8s cubic-bezier(.2,.8,.2,1) var(--d, 0s) backwards; }

/* ---------- Left: image ---------- */
.wma-media{ position:relative; }
.wma-media::before{                 /* muted grey outline accent, top-left — tone matches the "problem" half */
  content:"";
  position:absolute;
  top:-18px; left:-18px;
  width:56%; height:52%;
  border:2px solid var(--line);
  border-radius:var(--radius-lg);
  z-index:0;
}
.wma-media::after{                  /* teal block accent, bottom-right — signals the turn toward the solution */
  content:"";
  position:absolute;
  bottom:-16px; right:-16px;
  width:70px; height:70px;
  background:var(--teal-600);
  border-radius:var(--radius-md);
  z-index:0;
}
.wma-frame{
  position:relative;
  z-index:1;
  aspect-ratio:4 / 4.8;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--mist-200);
  box-shadow:var(--shadow-strong);
  filter:grayscale(.25);
  transition:filter .5s ease;
}
.wma-frame img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
@media (hover:hover){
  .wma-media:hover .wma-frame{ filter:grayscale(0); }
  .wma-media:hover .wma-frame img{ transform:scale(1.06); }
}

/* ---------- Right: content ---------- */
.wma-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--ink-faint, #9997ab);
}
.wma-eyebrow::before{
  content:"";
  width:34px; height:1px;
  background:var(--ink-faint, #9997ab);
  display:inline-block;
}
.wma-title{
  font-size:clamp(28px, 3.6vw, 40px);
  font-weight:600;
  line-height:1.22;
  margin:16px 0 20px;
}
.wma-title em{ font-style:italic; color:var(--teal-600); }

/* "without" struggle list — muted, slightly subdued tone */
.wma-problems{
  list-style:none;
  margin:0 0 26px;
  padding:0;
  display:flex;
  flex-direction:column;
  gap:10px;
}
.wma-problem{
  display:flex;
  align-items:center;
  gap:14px;
  padding:12px 16px;
  background:var(--mist-100);
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  min-width:0;
  transition:transform .3s ease, border-color .3s ease;
}
.wma-problem .ic{
  flex:0 0 auto;
  width:30px; height:30px;
  border-radius:50%;
  background:#fff;
  border:1.5px solid var(--line);
  color:var(--ink-faint, #9997ab);
  font-size:12px;
  display:flex; align-items:center; justify-content:center;
}
.wma-problem span.t{
  flex:1 1 auto;
  min-width:0;
  font-size:13.5px;
  font-weight:500;
  color:var(--ink-600);
  line-height:1.55;
}
@media (hover:hover){
  .wma-problem:hover{ border-color:var(--ink-faint, #9997ab); transform:translateX(4px); }
}

/* solution callout — the turn toward MedPro Ascend */
.wma-solution{
  position:relative;
  overflow:hidden;
  background:var(--indigo-900);
  border-radius:var(--radius-lg);
  padding:28px 28px 26px;
}
.wma-solution > *{ position:relative; z-index:1; }
.wma-solution::before{
  content:"";
  position:absolute;
  top:-60px; right:-60px;
  width:150px; height:150px;
  border:2px dashed rgba(255,255,255,0.12);
  border-radius:50%;
  animation:wma-spin 40s linear infinite;
}
.wma-solution-tag{
  display:inline-flex;
  align-items:center;
  gap:8px;
  font-family:var(--font-utility);
  font-size:11.5px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--gold-500);
  margin-bottom:12px;
}
.wma-solution p{
  color:rgba(255,255,255,0.84);
  font-size:14.5px;
  line-height:1.85;
  margin:0;
}
.wma-solution p strong{ color:#fff; font-weight:700; }

/* ---------- Keyframes ---------- */
@keyframes wma-rise{
  from{ opacity:0; transform:translateY(30px); }
  to{ opacity:1; transform:none; }
}
@keyframes wma-spin{ to{ transform:rotate(360deg); } }

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .wma-grid{ grid-template-columns:1fr; gap:48px; }
  .wma-media{ max-width:480px; margin:0 auto; }
}
@media (max-width:575.98px){
  .wma-problem{ padding:11px 14px; gap:12px; }
  .wma-solution{ padding:24px 20px 22px; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .wma-section *,
  .wma-section *::before,
  .wma-section *::after{
    animation:none !important;
    transition:none !important;
  }
  .wma-js .wma-reveal:not(.is-in){ opacity:1; }
}

/* ============================================================
   MR TRAINING PAGE — Banner (content left · quick enquiry form right)
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only — the background photo gets one solid tint,
   not a gradient. All class names start with  mrt-  so nothing
   else is affected.
   ============================================================ */
.mrt-hero{
  position:relative;
  overflow:hidden;
  padding:90px 0 80px;
  background-image:url('https://images.unsplash.com/photo-1551836022-d5d88e9218df?q=80&w=1920&auto=format&fit=crop');
  background-size:cover;
  background-position:center;
}
.mrt-hero::before{                  /* solid tint, not a gradient */
  content:"";
  position:absolute;
  inset:0;
  background:rgba(22,14,60,0.89);
}

/* ---------- Floating sparks + paper plane (decorative, aria-hidden) ---------- */
.mrt-trail{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.mrt-trail .spark{
  position:absolute;
  bottom:-40px;
  color:var(--gold-500);
  opacity:0;
  animation:mrt-rise linear infinite;
}
.mrt-trail .plane{
  position:absolute;
  bottom:-60px;
  right:12%;
  color:rgba(255,255,255,0.5);
  font-size:20px;
  animation:mrt-plane 14s ease-in infinite;
}
@keyframes mrt-rise{
  0%{ transform:translateY(0) translateX(0) scale(.6) rotate(0deg); opacity:0; }
  12%{ opacity:.85; }
  85%{ opacity:.4; }
  100%{ transform:translateY(-85vh) translateX(32px) scale(1.05) rotate(35deg); opacity:0; }
}
@keyframes mrt-plane{
  0%{ transform:translateY(0) translateX(0) rotate(-40deg); opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  100%{ transform:translateY(-60vh) translateX(-50px) rotate(-40deg); opacity:0; }
}

/* ---------- Grid ---------- */
.mrt-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:56px;
  align-items:center;
}

/* ---------- Entrance animation (runs on load, not on scroll — this is the hero) ---------- */
.mrt-enter{ opacity:0; animation:mrt-up .8s cubic-bezier(.2,.8,.2,1) var(--d, 0s) forwards; }
@media (prefers-reduced-motion:reduce){
  .mrt-enter{ opacity:1; animation:none; }
}

/* ---------- Left: content ---------- */
.mrt-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gold-500);
}
.mrt-eyebrow::before{
  content:"";
  width:34px; height:1px;
  background:var(--gold-500);
  display:inline-block;
}
.mrt-title{
  color:#fff;
  font-size:clamp(28px, 3.6vw, 44px);
  font-weight:600;
  line-height:1.18;
  margin:20px 0 20px;
}
.mrt-title em{ font-style:italic; color:var(--gold-500); }
.mrt-sub{
  color:rgba(255,255,255,0.8);
  font-size:16px;
  line-height:1.85;
  margin:0 0 34px;
  max-width:560px;
}

.mrt-btns{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:34px;
}
.mrt-btn-primary, .mrt-btn-secondary{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-utility);
  font-weight:700;
  font-size:14.5px;
  padding:16px 30px;
  border-radius:50px;
  transition:transform .25s ease, gap .25s ease, background .25s ease, border-color .25s ease;
}
.mrt-btn-primary{
  background:var(--gold-500);
  color:var(--indigo-900);
  box-shadow:0 14px 30px -14px rgba(240,169,58,0.7);
}
.mrt-btn-primary:hover{
  background:#ffbf52;
  color:var(--indigo-900);
  transform:translateY(-3px);
  gap:14px;
}
.mrt-btn-secondary{
  background:transparent;
  border:1.5px solid rgba(255,255,255,0.45);
  color:#fff;
}
.mrt-btn-secondary:hover{
  border-color:#fff;
  background:rgba(255,255,255,0.1);
  color:#fff;
  transform:translateY(-3px);
  gap:14px;
}

.mrt-tags{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0; padding:0;
}
.mrt-tags li{
  display:flex;
  align-items:center;
  gap:7px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  color:rgba(255,255,255,0.85);
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:50px;
  padding:8px 16px;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.mrt-tags li i{ font-size:10px; color:var(--gold-500); }
.mrt-tags li:hover{
  background:rgba(255,255,255,0.16);
  border-color:rgba(255,255,255,0.4);
  transform:translateY(-2px);
}

/* ---------- Right: quick enquiry form card ---------- */
.mrt-form-card{
  background:#fff;
  border-radius:var(--radius-lg);
  padding:34px 30px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,0.5);
  border-top:5px solid var(--gold-500);
}
.mrt-form-card h3{
  font-size:19px;
  font-weight:600;
  color:var(--indigo-900);
  margin:0 0 4px;
}
.mrt-form-card .sub{
  font-size:13px;
  color:var(--ink-600);
  margin:0 0 22px;
}
.mrt-form .form-row{ margin-bottom:14px; }
.mrt-field{ position:relative; }
.mrt-field .f-ic{
  position:absolute;
  left:16px;
  top:16px;
  color:var(--teal-600);
  font-size:14px;
  z-index:2;
}
.mrt-field input,
.mrt-field select{
  width:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px 14px 44px;
  font-family:var(--font-body);
  font-size:14px;
  color:var(--ink-900);
  outline:none;
  appearance:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.mrt-field select{ cursor:pointer; }
.mrt-field.select-field::after{
  content:"\f078";
  font-family:"Font Awesome 6 Free";
  font-weight:900;
  font-size:11px;
  color:var(--ink-600);
  position:absolute;
  right:16px; top:17px;
  pointer-events:none;
}
.mrt-field input::placeholder{ color:var(--ink-faint, #9997ab); }
.mrt-field input:focus,
.mrt-field select:focus{
  border-color:var(--teal-600);
  box-shadow:0 0 0 3px rgba(27,143,148,0.12);
}

.mrt-submit{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--indigo-900);
  color:#fff;
  border:none;
  font-family:var(--font-utility);
  font-weight:700;
  font-size:14.5px;
  padding:16px 20px;
  border-radius:10px;
  cursor:pointer;
  margin-top:6px;
  transition:background .25s ease, transform .25s ease, gap .25s ease;
}
.mrt-submit:hover{ background:var(--purple-500); transform:translateY(-2px); gap:14px; }

.mrt-form-note{
  display:flex;
  align-items:center;
  gap:8px;
  justify-content:center;
  margin-top:16px;
  font-family:var(--font-utility);
  font-size:11.5px;
  color:var(--ink-600);
}
.mrt-form-note i{ color:var(--teal-600); font-size:11px; }

/* ---------- Keyframes ---------- */
@keyframes mrt-up{
  from{ opacity:0; transform:translateY(26px); }
  to{ opacity:1; transform:none; }
}

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .mrt-grid{ grid-template-columns:1fr; gap:40px; }
  .mrt-sub{ max-width:none; }
}
@media (max-width:575.98px){
  .mrt-hero{ padding:70px 0 60px; }
  .mrt-btns{ flex-direction:column; align-items:stretch; }
  .mrt-btn-primary, .mrt-btn-secondary{ justify-content:center; }
  .mrt-form-card{ padding:28px 22px; }
}

/* ============================================================
   MR TRAINING PAGE — The Career Gap (image left · content right)
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only. Includes its own responsive + motion rules.
   All class names start with  gap-  so nothing else is affected.
   ============================================================ */
.gap-section{ background:var(--mist-100); }
.gap-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:60px;
  align-items:center;
}

/* ---------- Scroll-reveal ---------- */
.gap-js .gap-reveal:not(.is-in){ opacity:0; }
.gap-reveal.is-in{ animation:gap-rise .8s cubic-bezier(.2,.8,.2,1) var(--d, 0s) backwards; }

/* ---------- Left: image ---------- */
.gap-media{ position:relative; }
.gap-media::before{                 /* teal outline accent, top-left */
  content:"";
  position:absolute;
  top:-18px; left:-18px;
  width:56%; height:52%;
  border:2px solid var(--teal-400);
  border-radius:var(--radius-lg);
  z-index:0;
  transition:top .5s ease, left .5s ease;
}
.gap-media::after{                  /* gold block accent, bottom-right */
  content:"";
  position:absolute;
  bottom:-16px; right:-16px;
  width:70px; height:70px;
  background:var(--gold-500);
  border-radius:var(--radius-md);
  z-index:0;
}
.gap-frame{
  position:relative;
  z-index:1;
  aspect-ratio:4 / 4.8;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--mist-200);
  box-shadow:var(--shadow-strong);
}
.gap-frame img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
@media (hover:hover){
  .gap-media:hover .gap-frame img{ transform:scale(1.06); }
  .gap-media:hover::before{ top:-24px; left:-24px; }
}

.gap-badge{                         /* floating badge, bottom-left overlapping the image */
  position:absolute;
  left:-20px;
  bottom:30px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--indigo-900);
  border-radius:var(--radius-md);
  padding:14px 20px 14px 14px;
  box-shadow:var(--shadow-strong);
  animation:gap-float 4.4s ease-in-out infinite;
}
.gap-badge .ic{
  flex:0 0 auto;
  width:40px; height:40px;
  border-radius:11px;
  background:var(--gold-500);
  color:var(--indigo-900);
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
}
.gap-badge .txt{
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:700;
  color:#fff;
  line-height:1.35;
  max-width:130px;
}

/* ---------- Right: content ---------- */
.gap-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--teal-600);
}
.gap-eyebrow::before{
  content:"";
  width:34px; height:1px;
  background:var(--teal-600);
  display:inline-block;
}
.gap-title{
  font-size:clamp(27px, 3.4vw, 38px);
  font-weight:600;
  line-height:1.25;
  margin:16px 0 20px;
}
.gap-title em{ font-style:italic; color:var(--purple-500); }
.gap-text{
  color:var(--ink-600);
  font-size:15px;
  line-height:1.85;
  margin:0 0 24px;
}

/* skill chips (from "requires more than product knowledge") */
.gap-chips{
  list-style:none;
  margin:0 0 26px;
  padding:0;
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:12px;
}
.gap-chip{
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:13px 15px;
  min-width:0;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.gap-chip .ic{
  flex:0 0 auto;
  width:34px; height:34px;
  border-radius:9px;
  background:var(--teal-600);
  color:#fff;
  font-size:13.5px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s ease;
}
.gap-chip:nth-child(2) .ic{ background:var(--purple-500); }
.gap-chip:nth-child(3) .ic{ background:var(--gold-600); }
.gap-chip:nth-child(4) .ic{ background:var(--indigo-700); }
.gap-chip:nth-child(5) .ic{ background:var(--teal-600); }
.gap-chip:nth-child(6) .ic{ background:var(--purple-500); }
.gap-chip span.t{
  flex:1 1 auto;
  min-width:0;
  font-family:var(--font-utility);
  font-size:13px;
  font-weight:600;
  color:var(--indigo-900);
  line-height:1.4;
}
@media (hover:hover){
  .gap-chip:hover{
    border-color:var(--teal-400);
    transform:translateY(-4px);
    box-shadow:var(--shadow-soft);
  }
  .gap-chip:hover .ic{ transform:rotate(-8deg) scale(1.08); }
}

/* highlighted closing line */
.gap-closing{
  display:flex;
  align-items:center;
  gap:16px;
  background:var(--indigo-900);
  border-radius:var(--radius-md);
  padding:20px 24px;
}
.gap-closing .ic{
  flex:0 0 auto;
  width:44px; height:44px;
  border-radius:12px;
  background:var(--gold-500);
  color:var(--indigo-900);
  font-size:18px;
  display:flex; align-items:center; justify-content:center;
}
.gap-closing p{
  color:#fff;
  font-family:var(--font-display);
  font-style:italic;
  font-size:16px;
  line-height:1.5;
  margin:0;
}
.gap-closing p strong{ font-style:normal; color:var(--gold-500); font-weight:700; }

/* ---------- Keyframes ---------- */
@keyframes gap-rise{
  from{ opacity:0; transform:translateY(30px); }
  to{ opacity:1; transform:none; }
}
@keyframes gap-float{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .gap-grid{ grid-template-columns:1fr; gap:56px; }
  .gap-media{ max-width:480px; margin:0 auto; }
}
@media (max-width:575.98px){
  .gap-chips{ grid-template-columns:1fr; }
  .gap-badge{ left:8px; bottom:-18px; padding:11px 16px 11px 10px; }
  .gap-badge .ic{ width:36px; height:36px; font-size:14px; }
  .gap-badge .txt{ font-size:11.5px; max-width:110px; }
  .gap-closing{ flex-direction:column; text-align:center; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .gap-section *,
  .gap-section *::before,
  .gap-section *::after{
    animation:none !important;
    transition:none !important;
  }
  .gap-js .gap-reveal:not(.is-in){ opacity:1; }
}

/* ============================================================
   MR TRAINING PAGE — Why MedPro Ascend (3 pillars + connectors)
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only. Includes its own responsive + motion rules.
   All class names start with  pil-  so nothing else is affected.
   ============================================================ */
.pil-section{ background:var(--paper-0); }

/* ---------- Scroll-reveal ---------- */
.pil-js .pil-reveal:not(.is-in){ opacity:0; }
.pil-reveal.is-in{ animation:pil-rise .8s cubic-bezier(.2,.8,.2,1) var(--d, 0s) backwards; }

/* ---------- Heading ---------- */
.pil-head{
  text-align:center;
  max-width:720px;
  margin:0 auto 54px;
}
.pil-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--teal-600);
}
.pil-eyebrow::before,
.pil-eyebrow::after{
  content:"";
  width:34px; height:1px;
  background:var(--teal-600);
  display:inline-block;
}
.pil-title{
  font-size:clamp(28px, 3.6vw, 40px);
  font-weight:600;
  line-height:1.22;
  margin:16px 0 14px;
}
.pil-title em{ font-style:italic; color:var(--purple-500); }
.pil-lead{
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.8;
  margin:0;
}

/* ---------- Pillar row ---------- */
.pil-row{
  display:flex;
  align-items:stretch;
  gap:0;
}
.pil-card{
  --c:var(--teal-600);
  flex:1;
  min-width:0;
  position:relative;
  overflow:hidden;
  background:#fff;
  border:1px solid var(--line);
  border-top:4px solid var(--c);
  border-radius:var(--radius-lg);
  padding:32px 26px 30px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.pil-row > .pil-card:nth-of-type(2){ --c:var(--purple-500); }
.pil-row > .pil-card:nth-of-type(3){ --c:var(--gold-600); }

.pil-card .ic{
  width:58px; height:58px;
  border-radius:16px;
  background:var(--c);
  color:#fff;
  font-size:23px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:20px;
  transition:transform .4s ease;
}
.pil-card h3{
  font-size:19px;
  font-weight:600;
  color:var(--indigo-900);
  margin:0 0 18px;
  line-height:1.3;
}
.pil-card ul{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:11px;
}
.pil-card li{
  display:flex;
  align-items:flex-start;
  gap:11px;
  font-size:14px;
  line-height:1.55;
  color:var(--ink-600);
  font-weight:500;
  transform:translateX(0);
  transition:transform .3s ease, color .3s ease;
}
.pil-card li .dot{
  flex:0 0 auto;
  width:8px; height:8px;
  margin-top:6px;
  border-radius:2px;
  background:var(--c);
  transition:transform .3s ease;
}

@media (hover:hover){
  .pil-card:hover{
    transform:translateY(-8px);
    border-color:var(--c);
    box-shadow:var(--shadow-strong);
  }
  .pil-card:hover .ic{ transform:rotate(-8deg) scale(1.08); }
  /* cascading stagger: each list item nudges right a beat after the one before it */
  .pil-card:hover li{ transform:translateX(6px); color:var(--indigo-900); }
  .pil-card li:nth-child(1){ transition-delay:0s; }
  .pil-card li:nth-child(2){ transition-delay:.04s; }
  .pil-card li:nth-child(3){ transition-delay:.08s; }
  .pil-card li:nth-child(4){ transition-delay:.12s; }
  .pil-card li:nth-child(5){ transition-delay:.16s; }
  .pil-card li:nth-child(6){ transition-delay:.2s; }
  .pil-card:hover li .dot{ transform:scale(1.3); }
}

/* ---------- Connectors: "+" between pillars ---------- */
.pil-plus{
  flex:0 0 auto;
  width:64px;
  display:flex;
  align-items:center;
  justify-content:center;
}
.pil-plus span{
  font-family:var(--font-display);
  font-size:30px;
  font-weight:600;
  color:var(--gold-500);
  animation:pil-pulse 2.6s ease-in-out infinite;
}
.pil-plus:nth-of-type(4) span{ animation-delay:.4s; }

/* ---------- Closing statement ---------- */
.pil-closing{
  text-align:center;
  max-width:720px;
  margin:48px auto 0;
  font-family:var(--font-display);
  font-style:italic;
  font-size:clamp(17px, 2vw, 20px);
  line-height:1.6;
  color:var(--indigo-900);
}
.pil-closing strong{
  font-style:normal;
  font-weight:700;
  color:var(--purple-500);
}

/* ---------- Keyframes ---------- */
@keyframes pil-rise{
  from{ opacity:0; transform:translateY(30px); }
  to{ opacity:1; transform:none; }
}
@keyframes pil-pulse{
  0%, 100%{ transform:scale(1); opacity:.85; }
  50%{ transform:scale(1.25); opacity:1; }
}

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .pil-row{ flex-direction:column; gap:20px; }
  .pil-plus{
    width:auto; height:auto;
    transform:rotate(90deg);
    margin:-4px auto;
  }
  .pil-card{ width:100%; }
}
@media (max-width:575.98px){
  .pil-card{ padding:26px 20px 24px; }
  .pil-card .ic{ width:50px; height:50px; font-size:19px; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .pil-section *,
  .pil-section *::before,
  .pil-section *::after{
    animation:none !important;
    transition:none !important;
  }
  .pil-js .pil-reveal:not(.is-in){ opacity:1; }
}

/* ============================================================
   MR TRAINING PAGE — Choose Your Path (2 audience track cards)
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only. Includes its own responsive + motion rules.
   All class names start with  path-  so nothing else is affected.
   ============================================================ */
.path-section{ background:var(--mist-100); }

/* ---------- Scroll-reveal ---------- */
.path-js .path-reveal:not(.is-in){ opacity:0; }
.path-reveal.is-in{ animation:path-rise .8s cubic-bezier(.2,.8,.2,1) var(--d, 0s) backwards; }

/* ---------- Heading ---------- */
.path-head{
  text-align:center;
  max-width:700px;
  margin:0 auto 50px;
}
.path-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--teal-600);
}
.path-eyebrow::before,
.path-eyebrow::after{
  content:"";
  width:34px; height:1px;
  background:var(--teal-600);
  display:inline-block;
}
.path-title{
  font-size:clamp(28px, 3.6vw, 40px);
  font-weight:600;
  line-height:1.22;
  margin:16px 0 0;
}
.path-title em{ font-style:italic; color:var(--purple-500); }

/* ---------- Grid ---------- */
.path-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:30px;
}

.path-card{
  --c:var(--teal-600);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  overflow:hidden;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.path-card.exp{ --c:var(--gold-600); }
@media (hover:hover){
  .path-card:hover{
    transform:translateY(-8px);
    border-color:var(--c);
    box-shadow:var(--shadow-strong);
  }
}

.path-media{
  position:relative;
  height:220px;
  overflow:hidden;
}
.path-media img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
@media (hover:hover){
  .path-card:hover .path-media img{ transform:scale(1.08); }
}
.path-tag{
  position:absolute;
  top:16px; left:16px;
  background:var(--c);
  color:#fff;
  font-family:var(--font-utility);
  font-size:11.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.04em;
  padding:8px 16px;
  border-radius:50px;
}

.path-body{ padding:30px 28px 32px; }
.path-body h3{
  font-size:19.5px;
  font-weight:600;
  color:var(--indigo-900);
  line-height:1.3;
  margin:0 0 12px;
}
.path-body > p{
  color:var(--ink-600);
  font-size:14.5px;
  line-height:1.8;
  margin:0 0 22px;
}

.path-list{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.path-list li{
  display:flex;
  align-items:flex-start;
  gap:13px;
  transform:translateX(0);
  transition:transform .3s ease;
}
.path-list .ic{
  flex:0 0 auto;
  width:30px; height:30px;
  margin-top:1px;
  border-radius:9px;
  background:var(--c);
  color:#fff;
  font-size:12px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s ease;
}
.path-list span.t{
  font-size:13.5px;
  line-height:1.6;
  color:var(--ink-900);
  font-weight:500;
  padding-top:4px;
}
@media (hover:hover){
  .path-card:hover .path-list li{ transform:translateX(5px); }
  .path-list li:nth-child(1){ transition-delay:0s; }
  .path-list li:nth-child(2){ transition-delay:.03s; }
  .path-list li:nth-child(3){ transition-delay:.06s; }
  .path-list li:nth-child(4){ transition-delay:.09s; }
  .path-list li:nth-child(5){ transition-delay:.12s; }
  .path-list li:nth-child(6){ transition-delay:.15s; }
  .path-list li:nth-child(7){ transition-delay:.18s; }
  .path-card:hover .path-list .ic{ transform:rotate(-8deg) scale(1.1); }
}

/* ---------- Keyframes ---------- */
@keyframes path-rise{
  from{ opacity:0; transform:translateY(30px); }
  to{ opacity:1; transform:none; }
}

/* ---------- Responsive ---------- */
@media (max-width:899.98px){
  .path-grid{ grid-template-columns:1fr; gap:26px; }
}
@media (max-width:575.98px){
  .path-media{ height:180px; }
  .path-body{ padding:24px 20px 26px; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .path-section *,
  .path-section *::before,
  .path-section *::after{
    animation:none !important;
    transition:none !important;
  }
  .path-js .path-reveal:not(.is-in){ opacity:1; }
}

/* ============================================================
   MR TRAINING PAGE — What You Will Learn (image + 6-track accordion)
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only. Includes its own responsive + motion rules.
   All class names start with  wyl-  so nothing else is affected.
   ============================================================ */
.wyl-grid{
  display:grid;
  grid-template-columns:0.8fr 1.2fr;
  gap:52px;
  align-items:start;
}

/* ---------- Scroll-reveal ---------- */
.wyl-js .wyl-reveal:not(.is-in){ opacity:0; }
.wyl-reveal.is-in{ animation:wyl-rise .8s cubic-bezier(.2,.8,.2,1) var(--d, 0s) backwards; }

/* ---------- Heading (full width, above the grid) ---------- */
.wyl-head{
  text-align:center;
  max-width:720px;
  margin:0 auto 50px;
}
.wyl-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--teal-600);
}
.wyl-eyebrow::before,
.wyl-eyebrow::after{
  content:"";
  width:34px; height:1px;
  background:var(--teal-600);
  display:inline-block;
}
.wyl-title{
  font-size:clamp(28px, 3.6vw, 40px);
  font-weight:600;
  line-height:1.22;
  margin:16px 0 0;
}
.wyl-title em{ font-style:italic; color:var(--purple-500); }

/* ---------- Left: sticky image ---------- */
.wyl-media{ position:relative; }
.wyl-media::before{                 /* teal outline accent, top-right */
  content:"";
  position:absolute;
  top:-16px; right:-16px;
  width:56%; height:50%;
  border:2px solid var(--teal-400);
  border-radius:var(--radius-lg);
  z-index:0;
}
.wyl-media::after{                  /* gold block accent, bottom-left */
  content:"";
  position:absolute;
  bottom:-14px; left:-14px;
  width:64px; height:64px;
  background:var(--gold-500);
  border-radius:var(--radius-md);
  z-index:0;
}
.wyl-frame{
  position:relative;
  z-index:1;
  aspect-ratio:4 / 5;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--mist-200);
  box-shadow:var(--shadow-strong);
}
.wyl-frame img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
@media (hover:hover){
  .wyl-media:hover .wyl-frame img{ transform:scale(1.06); }
}
.wyl-badge{                         /* floating skill-count badge */
  position:absolute;
  right:-18px;
  bottom:28px;
  z-index:2;
  background:var(--indigo-900);
  border-radius:var(--radius-md);
  padding:16px 22px;
  box-shadow:var(--shadow-strong);
  text-align:left;
  animation:wyl-float 4.4s ease-in-out infinite;
}
.wyl-badge .num{
  display:block;
  font-family:var(--font-display);
  font-size:30px;
  font-weight:600;
  color:var(--gold-500);
  line-height:1;
}
.wyl-badge .lbl{
  display:block;
  font-family:var(--font-utility);
  font-size:11px;
  font-weight:600;
  letter-spacing:0.04em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.72);
  margin-top:5px;
}
@media (min-width:992px){
  .wyl-media{ position:sticky; top:24px; }
}

/* ---------- Right: accordion of 6 learning tracks ---------- */
.wyl-accordion{ display:flex; flex-direction:column; gap:14px; }

.wyl-track{
  --c:var(--teal-600);
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  overflow:hidden;
  transition:border-color .3s ease, box-shadow .3s ease;
}
.wyl-track:nth-child(2){ --c:var(--purple-500); }
.wyl-track:nth-child(3){ --c:var(--gold-600); }
.wyl-track:nth-child(4){ --c:var(--indigo-700); }
.wyl-track:nth-child(5){ --c:var(--teal-600); }
.wyl-track:nth-child(6){ --c:var(--purple-500); }
.wyl-track.active{ border-color:var(--c); box-shadow:var(--shadow-soft); }

.wyl-track-head{
  width:100%;
  display:flex;
  align-items:center;
  gap:16px;
  background:none;
  border:none;
  padding:18px 20px;
  cursor:pointer;
  text-align:left;
  transition:background .25s ease;
}
.wyl-track-head:hover{ background:var(--mist-100); }

.wyl-track-no{
  flex:0 0 auto;
  font-family:var(--font-display);
  font-size:15px;
  font-weight:600;
  color:var(--c);
  width:22px;
}
.wyl-track-ic{
  flex:0 0 auto;
  width:42px; height:42px;
  border-radius:12px;
  background:var(--c);
  color:#fff;
  font-size:16px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .35s ease;
}
.wyl-track.active .wyl-track-ic{ transform:rotate(-8deg) scale(1.06); }

.wyl-track-title{
  flex:1;
  min-width:0;
  font-family:var(--font-utility);
  font-size:15.5px;
  font-weight:700;
  color:var(--indigo-900);
  line-height:1.35;
}
.wyl-track-count{
  flex:0 0 auto;
  font-family:var(--font-utility);
  font-size:11px;
  font-weight:700;
  color:var(--c);
  background:var(--mist-100);
  border-radius:50px;
  padding:5px 11px;
  white-space:nowrap;
}

/* plus / minus toggle, pure CSS — no icon font needed here */
.wyl-toggle{
  position:relative;
  flex:0 0 auto;
  width:24px; height:24px;
  border-radius:50%;
  background:var(--mist-100);
}
.wyl-toggle::before,
.wyl-toggle::after{
  content:"";
  position:absolute;
  top:50%; left:50%;
  background:var(--c);
  transform:translate(-50%,-50%);
  transition:transform .25s ease, opacity .25s ease;
}
.wyl-toggle::before{ width:10px; height:2px; }
.wyl-toggle::after{ width:2px; height:10px; }
.wyl-track.active .wyl-toggle::after{ transform:translate(-50%,-50%) rotate(90deg); opacity:0; }

/* smooth collapse using the grid-rows technique — no JS height math needed */
.wyl-panel-wrap{
  display:grid;
  grid-template-rows:0fr;
  transition:grid-template-rows .45s cubic-bezier(.2,.8,.2,1);
}
.wyl-track.active .wyl-panel-wrap{ grid-template-rows:1fr; }
.wyl-panel-inner{ overflow:hidden; }

.wyl-list{
  list-style:none;
  margin:0;
  padding:4px 20px 20px 78px;
  display:flex;
  flex-direction:column;
  gap:9px;
}
.wyl-list li{
  position:relative;
  padding-left:16px;
  font-size:13.5px;
  line-height:1.6;
  color:var(--ink-600);
  transition:color .2s ease, transform .2s ease;
}
.wyl-list li::before{
  content:"";
  position:absolute;
  left:0; top:7px;
  width:6px; height:6px;
  border-radius:2px;
  background:var(--c);
}
@media (hover:hover){
  .wyl-list li:hover{ color:var(--indigo-900); transform:translateX(4px); }
}

/* ---------- Keyframes ---------- */
@keyframes wyl-rise{
  from{ opacity:0; transform:translateY(30px); }
  to{ opacity:1; transform:none; }
}
@keyframes wyl-float{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .wyl-grid{ grid-template-columns:1fr; gap:46px; }
  .wyl-media{ max-width:420px; margin:0 auto; }
}
@media (max-width:575.98px){
  .wyl-track-head{ padding:15px 14px; gap:12px; }
  .wyl-track-ic{ width:36px; height:36px; font-size:14px; }
  .wyl-track-title{ font-size:14px; }
  .wyl-track-count{ display:none; }
  .wyl-list{ padding:4px 16px 16px 52px; }
  .wyl-badge{ right:8px; bottom:-16px; padding:13px 18px; }
  .wyl-badge .num{ font-size:24px; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .wyl-section *,
  .wyl-section *::before,
  .wyl-section *::after{
    animation:none !important;
    transition:none !important;
  }
  .wyl-js .wyl-reveal:not(.is-in){ opacity:1; }
}

/* ============================================================
   MR TRAINING PAGE — Signature Differentiator (flagship dark panel)
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only. Includes its own responsive + motion rules.
   All class names start with  sig-  so nothing else is affected.
   ============================================================ */
.sig-section{
  position:relative;
  overflow:hidden;
  background:var(--indigo-900);
  color:#fff;
}
.sig-section::before{               /* slowly rotating dashed ring, top-right */
  content:"";
  position:absolute;
  top:-140px; right:-130px;
  width:360px; height:360px;
  border:2px dashed rgba(240,169,58,0.16);
  border-radius:50%;
  animation:sig-spin 55s linear infinite;
  pointer-events:none;
}
.sig-section::after{                /* soft solid circle, bottom-left */
  content:"";
  position:absolute;
  bottom:-90px; left:-90px;
  width:220px; height:220px;
  background:rgba(255,255,255,0.035);
  border-radius:50%;
  pointer-events:none;
}

.sig-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:60px;
  align-items:center;
}

/* ---------- Scroll-reveal ---------- */
.sig-js .sig-reveal:not(.is-in){ opacity:0; }
.sig-reveal.is-in{ animation:sig-rise .8s cubic-bezier(.2,.8,.2,1) var(--d, 0s) backwards; }

/* ---------- Left: content ---------- */
.sig-tag{
  display:inline-flex;
  align-items:center;
  gap:9px;
  background:rgba(240,169,58,0.14);
  border:1px solid rgba(240,169,58,0.4);
  color:var(--gold-500);
  font-family:var(--font-utility);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  padding:9px 18px;
  border-radius:50px;
}
.sig-title{
  color:#fff;
  font-size:clamp(27px, 3.4vw, 38px);
  font-weight:600;
  line-height:1.24;
  margin:22px 0 20px;
}
.sig-lead{
  color:rgba(255,255,255,0.78);
  font-size:15.5px;
  line-height:1.9;
  margin:0 0 30px;
  max-width:560px;
}

.sig-includes{
  display:flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:rgba(255,255,255,0.6);
  margin-bottom:16px;
}
.sig-includes::after{
  content:"";
  flex:1;
  height:1px;
  background:rgba(255,255,255,0.14);
}

.sig-list{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:12px;
}
.sig-item{
  display:flex;
  align-items:center;
  gap:16px;
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius-md);
  padding:16px 18px;
  min-width:0;
  transition:background .3s ease, border-color .3s ease, transform .3s ease;
}
.sig-item .ic{
  flex:0 0 auto;
  width:40px; height:40px;
  border-radius:11px;
  background:var(--gold-500);
  color:var(--indigo-900);
  font-size:15.5px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .3s ease;
}
.sig-item span.t{
  flex:1 1 auto;
  min-width:0;
  font-size:14px;
  font-weight:500;
  line-height:1.55;
  color:#fff;
}
@media (hover:hover){
  .sig-item:hover{
    background:rgba(255,255,255,0.1);
    border-color:rgba(240,169,58,0.45);
    transform:translateX(6px);
  }
  .sig-item:hover .ic{ transform:rotate(-8deg) scale(1.08); }
}

/* ---------- Right: image (gold framing — signature/premium accent) ---------- */
.sig-media{ position:relative; }
.sig-media::before{
  content:"";
  position:absolute;
  top:-18px; right:-18px;
  width:58%; height:54%;
  border:2px solid var(--gold-500);
  border-radius:var(--radius-lg);
  z-index:0;
}
.sig-frame{
  position:relative;
  z-index:1;
  aspect-ratio:4 / 4.8;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--indigo-700);
  box-shadow:0 30px 70px -20px rgba(0,0,0,0.55);
}
.sig-frame img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
@media (hover:hover){
  .sig-media:hover .sig-frame img{ transform:scale(1.06); }
}
.sig-badge{
  position:absolute;
  left:-20px;
  bottom:30px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:12px;
  background:#fff;
  border-radius:var(--radius-md);
  padding:14px 20px 14px 14px;
  box-shadow:0 20px 40px -14px rgba(0,0,0,0.4);
  animation:sig-float 4.4s ease-in-out infinite;
}
.sig-badge .ic{
  flex:0 0 auto;
  width:40px; height:40px;
  border-radius:11px;
  background:var(--indigo-900);
  color:var(--gold-500);
  display:flex; align-items:center; justify-content:center;
  font-size:16px;
}
.sig-badge .txt{
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:700;
  color:var(--indigo-900);
  line-height:1.35;
  max-width:130px;
}

/* ---------- Keyframes ---------- */
@keyframes sig-rise{
  from{ opacity:0; transform:translateY(30px); }
  to{ opacity:1; transform:none; }
}
@keyframes sig-spin{ to{ transform:rotate(360deg); } }
@keyframes sig-float{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-6px); }
}

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .sig-grid{ grid-template-columns:1fr; gap:50px; }
  .sig-media{ order:-1; max-width:460px; margin:0 auto; }
  .sig-lead{ max-width:none; }
}
@media (max-width:575.98px){
  .sig-item{ padding:14px 15px; gap:13px; }
  .sig-badge{ left:8px; bottom:-18px; padding:11px 16px 11px 10px; }
  .sig-badge .txt{ font-size:11.5px; max-width:110px; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .sig-section *,
  .sig-section *::before,
  .sig-section *::after{
    animation:none !important;
    transition:none !important;
  }
  .sig-js .sig-reveal:not(.is-in){ opacity:1; }
}

/* ============================================================
   MR TRAINING PAGE — Learn by Doing (8-card activity grid)
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only. Includes its own responsive + motion rules.
   All class names start with  lbd-  so nothing else is affected.
   ============================================================ */
.lbd-section{ background:var(--paper-0); }

/* ---------- Scroll-reveal ---------- */
.lbd-js .lbd-reveal:not(.is-in){ opacity:0; }
.lbd-reveal.is-in{ animation:lbd-rise .7s cubic-bezier(.2,.8,.2,1) var(--d, 0s) backwards; }

/* ---------- Heading ---------- */
.lbd-head{
  text-align:center;
  max-width:700px;
  margin:0 auto 50px;
}
.lbd-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--teal-600);
}
.lbd-eyebrow::before,
.lbd-eyebrow::after{
  content:"";
  width:34px; height:1px;
  background:var(--teal-600);
  display:inline-block;
}
.lbd-title{
  font-size:clamp(28px, 3.6vw, 40px);
  font-weight:600;
  line-height:1.22;
  margin:16px 0 14px;
}
.lbd-title em{ font-style:italic; color:var(--purple-500); }
.lbd-lead{
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.8;
  margin:0;
}

/* ---------- Grid ---------- */
.lbd-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  grid-auto-rows:180px;
  gap:18px;
}
.lbd-card{
  --c:var(--teal-600);
  position:relative;
  overflow:hidden;
  border-radius:var(--radius-md);
  display:flex;
  flex-direction:column;
  padding:20px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.lbd-card:nth-of-type(4n+2){ --c:var(--purple-500); }
.lbd-card:nth-of-type(4n+3){ --c:var(--gold-600); }
.lbd-card:nth-of-type(4n+4){ --c:var(--indigo-700); }

/* plain icon cards */
.lbd-card.plain{
  background:#fff;
  border:1px solid var(--line);
  justify-content:flex-end;
}
.lbd-card.plain .lbd-no{
  position:absolute;
  top:16px; right:18px;
  font-family:var(--font-display);
  font-size:13px;
  font-weight:600;
  color:var(--c);
  opacity:.55;
}
.lbd-card.plain .ic{
  width:48px; height:48px;
  border-radius:13px;
  background:var(--c);
  color:#fff;
  font-size:18px;
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px;
  transition:transform .35s ease;
}
.lbd-card.plain .t{
  font-family:var(--font-utility);
  font-size:14.5px;
  font-weight:700;
  color:var(--indigo-900);
  line-height:1.35;
}
@media (hover:hover){
  .lbd-card.plain:hover{
    transform:translateY(-6px);
    border-color:var(--c);
    box-shadow:var(--shadow-strong);
  }
  .lbd-card.plain:hover .ic{ transform:rotate(-8deg) scale(1.08); }
}

/* photo cards (bookends: classroom start, field-ready end) */
.lbd-card.photo{
  justify-content:flex-end;
  color:#fff;
}
.lbd-card.photo img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
  z-index:0;
  transition:transform .6s cubic-bezier(.2,.8,.2,1);
}
.lbd-card.photo::before{            /* solid tint, not a gradient */
  content:"";
  position:absolute;
  inset:0;
  background:rgba(22,14,60,0.62);
  z-index:1;
  transition:background .35s ease;
}
.lbd-card.photo > *{ position:relative; z-index:2; }
.lbd-card.photo .tag{
  align-self:flex-start;
  font-family:var(--font-utility);
  font-size:10.5px;
  font-weight:700;
  text-transform:uppercase;
  letter-spacing:0.05em;
  background:var(--gold-500);
  color:var(--indigo-900);
  padding:6px 13px;
  border-radius:50px;
  margin-bottom:auto;
}
.lbd-card.photo .ic{
  width:46px; height:46px;
  border-radius:50%;
  background:rgba(255,255,255,0.14);
  border:1px solid rgba(255,255,255,0.4);
  display:flex; align-items:center; justify-content:center;
  font-size:17px;
  margin-bottom:12px;
}
.lbd-card.photo .t{
  font-family:var(--font-display);
  font-size:18px;
  font-weight:600;
  line-height:1.3;
}
@media (hover:hover){
  .lbd-card.photo:hover img{ transform:scale(1.08); }
  .lbd-card.photo:hover::before{ background:rgba(22,14,60,0.5); }
}

/* ---------- Keyframes ---------- */
@keyframes lbd-rise{
  from{ opacity:0; transform:translateY(30px); }
  to{ opacity:1; transform:none; }
}

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .lbd-grid{ grid-template-columns:repeat(2, 1fr); grid-auto-rows:170px; }
}
@media (max-width:575.98px){
  .lbd-grid{ grid-template-columns:1fr; grid-auto-rows:auto; }
  .lbd-card.plain{ min-height:150px; }
  .lbd-card.photo{ min-height:190px; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .lbd-section *,
  .lbd-section *::before,
  .lbd-section *::after{
    animation:none !important;
    transition:none !important;
  }
  .lbd-js .lbd-reveal:not(.is-in){ opacity:1; }
}

/* ============================================================
   MR TRAINING PAGE — Outcomes (8-item grid + placement banner)
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only. Includes its own responsive + motion rules.
   All class names start with  out-  so nothing else is affected.
   ============================================================ */
.out-section{ background:var(--mist-100); }

/* ---------- Scroll-reveal ---------- */
.out-js .out-reveal:not(.is-in){ opacity:0; }
.out-reveal.is-in{ animation:out-rise .75s cubic-bezier(.2,.8,.2,1) var(--d, 0s) backwards; }

/* ---------- Heading ---------- */
.out-head{
  text-align:center;
  max-width:700px;
  margin:0 auto 14px;
}
.out-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--teal-600);
}
.out-eyebrow::before,
.out-eyebrow::after{
  content:"";
  width:34px; height:1px;
  background:var(--teal-600);
  display:inline-block;
}
.out-title{
  font-size:clamp(28px, 3.6vw, 40px);
  font-weight:600;
  line-height:1.22;
  margin:16px 0 14px;
}
.out-title em{ font-style:italic; color:var(--purple-500); }
.out-lead{
  text-align:center;
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.8;
  max-width:560px;
  margin:0 auto 40px;
}

/* ---------- Outcome grid ---------- */
.out-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:14px;
  margin-bottom:34px;
}
.out-item{
  --c:var(--teal-600);
  display:flex;
  align-items:center;
  gap:16px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:17px 20px;
  min-width:0;
  transition:transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.out-item:nth-child(4n+2){ --c:var(--purple-500); }
.out-item:nth-child(4n+3){ --c:var(--gold-600); }
.out-item:nth-child(4n+4){ --c:var(--indigo-700); }
.out-item .ic{
  flex:0 0 auto;
  width:38px; height:38px;
  border-radius:50%;
  background:var(--c);
  color:#fff;
  font-size:14px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .35s ease;
}
.out-item span.t{
  flex:1 1 auto;
  min-width:0;
  font-size:14px;
  font-weight:500;
  color:var(--indigo-900);
  line-height:1.5;
}
@media (hover:hover){
  .out-item:hover{
    border-color:var(--c);
    transform:translateX(6px);
    box-shadow:var(--shadow-soft);
  }
  .out-item:hover .ic{ transform:scale(1.15); }
}

/* ---------- Placement support banner ---------- */
.out-banner{
  display:flex;
  align-items:center;
  gap:20px;
  flex-wrap:wrap;
  background:var(--indigo-900);
  border-radius:var(--radius-lg);
  padding:26px 28px;
}
.out-banner .ic{
  flex:0 0 auto;
  width:54px; height:54px;
  border-radius:15px;
  background:var(--gold-500);
  color:var(--indigo-900);
  font-size:21px;
  display:flex; align-items:center; justify-content:center;
}
.out-banner-text{ flex:1; min-width:220px; }
.out-banner-text strong{
  display:block;
  font-family:var(--font-utility);
  font-size:15px;
  font-weight:700;
  color:#fff;
  margin-bottom:5px;
}
.out-banner-text p{
  color:rgba(255,255,255,0.75);
  font-size:14px;
  line-height:1.65;
  margin:0;
}

/* ---------- Keyframes ---------- */
@keyframes out-rise{
  from{ opacity:0; transform:translateY(28px); }
  to{ opacity:1; transform:none; }
}

/* ---------- Responsive ---------- */
@media (max-width:767.98px){
  .out-grid{ grid-template-columns:1fr; }
}
@media (max-width:575.98px){
  .out-item{ padding:15px 16px; gap:13px; }
  .out-banner{ padding:22px 20px; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .out-section *,
  .out-section *::before,
  .out-section *::after{
    animation:none !important;
    transition:none !important;
  }
  .out-js .out-reveal:not(.is-in){ opacity:1; }
}

/* ============================================================
   MR TRAINING PAGE — Who Should Join (4 persona cards + closing line)
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only. Includes its own responsive + motion rules.
   All class names start with  who-  so nothing else is affected.
   ============================================================ */
.who-section{ background:var(--paper-0); }

/* ---------- Scroll-reveal ---------- */
.who-js .who-reveal:not(.is-in){ opacity:0; }
.who-reveal.is-in{ animation:who-rise .75s cubic-bezier(.2,.8,.2,1) var(--d, 0s) backwards; }

/* ---------- Heading ---------- */
.who-head{
  text-align:center;
  max-width:700px;
  margin:0 auto 14px;
}
.who-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--purple-500);
}
.who-eyebrow::before,
.who-eyebrow::after{
  content:"";
  width:34px; height:1px;
  background:var(--purple-500);
  display:inline-block;
}
.who-title{
  font-size:clamp(28px, 3.6vw, 40px);
  font-weight:600;
  line-height:1.22;
  margin:16px 0 14px;
}
.who-title em{ font-style:italic; color:var(--teal-600); }
.who-lead{
  text-align:center;
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.8;
  max-width:560px;
  margin:0 auto 40px;
}

/* ---------- Persona grid ---------- */
.who-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:22px;
  margin-bottom:38px;
}
.who-card{
  --c:var(--purple-500);
  display:flex;
  align-items:flex-start;
  gap:18px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:26px 24px;
  transition:transform .35s cubic-bezier(.2,.8,.2,1), box-shadow .35s ease, border-color .35s ease;
}
.who-card:nth-child(2){ --c:var(--teal-600); }
.who-card:nth-child(3){ --c:var(--gold-600); }
.who-card:nth-child(4){ --c:var(--indigo-700); }
.who-card .ic{
  flex:0 0 auto;
  width:50px; height:50px;
  border-radius:14px;
  background:var(--c);
  color:#fff;
  font-size:19px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .35s ease;
}
.who-card p{
  margin:0;
  padding-top:6px;
  font-size:14.5px;
  font-weight:500;
  line-height:1.6;
  color:var(--indigo-900);
}
@media (hover:hover){
  .who-card:hover{
    transform:translateY(-7px);
    border-color:var(--c);
    box-shadow:var(--shadow-strong);
  }
  .who-card:hover .ic{ transform:rotate(-8deg) scale(1.08); }
}

/* ---------- Closing pull-quote ---------- */
.who-closing{
  display:flex;
  gap:14px;
  align-items:flex-start;
  max-width:680px;
  margin:0 auto;
  border-left:3px solid var(--gold-500);
  padding-left:20px;
}
.who-closing p{
  font-family:var(--font-display);
  font-style:italic;
  font-size:17px;
  line-height:1.7;
  color:var(--indigo-900);
  margin:0;
}

/* ---------- Keyframes ---------- */
@keyframes who-rise{
  from{ opacity:0; transform:translateY(28px); }
  to{ opacity:1; transform:none; }
}

/* ---------- Responsive ---------- */
@media (max-width:767.98px){
  .who-grid{ grid-template-columns:1fr; }
}
@media (max-width:575.98px){
  .who-card{ padding:22px 20px; gap:14px; }
  .who-card .ic{ width:44px; height:44px; font-size:17px; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .who-section *,
  .who-section *::before,
  .who-section *::after{
    animation:none !important;
    transition:none !important;
  }
  .who-js .who-reveal:not(.is-in){ opacity:1; }
}

/* ============================================================
   MR TRAINING PAGE — Proof & Credibility (7 credential badge cards)
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only. Includes its own responsive + motion rules.
   All class names start with  prf-  so nothing else is affected.

   Animation style here is deliberately different from earlier
   sections: cards flip in on a 3D rotateX (like a badge tipping
   into place) instead of rising/fading, and tilt in 3D on hover
   instead of lifting straight up.
   ============================================================ */
.prf-section{ background:var(--mist-100); }

/* ---------- Heading ---------- */
.prf-head{
  text-align:center;
  max-width:700px;
  margin:0 auto 50px;
}
.prf-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--teal-600);
}
.prf-eyebrow::before,
.prf-eyebrow::after{
  content:"";
  width:34px; height:1px;
  background:var(--teal-600);
  display:inline-block;
}
.prf-title{
  font-size:clamp(28px, 3.6vw, 40px);
  font-weight:600;
  line-height:1.22;
  margin:16px 0 14px;
}
.prf-title em{ font-style:italic; color:var(--purple-500); }
.prf-lead{
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.8;
  margin:0;
}

/* ---------- Flip-in-on-scroll entrance ---------- */
.prf-js .prf-card{
  opacity:0;
  transform:rotateX(-70deg);
  transform-origin:bottom center;
}
.prf-js .prf-card.is-in{
  animation:prf-flip-in .7s cubic-bezier(.2,.75,.3,1.1) var(--d, 0s) forwards;
}

/* ---------- Grid ---------- */
.prf-grid{
  display:grid;
  grid-template-columns:repeat(4, 1fr);
  gap:20px;
}
.prf-card{
  --c:var(--teal-600);
  grid-column:span 1;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-lg);
  padding:28px 22px 24px;
  text-align:center;
  transform-style:preserve-3d;
  transition:transform .4s ease, box-shadow .4s ease, border-color .4s ease;
}
.prf-card:nth-child(4n+2){ --c:var(--purple-500); }
.prf-card:nth-child(4n+3){ --c:var(--gold-600); }
.prf-card:nth-child(4n+4){ --c:var(--indigo-700); }
.prf-card:last-child{ grid-column:span 2; }

.prf-card .ic{
  width:54px; height:54px;
  margin:0 auto 16px;
  border-radius:50%;
  background:var(--c);
  color:#fff;
  font-size:21px;
  display:flex; align-items:center; justify-content:center;
}
.prf-card .t{
  font-family:var(--font-utility);
  font-size:14px;
  font-weight:700;
  color:var(--indigo-900);
  line-height:1.4;
}

/* tilt-in-3D on hover — different interaction than the lift/translate used elsewhere */
@media (hover:hover){
  .prf-card:hover{
    transform:perspective(700px) rotateX(-6deg) translateY(-4px);
    border-color:var(--c);
    box-shadow:var(--shadow-strong);
  }
}

/* ---------- Keyframes ---------- */
@keyframes prf-flip-in{
  0%{ opacity:0; transform:rotateX(-70deg); }
  60%{ opacity:1; }
  100%{ opacity:1; transform:rotateX(0deg); }
}

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .prf-grid{ grid-template-columns:repeat(2, 1fr); }
  .prf-card:last-child{ grid-column:span 2; }
}
@media (max-width:575.98px){
  .prf-grid{ grid-template-columns:1fr; }
  .prf-card:last-child{ grid-column:span 1; }
  .prf-card{ padding:24px 18px 20px; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .prf-section *{ animation:none !important; transition:none !important; }
  .prf-js .prf-card{ opacity:1; transform:none; }
  .prf-card:hover{ transform:none; }
}

/* ============================================================
   MR TRAINING PAGE — Final CTA: "Ready to Ascend in Pharma Sales?"
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only — the background photo gets one solid tint,
   not a gradient. All class names start with  fcta-  so nothing
   else is affected.

   Animation style here is deliberately different from the
   stars + paper-plane motif used on the homepage hero, mrt-banner
   and services CTA: this one uses rising chevrons ("^ ^ ^") that
   drift upward, literally illustrating the word "Ascend."
   ============================================================ */
.fcta-section{
  position:relative;
  overflow:hidden;
  padding:100px 0;
  text-align:center;
  color:#fff;
  background-image:url('https://images.unsplash.com/photo-1600880292089-90a7e086ee0c?q=80&w=1920&auto=format&fit=crop');
  background-size:cover;
  background-position:center;
}
.fcta-section::before{              /* solid tint, not a gradient */
  content:"";
  position:absolute;
  inset:0;
  background:rgba(22,14,60,0.87);
}

/* ---------- Ascending chevrons motif (decorative, aria-hidden) ---------- */
.fcta-ascend{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.fcta-ascend .chev{
  position:absolute;
  bottom:-60px;
  color:var(--gold-500);
  opacity:0;
  font-size:22px;
  animation:fcta-up linear infinite;
}
@keyframes fcta-up{
  0%{ transform:translateY(0) scale(.8); opacity:0; }
  15%{ opacity:.7; }
  80%{ opacity:.35; }
  100%{ transform:translateY(-95vh) scale(1.05); opacity:0; }
}

/* ---------- Content ---------- */
.fcta-inner{
  position:relative;
  z-index:2;
  max-width:680px;
  margin:0 auto;
}
.fcta-js .fcta-reveal:not(.is-in){ opacity:0; }
.fcta-reveal.is-in{ animation:fcta-fade .8s ease var(--d, 0s) backwards; }

.fcta-title{
  color:#fff;
  font-size:clamp(30px, 4.2vw, 46px);
  font-weight:600;
  line-height:1.18;
  margin:0 0 20px;
}
.fcta-title em{ font-style:italic; color:var(--gold-500); }
.fcta-text{
  color:rgba(255,255,255,0.82);
  font-size:16px;
  line-height:1.8;
  margin:0 0 38px;
}

.fcta-btns{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:40px;
}
.fcta-btn-primary, .fcta-btn-secondary{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-utility);
  font-weight:700;
  font-size:14.5px;
  padding:17px 32px;
  border-radius:50px;
  transition:transform .25s ease, background .25s ease, border-color .25s ease, gap .25s ease;
}
.fcta-btn-primary{
  background:var(--gold-500);
  color:var(--indigo-900);
}
.fcta-btn-primary .bounce-ic{
  display:inline-flex;
  animation:fcta-bounce 1.6s ease-in-out infinite;
}
.fcta-btn-primary:hover{
  background:#ffbf52;
  color:var(--indigo-900);
  transform:translateY(-3px);
  gap:14px;
}
.fcta-btn-secondary{
  background:transparent;
  border:1.5px solid rgba(255,255,255,0.45);
  color:#fff;
}
.fcta-btn-secondary:hover{
  border-color:#fff;
  background:rgba(255,255,255,0.1);
  color:#fff;
  transform:translateY(-3px);
  gap:14px;
}

/* ---------- Brand tagline, revealed phrase by phrase ---------- */
.fcta-tagline{
  display:flex;
  justify-content:center;
  flex-wrap:wrap;
  gap:10px;
  padding-top:30px;
  border-top:1px solid rgba(255,255,255,0.16);
  font-family:var(--font-display);
  font-style:italic;
  font-size:15px;
  color:rgba(255,255,255,0.8);
}
.fcta-tagline strong{
  font-style:normal;
  font-weight:600;
  color:var(--gold-500);
}
.fcta-tagline .seg{
  opacity:0;
}
.fcta-js .fcta-tagline .seg{
  animation:fcta-fade .6s ease forwards;
}
.fcta-tagline .seg:nth-child(1){ animation-delay:.1s; }
.fcta-tagline .seg:nth-child(2){ animation-delay:.3s; }
.fcta-tagline .seg:nth-child(3){ animation-delay:.5s; }
.fcta-tagline .seg:nth-child(4){ animation-delay:.7s; }

/* ---------- Keyframes ---------- */
@keyframes fcta-fade{
  from{ opacity:0; transform:translateY(16px); }
  to{ opacity:1; transform:none; }
}
@keyframes fcta-bounce{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-3px); }
}

/* ---------- Responsive ---------- */
@media (max-width:575.98px){
  .fcta-section{ padding:76px 0; }
  .fcta-btns{ flex-direction:column; align-items:stretch; }
  .fcta-btn-primary, .fcta-btn-secondary{ justify-content:center; }
  .fcta-tagline{ flex-direction:column; gap:4px; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .fcta-section *,
  .fcta-section *::before,
  .fcta-section *::after{
    animation:none !important;
    transition:none !important;
  }
  .fcta-ascend{ display:none; }
  .fcta-js .fcta-reveal:not(.is-in),
  .fcta-js .fcta-tagline .seg{ opacity:1; }
}

/* ============================================================
   MOBILE-ONLY STICKY BAR — WhatsApp + Call Now
   Paste anywhere in the main CSS. Uses the existing :root tokens
   where relevant. Solid colours only. All class names start with
   mfb-  so nothing else is affected. Hidden above 767px — mobile
   only, as requested.
   ============================================================ */
.mfb-bar{
  display:none;                     /* shown only on mobile, see media query below */
  position:fixed;
  left:0; right:0; bottom:0;
  z-index:1200;
  box-shadow:0 -8px 24px -10px rgba(0,0,0,0.35);
  padding-bottom:env(safe-area-inset-bottom, 0px);
}
.mfb-btn{
  position:relative;
  flex:1;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:9px;
  padding:15px 10px;
  font-family:var(--font-utility);
  font-weight:700;
  font-size:13.5px;
  color:#fff;
  overflow:hidden;
  transition:background .2s ease, transform .15s ease;
}
.mfb-btn:active{ transform:scale(.97); }

.mfb-whatsapp{ background:#25D366; }   /* WhatsApp's own solid brand green */
.mfb-call{ background:var(--indigo-900, #241457); }

@media (hover:hover){
  .mfb-whatsapp:hover{ background:#20b85a; }
  .mfb-call:hover{ background:var(--purple-500, #5B3FCB); }
}

/* icon + pulsing ring (the "animated" cue) */
.mfb-ic{
  position:relative;
  width:26px; height:26px;
  display:flex; align-items:center; justify-content:center;
  flex:0 0 auto;
}
.mfb-ic svg{
  width:16px; height:16px;
  color:#fff;
}
.mfb-ic::before{                     /* expanding solid-colour ring */
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid rgba(255,255,255,0.85);
  animation:mfb-pulse 1.8s ease-out infinite;
}
.mfb-call .mfb-ic::before{ animation-delay:.3s; }

/* blinking notification dot (the "blinking" cue) */
.mfb-dot{
  position:absolute;
  top:-2px; right:-2px;
  width:9px; height:9px;
  border-radius:50%;
  background:var(--gold-500, #F0A93A);
  border:1.5px solid #fff;
  animation:mfb-blink 1.4s steps(1, end) infinite;
}

.mfb-divider{
  width:1px;
  background:rgba(255,255,255,0.25);
  align-self:stretch;
  flex:0 0 auto;
}

/* ---------- Keyframes ---------- */
@keyframes mfb-pulse{
  0%{ transform:scale(.7); opacity:.9; }
  100%{ transform:scale(1.9); opacity:0; }
}
@keyframes mfb-blink{
  0%, 49%{ opacity:1; }
  50%, 100%{ opacity:0; }
}

/* ---------- Mobile only ---------- */
@media (max-width:767.98px){
  .mfb-bar{ display:flex; }
  /* keep the fixed bar from covering the last bit of footer content */
  body{ padding-bottom:64px; }
}

/* ---------- Respect "reduce motion": keep the bar, drop the blink/pulse ---------- */
@media (prefers-reduced-motion:reduce){
  .mfb-ic::before,
  .mfb-dot{ animation:none !important; }
  .mfb-dot{ opacity:1; }
}


/* ============================================================
   CAREER GROWTH PAGE — Banner (content left · quick enquiry right)
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only — the background photo gets one solid tint.
   All class names start with  cgp-  so nothing else is affected.

   Animation set used here (each element moves differently):
   - headline: words slide up out of a mask, one by one
   - paragraph: blur-to-sharp focus pull
   - buttons: bouncy scale-pop
   - point chips: slide in from the left, staggered
   - form card: 3D swing-in from the right
   - background: rising "growth bars" + a slowly turning ring
   ============================================================ */
.cgp-hero{
  position:relative;
  overflow:hidden;
  padding:90px 0 80px;
  background-image:url('https://images.unsplash.com/photo-1507679799987-c73779587ccf?q=80&w=1920&auto=format&fit=crop');
  background-size:cover;
  background-position:center;
}
.cgp-hero::before{                  /* solid tint */
  content:"";
  position:absolute;
  inset:0;
  background:rgba(22,14,60,0.9);
}

/* ---------- Background motion (decorative) ---------- */
.cgp-deco{
  position:absolute;
  inset:0;
  z-index:1;
  pointer-events:none;
  overflow:hidden;
}
.cgp-ring{
  position:absolute;
  top:-130px; left:-120px;
  width:340px; height:340px;
  border:2px dashed rgba(255,255,255,0.1);
  border-radius:50%;
  animation:cgp-spin 60s linear infinite;
}
.cgp-bars{
  position:absolute;
  right:3%;
  bottom:0;
  height:52%;
  display:flex;
  align-items:flex-end;
  gap:12px;
}
.cgp-bars span{
  width:24px;
  background:rgba(240,169,58,0.17);
  border-radius:7px 7px 0 0;
  transform-origin:bottom;
  animation:cgp-grow 4.6s ease-in-out infinite;
}
.cgp-bars span:nth-child(1){ height:28%; animation-delay:0s; }
.cgp-bars span:nth-child(2){ height:44%; animation-delay:.3s; }
.cgp-bars span:nth-child(3){ height:36%; animation-delay:.6s; }
.cgp-bars span:nth-child(4){ height:62%; animation-delay:.9s; }
.cgp-bars span:nth-child(5){ height:80%; animation-delay:1.2s; }
.cgp-bars span:nth-child(6){ height:100%; animation-delay:1.5s; background:rgba(240,169,58,0.28); }
@keyframes cgp-grow{
  0%, 100%{ transform:scaleY(.5); }
  50%{ transform:scaleY(1); }
}
@keyframes cgp-spin{ to{ transform:rotate(360deg); } }

/* ---------- Grid ---------- */
.cgp-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.15fr 0.85fr;
  gap:56px;
  align-items:center;
}

/* ---------- Left: content ---------- */
.cgp-eyebrow{
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  letter-spacing:0.16em;
  text-transform:uppercase;
  color:var(--gold-500);
  opacity:0;
  animation:cgp-from-left .7s cubic-bezier(.2,.8,.2,1) .05s forwards;
}
.cgp-eyebrow::before{
  content:"";
  width:34px; height:1px;
  background:var(--gold-500);
  display:inline-block;
}

.cgp-title{
  color:#fff;
  font-size:clamp(28px, 3.5vw, 42px);
  font-weight:600;
  line-height:1.2;
  margin:20px 0 22px;
}
.cgp-title em{ font-style:italic; color:var(--gold-500); }
/* word-by-word reveal (words are wrapped by the script in the HTML file) */
.cgp-title .w{
  display:inline-block;
  overflow:hidden;
  vertical-align:top;
  padding:0 .06em .14em;
  margin:0 -.06em -.14em;
}
.cgp-title .wi{
  display:inline-block;
  transform:translateY(118%);
  animation:cgp-word .8s cubic-bezier(.2,.8,.2,1) calc(var(--i) * 55ms + .15s) forwards;
}

.cgp-sub{
  color:rgba(255,255,255,0.82);
  font-size:15.5px;
  line-height:1.85;
  margin:0 0 32px;
  max-width:590px;
  opacity:0;
  animation:cgp-focus 1s ease .55s forwards;
}

.cgp-btns{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-bottom:32px;
}
.cgp-btn-primary, .cgp-btn-secondary{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-family:var(--font-utility);
  font-weight:700;
  font-size:14.5px;
  padding:16px 30px;
  border-radius:50px;
  opacity:0;
  animation:cgp-pop .7s cubic-bezier(.34,1.56,.64,1) forwards;
  transition:transform .25s ease, color .3s ease, background .25s ease;
}
.cgp-btn-primary{
  background:var(--gold-500);
  color:var(--indigo-900);
  box-shadow:0 14px 30px -14px rgba(240,169,58,0.7);
  animation-delay:.75s;
}
.cgp-btn-primary i{ transition:transform .25s ease; }
.cgp-btn-primary:hover{ background:#ffbf52; color:var(--indigo-900); transform:translateY(-3px); }
.cgp-btn-primary:hover i{ transform:translateX(5px); }

.cgp-btn-secondary{
  border:1.5px solid rgba(255,255,255,0.5);
  color:#fff;
  background:transparent;
  animation-delay:.9s;
}
.cgp-btn-secondary::before{         /* solid colour sweep that fills from the left on hover */
  content:"";
  position:absolute;
  inset:0;
  background:#fff;
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
  z-index:-1;
}
.cgp-btn-secondary:hover{ color:var(--indigo-900); transform:translateY(-3px); }
.cgp-btn-secondary:hover::before{ transform:scaleX(1); }

/* five highlight points */
.cgp-points{
  list-style:none;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin:0; padding:0;
}
.cgp-points li{
  display:flex;
  align-items:center;
  gap:9px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  color:rgba(255,255,255,0.88);
  background:rgba(255,255,255,0.08);
  border:1px solid rgba(255,255,255,0.22);
  border-radius:50px;
  padding:8px 16px 8px 9px;
  opacity:0;
  animation:cgp-from-left .6s cubic-bezier(.2,.8,.2,1) calc(1s + var(--i) * .09s) forwards;
  transition:background .25s ease, border-color .25s ease, transform .25s ease;
}
.cgp-points li .ic{
  width:24px; height:24px;
  border-radius:50%;
  background:var(--gold-500);
  color:var(--indigo-900);
  font-size:10.5px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .5s ease;
}
.cgp-points li:hover{
  background:rgba(255,255,255,0.16);
  border-color:rgba(255,255,255,0.45);
  transform:translateY(-3px);
}
.cgp-points li:hover .ic{ transform:rotate(360deg); }

/* ---------- Right: quick enquiry form card ---------- */
.cgp-form-card{
  background:#fff;
  border-radius:var(--radius-lg);
  border-top:5px solid var(--gold-500);
  padding:34px 30px;
  box-shadow:0 30px 70px -20px rgba(0,0,0,0.5);
  transform-origin:left center;
  opacity:0;
  animation:cgp-swing 1s cubic-bezier(.2,.8,.2,1) .3s forwards;
  transition:box-shadow .3s ease;
}
.cgp-form-card:hover{ box-shadow:0 40px 80px -20px rgba(0,0,0,0.6); }
.cgp-form-card h3{
  font-size:19px;
  font-weight:600;
  color:var(--indigo-900);
  margin:0 0 4px;
}
.cgp-form-card .sub{
  font-size:13px;
  color:var(--ink-600);
  margin:0 0 22px;
}
.cgp-form .form-row{ margin-bottom:14px; }
.cgp-field{ position:relative; }
.cgp-field .f-ic{
  position:absolute;
  left:16px; top:16px;
  color:var(--teal-600);
  font-size:14px;
  z-index:2;
  transition:color .2s ease, transform .2s ease;
}
.cgp-field:focus-within .f-ic{ color:var(--purple-500); transform:scale(1.15); }
.cgp-field input,
.cgp-field select{
  width:100%;
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:14px 16px 14px 44px;
  font-family:var(--font-body);
  font-size:14px;
  color:var(--ink-900);
  outline:none;
  appearance:none;
  -webkit-appearance:none;
  transition:border-color .2s ease, box-shadow .2s ease;
}
.cgp-field select{
  cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%234A4863' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat:no-repeat;
  background-position:right 16px center;
  background-size:12px;
}
.cgp-field input::placeholder{ color:var(--ink-faint, #9997ab); }
.cgp-field input:focus,
.cgp-field select:focus{
  border-color:var(--purple-500);
  box-shadow:0 0 0 3px rgba(91,63,203,0.12);
}
.cgp-submit{
  width:100%;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:10px;
  background:var(--indigo-900);
  color:#fff;
  border:none;
  font-family:var(--font-utility);
  font-weight:700;
  font-size:14.5px;
  padding:16px 20px;
  border-radius:10px;
  cursor:pointer;
  margin-top:6px;
  transition:background .25s ease, transform .25s ease;
}
.cgp-submit i{ transition:transform .25s ease; }
.cgp-submit:hover{ background:var(--purple-500); transform:translateY(-2px); }
.cgp-submit:hover i{ transform:translateX(5px); }
.cgp-form-note{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  margin-top:16px;
  font-family:var(--font-utility);
  font-size:11.5px;
  color:var(--ink-600);
}
.cgp-form-note i{ color:var(--teal-600); font-size:11px; }

/* ---------- Keyframes ---------- */
@keyframes cgp-word{
  from{ transform:translateY(118%); }
  to{ transform:translateY(0); }
}
@keyframes cgp-focus{
  from{ opacity:0; filter:blur(9px); transform:translateY(10px); }
  to{ opacity:1; filter:blur(0); transform:none; }
}
@keyframes cgp-pop{
  from{ opacity:0; transform:scale(.7); }
  to{ opacity:1; transform:scale(1); }
}
@keyframes cgp-from-left{
  from{ opacity:0; transform:translateX(-26px); }
  to{ opacity:1; transform:none; }
}
@keyframes cgp-swing{
  from{ opacity:0; transform:perspective(900px) rotateY(-16deg) translateX(50px); }
  to{ opacity:1; transform:perspective(900px) rotateY(0) translateX(0); }
}

/* ---------- Responsive ---------- */
@media (max-width:991.98px){
  .cgp-grid{ grid-template-columns:1fr; gap:42px; }
  .cgp-sub{ max-width:none; }
  .cgp-bars{ height:34%; opacity:.7; }
  .cgp-form-card{ transform-origin:center top; }
}
@media (max-width:575.98px){
  .cgp-hero{ padding:70px 0 60px; }
  .cgp-btns{ flex-direction:column; align-items:stretch; }
  .cgp-btn-primary, .cgp-btn-secondary{ justify-content:center; }
  .cgp-form-card{ padding:28px 22px; }
  .cgp-bars{ gap:8px; }
  .cgp-bars span{ width:16px; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .cgp-hero *, .cgp-hero *::before, .cgp-hero *::after{
    animation:none !important;
    transition:none !important;
  }
  .cgp-eyebrow, .cgp-sub, .cgp-btn-primary, .cgp-btn-secondary,
  .cgp-points li, .cgp-form-card{ opacity:1; }
  .cgp-title .wi{ transform:none; }
  .cgp-bars span{ transform:none; }
}

/* ============================================================
   CAREER GROWTH PAGE — Why good MRs need more than product knowledge
   (image left · content right — zigzag section 2 of 2)
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only. Includes its own responsive + motion rules.
   All class names start with  cgn-  so nothing else is affected.

   Animation set used here (deliberately different from section 1):
   - image: circular reveal that opens from the centre, with a pulsing dot
   - heading: skewed rise
   - paragraphs: slide in from the right / blur into focus
   - skill chips: flip in on the Y axis, then fill from the bottom on hover
   - gap cards: zoom + rotate in; icon flips on hover
   - Contact Us button: label rolls up to a second copy while a solid
            circle at the arrow expands to fill the whole pill
   ============================================================ */
.cgn-section{ background:var(--mist-100); }
.cgn-grid{
  display:grid;
  grid-template-columns:0.9fr 1.1fr;
  gap:64px;
  align-items:center;
}

/* ---------- Scroll-reveal engine (active once the script runs) ---------- */
.cgn-js .cgn-rv:not(.is-in){ opacity:0; }
.cgn-rv.is-in{
  animation-duration:.85s;
  animation-timing-function:cubic-bezier(.2,.8,.2,1);
  animation-delay:var(--d, 0s);
  animation-fill-mode:backwards;
}
.cgn-rv.is-in[data-a="circle"] { animation-name:cgn-circle; animation-duration:1.4s; }
.cgn-rv.is-in[data-a="skew"]   { animation-name:cgn-skew; }
.cgn-rv.is-in[data-a="slideR"] { animation-name:cgn-slideR; }
.cgn-rv.is-in[data-a="blur"]   { animation-name:cgn-blur; animation-duration:1.1s; }
.cgn-rv.is-in[data-a="flipY"]  { animation-name:cgn-flipY; animation-duration:.8s; }
.cgn-rv.is-in[data-a="zoomRot"]{ animation-name:cgn-zoomRot; animation-timing-function:cubic-bezier(.34,1.56,.64,1); }
.cgn-rv.is-in[data-a="bounce"] { animation-name:cgn-bounce; animation-duration:1s; animation-timing-function:cubic-bezier(.34,1.56,.64,1); }
.cgn-rv.is-in[data-a="badge"]  { animation-name:cgn-badge; animation-timing-function:cubic-bezier(.34,1.56,.64,1); }

@keyframes cgn-circle { from{ opacity:1; clip-path:circle(0% at 50% 50%); } to{ opacity:1; clip-path:circle(78% at 50% 50%); } }
@keyframes cgn-skew   { from{ opacity:0; transform:translateY(38px) skewY(5deg); transform-origin:left top; } to{ opacity:1; transform:none; transform-origin:left top; } }
@keyframes cgn-slideR { from{ opacity:0; transform:translateX(56px); } to{ opacity:1; transform:none; } }
@keyframes cgn-blur   { from{ opacity:0; filter:blur(10px); } to{ opacity:1; filter:blur(0); } }
@keyframes cgn-flipY  { from{ opacity:0; transform:perspective(600px) rotateY(-90deg); } to{ opacity:1; transform:perspective(600px) rotateY(0); } }
@keyframes cgn-zoomRot{ from{ opacity:0; transform:scale(.55) rotate(-9deg); } to{ opacity:1; transform:none; } }
@keyframes cgn-bounce { from{ opacity:0; transform:translateY(70px); } to{ opacity:1; transform:none; } }
@keyframes cgn-badge  { from{ opacity:0; transform:translateX(-44px) rotate(-6deg); } to{ opacity:1; transform:none; } }
@keyframes cgn-settle { from{ transform:scale(1.22); } to{ transform:scale(1); } }

/* ============================================================
   LEFT: IMAGE
   ============================================================ */
.cgn-media{ position:relative; }
.cgn-media::before{                     /* turning dashed ring, top-left */
  content:"";
  position:absolute;
  top:-28px; left:-28px;
  width:160px; height:160px;
  border:2px dashed var(--purple-500);
  border-radius:50%;
  opacity:.5;
  animation:cgn-spin 45s linear infinite reverse;
  z-index:0;
}
@keyframes cgn-spin{ to{ transform:rotate(360deg); } }
.cgn-dot{                               /* pulsing gold dot, bottom-right */
  position:absolute;
  right:-12px; bottom:-12px;
  width:26px; height:26px;
  border-radius:50%;
  background:var(--gold-500);
  z-index:0;
}
.cgn-dot::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid var(--gold-500);
  animation:cgn-ping 2.2s ease-out infinite;
}
@keyframes cgn-ping{
  0%{ transform:scale(1); opacity:.9; }
  100%{ transform:scale(3); opacity:0; }
}

.cgn-frame{
  position:relative;
  z-index:1;
  aspect-ratio:4 / 4.9;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--mist-200);
  box-shadow:var(--shadow-strong);
}
.cgn-frame img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
  transition:transform .8s cubic-bezier(.2,.8,.2,1);
}
.cgn-frame.is-in img{ animation:cgn-settle 2s ease backwards; }
@media (hover:hover){
  .cgn-media:hover .cgn-frame img{ transform:scale(1.07); }
}

.cgn-badge{
  position:absolute;
  left:-18px;
  bottom:34px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--indigo-900);
  border-radius:var(--radius-md);
  padding:14px 20px 14px 14px;
  box-shadow:var(--shadow-strong);
}
.cgn-badge .ic{
  width:40px; height:40px;
  border-radius:11px;
  background:var(--gold-500);
  color:var(--indigo-900);
  font-size:16px;
  display:flex; align-items:center; justify-content:center;
}
.cgn-badge .txt{
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:700;
  color:#fff;
  line-height:1.35;
  max-width:130px;
}
.cgn-badge.cgn-rv.is-in.cgn-badge-float{ animation:cgn-float 4.6s ease-in-out infinite; }
@keyframes cgn-float{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-7px); }
}

/* ============================================================
   RIGHT: CONTENT
   ============================================================ */
.cgn-content{ min-width:0; }
.cgn-accent{
  display:block;
  width:54px; height:4px;
  border-radius:2px;
  background:var(--purple-500);
  margin-bottom:22px;
  transform-origin:left;
  transition:transform .8s ease .1s;
}
.cgn-js .cgn-accent:not(.is-in){ transform:scaleX(0); }

.cgn-title{
  font-size:clamp(26px, 3.2vw, 36px);
  font-weight:600;
  line-height:1.27;
  margin:0 0 22px;
}
.cgn-title em{ font-style:italic; color:var(--purple-500); }

.cgn-text{
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.9;
  margin:0 0 18px;
}

.cgn-label{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-utility);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--purple-500);
  margin:24px 0 14px;
}
.cgn-label::after{ content:""; flex:1; height:1px; background:var(--line); }

/* chips: what career progression also needs */
.cgn-chips{
  list-style:none;
  margin:0 0 6px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.cgn-chip{
  --c:var(--teal-600);
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:flex;
  align-items:center;
  gap:9px;
  background:#fff;
  border:1.5px solid var(--line);
  border-radius:50px;
  padding:9px 18px 9px 14px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  color:var(--indigo-900);
  transition:color .3s ease, border-color .3s ease;
}
.cgn-chip:nth-child(4n+2){ --c:var(--purple-500); }
.cgn-chip:nth-child(4n+3){ --c:var(--gold-600); }
.cgn-chip:nth-child(4n+4){ --c:var(--indigo-700); }
.cgn-chip i{ color:var(--c); font-size:12.5px; transition:color .3s ease, transform .4s ease; }
.cgn-chip::before{                      /* solid fill rising from the bottom on hover */
  content:"";
  position:absolute;
  inset:0;
  background:var(--c);
  transform:translateY(101%);
  transition:transform .4s cubic-bezier(.2,.8,.2,1);
  z-index:-1;
}
@media (hover:hover){
  .cgn-chip:hover{ color:#fff; border-color:var(--c); }
  .cgn-chip:hover::before{ transform:translateY(0); }
  .cgn-chip:hover i{ color:#fff; transform:scale(1.25) rotate(-10deg); }
}

/* capability gaps */
.cgn-gaps{
  list-style:none;
  margin:0 0 32px;
  padding:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
}
.cgn-gap{
  --c:var(--teal-600);
  display:flex;
  align-items:center;
  gap:13px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:14px 16px;
  min-width:0;
  transition:transform .35s ease, border-color .3s ease, box-shadow .3s ease;
}
.cgn-gap:nth-child(2){ --c:var(--purple-500); }
.cgn-gap:nth-child(3){ --c:var(--gold-600); }
.cgn-gap:nth-child(4){ --c:var(--indigo-700); }
.cgn-gap .ic{
  flex:0 0 auto;
  width:40px; height:40px;
  border-radius:12px;
  background:var(--c);
  color:#fff;
  font-size:15px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .7s ease;
}
.cgn-gap .t{
  font-family:var(--font-utility);
  font-size:13px;
  font-weight:600;
  line-height:1.4;
  color:var(--indigo-900);
}
@media (hover:hover){
  .cgn-gap:hover{ transform:translateY(-5px); border-color:var(--c); box-shadow:var(--shadow-soft); }
  .cgn-gap:hover .ic{ transform:rotateY(360deg); }
}

/* ---------- Contact Us button: text roll + expanding arrow circle ---------- */
.cgn-btn{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  gap:20px;
  padding:6px 6px 6px 32px;
  border:2px solid var(--indigo-900);
  border-radius:50px;
  background:transparent;
  font-family:var(--font-utility);
  font-weight:700;
  font-size:14.5px;
  transition:transform .3s ease, box-shadow .3s ease;
}
.cgn-btn::before{                       /* solid circle behind the arrow, grows to fill the pill */
  content:"";
  position:absolute;
  right:6px; top:50%;
  width:44px; height:44px;
  margin-top:-22px;
  border-radius:50%;
  background:var(--indigo-900);
  transform:scale(0);
  transition:transform .7s cubic-bezier(.2,.8,.2,1);
  z-index:-1;
}
.cgn-btn .lbl{
  position:relative;
  display:block;
  height:1.5em;
  line-height:1.5em;
  overflow:hidden;
}
.cgn-btn .t1, .cgn-btn .t2{
  display:block;
  transition:transform .5s cubic-bezier(.2,.8,.2,1);
}
.cgn-btn .t1{ color:var(--indigo-900); }
.cgn-btn .t2{ position:absolute; left:0; top:100%; color:#fff; white-space:nowrap; }
.cgn-btn .go{
  flex:0 0 auto;
  width:44px; height:44px;
  border-radius:50%;
  background:var(--gold-500);
  color:var(--indigo-900);
  display:flex; align-items:center; justify-content:center;
  font-size:14px;
  animation:cgn-nudge 2.8s ease-in-out infinite;
}
.cgn-btn .go i{ transition:transform .5s ease; }
@keyframes cgn-nudge{
  0%, 60%, 100%{ transform:translateX(0); }
  70%{ transform:translateX(6px); }
  80%{ transform:translateX(0); }
  90%{ transform:translateX(4px); }
}
.cgn-btn:hover{ transform:translateY(-3px); box-shadow:0 18px 34px -16px rgba(36,20,87,0.5); }
.cgn-btn:hover::before{ transform:scale(18); }   /* big enough to fill the full-width mobile pill too */
.cgn-btn:hover .t1,
.cgn-btn:hover .t2{ transform:translateY(-100%); }
.cgn-btn:hover .go i{ transform:rotate(-45deg); }

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:991.98px){
  .cgn-grid{ grid-template-columns:1fr; gap:56px; }
  .cgn-media{ max-width:480px; margin:0 auto; }
}
@media (max-width:575.98px){
  .cgn-gaps{ grid-template-columns:1fr; }
  .cgn-chip{ font-size:12px; padding:8px 15px 8px 12px; }
  .cgn-btn{ width:100%; justify-content:space-between; }
  .cgn-badge{ left:8px; bottom:-18px; padding:11px 16px 11px 10px; }
  .cgn-badge .ic{ width:36px; height:36px; font-size:14px; }
  .cgn-badge .txt{ font-size:11.5px; max-width:110px; }
  .cgn-media::before{ width:100px; height:100px; top:-16px; left:-10px; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .cgn-section *,
  .cgn-section *::before,
  .cgn-section *::after{
    animation:none !important;
    transition:none !important;
  }
  .cgn-js .cgn-rv:not(.is-in){ opacity:1; }
  .cgn-js .cgn-accent:not(.is-in){ transform:none; }
}

/* ============================================================
   CAREER GROWTH PAGE — What is career growth training?
   (content left · image right — zigzag section 1 of 2)
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only. Includes its own responsive + motion rules.
   All class names start with  cgw-  so nothing else is affected.

   Animation set used here:
   - heading: rises in, then a gold "highlighter" sweeps behind the key phrase
   - paragraphs: text is unmasked left-to-right
   - skill chips: drop in from above with a bounce
   - image: curtain reveal from the bottom + slow settle, then 3D tilt that
            follows the cursor
   - Contact Us button: a solid circle ripples out from wherever the
            cursor enters; the phone icon "rings" every few seconds
   ============================================================ */
.cgw-section{ background:var(--paper-0); }
.cgw-grid{
  display:grid;
  grid-template-columns:1.1fr 0.9fr;
  gap:64px;
  align-items:center;
}

/* ---------- Scroll-reveal engine (active once the script runs) ---------- */
.cgw-js .cgw-rv:not(.is-in){ opacity:0; }
.cgw-rv.is-in{
  animation-duration:.85s;
  animation-timing-function:cubic-bezier(.2,.8,.2,1);
  animation-delay:var(--d, 0s);
  animation-fill-mode:backwards;
}
.cgw-rv.is-in[data-a="rise"]   { animation-name:cgw-rise; }
.cgw-rv.is-in[data-a="mask"]   { animation-name:cgw-mask; animation-duration:1.1s; }
.cgw-rv.is-in[data-a="drop"]   { animation-name:cgw-drop; animation-duration:.8s; animation-timing-function:cubic-bezier(.34,1.56,.64,1); }
.cgw-rv.is-in[data-a="curtain"]{ animation-name:cgw-curtain; animation-duration:1.3s; }
.cgw-rv.is-in[data-a="badge"]  { animation-name:cgw-badge; animation-timing-function:cubic-bezier(.34,1.56,.64,1); }
.cgw-rv.is-in[data-a="pop"]    { animation-name:cgw-pop; animation-timing-function:cubic-bezier(.34,1.56,.64,1); }

@keyframes cgw-rise   { from{ opacity:0; transform:translateY(40px); } to{ opacity:1; transform:none; } }
@keyframes cgw-mask   { from{ opacity:1; clip-path:inset(0 100% 0 0); } to{ opacity:1; clip-path:inset(0 0 0 0); } }
@keyframes cgw-drop   { from{ opacity:0; transform:translateY(-34px) scale(.8); } to{ opacity:1; transform:none; } }
@keyframes cgw-curtain{ from{ opacity:1; clip-path:inset(100% 0 0 0); } to{ opacity:1; clip-path:inset(0 0 0 0); } }
@keyframes cgw-badge  { from{ opacity:0; transform:translateX(40px) rotate(6deg); } to{ opacity:1; transform:none; } }
@keyframes cgw-pop    { from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:scale(1); } }
@keyframes cgw-settle { from{ transform:scale(1.25); } to{ transform:scale(1); } }

/* ============================================================
   LEFT: CONTENT
   ============================================================ */
.cgw-content{ min-width:0; }
.cgw-accent{
  display:block;
  width:54px; height:4px;
  border-radius:2px;
  background:var(--gold-500);
  margin-bottom:22px;
  transform-origin:left;
  transition:transform .8s ease .1s;
}
.cgw-js .cgw-accent:not(.is-in){ transform:scaleX(0); }

.cgw-title{
  font-size:clamp(27px, 3.4vw, 38px);
  font-weight:600;
  line-height:1.25;
  margin:0 0 22px;
}
/* gold highlighter that sweeps behind the key phrase */
.cgw-mark{
  position:relative;
  isolation:isolate;
  white-space:normal;
  color:var(--indigo-900);
}
.cgw-mark::after{
  content:"";
  position:absolute;
  left:-5px; right:-5px;
  bottom:.06em;
  height:.46em;
  background:rgba(240,169,58,0.5);
  border-radius:3px;
  z-index:-1;
  transform-origin:left;
  transition:transform 1s cubic-bezier(.2,.8,.2,1) .55s;
}
.cgw-js .cgw-title:not(.is-in) .cgw-mark::after{ transform:scaleX(0); }

.cgw-text{
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.9;
  margin:0 0 18px;
}

/* chips: skills the program builds */
.cgw-label{
  display:flex;
  align-items:center;
  gap:12px;
  font-family:var(--font-utility);
  font-size:12px;
  font-weight:700;
  letter-spacing:0.1em;
  text-transform:uppercase;
  color:var(--teal-600);
  margin:26px 0 14px;
}
.cgw-label::after{ content:""; flex:1; height:1px; background:var(--line); }

.cgw-chips{
  list-style:none;
  margin:0 0 32px;
  padding:0;
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}
.cgw-chip{
  --c:var(--teal-600);
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:50px;
  padding:7px 17px 7px 8px;
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:600;
  color:var(--indigo-900);
  transition:transform .35s cubic-bezier(.34,1.56,.64,1), border-color .3s ease, box-shadow .3s ease;
}
.cgw-chip:nth-child(4n+2){ --c:var(--purple-500); }
.cgw-chip:nth-child(4n+3){ --c:var(--gold-600); }
.cgw-chip:nth-child(4n+4){ --c:var(--indigo-700); }
.cgw-chip .ic{
  width:28px; height:28px;
  border-radius:50%;
  background:var(--c);
  color:#fff;
  font-size:11.5px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .5s ease;
}
@media (hover:hover){
  .cgw-chip:hover{
    transform:translateY(-5px) rotate(-2.5deg);
    border-color:var(--c);
    box-shadow:var(--shadow-soft);
  }
  .cgw-chip:hover .ic{ transform:rotate(360deg) scale(1.12); }
}

/* ---------- Contact Us button: ripple from the cursor ---------- */
.cgw-btn{
  position:relative;
  isolation:isolate;
  overflow:hidden;
  display:inline-flex;
  align-items:center;
  gap:12px;
  background:var(--indigo-900);
  color:#fff;
  font-family:var(--font-utility);
  font-weight:700;
  font-size:14.5px;
  padding:17px 36px;
  border-radius:50px;
  transition:color .4s ease, transform .3s ease, box-shadow .3s ease;
}
.cgw-btn .ripple{
  position:absolute;
  left:var(--x, 50%);
  top:var(--y, 50%);
  width:20px; height:20px;
  margin:-10px 0 0 -10px;
  border-radius:50%;
  background:var(--gold-500);
  transform:scale(0);
  transition:transform .65s cubic-bezier(.2,.8,.2,1);
  z-index:-1;
  pointer-events:none;
}
.cgw-btn i{
  display:inline-block;
  transform-origin:50% 55%;
  animation:cgw-ring 3.6s ease-in-out infinite;
}
@keyframes cgw-ring{
  0%, 68%, 100%{ transform:rotate(0); }
  72%{ transform:rotate(-20deg); }
  76%{ transform:rotate(18deg); }
  80%{ transform:rotate(-16deg); }
  84%{ transform:rotate(14deg); }
  88%{ transform:rotate(-8deg); }
  92%{ transform:rotate(5deg); }
}
.cgw-btn:hover{
  color:var(--indigo-900);
  transform:translateY(-3px);
  box-shadow:0 18px 34px -16px rgba(240,169,58,0.8);
}
.cgw-btn:hover .ripple{ transform:scale(32); }

/* ============================================================
   RIGHT: IMAGE
   ============================================================ */
.cgw-media{ position:relative; }
.cgw-media::before{                     /* slowly turning dashed ring */
  content:"";
  position:absolute;
  top:-26px; right:-26px;
  width:150px; height:150px;
  border:2px dashed var(--teal-400);
  border-radius:50%;
  animation:cgw-spin 40s linear infinite;
  z-index:0;
}
.cgw-media::after{                      /* gold block */
  content:"";
  position:absolute;
  bottom:-16px; left:-16px;
  width:76px; height:76px;
  background:var(--gold-500);
  border-radius:var(--radius-md);
  z-index:0;
}
@keyframes cgw-spin{ to{ transform:rotate(360deg); } }

.cgw-frame{
  position:relative;
  z-index:1;
  aspect-ratio:4 / 4.9;
  border-radius:var(--radius-lg);
  overflow:hidden;
  background:var(--mist-200);
  box-shadow:var(--shadow-strong);
  transition:transform .25s ease-out;
  will-change:transform;
}
.cgw-frame img{
  width:100%; height:100%;
  object-fit:cover;
  display:block;
}
.cgw-frame.is-in img{ animation:cgw-settle 1.9s ease backwards; }

.cgw-badge{
  position:absolute;
  right:-18px;
  bottom:34px;
  z-index:2;
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--indigo-900);
  border-radius:var(--radius-md);
  padding:14px 20px 14px 14px;
  box-shadow:var(--shadow-strong);
}
.cgw-badge .ic{
  width:40px; height:40px;
  border-radius:11px;
  background:var(--gold-500);
  color:var(--indigo-900);
  font-size:16px;
  display:flex; align-items:center; justify-content:center;
}
.cgw-badge .txt{
  font-family:var(--font-utility);
  font-size:12.5px;
  font-weight:700;
  color:#fff;
  line-height:1.35;
  max-width:130px;
}
.cgw-badge.cgw-rv.is-in.cgw-badge-float{ animation:cgw-float 4.6s ease-in-out infinite; }
@keyframes cgw-float{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-7px); }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:991.98px){
  .cgw-grid{ grid-template-columns:1fr; gap:56px; }
  .cgw-media{ order:-1; max-width:480px; margin:0 auto; }
}
@media (max-width:575.98px){
  .cgw-chip{ font-size:12px; padding:6px 14px 6px 7px; }
  .cgw-btn{ width:100%; justify-content:center; }
  .cgw-badge{ right:8px; bottom:-18px; padding:11px 16px 11px 10px; }
  .cgw-badge .ic{ width:36px; height:36px; font-size:14px; }
  .cgw-badge .txt{ font-size:11.5px; max-width:110px; }
  .cgw-media::before{ width:100px; height:100px; top:-16px; right:-10px; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .cgw-section *,
  .cgw-section *::before,
  .cgw-section *::after{
    animation:none !important;
    transition:none !important;
  }
  .cgw-js .cgw-rv:not(.is-in){ opacity:1; }
  .cgw-js .cgw-accent:not(.is-in),
  .cgw-js .cgw-title:not(.is-in) .cgw-mark::after{ transform:none; }
}

/* ============================================================
   CAREER GROWTH PAGE — Five competencies (expanding panels)
   Paste anywhere in the main CSS. Uses the existing :root tokens.
   Solid colours only. Includes its own responsive + motion rules.
   All class names start with  cmp-  so nothing else is affected.
   ============================================================ */
.cmp-section{ background:var(--paper-0); }

/* ---------- Scroll-reveal engine (active once the script runs) ---------- */
.cmp-js .cmp-rv:not(.is-in){ opacity:0; }
.cmp-rv.is-in{
  animation-duration:.9s;
  animation-timing-function:cubic-bezier(.2,.8,.2,1);
  animation-delay:var(--d, 0s);
  animation-fill-mode:backwards;
}
.cmp-rv.is-in[data-a="center"]{ animation-name:cmp-center; animation-duration:1.1s; }
.cmp-rv.is-in[data-a="wave"]  { animation-name:cmp-wave; animation-duration:1s; }
.cmp-rv.is-in[data-a="pop"]   { animation-name:cmp-pop; animation-timing-function:cubic-bezier(.34,1.56,.64,1); }

@keyframes cmp-center{ from{ opacity:1; clip-path:inset(0 50% 0 50%); } to{ opacity:1; clip-path:inset(0 0 0 0); } }
@keyframes cmp-wave  { from{ opacity:0; transform:perspective(900px) translateY(70px) rotateX(-22deg); transform-origin:bottom center; } to{ opacity:1; transform:none; transform-origin:bottom center; } }
@keyframes cmp-pop   { from{ opacity:0; transform:scale(.6); } to{ opacity:1; transform:scale(1); } }

/* ---------- Heading ---------- */
.cmp-head{
  text-align:center;
  max-width:760px;
  margin:0 auto 52px;
}
.cmp-accent{
  display:block;
  width:54px; height:4px;
  margin:0 auto 22px;
  border-radius:2px;
  background:var(--gold-500);
  transform-origin:center;
  transition:transform .8s ease .1s;
}
.cmp-js .cmp-accent:not(.is-in){ transform:scaleX(0); }
.cmp-title{
  font-size:clamp(28px, 3.6vw, 40px);
  font-weight:600;
  line-height:1.24;
  margin:0;
  padding:0 .1em .08em;
}
.cmp-title em{ font-style:italic; color:var(--purple-500); }

/* ============================================================
   PANELS (desktop: expanding accordion)
   ============================================================ */
.cmp-panels{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  gap:14px;
  height:440px;
}
.cmp-panel{
  --c:var(--teal-600);
  --t:#fff;
  position:relative;
  flex:1 1 0;
  min-width:0;
  overflow:hidden;
  border-radius:var(--radius-lg);
  background:var(--c);
  color:var(--t);
  cursor:pointer;
  outline:none;
  transition:flex-grow .75s cubic-bezier(.2,.8,.2,1), box-shadow .45s ease, transform .35s ease;
}
.cmp-panel:nth-child(2){ --c:var(--purple-500); }
.cmp-panel:nth-child(3){ --c:var(--gold-500); --t:var(--indigo-900); }
.cmp-panel:nth-child(4){ --c:var(--indigo-700); }
.cmp-panel:nth-child(5){ --c:var(--indigo-900); }
.cmp-panel.is-active{
  flex-grow:3.4;
  box-shadow:var(--shadow-strong);
}
.cmp-panel:focus-visible{ box-shadow:0 0 0 4px rgba(240,169,58,0.6); }
.cmp-panel::after{                      /* turning ring, only visible on the open panel */
  content:"";
  position:absolute;
  top:-60px; right:-60px;
  width:190px; height:190px;
  border:2px dashed currentColor;
  border-radius:50%;
  opacity:0;
  transition:opacity .5s ease .3s;
  animation:cmp-spin 40s linear infinite;
  pointer-events:none;
}
.cmp-panel.is-active::after{ opacity:.18; }
@keyframes cmp-spin{ to{ transform:rotate(360deg); } }

/* --- folded state: number, icon, vertical title --- */
.cmp-collapsed{
  position:absolute;
  inset:0;
  padding:26px 0 28px;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:16px;
  transition:opacity .3s ease;
}
.cmp-panel.is-active .cmp-collapsed{ opacity:0; pointer-events:none; }
.cmp-collapsed .no{
  font-family:var(--font-display);
  font-size:15px;
  font-weight:600;
  opacity:.8;
}
.cmp-collapsed .ic{
  width:46px; height:46px;
  border-radius:50%;
  border:1.5px solid currentColor;
  font-size:18px;
  display:flex; align-items:center; justify-content:center;
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), background .3s ease, color .3s ease;
}
.cmp-collapsed .vt{
  margin-top:auto;
  writing-mode:vertical-rl;
  transform:rotate(180deg);
  font-family:var(--font-utility);
  font-size:15px;
  font-weight:700;
  letter-spacing:0.04em;
  white-space:nowrap;
}
@media (hover:hover){
  .cmp-panel:not(.is-active):hover .cmp-collapsed .ic{
    transform:scale(1.18) rotate(-10deg);
    background:var(--t);
    color:var(--c);
  }
}

/* --- open state --- */
.cmp-open{
  position:absolute;
  top:0; left:0; bottom:0;
  width:clamp(300px, 28vw, 440px);
  padding:34px 34px 30px;
  display:flex;
  flex-direction:column;
}
.cmp-open > *{
  opacity:0;
  transform:translateY(18px);
  transition:opacity .25s ease, transform .25s ease;
}
.cmp-panel.is-active .cmp-open > *{
  opacity:1;
  transform:none;
  transition:opacity .6s ease, transform .6s cubic-bezier(.2,.8,.2,1);
}
.cmp-panel.is-active .cmp-open > :nth-child(1){ transition-delay:.3s; }
.cmp-panel.is-active .cmp-open > :nth-child(2){ transition-delay:.4s; }
.cmp-panel.is-active .cmp-open > :nth-child(3){ transition-delay:.5s; }
.cmp-panel.is-active .cmp-open > :nth-child(4){ transition-delay:.6s; }

.cmp-open .top{
  display:flex;
  align-items:center;
  justify-content:space-between;
  margin-bottom:22px;
}
.cmp-open .ic{
  width:56px; height:56px;
  border-radius:16px;
  background:var(--t);
  color:var(--c);
  font-size:22px;
  display:flex; align-items:center; justify-content:center;
}
.cmp-panel.is-active .cmp-open .ic i{ animation:cmp-icon 1.2s ease .5s backwards; }
@keyframes cmp-icon{
  0%{ transform:scale(.3) rotate(-90deg); opacity:0; }
  70%{ transform:scale(1.2) rotate(8deg); opacity:1; }
  100%{ transform:none; }
}
.cmp-open .big{
  font-family:var(--font-display);
  font-size:54px;
  font-weight:600;
  line-height:1;
  opacity:.22;
}
.cmp-open h3{
  color:inherit;
  font-size:23px;
  font-weight:600;
  line-height:1.25;
  margin:0 0 14px;
}
.cmp-open .ln{
  display:block;
  width:46px; height:3px;
  border-radius:2px;
  background:currentColor;
  opacity:.55;
  margin-bottom:16px;
  transform-origin:left;
}
.cmp-panel.is-active .cmp-open .ln{ animation:cmp-line .8s ease .55s backwards; }
@keyframes cmp-line{ from{ transform:scaleX(0); } to{ transform:scaleX(1); } }
.cmp-open p{
  font-size:14.5px;
  line-height:1.8;
  margin:0;
  opacity:.94;
}

/* ---------- Contact Us button: magnetic + targeting corners ---------- */
.cmp-cta{ text-align:center; margin-top:52px; }
.cmp-btn{
  position:relative;
  display:inline-block;
  padding:9px;
}
.cmp-btn .cb{
  position:absolute;
  width:14px; height:14px;
  border:0 solid var(--gold-500);
  transition:transform .4s cubic-bezier(.34,1.56,.64,1), width .4s ease, height .4s ease;
}
.cmp-btn .tl{ top:0; left:0;  border-top-width:2px;    border-left-width:2px;  }
.cmp-btn .tr{ top:0; right:0; border-top-width:2px;    border-right-width:2px; }
.cmp-btn .bl{ bottom:0; left:0;  border-bottom-width:2px; border-left-width:2px;  }
.cmp-btn .br{ bottom:0; right:0; border-bottom-width:2px; border-right-width:2px; }
.cmp-btn:hover .cb{ width:22px; height:22px; }
.cmp-btn:hover .tl{ transform:translate(-6px, -6px); }
.cmp-btn:hover .tr{ transform:translate(6px, -6px); }
.cmp-btn:hover .bl{ transform:translate(-6px, 6px); }
.cmp-btn:hover .br{ transform:translate(6px, 6px); }

.cmp-btn .in{
  display:flex;
  align-items:center;
  gap:12px;
  background:var(--indigo-900);
  color:#fff;
  font-family:var(--font-utility);
  font-weight:700;
  font-size:14.5px;
  padding:16px 38px;
  border-radius:50px;
  transition:background .35s ease, color .35s ease, transform .35s cubic-bezier(.2,.8,.2,1);
}
.cmp-btn .in i{ display:inline-block; animation:cmp-bob 2.6s ease-in-out infinite; }
@keyframes cmp-bob{
  0%, 100%{ transform:translateY(0); }
  50%{ transform:translateY(-3px); }
}
.cmp-btn:hover .in{ background:var(--gold-500); color:var(--indigo-900); }
.cmp-btn:hover .in i{ animation:cmp-fly .8s ease forwards; }
@keyframes cmp-fly{
  0%{ transform:translate(0,0); opacity:1; }
  45%{ transform:translate(22px,-22px); opacity:0; }
  46%{ transform:translate(-22px,22px); opacity:0; }
  100%{ transform:translate(0,0); opacity:1; }
}

/* ============================================================
   RESPONSIVE — tablet & mobile: stacked cards, all open
   ============================================================ */
@media (max-width:991.98px){
  .cmp-panels{
    display:grid;
    grid-template-columns:repeat(2, 1fr);
    height:auto;
    gap:16px;
  }
  .cmp-panel:last-child{ grid-column:1 / -1; }
  .cmp-panel{ flex:none; cursor:default; }
  .cmp-panel.is-active{ box-shadow:none; }
  .cmp-panel::after{ opacity:.14; }
  .cmp-collapsed{ display:none; }
  .cmp-open{
    position:static;
    width:auto;
    padding:28px 26px 26px;
  }
  .cmp-open > *{ opacity:1; transform:none; transition:none; }
  .cmp-panel.is-active .cmp-open > *{ transition:none; }
  .cmp-open .big{ font-size:46px; }
  .cmp-panel:hover{ transform:translateY(-4px); }
}
@media (max-width:575.98px){
  .cmp-panels{ grid-template-columns:1fr; }
  .cmp-panel:last-child{ grid-column:auto; }
  .cmp-open{ padding:24px 22px 22px; }
  .cmp-btn{ display:block; }
  .cmp-btn .in{ justify-content:center; padding:16px 20px; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .cmp-section *,
  .cmp-section *::before,
  .cmp-section *::after{
    animation:none !important;
    transition:none !important;
  }
  .cmp-js .cmp-rv:not(.is-in){ opacity:1; }
  .cmp-js .cmp-accent:not(.is-in){ transform:none; }
  .cmp-open > *{ opacity:1; transform:none; }
  .cmp-panel:not(.is-active) .cmp-open > *{ opacity:0; }
}
@media (prefers-reduced-motion:reduce) and (max-width:991.98px){
  .cmp-panel:not(.is-active) .cmp-open > *{ opacity:1; }
}


.dev-section{ background:var(--mist-100); }

/* ---------- Scroll-reveal engine (active once the script runs) ---------- */
.dev-js .dev-rv:not(.is-in){ opacity:0; }
.dev-rv.is-in{
  animation-duration:.9s;
  animation-timing-function:cubic-bezier(.2,.8,.2,1);
  animation-delay:var(--d, 0s);
  animation-fill-mode:backwards;
}
.dev-rv.is-in[data-a="fold"] { animation-name:dev-fold; animation-duration:1s; }
.dev-rv.is-in[data-a="up"]   { animation-name:dev-up; }
.dev-rv.is-in[data-a="left"] { animation-name:dev-left; }
.dev-rv.is-in[data-a="right"]{ animation-name:dev-right; }
.dev-rv.is-in[data-a="pop"]  { animation-name:dev-pop; animation-timing-function:cubic-bezier(.34,1.56,.64,1); }

@keyframes dev-fold { from{ opacity:0; transform:perspective(800px) rotateX(-80deg); transform-origin:top center; } to{ opacity:1; transform:perspective(800px) rotateX(0); transform-origin:top center; } }
@keyframes dev-up   { from{ opacity:0; transform:translateY(30px); } to{ opacity:1; transform:none; } }
@keyframes dev-left { from{ opacity:0; transform:translateX(-60px); } to{ opacity:1; transform:none; } }
@keyframes dev-right{ from{ opacity:0; transform:translateX(60px); } to{ opacity:1; transform:none; } }
@keyframes dev-pop  { from{ opacity:0; transform:scale(.85); } to{ opacity:1; transform:scale(1); } }
@keyframes dev-spin { from{ transform:scale(0) rotate(-200deg); } 70%{ transform:scale(1.18) rotate(10deg); } to{ transform:scale(1) rotate(0); } }
@keyframes dev-mask { from{ clip-path:inset(0 100% 0 0); } to{ clip-path:inset(0 0 0 0); } }

/* ---------- Heading ---------- */
.dev-head{
  text-align:center;
  max-width:720px;
  margin:0 auto 50px;
}
.dev-accent{
  display:block;
  width:54px; height:4px;
  margin:0 auto 22px;
  border-radius:2px;
  background:var(--gold-500);
  transform-origin:center;
  transition:transform .8s ease .1s;
}
.dev-js .dev-accent:not(.is-in){ transform:scaleX(0); }
.dev-title{
  font-size:clamp(28px, 3.6vw, 40px);
  font-weight:600;
  line-height:1.24;
  margin:0 0 16px;
}
.dev-title em{ font-style:italic; color:var(--purple-500); }
.dev-lead{
  color:var(--ink-600);
  font-size:15.5px;
  line-height:1.8;
  margin:0;
}

/* ---------- Two timeline columns ---------- */
.dev-grid{
  display:grid;
  grid-template-columns:repeat(2, 1fr);
  gap:0 56px;
  max-width:1060px;
  margin:0 auto;
}
.dev-col{ position:relative; }
.dev-list{
  list-style:none;
  margin:0; padding:0;
  display:flex;
  flex-direction:column;
  gap:16px;
}
/* grey track, coloured fill that draws down, and a travelling gold dot */
.dev-col::before,
.dev-col::after{
  content:"";
  position:absolute;
  left:22px;
  top:24px; bottom:24px;
  width:2px;
  border-radius:1px;
}
.dev-col::before{ background:var(--mist-200); }
.dev-col::after{
  background:var(--teal-600);
  transform-origin:top;
  transition:transform 1.8s cubic-bezier(.4,0,.2,1) .3s;
}
.dev-js .dev-col:not(.is-in)::after{ transform:scaleY(0); }
.dev-dot{
  position:absolute;
  left:18px;
  top:24px;
  width:10px; height:10px;
  border-radius:50%;
  background:var(--gold-500);
  z-index:1;
  opacity:0;
  animation:dev-travel 5s ease-in-out infinite;
}
.dev-col + .dev-col .dev-dot{ animation-delay:1.6s; }
@keyframes dev-travel{
  0%{ top:24px; opacity:0; }
  10%{ opacity:1; }
  90%{ opacity:1; }
  100%{ top:calc(100% - 34px); opacity:0; }
}

/* ---------- List items ---------- */
.dev-item{
  --c:var(--teal-600);
  position:relative;
  z-index:2;
  display:flex;
  align-items:center;
  gap:18px;
}
.dev-item:nth-child(4n+2){ --c:var(--purple-500); }
.dev-item:nth-child(4n+3){ --c:var(--gold-600); }
.dev-item:nth-child(4n+4){ --c:var(--indigo-700); }

.dev-item .ic{
  position:relative;
  flex:0 0 auto;
  width:46px; height:46px;
  border-radius:50%;
  background:var(--c);
  color:#fff;
  font-size:17px;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 0 0 6px var(--mist-100);       /* masks the line behind the icon */
  border:2px solid var(--c);
  transition:background .35s ease, color .35s ease, transform .4s cubic-bezier(.34,1.56,.64,1);
}
.dev-item .ic::after{                          /* ring that rings out on hover */
  content:"";
  position:absolute;
  inset:-2px;
  border-radius:50%;
  border:2px solid var(--c);
  opacity:0;
}
.dev-item .tx{
  flex:1 1 auto;
  min-width:0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:14px;
  background:#fff;
  border:1px solid var(--line);
  border-radius:var(--radius-md);
  padding:15px 20px;
  font-size:14.5px;
  font-weight:500;
  line-height:1.55;
  color:var(--indigo-900);
  transition:transform .35s ease, border-color .3s ease, box-shadow .3s ease;
}
.dev-item .tx i{
  flex:0 0 auto;
  font-size:12px;
  color:var(--c);
  opacity:0;
  transform:translateX(-8px);
  transition:opacity .3s ease, transform .3s ease;
}

/* icon spins in, then the text is unmasked left-to-right */
.dev-item.is-in .ic{ animation:dev-spin .9s cubic-bezier(.34,1.2,.5,1) calc(var(--d, 0s) + .2s) backwards; }
.dev-item.is-in .tx{ animation:dev-mask .9s cubic-bezier(.2,.8,.2,1) calc(var(--d, 0s) + .4s) backwards; }

@media (hover:hover){
  .dev-item:hover .ic{ background:#fff; color:var(--c); transform:scale(1.12) rotate(-8deg); }
  .dev-item:hover .ic::after{ animation:dev-ring .9s ease-out; }
  .dev-item:hover .tx{ transform:translateX(7px); border-color:var(--c); box-shadow:var(--shadow-soft); }
  .dev-item:hover .tx i{ opacity:1; transform:none; }
}
@keyframes dev-ring{
  0%{ transform:scale(1); opacity:.8; }
  100%{ transform:scale(1.9); opacity:0; }
}

/* ---------- Closing note ---------- */
.dev-note{
  display:flex;
  align-items:flex-start;
  gap:16px;
  max-width:820px;
  margin:48px auto 0;
  background:#fff;
  border:1px solid var(--line);
  border-left:5px solid var(--gold-500);
  border-radius:var(--radius-md);
  padding:22px 26px;
  transition:box-shadow .35s ease, transform .35s ease;
}
.dev-note:hover{ box-shadow:var(--shadow-soft); transform:translateY(-3px); }
.dev-note .ic{
  flex:0 0 auto;
  position:relative;
  width:40px; height:40px;
  border-radius:50%;
  background:var(--gold-500);
  color:var(--indigo-900);
  font-size:16px;
  display:flex; align-items:center; justify-content:center;
}
.dev-note .ic::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:50%;
  border:2px solid var(--gold-500);
  animation:dev-ring 2.4s ease-out infinite;
}
.dev-note p{
  margin:0;
  padding-top:2px;
  font-size:14.5px;
  line-height:1.8;
  color:var(--ink-600);
}
.dev-note p strong{ color:var(--indigo-900); }

/* ---------- Responsive ---------- */
@media (max-width:767.98px){
  .dev-grid{ grid-template-columns:1fr; gap:16px; }
  /* on mobile both columns come from the same side */
  .dev-rv.is-in[data-a="right"]{ animation-name:dev-left; }
}
@media (max-width:575.98px){
  .dev-item{ gap:14px; }
  .dev-item .ic{ width:40px; height:40px; font-size:15px; }
  .dev-col::before, .dev-col::after{ left:19px; top:20px; bottom:20px; }
  .dev-dot{ left:15px; }
  .dev-item .tx{ padding:13px 15px; font-size:14px; }
  .dev-note{ flex-direction:column; padding:22px 20px; }
}

/* ---------- Respect "reduce motion" ---------- */
@media (prefers-reduced-motion:reduce){
  .dev-section *,
  .dev-section *::before,
  .dev-section *::after{
    animation:none !important;
    transition:none !important;
  }
  .dev-dot{ display:none; }
  .dev-js .dev-rv:not(.is-in){ opacity:1; }
  .dev-js .dev-accent:not(.is-in){ transform:none; }
  .dev-js .dev-col:not(.is-in)::after{ transform:none; }
}