:root{
  --navy:#122C50;
  --navy-deep:#0C1F3A;
  --ink:#16304F;
  /* Two blues, deliberately. --blue is the logo blue and is decorative:
     eyebrow labels, section rules, capability tags, list markers, active
     indicators. It measures 3.33:1 on white, so it must never sit under
     white text. --blue-dark is the interactive blue at 4.72:1: buttons,
     links, and anything solid carrying white text. --blue-light is for
     accents that sit on a navy panel. */
  --blue:#2196CC;
  --blue-dark:#1B7BA8;
  --blue-light:#7FC4E2;
  --blue-dim:rgba(33,150,204,.12);
  --slate:#5A6B82;
  --fog:#8494A8;
  --line:#DDE4EC;
  --card:#FFFFFF;
  --bg:#F6F9FC;
  --bg-alt:#EDF3F8;
  --steel:#E8EDF3;
  --white:#FFFFFF;
  --radius:18px;
  --maxw:1160px;
  --shadow-sm:0 1px 3px rgba(28,53,87,.06),0 4px 14px rgba(28,53,87,.06);
  --shadow-lg:0 18px 44px rgba(28,53,87,.16);
  --display:'Space Grotesk',Arial,sans-serif;
  --body:'Archivo',Arial,sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
/* Anchor targets clear the fixed header rather than landing under it. */
[id]{scroll-margin-top:96px}
body{
  font-family:var(--body);
  background:var(--bg);
  color:var(--ink);
  line-height:1.65;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img{max-width:100%;display:block}
a{color:inherit}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
.section{padding:110px 0;position:relative}
.eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-family:var(--display);font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--blue);
}
.eyebrow::before{content:"";width:26px;height:2px;background:var(--blue);border-radius:2px}
.section-head{max-width:720px;margin-bottom:56px}
.section-head h2{
  font-family:var(--display);
  font-size:clamp(1.9rem,4vw,2.9rem);
  font-weight:700;line-height:1.12;letter-spacing:-.02em;
  margin-top:16px;color:var(--navy);
}
.section-head p{margin-top:16px;color:var(--slate);font-size:1.05rem;font-weight:400}

/* reveal on scroll */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition:none!important}
  .reveal{opacity:1;transform:none}
}

