/* =============================================================
   IBACTP® — International Board of AI, Cybersecurity
   & Technology Professionals
   Design system + page styles
   ============================================================= */

/* ---------- 1. Tokens ---------- */
:root {
  --navy-950: #061532;
  --navy-900: #08214a;
  --navy-800: #0b2a5c;
  --navy-700: #12386f;
  --navy-600: #1a4585;
  --blue-600: #1878e8;
  --blue-500: #2f8cf0;
  --blue-400: #5aa7f5;
  --blue-050: #eaf3fe;
  --gold-500: #e9b949;
  --gold-400: #f2cc74;

  --ink: #16233c;
  --ink-soft: #3d4d68;
  --muted: #64748b;
  --line: #dfe6ef;
  --line-soft: #eef2f7;
  --surface: #ffffff;
  --surface-alt: #f5f7fb;
  --surface-tint: #eef3f9;

  --radius-sm: 4px;
  --radius: 8px;
  --radius-lg: 14px;

  --shadow-sm: 0 1px 2px rgba(16, 34, 63, .06), 0 1px 3px rgba(16, 34, 63, .05);
  --shadow: 0 4px 14px rgba(16, 34, 63, .08);
  --shadow-lg: 0 18px 46px rgba(9, 27, 58, .14);

  --container: 1380px;
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  /* Headlines use the wider geometric face the client's artwork is set in. */
  /* Client's type guide: Inter only, across display and body. */
  --font-display: 'Inter', -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
}

/* ---------- 2. Base ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: var(--font);
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4, h5 { margin: 0; line-height: 1.2; font-weight: 700; letter-spacing: -0.015em; }
p { margin: 0; }
img, svg { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
ul { margin: 0; padding: 0; list-style: none; }
button { font: inherit; cursor: pointer; }

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: 24px;
}

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* Skip link for keyboard users */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  background: var(--blue-600); color: #fff; padding: 10px 18px;
  border-radius: var(--radius); font-weight: 600; transition: top .2s;
}
.skip-link:focus { top: 12px; }

:focus-visible { outline: 3px solid var(--blue-400); outline-offset: 2px; }

/* ---------- 3. Type & section helpers ---------- */
.section { padding: 72px 0; }
.section--tight { padding: 52px 0; }
.section--alt { background: var(--surface-alt); }

.section-head { margin-bottom: 34px; }
.section-head--center { text-align: center; max-width: 800px; margin-inline: auto; }
.section-title { font-size: 30px; letter-spacing: -0.02em; }
.section-title--lg { font-size: 34px; }
.section-lede { margin-top: 10px; color: var(--muted); font-size: 16px; }

.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .12em;
  text-transform: uppercase; color: var(--blue-600);
}

/* ---------- 4. Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  padding: 13px 26px; border-radius: var(--radius-sm); border: 1.5px solid transparent;
  font-size: 13.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  transition: background .18s, color .18s, border-color .18s, transform .18s;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn--primary { background: var(--blue-600); color: #fff; }
.btn--primary:hover { background: #1268cf; }
.btn--ghost { border-color: rgba(255, 255, 255, .55); color: #fff; }
.btn--ghost:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }
.btn--outline { border-color: var(--line); color: var(--navy-800); background: #fff; }
.btn--outline:hover { border-color: var(--blue-600); color: var(--blue-600); }
.btn--gold { background: var(--gold-500); color: var(--navy-900); }
.btn--gold:hover { background: var(--gold-400); }
.btn--sm { padding: 9px 18px; font-size: 12px; }
.btn--block { width: 100%; }

.link-cta {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--blue-600);
}
.link-cta svg { transition: transform .18s; }
.link-cta:hover svg { transform: translateX(3px); }

/* ---------- 5. Utility bar ---------- */
.utility {
  background: var(--navy-950);
  color: rgba(255, 255, 255, .82);
  font-size: 12.5px;
}
.utility__inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 40px; }
.utility__list { display: flex; align-items: center; gap: 22px; }
.utility__list a:hover { color: #fff; }
.utility__right { display: flex; align-items: center; gap: 20px; }
.utility__apply {
  /* Gold, as in the client's header — it also picks up the logo's accent. */
  background: var(--gold-500); color: var(--navy-900); font-weight: 700; letter-spacing: .07em;
  text-transform: uppercase; font-size: 11.5px; padding: 8px 16px; border-radius: 4px;
}
.utility__apply:hover { background: var(--gold-400); }

/* ---------- 6. Masthead / navigation ---------- */
.masthead { background: #fff; border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 60; }
.masthead__inner { display: flex; align-items: center; gap: 18px; min-height: 92px; }

.brand { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.brand__mark {
  /* Sized by width so the lockup never stretches; height follows the aspect. */
  width: 170px; height: auto; object-fit: contain;
}
.brand__text { display: none; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 0; }
.nav__list { display: flex; align-items: center; }
.nav__item { position: relative; }
.nav__row { display: flex; align-items: center; }
.nav__head, .nav__foot, .nav__acc, .nav-scrim { display: none; }
.nav__link {
  display: inline-flex; align-items: center; gap: 5px; white-space: nowrap;
  padding: 35px 9px; font-size: 11.5px; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase; color: var(--navy-800);
}
.nav__link:hover { color: var(--blue-600); }
.nav__caret { width: 9px; height: 9px; opacity: .6; }

.nav__panel {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px);
  min-width: 260px; background: #fff; border: 1px solid var(--line);
  border-top: 3px solid var(--blue-600); border-radius: 0 0 var(--radius) var(--radius);
  box-shadow: var(--shadow-lg); padding: 10px; opacity: 0; visibility: hidden;
  transition: opacity .16s, transform .16s, visibility .16s; z-index: 70;
}
/* Hover-reveal is desktop only. On touch it would fight the accordion and
   re-apply the dropdown's absolute transform inside the drawer. */
@media (min-width: 1025px) {
  .nav__item:hover .nav__panel:not(.nav__panel--mega),
  .nav__item:focus-within .nav__panel:not(.nav__panel--mega) { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); }
  .nav__item--mega:hover .nav__panel--mega,
  .nav__item--mega:focus-within .nav__panel--mega { opacity: 1; visibility: visible; }
}
/* Plain dropdowns only — the mega panel styles its own links. */
.nav__panel:not(.nav__panel--mega) a {
  display: block; padding: 9px 14px; font-size: 13.5px; color: var(--ink-soft);
  border-radius: var(--radius-sm);
}
.nav__panel:not(.nav__panel--mega) a:hover { background: var(--blue-050); color: var(--blue-600); }

.nav__panel--wide { min-width: 620px; display: grid; grid-template-columns: repeat(2, 1fr); gap: 2px 14px; }

.masthead__actions { display: flex; align-items: center; gap: 14px; flex-shrink: 0; }
.icon-btn {
  display: grid; place-items: center; width: 44px; height: 44px;
  border: 0; background: transparent; color: var(--navy-800); border-radius: 50%;
}
.icon-btn:hover { background: var(--surface-tint); }

.nav-toggle { display: none; }


/* ---------- 6b. Mobile navigation drawer ---------- */
@media (max-width: 1024px) {
  .nav-scrim {
    display: block; position: fixed; inset: 0; z-index: 90;
    background: rgba(6, 21, 50, .55); backdrop-filter: blur(2px);
    opacity: 0; transition: opacity .28s ease;
  }
  .nav-scrim[hidden] { display: none; }
  body.nav-open .nav-scrim { opacity: 1; }

  /* The drawer itself */
  .nav {
    display: block; position: fixed; top: 0; right: 0; bottom: 0; z-index: 100;
    width: min(88vw, 380px); margin: 0; background: #fff;
    box-shadow: -18px 0 46px rgba(6, 21, 50, .28);
    transform: translateX(100%); transition: transform .3s ease;
    overflow-y: auto; overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.nav-open .nav { transform: translateX(0); }

  .nav__head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 16px 18px; border-bottom: 1px solid var(--line);
    position: sticky; top: 0; background: #fff; z-index: 2;
  }
  .nav__head-title {
    font-size: 12px; font-weight: 800; letter-spacing: .14em;
    text-transform: uppercase; color: var(--muted);
  }
  .nav__close { display: grid; }

  .nav__list { display: block; padding: 6px 0; }
  .nav__item { border-bottom: 1px solid var(--line-soft); }

  .nav__row { align-items: stretch; }
  .nav__link {
    flex: 1; padding: 0 18px; min-height: 54px; font-size: 13.5px;
    letter-spacing: .04em; white-space: normal;
  }
  .nav__caret { display: none; }

  /* +/- accordion trigger — 54px square keeps the touch target comfortable */
  .nav__acc {
    display: grid; place-items: center; width: 54px; min-height: 54px;
    border: 0; border-left: 1px solid var(--line-soft); background: transparent;
    color: var(--navy-800); flex-shrink: 0;
  }
  .nav__acc:hover { background: var(--surface-alt); }
  .nav__acc-icon { position: relative; display: block; width: 14px; height: 14px; }
  .nav__acc-icon::before,
  .nav__acc-icon::after {
    content: ''; position: absolute; left: 50%; top: 50%; background: currentColor;
    transform: translate(-50%, -50%); transition: opacity .2s, transform .2s;
  }
  .nav__acc-icon::before { width: 14px; height: 2px; }
  .nav__acc-icon::after  { width: 2px; height: 14px; }
  .nav__acc[aria-expanded='true'] { color: var(--blue-600); }
  .nav__acc[aria-expanded='true'] .nav__acc-icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }

  /* Accordion panel */
  .nav__panel,
  .nav__panel--wide {
    position: static; transform: none; opacity: 1; visibility: visible;
    display: block; min-width: 0; grid-template-columns: none;
    border: 0; border-radius: 0; box-shadow: none; padding: 0;
    background: var(--surface-alt);
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .3s ease, visibility 0s .3s;
  }
  .nav__item.is-open .nav__panel {
    max-height: 620px; visibility: visible;
    transition: max-height .3s ease, visibility 0s 0s;
  }
  .nav__panel a {
    padding: 12px 18px 12px 30px; font-size: 13.5px; min-height: 44px;
    display: flex; align-items: center; border-radius: 0;
  }
  .nav__panel a + a { border-top: 1px solid rgba(0, 0, 0, .04); }

  .nav__foot {
    display: flex; flex-direction: column; gap: 10px; align-items: stretch;
    padding: 20px 18px 28px;
  }
  .nav__foot-link {
    font-size: 13.5px; font-weight: 600; color: var(--navy-800);
    padding: 10px 0; min-height: 44px; display: flex; align-items: center;
  }

  .masthead__cta { display: none; }
  .masthead__actions { margin-left: auto; }
  .brand__mark { width: 150px; }
  body.nav-open { overflow: hidden; }
}

/* ---------- 7. Hero ---------- */
.hero {
  position: relative; overflow: hidden; color: #fff;
  background:
    radial-gradient(1100px 620px at 72% 48%, rgba(35, 118, 220, .48), transparent 62%),
    radial-gradient(760px 520px at 12% 12%, rgba(21, 74, 152, .55), transparent 68%),
    linear-gradient(135deg, #061532 0%, #0a2452 48%, #071c40 100%);
}
.hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(120, 180, 255, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(120, 180, 255, .055) 1px, transparent 1px);
  background-size: 52px 52px;
  mask-image: radial-gradient(70% 70% at 50% 45%, #000 35%, transparent 100%);
}
.hero__inner {
  position: relative; z-index: 2;
  display: grid; grid-template-columns: minmax(0, 1.02fr) minmax(0, .98fr);
  gap: 40px; align-items: center; padding-block: 66px 74px; min-height: 520px;
}
.hero__title { font-size: clamp(32px, 3.4vw, 46px); line-height: 1.14; letter-spacing: -0.025em; }
.hero__lede { margin-top: 18px; max-width: 470px; font-size: 16px; color: rgba(255, 255, 255, .82); }




/* Orbit graphic */
.orbit { position: relative; aspect-ratio: 1; width: 100%; max-width: 470px; margin-inline: auto; }
.orbit__svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.orbit__ring { fill: none; stroke: rgba(120, 180, 255, .3); stroke-width: 1; }
.orbit__ring--dash { stroke-dasharray: 3 7; stroke: rgba(140, 195, 255, .42); transform-origin: 50% 50%; animation: orbit-spin 44s linear infinite; }
.orbit__ring--dash-rev { animation-direction: reverse; animation-duration: 62s; }
@keyframes orbit-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .orbit__ring--dash { animation: none; } }

.orbit__core {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 33%; aspect-ratio: 1; display: grid; place-items: center; text-align: center;
  border-radius: 50%; background: radial-gradient(circle at 50% 35%, rgba(47, 140, 240, .34), rgba(6, 21, 50, .9) 70%);
  border: 1px solid rgba(140, 195, 255, .4);
  box-shadow: 0 0 46px rgba(47, 140, 240, .32), inset 0 0 30px rgba(47, 140, 240, .18);
}
.orbit__core-label { font-size: 17px; font-weight: 800; letter-spacing: .04em; }
.orbit__core-label sup { font-size: 9px; }
.orbit__core img { width: 44%; margin-inline: auto; margin-bottom: 4px; }

.orbit__node {
  position: absolute; transform: translate(-50%, -50%); width: 118px; text-align: center;
}
.orbit__node-dot {
  width: 50px; height: 50px; margin: 0 auto 8px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(9, 29, 66, .88); border: 1px solid rgba(140, 195, 255, .45);
  box-shadow: 0 0 22px rgba(47, 140, 240, .3);
  color: var(--blue-400);
}
.orbit__node-dot svg { width: 24px; height: 24px; }
.orbit__node-label {
  font-size: 9.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: rgba(255, 255, 255, .84); line-height: 1.35;
}


/* Hero carousel slides */
.hero { display: grid; }
.hero > .hero__slide { grid-area: 1 / 1; }
.hero__slide {
  position: relative;
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .45s ease;
}
.hero__slide.is-active { visibility: visible; opacity: 1; pointer-events: auto; }
@keyframes heroFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .hero__slide { transition: none; } }

.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; filter: saturate(1.08) brightness(1.1); }
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6, 21, 50, .95) 0%, rgba(6, 21, 50, .8) 44%, rgba(6, 21, 50, .34) 100%);
}

.hero__slide .hero__visual:empty { display: none; }

/* Carousel arrows shared by hero + trending */
.car-btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); color: var(--navy-800);
  box-shadow: var(--shadow);
}
.car-btn:hover { background: var(--blue-600); color: #fff; border-color: var(--blue-600); }
.car-btn--prev { left: -10px; }
.car-btn--next { right: -10px; }
.hero .car-btn { background: rgba(255, 255, 255, .1); border-color: rgba(255, 255, 255, .35); color: #fff; }
.hero .car-btn:hover { background: #fff; color: var(--navy-800); }
.hero .car-btn--prev { left: 14px; }
.hero .car-btn--next { right: 14px; }

.dots { display: flex; justify-content: center; gap: 7px; }
.dots button {
  width: 7px; height: 7px; padding: 0; border: 0; border-radius: 999px;
  background: rgba(255, 255, 255, .35); transition: width .2s, background .2s;
}
.dots button[aria-current='true'] { width: 22px; background: var(--blue-400); }
.dots--ink button { background: var(--line); }
.dots--ink button[aria-current='true'] { background: var(--blue-600); }

.hero__dots { position: absolute; left: 24px; bottom: 26px; z-index: 4; }

/* ---------- 8. Quick actions ---------- */
.quick { border-bottom: 1px solid var(--line); background: #fff; }
.quick__grid { display: grid; grid-template-columns: repeat(6, 1fr); }
.quick__item {
  padding: 30px 20px 26px; text-align: center; border-right: 1px solid var(--line-soft);
  transition: background .18s;
}
.quick__item:last-child { border-right: 0; }
.quick__item:hover { background: var(--surface-alt); }
.quick__icon { width: 40px; height: 40px; margin: 0 auto 14px; color: var(--blue-600); }
.quick__title {
  font-size: 13px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
  color: var(--navy-800); margin-bottom: 8px;
}
.quick__text { font-size: 12.5px; color: var(--muted); line-height: 1.55; margin-bottom: 14px; min-height: 58px; }

/* ---------- 9. Finder band ---------- */
.finder { background: var(--surface-alt); padding: 44px 0; }
.finder__panel {
  background: linear-gradient(115deg, var(--navy-900), var(--navy-700));
  border-radius: var(--radius); color: #fff; padding: 30px 34px;
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 30px; align-items: center;
  box-shadow: var(--shadow-lg);
}
.finder__title { font-size: 21px; line-height: 1.25; }
.finder__note { margin-top: 9px; font-size: 12.5px; color: rgba(255, 255, 255, .7); }

.finder__search { position: relative; margin-bottom: 14px; }
.finder__search svg { position: absolute; left: 15px; top: 50%; transform: translateY(-50%); width: 17px; color: var(--muted); }
.finder__search input {
  width: 100%; padding: 14px 16px 14px 44px; border: 0; border-radius: var(--radius-sm);
  font-size: 14px; font-family: inherit; color: var(--ink); background: #fff;
}
.finder__search input::placeholder { color: #93a1b5; }

.finder__filters { display: grid; grid-template-columns: repeat(4, 1fr) auto; gap: 12px; }
.field label {
  display: block; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: rgba(255, 255, 255, .62); margin-bottom: 5px;
}
.field select {
  width: 100%; padding: 11px 34px 11px 13px; border: 0; border-radius: var(--radius-sm);
  font-size: 13.5px; font-family: inherit; color: var(--ink); background: #fff;
  appearance: none; cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'%3E%3Cpath d='M1 1.5 6 6.5l5-5' fill='none' stroke='%2364748b' stroke-width='1.7' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 13px center; background-size: 11px;
}
.finder__submit { align-self: end; }

/* ---------- 10. Areas grid ---------- */
.tabs {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 6px;
  background: var(--surface-alt); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 6px; margin: 0 auto 30px; width: fit-content; max-width: 100%;
}
.tabs button {
  padding: 9px 16px; border: 0; background: transparent; border-radius: var(--radius-sm);
  font-size: 11px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase;
  color: var(--ink-soft); transition: background .16s, color .16s;
}
.tabs button:hover { color: var(--blue-600); }
.tabs button[aria-selected='true'] { background: var(--blue-600); color: #fff; }

.area-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; }
.area-card {
  display: flex; flex-direction: column; gap: 12px; padding: 20px;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .18s, box-shadow .18s, transform .18s;
}
.area-card:hover { border-color: var(--blue-400); box-shadow: var(--shadow); transform: translateY(-3px); }
.area-card__top { display: flex; align-items: flex-start; gap: 12px; }
.area-card__icon {
  flex-shrink: 0; width: 42px; height: 42px; border-radius: var(--radius-sm);
  display: grid; place-items: center; color: #fff;
}
.area-card__icon svg { width: 22px; height: 22px; }
.area-card__name { display: block; font-size: 14px; font-weight: 700; color: var(--navy-800); line-height: 1.3; }
.area-card__codes { display: block; margin-top: 5px; font-size: 12px; color: var(--ink-soft); font-weight: 600; }
.area-card__count { font-size: 11.5px; color: var(--muted); }
.area-card__foot { margin-top: auto; }

.grid-actions { display: flex; justify-content: center; align-items: center; gap: 26px; margin-top: 34px; }

/* ---------- 11. Career architecture band ---------- */
.architecture {
  background: linear-gradient(120deg, var(--navy-900) 0%, var(--navy-700) 55%, var(--navy-800) 100%);
  color: #fff; border-radius: var(--radius); padding: 40px; position: relative; overflow: hidden;
}
.architecture::before {
  content: ''; position: absolute; inset: 0;
  background-image: linear-gradient(90deg, rgba(140, 195, 255, .05) 1px, transparent 1px);
  background-size: 48px 100%; pointer-events: none;
}
.architecture__inner {
  position: relative; display: grid; grid-template-columns: 250px minmax(0, 1fr) 250px;
  gap: 34px; align-items: center;
}
.arch-col__head { display: flex; align-items: center; gap: 11px; margin-bottom: 16px; }
.arch-col__badge {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .28);
}
.arch-col__badge svg { width: 20px; height: 20px; }
.arch-col--pro .arch-col__badge { color: var(--blue-400); }
.arch-col--mgr .arch-col__badge { color: var(--gold-400); }
.arch-col__title { display: block; font-size: 15px; font-weight: 700; }
.arch-col__sub { display: block; font-size: 11.5px; color: rgba(255, 255, 255, .62); margin-top: 2px; }
.arch-col li {
  position: relative; padding-left: 16px; font-size: 13px;
  color: rgba(255, 255, 255, .85); line-height: 1.9;
}
.arch-col li::before {
  content: ''; position: absolute; left: 0; top: 11px; width: 5px; height: 5px;
  border-radius: 50%; background: var(--blue-400);
}
.arch-col--mgr li::before { background: var(--gold-500); }
.arch-col--mgr { text-align: left; }

.arch-center { text-align: center; }
.arch-center__title { font-size: 24px; line-height: 1.3; }
.arch-center__flow {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  gap: 14px; margin: 22px 0;
}
.arch-arrow { display: flex; align-items: center; gap: 6px; }
.arch-arrow__track { flex: 1; height: 2px; background: linear-gradient(90deg, transparent, var(--blue-400)); border-radius: 2px; }
.arch-arrow--rev .arch-arrow__track { background: linear-gradient(90deg, var(--gold-500), transparent); }
.arch-arrow svg { width: 15px; height: 15px; flex-shrink: 0; }
.arch-arrow--fwd svg { color: var(--blue-400); }
.arch-arrow--rev svg { color: var(--gold-500); }
.arch-center__lead { font-size: 14px; font-weight: 600; color: rgba(255, 255, 255, .92); }
.arch-center__steps { margin-top: 18px; font-size: 13.5px; color: rgba(255, 255, 255, .78); }
.arch-center__steps b { color: #fff; font-weight: 600; }


/* ---------- 11b. Career architecture — design variants ---------- */

/* --- Variant A: journey --- */
.arch-a {
  background: linear-gradient(120deg, var(--navy-900) 0%, var(--navy-700) 58%, var(--navy-800) 100%);
  color: #fff; border-radius: var(--radius); padding: 44px 40px; position: relative; overflow: hidden;
}
.arch-a::before {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image: linear-gradient(90deg, rgba(140,195,255,.05) 1px, transparent 1px);
  background-size: 48px 100%;
}
.arch-a__head { position: relative; text-align: center; margin-bottom: 30px; }
.arch-a__title { font-size: clamp(22px, 2.4vw, 30px); line-height: 1.28; }
.arch-a__lead { margin-top: 10px; font-size: 15px; color: var(--gold-400); font-weight: 600; }

.arch-a__track {
  position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 0; margin: 0 auto 34px; max-width: 780px; counter-reset: step;
}
.arch-a__step { position: relative; text-align: center; padding-top: 40px; }
.arch-a__step::before {
  content: ''; position: absolute; top: 15px; left: 0; right: 0; height: 2px;
  background: rgba(140,195,255,.28);
}
.arch-a__step:first-child::before { left: 50%; }
.arch-a__step:last-child::before { right: 50%; }
.arch-a__num {
  position: absolute; top: 0; left: 50%; transform: translateX(-50%);
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--blue-600); color: #fff; font-size: 13px; font-weight: 800;
  box-shadow: 0 0 0 5px rgba(24,120,232,.18);
}
.arch-a__step-label { font-size: 13px; font-weight: 600; color: rgba(255,255,255,.9); }

.arch-a__levels {
  position: relative; display: grid; grid-template-columns: 1fr auto 1fr;
  gap: 24px; align-items: stretch;
}
.arch-a__level {
  background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16);
  border-radius: var(--radius); padding: 24px;
}
.arch-a__level--mgr { background: rgba(233,185,73,.08); border-color: rgba(233,185,73,.28); }
.arch-a__level-head { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.arch-a__badge {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); color: var(--blue-400);
}
.arch-a__level--mgr .arch-a__badge { color: var(--gold-400); }
.arch-a__badge svg { width: 21px; height: 21px; }
.arch-a__level-title { display: block; font-size: 15.5px; font-weight: 700; }
.arch-a__level-sub { display: block; font-size: 12px; color: rgba(255,255,255,.62); margin-top: 2px; }
.arch-a__blurb { font-size: 13.5px; line-height: 1.6; color: rgba(255,255,255,.78); margin-bottom: 14px; }
.arch-a__verbs { display: flex; flex-wrap: wrap; gap: 7px; }
.arch-a__verbs li {
  padding: 5px 12px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.18);
}
.arch-a__level--mgr .arch-a__verbs li { background: rgba(233,185,73,.14); border-color: rgba(233,185,73,.3); }
.arch-a__arrow { display: grid; place-items: center; color: var(--gold-400); }
.arch-a__arrow svg { width: 30px; height: 30px; }

/* --- Variant B: comparison cards --- */
.arch-b__grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 22px; align-items: stretch; }
.arch-b__card {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius-lg); padding: 30px 28px; display: flex; flex-direction: column;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.arch-b__card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); }
.arch-b__card--pro { border-top: 4px solid var(--blue-600); }
.arch-b__card--mgr { border-top: 4px solid var(--gold-500); }
.arch-b__tier {
  font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: var(--muted); margin-bottom: 14px;
}
.arch-b__icon {
  width: 52px; height: 52px; border-radius: var(--radius); display: grid; place-items: center;
  background: var(--blue-050); color: var(--blue-600); margin-bottom: 14px;
}
.arch-b__card--mgr .arch-b__icon { background: #fdf4e0; color: #b8892a; }
.arch-b__icon svg { width: 26px; height: 26px; }
.arch-b__title { font-size: 19px; font-weight: 700; color: var(--navy-800); }
.arch-b__sub { font-size: 13px; color: var(--blue-600); font-weight: 600; margin-top: 4px; }
.arch-b__card--mgr .arch-b__sub { color: #b8892a; }
.arch-b__blurb { font-size: 14px; line-height: 1.65; color: var(--ink-soft); margin: 14px 0 16px; }
.chips--start { justify-content: flex-start; }
.chip--pro { border-color: #cfe2fa; background: var(--blue-050); color: var(--navy-800); }
.chip--mgr { border-color: #f0dca8; background: #fdf6e7; color: #6b5320; }
.arch-b__example {
  margin-top: auto; padding-top: 16px; border-top: 1px solid var(--line-soft);
  font-size: 12.5px; color: var(--muted);
}
.arch-b__example strong { color: var(--navy-800); }

.arch-b__connector { display: grid; grid-template-rows: 1fr auto 1fr; justify-items: center; gap: 8px; }
.arch-b__connector-line { width: 2px; height: 100%; background: linear-gradient(var(--line), var(--blue-400)); }
.arch-b__connector-line:last-child { background: linear-gradient(var(--gold-500), var(--line)); }
.arch-b__connector-dot {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--navy-800); color: #fff;
}
.arch-b__connector-dot svg { width: 20px; height: 20px; }

.arch-b__foot {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 10px 14px;
  margin-top: 28px; font-size: 13.5px; font-weight: 600; color: var(--navy-800);
}
.arch-b__foot span + span::before { content: '→'; margin-right: 14px; color: var(--blue-600); }

/* --- Variant C: ascending ladder --- */
.arch-c {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: 44px; align-items: center;
  background: linear-gradient(140deg, #061532 0%, var(--navy-800) 62%, var(--navy-700) 100%);
  color: #fff; border-radius: var(--radius); padding: 44px 40px;
}
.arch-c__title { font-size: clamp(22px, 2.3vw, 29px); line-height: 1.28; margin-top: 12px; }
.arch-c__lead { margin-top: 12px; font-size: 15px; color: rgba(255,255,255,.8); }
.arch-c__steps { display: grid; gap: 10px; margin-top: 22px; }
.arch-c__steps li { display: flex; align-items: center; gap: 11px; font-size: 14px; color: rgba(255,255,255,.9); }
.arch-c__step-num {
  width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.24);
  font-size: 11px; font-weight: 800;
}
.arch-c__example {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 24px;
  padding-top: 20px; border-top: 1px solid rgba(255,255,255,.14); font-size: 13px;
}
.arch-c__example-code { font-size: 17px; font-weight: 800; color: var(--blue-400); }
.arch-c__example-code--gold { color: var(--gold-400); }
.arch-c__example-arrow { width: 18px; height: 18px; color: rgba(255,255,255,.6); }
.arch-c__example-area { color: rgba(255,255,255,.6); }

.arch-c__ladder { display: grid; gap: 16px; }
.arch-c__tier { border-radius: var(--radius); padding: 22px 24px; border: 1px solid rgba(255,255,255,.16); }
.arch-c__tier--mgr {
  background: linear-gradient(100deg, rgba(233,185,73,.16), rgba(233,185,73,.04));
  border-color: rgba(233,185,73,.32); margin-left: 34px;
}
.arch-c__tier--pro { background: rgba(255,255,255,.06); }
.arch-c__tier-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.arch-c__badge {
  width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.25); color: var(--blue-400);
}
.arch-c__tier--mgr .arch-c__badge { color: var(--gold-400); }
.arch-c__badge svg { width: 20px; height: 20px; }
.arch-c__tier-title { display: block; font-size: 15px; font-weight: 700; }
.arch-c__tier-sub { display: block; font-size: 11.5px; color: rgba(255,255,255,.62); margin-top: 2px; }
.arch-c__rungs { display: flex; flex-wrap: wrap; gap: 7px; }
.arch-c__rungs li {
  padding: 6px 13px; border-radius: 4px; font-size: 12.5px; font-weight: 600;
  background: rgba(255,255,255,.09); border-left: 2px solid var(--blue-400);
}
.arch-c__tier--mgr .arch-c__rungs li { border-left-color: var(--gold-500); background: rgba(255,255,255,.08); }

@media (max-width: 1024px) {
  .arch-a__levels { grid-template-columns: 1fr; }
  .arch-a__arrow { transform: rotate(90deg); }
  .arch-b__grid { grid-template-columns: 1fr; }
  .arch-b__connector { grid-template-rows: none; grid-template-columns: 1fr auto 1fr; }
  .arch-b__connector-line { width: 100%; height: 2px; background: linear-gradient(90deg, var(--line), var(--blue-400)); }
  .arch-b__connector-line:last-child { background: linear-gradient(90deg, var(--gold-500), var(--line)); }
  .arch-c { grid-template-columns: 1fr; gap: 28px; }
  .arch-c__tier--mgr { margin-left: 0; }
}
@media (max-width: 700px) {
  .arch-a { padding: 28px 20px; }
  .arch-a__track { grid-auto-flow: row; gap: 16px; }
  .arch-a__step { padding-top: 0; padding-left: 44px; text-align: left; }
  .arch-a__step::before { display: none; }
  .arch-a__num { left: 0; transform: none; top: -4px; }
  .arch-c { padding: 28px 20px; }
}


/* Design-review page */
.opt-head { margin-bottom: 24px; max-width: 760px; }
.opt-tag {
  display: inline-block; margin-bottom: 10px; padding: 5px 12px; border-radius: 999px;
  font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  background: var(--blue-050); color: var(--blue-600); border: 1px solid #cfe2fa;
}
.opt-tag--current { background: var(--surface-alt); color: var(--muted); border-color: var(--line); }

/* ---------- 12. Stats ---------- */
.stats { border-block: 1px solid var(--line); background: #fff; }
.stats__grid { display: grid; grid-template-columns: repeat(5, 1fr); }
.stat { display: flex; align-items: center; gap: 14px; padding: 26px 20px; border-right: 1px solid var(--line-soft); }
.stat:last-child { border-right: 0; }
.stat__icon { width: 34px; height: 34px; color: var(--blue-600); flex-shrink: 0; }
.stat__value { font-size: 21px; font-weight: 800; color: var(--navy-800); line-height: 1.15; }
.stat__label { font-size: 11.5px; color: var(--muted); line-height: 1.4; margin-top: 3px; }

/* ---------- 13. Trending ---------- */
.trending__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; margin-bottom: 24px; }
.rail { position: relative; }
.rail__track {
  display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 1fr);
  gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory;
  scrollbar-width: none; padding-bottom: 4px;
  /* Cap the width so a short rail lays out as cards, not one giant panel. */
  justify-content: start;
}
.rail__track > * { max-width: 320px; min-width: 230px; }
.rail__track::-webkit-scrollbar { display: none; }

.cert-card {
  scroll-snap-align: start; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; transition: box-shadow .18s, transform .18s, border-color .18s;
}
.cert-card:hover { box-shadow: var(--shadow-lg); transform: translateY(-4px); border-color: var(--blue-400); }
.cert-card__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.cert-card__media::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(6, 21, 50, .12), rgba(6, 21, 50, .62));
}
.cert-card__pattern { position: absolute; inset: 0; }
.cert-card__badge {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  padding: 5px 11px; border-radius: 3px; font-size: 9.5px; font-weight: 800;
  letter-spacing: .11em; text-transform: uppercase; color: #fff;
}
.cert-card__body { padding: 18px; display: flex; flex-direction: column; gap: 7px; flex: 1; }
.cert-card__code { font-size: 20px; font-weight: 800; color: var(--navy-800); letter-spacing: -0.01em; }
.cert-card__code sup { font-size: 10px; top: -.6em; }
.cert-card__name { font-size: 13px; font-weight: 700; color: var(--ink); line-height: 1.35; }
.cert-card__tagline { font-size: 12.5px; color: var(--muted); line-height: 1.5; }
.cert-card__foot { margin-top: auto; padding-top: 12px; }

/* ---------- 14. Resources & insights ---------- */
.resources__grid { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: 30px; align-items: stretch; }
.topics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.topic {
  padding: 20px 16px; text-align: center; border: 1px solid transparent; border-radius: var(--radius);
  transition: border-color .18s, background .18s;
}
.topic:hover { border-color: var(--line); background: #fff; }
.topic__icon { width: 34px; height: 34px; margin: 0 auto 12px; color: var(--blue-600); }
.topic__title { font-size: 12.5px; font-weight: 700; color: var(--navy-800); margin-bottom: 6px; }
.topic__text { font-size: 11.5px; color: var(--muted); line-height: 1.5; }

.insights {
  background: linear-gradient(150deg, var(--navy-900), var(--navy-950));
  color: #fff; border-radius: var(--radius); padding: 32px;
  display: flex; flex-direction: column; justify-content: center; gap: 14px;
}
.insights__title { font-size: 18px; letter-spacing: .02em; }
.insights__text { font-size: 13.5px; color: rgba(255, 255, 255, .74); line-height: 1.6; }
.insights .btn { align-self: flex-start; margin-top: 6px; }

/* ---------- 15. Footer ---------- */
.footer { background: var(--navy-900); color: rgba(255, 255, 255, .7); padding-top: 54px; }
.footer__grid { display: grid; grid-template-columns: 268px repeat(6, minmax(0, 1fr)); gap: 30px 22px; }
/* The mark is mostly dark navy, so it sits on a white plate to stay legible
   against the footer. */
.footer__brand-mark {
  width: 230px; height: auto; object-fit: contain; display: block;
  background: #fff; padding: 16px 18px; border-radius: 20px;
  box-sizing: content-box; margin-bottom: 22px;
}
.footer__blurb { font-size: 12.5px; line-height: 1.65; }
.footer__socials { display: flex; gap: 9px; margin-top: 18px; }
.footer__socials a {
  width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .09); color: #fff; transition: background .18s;
}
.footer__socials a:hover { background: var(--blue-600); }
.footer__socials svg { width: 15px; height: 15px; }
.footer__col h3 {
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: #fff; margin-bottom: 14px;
}

/* Footer column headings double as accordion triggers on mobile. */
.footer__col-title { margin: 0 0 14px; }
.footer__acc {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; padding: 0; border: 0; background: none; color: #fff;
  font: inherit; font-size: 11.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; cursor: default; text-align: left;
}
.footer__acc-icon { display: none; }

.footer__col li { margin-bottom: 9px; }
.footer__col a { font-size: 12.5px; }
.footer__col a:hover { color: #fff; }


/* Contact band above the legal bar */
.footer__contact {
  display: grid; grid-template-columns: 300px minmax(0, 1fr); gap: 34px;
  margin-top: 42px; padding-top: 32px; border-top: 1px solid rgba(255, 255, 255, .1);
}
.footer__contact h3 {
  display: flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: #fff; margin-bottom: 16px;
}
.footer__contact h3 svg { width: 16px; height: 16px; color: var(--blue-400); flex-shrink: 0; }
.footer__address address { font-style: normal; font-size: 13px; line-height: 1.75; }
.footer__address strong { color: #fff; font-weight: 600; display: block; margin-bottom: 4px; }

.footer__mailboxes ul { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 26px; }
.footer__mailboxes li { display: flex; align-items: flex-start; gap: 11px; }
.footer__mailbox-icon {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
  color: var(--gold-400);
}
.footer__mailbox-icon svg { width: 17px; height: 17px; }
.footer__mailboxes a { display: flex; flex-direction: column; gap: 1px; }
.footer__mailbox-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
  text-transform: uppercase; color: var(--gold-400);
}
.footer__mailbox-address { font-size: 13.5px; color: #fff; word-break: break-word; }
.footer__mailboxes a:hover .footer__mailbox-address { color: var(--blue-400); text-decoration: underline; }
.footer__mailbox-note { font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, .6); }

.footer__bar {
  margin-top: 44px; border-top: 1px solid rgba(255, 255, 255, .1); padding: 18px 0;
  display: flex; align-items: center; justify-content: space-between; gap: 18px; flex-wrap: wrap;
  font-size: 12px;
}
.footer__legal { display: flex; flex-wrap: wrap; gap: 20px; }
.footer__legal a:hover { color: #fff; }


/* ---------- 15b. Footer on small screens ---------- */
@media (max-width: 820px) {
  .footer { padding-top: 40px; }

  .footer__brand { padding-bottom: 26px; text-align: center; }
  .footer__brand-mark { margin-inline: auto; width: 200px; padding: 14px 16px; }
  .footer__blurb { font-size: 13px; max-width: 42ch; margin-inline: auto; }
  .footer__socials { justify-content: center; }
  .footer__socials a { width: 44px; height: 44px; }

  /* Each column collapses behind a +/- trigger */
  .footer__col { border-top: 1px solid rgba(255, 255, 255, .12); }
  .footer__col-title { margin: 0; }
  .footer__acc {
    min-height: 52px; cursor: pointer; font-size: 12px;
  }
  .footer__acc-icon {
    display: block; position: relative; width: 14px; height: 14px; flex-shrink: 0;
  }
  .footer__acc-icon::before,
  .footer__acc-icon::after {
    content: ''; position: absolute; left: 50%; top: 50%; background: currentColor;
    transform: translate(-50%, -50%); transition: opacity .2s, transform .2s;
  }
  .footer__acc-icon::before { width: 14px; height: 2px; }
  .footer__acc-icon::after  { width: 2px; height: 14px; }
  .footer__acc[aria-expanded='true'] { color: var(--blue-400); }
  .footer__acc[aria-expanded='true'] .footer__acc-icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }

  .footer__col ul {
    max-height: 0; overflow: hidden; visibility: hidden;
    transition: max-height .3s ease, visibility 0s .3s;
  }
  .footer__col.is-open ul {
    max-height: 520px; padding-bottom: 10px; visibility: visible;
    transition: max-height .3s ease, visibility 0s 0s;
  }
  .footer__col li { margin-bottom: 0; }
  .footer__col li a {
    display: flex; align-items: center; min-height: 44px;
    padding-left: 12px; font-size: 13.5px;
  }

  .footer__contact { grid-template-columns: 1fr; gap: 26px; margin-top: 28px; text-align: center; }
  .footer__mailboxes ul { grid-template-columns: 1fr; gap: 18px; }
  .footer__mailboxes li { flex-direction: column; align-items: center; gap: 8px; }
  .footer__mailboxes a { align-items: center; min-height: 44px; justify-content: center; }
  .footer__bar {
    margin-top: 26px; padding: 20px 0 26px;
    flex-direction: column-reverse; align-items: center; text-align: center; gap: 16px;
  }
  .footer__legal { justify-content: center; gap: 14px 20px; }
  .footer__legal a { min-height: 32px; display: flex; align-items: center; }
}

/* ---------- 16. Certification detail page ---------- */
.breadcrumb { font-size: 12px; color: rgba(255, 255, 255, .62); display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.breadcrumb a:hover { color: #fff; }
.breadcrumb span { opacity: .5; }

.cert-hero { color: #fff; position: relative; overflow: hidden; }
.cert-hero::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 46px 46px;
  mask-image: radial-gradient(60% 80% at 78% 40%, #000, transparent);
}
.cert-hero__inner {
  position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) 300px;
  gap: 44px; align-items: center; padding-block: 44px 56px;
}
.cert-hero__level {
  display: inline-flex; align-items: center; gap: 8px; margin: 16px 0 14px;
  padding: 6px 14px; border-radius: 999px; background: rgba(255, 255, 255, .12);
  border: 1px solid rgba(255, 255, 255, .24);
  font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
}
.cert-hero__title { font-size: clamp(26px, 3vw, 38px); line-height: 1.16; }
.cert-hero__title sup { font-size: .42em; top: -.9em; }
.cert-hero__tagline { margin-top: 12px; font-size: 16px; color: var(--gold-400); font-weight: 600; }
.cert-hero__summary { margin-top: 16px; max-width: 640px; font-size: 15px; color: rgba(255, 255, 255, .82); }
.cert-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

.cert-hero__seal {
  aspect-ratio: 1; border-radius: 50%; display: grid; place-items: center; text-align: center;
  background: radial-gradient(circle at 50% 32%, rgba(255, 255, 255, .18), rgba(255, 255, 255, .04));
  border: 1px solid rgba(255, 255, 255, .3); padding: 26px;
  box-shadow: inset 0 0 40px rgba(255, 255, 255, .08);
}
.cert-hero__seal-icon { width: 54px; height: 54px; margin: 0 auto 12px; color: #fff; }
.cert-hero__seal-code { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.cert-hero__seal-code sup { font-size: 13px; top: -1em; }
.cert-hero__seal-level { font-size: 10px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .72); margin-top: 4px; }

.split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 46px; align-items: center; }
.split__media { aspect-ratio: 4 / 3; border-radius: var(--radius); overflow: hidden; position: relative; }

.domain-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.domain {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  padding: 22px 20px; transition: border-color .18s, box-shadow .18s;
}
.domain:hover { border-color: var(--blue-400); box-shadow: var(--shadow); }
.domain__num {
  font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--blue-600); margin-bottom: 9px;
}
.domain__title { font-size: 14.5px; font-weight: 700; color: var(--navy-800); line-height: 1.35; }

.outcomes { background: linear-gradient(120deg, #0e5a45, #10744f); color: #fff; }
.outcomes__list { display: grid; gap: 12px; margin-top: 20px; }
.outcomes__list li { display: flex; gap: 11px; font-size: 14.5px; line-height: 1.5; }
.outcomes__list svg { width: 19px; height: 19px; flex-shrink: 0; margin-top: 3px; color: var(--gold-400); }

.spec-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid var(--line); }
.spec-table th, .spec-table td { padding: 14px 20px; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; text-align: left; vertical-align: top; }
.spec-table tr:last-child th, .spec-table tr:last-child td { border-bottom: 0; }
.spec-table th { width: 260px; background: var(--surface-alt); font-weight: 700; color: var(--navy-800); }
.spec-table td { color: var(--ink-soft); }
.table-scroll { overflow-x: auto; }

.price-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.price-card {
  border: 1px solid var(--line); border-radius: var(--radius); background: #fff; padding: 26px;
  display: flex; flex-direction: column; gap: 12px;
}
.price-card--feature { border-color: var(--blue-600); box-shadow: var(--shadow); }
.price-card__label { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--blue-600); }
.price-card__amount { font-size: 34px; font-weight: 800; color: var(--navy-800); letter-spacing: -0.02em; }
.price-card__amount small { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.price-card__text { font-size: 13.5px; color: var(--ink-soft); line-height: 1.6; }
.price-card ul { display: grid; gap: 8px; }
.price-card li { display: flex; gap: 9px; font-size: 13px; color: var(--ink-soft); }
.price-card li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; color: #12a594; }
.price-card .btn { margin-top: auto; }

.pathway { display: grid; grid-template-columns: 1fr auto 1fr; gap: 20px; align-items: stretch; }
.pathway__step {
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius); padding: 24px;
  display: flex; flex-direction: column; gap: 8px;
}
.pathway__step--current { border-color: var(--blue-600); background: var(--blue-050); }
.pathway__level { font-size: 10.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.pathway__code { font-size: 24px; font-weight: 800; color: var(--navy-800); }
.pathway__name { font-size: 13.5px; color: var(--ink-soft); }
.pathway__link { display: grid; place-items: center; color: var(--blue-600); }
.pathway__link svg { width: 30px; height: 30px; }

.cta-band { background: linear-gradient(115deg, var(--navy-900), var(--navy-700)); color: #fff; text-align: center; }
.cta-band__title { font-size: 28px; }
.cta-band__text { margin-top: 12px; color: rgba(255, 255, 255, .78); max-width: 620px; margin-inline: auto; }
.cta-band__actions { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 26px; }

.notice {
  display: flex; gap: 12px; align-items: flex-start; padding: 14px 18px;
  background: #fff8e7; border: 1px solid #f0dca8; border-radius: var(--radius);
  font-size: 13px; color: #6b5320; margin-bottom: 26px;
}
.notice svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; color: #b58a2b; }

/* Catalogue grid (all-certifications page) */
.cert-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.cert-grid .cert-card { border-radius: var(--radius); }
.cert-grid .cert-card .cert-card__body { gap: 5px; }
.cert-grid .pathway__level { font-size: 9.5px; }


/* ---------- 16b. Photography ---------- */
.cert-card__media img,
.split__media img,
.cert-hero__bg img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
}

/* Photo behind the certification / area hero, dimmed for text contrast. */
.cert-hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.cert-hero__bg img { filter: saturate(1.08) brightness(1.12); }
.cert-hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6, 21, 50, .95) 0%, rgba(6, 21, 50, .78) 46%, rgba(6, 21, 50, .3) 100%);
}
.cert-hero::after { z-index: 1; }
.cert-hero__inner { z-index: 2; }

/* Card imagery keeps the area colour as a tint so the set reads as one system. */
.cert-card__media { background: #061532; }
.cert-card__media img { transition: transform .4s ease; }
.cert-card:hover .cert-card__media img { transform: scale(1.05); }
.cert-card__media::after { z-index: 1; }
.cert-card__badge { z-index: 2; }

.split__media { background: #061532; }
.split__media::after {
  content: ''; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(200deg, rgba(6, 21, 50, .1), rgba(6, 21, 50, .72));
}
.split__caption {
  position: absolute; left: 20px; bottom: 18px; z-index: 2; color: #fff;
  font-size: 11.5px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
}


.split--reverse .split__media { order: -1; }
@media (max-width: 1024px) { .split--reverse .split__media { order: 0; } }

.tick-list { display: grid; gap: 10px; margin-top: 22px; }
.tick-list li { display: flex; gap: 10px; font-size: 14px; color: var(--ink-soft); }
.tick-list svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 3px; color: #12a594; }


/* ---------- 16c. Course content sections ---------- */
.container--narrow { max-width: 900px; }

.prose { font-size: 15.5px; line-height: 1.75; color: var(--ink-soft); margin-bottom: 14px; }

/* Curriculum modules */
.module-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.module {
  display: flex; gap: 16px; padding: 24px; background: #fff;
  border: 1px solid var(--line); border-radius: var(--radius);
  transition: border-color .18s, box-shadow .18s;
}
.module:hover { border-color: var(--blue-400); box-shadow: var(--shadow); }
.module__num {
  flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center; background: var(--blue-050);
  color: var(--blue-600); font-weight: 800; font-size: 15px;
}
.module__title { font-size: 15.5px; font-weight: 700; color: var(--navy-800); line-height: 1.35; margin-bottom: 8px; }
.module__text { font-size: 14px; line-height: 1.65; color: var(--ink-soft); }

/* Assessment domains / outcomes */
.domain-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; }
.domain-block {
  padding: 24px; background: #fff; border: 1px solid var(--line);
  border-left: 3px solid var(--blue-600); border-radius: var(--radius);
}
.domain-block__title { font-size: 15.5px; font-weight: 700; color: var(--navy-800); line-height: 1.35; margin-bottom: 10px; }
.domain-block__text { font-size: 14px; line-height: 1.65; color: var(--ink-soft); margin-bottom: 8px; }

/* Sub-headed blocks inside prose sections */
.mini-item { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--line-soft); }
.mini-item:first-of-type { border-top: 0; padding-top: 0; }
.mini-item__title { font-size: 15.5px; font-weight: 700; color: var(--navy-800); margin-bottom: 8px; }
.mini-item__text { font-size: 14.5px; line-height: 1.7; color: var(--ink-soft); margin-bottom: 8px; }

.tick-list--two { grid-template-columns: repeat(2, minmax(0, 1fr)); }

/* Skill chips */
.chips { display: flex; flex-wrap: wrap; gap: 9px; justify-content: center; }
.chip {
  padding: 9px 16px; border-radius: 999px; background: #fff;
  border: 1px solid var(--line); font-size: 13.5px; color: var(--ink-soft);
}
.chip:hover { border-color: var(--blue-400); color: var(--blue-600); }

/* FAQ accordion */
.faq { display: grid; gap: 10px; }
.faq__item { background: #fff; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; }
.faq__item[open] { border-color: var(--blue-400); box-shadow: var(--shadow); }
.faq__q {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 17px 20px; min-height: 56px; cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 600; color: var(--navy-800);
}
.faq__q::-webkit-details-marker { display: none; }
.faq__q:hover { color: var(--blue-600); }
.faq__icon { position: relative; width: 14px; height: 14px; flex-shrink: 0; color: var(--blue-600); }
.faq__icon::before, .faq__icon::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: currentColor;
  transform: translate(-50%, -50%); transition: opacity .2s, transform .2s;
}
.faq__icon::before { width: 14px; height: 2px; }
.faq__icon::after { width: 2px; height: 14px; }
.faq__item[open] .faq__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.faq__a { padding: 0 20px 20px; font-size: 14.5px; line-height: 1.75; color: var(--ink-soft); }
.faq__a p + p { margin-top: 10px; }

@media (max-width: 900px) {
  .module-grid, .domain-list, .tick-list--two { grid-template-columns: 1fr; }
}

/* ---------- 17. Responsive ---------- */
@media (max-width: 1180px) {
  .area-grid { grid-template-columns: repeat(4, 1fr); }
  .quick__grid { grid-template-columns: repeat(3, 1fr); }
  .quick__item:nth-child(3n) { border-right: 0; }
  .quick__item:nth-child(-n+3) { border-bottom: 1px solid var(--line-soft); }
  .domain-grid { grid-template-columns: repeat(3, 1fr); }
  .cert-grid { grid-template-columns: repeat(3, 1fr); }
  .footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 1024px) {
  .nav-toggle { display: grid; }
  .hero__inner { grid-template-columns: 1fr; padding-block: 48px 56px; }
  .orbit { max-width: 380px; }
  .finder__panel { grid-template-columns: 1fr; gap: 20px; }
  .architecture__inner { grid-template-columns: 1fr; gap: 28px; }
  .arch-center__flow { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: repeat(3, 1fr); }
  .stat { border-bottom: 1px solid var(--line-soft); }
  .resources__grid { grid-template-columns: 1fr; }
  .cert-hero__inner { grid-template-columns: 1fr; gap: 30px; }
  .cert-hero__seal { max-width: 240px; }
  .split { grid-template-columns: 1fr; gap: 26px; }
}

@media (max-width: 820px) {
  .utility__list { display: none; }
  .hero .car-btn { display: none; }
  .footer__grid { grid-template-columns: 1fr; gap: 0; }
  .area-grid { grid-template-columns: repeat(2, 1fr); }
  .finder__filters { grid-template-columns: repeat(2, 1fr); }
  .finder__submit { grid-column: 1 / -1; }
  .domain-grid { grid-template-columns: repeat(2, 1fr); }
  .cert-grid { grid-template-columns: repeat(2, 1fr); }
  .price-grid { grid-template-columns: 1fr; }
  .pathway { grid-template-columns: 1fr; }
  .pathway__link { transform: rotate(90deg); padding: 6px 0; }
  .topics { grid-template-columns: repeat(2, 1fr); }
  .section { padding: 52px 0; }
  .spec-table th { width: 170px; }
}

@media (max-width: 560px) {
  .quick__grid { grid-template-columns: 1fr; }
  .quick__item { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .quick__text { min-height: 0; }
  .area-grid { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: 1fr; }
  .domain-grid { grid-template-columns: 1fr; }
  .cert-grid { grid-template-columns: 1fr; }
  .topics { grid-template-columns: 1fr; }
  .architecture { padding: 26px 20px; }
  .finder__panel { padding: 22px; }
  .grid-actions { flex-direction: column; gap: 16px; }
  .btn { width: 100%; }
  .hero__actions .btn, .cta-band__actions .btn, .cert-hero__actions .btn { width: auto; }
}

/* ---------- 18. Print ---------- */
@media print {
  .utility, .masthead, .footer, .car-btn, .cta-band { display: none; }
  .hero, .cert-hero { color: #000; background: #fff; }
}


/* =============================================================
   19. Certification page — card design (v2)
   One strict type scale for the whole page: every section heading,
   card title and body paragraph uses the same size, so nothing
   drifts between sections.
   ============================================================= */

.v2 {
  /* Accent palette, rotated across cards */
  --c1: #2563eb; --t1: #eef4ff;
  --c2: #0d9488; --t2: #e6f6f4;
  --c3: #7c3aed; --t3: #f3eefe;
  --c4: #d97706; --t4: #fdf3e3;
  --c5: #db2777; --t5: #fdecf4;
  --c6: #16a34a; --t6: #e9f8ee;

  /* Type scale — fixed, never per-section */
  --fs-eyebrow: 12px;
  --fs-h2: 34px;
  --fs-h3: 19px;
  --fs-h4: 16px;
  --fs-lede: 16.5px;
  --fs-body: 15px;
  --fs-small: 13.5px;

  --ink-body: #55627a;
  --r-card: 18px;
}

.v2-sec { padding: 52px 0; }
.v2-sec--alt { background: var(--surface-alt); }
.v2-sec--tint { background: #fdf7ee; }

/* ---- Section headers ---- */
.v2-head { text-align: center; max-width: 780px; margin: 0 auto 30px; }
.v2-head--left { text-align: left; margin-left: 0; margin-bottom: 28px; }

.v2-eyebrow {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: var(--fs-eyebrow); font-weight: 700; letter-spacing: .14em;
  text-transform: uppercase; color: var(--c, var(--c1)); margin-bottom: 16px;
}
.v2-eyebrow::after { content: ''; width: 44px; height: 2px; background: currentColor; }
.v2-head:not(.v2-head--left) .v2-eyebrow { justify-content: center; }
.v2-head:not(.v2-head--left) .v2-eyebrow::before {
  content: ''; width: 44px; height: 2px; background: currentColor;
}

.v2-h2 {
  font-size: var(--fs-h2); line-height: 1.22; letter-spacing: -0.02em;
  font-weight: 800; color: var(--navy-800);
}
.v2-h2 em {
  font-style: normal; color: var(--c, var(--c1));
  box-shadow: inset 0 -0.28em 0 color-mix(in srgb, var(--c, var(--c1)) 16%, transparent);
}
.v2-lede {
  margin-top: 16px; font-size: var(--fs-lede); line-height: 1.75; color: var(--ink-body);
}
.v2-head--left .v2-lede { margin-inline: 0; }

/* Long prose splits into two readable columns */
.v2-prose { font-size: var(--fs-body); line-height: 1.8; color: var(--ink-body); }
.v2-prose p + p { margin-top: 14px; }
.v2-prose--two { columns: 2; column-gap: 46px; }
.v2-prose--two p { break-inside: avoid; }

/* ---- Feature cards: white, circular pastel icon ---- */
.v2-features { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.v2-features--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v2-feature {
  background: #fff; border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 32px 28px; transition: box-shadow .22s, transform .22s, border-color .22s;
}
.v2-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); border-color: transparent; }
.v2-feature__icon {
  width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center;
  background: var(--t, var(--t1)); color: var(--c, var(--c1)); margin-bottom: 20px;
}
.v2-feature__icon svg { width: 28px; height: 28px; }
.v2-feature__title {
  font-size: var(--fs-h3); font-weight: 700; color: var(--navy-800);
  line-height: 1.35; margin-bottom: 12px;
}
.v2-feature__text { font-size: var(--fs-body); line-height: 1.7; color: var(--ink-body); }

/* ---- Tinted cards with a corner arrow ---- */
.v2-tints { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }
.v2-tints--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.v2-tint {
  position: relative; background: var(--t, var(--t1)); border-radius: var(--r-card);
  padding: 32px 28px 30px; overflow: hidden; transition: transform .22s;
}
.v2-tint:hover { transform: translateY(-4px); }
.v2-tint__arrow {
  position: absolute; top: 0; right: 0; width: 62px; height: 62px;
  border-bottom-left-radius: 24px; background: #fff;
  display: grid; place-items: center; color: var(--c, var(--c1));
}
.v2-tint__arrow svg { width: 18px; height: 18px; transform: rotate(-45deg); }
.v2-tint__icon { color: var(--c, var(--c1)); margin-bottom: 22px; display: block; }
.v2-tint__icon svg { width: 42px; height: 42px; }
.v2-tint__title {
  font-size: var(--fs-h3); font-weight: 700; color: var(--navy-800);
  line-height: 1.35; margin-bottom: 10px;
}
.v2-tint__text { font-size: var(--fs-body); line-height: 1.7; color: var(--ink-body); }

/* ---- Numbered module cards ---- */
.v2-modules { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.v2-modules--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.v2-module {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--r-card); padding: 30px 28px; display: flex; flex-direction: column;
  transition: box-shadow .22s, transform .22s;
}
.v2-module::before {
  content: ''; position: absolute; inset: 0 0 auto 0; height: 5px;
  border-radius: var(--r-card) var(--r-card) 0 0; background: var(--c, var(--c1));
}
.v2-module:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }
.v2-module__pill {
  align-self: flex-start; padding: 7px 14px; border-radius: 999px;
  background: var(--t, var(--t1)); color: var(--c, var(--c1));
  font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: 16px;
}
.v2-module__title {
  font-size: var(--fs-h3); font-weight: 700; color: var(--navy-800);
  line-height: 1.35; margin-bottom: 12px;
}
.v2-module__text { font-size: var(--fs-body); line-height: 1.7; color: var(--ink-body); }

/* ---- Numbered domain cards ---- */
.v2-domain {
  background: var(--t, var(--t1)); border-radius: var(--r-card); padding: 30px 28px;
}
.v2-domain__head { display: flex; align-items: center; gap: 16px; margin-bottom: 16px; }
.v2-domain__num {
  flex-shrink: 0; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center;
  background: var(--c, var(--c1)); color: #fff; font-size: 17px; font-weight: 800;
}
.v2-domain__title { font-size: var(--fs-h3); font-weight: 700; color: var(--navy-800); line-height: 1.3; }

/* ---- Check lists ---- */
.v2-checks { display: grid; gap: 14px; }
.v2-checks--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 40px; }
.v2-checks li { display: flex; gap: 13px; font-size: var(--fs-body); line-height: 1.65; color: var(--ink-body); }
.v2-checks__mark {
  flex-shrink: 0; width: 24px; height: 24px; border-radius: 7px; display: grid; place-items: center;
  background: var(--c, var(--c1)); color: #fff; margin-top: 1px;
}
.v2-checks__mark svg { width: 14px; height: 14px; }

/* ---- Pills (tools, skills) ---- */
.v2-pills { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.v2-pill {
  display: flex; align-items: center; gap: 14px; padding: 12px 22px 12px 12px;
  border-radius: 999px; background: var(--t, var(--t1));
  font-size: var(--fs-body); font-weight: 600; color: var(--navy-800);
}
.v2-pill__icon {
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center; flex-shrink: 0;
  background: #fff; color: var(--c, var(--c1));
}
.v2-pill__icon svg { width: 19px; height: 19px; }

/* ---- Big tinted panel ---- */
.v2-bigpanel { background: #fdf7ee; border-radius: 30px; padding: 64px 56px; }
.v2-bigpanel--white { background: #fff; border: 1px solid var(--line); }

/* ---- Media split with overlapping badge ---- */
.v2-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 60px; align-items: center; }
.v2-split--rev .v2-split__media { order: -1; }
.v2-split__media { position: relative; }
.v2-split__frame {
  position: relative; border-radius: var(--r-card); overflow: hidden; aspect-ratio: 4 / 3;
}
.v2-split__frame img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.v2-split__tile {
  position: absolute; top: -22px; left: -22px; width: 92px; height: 92px; border-radius: 18px;
  display: grid; place-items: center; background: var(--c, var(--c1)); color: #fff; z-index: 2;
  box-shadow: 0 14px 30px color-mix(in srgb, var(--c, var(--c1)) 34%, transparent);
}
.v2-split__tile svg { width: 40px; height: 40px; }
.v2-split__note {
  position: absolute; right: -18px; bottom: -26px; max-width: 260px; z-index: 2;
  background: #fff; border-radius: 14px; padding: 18px 20px; box-shadow: var(--shadow-lg);
  font-size: var(--fs-small); line-height: 1.6; color: var(--ink-body);
}

/* ---- Option cards ---- */
.v2-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px; }
.v2-option {
  position: relative; background: var(--t, var(--t1)); border-radius: var(--r-card);
  padding: 46px 32px 34px; margin-top: 22px;
}
.v2-option__badge {
  position: absolute; top: -22px; left: 32px; height: 46px; padding: 0 24px;
  display: inline-flex; align-items: center; white-space: nowrap; border-radius: 999px;
  background: var(--c, var(--c1)); color: #fff;
  font-size: 13px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  box-shadow: 0 12px 26px color-mix(in srgb, var(--c, var(--c1)) 36%, transparent);
}
.v2-option__title { font-size: var(--fs-h3); font-weight: 700; color: var(--navy-800); margin-bottom: 12px; }
.v2-option__price { font-size: 32px; font-weight: 800; color: var(--c, var(--c1)); margin-bottom: 12px; }
.v2-option__price small { font-size: 13px; font-weight: 600; color: var(--ink-body); }

/* ---- Stat strip in the hero ---- */
.v2-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-top: 32px; }
.v2-stat {
  padding: 16px 18px; border-radius: 14px;
  background: rgba(255, 255, 255, .1); border: 1px solid rgba(255, 255, 255, .2);
}
.v2-stat__k {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: rgba(255, 255, 255, .6);
}
.v2-stat__v { font-size: var(--fs-h4); font-weight: 700; color: #fff; margin-top: 6px; line-height: 1.35; }

/* ---- Colour CTA band ---- */
.v2-cta {
  position: relative; overflow: hidden; border-radius: 26px; padding: 54px 56px;
  background: linear-gradient(120deg, var(--navy-900), var(--navy-700));
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 34px; align-items: center;
}
.v2-cta::before, .v2-cta::after {
  content: ''; position: absolute; border-radius: 50%; background: rgba(255, 255, 255, .06);
}
.v2-cta::before { width: 240px; height: 240px; left: -70px; top: -60px; }
.v2-cta::after { width: 120px; height: 120px; right: 16%; bottom: -50px; }
.v2-cta__inner { position: relative; z-index: 1; }
.v2-cta__title { font-size: 30px; font-weight: 800; color: #fff; line-height: 1.25; }
.v2-cta__text { margin-top: 12px; font-size: var(--fs-lede); line-height: 1.7; color: rgba(255, 255, 255, .8); }
.v2-cta__actions { position: relative; z-index: 1; display: flex; flex-wrap: wrap; gap: 14px; }

/* ---- FAQ ---- */
.v2 .faq__q { font-size: var(--fs-h4); }
.v2 .faq__a { font-size: var(--fs-body); }

@media (max-width: 1080px) {
  .v2 { --fs-h2: 29px; }
  .v2-features, .v2-modules { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-tints { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-pills { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-bigpanel { padding: 44px 32px; }
}
@media (max-width: 820px) {
  .v2 { --fs-h2: 26px; --fs-lede: 15.5px; }
  .v2-sec { padding: 56px 0; }
  .v2-features, .v2-features--2, .v2-modules, .v2-modules--2,
  .v2-tints, .v2-tints--3, .v2-options, .v2-pills,
  .v2-checks--2, .v2-split { grid-template-columns: 1fr; }
  .v2-prose--two { columns: 1; }
  .v2-split { gap: 44px; }
  .v2-split--rev .v2-split__media { order: 0; }
  .v2-split__note { position: static; margin-top: 16px; max-width: none; }
  .v2-split__tile { top: -16px; left: -10px; width: 72px; height: 72px; }
  .v2-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .v2-cta { grid-template-columns: 1fr; padding: 36px 26px; }
  .v2-cta__title { font-size: 24px; }
  .v2-bigpanel { padding: 32px 22px; border-radius: 20px; }
}

/* ---------- 19b. Carousel, read-more and section icons ---------- */

/* --- Auto-playing carousel for card sets --- */
.v2-carousel { position: relative; }
.v2-carousel__track {
  display: grid; grid-auto-flow: column;
  grid-auto-columns: calc((100% - (var(--per) - 1) * 24px) / var(--per));
  gap: 24px; overflow-x: auto; scroll-snap-type: x mandatory;
  scroll-behavior: smooth; scrollbar-width: none; padding: 6px 2px 10px;
}
.v2-carousel__track::-webkit-scrollbar { display: none; }
.v2-carousel__track > * { scroll-snap-align: start; }

.v2-carousel__btn {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 5;
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; border: 1px solid var(--line); color: var(--navy-800);
  box-shadow: var(--shadow); transition: background .18s, color .18s, opacity .18s;
}
.v2-carousel__btn:hover { background: var(--c, var(--c1)); color: #fff; border-color: transparent; }
.v2-carousel__btn[disabled] { opacity: .35; cursor: default; }
.v2-carousel__btn[disabled]:hover { background: #fff; color: var(--navy-800); border-color: var(--line); }
.v2-carousel__btn--prev { left: -22px; }
.v2-carousel__btn--next { right: -22px; }

.v2-carousel__dots { display: flex; justify-content: center; gap: 8px; margin-top: 22px; }
.v2-carousel__dots button {
  width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px;
  background: var(--line); transition: width .22s, background .22s;
}
.v2-carousel__dots button[aria-current='true'] { width: 26px; background: var(--c, var(--c1)); }

/* --- Read more --- */
.v2-clamp { position: relative; overflow: hidden; transition: max-height .35s ease; }
.v2-clamp[data-clamped='true'] { max-height: var(--clamp-h, 260px); }
.v2-clamp[data-clamped='true']::after {
  content: ''; position: absolute; inset: auto 0 0 0; height: 110px; pointer-events: none;
  background: linear-gradient(to bottom, transparent, var(--fade, #fff) 88%);
}
.v2-sec--alt .v2-clamp { --fade: var(--surface-alt); }
.v2-sec--tint .v2-clamp { --fade: #fdf7ee; }
.v2-bigpanel .v2-clamp { --fade: #fdf7ee; }
.v2-bigpanel--white .v2-clamp { --fade: #fff; }

.v2-more {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 20px;
  padding: 11px 22px; border-radius: 999px; border: 1px solid var(--c, var(--c1));
  background: transparent; color: var(--c, var(--c1));
  font-size: 13.5px; font-weight: 700; letter-spacing: .02em;
  transition: background .18s, color .18s;
}
.v2-more:hover { background: var(--c, var(--c1)); color: #fff; }
.v2-more__icon { position: relative; width: 12px; height: 12px; }
.v2-more__icon::before, .v2-more__icon::after {
  content: ''; position: absolute; left: 50%; top: 50%; background: currentColor;
  transform: translate(-50%, -50%); transition: opacity .2s, transform .2s;
}
.v2-more__icon::before { width: 12px; height: 2px; }
.v2-more__icon::after { width: 2px; height: 12px; }
.v2-more[aria-expanded='true'] .v2-more__icon::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); }
.v2-more-wrap { text-align: center; }
.v2-head--left + .v2-clamp + .v2-more-wrap,
.v2-split .v2-more-wrap { text-align: left; }

/* --- Small icon beside a section heading --- */
.v2-secicon {
  width: 58px; height: 58px; border-radius: 18px; display: grid; place-items: center;
  background: var(--t, var(--t1)); color: var(--c, var(--c1)); margin: 0 auto 20px;
}
.v2-head--left .v2-secicon { margin-inline: 0; }
.v2-secicon svg { width: 27px; height: 27px; }

@media (max-width: 1080px) {
  .v2-carousel__btn--prev { left: -8px; }
  .v2-carousel__btn--next { right: -8px; }
}
@media (max-width: 820px) {
  .v2-carousel__track { grid-auto-columns: 88%; gap: 16px; }
  .v2-carousel__btn { display: none; }
}

/* ---------- 19c. Sticky purchase bar ---------- */
.v2-buybar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 80;
  background: #fff; border-top: 1px solid var(--line);
  box-shadow: 0 -8px 30px rgba(9, 27, 58, .12);
  transform: translateY(110%); transition: transform .32s ease;
  padding: 12px 0; padding-bottom: max(12px, env(safe-area-inset-bottom));
}
.v2-buybar.is-visible { transform: translateY(0); }
.v2-buybar__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 22px;
}
.v2-buybar__id { display: flex; align-items: center; gap: 14px; min-width: 0; }
.v2-buybar__mark {
  width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center;
  background: var(--blue-050); color: var(--blue-600); flex-shrink: 0;
}
.v2-buybar__mark svg { width: 22px; height: 22px; }
.v2-buybar__code { font-size: 16px; font-weight: 800; color: var(--navy-800); line-height: 1.2; }
.v2-buybar__name {
  font-size: 12.5px; color: var(--muted); margin-top: 2px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.v2-buybar__actions { display: flex; align-items: center; gap: 12px; flex-shrink: 0; }
.v2-buybar__price {
  display: flex; flex-direction: column; align-items: flex-end; margin-right: 4px;
}
.v2-buybar__price-k {
  font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--muted);
}
.v2-buybar__price-v { font-size: 17px; font-weight: 800; color: var(--navy-800); }

@media (max-width: 820px) {
  .v2-buybar__name, .v2-buybar__mark { display: none; }
  .v2-buybar__inner { gap: 12px; }
  .v2-buybar__actions { gap: 8px; }
  .v2-buybar .btn { padding: 12px 16px; font-size: 12px; }
  .v2-buybar__price-v { font-size: 15px; }
}
@media (max-width: 480px) {
  .v2-buybar__ghost { display: none; }
}

/* Compact read-more inside cards */
.v2-more--sm { margin-top: 14px; padding: 8px 16px; font-size: 12.5px; }
.v2-module .v2-more-wrap, .v2-domain .v2-more-wrap { text-align: left; margin-top: auto; }
.v2-module .v2-clamp { --fade: #fff; }
.v2-domain .v2-clamp { --fade: var(--t, var(--t1)); }

/* ---------- 19d. Single-item callouts and process chains ---------- */

/* One item should never sit alone in a three-column grid. */
.v2-features--1 { grid-template-columns: 1fr; }
.v2-features--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.v2-callout {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 26px; align-items: start;
  background: var(--t, var(--t1)); border-radius: var(--r-card); padding: 34px 36px;
}
.v2-callout__icon {
  width: 62px; height: 62px; border-radius: 18px; display: grid; place-items: center;
  background: #fff; color: var(--c, var(--c1)); flex-shrink: 0;
}
.v2-callout__icon svg { width: 28px; height: 28px; }
.v2-callout__title {
  font-size: var(--fs-h3); font-weight: 700; color: var(--navy-800);
  line-height: 1.35; margin-bottom: 10px;
}
.v2-callout__text { font-size: var(--fs-body); line-height: 1.7; color: var(--ink-body); }
.v2-callout__text + .v2-callout__text { margin-top: 10px; }

/* Arrow chains ("Detect → Analyze → Respond") read as steps, not a headline. */
.v2-chain {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 10px 6px; margin: 0 auto; max-width: 940px;
}
.v2-chain--left { justify-content: flex-start; }
.v2-chain li {
  display: inline-flex; align-items: center; gap: 10px;
  font-size: 15px; font-weight: 700; color: var(--navy-800);
  background: var(--t, var(--t1)); border-radius: 999px; padding: 10px 18px;
}
.v2-chain li::after {
  content: '→'; color: var(--c, var(--c1)); font-weight: 700; margin-left: 4px;
}
.v2-chain li:last-child::after { content: ''; margin: 0; }

@media (max-width: 820px) {
  .v2-callout { grid-template-columns: 1fr; gap: 18px; padding: 26px 22px; }
  .v2-chain li { font-size: 13.5px; padding: 8px 14px; }
}
/* ---------- 6c. Certifications mega menu ---------- */
/* Pinned to the header rather than centred on the menu item, so it can never
   run off the side of the screen. */
.nav__item--mega { position: static; }
.nav__panel--mega {
  left: 0; right: 0; min-width: 0; transform: translateY(8px);
  padding: 0; border-top-width: 3px; border-radius: 0 0 var(--radius) var(--radius);
}
.nav__item--mega:hover .nav__panel--mega,
.nav__item--mega:focus-within .nav__panel--mega { transform: translateY(0); }
.mega { max-width: var(--container); margin-inline: auto; }
.mega__inner {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0; padding: 20px 26px 18px;
}
.mega__col { padding-inline: 13px; }
@media (min-width: 1025px) {
  /* Dividers and flush outer edges belong to the desktop grid. Left unscoped,
     :first-child out-specifies the stacked drawer padding and pins the first
     heading to the drawer edge. */
  .mega__col + .mega__col { border-left: 1px solid var(--line-soft); }
  .mega__col:first-child { padding-left: 0; }
  .mega__col:last-child { padding-right: 0; }
}
.mega__area { margin-bottom: 15px; }
.mega__area-name {
  display: flex; align-items: center; gap: 9px; padding: 0;
  font-size: 13px; font-weight: 700; color: var(--navy-800); line-height: 1.3;
}
.mega__area-name:hover { color: var(--c, var(--blue-600)); background: none; }

@media (max-width: 1024px) {
  .nav__panel--mega { min-width: 0; }
  .mega__inner { grid-template-columns: 1fr; padding: 8px 0; }
  .mega__col + .mega__col { border-top: 1px solid var(--line-soft); }
  .mega__col { padding: 14px 18px; }
  .mega__certs a { min-height: 34px; }
}

/* ---------- 19e. Builder-only block types ---------- */
.v2-quote {
  margin: 0; padding: 40px 44px; border-radius: var(--r-card, 18px);
  background: var(--t, #eef4ff); border-left: 5px solid var(--c, #2563eb);
}
.v2-quote blockquote {
  margin: 0; font-size: 21px; line-height: 1.55; font-weight: 600; color: var(--navy-800);
}
.v2-quote figcaption { margin-top: 18px; font-size: 14px; color: var(--ink-soft); }
.v2-quote figcaption strong { color: var(--navy-800); display: block; }
.v2-figure { margin: 0; }
.v2-figure figcaption {
  margin-top: 12px; text-align: center; font-size: 13.5px; color: var(--muted);
}
@media (max-width: 820px) { .v2-quote { padding: 26px 22px; } .v2-quote blockquote { font-size: 17px; } }

/* ------------------------------------------------------------------ *
 * Mega panels — Training, Exams, Credential Holders, About
 * An optional left rail, a grid of link columns, and a value strip.
 * Column counts come from --n so one rule serves every menu.
 * ------------------------------------------------------------------ */
.mpanel { max-width: var(--container); margin-inline: auto; }
.mpanel__body { display: block; padding: 20px 26px 18px; }
.mpanel__body--rail { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 0; }

.mpanel__title {
  margin: 0 0 10px; font-size: 10.5px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ink-3, #6b7280);
}
.mpanel__intro { margin: -6px 0 10px; font-size: 11.5px; line-height: 1.5; color: var(--ink-3, #6b7280); }

/* ---- shared link row ---- */
.mpanel__links, .mpanel__rail-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.mpanel__links a, .mpanel__rail-list a {
  display: flex; gap: 9px; align-items: flex-start;
  padding: 6px 8px; border-radius: var(--radius-sm); text-decoration: none;
  transition: background .16s;
}
.mpanel__links a:hover, .mpanel__rail-list a:hover {
  background: color-mix(in srgb, var(--c) 8%, transparent);
}
.mpanel__icon {
  flex-shrink: 0; width: 23px; height: 23px; border-radius: 7px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c);
}
.mpanel__icon svg { width: 13px; height: 13px; }
.mpanel__copy { display: grid; gap: 2px; min-width: 0; }
.mpanel__label { font-size: 12.5px; font-weight: 600; color: var(--ink, #111827); line-height: 1.28; }
.mpanel__links a:hover .mpanel__label,
.mpanel__rail-list a:hover .mpanel__label { color: var(--c); }
.mpanel__desc { font-size: 11px; line-height: 1.42; color: var(--ink-3, #6b7280); }
.mpanel__chev {
  width: 12px; height: 12px; margin-left: auto; align-self: center; flex-shrink: 0;
  color: var(--ink-3, #9aa1ab); transition: transform .16s, color .16s;
}
.mpanel__links a:hover .mpanel__chev,
.mpanel__rail-list a:hover .mpanel__chev { color: var(--c); transform: translateX(2px); }

/* ---- left rail ---- */
.mpanel__rail {
  padding-right: 22px; margin-right: 22px;
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
}
.mpanel__rail-list.is-numbered { counter-reset: none; gap: 0; }
.mpanel__rail-list.is-numbered a { align-items: flex-start; padding-block: 7px; }
.mpanel__step {
  flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center; font-size: 11px; font-weight: 700;
  background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c);
}
/* The connecting line between numbered steps */
.mpanel__rail-list.is-numbered li { position: relative; }
.mpanel__rail-list.is-numbered li + li::before {
  content: ''; position: absolute; left: 20px; top: -6px; height: 12px; width: 1px;
  background: color-mix(in srgb, var(--c) 25%, transparent);
}

/* ---- columns ---- */
.mpanel__cols { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); }
.mpanel__col { padding-inline: 13px; display: flex; flex-direction: column; }

/* Card style: each link becomes a tinted box (Training options) */
.mpanel__col--cards .mpanel__links { gap: 8px; }
.mpanel__col--cards .mpanel__links a {
  padding: 12px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--c) 6%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 14%, transparent);
}
.mpanel__col--cards .mpanel__links a:hover {
  background: color-mix(in srgb, var(--c) 11%, transparent);
}

/* Plain style: label only, no description block */
.mpanel__col--plain .mpanel__links a { align-items: center; padding-block: 7px; }

.mpanel__more {
  margin-top: 10px; display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  color: var(--c); text-decoration: none;
}
.mpanel__more:hover { text-decoration: underline; }

/* ---- promo card ---- */
.mpanel__promo {
  margin-top: auto; padding: 12px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--c) 7%, transparent);
  border: 1px solid color-mix(in srgb, var(--c) 16%, transparent);
  display: grid; gap: 7px; justify-items: start;
}
.mpanel__rail .mpanel__promo { margin-top: 18px; }
.mpanel__promo-title { font-size: 12px; font-weight: 700; color: var(--ink, #111827); }
.mpanel__promo-body { font-size: 11px; line-height: 1.45; color: var(--ink-3, #6b7280); }
.mpanel__promo-cta {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; border-radius: 6px; background: var(--c); color: #fff;
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; transition: filter .16s, transform .16s;
}
.mpanel__promo-cta:hover { filter: brightness(1.08); transform: translateY(-1px); color: #fff; }
.mpanel__promo-cta svg { transition: transform .18s; }
.mpanel__promo-cta:hover svg { transform: translateX(2px); }

/* ---- value strip ---- */
.mpanel__foot {
  display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr));
  padding: 13px 26px; border-top: 1px solid var(--line-soft);
  background: var(--blue-050, #f6f9ff);
  border-radius: 0 0 var(--radius) var(--radius);
}
.mpanel__point { display: flex; gap: 9px; align-items: flex-start; padding-inline: 13px; }
.mpanel__point-icon {
  flex-shrink: 0; width: 26px; height: 26px; display: grid; place-items: center;
  color: var(--blue-600);
}
.mpanel__point-icon svg { width: 18px; height: 18px; }
.mpanel__point-title { font-size: 11.5px; font-weight: 700; color: var(--ink, #111827); }

/* Column dividers and flush outer edges belong to the desktop grid only —
   left unscoped they out-specify the stacked drawer rules below. */
@media (min-width: 1025px) {
  .mpanel__col + .mpanel__col { border-left: 1px solid var(--line-soft); }
  .mpanel__col:first-child { padding-left: 0; }
  .mpanel__col:last-child { padding-right: 0; }
  .mpanel__point + .mpanel__point { border-left: 1px solid var(--line-soft); }
  .mpanel__point:first-child { padding-left: 0; }
  /* Certifications keeps its own column grid; the rail sits beside it. */
  .mega__body { display: grid; grid-template-columns: 232px minmax(0, 1fr); padding: 24px 28px 8px; }
  .mega__body .mega__inner { padding: 0; }
  .mega__body .mpanel__rail { margin-right: 0; }
}

/* ---- drawer: everything stacks ---- */
@media (max-width: 1024px) {
  .mpanel__body, .mpanel__body--rail, .mega__body { display: block; padding: 8px 0; }
  .mpanel__rail {
    padding: 14px 18px; margin: 0; border-right: 0;
    border-bottom: 1px solid var(--line-soft);
  }
  .mpanel__cols { grid-template-columns: 1fr; }
  .mpanel__col { padding: 14px 18px; }
  .mpanel__col + .mpanel__col { border-top: 1px solid var(--line-soft); }
  .mpanel__links a, .mpanel__rail-list a { min-height: 44px; }
  .mpanel__promo { margin-top: 14px; }
  .mpanel__foot { grid-template-columns: 1fr; padding: 8px 18px 16px; }
  .mpanel__point { padding: 12px 0; }
  .mpanel__point + .mpanel__point { border-top: 1px solid var(--line-soft); }
}

/* ------------------------------------------------------------------ *
 * Media columns — Resources & Insights
 * Each column leads with an image, a circular badge and a blurb, and
 * closes with an outlined call to action.
 * ------------------------------------------------------------------ */
.mpanel__lede {
  margin: 0; padding: 18px 28px 0; text-align: center;
  font-size: 12.5px; line-height: 1.55; color: var(--ink-3, #6b7280);
}
.mpanel__col--media {
  padding: 0; border: 1px solid var(--line-soft); border-radius: var(--radius-sm);
  overflow: hidden; background: #fff;
}
.mpanel__cols:has(.mpanel__col--media) { gap: 14px; }

.mpanel__media { position: relative; aspect-ratio: 16 / 10; overflow: hidden; }
.mpanel__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mpanel__badge {
  position: absolute; left: 50%; bottom: -21px; transform: translateX(-50%);
  width: 42px; height: 42px; border-radius: 50%; display: grid; place-items: center;
  background: var(--c); color: #fff; border: 3px solid #fff;
  box-shadow: 0 4px 12px rgba(15, 30, 60, .16);
}
.mpanel__badge svg { width: 19px; height: 19px; }

.mpanel__heading {
  margin: 30px 12px 0; text-align: center;
  font-size: 12.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--c);
}
.mpanel__blurb {
  margin: 6px 12px 0; text-align: center;
  font-size: 11.5px; line-height: 1.5; color: var(--ink-3, #6b7280);
}
/* The rule the client's design puts under each blurb */
.mpanel__col--media .mpanel__links {
  margin: 12px 10px 0; padding-top: 11px;
  border-top: 1px solid color-mix(in srgb, var(--c) 30%, transparent);
}
.mpanel__col--media .mpanel__links a { padding: 6px 7px; align-items: center; }
.mpanel__col--media .mpanel__icon {
  width: 20px; height: 20px; border-radius: 6px; background: none;
}
.mpanel__col--media .mpanel__icon svg { width: 13px; height: 13px; }
.mpanel__col--media .mpanel__label { font-size: 12px; font-weight: 500; }

.mpanel__cta {
  margin: 12px 12px 14px; display: flex; align-items: center; justify-content: center; gap: 6px;
  padding: 9px 12px; border-radius: 7px;
  border: 1px solid color-mix(in srgb, var(--c) 40%, transparent);
  background: color-mix(in srgb, var(--c) 5%, transparent); color: var(--c);
  font-size: 10.5px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase;
  text-decoration: none; transition: background .16s, border-color .16s;
}
.mpanel__cta:hover { background: var(--c); border-color: var(--c); color: #fff; }
.mpanel__cta svg { transition: transform .18s; }
.mpanel__cta:hover svg { transform: translateX(2px); }

@media (min-width: 1025px) {
  /* Media columns are self-contained cards, so the shared divider is dropped. */
  .mpanel__col--media + .mpanel__col--media { border-left: 1px solid var(--line-soft); }
}
@media (max-width: 1024px) {
  .mpanel__col--media { margin: 0 18px; }
  .mpanel__col--media + .mpanel__col--media { border-top: 1px solid var(--line-soft); margin-top: 14px; }
  .mpanel__lede { text-align: left; padding: 14px 18px 0; }
}

/* ------------------------------------------------------------------ *
 * Certifications mega — group columns with level pills
 * ------------------------------------------------------------------ */
.mega__group {
  display: flex; align-items: center; gap: 8px;
  padding-bottom: 9px; margin-bottom: 11px;
  border-bottom: 2px solid color-mix(in srgb, var(--c) 35%, transparent);
}
.mega__group-icon {
  flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; background: var(--c); color: #fff;
}
.mega__group-icon svg { width: 14px; height: 14px; }
.mega__group-name {
  margin: 0; font-size: 10.5px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--c); line-height: 1.25;
}

.mega__area { margin-bottom: 11px; }
.mega__area-name {
  display: block; font-size: 12px; font-weight: 700;
  color: var(--ink, #111827); margin-bottom: 3px;
}
.mega__certs { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; }
.mega__certs a {
  display: flex; align-items: center; gap: 6px;
  padding: 3px 5px; border-radius: 5px; text-decoration: none;
  transition: background .16s;
}
.mega__certs a:hover { background: color-mix(in srgb, var(--c) 9%, transparent); }
.mega__caret { width: 10px; height: 10px; flex-shrink: 0; color: var(--c); }
.mega__code { font-size: 11.5px; font-weight: 700; color: var(--ink, #111827); }
.mega__certs a:hover .mega__code { color: var(--c); }
.mega__level {
  margin-left: auto; padding: 1px 7px; border-radius: 999px;
  font-size: 9.5px; font-weight: 600; white-space: nowrap;
  border: 1px solid var(--line-soft); color: var(--ink-3, #6b7280); background: #fff;
}
.mega__level--professional { border-color: color-mix(in srgb, var(--c) 40%, transparent); color: var(--c); }

/* The current rail entry is highlighted, as in the client's design. */
.mpanel__rail-list a.is-current {
  background: color-mix(in srgb, var(--c) 10%, transparent);
}
.mpanel__rail-list a.is-current .mpanel__label { color: var(--c); font-weight: 700; }

/* Footer bar whose items are links rather than static points. */
.mpanel__foot--links .mpanel__point {
  text-decoration: none; border-radius: var(--radius-sm);
  padding-block: 6px; transition: background .16s;
}
.mpanel__foot--links .mpanel__point:hover { background: rgba(37, 99, 235, .07); }
.mpanel__foot--links .mpanel__chev { width: 12px; height: 12px; color: var(--blue-600); }

/* The open menu is marked with a tinted pill and a caret pointing at its panel,
   as in the client's header design. */
@media (min-width: 1025px) {
  .nav__item--mega > .nav__row > .nav__link {
    position: relative; border-radius: 8px; transition: background .16s, color .16s;
  }
  .nav__item--mega:hover > .nav__row > .nav__link,
  .nav__item--mega:focus-within > .nav__row > .nav__link {
    background: var(--blue-050, #eff5ff); color: var(--blue-600);
  }
  .nav__item--mega:hover > .nav__row > .nav__link .nav__caret,
  .nav__item--mega:focus-within > .nav__row > .nav__link .nav__caret {
    transform: rotate(180deg);
  }
  .nav__item--mega:hover > .nav__row > .nav__link::after,
  .nav__item--mega:focus-within > .nav__row > .nav__link::after {
    content: ''; position: absolute; left: 50%; bottom: -7px;
    width: 12px; height: 12px; background: #fff;
    border-left: 1px solid var(--line-soft); border-top: 1px solid var(--line-soft);
    transform: translateX(-50%) rotate(45deg); z-index: 61;
  }
  .nav__caret { transition: transform .18s; }
}

/* Utility bar links carry a small leading icon, as in the client's header. */
.utility__list a, .utility__right a:not(.utility__apply) {
  display: inline-flex; align-items: center; gap: 6px;
}
.utility__list a svg,
.utility__right a:not(.utility__apply) svg {
  width: 13px; height: 13px; flex-shrink: 0; opacity: .75;
}

/* ==================================================================== *
 * Hero slider — built to the client's ten banner designs.
 * Banner is 3.5:1. Within it: lockup at the top-left, headline block,
 * sub-line, a domain graphic on the right and the dots at the foot.
 * ==================================================================== */
.hero {
  display: grid; position: relative; overflow: hidden;
  aspect-ratio: 1500 / 428; min-height: 360px; max-height: 520px;
  background: none;
}
.hero::after { content: none; }
.hero > .hero__slide { grid-area: 1 / 1; }

.hero__slide {
  position: relative; background: var(--bg);
  visibility: hidden; opacity: 0; pointer-events: none;
  transition: opacity .45s ease;
}
.hero__slide.is-active { visibility: visible; opacity: 1; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .hero__slide { transition: none; } }

.hero__bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__bg::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(100deg, rgba(6,21,50,.94) 0%, rgba(6,21,50,.78) 46%, rgba(6,21,50,.3) 100%);
}

.hero__inner {
  position: relative; z-index: 2; height: 100%;
  display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: 28px; align-items: stretch; align-content: stretch;
  padding-block: 10px 42px; min-height: 0;
}

/* --- copy column ------------------------------------------------- */
.hero__copy { display: flex; flex-direction: column; }
.hero__brand { display: inline-flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.hero__brand-mark { width: 32px; height: 32px; color: var(--blue-500, #2f7fe0); }
.hero__brand-name { font-size: 23px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.hero__brand-name sup { font-size: .44em; position: relative; top: -.85em; }

.hero__title {
  margin: 55px 0 0; font-weight: 800; letter-spacing: -.028em; line-height: 1.2;
  display: grid; gap: 0;
  /* Sized so the longest line always fits the column: the column is ~36vw and
     a character averages 0.56em at this weight. */
  font-size: min(clamp(28px, 3.3vw, 50px), calc(36vw / (var(--maxch, 20) * 0.60)));
}
.hero__title span { display: block; }
.hero__title-accent { color: var(--accent); }
.hero__lede {
  margin: 32px 0 0; max-width: 46ch;
  font-size: clamp(12px, 1vw, 15px); line-height: 1.5; color: rgba(255,255,255,.82);
}

/* Light banners carry navy copy; a photo banner always keeps white. */
.hero__slide--light:not(.has-photo) .hero__title { color: var(--navy-900, #0b1b3d); }
.hero__slide--light:not(.has-photo) .hero__brand-name { color: var(--navy-900, #0b1b3d); }
.hero__slide--light:not(.has-photo) .hero__lede { color: rgba(15,30,60,.72); }

/* --- dots, inside the banner ------------------------------------- */
.hero__dots {
  position: absolute; left: 0; right: 0; bottom: 15px; z-index: 3;
  display: flex; justify-content: center; gap: 7px;
}

/* --- domain graphics --------------------------------------------- */
.hero__visual { align-self: center; justify-self: center; width: 100%; }
.hdomains { list-style: none; margin: 0; padding: 0; display: flex; }
.hdomains li { display: grid; justify-items: center; gap: 7px; text-align: center; }
.hdomains__icon {
  display: grid; place-items: center; width: 44px; height: 44px;
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent);
  color: var(--c);
}
.hdomains__icon svg { width: 20px; height: 20px; }
.hdomains__label {
  font-size: 9.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  line-height: 1.35; max-width: 11ch; color: rgba(255,255,255,.82);
}
.hero__slide--light:not(.has-photo) .hdomains__label { color: rgba(15,30,60,.78); }

.hdomains--row, .hdomains--circle, .hdomains--hex, .hdomains--diamond {
  justify-content: center; align-items: flex-start; gap: 18px; flex-wrap: wrap;
}
.hdomains--row .hdomains__icon    { border-radius: 12px; }
.hdomains--circle .hdomains__icon { border-radius: 50%; background: #fff; }
.hdomains--hex .hdomains__icon    { clip-path: polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%); }
.hdomains--diamond .hdomains__icon { border-radius: 10px; transform: rotate(45deg); }
.hdomains--diamond .hdomains__icon svg { transform: rotate(-45deg); }
.hdomains--diamond li:nth-child(even) { margin-top: 26px; }

.hdomains--list { flex-direction: column; align-items: flex-start; gap: 9px; }
.hdomains--list li { grid-auto-flow: column; justify-items: start; align-items: center; gap: 11px; text-align: left; }
.hdomains--list .hdomains__icon { width: 32px; height: 32px; border-radius: 50%; }
.hdomains--list .hdomains__icon svg { width: 15px; height: 15px; }
.hdomains--list .hdomains__label { max-width: none; font-size: 10.5px; }

/* Ring of domains around a central shield (banner 1) */
.hero__visual--orbit .orbit { max-width: 330px; margin-inline: auto; }

/* Learn → Certify → Advance → Lead (banner 6) */
.hjourney { list-style: none; margin: 0; padding: 0; display: flex; align-items: center; justify-content: center; }
.hjourney li { display: grid; justify-items: center; gap: 8px; position: relative; padding-inline: 18px; }
.hjourney li + li::before {
  content: ''; position: absolute; left: -20px; top: 22px; width: 40px;
  border-top: 2px dashed rgba(255,255,255,.45);
}
.hjourney__dot {
  width: 46px; height: 46px; border-radius: 50%; display: grid; place-items: center;
  border: 2px solid rgba(255,255,255,.6); color: #fff;
}
.hjourney__dot svg { width: 19px; height: 19px; }
.hjourney__label { font-size: 10px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: #fff; }

/* Single emblem (banner 5) */

/* --- stacked on small screens ------------------------------------ */
@media (max-width: 900px) {
  .hero { aspect-ratio: auto; min-height: 0; max-height: none; }
  .hero__inner { grid-template-columns: 1fr; gap: 24px; padding-block: 30px 52px; height: auto; }
  .hero__visual { order: 2; }
  .hero__title {
    margin-top: 16px;
    font-size: min(clamp(20px, 6.2vw, 34px), calc(88vw / (var(--maxch, 20) * 0.60)));
  }
  .hero__lede { margin-top: 12px; }
  .hdomains--row, .hdomains--circle, .hdomains--hex, .hdomains--diamond { gap: 12px; }
  .hdomains--diamond li:nth-child(even) { margin-top: 0; }
  .hdomains__icon { width: 38px; height: 38px; }
  .hjourney li { padding-inline: 11px; }
  .hjourney li + li::before { left: -13px; width: 26px; }
}

/* The ring nodes carry their domain colour, as the five do in every other
   layout; the original rule painted them all the same navy. */
.hero__visual--orbit .orbit__node-dot {
  background: color-mix(in srgb, var(--c) 14%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent);
  color: var(--c);
}
.hero__slide--dark .hero__visual--orbit .orbit__node-dot,
.hero__slide.has-photo .hero__visual--orbit .orbit__node-dot {
  background: color-mix(in srgb, var(--c) 26%, rgba(9, 29, 66, .7));
}
.hero__visual--orbit .orbit__node-label { color: rgba(255, 255, 255, .82); }
.hero__slide--light:not(.has-photo) .hero__visual--orbit .orbit__node-label { color: rgba(15, 30, 60, .78); }

/* ==================================================================== *
 * Type — headings in the display face, as in the client's artwork
 * ==================================================================== */
h1, h2, h3,
.hero__title, .hero__brand-name,
.sec__title, .v2-h2, .cert-hero__title,
.quick__item strong, .mega__group-name, .mpanel__heading {
  font-family: var(--font-display);
}
/* Uppercase labels are set in the display face too — they read wider there. */
.hdomains__label, .orbit__node-label, .hjourney__label,
.mpanel__title, .mega__group-name {
  font-family: var(--font-display); font-weight: 700;
}
.hero__title { font-weight: 800; }
.hero__brand-name { font-weight: 800; }

/* ==================================================================== *
 * Domain marks — each banner in the design shapes them differently
 * ==================================================================== */

/* Banner 1 & 10: a white disc, coloured glyph, soft lift */
.hdomains--circle .hdomains__icon,
.hero__visual--orbit .orbit__node-dot {
  background: #fff; border: 1px solid rgba(15, 30, 60, .08);
  box-shadow: 0 4px 14px rgba(15, 30, 60, .12);
  color: var(--c);
}
.hero__slide--dark .hdomains--circle .hdomains__icon,
.hero__slide--dark .hero__visual--orbit .orbit__node-dot,
.hero__slide.has-photo .hero__visual--orbit .orbit__node-dot {
  background: #fff; border-color: rgba(255, 255, 255, .25);
  box-shadow: 0 4px 18px rgba(0, 0, 0, .3);
}

/* Banner 2 & 7: a tinted rounded square */
.hdomains--row .hdomains__icon {
  border-radius: 12px;
  background: color-mix(in srgb, var(--c) 16%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--c) 50%, transparent);
  box-shadow: none;
}

/* Banner 4: a diamond outline on white */
.hdomains--diamond .hdomains__icon {
  background: #fff; border: 1.5px solid color-mix(in srgb, var(--c) 55%, transparent);
  border-radius: 10px; box-shadow: 0 3px 12px rgba(15, 30, 60, .08);
}

/* Banner 8: a hexagon outline */
.hdomains--hex .hdomains__icon {
  background: color-mix(in srgb, var(--c) 20%, transparent);
  border: 1.5px solid color-mix(in srgb, var(--c) 60%, transparent);
  box-shadow: none;
}

/* Banner 3 & 9: a solid disc with a white glyph */
.hdomains--list .hdomains__icon {
  background: var(--c); border: 0; color: #fff;
  box-shadow: 0 3px 10px color-mix(in srgb, var(--c) 40%, transparent);
}

/* ==================================================================== *
 * Banner artwork — the graphics each of the ten designs carries
 * ==================================================================== */
.hero__art { position: absolute; inset: 0; z-index: 1; pointer-events: none; overflow: hidden; }
.hero__art .hart { position: absolute; }

/* Banner 1: faint mesh, full bleed */
.hero__art--network .hart { inset: 0; width: 100%; height: 100%; color: rgba(37, 99, 235, .28); }

/* Banner 2: the globe sits off the right edge */
.hero__art--globe .hart { right: -6%; top: 50%; transform: translateY(-50%); width: 640px; height: 640px; }

/* Banner 4: pale diamonds */
.hero__art--geometric .hart { inset: 0; width: 100%; height: 100%; color: rgba(124, 58, 237, .22); }

/* Banner 8: streaks across the right */
.hero__art--streaks .hart { inset: 0; width: 100%; height: 100%; }

/* Banner 9: growth arrows behind the copy's right */
.hero__art--arrows .hart { right: 2%; bottom: 0; width: 560px; height: 400px; }

/* Banner 10: pastel ribbons along the foot */
.hero__art--wave .hart { left: 0; right: 0; bottom: 0; width: 100%; height: 100%; }

/* Banner 5: the wireframe cube */
.hcube { display: grid; place-items: center; }
.hcube svg { width: 230px; height: 230px; filter: drop-shadow(0 0 34px rgba(56, 189, 248, .4)); }

/* Banner 7: dotted world map with pins */
.hmap { position: relative; width: 100%; max-width: 560px; margin-inline: auto; }
.hmap__dots { display: block; width: 100%; height: auto; color: rgba(37, 99, 235, .58); }
.hero__slide--dark .hmap__dots, .hero__slide.has-photo .hmap__dots { color: rgba(190, 225, 255, .6); }
.hmap__pin {
  position: absolute; transform: translate(-50%, -100%);
  width: 28px; height: 28px; border-radius: 50% 50% 50% 3px; rotate: -45deg;
  display: grid; place-items: center; background: var(--c);
  box-shadow: 0 3px 10px color-mix(in srgb, var(--c) 45%, transparent);
}
.hmap__pin svg { width: 13px; height: 13px; color: #fff; rotate: 45deg; }

/* The copy and graphic must sit above the artwork */
.hero__inner { position: relative; z-index: 2; }

/* ==================================================================== *
 * Course section designs — built from the client's reference sections.
 * Each uses the rotating accent already on the page (--c1…--c6).
 * ==================================================================== */

/* ---- bordered icon tiles, one highlighted ---- */
.cs-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.cs-tile {
  padding: 24px 22px; border: 1px solid var(--line-soft); border-radius: var(--radius);
  background: #fff; transition: border-color .18s, box-shadow .18s, transform .18s;
}
.cs-tile:hover { border-color: var(--c); box-shadow: 0 12px 30px rgba(15, 30, 60, .09); transform: translateY(-2px); }
.cs-tile.is-lit { background: color-mix(in srgb, var(--c) 8%, #fff); border-color: color-mix(in srgb, var(--c) 35%, transparent); }
.cs-tile__icon {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: 12px;
  background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c); margin-bottom: 14px;
}
.cs-tile__icon svg { width: 22px; height: 22px; }
.cs-tile__title { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--ink); }
.cs-tile__text { margin: 0 0 8px; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }
.cs-tile__list { margin: 10px 0 0; padding-left: 18px; font-size: 13px; line-height: 1.7; color: var(--ink-soft); }

/* ---- big numeral steps ---- */
.cs-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 0; border-radius: var(--radius); overflow: hidden; }
.cs-step { padding: 28px 26px; background: #f7f9fc; border-right: 1px solid var(--line-soft); }
.cs-step:last-child { border-right: 0; }
.cs-step.is-lit { background: var(--navy-900, #0b1b3d); }
.cs-step.is-lit .cs-step__title { color: #fff; }
.cs-step.is-lit .cs-step__text { color: rgba(255, 255, 255, .78); }
.cs-step.is-lit .cs-step__num { color: color-mix(in srgb, var(--c) 70%, #fff); }
.cs-step__num { display: block; font-family: var(--font-display); font-size: 40px; font-weight: 800; line-height: 1; color: color-mix(in srgb, var(--c) 45%, transparent); }
.cs-step__title { margin: 12px 0 8px; font-size: 15.5px; font-weight: 700; color: var(--ink); }
.cs-step__text { margin: 0 0 8px; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }

/* ---- hexagon process ---- */
.cs-hex { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 26px 20px; text-align: center; }
.cs-hex__item { position: relative; padding-top: 8px; }
.cs-hex__mark {
  display: grid; place-items: center; width: 74px; height: 74px; margin: 0 auto 8px;
  background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c);
  clip-path: polygon(25% 3%, 75% 3%, 100% 50%, 75% 97%, 25% 97%, 0 50%);
}
.cs-hex__mark svg { width: 30px; height: 30px; }
.cs-hex__num { display: inline-block; font-size: 11px; font-weight: 800; letter-spacing: .1em; color: var(--c); }
.cs-hex__title { margin: 6px 0 6px; font-size: 15px; font-weight: 700; color: var(--ink); }
.cs-hex__text { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); max-width: 34ch; margin-inline: auto; }

/* ---- two-column icon features ---- */
.cs-features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 18px 30px; }
.cs-feature { display: flex; gap: 14px; align-items: flex-start; }
.cs-feature__icon {
  flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px;
  background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c);
}
.cs-feature__icon svg { width: 20px; height: 20px; }
.cs-feature__title { margin: 0 0 5px; font-size: 15px; font-weight: 700; color: var(--ink); }
.cs-feature__text { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }

/* ---- corner-number cards ---- */
.cs-ribbons { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.cs-ribbon {
  position: relative; padding: 24px 22px; border-radius: var(--radius);
  border: 1px solid var(--line-soft); background: #fff; overflow: hidden;
}
.cs-ribbon__num {
  position: absolute; top: 0; right: 0; padding: 6px 14px 8px 18px;
  background: var(--c); color: #fff; font-family: var(--font-display);
  font-size: 14px; font-weight: 800; border-bottom-left-radius: 14px;
}
.cs-ribbon__icon { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 11px;
  background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); margin-bottom: 12px; }
.cs-ribbon__icon svg { width: 20px; height: 20px; }
.cs-ribbon__title { margin: 0 0 8px; font-size: 15px; font-weight: 700; color: var(--ink); padding-right: 40px; }
.cs-ribbon__text { margin: 0 0 8px; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }

/* ---- ticked list in columns ---- */
.cs-checks { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 30px; }
.cs-checks--tight { grid-template-columns: 1fr; gap: 8px; margin-top: 16px; }
.cs-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft); }
.cs-checks__mark {
  flex-shrink: 0; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px;
  border-radius: 50%; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c);
}
.cs-checks__mark svg { width: 11px; height: 11px; }

/* ---- rounded pills ---- */
.cs-pills { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.cs-pills li {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 9px 16px 9px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--c) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
  font-size: 13px; line-height: 1.45; color: var(--ink);
}
.cs-pills__icon { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: #fff; color: var(--c); flex-shrink: 0; }
.cs-pills__icon svg { width: 14px; height: 14px; }

/* ---- solid colour bars ---- */
.cs-bars { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.cs-bar {
  display: flex; align-items: center; gap: 13px; padding: 15px 18px;
  border-radius: var(--radius-sm); background: var(--c); color: #fff;
}
.cs-bar__icon { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 9px;
  background: rgba(255, 255, 255, .18); flex-shrink: 0; }
.cs-bar__icon svg { width: 17px; height: 17px; }
.cs-bar__text { font-size: 13.5px; font-weight: 600; line-height: 1.45; }

/* ---- image beside the copy ---- */
.cs-split { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: 40px; align-items: center; }
.cs-split--flip .cs-split__media { order: 2; }
.cs-split__media { border-radius: var(--radius); overflow: hidden; box-shadow: 0 16px 40px rgba(15, 30, 60, .12); }
.cs-split__media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
.cs-split__text { margin: 0 0 12px; font-size: 14.5px; line-height: 1.75; color: var(--ink-soft); }

@media (max-width: 900px) {
  .cs-tiles, .cs-steps, .cs-hex, .cs-ribbons { grid-template-columns: 1fr; }
  .cs-features, .cs-checks, .cs-bars { grid-template-columns: 1fr; }
  .cs-steps { border-radius: var(--radius); }
  .cs-step { border-right: 0; border-bottom: 1px solid var(--line-soft); }
  .cs-split { grid-template-columns: 1fr; gap: 24px; }
  .cs-split--flip .cs-split__media { order: 0; }
}

/* A short passage renders as a slim strip rather than a full-height band —
   a couple of lines never needs the whole viewport. */
.cs-fact {
  display: flex; gap: 16px; align-items: flex-start;
  padding: 20px 24px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--c) 6%, #fff);
  border-left: 4px solid var(--c);
}
.cs-fact__icon {
  flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 11px; background: color-mix(in srgb, var(--c) 14%, transparent); color: var(--c);
}
.cs-fact__icon svg { width: 19px; height: 19px; }
.cs-fact__title { margin: 0 0 6px; font-size: 15px; font-weight: 700; color: var(--ink); }
.cs-fact__copy p { margin: 0 0 6px; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }
.cs-fact__copy p:last-child { margin-bottom: 0; }
.cs-fact__list { margin: 8px 0 0; padding-left: 18px; font-size: 13.5px; line-height: 1.7; color: var(--ink-soft); }
/* The strip is an inline note, so it does not need a tall band around it. */
.v2-sec:has(> .container > .cs-fact) { padding-block: 26px; }

/* A stated process rendered as a connected flow, rather than crammed into a heading */
.cs-flow {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: stretch; gap: 10px;
}
.cs-flow li {
  position: relative; flex: 1 1 150px; min-width: 140px;
  display: flex; flex-direction: column; gap: 7px; align-items: center; text-align: center;
  padding: 16px 12px; border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--c) 7%, #fff);
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
}
.cs-flow li::after {
  content: ''; position: absolute; right: -8px; top: 50%; z-index: 1;
  width: 7px; height: 7px; transform: translateY(-50%) rotate(45deg);
  border-top: 2px solid color-mix(in srgb, var(--c) 55%, transparent);
  border-right: 2px solid color-mix(in srgb, var(--c) 55%, transparent);
}
.cs-flow li:last-child::after { content: none; }
.cs-flow__dot {
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--c); color: #fff; font-size: 11.5px; font-weight: 800;
  font-family: var(--font-display);
}
.cs-flow__label { font-size: 12.5px; font-weight: 600; line-height: 1.4; color: var(--ink); }

/* Tighter rhythm inside the bands too */
.v2-prose p { margin-bottom: 12px; }
.cs-tiles, .cs-ribbons { gap: 14px; }
.cs-hex { gap: 20px 16px; }
.cs-features { gap: 14px 26px; }

/* ==================================================================== *
 * Compaction — the pages carry a lot of copy, so the shell around it
 * must not add more height than the words themselves.
 * ==================================================================== */
.v2-bigpanel { padding: 36px 32px; border-radius: 22px; }
.v2-features { gap: 16px; }
.v2-features > * { padding: 22px 20px; }

.v2-features li { font-size: 13.5px; line-height: 1.6; }

.v2-head { margin-bottom: 26px; }
.v2-lede { margin-top: 10px; }
.faq { gap: 8px; }
.v2-carousel { margin-top: 4px; }

/* ==================================================================== *
 * Technology stack — grouped cards whose chips size to their own label
 * (the old grid stretched "SQL" to the same width as a full sentence).
 * ==================================================================== */
.v2-stack { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 16px; }
.v2-stack__group {
  padding: 20px 22px; border-radius: var(--radius);
  background: #fff; border: 1px solid var(--line-soft);
  border-top: 3px solid var(--c);
}
.v2-stack__title {
  display: flex; align-items: center; gap: 10px; margin: 0 0 14px;
  font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--ink);
}
.v2-stack__mark {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px;
  background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c); flex-shrink: 0;
}
.v2-stack__mark svg { width: 16px; height: 16px; }
.v2-stack__count {
  margin-left: auto; padding: 2px 9px; border-radius: 999px;
  background: color-mix(in srgb, var(--c) 12%, transparent); color: var(--c);
  font-size: 11px; font-weight: 800;
}
.v2-chips { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.v2-chip {
  display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 8px;
  background: color-mix(in srgb, var(--c) 7%, #f7f9fc);
  border: 1px solid color-mix(in srgb, var(--c) 18%, transparent);
  font-size: 12.5px; font-weight: 600; color: var(--ink); line-height: 1.35;
  transition: background .16s, border-color .16s;
}
.v2-chip:hover { background: color-mix(in srgb, var(--c) 14%, #fff); border-color: var(--c); }

/* Loose bullets at the top of such a section flow as chips too. */
.v2-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.v2-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px 8px 8px;
  border-radius: 999px; background: var(--t, var(--t1));
  font-size: 12.5px; font-weight: 600; color: var(--navy-800);
}
.v2-pill__icon { width: 26px; height: 26px; }
.v2-pill__icon svg { width: 13px; height: 13px; }
/* Bullet lists inside the section cards */
.cs-step__list, .cs-hex__list, .cs-feature__list, .cs-ribbon__list {
  margin: 8px 0 0; padding-left: 17px; font-size: 13px; line-height: 1.65; color: var(--ink-soft);
}
.cs-hex__list { text-align: left; display: inline-block; }
.faq__list { margin: 8px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.7; color: var(--ink-body); }
.v2-cta__list { margin: 10px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.85); }
.v2-cta__text strong { color: #fff; }
.faq__list { margin: 8px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.7; color: var(--ink-body); }
.v2-cta__list { margin: 10px 0 0; padding-left: 18px; font-size: 14px; line-height: 1.7; color: rgba(255,255,255,.85); }
.v2-cta__text strong { color: #fff; }

/* A section's own bullets, sitting above its sub-topics */
.cs-checks--lead { margin-bottom: 24px; }

/* Certification validity and similar figures — read as data, not prose */
.cs-facts {
  border-radius: var(--radius); overflow: hidden;
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
  background: color-mix(in srgb, var(--c) 5%, #fff);
}
.cs-facts__head {
  display: flex; align-items: center; gap: 11px; padding: 15px 20px;
  border-bottom: 1px solid color-mix(in srgb, var(--c) 18%, transparent);
}
.cs-facts__icon {
  display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px;
  background: var(--c); color: #fff; flex-shrink: 0;
}
.cs-facts__icon svg { width: 17px; height: 17px; }
.cs-facts__title {
  margin: 0; font-family: var(--font-display); font-size: 14.5px; font-weight: 700; color: var(--ink);
}
.cs-facts__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.cs-facts__cell {
  padding: 16px 20px; font-size: 13.5px; line-height: 1.5; color: var(--ink-soft);
  border-right: 1px solid color-mix(in srgb, var(--c) 14%, transparent);
}
.cs-facts__cell:last-child { border-right: 0; }
.cs-facts__cell.is-figure {
  font-family: var(--font-display); font-size: 17px; font-weight: 800; color: var(--c);
}
@media (max-width: 700px) {
  .cs-facts__grid { grid-template-columns: 1fr; }
  .cs-facts__cell { border-right: 0; border-bottom: 1px solid color-mix(in srgb, var(--c) 14%, transparent); }
  .cs-facts__cell:last-child { border-bottom: 0; }
}

/* The closing call to action: copy and buttons on one line, the next steps
   as a compact row beneath rather than a stack of loose paragraphs. */
.v2-cta__steps {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  gap: 10px; margin-top: 22px;
}
.v2-cta__step {
  display: grid; gap: 4px; padding: 13px 15px; border-radius: var(--radius-sm);
  background: rgba(255, 255, 255, .08); border: 1px solid rgba(255, 255, 255, .16);
}
.v2-cta__step-num {
  font-family: var(--font-display); font-size: 11px; font-weight: 800;
  letter-spacing: .08em; color: var(--gold-500, #e9b949);
}
.v2-cta__step-title {
  font-size: 12.5px; font-weight: 700; color: #fff; line-height: 1.3;
  text-transform: uppercase; letter-spacing: .03em;
}
.v2-cta__step-text { font-size: 11.5px; line-height: 1.5; color: rgba(255, 255, 255, .72); }
.v2-cta__side { flex-shrink: 0; }
.v2-cta { display: block; }
.v2-cta__top { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; }
/* Capability phrases the client lists under a "…ready to:" lead-in */
.v2-cta__chips { list-style: none; margin: 16px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.v2-cta__chips li {
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, .12); border: 1px solid rgba(255, 255, 255, .22);
  font-size: 12.5px; font-weight: 600; color: #fff; line-height: 1.35;
}

/* ==================================================================== *
 * Side-by-side comparison — restored from a flattened list to a table
 * ==================================================================== */
.cs-compare {
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  overflow-x: auto; background: #fff;
}
.cs-compare table { width: 100%; border-collapse: collapse; min-width: 520px; }
.cs-compare th, .cs-compare td {
  padding: 13px 18px; text-align: left; vertical-align: middle;
  font-size: 13.5px; line-height: 1.5; border-bottom: 1px solid var(--line-soft);
}
.cs-compare thead th {
  font-family: var(--font-display); font-size: 12px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: #fff;
  background: var(--c); border-bottom: 0; white-space: nowrap;
}
.cs-compare thead th.is-label { background: color-mix(in srgb, var(--c) 78%, #000); }
.cs-compare td.is-label { font-weight: 700; color: var(--ink); background: #fafbfd; white-space: nowrap; }
.cs-compare tbody tr:last-child td { border-bottom: 0; }
.cs-compare tbody tr:hover td { background: color-mix(in srgb, var(--c) 4%, #fff); }
.cs-compare tbody tr:hover td.is-label { background: color-mix(in srgb, var(--c) 9%, #fff); }
.cs-compare__mark {
  display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%;
}
.cs-compare__mark--yes { background: color-mix(in srgb, #16a34a 15%, transparent); color: #16a34a; }
.cs-compare__mark--no  { background: rgba(15, 30, 60, .07); color: rgba(15, 30, 60, .42); }
.cs-compare__mark svg { width: 12px; height: 12px; }
.cs-compare__sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* A short passage — a designation example, a policy note — as a card */
.cs-note {
  display: flex; gap: 16px; align-items: flex-start;
  max-width: 780px; margin-inline: auto;
  padding: 22px 26px; border-radius: var(--radius);
  background: color-mix(in srgb, var(--c) 6%, #fff);
  border: 1px solid color-mix(in srgb, var(--c) 20%, transparent);
}
.cs-note__icon {
  flex-shrink: 0; display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 12px; background: var(--c); color: #fff;
}
.cs-note__icon svg { width: 20px; height: 20px; }
.cs-note__body { min-width: 0; }
.cs-note__body p { margin: 0 0 8px; font-size: 14px; line-height: 1.7; color: var(--ink-soft); }
.cs-note__body p:last-child { margin-bottom: 0; }
.cs-note__label {
  font-family: var(--font-display); font-size: 11px !important; font-weight: 800;
  letter-spacing: .09em; text-transform: uppercase; color: var(--c) !important;
  margin-bottom: 4px !important;
}
.cs-note__lead {
  font-family: var(--font-display); font-size: 17px !important; font-weight: 700;
  color: var(--ink) !important; margin-bottom: 8px !important;
}

/* ==================================================================== *
 * Applied lab — an objective and the activities that satisfy it
 * ==================================================================== */
.cs-lab {
  border: 1px solid color-mix(in srgb, var(--c) 20%, transparent);
  border-radius: var(--radius); overflow: hidden; background: #fff;
}
.cs-lab__brief {
  display: flex; gap: 15px; align-items: flex-start; padding: 20px 24px;
  background: color-mix(in srgb, var(--c) 7%, #fff);
  border-bottom: 1px solid color-mix(in srgb, var(--c) 16%, transparent);
}
.cs-lab__icon {
  flex-shrink: 0; display: grid; place-items: center; width: 40px; height: 40px;
  border-radius: 12px; background: var(--c); color: #fff;
}
.cs-lab__icon svg { width: 19px; height: 19px; }
.cs-lab__label {
  display: block; margin-bottom: 4px; font-family: var(--font-display);
  font-size: 10.5px; font-weight: 800; letter-spacing: .09em;
  text-transform: uppercase; color: var(--c);
}
.cs-lab__text { margin: 0 0 6px; font-size: 14px; line-height: 1.65; color: var(--ink-soft); }
.cs-lab__text:last-child { margin-bottom: 0; }
.cs-lab__group { padding: 20px 24px; }
.cs-lab__h3 {
  margin: 0 0 12px; font-family: var(--font-display);
  font-size: 13px; font-weight: 800; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink);
}
.cs-lab__list {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 9px 26px;
}
.cs-lab__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.cs-lab__tick {
  flex-shrink: 0; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px;
  border-radius: 50%; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c);
}
.cs-lab__tick svg { width: 11px; height: 11px; }

/* ==================================================================== *
 * Credential introduction — copy beside a picture, alternating sides
 * ==================================================================== */
.cintro { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 46px; align-items: center; }
.cintro--flip .cintro__media { order: -1; }
.cintro__copy { min-width: 0; }
.cintro__p { margin: 0 0 14px; font-size: 14.5px; line-height: 1.75; color: var(--ink-soft); }
.cintro__h3 {
  margin: 24px 0 12px; font-family: var(--font-display);
  font-size: 17px; font-weight: 800; color: var(--ink); letter-spacing: -.01em;
}
.cintro__h3:first-child { margin-top: 0; }

.cintro__chips { list-style: none; margin: 0 0 16px; padding: 0; display: flex; flex-wrap: wrap; gap: 7px; }
.cintro__chips li {
  padding: 6px 13px; border-radius: 999px;
  background: color-mix(in srgb, var(--c) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
  font-size: 12.5px; font-weight: 600; color: var(--ink);
}

.cintro__list {
  list-style: none; margin: 0 0 16px; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 8px 22px;
}
.cintro__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.55; color: var(--ink-soft); }
.cintro__tick {
  flex-shrink: 0; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 1px;
  border-radius: 50%; background: color-mix(in srgb, var(--c) 15%, transparent); color: var(--c);
}
.cintro__tick svg { width: 11px; height: 11px; }

.cintro__media { position: relative; }
.cintro__frame { border-radius: var(--radius); overflow: hidden; box-shadow: 0 18px 44px rgba(15, 30, 60, .14); }
.cintro__frame img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 4 / 3; }
.cintro__tile {
  position: absolute; top: -18px; left: -18px; z-index: 2;
  display: grid; place-items: center; width: 56px; height: 56px; border-radius: 16px;
  background: var(--blue-600); color: #fff; box-shadow: 0 10px 26px rgba(37, 99, 235, .34);
}
.cintro__tile svg { width: 26px; height: 26px; }
.cintro__note {
  position: absolute; right: -14px; bottom: -22px; z-index: 2; max-width: 260px; margin: 0;
  padding: 14px 16px; border-radius: var(--radius-sm); background: #fff;
  box-shadow: 0 12px 30px rgba(15, 30, 60, .16);
  font-size: 12.5px; line-height: 1.55; color: var(--ink-soft);
}
.cintro__note strong { color: var(--ink); }

@media (max-width: 900px) {
  .cintro { grid-template-columns: 1fr; gap: 30px; }
  .cintro--flip .cintro__media { order: 0; }
  .cintro__tile { top: -14px; left: -10px; width: 46px; height: 46px; }
  .cintro__note { position: static; max-width: none; margin-top: 14px; box-shadow: 0 6px 18px rgba(15,30,60,.1); }
}

/* ==================================================================== *
 * Stage flow — a stated sequence, drawn instead of stacked with arrows
 * ==================================================================== */
.cs-stages {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;
}
.cs-stages li {
  position: relative; display: flex; flex-direction: column; gap: 8px;
  align-items: center; text-align: center; padding: 18px 14px;
  border-radius: var(--radius-sm);
  background: color-mix(in srgb, var(--c) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--c) 24%, transparent);
}
.cs-stages li::after {
  content: ''; position: absolute; right: -9px; top: 50%; z-index: 1;
  width: 8px; height: 8px; transform: translateY(-50%) rotate(45deg);
  border-top: 2px solid color-mix(in srgb, var(--c) 55%, transparent);
  border-right: 2px solid color-mix(in srgb, var(--c) 55%, transparent);
}
.cs-stages li:last-child::after { content: none; }
.cs-stages__num {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--c); color: #fff; font-family: var(--font-display);
  font-size: 12px; font-weight: 800;
}
.cs-stages__label {
  font-family: var(--font-display); font-size: 11.5px; font-weight: 800;
  letter-spacing: .05em; text-transform: uppercase; color: var(--ink); line-height: 1.35;
}

/* The comparison table sits centred, with room around it */
.cs-compare { max-width: 1000px; margin-inline: auto; }

/* A read-more fade must match the card it sits on — white over navy looked broken */
.cs-step.is-lit .v2-clamp { --fade: var(--navy-900, #0b1b3d); }
.cs-step.is-lit .v2-more { border-color: rgba(255,255,255,.5); color: #fff; }
.cs-step.is-lit .v2-more:hover { background: #fff; color: var(--navy-900, #0b1b3d); }
.cs-tile.is-lit .v2-clamp { --fade: color-mix(in srgb, var(--c) 8%, #fff); }
/* The relevance list reads as a credential audience, so its ticks take the
   brand blue rather than the section's rotating accent. */
.cs-lab__group .cs-lab__tick { background: rgba(37, 99, 235, .14); color: var(--blue-600); }
.cs-lab__list { grid-template-columns: repeat(auto-fit, minmax(215px, 1fr)); }

/* ==================================================================== *
 * Certification area cards — four per row, badge over a top accent bar
 * ==================================================================== */
.area-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 22px; }

.acard {
  position: relative; display: flex; flex-direction: column; align-items: center;
  text-align: center; padding: 46px 22px 26px; background: #fff;
  border: 1px solid var(--line-soft); border-radius: var(--radius);
  text-decoration: none; overflow: hidden;
  transition: box-shadow .2s, transform .2s, border-color .2s;
}
.acard:hover { box-shadow: 0 16px 38px rgba(15, 30, 60, .12); transform: translateY(-3px); border-color: var(--c); }
.acard__bar { position: absolute; inset: 0 0 auto 0; height: 6px; background: var(--c); }

.acard__badge {
  display: grid; place-items: center; width: 92px; height: 92px; border-radius: 50%;
  background: #f4f6fa; border: 1px solid color-mix(in srgb, var(--c) 35%, transparent);
  color: var(--c); margin-bottom: 20px;
}
.acard__badge svg { width: 40px; height: 40px; }

.acard__name {
  margin: 0 0 10px; font-family: var(--font-display);
  font-size: 18px; font-weight: 700; line-height: 1.28; color: var(--ink);
}
.acard__blurb { margin: 0 0 14px; font-size: 13.5px; line-height: 1.6; color: var(--ink-3, #6b7280); }
.acard__codes {
  margin-bottom: 18px; font-family: var(--font-display);
  font-size: 12px; font-weight: 700; letter-spacing: .04em; color: var(--c);
}
.acard__cta {
  margin-top: auto; display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 22px; border-radius: 999px;
  background: var(--navy-900, #0b1b3d); color: #fff;
  font-size: 13px; font-weight: 700;
  transition: background .18s, gap .18s;
}
.acard:hover .acard__cta { background: var(--c); gap: 12px; }

@media (max-width: 1180px) { .area-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 860px)  { .area-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } }
@media (max-width: 560px)  { .area-grid { grid-template-columns: 1fr; } }

/* A list that arrived inline, separated by bullets */
.cs-chips { list-style: none; margin: 0 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.cs-chips li {
  padding: 7px 15px; border-radius: 999px;
  background: color-mix(in srgb, var(--c) 8%, #fff);
  border: 1px solid color-mix(in srgb, var(--c) 22%, transparent);
  font-size: 12.5px; font-weight: 600; color: var(--ink);
}

/* A run of similar paragraphs, laid out as cards instead of a column of text */
.cs-paragrid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.cs-para {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 18px 20px; border-radius: var(--radius-sm);
  background: #fff; border: 1px solid var(--line-soft);
  border-left: 3px solid var(--c);
}
.cs-para__mark {
  flex-shrink: 0; display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 10px; background: color-mix(in srgb, var(--c) 13%, transparent); color: var(--c);
}
.cs-para__mark svg { width: 16px; height: 16px; }
.cs-para p { margin: 0; font-size: 13.5px; line-height: 1.65; color: var(--ink-soft); }
/* The lead-in that owns the list beneath it */
.cs-listlabel {
  max-width: 780px; margin: 0 auto 14px; text-align: center;
  font-family: var(--font-display); font-size: 13px; font-weight: 700;
  letter-spacing: .02em; color: var(--c);
}
/* Exam facts in the hero, each with its own mark */
.v2-stat { display: flex; gap: 12px; align-items: center; }
.v2-stat__icon {
  flex-shrink: 0; display: grid; place-items: center; width: 38px; height: 38px;
  border-radius: 11px; background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .22); color: #fff;
}
.v2-stat__icon svg { width: 18px; height: 18px; }

/* A sub-block inside a split section's copy column */
.cs-split__block { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.cs-split__h3 {
  margin: 0 0 8px; font-family: var(--font-display);
  font-size: 14px; font-weight: 800; color: var(--c);
}
.cs-split { align-items: start; }

/* --- Banner actions: Read More / Talk to an Advisor ---------------------- */
.hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: clamp(14px, 1.8vw, 22px);
}
.hero__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 20px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: 600 13.5px/1 var(--font-display, inherit);
  letter-spacing: .01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background .16s, border-color .16s, color .16s, transform .16s;
}
.hero__btn svg { width: 13px; height: 13px; fill: currentColor; }
.hero__btn:hover { transform: translateY(-1px); }

.hero__btn--solid {
  background: var(--accent, #1d4ed8);
  border-color: var(--accent, #1d4ed8);
  color: #fff;
}
.hero__btn--solid:hover { filter: brightness(1.08); }

/* Ghost button reads against whichever slide it sits on. */
.hero__btn--ghost {
  border-color: color-mix(in srgb, currentColor 38%, transparent);
  color: inherit;
}
.hero__slide--dark .hero__btn--ghost,
.hero__slide.has-photo .hero__btn--ghost { color: #fff; }
.hero__slide--light:not(.has-photo) .hero__btn--ghost { color: var(--navy-900, #0b1b3d); }
.hero__btn--ghost:hover {
  background: color-mix(in srgb, currentColor 10%, transparent);
  border-color: currentColor;
}
/* On a dark slide a mid-tone accent can fall below contrast — lift it. */
.hero__slide--dark .hero__btn--solid,
.hero__slide.has-photo .hero__btn--solid {
  background: color-mix(in srgb, var(--accent, #1d4ed8) 88%, #fff);
  border-color: transparent;
  color: #06122b;
}
@media (max-width: 640px) {
  .hero__btn { padding: 10px 16px; font-size: 12.5px; }
}

/* White on a mid-tone accent falls under 4.5:1 on the light slides, so the
   solid button darkens its accent there. Measured, not guessed. */
.hero__slide--light:not(.has-photo) .hero__btn--solid {
  background: color-mix(in srgb, var(--accent, #1d4ed8) 62%, #06152f);
  border-color: transparent;
  color: #fff;
}

/* --- splitmedia: stop the copy stranding itself at the top of a tall photo -- */
/* A later rule set align-items:start, which is what left the empty column. */
.cs-split { align-items: center; }
.cs-split__copy { display: flex; flex-direction: column; }

/* Frame the photograph instead of dropping it in bare. */
.cs-split__media {
  position: relative;
  margin: 0;
  border-radius: 18px;
  overflow: visible;
  box-shadow: none;
}
.cs-split__media img {
  position: relative;
  z-index: 1;
  border-radius: 18px;
  aspect-ratio: 4 / 3;
  box-shadow: 0 26px 60px -28px rgba(12, 26, 52, .45);
}
/* Accent panel peeking out behind the picture. */
.cs-split__media::before {
  content: "";
  position: absolute;
  inset: auto -14px -14px auto;
  width: 62%;
  height: 62%;
  border-radius: 18px;
  background: color-mix(in srgb, var(--c) 16%, transparent);
}
.cs-split--flip .cs-split__media::before { inset: auto auto -14px -14px; }
/* Hairline ring so the photo reads as a framed plate. */
.cs-split__media::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  border-radius: 18px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .5),
              inset 0 0 0 2px color-mix(in srgb, var(--c) 22%, transparent);
}
.cs-split__seal {
  position: absolute;
  z-index: 3;
  top: -16px;
  left: -16px;
  display: grid;
  place-items: center;
  width: 58px;
  height: 58px;
  border-radius: 16px;
  background: var(--c);
  box-shadow: 0 12px 28px -10px color-mix(in srgb, var(--c) 70%, transparent);
}
.cs-split--flip .cs-split__seal { left: auto; right: -16px; }
.cs-split__seal svg { width: 26px; height: 26px; fill: #fff; stroke: #fff; }

.cs-split__cta {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 24px;
  padding-top: 22px;
  border-top: 1px solid var(--line-soft, #e6ebf3);
}
.cs-split__btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 22px;
  border-radius: 999px;
  border: 1.5px solid transparent;
  font: 600 13.5px/1 var(--font-display, inherit);
  text-decoration: none;
  transition: background .16s, border-color .16s, transform .16s;
}
.cs-split__btn:hover { transform: translateY(-1px); }
.cs-split__btn svg { width: 13px; height: 13px; fill: currentColor; }
/* Section accents are mid-tone, so darken behind white text for contrast. */
.cs-split__btn--solid {
  background: color-mix(in srgb, var(--c) 64%, #06152f);
  color: #fff;
}
.cs-split__btn--solid:hover { filter: brightness(1.12); }
.cs-split__btn--ghost {
  border-color: color-mix(in srgb, var(--c) 42%, transparent);
  color: color-mix(in srgb, var(--c) 62%, #06152f);
}
.cs-split__btn--ghost:hover {
  background: color-mix(in srgb, var(--c) 8%, transparent);
  border-color: color-mix(in srgb, var(--c) 70%, transparent);
}
@media (max-width: 860px) {
  .cs-split__seal { width: 48px; height: 48px; top: -12px; left: -12px; }
  .cs-split__media::before { display: none; }
}

/* --- Certification hero: make the foreground read over a busy photograph --- */
/* The photo was being brightened 12%, and the scrim faded to .3 alpha exactly
   where the seal and the right-hand stat cards sit. Both are corrected here. */
.cert-hero__bg img {
  filter: saturate(.82) brightness(.62) contrast(.95);
}
.cert-hero__bg::after {
  background:
    /* pool of shade behind the seal */
    radial-gradient(46% 78% at 84% 46%, rgba(4, 15, 38, .82) 0%, rgba(4, 15, 38, .28) 62%, transparent 100%),
    /* readable band under the copy and the stat row */
    linear-gradient(180deg, rgba(5, 18, 44, .30) 0%, rgba(5, 18, 44, .52) 62%, rgba(5, 18, 44, .80) 100%),
    linear-gradient(100deg, rgba(6, 21, 50, .95) 0%, rgba(6, 21, 50, .84) 46%, rgba(6, 21, 50, .58) 100%);
}

/* Stat cards were 10% white over a bright photo — near invisible. */
.v2-stat {
  background: rgba(8, 22, 50, .58);
  border-color: rgba(255, 255, 255, .28);
  backdrop-filter: blur(9px) saturate(1.1);
  -webkit-backdrop-filter: blur(9px) saturate(1.1);
  box-shadow: 0 12px 30px -18px rgba(0, 0, 0, .7);
}
.v2-stat__k { color: rgba(255, 255, 255, .78); }
.v2-stat__icon {
  background: rgba(255, 255, 255, .14);
  border: 1px solid rgba(255, 255, 255, .2);
}

/* The seal was a near-transparent disc sitting on the busiest part of the shot. */
.cert-hero__seal {
  background:
    radial-gradient(circle at 50% 30%, rgba(255, 255, 255, .20), rgba(255, 255, 255, .05) 62%),
    rgba(7, 20, 46, .62);
  border-color: rgba(255, 255, 255, .42);
  backdrop-filter: blur(10px) saturate(1.1);
  -webkit-backdrop-filter: blur(10px) saturate(1.1);
  box-shadow: inset 0 0 40px rgba(255, 255, 255, .10),
              0 22px 55px -26px rgba(0, 0, 0, .8);
}
.cert-hero__seal-level { color: rgba(255, 255, 255, .82); }

/* --- Banner motion --------------------------------------------------------
   heroFade was declared but attached to nothing, so slides only cross-faded.
   This wires it back onto the copy as a stagger and gives the artwork a slow
   drift. Layout, colour and position are untouched — motion only.          */

.hero__slide.is-active .hero__brand,
.hero__slide.is-active .hero__title span,
.hero__slide.is-active .hero__lede,
.hero__slide.is-active .hero__actions,
.hero__slide.is-active .hero__visual {
  animation: heroRise .62s cubic-bezier(.22, .68, .3, 1) both;
}

/* Read in the order the eye travels: mark, headline lines, lede, buttons. */
.hero__slide.is-active .hero__brand          { animation-delay: .04s; }
.hero__slide.is-active .hero__title span:nth-child(1) { animation-delay: .12s; }
.hero__slide.is-active .hero__title span:nth-child(2) { animation-delay: .20s; }
.hero__slide.is-active .hero__title span:nth-child(3) { animation-delay: .28s; }
.hero__slide.is-active .hero__lede           { animation-delay: .34s; }
.hero__slide.is-active .hero__actions        { animation-delay: .42s; }
.hero__slide.is-active .hero__visual         { animation-delay: .16s; animation-duration: .8s; }

@keyframes heroRise {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Once settled, the graphic breathes rather than sitting dead still. */
.hero__slide.is-active .orbit,
.hero__slide.is-active .hcube,
.hero__slide.is-active .hmap,
.hero__slide.is-active .hdomains {
  animation: heroDrift 7s ease-in-out 1s infinite;
}
@keyframes heroDrift {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-7px); }
}

/* The domain chips arrive one after another rather than as a block. */
.hero__slide.is-active .hdomains > li {
  animation: heroRise .5s cubic-bezier(.22, .68, .3, 1) both;
}
.hero__slide.is-active .hdomains > li:nth-child(1) { animation-delay: .26s; }
.hero__slide.is-active .hdomains > li:nth-child(2) { animation-delay: .33s; }
.hero__slide.is-active .hdomains > li:nth-child(3) { animation-delay: .40s; }
.hero__slide.is-active .hdomains > li:nth-child(4) { animation-delay: .47s; }
.hero__slide.is-active .hdomains > li:nth-child(5) { animation-delay: .54s; }

/* Same for the orbit nodes and the learn/certify/advance/lead steps. */
.hero__slide.is-active .hjourney > li {
  animation: heroPop .5s cubic-bezier(.2, .8, .3, 1.05) both;
}
/* An orbit node is centred on its point with translate(-50%,-50%). A keyframe
   ending in `transform: none` wipes that and shunts every node down-right by
   half its size, so the centring has to be carried through the animation. */
.hero__slide.is-active .orbit__node {
  animation: heroPopCentred .5s cubic-bezier(.2, .8, .3, 1.05) both;
}
@keyframes heroPopCentred {
  from { opacity: 0; transform: translate(-50%, -50%) scale(.86); }
  to   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
/* .orbit holds the svg and the core first, so the nodes are children 3-7. */
.hero__slide.is-active .orbit__node:nth-child(3),
.hero__slide.is-active .hjourney > li:nth-child(1) { animation-delay: .30s; }
.hero__slide.is-active .orbit__node:nth-child(4),
.hero__slide.is-active .hjourney > li:nth-child(2) { animation-delay: .38s; }
.hero__slide.is-active .orbit__node:nth-child(5),
.hero__slide.is-active .hjourney > li:nth-child(3) { animation-delay: .46s; }
.hero__slide.is-active .orbit__node:nth-child(6),
.hero__slide.is-active .hjourney > li:nth-child(4) { animation-delay: .54s; }
.hero__slide.is-active .orbit__node:nth-child(7) { animation-delay: .62s; }
@keyframes heroPop {
  from { opacity: 0; transform: scale(.86); }
  to   { opacity: 1; transform: none; }
}

/* Slow push on a photographic slide so the picture is not a flat plate. */
.hero__slide.is-active .hero__bg img {
  animation: heroPan 18s ease-out both;
}
@keyframes heroPan {
  from { transform: scale(1.06); }
  to   { transform: scale(1); }
}

@media (prefers-reduced-motion: reduce) {
  .hero__slide.is-active .hero__brand,
  .hero__slide.is-active .hero__title span,
  .hero__slide.is-active .hero__lede,
  .hero__slide.is-active .hero__actions,
  .hero__slide.is-active .hero__visual,
  .hero__slide.is-active .hdomains,
  .hero__slide.is-active .hdomains > li,
  .hero__slide.is-active .orbit,
  .hero__slide.is-active .orbit__node,
  .hero__slide.is-active .hjourney > li,
  .hero__slide.is-active .hcube,
  .hero__slide.is-active .hmap,
  .hero__slide.is-active .hero__bg img {
    animation: none !important;
  }
}

/* --- Light slides had almost no tone -------------------------------------
   The gradients started at #ffffff / #f7fbff, so thin outline artwork and pale
   icons had nothing to sit against. Tone is mixed from each slide's own accent
   so every banner keeps its own colour identity, just with something to read
   against. Text colours are unchanged; contrast is verified below.        */
.hero__slide--light:not(.has-photo) {
  background:
    /* pool of accent behind the artwork column */
    radial-gradient(56% 94% at 76% 48%,
      color-mix(in srgb, var(--accent) 20%, transparent) 0%,
      color-mix(in srgb, var(--accent) 6%, transparent) 55%,
      transparent 74%),
    linear-gradient(105deg,
      color-mix(in srgb, var(--accent)  5%, #f2f7fc)   0%,
      color-mix(in srgb, var(--accent) 11%, #eaf1f9)  55%,
      color-mix(in srgb, var(--accent) 18%, #e2ecf6) 100%);
}

/* The backdrop patterns were tuned for a white field and washed out. */
.hero__slide--light:not(.has-photo) .hero__art--network .hart   { color: rgba(29, 78, 216, .40); }
.hero__slide--light:not(.has-photo) .hero__art--geometric .hart { color: rgba(109, 40, 217, .32); }
.hero__slide--light:not(.has-photo) .hero__art--wave .hart      { opacity: .85; }

/* Give the outline shapes a white plate so they read against the new tone. */
.hero__slide--light:not(.has-photo) .hdomains__icon,
.hero__slide--light:not(.has-photo) .orbit__node-dot {
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 16px -8px rgba(15, 30, 60, .45);
}
.hero__slide--light:not(.has-photo) .orbit__core {
  background: rgba(255, 255, 255, .95);
  box-shadow: 0 12px 30px -14px rgba(15, 30, 60, .5);
}
/* Rings were near-invisible on white and stay that way on a light tint. */
.hero__slide--light:not(.has-photo) .orbit__ring { stroke: rgba(29, 78, 216, .26); }
.hero__slide--light:not(.has-photo) .orbit__ring--dash { stroke: rgba(29, 78, 216, .40); }
/* Dotted world map on banner 7. */
.hero__slide--light:not(.has-photo) .hmap__dots { color: rgba(29, 78, 216, .38); }

/* --- Orbit graphic ---------------------------------------------------------
   Two faults: the node box was centred on its point with the dot at the top,
   so the dots never sat on the ring (measured gaps 55-100 degrees instead of
   72), and a 118px label box centred on a side node ran into the shield.
   The node is now the dot alone, so it lands exactly on the circle, and the
   label hangs beneath it, nudged inward on the two side nodes.            */
.hero__visual--orbit .orbit { max-width: 360px; overflow: visible; }

.hero__visual--orbit .orbit__node {
  width: 50px;
  height: 50px;
  text-align: center;
}
.hero__visual--orbit .orbit__node-dot { margin: 0; }
.hero__visual--orbit .orbit__node-label {
  position: absolute;
  top: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  width: 112px;
  font-size: 9px;
  letter-spacing: .06em;
  line-height: 1.32;
  text-wrap: balance;
}
/* Children are svg, core, then AI, Cybersecurity, Data, Cloud, Governance. */
.hero__visual--orbit .orbit__node:nth-child(4) .orbit__node-label { transform: translateX(-32%); }
.hero__visual--orbit .orbit__node:nth-child(5) .orbit__node-label { transform: translateX(-68%); }

.hero__visual--orbit .orbit__core {
  width: 30%;
  box-shadow: 0 0 26px rgba(47, 140, 240, .26), inset 0 0 24px rgba(47, 140, 240, .16);
}

/* --- Certifications mega menu: code + full credential name ----------------
   The client's artwork lists every credential as CODE then its full title, in
   four columns, each closing with an explore link. Replaces the old code-plus-
   level-pill row.                                                          */
.mega__col { display: flex; flex-direction: column; min-width: 0; }

.mega__group {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}
.mega__group-icon {
  display: grid;
  place-items: center;
  width: 42px;
  height: 42px;
  flex: none;
  border-radius: 12px;
  background: color-mix(in srgb, var(--c) 12%, #fff);
  color: var(--c);
}
.mega__group-icon svg { width: 21px; height: 21px; fill: currentColor; }
.mega__group-name {
  margin: 0;
  font: 800 12.5px/1.25 var(--font-display, inherit);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--c);
}

.mega__area { margin-bottom: 14px; }
.mega__area-name {
  display: block;
  padding-bottom: 6px;
  margin-bottom: 8px;
  border-bottom: 1px solid var(--line-soft, #e6ebf3);
  font: 700 13px/1.3 var(--font-display, inherit);
  color: var(--navy-900, #0b1b3d);
}

.mega__certs { margin: 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.mega__certs a {
  display: grid;
  grid-template-columns: 58px minmax(0, 1fr);
  align-items: start;
  gap: 8px;
  padding: 3px 6px 3px 0;
  border-radius: 6px;
  text-decoration: none;
  transition: background .14s;
}
.mega__certs a:hover { background: color-mix(in srgb, var(--c) 8%, transparent); }
.mega__code {
  font: 700 11.5px/1.45 var(--font-display, inherit);
  color: var(--c);
  white-space: nowrap;
}
.mega__code sup { font-size: .62em; top: -.5em; }
.mega__name {
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--ink-soft, #4a5568);
}
.mega__certs a:hover .mega__name { color: var(--navy-900, #0b1b3d); }

.mega__explore {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: auto;
  padding-top: 14px;
  font: 700 12px/1.35 var(--font-display, inherit);
  color: var(--c);
  text-decoration: none;
}
.mega__explore svg { width: 12px; height: 12px; fill: currentColor; flex: none; }
.mega__explore:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 1180px) {
  .mega__certs a { grid-template-columns: 52px minmax(0, 1fr); gap: 6px; }
  .mega__code, .mega__name { font-size: 11px; }
}

/* --- Mega menu: one credential per line -----------------------------------
   The client's artwork keeps each full title on a single line. Sizes here are
   measured to fit the longest title ("Certified International Cybersecurity
   Professional") in the narrowest column, not guessed.                     */
.mpanel__cols { gap: 22px; }

.mega__certs a {
  grid-template-columns: 46px minmax(0, 1fr);
  gap: 6px;
  align-items: baseline;
  padding: 2px 4px 2px 0;
}
.mega__code {
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: -.005em;
}
.mega__name {
  font-size: 9.5px;
  line-height: 1.5;
  letter-spacing: -.012em;
  white-space: nowrap;
}

/* Client's scale: column heading 16px SemiBold, area 14px, labels 12px. */
.mega__group-name { font-size: 13px; font-weight: 700; letter-spacing: .02em; }
.mega__area-name  { font-size: 12.5px; font-weight: 700; letter-spacing: -.005em; }
.mega__explore    { font-size: 11px; letter-spacing: -.005em; }
.mega__group-icon { width: 36px; height: 36px; border-radius: 10px; }
.mega__group-icon svg { width: 18px; height: 18px; }
.mega__area { margin-bottom: 11px; }
.mega__certs { gap: 3px; }

/* Reclaim horizontal room for the credential names before shrinking type:
   a narrower rail, tighter gutters, and a slimmer code column. */
.mpanel__body--rail { grid-template-columns: 186px minmax(0, 1fr); }
.mpanel__body { padding: 18px 18px 16px; }
.mpanel__rail { padding-right: 14px; margin-right: 14px; }
.mpanel__cols { gap: 16px; }

.mega__certs a { grid-template-columns: 42px minmax(0, 1fr); gap: 5px; padding-right: 2px; }
.mega__code { font-size: 9px; letter-spacing: -.01em; }
.mega__name { font-size: 9px; letter-spacing: -.018em; }

/* The longest title filled its box exactly, leaving no tolerance. Trim the
   code column for headroom, and ellipsize rather than spill if a future
   credential name is longer still. */
.mega__certs a { grid-template-columns: 38px minmax(0, 1fr); gap: 4px; }
.mega__name { overflow: hidden; text-overflow: ellipsis; }

/* ===========================================================================
   Certification page — the client's premium dark treatment.
   Gold accents on deep navy, an award seal, a trust bar and an At-a-Glance
   card. Content is unchanged; this is presentation only.
   ======================================================================== */
:root { --gold: #e0a92e; --gold-soft: #f0c257;
        /* Fixed brand amber. `--gold` is re-pointed to each credential's
           accent colour on .cpage, so anything that must stay gold on every
           certification page uses this instead. */
        --brand-gold: #e0a92e; --brand-gold-soft: #f0c257; }

.cert-hero__code {
  display: block;
  margin-bottom: 6px;
  font: 800 clamp(24px, 3vw, 34px)/1 var(--font-display, inherit);
  letter-spacing: -.01em;
  color: var(--gold);
}
.cert-hero__code sup { font-size: .4em; top: -.85em; }
.cert-hero__title {
  font-size: clamp(28px, 3.6vw, 42px);
  font-weight: 800;
  line-height: 1.14;
  letter-spacing: -.015em;
}
.cert-hero__tagline { margin-top: 14px; color: var(--gold-soft); font-weight: 700; font-size: 17px; line-height: 1.45; }
.cert-hero__tagline span { display: block; }
.cert-hero__summary { margin-top: 16px; max-width: 620px; font-size: 14.5px; line-height: 1.7; }

/* Buttons: one gold primary, one outline, then a quieter secondary row. */
.cert-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.cert-hero__actions--secondary { margin-top: 12px; }
.cbtn {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 13px 22px; border-radius: 8px; border: 1.5px solid transparent;
  font: 700 13.5px/1 var(--font-display, inherit);
  text-decoration: none; white-space: nowrap;
  transition: background .16s, border-color .16s, transform .16s, color .16s;
}
.cbtn:hover { transform: translateY(-1px); }
.cbtn svg { width: 13px; height: 13px; fill: currentColor; flex: none; }
.cbtn sup { font-size: .62em; top: -.5em; }
.cbtn--gold { background: var(--gold); color: #16204a; }
.cbtn--gold:hover { background: var(--gold-soft); }
.cbtn--outline { border-color: rgba(255,255,255,.4); color: #fff; }
.cbtn--outline:hover { border-color: #fff; background: rgba(255,255,255,.08); }
.cbtn--line {
  padding: 11px 18px; font-size: 12.5px;
  border-color: rgba(255,255,255,.22); color: rgba(255,255,255,.9);
}
.cbtn--line:hover { border-color: var(--gold); color: var(--gold-soft); }

/* ---- Award seal ---- */
.cseal { position: relative; width: 100%; max-width: 270px; margin-inline: auto; aspect-ratio: 220 / 240; }
.cseal__laurel { position: absolute; inset: 0; width: 100%; height: 100%; }
.cseal__frame { fill: rgba(8, 22, 52, .72); stroke: var(--gold); stroke-width: 3; }
.cseal__stem { fill: none; stroke: var(--gold); stroke-width: 2.4; stroke-linecap: round; opacity: .9; }
.cseal__leaf { fill: var(--gold); opacity: .92; }
.cseal__body {
  position: absolute; inset: 14% 22% 12%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; text-align: center;
}
.cseal__code { font: 800 clamp(20px, 2.4vw, 27px)/1 var(--font-display, inherit); color: #fff; }
.cseal__code sup { font-size: .4em; top: -.85em; }
.cseal__rule { width: 46px; height: 2px; background: var(--gold); }
.cseal__certified {
  font: 700 10px/1 var(--font-display, inherit);
  letter-spacing: .18em; text-transform: uppercase; color: var(--gold);
}
.cseal__name {
  font: 700 9.5px/1.4 var(--font-display, inherit);
  letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.9);
}
.cseal__stars { display: flex; gap: 3px; margin-top: 2px; }
.cseal__stars svg { width: 12px; height: 12px; fill: var(--gold); }

/* ---- Trust bar ---- */
.ctrust { background: #fff; border-bottom: 1px solid var(--line-soft, #e6ebf3); }
.ctrust__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 26px; padding-block: 26px;
}
.ctrust__item { display: flex; gap: 13px; align-items: flex-start; }
.ctrust__icon {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none;
  border-radius: 11px; background: color-mix(in srgb, var(--navy-900, #0b1b3d) 7%, #fff);
  color: var(--navy-900, #0b1b3d);
}
.ctrust__icon svg { width: 20px; height: 20px; fill: currentColor; }
.ctrust__title { display: block; font: 700 13px/1.3 var(--font-display, inherit); color: var(--navy-900, #0b1b3d); }
.ctrust__desc { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--ink-soft, #4a5568); }

/* ---- Overview + At a Glance ---- */
.cglance { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .84fr); gap: 34px; align-items: start; }
.cglance__lede { margin-top: 14px; font-size: 14.5px; line-height: 1.75; color: var(--ink-soft, #4a5568); }
.cglance__label { margin-top: 18px; font-weight: 700; font-size: 14px; color: var(--navy-900, #0b1b3d); }
.cglance__list { margin: 12px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.cglance__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 14px; line-height: 1.6; color: var(--ink-soft, #4a5568); }
.cglance__tick {
  display: grid; place-items: center; width: 19px; height: 19px; flex: none; margin-top: 1px;
  border-radius: 50%; background: var(--gold); color: #fff;
}
.cglance__tick svg { width: 11px; height: 11px; fill: currentColor; }

.cglance__card {
  padding: 26px 28px; border-radius: 16px;
  background: #fff; border: 1px solid var(--line, #e3e8ef);
  box-shadow: 0 20px 50px -34px rgba(12, 26, 52, .4);
}
.cglance__card-title {
  margin: 0 0 4px; font: 800 20px/1.2 var(--font-display, inherit);
  color: var(--navy-900, #0b1b3d);
}
.cglance__card-title::after {
  content: ""; display: block; width: 42px; height: 3px; margin-top: 9px;
  border-radius: 2px; background: var(--gold);
}
.cglance__facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 18px; margin-top: 20px; }
.cglance__fact { display: flex; gap: 11px; align-items: flex-start; }
.cglance__fact-icon {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 9px; background: color-mix(in srgb, var(--gold) 15%, #fff); color: #8a6410;
}
.cglance__fact-icon svg { width: 17px; height: 17px; fill: currentColor; }
.cglance__fact-k { display: block; font: 700 11.5px/1.3 var(--font-display, inherit); color: var(--navy-900, #0b1b3d); }
.cglance__fact-v { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--ink-soft, #4a5568); }

@media (max-width: 1000px) {
  .ctrust__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cglance { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .ctrust__grid { grid-template-columns: 1fr; gap: 18px; }
  .cglance__facts { grid-template-columns: 1fr; }
  .cbtn { width: 100%; justify-content: center; }
}

/* ---- Sticky section tabs ---- */
.ctabs {
  position: sticky; top: 0; z-index: 30;
  background: #fff; border-bottom: 1px solid var(--line, #e3e8ef);
  box-shadow: 0 6px 18px -16px rgba(12, 26, 52, .5);
}
.ctabs__list {
  display: flex; gap: 4px; margin: 0; padding: 0; list-style: none;
  overflow-x: auto; scrollbar-width: none;
}
.ctabs__list::-webkit-scrollbar { display: none; }
.ctabs__list a {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 15px 16px; white-space: nowrap; text-decoration: none;
  font: 600 13px/1 var(--font-display, inherit);
  color: var(--ink-soft, #4a5568);
  border-bottom: 2px solid transparent;
  transition: color .15s, border-color .15s;
}
.ctabs__list a:hover { color: var(--navy-900, #0b1b3d); }
.ctabs__list a.is-current { color: var(--navy-900, #0b1b3d); border-bottom-color: var(--gold); }

/* ---- What You Will Learn ---- */
.clearn {
  padding: 30px clamp(20px, 3vw, 34px) 34px;
  border: 1px solid var(--line, #e3e8ef); border-radius: 16px; background: #fff;
}
.clearn__title { margin: 0; text-align: center; font: 800 26px/1.2 var(--font-display, inherit); color: var(--navy-900, #0b1b3d); }
.clearn__lede { margin: 8px 0 24px; text-align: center; font-size: 13.5px; color: var(--ink-soft, #4a5568); }
.clearn__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.clearn__card {
  display: flex; gap: 11px; align-items: flex-start;
  padding: 15px 15px 16px; border: 1px solid var(--line, #e3e8ef); border-radius: 12px;
  background: #fff; transition: border-color .16s, box-shadow .16s, transform .16s;
}
.clearn__card:hover {
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 14px 30px -22px rgba(12, 26, 52, .5);
  transform: translateY(-2px);
}
.clearn__icon {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 9px; background: color-mix(in srgb, var(--navy-900, #0b1b3d) 6%, #fff);
  color: var(--navy-700, #16346b);
}
.clearn__icon svg { width: 17px; height: 17px; fill: currentColor; }
.clearn__card-title { margin: 0 0 5px; font: 700 12.5px/1.35 var(--font-display, inherit); color: var(--navy-700, #16346b); }
.clearn__card-text { margin: 0; font-size: 13.34px; line-height: 1.55; color: var(--ink-soft, #4a5568); }

/* ---- Skills band ---- */
.cskills { padding-block: 30px 34px; background: color-mix(in srgb, var(--navy-900, #0b1b3d) 5%, #f5f8fd); }
.cskills__title { margin: 0 0 22px; text-align: center; font: 800 24px/1.2 var(--font-display, inherit); color: var(--navy-900, #0b1b3d); }
.cskills__grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 10px; }
.cskills__item { display: flex; flex-direction: column; align-items: center; gap: 8px; text-align: center; padding: 4px; }
.cskills__icon {
  display: grid; place-items: center; width: 42px; height: 42px;
  border-radius: 50%; background: #fff; color: var(--navy-700, #16346b);
  box-shadow: 0 6px 16px -10px rgba(12, 26, 52, .5);
}
.cskills__icon svg { width: 20px; height: 20px; fill: currentColor; }
.cskills__label { font: 600 11px/1.35 var(--font-display, inherit); color: var(--navy-900, #0b1b3d); }

/* ---- Why earn + career ---- */
.cwhy { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1fr); gap: 22px; align-items: start; }
.cwhy--single { grid-template-columns: minmax(0, 1fr); }
.cwhy__card {
  padding: 28px 30px 30px; border-radius: 16px;
  background: linear-gradient(150deg, #0d2350 0%, #123069 100%);
  color: #fff;
}
.cwhy__title { margin: 0 0 18px; font: 800 21px/1.25 var(--font-display, inherit); color: #fff; }
.cwhy__list { margin: 0 0 22px; padding: 0; list-style: none; display: grid; gap: 11px; }
.cwhy__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; line-height: 1.55; color: rgba(255,255,255,.9); }
.cwhy__tick {
  display: grid; place-items: center; width: 18px; height: 18px; flex: none; margin-top: 1px;
  border-radius: 50%; background: var(--gold); color: #16204a;
}
.cwhy__tick svg { width: 10px; height: 10px; fill: currentColor; }

.ccareer {
  padding: 28px 30px 30px; border-radius: 16px;
  background: #fff; border: 1px solid var(--line, #e3e8ef);
  box-shadow: 0 20px 50px -36px rgba(12, 26, 52, .4);
}
.ccareer__title { margin: 0 0 18px; font: 800 21px/1.25 var(--font-display, inherit); color: var(--navy-900, #0b1b3d); }
.ccareer__list {
  margin: 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px;
}
.ccareer__list li { display: flex; gap: 9px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: var(--ink-soft, #4a5568); }
.ccareer__mark {
  display: grid; place-items: center; width: 17px; height: 17px; flex: none; margin-top: 1px;
  border-radius: 50%; background: color-mix(in srgb, var(--gold) 20%, #fff); color: #8a6410;
}
.ccareer__mark svg { width: 9px; height: 9px; fill: currentColor; }

/* ---- Closing board stats ---- */
.cboard { border-top: 1px solid var(--line, #e3e8ef); background: #fff; }
.cboard__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 18px; padding-block: 24px; }
.cboard__item { display: flex; gap: 11px; align-items: center; }
.cboard__icon { display: grid; place-items: center; width: 34px; height: 34px; flex: none; color: var(--gold); }
.cboard__icon svg { width: 22px; height: 22px; fill: currentColor; }
.cboard__v { display: block; font: 800 17px/1.15 var(--font-display, inherit); color: var(--navy-900, #0b1b3d); }
.cboard__k { display: block; margin-top: 2px; font-size: 11.5px; color: var(--ink-soft, #4a5568); }

@media (max-width: 1100px) {
  .clearn__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cskills__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .cwhy { grid-template-columns: 1fr; }
  .cboard__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .clearn__grid { grid-template-columns: 1fr; }
  .cskills__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ccareer__list { grid-template-columns: 1fr; }
  .cboard__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* Lead-ins and caveats that travel with the promoted sections. */
.cskills__lede { margin: -12px 0 20px; text-align: center; font-size: 13px; color: var(--ink-soft, #4a5568); }
.ccareer__lede { margin: -8px 0 16px; font-size: 13px; line-height: 1.6; color: var(--ink-soft, #4a5568); }
.ccareer__note {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft, #e6ebf3);
  font-size: 11.5px; line-height: 1.6; color: var(--ink-muted, #6b7688);
}
.cwhy__text { margin: 0 0 12px; font-size: 13px; line-height: 1.6; color: rgba(255,255,255,.82); }

/* --- Type sizes for the new certification sections ------------------------
   Sized to the client's guide: body 14px, small text 12px, column heading
   16px, section heading 18px+. The first pass ran 11-12px, too small.     */
.ctabs__list a { font-size: 13.5px; padding: 16px 18px; }

.cert-hero__summary { font-size: 15.5px; }
.cbtn { font-size: 14px; padding: 14px 24px; }
.cbtn--line { font-size: 13px; padding: 12px 20px; }

.ctrust__title { font-size: 14.5px; }
.ctrust__desc { font-size: 12.5px; }
.ctrust__icon { width: 44px; height: 44px; }
.ctrust__icon svg { width: 22px; height: 22px; }

.cglance__lede { font-size: 15.5px; }
.cglance__label { font-size: 15px; }
.cglance__list li { font-size: 14.5px; }
.cglance__card-title { font-size: 22px; }
.cglance__fact-k { font-size: 12.5px; }
.cglance__fact-v { font-size: 13.5px; }
.cglance__fact-icon { width: 38px; height: 38px; }
.cglance__fact-icon svg { width: 19px; height: 19px; }

.clearn__title { font-size: 28px; }
.clearn__lede { font-size: 14.5px; }
.clearn__card { padding: 17px 17px 18px; gap: 13px; }
.clearn__card-title { font-size: 14px; }
.clearn__card-text { font-size: 14.5px; line-height: 1.6; }
.clearn__icon { width: 38px; height: 38px; }
.clearn__icon svg { width: 19px; height: 19px; }

.cskills__title { font-size: 26px; }
.cskills__lede { font-size: 14px; }
.cskills__label { font-size: 12.5px; }
.cskills__icon { width: 48px; height: 48px; }
.cskills__icon svg { width: 22px; height: 22px; }

.cwhy__title, .ccareer__title { font-size: 23px; }
.cwhy__text { font-size: 14px; }
.cwhy__list li { font-size: 14px; }
.ccareer__lede { font-size: 14px; }
.ccareer__list li { font-size: 14px; }
.ccareer__note { font-size: 12.5px; }

.cboard__v { font-size: 19px; }
.cboard__k { font-size: 12.5px; }
.cboard__icon { width: 38px; height: 38px; }
.cboard__icon svg { width: 24px; height: 24px; }

/* Four cards a row at 14px needs a little more breathing room. */
@media (min-width: 1101px) {
  .clearn__grid { gap: 16px; }
}

.clearn__card-list {
  margin: 8px 0 0; padding: 0 0 0 15px;
  display: grid; gap: 4px;
  font-size: 13.92px; line-height: 1.5; color: var(--ink-soft, #4a5568);
}
.clearn__card-list li::marker { color: var(--gold); }
.clearn__card-text + .clearn__card-text { margin-top: 7px; }

/* --- +8% on the new certification sections, with line height re-set --------
   Ratios are unitless so they scale, but larger text wants slightly tighter
   leading on headings and slightly looser on body copy.                    */
.ctabs__list a        { font-size: 14.5px; }
.cert-hero__summary   { font-size: 16.5px; line-height: 1.68; }
.cbtn                 { font-size: 15px; padding: 15px 26px; }
.cbtn--line           { font-size: 14px; padding: 13px 21px; }

.ctrust__title        { font-size: 15.5px; line-height: 1.3; }
.ctrust__desc         { font-size: 13.5px; line-height: 1.5; }

.cglance__lede        { font-size: 16.5px; line-height: 1.72; }
.cglance__label       { font-size: 16px; }
.cglance__list li     { font-size: 15.5px; line-height: 1.62; }
.cglance__card-title  { font-size: 24px; line-height: 1.2; }
.cglance__fact-k      { font-size: 13.5px; line-height: 1.3; }
.cglance__fact-v      { font-size: 14.5px; line-height: 1.5; }

.clearn__title        { font-size: 30px; line-height: 1.18; }
.clearn__lede         { font-size: 15.5px; line-height: 1.6; }
.clearn__card-title   { font-size: 15px; line-height: 1.32; }
.clearn__card-text    { font-size: 13.5px; line-height: 1.62; }
.clearn__card-list    { font-size: 14.56px; line-height: 1.55; }

.cskills__title       { font-size: 28px; line-height: 1.18; }
.cskills__lede        { font-size: 15px; line-height: 1.6; }
.cskills__label       { font-size: 13.5px; line-height: 1.38; }

.cwhy__title,
.ccareer__title       { font-size: 25px; line-height: 1.2; }
.cwhy__text           { font-size: 15px; line-height: 1.62; }
.cwhy__list li        { font-size: 15px; line-height: 1.58; }
.ccareer__lede        { font-size: 15px; line-height: 1.62; }
.ccareer__list li     { font-size: 15px; line-height: 1.52; }
.ccareer__note        { font-size: 13.5px; line-height: 1.62; }

.cboard__v            { font-size: 20.5px; line-height: 1.15; }
.cboard__k            { font-size: 13.5px; line-height: 1.4; }

/* ===========================================================================
   The sections below the fold, brought onto the same system.
   The page previously ran a six-colour accent rotation; the client's design
   is navy with a single gold accent, so the palette is unified here rather
   than by editing every renderer.
   ======================================================================== */
.v2 .v2-sec { --c: var(--gold); --c1: var(--gold); --c2: var(--gold); --c3: var(--gold);
              --c4: var(--gold); --c5: var(--gold); --c6: var(--gold); }

/* Headings pick up the gold rule used on "At a Glance". */
.v2 .v2-h2 {
  font-size: 27px;
  line-height: 1.22;
  color: var(--navy-900, #0b1b3d);
}
.v2 .v2-h2 em { font-style: normal; color: var(--navy-700, #16346b); }
.v2 .v2-head { position: relative; }
.v2 .v2-head .v2-h2::after {
  content: ""; display: block; width: 46px; height: 3px;
  margin: 11px 0 0; border-radius: 2px; background: var(--gold);
}
.v2 .v2-head--left .v2-h2::after { margin-inline: 0; }
.v2 .v2-eyebrow {
  color: #8a6410;
  background: color-mix(in srgb, var(--gold) 14%, #fff);
  border-color: color-mix(in srgb, var(--gold) 30%, transparent);
}
.v2 .v2-lede { font-size: 15.5px; line-height: 1.72; }

/* Cards and tiles: white plate, hairline border, gold on hover. */
.v2 .cs-tile, .v2 .cs-feature, .v2 .v2-tint, .v2 .cs-para,
.v2 .cs-fact, .v2 .cs-lab, .v2 .v2-module {
  border-radius: 13px;
  border: 1px solid var(--line, #e3e8ef);
  background: #fff;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.v2 .cs-tile:hover, .v2 .cs-feature:hover, .v2 .v2-tint:hover, .v2 .v2-module:hover {
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
  box-shadow: 0 14px 32px -24px rgba(12, 26, 52, .55);
  transform: translateY(-2px);
}
.v2 .cs-tile__icon, .v2 .cs-feature__icon, .v2 .v2-tint__icon,
.v2 .cs-para__mark, .v2 .cs-ribbon__icon, .v2 .cs-bar__icon {
  background: color-mix(in srgb, var(--gold) 15%, #fff);
  color: #8a6410;
}
.v2 .cs-tile__title, .v2 .cs-feature__title, .v2 .v2-tint__title { color: var(--navy-900, #0b1b3d); font-size: 15.5px; }
.v2 .cs-tile__text, .v2 .cs-feature__text, .v2 .v2-tint__text,
.v2 .cs-split__text, .v2 .cs-step__text, .v2 .cs-ribbon__text, .v2 .v2-module__text,
.v2 .cintro__p { font-size: 14.5px; line-height: 1.7; }

/* Ticks, marks and numerals all go gold. */
.v2 .cs-checks__mark, .v2 .v2-checks__mark, .v2 .cintro__tick {
  background: var(--gold);
  color: #16204a;
}
.v2 .cs-checks li, .v2 .v2-checks li { font-size: 14.5px; line-height: 1.6; }
.v2 .cs-ribbon__num, .v2 .cs-step__num, .v2 .cs-stages__num { color: color-mix(in srgb, var(--gold) 78%, #6b4c0c); }
.v2 .cs-pills li { font-size: 13.5px; }
.v2 .cs-pills__icon { color: #8a6410; }

/* Closing call to action: the dark band from the client's design. */
.v2 .v2-cta {
  background: linear-gradient(150deg, #0d2350 0%, #123069 100%);
  border-radius: 18px;
}
.v2 .v2-cta__title { font-size: 28px; line-height: 1.22; }
.v2 .v2-cta__text { font-size: 15.5px; line-height: 1.7; }
.v2 .btn--gold { background: var(--gold); color: #16204a; border-color: var(--gold); }
.v2 .btn--gold:hover { background: var(--gold-soft); }

/* FAQ: bordered rows with a gold marker. */
.v2 .faq__item {
  border: 1px solid var(--line, #e3e8ef);
  border-radius: 12px;
  background: #fff;
  margin-bottom: 9px;
}
.v2 .faq__q { font-size: 15.5px; line-height: 1.45; padding: 16px 18px; color: var(--navy-900, #0b1b3d); }
.v2 .faq__a { font-size: 14.5px; line-height: 1.72; padding: 0 18px 16px; }
.v2 .faq__icon { color: #8a6410; }
.v2 .faq__item[open] { border-color: color-mix(in srgb, var(--gold) 50%, transparent); }

/* ===========================================================================
   Homepage and catalogue on the same system as the certification page.
   Section headings ran 24 / 30 / 34px with no shared rule and card copy sat
   at 13.5px against the client's 14px guide. The ten hero banners keep their
   own approved colours and are deliberately excluded.
   ======================================================================== */

/* ---- One heading treatment across every section ---- */
.section-title,
.finder__title,
.arch-center__title,
.insights__head-title {
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -.015em;
  color: var(--navy-900, #0b1b3d);
}
.section-title--lg { font-size: 33px; }

.section-head .section-title::after,
.section-head--center .section-title::after,
.finder__title::after,
.arch-center__title::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin: 12px 0 0;
  border-radius: 2px;
  background: var(--gold);
}
.section-head--center .section-title::after,
.finder__title::after,
.arch-center__title::after { margin-inline: auto; }

.section-lede { font-size: 15.5px; line-height: 1.72; color: var(--ink-soft, #4a5568); }
.section-eyebrow, .sec__eyebrow {
  color: #8a6410;
  background: color-mix(in srgb, var(--gold) 14%, #fff);
  border-color: color-mix(in srgb, var(--gold) 30%, transparent);
}

/* ---- Quick actions ---- */
.quick__label, .quick__item > span:not(.quick__icon):first-of-type { font-size: 14.5px; }
.quick__text { font-size: 14px; line-height: 1.62; }

/* ---- Technology area cards ---- */
.acard__name  { font-size: 18px; line-height: 1.28; }
.acard__blurb { font-size: 14.5px; line-height: 1.66; }
.acard { transition: border-color .16s, box-shadow .16s, transform .16s; }
.acard:hover {
  border-color: color-mix(in srgb, var(--gold) 50%, transparent);
  box-shadow: 0 16px 36px -26px rgba(12, 26, 52, .5);
  transform: translateY(-2px);
}

/* ---- Career architecture band ---- */
.arch-center__lead { font-size: 15px; line-height: 1.68; }

/* ---- Certification cards: one gold system, not eight rotating colours ---- */
.cert-card { transition: border-color .16s, box-shadow .16s, transform .16s; }
.cert-card:hover {
  border-color: color-mix(in srgb, var(--gold) 50%, transparent);
  box-shadow: 0 18px 40px -28px rgba(12, 26, 52, .5);
  transform: translateY(-2px);
}
.cert-card__code    { font-size: 20px; color: var(--navy-700, #16346b); }
.cert-card__name    { font-size: 15px; line-height: 1.45; color: var(--navy-900, #0b1b3d); }
.cert-card__tagline { font-size: 13.5px; line-height: 1.62; color: var(--ink-soft, #4a5568); }
/* Badge colour is left alone on purpose: it encodes the technology area,
   which is a real cue for a 28-card grid. Only type and hover unify. */
.cert-card .link-cta { color: #8a6410; font-size: 13.5px; }
.cert-card .link-cta:hover { color: var(--navy-900, #0b1b3d); }

/* ---- Insights ---- */
.insights__title { font-size: 18px; line-height: 1.3; }
.insights__text  { font-size: 14.5px; line-height: 1.66; }

/* ---- Stats band ---- */
.stats__value, .stats__v { font-size: 30px; line-height: 1.14; }
.stats__label, .stats__k { font-size: 13.5px; line-height: 1.45; }

/* ---- Footer to the guide's small-text size ---- */
.footer a, .footer p, .footer li { font-size: 13.5px; line-height: 1.7; }

/* Some section headings sit in a wrapper with no .section-head class, so the
   gold rule is applied to the heading itself and centred only where the head
   is centred. */
.section-title::after {
  content: "";
  display: block;
  width: 46px;
  height: 3px;
  margin: 12px 0 0;
  border-radius: 2px;
  background: var(--gold);
}
.section-head--center .section-title::after { margin-inline: auto; }

/* ===========================================================================
   Certification page, second pass against the client's three reference
   designs (CAIM gold, CGAIM and CGAIP violet).
   ======================================================================== */

/* ---- Tab bar: a filled dark rail with a solid active tab ---- */
.cpage .ctabs {
  background: linear-gradient(120deg, #0b1d42 0%, #14295c 100%);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  margin-top: 26px;
  box-shadow: 0 18px 40px -32px rgba(8, 20, 46, .8);
}
.cpage .ctabs__list { gap: 0; }
.cpage .ctabs__list a {
  color: rgba(255, 255, 255, .74);
  border-bottom: 0;
  border-radius: 12px 12px 0 0;
  padding: 17px 20px;
}
.cpage .ctabs__list a:hover { color: #fff; background: rgba(255, 255, 255, .07); }
.cpage .ctabs__list a.is-current {
  color: #fff;
  background: color-mix(in srgb, var(--gold) 82%, #0b1d42);
}

/* ---- Headings flanked by dashed rules, as in refs 2 and 3 ---- */
.clearn__title, .cskills__title {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
}
.clearn__title::before, .clearn__title::after,
.cskills__title::before, .cskills__title::after {
  content: "";
  flex: 0 0 74px;
  height: 0;
  border-top: 2px dashed color-mix(in srgb, var(--gold) 55%, transparent);
}

/* ---- Skills band: dark, per the client's later designs ---- */
.cskills {
  background: linear-gradient(120deg, #0b1d42 0%, #16295e 55%, #1b2f6b 100%);
  border-radius: 16px;
  margin-inline: auto;
  max-width: var(--container);
  padding-inline: clamp(18px, 3vw, 34px);
}
.cskills__title { color: #fff; }
.cskills__lede { color: rgba(255, 255, 255, .78); }
.cskills__icon {
  background: rgba(255, 255, 255, .08);
  border: 1px solid color-mix(in srgb, var(--gold) 45%, transparent);
  color: var(--gold-soft, #fff);
  box-shadow: none;
}
.cskills__label { color: rgba(255, 255, 255, .92); }

/* ---- Learn grid: five across, as the client's later designs show ---- */
@media (min-width: 1180px) {
  .clearn__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
}

/* ---- Trust bar lifted into a card that overlaps the hero ---- */
.ctrust {
  background: transparent;
  border-bottom: 0;
  margin-top: -26px;
  position: relative;
  z-index: 5;
}
.ctrust__grid {
  background: #fff;
  border: 1px solid var(--line, #e3e8ef);
  border-radius: 14px;
  padding: 22px clamp(16px, 2.4vw, 28px);
  box-shadow: 0 22px 50px -34px rgba(12, 26, 52, .45);
  gap: 0;
}
.ctrust__item { padding-inline: clamp(12px, 1.6vw, 22px); }
.ctrust__item + .ctrust__item { border-left: 1px solid var(--line-soft, #e6ebf3); }

/* ---- Why-earn card: lighter treatment with circular ticks ---- */
.cwhy__card {
  background:
    radial-gradient(120% 140% at 100% 0%, color-mix(in srgb, var(--gold) 30%, transparent) 0%, transparent 58%),
    linear-gradient(150deg, #101f47 0%, #16295e 100%);
  border: 1px solid color-mix(in srgb, var(--gold) 28%, transparent);
}
.cwhy__tick {
  background: transparent;
  border: 1.5px solid var(--gold);
  color: var(--gold-soft, #fff);
  width: 20px; height: 20px;
}
.ccareer__mark {
  background: transparent;
  border: 1.5px solid color-mix(in srgb, var(--gold) 62%, transparent);
  color: color-mix(in srgb, var(--gold) 72%, #3a2a06);
  width: 19px; height: 19px;
}

@media (max-width: 1179px) {
  .cskills__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .ctrust__item + .ctrust__item { border-left: 0; }
  .clearn__title::before, .clearn__title::after,
  .cskills__title::before, .cskills__title::after { display: none; }
}

/* --- Fixes for the second pass -------------------------------------------
   1. The skills band was given max-width on the <section>, so it measured
      1380px at x=60 while every other block sits at 1332px / x=84. The card
      styling belongs on the inner .container so it lines up.
   2. The tab rail was painted full-bleed while its tabs stayed inset, so a
      rounded dark bar ran edge to edge. Same fix.
   3. The splitmedia accent panel used a negative inset with overflow visible
      and poked ~14px outside its column.                                   */

.cpage .ctabs {
  background: none;
  box-shadow: none;
  border-radius: 0;
  margin-top: 26px;
}
.cpage .ctabs > .container {
  background: linear-gradient(120deg, #0b1d42 0%, #14295c 100%);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 18px 40px -32px rgba(8, 20, 46, .8);
  padding-inline: 6px;
}
.cpage .ctabs__list a:first-child { border-radius: 12px 0 0 0; }

.cskills {
  max-width: none;
  margin-inline: 0;
  padding-inline: 0;
  background: none;
  border-radius: 0;
}
.cskills > .container {
  background: linear-gradient(120deg, #0b1d42 0%, #16295e 55%, #1b2f6b 100%);
  border-radius: 16px;
  padding-block: 30px 34px;
  padding-inline: clamp(20px, 3vw, 36px);
}

/* Keep the accent panel inside the photo's column. */
.cs-split__media::before {
  inset: auto -8px -8px auto;
  width: 56%;
  height: 56%;
}
.cs-split--flip .cs-split__media::before { inset: auto auto -8px -8px; }
.cs-split { padding-inline: 10px; }

/* .container measures 1380px INCLUDING its 24px padding, so painting it made
   the card wider than every other block. Paint the elements that already
   measure the content width instead. */
.cpage .ctabs > .container {
  background: none;
  box-shadow: none;
  border-radius: 0;
  padding-inline: 24px;
}
.cpage .ctabs__list {
  background: linear-gradient(120deg, #0b1d42 0%, #14295c 100%);
  border-radius: 12px 12px 0 0;
  box-shadow: 0 18px 40px -32px rgba(8, 20, 46, .8);
  padding-inline: 6px;
}

.cskills > .container {
  background: none;
  border-radius: 0;
  padding-block: 0;
  padding-inline: 24px;
}
.cskills__card {
  background: linear-gradient(120deg, #0b1d42 0%, #16295e 55%, #1b2f6b 100%);
  border-radius: 16px;
  padding: 30px clamp(20px, 3vw, 36px) 34px;
}

/* The offset accent panel behind the splitmedia photo was mine, not the
   client's, and it pushed ~14px outside the column. The ring and corner
   badge carry the treatment on their own. */
.cs-split__media::before { content: none; }
.cs-split { padding-inline: 0; }

/* --- Filled accent chips need light glyphs -------------------------------
   Recolouring the page accent left dark marks sitting on a mid-tone fill:
   the lab numerals rendered blue-on-blue and the plan ticks navy-on-blue.
   Fill is darkened toward navy and the glyph goes white; contrast measured. */
.v2 .cs-checks__mark,
.v2 .v2-checks__mark,
.v2 .cintro__tick,
.v2 .cs-ribbon__num,
.v2 .cs-step__num,
.v2 .cs-stages__num {
  background: color-mix(in srgb, var(--gold) 74%, #06152f);
  color: #fff;
}
.v2 .cs-checks__mark svg,
.v2 .v2-checks__mark svg,
.v2 .cintro__tick svg { fill: #fff; stroke: #fff; }

/* The numeral is a corner ribbon, so give the digits some weight. */
.v2 .cs-ribbon__num,
.v2 .cs-step__num,
.v2 .cs-stages__num {
  font-weight: 800;
  letter-spacing: .02em;
}

/* --- Tab bar back to the plain white rail --------------------------------
   The dark filled version was tried and rejected; this restores the original
   white bar with an accent underline on the active tab. */
.cpage .ctabs {
  background: #fff;
  border-bottom: 1px solid var(--line, #e3e8ef);
  border-radius: 0;
  box-shadow: 0 6px 18px -16px rgba(12, 26, 52, .5);
  margin-top: 0;
}
.cpage .ctabs > .container { background: none; box-shadow: none; padding-inline: 24px; }
.cpage .ctabs__list {
  background: none;
  border-radius: 0;
  box-shadow: none;
  padding-inline: 0;
  gap: 4px;
}
.cpage .ctabs__list a {
  color: var(--ink-soft, #4a5568);
  background: none;
  border-radius: 0;
  border-bottom: 2px solid transparent;
  padding: 16px 18px;
}
.cpage .ctabs__list a:first-child { border-radius: 0; }
.cpage .ctabs__list a:hover { color: var(--navy-900, #0b1b3d); background: none; }
.cpage .ctabs__list a.is-current {
  color: var(--navy-900, #0b1b3d);
  background: none;
  border-bottom-color: var(--gold);
}

/* --- Long-form document pages (About, Journey, Exams, Training) ---------- */
.cpage-hero__eyebrow { font-size: 13px; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; }
.cpage-hero__inner { padding-block: 40px 48px; }
.cpage-tabs .ctabs__list a { font-size: 13.5px; }

.cdoc__h3 {
  margin: 26px 0 10px;
  font: 700 18px/1.35 var(--font-display, inherit);
  color: var(--navy-900, #0b1b3d);
}
.cdoc__p { margin: 0 0 12px; font-size: 15px; line-height: 1.78; color: var(--ink-soft, #4a5568); max-width: 78ch; }

.cdoc__list { margin: 12px 0 18px; padding: 0; list-style: none; display: grid; gap: 9px; }
.cdoc__list li { display: flex; gap: 11px; align-items: flex-start; font-size: 14.5px; line-height: 1.65; color: var(--ink-soft, #4a5568); }
.cdoc__tick {
  display: grid; place-items: center; width: 20px; height: 20px; flex: none; margin-top: 2px;
  border-radius: 50%; background: color-mix(in srgb, var(--gold) 74%, #06152f); color: #fff;
}
.cdoc__tick svg { width: 11px; height: 11px; fill: currentColor; }

.cdoc__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 18px; padding: 0; list-style: none; }
.cdoc__chips li {
  padding: 8px 15px; border-radius: 999px;
  border: 1px solid var(--line, #e3e8ef); background: #fff;
  font-size: 13.5px; color: var(--navy-900, #0b1b3d);
}

.cdoc__flow {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px; margin: 16px 0 22px; padding: 0; list-style: none; counter-reset: none;
}
.cdoc__flow li {
  display: flex; flex-direction: column; gap: 7px;
  padding: 15px 16px; border-radius: 12px;
  border: 1px solid var(--line, #e3e8ef); background: #fff;
}
.cdoc__flow-num { font: 800 13px/1 var(--font-display, inherit); color: var(--gold); }
.cdoc__flow-label { font: 700 13.5px/1.35 var(--font-display, inherit); color: var(--navy-900, #0b1b3d); }

/* --- Credential badge artwork supplied by the client --------------------- */
.cbadge { display: grid; place-items: center; }
/* The badge JPGs ship on a pure white ground (sampled 255,255,255 at all four
   corners), so a blend mode cannot knock it out. It sits on a white plate,
   which reads as deliberate against the dark hero. */
.cbadge img {
  display: block;
  width: 100%;
  max-width: 268px;
  height: auto;
  padding: 14px;
  border-radius: 18px;
  background: #fff;
  box-shadow: 0 24px 55px -26px rgba(0, 0, 0, .6);
}
@media (max-width: 1024px) { .cbadge img { max-width: 220px; } }

/* --- Accent contrast on light grounds -------------------------------------
   The credential accent is a mid-tone, so using it raw as ink on white (or
   white on it) lands between 2.1:1 and 4.25:1. One darkened token fixes the
   lot; measured after applying, not assumed.                               */
.cpage, .v2, .cert-hero { --gold-ink: color-mix(in srgb, var(--gold) 70%, #08182f); }

/* Accent-coloured text and glyphs sitting on white or near-white. */
.v2 .cs-split__h3,
.v2 .cs-listlabel,
.v2 .cs-hex__num,
.v2 .v2-more__label,
.v2 .pathway__level,
.cboard__icon,
.v2 .v2-option__badge {
  color: var(--gold-ink, #0d3a6b);
}

/* Large numerals: keep them light but dark enough to register. */
.v2 .cs-step__num { color: color-mix(in srgb, var(--gold) 58%, #08182f); }

/* Filled chips and bars — darken the fill so white content holds up. */
.cglance__tick,
.v2 .cs-bar__icon { background: color-mix(in srgb, var(--gold) 72%, #08182f); color: #fff; }
.cglance__tick svg { fill: #fff; }
.v2 .cs-bar { background: color-mix(in srgb, var(--gold) 74%, #08182f); }
.v2 .cs-bar__text { color: #fff; }

/* Solid accent buttons on light sections. */
.v2 .btn--primary,
.v2 .btn--gold,
.v2 .cbtn--gold,
.cpage .cbtn--gold {
  background: color-mix(in srgb, var(--gold) 72%, #08182f);
  border-color: transparent;
  color: #fff;
}
.v2 .btn--primary:hover, .v2 .btn--gold:hover,
.v2 .cbtn--gold:hover, .cpage .cbtn--gold:hover {
  background: color-mix(in srgb, var(--gold) 84%, #08182f);
}

/* Correction: these two sit on an accent fill, not on white, so darkening
   their ink made them worse (1.28 and 1.57). White ink, darker fill. */
.v2 .cs-step__num {
  color: #fff;
  background: color-mix(in srgb, var(--gold) 72%, #08182f);
}
.v2 .v2-option__badge {
  color: #fff;
  background: color-mix(in srgb, var(--gold) 72%, #08182f);
}

/* Solid accent buttons everywhere, including the hero and the sticky bar. */
.cbtn--gold,
.btn--primary,
.btn--gold {
  background: color-mix(in srgb, var(--gold, #1d4ed8) 72%, #08182f);
  border-color: transparent;
  color: #fff;
}
.cbtn--gold:hover, .btn--primary:hover, .btn--gold:hover {
  background: color-mix(in srgb, var(--gold, #1d4ed8) 84%, #08182f);
}

/* 72% still leaves white on amber at 3.67:1 outside the accent scope (the
   sticky bar falls back to the default gold). 55% clears 4.5:1 for both the
   amber default and the blue/violet credential accents. */
.cbtn--gold,
.btn--primary,
.btn--gold,
.v2-buybar .btn--primary {
  background: color-mix(in srgb, var(--gold, #1d4ed8) 55%, #06152f);
  color: #fff;
}
.cbtn--gold:hover, .btn--primary:hover, .btn--gold:hover,
.v2-buybar .btn--primary:hover {
  background: color-mix(in srgb, var(--gold, #1d4ed8) 68%, #06152f);
}

/* The highlighted step card sets its numeral to a light tint, which lands at
   2.4:1 on the darkened fill. */
.v2 .cs-step.is-lit .cs-step__num,
.v2 .cs-tile.is-lit .cs-step__num { color: #fff; }

/* Surfaced on the violet credentials, where the accent ink is lighter. */
/* The base rule uses `color: var(--c) !important`, so this must match it. */
.v2 .cs-note__label { color: var(--gold-ink, #0d3a6b) !important; }

/* ===========================================================================
   Content pages (About, Journey, Assessment & Exams, Training).
   The client's documents are long prose; these are the designed groups the
   structurer produces so the pages read as sections rather than as one wall
   of headings and bullets.
   ======================================================================== */
.cdoc { --gold-ink: color-mix(in srgb, var(--gold) 70%, #08182f); }
.pg + .pg { margin-top: 30px; }

.pg__head {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 14px;
  font: 700 20px/1.32 var(--font-display, inherit);
  color: var(--navy-900, #0b1b3d);
}
.pg__head-icon {
  display: grid; place-items: center; width: 38px; height: 38px; flex: none;
  border-radius: 10px;
  background: color-mix(in srgb, var(--gold) 15%, #fff);
  color: var(--gold-ink);
}
.pg__head-icon svg { width: 19px; height: 19px; fill: currentColor; }

.pg__p { margin: 0 0 12px; font-size: 15px; line-height: 1.75; color: var(--ink-soft, #4a5568); max-width: 78ch; }
.pg__p:last-child { margin-bottom: 0; }

/* ---- cards ---- */
.pg__cards { display: grid; gap: 14px; margin-top: 16px; }
.pg__cards--tiles { grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.pg__cards--steps { grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); }
.pg__card {
  position: relative;
  padding: 20px 20px 22px;
  border: 1px solid var(--line, #e3e8ef);
  border-radius: 14px;
  background: #fff;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.pg__card:hover {
  border-color: color-mix(in srgb, var(--gold) 52%, transparent);
  box-shadow: 0 16px 34px -26px rgba(12, 26, 52, .5);
  transform: translateY(-2px);
}
.pg__card-icon {
  display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 12px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--gold) 14%, #fff);
  color: var(--gold-ink);
}
.pg__card-icon svg { width: 20px; height: 20px; fill: currentColor; }
.pg__card-num {
  display: inline-grid; place-items: center; width: 44px; height: 44px; margin-bottom: 12px;
  border-radius: 50%;
  font: 800 16px/1 var(--font-display, inherit);
  color: #fff;
  background: color-mix(in srgb, var(--gold) 62%, #08182f);
}
.pg__card-title { margin: 0 0 7px; font: 700 15.5px/1.35 var(--font-display, inherit); color: var(--navy-900, #0b1b3d); }
.pg__card-text { margin: 0; font-size: 14px; line-height: 1.66; color: var(--ink-soft, #4a5568); }

/* ---- stated sequence ---- */
.pg__flow {
  display: flex; flex-wrap: wrap; gap: 10px;
  margin: 16px 0 0; padding: 0; list-style: none; counter-reset: none;
}
.pg__flow li {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 16px 10px 10px;
  border: 1px solid var(--line, #e3e8ef);
  border-radius: 999px;
  background: #fff;
  font: 600 13px/1.3 var(--font-display, inherit);
  color: var(--navy-900, #0b1b3d);
}
.pg__flow-dot {
  display: grid; place-items: center; width: 24px; height: 24px; flex: none;
  border-radius: 50%; font-size: 13.34px; font-weight: 800; color: #fff;
  background: color-mix(in srgb, var(--gold) 62%, #08182f);
}

/* ---- ticked lists ---- */
.pg__checks { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.pg__checks--two { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 9px 26px; }
.pg__checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 14.5px; line-height: 1.6; color: var(--ink-soft, #4a5568); }
.pg__tick {
  display: grid; place-items: center; width: 19px; height: 19px; flex: none; margin-top: 2px;
  border-radius: 50%; color: #fff;
  background: color-mix(in srgb, var(--gold) 70%, #08182f);
}
.pg__tick svg { width: 10px; height: 10px; fill: currentColor; }

/* ---- pills ---- */
.pg__pills {
  margin: 14px 0 0; padding: 0; list-style: none;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 8px;
}
.pg__pills li {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 14px;
  border: 1px solid var(--line-soft, #e6ebf3);
  border-radius: 10px;
  background: #fff;
  font-size: 14px; line-height: 1.45; color: var(--navy-900, #0b1b3d);
}
.pg__pill-icon { display: grid; place-items: center; width: 18px; height: 18px; flex: none; color: var(--gold-ink); }
.pg__pill-icon svg { width: 16px; height: 16px; fill: currentColor; }

/* ---- paragraphs as cards ---- */
.pg__paras { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; margin-top: 16px; }
.pg__para {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 18px 18px 20px;
  border: 1px solid var(--line, #e3e8ef); border-radius: 13px; background: #fff;
}
.pg__para p { margin: 0; font-size: 14.5px; line-height: 1.7; color: var(--ink-soft, #4a5568); }
.pg__para-mark {
  display: grid; place-items: center; width: 34px; height: 34px; flex: none;
  border-radius: 9px; background: color-mix(in srgb, var(--gold) 14%, #fff); color: var(--gold-ink);
}
.pg__para-mark svg { width: 17px; height: 17px; fill: currentColor; }

/* ---- image beside copy ---- */
.pg__split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); gap: 30px; align-items: center; margin-top: 16px; }
.pg__split--flip .pg__split-media { order: -1; }
.pg__split-media { position: relative; margin: 0; }
.pg__split-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  aspect-ratio: 4 / 3; border-radius: 16px;
  box-shadow: 0 24px 54px -30px rgba(12, 26, 52, .45);
}
.pg__split-badge {
  position: absolute; top: -14px; left: -14px;
  display: grid; place-items: center; width: 52px; height: 52px;
  border-radius: 14px; color: #fff;
  background: color-mix(in srgb, var(--gold) 66%, #08182f);
  box-shadow: 0 12px 26px -12px rgba(12, 26, 52, .6);
}
.pg__split--flip .pg__split-badge { left: auto; right: -14px; }
.pg__split-badge svg { width: 24px; height: 24px; fill: currentColor; }

/* ---- CTAs lifted out of the copy ---- */
.pg__links { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; }
.pg__link {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: 999px;
  border: 1.5px solid color-mix(in srgb, var(--gold) 45%, transparent);
  font: 700 13.5px/1 var(--font-display, inherit);
  color: var(--gold-ink); text-decoration: none;
  transition: background .16s, border-color .16s, transform .16s;
}
.pg__link:hover {
  background: color-mix(in srgb, var(--gold) 9%, transparent);
  border-color: color-mix(in srgb, var(--gold) 70%, transparent);
  transform: translateY(-1px);
}
.pg__link svg { width: 12px; height: 12px; fill: currentColor; }

@media (max-width: 860px) {
  .pg__split { grid-template-columns: 1fr; }
  .pg__split--flip .pg__split-media { order: 0; }
  .pg__checks--two { grid-template-columns: 1fr; }
}

/* The off-canvas drawer is fixed and translated fully off-screen, but it still
   counts toward the document's scroll width on narrow viewports, so the whole
   page could be dragged sideways. Clip at the root where the drawer exists. */
@media (max-width: 1024px) {
  html, body { overflow-x: hidden; }
}

/* --- Item grid: one lead-in heading, many items -------------------------- */
.pg__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  gap: 16px;
  margin-top: 18px;
}
.pg__item {
  display: flex; flex-direction: column;
  padding: 22px 22px 24px;
  border: 1px solid var(--line, #e3e8ef);
  border-radius: 14px;
  background: #fff;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.pg__item:hover {
  border-color: color-mix(in srgb, var(--gold) 52%, transparent);
  box-shadow: 0 18px 38px -28px rgba(12, 26, 52, .5);
  transform: translateY(-2px);
}
.pg__item-icon {
  display: grid; place-items: center; width: 42px; height: 42px; margin-bottom: 14px;
  border-radius: 11px;
  background: color-mix(in srgb, var(--gold) 14%, #fff);
  color: var(--gold-ink);
}
.pg__item-icon svg { width: 21px; height: 21px; fill: currentColor; }
.pg__item-title { margin: 0 0 8px; font: 700 16px/1.32 var(--font-display, inherit); color: var(--navy-900, #0b1b3d); }
.pg__item-text { margin: 0 0 12px; font-size: 14px; line-height: 1.68; color: var(--ink-soft, #4a5568); }
.pg__item-list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.pg__item-list li {
  position: relative; padding-left: 15px;
  font-size: 14.56px; line-height: 1.5; color: var(--ink-soft, #4a5568);
}
.pg__item-list li::before {
  content: ""; position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--gold) 62%, transparent);
}
.pg__item-more { font-weight: 600; color: var(--gold-ink); }
.pg__item-more::before { display: none; }
.pg__item-cta {
  display: inline-flex; align-items: center; gap: 7px;
  margin-top: auto; padding-top: 16px;
  font: 700 13px/1 var(--font-display, inherit);
  color: var(--gold-ink); text-decoration: none;
}
.pg__item-cta svg { width: 12px; height: 12px; fill: currentColor; }
.pg__item-cta:hover { text-decoration: underline; text-underline-offset: 3px; }

/* Rhythm: alternate grounds so a long page has visible section breaks. */
.cdoc .v2-sec:nth-of-type(even) { background: color-mix(in srgb, var(--navy-900, #0b1b3d) 3%, #fff); }
.pg + .pg { margin-top: 38px; padding-top: 34px; border-top: 1px solid var(--line-soft, #e6ebf3); }
.pg--itemgrid + .pg, .pg + .pg--itemgrid { margin-top: 42px; }

/* ===========================================================================
   Content sections, using the language the client already approved on the
   certification pages: white cards, navy type, one accent, generous space.
   The previous attempt used saturated colour panels with the copy split into
   two narrow columns — loud, and one to two words per line.
   ======================================================================== */

/* ---- Item grid: roomy white cards, one column of copy ---- */
.pg__grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 20px;
  margin-top: 20px;
}
.pg__item {
  display: block;                 /* copy runs full width, never two columns */
  position: relative;
  padding: 28px 28px 30px;
  border: 1px solid var(--line, #e3e8ef);
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
  overflow: visible;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.pg__item::after { content: none; }
.pg__item::before {
  content: "";
  position: absolute; left: 28px; right: 28px; top: 0; height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--gold);
  opacity: 0; transition: opacity .16s;
}
.pg__item:hover {
  border-color: color-mix(in srgb, var(--gold) 42%, transparent);
  box-shadow: 0 20px 44px -30px rgba(12, 26, 52, .45);
  transform: translateY(-2px);
}
.pg__item:hover::before { opacity: 1; }

.pg__item-icon {
  display: grid; place-items: center;
  width: 52px; height: 52px; margin: 0 0 16px;
  border-radius: 14px;
  background: color-mix(in srgb, var(--gold) 12%, #fff);
  color: var(--gold-ink);
  box-shadow: none;
}
.pg__item-icon svg { width: 25px; height: 25px; fill: currentColor; }
.pg__item-title { margin: 0 0 9px; font: 700 17px/1.35 var(--font-display, inherit); color: var(--navy-900, #0b1b3d); }
.pg__item-text  { margin: 0 0 14px; font-size: 14.5px; line-height: 1.7; color: var(--ink-soft, #4a5568); }

.pg__item-list { display: grid; gap: 7px; padding-top: 14px; border-top: 1px solid var(--line-soft, #e6ebf3); }
.pg__item-list li { padding-left: 18px; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft, #4a5568); }
.pg__item-list li::before {
  width: 5px; height: 5px; top: 9px; left: 2px;
  background: var(--gold);
}
.pg__item-more { color: var(--gold-ink); }
.pg__item-cta { margin-top: 16px; padding-top: 0; color: var(--gold-ink); }

/* ---- Numbered cards: white, numeral in the accent, no colour fill ---- */
.pg__card {
  position: relative;
  padding: 30px 26px 28px;
  border: 1px solid var(--line, #e3e8ef);
  border-radius: 16px;
  background: #fff;
  box-shadow: none;
  overflow: visible;
}
.pg__card:hover {
  border-color: color-mix(in srgb, var(--gold) 42%, transparent);
  box-shadow: 0 20px 44px -30px rgba(12, 26, 52, .45);
  transform: translateY(-2px);
}
.pg__card-num {
  position: static;
  display: inline-grid; place-items: center;
  width: 46px; height: 46px; margin: 0 0 14px;
  border: 0; border-radius: 13px;
  background: color-mix(in srgb, var(--gold) 12%, #fff);
  color: var(--gold-ink);
  font: 800 19px/1 var(--font-display, inherit);
  box-shadow: none;
}
.pg__card-icon {
  width: 52px; height: 52px; border-radius: 14px;
  background: color-mix(in srgb, var(--gold) 12%, #fff);
  color: var(--gold-ink); box-shadow: none;
}
.pg__card-icon svg { width: 25px; height: 25px; }
.pg__card-title { color: var(--navy-900, #0b1b3d); font-size: 16.5px; }
.pg__card-text  { color: var(--ink-soft, #4a5568); font-size: 14px; }

/* ---- Stage flow: kept, but in the house palette ---- */
.pg__flow li {
  border-top: 3px solid var(--gold);
  background: #fff;
  box-shadow: 0 14px 30px -26px rgba(12, 26, 52, .45);
}
.pg__flow-dot {
  background: color-mix(in srgb, var(--gold) 72%, #08182f);
  border: 3px solid #fff;
}

/* ---- Breathing room between blocks ---- */
.pg + .pg { margin-top: 44px; padding-top: 40px; }
.cdoc .v2-sec { padding-block: 54px; }

/* --- Document index cards and part navigation ---------------------------- */
.pg__item--link { text-decoration: none; display: block; }
.pg__item-step {
  display: block; margin-bottom: 8px;
  font: 700 11px/1 var(--font-display, inherit);
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--gold-ink);
}
.pg__item--link .pg__item-title { margin-bottom: 14px; }
.pg__item--link .pg__item-cta { display: inline-flex; margin-top: 0; }

.pgnav { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.pgnav__link {
  display: flex; align-items: center; gap: 14px;
  padding: 20px 24px;
  border: 1px solid var(--line, #e3e8ef);
  border-radius: 14px;
  background: #fff;
  text-decoration: none;
  transition: border-color .16s, box-shadow .16s, transform .16s;
}
.pgnav__link:hover {
  border-color: color-mix(in srgb, var(--gold) 45%, transparent);
  box-shadow: 0 18px 40px -30px rgba(12, 26, 52, .45);
  transform: translateY(-2px);
}
.pgnav__link--next { justify-content: flex-end; text-align: right; }
.pgnav__link svg { width: 17px; height: 17px; flex: none; fill: var(--gold-ink); }
.pgnav__k {
  display: block; font: 700 11px/1 var(--font-display, inherit);
  letter-spacing: .13em; text-transform: uppercase; color: var(--ink-muted, #6b7688);
}
.pgnav__v {
  display: block; margin-top: 5px;
  font: 700 15.5px/1.35 var(--font-display, inherit); color: var(--navy-900, #0b1b3d);
}

/* A part page leads with its title, so the hero can be shallower. */
.cpage-hero--part .cert-hero__inner { padding-block: 34px 40px; }

/* Wide banner for parts built entirely from item grids. */
.pg__banner { margin: 20px 0 4px; }
.pg__banner img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 21 / 7; object-fit: cover;
  border-radius: 16px;
  box-shadow: 0 22px 48px -32px rgba(12, 26, 52, .45);
}

/* --- Section photograph: one clean frame beside the copy ----------------- */
.pg__figure { position: relative; margin: 0; }
.pg__figure img {
  width: 100%; height: 100%; display: block;
  aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: 18px;
  box-shadow: 0 26px 56px -34px rgba(12, 26, 52, .5);
}
.pg__figure-badge {
  position: absolute; left: -16px; bottom: 22px;
  display: grid; place-items: center; width: 56px; height: 56px;
  border-radius: 16px;
  background: #fff; color: var(--gold-ink);
  box-shadow: 0 14px 30px -12px rgba(12, 26, 52, .45);
}
.pg__split--flip .pg__figure-badge { left: auto; right: -16px; }
.pg__figure-badge svg { width: 26px; height: 26px; fill: currentColor; }

/* Copy leads, the picture supports it. */
.pg__split { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 34px; align-items: start; }
.pg__split-copy { padding-top: 4px; }

@media (max-width: 860px) {
  .pg__figure-badge { left: 14px; bottom: 14px; }
  .pg__split--flip .pg__figure-badge { right: auto; left: 14px; }
}

/* --- Jump links down one page -------------------------------------------- */
/* Without this the sticky rail covers the heading you just jumped to. */
.cdoc__sec { scroll-margin-top: 74px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

.cpage-tabs { top: 0; z-index: 40; }

/* --- Card thumbnails ------------------------------------------------------ */
.pg__item--shot { padding-top: 0; overflow: hidden; }
.pg__item-shot { display: block; margin: 0 -28px 0; }
.pg__item-shot img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 16 / 9; object-fit: cover;
}
.pg__item--shot .pg__item-icon {
  margin-top: -26px; position: relative; z-index: 1;
  border: 3px solid #fff;
  background: #fff;
  color: var(--gold-ink);
  box-shadow: 0 8px 18px -8px rgba(12, 26, 52, .4);
}
.pg__item--shot > :not(.pg__item-shot) { margin-left: 0; }

/* --- Section lead image --------------------------------------------------- */
.cdoc__lead { position: relative; margin: 0 0 30px; }
.cdoc__lead img {
  width: 100%; height: auto; display: block;
  aspect-ratio: 21 / 6; object-fit: cover;
  border-radius: 18px;
}
.cdoc__lead figcaption {
  position: absolute; left: 20px; bottom: 20px;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 22px 12px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, .94);
  backdrop-filter: blur(8px);
  font: 700 15px/1.2 var(--font-display, inherit);
  color: var(--navy-900, #0b1b3d);
  box-shadow: 0 14px 30px -16px rgba(12, 26, 52, .5);
}
.cdoc__lead-icon {
  display: grid; place-items: center; width: 34px; height: 34px;
  border-radius: 50%;
  background: color-mix(in srgb, var(--gold) 16%, #fff);
  color: var(--gold-ink);
}
.cdoc__lead-icon svg { width: 17px; height: 17px; fill: currentColor; }

@media (max-width: 700px) {
  .cdoc__lead img { aspect-ratio: 16 / 9; }
  .cdoc__lead figcaption { left: 12px; bottom: 12px; font-size: 13.5px; padding: 10px 16px 10px 10px; }
}

/* ===========================================================================
   Three reported faults.
   ======================================================================== */

/* 1. The career-architecture band heading was navy on a navy gradient — the
      exact same colour, so it was invisible. My homepage restyle set it. */
.architecture .arch-center__title,
.architecture .arch-center__lead {
  color: #fff;
}
.architecture .arch-center__lead { color: rgba(255, 255, 255, .84); }
.architecture .section-title::after { background: var(--gold); }

/* 2. Mega menu was 9px with a 13px dead gap in the code column: the column was
      fixed at 38px while "CAIP®" only needs 25px. Sizing the column to its
      content removes the gap, and every size goes up a point. */
.hero__visual--orbit .orbit__node-label { font-size: 10px; }

.mega__certs a { grid-template-columns: max-content minmax(0, 1fr); gap: 7px; }
.mega__code { font-size: 10px; }
.mega__name { font-size: 12px; }
.mega__area-name { font-size: 13.5px; }
.mega__group-name { font-size: 14px; }
.mega__explore { font-size: 12px; }
.mpanel__label, .mpanel__desc { font-size: 13.5px; }
.mpanel__point-title { font-size: 14px; }
.nav__link { font-size: 14px; }

/* 3. Extra space around the section heading rule and above the cards. */
.v2 .v2-head { margin-bottom: 18px; }
.v2 .v2-head .v2-h2::after { margin-top: 7px; }
.v2 .v2-lede { margin-top: 7px; }
.v2 .v2-tint, .v2 .cs-feature, .v2 .cs-tile { padding: 24px 24px 26px; }
.v2 .v2-sec { padding-block: 44px; }

/* At 10px the longest title ("Certified International Cybersecurity
   Professional") ran 18.5px past its column. Reclaim it from the rail, the
   gutters and the tracking rather than dropping back to 9px. */
.mpanel__body--rail { grid-template-columns: 168px minmax(0, 1fr); }
.mpanel__body { padding: 18px 14px 16px; }
.mpanel__cols { gap: 13px; }
.mega__certs a { gap: 6px; }

/* --- Cards carry icons only ---------------------------------------------- */
.pg__item-shot { display: none; }

/* --- Dark section band --------------------------------------------------- */
.cdoc__sec--dark {
  background: linear-gradient(120deg, #0a1d44 0%, #12305f 55%, #16386d 100%);
}
.cdoc__sec--dark .v2-h2,
.cdoc__sec--dark .pg__head,
.cdoc__sec--dark .pg__item-title,
.cdoc__sec--dark .pg__card-title,
.cdoc__sec--dark .pgnav__v { color: #fff; }
.cdoc__sec--dark .v2-eyebrow {
  background: rgba(255, 255, 255, .12);
  border-color: rgba(255, 255, 255, .24);
  color: var(--gold-soft, #f0c257);
}
.cdoc__sec--dark .v2-lede,
.cdoc__sec--dark .pg__p,
.cdoc__sec--dark .pg__item-text,
.cdoc__sec--dark .pg__card-text,
.cdoc__sec--dark .pg__checks li,
.cdoc__sec--dark .pg__item-list li { color: rgba(255, 255, 255, .84); }

.cdoc__sec--dark .pg__item,
.cdoc__sec--dark .pg__card,
.cdoc__sec--dark .pg__flow li,
.cdoc__sec--dark .pg__para,
.cdoc__sec--dark .pg__pills li {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
}
.cdoc__sec--dark .pg__item:hover,
.cdoc__sec--dark .pg__card:hover {
  background: rgba(255, 255, 255, .1);
  border-color: color-mix(in srgb, var(--gold) 55%, transparent);
}
.cdoc__sec--dark .pg__pills li { color: rgba(255, 255, 255, .9); }
.cdoc__sec--dark .pg__item-icon,
.cdoc__sec--dark .pg__card-icon,
.cdoc__sec--dark .pg__head-icon,
.cdoc__sec--dark .pg__para-mark {
  background: rgba(255, 255, 255, .12);
  color: var(--gold-soft, #f0c257);
}
.cdoc__sec--dark .pg__card-num { background: var(--gold); color: #16204a; }
.cdoc__sec--dark .pg + .pg { border-top-color: rgba(255, 255, 255, .14); }
.cdoc__sec--dark .pg__item-list li::before,
.cdoc__sec--dark .pg__pill-icon { color: var(--gold-soft, #f0c257); }
.cdoc__sec--dark .pg__item-cta,
.cdoc__sec--dark .pg__item-more,
.cdoc__sec--dark .pg__link { color: var(--gold-soft, #f0c257); }
.cdoc__sec--dark .pg__link { border-color: rgba(240, 194, 87, .45); }
.cdoc__sec--dark .cdoc__lead figcaption { background: rgba(10, 29, 68, .9); color: #fff; }
.cdoc__sec--dark .cdoc__lead-icon { background: rgba(255, 255, 255, .14); color: var(--gold-soft, #f0c257); }
.cdoc__sec--dark .pg__figure-badge { background: #0d2350; color: var(--gold-soft, #f0c257); }
.cdoc__sec--dark .pg__tick { color: var(--gold-soft, #f0c257); }
.cdoc__sec--dark .pg__tick::before { background: rgba(255, 255, 255, .14); }


/* The rule under a section heading must follow the heading's alignment: it was
   pinned left while most headings are centred. */
.v2 .v2-head .v2-h2::after { margin-inline: auto; }
.v2 .v2-head--left .v2-h2::after { margin-inline: 0; }
.cdoc .v2-head--left .v2-h2::after { margin-inline: 0; }

/* The resources panel badge overhangs its image by 21px, but the media box
   clipped it with overflow:hidden so the lower half vanished behind the card.
   Clip the photograph on the image itself and let the badge sit above. */
.mpanel__col--media { overflow: visible; }
.mpanel__media { overflow: visible; }
.mpanel__media img {
  border-radius: inherit;
  display: block;
}
.mpanel__badge {
  z-index: 3;
  border: 3px solid #fff;
  box-shadow: 0 8px 20px -8px rgba(12, 26, 52, .45);
}

/* At 12px the longest titles need ~52px more than a column gives, so they can
   no longer sit on one line. Wrapping is better than the ellipsis that was
   cutting names off — and a little width is reclaimed from the rail. */
.mega__name {
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  line-height: 1.4;
}
.mpanel__body--rail { grid-template-columns: 150px minmax(0, 1fr); }
.mpanel__body { padding: 18px 12px 16px; }
.mpanel__cols { gap: 11px; }
.mega__certs a { align-items: start; gap: 6px; padding-block: 4px; }
.mega__certs { gap: 5px; }
.mega__code { padding-top: 1px; }


/* ===========================================================================
   Devices from the client's reference set, in the brand palette rather than
   the rainbow: numbered corner tabs (ref 33), circular medallions straddling
   the panel edge (ref 44), an offset outline behind cards (ref 33) and an
   asymmetric radius (ref 17).
   ======================================================================== */



/* ---- Item cards: medallion straddling the edge (ref 44) ---- */
.pg__item {
  position: relative;
  padding: 30px 28px 28px;
  border-radius: 18px 18px 18px 6px;    /* asymmetric, ref 17 */
  overflow: visible;
}
.pg__item--right { border-radius: 18px 18px 6px 18px; }
.pg__item-icon {
  position: absolute; top: -22px; left: 26px;
  width: 56px; height: 56px; margin: 0;
  border-radius: 50%;
  border: 4px solid #fff;
  background: color-mix(in srgb, var(--gold) 14%, #fff);
  color: var(--gold-ink);
  box-shadow: 0 10px 22px -10px rgba(12, 26, 52, .45);
}
.pg__item--right .pg__item-icon { left: auto; right: 26px; }
.pg__item-title { margin-top: 22px; }
.pg__item--right { text-align: right; }
.pg__item--right .pg__item-list li { padding-left: 0; padding-right: 18px; }
.pg__item--right .pg__item-list li::before { left: auto; right: 2px; }
.pg__item--right .pg__item-cta { margin-left: auto; }

/* ---- Read-more sits bottom-right (ref 17) ---- */
.pg__item-cta { display: inline-flex; margin-top: auto; }

/* Dark bands keep the devices but invert their grounds. */
.cdoc__sec--dark .pg__tab { background: var(--gold); color: #16204a; }
.cdoc__sec--dark details.pg::after { border-color: rgba(240, 194, 87, .3); }
.cdoc__sec--dark .pg__item-icon {
  border-color: #12305f;
  background: rgba(255, 255, 255, .14);
  color: var(--gold-soft, #f0c257);
}

@media (max-width: 700px) {
  details.pg::after { display: none; }
  .pg__item--right { text-align: left; }
  .pg__item--right .pg__item-icon { right: auto; left: 26px; }
  .pg__item--right .pg__item-list li { padding-left: 18px; padding-right: 0; }
  .pg__item--right .pg__item-list li::before { right: auto; left: 2px; }
}

/* Remaining list items on a card: present in the page, tucked behind a small
   disclosure so the card still scans. */
.pg__more { margin-top: 8px; }
.pg__more > summary {
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 700 12.5px/1 var(--font-display, inherit);
  color: var(--gold-ink);
}
.pg__more > summary::-webkit-details-marker { display: none; }
.pg__more > summary::after { content: "+"; font-size: 14px; line-height: 1; }
.pg__more[open] > summary::after { content: "–"; }
.pg__more > summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.pg__more .pg__item-list { margin-top: 8px; }
.cdoc__sec--dark .pg__more > summary { color: var(--gold-soft, #f0c257); }

/* ===========================================================================
   Certifications rail, to the client's menu design: a titled panel with a
   lede and seven action rows. The previous list was squeezed to 150px, so all
   six labels wrapped and every chevron overflowed 18px into the first column.
   ======================================================================== */
.mpanel__body--rail { grid-template-columns: 268px minmax(0, 1fr); gap: 26px; }
.mpanel__body { padding: 22px 20px 20px; }

.crail {
  padding-right: 24px;
  border-right: 1px solid var(--line-soft, #e6ebf3);
  min-width: 0;
}
.crail__title {
  margin: 0;
  font: 800 24px/1.15 var(--font-display, inherit);
  letter-spacing: -.01em;
  color: var(--navy-900, #0b1b3d);
  text-transform: uppercase;
}
.crail__tagline {
  margin: 10px 0 0;
  font: 600 14px/1.5 var(--font-display, inherit);
  color: var(--navy-700, #16346b);
}
.crail__rule {
  display: block; width: 46px; height: 3px; margin: 14px 0;
  border-radius: 2px; background: var(--gold);
}
.crail__body { margin: 0 0 18px; font-size: 13.5px; line-height: 1.6; color: var(--ink-soft, #4a5568); }

.crail__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.crail__link {
  display: grid;
  grid-template-columns: 30px minmax(0, 1fr) 14px;   /* chevron has its own track */
  align-items: center;
  gap: 11px;
  padding: 11px 13px;
  border: 1px solid var(--line, #e3e8ef);
  border-radius: 10px;
  background: #fff;
  text-decoration: none;
  transition: border-color .16s, background .16s, transform .16s;
}
.crail__link:hover {
  border-color: color-mix(in srgb, var(--gold) 50%, transparent);
  background: color-mix(in srgb, var(--gold) 5%, #fff);
  transform: translateX(2px);
}
.crail__icon {
  display: grid; place-items: center; width: 30px; height: 30px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--c) 9%, #fff);
  color: var(--c);
}
.crail__icon svg { width: 16px; height: 16px; fill: currentColor; }
.crail__label {
  font: 700 12.5px/1.3 var(--font-display, inherit);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--navy-900, #0b1b3d);
  min-width: 0;
}
.crail__chev { width: 13px; height: 13px; fill: var(--ink-muted, #6b7688); }
.crail__link:hover .crail__chev { fill: var(--gold-ink); }

/* The first row is the primary action. */
.crail__link--primary {
  background: var(--navy-900, #0b1b3d);
  border-color: var(--navy-900, #0b1b3d);
}
.crail__link--primary .crail__label { color: #fff; }
.crail__link--primary .crail__icon { background: rgba(255, 255, 255, .14); color: #fff; }
.crail__link--primary .crail__chev { fill: rgba(255, 255, 255, .8); }
.crail__link--primary:hover { background: var(--navy-700, #16346b); border-color: var(--navy-700, #16346b); }

/* Column headers use a circular medallion, as the client's design does. */
.mega__group-icon { border-radius: 50%; width: 42px; height: 42px; }

@media (max-width: 1180px) {
  .mpanel__body--rail { grid-template-columns: 1fr; }
  .crail { border-right: 0; padding-right: 0; padding-bottom: 18px; border-bottom: 1px solid var(--line-soft, #e6ebf3); }
}

/* Rail labels needed 204px in a 149px track. Widening the rail and trimming
   the uppercase tracking gets them onto one line; where a label still needs
   two, the leading is tightened so it reads as deliberate. */
.mpanel__body--rail { grid-template-columns: 306px minmax(0, 1fr); gap: 22px; }
.crail { padding-right: 20px; }
.crail__link { grid-template-columns: 28px minmax(0, 1fr) 13px; gap: 9px; padding: 10px 12px; }
.crail__icon { width: 28px; height: 28px; }
.crail__label { font-size: 11.5px; letter-spacing: .015em; line-height: 1.25; }
.crail__title { font-size: 22px; }
.crail__tagline { font-size: 13px; }
.crail__body { font-size: 13px; margin-bottom: 16px; }

/* The client's menu spans nearly the full viewport, which is how their rail and
   their four columns both fit. Constraining it to the 1380px content container
   forced a trade: a rail wide enough for its labels left the credential names
   wrapping 22 of 28. Let the panel breathe instead. */
.mpanel { max-width: min(1680px, 96vw); }

/* ===========================================================================
   Reading measure. Prose was running 92-98 characters a line against a
   readable 55-75, so every paragraph stretched the full 1300px container.
   Copy gets a measure; grids, cards and images keep the full width.
   ======================================================================== */
.cdoc .pg__p,
.cdoc .pg__item-text,
.cdoc .pg__card-text,
.cdoc .v2-lede {
  max-width: 68ch;
}
.cdoc .pg__checks:not(.pg__checks--two) li { max-width: 72ch; }

/* Section standfirsts sit centred under a centred heading. */
.cdoc .v2-head:not(.v2-head--left) .v2-lede { margin-inline: auto; }

/* A heading needs air above it, not the same gap as a paragraph. */
.cdoc .pg__head {
  margin-top: 0;
  font-size: 21px;
  line-height: 1.3;
}
.cdoc .pg + .pg { margin-top: 40px; padding-top: 0; border-top: 0; }

/* The split column is 746px, so prose in it still ran ~95 characters. It needs
   the same measure as everything else — the column alone is not a constraint. */
.cdoc .pg__split-copy .pg__p,
.cdoc .pg__split-copy .pg__checks li { max-width: 68ch; }

/* --- Document pages reuse the certification page's components -------------
   The skills band and learn panel were built to sit inside their own section
   wrappers on the certification page; on the document pages they appear as
   groups, so they need their own spacing and ground. */
.cdoc .clearn { margin-bottom: 0; }
.cdoc .clearn + .clearn,
.cdoc .clearn + .cglance,
.cdoc .cglance + .clearn,
.cdoc .cglance + .cglance,
.cdoc .cskills__card + *,
.cdoc * + .cskills__card { margin-top: 34px; }

/* The band supplies its own dark ground when used standalone. */
.cdoc .cskills__card {
  background: linear-gradient(120deg, #0b1d42 0%, #16295e 55%, #1b2f6b 100%);
  border-radius: 16px;
  padding: 30px clamp(20px, 3vw, 36px) 34px;
}
.cdoc .cskills__title { color: #fff; }
.cdoc .cskills__lede { color: rgba(255, 255, 255, .78); }

/* A dark section band already has a dark ground, so the panel inverts. */
.cdoc__sec--dark .clearn {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .16);
}
.cdoc__sec--dark .clearn__title,
.cdoc__sec--dark .cglance__copy .v2-h2 { color: #fff; }
.cdoc__sec--dark .clearn__lede,
.cdoc__sec--dark .cglance__lede,
.cdoc__sec--dark .cglance__list li { color: rgba(255, 255, 255, .84); }
.cdoc__sec--dark .clearn__card {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
}
.cdoc__sec--dark .clearn__card-title { color: #fff; }
.cdoc__sec--dark .clearn__card-text,
.cdoc__sec--dark .clearn__card-list li { color: rgba(255, 255, 255, .8); }
.cdoc__sec--dark .clearn__icon {
  background: rgba(255, 255, 255, .12);
  color: var(--gold-soft, #f0c257);
}
.cdoc__sec--dark .cglance__card {
  background: rgba(255, 255, 255, .06);
  border-color: rgba(255, 255, 255, .16);
}
.cdoc__sec--dark .cglance__card-title { color: #fff; }
.cdoc__sec--dark .cglance__fact-v { color: rgba(255, 255, 255, .86); }
.cdoc__sec--dark .cskills__card { background: rgba(255, 255, 255, .05); }

/* Keep the reading measure inside the reused components. */
.cdoc .cglance__lede { max-width: 68ch; }
.cdoc .clearn__lede { max-width: 60ch; margin-inline: auto; }

/* ===========================================================================
   Card grid on the document pages.
   The certification page packs five short module blurbs per row. The document
   pages put the client's full item lists in the same cards, which produced
   240px columns 1,140-1,836px tall — an 8:1 tower. Cards need real width, and
   long lists inside a wide card should run in columns rather than one strip.
   ======================================================================== */
.cdoc .clearn__grid {
  grid-template-columns: repeat(auto-fit, minmax(330px, 1fr));
  gap: 18px;
  align-items: start;
}
.cdoc .clearn__card { padding: 22px 22px 24px; }

/* A long list inside a wide card flows into columns instead of a tall strip. */
.cdoc .clearn__card-list {
  columns: 2;
  column-gap: 22px;
}
.cdoc .clearn__card-list li { break-inside: avoid; }

/* Cards with only a few items stay single column so they do not look sparse. */
.cdoc .clearn__card-list:has(li:nth-child(-n+4):last-child) { columns: 1; }

@media (max-width: 900px) {
  .cdoc .clearn__grid { grid-template-columns: 1fr; }
  .cdoc .clearn__card-list { columns: 1; }
}

/* ===========================================================================
   Three faults visible on the About page.
   ======================================================================== */

/* 1. A centred group heading left its stage pills hanging on the left. */
.cdoc .pg--stageflow { text-align: center; }
.cdoc .pg--stageflow .pg__flow { justify-content: center; }
.cdoc .pg--stageflow .pg__p { margin-inline: auto; text-align: center; }
.cdoc .pg--stageflow .cglance__list { text-align: left; max-width: 68ch; margin-inline: auto; }

/* 2. Where the copy is short, the picture column stretched and left a void
      beside it. Top-align the pair and let the image find its own height. */
.cdoc .cglance { align-items: start; }
.cdoc .cglance .pg__figure img { aspect-ratio: 5 / 4; }
.cdoc .cglance__copy > *:last-child { margin-bottom: 0; }

/* 3. Give the section its closing breath rather than butting the next one. */
.cdoc .pg + .pg { margin-top: 44px; }
.cdoc .clearn + .pg--stageflow,
.cdoc .pg--stageflow + .clearn { margin-top: 50px; }

/* Where the copy is only a few lines, a 5:4 picture stood up to 640px taller
   than the text beside it and left a hole. Cap the frame and let the photo
   crop instead of stretching the row. */
.cdoc .cglance .pg__figure img {
  aspect-ratio: auto;
  height: clamp(240px, 26vw, 380px);
  object-fit: cover;
}

/* "Join IBACTP®" has three lines of copy against a 374px picture, so it still
   left a 242px hole. Let the frame follow the copy it sits beside, with a
   floor so it never becomes a sliver. */
.cdoc .cglance .pg__figure { align-self: stretch; }
.cdoc .cglance .pg__figure img { height: 100%; min-height: 220px; max-height: 380px; }

/* ===========================================================================
   Patterns taken from the client's reference set.

   Two shapes recur across nearly every sheet they have sent: a numbered step
   row joined by a connector, and a white card wearing a coloured tab that
   carries its number and icon. Both are built here in a six-colour rotation,
   as the references show, with white card bodies so long copy stays readable.
   ======================================================================== */
.cdoc {
  --k1: #1d6fd9; --k2: #6d28d9; --k3: #0d9488;
  --k4: #ea580c; --k5: #0891b2; --k6: #c2417b;
}

/* ---- Numbered step row with a connector (ref: "Choose a service") ---- */
.nsteps {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
  gap: 0;
  margin: 22px 0 0;
  padding: 0;
  list-style: none;
  counter-reset: none;
}
.nsteps__item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 0 14px;
  text-align: center;
}
/* dashed connector between the circles, never after the last */
.nsteps__item::after {
  content: "";
  position: absolute;
  top: 27px;
  left: calc(50% + 34px);
  right: calc(-50% + 34px);
  border-top: 2px dashed color-mix(in srgb, var(--k) 45%, transparent);
}
.nsteps__item:last-child::after { display: none; }

.nsteps__num {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 54px;
  height: 54px;
  flex: none;
  border-radius: 50%;
  background: #fff;
  border: 2px solid color-mix(in srgb, var(--k) 55%, transparent);
  color: var(--k);
  font: 800 17px/1 var(--font-display, inherit);
  box-shadow: 0 8px 20px -10px color-mix(in srgb, var(--k) 60%, transparent);
}
.nsteps__item:first-child .nsteps__num { background: var(--k); color: #fff; border-color: var(--k); }
.nsteps__bar {
  font: 700 13.5px/1.4 var(--font-display, inherit);
  letter-spacing: .01em;
  color: var(--navy-900, #0b1b3d);
  text-transform: none;
}

/* ---- Card with a coloured tab (ref: "STEP 01" / "OPTION 01") ---- */
.ncard {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line, #e3e8ef);
  border-top: 0;
  border-radius: 14px;
  background: #fff;
  overflow: hidden;
  transition: box-shadow .16s, transform .16s;
}
.ncard:hover {
  box-shadow: 0 20px 44px -30px rgba(12, 26, 52, .5);
  transform: translateY(-2px);
}
.ncard__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 11px 18px;
  background: var(--k);
}
.ncard__num {
  font: 800 15px/1 var(--font-display, inherit);
  letter-spacing: .06em;
  color: #fff;
}
.ncard__icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
  color: #fff;
}
.ncard__icon svg { width: 17px; height: 17px; fill: currentColor; }
.ncard__body { padding: 18px 20px 22px; }
.ncard__title {
  margin: 0 0 8px;
  font: 700 15.5px/1.35 var(--font-display, inherit);
  color: var(--k);
}
.ncard__text {
  margin: 0 0 12px;
  font-size: 14px;
  line-height: 1.68;
  color: var(--ink-soft, #4a5568);
}
.ncard__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; columns: 2; column-gap: 22px; }
.ncard__list li {
  position: relative;
  padding-left: 15px;
  font-size: 14.56px;
  line-height: 1.55;
  color: var(--ink-soft, #4a5568);
  break-inside: avoid;
}
.ncard__list li::before {
  content: "";
  position: absolute; left: 0; top: 8px;
  width: 6px; height: 6px; border-radius: 50%;
  background: color-mix(in srgb, var(--k) 65%, transparent);
}
.ncard__list:has(li:nth-child(-n+4):last-child) { columns: 1; }

/* Dark bands invert both patterns. */
.cdoc__sec--dark .ncard { background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16); }
.cdoc__sec--dark .ncard__title { color: #fff; }
.cdoc__sec--dark .ncard__text, .cdoc__sec--dark .ncard__list li { color: rgba(255, 255, 255, .82); }
.cdoc__sec--dark .nsteps__num { background: rgba(255, 255, 255, .1); color: #fff; }
.cdoc__sec--dark .nsteps__bar { color: #fff; }

@media (max-width: 760px) {
  .nsteps { grid-template-columns: 1fr; gap: 18px; }
  .nsteps__item::after { display: none; }
  .ncard__list { columns: 1; }
}

/* Card rows were stair-stepping because each card sized to its own content,
   leaving holes beside the short ones. Stretch them to the row. */
.cdoc .clearn__grid { align-items: stretch; }
.cdoc .ncard { height: 100%; }
.cdoc .ncard__body { display: flex; flex-direction: column; flex: 1; }
.cdoc .ncard__list { margin-top: auto; padding-top: 4px; }

/* Leftover copy a design did not consume, kept in the page's own language. */
.pg--rest { margin-top: 26px; }
.pg--rest .pg__p { max-width: 74ch; }
.cglance__list--cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 10px 30px;
}
.cdoc__sec--dark .pg--rest .pg__p { color: rgba(255,255,255,.82); }

/* A heading with no copy under it is a label, not a card. Chips keep the run
   readable and stop 45 empty boxes from padding the page out. */
.cchips {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0 0 22px;
  padding: 0;
  list-style: none;
}
.cchip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 10px 16px;
  border: 1px solid color-mix(in srgb, var(--ink, #0b1f3f) 12%, transparent);
  border-radius: 999px;
  background: #fff;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.25;
  color: var(--ink, #0b1f3f);
  box-shadow: 0 1px 2px rgba(8, 33, 74, .05);
}
.cchip__i { width: 16px; height: 16px; flex: none; color: var(--gold, #b8892b); }
.cdoc__sec--dark .cchip {
  background: rgba(255, 255, 255, .07);
  border-color: rgba(255, 255, 255, .18);
  color: #fff;
}
.cdoc__sec--dark .cchip__i { color: var(--gold, #d9a441); }

/* Comfortable measure. Inter's "0" is 0.63em, so 1ch holds more than one
   average character — 74ch was really running about 93 characters a line.
   These caps were measured against the rendered text, not guessed. */
.pg__p, .cglance__lede, .pg--rest .pg__p, .clearn__lede { max-width: 58ch; }
/* Card copy is normally narrow, but a card alone on its row stretched to
   1089px and ran to 161 characters. */
.ncard__text, .clearn__card-text { max-width: 62ch; }

/* The client's specimen record: label and value, written "Effective Date[Date]". */
.cspec {
  margin: 0 0 26px;
  border: 1px solid color-mix(in srgb, var(--ink, #0b1f3f) 12%, transparent);
  border-radius: 14px;
  overflow: hidden;
  background: #fff;
}
.cspec__row { display: grid; grid-template-columns: minmax(220px, 320px) 1fr; }
.cspec__row + .cspec__row { border-top: 1px solid color-mix(in srgb, var(--ink, #0b1f3f) 9%, transparent); }
.cspec__k {
  margin: 0; padding: 13px 18px; font-size: 14px; font-weight: 650;
  color: var(--ink, #0b1f3f);
  background: color-mix(in srgb, var(--ink, #0b1f3f) 4%, transparent);
}
.cspec__v { margin: 0; padding: 13px 18px; font-size: 14px; color: color-mix(in srgb, var(--ink, #0b1f3f) 74%, transparent); }
@media (max-width: 620px) { .cspec__row { grid-template-columns: 1fr; } }

.cdoc__sec--dark .cspec { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); }
.cdoc__sec--dark .cspec__row + .cspec__row { border-top-color: rgba(255,255,255,.13); }
.cdoc__sec--dark .cspec__k { background: rgba(255,255,255,.05); color: #fff; }
.cdoc__sec--dark .cspec__v { color: rgba(255,255,255,.8); }

/* The partnership inquiry form, specified field by field in the document. */
.cform {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px 22px; margin: 0 0 26px; padding: 26px;
  border: 1px solid color-mix(in srgb, var(--ink, #0b1f3f) 12%, transparent);
  border-radius: 16px; background: #fff;
}
.cform__row { display: flex; flex-direction: column; gap: 7px; }
.cform__row--wide { grid-column: 1 / -1; }
.cform__label { font-size: 13px; font-weight: 650; color: var(--ink, #0b1f3f); }
.cform__req { color: #c0392b; margin-left: 3px; }
.cform__control {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 14.5px;
  color: var(--ink, #0b1f3f); background: #fff;
  border: 1px solid color-mix(in srgb, var(--ink, #0b1f3f) 18%, transparent);
  border-radius: 9px;
}
.cform__control:focus-visible { outline: 2px solid var(--gold, #b8892b); outline-offset: 1px; border-color: transparent; }
.cform__note { margin: 0; font-size: 13.5px; color: color-mix(in srgb, var(--ink, #0b1f3f) 60%, transparent); }
.cdoc__sec--dark .cform { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.16); }
.cdoc__sec--dark .cform__label { color: #fff; }
.cdoc__sec--dark .cform__note { color: rgba(255,255,255,.7); }

/* One card in a row held a long list and grew to 1664px tall against a 409px
   width; because the row is equal-height, every card beside it grew too.
   These span the grid and set their list in columns. */
.ncard--wide { grid-column: 1 / -1; }
/* These lists are `display: grid`, and multi-column properties do not apply to
   a grid container — the old `columns: 4 210px` was inert, so every item ran the
   full 1120px of a spanning card (129 characters a line). Express the same
   intent as grid tracks, which is the model that actually applies here. */
.ncard--wide .ncard__list {
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  column-gap: 32px;
}
.ncard--wide .ncard__list li { break-inside: avoid; }
@media (max-width: 700px) { .ncard--wide .ncard__list { grid-template-columns: 1fr; } }

/* The certifications mega panel is laid out wider than the viewport while
   closed, which pushed the document 7px past the window. `clip` trims it
   without breaking the sticky header the way `hidden` would. */
html, body { overflow-x: clip; }

/* ==========================================================================
   About Us — built to the approved full-page mockup.
   Palette and metrics taken from the design file itself:
   ink #0b1f3f, gold #b8892b, light gold #d8a846, tint #f6f8fb.
   Everything is scoped under .ab-page so it cannot leak into other pages.
   ========================================================================== */
/* The palette is also published at the root.
   The rules below stay scoped to .ab-page, but components built on them —
   .ab-btn above all — are rendered by shared partials on pages that use a
   different wrapper. Scoped only to .ab-page, `background: var(--ab-gold)`
   resolved to nothing on those pages and white button text landed on a white
   background: 500+ invisible buttons across 50 pages. Custom properties apply
   no styling by themselves, so publishing them here changes nothing that
   already worked. */
:root {
  --ab-ink: #0b1f3f;
  --ab-gold: #b8892b;
  --ab-goldl: #d8a846;
  --ab-tint: #f6f8fb;
  --ab-grey: #64748b;
  --ab-slate: #475569;
  --ab-line: #e4e9f2;
}

.ab-page {
  --ab-ink: #0b1f3f;
  --ab-gold: #b8892b;
  --ab-goldl: #d8a846;
  --ab-tint: #f6f8fb;
  --ab-grey: #64748b;
  --ab-slate: #475569;
  --ab-line: #e4e9f2;
  font-family: Inter, system-ui, sans-serif;
  color: var(--ab-ink);
}
/* Wrapped in :where() so these resets carry no more weight than the single-class
   component rules below. Without it ".ab-page ul" (0,1,1) silently outranks
   ".ab-dims" (0,1,0) and every margin and padding set later is thrown away. */
.ab-page :where(p) { margin: 0; }
.ab-page :where(ul) { margin: 0; padding: 0; list-style: none; }

.ab-sec { padding: 74px 0; background: #fff; }
.ab-sec--tint { background: var(--ab-tint); }
.ab-sec--dark { background: var(--ab-ink); color: #fff; }
.ab-sec--flush { padding-top: 46px; }

/* ---------- section headings ---------- */
.ab-head { text-align: center; max-width: 830px; margin: 0 auto 40px; }
.ab-eyebrow {
  display: block; font-size: 13.92px; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--ab-gold); margin-bottom: 10px;
}
.ab-sec--dark .ab-eyebrow { color: var(--ab-goldl); }
.ab-h2 { font-size: 28px; font-weight: 800; letter-spacing: -.02em; margin: 0; }
.ab-sec--dark .ab-h2 { color: #fff; }
.ab-head .ab-rule { display: block; width: 56px; height: 3px; background: var(--ab-gold); margin: 13px auto 0; border-radius: 2px; }
.ab-sub { margin-top: 15px; font-size: 14.85px; color: var(--ab-grey); line-height: 1.65; }
.ab-sec--dark .ab-sub { color: #94a3b8; }

.ab-h3 { font-size: 26px; font-weight: 800; letter-spacing: -.02em; margin: 0 0 16px; }
.ab-h4 { font-size: 16px; font-weight: 800; margin: 0 0 12px; }

/* ---------- two-column split ---------- */
.ab-split { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; }
.ab-split--wide { grid-template-columns: 540px 1fr; }
.ab-split--flip > .ab-media { order: 2; }

/* ---------- photo montage ---------- */
.ab-media { position: relative; }
.ab-montage { position: relative; padding: 0 46px 74px 0; }
.ab-montage__main {
  display: block; width: 100%; height: auto; border-radius: 12px;
  box-shadow: 0 18px 44px rgba(11, 31, 63, .17);
}
.ab-montage__inset {
  position: absolute; right: 0; bottom: 18px; width: 58%; height: auto;
  border-radius: 10px; border: 5px solid #fff;
  box-shadow: 0 14px 34px rgba(11, 31, 63, .2);
}
.ab-montage__dots {
  position: absolute; top: 24px; right: 8px; width: 92px; height: 108px;
  background-image: radial-gradient(var(--ab-line) 1.6px, transparent 1.6px);
  background-size: 13px 13px; z-index: -1;
}
.ab-badge {
  position: absolute; left: 0; bottom: 42px; z-index: 2;
  background: var(--ab-ink); color: #fff; border-radius: 8px;
  padding: 11px 20px; box-shadow: 0 12px 28px rgba(11, 31, 63, .28);
}
.ab-badge span {
  display: block; font-size: 10.26px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ab-goldl); margin-bottom: 3px;
}
.ab-badge strong { font-size: 14.3px; font-weight: 800; letter-spacing: .02em; }

/* ---------- lead copy ---------- */
.ab-h1 { font-size: 32px; font-weight: 800; letter-spacing: -.025em; margin: 0 0 8px; }
.ab-kicker { font-size: 15.75px; font-weight: 700; color: #334155; margin: 0 0 20px; }
.ab-lede {
  border-left: 3px solid var(--ab-gold); padding: 2px 0 2px 18px;
  font-size: 15.75px; font-weight: 700; line-height: 1.6; margin: 0 0 20px;
}
.ab-p { font-size: 15.18px; line-height: 1.78; color: var(--ab-slate); margin: 0 0 20px; max-width: 62ch; }
.ab-sec--dark .ab-p { color: #cbd5e1; }

/* ---------- gold square bullet list ---------- */
.ab-ticks { display: grid; grid-template-columns: repeat(2, 1fr); gap: 11px 26px; margin: 0 0 24px; }
.ab-ticks li { position: relative; padding-left: 17px; font-size: 14.52px; font-weight: 700; line-height: 1.45; }
.ab-ticks li::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 7px; height: 7px; background: var(--ab-gold); border-radius: 1px;
}
.ab-ticks--one { grid-template-columns: 1fr; }

/* ---------- check list ---------- */
.ab-checks { display: grid; gap: 9px; }
.ab-checks--two { grid-template-columns: repeat(2, 1fr); gap: 9px 26px; }
.ab-checks--three { grid-template-columns: repeat(3, 1fr); gap: 9px 26px; }
.ab-checks li { position: relative; padding-left: 19px; font-size: 14.62px; line-height: 1.5; color: var(--ab-slate); }
.ab-checks li::before { content: "✓"; position: absolute; left: 0; top: 0; color: var(--ab-gold); font-weight: 700; font-size: 13.34px; }
.ab-sec--dark .ab-checks li { color: #cbd5e1; }
.ab-sec--dark .ab-checks li::before { color: var(--ab-goldl); }
.ab-dots li::before { content: "•"; font-size: 14.7px; top: -1px; }
.ab-stars li::before { content: "✦"; font-size: 11.34px; top: 1px; }

/* ---------- buttons ---------- */
.ab-btn {
  display: inline-flex; align-items: center; gap: 9px;
  background: var(--ab-gold); color: #fff; text-decoration: none;
  padding: 14px 24px; border-radius: 7px;
  font-size: 14.5px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  box-shadow: 0 8px 20px rgba(184, 137, 43, .26);
  transition: transform .16s ease, box-shadow .16s ease;
}
.ab-btn:hover { transform: translateY(-1px); box-shadow: 0 12px 26px rgba(184, 137, 43, .34); }
.ab-btn--ghost {
  background: transparent; border: 1.5px solid rgba(255, 255, 255, .55); box-shadow: none; color: #fff;
}
.ab-btn--ghost:hover { background: rgba(255, 255, 255, .1); box-shadow: none; }
.ab-btn--navy { background: var(--ab-ink); box-shadow: none; }

/* ---------- panels ---------- */
.ab-panel {
  background: #fff; border: 1px solid var(--ab-line); border-radius: 12px;
  padding: 30px 32px; margin-top: 44px;
}
.ab-panel--gold { border-top: 3px solid var(--ab-gold); }
.ab-panel--navy-top { border-top: 3px solid var(--ab-ink); }
.ab-panel--tint { background: var(--ab-tint); border-color: #e8edf5; }
.ab-panel__title { font-size: 16px; font-weight: 800; margin: 0 0 5px; }
.ab-panel__sub { font-size: 14.5px; color: var(--ab-grey); margin: 0 0 22px; }

.ab-strip {
  background: var(--ab-ink); color: #fff; border-radius: 10px;
  padding: 18px 24px; margin-top: 26px;
}
.ab-strip span {
  display: block; font-size: 12.76px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ab-goldl); margin-bottom: 7px;
}
.ab-strip p { font-size: 14.85px; font-weight: 700; line-height: 1.55; }

/* ---------- three-column labelled items ---------- */
.ab-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px 34px; }
.ab-item { position: relative; padding-left: 17px; }
.ab-item::before {
  content: ""; position: absolute; left: 0; top: 6px;
  width: 7px; height: 7px; border-radius: 50%; background: var(--ab-gold);
}
.ab-item strong { display: block; font-size: 14.3px; font-weight: 700; margin-bottom: 3px; }
.ab-item span { font-size: 13.46px; color: var(--ab-grey); line-height: 1.45; }

/* ---------- the six-stage journey rail ---------- */
.ab-stages { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; position: relative; }
.ab-stage {
  position: relative; background: #fff; border: 1px solid var(--ab-line);
  border-radius: 10px; padding: 24px 16px 20px; text-align: center;
}
.ab-stage__num {
  width: 34px; height: 34px; margin: 0 auto 13px; border-radius: 50%;
  display: grid; place-items: center; background: #fff;
  border: 2px solid var(--ab-ink); color: var(--ab-ink);
  font-size: 14.7px; font-weight: 800;
}
.ab-stage__t { font-size: 14.7px; font-weight: 700; margin: 0 0 6px; }
.ab-stage__d { font-size: 13.22px; color: var(--ab-grey); line-height: 1.5; }
.ab-stage__tag {
  display: block; margin-top: 13px; font-size: 12.76px; font-weight: 700; color: var(--ab-gold);
}
.ab-stage--last { background: var(--ab-ink); border-color: var(--ab-ink); color: #fff; }
.ab-stage--last .ab-stage__num { background: var(--ab-goldl); border-color: var(--ab-goldl); color: var(--ab-ink); }
.ab-stage--last .ab-stage__t { color: #fff; }
.ab-stage--last .ab-stage__d { color: #cbd5e1; }
.ab-stage--last .ab-stage__tag { color: var(--ab-goldl); }

/* ---------- generic card grid ---------- */
.ab-two { display: grid; grid-template-columns: repeat(2, 1fr); gap: 26px; }
.ab-card {
  background: #fff; border: 1px solid var(--ab-line); border-radius: 12px; padding: 28px 30px;
}
.ab-card--tint { background: var(--ab-tint); }
.ab-card__eyebrow {
  display: block; font-size: 12.76px; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ab-gold); margin-bottom: 5px;
}
.ab-card__t { font-size: 18px; font-weight: 800; margin: 0 0 12px; }
.ab-card__ico { width: 26px; height: 26px; color: var(--ab-gold); margin-bottom: 10px; display: block; }

.ab-prog {
  background: #fff; border: 1px solid var(--ab-line); border-radius: 7px;
  padding: 10px 14px; margin: 0 0 18px; font-size: 13.92px; font-weight: 600; color: var(--ab-slate);
}
.ab-prog b { font-weight: 700; color: var(--ab-ink); }
.ab-prog em { font-style: normal; color: var(--ab-gold); font-weight: 600; }

.ab-more {
  display: inline-block; margin-top: 16px; font-size: 14.5px; font-weight: 700;
  color: var(--ab-ink); text-decoration: none; border-bottom: 1.5px solid var(--ab-gold); padding-bottom: 2px;
}

.ab-quote {
  background: var(--ab-ink); border-radius: 9px; padding: 16px 20px; margin: 0 0 18px;
}
.ab-quote span {
  display: block; font-size: 11.34px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ab-goldl); margin-bottom: 7px;
}
.ab-quote p { font-size: 14.3px; font-style: italic; color: #fff; line-height: 1.55; }

.ab-note {
  background: var(--ab-tint); border-radius: 9px; padding: 15px 18px; margin-top: 18px;
}
.ab-note li { font-size: 14.15px; color: var(--ab-slate); line-height: 1.6; }
.ab-note li + li { margin-top: 5px; }
.ab-note em { display: block; margin-top: 8px; font-style: italic; font-weight: 600; color: var(--ab-gold); }

/* ---------- the six credentialing levels ---------- */
.ab-dims {
  background: #fff; border: 1px solid var(--ab-line); border-radius: 10px;
  padding: 16px 22px; margin-bottom: 26px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px;
}
.ab-dims li { font-size: 13.92px; color: var(--ab-grey); }
.ab-dims b { color: var(--ab-ink); font-weight: 800; }

.ab-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ab-level {
  background: #fff; border: 1px solid var(--ab-line); border-radius: 12px;
  padding: 28px 24px 24px; text-align: center;
}
.ab-level__num {
  width: 42px; height: 42px; margin: 0 auto 16px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ab-ink); color: #fff;
  font-size: 14.7px; font-weight: 800;
}
.ab-level__t { font-size: 17px; font-weight: 800; margin: 0 0 9px; }
.ab-level__d { font-size: 14.27px; color: var(--ab-grey); line-height: 1.6; }
.ab-level__hr { border: 0; border-top: 1px solid var(--ab-line); margin: 18px 0 14px; }
.ab-level__k { display: block; font-size: 13.34px; font-weight: 800; color: var(--ab-gold); margin-bottom: 5px; }
.ab-level__v { font-size: 14.15px; color: var(--ab-slate); }
.ab-level .ab-more { margin-top: 15px; }
.ab-level--dark { background: var(--ab-ink); border-color: var(--ab-ink); }
.ab-level--dark .ab-level__num { background: var(--ab-goldl); color: var(--ab-ink); }
.ab-level--dark .ab-level__t { color: #fff; }
.ab-level--dark .ab-level__d, .ab-level--dark .ab-level__v { color: #cbd5e1; }
.ab-level--dark .ab-level__hr { border-top-color: rgba(255, 255, 255, .16); }
.ab-level--dark .ab-level__k { color: var(--ab-goldl); }
.ab-level--dark .ab-more { color: var(--ab-goldl); border-bottom-color: var(--ab-goldl); }

/* ---------- the twelve objectives ---------- */
.ab-objs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ab-obj {
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 10px; padding: 20px;
}
.ab-obj__chip {
  display: inline-block; background: rgba(216, 168, 70, .17); color: var(--ab-goldl);
  font-size: 11.34px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 4px; margin-bottom: 12px;
}
.ab-obj__t { font-size: 14.7px; font-weight: 700; color: #fff; margin: 0 0 7px; }
.ab-obj__d { font-size: 13.69px; color: #94a3b8; line-height: 1.55; }

.ab-dark-card {
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 12px; padding: 28px 30px;
}
.ab-dark-card h3 { font-size: 17px; font-weight: 800; color: #fff; margin: 0 0 10px; }

/* ---------- the five divisions ---------- */
.ab-divs { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.ab-div {
  position: relative; background: #fff; border: 1px solid var(--ab-line);
  border-radius: 10px; padding: 24px 20px 20px; overflow: hidden;
}
.ab-div::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c, var(--ab-ink));
}
.ab-div__n { display: block; font-size: 12.76px; font-weight: 800; letter-spacing: .1em; color: var(--ab-gold); margin-bottom: 7px; }
.ab-div__t { font-size: 16px; font-weight: 800; margin: 0 0 3px; }
.ab-div__s { font-size: 13.46px; color: var(--ab-grey); }
.ab-div__hr { border: 0; border-top: 1px solid var(--ab-line); margin: 15px 0 13px; }
.ab-div__k { display: block; font-size: 13.92px; font-weight: 700; margin-bottom: 9px; }
.ab-div__list li { font-size: 13.69px; color: var(--ab-slate); line-height: 1.75; }
.ab-div__pill {
  display: block; margin-top: 16px; background: var(--ab-tint); border-radius: 6px;
  padding: 9px 10px; text-align: center; font-size: 12.76px; font-weight: 700; color: var(--ab-gold);
}

/* ---------- the ISO alignment matrix ---------- */
.ab-matrix { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 34px; }
.ab-mrow { display: grid; grid-template-columns: 190px 1fr; align-items: center; gap: 14px; padding: 11px 12px; border-radius: 6px; }
.ab-mrow:nth-child(odd) { background: var(--ab-tint); }
.ab-mrow dt { font-size: 13.92px; font-weight: 700; margin: 0; }
.ab-mrow dd { font-size: 13.34px; color: var(--ab-slate); margin: 0; }

/* ---------- board of trustees ---------- */
.ab-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px 20px; }
.ab-bitem {
  position: relative; border: 1px solid var(--ab-line); border-radius: 7px;
  padding: 12px 16px 12px 30px; font-size: 14.38px; font-weight: 600; background: #fff;
}
.ab-bitem::before {
  content: ""; position: absolute; left: 14px; top: 50%; transform: translateY(-50%);
  width: 6px; height: 6px; border-radius: 50%; background: var(--ab-gold);
}
.ab-bitem--cta {
  background: var(--ab-ink); border-color: var(--ab-ink); color: #fff;
  padding-left: 16px; text-align: center; text-decoration: none; font-weight: 700;
  display: grid; place-items: center;
}
.ab-bitem--cta::before { display: none; }

/* ---------- audience cards + promise ---------- */
.ab-four { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; margin-top: 26px; }
.ab-aud { background: #fff; border: 1px solid var(--ab-line); border-radius: 11px; padding: 22px 22px 24px; }
.ab-aud__t { font-size: 15.23px; font-weight: 800; margin: 0 0 9px; }
.ab-aud__d { font-size: 14.15px; color: var(--ab-grey); line-height: 1.62; }

.ab-promise {
  background: var(--ab-ink); border-radius: 14px; padding: 44px 40px; margin-top: 34px; text-align: center;
}
.ab-promise .ab-eyebrow { color: var(--ab-goldl); }
.ab-promise__q { font-size: 24px; font-weight: 800; color: #fff; margin: 0 0 14px; letter-spacing: -.01em; }
.ab-promise p { font-size: 14.85px; color: #cbd5e1; line-height: 1.7; }
.ab-promise__cta { display: flex; gap: 14px; justify-content: center; margin-top: 26px; flex-wrap: wrap; }

/* ---------- responsive ---------- */
@media (max-width: 1180px) {
  .ab-stages { grid-template-columns: repeat(3, 1fr); }
  .ab-divs   { grid-template-columns: repeat(3, 1fr); }
  .ab-objs   { grid-template-columns: repeat(2, 1fr); }
  .ab-levels { grid-template-columns: repeat(2, 1fr); }
  .ab-four   { grid-template-columns: repeat(2, 1fr); }
  .ab-dims   { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .ab-split, .ab-split--wide { grid-template-columns: 1fr; gap: 38px; }
  .ab-split--flip > .ab-media { order: 0; }
  .ab-two, .ab-grid3, .ab-board, .ab-matrix { grid-template-columns: 1fr; }
  .ab-checks--two, .ab-checks--three { grid-template-columns: 1fr; }
  .ab-sec { padding: 54px 0; }
}
@media (max-width: 640px) {
  .ab-stages, .ab-divs, .ab-objs, .ab-levels, .ab-four { grid-template-columns: 1fr; }
  .ab-ticks { grid-template-columns: 1fr; }
  .ab-dims { grid-template-columns: 1fr; }
  .ab-h1 { font-size: 26px; }
  .ab-h2, .ab-h3 { font-size: 22px; }
  .ab-mrow { grid-template-columns: 1fr; gap: 3px; }
  .ab-montage { padding: 0 0 54px; }
  .ab-montage__inset { width: 52%; }
}

/* ==========================================================================
   Components introduced by the Accreditation, Training Partners and
   Corporate Training mockups. Same tokens as the About page.
   ========================================================================== */

/* the "Approach: A → B → C" strip */
.ab-approach {
  background: var(--ab-tint); border: 1px solid var(--ab-line); border-radius: 8px;
  padding: 13px 18px; margin: 0 0 22px; font-size: 14.5px; color: var(--ab-slate);
}
.ab-approach b { color: var(--ab-ink); font-weight: 700; }
.ab-approach em { font-style: normal; color: var(--ab-gold); font-weight: 600; }

/* the three standards cards, each with a round badge and a coloured top bar */
.ab-stds { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ab-std {
  position: relative; background: #fff; border: 1px solid var(--ab-line);
  border-radius: 12px; padding: 28px 26px 24px; overflow: hidden;
  display: flex; flex-direction: column;
}
.ab-std::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c, var(--ab-ink)); }
.ab-std__head { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.ab-std__badge {
  width: 44px; height: 44px; flex: none; border-radius: 50%;
  display: grid; place-items: center; background: var(--c, var(--ab-ink));
  color: #fff; font-size: 12.76px; font-weight: 800; letter-spacing: .01em;
}
.ab-std__eyebrow {
  display: block; font-size: 11.34px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ab-gold); margin-bottom: 3px;
}
.ab-std__t { font-size: 16px; font-weight: 800; margin: 0; line-height: 1.3; }
.ab-std__foot {
  margin-top: auto; background: var(--ab-tint); border-radius: 7px;
  padding: 12px 14px; text-align: center; font-size: 13.92px; font-weight: 700; color: var(--ab-ink);
}

/* the seven-phase accreditation roadmap */
.ab-road { position: relative; display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; padding-top: 6px; }
.ab-road::before {
  content: ""; position: absolute; top: 22px; left: 7%; right: 7%;
  border-top: 1.5px dashed var(--ab-gold); opacity: .55;
}
.ab-phase { position: relative; text-align: center; }
.ab-phase__n {
  width: 32px; height: 32px; margin: 0 auto 12px; border-radius: 50%;
  display: grid; place-items: center; background: #fff;
  border: 1.5px solid var(--ab-ink); color: var(--ab-ink);
  font-size: 14.5px; font-weight: 800; position: relative; z-index: 1;
}
.ab-phase--on .ab-phase__n { background: var(--ab-ink); color: #fff; }
.ab-phase__t { font-size: 14.5px; font-weight: 700; margin: 0 0 3px; }
.ab-phase__s { font-size: 12.76px; color: var(--ab-grey); }

/* the five accreditation status badges, on navy */
.ab-status { display: grid; grid-template-columns: repeat(5, 1fr); gap: 20px; }
.ab-stat {
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 11px; padding: 22px 20px 24px;
}
.ab-stat__pill {
  display: inline-block; border-radius: 5px; padding: 5px 11px; margin-bottom: 14px;
  font-size: 10.8px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase; color: #fff;
}
.ab-pill--green  { background: #10b981; }
.ab-pill--blue   { background: #3b6ef6; }
.ab-pill--gold   { background: var(--ab-gold); }
.ab-pill--purple { background: #7c6bf0; }
.ab-pill--teal   { background: #0e7490; }
.ab-stat__t { font-size: 15.23px; font-weight: 800; color: #fff; margin: 0 0 8px; }
.ab-stat__d { font-size: 13.69px; color: #94a3b8; line-height: 1.6; }

/* a table on the dark band */
.ab-dpanel {
  background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 12px; padding: 28px 30px; margin-top: 34px;
}
.ab-dmatrix { display: grid; gap: 4px; margin-top: 18px; }
.ab-dmatrix__r { display: grid; grid-template-columns: 400px 1fr; gap: 20px; padding: 12px 16px; border-radius: 6px; background: rgba(255, 255, 255, .045); }
.ab-dmatrix__r--h { background: rgba(255, 255, 255, .09); }
.ab-dmatrix__r--h dt, .ab-dmatrix__r--h dd { color: var(--ab-goldl); font-weight: 700; font-size: 13.34px; }
.ab-dmatrix dt { margin: 0; font-size: 13.92px; font-weight: 700; color: #fff; }
.ab-dmatrix dd { margin: 0; font-size: 13.69px; color: #cbd5e1; }

/* the public accreditation record display */
.ab-rec { display: grid; gap: 9px; margin: 0 0 18px; }
.ab-rec div { font-size: 14.62px; }
.ab-rec b { font-weight: 700; color: var(--ab-ink); }
.ab-rec span { color: var(--ab-grey); }
.ab-rec .ab-on { color: #0f9d58; font-weight: 800; }

/* the "does NOT constitute" list */
.ab-nots { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px 26px; }
.ab-nots li { position: relative; padding-left: 19px; font-size: 14.38px; color: #c0392b; line-height: 1.5; }
.ab-nots li::before { content: "✗"; position: absolute; left: 0; top: 0; font-weight: 700; }

/* a row of verification links on navy */
.ab-links { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 26px; margin-top: 16px; }
.ab-links a {
  position: relative; padding-left: 20px; font-size: 14.38px; color: #cbd5e1;
  text-decoration: none; line-height: 1.5;
}
.ab-links a::before { content: "✓"; position: absolute; left: 0; color: var(--ab-goldl); font-weight: 700; }
.ab-links a:hover { color: #fff; text-decoration: underline; }

@media (max-width: 1180px) {
  .ab-stds   { grid-template-columns: 1fr; }
  .ab-status { grid-template-columns: repeat(2, 1fr); }
  .ab-road   { grid-template-columns: repeat(4, 1fr); gap: 22px 10px; }
  .ab-road::before { display: none; }
  .ab-links  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px)  { .ab-nots { grid-template-columns: 1fr; } .ab-dmatrix__r { grid-template-columns: 1fr; gap: 4px; } }
@media (max-width: 640px)  { .ab-status, .ab-road, .ab-links { grid-template-columns: 1fr; } }

/* ---------- directory search / filter panel ---------- */
.ab-filter { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin-bottom: 18px; }
.ab-field { display: flex; flex-direction: column; gap: 7px; }
.ab-field > span { font-size: 14.5px; font-weight: 700; color: var(--ab-ink); }
.ab-field select, .ab-field input {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 14.85px; color: var(--ab-slate);
  background: #fff; border: 1px solid var(--ab-line); border-radius: 7px;
}
.ab-field select:focus-visible, .ab-field input:focus-visible { outline: 2px solid var(--ab-gold); outline-offset: 1px; }
.ab-formats { font-size: 13.92px; color: var(--ab-grey); margin-bottom: 20px; }
.ab-formats b { color: var(--ab-ink); font-weight: 700; }

/* ---------- a light table with a navy header ---------- */
.ab-table { width: 100%; border-collapse: separate; border-spacing: 0; margin-top: 18px; }
.ab-table th {
  background: var(--ab-ink); color: var(--ab-goldl); text-align: left;
  font-size: 13.34px; font-weight: 700; padding: 12px 16px;
}
.ab-table th:first-child { border-radius: 7px 0 0 7px; }
.ab-table th:last-child  { border-radius: 0 7px 7px 0; }
.ab-table td { padding: 12px 16px; font-size: 14.27px; color: var(--ab-slate); border-bottom: 1px solid var(--ab-line); }
.ab-table td:first-child { font-weight: 700; color: var(--ab-ink); }
.ab-table tbody tr:nth-child(odd) td { background: var(--ab-tint); }
.ab-table .ab-hl { color: var(--ab-gold); font-weight: 700; }

/* ---------- a warning notice ---------- */
.ab-warn {
  background: #fdf2f2; border: 1px solid #f5c6c6; border-radius: 8px;
  padding: 13px 16px; margin: 0 0 16px; text-align: center;
  font-size: 14.5px; font-weight: 800; color: #c0392b; letter-spacing: .02em;
}

/* ---------- the dark application form ---------- */
.ab-dform { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px; }
.ab-dsec {
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .13);
  border-radius: 11px; padding: 24px 26px;
}
.ab-dsec--wide { grid-column: 1 / -1; }
.ab-dsec__t {
  display: block; font-size: 13.34px; font-weight: 800; letter-spacing: .07em;
  text-transform: uppercase; color: var(--ab-goldl); margin-bottom: 18px;
}
.ab-dgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 15px 20px; }
.ab-dgrid--four { grid-template-columns: repeat(4, 1fr); }
.ab-dfield { display: flex; flex-direction: column; gap: 6px; }
.ab-dfield > span { font-size: 13.92px; color: #cbd5e1; }
.ab-dfield input, .ab-dfield select {
  width: 100%; padding: 10px 13px; font: inherit; font-size: 14.5px; color: #fff;
  background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .16); border-radius: 7px;
}
.ab-dfield input::placeholder { color: #7d8ba4; }
.ab-dfield input:focus-visible, .ab-dfield select:focus-visible { outline: 2px solid var(--ab-goldl); outline-offset: 1px; }
.ab-dfull { grid-column: 1 / -1; }
.ab-dnote { font-size: 13.92px; color: #94a3b8; line-height: 1.7; }
.ab-dnote b { color: #fff; font-weight: 700; }
.ab-dnote em { font-style: normal; color: var(--ab-goldl); font-weight: 700; }
.ab-dlist li { font-size: 13.92px; color: #cbd5e1; line-height: 1.85; }
.ab-upload {
  display: block; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 7px; padding: 11px 14px; margin-bottom: 9px;
  font-size: 13.92px; color: var(--ab-goldl);
}
.ab-confirm {
  border: 1px solid var(--ab-gold); border-radius: 11px; padding: 20px 24px; margin-top: 24px;
}
.ab-confirm span {
  display: block; font-size: 12.76px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ab-goldl); margin-bottom: 9px;
}
.ab-confirm p { font-size: 14.5px; color: #cbd5e1; line-height: 1.7; font-style: italic; }
.ab-submit { display: flex; justify-content: center; margin-top: 26px; }

/* ---------- partner resource columns ---------- */
.ab-four-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }

@media (max-width: 1180px) {
  .ab-filter, .ab-four-cards { grid-template-columns: repeat(2, 1fr); }
  .ab-dgrid--four { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 900px) {
  .ab-dform { grid-template-columns: 1fr; }
  .ab-table { display: block; overflow-x: auto; }
}
@media (max-width: 640px) {
  .ab-filter, .ab-four-cards, .ab-dgrid, .ab-dgrid--four { grid-template-columns: 1fr; }
}

/* ---------- academy phase cards on the dark band ---------- */
.ab-phases { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.ab-pcard {
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px; padding: 20px;
}
.ab-pcard__n {
  display: block; font-size: 12.76px; font-weight: 800; letter-spacing: .06em;
  color: var(--ab-goldl); margin-bottom: 8px;
}
.ab-pcard__t { font-size: 14.85px; font-weight: 700; color: #fff; margin: 0 0 8px; }
.ab-pcard__d { font-size: 13.46px; color: #94a3b8; line-height: 1.6; }

/* a four-column table on the dark band */
.ab-dmatrix--4 .ab-dmatrix__r { grid-template-columns: 200px 220px 1fr 150px; }
.ab-dmatrix--4 .ab-dmatrix__r dd + dd { color: #94a3b8; }
.ab-dgold { color: var(--ab-goldl); font-weight: 700; }

/* a card whose top edge carries the accent, without a round badge */
.ab-topcard {
  position: relative; background: var(--ab-tint); border: 1px solid var(--ab-line);
  border-radius: 12px; padding: 28px 30px; overflow: hidden;
}
.ab-topcard::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; background: var(--c, var(--ab-ink)); }
.ab-example {
  background: #fff; border: 1px solid var(--ab-line); border-radius: 9px;
  padding: 18px 20px; margin-top: 16px;
}
.ab-example h4 { font-size: 14.3px; font-weight: 800; margin: 0 0 12px; }
.ab-pairs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px 24px; }
.ab-pairs li { font-size: 13.92px; color: var(--ab-grey); line-height: 1.5; }
.ab-pairs b { color: var(--ab-ink); font-weight: 600; }
.ab-pairs .ab-hl { color: var(--ab-gold); font-weight: 700; }

.ab-model {
  background: rgba(255, 255, 255, .05); border-radius: 9px; padding: 15px 20px; margin-top: 22px;
  text-align: center; font-size: 14.5px; color: #cbd5e1;
}
.ab-model em { font-style: normal; color: var(--ab-goldl); font-weight: 600; }

@media (max-width: 1180px) { .ab-phases { grid-template-columns: repeat(2, 1fr); } .ab-dmatrix--4 .ab-dmatrix__r { grid-template-columns: 1fr; } }
@media (max-width: 640px)  { .ab-phases, .ab-pairs { grid-template-columns: 1fr; } }

/* ==========================================================================
   The Authorized Training Partner application — a real form on white.
   Every control is a genuine input: selects, radios, checkboxes and file
   pickers, rather than the mockup's bracketed placeholder text.
   ========================================================================== */
.ab-form { max-width: 1120px; margin: 0 auto; }
.ab-fsec {
  background: #fff; border: 1px solid var(--ab-line); border-radius: 14px;
  padding: 30px 34px; margin-bottom: 22px;
}
.ab-fsec > legend { padding: 0; width: 100%; }
.ab-fsec__head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 22px; }
.ab-fsec__n {
  flex: none; width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ab-ink); color: #fff;
  font-size: 13.92px; font-weight: 800;
}
/* These live inside a <legend>, so they must be blocks to stack. */
.ab-fsec__t { display: block; font-size: 16px; font-weight: 800; color: var(--ab-ink); margin: 0; }
.ab-fsec__s { display: block; font-size: 14.15px; color: var(--ab-grey); margin: 4px 0 0; line-height: 1.5; }
.ab-fsec__head { align-items: flex-start; }

.ab-fgrid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px 24px; }
.ab-fgrid--3 { grid-template-columns: repeat(3, 1fr); }
.ab-fgrid--4 { grid-template-columns: repeat(4, 1fr); }
.ab-fwide { grid-column: 1 / -1; }

.ab-lfield { display: flex; flex-direction: column; gap: 7px; }
.ab-lfield > span { font-size: 14.5px; font-weight: 650; color: var(--ab-ink); }
.ab-req { color: #c0392b; margin-left: 2px; }
.ab-ctrl {
  width: 100%; padding: 11px 13px; font: inherit; font-size: 14.3px;
  color: var(--ab-ink); background: #fff;
  border: 1px solid var(--ab-line); border-radius: 8px;
  transition: border-color .14s ease, box-shadow .14s ease;
}
.ab-ctrl::placeholder { color: #9aa7bd; }
.ab-ctrl:hover { border-color: #c9d3e4; }
.ab-ctrl:focus-visible {
  outline: none; border-color: var(--ab-gold);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ab-gold) 18%, transparent);
}
textarea.ab-ctrl { resize: vertical; min-height: 96px; }
.ab-hint { font-size: 13.34px; color: var(--ab-grey); }

/* checkbox and radio groups */
.ab-opts { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 22px; }
.ab-opts--3 { grid-template-columns: repeat(3, 1fr); }
.ab-opts--1 { grid-template-columns: 1fr; }
.ab-opt {
  display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 14px; border: 1px solid var(--ab-line); border-radius: 8px;
  background: #fff; cursor: pointer; transition: border-color .14s ease, background .14s ease;
}
.ab-opt:hover { border-color: #c9d3e4; background: var(--ab-tint); }
.ab-opt input { margin: 1px 0 0; width: 16px; height: 16px; flex: none; accent-color: var(--ab-gold); }
.ab-opt span { font-size: 14.62px; line-height: 1.45; color: var(--ab-ink); }
.ab-opt span small { display: block; font-size: 13.34px; color: var(--ab-grey); margin-top: 2px; }
.ab-opt:has(input:checked) { border-color: var(--ab-gold); background: color-mix(in srgb, var(--ab-gold) 6%, #fff); }

/* the declarations read as statements, not as boxed options */
.ab-decl { display: grid; gap: 12px; }
.ab-decl .ab-opt { border: 0; background: none; padding: 0; }
.ab-decl .ab-opt:hover { background: none; }
.ab-decl .ab-opt span { font-size: 14.85px; color: var(--ab-slate); }

/* real file pickers */
.ab-drops { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
.ab-drop {
  display: flex; align-items: center; gap: 14px;
  padding: 16px 18px; border: 1.5px dashed #c9d3e4; border-radius: 10px;
  background: var(--ab-tint); cursor: pointer;
  transition: border-color .14s ease, background .14s ease;
}
.ab-drop:hover { border-color: var(--ab-gold); background: color-mix(in srgb, var(--ab-gold) 5%, #fff); }
.ab-drop:focus-within { border-color: var(--ab-gold); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ab-gold) 18%, transparent); }
.ab-drop input[type="file"] {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.ab-drop__ico {
  flex: none; width: 38px; height: 38px; border-radius: 9px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--ab-gold) 14%, #fff); color: var(--ab-gold);
}
.ab-drop__ico svg { width: 18px; height: 18px; }
.ab-drop__t { display: block; font-size: 14.85px; font-weight: 650; color: var(--ab-ink); }
.ab-drop__h { display: block; font-size: 13.34px; color: var(--ab-grey); margin-top: 2px; }

.ab-fee {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  background: var(--ab-tint); border: 1px solid var(--ab-line); border-radius: 9px;
  padding: 14px 18px; margin-top: 16px;
}
.ab-fee span { font-size: 14.38px; color: var(--ab-slate); }
.ab-fee strong { font-size: 15.75px; font-weight: 800; color: var(--ab-gold); }

.ab-factions { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-top: 8px; }
.ab-factions .ab-btn { border: 0; cursor: pointer; font-family: inherit; }
.ab-fnote { font-size: 13.69px; color: var(--ab-grey); text-align: center; max-width: 560px; }

.ab-receipt {
  background: #fff; border: 1px solid var(--ab-gold); border-left-width: 3px;
  border-radius: 11px; padding: 20px 24px; margin-top: 22px;
}
.ab-receipt span {
  display: block; font-size: 12.76px; font-weight: 800; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ab-gold); margin-bottom: 8px;
}
.ab-receipt p { font-size: 14.62px; color: var(--ab-slate); line-height: 1.7; font-style: italic; }

@media (max-width: 900px) {
  .ab-fgrid, .ab-fgrid--3, .ab-fgrid--4, .ab-opts, .ab-opts--3, .ab-drops { grid-template-columns: 1fr; }
  .ab-fsec { padding: 24px 20px; }
  .ab-fee { flex-direction: column; align-items: flex-start; }
}

/* compact yes / no pairs, and conditional follow-up fields */
.ab-yn { display: flex; gap: 10px; }
.ab-yn label {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  padding: 9px 16px; border: 1px solid var(--ab-line); border-radius: 8px;
  font-size: 14.62px; color: var(--ab-ink); background: #fff;
}
.ab-yn label:hover { border-color: #c9d3e4; background: var(--ab-tint); }
.ab-yn input { width: 15px; height: 15px; accent-color: var(--ab-gold); }
.ab-yn label:has(input:checked) { border-color: var(--ab-gold); background: color-mix(in srgb, var(--ab-gold) 7%, #fff); }
.ab-ifyes {
  grid-column: 1 / -1; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px;
  border-left: 2px solid var(--ab-line); padding: 4px 0 4px 18px; margin-top: 2px;
}
.ab-ifyes > p { grid-column: 1 / -1; font-size: 13.69px; color: var(--ab-grey); margin: 0; }
.ab-fsec__sub {
  font-size: 14.85px; font-weight: 800; color: var(--ab-ink);
  margin: 26px 0 12px; padding-top: 20px; border-top: 1px solid var(--ab-line);
}
.ab-fsec__sub:first-of-type { margin-top: 0; padding-top: 0; border-top: 0; }
.ab-num { color: var(--ab-grey); font-weight: 500; }
.ab-checklist {
  background: var(--ab-tint); border: 1px solid var(--ab-line); border-radius: 11px;
  padding: 22px 26px; margin-bottom: 22px;
}
.ab-checklist h4 { font-size: 14.3px; font-weight: 800; margin: 0 0 14px; }
@media (max-width: 900px) { .ab-ifyes { grid-template-columns: 1fr; } }

/* a wrapping chain of steps, for the client's "A → B → C" sequences */
.ab-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 6px; margin: 0 0 22px; }
.ab-chain li {
  display: inline-flex; align-items: center; gap: 8px;
  background: #fff; border: 1px solid var(--ab-line); border-radius: 7px;
  padding: 9px 14px; font-size: 13.92px; font-weight: 700; color: var(--ab-ink);
}
.ab-chain li:not(:last-child)::after { content: "→"; color: var(--ab-gold); font-weight: 700; margin-left: 4px; }
.ab-chain--dark li { background: rgba(255,255,255,.06); border-color: rgba(255,255,255,.15); color: #fff; }
.ab-chain--dark li:not(:last-child)::after { color: var(--ab-goldl); }
.ab-chain--num { counter-reset: step; }
.ab-chain--num li::before {
  counter-increment: step; content: counter(step);
  width: 20px; height: 20px; border-radius: 50%; flex: none;
  display: grid; place-items: center; background: var(--ab-ink); color: #fff;
  font-size: 11.34px; font-weight: 800;
}
.ab-chain--dark.ab-chain--num li::before { background: var(--ab-goldl); color: var(--ab-ink); }

/* the six-stage structured approach */
.ab-stages6 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.ab-stage6 {
  background: #fff; border: 1px solid var(--ab-line); border-radius: 12px; padding: 24px 26px;
  border-top: 3px solid var(--ab-gold);
}
.ab-stage6__n { display: block; font-size: 12.76px; font-weight: 800; letter-spacing: .08em; color: var(--ab-gold); margin-bottom: 6px; }
.ab-stage6__t { font-size: 15.75px; font-weight: 800; margin: 0 0 9px; }
.ab-stage6__f {
  display: block; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--ab-line);
  font-size: 13.22px; font-weight: 700; color: var(--ab-gold);
}
@media (max-width: 1180px) { .ab-stages6 { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px)  { .ab-stages6 { grid-template-columns: 1fr; } }

/* a full phase write-up on the dark band */
.ab-pdetail {
  background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 12px; padding: 26px 30px; margin-bottom: 18px;
}
.ab-pdetail__head { display: flex; align-items: flex-start; gap: 16px; margin-bottom: 16px; }
.ab-pdetail__n {
  flex: none; width: 38px; height: 38px; border-radius: 50%;
  display: grid; place-items: center; background: var(--ab-goldl); color: var(--ab-ink);
  font-size: 14.7px; font-weight: 800;
}
.ab-pdetail__t { font-size: 16.5px; font-weight: 800; color: #fff; margin: 0; }
.ab-pdetail__s { font-size: 14.5px; color: var(--ab-goldl); margin: 3px 0 0; font-weight: 600; }
.ab-pdetail h5 { font-size: 14.5px; font-weight: 700; color: #fff; margin: 20px 0 10px; }
.ab-out {
  background: rgba(216, 168, 70, .1); border-left: 3px solid var(--ab-goldl);
  border-radius: 0 8px 8px 0; padding: 13px 18px; margin-top: 20px;
}
.ab-out span { display: block; font-size: 11.34px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: var(--ab-goldl); margin-bottom: 5px; }
.ab-out p { font-size: 14.38px; color: #e2e8f0; line-height: 1.65; }
.ab-formula {
  background: rgba(255,255,255,.06); border-radius: 8px; padding: 13px 18px; margin: 14px 0;
  font-size: 14.5px; font-weight: 700; color: #fff; text-align: center;
}


/* Comfortable measure across all four designed pages. Bare <p> elements inside
   panels had no cap and were running to 163 characters a line. Placed last so
   it wins on source order against the single-class component rules. */
.ab-page :where(p) { max-width: 64ch; }
.ab-page :where(.ab-promise, .ab-strip, .ab-fee, .ab-model, .ab-factions, .ab-quote, .ab-warn) :where(p),
.ab-page :where(.ab-promise__q, .ab-fnote, .ab-stage__d, .ab-phase__s, .ab-pcard__d, .ab-div__s, .ab-aud__d, .ab-obj__d, .ab-item span) { max-width: none; }
.ab-page .ab-head { max-width: 760px; }
.ab-page .ab-out p { max-width: 62ch; }

/* Centred statement blocks: capped and centred rather than left uncapped —
   the promise paragraph was running to 165 characters a line. */
.ab-page .ab-promise p { max-width: 74ch; margin-left: auto; margin-right: auto; }
.ab-page .ab-promise__q { max-width: 30ch; margin-left: auto; margin-right: auto; }
.ab-page .ab-strip p { max-width: 68ch; }
.ab-page .ab-fnote { max-width: 62ch; }

/* ==================================================================== *
 * Training by Certification — built to 05_Page_Training_by_Certification_Full.
 * Reuses the ab-* section/typography system; everything below is the
 * page-specific vocabulary that mockup introduces.
 * ==================================================================== */

.tbc-hero { background: var(--navy-900, #071733); color: #fff; padding: 62px 0 54px; position: relative; }
.tbc-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(1100px 460px at 78% 8%, rgba(184, 137, 43, .13), transparent 62%);
}
.tbc-hero > .container { position: relative; z-index: 1; }
.tbc-hero__grid { display: grid; grid-template-columns: 1.08fr .92fr; gap: 54px; align-items: center; }

.tbc-pill {
  display: inline-block; padding: 7px 18px; border-radius: 999px;
  border: 1px solid rgba(216, 168, 70, .5); background: rgba(184, 137, 43, .12);
  color: var(--ab-goldl, #d8a846); font-size: 12.76px; font-weight: 700;
  letter-spacing: .16em; text-transform: uppercase;
}
.tbc-h1 {
  font-family: var(--font-display, inherit); font-size: 44px; line-height: 1.1;
  font-weight: 800; margin: 18px 0 12px; color: #fff; letter-spacing: -.015em;
}
.tbc-hero__kicker { color: #7fb1e8; font-size: 15.75px; font-weight: 700; margin: 0 0 16px; }
.tbc-hero__p { color: rgba(255, 255, 255, .74); font-size: 14.96px; line-height: 1.72; max-width: 61ch; margin: 0 0 22px; }

.tbc-philosophy {
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  padding: 13px 18px; border-radius: 10px;
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1);
}
.tbc-philosophy__label { color: var(--ab-goldl, #d8a846); font-size: 11.34px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; }
.tbc-flow { display: flex; flex-wrap: wrap; gap: 6px 4px; list-style: none; margin: 0; padding: 0; }
.tbc-flow li { color: rgba(255, 255, 255, .88); font-size: 13.34px; letter-spacing: .07em; text-transform: uppercase; }
.tbc-flow li + li::before { content: "→"; margin: 0 7px 0 3px; color: rgba(255, 255, 255, .42); }

.tbc-hero__label { color: rgba(255, 255, 255, .6); font-size: 11.34px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; margin: 22px 0 10px; }
.tbc-stages { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 20px; list-style: none; margin: 0; padding: 0; }
.tbc-stages li { position: relative; padding-left: 13px; color: #fff; font-size: 14.38px; font-weight: 600; }
.tbc-stages li::before { content: "·"; position: absolute; left: 0; color: var(--ab-goldl, #d8a846); font-weight: 800; }
.tbc-hero__cta { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }

/* domain selector */
.tbc-select {
  margin-top: 46px; padding: 26px 28px 24px; border-radius: 14px;
  background: rgba(255, 255, 255, .045); border: 1px solid rgba(255, 255, 255, .12);
}
.tbc-eyebrow { display: block; font-size: 11.34px; font-weight: 800; letter-spacing: .16em; text-transform: uppercase; color: var(--ab-gold, #b8892b); }
.tbc-eyebrow--gold { color: var(--ab-goldl, #d8a846); }
.tbc-select__title { color: #fff; font-size: 19px; font-weight: 700; margin: 9px 0 18px; }
.tbc-chips { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.tbc-chips > :nth-child(5) { grid-column: 1 / 2; }
.tbc-chip {
  display: flex; align-items: center; gap: 11px; padding: 12px 15px; border-radius: 9px;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .12);
  color: #fff; text-decoration: none; transition: background .16s, border-color .16s, transform .16s;
}
.tbc-chip:hover { background: rgba(184, 137, 43, .16); border-color: rgba(216, 168, 70, .45); transform: translateY(-1px); }
.tbc-chip__badge {
  flex: none; width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10.26px; font-weight: 800; letter-spacing: .04em;
  background: rgba(184, 137, 43, .22); color: var(--ab-goldl, #d8a846); border: 1px solid rgba(216, 168, 70, .4);
}
.tbc-chip__label { font-size: 14.62px; font-weight: 600; }
.tbc-formats-strip {
  margin: 14px 0 0; padding: 13px 18px; border-radius: 9px;
  background: rgba(0, 0, 0, .26); border: 1px solid rgba(255, 255, 255, .08);
  color: rgba(255, 255, 255, .72); font-size: 13.92px; line-height: 1.6;
}
.tbc-formats-strip strong { color: var(--ab-goldl, #d8a846); font-weight: 700; }
.tbc-formats-strip a { color: var(--ab-goldl, #d8a846); text-decoration: none; margin-left: 6px; font-weight: 600; }
.tbc-formats-strip a:hover { text-decoration: underline; }

/* 6-stage progression */
.tbc-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.tbc-step {
  display: flex; align-items: stretch; gap: 0; background: #fff;
  border: 1px solid var(--ab-line, #e4e9f2); border-radius: 12px; overflow: hidden;
}
.tbc-step__n {
  flex: none; width: 58px; display: grid; place-items: center;
  background: linear-gradient(160deg, #d8a846, #b8892b); color: #fff;
  font-size: 21px; font-weight: 800; font-family: var(--font-display, inherit);
  clip-path: polygon(0 0, 100% 0, calc(100% - 13px) 50%, 100% 100%, 0 100%);
}
.tbc-step__body { padding: 16px 20px 15px; }
.tbc-step__t { font-size: 16.28px; font-weight: 700; color: var(--ab-ink, #0b1f3f); margin: 0 0 6px; }
.tbc-step__t span { color: var(--ab-gold, #b8892b); font-size: 13.92px; font-weight: 700; }
.tbc-step__d { color: var(--ab-grey, #64748b); font-size: 14.62px; line-height: 1.62; margin: 0 0 8px; }
.tbc-step__tags { color: var(--blue-600, #1d6fd9); font-size: 13.46px; font-weight: 700; margin: 0; }

/* 12 delivery formats */
.tbc-formats { margin-top: 22px; background: #fff; border: 1px solid var(--ab-line, #e4e9f2); border-radius: 14px; padding: 26px 28px 24px; }
.tbc-formats__title { font-size: 19px; font-weight: 700; color: var(--ab-ink, #0b1f3f); margin: 9px 0 20px; }
.tbc-formats__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.tbc-format { padding: 13px 16px; border-radius: 9px; background: var(--ab-tint, #f6f8fb); border: 1px solid var(--ab-line, #e4e9f2); }
.tbc-format h4 { font-size: 14.3px; font-weight: 700; color: var(--ab-ink, #0b1f3f); margin: 0 0 5px; }
.tbc-format p { font-size: 13.69px; line-height: 1.55; color: var(--ab-grey, #64748b); margin: 0; }
.tbc-disclaimer {
  margin: 16px 0 0; padding: 13px 18px; border-radius: 9px;
  background: var(--ab-ink, #0b1f3f); color: rgba(255, 255, 255, .78);
  font-size: 13.69px; line-height: 1.6;
}
.tbc-disclaimer strong { color: var(--ab-goldl, #d8a846); font-weight: 700; }

/* domain cards */
.tbc-domains { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; align-items: start; }
.tbc-domain {
  background: #fff; border: 1px solid var(--ab-line, #e4e9f2); border-radius: 16px;
  padding: 26px 28px 26px; display: flex; flex-direction: column;
}
.tbc-domain--dark {
  background: linear-gradient(165deg, #0e2547, #071733);
  border-color: rgba(255, 255, 255, .12); color: #fff;
}
.tbc-domain__chip {
  display: inline-block; align-self: flex-start; padding: 5px 13px; border-radius: 5px;
  font-size: 10.8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase;
  background: rgba(184, 137, 43, .2); color: var(--ab-goldl, #d8a846);
}
.tbc-domain__chip--blue { background: #e3f0fd; color: #1a5fb4; }
.tbc-domain__t { font-size: 23px; font-weight: 800; margin: 14px 0 5px; color: var(--ab-ink, #0b1f3f); letter-spacing: -.01em; }
.tbc-domain--dark .tbc-domain__t { color: #fff; }
.tbc-domain__paths { font-size: 14.62px; font-weight: 700; color: var(--blue-600, #1d6fd9); margin: 0 0 14px; }
.tbc-domain--dark .tbc-domain__paths { color: #7fb1e8; }
.tbc-domain__d { font-size: 14.85px; line-height: 1.68; color: var(--ab-grey, #64748b); margin: 0 0 18px; }
.tbc-domain--dark .tbc-domain__d { color: rgba(255, 255, 255, .72); }

.tbc-panel { border-radius: 11px; padding: 17px 19px 16px; margin-bottom: 14px; }
.tbc-panel--tint { background: var(--ab-tint, #f6f8fb); }
.tbc-panel--outline { border: 1px solid var(--ab-line, #e4e9f2); }
.tbc-domain--dark .tbc-panel { background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .1); }
.tbc-panel__h {
  display: block; font-size: 11.34px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--ab-gold, #b8892b); margin-bottom: 11px;
}
.tbc-domain--dark .tbc-panel__h { color: var(--ab-goldl, #d8a846); }

.tbc-topics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px 22px; list-style: none; margin: 0; padding: 0; }
.tbc-topics li { position: relative; padding-left: 12px; font-size: 14.04px; line-height: 1.5; color: var(--ab-slate, #475569); }
.tbc-topics li::before { content: "·"; position: absolute; left: 2px; color: var(--ab-gold, #b8892b); font-weight: 800; }
.tbc-domain--dark .tbc-topics li { color: rgba(255, 255, 255, .8); }

.tbc-journey {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0;
  margin: 14px 0 11px; padding: 10px 15px; border-radius: 7px;
  background: var(--ab-ink, #0b1f3f);
}
.tbc-journey span { color: var(--ab-goldl, #d8a846); font-size: 10.26px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-right: 14px; }
.tbc-journey em { color: rgba(255, 255, 255, .9); font-style: normal; font-size: 11.34px; letter-spacing: .06em; text-transform: uppercase; }
.tbc-journey em + em::before { content: "→"; margin: 0 7px; color: rgba(255, 255, 255, .4); }
.tbc-domain--dark .tbc-journey { background: rgba(0, 0, 0, .34); }
.tbc-roles { font-size: 13.69px; font-weight: 700; color: var(--blue-600, #1d6fd9); margin: 0; line-height: 1.5; }
.tbc-domain--dark .tbc-roles { color: #7fb1e8; }

.tbc-tracks { display: grid; grid-template-columns: auto 1fr; gap: 8px 16px; margin: 0 0 14px; }
.tbc-tracks dt { position: relative; padding-left: 14px; font-size: 13.92px; font-weight: 700; color: var(--ab-ink, #0b1f3f); }
.tbc-tracks dt::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; background: var(--ab-gold, #b8892b); }
.tbc-tracks dd { margin: 0; font-size: 13.92px; line-height: 1.55; color: var(--ab-grey, #64748b); }
.tbc-domain--dark .tbc-tracks dt { color: #fff; }
.tbc-domain--dark .tbc-tracks dd { color: rgba(255, 255, 255, .74); }

.tbc-accent {
  margin: 0; padding: 12px 16px; border-radius: 8px;
  background: var(--ab-ink, #0b1f3f); color: rgba(255, 255, 255, .82);
  font-size: 13.69px; line-height: 1.6;
}
.tbc-accent span { display: block; color: var(--ab-goldl, #d8a846); font-size: 10.8px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; margin-bottom: 5px; }
.tbc-domain--dark .tbc-accent { background: rgba(0, 0, 0, .34); }

.tbc-domain__btn {
  display: block; margin-top: auto; padding: 14px 18px; border-radius: 9px;
  background: var(--ab-ink, #0b1f3f); color: #fff; text-align: center;
  font-size: 14.5px; font-weight: 700; letter-spacing: .02em; text-decoration: none;
  transition: background .16s, transform .16s;
}
.tbc-domain__btn:hover { background: #16345f; transform: translateY(-1px); }
.tbc-domain__btn--gold { background: linear-gradient(160deg, #d8a846, #b8892b); color: #24170a; }
.tbc-domain__btn--gold:hover { filter: brightness(1.06); background: linear-gradient(160deg, #d8a846, #b8892b); }
.tbc-domain__btn--ghost { background: transparent; border: 1px solid rgba(216, 168, 70, .55); color: #fff; }
.tbc-domain__btn--ghost:hover { background: rgba(184, 137, 43, .18); }

/* domain 5 — cybersecurity trio */
.tbc-cyber { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.tbc-cyber__card {
  background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 14px; padding: 22px 24px 22px; display: flex; flex-direction: column;
}
.tbc-cyber__head { display: flex; align-items: center; gap: 13px; margin-bottom: 16px; }
.tbc-cyber__badge {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(184, 137, 43, .2); border: 1px solid rgba(216, 168, 70, .42);
  color: var(--ab-goldl, #d8a846); font-size: 12.76px; font-weight: 800; letter-spacing: .03em;
}
.tbc-cyber__t { font-size: 17px; font-weight: 700; color: #fff; margin: 0 0 2px; }
.tbc-cyber__sub { font-size: 13.69px; font-weight: 700; color: #7fb1e8; margin: 0; }
.tbc-cyber__group {
  position: relative; padding-left: 14px; margin: 15px 0 8px;
  font-size: 14.15px; font-weight: 700; color: #fff;
}
.tbc-cyber__group::before { content: ""; position: absolute; left: 0; top: 6px; width: 6px; height: 6px; background: var(--ab-goldl, #d8a846); }
.tbc-cyber__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; }
.tbc-cyber__list li { position: relative; padding-left: 12px; font-size: 13.8px; line-height: 1.5; color: rgba(255, 255, 255, .76); }
.tbc-cyber__list li::before { content: "·"; position: absolute; left: 2px; color: rgba(216, 168, 70, .8); font-weight: 800; }
.tbc-cyber__card .tbc-domain__btn { margin-top: 22px; }
.tbc-lifecycle {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 0; margin: 22px 0 0;
  padding: 15px 22px; border-radius: 10px;
  background: rgba(0, 0, 0, .28); border: 1px solid rgba(255, 255, 255, .1);
}
.tbc-lifecycle span { color: var(--ab-goldl, #d8a846); font-size: 10.8px; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; margin-right: 20px; }
.tbc-lifecycle em { color: rgba(255, 255, 255, .88); font-style: normal; font-size: 13.34px; letter-spacing: .07em; text-transform: uppercase; }
.tbc-lifecycle em + em::before { content: "→"; margin: 0 9px; color: rgba(255, 255, 255, .4); }

/* enterprise workforce tiles */
.tbc-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
.tbc-tile {
  border-radius: 14px; padding: 26px 24px 24px; text-align: center; color: #fff;
  display: flex; flex-direction: column; align-items: center;
}
.tbc-tile--gold { background: linear-gradient(165deg, #a8781f, #8a6117); }
.tbc-tile--navy { background: linear-gradient(165deg, #16345f, #0b1f3f); }
.tbc-tile__badge {
  width: 52px; height: 52px; border-radius: 50%; display: grid; place-items: center;
  background: #fff; color: var(--ab-ink, #0b1f3f);
  font-size: 13.92px; font-weight: 800; letter-spacing: .04em; margin-bottom: 18px;
}
.tbc-tile__t { font-size: 14.7px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; margin: 0 0 12px; color: #fff; }
.tbc-tile__d { font-size: 14.15px; line-height: 1.6; color: rgba(255, 255, 255, .82); margin: 0 0 20px; }
.tbc-tile__link {
  margin-top: auto; color: #fff; font-size: 13.34px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  text-decoration: none; border-bottom: 1px solid rgba(255, 255, 255, .6); padding-bottom: 3px;
}
.tbc-tile__link:hover { border-bottom-color: #fff; }

.tbc-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; margin-top: 20px; }
.tbc-audience { background: var(--ab-tint, #f6f8fb); border: 1px solid var(--ab-line, #e4e9f2); border-radius: 13px; padding: 22px 24px 20px; }
.tbc-audience h3 { font-size: 16px; font-weight: 700; color: var(--ab-ink, #0b1f3f); margin: 0 0 13px; }
.tbc-audience__link {
  display: inline-block; margin-top: 15px; font-size: 13.34px; font-weight: 700;
  letter-spacing: .09em; text-transform: uppercase; text-decoration: none; color: var(--blue-600, #1d6fd9);
}
.tbc-audience__link--gold { color: var(--ab-gold, #b8892b); }
.tbc-audience__link:hover { text-decoration: underline; }
.tbc-contactbar {
  margin: 20px 0 0; padding: 17px 24px; border-radius: 10px;
  background: var(--ab-ink, #0b1f3f); color: rgba(255, 255, 255, .82); font-size: 14.85px;
}
.tbc-contactbar a { color: var(--ab-goldl, #d8a846); font-weight: 700; text-decoration: none; margin-left: 6px; }
.tbc-contactbar a:hover { text-decoration: underline; }

/* quality pillars */
.tbc-pillars { display: grid; gap: 20px; }
.tbc-pillar { display: flex; gap: 16px; align-items: flex-start; }
.tbc-pillar__badge {
  flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center;
  border: 1.5px solid var(--ab-gold, #b8892b); color: var(--ab-gold, #b8892b);
  font-size: 11.34px; font-weight: 800; letter-spacing: .03em;
}
.tbc-pillar__t { font-size: 15.75px; font-weight: 700; color: var(--ab-ink, #0b1f3f); margin: 0 0 5px; }
.tbc-pillar__d { font-size: 14.38px; line-height: 1.62; color: var(--ab-grey, #64748b); margin: 0; max-width: 62ch; }

/* standards alignment */
.tbc-standards { margin-top: 34px; background: #fff; border: 1px solid var(--ab-line, #e4e9f2); border-radius: 14px; padding: 26px 28px 22px; }
.tbc-standards__title { font-size: 18px; font-weight: 700; color: var(--ab-ink, #0b1f3f); margin: 9px 0 18px; }
.tbc-standards__grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 9px 26px; list-style: none; margin: 0 0 16px; padding: 0;
}
.tbc-standards__grid li { position: relative; padding-left: 13px; font-size: 14.04px; line-height: 1.5; color: var(--ab-slate, #475569); }
.tbc-standards__grid li::before { content: "·"; position: absolute; left: 2px; color: var(--ab-gold, #b8892b); font-weight: 800; }
.tbc-standards__note { font-size: 13.22px; font-style: italic; color: var(--ab-grey, #64748b); line-height: 1.6; margin: 0; }

/* closing CTA */
.tbc-cta {
  background: linear-gradient(165deg, #0e2547, #071733);
  border: 1px solid rgba(216, 168, 70, .3); border-radius: 18px;
  padding: 46px 44px 42px; text-align: center; color: #fff;
}
.tbc-cta__t { font-size: 32px; font-weight: 800; color: #fff; margin: 12px 0 8px; letter-spacing: -.015em; }
.tbc-cta__sub { font-size: 14.74px; color: rgba(255, 255, 255, .72); margin: 0 0 26px; }
.tbc-cta__tabs {
  display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px;
  padding: 13px 20px; border-radius: 9px;
  background: rgba(0, 0, 0, .3); border: 1px solid rgba(255, 255, 255, .1);
}
.tbc-cta__tabs a { color: rgba(255, 255, 255, .76); font-size: 13.34px; font-weight: 600; text-decoration: none; }
.tbc-cta__tabs a:hover { color: #fff; }
.tbc-cta__tabs a.is-current { color: var(--ab-goldl, #d8a846); font-weight: 700; }
.tbc-stats { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; margin: 30px 0 30px; }
.tbc-stats dt { font-family: var(--font-display, inherit); font-size: 34px; font-weight: 800; color: var(--ab-goldl, #d8a846); line-height: 1; }
.tbc-stats dd { margin: 7px 0 0; font-size: 13.46px; color: rgba(255, 255, 255, .72); }
.tbc-cta__btns { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* responsive */
@media (max-width: 1100px) {
  .tbc-hero__grid { grid-template-columns: 1fr; gap: 34px; }
  .tbc-chips { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbc-chips > :nth-child(5) { grid-column: auto; }
  .tbc-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbc-cyber { grid-template-columns: 1fr; }
  .tbc-standards__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbc-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .tbc-h1 { font-size: 33px; }
  .tbc-steps, .tbc-domains, .tbc-two { grid-template-columns: 1fr; }
  .tbc-formats__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbc-stages { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbc-cta { padding: 34px 24px 32px; }
  .tbc-cta__t { font-size: 24px; }
}
@media (max-width: 620px) {
  .tbc-topics, .tbc-formats__grid, .tbc-tiles, .tbc-standards__grid, .tbc-stages, .tbc-chips { grid-template-columns: 1fr; }
  .tbc-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tbc-tracks { grid-template-columns: 1fr; gap: 3px 0; }
  .tbc-cta__tabs { justify-content: flex-start; }
}



/* Button labels are wrapped in .cbtn__label so the text and its <sup>®</sup>
   form a single flex item. Without the wrapper each text node and the <sup>
   became separate, blockified flex items, which killed `vertical-align: super`
   and left the ® sitting mid-cap where it read as a bullet. */
.cbtn__label { display: inline-block; }
.cbtn__label sup { font-size: .62em; vertical-align: super; line-height: 0; }

/* ==================================================================== *
 * Certification hero artwork — the client's sample shows the discipline
 * photograph carrying the hero, with the badge overlaid rather than
 * standing alone on a plate. Each certification supplies its own image,
 * accent colour and tagline, so all 28 pages differ.
 * ==================================================================== */
.chero-art { position: relative; display: block; }

.chero-art__media {
  position: relative; margin: 0; border-radius: 16px; overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .16);
  box-shadow: 0 22px 60px rgba(0, 0, 0, .45);
  aspect-ratio: 16 / 11; background: #061532;
}
.chero-art__media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.04); transition: transform 1.2s cubic-bezier(.22,.61,.36,1);
}
.chero-art:hover .chero-art__media img { transform: scale(1.09); }
/* Tint toward the credential's accent so the photo reads as part of the page
   rather than a pasted-in stock image, and darken the foot so the badge and
   the area label stay legible over any photograph. */
.chero-art__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(6, 21, 50, 0) 0%, rgba(6, 21, 50, .22) 58%, rgba(6, 21, 50, .74) 100%),
    linear-gradient(140deg, color-mix(in srgb, var(--cc, #2F7FE0) 16%, transparent), transparent 58%);
}
.chero-art__area {
  position: absolute; left: 16px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: 999px;
  background: rgba(4, 14, 34, .72); border: 1px solid rgba(255, 255, 255, .2);
  backdrop-filter: blur(6px);
  color: #fff; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
}
.chero-art__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--cc, #2F7FE0); flex: none; }

/* The badge plate overlaps the photograph's top-right corner, as in the sample. */
.chero-art__plate {
  position: absolute; top: -20px; right: -16px; z-index: 3;
  width: 190px; padding: 13px; border-radius: 16px;
  background: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, .38);
  border: 1px solid rgba(255, 255, 255, .8);
}
.chero-art__plate img { display: block; width: 100%; height: auto; border-radius: 8px; }
.chero-art__plate .cseal { max-width: 100%; }

.chero-art__tagline {
  margin: 18px 0 0; text-align: center;
  color: rgba(255, 255, 255, .88); font-size: 14px; font-weight: 600; line-height: 1.55;
  max-width: 46ch; margin-inline: auto;
}

/* The art column needs more room than the 300px the badge alone used. */
.cert-hero__inner { grid-template-columns: minmax(0, 1fr) 500px; }

@media (max-width: 1080px) {
  .cert-hero__inner { grid-template-columns: 1fr; }
  .chero-art { max-width: 560px; margin-inline: auto; }
  .chero-art__plate { width: 140px; top: -14px; right: -8px; }
}
@media (max-width: 560px) {
  .chero-art__plate { width: 108px; padding: 9px; top: -10px; right: -4px; }
  .chero-art__area { font-size: 10.5px; padding: 6px 11px; left: 12px; bottom: 11px; }
  .chero-art__tagline { font-size: 13px; }
}

/* Scroll-reveal used across the certification page. Motion is opt-out. */
/* Only hide when the reveal script is actually running — `js-reveal` is set by
   site.js. Without this guard a JS failure would leave the page blank. */
.js-reveal .reveal { opacity: 0; transform: translateY(18px); }
.js-reveal .reveal.is-in {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.22,.61,.36,1);
}
@media (prefers-reduced-motion: reduce) {
  .reveal, .reveal.is-in { opacity: 1; transform: none; transition: none; }
  .chero-art__media img, .chero-art:hover .chero-art__media img { transform: none; transition: none; }
}

/* ==================================================================== *
 * Certification page — client feedback: bigger icons, tighter section
 * spacing. Icon chips and their glyphs are scaled up together so the
 * proportion inside each chip is preserved; section padding comes down
 * from 52-56px to 38-40px.
 * ==================================================================== */

/* Trust bar (Advanced Manager Level / Vendor-Neutral / …) */
.ctrust__icon { width: 58px; height: 58px; border-radius: 14px; }
.ctrust__icon svg { width: 30px; height: 30px; }

/* "What You Will Learn" cards */
.clearn__icon { width: 50px; height: 50px; border-radius: 13px; }
.clearn__icon svg { width: 26px; height: 26px; }

/* "At a Glance" facts */
.cglance__icon { width: 50px; height: 50px; }
.cglance__icon svg { width: 26px; height: 26px; }

/* Skills / feature / callout glyphs */
.v2-feature__icon svg { width: 34px; height: 34px; }
.v2-callout__icon svg { width: 34px; height: 34px; }
.v2-tint__icon svg { width: 50px; height: 50px; }
.v2-stat__icon svg { width: 24px; height: 24px; }
.v2-pill__icon { width: 32px; height: 32px; }
.v2-pill__icon svg { width: 17px; height: 17px; }

/* Tighter rhythm between sections. */
.v2-sec { padding: 40px 0; }
@media (min-width: 1200px) { .v2-sec { padding: 44px 0; } }
.cdoc .v2-sec { padding-block: 40px; }
.v2-sec:has(> .container > .cs-fact) { padding-block: 22px; }

/* The list ticks and arrow marks were 9-11px, small enough to read as
   punctuation rather than icons. Scaled to match the sample's list marks. */
.cwhy__tick, .cglance__tick, .cintro__tick, .cs-checks__mark, .v2-checks__mark {
  width: 18px; height: 18px; flex: none;
}
.ccareer__mark { width: 16px; height: 16px; flex: none; }
.cs-pills__icon { width: 20px; height: 20px; }
.cs-para__mark { width: 20px; height: 20px; }

/* Multi-paragraph section intros on the certification pages are set in a panel
   rather than running as loose prose on the section background — the client
   asked for boxes where content was previously plain. */
.cs-introbox {
  margin: 18px auto 0; max-width: 940px; text-align: left;
  padding: 22px 26px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line, #e3e8ef);
  border-left: 4px solid var(--c, var(--gold, #b8892b));
  box-shadow: 0 2px 14px rgba(11, 31, 63, .05);
}
.v2-sec--alt .cs-introbox { background: #fff; }
.cs-introbox .v2-lede { margin: 0 0 12px; max-width: none; text-align: left; }
.cs-introbox .v2-lede:last-child { margin-bottom: 0; }

@media (max-width: 700px) {
  .cs-introbox { padding: 17px 18px; border-radius: 12px; }
}

/* splitmedia prints its own intro beside the image; give that copy the same
   panel treatment so it reads as a box rather than loose prose on the section
   background. featurelist/paragrid ledes get the same. */
.cs-split__copy {
  padding: 24px 26px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line, #e3e8ef);
  border-left: 4px solid var(--c, var(--gold, #b8892b));
  box-shadow: 0 2px 14px rgba(11, 31, 63, .05);
}
.v2-sec--alt .cs-split__copy { background: #fff; }
.cs-split__copy > :first-child { margin-top: 0; }
.cs-split__copy > :last-child { margin-bottom: 0; }
@media (max-width: 700px) { .cs-split__copy { padding: 18px 18px; } }

/* ==================================================================== *
 * Client sample pass (CAIM screenshot, 19 Aug)
 * The sample reverses two earlier decisions: the Skills band is light
 * again, and the gold call-to-action is a bright amber fill with dark
 * text rather than the darkened navy-amber mix that successive contrast
 * fixes had produced. Tick and role marks become solid gold discs.
 * Text content is unchanged — this is style only.
 * ==================================================================== */

/* 1. Skills band: back to the light treatment the sample shows. The dark
      gradient lives on .cskills__card (and a more specific .cdoc variant),
      not on the section, so it has to be unset there. */
.cskills { background: none; }
.cdoc .cskills__card,
.cskills__card {
  background: #f4f7fd;
  border: 1px solid var(--line-soft, #e6ebf3);
  box-shadow: none;
}
.cdoc .cskills__card .cskills__title,
.cskills__card .cskills__title { color: var(--navy-900, #0b1b3d); }
.cdoc .cskills__card .cskills__lede,
.cskills__card .cskills__lede { color: var(--ink-soft, #4a5568); }
.cdoc .cskills__card .cskills__icon,
.cskills__card .cskills__icon {
  background: #fff;
  border: 1px solid var(--line, #e3e8ef);
  color: var(--navy-700, #16346b);
  box-shadow: 0 2px 8px rgba(12, 26, 52, .07);
}
.cdoc .cskills__card .cskills__label,
.cskills__card .cskills__label { color: var(--navy-900, #0b1b3d); }
/* the dashed flanking rules either side of the title were drawn for a dark
   ground and disappear on a light one */
.cskills__title::before, .cskills__title::after {
  border-top-color: color-mix(in srgb, var(--brand-gold, #e0a92e) 55%, transparent);
}

/* 2. Why-earn ticks: solid gold discs with a white check, as in the sample. */
.cwhy__tick {
  background: var(--brand-gold, #e0a92e);
  border: 0;
  color: #fff;
  width: 22px; height: 22px;
}
.cwhy__tick svg { width: 12px; height: 12px; fill: currentColor; }

/* 3. Career roles: matching solid gold discs with a white arrow. */
.ccareer__mark {
  background: var(--brand-gold, #e0a92e);
  border: 0;
  color: #fff;
  width: 22px; height: 22px;
}
.ccareer__mark svg { width: 11px; height: 11px; fill: currentColor; }

/* 4. The gold button. Earlier passes darkened the fill toward navy to win a
      contrast ratio against WHITE text, which is why it had stopped reading as
      gold at all. Dark ink on the amber fill clears AA comfortably and is what
      the sample shows, so the fill is restored. */
.cbtn--gold,
.v2 .cbtn--gold,
.cpage .cbtn--gold,
.btn--primary,
.btn--gold,
.v2-buybar .btn--primary {
  background: var(--brand-gold, #e0a92e);
  border-color: transparent;
  color: #16204a;
}
.cbtn--gold:hover,
.v2 .cbtn--gold:hover,
.cpage .cbtn--gold:hover,
.btn--primary:hover,
.btn--gold:hover,
.v2-buybar .btn--primary:hover {
  background: var(--brand-gold-soft, #f0c257);
  color: #16204a;
}

/* 5. The sample pairs the gold CTA with an outlined button in the white
      Career card. */
.ccareer__cta {
  display: inline-flex; align-items: center; gap: 9px;
  margin-top: 20px; padding: 12px 20px;
  border-radius: 8px; border: 1.5px solid var(--line, #e3e8ef);
  background: #fff; color: var(--navy-900, #0b1b3d);
  font: 700 13.5px/1 var(--font-display, inherit); text-decoration: none;
  transition: border-color .16s, background .16s, transform .16s;
}
.ccareer__cta:hover {
  border-color: var(--brand-gold, #e0a92e);
  background: color-mix(in srgb, var(--brand-gold, #e0a92e) 8%, #fff);
  transform: translateY(-1px);
}
.ccareer__cta svg { width: 13px; height: 13px; fill: currentColor; }

/* ==================================================================== *
 * Resources & Insights — area hub and submenu pages.
 * Built on the ab-* section system; everything below is the vocabulary
 * the parsed client documents need (headed lists, arrow flows, CTAs).
 * ==================================================================== */
.rs-hero {
  background: linear-gradient(120deg, #071733 0%, #0e2547 60%, #123059 100%);
  color: #fff; padding: 30px 0 54px; position: relative;
}
.rs-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 400px at 82% 0%, color-mix(in srgb, var(--cc, #12A594) 22%, transparent), transparent 62%);
}
.rs-hero > .container { position: relative; z-index: 1; }
.rs-hero--compact { padding-bottom: 34px; }
.rs-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) 460px; gap: 46px; align-items: center; margin-top: 18px; }
.rs-hero__eyebrow {
  display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .16em;
  text-transform: uppercase; color: var(--brand-gold, #e0a92e); margin-bottom: 12px;
}
.rs-hero__h1 { font-size: 42px; line-height: 1.12; font-weight: 800; margin: 0 0 12px; color: #fff; letter-spacing: -.015em; }
.rs-hero--compact .rs-hero__h1 { font-size: 34px; }
.rs-hero__kicker { font-size: 16px; font-weight: 600; color: #7fb1e8; margin: 0 0 18px; max-width: 70ch; }
.rs-hero__p { font-size: 14.5px; line-height: 1.75; color: rgba(255,255,255,.76); margin: 0 0 12px; max-width: 66ch; }
.rs-hero__media { border-radius: 16px; overflow: hidden; border: 1px solid rgba(255,255,255,.16); box-shadow: 0 22px 60px rgba(0,0,0,.45); }
.rs-hero__media img { width: 100%; height: 100%; object-fit: cover; display: block; aspect-ratio: 16/11; }

/* five topic cards on the hub */
.rs-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.rs-card {
  display: flex; flex-direction: column; padding: 24px 26px 22px; border-radius: 14px;
  background: #fff; border: 1px solid var(--ab-line, #e4e9f2); text-decoration: none;
  transition: transform .16s, box-shadow .16s, border-color .16s;
}
.rs-card:hover { transform: translateY(-2px); box-shadow: 0 16px 40px -28px rgba(11,31,63,.5); border-color: var(--brand-gold, #e0a92e); }
.rs-card__n { font-size: 12px; font-weight: 800; letter-spacing: .12em; color: var(--brand-gold, #e0a92e); }
.rs-card__t { font-size: 17px; font-weight: 700; color: var(--ab-ink, #0b1f3f); margin: 10px 0 8px; }
.rs-card__d { font-size: 14px; line-height: 1.65; color: var(--ab-grey, #64748b); margin: 0 0 16px; }
.rs-card__go {
  margin-top: auto; display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  color: var(--ab-ink, #0b1f3f);
}
.rs-card__go svg { fill: currentColor; }

/* sibling rail on a submenu page */
.rs-rail { background: #fff; border-bottom: 1px solid var(--ab-line, #e4e9f2); position: sticky; top: 0; z-index: 20; }
.rs-rail ul { display: flex; gap: 4px; list-style: none; margin: 0; padding: 0; overflow-x: auto; }
.rs-rail a {
  display: block; padding: 15px 16px; white-space: nowrap; text-decoration: none;
  font-size: 13.5px; font-weight: 600; color: var(--ab-slate, #475569);
  border-bottom: 2px solid transparent;
}
.rs-rail a:hover { color: var(--ab-ink, #0b1f3f); }
.rs-rail a.is-current { color: var(--ab-ink, #0b1f3f); border-bottom-color: var(--brand-gold, #e0a92e); }

/* the document body */
.rs-body { max-width: 1000px; }
.rs-h {
  display: flex; align-items: baseline; gap: 12px;
  font-size: 21px; font-weight: 800; color: var(--ab-ink, #0b1f3f);
  margin: 38px 0 14px; letter-spacing: -.01em;
}
.rs-h:first-child { margin-top: 0; }
.rs-h__n {
  flex: none; font-size: 12px; font-weight: 800; letter-spacing: .1em;
  color: var(--brand-gold, #e0a92e);
}
.rs-p { font-size: 15px; line-height: 1.78; color: var(--ab-slate, #475569); margin: 0 0 14px; max-width: 70ch; }

.rs-list {
  margin: 0 0 18px; padding: 20px 24px; border-radius: 12px;
  background: var(--ab-tint, #f6f8fb); border: 1px solid var(--ab-line, #e4e9f2);
  border-left: 4px solid var(--brand-gold, #e0a92e);
}
.rs-list__label {
  display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ab-gold, #b8892b); margin-bottom: 12px;
}
.rs-list__items { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.rs-list__items--two { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 26px; }
.rs-list__items li { position: relative; padding-left: 18px; font-size: 14.5px; line-height: 1.6; color: var(--ab-slate, #475569); }
.rs-list__items li::before {
  content: ""; position: absolute; left: 2px; top: 8px; width: 7px; height: 7px;
  border-radius: 50%; background: var(--brand-gold, #e0a92e);
}

.rs-flow {
  margin: 0 0 20px; padding: 16px 22px; border-radius: 10px;
  background: var(--ab-ink, #0b1f3f); color: #fff;
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 0;
}
.rs-flow__lead {
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  color: var(--brand-gold, #e0a92e); margin-right: 16px;
}
.rs-flow__steps { display: flex; flex-wrap: wrap; gap: 4px 0; list-style: none; margin: 0; padding: 0; }
.rs-flow__steps li { font-size: 12.5px; letter-spacing: .05em; text-transform: uppercase; color: rgba(255,255,255,.92); }
.rs-flow__steps li + li::before { content: "→"; margin: 0 9px; color: rgba(255,255,255,.42); }

.rs-cta { margin: 22px 0 28px; }
.rs-cta a {
  display: inline-flex; align-items: center; gap: 9px; padding: 13px 22px; border-radius: 8px;
  background: var(--brand-gold, #e0a92e); color: #16204a; text-decoration: none;
  font-size: 13.5px; font-weight: 700; letter-spacing: .02em;
  transition: background .16s, transform .16s;
}
.rs-cta a:hover { background: var(--brand-gold-soft, #f0c257); transform: translateY(-1px); }
.rs-cta a svg { fill: currentColor; }

@media (max-width: 1080px) {
  .rs-hero__grid { grid-template-columns: 1fr; gap: 28px; }
  .rs-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
  .rs-hero__h1 { font-size: 30px; }
  .rs-hero--compact .rs-hero__h1 { font-size: 26px; }
  .rs-cards { grid-template-columns: 1fr; }
  .rs-list__items--two { grid-template-columns: 1fr; }
  .rs-list, .rs-flow { padding-inline: 16px; }
}

/* the hub intro sits on the dark hero, so its flow strip needs the inverse */
.rs-flow--onDark { background: rgba(0,0,0,.3); border: 1px solid rgba(255,255,255,.14); margin-top: 6px; }
.rs-hero__list { list-style: none; margin: 0 0 14px; padding: 0; display: grid; gap: 7px; }
.rs-hero__list li { position: relative; padding-left: 16px; font-size: 14.5px; color: rgba(255,255,255,.82); }
.rs-hero__list li::before { content: ""; position: absolute; left: 2px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand-gold, #e0a92e); }

/* ==================================================================== *
 * Client feedback (21 Aug): too much space between sections, plain
 * lists should be boxes, and more imagery.
 * The earlier tighten pass only touched .v2-sec (certification pages);
 * the pages under review use .ab-sec, which was still at 74px.
 * ==================================================================== */
.ab-sec { padding: 46px 0; }
@media (min-width: 1200px) { .ab-sec { padding: 50px 0; } }
@media (max-width: 900px)  { .ab-sec { padding: 36px 0; } }

/* the internal rhythm was set against the old 74px sections */
.ab-head { margin-bottom: 28px; }
.ab-panel { margin-top: 22px; padding: 26px 28px 24px; }
.ab-two, .ab-grid3, .ab-four-cards { gap: 16px; }
.ab-split { gap: 38px; }
.ab-sec .ab-panel + .ab-panel { margin-top: 18px; }

/* ---- Plain bullet items become cards -------------------------------- *
   The client asked for boxes rather than a plain three-column list. Same
   copy, same order; each item now carries an icon and lifts on hover.   */
.ab-grid3--cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.ab-fcard {
  display: flex; gap: 14px; align-items: flex-start;
  padding: 18px 20px; border-radius: 12px;
  background: #fff; border: 1px solid var(--ab-line, #e4e9f2);
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}
.ab-fcard:hover {
  transform: translateY(-3px);
  box-shadow: 0 18px 40px -28px rgba(11, 31, 63, .55);
  border-color: var(--brand-gold, #e0a92e);
}
.ab-fcard__icon {
  flex: none; width: 44px; height: 44px; border-radius: 11px;
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--brand-gold, #e0a92e) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-gold, #e0a92e) 34%, transparent);
  color: var(--ab-gold, #b8892b);
}
.ab-fcard__icon svg { width: 22px; height: 22px; fill: currentColor; }
.ab-fcard__t { display: block; font-size: 14.5px; font-weight: 700; color: var(--ab-ink, #0b1f3f); margin-bottom: 4px; }
.ab-fcard__d { display: block; font-size: 13.4px; line-height: 1.6; color: var(--ab-grey, #64748b); }
.ab-panel--gold .ab-fcard { background: #fff; }

@media (max-width: 980px) { .ab-grid3--cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .ab-grid3--cards { grid-template-columns: 1fr; } }

/* Captioned image band — the client asked for more imagery on the designed
   pages. The first figure runs double width so the row does not read as a
   flat filmstrip. */
.ab-band { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ab-band__item {
  position: relative; margin: 0; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--ab-line, #e4e9f2); background: #061532;
  aspect-ratio: 4 / 3;
}
.ab-band__item--lead { grid-column: span 2; aspect-ratio: 8 / 3; }
.ab-band__item img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transform: scale(1.02); transition: transform .9s cubic-bezier(.22,.61,.36,1);
}
.ab-band__item:hover img { transform: scale(1.07); }
.ab-band__item figcaption {
  position: absolute; inset: auto 0 0 0; padding: 30px 16px 14px;
  background: linear-gradient(180deg, transparent, rgba(6, 21, 50, .86));
  color: #fff;
}
.ab-band__item figcaption strong { display: block; font-size: 13.5px; font-weight: 700; }
.ab-band__item figcaption span { display: block; font-size: 12px; color: rgba(255, 255, 255, .76); margin-top: 2px; }
@media (max-width: 980px) {
  .ab-band { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ab-band__item--lead { grid-column: span 2; aspect-ratio: 16 / 7; }
}
@media (max-width: 560px) {
  .ab-band { grid-template-columns: 1fr; }
  .ab-band__item, .ab-band__item--lead { grid-column: auto; aspect-ratio: 16 / 10; }
}
@media (prefers-reduced-motion: reduce) {
  .ab-band__item img, .ab-band__item:hover img { transform: none; transition: none; }
}

/* Long-form document pages rendered in the About-page vocabulary. The blocks
   arrive as heads, prose, lists and arrow flows; these rules give them the same
   rhythm as the mockup-built pages. */
.ab-blk { max-width: 1000px; }
.ab-blk__h { font-size: 17px; margin: 26px 0 10px; color: var(--ab-ink, #0b1f3f); }
.ab-blk__h:first-child { margin-top: 0; }
.ab-blk__list { margin: 0 0 18px; padding: 20px 24px; }
.ab-blk__flow { margin: 0 0 20px; }
.ab-blk__cta { margin: 20px 0 24px; }

/* A stage that leads with a single photograph beside its opening copy. */
.ab-stage-split { align-items: start; margin-bottom: 26px; }
.ab-montage--single { padding-bottom: 0; }
.ab-montage--single .ab-montage__main { position: relative; width: 100%; height: auto; border-radius: 14px; }
.ab-blk--full { max-width: 1000px; }
@media (max-width: 900px) { .ab-stage-split { gap: 24px; } }

/* Full-width photograph used to break long runs of copy on the exam pages. */
.ab-wide {
  position: relative; margin: 0; border-radius: 16px; overflow: hidden;
  border: 1px solid var(--ab-line, #e4e9f2); background: #061532; aspect-ratio: 21 / 7;
}
.ab-wide img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ab-wide figcaption {
  position: absolute; inset: auto 0 0 0; padding: 34px 22px 16px;
  background: linear-gradient(180deg, transparent, rgba(6, 21, 50, .85)); color: #fff;
}
.ab-wide figcaption strong {
  display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: var(--brand-gold, #e0a92e);
}
.ab-wide figcaption span { display: block; font-size: 14px; margin-top: 3px; }
@media (max-width: 760px) { .ab-wide { aspect-ratio: 16 / 9; } }



/* The reading column was capped at 1000px but left-aligned, leaving a third of
   the container empty on the right. Centre it, and let the step cards use the
   full width so the page does not read as one narrow strip. */
.ab-blk, .ab-blk--full { margin-inline: auto; }
.ab-blk--full { max-width: 1100px; }
.ab-step { max-width: 1100px; margin-inline: auto; }

/* ==================================================================== *
 * Step cards — built to the client's reference screenshots (Aug 25).
 * Those references are consistently: a capsule card, a circular badge
 * carrying the step number and an icon, a colour-coded sequence, and a
 * two-column arrangement. Applied here in the IBACTP palette rather than
 * the references' rainbow, so the brand holds.
 * ==================================================================== */
.ab-steps { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; align-items: start; }

.ab-step {
  --sc: var(--ab-ink, #0b1f3f);
  position: relative;

  background: #fff;
  border: 1px solid var(--ab-line, #e4e9f2);
  /* A capsule radius only reads as a capsule on a short card. These hold
     hundreds of lines, so 999px drew an enormous arc down the left edge.
     Fixed corners, with the circular badge doing the shape work instead. */
  border-radius: 18px;
  box-shadow: 0 14px 34px -26px rgba(11, 31, 63, .5);
  margin: 0 0 20px;
  overflow: visible;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ab-step:hover { transform: translateY(-3px); box-shadow: 0 22px 46px -26px rgba(11, 31, 63, .55); }

/* the circular badge */
.ab-step__head {
  position: relative; z-index: 2;
  width: 112px; height: 112px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  background: var(--sc); color: #fff;
  border: 5px solid #fff;
  box-shadow: 0 10px 26px -12px rgba(11, 31, 63, .65);
  margin: 20px 0 0 18px;
}
.ab-step__head::after {
  content: ""; position: absolute; inset: 7px; border-radius: 50%;
  border: 1.5px dashed rgba(255, 255, 255, .45);
}
.ab-step__icon svg { width: 30px; height: 30px; fill: currentColor; }
.ab-step__n {
  font-size: 11px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase;
  color: rgba(255, 255, 255, .95);
}

/* a coloured spine ties the badge to the full height of the card */
.ab-step::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px;
  background: var(--sc); border-radius: 18px 0 0 18px;
}
.ab-step__t {
  margin: 0 0 8px; font-size: 17px; font-weight: 800; line-height: 1.28;
  color: var(--ab-ink, #0b1f3f);
}
.ab-step__t::after {
  content: ""; display: block; width: 42px; height: 3px; border-radius: 2px;
  background: var(--sc); margin-top: 9px;
}
.ab-step__body .ab-p { font-size: 14.4px; margin-bottom: 10px; }
.ab-step__body > :last-child { margin-bottom: 0; }
.ab-step__body .ab-blk__h { font-size: 15px; margin: 16px 0 8px; }
.ab-step__body .ab-blk__h:first-child { margin-top: 0; }
.ab-step__body .ab-panel { padding: 16px 18px; margin-bottom: 12px; }

/* colour-coded sequence, drawn from the palette already in the theme */
.ab-step:nth-child(6n+1) { --sc: #0b1f3f; }
.ab-step:nth-child(6n+2) { --sc: #b8892b; }
.ab-step:nth-child(6n+3) { --sc: #1d6fd9; }
.ab-step:nth-child(6n+4) { --sc: #12a594; }
.ab-step:nth-child(6n+5) { --sc: #6d28d9; }
.ab-step:nth-child(6n+6) { --sc: #c2417b; }

@media (max-width: 1180px) { .ab-steps { grid-template-columns: 1fr; } }
@media (max-width: 620px) {
  .ab-step { grid-template-columns: 1fr; border-radius: 18px; }
  .ab-step__head {
    width: 96px; height: 96px; margin: 18px auto -34px; border-width: 4px;
  }
  .ab-step__body { padding: 44px 20px 18px; text-align: center; }
  .ab-step__t::after { margin-inline: auto; }
}

/* A bare route summary — the document lists the journey's step names with no
   body text. Rendering those as full step cards produced a run of empty boxes
   with large badges, so they are set as a compact numbered route instead. */
.ab-route {
  list-style: none; margin: 0 0 22px; padding: 20px 24px;
  background: var(--ab-tint, #f6f8fb); border: 1px solid var(--ab-line, #e4e9f2);
  border-left: 4px solid var(--brand-gold, #e0a92e); border-radius: 12px;
  display: grid; gap: 10px; max-width: 1100px; margin-inline: auto;
}
.ab-route__item {
  display: flex; align-items: center; gap: 13px;
  font-size: 14.6px; font-weight: 600; color: var(--ab-ink, #0b1f3f);
}
.ab-route__n {
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ab-ink, #0b1f3f); color: #fff;
  font-size: 12.5px; font-weight: 800;
}

/* ==================================================================== *
 * Step accordions.
 * These documents run to tens of thousands of pixels on one URL, which no
 * amount of card styling makes readable — the client's reference designs
 * look good partly because their sections are short. Each step therefore
 * opens on demand: the page is scannable at a glance and the detail is one
 * click away. <details>/<summary> keeps it working without JavaScript and
 * keyboard-accessible by default.
 * ==================================================================== */
.ab-step {
  display: block;
  max-width: 1100px; margin: 0 auto 14px;
  background: #fff;
  border: 1px solid var(--ab-line, #e4e9f2);
  border-radius: 16px;
  box-shadow: 0 10px 26px -22px rgba(11, 31, 63, .45);
  overflow: hidden;
  transition: box-shadow .18s ease, border-color .18s ease;
}
.ab-step[open] { box-shadow: 0 20px 44px -26px rgba(11, 31, 63, .5); border-color: color-mix(in srgb, var(--sc) 40%, var(--ab-line, #e4e9f2)); }
.ab-step::before { content: none; }

.ab-step__summary {
  display: grid; grid-template-columns: 96px minmax(0, 1fr) 40px;
  align-items: center; gap: 18px;
  padding: 16px 20px 16px 16px;
  cursor: pointer; list-style: none;
  border-left: 5px solid var(--sc);
}
.ab-step__summary::-webkit-details-marker { display: none; }
.ab-step__summary:hover { background: color-mix(in srgb, var(--sc) 4%, #fff); }
.ab-step__summary:focus-visible { outline: 3px solid var(--sc); outline-offset: -3px; }

.ab-step__head {
  width: 78px; height: 78px; border-radius: 50%;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--sc); color: #fff; border: 4px solid #fff;
  box-shadow: 0 8px 20px -10px rgba(11, 31, 63, .6);
  margin: 0;
}
.ab-step__head::after { content: ""; position: absolute; inset: 6px; border-radius: 50%; border: 1.5px dashed rgba(255,255,255,.4); }
.ab-step__head { position: relative; }
.ab-step__icon svg { width: 22px; height: 22px; fill: currentColor; }
.ab-step__n { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }

.ab-step__label { min-width: 0; }
.ab-step__t {
  display: block; margin: 0; font-size: 17px; font-weight: 800; line-height: 1.3;
  color: var(--ab-ink, #0b1f3f);
}
.ab-step__t::after { content: none; }
.ab-step__hint {
  display: block; margin-top: 4px; font-size: 12.5px; font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--sc);
}
.ab-step__chev {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center; justify-self: end;
  background: color-mix(in srgb, var(--sc) 10%, #fff); color: var(--sc);
  transition: transform .2s ease, background .2s ease;
}
.ab-step__chev svg { fill: currentColor; transform: rotate(90deg); }
.ab-step[open] .ab-step__chev { transform: rotate(180deg); background: var(--sc); color: #fff; }

.ab-step__body {
  padding: 4px 28px 22px 28px;
  border-top: 1px solid var(--ab-line, #e4e9f2);
  margin-top: 2px;
}
.ab-step__body > :first-child { margin-top: 18px; }

@media (max-width: 620px) {
  .ab-step__summary { grid-template-columns: 64px minmax(0, 1fr) 30px; gap: 12px; padding: 13px 14px; }
  .ab-step__head { width: 58px; height: 58px; border-width: 3px; }
  .ab-step__icon svg { width: 17px; height: 17px; }
  .ab-step__t { font-size: 15px; }
  .ab-step__body { padding: 4px 16px 18px; }
}
@media (prefers-reduced-motion: reduce) { .ab-step__chev { transition: none; } }

/* The reading column and its accordions sit inside .container, which is wider
   than the measure we want for prose. Centre them explicitly — a bare
   `margin-inline: auto` earlier in the file was not winning the cascade. */
.ab-page .ab-blk,
.ab-page .ab-blk--full,
.ab-page .ab-route,
.ab-page .ab-step {
  margin-left: auto;
  margin-right: auto;
}

/* A run of "label / one-line value" pairs is a specification, not a stack of
   headings. The exam documents carry several (questions, duration, pass mark,
   validity), and they read far better as a table. */
.ab-spec {
  margin: 0 auto 22px; max-width: 1100px;
  border: 1px solid var(--ab-line, #e4e9f2); border-radius: 14px;
  overflow: hidden; background: #fff;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
}
.ab-spec__row {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px; align-items: baseline;
  padding: 14px 20px; border-bottom: 1px solid var(--ab-line, #e4e9f2);
}
.ab-spec__row:nth-child(odd) { border-right: 1px solid var(--ab-line, #e4e9f2); }
.ab-spec dt {
  font-size: 12.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ab-grey, #64748b); margin: 0;
}
.ab-spec dd {
  margin: 0; font-size: 15.5px; font-weight: 700; color: var(--ab-ink, #0b1f3f);
}
@media (max-width: 760px) {
  .ab-spec { grid-template-columns: 1fr; }
  .ab-spec__row:nth-child(odd) { border-right: 0; }
}


/* The exam-section hero ran very tall: the montage is a portrait-ish composition
   beside a short block of copy, so the row height was driven by the image and
   left a large empty column. Cap the art and align the copy to it. */
.ab-page .ab-sec--flush .ab-split--wide {
  align-items: center;
  gap: 44px;
}
.exam-hero .ab-montage { max-width: 640px; margin-left: auto; }
.exam-hero .ab-montage__main { max-height: 400px; object-fit: cover; }
.exam-hero .ab-montage__inset { max-width: 250px; }
.exam-hero .ab-h1 { font-size: 36px; }
.exam-hero .ab-kicker { max-width: 58ch; }
@media (max-width: 1080px) {
  .exam-hero .ab-montage { max-width: 100%; margin-inline: auto; }
  .exam-hero .ab-montage__main { max-height: 320px; }
}

/* ==================================================================== *
 * Commerce — booking, cart, checkout and customer accounts.
 * ==================================================================== */
.sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }

.shop-flash {
  max-width: 1100px; margin: 0 auto 22px; padding: 14px 20px; border-radius: 10px;
  background: color-mix(in srgb, var(--brand-gold, #e0a92e) 12%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-gold, #e0a92e) 40%, transparent);
  color: var(--ab-ink, #0b1f3f); font-size: 14.5px; font-weight: 600;
}
.shop-flash--warn { background: #fff5f5; border-color: #f3c2c2; }
.shop-empty { text-align: center; padding: 40px 0; }

.shop-grid { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 26px; align-items: start; }
.shop-lines { display: grid; gap: 14px; }

.shop-line {
  display: grid; grid-template-columns: 150px minmax(0, 1fr) 170px; gap: 20px; align-items: center;
  background: #fff; border: 1px solid var(--ab-line, #e4e9f2); border-radius: 14px; padding: 16px;
}
.shop-line__img { width: 150px; height: 110px; object-fit: cover; border-radius: 10px; display: block; }
.shop-line__code { font-size: 12px; font-weight: 800; letter-spacing: .1em; color: var(--brand-gold, #e0a92e); }
.shop-line__t { margin: 5px 0 4px; font-size: 17px; font-weight: 700; color: var(--ab-ink, #0b1f3f); }
.shop-line__route { margin: 0 0 10px; font-size: 14px; color: var(--ab-grey, #64748b); }
.shop-line__date label { display: grid; gap: 5px; }
.shop-line__date span { font-size: 11.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--ab-gold, #b8892b); }
.shop-line__date select { padding: 9px 12px; border-radius: 8px; border: 1px solid var(--ab-line, #e4e9f2); font-size: 14px; background: #fff; max-width: 300px; }
.shop-line__actions { display: grid; justify-items: end; gap: 8px; }
.shop-qty input { width: 74px; padding: 9px 10px; border-radius: 8px; border: 1px solid var(--ab-line, #e4e9f2); font-size: 14.5px; text-align: center; }
.shop-line__price { margin: 0; font-size: 19px; font-weight: 800; color: var(--ab-ink, #0b1f3f); }
.shop-line__price small { font-size: 11.5px; font-weight: 600; color: var(--ab-grey, #64748b); }
.shop-remove { background: none; border: 0; padding: 0; cursor: pointer; font-size: 13px; color: #b4443c; text-decoration: underline; }

.shop-summary {
  background: var(--ab-tint, #f6f8fb); border: 1px solid var(--ab-line, #e4e9f2);
  border-radius: 14px; padding: 24px; position: sticky; top: 16px;
}
.shop-summary__t { margin: 0 0 16px; font-size: 17px; font-weight: 800; color: var(--ab-ink, #0b1f3f); }
.shop-summary__rows div, .shop-summary__items li { display: flex; justify-content: space-between; gap: 14px; padding: 9px 0; border-bottom: 1px solid var(--ab-line, #e4e9f2); font-size: 14.5px; }
.shop-summary__rows dt, .shop-summary__items span { color: var(--ab-grey, #64748b); }
.shop-summary__rows dd { margin: 0; font-weight: 700; color: var(--ab-ink, #0b1f3f); }
.shop-summary__items { list-style: none; margin: 0 0 8px; padding: 0; }
.shop-summary__items em { display: block; font-style: normal; font-size: 12.5px; color: var(--ab-gold, #b8892b); font-weight: 700; }
.shop-summary__date { color: var(--blue-600, #1d6fd9) !important; }
.shop-summary__total { display: flex; justify-content: space-between; align-items: baseline; margin: 14px 0 18px; font-size: 15px; }
.shop-summary__total strong { font-size: 24px; font-weight: 800; color: var(--ab-ink, #0b1f3f); }
.shop-summary__go { width: 100%; justify-content: center; }
.shop-summary__back { display: block; text-align: center; margin-top: 12px; font-size: 13.5px; color: var(--ab-grey, #64748b); }
.shop-summary__note { margin: 14px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ab-grey, #64748b); }

.shop-form { background: #fff; border: 1px solid var(--ab-line, #e4e9f2); border-radius: 14px; padding: 26px; }
.shop-form__h { margin: 0 0 18px; font-size: 17px; font-weight: 800; color: var(--ab-ink, #0b1f3f); }
.shop-form label, .shop-auth label { display: grid; gap: 6px; margin-bottom: 15px; font-size: 13.5px; font-weight: 700; color: var(--ab-ink, #0b1f3f); }
.shop-form label small { font-weight: 500; color: var(--ab-grey, #64748b); }
.shop-form input, .shop-form select, .shop-form textarea,
.shop-auth input, .shop-auth select {
  padding: 11px 13px; border-radius: 9px; border: 1px solid var(--ab-line, #e4e9f2);
  font: 400 15px/1.4 inherit; background: #fff; color: var(--ab-ink, #0b1f3f);
}
.shop-form input:focus, .shop-form select:focus, .shop-form textarea:focus,
.shop-auth input:focus { outline: 2px solid var(--brand-gold, #e0a92e); outline-offset: 1px; }
.shop-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.shop-form em, .shop-auth em, .shop-form__err { display: block; font-style: normal; font-size: 12.5px; color: #b4443c; font-weight: 600; }
.shop-form__check { display: flex !important; align-items: flex-start; gap: 10px; font-weight: 500; }
.shop-form__check input { width: auto; }

.shop-auth { max-width: 480px; margin: 0 auto; }
.shop-auth .ab-btn { width: 100%; justify-content: center; margin-top: 4px; }
.shop-auth__alt { margin-top: 18px; text-align: center; font-size: 14px; color: var(--ab-grey, #64748b); }

.shop-done { text-align: center; max-width: 640px; margin: 0 auto 30px; }
.shop-done__mark {
  width: 68px; height: 68px; border-radius: 50%; display: grid; place-items: center;
  background: var(--brand-gold, #e0a92e); color: #16204a; margin: 0 auto 16px;
}
.shop-done__mark svg { fill: currentColor; }

.shop-order { background: #fff; border: 1px solid var(--ab-line, #e4e9f2); border-radius: 14px; overflow: hidden; margin-bottom: 18px; }
.shop-order__head { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; padding: 18px 22px; background: var(--ab-tint, #f6f8fb); border-bottom: 1px solid var(--ab-line, #e4e9f2); }
.shop-order__head span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ab-grey, #64748b); }
.shop-order__head strong { font-size: 15.5px; color: var(--ab-ink, #0b1f3f); }
.shop-order__table { margin: 0; }
.shop-status--pending { color: var(--ab-gold, #b8892b); }
.shop-status--paid { color: #0d8a5f; }
.shop-signout { background: none; border: 0; padding: 15px 16px; cursor: pointer; font: 600 13.5px/1 inherit; color: var(--ab-slate, #475569); }

/* the booking form on the schedule page */
.tsched { max-width: 720px; margin: 0 auto; background: #fff; border: 1px solid var(--ab-line, #e4e9f2); border-radius: 14px; padding: 26px; display: grid; gap: 16px; }
.tsched__field { display: grid; gap: 8px; }
.tsched__label { font-size: 12px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--ab-gold, #b8892b); }
.tsched select { padding: 13px 14px; border-radius: 10px; border: 1px solid var(--ab-line, #e4e9f2); font-size: 15.5px; background: #fff; }
.tsched select:focus { outline: 2px solid var(--brand-gold, #e0a92e); outline-offset: 1px; }
.tsched__error { font-size: 13px; color: #b4443c; font-weight: 600; }
.tsched__submit { justify-content: center; }
.tsched__note { max-width: 720px; margin: 16px auto 0; text-align: center; font-size: 13.5px; color: var(--ab-grey, #64748b); }

@media (max-width: 980px) {
  .shop-grid { grid-template-columns: 1fr; }
  .shop-summary { position: static; }
  .shop-line { grid-template-columns: 110px minmax(0, 1fr); }
  .shop-line__actions { grid-column: 1 / -1; justify-items: start; grid-auto-flow: column; align-items: center; gap: 18px; }
  .shop-order__head { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
  .shop-form__row { grid-template-columns: 1fr; }
  .shop-line { grid-template-columns: 1fr; }
  .shop-line__img { width: 100%; height: 160px; }
}

.shop-cartlink {
  display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px;
  border-radius: 999px; border: 1px solid var(--line, #e3e8ef);
  font-size: 13px; font-weight: 700; color: var(--navy-900, #0b1b3d); text-decoration: none;
}
.shop-cartlink:hover { border-color: var(--brand-gold, #e0a92e); }
.shop-cartlink svg { fill: currentColor; }
.shop-cartlink b {
  min-width: 20px; height: 20px; border-radius: 999px; display: grid; place-items: center;
  background: var(--brand-gold, #e0a92e); color: #16204a; font-size: 11.5px;
}

/* ==================================================================== *
 * Instructor tabs on the booking page.
 * The reference cramps session facts into a dark sidebar and uses plain
 * text links as tabs. Here the facts run as a strip above (so they stay
 * visible whichever instructor is chosen) and each tab carries an avatar
 * and role, so it reads as a person. Radio inputs drive the panels, which
 * keeps the whole thing working with no JavaScript.
 * ==================================================================== */
.trn-facts {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1px;
  list-style: none; margin: 0 0 22px; padding: 0;
  background: var(--ab-line, #e4e9f2); border: 1px solid var(--ab-line, #e4e9f2);
  border-radius: 14px; overflow: hidden;
}
.trn-facts li { background: #fff; padding: 16px 18px; }
.trn-facts span {
  display: block; font-size: 11px; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ab-grey, #64748b); margin-bottom: 5px;
}
.trn-facts strong { font-size: 15.5px; font-weight: 700; color: var(--ab-ink, #0b1f3f); }

.trn { background: #fff; border: 1px solid var(--ab-line, #e4e9f2); border-radius: 16px; overflow: hidden; }
.trn__tabs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.trn__radio { position: absolute; opacity: 0; pointer-events: none; }

.trn__tab {
  display: flex; align-items: center; gap: 13px;
  padding: 18px 20px; cursor: pointer;
  border-bottom: 3px solid transparent;
  background: var(--ab-tint, #f6f8fb);
  transition: background .16s ease, border-color .16s ease;
}
.trn__tab + .trn__tab { border-left: 1px solid var(--ab-line, #e4e9f2); }
.trn__tab:hover { background: #fff; }
.trn__avatar {
  flex: none; width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ab-ink, #0b1f3f); color: #fff;
  font-size: 14px; font-weight: 800; letter-spacing: .04em;
}
.trn__tabtext { min-width: 0; }
.trn__tabtext strong { display: block; font-size: 15px; font-weight: 700; color: var(--ab-ink, #0b1f3f); }
.trn__tabtext em {
  display: block; font-style: normal; font-size: 12.4px; margin-top: 2px;
  color: var(--ab-grey, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* selected tab */
.trn__radio:checked + .trn__tab {
  background: #fff; border-bottom-color: var(--brand-gold, #e0a92e);
}
.trn__radio:checked + .trn__tab .trn__avatar { background: var(--brand-gold, #e0a92e); color: #16204a; }
.trn__radio:focus-visible + .trn__tab { outline: 3px solid var(--brand-gold, #e0a92e); outline-offset: -3px; }

/* panels: hidden by default, revealed by the matching radio */
.trn__panel { display: none; grid-column: 1 / -1; padding: 30px 32px 32px; border-top: 1px solid var(--ab-line, #e4e9f2); }
.trn__radio:nth-of-type(1):checked ~ .trn__panel:nth-of-type(1),
.trn__radio:nth-of-type(2):checked ~ .trn__panel:nth-of-type(2),
.trn__radio:nth-of-type(3):checked ~ .trn__panel:nth-of-type(3) { display: block; }

.trn__head { display: flex; gap: 22px; align-items: flex-start; margin-bottom: 20px; }
.trn__portrait {
  flex: none; width: 104px; height: 104px; border-radius: 20px;
  display: grid; place-items: center;
  background: linear-gradient(150deg, #0e2547, #16345f);
  color: var(--brand-gold, #e0a92e);
  font-size: 30px; font-weight: 800; letter-spacing: .04em;
  box-shadow: 0 14px 30px -18px rgba(11, 31, 63, .7);
}
.trn__name { margin: 0 0 4px; font-size: 24px; font-weight: 800; color: var(--ab-ink, #0b1f3f); letter-spacing: -.01em; }
.trn__role { margin: 0 0 12px; font-size: 14.6px; font-weight: 700; color: var(--blue-600, #1d6fd9); }
.trn__creds { display: flex; flex-wrap: wrap; gap: 8px; list-style: none; margin: 0; padding: 0; }
.trn__creds li {
  padding: 6px 13px; border-radius: 999px;
  background: color-mix(in srgb, var(--brand-gold, #e0a92e) 13%, #fff);
  border: 1px solid color-mix(in srgb, var(--brand-gold, #e0a92e) 38%, transparent);
  font-size: 12.4px; font-weight: 700; color: var(--ab-gold, #b8892b);
}
.trn__summary {
  margin: 0 0 18px; padding: 16px 20px; border-radius: 12px;
  background: var(--ab-tint, #f6f8fb); border-left: 4px solid var(--brand-gold, #e0a92e);
  font-size: 15.4px; line-height: 1.65; font-weight: 600; color: var(--ab-ink, #0b1f3f);
}
.trn__split { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; margin-top: 22px; }
.trn__label {
  display: block; font-size: 11.5px; font-weight: 800; letter-spacing: .11em;
  text-transform: uppercase; color: var(--ab-gold, #b8892b); margin-bottom: 12px;
}
.trn__chips { display: flex; flex-wrap: wrap; gap: 9px; list-style: none; margin: 0; padding: 0; }
.trn__chips li {
  padding: 8px 15px; border-radius: 8px;
  background: var(--ab-tint, #f6f8fb); border: 1px solid var(--ab-line, #e4e9f2);
  font-size: 13.6px; font-weight: 600; color: var(--ab-slate, #475569);
}
.trn__cta { margin-top: 26px; }
.trn__note { margin: 16px auto 0; max-width: 900px; text-align: center; font-size: 12.8px; font-style: italic; color: var(--ab-grey, #64748b); }

.trn__org { margin-top: 26px; background: #fff; border: 1px solid var(--ab-line, #e4e9f2); border-radius: 14px; padding: 24px 28px; }
.trn__orgrows { list-style: none; margin: 14px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.trn__orgrows span { display: block; font-size: 11px; font-weight: 800; letter-spacing: .11em; text-transform: uppercase; color: var(--ab-grey, #64748b); margin-bottom: 4px; }
.trn__orgrows strong { font-size: 14.4px; font-weight: 600; color: var(--ab-ink, #0b1f3f); }

@media (max-width: 1080px) {
  .trn-facts { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .trn__orgrows { grid-template-columns: 1fr; }
}
@media (max-width: 820px) {
  .trn__tabs { grid-template-columns: 1fr; }
  .trn__tab + .trn__tab { border-left: 0; border-top: 1px solid var(--ab-line, #e4e9f2); }
  .trn__split { grid-template-columns: 1fr; gap: 22px; }
  .trn__head { flex-direction: column; gap: 16px; }
  .trn__panel { padding: 24px 20px 26px; }
}
@media (max-width: 560px) {
  .trn-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .trn__name { font-size: 20px; }
  .trn__portrait { width: 84px; height: 84px; font-size: 25px; }
}

/* ==================================================================== *
 * Booking-page hero — dark, matching the rest of the site's heroes.
 * ==================================================================== */
.tsch-hero {
  background: linear-gradient(120deg, #071733 0%, #0e2547 58%, #123059 100%);
  color: #fff; position: relative; padding-block: 30px 56px;
}
.tsch-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(900px 420px at 80% 6%, rgba(224, 169, 46, .16), transparent 62%);
}
.tsch-hero > .container { position: relative; z-index: 1; }

.tsch-hero .breadcrumb,
.tsch-hero .breadcrumb a { color: rgba(255, 255, 255, .62); }
.tsch-hero .breadcrumb a:hover { color: #fff; }
.tsch-hero .ab-eyebrow { color: var(--brand-gold, #e0a92e); }
.tsch-hero .ab-h1 { color: #fff; }
.tsch-hero .ab-kicker { color: #7fb1e8; }
.tsch-hero .ab-p { color: rgba(255, 255, 255, .78); }

/* the spec block inverts on the dark ground */
.tsch-hero .ab-spec {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .16);
  max-width: 560px; margin-inline: 0;
}
.tsch-hero .ab-spec__row { border-bottom-color: rgba(255, 255, 255, .12); }
.tsch-hero .ab-spec__row:nth-child(odd) { border-right-color: rgba(255, 255, 255, .12); }
.tsch-hero .ab-spec dt { color: rgba(255, 255, 255, .58); }
.tsch-hero .ab-spec dd { color: #fff; }

.tsch-hero__cta { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; margin-top: 26px; }

/* the secondary control scrolls on down the page */
.tsch-scroll {
  display: inline-flex; align-items: center; gap: 11px;
  color: rgba(255, 255, 255, .82); text-decoration: none;
  font-size: 13.5px; font-weight: 700; letter-spacing: .04em;
}
.tsch-scroll:hover { color: #fff; }
.tsch-scroll__chev {
  width: 36px; height: 36px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid rgba(255, 255, 255, .32);
  background: rgba(255, 255, 255, .06);
  transition: transform .2s ease, background .2s ease, border-color .2s ease;
}
.tsch-scroll__chev svg { fill: currentColor; transform: rotate(90deg); }
.tsch-scroll:hover .tsch-scroll__chev {
  transform: translateY(3px);
  background: rgba(224, 169, 46, .2);
  border-color: var(--brand-gold, #e0a92e);
}
/* a gentle nudge so the control reads as "there is more below" */
@media (prefers-reduced-motion: no-preference) {
  .tsch-scroll__chev { animation: tsch-nudge 2.4s ease-in-out infinite; }
  @keyframes tsch-nudge {
    0%, 72%, 100% { transform: translateY(0); }
    82% { transform: translateY(4px); }
  }
  .tsch-scroll:hover .tsch-scroll__chev { animation: none; }
}

/* smooth the in-page jumps this hero introduces */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

@media (max-width: 620px) {
  .tsch-hero__cta { gap: 14px; }
  .tsch-hero .ab-spec { max-width: none; }
}

/* The four-day session shape, in the instructor panel's right column.
   A numbered timeline on a dark card — it gives the column a purpose and
   answers the question a candidate has before booking. */
.trn__days {
  position: relative;
  background: linear-gradient(155deg, #0b1f3f 0%, #16345f 100%);
  border-radius: 16px; padding: 24px 26px 20px; color: #fff;
  overflow: hidden;
  box-shadow: 0 18px 40px -28px rgba(11, 31, 63, .8);
}
/* a soft gold bloom and a dot grid, so the card is not a flat slab */
.trn__days::before {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(420px 220px at 100% 0%, rgba(224, 169, 46, .22), transparent 65%);
}
.trn__days::after {
  content: ""; position: absolute; right: -30px; bottom: -30px;
  width: 150px; height: 150px; border-radius: 50%;
  border: 28px solid rgba(255, 255, 255, .04); pointer-events: none;
}
.trn__days > * { position: relative; z-index: 1; }

.trn__days-h {
  display: flex; align-items: center; gap: 9px; margin-bottom: 18px;
  font-size: 11.5px; font-weight: 800; letter-spacing: .12em;
  text-transform: uppercase; color: var(--brand-gold, #e0a92e);
}
.trn__days-h svg { fill: currentColor; }

.trn__timeline { list-style: none; margin: 0; padding: 0; position: relative; }
.trn__timeline li { display: flex; gap: 14px; position: relative; padding-bottom: 18px; }
.trn__timeline li:last-child { padding-bottom: 4px; }
/* the connecting spine between day markers */
.trn__timeline li:not(:last-child)::before {
  content: ""; position: absolute; left: 15px; top: 34px; bottom: 2px; width: 2px;
  background: linear-gradient(180deg, rgba(224, 169, 46, .55), rgba(224, 169, 46, .12));
}
.trn__day-n {
  flex: none; width: 32px; height: 32px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand-gold, #e0a92e); color: #16204a;
  font-size: 13.5px; font-weight: 800;
}
.trn__day-body { min-width: 0; }
.trn__day-body strong { display: block; font-size: 14.8px; font-weight: 700; color: #fff; margin-bottom: 3px; }
.trn__day-body em {
  display: block; font-style: normal; font-size: 13.2px; line-height: 1.55;
  color: rgba(255, 255, 255, .74);
}
.trn__days-foot {
  margin: 16px 0 0; padding-top: 14px; border-top: 1px solid rgba(255, 255, 255, .14);
  font-size: 12.4px; color: rgba(255, 255, 255, .66);
}

@media (max-width: 820px) { .trn__days { padding: 20px 18px 16px; } }

/* ==================================================================== *
 * Checkout — two-column, numbered sections, sticky summary.
 * The previous version put the required marker in its own grid row, so a
 * stray asterisk floated under every label. Required is now a word inside
 * the label line, which also reads better to a screen reader.
 * ==================================================================== */
.cko-page { background: var(--ab-tint, #f6f8fb); padding-bottom: 60px; }
.cko-top { text-align: center; padding: 34px 0 10px; }
.cko-title { margin: 8px 0 20px; font-size: 32px; font-weight: 800; color: var(--ab-ink, #0b1f3f); letter-spacing: -.02em; }

.cko-steps { display: flex; justify-content: center; gap: 10px; list-style: none; margin: 0; padding: 0; flex-wrap: wrap; }
.cko-steps li { display: flex; align-items: center; gap: 9px; padding: 8px 16px; border-radius: 999px; background: #fff;
  border: 1px solid var(--ab-line, #e4e9f2); font-size: 13px; font-weight: 700; color: var(--ab-grey, #64748b); }
.cko-steps span { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ab-line, #e4e9f2); color: var(--ab-grey, #64748b); font-size: 11.5px; }
.cko-steps .is-current { border-color: var(--brand-gold, #e0a92e); color: var(--ab-ink, #0b1f3f); }
.cko-steps .is-current span { background: var(--brand-gold, #e0a92e); color: #16204a; }
.cko-steps .is-done span { background: #0d8a5f; color: #fff; }

.cko-signin { max-width: 1180px; margin: 0 auto 22px; padding: 14px 20px; border-radius: 12px; background: #fff;
  border: 1px solid var(--ab-line, #e4e9f2); border-left: 4px solid var(--brand-gold, #e0a92e);
  font-size: 14.5px; color: var(--ab-slate, #475569); }

.cko { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 26px; align-items: start;
  max-width: 1180px; margin: 0 auto; }
.cko__main { display: grid; gap: 18px; }

.cko-card { background: #fff; border: 1px solid var(--ab-line, #e4e9f2); border-radius: 16px; padding: 26px 28px 24px; }
.cko-card__h { display: flex; align-items: center; gap: 12px; margin: 0 0 20px;
  font-size: 18px; font-weight: 800; color: var(--ab-ink, #0b1f3f); }
.cko-card__n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--ab-ink, #0b1f3f); color: #fff; font-size: 13px; font-weight: 800; }
.cko-secure { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  font-weight: 700; color: #0d8a5f; }
.cko-secure svg { fill: currentColor; }

.cko-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cko-row--3 { grid-template-columns: 2fr 1.2fr 1fr; }
.cko-field { display: grid; gap: 6px; margin-bottom: 16px; }
.cko-label { font-size: 13px; font-weight: 700; color: var(--ab-ink, #0b1f3f); }
/* "required" as a quiet inline word rather than a stray asterisk on its own row */
.cko-label b { font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--ab-grey, #64748b); margin-left: 6px; }
.cko-field input, .cko-field select, .cko-field textarea {
  padding: 12px 14px; border-radius: 10px; border: 1px solid var(--ab-line, #e4e9f2);
  font: 400 15px/1.4 inherit; color: var(--ab-ink, #0b1f3f); background: #fff; width: 100%;
}
.cko-field input:focus, .cko-field select:focus, .cko-field textarea:focus {
  outline: 0; border-color: var(--brand-gold, #e0a92e);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand-gold, #e0a92e) 26%, transparent);
}
.cko-field small { font-size: 12.4px; color: var(--ab-grey, #64748b); }
.cko-field em, .cko-err { font-style: normal; font-size: 12.6px; font-weight: 600; color: #b4443c; }

/* payment */
.cko-pay { border: 1px solid var(--ab-line, #e4e9f2); border-radius: 12px; overflow: hidden; }
.cko-pay__opt { display: flex; align-items: center; gap: 12px; padding: 16px 18px; cursor: pointer;
  background: var(--ab-tint, #f6f8fb); border-bottom: 1px solid var(--ab-line, #e4e9f2); }
.cko-pay__opt input { width: 18px; height: 18px; accent-color: var(--brand-gold, #e0a92e); }
.cko-pay__label { display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%;
  font-size: 14.6px; font-weight: 700; color: var(--ab-ink, #0b1f3f); }
.cko-pay__sub { display: block; font-size: 12.8px; font-weight: 500; color: var(--ab-grey, #64748b); margin-top: 3px; }
.cko-cards { display: flex; gap: 6px; }
.cko-cards i { font-style: normal; font-size: 10px; font-weight: 800; letter-spacing: .04em; padding: 4px 7px;
  border-radius: 4px; background: #fff; border: 1px solid var(--ab-line, #e4e9f2); color: var(--ab-slate, #475569); }
.cko-stripe { padding: 18px; min-height: 52px; }
.cko-pay__note { margin: 0; padding: 0 18px 16px; font-size: 12.8px; color: var(--ab-grey, #64748b); }
.cko-pay__note--warn { padding-top: 14px; color: var(--ab-slate, #475569); }
.cko-pay__note code { background: var(--ab-tint, #f6f8fb); padding: 1px 6px; border-radius: 4px; font-size: 12px; }

.cko-terms { display: flex; align-items: flex-start; gap: 11px; margin-top: 18px; padding: 15px 17px;
  border-radius: 10px; background: var(--ab-tint, #f6f8fb); font-size: 14px; color: var(--ab-slate, #475569); cursor: pointer; }
.cko-terms input { width: 18px; height: 18px; margin-top: 1px; accent-color: var(--brand-gold, #e0a92e); }
.cko-terms b { font-weight: 600; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--ab-grey, #64748b); }

/* summary */
.cko__aside { position: sticky; top: 16px; }
.cko-sum { background: #fff; border: 1px solid var(--ab-line, #e4e9f2); border-radius: 16px; padding: 24px; }
.cko-sum__h { margin: 0 0 18px; font-size: 17px; font-weight: 800; color: var(--ab-ink, #0b1f3f); }
.cko-sum__items { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 15px; }
.cko-sum__items li { display: grid; grid-template-columns: 58px minmax(0, 1fr) auto; gap: 13px; align-items: center; }
.cko-sum__thumb { position: relative; width: 58px; height: 58px; border-radius: 10px; overflow: hidden;
  background: var(--ab-tint, #f6f8fb); border: 1px solid var(--ab-line, #e4e9f2); }
.cko-sum__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cko-sum__thumb b { position: absolute; top: -7px; right: -7px; min-width: 21px; height: 21px; border-radius: 999px;
  display: grid; place-items: center; background: var(--ab-ink, #0b1f3f); color: #fff; font-size: 11.5px; font-weight: 700; }
.cko-sum__info strong { display: block; font-size: 14.4px; color: var(--ab-ink, #0b1f3f); }
.cko-sum__info span { display: block; font-size: 12.8px; color: var(--ab-grey, #64748b); }
.cko-sum__info em { display: inline-flex; align-items: center; gap: 5px; margin-top: 4px; font-style: normal;
  font-size: 12.2px; font-weight: 700; color: var(--ab-gold, #b8892b); }
.cko-sum__info em svg { fill: currentColor; }
.cko-sum__price { font-size: 14.6px; font-weight: 700; color: var(--ab-ink, #0b1f3f); }

.cko-sum__rows { margin: 0 0 4px; padding-top: 16px; border-top: 1px solid var(--ab-line, #e4e9f2); }
.cko-sum__rows div { display: flex; justify-content: space-between; gap: 12px; padding: 7px 0; font-size: 14px; }
.cko-sum__rows dt { color: var(--ab-grey, #64748b); }
.cko-sum__rows dd { margin: 0; font-weight: 700; color: var(--ab-ink, #0b1f3f); }
.cko-sum__total { display: flex; justify-content: space-between; align-items: baseline; gap: 12px;
  margin: 12px 0 18px; padding-top: 14px; border-top: 1px solid var(--ab-line, #e4e9f2); font-size: 15px; font-weight: 700; }
.cko-sum__total strong { font-size: 27px; font-weight: 800; color: var(--ab-ink, #0b1f3f); }
.cko-sum__total small { font-size: 12px; font-weight: 700; color: var(--ab-grey, #64748b); margin-left: 5px; }

/* the pay button */
.cko-pay-btn {
  display: flex; align-items: center; justify-content: center; gap: 11px; width: 100%;
  padding: 17px 22px; border: 0; border-radius: 12px; cursor: pointer;
  background: linear-gradient(160deg, #e8b843 0%, #d8a846 45%, #b8892b 100%);
  color: #16204a; font: 800 15.5px/1 var(--font-display, inherit); letter-spacing: .02em;
  box-shadow: 0 12px 26px -14px rgba(184, 137, 43, .9);
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease;
}
.cko-pay-btn:hover { transform: translateY(-2px); box-shadow: 0 18px 34px -14px rgba(184, 137, 43, .95); filter: brightness(1.04); }
.cko-pay-btn:active { transform: translateY(0); }
.cko-pay-btn:focus-visible { outline: 3px solid var(--ab-ink, #0b1f3f); outline-offset: 2px; }
.cko-pay-btn__lock { display: grid; place-items: center; }
.cko-pay-btn svg { fill: currentColor; }
.cko-pay-btn__go { opacity: .8; }

.cko-sum__back { display: block; text-align: center; margin-top: 14px; font-size: 13.5px;
  color: var(--ab-grey, #64748b); text-decoration: none; }
.cko-sum__back:hover { color: var(--ab-ink, #0b1f3f); }

.cko-trust { list-style: none; margin: 18px 0 0; padding-top: 16px; border-top: 1px solid var(--ab-line, #e4e9f2);
  display: grid; gap: 9px; }
.cko-trust li { display: flex; align-items: center; gap: 9px; font-size: 12.8px; color: var(--ab-grey, #64748b); }
.cko-trust svg { fill: #0d8a5f; flex: none; }

@media (max-width: 1080px) {
  .cko { grid-template-columns: 1fr; }
  .cko__aside { position: static; order: -1; }
}
@media (max-width: 640px) {
  .cko-row, .cko-row--3 { grid-template-columns: 1fr; }
  .cko-card { padding: 20px 18px 18px; }
  .cko-title { font-size: 25px; }
}

/* ==================================================================== *
 * Masthead account + cart controls (right side).
 * ==================================================================== */
/* The icons live inside .masthead__actions beside search and the CTA, so they
   need no positioning of their own — a stray `margin-left:auto` here pushed the
   cart clean off the right edge of the masthead. */
.masthead__actions .mast-icon, .masthead__actions .mast-acct { flex: 0 0 auto; }

.mast-icon {
  position: relative; display: grid; place-items: center;
  width: 42px; height: 42px; border-radius: 50%;
  border: 1px solid var(--line, #e3e8ef); background: #fff;
  color: var(--navy-900, #0b1b3d); cursor: pointer; text-decoration: none;
  transition: border-color .16s, background .16s, transform .16s;
}
.mast-icon:hover { border-color: var(--brand-gold, #e0a92e); background: color-mix(in srgb, var(--brand-gold, #e0a92e) 9%, #fff); transform: translateY(-1px); }
.mast-icon:focus-visible { outline: 3px solid var(--brand-gold, #e0a92e); outline-offset: 2px; }
.mast-icon svg { fill: none; stroke: currentColor; }
.mast-icon--cart svg { stroke-width: 2; }

.mast-icon__count {
  position: absolute; top: -3px; right: -3px;
  min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px;
  display: grid; place-items: center;
  background: var(--brand-gold, #e0a92e); color: #16204a;
  font-size: 11px; font-weight: 800; border: 2px solid #fff;
}

/* signed-in avatar + dropdown */
.mast-acct { position: relative; }
.mast-icon--acct { background: var(--navy-900, #0b1b3d); border-color: var(--navy-900, #0b1b3d); color: #fff; }
.mast-icon--acct:hover { background: #16345f; border-color: #16345f; }
.mast-acct__initials { font-size: 13px; font-weight: 800; letter-spacing: .03em; }

.mast-acct__menu {
  position: absolute; right: 0; top: calc(100% + 10px); z-index: 60;
  min-width: 250px; padding: 8px; border-radius: 14px;
  background: #fff; border: 1px solid var(--line, #e3e8ef);
  box-shadow: 0 22px 48px -22px rgba(11, 31, 63, .5);
}
.mast-acct__menu[hidden] { display: none; }
.mast-acct__who { margin: 0; padding: 12px 14px 13px; border-bottom: 1px solid var(--line, #e3e8ef); }
.mast-acct__who strong { display: block; font-size: 14.5px; color: var(--navy-900, #0b1b3d); }
.mast-acct__who span { display: block; font-size: 12.5px; color: var(--ink-soft, #64748b); margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; }
.mast-acct__menu a, .mast-acct__menu button {
  display: block; width: 100%; text-align: left; padding: 11px 14px; border: 0; border-radius: 9px;
  background: none; cursor: pointer; text-decoration: none;
  font: 600 14px/1.2 inherit; color: var(--navy-900, #0b1b3d);
}
.mast-acct__menu a:hover, .mast-acct__menu button:hover { background: var(--ab-tint, #f6f8fb); }
.mast-acct__menu form { margin-top: 4px; border-top: 1px solid var(--line, #e3e8ef); padding-top: 4px; }
.mast-acct__menu form button { color: #b4443c; }

/* utility bar sign-out */
.utility__logout { display: inline; }
.utility__logout button {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; opacity: .85;
}
.utility__logout button:hover { opacity: 1; text-decoration: underline; }

@media (max-width: 900px) {
  .mast-actions { order: 2; margin-left: auto; margin-right: 8px; }
  .mast-icon { width: 38px; height: 38px; }
}

/* Account forms reuse the checkout card system, centred and narrower. */
.acct-form { max-width: 820px; margin: 0 auto; display: grid; gap: 18px; }
.acct-form--narrow { max-width: 520px; }
.acct-lede { max-width: 560px; margin: 0 auto; font-size: 15px; line-height: 1.65; color: var(--ab-grey, #64748b); }
.acct-alt { margin: 16px 0 0; text-align: center; font-size: 14px; color: var(--ab-grey, #64748b); }

/* Account dashboard */
.acct-hero { background: linear-gradient(120deg, #071733 0%, #0e2547 60%, #123059 100%); color: #fff; padding: 34px 0 30px; }
.acct-hero .ab-eyebrow { color: var(--brand-gold, #e0a92e); }
.acct-hero__row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.acct-hero__avatar {
  width: 66px; height: 66px; border-radius: 20px; display: grid; place-items: center;
  background: var(--brand-gold, #e0a92e); color: #16204a; font-size: 22px; font-weight: 800;
}
.acct-hero h1 { margin: 0 0 3px; font-size: 28px; font-weight: 800; color: #fff; }
.acct-hero p { margin: 0; font-size: 14.5px; color: rgba(255, 255, 255, .74); }

.acct-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
.acct-stat { background: #fff; border: 1px solid var(--ab-line, #e4e9f2); border-radius: 14px; padding: 20px 22px; }
.acct-stat__n { display: block; font-size: 30px; font-weight: 800; color: var(--ab-ink, #0b1f3f); line-height: 1; font-family: var(--font-display, inherit); }
.acct-stat__l { display: block; margin-top: 6px; font-size: 12.8px; font-weight: 600; color: var(--ab-grey, #64748b); }
.acct-stat--gold .acct-stat__n { color: var(--ab-gold, #b8892b); }

.acct-empty { background: #fff; border: 1px dashed var(--ab-line, #e4e9f2); border-radius: 14px;
  padding: 40px 24px; text-align: center; }
.acct-empty p { margin: 0 0 16px; font-size: 15px; color: var(--ab-grey, #64748b); }

@media (max-width: 860px) { .acct-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ==================================================================== *
 * Multi-image components — built to the client's high-fidelity designs.
 * Every hero uses a three-photo layered montage; narrative sections use
 * a dual-photo frame. Single standalone images are not used.
 * ==================================================================== */
.mont3 {
  position: relative;
  display: grid;
  /* Main photo beside two stacked insets. Nothing overlaps, so a face in the
     main shot is never covered. The insets carry the aspect ratio and the
     main stretches to match, which keeps the block balanced at any width. */
  grid-template-columns: 1.35fr 1fr;
  gap: 12px;
  max-width: 560px;
}
.mont3__main, .mont3__inset {
  margin: 0; border-radius: 14px; overflow: hidden;
  background: #0b1f3f;
  box-shadow: 0 10px 28px -18px rgba(11, 31, 63, .55);
}
.mont3__main { grid-column: 1; grid-row: 1 / span 2; }
.mont3__inset { aspect-ratio: 1 / 1; }
.mont3__inset--a { grid-column: 2; grid-row: 1; }
.mont3__inset--b { grid-column: 2; grid-row: 2; }
.mont3__main img, .mont3__inset img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
/* subjects sit in the upper third of a portrait; bias the crop upward */
.mont3__main img { object-position: 50% 28%; }

.mont3__badge {
  /* placed in the main photo's own grid cell rather than the container's
     corner, so it tracks the main image in every variant instead of
     landing on whichever inset happens to sit bottom-left */
  grid-column: 1; grid-row: 1 / span 2;
  align-self: end; justify-self: start;
  margin: 14px; z-index: 3;
  padding: 10px 16px; border-radius: 10px;
  background: rgba(11, 31, 63, .94);
  backdrop-filter: blur(3px);
  border: 1px solid rgba(216, 168, 70, .55);
  box-shadow: 0 12px 26px -14px rgba(0, 0, 0, .8);
}
.mont3__badge span {
  display: block; font-size: 9.5px; font-weight: 800; letter-spacing: .13em;
  text-transform: uppercase; color: #d8a846; margin-bottom: 2px;
}
.mont3__badge strong { display: block; font-size: 13px; font-weight: 700; color: #fff; line-height: 1.25; }

/* Landscape main photo: it sits full width on top with the insets beneath,
   so a 16:9 source is never squeezed into a portrait cell. */
.mont3--wide { grid-template-columns: 1fr 1fr; }
.mont3--wide .mont3__main { grid-column: 1 / span 2; grid-row: 1; aspect-ratio: 16 / 9; }
.mont3--wide .mont3__main img { object-position: 50% 50%; }
.mont3--wide .mont3__inset { aspect-ratio: 4 / 3; }
.mont3--wide .mont3__inset--a { grid-column: 1; grid-row: 2; }
.mont3--wide .mont3__inset--b { grid-column: 2; grid-row: 2; }
.mont3--wide .mont3__badge { grid-column: 1 / span 2; grid-row: 1; }

/* the montage sits on a soft plate, as the designs show */
.mont3--plated {
  padding: 14px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 20px;
  box-shadow: 0 20px 50px -34px rgba(11, 31, 63, .4);
}


/* ---- dual photo frame ---- */
.duo { position: relative; padding: 0 0 64px 0; max-width: 560px; }
.duo__a, .duo__b { margin: 0; border-radius: 16px; overflow: hidden; border: 4px solid #fff; background: #0b1f3f;
  box-shadow: 0 18px 44px -22px rgba(11, 31, 63, .5); }
.duo__a { aspect-ratio: 4 / 3; }
.duo__a img, .duo__b img { width: 100%; height: 100%; object-fit: cover; display: block; }
.duo__b { position: absolute; right: 0; bottom: 0; width: 62%; aspect-ratio: 4 / 3; }
.duo--flip .duo__b { right: auto; left: 0; }
.duo__tag {
  position: absolute; left: 0; bottom: 12px; z-index: 3;
  padding: 9px 16px; border-radius: 999px;
  background: #0b1f3f; color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  border: 1px solid rgba(216, 168, 70, .5);
}
.duo--flip .duo__tag { left: auto; right: 0; }

@media (max-width: 980px) {
  .mont3, .duo { max-width: 100%; margin-inline: auto; }
  .mont3--plated { padding: 12px; }
}
@media (max-width: 560px) {
  /* main goes full width with the two insets side by side beneath it */
  .mont3 { grid-template-columns: 1fr 1fr; gap: 10px; }
  .mont3__main { grid-column: 1 / span 2; grid-row: 1; aspect-ratio: 4 / 3; }
  .mont3__inset--a { grid-column: 1; grid-row: 2; }
  .mont3__inset--b { grid-column: 2; grid-row: 2; }
  .mont3__badge { grid-column: 1 / span 2; grid-row: 1; margin: 10px; padding: 8px 13px; }
  .mont3__badge strong { font-size: 12px; }
  .duo__b { width: 66%; }
}

/* ============================================================
   About — Global Impact band + Board of Directors
   ============================================================ */
.ab-impact{
  background:linear-gradient(160deg,#0b1220 0%,#111c30 55%,#0d1526 100%);
  padding:clamp(64px,7vw,104px) 0;
  position:relative;overflow:hidden;
}
.ab-impact::before{
  content:"";position:absolute;inset:0;
  background:
    radial-gradient(760px 380px at 12% 0%, rgba(224,169,46,.16), transparent 62%),
    radial-gradient(620px 340px at 92% 100%, rgba(224,169,46,.10), transparent 60%);
  pointer-events:none;
}
.ab-impact>.container{position:relative;z-index:1}
.ab-impact__head{max-width:760px;margin:0 0 clamp(34px,4vw,52px)}
.ab-eyebrow--gold{color:var(--brand-gold,#e0a92e)}
.ab-h2--invert{color:#fff}
.ab-impact__lede{
  color:rgba(255,255,255,.76);
  font-size:clamp(15px,1.08vw,17px);line-height:1.75;
  max-width:62ch;margin:14px 0 0;
}
.ab-impact__grid{
  display:grid;gap:clamp(16px,1.6vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.ab-impact__stat{
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.11);
  border-top:3px solid var(--brand-gold,#e0a92e);
  border-radius:14px;
  padding:clamp(22px,2.2vw,30px) clamp(20px,2vw,26px);
  display:flex;flex-direction:column;gap:7px;
  transition:transform .28s ease,border-color .28s ease,background .28s ease;
}
.ab-impact__stat:hover{
  transform:translateY(-6px);
  background:rgba(255,255,255,.07);
  border-color:rgba(224,169,46,.5);
}
.ab-impact__num{
  font-size:clamp(38px,3.8vw,54px);line-height:1;
  font-weight:700;color:var(--brand-gold,#e0a92e);letter-spacing:-.02em;
}
.ab-impact__label{color:#fff;font-weight:650;font-size:clamp(14px,1vw,16px);line-height:1.35}
.ab-impact__note{color:rgba(255,255,255,.6);font-size:13.5px;line-height:1.6}

/* --- Board of Directors ----------------------------------- */
.ab-board{
  display:grid;gap:clamp(20px,2.2vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(300px,1fr));
  margin-top:clamp(30px,3.4vw,44px);
}
.ab-dir{
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid #e3e7ee;border-radius:16px;
  overflow:hidden;
  box-shadow:0 2px 10px rgba(16,24,40,.05);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.ab-dir:hover{
  transform:translateY(-7px);
  box-shadow:0 20px 44px rgba(16,24,40,.14);
  border-color:rgba(224,169,46,.55);
}
.ab-dir__photo{margin:0;aspect-ratio:4/3;overflow:hidden;background:#eef1f6}
.ab-dir__photo img{
  width:100%;height:100%;object-fit:cover;object-position:50% 26%;
  display:block;transition:transform .55s ease;
}
.ab-dir:hover .ab-dir__photo img{transform:scale(1.05)}
.ab-dir__body{
  padding:clamp(20px,2vw,26px);
  display:flex;flex-direction:column;gap:9px;flex:1;
}
.ab-dir__name{margin:0;font-size:clamp(18px,1.35vw,21px);line-height:1.25;color:#0f1b2d;font-weight:700}
.ab-dir__role{
  color:#9a7418;font-weight:650;font-size:12.5px;
  letter-spacing:.09em;text-transform:uppercase;
}
.ab-dir__bio{margin:4px 0 0;color:#4a5568;font-size:15px;line-height:1.72;max-width:60ch;flex:1}
.ab-dir__tags{
  list-style:none;margin:14px 0 0;padding:14px 0 0;
  border-top:1px solid #edf0f5;
  display:flex;flex-wrap:wrap;gap:7px;
}
.ab-dir__tags li{
  background:#f6f8fb;border:1px solid #e3e8f0;border-radius:999px;
  padding:5px 12px;font-size:12px;font-weight:600;color:#425067;line-height:1.4;
}
@media (prefers-reduced-motion:reduce){
  .ab-impact__stat,.ab-dir,.ab-dir__photo img{transition:none}
  .ab-impact__stat:hover,.ab-dir:hover{transform:none}
  .ab-dir:hover .ab-dir__photo img{transform:none}
}

/* ============================================================
   Assessment & Exams — format cards
   ============================================================ */
.ab-fmt{
  display:grid;gap:clamp(20px,2.2vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(290px,1fr));
  margin-top:clamp(30px,3.4vw,44px);
}
.ab-fmt__card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid #e3e7ee;border-radius:16px;overflow:hidden;
  box-shadow:0 2px 10px rgba(16,24,40,.05);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.ab-fmt__card:hover{
  transform:translateY(-7px);
  box-shadow:0 20px 44px rgba(16,24,40,.14);
  border-color:rgba(224,169,46,.55);
}
.ab-fmt__media{margin:0;position:relative;aspect-ratio:16/10;overflow:hidden;background:#eef1f6}
.ab-fmt__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .55s ease}
.ab-fmt__card:hover .ab-fmt__media img{transform:scale(1.05)}
.ab-fmt__media figcaption{
  position:absolute;inset:auto 0 0 0;
  padding:30px 16px 12px;
  background:linear-gradient(180deg,transparent,rgba(6,21,50,.86));
  color:var(--brand-gold,#e0a92e);
  font-size:11.5px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
}
.ab-fmt__body{padding:clamp(20px,2vw,26px);display:flex;flex-direction:column;gap:10px;flex:1}
.ab-fmt__title{margin:0;font-size:clamp(18px,1.35vw,21px);line-height:1.25;color:#0f1b2d;font-weight:700}
.ab-fmt__text{margin:0;color:#4a5568;font-size:15px;line-height:1.72;max-width:58ch;flex:1}
.ab-fmt__points{list-style:none;margin:12px 0 0;padding:13px 0 0;border-top:1px solid #edf0f5;display:grid;gap:8px}
.ab-fmt__points li{
  position:relative;padding-left:20px;
  color:#425067;font-size:13.5px;line-height:1.6;font-weight:550;
}
.ab-fmt__points li::before{
  content:"";position:absolute;left:0;top:.52em;
  width:7px;height:7px;border-radius:2px;background:var(--brand-gold,#e0a92e);
}
.ab-split__text > .ab-eyebrow{display:block}
.ab-split__text > .ab-checks{margin-top:18px}
@media (prefers-reduced-motion:reduce){
  .ab-fmt__card,.ab-fmt__media img{transition:none}
  .ab-fmt__card:hover{transform:none}
  .ab-fmt__card:hover .ab-fmt__media img{transform:none}
}

/* ============================================================
   Resource hub — illustrated section cards
   ============================================================ */
.rs-card{overflow:hidden}
.rs-card__media{
  /* bleed to the card edge: cancel .rs-card's 24px/26px padding */
  margin:-24px -26px 18px;
  aspect-ratio:16/9;overflow:hidden;background:#eef1f6;
}
.rs-card__media img{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .5s ease;
}
.rs-card:hover .rs-card__media img{transform:scale(1.05)}
@media (prefers-reduced-motion:reduce){
  .rs-card__media img{transition:none}
  .rs-card:hover .rs-card__media img{transform:none}
}

/* ============================================================
   Assessment & Exams hub — built to client mockup 07
   ============================================================ */
.ax-hero{
  background:
    linear-gradient(#0d1b33f2,#0d1b33f2),
    repeating-linear-gradient(90deg,transparent 0 119px,#ffffff0d 119px 120px),
    repeating-linear-gradient(0deg,transparent 0 119px,#ffffff0d 119px 120px),
    linear-gradient(155deg,#0b1526 0%,#101f3a 55%,#0b1729 100%);
  padding:clamp(48px,5.5vw,86px) 0 clamp(40px,4.5vw,68px);
  color:#fff;
}
.ax-hero .ab-split{align-items:center}
/* On this page the copy is the first grid child, so the fixed track has to be
   the second one or the headline gets squeezed into 540px and wraps to four
   lines instead of the two the mockup shows. */
@media (min-width:981px){.ax-hero .ab-split--wide{grid-template-columns:1fr 540px}}
.ax-pill{
  display:inline-block;padding:7px 17px;border-radius:999px;
  border:1px solid rgba(224,169,46,.55);color:var(--brand-gold,#e0a92e);
  font-size:11px;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
}
.ax-hero__h1{
  margin:18px 0 0;color:#fff;font-weight:700;letter-spacing:-.02em;
  font-size:clamp(30px,3.5vw,46px);line-height:1.16;
}
.ax-hero__sub{
  margin:16px 0 0;color:#7fb3f5;font-weight:700;
  font-size:clamp(15px,1.15vw,17.5px);line-height:1.5;
}
.ax-hero__p{
  margin:12px 0 0;color:rgba(255,255,255,.74);
  font-size:clamp(14.5px,1.05vw,16px);line-height:1.75;max-width:60ch;
}
.ax-format{
  margin-top:22px;padding:13px 18px;border-radius:10px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.12);
  display:flex;flex-wrap:wrap;gap:10px;align-items:baseline;
}
.ax-format__k{
  color:var(--brand-gold,#e0a92e);font-size:10.5px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;
}
.ax-format__v{color:#fff;font-size:12.5px;font-weight:700;letter-spacing:.045em;text-transform:uppercase}
.ax-dir{margin-top:20px}
.ax-dir__k{
  display:block;color:rgba(255,255,255,.5);font-size:10.5px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;margin-bottom:10px;
}
.ax-dir__list{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:8px 22px;
}
.ax-dir__list a{
  color:#fff;text-decoration:none;font-size:13.5px;font-weight:650;line-height:1.5;
  border-bottom:1px solid transparent;transition:color .2s,border-color .2s;
}
.ax-dir__list a:hover{color:var(--brand-gold,#e0a92e);border-bottom-color:currentColor}
.ax-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px}
.ab-btn--outline-gold{
  background:transparent;color:#fff;
  border:1px solid rgba(224,169,46,.65);
}
.ab-btn--outline-gold:hover{background:rgba(224,169,46,.14);border-color:var(--brand-gold,#e0a92e)}
/* the hero montage sits on a dark plate here, not the white one */
.mont3--dark{background:rgba(255,255,255,.045);border-color:rgba(255,255,255,.13)}

/* --- the six hubs --- */
.ax-hubs{
  margin-top:clamp(34px,4vw,54px);padding:clamp(22px,2.4vw,30px);
  border:1px solid rgba(255,255,255,.13);border-radius:16px;
  background:rgba(255,255,255,.035);
}
.ax-hubs__k{
  display:block;color:var(--brand-gold,#e0a92e);font-size:10.5px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;
}
.ax-hubs__lede{margin:8px 0 18px;color:#fff;font-size:clamp(15px,1.15vw,17px);font-weight:650;line-height:1.5}
.ax-hubs__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(155px,1fr));gap:12px}
.ax-hub{
  display:block;padding:14px 16px;border-radius:10px;text-decoration:none;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.13);
  transition:transform .25s ease,border-color .25s ease,background .25s ease;
}
.ax-hub:hover{transform:translateY(-4px);background:rgba(255,255,255,.09);border-color:rgba(224,169,46,.6)}
.ax-hub--on{border-color:var(--brand-gold,#e0a92e);background:rgba(224,169,46,.1)}
.ax-hub__n{
  display:block;font-size:10px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:#7fb3f5;margin-bottom:5px;
}
.ax-hub--on .ax-hub__n{color:var(--brand-gold,#e0a92e)}
.ax-hub__t{display:block;color:#fff;font-size:13.5px;font-weight:650;line-height:1.35}
@media (prefers-reduced-motion:reduce){
  .ax-hub{transition:none}
  .ax-hub:hover{transform:none}
}

/* ---- delivery modes ---- */
.ax-modes{
  display:grid;gap:clamp(18px,2vw,26px);
  grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));
  align-items:start;margin-top:clamp(28px,3.2vw,42px);
}
.ax-mode{
  display:flex;flex-direction:column;height:100%;
  padding:clamp(20px,2vw,26px);border-radius:16px;
  border:1px solid #e3e7ee;background:#fff;
  box-shadow:0 2px 10px rgba(16,24,40,.05);
}
.ax-mode--dark{background:#0d1b33;border-color:#16294a;color:#fff}
.ax-mode--tint{background:#f7f9fc}
.ax-mode__kicker{
  align-self:flex-start;padding:6px 13px;border-radius:7px;
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  background:#eaf2fd;color:#2b5b9e;
}
.ax-mode--dark .ax-mode__kicker{background:rgba(224,169,46,.16);color:var(--brand-gold,#e0a92e)}
.ax-mode__t{margin:14px 0 0;font-size:clamp(19px,1.5vw,23px);font-weight:700;line-height:1.22;color:#0f1b2d}
.ax-mode--dark .ax-mode__t{color:#fff}
.ax-mode__sub{margin:5px 0 0;font-size:13.5px;font-weight:700;color:#2b5b9e}
.ax-mode--dark .ax-mode__sub{color:#7fb3f5}
.ax-mode__media{margin:16px 0 0;border-radius:10px;overflow:hidden;aspect-ratio:16/9;background:#e8edf5}
/* the placeholder shows until the photo decodes; keep it dark on the dark card */
.ax-mode--dark .ax-mode__media{background:#16294a}
.ax-mode__media img{width:100%;height:100%;object-fit:cover;display:block}
.ax-mode__k{
  display:block;margin-top:18px;font-size:10.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;color:#9a7418;
}
.ax-mode--dark .ax-mode__k{color:var(--brand-gold,#e0a92e)}
.ax-mode__feats{list-style:none;margin:11px 0 0;padding:0;display:grid;gap:7px}
.ax-mode__feats li{
  position:relative;padding-left:14px;font-size:13.5px;line-height:1.6;color:#4a5568;
}
.ax-mode--dark .ax-mode__feats li{color:rgba(255,255,255,.78)}
.ax-mode__feats li::before{content:"\2022";position:absolute;left:0;color:currentColor;opacity:.75}
.ax-mode__box{
  margin-top:18px;padding:16px 17px;border-radius:11px;flex:1;
  background:#f7f9fc;border:1px solid #e6ebf3;
}
.ax-mode--dark .ax-mode__box{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12)}
.ax-mode--tint .ax-mode__box{background:#fff}
.ax-mode__box-t{
  display:block;font-size:12.5px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:#0f1b2d;margin-bottom:11px;
}
.ax-mode--dark .ax-mode__box-t{color:#fff}
.ax-mode__checks{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ax-mode__checks li{
  position:relative;padding-left:19px;font-size:13px;line-height:1.6;color:#4a5568;
}
.ax-mode--dark .ax-mode__checks li{color:rgba(255,255,255,.76)}
.ax-mode__checks li::before{
  content:"\2713";position:absolute;left:0;color:#2b8a5f;font-weight:700;font-size:12px;
}
.ax-mode--dark .ax-mode__checks li::before{color:#63c79a}
.ax-mode__note{margin:13px 0 0;font-size:12.5px;font-weight:700;color:#2b5b9e}
.ax-mode--dark .ax-mode__note{color:var(--brand-gold,#e0a92e)}
.ax-mode__cta{
  display:block;margin-top:18px;padding:14px 18px;border-radius:9px;
  text-align:center;text-decoration:none;
  font-size:13px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  transition:filter .2s ease,transform .2s ease;
}
.ax-mode__cta:hover{transform:translateY(-2px);filter:brightness(1.07)}
.ax-mode__cta--gold{background:linear-gradient(180deg,#e5b957,#c9922b);color:#241a05}
.ax-mode__cta--navy{background:#0d1b33;color:#fff}
.ax-mode__cta--ghost{background:transparent;color:#fff;border:1px solid rgba(224,169,46,.65)}

/* ---- policy cards ---- */
.ax-pol{
  display:grid;gap:clamp(18px,2vw,24px);
  /* 2x2 as the mockup shows; a 330px track went 3-up and orphaned card 4 */
  grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr));
  margin-top:clamp(28px,3.2vw,42px);
}
.ax-pol__card{
  display:flex;flex-direction:column;
  padding:clamp(20px,2vw,26px);border-radius:16px;
  background:#fff;border:1px solid #e3e7ee;box-shadow:0 2px 10px rgba(16,24,40,.05);
}
.ax-pol__head{display:flex;align-items:center;gap:13px;margin-bottom:16px}
.ax-pol__tag{
  flex:none;min-width:42px;padding:8px 10px;border-radius:9px;text-align:center;
  background:#eaf2fd;color:#2b5b9e;font-size:11px;font-weight:800;letter-spacing:.05em;
}
.ax-pol__t{margin:0;font-size:clamp(16px,1.25vw,19px);font-weight:700;color:#0f1b2d;line-height:1.3}
.ax-pol__rows{margin:0;display:grid;gap:14px;flex:1}
.ax-pol__row dt{font-size:13px;font-weight:700;color:#0f1b2d;margin-bottom:3px}
.ax-pol__row dd{margin:0;font-size:13.5px;line-height:1.65;color:#4a5568}
.ax-pol__foot{
  margin:18px 0 0;padding:12px 14px;border-radius:9px;
  background:#f2f7fd;color:#2b5b9e;font-size:12.5px;font-weight:700;line-height:1.5;
}

/* ---- 48-hour rule ---- */
.ax-resched{
  margin-top:clamp(24px,2.8vw,34px);padding:clamp(24px,2.6vw,34px);
  border-radius:16px;background:#0d1b33;color:#fff;
}
.ax-resched__k{
  display:block;color:var(--brand-gold,#e0a92e);font-size:11px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;
}
.ax-resched__t{margin:9px 0 16px;font-size:clamp(18px,1.5vw,22px);font-weight:700;color:#fff;line-height:1.3}
.ax-resched__list{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px}
.ax-resched__list li{
  position:relative;padding-left:15px;font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.78);
}
.ax-resched__list li::before{content:"\2022";position:absolute;left:0;color:var(--brand-gold,#e0a92e)}
.ax-resched__list strong{color:#fff}

/* ---- prepare & exam day ---- */
.ax-prep{
  background:
    linear-gradient(#0d1b33f2,#0d1b33f2),
    repeating-linear-gradient(90deg,transparent 0 119px,#ffffff0a 119px 120px),
    linear-gradient(155deg,#0b1526,#101f3a 60%,#0b1729);
  padding:clamp(56px,6vw,92px) 0;color:#fff;
}
.ax-prep .ab-h2--invert{color:#fff}
.ax-prep__lede{margin:12px auto 0;max-width:60ch;color:rgba(255,255,255,.72);font-size:15.5px;line-height:1.7}
.ax-prep__grid{
  display:grid;gap:clamp(20px,2.2vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  margin-top:clamp(28px,3.2vw,44px);align-items:start;
}
.ax-prep__card{
  display:flex;flex-direction:column;height:100%;
  padding:clamp(22px,2.2vw,30px);border-radius:16px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.13);
}
.ax-prep__stage{
  align-self:flex-start;padding:6px 13px;border-radius:7px;
  background:rgba(224,169,46,.16);color:var(--brand-gold,#e0a92e);
  font-size:10.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
}
.ax-prep__t{margin:14px 0 0;font-size:clamp(19px,1.5vw,23px);font-weight:700;color:#fff;line-height:1.22}
.ax-prep__sub{margin:5px 0 0;color:#7fb3f5;font-size:13.5px;font-weight:700}
.ax-prep__media{margin:16px 0 0;border-radius:10px;overflow:hidden;aspect-ratio:21/9;background:#16294a}
.ax-prep__media img{width:100%;height:100%;object-fit:cover;display:block}
.ax-prep__steps{margin:18px 0 0;display:grid;gap:13px}
.ax-prep__steps dt{font-size:13px;font-weight:700;color:#fff;margin-bottom:3px}
.ax-prep__steps dd{margin:0;font-size:13.5px;line-height:1.65;color:rgba(255,255,255,.74)}
.ax-prep__box{
  margin-top:18px;padding:17px;border-radius:11px;flex:1;
  background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.11);
}
.ax-prep__box-t{
  display:block;color:var(--brand-gold,#e0a92e);font-size:11px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;margin-bottom:11px;
}
.ax-prep__box ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ax-prep__box li{
  position:relative;padding-left:15px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.76);
}
.ax-prep__box li::before{content:"\2022";position:absolute;left:0;color:rgba(255,255,255,.45)}

/* ---- credential verification ---- */
.ax-verify{
  margin-top:clamp(26px,3vw,40px);padding:clamp(24px,2.6vw,34px);
  border-radius:16px;background:rgba(255,255,255,.035);border:1px solid rgba(224,169,46,.32);
}
.ax-verify__k{
  display:block;color:var(--brand-gold,#e0a92e);font-size:11px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;
}
.ax-verify__t{margin:9px 0 14px;font-size:clamp(18px,1.5vw,22px);font-weight:700;color:#fff;line-height:1.3}
.ax-verify p{margin:0 0 7px;color:rgba(255,255,255,.74);font-size:14px;line-height:1.7;max-width:78ch}
.ax-verify .ax-mode__cta{margin-top:18px}

/* ---- final CTA ---- */
.ax-final{
  padding:clamp(38px,4.4vw,62px) clamp(22px,3vw,48px);
  border-radius:20px;text-align:center;color:#fff;
  border:1px solid rgba(224,169,46,.5);
  background:
    repeating-linear-gradient(90deg,transparent 0 159px,#ffffff08 159px 160px),
    linear-gradient(155deg,#0b1526,#101f3a 60%,#0b1729);
}
.ax-final__k{
  display:block;color:var(--brand-gold,#e0a92e);font-size:11px;font-weight:800;
  letter-spacing:.13em;text-transform:uppercase;
}
.ab-sec .ax-final h2,.ab-sec .ax-final .ax-final__t,.ax-final h2,.ax-final .ax-final__t,.ax-final__t{margin:12px 0 0;font-size:clamp(24px,2.8vw,38px);font-weight:700;color:#fff;line-height:1.2}
.ax-final__lede{margin:12px auto 0;max-width:62ch;color:rgba(255,255,255,.72);font-size:15px;line-height:1.7}
.ax-final__stats{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:20px;margin:clamp(28px,3.2vw,42px) 0;
}
.ax-final__stat strong{
  display:block;font-size:clamp(30px,3.4vw,44px);font-weight:700;line-height:1;
  color:var(--brand-gold,#e0a92e);letter-spacing:-.02em;
}
.ax-final__label{display:block;margin-top:7px;color:#fff;font-size:14px;font-weight:700}
.ax-final__note{display:block;margin-top:3px;color:rgba(255,255,255,.55);font-size:12.5px}
.ax-cta--center{justify-content:center}
.ax-final__disc{
  margin-top:clamp(26px,3vw,38px);padding:18px 20px;border-radius:12px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.11);
}
.ax-final__disc-k{
  display:block;color:#7fb3f5;font-size:11px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;margin-bottom:12px;
}
.ax-final__chips{display:flex;flex-wrap:wrap;justify-content:center;gap:9px}
.ax-final__chips a{
  padding:7px 14px;border-radius:999px;text-decoration:none;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:#fff;font-size:12.5px;font-weight:650;
  transition:background .2s,border-color .2s;
}
.ax-final__chips a:hover{background:rgba(224,169,46,.16);border-color:rgba(224,169,46,.6)}
@media (prefers-reduced-motion:reduce){
  .ax-mode__cta{transition:none}
  .ax-mode__cta:hover{transform:none}
}

/* ---- exam stage rail, styled like the hub's selector ---- */
.ax-rail{
  background:#0a1424;
  border-bottom:1px solid rgba(255,255,255,.09);
  padding:16px 0;
}
.ax-rail__row{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:10px;
}
.ax-rail .ax-hub{padding:11px 14px}
.ax-rail .ax-hub__t{font-size:12.5px;line-height:1.3}
.ax-rail .ax-hub__n{margin-bottom:4px}
/* the child hero keeps the copy on the flexible track, same as the hub */
@media (min-width:981px){
  .exam-hero .ab-split--wide{grid-template-columns:1fr 540px}
}

/* ---- exam stage pages: hold the step cards to the mockup palette ----
   The site-wide .ab-step cycle runs through teal, purple and pink, which
   fight the navy/gold of the client's mockups. Scoped to .ax-page so the
   other document pages keep their existing colourway. */
.ax-page .ab-step:nth-child(6n+1),
.ax-page .ab-step:nth-child(6n+4) { --sc: #0d1b33; }
.ax-page .ab-step:nth-child(6n+2),
.ax-page .ab-step:nth-child(6n+5) { --sc: #b8892b; }
.ax-page .ab-step:nth-child(6n+3),
.ax-page .ab-step:nth-child(6n+6) { --sc: #2b5b9e; }

/* section bands on these pages pick up the same restrained tint */
.ax-page .ab-sec--tint { background: #f6f9fd; }
.ax-page .ab-checks li::marker { color: var(--brand-gold, #e0a92e); }

/* ---- certification journey stages (mockup 06) ---- */
.ax-stage{padding:clamp(52px,5.5vw,86px) 0;background:#fff;scroll-margin-top:90px}
.ax-stage:nth-of-type(even){background:#f6f9fd}
.ax-stage--dark{
  background:
    linear-gradient(#0d1b33f2,#0d1b33f2),
    repeating-linear-gradient(90deg,transparent 0 119px,#ffffff0a 119px 120px),
    linear-gradient(155deg,#0b1526,#101f3a 60%,#0b1729);
  color:#fff;
}
.ax-stage--dark:nth-of-type(even){background:
    linear-gradient(#0d1b33f2,#0d1b33f2),
    repeating-linear-gradient(90deg,transparent 0 119px,#ffffff0a 119px 120px),
    linear-gradient(155deg,#0b1526,#101f3a 60%,#0b1729);}
.ax-stage__sub{color:rgba(255,255,255,.72)}
.ax-stage__body{
  margin-top:clamp(26px,3vw,40px);
  /* match .ab-step's own 1100px column so copy, panels and cards all align */
  max-width:1100px;margin-inline:auto;
}

/* the shared block renderer has to read on a dark band too */
.ax-stage--dark .ab-p,
.ax-stage--dark .ab-step__body .ab-p{color:rgba(255,255,255,.78)}
.ax-stage--dark .ab-blk__h,
.ax-stage--dark .ab-h4{color:#fff}
.ax-stage--dark .ab-panel,
.ax-stage--dark .ab-panel--tint{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.12);
}
.ax-stage--dark .ab-checks li{color:rgba(255,255,255,.8)}
.ax-stage--dark .ab-step{
  background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13);
}
.ax-stage--dark .ab-step__summary:hover{background:rgba(255,255,255,.08)}
.ax-stage--dark .ab-step__t{color:#fff}
.ax-stage--dark .ab-step__hint{color:var(--brand-gold,#e0a92e)}
.ax-stage--dark .ab-step__chev{background:rgba(255,255,255,.09);color:#fff}
/* .ab-spec paints a solid `background: #fff` of its own. Recolouring only the
   text left white-on-white; the panel and its dividers have to move too. */
.ax-stage--dark .ab-spec{
  background:rgba(255,255,255,.05);
  border-color:rgba(255,255,255,.14);
}
.ax-stage--dark .ab-spec__row{border-bottom-color:rgba(255,255,255,.12)}
.ax-stage--dark .ab-spec__row:nth-child(odd){border-right-color:rgba(255,255,255,.12)}
.ax-stage--dark .ab-spec dt{color:rgba(255,255,255,.62)}
.ax-stage--dark .ab-spec dd{color:#fff}
.ax-stage--dark .ab-route__item{color:rgba(255,255,255,.82)}
.ax-stage--dark .ab-chain li{
  background:rgba(255,255,255,.06);border-color:rgba(255,255,255,.14);color:#fff;
}

/* hub cards carry a third line on this page */
.ax-hub__d{
  display:block;margin-top:4px;color:rgba(255,255,255,.55);
  font-size:11.5px;line-height:1.45;
}
.ax-dir__list--plain{list-style:none}
.ax-dir__list--plain li{
  position:relative;padding-left:14px;color:#fff;font-size:13.5px;font-weight:650;line-height:1.5;
}
.ax-dir__list--plain li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:6px;height:6px;border-radius:2px;background:var(--brand-gold,#e0a92e);
}
.breadcrumb--onDark,.ax-hero .breadcrumb{color:rgba(255,255,255,.6);margin-bottom:20px}
.ax-hero .breadcrumb a{color:rgba(255,255,255,.78)}
.ax-hero .breadcrumb a:hover{color:var(--brand-gold,#e0a92e)}

/* ---- photo band between chunks of a long stage ---- */
.ax-stage__band{
  position:relative;margin:clamp(30px,3.4vw,46px) auto;max-width:1100px;
  border-radius:16px;overflow:hidden;aspect-ratio:21/9;background:#16294a;
  box-shadow:0 18px 44px -26px rgba(11,31,63,.55);
}
.ax-stage__band img{width:100%;height:100%;object-fit:cover;display:block}
.ax-stage__band figcaption{
  position:absolute;inset:auto 0 0 0;padding:38px 24px 18px;
  background:linear-gradient(180deg,transparent,rgba(6,21,50,.88));color:#fff;
}
.ax-stage__band figcaption strong{
  display:block;font-size:11.5px;font-weight:800;letter-spacing:.14em;
  text-transform:uppercase;color:var(--brand-gold,#e0a92e);
}
.ax-stage__band figcaption span{display:block;font-size:14px;margin-top:3px;color:rgba(255,255,255,.85)}
@media (max-width:760px){ .ax-stage__band{aspect-ratio:16/9} }

/* ============================================================
   Threat Intelligence — client mockup 09
   ============================================================ */
.ti-sources{margin-top:clamp(30px,3.4vw,46px)}
.ti-sources__row{
  display:grid;gap:clamp(16px,1.8vw,22px);
  grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr));
}
.ti-source{
  display:flex;flex-direction:column;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);
  border-top:3px solid var(--ti,#7fb3f5);border-radius:12px;
  padding:clamp(18px,1.9vw,24px);
}
.ti-source--cisa{--ti:#4a9de8}
.ti-source--mitre{--ti:#e0a92e}
.ti-source--fbi{--ti:#3fbf8f}
.ti-source__k{
  color:var(--ti);font-size:10.5px;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
}
.ti-source__t{margin:9px 0 0;color:#fff;font-size:clamp(16px,1.25vw,19px);font-weight:700;line-height:1.28}
.ti-source__p{margin:11px 0 0;color:rgba(255,255,255,.72);font-size:13.5px;line-height:1.7}
.ti-source__list{list-style:none;margin:14px 0 0;padding:0;display:grid;gap:6px;flex:1}
.ti-source__list li{
  position:relative;padding-left:13px;color:rgba(255,255,255,.72);font-size:12.5px;line-height:1.6;
}
.ti-source__list li::before{content:"\2022";position:absolute;left:0;color:var(--ti)}
.ti-source__cta{
  display:block;margin-top:18px;padding:11px 14px;border-radius:8px;text-align:center;
  border:1px solid var(--ti);color:var(--ti);
  font-size:12.5px;font-weight:650;
}

/* --- the eight discipline cards --- */
.ti-disc{
  display:grid;gap:clamp(20px,2.2vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(min(430px,100%),1fr));
  margin-top:clamp(28px,3.2vw,44px);align-items:start;
}
.ti-card{
  display:flex;flex-direction:column;height:100%;
  background:#fff;border:1px solid #e3e7ee;border-top:4px solid var(--ti,#2b5b9e);
  border-radius:16px;padding:clamp(20px,2vw,28px);
  box-shadow:0 2px 10px rgba(16,24,40,.05);
}
.ti-card--red{--ti:#d8344a;--tiBg:#fdeef0}
.ti-card--gold{--ti:#c9922b;--tiBg:#fdf5e4}
.ti-card--cyan{--ti:#1c9bb8;--tiBg:#e6f6fa}
.ti-card--purple{--ti:#8b46c8;--tiBg:#f4ecfc}
.ti-card--orange{--ti:#d9761f;--tiBg:#fdf0e5}
.ti-card--teal{--ti:#158f70;--tiBg:#e6f5f0}
.ti-card--blue{--ti:#2b5b9e;--tiBg:#eaf1fb}
.ti-card--magenta{--ti:#c02b7a;--tiBg:#fceaf3}
.ti-card__chip{
  align-self:flex-start;padding:5px 11px;border-radius:6px;
  background:var(--tiBg);color:var(--ti);border:1px solid color-mix(in srgb,var(--ti) 32%,transparent);
  font-size:10px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
}
.ti-card__t{margin:14px 0 0;color:#0f1b2d;font-size:clamp(19px,1.5vw,23px);font-weight:700;line-height:1.22}
.ti-card__sub{margin:6px 0 0;color:var(--ti);font-size:13.5px;font-weight:700;line-height:1.45}
.ti-card__p{margin:12px 0 0;color:#4a5568;font-size:14px;line-height:1.72}
.ti-card__box{
  margin-top:18px;padding:16px 18px;border-radius:11px;
  background:#f7f9fc;border:1px solid #e6ebf3;
}
.ti-card__box--dark{background:#0d1b33;border-color:#16294a;flex:1}
.ti-card__box-t{
  display:block;font-size:12px;font-weight:800;letter-spacing:.05em;
  text-transform:uppercase;color:#0f1b2d;margin-bottom:12px;
}
.ti-card__box--dark .ti-card__box-t{color:var(--brand-gold,#e0a92e)}
.ti-card__grid{
  list-style:none;margin:0;padding:0;display:grid;gap:7px 20px;
  grid-template-columns:repeat(auto-fit,minmax(min(190px,100%),1fr));
}
.ti-card__list{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ti-card__grid li,.ti-card__list li{
  position:relative;padding-left:14px;font-size:12.8px;line-height:1.6;color:#4a5568;
}
.ti-card__box--dark li{color:rgba(255,255,255,.78)}
.ti-card__grid li::before,.ti-card__list li::before{
  content:"\2022";position:absolute;left:0;color:var(--ti);
}
.ti-card__box--dark li::before{color:rgba(255,255,255,.45)}
.ti-card__cta{
  display:block;margin-top:18px;padding:14px 18px;border-radius:9px;text-align:center;
  background:#0d1b33;color:#fff;text-decoration:none;
  font-size:12.5px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  transition:filter .2s ease,transform .2s ease;
}
.ti-card__cta:hover{transform:translateY(-2px);filter:brightness(1.15)}

/* --- 7-step model --- */
.ti-model{
  list-style:none;margin:clamp(26px,3vw,40px) 0 0;padding:0;
  display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));
}
.ti-model__step{
  padding:16px 15px;border-radius:11px;
  background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.12);
  border-top:3px solid var(--brand-gold,#e0a92e);
}
.ti-model__n{
  display:block;color:var(--brand-gold,#e0a92e);
  font-size:11px;font-weight:800;letter-spacing:.1em;margin-bottom:6px;
}
.ti-model__step strong{
  display:block;color:#fff;font-size:14px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;
}
.ti-model__note{display:block;margin-top:4px;color:rgba(255,255,255,.6);font-size:12px;line-height:1.5}

/* --- operational tiers --- */
.ti-tiers{margin-top:clamp(30px,3.4vw,46px)}
.ti-tiers__k{
  display:block;color:#fff;font-size:clamp(15px,1.15vw,17px);font-weight:650;
  line-height:1.5;margin-bottom:18px;
}
.ti-tiers__row{
  display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr));
}
.ti-tier{
  padding:20px;border-radius:12px;
  background:rgba(255,255,255,.045);border:1px solid rgba(255,255,255,.12);
}
.ti-tier__t{margin:0;color:#fff;font-size:15.5px;font-weight:700;line-height:1.3}
.ti-tier__aud{
  display:block;margin:6px 0 12px;color:#7fb3f5;font-size:12px;font-weight:650;
}
.ti-tier ul{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.ti-tier li{
  position:relative;padding-left:13px;color:rgba(255,255,255,.74);font-size:12.5px;line-height:1.6;
}
.ti-tier li::before{content:"\2022";position:absolute;left:0;color:var(--brand-gold,#e0a92e)}

/* --- maturity pipeline --- */
.ti-pipeline{
  margin-top:clamp(26px,3vw,38px);padding:20px 22px;border-radius:12px;
  background:rgba(255,255,255,.035);border:1px solid rgba(224,169,46,.3);
}
.ti-pipeline__k{
  display:block;color:var(--brand-gold,#e0a92e);font-size:11px;font-weight:800;
  letter-spacing:.11em;text-transform:uppercase;margin-bottom:14px;
}
.ti-pipeline ol{
  list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:9px;align-items:center;
}
.ti-pipeline li{
  padding:8px 14px;border-radius:999px;
  background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);
  color:#fff;font-size:12.5px;font-weight:650;
}
.ti-pipeline li + li::before{content:"\2192";margin-right:9px;color:var(--brand-gold,#e0a92e)}

/* --- credentials + faculty --- */
.ti-creds{
  display:grid;gap:clamp(18px,2vw,24px);
  grid-template-columns:repeat(auto-fit,minmax(min(290px,100%),1fr));
  margin-top:clamp(28px,3.2vw,42px);
}
.ti-cred{
  padding:clamp(20px,2vw,26px);border-radius:16px;
  background:#fff;border:1px solid #e3e7ee;border-top:3px solid var(--brand-gold,#e0a92e);
  box-shadow:0 2px 10px rgba(16,24,40,.05);
}
.ti-cred__k{
  display:block;color:#9a7418;font-size:10.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
}
.ti-cred__t{margin:9px 0 0;color:#0f1b2d;font-size:clamp(17px,1.3vw,20px);font-weight:700;line-height:1.25}
.ti-cred__p{margin:11px 0 0;color:#4a5568;font-size:13.5px;line-height:1.7}
.ti-cred ul{list-style:none;margin:14px 0 0;padding:13px 0 0;border-top:1px solid #edf0f5;display:grid;gap:7px}
.ti-cred li{position:relative;padding-left:14px;color:#425067;font-size:12.5px;line-height:1.6}
.ti-cred li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:2px;background:var(--brand-gold,#e0a92e)}
.ti-faculty{
  display:grid;grid-template-columns:210px 1fr;gap:clamp(20px,2.4vw,32px);
  align-items:center;margin-top:clamp(26px,3vw,40px);
  padding:clamp(20px,2.2vw,30px);border-radius:16px;
  background:#f7f9fc;border:1px solid #e3e7ee;
}
.ti-faculty__photo{margin:0;border-radius:14px;overflow:hidden;aspect-ratio:3/4;background:#eef1f6}
.ti-faculty__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 24%;display:block}
.ti-faculty__k{
  display:block;color:#9a7418;font-size:10.5px;font-weight:800;
  letter-spacing:.1em;text-transform:uppercase;
}
.ti-faculty__t{margin:9px 0 10px;color:#0f1b2d;font-size:clamp(18px,1.4vw,22px);font-weight:700;line-height:1.25}
.ti-faculty__body p{margin:0;color:#4a5568;font-size:14px;line-height:1.75;max-width:74ch}
@media (max-width:640px){
  .ti-faculty{grid-template-columns:1fr}
  .ti-faculty__photo{max-width:190px}
}
@media (prefers-reduced-motion:reduce){
  .ti-card__cta{transition:none}
  .ti-card__cta:hover{transform:none}
}

/* ============================================================
   Support & Contact Us — built to the client's page design
   ============================================================ */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.sup-hero{
  background:
    linear-gradient(100deg,#0b1c33f2 0 52%,#0b1c33cc 100%),
    url("../img/suite/26-ibactp-headquarters-irving-tx.jpg") center/cover no-repeat,
    linear-gradient(150deg,#0b1526,#101f3a);
  padding:clamp(46px,5vw,78px) 0;color:#fff;
}
.sup-hero__grid{display:grid;grid-template-columns:1.5fr .8fr;gap:clamp(24px,3vw,48px);align-items:center}
.sup-hero__h1{margin:16px 0 0;font-size:clamp(30px,3.6vw,48px);font-weight:700;line-height:1.12;color:#fff;letter-spacing:-.02em}
.sup-hero__p{margin:12px 0 0;color:rgba(255,255,255,.8);font-size:clamp(15px,1.1vw,17px);line-height:1.7;max-width:56ch}
.sup-search{
  display:flex;align-items:center;gap:10px;margin-top:24px;max-width:520px;
  background:#fff;border-radius:10px;padding:6px 6px 6px 14px;
}
.sup-search > svg{fill:#8896aa;flex:none}
.sup-search input{flex:1;border:0;outline:0;padding:11px 0;font-size:14.5px;color:#0f1b2d;background:transparent}
.sup-search button{
  flex:none;border:0;border-radius:8px;padding:11px 16px;cursor:pointer;
  background:#0d1b33;color:#fff;display:grid;place-items:center;
}
.sup-search button svg{fill:#fff}
.sup-hero__aside p{
  margin:0;text-align:right;color:#fff;font-size:clamp(17px,1.5vw,22px);
  font-weight:650;line-height:1.5;
}
.sup-hero__aside strong{color:var(--brand-gold,#e0a92e)}
@media (max-width:860px){
  .sup-hero__grid{grid-template-columns:1fr}
  .sup-hero__aside p{text-align:left}
}

.sup-head{display:flex;flex-wrap:wrap;gap:14px;align-items:end;justify-content:space-between;margin-bottom:clamp(22px,2.4vw,32px)}
.sup-head .ab-h2{margin:0}
.sup-head .ab-sub{margin:6px 0 0}
.sup-head__link{color:#2b5b9e;font-size:13.5px;font-weight:650;text-decoration:none}
.sup-head__link:hover{text-decoration:underline}

/* eight tiles across at desktop, as the design shows; a 160px floor pushed
   the eighth onto a second row at 1400px */
.sup-tiles{display:grid;gap:12px;grid-template-columns:repeat(auto-fit,minmax(min(148px,100%),1fr))}
@media (min-width:1180px){.sup-tiles{grid-template-columns:repeat(8,1fr)}}
.sup-tile{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:9px;
  padding:22px 14px;border-radius:12px;text-decoration:none;
  background:#eff5fd;border:1px solid #dbe6f5;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.sup-tile:hover{transform:translateY(-4px);box-shadow:0 16px 34px -22px rgba(11,31,63,.5);border-color:#2b5b9e}
.sup-tile__icon{width:40px;height:40px;display:grid;place-items:center;border-radius:10px;background:#fff;border:1px solid #dbe6f5}
.sup-tile__icon svg{width:20px;height:20px;fill:#2b5b9e}
.sup-tile strong{color:#0f1b2d;font-size:13.5px;font-weight:700;line-height:1.35}
.sup-tile__note{color:#5a6a80;font-size:11.5px;line-height:1.5}

.sup-cols{display:grid;gap:clamp(18px,2vw,24px);grid-template-columns:.85fr 1.1fr 1.05fr;align-items:start}
@media (max-width:1040px){.sup-cols{grid-template-columns:1fr}}
.sup-card{background:#fff;border:1px solid #e3e7ee;border-radius:16px;padding:clamp(20px,2vw,28px);box-shadow:0 2px 10px rgba(16,24,40,.05)}
.sup-card__t{margin:0 0 18px;font-size:clamp(18px,1.4vw,22px);font-weight:700;color:#0f1b2d}
.sup-card__note{margin:-12px 0 18px;color:#5a6a80;font-size:13px}
.sup-row{display:flex;gap:13px;margin-bottom:20px}
.sup-row__icon{flex:none;width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#eff5fd}
.sup-row__icon svg{width:17px;height:17px;fill:#2b5b9e}
.sup-row strong{display:block;color:#0f1b2d;font-size:14px;font-weight:700;margin-bottom:3px}
.sup-row p{margin:0;color:#4a5568;font-size:13.5px;line-height:1.65}
.sup-row a{color:#2b5b9e;text-decoration:none}
.sup-row a:hover{text-decoration:underline}

.sup-map{margin:0;border-radius:12px;overflow:hidden;position:relative;aspect-ratio:4/3;background:#eef1f6}
.sup-map img{width:100%;height:100%;object-fit:cover;display:block}
.sup-map figcaption{
  position:absolute;inset:auto 0 0 0;padding:30px 16px 14px;
  background:linear-gradient(180deg,transparent,rgba(6,21,50,.9));color:#fff;
}
.sup-map figcaption strong{display:block;font-size:13px;font-weight:700}
.sup-map figcaption span{display:block;font-size:11.5px;color:rgba(255,255,255,.8);margin-top:2px}
.sup-map__cta{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.sup-map__cta .ab-btn{flex:1;min-width:150px;justify-content:center;font-size:13px}

.sup-form__pair{display:grid;grid-template-columns:1fr 1fr;gap:14px}
@media (max-width:520px){.sup-form__pair{grid-template-columns:1fr}}
.sup-field{margin:0 0 14px}
.sup-field label{display:block;font-size:12.5px;font-weight:650;color:#425067;margin-bottom:6px}
.sup-field label span{color:#c0392b}
.sup-field input:not([type=radio]):not([type=checkbox]),.sup-field select,.sup-field textarea{
  width:100%;padding:11px 13px;border-radius:9px;border:1px solid #d6dEE9;
  font-size:14px;color:#0f1b2d;background:#fff;font-family:inherit;
}
.sup-field input:focus,.sup-field select:focus,.sup-field textarea:focus{
  outline:2px solid #2b5b9e;outline-offset:-1px;border-color:#2b5b9e;
}
.sup-field textarea{resize:vertical;min-height:110px}
.sup-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.sup-submit{width:100%;justify-content:center;margin-top:4px}
.sup-ok{margin:0 0 16px;padding:12px 14px;border-radius:9px;background:#e8f6ef;border:1px solid #b9e3ce;color:#1c6b4a;font-size:13.5px;line-height:1.6}
.sup-err{margin:0 0 16px;padding:12px 14px;border-radius:9px;background:#fdecee;border:1px solid #f5c2c7;color:#992b36;font-size:13.5px;line-height:1.6}

.sup-faqs{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(min(240px,100%),1fr))}
.sup-faq{
  display:flex;align-items:center;gap:13px;padding:18px;border-radius:12px;text-decoration:none;
  background:#fff;border:1px solid #e3e7ee;
  transition:transform .25s ease,box-shadow .25s ease,border-color .25s ease;
}
.sup-faq:hover{transform:translateY(-3px);box-shadow:0 16px 34px -24px rgba(11,31,63,.5);border-color:#2b5b9e}
.sup-faq__icon{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:9px;background:#eff5fd}
.sup-faq__icon svg{width:18px;height:18px;fill:#2b5b9e}
.sup-faq__body{flex:1;min-width:0}
.sup-faq__body strong{display:block;color:#0f1b2d;font-size:13.5px;font-weight:700;line-height:1.4}
.sup-faq__body span{display:block;color:#5a6a80;font-size:12px;margin-top:3px;line-height:1.5}
.sup-faq__go{flex:none;fill:#2b5b9e}

.sup-still{background:#e9f2fd;padding:clamp(28px,3.2vw,44px) 0}
.sup-still__grid{display:flex;flex-wrap:wrap;gap:clamp(18px,2.4vw,34px);align-items:center;justify-content:space-between}
.sup-still h2{margin:0;color:#1b4a86;font-size:clamp(20px,1.8vw,26px);font-weight:700}
.sup-still p{margin:4px 0 0;color:#42597a;font-size:14px}
.sup-still__item{display:flex;align-items:center;gap:11px}
.sup-still__item span{width:34px;height:34px;display:grid;place-items:center;border-radius:9px;background:#fff}
.sup-still__item svg{width:17px;height:17px;fill:#2b5b9e}
.sup-still__item strong{display:block;color:#1b4a86;font-size:13px;font-weight:700}
.sup-still__item a{color:#2b5b9e;font-size:13px;text-decoration:none}
.sup-still__item a:hover{text-decoration:underline}
@media (prefers-reduced-motion:reduce){
  .sup-tile,.sup-faq{transition:none}
  .sup-tile:hover,.sup-faq:hover{transform:none}
}

/* ============================================================
   Rich document sections — illustrated cards + image/text splits
   ============================================================ */
.rx-intro{max-width:74ch;margin:0 auto clamp(30px,3.4vw,46px)}
.ax-stage--dark .rx-intro .ab-p{color:rgba(255,255,255,.78)}

.rx-cards{
  display:grid;gap:clamp(20px,2.2vw,28px);
  grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));
  align-items:start;
}
.rx-card{
  display:flex;flex-direction:column;height:100%;overflow:hidden;
  background:#fff;border:1px solid #e3e7ee;border-radius:18px;
  box-shadow:0 2px 12px rgba(16,24,40,.06);
  transition:transform .3s ease,box-shadow .3s ease,border-color .3s ease;
}
.rx-card:hover{transform:translateY(-6px);box-shadow:0 26px 52px -30px rgba(11,31,63,.5);border-color:rgba(224,169,46,.6)}
.rx-card__media{margin:0;position:relative;aspect-ratio:16/10;overflow:hidden;background:#eef1f6}
.rx-card__media img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s ease}
.rx-card:hover .rx-card__media img{transform:scale(1.06)}
.rx-card__media figcaption{
  position:absolute;top:14px;left:14px;
  width:38px;height:38px;display:grid;place-items:center;border-radius:10px;
  background:rgba(11,27,51,.9);border:1px solid rgba(224,169,46,.6);
  color:var(--brand-gold,#e0a92e);font-size:13px;font-weight:800;letter-spacing:.04em;
}
.rx-card__body{padding:clamp(20px,2vw,26px);display:flex;flex-direction:column;gap:11px;flex:1}
.rx-card__t{margin:0;font-size:clamp(17px,1.35vw,21px);font-weight:700;line-height:1.28;color:#0f1b2d}
.rx-card__p{margin:0;font-size:14px;line-height:1.72;color:#4a5568}
.rx-card__list{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:7px}
.rx-card__list li{position:relative;padding-left:16px;font-size:13px;line-height:1.6;color:#425067}
.rx-card__list li::before{
  content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;
  border-radius:2px;background:var(--brand-gold,#e0a92e);
}
.rx-card__more{margin-top:auto;padding-top:14px;border-top:1px solid #edf0f5}
.rx-card__more > summary{
  cursor:pointer;list-style:none;font-size:12.5px;font-weight:700;
  letter-spacing:.05em;text-transform:uppercase;color:#2b5b9e;
}
.rx-card__more > summary::-webkit-details-marker{display:none}
.rx-card__more > summary::after{content:" \2192"}
.rx-card__more[open] > summary::after{content:" \2191"}
.rx-card__full{padding-top:14px}
.rx-card__full .ab-p{font-size:13.6px}

/* dark bands */
.ax-stage--dark .rx-card{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.13)}
.ax-stage--dark .rx-card__t{color:#fff}
.ax-stage--dark .rx-card__p,.ax-stage--dark .rx-card__list li{color:rgba(255,255,255,.76)}
.ax-stage--dark .rx-card__more{border-top-color:rgba(255,255,255,.12)}
.ax-stage--dark .rx-card__more > summary{color:var(--brand-gold,#e0a92e)}

/* --- image / text splits --- */
.rx-split{
  display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,3vw,52px);
  align-items:center;margin-top:clamp(34px,4vw,64px);
}
.rx-split--flip .rx-split__media{order:2}
.rx-split__media{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:#eef1f6;
  box-shadow:0 20px 48px -30px rgba(11,31,63,.55)}
.rx-split__media img{width:100%;height:100%;object-fit:cover;display:block}
.rx-split__n{
  display:inline-block;padding:5px 12px;border-radius:7px;
  background:rgba(224,169,46,.14);color:#9a7418;
  font-size:11px;font-weight:800;letter-spacing:.1em;
}
.ax-stage--dark .rx-split__n{color:var(--brand-gold,#e0a92e)}
.rx-split__t{margin:12px 0 14px;font-size:clamp(21px,2vw,30px);font-weight:700;line-height:1.2;color:#0f1b2d}
.ax-stage--dark .rx-split__t{color:#fff}
.rx-split__body .ab-p{max-width:60ch}
@media (max-width:860px){
  .rx-split{grid-template-columns:1fr;gap:22px}
  .rx-split--flip .rx-split__media{order:0}
}

/* --- collapsed tail --- */
.rx-tail{margin-top:clamp(38px,4.4vw,66px)}
.rx-tail__k{
  display:block;margin-bottom:16px;font-size:11px;font-weight:800;
  letter-spacing:.12em;text-transform:uppercase;color:#8896aa;
}
.ax-stage--dark .rx-tail__k{color:rgba(255,255,255,.5)}
@media (prefers-reduced-motion:reduce){
  .rx-card,.rx-card__media img{transition:none}
  .rx-card:hover{transform:none}
  .rx-card:hover .rx-card__media img{transform:none}
}

/* consecutive document CTAs sit in a row, not stacked one per line */
.rx-intro .ab-blk__cta,.rx-card__full .ab-blk__cta,.rx-split__body .ab-blk__cta,
.ab-step__body .ab-blk__cta{display:inline-block;margin:0 10px 10px 0}
.rx-intro{text-align:center}
.rx-intro .ab-p{text-align:left}
.rx-intro .ab-panel{text-align:left}
.rx-intro .ab-blk__h{text-align:left}

/* --------------------------------------------------------------------------
   Masthead fit between the mobile breakpoint and a wide desktop.
   The brand, nav and actions all had flex-shrink: 0, so the row had an
   intrinsic width of ~1460px. Below that the header pushed the page wider than
   the viewport — 180px at 1280, 94px at 1366, 50px at 1440 — and every page
   could be scrolled sideways, cutting content off at the left edge.
   -------------------------------------------------------------------------- */
@media (min-width: 1025px) and (max-width: 1520px) {
  .masthead__inner { gap: 10px; }
  .brand__mark { width: 138px; }
  .nav__link { padding-left: 6px; padding-right: 6px; font-size: 10.8px; letter-spacing: .02em; }
  .masthead__actions { gap: 8px; }
  .masthead__actions .icon-btn { width: 38px; height: 38px; }
  .masthead__cta { padding: 11px 16px; font-size: 12px; white-space: nowrap; }
}
@media (min-width: 1025px) and (max-width: 1340px) {
  .brand__mark { width: 120px; }
  .nav__link { padding-left: 4px; padding-right: 4px; font-size: 10.2px; }
  .masthead__cta { padding: 10px 12px; font-size: 11.5px; }
  .masthead__actions .icon-btn { width: 34px; height: 34px; }
}

/* just above the mobile breakpoint the row is tightest of all */
@media (min-width: 1025px) and (max-width: 1140px) {
  .masthead__inner { gap: 6px; }
  .brand__mark { width: 104px; }
  .nav__link { padding-left: 3px; padding-right: 3px; font-size: 9.6px; letter-spacing: 0; }
  .nav__caret { width: 7px; height: 7px; }
  .masthead__actions { gap: 5px; }
  .masthead__actions .icon-btn { width: 30px; height: 30px; }
  .masthead__cta { padding: 9px 10px; font-size: 10.5px; }
}

/* Four-column variant of .ab-grid3. This was written as an inline
   grid-template-columns, which outranks the mobile media query below and left
   columns two to four clipped off the side of a phone screen. */
.ab-grid3--four { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1100px) { .ab-grid3--four { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px)  { .ab-grid3--four { grid-template-columns: 1fr; } }

/* Phones: the actions row is flex-shrink:0, so at 390px and below its four
   controls ran past the masthead's right padding and the menu button was
   clipped by the viewport edge. Tighten the gap and the tap targets instead. */
@media (max-width: 460px) {
  .masthead__inner { gap: 10px; }
  .masthead__actions { gap: 6px; }
  .masthead__actions .icon-btn,
  .masthead__actions .mast-icon { width: 36px; height: 36px; }
}
@media (max-width: 360px) {
  .masthead__actions { gap: 4px; }
  .masthead__actions .icon-btn,
  .masthead__actions .mast-icon { width: 32px; height: 32px; }
}

/* Governance & Executive Leadership — the named officers and their portraits. */
.lead-grid { display: grid; gap: 26px; margin-top: 30px; }
.lead-card {
  display: grid; grid-template-columns: 220px 1fr; gap: 26px; align-items: start;
  background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .14);
  border-radius: 16px; padding: 22px; scroll-margin-top: 110px;
}
.lead-card__photo { margin: 0; border-radius: 12px; overflow: hidden; background: #0d1b2f; }
.lead-card__photo img { display: block; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: cover; }
.lead-card__name { margin: 0 0 4px; font-size: 21px; font-weight: 800; color: #fff; letter-spacing: -.01em; }
.lead-card__role { margin: 0 0 14px; font-size: 14px; font-weight: 700; color: #c9a227; }
.lead-card__bio { margin: 0 0 12px; font-size: 15px; line-height: 1.7; color: #d7dEE8; }
.lead-card__bio:last-child { margin-bottom: 0; }
@media (min-width: 1100px) { .lead-card--wide { grid-column: 1 / -1; } }
@media (max-width: 720px) {
  .lead-card { grid-template-columns: 1fr; gap: 18px; padding: 18px; }
  .lead-card__photo { max-width: 200px; }
}

/* Faculty block with no portrait — used where no real person has been supplied. */
.ti-faculty--nophoto { grid-template-columns: 1fr; }

/* Headquarters phone in the footer. */
.footer__phone { display: flex; align-items: center; gap: 8px; margin: 12px 0 0; font-size: 14px; }
.footer__phone svg { width: 15px; height: 15px; flex: 0 0 auto; opacity: .75; }
.footer__phone a { color: inherit; text-decoration: none; }
.footer__phone a:hover { text-decoration: underline; }

/* Checkout notices — a failed or cancelled payment has to say so on the page
   the candidate is returned to, not look like a completed order. */
.cko-alert { margin: 0 0 18px; padding: 13px 16px; border-radius: 10px;
             font-size: 14.5px; line-height: 1.6; }
.cko-alert--err  { background: #fef2f2; border: 1px solid #fecaca; color: #991b1b; }
.cko-alert--note { background: #eff6ff; border: 1px solid #bfdbfe; color: #1e40af; }


/* The rule above once matched every <input>, radios and checkboxes included:
   the radio grew to the full row and pushed its label to the far edge, and
   the consent checkbox squeezed its sentence into one word per line. */
.sup-field input[type=radio],.sup-field input[type=checkbox]{
  width:18px;height:18px;padding:0;margin:0;flex:0 0 auto;accent-color:#0b1f3f;
}
.sup-choice label{display:inline-flex;align-items:center;gap:8px;margin:0 20px 6px 0;font-weight:500;font-size:14px;color:#0f1b2d}
.sup-consent{display:flex;gap:10px;align-items:flex-start;font-size:13.5px;line-height:1.55;font-weight:400}


/* About pages, rich sections. Two things read as "broken" at desktop width:
   .ab-p caps at 62ch (~470px) inside a centred 74ch intro, so the opening
   copy sat as a narrow slab with 400px of empty gutter either side; and the
   split grids centred a 4:3 photo against bodies several screens tall, which
   parked the picture half a page below its heading with nothing above it. */
.rx-intro{max-width:none;display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,56px);align-items:center;text-align:left;margin:0 0 clamp(30px,3.4vw,46px)}
.rx-intro .ab-p,.rx-split__body .ab-p,.rx-card__full .ab-p{max-width:none}
.rx-intro__media{margin:0;border-radius:18px;overflow:hidden;aspect-ratio:4/3;background:#eef1f6}
.rx-intro__media img{width:100%;height:100%;object-fit:cover;display:block}
.rx-split{align-items:start}
.rx-split__media{position:sticky;top:96px}
@media (max-width:900px){
  .rx-intro{grid-template-columns:1fr}
  .rx-intro__media{aspect-ratio:16/9}
  .rx-split__media{position:static}
}


/* A 540px copy column beside a montage needs ~1100px to breathe. Between
   901px and 1080px the split kept two columns and squeezed the photos into
   ~300px — the client's 960px window showed a narrow slab of text and what
   looked like an empty right-hand side. Collapse earlier. */
@media (max-width: 1080px) {
  .ab-split--wide { grid-template-columns: 1fr; gap: 34px; }
  .ab-split--wide > .ab-media { max-width: 640px; }
}

/* ---- Enhanced Footer Legal Navigation ---- */
.footer__legal {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px 14px;
}
.footer__legal-link {
  color: rgba(255, 255, 255, 0.75);
  font-size: 12.5px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}
.footer__legal-link:hover {
  color: #e5b342;
  text-decoration: underline;
}
.footer__legal-sep {
  color: rgba(255, 255, 255, 0.25);
  font-size: 11px;
}
@media (max-width: 820px) {
  .footer__legal {
    justify-content: center;
    gap: 8px 12px;
  }
}
/* ==========================================================================
   IBACTP® Policy & Legal Document Design System
   ========================================================================== */

/* Hero Banner */
.pol-hero {
  position: relative;
  background: #091426;
  background: linear-gradient(135deg, #071120 0%, #0d1e38 60%, #102646 100%);
  color: #fff;
  padding: 44px 0 28px;
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.pol-hero__inner {
  position: relative;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.pol-hero .breadcrumb {
  margin-bottom: 2px;
}
.pol-hero .breadcrumb .active {
  color: rgba(255, 255, 255, 0.95);
  font-weight: 600;
}
.pol-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 5px 14px;
  border-radius: 999px;
  background: rgba(224, 169, 46, 0.12);
  border: 1px solid rgba(224, 169, 46, 0.35);
  color: #e5b342;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.pol-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #e5b342;
  box-shadow: 0 0 6px #e5b342;
}
.pol-hero__title {
  font-size: clamp(26px, 3.4vw, 40px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.02em;
  color: #ffffff;
  margin: 0;
  max-width: 920px;
}
.pol-hero__summary {
  font-size: clamp(15px, 1.2vw, 16.5px);
  color: rgba(255, 255, 255, 0.78);
  line-height: 1.6;
  max-width: 820px;
  margin: 0;
}

/* Metadata Bar */
.pol-hero__meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 18px 24px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  font-size: 13px;
  color: rgba(255, 255, 255, 0.72);
}
.pol-meta-item {
  display: flex;
  align-items: center;
  gap: 8px;
}
.pol-meta-item svg {
  width: 15px;
  height: 15px;
  color: #e5b342;
  flex-shrink: 0;
}
.pol-meta-item strong {
  color: #fff;
  font-weight: 600;
}
.pol-btn-print {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: #fff;
  padding: 6px 14px;
  border-radius: 6px;
  font-size: 12.5px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
}
.pol-btn-print:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: rgba(255, 255, 255, 0.35);
  transform: translateY(-1px);
}
.pol-btn-print svg {
  width: 14px;
  height: 14px;
}

/* Policy Tabs Switcher */
.pol-tabs-bar {
  margin-top: 10px;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.pol-tabs-bar::-webkit-scrollbar {
  display: none;
}
.pol-tabs-list {
  display: inline-flex;
  gap: 6px;
  padding: 4px;
  background: rgba(0, 0, 0, 0.28);
  border-radius: 10px;
  border: 1px solid rgba(255, 255, 255, 0.1);
}
.pol-tab {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 15px;
  border-radius: 7px;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.72);
  text-decoration: none;
  white-space: nowrap;
  transition: all 0.18s ease;
}
.pol-tab svg {
  width: 15px;
  height: 15px;
  color: rgba(255, 255, 255, 0.5);
  transition: color 0.18s ease;
}
.pol-tab:hover {
  color: #fff;
  background: rgba(255, 255, 255, 0.08);
}
.pol-tab.is-active {
  color: #0d1e38;
  background: #e5b342;
  font-weight: 700;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.2);
}
.pol-tab.is-active svg {
  color: #0d1e38;
}

/* Main Body Layout */
.pol-body-wrap {
  background: #f8fafc;
  padding: 44px 0 80px;
}
.pol-body-layout {
  display: grid;
  grid-template-columns: 310px minmax(0, 1fr);
  gap: 36px;
  align-items: start;
}

/* Sticky Rail (TOC) */
.pol-rail {
  position: sticky;
  top: 90px;
}
.pol-rail__card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  box-shadow: 0 4px 18px -2px rgba(15, 23, 42, 0.05);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.pol-rail__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 18px;
  background: #f1f5f9;
  border-bottom: 1px solid #e2e8f0;
}
.pol-rail__title {
  font-size: 12.5px;
  font-weight: 700;
  color: #0f172a;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.pol-rail__count {
  font-size: 11px;
  font-weight: 700;
  background: #e2e8f0;
  color: #475569;
  padding: 2px 8px;
  border-radius: 999px;
}
.pol-toc {
  max-height: calc(100vh - 280px);
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  scrollbar-width: thin;
  scrollbar-color: #cbd5e1 transparent;
}
.pol-toc::-webkit-scrollbar {
  width: 5px;
}
.pol-toc::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.pol-toc__link {
  display: flex;
  align-items: baseline;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: 12.5px;
  line-height: 1.4;
  color: #475569;
  text-decoration: none;
  transition: all 0.15s ease;
}
.pol-toc__num {
  font-size: 11px;
  font-weight: 700;
  color: #94a3b8;
  min-width: 18px;
}
.pol-toc__text {
  flex: 1;
}
.pol-toc__link:hover {
  background: #f8fafc;
  color: #0f172a;
}
.pol-toc__link.is-active {
  background: #eff6ff;
  color: #1d4ed8;
  font-weight: 600;
  border-left: 3px solid #2563eb;
  border-top-left-radius: 1px;
  border-bottom-left-radius: 1px;
}
.pol-toc__link.is-active .pol-toc__num {
  color: #2563eb;
}
.pol-rail__footer {
  padding: 14px 18px;
  background: #fafafa;
  border-top: 1px solid #e2e8f0;
}
.pol-rail__footer-text {
  font-size: 11.5px;
  color: #64748b;
  margin: 0 0 5px;
}
.pol-rail__footer-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
  color: #0f172a;
  text-decoration: none;
}
.pol-rail__footer-link svg {
  width: 14px;
  height: 14px;
  color: #2563eb;
}
.pol-rail__footer-link:hover {
  color: #2563eb;
  text-decoration: underline;
}

/* Document Body & Sheets */
.pol-doc {
  display: flex;
  flex-direction: column;
  gap: 26px;
}
.pol-sheet {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: clamp(22px, 2.8vw, 34px);
  box-shadow: 0 2px 8px -1px rgba(15, 23, 42, 0.03);
  scroll-margin-top: 110px;
}
.pol-sheet--intro {
  border-left: 4px solid #e5b342;
  background: linear-gradient(180deg, #ffffff 0%, #fcfdfd 100%);
}
.pol-sheet__badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #92400e;
  background: #fef3c7;
  padding: 3px 9px;
  border-radius: 5px;
  margin-bottom: 12px;
}
.pol-sheet__badge svg {
  width: 13px;
  height: 13px;
}
.pol-sheet__intro-title {
  font-size: clamp(20px, 2vw, 24px);
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 16px;
}

/* Section Header */
.pol-section__hdr {
  margin-bottom: 18px;
  padding-bottom: 12px;
  border-bottom: 1px solid #f1f5f9;
}
.pol-section__kicker {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #2563eb;
  margin-bottom: 4px;
}
.pol-section__h2 {
  font-size: clamp(19px, 2.1vw, 23px);
  font-weight: 700;
  line-height: 1.3;
  color: #0f172a;
  margin: 0;
}

/* Prose inside Article */
.pol-article {
  font-size: 14.5px;
  line-height: 1.75;
  color: #334155;
  display: flex;
  flex-direction: column;
  gap: 13px;
}
.pol-article p {
  margin: 0;
}
.pol-article strong {
  color: #0f172a;
  font-weight: 600;
}
.pol-h3 {
  font-size: 16.5px;
  font-weight: 700;
  color: #0f172a;
  margin: 14px 0 2px;
  padding-left: 10px;
  border-left: 3px solid #2563eb;
}
.pol-h4 {
  font-size: 15px;
  font-weight: 700;
  color: #1e293b;
  margin: 10px 0 0;
}

/* Checklist / Bullet items */
.pol-checklist {
  list-style: none;
  padding: 0;
  margin: 4px 0 8px;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: 8px 12px;
}
.pol-checklist li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #f8fafc;
  padding: 8px 12px;
  border-radius: 7px;
  border: 1px solid #eef2f6;
  font-size: 13.5px;
  line-height: 1.55;
  color: #334155;
}
.pol-chk-bullet {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #e6f4ea;
  color: #137333;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.pol-chk-bullet svg {
  width: 10px;
  height: 10px;
}

/* Callout */
.pol-callout {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-left: 4px solid #16a34a;
  border-radius: 8px;
  padding: 12px 15px;
  margin: 6px 0;
}
.pol-callout__icon {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  color: #16a34a;
  margin-top: 1px;
}
.pol-callout__icon svg {
  width: 100%;
  height: 100%;
}
.pol-callout__body {
  font-size: 13.5px;
  line-height: 1.6;
  color: #166534;
  font-weight: 500;
}

/* Governance Card */
.pol-sheet--gov {
  background: linear-gradient(135deg, #f8fafc 0%, #edf2f7 100%);
  border: 1px solid #cbd5e1;
}
.pol-gov-card {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}
.pol-gov-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 10px;
  background: #0f172a;
  color: #e5b342;
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.pol-gov-card__icon svg {
  width: 24px;
  height: 24px;
}
.pol-gov-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pol-gov-card__title {
  font-size: 18px;
  font-weight: 700;
  color: #0f172a;
  margin: 0;
}
.pol-gov-card__meta {
  font-size: 12.5px;
  color: #64748b;
  margin: 0;
}
.pol-gov-card__text {
  font-size: 13.5px;
  line-height: 1.6;
  color: #475569;
  margin: 0;
}
.pol-gov-card__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 12px;
  margin-top: 8px;
}

/* Responsive */
@media (max-width: 960px) {
  .pol-body-layout {
    grid-template-columns: 1fr;
  }
  .pol-rail {
    position: static;
  }
  .pol-toc {
    max-height: 280px;
  }
}
@media (max-width: 600px) {
  .pol-checklist {
    grid-template-columns: 1fr;
  }
  .pol-gov-card {
    flex-direction: column;
  }
  .pol-hero__meta {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .pol-btn-print {
    margin-left: 0;
  }
}
@media print {
  .pol-hero,
  .pol-tabs-bar,
  .pol-btn-print,
  .pol-rail,
  .footer,
  .masthead,
  .utility {
    display: none !important;
  }
  .pol-body-wrap {
    padding: 0 !important;
    background: transparent !important;
  }
  .pol-body-layout {
    grid-template-columns: 1fr !important;
  }
  .pol-sheet {
    border: none !important;
    box-shadow: none !important;
    padding: 0 0 24px 0 !important;
    break-inside: avoid;
    page-break-inside: avoid;
  }
}
/* ==========================================================================
   Audience Pages Premium Redesign Styles (Universities, Partners, Individuals, Organizations)
   ========================================================================== */

/* Enhanced Hero */
.aud-hero {
  position: relative;
  background: radial-gradient(circle at 85% 20%, rgba(43, 91, 158, 0.28) 0%, transparent 60%),
              linear-gradient(135deg, #071120 0%, #0d1e38 55%, #102646 100%);
  color: #fff;
  padding: clamp(48px, 6vw, 72px) 0 clamp(40px, 5vw, 60px);
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.aud-hero__glow {
  position: absolute;
  top: -120px;
  right: -50px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(224, 169, 46, 0.12) 0%, rgba(37, 99, 235, 0.15) 50%, transparent 70%);
  pointer-events: none;
}
.aud-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
  position: relative;
  z-index: 2;
}
.aud-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(224, 169, 46, 0.12);
  border: 1px solid rgba(224, 169, 46, 0.35);
  color: #e5b342;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.aud-hero__title {
  font-size: clamp(30px, 3.8vw, 48px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0 0 18px;
}
.aud-hero__title .hl-gold {
  color: #e5b342;
  background: linear-gradient(135deg, #fef08a 0%, #e5b342 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.aud-hero__title .hl-blue {
  color: #38bdf8;
  background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.aud-hero__lead {
  font-size: clamp(15.5px, 1.25vw, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 28px;
  max-width: 620px;
}
.aud-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 34px;
}
.aud-hero__stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.aud-stat-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.aud-stat-num {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.aud-stat-lbl {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.65);
}

/* Hero Media Card */
.aud-hero__media {
  position: relative;
}
.aud-media-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.aud-media-frame img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
}
.aud-media-tag {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  padding: 14px 18px;
  background: rgba(13, 30, 56, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.aud-media-tag__title {
  font-size: 13.5px;
  font-weight: 700;
  color: #38bdf8;
  margin-bottom: 2px;
}
.aud-media-tag__sub {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.7);
}
.aud-media-tag__pill {
  font-size: 11px;
  font-weight: 700;
  color: #e5b342;
  background: rgba(224, 169, 46, 0.15);
  border: 1px solid rgba(224, 169, 46, 0.3);
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}

/* Sections & Bento Grid */
.aud-section {
  padding: clamp(56px, 7vw, 88px) 0;
}
.aud-section--alt {
  background: #f8fafc;
}
.aud-sec-hdr {
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(36px, 4.5vw, 54px);
}
.aud-sec-hdr--left {
  text-align: left;
  margin-inline: 0;
}
.aud-kicker {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.aud-h2 {
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.aud-p {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: #475569;
  margin: 0;
}

/* 3-Col and 4-Col Feature Cards */
.aud-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(20px, 2.5vw, 28px);
}
.aud-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.aud-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: clamp(24px, 2.8vw, 32px);
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.aud-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
}
.aud-card--featured {
  border-color: #93c5fd;
  background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%);
  position: relative;
}
.aud-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #eff6ff;
  color: #2563eb;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.aud-card__icon svg {
  width: 24px;
  height: 24px;
}
.aud-card__icon--gold {
  background: #fef3c7;
  color: #d97706;
}
.aud-card__title {
  font-size: 19px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px;
  line-height: 1.3;
}
.aud-card__text {
  font-size: 14.5px;
  line-height: 1.65;
  color: #475569;
  margin: 0 0 16px;
  flex: 1;
}
.aud-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.aud-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: #334155;
  line-height: 1.5;
}
.aud-card__list svg {
  width: 16px;
  height: 16px;
  color: #10b981;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Stepper / Visual Journey Component */
.aud-stepper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 20px;
  position: relative;
}
.aud-step {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.aud-step__num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0d1e38;
  color: #e5b342;
  font-size: 13px;
  font-weight: 800;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.aud-step__t {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px;
}
.aud-step__d {
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.55;
  margin: 0;
}

/* Pathway Domain Matrix (for Individuals) */
.aud-domain-block {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: clamp(24px, 3vw, 36px);
  margin-bottom: 24px;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
}
.aud-domain-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid #f1f5f9;
}
.aud-domain-title {
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}
.aud-domain-badge {
  font-size: 11.5px;
  font-weight: 700;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
}
.aud-certs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}
.aud-cert-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 16px;
  text-decoration: none;
  transition: all 0.18s ease;
}
.aud-cert-pill:hover {
  background: #ffffff;
  border-color: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -2px rgba(37, 99, 235, 0.12);
}
.aud-cert-pill__code {
  font-size: 14px;
  font-weight: 800;
  color: #1d4ed8;
  background: #e0f2fe;
  padding: 4px 8px;
  border-radius: 6px;
}
.aud-cert-pill__title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.35;
}
.aud-cert-pill__chev {
  width: 14px;
  height: 14px;
  color: #94a3b8;
}
.aud-cert-pill:hover .aud-cert-pill__chev {
  color: #2563eb;
}

/* Institutional Form Container Integration */
.aud-form-wrap {
  background: #0d1e38;
  color: #fff;
  border-radius: 24px;
  padding: clamp(32px, 5vw, 56px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px -10px rgba(13, 30, 56, 0.4);
}
.aud-form-wrap .bento-title,
.aud-form-wrap h2 {
  color: #fff;
}
.aud-form-wrap .bento-desc,
.aud-form-wrap p {
  color: rgba(255, 255, 255, 0.78);
}
.aud-form-wrap .sup-field label {
  color: rgba(255, 255, 255, 0.9);
}

/* Responsive queries */
@media (max-width: 960px) {
  .aud-hero__layout {
    grid-template-columns: 1fr;
  }
  .aud-media-frame img {
    height: 280px;
  }
}
/* ==========================================================================
   Audience Pages Premium Redesign Styles (Universities, Partners, Individuals, Organizations)
   ========================================================================== */

/* Enhanced Hero */
.aud-hero {
  position: relative;
  background: radial-gradient(circle at 85% 20%, rgba(43, 91, 158, 0.28) 0%, transparent 60%),
              linear-gradient(135deg, #071120 0%, #0d1e38 55%, #102646 100%);
  color: #fff;
  padding: clamp(48px, 6vw, 72px) 0 clamp(40px, 5vw, 60px);
  overflow: hidden;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.aud-hero__glow {
  position: absolute;
  top: -120px;
  right: -50px;
  width: 600px;
  height: 600px;
  background: radial-gradient(circle, rgba(224, 169, 46, 0.12) 0%, rgba(37, 99, 235, 0.15) 50%, transparent 70%);
  pointer-events: none;
}
.aud-hero__layout {
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  gap: clamp(32px, 4vw, 56px);
  align-items: center;
  position: relative;
  z-index: 2;
}
.aud-hero__badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(224, 169, 46, 0.12);
  border: 1px solid rgba(224, 169, 46, 0.35);
  color: #e5b342;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 16px;
}
.aud-hero__title {
  font-size: clamp(30px, 3.8vw, 48px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -0.025em;
  color: #ffffff;
  margin: 0 0 18px;
}
.aud-hero__title .hl-gold {
  color: #e5b342;
  background: linear-gradient(135deg, #fef08a 0%, #e5b342 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.aud-hero__title .hl-blue {
  color: #38bdf8;
  background: linear-gradient(135deg, #7dd3fc 0%, #38bdf8 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.aud-hero__lead {
  font-size: clamp(15.5px, 1.25vw, 18px);
  line-height: 1.65;
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 28px;
  max-width: 620px;
}
.aud-hero__actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px;
  margin-bottom: 34px;
}
.aud-hero__stat-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  gap: 16px;
  padding-top: 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.aud-stat-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
}
.aud-stat-num {
  font-size: clamp(20px, 2vw, 26px);
  font-weight: 800;
  color: #fff;
  letter-spacing: -0.01em;
}
.aud-stat-lbl {
  font-size: 11.5px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: rgba(255, 255, 255, 0.65);
}

/* Hero Media Card */
.aud-hero__media {
  position: relative;
}
.aud-media-frame {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.15);
}
.aud-media-frame img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  display: block;
}
.aud-media-tag {
  position: absolute;
  bottom: 16px;
  left: 16px;
  right: 16px;
  padding: 14px 18px;
  background: rgba(13, 30, 56, 0.88);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.18);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.aud-media-tag__title {
  font-size: 13.5px;
  font-weight: 700;
  color: #38bdf8;
  margin-bottom: 2px;
}
.aud-media-tag__sub {
  font-size: 11.5px;
  color: rgba(255, 255, 255, 0.7);
}
.aud-media-tag__pill {
  font-size: 11px;
  font-weight: 700;
  color: #e5b342;
  background: rgba(224, 169, 46, 0.15);
  border: 1px solid rgba(224, 169, 46, 0.3);
  padding: 4px 10px;
  border-radius: 999px;
  text-transform: uppercase;
}

/* Sections & Bento Grid */
.aud-section {
  padding: clamp(56px, 7vw, 88px) 0;
}
.aud-section--alt {
  background: #f8fafc;
}
.aud-sec-hdr {
  text-align: center;
  max-width: 780px;
  margin: 0 auto clamp(36px, 4.5vw, 54px);
}
.aud-sec-hdr--left {
  text-align: left;
  margin-inline: 0;
}
.aud-kicker {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #2563eb;
  background: #eff6ff;
  border: 1px solid #dbeafe;
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 12px;
}
.aud-h2 {
  font-size: clamp(24px, 2.8vw, 36px);
  font-weight: 800;
  color: #0f172a;
  line-height: 1.22;
  letter-spacing: -0.02em;
  margin: 0 0 14px;
}
.aud-p {
  font-size: clamp(15px, 1.15vw, 17px);
  line-height: 1.65;
  color: #475569;
  margin: 0;
}

/* 3-Col and 4-Col Feature Cards */
.aud-grid-3 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr));
  gap: clamp(20px, 2.5vw, 28px);
}
.aud-grid-4 {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: clamp(16px, 2vw, 24px);
}
.aud-card {
  background: #ffffff;
  border: 1px solid #e2e8f0;
  border-radius: 16px;
  padding: clamp(24px, 2.8vw, 32px);
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
  display: flex;
  flex-direction: column;
  transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.aud-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px -4px rgba(15, 23, 42, 0.08);
  border-color: #cbd5e1;
}
.aud-card--featured {
  border-color: #93c5fd;
  background: linear-gradient(180deg, #ffffff 0%, #f0f7ff 100%);
  position: relative;
}
.aud-card__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: #eff6ff;
  color: #2563eb;
  display: grid;
  place-items: center;
  margin-bottom: 20px;
  flex-shrink: 0;
}
.aud-card__icon svg {
  width: 24px;
  height: 24px;
}
.aud-card__icon--gold {
  background: #fef3c7;
  color: #d97706;
}
.aud-card__title {
  font-size: 19px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 10px;
  line-height: 1.3;
}
.aud-card__text {
  font-size: 14.5px;
  line-height: 1.65;
  color: #475569;
  margin: 0 0 16px;
  flex: 1;
}
.aud-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.aud-card__list li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: 13.5px;
  color: #334155;
  line-height: 1.5;
}
.aud-card__list svg {
  width: 16px;
  height: 16px;
  color: #10b981;
  flex-shrink: 0;
  margin-top: 2px;
}

/* Stepper / Visual Journey Component */
.aud-stepper {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr));
  gap: 20px;
  position: relative;
}
.aud-step {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  position: relative;
}
.aud-step__num {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #0d1e38;
  color: #e5b342;
  font-size: 13px;
  font-weight: 800;
  display: grid;
  place-items: center;
  margin-bottom: 14px;
}
.aud-step__t {
  font-size: 16px;
  font-weight: 700;
  color: #0f172a;
  margin: 0 0 6px;
}
.aud-step__d {
  font-size: 13.5px;
  color: #64748b;
  line-height: 1.55;
  margin: 0;
}

/* Pathway Domain Matrix (for Individuals) */
.aud-domain-block {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 18px;
  padding: clamp(24px, 3vw, 36px);
  margin-bottom: 24px;
  box-shadow: 0 4px 16px -2px rgba(15, 23, 42, 0.04);
}
.aud-domain-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding-bottom: 20px;
  margin-bottom: 22px;
  border-bottom: 1px solid #f1f5f9;
}
.aud-domain-title {
  font-size: clamp(20px, 2.2vw, 24px);
  font-weight: 800;
  color: #0f172a;
  margin: 0;
}
.aud-domain-badge {
  font-size: 11.5px;
  font-weight: 700;
  background: #eff6ff;
  color: #1d4ed8;
  padding: 4px 12px;
  border-radius: 999px;
  text-transform: uppercase;
}
.aud-certs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: 16px;
}
.aud-cert-pill {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 12px 16px;
  text-decoration: none;
  transition: all 0.18s ease;
}
.aud-cert-pill:hover {
  background: #ffffff;
  border-color: #2563eb;
  transform: translateY(-2px);
  box-shadow: 0 6px 16px -2px rgba(37, 99, 235, 0.12);
}
.aud-cert-pill__code {
  font-size: 14px;
  font-weight: 800;
  color: #1d4ed8;
  background: #e0f2fe;
  padding: 4px 8px;
  border-radius: 6px;
}
.aud-cert-pill__title {
  flex: 1;
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  line-height: 1.35;
}
.aud-cert-pill__chev {
  width: 14px;
  height: 14px;
  color: #94a3b8;
}
.aud-cert-pill:hover .aud-cert-pill__chev {
  color: #2563eb;
}

/* Institutional Form Container Integration */
.aud-form-wrap {
  background: #0d1e38;
  color: #fff;
  border-radius: 24px;
  padding: clamp(32px, 5vw, 56px);
  position: relative;
  overflow: hidden;
  box-shadow: 0 20px 40px -10px rgba(13, 30, 56, 0.4);
}
.aud-form-wrap .bento-title,
.aud-form-wrap h2 {
  color: #fff;
}
.aud-form-wrap .bento-desc,
.aud-form-wrap p {
  color: rgba(255, 255, 255, 0.78);
}
.aud-form-wrap .sup-field label {
  color: rgba(255, 255, 255, 0.9);
}

/* Responsive queries */
@media (max-width: 960px) {
  .aud-hero__layout {
    grid-template-columns: 1fr;
  }
  .aud-media-frame img {
    height: 280px;
  }
}

/* Glass button on dark heroes */
.aud-btn-glass {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 24px;
  font-size: 13.5px;
  font-weight: 700;
  color: #ffffff;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.25);
  border-radius: 8px;
  text-decoration: none;
  transition: all 0.2s ease;
}
.aud-btn-glass:hover {
  background: rgba(255, 255, 255, 0.16);
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-1px);
}
/* ==========================================================================
   Bespoke Enterprise Inquiry Hub Component
   ========================================================================== */
.enq-card {
  max-width: 1200px;
  margin: 0 auto;
  background: #ffffff;
  border: 1.5px solid #e2e8f0;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 20px 45px -15px rgba(15, 23, 42, 0.08), 0 2px 8px rgba(15, 23, 42, 0.04);
  display: grid;
  grid-template-columns: 380px 1fr;
  scroll-margin-top: 90px;
}

@media (max-width: 991px) {
  .enq-card {
    grid-template-columns: 1fr;
    border-radius: 18px;
  }
}

/* ── Left Sidebar (Executive Brief & Trust Panel) ── */
.enq-sidebar {
  background: linear-gradient(165deg, #0b172a 0%, #112240 55%, #0f172a 100%);
  color: #f8fafc;
  padding: 42px 34px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: relative;
  overflow: hidden;
}

.enq-sidebar::before {
  content: '';
  position: absolute;
  top: -60px;
  left: -60px;
  width: 240px;
  height: 240px;
  background: radial-gradient(circle, rgba(37, 99, 235, 0.28) 0%, rgba(37, 99, 235, 0) 70%);
  pointer-events: none;
}

.enq-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 6px 14px;
  border-radius: 100px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #38bdf8;
  background: rgba(56, 189, 248, 0.12);
  border: 1px solid rgba(56, 189, 248, 0.3);
  width: fit-content;
  margin-bottom: 18px;
}

.enq-title {
  font-size: clamp(22px, 2vw, 26px);
  font-weight: 750;
  line-height: 1.25;
  color: #ffffff;
  margin: 0 0 12px;
  letter-spacing: -0.02em;
}

.enq-lede {
  font-size: 14px;
  line-height: 1.65;
  color: #94a3b8;
  margin: 0 0 32px;
}

.enq-highlights {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin-bottom: 36px;
}

.enq-highlight-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.enq-highlight-icon {
  width: 34px;
  height: 34px;
  border-radius: 9px;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #38bdf8;
  flex-shrink: 0;
  margin-top: 1px;
}

.enq-highlight-title {
  font-size: 13.5px;
  font-weight: 650;
  color: #f1f5f9;
  line-height: 1.35;
}

.enq-highlight-desc {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.5;
  margin-top: 2px;
}

/* Live Desk Status Card */
.enq-desk-status {
  background: rgba(15, 23, 42, 0.65);
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 14px;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  backdrop-filter: blur(8px);
}

.enq-status-live {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 650;
  color: #34d399;
}

.enq-status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #10b981;
  box-shadow: 0 0 10px #10b981;
  display: inline-block;
  animation: enqPulse 2s infinite;
}

.enq-desk-note {
  font-size: 12px;
  color: #94a3b8;
  line-height: 1.45;
}

.enq-desk-email {
  font-size: 12.5px;
  color: #38bdf8;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-weight: 600;
}

.enq-desk-email:hover {
  text-decoration: underline;
  color: #7dd3fc;
}

/* ── Main Form (Right) ── */
.enq-main {
  padding: 42px 40px;
  background: #ffffff;
}

@media (max-width: 600px) {
  .enq-main {
    padding: 24px 18px;
  }
}

.enq-sec-tag {
  font-size: 11px;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #64748b;
  margin: 26px 0 14px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f1f5f9;
}

.enq-sec-tag:first-of-type {
  margin-top: 0;
}

.enq-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

@media (max-width: 600px) {
  .enq-grid {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}

.enq-col-full {
  grid-column: 1 / -1;
}

.enq-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.enq-label {
  font-size: 13px;
  font-weight: 600;
  color: #1e293b;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.enq-label span.req {
  color: #ef4444;
  margin-left: 2px;
}

.enq-input,
.enq-select,
.enq-textarea {
  width: 100%;
  padding: 11px 14px;
  border: 1.5px solid #cbd5e1;
  border-radius: 10px;
  font-size: 14px;
  color: #0f172a;
  background: #f8fafc;
  font-family: inherit;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
  outline: none;
  box-sizing: border-box;
}

.enq-input:hover,
.enq-select:hover,
.enq-textarea:hover {
  border-color: #94a3b8;
  background: #ffffff;
}

.enq-input:focus,
.enq-select:focus,
.enq-textarea:focus {
  border-color: #2563eb;
  background: #ffffff;
  box-shadow: 0 0 0 3.5px rgba(37, 99, 235, 0.12);
}

.enq-input--err,
.enq-select--err,
.enq-textarea--err {
  border-color: #f87171 !important;
  background: #fff5f5 !important;
}

.enq-input::placeholder,
.enq-textarea::placeholder {
  color: #94a3b8;
}

.enq-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2364748b' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 36px;
  cursor: pointer;
}

.enq-textarea {
  resize: vertical;
  min-height: 115px;
  line-height: 1.6;
}

.enq-err-msg {
  font-size: 12px;
  color: #dc2626;
  margin-top: 3px;
  font-weight: 500;
}

.enq-footer {
  margin-top: 24px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.enq-btn-submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 14px 34px;
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  color: #ffffff;
  font-size: 15px;
  font-weight: 650;
  border: none;
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  box-shadow: 0 4px 14px rgba(29, 78, 216, 0.28);
  transition: all 0.2s ease;
  width: fit-content;
}

@media (max-width: 600px) {
  .enq-btn-submit {
    width: 100%;
  }
}

.enq-btn-submit:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  transform: translateY(-1px);
  box-shadow: 0 8px 22px rgba(29, 78, 216, 0.38);
}

.enq-btn-submit:active {
  transform: translateY(0);
}

.enq-btn-submit svg {
  transition: transform 0.2s ease;
}

.enq-btn-submit:hover svg {
  transform: translateX(4px);
}

.enq-privacy-notice {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  color: #64748b;
  line-height: 1.5;
}

.enq-privacy-notice svg {
  color: #94a3b8;
  flex-shrink: 0;
}

.enq-privacy-notice a {
  color: #2563eb;
  text-decoration: underline;
}

.enq-privacy-notice a:hover {
  color: #1d4ed8;
}

/* Alert States */
.enq-alert {
  padding: 16px 20px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.6;
  margin-bottom: 22px;
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.enq-alert--ok {
  background: #f0fdf4;
  border: 1.5px solid #bbf7d0;
  color: #15803d;
}

.enq-alert--err {
  background: #fef2f2;
  border: 1.5px solid #fecaca;
  color: #b91c1c;
}


/* Programme facts in the certification hero. */
.cert-hero__facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px 28px;margin:22px 0 6px;padding:18px 22px;
  border:1px solid rgba(255,255,255,.14);border-radius:12px;background:rgba(255,255,255,.05)}
.cert-hero__facts div{display:grid;grid-template-columns:150px 1fr;gap:10px;align-items:baseline;font-size:14px;line-height:1.5}
.cert-hero__facts dt{margin:0;color:#d8a846;font-weight:700;font-size:12.5px;letter-spacing:.04em;text-transform:uppercase}
.cert-hero__facts dd{margin:0;color:rgba(255,255,255,.9)}
@media(max-width:900px){.cert-hero__facts{grid-template-columns:1fr}.cert-hero__facts div{grid-template-columns:1fr}}
.clearn__list{list-style:none;margin:14px auto 0;padding:0;display:grid;gap:8px;max-width:760px;font-size:15px;color:#475569}
.clearn__list li::before{content:"";display:inline-block;width:7px;height:7px;border-radius:50%;background:#b8892b;margin-right:10px;vertical-align:middle}

/* ---- Credential pages: the sub-heading sits under its title, centred ---- */
.v2-head .v2-lede, .v2-head > p { text-align: center; margin-inline: auto; max-width: 760px; }
.v2-head--left .v2-lede, .v2-head--left > p { text-align: left; margin-inline: 0; }
.v2-sec .v2-head + p, .v2-sec .v2-head ~ .v2-lede { text-align: center; margin-inline: auto; }

/* ---- Arranged sections (CoursePresenter) ---- */
.ca-tablewrap{overflow-x:auto;border:1px solid #e4e9f2;border-radius:14px;background:#fff;box-shadow:0 1px 2px rgba(11,31,63,.04)}
.ca-table{width:100%;border-collapse:collapse;font-size:15px;min-width:560px}
.ca-table thead th{background:#0b1f3f;color:#fff;text-align:left;padding:15px 18px;font-weight:700;font-size:14px;letter-spacing:.02em}
.ca-table thead th:first-child{border-top-left-radius:13px}.ca-table thead th:last-child{border-top-right-radius:13px}
.ca-table tbody th{text-align:left;padding:13px 18px;font-weight:700;color:#0b1f3f;background:#f6f8fb;width:26%;vertical-align:top}
.ca-table td{padding:13px 18px;color:#475569;vertical-align:top;line-height:1.55}
.ca-table tbody tr+tr th,.ca-table tbody tr+tr td{border-top:1px solid #e4e9f2}
.ca-table tbody tr:hover td{background:#fbfcfe}
.ca-facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:18px}
.ca-fact{background:#fff;border:1px solid #e4e9f2;border-radius:14px;padding:22px;text-align:left}
.ca-fact__icon{display:inline-grid;place-items:center;width:42px;height:42px;border-radius:11px;background:#f6efdf;color:#b8892b;margin-bottom:12px}
.ca-fact__icon svg{width:20px;height:20px}
.ca-fact__t{margin:0 0 6px;font-size:17px;font-weight:800;color:#0b1f3f;line-height:1.3}
.ca-fact__p{margin:0;font-size:14.5px;line-height:1.6;color:#475569}
.ca-pairs{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.ca-pair{display:flex;gap:16px;background:#fff;border:1px solid #e4e9f2;border-radius:14px;padding:20px 22px}
.ca-pair__n{flex:0 0 auto;font-weight:800;font-size:15px;color:#b8892b;letter-spacing:.04em;padding-top:2px}
.ca-pair__t{margin:0 0 6px;font-size:16.5px;font-weight:800;color:#0b1f3f;line-height:1.35}
.ca-pair__p{margin:0;font-size:14.5px;line-height:1.65;color:#475569}
.ca-flow{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 34px;counter-reset:f}
.ca-flow__step{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;min-width:118px;text-align:center}
.ca-flow__step+.ca-flow__step::before{content:"→";position:absolute;left:-25px;top:14px;color:#b8892b;font-weight:800;font-size:18px}
.ca-flow__icon{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:#0b1f3f;color:#d8a846}
.ca-flow__icon svg{width:22px;height:22px}
.ca-flow__t{font-size:13.5px;font-weight:800;letter-spacing:.05em;color:#0b1f3f;text-transform:uppercase;max-width:150px;line-height:1.35}
.ca-actions{display:flex;flex-wrap:wrap;justify-content:center;gap:12px}
.cbtn--navy{background:#0b1f3f;color:#fff;border-color:#0b1f3f}
.ca-chips{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:10px 16px}
.ca-chips li{display:flex;align-items:flex-start;gap:10px;background:#fff;border:1px solid #e4e9f2;border-radius:10px;padding:11px 14px;font-size:14.5px;line-height:1.45;color:#0b1f3f;font-weight:600}
.ca-chips svg{width:17px;height:17px;flex:0 0 auto;color:#b8892b;margin-top:2px}
.ca-chips__label{margin:26px 0 12px;font-size:17px;font-weight:800;color:#0b1f3f;text-align:center}
.ca-slides{display:grid;grid-auto-flow:column;grid-auto-columns:minmax(300px,min(86%,520px));gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:4px 2px 16px;scrollbar-width:thin}
.ca-slide{scroll-snap-align:start;background:#fff;border:1px solid #e4e9f2;border-radius:16px;padding:26px}
.ca-slide__n{font-size:12.5px;font-weight:800;letter-spacing:.1em;color:#b8892b}
.ca-slide__t{margin:8px 0 12px;font-size:19px;font-weight:800;color:#0b1f3f;line-height:1.3}
.ca-slide__p{margin:0 0 12px;font-size:14.5px;line-height:1.65;color:#475569}
.ca-slides__hint{margin:4px 0 0;text-align:center;font-size:13px;color:#64748b}
@media(max-width:820px){.ca-pairs{grid-template-columns:1fr}.ca-flow__step+.ca-flow__step::before{display:none}}

/* course pages: credential ladder and standards cards */
.ca-ladder{display:grid;grid-template-columns:1fr auto 1fr;gap:20px;align-items:stretch;margin-top:28px}
.ca-ladder__arrow{align-self:center;width:44px;height:44px;border-radius:50%;background:#b8892b;color:#fff;display:grid;place-items:center}
.ca-ladder__arrow svg{width:20px;height:20px}
.ca-rung{background:#fff;border:1px solid #e3e8f0;border-radius:14px;padding:28px;box-shadow:0 6px 22px rgba(11,31,63,.06)}
.ca-rung--top{background:#0b1f3f;border-color:#0b1f3f;color:#fff}
.ca-rung__code{display:inline-block;font-weight:700;font-size:1.5rem;color:#b8892b;letter-spacing:.02em}
.ca-rung__name{font-weight:600;font-size:1.05rem;margin:4px 0 14px}
.ca-rung__lead{font-size:.92rem;opacity:.8;margin:0 0 10px;text-transform:uppercase;letter-spacing:.06em}
.ca-rung__list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:9px 16px}
.ca-rung__list li{display:flex;gap:8px;align-items:flex-start;font-size:.95rem;line-height:1.4}
.ca-rung__list svg{width:17px;height:17px;flex:none;margin-top:2px;color:#b8892b}
.ca-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:20px;margin-top:28px}
.ca-card{background:#fff;border:1px solid #e3e8f0;border-radius:14px;padding:24px}
.ca-card__t{font-size:1.05rem;line-height:1.35;color:#0b1f3f;margin:14px 0 8px}
.ca-card__p{font-size:.95rem;color:#44546b;margin:0 0 8px}
.ca-card__list{margin:8px 0 0;padding-left:18px;font-size:.93rem;color:#44546b;display:grid;gap:5px}
@media (max-width:820px){.ca-ladder{grid-template-columns:1fr}.ca-ladder__arrow{justify-self:center;transform:rotate(90deg)}.ca-rung__list{grid-template-columns:1fr}}

.ts-ctas{display:flex;flex-wrap:wrap;gap:12px;margin:18px 0 6px}

/* Mega menus: on a short screen the panel was taller than the window and its
   lower rows could not be reached; after a sub-menu was clicked the panel
   stayed open (focus stays on the link) and covered the page it had opened. */
@media (min-width: 1081px) {
  .nav__panel--mega, .nav__item .nav__panel { max-height: calc(100vh - 150px); overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; }
  .nav--dismissed .nav__item .nav__panel { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
}

/* course page: four enrol options */
.v2-options--4{grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.v2-options--4 .v2-option{display:flex;flex-direction:column;padding:26px 22px}
.v2-options--4 .v2-option__title{font-size:1.08rem;line-height:1.3;min-height:2.6em}
.v2-options--4 .v2-option__price{font-size:2rem}
.v2-option__price--text{font-size:1.35rem!important;line-height:1.5}
.v2-options--4 .v2-checks{margin-bottom:22px}
.v2-option__go{margin-top:auto!important}
.v2-tints--4{grid-template-columns:repeat(4,minmax(0,1fr))}
a.v2-tint--link{display:block;text-decoration:none;color:inherit;transition:transform .15s,box-shadow .15s}
a.v2-tint--link:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(11,31,63,.12)}
@media (max-width:1100px){.v2-options--4,.v2-tints--4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.v2-options--4,.v2-tints--4{grid-template-columns:1fr}}

/* ===== Hub pages built to the client's mockups (chx-) ===== */
.chx{--navy:#0b1f3f;--blue:#1257d6;--gold:#b8892b;--ink:#0b1f3f;--mute:#4a5b75;--line:#e1e7f0}
.chx-eyebrow{display:block;font-size:.78rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--blue);margin-bottom:10px}
.chx-eyebrow--light{color:#7fb2ff}
.chx-hero{background:linear-gradient(115deg,#071630 0%,#0b1f3f 55%,#123a7a 100%);color:#fff;padding:56px 0 48px}
.chx-hero__grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:40px;align-items:center}
.chx-hero__h1{font-size:clamp(2.1rem,4.2vw,3.3rem);line-height:1.08;margin:0 0 16px;color:#fff;font-weight:800}
.chx-hero__h1 em{font-style:normal;color:#8fc0ff}
.chx-hero__lede{font-size:1.06rem;line-height:1.65;color:#d5e1f5;max-width:56ch;margin:0 0 24px}
.chx-hero__cta{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.chx-ghost{display:inline-flex;align-items:center;gap:8px;min-height:46px;padding:0 22px;border:1.5px solid rgba(255,255,255,.55);border-radius:8px;color:#fff;font-weight:700;font-size:.9rem;letter-spacing:.04em;text-transform:uppercase;text-decoration:none}
.chx-ghost:hover{background:rgba(255,255,255,.12);color:#fff}
.chx-hero__strip{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:22px}
.chx-hero__strip li{display:flex;align-items:center;gap:10px;font-size:.86rem;line-height:1.3;color:#e6eefc}
.chx-hero__strip svg{width:26px;height:26px;color:#8fc0ff;flex:none}
.chx-hero__media{position:relative;display:grid;grid-template-columns:minmax(0,1fr) 190px;gap:18px;align-items:center}
.chx-hero__media img{width:100%;height:340px;object-fit:cover;border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.35)}
.chx-hero__side{list-style:none;margin:0;padding:0;display:grid;gap:14px;font-size:.92rem;color:#e6eefc}
.chx-hero__side li{display:flex;align-items:center;gap:10px}
.chx-hero__side svg{width:20px;height:20px;color:#8fc0ff;flex:none}
.chx-hero__side-t{font-weight:700;letter-spacing:.08em;text-transform:uppercase;font-size:.8rem;line-height:1.5;color:#fff;border-bottom:2px solid var(--gold);padding-bottom:10px}
.chx-tabs{background:#fff;border-bottom:1px solid var(--line);position:sticky;top:var(--header-h,84px);z-index:20;box-shadow:0 6px 18px rgba(11,31,63,.06)}
.chx-tabs__row{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:10px;padding-block:12px}
.chx-tab{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);border-radius:10px;text-decoration:none;color:var(--ink);background:#f7f9fd;transition:.15s}
.chx-tab__n{font-size:1.35rem;font-weight:800;color:var(--blue);line-height:1}
.chx-tab b{display:block;font-size:.88rem;line-height:1.25}
.chx-tab small{display:block;font-size:.76rem;color:var(--mute);line-height:1.3;margin-top:2px}
.chx-tab:hover,.chx-tab.is-on{background:var(--blue);border-color:var(--blue);color:#fff}
.chx-tab:hover .chx-tab__n,.chx-tab.is-on .chx-tab__n,.chx-tab:hover small,.chx-tab.is-on small{color:#fff}
.chx-sec{padding:64px 0;scroll-margin-top:170px}
.chx-sec--tint{background:#f4f7fc}
.chx-card{scroll-margin-top:190px}
.chx-h2{font-size:clamp(1.6rem,2.8vw,2.2rem);line-height:1.15;color:var(--ink);margin:0 0 14px;font-weight:800}
.chx-p{font-size:1.02rem;line-height:1.7;color:var(--mute);margin:0 0 18px;max-width:68ch}
.chx-center{text-align:center;margin-bottom:30px}.chx-center .chx-p{margin-inline:auto}
.chx-welcome{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px;align-items:center}
.chx-checks{list-style:none;margin:0 0 26px;padding:0;display:grid;gap:10px}
.chx-checks li{display:flex;gap:10px;align-items:flex-start;font-size:1rem;color:var(--ink)}
.chx-checks svg{width:20px;height:20px;color:var(--blue);flex:none;margin-top:2px}
.chx-dash{border-radius:14px;overflow:hidden;background:#fff;border:1px solid var(--line);box-shadow:0 30px 70px rgba(11,31,63,.18)}
.chx-dash__bar{display:flex;align-items:center;gap:6px;background:#0b1f3f;color:#fff;padding:10px 14px;font-size:.8rem}
.chx-dash__bar span{width:9px;height:9px;border-radius:50%;background:#ffffff55}.chx-dash__bar b{margin-left:10px;font-weight:600}
.chx-dash__body{display:grid;grid-template-columns:150px 1fr}
.chx-dash__nav{list-style:none;margin:0;padding:12px 0;background:#0f2a55;color:#c9d7ef;font-size:.78rem}
.chx-dash__nav li{padding:8px 14px}.chx-dash__nav li.is-on{background:var(--blue);color:#fff;font-weight:600}
.chx-dash__main{padding:16px;display:grid;gap:12px}
.chx-dash__hello{display:flex;align-items:center;gap:10px;padding:12px;border:1px solid var(--line);border-radius:10px}
.chx-dash__hello b{display:block;font-size:.9rem;color:var(--ink)}.chx-dash__hello small{color:var(--mute);font-size:.76rem}
.chx-dash__hello em{margin-left:auto;font-style:normal;font-size:.72rem;font-weight:700;color:#0f6b52;background:#dff5ec;border-radius:20px;padding:4px 10px}
.chx-dash__avatar{width:38px;height:38px;border-radius:50%;background:#e4ecfb;display:grid;place-items:center;color:var(--blue)}.chx-dash__avatar svg{width:20px;height:20px}
.chx-dash__stats{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.chx-dash__stats div{border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.chx-dash__stats small{display:block;font-size:.72rem;color:var(--mute);margin-bottom:8px}
.chx-dash__stats i{display:block;height:10px;width:60%;border-radius:6px;background:#dbe5f6}.chx-dash__stats i.is-bar{width:100%;background:linear-gradient(90deg,var(--blue) 65%,#dbe5f6 65%)}
.chx-dash__cert{display:flex;align-items:center;gap:12px;border:1px dashed #b9c8e4;border-radius:10px;padding:12px;background:#f7f9fd}
.chx-dash__cert svg{width:30px;height:30px;color:var(--gold)}.chx-dash__cert b{display:block;font-size:.88rem;color:var(--ink)}.chx-dash__cert small{font-size:.75rem;color:var(--mute)}
.chx-band{margin-bottom:30px}
.chx-band__h{font-size:clamp(1.7rem,3.2vw,2.5rem);line-height:1.12;font-weight:800;color:var(--ink);margin:0 0 12px}
.chx-band__h em{font-style:normal;color:var(--blue)}
.chx-cards{display:grid;gap:18px;grid-template-columns:repeat(5,minmax(0,1fr))}
.chx-cards--3{grid-template-columns:repeat(3,minmax(0,1fr))}.chx-cards--4{grid-template-columns:repeat(4,minmax(0,1fr))}
.chx-card{display:flex;flex-direction:column;background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 6px 20px rgba(11,31,63,.06);transition:transform .15s,box-shadow .15s}
.chx-card:hover,.chx-card:target{transform:translateY(-3px);box-shadow:0 16px 36px rgba(11,31,63,.14)}
.chx-card:target{outline:2px solid var(--tone)}
.chx-card__top{height:74px;background:linear-gradient(135deg,color-mix(in srgb,var(--tone) 16%,#fff),color-mix(in srgb,var(--tone) 34%,#fff));position:relative}
.chx-card__icon{position:absolute;left:18px;bottom:-24px;width:54px;height:54px;border-radius:50%;background:var(--tone);color:#fff;display:grid;place-items:center;border:4px solid #fff}
.chx-card__icon svg{width:24px;height:24px}
.chx-card__t{font-size:1.04rem;line-height:1.3;color:var(--ink);margin:36px 18px 6px;font-weight:800}
.chx-card__d{font-size:.92rem;line-height:1.55;color:var(--mute);margin:0 18px 12px}
.chx-card__list{list-style:none;margin:0 18px 16px;padding:0;display:grid;gap:8px}
.chx-card__list li{display:flex;gap:8px;align-items:flex-start;font-size:.88rem;line-height:1.4;color:var(--ink)}
.chx-card__list svg{width:17px;height:17px;color:var(--tone);flex:none;margin-top:1px}
.chx-card__btn{margin:auto 18px 18px;display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:8px;background:var(--tone);color:#fff;font-weight:700;font-size:.92rem;text-decoration:none}
.chx-card__btn:hover{filter:brightness(1.12);color:#fff}.chx-card__btn svg{width:16px;height:16px}
.chx-guide{margin-top:26px;display:flex;align-items:center;gap:18px;flex-wrap:wrap;background:linear-gradient(100deg,#0b1f3f,#123a7a);color:#fff;border-radius:14px;padding:22px 26px}
.chx-guide svg{width:38px;height:38px;flex:none}.chx-guide b{display:block;font-size:1.25rem}.chx-guide span{color:#d5e1f5}.chx-guide .chx-ghost{margin-left:auto}
.chx-benefits{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.chx-benefit{display:flex;gap:14px;border:1px solid var(--line);border-radius:12px;padding:20px;background:#fff}
.chx-benefit svg{width:34px;height:34px;color:var(--blue);flex:none}.chx-benefit h3{font-size:1rem;margin:0 0 6px;color:var(--ink)}.chx-benefit p{font-size:.9rem;line-height:1.55;color:var(--mute);margin:0}
.chx-final{background:linear-gradient(100deg,#071630,#123a7a);color:#fff;padding:40px 0}
.chx-final__row{display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.chx-final h2{color:#fff;font-size:1.6rem;margin:0 0 6px}.chx-final p{margin:0;color:#d5e1f5}.chx-final__cta{display:flex;gap:12px;flex-wrap:wrap}
@media (max-width:1180px){.chx-cards,.chx-cards--4{grid-template-columns:repeat(3,minmax(0,1fr))}.chx-tabs__row{grid-template-columns:repeat(5,minmax(200px,1fr));overflow-x:auto}.chx-benefits{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:860px){.chx-hero__grid,.chx-welcome{grid-template-columns:1fr}.chx-hero__media{grid-template-columns:1fr}.chx-hero__side{display:none}.chx-cards,.chx-cards--3,.chx-cards--4{grid-template-columns:repeat(2,minmax(0,1fr))}.chx-tabs{position:static}}
@media (max-width:560px){.chx-cards,.chx-cards--3,.chx-cards--4,.chx-benefits{grid-template-columns:1fr}.chx-dash__body{grid-template-columns:1fr}.chx-dash__nav{display:none}.chx-sec{padding:44px 0}}

/* ===== Tabbed exam hubs (hubx-) ===== */
.chx-hero__motto{margin:0;font-size:.82rem;letter-spacing:.14em;text-transform:uppercase;color:#8fc0ff;font-weight:600}
.hubx .chx-tabs__row{grid-template-columns:repeat(var(--n,5),minmax(0,1fr))}
.hubx .chx-tab b{font-size:.9rem}
.hubx-stats{background:#f4f7fc;padding:22px 0;border-bottom:1px solid #e1e7f0}
.hubx-stats__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.hubx-stat{display:flex;gap:14px;align-items:center;background:#fff;border:1px solid #e1e7f0;border-radius:12px;padding:16px 18px}
.hubx-stat svg{width:34px;height:34px;color:#0b1f3f;flex:none}
.hubx-stat b{display:block;font-size:1.5rem;line-height:1;color:#0b1f3f;font-weight:800}.hubx-stat strong{display:block;font-size:.95rem;color:#0b1f3f}.hubx-stat small{display:block;font-size:.78rem;color:#4a5b75;margin-top:2px}
.hubx-intro{padding-bottom:28px}
.hubx-intro .chx-p{max-width:80ch}
.hubx-steps{list-style:none;margin:26px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;gap:10px 34px}
.hubx-steps li{position:relative;display:flex;flex-direction:column;align-items:center;gap:8px;font-size:.82rem;letter-spacing:.06em;color:#0b1f3f;min-width:96px;text-align:center}
.hubx-steps li+li::before{content:"→";position:absolute;left:-24px;top:14px;color:#1257d6;font-size:1.1rem}
.hubx-steps__n{width:48px;height:48px;border-radius:50%;background:#0b3d91;color:#fff;display:grid;place-items:center;font-weight:800;font-size:1.05rem}
.hubx-panel__head{display:flex;gap:20px;align-items:flex-start;margin-bottom:28px;padding-bottom:22px;border-bottom:2px solid #e1e7f0}
.hubx-panel__n{flex:none;width:72px;height:72px;border-radius:16px;background:#1257d6;color:#fff;display:grid;place-items:center;font-size:1.8rem;font-weight:800}
.hubx-panel__strap{font-size:1.12rem;line-height:1.55;color:#1257d6;font-weight:600;margin:0;max-width:70ch}
.hubx-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px;align-items:start}
.hubx-card{background:#fff;border:1px solid #e1e7f0;border-radius:14px;padding:24px;box-shadow:0 6px 20px rgba(11,31,63,.05)}
.hubx-card--wide{grid-column:1/-1}
.hubx-card--lead{background:linear-gradient(135deg,#eef4ff,#f7f9fd);border-color:#cfdcf5}
.hubx-card__head{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.hubx-card__icon{flex:none;width:44px;height:44px;border-radius:12px;background:#e4ecfb;color:#0b3d91;display:grid;place-items:center}.hubx-card__icon svg{width:22px;height:22px}
.hubx-card__t{font-size:1.12rem;line-height:1.3;color:#0b1f3f;margin:0;font-weight:800}
.hubx-p{font-size:1rem;line-height:1.7;color:#3d4d66;margin:0 0 12px}.hubx-p:last-child{margin-bottom:0}
.hubx-list{list-style:none;margin:4px 0 14px;padding:0;display:grid;gap:9px}
.hubx-list--cols{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 22px}
.hubx-list li{display:flex;gap:9px;align-items:flex-start;font-size:.97rem;line-height:1.5;color:#0b1f3f}
.hubx-list svg{width:18px;height:18px;color:#1257d6;flex:none;margin-top:3px}
.hubx-flow{list-style:none;margin:8px 0 16px;padding:0;display:flex;flex-wrap:wrap;gap:10px}
.hubx-flow li{display:flex;align-items:center;gap:8px;background:#0b1f3f;color:#fff;border-radius:30px;padding:8px 16px 8px 8px;font-size:.84rem;font-weight:600;letter-spacing:.03em}
.hubx-flow li span{width:24px;height:24px;border-radius:50%;background:#b8892b;display:grid;place-items:center;font-size:.76rem}
.hubx-ctas{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.hubx-panel__foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:32px;padding-top:22px;border-top:1px solid #e1e7f0}
.hubx--tabbed .hubx-panel{background:#f4f7fc}
@media (max-width:1180px){.hubx .chx-tabs__row{grid-template-columns:repeat(var(--n,5),minmax(190px,1fr));overflow-x:auto}}
@media (max-width:860px){.hubx-grid,.hubx-list--cols{grid-template-columns:1fr}.hubx-stats__row{grid-template-columns:repeat(2,minmax(0,1fr))}.hubx-panel__n{width:54px;height:54px;font-size:1.3rem}.hubx-steps li+li::before{display:none}}

/* hub cards flow in two columns so uneven heights leave no holes */
.hubx-grid{display:block;columns:2;column-gap:20px}
.hubx-grid>.hubx-card{break-inside:avoid;margin:0 0 20px;display:inline-block;width:100%}
.hubx-grid>.hubx-card--wide,.hubx-divider{column-span:all}
.hubx-divider{font-size:1.35rem;font-weight:800;color:#0b1f3f;margin:14px 0 18px;padding-left:14px;border-left:4px solid #b8892b;line-height:1.3}
@media (max-width:860px){.hubx-grid{columns:1}}
.hubx-grid>.hubx-card--wide{display:block}
.hubx .chx-tab{padding:10px 12px}.hubx .chx-tab b{font-size:.84rem;line-height:1.2}

/* course page: one closing section in place of repeated call-to-action bands */
.ca-closing__box{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,.8fr);gap:40px;align-items:center;background:linear-gradient(120deg,#0b1f3f 0%,#12305f 60%,#1a4a8f 100%);color:#fff;border-radius:22px;padding:48px}
.ca-closing__code{display:inline-block;font-weight:800;letter-spacing:.08em;color:#d9b45a;margin-bottom:8px}
.ca-closing__h{color:#fff;font-size:clamp(1.7rem,3vw,2.4rem);line-height:1.15;margin:0 0 14px;font-weight:800}
.ca-closing__lead{font-size:1.15rem;line-height:1.5;color:#fff;font-weight:600;margin:0 0 10px}
.ca-closing__line{font-size:1rem;line-height:1.55;color:#cfe0fb;margin:0 0 8px}
.ca-closing__p{font-size:.98rem;line-height:1.7;color:#d5e1f5;margin:10px 0 0}
.ca-closing__chips{list-style:none;margin:18px 0 0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px 18px}
.ca-closing__chips li{display:flex;gap:8px;align-items:center;font-size:.93rem;color:#fff}
.ca-closing__chips svg{width:17px;height:17px;color:#d9b45a;flex:none}
.ca-closing__actions{display:grid;gap:10px}
.ca-closing__btn{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:50px;padding:0 20px;border-radius:10px;background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.28);color:#fff;font-weight:700;font-size:.95rem;text-decoration:none;transition:.15s}
.ca-closing__btn:hover{background:rgba(255,255,255,.2);color:#fff;transform:translateX(3px)}
.ca-closing__btn svg{width:17px;height:17px;flex:none}
.ca-closing__btn--gold{background:#d4a73a;border-color:#d4a73a;color:#0b1f3f}.ca-closing__btn--gold:hover{background:#e2b94f;color:#0b1f3f}
.ca-closing__btn--ghost{background:transparent;justify-content:center}
.ca-closing__sig{text-align:center;margin:18px 0 0;font-size:.85rem;color:#5a6b82}
@media (max-width:900px){.ca-closing__box{grid-template-columns:1fr;padding:30px 22px}.ca-closing__chips{grid-template-columns:1fr}}

/* ===== hub: stacked mode, chip nav, FAQ, office, eligibility form ===== */
.hubx--stack .hubx-panel__foot{display:none}
.chx-tabs--chips .chx-tabs__row{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:8px;scrollbar-width:thin;padding-block:10px}
.chx-tabs--chips .chx-tab{flex:none;padding:8px 14px;border-radius:30px;gap:8px}
.chx-tabs--chips .chx-tab__n{font-size:.85rem}.chx-tabs--chips .chx-tab b{font-size:.82rem;white-space:nowrap}
.hubx-faq{display:grid;gap:10px;max-width:980px}
.hubx-faq__item{background:#fff;border:1px solid #e1e7f0;border-radius:12px;overflow:hidden}
.hubx-faq__item summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-weight:700;font-size:1.04rem;color:#0b1f3f;line-height:1.4}
.hubx-faq__item summary::-webkit-details-marker{display:none}
.hubx-faq__item summary svg{width:18px;height:18px;flex:none;color:#1257d6;transition:transform .2s}
.hubx-faq__item[open] summary{background:#eef4ff}.hubx-faq__item[open] summary svg{transform:rotate(180deg)}
.hubx-faq__a{padding:6px 22px 20px}
.hubx-office{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:26px}
.hubx-office figure{margin:0;border-radius:14px;overflow:hidden;border:1px solid #e1e7f0;background:#fff}
.hubx-office img{display:block;width:100%;height:340px;object-fit:cover}
.hubx-office figcaption{padding:12px 16px;font-size:.9rem;font-weight:600;color:#0b1f3f}
.hubx-office iframe{width:100%;height:100%;min-height:340px;border:0;border-radius:14px}
.hubx-card__t a{color:#1257d6;text-decoration:none}.hubx-card__t a:hover{text-decoration:underline}
.elig__form{display:grid;gap:18px}
.elig__step{border:1px solid #e1e7f0;border-radius:14px;background:#fff;padding:24px;margin:0;min-width:0}
.elig__step legend{display:flex;align-items:center;gap:12px;font-weight:800;font-size:1.12rem;color:#0b1f3f;padding:0 8px}
.elig__step legend span{width:40px;height:40px;border-radius:10px;background:#1257d6;color:#fff;display:grid;place-items:center;font-size:.95rem}
.elig__q{margin:6px 0 14px;color:#3d4d66;font-size:1rem}
.elig__opts{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.elig__opts--inline{grid-template-columns:repeat(auto-fill,minmax(120px,160px))}
.elig__opt{display:flex;align-items:center;gap:10px;min-height:48px;padding:8px 14px;border:1.5px solid #d5deec;border-radius:10px;cursor:pointer;font-size:.97rem;color:#0b1f3f;background:#f9fbfe}
.elig__opt:hover{border-color:#1257d6}.elig__opt:has(input:checked){border-color:#1257d6;background:#eaf1ff;font-weight:600}
.elig__opt input{width:18px;height:18px;accent-color:#1257d6;flex:none}
.elig__row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-top:16px}.elig__row--2{grid-template-columns:repeat(2,minmax(0,1fr))}
.elig__form label{font-size:.9rem;font-weight:600;color:#0b1f3f}
.elig__wide{display:block;margin-top:16px}
.elig__form input[type=text],.elig__form input[type=email],.elig__form textarea{display:block;width:100%;margin-top:6px;min-height:48px;padding:10px 14px;border:1.5px solid #d5deec;border-radius:10px;font:inherit;font-weight:400;background:#fff}
.elig__form input:focus,.elig__form textarea:focus{outline:2px solid #1257d6;outline-offset:1px;border-color:#1257d6}
.elig__levels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.elig__level{display:flex;flex-direction:column;gap:8px;padding:18px;border:1.5px solid #d5deec;border-radius:12px;cursor:pointer;background:#f9fbfe}
.elig__level:has(input:checked){border-color:#1257d6;background:#eaf1ff}
.elig__level input{width:18px;height:18px;accent-color:#1257d6}.elig__level b{font-size:1.05rem}.elig__level span{font-weight:400;color:#3d4d66;font-size:.93rem;line-height:1.5}.elig__level a{font-size:.88rem;color:#1257d6}
.elig__submit{margin-top:20px;border:0;cursor:pointer}
.elig__done{display:flex;gap:14px;align-items:flex-start;background:#e6f6ee;border:1px solid #9fd8bb;border-radius:12px;padding:18px 20px;margin-bottom:20px;color:#0b4a33}
.elig__done svg{width:28px;height:28px;flex:none}.elig__done b{display:block;margin-bottom:4px}
.elig__err{background:#fef2f2;border:1px solid #fecaca;color:#991b1b;border-radius:10px;padding:14px 16px;margin-bottom:18px}
@media (max-width:860px){.hubx-office,.elig__row,.elig__row--2,.elig__levels{grid-template-columns:1fr}}

.hubx-lines{font-style:normal;display:grid;gap:4px;margin:0 0 14px;font-size:1rem;line-height:1.55;color:#0b1f3f}.hubx-lines a{color:#1257d6}

.chx-soon{position:absolute;right:14px;top:14px;background:#fff;color:var(--tone);font-size:.72rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;border-radius:20px;padding:5px 12px}
.chx-card__btn--soon{background:#eef1f6!important;color:#5a6b82!important;cursor:default}

/* Accreditation: Trusted Worldwide numbered cards */
.tw-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.tw-card{position:relative;background:#fff;border:1px solid #e1e7f0;border-radius:14px;padding:26px 20px 20px;box-shadow:0 6px 20px rgba(11,31,63,.05)}
.tw-card__n{display:inline-grid;place-items:center;width:44px;height:44px;border-radius:10px;background:#0b1f3f;color:#fff;font-weight:800;margin-bottom:14px}
.tw-card__t{font-size:1.05rem;line-height:1.3;font-weight:800;color:#0b1f3f;margin:0 0 10px}
.tw-card__p{font-size:.93rem;line-height:1.6;color:#3d4d66;margin:0 0 10px}
.tw-card__label{font-size:.86rem;font-weight:700;color:#1257d6;margin:4px 0 8px}
.tw-card__list{list-style:none;margin:0;padding:0;display:grid;gap:7px}
.tw-card__list li{display:flex;gap:8px;font-size:.9rem;line-height:1.45;color:#0b1f3f}
.tw-card__list svg{width:16px;height:16px;color:#1257d6;flex:none;margin-top:2px}
@media (max-width:1100px){.tw-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:620px){.tw-grid{grid-template-columns:1fr}}

/* footer social icons: large enough to be seen */
.footer__follow{margin-top:20px;font-size:11.5px;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:#fff}
.footer__socials{margin-top:10px;gap:10px;flex-wrap:wrap}
.footer__socials a.footer__social{width:42px;height:42px;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22)}
.footer__socials a.footer__social svg{width:19px;height:19px}
.footer__social--linkedin:hover{background:#0a66c2!important}.footer__social--x:hover{background:#000!important}.footer__social--youtube:hover{background:#ff0000!important}.footer__social--facebook:hover{background:#1877f2!important}.footer__social--instagram:hover{background:#c13584!important}

/* sticky bar on course pages: the four payment options */
.v2-buybar__actions--4{display:flex;align-items:stretch;gap:8px}
.v2-buybar__actions--4 form{display:flex;margin:0}
.v2-pay{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:1px;min-height:46px;padding:5px 14px;border:1.5px solid #cfd8e6;border-radius:8px;background:#fff;color:#0b1f3f;cursor:pointer;text-decoration:none;font:inherit;line-height:1.15;transition:.15s;white-space:nowrap}
.v2-pay span{font-size:.68rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;color:#4a5b75}
.v2-pay b{font-size:.98rem;font-weight:800}
.v2-pay:hover{border-color:#0b1f3f;background:#0b1f3f;color:#fff}.v2-pay:hover span{color:#d5e1f5}
.v2-pay--gold{background:#d4a73a;border-color:#d4a73a}.v2-pay--gold span{color:#3b2c06}
.v2-pay__mobile{display:none}
@media (max-width:1100px){.v2-buybar__name{display:none}}
@media (max-width:860px){.v2-buybar__actions--4 .v2-pay,.v2-buybar__actions--4 form{display:none}.v2-pay__mobile{display:inline-flex}}

/* credential codes keep their own capitals: CDevSOP®, CISyM® */
.v2-eyebrow--code,.ca-closing__code{text-transform:none!important}

/* Course hero: the photograph should read as a photograph (client mockups, Errors part 2).
   Text stays on a dark left band; the right half lets the image through. */
.cert-hero__bg img{filter:saturate(1) brightness(.9) contrast(1.02)}
.cert-hero__bg::after{background:
  linear-gradient(180deg, rgba(5,18,44,0) 55%, rgba(5,18,44,.72) 100%),
  linear-gradient(98deg, rgba(6,21,50,.97) 0%, rgba(6,21,50,.9) 38%, rgba(6,21,50,.45) 66%, rgba(6,21,50,.18) 100%)}

/* ===== Course showcase: DevSecOps / Digital Forensics page design (csx-) ===== */
.csx{--ink:#0b1f3f;--mute:#4a5b75;--line:#dfe6f1;--accent:#1257d6;--accent-2:#0b3d91;--soft:#f3f7fd}
.csx--forensics{--accent:#d9730d;--accent-2:#0b1f3f;--soft:#f7f8fb}
.csx-sec{padding:64px 0}
.csx-sec--soft{background:var(--soft)}
.csx-dark{background:linear-gradient(120deg,#06132c 0%,#0b1f3f 55%,#123a7a 100%);color:#fff}
.csx--forensics .csx-dark{background:linear-gradient(120deg,#050d1f 0%,#0b1f3f 60%,#1b2f55 100%)}
.csx-head{margin-bottom:30px;max-width:860px}
.csx-head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;max-width:none}
.csx-eyebrow{display:block;font-size:.76rem;font-weight:800;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:8px}
.csx-eyebrow--light{color:#8fc0ff}.csx--forensics .csx-eyebrow--light{color:#ffb86b}
.csx-h2{font-size:clamp(1.7rem,3vw,2.35rem);line-height:1.14;font-weight:800;color:var(--ink);margin:0 0 10px}
.csx-h2--light{color:#fff}
.csx-lede{font-size:1.04rem;line-height:1.65;color:var(--mute);margin:0}.csx-lede--light{color:#d5e1f5}
.csx-link{flex:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:1.5px solid var(--accent-2);border-radius:8px;color:var(--accent-2);font-weight:700;font-size:.9rem;text-decoration:none;white-space:nowrap}
.csx-link svg{width:15px;height:15px}.csx-link:hover{background:var(--accent-2);color:#fff}
.csx-link--light{border-color:rgba(255,255,255,.6);color:#fff}.csx-link--light:hover{background:#fff;color:#0b1f3f}
.csx-tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.csx-tile{position:relative;background:#fff;border:1px solid var(--line);border-radius:14px;padding:26px 18px 20px;text-align:center;box-shadow:0 6px 18px rgba(11,31,63,.05);transition:transform .15s,box-shadow .15s}
.csx-tile:hover{transform:translateY(-3px);box-shadow:0 14px 30px rgba(11,31,63,.12)}
.csx-tile__n{position:absolute;left:12px;top:12px;width:28px;height:28px;border-radius:7px;background:var(--accent-2);color:#fff;font-size:.82rem;font-weight:800;display:grid;place-items:center}
.csx-tile__icon{display:inline-grid;place-items:center;width:54px;height:54px;color:var(--accent);margin-bottom:8px}.csx-tile__icon svg{width:38px;height:38px}
.csx-tile__t{font-size:1rem;line-height:1.3;font-weight:800;color:var(--ink);margin:0 0 8px}
.csx-tile__p{font-size:.88rem;line-height:1.5;color:var(--mute);margin:0}
.csx-built{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:44px;align-items:center}
.csx-built__media{position:relative;margin:0;border-radius:16px;overflow:hidden;box-shadow:0 20px 50px rgba(11,31,63,.2)}
.csx-built__media img{display:block;width:100%;height:340px;object-fit:cover}
.csx-built__media figcaption{position:absolute;right:0;top:0;bottom:0;display:flex;flex-direction:column;justify-content:center;gap:10px;padding:0 22px;background:linear-gradient(90deg,transparent,rgba(6,19,44,.88));color:#fff;font-weight:800;letter-spacing:.14em;text-transform:uppercase;font-size:.85rem;text-align:right}
.csx-roles{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(190px,1fr));gap:10px}
.csx-roles li{display:flex;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:11px 12px;font-size:.9rem;font-weight:600;color:var(--ink);line-height:1.3}
.csx-roles svg{width:22px;height:22px;color:var(--accent);flex:none}
.csx-mods{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.csx-mod{position:relative;background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);border-radius:12px;padding:20px 16px;transition:.15s}
.csx-mod:hover{background:rgba(255,255,255,.13);transform:translateY(-2px)}
.csx-mod__n{display:inline-grid;place-items:center;width:32px;height:26px;border-radius:6px;background:var(--accent);color:#fff;font-size:.78rem;font-weight:800;margin-bottom:12px}
.csx-mod__icon{float:right;color:#8fc0ff}.csx--forensics .csx-mod__icon{color:#ffb86b}.csx-mod__icon svg{width:26px;height:26px}
.csx-mod__t{clear:both;font-size:.98rem;line-height:1.3;font-weight:800;color:#fff;margin:0 0 8px}
.csx-mod__p{font-size:.82rem;line-height:1.5;color:#c9d7ef;margin:0}
.csx-flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:8px;position:relative}
.csx-flow::before{content:"";position:absolute;left:6%;right:6%;top:36px;height:3px;background:linear-gradient(90deg,#bcd3f7,var(--accent),#bcd3f7);border-radius:3px}
.csx-flow li{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:6px}
.csx-flow__dot{width:72px;height:72px;border-radius:50%;background:#fff;border:3px solid var(--accent);color:var(--accent);display:grid;place-items:center;box-shadow:0 0 0 8px color-mix(in srgb,var(--accent) 12%,#fff)}
.csx-flow__dot svg{width:30px;height:30px}
.csx-flow b{font-size:1rem;color:var(--ink);margin-top:6px}.csx-flow small{font-size:.82rem;line-height:1.4;color:var(--mute);max-width:16ch}
.csx-paths{display:grid;grid-template-columns:1fr 1fr;gap:20px}
.csx-path{background:#fff;border:1px solid var(--line);border-radius:14px;overflow:hidden;box-shadow:0 6px 18px rgba(11,31,63,.05)}
.csx-path header{display:flex;gap:14px;align-items:center;padding:18px 22px;background:var(--accent-2);color:#fff}
.csx-path--1 header{background:#0f6b52}
.csx-path__icon{width:44px;height:44px;border-radius:10px;background:rgba(255,255,255,.16);display:grid;place-items:center;flex:none}.csx-path__icon svg{width:22px;height:22px}
.csx-path h3{margin:0;font-size:1.1rem;color:#fff;line-height:1.3}.csx-path small{display:block;font-size:.82rem;color:#dbe7fb;margin-top:2px}
.csx-path ul{list-style:none;margin:0;padding:20px 22px;display:grid;gap:10px}
.csx-path li{display:flex;gap:10px;font-size:.96rem;line-height:1.5;color:var(--ink)}.csx-path li svg{width:18px;height:18px;color:var(--accent);flex:none;margin-top:3px}
.csx-center{text-align:center;margin:26px 0 0}
.csx-why{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:0;border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff}
.csx-why article{padding:24px 18px;border-right:1px solid var(--line);text-align:left}
.csx-why article:last-child{border-right:0}
.csx-why svg{width:36px;height:36px;color:var(--accent);margin-bottom:10px}
.csx-why h3{font-size:.98rem;line-height:1.3;font-weight:800;color:var(--ink);margin:0 0 6px}
.csx-why p{font-size:.85rem;line-height:1.5;color:var(--mute);margin:0}
.csx-careers{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-top:22px}
.csx-careers span{font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-right:6px}
.csx-careers b{font-size:.88rem;font-weight:600;color:var(--ink);background:var(--soft);border:1px solid var(--line);border-radius:30px;padding:7px 14px}
.csx-cred__grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr);gap:40px;align-items:center}
.csx-cred__list{list-style:none;margin:22px 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:14px 22px}
.csx-cred__list li{display:flex;align-items:center;gap:12px;font-size:1rem;color:#fff}
.csx-cred__list svg{width:26px;height:26px;color:#8fc0ff;flex:none}.csx--forensics .csx-cred__list svg{color:#ffb86b}
.csx-cred__badge{display:flex;align-items:center;gap:18px;justify-content:center;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.18);border-radius:16px;padding:24px}
.csx-cred__badge img{width:150px;height:150px;object-fit:cover;border-radius:14px;background:#fff}
.csx-cred__badge b{display:block;font-size:1.7rem;color:#fff}.csx-cred__badge span{font-size:.92rem;color:#d5e1f5}
/* full document, collapsed */
.csx-full{padding-bottom:10px}
.csx-acc{max-width:1180px;margin:0 auto 10px;padding:0;border:1px solid #dfe6f1;border-radius:12px;background:#fff;overflow:hidden;width:calc(100% - 32px)}
.csx-acc>summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:16px;padding:18px 22px;font-weight:800;font-size:1.05rem;color:#0b1f3f}
.csx-acc>summary::-webkit-details-marker{display:none}
.csx-acc>summary svg{width:18px;height:18px;color:#1257d6;flex:none;transition:transform .2s}
.csx-acc[open]>summary{background:#eef4ff;border-bottom:1px solid #dfe6f1}.csx-acc[open]>summary svg{transform:rotate(180deg)}
.csx-acc>section{padding-top:34px!important;padding-bottom:40px!important}
.csx-acc>section .v2-head .v2-h2,.csx-acc>section .v2-head .v2-eyebrow,.csx-acc>section .v2-kicker{display:none}
@media (max-width:1100px){.csx-tiles,.csx-mods{grid-template-columns:repeat(2,minmax(0,1fr))}.csx-flow{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:24px}.csx-flow::before{display:none}}
@media (max-width:860px){.csx-built,.csx-paths,.csx-cred__grid{grid-template-columns:1fr}.csx-head--row{flex-direction:column;align-items:flex-start}.csx-why article{border-right:0;border-bottom:1px solid var(--line)}}
@media (max-width:560px){.csx-tiles,.csx-mods,.csx-cred__list{grid-template-columns:1fr}.csx-flow{grid-template-columns:repeat(2,minmax(0,1fr))}.csx-sec{padding:44px 0}}

/* enrol options: how long each one runs, so two equal prices are not confused */
.v2-option__tag{display:inline-block;align-self:flex-start;margin:-4px 0 12px;padding:4px 12px;border-radius:20px;background:color-mix(in srgb,var(--c,#1257d6) 12%,#fff);color:var(--c,#1257d6);font-size:.78rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase}

/* Anchors land below the sticky header (and the hub tab bar); JS refines this. */
html{scroll-padding-top:150px}
.chx :target,.chx-card:target,.hubx-panel:target{scroll-margin-top:210px}
/* the card a menu link pointed at is picked out so it is obvious what was opened */
.chx-card:target{outline:3px solid var(--tone);outline-offset:3px;box-shadow:0 18px 40px rgba(11,31,63,.2)}

/* ===== hub overview blocks, to the client's mockups (hov-) ===== */
.hov-paths{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.hov-path{border-radius:16px;padding:26px;border:1px solid #d6e2f5;background:#eef4ff;display:flex;flex-direction:column}
.hov-path--green{background:#ecf8f2;border-color:#cfe9dc}
.hov-path header{display:flex;gap:14px;align-items:center;margin-bottom:16px}
.hov-path__icon{width:52px;height:52px;border-radius:12px;background:#0b3d91;color:#fff;display:grid;place-items:center;flex:none}.hov-path--green .hov-path__icon{background:#0f6b52}
.hov-path__icon svg{width:26px;height:26px}
.hov-path h3{margin:0;font-size:1.25rem;font-weight:800;color:#0b1f3f}.hov-path header p{margin:2px 0 0;color:#4a5b75;font-size:.95rem}
.hov-path ul,.hov-outcome ul,.hov-covers ul{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:10px}
.hov-path li,.hov-outcome li,.hov-covers li{display:flex;gap:10px;align-items:flex-start;font-size:.97rem;line-height:1.5;color:#0b1f3f}
.hov-path li svg,.hov-covers li svg{width:19px;height:19px;color:#0b3d91;flex:none;margin-top:2px}.hov-path--green li svg{color:#0f6b52}
.hov-path .cbtn{margin-top:auto;align-self:center}
.hov-process{list-style:none;margin:0 0 34px;padding:0;display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:10px;position:relative}
.hov-process::before{content:"";position:absolute;left:7%;right:7%;top:32px;height:2px;background:#b9c9e6}
.hov-process li{position:relative;text-align:center}
.hov-process a{display:flex;flex-direction:column;align-items:center;gap:6px;text-decoration:none;color:inherit}
.hov-process__dot{width:64px;height:64px;border-radius:50%;background:#0b3d91;color:#fff;display:grid;place-items:center;box-shadow:0 0 0 6px #f4f7fc;transition:transform .15s}
.hov-process a:hover .hov-process__dot{transform:scale(1.08)}
.hov-process__dot svg{width:28px;height:28px}
.hov-process b{font-size:.92rem;letter-spacing:.04em;text-transform:uppercase;color:#0b1f3f;margin-top:6px}
.hov-process small{font-size:.82rem;line-height:1.45;color:#4a5b75;max-width:17ch}
.hov-outcomes{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.hov-outcome{border-radius:16px;padding:24px;border:1px solid #cfe9dc;background:#ecf8f2}
.hov-outcome--retry{background:#fff7e3;border-color:#f1dfa8}
.hov-outcome header{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.hov-outcome header span{width:48px;height:48px;border-radius:50%;background:#0f6b52;color:#fff;display:grid;place-items:center;flex:none}.hov-outcome--retry header span{background:#c58a10}
.hov-outcome header svg{width:24px;height:24px}
.hov-outcome h3{margin:0;font-size:1.18rem;font-weight:800;color:#0b1f3f}.hov-outcome header p{margin:2px 0 0;color:#4a5b75;font-size:.93rem}
.hov-outcome li svg{width:19px;height:19px;color:#0f6b52;flex:none;margin-top:2px}.hov-outcome--retry li svg{color:#c58a10}
.hov-more{font-weight:700;color:#0b3d91;text-decoration:none;font-size:.95rem}.hov-more:hover{text-decoration:underline}
.hov-handbook{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:22px;align-items:stretch}
.hov-covers{background:#f4f7fc;border:1px solid #dfe6f1;border-radius:16px;padding:26px}
.hov-covers h3{display:flex;align-items:center;gap:12px;margin:0 0 18px;font-size:1.2rem;font-weight:800;color:#0b1f3f}.hov-covers h3 svg{width:34px;height:34px;color:#0b3d91}
.hov-covers ul{grid-template-columns:1fr 1fr;gap:10px 24px;margin:0}
.hov-book{display:grid;grid-template-columns:180px 1fr;gap:20px;align-items:center;background:#fff;border:1px solid #dfe6f1;border-radius:16px;padding:22px;box-shadow:0 8px 24px rgba(11,31,63,.07)}
.hov-book__cover{aspect-ratio:3/4;border-radius:6px 12px 12px 6px;background:linear-gradient(150deg,#06132c,#123a7a);color:#fff;padding:18px 14px;display:flex;flex-direction:column;justify-content:center;gap:10px;box-shadow:8px 10px 24px rgba(11,31,63,.3);border-left:6px solid #b8892b}
.hov-book__cover span{font-size:.78rem;font-weight:800;letter-spacing:.1em}.hov-book__cover b{font-size:1.25rem;line-height:1.15}.hov-book__cover small{font-size:.72rem;line-height:1.4;color:#cfe0fb}
.hov-book__side h3{margin:0 0 8px;font-size:1.12rem;font-weight:800;color:#0b1f3f}.hov-book__side p{margin:0 0 16px;color:#4a5b75;font-size:.95rem;line-height:1.55}
.hov-tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hov-tiles--text{grid-template-columns:repeat(2,minmax(0,1fr))}
.hov-tiles div{display:flex;gap:10px;align-items:center;background:#fff;border:1px solid #d6e2f5;border-radius:10px;padding:12px}
.hov-path--green .hov-tiles div{border-color:#cfe9dc}
.hov-tiles svg{width:26px;height:26px;color:#0b3d91;flex:none}.hov-path--green .hov-tiles svg{color:#0f6b52}
.hov-tiles b{display:block;font-size:1.02rem;color:#0b1f3f;line-height:1.2}.hov-tiles small{display:block;font-size:.8rem;line-height:1.35;color:#4a5b75}
.hov-duties{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:14px}
.hov-duties article{background:#fff;border:1px solid #dfe6f1;border-radius:14px;padding:22px 16px;text-align:center}
.hov-duties svg{width:36px;height:36px;color:#0b3d91;margin-bottom:10px}.hov-duties p{margin:0;font-size:.92rem;line-height:1.45;color:#0b1f3f;font-weight:600}
@media (max-width:1100px){.hov-process{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:26px}.hov-process::before{display:none}}
@media (max-width:860px){.hov-paths,.hov-outcomes,.hov-handbook,.hov-covers ul{grid-template-columns:1fr}.hov-book{grid-template-columns:120px 1fr}.hov-tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.hov-process{grid-template-columns:repeat(2,minmax(0,1fr))}.hov-tiles,.hov-tiles--text{grid-template-columns:1fr}}

/* ===== numbered step cards: How Certification Works / Eligibility Requirements (hst-) ===== */
.hst-promises{background:#fff;border-bottom:1px solid #e1e7f0;padding:20px 0}
.hst-promises__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
.hst-promises__row div{display:flex;align-items:center;gap:14px;font-weight:700;color:#0b1f3f;font-size:.98rem;line-height:1.3}
.hst-promises svg{width:40px;height:40px;color:#1257d6;flex:none}
.hst-intro{padding:44px 0 8px}
.hst-journey{padding:40px 0 48px}
.hst-caps{text-transform:uppercase;letter-spacing:.04em;font-size:1.5rem}
.hst-note{color:#d9730d;font-weight:600;margin:-6px 0 22px}
.hst-strip{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:0;background:#fff;border:1px solid #e1e7f0;border-radius:14px;box-shadow:0 8px 24px rgba(11,31,63,.06);position:relative}
.hst-strip li{position:relative;display:flex;flex-direction:column;align-items:center;gap:10px;padding:34px 8px 20px;border-right:1px solid #eef2f8;text-align:center}
.hst-strip li:last-child{border-right:0}
.hst-strip__n{position:absolute;top:-15px;width:30px;height:30px;border-radius:50%;background:var(--tone);color:#fff;font-weight:800;font-size:.9rem;display:grid;place-items:center;box-shadow:0 0 0 4px #fff}
.hst-strip svg{width:40px;height:40px;color:#0b1f3f}
.hst-strip b{font-size:.86rem;letter-spacing:.05em;color:#0b1f3f;line-height:1.25}
.hst-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px;align-items:start}
.hst-card{background:#fff;border:1px solid #dfe6f1;border-radius:14px;overflow:hidden;box-shadow:0 8px 22px rgba(11,31,63,.06);display:flex;flex-direction:column;scroll-margin-top:150px}
.hst-card:target{outline:3px solid #1257d6;outline-offset:3px}
.hst-card header{display:flex;align-items:center;gap:12px;padding:16px 18px}
.hst-card__n{flex:none;width:38px;height:38px;border-radius:50%;background:#0b3d91;color:#fff;font-weight:800;display:grid;place-items:center;font-size:1.05rem}
.hst-card h3{margin:0;font-size:1.13rem;line-height:1.25;font-weight:800;color:#0b1f3f}
.hst-card__img{display:block;width:100%;height:170px;object-fit:cover}
.hst-card__body{padding:16px 18px 6px;font-size:.95rem;line-height:1.55;color:#22324d}
.hst-card__body p{margin:0 0 10px}
.hst-card__body h4{margin:14px 0 6px;font-size:.98rem;font-weight:800;color:#0b3d91}
.hst-card__body ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:7px}
.hst-card__body li{display:flex;gap:9px;align-items:flex-start}
.hst-card__body li svg{width:18px;height:18px;color:#0f6b52;flex:none;margin-top:2px}
.hst-chain{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:6px 0;font-size:.8rem;font-weight:700;letter-spacing:.03em;color:#0b1f3f}
.hst-chain li{display:inline-flex!important;align-items:center}
.hst-chain li+li::before{content:"→";margin:0 7px;color:#1257d6}
.hst-card__btn{margin:8px 18px 18px;display:flex;align-items:center;justify-content:center;gap:8px;min-height:46px;border-radius:8px;background:#1257d6;color:#fff;font-weight:700;font-size:.95rem;text-decoration:none}
.hst-card__btn+.hst-card__btn{margin-top:-8px}
.hst-card__btn:hover{background:#0b3d91;color:#fff}.hst-card__btn svg{width:16px;height:16px}
.hst-closing{background:linear-gradient(110deg,#06132c,#123a7a);color:#fff;padding:52px 0}
.hst-closing h2{color:#fff;font-size:clamp(1.5rem,2.6vw,2.1rem);line-height:1.25;margin:0 0 20px;max-width:30ch}
.hst-closing p{color:#d5e1f5;margin:0 0 14px}
.hst-closing__btns{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:1100px){.hst-cards{grid-template-columns:repeat(2,minmax(0,1fr))}.hst-strip{grid-template-columns:repeat(4,minmax(0,1fr));row-gap:22px}.hst-promises__row{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.hst-cards,.hst-promises__row{grid-template-columns:1fr}.hst-strip{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* Trusted Worldwide cards with photographs (client mockup) */
.tw-card--pic{padding:0 0 18px;overflow:hidden;display:flex;flex-direction:column}
.tw-card__img{display:block;width:100%;height:150px;object-fit:cover}
.tw-card--pic .tw-card__n{margin:-22px 0 10px 18px;position:relative;box-shadow:0 0 0 4px #fff}
.tw-card--pic .tw-card__t,.tw-card--pic .tw-card__p,.tw-card--pic .tw-card__label,.tw-card--pic .tw-card__list{margin-left:18px;margin-right:18px}
.tw-card__more{margin:auto 18px 0;padding-top:14px;display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.92rem;color:#1257d6;text-decoration:none}
.tw-card__more svg{width:26px;height:26px;padding:6px;border-radius:50%;background:#1257d6;color:#fff}
.tw-card__more:hover{text-decoration:underline}

/* governance: bodies that work in sequence */
.hubx-chain{list-style:none;margin:6px 0 4px;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px 26px;counter-reset:ch}
.hubx-chain li{position:relative;background:#fff;border:1px solid #dfe6f1;border-top:4px solid #0b3d91;border-radius:12px;padding:18px 16px}
.hubx-chain li:not(:last-child)::after{content:"→";position:absolute;right:-21px;top:50%;transform:translateY(-50%);color:#1257d6;font-size:1.2rem;font-weight:700}
.hubx-chain li:nth-child(4n)::after{display:none}
.hubx-chain__k{display:block;font-size:.72rem;font-weight:800;letter-spacing:.14em;color:#b8892b;margin-bottom:6px}
.hubx-chain b{display:block;font-size:1.02rem;line-height:1.3;color:#0b1f3f;margin-bottom:6px}
.hubx-chain p{margin:0;font-size:.9rem;line-height:1.5;color:#3d4d66}
@media (max-width:1100px){.hubx-chain{grid-template-columns:repeat(2,minmax(0,1fr))}.hubx-chain li::after{display:none!important}}
@media (max-width:560px){.hubx-chain{grid-template-columns:1fr}}

/* previous/next buttons in hub panels must be readable on the tinted background */
.hubx-panel__foot .cbtn--outline,.hubx-ctas .cbtn--outline{background:#fff;color:#0b1f3f;border:1.5px solid #0b1f3f}
.hubx-panel__foot .cbtn--outline:hover,.hubx-ctas .cbtn--outline:hover{background:#0b1f3f;color:#fff}

.hubx-h4{font-size:1rem;font-weight:800;color:#0b3d91;margin:14px 0 6px}

.hst-closing__flow{font-weight:800;letter-spacing:.12em;color:#8fc0ff!important;font-size:.95rem}

/* payment & refund policy additions */
.pol-pdf{display:flex;align-items:center;gap:16px;flex-wrap:wrap;background:#eef4ff;border:1px solid #cfdcf5;border-radius:12px;padding:16px 20px;margin:0 0 22px}
.pol-pdf>svg{width:30px;height:30px;color:#0b3d91;flex:none}.pol-pdf b{display:block;color:#0b1f3f}.pol-pdf span{font-size:.92rem;color:#3d4d66}.pol-pdf .cbtn{margin-left:auto}
.pol-tablewrap{overflow-x:auto;margin:10px 0 16px}
.pol-table{width:100%;border-collapse:collapse;font-size:.95rem;min-width:620px}
.pol-table th,.pol-table td{border:1px solid #dfe6f1;padding:10px 12px;text-align:left;vertical-align:top;line-height:1.45}
.pol-table thead th{background:#0b1f3f;color:#fff;font-weight:700}
.pol-table tbody th{background:#f4f7fc;font-weight:700;color:#0b1f3f}
.pol-confirm{display:flex;gap:12px;align-items:flex-start;font-weight:600;color:#0b1f3f}
.pol-confirm__box{flex:none;width:18px;height:18px;border:2px solid #0b3d91;border-radius:4px;margin-top:3px}
.pol-links{display:flex;flex-wrap:wrap;gap:10px}

/* checkout: Before You Pay */
.cko-policy{margin-top:22px;border:2px solid #0b3d91;border-radius:14px;padding:20px 22px;background:#f7faff}
.cko-policy__h{margin:0 0 6px;font-size:1.15rem;font-weight:800;color:#0b1f3f}
.cko-policy__lede{margin:0 0 14px;color:#22324d}
.cko-policy__links{display:flex;flex-wrap:wrap;align-items:center;gap:14px;margin-bottom:16px}
.cko-policy__pdf{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:10px;background:#0b3d91;color:#fff;text-decoration:none}
.cko-policy__pdf:hover{background:#0b1f3f;color:#fff}.cko-policy__pdf svg{width:22px;height:22px}
.cko-policy__pdf b{display:block;font-size:.95rem}.cko-policy__pdf small{display:block;font-size:.76rem;opacity:.85}
.cko-policy__page{font-weight:600;color:#0b3d91}
.cko-policy__confirm-lede{margin:0 0 8px;font-weight:700;color:#0b1f3f}
.cko-policy__check{display:flex;gap:10px;align-items:flex-start;margin:0 0 10px;line-height:1.45}
.cko-policy__check input{width:19px;height:19px;flex:none;margin-top:2px;accent-color:#0b3d91}
.cko-policy__hint{margin:8px 0 0;font-size:.88rem;color:#8a4a10;font-weight:600}
.cko-pay-btn.is-waiting{opacity:.55;cursor:not-allowed}

/* --------------------------------------------------------------------------
   Larger logo (client: "the logo is too tiny, the name can't be seen").
   The lockup carries three lines of small lettering, so it needs width to be
   legible. On wide screens the masthead gets a wider container than the page
   so the nav keeps its room; below that the logo takes the slack the nav left.
   -------------------------------------------------------------------------- */
.brand__mark { width: 240px; }
@media (min-width: 1521px) {
  .masthead > .container { max-width: min(1640px, calc(100vw - 40px)); }
}
@media (min-width: 1341px) and (max-width: 1520px) { .brand__mark { width: 210px; } }
@media (min-width: 1141px) and (max-width: 1340px) { .brand__mark { width: 190px; } }
@media (min-width: 1025px) and (max-width: 1140px) { .brand__mark { width: 160px; } }
@media (max-width: 1024px) { .brand__mark { width: 190px; } }
@media (max-width: 420px) { .brand__mark { width: 170px; } }
@media (min-width: 1521px) and (max-width: 1640px) { .brand__mark { width: 180px; } }
@media (min-width: 1025px) { .masthead__inner { min-height: 112px; } }