/* CEJ Experts — "University" homepage layer.
   A 1:1 port of the approved design canvas: the MasterStudy University
   anatomy in the official CEJ colour system.

   Everything is scoped under .uni so it wins over the base theme without
   touching it. Colours come from the global tokens in theme.css :root —
   change --accent there (or in the Elementor global colours) and every
   section follows.

   Colour mapping from the source template:
     coral   #FA5852  ->  --accent      Navy 500 #101C36
     hover            ->  --accent-hover Navy 600 #0D172C
     dark    #101C36  ->  --ink
     cream   #FDF7F2  ->  --paper
     pill    #F6F8FA  ->  --paper
     border  #E4E6E8  ->  --line
     footer  #101C36  ->  --ink                                        */

.uni,
.uni *,
.uni *::before,
.uni *::after { box-sizing: border-box; }

.uni {
  font-family: var(--font-brand);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
}
.uni h1,
.uni h2,
.uni h3,
.uni h4 { margin: 0; line-height: 1.2; font-weight: 700; }
.uni p { margin: 0; }
.uni ul { margin: 0; padding: 0; list-style: none; }
.uni img { max-width: 100%; display: block; }
.uni a { color: inherit; text-decoration: none; }

.uni .wrap { width: 100%; max-width: 1170px; margin: 0 auto; padding: 0 16px; }
.uni .wrap-l { max-width: 1240px; }
.uni .wrap-n { max-width: 1140px; }
.uni .wrap-xl { max-width: 1260px; }

