/* CEJ Experts — homepage canvas layer.
   Exact port of the approved design canvas (Navy 500 final).
   Everything is scoped under .cvs so it wins over the base theme
   without touching it. Colours and type come from the global
   tokens in theme.css :root — change them there (or via the
   Elementor global colours) and every section follows. */

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

.cvs { font-family: var(--font-brand); font-size: 16px; line-height: 1.7; color: var(--ink); }
.cvs h1,
.cvs h2,
.cvs h3,
.cvs h4 { margin: 0; font-weight: 700; line-height: 1.15; letter-spacing: -0.01em; text-wrap: balance; }
.cvs h2 { font-weight: 600; }
.cvs h3 { font-weight: 600; }
.cvs p { margin: 0; }
.cvs ul { margin: 0; padding: 0; list-style: none; }
.cvs img { max-width: 100%; height: auto; display: block; }
.cvs a { text-decoration: none; }

/* Rail: the canvas content box. */
.cvs .rail {
  width: 100%;
  max-width: 1440px;
  padding: 0 clamp(24px, 8.34vw, 120px);
  margin: 0 auto;
}

.cvs.sect { padding: 88px 0; }

.cvs .eyebrow {
  font-size: 13px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--accent);
}
.cvs .eyebrow-l { color: var(--accent-2); }

.cvs .lede { font-size: 20px; line-height: 1.65; color: var(--muted); }