/* ============ NAV ============ */
header{
  position:sticky;top:0;z-index:100;
  background:rgba(255,255,255,.82);
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav{display:flex;align-items:center;justify-content:space-between;height:72px}
.brand{display:flex;align-items:center;text-decoration:none}
/* The lockup is a single SVG, so the wordmark, the rules and the spacing are
   the artwork's own. Height is fixed and width is auto, so it can never be
   stretched by the flex row it sits in. */
.brand-logo{height:44px;width:auto;display:block}
.nav-links{display:flex;gap:30px;align-items:center;list-style:none}
.nav-links a{
  text-decoration:none;font-size:.9rem;font-weight:500;color:var(--slate);
  transition:color .15s;
}
.nav-links a:hover,.nav-links a:focus-visible{color:var(--navy)}
.nav-cta{
  background:var(--blue-dark);color:#fff!important;
  padding:10px 22px;border-radius:999px;font-weight:600!important;
  box-shadow:0 6px 18px rgba(27,123,168,.32);
  transition:box-shadow .2s,background .2s;
}
.nav-cta:hover{background:var(--navy);box-shadow:0 8px 26px rgba(27,123,168,.42)}
.menu-btn{display:none;background:#fff;border:1px solid var(--line);border-radius:12px;width:46px;height:46px;cursor:pointer}
.menu-btn span{display:block;width:20px;height:2px;background:var(--navy);margin:4px auto;transition:transform .2s,opacity .2s}
.menu-btn[aria-expanded="true"] span:nth-child(1){transform:translateY(6px) rotate(45deg)}
.menu-btn[aria-expanded="true"] span:nth-child(2){opacity:0}
.menu-btn[aria-expanded="true"] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
@media (max-width:900px){
  .brand-logo{height:34px}
  .menu-btn{display:block}
  .nav-links{
    position:absolute;top:72px;left:0;right:0;
    flex-direction:column;align-items:stretch;gap:0;
    background:rgba(255,255,255,.98);backdrop-filter:blur(14px);
    border-bottom:1px solid var(--line);
    display:none;padding:12px 24px 24px;
  }
  .nav-links.open{display:flex}
  .nav-links a{padding:15px 4px;border-bottom:1px solid var(--line)}
  .nav-cta{margin-top:14px;text-align:center;border-radius:14px}
}

/* ============ HERO ============ */
.hero{
  position:relative;
  padding:120px 0 0;
  background:
    radial-gradient(1000px 520px at 82% -12%, rgba(33,150,204,.13), transparent 55%),
    radial-gradient(800px 520px at -8% 35%, rgba(28,53,87,.09), transparent 65%),
    linear-gradient(180deg,#FDFDFE,var(--bg));
  overflow:hidden;
}
.hero::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(28,53,87,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(28,53,87,.055) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(900px 640px at 60% 0%, #000 30%, transparent 80%);
  -webkit-mask-image:radial-gradient(900px 640px at 60% 0%, #000 30%, transparent 80%);
  pointer-events:none;
}
.hero-badge{
  display:inline-flex;align-items:center;flex-wrap:wrap;gap:10px;max-width:100%;
  border:1px solid var(--line);border-radius:999px;
  padding:8px 18px;font-size:.78rem;font-weight:500;color:var(--slate);
  background:#fff;box-shadow:var(--shadow-sm);
}
.hero-badge b{color:var(--blue);font-weight:700}
.hero-badge .pulse{
  width:8px;height:8px;border-radius:50%;background:var(--blue);
  box-shadow:0 0 0 0 rgba(33,150,204,.5);animation:pulse 2.2s infinite;
}
@keyframes pulse{
  0%{box-shadow:0 0 0 0 rgba(33,150,204,.45)}
  70%{box-shadow:0 0 0 10px rgba(33,150,204,0)}
  100%{box-shadow:0 0 0 0 rgba(33,150,204,0)}
}
.hero h1{
  font-family:var(--display);
  font-size:clamp(2.4rem,6.2vw,4.4rem);
  font-weight:700;line-height:1.05;letter-spacing:-.03em;
  max-width:860px;margin-top:28px;color:var(--navy);
}
.hero h1 .grad{
  background:linear-gradient(92deg,var(--blue-dark),var(--blue));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.hero .lede{margin-top:26px;max-width:640px;font-size:1.12rem;font-weight:400;color:var(--slate)}
.hero-ctas{display:flex;gap:16px;flex-wrap:wrap;margin-top:40px}
.btn{
  display:inline-block;text-decoration:none;font-family:var(--display);
  font-weight:600;font-size:.95rem;padding:15px 30px;border-radius:999px;
  transition:all .2s;
}
.btn-solid{background:var(--blue-dark);color:#fff;box-shadow:0 10px 26px rgba(27,123,168,.32)}
.btn-solid:hover{background:var(--navy);box-shadow:0 12px 32px rgba(27,123,168,.42);transform:translateY(-1px)}
.btn-ghost{border:1px solid #C7D2E0;color:var(--navy);background:#fff}
.btn-ghost:hover{border-color:var(--navy)}
/* The directory download sits under the two hero buttons as a text link: a
   third button would compete with them. It is a button element because it
   opens a dialog rather than navigating. */
.hero-directory{
  display:inline-flex;align-items:center;gap:9px;margin-top:26px;
  background:none;border:0;border-bottom:1px solid rgba(28,53,87,.28);
  padding:0 0 3px;cursor:pointer;
  font-family:var(--display);font-size:.86rem;font-weight:600;color:var(--navy);
  transition:color .2s,border-color .2s;
}
.hero-directory::before{content:"\2193";color:var(--blue);font-weight:700}
.hero-directory:hover{color:var(--blue-dark);border-bottom-color:var(--blue-dark)}
.hero-stats{
  display:grid;grid-template-columns:repeat(3,1fr);gap:1px;
  background:var(--line);border-top:1px solid var(--line);
  margin-top:90px;position:relative;
}
.hero-stats div{background:#fff;padding:30px 12px;text-align:center}
/* The widest stat is a range, "12 to 16", which does not fit a third of a
   375px screen at 2rem. It scales with the viewport instead of wrapping: a
   figure broken across two lines stops reading as one number and leaves the
   three cells at different heights. */
.hero-stats strong{
  display:block;font-family:var(--display);font-size:clamp(1.25rem,5.2vw,2rem);
  font-weight:700;white-space:nowrap;
  color:var(--navy);letter-spacing:-.02em;
}
.hero-stats strong em{font-style:normal;color:var(--blue)}
.hero-stats small{font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--fog)}

/* ============ MARQUEE ============ */
.marquee{
  border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:20px 0;overflow:hidden;background:#fff;
  white-space:nowrap;position:relative;
}
.marquee-track{display:inline-flex;gap:64px;animation:scroll 32s linear infinite;padding-right:64px}
.marquee span{
  font-family:var(--display);font-size:.85rem;font-weight:600;
  letter-spacing:.18em;text-transform:uppercase;color:var(--fog);
  display:inline-flex;align-items:center;gap:64px;
}
.marquee i{font-style:normal;color:var(--blue);font-size:.6rem}
@keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

/* ============ STORY ============ */
.story{background:var(--bg)}
.timeline{position:relative;margin-top:8px}
.timeline::before{
  content:"";position:absolute;left:13px;top:10px;bottom:10px;width:2px;
  background:linear-gradient(180deg,#C7D2E0 0%,var(--blue) 100%);
}
.t-item{position:relative;padding:0 0 52px 60px}
.t-item:last-child{padding-bottom:0}
.t-item::before{
  content:"";position:absolute;left:4px;top:6px;width:20px;height:20px;
  border-radius:50%;background:#fff;border:3px solid #A9B9CD;
  box-shadow:var(--shadow-sm);
}
.t-item.now::before{border-color:var(--blue);box-shadow:0 0 0 6px rgba(33,150,204,.14)}
.t-item .t-when{
  font-family:var(--display);font-size:.7rem;font-weight:600;
  letter-spacing:.2em;text-transform:uppercase;color:var(--blue);
}
.t-item h3{font-family:var(--display);font-size:1.35rem;font-weight:700;margin:6px 0 10px;color:var(--navy)}
.t-item p{color:var(--slate);max-width:660px;font-weight:400}

/* ============ PAIN (navy contrast band) ============ */
.pain{
  background:
    radial-gradient(900px 460px at 88% -10%, rgba(127,196,226,.16), transparent 55%),
    linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);
  color:#fff;
}
.pain .section-head h2{color:#fff}
.pain .section-head p{color:#B9C6D8}
.pain .eyebrow{color:var(--blue-light)}
.pain .eyebrow::before{background:var(--blue-light)}
.pain-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px}
.pain-card{
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.13);border-radius:var(--radius);
  padding:30px 28px;transition:border-color .2s,background .2s;
}
.pain-card:hover{border-color:rgba(127,196,226,.55);background:rgba(255,255,255,.09)}
.p-mark{
  width:40px;height:40px;border-radius:12px;
  background:rgba(127,196,226,.18);border:1px solid rgba(127,196,226,.5);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:1rem;color:var(--blue-light);
  margin-bottom:20px;
}
.pain-card h3{font-family:var(--display);font-size:1.08rem;font-weight:700;margin-bottom:10px}
.pain-card p{font-size:.92rem;color:#B9C6D8;font-weight:300}
.pain-answer{
  margin-top:52px;border-radius:var(--radius);
  border:1px solid rgba(127,196,226,.45);
  background:linear-gradient(120deg,rgba(127,196,226,.16),rgba(255,255,255,.05));
  padding:34px 36px;max-width:820px;
}
.pain-answer p{font-family:var(--display);font-size:1.2rem;font-weight:500;line-height:1.5}
.pain-answer em{font-style:normal;color:var(--blue-light)}

/* ============ CATALOGUE ============ */
.catalogue{background:var(--bg-alt)}
.filters{
  /* Eight chips plus the divider just fit the 1160 wrap at this gap. Widening it
     pushes Business Foundations off the end on desktop, where there is no
     scroll affordance to hint that something is cut. */
  display:flex;gap:8px;overflow-x:auto;padding-bottom:10px;margin-bottom:36px;
  -webkit-overflow-scrolling:touch;scrollbar-width:none;
}
.filters::-webkit-scrollbar{display:none}
.filter-chip{
  flex:0 0 auto;font-family:var(--display);
  background:#fff;border:1px solid var(--line);border-radius:999px;
  padding:10px 22px;font-size:.85rem;font-weight:600;color:var(--slate);
  cursor:pointer;transition:all .15s;box-shadow:var(--shadow-sm);
}
/* Above the mobile breakpoint the row must fit on one line, because there is no
   scroll affordance on desktop to hint that a chip is cut off. Nine items at the
   default padding overflow the wrap by a few pixels, so trim it there only. */
@media (min-width:901px){.filter-chip{padding:10px 18px}}
.filter-chip:hover{border-color:var(--navy);color:var(--navy)}
/* Separates the audience filters from the function filters. Decorative only:
   aria-hidden in the markup, and it takes no tab stop because it is a span.
   flex:0 0 auto so it never collapses inside the scrolling row. */
.filter-div{
  flex:0 0 auto;align-self:stretch;width:1px;margin:0 8px;
  background:var(--line);
}
.filter-chip.active{
  background:var(--navy);border-color:var(--navy);color:#fff;
  box-shadow:0 8px 20px rgba(28,53,87,.28);
}
.course-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:22px}
.course-card{
  background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  overflow:hidden;display:flex;flex-direction:column;
  box-shadow:var(--shadow-sm);
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.course-card:hover{
  transform:translateY(-4px);border-color:rgba(33,150,204,.4);
  box-shadow:var(--shadow-lg);
}
.course-card.hidden{display:none}

/* --- thumbnail slot ---------------------------------------
   Drop the real image at the src path (1200 x 750, jpg or
   webp). Until the file exists the branded placeholder
   underneath shows automatically: no code change needed.
------------------------------------------------------------ */
.c-thumb{
  position:relative;aspect-ratio:16/10;overflow:hidden;
  background:
    radial-gradient(340px 200px at 80% 10%, rgba(127,196,226,.4), transparent 60%),
    linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);
}
.c-thumb::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:34px 34px;
}
/* Brand watermark behind the number. The navy tile at 8 percent reads as
   texture on the navy panel rather than as a logo placement, and its own
   white letterforms are what actually show. Sized against the box height,
   not its width, so it holds at 16/10, at the 16/5 banner and at the 4/3
   certificate thumb. Under .ph-code and .ph-label, and under a real image. */
.c-thumb::after{
  content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:url("assets/brand/fei_icon_navy.svg") no-repeat center/auto 62%;
  opacity:.08;
}
.c-thumb img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2;
}
.c-thumb .ph-code{
  position:absolute;left:22px;bottom:14px;z-index:1;
  font-family:var(--display);font-weight:700;font-size:2.4rem;
  letter-spacing:-.02em;color:rgba(255,255,255,.92);
}
.c-thumb .ph-label{
  position:absolute;right:14px;top:12px;z-index:1;
  font-size:.58rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);border:1px dashed rgba(255,255,255,.3);border-radius:999px;padding:4px 10px;
}
.c-body{padding:26px 26px 28px;display:flex;flex-direction:column;flex:1}
.c-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
.c-code{font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.18em;color:var(--blue);white-space:nowrap}
.c-tags{display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.c-tag{
  font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:var(--bg-alt);color:var(--slate);border-radius:999px;padding:4px 11px;
}
/* AI capability tags: same pill, blue accent, so they read as a separate
   category from the business function tags above. Only on courses that
   genuinely teach AI, so an empty row is never rendered. */
.c-tags-ai{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.c-tag-ai{
  font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:var(--blue-dim);border:1px solid rgba(33,150,204,.35);color:var(--blue);
  border-radius:999px;padding:4px 11px;
}
.chero .c-tags-ai{margin-bottom:0}
.course-card h3{
  font-family:var(--display);font-size:1.16rem;font-weight:700;line-height:1.3;
  margin:12px 0 8px;color:var(--navy);
}
.c-sub{font-size:.9rem;color:var(--slate);font-weight:400;margin-bottom:18px}
.c-meta{
  display:flex;flex-wrap:wrap;gap:18px;row-gap:6px;font-family:var(--display);font-size:.76rem;font-weight:600;
  color:var(--slate);border-top:1px solid var(--line);border-bottom:1px solid var(--line);
  padding:12px 0;margin-bottom:18px;
}
.c-meta b{color:var(--blue);font-weight:700}
.c-take{list-style:none;flex:1}
.c-take li{position:relative;padding-left:24px;font-size:.88rem;color:#41546E;margin-bottom:9px;font-weight:400}
.c-take li::before{
  content:"";position:absolute;left:0;top:7px;width:11px;height:11px;
  border-radius:3px;background:linear-gradient(135deg,var(--blue),var(--blue-light));
}
.c-foot{margin-top:20px}
.c-foot a{
  display:inline-block;text-decoration:none;font-family:var(--display);
  font-weight:600;font-size:.88rem;color:var(--navy);
  border:1px solid #C7D2E0;border-radius:999px;padding:10px 24px;transition:all .15s;
}
.c-foot a:hover{background:var(--blue-dark);border-color:var(--blue-dark);color:#fff;box-shadow:0 8px 20px rgba(27,123,168,.32)}
.cat-note{margin-top:36px;font-size:.84rem;color:var(--fog);max-width:780px;font-weight:400}

/* ============ PATHWAY ============ */
.pathway{background:var(--bg)}
.rail{display:grid;grid-template-columns:repeat(6,1fr);margin-top:16px;position:relative}
.rail::before{
  content:"";position:absolute;left:8%;right:8%;top:29px;height:3px;border-radius:2px;
  background:linear-gradient(90deg,var(--navy),var(--blue));
}
.station{position:relative;text-align:center;padding:0 8px}
.station .dot{
  width:58px;height:58px;border-radius:50%;margin:0 auto 14px;
  background:#fff;border:2px solid #A9B9CD;box-shadow:var(--shadow-sm);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:.85rem;color:var(--slate);
  position:relative;z-index:1;transition:border-color .2s,color .2s,box-shadow .2s;
}
.station:hover .dot{border-color:var(--blue);color:var(--blue);box-shadow:0 0 0 6px rgba(33,150,204,.12)}
.station:last-child .dot{border-color:var(--blue);color:var(--blue)}
.station p{font-family:var(--display);font-size:.8rem;font-weight:600;line-height:1.35;color:var(--navy)}
.station small{display:block;font-family:var(--body);font-size:.7rem;font-weight:400;color:var(--fog)}
/* Two rails, one per series. The Adoption rail carries two stations rather than
   six, so only the column count and the reach of the connector line change: the
   stations themselves are the same component. The connector runs between the
   two dot centres, at 25% and 75%, as the six station line runs between 8% and
   92%. Both are overridden by the stacked mobile rules below, which come later
   in the file and win at equal specificity. */
.rail-pair{grid-template-columns:repeat(2,1fr)}
.rail-pair::before{left:25%;right:25%}
.rail-group + .rail-group{margin-top:56px}
.rail-label{
  display:inline-block;font-family:var(--display);font-size:.66rem;font-weight:700;
  letter-spacing:.16em;text-transform:uppercase;color:var(--navy);
  background:var(--bg-alt);border:1px solid var(--line);border-radius:999px;padding:5px 14px;
}
.rail-lead{max-width:720px;margin-top:14px;color:var(--slate);font-weight:400}
.rail-group .rail{margin-top:30px}
@media (max-width:780px){
  .rail{grid-template-columns:1fr;gap:20px}
  .rail::before{left:29px;right:auto;top:8%;bottom:8%;width:3px;height:auto;
    background:linear-gradient(180deg,var(--navy),var(--blue))}
  .station{display:flex;align-items:center;gap:18px;text-align:left}
  .station .dot{margin:0;flex:0 0 58px}
}

/* ============ CORPORATE ============ */
.corporate{background:#fff;border-top:1px solid var(--line)}
/* The pointer up to the two workshop cards in the catalogue, in place of
   repeating the cards themselves here. */
.corp-pointer{margin-top:18px;font-size:.95rem}
.corp-pointer a{
  font-family:var(--display);font-weight:600;color:var(--blue-dark);
  text-decoration:none;border-bottom:1px solid rgba(27,123,168,.35);padding-bottom:2px;
}
.corp-pointer a:hover{border-bottom-color:var(--blue-dark)}
.corp-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:start}
.corp-copy p{color:var(--slate);margin-top:16px;font-weight:400}
.corp-copy .btn{margin-top:30px}
.corp-formats{display:grid;gap:16px;margin-top:34px}
.format-card{
  display:flex;gap:18px;align-items:flex-start;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:22px 24px;transition:border-color .2s,box-shadow .2s;
}
.format-card:hover{border-color:rgba(33,150,204,.4);box-shadow:var(--shadow-sm)}
.format-card .f-icon{
  flex:0 0 42px;width:42px;height:42px;border-radius:12px;
  background:linear-gradient(135deg,var(--navy),var(--navy-deep));
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;color:var(--blue-light);font-size:1.05rem;
}
.format-card h4{font-family:var(--display);font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:4px}
.format-card p{font-size:.88rem;color:var(--slate);font-weight:400}
.corp-steps{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:36px 34px;box-shadow:var(--shadow-sm);
}
.corp-steps h3{
  font-family:var(--display);font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--blue);margin-bottom:26px;
}
.step{display:flex;gap:20px;position:relative;padding-bottom:30px}
.step:last-child{padding-bottom:0}
.step::before{
  content:"";position:absolute;left:19px;top:42px;bottom:0;width:2px;
  background:linear-gradient(180deg,#C7D2E0,transparent);
}
.step:last-child::before{display:none}
.step-num{
  flex:0 0 40px;width:40px;height:40px;border-radius:50%;
  background:#fff;border:2px solid var(--blue);
  display:flex;align-items:center;justify-content:center;
  font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--blue);
  position:relative;z-index:1;
}
.step h4{font-family:var(--display);font-size:1rem;font-weight:700;color:var(--navy)}
.step p{font-size:.88rem;color:var(--slate);font-weight:400;margin-top:3px}
@media (max-width:880px){.corp-grid{grid-template-columns:1fr}}

/* ============ CONTACT ============ */
.contact{
  background:
    radial-gradient(760px 400px at 12% 115%, rgba(33,150,204,.1), transparent 60%),
    linear-gradient(180deg,var(--bg),#FDFDFE);
  border-top:1px solid var(--line);
}
.contact-inner{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.contact h2{font-family:var(--display);font-size:clamp(1.8rem,3.6vw,2.6rem);font-weight:700;line-height:1.12;letter-spacing:-.02em;margin-top:16px;color:var(--navy)}
.contact .contact-copy p{margin-top:16px;color:var(--slate);font-weight:400}
.contact-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:34px;box-shadow:var(--shadow-lg);
}
.contact-card h3{font-family:var(--display);font-size:1.05rem;font-weight:700;margin-bottom:6px;color:var(--navy)}
.contact-card > p{font-size:.88rem;color:var(--slate);font-weight:400;margin-bottom:22px}
.form-fallback{margin-top:18px;font-size:.84rem;color:var(--fog)}
.form-fallback a{color:var(--blue-dark);font-weight:600}
/* HubSpot injected form */
.hs-form-frame,.contact-card .hbspt-form{min-height:60px}
@media (max-width:820px){.contact-inner{grid-template-columns:1fr}}

/* ============ FOOTER ============ */
footer{background:var(--navy-deep);color:#8FA0B8;padding:52px 0}
.foot{display:flex;justify-content:space-between;gap:28px;flex-wrap:wrap;align-items:flex-start}
/* The footer sits on navy, so this is the single colour white lockup. */
.foot-logo{height:50px;width:auto;display:block}
.foot small{display:block;font-size:.76rem;margin-top:10px;max-width:420px;line-height:1.7;font-weight:300}
.foot a{color:#C6D2E2;text-decoration:none;font-size:.86rem}
.foot a:hover{color:#fff}
.foot ul{list-style:none}
.foot li{margin-bottom:9px}
.legal{border-top:1px solid rgba(255,255,255,.12);margin-top:38px;padding-top:22px;font-size:.74rem;font-weight:300}

/* ============ TRUST STRIP (Backed by Kydon) ============ */
.trust{background:#fff;border-bottom:1px solid var(--line);padding:56px 0}
.trust-head{
  display:flex;align-items:center;gap:14px;margin-bottom:30px;
  font-family:var(--display);font-size:.72rem;font-weight:600;
  letter-spacing:.22em;text-transform:uppercase;color:var(--slate);
}
.trust-head::after{content:"";flex:1;height:1px;background:var(--line)}
.trust-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.trust-item{border-left:3px solid var(--blue);padding:4px 0 4px 18px}
.trust-item strong{
  display:block;font-family:var(--display);font-size:1.35rem;font-weight:700;
  color:var(--navy);letter-spacing:-.01em;line-height:1.2;
}
.trust-item small{font-size:.8rem;color:var(--slate);font-weight:400;line-height:1.5;display:block;margin-top:4px}
@media (max-width:880px){.trust-grid{grid-template-columns:repeat(2,1fr)}}

/* ============ FUNDING ============ */
.funding{
  background:
    radial-gradient(700px 360px at 90% -20%, rgba(33,150,204,.12), transparent 60%),
    #fff;
  border-top:1px solid var(--line);
}
.funding-inner{
  display:grid;grid-template-columns:1.2fr .8fr;gap:50px;align-items:center;
}
.funding h2{
  font-family:var(--display);font-size:clamp(1.6rem,3.2vw,2.2rem);
  font-weight:700;line-height:1.15;letter-spacing:-.02em;color:var(--navy);margin-top:16px;
}
.funding p{margin-top:16px;color:var(--slate);font-weight:400}
.funding-card{
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px;box-shadow:var(--shadow-sm);
}
.funding-card h3{font-family:var(--display);font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:8px}
.funding-card p{font-size:.88rem;color:var(--slate);margin:0 0 20px}
@media (max-width:820px){.funding-inner{grid-template-columns:1fr}}

/* ============ FAQ ============ */
.faq{background:var(--bg-alt);border-top:1px solid var(--line)}
.faq-list{max-width:820px}
.faq-item{
  background:#fff;border:1px solid var(--line);border-radius:14px;
  margin-bottom:12px;box-shadow:var(--shadow-sm);
}
.faq-item summary{
  cursor:pointer;list-style:none;display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:18px 22px;font-family:var(--display);font-size:.98rem;font-weight:600;color:var(--navy);
}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary::after{content:"+";font-size:1.3rem;color:var(--blue);flex:0 0 auto;transition:transform .2s}
.faq-item[open] summary::after{transform:rotate(45deg)}
.faq-item .faq-a{padding:0 22px 20px;font-size:.92rem;color:var(--slate);font-weight:400}
.faq-item .faq-a a{color:var(--blue-dark);font-weight:600}

/* ============ WHATSAPP + STICKY MOBILE BAR ============ */
.nav-wa{
  display:inline-flex;align-items:center;gap:7px;
  border:1px solid #BFE6CB;background:#F0FAF3;color:#128C4B!important;
  padding:9px 18px;border-radius:999px;font-weight:600!important;
}
.nav-wa:hover{border-color:#128C4B}
.wa-dot{width:8px;height:8px;border-radius:50%;background:#25D366;flex:0 0 8px}
.contact-wa{
  display:inline-flex;align-items:center;gap:8px;margin-top:14px;
  font-size:.9rem;font-weight:600;color:#128C4B;text-decoration:none;
}
.sticky-bar{display:none}
@media (max-width:820px){
  body{padding-bottom:72px}   /* must clear the fixed bar, which measures 69px */
  .sticky-bar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:120;
    background:rgba(255,255,255,.97);backdrop-filter:blur(10px);
    border-top:1px solid var(--line);padding:10px 14px;gap:10px;
    box-shadow:0 -6px 20px rgba(28,53,87,.08);
  }
  .sticky-bar a{
    flex:1;text-align:center;text-decoration:none;font-family:var(--display);
    font-weight:600;font-size:.9rem;padding:12px 0;border-radius:12px;
  }
  .sticky-bar .sb-wa{background:#128C4B;color:#fff}
  .sticky-bar .sb-enq{background:var(--blue-dark);color:#fff}
}

:focus-visible{outline:3px solid var(--blue-dark);outline-offset:3px;border-radius:4px}


/* ============ COURSE PAGE ============ */
.crumb{font-size:.8rem;color:var(--fog);margin-bottom:18px}
.crumb a{color:var(--slate);text-decoration:none}
.crumb a:hover{color:var(--navy)}
.chero{padding:70px 0 60px;background:
  radial-gradient(900px 460px at 85% -15%, rgba(33,150,204,.12), transparent 55%),
  linear-gradient(180deg,#FDFDFE,var(--bg));border-bottom:1px solid var(--line)}
.chero .c-code{font-size:.8rem}
.chero h1{font-family:var(--display);font-size:clamp(1.9rem,4.6vw,3.1rem);font-weight:700;
  line-height:1.1;letter-spacing:-.02em;color:var(--navy);margin:10px 0 6px;max-width:840px}
.chero .csub{font-family:var(--display);font-size:1.1rem;font-weight:600;color:var(--slate);margin-bottom:16px}
.chero .lede{max-width:700px;font-size:1.05rem;color:var(--slate)}
.chero-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:28px}
.facts{display:grid;grid-template-columns:repeat(6,1fr);gap:1px;background:var(--line);
  border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;margin-top:44px}
.fact{background:#fff;padding:18px 16px}
.fact small{display:block;font-size:.62rem;font-weight:700;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fog);margin-bottom:6px}
.fact strong{font-family:var(--display);font-size:.95rem;font-weight:700;color:var(--navy);line-height:1.3}
@media (max-width:920px){.facts{grid-template-columns:repeat(3,1fr)}}
@media (max-width:560px){.facts{grid-template-columns:repeat(2,1fr)}}
.cpage-section{padding:70px 0;border-bottom:1px solid var(--line)}
.cpage-section:last-of-type{border-bottom:none}
.cpage-section .section-head{margin-bottom:34px}
.two-col{display:grid;grid-template-columns:1.1fr .9fr;gap:50px;align-items:start}
@media (max-width:820px){.two-col{grid-template-columns:1fr}}
.lo-list{list-style:none;counter-reset:lo}
.lo-list li{position:relative;padding:14px 0 14px 58px;border-top:1px solid var(--line);
  color:#33465F;font-size:.95rem}
.lo-list li::before{counter-increment:lo;content:"LO" counter(lo);position:absolute;left:0;top:14px;
  font-family:var(--display);font-weight:700;font-size:.7rem;letter-spacing:.08em;
  background:var(--blue-dim);color:var(--blue);border:1px solid rgba(33,150,204,.35);
  border-radius:999px;padding:4px 10px}
.day-table{width:100%;border-collapse:collapse;background:#fff;border:1px solid var(--line);
  border-radius:var(--radius);overflow:hidden}
.day-table th{background:var(--navy);color:#fff;font-family:var(--display);font-size:.72rem;
  font-weight:600;letter-spacing:.12em;text-transform:uppercase;text-align:left;padding:13px 16px}
.day-table td{padding:14px 16px;border-top:1px solid var(--line);font-size:.9rem;color:#33465F;vertical-align:top}
.day-table td.d{font-family:var(--display);font-weight:700;color:var(--blue);white-space:nowrap}
.day-table td.t{font-family:var(--display);font-weight:700;color:var(--navy);white-space:nowrap}
.day-table td.hrs{font-family:var(--display);font-weight:600;color:var(--slate);white-space:nowrap}
.split-note{margin-top:16px;font-size:.85rem;color:var(--slate);background:var(--bg-alt);
  border:1px solid var(--line);border-radius:12px;padding:14px 18px}
.build-list{list-style:none}
.build-list li{position:relative;padding:12px 0 12px 30px;border-top:1px solid var(--line);
  font-size:.95rem;color:#33465F}
.build-list li::before{content:"";position:absolute;left:0;top:19px;width:13px;height:13px;
  border-radius:4px;background:linear-gradient(135deg,var(--blue),var(--blue-light))}
.assess-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
@media (max-width:640px){.assess-grid{grid-template-columns:1fr}}
.assess-card{background:#fff;border:1px solid var(--line);border-left:4px solid var(--blue);
  border-radius:14px;padding:22px 24px;box-shadow:var(--shadow-sm)}
.assess-card h4{font-family:var(--display);font-size:1rem;font-weight:700;color:var(--navy);margin-bottom:6px}
.assess-card p{font-size:.88rem;color:var(--slate)}
.pass-box{margin-top:20px;background:var(--bg-alt);border:1px solid var(--line);border-radius:12px;
  padding:16px 20px;font-size:.9rem;color:#33465F}
.entry-list{list-style:none}
.entry-list li{padding:10px 0;border-top:1px solid var(--line);font-size:.93rem;color:#33465F}
.entry-list li b{font-family:var(--display);color:var(--navy)}
.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px}
.rel-card{display:block;text-decoration:none;background:#fff;border:1px solid var(--line);
  border-radius:14px;padding:22px 24px;box-shadow:var(--shadow-sm);transition:all .2s}
.rel-card:hover{border-color:rgba(33,150,204,.45);transform:translateY(-2px);box-shadow:var(--shadow-lg)}
.rel-card small{font-family:var(--display);font-size:.68rem;font-weight:700;letter-spacing:.16em;color:var(--blue)}
.rel-card h4{font-family:var(--display);font-size:1rem;font-weight:700;color:var(--navy);margin:6px 0 4px;line-height:1.3}
.rel-card p{font-size:.82rem;color:var(--slate)}
.enq-band{background:
  radial-gradient(700px 360px at 10% 120%, rgba(127,196,226,.14), transparent 60%),
  linear-gradient(160deg,var(--navy) 0%,var(--navy-deep) 100%);color:#fff;padding:80px 0}
.enq-band h2{font-family:var(--display);font-size:clamp(1.7rem,3.4vw,2.4rem);font-weight:700;
  line-height:1.15;letter-spacing:-.02em;margin-top:14px}
.enq-band p{margin-top:14px;color:#C6D2E2;max-width:640px}
.enq-band .eyebrow{color:var(--blue-light)}.enq-band .eyebrow::before{background:var(--blue-light)}
.enq-ctas{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}
.btn-white{background:#fff;color:var(--navy)}
.btn-white:hover{background:var(--steel, #E8EDF3)}
.disclaim{margin-top:26px;font-size:.82rem;color:var(--fog);max-width:760px}
.cthumb-banner{margin-top:44px;border-radius:var(--radius);overflow:hidden;border:1px solid var(--line)}

.c-foot{display:flex;gap:10px;flex-wrap:wrap}
.c-foot .cf-primary{background:var(--navy);border-color:var(--navy);color:#fff}
.c-foot .cf-primary:hover{background:var(--blue-dark);border-color:var(--blue-dark);box-shadow:0 8px 20px rgba(27,123,168,.32)}

/* ============ POLICY PAGE ============ */
/* No reveal animation on this page: legal content must be readable
   immediately, including with JavaScript disabled. */
.policy-head{padding:56px 0 40px;background:
  radial-gradient(900px 460px at 85% -15%, rgba(33,150,204,.12), transparent 55%),
  linear-gradient(180deg,#FDFDFE,var(--bg));border-bottom:1px solid var(--line)}
.policy-head h1{font-family:var(--display);font-size:clamp(1.8rem,4.2vw,2.6rem);font-weight:700;
  line-height:1.12;letter-spacing:-.02em;color:var(--navy)}
.policy-lede{margin-top:14px;max-width:640px;font-size:1.02rem;color:var(--slate)}
.policy-updated{margin-top:10px;font-size:.82rem;color:var(--fog)}
.policy-layout-band{padding:56px 0 90px}
.policy-layout{display:grid;grid-template-columns:240px minmax(0,1fr);gap:56px;align-items:start}

/* The list is longer than a short viewport, so it scrolls within itself. */
.policy-nav{position:sticky;top:96px;max-height:calc(100vh - 128px);overflow-y:auto}
.policy-nav ul{list-style:none;border-left:2px solid var(--line)}
.policy-nav a{
  display:block;text-decoration:none;font-size:.86rem;color:var(--slate);
  padding:7px 0 7px 16px;margin-left:-2px;border-left:2px solid transparent;
  transition:color .15s,border-color .15s;
}
.policy-nav a:hover,.policy-nav a:focus-visible{color:var(--navy)}
.policy-nav a.pn-section{font-family:var(--display);font-weight:600}
.policy-nav li:not(:first-child) a.pn-section{margin-top:14px}
.policy-nav a[aria-current]{color:var(--navy);font-weight:600;border-left-color:var(--blue)}

.policy-doc{max-width:720px;font-size:.94rem;line-height:1.75;color:var(--slate)}
.policy-doc h2{font-family:var(--display);font-size:1.6rem;font-weight:700;letter-spacing:-.02em;
  color:var(--navy);line-height:1.2;margin-top:48px;padding-top:28px;border-top:1px solid var(--line);
  scroll-margin-top:96px}
.policy-doc h3{font-family:var(--display);font-size:1.05rem;font-weight:700;color:var(--navy);
  line-height:1.35;margin-top:28px;scroll-margin-top:96px}
.policy-doc h2:first-child{margin-top:0;padding-top:0;border-top:none}
.policy-doc p{margin-top:14px}
.policy-doc .policy-intro{margin-top:0;font-size:1.02rem;color:#41546E;margin-bottom:8px}
.policy-doc ul{margin:14px 0 0;padding-left:22px}
.policy-doc li{margin-bottom:10px}
.policy-doc li:last-child{margin-bottom:0}
.policy-doc strong{color:var(--navy);font-weight:600}
.policy-doc a{color:var(--blue-dark);font-weight:600}
.policy-table-scroll{overflow-x:auto;margin-top:18px}
.policy-doc .day-table td:first-child{font-family:var(--display);font-weight:600;color:var(--navy)}

.tbc{
  display:inline;background:var(--blue-dim);border:1px solid rgba(33,150,204,.35);
  color:var(--blue);font-size:.86em;padding:2px 8px;border-radius:4px;
}

/* No sticky action bar on this page, so drop the space reserved for it. */
@media (max-width:820px){body.policy-page{padding-bottom:0}}

@media (max-width:880px){
  .policy-layout{grid-template-columns:minmax(0,1fr);gap:28px}
  .policy-nav,.policy-doc{min-width:0}
  .policy-nav{position:static;top:auto;max-height:none;overflow-y:hidden;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    scrollbar-width:none;border-bottom:1px solid var(--line);padding-bottom:2px}
  .policy-nav::-webkit-scrollbar{display:none}
  .policy-nav ul{display:flex;gap:4px;border-left:none;width:max-content}
  .policy-nav a{flex:0 0 auto;white-space:nowrap;padding:8px 12px;margin-left:0;
    border-left:none;border-bottom:2px solid transparent}
  .policy-nav a[aria-current]{border-left-color:transparent;border-bottom-color:var(--blue)}
}

/* ============ THE OPERATOR DIFFERENCE ============ */
.difference{background:#fff;border-top:1px solid var(--line)}
.diff-lead{max-width:760px;margin-bottom:44px}
.diff-lead p{color:var(--slate);font-size:1.02rem}
.diff-lead p + p{margin-top:16px}
.diff-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px}
.diff-card{
  display:flex;gap:18px;align-items:flex-start;
  background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);
  padding:26px 28px;transition:border-color .2s,box-shadow .2s;
}
.diff-card:hover{border-color:rgba(33,150,204,.4);box-shadow:var(--shadow-sm)}
.diff-card h3{font-family:var(--display);font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:6px}
.diff-card p{font-size:.92rem;color:var(--slate);font-weight:400}
@media (max-width:820px){.diff-grid{grid-template-columns:1fr}}
.statement-band{
  margin-top:44px;border:1px solid rgba(33,150,204,.35);background:var(--blue-dim);
  border-radius:var(--radius);padding:34px 36px;
}
.statement-band p{font-family:var(--display);font-size:1.15rem;font-weight:500;line-height:1.5;color:var(--navy)}
@media (max-width:640px){.statement-band{padding:26px 24px}.statement-band p{font-size:1.02rem}}

/* ============ WHO IT IS FOR ============ */
.audience{background:var(--bg-alt);border-top:1px solid var(--line)}
.aud-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}
.aud-card{
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 28px;box-shadow:var(--shadow-sm);
  transition:transform .25s,border-color .25s,box-shadow .25s;
}
.aud-card:hover{transform:translateY(-4px);border-color:rgba(33,150,204,.4);box-shadow:var(--shadow-lg)}
.aud-card h3{font-family:var(--display);font-size:1.1rem;font-weight:700;color:var(--navy);margin-bottom:10px}
.aud-card p{font-size:.92rem;color:var(--slate);font-weight:400;flex:1}
.aud-start{
  display:block;margin-top:20px;padding-top:16px;border-top:1px solid var(--line);
  font-family:var(--display);font-size:.82rem;font-weight:600;color:var(--blue-dark);
  text-decoration:none;transition:color .15s;
}
.aud-start:hover{color:var(--navy)}
@media (max-width:820px){.aud-grid{grid-template-columns:1fr}}

/* ============ COURSE PAGE: TWO COLUMN BODY + SUMMARY CARD ============ */
/* Source order is hero copy, summary card, content, which is the mobile
   reading order. On desktop the card is placed into the second column and
   spans both rows, so it can stick alongside the whole left column. */
.cpage-layout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:0 48px;align-items:start;padding-bottom:70px}
.chero-copy{grid-column:1;grid-row:1}
/* stretch, not start: the column must be as tall as the content beside it,
   otherwise the sticky child has no room to travel */
.cpage-aside{grid-column:2;grid-row:1 / span 2;align-self:stretch}
.cpage-main{grid-column:1;grid-row:2;min-width:0}
.chero-copy h1{font-family:var(--display);font-size:clamp(1.9rem,4.6vw,2.8rem);font-weight:700;
  line-height:1.1;letter-spacing:-.02em;color:var(--navy);margin:10px 0 6px}
.chero-copy .csub{font-family:var(--display);font-size:1.1rem;font-weight:600;color:var(--slate);margin-bottom:16px}
.chero-copy .lede{font-size:1.05rem;color:var(--slate)}
.cpage-block{padding:44px 0;border-top:1px solid var(--line)}
.cpage-block:first-of-type{border-top:none}
.cpage-main .two-col{grid-template-columns:1fr;gap:36px}
.cpage-aside{min-width:0}
.cpage-sticky{position:sticky;top:96px}
.summary-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  box-shadow:var(--shadow-lg);padding:28px;
}
.sc-code{font-family:var(--display);font-size:.72rem;font-weight:700;letter-spacing:.18em;color:var(--blue)}
.sc-title{font-family:var(--display);font-size:.95rem;font-weight:700;color:var(--navy);line-height:1.3;margin-top:4px}
.sc-fee{font-family:var(--display);font-size:1.15rem;font-weight:700;color:var(--navy);margin-top:14px}
.sc-list{margin-top:18px}
.sc-list > div{padding:10px 0;border-top:1px solid var(--line)}
.sc-list dt{font-size:.72rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fog)}
.sc-list dd{font-size:.88rem;color:var(--navy);margin-top:3px}
.sc-rule{height:1px;background:var(--line);margin:18px 0}
.sc-provider{font-size:.76rem;color:var(--slate);line-height:1.6}
.sc-btn{
  display:block;width:100%;text-align:center;text-decoration:none;cursor:pointer;
  font-family:var(--display);font-weight:600;font-size:.9rem;
  padding:13px 18px;border-radius:999px;margin-top:18px;border:1px solid transparent;
  transition:background .2s,border-color .2s,box-shadow .2s,color .2s;
}
.sc-btn-solid{background:var(--blue-dark);color:#fff;box-shadow:0 8px 20px rgba(27,123,168,.3)}
.sc-btn-solid:hover{background:var(--navy)}
.sc-btn-ghost{background:#fff;border-color:#C7D2E0;color:var(--navy)}
.sc-btn-ghost:hover{border-color:var(--navy)}
.sc-wa{
  display:flex;align-items:center;justify-content:center;gap:8px;margin-top:16px;
  font-size:.85rem;font-weight:600;color:#128C4B;text-decoration:none;
}
@media (max-width:980px){
  /* One column: the card falls where it sits in the source, directly after
     the hero copy and before the content blocks, and stops sticking. */
  .cpage-layout{grid-template-columns:minmax(0,1fr);gap:0;padding-bottom:40px}
  .chero-copy,.cpage-aside,.cpage-main{grid-column:1;grid-row:auto}
  .cpage-sticky{position:static;top:auto}
  .cpage-aside{margin:28px 0 8px}
}

/* ============ CERTIFICATE BLOCK ============ */
.cert-block{display:grid;grid-template-columns:260px minmax(0,1fr);gap:26px;align-items:start;margin-top:30px}
.cert-thumb{aspect-ratio:4/3;border-radius:12px}
.cert-copy h3{font-family:var(--display);font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:10px}
.cert-copy p{font-size:.92rem;color:var(--slate)}
.cert-copy p + p{margin-top:12px}
@media (max-width:640px){.cert-block{grid-template-columns:1fr}}

/* ============ INTAKES ============ */
.intake-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}
@media (max-width:900px){.intake-grid{grid-template-columns:1fr}}
.intake-card{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 26px;box-shadow:var(--shadow-sm);
  transition:border-color .2s,box-shadow .2s;
}
.intake-card:hover{border-color:rgba(33,150,204,.4);box-shadow:var(--shadow-lg)}
.intake-card.closed{opacity:.55}
.intake-card.closed:hover{border-color:var(--line);box-shadow:var(--shadow-sm)}
.intake-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:12px}
.intake-pill{
  font-size:.6rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;
  background:var(--bg-alt);color:var(--slate);border-radius:999px;padding:4px 11px;
}
.intake-pill.hot{background:var(--blue-dim);border:1px solid rgba(33,150,204,.35);color:var(--blue)}
.intake-status{font-size:.72rem;font-weight:600;color:var(--fog)}
.intake-card h3{font-family:var(--display);font-size:1.05rem;font-weight:700;color:var(--navy);margin-bottom:12px}
.intake-rows > div{display:flex;gap:12px;padding:7px 0;border-top:1px solid var(--line)}
.intake-rows dt{flex:0 0 66px;font-size:.68rem;font-weight:700;letter-spacing:.12em;
  text-transform:uppercase;color:var(--fog);padding-top:2px}
.intake-rows dd{font-size:.86rem;color:#33465F}
.intake-link{
  display:inline-block;margin-top:16px;font-family:var(--display);
  font-size:.84rem;font-weight:600;color:var(--blue-dark);text-decoration:none;
}
.intake-link:hover{color:var(--navy)}
.intake-empty{
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 32px;box-shadow:var(--shadow-sm);max-width:820px;
}
.intake-empty p{color:var(--slate);font-size:.95rem}
.intake-empty p + p{margin-top:12px}
.intake-empty .btn{margin-top:22px}

/* ============ TRAINER ============ */
.trainer-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:20px}
.trainer-card{
  display:grid;grid-template-columns:120px minmax(0,1fr);gap:20px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
  padding:24px 26px;box-shadow:var(--shadow-sm);
}
.trainer-photo{
  position:relative;aspect-ratio:1;border-radius:12px;overflow:hidden;
  background:linear-gradient(135deg,var(--navy),var(--navy-deep));
}
.trainer-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.trainer-photo .ph-label{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;
  font-size:.58rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase;
  color:rgba(255,255,255,.55);
}
.trainer-card h3{font-family:var(--display);font-size:1.05rem;font-weight:700;color:var(--navy)}
.trainer-role{font-size:.8rem;font-weight:600;color:var(--blue);margin:2px 0 10px}
.trainer-card p{font-size:.9rem;color:var(--slate)}
@media (max-width:560px){.trainer-card{grid-template-columns:1fr}.trainer-photo{max-width:120px}}

/* ============ FOR TEAMS (compact) ============ */
.teams-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:44px;align-items:start}
.teams-lead{margin-top:18px;color:var(--slate);font-size:.98rem;max-width:640px}
.teams-items{display:grid;gap:14px;margin-top:22px}
.teams-card{
  background:var(--bg-alt);border:1px solid var(--line);border-radius:var(--radius);
  padding:30px 32px;box-shadow:var(--shadow-sm);
}
.teams-card h3{font-family:var(--display);font-size:1.15rem;font-weight:700;color:var(--navy);margin-bottom:10px}
.teams-card p{font-size:.92rem;color:var(--slate);margin-bottom:22px}
@media (max-width:880px){.teams-grid{grid-template-columns:1fr;gap:30px}}

/* ============ ADOPTION SERIES (AIA) ============
   The organisations section on the homepage and the workshop pages.
   Deliberately built on the existing card and band language rather than a
   second visual system: the two series should read as siblings, while the
   series pill and the missing capability tags keep them distinct.
------------------------------------------------------------ */
.c-codes{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* Series pill: on every catalogue card, above the title. Distinct from both the
   grey function tags and the blue capability tags, so a card's series reads at
   a glance without competing with them. */
.c-series-row{margin:14px 0 0}
.chero-copy .c-series,.c-series-row .c-series{display:inline-block}
/* The hero pill row carries a code, a series pill, segment tags and capability
   tags. It has to wrap, or on a narrow screen it sets a minimum width and
   pushes the whole page into horizontal overflow. */
.chero-copy .c-top{flex-wrap:wrap;row-gap:10px}
.chero-copy .c-tags{justify-content:flex-start}
.c-series{
  font-family:var(--display);font-size:.6rem;font-weight:700;letter-spacing:.1em;
  text-transform:uppercase;color:var(--navy);
  background:var(--bg-alt);border:1px solid var(--line);border-radius:999px;padding:4px 11px;
}
.org-band{
  margin-top:56px;padding-top:48px;border-top:1px solid var(--line);
  display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:start;
}
.org-band h3{font-family:var(--display);font-size:1.3rem;font-weight:700;color:var(--navy)}
.org-band-copy p{color:var(--slate);margin-top:16px;font-weight:400}
.org-band-copy .btn{margin-top:30px}
@media (max-width:880px){
  .org-band{grid-template-columns:1fr;gap:38px;margin-top:44px;padding-top:38px}
}
/* Narrow screens: the code takes its own row so it stops being squeezed onto two
   lines by the function tags opposite it. */
@media (max-width:520px){
  .course-grid .c-top{flex-wrap:wrap;row-gap:8px}
  .course-grid .c-code{flex:0 0 100%}
  .course-grid .c-tags{justify-content:flex-start}
  /* The hero badge names both audiences and the country, which is too long for
     one line of a phone at the desktop size. It sets smaller rather than
     wrapping, so the pill keeps its shape. */
  .hero-badge{font-size:.68rem;padding:7px 15px;gap:8px}
}

/* Certificate note on a workshop page: compact, and never a pass criteria box. */
.cert-note{
  background:var(--bg-alt);border:1px solid var(--line);border-left:4px solid var(--blue);
  border-radius:12px;padding:18px 22px;font-size:.9rem;color:#33465F;
}

/* The cross sell block at the foot of every course and workshop page. It takes
   the default section background, so it alternates with the fees band above it
   instead of merging into one long tinted block. */
.pathway-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:28px}
.wk-overview p + p{margin-top:16px}

/* ------------------------------------------------------------
   PROGRAMME DIRECTORY DIALOG
   Opened by the hero text link, and rendered only when the PDF
   exists. A native dialog, so focus handling, Escape and the
   backdrop come from the browser rather than from script.
------------------------------------------------------------ */
.modal{
  /* The global reset zeroes the margin a dialog centres itself with. */
  margin:auto;
  width:min(440px,calc(100vw - 32px));
  border:1px solid var(--line);border-radius:var(--radius);
  padding:34px 32px;background:var(--card);color:var(--ink);
  box-shadow:var(--shadow-lg);
}
.modal::backdrop{background:rgba(18,35,60,.55)}
.modal h2{
  font-family:var(--display);font-size:1.3rem;font-weight:700;
  color:var(--navy);line-height:1.25;padding-right:30px;
}
.modal p{margin-top:14px;color:var(--slate);font-size:.92rem;font-weight:400}
.modal .btn{margin-top:24px}
.modal-dismiss{position:absolute;top:14px;right:16px}
.modal-close{
  background:none;border:0;padding:0;cursor:pointer;
  font-size:1.6rem;line-height:1;color:var(--fog);transition:color .2s;
}
.modal-close:hover{color:var(--blue-dark)}
.modal-note a{color:var(--blue-dark);font-weight:600}
#directory-form{margin-top:22px}

/* ------------------------------------------------------------
   ABOUT: FOUNDING RATIONALE AND TEAM
   Both sections are light, so they alternate against the story
   timeline above and the dark market context band below.
------------------------------------------------------------ */
.whyfei{background:#fff;border-top:1px solid var(--line)}
.whyfei-copy{max-width:760px}
.whyfei-copy p{color:var(--slate);font-weight:400;margin-top:18px}
.whyfei-copy p:first-child{margin-top:0}
.pull-quote{margin-top:38px;padding-left:26px;border-left:3px solid var(--blue)}
.pull-quote p{
  font-family:var(--display);font-size:clamp(1.15rem,2.4vw,1.5rem);
  font-weight:600;line-height:1.35;letter-spacing:-.01em;color:var(--navy);
  margin-top:0;
}
/* Attribution: the name leads, the role sits under it, both smaller than the
   quote. Set in sentence case rather than the uppercase used elsewhere for
   labels, because this is a person rather than a category. */
.pull-quote cite{
  display:block;margin-top:16px;font-style:normal;
  font-size:.8rem;font-weight:400;color:var(--fog);
}
.pull-quote cite b{
  display:block;font-family:var(--display);font-size:.88rem;font-weight:700;
  color:var(--navy);letter-spacing:0;
}

.team{background:var(--bg-alt)}
/* Three across, two on a tablet, one on a phone. */
.person-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}
@media (max-width:900px){.person-grid{grid-template-columns:repeat(2,1fr)}}
@media (max-width:560px){.person-grid{grid-template-columns:1fr}}
/* The placeholder is the course thumbnail pattern, with initials in the
   display face where a course carries its number. It sits under the photo, so
   an image that fails to load falls back to it rather than to an empty box. */
.person-photo{
  position:relative;aspect-ratio:1;border-radius:var(--radius);overflow:hidden;
  background:
    radial-gradient(240px 180px at 80% 10%, rgba(127,196,226,.4), transparent 60%),
    linear-gradient(135deg,var(--navy) 0%,var(--navy-deep) 100%);
}
.person-photo::before{
  content:"";position:absolute;inset:0;
  background-image:
    linear-gradient(rgba(255,255,255,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.07) 1px, transparent 1px);
  background-size:34px 34px;
}
.person-photo img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:2}
.person-photo .ph-initials{
  position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:1;
  font-family:var(--display);font-weight:700;font-size:2.4rem;
  letter-spacing:-.02em;color:rgba(255,255,255,.92);
}
.person-card h3{font-family:var(--display);font-size:1.1rem;font-weight:700;color:var(--navy);margin-top:18px}
.person-role{font-size:.82rem;font-weight:600;color:var(--blue);margin-top:3px}
.person-bio{font-size:.9rem;color:var(--slate);font-weight:400;margin-top:12px}
/* The single line under the audience cards, pointing at the team grid. */
.aud-team{margin-top:34px;font-size:.95rem}
.aud-team a{
  font-family:var(--display);font-weight:600;color:var(--blue-dark);
  text-decoration:none;border-bottom:1px solid rgba(27,123,168,.35);padding-bottom:2px;
}
.aud-team a:hover{border-bottom-color:var(--blue-dark)}