.uni .ico {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------------- buttons ---------------- */
.uni .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 22px 30px;
  border-radius: 30px;
  font-weight: 500;
  font-size: 14px;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  background: var(--accent);
  color: #fff;
  border: 2px solid var(--accent);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.uni .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.uni .btn-outline-w { background: transparent; color: #fff; border-color: #fff; padding: 20px 30px; }
.uni .btn-outline-w:hover { background: #fff; color: var(--ink); border-color: #fff; }
.uni .btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); padding: 18px 46px; }
.uni .btn-outline:hover { background: var(--ink); color: #fff; }
.uni .btn-outline-a { background: transparent; color: var(--accent); border-color: var(--accent); padding: 20px 30px; }
.uni .btn-outline-a:hover { background: var(--accent); color: #fff; }
.uni .btn-sm { padding: 12px 20px; border-radius: 26px; font-size: 12px; font-weight: 700; }

/* ---------------- hero ---------------- */
.uni-hero { position: relative; overflow: hidden; background: var(--ink); color: #fff; }
.uni-hero .uni-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
}
.uni-hero .uni-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(16 28 54 / 0.86) 0%, rgb(16 28 54 / 0.62) 42%, rgb(16 28 54 / 0.18) 78%, rgb(16 28 54 / 0.05) 100%);
}
.uni-hero .uni-hero-in { position: relative; display: flex; align-items: center; min-height: 860px; }
.uni-hero .uni-hero-copy { width: 50%; max-width: 600px; }
.uni-hero h1 { font-size: 70px; font-weight: 700; margin-bottom: 10px; line-height: 1.1; color: #fff; }
.uni-hero .uni-hero-lede { font-size: 20px; line-height: 1.6; padding-right: 50px; margin-bottom: 34px; }
.uni-hero .uni-hero-cta { display: flex; flex-wrap: wrap; gap: 20px; }

/* ---------------- dark feature strip ---------------- */
.uni-feat { background: var(--ink); color: #fff; padding: 60px 0 20px; }
.uni-feat .uni-feat-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.uni-feat .uni-feat-col { padding: 0 45px 50px 15px; }
.uni-feat .uni-feat-ico { font-size: 52px; color: var(--accent-2); margin-bottom: 14px; }
.uni-feat h3 { font-size: 22px; font-weight: 700; margin-bottom: 11px; color: #fff; }
.uni-feat p { color: rgb(255 255 255 / 0.67); }

/* ---------------- section heads ---------------- */
.uni.uni-sec { padding: 60px 0; }
.uni .uni-h2 { font-size: 46px; font-weight: 700; color: var(--ink); line-height: 1.15; }
.uni .uni-head-c { text-align: center; margin: 0 auto 50px; max-width: 640px; }
.uni .uni-head-c .uni-h2 { margin-bottom: 16px; }
.uni .uni-head-lede { font-size: 18px; color: var(--muted); line-height: 1.6; }

/* ---------------- category pills ---------------- */
.uni-cats { display: flex; flex-wrap: wrap; gap: 0 26px; justify-content: space-between; }
.uni-cat {
  width: calc(25% - 20px);
  margin-bottom: 33px;
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--paper);
  border: 2px solid var(--line);
  border-radius: 34px;
  padding: 16px 32px;
  overflow: hidden;
  transition: border-color 0.18s ease;
}
.uni-cat:hover { border-color: var(--accent); }
.uni-cat .ico { font-size: 26px; color: var(--accent); }
.uni-cat h4 {
  font-size: 20px;
  font-weight: 600;
  color: #333;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* ---------------- video split ---------------- */
.uni-split { background: var(--paper); padding: 116px 0; overflow: hidden; }
.uni-split .uni-split-in { display: grid; grid-template-columns: 52% 48%; align-items: center; }
.uni-split .uni-split-media { position: relative; padding: 0 10px 0 25px; }
.uni-split .uni-frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 10px; }
.uni-split .uni-frame img { width: 100%; height: 100%; object-fit: cover; }
.uni-split .uni-play { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.uni-split .uni-play span {
  width: 86px;
  height: 86px;
  border-radius: 50%;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 12px rgb(16 28 54 / 0.22);
}
.uni-split .uni-play svg { width: 28px; height: 28px; fill: #fff; margin-left: 4px; }
.uni-split .uni-split-copy { padding-left: 90px; }
.uni-split .uni-split-copy .uni-h2 { margin-bottom: 20px; padding-right: 60px; }
.uni-split .uni-split-copy p { font-size: 18px; font-weight: 500; color: var(--muted); margin-bottom: 30px; }

/* ---------------- course cards ---------------- */
.uni-crow { display: flex; flex-wrap: wrap; }
.uni-ccell { width: 33.3333%; padding: 16px; display: flex; }
.uni-ccard {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}
.uni-cbadge {
  position: absolute;
  right: 10px;
  top: 10px;
  z-index: 2;
  height: 24px;
  display: flex;
  align-items: center;
  padding: 6px 10px;
  border-radius: 20px;
  font-size: 12px;
  font-weight: 700;
  text-transform: capitalize;
  color: #fff;
}
.uni-b-hot { background: var(--accent); }
.uni-b-new { background: #2FA86B; }
.uni-b-special { background: var(--accent-2); color: var(--ink); }
.uni-ccard img { width: 100%; height: 150px; object-fit: cover; }
.uni-cbody { display: flex; flex-direction: column; height: 100%; padding: 16px 20px; }
.uni-ccat { color: #4D5E6F; margin-bottom: 10px; display: block; font-size: 14px; }
.uni-ccard h3 { font-size: 16px; font-weight: 500; color: #101C36; min-height: 40px; margin-bottom: auto; }
.uni-ccard h3 a:hover { color: var(--accent); }
.uni-cstats {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  background: #EEF1F7;
  border-radius: 4px;
  margin-top: 10px;
  padding: 4px 0;
}
.uni-cstat { display: flex; align-items: center; gap: 5px; padding: 4px 10px; color: #4D5E6F; font-size: 13px; }
.uni-cfoot {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  min-height: 33px;
  margin-top: 10px;
}
.uni-crate { display: flex; align-items: center; gap: 5px; color: #4D5E6F; font-size: 13px; }
.uni-cprice { margin-left: auto; font-size: 16px; font-weight: 700; color: #101C36; }
.uni-carrows { display: flex; justify-content: center; gap: 10px; padding: 16px; }
.uni-carrow {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 2px solid rgb(39 48 68 / 0.21);
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgb(39 48 68 / 0.35);
  font-size: 15px;
}

/* ---------------- counters ---------------- */
.uni-cnt { position: relative; background: var(--ink); color: #fff; padding: 60px 0; overflow: hidden; }
.uni-cnt .uni-cnt-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.18; }
.uni-cnt .uni-cnt-in { position: relative; }
.uni-cnt .uni-cnt-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); text-align: center; }
.uni-cnt .uni-cnt-col { padding: 5px 15px 0 25px; }
.uni-cnt .uni-cnt-ico { font-size: 50px; color: #fff; margin-bottom: 6px; }
.uni-cnt .uni-cnt-num { font-size: 46px; font-weight: 700; color: var(--accent-2); line-height: 1.1; }
.uni-cnt .uni-cnt-lbl { color: #fff; }
.uni-cnt .uni-h2 { color: #fff; }
.uni-cnt .uni-head-lede { color: rgb(255 255 255 / 0.69); }

/* ---------------- filter pills ---------------- */
.uni-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0 4px;
  font-weight: 500;
  margin-bottom: 16px;
}
.uni-filters li { padding: 6px 10px; margin-bottom: 10px; display: flex; }
.uni-filters span,
.uni-filters a {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  border-radius: 46px;
  border: 2px solid var(--line);
  color: var(--ink);
}
.uni-filters a:hover { border-color: var(--accent); color: var(--accent); }
.uni-filters .is-on span,
.uni-filters .is-on a { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------------- news ---------------- */
.uni-news { background: var(--paper); padding: 60px 0 50px; }
.uni-news .uni-news-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.uni-news .uni-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.uni-news .uni-thumb { height: 215px; border-radius: 8px 8px 0 0; overflow: hidden; }
.uni-news .uni-thumb img { width: 100%; height: 100%; object-fit: cover; }
.uni-news .uni-news-body { background: #fff; padding: 0 20px 20px; border-radius: 0 0 8px 8px; }
.uni-news .uni-news-date {
  background: var(--accent);
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  max-width: 100px;
  margin: -10px auto 0;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  line-height: 1.2;
}
.uni-news .uni-news-date span { font-size: 12px; display: block; }
.uni-news .uni-news-title { font-size: 18px; font-weight: 500; color: #101C36; text-align: center; margin: 14px 0 5px; line-height: 1.35; }
.uni-news .uni-news-title a:hover { color: var(--accent); }
.uni-news .uni-news-tags { text-align: center; font-weight: 500; color: var(--accent); }
.uni-news .uni-news-tags a { display: inline-block; margin: 5px; }

/* ---------------- two doors ---------------- */
.uni-doors { padding: 70px 0; }
.uni-doors .uni-doors-in { display: grid; grid-template-columns: 1fr 1fr; }
.uni-doors .uni-door { display: flex; gap: 20px; padding: 100px 0; }
.uni-doors .uni-door-l { border-right: 2px solid var(--line); padding-right: 65px; }
.uni-doors .uni-door-r { padding-left: 55px; }
.uni-doors .uni-door-num { font-size: 104px; line-height: 1; color: rgb(16 28 54 / 0.18); font-weight: 700; flex-shrink: 0; }
.uni-doors h3 { font-size: 30px; font-weight: 700; margin-bottom: 10px; }
.uni-doors p { font-size: 18px; color: var(--ink); margin-bottom: 26px; }

/* ---------------- newsletter ---------------- */
.uni-nl { background: var(--accent); color: #fff; padding: 40px 15px 30px; }
.uni-nl .uni-nl-in { display: grid; grid-template-columns: 59% 41%; align-items: center; }
.uni-nl .uni-nl-copy { padding: 0 40px; }
.uni-nl h2 { font-size: 46px; font-weight: 700; margin-bottom: 8px; color: #fff; }
.uni-nl .uni-nl-form { padding: 10px; }
.uni-nl label { font-size: 18px; display: block; margin-bottom: 5px; }
.uni-nl .uni-nl-row { display: flex; gap: 10px; }
.uni-nl input[type="email"] {
  flex-grow: 1;
  height: 44px;
  border: 0;
  border-radius: 22px;
  padding: 10px 20px;
  font-family: var(--font-brand);
  font-size: 16px;
  color: var(--ink);
  min-width: 0;
}
.uni-nl button {
  height: 44px;
  border-radius: 26px;
  padding: 10px 20px;
  background: var(--ink);
  color: #fff;
  border: 2px solid var(--ink);
  font-family: var(--font-brand);
  font-weight: 700;
  text-transform: uppercase;
  flex-shrink: 0;
  cursor: pointer;
}
.uni-nl button:hover { background: #101C36; }
.uni .uni-hp {
  position: absolute !important;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
  padding: 0;
  margin: -1px;
}

/* ---------------- testimonials ---------------- */
.uni-tst { background: var(--paper); border-top: 6px solid #EEF1F7; padding: 60px 0 80px; }
.uni-tst .uni-tst-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.uni-tst .uni-tst-card { background: #fff; border-radius: 6px; padding: 30px; text-align: center; }
.uni-tst .uni-tst-av {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  margin: 0 auto 30px;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 32px;
  font-weight: 700;
  overflow: hidden;
}
.uni-tst .uni-tst-av img { width: 100%; height: 100%; object-fit: cover; }
.uni-tst .uni-tst-quote { max-width: 850px; margin: 0 auto 14px; color: var(--muted); }
.uni-tst .uni-tst-stars { display: flex; justify-content: center; gap: 10px; margin-bottom: 20px; color: var(--accent); }
.uni-tst .uni-tst-name { font-size: 18px; font-weight: 700; color: #232628; }
.uni-tst .uni-dots { display: flex; align-items: center; justify-content: center; gap: 10px; margin-top: 30px; }
.uni-tst .uni-dots i { width: 10px; height: 10px; border-radius: 50%; background: rgb(2 1 1 / 0.30); display: block; }
.uni-tst .uni-dots i.is-on { background: var(--accent); }

/* ---------------- footer ---------------- */
.uni-ftr { background: var(--ink); color: #fff; }
.uni-ftr .uni-ftr-in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 125px;
  padding: 10px 0;
}
.uni-ftr .uni-ftr-soc { display: flex; gap: 22px; font-size: 20px; }
.uni-ftr a:hover { color: var(--accent-2); }

/* ================= breakpoints ================= */
@media (max-width: 1024px) {
  .uni-hero .uni-hero-in { min-height: 700px; }
  .uni-hero h1 { font-size: 52px; }
  .uni-hero .uni-hero-copy { width: 100%; max-width: 100%; }
  .uni-split .uni-split-in { grid-template-columns: 1fr; gap: 40px; }
  .uni-split .uni-split-media { padding: 0 15px; }
  .uni-split .uni-split-copy { padding: 0 15px; }
  .uni-split .uni-split-copy .uni-h2 { padding-right: 0; }
  .uni-cat { width: calc(50% - 13px); }
  .uni-cnt .uni-cnt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 30px 0; }
  .uni-doors .uni-doors-in { grid-template-columns: 1fr; }
  .uni-doors .uni-door-l { border-right: 0; border-bottom: 2px solid var(--line); padding-right: 0; padding-bottom: 60px; }
  .uni-doors .uni-door-r { padding-left: 0; padding-top: 60px; }
  .uni-nl .uni-nl-in { grid-template-columns: 1fr; gap: 20px; }
  .uni-nl .uni-nl-copy { padding: 0; }
  .uni-tst .uni-tst-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 767px) {
  .uni.uni-sec { padding: 40px 0; }
  .uni .uni-h2 { font-size: 32px; }
  .uni-hero .uni-hero-in { min-height: 600px; }
  .uni-hero h1 { font-size: 38px; }
  .uni-hero .uni-hero-lede { font-size: 17px; padding-right: 0; }
  .uni-hero .uni-hero-cta { flex-direction: column; align-items: stretch; }
  .uni-hero .uni-hero-cta .btn { width: 100%; }
  .uni-feat .uni-feat-grid { grid-template-columns: 1fr; }
  .uni-feat .uni-feat-col { padding: 0 20px 40px; }
  .uni-cat { width: 100%; }
  .uni-split { padding: 60px 0; }
  .uni-ccell { width: 100%; }
  .uni-cnt .uni-cnt-grid { grid-template-columns: 1fr; }
  .uni-cnt .uni-cnt-col { padding: 0 15px 24px; }
  .uni-news .uni-news-grid { grid-template-columns: 1fr; }
  .uni-news .uni-news-head { flex-direction: column; align-items: flex-start; }
  .uni-news .uni-news-head .btn-outline { width: 100%; }
  .uni-doors .uni-door { flex-direction: column; padding: 40px 0; gap: 10px; }
  .uni-doors .uni-door-num { font-size: 72px; }
  .uni-nl h2 { font-size: 32px; }
  .uni-nl .uni-nl-row { flex-direction: column; }
  .uni-nl button { width: 100%; }
  .uni-tst .uni-tst-grid { grid-template-columns: 1fr; }
  .uni-ftr .uni-ftr-in { flex-direction: column; text-align: center; gap: 16px; }
}

/* Canvas sections carry their own .wrap, so the Elementor container that
   hosts one stays full-bleed. Out-specifies theme.css's boxing rule. */
body .elementor > .e-con-full:has(.uni):not(.cej-band),
body .elementor > .e-con:has(.uni):not(.cej-band):not(.e-con-full) {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding: 0 !important;
  left: auto !important;
  right: auto !important;
}
body .elementor .e-con .e-con:has(.uni),
body .elementor .elementor-widget:has(.uni),
body .elementor .elementor-widget:has(.uni) > .elementor-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

/* ============================================================
   Compass country pages — the University design language applied
   to the four licensing guides. Scoped under .cmp; colours come
   from the same global tokens as everything else.
   ============================================================ */

.cmp,
.cmp *,
.cmp *::before,
.cmp *::after { box-sizing: border-box; }

.cmp {
  font-family: var(--font-brand);
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink);
}
.cmp h1, .cmp h2, .cmp h3, .cmp h4 { margin: 0; line-height: 1.2; font-weight: 700; }
.cmp p { margin: 0; }
.cmp a { color: inherit; text-decoration: none; }
.cmp img { max-width: 100%; display: block; }

.cmp .wrap { width: 100%; max-width: 1170px; margin: 0 auto; padding: 0 16px; }
.cmp.cmp-sec { padding: 70px 0; }
.cmp .cmp-h2 { font-size: 46px; font-weight: 700; line-height: 1.15; }
.cmp .cmp-eyebrow {
  font-size: 13px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--accent);
}
.cmp .cmp-eyebrow-l { color: var(--accent-2); }
.cmp .cmp-lede { font-size: 18px; line-height: 1.65; color: var(--muted); }
.cmp .cmp-head-c { text-align: center; max-width: 660px; margin: 0 auto; }
.cmp .ico {
  width: 1em; height: 1em; flex-shrink: 0;
  stroke: currentColor; fill: none; stroke-width: 1.6;
  stroke-linecap: round; stroke-linejoin: round;
}

/* buttons reuse the University shapes */
.cmp .btn {
  display: inline-flex; align-items: center; justify-content: center;
  padding: 22px 30px; border-radius: 30px;
  font-weight: 500; font-size: 14px; line-height: 1;
  text-transform: uppercase; letter-spacing: 0.02em;
  background: var(--accent); color: #fff; border: 2px solid var(--accent);
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.cmp .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: #fff; }
.cmp .btn-outline-w { background: transparent; color: #fff; border-color: #fff; padding: 20px 30px; }
.cmp .btn-outline-w:hover { background: #fff; color: var(--ink); }
.cmp .btn-outline { background: transparent; color: var(--ink); border-color: var(--ink); padding: 18px 40px; }
.cmp .btn-outline:hover { background: var(--ink); color: #fff; }

/* ---------- hero ---------- */
.cmp-hero { position: relative; background: var(--ink); color: #fff; overflow: hidden; }
.cmp-hero .cmp-hero-img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center 30%;
}
.cmp-hero .cmp-hero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(16 28 54 / 0.90) 0%, rgb(16 28 54 / 0.70) 45%, rgb(16 28 54 / 0.30) 80%, rgb(16 28 54 / 0.12) 100%);
}
.cmp-hero .cmp-hero-in {
  position: relative; display: flex; align-items: center;
  min-height: 520px; padding: 70px 0;
}
.cmp-hero .cmp-crumb { font-size: 14px; color: rgb(255 255 255 / 0.62); margin-bottom: 18px; }
.cmp-hero .cmp-crumb a { color: var(--accent-2); }
.cmp-hero h1 { font-size: 52px; line-height: 1.12; max-width: 820px; margin-bottom: 20px; color: #fff; }
.cmp-hero h1 .cmp-hl { color: var(--accent-2); display: block; }
.cmp-hero .cmp-hero-lede {
  font-size: 19px; line-height: 1.6;
  color: rgb(255 255 255 / 0.84); max-width: 660px; margin-bottom: 34px;
}
.cmp-hero .cmp-hero-cta { display: flex; flex-wrap: wrap; gap: 16px; }

/* ---------- intro ---------- */
.cmp-intro { background: var(--paper); }
.cmp-intro .cmp-intro-grid {
  display: grid; grid-template-columns: 1fr 1.25fr; gap: 60px; align-items: start;
}
.cmp-intro .cmp-intro-grid > div > p { font-size: 17px; line-height: 1.75; color: var(--muted); }

.cmp .cmp-note {
  display: flex; gap: 14px;
  background: #fff; border: 1px solid var(--line);
  border-left: 4px solid var(--accent);
  border-radius: 10px; padding: 20px 22px; margin-top: 26px;
}
.cmp .cmp-note .ico { font-size: 20px; color: var(--accent); margin-top: 2px; }
.cmp .cmp-note p { font-size: 15px; line-height: 1.65; color: var(--ink); }

/* ---------- route / authority / stage cards ---------- */
.cmp-routes .cmp-baseline {
  max-width: 820px; margin: 24px auto 0; text-align: center;
  font-size: 16px; line-height: 1.7; color: var(--muted);
}
.cmp-routes .cmp-grid {
  display: grid; gap: 30px; margin-top: 44px; align-items: start;
  grid-template-columns: repeat(auto-fit, minmax(255px, 1fr));
}
.cmp-routes .cmp-card {
  display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; overflow: hidden;
}
.cmp-routes .cmp-card-head { background: var(--ink); color: #fff; padding: 26px 28px; }
.cmp-routes .cmp-card-head h3 { font-size: 30px; margin-bottom: 6px; color: #fff; }
.cmp-routes .cmp-card-head p { font-size: 15px; color: rgb(255 255 255 / 0.70); }
.cmp-routes .cmp-rows { padding: 8px 28px 4px; }
.cmp-routes .cmp-row { padding: 18px 0; border-bottom: 1px solid var(--line); }
.cmp-routes .cmp-row:last-child { border-bottom: 0; }
.cmp-routes .cmp-row b { display: block; font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.cmp-routes .cmp-row p { font-size: 15px; line-height: 1.65; color: var(--muted); }
.cmp-routes .cmp-card-foot {
  padding: 18px 28px 24px; border-top: 1px solid var(--line); background: var(--paper);
}
.cmp-routes .cmp-card-foot a { font-size: 14px; font-weight: 600; color: var(--accent); }
.cmp-routes .cmp-card-foot a:hover { text-decoration: underline; }
.cmp-routes .cmp-closing {
  margin-top: 34px; font-size: 15px; line-height: 1.7; color: var(--muted);
  background: #EEF1F7; border-radius: 10px; padding: 22px 24px;
}

/* ---------- numbered steps ---------- */
.cmp-steps { background: var(--paper); }
.cmp-steps .cmp-step {
  display: flex; gap: 24px;
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 26px 28px; margin-bottom: 16px;
}
.cmp-steps .cmp-step:last-child { margin-bottom: 0; }
.cmp-steps .cmp-step-n {
  font-size: 40px; font-weight: 700; line-height: 1;
  color: rgb(16 28 54 / 0.18); flex-shrink: 0; min-width: 56px;
}
.cmp-steps .cmp-step h3 { font-size: 20px; margin-bottom: 6px; }
.cmp-steps .cmp-step p { font-size: 15px; line-height: 1.65; color: var(--muted); }

/* ---------- after you pass ---------- */
.cmp-after .cmp-after-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px; margin-top: 34px;
}
.cmp-after .cmp-after-card {
  background: #fff; border: 1px solid var(--line);
  border-radius: 12px; padding: 28px 26px;
}
.cmp-after .cmp-after-card .ico { font-size: 30px; color: var(--accent); margin-bottom: 14px; }
.cmp-after .cmp-after-card h3 { font-size: 19px; margin-bottom: 10px; }
.cmp-after .cmp-after-card p { font-size: 15px; line-height: 1.65; color: var(--muted); }

/* ---------- accent CTA band ---------- */
.cmp-band { background: var(--accent); color: #fff; padding: 56px 0; }
.cmp-band .cmp-band-in {
  display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: center;
}
.cmp-band h2 { font-size: 36px; margin-bottom: 10px; color: #fff; }
.cmp-band p { font-size: 17px; color: rgb(255 255 255 / 0.82); }
.cmp-band .cmp-band-cta { display: flex; flex-wrap: wrap; gap: 14px; }
.cmp-band .cmp-band-cta .btn { background: #fff; color: var(--ink); border-color: #fff; }
.cmp-band .cmp-band-cta .btn:hover { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.cmp-band .cmp-band-cta .btn-outline-w { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.6); }
.cmp-band .cmp-band-cta .btn-outline-w:hover { background: #fff; color: var(--ink); border-color: #fff; }

/* ---------- sources ---------- */
.cmp-sources { padding: 44px 0 60px; font-size: 14px; line-height: 1.7; color: var(--muted); }
.cmp-sources a { color: var(--accent); font-weight: 500; }
.cmp-sources a:hover { text-decoration: underline; }
.cmp-sources .cmp-indep {
  display: inline-flex; align-items: center; gap: 10px;
  background: #EEF1F7; border-radius: 999px; padding: 10px 20px;
  font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 20px;
}
.cmp-sources .cmp-indep .ico { font-size: 17px; color: var(--accent); }

/* ---------- breakpoints ---------- */
@media (max-width: 1024px) {
  .cmp-hero h1 { font-size: 40px; }
  .cmp-intro .cmp-intro-grid { grid-template-columns: 1fr; gap: 28px; }
  .cmp-band .cmp-band-in { grid-template-columns: 1fr; gap: 24px; }
}
@media (max-width: 767px) {
  .cmp.cmp-sec { padding: 44px 0; }
  .cmp .cmp-h2 { font-size: 30px; }
  .cmp-hero h1 { font-size: 30px; }
  .cmp-hero .cmp-hero-in { min-height: 420px; padding: 50px 0; }
  .cmp-hero .cmp-hero-lede { font-size: 17px; }
  .cmp-hero .cmp-hero-cta { flex-direction: column; align-items: stretch; }
  .cmp-hero .cmp-hero-cta .btn { width: 100%; }
  .cmp-steps .cmp-step { flex-direction: column; gap: 8px; }
  .cmp-band h2 { font-size: 28px; }
  .cmp-band .cmp-band-cta { flex-direction: column; align-items: stretch; }
  .cmp-band .cmp-band-cta .btn { width: 100%; }
}

/* Compass sections carry their own .wrap, so their Elementor container
   stays full-bleed — same rule as the University layer. */
body .elementor > .e-con-full:has(.cmp):not(.cej-band),
body .elementor > .e-con:has(.cmp):not(.cej-band):not(.e-con-full) {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding: 0 !important;
  left: auto !important;
  right: auto !important;
}
body .elementor .e-con .e-con:has(.cmp),
body .elementor .elementor-widget:has(.cmp),
body .elementor .elementor-widget:has(.cmp) > .elementor-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

/* ============================================================
   Global card treatment.
   A plain-CSS port of the Framer Motion feature cards: filled
   surface, no border, fade-up on scroll, press-in on hover.
   Framer Motion is a React library the site does not load, so
   the four behaviours are rebuilt here — same feel, ~2KB, and
   it honours the reduce-motion setting for free.

     initial {opacity:0, y:30}   -> .cej-card
     whileInView {opacity:1,y:0} -> .cej-card.is-in  (theme.js)
     whileHover {scale:0.98}     -> :hover
     whileTap   {scale:0.96}     -> :active
     ease [0.16, 1, 0.3, 1]      -> --cej-ease
   ============================================================ */

:root { --cej-ease: cubic-bezier(0.16, 1, 0.3, 1); --cej-surface: #EEF1F7; }

.cej-card,
.uni .uni-ccard,
.uni .uni-news-card .uni-news-body,
.cmp .cmp-after-card,
.cmp .cmp-step,
.cmp .cmp-card {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--cej-ease), transform 0.45s var(--cej-ease);
}

.cej-card.is-in,
.uni .uni-ccard.is-in,
.uni .uni-news-card .uni-news-body.is-in,
.cmp .cmp-after-card.is-in,
.cmp .cmp-step.is-in,
.cmp .cmp-card.is-in {
  opacity: 1;
  transform: none;
}

/* Filled surface instead of the hairline outline. */
.cmp .cmp-after-card,
.cmp .cmp-step,
.uni .uni-ccard {
  background: var(--cej-surface);
  border: 0;
  border-radius: 14px;
}
.cmp .cmp-after-card { padding: 32px; min-height: 280px; }
.uni .uni-ccard { overflow: hidden; }

/* Route cards keep their dark header, so only the outline goes. */
.cmp .cmp-card { border: 0; background: var(--cej-surface); }
.cmp .cmp-card .cmp-rows { background: var(--cej-surface); }
.cmp .cmp-card .cmp-row { border-bottom-color: rgb(16 28 54 / 0.10); }
.cmp .cmp-card .cmp-card-foot { border-top-color: rgb(16 28 54 / 0.10); background: transparent; }

/* Press-in. Cards that are links get the pointer too. */
.cmp .cmp-after-card:hover,
.cmp .cmp-step:hover,
.cmp .cmp-card:hover,
.uni .uni-ccard:hover { transform: scale(0.98); }

.cmp .cmp-after-card:active,
.cmp .cmp-step:active,
.cmp .cmp-card:active,
.uni .uni-ccard:active { transform: scale(0.96); }

/* Anything that never gets observed must not stay invisible:
   no JS, no IntersectionObserver, or print — all reveal at once. */
.no-js .cej-card,
.no-js .uni .uni-ccard,
.no-js .uni .uni-news-card .uni-news-body,
.no-js .cmp .cmp-after-card,
.no-js .cmp .cmp-step,
.no-js .cmp .cmp-card {
  opacity: 1;
  transform: none;
}

@media print {
  .cej-card, .uni .uni-ccard, .cmp .cmp-after-card, .cmp .cmp-step, .cmp .cmp-card {
    opacity: 1 !important;
    transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .cej-card,
  .uni .uni-ccard,
  .uni .uni-news-card .uni-news-body,
  .cmp .cmp-after-card,
  .cmp .cmp-step,
  .cmp .cmp-card {
    opacity: 1;
    transform: none;
    transition: none;
  }
  .cmp .cmp-after-card:hover, .cmp .cmp-step:hover,
  .cmp .cmp-card:hover, .uni .uni-ccard:hover,
  .cmp .cmp-after-card:active, .cmp .cmp-step:active,
  .cmp .cmp-card:active, .uni .uni-ccard:active { transform: none; }
}

/* ---- Same treatment for the legacy theme cards, so every card on the
   site behaves identically: News insight cards, course cards, route and
   audience cards, testimonials and the contact form panel. ---- */
.course-card,
.insight-card,
.route-card,
.audience-card,
.testimonial-card,
.contact-form-card,
.compass-route,
.usp {
  opacity: 0;
  transform: translateY(30px);
  transition: opacity 0.6s var(--cej-ease), transform 0.45s var(--cej-ease);
}
.course-card.is-in,
.insight-card.is-in,
.route-card.is-in,
.audience-card.is-in,
.testimonial-card.is-in,
.contact-form-card.is-in,
.compass-route.is-in,
.usp.is-in { opacity: 1; transform: none; }

/* Filled surface — light bands only. */
.course-card,
.insight-card,
.route-card,
.audience-card,
.testimonial-card,
.contact-form-card {
  background: var(--cej-surface);
  border: 0;
  border-radius: 14px;
  box-shadow: none;
}

/* .usp and .compass-route sit on the dark Ink band, so they keep their
   own ground and take the motion only — a light fill would fight it. */
.usp, .compass-route { background: transparent; }

.course-card:hover,
.insight-card:hover,
.route-card:hover,
.audience-card:hover,
.testimonial-card:hover,
.compass-route:hover { transform: scale(0.98); }

.course-card:active,
.insight-card:active,
.route-card:active,
.audience-card:active,
.testimonial-card:active,
.compass-route:active { transform: scale(0.96); }

@media print {
  .course-card, .insight-card, .route-card, .audience-card,
  .testimonial-card, .contact-form-card, .compass-route, .usp {
    opacity: 1 !important; transform: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .course-card, .insight-card, .route-card, .audience-card,
  .testimonial-card, .contact-form-card, .compass-route, .usp {
    opacity: 1; transform: none; transition: none;
  }
  .course-card:hover, .insight-card:hover, .route-card:hover,
  .audience-card:hover, .testimonial-card:hover, .compass-route:hover,
  .course-card:active, .insight-card:active, .route-card:active,
  .audience-card:active, .testimonial-card:active, .compass-route:active { transform: none; }
}

/* ============================================================
   GLOBAL PAGE LAYER  (v1.8.0)
   The homepage's design language, applied to every other page:
   same tokens, same rail width, same type ramp, same cards,
   same reveal motion. Nothing here is page-specific.
   ============================================================ */

/* ---------- 1. one rail for every page ----------
   .uni .wrap is 1170px with a 16px gutter. Native Elementor
   containers on non-University pages were resolving to the older
   1200px frame, so headings sat a few pixels off the sections
   below them. Both now land on the same content column. */
body .elementor > .e-con.e-con-boxed > .e-con-inner,
body .elementor > .e-con:not(.e-con-full):not(:has(.uni)):not(:has(.cmp)):not(.cej-band) {
  width: 100% !important;
  max-width: 1170px !important;
  margin-inline: auto !important;
  padding-inline: 16px !important;
}

/* ---------- 2. page hero ----------
   The short navy hero that opens every interior page. Same
   ground, eyebrow and type relationship as the homepage hero,
   sized for a page that is not the front door. */
.uni-phero {
  position: relative;
  overflow: hidden;
  background: var(--ink);
  color: #fff;
}
.uni-phero .uni-phero-media {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
}
.uni-phero .uni-phero-scrim {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, rgb(16 28 54 / 0.92) 0%, rgb(16 28 54 / 0.78) 46%, rgb(16 28 54 / 0.46) 100%);
}
.uni-phero .uni-phero-in { position: relative; padding-block: 92px 84px; }
.uni-phero .uni-phero-copy { max-width: 760px; }
.uni-phero .uni-eyebrow {
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--accent-2);
  margin-bottom: 14px;
}
.uni-phero h1 {
  font-size: 52px; font-weight: 700; line-height: 1.12;
  color: #fff; margin-bottom: 18px;
}
.uni-phero .uni-phero-lede {
  font-size: 19px; line-height: 1.65;
  color: rgb(255 255 255 / 0.82);
  max-width: 680px;
}
.uni-phero .uni-phero-cta { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 32px; }

/* ---------- 3. prose sections ----------
   About, For Organisations and Learning Paths carry their body
   copy as native Elementor headings and text blocks. They now
   inherit the University ramp instead of Elementor's defaults. */
body.cej-uni-page .elementor-widget-heading .elementor-heading-title {
  font-family: var(--font-brand);
  color: var(--ink);
  line-height: 1.18;
  font-weight: 700;
}
body.cej-uni-page .elementor-widget-heading h2.elementor-heading-title { font-size: 40px; }
body.cej-uni-page .elementor-widget-heading h3.elementor-heading-title { font-size: 24px; }
body.cej-uni-page .elementor-widget-heading h4.elementor-heading-title { font-size: 19px; }

body.cej-uni-page .elementor-widget-heading.eyebrow .elementor-heading-title,
body.cej-uni-page .eyebrow .elementor-heading-title {
  font-size: 13px; font-weight: 600;
  text-transform: uppercase; letter-spacing: 0.09em;
  color: var(--accent);
  line-height: 1.5;
}

body.cej-uni-page .elementor-widget-text-editor {
  font-family: var(--font-brand);
  font-size: 17px;
  line-height: 1.75;
  color: var(--muted);
}
body.cej-uni-page .elementor-widget-text-editor p { margin: 0 0 16px; }
body.cej-uni-page .elementor-widget-text-editor p:last-child { margin-bottom: 0; }
body.cej-uni-page .elementor-widget-text-editor strong { color: var(--ink); font-weight: 600; }
body.cej-uni-page .elementor-widget-text-editor a { color: var(--accent); font-weight: 500; }
body.cej-uni-page .elementor-widget-text-editor a:hover { text-decoration: underline; }
body.cej-uni-page .elementor-widget-text-editor ul,
body.cej-uni-page .elementor-widget-text-editor ol { margin: 0 0 16px; padding-left: 22px; }
body.cej-uni-page .elementor-widget-text-editor li { margin-bottom: 8px; }

/* Prose runs at a readable measure, not the full rail. */
body.cej-uni-page .elementor-widget-text-editor > .elementor-widget-container { max-width: 820px; }

/* Alternating section rhythm: every prose band gets the same
   vertical breathing room as a .uni-sec. */
body.cej-uni-page .elementor > .e-con:has(> .e-con-inner > .elementor-widget-text-editor),
body.cej-uni-page .elementor > .e-con:has(> .elementor-widget-text-editor),
body.cej-uni-page .elementor > .e-con:has(> .e-con-inner > .elementor-widget-heading),
body.cej-uni-page .elementor > .e-con:has(> .elementor-widget-heading) {
  padding-block: 18px;
}
body.cej-uni-page .elementor > .e-con:first-child { padding-block: 0; }

/* ---------- 4. contact panel ---------- */
.uni-formsec { background: var(--paper); }
.uni-form-card {
  background: var(--cej-surface);
  border: 0;
  border-radius: 14px;
  padding: 40px;
  max-width: 820px;
  margin: 0 auto;
}
.uni-form-card h2 { font-size: 30px; margin-bottom: 10px; color: var(--ink); }
.uni-form-intro { font-size: 17px; line-height: 1.7; color: var(--muted); margin-bottom: 28px; }
.uni-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 22px; }
.uni-form p { margin: 0; display: flex; flex-direction: column; }
.uni-form .field-full { grid-column: 1 / -1; }
.uni-form label { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 7px; }
.uni-form input[type="text"],
.uni-form input[type="email"],
.uni-form select,
.uni-form textarea {
  font-family: var(--font-brand);
  font-size: 15px;
  color: var(--ink);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 13px 15px;
  width: 100%;
  transition: border-color 0.18s ease, box-shadow 0.18s ease;
}
.uni-form textarea { min-height: 150px; resize: vertical; }
.uni-form input:focus,
.uni-form select:focus,
.uni-form textarea:focus {
  outline: 0;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgb(47 107 228 / 0.16);
}
.uni-form .consent { flex-direction: row; align-items: flex-start; gap: 10px; }
.uni-form .consent input { margin-top: 4px; flex-shrink: 0; }
.uni-form .consent label { font-weight: 400; color: var(--muted); margin-bottom: 0; font-size: 15px; }
.uni-form .form-submit { grid-column: 1 / -1; margin-top: 6px; }
.uni-form .form-submit .btn { align-self: flex-start; }
.uni-form .uni-hp { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.uni-formstatus {
  max-width: 820px; margin: 0 auto 22px;
  border-radius: 10px; padding: 16px 20px;
  font-size: 15px; line-height: 1.6;
  border-left: 4px solid var(--accent);
  background: #fff;
}
.uni-formstatus.is-success { border-left-color: var(--success, #2FA86B); }
.uni-formstatus.is-error { border-left-color: #C0392B; }

/* ---------- 5. news archive ---------- */
.uni-arch { background: var(--paper); padding: 60px 0 70px; }
.uni-arch .uni-arch-grid {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px;
}
.uni-arch .uni-arch-empty { font-size: 17px; color: var(--muted); }
.uni-pager { display: flex; justify-content: center; gap: 10px; margin-top: 44px; }
.uni-pager .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 42px; height: 42px; padding: 0 12px;
  border-radius: 999px; border: 1px solid var(--line);
  background: #fff; color: var(--ink);
  font-size: 14px; font-weight: 500;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.uni-pager .page-numbers:hover { border-color: var(--accent); color: var(--accent); }
.uni-pager .page-numbers.current { background: var(--accent); border-color: var(--accent); color: #fff; }

/* ---------- 6. breakpoints ---------- */
@media (max-width: 1024px) {
  .uni-phero h1 { font-size: 40px; }
  .uni-phero .uni-phero-in { padding-block: 70px 62px; }
  .uni-arch .uni-arch-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  body.cej-uni-page .elementor-widget-heading h2.elementor-heading-title { font-size: 32px; }
}
@media (max-width: 767px) {
  .uni-phero h1 { font-size: 30px; }
  .uni-phero .uni-phero-lede { font-size: 17px; }
  .uni-phero .uni-phero-in { padding-block: 52px 48px; }
  .uni-phero .uni-phero-cta { flex-direction: column; align-items: stretch; }
  .uni-phero .uni-phero-cta .btn { width: 100%; }
  .uni-arch .uni-arch-grid { grid-template-columns: 1fr; }
  .uni-form { grid-template-columns: 1fr; }
  .uni-form-card { padding: 26px 22px; }
  .uni-form-card h2 { font-size: 24px; }
  body.cej-uni-page .elementor-widget-heading h2.elementor-heading-title { font-size: 26px; }
  body.cej-uni-page .elementor-widget-text-editor { font-size: 16px; }
}

/* ---------- 7. article body ---------- */
.uni-phero .uni-eyebrow a { color: var(--accent-2); }
.uni-phero .uni-eyebrow a:hover { text-decoration: underline; }
.uni-phero .uni-article-meta { font-size: 16px; color: rgb(255 255 255 / 0.72); }

/* The reading column keeps the page rail and simply runs to a
   comfortable measure, so it starts on the same line as the hero
   above it rather than floating to the middle of the page. */
.uni-article .uni-article-body,
.uni-article .uni-article-back { max-width: 820px; }
.uni-article .uni-article-body { font-size: 18px; line-height: 1.8; color: var(--ink); }
.uni-article .uni-article-body > * + * { margin-top: 22px; }
.uni-article .uni-article-body h2 { font-size: 32px; margin-top: 46px; }
.uni-article .uni-article-body h3 { font-size: 23px; margin-top: 36px; }
.uni-article .uni-article-body p { color: var(--muted); }
.uni-article .uni-article-body a { color: var(--accent); font-weight: 500; text-decoration: underline; }
.uni-article .uni-article-body ul,
.uni-article .uni-article-body ol { padding-left: 24px; list-style: revert; color: var(--muted); }
.uni-article .uni-article-body li + li { margin-top: 10px; }
.uni-article .uni-article-body img { border-radius: 12px; }
.uni-article .uni-article-body blockquote {
  border-left: 4px solid var(--accent);
  background: var(--cej-surface);
  border-radius: 0 10px 10px 0;
  padding: 20px 24px;
  color: var(--ink);
}
.uni-article .uni-article-back { margin-top: 50px; }

@media (max-width: 767px) {
  .uni-article .uni-article-body { font-size: 17px; }
  .uni-article .uni-article-body h2 { font-size: 25px; margin-top: 34px; }
  .uni-article .uni-article-body h3 { font-size: 20px; }
}

/* News cards, reused by the /news/ archive grid. */
.uni-arch .uni-news-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 20px; }
.uni-arch .uni-news-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 30px; }
.uni-arch .uni-thumb { height: 215px; border-radius: 8px 8px 0 0; overflow: hidden; }
.uni-arch .uni-thumb img { width: 100%; height: 100%; object-fit: cover; }
.uni-arch .uni-news-body { background: #fff; padding: 0 20px 20px; border-radius: 0 0 8px 8px; }
.uni-arch .uni-news-date {
  background: var(--accent);
  color: #fff;
  text-transform: uppercase;
  text-align: center;
  max-width: 100px;
  margin: -10px auto 0;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  line-height: 1.2;
}
.uni-arch .uni-news-date span { font-size: 12px; display: block; }
.uni-arch .uni-news-title { font-size: 18px; font-weight: 500; color: #101C36; text-align: center; margin: 14px 0 5px; line-height: 1.35; }
.uni-arch .uni-news-title a:hover { color: var(--accent); }
.uni-arch .uni-news-tags { text-align: center; font-weight: 500; color: var(--accent); }
.uni-arch .uni-news-tags a { display: inline-block; margin: 5px; }

/* A news card with no featured image is a clean text card rather than a
   repeat of the same stock photo three times across the row. */
.uni-arch .uni-news-card.is-textonly .uni-news-body,
.uni-news .uni-news-card.is-textonly .uni-news-body {
  border-radius: 8px;
  padding-top: 26px;
}
.uni-arch .uni-news-card.is-textonly .uni-news-date,
.uni-news .uni-news-card.is-textonly .uni-news-date { margin-top: 0; }

/* ---------- 8. one rail, enforced ----------
   The earlier rail rule was out-specified by the theme's own
   full-width container rule, so native Elementor sections were
   landing on a 1200px content column while every .uni section sat
   on 1138px. Same numbers now, so headings line up with the
   sections above and below them. */
body.cej-uni-page .elementor > .e-con-full:not(:has(.wrap)):not(:has(.uni)):not(:has(.cmp)):not(.cej-band),
body.cej-uni-page .elementor > .e-con.e-con-boxed:not(:has(.uni)):not(:has(.cmp)):not(.cej-band) {
  width: 100% !important;
  max-width: 1170px !important;
  margin-inline: auto !important;
  padding-inline: 16px !important;
}
body.cej-uni-page .elementor > .e-con.e-con-boxed > .e-con-inner {
  width: 100% !important;
  max-width: 100% !important;
  padding-inline: 0 !important;
}

/* ---------- 9. Elementor containers as cards ----------
   Any Elementor container tagged .cej-card in the editor becomes a real
   card: the approved filled surface, the same radius, and the shared
   fade-up / press-in motion. Containers that already carry their own
   background from Elementor keep it, because Elementor's generated
   per-element CSS out-specifies this rule. */
body.cej-uni-page .elementor .e-con.cej-card {
  background: var(--cej-surface);
  border-radius: 14px;
  padding: 30px 28px;
}
body.cej-uni-page .elementor .e-con.cej-card > .elementor-widget:last-child { margin-bottom: 0; }

/* A card footer with no destination is a statement about the card, not a
   link, so it loses the arrow and the link colour. */
.cmp .cmp-card-foot .cmp-card-note { font-size: 14px; font-weight: 600; color: var(--muted); }

/* ---------- 10. hero primary button ----------
   The primary button was Navy 500 sitting on the Ink hero: a 1.1:1
   contrast against its own background, so the pill was invisible and
   only the label read. The closing CTA band on the same pages already
   solves this with a white fill, so the hero now matches the band. */
.uni-hero .uni-hero-cta .btn:not(.btn-outline-w),
.cmp-hero .cmp-hero-cta .btn:not(.btn-outline-w) {
  background: #fff;
  color: var(--ink);
  border-color: #fff;
}
.uni-hero .uni-hero-cta .btn:not(.btn-outline-w):hover,
.cmp-hero .cmp-hero-cta .btn:not(.btn-outline-w):hover {
  background: var(--accent-2);
  border-color: var(--accent-2);
  color: var(--ink);
}

/* ============================================================
   EQUAL CARD HEIGHTS  (global)
   Cards on the same row are one height, and their internal
   regions line up with each other: every dark head ends on the
   same line, every footer sits on the same line. Cards laid out
   on the parent grid's rows (subgrid) do this without any
   fixed heights, so long copy still sets the height honestly.
   ============================================================ */

/* ---- Compass route / service cards ---- */
.cmp-routes .cmp-grid {
  align-items: stretch;
  grid-template-rows: auto 1fr auto;
  grid-auto-rows: auto 1fr auto;
}
.cmp-routes .cmp-card {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  height: auto;
}
.cmp-routes .cmp-rows.is-empty,
.cmp-routes .cmp-card-foot.is-empty { padding: 0; border: 0; min-height: 0; }
.cmp-routes .cmp-card-foot { display: flex; align-items: center; }

/* Browsers without subgrid still get equal-height cards with the
   footer pinned to the bottom; only the head alignment is lost. */
@supports not (grid-template-rows: subgrid) {
  .cmp-routes .cmp-grid { grid-template-rows: none; grid-auto-rows: auto; }
  .cmp-routes .cmp-card { display: flex; flex-direction: column; }
  .cmp-routes .cmp-rows { flex: 1 1 auto; }
  .cmp-routes .cmp-card-foot { margin-top: auto; }
}

/* ---- Compass "after you pass" cards ---- */
.cmp-after .cmp-after-grid { align-items: stretch; }
.cmp-after .cmp-after-card { display: flex; flex-direction: column; height: 100%; }

/* ---- numbered steps ---- */
.cmp-steps .cmp-step { align-items: flex-start; }

/* ---- course cards ---- */
.uni-ccell { align-items: stretch; }
.uni-ccard { display: flex; flex-direction: column; width: 100%; }
.uni-ccard .uni-cbody { flex: 1 1 auto; }

/* ---- news cards, homepage rail and archive ---- */
.uni-news .uni-news-grid,
.uni-arch .uni-arch-grid,
.uni-arch .uni-news-grid { align-items: stretch; }
.uni-news .uni-news-card,
.uni-arch .uni-news-card { display: flex; flex-direction: column; height: 100%; }
.uni-news .uni-news-card .uni-news-body,
.uni-arch .uni-news-card .uni-news-body { flex: 1 1 auto; }

/* ---- Elementor containers tagged as cards ---- */
body.cej-uni-page .elementor .e-con:has(> .e-con-inner > .cej-card),
body.cej-uni-page .elementor .e-con:has(> .cej-card) { align-items: stretch; }
body.cej-uni-page .elementor .e-con.cej-card { align-self: stretch; height: auto; }