.cvs .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--accent);
  color: #fff;
  font-weight: 600;
  font-size: 15px;
  line-height: 1;
  padding: 17px 34px;
  border: 1.5px solid var(--accent);
  border-radius: 999px;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.cvs .btn:hover { background: var(--accent-hover); color: #fff; border-color: var(--accent-hover); }

.cvs .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.cvs .btn-ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.cvs .btn-on-dark { background: transparent; color: #fff; border-color: rgb(255 255 255 / 0.45); }
.cvs .btn-on-dark:hover { background: #fff; color: var(--ink); border-color: #fff; }

.cvs .card {
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 1px 2px rgb(16 28 54 / 0.04), 0 12px 28px -18px rgb(16 28 54 / 0.22);
}

.cvs .center { text-align: center; max-width: 660px; margin: 0 auto; }
.cvs .col { display: flex; flex-direction: column; }

.cvs .ico {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
  stroke: currentColor;
  fill: none;
  stroke-width: 1.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cvs .ico-l { width: 34px; height: 34px; }

/* ---- layout primitives ---- */
.cvs .gtrust { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 52px; }
.cvs .gcat   { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.cvs .g4     { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.cvs .g3     { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 26px; }
.cvs .gsplit { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 70px; align-items: center; }
.cvs .gdoors { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; }
.cvs .gfoot  { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
.cvs .door-l { padding-right: 64px; }
.cvs .door-r { padding-left: 64px; border-left: 1px solid var(--line); }
.cvs .news-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; }
.cvs .nl { display: flex; align-items: center; gap: 60px; }
.cvs .nl-form { width: 420px; flex-shrink: 0; }
.cvs .foot-bot { display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.cvs .hero-copy { max-width: 640px; padding: 64px 0; }
.cvs .hero-cta { display: flex; gap: 14px; flex-wrap: wrap; }

/* ---- section pieces ---- */
.cvs-hero {
  position: relative;
  min-height: min(640px, 88vw);
  display: flex;
  align-items: center;
  overflow: hidden;
  background: var(--ink);
}
.cvs-hero .cvs-hero-media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 22%;
}
.cvs-hero .cvs-hero-scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgb(16 28 54 / 0.80) 0%, rgb(16 28 54 / 0.55) 38%, rgb(16 28 54 / 0.14) 72%, rgb(16 28 54 / 0) 100%);
}
.cvs-hero .rail { position: relative; }
.cvs-hero h1 { font-size: clamp(31px, 4.4vw, 54px); color: #fff; line-height: 1.14; }
.cvs-hero h1 .accent { color: var(--accent-2); }
.cvs-hero .hero-lede {
  font-size: 20px;
  line-height: 1.6;
  color: rgb(255 255 255 / 0.82);
  max-width: 520px;
}

.cvs-trust { background: var(--ink); color: #fff; padding: 60px 0; }
.cvs-trust h3 { font-size: 21px; }
.cvs-trust p { font-size: 15px; line-height: 1.6; color: rgb(255 255 255 / 0.62); }
.cvs-trust .ico { color: var(--accent-2); }

.cvs-cat { background: #fff; }
.cvs-cat h2,
.cvs-courses h2,
.cvs-paths h2,
.cvs-news h2 { font-size: clamp(26px, 3.1vw, 38px); }
.cvs-pill {
  display: flex;
  align-items: center;
  gap: 14px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 17px 26px;
  color: var(--ink);
}
.cvs-pill .ico { color: var(--accent); }
.cvs-pill span { font-size: 15px; font-weight: 500; }
.cvs-pill:hover { border-color: var(--accent); }
.cvs-pill.is-active { background: #fff; border: 1.5px solid var(--accent); }
.cvs-pill.is-active span { color: var(--accent); }

.cvs-paths { background: var(--paper); }
.cvs-paths .cvs-paths-media {
  position: relative;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 24px 60px -30px rgb(16 28 54 / 0.5);
}
.cvs-paths .cvs-paths-media img { width: 100%; height: 420px; object-fit: cover; }
.cvs-paths .cvs-play-wrap {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.cvs-paths .cvs-play {
  width: 82px;
  height: 82px;
  border-radius: 999px;
  background: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 0 0 12px rgb(16 28 54 / 0.22);
}
.cvs-paths .cvs-play svg { width: 26px; height: 26px; fill: #fff; }
.cvs-paths ul li { display: flex; align-items: center; gap: 13px; font-size: 16px; }
.cvs-paths ul .ico { color: var(--accent); }

.cvs-courses { background: #fff; }
.cvs-filters { display: flex; gap: 11px; justify-content: center; margin-bottom: 40px; flex-wrap: wrap; }
.cvs-filter {
  font-size: 14px;
  font-weight: 500;
  color: var(--muted);
  background: #fff;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  padding: 10px 24px;
}
.cvs-filter:hover { border-color: var(--accent); color: var(--accent); }
.cvs-filter.is-active { color: #fff; background: var(--accent); border-color: var(--accent); }

.cvs-course-media { position: relative; }
.cvs-course-media img { width: 100%; height: 176px; object-fit: cover; }
.cvs-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 5px 14px;
}
.cvs-badge-cme  { background: var(--accent); color: #fff; }
.cvs-badge-new  { background: var(--ink); color: #fff; }
.cvs-badge-soon { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.cvs-course-body { gap: 13px; padding: 22px; }
.cvs-kicker {
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent);
}
.cvs-course-body h3 { font-size: 17px; line-height: 1.35; min-height: 46px; }
.cvs-course-body h3 a { color: inherit; }
.cvs-course-body h3 a:hover { color: var(--accent); }
.cvs-meta {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--paper);
  border-radius: 10px;
  padding: 11px 15px;
  font-size: 13px;
  color: var(--muted);
}
.cvs-meta span { display: flex; align-items: center; gap: 7px; }
.cvs-meta .ico { width: 16px; height: 16px; }
.cvs-course-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 14px;
}
.cvs-course-foot .cvs-author { font-size: 13px; color: var(--muted); }
.cvs-course-foot .cvs-price { font-size: 15px; font-weight: 700; }

.cvs-compass { background: var(--ink); color: #fff; }
.cvs-compass h2 { font-size: clamp(26px, 3.1vw, 38px); color: #fff; }
.cvs-compass .cvs-compass-lede { font-size: 19px; line-height: 1.6; color: rgb(255 255 255 / 0.68); }
.cvs-country {
  gap: 15px;
  background: rgb(255 255 255 / 0.055);
  border: 1px solid rgb(255 255 255 / 0.14);
  border-radius: var(--radius);
  padding: 30px 26px;
  color: #fff;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.cvs-country:hover { background: rgb(255 255 255 / 0.09); border-color: rgb(255 255 255 / 0.28); }
.cvs-country .ico { width: 30px; height: 30px; color: var(--accent-2); }
.cvs-country h3 { font-size: 21px; color: #fff; }
.cvs-country p { font-size: 14px; color: rgb(255 255 255 / 0.58); }
.cvs-country .cvs-country-cta {
  font-size: 14px;
  font-weight: 500;
  color: var(--accent-2);
  margin-top: auto;
}

.cvs-news { background: var(--paper); }
.cvs-news-media { position: relative; }
.cvs-news-media img { width: 100%; height: 210px; object-fit: cover; }
.cvs-date {
  position: absolute;
  left: 24px;
  bottom: -20px;
  background: var(--accent);
  color: #fff;
  border-radius: 10px;
  padding: 9px 16px;
  font-size: 13px;
  font-weight: 600;
  line-height: 1.25;
  text-align: center;
}
.cvs-news-body { gap: 12px; padding: 38px 24px 26px; }
.cvs-news-body h3 { font-size: 20px; line-height: 1.3; }
.cvs-news-body h3 a { color: inherit; }
.cvs-news-body h3 a:hover { color: var(--accent); }
.cvs-news-body p { font-size: 15px; line-height: 1.6; color: var(--muted); }
.cvs-news-body .cvs-topic { font-size: 13px; font-weight: 500; color: var(--accent); margin-top: 4px; }

.cvs-doors { background: #fff; }
.cvs-doors .ico { width: 44px; height: 44px; color: var(--accent); }
.cvs-doors h3 { font-size: 26px; }
.cvs-doors p { font-size: 16px; line-height: 1.65; color: var(--muted); max-width: 400px; }

.cvs-nl { background: var(--accent); color: #fff; padding: 64px 0; }
.cvs-nl h2 { font-size: clamp(25px, 2.8vw, 34px); color: #fff; }
.cvs-nl .cvs-nl-lede { font-size: 17px; line-height: 1.6; color: rgb(255 255 255 / 0.82); max-width: 520px; }
.cvs-nl .cvs-nl-label { font-size: 14px; color: rgb(255 255 255 / 0.82); }
.cvs-nl .cvs-nl-row { display: flex; gap: 12px; }
.cvs-nl input[type="email"] {
  flex-grow: 1;
  background: #fff;
  border: 0;
  border-radius: 999px;
  height: 54px;
  padding: 0 24px;
  font-family: var(--font-brand);
  font-size: 15px;
  color: var(--ink);
  min-width: 0;
}
.cvs-nl input[type="email"]::placeholder { color: rgb(16 28 54 / 0.45); }
.cvs-nl button {
  background: var(--ink);
  color: #fff;
  border: 0;
  border-radius: 999px;
  height: 54px;
  padding: 0 30px;
  font-family: var(--font-brand);
  font-size: 15px;
  font-weight: 600;
  flex-shrink: 0;
  cursor: pointer;
}
.cvs-nl button:hover { background: #05306b; }

/* Footer, four columns, dark. */
.cvs-foot { background: var(--ink); color: #fff; padding: 70px 0 0; }
.cvs-foot .gfoot { padding-bottom: 52px; }
.cvs-foot img { height: 52px; width: 108px; align-self: flex-start; }
.cvs-foot .cvs-foot-blurb {
  font-size: 15px;
  line-height: 1.65;
  color: rgb(255 255 255 / 0.58);
  max-width: 320px;
}
.cvs-foot h4 { font-size: 15px; color: var(--accent-2); font-weight: 600; }
.cvs-foot a { font-size: 15px; color: rgb(255 255 255 / 0.70); }
.cvs-foot a:hover { color: #fff; }
.cvs-foot .foot-bot {
  border-top: 1px solid rgb(255 255 255 / 0.14);
  padding: 26px 0 34px;
}
.cvs-foot .foot-bot span,
.cvs-foot .foot-bot a { font-size: 14px; color: rgb(255 255 255 / 0.5); }
.cvs-foot .cvs-legal { display: flex; flex-wrap: wrap; gap: 10px 24px; }

/* ---- breakpoints (identical to the canvas) ---- */
@media (max-width: 1180px) {
  .cvs .g4   { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .cvs .gcat { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 900px) {
  .cvs.sect { padding: 60px 0; }
  .cvs .gsplit { grid-template-columns: 1fr; gap: 34px; }
  .cvs .g3     { grid-template-columns: 1fr; }
  .cvs .gtrust { grid-template-columns: 1fr; gap: 32px; }
  .cvs .gdoors { grid-template-columns: 1fr; gap: 40px; }
  .cvs .gfoot  { grid-template-columns: 1fr 1fr; gap: 34px; }
  .cvs .door-l { padding-right: 0; }
  .cvs .door-r { padding-left: 0; border-left: 0; border-top: 1px solid var(--line); padding-top: 40px; }
  .cvs .news-head { flex-direction: column; align-items: flex-start; gap: 22px; }
  .cvs .nl { flex-direction: column; align-items: flex-start; gap: 26px; }
  .cvs .nl-form { width: 100%; }
  .cvs .foot-bot { flex-direction: column; align-items: flex-start; gap: 14px; }
}
@media (max-width: 640px) {
  .cvs .g4   { grid-template-columns: 1fr; }
  .cvs .gcat { grid-template-columns: 1fr; }
  .cvs .gfoot { grid-template-columns: 1fr; }
  .cvs .hero-cta { flex-direction: column; align-items: stretch; }
  .cvs .hero-cta .btn { width: 100%; }
  .cvs .news-head .btn,
  .cvs .gdoors .btn { width: 100%; }
}

/* Canvas sections carry their own .rail, so the Elementor container that
   hosts one stays full-bleed with zero padding — the dark bands, hero and
   newsletter reach the screen edge and nothing doubles at the seams.
   This is the .rail twin of theme.css's .wrap rule. */
body .elementor > .e-con:has(.cvs) {
  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(.cvs),
body .elementor .elementor-widget:has(.cvs) {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding: 0 !important;
}

/* Out-specify theme.css's `.elementor > .e-con-full:not(:has(.wrap))` boxing
   (0,4,0) so canvas sections really do reach the screen edge. */
body .elementor > .e-con-full:has(.cvs):not(.cej-band),
body .elementor > .e-con:has(.cvs):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:has(.cvs) > .e-con,
body .elementor .e-con > .elementor-widget:has(.cvs),
body .elementor .elementor-widget:has(.cvs) > .elementor-widget-container {
  width: 100% !important;
  max-width: 100% !important;
  margin-inline: 0 !important;
  padding-inline: 0 !important;
}

/* Honeypot: never visible, never focusable, never in the flex flow. */
.cvs .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;
}