/* ==========================================================================
   Clinical Pivot — design system
   Navy / warm off-white / gold, with muted teal used sparingly.
   ========================================================================== */

:root{
  /* --- navy scale --- */
  --navy-900:#06121F;
  --navy-800:#0A1E36;
  --navy-700:#0E2A4A;
  --navy-600:#15395F;
  --navy-500:#1E4B78;
  --navy-line:#1C3B5E;

  /* --- gold --- */
  --gold:#C9A227;
  --gold-bright:#E6C665;
  --gold-deep:#876912;
  --gold-tint:#FFFFFF;

  /* --- neutrals --- */
  --white:#FFFFFF;
  --warm:#F4F7FB;
  --warm-2:#E9EFF6;
  --warm-line:#D9E2EC;

  /* --- teal (sparing) --- */
  --teal:#0E7C74;
  --teal-deep:#0A5C56;
  --teal-tint:#E7F2F1;

  /* --- text --- */
  --ink:#12263C;
  --ink-2:#3C5068;
  --ink-muted:#566A80;
  --on-navy:#EAF1F9;
  --on-navy-2:#B7C9DD;
  --on-navy-muted:#8AA1BC;

  /* --- type --- */
  --font-display:"Newsreader","Iowan Old Style",Georgia,serif;
  --font-sans:"Inter Tight","Inter","Helvetica Neue",Arial,sans-serif;

  --t-hero:clamp(2.3rem,1.25rem + 4.3vw,4.6rem);
  --t-display:clamp(1.9rem,1.3rem + 2.5vw,3.15rem);
  --t-title:clamp(1.55rem,1.25rem + 1.3vw,2.25rem);
  --t-h3:clamp(1.22rem,1.06rem + .68vw,1.62rem);
  --t-body:clamp(1.0625rem,1.005rem + .34vw,1.1875rem);
  --t-small:.95rem;
  --t-label:.75rem;

  /* --- layout --- */
  --container:1240px;
  --measure:62ch;
  --gutter:clamp(20px,5vw,64px);
  --section-y:clamp(44px,5.6vw,78px);
  --nav-h:68px;

  /* --- shape + motion --- */
  --r-sm:10px;
  --r:14px;
  --r-lg:20px;
  --r-xl:28px;
  --ease:cubic-bezier(.2,.6,.2,1);
  --dur:420ms;
  --dur-fast:200ms;

  --shadow-sm:0 1px 2px rgba(10,30,54,.05),0 2px 8px rgba(10,30,54,.04);
  --shadow:0 2px 4px rgba(10,30,54,.05),0 12px 28px -8px rgba(10,30,54,.10);
  --shadow-lg:0 4px 8px rgba(10,30,54,.06),0 28px 56px -16px rgba(10,30,54,.16);
}

/* ==========================================================================
   Reset + base
   ========================================================================== */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--t-body);
  line-height:1.65;
  color:var(--ink);
  background:var(--white);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
img,svg,video{max-width:100%;height:auto;display:block}
h1,h2,h3,h4{margin:0;font-family:var(--font-display);font-weight:600;line-height:1.08;letter-spacing:-.02em;text-wrap:balance}
p{margin:0}
a{color:inherit}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}

/* ==========================================================================
   Layout primitives
   ========================================================================== */

.cp-wrap{width:100%;max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter)}
.cp-section{padding-block:var(--section-y)}
.cp-narrow{max-width:var(--measure)}

/* Section surfaces — the page rhythm */
.s-white{background:var(--white);color:var(--ink)}
.s-warm{background:var(--warm);color:var(--ink)}
.s-warm-2{background:linear-gradient(180deg,var(--warm),var(--warm-2));color:var(--ink)}
.s-navy{background:var(--navy-800);color:var(--on-navy)}
.s-navy-deep{background:var(--navy-900);color:var(--on-navy)}

.s-navy h1,.s-navy h2,.s-navy h3,
.s-navy-deep h1,.s-navy-deep h2,.s-navy-deep h3{color:#FFF}

/* Hairline dividers between light bands */
.s-white + .s-white{border-top:1px solid var(--warm-line)}

/* ==========================================================================
   Type helpers
   ========================================================================== */

.cp-eyebrow{
  font-family:var(--font-sans);
  font-size:var(--t-label);
  font-weight:600;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold-deep);
  margin:0 0 16px;
  display:flex;align-items:center;gap:10px;
}
.cp-eyebrow::after{content:"";flex:0 0 28px;height:1px;background:currentColor;opacity:.4}
.s-navy .cp-eyebrow,.s-navy-deep .cp-eyebrow{color:var(--gold-bright)}

.cp-h2{font-size:var(--t-display);margin:0 0 18px}
.cp-h3{font-family:var(--font-display);font-size:var(--t-h3);font-weight:600;letter-spacing:-.015em;line-height:1.22}
.cp-lead{font-size:clamp(1.12rem,1.04rem + .45vw,1.36rem);line-height:1.58;color:var(--ink-2)}
.s-navy .cp-lead,.s-navy-deep .cp-lead{color:var(--on-navy-2)}
.cp-body{color:var(--ink-2)}
.s-navy .cp-body,.s-navy-deep .cp-body{color:var(--on-navy-2)}
.cp-muted{color:var(--ink-muted);font-size:var(--t-small)}
.s-navy .cp-muted,.s-navy-deep .cp-muted{color:var(--on-navy-muted)}
.cp-em{font-style:italic;color:var(--gold-deep)}
.s-navy .cp-em,.s-navy-deep .cp-em{color:var(--gold-bright)}
.cp-num{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-weight:500}

/* Two-column editorial header: heading left, body right */
.cp-split{display:grid;gap:clamp(20px,4vw,64px);grid-template-columns:1fr}
@media (min-width:860px){
  .cp-split{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);align-items:start}
}

/* ==========================================================================
   Buttons
   ========================================================================== */

.cp-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  font-family:var(--font-sans);font-size:1.06rem;font-weight:600;letter-spacing:.01em;
  text-decoration:none;text-align:center;
  padding:15px 28px;min-height:52px;border-radius:999px;
  border:1px solid transparent;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),
             box-shadow var(--dur-fast) var(--ease);
}
.cp-btn:hover{transform:translateY(-1px)}
.cp-btn:active{transform:translateY(0)}

.cp-btn--gold{background:var(--gold);color:var(--navy-900);box-shadow:0 1px 2px rgba(10,30,54,.12)}
.cp-btn--gold:hover{background:var(--gold-bright);box-shadow:0 6px 18px -6px rgba(201,162,39,.6)}

