/* =============================================
   VARIABLES & RESET
============================================= */
:root {
  --primary:     #1B4F72;
  --primary-dk:  #0E3A55;
  --primary-lt:  #E8F0F5;
  --accent:      #2C7DA0;
  --accent-lt:   #E6F3F9;
  --dark:        #0F172A;
  --navy:        #1E293B;
  --mid:         #334155;
  --muted:       #64748B;
  --border:      #E2E8F0;
  --offwhite:    #F8F9FB;
  --white:       #FFFFFF;
  --text:        #1E293B;
  --green:       #10B981;
  --orange:      #F59E0B;
  --shadow-sm:   0 1px 3px rgba(0,0,0,.07), 0 1px 2px rgba(0,0,0,.05);
  --shadow-md:   0 4px 16px rgba(0,0,0,.08);
  --shadow-lg:   0 10px 40px rgba(0,0,0,.12);
  --hero-gradient-start: #0A2F44;
  --hero-gradient-mid:   #134B6B;
  --hero-gradient-end:   #0D3A52;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: 'Segoe UI', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: var(--white);
  font-size: 15px;
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }


/* =============================================
   NAVBAR SHELL
============================================= */
.site-nav {
  background: var(--white);
  border-bottom: 2px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 999;
  box-shadow: 0 2px 12px rgba(27, 79, 114, 0.08);
}

.site-nav .nav-item {
  position: relative;
}

.site-nav .navbar-nav {
  display: flex !important;
  gap: 4px !important;
  flex-wrap: nowrap;
  align-items: center;
}

/* ── Top-level trigger links/buttons ── */
.site-nav .navbar-nav > .nav-item > .nav-link {
  background: none;
  border: none;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--mid);
  padding: 0.5rem 0.8rem !important;
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  transition: background .2s, color .2s;
}

.site-nav .navbar-nav > .nav-item > .nav-link:hover {
  color: var(--primary) !important;
  background: var(--primary-lt);
}

.site-nav .navbar-nav > .nav-item > .nav-link.active-link {
  color: var(--primary) !important;
  font-weight: 700;
  background: var(--primary-lt);
}

.site-nav .nav-item.open > .nav-link {
  color: var(--primary) !important;
  background: var(--primary-lt);
}

/* Caret */
.nav-caret {
  font-size: 0.5rem;
  color: var(--muted);
  transition: transform 0.2s ease;
}

.site-nav .nav-item.open > .nav-link .nav-caret {
  transform: rotate(180deg);
}


/* =============================================
   DROP PANEL
============================================= */
.drop-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: -180%;
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 10px;
  box-shadow: 0 8px 28px rgba(27, 79, 114, 0.11);
  padding: 0.5rem;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(6px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 1000;
}

.nav-item.open > .drop-panel {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
}

/* Wide multi-column panel — increased width so links fit on one line */
.drop-wide {
  min-width: 720px;
  padding: 1.1rem 1.2rem;
}

/* Small single-column panel */
.drop-sm {
  min-width: 230px;
  padding: 0.4rem;
  left: -50px;
}

/* Right-anchor panels on the last 4 items */
.navbar-nav .nav-item:nth-last-child(-n+4) .drop-panel {
  
}


/* =============================================
   DROP PANEL INNER LAYOUT
============================================= */
.drop-cols {
  display: flex;
  gap: 0;
}

/* Each column gets equal share — no shrinking */
.drop-col {
  flex: 1 1 0;
  min-width: 0;
  padding: 0 1.2rem;
}

.drop-col:first-child { padding-left: 0; }
.drop-col:last-child  { padding-right: 0; }

.drop-col + .drop-col {
  border-left: 1px solid var(--border);
}

/* Column heading */
.drop-heading {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 0.55rem;
  padding-bottom: 0.4rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}


/* =============================================
   DROP LINK — single line, no wrapping
============================================= */
.drop-link {
  display: block;
  font-size: 0.845rem;
  font-weight: 400;
  color: var(--mid);
  padding: 0.38rem 0.6rem;
  border-radius: 5px;
  background: none;
  transition: background 0.12s, color 0.12s;
  margin-bottom: 1px;
  line-height: 1.4;
  white-space: nowrap;
}

.drop-link:hover {
  background: var(--primary-lt) !important;
  color: var(--primary) !important;
}


/* =============================================
   CTA BUTTON - Lift with shadow, NO COLOR CHANGE AT ALL
   Background AND Text stay EXACTLY the same on hover
============================================= */
.site-nav .nav-cta,
.site-nav .nav-btn,
.nav-link.nav-cta {
  background: var(--primary) !important;
  color: var(--white) !important;
  border-radius: 6px !important;
  padding: .42rem 1.1rem !important;
  margin-left: .4rem;
  font-size: .84rem !important;
  font-weight: 600 !important;
  white-space: nowrap;
  transition: transform 0.2s ease, box-shadow 0.2s ease !important;
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  border: none !important;
  cursor: pointer;
}

/* Hover - ONLY lift and shadow, NO background change, NO text color change */
.site-nav .nav-cta:hover,
.site-nav .nav-btn:hover,
.nav-link.nav-cta:hover {
  background: var(--primary) !important;  /* SAME background - NO change */
  color: var(--white) !important;         /* SAME white text - NO change */
  transform: translateY(-2px) !important; /* Lift up */
  box-shadow: 0 6px 16px rgba(27, 79, 114, 0.25) !important; /* Subtle shadow */
  opacity: 1 !important;                  /* No opacity change */
}

/* Prevent any inherited hover effects from parent */
.site-nav .navbar-nav > .nav-item > .nav-link.nav-cta:hover {
  background: var(--primary) !important;
  color: var(--white) !important;
}

/* Active/Click state */
.site-nav .nav-cta:active,
.site-nav .nav-btn:active,
.nav-link.nav-cta:active {
  background: var(--primary) !important;
  color: var(--white) !important;
  transform: translateY(0) !important;
  box-shadow: none !important;
}


/* =============================================
   MOBILE
============================================= */
@media (max-width: 991px) {
  .site-nav .nav-item.has-drop {
    flex-direction: column;
    align-items: stretch;
  }

  .drop-panel,
  .drop-panel.drop-wide,
  .drop-panel.drop-sm {
    position: static;
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: none !important;
    box-shadow: none;
    border: none;
    border-top: 1px dashed var(--border);
    border-radius: 0;
    padding: 0.5rem 0 0.75rem 0.75rem;
    min-width: 0;
    display: none;
  }

  .nav-item.open > .drop-panel { display: block; }

  .drop-cols { flex-direction: column; }

  .drop-col {
    padding: 0.5rem 0;
    border-left: none !important;
  }

  .drop-col + .drop-col {
    border-top: 1px solid var(--border);
  }

  /* On mobile, allow wrapping since screen is narrow */
  .drop-link,
  .drop-heading {
    white-space: normal;
  }

  .navbar-nav .nav-item:nth-last-child(-n+4) .drop-panel {
    left: 0;
    right: auto;
  }

  .site-nav .nav-cta,
  .site-nav .nav-btn {
    margin: 0.5rem 0 0;
    justify-content: center;
    width: 100%;
  }
}


/* =============================================
   BUTTONS & UTILITIES
============================================= */
.btn-primary-et {
  background: var(--accent);
  color: var(--white);
  border: none;
  padding: .72rem 1.7rem;
  border-radius: 6px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-block;
  transition: background .2s, transform .15s;
}
.btn-primary-et:hover { background: var(--primary-dk); color: var(--white); transform: translateY(-1px); }

.btn-secondary-et {
  background: var(--white);
  color: var(--primary);
  border: 1.5px solid var(--primary);
  padding: .7rem 1.7rem;
  border-radius: 6px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-block;
  transition: all .2s;
}
.btn-secondary-et:hover { background: var(--primary-lt); color: var(--primary); }

.btn-cta-white {
  background: var(--white);
  color: var(--primary);
  border: none;
  padding: .8rem 2rem;
  border-radius: 6px;
  font-size: .95rem;
  font-weight: 700;
  display: inline-block;
  transition: all .2s;
}
.btn-cta-white:hover { background: var(--primary-lt); color: var(--primary); transform: translateY(-1px); }

.page { display: none; }
.page.active { display: block; }
/* =============================================
   HERO - STATIC BACKGROUND (NO ANIMATIONS, NO CIRCLES/GRID)
============================================= */
.hero {
  background: linear-gradient(135deg, var(--hero-gradient-start) 0%, var(--hero-gradient-mid) 50%, var(--hero-gradient-end) 100%);
  color: var(--white);
  padding: 70px 0 60px;
  position: relative;
  overflow: hidden;
}

/* Static pattern background - no animation - REMOVED to eliminate matrix design */
.hero::before {
  display: none;
}

/* Top accent line - REMOVED */
.hero-line-accent {
  display: none;
}

/* Decorative concentric rings - REMOVED */
.hero-ring-1,
.hero-ring-2,
.hero-ring-3 {
  display: none;
}

/* Decorative grid SVG - REMOVED */
.hero-grid-deco {
  display: none;
}

/* Wave bottom decoration - static (keeping as is, not a circle/square matrix) */
.hero-wave-bottom {
  position: absolute;
  bottom: -2px;
  left: 0;
  width: 100%;
  height: 60px;
  pointer-events: none;
  z-index: 2;
}

.hero-wave-bottom svg {
  width: 100%;
  height: 100%;
}

.hero .container-fluid {
  max-width: 1300px;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

/* Hero badge - static */
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(168,216,234,0.15);
  backdrop-filter: blur(4px);
  border: 1px solid rgba(168,216,234,0.35);
  color: #A8D8EA;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.45rem 1.2rem;
  border-radius: 40px;
  margin-bottom: 1.5rem;
}

/* Hero heading - static */
.hero h1 {
  font-size: 2.3rem;
  font-weight: 800;
  line-height: 1.2;
  margin-bottom: 1.2rem;
  letter-spacing: -.5px;
}

.hero h1 em {
  font-style: normal;
  background: linear-gradient(135deg, #A8D8EA 0%, #6BB5D0 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  position: relative;
  display: inline-block;
}

.hero h1 em::after {
  content: '';
  position: absolute;
  bottom: 6px;
  left: 0;
  width: 100%;
  height: 8px;
  background: linear-gradient(90deg, rgba(168,216,234,0.3), rgba(168,216,234,0.6), rgba(168,216,234,0.3));
  border-radius: 4px;
  z-index: -1;
}

/* Hero subtext */
.hero-sub {
  color: rgba(255,255,255,.85);
  font-size: 1rem;
  max-width: 640px;
  margin: 0 auto 1.8rem;
  line-height: 1.7;
}

/* Hero action buttons */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.8rem;
}

.hero-actions .btn-secondary-et {
  background: transparent;
  border-color: rgba(255,255,255,.4);
  color: var(--white);
}

.hero-actions .btn-secondary-et:hover {
  background: rgba(255,255,255,.12);
  border-color: rgba(255,255,255,.6);
  color: var(--white);
}

/* Trust badges row */
.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(255,255,255,.2);
}

.trust-item {
  font-size: 0.82rem;
  color: rgba(255,255,255,.75);
  display: flex;
  align-items: center;
  gap: 8px;
  transition: transform 0.2s;
}

.trust-item:hover {
  transform: translateX(3px);
  color: rgba(255,255,255,.95);
}

.trust-item i {
  color: var(--green);
  font-size: 0.8rem;
}
/* Unique class - NO color change on hover - STRONG OVERRIDE */
.btn-static-primary {
  background: white;
  color: #0d3a52;
  border: none !important;
  padding: 0.8rem 1.8rem !important;
  border-radius: 40px !important;
  font-weight: 600 !important;
  font-size: 0.9rem !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.btn-static-primary:hover {
  /*background: var(--primary) !important;*/
  /*color: var(--white) !important;*/
  transform: translateY(-2px) !important;
  /* NO background color change - stays exactly the same */
}

/* =============================================
   ABOUT INTRO SECTION (NEW)
============================================= */
.about-intro {
  background: linear-gradient(to bottom, var(--white) 0%, #FCFDFE 100%);
  padding: 70px 0 50px;
  /*border-bottom: 1px solid var(--border);*/
  position: relative;
}

.about-intro .section-badge {
  display: inline-block;
  background: var(--primary-lt);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.4rem 1.2rem;
  border-radius: 40px;
  margin-bottom: 1.2rem;
}

.about-intro h2 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 1.2rem;
  line-height: 1.3;
}

.about-intro h2 span {
  color: var(--primary);
  /*border-bottom: 3px solid rgba(27,79,114,0.2);*/
  display: inline-block;
}

.about-description {
  font-size: 1rem;
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: 1.2rem;
}

.stats-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin: 1.8rem 0 1.5rem;
}

.stat-block {
  display: flex;
  flex-direction: column;
}

.stat-number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.2;
}

.stat-label {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 500;
}

.about-feature-list {
  list-style: none;
  padding-left: 0;
  margin-top: 1rem;
}

.about-feature-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: var(--mid);
}

.about-feature-list li i {
  color: var(--green);
  width: 20px;
  font-size: 0.9rem;
}

.about-image-placeholder {
  background: var(--offwhite);
  border-radius: 24px;
  padding: 2rem;
  text-align: center;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border);
}

.about-image-placeholder .icon-big {
  font-size: 3.5rem;
  color: var(--primary);
  background: var(--primary-lt);
  width: 90px;
  height: 90px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  margin: 0 auto 1.2rem;
}

@media (max-width: 768px) {
  .about-intro {
    padding: 50px 0;
    text-align: center;
  }
  .stats-grid {
    justify-content: center;
  }
  .about-feature-list li {
    justify-content: center;
  }
}

/* =============================================
   SECTION HEADINGS
============================================= */
.section-head h2 { 
  font-weight: 800;
  color: var(--dark);
}

.eyebrow-tag {
  color: var(--accent);
  font-weight: 600;
  font-size: 0.8rem;
  letter-spacing: 1px;
  text-transform: uppercase;
  display: inline-block;
  margin-bottom: 0.75rem;
}

/* =============================================
   SERVICES SECTION
============================================= */
.services-section { background: var(--offwhite); padding: 10px 0; }

.services-section .section-head { margin-bottom: 2.5rem; }

.offering-block { margin-bottom: 3rem; }

.offering-label-wrap {
  display: flex;
  justify-content: center;
  margin-bottom: 1.8rem;
}

.offering-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40%;
  gap: 14px;
  padding: 18px 28px;
  background: var(--white);
  border-radius: 12px;
  border: 1px solid var(--border);
  border-left: 6px solid var(--primary);
  box-shadow: 0 2px 14px rgba(27,79,114,0.08);
  transition: box-shadow .25s, transform .25s;
}

.offering-label:hover {
  box-shadow: 0 6px 24px rgba(27,79,114,0.13);
  transform: translateY(-2px);
}

.offering-label.mkt {
  border-left-color: var(--accent);
}

.offering-label.mkt:hover {
  box-shadow: 0 6px 24px rgba(44,125,160,0.13);
}

.offering-label-icon {
  width: 54px;
  height: 54px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  flex-shrink: 0;
}

.offering-label:hover .offering-label-icon { transform: scale(1.08); }

.offering-label.tech .offering-label-icon {
  background: var(--primary-lt);
  color: var(--primary);
}

.offering-label.mkt .offering-label-icon {
  background: var(--accent-lt);
  color: var(--accent);
}

.offering-label-body { display: flex; flex-direction: column; gap: 2px; }

.offering-label-title {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
  line-height: 1.2;
  white-space: nowrap;
}

.offering-label-sub {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
  white-space: nowrap;
}

@media (max-width: 575px) {
  .offering-label { padding: 12px 16px; gap: 12px; width: 90%; }
  .offering-label-title { font-size: .9rem; white-space: normal; }
  .offering-label-sub   { white-space: normal; }
  .offering-label-icon  { width: 36px; height: 36px; font-size: .9rem; }
  .faq-tabs,.rcp-callout,.rcp-ineligible-item,.rcp-process-step {
    flex-direction: column;
  }
  .sup-sla-row,.sup-hours-row {
    flex-direction: column;
  }
}

/* SERVICE CARDS */
.svc-card {
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 14px;
  padding: 2rem 1.5rem 1.6rem;
  text-align: center;
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition: box-shadow .25s, border-color .25s, transform .25s;
  position: relative;
  overflow: hidden;
}

.svc-card::after { display: none; }

.svc-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
  transform: translateY(-5px);
}

.svc-icon-wrap {
  width: 65px;
  height: 65px;
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  margin-bottom: 1.2rem;
  transition: transform .25s;
}

.svc-card:hover .svc-icon-wrap { transform: scale(1.05); }

.svc-icon-wrap.tech { background: var(--primary-lt); color: var(--primary); }
.svc-icon-wrap.mkt  { background: var(--accent-lt);  color: var(--accent);  }

.svc-card h6 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: .5rem;
}

.svc-card p {
  font-size: .82rem;
  color: var(--muted);
  line-height: 1.65;
  margin-bottom: 1rem;
  flex: 1;
}

.svc-card-highlight {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .74rem;
  color: var(--muted);
  margin-bottom: .75rem;
  padding: .25rem .7rem;
  background: var(--offwhite);
  border-radius: 20px;
  border: 1px solid var(--border);
}

.svc-card-highlight i { color: var(--green); font-size: .72rem; }

.svc-link {
  font-size: .8rem;
  font-weight: 600;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 5px;
  transition: gap .2s;
}

.svc-link.mkt { color: var(--accent); }
.svc-link:hover { gap: 9px; }
.svc-link i { font-size: .65rem; }

/* 4-CARD ROW */
.four-card-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 1rem;
}

.four-card-row > .four-card-item {
  flex: 0 0 calc(25% - 1.125rem);
  max-width: calc(25% - 1.125rem);
}

.four-card-item .svc-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-md);
}

.tech-row .four-card-item .svc-card:hover {
  border-color: var(--primary);
  box-shadow: var(--shadow-md);
}

@media (max-width: 991px) {
  .four-card-row > .four-card-item {
    flex: 0 0 calc(50% - 0.75rem);
    max-width: calc(50% - 0.75rem);
  }
  .val-card--wide {
    flex-direction: column !important;
  }
}

/* =============================================
   HOW IT WORKS
============================================= */
.how-it-works {
  background: linear-gradient(135deg, #F8F9FB 0%, #FFFFFF 100%);
  padding: 20px 0;
  position: relative;
  overflow: hidden;
}

.how-it-works::before {
  content: '';
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 90%; height: 90%;
  background: radial-gradient(circle, rgba(27,79,114,0.02) 0%, transparent 70%);
  pointer-events: none;
}

.hiw-supply-chain {
  max-width: 900px;
  margin: 40px auto 0;
  position: relative;
  z-index: 2;
}

.hiw-chain-item {
  display: flex;
  align-items: flex-start;
  gap: 25px;
  position: relative;
  margin-bottom: 35px;
}

.hiw-chain-item:last-child { margin-bottom: 0; }
.hiw-chain-item:last-child .hiw-chain-connector { display: none; }

.hiw-chain-icon-wrapper { position: relative; flex-shrink: 0; }

.hiw-chain-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 2;
  box-shadow: 0 12px 28px rgba(27,79,114,0.18);
}

.hiw-chain-icon i {
  font-size: 1.6rem;
  color: var(--white);
}

.hiw-chain-number {
  position: absolute;
  bottom: -2px; right: -2px;
  width: 28px; height: 28px;
  background: var(--white);
  border: 2px solid var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: 0.75rem;
  color: var(--primary);
  z-index: 3;
  box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.hiw-chain-content {
  flex: 1;
  background: var(--white);
  border-radius: 18px;
  padding: 16px 22px;
  position: relative;
  box-shadow: 0 6px 20px rgba(0,0,0,0.05);
  border: 1px solid var(--border);
}

.hiw-chain-content::before {
  content: '';
  position: absolute;
  left: -10px; top: 28px;
  width: 20px; height: 20px;
  background: var(--white);
  border-left: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  transform: rotate(45deg);
}

.hiw-chain-content h5 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 8px;
  position: relative;
  display: inline-block;
}

.hiw-chain-content h5::after {
  content: '';
  position: absolute;
  bottom: -3px; left: 0;
  width: 35px; height: 2px;
  background: var(--primary);
  border-radius: 2px;
}

.hiw-chain-content p {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.6;
  margin-bottom: 12px;
}

.hiw-chain-feature {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.7rem;
  color: var(--primary);
  background: var(--primary-lt);
  padding: 4px 12px;
  border-radius: 30px;
  font-weight: 600;
}

.hiw-chain-feature i { font-size: 0.7rem; }

.hiw-chain-connector {
  position: absolute;
  left: 35px;
  top: 70px;
  width: 2px;
  height: calc(100% + 15px);
  background: linear-gradient(180deg, var(--primary) 0%, var(--accent) 50%, transparent 100%);
  z-index: 1;
}

.hiw-chain-connector::before {
  content: '';
  position: absolute;
  bottom: -8px; left: 50%;
  transform: translateX(-50%);
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

@media (max-width: 768px) {
  .hiw-chain-item { flex-direction: column; align-items: center; gap: 20px; margin-bottom: 40px; }
  .hiw-chain-icon { width: 60px; height: 60px; }
  .hiw-chain-icon i { font-size: 1.4rem; }
  .hiw-chain-number { width: 24px; height: 24px; font-size: 0.7rem; }
  .hiw-chain-content { text-align: center; padding: 14px 18px; }
  .hiw-chain-content::before {
    left: 50%; top: -10px;
    transform: translateX(-50%) rotate(45deg);
    border-left: 1px solid var(--border);
    border-top: 1px solid var(--border);
    border-bottom: none; border-right: none;
  }
  .hiw-chain-content h5::after { left: 50%; transform: translateX(-50%); }
  .hiw-chain-connector { display: none; }
}

/* =============================================
   PLATFORM MODULES
============================================= */
.subsections {
  color: var(--dark);
  padding: 80px 0;
  position: relative;
  overflow: hidden;
  /*border-top: 1px solid rgba(27,79,114,0.1);*/
  /*border-bottom: 1px solid rgba(27,79,114,0.1);*/
}

.subsections::before {
  content: '';
  position: absolute;
  top: -80px; left: -80px;
  width: 350px; height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(27,79,114,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.subsections::after {
  content: '';
  position: absolute;
  bottom: -80px; right: -80px;
  width: 350px; height: 350px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(44,125,160,0.06) 0%, transparent 70%);
  pointer-events: none;
}

.subsections .section-head h2 { color: var(--dark); white-space: normal; }
.subsections .section-head p  { color: var(--muted); max-width: 500px; margin-left: auto; margin-right: auto; }

.subsections .eyebrow-tag.light { color: var(--accent); }

.modules-row {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  padding-bottom: 8px;
  justify-content: center;
  scrollbar-width: thin;
  scrollbar-color: rgba(27,79,114,.15) transparent;
}

.modules-row::-webkit-scrollbar { height: 4px; }
.modules-row::-webkit-scrollbar-thumb { background: rgba(27,79,114,.15); border-radius: 4px; }

.sub-module-card {
  flex: 0 0 auto;
  width: 148px;
  background: var(--white);
  border: 1.5px solid rgba(27,79,114,0.12);
  border-radius: 14px;
  padding: 22px 12px 18px;
  text-align: center;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
  cursor: default;
  box-shadow: 0 2px 8px rgba(27,79,114,0.05);
}

.sub-module-card:hover {
  background: var(--white);
  border-color: var(--primary);
  transform: translateY(-5px);
  box-shadow: 0 10px 28px rgba(27,79,114,0.18);
}

.sub-module-card .mod-icon {
  width: 52px; height: 52px;
  background: var(--primary-lt);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto .9rem;
  transition: background .25s;
}

.sub-module-card:hover .mod-icon { background: var(--primary-lt); }
.sub-module-card .mod-icon i { color: var(--primary); font-size: 1.15rem; }
.sub-module-card:hover .mod-icon i { color: var(--primary); }

.sub-module-card span {
  font-size: .74rem;
  color: var(--mid);
  font-weight: 600;
  display: block;
  line-height: 1.4;
}

.sub-module-card:hover span { color: var(--mid); }

/* =============================================
   TESTIMONIALS
============================================= */
.testimonials { background: var(--white); }

.testi-card {
  background: var(--offwhite);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 1.8rem;
  height: 100%;
  transition: box-shadow .25s, border-color .25s;
}

.testi-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--primary);
}

.testi-stars { display: flex; gap: 3px; margin-bottom: 1rem; }
.testi-stars i { color: var(--orange); font-size: .85rem; }

.testi-card > p {
  font-size: .85rem;
  color: var(--mid);
  line-height: 1.75;
  margin-bottom: 1.4rem;
  /*font-style: italic;*/
}

.testi-author { display: flex; align-items: center; gap: 10px; }

.testi-avatar {
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--primary);
  color: var(--white);
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem;
  font-weight: 700;
  flex-shrink: 0;
}

.testi-author strong { display: block; font-size: .85rem; font-weight: 700; color: var(--dark); }
.testi-author span   { font-size: .75rem; color: var(--muted); }

/* =============================================
   CTA BAND
============================================= */
.cta-band {
  background: #f8fafc;
  padding: 70px 0;
  position: relative;
  overflow: hidden;
  /*border-top: 1px solid rgba(27,79,114,0.1);*/
  /*border-bottom: 1px solid rgba(27,79,114,0.1);*/
}

.cta-band::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at 20% 40%, rgba(27,79,114,0.05) 0%, transparent 50%);
  pointer-events: none;
}

.cta-band::after {
  content: '';
  position: absolute;
  bottom: -100px; right: -100px;
  width: 300px; height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(44,125,160,0.08) 0%, transparent 70%);
  pointer-events: none;
}

.cta-band .container { position: relative; z-index: 2; }

.cta-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(27,79,114,0.1);
  border: 1px solid rgba(27,79,114,0.2);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  padding: 0.4rem 1rem;
  border-radius: 40px;
  margin-bottom: 1.2rem;
}

.cta-band h2 {
  font-size: 2.2rem;
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.3px;
  margin-bottom: 1rem;
  color: var(--dark);
}

.cta-band h2 em {
  font-style: normal;
  color: var(--primary);
  position: relative;
  display: inline-block;
}

.cta-band h2 em::after {
  content: '';
  position: absolute;
  bottom: 6px; left: 0;
  width: 100%; height: 8px;
  background: rgba(27,79,114,0.2);
  border-radius: 4px;
  z-index: -1;
}

.cta-band > .container > .row > .cta-left > p {
  color: var(--mid);
  font-size: 0.95rem;
  line-height: 1.7;
  max-width: 480px;
  margin-bottom: 1.8rem;
}

.cta-stats { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 1.8rem; }

.cta-stat-chip {
  display: flex;
  align-items: center;
  gap: 12px;
  background: rgba(27,79,114,0.08);
  border: 1px solid rgba(27,79,114,0.15);
  border-radius: 14px;
  padding: 0.8rem 1.2rem;
  transition: all 0.3s ease;
}

.cta-stat-chip:hover { background: rgba(27,79,114,0.15); transform: translateY(-2px); }

.cta-stat-chip .chip-num { font-size: 1.6rem; font-weight: 800; color: var(--primary); line-height: 1; }
.cta-stat-chip .chip-label { font-size: 0.75rem; color: var(--mid); line-height: 1.3; }

.cta-contacts { display: flex; flex-wrap: wrap; gap: 1.5rem; padding-top: 0.5rem; }

.cta-contact-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.85rem;
  color: var(--mid);
  transition: color 0.2s;
}

.cta-contact-item:hover { color: var(--primary); }
.cta-contact-item i { color: var(--primary); font-size: 0.9rem; width: 20px; }

.cta-form-card {
  background: var(--white);
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 40px rgba(0,0,0,0.08);
  border: 1px solid rgba(27,79,114,0.15);
}

.cta-form-header {
  background: var(--primary);
  padding: 1.2rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.cta-form-header-icon {
  width: 44px; height: 44px;
  background: rgba(255,255,255,.15);
  border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  color: var(--white);
  font-size: 1.2rem;
  flex-shrink: 0;
}

.cta-form-header-text h5 { font-size: 1rem; font-weight: 700; color: var(--white); margin: 0 0 4px; }
.cta-form-header-text p  { font-size: 0.75rem; color: rgba(255,255,255,.8); margin: 0; line-height: 1.4; }

.cta-form-body { padding: 1.5rem; background: var(--white); }

.cta-service-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 1.2rem; }

.cta-tab {
  font-size: 0.73rem;
  font-weight: 600;
  padding: 0.4rem 0.9rem;
  border-radius: 30px;
  border: 1.5px solid var(--border);
  color: var(--muted);
  background: var(--white);
  cursor: pointer;
  transition: all 0.2s;
}

.cta-tab:hover, .cta-tab.active {
  border-color: var(--primary);
  color: var(--primary);
  background: var(--primary-lt);
}

.cta-form-footer {
  padding: 1rem 1.5rem;
  background: #F8F9FB;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.cta-form-footer-note {
  font-size: 0.7rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 6px;
}

.cta-form-footer-note i { color: var(--green); font-size: 0.7rem; }

/* =============================================
   FORM INPUTS
============================================= */
.et-input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: .52rem .8rem;
  font-size: .83rem;
  color: var(--text);
  background: var(--white);
  outline: none;
  transition: border .2s, box-shadow .2s;
  font-family: inherit;
}

.et-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(27,79,114,.08);
}

.et-input::placeholder { color: #94A3B8; }
textarea.et-input { resize: vertical; }

.captcha-row { display: flex; gap: 8px; align-items: center; }
.captcha-row .et-input { flex: 1; }

.captcha-code {
  background: #F1F5F9;
  border: 1.5px solid var(--border);
  border-radius: 6px;
  padding: .5rem .9rem;
  font-size: .85rem;
  font-weight: 800;
  letter-spacing: 4px;
  color: var(--primary);
  white-space: nowrap;
  font-family: monospace;
}

.captcha-refresh {
  width: 34px; height: 34px;
  border: 1.5px solid var(--border);
  background: var(--white);
  border-radius: 6px;
  color: var(--muted);
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  transition: all .2s;
}

.captcha-refresh:hover { border-color: var(--primary); color: var(--primary); }

.btn-submit-full {
  width: 100%;
  background: var(--primary);
  color: var(--white);
  border: none;
  padding: .72rem;
  border-radius: 6px;
  font-size: .9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background .2s;
  font-family: inherit;
  margin-top: .2rem;
}

/* Gradient text without underline */
.gradient-text {
  font-style: normal;
  background: linear-gradient(135deg, #A8D8EA 0%, #6BB5D0 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  display: inline-block;
}

.btn-submit-full:hover { background: var(--primary-dk); }

/* =============================================
   PMP PAGE STYLES
============================================= */

/* PMP Hero Section */
.pmp-hero {
  background: linear-gradient(135deg, #0A2F44 0%, #134B6B 50%, #0D3A52 100%);
  padding: 80px 0 70px;
  color: white;
  position: relative;
  overflow: hidden;
}

.pmp-hero::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -50%;
  width: 200%;
  height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
  pointer-events: none;
}

.pmp-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(255,255,255,0.15);
  backdrop-filter: blur(4px);
  padding: 8px 20px;
  border-radius: 40px;
  font-size: 0.85rem;
  font-weight: 600;
  margin-bottom: 1.5rem;
  border: 1px solid rgba(255,255,255,0.2);
}

.pmp-main-title {
  font-size: 2.8rem;
  font-weight: 800;
  margin-bottom: 1rem;
  line-height: 1.2;
}

.pmp-subtitle {
  font-size: 1.1rem;
  max-width: 700px;
  margin: 0 auto;
  opacity: 0.9;
  line-height: 1.6;
}

.pmp-btn-outline {
  background: transparent !important;
  border-color: rgba(255,255,255,0.4) !important;
  color: white !important;
}

.pmp-btn-outline:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: white !important;
}

.pmp-trust-badges {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.pmp-trust-badges span {
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  gap: 8px;
  color: rgba(255,255,255,0.85);
}

.pmp-trust-badges i {
  color: #10B981;
}

/* PMP Overview Section */
.pmp-overview {
  padding: 80px 0;
  background: white;
}

.pmp-highlight {
  color: var(--primary);
  position: relative;
  display: inline-block;
}

.pmp-description {
  color: var(--mid);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

.pmp-stats-row {
  margin-bottom: 1.5rem;
}

.pmp-stat-card {
  background: var(--primary-lt);
  padding: 1rem;
  border-radius: 12px;
  text-align: center;
}

.pmp-stat-number {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.2;
}

.pmp-stat-label {
  font-size: 0.75rem;
  color: var(--muted);
  font-weight: 500;
}

.pmp-feature-list {
  list-style: none;
  padding-left: 0;
  margin-top: 1rem;
}

.pmp-feature-list li {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  font-size: 0.9rem;
  color: var(--mid);
}

.pmp-feature-list li i {
  color: var(--green);
  width: 20px;
}

.pmp-feature-list.large li {
  font-size: 0.95rem;
}

.pmp-info-card {
  background: linear-gradient(135deg, var(--primary-lt) 0%, white 100%);
  border-radius: 24px;
  padding: 2rem;
  text-align: center;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}

.pmp-info-icon {
  width: 70px;
  height: 70px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  color: white;
  font-size: 1.8rem;
}

.pmp-info-card h5 {
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--dark);
}

.pmp-batch-details {
  text-align: left;
  background: white;
  border-radius: 12px;
  padding: 1rem;
  margin-top: 1rem;
}

.pmp-batch-item {
  display: flex;
  justify-content: space-between;
  padding: 8px 0;
  border-bottom: 1px solid var(--border);
}

.pmp-batch-item:last-child {
  border-bottom: none;
}

.pmp-batch-item span {
  color: var(--muted);
  font-size: 0.85rem;
}

.pmp-batch-item strong {
  color: var(--dark);
  font-size: 0.85rem;
}

/* PMP Curriculum Section */
.pmp-curriculum {
  background: var(--offwhite);
  padding: 80px 0;
}

.pmp-curriculum-sub {
  max-width: 600px;
  margin: 0 auto;
  color: var(--muted);
}

.pmp-curriculum-card {
  background: white;
  border-radius: 20px;
  padding: 1.8rem;
  height: 100%;
  transition: all 0.3s ease;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}

.pmp-curriculum-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-lg);
  border-color: var(--primary);
}

.pmp-domain-badge {
  display: inline-block;
  background: var(--primary-lt);
  color: var(--primary);
  padding: 4px 12px;
  border-radius: 30px;
  font-size: 0.7rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.pmp-curriculum-card h5 {
  font-weight: 700;
  margin-bottom: 1rem;
  color: var(--dark);
}

.pmp-curriculum-list {
  list-style: none;
  padding-left: 0;
}

.pmp-curriculum-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
  font-size: 0.85rem;
  color: var(--mid);
}

.pmp-curriculum-list li i {
  color: var(--green);
  font-size: 0.75rem;
  width: 18px;
}

/* PMP Features Section */
.pmp-features {
  padding: 80px 0;
  background: white;
}

.pmp-metric-card {
  background: var(--primary-lt);
  border-radius: 16px;
  padding: 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid var(--border);
}

.pmp-metric-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow-md);
  background: white;
}

.pmp-metric-card i {
  font-size: 2rem;
  color: var(--primary);
  margin-bottom: 0.5rem;
}

.pmp-metric-number {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.2;
}

.pmp-metric-label {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.25rem;
}

/* PMP FAQ Section */
.pmp-faq {
  background: var(--offwhite);
  padding: 80px 0;
}

.pmp-faq-item {
  margin-bottom: 1rem;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  overflow: hidden;
}

.pmp-faq-item .accordion-button {
  background: white;
  font-weight: 600;
  color: var(--dark);
  padding: 1.2rem 1.5rem;
}

.pmp-faq-item .accordion-button:not(.collapsed) {
  background: var(--primary);
  color: white;
}

.pmp-faq-item .accordion-button:focus {
  box-shadow: none;
  border-color: var(--primary);
}

.pmp-faq-item .accordion-body {
  padding: 1.2rem 1.5rem;
  background: white;
  color: var(--mid);
  line-height: 1.6;
}

/* PMP CTA Section */
.pmp-cta-band {
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  padding: 45px 0;
  color: white;
}

.pmp-cta-badge {
  display: inline-flex;
  align-items: center;
  background: rgba(255,255,255,0.2);
  padding: 6px 16px;
  border-radius: 40px;
  font-size: 0.75rem;
  font-weight: 600;
  margin-bottom: 1rem;
}

.pmp-cta-band h2 {
  font-size: 2.2rem;
  font-weight: 800;
  margin-bottom: 1rem;
}

.pmp-cta-band h2 span {
  color: #8dd9f5;
}

.pmp-cta-band p {
  font-size: 1rem;
  opacity: 0.9;
  margin-bottom: 1.5rem;
  max-width: 500px;
}

.pmp-cta-stats {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.pmp-cta-stats span {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.85rem;
  background: rgba(255,255,255,0.1);
  padding: 6px 12px;
  border-radius: 30px;
}

.pmp-cta-form {
  background: white;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: var(--shadow-lg);
}

.pmp-cta-form-header {
  background: var(--primary);
  padding: 1.2rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 12px;
  color: white;
}

.pmp-cta-form-header i {
  font-size: 1.5rem;
  width: 40px;
  height: 40px;
  background: rgba(255,255,255,0.2);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pmp-cta-form-header h5 {
  margin: 0;
  font-size: 1rem;
  font-weight: 700;
}

.pmp-cta-form-header p {
  margin: 0;
  font-size: 0.75rem;
  opacity: 0.9;
}

.pmp-cta-form-body {
  padding: 1.5rem;
}

/* NEW CTA BUTTON STYLES - No color change on hover, but keeps transition/movement */
.pmp-cta-button-new {
  background: white;
  color: var(--primary);
  border: none;
  padding: 0.8rem 2rem;
  font-weight: 700;
  display: inline-block;
  text-decoration: none;
  border-radius: 50px;
  transition: all 0.3s ease;
  cursor: pointer;
}

/* Hover effect - ONLY transform/movement, NO color change */
.pmp-cta-button-new:hover {
  background: white;
  color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0,0,0,0.15);
  text-decoration: none;
}

/* Responsive Styles for PMP */
@media (max-width: 991px) {
  .pmp-main-title {
    font-size: 2rem;
  }
  
  .pmp-hero {
    padding: 60px 0;
  }
  
  .pmp-overview, .pmp-curriculum, .pmp-features, .pmp-faq, .pmp-cta-band {
    padding: 60px 0;
  }
  
  .pmp-cta-band h2 {
    font-size: 1.8rem;
  }
}

@media (max-width: 767px) {
  .pmp-main-title {
    font-size: 1.6rem;
  }
  section {
    padding: 40px 0 !important;
  }
  
  .pmp-subtitle {
    font-size: 0.95rem;
  }
  
  .pmp-trust-badges {
    gap: 1rem;
    font-size: 0.7rem;
  }
  
  .pmp-cta-band h2 {
    font-size: 1.5rem;
  }
  
  .pmp-curriculum-card {
    padding: 1.2rem;
  }
}
/* ===================== BREADCRUMB ===================== */
.et-breadcrumb {
  margin-top: 1rem;
}

.et-breadcrumb ol {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  list-style: none;
  margin: 0;
  padding: 0;
}

.et-breadcrumb li {
  display: flex;
  align-items: center;
}

.et-breadcrumb a {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.5);
  text-decoration: none;
  font-weight: 400;
  transition: color 0.2s ease;
}

.et-breadcrumb a:hover {
  color: rgba(255, 255, 255, 0.85);
}

.et-bc-sep {
  margin: 0 8px;
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.25);
  user-select: none;
}

.et-bc-current {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.88);
  font-weight: 500;
}
.et-bc-label {
  font-size: 0.8rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 400;
  cursor: default;
}
.et-bc-sep {
  margin: 0 8px;
  font-size: 0.85rem;        /* slightly larger than before */
  color: rgba(255, 255, 255, 0.25);
  user-select: none;
}
/* =============================================
   DATA SCIENCE & AI PAGE STYLES
============================================= */

/* Hero Section */
.ds-hero {
  background: linear-gradient(135deg, #0A2F44 0%, #134B6B 50%, #0D3A52 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.ds-main-title {
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.4px;
}

.ds-gradient-text {
  background: linear-gradient(135deg, #A8D8EA 0%, #6BB5D0 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
  display: inline;
}

.ds-subtitle {
  color: rgba(255,255,255,0.9);
  line-height: 1.6;
}

/* Buttons */
.btn-primary-et {
  display: inline-block;
  padding: 0.7rem 1.8rem;
  border-radius: 40px;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 600;
}

.btn-primary-et:hover {
  transform: translateY(-2px);
  opacity: 0.9;
}

/* Premium Stats Panel */
.ds-stats-premium {
  background: linear-gradient(135deg, #ffffff 0%, #f8faff 100%);
  border-radius: 24px;
  padding: 1.5rem;
  box-shadow: 0 15px 35px -10px rgba(0, 0, 0, 0.08);
  border: 1px solid rgba(19, 75, 107, 0.12);
  transition: transform 0.3s ease;
}

.ds-stats-premium:hover {
  transform: translateY(-3px);
}

.ds-stats-premium-header {
  text-align: center;
  margin-bottom: 1.5rem;
}

.ds-stats-premium-icon {
  width: 50px;
  height: 50px;
  background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.8rem;
  box-shadow: 0 6px 12px -4px rgba(19, 75, 107, 0.2);
}

.ds-stats-premium-icon i {
  font-size: 1.5rem;
  color: white;
}

.ds-stats-premium-header h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.3rem;
}

.ds-stats-premium-grid {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}

.ds-stat-premium-card {
  background: white;
  border-radius: 16px;
  padding: 0.8rem 1rem;
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  transition: all 0.3s ease;
  border: 1px solid rgba(19, 75, 107, 0.06);
}

.ds-stat-premium-card:hover {
  transform: translateX(4px);
  border-color: var(--primary);
}

.ds-stat-premium-icon {
  width: 38px;
  height: 38px;
  background: linear-gradient(135deg, var(--primary-lt) 0%, rgba(19, 75, 107, 0.08) 100%);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ds-stat-premium-icon i {
  font-size: 1rem;
  color: var(--primary);
}

.ds-stat-premium-content { flex: 1; }

.ds-stat-premium-number {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.2;
  margin-bottom: 0.2rem;
}

.ds-stat-premium-number span {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--accent);
  margin-left: 2px;
}

.ds-stat-premium-text {
  font-size: 0.7rem;
  color: var(--mid);
  line-height: 1.3;
  margin-bottom: 0.2rem;
  font-weight: 500;
}

.ds-stat-premium-badge {
  font-size: 0.55rem;
  color: var(--muted);
  /*font-style: italic;*/
  display: inline-block;
  background: #f5f5f5;
  padding: 2px 8px;
  border-radius: 12px;
}

.ds-highlight {
  color: var(--primary);
  display: inline;
}

/* Why Choose 360EduTech */
.why-360-feature-block {
  display: flex;
  gap: 1.5rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  height: 100%;
}

.why-360-feature-block:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(19, 75, 107, 0.08);
}

.why-360-icon-wrap {
  width: 60px;
  height: 60px;
  background: var(--primary-lt);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.why-360-feature-block:hover .why-360-icon-wrap {
  background: var(--primary);
}

.why-360-icon-wrap i {
  font-size: 1.5rem;
  color: var(--primary);
  transition: all 0.3s ease;
}

.why-360-feature-block:hover .why-360-icon-wrap i {
  color: white;
}

.why-360-content {
  flex: 1;
}

.why-360-content h4 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

.why-360-content p {
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}

.why-360-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.why-360-tags span {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.25rem 0.75rem;
  background: var(--offwhite);
  color: var(--primary);
  border-radius: 20px;
  letter-spacing: 0.3px;
}

.why-360-stats-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: 60px;
  padding: 1rem 2rem;
}

.why-360-stats-row .stat-box {
  text-align: center;
  flex: 1;
}

.why-360-stats-row .stat-number {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.2;
  margin-bottom: 0.2rem;
}

.why-360-stats-row .stat-number span {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--accent);
}

.why-360-stats-row .stat-label {
  font-size: 0.65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--muted);
}

@media (max-width: 768px) {
  .why-360-feature-block {
    flex-direction: column;
    text-align: center;
  }
  .why-360-icon-wrap {
    margin: 0 auto;
  }
  .why-360-tags {
    justify-content: center;
  }
  .why-360-stats-row {
    flex-direction: column;
    border-radius: 24px;
    gap: 1rem;
    text-align: center;
  }
}

/* Tech Stack Grid */
.tech-horizontal-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.25rem;
  margin-top: 2rem;
}

.tech-horizontal-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  transition: all 0.3s ease;
  cursor: pointer;
}

.tech-horizontal-card:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(19, 75, 107, 0.1);
}

.tech-horizontal-icon {
  width: 50px;
  height: 50px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.tech-horizontal-card:hover .tech-horizontal-icon { background: var(--primary); }
.tech-horizontal-icon i { font-size: 1.5rem; color: var(--primary); transition: all 0.3s ease; }
.tech-horizontal-card:hover .tech-horizontal-icon i { color: white; }

.tech-horizontal-content { flex: 1; }
.tech-horizontal-name { font-size: 0.9rem; font-weight: 800; color: var(--dark); margin-bottom: 0.2rem; }
.tech-horizontal-cat { font-size: 0.65rem; color: var(--primary); font-weight: 600; text-transform: uppercase; }

@media (max-width: 992px) { .tech-horizontal-grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 768px) { .tech-horizontal-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 480px) { .tech-horizontal-grid { grid-template-columns: 1fr; } }

/* Roadmap */
.ds-rm-rail {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.ds-rm-phase {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.ds-rm-connector {
  display: flex;
  align-items: center;
  width: 100%;
  height: 44px;
}

.ds-rm-line {
  flex: 1;
  height: 2px;
  background: var(--border);
}

.ds-rm-line--lit  { background: var(--primary); }
.ds-rm-line--hidden { background: transparent; }

.ds-rm-circle {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid var(--border);
  background: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--muted);
  flex-shrink: 0;
  z-index: 2;
}

.ds-rm-circle--active {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.ds-rm-card {
  margin-top: 14px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1rem;
  width: 95%;
  cursor: pointer;
  transition: all 0.2s ease;
  text-align: center;
}

.ds-rm-card:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
}

.ds-rm-card--active {
  border-color: var(--primary);
  border-width: 1.5px;
}

.ds-rm-eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 5px;
}

.ds-rm-title {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.35;
  margin-bottom: 5px;
}

.ds-rm-meta {
  font-size: 0.72rem;
  color: var(--muted);
}

.ds-rm-details {
  margin-top: 20px;
}

.ds-rm-detail {
  display: none;
  background: white;
  border: 1.5px solid var(--primary);
  border-radius: 14px;
  padding: 1.4rem 1.5rem;
}

.ds-rm-detail--open { display: block; }

.ds-rm-detail-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 2.5rem;
}

.ds-rm-detail-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 8px;
}

.ds-rm-detail-text {
  font-size: 0.83rem;
  color: var(--mid);
  line-height: 1.7;
  margin: 0;
}

.ds-rm-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.ds-rm-tag {
  font-size: 0.7rem;
  padding: 3px 10px;
  border-radius: 20px;
  background: var(--offwhite);
  color: var(--mid);
  border: 1px solid var(--border);
  font-weight: 500;
}

.ds-rm-tag--hi {
  background: #e8f4fb;
  color: #0C447C;
  border-color: #B5D4F4;
}

/* Persona Cards */
.ds-persona-card {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 1.8rem 1.4rem;
  text-align: center;
  height: 100%;
  transition: all 0.25s;
}

.ds-persona-card:hover {
  border-color: var(--primary);
  transform: translateY(-5px);
  box-shadow: 0 12px 24px rgba(19, 75, 107, 0.08);
}

.ds-persona-icon {
  width: 60px;
  height: 60px;
  background: var(--primary-lt);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--primary);
  margin: 0 auto 1rem;
  transition: all 0.25s;
}

.ds-persona-card:hover .ds-persona-icon {
  background: var(--primary);
  color: white;
}

.ds-persona-card h6 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.7rem;
}

.ds-persona-card p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.ds-persona-tag {
  display: inline-block;
  background: var(--primary-lt);
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 12px;
  border-radius: 20px;
}

/* FAQ */
.pmp-faq-item {
  margin-bottom: 1rem;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  overflow: hidden;
}

.pmp-faq-item .accordion-button {
  background: white;
  font-weight: 600;
  color: var(--dark);
  padding: 1.2rem 1.5rem;
}

.pmp-faq-item .accordion-button:not(.collapsed) {
  background: var(--primary);
  color: white;
}

.pmp-faq-item .accordion-button:focus {
  box-shadow: none;
  border-color: var(--primary);
}

.pmp-faq-item .accordion-body {
  padding: 1.2rem 1.5rem;
  background: white;
  color: var(--mid);
  line-height: 1.6;
}
/* =============================================
   CYBERSECURITY PAGE STYLES
============================================= */

:root {
  --primary: #1B4F72;
  --primary-lt: #E8F0F5;
  --dark: #1A2C3E;
  --mid: #4A627A;
  --muted: #7F8C8D;
  --border: #E2E8F0;
  --offwhite: #F8FAFE;
  --green: #27AE60;
  --accent: #134B6B;
}

/* Hero */
.cyber-hero {
  background: linear-gradient(135deg, #0A2F44 0%, #134B6B 50%, #0D3A52 100%);
  color: white;
  position: relative;
  overflow: hidden;
}
.cyber-hero::before {
  content: '';
  position: absolute; top: -50%; right: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.cyber-main-title { font-size: 2.8rem; font-weight: 800; line-height: 1.2; }
.cyber-subtitle { font-size: 1.1rem; max-width: 700px; margin: 0 auto; opacity: .9; line-height: 1.6; }
.cyber-hl { color: var(--primary); }

/* Minimal Glass Panel - No Animations */
.cyber-minimal-panel {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.glass-quote {
  margin-top: 50px;
  text-align: center;
  padding: 2rem 1.5rem;
  background: rgba(255, 255, 255, 0.95);
  border-radius: 28px;
  border: 1px solid rgba(27, 79, 114, 0.12);
  box-shadow: 0 12px 28px -10px rgba(0, 0, 0, 0.05);
}
.glass-quote i {
  font-size: 1.8rem;
  color: var(--primary);
  opacity: 0.5;
  margin-bottom: 1rem;
  display: inline-block;
}
.glass-quote p {
  font-size: 0.9rem;
  /*font-style: italic;*/
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: 0.8rem;
}
.glass-quote span {
  font-size: 0.7rem;
  color: var(--primary);
  font-weight: 600;
  letter-spacing: 0.3px;
}
.glass-features {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.feature-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.9rem 1.2rem;
  background: rgba(27, 79, 114, 0.04);
  border-radius: 14px;
  transition: all 0.2s ease;
}
.feature-item:hover {
  background: rgba(27, 79, 114, 0.08);
  transform: translateX(3px);
}
.feature-item i {
  font-size: 1rem;
  color: var(--primary);
  width: 28px;
  text-align: center;
}
.feature-item span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dark);
  letter-spacing: 0.2px;
}

/* Tab Navigation */
.cyber-tab-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 4px;
}
.ctn-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 12px 20px;
  border: 2px solid var(--border);
  border-radius: 12px;
  background: white;
  cursor: pointer;
  transition: all .2s;
  min-width: 110px;
}
.ctn-btn:hover { border-color: var(--primary); background: var(--primary-lt); }
.ctn-btn.active { border-color: var(--primary); background: var(--primary); }
.ctn-num { font-size: 0.7rem; font-weight: 800; color: var(--muted); letter-spacing: 1px; }
.ctn-btn.active .ctn-num { color: rgba(255,255,255,0.75); }
.ctn-label { font-size: 0.82rem; font-weight: 700; color: var(--dark); }
.ctn-btn.active .ctn-label { color: white; }
.ctn-arrow { color: var(--border); font-size: 0.75rem; padding: 0 2px; }

.cyber-tab-panels {
  background: white;
  border-radius: 20px;
  border: 1px solid var(--border);
  padding: 2.5rem;
  box-shadow: 0 4px 24px rgba(0,0,0,0.06);
}
.ctp-panel { display: none; }
.ctp-panel.active { display: block; }
.ctp-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 14px;
  border-radius: 30px;
  margin-bottom: 0.5rem;
  background: var(--primary-lt);
  color: var(--primary);
}
.ctp-card {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1rem 1.2rem;
  transition: all .2s;
  height: 100%;
}
.ctp-card:hover { border-color: var(--primary); background: white; box-shadow: 0 4px 16px rgba(27,79,114,0.1); }
.ctp-card i { color: var(--primary); font-size: 1.1rem; margin-top: 2px; flex-shrink: 0; width: 20px; }
.ctp-card strong { display: block; font-size: 0.85rem; font-weight: 700; color: var(--dark); margin-bottom: 3px; }
.ctp-card p { font-size: 0.76rem; color: var(--muted); margin: 0; line-height: 1.5; }

/* Tools Section */
.ctc-category-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  height: 100%;
  transition: all .25s;
  box-shadow: 0 2px 12px rgba(0,0,0,0.05);
}
.ctc-category-card:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(27,79,114,0.14); border-color: var(--primary); }
.ctc-cat-header { display: flex; align-items: center; gap: 10px; padding: 1rem 1.4rem; color: white; font-weight: 700; font-size: 0.9rem; }
.ctc-tool-list { list-style: none; padding: 1rem 1.4rem; margin: 0; }
.ctc-tool-list li { display: flex; align-items: center; gap: 10px; padding: 7px 0; border-bottom: 1px solid var(--border); font-size: 0.83rem; color: var(--mid); font-weight: 500; }
.ctc-tool-list li:last-child { border-bottom: none; }
.ctc-tool-list li i { font-size: 6px; color: var(--primary); flex-shrink: 0; }
.ctc-cat-role { padding: 0.8rem 1.4rem; font-size: 0.72rem; font-weight: 700; color: var(--primary); border-top: 1px solid var(--border); background: var(--primary-lt); }

/* Why 360EduTech */
.cwhy-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.9rem;
  height: 100%;
  transition: all .25s;
}
.cwhy-card:hover { border-color: var(--primary); box-shadow: 0 8px 24px rgba(27,79,114,0.1); transform: translateY(-3px); }
.cwhy-icon { width: 44px; height: 44px; background: var(--primary-lt); border-radius: 12px; display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 1.1rem; margin-bottom: 0.9rem; }
.cwhy-card h6 { font-size: 0.9rem; font-weight: 700; color: var(--dark); margin-bottom: 0.5rem; }
.cwhy-card p { font-size: 0.8rem; color: var(--mid); line-height: 1.6; margin: 0; }

/* Certification Cards */
.cyber-cert-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.8rem 1.5rem;
  height: 100%;
  transition: all .25s;
}
.cyber-cert-card:hover { transform: translateY(-5px); box-shadow: 0 12px 32px rgba(27,79,114,0.12); border-color: var(--primary); }
.cyber-cert-card.featured { border-color: var(--primary); box-shadow: 0 8px 28px rgba(27,79,114,0.15); }
.ccc-level { display: inline-block; font-size: 0.65rem; font-weight: 700; padding: 3px 12px; border-radius: 20px; margin-bottom: 0.8rem; background: var(--primary-lt); color: var(--primary); }
.ccc-icon { width: 50px; height: 50px; background: var(--primary-lt); border-radius: 14px; display: flex; align-items: center; justify-content: center; color: var(--primary); font-size: 1.3rem; margin-bottom: 1rem; }
.cyber-cert-card h6 { font-size: 0.95rem; font-weight: 700; color: var(--dark); margin-bottom: 0.6rem; }
.cyber-cert-card p { font-size: 0.82rem; color: var(--mid); line-height: 1.6; margin-bottom: 1rem; }
.ccc-meta { display: flex; gap: 12px; flex-wrap: wrap; font-size: 0.72rem; color: var(--muted); }
.ccc-meta span { display: flex; align-items: center; gap: 5px; }
.ccc-meta i { color: var(--primary); }

/* FAQ */
.pmp-faq-item {
  margin-bottom: 1rem;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  overflow: hidden;
}
.pmp-faq-item .accordion-button { background: white; font-weight: 600; color: var(--dark); padding: 1.2rem 1.5rem; }
.pmp-faq-item .accordion-button:not(.collapsed) { background: var(--primary); color: white; }
.pmp-faq-item .accordion-body { padding: 1.2rem 1.5rem; background: white; color: var(--mid); line-height: 1.6; }
.pmp-cta-band { background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); color: white; }
.btn-primary-et { display: inline-block; padding: 0.7rem 1.8rem; border-radius: 40px; text-decoration: none; transition: all 0.3s ease; font-weight: 600; }
.btn-primary-et:hover { transform: translateY(-2px); opacity: 0.9; }
.eyebrow-tag { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--primary); margin-bottom: 0.8rem; }

/* Responsive */
@media (max-width: 991px) {
  .cyber-tab-nav { gap: 6px; }
  .ctn-btn { min-width: 80px; padding: 10px 12px; }
  .cyber-tab-panels { padding: 1.5rem; }
  .cyber-main-title { font-size: 2rem; }
}
@media (max-width: 767px) {
  .cyber-main-title { font-size: 1.6rem; }
  .cyber-subtitle { font-size: 0.95rem; }
  .ctn-label { font-size: 0.72rem; }
}
/* =============================================
   MBA PAGE STYLES - COMPLETE
============================================= */

:root {
  --primary: #1B4F72;
  --primary-lt: #E8F0F5;
  --dark: #1A2C3E;
  --mid: #4A627A;
  --muted: #7F8C8D;
  --border: #E2E8F0;
  --offwhite: #F8FAFE;
  --green: #27AE60;
  --accent: #134B6B;
}

/* Hero */
.cyber-hero {
  background: linear-gradient(135deg, #0A2F44 0%, #134B6B 50%, #0D3A52 100%);
  color: white;
  position: relative;
  overflow: hidden;
}
.cyber-hero::before {
  content: '';
  position: absolute; top: -50%; right: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle, rgba(255,255,255,0.05) 0%, transparent 70%);
  pointer-events: none;
}
.cyber-main-title { font-size: 2.8rem; font-weight: 800; line-height: 1.2; }
.cyber-subtitle { font-size: 1.1rem; max-width: 700px; margin: 0 auto; opacity: .9; line-height: 1.6; }
.mba-hl { background: linear-gradient(135deg, var(--primary), #2E86C1); -webkit-background-clip: text; background-clip: text; color: transparent; }
.eyebrow-tag { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; color: var(--primary); margin-bottom: 0.8rem; }

/* Why MBA - Redesigned Section */
.why-mba-content {
  height: 100%;
}
.lead-text {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--mid);
  margin-bottom: 1.5rem;
}
.highlight-box {
  background: var(--offwhite);
  border-left: 4px solid var(--primary);
  padding: 1.2rem 1.5rem;
  margin-bottom: 1.5rem;
  border-radius: 12px;
}
.highlight-number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.5rem;
}
.highlight-text {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.6;
}
.highlight-text strong {
  color: var(--dark);
}
.closing-text {
  font-size: 0.95rem;
  line-height: 1.7;
  color: var(--mid);
  margin-bottom: 1.8rem;
}
.feature-list-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
.feature-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8rem;
  color: var(--dark);
}
.feature-list-item i {
  color: #2c5282;
  font-size: 0.8rem;
  width: 20px;
}
.why-mba-stats-card {
  background: var(--offwhite);
  border-radius: 24px;
  padding: 3rem;
  height: 90%;
  margin-top: 35px;
  border: 1px solid var(--border);
}
.stats-quote {
  text-align: center;
  padding-bottom: 1.5rem;
  margin-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}
.stats-quote i {
  font-size: 1.5rem;
  color: var(--primary);
  opacity: 0.5;
  margin-bottom: 0.8rem;
  display: inline-block;
}
.stats-quote p {
  font-size: 0.85rem;
  /*font-style: italic;*/
  color: var(--mid);
  line-height: 1.6;
  margin-bottom: 0.5rem;
}
.stats-quote span {
  font-size: 0.7rem;
  color: var(--primary);
  font-weight: 600;
}
.stats-numbers {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.stat-block {
  text-align: center;
  padding: 0.8rem;
  background: white;
  border-radius: 16px;
  transition: all 0.2s ease;
}
.stat-block:hover {
  transform: translateX(5px);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
}
.stat-number-large {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.3rem;
}
.stat-label-small {
  font-size: 0.7rem;
  color: var(--mid);
  font-weight: 500;
}

/* Curriculum Rows */
.curriculum-row-first,
.curriculum-row-second {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  margin-bottom: 1.5rem;
}
.curriculum-row-last {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  justify-content: center;
  max-width: 700px;
  margin: 0 auto;
}
.curriculum-card-new {
  background: white;
  border-radius: 20px;
  padding: 1.5rem;
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}
.curriculum-card-new:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px rgba(27, 79, 114, 0.08);
}
.card-number {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  background: var(--primary-lt);
  color: var(--primary);
  padding: 4px 10px;
  border-radius: 30px;
  margin-bottom: 1rem;
}
.curriculum-card-new h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.8rem;
  line-height: 1.3;
}
.curriculum-card-new p {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.6;
  margin: 0;
}

/* Centered Stats Row */
.curriculum-stats-center {
  display: flex;
  justify-content: center;
  margin-top: 2rem;
}
.stats-row {
  display: flex;
  justify-content: center;
  gap: 4rem;
  flex-wrap: wrap;
  background: white;
  padding: 2rem 3rem;
  border-radius: 60px;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
  border: 1px solid var(--border);
}
.stat-center-item {
  text-align: center;
}
.stat-center-item .stat-number-large {
  font-size: 2rem;
}
.stat-center-item .stat-label-small {
  font-size: 0.75rem;
}

/* Specialisation Selector */
.mba-spec-selector {
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  background: white;
  box-shadow: 0 4px 24px rgba(0,0,0,0.05);
}
.mss-tabs { display: flex; border-bottom: 1px solid var(--border); overflow-x: auto; }
.mss-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 1rem 1.2rem;
  border: none;
  background: white;
  cursor: pointer;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--muted);
  border-right: 1px solid var(--border);
  transition: all .2s;
  white-space: nowrap;
}
.mss-tab:last-child { border-right: none; }
.mss-tab i { font-size: 0.9rem; }
.mss-tab:hover { background: var(--offwhite); color: var(--dark); }
.mss-tab.active { background: var(--primary); color: white; }
.mss-panels { padding: 2.5rem; }
.mss-panel { display: none; }
.mss-panel.active { display: block; }
.mss-badge {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 3px 12px;
  border-radius: 20px;
  background: var(--primary-lt);
  color: var(--primary);
}
.mss-for-tag {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-lt);
  padding: 6px 14px;
  border-radius: 8px;
}
.mss-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.msg-cell {
  padding: 1rem 1.2rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.msg-cell:nth-child(2n) { border-right: none; }
.msg-cell:nth-last-child(-n+2) { border-bottom: none; }
.msg-cell strong { display: block; font-size: 0.83rem; font-weight: 700; color: var(--dark); margin-bottom: 3px; }
.msg-cell span { font-size: 0.75rem; color: var(--muted); line-height: 1.4; }

/* Profile Rows */
.mba-profile-grid { display: flex; flex-direction: column; gap: 1rem; }
.mpg-row {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  transition: border-color .2s, box-shadow .2s;
}
.mpg-row:hover { border-color: var(--primary); box-shadow: 0 4px 20px rgba(27,79,114,0.08); }
.mpg-icon {
  width: 46px;
  height: 46px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.mpg-content { flex: 1; }
.mpg-content h6 { font-size: 0.92rem; font-weight: 700; color: var(--dark); margin-bottom: 0.4rem; }
.mpg-content p { font-size: 0.83rem; color: var(--mid); line-height: 1.6; margin: 0; }
.mpg-tag {
  flex-shrink: 0;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-lt);
  padding: 4px 10px;
  border-radius: 6px;
  align-self: flex-start;
  white-space: nowrap;
}

/* Why 360EduTech */
.why-360-two-column {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 1000px;
  margin: 0 auto;
}
.why-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.why-feature-item {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  padding: 0.5rem;
}
.why-icon {
  width: 50px;
  height: 50px;
  background: var(--primary-lt);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.why-icon i {
  font-size: 1.3rem;
  color: var(--primary);
}
.why-text h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.4rem;
}
.why-text p {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.5;
  margin: 0;
}
.why-highlights-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-top: 2rem;
}
.highlight-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 0.5rem 1.2rem;
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 40px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dark);
}
.highlight-badge i {
  color: var(--primary);
  font-size: 0.8rem;
}

/* FAQ */
.pmp-faq-item {
  margin-bottom: 1rem;
  border: 1px solid var(--border) !important;
  border-radius: 12px !important;
  overflow: hidden;
}
.pmp-faq-item .accordion-button { background: white; font-weight: 600; color: var(--dark); padding: 1.2rem 1.5rem; }
.pmp-faq-item .accordion-button:not(.collapsed) { background: var(--primary); color: white; }
.pmp-faq-item .accordion-body { padding: 1.2rem 1.5rem; background: white; color: var(--mid); line-height: 1.6; }
.pmp-cta-band { background: linear-gradient(135deg, var(--primary) 0%, var(--accent) 100%); color: white; }
.btn-primary-et { display: inline-block; padding: 0.7rem 1.8rem; border-radius: 40px; text-decoration: none; transition: all 0.3s ease; font-weight: 600; }
.btn-primary-et:hover { transform: translateY(-2px); opacity: 0.9; }

/* Responsive */
@media (max-width: 991px) {
  .curriculum-row-first,
  .curriculum-row-second {
    grid-template-columns: repeat(2, 1fr);
  }
  .curriculum-row-last {
    grid-template-columns: repeat(2, 1fr);
    max-width: 100%;
  }
  .stats-row {
    padding: 1.5rem 2rem;
    gap: 2rem;
  }
  .feature-list-grid {
    grid-template-columns: 1fr;
  }
  .why-360-two-column {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  .mss-panels { padding: 1.5rem; }
  .mss-grid { grid-template-columns: 1fr; }
  .msg-cell { border-right: none; }
  .msg-cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--border); }
  .msg-cell:last-child { border-bottom: none; }
}
@media (max-width: 767px) {
  .cyber-main-title { font-size: 1.6rem; }
  .curriculum-row-first,
  .curriculum-row-second,
  .curriculum-row-last {
    grid-template-columns: 1fr;
  }
  .stats-row {
    flex-direction: column;
    gap: 1.5rem;
    border-radius: 24px;
    padding: 1.5rem;
  }
  .mpg-tag { display: none; }
  .mss-tab span { display: none; }
  .mss-tab { padding: 0.9rem; }
  .why-feature-item {
    flex-direction: column;
    text-align: center;
    align-items: center;
  }
}
/* ========== GLOBAL STYLES ========== */
:root {
  --primary: #2C5282;
  --primary-dark: #1A365D;
  --primary-lt: #EBF4FF;
  --dark: #1A2C3E;
  --mid: #4A5568;
  --muted: #718096;
  --border: #E2E8F0;
  --offwhite: #F7FAFC;
  --orange: #DD6B20;
  --green: #27AE60;
  --purple: #7B68EE;
  --teal: #20B2AA;
  --gold: #F59E0B;
  --coral: #FF6B6B;
  --indigo: #4F46E5;
}

body {
  font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--dark);
  background: white;
}

.eyebrow-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary);
  margin-bottom: 0.8rem;
}

.gradient-text {
  background: linear-gradient(135deg, #a8d8ea 0%, #a8d8ea 100%);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* Hero Section */
.cyber-hero {
  background: linear-gradient(135deg, #0A2F44 0%, #134B6B 50%, #0D3A52 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.cyber-main-title {
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.4px;
  color: white;
}

.cyber-subtitle {
  color: rgba(255,255,255,0.9);
  line-height: 1.6;
}

/* ========== NEW WHY ENGINEERING - MODERN TREND DESIGN ========== */
.why-engineering-trend {
  position: relative;
  /*background: linear-gradient(135deg, #ffffff 0%, #f5f9ff 100%);*/
  overflow: hidden;
}

.trend-grid {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 3rem;
  align-items: start;
}

/* Left Side - New Design */
.trend-content {
  position: relative;
}

.section-badge {
  display: inline-block;
  /*background: linear-gradient(135deg, var(--primary-lt), white);*/
  padding: 0.3rem 1rem;
  border-radius: 50px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 1rem;
  /*border: 1px solid rgba(44,82,130,0.2);*/
}

.trend-content h2 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 1.2rem;
  color: var(--dark);
}

.trend-highlight {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--mid);
  margin-bottom: 1.5rem;
}

/* Achievement Cards Row */
.achievement-row {
  display: flex;
  gap: 1rem;
  margin: 1.5rem 0;
  flex-wrap: wrap;
}

.achievement-card-light {
  flex: 1;
  background: white;
  padding: 1rem;
  border-radius: 20px;
  text-align: center;
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}

.achievement-card-light:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 15px 25px rgba(44,82,130,0.08);
}

.achievement-number {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}

.achievement-label {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 0.3rem;
}

/* Feature Pills */
.feature-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.5rem;
}

.feature-pill {
  background: white;
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 0.5rem 1.2rem;
  font-size: 0.8rem;
  font-weight: 500;
  color: var(--dark);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.feature-pill i {
  color: var(--primary);
  font-size: 0.8rem;
}

.feature-pill:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
  transform: translateY(-2px);
}

.feature-pill:hover i {
  color: white;
}

/* Right Side - New Vision Board */
.vision-board {
  background: white;
  border-radius: 28px;
  margin-top: 40px;
  padding: 1.8rem;
  box-shadow: 0 20px 40px rgba(0,0,0,0.05);
  border: 1px solid var(--border);
}

.vision-header {
  text-align: center;
  margin-bottom: 1.2rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px dashed var(--primary-lt);
}

.vision-header i {
  font-size: 1.8rem;
  color: var(--primary);
  margin-bottom: 0.3rem;
}

.vision-header h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0;
}

/* Trend Stats */
.trend-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.trend-stat-card {
  background: linear-gradient(135deg, var(--offwhite), white);
  padding: 1rem;
  border-radius: 18px;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid var(--border);
}

.trend-stat-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  background: white;
}

.trend-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
}

.trend-stat-label {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 0.2rem;
}

/* Future Outlook */
.future-outlook {
  background: linear-gradient(135deg, var(--primary-lt), white);
  padding: 1rem;
  border-radius: 18px;
  margin: 1rem 0;
  text-align: center;
  border-left: 3px solid var(--primary);
}

.future-outlook p {
  font-size: 0.8rem;
  color: var(--dark);
  margin: 0;
  line-height: 1.5;
}

/* Quote Block */
.quote-block {
  background: var(--offwhite);
  padding: 1rem;
  border-radius: 18px;
  margin-top: 1rem;
  text-align: center;
}

.quote-block i {
  font-size: 1.2rem;
  color: var(--primary);
  opacity: 0.6;
  margin-bottom: 0.3rem;
  display: inline-block;
}

.quote-block p {
  /*font-style: italic;*/
  color: var(--dark);
  font-size: 0.8rem;
  margin-bottom: 0.3rem;
  line-height: 1.4;
}

.quote-block span {
  font-size: 0.65rem;
  color: var(--muted);
  font-weight: 500;
}

/* Specializations */
.specs-wrapper {
  max-width: 1200px;
  margin: 0 auto;
}

.specs-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  margin-bottom: 2rem;
}

.spec-circle-item {
  text-align: center;
  width: 140px;
  transition: all 0.3s ease;
}

.spec-circle {
  width: 120px;
  height: 120px;
  background: linear-gradient(135deg, var(--primary-lt), white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  border: 2px solid var(--border);
  transition: all 0.3s ease;
}

.spec-circle-item:hover .spec-circle {
  transform: scale(1.1);
  border-color: var(--primary);
  box-shadow: 0 10px 25px rgba(44,82,130,0.2);
}

.spec-circle i {
  font-size: 3rem;
  color: var(--primary);
  transition: all 0.3s ease;
}

.spec-circle-item h4 {
  font-size: 1rem;
  font-weight: 700;
  margin: 0.5rem 0 0.25rem;
  color: var(--dark);
}

.spec-circle-item p {
  font-size: 0.7rem;
  color: var(--muted);
  margin: 0;
}

/* Career Paths */
.career-card {
  background: white;
  border-radius: 20px;
  padding: 1.5rem;
  border: 1px solid var(--border);
  transition: all 0.3s ease;
  height: 100%;
}

.career-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 15px 30px rgba(0,0,0,0.1);
  border-color: var(--primary);
  padding: 1.8rem;
  margin: -0.3rem;
}

.career-card:hover .career-icon {
  background: var(--primary);
}

.career-card:hover .career-icon i {
  color: white;
}

.career-icon {
  width: 60px;
  height: 60px;
  background: var(--primary-lt);
  border-radius: 15px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.career-icon i {
  font-size: 1.8rem;
  color: var(--primary);
  transition: all 0.3s ease;
}

.salary-range {
  color: var(--primary);
  font-weight: 700;
  display: inline-block;
  margin-top: 0.5rem;
}

/* Why 360EduTech */
.features-grid-2col {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.feature-item-row {
  display: flex;
  gap: 1rem;
  padding: 1.2rem;
  background: white;
  border-radius: 16px;
  transition: all 0.3s ease;
  border: 1px solid var(--border);
}

.feature-item-row:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: 0 10px 25px rgba(0,0,0,0.05);
}

.feature-icon-row {
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.feature-item-row:hover .feature-icon-row {
  background: var(--primary);
}

.feature-icon-row i {
  font-size: 1.4rem;
  color: var(--primary);
  transition: all 0.3s ease;
}

.feature-item-row:hover .feature-icon-row i {
  color: white;
}

.feature-content-row {
  flex: 1;
}

.feature-content-row h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.3rem;
  color: var(--dark);
}

.feature-content-row p {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.4;
  margin: 0;
}

/* Recognition Section */
.recognition-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-top: 2rem;
}

.recognition-card {
  text-align: center;
  padding: 1.5rem;
  background: white;
  border-radius: 20px;
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}

.recognition-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}

.recognition-icon {
  width: 70px;
  height: 70px;
  background: linear-gradient(135deg, var(--primary-lt), white);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.recognition-icon i {
  font-size: 2rem;
  color: var(--primary);
}

.recognition-card h4 {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
  color: var(--dark);
}

.recognition-card p {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

/* FAQ */
.pmp-faq-item {
  margin-bottom: 1rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.pmp-faq-item .accordion-button {
  font-weight: 600;
  padding: 1.2rem;
  background: white;
  color: var(--dark);
}

.pmp-faq-item .accordion-button:not(.collapsed) {
  background: var(--primary);
  color: white;
}

.pmp-faq-item .accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1);
}

.pmp-faq-item .accordion-body {
  color: var(--mid);
  padding: 1.2rem;
}

/* CTA */
.pmp-cta-band {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  position: relative;
  overflow: hidden;
}

.btn-primary-et {
  display: inline-block;
  padding: 0.8rem 2rem;
  border-radius: 40px;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 700;
  background: white;
  color: var(--primary);
  border: none;
  cursor: pointer;
}

.btn-primary-et:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  background: white;
  color: var(--primary-dark);
}

/* Responsive */
@media (max-width: 992px) {
  .trend-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .achievement-row {
    flex-direction: row;
  }
  
  .specs-row {
    gap: 1.5rem;
  }
  
  .spec-circle-item {
    width: 110px;
  }
  
  .spec-circle {
    width: 100px;
    height: 100px;
  }
  
  .spec-circle i {
    font-size: 2.5rem;
  }
  
  .recognition-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 768px) {
  .achievement-row {
    flex-direction: column;
  }
  
  .trend-stats {
    grid-template-columns: 1fr;
  }
  
  .spec-circle-item {
    width: 90px;
  }
  
  .spec-circle {
    width: 80px;
    height: 80px;
  }
  
  .spec-circle i {
    font-size: 2rem;
  }
  
  .features-grid-2col {
    grid-template-columns: 1fr;
  }
  
  .recognition-grid {
    grid-template-columns: 1fr;
  }
}
/* =============================================
   Healthcare & Nursing - style
============================================= */
/* =============================================
   Healthcare & Nursing - Unique Box-Free Design
   ============================================= */

:root {
  --primary: #2C5282;
  --primary-dark: #1A365D;
  --primary-lt: #e6f0fa;
  --dark: #1a2a3a;
  --mid: #4a5568;
  --muted: #718096;
  --offwhite: #f8fafc;
  --border: #e2e8f0;
}

/* ---- HERO ---- */
.n-hero {
  background: linear-gradient(135deg, #0A2F44 0%, #134B6B 50%, #0D3A52 100%);
  color: white;
  position: relative;
  overflow: hidden;
}

.n-hero-title {
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.4px;
}

.n-gradient-text {
  background: linear-gradient(135deg, #a8d8ea, #a8d8ea);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}
.fs-12 {
  font-size: 12px;
}
.n-hero-sub {
  color: rgba(255,255,255,0.9);
  line-height: 1.6;
}

/* ---- SHARED ---- */
.n-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary);
  margin-bottom: 0.8rem;
}

.n-sec-title {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin-bottom: 1rem;
}

/* ======================================================
   SECTION 1 — UNIQUE BOX-FREE DESIGN
   ====================================================== */
.why-nursing-unique {
  position: relative;
  overflow: hidden;
  background: white;
}

.unique-layout {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 4rem;
  align-items: start;
}

/* Left Side */
.unique-content {
  position: relative;
}

.eyebrow-tag {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary);
  margin-bottom: 0.8rem;
}

.unique-content h2 {
  font-size: 2rem;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 1.2rem;
  color: var(--dark);
}

.unique-description {
  margin-bottom: 2rem;
}

.unique-description p {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--mid);
  margin-bottom: 1rem;
}

.unique-description .extra-note {
  color: var(--dark);
  font-weight: 500;
  margin-top: 0.5rem;
}

/* Metrics Strip - Side by Side with Dividers */
.metrics-strip {
  display: flex;
  align-items: stretch;
  margin: 2rem 0;
  flex-wrap: wrap;
}

.metric-strip-item {
  flex: 1;
  text-align: center;
  padding: 0.5rem 1rem;
}

.metric-strip-number {
  display: block;
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.2;
  margin-bottom: 0.5rem;
  letter-spacing: -0.5px;
}

.metric-strip-label {
  display: block;
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.4;
}

.metric-strip-divider {
  width: 1px;
  background: var(--border);
  margin: 0.5rem 0;
}

/* Feature Tags */
.feature-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.5rem;
}

.feature-tag {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 40px;
  padding: 0.5rem 1.2rem;
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--dark);
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.feature-tag i {
  color: var(--primary);
  font-size: 0.75rem;
}

.feature-tag:hover {
  border-color: var(--primary);
  color: var(--primary);
  transform: translateY(-2px);
}

/* ======================================================
   HEALTHCARE SNAPSHOT - UNIQUE 2-2-1 GRID WITH ICONS (NO BOXES)
   ====================================================== */
.snapshot-unique {
  position: relative;
}

.snapshot-unique-header {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.8rem;
  margin-bottom: 2rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--primary-lt);
}

.snapshot-icon-badge {
  width: 44px;
  height: 44px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.snapshot-icon-badge i {
  font-size: 1.3rem;
  color: var(--primary);
}

.snapshot-unique-header h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0;
}

/* Unique Grid Layout - 2-2-1 with Center Alignment */
.snapshot-grid-unique {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 2rem;
}

/* Individual Data Items - No Boxes */
.snapshot-data-item {
  text-align: center;
  padding: 1rem 0.5rem;
  transition: all 0.3s ease;
  border-bottom: 1px solid transparent;
}

.snapshot-data-item:hover {
  border-bottom-color: var(--primary);
  transform: translateY(-3px);
}

/* Centered Item - Spans Full Width */
.snapshot-data-item.centered {
  grid-column: span 2;
  text-align: center;
  padding: 1.2rem 0.5rem;
  margin-top: 0.5rem;
  border-bottom: none;
  position: relative;
}

.snapshot-data-item.centered::before,
.snapshot-data-item.centered::after {
  content: '';
  position: absolute;
  top: 0;
  width: 30%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--primary-lt), transparent);
}

.snapshot-data-item.centered::before {
  left: 0;
}

.snapshot-data-item.centered::after {
  right: 0;
}

/* Data Icons */
.data-icon {
  width: 56px;
  height: 56px;
  background: var(--primary-lt);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  transition: all 0.3s ease;
}

.snapshot-data-item:hover .data-icon {
  background: var(--primary);
  transform: scale(1.05);
}

.data-icon i {
  font-size: 1.5rem;
  color: var(--primary);
  transition: all 0.3s ease;
}

.snapshot-data-item:hover .data-icon i {
  color: white;
}

/* Data Value */
.data-value {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.5rem;
  letter-spacing: -0.5px;
}

/* Data Label */
.data-label {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.4;
  max-width: 180px;
  margin: 0 auto;
}

.snapshot-data-item.centered .data-label {
  max-width: 280px;
}

/* Quote - Clean */
.quote-clean {
  margin-top: 1.5rem;
  padding: 0;
  text-align: left;
  border-left: 3px solid var(--primary);
  padding-left: 1rem;
}

.quote-clean i {
  font-size: 0.9rem;
  color: var(--primary);
  opacity: 0.6;
  margin-bottom: 0.3rem;
  display: inline-block;
}

.quote-clean p {
  /*font-style: italic;*/
  color: var(--dark);
  font-size: 0.85rem;
  margin-bottom: 0.4rem;
  line-height: 1.5;
}

.quote-clean cite {
  font-size: 0.7rem;
  color: var(--muted);
  font-style: normal;
  font-weight: 500;
  display: block;
}

/* ======================================================
   SECTION 2 — SPECIALISATIONS
   ====================================================== */
.n-spec-updated-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.n-spec-updated-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1rem 0.5rem;
  border-bottom: 1px solid var(--border);
  transition: all 0.25s;
}

.n-spec-updated-item:hover {
  padding-left: 0.8rem;
}

.n-spec-updated-item:hover .n-spec-updated-num {
  background: var(--primary);
  color: white;
}

.n-spec-updated-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-lt);
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s;
}

.n-spec-updated-info {
  flex: 1;
}

.n-spec-updated-info h4 {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.2rem;
}

.n-spec-updated-info p {
  font-size: 0.78rem;
  color: var(--muted);
  margin: 0;
  line-height: 1.4;
}

/* ======================================================
   SECTION 3 — CAREER PATHS
   ====================================================== */
.n-journey-strip {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  flex-wrap: wrap;
  overflow-x: auto;
  padding-bottom: 0.5rem;
}

.n-journey-node {
  flex: 1;
  min-width: 155px;
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.4rem 1rem;
  text-align: center;
  transition: all 0.3s;
}

.n-journey-node:hover {
  border-color: var(--primary);
  background: white;
  box-shadow: 0 12px 28px rgba(44,82,130,0.1);
}

.n-journey-arrow {
  display: flex;
  align-items: center;
  padding: 0 0.4rem;
  color: var(--border);
  font-size: 1rem;
  align-self: center;
  flex-shrink: 0;
}

.n-jn-step {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  background: var(--primary-lt);
  color: var(--primary);
  border-radius: 50px;
  padding: 0.15rem 0.7rem;
  margin-bottom: 0.8rem;
}

.n-jn-icon {
  width: 46px;
  height: 46px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.8rem;
  transition: all 0.3s;
}

.n-journey-node:hover:not(.n-jn-highlight) .n-jn-icon {
  background: var(--primary);
}

.n-journey-node:hover:not(.n-jn-highlight) .n-jn-icon i {
  color: white;
}

.n-jn-icon i {
  font-size: 1.2rem;
  color: var(--primary);
  transition: all 0.3s;
}

.n-jn-role {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.4rem;
}

.n-jn-detail {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.4;
  margin-bottom: 0.8rem;
}

.n-jn-sal {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--primary);
}

.n-journey-footer {
  display: flex;
  align-items: center;
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem 2rem;
  margin-top: 2rem;
  gap: 0;
}

.n-jf-item {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--dark);
}

.n-jf-item i {
  color: var(--primary);
  font-size: 1rem;
}

.n-jf-divider {
  width: 1px;
  height: 32px;
  background: var(--border);
  margin: 0 1.5rem;
  flex-shrink: 0;
}

/* ======================================================
   SECTION 4 — WHY 360EDUTECH
   ====================================================== */
.n-mag-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: auto;
  gap: 1.2rem;
}

.n-mag-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.8rem;
  transition: all 0.3s;
  position: relative;
  overflow: hidden;
}

.n-mag-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 14px 32px rgba(44,82,130,0.08);
}

.n-mag-tall:nth-child(1) {
  grid-row: span 2;
}

.n-mag-wide {
  grid-column: span 2;
}

.n-mag-icon {
  width: 48px;
  height: 48px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: all 0.3s;
}

.n-mag-card:hover .n-mag-icon {
  background: var(--primary);
}

.n-mag-icon i {
  font-size: 1.3rem;
  color: var(--primary);
  transition: all 0.3s;
}

.n-mag-card:hover .n-mag-icon i {
  color: white;
}

.n-mag-card h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

.n-mag-card p {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* ======================================================
   SECTION 5 — INDUSTRY RECOGNITION
   ====================================================== */
.n-accred-banner {
  background: linear-gradient(135deg, #1A365D 0%, #2C5282 100%);
  padding: 70px 0;
}

.n-accred-inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  align-items: center;
}

.n-accred-metrics {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

.n-accred-box {
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 1.2rem;
  text-align: center;
  transition: all 0.3s;
}

.n-accred-box:hover {
  background: rgba(255,255,255,0.14);
  transform: translateY(-3px);
}

.n-accred-val {
  display: block;
  font-size: 1.8rem;
  font-weight: 800;
  color: white;
  line-height: 1;
  margin-bottom: 0.4rem;
}

.n-accred-lbl {
  display: block;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.4;
}

/* ---- FAQ ---- */
.n-faq-item {
  margin-bottom: 1rem;
  border: 1px solid var(--border) !important;
  border-radius: 16px !important;
  overflow: hidden;
}

.n-faq-item .accordion-button {
  font-weight: 600;
  padding: 1.2rem;
  background: white;
  color: var(--dark);
}

.n-faq-item .accordion-button:not(.collapsed) {
  background: var(--primary);
  color: white;
}

.n-faq-item .accordion-button:not(.collapsed)::after {
  filter: brightness(0) invert(1);
}

.n-faq-item .accordion-body {
  color: var(--mid);
  padding: 1.2rem;
  font-size: 0.9rem;
  line-height: 1.6;
}

/* ---- CTA ---- */
.pmp-cta-band {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  position: relative;
  overflow: hidden;
}

.btn-primary-et {
  display: inline-block;
  padding: 0.8rem 2rem;
  border-radius: 40px;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 700;
  background: white;
  color: var(--primary);
  border: none;
  cursor: pointer;
}

.btn-primary-et:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  background: white;
  color: var(--primary-dark);
}

/* ---- RESPONSIVE ---- */
@media (max-width: 1100px) {
  .n-mag-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .n-mag-tall {
    grid-row: span 1;
  }
  .n-mag-wide {
    grid-column: span 1;
  }
}

@media (max-width: 992px) {
  .unique-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  .n-spec-updated-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .n-accred-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  .metrics-strip {
    flex-direction: column;
  }
  .metric-strip-divider {
    width: 80px;
    height: 1px;
    margin: 0 auto;
  }
  .snapshot-grid-unique {
    gap: 1rem;
  }
}

@media (max-width: 768px) {
  .n-mag-grid {
    grid-template-columns: 1fr;
  }
  .n-accred-metrics {
    grid-template-columns: 1fr;
  }
  .n-journey-footer {
    flex-direction: column;
    gap: 0.8rem;
    align-items: flex-start;
  }
  .n-jf-divider {
    width: 100%;
    height: 1px;
    margin: 0;
  }
  .n-journey-strip {
    flex-wrap: wrap;
  }
  .n-journey-arrow {
    display: none;
  }
  .n-journey-node {
    min-width: calc(50% - 0.5rem);
  }
  .snapshot-grid-unique {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .snapshot-data-item.centered {
    grid-column: span 1;
  }
  .data-value {
    font-size: 1.6rem;
  }
  .data-icon {
    width: 48px;
    height: 48px;
  }
  .data-icon i {
    font-size: 1.3rem;
  }
}

@media (max-width: 480px) {
  .n-journey-node {
    min-width: 100%;
  }
  .unique-content h2 {
    font-size: 1.6rem;
  }
  .metric-strip-number {
    font-size: 1.5rem;
  }
}
/* =============================================
   DBA vs PhD - Page Styles
   ============================================= */

:root {
  --primary: #2C5282;
  --primary-dark: #1A365D;
  --primary-lt: #e6f0fa;
  --dark: #1a2a3a;
  --mid: #4a5568;
  --muted: #718096;
  --offwhite: #f8fafc;
  --border: #e2e8f0;
}

/* ---- HERO ---- */
.dba-hero {
  background: linear-gradient(135deg, #1A365D 0%, #2C5282 50%, #1A365D 100%);
}

.dba-hero-title { font-weight: 800; line-height: 1.2; letter-spacing: -0.4px; }

.dba-gradient-text {
  background: linear-gradient(135deg, #a8d8ea, #a8d8ea);
  background-clip: text;
  -webkit-background-clip: text;
  color: transparent;
}

/* ---- SHARED ---- */
.dba-eyebrow {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: var(--primary);
  margin-bottom: 0.8rem;
}

.dba-eyebrow-inv {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(168, 216, 234, 0.85);
  margin-bottom: 0.8rem;
}

.dba-sec-title {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin-bottom: 1rem;
}

/* ======================================================
   SECTION 1 — CORE QUESTION: EXPLAIN + SPLIT CARDS
   ====================================================== */
.dba-intro-explain {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 4rem;
  align-items: start;
  margin-bottom: 0;
}

.dba-intro-highlight-box {
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  margin-top: 15%;
}

.dba-ihb-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.6;
}

.dba-ihb-item strong { color: var(--dark); }

.dba-ihb-icon {
  width: 42px;
  height: 42px;
  background: var(--primary-lt);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dba-ihb-icon i { font-size: 1rem; color: var(--primary); }
.dba-ihb-alt { background: #f0fdf4; }
.dba-ihb-alt i { color: #276749; }

.dba-ihb-divider {
  height: 1px;
  background: var(--border);
  margin: 1.2rem 0;
}

.dba-ihb-note {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.5;
}

.dba-ihb-note i { color: var(--primary); margin-top: 2px; flex-shrink: 0; }

/* ======================================
   AT A GLANCE — VS CENTERED BETWEEN CARDS
   ====================================== */
.dba-split-cards-wrapper {
  display: flex;
  align-items: stretch;
  gap: 0;
  max-width: 980px;
  margin: 0 auto;
  position: relative;
}

.dba-path-card {
  flex: 1;
  padding: 2.5rem 2rem;
  border: 1px solid var(--border);
  border-radius: 20px;
  background: white;
  transition: box-shadow 0.3s ease;
}

.dba-card-left {
  border-radius: 20px;
}

.dba-card-right {
  border-radius: 20px;
}

.dba-path-card:hover {
  box-shadow: 0 16px 40px rgba(44,82,130,0.1);
  z-index: 1;
}

/* VS badge floats in the gap between the two separate cards */
.dba-vs-badge {
  flex-shrink: 0;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 0.78rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 20px rgba(44,82,130,0.35);
  align-self: center;
  z-index: 10;
  margin: 0 1rem;
  flex-shrink: 0;
}

.dba-card-label {
  font-size: 2rem;
  font-weight: 900;
  color: var(--primary);
  letter-spacing: -1px;
  line-height: 1;
  margin-bottom: 0.3rem;
}

.dba-card-full {
  font-size: 0.82rem;
  color: var(--muted);
  margin-bottom: 1.2rem;
  font-weight: 500;
}

.dba-divider-thin {
  height: 2px;
  background: var(--primary-lt);
  margin-bottom: 1.5rem;
  border-radius: 2px;
}

.dba-trait-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.dba-trait-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--mid);
  margin-bottom: 0.75rem;
  line-height: 1.4;
}

.dba-trait-list li i {
  color: var(--primary);
  font-size: 0.8rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.dba-card-tag {
  display: inline-block;
  background: var(--primary-lt);
  color: var(--primary);
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  padding: 0.4rem 1rem;
  border-radius: 40px;
}

.dba-tag-alt {
  background: #f0fdf4;
  color: #276749;
}

/* ======================================================
   SECTION 2 — 6 KEY DIMENSIONS GRID
   ====================================================== */
.dba-dims-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
}

.dba-dim-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.8rem 1.5rem;
  position: relative;
  transition: all 0.3s ease;
}

.dba-dim-card:hover {
  border-color: var(--primary);
  box-shadow: 0 12px 28px rgba(44,82,130,0.08);
  transform: translateY(-3px);
}

.dba-dim-num {
  position: absolute;
  top: 1.2rem;
  right: 1.2rem;
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--border);
  letter-spacing: 0.5px;
}

.dba-dim-icon {
  width: 44px;
  height: 44px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.dba-dim-card:hover .dba-dim-icon { background: var(--primary); }
.dba-dim-icon i { font-size: 1.1rem; color: var(--primary); transition: all 0.3s ease; }
.dba-dim-card:hover .dba-dim-icon i { color: white; }

.dba-dim-title {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 1rem;
}

.dba-dim-row {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

.dba-dim-label {
  flex-shrink: 0;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  padding: 0.2rem 0.5rem;
  border-radius: 4px;
  margin-top: 1px;
}

.dba-dim-dba-label { background: var(--primary-lt); color: var(--primary); }
.dba-dim-phd-label { background: #f0fdf4; color: #276749; }

.dba-dim-text {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.5;
}

.dba-dim-sep {
  height: 1px;
  background: var(--border);
  margin: 0.7rem 0;
}

/* ======================================================
   SECTION 3 — WHO SHOULD CHOOSE WHAT
   ====================================================== */
.dba-who-grid {
  display: flex;
  gap: 0;
  align-items: stretch;
  max-width: 980px;
  margin: 0 auto;
}

.dba-who-col {
  flex: 1;
  padding: 0 2rem;
}

.dba-who-col:first-child { padding-left: 0; }
.dba-who-col:last-child { padding-right: 0; }

.dba-who-divider {
  width: 1px;
  background: var(--border);
  flex-shrink: 0;
  margin: 0 1rem;
}

.dba-who-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--primary-lt);
}

.dba-who-icon {
  width: 48px;
  height: 48px;
  background: var(--primary-lt);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dba-who-icon i { font-size: 1.2rem; color: var(--primary); }
.dba-icon-alt { background: #f0fdf4; }
.dba-icon-alt i { color: #276749; }

.dba-who-header h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
}

.dba-checklist {
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
}

.dba-check-item {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
}

.dba-check-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  margin-top: 5px;
}

.dba-dot-alt { background: #38a169; }

.dba-check-item p {
  font-size: 0.83rem;
  color: var(--mid);
  line-height: 1.55;
  margin: 0;
}

/* ======================================================
   SECTION 4 — SPECIALISATIONS — CLEAN WHITE GRID DESIGN
   ====================================================== */
.dba-spec-section {
  position: relative;
}

.dba-spec-bg-text { display: none; }

/* 4-column grid, wide tiles span 2 */
.dba-spec-masonry {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.dba-spec-tile-wide {
  grid-column: span 2;
}

.dba-spec-tile {
  background: white;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.8rem 1.5rem;
  position: relative;
  overflow: hidden;
  transition: all 0.3s ease;
  cursor: default;
}

.dba-spec-tile::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), #4a90d9);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  border-radius: 0 0 18px 18px;
}

.dba-spec-tile:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(44,82,130,0.1);
}

.dba-spec-tile:hover::after { transform: scaleX(1); }

.dba-spec-tile-num {
  position: absolute;
  top: 1.1rem;
  right: 1.2rem;
  font-size: 0.6rem;
  font-weight: 800;
  color: var(--border);
  letter-spacing: 1px;
}

.dba-spec-tile-icon {
  width: 44px;
  height: 44px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.dba-spec-tile:hover .dba-spec-tile-icon {
  background: var(--primary);
}

.dba-spec-tile-icon i {
  font-size: 1.1rem;
  color: var(--primary);
  transition: all 0.3s ease;
}

.dba-spec-tile:hover .dba-spec-tile-icon i { color: white; }

.dba-spec-tile h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.45rem;
  line-height: 1.35;
}

.dba-spec-tile p {
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0 0 1rem;
}

.dba-spec-tile-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--primary);
  background: var(--primary-lt);
  padding: 0.25rem 0.65rem;
  border-radius: 40px;
}

/* ======================================================
   SECTION 5 — WHY 360EDUTECH
   ====================================================== */
.dba-adv-layout {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 2rem;
  align-items: start;
}

.dba-adv-main {
  background: var(--primary-lt);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.5rem;
  margin: auto;
}

.dba-adv-icon {
  width: 56px;
  height: 56px;
  background: white;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
}

.dba-adv-icon i { font-size: 1.5rem; color: var(--primary); }

.dba-adv-main h4 { font-size: 1.2rem; font-weight: 800; color: var(--dark); margin-bottom: 0.75rem; }
.dba-adv-main p { font-size: 0.87rem; color: var(--mid); line-height: 1.65; margin-bottom: 1.5rem; }

.dba-adv-tags { display: flex; flex-wrap: wrap; gap: 0.6rem; }

.dba-adv-tags span {
  background: white;
  border: 1px solid var(--border);
  border-radius: 40px;
  padding: 0.35rem 0.9rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--dark);
}

.dba-adv-side { display: flex; flex-direction: column; gap: 1rem; }

.dba-adv-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 1.2rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: white;
  transition: all 0.3s ease;
}

.dba-adv-card:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 20px rgba(44,82,130,0.07);
}

.dba-adv-icon-sm {
  width: 40px;
  height: 40px;
  background: var(--primary-lt);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.dba-adv-card:hover .dba-adv-icon-sm { background: var(--primary); }
.dba-adv-icon-sm i { font-size: 1rem; color: var(--primary); transition: all 0.3s ease; }
.dba-adv-card:hover .dba-adv-icon-sm i { color: white; }
.dba-adv-card h5 { font-size: 0.88rem; font-weight: 700; color: var(--dark); margin-bottom: 0.3rem; }
.dba-adv-card p { font-size: 0.78rem; color: var(--muted); margin: 0; line-height: 1.5; }

/* ======================================================
   SECTION 6 — RECOGNITION — NEW TWO-COLUMN LAYOUT
   ====================================================== */
.dba-recog-new-layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 1.5rem;
  align-items: stretch;
  max-width: 1000px;
  margin: 0 auto;
}

/* Left hero panel */
.dba-recog-hero-panel {
  background: var(--primary-dark);
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}

.dba-recog-hero-panel::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 180px;
  height: 180px;
  border-radius: 50%;
  background: rgba(168, 216, 234, 0.08);
  pointer-events: none;
}

.dba-recog-hero-panel::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: -30px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(168, 216, 234, 0.05);
  pointer-events: none;
}

.dba-recog-hero-inner {
  padding: 2.5rem 2rem;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  position: relative;
  z-index: 2;
}

.dba-recog-hero-icon {
  width: 60px;
  height: 60px;
  background: rgba(168, 216, 234, 0.15);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.dba-recog-hero-icon i {
  font-size: 1.6rem;
  color: #a8d8ea;
}

.dba-recog-hero-val {
  font-size: 3rem;
  font-weight: 900;
  color: white;
  line-height: 1;
  margin-bottom: 1rem;
  letter-spacing: -1px;
}

.dba-recog-hero-lbl {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.dba-recog-hero-pill {
  display: inline-block;
  background: rgba(168, 216, 234, 0.15);
  border: 1px solid rgba(168, 216, 234, 0.3);
  color: #a8d8ea;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  padding: 0.4rem 1rem;
  border-radius: 40px;
}

/* Right: stacked rows */
.dba-recog-rows {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: stretch;
}

.dba-recog-row-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.3rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: white;
  flex: 1;
  cursor: default;
  transition: all 0.3s ease;
}

.dba-recog-row-item:hover {
  border-color: var(--primary);
  box-shadow: 0 8px 24px rgba(44,82,130,0.08);
  transform: translateX(4px);
}

.dba-recog-row-icon {
  width: 46px;
  height: 46px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.dba-recog-row-item:hover .dba-recog-row-icon {
  background: var(--primary);
}

.dba-recog-row-icon i {
  font-size: 1rem;
  color: var(--primary);
  transition: all 0.3s ease;
}

.dba-recog-row-item:hover .dba-recog-row-icon i {
  color: white;
}

.dba-recog-row-body {
  flex: 1;
}

.dba-recog-row-val {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.2rem;
}

.dba-recog-row-lbl {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.4;
}

/* ---- CTA ---- */
.pmp-cta-band {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.btn-primary-et {
  display: inline-block;
  padding: 0.8rem 2rem;
  border-radius: 40px;
  text-decoration: none;
  transition: all 0.3s ease;
  font-weight: 700;
  background: white;
  color: var(--primary);
  border: none;
  cursor: pointer;
}

.btn-primary-et:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 20px rgba(0,0,0,0.2);
  color: var(--primary-dark);
}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 1100px) {
  .dba-dims-grid { grid-template-columns: repeat(2, 1fr); }
  .dba-spec-masonry { grid-template-columns: repeat(2, 1fr); }
  .dba-spec-tile-wide { grid-column: span 2; }
}

@media (max-width: 992px) {
  .dba-intro-explain { grid-template-columns: 1fr; gap: 2rem; }

  /* VS badge responsive for stacked cards */
  .dba-split-cards-wrapper { flex-direction: column; align-items: center; }
  .dba-card-left { border-radius: 20px; width: 100%; }
  .dba-card-right { border-radius: 20px; width: 100%; }
  .dba-vs-badge { margin: 0.75rem 0; }

  .dba-who-grid { flex-direction: column; }
  .dba-who-divider { width: 100%; height: 1px; margin: 1.5rem 0; }
  .dba-who-col { padding: 0; }
  .dba-adv-layout { grid-template-columns: 1fr; }
  .dba-recog-new-layout { grid-template-columns: 1fr; }
  .dba-recog-hero-panel { min-height: 220px; }
}

@media (max-width: 768px) {
  .dba-dims-grid { grid-template-columns: 1fr; }
  .dba-spec-masonry { grid-template-columns: 1fr; }
  .dba-spec-tile-wide { grid-column: span 1; }
}

@media (max-width: 480px) {
  .dba-path-card { padding: 1.8rem 1.2rem; }
}
/* =============================================
   Who Should Opt for DBA — Page Styles
   All shared base styles come from dba-vs-phd.css
   This file adds only the new section components
   ============================================= */

/* ======================================================
   SECTION 1 — MODERN COMPARISON GRID (REDESIGNED)
   ====================================================== */
.modern-compare-grid {
  display: flex;
  align-items: stretch;
  gap: 1rem;
  position: relative;
}

.compare-card {
  flex: 1;
  background: white;
  border-radius: 28px;
  padding: 2rem 1.8rem;
  transition: all 0.35s ease;
  position: relative;
  overflow: hidden;
}

.dba-card {
  border: 1px solid rgba(44, 82, 130, 0.2);
  box-shadow: 0 8px 24px rgba(44, 82, 130, 0.06);
}

.dba-card:hover {
  transform: translateY(-6px);
  border-color: var(--primary);
  box-shadow: 0 20px 40px rgba(44, 82, 130, 0.12);
}

.phd-card {
  border: 1px solid rgba(108, 117, 125, 0.2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.04);
}

.phd-card:hover {
  transform: translateY(-6px);
  border-color: #6c757d;
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08);
}

.compare-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}

.compare-icon {
  width: 52px;
  height: 52px;
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.dba-card .compare-icon {
  background: linear-gradient(135deg, var(--primary-lt), rgba(44, 82, 130, 0.1));
}

.dba-card .compare-icon i {
  font-size: 1.4rem;
  color: var(--primary);
}

.phd-card .compare-icon {
  background: linear-gradient(135deg, #e9ecef, #f8f9fa);
}

.phd-card .compare-icon i {
  font-size: 1.4rem;
  color: #6c757d;
}

.compare-badge {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 1.2px;
  padding: 0.4rem 1rem;
  border-radius: 40px;
  text-transform: uppercase;
}

.dba-badge {
  background: var(--primary);
  color: white;
  box-shadow: 0 2px 8px rgba(44, 82, 130, 0.3);
}

.phd-badge {
  background: #6c757d;
  color: white;
  box-shadow: 0 2px 8px rgba(108, 117, 125, 0.3);
}

.compare-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 1rem;
  line-height: 1.4;
}

.compare-desc {
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: 1.3rem;
}

.compare-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.compare-features li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
}

.compare-features li i {
  font-size: 0.7rem;
  flex-shrink: 0;
}

.dba-card .compare-features li i {
  color: var(--primary);
}

.phd-card .compare-features li i {
  color: #6c757d;
}

.compare-vs {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 48px;
  position: relative;
}

.compare-vs span {
  background: var(--offwhite);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 900;
  color: var(--primary);
  border: 1px solid var(--border);
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.06);
}

/* ======================================================
   SECTION 2 — CANDIDATE PROFILES GRID
   ====================================================== */
.wdba-profiles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.4rem;
  max-width: 1080px;
  margin: 0 auto;
}

.wdba-profile-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem 1.6rem 1.6rem;
  position: relative;
  transition: all 0.32s ease;
  cursor: default;
  overflow: hidden;
}

.wdba-profile-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), #4a90d9);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.32s ease;
}

.wdba-profile-card:hover {
  border-color: var(--primary);
  box-shadow: 0 16px 40px rgba(44,82,130,0.1);
  transform: translateY(-4px);
}

.wdba-profile-card:hover::before { transform: scaleX(1); }

.wdba-profile-icon {
  width: 48px;
  height: 48px;
  background: var(--primary-lt);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.wdba-profile-card:hover .wdba-profile-icon { background: var(--primary); }
.wdba-profile-icon i { font-size: 1.2rem; color: var(--primary); transition: all 0.3s ease; }
.wdba-profile-card:hover .wdba-profile-icon i { color: white; }

.wdba-profile-tag {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: var(--primary);
  background: var(--primary-lt);
  padding: 0.25rem 0.7rem;
  border-radius: 40px;
  margin-bottom: 0.75rem;
}

.wdba-profile-card h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.55rem;
  line-height: 1.3;
}

.wdba-profile-card p {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.6;
  margin: 0;
}

/* ======================================================
   SECTION 3 — ENTRY REQUIREMENTS
   ====================================================== */
.wdba-req-layout {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: 3rem;
  align-items: start;
  max-width: 1060px;
  margin: 0 auto;
}

.wdba-req-timeline {
  display: flex;
  flex-direction: column;
}

.wdba-req-step {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
}

.wdba-req-step-num {
  width: 42px;
  height: 42px;
  background: var(--primary);
  color: white;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(44,82,130,0.25);
}

.wdba-req-step-body {
  flex: 1;
  padding-bottom: 0.5rem;
}

.wdba-req-step-body h5 {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.4rem;
}

.wdba-req-step-body p {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.6;
  margin: 0;
}

.wdba-req-connector {
  width: 2px;
  height: 28px;
  background: var(--primary-lt);
  margin: 6px 0 6px 20px;
  border-radius: 2px;
}

/* Right aside card */
.wdba-req-aside {
  position: sticky;
  top: 100px;
}

.wdba-req-aside-inner {
  background: var(--primary-dark);
  border-radius: 22px;
  padding: 2.2rem;
  color: white;
}

.wdba-req-aside-icon {
  width: 52px;
  height: 52px;
  background: rgba(168,216,234,0.15);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
}

.wdba-req-aside-icon i { font-size: 1.4rem; color: #a8d8ea; }

.wdba-req-aside-inner h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: white;
  margin-bottom: 0.75rem;
}

.wdba-req-aside-inner p {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.7);
  line-height: 1.65;
  margin-bottom: 1.3rem;
}

.wdba-aside-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.wdba-aside-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.8);
  margin-bottom: 0.6rem;
}

.wdba-aside-list li i { color: #a8d8ea; font-size: 0.7rem; }

.wdba-aside-btn {
  display: inline-block;
  background: white;
  color: var(--primary);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.65rem 1.4rem;
  border-radius: 40px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.wdba-aside-btn:hover {
  background: #a8d8ea;
  color: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0,0,0,0.2);
}

/* ======================================================
   SECTION 4 — HOW IT WORKS STEPS
   ====================================================== */
.wdba-steps-track {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  max-width: 1080px;
  margin: 0 auto;
}

.wdba-step-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex: 1;
  max-width: 240px;
}

.wdba-step-circle {
  width: 52px;
  height: 52px;
  background: var(--primary);
  color: white;
  font-size: 0.8rem;
  font-weight: 900;
  letter-spacing: 0.5px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 16px rgba(44,82,130,0.3);
  margin-bottom: 1.2rem;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.wdba-step-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.5rem 1.2rem;
  text-align: center;
  transition: all 0.3s ease;
  width: 100%;
}

.wdba-step-card:hover {
  border-color: var(--primary);
  box-shadow: 0 12px 28px rgba(44,82,130,0.09);
  transform: translateY(-3px);
}

.wdba-step-icon {
  width: 42px;
  height: 42px;
  background: var(--primary-lt);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.85rem;
  transition: all 0.3s ease;
}

.wdba-step-card:hover .wdba-step-icon { background: var(--primary); }
.wdba-step-icon i { font-size: 1rem; color: var(--primary); transition: all 0.3s ease; }
.wdba-step-card:hover .wdba-step-icon i { color: white; }

.wdba-step-card h5 {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

.wdba-step-card p {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

.wdba-step-line {
  flex-shrink: 0;
  width: 48px;
  height: 2px;
  background: var(--primary-lt);
  margin-top: 26px;
  align-self: flex-start;
}

/* ======================================================
   SECTION 5 — WHY 360EDUTECH BENTO GRID
   ====================================================== */
.why-bento {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 1.2rem;
  max-width: 1100px;
  margin: 0 auto;
}

/* Full-width intro card */
.why-hero-card {
  grid-column: span 12;
  background: white;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 2.5rem 3rem;
  display: flex;
  align-items: center;
  gap: 3rem;
}

.why-hero-text { flex: 1; }

.why-hero-eyebrow {
  display: inline-block;
  background: var(--primary-lt);
  color: var(--primary);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.2px;
  padding: 0.4rem 1rem;
  border-radius: 40px;
  margin-bottom: 1.2rem;
}

.why-hero-title {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.25;
  margin-bottom: 0.8rem;
}

.why-hero-title span { color: var(--primary); }

.why-hero-sub {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.65;
  max-width: 520px;
}

.why-hero-stat {
  flex-shrink: 0;
  text-align: center;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.8rem 2.2rem;
  background: var(--offwhite);
}

.why-hero-stat-num {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.4rem;
}

.why-hero-stat-lbl {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.4;
}

/* Feature cards */
.why-feat-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 2rem 1.8rem;
  transition: all 0.3s ease;
  cursor: default;
  position: relative;
  overflow: hidden;
}

.why-feat-card::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--primary), #4a90d9);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
  border-radius: 0 0 22px 22px;
}

.why-feat-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 16px 36px rgba(44,82,130,0.08);
}

.why-feat-card:hover::after { transform: scaleX(1); }

/* Grid column spans */
.why-c1 { grid-column: span 4; }
.why-c2 { grid-column: span 4; }
.why-c3 { grid-column: span 4; }

.why-feat-icon {
  width: 48px;
  height: 48px;
  background: var(--primary-lt);
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
  transition: all 0.3s ease;
}

.why-feat-card:hover .why-feat-icon { background: var(--primary); }
.why-feat-icon i { font-size: 1.1rem; color: var(--primary); transition: all 0.3s ease; }
.why-feat-card:hover .why-feat-icon i { color: white; }

.why-feat-card h4 {
  font-size: 0.93rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.55rem;
  line-height: 1.3;
}

.why-feat-card p {
  font-size: 0.79rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* ======================================================
   RESPONSIVE STYLES
   ====================================================== */
@media (max-width: 992px) {
  .modern-compare-grid {
    flex-direction: column;
  }
  
  .compare-vs {
    width: 100%;
    margin: 0.5rem 0;
  }
  
  .compare-vs span {
    background: white;
    border: 1px solid var(--border);
  }
  
  .wdba-req-layout { grid-template-columns: 1fr; }
  .wdba-req-aside { position: static; }
  .wdba-steps-track { flex-direction: column; align-items: center; gap: 1rem; }
  .wdba-step-node { max-width: 100%; width: 100%; }
  .wdba-step-line { width: 2px; height: 28px; margin: 0; }
  .why-hero-card { flex-direction: column; align-items: flex-start; gap: 2rem; }
  .why-c1, .why-c2, .why-c3 { grid-column: span 6; }
}

@media (max-width: 768px) {
  .wdba-profiles-grid { grid-template-columns: 1fr; }
  .why-c1, .why-c2, .why-c3 { grid-column: span 12; }
  .why-hero-stat { width: 100%; }
  .compare-card { padding: 1.5rem; }
}
/* =============================================
   Understanding DBA — Page Styles
   File: understanding-dba.css
   Prefix: udba-
   Colors: site variables only — no extra colors
   ============================================= */

/* ======================================================
   SECTION 1 — STAT BLOCKS GRID
   ====================================================== */
.udba-stats-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.udba-stat-block {
  border-radius: 20px;
  padding: 1.8rem 1.6rem;
  transition: transform 0.3s ease;
}

.udba-stat-block:hover {
  transform: translateY(-4px);
}

.udba-stat-primary {
  background: var(--primary);
  color: white;
  grid-column: span 2;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}

.udba-stat-primary .udba-stat-num {
  color: white;
  font-size: 2.4rem;
  flex-shrink: 0;
}

.udba-stat-primary .udba-stat-label {
  color: rgba(255,255,255,0.85);
  font-size: 0.82rem;
  line-height: 1.5;
}

.udba-stat-light {
  background: var(--primary-lt);
  border: 1px solid rgba(44,82,130,0.12);
}

.udba-stat-light .udba-stat-num { color: var(--primary); }
.udba-stat-light .udba-stat-label { color: var(--mid); }

.udba-stat-border {
  background: #e6f0fa;
  border: 1.5px solid var(--border);
}

.udba-stat-border .udba-stat-num { color: var(--primary); }
.udba-stat-border .udba-stat-label { color: var(--mid); }

.udba-stat-num {
  font-size: 2rem;
  font-weight: 900;
  line-height: 1;
  margin-bottom: 0.4rem;
  letter-spacing: -0.5px;
}

.udba-stat-label {
  font-size: 0.75rem;
  line-height: 1.5;
}

/* ======================================================
   SECTION 2 — COMPARISON TABLE
   ====================================================== */
.udba-compare-wrap {
  overflow-x: auto;
  border-radius: 20px;
  box-shadow: 0 8px 32px rgba(44,82,130,0.08);
  border: 1px solid var(--border);
}

.udba-compare-table {
  width: 100%;
  border-collapse: collapse;
  background: white;
  min-width: 640px;
}

.udba-compare-table thead tr { background: var(--primary); }

.udba-th-label {
  padding: 1.1rem 1.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: rgba(255,255,255,0.7);
  text-align: left;
  width: 20%;
}

.udba-th-dba {
  padding: 1.1rem 1.4rem;
  font-size: 0.78rem;
  font-weight: 800;
  color: white;
  text-align: left;
  background: var(--primary-dark);
}

.udba-th-dba i { margin-right: 0.4rem; color: #a8d8ea; }

.udba-th-other {
  padding: 1.1rem 1.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  text-align: left;
}

.udba-th-other i { margin-right: 0.4rem; opacity: 0.7; }

.udba-compare-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background 0.2s ease;
}

.udba-compare-table tbody tr:last-child { border-bottom: none; }
.udba-compare-table tbody tr:hover { background: var(--offwhite); }

.udba-td-label {
  padding: 1rem 1.4rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--dark);
  background: var(--offwhite);
  border-right: 1px solid var(--border);
}

.udba-td-dba {
  padding: 1rem 1.4rem;
  font-size: 0.78rem;
  color: var(--primary);
  font-weight: 600;
  background: rgba(44,82,130,0.03);
  border-right: 1px solid var(--border);
  position: relative;
}

.udba-td-dba::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--primary);
}

.udba-compare-table td:not(.udba-td-label):not(.udba-td-dba) {
  padding: 1rem 1.4rem;
  font-size: 0.78rem;
  color: var(--mid);
  border-right: 1px solid var(--border);
}

.udba-compare-table td:last-child { border-right: none; }

/* ======================================================
   SECTION 3 — FOUR PILLARS: SPLIT LAYOUT (REDESIGNED)
   ====================================================== */
.udba-pillar-counter-row {
  display: flex;
  gap: 1.2rem;
}

.udba-pillar-counter {
  background: var(--primary-lt);
  border: 1px solid rgba(44,82,130,0.15);
  border-radius: 16px;
  padding: 1rem 1.4rem;
  text-align: center;
  flex: 1;
}

.udba-pillar-counter-num {
  display: block;
  font-size: 1.8rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.25rem;
}

.udba-pillar-counter-label {
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--mid);
}

/* Stacked pillar rows */
.udba-pillars-stack {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
}

.udba-pillar-row {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: 1.6rem 1.8rem;
  background: white;
  border-bottom: 1px solid var(--border);
  transition: background 0.25s ease;
}

.udba-pillar-row:last-child { border-bottom: none; }

.udba-pillar-row:hover { background: var(--offwhite); }

.udba-pillar-row-filled {
  background: var(--primary);
}

.udba-pillar-row-filled:hover { background: var(--primary-dark); }

.udba-pillar-row-filled .udba-pillar-row-num { color: rgba(255,255,255,0.35); }
.udba-pillar-row-filled .udba-pillar-row-icon { background: rgba(255,255,255,0.15); }
.udba-pillar-row-filled .udba-pillar-row-icon i { color: white; }
.udba-pillar-row-filled .udba-pillar-row-body h4 { color: white; }
.udba-pillar-row-filled .udba-pillar-row-body p { color: rgba(255,255,255,0.78); }

.udba-pillar-row-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
  margin-right: 1.5rem;
  min-width: 90px;
}

.udba-pillar-row-num {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--primary-lt);
  line-height: 1;
  letter-spacing: -1px;
  flex-shrink: 0;
}

.udba-pillar-row-icon {
  width: 40px;
  height: 40px;
  background: var(--primary-lt);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.udba-pillar-row:not(.udba-pillar-row-filled):hover .udba-pillar-row-icon {
  background: var(--primary);
}

.udba-pillar-row-icon i {
  font-size: 1rem;
  color: var(--primary);
  transition: color 0.25s ease;
}

.udba-pillar-row:not(.udba-pillar-row-filled):hover .udba-pillar-row-icon i {
  color: white;
}

.udba-pillar-row-body h4 {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.3rem;
  line-height: 1.3;
}

.udba-pillar-row-body p {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.6;
  margin: 0;
}

/* ======================================================
   SECTION 4 — PROGRAMME STAGES: SPLIT COLUMN (NEW)
   ====================================================== */
.udba-prog-layout {
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: 4rem;
  align-items: start;
  max-width: 1060px;
  margin: 0 auto;
}

.udba-prog-label-col {
  position: sticky;
  top: 100px;
}

.udba-prog-duration-box {
  display: flex;
  align-items: center;
  gap: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  margin-bottom: 1.4rem;
}

.udba-prog-dur-item {
  flex: 1;
  padding: 1rem 1.2rem;
  text-align: center;
}

.udba-prog-dur-num {
  display: block;
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.2rem;
}

.udba-prog-dur-lbl {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}

.udba-prog-dur-divider {
  width: 1px;
  height: 44px;
  background: var(--border);
  flex-shrink: 0;
}

.udba-prog-cta {
  display: inline-block;
  background: var(--primary);
  color: white;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.7rem 1.4rem;
  border-radius: 40px;
  text-decoration: none;
  transition: all 0.3s ease;
  width: 100%;
  text-align: center;
  box-sizing: border-box;
}

.udba-prog-cta:hover {
  background: var(--primary-dark);
  color: white;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(44,82,130,0.25);
}

/* Phase rows */
.udba-prog-phases-col {
  display: flex;
  flex-direction: column;
}

.udba-prog-phase {
  display: flex;
  gap: 1.4rem;
}

.udba-prog-phase-last .udba-prog-phase-left {
  padding-bottom: 0;
}

.udba-prog-phase-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 48px;
}

.udba-prog-phase-num {
  width: 48px;
  height: 48px;
  background: white;
  border: 2px solid var(--primary);
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
  letter-spacing: 0.5px;
  position: relative;
  z-index: 1;
}

.udba-prog-phase:hover .udba-prog-phase-num {
  background: var(--primary);
  color: white;
}

.udba-prog-phase-num-final {
  background: var(--primary);
  color: white;
}

.udba-prog-phase-line {
  width: 2px;
  flex: 1;
  background: var(--primary-lt);
  margin: 4px 0;
  min-height: 24px;
  border-radius: 2px;
}

.udba-prog-phase-card {
  flex: 1;
  background: white;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.4rem 1.6rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.udba-prog-phase-card:hover {
  border-color: var(--primary);
  box-shadow: 0 10px 28px rgba(44,82,130,0.08);
  transform: translateX(4px);
}

.udba-prog-phase-card-final {
  background: var(--primary);
  border-color: var(--primary);
  margin-bottom: 0;
}

.udba-prog-phase-card-final:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateX(4px);
}

.udba-prog-phase-card-final .udba-prog-phase-header h5 { color: white; }
.udba-prog-phase-card-final p { color: rgba(255,255,255,0.78); }
.udba-prog-phase-card-final .udba-prog-phase-year-final { color: rgba(255,255,255,0.6); }
.udba-prog-phase-card-final .udba-prog-phase-icon-final { background: rgba(255,255,255,0.15); }
.udba-prog-phase-card-final .udba-prog-phase-icon-final i { color: white; }

.udba-prog-phase-header {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  margin-bottom: 0.6rem;
}

.udba-prog-phase-icon {
  width: 36px;
  height: 36px;
  background: var(--primary-lt);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.udba-prog-phase-card:not(.udba-prog-phase-card-final):hover .udba-prog-phase-icon {
  background: var(--primary);
}

.udba-prog-phase-icon i {
  font-size: 0.85rem;
  color: var(--primary);
  transition: color 0.3s ease;
}

.udba-prog-phase-card:not(.udba-prog-phase-card-final):hover .udba-prog-phase-icon i {
  color: white;
}

.udba-prog-phase-year {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.7px;
  color: var(--primary);
  margin-bottom: 0.2rem;
}

.udba-prog-phase-year-final {
  color: rgba(255,255,255,0.55);
}

.udba-prog-phase-header h5 {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
  line-height: 1.3;
}

.udba-prog-phase-card p {
  font-size: 0.77rem;
  color: var(--mid);
  line-height: 1.6;
  margin: 0;
}

/* ======================================================
   SECTION 5 — HOW IT WORKS: STEPPED ROWS (NEW)
   ====================================================== */
.udba-steps-wrap {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.udba-step-row {
  display: flex;
  gap: 2rem;
  align-items: stretch;
}

.udba-step-row-num-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 64px;
}

.udba-step-big-num {
  font-size: 2.8rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
  letter-spacing: -2px;
  flex-shrink: 0;
}

.udba-step-big-num-final {
  color: white;
}

.udba-step-vert-line {
  width: 2px;
  flex: 1;
  background: var(--primary-lt);
  margin: 8px 0;
  min-height: 20px;
  border-radius: 2px;
}

.udba-step-row-content {
  flex: 1;
  padding-bottom: 2rem;
}

.udba-step-row-split {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1.5rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.6rem 1.8rem;
  transition: all 0.3s ease;
  margin-bottom: 0;
}

.udba-step-row-split:hover {
  border-color: var(--primary);
  box-shadow: 0 10px 28px rgba(44,82,130,0.08);
}

.udba-step-row-text {
  display: flex;
  flex-direction: column;
}

.udba-step-row-icon {
  width: 40px;
  height: 40px;
  background: var(--primary-lt);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.8rem;
  transition: all 0.3s ease;
  flex-shrink: 0;
}

.udba-step-row-split:hover .udba-step-row-icon { background: var(--primary); }
.udba-step-row-icon i { font-size: 0.95rem; color: var(--primary); transition: color 0.3s ease; }
.udba-step-row-split:hover .udba-step-row-icon i { color: white; }

.udba-step-row-text h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.udba-step-row-text p {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.65;
  margin: 0;
}

.udba-step-row-meta {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  border-left: 1px solid var(--border);
  padding-left: 1.5rem;
  flex-shrink: 0;
  min-width: 160px;
}

.udba-step-meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.72rem;
  color: var(--muted);
}

.udba-step-meta-item i {
  color: var(--primary);
  font-size: 0.65rem;
  width: 12px;
  flex-shrink: 0;
}

/* Final step */
.udba-step-row-final .udba-step-row-num-col {
  padding-bottom: 0;
}

.udba-step-row-content-final {
  padding-bottom: 0;
}

.udba-step-final-inner {
  background: var(--primary);
  border-radius: 18px;
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.udba-step-final-left {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.udba-step-row-icon-final {
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}

.udba-step-row-icon-final i { color: white; }

.udba-step-final-left h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: white;
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.udba-step-final-left p {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.78);
  line-height: 1.65;
  margin: 0;
}

.udba-step-final-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 1rem;
}

.udba-step-final-tags span {
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(255,255,255,0.85);
  background: rgba(255,255,255,0.12);
  padding: 0.3rem 0.7rem;
  border-radius: 40px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.udba-step-final-tags span i {
  font-size: 0.6rem;
  opacity: 0.7;
}

/* ======================================================
   SECTION 7 — WHY 360EDUTECH: TWO-COLUMN (REDESIGNED)
   ====================================================== */
.udba-why-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  max-width: 1100px;
  margin: 0 auto;
  align-items: start;
}

.udba-why-main {
  background: var(--primary);
  border-radius: 24px;
  padding: 2.5rem 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 2rem;
  height: 100%;
}

.udba-why-main-eyebrow {
  display: inline-block;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.6);
  margin-bottom: 0.8rem;
}

.udba-why-main-title {
  font-size: 1.55rem;
  font-weight: 800;
  color: white;
  line-height: 1.3;
  margin-bottom: 0.8rem;
}

.udba-why-main-title span { color: #a8d8ea; }

.udba-why-main-sub {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.72);
  line-height: 1.7;
  margin: 0;
}

.udba-why-main-stat {
  display: flex;
  gap: 1.2rem;
  align-items: center;
  background: rgba(255,255,255,0.08);
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  margin-top: auto;
}

.udba-why-stat-item { flex: 1; }

.udba-why-stat-n {
  font-size: 2rem;
  font-weight: 900;
  color: white;
  line-height: 1;
  margin-bottom: 0.3rem;
}

.udba-why-stat-l {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.4;
}

.udba-why-stat-divider {
  width: 1px;
  height: 50px;
  background: rgba(255,255,255,0.15);
  flex-shrink: 0;
}

/* Right features column */
.udba-why-features {
  background: white;
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
}

.udba-why-feat {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.6rem 1.8rem;
  transition: background 0.25s ease;
}

.udba-why-feat:hover { background: var(--offwhite); }

.udba-why-feat-icon {
  width: 44px;
  height: 44px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
}

.udba-why-feat:hover .udba-why-feat-icon { background: var(--primary); }
.udba-why-feat-icon i { font-size: 1rem; color: var(--primary); transition: color 0.25s ease; }
.udba-why-feat:hover .udba-why-feat-icon i { color: white; }

.udba-why-feat-text h5 {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.3rem;
  line-height: 1.3;
}

.udba-why-feat-text p {
  font-size: 0.76rem;
  color: var(--mid);
  line-height: 1.6;
  margin: 0;
}

.udba-why-feat-divider {
  height: 1px;
  background: var(--border);
  margin: 0 1.8rem;
}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 1100px) {
  .udba-why-layout { grid-template-columns: 1fr; }
  .udba-prog-layout { grid-template-columns: 1fr; gap: 2rem; }
  .udba-prog-label-col { position: static; }
  .udba-prog-duration-box { max-width: 300px; }
}

@media (max-width: 992px) {
  .udba-stats-grid { grid-template-columns: repeat(2, 1fr); }
  .udba-stat-primary { grid-column: span 2; }
  .udba-pillars-stack { border-radius: 16px; }
  .udba-step-row-split { grid-template-columns: 1fr; }
  .udba-step-row-meta { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 0.8rem; flex-direction: row; flex-wrap: wrap; gap: 0.6rem; }
}

@media (max-width: 768px) {
  .udba-pillar-counter-row { flex-direction: column; }
  .udba-why-main-stat { flex-direction: column; gap: 1rem; }
  .udba-why-stat-divider { width: 100%; height: 1px; }
  .udba-step-row { gap: 1rem; }
  .udba-step-row-num-col { width: 44px; }
  .udba-step-big-num { font-size: 2rem; }
  .udba-step-final-left { flex-direction: column; }
  .udba-prog-phase-header { flex-direction: column; gap: 0.5rem; }
}
/* =============================================
   Register for DBA Course — Complete Styles (Updated)
   ============================================= */

:root {
  --primary: #2C5282;
  --primary-dark: #1A3A5F;
  --primary-lt: #EFF4FA;
  --dark: #1A2C3E;
  --mid: #4A5B6E;
  --muted: #8A99AE;
  --border: #E9EDF2;
  --offwhite: #F8FAFE;
  --gradient-start: #2C5282;
  --gradient-end: #1A3A5F;
}

/* ======================================================
   SECTION 1 — ADMISSION REQUIREMENTS (MODERN REDESIGN)
   ====================================================== */
.rdba-req-modern {
  display: grid;
  grid-template-columns: 1.4fr 1.2fr;
  gap: 4rem;
  align-items: start;
  max-width: 1200px;
  margin: 0 auto;
}

.rdba-req-modern-left {
  position: sticky;
  top: 100px;
}

.rdba-modern-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary-lt);
  padding: 6px 14px;
  border-radius: 40px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 1.2rem;
  position: relative;
}

.rdba-badge-pulse {
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  animation: pulse 1.5s infinite;
}

@keyframes pulse {
  0% { opacity: 0.4; transform: scale(0.8); }
  100% { opacity: 1; transform: scale(1.2); }
}

.rdba-req-modern-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.rdba-req-modern-desc {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.6;
  margin-bottom: 2rem;
}

.rdba-modern-stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
  flex-wrap: wrap;
}

.rdba-stat-item {
  display: flex;
  flex-direction: column;
}

.rdba-stat-number {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.2;
}

.rdba-stat-label {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 500;
}

.rdba-req-modern-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--primary);
  color: white;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.8rem 1.8rem;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.3s ease;
  box-shadow: 0 4px 12px rgba(44, 82, 130, 0.2);
}

.rdba-req-modern-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(44, 82, 130, 0.25);
  color: white;
}

/* Modern card grid */
.rdba-req-grid-modern {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.2rem;
}

.rdba-req-card-modern {
  background: white;
  border-radius: 20px;
  padding: 1.2rem;
  transition: all 0.3s ease;
  border: 1px solid var(--border);
  box-shadow: 0 2px 8px rgba(0,0,0,0.02);
}

.rdba-req-card-modern:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: 0 12px 24px rgba(44, 82, 130, 0.08);
}

.rdba-card-icon-wrapper {
  width: 48px;
  height: 48px;
  background: linear-gradient(135deg, var(--primary-lt) 0%, #E9F0F8 100%);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.rdba-card-icon-wrapper i {
  font-size: 1.2rem;
  color: var(--primary);
}

.rdba-req-card-modern h5 {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 0.5rem;
}

.rdba-req-card-modern p {
  font-size: 0.75rem;
  color: var(--mid);
  line-height: 1.5;
  margin: 0 0 0.6rem;
}

.rdba-card-footnote {
  font-size: 0.65rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.3rem;
  border-top: 1px dashed var(--border);
  padding-top: 0.6rem;
  margin-top: 0.2rem;
}

.rdba-card-footnote i {
  font-size: 0.6rem;
  color: var(--primary);
}

.rdba-card-highlight {
  background: linear-gradient(135deg, #FFFFFF 0%, var(--primary-lt) 100%);
  border-color: var(--primary);
}

/* ======================================================
   SECTION 2 — APPLICATION PROCESS (MODERN HORIZONTAL)
   ====================================================== */
.rdba-process-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--primary-lt);
  padding: 6px 16px;
  border-radius: 40px;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--primary);
  margin-bottom: 1rem;
}

.rdba-process-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.8rem;
}

.rdba-process-desc {
  font-size: 0.9rem;
  color: var(--mid);
  max-width: 580px;
  margin: 0 auto;
}

.rdba-steps-modern {
  display: flex;
  justify-content: center;
  align-items: stretch;
  gap: 1rem;
  max-width: 1100px;
  margin: 2rem auto 0;
  flex-wrap: wrap;
}

.rdba-step-modern-item {
  flex: 1;
  min-width: 200px;
  background: white;
  border-radius: 24px;
  padding: 1.5rem;
  text-align: center;
  position: relative;
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}

.rdba-step-modern-item:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 20px 30px -12px rgba(44, 82, 130, 0.12);
}

.rdba-step-modern-number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary-lt);
  line-height: 1;
  margin-bottom: 0.5rem;
  letter-spacing: -1px;
}

.rdba-step-icon {
  width: 56px;
  height: 56px;
  background: var(--primary-lt);
  border-radius: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.rdba-step-icon i {
  font-size: 1.4rem;
  color: var(--primary);
}

.rdba-step-modern-content h5 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

.rdba-step-modern-content p {
  font-size: 0.75rem;
  color: var(--mid);
  line-height: 1.5;
  margin-bottom: 0.8rem;
}

.rdba-step-timeline {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-lt);
  display: inline-block;
  padding: 0.2rem 0.8rem;
  border-radius: 20px;
}

.rdba-step-connector {
  display: flex;
  align-items: center;
  color: var(--primary);
  opacity: 0.5;
  font-size: 1rem;
}

/* ======================================================
   SECTION 3 — DOCUMENTS (2-COLUMN GRID CARDS) - PRESERVED
   ====================================================== */
.rdba-docs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.rdba-docs-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.rdba-docs-card:hover {
  border-color: var(--primary);
  box-shadow: 0 10px 28px rgba(44, 82, 130, 0.08);
  transform: translateY(-3px);
}

.rdba-docs-card-header {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--primary-lt);
}

.rdba-docs-card-icon {
  width: 44px;
  height: 44px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rdba-docs-card-icon i {
  font-size: 1rem;
  color: var(--primary);
}

.rdba-docs-card-header h4 {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
}

.rdba-docs-card-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

.rdba-docs-card-list li {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.75rem;
  color: var(--mid);
  line-height: 1.55;
  margin-bottom: 0.7rem;
}

.rdba-docs-card-list li:last-child {
  margin-bottom: 0;
}

.rdba-docs-card-list li i {
  color: var(--primary);
  font-size: 0.7rem;
  margin-top: 2px;
  flex-shrink: 0;
}

.rdba-docs-card-cta {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

.rdba-docs-card-cta .rdba-docs-card-header h4 {
  color: white;
}

.rdba-docs-card-cta .rdba-docs-card-icon {
  background: rgba(168, 216, 234, 0.15);
}

.rdba-docs-card-cta .rdba-docs-card-icon i {
  color: #a8d8ea;
}

.rdba-docs-card-cta .rdba-docs-card-list li {
  color: rgba(255, 255, 255, 0.8);
}

.rdba-docs-card-cta .rdba-docs-card-list li i {
  color: #a8d8ea;
}

.rdba-docs-card-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: white;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.5rem 1.2rem;
  border-radius: 40px;
  text-decoration: none;
  margin-top: 1rem;
  transition: all 0.3s ease;
}

.rdba-docs-card-btn:hover {
  background: #a8d8ea;
  color: var(--primary-dark);
  transform: translateY(-2px);
}

/* ======================================================
   SECTION 4 — REGISTRATION FORM (PRESERVED)
   ====================================================== */
.rdba-form-wrap {
  display: grid;
  grid-template-columns: 0.6fr 1.4fr;
  gap: 2rem;
  align-items: start;
  max-width: 1060px;
  margin: 0 auto;
}

.rdba-form-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(44, 82, 130, 0.07);
}

.rdba-form-card-hdr {
  background: var(--primary);
  padding: 1.2rem 2rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  color: white;
  font-size: 0.88rem;
  font-weight: 700;
}

.rdba-form-card-hdr i {
  font-size: 1rem;
  color: rgba(255, 255, 255, 0.7);
}

.rdba-form-body {
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.rdba-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.rdba-field {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.rdba-field label {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--dark);
}

.rdba-req-star {
  color: var(--primary);
}

.rdba-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  font-size: 0.8rem;
  color: var(--dark);
  background: white;
  transition: all 0.25s ease;
  outline: none;
  appearance: none;
  -webkit-appearance: none;
  font-family: inherit;
}

.rdba-input:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.08);
}

.rdba-input::placeholder {
  color: var(--muted);
}

.rdba-select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%232C5282' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.9rem center;
  padding-right: 2.2rem;
  cursor: pointer;
}

.rdba-textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  font-size: 0.8rem;
  color: var(--dark);
  background: white;
  transition: all 0.25s ease;
  outline: none;
  resize: vertical;
  font-family: inherit;
  line-height: 1.6;
}

.rdba-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px rgba(44, 82, 130, 0.08);
}

.rdba-textarea::placeholder {
  color: var(--muted);
}

.rdba-consent-row {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  margin-top: 0.3rem;
}

.rdba-checkbox {
  width: 16px;
  height: 16px;
  accent-color: var(--primary);
  flex-shrink: 0;
  margin-top: 2px;
  cursor: pointer;
}

.rdba-consent-row label {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.55;
  cursor: pointer;
  font-weight: 400;
}

.rdba-consent-row label a {
  color: var(--primary);
  text-decoration: underline;
}

.rdba-submit-btn {
  background: var(--primary);
  color: white;
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.85rem 2rem;
  border: none;
  border-radius: 40px;
  cursor: pointer;
  transition: all 0.3s ease;
  display: inline-flex;
  align-items: center;
  margin-top: 0.3rem;
  font-family: inherit;
  width: fit-content;
}

.rdba-submit-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  box-shadow: 0 10px 24px rgba(44, 82, 130, 0.28);
}

/* Form aside */
.rdba-form-aside {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  position: sticky;
  top: 100px;
}

.rdba-aside-panel {
  background: white;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.6rem;
  transition: all 0.3s ease;
}

.rdba-aside-panel:hover {
  border-color: var(--primary);
  box-shadow: 0 10px 28px rgba(44, 82, 130, 0.08);
}

.rdba-aside-panel-ico {
  width: 40px;
  height: 40px;
  background: var(--primary-lt);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
}

.rdba-aside-panel-ico i {
  font-size: 0.95rem;
  color: var(--primary);
}

.rdba-aside-ico-solid {
  background: var(--primary) !important;
}

.rdba-aside-ico-solid i {
  color: white !important;
}

.rdba-aside-panel h5 {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.9rem;
}

.rdba-next-ol {
  padding: 0;
  margin: 0;
  list-style: none;
  counter-reset: step-counter;
}

.rdba-next-ol li {
  counter-increment: step-counter;
  font-size: 0.74rem;
  color: var(--mid);
  line-height: 1.55;
  margin-bottom: 0.75rem;
  padding-bottom: 0.75rem;
  border-bottom: 1px solid var(--border);
  padding-left: 1.5rem;
  position: relative;
}

.rdba-next-ol li::before {
  content: counter(step-counter);
  position: absolute;
  left: 0;
  top: 1px;
  width: 18px;
  height: 18px;
  background: var(--primary-lt);
  color: var(--primary);
  font-size: 0.62rem;
  font-weight: 900;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.rdba-next-ol li:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.rdba-next-ol li strong {
  display: block;
  color: var(--primary);
  font-size: 0.68rem;
  margin-bottom: 0.1rem;
}

.rdba-aside-contact-panel p {
  font-size: 0.74rem;
  color: var(--muted);
  margin-bottom: 0.75rem;
}

.rdba-contact-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  margin-bottom: 0.5rem;
  transition: color 0.2s ease;
}

.rdba-contact-row:hover {
  color: var(--primary-dark);
}

.rdba-contact-row i {
  font-size: 0.7rem;
  width: 16px;
}

.rdba-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.rdba-trust-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.67rem;
  font-weight: 600;
  color: var(--primary);
  background: white;
  border: 1px solid var(--border);
  padding: 0.3rem 0.75rem;
  border-radius: 40px;
}

.rdba-trust-pill i {
  font-size: 0.6rem;
}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 992px) {
  .rdba-req-modern {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .rdba-req-modern-left {
    position: static;
    text-align: center;
  }
  
  .rdba-modern-stats {
    justify-content: center;
  }
  
  .rdba-req-grid-modern {
    grid-template-columns: 1fr;
  }
  
  .rdba-steps-modern {
    flex-direction: column;
    align-items: stretch;
  }
  
  .rdba-step-connector {
    display: none;
  }
  
  .rdba-docs-grid {
    grid-template-columns: 1fr;
  }
  
  .rdba-form-wrap {
    grid-template-columns: 1fr;
  }
  
  .rdba-form-aside {
    position: static;
  }
}

@media (max-width: 768px) {
  .rdba-form-row-2 {
    grid-template-columns: 1fr;
  }
  
  .rdba-req-modern-title {
    font-size: 1.6rem;
  }
  
  .rdba-process-title {
    font-size: 1.5rem;
  }
}
/* =============================================
   Partner Universities Page — Styles (Premium)
   ============================================= */

:root {
  --primary: #2C5282;
  --primary-dark: #1A3A5F;
  --primary-lt: #EFF4FA;
  --dark: #1A2C3E;
  --mid: #4A5B6E;
  --muted: #8A99AE;
  --border: #E9EDF2;
  --offwhite: #F8FAFE;
}

/* ======================================================
   TRUST NUMBERS STRIP
   ====================================================== */
.pu-numbers-strip {
  background: linear-gradient(135deg, #0A2F44 0%, #134B6B 50%, #0D3A52 100%);
}

.pu-numbers-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-left: 1px solid rgba(255, 255, 255, 0.07);
}

.pu-num-block {
  padding: 24px 28px;
  border-right: 1px solid rgba(255, 255, 255, 0.07);
  text-align: center;
}

.pu-num-val {
  font-size: 1.9rem;
  font-weight: 700;
  color: #A8D8EA;
  line-height: 1;
  margin-bottom: 4px;
}

.pu-num-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.55);
  font-weight: 500;
}

/* ======================================================
   SHARED ELEMENTS
   ====================================================== */
.pu-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1rem;
  display: block;
}

.pu-section-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.4rem;
}

.pu-section-sub {
  font-size: 0.8rem;
  color: var(--muted);
}

/* ======================================================
   PARTNER SECTION - 360EduTech
   CSS Variables & Reset
   ====================================================== */
:root {
  --primary: #0057b3;
  --primary-lt: #eef4fc;
  --primary-dark: #003d82;
  --dark: #1a2a3a;
  --mid: #4a5b6e;
  --muted: #7a8798;
  --border: #e2e8f0;
  --white: #ffffff;
}

/* ======================================================
   SECTION STYLES
   ====================================================== */
.pu-intro {
  padding: 80px 0 70px;
  background: var(--white);
}

.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 24px;
}

.pu-intro-inner {
  display: grid;
  grid-template-columns: 1.5fr 1fr;
  gap: 6rem;
  /*align-items: center;*/
}

/* ======================================================
   LEFT COLUMN
   ====================================================== */
.pu-eyebrow {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  font-weight: 700;
  color: var(--primary);
  display: inline-block;
  margin-bottom: 1rem;
}

.pu-intro-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.18;
  margin-bottom: 1.2rem;
}

.pu-highlight {
  color: var(--primary);
}

.pu-intro-body {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* Trust stats strip */
.pu-trust-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

.pu-trust-stat {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.pu-stat-number {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: -0.02em;
}

.pu-stat-label {
  font-size: 0.7rem;
  color: var(--muted);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ======================================================
   RIGHT COLUMN - CRITERIA CARDS
   ====================================================== */
.pu-criteria {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: var(--border);
}

.pu-criteria-header {
  background: var(--primary);
  padding: 1rem 1.4rem;
}

.pu-criteria-header span {
  font-size: 0.72rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.85);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.pu-criteria-item {
  background: var(--white);
  padding: 1.1rem 1.4rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  transition: background 0.2s ease;
}

.pu-criteria-item:hover {
  background: var(--primary-lt);
}

.pu-criteria-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: var(--primary-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.pu-criteria-icon i {
  font-size: 0.85rem;
  color: var(--primary);
}

.pu-criteria-text h5 {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 4px;
}

.pu-criteria-text p {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.5;
  margin: 0;
}

/* ======================================================
   RESPONSIVE DESIGN
   ====================================================== */
@media (max-width: 992px) {
  .pu-intro-inner {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  .pu-intro {
    padding: 60px 0;
  }
}

@media (max-width: 768px) {
  .pu-trust-strip {
    gap: 1.5rem;
  }
  
  .pu-stat-number {
    font-size: 1.1rem;
  }
}

@media (max-width: 576px) {
  .pu-intro {
    padding: 40px 0;
  }
  
  .pu-intro-title {
    font-size: 1.8rem;
  }
  
  .pu-criteria-item {
    padding: 0.9rem 1rem;
  }
  
  .pu-trust-strip {
    gap: 1.2rem;
  }
  
  .pu-trust-stat {
    flex: 1;
    min-width: 80px;
  }
}

/* ======================================================
   SECTION: UNIVERSITY CATEGORIES
   ====================================================== */
.pu-categories {
  padding: 70px 0;
  background: var(--offwhite);
}

.pu-categories-header {
  max-width: 700px;
  margin: 0 auto 3rem;
}

.pu-categories-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.8rem;
}

.pu-categories-subtitle {
  font-size: 0.88rem;
  color: var(--muted);
}

.pu-categories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}

.pu-category-card {
  background: white;
  border-radius: 24px;
  padding: 1.8rem;
  transition: all 0.3s ease;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.pu-category-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 20px 35px -12px rgba(44, 82, 130, 0.12);
}

.pu-category-card:hover .pu-category-icon {
  background: var(--primary);
}

.pu-category-card:hover .pu-category-icon i {
  color: white;
}

.pu-category-icon {
  width: 56px;
  height: 56px;
  background: var(--primary-lt);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  transition: all 0.3s ease;
}

.pu-category-icon i {
  font-size: 1.6rem;
  color: var(--primary);
  transition: all 0.3s ease;
}

.pu-category-card h3 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

.pu-category-card p {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.5;
  margin-bottom: 0;
}

.pu-category-divider {
  height: 1px;
  background: var(--border);
  margin: 1rem 0;
}

.pu-category-unis {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.pu-category-unis span {
  font-size: 0.7rem;
  background: var(--offwhite);
  padding: 0.3rem 0.9rem;
  border-radius: 30px;
  color: var(--mid);
  font-weight: 500;
  transition: all 0.2s ease;
}

.pu-category-unis span:hover {
  background: var(--primary-lt);
  color: var(--primary);
}

/* ======================================================
   SECTION: HOW WE SUPPORT YOU
   ====================================================== */
.pu-support {
  padding: 80px 0;
  background: white;
}

.pu-support-header {
  max-width: 800px;
  margin: 0 auto 3rem;
}

.pu-support-main-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.pu-support-subtitle {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.7;
}

.pu-support-showcase {
  display: grid;
  grid-template-columns: 0.8fr 1.2fr;
  gap: 3rem;
  align-items: start;
  margin-bottom: 2rem;
}

.pu-support-visual {
  background: var(--offwhite);
  border-radius: 28px;
  padding: 2rem;
  text-align: center;
  border: 1px solid var(--border);
  position: relative;
}

.pu-visual-circle {
  position: relative;
  width: 140px;
  height: 140px;
  margin: 0 auto 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pu-visual-icon {
  width: 80px;
  height: 80px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 2;
  position: relative;
}

.pu-visual-icon i {
  font-size: 2rem;
  color: white;
}

.pu-visual-ring {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  /*border: 2px dashed var(--primary);*/
  border-radius: 50%;
}

@keyframes spin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.pu-visual-stats {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.pu-stat {
  font-size: 0.85rem;
  color: var(--mid);
  padding: 0.6rem;
  background: white;
  border-radius: 40px;
}

.pu-stat span {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary);
  margin-right: 0.5rem;
}

.pu-support-features {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.pu-feature-item {
  display: flex;
  gap: 1rem;
  background: var(--offwhite);
  border-radius: 20px;
  padding: 1.2rem;
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}

.pu-feature-item:hover {
  border-color: var(--primary);
  transform: translateX(8px);
  box-shadow: 0 8px 20px rgba(44, 82, 130, 0.08);
}

.pu-feature-number {
  width: 48px;
  height: 48px;
  background: var(--primary);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
}

.pu-feature-content h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.3rem;
}

.pu-feature-content p {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.5;
  margin: 0;
}

.pu-support-cta-wrapper {
  text-align: center;
  margin-top: 2rem;
}

.pu-support-primary-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--primary);
  color: white;
  font-size: 0.9rem;
  font-weight: 700;
  padding: 0.85rem 2rem;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(44, 82, 130, 0.2);
}

.pu-support-primary-cta:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  color: white;
}

.pu-support-note {
  display: block;
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 0.8rem;
}

/* ======================================================
   SECTION: FEATURED PARTNERS (TAB DESIGN - COMPLETELY DIFFERENT)
   ====================================================== */
.pu-partners-showcase {
  padding: 70px 0 80px;
  background: #f8fafe;
}

.pu-partners-header {
  margin-bottom: 2rem;
}

.pu-partners-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.4rem;
}

.pu-partners-sub {
  font-size: 0.8rem;
  color: var(--muted);
}

.pu-partners-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}

.pu-tab-btn {
  background: none;
  border: none;
  padding: 0.6rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mid);
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 30px;
  font-family: inherit;
}

.pu-tab-btn:hover {
  color: var(--primary);
  background: var(--primary-lt);
}

.pu-tab-btn.active {
  color: var(--primary);
  background: var(--primary-lt);
  position: relative;
}

.pu-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -0.55rem;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: var(--primary);
  border-radius: 3px;
}

.pu-partners-content {
  margin-bottom: 2rem;
}

.pu-partner-detail {
  display: none;
  animation: fadeIn 0.4s ease;
}

.pu-partner-detail.active {
  display: block;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.pu-partner-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: 2rem;
  background: var(--offwhite);
  border-radius: 28px;
  padding: 2rem;
  border: 1px solid var(--border);
}

.pu-partner-logo-large {
  width: 80px;
  height: 80px;
  background: var(--primary);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  font-weight: 800;
  color: white;
  margin-bottom: 1.2rem;
}

.pu-partner-info h3 {
  font-size: 1.6rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.3rem;
}

.pu-partner-location {
  font-size: 0.8rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 1rem;
}

.pu-partner-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.pu-badge-rank, .pu-badge-accred {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.25rem 0.8rem;
  border-radius: 30px;
}

.pu-badge-rank {
  background: var(--primary);
  color: white;
}

.pu-badge-accred {
  background: var(--primary-lt);
  color: var(--primary);
}

.pu-partner-description {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: 1.2rem;
}

.pu-partner-stats {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 1.2rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}

.pu-stat-item {
  text-align: center;
}

.pu-stat-item strong {
  display: block;
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary);
}

.pu-stat-item span {
  font-size: 0.65rem;
  color: var(--muted);
}

.pu-partner-programs h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.6rem;
}

.pu-prog-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.pu-prog-list span {
  font-size: 0.7rem;
  background: white;
  padding: 0.3rem 0.9rem;
  border-radius: 30px;
  color: var(--mid);
  font-weight: 500;
  border: 1px solid var(--border);
}

.pu-partner-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.2rem;
}

.pu-partner-meta div {
  font-size: 0.7rem;
  color: var(--mid);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.pu-partner-meta i {
  color: var(--primary);
  font-size: 0.7rem;
}

.pu-partner-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--primary);
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.6rem 1.2rem;
  border-radius: 40px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.pu-partner-cta:hover {
  background: var(--primary-dark);
  transform: translateX(5px);
  color: white;
}

.pu-partner-highlight {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.pu-highlight-card {
  background: white;
  border-radius: 20px;
  padding: 1.2rem;
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}

.pu-highlight-card:hover {
  transform: translateY(-3px);
  border-color: var(--primary);
  box-shadow: 0 8px 20px rgba(44, 82, 130, 0.08);
}

.pu-highlight-card i {
  font-size: 1.8rem;
  color: var(--primary);
  margin-bottom: 0.8rem;
  display: block;
}

.pu-highlight-card h4 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.3rem;
}

.pu-highlight-card p {
  font-size: 0.75rem;
  color: var(--mid);
  line-height: 1.5;
  margin: 0;
}

.pu-partners-footer {
  text-align: center;
  margin-top: 2rem;
}

.pu-partners-footer p {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 1.2rem;
}

.pu-partners-main-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--primary);
  color: white;
  font-size: 0.83rem;
  font-weight: 700;
  padding: 0.75rem 1.6rem;
  border-radius: 50px;
  text-decoration: none;
  transition: all 0.25s ease;
  box-shadow: 0 4px 12px rgba(44, 82, 130, 0.2);
}

.pu-partners-main-cta:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  color: white;
}

/* ======================================================
   SECTION: STUDENT TESTIMONIALS (MODIFIED - NO PAGINATION, 5 REVIEWS 3+2 CENTERED)
   ====================================================== */
.pu-testimonials {
  padding: 75px 0;
}

.pu-testi-head {
  margin-bottom: 3rem;
}

.pu-testi-sub {
  font-size: 0.82rem;
  color: var(--muted);
  max-width: 520px;
  margin: 0.5rem auto 0;
}

/* Testimonial rows layout */
.pu-testi-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-bottom: 1.6rem;
}

/* First row - 3 columns (each takes 1/3 of space minus gap) */
.pu-testi-row-3 .pu-testi-card {
  flex: 1;
  min-width: calc(33.333% - 1.1rem);
}

/* Second row - 2 columns centered */
.pu-testi-row-2 {
  justify-content: center;
}

.pu-testi-row-2 .pu-testi-card {
  flex: 0 1 calc(33.333% - 1.1rem);
  min-width: 280px;
}

/* Testimonial card styling */
.pu-testi-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  transition: all 0.3s ease;
}

.pu-testi-card:hover {
  border-color: var(--primary);
  transform: translateY(-5px);
  box-shadow: 0 15px 30px -12px rgba(44, 82, 130, 0.12);
}

.pu-testi-stars {
  color: #F6A623;
  font-size: 0.75rem;
  letter-spacing: 2px;
}

.pu-testi-quote {
  font-size: 0.88rem;
  color: var(--dark);
  line-height: 1.65;
  flex: 1;
  margin: 0;
}

.pu-testi-quote::before {
  content: '\201C';
  font-size: 1.2rem;
  color: var(--primary);
  margin-right: 2px;
}

.pu-testi-quote::after {
  content: '\201D';
  font-size: 1.2rem;
  color: var(--primary);
  margin-left: 2px;
}

.pu-testi-author {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.pu-testi-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.pu-testi-name {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.3;
}

.pu-testi-role {
  font-size: 0.68rem;
  color: var(--muted);
}

.pu-testi-uni {
  margin-left: auto;
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--offwhite);
  padding: 4px 10px;
  border-radius: 30px;
  white-space: nowrap;
}

/* ======================================================
   SECTION: FAQ
   ====================================================== */
.pu-faq {
  padding: 75px 0;
  background: var(--offwhite);
}

.pu-faq-header {
  max-width: 750px;
  margin: 0 auto 3rem;
}

.pu-faq-main-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.pu-faq-subtitle {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.7;
}

.pu-faq-grid {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 3rem;
  align-items: start;
}

.pu-faq-contact-block {
  background: var(--offwhite);
  border-radius: 24px;
  padding: 2rem;
  /*border: 1px solid var(--border);*/
  margin: auto;
}

.pu-faq-contact-icon-group {
  display: flex;
  gap: 0.8rem;
  margin-bottom: 1.2rem;
}

.pu-contact-icon-circle {
  width: 48px;
  height: 48px;
  background: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.pu-contact-icon-circle i {
  font-size: 1.2rem;
  color: var(--primary);
}

.pu-faq-contact-block h4 {
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

.pu-faq-contact-block p {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.pu-faq-contact-links {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  margin-bottom: 1.5rem;
}

.pu-faq-contact-link {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.pu-faq-contact-link:hover {
  color: var(--primary-dark);
}

.pu-faq-response-badge {
  background: var(--primary-lt);
  padding: 0.6rem 1rem;
  border-radius: 12px;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  width: fit-content;
}

.pu-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.pu-acc-item {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease;
  background: white;
}

.pu-acc-item.open {
  border-color: var(--primary);
}

.pu-acc-trigger {
  width: 100%;
  background: none;
  border: none;
  padding: 1.1rem 1.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.pu-acc-q {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.4;
}

.pu-acc-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: var(--primary);
  font-size: 0.62rem;
  transition: transform 0.25s ease;
}

.pu-acc-item.open .pu-acc-icon {
  transform: rotate(45deg);
  background: var(--primary);
  color: white;
}

.pu-acc-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.pu-acc-body-inner {
  padding: 1rem 1.3rem 1.2rem;
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.7;
  border-top: 1px solid var(--border);
}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 1024px) {
  .pu-intro-inner { gap: 3rem; }
  .pu-categories-grid { grid-template-columns: repeat(2, 1fr); }
  .pu-faq-grid { grid-template-columns: 1fr; gap: 2rem; }
  .pu-support-showcase { grid-template-columns: 1fr; gap: 2rem; }
  .pu-partner-grid { grid-template-columns: 1fr; gap: 1.5rem; }
  .pu-partner-highlight { flex-direction: row; }
  .pu-testi-row-3 .pu-testi-card {
    min-width: calc(50% - 0.8rem);
  }
  .pu-testi-row-2 .pu-testi-card {
    flex: 0 1 calc(50% - 0.8rem);
  }
}

@media (max-width: 768px) {
  .pu-numbers-inner { grid-template-columns: repeat(2, 1fr); }
  .pu-intro-inner { grid-template-columns: 1fr; }
  .pu-intro-title { font-size: 1.8rem; }
  .pu-categories-grid { grid-template-columns: 1fr; }
  .pu-support-main-title { font-size: 1.7rem; }
  .pu-faq-main-title { font-size: 1.7rem; }
  .pu-feature-item:hover { transform: translateX(0); }
  .pu-partners-tabs { gap: 0.3rem; }
  .pu-tab-btn { font-size: 0.7rem; padding: 0.4rem 0.8rem; }
  .pu-tab-btn.active::after { width: 25px; }
  .pu-partner-info h3 { font-size: 1.3rem; }
  .pu-partner-highlight { flex-direction: column; }
  .pu-partner-logo-large { width: 60px; height: 60px; font-size: 1.4rem; }
  .pu-testi-row-3 .pu-testi-card,
  .pu-testi-row-2 .pu-testi-card {
    min-width: 100%;
    flex: 1;
  }
  .pu-testi-row-2 {
    justify-content: stretch;
  }
}
/* =============================================
   How It Works — how-it-works.css
   Complete updated file with redesigned sections
   ============================================= */

:root {
  --primary:      #2C5282;
  --primary-dark: #1A3A5F;
  --primary-lt:   #EFF4FA;
  --dark:         #1A2C3E;
  --mid:          #4A5B6E;
  --muted:        #8A99AE;
  --border:       #E2E8F0;
  --white:        #ffffff;
  --offwhite:     #F8FAFE;
  --gradient-start: #2C5282;
  --gradient-end: #1A3A5F;
}

/* Override old variables to match new naming */
:root {
  --hiw-primary: var(--primary);
  --hiw-primary-dark: var(--primary-dark);
  --hiw-primary-lt: var(--primary-lt);
  --hiw-dark: var(--dark);
  --hiw-mid: var(--mid);
  --hiw-muted: var(--muted);
  --hiw-border: var(--border);
  --hiw-white: var(--white);
  --hiw-offwhite: var(--offwhite);
}

/* ======================================================
   HERO — Updated to match reference page
   ====================================================== */
.dba-hero {
  background: linear-gradient(135deg, #0A2F44 0%, #134B6B 50%, #0D3A52 100%);
  padding: 50px 0 45px;
}

.dba-hero-title {
  font-size: 2.2rem;
  margin-bottom: 0.75rem;
  color: white;
  font-weight: 800;
  line-height: 1.2;
}

.dba-gradient-text {
  color: #A8D8EA;
}

.dba-hero-sub {
  font-size: 1rem;
  max-width: 700px;
  margin: 0 auto;
  color: rgba(255, 255, 255, 0.9);
  line-height: 1.65;
}

/* Remove old hero styles if they conflict */
.hiw-hero {
  display: none;
}

/* ======================================================
   CTA BAND — Updated to match reference page
   ====================================================== */
.pmp-cta-band {
  padding: 45px 0;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

.btn-primary-et {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: white;
  color: var(--primary);
  font-size: 0.88rem;
  font-weight: 700;
  padding: 0.85rem 2rem;
  border-radius: 6px;
  text-decoration: none;
  transition: all 0.3s ease;
}

.btn-primary-et:hover {
  background: #A8D8EA;
  color: var(--primary-dark);
  transform: translateY(-2px);
  text-decoration: none;
}

/* Hide old CTA band if it exists */
.hiw-cta-band {
  display: none;
}

/* ======================================================
   SECTION 1 — ENROLMENT PROCESS (ENHANCED)
   ====================================================== */
.hiw-enrol-section {
  padding: 80px 0;
  background: var(--white);
}

/* New flex container for left timeline + right card */
.hiw-enrol-flex-container {
  display: flex;
  gap: 3rem;
  align-items: flex-start;
  margin-bottom: 2.5rem;
}

.hiw-enrol-track {
  max-width: 760px;
  margin-bottom: 0;
  flex: 2;
}

.hiw-enrol-step {
  display: flex;
  gap: 1.6rem;
  padding-bottom: 0;
}

.hiw-enrol-step-last {
  /* no extra style needed, line hidden via marker class */
}

.hiw-enrol-step-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 36px;
}

.hiw-enrol-step-marker {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.hiw-enrol-step-marker-final {
  background: var(--primary-dark);
  box-shadow: 0 0 0 4px var(--primary-lt);
}

.hiw-enrol-step-index {
  font-size: 0.78rem;
  font-weight: 900;
  color: var(--white);
}

.hiw-enrol-step-line {
  width: 2px;
  flex: 1;
  background: var(--border);
  margin: 6px 0;
  min-height: 40px;
}

.hiw-enrol-step-content {
  padding-bottom: 2.5rem;
  flex: 1;
}

.hiw-enrol-step-last .hiw-enrol-step-content {
  padding-bottom: 0;
}

.hiw-enrol-step-meta {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.4rem;
}

.hiw-enrol-step-content h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

.hiw-enrol-step-content p {
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.65;
  margin-bottom: 0.6rem;
}

.hiw-enrol-step-note {
  font-size: 0.75rem;
  color: var(--muted);
  border-left: 3px solid var(--primary-lt);
  padding-left: 0.75rem;
  /*font-style: italic;*/
}

/* Right side visual card */
.hiw-enrol-visual-card {
  flex: 1;
  position: sticky;
  top: 100px;
  background: var(--offwhite);
  border-radius: 20px;
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.hiw-enrol-visual-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 15px 30px rgba(0, 0, 0, 0.05);
}

.hiw-visual-card-inner {
  padding: 2rem 1.8rem;
  text-align: left;
}

.hiw-visual-icon {
  width: 56px;
  height: 56px;
  background: var(--primary-lt);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.hiw-visual-icon i {
  font-size: 1.5rem;
  color: var(--primary);
}

.hiw-visual-card-inner h3 {
  font-size: 1.3rem;
  font-weight: 800;
  line-height: 1.3;
  margin-bottom: 1.8rem;
  color: var(--dark);
}

.hiw-visual-card-inner h3 span {
  color: var(--primary);
  background: linear-gradient(120deg, var(--primary-lt) 0%, var(--primary-lt) 40%, transparent 60%);
  display: inline-block;
  padding: 0 0.2rem;
}

.hiw-visual-timeline {
  margin-bottom: 2rem;
}

.hiw-visual-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.2rem;
  position: relative;
}

.hiw-visual-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 6px;
  top: 20px;
  width: 2px;
  height: calc(100% + 0.5rem);
  background: var(--border);
}

.hiw-visual-dot {
  width: 14px;
  height: 14px;
  background: var(--primary);
  border-radius: 50%;
  margin-top: 4px;
  position: relative;
  z-index: 1;
  flex-shrink: 0;
}

.hiw-visual-dot-last {
  background: var(--primary-dark);
  box-shadow: 0 0 0 2px var(--primary-lt);
}

.hiw-visual-text {
  flex: 1;
  padding-bottom: 0.2rem;
}

.hiw-visual-text strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.2rem;
}

.hiw-visual-text span {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 500;
}

.hiw-visual-support {
  background: var(--white);
  border-radius: 12px;
  padding: 1rem;
  display: flex;
  gap: 0.8rem;
  align-items: flex-start;
  border: 1px solid var(--border);
  margin-top: 1rem;
}

.hiw-visual-support i {
  font-size: 1.1rem;
  color: var(--primary);
  margin-top: 2px;
}

.hiw-visual-support p {
  font-size: 0.75rem;
  color: var(--mid);
  line-height: 1.5;
  margin: 0;
}

/* Enrolment CTA row */
.hiw-enrol-cta-row {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.hiw-btn-solid {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  background: var(--primary);
  color: var(--white);
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.75rem 1.6rem;
  border-radius: 6px;
  text-decoration: none;
  transition: background 0.25s ease, transform 0.2s ease;
}

.hiw-btn-solid:hover {
  background: var(--primary-dark);
  color: var(--white);
  transform: translateY(-1px);
}

.hiw-enrol-cta-note {
  font-size: 0.74rem;
  color: var(--muted);
}

.hiw-enrol-cta-note i {
  font-size: 0.68rem;
  color: var(--primary);
}

/* ======================================================
   SECTION 2 — PAYMENT PLANS (REDESIGNED - WHITE BACKGROUND)
   ====================================================== */
.hiw-payment-section-updated {
  padding: 80px 0;
  background: var(--white);
}

.hiw-payment-header {
  margin-bottom: 3rem;
}

.hiw-section-label-center {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
  justify-content: center;
}

.hiw-section-num-center {
  font-size: 0.68rem;
  font-weight: 900;
  color: var(--primary);
  background: var(--primary-lt);
  border: 1px solid #C8D9EF;
  padding: 3px 10px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

.hiw-section-name-center {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.hiw-payment-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 1rem;
}

.hiw-payment-title-accent {
  color: var(--primary);
  /*font-style: italic;*/
  font-weight: 800;
}

.hiw-payment-description {
  font-size: 0.92rem;
  color: var(--mid);
  line-height: 1.65;
  max-width: 600px;
  margin: 0 auto;
}

.hiw-payment-grid-updated {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
  max-width: 1100px;
  margin: 0 auto 2.5rem;
}

.hiw-payment-card-updated {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem 1.5rem;
  transition: all 0.3s ease;
  position: relative;
}

.hiw-payment-card-updated:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 20px 30px -12px rgba(44, 82, 130, 0.12);
}

.hiw-payment-card-featured-updated {
  border: 2px solid var(--primary);
  background: linear-gradient(135deg, var(--white) 0%, var(--primary-lt) 100%);
  position: relative;
}

.hiw-payment-featured-badge-updated {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: var(--white);
  font-size: 0.7rem;
  font-weight: 800;
  padding: 0.25rem 1rem;
  border-radius: 20px;
  letter-spacing: 0.05em;
  white-space: nowrap;
}

.hiw-payment-card-icon {
  width: 56px;
  height: 56px;
  background: var(--primary-lt);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
}

.hiw-payment-card-icon i {
  font-size: 1.3rem;
  color: var(--primary);
}

.hiw-featured-icon {
  background: var(--primary);
}

.hiw-featured-icon i {
  color: var(--white);
}

.hiw-payment-card-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.25rem;
}

.hiw-payment-card-tag {
  font-size: 0.7rem;
  color: var(--muted);
  margin-bottom: 1.2rem;
  font-weight: 500;
}

.hiw-payment-card-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
}

.hiw-payment-card-list li {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  color: var(--mid);
  padding: 0.5rem 0;
  line-height: 1.5;
}

.hiw-payment-card-list li i {
  color: var(--primary);
  font-size: 0.7rem;
  flex-shrink: 0;
}

.hiw-payment-card-footer-updated {
  font-size: 0.72rem;
  color: var(--muted);
  /*font-style: italic;*/
  line-height: 1.5;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: 0.5rem;
}

/* Assurance strip */
.hiw-payment-assurance-updated {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 2rem;
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem 2rem;
  flex-wrap: wrap;
  max-width: 900px;
  margin: 0 auto;
}

.hiw-assurance-item-updated {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.75rem;
  color: var(--mid);
}

.hiw-assurance-item-updated i {
  font-size: 0.8rem;
  color: var(--primary);
}

.hiw-assurance-divider-updated {
  width: 1px;
  height: 24px;
  background: var(--border);
}

/* ======================================================
   SECTION 3 — TECHNICAL REQUIREMENTS (REDESIGNED)
   ====================================================== */
.hiw-tech-section-redesigned {
  padding: 80px 0;
  background: linear-gradient(135deg, #F8FAFE 0%, #FFFFFF 100%);
}

.hiw-tech-header {
  margin-bottom: 3rem;
}

.hiw-tech-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 1rem;
}

.hiw-tech-title-accent {
  color: var(--primary);
  /*font-style: italic;*/
  font-weight: 800;
}

.hiw-tech-description {
  font-size: 0.92rem;
  color: var(--mid);
  line-height: 1.65;
  max-width: 600px;
  margin: 0 auto;
}

.hiw-tech-grid-redesigned {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
  max-width: 1100px;
  margin: 0 auto;
}

.hiw-tech-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.8rem;
  transition: all 0.3s ease;
  position: relative;
}

.hiw-tech-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 20px 30px -12px rgba(44, 82, 130, 0.12);
}

.hiw-tech-card-icon {
  width: 56px;
  height: 56px;
  background: var(--primary-lt);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
}

.hiw-tech-card-icon i {
  font-size: 1.3rem;
  color: var(--primary);
}

.hiw-tech-card-title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.75rem;
}

.hiw-tech-card-text {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

.hiw-tech-card-status {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  width: fit-content;
}

.status-supported {
  background: #E6F4EC;
  color: #276749;
}

.status-min {
  background: #FEF3C7;
  color: #92400E;
}

.status-note {
  background: var(--primary-lt);
  color: var(--primary);
}

/* Support Card */
.hiw-tech-card-support {
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
  border: none;
  color: var(--white);
}

.hiw-tech-card-support .hiw-tech-card-icon {
  background: rgba(255, 255, 255, 0.15);
}

.hiw-tech-card-support .hiw-tech-card-icon i {
  color: #A8D8EA;
}

.hiw-tech-card-support .hiw-tech-card-title {
  color: var(--white);
}

.hiw-tech-card-support .hiw-tech-card-text {
  color: rgba(255, 255, 255, 0.8);
}

.hiw-tech-support-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: white;
  color: var(--primary);
  font-size: 0.75rem;
  font-weight: 700;
  padding: 0.6rem 1.2rem;
  border-radius: 8px;
  text-decoration: none;
  margin-top: 0.5rem;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.hiw-tech-support-btn:hover {
  background: #A8D8EA;
  color: var(--primary-dark);
  transform: translateY(-2px);
  text-decoration: none;
}

.hiw-tech-app-badges {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.hiw-tech-app-badges span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.2);
  padding: 0.3rem 0.8rem;
  border-radius: 20px;
  background: rgba(255, 255, 255, 0.05);
}

.hiw-tech-app-badges span i {
  font-size: 0.8rem;
}

/* ======================================================
   SECTION 4 — PARTNER UNIVERSITIES (UPDATED)
   ====================================================== */
.hiw-partners-section-updated {
  padding: 80px 0;
  background: var(--white);
}

.hiw-partners-title-updated {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 1rem;
}

.hiw-partners-title-updated span {
  color: var(--primary);
}

.hiw-partners-desc-updated {
  font-size: 0.88rem;
  color: var(--mid);
  max-width: 560px;
  margin: 0 auto;
  line-height: 1.6;
}

.hiw-partners-grid-updated {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  max-width: 1000px;
  margin: 0 auto;
}

.hiw-partner-item {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem 1rem;
  text-align: center;
  transition: all 0.3s ease;
}

.hiw-partner-item:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 15px 30px -12px rgba(44, 82, 130, 0.1);
}

.hiw-partner-logo-updated {
  width: 64px;
  height: 64px;
  background: var(--primary-lt);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.hiw-partner-logo-updated i {
  font-size: 1.8rem;
  color: var(--primary);
}

.hiw-partner-name {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.25rem;
}

.hiw-partner-location {
  font-size: 0.7rem;
  color: var(--muted);
  margin: 0;
}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 1024px) {
  .hiw-payment-grid-updated,
  .hiw-tech-grid-redesigned {
    grid-template-columns: repeat(2, 1fr);
    max-width: 700px;
  }
  
  .hiw-partners-grid-updated {
    grid-template-columns: repeat(3, 1fr);
    max-width: 800px;
  }
}

@media (max-width: 992px) {
  /* Enrolment section responsive */
  .hiw-enrol-flex-container {
    flex-direction: column;
    gap: 2rem;
  }
  
  .hiw-enrol-track {
    max-width: 100%;
  }
  
  .hiw-enrol-visual-card {
    position: static;
    max-width: 480px;
    width: 100%;
    margin: 0 auto;
  }
  
  .hiw-visual-card-inner {
    padding: 1.8rem;
  }
  
  .hiw-payment-assurance-updated {
    flex-direction: column;
    gap: 0.8rem;
    text-align: center;
  }
  
  .hiw-assurance-divider-updated {
    display: none;
  }
}

@media (max-width: 768px) {
  .dba-hero-title {
    font-size: 1.6rem;
  }
  
  /*.hiw-section-title,*/
  /*.hiw-payment-title,*/
  /*.hiw-tech-title,*/
  .hiw-partners-title-updated {
    font-size: 1.55rem;
  }
  
  .hiw-payment-grid-updated,
  .hiw-tech-grid-redesigned {
    grid-template-columns: 1fr;
    max-width: 450px;
  }
  
  .hiw-partners-grid-updated {
    grid-template-columns: repeat(2, 1fr);
    max-width: 450px;
  }
  
  /* Enrolment visual card responsive */
  .hiw-enrol-visual-card {
    max-width: 100%;
  }
  
  .hiw-visual-card-inner {
    padding: 1.5rem;
  }
  
  .hiw-visual-card-inner h3 {
    font-size: 1.2rem;
  }
  
  .pmp-cta-band h2 {
    font-size: 1.5rem !important;
  }
  
  .btn-primary-et {
    padding: 0.7rem 1.5rem;
  }
  
  .hiw-payment-card-updated,
  .hiw-tech-card {
    padding: 1.5rem;
  }
  
  .hiw-tech-card-icon,
  .hiw-payment-card-icon {
    width: 48px;
    height: 48px;
  }
  
  .hiw-tech-card-icon i,
  .hiw-payment-card-icon i {
    font-size: 1.1rem;
  }
}

@media (max-width: 480px) {
  .hiw-partners-grid-updated {
    grid-template-columns: 1fr;
    max-width: 280px;
  }
  
  .hiw-partner-item {
    padding: 1.2rem;
  }
}
.hiw-enrol-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 1rem;
}

.hiw-enrol-title-accent {
  color: var(--primary);
  /*font-style: italic;*/
  font-weight: 800;
}
/* =============================================
   Learner Success Stories Page — Complete Styles
   ============================================= */

/* Uses same root variables as partner universities page */
:root {
  --primary: #2C5282;
  --primary-dark: #1A365D;
  --primary-lt: #EBF4FF;
  --dark: #1A202C;
  --mid: #4A5568;
  --muted: #718096;
  --border: #E2E8F0;
  --offwhite: #F7FAFC;
}

/* ======================================================
   SECTION: WHAT LEARNERS ACHIEVE
   ====================================================== */
.ls-outcomes {
  padding: 80px 0 70px;
  background: white;
}

.ls-outcomes-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.ls-outcomes-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.18;
  margin-bottom: 1.2rem;
}

.ls-outcomes-body {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.ls-outcomes-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.ls-outcome-card {
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.4rem;
  transition: all 0.3s ease;
}

.ls-outcome-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -10px rgba(44, 82, 130, 0.1);
}

.ls-outcome-icon {
  width: 42px;
  height: 42px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
  transition: background 0.3s ease;
}

.ls-outcome-card:hover .ls-outcome-icon {
  background: var(--primary);
}

.ls-outcome-icon i {
  font-size: 1rem;
  color: var(--primary);
  transition: color 0.3s ease;
}

.ls-outcome-card:hover .ls-outcome-icon i {
  color: white;
}

.ls-outcome-card h5 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.4rem;
}

.ls-outcome-card p {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* ======================================================
   SECTION: STORIES BY PROGRAMME CATEGORY (TABS)
   ====================================================== */
.ls-stories {
  padding: 70px 0 80px;
  background: var(--offwhite);
}

.ls-stories-header {
  max-width: 700px;
  margin: 0 auto 2rem;
}

.ls-stories-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.4rem;
}

.ls-stories-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}

.ls-tab-btn {
  background: none;
  border: none;
  padding: 0.6rem 1.2rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--mid);
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 30px;
  font-family: inherit;
}

.ls-tab-btn:hover {
  color: var(--primary);
  background: white;
}

.ls-tab-btn.active {
  color: var(--primary);
  background: white;
  position: relative;
}

.ls-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -0.55rem;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: var(--primary);
  border-radius: 3px;
}

.ls-tab-panel {
  display: none;
  animation: lsFadeIn 0.35s ease;
}

.ls-tab-panel.active {
  display: block;
}

@keyframes lsFadeIn {
  from { opacity: 0; transform: translateY(10px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ls-stories-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr;
  gap: 1.6rem;
  align-items: start;
}

.ls-story-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  transition: all 0.3s ease;
}

.ls-story-card:hover {
  border-color: var(--primary);
  transform: translateY(-5px);
  box-shadow: 0 16px 32px -12px rgba(44, 82, 130, 0.12);
}

.ls-story-card--featured {
  border-color: var(--primary);
  background: var(--primary-lt);
}

.ls-story-header {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  position: relative;
}

.ls-story-avatar {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.ls-story-meta {
  flex: 1;
  min-width: 0;
}

.ls-story-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.3;
}

.ls-story-role {
  font-size: 0.72rem;
  color: var(--mid);
  margin-top: 1px;
}

.ls-story-loc {
  font-size: 0.65rem;
  color: var(--muted);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.ls-story-badge {
  font-size: 0.62rem;
  font-weight: 700;
  background: var(--primary);
  color: white;
  padding: 0.2rem 0.75rem;
  border-radius: 30px;
  white-space: nowrap;
  flex-shrink: 0;
}

.ls-story-quote {
  font-size: 0.82rem;
  color: var(--dark);
  line-height: 1.7;
  margin: 0;
  padding-left: 0.8rem;
  border-left: 3px solid var(--primary);
}

.ls-story-outcome {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}

.ls-outcome-pill {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--primary);
  background: white;
  border: 1px solid var(--border);
  padding: 0.25rem 0.75rem;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.ls-story-card--featured .ls-outcome-pill {
  background: white;
}

/* ======================================================
   SECTION: BY THE NUMBERS
   ====================================================== */
.ls-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1rem;
  display: block;
}

.ls-numbers {
  padding: 75px 0;
  background: var(--offwhite);
}

.ls-numbers-header {
  max-width: 700px;
  margin: 0 auto 3rem;
}

.ls-numbers-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.ls-numbers-sub {
  font-size: 0.8rem;
  color: var(--muted);
}

.ls-numbers-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}

.ls-number-block {
  background: white;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 2rem 1.6rem 1.6rem;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
}

.ls-number-block:hover {
  border-color: var(--primary);
  transform: translateY(-5px);
  box-shadow: 0 16px 30px -10px rgba(44, 82, 130, 0.1);
}

.ls-number-icon {
  width: 42px;
  height: 42px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: background 0.3s ease;
}

.ls-number-block:hover .ls-number-icon {
  background: var(--primary);
}

.ls-number-icon i {
  font-size: 1rem;
  color: var(--primary);
  transition: color 0.3s ease;
}

.ls-number-block:hover .ls-number-icon i {
  color: white;
}

.ls-number-val {
  font-size: 2.4rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.3rem;
}

.ls-number-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dark);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.6rem;
}

.ls-number-desc {
  font-size: 0.75rem;
  color: var(--mid);
  line-height: 1.55;
  flex: 1;
  margin-bottom: 1rem;
}

.ls-number-bar {
  height: 4px;
  background: var(--border);
  border-radius: 4px;
  overflow: hidden;
  margin-top: auto;
}

.ls-number-fill {
  height: 100%;
  background: var(--primary);
  border-radius: 4px;
  transition: width 1s ease;
}

/* ======================================================
   SECTION: TESTIMONIALS (REDESIGNED - STATIC & CLEAN)
   ====================================================== */
.ls-testimonials {
  padding: 75px 0;
  background: white;
}

.ls-testimonials-header {
  max-width: 700px;
  margin: 0 auto 3rem;
}

.ls-testimonials-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.ls-testimonials-sub {
  font-size: 0.82rem;
  color: var(--muted);
}

.ls-testimonials-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}

.ls-testimonial-card {
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: none;
}

.ls-testimonial-card--featured {
  border-left: 4px solid var(--primary);
  background: white;
}

.ls-testimonial-rating {
  color: #F6A623;
  font-size: 0.85rem;
  letter-spacing: 2px;
}

.ls-testimonial-quote {
  font-size: 0.85rem;
  color: var(--dark);
  line-height: 1.6;
  margin: 0;
  font-style: normal;
}

.ls-testimonial-author {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
  margin-top: 0.2rem;
}

.ls-testimonial-avatar {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.ls-testimonial-info {
  flex: 1;
  min-width: 0;
}

.ls-testimonial-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.3;
  margin-bottom: 0.2rem;
}

.ls-testimonial-detail {
  font-size: 0.72rem;
  color: var(--mid);
  line-height: 1.4;
}

.ls-testimonial-location {
  color: var(--muted);
  font-size: 0.68rem;
  margin-top: 0.2rem;
}

.ls-testimonial-location i {
  margin-right: 0.2rem;
  font-size: 0.6rem;
}

.ls-testimonial-badge {
  font-size: 0.62rem;
  font-weight: 700;
  background: var(--primary-lt);
  color: var(--primary);
  padding: 0.2rem 0.7rem;
  border-radius: 30px;
  white-space: nowrap;
  flex-shrink: 0;
  border: none;
}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 1024px) {
  .ls-outcomes-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .ls-stories-grid { grid-template-columns: 1fr 1fr; }
  .ls-numbers-grid { grid-template-columns: repeat(2, 1fr); }
  .ls-testimonials-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
  .ls-outcomes-title { font-size: 1.8rem; }
  .ls-outcomes-grid { grid-template-columns: 1fr; }
  .ls-stories-grid { grid-template-columns: 1fr; }
  .ls-stories-title { font-size: 1.7rem; }
  .ls-tab-btn { font-size: 0.72rem; padding: 0.45rem 0.9rem; }
  .ls-numbers-grid { grid-template-columns: 1fr 1fr; }
  .ls-number-val { font-size: 1.9rem; }
  .ls-numbers-title { font-size: 1.7rem; }
  .ls-testimonials {
    padding: 50px 0;
  }
  .ls-testimonials-grid {
    grid-template-columns: 1fr;
    gap: 1.2rem;
  }
  .ls-testimonials-title {
    font-size: 1.7rem;
  }
  .ls-testimonial-card {
    padding: 1.3rem;
  }
}
/* =============================================
   Corporate Bundles Page — Styles
   Uses same root variables as site:
   --primary, --primary-dark, --primary-lt,
   --dark, --mid, --muted, --border, --offwhite
   ============================================= */

.cb-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1rem;
  display: block;
}

/* ======================================================
   WHY BUNDLES (UNCHANGED)
   ====================================================== */
.cb-why {
  padding: 80px 0 70px;
  background: white;
}

.cb-why-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 5rem;
  align-items: center;
}

.cb-why-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.18;
  margin-bottom: 1.2rem;
}

.cb-why-body {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.cb-why-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.4rem;
}

.cb-tag {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-lt);
  border: 1px solid var(--border);
  padding: 0.3rem 0.9rem;
  border-radius: 30px;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.cb-why-stats {
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 28px;
  padding: 2.5rem 4rem;
}

.cb-why-stat {
  padding: 1.4rem 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: anchor-center;
}

.cb-why-stat-val {
  font-size: 2.6rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.3rem;
}

.cb-why-stat-lbl {
  font-size: 0.78rem;
  color: var(--mid);
  font-weight: 500;
  line-height: 1.4;
}

.cb-why-divider {
  height: 1px;
  background: var(--border);
}

/* ======================================================
   WHO IT IS FOR (BRAND NEW - SPLIT LAYOUT WITH CARDS)
   ====================================================== */
.cb-who {
  padding: 70px 0 80px;
  background: linear-gradient(135deg, var(--offwhite) 0%, #ffffff 100%);
}

.cb-who-header {
  max-width: 700px;
  margin: 0 auto 3rem;
}

.cb-who-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.cb-who-sub {
  font-size: 0.82rem;
  color: var(--muted);
}

.cb-who-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  max-width: 1100px;
  margin: 0 auto;
}

.cb-who-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cb-who-item {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: white;
  padding: 1.5rem;
  border-radius: 20px;
  transition: all 0.3s ease;
  border: 1px solid var(--border);
  position: relative;
  overflow: hidden;
}

.cb-who-item::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 100%;
  background: var(--primary);
  opacity: 0;
  transition: opacity 0.3s ease;
}

.cb-who-item:hover {
  transform: translateX(8px);
  border-color: var(--primary);
  box-shadow: 0 12px 24px -12px rgba(44, 82, 130, 0.15);
}

.cb-who-item:hover::before {
  opacity: 1;
}

.cb-who-item-icon {
  width: 56px;
  height: 56px;
  background: var(--primary-lt);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.cb-who-item:hover .cb-who-item-icon {
  background: var(--primary);
  transform: scale(1.05);
}

.cb-who-item-icon i {
  font-size: 1.4rem;
  color: var(--primary);
  transition: color 0.3s ease;
}

.cb-who-item:hover .cb-who-item-icon i {
  color: white;
}

.cb-who-item-text h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

.cb-who-item-text p {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* ======================================================
   COURSE PORTFOLIO (EQUAL CARDS - 4 + 3 CENTERED)
   ====================================================== */
.cb-courses {
  padding: 75px 0 80px;
  background: white;
}

.cb-courses-header {
  max-width: 700px;
  margin: 0 auto 3rem;
}

.cb-courses-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.cb-courses-sub {
  font-size: 0.82rem;
  color: var(--muted);
}

.cb-courses-row {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
}

.cb-courses-row-4 {
  justify-content: space-between;
}

.cb-courses-row-4 .cb-course-card {
  flex: 1;
  min-width: 0;
}

.cb-courses-row-3 {
  justify-content: center;
  gap: 1.5rem;
}

.cb-courses-row-3 .cb-course-card {
  flex: 1;
  max-width: calc(33.333% - 1rem);
  min-width: 0;
}

.cb-course-card {
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.5rem;
  transition: all 0.3s ease;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  height: 100%;
}

.cb-course-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -10px rgba(44, 82, 130, 0.1);
  background: white;
}

.cb-course-icon {
  width: 48px;
  height: 48px;
  background: var(--primary-lt);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
  flex-shrink: 0;
}

.cb-course-card:hover .cb-course-icon {
  background: var(--primary);
}

.cb-course-icon i {
  font-size: 1.2rem;
  color: var(--primary);
  transition: color 0.3s ease;
}

.cb-course-card:hover .cb-course-icon i {
  color: white;
}

.cb-course-label {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--dark);
}

.cb-course-card p {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
  flex-grow: 1;
}

.cb-course-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}

.cb-course-pills span {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--primary);
  background: white;
  border: 1px solid var(--border);
  padding: 0.2rem 0.65rem;
  border-radius: 30px;
}

.cb-courses-banner {
  background: linear-gradient(135deg, var(--primary-lt) 0%, var(--offwhite) 100%);
  border: 1px solid var(--primary);
  border-radius: 24px;
  padding: 1.5rem 2rem;
  margin-top: 2rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  transition: all 0.3s ease;
}

.cb-courses-banner:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 24px -12px rgba(44, 82, 130, 0.15);
}

.cb-courses-banner-icon {
  width: 60px;
  height: 60px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cb-courses-banner-icon i {
  font-size: 1.6rem;
  color: white;
}

.cb-courses-banner-content {
  flex: 1;
}

.cb-courses-banner-content h4 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.3rem;
}

.cb-courses-banner-content p {
  font-size: 0.85rem;
  color: var(--mid);
  margin-bottom: 0.5rem;
}

.cb-courses-banner-tags {
  display: flex;
  gap: 0.5rem;
}

.cb-courses-banner-tags span {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary);
  background: white;
  border: 1px solid var(--border);
  padding: 0.2rem 0.8rem;
  border-radius: 30px;
}

/* ======================================================
   HOW IT WORKS (BRAND NEW - HORIZONTAL STEPS WITH ARROWS)
   ====================================================== */
.cb-how {
  padding: 75px 0 80px;
  background: var(--offwhite);
}

.cb-how-header {
  max-width: 680px;
  margin: 0 auto 3rem;
}

.cb-how-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.cb-how-sub {
  font-size: 0.82rem;
  color: var(--muted);
}

/* Desktop Horizontal Steps */
.cb-how-steps {
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 0;
  max-width: 1300px;
  margin: 0 auto;
  /*overflow-x: auto;*/
  padding: 1rem 0.5rem;
}

.cb-how-step-card {
  background: white;
  border-radius: 20px;
  padding: 1.5rem;
  min-width: 200px;
  max-width: 220px;
  text-align: center;
  position: relative;
  transition: all 0.3s ease;
  border: 1px solid var(--border);
  flex-shrink: 0;
}

.cb-how-step-card:hover {
  transform: translateY(-8px);
  border-color: var(--primary);
  box-shadow: 0 20px 30px -12px rgba(44, 82, 130, 0.15);
}

.cb-how-step-number {
  position: absolute;
  top: -12px;
  left: 20px;
  width: 28px;
  height: 28px;
  background: var(--primary);
  color: white;
  font-size: 0.75rem;
  font-weight: 700;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cb-how-step-icon {
  width: 60px;
  height: 60px;
  background: var(--primary-lt);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
  transition: all 0.3s ease;
}

.cb-how-step-card:hover .cb-how-step-icon {
  background: var(--primary);
  transform: scale(1.05);
}

.cb-how-step-icon i {
  font-size: 1.4rem;
  color: var(--primary);
  transition: color 0.3s ease;
}

.cb-how-step-card:hover .cb-how-step-icon i {
  color: white;
}

.cb-how-step-card h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

.cb-how-step-card p {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

.cb-how-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  color: var(--primary);
  font-size: 1.2rem;
  flex-shrink: 0;
}

/* Mobile Vertical Steps (hidden on desktop) */
.cb-how-steps-mobile {
  display: none;
}

/* ======================================================
   BUNDLE TIERS (UNCHANGED)
   ====================================================== */
.cb-tiers {
  padding: 75px 0 80px;
  background: white;
}

.cb-tiers-header {
  max-width: 700px;
  margin: 0 auto 3rem;
}

.cb-tiers-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.cb-tiers-sub {
  font-size: 0.82rem;
  color: var(--muted);
}

.cb-tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
  align-items: start;
}

.cb-tier-card {
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 26px;
  padding: 2rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  transition: all 0.3s ease;
}

.cb-tier-card:hover {
  border-color: var(--primary);
  transform: translateY(-5px);
  box-shadow: 0 18px 36px -12px rgba(44, 82, 130, 0.12);
}

.cb-tier-card--featured {
  border-color: var(--primary);
  background: var(--primary-lt);
}

.cb-tier-popular {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.62rem;
  font-weight: 700;
  background: var(--primary);
  color: white;
  padding: 0.25rem 1rem;
  border-radius: 30px;
  white-space: nowrap;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.cb-tier-name {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--dark);
}

.cb-tier-range {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
  background: white;
  border: 1px solid var(--border);
  display: inline-block;
  padding: 0.25rem 0.9rem;
  border-radius: 30px;
  width: fit-content;
}

.cb-tier-desc {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.65;
  margin: 0;
}

.cb-tier-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.cb-tier-list li {
  font-size: 0.78rem;
  color: var(--dark);
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  line-height: 1.5;
}

.cb-tier-list li i {
  color: var(--primary);
  font-size: 0.7rem;
  margin-top: 0.18rem;
  flex-shrink: 0;
}

.cb-tier-btn {
  margin-top: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  font-size: 0.8rem;
  font-weight: 700;
  color: white;
  background: var(--primary);
  padding: 0.7rem 1.4rem;
  border-radius: 30px;
  text-decoration: none;
  transition: all 0.3s ease;
  width: 100%;
}

.cb-tier-btn:hover {
  background: var(--primary-dark);
  color: white;
  text-decoration: none;
  transform: translateY(-2px);
}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 1100px) {
  .cb-how-steps {
    display: none;
  }
  
  .cb-how-steps-mobile {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    max-width: 500px;
    margin: 0 auto;
  }
  
  .cb-how-step-mobile {
    background: white;
    border: 1px solid var(--border);
    border-radius: 16px;
    padding: 1.2rem;
    transition: all 0.3s ease;
  }
  
  .cb-how-step-mobile:hover {
    border-color: var(--primary);
    transform: translateX(5px);
  }
  
  .cb-how-step-mobile-header {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.8rem;
  }
  
  .cb-how-step-mobile-num {
    width: 36px;
    height: 36px;
    background: var(--primary);
    color: white;
    font-size: 0.85rem;
    font-weight: 700;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .cb-how-step-mobile-icon {
    width: 40px;
    height: 40px;
    background: var(--primary-lt);
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .cb-how-step-mobile-icon i {
    font-size: 1rem;
    color: var(--primary);
  }
  
  .cb-how-step-mobile h4 {
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 0.3rem;
  }
  
  .cb-how-step-mobile p {
    font-size: 0.75rem;
    color: var(--muted);
    line-height: 1.6;
    margin: 0;
  }
}

@media (max-width: 1024px) {
  .cb-why-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  
  .cb-who-split {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .cb-tiers-grid {
    grid-template-columns: 1fr;
    max-width: 520px;
    margin: 0 auto;
  }
  
  .cb-courses-row-4,
  .cb-courses-row-3 {
    flex-wrap: wrap;
  }
  
  .cb-courses-row-4 .cb-course-card {
    flex: 1 1 calc(50% - 0.75rem);
    min-width: 200px;
  }
  
  .cb-courses-row-3 .cb-course-card {
    flex: 1 1 calc(33.333% - 1rem);
    min-width: 200px;
  }
}

@media (max-width: 768px) {
  .cb-courses-row-4 .cb-course-card,
  .cb-courses-row-3 .cb-course-card {
    flex: 1 1 100%;
  }
  
  .cb-courses-banner {
    flex-direction: column;
    text-align: center;
  }
  
  .cb-courses-banner-tags {
    justify-content: center;
  }
  
  .cb-why-title,
  .cb-who-title,
  .cb-courses-title,
  .cb-how-title,
  .cb-tiers-title {
    font-size: 1.7rem;
  }
  
  .cb-who-item {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
  
  .cb-who-item-icon {
    width: 50px;
    height: 50px;
  }
  
  .cb-who-item-icon i {
    font-size: 1.2rem;
  }
}
/* =============================================
   Custom EdTech Platform Development — Styles
   Uses site root variables:
   --primary, --primary-dark, --primary-lt,
   --dark, --mid, --muted, --border, --offwhite
   ============================================= */

.ep-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1rem;
  display: block;
}

/* ======================================================
   SECTION 1: THE SOLUTION (REPLACED PROBLEM SECTION)
   ====================================================== */
.ep-solution {
  padding: 80px 0 70px;
  background: white;
}

.ep-solution-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 5rem;
  align-items: center;
}

.ep-solution-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 1.2rem;
}

.ep-solution-body {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.ep-solution-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.ep-solution-card {
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.4rem;
  transition: all 0.3s ease;
}

.ep-solution-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -10px rgba(44, 82, 130, 0.1);
}

.ep-solution-icon {
  width: 42px;
  height: 42px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
  transition: background 0.3s ease;
}

.ep-solution-card:hover .ep-solution-icon {
  background: var(--primary);
}

.ep-solution-icon i {
  font-size: 1rem;
  color: var(--primary);
  transition: color 0.3s ease;
}

.ep-solution-card:hover .ep-solution-icon i {
  color: white;
}

.ep-solution-card h5 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.ep-solution-card p {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* ======================================================
   SECTION 2: PLATFORM TYPES — TABBED
   ====================================================== */
.ep-build {
  padding: 80px 0;
  background: var(--offwhite);
}

.ep-build-header {
  max-width: 680px;
  margin: 0 auto 2.5rem;
}

.ep-build-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.ep-build-sub {
  font-size: 0.82rem;
  color: var(--muted);
}

.ep-build-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}

.ep-tab-btn {
  background: none;
  border: none;
  padding: 0.55rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mid);
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 30px;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.ep-tab-btn i {
  font-size: 0.75rem;
}

.ep-tab-btn:hover {
  color: var(--primary);
  background: white;
}

.ep-tab-btn.active {
  color: var(--primary);
  background: white;
  position: relative;
}

.ep-tab-btn.active::after {
  content: '';
  position: absolute;
  bottom: -0.55rem;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: var(--primary);
  border-radius: 3px;
}

.ep-build-panels {
  background: white;
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
}

.ep-tab-panel {
  display: none;
  animation: epFadeIn 0.35s ease;
}

.ep-tab-panel.active {
  display: block;
}

@keyframes epFadeIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

.ep-panel-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 360px;
}

.ep-panel-left {
  padding: 2.5rem;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  background: var(--primary-lt);
}

.ep-panel-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--primary);
  color: white;
  padding: 0.2rem 0.8rem;
  border-radius: 30px;
  align-self: flex-start;
}

.ep-panel-icon {
  width: 52px;
  height: 52px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ep-panel-icon i {
  font-size: 1.3rem;
  color: var(--primary);
}

.ep-panel-left h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.25;
  margin: 0;
}

.ep-panel-left p {
  font-size: 0.84rem;
  color: var(--mid);
  line-height: 1.75;
  margin: 0;
  flex: 1;
}

.ep-panel-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
}

.ep-panel-tags span {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--primary);
  background: white;
  border: 1px solid var(--border);
  padding: 0.25rem 0.75rem;
  border-radius: 30px;
}

.ep-panel-right {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.ep-panel-feature-list {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.ep-panel-feature {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.ep-panel-feature-icon {
  width: 38px;
  height: 38px;
  background: var(--primary-lt);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.25s ease;
}

.ep-panel-feature:hover .ep-panel-feature-icon {
  background: var(--primary);
}

.ep-panel-feature-icon i {
  font-size: 0.85rem;
  color: var(--primary);
  transition: color 0.25s ease;
}

.ep-panel-feature:hover .ep-panel-feature-icon i {
  color: white;
}

.ep-panel-feature strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.2rem;
}

.ep-panel-feature span {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.55;
}

/* ======================================================
   SECTION 3: WHO WE WORK WITH — ALTERNATING SPLIT
   ====================================================== */
.ep-who {
  padding: 80px 0;
  background: white;
}

.ep-who-header {
  max-width: 680px;
  margin: 0 auto 3.5rem;
}

.ep-who-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.ep-who-sub {
  font-size: 0.82rem;
  color: var(--muted);
}

.ep-who-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
}

.ep-who-item {
  display: grid;
  grid-template-columns: 260px 1fr;
  background: white;
  border-bottom: 1px solid var(--border);
  transition: background 0.25s ease;
}

.ep-who-item:last-child {
  border-bottom: none;
}

.ep-who-item--alt {
  grid-template-columns: 1fr 260px;
}

.ep-who-item:hover,
.ep-who-item--alt:hover {
  background: var(--primary-lt);
}

.ep-who-visual {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 2.5rem 2rem;
  border-right: 1px solid var(--border);
  text-align: center;
}

.ep-who-item--alt .ep-who-visual {
  border-right: none;
  border-left: 1px solid var(--border);
  order: 2;
}

.ep-who-icon-wrap {
  width: 60px;
  height: 60px;
  background: var(--primary-lt);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease;
}

.ep-who-item:hover .ep-who-icon-wrap,
.ep-who-item--alt:hover .ep-who-icon-wrap {
  background: var(--primary);
}

.ep-who-icon-wrap i {
  font-size: 1.3rem;
  color: var(--primary);
  transition: color 0.25s ease;
}

.ep-who-item:hover .ep-who-icon-wrap i,
.ep-who-item--alt:hover .ep-who-icon-wrap i {
  color: white;
}

.ep-who-tags {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  align-items: center;
}

.ep-who-tags span {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--primary);
  background: white;
  border: 1px solid var(--border);
  padding: 0.2rem 0.7rem;
  border-radius: 30px;
  white-space: nowrap;
}

.ep-who-content {
  padding: 2.5rem;
}

.ep-who-item--alt .ep-who-content {
  order: 1;
}

.ep-who-content h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.8rem;
  line-height: 1.3;
}

.ep-who-content p {
  font-size: 0.84rem;
  color: var(--mid);
  line-height: 1.75;
  margin-bottom: 1.2rem;
}

.ep-who-points {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.ep-who-points li {
  font-size: 0.8rem;
  color: var(--dark);
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  line-height: 1.5;
}

.ep-who-points li i {
  color: var(--primary);
  font-size: 0.68rem;
  margin-top: 0.25rem;
  flex-shrink: 0;
}

/* ======================================================
   SECTION 4: HOW WE WORK — UPDATED CENTERED PROCESS TRACK
   ====================================================== */
.ep-process {
  padding: 80px 0;
  background: var(--offwhite);
}

.ep-process-header {
  max-width: 680px;
  margin: 0 auto 4rem;
}

.ep-process-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.ep-process-track {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0;
  position: relative;
}

.ep-process-step {
  display: flex;
  flex-direction: column;
  position: relative;
}

.ep-process-step-head {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
  position: relative;
  width: 100%;
}

.ep-process-step-num {
  width: 48px;
  height: 48px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
  z-index: 2;
  position: relative;
}

.ep-process-step-line {
  flex: 1;
  height: 2px;
  background: var(--border);
  position: absolute;
  left: 50%;
  width: 100%;
}

/* Line only appears between steps, not after last step */
.ep-process-step:not(.ep-process-step-last) .ep-process-step-line {
  width: calc(100% + 1rem);
  left: calc(50% + 0.5rem);
}

.ep-process-step-last .ep-process-step-head {
  justify-content: center;
}

.ep-process-step-last .ep-process-step-line {
  display: none;
}

.ep-process-step-num-last {
  background: var(--primary);
}

.ep-process-step-body {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.5rem;
  margin: 0 0.75rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: all 0.3s ease;
  height: 100%;
}

.ep-process-step-body:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -10px rgba(44, 82, 130, 0.1);
}

.ep-process-step-icon {
  width: 42px;
  height: 42px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease;
}

.ep-process-step-body:hover .ep-process-step-icon {
  background: var(--primary);
}

.ep-process-step-icon i {
  font-size: 1rem;
  color: var(--primary);
  transition: color 0.25s ease;
}

.ep-process-step-body:hover .ep-process-step-icon i {
  color: white;
}

.ep-process-step-body h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
  line-height: 1.3;
}

.ep-process-step-body p {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

.ep-process-step-meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}

.ep-process-duration,
.ep-process-deliverable {
  font-size: 0.68rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.ep-process-duration { color: var(--muted); }
.ep-process-deliverable { color: var(--primary); }
.ep-process-duration i,
.ep-process-deliverable i { font-size: 0.6rem; }

/* ======================================================
   SECTION 5: HOW WE ENGAGE
   ====================================================== */
.ep-models {
  padding: 80px 0;
  background: white;
}

.ep-models-header {
  max-width: 700px;
  margin: 0 auto 3rem;
}

.ep-models-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.ep-models-sub {
  font-size: 0.82rem;
  color: var(--muted);
}

.ep-models-list {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ep-model-item {
  display: grid;
  grid-template-columns: 260px 1fr;
  border-radius: 20px;
  overflow: hidden;
  border: 1px solid var(--border);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.ep-model-item:hover {
  box-shadow: 0 12px 32px -10px rgba(44, 82, 130, 0.12);
  transform: translateY(-3px);
}

.ep-model-item--featured {
  border-color: var(--primary);
}

.ep-model-left {
  padding: 2rem 1.8rem;
  background: #51677d;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
}

.ep-model-item--featured .ep-model-left {
  background: var(--primary);
}

.ep-model-badge {
  display: inline-block;
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 0.2rem 0.75rem;
  border-radius: 30px;
  align-self: flex-start;
  margin-bottom: 0.25rem;
}

.ep-model-name {
  font-size: 1.15rem;
  font-weight: 800;
  color: white;
  line-height: 1.25;
}

.ep-model-fit {
  font-size: 0.75rem;
  color: rgba(255, 255, 255, 0.55);
  line-height: 1.5;
}

.ep-model-right {
  padding: 2rem 2.2rem;
  background: white;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.ep-model-item--featured .ep-model-right {
  background: var(--primary-lt);
}

.ep-model-desc {
  font-size: 0.84rem;
  color: var(--mid);
  line-height: 1.75;
  margin: 0;
}

.ep-model-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.ep-model-pills span {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--primary);
  background: white;
  border: 1px solid var(--border);
  padding: 0.25rem 0.8rem;
  border-radius: 30px;
}

.ep-model-item--featured .ep-model-pills span {
  background: white;
}

.ep-model-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
  border: 1px solid var(--primary);
  background: transparent;
  padding: 0.55rem 1.2rem;
  border-radius: 30px;
  text-decoration: none;
  transition: all 0.25s ease;
  align-self: flex-start;
}

.ep-model-cta:hover {
  background: var(--primary);
  color: white;
  text-decoration: none;
}

.ep-model-item--featured .ep-model-cta {
  color: var(--primary);
  border-color: var(--primary);
  background: white;
}

.ep-model-item--featured .ep-model-cta:hover {
  background: var(--primary);
  color: white;
}

/* ======================================================
   CTA BAND
   ====================================================== */
/*.pmp-cta-band {*/
/*  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);*/
/*  padding: 50px 0;*/
/*  color: white;*/
/*}*/

/*.pmp-cta-band h2 span {*/
/*  color: #A8D8EA;*/
/*}*/

/*.pmp-cta-button-new {*/
/*  display: inline-block;*/
/*  background: white;*/
/*  color: var(--primary);*/
/*  font-weight: 700;*/
/*  padding: 12px 28px;*/
/*  border-radius: 40px;*/
/*  text-decoration: none;*/
/*  transition: all 0.3s ease;*/
/*  font-size: 0.9rem;*/
/*}*/

/*.pmp-cta-button-new:hover {*/
/*  background: transparent;*/
/*  color: white;*/
/*  border: 1px solid white;*/
/*  padding: 11px 27px;*/
/*  text-decoration: none;*/
/*}*/

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 1200px) {
  .ep-process-track {
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
  }
  .ep-process-step:nth-child(3) .ep-process-step-line { display: none; }
  .ep-process-step:nth-child(4) .ep-process-step-line { display: none; }
  .ep-process-step:nth-child(5) { grid-column: span 3; }
  .ep-process-step:nth-child(5) .ep-process-step-body { max-width: 380px; margin: 0 auto; width: 100%; }
  .ep-process-step-last .ep-process-step-head { justify-content: center; }
}

@media (max-width: 1024px) {
  .ep-solution-inner { grid-template-columns: 1fr; gap: 2.5rem; }
  .ep-panel-inner { grid-template-columns: 1fr; }
  .ep-panel-left { border-right: none; border-bottom: 1px solid var(--border); }
  .ep-model-item { grid-template-columns: 200px 1fr; }
}

@media (max-width: 900px) {
  .ep-who-item,
  .ep-who-item--alt { grid-template-columns: 1fr; }
  .ep-who-visual {
    flex-direction: row;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 1.25rem 2rem;
    justify-content: flex-start;
  }
  .ep-who-item--alt .ep-who-visual {
    border-left: none;
    border-bottom: 1px solid var(--border);
    order: 0;
  }
  .ep-who-item--alt .ep-who-content { order: 1; }
  .ep-who-tags { flex-direction: row; flex-wrap: wrap; }
  .ep-model-item { grid-template-columns: 1fr; }
  .ep-model-left { padding: 1.5rem 1.8rem; }
  .ep-model-cta { align-self: flex-start; }
}

@media (max-width: 768px) {
  .ep-process-track { 
    grid-template-columns: 1fr; 
    gap: 2rem;
  }
  .ep-process-step {
    align-items: center;
  }
  .ep-process-step-head {
    justify-content: center;
    margin-bottom: 1rem;
  }
  .ep-process-step-line {
    display: none !important;
  }
  .ep-process-step-body {
    margin: 0;
    max-width: 100% !important;
  }
  .ep-process-step:nth-child(5) {
    grid-column: span 1;
  }
  .ep-process-step:nth-child(5) .ep-process-step-body {
    max-width: 100%;
  }
  .ep-build-tabs { 
    justify-content: flex-start; 
    overflow-x: auto; 
    padding-bottom: 0.8rem; 
    flex-wrap: nowrap; 
  }
  .ep-tab-btn { flex-shrink: 0; }
  .ep-who-content { padding: 1.5rem; }
  .ep-who-visual { padding: 1.25rem 1.5rem; }
  .ep-solution-title,
  .ep-build-title,
  .ep-who-title,
  .ep-process-title,
  .ep-models-title { font-size: 1.65rem; }
  .ep-solution-grid { gap: 0.8rem; }
}

@media (max-width: 480px) {
  .ep-solution-grid { grid-template-columns: 1fr; }
}
/* =============================================
   Mobile Learning Apps — Complete Redesign
   Uses site root variables only:
   --primary, --primary-dark, --primary-lt,
   --dark, --mid, --muted, --border, --offwhite
   ============================================= */

/* Shared Eyebrow */
.ml-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1rem;
  display: block;
}

/*.gradient-text {*/
/*  background: linear-gradient(135deg, var(--primary) 0%, #2c6b9e 100%);*/
/*  background-clip: text;*/
/*  -webkit-background-clip: text;*/
/*  color: transparent;*/
/*}*/

/* =============================================
   Mobile Learning Apps — EdTech Page Style
   Uses site root variables only:
   --primary, --primary-dark, --primary-lt,
   --dark, --mid, --muted, --border, --offwhite
   ============================================= */

/* Shared Eyebrow */
.ml-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1rem;
  display: block;
}

/*.gradient-text {*/
/*  background: linear-gradient(135deg, var(--primary) 0%, #2c6b9e 100%);*/
/*  background-clip: text;*/
/*  -webkit-background-clip: text;*/
/*  color: transparent;*/
/*}*/

/* =============================================
   Mobile Learning Apps — EdTech Page Style
   Uses site root variables only:
   --primary, --primary-dark, --primary-lt,
   --dark, --mid, --muted, --border, --offwhite
   ============================================= */

/* Shared Eyebrow */
.ml-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1rem;
  display: block;
}

/*.gradient-text {*/
/*  background: linear-gradient(135deg, var(--primary) 0%, #2c6b9e 100%);*/
/*  background-clip: text;*/
/*  -webkit-background-clip: text;*/
/*  color: transparent;*/
/*}*/

/* ======================================================
   SECTION 1: WHAT MAKES MOBILE LEARNING WORK (EdTech Style)
   ====================================================== */
.ml-success {
  padding: 60px 0 50px;
  background: white;
}

.ml-success-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 5rem;
  align-items: flex-start;
  margin-bottom: 3rem;
}

.ml-success-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 1.2rem;
}

.ml-success-body {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}

/* Stats Row - NEW ADDITION */
.ml-success-stats {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}

.ml-stat {
  flex: 1;
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1rem;
  text-align: center;
  transition: all 0.3s ease;
}

.ml-stat:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
}

.ml-stat-number {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1.2;
  margin-bottom: 0.3rem;
}

.ml-stat-label {
  font-size: 0.68rem;
  color: var(--muted);
  line-height: 1.4;
}

.ml-success-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.ml-success-card {
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.4rem;
  transition: all 0.3s ease;
}

.ml-success-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -10px rgba(44, 82, 130, 0.1);
}

.ml-success-icon {
  width: 42px;
  height: 42px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
  transition: background 0.3s ease;
}

.ml-success-card:hover .ml-success-icon {
  background: var(--primary);
}

.ml-success-icon i {
  font-size: 1rem;
  color: var(--primary);
  transition: color 0.3s ease;
}

.ml-success-card:hover .ml-success-icon i {
  color: white;
}

.ml-success-card h5 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.ml-success-card p {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

.ml-success-conclusion {
  background: var(--primary-lt);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 2rem 2.5rem;
  margin-top: 1rem;
}

.ml-success-conclusion-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.ml-success-conclusion-content {
  flex: 1;
}

.ml-success-conclusion-content h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

.ml-success-conclusion-content p {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.7;
  margin: 0;
}

.ml-success-conclusion-cta span {
  display: inline-block;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--primary);
  background: white;
  padding: 0.65rem 1.5rem;
  border-radius: 40px;
  white-space: nowrap;
  transition: all 0.3s ease;
  cursor: pointer;
}

.ml-success-conclusion-cta span:hover {
  background: var(--primary);
  color: white;
  transform: translateY(-2px);
}

/* ======================================================
   SECTION 2: APP TYPES WE BUILD (EdTech Style - Card Grid)
   ====================================================== */
.ml-types {
  padding: 80px 0;
  background: var(--offwhite);
}

.ml-types-header {
  max-width: 700px;
  margin: 0 auto 3rem;
  text-align: center;
}

.ml-types-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.ml-types-sub {
  font-size: 0.88rem;
  color: var(--mid);
}

.ml-types-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.ml-type-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.8rem;
  transition: all 0.3s ease;
}

.ml-type-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -10px rgba(44, 82, 130, 0.1);
}

.ml-type-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}

.ml-type-icon {
  width: 48px;
  height: 48px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.ml-type-card:hover .ml-type-icon {
  background: var(--primary);
}

.ml-type-icon i {
  font-size: 1.1rem;
  color: var(--primary);
  transition: color 0.3s ease;
}

.ml-type-card:hover .ml-type-icon i {
  color: white;
}

.ml-type-badge {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  background: var(--primary-lt);
  padding: 0.25rem 0.8rem;
  border-radius: 30px;
}

.ml-type-card h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.6rem;
}

.ml-type-card > p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

.ml-type-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ml-type-features li {
  font-size: 0.74rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.ml-type-features li i {
  color: var(--primary);
  font-size: 0.7rem;
}

/* ======================================================
   RESPONSIVE (UPDATED with Stats Row support)
   ====================================================== */
@media (max-width: 1024px) {
  .ml-success-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  
  .ml-types-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .ml-success-conclusion-inner {
    flex-direction: column;
    text-align: center;
  }
  
  .ml-success-conclusion-cta span {
    white-space: normal;
  }
}

@media (max-width: 768px) {
  .ml-success-grid {
    grid-template-columns: 1fr;
  }
  
  .ml-types-grid {
    grid-template-columns: 1fr;
  }
  
  .ml-success-title,
  .ml-types-title {
    font-size: 1.6rem;
  }
  
  /* Stats Row responsive - NEW */
  .ml-success-stats {
    flex-direction: column;
  }
  
  .ml-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    text-align: left;
    gap: 1rem;
  }
  
  .ml-stat-number {
    font-size: 1.3rem;
    margin-bottom: 0;
  }
  
  .ml-stat-label {
    font-size: 0.72rem;
  }
}

@media (max-width: 480px) {
  .ml-success-conclusion {
    padding: 1.5rem;
  }
  
  /* Stats Row mobile - NEW */
  .ml-stat {
    flex-direction: column;
    text-align: center;
    gap: 0.3rem;
  }
  
  .ml-stat-number {
    font-size: 1.4rem;
  }
}
/* ======================================================
   SECTION 2: APP TYPES WE BUILD (NEW DESIGN)
   ====================================================== */
.ml-types-new {
  padding: 80px 0;
  background: var(--offwhite);
}

.ml-types-new-header {
  max-width: 700px;
  margin: 0 auto 3rem;
}

.ml-types-new-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.ml-types-new-sub {
  font-size: 0.88rem;
  color: var(--mid);
}

.ml-types-new-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.ml-type-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 1.8rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.ml-type-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 4px;
  height: 0;
  background: var(--primary);
  transition: height 0.3s ease;
}

.ml-type-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: 0 20px 35px -12px rgba(44, 82, 130, 0.15);
}

.ml-type-card:hover::before {
  height: 100%;
}

.ml-type-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}

.ml-type-icon {
  width: 52px;
  height: 52px;
  background: var(--primary-lt);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.3s ease;
}

.ml-type-card:hover .ml-type-icon {
  background: var(--primary);
}

.ml-type-icon i {
  font-size: 1.2rem;
  color: var(--primary);
  transition: color 0.3s ease;
}

.ml-type-card:hover .ml-type-icon i {
  color: white;
}

.ml-type-badge {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  background: var(--primary-lt);
  padding: 0.3rem 0.8rem;
  border-radius: 30px;
}

.ml-type-card h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.6rem;
}

.ml-type-card > p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.6;
  margin-bottom: 1.2rem;
}

.ml-type-features {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ml-type-features li {
  font-size: 0.74rem;
  color: var(--muted);
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.ml-type-features li i {
  color: var(--primary);
  font-size: 0.7rem;
}

/* ======================================================
   SECTION 3: HOW WE BUILD DIFFERENT
   ====================================================== */
.ml-approach {
  padding: 80px 0;
  background: white;
}

.ml-approach-header {
  max-width: 700px;
  margin: 0 auto 3rem;
}

.ml-approach-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.ml-approach-sub {
  font-size: 0.88rem;
  color: var(--mid);
}

.ml-approach-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.ml-approach-item {
  display: flex;
  gap: 1.2rem;
  align-items: flex-start;
  padding: 1.2rem;
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 20px;
  transition: all 0.3s ease;
}

.ml-approach-item:hover {
  border-color: var(--primary);
  transform: translateX(4px);
}

.ml-approach-number {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  opacity: 0.4;
  line-height: 1;
}

.ml-approach-content h3 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.4rem;
}

.ml-approach-content p {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* ======================================================
   SECTION 4: WHO WE BUILD FOR
   ====================================================== */
.ml-audience {
  padding: 80px 0;
  background: var(--offwhite);
}

.ml-audience-header {
  max-width: 700px;
  margin: 0 auto 3rem;
}

.ml-audience-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.ml-audience-sub {
  font-size: 0.88rem;
  color: var(--mid);
}

.ml-audience-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.ml-audience-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 2rem;
  transition: all 0.3s ease;
}

.ml-audience-card:hover {
  transform: translateY(-4px);
  border-color: var(--primary);
  box-shadow: 0 12px 28px -10px rgba(44, 82, 130, 0.12);
}

.ml-audience-icon {
  width: 56px;
  height: 56px;
  background: var(--primary-lt);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  transition: background 0.3s ease;
}

.ml-audience-card:hover .ml-audience-icon {
  background: var(--primary);
}

.ml-audience-icon i {
  font-size: 1.3rem;
  color: var(--primary);
  transition: color 0.3s ease;
}

.ml-audience-card:hover .ml-audience-icon i {
  color: white;
}

.ml-audience-card h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.6rem;
}

.ml-audience-card > p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.ml-audience-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.ml-audience-card ul li {
  font-size: 0.74rem;
  color: var(--muted);
  margin-bottom: 0.4rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.ml-audience-card ul li i {
  color: var(--primary);
  font-size: 0.65rem;
}

/* ======================================================
   SECTION 5: HOW WE BUILD (PROCESS)
   ====================================================== */
.ml-build-process {
  padding: 80px 0;
  background: white;
}

.ml-build-process-header {
  max-width: 700px;
  margin: 0 auto 3rem;
}

.ml-build-process-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

.ml-build-process-sub {
  font-size: 0.88rem;
  color: var(--mid);
}

.ml-build-steps {
  max-width: 900px;
  margin: 0 auto;
  position: relative;
}

.ml-build-steps::before {
  content: '';
  position: absolute;
  left: 32px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.ml-step {
  display: flex;
  gap: 1.5rem;
  margin-bottom: 2rem;
  position: relative;
}

.ml-step:last-child {
  margin-bottom: 0;
}

.ml-step-number {
  width: 64px;
  height: 64px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 800;
  color: white;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.ml-step-content {
  flex: 1;
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.ml-step-content:hover {
  border-color: var(--primary);
  transform: translateX(4px);
  box-shadow: 0 8px 20px -8px rgba(44, 82, 130, 0.1);
}

.ml-step-icon {
  width: 44px;
  height: 44px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.8rem;
  transition: background 0.3s ease;
}

.ml-step-content:hover .ml-step-icon {
  background: var(--primary);
}

.ml-step-icon i {
  font-size: 1rem;
  color: var(--primary);
  transition: color 0.3s ease;
}

.ml-step-content:hover .ml-step-icon i {
  color: white;
}

.ml-step-content h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

.ml-step-content > p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.ml-step-meta {
  display: flex;
  gap: 1.2rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
}

.ml-step-meta span {
  font-size: 0.68rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: var(--muted);
}

.ml-step-meta span i {
  color: var(--primary);
  font-size: 0.65rem;
}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 1200px) {
  .ml-failure-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 1024px) {
  .ml-types-new-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .ml-audience-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 900px) {
  .ml-failure-conclusion-inner {
    flex-direction: column;
  }
  
  .ml-approach-grid {
    grid-template-columns: 1fr;
  }
  
  .ml-build-steps::before {
    left: 24px;
  }
  
  .ml-step-number {
    width: 48px;
    height: 48px;
    font-size: 1rem;
  }
}

@media (max-width: 768px) {
  .ml-failure-grid {
    grid-template-columns: 1fr;
  }
  
  .ml-types-new-grid {
    grid-template-columns: 1fr;
  }
  
  .ml-step-meta {
    flex-direction: column;
    gap: 0.4rem;
  }
  
  .ml-failure-title,
  .ml-types-new-title,
  .ml-approach-title,
  .ml-audience-title,
  .ml-build-process-title {
    font-size: 1.6rem;
  }
}

@media (max-width: 480px) {
  .ml-step {
    flex-direction: column;
  }
  
  .ml-build-steps::before {
    display: none;
  }
  
  .ml-step-number {
    width: 56px;
    height: 56px;
  }
  
  .ml-failure-conclusion {
    padding: 1.5rem;
  }
}

/* =============================================
   Interactive Learning Tools — Gamification & AR/VR
   Unique stylesheet for this page.
   Prefix: ilt-
   Uses site root variables only.
   ============================================= */

/* ===================== HERO ===================== */
.ilt-hero {
  padding: 50px 0 45px;
  background: linear-gradient(135deg, #0A2F44 0%, #134B6B 50%, #0D3A52 100%);
}

.ilt-hero-title {
  font-size: 2.2rem;
  margin-bottom: 0.75rem;
  color: white;
  font-weight: 800;
}

.ilt-gradient-text {
  background: #a8d8ea;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.ilt-hero-sub {
  font-size: 1rem;
  max-width: 700px;
  margin: 0 auto;
  color: rgba(255,255,255,0.9);
}
/* ===================== SECTION 1: THE SOLUTION ===================== */
.ilt-solution {
  padding: 80px 0;
  background: white;
}

.ilt-solution-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 4rem;
  align-items: flex-start;
}

.ilt-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1rem;
  display: block;
}

.ilt-solution-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 1.2rem;
}

/*.gradient-text {*/
/*  background: linear-gradient(135deg, var(--primary) 0%, #2c6b9e 100%);*/
/*  background-clip: text;*/
/*  -webkit-background-clip: text;*/
/*  color: transparent;*/
/*}*/

.ilt-solution-body {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.ilt-solution-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}

.ilt-solution-card {
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.5rem;
  transition: all 0.3s ease;
}

.ilt-solution-card:hover {
  border-color: var(--primary);
  transform: translateY(-6px);
  box-shadow: 0 20px 40px -12px rgba(44, 82, 130, 0.13);
}

.ilt-solution-icon {
  width: 48px;
  height: 48px;
  background: rgba(44, 82, 130, 0.1);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
  transition: all 0.3s ease;
}

.ilt-solution-card:hover .ilt-solution-icon {
  background: var(--primary);
  transform: scale(1.1);
}

.ilt-solution-icon i {
  font-size: 1.1rem;
  color: var(--primary);
  transition: color 0.3s ease;
}

.ilt-solution-card:hover .ilt-solution-icon i {
  color: white;
}

.ilt-solution-card h5 {
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.5rem;
  transition: color 0.25s ease;
}

.ilt-solution-card:hover h5 {
  color: var(--primary);
}

.ilt-solution-card p {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 1024px) {
  .ilt-solution-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 768px) {
  .ilt-solution-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .ilt-solution-title {
    font-size: 1.6rem;
  }
}
/* ===================== SECTION 2: WHAT WE BUILD — CARD GRID DESIGN ===================== */
.ilt-build {
  padding: 80px 0;
  background: var(--offwhite);
}

.ilt-build-header {
  max-width: 680px;
  margin: 0 auto 3rem;
  text-align: center;
}

.ilt-build-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.ilt-build-sub {
  font-size: 0.82rem;
  color: var(--muted);
}

.ilt-build-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.ilt-build-card {
  background: white;
  border-radius: 24px;
  overflow: hidden;
  transition: all 0.3s ease;
  border: 1px solid var(--border);
  position: relative;
}

.ilt-build-card:hover {
  transform: translateY(-8px);
  border-color: var(--primary);
  box-shadow: 0 20px 35px -12px rgba(44, 82, 130, 0.15);
}

.ilt-build-card-icon {
  padding: 2rem 2rem 0 2rem;
}

.ilt-build-card-icon .icon-bg {
  width: 70px;
  height: 70px;
  background: var(--primary-lt);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.3s ease;
}

.ilt-build-card:hover .ilt-build-card-icon .icon-bg {
  background: var(--primary);
}

.ilt-build-card-icon i {
  font-size: 1.8rem;
  color: var(--primary);
  transition: color 0.3s ease;
}

.ilt-build-card:hover .ilt-build-card-icon i {
  color: white;
}

.ilt-build-card-content {
  padding: 1.5rem 2rem 2rem 2rem;
}

.ilt-build-card-content h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.75rem;
}

.ilt-build-card-content p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.ilt-build-card-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.ilt-build-card-tags span {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-lt);
  padding: 0.25rem 0.75rem;
  border-radius: 30px;
  transition: all 0.3s ease;
}

.ilt-build-card:hover .ilt-build-card-tags span {
  background: var(--primary);
  color: white;
}

/* ===================== SECTION 3: WHO WE WORK WITH — 2-COLUMN GRID ===================== */
.ilt-who {
  padding: 80px 0;
  background: white;
}

.ilt-who-header {
  max-width: 680px;
  margin: 0 auto 3rem;
  text-align: center;
}

.ilt-who-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.ilt-who-sub {
  font-size: 0.82rem;
  color: var(--muted);
}

.ilt-who-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
}

.ilt-who-card {
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
}

.ilt-who-card-icon {
  width: 60px;
  height: 60px;
  background: var(--primary-lt);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.ilt-who-card-icon i {
  font-size: 1.6rem;
  color: var(--primary);
}

.ilt-who-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.75rem;
}

.ilt-who-card p {
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.6;
  margin-bottom: 1.25rem;
}

.ilt-who-features {
  list-style: none;
  padding: 0;
  margin: 0;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}

.ilt-who-features li {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  line-height: 1.5;
}

.ilt-who-features li:last-child {
  margin-bottom: 0;
}

.ilt-who-features li i {
  color: var(--primary);
  font-size: 0.7rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.ilt-who-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1rem;
}

.ilt-who-tags span {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--primary);
  background: white;
  border: 1px solid var(--border);
  padding: 0.25rem 0.75rem;
  border-radius: 30px;
}

/* ===================== SECTION 4: HOW WE WORK — TIMELINE WITH ICONS ===================== */
.ilt-process {
  padding: 80px 0;
  background: var(--offwhite);
}

.ilt-process-header {
  max-width: 680px;
  margin: 0 auto 3rem;
  text-align: center;
}

.ilt-process-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.ilt-process-sub {
  font-size: 0.82rem;
  color: var(--muted);
}

.ilt-timeline {
  max-width: 900px;
  margin: 0 auto;
}

.ilt-timeline-item {
  display: flex;
  gap: 2rem;
  margin-bottom: 2rem;
  position: relative;
}

.ilt-timeline-item:last-child {
  margin-bottom: 0;
}

.ilt-timeline-marker {
  flex-shrink: 0;
  width: 80px;
  text-align: center;
  position: relative;
}

.ilt-timeline-number {
  width: 60px;
  height: 60px;
  background: var(--primary);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 800;
  margin: 0 auto;
  position: relative;
  z-index: 2;
}

.ilt-timeline-line {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%);
  width: 2px;
  height: calc(100% + 2rem);
  background: var(--border);
}

.ilt-timeline-item:last-child .ilt-timeline-line {
  display: none;
}

.ilt-timeline-content {
  flex: 1;
  background: white;
  border-radius: 20px;
  padding: 1.5rem;
  border: 1px solid var(--border);
  transition: all 0.3s ease;
}

.ilt-timeline-content:hover {
  border-color: var(--primary);
  box-shadow: 0 12px 28px -12px rgba(44, 82, 130, 0.12);
}

.ilt-timeline-icon {
  width: 48px;
  height: 48px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.ilt-timeline-icon i {
  font-size: 1.2rem;
  color: var(--primary);
}

.ilt-timeline-content h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

.ilt-timeline-content p {
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.ilt-timeline-meta {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.ilt-timeline-meta span {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* ===================== SECTION 5: HOW WE ENGAGE — PRICING STYLE CARDS ===================== */
.ilt-engage {
  padding: 80px 0;
  background: white;
}

.ilt-engage-header {
  max-width: 680px;
  margin: 0 auto 3rem;
  text-align: center;
}

.ilt-engage-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.ilt-engage-sub {
  font-size: 0.82rem;
  color: var(--muted);
}

.ilt-engage-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.ilt-engage-card {
  background: var(--offwhite);
  border-radius: 24px;
  padding: 2rem;
  text-align: center;
  transition: all 0.3s ease;
  border: 1px solid var(--border);
  position: relative;
}

.ilt-engage-card:hover {
  transform: translateY(-8px);
  border-color: var(--primary);
  box-shadow: 0 20px 35px -12px rgba(44, 82, 130, 0.15);
}

.ilt-engage-card--featured {
  background: white;
  border: 2px solid var(--primary);
  position: relative;
}

.ilt-engage-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.25rem 1rem;
  border-radius: 30px;
  white-space: nowrap;
}

.ilt-engage-icon {
  width: 80px;
  height: 80px;
  background: var(--primary-lt);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.5rem;
}

.ilt-engage-icon i {
  font-size: 2rem;
  color: var(--primary);
}

.ilt-engage-card h3 {
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

.ilt-engage-price {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  margin: 1rem 0 0.5rem;
}

.ilt-engage-price span {
  font-size: 0.8rem;
  font-weight: 400;
  color: var(--muted);
}

.ilt-engage-desc {
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.6;
  margin-bottom: 1.5rem;
  min-height: 80px;
}

.ilt-engage-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem 0;
  text-align: left;
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
}

.ilt-engage-features li {
  font-size: 0.78rem;
  color: var(--muted);
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.ilt-engage-features li i {
  color: var(--primary);
  font-size: 0.7rem;
  width: 18px;
  flex-shrink: 0;
}

.ilt-engage-btn {
  display: inline-block;
  width: 100%;
  padding: 0.8rem;
  background: var(--primary);
  color: white;
  text-align: center;
  border-radius: 40px;
  font-weight: 600;
  font-size: 0.85rem;
  text-decoration: none;
  transition: all 0.3s ease;
}

.ilt-engage-btn:hover {
  background: var(--primary-dark);
  transform: translateY(-2px);
  color: white;
}

.ilt-engage-card--featured .ilt-engage-btn {
  background: var(--primary);
  box-shadow: 0 4px 12px rgba(44, 82, 130, 0.2);
}

.ilt-engage-note {
  text-align: center;
  padding: 1.5rem;
  background: var(--offwhite);
  border-radius: 16px;
  max-width: 800px;
  margin: 0 auto;
  border: 1px solid var(--border);
}

.ilt-engage-note p {
  font-size: 0.8rem;
  color: var(--muted);
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}

.ilt-engage-note i {
  color: var(--primary);
  font-size: 0.9rem;
}

/* ===================== CTA BAND ===================== */
.ilt-cta-band {
  padding: 45px 0;
  background: linear-gradient(135deg, var(--primary) 0%, var(--primary-dark) 100%);
}

/* ===================== RESPONSIVE ===================== */
@media (max-width: 1100px) {
  .ilt-problem-grid {
    gap: 1rem;
  }
  
  .ilt-build-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .ilt-who-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
  
  .ilt-engage-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
  }
}

@media (max-width: 1024px) {
  .ilt-problem-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 768px) {
  .ilt-problem-grid {
    grid-template-columns: 1fr;
  }
  
  .ilt-build-grid {
    grid-template-columns: 1fr;
  }
  
  .ilt-who-grid {
    grid-template-columns: 1fr;
  }
  
  .ilt-engage-grid {
    grid-template-columns: 1fr;
  }
  
  .ilt-timeline-item {
    flex-direction: column;
    gap: 1rem;
  }
  
  .ilt-timeline-marker {
    width: auto;
  }
  
  .ilt-timeline-line {
    display: none;
  }

  .ilt-hero-title,
  .ilt-problem-title,
  .ilt-build-title,
  .ilt-who-title,
  .ilt-process-title,
  .ilt-engage-title {
    font-size: 1.6rem;
  }
}

@media (max-width: 480px) {
  .ilt-engage-card {
    padding: 1.5rem;
  }
  
  .ilt-build-card-content {
    padding: 1rem 1.5rem 1.5rem 1.5rem;
  }
  
  .ilt-build-card-icon {
    padding: 1.5rem 1.5rem 0 1.5rem;
  }
  
  .ilt-who-card {
    padding: 1.5rem;
  }
}
/* =============================================
   LMS Platform Integration — Styles
   Uses site root variables:
   --primary, --primary-dark, --primary-lt,
   --dark, --mid, --muted, --border, --offwhite
   ============================================= */

.lms-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1rem;
  display: block;
}


/* ======================================================
   SECTION 1: PLATFORMS WE INTEGRATE (CENTERED WITH STATS)
   ====================================================== */

.lms-platforms {
  padding: 80px 0 70px;
  background: white;
}

.lms-platforms-header {
  text-align: center;
  max-width: 900px;
  margin: 0 auto 3rem;
}

.lms-platforms-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.lms-platforms-body {
  font-size: 0.86rem;
  color: var(--mid);
  line-height: 1.78;
  max-width: 700px;
  margin: 0 auto;
}

.lms-platforms-stats {
  display: flex;
  justify-content: center;
  gap: 3rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.lms-stat-item {
  text-align: center;
  flex: 1;
  max-width: 220px;
}

.lms-stat-item span {
  font-size: 2rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
  display: block;
  margin-bottom: 0.5rem;
}

.lms-stat-item em {
  font-style: normal;
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.4;
  display: block;
}

/* Platform list — stacked accordion-style rows */
.lms-platform-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.lms-platform-item {
  border-bottom: 1px solid var(--border);
}

.lms-platform-item:last-child {
  border-bottom: none;
}

.lms-platform-item-head {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.6rem 2rem;
  background: white;
  cursor: default;
}

.lms-platform-item:nth-child(even) .lms-platform-item-head {
  /*background: var(--offwhite);*/
}

.lms-platform-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-lt);
  border: 1px solid var(--border);
  padding: 0.22rem 0.7rem;
  border-radius: 30px;
  white-space: nowrap;
  flex-shrink: 0;
}

.lms-platform-badge--blue {
  color: #2563eb;
  background: #eff6ff;
  border-color: #bfdbfe;
}

.lms-platform-badge--dark {
  color: var(--dark);
  background: var(--offwhite);
  border-color: var(--border);
}

.lms-platform-badge--green {
  color: #16a34a;
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.lms-platform-logo-wrap {
  width: 46px;
  height: 46px;
  background: var(--primary-lt);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.lms-platform-logo-wrap i {
  font-size: 1.1rem;
  color: var(--primary);
}

.lms-platform-meta {
  flex: 1;
}

.lms-platform-meta h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 0.15rem;
  line-height: 1.2;
}

.lms-platform-meta span {
  font-size: 0.75rem;
  color: var(--muted);
}

.lms-platform-item-body {
  padding: 0 2rem 2rem;
  background: white;
}

.lms-platform-item:nth-child(even) .lms-platform-item-body {
  /*background: var(--offwhite);*/
}

.lms-platform-item-body > p {
  font-size: 0.84rem;
  color: var(--mid);
  line-height: 1.78;
  margin-bottom: 1.5rem;
  padding-top: 0.25rem;
}

.lms-platform-capabilities {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1.4rem;
}

.lms-platform-cap-col h6 {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin-bottom: 0.8rem;
}

.lms-platform-cap-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.lms-platform-cap-col li {
  font-size: 0.79rem;
  color: var(--dark);
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  line-height: 1.5;
}

.lms-platform-cap-col li i {
  color: var(--primary);
  font-size: 0.62rem;
  margin-top: 0.3rem;
  flex-shrink: 0;
}


/* ======================================================
   SECTION 2: CUSTOM API INTEGRATION (ENHANCED MODERN)
   ====================================================== */

.lms-custom-enhanced {
  padding: 80px 0;
  background: linear-gradient(135deg, var(--offwhite) 0%, #ffffff 100%);
}

.lms-custom-enhanced-header {
  max-width: 800px;
  margin: 0 auto 3rem;
}

.lms-custom-enhanced-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.lms-custom-enhanced-sub {
  font-size: 0.86rem;
  color: var(--mid);
  line-height: 1.7;
}

.lms-custom-enhanced-grid {
  display: grid;
  grid-template-columns: 1fr 1.2fr;
  gap: 3rem;
  align-items: start;
}

/* Left side - capabilities showcase */
.lms-capabilities-showcase {
  background: white;
  border-radius: 28px;
  padding: 2rem;
  margin-top: 20%;
  border: 1px solid var(--border);
  box-shadow: 0 8px 24px rgba(0,0,0,0.04);
}

.lms-capabilities-showcase-inner h4 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 1rem;
  position: relative;
  display: inline-block;
}

.lms-capabilities-showcase-inner h4:after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 0;
  width: 40px;
  height: 3px;
  background: var(--primary);
  border-radius: 3px;
}

.lms-capabilities-showcase-inner p {
  font-size: 0.86rem;
  color: var(--mid);
  line-height: 1.7;
  margin: 1.2rem 0 1.5rem;
}

.lms-tech-stack {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.lms-tech-stack span {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-lt);
  border: 1px solid var(--border);
  padding: 0.3rem 1rem;
  border-radius: 40px;
  transition: all 0.2s ease;
}

.lms-tech-stack span:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* Right side - enhanced scenario cards */
.lms-enhanced-scenarios {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
}

.lms-enhanced-scenario-card {
  background: white;
  border-radius: 20px;
  padding: 1.5rem;
  border: 1px solid var(--border);
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.lms-enhanced-scenario-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 35px rgba(0,0,0,0.08);
  border-color: var(--primary-lt);
}

.lms-card-icon {
  width: 48px;
  height: 48px;
  background: var(--primary-lt);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1rem;
}

.lms-card-icon i {
  font-size: 1.2rem;
  color: var(--primary);
}

.lms-card-num {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--primary);
  background: var(--primary-lt);
  display: inline-block;
  padding: 0.2rem 0.7rem;
  border-radius: 30px;
  margin-bottom: 0.8rem;
}

.lms-enhanced-scenario-card h5 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.6rem;
  line-height: 1.3;
}

.lms-enhanced-scenario-card p {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.65;
  margin: 0;
}


/* ======================================================
   SECTION 3: INTEGRATION TYPES
   Full-width alternating row layout
   ====================================================== */

.lms-types {
  padding: 80px 0;
  background: white;
}

.lms-types-header {
  max-width: 680px;
  margin: 0 auto 3rem;
}

.lms-types-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.lms-types-sub {
  font-size: 0.82rem;
  color: var(--muted);
}

.lms-types-grid {
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.lms-type-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  border-bottom: 1px solid var(--border);
  background: white;
}

.lms-type-row:last-child {
  border-bottom: none;
}

.lms-type-row--alt {
  /*background: var(--offwhite);*/
}

.lms-type-label {
  padding: 2rem 1.8rem;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  justify-content: center;
}

.lms-type-icon {
  width: 44px;
  height: 44px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease;
}

.lms-type-row:hover .lms-type-icon {
  background: var(--primary);
}

.lms-type-icon i {
  font-size: 1rem;
  color: var(--primary);
  transition: color 0.25s ease;
}

.lms-type-row:hover .lms-type-icon i {
  color: white;
}

.lms-type-label h4 {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
  line-height: 1.3;
}

.lms-type-detail {
  padding: 2rem 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}

.lms-type-detail p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.78;
  margin: 0;
}

.lms-type-connects {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.lms-type-connects span {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-lt);
  border: 1px solid var(--border);
  padding: 0.22rem 0.75rem;
  border-radius: 30px;
}


/* ======================================================
   SECTION 4: HOW WE DELIVER
   4-column row — alternating dark / light columns
   ====================================================== */

.lms-delivery {
  padding: 80px 0;
  background: var(--offwhite);
}

.lms-delivery-header {
  max-width: 680px;
  margin: 0 auto 3rem;
}

.lms-delivery-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.lms-delivery-sub {
  font-size: 0.82rem;
  color: var(--muted);
}

.lms-delivery-cols {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.lms-delivery-col {
  padding: 2.2rem 1.8rem;
  background: white;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.lms-delivery-col:last-child {
  border-right: none;
}

.lms-delivery-col--dark {
  /*background: var(--primary-lt);*/
}

.lms-delivery-col-num {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--primary);
  opacity: 0.55;
  text-transform: uppercase;
}

.lms-delivery-col-icon {
  width: 44px;
  height: 44px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.lms-delivery-col-icon i {
  font-size: 1rem;
  color: var(--primary);
}

.lms-delivery-col h4 {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
  line-height: 1.3;
}

.lms-delivery-col p {
  font-size: 0.79rem;
  color: var(--mid);
  line-height: 1.72;
  margin: 0;
  flex: 1;
}

.lms-delivery-col-out {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.lms-delivery-col-out i {
  font-size: 0.62rem;
}


/* ======================================================
   RESPONSIVE
   ====================================================== */

@media (max-width: 1200px) {
  .lms-delivery-cols {
    grid-template-columns: repeat(2, 1fr);
  }

  .lms-delivery-col:nth-child(2) {
    border-right: none;
  }

  .lms-delivery-col:nth-child(3) {
    border-right: 1px solid var(--border);
    border-top: 1px solid var(--border);
  }

  .lms-delivery-col:nth-child(4) {
    border-top: 1px solid var(--border);
    border-right: none;
  }
}

@media (max-width: 1024px) {
  .lms-platforms-stats {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  
  .lms-stat-item {
    max-width: 100%;
    text-align: center;
  }
  
  .lms-custom-enhanced-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .lms-enhanced-scenarios {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .lms-platform-capabilities {
    grid-template-columns: 1fr;
  }

  .lms-types-grid .lms-type-row {
    grid-template-columns: 1fr;
  }

  .lms-type-label {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 1.4rem 1.6rem;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }

  .lms-type-detail {
    padding: 1.4rem 1.6rem;
  }
}

@media (max-width: 768px) {
  .lms-enhanced-scenarios {
    grid-template-columns: 1fr;
  }
  
  .lms-platform-item-head {
    flex-wrap: wrap;
    gap: 1rem;
  }

  .lms-delivery-cols {
    grid-template-columns: 1fr;
  }

  .lms-delivery-col {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .lms-delivery-col:last-child {
    border-bottom: none;
  }

  .lms-platforms-title,
  .lms-custom-enhanced-title,
  .lms-types-title,
  .lms-delivery-title {
    font-size: 1.65rem;
  }
}

@media (max-width: 480px) {
  .lms-platform-item-head {
    padding: 1.2rem 1.2rem;
  }

  .lms-platform-item-body {
    padding: 0 1.2rem 1.5rem;
  }
  
  .lms-capabilities-showcase {
    padding: 1.5rem;
  }

  .lms-delivery-col {
    padding: 1.6rem 1.4rem;
  }
}
/* =============================================
   AI-Powered Adaptive Learning — Styles
   Uses site root variables:
   --primary, --primary-dark, --primary-lt,
   --dark, --mid, --muted, --border, --offwhite
   ============================================= */

.ail-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1rem;
  display: block;
}

/* ======================================================
   SECTION 1: WHY ADAPTIVE LEARNING WORKS
   ====================================================== */

.ail-solution {
  padding: 80px 0 70px;
  background: white;
}

.ail-solution-inner {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 5rem;
  align-items: center;
}

.ail-solution-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 1.2rem;
}

.ail-solution-body {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* ENHANCED POSITIVE CONTENT STYLES */
.ail-benefits {
  margin: 1.5rem 0 1.2rem;
  background: linear-gradient(135deg, #f0f7ff 0%, #e8f0fe 100%);
  border-radius: 20px;
  padding: 1.3rem 1.5rem;
}

.ail-benefit-item {
  display: flex;
  gap: 0.9rem;
  margin-bottom: 1rem;
  font-size: 0.82rem;
  line-height: 1.55;
  color: var(--dark);
}

.ail-benefit-item:last-child {
  margin-bottom: 0;
}

.ail-benefit-item > i:first-child {
  color: var(--primary);
  font-size: 1.1rem;
  margin-top: 0.2rem;
  flex-shrink: 0;
}

.ail-benefit-item strong {
  font-weight: 700;
  color: var(--dark);
  display: block;
  margin-bottom: 0.2rem;
}

.ail-benefit-item span {
  color: var(--mid);
  font-size: 0.78rem;
}

.ail-outcome-box {
  background: linear-gradient(135deg, #e8f0fe 0%, #d4e2f5 100%);
  border-radius: 14px;
  padding: 1rem 1.3rem;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.2rem 0 1rem;
}

.ail-outcome-box i {
  font-size: 1.8rem;
  color: var(--primary);
  flex-shrink: 0;
}

.ail-outcome-box strong {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--dark);
  display: block;
  margin-bottom: 0.2rem;
}

.ail-outcome-box span {
  font-size: 0.78rem;
  color: var(--primary-dark);
  font-weight: 500;
  letter-spacing: -0.01em;
}

.ail-solution-body-last {
  margin-bottom: 0;
  font-weight: 500;
  color: var(--dark);
}

.ail-solution-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.ail-solution-card {
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.4rem;
  transition: all 0.3s ease;
}

.ail-solution-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -10px rgba(44, 82, 130, 0.1);
}

.ail-solution-icon {
  width: 42px;
  height: 42px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
  transition: background 0.3s ease;
}

.ail-solution-card:hover .ail-solution-icon {
  background: var(--primary);
}

.ail-solution-icon i {
  font-size: 1rem;
  color: var(--primary);
  transition: color 0.3s ease;
}

.ail-solution-card:hover .ail-solution-icon i {
  color: white;
}

.ail-solution-card h5 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.ail-solution-card p {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 0;
}

/* ======================================================
   SECTION 2: WHAT WE BUILD
   ====================================================== */

.ail-capabilities {
  padding: 80px 0;
  background: var(--offwhite);
}

.ail-cap-header {
  max-width: 700px;
  margin: 0 auto 3rem;
}

.ail-cap-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.ail-cap-sub {
  font-size: 0.82rem;
  color: var(--muted);
}

.ail-cap-grid {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.ail-cap-block {
  background: white;
}

.ail-cap-block--wide {
  grid-column: span 3;
  background: var(--primary-lt);
}

.ail-cap-block-inner {
  display: flex;
  gap: 1.8rem;
  padding: 2.2rem 2.4rem;
  align-items: flex-start;
}

.ail-cap-block--wide .ail-cap-block-inner {
  align-items: center;
}

.ail-cap-icon {
  width: 52px;
  height: 52px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ail-cap-icon i {
  font-size: 1.2rem;
  color: var(--primary);
}

.ail-cap-content h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.6rem;
  line-height: 1.3;
}

.ail-cap-block--wide .ail-cap-content h3 {
  font-size: 1.2rem;
}

.ail-cap-content p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.75;
  margin-bottom: 1rem;
}

.ail-cap-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.ail-cap-list li {
  font-size: 0.78rem;
  color: var(--dark);
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
  line-height: 1.5;
}

.ail-cap-list li i {
  color: var(--primary);
  font-size: 0.65rem;
  margin-top: 0.28rem;
  flex-shrink: 0;
}

.ail-cap-block:not(.ail-cap-block--wide) .ail-cap-block-inner {
  flex-direction: column;
  gap: 1rem;
  height: 100%;
}

.ail-cap-block:not(.ail-cap-block--wide):hover {
  background: var(--primary-lt);
}

/* ======================================================
   SECTION 3: WHO WE BUILD FOR
   ====================================================== */

.ail-for {
  padding: 80px 0;
  background: white;
}

.ail-for-header {
  max-width: 700px;
  margin: 0 auto 2.5rem;
}

.ail-for-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.ail-for-sub {
  font-size: 0.82rem;
  color: var(--muted);
}

.ail-for-tabs {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 2rem;
  border-bottom: 1px solid var(--border);
  padding-bottom: 0.5rem;
}

.ail-for-tab {
  background: none;
  border: none;
  padding: 0.55rem 1.1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mid);
  cursor: pointer;
  border-radius: 30px;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 0.45rem;
  transition: all 0.3s ease;
}

.ail-for-tab i {
  font-size: 0.75rem;
}

.ail-for-tab:hover {
  color: var(--primary);
  background: var(--offwhite);
}

.ail-for-tab.active {
  color: var(--primary);
  background: var(--offwhite);
  position: relative;
}

.ail-for-tab.active::after {
  content: '';
  position: absolute;
  bottom: -0.55rem;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 3px;
  background: var(--primary);
  border-radius: 3px;
}

.ail-for-panels {
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
}

.ail-for-panel {
  display: none;
}

.ail-for-panel.active {
  display: grid;
  grid-template-columns: 280px 1fr;
}

.ail-for-panel-left {
  background: var(--primary);
  padding: 2.5rem 2rem;
  display: flex;
  align-items: center;
}

.ail-for-panel-visual {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  width: 100%;
}

.ail-for-panel-icon {
  width: 56px;
  height: 56px;
  background: rgba(255, 255, 255, 0.15);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.ail-for-panel-icon i {
  font-size: 1.4rem;
  color: white;
}

.ail-for-panel-stat-group {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.ail-for-stat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.ail-for-stat-val {
  font-size: 2rem;
  font-weight: 900;
  color: white;
  line-height: 1;
}

.ail-for-stat-label {
  font-size: 0.72rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.5;
}

.ail-for-panel-right {
  padding: 2.5rem;
  background: white;
}

.ail-for-panel-right h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.8rem;
  line-height: 1.3;
}

.ail-for-panel-right p {
  font-size: 0.84rem;
  color: var(--mid);
  line-height: 1.78;
  margin-bottom: 1.8rem;
}

.ail-for-panel-features {
  display: flex;
  flex-direction: column;
  gap: 1.3rem;
}

.ail-for-pf {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.ail-for-pf > i {
  width: 36px;
  height: 36px;
  background: var(--primary-lt);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.82rem;
  color: var(--primary);
  flex-shrink: 0;
}

.ail-for-pf strong {
  display: block;
  font-size: 0.84rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.2rem;
}

.ail-for-pf span {
  font-size: 0.78rem;
  color: var(--muted);
  line-height: 1.55;
}

/* ======================================================
   SECTION 4: HOW IT WORKS - FIXED CENTERED VERSION
   All 5 step numbers now properly centered
   ====================================================== */

.ail-how {
  padding: 80px 0;
  background: var(--offwhite);
}

.ail-how-header {
  max-width: 680px;
  margin: 0 auto 4rem;
}

.ail-how-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.ail-how-sub {
  font-size: 0.82rem;
  color: var(--muted);
}

/* Fixed track layout - all steps equal width */
.ail-how-track {
  display: flex;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.ail-how-step {
  flex: 1;
  min-width: 180px;
  max-width: 220px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* Step number circle - perfectly centered */
.ail-how-step-top {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 1.5rem;
  position: relative;
  width: 100%;
}

.ail-how-step-num {
  width: 48px;
  height: 48px;
  background: var(--primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 800;
  color: white;
  z-index: 2;
  position: relative;
}

/* Connector line between circles */
.ail-how-step-connector {
  position: absolute;
  top: 50%;
  left: calc(50% + 28px);
  width: calc(100% - 56px);
  height: 2px;
  background: var(--border);
  z-index: 1;
}

/* Hide connector for last step */
.ail-how-step:last-child .ail-how-step-connector {
  display: none;
}

/* Adjust connector for each step based on position */
.ail-how-step:nth-child(1) .ail-how-step-connector {
  width: calc(100% - 28px);
  left: calc(50% + 24px);
}

.ail-how-step:nth-child(2) .ail-how-step-connector,
.ail-how-step:nth-child(3) .ail-how-step-connector,
.ail-how-step:nth-child(4) .ail-how-step-connector {
  width: calc(100% - 24px);
  left: calc(50% + 24px);
}

/* Step body styling */
.ail-how-step-body {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.5rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  transition: all 0.3s ease;
}

.ail-how-step-body:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 14px 28px -10px rgba(44, 82, 130, 0.1);
}

.ail-how-step-icon {
  width: 44px;
  height: 44px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.5rem;
  transition: background 0.25s ease;
}

.ail-how-step-body:hover .ail-how-step-icon {
  background: var(--primary);
}

.ail-how-step-icon i {
  font-size: 1rem;
  color: var(--primary);
  transition: color 0.25s ease;
}

.ail-how-step-body:hover .ail-how-step-icon i {
  color: white;
}

.ail-how-step-body h4 {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
  line-height: 1.3;
}

.ail-how-step-body p {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.65;
  margin: 0;
}

.ail-how-step-meta {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
  margin-top: 0.3rem;
}

.ail-how-step-meta span {
  font-size: 0.68rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}

.ail-how-step-meta span:first-child {
  color: var(--muted);
}

.ail-how-step-meta span:last-child {
  color: var(--primary);
}

.ail-how-step-meta i {
  font-size: 0.6rem;
}

/* Last step specific - no connector */
.ail-how-step--last .ail-how-step-connector {
  display: none;
}

/* ======================================================
   SECTION 5: TECHNOLOGY & INTEGRATION
   ====================================================== */

.ail-tech {
  padding: 80px 0;
  background: white;
}

.ail-tech-header {
  max-width: 700px;
  margin: 0 auto 3rem;
}

.ail-tech-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.ail-tech-sub {
  font-size: 0.82rem;
  color: var(--muted);
}

.ail-tech-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
  padding: 0;
}

.ail-tech-left {
  padding: 2.5rem;
  border-right: 1px solid var(--border);
  background: white;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.ail-tech-right {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}

.ail-tech-group {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.ail-tech-group-title {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--dark);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--primary);
  margin: 0;
}

.ail-tech-group-title i {
  color: var(--primary);
  font-size: 0.8rem;
}

.ail-tech-items {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.ail-tech-item {
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.ail-tech-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ail-tech-item:first-child {
  padding-top: 0;
}

.ail-tech-item strong {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--dark);
}

.ail-tech-item span {
  font-size: 0.76rem;
  color: var(--muted);
  line-height: 1.55;
}

/* ======================================================
   RESPONSIVE STYLES
   ====================================================== */

/* Tablet responsive */
@media (max-width: 1024px) {
  .ail-solution-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .ail-cap-grid {
    grid-template-columns: 1fr 1fr;
  }

  .ail-cap-block--wide {
    grid-column: span 2;
  }

  .ail-cap-block--wide .ail-cap-block-inner {
    align-items: flex-start;
  }

  .ail-for-panel.active {
    grid-template-columns: 240px 1fr;
  }

  .ail-tech-body {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .ail-tech-left {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  /* How It Works tablet adjustments */
  .ail-how-track {
    gap: 1rem;
  }
  
  .ail-how-step {
    min-width: 160px;
  }
}

/* Small tablet / large mobile */
@media (max-width: 900px) {
  .ail-for-panel.active {
    grid-template-columns: 1fr;
  }

  .ail-for-panel-left {
    padding: 2rem;
  }

  .ail-for-panel-visual {
    flex-direction: row;
    align-items: center;
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  .ail-for-panel-stat-group {
    flex-direction: row;
    gap: 2rem;
  }
}

/* Mobile responsive */
@media (max-width: 768px) {
  .ail-solution-grid {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
  
  .ail-solution-title {
    font-size: 1.6rem;
  }
  
  .ail-outcome-box {
    flex-direction: column;
    text-align: center;
    padding: 1rem;
  }
  
  .ail-outcome-box i {
    font-size: 1.5rem;
  }

  .ail-cap-grid {
    grid-template-columns: 1fr;
  }

  .ail-cap-block--wide {
    grid-column: span 1;
  }

  .ail-cap-block--wide .ail-cap-block-inner {
    flex-direction: column;
  }

  .ail-for-tabs {
    justify-content: flex-start;
    overflow-x: auto;
    padding-bottom: 0.8rem;
    flex-wrap: nowrap;
  }

  .ail-for-tab {
    flex-shrink: 0;
  }

  .ail-tech-left,
  .ail-tech-right {
    padding: 1.8rem;
  }

  .ail-problem-title,
  .ail-cap-title,
  .ail-for-title,
  .ail-how-title,
  .ail-tech-title {
    font-size: 1.65rem;
  }

  /* How It Works mobile - stack vertically */
  .ail-how-track {
    flex-direction: column;
    align-items: center;
    gap: 1.5rem;
  }
  
  .ail-how-step {
    max-width: 100%;
    width: 100%;
  }
  
  .ail-how-step-connector {
    display: none !important;
  }
  
  .ail-how-step-top {
    margin-bottom: 1rem;
  }
}

/* Small mobile */
@media (max-width: 480px) {
  .ail-cap-block-inner {
    padding: 1.6rem 1.4rem;
  }

  .ail-for-panel-right {
    padding: 1.6rem;
  }
  
  .ail-benefits {
    padding: 1rem;
  }
  
  .ail-benefit-item {
    gap: 0.7rem;
  }
}
/* =============================================
   Data Migration & Analytics — Page Styles
   Uses site root variables only
   No animations, clean modern design
   ============================================= */

.dm-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  display: inline-block;
  margin-bottom: 1rem;
}

.dm-highlight {
  color: var(--primary);
}


/* ======================================================
   SECTION 1: WHY MATTERS - NO CARDS DESIGN
   Alternating rows, visual elements, no card containers
   ====================================================== */

.dm-why-matters {
  padding: 60px 0;
  background: white;
}

.dm-section-intro {
  max-width: 800px;
  margin: 0 auto 4rem;
  text-align: center;
  position: relative;
}

.dm-accent-line {
  width: 60px;
  height: 3px;
  background: var(--primary);
  margin: 0 auto 1.5rem;
}

.dm-main-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 1.2rem;
}

.dm-intro-text {
  font-size: 1rem;
  color: var(--mid);
  line-height: 1.6;
  max-width: 650px;
  margin: 0 auto;
}

/* Feature Showcase - Alternating Rows */
.dm-feature-showcase {
  margin: 4rem 0;
}

.dm-feature-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4rem;
  padding: 3rem 0;
  border-bottom: 1px solid var(--border);
}

.dm-feature-row:first-child {
  padding-top: 0;
}

.dm-feature-row:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.dm-feature-row-reverse {
  flex-direction: row-reverse;
}

.dm-feature-content {
  flex: 1;
}

.dm-feature-badge {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--primary);
  background: var(--primary-lt);
  display: inline-block;
  padding: 0.2rem 0.8rem;
  border-radius: 30px;
  margin-bottom: 1rem;
}

.dm-feature-content h3 {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 1rem;
  line-height: 1.2;
}

.dm-feature-desc {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: 1.5rem;
}

.dm-feature-stats {
  display: flex;
  gap: 2rem;
  margin-top: 1rem;
}

.dm-stat-inline {
  display: flex;
  flex-direction: column;
}

.dm-stat-inline strong {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 0.2rem;
}

.dm-stat-inline span {
  font-size: 0.7rem;
  color: var(--muted);
  letter-spacing: 0.02em;
}

/* Visual Elements */
.dm-feature-visual {
  flex: 0.8;
  padding: 1.5rem;
  background: var(--offwhite);
  border-radius: 24px;
}

.dm-visual-icon {
  width: 64px;
  height: 64px;
  background: var(--primary-lt);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.5rem;
}

.dm-visual-icon i {
  font-size: 1.8rem;
  color: var(--primary);
}

.dm-platform-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.dm-platform-list span {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--dark);
  background: white;
  border: 1px solid var(--border);
  padding: 0.3rem 0.9rem;
  border-radius: 30px;
}

.dm-compliance-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.dm-compliance-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-size: 0.85rem;
  color: var(--dark);
}

.dm-compliance-item i {
  color: var(--primary);
  font-size: 0.9rem;
  width: 20px;
}

.dm-merge-visual {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.dm-merge-before {
  display: flex;
  gap: 0.8rem;
}

.dm-merge-before span {
  background: var(--primary-lt);
  color: var(--primary);
  padding: 0.4rem 1rem;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 600;
}

.dm-merge-arrow {
  color: var(--primary);
  font-size: 1.2rem;
}

.dm-merge-after span {
  background: var(--primary);
  color: white;
  padding: 0.4rem 1rem;
  border-radius: 30px;
  font-size: 0.75rem;
  font-weight: 600;
}

/* Impact Section - No Cards */
.dm-impact-section {
  margin: 4rem 0;
  background: var(--offwhite);
  padding: 3rem;
  border-radius: 32px;
}

.dm-impact-divider {
  text-align: center;
  margin-bottom: 2.5rem;
  position: relative;
}

.dm-impact-divider span {
  background: var(--offwhite);
  padding: 0 1rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  position: relative;
  z-index: 1;
}

.dm-impact-divider::before {
  content: '';
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--border);
  z-index: 0;
}

.dm-impact-numbers {
  display: flex;
  justify-content: space-between;
  gap: 2rem;
  text-align: center;
}

.dm-impact-item {
  flex: 1;
}

.dm-impact-number {
  font-size: 2.5rem;
  font-weight: 800;
  color: var(--primary);
  margin-bottom: 0.5rem;
  line-height: 1;
}

.dm-impact-number em {
  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
}

.dm-impact-label {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.4;
}

/* Section CTA Line */
.dm-section-cta {
  margin-top: 4rem;
  text-align: center;
}

.dm-cta-line {
  width: 80px;
  height: 2px;
  background: var(--border);
  margin: 1.5rem auto;
}

.dm-section-cta p {
  font-size: 1rem;
  color: var(--dark);
  font-weight: 500;
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.6;
}


/* ======================================================
   SECTION 2: WHAT WE MIGRATE
   ====================================================== */

.dm-what-we-migrate {
  padding: 60px 0;
  background: white;
}

.dm-what-we-migrate-header {
  max-width: 780px;
  margin: 0 auto 3.5rem;
  text-align: center;
}

.dm-what-we-migrate-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 1rem;
}

.dm-what-we-migrate-title em {
  font-style: italic;
  color: var(--primary);
}

.dm-what-we-migrate-sub {
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

.dm-migrate-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
}

.dm-migrate-card {
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 1.8rem;
  transition: all 0.2s ease;
  background: white;
}

.dm-migrate-card:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.dm-migrate-icon {
  width: 52px;
  height: 52px;
  background: var(--primary-lt);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
}

.dm-migrate-icon i {
  font-size: 1.2rem;
  color: var(--primary);
}

.dm-migrate-card h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 0.6rem 0;
  line-height: 1.3;
}

.dm-migrate-card p {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.65;
  margin: 0 0 1rem 0;
}

.dm-migrate-meta {
  padding-top: 0.75rem;
  border-top: 1px solid var(--border);
}

.dm-migrate-meta span {
  font-size: 0.6rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-lt);
  padding: 0.25rem 0.8rem;
  border-radius: 30px;
  display: inline-block;
}


/* ======================================================
   SECTION 3: ANALYTICS REPORTING
   ====================================================== */

.dm-pipeline {
  padding: 80px 0;
  background: var(--offwhite);
}

.dm-pipeline-header {
  max-width: 640px;
  margin: 0 auto 3rem;
}

.dm-pipeline-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.6rem;
}

.dm-pipeline-sub {
  font-size: 0.85rem;
  color: var(--muted);
}

.dm-pipeline-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.8rem;
}

.dm-pipeline-item {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.8rem;
  transition: all 0.2s ease;
}

.dm-pipeline-item:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.dm-pipeline-item-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.dm-pipeline-item-icon {
  width: 44px;
  height: 44px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dm-pipeline-item-icon i {
  font-size: 1rem;
  color: var(--primary);
}

.dm-pipeline-item-tag {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-lt);
  padding: 0.25rem 0.9rem;
  border-radius: 30px;
}

.dm-pipeline-item h5 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 0.6rem 0;
  line-height: 1.3;
}

.dm-pipeline-item p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.65;
  margin: 0;
}


/* ======================================================
   SECTION 4: PLATFORMS & TOOLS
   ====================================================== */

.dm-tools {
  padding: 80px 0;
  background: white;
}

.dm-tools-header {
  max-width: 640px;
  margin: 0 auto 3rem;
}

.dm-tools-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.dm-tools-sub {
  font-size: 0.85rem;
  color: var(--muted);
}

.dm-tools-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
}

.dm-tool-category {
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  background: white;
}

.dm-tool-category-head {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.2rem 1.5rem;
  background: var(--offwhite);
  border-bottom: 1px solid var(--border);
}

.dm-tool-category-icon {
  width: 42px;
  height: 42px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dm-tool-category-icon i {
  font-size: 1rem;
  color: var(--primary);
}

.dm-tool-category-head h5 {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
}

.dm-tool-category-chips {
  padding: 1.2rem 1.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}

.dm-tool-category-chips span {
  font-size: 0.7rem;
  font-weight: 500;
  color: var(--dark);
  background: var(--offwhite);
  border: 1px solid var(--border);
  padding: 0.3rem 0.9rem;
  border-radius: 30px;
  transition: all 0.2s ease;
}

.dm-tool-category-chips span:hover {
  background: var(--primary-lt);
  color: var(--primary);
  border-color: var(--primary-lt);
}


/* ======================================================
   SECTION 5: HOW WE DELIVER
   ====================================================== */

.dm-delivery {
  padding: 80px 0;
  background: var(--offwhite);
}

.dm-delivery-header {
  margin-bottom: 3rem;
}

.dm-delivery-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin: 0;
}

.dm-delivery-list {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.dm-delivery-item {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.8rem;
  transition: all 0.2s ease;
}

.dm-delivery-item:hover {
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.05);
}

.dm-delivery-item-num {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--primary);
  background: var(--primary-lt);
  padding: 0.2rem 0.9rem;
  border-radius: 30px;
  margin-bottom: 1.2rem;
}

.dm-delivery-item-content {
  display: flex;
  gap: 1.2rem;
}

.dm-delivery-item-icon {
  width: 48px;
  height: 48px;
  background: var(--primary-lt);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dm-delivery-item-icon i {
  font-size: 1.1rem;
  color: var(--primary);
}

.dm-delivery-item-text {
  flex: 1;
}

.dm-delivery-item-text h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 0.5rem 0;
  line-height: 1.3;
}

.dm-delivery-item-text p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.65;
  margin: 0 0 1rem 0;
}

.dm-delivery-item-out {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-lt);
  padding: 0.3rem 1rem;
  border-radius: 30px;
}

.dm-delivery-item-out i {
  font-size: 0.65rem;
}


/* ======================================================
   RESPONSIVE
   ====================================================== */

@media (max-width: 1100px) {
  .dm-migrate-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .dm-impact-numbers {
    flex-direction: column;
    gap: 1.5rem;
  }
}

@media (max-width: 900px) {
  .dm-feature-row,
  .dm-feature-row-reverse {
    flex-direction: column;
    gap: 2rem;
  }
  
  .dm-pipeline-grid {
    grid-template-columns: 1fr;
  }
  
  .dm-tools-grid {
    grid-template-columns: 1fr;
  }
  
  .dm-main-title {
    font-size: 1.8rem;
  }
}

@media (max-width: 768px) {
  .dm-migrate-grid {
    grid-template-columns: 1fr;
  }
  
  .dm-main-title,
  .dm-what-we-migrate-title,
  .dm-pipeline-title,
  .dm-tools-title,
  .dm-delivery-title {
    font-size: 1.6rem;
  }
  
  .dm-feature-content h3 {
    font-size: 1.3rem;
  }
  
  .dm-delivery-item-content {
    flex-direction: column;
  }
  
  .dm-delivery-item-icon {
    margin-bottom: 0.5rem;
  }
  
  .dm-feature-stats {
    flex-direction: column;
    gap: 1rem;
  }
  
  .dm-impact-section {
    padding: 2rem;
  }
}

@media (max-width: 480px) {
  .dm-migrate-card,
  .dm-pipeline-item,
  .dm-delivery-item {
    padding: 1.2rem;
  }
  
  .dm-tool-category-head,
  .dm-tool-category-chips {
    padding: 1rem;
  }
  
  .dm-feature-visual {
    padding: 1rem;
  }
  
  .dm-merge-before {
    flex-direction: column;
    align-items: center;
  }
}
/* =============================================
   SSO Setup Page Styles
   Uses site root variables:
   --primary, --primary-dark, --primary-lt,
   --dark, --mid, --muted, --border, --offwhite
   ============================================= */

.sso-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1rem;
  display: block;
}


/* ======================================================
   SECTION 1: WHY SSO MATTERS
   Two-column split — text left, compare block right
   ====================================================== */

.sso-why {
  padding: 80px 0;
  background: white;
}

.sso-why-inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 5rem;
  align-items: center;
}

.sso-why-left h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.25;
  margin: 0.75rem 0 1.2rem;
}

.sso-why-left h2 em {
  font-style: normal;
  color: var(--primary);
}

.sso-why-left p {
  font-size: 0.84rem;
  color: var(--mid);
  line-height: 1.78;
  margin-bottom: 1rem;
}

.sso-why-left p:last-child {
  margin-bottom: 0;
}

.sso-compare-block {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.sso-compare-row {
  display: flex;
  align-items: flex-start;
  gap: 1.2rem;
  padding: 1.6rem 1.8rem;
  border-radius: 16px;
}

.sso-compare-row--bad {
  background: #fff5f5;
  border: 1px solid #fecaca;
}

.sso-compare-row--good {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
}

.sso-compare-icon {
  font-size: 1.4rem;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.sso-compare-row--bad .sso-compare-icon {
  color: #ef4444;
}

.sso-compare-row--good .sso-compare-icon {
  color: #16a34a;
}

.sso-compare-text strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.3rem;
}

.sso-compare-text span {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.6;
}

.sso-compare-arrow {
  text-align: center;
  padding: 0.8rem 0;
  font-size: 0.9rem;
  color: var(--muted);
}


/* ======================================================
   SECTION 2: PROTOCOLS
   Three cards in a row — middle one featured/dark
   ====================================================== */

.sso-protocols {
  padding: 80px 0;
  background: var(--offwhite);
}

.sso-protocols-head {
  max-width: 700px;
  margin: 0 auto 3rem;
}

.sso-protocols-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.25;
  margin-bottom: 0;
}

.sso-protocol-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.sso-protocol-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sso-protocol-card--featured {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.sso-protocol-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.sso-protocol-tag {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-lt);
  border: 1px solid var(--border);
  padding: 0.2rem 0.7rem;
  border-radius: 30px;
}

.sso-protocol-tag--light {
  color: var(--primary);
  background: rgba(255,255,255,0.25);
  border-color: rgba(255,255,255,0.4);
}

.sso-protocol-tag--muted {
  color: var(--muted);
  background: var(--offwhite);
  border-color: var(--border);
}

.sso-protocol-icon {
  width: 40px;
  height: 40px;
  background: var(--primary-lt);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sso-protocol-icon i {
  font-size: 0.95rem;
  color: var(--primary);
}

.sso-protocol-icon--light {
  background: rgba(255,255,255,0.2);
}

.sso-protocol-icon--light i {
  color: white;
}

.sso-protocol-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
}

.sso-protocol-card--featured h3 {
  color: white;
}

.sso-protocol-full-name {
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0;
}

.sso-protocol-card--featured .sso-protocol-full-name {
  color: rgba(255,255,255,0.7);
}

.sso-protocol-card > p {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.7;
  margin: 0;
}

.sso-protocol-card--featured > p {
  color: rgba(255,255,255,0.85);
}

.sso-protocol-card ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  flex: 1;
}

.sso-protocol-card li {
  font-size: 0.78rem;
  color: var(--dark);
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  line-height: 1.5;
}

.sso-protocol-card--featured li {
  color: rgba(255,255,255,0.9);
}

.sso-protocol-card li i {
  color: var(--primary);
  font-size: 0.6rem;
  margin-top: 0.35rem;
  flex-shrink: 0;
}

.sso-protocol-card--featured li i {
  color: rgba(255,255,255,0.8);
}

.sso-protocol-footer {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.sso-protocol-footer--light {
  border-top-color: rgba(255,255,255,0.25);
}

.sso-protocol-footer span {
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-lt);
  border: 1px solid var(--border);
  padding: 0.2rem 0.65rem;
  border-radius: 30px;
}

.sso-protocol-footer--light span {
  color: white;
  background: rgba(255,255,255,0.2);
  border-color: rgba(255,255,255,0.35);
}


/* ======================================================
   SECTION 3: SCOPE OF WORK
   Header split two columns, then numbered row list
   ====================================================== */

.sso-scope {
  padding: 80px 0;
  background: white;
}

.sso-scope-head {
  /*display: grid;*/
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: end;
  margin-bottom: 3rem;
}

.sso-scope-head-left h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.25;
  margin: 0.75rem 0 0;
}

.sso-scope-head-right p {
  font-size: 0.84rem;
  color: var(--mid);
  line-height: 1.78;
  margin: 0;
}

.sso-scope-rows {
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.sso-scope-item {
  display: grid;
  grid-template-columns: 60px 1fr auto;
  gap: 2rem;
  align-items: center;
  padding: 2rem 2.2rem;
  background: white;
  border-bottom: 1px solid var(--border);
  transition: background 0.2s ease;
}

.sso-scope-item:last-child {
  border-bottom: none;
}

.sso-scope-item--shaded {
  /*background: var(--offwhite);*/
}

.sso-scope-item:hover {
  background: var(--primary-lt);
}

.sso-scope-step {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--primary);
  opacity: 0.3;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}

.sso-scope-body h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.sso-scope-body p {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.72;
  margin: 0;
}

.sso-scope-tags {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  flex-shrink: 0;
  min-width: 180px;
}

.sso-scope-tags span {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-lt);
  border: 1px solid var(--border);
  padding: 0.22rem 0.75rem;
  border-radius: 30px;
  text-align: center;
  white-space: nowrap;
}


/* ======================================================
   SECTION 4: AUDIENCE
   2x2 card grid — one featured card
   ====================================================== */

.sso-audience {
  padding: 80px 0;
  background: var(--offwhite);
}

.sso-audience-head {
  max-width: 640px;
  margin: 0 auto 3rem;
}

.sso-audience-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.25;
  margin-bottom: 0;
}

.sso-audience-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.4rem;
}

.sso-audience-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.sso-audience-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 16px 30px rgba(0,0,0,0.07);
}

.sso-audience-card--featured {
  background: var(--dark);
  border-color: var(--dark);
}

.sso-audience-icon-wrap {
  width: 48px;
  height: 48px;
  background: var(--primary-lt);
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sso-audience-icon-wrap i {
  font-size: 1.1rem;
  color: var(--primary);
}

.sso-audience-card--featured .sso-audience-icon-wrap {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.2);
}

.sso-audience-card--featured .sso-audience-icon-wrap i {
  color: white;
}

.sso-audience-card h4 {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
  line-height: 1.3;
}

.sso-audience-card--featured h4 {
  color: white;
}

.sso-audience-card p {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.72;
  margin: 0;
  flex: 1;
}

.sso-audience-card--featured p {
  color: rgba(255,255,255,0.7);
}

.sso-audience-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.sso-audience-card--featured .sso-audience-tags {
  border-top-color: rgba(255,255,255,0.15);
}

.sso-audience-tags span {
  font-size: 0.64rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-lt);
  border: 1px solid var(--border);
  padding: 0.2rem 0.7rem;
  border-radius: 30px;
}

.sso-audience-card--featured .sso-audience-tags span {
  color: white;
  background: rgba(255,255,255,0.12);
  border-color: rgba(255,255,255,0.25);
}


/* ======================================================
   RESPONSIVE
   ====================================================== */

@media (max-width: 1024px) {
  .sso-protocol-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
  }

  .sso-scope-head {
    grid-template-columns: 1fr;
    gap: 1rem;
  }
}

@media (max-width: 900px) {
  .sso-why-inner {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .sso-scope-item {
    grid-template-columns: 50px 1fr;
    gap: 1.2rem;
  }

  .sso-scope-tags {
    grid-column: 2;
    flex-direction: row;
    flex-wrap: wrap;
    min-width: unset;
  }
}

@media (max-width: 768px) {
  .sso-audience-grid {
    grid-template-columns: 1fr;
  }

  .sso-scope-item {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .sso-scope-step {
    font-size: 1rem;
  }

  .sso-scope-tags {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .sso-why-left h2,
  .sso-protocols-head h2,
  .sso-scope-head-left h2,
  .sso-audience-head h2 {
    font-size: 1.6rem;
  }
}

@media (max-width: 480px) {
  .sso-protocol-card {
    padding: 1.5rem;
  }

  .sso-scope-item {
    padding: 1.5rem 1.2rem;
  }

  .sso-audience-card {
    padding: 1.5rem;
  }

  .sso-compare-row {
    padding: 1.2rem 1.4rem;
  }
}
/* =============================================
   Custom Course Creation — Styles
   Uses site root variables:
   --primary, --primary-dark, --primary-lt,
   --dark, --mid, --muted, --border, --offwhite
   ============================================= */

.ccc-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1rem;
  display: block;
}


/* ======================================================
   SECTION 1: WHAT WE BUILD
   ====================================================== */

.ccc-what {
  padding: 80px 0 70px;
  background: white;
}

.ccc-what-top {
  margin-bottom: 3.5rem;
  padding-bottom: 2rem;
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
}

.ccc-what-intro h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.25;
  margin: 0.75rem 0 0;
}

.ccc-what-intro h2 em {
  font-style: normal;
  color: var(--primary);
}

.ccc-course-types {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.8rem;
}

.ccc-course-type-card {
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 2rem;
  background: white;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: all 0.3s ease;
  position: relative;
  overflow: hidden;
}

.ccc-course-type-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 4px;
  background: var(--primary);
  transform: scaleX(0);
  transition: transform 0.3s ease;
}

.ccc-course-type-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 20px 35px -12px rgba(0,0,0,0.1);
  border-color: var(--primary-lt);
}

.ccc-course-type-card:hover::before {
  transform: scaleX(1);
}

.ccc-ct-icon {
  width: 52px;
  height: 52px;
  background: var(--primary-lt);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.ccc-course-type-card:hover .ccc-ct-icon {
  background: var(--primary);
}

.ccc-ct-icon i {
  font-size: 1.2rem;
  color: var(--primary);
  transition: color 0.3s ease;
}

.ccc-course-type-card:hover .ccc-ct-icon i {
  color: white;
}

.ccc-course-type-card h4 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
  line-height: 1.3;
}

.ccc-course-type-card p {
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

.ccc-ct-formats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.ccc-ct-formats span {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-lt);
  padding: 0.25rem 0.8rem;
  border-radius: 30px;
  transition: all 0.2s ease;
}

.ccc-course-type-card:hover .ccc-ct-formats span {
  background: white;
}


/* ======================================================
   SECTION 2: WHO WE BUILD FOR
   ====================================================== */

.ccc-audience {
  padding: 80px 0;
  background: var(--offwhite);
}

.ccc-audience-head {
  max-width: 640px;
  margin: 0 auto 3rem;
}

.ccc-audience-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.25;
  margin-bottom: 0;
}

.ccc-audience-rows {
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
}

.ccc-audience-row {
  display: grid;
  grid-template-columns: 260px 1fr;
  border-bottom: 1px solid var(--border);
  background: white;
  transition: background 0.2s ease;
}

.ccc-audience-row:last-child {
  border-bottom: none;
}

.ccc-audience-row:hover {
  background: var(--primary-lt);
}

.ccc-audience-label {
  padding: 2rem 1.8rem;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  justify-content: flex-start;
}

.ccc-audience-icon {
  width: 48px;
  height: 48px;
  background: var(--primary-lt);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.25s ease;
}

.ccc-audience-row:hover .ccc-audience-icon {
  background: var(--primary);
}

.ccc-audience-icon i {
  font-size: 1.1rem;
  color: var(--primary);
  transition: color 0.25s ease;
}

.ccc-audience-row:hover .ccc-audience-icon i {
  color: white;
}

.ccc-audience-label h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
  line-height: 1.3;
}

.ccc-audience-detail {
  padding: 2rem 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  justify-content: center;
}

.ccc-audience-detail p {
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.7;
  margin: 0;
}

.ccc-audience-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ccc-audience-tags span {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-lt);
  padding: 0.25rem 0.8rem;
  border-radius: 30px;
}


/* ======================================================
   SECTION 3: SUBJECT AREAS
   ====================================================== */

.ccc-subjects {
  padding: 80px 0;
  background: white;
}

.ccc-subjects-head {
  max-width: 800px;
  margin: 0 auto 3rem;
}

.ccc-subjects-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.25;
  margin: 0.75rem 0 0;
}

.ccc-subjects-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
}

.ccc-subject-block {
  padding: 2rem;
  border-right: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: white;
  transition: all 0.25s ease;
}

.ccc-subject-block:hover {
  background: var(--primary-lt);
  transform: translateY(-2px);
}

.ccc-subject-block:nth-child(3n) {
  border-right: none;
}

.ccc-subject-block:nth-child(4),
.ccc-subject-block:nth-child(5),
.ccc-subject-block:nth-child(6) {
  border-bottom: none;
}

.ccc-subject-icon {
  width: 44px;
  height: 44px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.2rem;
  transition: all 0.25s ease;
}

.ccc-subject-block:hover .ccc-subject-icon {
  background: var(--primary);
}

.ccc-subject-icon i {
  font-size: 1rem;
  color: var(--primary);
  transition: color 0.25s ease;
}

.ccc-subject-block:hover .ccc-subject-icon i {
  color: white;
}

.ccc-subject-block h5 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 1rem;
  line-height: 1.3;
}

.ccc-subject-block ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.ccc-subject-block ul li {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.5;
  padding-left: 1rem;
  position: relative;
}

.ccc-subject-block ul li::before {
  content: '▹';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-size: 0.7rem;
}


/* ======================================================
   SECTION 4: WHAT'S INCLUDED (REDESIGNED - HORIZONTAL LIST)
   ====================================================== */

.ccc-included-new {
  padding: 80px 0;
  background: var(--offwhite);
}

.ccc-included-head {
  max-width: 680px;
  margin: 0 auto 3rem;
}

.ccc-included-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.25;
  margin-bottom: 0;
}

.ccc-features-list {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.ccc-feature-item {
  display: flex;
  align-items: flex-start;
  gap: 1.8rem;
  background: white;
  border-radius: 20px;
  padding: 1.6rem 2rem;
  transition: all 0.3s ease;
  border: 1px solid var(--border);
}

.ccc-feature-item:hover {
  transform: translateX(10px);
  border-color: var(--primary);
  box-shadow: 0 12px 24px -12px rgba(0, 0, 0, 0.1);
}

.ccc-feature-icon {
  width: 60px;
  height: 60px;
  background: var(--primary-lt);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.3s ease;
}

.ccc-feature-item:hover .ccc-feature-icon {
  background: var(--primary);
}

.ccc-feature-icon i {
  font-size: 1.5rem;
  color: var(--primary);
  transition: color 0.3s ease;
}

.ccc-feature-item:hover .ccc-feature-icon i {
  color: white;
}

.ccc-feature-content {
  flex: 1;
}

.ccc-feature-content h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 0.5rem;
  line-height: 1.3;
}

.ccc-feature-content p {
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.6;
  margin: 0;
}


/* ======================================================
   SECTION 5: TOOLS & STANDARDS
   ====================================================== */

.ccc-tools {
  padding: 80px 0;
  background: white;
}

.ccc-tools-head {
  max-width: 680px;
  margin: 0 auto 3rem;
}

.ccc-tools-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.25;
  margin-bottom: 0;
}

.ccc-tools-layout {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.ccc-tools-col {
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: 2rem;
  transition: all 0.3s ease;
}

.ccc-tools-col:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 30px -12px rgba(0,0,0,0.08);
}

.ccc-tools-col h5 {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--primary);
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--primary-lt);
}

.ccc-tool-list {
  display: flex;
  flex-direction: column;
}

.ccc-tool-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
}

.ccc-tool-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ccc-tool-item:first-child {
  padding-top: 0;
}

.ccc-tool-dot {
  width: 8px;
  height: 8px;
  background: var(--primary);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.45rem;
}

.ccc-tool-item div strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.2rem;
  line-height: 1.3;
}

.ccc-tool-item div span {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.5;
}


/* ======================================================
   RESPONSIVE
   ====================================================== */

@media (max-width: 1100px) {
  .ccc-tools-layout {
    grid-template-columns: 1fr 1fr;
  }
  .ccc-tools-col:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1024px) {
  .ccc-subjects-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .ccc-subject-block:nth-child(3n) {
    border-right: 1px solid var(--border);
  }
  .ccc-subject-block:nth-child(2n) {
    border-right: none;
  }
  .ccc-subject-block:nth-child(4),
  .ccc-subject-block:nth-child(5),
  .ccc-subject-block:nth-child(6) {
    border-bottom: 1px solid var(--border);
  }
  .ccc-subject-block:nth-child(5),
  .ccc-subject-block:nth-child(6) {
    border-bottom: none;
  }
}

@media (max-width: 900px) {
  .ccc-course-types {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .ccc-audience-row {
    grid-template-columns: 1fr;
  }
  .ccc-audience-label {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 1.5rem;
    flex-direction: row;
    align-items: center;
    gap: 1rem;
  }
  .ccc-audience-detail {
    padding: 1.5rem;
  }
}

@media (max-width: 768px) {
  .ccc-what-intro h2,
  .ccc-audience-head h2,
  .ccc-subjects-head h2,
  .ccc-included-head h2,
  .ccc-tools-head h2 {
    font-size: 1.6rem;
  }
  
  .ccc-subjects-grid {
    grid-template-columns: 1fr;
  }
  .ccc-subject-block {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .ccc-subject-block:last-child {
    border-bottom: none;
  }
  
  .ccc-feature-item {
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.5rem;
  }
  .ccc-feature-icon {
    width: 48px;
    height: 48px;
  }
  .ccc-feature-icon i {
    font-size: 1.2rem;
  }
  
  .ccc-tools-layout {
    grid-template-columns: 1fr;
  }
  .ccc-tools-col:last-child {
    grid-column: auto;
  }
}

@media (max-width: 480px) {
  .ccc-course-type-card {
    padding: 1.5rem;
  }
  .ccc-course-type-card h4 {
    font-size: 1rem;
  }
  .ccc-audience-label {
    padding: 1rem;
  }
  .ccc-audience-detail {
    padding: 1rem;
  }
  .ccc-subject-block {
    padding: 1.5rem;
  }
  .ccc-tools-col {
    padding: 1.5rem;
  }
}
/* =============================================
   Instructional Design Services — ids-page.css
   Uses site variables:
   --primary, --primary-dark, --primary-lt,
   --dark, --mid, --muted, --border, --offwhite
   ============================================= */

/* ── Shared Utilities ─────────────────────────── */

.ids-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
  display: block;
  text-align: center;
  margin-bottom: 1rem;
}

.ids-eyebrow--left {
  text-align: left;
}

.ids-section-title {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.25;
  text-align: center;
  margin: 0 auto 3rem;
  max-width: 700px;
}


/* ══════════════════════════════════════════════════
   SECTION 1 — THE DISCIPLINE (REDESIGNED STATS)
   Split layout: text left, stat blocks right
   ══════════════════════════════════════════════════ */

.ids-discipline {
  padding: 90px 0 80px;
  background: white;
}

.ids-discipline-split {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 5rem;
  align-items: start;
}

.ids-discipline-left h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin: 0 0 1.5rem;
}

.ids-discipline-left p {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.8;
  margin: 0 0 1rem;
}

.ids-discipline-left p:last-child {
  margin-bottom: 0;
}

.ids-discipline-left em {
  font-style: italic;
  color: var(--dark);
  font-weight: 600;
}

/* ========== REDESIGNED STAT BLOCKS ========== */
.ids-discipline-stats {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  margin-top: 45px;
}

.ids-stat-block {
  background: linear-gradient(135deg, #f8f9ff 0%, #ffffff 100%);
  border-left: 4px solid var(--primary);
  border-radius: 16px;
  padding: 1.5rem 1.8rem;
  display: flex;
  align-items: center;
  gap: 1.2rem;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.ids-stat-block:hover {
  transform: translateX(6px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
}

.ids-stat-num {
  font-size: 3.2rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
  display: block;
  min-width: 85px;
  text-align: center;
  letter-spacing: -0.02em;
  background: var(--primary-lt);
  padding: 0.3rem 0.5rem;
  border-radius: 20px;
}

.ids-stat-label {
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.65;
  display: block;
  flex: 1;
  font-weight: 500;
}

/* Responsive adjustments for redesigned stats */
@media (max-width: 1024px) {
  .ids-discipline-split {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .ids-discipline-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1rem;
  }

  .ids-stat-block {
    flex-direction: column;
    text-align: center;
    padding: 1.5rem 1rem;
  }

  .ids-stat-num {
    min-width: auto;
    margin-bottom: 0.5rem;
  }

  .ids-stat-label {
    text-align: center;
  }
}

@media (max-width: 768px) {
  .ids-discipline-stats {
    grid-template-columns: 1fr;
    gap: 1rem;
  }

  .ids-stat-block {
    flex-direction: row;
    text-align: left;
    padding: 1.2rem 1.5rem;
  }

  .ids-stat-num {
    min-width: 70px;
    font-size: 2.5rem;
    margin-bottom: 0;
  }

  .ids-stat-label {
    text-align: left;
  }
}

@media (max-width: 480px) {
  .ids-stat-block {
    flex-direction: column;
    text-align: center;
    padding: 1.2rem;
  }

  .ids-stat-label {
    text-align: center;
  }
}
/* ══════════════════════════════════════════════════
   SECTION 2 — SCOPE OF WORK
   6-card grid with deliverable tags
   ══════════════════════════════════════════════════ */

.ids-scope {
  padding: 90px 0 80px;
  background: var(--offwhite);
}

.ids-scope-head {
  margin-bottom: 3rem;
}

.ids-scope-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin: 0 auto 1rem;
  max-width: 680px;
}

.ids-scope-intro {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.7;
  max-width: 640px;
  margin: 0 auto;
}

.ids-scope-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.ids-scope-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.ids-scope-card:hover {
  box-shadow: 0 16px 32px -10px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}

.ids-scope-card--accent {
  background: var(--primary-lt);
  border-color: transparent;
}

.ids-scope-icon {
  width: 46px;
  height: 46px;
  background: white;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
  flex-shrink: 0;
}

.ids-scope-icon i {
  font-size: 1.1rem;
  color: var(--primary);
}

.ids-scope-card h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
  line-height: 1.3;
}

.ids-scope-card p {
  font-size: 0.83rem;
  color: var(--mid);
  line-height: 1.72;
  margin: 0;
  flex: 1;
}

.ids-scope-deliverable {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-top: 1px solid var(--border);
  padding-top: 0.9rem;
  margin-top: auto;
}

.ids-scope-card--accent .ids-scope-deliverable {
  border-top-color: rgba(0,0,0,0.1);
}

.ids-del-label {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary);
  display: block;
}

.ids-scope-deliverable span:last-child {
  font-size: 0.75rem;
  color: var(--mid);
  line-height: 1.5;
}


/* ══════════════════════════════════════════════════
   SECTION 3 — DESIGN FRAMEWORKS
   Primary (ADDIE) left panel + 4 secondary cards right
   ══════════════════════════════════════════════════ */

.ids-frameworks {
  padding: 90px 0 80px;
  background: white;
}

.ids-fw-head {
  margin-bottom: 3.5rem;
}

.ids-fw-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin: 0.5rem auto 0;
  max-width: 680px;
}

.ids-fw-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

/* Primary ADDIE panel */
.ids-fw-primary {
  background: var(--primary);
  border-radius: 24px;
  padding: 2.5rem;
  color: white;
}

.ids-fw-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  padding: 0.3rem 0.85rem;
  border-radius: 30px;
  margin-bottom: 1.2rem;
}

.ids-fw-primary h3 {
  font-size: 2.4rem;
  font-weight: 900;
  color: white;
  margin: 0 0 1rem;
  line-height: 1;
}

.ids-fw-desc {
  font-size: 0.88rem;
  color: rgba(255, 255, 255, 0.85);
  line-height: 1.7;
  margin: 0 0 2rem;
}

.ids-fw-phases {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(255, 255, 255, 0.2);
}

.ids-fw-phase {
  padding: 1rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.15);
  display: grid;
  grid-template-columns: 90px 1fr;
  gap: 1rem;
  align-items: start;
}

.ids-fw-phase:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.ids-fw-phase strong {
  font-size: 0.8rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.95);
  display: block;
  padding-top: 1px;
}

.ids-fw-phase span {
  font-size: 0.78rem;
  color: rgba(255, 255, 255, 0.75);
  line-height: 1.55;
  display: block;
}

/* Secondary framework cards */
.ids-fw-secondary {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.2rem;
  align-content: start;
}

.ids-fw-card {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.6rem;
  background: white;
  transition: box-shadow 0.2s ease;
}

.ids-fw-card:hover {
  box-shadow: 0 10px 24px -8px rgba(0, 0, 0, 0.1);
}

.ids-fw-card h5 {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 0.7rem;
  line-height: 1.3;
}

.ids-fw-card p {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.7;
  margin: 0 0 1rem;
}

.ids-fw-tag {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-lt);
  padding: 0.28rem 0.75rem;
  border-radius: 20px;
  width: fit-content;
}


/* ══════════════════════════════════════════════════
   SECTION 4 — ENGAGEMENT MODELS
   3-column cards, centre card featured
   ══════════════════════════════════════════════════ */

.ids-engage {
  padding: 90px 0 80px;
  background: var(--offwhite);
}

.ids-engage-head {
  margin-bottom: 3rem;
}

.ids-engage-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin: 0.5rem auto 1rem;
  max-width: 660px;
}

.ids-engage-intro {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto;
}

.ids-engage-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.ids-engage-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
}

.ids-engage-card--featured {
  border-color: var(--primary);
  box-shadow: 0 8px 30px -8px rgba(0, 0, 0, 0.12);
}

.ids-engage-badge {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: white;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.3rem 1rem;
  border-radius: 20px;
  white-space: nowrap;
}

.ids-engage-num {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--primary-lt);
  line-height: 1;
}

.ids-engage-card h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
  line-height: 1.3;
}

.ids-engage-card > p {
  font-size: 0.84rem;
  color: var(--mid);
  line-height: 1.72;
  margin: 0;
}

.ids-engage-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
}

.ids-engage-list li {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.5;
  padding-left: 1.1rem;
  position: relative;
}

.ids-engage-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  background: var(--primary);
  border-radius: 50%;
}

.ids-engage-fit {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: auto;
}

.ids-engage-fit-label {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary);
  display: block;
}

.ids-engage-fit span:last-child {
  font-size: 0.76rem;
  color: var(--mid);
  line-height: 1.5;
}



/* ══════════════════════════════════════════════════
   SECTION 5 — ACCESSIBILITY
   Table-style grid with borders for a structured look
   ══════════════════════════════════════════════════ */

.ids-access {
  padding: 90px 0 80px;
  /*background: var(--offwhite);*/
}

.ids-access-head {
  margin-bottom: 3rem;
}

.ids-access-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin: 0.5rem auto 1rem;
  max-width: 680px;
}

/* Table-style grid for accessibility section */
.ids-access-grid--table {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  margin: 0 auto;
}

.ids-access-item {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  padding: 2rem;
  background: white;
  border-bottom: 1px solid var(--border);
  border-right: 1px solid var(--border);
  transition: background 0.2s ease;
}

/* Remove border from items in the last row (bottom) */
.ids-access-grid--table .ids-access-item:nth-last-child(-n+3) {
  border-bottom: none;
}

/* Remove border from items in the last column (right edge) */
.ids-access-grid--table .ids-access-item:nth-child(3n) {
  border-right: none;
}

.ids-access-icon {
  width: 46px;
  height: 46px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.ids-access-icon i {
  font-size: 1.05rem;
  color: var(--primary);
}

.ids-access-item h5 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
  line-height: 1.3;
}

.ids-access-item p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.72;
  margin: 0;
}


/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .ids-fw-layout {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 1024px) {
  .ids-discipline-split {
    grid-template-columns: 1fr;
    gap: 3rem;
  }

  .ids-discipline-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: none;
    gap: 0;
  }

  .ids-stat-block {
    border-top: 2px solid var(--dark);
    border-right: 1px solid var(--border);
    border-bottom: none;
    padding: 1.5rem 1.5rem 0 0;
  }

  .ids-stat-block:last-child {
    border-right: none;
    padding-right: 0;
  }

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

  .ids-engage-cards {
    grid-template-columns: 1fr 1fr;
  }

  .ids-engage-card:last-child {
    grid-column: 1 / -1;
    max-width: 50%;
    margin: 0 auto;
    width: 100%;
  }

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

  /* Adjust table borders for 2-column layout */
  .ids-access-grid--table .ids-access-item {
    border-right: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
  }

  .ids-access-grid--table .ids-access-item:nth-child(2n) {
    border-right: none;
  }

  .ids-access-grid--table .ids-access-item:nth-last-child(-n+2) {
    border-bottom: none;
  }
}

@media (max-width: 768px) {
  .ids-discipline,
  .ids-scope,
  .ids-frameworks,
  .ids-engage,
  .ids-access {
    padding: 60px 0 55px;
  }

  .ids-discipline-stats {
    grid-template-columns: 1fr;
  }

  .ids-stat-block {
    border-top: none;
    border-bottom: 1px solid var(--border);
    border-right: none;
    padding: 1.2rem 0;
  }

  .ids-stat-block:first-child {
    border-top: 2px solid var(--dark);
    padding-top: 1.5rem;
  }

  .ids-scope-grid {
    grid-template-columns: 1fr;
  }

  .ids-fw-secondary {
    grid-template-columns: 1fr;
  }

  .ids-engage-cards {
    grid-template-columns: 1fr;
  }

  .ids-engage-card:last-child {
    grid-column: auto;
    max-width: 100%;
  }

  .ids-access-grid--table {
    grid-template-columns: 1fr;
  }

  /* Reset table borders for single column */
  .ids-access-grid--table .ids-access-item {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }

  .ids-access-grid--table .ids-access-item:last-child {
    border-bottom: none;
  }

  .ids-section-title,
  .ids-fw-head h2,
  .ids-scope-head h2,
  .ids-engage-head h2,
  .ids-access-head h2 {
    font-size: 1.5rem;
  }

  .ids-discipline-left h2 {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .ids-fw-primary {
    padding: 1.8rem;
  }

  .ids-fw-phase {
    grid-template-columns: 1fr;
    gap: 0.3rem;
  }

  .ids-engage-card {
    padding: 1.8rem;
  }
}
/* =============================================
   Video Production & Animation — vpa-page.css
   Uses site variables:
   --primary, --primary-dark, --primary-lt,
   --dark, --mid, --muted, --border, --offwhite
   ============================================= */

/* ── Shared Utilities ─────────────────────────── */

.vpa-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
  display: block;
  text-align: center;
  margin-bottom: 1rem;
}

/* ══════════════════════════════════════════════════
   SECTION 1 — PRODUCTION FORMATS
   Numbered row layout — label + tags side by side
   ══════════════════════════════════════════════════ */

.vpa-formats {
  padding: 90px 0 80px;
  background: white;
}

.vpa-formats-head {
  margin-bottom: 3.5rem;
}

.vpa-formats-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin: 0.5rem auto 1rem;
  max-width: 680px;
}

.vpa-format-rows {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.vpa-format-row {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 3rem;
  padding: 2.8rem 0;
  border-bottom: 1px solid var(--border);
  align-items: start;
}

.vpa-format-left {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 1.5rem;
  align-items: start;
  margin: auto;
}

.vpa-format-num {
  font-size: 3rem;
  font-weight: 900;
  color: var(--primary-lt);
  line-height: 1;
  padding-top: 4px;
}

.vpa-format-meta h3 {
  font-size: 1.25rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 0.75rem;
  line-height: 1.25;
}

.vpa-format-meta p {
  font-size: 0.86rem;
  color: var(--mid);
  line-height: 1.75;
  margin: 0 0 1.2rem;
}

.vpa-format-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.vpa-format-specs span {
  font-size: 0.75rem;
  color: var(--mid);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.vpa-format-specs i {
  color: var(--primary);
  font-size: 0.7rem;
}

.vpa-format-right {
  padding-top: 0.4rem;
}

.vpa-format-tag-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.vpa-format-tag-list span {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-lt);
  padding: 0.45rem 1rem;
  border-radius: 8px;
  display: block;
}

/* ══════════════════════════════════════════════════
   SECTION 2 — PRODUCTION PIPELINE
   Vertical timeline track
   ══════════════════════════════════════════════════ */

.vpa-pipeline {
  padding: 90px 0 80px;
  background: var(--offwhite);
}

.vpa-pipeline-head {
  margin-bottom: 3.5rem;
}

.vpa-pipeline-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin: 0.5rem auto 0;
  max-width: 640px;
}

.vpa-pipeline-track {
  display: flex;
  flex-direction: column;
  max-width: 860px;
  margin: 0 auto;
}

.vpa-pipeline-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 1.8rem;
  align-items: start;
}

.vpa-ps-marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: 4px;
}

.vpa-ps-dot {
  width: 16px;
  height: 16px;
  background: var(--primary);
  border-radius: 50%;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.vpa-ps-line {
  width: 2px;
  flex: 1;
  min-height: 60px;
  background: var(--border);
  margin-top: 4px;
}

.vpa-pipeline-step:last-child .vpa-ps-line {
  display: none;
}

.vpa-ps-content {
  padding-bottom: 2.8rem;
}

.vpa-pipeline-step:last-child .vpa-ps-content {
  padding-bottom: 0;
}

.vpa-ps-phase {
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--primary);
  display: block;
  margin-bottom: 0.5rem;
}

.vpa-ps-content h4 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 0.75rem;
  line-height: 1.3;
}

.vpa-ps-content p {
  font-size: 0.86rem;
  color: var(--mid);
  line-height: 1.75;
  margin: 0 0 1rem;
  max-width: 680px;
}

.vpa-ps-outputs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.vpa-ps-outputs span {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--primary);
  background: white;
  border: 1px solid var(--border);
  padding: 0.28rem 0.85rem;
  border-radius: 30px;
}

/* ══════════════════════════════════════════════════
   SECTION 3 — WHY VIDEO IN ELEARNING
   Two-col: works vs. doesn't
   ══════════════════════════════════════════════════ */

.vpa-why {
  padding: 90px 0 80px;
  background: white;
}

.vpa-why-head {
  margin-bottom: 3rem;
}

.vpa-why-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin: 0.5rem auto 0;
  max-width: 640px;
}

.vpa-why-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  align-items: start;
}

.vpa-why-col {
  border-radius: 20px;
  padding: 2.2rem;
}

.vpa-why-col--works {
  background: #f0faf4;
  border: 1px solid #c3e6cb;
}

.vpa-why-col--doesnt {
  background: #fff8f8;
  border: 1px solid #f5c6cb;
}

.vpa-why-col-label {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-bottom: 1.8rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
}

.vpa-why-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.vpa-why-icon--green {
  background: #28a745;
}

.vpa-why-icon--red {
  background: #dc3545;
}

.vpa-why-icon i {
  color: white;
  font-size: 0.9rem;
}

.vpa-why-col-label h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
  line-height: 1.3;
}

.vpa-why-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.vpa-why-list li {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.vpa-why-list li strong {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
}

.vpa-why-list li span {
  font-size: 0.81rem;
  color: var(--mid);
  line-height: 1.7;
}

/* ══════════════════════════════════════════════════
   SECTION 4 — TECHNICAL DELIVERY
   3-col block layout with entry lists
   ══════════════════════════════════════════════════ */

.vpa-tech {
  padding: 90px 0 80px;
  background: var(--offwhite);
}

.vpa-tech-head {
  margin-bottom: 3rem;
}

.vpa-tech-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin: 0.5rem auto 1rem;
  max-width: 660px;
}

.vpa-tech-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.vpa-tech-block {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
}

.vpa-tech-block h5 {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--dark);
  margin: 0 0 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.vpa-tech-block h5 i {
  color: var(--primary);
  font-size: 0.85rem;
}

.vpa-tech-entries {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.vpa-tech-entry {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}

.vpa-tech-entry:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.vpa-tech-entry:first-child {
  padding-top: 0;
}

.vpa-tech-entry strong {
  display: block;
  font-size: 0.87rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.3rem;
}

.vpa-tech-entry span {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.65;
  display: block;
}

/* ══════════════════════════════════════════════════
   SECTION 5 — ANIMATION STYLES
   6-card grid with title INSIDE the colored swatch
   ══════════════════════════════════════════════════ */

.vpa-styles {
  padding: 90px 0 80px;
  background: white;
}

.vpa-styles-head {
  margin-bottom: 3rem;
}

.vpa-styles-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin: 0.5rem auto 1rem;
  max-width: 660px;
}

.vpa-styles-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.vpa-style-card {
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
  background: white;
}

.vpa-style-card:hover {
  box-shadow: 0 14px 30px -10px rgba(0, 0, 0, 0.12);
  transform: translateY(-4px);
}

/* Colored swatch with title inside - unified solid color */
.vpa-style-swatch {
  background: var(--primary-lt);
  padding: 1.5rem 1.6rem;
  display: flex;
  align-items: center;
}

.vpa-style-swatch h5 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
  line-height: 1.3;
}

/* Remove any pseudo-element overlays */
.vpa-style-swatch::after {
  display: none;
}

.vpa-style-body {
  padding: 1.4rem 1.6rem 1.6rem;
}

.vpa-style-body p {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.7;
  margin: 0 0 1rem;
}

.vpa-style-fit {
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-lt);
  padding: 0.28rem 0.8rem;
  border-radius: 20px;
  display: inline-block;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */

@media (max-width: 1100px) {
  .vpa-tech-grid {
    grid-template-columns: 1fr 1fr;
  }

  .vpa-tech-block:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 1024px) {
  .vpa-styles-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .vpa-format-row {
    grid-template-columns: 1fr 220px;
    gap: 2rem;
  }
}

@media (max-width: 900px) {
  .vpa-why-split {
    grid-template-columns: 1fr;
  }

  .vpa-format-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .vpa-format-right {
    padding-top: 0;
  }

  .vpa-format-tag-list {
    flex-direction: row;
    flex-wrap: wrap;
  }

  .vpa-format-tag-list span {
    width: auto;
  }
}

@media (max-width: 768px) {
  .vpa-formats,
  .vpa-pipeline,
  .vpa-why,
  .vpa-tech,
  .vpa-styles {
    padding: 60px 0 55px;
  }

  .vpa-formats-head h2,
  .vpa-pipeline-head h2,
  .vpa-why-head h2,
  .vpa-tech-head h2,
  .vpa-styles-head h2 {
    font-size: 1.5rem;
  }

  .vpa-tech-grid {
    grid-template-columns: 1fr;
  }

  .vpa-tech-block:last-child {
    grid-column: auto;
  }

  .vpa-styles-grid {
    grid-template-columns: 1fr;
  }

  .vpa-format-left {
    grid-template-columns: 48px 1fr;
    gap: 1rem;
  }

  .vpa-format-num {
    font-size: 2.2rem;
  }

  /* Responsive adjustments for animation style cards */
  .vpa-style-swatch {
    padding: 1.2rem 1.4rem;
  }

  .vpa-style-swatch h5 {
    font-size: 1rem;
  }

  .vpa-style-body {
    padding: 1.2rem 1.4rem 1.4rem;
  }
}

@media (max-width: 480px) {
  .vpa-why-col {
    padding: 1.6rem;
  }

  .vpa-tech-block {
    padding: 1.6rem;
  }

  .vpa-pipeline-step {
    grid-template-columns: 28px 1fr;
    gap: 1.2rem;
  }

  .vpa-ps-dot {
    width: 12px;
    height: 12px;
  }

  .vpa-format-specs {
    flex-direction: column;
    gap: 0.5rem;
  }

  .vpa-style-swatch {
    padding: 1rem 1.2rem;
  }

  .vpa-style-swatch h5 {
    font-size: 0.95rem;
  }
}
/* =============================================
   Content Migration & Standardization — cms-page.css
   Variables: --primary, --primary-dark, --primary-lt,
              --dark, --mid, --muted, --border, --offwhite
   Zero hardcoded hex colors used anywhere.
   ============================================= */


/* ── Shared eyebrow & section head ───────────── */

.cms-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
  display: block;
  text-align: center;
  margin-bottom: 1rem;
}

.cms-eyebrow--left {
  text-align: left;
}

.cms-section-head {
  margin-bottom: 2rem;
}

.cms-section-head h2 {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin: 0 auto 1rem;
  max-width: 680px;
}

.cms-section-head p {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.7;
  max-width: 620px;
  margin: 0 auto;
}


/* ══════════════════════════════════════════════════
   SECTION 1 — THE PROBLEM
   MODIFIED: Swapped layout (standards left, text right)
   Updated SCORM 1.2 description.
   ══════════════════════════════════════════════════ */

.cms-problem {
  padding: 90px 0 80px;
  background: white;
}

.cms-prob-wrap {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 5rem;
  align-items: start;
}

/* Swapped layout: standards column now appears first visually */
.cms-prob-wrap--swapped {
  direction: ltr; /* Ensure proper ordering */
}

/* Ensure columns respect the swapped visual order */
.cms-prob-wrap--swapped .cms-prob-standards {
  order: 1;
  margin: auto;
}

.cms-prob-wrap--swapped .cms-prob-text {
  order: 2;
}

.cms-prob-text h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin: 0 0 1.5rem;
}

.cms-prob-text p {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.8;
  margin: 0 0 1rem;
}

.cms-prob-text p:last-child {
  margin-bottom: 0;
}

/* Standards reference strip — now on left side */
.cms-prob-standards {
  /* No border-top as requested */
}

.cms-std-pill {
  padding: 1.6rem 0;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.cms-std-pill:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cms-std-pill-name {
  font-size: 1rem;
  font-weight: 900;
  color: var(--primary);
  letter-spacing: -0.01em;
  line-height: 1;
}

.cms-std-pill-desc {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.65;
}


/* ══════════════════════════════════════════════════
   SECTION 2 — SOURCE FORMATS
   3-column card grid with two sub-zones inside
   each card — problem badge + fix badge.
   Same structural approach as the reference page's
   scope-of-work section but different internal layout.
   ══════════════════════════════════════════════════ */

.cms-formats {
  padding: 90px 0 80px;
  background: var(--offwhite);
}

.cms-formats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

.cms-fmt-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.cms-fmt-card:hover {
  box-shadow: 0 16px 32px -10px rgba(0,0,0,0.1);
  transform: translateY(-4px);
}

.cms-fmt-top {
  padding: 1.6rem 1.6rem 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  border-bottom: 1px solid var(--border);
}

.cms-fmt-icon {
  width: 40px;
  height: 40px;
  background: var(--primary-lt);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.cms-fmt-icon i {
  font-size: 1rem;
  color: var(--primary);
}

.cms-fmt-top h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
  line-height: 1.3;
}

.cms-fmt-problem,
.cms-fmt-solution {
  padding: 1.1rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cms-fmt-problem {
  border-bottom: 1px solid var(--border);
  background: white;
}

.cms-fmt-solution {
  background: var(--offwhite);
  flex: 1;
}

.cms-tag {
  display: inline-block;
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  width: fit-content;
}

.cms-tag--red {
  background: #fee2e2;
  color: #991b1b;
}

.cms-tag--blue {
  background: var(--primary-lt);
  color: var(--primary);
}

.cms-fmt-problem p,
.cms-fmt-solution p {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.68;
  margin: 0;
}


/* ══════════════════════════════════════════════════
   SECTION 3 — HOW WE WORK
   Two equal columns of three phases each.
   Each phase has a dot, a numbered heading,
   prose, and a deliverable tag strip.
   ══════════════════════════════════════════════════ */

.cms-process {
  padding: 90px 0 80px;
  background: white;
}

.cms-process-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 4rem;
}

.cms-process-col {
  display: flex;
  flex-direction: column;
}

.cms-phase-item {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 0 1.4rem;
  padding: 0 0 2.4rem;
  position: relative;
}

.cms-phase-item:last-child {
  padding-bottom: 0;
}

/* Vertical connecting line */
.cms-phase-item:not(:last-child) .cms-phase-dot::after {
  content: '';
  position: absolute;
  top: 18px;
  left: 0;
  width: 1px;
  height: calc(100% - 18px);
  background: var(--border);
  margin-left: 8px;
}

.cms-phase-dot {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
  margin-top: 3px;
  position: relative;
  z-index: 1;
}

.cms-phase-body h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 0.65rem;
  line-height: 1.3;
}

.cms-phase-num {
  font-size: 0.65rem;
  font-weight: 800;
  color: var(--primary);
  letter-spacing: 0.08em;
  margin-right: 0.4rem;
}

.cms-phase-body p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.75;
  margin: 0 0 0.9rem;
}

.cms-phase-del {
  font-size: 0.72rem;
  color: var(--primary);
  font-weight: 600;
  line-height: 1.5;
  padding-left: 0.8rem;
  border-left: 2px solid var(--primary);
}


/* ══════════════════════════════════════════════════
   SECTION 4 — STANDARDS COMPARISON
   Three-column card layout — centre card featured.
   Mirrors the reference page's engagement-models
   structure exactly (same three-column, centre-
   featured pattern) but with different internal
   content elements: check/cross list + suited-to row.
   ══════════════════════════════════════════════════ */

.cms-compare {
  padding: 90px 0 80px;
  background: var(--offwhite);
}

.cms-cmp-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
  align-items: start;
}

.cms-cmp-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  position: relative;
}

.cms-cmp-card--featured {
  border-color: var(--primary);
  box-shadow: 0 8px 30px -8px rgba(0,0,0,0.12);
}

.cms-cmp-card--featured::before {
  content: 'Most Requested';
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--primary);
  color: white;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.3rem 1rem;
  border-radius: 20px;
  white-space: nowrap;
}

.cms-cmp-hd h3 {
  font-size: 1.15rem;
  font-weight: 900;
  color: var(--dark);
  margin: 0 0 0.3rem;
  line-height: 1.2;
}

.cms-cmp-hd h3 em {
  font-style: normal;
  font-weight: 600;
  color: var(--mid);
}

.cms-cmp-hd p {
  font-size: 0.75rem;
  color: var(--mid);
  margin: 0;
  font-weight: 500;
}

.cms-cmp-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  border-top: 1px solid var(--border);
  padding-top: 1.1rem;
}

.cms-cmp-list li {
  font-size: 0.8rem;
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 0.55rem;
}

.cms-cmp-list li i {
  font-size: 0.7rem;
  margin-top: 3px;
  flex-shrink: 0;
}

.cms-li--yes {
  color: var(--dark);
}

.cms-li--yes i {
  color: var(--primary);
}

.cms-li--no {
  color: var(--muted, #9ca3af);
}

.cms-li--no i {
  color: var(--muted, #9ca3af);
}

.cms-cmp-suited {
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  font-size: 0.77rem;
  color: var(--mid);
  line-height: 1.55;
  margin-top: auto;
}

.cms-suited-label {
  display: block;
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary);
  margin-bottom: 0.3rem;
}


/* ══════════════════════════════════════════════════
   SECTION 5 — WHY CHOOSE US
   Split heading row across top (same method as
   reference page's frameworks section heading).
   Below: 2-column advantage list — icon left,
   content right with a "why it matters" tag.
   Completely different from all other sections.
   ══════════════════════════════════════════════════ */

.cms-whyus {
  padding: 90px 0 80px;
  background: white;
}

/* Top: left heading + right stat row */
.cms-whyus-top {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
  margin-bottom: 3.5rem;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--border);
}

.cms-whyus-top-left h2 {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin: 0 0 1rem;
}

.cms-whyus-top-left p {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.78;
  margin: 0;
}

/* Stat pair on the right */
.cms-whyus-stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  border-top: 2px solid var(--dark);
  padding-top: 1.8rem;
}

.cms-whyus-num {
  display: block;
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.5rem;
}

.cms-whyus-label {
  display: block;
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.6;
}

/* Advantages grid — 2 columns */
.cms-whyus-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem 4rem;
}

.cms-whyus-item {
  display: grid;
  grid-template-columns: 42px 1fr;
  gap: 1.2rem;
  align-items: start;
}

.cms-whyus-icon {
  width: 42px;
  height: 42px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.cms-whyus-icon i {
  font-size: 1rem;
  color: var(--primary);
}

.cms-whyus-content h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 0.6rem;
  line-height: 1.3;
}

.cms-whyus-content p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.75;
  margin: 0 0 0.75rem;
}

.cms-whyus-fit {
  display: block;
  font-size: 0.74rem;
  color: var(--primary);
  font-weight: 600;
  line-height: 1.5;
  font-style: italic;
}


/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */

@media (max-width: 1024px) {

  .cms-prob-wrap {
    grid-template-columns: 1fr;
    gap: 3rem;
  }
  
  /* Maintain swapped order on tablet: standards then text */
  .cms-prob-wrap--swapped .cms-prob-standards {
    order: 1;
  }
  .cms-prob-wrap--swapped .cms-prob-text {
    order: 2;
  }

  .cms-prob-standards {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    border-top: none;
    gap: 0;
  }

  .cms-std-pill {
    border-top: 2px solid var(--dark);
    border-right: 1px solid var(--border);
    border-bottom: none;
    padding: 1.4rem 1.5rem 0 0;
  }

  .cms-std-pill:last-child {
    border-right: none;
    padding-right: 0;
  }

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

  .cms-process-split {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .cms-cmp-cards {
    grid-template-columns: 1fr 1fr;
  }

  .cms-cmp-cards .cms-cmp-card:last-child {
    grid-column: 1 / -1;
    max-width: 50%;
    margin: 0 auto;
    width: 100%;
  }

  .cms-whyus-top {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .cms-whyus-grid {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
}

@media (max-width: 768px) {

  .cms-problem,
  .cms-formats,
  .cms-process,
  .cms-compare,
  .cms-whyus {
    padding: 60px 0 55px;
  }

  .cms-prob-text h2,
  .cms-section-head h2,
  .cms-whyus-top-left h2 {
    font-size: 1.5rem;
  }

  .cms-prob-standards {
    grid-template-columns: 1fr;
  }

  .cms-std-pill {
    border-top: none;
    border-bottom: 1px solid var(--border);
    border-right: none;
    padding: 1.2rem 0;
  }

  .cms-std-pill:first-child {
    border-top: 2px solid var(--dark);
    padding-top: 1.5rem;
  }

  .cms-std-pill:last-child {
    border-bottom: none;
    padding-bottom: 0;
  }

  .cms-formats-grid {
    grid-template-columns: 1fr;
  }

  .cms-cmp-cards {
    grid-template-columns: 1fr;
  }

  .cms-cmp-cards .cms-cmp-card:last-child {
    grid-column: auto;
    max-width: 100%;
  }

  .cms-whyus-stat-row {
    grid-template-columns: 1fr 1fr;
    gap: 1.5rem;
  }

  .cms-whyus-item {
    grid-template-columns: 36px 1fr;
    gap: 1rem;
  }
}

@media (max-width: 480px) {

  .cms-process-split {
    gap: 0;
  }

  .cms-whyus-stat-row {
    grid-template-columns: 1fr;
    gap: 1.5rem;
    padding-top: 1.4rem;
  }

  .cms-whyus-num {
    font-size: 2rem;
  }
}
/* =============================================
   Case Studies & Portfolio — cs-page.css
   Unified icon color (--primary) across all cards
   No #1a2c3e used anywhere
   ============================================= */

:root {
  --primary: #2c5282;
  --primary-dark: #1a3a5c;
  --primary-lt: #e8f0f8;
  --dark: #1e2a3a;
  --mid: #5a6e7c;
  --muted: #8a9aa8;
  --border: #e2e8f0;
  --offwhite: #f8fafc;
}

/* ── Shared Utilities ─────────────────────────── */
.cs-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
  display: block;
  text-align: center;
  margin-bottom: 1rem;
}
.cs-eyebrow--left { text-align: left; }

/* ══════════════════════════════════════════════════
   FILTER BAR
   ══════════════════════════════════════════════════ */
.cs-filter-section {
  padding: 22px 0;
  background: white;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 50;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
}
.cs-filter-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.cs-filter-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--mid);
  white-space: nowrap;
}
.cs-filter-tabs { display: flex; gap: 0.4rem; flex-wrap: wrap; }
.cs-filter-btn {
  border: 1px solid var(--border);
  background: white;
  color: var(--mid);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.42rem 1rem;
  border-radius: 30px;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.cs-filter-btn:hover { border-color: var(--primary); color: var(--primary); }
.cs-filter-btn--active { background: var(--primary); border-color: var(--primary); color: white; }

/* ══════════════════════════════════════════════════
   PROJECT GRID SECTION — MAIN SECTION MODIFIED
   ══════════════════════════════════════════════════ */
.cs-grid-section {
  padding: 80px 0 70px;
  background: var(--offwhite);
}
.cs-section-intro { text-align: center; margin-bottom: 3rem; }
.cs-section-intro h2 {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin: 0.5rem auto 0;
  max-width: 700px;
}
.cs-project-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}

/* FEATURED CARD — spans full width */
.cs-card--featured {
  grid-column: 1 / -1;
  background: white;
  border: 1px solid var(--border);
  border-radius: 22px;
  overflow: hidden;
}
.cs-featured-body {
  display: grid;
  grid-template-columns: 1fr 340px;
}
.cs-featured-left {
  padding: 2.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  border-right: 1px solid var(--border);
}
.cs-featured-tags { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.cs-tag-pill {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.11em;
  padding: 0.26rem 0.75rem;
  border-radius: 20px;
  background: var(--primary-lt);
  color: var(--primary);
}
.cs-tag-pill--dark { background: var(--dark); color: white; }
.cs-tag-pill--sector {
  background: var(--offwhite);
  color: var(--mid);
  border: 1px solid var(--border);
}
.cs-featured-title {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.35;
  margin: 0;
}
.cs-featured-desc {
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.76;
  margin: 0;
}
.cs-featured-meta {
  display: flex;
  gap: 1rem;
  border-top: 1px solid var(--border);
  padding-top: 1.2rem;
  flex-wrap: wrap;
}
.cs-meta-chip { display: flex; flex-direction: column; gap: 0.18rem; }
.cs-meta-chip-label {
  font-size: 0.58rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: var(--primary);
}
.cs-meta-chip-val { font-size: 0.78rem; font-weight: 600; color: var(--dark); }
.cs-featured-right { background: var(--dark); display: flex; align-items: stretch; }
.cs-featured-outcomes { display: flex; flex-direction: column; width: 100%; }
.cs-featured-outcome {
  flex: 1;
  padding: 1.6rem 2rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.cs-featured-outcome:last-child { border-bottom: none; }
.cs-fout-num {
  font-size: 2rem;
  font-weight: 900;
  color: var(--primary-lt);
  line-height: 1;
}
.cs-fout-text {
  font-size: 0.76rem;
  color: rgba(255, 255, 255, 0.65);
  line-height: 1.55;
}

/* REGULAR PROJECT CARDS — unified icon color */
.cs-project-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: box-shadow 0.25s ease, transform 0.25s ease;
}
.cs-project-card:hover {
  box-shadow: 0 14px 32px -10px rgba(0, 0, 0, 0.1);
  transform: translateY(-4px);
}
.cs-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.8rem;
}
/* UNIFIED ICON STYLE — single color for all icons */
.cs-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: var(--primary);  /* Single common color */
}
.cs-card-icon i {
  font-size: 1rem;
  color: white;
}
/* Removed all .cs-card-icon--blue, --green, --orange, --purple, --teal, --red */
.cs-card-tags { display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.cs-card-title {
  font-size: 0.93rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.42;
  margin: 0;
}
.cs-card-desc {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.72;
  margin: 0;
}
.cs-card-results {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  background: var(--offwhite);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  border: 1px solid var(--border);
}
.cs-result-row { display: flex; align-items: flex-start; gap: 0.75rem; }
.cs-result-val {
  font-size: 0.92rem;
  font-weight: 900;
  color: var(--primary);
  min-width: 54px;
  flex-shrink: 0;
}
.cs-result-text { font-size: 0.74rem; color: var(--mid); line-height: 1.5; }
.cs-card-footer {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: auto;
}
.cs-card-meta-row { font-size: 0.74rem; color: var(--mid); }
.cs-card-meta-row strong { color: var(--dark); }
.cs-card-link {
  font-size: 0.77rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: gap 0.2s ease;
}
.cs-card-link:hover { gap: 0.7rem; color: var(--primary-dark); }

/* ══════════════════════════════════════════════════
   INDUSTRIES (unchanged except no #1a2c3e)
   ══════════════════════════════════════════════════ */
.cs-industries { padding: 80px 0 70px; background: white; }
.cs-industries-head { margin-bottom: 3rem; }
.cs-industries-head h2 { font-size: 1.85rem; font-weight: 800; color: var(--dark); line-height: 1.3; margin: 0.5rem auto 0.75rem; max-width: 700px; }
.cs-industries-sub { font-size: 0.88rem; color: var(--mid); line-height: 1.7; max-width: 560px; margin: 0 auto; }
.cs-industries-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; margin-bottom: 3.5rem; }
.cs-industry-card { border: 1px solid var(--border); border-radius: 18px; padding: 1.7rem; display: flex; flex-direction: column; gap: 0.85rem; background: var(--offwhite); transition: box-shadow 0.22s ease, transform 0.22s ease; }
.cs-industry-card:hover { box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.09); transform: translateY(-3px); background: white; }
.cs-industry-card-top { display: flex; align-items: center; justify-content: space-between; }
.cs-industry-icon { width: 44px; height: 44px; background: white; border: 1px solid var(--border); border-radius: 11px; display: flex; align-items: center; justify-content: center; }
.cs-industry-icon i { font-size: 1.05rem; color: var(--primary); }
.cs-industry-stat { text-align: right; }
.cs-istat-num { font-size: 1.5rem; font-weight: 900; color: var(--primary); display: block; line-height: 1; }
.cs-istat-label { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mid); }
.cs-industry-card h4 { font-size: 1rem; font-weight: 800; color: var(--dark); margin: 0; }
.cs-industry-card p { font-size: 0.8rem; color: var(--mid); line-height: 1.72; margin: 0; }
.cs-industry-tags { display: flex; gap: 0.4rem; flex-wrap: wrap; border-top: 1px solid var(--border); padding-top: 0.85rem; margin-top: auto; }
.cs-industry-tags span { font-size: 0.62rem; font-weight: 700; text-transform: uppercase; background: white; border: 1px solid var(--border); color: var(--mid); padding: 0.22rem 0.6rem; border-radius: 20px; }
.cs-proof-strip { display: flex; align-items: center; justify-content: center; background: var(--offwhite); border: 1px solid var(--border); border-radius: 18px; padding: 2rem 3rem; }
.cs-proof-item { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center; }
.cs-proof-num { font-size: 2.2rem; font-weight: 900; color: var(--dark); line-height: 1; }
.cs-proof-label { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--mid); }
.cs-proof-divider { width: 1px; height: 50px; background: var(--border); margin: 0 1rem; }

/* ══════════════════════════════════════════════════
   PROCESS, TESTIMONIALS, RESPONSIVE (unchanged)
   ══════════════════════════════════════════════════ */
.cs-process { padding: 80px 0 70px; background: var(--offwhite); }
.cs-process-layout { display: grid; grid-template-columns: 400px 1fr; gap: 5rem; align-items: start; }
.cs-process-left h2 { font-size: 1.8rem; font-weight: 800; color: var(--dark); line-height: 1.3; margin: 0 0 1.2rem; }
.cs-process-left p { font-size: 0.87rem; color: var(--mid); line-height: 1.75; margin: 0 0 1rem; }
.cs-trust-block { display: flex; flex-direction: column; gap: 0.7rem; border-top: 1px solid var(--border); padding-top: 1.4rem; }
.cs-trust-item { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.82rem; color: var(--mid); }
.cs-trust-item i { color: var(--primary); font-size: 0.95rem; margin-top: 1px; }
.cs-process-steps { display: flex; flex-direction: column; }
.cs-process-step { display: grid; grid-template-columns: 52px 1fr; gap: 1.2rem; }
.cs-step-marker { display: flex; flex-direction: column; align-items: center; }
.cs-step-num { width: 38px; height: 38px; background: var(--primary); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 0.7rem; font-weight: 900; }
.cs-step-line { width: 2px; flex: 1; background: var(--border); margin: 0.4rem 0; min-height: 24px; }
.cs-step-content { padding-bottom: 1.8rem; }
.cs-step-content h5 { font-size: 0.93rem; font-weight: 800; color: var(--dark); margin: 0 0 0.4rem; padding-top: 0.5rem; }
.cs-step-content p { font-size: 0.8rem; color: var(--mid); line-height: 1.7; margin: 0; }
.cs-testimonials { padding: 80px 0 70px; background: white; }
.cs-testimonials-head { margin-bottom: 3rem; }
.cs-testimonials-head h2 { font-size: 1.85rem; font-weight: 800; color: var(--dark); line-height: 1.3; margin: 0.5rem auto 0; max-width: 660px; }
.cs-testimonial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.cs-testimonial-card { border: 1px solid var(--border); border-radius: 20px; padding: 2rem; display: flex; flex-direction: column; gap: 1.2rem; background: white; }
.cs-testimonial-card--accent { border-color: var(--primary); background: var(--primary-lt); }
.cs-quote-mark { font-size: 2.8rem; line-height: 1; color: var(--primary); opacity: 0.35; margin-bottom: -0.5rem; }
.cs-testimonial-text { font-size: 0.84rem; color: var(--dark); line-height: 1.78; margin: 0; font-style: italic; }
.cs-testimonial-author { display: flex; align-items: center; gap: 0.9rem; border-top: 1px solid var(--border); padding-top: 1.2rem; }
.cs-author-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--primary); color: white; font-size: 0.68rem; font-weight: 800; display: flex; align-items: center; justify-content: center; }
.cs-author-name { font-size: 0.8rem; font-weight: 700; color: var(--dark); }
.cs-author-org { font-size: 0.71rem; color: var(--mid); }

/* Responsive */
@media (max-width: 1100px) {
  .cs-featured-body { grid-template-columns: 1fr; }
  .cs-featured-right { border-top: 1px solid rgba(255,255,255,0.08); }
  .cs-featured-left { border-right: none; }
  .cs-featured-outcomes { flex-direction: row; }
  .cs-featured-outcome { border-bottom: none; border-right: 1px solid rgba(255,255,255,0.08); }
  .cs-featured-outcome:last-child { border-right: none; }
  .cs-process-layout { grid-template-columns: 1fr; gap: 3rem; }
}
@media (max-width: 1024px) {
  .cs-project-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-testimonial-grid { grid-template-columns: repeat(2, 1fr); }
  .cs-testimonial-card:last-child { grid-column: 1 / -1; max-width: 50%; margin: 0 auto; }
  .cs-industries-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .cs-grid-section, .cs-process, .cs-industries, .cs-testimonials { padding: 60px 0 50px; }
  .cs-featured-outcomes { flex-direction: column; }
  .cs-featured-outcome { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.08); }
  .cs-project-grid { grid-template-columns: 1fr; }
  .cs-industries-grid { grid-template-columns: 1fr; }
  .cs-testimonial-grid { grid-template-columns: 1fr; }
  .cs-testimonial-card:last-child { max-width: 100%; }
  .cs-filter-bar { flex-direction: column; align-items: flex-start; gap: 0.8rem; }
  .cs-proof-strip { flex-wrap: wrap; padding: 1.5rem; }
  .cs-proof-item { flex: 1 1 45%; padding: 1rem 0; }
  .cs-proof-divider { display: none; }
  .cs-section-intro h2, .cs-process-left h2, .cs-industries-head h2, .cs-testimonials-head h2, .cs-featured-title { font-size: 1.5rem; }
}
@media (max-width: 480px) {
  .cs-featured-left { padding: 1.6rem; }
  .cs-featured-meta { flex-direction: column; gap: 0.8rem; }
  .cs-featured-outcome { padding: 1.2rem 1.6rem; }
  .cs-process-step { grid-template-columns: 44px 1fr; gap: 0.8rem; }
  .cs-proof-item { flex: 1 1 100%; }
}
/* =============================================
   Higher Education Institutions — hei-page.css (v5)
   ============================================= */

.hei-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
  display: block;
  text-align: center;
  margin-bottom: 1rem;
}
.hei-eyebrow--left { text-align: left; }


/* ══════════════════════════════════════════════════
   SECTION 1 — COURSE CATALOGUE (CAROUSEL)
   ══════════════════════════════════════════════════ */

.hei-catalogue {
  padding: 90px 0 80px;
  background: var(--offwhite);
}

.hei-catalogue-head { margin-bottom: 2.2rem; }

.hei-catalogue-head h2 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.25;
  margin: 0 auto 1rem;
  max-width: 660px;
}

.hei-catalogue-head p {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.75;
  max-width: 580px;
  margin: 0 auto;
}

.hei-value-badges {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-top: 1.8rem;
}

.hei-value-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: 40px;
  padding: 0.45rem 1rem 0.45rem 0.6rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--dark);
  white-space: nowrap;
}

.hei-value-badge i {
  font-size: 0.62rem;
  color: var(--primary);
  background: var(--primary-lt);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ── Filter tabs ── */
.hei-cat-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  margin-bottom: 2rem;
}

.hei-cat-tab {
  background: white;
  border: 1px solid var(--border);
  border-radius: 40px;
  padding: 0.5rem 1.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--mid);
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
  white-space: nowrap;
}

.hei-cat-tab:hover { border-color: var(--primary); color: var(--primary); }
.hei-cat-tab.active { background: var(--primary); border-color: var(--primary); color: white; }

/* ── Carousel wrapper ── */
.hei-carousel-outer {
  display: flex;
  align-items: stretch;
  gap: 1rem;
}

.hei-carousel-btn {
  flex-shrink: 0;
  align-self: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--border);
  color: var(--dark);
  font-size: 0.85rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s, box-shadow 0.18s;
  z-index: 2;
}

.hei-carousel-btn:hover:not(:disabled) {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
  box-shadow: 0 4px 14px -4px rgba(0,0,0,0.18);
}

.hei-carousel-btn:disabled { opacity: 0.3; cursor: not-allowed; }

.hei-carousel-viewport {
  flex: 1;
  overflow: hidden;
  cursor: grab;
}

.hei-carousel-viewport:active { cursor: grabbing; }

.hei-carousel-track {
  display: flex;
  align-items: stretch;
  will-change: transform;
  transition: transform 0.4s cubic-bezier(.4,0,.2,1);
}

/* ── Slide card — bigger ── */
.hei-slide {
  box-sizing: border-box;
  padding: 0 0.6rem;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

.hei-slide-inner {
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  flex: 1;
  transition: box-shadow 0.22s, transform 0.22s;
}

.hei-slide:hover .hei-slide-inner {
  box-shadow: 0 12px 36px -8px rgba(0,0,0,0.13);
  transform: translateY(-3px);
}

/* Coloured header band with icon */
.hei-slide-top {
  padding: 2rem 1.8rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  flex-shrink: 0;
}

.hei-slide-cat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(255,255,255,0.18);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: white;
}

.hei-slide-tag-top {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.85);
}

/* Body */
.hei-slide-body {
  padding: 1.6rem 1.8rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  flex: 1;
}

.hei-slide-body h4 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
  line-height: 1.4;
}

.hei-slide-body p {
  font-size: 0.84rem;
  color: var(--mid);
  line-height: 1.75;
  margin: 0;
  flex: 1;
}

.hei-slide-pills {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
}

.hei-slide-pill {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: var(--offwhite);
  border: 1px solid var(--border);
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
}

.hei-slide-pill i { font-size: 0.62rem; color: var(--primary); }

/* ── Footer: dots + counter ── */
.hei-carousel-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  margin-top: 1.8rem;
}

.hei-carousel-dots { display: flex; gap: 0.45rem; flex-wrap: wrap; }

.hei-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, width 0.25s;
}

.hei-dot--active {
  background: var(--primary);
  width: 24px;
  border-radius: 4px;
}

.hei-carousel-counter {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--muted);
}

.hei-catalogue-count {
  text-align: center;
  margin-top: 1.8rem;
  font-size: 0.8rem;
  color: var(--muted);
}

/* ══════════════════════════════════════════════════
   SECTION 2 — PARTNER UNIVERSITIES (BIG CARD DESIGN)
   ══════════════════════════════════════════════════ */

.hei-partners {
  padding: 90px 0 80px;
  background: white;
}

/* Section Header */
.hei-partners-header {
  margin-bottom: 3rem;
}

.hei-partners-header .hei-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: #e8f0fe;
  padding: 0.4rem 1rem;
  border-radius: 40px;
  font-size: 0.75rem;
  font-weight: 700;
  color: #2c5282;
  margin-bottom: 1rem;
}

.hei-partners-header h2 {
  font-size: 2rem;
  font-weight: 800;
  color: #1a2a3a;
  margin-bottom: 1rem;
}

.hei-partners-header p {
  font-size: 0.95rem;
  color: #5a6e7c;
  max-width: 650px;
  margin: 0 auto;
}

/* Featured Card */
.hei-featured-card {
  background: linear-gradient(135deg, #1a3a5c 0%, #2c5282 100%);
  border-radius: 24px;
  padding: 1.8rem;
  margin-bottom: 3rem;
  position: relative;
  box-shadow: 0 20px 35px -10px rgba(44, 82, 130, 0.3);
}

.hei-featured-badge {
  position: absolute;
  top: -12px;
  left: 24px;
  background: #ffd700;
  color: #1a3a5c;
  padding: 0.3rem 1rem;
  border-radius: 40px;
  font-size: 0.7rem;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.hei-featured-grid {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1.8rem;
  align-items: center;
}

.hei-logo-circle {
  width: 80px;
  height: 80px;
  background: rgba(255,255,255,0.15);
  border-radius: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 2.5rem;
  color: white;
}

.hei-featured-info h3 {
  font-size: 1.5rem;
  font-weight: 800;
  color: white;
  margin-bottom: 0.5rem;
}

.hei-featured-info p {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.85);
  line-height: 1.5;
  margin-bottom: 1rem;
}

.hei-featured-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
}

.hei-featured-meta span {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.9);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}

.hei-featured-meta span i {
  font-size: 0.7rem;
}

.hei-featured-stats {
  text-align: center;
}

.hei-feat-stat {
  background: rgba(255,255,255,0.1);
  padding: 0.8rem 1.2rem;
  border-radius: 16px;
  margin-bottom: 0.8rem;
}

.hei-feat-stat:last-child {
  margin-bottom: 0;
}

.hei-feat-num {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  color: #ffd700;
}

.hei-feat-label {
  font-size: 0.65rem;
  color: rgba(255,255,255,0.8);
}

/* Partners Grid */
.hei-partners-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 2rem;
  margin-bottom: 3rem;
}

/* Partner Card */
.hei-partner-card {
  background: white;
  border-radius: 20px;
  box-shadow: 0 5px 25px rgba(0,0,0,0.05);
  border: 1px solid #e8edf2;
  overflow: hidden;
  transition: transform 0.2s, box-shadow 0.2s;
}

.hei-partner-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 15px 35px rgba(0,0,0,0.1);
}

.hei-card-header {
  padding: 1.5rem 1.5rem 1rem;
  border-bottom: 2px solid #eef2f6;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}

.hei-card-flag {
  width: 44px;
  height: 44px;
  background: #e8f0fe;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: #2c5282;
}

.hei-card-header h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: #1a2a3a;
  margin: 0;
  flex: 1;
}

.hei-card-count {
  background: #eef2f6;
  padding: 0.3rem 0.8rem;
  border-radius: 40px;
  font-size: 0.7rem;
  font-weight: 700;
  color: #2c5282;
}

/* Universities List */
.hei-card-universities {
  padding: 0.8rem 0;
  max-height: 400px;
  overflow-y: auto;
}

.hei-uni-item {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
  padding: 0.9rem 1.5rem;
  border-bottom: 1px solid #f0f3f7;
  transition: background 0.15s;
}

.hei-uni-item:hover {
  background: #fafcff;
}

.hei-uni-icon {
  width: 36px;
  height: 36px;
  background: #f0f4f9;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: #2c5282;
  flex-shrink: 0;
}

.hei-uni-details {
  flex: 1;
}

.hei-uni-details strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 800;
  color: #1a2a3a;
  margin-bottom: 0.2rem;
}

.hei-uni-details span {
  font-size: 0.7rem;
  color: #7a8e9c;
  line-height: 1.4;
}

/* Card Footer */
.hei-card-footer {
  padding: 1rem 1.5rem 1.5rem;
  border-top: 1px solid #eef2f6;
}

.hei-view-link {
  font-size: 0.8rem;
  font-weight: 700;
  color: #2c5282;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: gap 0.2s;
}

.hei-view-link:hover {
  gap: 0.8rem;
  text-decoration: none;
  color: #1a3a5c;
}

/* Stats Bar */
.hei-stats-bar {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  background: #f8fafd;
  border-radius: 20px;
  padding: 1.5rem 2rem;
  margin-bottom: 2rem;
  border: 1px solid #e8edf2;
}

.hei-stat-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.hei-stat-item i {
  font-size: 1.8rem;
  color: #2c5282;
  opacity: 0.7;
}

.hei-stat-number {
  display: block;
  font-size: 1.4rem;
  font-weight: 800;
  color: #1a2a3a;
  line-height: 1.2;
}

.hei-stat-label {
  font-size: 0.7rem;
  color: #7a8e9c;
}

/* Note */
.hei-partners-note {
  text-align: center;
  font-size: 0.8rem;
  color: #7a8e9c;
  margin-top: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.hei-partners-note i {
  color: #2c5282;
}

/* Scrollbar Styling */
.hei-card-universities::-webkit-scrollbar {
  width: 4px;
}

.hei-card-universities::-webkit-scrollbar-track {
  background: #eef2f6;
  border-radius: 4px;
}

.hei-card-universities::-webkit-scrollbar-thumb {
  background: #cbd5e0;
  border-radius: 4px;
}

/* Responsive */
@media (max-width: 992px) {
  .hei-partners-grid {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }
  
  .hei-featured-grid {
    grid-template-columns: 1fr;
    text-align: center;
  }
  
  .hei-featured-stats {
    display: flex;
    gap: 1rem;
    justify-content: center;
  }
  
  .hei-feat-stat {
    margin-bottom: 0;
  }
  
  .hei-logo-circle {
    margin: 0 auto;
  }
  
  .hei-featured-meta {
    justify-content: center;
  }
  .lms-capabilities-showcase {
    margin-top: 0;
  }
  
  .hei-stats-bar {
    flex-wrap: wrap;
    justify-content: center;
  }
  
  .hei-stat-item {
    min-width: 120px;
  }
}

@media (max-width: 640px) {
  .hei-partners-header h2 {
    font-size: 1.5rem;
  }
  
  .hei-card-header {
    flex-direction: column;
    text-align: center;
  }
  
  .hei-uni-item {
    padding: 0.8rem 1rem;
  }
  
  .hei-stats-bar {
    padding: 1rem;
  }
  
  .hei-stat-item {
    min-width: 100px;
  }
  
  .hei-stat-item i {
    font-size: 1.3rem;
  }
  
  .hei-stat-number {
    font-size: 1.1rem;
  }
}

/* ══════════════════════════════════════════════════
   SECTION 3 — WHY LEARN WITH US
   ══════════════════════════════════════════════════ */

.hei-why {
  padding: 90px 0 80px;
  background: var(--offwhite);
}

.hei-why-head { margin-bottom: 4rem; }

.hei-why-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin: 0 auto;
  max-width: 620px;
}

.hei-why-blocks { display: flex; flex-direction: column; }

.hei-why-block {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 1px solid var(--border);
  padding: 4rem 0;
}

.hei-why-block:last-child { border-bottom: 1px solid var(--border); }

.hei-why-block--flip .hei-why-block-content { order: 2; }
.hei-why-block--flip .hei-why-block-visual  { order: 1; }

.hei-why-block-content {
  padding-right: 4rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.hei-why-block--flip .hei-why-block-content { padding-right: 0; padding-left: 4rem; }

.hei-why-num {
  font-size: 0.7rem;
  font-weight: 900;
  color: var(--primary);
  letter-spacing: 0.12em;
  display: block;
}

.hei-why-block-content h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.35;
  margin: 0;
}

.hei-why-block-content p {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.8;
  margin: 0;
}

.hei-why-block-visual {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem;
}

.hei-why-stat-box {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.8rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.hei-why-big {
  font-size: 3rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
  display: block;
}

.hei-why-small {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.55;
  display: block;
}

.hei-why-checklist {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.8rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hei-why-check { display: flex; align-items: flex-start; gap: 0.9rem; }

.hei-why-check i {
  font-size: 0.72rem;
  color: white;
  background: var(--primary);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.hei-why-check span { font-size: 0.84rem; color: var(--mid); line-height: 1.6; }

.hei-why-support-cards { display: flex; flex-direction: column; gap: 0.8rem; }

.hei-why-support-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem 1.5rem;
  display: flex;
  align-items: flex-start;
  gap: 1rem;
}

.hei-why-support-card i { font-size: 1rem; color: var(--primary); flex-shrink: 0; margin-top: 2px; }
.hei-why-support-card strong { font-size: 0.88rem; font-weight: 800; color: var(--dark); display: block; margin-bottom: 0.2rem; }
.hei-why-support-card span { font-size: 0.77rem; color: var(--mid); line-height: 1.55; display: block; }


/* ══════════════════════════════════════════════════
   SECTION 4 — HOW ENROLMENT WORKS
   ══════════════════════════════════════════════════ */

.hei-enrol {
  padding: 90px 0 80px;
  background: var(--offwhite);
}

.hei-enrol-head { margin-bottom: 3.5rem; }

.hei-enrol-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin: 0 auto 0.9rem;
  max-width: 600px;
}

.hei-enrol-head p {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.7;
  max-width: 580px;
  margin: 0 auto;
}

.hei-enrol-layout {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 4rem;
  align-items: start;
}

.hei-enrol-steps { display: flex; flex-direction: column; }

.hei-enrol-step {
  display: grid;
  grid-template-columns: 52px 1fr;
  position: relative;
}

.hei-enrol-step:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 25px;
  top: 52px;
  bottom: 0;
  width: 2px;
  background: var(--border);
}

.hei-enrol-step-num-col {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding-top: 0.1rem;
}

.hei-enrol-circle {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--primary);
  color: white;
  font-size: 0.8rem;
  font-weight: 900;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.hei-enrol-step-content { padding: 0.2rem 0 2.8rem 1.4rem; }
.hei-enrol-step:last-child .hei-enrol-step-content { padding-bottom: 0; }

.hei-enrol-step-content h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 0.55rem;
  line-height: 1.3;
}

.hei-enrol-step-content p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.75;
  margin: 0 0 0.65rem;
}

.hei-enrol-note {
  font-size: 0.68rem;
  color: var(--primary);
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: white;
  border: 1px solid var(--border);
  padding: 0.22rem 0.65rem;
  border-radius: 20px;
}

.hei-enrol-note i { font-size: 0.6rem; }

.hei-enrol-panel {
  position: sticky;
  top: 100px;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.hei-enrol-panel-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.4rem 1.5rem;
}

.hei-enrol-panel-card h4 {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 0.8rem;
}

.hei-enrol-tl-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.75rem;
}

.hei-enrol-tl-row:last-child { border-bottom: none; }
.hei-enrol-tl-label { color: var(--mid); font-weight: 600; }

.hei-enrol-tl-time {
  color: var(--primary);
  font-weight: 800;
  background: var(--primary-lt);
  padding: 0.15rem 0.55rem;
  border-radius: 20px;
  font-size: 0.66rem;
}

.hei-enrol-info-block {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.4rem 1.5rem;
}

.hei-enrol-info-block p { font-size: 0.78rem; color: var(--mid); line-height: 1.7; margin: 0; }

.hei-enrol-info-block strong {
  display: block;
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.35rem;
}

.hei-enrol-info-item {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
  font-size: 0.76rem;
}

.hei-enrol-info-item:last-child { border-bottom: none; padding-bottom: 0; }
.hei-enrol-info-item i { font-size: 0.7rem; color: var(--primary); margin-top: 3px; flex-shrink: 0; }
.hei-enrol-info-item span { color: var(--mid); line-height: 1.55; }


/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */

@media (max-width: 1200px) {
  .hei-partners-head { grid-template-columns: 1fr; gap: 2rem; }
  .hei-partners-head-text h2 { max-width: 100%; }
  .hei-partners-head-stats { width: fit-content; }
}

@media (max-width: 1100px) {
  .hei-enrol-layout { grid-template-columns: 1fr; gap: 2.5rem; }
  .hei-enrol-panel { position: static; display: grid; grid-template-columns: 1fr 1fr; }
  .hei-why-block-content { padding-right: 2.5rem; }
  .hei-why-block--flip .hei-why-block-content { padding-left: 2.5rem; }
}

@media (max-width: 1024px) {
  .hei-region-grid { grid-template-columns: 1fr; }
  .hei-why-block { grid-template-columns: 1fr; gap: 2rem; padding: 3rem 0; }
  .hei-why-block-content { padding-right: 0; }
  .hei-why-block--flip .hei-why-block-content { order: 1; padding-left: 0; }
  .hei-why-block--flip .hei-why-block-visual  { order: 2; }
}

@media (max-width: 768px) {
  .hei-catalogue, .hei-partners, .hei-why, .hei-enrol { padding: 60px 0 55px; }
  .hei-catalogue-head h2, .hei-partners-head-text h2, .hei-why-head h2, .hei-enrol-head h2 { font-size: 1.5rem; }
  .hei-enrol-panel { grid-template-columns: 1fr; }
  .hei-why-block-content h3 { font-size: 1.2rem; }
  .hei-carousel-btn { display: none; }
  .hei-partners-head-stats { grid-template-columns: repeat(4,1fr); width: 100%; }
}

@media (max-width: 480px) {
  .hei-catalogue-head h2, .hei-partners-head-text h2, .hei-why-head h2, .hei-enrol-head h2 { font-size: 1.3rem; }
  .hei-value-badges { justify-content: flex-start; }
  .hei-cat-tabs { justify-content: flex-start; overflow-x: auto; flex-wrap: nowrap; padding-bottom: 0.3rem; }
  .hei-cat-tab { flex-shrink: 0; }
  .hei-partners-head-stats { grid-template-columns: 1fr 1fr; }
}
/* =============================================
   Corporate Training & L&D — cld-page.css
   ============================================= */

:root {
  --primary:      #0f5c8a;
  --primary-dark: #0a3a55;
  --primary-lt:   #e8f4fd;
  --dark:         #1a2a3a;
  --mid:          #4a5a6a;
  --muted:        #8a9aaa;
  --border:       #e2e8f0;
  --offwhite:     #f8fafc;
}

/* ══════════════════════════════════════════════════
   SHARED UTILITIES
   ══════════════════════════════════════════════════ */

.cld-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
  display: inline-block;
  margin-bottom: 0.6rem;
}

.cld-section-title {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin: 0 0 0.5rem;
}

.cld-section-title span {
  color: var(--primary);
}

.cld-section-sub {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.75;
  max-width: 580px;
  margin: 0;
}

.cld-section-header {
  margin-bottom: 2.5rem;
  text-align: center;
}

/* ══════════════════════════════════════════════════
   SECTION 1 — TRAINING CATALOGUE
   ══════════════════════════════════════════════════ */

.cld-catalogue {
  padding: 80px 0 70px;
  background: #fff;
}

/* Filters */
.cld-filters {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.5rem;
  padding: 1.2rem 1.4rem;
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.cld-filter-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}

.cld-filter-label {
  font-size: 0.7rem;
  font-weight: 800;
  color: var(--dark);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  min-width: 60px;
  flex-shrink: 0;
}

.cld-filter-pills {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}

.cld-pill {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.28rem 0.8rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--mid);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
  white-space: nowrap;
}

.cld-pill:hover {
  border-color: var(--primary);
  color: var(--primary);
}

.cld-pill.active {
  background: var(--primary);
  border-color: var(--primary);
  color: #fff;
}

/* Table */
.cld-table-wrap {
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow-x: auto;
}

.cld-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.82rem;
  min-width: 580px;
}

.cld-table thead tr {
  background: var(--offwhite);
  border-bottom: 2px solid var(--border);
}

.cld-table thead th {
  padding: 0.8rem 1.1rem;
  font-size: 0.67rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  text-align: left;
}

.cld-table tbody tr {
  border-bottom: 1px solid var(--border);
}

.cld-table tbody tr:last-child {
  border-bottom: none;
}

.cld-table tbody tr:hover {
  background: #fafcff;
}

.cld-table tbody td {
  padding: 0.95rem 1.1rem;
  color: var(--mid);
  vertical-align: middle;
  line-height: 1.5;
}

.cld-prog-name {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.2rem;
}

.cld-prog-desc {
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.5;
}

/* Badges */
.cld-badge {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 700;
  padding: 0.22rem 0.6rem;
  border-radius: 4px;
  white-space: nowrap;
}

.cld-badge--leadership { background: #dbeafe; color: #1e40af; }
.cld-badge--hr         { background: #dcfce7; color: #15803d; }
.cld-badge--sales      { background: #fef3c7; color: #92400e; }
.cld-badge--tech       { background: #e0f2fe; color: #0369a1; }
.cld-badge--compliance { background: #ede9fe; color: #5b21b6; }
.cld-badge--ops        { background: #fce7f3; color: #9d174d; }

/* Format tags */
.cld-fmt {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem;
  border-radius: 4px;
  white-space: nowrap;
}

.cld-fmt.self    { background: #f0fdf4; color: #15803d; }
.cld-fmt.live    { background: #eff6ff; color: #1d4ed8; }
.cld-fmt.blended { background: #fff7ed; color: #c2410c; }

.cld-table tbody td strong {
  font-size: 0.8rem;
  font-weight: 800;
  color: var(--primary);
}

/* Empty state */
.cld-table-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 3rem;
  gap: 0.75rem;
  text-align: center;
}

.cld-table-empty i {
  font-size: 1.6rem;
  color: var(--border);
}

.cld-table-empty p {
  font-size: 0.82rem;
  color: var(--mid);
  margin: 0;
}

.cld-cat-note {
  text-align: center;
  font-size: 0.76rem;
  color: var(--muted);
  margin-top: 1.2rem;
}

/* ══════════════════════════════════════════════════
   SECTION 2 — WHO WE WORK WITH
   ══════════════════════════════════════════════════ */

.cld-who {
  padding: 80px 0 70px;
  background: var(--offwhite);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Stats row */
.cld-stats-row {
  display: flex;
  align-items: center;
  gap: 0;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  margin-bottom: 2.5rem;
  overflow: hidden;
}

.cld-stat {
  flex: 1;
  padding: 2rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.cld-stat-divider {
  width: 1px;
  height: 60px;
  background: var(--border);
  flex-shrink: 0;
}

.cld-stat-num {
  font-size: 2.4rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
}

.cld-stat-lbl {
  font-size: 0.76rem;
  color: var(--mid);
  line-height: 1.5;
}

/* Industry cards */
.cld-industry-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
  margin-bottom: 2rem;
}

.cld-industry-card {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.6rem 1.4rem;
}

.cld-industry-icon {
  width: 38px;
  height: 38px;
  background: var(--primary-lt);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--primary);
  margin-bottom: 1rem;
}

.cld-industry-card h4 {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 0.2rem;
}

.cld-industry-sub {
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0 0 0.8rem;
}

.cld-industry-card p {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.75;
  margin: 0 0 1rem;
}

.cld-industry-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.cld-industry-tags span {
  display: inline-block;
  font-size: 0.64rem;
  font-weight: 600;
  padding: 0.18rem 0.55rem;
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 4px;
  color: var(--mid);
}

/* Sector chips */
.cld-sectors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
}

.cld-sector {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 5px;
  padding: 0.4rem 0.9rem;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--mid);
  white-space: nowrap;
}

.cld-sector i {
  font-size: 0.72rem;
  color: var(--primary);
}

/* ══════════════════════════════════════════════════
   SECTION 3 — BUSINESS IMPACT
   ══════════════════════════════════════════════════ */

.cld-impact {
  padding: 80px 0 70px;
  background: #fff;
}

/* Metrics */
.cld-metrics-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 2.5rem;
}

.cld-metric-card {
  background: #fff;
  padding: 2rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cld-metric-num {
  font-size: 2.6rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
  display: block;
}

.cld-metric-desc {
  font-size: 0.79rem;
  color: var(--mid);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

.cld-metric-src {
  font-size: 0.63rem;
  color: var(--muted);
  font-style: italic;
}

/* Features */
.cld-features-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1px;
  background: var(--border);
  border: 1px solid var(--border);
  border-radius: 10px;
  overflow: hidden;
}

.cld-feature-item {
  background: #fff;
  padding: 1.8rem 1.6rem;
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
}

.cld-feature-icon {
  width: 38px;
  height: 38px;
  background: var(--primary-lt);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.85rem;
  color: var(--primary);
  flex-shrink: 0;
}

.cld-feature-text strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.4rem;
}

.cld-feature-text p {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.7;
  margin: 0;
}

/* ══════════════════════════════════════════════════
   SECTION 4 — GETTING STARTED (UNCHANGED)
   ══════════════════════════════════════════════════ */

.cld-onboard {
  padding: 80px 0 70px;
  background: var(--offwhite);
  border-top: 1px solid var(--border);
}

.cld-tab-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
}

.cld-tab {
  background: #fff;
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 1rem 1.6rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  min-width: 140px;
}

.cld-tab:hover {
  border-color: var(--primary);
}

.cld-tab.active {
  border-color: var(--primary);
  background: var(--primary);
}

.cld-tab-num {
  font-size: 0.7rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  color: var(--muted);
}

.cld-tab.active .cld-tab-num { color: rgba(255,255,255,0.7); }

.cld-tab-name {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--dark);
}

.cld-tab.active .cld-tab-name { color: #fff; }

.cld-tab-line {
  height: 2px;
  width: 30px;
  background: var(--border);
  flex-shrink: 0;
}

.cld-tab-panels { position: relative; }

.cld-tab-panel {
  display: none;
  grid-template-columns: 1fr 1fr;
  gap: 3rem;
  align-items: start;
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 2.5rem;
}

.cld-tab-panel.active { display: grid; }

.cld-panel-left {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.cld-panel-left h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.4;
  margin: 0;
}

.cld-panel-left p {
  font-size: 0.83rem;
  color: var(--mid);
  line-height: 1.8;
  margin: 0;
}

.cld-panel-detail {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1.1rem 1.3rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 8px;
  margin-top: 0.4rem;
}

.cld-panel-detail-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.78rem;
  color: var(--mid);
  font-weight: 600;
}

.cld-panel-detail-item i {
  font-size: 0.68rem;
  color: var(--primary);
  width: 16px;
  text-align: center;
  flex-shrink: 0;
}

.cld-panel-right { display: flex; flex-direction: column; }

.cld-panel-checklist {
  background: #fff;
  margin-top: 23px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.5rem 1.6rem;
}

.cld-panel-checklist h4 {
  font-size: 0.78rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 1rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.cld-panel-check {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--border);
}

.cld-panel-check:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.cld-panel-check i {
  font-size: 0.55rem;
  color: #fff;
  background: var(--primary);
  width: 17px;
  height: 17px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.cld-panel-check span {
  font-size: 0.79rem;
  color: var(--mid);
  line-height: 1.5;
}

/* ══════════════════════════════════════════════════
   RESPONSIVE
   ══════════════════════════════════════════════════ */

@media (max-width: 1200px) {
  .cld-industry-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .cld-metrics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 992px) {
  .cld-tab-panel {
    grid-template-columns: 1fr;
    gap: 2rem;
    padding: 2rem;
  }
  .cld-tab-line { display: none; }
  .cld-tab-bar  { gap: 0.5rem; }
  .cld-tab {
    min-width: calc(50% - 0.5rem);
    flex-direction: row;
    padding: 0.8rem 1rem;
  }
}

@media (max-width: 768px) {
  .cld-catalogue,
  .cld-who,
  .cld-impact,
  .cld-onboard {
    padding: 55px 0 45px;
  }

  .cld-section-title {
    font-size: 1.5rem;
  }

  .cld-filter-row {
    flex-direction: column;
    align-items: flex-start;
  }

  .cld-table th:nth-child(5),
  .cld-table td:nth-child(5),
  .cld-table th:nth-child(6),
  .cld-table td:nth-child(6) {
    display: none;
  }

  .cld-stats-row {
    flex-direction: column;
  }

  .cld-stat-divider {
    width: 100%;
    height: 1px;
  }

  .cld-stat {
    padding: 1.4rem 1.6rem;
  }

  .cld-industry-grid {
    grid-template-columns: 1fr;
  }

  .cld-metrics-grid,
  .cld-features-grid {
    grid-template-columns: 1fr;
  }

  .cld-sectors {
    gap: 0.4rem;
  }
}

@media (max-width: 480px) {
  .cld-tab-panel {
    padding: 1.4rem;
  }

  .cld-metric-num {
    font-size: 2rem;
  }

  .cld-stat-num {
    font-size: 1.8rem;
  }
}

/* =============================================
   K-12 Schools Page — k12-schools.css
   ============================================= */

.k12-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
  display: block;
  text-align: center;
  margin-bottom: 1rem;
}

.k12-eyebrow--left {
  text-align: left;
}


/* ══════════════════════════════════════════════════
   SECTION 1 — SOLUTIONS (TABBED)
   ══════════════════════════════════════════════════ */

.k12-solutions {
  padding: 90px 0 80px;
  background: var(--offwhite);
}

.k12-solutions-head {
  margin-bottom: 2.5rem;
}

.k12-solutions-head h2 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.25;
  margin: 0 auto 1rem;
  max-width: 660px;
}

.k12-solutions-head p {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.75;
  max-width: 600px;
  margin: 0 auto;
}

/* Tabs */
.k12-sol-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  border-bottom: 2px solid var(--border);
  padding-bottom: 0;
  margin-bottom: 0;
}

.k12-sol-tab {
  background: transparent;
  border: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -2px;
  padding: 0.75rem 1.4rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--mid);
  cursor: pointer;
  transition: color 0.18s, border-color 0.18s;
  white-space: nowrap;
}

.k12-sol-tab:hover {
  color: var(--dark);
}

.k12-sol-tab.active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

/* Panels */
.k12-sol-panels {
  position: relative;
}

.k12-sol-panel {
  display: none;
  padding: 2.8rem 0 0;
}

.k12-sol-panel.active {
  display: block;
}

.k12-sol-panel-layout {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 3rem;
  align-items: start;
}

.k12-sol-panel-icon {
  width: 52px;
  height: 52px;
  border-radius: 14px;
  background: var(--primary);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  margin-bottom: 1.2rem;
}

.k12-sol-panel-main h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 1rem;
  line-height: 1.35;
}

.k12-sol-panel-main p {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.8;
  margin: 0 0 0.9rem;
}

.k12-sol-features {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-top: 1.4rem;
  padding-top: 1.4rem;
  border-top: 1px solid var(--border);
}

.k12-sol-feat {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  font-size: 0.82rem;
  color: var(--mid);
}

.k12-sol-feat i {
  color: var(--primary);
  font-size: 0.72rem;
  margin-top: 3px;
  flex-shrink: 0;
}

/* Aside */
.k12-sol-stat-stack {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-bottom: 1rem;
}

.k12-sol-stat {
  padding: 1.2rem 1.4rem;
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.k12-sol-stat:last-child {
  border-bottom: none;
}

.k12-sol-stat-n {
  font-size: 1.6rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
}

.k12-sol-stat-l {
  font-size: 0.72rem;
  color: var(--mid);
}

.k12-sol-integrations {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
}

.k12-sol-integ-label {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  display: block;
  margin-bottom: 0.75rem;
}

.k12-sol-integ-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.k12-sol-integ-tags span {
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--offwhite);
  border: 1px solid var(--border);
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
  color: var(--dark);
}

@media (max-width: 1024px) {
  .k12-sol-panel-layout {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .k12-sol-stat-stack {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
  }

  .k12-sol-stat {
    border-bottom: none;
    border-right: 1px solid var(--border);
  }

  .k12-sol-stat:last-child {
    border-right: none;
  }
}

@media (max-width: 600px) {
  .k12-sol-tabs {
    overflow-x: auto;
    flex-wrap: nowrap;
    padding-bottom: 0.2rem;
  }

  .k12-sol-tab {
    flex-shrink: 0;
  }

  .k12-sol-stat-stack {
    grid-template-columns: 1fr 1fr;
  }

  .k12-sol-stat:nth-child(2) {
    border-right: none;
  }

  .k12-sol-stat:nth-child(3) {
    grid-column: 1 / -1;
    border-right: none;
    border-top: 1px solid var(--border);
  }
}


/* ══════════════════════════════════════════════════
   SECTION 2 — SCHOOL TYPES (SCROLL CARDS)
   ══════════════════════════════════════════════════ */

.k12-types {
  padding: 90px 0 80px;
  background: white;
}

.k12-types-head {
  margin-bottom: 2.5rem;
}

.k12-types-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin: 0 auto 0.6rem;
  max-width: 620px;
}

/* Track */
.k12-types-track-wrap {
  overflow: hidden;
  margin: 0 -0.6rem;
}

.k12-types-track {
  display: flex;
  transition: transform 0.38s cubic-bezier(.4, 0, .2, 1);
  align-items: stretch;
}

/* Type cards */
.k12-type-card {
  box-sizing: border-box;
  flex-shrink: 0;
  padding: 0 0.6rem;
}

.k12-type-card-inner {
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.6rem;
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.22s, transform 0.22s;
  height: 100%;
}

.k12-type-card:hover .k12-type-card-inner {
  box-shadow: 0 10px 32px -8px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

.k12-type-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}

.k12-type-icon {
  width: 48px;
  height: 48px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: white;
}

.k12-type-card:first-child .k12-type-icon { background: linear-gradient(135deg, #1a6f44, #27a860); }
.k12-type-card:nth-child(2) .k12-type-icon { background: linear-gradient(135deg, #1a3a5c, #2c5f9e); }
.k12-type-card:nth-child(3) .k12-type-icon { background: linear-gradient(135deg, #3d1a7a, #6a3ec2); }
.k12-type-card:nth-child(4) .k12-type-icon { background: linear-gradient(135deg, #7a3e00, #c06800); }
.k12-type-card:nth-child(5) .k12-type-icon { background: linear-gradient(135deg, #1a5070, #1e7aa8); }
.k12-type-card:nth-child(6) .k12-type-icon { background: linear-gradient(135deg, #5a1a1a, #a83030); }

.k12-type-badge {
  font-size: 0.64rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  background: var(--offwhite);
  border: 1px solid var(--border);
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  color: var(--muted);
}

.k12-type-card-inner h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 0.6rem;
  line-height: 1.35;
}

.k12-type-card-inner p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.75;
  margin: 0 0 1rem;
  flex: 1;
}

.k12-type-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.9rem;
  border-top: 1px solid var(--border);
}

.k12-type-tags span {
  font-size: 0.68rem;
  font-weight: 700;
  background: var(--offwhite);
  border: 1px solid var(--border);
  padding: 0.25rem 0.6rem;
  border-radius: 20px;
  color: var(--dark);
}

/* Nav */
.k12-types-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  margin-top: 2rem;
}

.k12-types-btn {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--border);
  color: var(--dark);
  font-size: 0.8rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.k12-types-btn:hover:not(:disabled) {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}

.k12-types-btn:disabled {
  opacity: 0.3;
  cursor: not-allowed;
}

.k12-types-dots {
  display: flex;
  gap: 0.4rem;
}

.k12-types-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--border);
  border: none;
  cursor: pointer;
  padding: 0;
  transition: background 0.2s, width 0.2s;
}

.k12-types-dot--active {
  background: var(--primary);
  width: 22px;
  border-radius: 4px;
}

@media (max-width: 768px) {
  .k12-types-head {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ══════════════════════════════════════════════════
   SECTION 3 — COMPLIANCE & SAFEGUARDING
   ══════════════════════════════════════════════════ */

.k12-compliance {
  padding: 90px 0 80px;
  background: var(--offwhite);
}

.k12-compliance-grid {
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: 4rem;
  align-items: start;
}

.k12-comp-text h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin: 0 0 1rem;
  max-width: 500px;
}

.k12-comp-text p {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.8;
  margin: 0 0 0.8rem;
}

.k12-comp-items {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-top: 1.8rem;
}

.k12-comp-item {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
}

.k12-comp-item-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: var(--primary-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--primary);
  flex-shrink: 0;
}

.k12-comp-item-body strong {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--dark);
  display: block;
  margin-bottom: 0.25rem;
}

.k12-comp-item-body span {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.55;
}

/* Aside cards */
.k12-comp-cert-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.6rem;
  margin-bottom: 1.2rem;
}

.k12-comp-cert-card h4 {
  font-size: 0.9rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 1.2rem;
}

.k12-cert-list {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.k12-cert-row {
  display: flex;
  align-items: flex-start;
  gap: 0.8rem;
}

.k12-cert-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 4px;
}

.k12-cert-green { background: #38a169; }

.k12-cert-row strong {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--dark);
  display: block;
  margin-bottom: 0.15rem;
}

.k12-cert-row span {
  font-size: 0.72rem;
  color: var(--mid);
  line-height: 1.45;
}

.k12-comp-quote-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.6rem;
  position: relative;
}

.k12-quote-icon {
  font-size: 1.6rem;
  color: var(--primary);
  opacity: 0.18;
  position: absolute;
  top: 1rem;
  right: 1.2rem;
}

.k12-comp-quote-card p {
  font-size: 0.84rem;
  color: var(--mid);
  line-height: 1.7;
  margin: 0 0 1.2rem;
  font-style: italic;
}

.k12-quote-attr {
  display: flex;
  align-items: center;
  gap: 0.8rem;
}

.k12-quote-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--primary-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--primary);
  flex-shrink: 0;
}

.k12-quote-attr strong {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--dark);
  display: block;
}

.k12-quote-attr span {
  font-size: 0.7rem;
  color: var(--muted);
}

@media (max-width: 1100px) {
  .k12-compliance-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .k12-comp-text h2 {
    max-width: 100%;
  }
}

@media (max-width: 768px) {
  .k12-compliance {
    padding: 60px 0 55px;
  }
}


/* ══════════════════════════════════════════════════
   SECTION 4 — IMPLEMENTATION PROCESS (REDESIGNED)
   ══════════════════════════════════════════════════ */

.k12-process {
  padding: 90px 0 80px;
  background: white;
}

.k12-process-head {
  margin-bottom: 3.5rem;
}

.k12-process-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin: 0 auto 0.8rem;
  max-width: 580px;
}

/* Steps grid layout */
.k12-steps {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.k12-step-card {
  background: var(--offwhite);
  border-radius: 20px;
  padding: 1.8rem 2rem 1.8rem 2rem;
  position: relative;
  transition: box-shadow 0.22s, transform 0.22s;
  border: 1px solid var(--border);
}

.k12-step-card:hover {
  box-shadow: 0 12px 28px -8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
  border-color: var(--primary-lt);
}

/* Number in top-right corner */
.k12-step-number {
  position: absolute;
  top: 1.2rem;
  right: 1.5rem;
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--primary);
  opacity: 0.15;
  line-height: 1;
  font-family: monospace;
}

.k12-step-icon {
  width: 52px;
  height: 52px;
  background: white;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  color: var(--primary);
  margin-bottom: 1rem;
  border: 1px solid var(--border);
}

.k12-step-card h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 0.6rem;
  line-height: 1.35;
}

.k12-step-card p {
  font-size: 0.86rem;
  color: var(--mid);
  line-height: 1.75;
  margin: 0 0 1.2rem;
  max-width: 85%;
}

.k12-step-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 1.2rem;
  font-size: 0.72rem;
  color: var(--muted);
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.k12-step-meta span {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
}

.k12-step-meta i {
  font-size: 0.7rem;
  color: var(--primary);
}

/* Responsive */
@media (max-width: 768px) {
  .k12-process {
    padding: 60px 0 55px;
  }

  .k12-step-card {
    padding: 1.5rem 1.5rem 1.5rem 1.5rem;
  }

  .k12-step-number {
    font-size: 1.8rem;
    top: 1rem;
    right: 1.2rem;
  }

  .k12-step-card p {
    max-width: 100%;
  }

  .k12-step-icon {
    width: 44px;
    height: 44px;
    font-size: 1.1rem;
  }

  .k12-step-card h3 {
    font-size: 1.05rem;
  }

  .k12-step-card p {
    font-size: 0.82rem;
  }
}

@media (max-width: 480px) {
  .k12-step-card {
    padding: 1.2rem 1.2rem 1.2rem 1.2rem;
  }

  .k12-step-number {
    font-size: 1.5rem;
    top: 0.8rem;
    right: 1rem;
    opacity: 0.2;
  }

  .k12-step-meta {
    gap: 0.8rem;
    font-size: 0.68rem;
  }
}
/* ══════════════════════════════════════════════════
   SECTION 5 — CASE STUDIES
   ══════════════════════════════════════════════════ */

.k12-cases {
  padding: 90px 0 80px;
  background: var(--offwhite);
}

.k12-cases-head {
  margin-bottom: 3rem;
}

.k12-cases-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin: 0 auto;
  max-width: 560px;
}

.k12-cases-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.8rem;
}

.k12-case-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: box-shadow 0.22s, transform 0.22s;
}

.k12-case-card:hover {
  box-shadow: 0 12px 36px -8px rgba(0, 0, 0, 0.12);
  transform: translateY(-3px);
}

.k12-case-top {
  padding: 1.2rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.k12-case-top--blue   { background: linear-gradient(135deg, #1a3a5c, #2c5f9e); }
.k12-case-top--green  { background: linear-gradient(135deg, #1a4a30, #276749); }
.k12-case-top--purple { background: linear-gradient(135deg, #2d1b6e, #553c9a); }

.k12-case-type {
  font-size: 0.7rem;
  font-weight: 800;
  color: rgba(255, 255, 255, 0.95);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.k12-case-region {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.75);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.k12-case-region i { font-size: 0.6rem; }

.k12-case-body {
  padding: 1.6rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.k12-case-body h4 {
  font-size: 0.97rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 0.75rem;
  line-height: 1.4;
}

.k12-case-body p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.75;
  margin: 0 0 1.4rem;
  flex: 1;
}

.k12-case-results {
  display: flex;
  gap: 0;
  border-top: 1px solid var(--border);
  padding-top: 1.2rem;
}

.k12-case-result {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  padding-right: 0.8rem;
  border-right: 1px solid var(--border);
}

.k12-case-result:last-child {
  border-right: none;
  padding-right: 0;
  padding-left: 0.8rem;
}

.k12-case-result:not(:first-child):not(:last-child) {
  padding-left: 0.8rem;
}

.k12-case-result-n {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1.1;
}

.k12-case-result-l {
  font-size: 0.64rem;
  color: var(--muted);
  line-height: 1.35;
}

@media (max-width: 1024px) {
  .k12-cases-grid {
    grid-template-columns: 1fr;
    max-width: 540px;
    margin: 0 auto;
  }
}

@media (max-width: 768px) {
  .k12-cases {
    padding: 60px 0 55px;
  }
}


/* ══════════════════════════════════════════════════
   GLOBAL RESPONSIVE
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .k12-solutions,
  .k12-types,
  .k12-process,
  .k12-compliance,
  .k12-cases {
    padding: 60px 0 55px;
  }

  .k12-solutions-head h2,
  .k12-types-head h2,
  .k12-process-head h2,
  .k12-cases-head h2,
  .k12-comp-text h2 {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .k12-solutions-head h2,
  .k12-types-head h2,
  .k12-process-head h2,
  .k12-cases-head h2,
  .k12-comp-text h2 {
    font-size: 1.3rem;
  }
}
/* =============================================
   Government & Non-Profit Page — govt-nonprofit.css
   ============================================= */

.gnp-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--primary);
  display: block;
  text-align: center;
  margin-bottom: 1rem;
}

.gnp-eyebrow--left {
  text-align: left;
}


/* ══════════════════════════════════════════════════
   SECTION 1 — CHALLENGES (PROBLEM / SOLUTION SPLIT)
   ══════════════════════════════════════════════════ */

.gnp-challenges {
  padding: 90px 0 80px;
  background: white;
}

.gnp-challenges-intro {
  margin-bottom: 3.5rem;
}

.gnp-challenges-intro h2 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.25;
  margin: 0 auto 1rem;
  max-width: 700px;
}

.gnp-challenges-intro p {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.75;
  max-width: 680px;
  margin: 0 auto;
}

/* Challenge rows */
.gnp-challenges-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.gnp-challenge-row {
  display: grid;
  grid-template-columns: 1fr 60px 1fr;
  border-bottom: 1px solid var(--border);
  transition: background 0.18s;
}

.gnp-challenge-row:last-child {
  border-bottom: none;
}

.gnp-challenge-row:hover {
  background: #fafcff;
}

.gnp-challenge-problem,
.gnp-challenge-solution {
  padding: 2rem 2.2rem;
}

.gnp-challenge-problem {
  border-right: 1px solid var(--border);
  background: #fff9f9;
}

.gnp-challenge-solution {
  background: #f6fbf8;
}

.gnp-challenge-label {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.62rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  padding: 0.22rem 0.7rem;
  border-radius: 20px;
  margin-bottom: 0.9rem;
}

.gnp-label-problem {
  background: #fff0f0;
  color: #c53030;
  border: 1px solid #fed7d7;
}

.gnp-label-problem i { color: #c53030; font-size: 0.6rem; }

.gnp-label-solution {
  background: #f0fff4;
  color: #276749;
  border: 1px solid #c6f6d5;
}

.gnp-label-solution i { color: #276749; font-size: 0.6rem; }

.gnp-challenge-problem h4,
.gnp-challenge-solution h4 {
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 0.6rem;
  line-height: 1.4;
}

.gnp-challenge-problem p,
.gnp-challenge-solution p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.75;
  margin: 0;
}

.gnp-challenge-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  border-right: 1px solid var(--border);
}

.gnp-challenge-arrow {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: var(--muted);
}

@media (max-width: 900px) {
  .gnp-challenge-row {
    grid-template-columns: 1fr;
  }

  .gnp-challenge-divider {
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 0.6rem 0;
    justify-content: flex-start;
    padding-left: 2.2rem;
  }

  .gnp-challenge-arrow {
    transform: rotate(90deg);
  }

  .gnp-challenge-problem {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
}

@media (max-width: 640px) {
  .gnp-challenges {
    padding: 60px 0 55px;
  }

  .gnp-challenge-problem,
  .gnp-challenge-solution {
    padding: 1.5rem 1.4rem;
  }

  .gnp-challenges-intro h2 {
    font-size: 1.55rem;
  }
}


/* ══════════════════════════════════════════════════
   SECTION 2 — SERVICES GRID
   ══════════════════════════════════════════════════ */

.gnp-services {
  padding: 90px 0 80px;
  background: var(--offwhite);
}

.gnp-services-head {
  margin-bottom: 3rem;
}

.gnp-services-head h2 {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.25;
  margin: 0 auto 1rem;
  max-width: 660px;
}

.gnp-services-head p {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.75;
  max-width: 580px;
  margin: 0 auto;
}

.gnp-services-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

.gnp-service-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: box-shadow 0.22s, transform 0.22s;
}

.gnp-service-card:hover {
  box-shadow: 0 10px 32px -8px rgba(0, 0, 0, 0.11);
  transform: translateY(-3px);
}

.gnp-service-icon {
  width: 50px;
  height: 50px;
  border-radius: 13px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  color: white;
  margin-bottom: 1.2rem;
  flex-shrink: 0;
}

.gnp-icon-blue   { background: linear-gradient(135deg, #1a3a5c, #2c5f9e); }
.gnp-icon-green  { background: linear-gradient(135deg, #1a5a30, #27a860); }
.gnp-icon-teal   { background: linear-gradient(135deg, #0d4f6c, #1282a2); }
.gnp-icon-navy   { background: linear-gradient(135deg, #0d1b2a, #1a3a5c); }
.gnp-icon-amber  { background: linear-gradient(135deg, #7b4700, #c06800); }
.gnp-icon-purple { background: linear-gradient(135deg, #3d1a7a, #6a3ec2); }

.gnp-service-card h4 {
  font-size: 0.98rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 0.65rem;
  line-height: 1.35;
}

.gnp-service-card p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.75;
  margin: 0 0 1rem;
}

.gnp-service-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  flex: 1;
}

.gnp-service-list li {
  font-size: 0.77rem;
  color: var(--mid);
  padding-left: 1.1rem;
  position: relative;
  line-height: 1.5;
}

.gnp-service-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 7px;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  opacity: 0.5;
}

.gnp-service-link {
  font-size: 0.76rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-top: 1px solid var(--border);
  padding-top: 1rem;
  margin-top: auto;
  transition: gap 0.2s;
}

.gnp-service-link:hover {
  gap: 0.7rem;
  text-decoration: none;
  color: var(--primary);
}

.gnp-service-link i { font-size: 0.65rem; }

@media (max-width: 1024px) {
  .gnp-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .gnp-services {
    padding: 60px 0 55px;
  }

  .gnp-services-grid {
    grid-template-columns: 1fr;
  }

  .gnp-services-head h2 {
    font-size: 1.55rem;
  }
}


/* ══════════════════════════════════════════════════
   SECTION 3 — CREDENTIALS (BADGE WALL)
   ══════════════════════════════════════════════════ */

.gnp-credentials {
  padding: 90px 0 80px;
  background: white;
}

.gnp-cred-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4.5rem;
  align-items: start;
}

.gnp-cred-left h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin: 0 0 1rem;
  max-width: 460px;
}

.gnp-cred-left p {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.8;
  margin: 0 0 0.8rem;
}

.gnp-cred-download {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
  margin-top: 1.8rem;
  flex-wrap: wrap;
}

.gnp-cred-download > i {
  font-size: 1.4rem;
  color: var(--primary);
  flex-shrink: 0;
}

.gnp-cred-download > div {
  flex: 1;
  min-width: 160px;
}

.gnp-cred-download strong {
  font-size: 0.86rem;
  font-weight: 800;
  color: var(--dark);
  display: block;
  margin-bottom: 0.2rem;
}

.gnp-cred-download span {
  font-size: 0.74rem;
  color: var(--mid);
}

.gnp-cred-req-btn {
  display: inline-flex;
  align-items: center;
  background: var(--primary);
  color: white;
  font-size: 0.74rem;
  font-weight: 700;
  padding: 0.5rem 1.1rem;
  border-radius: 8px;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.18s;
  flex-shrink: 0;
}

.gnp-cred-req-btn:hover {
  opacity: 0.88;
  text-decoration: none;
  color: white;
}

/* Badge grid */
.gnp-badge-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
}

.gnp-badge-card {
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 1.3rem 1.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: box-shadow 0.2s, transform 0.2s;
}

.gnp-badge-card:hover {
  box-shadow: 0 6px 20px -6px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.gnp-badge-active {
  border-left: 3px solid #38a169;
}

.gnp-badge-icon {
  width: 34px;
  height: 34px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.9rem;
  color: var(--primary);
  margin-bottom: 0.2rem;
}

.gnp-badge-card strong {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--dark);
  display: block;
}

.gnp-badge-card span {
  font-size: 0.72rem;
  color: var(--mid);
  line-height: 1.5;
}

@media (max-width: 1100px) {
  .gnp-cred-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }

  .gnp-cred-left h2 {
    max-width: 100%;
  }
}

@media (max-width: 640px) {
  .gnp-credentials {
    padding: 60px 0 55px;
  }

  .gnp-badge-grid {
    grid-template-columns: 1fr;
  }
}


/* ══════════════════════════════════════════════════
   SECTION 4 — ORG TYPES (ACCORDION)
   ══════════════════════════════════════════════════ */

.gnp-orgtypes {
  padding: 90px 0 80px;
  background: var(--offwhite);
}

.gnp-orgtypes-head {
  margin-bottom: 3rem;
}

.gnp-orgtypes-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin: 0 auto;
  max-width: 700px;
}

.gnp-accordion {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.gnp-acc-item {
  border-bottom: 1px solid var(--border);
}

.gnp-acc-item:last-child {
  border-bottom: none;
}

.gnp-acc-trigger {
  width: 100%;
  background: white;
  border: none;
  padding: 1.5rem 1.8rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.18s;
}

.gnp-acc-trigger:hover {
  background: #fafcff;
}

.gnp-acc-item.gnp-acc-open .gnp-acc-trigger {
  background: #f4f8ff;
  border-bottom: 1px solid var(--border);
}

.gnp-acc-trigger-left {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex: 1;
}

.gnp-acc-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: white;
  flex-shrink: 0;
}

.gnp-acc-icon--navy   { background: linear-gradient(135deg, #0d1b2a, #1a3a5c); }
.gnp-acc-icon--teal   { background: linear-gradient(135deg, #0d4f6c, #1282a2); }
.gnp-acc-icon--green  { background: linear-gradient(135deg, #1a5a30, #27a860); }
.gnp-acc-icon--amber  { background: linear-gradient(135deg, #7b4700, #c06800); }
.gnp-acc-icon--purple { background: linear-gradient(135deg, #3d1a7a, #6a3ec2); }

.gnp-acc-trigger-left > div {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.gnp-acc-trigger-left strong {
  font-size: 0.96rem;
  font-weight: 800;
  color: var(--dark);
  display: block;
}

.gnp-acc-trigger-left span {
  font-size: 0.76rem;
  color: var(--muted);
}

.gnp-acc-chevron {
  font-size: 0.7rem;
  color: var(--muted);
  transition: transform 0.25s;
  flex-shrink: 0;
}

.gnp-acc-item.gnp-acc-open .gnp-acc-chevron {
  transform: rotate(180deg);
}

.gnp-acc-body {
  background: white;
}

.gnp-acc-body-inner {
  padding: 1.8rem 2rem 1.8rem 4rem;
}

.gnp-acc-body-inner p {
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.8;
  margin: 0 0 1.2rem;
  max-width: 680px;
}

.gnp-acc-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.gnp-acc-tags span {
  font-size: 0.7rem;
  font-weight: 700;
  background: var(--offwhite);
  border: 1px solid var(--border);
  padding: 0.28rem 0.7rem;
  border-radius: 20px;
  color: var(--dark);
}

@media (max-width: 768px) {
  .gnp-orgtypes {
    padding: 60px 0 55px;
  }

  .gnp-acc-trigger {
    padding: 1.2rem 1.2rem;
  }

  .gnp-acc-body-inner {
    padding: 1.4rem 1.2rem;
  }

  .gnp-orgtypes-head h2 {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .gnp-acc-icon {
    width: 36px;
    height: 36px;
    font-size: 0.85rem;
  }

  .gnp-acc-trigger-left strong {
    font-size: 0.86rem;
  }
}


/* ══════════════════════════════════════════════════
   SECTION 5 — IMPACT NUMBERS + PULL-QUOTES
   ══════════════════════════════════════════════════ */

.gnp-impact {
  padding: 90px 0 80px;
  background: white;
}

.gnp-impact-head {
  margin-bottom: 3.5rem;
}

.gnp-impact-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin: 0 auto;
  max-width: 560px;
}

.gnp-impact-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: start;
}

/* Stats */
.gnp-impact-stats {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
}

.gnp-impact-stat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid var(--border);
}

.gnp-impact-stat-row:last-child {
  border-bottom: none;
}

.gnp-impact-stat {
  padding: 1.8rem 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  border-right: 1px solid var(--border);
}

.gnp-impact-stat:last-child {
  border-right: none;
}

.gnp-impact-n {
  font-size: 2rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
  display: block;
}

.gnp-impact-l {
  font-size: 0.74rem;
  color: var(--mid);
  line-height: 1.5;
  display: block;
}

/* Quotes */
.gnp-impact-quotes {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.gnp-impact-quote {
  display: flex;
  gap: 1.2rem;
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 13px;
  padding: 1.6rem;
}

.gnp-impact-quote-bar {
  width: 4px;
  border-radius: 4px;
  flex-shrink: 0;
  align-self: stretch;
  min-height: 50px;
}

.gnp-bar-navy  { background: #1a3a5c; }
.gnp-bar-teal  { background: #1282a2; }
.gnp-bar-green { background: #27a860; }

.gnp-impact-quote-body p {
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.75;
  margin: 0 0 0.9rem;
  font-style: italic;
}

.gnp-impact-quote-attr strong {
  font-size: 0.82rem;
  font-weight: 800;
  color: var(--dark);
  display: block;
}

.gnp-impact-quote-attr span {
  font-size: 0.72rem;
  color: var(--muted);
}

@media (max-width: 1024px) {
  .gnp-impact-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

@media (max-width: 640px) {
  .gnp-impact {
    padding: 60px 0 55px;
  }

  .gnp-impact-n {
    font-size: 1.6rem;
  }

  .gnp-impact-stat {
    padding: 1.3rem 1.2rem;
  }

  .gnp-impact-head h2 {
    font-size: 1.5rem;
  }
}


/* ══════════════════════════════════════════════════
   GLOBAL RESPONSIVE
   ══════════════════════════════════════════════════ */

@media (max-width: 768px) {
  .gnp-challenges,
  .gnp-services,
  .gnp-credentials,
  .gnp-orgtypes,
  .gnp-impact {
    padding: 60px 0 55px;
  }
}

@media (max-width: 480px) {
  .gnp-challenges-intro h2,
  .gnp-services-head h2,
  .gnp-cred-left h2,
  .gnp-orgtypes-head h2,
  .gnp-impact-head h2 {
    font-size: 1.3rem;
  }
}
/* =============================================
   Blog / Resource Centre — blog.css
   ============================================= */

.blg-main {
  padding: 60px 0 90px;
  background: var(--offwhite);
}

/* ── Filter Tabs (No Search) ── */
.blg-filter-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 2.5rem;
  flex-wrap: wrap;
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.6rem;
}

.blg-filter-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  justify-content: center;
}

.blg-filter-tab {
  background: transparent;
  border: 1px solid transparent;
  border-radius: 8px;
  padding: 0.42rem 1.2rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--mid);
  cursor: pointer;
  transition: background 0.16s, color 0.16s, border-color 0.16s;
  white-space: nowrap;
}

.blg-filter-tab:hover {
  background: var(--offwhite);
  color: var(--dark);
}

.blg-filter-tab.active {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

/* ── Badges ── */
.blg-lms-badge {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.22rem 0.7rem;
  border-radius: 30px;
  white-space: nowrap;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.blg-badge-navy { color: var(--primary); background: var(--primary-lt); border: 1px solid var(--border); }
.blg-badge-teal { color: #0d4f6c; background: #e0f5f9; border: 1px solid #b8e2ed; }
.blg-badge-amber { color: #7b4700; background: #fff4e0; border: 1px solid #f5dca8; }
.blg-badge-purple { color: #3d1a7a; background: #f0ecff; border: 1px solid #d5caff; }
.blg-badge-green { color: #1a5a30; background: #e8f8ee; border: 1px solid #b8e8c9; }

/* ── Featured Article ── */
.blg-featured {
  display: grid;
  grid-template-columns: 320px 1fr;
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 3rem;
  transition: box-shadow 0.22s;
}

.blg-featured:hover {
  box-shadow: 0 12px 36px -10px rgba(0, 0, 0, 0.12);
}

.blg-featured-visual {
  background: linear-gradient(140deg, #0f2540 0%, #1a3a5c 50%, #1e4976 100%);
  padding: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 300px;
}

.blg-feat-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.blg-feat-label {
  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  background: #ffd700;
  color: #0f2540;
  padding: 0.2rem 0.6rem;
  border-radius: 30px;
}

.blg-feat-icons {
  display: flex;
  gap: 0.75rem;
  justify-content: center;
}

.blg-feat-icon-box {
  width: 52px;
  height: 52px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  color: rgba(168, 216, 234, 0.75);
}

.blg-feat-meta-bottom {
  display: flex;
  gap: 1rem;
}

.blg-feat-meta-bottom span {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.45);
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}

.blg-featured-body {
  padding: 2.2rem 2.4rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.blg-feat-author-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.blg-feat-author-row strong {
  font-size: 0.84rem;
  font-weight: 800;
  color: var(--dark);
  display: block;
}

.blg-feat-author-row span {
  font-size: 0.68rem;
  color: var(--muted);
}

.blg-featured-body h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.42;
  margin: 0;
}

.blg-featured-body p {
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.82;
  margin: 0;
}

.blg-feat-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
}

.blg-feat-tags span {
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-lt);
  border: 1px solid var(--border);
  padding: 0.22rem 0.75rem;
  border-radius: 30px;
}

/* ── Articles Section ── */
.blg-articles-full {
  margin-bottom: 3rem;
}

.blg-section-label {
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--muted);
  margin-bottom: 0;
  padding-bottom: 0.8rem;
  border-bottom: 2px solid var(--border);
}

.blg-article-list {
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  margin-top: 1.5rem;
}

.blg-row {
  display: grid;
  grid-template-columns: 180px 1fr;
  border-bottom: 1px solid var(--border);
  background: white;
  transition: background 0.18s;
  cursor: pointer;
}

.blg-row:last-child {
  border-bottom: none;
}

.blg-row:hover {
  background: var(--offwhite);
}

.blg-row-label {
  padding: 1.4rem 1.2rem;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  justify-content: center;
}

.blg-row-icon-wrap {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.22s;
}

.blg-row-icon-wrap i { font-size: 1rem; }

.blg-icon-navy { background: var(--primary-lt); }
.blg-icon-navy i { color: var(--primary); }
.blg-icon-teal { background: #e0f5f9; }
.blg-icon-teal i { color: #0d4f6c; }
.blg-icon-amber { background: #fff4e0; }
.blg-icon-amber i { color: #7b4700; }
.blg-icon-purple { background: #f0ecff; }
.blg-icon-purple i { color: #3d1a7a; }
.blg-icon-green { background: #e8f8ee; }
.blg-icon-green i { color: #1a5a30; }

.blg-row:hover .blg-icon-navy { background: var(--primary); }
.blg-row:hover .blg-icon-navy i { color: white; }
.blg-row:hover .blg-icon-teal { background: #0d4f6c; }
.blg-row:hover .blg-icon-teal i { color: white; }
.blg-row:hover .blg-icon-amber { background: #7b4700; }
.blg-row:hover .blg-icon-amber i { color: white; }
.blg-row:hover .blg-icon-purple { background: #3d1a7a; }
.blg-row:hover .blg-icon-purple i { color: white; }
.blg-row:hover .blg-icon-green { background: #1a5a30; }
.blg-row:hover .blg-icon-green i { color: white; }

.blg-row-cat {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}

.blg-row-time {
  font-size: 0.68rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.blg-row-detail {
  padding: 1.4rem 1.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.blg-row-detail h3 {
  font-size: 0.94rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.44;
  margin: 0;
}

.blg-row-detail p {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.75;
  margin: 0;
}

.blg-row-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 0.8rem;
  border-top: 1px solid var(--border);
  margin-top: auto;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.blg-author-mini {
  display: flex;
  align-items: center;
  gap: 0.45rem;
}

.blg-author-mini span {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--dark);
}

.blg-row-date {
  font-size: 0.68rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.blg-author-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  color: white;
  flex-shrink: 0;
}

.blg-av-blue { background: linear-gradient(135deg, #1a3a5c, #2c5f9e); }
.blg-av-teal { background: linear-gradient(135deg, #0d4f6c, #1282a2); }
.blg-av-green { background: linear-gradient(135deg, #1a5a30, #27a860); }
.blg-av-amber { background: linear-gradient(135deg, #7b4700, #c06800); }
.blg-av-purple { background: linear-gradient(135deg, #3d1a7a, #6a3ec2); }

/* ── Extras Section (Most Read + Our Authors - New Design, No Sidebar) ── */
.blg-extras {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.8rem;
  margin-top: 1rem;
}

.blg-extras-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.6rem;
  transition: box-shadow 0.22s;
}

.blg-extras-card:hover {
  box-shadow: 0 8px 24px -8px rgba(0, 0, 0, 0.1);
}

.blg-extras-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.4rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--border);
}

.blg-extras-icon {
  width: 40px;
  height: 40px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--primary);
  font-size: 1rem;
}

.blg-extras-header h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
}

/* Most Read List */
.blg-extras-list {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.blg-extras-item {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.9rem 0;
  border-bottom: 1px solid var(--border);
  text-decoration: none;
  transition: padding 0.18s;
}

.blg-extras-item:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.blg-extras-item:hover {
  padding-left: 0.5rem;
}

.blg-extras-rank {
  width: 28px;
  height: 28px;
  background: var(--offwhite);
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 800;
  color: var(--primary);
  flex-shrink: 0;
}

.blg-extras-content {
  flex: 1;
}

.blg-extras-content strong {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--dark);
  display: block;
  margin-bottom: 0.2rem;
  line-height: 1.4;
  transition: color 0.18s;
}

.blg-extras-item:hover .blg-extras-content strong {
  color: var(--primary);
}

.blg-extras-content span {
  font-size: 0.66rem;
  color: var(--muted);
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.blg-extras-arrow {
  font-size: 0.7rem;
  color: var(--muted);
  opacity: 0;
  transition: opacity 0.18s, transform 0.18s;
}

.blg-extras-item:hover .blg-extras-arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* Authors Grid */
.blg-authors-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 1rem;
}

.blg-author-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.5rem 0;
}

.blg-author-card .blg-author-avatar {
  width: 44px;
  height: 44px;
  font-size: 1rem;
}

.blg-author-card strong {
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--dark);
  display: block;
  line-height: 1.3;
  margin-bottom: 0.2rem;
}

.blg-author-card span {
  font-size: 0.7rem;
  color: var(--muted);
}

/* No Results */
.blg-no-results {
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3rem 2rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  gap: 0.5rem;
  margin-top: 1.5rem;
  display: flex;
}

.blg-no-icon {
  width: 54px;
  height: 54px;
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.4rem;
}

.blg-no-icon i { font-size: 1.1rem; color: var(--muted); }

.blg-no-results p {
  font-size: 0.94rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
}

.blg-clear-btn {
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.52rem 1.3rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  margin-top: 0.5rem;
}

.blg-clear-btn:hover { opacity: 0.85; }

/* Responsive */
@media (max-width: 900px) {
  .blg-featured { grid-template-columns: 1fr; }
  .blg-featured-visual { min-height: 180px; }
  .blg-extras { grid-template-columns: 1fr; gap: 1.5rem; }
}

@media (max-width: 768px) {
  .blg-main { padding: 40px 0 70px; }
  .blg-filter-bar { padding: 0.8rem; }
  .blg-filter-tabs { overflow-x: auto; flex-wrap: nowrap; justify-content: flex-start; }
  .blg-filter-tab { flex-shrink: 0; }
  .blg-row { grid-template-columns: 1fr; }
  .blg-row-label { border-right: none; border-bottom: 1px solid var(--border); flex-direction: row; padding: 1rem; }
  .blg-row-detail { padding: 1rem; }
}

@media (max-width: 480px) {
  .blg-featured-body { padding: 1.5rem; }
  .blg-featured-body h2 { font-size: 1.1rem; }
  .blg-extras-card { padding: 1.2rem; }
}
/* =============================================
   Contact Sales Page Styles
   ============================================= */

.cs-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1.2rem;
  display: block;
}

/* ── MAIN SPLIT ── */
.csales-main {
  padding: 70px 0 80px;
  background: var(--offwhite);
}

.csales-grid {
  display: grid;
  grid-template-columns: 360px 1fr;
  gap: 2.5rem;
  align-items: start;
}

/* ── SIDEBAR ── */
.csales-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  position: sticky;
  top: 100px;
}

.csales-sidebar-block {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.8rem;
}

/* Process steps */
.csales-process {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 1.2rem;
}

.csales-process-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding-bottom: 1.4rem;
  position: relative;
}

.csales-process-item:last-child {
  padding-bottom: 0;
}

.csales-process-item:not(:last-child)::after {
  content: '';
  position: absolute;
  left: 15px;
  top: 32px;
  bottom: 0;
  width: 1px;
  background: var(--border);
}

.csales-process-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--primary-lt);
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.csales-process-dot span {
  font-size: 0.65rem;
  font-weight: 800; 
  color: var(--primary);
}

.csales-process-text strong {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--dark);
  display: block;
  margin-bottom: 0.3rem;
  line-height: 1.3;
}

.csales-process-text p {
  font-size: 0.76rem;
  color: var(--mid);
  line-height: 1.6;
  margin: 0;
}

/* Contact rows */
.csales-sidebar-contact {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.csales-contact-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  padding: 0.9rem 1rem;
  border-radius: 12px;
  border: 1px solid var(--border);
  transition: border-color 0.2s, background 0.2s;
}

.csales-contact-row:hover {
  border-color: var(--primary);
  background: var(--primary-lt);
}

.csales-contact-icon {
  width: 38px;
  height: 38px;
  background: var(--primary-lt);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.csales-contact-icon i {
  font-size: 0.9rem;
  color: var(--primary);
}

.csales-contact-row span {
  font-size: 0.68rem;
  color: var(--muted);
  display: block;
  margin-bottom: 0.1rem;
}

.csales-contact-row strong {
  font-size: 0.8rem;
  color: var(--dark);
  display: block;
  font-weight: 600;
}

/* Trust badges */
.csales-trust {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  background: var(--offwhite) !important;
}

.csales-trust-item {
  font-size: 0.74rem;
  color: var(--mid);
  display: flex;
  align-items: center;
  gap: 0.6rem;
  line-height: 1.4;
}

.csales-trust-item i {
  color: var(--primary);
  font-size: 0.75rem;
  flex-shrink: 0;
}

/* ── FORM PANEL ── */
.csales-form-panel {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.5rem;
}

.csales-form-header {
  margin-bottom: 2rem;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border);
}

.csales-form-header h2 {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

.csales-form-header p {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0;
}

.csales-form-header a {
  color: var(--primary);
  text-decoration: none;
}

.csales-form-header a:hover {
  text-decoration: underline;
}

/* Fieldsets */
.csales-fieldset {
  margin-bottom: 2rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--border);
}

.csales-fieldset legend {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1.2rem;
  display: block;
  width: 100%;
}

.csales-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.csales-field {
  margin-bottom: 1rem;
}

.csales-field:last-child {
  margin-bottom: 0;
}

.csales-field label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dark);
  display: block;
  margin-bottom: 0.45rem;
}

.csales-field input,
.csales-field select,
.csales-field textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  font-size: 0.82rem;
  color: var(--dark);
  background: var(--offwhite);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  font-family: inherit;
  appearance: none;
}

.csales-field input:focus,
.csales-field select:focus,
.csales-field textarea:focus {
  border-color: var(--primary);
  background: white;
}

.csales-field select {
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
}

.csales-field textarea {
  resize: vertical;
  min-height: 130px;
}

.csales-field input::placeholder,
.csales-field textarea::placeholder {
  color: var(--muted);
}

/* =============================================
   REDESIGNED CONSENT CHECKBOX
   ============================================= */

/* Hide the native checkbox completely but keep it accessible */
.csales-consent-block {
  margin-bottom: 1.5rem;
  display: flex;
  align-items: flex-start;
}

.csales-consent-block input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}

/* The label becomes the full clickable area */
.csales-consent-label {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  cursor: pointer;
  user-select: none;
  line-height: 1;
}

/* Custom checkbox box */
.csales-consent-box {
  width: 20px;
  height: 20px;
  min-width: 20px;
  min-height: 20px;
  border: 2px solid var(--border);
  border-radius: 5px;
  background: var(--offwhite);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: border-color 0.18s, background 0.18s, box-shadow 0.18s;
  position: relative;
}

/* Tick icon — hidden by default */
.csales-consent-tick {
  width: 12px;
  height: 10px;
  opacity: 0;
  transform: scale(0.5);
  transition: opacity 0.15s ease, transform 0.15s ease;
}

/* Hover state on the box */
.csales-consent-label:hover .csales-consent-box {
  border-color: var(--primary);
  background: var(--primary-lt);
}

/* Checked state — triggered when native checkbox is checked */
.csales-consent-block input[type="checkbox"]:checked + .csales-consent-label .csales-consent-box {
  background: var(--primary);
  border-color: var(--primary);
  box-shadow: 0 2px 8px rgba(var(--primary-rgb, 0, 90, 200), 0.25);
}

.csales-consent-block input[type="checkbox"]:checked + .csales-consent-label .csales-consent-tick {
  opacity: 1;
  transform: scale(1);
}

/* Focus ring for keyboard accessibility */
.csales-consent-block input[type="checkbox"]:focus-visible + .csales-consent-label .csales-consent-box {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Text beside the checkbox */
.csales-consent-text {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.55;
}

.csales-consent-text a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.csales-consent-text a:hover {
  text-decoration: underline;
}

.csales-required-star {
  color: var(--primary);
  font-weight: 700;
}

/* =============================================
   END REDESIGNED CONSENT CHECKBOX
   ============================================= */

/* Submit button */
.csales-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 0.85rem 2rem;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  font-family: inherit;
}

.csales-submit:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

/* ── SERVICES QUICK LINKS ── */
.csales-services {
  padding: 80px 0;
  background: white;
}

.csales-services-header {
  max-width: 620px;
  margin: 0 auto 3rem;
}

.csales-services-header h2 {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0;
}

.csales-services-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.2rem;
}

.csales-service-card {
  display: flex;
  flex-direction: column;
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.8rem 1.5rem;
  text-decoration: none;
  transition: border-color 0.25s, transform 0.25s, box-shadow 0.25s;
}

.csales-service-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 12px 28px rgba(0,0,0,0.07);
}

.csales-service-icon {
  width: 46px;
  height: 46px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 1.1rem;
}

.csales-service-icon i {
  font-size: 1.1rem;
  color: var(--primary);
}

.csales-service-card h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.6rem;
  line-height: 1.3;
}

.csales-service-card p {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.65;
  margin: 0 0 1.2rem;
  flex: 1;
}

.csales-service-link {
  font-size: 0.74rem;
  font-weight: 700;
  color: var(--primary);
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: auto;
}

.csales-service-link i {
  font-size: 0.65rem;
  transition: transform 0.2s;
}

.csales-service-card:hover .csales-service-link i {
  transform: translateX(3px);
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .csales-grid {
    grid-template-columns: 300px 1fr;
  }
  .csales-services-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 900px) {
  .csales-grid {
    grid-template-columns: 1fr;
  }
  .csales-sidebar {
    position: static;
  }
}

@media (max-width: 600px) {
  .csales-row-2 {
    grid-template-columns: 1fr;
  }
  .csales-form-panel {
    padding: 1.5rem;
  }
  .csales-services-grid {
    grid-template-columns: 1fr;
  }
}

/* =============================================
   Contact Support Page Styles
   ============================================= */

.sup-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1rem;
  display: block;
}

/* ── CATEGORY PICKER ── */
.sup-picker {
  padding: 60px 0 50px;
  background: white;
}

.sup-picker-label {
  margin-bottom: 2rem;
}

.sup-picker-grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 1rem;
}

.sup-picker-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.7rem;
  padding: 1.6rem 1rem;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: var(--offwhite);
  text-decoration: none;
  transition: border-color 0.22s, transform 0.22s, box-shadow 0.22s;
}

.sup-picker-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 10px 24px rgba(0,0,0,0.07);
}

.sup-picker-icon {
  width: 52px;
  height: 52px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sup-picker-icon i {
  font-size: 1.2rem;
  color: var(--primary);
}

.sup-picker-card strong {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.3;
  display: block;
}

.sup-picker-card span {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.5;
  display: block;
}

/* ── FAQ SECTION ── */
.sup-faq {
  padding: 70px 0;
  background: var(--offwhite);
}

.sup-faq-inner {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 4rem;
  align-items: start;
}

.sup-faq-header {
  position: sticky;
  top: 100px;
}

.sup-faq-header h2 {
  font-size: 1.75rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.25;
  margin-bottom: 1rem;
}

.sup-faq-header p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.72;
  margin: 0;
}

.sup-faq-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  background: white;
}

.sup-faq-item {
  border-bottom: 1px solid var(--border);
}

.sup-faq-item:last-child {
  border-bottom: none;
}

.sup-faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.3rem 1.8rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.2s;
}

.sup-faq-q:hover {
  background: var(--offwhite);
}

.sup-faq-q span {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.4;
}

.sup-faq-q i {
  font-size: 0.7rem;
  color: var(--primary);
  flex-shrink: 0;
  transition: transform 0.25s;
}

.sup-faq-item--open .sup-faq-q i {
  transform: rotate(180deg);
}

.sup-faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease, padding 0.25s ease;
}

.sup-faq-item--open .sup-faq-a {
  max-height: 400px;
}

.sup-faq-a p {
  font-size: 0.81rem;
  color: var(--mid);
  line-height: 1.78;
  margin: 0;
  padding: 0 1.8rem 1.5rem;
}

/* ── TICKET SECTION ── */
.sup-ticket {
  padding: 80px 0;
  background: white;
}

.sup-ticket-grid {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 3rem;
  align-items: start;
}

.sup-ticket-header {
  margin-bottom: 2rem;
}

.sup-ticket-header h2 {
  font-size: 1.7rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

.sup-ticket-header p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.7;
  margin: 0;
}

.sup-ticket-header a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.sup-ticket-header a:hover {
  text-decoration: underline;
}

/* Form */
.sup-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sup-form-row-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}

.sup-form-field {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.sup-form-field label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dark);
}

.sup-form-field input,
.sup-form-field select,
.sup-form-field textarea {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  font-size: 0.82rem;
  color: var(--dark);
  background: var(--offwhite);
  outline: none;
  transition: border-color 0.2s, background 0.2s;
  font-family: inherit;
  appearance: none;
}

.sup-form-field input:focus,
.sup-form-field select:focus,
.sup-form-field textarea:focus {
  border-color: var(--primary);
  background: white;
}

.sup-form-field select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.sup-form-field textarea {
  resize: vertical;
  min-height: 130px;
}

.sup-form-field input::placeholder,
.sup-form-field textarea::placeholder {
  color: var(--muted);
}

.sup-submit {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--primary);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 0.85rem 2rem;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
  font-family: inherit;
  width: fit-content;
  margin-top: 0.5rem;
}

.sup-submit:hover {
  background: var(--primary-dark);
  transform: translateY(-1px);
}

/* Sidebar cards */
.sup-ticket-sidebar {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  position: sticky;
  top: 100px;
}

.sup-sla-card,
.sup-hours-card,
.sup-direct-card {
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 1.5rem;
}

.sup-sla-card h4,
.sup-hours-card h4 {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 1.1rem;
}

.sup-sla-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid var(--border);
}

.sup-sla-row:last-child {
  border-bottom: none;
}

.sup-sla-badge {
  font-size: 0.6rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 0.2rem 0.6rem;
  border-radius: 20px;
  white-space: nowrap;
  flex-shrink: 0;
}

.sup-sla-badge--fast {
  background: #dcfce7;
  color: #16a34a;
}

.sup-sla-badge--standard {
  background: var(--primary-lt);
  color: var(--primary);
}

.sup-sla-badge--general {
  background: var(--offwhite);
  color: var(--mid);
  border: 1px solid var(--border);
}

.sup-sla-row strong {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--dark);
  display: block;
  line-height: 1.3;
}

.sup-sla-row span {
  font-size: 0.7rem;
  color: var(--muted);
  display: block;
}

.sup-hours-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
}

.sup-hours-row:last-of-type {
  border-bottom: none;
}

.sup-hours-row span {
  font-size: 0.76rem;
  color: var(--mid);
}

.sup-hours-row strong {
  font-size: 0.76rem;
  color: var(--dark);
  font-weight: 600;
}

.sup-hours-note {
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.55;
  margin: 1rem 0 0;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.sup-direct-card p {
  font-size: 0.74rem;
  color: var(--muted);
  line-height: 1.6;
  margin: 0.7rem 0 0;
}

.sup-direct-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  margin-top: 0.7rem;
}

.sup-direct-link i {
  font-size: 0.85rem;
}

.sup-direct-link:hover {
  text-decoration: underline;
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .sup-picker-grid {
    grid-template-columns: repeat(3, 1fr);
  }
  .sup-faq-inner {
    grid-template-columns: 260px 1fr;
    gap: 2.5rem;
  }
  .sup-ticket-grid {
    grid-template-columns: 1fr 300px;
  }
}

@media (max-width: 900px) {
  .sup-faq-inner {
    grid-template-columns: 1fr;
  }
  .sup-faq-header {
    position: static;
  }
  .sup-ticket-grid {
    grid-template-columns: 1fr;
  }
  .sup-ticket-sidebar {
    position: static;
  }
}

@media (max-width: 640px) {
  .sup-picker-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .sup-form-row-2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 420px) {
  .sup-picker-grid {
    grid-template-columns: 1fr;
  }
}
/* =============================================
   Refund & Cancellation Policy Page Styles
   ============================================= */

/* ── META BAR ── */
.rcp-meta-bar {
  background: white;
  border-bottom: 1px solid var(--border);
  padding: 1rem 0;
}

.rcp-meta-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
  flex-wrap: wrap;
}

.rcp-meta-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.76rem;
  color: var(--muted);
}

.rcp-meta-item i {
  color: var(--primary);
  font-size: 0.8rem;
}

.rcp-meta-item strong {
  color: var(--dark);
  font-weight: 600;
}

.rcp-meta-cta {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--primary);
  color: white;
  text-decoration: none;
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.55rem 1.2rem;
  border-radius: 8px;
  white-space: nowrap;
  transition: background 0.2s;
}

.rcp-meta-cta:hover {
  background: var(--primary-dark);
  color: white;
}

/* ── MAIN LAYOUT ── */
.rcp-body {
  padding: 60px 0 80px;
  background: var(--offwhite);
}

.rcp-layout {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 3rem;
  align-items: start;
}

/* ── STICKY NAV ── */
.rcp-nav {
  position: sticky;
  top: 100px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.4rem;
}

.rcp-nav-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--border);
}

.rcp-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.rcp-nav-link {
  display: block;
  font-size: 0.76rem;
  color: var(--mid);
  text-decoration: none;
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  transition: background 0.2s, color 0.2s;
  line-height: 1.35;
}

.rcp-nav-link:hover {
  background: var(--offwhite);
  color: var(--dark);
}

.rcp-nav-link.active {
  background: var(--primary-lt);
  color: var(--primary);
  font-weight: 600;
}

/* ── CONTENT SECTIONS ── */
.rcp-content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.rcp-section {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.5rem;
  margin-bottom: 1.5rem;
  scroll-margin-top: 110px;
}

.rcp-section:last-child {
  margin-bottom: 0;
}

.rcp-section h2 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 1rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--border);
  line-height: 1.3;
}

.rcp-section > p {
  font-size: 0.83rem;
  color: var(--mid);
  line-height: 1.8;
  margin-bottom: 1rem;
}

.rcp-section > p:last-child {
  margin-bottom: 0;
}

/* Callouts */
.rcp-callout {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  padding: 1.1rem 1.3rem;
  border-radius: 12px;
  margin-top: 1.5rem;
  font-size: 0.8rem;
  line-height: 1.65;
}

.rcp-callout i {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 1px;
}

.rcp-callout strong {
  display: block;
  margin-bottom: 0.3rem;
  font-size: 0.82rem;
}

.rcp-callout div {
  color: var(--mid);
}

.rcp-callout a {
  color: inherit;
  font-weight: 600;
  text-decoration: underline;
}

.rcp-callout--info {
  background: var(--primary-lt);
  border: 1px solid var(--border);
}

.rcp-callout--info i {
  color: var(--primary);
}

.rcp-callout--info strong {
  color: var(--primary);
}

.rcp-callout--warning {
  background: #fffbeb;
  border: 1px solid #fde68a;
}

.rcp-callout--warning i {
  color: #d97706;
}

.rcp-callout--warning strong {
  color: #92400e;
}

/* Tables */
.rcp-table-wrap {
  margin-top: 1.5rem;
  overflow-x: auto;
  border-radius: 12px;
  border: 1px solid var(--border);
}

.rcp-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.79rem;
}

.rcp-table thead {
  background: var(--offwhite);
}

.rcp-table th {
  padding: 0.85rem 1.2rem;
  text-align: left;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
}

.rcp-table td {
  padding: 0.9rem 1.2rem;
  color: var(--mid);
  border-bottom: 1px solid var(--border);
  line-height: 1.5;
  vertical-align: top;
}

.rcp-table tr:last-child td {
  border-bottom: none;
}

.rcp-table tbody tr:hover td {
  background: var(--offwhite);
}

/* Badges */
.rcp-badge {
  font-size: 0.65rem;
  font-weight: 700;
  padding: 0.2rem 0.7rem;
  border-radius: 20px;
  display: inline-block;
  white-space: nowrap;
}

.rcp-badge--yes {
  background: #dcfce7;
  color: #15803d;
}

.rcp-badge--partial {
  background: #fef9c3;
  color: #854d0e;
}

.rcp-badge--no {
  background: #fee2e2;
  color: #b91c1c;
}

/* Refund Windows Grid */
.rcp-windows-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
  margin-top: 1.5rem;
}

.rcp-window-card {
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 1.5rem 1.3rem;
}

.rcp-window-card--green {
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.rcp-window-card--amber {
  background: #fffbeb;
  border-color: #fde68a;
}

.rcp-window-card--grey {
  background: var(--offwhite);
  border-color: var(--border);
}

.rcp-window-days {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--dark);
  margin-bottom: 0.5rem;
  line-height: 1;
}

.rcp-window-card--green .rcp-window-days { color: #15803d; }
.rcp-window-card--amber .rcp-window-days { color: #d97706; }
.rcp-window-card--grey .rcp-window-days { color: var(--mid); }

.rcp-window-card h4 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.5rem;
  line-height: 1.3;
}

.rcp-window-card p {
  font-size: 0.77rem;
  color: var(--mid);
  line-height: 1.6;
  margin: 0;
}

/* Non-refundable list */
.rcp-ineligible-list {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  margin-top: 1rem;
}

.rcp-ineligible-item {
  display: flex;
  gap: 1.1rem;
  align-items: flex-start;
  padding: 1.2rem 1.4rem;
  border-bottom: 1px solid var(--border);
  background: white;
}

.rcp-ineligible-item:last-child {
  border-bottom: none;
}

.rcp-ineligible-icon {
  width: 28px;
  height: 28px;
  background: #fee2e2;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}

.rcp-ineligible-icon i {
  font-size: 0.65rem;
  color: #b91c1c;
}

.rcp-ineligible-item strong {
  font-size: 0.83rem;
  font-weight: 700;
  color: var(--dark);
  display: block;
  margin-bottom: 0.3rem;
  line-height: 1.3;
}

.rcp-ineligible-item p {
  font-size: 0.77rem;
  color: var(--mid);
  line-height: 1.6;
  margin: 0;
}

/* Prose list */
.rcp-prose-list {
  padding-left: 1.2rem;
  margin: 1rem 0 0;
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.rcp-prose-list li {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.75;
}

.rcp-prose-list li a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.rcp-prose-list li a:hover {
  text-decoration: underline;
}

/* Refund process steps */
.rcp-process-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 1.5rem;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}

.rcp-process-step {
  display: flex;
  gap: 1.3rem;
  align-items: flex-start;
  padding: 1.4rem 1.6rem;
  border-bottom: 1px solid var(--border);
  background: white;
}

.rcp-process-step:last-child {
  border-bottom: none;
}

.rcp-process-num {
  width: 32px;
  height: 32px;
  background: var(--primary);
  border-radius: 50%;
  color: white;
  font-size: 0.72rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.rcp-process-body h5 {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.rcp-process-body p {
  font-size: 0.79rem;
  color: var(--mid);
  line-height: 1.7;
  margin: 0;
}

.rcp-process-body a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.rcp-process-body a:hover {
  text-decoration: underline;
}

/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .rcp-layout {
    grid-template-columns: 190px 1fr;
    gap: 2rem;
  }
}

@media (max-width: 900px) {
  .rcp-layout {
    grid-template-columns: 1fr;
  }
  .rcp-nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
  }
  .rcp-nav ul {
    flex-direction: row;
    flex-wrap: wrap;
  }
  .rcp-windows-grid {
    grid-template-columns: 1fr;
  }
  .rcp-meta-cta {
    margin-left: 0;
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 640px) {
  .rcp-section {
    padding: 1.5rem;
  }
  .rcp-meta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.8rem;
  }
}
/* =============================================
   FAQ Page Styles
   ============================================= */


/* ── AUDIENCE TABS BAR ── */
.faq-tabs-bar {
  background: white;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  z-index: 100;
}

.faq-tabs {
  display: flex;
  justify-content: center;
  gap: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}

.faq-tabs::-webkit-scrollbar {
  display: none;
}

.faq-tab {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 1rem 1.5rem;
  background: none;
  border: none;
  border-bottom: 3px solid transparent;
  font-size: 0.83rem;
  font-weight: 600;
  color: var(--muted);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.2s, border-color 0.2s;
  font-family: inherit;
}

.faq-tab i {
  font-size: 0.85rem;
}

.faq-tab:hover {
  color: var(--dark);
}

.faq-tab--active {
  color: var(--primary);
  border-bottom-color: var(--primary);
}

.faq-tab-count {
  font-size: 0.65rem;
  font-weight: 700;
  background: var(--primary-lt);
  color: var(--primary);
  border-radius: 20px;
  padding: 0.12rem 0.55rem;
  min-width: 22px;
  text-align: center;
}

.faq-tab--active .faq-tab-count {
  background: var(--primary);
  color: white;
}


/* ── PAGE BODY ── */
.faq-body {
  padding: 50px 0 80px;
  background: var(--offwhite);
}

.faq-layout {
  display: grid;
  grid-template-columns: 210px 1fr;
  gap: 2.5rem;
  align-items: start;
}


/* ── CATEGORY NAV ── */
.faq-cat-nav {
  position: sticky;
  top: 72px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.3rem;
}

.faq-cat-nav-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--muted);
  display: block;
  margin-bottom: 0.9rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--border);
}

.faq-cat-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}

.faq-cat-link {
  display: block;
  font-size: 0.76rem;
  color: var(--mid);
  text-decoration: none;
  padding: 0.42rem 0.65rem;
  border-radius: 8px;
  line-height: 1.35;
  transition: background 0.18s, color 0.18s;
}

.faq-cat-link:hover {
  background: var(--offwhite);
  color: var(--dark);
}

.faq-cat-link--active {
  background: var(--primary-lt);
  color: var(--primary);
  font-weight: 600;
}


/* ── FAQ GROUPS ── */
.faq-main-col {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.faq-group {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  scroll-margin-top: 120px;
}

.faq-group-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.5rem 2rem;
  border-bottom: 1px solid var(--border);
  background: white;
}

.faq-group-icon {
  width: 44px;
  height: 44px;
  background: var(--primary-lt);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.faq-group-icon i {
  font-size: 1rem;
  color: var(--primary);
}

.faq-group-header h2 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
  line-height: 1.2;
}


/* ── ACCORDION ITEMS ── */
.faq-accordion {
  display: flex;
  flex-direction: column;
}

.faq-item {
  border-bottom: 1px solid var(--border);
}

.faq-item:last-child {
  border-bottom: none;
}

.faq-q {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.2rem;
  padding: 1.15rem 2rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: background 0.18s;
}

.faq-q:hover {
  background: var(--offwhite);
}

.faq-q span {
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.45;
}

.faq-q i {
  font-size: 0.65rem;
  color: var(--primary);
  flex-shrink: 0;
  transition: transform 0.25s, color 0.2s;
  width: 20px;
  height: 20px;
  background: var(--primary-lt);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-item--open .faq-q i {
  transform: rotate(45deg);
  background: var(--primary);
  color: white;
}

/* Answer panel */
.faq-a {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.38s cubic-bezier(0.4, 0, 0.2, 1);
}

.faq-item--open .faq-a {
  max-height: 600px;
}

.faq-a p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.82;
  margin: 0;
  padding: 0.2rem 2rem 1.5rem;
}

.faq-a a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.faq-a a:hover {
  text-decoration: underline;
}

.faq-a strong {
  color: var(--dark);
}


/* ── NO RESULTS ── */
.faq-no-results {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 4rem 2rem;
  text-align: center;
}

.faq-no-results i {
  font-size: 2rem;
  color: var(--border);
  display: block;
  margin-bottom: 1rem;
}

.faq-no-results h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

.faq-no-results p {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.6;
}

.faq-no-results a {
  color: var(--primary);
  font-weight: 600;
  text-decoration: none;
}

.faq-no-results a:hover {
  text-decoration: underline;
}


/* ── BOTTOM CTA ROW ── */
.faq-cta-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.2rem;
}

.faq-cta-card {
  border-radius: 20px;
  padding: 2rem 1.5rem;
  border: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.faq-cta-card--learner {
  background: #eff6ff;
  border-color: #bfdbfe;
}

.faq-cta-card--sales {
  background: var(--primary-lt);
  border-color: var(--border);
}

.faq-cta-card--policy {
  background: var(--offwhite);
  border-color: var(--border);
}

.faq-cta-icon {
  width: 44px;
  height: 44px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.4rem;
}

.faq-cta-card--learner .faq-cta-icon i { color: var(--primary); font-size: 1rem; }
.faq-cta-card--sales   .faq-cta-icon i { color: var(--primary); font-size: 1rem; }
.faq-cta-card--policy  .faq-cta-icon i { color: var(--primary); font-size: 1rem; }

.faq-cta-card h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
  line-height: 1.2;
}

.faq-cta-card p {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.65;
  margin: 0;
  flex: 1;
}

.faq-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  margin-top: 0.4rem;
  transition: gap 0.2s;
}

.faq-cta-btn i {
  font-size: 0.65rem;
  transition: transform 0.2s;
}

.faq-cta-btn:hover i {
  transform: translateX(3px);
}


/* ── RESPONSIVE ── */
@media (max-width: 1100px) {
  .faq-layout {
    grid-template-columns: 180px 1fr;
  }
}

@media (max-width: 900px) {
  .faq-layout {
    grid-template-columns: 1fr;
  }

  .faq-cat-nav {
    position: static;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
    padding: 1rem;
  }

  .faq-cat-nav ul {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 0.4rem;
  }

  .faq-cat-link {
    background: var(--offwhite);
    border: 1px solid var(--border);
    border-radius: 20px;
    padding: 0.3rem 0.8rem;
    font-size: 0.72rem;
  }
}

@media (max-width: 700px) {
  .faq-cta-row {
    grid-template-columns: 1fr;
  }

  .faq-group-header {
    padding: 1.2rem 1.4rem;
  }

  .faq-q {
    padding: 1rem 1.4rem;
  }

  .faq-a p {
    padding: 0.2rem 1.4rem 1.2rem;
  }
}

@media (max-width: 480px) {
  .faq-tabs {
    gap: 0;
  }
  .faq-tab {
    padding: 0.9rem 1rem;
    font-size: 0.78rem;
  }
}
/* =============================================
   Short-Term & Skill Development Page — Styles
   ============================================= */

:root {
  --primary: #2C5282;
  --primary-dark: #1A3A5F;
  --primary-lt: #EFF4FA;
  --dark: #1A2C3E;
  --mid: #4A5B6E;
  --muted: #8A99AE;
  --border: #E9EDF2;
  --offwhite: #F8FAFE;
}

/* =============================================
   SHARED ELEMENTS
   ============================================= */
.sk-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 1rem;
  display: block;
}

.sk-section-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.5rem;
}

.sk-section-sub {
  font-size: 0.88rem;
  color: var(--muted);
  margin-bottom: 0;
}

.sk-body-text {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.8;
  margin-bottom: 1rem;
}

/* =============================================
   IMPACT CARD (New embedded design)
   ============================================= */
.sk-impact-card {
  background: linear-gradient(135deg, var(--primary-dark) 0%, var(--primary) 100%);
  border-radius: 24px;
  margin-bottom: 3rem;
  overflow: hidden;
  box-shadow: 0 12px 30px -8px rgba(44, 82, 130, 0.25);
}

.sk-impact-inner {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  padding: 1.5rem 0;
}

.sk-impact-block {
  text-align: center;
  border-right: 1px solid rgba(255, 255, 255, 0.15);
}

.sk-impact-block:last-child {
  border-right: none;
}

.sk-impact-val {
  font-size: 2rem;
  font-weight: 800;
  color: #A8D8EA;
  line-height: 1.2;
  margin-bottom: 4px;
}

.sk-impact-label {
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* =============================================
   SECTION 1 — SKILL TRACKS
   ============================================= */
.sk-tracks {
  padding: 80px 0;
  /*background: #f8fafe;*/
}

.sk-tracks-header {
  max-width: 680px;
  margin: 0 auto 3rem;
}

.sk-tracks-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

.sk-track-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 1.8rem;
  display: flex;
  flex-direction: column;
  transition: all 0.3s ease;
}

.sk-track-card:hover {
  transform: translateY(-5px);
  border-color: var(--primary);
  box-shadow: 0 16px 32px -10px rgba(44, 82, 130, 0.1);
}

.sk-track-featured {
  background: var(--primary);
  border-color: var(--primary);
}

.sk-track-featured h3,
.sk-track-featured p,
.sk-track-featured .sk-track-meta span,
.sk-track-featured .sk-track-list li {
  color: rgba(255, 255, 255, 0.9);
}

.sk-track-featured .sk-track-icon {
  background: rgba(255, 255, 255, 0.15);
}

.sk-track-featured .sk-track-icon i {
  color: white;
}

.sk-track-featured .sk-track-meta {
  border-color: rgba(255, 255, 255, 0.15);
}

.sk-track-featured:hover {
  transform: translateY(-5px);
  box-shadow: 0 16px 32px -10px rgba(26, 58, 95, 0.35);
}

.sk-track-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.2rem;
}

.sk-track-icon {
  width: 50px;
  height: 50px;
  background: var(--primary-lt);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.sk-track-icon i {
  font-size: 1.4rem;
  color: var(--primary);
}

.sk-track-label {
  font-size: 0.65rem;
  font-weight: 700;
  color: #A8D8EA;
  background: rgba(255, 255, 255, 0.15);
  padding: 0.25rem 0.7rem;
  border-radius: 20px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sk-track-card h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.6rem;
}

.sk-track-card p {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.6;
  margin-bottom: 1rem;
  flex: 1;
}

.sk-track-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.sk-track-list li {
  font-size: 0.76rem;
  color: var(--mid);
  padding-left: 1.2rem;
  position: relative;
}

.sk-track-list li::before {
  content: '—';
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: 700;
}

.sk-track-featured .sk-track-list li::before {
  color: #A8D8EA;
}

.sk-track-meta {
  display: flex;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  margin-bottom: 1.2rem;
}

.sk-track-meta span {
  font-size: 0.7rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}

.sk-track-meta i {
  color: var(--primary);
}

.sk-track-featured .sk-track-meta i {
  color: #A8D8EA;
}

.sk-track-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-lt);
  padding: 0.55rem 1.1rem;
  border-radius: 30px;
  text-decoration: none;
  transition: all 0.25s ease;
  align-self: flex-start;
}

.sk-track-cta:hover {
  background: var(--primary);
  color: white;
}

.sk-track-cta-primary {
  background: white;
  color: var(--primary);
}

.sk-track-cta-primary:hover {
  background: rgba(255, 255, 255, 0.9);
  color: var(--primary-dark);
}

/* =============================================
   SECTION 2 — FEATURED COURSES TABLE
   ============================================= */
.sk-featured {
  padding: 80px 0;
  background: #f8fafe;
}

.sk-featured-header {
  max-width: 680px;
  margin: 0 auto 2.5rem;
}

.sk-courses-table {
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  margin-bottom: 2rem;
}

.sk-table-head {
  display: grid;
  grid-template-columns: 2.5fr 1.3fr 0.7fr 0.8fr 1fr 0.5fr;
  background: var(--primary);
  padding: 0.9rem 1.5rem;
  gap: 1rem;
}

.sk-th {
  font-size: 0.65rem;
  font-weight: 700;
  color: rgba(255, 255, 255, 0.65);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.sk-table-row {
  display: grid;
  grid-template-columns: 2.5fr 1.3fr 0.7fr 0.8fr 1fr 0.5fr;
  padding: 1.1rem 1.5rem;
  gap: 1rem;
  align-items: center;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease;
}

.sk-table-row:last-child {
  border-bottom: none;
}

.sk-table-row:hover {
  background: var(--offwhite);
}

.sk-td {
  font-size: 0.8rem;
  color: var(--mid);
}

.sk-td-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.sk-td-main strong {
  font-size: 0.85rem;
  color: var(--dark);
  font-weight: 700;
}

.sk-td-main span {
  font-size: 0.72rem;
  color: var(--muted);
}

.sk-tag {
  font-size: 0.65rem;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: 20px;
  white-space: nowrap;
}

.sk-tag-data { background: #EBF8FF; color: #2B6CB0; }
.sk-tag-ai { background: #F0FFF4; color: #276749; }
.sk-tag-pm { background: #FFFAF0; color: #C05621; }
.sk-tag-cyber { background: #FFF5F5; color: #C53030; }
.sk-tag-lead { background: #FAF5FF; color: #6B46C1; }
.sk-tag-fin { background: #FFFFF0; color: #744210; }

.sk-cert-yes {
  font-size: 0.72rem;
  color: #276749;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}

.sk-cert-yes i {
  font-size: 0.65rem;
}

.sk-row-cta {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  border: 1px solid var(--primary);
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  white-space: nowrap;
  transition: all 0.2s ease;
}

.sk-row-cta:hover {
  background: var(--primary);
  color: white;
}

.sk-featured-footer {
  padding-top: 1rem;
}

.sk-featured-footer p {
  font-size: 0.8rem;
  color: var(--muted);
  margin-bottom: 1rem;
}

.sk-view-all-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-lt);
  padding: 0.75rem 1.6rem;
  border-radius: 40px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.sk-view-all-btn:hover {
  background: var(--primary);
  color: white;
}

/* =============================================
   SECTION 3 — CORPORATE
   ============================================= */
.sk-corporate {
  padding: 80px 0;
  /*background: var(--offwhite);*/
}

.sk-corporate-inner {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 4rem;
  align-items: center;
}

.sk-corporate-features {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  margin: 1.8rem 0;
}

.sk-corp-feature {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

.sk-corp-feature > i {
  width: 40px;
  height: 40px;
  background: var(--primary-lt);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  color: var(--primary);
  flex-shrink: 0;
}

.sk-corp-feature div h5 {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 2px;
}

.sk-corp-feature div p {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.5;
  margin: 0;
}

.sk-corporate-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: var(--primary);
  color: white;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.8rem 1.8rem;
  border-radius: 40px;
  text-decoration: none;
  transition: all 0.25s ease;
}

.sk-corporate-cta:hover {
  background: var(--primary-dark);
  color: white;
  transform: translateY(-2px);
}

.sk-corporate-panel {
  background: white;
  border: 1px solid var(--border);
  border-radius: 24px;
  overflow: hidden;
}

.sk-corp-panel-header {
  background: var(--primary);
  padding: 1rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.sk-corp-panel-header i {
  color: rgba(255, 255, 255, 0.7);
  font-size: 0.9rem;
}

.sk-corp-panel-header span {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.8);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}

.sk-corp-stat-group {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.sk-corp-stat {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sk-corp-stat-bar {
  display: flex;
  justify-content: space-between;
}

.sk-corp-stat-label {
  font-size: 0.74rem;
  color: var(--mid);
  font-weight: 500;
}

.sk-corp-stat-pct {
  font-size: 0.74rem;
  color: var(--primary);
  font-weight: 700;
}

.sk-bar-fill {
  height: 7px;
  background: var(--border);
  border-radius: 10px;
  position: relative;
  overflow: hidden;
}

.sk-bar-fill::after {
  content: '';
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  width: var(--w);
  background: var(--primary);
  border-radius: 10px;
}

.sk-corp-panel-footer {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  border-top: 1px solid var(--border);
}

.sk-corp-footer-item {
  padding: 1rem;
  text-align: center;
  border-right: 1px solid var(--border);
}

.sk-corp-footer-item:last-child {
  border-right: none;
}

.sk-corp-footer-item strong {
  display: block;
  font-size: 1.3rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 3px;
}

.sk-corp-footer-item span {
  font-size: 0.65rem;
  color: var(--muted);
}

/* =============================================
   SECTION 4 — LEARNER STORIES
   ============================================= */
.sk-stories {
  padding: 80px 0;
  background: #f8fafe;
}

.sk-stories-header {
  max-width: 680px;
  margin: 0 auto 3rem;
}

.sk-stories-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.6rem;
}

.sk-story-card {
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 22px;
  padding: 2rem 1.8rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  position: relative;
  transition: all 0.3s ease;
}

.sk-story-card:hover {
  border-color: var(--primary);
  transform: translateY(-4px);
  box-shadow: 0 12px 24px -8px rgba(44, 82, 130, 0.1);
}

.sk-story-quote-mark {
  font-size: 4rem;
  font-weight: 800;
  color: var(--primary);
  line-height: 1;
  opacity: 0.12;
  position: absolute;
  top: 1rem;
  right: 1.5rem;
  font-family: Georgia, serif;
}

.sk-story-quote {
  font-size: 0.87rem;
  color: var(--dark);
  line-height: 1.7;
  margin: 0;
  flex: 1;
}

.sk-story-footer {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.sk-story-avatar {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
  flex-shrink: 0;
}

.sk-story-info {
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sk-story-info strong {
  font-size: 0.82rem;
  color: var(--dark);
}

.sk-story-info span {
  font-size: 0.68rem;
  color: var(--muted);
}

.sk-story-course {
  font-size: 0.62rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-lt);
  padding: 0.25rem 0.7rem;
  border-radius: 20px;
  white-space: nowrap;
}

/* =============================================
   SECTION 5 — FAQ
   ============================================= */
.sk-faq {
  padding: 80px 0;
  /*background: var(--offwhite);*/
}

.sk-faq-wrap {
  display: grid;
  grid-template-columns: 0.75fr 1.25fr;
  gap: 4rem;
  align-items: start;
}

.sk-faq-contact-box {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin-top: 1.5rem;
}

.sk-faq-link {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  text-decoration: none;
  transition: color 0.2s ease;
}

.sk-faq-link:hover {
  color: var(--primary-dark);
}

.sk-faq-link i {
  width: 22px;
  text-align: center;
}

.sk-faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.sk-faq-item {
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 0.2s ease;
}

.sk-faq-item.open {
  border-color: var(--primary);
}

.sk-faq-trigger {
  width: 100%;
  background: none;
  border: none;
  padding: 1.1rem 1.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}

.sk-faq-trigger span {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--dark);
  line-height: 1.4;
}

.sk-faq-icon {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--primary-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 0.62rem;
  color: var(--primary);
  transition: transform 0.25s ease, background 0.25s ease, color 0.25s ease;
}

.sk-faq-item.open .sk-faq-icon {
  transform: rotate(45deg);
  background: var(--primary);
  color: white;
}

.sk-faq-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}

.sk-faq-body p {
  padding: 1rem 1.3rem 1.2rem;
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.7;
  margin: 0;
  border-top: 1px solid var(--border);
}

/* =============================================
   RESPONSIVE
   ============================================= */
@media (max-width: 1100px) {
  .sk-corporate-inner { grid-template-columns: 1fr; gap: 2.5rem; }
}

@media (max-width: 1024px) {
  .sk-tracks-grid { grid-template-columns: repeat(2, 1fr); }
  .sk-stories-grid { grid-template-columns: repeat(2, 1fr); }
  .sk-faq-wrap { grid-template-columns: 1fr; gap: 2rem; }
  .sk-table-head,
  .sk-table-row {
    grid-template-columns: 2fr 1.2fr 0.6fr 0.7fr 0.9fr 0.5fr;
  }
}

@media (max-width: 768px) {
  .sk-impact-inner { grid-template-columns: repeat(2, 1fr); gap: 1rem; }
  .sk-impact-block { padding: 0.5rem 0; }
  .sk-tracks-grid { grid-template-columns: 1fr; }
  .sk-section-title { font-size: 1.7rem; }
  .sk-stories-grid { grid-template-columns: 1fr; }
  .sk-courses-table { overflow-x: auto; }
  .sk-table-head,
  .sk-table-row {
    grid-template-columns: 2fr 1fr 0.6fr 0.7fr 1fr 0.6fr;
    min-width: 650px;
  }
}

/* =============================================
   Company Overview — Styles
   ============================================= */

.co-section-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

/* ======================================================
   SECTION 1: WHO WE ARE
   ====================================================== */
.co-who {
  padding: 80px 0;
  background: white;
}
.co-who-wrap {
  display: flex;
  gap: 5rem;
  align-items: flex-start;
}
.co-who-left { flex: 1.2; }
.co-who-left p {
  font-size: 0.86rem;
  color: var(--mid);
  line-height: 1.8;
  margin-bottom: 1rem;
}
.co-who-mission-vision {
  margin-top: 2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.co-mv-item {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.co-mv-icon {
  width: 40px;
  height: 40px;
  background: var(--primary-lt);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.co-mv-icon i { font-size: 0.95rem; color: var(--primary); }
.co-mv-item h5 {
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.35rem;
}
.co-mv-item p {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.7;
  margin: 0 !important;
}
.co-who-right {
  flex: 0.8;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding-top: 3.5rem;
}
.co-stat-block {
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem 1.8rem;
  background: var(--offwhite);
}
.co-stat-block--primary {
  background: var(--primary-lt);
  border-color: var(--border);
}
.co-stat-block strong {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.co-stat-block span {
  font-size: 0.76rem;
  color: var(--mid);
  line-height: 1.5;
}

/* ======================================================
   SECTION 2: WHAT WE DO
   ====================================================== */
.co-what {
  padding: 80px 0;
  background: var(--offwhite);
}
.co-what-header { margin-bottom: 2.5rem; text-align: center;}
.co-pillars-list {
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}
.co-pillar-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
  background: white;
}
.co-pillar-row:last-child { border-bottom: none; }
/*.co-pillar-row:nth-child(even) { background: var(--offwhite); }*/
.co-pillar-row-left {
  width: 240px;
  flex-shrink: 0;
  padding: 2rem 1.8rem;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  justify-content: center;
}
.co-pillar-num {
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--primary);
  opacity: 0.55;
}
.co-pillar-icon {
  width: 44px;
  height: 44px;
  background: var(--primary-lt);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.co-pillar-icon i { font-size: 1rem; color: var(--primary); }
.co-pillar-row-left h4 {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
  line-height: 1.3;
}
.co-pillar-row-mid {
  flex: 1;
  padding: 2rem 2.2rem;
  border-right: 1px solid var(--border);
  display: flex;
  align-items: center;
}
.co-pillar-row-mid p {
  font-size: 0.83rem;
  color: var(--mid);
  line-height: 1.78;
  margin: 0;
}
.co-pillar-row-right {
  width: 220px;
  flex-shrink: 0;
  padding: 2rem 1.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  justify-content: center;
}
.co-pillar-row-right span {
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-lt);
  border: 1px solid var(--border);
  padding: 0.3rem 0.85rem;
  border-radius: 30px;
  display: inline-block;
}

/* ======================================================
   SECTION 3: VALUES — BENTO-STYLE CARDS (NEW)
   Distinct from Leadership: asymmetric bento layout,
   no avatar, number watermark, accent on 2 cards
   ====================================================== */
.val-section {
  padding: 80px 0;
  background: white;
}
.val-header { margin-bottom: 2.5rem; text-align: center;}

.val-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: auto auto;
  gap: 1.2rem;
}

/* Card 1 — normal */
.val-card:nth-child(1) { grid-column: span 1; }
/* Card 2 — normal */
.val-card:nth-child(2) { grid-column: span 1; }
/* Card 3 — accent, taller */
.val-card:nth-child(3) { grid-column: span 1; }
/* Card 4 — accent */
.val-card:nth-child(4) { grid-column: span 1; }
/* Card 5 — wide, spans full row */
.val-card--wide { grid-column: span 4 !important; }

.val-card {
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  position: relative;
  overflow: hidden;
}

.val-card--accent {
  background: var(--primary-lt);
}

/* Ghost number behind each card */
.val-card-num {
  position: absolute;
  bottom: -0.5rem;
  right: 0.8rem;
  font-size: 5rem;
  font-weight: 900;
  color: var(--primary);
  opacity: 0.06;
  line-height: 1;
  letter-spacing: -0.04em;
  pointer-events: none;
  user-select: none;
}

.val-card-icon {
  width: 48px;
  height: 48px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.val-card-icon i {
  font-size: 1.1rem;
  color: var(--primary);
}

.val-card-title {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
  line-height: 1.25;
}

.val-card-body {
  font-size: 0.79rem;
  color: var(--mid);
  line-height: 1.78;
  margin: 0;
  flex: 1;
}

.val-card-note {
  font-size: 0.72rem;
  color: var(--muted);
  font-style: italic;
  line-height: 1.6;
  display: block;
  padding-top: 0.6rem;
  border-top: 1px dashed var(--border);
}

/* Wide card (05) — horizontal layout inside */
.val-card--wide {
  flex-direction: row;
  align-items: center;
  gap: 2rem;
  padding: 1.8rem 2.4rem;
}
.val-card--wide .val-card-icon {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
}
.val-card--wide .val-card-body-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.val-card--wide .val-card-note {
  padding-top: 0.4rem;
}

/* ======================================================
   SECTION 4: LEADERSHIP
   ====================================================== */
.co-team {
  padding: 80px 0;
  background: var(--offwhite);
}
.co-team-header {
  max-width: 680px;
  margin: 0 auto 3rem;
}
.co-team-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
}
.co-team-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.co-team-avatar {
  background: var(--primary-lt);
  height: 140px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.co-team-avatar i {
  font-size: 3rem;
  color: var(--primary);
  opacity: 0.35;
}
.co-team-info { padding: 1.5rem; }
.co-team-info h5 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.25rem;
}
.co-team-role {
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  display: block;
  margin-bottom: 0.75rem;
}
.co-team-info p {
  font-size: 0.78rem;
  color: var(--mid);
  line-height: 1.7;
  margin: 0;
}

/* ======================================================
   SECTION 5: PARTNERS — ACCORDION (NEW)
   ====================================================== */
.acd-section {
  padding: 80px 0;
  background: white;
}
.acd-header {
  margin-bottom: 3rem;
  text-align: center;
}
.acd-list {
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}
.acd-item {
  border-bottom: 1px solid var(--border);
  background: white;
}
.acd-item:last-child { border-bottom: none; }
.acd-item:nth-child(even) { background: var(--offwhite); }

.acd-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem 2rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 1rem;
}
.acd-trigger-left {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.acd-trigger-icon {
  width: 44px;
  height: 44px;
  background: var(--primary-lt);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.acd-trigger-icon i { font-size: 1rem; color: var(--primary); }
.acd-trigger-name {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--dark);
}
.acd-trigger-right {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.acd-pill {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--primary);
  background: var(--primary-lt);
  border: 1px solid var(--border);
  padding: 0.22rem 0.8rem;
  border-radius: 30px;
}
.acd-chevron {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.acd-chevron i { font-size: 0.7rem; color: var(--mid); }

.acd-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 2rem 0 4.6rem;
}
.acd-body p {
  font-size: 0.83rem;
  color: var(--mid);
  line-height: 1.8;
  margin: 0;
}

/* Open state */
.acd-item--open .acd-chevron {
  transform: rotate(180deg);
  background: var(--primary-lt);
  border-color: var(--primary);
}
.acd-item--open .acd-chevron i { color: var(--primary); }
.acd-item--open .acd-body {
  max-height: 200px;
  padding: 0 2rem 1.6rem 4.6rem;
}
.acd-item--open .acd-trigger-name { color: var(--primary); }

/* ======================================================
   SECTION 6: JOURNEY - SIMPLE VERTICAL TIMELINE
   ====================================================== */
.jrn-section {
  padding: 80px 0;
  background: white;
}
.jrn-header {
  text-align: center;
  margin-bottom: 3rem;
}

.jrn-simple-timeline {
  max-width: 950px;
  margin: 0 auto;
  position: relative;
}

/* Vertical line - starts at first item, ends at last item */
.jrn-simple-timeline::before {
  content: '';
  position: absolute;
  left: 100px;
  top: 40px;
  bottom: 40px;
  width: 2px;
  background: var(--border);
}

.jrn-timeline-item {
  display: flex;
  align-items: center;
  margin-bottom: 2.5rem;
  position: relative;
  min-height: 100px;
}

.jrn-timeline-item:last-child {
  margin-bottom: 0;
}

/* Year badge - centered vertically on the right side of the line */
.jrn-year-badge {
  position: absolute;
  left: 100px;
  transform: translateX(-50%);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--primary);
  background: white;
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
  z-index: 2;
}

.jrn-year-badge--now {
  color: var(--primary);
  font-weight: 900;
}

/* Content card - sits to the right of the timeline */
.jrn-content-card {
  flex: 1;
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.2rem 1.8rem;
  transition: all 0.2s ease;
  margin-left: 140px;
}

.jrn-content-card:hover {
  border-color: var(--primary-lt);
  box-shadow: 0 4px 12px rgba(0,0,0,0.04);
}

.jrn-content-card--now {
  background: var(--primary-lt);
  border-color: var(--primary);
}

.jrn-content-card h4 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

.jrn-content-card p {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.7;
  margin: 0;
}

/* Responsive */
@media (max-width: 640px) {
  .jrn-simple-timeline::before {
    left: 60px;
    top: 20px;
    bottom: 20px;
  }
  
  .jrn-year-badge {
    left: 60px;
    font-size: 0.7rem;
  }
  
  .jrn-content-card {
    margin-left: 90px;
    padding: 1rem 1.2rem;
  }
  
  .jrn-content-card h4 {
    font-size: 0.85rem;
  }
  
  .jrn-content-card p {
    font-size: 0.74rem;
  }
}
/* ======================================================
   CTA BAND
   ====================================================== */
/*.pmp-cta-band {*/
/*  padding: 45px 0;*/
/*  background: linear-gradient(135deg, #0B2B5E 0%, #0D3B7A 100%);*/
/*}*/
/*.pmp-cta-band h2 {*/
/*  color: white;*/
/*}*/
/*.pmp-cta-band p {*/
/*  color: rgba(255,255,255,0.9);*/
/*}*/
/*.pmp-cta-button-new {*/
/*  display: inline-block;*/
/*  background: white;*/
/*  color: var(--primary);*/
/*  padding: 0.75rem 2rem;*/
/*  border-radius: 50px;*/
/*  font-weight: 700;*/
/*  text-decoration: none;*/
/*  transition: all 0.3s ease;*/
/*}*/
/*.pmp-cta-button-new:hover {*/
/*  background: var(--secondary);*/
/*  color: white;*/
/*  transform: translateY(-2px);*/
/*}*/

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 1200px) {
  .co-team-grid { grid-template-columns: repeat(2, 1fr); }
  .val-grid { grid-template-columns: repeat(2, 1fr); }
  .val-card--wide { grid-column: span 2 !important; }
}

@media (max-width: 1024px) {
  .co-who-wrap { flex-direction: column; gap: 3rem; }
  .co-who-right { padding-top: 0; flex-direction: row; flex-wrap: wrap; gap: 1rem; }
  .co-stat-block { flex: 1; min-width: 200px; }

  .co-pillar-row { flex-direction: column; }
  .co-pillar-row-left {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    flex-direction: row;
    align-items: center;
    gap: 1rem;
    padding: 1.4rem 1.8rem;
  }
  .co-pillar-num { display: none; }
  .co-pillar-row-mid { border-right: none; border-bottom: 1px solid var(--border); padding: 1.4rem 1.8rem; }
  .co-pillar-row-right { width: 100%; padding: 1.2rem 1.8rem; flex-direction: row; flex-wrap: wrap; }
}

@media (max-width: 768px) {
  .co-team-grid { grid-template-columns: 1fr; }
  .co-section-title { font-size: 1.65rem; }

  /* Values */
  .val-grid { grid-template-columns: 1fr; }
  .val-card--wide {
    grid-column: span 1 !important;
    flex-direction: column;
    padding: 2rem;
    align-items: start;
  }
  .val-card--wide .val-card-body-wrap { flex-direction: column; }

  /* Accordion */
  .acd-trigger { padding: 1.2rem 1.5rem; }
  .acd-body { padding: 0 1.5rem 0 1.5rem; }
  .acd-item--open .acd-body { padding: 0 1.5rem 1.4rem 1.5rem; }

  /* Journey Timeline */
  .jrn-simple-timeline::before {
    left: 80px;
  }
  
  .jrn-year-badge {
    width: 70px;
    font-size: 0.7rem;
  }
  
  .jrn-content-card {
    padding: 1rem 1.2rem;
  }
  
  .jrn-content-card h4 {
    font-size: 0.85rem;
  }
  
  .jrn-content-card p {
    font-size: 0.74rem;
  }
}
/* =============================================
   Careers — Complete Styles
   ============================================= */

.car-section-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

/* ======================================================
   SECTION 1: WHY JOIN US — STACKED HORIZONTAL ROWS
   ====================================================== */
.car-why {
  padding: 80px 0;
  background: white;
}

.car-why-header {
  margin-bottom: 2.5rem;
  text-align: center;
}

.car-why-list {
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.car-why-row {
  display: flex;
  align-items: center;
  gap: 0;
  border-bottom: 1px solid var(--border);
  background: white;
  transition: background 0.2s ease;
}

.car-why-row:last-child {
  border-bottom: none;
}

.car-why-row:hover {
  background: var(--primary-lt);
}

.car-why-row-icon {
  width: 70px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 0;
  border-right: 1px solid var(--border);
}

.car-why-row-icon i {
  font-size: 1.2rem;
  color: var(--primary);
}

.car-why-row-title {
  width: 180px;
  flex-shrink: 0;
  font-size: 0.88rem;
  font-weight: 800;
  color: var(--dark);
  padding: 2rem 1.5rem 2rem 1.8rem;
  border-right: 1px solid var(--border);
  line-height: 1.3;
}

.car-why-row-body {
  flex: 1;
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.78;
  padding: 2rem 2.2rem;
  border-right: 1px solid var(--border);
}

.car-why-row-tag {
  width: 140px;
  flex-shrink: 0;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--primary);
  background: var(--primary-lt);
  border: 1px solid var(--border);
  border-radius: 30px;
  padding: 0.3rem 0.9rem;
  text-align: center;
  margin: 0 1.5rem;
  white-space: nowrap;
}

/* ======================================================
   SECTION 2: LIFE & CULTURE (NEW)
   ====================================================== */
.car-culture {
  padding: 80px 0;
  background: var(--offwhite);
}

.car-culture-header {
  margin-bottom: 3rem;
  text-align: center;
}

.car-values-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1.5rem;
  margin-bottom: 3rem;
}

.car-value-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem 1.5rem;
  text-align: center;
  transition: all 0.3s ease;
}

.car-value-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
  border-color: var(--primary);
}

.car-value-icon {
  width: 60px;
  height: 60px;
  background: var(--primary-lt);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.2rem;
}

.car-value-icon i {
  font-size: 1.5rem;
  color: var(--primary);
}

.car-value-card h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.75rem;
}

.car-value-card p {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.6;
  margin: 0;
}

.car-culture-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  margin-bottom: 3rem;
}

.car-culture-col {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
}

.car-culture-col h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 1.2rem;
  display: flex;
  align-items: center;
  gap: 0.6rem;
}

.car-culture-col h3 i {
  color: var(--primary);
  font-size: 1.2rem;
}

.car-culture-col ul {
  list-style: none;
  padding: 0;
  margin: 0;
}

.car-culture-col ul li {
  font-size: 0.82rem;
  color: var(--mid);
  padding: 0.5rem 0;
  padding-left: 1.2rem;
  position: relative;
  line-height: 1.5;
  border-bottom: 1px solid var(--border);
}

.car-culture-col ul li:last-child {
  border-bottom: none;
}

.car-culture-col ul li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-weight: bold;
}

.car-testimonial {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.5rem;
  margin-bottom: 3rem;
  text-align: center;
  position: relative;
}

.car-testimonial i {
  font-size: 2rem;
  color: var(--primary);
  opacity: 0.3;
  margin-bottom: 1rem;
  display: block;
}

.car-testimonial p {
  font-size: 1rem;
  color: var(--dark);
  line-height: 1.7;
  max-width: 700px;
  margin: 0 auto 1rem;
  font-style: italic;
}

.car-testimonial-author {
  font-size: 0.85rem;
}

.car-testimonial-author strong {
  color: var(--primary);
  font-weight: 800;
}

.car-testimonial-author span {
  color: var(--muted);
  font-size: 0.75rem;
  display: block;
  margin-top: 0.3rem;
}

.car-diversity {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2rem;
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
}

.car-diversity-icon {
  width: 50px;
  height: 50px;
  background: var(--primary-lt);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.car-diversity-icon i {
  font-size: 1.2rem;
  color: var(--primary);
}

.car-diversity-content h3 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.5rem;
}

.car-diversity-content p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.7;
  margin: 0;
}

/* ======================================================
   SECTION 3: OPEN ROLES — ACCORDION
   ====================================================== */
.car-roles {
  padding: 80px 0;
  background: white;
}

.car-roles-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2.5rem;
  gap: 2rem;
  flex-wrap: wrap;
}

.car-roles-header p {
  font-size: 0.84rem;
  color: var(--mid);
  line-height: 1.7;
  margin: 0.5rem 0 0;
  max-width: 520px;
}

.car-roles-contact {
  flex-shrink: 0;
  text-align: right;
}

.car-roles-contact p {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 0.3rem;
}

.car-roles-contact a {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
}

.car-dept-section {
  margin-bottom: 2.5rem;
}

.car-dept-heading {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--muted);
  padding: 0.6rem 0;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  border-bottom: 1px solid var(--border);
}

.car-dept-heading i {
  color: var(--primary);
  font-size: 0.85rem;
}

.car-dept-heading span {
  margin-left: auto;
  font-size: 0.65rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-lt);
  border: 1px solid var(--border);
  padding: 0.18rem 0.7rem;
  border-radius: 30px;
}

.car-accordion-list {
  border: 1px solid var(--border);
  border-top: none;
  border-radius: 0 0 16px 16px;
  overflow: hidden;
  background: white;
}

.car-acc-item {
  border-bottom: 1px solid var(--border);
  background: white;
}

.car-acc-item:last-child {
  border-bottom: none;
}

.car-acc-trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.8rem 2rem;
  cursor: pointer;
  gap: 1rem;
  transition: background 0.15s ease;
  user-select: none;
}

.car-acc-trigger:hover {
  background: var(--offwhite);
}

.car-acc-item--open .car-acc-trigger {
  background: var(--primary-lt);
  border-bottom: 1px solid var(--border);
}

.car-acc-label {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--primary);
  margin-bottom: 0.35rem;
}

.car-acc-trigger h3 {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}

.car-acc-meta {
  display: flex;
  gap: 1.2rem;
  flex-wrap: wrap;
}

.car-acc-meta span {
  font-size: 0.74rem;
  color: var(--muted);
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.car-acc-meta span i {
  font-size: 0.3rem;
  color: var(--primary);
}

.car-acc-chevron {
  width: 36px;
  height: 36px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: all 0.25s ease;
  background: white;
}

.car-acc-chevron i {
  font-size: 0.75rem;
  color: var(--primary);
  transition: transform 0.25s ease;
}

.car-acc-item--open .car-acc-chevron i {
  transform: rotate(180deg);
}

.car-acc-body {
  display: none;
}

.car-acc-item--open .car-acc-body {
  display: block;
}

.car-acc-detail {
  display: flex;
  gap: 3rem;
  padding: 2.2rem 2rem;
  border-bottom: 1px solid var(--border);
}

.car-acc-detail-left {
  flex: 1;
}

.car-acc-detail-left h5 {
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--primary);
  margin: 0 0 0.6rem;
}

.car-acc-detail-left h5:not(:first-child) {
  margin-top: 1.5rem;
}

.car-acc-detail-left p {
  font-size: 0.83rem;
  color: var(--mid);
  line-height: 1.78;
  margin: 0;
}

.car-acc-detail-left ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.car-acc-detail-left ul li {
  font-size: 0.81rem;
  color: var(--dark);
  padding-left: 1.2rem;
  position: relative;
  line-height: 1.55;
}

.car-acc-detail-left ul li::before {
  content: "—";
  position: absolute;
  left: 0;
  color: var(--primary);
  font-size: 0.75rem;
}

.car-acc-detail-right {
  width: 240px;
  flex-shrink: 0;
}

.car-acc-info-block {
  border: 1px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
  background: var(--offwhite);
}

.car-info-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.75rem 1.2rem;
  border-bottom: 1px solid var(--border);
}

.car-info-row:last-child {
  border-bottom: none;
}

.car-info-row span {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 600;
}

.car-info-row strong {
  font-size: 0.75rem;
  color: var(--dark);
  font-weight: 700;
  text-align: right;
}

.car-acc-apply-btn-container {
  padding: 0 2rem 2rem 2rem;
  text-align: right;
}

.car-apply-now-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 20px;
  background: var(--primary);
  color: white;
  border: none;
  padding: 0.85rem 2rem;
  border-radius: 50px;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
}

.car-apply-now-btn:hover {
  background: var(--primary-dark);
}

/* ======================================================
   EXTERNAL APPLICATION FORM
   ====================================================== */
.car-external-form {
  margin-top: 3rem;
  border: 2px solid var(--primary);
  border-radius: 20px;
  background: white;
  overflow: hidden;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);
}

.car-external-form-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.5rem 2rem;
  background: var(--primary-lt);
  border-bottom: 1px solid var(--border);
}

.car-external-form-header h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0;
}

.car-external-form-header h3 span {
  color: var(--primary);
}

.car-external-form-close {
  background: none;
  border: none;
  font-size: 2rem;
  line-height: 1;
  cursor: pointer;
  color: var(--muted);
  transition: color 0.2s ease;
  padding: 0;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.car-external-form-close:hover {
  color: var(--primary);
}

.car-external-form .car-form {
  padding: 2rem;
}

/* ======================================================
   FORM STYLES
   ====================================================== */
.car-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.car-form-row {
  display: flex;
  gap: 1rem;
}

.car-form-group {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.car-form-group--full {
  flex: none;
  width: 100%;
}

.car-form-align-end {
  justify-content: flex-end;
}

.car-form-group label {
  font-size: 0.73rem;
  font-weight: 700;
  color: var(--dark);
}

.car-form-group label sup {
  color: var(--primary);
}

.car-form-group input,
.car-form-group textarea {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-size: 0.82rem;
  color: var(--dark);
  background: white;
  outline: none;
  font-family: inherit;
  transition: border-color 0.2s ease;
  resize: none;
}

.car-form-group input:focus,
.car-form-group textarea:focus {
  border-color: var(--primary);
}

.car-file-input {
  position: relative;
}

.car-file-input input[type="file"] {
  position: absolute;
  width: 0;
  height: 0;
  opacity: 0;
}

.car-file-input label {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.75rem 1rem;
  border: 1px dashed var(--border);
  border-radius: 10px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--primary);
  cursor: pointer;
  background: white;
  transition: all 0.2s ease;
}

.car-file-input label:hover {
  background: var(--primary-lt);
  border-color: var(--primary);
}

.car-submit-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  width: fit-content;
  background: var(--primary);
  color: white;
  border: none;
  padding: 0.85rem 1.8rem;
  border-radius: 50px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.2s ease;
  white-space: nowrap;
}

.car-submit-btn:hover {
  background: var(--primary-dark);
}

/* ======================================================
   SECTION 4: BENEFITS
   ====================================================== */
.car-benefits {
  padding: 80px 0;
  background: var(--offwhite);
}

.car-benefits-header {
  margin-bottom: 2.5rem;
  text-align: center;
}

.car-benefits-list {
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.car-benefit-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
  background: white;
}

.car-benefit-row:last-child {
  border-bottom: none;
}

.car-benefit-row:nth-child(even) {
  background: var(--offwhite);
}

.car-benefit-label {
  width: 200px;
  flex-shrink: 0;
  padding: 1.8rem 1.6rem;
  border-right: 1px solid var(--border);
  font-size: 0.85rem;
  font-weight: 800;
  color: var(--dark);
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.car-benefit-label i {
  font-size: 0.95rem;
  color: var(--primary);
  flex-shrink: 0;
}

.car-benefit-detail {
  flex: 1;
  padding: 1.8rem 2.2rem;
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.78;
  display: flex;
  align-items: center;
}

/* ======================================================
   CTA BAND
   ====================================================== */
/*.pmp-cta-band {*/
/*  padding: 60px 0;*/
/*  background: var(--dark);*/
/*}*/

/*.pmp-cta-band h2 {*/
/*  font-size: 1.9rem;*/
/*  margin-bottom: 0.5rem;*/
/*  color: white;*/
/*  font-weight: 800;*/
/*}*/

/*.pmp-cta-band h2 span {*/
/*  color: #A8D8EA;*/
/*}*/

/*.pmp-cta-band p {*/
/*  font-size: 1rem;*/
/*  margin-bottom: 0;*/
/*  color: rgba(255, 255, 255, 0.9);*/
/*}*/

/*.pmp-cta-button-new {*/
/*  display: inline-flex;*/
/*  align-items: center;*/
/*  gap: 0.6rem;*/
/*  background: white;*/
/*  color: var(--dark);*/
/*  padding: 0.85rem 2rem;*/
/*  border-radius: 50px;*/
/*  font-size: 0.9rem;*/
/*  font-weight: 700;*/
/*  text-decoration: none;*/
/*  transition: all 0.2s ease;*/
/*}*/

/*.pmp-cta-button-new:hover {*/
/*  background: var(--primary);*/
/*  color: white;*/
/*  text-decoration: none;*/
/*}*/

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 1024px) {
  .car-values-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .car-acc-detail {
    flex-direction: column;
    gap: 1.5rem;
  }

  .car-acc-detail-right {
    width: 100%;
  }

  .car-why-row-tag {
    display: none;
  }
}

@media (max-width: 900px) {
  .car-why-row {
    flex-wrap: wrap;
  }

  .car-why-row-icon {
    width: 56px;
    padding: 1.5rem 0;
  }

  .car-why-row-title {
    width: auto;
    flex: 1;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 1.5rem 1rem;
  }

  .car-why-row-body {
    width: 100%;
    flex: none;
    border-right: none;
    padding: 1rem 1.5rem 1.5rem;
  }
  
  .car-culture-row {
    grid-template-columns: 1fr;
  }
  
  .car-diversity {
    flex-direction: column;
  }
}

@media (max-width: 768px) {
  .car-values-grid {
    grid-template-columns: 1fr;
  }
  
  .car-form-row {
    flex-direction: column;
  }

  .car-benefit-row {
    flex-direction: column;
  }

  .car-benefit-label {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    padding: 1.2rem 1.5rem;
  }

  .car-benefit-detail {
    padding: 1.2rem 1.5rem;
  }

  .car-acc-trigger h3 {
    font-size: 0.95rem;
  }

  .car-section-title {
    font-size: 1.65rem;
  }
  
  .car-external-form-header {
    padding: 1rem 1.5rem;
  }
  
  .car-external-form .car-form {
    padding: 1.5rem;
  }
  
  .pmp-cta-band h2 {
    font-size: 1.5rem;
  }
}
/* =============================================
   News & Press — Styles
   ============================================= */

.np-section-title {
  font-size: 2rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.2;
  margin-bottom: 0.75rem;
}

/* Category pills */
.np-cat {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.22rem 0.75rem;
  border-radius: 30px;
  border: 1px solid var(--border);
  display: inline-block;
  white-space: nowrap;
}

.np-cat--default {
  color: var(--primary);
  background: var(--primary-lt);
  border-color: var(--border);
}

.np-cat--green {
  color: #16a34a;
  background: #f0fdf4;
  border-color: #bbf7d0;
}

.np-cat--blue {
  color: #2563eb;
  background: #eff6ff;
  border-color: #bfdbfe;
}

.np-cat--orange {
  color: #c2410c;
  background: #fff7ed;
  border-color: #fed7aa;
}

/* ======================================================
   SECTION 1: FEATURED — EDITORIAL SPLIT
   ====================================================== */
.np-featured {
  padding: 80px 0;
  background: white;
}

.np-featured-wrap {
  display: flex;
  gap: 5rem;
  align-items: flex-start;
}

.np-featured-left {
  flex: 0.7;
  margin: auto;
  /*position: sticky;*/
  /*top: 2rem;*/
}

.np-featured-left p {
  font-size: 0.86rem;
  color: var(--mid);
  line-height: 1.78;
  margin-bottom: 2rem;
}

.np-featured-stat-row {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  padding-top: 2rem;
  border-top: 1px solid var(--border);
}

.np-featured-stat strong {
  display: block;
  font-size: 2rem;
  font-weight: 900;
  color: var(--primary);
  line-height: 1;
  margin-bottom: 0.3rem;
}

.np-featured-stat span {
  font-size: 0.75rem;
  color: var(--muted);
  line-height: 1.4;
}

.np-featured-right {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}

.np-feature-main {
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.2rem;
  background: var(--primary-lt);
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}

.np-feature-date {
  font-size: 0.72rem;
  color: var(--muted);
  font-weight: 600;
}

.np-feature-main h3 {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.35;
  margin: 0;
}

.np-feature-main p {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.75;
  margin: 0;
}

.np-feature-secondary {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.np-feature-sec-item {
  padding: 1.8rem;
  border-bottom: 1px solid var(--border);
  background: white;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.np-feature-sec-item:last-child {
  border-bottom: none;
}

.np-feature-sec-item:nth-child(even) {
  background: var(--offwhite);
}

.np-feature-sec-item h4 {
  font-size: 0.92rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.35;
  margin: 0;
}

.np-feature-sec-item p {
  font-size: 0.79rem;
  color: var(--mid);
  line-height: 1.7;
  margin: 0;
}

/* ======================================================
   SECTION 2: ACCORDION NEWS LIST
   ====================================================== */
.np-all {
  padding: 80px 0;
  background: var(--offwhite);
}

.np-all-header {
  margin-bottom: 2.5rem;
  text-align: center;
}

.np-all-header p {
  font-size: 0.83rem;
  color: var(--muted);
  margin-top: 0.4rem;
}

.np-news-accordion {
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  background: white;
}

.np-acc-item {
  border-bottom: 1px solid var(--border);
}

.np-acc-item:last-child {
  border-bottom: none;
}

.np-acc-trigger {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.6rem 2rem;
  cursor: pointer;
  transition: background 0.15s ease;
  user-select: none;
}

.np-acc-trigger:hover {
  background: var(--offwhite);
}

.np-acc-item--open .np-acc-trigger {
  background: var(--primary-lt);
  border-bottom: 1px solid var(--border);
}

.np-acc-left {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex-shrink: 0;
  width: 140px;
}

.np-acc-date {
  font-size: 0.68rem;
  color: var(--muted);
  font-weight: 600;
}

.np-acc-title {
  flex: 1;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.4;
}

.np-acc-chevron {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  background: white;
  transition: all 0.25s ease;
}

.np-acc-chevron i {
  font-size: 0.7rem;
  color: var(--primary);
  transition: transform 0.25s ease;
}

.np-acc-item--open .np-acc-chevron i {
  transform: rotate(45deg);
}

.np-acc-body {
  display: none;
  padding: 1.8rem 2rem 2rem;
  background: var(--offwhite);
  border-top: none;
}

.np-acc-item--open .np-acc-body {
  display: block;
}

.np-acc-body p {
  font-size: 0.83rem;
  color: var(--mid);
  line-height: 1.78;
  margin-bottom: 1rem;
}

.np-acc-body p:last-of-type {
  margin-bottom: 1.2rem;
}

.np-acc-meta-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}

.np-acc-meta-row span {
  font-size: 0.7rem;
  color: var(--muted);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.np-acc-meta-row span i {
  color: var(--primary);
  font-size: 0.65rem;
}

/* ======================================================
   SECTION 3: IN THE PRESS — STACKED ROWS
   ====================================================== */
.np-press {
  padding: 80px 0;
  background: white;
}

.np-press-header {
  margin-bottom: 2.5rem;
  text-align: center;
}

.np-press-list {
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.np-press-row {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
  background: white;
}

.np-press-row:last-child {
  border-bottom: none;
}

.np-press-source-col {
  width: 220px;
  flex-shrink: 0;
  padding: 2rem 1.8rem;
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.4rem;
}

.np-press-source {
  font-size: 0.82rem;
  font-weight: 900;
  color: var(--dark);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.np-press-context {
  font-size: 0.7rem;
  color: var(--muted);
  line-height: 1.5;
}

.np-press-quote-col {
  flex: 1;
  padding: 2rem 2.2rem;
  display: flex;
  align-items: center;
}

.np-press-quote-col blockquote {
  font-size: 0.88rem;
  color: var(--dark);
  line-height: 1.75;
  font-style: italic;
  margin: 0;
  padding-left: 1.2rem;
  border-left: 3px solid var(--primary);
}

/* ======================================================
   SECTION 4: PRESS CONTACT — SPLIT
   ====================================================== */
.np-contact {
  padding: 80px 0;
  background: var(--offwhite);
}

.np-contact-wrap {
  display: flex;
  gap: 5rem;
  align-items: flex-start;
}

.np-contact-left {
  flex: 1;
  margin: auto;
}

.np-contact-left p {
  font-size: 0.86rem;
  color: var(--mid);
  line-height: 1.78;
  margin-bottom: 2rem;
}

.np-contact-details {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.np-contact-detail-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.np-contact-detail-icon {
  width: 42px;
  height: 42px;
  background: var(--primary-lt);
  border: 1px solid var(--border);
  border-radius: 11px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.np-contact-detail-icon i {
  font-size: 0.9rem;
  color: var(--primary);
}

.np-contact-detail-item span {
  display: block;
  font-size: 0.68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 0.15rem;
}

.np-contact-detail-item strong {
  font-size: 0.85rem;
  color: var(--dark);
}

.np-contact-right {
  flex: 1;
}

.np-assets-header {
  margin-bottom: 1.5rem;
}

.np-assets-header h4 {
  font-size: 1rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.35;
  margin: 0.4rem 0 0;
}

.np-asset-list {
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  background: white;
}

.np-asset-item {
  display: flex;
  align-items: center;
  gap: 1.2rem;
  padding: 1.3rem 1.5rem;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s ease;
}

.np-asset-item:last-child {
  border-bottom: none;
}

.np-asset-item:hover {
  background: var(--offwhite);
}

.np-asset-icon {
  width: 40px;
  height: 40px;
  background: var(--primary-lt);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.np-asset-icon i {
  font-size: 0.9rem;
  color: var(--primary);
}

.np-asset-body {
  flex: 1;
}

.np-asset-body strong {
  display: block;
  font-size: 0.83rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.2rem;
}

.np-asset-body span {
  font-size: 0.73rem;
  color: var(--muted);
  line-height: 1.4;
}

.np-asset-dl {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--primary);
  text-decoration: none;
  padding: 0.4rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 30px;
  white-space: nowrap;
  flex-shrink: 0;
  transition: all 0.2s ease;
}

.np-asset-dl:hover {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.np-asset-dl i {
  font-size: 0.65rem;
}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 1024px) {
  .np-featured-wrap {
    flex-direction: column;
    gap: 3rem;
  }

  .np-featured-left {
    position: static;
  }

  .np-featured-stat-row {
    flex-direction: row;
    gap: 2rem;
  }

  .np-contact-wrap {
    flex-direction: column;
    gap: 3rem;
  }
}

@media (max-width: 900px) {
  .np-acc-left {
    width: 110px;
  }

  .np-press-row {
    flex-direction: column;
  }

  .np-press-source-col {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border);
    flex-direction: row;
    align-items: center;
    gap: 1.5rem;
    padding: 1.2rem 1.5rem;
  }
}

@media (max-width: 768px) {
  .np-acc-trigger {
    flex-wrap: wrap;
    gap: 0.75rem;
    padding: 1.2rem 1.5rem;
  }

  .np-acc-left {
    width: 100%;
    flex-direction: row;
    align-items: center;
    gap: 0.75rem;
  }

  .np-acc-title {
    width: 100%;
    flex: none;
  }

  .np-acc-chevron {
    margin-left: auto;
  }

  .np-section-title {
    font-size: 1.65rem;
  }
}
/* =============================================
   Request a Quote — Styles
   ============================================= */

/* ======================================================
   SHARED SECTION HEADER
   ====================================================== */
.rq-section-header {
  text-align: center;
  margin-bottom: 2.5rem;
}
.rq-form-intro {
  font-size: 0.88rem;
  color: var(--mid);
  max-width: 600px;
  margin: 0.5rem auto 0;
  line-height: 1.7;
}

/* ======================================================
   FAQ SECTION
   ====================================================== */
.rq-faq-section {
  padding: 80px 0;
  background: white;
}

.rq-acd-list {
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
}

.rq-acd-item {
  border-bottom: 1px solid var(--border);
  background: white;
}
.rq-acd-item:last-child {
  border-bottom: none;
}
.rq-acd-item:nth-child(even) {
  background: var(--offwhite);
}

.rq-acd-trigger {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 2rem;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  gap: 1rem;
}

.rq-acd-trigger-left {
  display: flex;
  align-items: center;
  gap: 1.1rem;
}

.rq-acd-icon {
  width: 42px;
  height: 42px;
  background: var(--primary-lt);
  border: 1px solid var(--border);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.rq-acd-icon i {
  font-size: 0.95rem;
  color: var(--primary);
}

.rq-acd-question {
  font-size: 0.93rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.4;
}

.rq-acd-chevron {
  width: 30px;
  height: 30px;
  border: 1px solid var(--border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: transform 0.25s ease;
}
.rq-acd-chevron i {
  font-size: 0.7rem;
  color: var(--mid);
}

.rq-acd-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease, padding 0.3s ease;
  padding: 0 2rem 0 4.6rem;
}
.rq-acd-body p {
  font-size: 0.83rem;
  color: var(--mid);
  line-height: 1.8;
  margin: 0;
}

/* Open state */
.rq-acd-item--open .rq-acd-chevron {
  transform: rotate(180deg);
  background: var(--primary-lt);
  border-color: var(--primary);
}
.rq-acd-item--open .rq-acd-chevron i {
  color: var(--primary);
}
.rq-acd-item--open .rq-acd-body {
  max-height: 300px;
  padding: 0 2rem 1.6rem 4.6rem;
}
.rq-acd-item--open .rq-acd-question {
  color: var(--primary);
}

/* ======================================================
   FORM SECTION
   ====================================================== */
.rq-form-section {
  padding: 80px 0;
  background: var(--offwhite);
}

.rq-form-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.5rem 3rem;
}

.rq-form {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

/* Two-column row */
.rq-form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.4rem;
}

.rq-form-group {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}

.rq-form-group--full {
  grid-column: 1 / -1;
}

/* Label */
.rq-label {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--dark);
  letter-spacing: 0.01em;
}
.rq-required {
  color: var(--primary);
}

/* Inputs */
.rq-input {
  width: 100%;
  padding: 0.65rem 1rem;
  font-size: 0.83rem;
  color: var(--dark);
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 10px;
  outline: none;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  font-family: inherit;
}
.rq-input::placeholder {
  color: var(--muted);
}
.rq-input:focus {
  border-color: var(--primary);
  background: white;
  box-shadow: 0 0 0 3px var(--primary-lt);
}

.rq-select {
  appearance: none;
  -webkit-appearance: none;
  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' stroke='%23999' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 1rem center;
  padding-right: 2.5rem;
  cursor: pointer;
}

.rq-textarea {
  resize: vertical;
  min-height: 120px;
  line-height: 1.7;
}

/* Checkbox grid */
.rq-checkbox-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.75rem;
  margin-top: 0.3rem;
}

.rq-checkbox-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.8rem;
  color: var(--dark);
  cursor: pointer;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--offwhite);
  transition: border-color 0.2s ease, background 0.2s ease;
}
.rq-checkbox-item:hover {
  border-color: var(--primary);
  background: var(--primary-lt);
}
.rq-checkbox-item input[type="checkbox"] {
  width: 15px;
  height: 15px;
  accent-color: var(--primary);
  flex-shrink: 0;
  cursor: pointer;
}
.rq-checkbox-item span {
  line-height: 1.35;
}

/* Submit row */
.rq-form-submit {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.5rem;
  padding-top: 0.5rem;
  border-top: 1px solid var(--border);
  margin-top: 0.5rem;
}
.rq-privacy-note {
  font-size: 0.75rem;
  color: var(--muted);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  line-height: 1.5;
}
.rq-privacy-note i {
  color: var(--primary);
  font-size: 0.85rem;
  flex-shrink: 0;
}

/* ======================================================
   RESPONSIVE
   ====================================================== */
@media (max-width: 1024px) {
  .rq-checkbox-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 768px) {
  .rq-form-card {
    padding: 1.8rem 1.5rem;
  }
  .rq-form-row {
    grid-template-columns: 1fr;
  }
  .rq-checkbox-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .rq-form-submit {
    flex-direction: column;
    align-items: flex-start;
  }
  .rq-acd-trigger {
    padding: 1.2rem 1.5rem;
  }
  .rq-acd-body {
    padding: 0 1.5rem 0 1.5rem;
  }
  .rq-acd-item--open .rq-acd-body {
    padding: 0 1.5rem 1.4rem 1.5rem;
  }
}

@media (max-width: 480px) {
  .rq-checkbox-grid {
    grid-template-columns: 1fr;
  }
}
/* =============================================
   Legal Pages — Terms of Use & Privacy Policy
   Shared stylesheet — legal.css
   Depends on: cs-eyebrow, dba-hero, container,
   and root CSS variables from the main stylesheet.
   ============================================= */

/* ── MAIN LAYOUT ── */
.legal-main {
  padding: 70px 0 90px;
  background: var(--offwhite);
}

.legal-grid {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 2.5rem;
  align-items: start;
}

/* ── TABLE OF CONTENTS SIDEBAR ── */
.legal-toc {
  position: sticky;
  top: 100px;
}

.legal-toc-inner {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 1.8rem;
}

/* TOC list */
.legal-toc-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  counter-reset: none;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.legal-toc-list li {
  border-bottom: 1px solid var(--border);
}

.legal-toc-list li:last-child {
  border-bottom: none;
}

.legal-toc-list a {
  display: block;
  padding: 0.55rem 0;
  font-size: 0.75rem;
  color: var(--mid);
  text-decoration: none;
  line-height: 1.4;
  transition: color 0.15s, padding-left 0.15s;
}

.legal-toc-list a:hover {
  color: var(--primary);
  padding-left: 4px;
}

/* Meta block */
.legal-toc-meta {
  padding-top: 1rem;
  margin-bottom: 1.2rem;
  border-top: 1px solid var(--border);
}

.legal-toc-meta p {
  font-size: 0.72rem;
  color: var(--muted);
  margin: 0 0 0.3rem;
  line-height: 1.5;
}

.legal-toc-meta strong {
  color: var(--dark);
  font-weight: 600;
}

/* Related page link */
.legal-toc-related {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  background: var(--primary-lt);
  border: 1px solid var(--border);
  border-radius: 10px;
  text-decoration: none;
  transition: border-color 0.2s;
}

.legal-toc-related:hover {
  border-color: var(--primary);
}

.legal-toc-related i:first-child {
  font-size: 0.85rem;
  color: var(--primary);
  flex-shrink: 0;
}

.legal-toc-related span {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--dark);
  flex: 1;
}

.legal-toc-arrow {
  font-size: 0.65rem;
  color: var(--primary);
  transition: transform 0.2s;
}

.legal-toc-related:hover .legal-toc-arrow {
  transform: translateX(3px);
}

/* ── DOCUMENT BODY ── */
.legal-body {
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.8rem;
}

/* Notice banner */
.legal-notice {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
  background: var(--primary-lt);
  border: 1px solid var(--border);
  border-left: 3px solid var(--primary);
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
  margin-bottom: 2.5rem;
}

.legal-notice i {
  font-size: 0.9rem;
  color: var(--primary);
  margin-top: 2px;
  flex-shrink: 0;
}

.legal-notice p {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.6;
  margin: 0;
}

.legal-notice strong {
  color: var(--dark);
}

/* Sections */
.legal-section {
  margin-bottom: 2.8rem;
  padding-bottom: 2.8rem;
  border-bottom: 1px solid var(--border);
}

.legal-section:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

/* Section headings */
.legal-section h2 {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  line-height: 1.3;
}

.legal-num {
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--primary);
  background: var(--primary-lt);
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  flex-shrink: 0;
}

/* Body text */
.legal-section p {
  font-size: 0.83rem;
  color: var(--mid);
  line-height: 1.8;
  margin-bottom: 0.9rem;
}

.legal-section p:last-child {
  margin-bottom: 0;
}

.legal-section a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.legal-section a:hover {
  text-decoration: underline;
}

/* Lists */
.legal-list {
  list-style: none;
  padding: 0;
  margin: 0.8rem 0 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}

.legal-list li {
  font-size: 0.82rem;
  color: var(--mid);
  line-height: 1.7;
  padding-left: 1.3rem;
  position: relative;
}

.legal-list li::before {
  content: '';
  position: absolute;
  left: 0;
  top: 0.62em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--primary);
  flex-shrink: 0;
}

.legal-list li strong {
  color: var(--dark);
  font-weight: 600;
}

/* Contact block inside document */
.legal-contact-block {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 1.2rem;
}

.legal-contact-row {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  padding: 0.9rem 1.1rem;
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.legal-contact-row i {
  font-size: 0.85rem;
  color: var(--primary);
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px;
  text-align: center;
}

.legal-contact-row strong {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--dark);
  display: block;
  margin-bottom: 0.2rem;
}

.legal-contact-row span {
  font-size: 0.77rem;
  color: var(--mid);
  line-height: 1.5;
}

.legal-contact-row a {
  color: var(--primary);
  text-decoration: none;
  font-weight: 600;
}

.legal-contact-row a:hover {
  text-decoration: underline;
}

/* ── CTA BAND ── */
.legal-cta {
  padding: 64px 0;
  background: white;
  border-top: 1px solid var(--border);
}

.legal-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2.2rem 2.5rem;
}

.legal-cta-text h3 {
  font-size: 1.2rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.4rem;
  line-height: 1.3;
}

.legal-cta-text p {
  font-size: 0.82rem;
  color: var(--mid);
  margin: 0;
  line-height: 1.6;
  max-width: 480px;
}

.legal-cta-actions {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  flex-shrink: 0;
}

.legal-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  border-radius: 10px;
  padding: 0.75rem 1.5rem;
  font-size: 0.84rem;
  font-weight: 700;
  text-decoration: none;
  transition: background 0.2s, border-color 0.2s, transform 0.2s;
  font-family: inherit;
}

.legal-cta-primary {
  background: var(--primary);
  color: white;
  border: 1px solid var(--primary);
}

.legal-cta-primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
  transform: translateY(-1px);
}

.legal-cta-ghost {
  background: transparent;
  color: var(--dark);
  border: 1px solid var(--border);
}

.legal-cta-ghost:hover {
  border-color: var(--primary);
  color: var(--primary);
}

/* ── RESPONSIVE ── */
@media (max-width: 1024px) {
  .legal-grid {
    grid-template-columns: 240px 1fr;
  }
}

@media (max-width: 860px) {
  .legal-grid {
    grid-template-columns: 1fr;
  }

  .legal-toc {
    position: static;
  }

  .legal-cta-inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 1.5rem;
  }
}

@media (max-width: 600px) {
  .legal-body {
    padding: 1.6rem 1.3rem;
  }

  .legal-cta-inner {
    padding: 1.5rem;
  }

  .legal-cta-actions {
    flex-direction: column;
    width: 100%;
  }

  .legal-cta-btn {
    width: 100%;
    justify-content: center;
  }
}
/* =============================================
   404 Error Page — Simple Styles
   ============================================= */

/* ======================================================
   HERO SECTION
   ====================================================== */

.e404-hero {
  position: relative;
  padding: 80px 0 70px;
  background: linear-gradient(135deg, #0A2F44 0%, #134B6B 50%, #0D3A52 100%);
}

.e404-hero-inner {
  position: relative;
  z-index: 1;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.4rem;
}

/* Simple "404" display */
.e404-code-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  line-height: 1;
}

.e404-digit {
  font-size: 7rem;
  font-weight: 900;
  color: white;
  letter-spacing: -0.03em;
  line-height: 1;
}

.e404-digit-mid {
  font-size: 7rem;
  font-weight: 900;
  color: var(--primary);
  letter-spacing: -0.03em;
  line-height: 1;
}

.e404-heading {
  font-size: 2.2rem;
  font-weight: 800;
  color: white;
  margin: 0;
  line-height: 1.2;
}

.e404-sub {
  font-size: 0.95rem;
  color: rgba(255, 255, 255, 0.65);
  max-width: 520px;
  line-height: 1.75;
  margin: 0;
}

/* ======================================================
   BODY SECTION
   ====================================================== */

.e404-body {
  padding: 70px 0 80px;
  background: var(--offwhite);
}

.e404-body-inner {
  display: grid;
  grid-template-columns: 1fr 340px;
  gap: 3rem;
  align-items: start;
}

/* ── LEFT ─────────────────────────────────────────── */

.e404-eyebrow {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  display: block;
  margin-bottom: 0.5rem;
}

.e404-trail {
  margin-bottom: 2rem;
}

.e404-trail-path {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 1rem;
}

.e404-trail-path i {
  color: var(--primary);
  font-size: 0.82rem;
  flex-shrink: 0;
}

.e404-trail-url {
  font-size: 0.82rem;
  color: var(--mid);
  font-family: 'Courier New', monospace;
  word-break: break-all;
}

.e404-actions-label {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-bottom: 1rem;
}

.e404-actions-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.e404-action-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.2rem 1.3rem;
  text-decoration: none;
  transition: all 0.2s ease;
}

.e404-action-card:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(44, 82, 130, 0.1);
  text-decoration: none;
}

.e404-action-card--primary {
  background: var(--primary);
  border-color: var(--primary);
}

.e404-action-card--primary .e404-ac-icon {
  background: rgba(255, 255, 255, 0.15);
}

.e404-action-card--primary .e404-ac-icon i {
  color: white;
}

.e404-action-card--primary .e404-ac-text strong {
  color: white;
}

.e404-action-card--primary .e404-ac-text span {
  color: rgba(255, 255, 255, 0.7);
}

.e404-action-card--primary .e404-ac-arrow {
  color: rgba(255, 255, 255, 0.6);
}

.e404-action-card--primary:hover {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

.e404-ac-icon {
  width: 40px;
  height: 40px;
  background: var(--primary-lt);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.e404-ac-icon i {
  font-size: 0.9rem;
  color: var(--primary);
}

.e404-ac-text {
  flex: 1;
  min-width: 0;
}

.e404-ac-text strong {
  display: block;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.15rem;
  line-height: 1.3;
}

.e404-ac-text span {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.4;
}

.e404-ac-arrow {
  font-size: 0.7rem;
  color: var(--border);
  flex-shrink: 0;
  transition: transform 0.2s ease;
}

.e404-action-card:hover .e404-ac-arrow {
  transform: translateX(3px);
}

/* ── RIGHT PANEL ──────────────────────────────────── */

.e404-panel {
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  background: white;
}

.e404-panel-head {
  background: var(--primary);
  padding: 1.2rem 1.5rem;
  display: flex;
  align-items: center;
  gap: 0.7rem;
}

.e404-panel-head i {
  font-size: 1rem;
  color: white;
}

.e404-panel-head span {
  font-size: 0.88rem;
  font-weight: 700;
  color: white;
  letter-spacing: 0.02em;
}

.e404-panel-body {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.e404-panel-group {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.e404-panel-group-label {
  font-size: 0.68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--primary);
  margin-bottom: 0.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}

.e404-panel-link {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.45rem 0.3rem;
  font-size: 0.8rem;
  color: var(--mid);
  text-decoration: none;
  border-radius: 8px;
  transition: all 0.2s ease;
}

.e404-panel-link i {
  font-size: 0.55rem;
  color: var(--border);
  transition: color 0.2s ease;
  flex-shrink: 0;
}

.e404-panel-link:hover {
  color: var(--primary);
  background: var(--primary-lt);
  padding-left: 0.7rem;
  text-decoration: none;
}

.e404-panel-link:hover i {
  color: var(--primary);
}

/* ======================================================
   CTA BAND
   ====================================================== */

.e404-cta-band {
  padding: 60px 0;
  background: var(--primary);
}

.e404-cta-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
  flex-wrap: wrap;
}

.e404-cta-content h2 {
  font-size: 1.9rem;
  margin-bottom: 0.5rem;
  color: white;
  font-weight: 700;
}

.e404-cta-content p {
  font-size: 1rem;
  margin-bottom: 0;
  color: rgba(255, 255, 255, 0.85);
}

.e404-cta-button {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: white;
  color: var(--primary);
  padding: 12px 28px;
  border-radius: 40px;
  font-weight: 600;
  text-decoration: none;
  transition: all 0.2s ease;
}

.e404-cta-button:hover {
  background: var(--dark);
  color: white;
  text-decoration: none;
  transform: translateY(-2px);
}

/* ======================================================
   RESPONSIVE
   ====================================================== */

@media (max-width: 1024px) {
  .e404-body-inner {
    grid-template-columns: 1fr;
    gap: 2rem;
  }

  .e404-right {
    max-width: 500px;
  }
}

@media (max-width: 768px) {
  .e404-digit,
  .e404-digit-mid {
    font-size: 5rem;
  }

  .e404-heading {
    font-size: 1.7rem;
  }

  .e404-actions-grid {
    grid-template-columns: 1fr;
  }

  .e404-right {
    max-width: 100%;
  }

  .e404-cta-inner {
    flex-direction: column;
    text-align: center;
  }

  .e404-cta-content h2 {
    font-size: 1.5rem;
  }
}

@media (max-width: 480px) {
  .e404-digit,
  .e404-digit-mid {
    font-size: 3.8rem;
  }

  .e404-hero {
    padding: 55px 0 50px;
  }
}

/* =============================================
   FOOTER
============================================= */
footer {
  background: var(--navy);
  color: rgba(255,255,255,.6);
  padding: 0;
}

/* --- Brand Row --- */
.footer-brand-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  padding: 44px 0 25px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  flex-wrap: wrap;
}

.footer-brand-left {
  max-width: 800px;
  flex: 1;
}

.footer-logo {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--white);
  letter-spacing: .5px;
  margin-bottom: 14px;
}

.footer-logo span {
  color: var(--accent-lt);
}

.footer-brand-left p {
  font-size: .82rem;
  line-height: 1.8;
  color: rgba(255,255,255,.45);
  margin: 0;
}

.footer-brand-right {
  display: flex;
  flex-direction: row;
  gap: 12px;
  margin-top: 30px;
  flex-shrink: 0;
}

.contact-pill {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 16px;
  background: rgba(255,255,255,.05);
  border: 0.5px solid rgba(255,255,255,.1);
  border-radius: 8px;
  font-size: .82rem;
  color: rgba(255,255,255,.6);
  white-space: nowrap;
}

.contact-pill i {
  color: var(--accent-lt);
  width: 14px;
  font-size: .85rem;
}

/* --- Nav Columns Row --- */
.footer-nav-row {
  padding: 36px 0 0;
}

.footer-cat-label {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1.4px;
  color: rgba(255,255,255,.50);
  margin-bottom: 8px;
  white-space: nowrap;
}

.footer-sub-label {
  display: block;
  font-size: .65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 1px;
  color: rgba(255,255,255,.35);
  margin-top: 12px;
  margin-bottom: 5px;
  white-space: nowrap;
}

.footer-nav-group {
  margin-bottom: 24px;
}

.footer-nav-group:last-child {
  margin-bottom: 0;
}

ul.footer-sublinks {
  list-style: none;
  padding: 0 0 0 10px;
  margin: 0;
  border-left: 1px solid rgba(255,255,255,.07);
}

ul.footer-sublinks li {
  margin-bottom: 5px;
}

ul.footer-sublinks li a {
  font-size: .8rem;
  color: rgba(255,255,255,.50);
  text-decoration: none;
  white-space: nowrap;
  transition: color .2s;
  display: inline-block;
}

ul.footer-sublinks li a:hover {
  color: var(--accent-lt);
}

/* --- Footer Bottom Bar --- */
.footer-bottom {
  border-top: 1px solid rgba(255,255,255,.07);
  padding: 1.1rem 0;
  margin-top: 2.5rem;
  font-size: .75rem;
  color: rgba(255,255,255,.40);
}

.footer-bottom a {
  color: rgba(255,255,255,.40);
  text-decoration: none;
  transition: color .2s;
}

.footer-bottom a:hover {
  color: var(--accent-lt);
}


/* ===== PAGE: SHORT-TERM & SKILL DEVELOPMENT ===== */


.sd-hl {
  color: var(--accent);
}

.sd-section-head {
  margin-bottom: 3rem;
}

.sd-section-head h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin-bottom: 0.5rem;
}

.sd-section-head p {
  max-width: 560px;
  margin: 0 auto;
  color: var(--muted);
  font-size: 0.9rem;
}

/* ---- Hero ---- */
.sd-hero {
  padding: 50px 0 45px;
  background: linear-gradient(135deg, var(--hero-gradient-start), var(--hero-gradient-mid), var(--hero-gradient-end));
}

.sd-hero-main-title {
  font-size: 2.2rem;
  font-weight: 800;
  color: #fff;
  line-height: 1.25;
  margin-bottom: 0.75rem;
}

.sd-hero-subtitle {
  font-size: 1rem;
  color: rgba(255,255,255,0.8);
  max-width: 700px;
  margin: 0 auto;
}

/* ---- Section 1: Why Short-Term ---- */
.sd-why-section {
  padding: 80px 0;
  background: white;
}

.sd-why-glass-panel {
  background: var(--offwhite);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 2rem;
}

.sd-why-quote {
  border-left: 3px solid var(--accent);
  padding-left: 1.1rem;
  margin-bottom: 1.5rem;
}

.sd-why-quote .fa-quote-left {
  color: var(--accent);
  font-size: 1.2rem;
  margin-bottom: 0.5rem;
  display: block;
}

.sd-why-quote p {
  font-size: 0.92rem;
  color: var(--mid);
  line-height: 1.75;
  font-style: italic;
  margin-bottom: 0.4rem;
}

.sd-why-quote span {
  font-size: 0.8rem;
  color: var(--muted);
  font-weight: 600;
}

.sd-why-features {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}

.sd-why-feature-item {
  display: flex;
  align-items: center;
  gap: 10px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--dark);
}

.sd-why-feature-item i {
  color: var(--primary);
  font-size: 1rem;
  flex-shrink: 0;
}

.sd-check-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.sd-check-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.sd-check-item i {
  color: var(--green);
  margin-top: 3px;
  flex-shrink: 0;
}

.sd-check-item span {
  font-size: 0.88rem;
  color: var(--mid);
}

/* ---- Section 2: Popular Tracks ---- */
.sd-tracks-section {
  padding: 80px 0;
  background: var(--offwhite);
}

.sd-track-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  overflow: hidden;
  height: 100%;
  transition: box-shadow 0.25s, transform 0.25s;
}

.sd-track-card:hover {
  box-shadow: var(--shadow-lg);
  transform: translateY(-4px);
}

.sd-track-card.featured {
  border-color: var(--accent);
  border-width: 2px;
}

.sd-track-header {
  background: var(--primary);
  padding: 1.3rem 1.5rem 1rem;
  position: relative;
}

.sd-track-header i {
  font-size: 1.6rem;
  color: rgba(255,255,255,0.9);
  margin-bottom: 0.5rem;
  display: block;
}

.sd-track-header h5 {
  font-size: 1rem;
  font-weight: 800;
  color: white;
  margin: 0;
}

.sd-track-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: var(--orange);
  color: white;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 0.2rem 0.6rem;
  border-radius: 50px;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.sd-track-body {
  padding: 1.3rem 1.5rem;
}

.sd-track-body p {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: 1rem;
}

.sd-track-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  margin-bottom: 1rem;
}

.sd-track-meta span {
  display: flex;
  align-items: center;
  gap: 5px;
  font-size: 0.8rem;
  color: var(--muted);
  background: var(--offwhite);
  border: 1px solid var(--border);
  padding: 0.25rem 0.7rem;
  border-radius: 50px;
}

.sd-track-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

.sd-track-tags span {
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--primary);
  background: var(--primary-lt);
  padding: 0.2rem 0.6rem;
  border-radius: 6px;
}

/* ---- Section 3: Learning Format ---- */
.sd-format-section {
  padding: 80px 0;
  background: white;
}

.sd-format-card {
  text-align: center;
  padding: 2rem 1.5rem;
  border: 1px solid var(--border);
  border-radius: 16px;
  background: var(--offwhite);
  height: 100%;
  transition: box-shadow 0.25s, background 0.25s;
}

.sd-format-card:hover {
  background: white;
  box-shadow: var(--shadow-md);
}

.sd-format-icon {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: var(--primary-lt);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1rem;
}

.sd-format-icon i {
  font-size: 1.4rem;
  color: var(--primary);
}

.sd-format-card h6 {
  font-size: 0.95rem;
  font-weight: 800;
  color: var(--dark);
  margin-bottom: 0.6rem;
}

.sd-format-card p {
  font-size: 0.85rem;
  color: var(--mid);
  line-height: 1.7;
  margin: 0;
}

/* ---- Section 4: Skill Outcomes / Stats ---- */
.sd-outcomes-section {
  padding: 80px 0;
  background: var(--offwhite);
}

.sd-stat-row {
  display: flex;
  justify-content: center;
  gap: 2rem;
  flex-wrap: wrap;
  margin-bottom: 3.5rem;
}

.sd-stat-box {
  text-align: center;
  flex: 1 1 160px;
  max-width: 200px;
  background: white;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 1.5rem 1rem;
}

.sd-stat-box .sd-stat-num {
  font-size: 2rem;
  font-weight: 800;
  color: var(--primary);
  display: block;
  line-height: 1;
  margin-bottom: 0.4rem;
}

.sd-stat-box .sd-stat-label {
  font-size: 0.82rem;
  color: var(--muted);
  line-height: 1.4;
}

.sd-outcome-card {
  background: white;
  border: 1px solid var(--border);
  border-left: 4px solid var(--primary);
  border-radius: 12px;
  padding: 1.3rem 1.5rem;
  height: 100%;
  display: flex;
  gap: 12px;
  align-items: flex-start;
}

.sd-outcome-card i {
  font-size: 1.3rem;
  color: var(--primary);
  flex-shrink: 0;
  margin-top: 2px;
}

.sd-outcome-card strong {
  display: block;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 0.3rem;
}

.sd-outcome-card p {
  font-size: 0.84rem;
  color: var(--mid);
  line-height: 1.65;
  margin: 0;
}

/* ---- Section 5: FAQ ---- */
.sd-faq-section {
  padding: 80px 0;
  background: white;
}

.sd-faq-item {
  border: 1px solid var(--border);
  border-radius: 12px;
  margin-bottom: 0.75rem;
  overflow: hidden;
}

.sd-faq-item .accordion-button {
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--dark);
  background: white;
  padding: 1.1rem 1.4rem;
}

.sd-faq-item .accordion-button:not(.collapsed) {
  color: var(--primary);
  background: var(--primary-lt);
  box-shadow: none;
}

.sd-faq-item .accordion-button::after {
  filter: none;
}

.sd-faq-item .accordion-button:not(.collapsed)::after {
  filter: invert(27%) sepia(75%) saturate(600%) hue-rotate(185deg);
}

.sd-faq-item .accordion-body {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.75;
  padding: 1rem 1.4rem 1.2rem;
  background: white;
}

/* ---- CTA Band ---- */
.sd-cta-band {
  background: linear-gradient(135deg, var(--hero-gradient-start), var(--hero-gradient-mid));
  padding: 55px 0;
}

.sd-cta-band h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: white;
  margin-bottom: 0.5rem;
}

.sd-cta-band h2 span {
  color: #63cff5;
}

.sd-cta-band p {
  color: rgba(255,255,255,0.75);
  font-size: 1rem;
  margin: 0;
}

.sd-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: white;
  color: var(--primary);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.85rem 2rem;
  border-radius: 50px;
  border: none;
  transition: background 0.2s, transform 0.2s;
  text-decoration: none;
}

.sd-cta-btn:hover {
  background: var(--primary-lt);
  color: var(--primary-dk);
  transform: translateY(-2px);
}

.dba-hero {
  padding: 50px 0 45px;
}
 
.dba-hero-title {
  font-size: 2.2rem;
  margin-bottom: 0.75rem;
  color: white;
}
 
.ail-hero-sub {
  font-size: 1rem;
  max-width: 700px;
  margin: 0 auto;
  color: rgba(255,255,255,0.9);
}
.text-primary {
  color: var(--primary) !important;
}

/* --- Responsive --- */
@media (max-width: 991px) {
  .footer-brand-row {
    flex-direction: column;
    gap: 24px;
  }
  .footer-brand-right {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

@media (max-width: 576px) {
  .footer-brand-right {
    flex-direction: column;
    width: 100%;
  }
  .contact-pill {
    justify-content: center;
  }
}

@media (max-width: 767px) {
  .footer-nav-row .col-sm-6 {
    margin-bottom: 1.5rem;
  }
  .sd-hero-main-title { font-size: 1.6rem; }
  .sd-section-head h2 { font-size: 1.5rem; }
  .sd-stat-row { gap: 1rem; }
  .sd-stat-box { flex: 1 1 130px; }
}
.w-36 {
  width: 36%;
}
.w-16 {
  width: 16%;
}
.w-12 {
  width: 12%;
}
.w-14 {
  width: 14%;
}
.w-10 {
  width: 10%;
}
.w-68 {
  width: 68%;
}
.w-54 {
  width: 54%;
}
.w-92 {
  width: 92%;
}
.sec-pad {
  padding: 80px 0;
}
.gnp-acc-body {
  display: none;
}
.sec-top-tit {
  font-size:1.9rem;
  font-weight:800;
  color:var(--dark);
  line-height:1.3;
  margin-bottom:1.2rem;
}
.sec-top-para {
  font-size:0.95rem;
  color:var(--mid);
  line-height:1.8;
  margin-bottom:1rem;
}
.udba-stat-block.last {
  grid-column: span 2; 
  text-align: center;
}
.hei-slide-top.bg-one {
  background:linear-gradient(135deg,#1a3a5c 0%,#2c5f9e 100%);
}
.hei-slide-top.bg-two {
  background:linear-gradient(135deg,#1e3a5f 0%,#2563a8 100%);
}
.hei-slide-top.bg-three {
  background:linear-gradient(135deg,#1a4a30 0%,#276749 100%);
}
.hei-slide-top.bg-four {
 background:linear-gradient(135deg,#4a2800 0%,#744210 100%);
}
.hei-slide-top.bg-five {
  background:linear-gradient(135deg,#2d1b6e 0%,#553c9a 100%);
}
.hei-slide-top.bg-six {
  background:linear-gradient(135deg,#5e1040 0%,#97266d 100%);
}
.about-image-placeholder h5 {
  color: var(--primary);
  font-weight: 700;
  margin-bottom: 0.5rem;
}
.about-image-icons {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-top: 1rem;
}
.about-image-icon-item {
  text-align: center;
}
.about-image-icon-item i {
  color: var(--accent);
  font-size: 1.2rem;
}
.about-image-icon-item p {
  font-size: 0.7rem;
  margin-top: 0.3rem;
}
.services-section-h2 span {
  color: #0f5c8a;
}
.hiw-how-easy-span {
  color: #0f5c8a;
}
.platform-section {
  background: #f8fafc;
}
.platform-h2 span {
  color: #0f5c8a;
}
.testimonials-section {
  padding: 30px;
}
.testimonials-h2 span {
  color: #0f5c8a;
}
.cta-next-level span {
  color: #0f5c8a;
}
.cta-form-body-label {
  font-size: .78rem;
  margin-bottom: .5rem;
  font-weight: 600;
  color: var(--muted);
}
.btn-submit-full-primary {
  background: var(--primary);
}
.pmp-overview {
  padding: 70px 0;
}
.pmp-overview-h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin-bottom: 1.2rem;
}
.pmp-feature-point {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.pmp-feature-point i {
  color: var(--green);
  margin-top: 3px;
  flex-shrink: 0;
}
.pmp-feature-point span {
  font-size: 0.88rem;
  color: var(--mid);
}
.pmp-icon-panel {
  background: var(--offwhite);
  border-radius: 24px;
  padding: 2rem;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-md);
}
.pmp-icon-card {
  background: white;
  border-radius: 14px;
  padding: 1.1rem 1rem;
  border: 1.5px solid var(--border);
  transition: all .25s;
  text-align: center;
}
.pmp-icon-card:hover {
  border-color: var(--primary);
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(27,79,114,0.12);
}
.pmp-icon-circle {
  width: 48px;
  height: 48px;
  background: var(--primary-lt);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 0.7rem;
}
.pmp-icon-circle i {
  color: var(--primary);
  font-size: 1.15rem;
}
.pmp-icon-card-title {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--dark);
  line-height: 1.3;
}
.pmp-icon-card-sub {
  font-size: 0.7rem;
  color: var(--muted);
  margin-top: 3px;
}
.pmp-curriculum-h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
}
.pmp-features-h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin-bottom: 1.2rem;
}
.pmp-faq-h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
}
 .sec2-head {
    margin-bottom: 2rem;
  }
  .sec2-h2 {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.3;
  }
  .sec2-sub {
    color: var(--muted);
    max-width: 600px;
    margin: 0.8rem auto 0;
  }
  .sec3-h2 {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.3;
  }
  .sec3-sub {
    color: var(--muted);
    max-width: 600px;
    margin: 0.8rem auto 0;
  }
  .career-card-title {
    color: var(--primary);
    margin-bottom: 0.5rem;
    font-weight: 700;
  }
  .career-card-desc {
    color: var(--mid);
  }
  .sec4-head {
    margin-bottom: 2rem;
  }
  .sec4-h2 {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.3;
  }
  .sec5-head {
    margin-bottom: 2rem;
  }
  .sec5-h2 {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.3;
  }
  .eng-faq-section {
    padding: 80px 0;
    background: var(--offwhite);
  }
  .eng-faq-h2 {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--dark);
    line-height: 1.3;
  }
/* Additional carousel styles - only what's needed for horizontal scroll */
.cs-filter-section-inline {
  margin: 2rem 0 1.5rem;
  padding-top: 0.5rem;
}

.cs-carousel-wrapper {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 2rem 0;
}

.cs-carousel-container {
  overflow: hidden;
  flex: 1;
}

.cs-carousel-track {
  display: flex;
  gap: 1.5rem;
  transition: transform 0.3s ease-in-out;
  will-change: transform;
}

.cs-carousel-card {
  flex: 0 0 calc(33.333% - 1rem);
  min-width: calc(33.333% - 1rem);
}

.cs-carousel-arrow {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: white;
  border: 1px solid var(--border);
  color: var(--primary);
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.2s ease;
  flex-shrink: 0;
}

.cs-carousel-arrow:hover:not(:disabled) {
  background: var(--primary);
  color: white;
  border-color: var(--primary);
}

.cs-carousel-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

@media (max-width: 1024px) {
  .cs-carousel-card {
    flex: 0 0 calc(50% - 0.75rem);
    min-width: calc(50% - 0.75rem);
  }
}

@media (max-width: 768px) {
  .cs-carousel-card {
    flex: 0 0 100%;
    min-width: 100%;
  }
  
  .cs-carousel-wrapper {
    gap: 0.5rem;
  }
  
  .cs-carousel-arrow {
    width: 36px;
    height: 36px;
    font-size: 0.9rem;
  }
  .ds-rm-rail {
    flex-direction: column;
    align-items: center;
  }
  .ds-rm-connector {
    justify-content: center;
    margin-top: 15px;
  }
  .ds-rm-line--lit,.ds-rm-line--hidden {
    display: none;
  }
  .ds-rm-detail-grid {
    grid-template-columns: none;
  }
}
.ds-feature-point {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.ds-feature-point i {
  color: var(--green);
  margin-top: 3px;
  flex-shrink: 0;
}
.ds-feature-point span {
  font-size: 0.88rem;
  color: var(--mid);
}
.ds-roadmap-section {
  padding: 50px 0;
  background: var(--offwhite);
}
.ds-roadmap-h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
}
.ds-rm-card-spaced {
  margin-right: 20px;
}
.ds-rm-card-last {
  margin-right: 0;
}
.ds-who-section {
  padding: 50px 0;
  background: white;
}
.ds-who-h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
}
.ds-stack-section {
  padding: 50px 0;
  background: var(--offwhite);
}
.ds-stack-h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
}
.ds-why-section {
  padding: 50px 0;
  background: white;
}
.ds-why-h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
}
.ds-faq-section {
  padding: 40px 0;
  background: var(--offwhite);
}
.ds-faq-h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
}
.ds-rm-rail-nogap {
  gap: 0;
}
.cyber-feature-point {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.cyber-feature-point i {
  color: var(--green);
  margin-top: 3px;
  flex-shrink: 0;
}
.cyber-feature-point span {
  font-size: 0.88rem;
  color: var(--mid);
}
.cyber-path-h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
}
.ctp-panel-h3 {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--dark);
  margin: 0.8rem 0 0.8rem;
}
.ctp-panel-desc {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.7;
  margin-bottom: 0.8rem;
}
.ctp-panel-desc-last {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.7;
}
.cyber-tools-h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
}
.cyber-tools-sub {
  max-width: 560px;
  margin: 0.8rem auto 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.ctc-cat-header-primary {
  background: var(--primary);
}
.cyber-why-h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
  margin-bottom: 1.2rem;
}
.cyber-why-desc {
  font-size: 0.95rem;
  color: var(--mid);
  line-height: 1.8;
  margin-bottom: 1.5rem;
}
.cyber-why-checklist {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.cyber-why-check-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0.9rem 1.1rem;
  background: white;
  border-radius: 12px;
  border: 1px solid var(--border);
}
.cyber-why-check-item i {
  color: var(--green);
  font-size: 1.1rem;
  flex-shrink: 0;
}
.cyber-why-check-item span {
  font-size: 0.88rem;
  color: var(--dark);
  font-weight: 600;
}
.cwhy-cards-row {
  margin: revert-layer;
}
.cyber-certs-h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
}
.cyber-certs-sub {
  max-width: 560px;
  margin: 0.8rem auto 0;
  color: var(--muted);
  font-size: 0.9rem;
}
.cyber-faq-h2 {
  font-size: 1.9rem;
  font-weight: 800;
  color: var(--dark);
  line-height: 1.3;
}
.form-select:focus {
  box-shadow: none;
}
.nav-item.has-drop.active .drop-panel.drop-wide{
  display: block;
}
.nav-item.has-drop.active button.nav-link  {
  margin: auto;
}
@media (max-width: 575px) {
  .four-card-row > .four-card-item {
    flex: 0 0 100%;
    max-width: 100%;
  }
  .acd-trigger {
    flex-direction: column;
  }
  .mpg-row {
    flex-direction: column;
  }
  .specs-row {
    flex-direction: column;
    align-items: center;
  }
  .why-hero-card {
    padding: 24px;
  }
  .udba-stats-grid,.pu-numbers-inner {
    display: flex;
    flex-direction: column;
  }
  .udba-pillar-row {
    flex-direction: column;
    gap: 10px;
  }
  .pu-testi-author {
    flex-wrap: wrap;
  }
  .pu-partner-grid {
    padding: 20px;
  }
  .pu-feature-item {
    flex-direction: column;
  }
  .ls-numbers-grid {
    grid-template-columns: 1fr;
  }
  .cb-why-stats {
    padding: 24px;
  }
  .cb-courses-row-4 .cb-course-card, .cb-courses-row-3 .cb-course-card {
    min-width: 100%;
  }
  .ep-panel-left,.ep-panel-right,.ep-model-right {
    padding: 24px;
  }
  .cta-form-card .row.g-2 .col-6::last-child {
  width: 100%;
}
}

.rdba-req-modern-btn,.pu-partner-cta,.ep-model-cta {
  float: right;
}
.ep-model-cta {
  margin-left: auto;
}
.faq-cta-btn {
  justify-content: end;
}
.nav-item.has-drop.active .drop-panel.drop-sm{
  display: block;
}