.cp-btn--navy{background:var(--navy-800);color:#FFF}
.cp-btn--navy:hover{background:var(--navy-600)}

.cp-btn--ghost{background:transparent;color:var(--on-navy);border-color:rgba(183,201,221,.34)}
.cp-btn--ghost:hover{background:rgba(255,255,255,.07);border-color:rgba(183,201,221,.6)}

.cp-btn--outline{background:transparent;color:var(--navy-700);border-color:rgba(21,57,95,.24)}
.cp-btn--outline:hover{background:var(--navy-800);color:#FFF;border-color:var(--navy-800)}

.cp-btn--wa{background:#12873F;color:#FFF}
.cp-btn--wa:hover{background:#0E6F33}

.cp-btn--block{width:100%}
.cp-btn-row{display:flex;flex-wrap:wrap;gap:12px}
@media (max-width:560px){
  .cp-btn-row{flex-direction:column}
  .cp-btn-row .cp-btn{width:100%}
}

/* ==========================================================================
   Requirement chips — "no experience required"
   ========================================================================== */

.cp-reqs{display:flex;flex-wrap:wrap;gap:10px;margin:0}
.cp-req{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.8rem;font-weight:600;letter-spacing:.07em;text-transform:uppercase;
  padding:9px 16px 9px 13px;border-radius:999px;
  background:rgba(14,124,116,.14);
  border:1px solid rgba(60,190,175,.34);
  color:#8FE6DC;
}
.cp-req svg{flex:none;width:15px;height:15px}
.s-white .cp-req,.s-warm .cp-req,.s-warm-2 .cp-req{
  background:var(--teal-tint);border-color:rgba(14,124,116,.24);color:var(--teal-deep);
}

/* ==========================================================================
   Nav
   ========================================================================== */

.cp-nav{
  position:sticky;top:0;z-index:70;
  background:rgba(10,30,54,.86);
  backdrop-filter:saturate(150%) blur(14px);
  -webkit-backdrop-filter:saturate(150%) blur(14px);
  border-bottom:1px solid rgba(183,201,221,.12);
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.cp-nav.is-stuck{background:rgba(6,18,31,.96);border-bottom-color:rgba(183,201,221,.18)}
.cp-nav__inner{
  max-width:var(--container);margin-inline:auto;padding-inline:var(--gutter);
  min-height:var(--nav-h);display:flex;align-items:center;gap:20px;
}
.cp-logo{display:flex;align-items:center;gap:11px;text-decoration:none;flex:none}
.cp-logo__mark{
  width:34px;height:34px;border-radius:9px;flex:none;
  background:linear-gradient(145deg,var(--gold-bright),var(--gold-deep));
  display:grid;place-items:center;
  font-family:var(--font-display);font-weight:600;font-size:.94rem;letter-spacing:.02em;
  color:var(--navy-900);
}
.cp-logo__text{font-family:var(--font-display);font-size:1.08rem;font-weight:600;color:#FFF;letter-spacing:-.01em;white-space:nowrap}

.cp-nav__links{display:none;align-items:center;gap:26px;margin-left:auto}
.cp-nav__links a{
  text-decoration:none;font-size:.94rem;font-weight:500;color:var(--on-navy-2);
  padding-block:6px;position:relative;white-space:nowrap;
  transition:color var(--dur-fast) var(--ease);
}
.cp-nav__links a::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:1.5px;
  background:var(--gold);transform:scaleX(0);transform-origin:left;
  transition:transform var(--dur-fast) var(--ease);
}
.cp-nav__links a:hover{color:#FFF}
.cp-nav__links a:hover::after{transform:scaleX(1)}

.cp-nav__cta{
  display:none;flex:none;text-decoration:none;
  font-size:.82rem;font-weight:600;letter-spacing:.02em;
  padding:11px 20px;border-radius:999px;
  border:1px solid var(--gold);color:var(--gold-bright);
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease);
}
.cp-nav__cta:hover{background:var(--gold);color:var(--navy-900)}

.cp-burger{
  margin-left:auto;width:44px;height:44px;flex:none;
  display:grid;place-items:center;border-radius:10px;
  border:1px solid rgba(183,201,221,.22);
}
.cp-burger span{display:block;width:18px;height:1.5px;background:var(--on-navy);border-radius:2px;transition:transform var(--dur-fast) var(--ease),opacity var(--dur-fast) var(--ease)}
.cp-burger span + span{margin-top:4.5px}
.cp-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.cp-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.cp-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}

@media (min-width:1000px){
  .cp-nav__links{display:flex}
  .cp-nav__cta{display:inline-flex;margin-left:8px}
  .cp-burger{display:none}
}

/* Mobile drawer */
.cp-drawer{
  position:fixed;inset:var(--nav-h) 0 0;z-index:69;
  background:var(--navy-900);
  padding:22px var(--gutter) 40px;
  overflow-y:auto;overscroll-behavior:contain;
  display:flex;flex-direction:column;gap:2px;
  opacity:0;visibility:hidden;transform:translateY(-8px);
  transition:opacity var(--dur-fast) var(--ease),transform var(--dur-fast) var(--ease),visibility var(--dur-fast);
}
.cp-drawer.is-open{opacity:1;visibility:visible;transform:none}
.cp-drawer a:not(.cp-btn){
  text-decoration:none;color:var(--on-navy);
  font-family:var(--font-display);font-size:1.3rem;font-weight:500;
  padding:14px 0;border-bottom:1px solid rgba(183,201,221,.1);
}
.cp-drawer .cp-btn{margin-top:22px}
body.cp-locked{overflow:hidden}

/* ==========================================================================
   Hero
   ========================================================================== */

.cp-hero{
  position:relative;overflow:hidden;
  background:
    radial-gradient(90% 70% at 12% 0%,rgba(30,75,120,.5),transparent 62%),
    radial-gradient(70% 60% at 92% 12%,rgba(201,162,39,.13),transparent 60%),
    linear-gradient(170deg,var(--navy-800),var(--navy-900));
  color:var(--on-navy);
  padding-block:clamp(44px,7vw,92px) clamp(52px,8vw,104px);
}
/* fine grid texture — subtle, no floating shapes */

.cp-hero__inner{position:relative;z-index:1}
.cp-hero h1{
  font-size:var(--t-hero);font-weight:600;color:#FFF;
  letter-spacing:-.03em;line-height:1.02;margin:0;
}
.cp-hero h1 .l2{display:block;font-style:italic;font-weight:400;color:var(--gold-bright);margin-top:.1em}
.cp-hero__sub{margin:24px 0 0;max-width:58ch;font-size:clamp(1.02rem,.98rem + .4vw,1.22rem);line-height:1.6;color:var(--on-navy-2)}
.cp-hero .cp-reqs{margin-top:30px}
.cp-hero .cp-btn-row{margin-top:32px}
.cp-hero__meta{
  margin-top:28px;padding-top:22px;border-top:1px solid rgba(183,201,221,.14);
  font-size:.83rem;color:var(--on-navy-muted);letter-spacing:.02em;
}

/* ==========================================================================
   Proof bar — compact strip, never five giant cards
   ========================================================================== */

.cp-proof{background:var(--navy-900);border-top:1px solid rgba(183,201,221,.1);padding-block:0}
.cp-proof__list{
  display:grid;grid-template-columns:1fr 1fr;
  gap:0;
}
@media (min-width:760px){.cp-proof__list{grid-template-columns:repeat(5,1fr)}}
.cp-proof__item{
  display:flex;align-items:center;gap:10px;
  padding:16px 18px;min-height:64px;
  border-right:1px solid rgba(183,201,221,.09);
  border-bottom:1px solid rgba(183,201,221,.09);
  font-size:.76rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--on-navy-2);line-height:1.35;
}
.cp-proof__item:last-child{border-right:0}
@media (min-width:760px){.cp-proof__item{border-bottom:0;justify-content:center;text-align:center;flex-direction:column;gap:8px;padding:22px 14px}}
@media (max-width:759px){.cp-proof__item:nth-child(2n){border-right:0}.cp-proof__item:last-child{grid-column:1/-1;justify-content:center}}
.cp-proof__item svg{flex:none;width:17px;height:17px;color:var(--gold)}

/* ==========================================================================
   Cards
   ========================================================================== */

.cp-card{
  overflow-wrap:break-word;
  background:var(--white);
  border:1px solid var(--warm-line);
  border-radius:var(--r-lg);
  padding:clamp(22px,3vw,32px);
  box-shadow:var(--shadow-sm);
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.cp-card--hover:hover{transform:translateY(-3px);box-shadow:var(--shadow);border-color:rgba(201,162,39,.4)}
.s-navy .cp-card,.s-navy-deep .cp-card{
  background:rgba(255,255,255,.035);border-color:rgba(183,201,221,.15);box-shadow:none;color:var(--on-navy);
}
.s-navy .cp-card--hover:hover{background:rgba(255,255,255,.06);border-color:rgba(201,162,39,.4);box-shadow:none}

.cp-grid{display:grid;gap:clamp(14px,2vw,22px)}
.cp-grid > *{min-width:0}
.cp-grid--2{grid-template-columns:1fr}
.cp-grid--3{grid-template-columns:1fr}
.cp-grid--4{grid-template-columns:1fr 1fr}
@media (min-width:680px){.cp-grid--2{grid-template-columns:1fr 1fr}.cp-grid--3{grid-template-columns:1fr 1fr}}
@media (min-width:940px){.cp-grid--3{grid-template-columns:repeat(3,1fr)}.cp-grid--4{grid-template-columns:repeat(4,1fr)}}

/* ==========================================================================
   Method — Learn / Practise / Build / Explain it
   ========================================================================== */

.cp-method{display:grid;gap:1px;background:rgba(183,201,221,.16);border:1px solid rgba(183,201,221,.16);border-radius:var(--r-lg);overflow:hidden}
@media (min-width:640px){.cp-method{grid-template-columns:1fr 1fr}}
@media (min-width:1000px){.cp-method{grid-template-columns:repeat(4,1fr)}}
.cp-method__step{background:var(--navy-800);padding:clamp(24px,3vw,34px);position:relative}
.cp-method__n{
  font-family:var(--font-display);font-size:2.1rem;font-weight:500;line-height:1;
  color:var(--gold);opacity:.85;font-variant-numeric:tabular-nums;
}
.cp-method__step h3{
  margin:14px 0 10px;font-family:var(--font-sans);font-size:.82rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:#FFF;
}
.cp-method__step p{font-size:1.06rem;line-height:1.6;color:var(--on-navy-2)}

/* ==========================================================================
   Curriculum — desktop tabs / mobile accordion
   ========================================================================== */

.cp-cur{display:grid;gap:clamp(18px,3vw,44px);grid-template-columns:1fr}
@media (min-width:940px){.cp-cur{grid-template-columns:minmax(260px,320px) minmax(0,1fr);align-items:start}}

/* Left rail (desktop only) */
.cp-cur__rail{display:none}
@media (min-width:940px){
  .cp-cur__rail{display:flex;flex-direction:column;gap:2px;position:sticky;top:calc(var(--nav-h) + 20px)}
}
.cp-cur__tab{
  display:flex;align-items:flex-start;gap:15px;width:100%;text-align:left;
  padding:16px 18px;border-radius:var(--r);
  border:1px solid transparent;
  transition:background var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease);
}
.cp-cur__tab:hover{background:var(--warm)}
.cp-cur__tab[aria-selected="true"]{background:var(--white);border-color:var(--warm-line);box-shadow:var(--shadow-sm)}
.cp-cur__tab-n{
  font-family:var(--font-display);font-variant-numeric:tabular-nums;
  font-size:.98rem;font-weight:600;color:var(--ink-muted);flex:none;padding-top:2px;
  transition:color var(--dur-fast) var(--ease);
}
.cp-cur__tab[aria-selected="true"] .cp-cur__tab-n{color:var(--gold-deep)}
.cp-cur__tab-t{font-size:1.02rem;font-weight:600;line-height:1.35;color:var(--ink-2)}
.cp-cur__tab[aria-selected="true"] .cp-cur__tab-t{color:var(--navy-700)}

/* Panels */
.cp-cur__panel{display:none;animation:cpFade var(--dur) var(--ease)}
.cp-cur__panel.is-active{display:block}
@keyframes cpFade{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* Mobile accordion header — hidden on desktop */
.cp-cur__acc{
  display:flex;align-items:center;gap:14px;width:100%;text-align:left;
  padding:20px 4px;border-bottom:1px solid var(--warm-line);
}
.cp-cur__acc-n{font-family:var(--font-display);font-variant-numeric:tabular-nums;font-size:.96rem;font-weight:600;color:var(--gold-deep);flex:none}
.cp-cur__acc-t{font-size:1.1rem;font-weight:600;line-height:1.35;flex:1;color:var(--navy-700)}
.cp-cur__acc-i{flex:none;width:20px;height:20px;color:var(--ink-muted);transition:transform var(--dur-fast) var(--ease)}
.cp-cur__acc[aria-expanded="true"] .cp-cur__acc-i{transform:rotate(45deg)}
@media (min-width:940px){.cp-cur__acc{display:none}}

.cp-cur__body{padding:4px 0 32px}
@media (min-width:940px){
  .cp-cur__body{background:var(--white);border:1px solid var(--warm-line);border-radius:var(--r-xl);padding:clamp(28px,3.4vw,44px);box-shadow:var(--shadow)}
}
.cp-cur__kicker{font-size:var(--t-label);font-weight:600;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep)}
.cp-cur__title{font-size:var(--t-title);margin:10px 0 0;color:var(--navy-700)}
.cp-cur__intro{margin:14px 0 0;color:var(--ink-2)}

.cp-cur__blocks{display:grid;gap:clamp(16px,2.4vw,24px);margin-top:clamp(24px,3vw,32px)}
@media (min-width:700px){.cp-cur__blocks{grid-template-columns:1fr 1fr}}
.cp-block{padding-top:18px;border-top:1px solid var(--warm-line)}
.cp-block__h{
  display:flex;align-items:center;gap:9px;margin:0 0 12px;
  font-size:var(--t-label);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--navy-600);
}
.cp-block__h svg{width:15px;height:15px;flex:none;color:var(--gold-deep)}
.cp-block li{
  position:relative;padding-left:20px;margin-bottom:8px;
  font-size:1.06rem;line-height:1.55;color:var(--ink-2);
}
.cp-block li::before{
  content:"";position:absolute;left:2px;top:.62em;
  width:5px;height:5px;border-radius:50%;background:var(--gold);
}
.cp-block p{font-size:1.06rem;line-height:1.6;color:var(--ink-2)}

/* Career connection — full width, teal-tinted */
.cp-block--career{
  grid-column:1/-1;border-top:0;
  background:var(--teal-tint);border:1px solid rgba(14,124,116,.16);
  border-radius:var(--r);padding:20px 22px;
}
.cp-block--career .cp-block__h{color:var(--teal-deep)}
.cp-block--career .cp-block__h svg{color:var(--teal)}
.cp-block--career p{color:var(--ink)}

/* ==========================================================================
   Testimonials
   ========================================================================== */

.cp-t-feature{
  display:grid;gap:clamp(24px,4vw,52px);grid-template-columns:1fr;align-items:center;
}
@media (min-width:880px){.cp-t-feature{grid-template-columns:minmax(0,1.25fr) minmax(0,1fr)}}
.cp-quote{
  font-family:var(--font-display);font-weight:400;
  font-size:clamp(1.3rem,1.05rem + 1.1vw,1.95rem);
  line-height:1.38;letter-spacing:-.015em;color:var(--navy-700);
}
.s-navy .cp-quote,.s-navy-deep .cp-quote{color:#FFF}
.cp-quote::before{content:"\201C"}
.cp-quote::after{content:"\201D"}

.cp-t-mark{width:34px;height:26px;color:var(--gold);opacity:.9;margin-bottom:18px}

.cp-attrib{display:flex;align-items:center;gap:13px;margin-top:26px}
.cp-attrib__av{
  width:44px;height:44px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--navy-700);color:var(--gold-bright);
  font-family:var(--font-display);font-size:1.06rem;font-weight:600;
}
.cp-attrib__n{display:block;font-size:1.02rem;font-weight:650;color:var(--ink);line-height:1.3}
.s-navy .cp-attrib__n{color:#FFF}
.cp-attrib__r{display:block;font-size:.96rem;color:var(--ink-muted);line-height:1.4;margin-top:2px}
.s-navy .cp-attrib__r{color:var(--on-navy-muted)}

/* Background → clinical research pivot label */
.cp-pivot{
  display:inline-flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:.7rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:7px 14px;border-radius:999px;
  background:var(--gold-tint);border:1px solid rgba(201,162,39,.32);color:var(--gold-deep);
}
.s-navy .cp-pivot{background:rgba(201,162,39,.14);border-color:rgba(230,198,101,.3);color:var(--gold-bright)}
.cp-pivot svg{width:13px;height:13px;flex:none;opacity:.75}

/* Supporting story cards */
.cp-t-card{display:flex;flex-direction:column;gap:16px;height:100%}
.cp-t-card .cp-quote{font-size:clamp(1.02rem,.98rem + .3vw,1.14rem);line-height:1.55}
.cp-t-card .cp-attrib{margin-top:auto;padding-top:18px;border-top:1px solid var(--warm-line)}
.s-navy .cp-t-card .cp-attrib{border-top-color:rgba(183,201,221,.15)}

/* Placeholder state — impossible to mistake for a real testimonial */
.cp-t-empty{
  border:1.5px dashed rgba(100,121,143,.45);background:rgba(100,121,143,.04);
  border-radius:var(--r-lg);padding:clamp(22px,3vw,32px);
  display:flex;flex-direction:column;gap:10px;justify-content:center;min-height:190px;
}
.cp-t-empty__tag{
  align-self:flex-start;font-size:.66rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  padding:5px 11px;border-radius:999px;background:rgba(100,121,143,.14);color:var(--ink-muted);
}
.cp-t-empty p{font-size:.98rem;line-height:1.55;color:var(--ink-muted)}
.cp-t-empty code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85em;background:rgba(100,121,143,.12);padding:1px 5px;border-radius:4px}

/* Mobile swipe rail */
.cp-rail{
  display:grid;grid-auto-flow:column;grid-auto-columns:82%;
  gap:14px;overflow-x:auto;scroll-snap-type:x mandatory;
  scroll-padding-inline:var(--gutter);
  margin-inline:calc(var(--gutter) * -1);padding-inline:var(--gutter);
  padding-bottom:18px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.cp-rail::-webkit-scrollbar{display:none}
.cp-rail > *{scroll-snap-align:start}
@media (min-width:880px){
  .cp-rail{grid-auto-flow:row;grid-template-columns:repeat(2,1fr);grid-auto-columns:auto;
           overflow:visible;margin-inline:0;padding-inline:0;padding-bottom:0;gap:clamp(14px,2vw,22px)}
}
.cp-rail-hint{
  display:flex;align-items:center;gap:8px;margin-top:2px;
  font-size:.78rem;color:var(--ink-muted);letter-spacing:.04em;
}
@media (min-width:880px){.cp-rail-hint{display:none}}

/* ==========================================================================
   Role explainer (CRA / CTM / CPM)
   ========================================================================== */

.cp-role{display:flex;flex-direction:column;gap:18px;height:100%}
.cp-role__tag{
  align-self:flex-start;
  font-family:var(--font-display);font-size:1.5rem;font-weight:600;letter-spacing:.01em;
  color:var(--navy-700);
  padding-bottom:10px;border-bottom:2px solid var(--gold);
}
.cp-role__lead{font-size:.98rem;line-height:1.6;color:var(--ink-2)}
.cp-role__q{
  margin-top:auto;padding:16px 18px;border-radius:var(--r);
  background:var(--navy-800);color:#FFF;
  font-family:var(--font-display);font-style:italic;font-size:1.1rem;line-height:1.45;
}
.cp-role__q span{display:block;font-family:var(--font-sans);font-style:normal;font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-bright);margin-bottom:7px}

/* ==========================================================================
   Career pathway ladder
   ========================================================================== */

.cp-path{display:flex;flex-direction:column;gap:0;counter-reset:rung}
.cp-rung{
  display:grid;grid-template-columns:auto 1fr;gap:18px;align-items:start;
  padding:18px 0;position:relative;
}
.cp-rung__dot{
  width:13px;height:13px;border-radius:50%;flex:none;margin-top:6px;
  background:var(--white);border:2.5px solid var(--gold);z-index:1;position:relative;
}
.cp-rung:not(:last-child)::before{
  content:"";position:absolute;left:6px;top:24px;bottom:-6px;width:1.5px;
  background:linear-gradient(180deg,var(--gold),rgba(201,162,39,.25));
}
.cp-rung__t{font-size:1.05rem;font-weight:650;color:var(--navy-700);line-height:1.35}
.cp-rung__s{font-size:.96rem;color:var(--ink-muted);margin-top:5px;line-height:1.5}
.cp-rung--entry .cp-rung__dot{background:var(--gold)}

/* ==========================================================================
   Portfolio / build grid
   ========================================================================== */

.cp-build{
  display:flex;align-items:center;gap:14px;
  padding:16px 18px;border-radius:var(--r);
  background:var(--white);border:1px solid var(--warm-line);
  transition:transform var(--dur-fast) var(--ease),border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.cp-build:hover{transform:translateY(-2px);border-color:rgba(201,162,39,.45);box-shadow:var(--shadow-sm)}
.cp-build__i{
  width:38px;height:38px;border-radius:9px;flex:none;display:grid;place-items:center;
  background:var(--gold-tint);color:var(--gold-deep);
}
.cp-build__i svg{width:18px;height:18px}
.cp-build__t{font-size:1.06rem;font-weight:600;line-height:1.35;color:var(--ink)}

/* ==========================================================================
   Pricing
   ========================================================================== */

.cp-price-head{text-align:center;margin-bottom:clamp(28px,4vw,44px)}
.cp-price-head .cp-eyebrow{justify-content:center}
.cp-price-head .cp-eyebrow::after{display:none}
.cp-tuition{
  font-family:var(--font-display);font-size:clamp(2.6rem,2rem + 2.6vw,3.9rem);
  font-weight:600;line-height:1;letter-spacing:-.03em;color:var(--navy-700);
}
.cp-tuition sup{font-size:.4em;font-weight:500;vertical-align:super;margin-left:.15em;color:var(--ink-muted)}

.cp-plans{display:grid;gap:clamp(16px,2.4vw,24px);grid-template-columns:1fr;align-items:stretch}
@media (min-width:820px){.cp-plans{grid-template-columns:1fr 1fr}}

.cp-plan{
  display:flex;flex-direction:column;
  background:var(--white);border:1px solid var(--warm-line);
  border-radius:var(--r-xl);padding:clamp(26px,3.2vw,38px);box-shadow:var(--shadow-sm);
  position:relative;
}
.cp-plan--feature{
  border-color:var(--gold);border-width:1.5px;box-shadow:var(--shadow-lg);
}
.cp-plan__badge{
  position:absolute;top:0;left:clamp(26px,3.2vw,38px);transform:translateY(-50%);
  font-size:.68rem;font-weight:700;letter-spacing:.11em;text-transform:uppercase;
  padding:7px 15px;border-radius:999px;
  background:var(--gold);color:var(--navy-900);white-space:nowrap;
  box-shadow:0 2px 10px -2px rgba(201,162,39,.7);
}
.cp-plan__name{font-size:.78rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-muted);margin:6px 0 14px}
.cp-plan__price{font-family:var(--font-display);font-size:clamp(2.1rem,1.7rem + 1.7vw,2.9rem);font-weight:600;line-height:1;letter-spacing:-.03em;color:var(--navy-700)}
.cp-plan__price sup{font-size:.36em;font-weight:500;vertical-align:super;margin-left:.2em;color:var(--ink-muted)}
.cp-plan__note{font-size:.94rem;color:var(--ink-muted);margin-top:9px}
.cp-plan__save{display:inline-block;margin-top:12px;font-size:.82rem;font-weight:650;color:var(--teal-deep);background:var(--teal-tint);padding:6px 13px;border-radius:999px}
.cp-plan__list{margin:24px 0 0;display:flex;flex-direction:column;gap:11px}
.cp-plan__list li{display:flex;gap:11px;font-size:1.06rem;line-height:1.5;color:var(--ink-2)}
.cp-plan__list svg{flex:none;width:17px;height:17px;margin-top:3px;color:var(--teal)}
.cp-plan .cp-btn{margin-top:28px}
.cp-plan__inst{
  margin-top:22px;border-top:1px solid var(--warm-line);padding-top:18px;
  display:flex;flex-direction:column;gap:9px;
}
.cp-plan__inst-row{display:flex;justify-content:space-between;gap:14px;font-size:.98rem;color:var(--ink-2)}
.cp-plan__inst-row b{font-weight:650;font-variant-numeric:tabular-nums;color:var(--ink)}

/* ==========================================================================
   FAQ accordion
   ========================================================================== */

.cp-faq{max-width:820px;margin-inline:auto}
.cp-faq__item{border-bottom:1px solid var(--warm-line)}
.cp-faq__q{
  display:flex;align-items:flex-start;gap:16px;width:100%;text-align:left;
  padding:22px 2px;font-size:1.1rem;font-weight:600;line-height:1.45;color:var(--navy-700);
}
.cp-faq__q:hover{color:var(--gold-deep)}
.cp-faq__i{flex:none;width:20px;height:20px;margin-top:2px;color:var(--gold-deep);transition:transform var(--dur-fast) var(--ease)}
.cp-faq__q[aria-expanded="true"] .cp-faq__i{transform:rotate(45deg)}
.cp-faq__a{overflow:hidden;height:0;transition:height var(--dur-fast) var(--ease)}
.cp-faq__a > div{padding:0 2px 24px;color:var(--ink-2);max-width:62ch}
.cp-faq__a p + p{margin-top:12px}

/* ==========================================================================
   Cohort feature band
   ========================================================================== */

.cp-cohort{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:
    radial-gradient(80% 90% at 8% 0%,rgba(30,75,120,.55),transparent 60%),
    radial-gradient(60% 70% at 95% 100%,rgba(201,162,39,.15),transparent 62%),
    var(--navy-900);
  border:1px solid rgba(183,201,221,.16);
  padding:clamp(30px,4.5vw,60px);
  color:var(--on-navy);
}
.cp-cohort__badge{
  display:inline-flex;align-items:center;gap:9px;
  font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  padding:8px 16px;border-radius:999px;
  background:var(--gold);color:var(--navy-900);
}
.cp-facts{display:grid;gap:1px;background:rgba(183,201,221,.16);border:1px solid rgba(183,201,221,.16);border-radius:var(--r);overflow:hidden;margin-top:clamp(26px,3.4vw,38px)}
@media (min-width:560px){.cp-facts{grid-template-columns:1fr 1fr}}
@media (min-width:900px){.cp-facts{grid-template-columns:repeat(4,1fr)}}
.cp-fact{background:var(--navy-900);padding:18px 20px}
.cp-fact__k{font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--on-navy-muted);margin-bottom:8px}
.cp-fact__v{font-family:var(--font-display);font-size:1.12rem;font-weight:500;line-height:1.3;color:#FFF}
.cp-fact__v small{display:block;font-family:var(--font-sans);font-size:.8rem;font-weight:400;color:var(--on-navy-2);margin-top:4px;letter-spacing:0}

/* Value line — 7 weeks + 6 months */
.cp-valueline{
  display:grid;gap:14px;align-items:center;grid-template-columns:1fr;
  padding:clamp(20px,2.6vw,28px);border-radius:var(--r-lg);
  background:rgba(201,162,39,.09);border:1px solid rgba(230,198,101,.3);
  text-align:center;
}
@media (min-width:720px){.cp-valueline{grid-template-columns:1fr auto 1fr;text-align:left}}
.cp-valueline__x{
  font-family:var(--font-display);font-size:1.5rem;color:var(--gold-bright);
  display:grid;place-items:center;
}
.cp-valueline__k{font-family:var(--font-display);font-size:clamp(1.12rem,1rem + .5vw,1.42rem);font-weight:600;color:#FFF;line-height:1.25}
.cp-valueline__s{font-size:.96rem;color:var(--on-navy-2);margin-top:6px}

/* ==========================================================================
   Form
   ========================================================================== */

.cp-form{display:grid;gap:16px}
@media (min-width:640px){.cp-form{grid-template-columns:1fr 1fr}.cp-field--full{grid-column:1/-1}}
.cp-field{display:flex;flex-direction:column;gap:7px}
.cp-field label{font-size:.8rem;font-weight:650;letter-spacing:.05em;text-transform:uppercase;color:var(--ink-2)}
.cp-field input,.cp-field select,.cp-field textarea{
  font:inherit;font-size:1.06rem;color:var(--ink);
  background:var(--white);border:1px solid var(--warm-line);border-radius:var(--r-sm);
  padding:14px 15px;min-height:52px;width:100%;
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.cp-field textarea{min-height:120px;resize:vertical;line-height:1.55}
.cp-field select{appearance:none;-webkit-appearance:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2364798F' stroke-width='2.2' stroke-linecap='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right 14px center;background-size:17px;padding-right:44px}
.cp-field input:focus,.cp-field select:focus,.cp-field textarea:focus{
  outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(201,162,39,.16);
}
.cp-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ==========================================================================
   Footer
   ========================================================================== */

.cp-footer{background:var(--navy-900);color:var(--on-navy-2);padding-block:clamp(44px,6vw,72px) 32px}
.cp-footer__top{display:grid;gap:clamp(28px,4vw,52px);grid-template-columns:1fr}
@media (min-width:760px){.cp-footer__top{grid-template-columns:minmax(0,1.4fr) repeat(2,minmax(0,1fr))}}
.cp-footer h4{font-family:var(--font-sans);font-size:.72rem;font-weight:700;letter-spacing:.15em;text-transform:uppercase;color:var(--on-navy-muted);margin:0 0 16px}
.cp-footer ul{display:flex;flex-direction:column;gap:11px}
.cp-footer a{text-decoration:none;font-size:.99rem;color:var(--on-navy-2);transition:color var(--dur-fast) var(--ease)}
.cp-footer a:hover{color:var(--gold-bright)}
.cp-footer__bottom{
  margin-top:clamp(36px,5vw,56px);padding-top:26px;border-top:1px solid rgba(183,201,221,.12);
  display:flex;flex-wrap:wrap;gap:12px 24px;justify-content:space-between;
  font-size:.82rem;color:var(--on-navy-muted);line-height:1.6;
}

/* ==========================================================================
   Floating WhatsApp (mobile-first)
   ========================================================================== */

.cp-fab{
  position:fixed;right:16px;bottom:16px;z-index:60;
  display:inline-flex;align-items:center;gap:10px;
  padding:14px 20px 14px 17px;border-radius:999px;
  background:#12873F;color:#FFF;text-decoration:none;
  font-size:.98rem;font-weight:650;
  box-shadow:0 6px 22px -4px rgba(0,0,0,.4);
  transition:transform var(--dur-fast) var(--ease),background var(--dur-fast) var(--ease);
}
.cp-fab:hover{background:#0E6F33;transform:translateY(-2px)}
.cp-fab svg{width:21px;height:21px;flex:none}
@media (max-width:420px){.cp-fab{padding:14px 18px 14px 15px;font-size:.94rem;right:12px;bottom:12px}}

/* ==========================================================================
   Disclaimer
   ========================================================================== */

.cp-disclaimer{
  margin-top:clamp(24px,3vw,32px);padding:16px 20px;
  border-left:2px solid var(--gold);background:var(--warm-2);
  border-radius:0 var(--r-sm) var(--r-sm) 0;
  font-size:.92rem;line-height:1.6;color:var(--ink-muted);max-width:72ch;
}
.s-navy .cp-disclaimer,.s-navy-deep .cp-disclaimer{background:rgba(255,255,255,.04);color:var(--on-navy-muted)}

/* ==========================================================================
   Scroll reveal
   ========================================================================== */

/* Content is visible by default. It is only hidden for the reveal animation
   once JS has confirmed it can un-hide it again (html.cp-js), so a failed or
   blocked script can never leave the page blank. */
.cp-js .cp-reveal{opacity:0;transform:translateY(16px);transition:opacity var(--dur) var(--ease),transform var(--dur) var(--ease)}
.cp-js .cp-reveal.is-in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.cp-js .cp-reveal{opacity:1;transform:none}}

.cp-skip{position:absolute;left:-9999px;top:0;background:var(--gold);color:var(--navy-900);padding:12px 20px;border-radius:0 0 var(--r-sm) 0;font-weight:650;z-index:100}
.cp-skip:focus{left:0}

/* ==========================================================================
   Narrow-phone guards
   ========================================================================== */

html{overflow-x:hidden}
.cp-drawer{overflow-x:hidden}
.cp-split > *{min-width:0}
.cp-plans > *,.cp-method > *,.cp-facts > *{min-width:0}

@media (max-width:420px){
  .cp-card{padding:18px}
  .cp-grid--4{gap:10px}
  .cp-build{padding:14px 15px;gap:12px}
  .cp-build__t{font-size:.96rem}
}

/* ==========================================================================
   Curriculum — AI + deliverable blocks, week part labels
   ========================================================================== */

.cp-cur__tab-p{
  display:block;margin-top:4px;
  font-size:.7rem;font-weight:600;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-muted);
}
.cp-cur__tab[aria-selected="true"] .cp-cur__tab-p{color:var(--gold-deep)}

/* AI integration — gold tinted, sits beside Core concepts */
.cp-block--ai{
  border-top:0;background:var(--gold-tint);
  border:1px solid rgba(201,162,39,.3);border-radius:var(--r);padding:20px 22px;
}
.cp-block--ai .cp-block__h{color:var(--gold-deep)}
.cp-block--ai .cp-block__h svg{color:var(--gold-deep)}
.cp-block--ai li::before{background:var(--gold-deep)}

/* What you build — the deliverable, full width and prominent */
.cp-block--build{
  grid-column:1/-1;border-top:0;
  background:var(--navy-800);border-radius:var(--r);padding:22px 24px;
}
.cp-block--build .cp-block__h{color:var(--gold-bright)}
.cp-block--build .cp-block__h svg{color:var(--gold-bright)}
.cp-block--build p,.cp-block--build li{color:var(--on-navy-2);font-size:1.06rem}
.cp-block--build li::before{background:var(--gold-bright)}

/* ==========================================================================
   Comparison framework — why clinical research
   ========================================================================== */

.cp-compare{
  display:grid;gap:1px;background:var(--warm-line);
  border:1px solid var(--warm-line);border-radius:var(--r-lg);overflow:hidden;
}
.cp-compare__row{display:grid;gap:1px;background:var(--warm-line)}
@media (min-width:780px){.cp-compare__row{grid-template-columns:minmax(150px,.72fr) 1fr 1fr}}

.cp-compare__dim{
  background:var(--warm-2);padding:16px 20px;
  font-size:.72rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;
  color:var(--navy-700);display:flex;align-items:center;
}
.cp-compare__cell{background:var(--white);padding:20px 22px}
.cp-compare__cell b{display:block;font-size:1.02rem;font-weight:650;margin-bottom:7px;color:var(--ink)}
.cp-compare__cell p{font-size:.98rem;line-height:1.55;color:var(--ink-2)}
.cp-compare__cell--win{background:linear-gradient(180deg,rgba(14,124,116,.05),rgba(14,124,116,.02))}
.cp-compare__cell--win b{color:var(--teal-deep)}

/* Column headers */
.cp-compare__head{display:none}
@media (min-width:780px){
  .cp-compare__head{display:grid;gap:1px;background:var(--warm-line);
    grid-template-columns:minmax(150px,.72fr) 1fr 1fr}
}
.cp-compare__h{
  background:var(--navy-800);color:#FFF;padding:16px 22px;
  font-size:.78rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
}
.cp-compare__h--win{background:var(--teal-deep)}
.cp-compare__h--dim{background:var(--navy-900)}

/* Mobile: label each cell so the comparison still reads */
.cp-compare__tag{
  display:block;margin-bottom:9px;
  font-size:.64rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;color:var(--ink-muted);
}
.cp-compare__cell--win .cp-compare__tag{color:var(--teal-deep)}
@media (min-width:780px){.cp-compare__tag{display:none}}

/* ==========================================================================
   Skill transposition
   ========================================================================== */

.cp-trans{display:grid;gap:12px}
.cp-trans__row{
  display:grid;gap:12px;align-items:center;grid-template-columns:1fr;
  padding:18px 20px;border-radius:var(--r);
  background:var(--white);border:1px solid var(--warm-line);
  transition:border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.cp-trans__row:hover{border-color:rgba(201,162,39,.45);box-shadow:var(--shadow-sm)}
@media (min-width:720px){.cp-trans__row{grid-template-columns:1fr auto 1fr}}
.cp-trans__from b,.cp-trans__to b{display:block;font-size:.68rem;font-weight:700;letter-spacing:.13em;text-transform:uppercase;margin-bottom:5px}
.cp-trans__from b{color:var(--ink-muted)}
.cp-trans__to b{color:var(--teal-deep)}
.cp-trans__from p,.cp-trans__to p{font-size:1.02rem;line-height:1.45;color:var(--ink)}
.cp-trans__to p{font-weight:600;color:var(--navy-700)}
.cp-trans__arrow{display:grid;place-items:center;color:var(--gold);flex:none}
.cp-trans__arrow svg{width:22px;height:22px}
@media (max-width:719px){.cp-trans__arrow{justify-content:flex-start}.cp-trans__arrow svg{transform:rotate(90deg)}}

/* ==========================================================================
   Pricing — three plans
   ========================================================================== */

.cp-plans--3{grid-template-columns:1fr}
@media (min-width:980px){.cp-plans--3{grid-template-columns:repeat(3,1fr)}}
@media (min-width:820px) and (max-width:979px){.cp-plans--3{grid-template-columns:1fr}}

.cp-plan__total{
  margin-top:14px;padding-top:14px;border-top:1px dashed var(--warm-line);
  display:flex;justify-content:space-between;gap:12px;align-items:baseline;
  font-size:.98rem;color:var(--ink-2);
}
.cp-plan__total b{font-weight:700;font-variant-numeric:tabular-nums;color:var(--navy-700);font-size:1.1rem}

/* No-refund notice — must be impossible to miss */
.cp-terms{
  margin-top:clamp(26px,3.4vw,40px);
  border:1.5px solid rgba(201,162,39,.45);border-radius:var(--r-lg);
  background:var(--gold-tint);padding:clamp(22px,3vw,30px);
}
.cp-terms h3{
  font-family:var(--font-sans);font-size:.78rem;font-weight:700;
  letter-spacing:.15em;text-transform:uppercase;color:var(--gold-deep);margin:0 0 12px;
}
.cp-terms p{font-size:1.06rem;line-height:1.6;color:var(--ink);max-width:78ch}
.cp-terms p + p{margin-top:10px}
.cp-terms strong{font-weight:700}

/* Buy-now-pay-later strip */
.cp-bnpl{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 14px;justify-content:center;
  margin-top:20px;font-size:.94rem;color:var(--ink-muted);
}
.cp-bnpl span{
  display:inline-flex;align-items:center;gap:7px;
  padding:7px 14px;border-radius:999px;
  background:var(--white);border:1px solid var(--warm-line);
  font-weight:600;color:var(--ink-2);
}

/* Last-CAD-cohort note */
.cp-currency-note{
  display:inline-flex;align-items:center;gap:9px;
  margin-top:14px;padding:8px 16px;border-radius:999px;
  background:var(--teal-tint);border:1px solid rgba(14,124,116,.24);
  font-size:.8rem;font-weight:600;letter-spacing:.04em;color:var(--teal-deep);
}

/* ==========================================================================
   Interac e-Transfer panel
   ========================================================================== */

.cp-etransfer{
  margin-top:clamp(26px,3.4vw,38px);
  background:var(--navy-800);color:var(--on-navy);
  border-radius:var(--r-xl);padding:clamp(26px,3.4vw,40px);
}
.cp-etransfer h3{color:#FFF}
.cp-etransfer .cp-eyebrow{color:var(--gold-bright)}

.cp-etransfer__addr{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px;
  margin:20px 0 4px;padding:16px 20px;border-radius:var(--r);
  background:rgba(255,255,255,.06);border:1px solid rgba(230,198,101,.35);
}
.cp-etransfer__k{
  font-size:.66rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;
  color:var(--on-navy-muted);flex:none;
}
.cp-etransfer__v{
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:clamp(.98rem,.9rem + .4vw,1.2rem);font-weight:600;color:var(--gold-bright);
  word-break:break-all;
}

.cp-steps{display:grid;gap:14px;margin-top:24px;counter-reset:step}
@media (min-width:760px){.cp-steps{grid-template-columns:repeat(2,1fr)}}
.cp-step{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:start}
.cp-step__n{
  width:28px;height:28px;border-radius:50%;flex:none;display:grid;place-items:center;
  background:var(--gold);color:var(--navy-900);
  font-family:var(--font-display);font-size:.94rem;font-weight:600;
}
.cp-step p{font-size:1.06rem;line-height:1.55;color:var(--on-navy-2)}
.cp-step b{color:#FFF;font-weight:600}

.cp-etransfer__warn{
  margin-top:24px;padding:16px 20px;border-radius:var(--r);
  background:rgba(201,162,39,.12);border:1px solid rgba(230,198,101,.3);
  font-size:.96rem;line-height:1.6;color:var(--on-navy-2);
}
.cp-etransfer__warn b{color:var(--gold-bright);font-weight:650}

/* ==========================================================================
   Legal pages
   ========================================================================== */

.cp-legal{max-width:76ch;margin-inline:auto}
.cp-legal h2{
  font-size:clamp(1.3rem,1.15rem + .6vw,1.65rem);margin:clamp(34px,4vw,48px) 0 14px;
  color:var(--navy-700);
}
.cp-legal h2:first-of-type{margin-top:0}
.cp-legal h3{
  font-family:var(--font-sans);font-size:1.06rem;font-weight:650;
  margin:22px 0 8px;color:var(--navy-700);
}
.cp-legal p{margin-bottom:14px;color:var(--ink-2)}
.cp-legal strong{color:var(--ink);font-weight:650}
.cp-legal ul{margin:0 0 16px}
.cp-legal li{position:relative;padding-left:22px;margin-bottom:9px;color:var(--ink-2);line-height:1.6}
.cp-legal li::before{content:"";position:absolute;left:3px;top:.68em;width:5px;height:5px;border-radius:50%;background:var(--gold)}
.cp-legal a{color:var(--gold-deep);font-weight:600}
.cp-legal__meta{
  font-size:.92rem;color:var(--ink-muted);padding-bottom:22px;margin-bottom:8px;
  border-bottom:1px solid var(--warm-line);
}
.cp-legal__key{
  margin:24px 0;padding:20px 24px;border-radius:var(--r-lg);
  background:var(--gold-tint);border:1.5px solid rgba(201,162,39,.45);
}
.cp-legal__key p{color:var(--ink);margin-bottom:10px}
.cp-legal__key p:last-child{margin-bottom:0}

/* ==========================================================================
   Dark-band corrections
   .cp-block inherits light-surface ink colours; on a navy band it has to flip.
   ========================================================================== */

.s-navy .cp-block li,
.s-navy .cp-block p,
.s-navy-deep .cp-block li,
.s-navy-deep .cp-block p,
.cp-hero .cp-block li,
.cp-hero .cp-block p{color:var(--on-navy-2)}

.s-navy .cp-block li::before,
.s-navy-deep .cp-block li::before{background:var(--gold-bright)}

.s-navy .cp-block__h,
.s-navy-deep .cp-block__h{color:var(--gold-bright)}

/* The hero is its own dark band — give it the dark-surface accents. */
.cp-hero .cp-eyebrow{color:var(--gold-bright)}
.cp-hero .cp-muted{color:var(--on-navy-muted)}

/* ==========================================================================
   Self-contained dark panels
   These carry their own navy background but are not .s-navy sections, so the
   light-surface text tokens leaked in. Anything dark gets the dark-surface set.
   ========================================================================== */

.cp-hero,.cp-cohort,.cp-etransfer,.cp-proof,.cp-footer{color-scheme:dark}

.cp-hero .cp-muted,
.cp-cohort .cp-muted,
.cp-etransfer .cp-muted,
.cp-proof .cp-muted,
.cp-footer .cp-muted{color:var(--on-navy-muted)}

.cp-hero .cp-body,
.cp-cohort .cp-body,
.cp-etransfer .cp-body,
.cp-footer .cp-body{color:var(--on-navy-2)}

.cp-hero .cp-lead,
.cp-cohort .cp-lead,
.cp-etransfer .cp-lead{color:var(--on-navy-2)}

.cp-cohort .cp-eyebrow,
.cp-etransfer .cp-eyebrow{color:var(--gold-bright)}

.cp-hero .cp-disclaimer,
.cp-cohort .cp-disclaimer,
.cp-etransfer .cp-disclaimer{background:rgba(255,255,255,.05);color:var(--on-navy-muted)}

/* ==========================================================================
   Buttons, refined
   Square-cut rather than pill, a hairline of light on the top edge, and a
   restrained vertical gradient. No lift on hover — the colour does the work.
   ========================================================================== */

.cp-btn{
  border-radius:3px;
  letter-spacing:.02em;
  padding:16px 30px;
  transition:background var(--dur-fast) var(--ease),color var(--dur-fast) var(--ease),
             border-color var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}
.cp-btn:hover{transform:none}
.cp-btn:active{transform:none}

.cp-btn--gold{
  background:linear-gradient(180deg,#DFBE62,#C9A227);
  color:var(--navy-900);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(6,18,31,.18);
}
.cp-btn--gold:hover{
  background:linear-gradient(180deg,#E9CC76,#D2AC2C);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 2px 6px rgba(6,18,31,.22);
}

.cp-btn--navy{
  background:linear-gradient(180deg,#1B3452,#12263A);
  color:#FFF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 1px 2px rgba(6,18,31,.2);
}
.cp-btn--navy:hover{background:linear-gradient(180deg,#24425F,#18304A)}

.cp-btn--ghost{
  background:rgba(255,255,255,.04);
  border-color:rgba(183,201,221,.34);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08);
}
.cp-btn--ghost:hover{background:rgba(255,255,255,.1);border-color:rgba(230,198,101,.55)}

.cp-btn--outline{border-color:rgba(21,57,95,.28)}
.cp-btn--outline:hover{background:var(--navy-800);color:#FFF;border-color:var(--navy-800)}

.cp-btn--wa{
  background:linear-gradient(180deg,#169A48,#12873F);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.22),0 1px 2px rgba(6,18,31,.2);
}
.cp-btn--wa:hover{background:linear-gradient(180deg,#12873F,#0E6F33)}

/* Nav CTA picks up the same treatment */
.cp-nav__cta{border-radius:3px;letter-spacing:.02em}

/* The floating WhatsApp button stays round — it reads as an affordance, not a CTA */
.cp-fab{box-shadow:inset 0 1px 0 rgba(255,255,255,.2),0 6px 22px -4px rgba(0,0,0,.45)}

/* ==========================================================================
   No hairline grids on dark, and cards that actually lift off the navy
   ========================================================================== */

/* The 1px-gap technique drew visible white lines across the dark bands.
   Replace it with real spacing and give each tile its own surface. */
.cp-method{
  gap:clamp(12px,1.6vw,18px);
  background:transparent;
  border:0;
  border-radius:0;
  overflow:visible;
}
.cp-method__step{
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.045));
  border:1px solid rgba(183,201,221,.22);
  border-radius:var(--r-lg);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 28px -14px rgba(0,0,0,.55);
}

.cp-facts{
  gap:clamp(10px,1.4vw,14px);
  background:transparent;
  border:0;
  border-radius:0;
  overflow:visible;
}
.cp-fact{
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.045));
  border:1px solid rgba(183,201,221,.22);
  border-radius:var(--r);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1);
}

/* Proof bar: drop the dividing rules, let spacing separate the items */
.cp-proof__item{border:0}

/* Cards on a dark band were navy-on-navy and disappeared. Give them a real
   surface, a visible edge, and a top highlight so they read as raised. */
.s-navy .cp-card,
.s-navy-deep .cp-card,
.cp-cohort .cp-card,
.cp-etransfer .cp-card{
  background:linear-gradient(180deg,rgba(255,255,255,.085),rgba(255,255,255,.045));
  border:1px solid rgba(183,201,221,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 12px 32px -16px rgba(0,0,0,.6);
}
.s-navy .cp-card--hover:hover,
.s-navy-deep .cp-card--hover:hover{
  background:linear-gradient(180deg,rgba(255,255,255,.13),rgba(255,255,255,.07));
  border-color:rgba(230,198,101,.5);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16),0 16px 38px -16px rgba(0,0,0,.65);
}

/* The e-Transfer and cohort panels sit on navy too — lift them the same way */
.cp-cohort,.cp-etransfer{
  border-color:rgba(183,201,221,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 18px 48px -24px rgba(0,0,0,.65);
}

/* Deliverable block inside the curriculum sits on white — keep it navy but raised */
.cp-block--build{box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 26px -14px rgba(10,30,54,.45)}

/* ==========================================================================
   Pricing — what a plan does not include
   ========================================================================== */

.cp-plan__no{color:var(--ink-muted)!important;opacity:.85}
.cp-plan__no svg{color:var(--ink-muted)!important}

/* ==========================================================================
   Cohort details — these were too small for the most-read facts on the page
   ========================================================================== */

.cp-fact{padding:22px 24px}
.cp-fact__k{
  font-size:.74rem;letter-spacing:.14em;
  color:var(--gold-bright);margin-bottom:10px;
}
.cp-fact__v{
  font-size:clamp(1.28rem,1.1rem + .55vw,1.55rem);
  font-weight:500;line-height:1.25;
}
.cp-fact__v small{
  font-size:clamp(.94rem,.9rem + .18vw,1.02rem);
  margin-top:6px;color:var(--on-navy-2);
}

/* The 7 weeks + 6 months value line carries the offer — give it presence */
.cp-valueline{padding:clamp(24px,3vw,32px)}
.cp-valueline__k{font-size:clamp(1.22rem,1.06rem + .6vw,1.55rem)}
.cp-valueline__s{font-size:clamp(.94rem,.9rem + .2vw,1.04rem);margin-top:8px}
.cp-valueline__x{font-size:2rem}

/* Cohort badge and requirement chips, slightly larger */
.cp-cohort__badge{font-size:.76rem;padding:9px 18px}
.cp-req{font-size:.84rem;padding:10px 18px 10px 15px}

/* Visually hidden, still read aloud */
.cp-sr{
  position:absolute;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;
}

/* ==========================================================================
   Depth pass
   Flat text on flat bands was the problem. Warm sections get a soft gradient
   wash, light cards get a real edge and lift, and section headers get a
   deliberate rhythm instead of sitting loose on the page.
   ========================================================================== */

/* --- section surfaces get subtle dimension instead of a single flat fill --- */
.s-warm{
  background:
    radial-gradient(75% 60% at 10% 0%,rgba(21,57,95,.055),transparent 64%),
    radial-gradient(55% 45% at 96% 100%,rgba(14,124,116,.04),transparent 60%),
    var(--warm);
}
.s-white{
  background:
    radial-gradient(60% 45% at 92% 0%,rgba(21,57,95,.035),transparent 62%),
    var(--white);
}

/* --- light cards: an edge you can see, and a shadow that lifts them --- */
.cp-card{
  border-color:rgba(21,57,95,.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 1px 2px rgba(10,30,54,.05),
    0 14px 30px -18px rgba(10,30,54,.28);
}
.cp-card--hover:hover{
  transform:translateY(-3px);
  border-color:rgba(201,162,39,.55);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 4px rgba(10,30,54,.06),
    0 26px 48px -22px rgba(10,30,54,.36);
}

/* --- portfolio tiles: give them presence and a gold edge on hover --- */
.cp-build{
  border-color:rgba(21,57,95,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 20px -14px rgba(10,30,54,.28);
}
.cp-build:hover{
  transform:translateY(-3px);
  border-color:rgba(201,162,39,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 18px 34px -18px rgba(10,30,54,.34);
}
.cp-build__i{
  background:linear-gradient(180deg,#FAF2D8,#F2E5BC);
  border:1px solid rgba(201,162,39,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.8);
}

/* --- role cards (CRA/CTM/CPM): the tag becomes a real masthead --- */
.cp-role__tag{
  font-size:1.75rem;letter-spacing:-.02em;
  padding-bottom:14px;border-bottom:2px solid var(--gold);
  width:100%;
}
.cp-role__q{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.1),0 10px 26px -16px rgba(10,30,54,.5);
}

/* --- comparison table: lift it off the page --- */
.cp-compare{
  box-shadow:0 2px 4px rgba(10,30,54,.05),0 24px 50px -28px rgba(10,30,54,.35);
  border-color:rgba(21,57,95,.12);
}
.cp-compare__head{box-shadow:0 -2px 0 rgba(21,57,95,.06)}
.cp-compare__h{box-shadow:inset 0 1px 0 rgba(255,255,255,.12)}
.cp-compare__cell--win{
  background:linear-gradient(180deg,rgba(14,124,116,.07),rgba(14,124,116,.03));
}

/* --- skill transposition rows --- */
.cp-trans__row{
  border-color:rgba(21,57,95,.12);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 20px -16px rgba(10,30,54,.26);
}
.cp-trans__row:hover{
  transform:translateY(-2px);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.95),0 16px 32px -18px rgba(10,30,54,.32);
}

/* --- section headers: a hairline rule above the eyebrow sets the rhythm --- */
.cp-split{position:relative}
.cp-section > .cp-wrap > .cp-split::before,
.cp-section > .cp-wrap > .cp-price-head::before{
  content:"";display:block;width:100%;height:1px;
  background:linear-gradient(90deg,rgba(201,162,39,.45),rgba(201,162,39,0) 38%);
  margin-bottom:clamp(26px,3.2vw,40px);
  grid-column:1/-1;
}
.s-navy .cp-section > .cp-wrap > .cp-split::before{
  background:linear-gradient(90deg,rgba(230,198,101,.5),rgba(230,198,101,0) 38%);
}

/* --- pricing cards --- */
.cp-plan{
  border-color:rgba(21,57,95,.13);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.9),
    0 2px 4px rgba(10,30,54,.05),
    0 22px 44px -24px rgba(10,30,54,.32);
}
.cp-plan--feature{
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.95),
    0 2px 6px rgba(201,162,39,.16),
    0 30px 60px -28px rgba(10,30,54,.4);
}

/* --- curriculum panel --- */
@media (min-width:940px){
  .cp-cur__body{
    border-color:rgba(21,57,95,.12);
    box-shadow:
      inset 0 1px 0 rgba(255,255,255,.9),
      0 2px 4px rgba(10,30,54,.05),
      0 28px 56px -30px rgba(10,30,54,.34);
  }
}
.cp-cur__tab[aria-selected="true"]{
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 8px 20px -14px rgba(10,30,54,.3);
  border-color:rgba(201,162,39,.4);
}

/* --- career ladder: give the rungs weight --- */
.cp-rung__dot{box-shadow:0 0 0 4px rgba(201,162,39,.14)}
.cp-rung--entry .cp-rung__dot{box-shadow:0 0 0 5px rgba(201,162,39,.22)}

/* --- FAQ rows respond --- */
.cp-faq__item{transition:background var(--dur-fast) var(--ease)}
.cp-faq__item:hover{background:rgba(201,162,39,.035)}

/* --- disclaimers read as notes, not paragraphs --- */
.cp-disclaimer{
  background:linear-gradient(90deg,rgba(201,162,39,.09),rgba(201,162,39,.03));
  border-left-width:3px;
}

/* ==========================================================================
   Light bands, finished properly
   A hairline at the top edge of each light band, so a section reads as a
   deliberate panel rather than a colour change.
   ========================================================================== */

.s-warm{position:relative}
.s-warm::before,
.s-warm::after{
  content:"";position:absolute;left:0;right:0;height:1px;
  background:linear-gradient(90deg,rgba(21,57,95,0),rgba(21,57,95,.12) 20%,rgba(21,57,95,.12) 80%,rgba(21,57,95,0));
}
.s-warm::before{top:0}
.s-warm::after{bottom:0}

/* Warm-surface cards need a touch more edge now the background is cooler */
.s-warm .cp-card,
.s-warm .cp-build,
.s-warm .cp-trans__row{
  background:#FFF;
  border-color:rgba(21,57,95,.11);
  box-shadow:inset 0 1px 0 #FFF,0 1px 2px rgba(10,30,54,.04),0 16px 34px -20px rgba(10,30,54,.3);
}

/* Gold tint blocks stay gold — that is the accent, not the surface */
.cp-block--ai{background:linear-gradient(180deg,#FBF5E4,#F6EED9)}

/* The disclaimer note reads cooler now too */
.cp-disclaimer{
  background:linear-gradient(90deg,rgba(21,57,95,.05),rgba(21,57,95,.02));
  border-left-color:var(--gold);
}
.cp-terms{background:linear-gradient(180deg,#FBF5E4,#F6EED9)}

/* ==========================================================================
   No ivory anywhere
   Gold now shows as an edge, a rule or type — never as a filled cream panel.
   ========================================================================== */

/* AI block in the curriculum: white card, gold edge, gold heading */
.cp-block--ai{
  background:#FFF;
  border:1px solid rgba(201,162,39,.4);
  box-shadow:inset 0 1px 0 #FFF,0 10px 26px -18px rgba(10,30,54,.3);
  position:relative;
}
.cp-block--ai::before{
  content:"";position:absolute;left:0;top:0;bottom:0;width:3px;
  background:linear-gradient(180deg,var(--gold-bright),var(--gold));
  border-radius:var(--r) 0 0 var(--r);
}

/* Terms notice: white, with a gold rule rather than a cream fill */
.cp-terms{
  background:#FFF;
  border:1px solid rgba(201,162,39,.45);
  border-left:4px solid var(--gold);
  box-shadow:inset 0 1px 0 #FFF,0 14px 32px -20px rgba(10,30,54,.3);
}

/* Pivot label: outline, not fill */
.cp-pivot{
  background:#FFF;
  border:1px solid rgba(201,162,39,.5);
  color:var(--gold-deep);
}
.s-navy .cp-pivot{background:rgba(255,255,255,.06);border-color:rgba(230,198,101,.4)}

/* Portfolio tile icons: cool surface, gold mark */
.cp-build__i{
  background:linear-gradient(180deg,#FFFFFF,#F2F6FB);
  border:1px solid rgba(201,162,39,.35);
  color:var(--gold-deep);
  box-shadow:inset 0 1px 0 #FFF;
}

/* The currency note reads cleaner as an outline too */
.cp-currency-note{
  background:#FFF;
  border:1px solid rgba(14,124,116,.35);
}
.cp-plan__save{background:#FFF;border:1px solid rgba(14,124,116,.35)}

/* Single pricing card sits centred rather than stretched across the grid */
.cp-plans--single{grid-template-columns:1fr;max-width:560px;margin-inline:auto}

/* ==========================================================================
   Nav: a deep, near-black bar so it reads as a masthead rather than a
   washed-out blue band sitting on top of the navy hero.
   ========================================================================== */

.cp-nav{
  background:linear-gradient(180deg,#060F1C,#040A14);
  backdrop-filter:none;
  -webkit-backdrop-filter:none;
  border-bottom:1px solid rgba(201,162,39,.28);
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset;
}
.cp-nav.is-stuck{
  background:rgba(4,10,20,.95);
  backdrop-filter:saturate(160%) blur(16px);
  -webkit-backdrop-filter:saturate(160%) blur(16px);
  border-bottom-color:rgba(201,162,39,.38);
  box-shadow:0 12px 32px -18px rgba(0,0,0,.85);
}
.cp-nav__links a{color:#B7C9DD}
.cp-nav__links a:hover{color:#FFF}
.cp-drawer{background:#040A14}

/* ==========================================================================
   Career ladder: was one narrow column with half the page empty
   ========================================================================== */

.cp-path-wrap{display:grid;gap:clamp(24px,4vw,64px);grid-template-columns:1fr}
@media (min-width:900px){
  .cp-path-wrap{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);align-items:start}
  .cp-path-wrap > .cp-path-head{position:sticky;top:calc(var(--nav-h) + 28px)}
}
.cp-path{
  background:#FFF;
  border:1px solid rgba(21,57,95,.12);
  border-radius:var(--r-xl);
  padding:clamp(24px,3vw,38px);
  box-shadow:inset 0 1px 0 #FFF,0 2px 4px rgba(10,30,54,.05),0 24px 50px -28px rgba(10,30,54,.34);
}
.cp-rung{padding:16px 0}
.cp-rung:first-child{padding-top:0}
.cp-rung:last-child{padding-bottom:0}

/* ==========================================================================
   Photography
   Rule for every photo on this site: the image is atmosphere, never the thing
   that makes text legible. Dark sections keep a navy scrim on top so contrast
   survives even if an image fails to load or is swapped for a lighter one.
   ========================================================================== */

/* --- Hero: photograph behind the headline ------------------------------- */
.cp-hero__photo{position:absolute;inset:0;z-index:0;overflow:hidden}
.cp-hero__photo img{
  width:100%;height:100%;object-fit:cover;object-position:68% 30%;
  opacity:.95;
}
.cp-hero__photo::after{
  content:"";position:absolute;inset:0;
  background:
    linear-gradient(100deg,rgba(6,18,31,.97) 0%,rgba(6,18,31,.93) 32%,rgba(6,18,31,.7) 58%,rgba(6,18,31,.42) 100%),
    radial-gradient(70% 60% at 92% 8%,rgba(201,162,39,.16),transparent 62%);
}
/* Most traffic arrives on a phone, where the headline covers the whole frame —
   drop the photo back further so nothing competes with the type. */
@media (max-width:860px){
  .cp-hero__photo img{opacity:.7;object-position:72% 26%}
  .cp-hero__photo::after{
    background:linear-gradient(180deg,rgba(6,18,31,.88) 0%,rgba(6,18,31,.94) 48%,rgba(6,18,31,.97) 100%);
  }
}

/* --- Figures on light surfaces ------------------------------------------ */
.cp-figure{margin:0;position:relative}
.cp-figure img{
  display:block;width:100%;height:auto;border-radius:var(--r-xl);
  box-shadow:0 1px 2px rgba(6,18,31,.08),0 18px 40px -18px rgba(6,18,31,.34);
}
.cp-figure figcaption{
  margin-top:14px;font-size:.86rem;line-height:1.5;
  color:var(--ink-muted);letter-spacing:.01em;
}
.cp-figure--tall{margin-top:clamp(24px,3vw,34px)}
.cp-figure--tall img{aspect-ratio:16/10;object-fit:cover;object-position:50% 26%}
/* On desktop this figure sits under the sticky heading, beside the career
   ladder. A portrait crop made the left column tower over the ladder and left
   a dead half-page, so it stays landscape and the upward line carries the idea. */
@media (min-width:900px){
  .cp-figure--tall img{aspect-ratio:4/3;object-position:50% 58%}
}

/* --- Photo band: image behind a navy section ---------------------------- */
.cp-band-photo{position:relative;overflow:hidden}
.cp-band-photo > .cp-wrap{position:relative;z-index:1}
.cp-band-photo__img{position:absolute;inset:0;z-index:0}
.cp-band-photo__img img{
  width:100%;height:100%;object-fit:cover;object-position:50% 45%;opacity:.5;
}
.cp-band-photo__img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(95deg,rgba(6,18,31,.96) 0%,rgba(6,18,31,.9) 46%,rgba(6,18,31,.8) 100%);
}
@media (max-width:860px){
  .cp-band-photo__img img{opacity:.32}
  .cp-band-photo__img::after{background:linear-gradient(180deg,rgba(6,18,31,.9),rgba(6,18,31,.96))}
}

/* --- Instructor ---------------------------------------------------------- */
/* A real studio portrait with a warm backdrop sits on a white panel so the
   warmth reads as a framed photograph rather than a clash with the page. */
.cp-instructor{
  margin-top:clamp(26px,3.4vw,40px);
  display:grid;gap:clamp(22px,3vw,34px);grid-template-columns:1fr;
  align-items:stretch;
  background:#FFF;border:1px solid rgba(21,57,95,.12);border-radius:var(--r-xl);
  padding:clamp(22px,3vw,34px);
  box-shadow:0 1px 2px rgba(6,18,31,.06),0 22px 48px -26px rgba(6,18,31,.3);
}
.cp-instructor__photo{margin:0;min-width:0}
.cp-instructor__photo img{
  display:block;width:100%;height:auto;border-radius:calc(var(--r-xl) - 8px);
  box-shadow:0 12px 30px -16px rgba(6,18,31,.42);
}
/* Must come after the base rule above: same specificity, so source order wins.
   The portrait stretches to whatever height the copy needs, which is why neither
   column ends in a band of empty white. It is a portrait crop, so covering a
   taller box simply shows more of the frame. */
@media (min-width:820px){
  .cp-instructor{grid-template-columns:minmax(0,320px) minmax(0,1fr);gap:clamp(28px,4vw,48px)}
  /* height:100% on the image will not resolve reliably against a stretched grid
     item, so the figure carries the frame and the image fills it absolutely. */
  .cp-instructor__photo{
    position:relative;overflow:hidden;
    border-radius:calc(var(--r-xl) - 8px);
    box-shadow:0 12px 30px -16px rgba(6,18,31,.42);
  }
  .cp-instructor__photo img{
    position:absolute;inset:0;width:100%;height:100%;
    object-fit:cover;object-position:50% 16%;
    border-radius:0;box-shadow:none;
  }
}
.cp-instructor__body{min-width:0}
.cp-instructor__name{
  margin:8px 0 0;font-family:var(--font-display);font-weight:600;
  font-size:var(--t-h3);line-height:1.12;color:var(--ink);letter-spacing:-.018em;
}
.cp-instructor__body .cp-body{font-size:1rem}
.cp-creds{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.cp-creds li{
  font-size:.78rem;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--gold-deep);background:rgba(201,162,39,.09);
  border:1px solid rgba(201,162,39,.3);border-radius:999px;padding:6px 12px;
}

/* --- Career pathways: the long view -------------------------------------- */
/* Folded in from its own full-width band. The ladder column ran short and left
   a dead half-screen beside it; this fills that and removes a section break.
   Text uses its own classes, not .cp-body / .cp-disclaimer, because those carry
   light-surface colours and would render dark-on-dark inside this panel. */
.cp-path-col{min-width:0;display:grid;gap:clamp(18px,2.4vw,28px);align-content:start}
.cp-longview{
  position:relative;overflow:hidden;border-radius:var(--r-xl);
  background:linear-gradient(168deg,var(--navy-800),var(--navy-900));
  padding:clamp(22px,3vw,34px);
}
.cp-longview__img{position:absolute;inset:0;z-index:0}
.cp-longview__img img{width:100%;height:100%;object-fit:cover;object-position:50% 45%;opacity:.4}
.cp-longview__img::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(120deg,rgba(6,18,31,.94),rgba(6,18,31,.76));
}
.cp-longview__body{position:relative;z-index:1}
.cp-longview .cp-eyebrow{color:var(--gold-bright)}
.cp-longview__h{
  margin:8px 0 0;font-family:var(--font-display);font-weight:600;
  font-size:var(--t-h3);line-height:1.12;color:#FFF;letter-spacing:-.02em;
}
.cp-longview__h .cp-em{color:var(--gold-bright);font-style:italic;font-weight:400}
.cp-longview__p{margin:14px 0 0;font-size:1rem;line-height:1.62;color:var(--on-navy-2)}
.cp-longview__note{
  margin:16px 0 0;padding-left:14px;border-left:2px solid rgba(201,162,39,.55);
  font-size:.86rem;line-height:1.55;color:var(--on-navy-muted);
}

/* --- Method tiles on a light surface -------------------------------------
   These were built for the navy band. Now that the four steps open the
   curriculum section they sit on white, where the inherited translucent-white
   fill and #FFF labels render invisible. This variant gives them real ink. */
.cp-method--light .cp-method__step{
  background:#FFF;
  border:1px solid rgba(21,57,95,.14);
  box-shadow:inset 0 1px 0 #FFF,0 1px 2px rgba(6,18,31,.05),0 14px 32px -22px rgba(6,18,31,.3);
}
.cp-method--light .cp-method__n{color:var(--gold-deep);opacity:1}
.cp-method--light .cp-method__step h3{color:var(--ink)}
.cp-method--light .cp-method__step p{color:var(--ink-2)}

/* --- What tuition covers, shown before the number ------------------------ */
/* Lives on .s-navy-deep, so every colour here is explicit: .cp-body and
   friends carry light-surface ink and would vanish on this background. */
.cp-includes{margin-top:clamp(26px,3.4vw,36px)}
.cp-includes__k{
  margin:0 0 14px;font-size:.78rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-bright);
}
.cp-includes__list{
  list-style:none;margin:0;padding:0;
  display:grid;gap:10px 28px;grid-template-columns:1fr;
}
@media (min-width:720px){.cp-includes__list{grid-template-columns:1fr 1fr}}
.cp-includes__list li{
  position:relative;padding-left:26px;
  font-size:1rem;line-height:1.5;color:var(--on-navy-2);
}
.cp-includes__list li::before{
  content:"";position:absolute;left:0;top:.5em;
  width:8px;height:8px;border-radius:50%;
  border:2px solid var(--gold);
}

/* --- Honest expectations, closing the who-it-is-for section --------------- */
.cp-honest{
  margin-top:clamp(30px,4vw,48px);
  display:grid;gap:clamp(20px,3vw,40px);grid-template-columns:1fr;
}
@media (min-width:820px){.cp-honest{grid-template-columns:1fr 1fr}}
.cp-honest > div{padding-left:18px;border-left:2px solid rgba(201,162,39,.5)}
.cp-honest__k{
  margin:0 0 10px;font-size:.78rem;font-weight:600;letter-spacing:.14em;
  text-transform:uppercase;color:var(--gold-deep);
}
.cp-honest__p{margin:0;font-size:1rem;line-height:1.62;color:var(--ink-2)}

/* --- The five-stage progression above the week tabs ---------------------- */
.cp-phases{
  list-style:none;margin:0 0 clamp(16px,2vw,22px);padding:0;
  display:grid;gap:10px;grid-template-columns:1fr;
  counter-reset:none;
}
@media (min-width:700px){.cp-phases{grid-template-columns:repeat(5,1fr);gap:8px}}
.cp-phases li{
  display:flex;align-items:baseline;gap:9px;min-width:0;
  padding:13px 15px;border-radius:var(--r-sm);
  background:#FFF;border:1px solid rgba(21,57,95,.13);
  font-size:.92rem;line-height:1.35;color:var(--ink);font-weight:500;
}
.cp-phases li span{
  font-family:var(--font-display);font-size:1rem;font-weight:600;
  color:var(--gold-deep);font-variant-numeric:tabular-nums;flex:none;
}
.cp-phases__note{
  margin:0 0 clamp(28px,3.6vw,42px);max-width:78ch;
  font-size:.95rem;line-height:1.62;color:var(--ink-muted);
}

/* ==========================================================================
   Masthead — white, and larger
   A near-black bar sitting directly on a near-black hero read as a thin dark
   strip with nothing holding it. White gives the top of the page a hard edge,
   lets the gold mark and the Enroll button carry, and matches the rest of the
   site, which is mostly light. The bar now separates from the hero instead of
   dissolving into it.
   ========================================================================== */
:root{--nav-h:84px}
@media (max-width:860px){:root{--nav-h:72px}}

.cp-nav{
  background:#FFF;
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom:1px solid rgba(21,57,95,.12);
  box-shadow:none;
}
.cp-nav.is-stuck{
  background:rgba(255,255,255,.94);
  backdrop-filter:saturate(180%) blur(16px);
  -webkit-backdrop-filter:saturate(180%) blur(16px);
  border-bottom-color:rgba(21,57,95,.14);
  box-shadow:0 10px 30px -22px rgba(6,18,31,.55);
}

.cp-logo{gap:13px}
.cp-logo__mark{width:40px;height:40px;border-radius:10px;font-size:1.02rem}
.cp-logo__text{color:var(--ink);font-size:1.24rem}

.cp-nav__links{gap:30px}
.cp-nav__links a{color:var(--ink-2);font-size:1rem}
.cp-nav__links a:hover{color:var(--ink)}

.cp-nav__cta{
  background:linear-gradient(180deg,#DFBE62,#C9A227);
  border-color:transparent;color:var(--navy-900);
  font-size:.9rem;padding:13px 26px;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 1px 2px rgba(6,18,31,.18);
}
.cp-nav__cta:hover{background:var(--gold-deep);color:#FFF}

.cp-burger span{background:var(--ink)}

/* The drawer hangs off the bar, so it follows it. */
.cp-drawer{background:#FFF}
.cp-drawer a:not(.cp-btn){color:var(--ink);border-bottom-color:rgba(21,57,95,.1)}

/* ==========================================================================
   Masthead — gold
   White read as flat and, next to the warm hero, closer to cream than to
   white. The bar is now the brand gold with navy on top: the same pairing as
   every gold button on the site, just inverted in scale. Everything that was
   gold inside the bar has to flip to navy, or it disappears into the ground.
   ========================================================================== */
.cp-nav{
  background:linear-gradient(180deg,#E3C468,#C9A227);
  border-bottom:1px solid rgba(6,18,31,.22);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.5);
}
.cp-nav.is-stuck{
  background:linear-gradient(180deg,#DCBB58,#BE991F);
  backdrop-filter:none;-webkit-backdrop-filter:none;
  border-bottom-color:rgba(6,18,31,.3);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.45),0 12px 30px -20px rgba(6,18,31,.6);
}

/* The mark was a gold tile on white; on gold it needs to become the navy. */
.cp-logo__mark{
  background:var(--navy-800);
  color:var(--gold-bright);
  box-shadow:0 1px 2px rgba(6,18,31,.25);
}
.cp-logo__text{color:var(--navy-900)}

.cp-nav__links a{color:var(--navy-800);font-weight:600}
.cp-nav__links a:hover{color:var(--navy-900)}
.cp-nav__links a::after{background:var(--navy-900)}

/* Gold on gold is invisible, so the CTA inverts: solid navy, white type. */
.cp-nav__cta{
  background:var(--navy-800);
  border-color:transparent;color:#FFF;
  box-shadow:0 1px 2px rgba(6,18,31,.28);
}
.cp-nav__cta:hover{background:var(--navy-900);color:var(--gold-bright)}

.cp-burger span{background:var(--navy-900)}

/* A full screen of gold is too much, so the drawer goes back to navy. */
.cp-drawer{background:var(--navy-900)}
.cp-drawer a:not(.cp-btn){color:var(--on-navy);border-bottom-color:rgba(183,201,221,.12)}

/* ==========================================================================
   Premium pass — air, not ornament
   A full-page thumbnail showed twelve card grids running one after another
   with almost identical weight. Nothing here changes the structure; it gives
   the same content more room and takes the hard edges off, so the page reads
   as panels of air rather than a stack of boxes.
   ========================================================================== */

/* 1. Cards had a visible 1px border AND a shadow. Two separation devices doing
      one job is what makes a card read as a box. Keep the shadow, all but
      retire the border. */
.cp-card{
  border-color:rgba(21,57,95,.07);
  padding:clamp(24px,3.2vw,38px);
  box-shadow:0 1px 2px rgba(10,30,54,.04),0 18px 36px -24px rgba(10,30,54,.22);
}
.cp-card--hover:hover{
  transform:translateY(-3px);
  box-shadow:0 2px 4px rgba(10,30,54,.05),0 26px 50px -26px rgba(10,30,54,.3);
  border-color:rgba(201,162,39,.32);
}

/* 2. Grids were tighter than the cards inside them, which reads as crowding. */
.cp-grid{gap:clamp(16px,2.4vw,30px)}

/* 3. The eyebrow rule repeats at the top of nearly every section. At full
      strength it became a tick mark running down the whole page. */
.cp-eyebrow{margin-bottom:20px}
.cp-eyebrow::after{flex-basis:22px;opacity:.28}

/* 4. Section headings now sit further from the copy beneath them. Space under
      a heading is the cheapest signal of confidence a page has. */
.cp-h2{margin-bottom:22px}

/* 5. `overflow-wrap:break-word` is a safety net against overflow, but on the
      narrow four-up cards it was snapping long words mid-syllable — the page
      was rendering "Communicati / on". Hyphenation gives the browser a proper
      break point first, and the hard break stays as the last resort. */
.cp-card,
.cp-h2,.cp-h3,.cp-lead,.cp-body{hyphens:auto;-webkit-hyphens:auto}
/* Single-word tiles get a touch more room before they need breaking at all. */
.cp-grid--4 .cp-card{padding-inline:clamp(18px,2.2vw,26px)}
.cp-grid--4 .cp-card .cp-h3{font-size:clamp(1.08rem,.98rem + .5vw,1.34rem)}

/* ==========================================================================
   Structure pass — fewer grids, one moment of rest
   ========================================================================== */

/* --- The premise: a navy band carrying one sentence and nothing else ------
   Between the hero and the AI section the page ran light for seven screens
   with no tonal change. This is the pause. It deliberately has no cards, no
   list and no call to action. */
.cp-statement{padding-block:clamp(56px,8vw,104px)}
.cp-statement__p{
  margin:0;max-width:26ch;
  font-family:var(--font-display);font-weight:500;
  font-size:clamp(1.62rem,1.2rem + 1.9vw,2.9rem);
  line-height:1.2;letter-spacing:-.025em;color:#FFF;
}
.cp-statement__p em{font-style:italic;font-weight:400;color:var(--gold-bright)}

/* --- Mentor points: three cards became three rules ------------------------
   Same three ideas, no card chrome. A gold rule carries them instead. */
.cp-points{
  list-style:none;margin:clamp(28px,4vw,44px) 0 0;padding:0;
  display:grid;gap:clamp(22px,3vw,40px);grid-template-columns:1fr;
}
@media (min-width:760px){.cp-points{grid-template-columns:repeat(3,1fr)}}
.cp-points li{padding-left:20px;border-left:2px solid rgba(201,162,39,.55);min-width:0}
.cp-points__k{
  margin:0 0 10px;font-family:var(--font-display);font-weight:600;
  font-size:var(--t-h3);line-height:1.2;color:var(--ink);letter-spacing:-.015em;
}
.cp-points__p{margin:0;font-size:1rem;line-height:1.6;color:var(--ink-2)}

/* --- Roles: three boxes became three editorial rows ----------------------- */
.cp-roles{list-style:none;margin:0;padding:0}
.cp-role2{
  display:grid;gap:6px 36px;grid-template-columns:1fr;
  padding:clamp(24px,3vw,34px) 0;
  border-top:1px solid rgba(21,57,95,.12);
}
.cp-role2:last-child{border-bottom:1px solid rgba(21,57,95,.12)}
@media (min-width:760px){.cp-role2{grid-template-columns:minmax(0,150px) minmax(0,1fr)}}
.cp-role2__tag{
  margin:0;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.6rem,1.3rem + 1vw,2.1rem);line-height:1;
  color:var(--gold-deep);letter-spacing:-.02em;
}
.cp-role2 > div{min-width:0}
.cp-role2__lead{
  margin:0;font-size:clamp(1.06rem,1rem + .3vw,1.22rem);line-height:1.45;
  color:var(--ink);font-weight:500;
}
.cp-role2__focus{margin:10px 0 0;font-size:.95rem;line-height:1.6;color:var(--ink-muted)}
.cp-role2__q{
  margin:14px 0 0;font-family:var(--font-display);font-style:italic;
  font-size:1.08rem;line-height:1.4;color:var(--ink-2);
}

/* --- Requirement chips: solid, not tinted ---------------------------------
   These sat over the hero photograph as a translucent teal pill with pale
   teal type. Against a busy dark image the words lost their edges. They are
   the two strongest hooks on the page, so they now sit on solid white with
   navy type — the only opaque light element in the hero, which is the point. */
.cp-req{
  background:#FFF;
  border-color:transparent;
  color:var(--navy-900);
  font-weight:700;
  box-shadow:0 1px 2px rgba(6,18,31,.18),0 10px 24px -16px rgba(6,18,31,.6);
}
.cp-req svg{color:var(--teal-deep);stroke-width:3}
/* On light sections the white pill would vanish, so it keeps its tint there. */
.s-white .cp-req,.s-warm .cp-req,.s-warm-2 .cp-req{
  background:var(--teal-tint);
  border:1px solid rgba(14,124,116,.24);
  color:var(--teal-deep);
  box-shadow:none;
}

/* --- Hero panels: solid, not a wash ----------------------------------------
   .cp-fact was an 8.5% white overlay and .cp-valueline a 9% gold one. Over the
   photograph of a lit building the windows came straight through the boxes and
   took the type with them. Both are now solid white cards with navy type, the
   same treatment as the requirement pills above them, so they lift off the
   photo instead of dissolving into it. */
.cp-hero .cp-fact{
  background:#FFFFFF;
  border:1px solid rgba(255,255,255,.9);
  box-shadow:0 1px 2px rgba(6,18,31,.18),0 18px 40px -18px rgba(6,18,31,.75);
}
.cp-hero .cp-fact__k{color:var(--gold-deep);opacity:1}
.cp-hero .cp-fact__v{color:var(--navy-900)}
.cp-hero .cp-fact__v small{color:#4A5E75}

.cp-hero .cp-valueline{
  background:#FFFFFF;
  border:1px solid rgba(255,255,255,.9);
  border-left:4px solid var(--gold);
  box-shadow:0 1px 2px rgba(6,18,31,.18),0 18px 40px -18px rgba(6,18,31,.75);
}
.cp-hero .cp-valueline__k{color:var(--navy-900)}
.cp-hero .cp-valueline__s{color:#4A5E75}
.cp-hero .cp-valueline__x{color:var(--gold-deep)}

/* The note under the cards sat on the photo with nothing behind it. */
.cp-hero__meta{color:var(--on-navy)}

/* And the photo itself: a touch more navy over the right half so the type
   column and the cards have a calmer field behind them. */
@media (min-width:861px){
  .cp-hero__photo::after{
    background:
      linear-gradient(100deg,rgba(6,18,31,.97) 0%,rgba(6,18,31,.94) 36%,rgba(6,18,31,.78) 60%,rgba(6,18,31,.55) 100%),
      radial-gradient(70% 60% at 92% 8%,rgba(201,162,39,.14),transparent 62%);
  }
}

/* --- Secondary button: opaque -------------------------------------------
   .cp-btn--ghost was a 4% white film. Same failure as the fact panels: over
   the hero photograph the building showed through the button. It is now the
   same solid navy as those panels, a step lighter so it still reads as
   pressable, and clearly second to the gold primary beside it. */
.cp-btn--ghost{
  background:#132C46;
  border-color:rgba(183,201,221,.3);
  color:#FFF;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.08),0 10px 24px -16px rgba(0,0,0,.8);
}
.cp-btn--ghost:hover{
  background:#1B3A5A;
  border-color:rgba(230,198,101,.6);
  color:#FFF;
}

/* --- Requirement chips: gold lining, and a slow breath --------------------
   Plain white pills read as system UI. A gold edge ties them to the brand and
   a very slow halo keeps them alive without pulling focus from the headline.
   The motion is deliberately near-subliminal — 7s, 3px of travel, staggered so
   the two never move together. Anything faster on the first screen reads as a
   banner ad rather than a premium page. */
.cp-req{
  position:relative;
  border:1px solid rgba(201,162,39,.75);
  box-shadow:
    0 0 0 3px rgba(201,162,39,.16),
    0 1px 2px rgba(6,18,31,.2),
    0 12px 26px -16px rgba(6,18,31,.7);
  transition:transform var(--dur-fast) var(--ease),box-shadow var(--dur-fast) var(--ease);
}

@media (prefers-reduced-motion:no-preference){
  .cp-req{animation:cp-chip-float 7s var(--ease) infinite}
  .cp-reqs .cp-req:nth-child(2){animation-delay:-3.5s}
}
@keyframes cp-chip-float{
  0%,100%{
    transform:translateY(0);
    box-shadow:
      0 0 0 3px rgba(201,162,39,.16),
      0 1px 2px rgba(6,18,31,.2),
      0 12px 26px -16px rgba(6,18,31,.7);
  }
  50%{
    transform:translateY(-3px);
    box-shadow:
      0 0 0 5px rgba(201,162,39,.26),
      0 2px 4px rgba(6,18,31,.22),
      0 18px 34px -18px rgba(6,18,31,.75);
  }
}

.cp-req:hover{
  transform:translateY(-3px);
  box-shadow:
    0 0 0 5px rgba(201,162,39,.34),
    0 2px 4px rgba(6,18,31,.22),
    0 20px 38px -18px rgba(6,18,31,.8);
}

/* On light sections the tinted version keeps its own edge and stays still. */
.s-white .cp-req,.s-warm .cp-req,.s-warm-2 .cp-req{
  animation:none;border-color:rgba(14,124,116,.32);box-shadow:none;
}

/* --- Hero cards: gold lining and a staggered entrance ---------------------
   The white cards read as plain system panels. A gold top rule and a warm
   edge tie them to the brand; they rise in sequence on load so the hero
   assembles rather than appearing all at once. This is a one-shot entrance,
   not a loop — four cards breathing under two floating pills would be busy. */
.cp-hero .cp-fact{
  position:relative;overflow:hidden;
  border:1px solid rgba(201,162,39,.45);
  box-shadow:
    0 0 0 3px rgba(201,162,39,.1),
    0 1px 2px rgba(6,18,31,.18),
    0 18px 40px -18px rgba(6,18,31,.75);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
/* The gold rule across the top edge. */
.cp-hero .cp-fact::before{
  content:"";position:absolute;inset:0 0 auto 0;height:3px;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold-bright) 55%,var(--gold));
}
.cp-hero .cp-fact:hover{
  transform:translateY(-4px);
  box-shadow:
    0 0 0 4px rgba(201,162,39,.2),
    0 2px 4px rgba(6,18,31,.2),
    0 26px 52px -20px rgba(6,18,31,.8);
}

.cp-hero .cp-valueline{
  border:1px solid rgba(201,162,39,.45);
  border-left:4px solid var(--gold);
  box-shadow:
    0 0 0 3px rgba(201,162,39,.1),
    0 1px 2px rgba(6,18,31,.18),
    0 18px 40px -18px rgba(6,18,31,.75);
  transition:transform var(--dur) var(--ease),box-shadow var(--dur) var(--ease);
}
.cp-hero .cp-valueline:hover{transform:translateY(-3px)}

@media (prefers-reduced-motion:no-preference){
  .cp-hero .cp-fact{animation:cp-card-in .62s var(--ease) both}
  .cp-hero .cp-facts .cp-fact:nth-child(1){animation-delay:.05s}
  .cp-hero .cp-facts .cp-fact:nth-child(2){animation-delay:.13s}
  .cp-hero .cp-facts .cp-fact:nth-child(3){animation-delay:.21s}
  .cp-hero .cp-facts .cp-fact:nth-child(4){animation-delay:.29s}
  .cp-hero .cp-valueline{animation:cp-card-in .62s var(--ease) .38s both}
}
@keyframes cp-card-in{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:1;transform:translateY(0)}
}

/* Six reasons read better as two rows of three than as one long column. */
@media (min-width:760px){.cp-points--six{grid-template-columns:repeat(3,1fr)}}
.cp-points--six{margin-top:clamp(30px,4vw,48px)}

/* FAQ group headings — four short runs instead of one list of fourteen. */
.cp-faq__group{
  margin:clamp(30px,3.6vw,44px) 0 6px;
  font-size:.78rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold-deep);
}
.cp-faq__group:first-child{margin-top:0}

/* Curriculum week lines — label + value on one row, no card chrome. */
.cp-cur__line{
  margin:14px 0 0;font-size:1.02rem;line-height:1.55;color:var(--ink-2);
  padding-left:16px;border-left:2px solid rgba(201,162,39,.5);
}
.cp-cur__line span{
  display:block;font-family:var(--font-sans);font-size:.72rem;font-weight:700;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:4px;
}
.cp-cur__ai{margin-top:20px;border-top:1px solid rgba(21,57,95,.12);padding-top:16px}
.cp-cur__ai summary{
  cursor:pointer;font-size:.82rem;font-weight:600;letter-spacing:.06em;
  text-transform:uppercase;color:var(--gold-deep);list-style:none;
}
.cp-cur__ai summary::-webkit-details-marker{display:none}
.cp-cur__ai summary::after{content:" +";font-weight:700}
.cp-cur__ai[open] summary::after{content:" \2212"}
.cp-cur__ai p{margin:12px 0 0;font-size:.98rem;line-height:1.6;color:var(--ink-muted)}

/* --- Two-column sections: align to the heading, not the eyebrow ------------
   In every .cp-split the left column carries an eyebrow above its h2, so the
   right column's first line was landing 40px higher than the headline it sits
   beside — measured identically across all four sections. Offsetting the right
   column by the eyebrow block puts the two first lines on the same baseline. */
:root{--eyebrow-block:40px}   /* label line-height + its 20px margin */
@media (min-width:900px){
  .cp-split > div:first-child:has(> .cp-eyebrow) ~ div{padding-top:var(--eyebrow-block)}
}

/* --- Disclaimers: a margin note, not a grey slab ---------------------------
   These appear several times down the page. Filled, rounded and half-width,
   they read as boxed legal text dumped mid-section. Stripped back to a gold
   rule and quiet type, they read as a considered footnote. */
.cp-disclaimer{
  background:transparent;
  border-left:2px solid rgba(201,162,39,.55);
  border-radius:0;
  padding:2px 0 2px 18px;
  font-size:.9rem;
  line-height:1.65;
  max-width:62ch;
  color:var(--ink-muted);
}
.s-navy .cp-disclaimer,.s-navy-deep .cp-disclaimer{
  background:transparent;
  border-left-color:rgba(230,198,101,.5);
  color:var(--on-navy-muted);
}
/* The contact column holds a form card, not running text. A card has its own
   padding, so the eyebrow offset pushes it 31px past the heading instead of
   onto it. */
@media (min-width:900px){
  #contact .cp-split > div:first-child:has(> .cp-eyebrow) ~ div{padding-top:0}
}

/* --- Proof bar: legible, one line, clear of the floating button -----------
   At 12px in muted blue-grey it was the faintest thing on the first screen,
   and three of the five labels wrapped onto two lines, which doubled the bar's
   height and pushed it below the fold on a 900px laptop. Labels shortened,
   type up and brightened, and the list capped so it never runs under the
   fixed WhatsApp button in the corner. */
.cp-proof__item{
  font-size:.84rem;
  letter-spacing:.1em;
  color:#FFF;
  font-weight:600;
  white-space:nowrap;
}
.cp-proof__item svg{width:19px;height:19px;color:var(--gold-bright)}
@media (min-width:1100px){
  /* .cp-fab is 174px wide at right:16px — keep the last item out from under it */
  .cp-proof__list{max-width:1040px;margin-inline:auto}
}
@media (max-width:760px){
  .cp-proof__item{white-space:normal;font-size:.78rem}
}

/* The hero was 648px tall, so nav + hero + proof came to 836px and the strip
   fell off the bottom of a 900px screen once browser chrome is counted. */
.cp-hero{padding-block:clamp(40px,5.5vw,76px) clamp(44px,6vw,84px)}
/* 22px of vertical padding per item made the strip 90px tall, leaving only 3px
   of clearance above the fold on a 790px viewport. 14px gives it 30px. */
@media (min-width:760px){
  .cp-proof__item{padding:14px 14px;gap:7px}
}

/* --- Masthead: less gold ---------------------------------------------------
   85px of full-bleed gold was a lot of saturated colour to open on. Down to
   70px — still well above the 68px it was when it read as too small, because
   the logo and links keep their larger sizes; only the padding gives way.
   Also buys 15px back above the fold. */
:root{--nav-h:70px}
@media (max-width:860px){:root{--nav-h:62px}}
.cp-logo__mark{width:36px;height:36px;border-radius:9px;font-size:.96rem}
.cp-nav__cta{padding:11px 22px}
/* The 16% crop was set for a portrait, where the face sits high in frame.
   A monogram card wants to be centred. */
.cp-instructor__photo img[src$=".svg"]{object-position:50% 50%}

/* --- Proof strip as a marquee ---------------------------------------------
   Two identical tracks sit side by side and the pair slides left by exactly
   half its width, so the moment the first run leaves the frame the second is
   already in position — the loop has no seam. The duplicate is aria-hidden so
   screen readers hear the five claims once.
   Slow on purpose: 45s for a full pass. A fast ticker reads as a banner ad. */
.cp-proof{overflow:hidden}
.cp-marquee{
  position:relative;display:flex;width:100%;overflow:hidden;
  /* fade both ends so items enter and leave instead of being cut off */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
          mask-image:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);
}
.cp-proof__list.cp-marquee__track{
  display:flex;flex:0 0 auto;width:max-content;
  grid-template-columns:none;   /* overrides the old grid layout */
  gap:0;margin:0;padding:0;list-style:none;
}
@media (prefers-reduced-motion:no-preference){
  .cp-marquee__track{animation:cp-marquee 45s linear infinite}
  .cp-marquee:hover .cp-marquee__track{animation-play-state:paused}
}
@keyframes cp-marquee{
  from{transform:translateX(0)}
  to{transform:translateX(-100%)}
}
/* Items were a 5-across grid; in a track they need their own width. */
.cp-marquee .cp-proof__item{
  flex:0 0 auto;
  padding:14px clamp(26px,3.4vw,52px);
  border-bottom:0;
}
/* Static fallback: if motion is reduced, show one run centred and hide the copy. */
@media (prefers-reduced-motion:reduce){
  .cp-marquee{justify-content:center;-webkit-mask-image:none;mask-image:none}
  .cp-marquee__track[aria-hidden="true"]{display:none}
  .cp-marquee .cp-proof__item{padding-inline:clamp(18px,2.4vw,34px)}
}
/* An earlier rule capped .cp-proof__list at 1040px to keep it clear of the
   floating button. A marquee track must be its natural width or the loop
   maths break, and the items now scroll past that corner anyway. */
.cp-marquee .cp-proof__list{max-width:none;margin-inline:0}

/* --- Proof strip: give it its own band ------------------------------------
   It was near-black sitting directly under a near-black hero, so it had no
   edge and nothing to push against — the same reason the masthead looked flat
   before it went gold. Fixed by separating it rather than adding more gold
   surface: a distinct navy, gold hairlines top and bottom, gold diamonds
   between items, and larger type. */
.cp-proof{
  background:#0B1D31;
  border-top:1px solid rgba(201,162,39,.55);
  border-bottom:1px solid rgba(201,162,39,.55);
  box-shadow:inset 0 1px 0 rgba(230,198,101,.18),inset 0 -1px 0 rgba(230,198,101,.18);
}
.cp-marquee .cp-proof__item{
  position:relative;
  font-size:.92rem;
  letter-spacing:.13em;
  color:#FFF;
  padding:16px clamp(30px,3.6vw,58px);
}
.cp-marquee .cp-proof__item svg{
  width:22px;height:22px;
  color:var(--gold-bright);
  filter:drop-shadow(0 0 6px rgba(230,198,101,.35));
}
/* A gold diamond between every item, including across the loop seam. */
.cp-marquee .cp-proof__item::after{
  content:"";position:absolute;right:-4px;top:50%;
  width:6px;height:6px;margin-top:-3px;
  background:var(--gold);transform:rotate(45deg);opacity:.85;
}

/* --- Remove the decorative section rules ----------------------------------
   A 1px gold gradient was drawn above every .cp-split and .cp-price-head,
   fading out at 38% so it read as a line that stops rather than a divider.
   It repeated down the whole page and carried 26-40px of its own margin on
   top of the section padding. Ten sections, so it was costing roughly 350px
   of height to add visual debris. The eyebrow already marks a section start. */
.cp-section > .cp-wrap > .cp-split::before,
.cp-section > .cp-wrap > .cp-price-head::before{content:none}

/* --- Make the alternating bands actually visible ---------------------------
   --warm was #F4F7FB against #FFFFFF, about 3% apart, so section boundaries
   were invisible and the body read as one continuous wash. Deepened enough to
   register as a band. Still cool blue-grey, never cream. */
:root{--warm:#EAF0F7}

/* --- "You'll build it" on navy --------------------------------------------
   This section breaks a run of six consecutive light sections. Everything
   inside it carried light-surface colour — the 12 build cards are white with
   a pale border, the card icons are gold-on-near-white, and the photo caption
   uses --ink-muted. On navy each of those is dark-on-dark, which is exactly
   how text has been lost on this site before. Every one is overridden here. */
.s-navy .cp-build{
  background:linear-gradient(180deg,rgba(255,255,255,.075),rgba(255,255,255,.04));
  border-color:rgba(183,201,221,.22);
  color:var(--on-navy);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.09);
}
.s-navy .cp-build:hover{
  border-color:rgba(230,198,101,.55);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.12),0 14px 30px -18px rgba(0,0,0,.7);
}
.s-navy .cp-build__t{color:#FFF}
.s-navy .cp-build__i{
  background:rgba(230,198,101,.14);
  color:var(--gold-bright);
  box-shadow:inset 0 0 0 1px rgba(230,198,101,.3);
}
.s-navy .cp-figure figcaption{color:var(--on-navy-2)}

/* --- Mentor section on navy -----------------------------------------------
   The dark break belongs in the MIDDLE of the light run, not at its end next
   to the AI section — two adjacent navy bands read as one long dark block
   rather than an alternation. The mentor section splits the run two and two,
   and the white instructor card gains a lot by floating on navy.
   .cp-points carries --ink and --ink-2, so both need overriding here. */
.s-navy .cp-points li{border-left-color:rgba(230,198,101,.6)}
.s-navy .cp-points__k{color:#FFF}
.s-navy .cp-points__p{color:var(--on-navy-2)}
/* The instructor card is a WHITE surface inside a navy section, so the
   .s-navy light-ink rules have to be undone inside it or the bio renders
   light-on-white. Measured at 1.69:1 before this. */
.s-navy .cp-instructor .cp-body{color:var(--ink-2)}
.s-navy .cp-instructor .cp-eyebrow{color:var(--gold-deep)}
.s-navy .cp-instructor .cp-instructor__name{color:var(--ink)}

/* --- Career pathway: fill the left column ---------------------------------
   The right column grew when the CRA/CTM/CPM rows moved in, so the left one
   (heading, lead, staircase) ended well short of it and left a dead block of
   background under the image. Stretching the figure to take the remaining
   height closes the gap and gives the staircase the scale it deserves. */
@media (min-width:900px){
  .cp-path-wrap{align-items:stretch}
  .cp-path-wrap > .cp-path-head{position:static;display:flex;flex-direction:column}
  .cp-path-wrap > .cp-path-head > div{display:flex;flex-direction:column;flex:1;min-height:0}
  .cp-figure--tall{flex:1 1 auto;min-height:260px;position:relative;overflow:hidden;
    border-radius:var(--r-xl);box-shadow:0 1px 2px rgba(6,18,31,.08),0 18px 40px -18px rgba(6,18,31,.34)}
  .cp-figure--tall img{
    position:absolute;inset:0;width:100%;height:100%;
    aspect-ratio:auto;object-fit:cover;object-position:50% 55%;
    border-radius:0;box-shadow:none;
  }
}