/* ==========================================================================
   Everblue training pages - v0.1 (proposed, 2026-10-21)
   Layer 3. Loads after harness.css and site-chrome.css. Brand tokens come
   from harness.css; nothing here defines a new colour or typeface.

   What lives here: the parts of the catalog-driven Training section - the
   course page (registration card, schedule, formats, team door), the course
   finder (filters and course cards), the certification path, and the group
   request page. Same rules as the inner pages: medium blue for colour
   blocks, dark blue for type, one yellow action per section, Efficiency
   Green for success states only.
   ========================================================================== */

/* -- header additions on training pages: learner sign in beside the button -- */
.hd-signin { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.55rem 0.8rem; border-radius: 0.5rem; color: inherit; font-size: 0.875rem; font-weight: var(--w-bold); text-decoration: none; white-space: nowrap; }
.hd-signin svg { width: 1rem; height: 1rem; }
.hd-signin:hover { color: var(--eb-blue); background: rgba(61,112,183,0.08); }
@media (max-width: 64em) { .hd-signin { display: none; } }
.hd-mobile .m-signin { display: flex; align-items: center; gap: 0.5rem; margin-top: 1rem; color: var(--eb-white); font-weight: var(--w-bold); }

/* -- the opening: light, the header solid over it -------------------------- */
.tr-top { padding-top: clamp(7rem, 6rem + 2.5vw, 8.5rem); padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); background: linear-gradient(180deg, var(--eb-sky-100) 0%, var(--eb-white) 100%); }
.tr-crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 0.25rem 0.5rem; list-style: none; margin: 0 0 1.25rem; padding: 0; font-size: var(--t-small); font-weight: var(--w-semibold); }
.tr-crumbs li { display: flex; align-items: center; gap: 0.5rem; color: var(--eb-ink-2); }
.tr-crumbs li + li::before { content: ""; width: 0.32rem; height: 0.32rem; border-right: 2px solid currentColor; border-top: 2px solid currentColor; transform: rotate(45deg); opacity: 0.6; }
.tr-crumbs a { color: var(--eb-blue); }
.tr-crumbs a:hover { color: var(--eb-navy); }
.tr-crumbs [aria-current="page"] { color: var(--eb-ink-2); font-weight: var(--w-body); }
.tr-k { display: block; margin-bottom: 0.9rem; font-size: 0.72rem; font-weight: var(--w-heading); letter-spacing: 0.14em; text-transform: uppercase; color: var(--eb-ink-2); }
.tr-k b { color: var(--eb-navy); }
.tr-top h1 { font-size: clamp(2.2rem, 1.3rem + 3vw, 3.8rem); letter-spacing: -0.035em; line-height: 1.04; margin: 0 0 1.1rem; max-width: 14em; }
.tr-top .lead { color: var(--eb-ink); max-width: 36em; margin: 0; }
.tr-top .lead + .lead { margin-top: 0.75rem; font-size: 1rem; }

/* the course opening: copy left, the registration card right */
.ch-g { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(19rem, 0.75fr); gap: clamp(2rem, 1.5rem + 3vw, 4.5rem); align-items: start; }
@media (max-width: 60em) { .ch-g { grid-template-columns: 1fr; } }

/* the course facts: format, level, hours, CEUs */
.facts { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 1.75rem 0 0; padding: 0; }
.facts li { display: inline-flex; align-items: center; gap: 0.45rem; padding: 0.5rem 0.8rem; border-radius: var(--r-sm); background: var(--eb-white); box-shadow: 0 0 0 1px var(--eb-line); font-size: 0.875rem; font-weight: var(--w-bold); color: var(--eb-navy); }
.facts svg { width: 1rem; height: 1rem; color: var(--eb-blue); flex: none; }

.ch-photo { margin-top: 2rem; border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16 / 7; background: var(--eb-sky-100); }
.ch-photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }

/* -- the registration card: format, date, price, one action ---------------- */
.rc { position: sticky; top: 6rem; background: var(--eb-white); border-radius: var(--r-lg); box-shadow: var(--shadow-lg), 0 0 0 1px var(--eb-line); padding: clamp(1.25rem, 1rem + 1vw, 1.75rem); }
.rc h2 { font-size: 1.125rem; margin: 0 0 1rem; }
.rc-fmt { display: grid; grid-template-columns: 1fr 1fr; gap: 0.35rem; padding: 0.3rem; border-radius: var(--r-md); background: #EEF2F8; margin-bottom: 1.1rem; }
.rc-fmt label { position: relative; display: grid; gap: 0.1rem; padding: 0.6rem 0.75rem; border-radius: var(--r-sm); cursor: pointer; font-size: 0.875rem; font-weight: var(--w-heading); color: var(--eb-ink-2); transition: background-color 250ms var(--ease), color 250ms var(--ease), box-shadow 250ms var(--ease); }
.rc-fmt label small { font-size: 0.75rem; font-weight: var(--w-semibold); }
.rc-fmt input { position: absolute; opacity: 0; pointer-events: none; }
.rc-fmt label:has(input:checked) { background: var(--eb-white); color: var(--eb-navy); box-shadow: 0 6px 16px -10px rgba(30,42,71,0.45), 0 0 0 1px rgba(30,42,71,0.06); }
.rc-fmt label:has(input:focus-visible) { outline: 3px solid var(--eb-yellow); outline-offset: 2px; }
.rc .field { margin-bottom: 1rem; }
.rc-price { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.25rem 0.6rem; margin: 0.25rem 0 0.35rem; }
.rc-price b { font-size: 2.2rem; font-weight: var(--w-heading); color: var(--eb-navy); letter-spacing: -0.03em; line-height: 1; font-variant-numeric: tabular-nums; }
.rc-price s { color: var(--eb-ink-2); font-weight: var(--w-semibold); }
.rc-price .save { font-size: 0.75rem; font-weight: var(--w-heading); letter-spacing: 0.06em; text-transform: uppercase; color: var(--eb-blue); }
.rc-note { margin: 0 0 1.1rem; font-size: 0.8125rem; color: var(--eb-ink-2); }
.rc .btn { width: 100%; }
.rc-inc { list-style: none; margin: 1.1rem 0 0; padding: 1rem 0 0; border-top: 1px solid var(--eb-line); display: grid; gap: 0.45rem; }
.rc-inc li { position: relative; padding-left: 1.4rem; font-size: 0.875rem; color: var(--eb-ink); }
.rc-inc li::before { content: ""; position: absolute; left: 0.1rem; top: 0.35em; width: 0.55rem; height: 0.3rem; border-left: 2px solid var(--eb-blue); border-bottom: 2px solid var(--eb-blue); transform: rotate(-45deg); }
.rc-alt { display: grid; gap: 0.6rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--eb-line); font-size: 0.875rem; }
.rc-alt a { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; font-weight: var(--w-bold); color: var(--eb-navy); }
.rc-alt a span { font-weight: var(--w-body); color: var(--eb-ink-2); }
.rc-alt a:hover { color: var(--eb-blue); }
.rc-alt svg { width: 1rem; height: 1rem; color: var(--eb-blue); flex: none; }
.demo-note { display: block; margin-top: 0.6rem; font-size: 0.75rem; color: var(--eb-ink-2); text-align: center; }
@media (max-width: 60em) { .rc { position: static; } }

/* -- section heads shared by the training sections ------------------------- */
.tr-sec { padding-block: clamp(3.5rem, 2.75rem + 3vw, 6rem); scroll-margin-top: 7rem; }
.tr-sec:not(.bg-surface):not(.bg-sky) + .tr-sec:not(.bg-surface):not(.bg-sky) { padding-top: 0; }
.tr-h { margin-bottom: clamp(1.75rem, 1.4rem + 1.4vw, 2.75rem); max-width: 46rem; }
.tr-h h2 { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.6rem); letter-spacing: -0.025em; margin: 0 0 0.75rem; }
.tr-h p { margin: 0; color: var(--eb-ink); }

/* -- benefits: three ruled columns ------------------------------------------ */
.trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1.25rem, 1rem + 1.5vw, 2.5rem); list-style: none; margin: 0; padding: 0; }
.trio li { border-top: 3px solid var(--eb-yellow); padding-top: 1.1rem; }
.trio h3 { font-size: 1.25rem; margin: 0 0 0.45rem; }
.trio p { margin: 0; color: var(--eb-ink); font-size: 0.9688rem; }
@media (max-width: 48em) { .trio { grid-template-columns: 1fr; } }

/* -- the certification path: three steps on one line ----------------------- */
.cpath { display: grid; grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; counter-reset: p; }
.cpath > li { position: relative; counter-increment: p; padding: 0 1.5rem 0 0; }
.cpath > li::before { content: counter(p); position: relative; z-index: 1; display: grid; place-items: center; width: 2.75rem; height: 2.75rem; margin-bottom: 1.1rem; border-radius: 50%; background: var(--eb-blue); color: var(--eb-white); font-weight: var(--w-heading); font-size: 1.0625rem; box-shadow: 0 0 0 6px var(--eb-white); }
.bg-surface .cpath > li::before { box-shadow: 0 0 0 6px var(--eb-surface); }
.cpath > li::after { content: ""; position: absolute; top: 1.375rem; left: 2.75rem; right: 0; height: 2px; background: var(--eb-sky-200); }
.cpath > li:last-child::after { display: none; }
.cpath > li.is-opt::before { content: "+"; background: var(--eb-white); color: var(--eb-blue); box-shadow: 0 0 0 2px var(--eb-sky-200), 0 0 0 6px var(--eb-white); }
.cpath .lbl { display: block; font-size: 0.72rem; font-weight: var(--w-heading); letter-spacing: 0.12em; text-transform: uppercase; color: var(--eb-blue); margin-bottom: 0.35rem; }
.cpath h3 { font-size: 1.1875rem; margin: 0 0 0.45rem; }
.cpath p { margin: 0; font-size: 0.9375rem; color: var(--eb-ink); }
.cpath .meta { display: block; margin-top: 0.75rem; font-size: 0.8125rem; font-weight: var(--w-bold); color: var(--eb-navy); }
.cpath .meta a { color: var(--eb-blue); }
.path-note { margin: 1.75rem 0 0; padding: 1rem 1.25rem; border-radius: var(--r-md); background: var(--eb-sky-100); color: var(--eb-navy); font-weight: var(--w-semibold); font-size: 0.9375rem; }
@media (max-width: 52em) {
  .cpath { grid-template-columns: 1fr; gap: 1.75rem; }
  .cpath > li { padding: 0 0 0 4rem; }
  .cpath > li::before { position: absolute; left: 0; top: 0; margin: 0; }
  .cpath > li::after { top: 2.75rem; bottom: -1.75rem; left: 1.375rem; right: auto; width: 2px; height: auto; }
}

/* -- the schedule: a real table on desktop, stacked rows on a phone ---------- */
.sched-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 1rem; }
.chips { display: flex; flex-wrap: wrap; gap: 0.35rem; }
.chips button { padding: 0.5rem 0.85rem; border: 1px solid var(--eb-line); border-radius: var(--r-sm); background: var(--eb-white); font: inherit; font-size: 0.8125rem; font-weight: var(--w-heading); color: var(--eb-ink-2); cursor: pointer; transition: background-color var(--dur), color var(--dur), border-color var(--dur); }
.chips button:hover { color: var(--eb-navy); border-color: var(--eb-sky-200); }
.chips button[aria-pressed="true"] { background: var(--eb-navy); border-color: var(--eb-navy); color: var(--eb-white); }
.chips button:focus-visible { outline: 3px solid var(--eb-yellow); outline-offset: 2px; }
.sched-src { font-size: 0.8125rem; color: var(--eb-ink-2); margin: 0; }
.sched { width: 100%; border-collapse: collapse; background: var(--eb-white); border-radius: var(--r-md); overflow: hidden; box-shadow: 0 0 0 1px var(--eb-line); }
.sched th { text-align: left; padding: 0.85rem 1rem; font-size: 0.72rem; font-weight: var(--w-heading); letter-spacing: 0.1em; text-transform: uppercase; color: var(--eb-ink-2); background: var(--eb-surface); border-bottom: 1px solid var(--eb-line); }
.sched td { padding: 1rem; border-bottom: 1px solid var(--eb-line); vertical-align: middle; font-size: 0.9375rem; color: var(--eb-ink); }
.sched tr:last-child td { border-bottom: 0; }
.sched tbody tr { transition: background-color var(--dur); }
.sched tbody tr:hover { background: #F9FBFE; }
.sched .when { font-weight: var(--w-heading); color: var(--eb-navy); white-space: nowrap; }
.sched .where b { display: block; color: var(--eb-navy); }
.sched .where span { font-size: 0.8125rem; color: var(--eb-ink-2); }
.sched .fmt { display: inline-block; padding: 0.2rem 0.5rem; border-radius: var(--r-sm); background: var(--eb-sky-100); color: var(--eb-navy); font-size: 0.75rem; font-weight: var(--w-heading); white-space: nowrap; }
.sched .pr { white-space: nowrap; font-variant-numeric: tabular-nums; }
.sched .pr b { color: var(--eb-navy); font-size: 1.0625rem; }
.sched .pr s { display: block; font-size: 0.8125rem; color: var(--eb-ink-2); }
.sched .act { text-align: right; }
.sched .act .btn { min-height: 2.75rem; padding: 0.55rem 1rem; font-size: 0.875rem; }
.sched tr[hidden] { display: none; }
.sched tr.is-online td { background: var(--eb-sky-100); }
@media (max-width: 48em) {
  .sched, .sched tbody, .sched tr, .sched td { display: block; width: 100%; }
  .sched thead { display: none; }
  .sched { box-shadow: none; background: transparent; }
  .sched tbody { display: grid; gap: 0.75rem; }
  .sched tbody tr { display: grid; grid-template-columns: 1fr auto; gap: 0.35rem 1rem; padding: 1rem; border-radius: var(--r-md); background: var(--eb-white); box-shadow: 0 0 0 1px var(--eb-line); }
  .sched tr.is-online { background: var(--eb-sky-100); }
  .sched td { padding: 0; border: 0; background: transparent !important; }
  .sched .when { grid-column: 1; }
  .sched .pr { grid-column: 2; grid-row: 1; text-align: right; }
  .sched .where, .sched .tm, .sched .fm { grid-column: 1 / -1; }
  .sched .act { grid-column: 1 / -1; text-align: left; margin-top: 0.5rem; }
  .sched .act .btn { width: 100%; }
}

/* -- formats compared: two cards -------------------------------------------- */
.fmt2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1rem, 0.75rem + 1vw, 1.75rem); }
.fmtc { position: relative; display: flex; flex-direction: column; background: var(--eb-white); border-radius: var(--r-lg); box-shadow: 0 0 0 1px var(--eb-line); padding: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.fmtc.is-lead { box-shadow: 0 0 0 2px var(--eb-blue), var(--shadow-md); }
.fmtc .tag { align-self: flex-start; margin-bottom: 0.9rem; padding: 0.25rem 0.6rem; border-radius: var(--r-sm); background: var(--eb-sky-100); color: var(--eb-navy); font-size: 0.72rem; font-weight: var(--w-heading); letter-spacing: 0.08em; text-transform: uppercase; }
.fmtc h3 { font-size: 1.5rem; margin: 0 0 0.4rem; }
.fmtc .pr { margin: 0 0 1.1rem; font-size: 0.9375rem; color: var(--eb-ink); }
.fmtc .pr b { font-size: 1.75rem; color: var(--eb-navy); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.fmtc .pr s { color: var(--eb-ink-2); margin-left: 0.35rem; }
.fmtc ul { list-style: none; margin: 0 0 1.5rem; padding: 0; display: grid; gap: 0.55rem; }
.fmtc li { position: relative; padding-left: 1.5rem; font-size: 0.9375rem; color: var(--eb-ink); }
.fmtc li::before { content: ""; position: absolute; left: 0.1rem; top: 0.4em; width: 0.6rem; height: 0.32rem; border-left: 2px solid var(--eb-blue); border-bottom: 2px solid var(--eb-blue); transform: rotate(-45deg); }
.fmtc li.is-need::before { width: 0.45rem; height: 0.45rem; top: 0.45em; border: 0; border-radius: 50%; background: var(--eb-sky); transform: none; }
.fmtc .btn, .fmtc .link-arrow { margin-top: auto; align-self: flex-start; }
@media (max-width: 48em) { .fmt2 { grid-template-columns: 1fr; } }

/* -- topics and what's included --------------------------------------------- */
.learn { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 1.5rem + 3vw, 4.5rem); align-items: start; }
.topics { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 1.5rem; }
.topics li { break-inside: avoid; display: flex; align-items: baseline; gap: 0.7rem; padding: 0.7rem 0; border-top: 1px solid var(--eb-line); font-weight: var(--w-semibold); color: var(--eb-navy); font-size: 0.9688rem; }
.topics li span { flex: none; min-width: 1.6rem; font-size: 0.72rem; font-weight: var(--w-heading); color: var(--eb-blue); font-variant-numeric: tabular-nums; }
.incl { background: var(--eb-surface); border-radius: var(--r-lg); padding: clamp(1.4rem, 1.1rem + 1vw, 2rem); }
.incl h3 { font-size: 1.25rem; margin: 0 0 1rem; }
.incl ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.25rem; }
.incl li { display: flex; justify-content: space-between; gap: 1rem; padding: 0.75rem 0; border-bottom: 1px solid var(--eb-line); font-weight: var(--w-semibold); color: var(--eb-navy); font-size: 0.9375rem; }
.incl li span { flex: none; color: var(--eb-ink-2); font-weight: var(--w-bold); font-size: 0.8125rem; white-space: nowrap; }
.incl p { margin: 1rem 0 0; font-size: 0.9063rem; color: var(--eb-ink); }
@media (max-width: 60em) { .learn { grid-template-columns: 1fr; } }
@media (max-width: 30em) { .topics { columns: 1; } }

/* -- one learner's words ------------------------------------------------------ */
.tq { margin: 0; max-width: 50rem; }
.tq blockquote { margin: 0; font-size: clamp(1.3rem, 1.05rem + 1vw, 1.9rem); font-weight: var(--w-heading); letter-spacing: -0.02em; line-height: 1.3; color: var(--eb-navy); }
.tq blockquote::before { content: "\201C"; display: block; height: 2.25rem; font-size: 4.5rem; line-height: 1; color: var(--eb-yellow); }
.tq figcaption { margin-top: 1rem; font-size: 0.875rem; font-weight: var(--w-bold); color: var(--eb-ink-2); }

/* -- the team door: on the colour block, the one group action --------------- */
.teamband { display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 1.5rem 3rem; align-items: center; padding: clamp(1.75rem, 1.25rem + 2.5vw, 3.25rem); border-radius: var(--r-lg); background: var(--eb-blue); color: var(--eb-white); position: relative; overflow: hidden; }
.teamband::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(36rem 20rem at 95% 110%, rgba(152,188,228,0.35), transparent 60%); }
.teamband > * { position: relative; z-index: 1; }
.teamband .k { display: block; margin-bottom: 0.6rem; font-size: 0.72rem; font-weight: var(--w-heading); letter-spacing: 0.14em; text-transform: uppercase; color: var(--eb-white); opacity: 0.85; }
.teamband h2 { color: var(--eb-white); font-size: clamp(1.6rem, 1.2rem + 1.4vw, 2.3rem); letter-spacing: -0.02em; margin: 0 0 0.6rem; }
.teamband p { margin: 0; color: var(--eb-white); max-width: 36em; }
.teamband ul { display: flex; flex-wrap: wrap; gap: 0.4rem 1.25rem; list-style: none; margin: 1rem 0 0; padding: 0; font-size: 0.875rem; font-weight: var(--w-bold); }
.teamband ul li::before { content: ""; display: inline-block; width: 0.45rem; height: 0.45rem; margin-right: 0.5rem; border-radius: 2px; background: var(--eb-yellow); vertical-align: 0.1em; }
.teamband .cluster { flex-direction: column; align-items: stretch; gap: 0.75rem; }
@media (max-width: 52em) { .teamband { grid-template-columns: 1fr; } .teamband .cluster { flex-direction: row; } }

/* the FAQ split: heading left, answers right */
.faqsplit { display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.4fr); gap: clamp(2rem, 1.5rem + 3vw, 5rem); align-items: start; }
.faqsplit .tr-h { position: sticky; top: 7rem; }
.faqsplit .faq { max-width: none; }
.faq .answer ul { margin: 0 0 0.75rem; padding-left: 1.1rem; display: grid; gap: 0.3rem; font-size: 0.9375rem; color: var(--eb-ink); }
@media (max-width: 60em) { .faqsplit { grid-template-columns: 1fr; } .faqsplit .tr-h { position: static; } }

/* -- the course card: the catalog's one unit, also used for related courses -- */
.ccgrid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 0.75rem + 1vw, 1.5rem); }
.ccgrid.is-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 68em) { .ccgrid.is-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 60em) { .ccgrid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 40em) { .ccgrid, .ccgrid.is-4 { grid-template-columns: 1fr; } }
.cc { position: relative; display: flex; flex-direction: column; background: var(--eb-white); border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--eb-line); padding: 1.25rem 1.25rem 1.1rem; color: inherit; text-decoration: none; transition: transform 300ms var(--ease), box-shadow 300ms var(--ease); }
.cc::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; border-radius: var(--r-md) 0 0 var(--r-md); background: var(--c, var(--eb-blue)); }
.cc:hover { transform: translateY(-4px); box-shadow: 0 24px 48px -30px rgba(30,42,71,0.45), 0 0 0 1px rgba(30,42,71,0.10); color: inherit; }
.cc:focus-visible { outline: 3px solid var(--eb-yellow); outline-offset: 3px; }
.cc .cat { font-size: 0.7rem; font-weight: var(--w-heading); letter-spacing: 0.1em; text-transform: uppercase; color: var(--eb-blue); margin-bottom: 0.5rem; }
.cc h3 { font-size: 1.0938rem; letter-spacing: -0.012em; line-height: 1.25; margin: 0 0 0.45rem; color: var(--eb-navy); transition: color var(--dur); }
.cc:hover h3 { color: var(--eb-blue); }
.cc .lv { margin: 0 0 0.85rem; font-size: 0.8125rem; font-weight: var(--w-semibold); color: var(--eb-ink-2); }
.cc .fm { display: flex; flex-wrap: wrap; gap: 0.3rem; margin-bottom: 0.9rem; }
.cc .fm span { padding: 0.2rem 0.5rem; border-radius: var(--r-sm); background: var(--eb-sky-100); color: var(--eb-navy); font-size: 0.72rem; font-weight: var(--w-heading); }
.cc .nx { margin: 0 0 0.9rem; font-size: 0.8125rem; color: var(--eb-ink); }
.cc .nx b { color: var(--eb-navy); }
.cc .ft { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 0.75rem; padding-top: 0.85rem; border-top: 1px solid var(--eb-line); }
.cc .pr { font-size: 0.8125rem; color: var(--eb-ink-2); font-weight: var(--w-semibold); }
.cc .pr b { font-size: 1.125rem; color: var(--eb-navy); font-weight: var(--w-heading); font-variant-numeric: tabular-nums; }
.cc .go { display: inline-flex; align-items: center; gap: 0.35rem; font-size: 0.8125rem; font-weight: var(--w-heading); color: var(--eb-navy); white-space: nowrap; }
.cc .go svg { width: 0.95rem; height: 0.95rem; transition: transform 250ms var(--ease); }
.cc:hover .go svg { transform: translateX(3px); }
.cc[hidden] { display: none; }

/* -- the course finder ------------------------------------------------------- */
.fd { display: grid; grid-template-columns: 16.5rem minmax(0, 1fr); gap: clamp(1.5rem, 1rem + 2vw, 3rem); align-items: start; }
.fd-side { position: sticky; top: 6.5rem; display: grid; gap: 1.5rem; }
.fd-side fieldset { margin: 0; padding: 0; border: 0; }
.fd-side legend { margin-bottom: 0.6rem; padding: 0; font-size: 0.72rem; font-weight: var(--w-heading); letter-spacing: 0.12em; text-transform: uppercase; color: var(--eb-navy); }
.fd-side .choices label { padding: 0.6rem 0.75rem; font-size: 0.875rem; justify-content: flex-start; }
.fd-side .choices label small { margin-left: auto; font-size: 0.75rem; font-weight: var(--w-bold); color: var(--eb-ink-2); }
.fd-side .field select { min-height: 2.75rem; padding: 0.55rem 0.75rem; font-size: 0.9375rem; }
.fd-reset { justify-self: start; padding: 0; border: 0; background: none; font: inherit; font-size: 0.875rem; font-weight: var(--w-bold); color: var(--eb-blue); cursor: pointer; border-bottom: 1px solid var(--eb-sky-200); }
.fd-reset:hover { color: var(--eb-navy); border-bottom-color: var(--eb-navy); }
.fd-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; margin-bottom: 1.25rem; }
.fd-count { margin: 0; font-size: 0.9375rem; font-weight: var(--w-bold); color: var(--eb-navy); }
.fd-count span { color: var(--eb-ink-2); font-weight: var(--w-semibold); }
.fd-tabs { display: flex; gap: 0.35rem; padding: 0.3rem; border-radius: var(--r-md); background: #EEF2F8; overflow-x: auto; scrollbar-width: none; margin-bottom: 1.25rem; }
.fd-tabs::-webkit-scrollbar { display: none; }
.fd-tabs button { flex: none; padding: 0.6rem 0.9rem; border: 0; border-radius: var(--r-sm); background: transparent; font: inherit; font-size: 0.875rem; font-weight: var(--w-heading); color: var(--eb-ink-2); cursor: pointer; white-space: nowrap; transition: background-color 250ms var(--ease), color 250ms var(--ease), box-shadow 250ms var(--ease); }
.fd-tabs button span { margin-left: 0.35rem; font-size: 0.72rem; color: var(--eb-blue); }
.fd-tabs button:hover { color: var(--eb-navy); }
.fd-tabs button[aria-pressed="true"] { background: var(--eb-white); color: var(--eb-navy); box-shadow: 0 6px 16px -10px rgba(30,42,71,0.45), 0 0 0 1px rgba(30,42,71,0.06); }
.fd-tabs button:focus-visible { outline: 3px solid var(--eb-yellow); outline-offset: -3px; }
.fd-empty { padding: 2.5rem 1.5rem; border-radius: var(--r-md); background: var(--eb-surface); text-align: center; }
.fd-empty h3 { font-size: 1.125rem; margin: 0 0 0.4rem; }
.fd-empty p { margin: 0 0 1rem; color: var(--eb-ink); }
.fd-src { margin: 1.5rem 0 0; font-size: 0.8125rem; color: var(--eb-ink-2); }
.fd-toggle { display: none; }
@media (max-width: 60em) {
  .fd { grid-template-columns: 1fr; }
  .fd-side { position: static; display: none; padding: 1.25rem; border-radius: var(--r-md); box-shadow: 0 0 0 1px var(--eb-line); background: var(--eb-white); }
  .fd.is-open .fd-side { display: grid; }
  .fd-toggle { display: inline-flex; }
}
.tr-search { position: relative; max-width: 36rem; margin-top: 1.75rem; }
.tr-search input { width: 100%; min-height: 3.5rem; padding: 0.9rem 1rem 0.9rem 3rem; border: 1.5px solid var(--eb-line); border-radius: var(--r-md); background: var(--eb-white); font: inherit; font-size: 1.0625rem; color: var(--eb-navy); box-shadow: var(--shadow-sm); }
.tr-search input:focus { outline: none; border-color: var(--eb-blue); box-shadow: 0 0 0 3px rgba(61,112,183,0.18); }
.tr-search svg { position: absolute; left: 1.05rem; top: 50%; width: 1.2rem; height: 1.2rem; transform: translateY(-50%); color: var(--eb-ink-2); pointer-events: none; }
.tr-quick { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 1.1rem; font-size: 0.875rem; font-weight: var(--w-semibold); color: var(--eb-ink-2); }
.tr-quick a { color: var(--eb-blue); font-weight: var(--w-bold); }

/* -- certification: the credential beside its facts -------------------------- */
.cred { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(2rem, 1.5rem + 3vw, 4.5rem); align-items: start; }
.cred .prose p { font-size: 1.0313rem; }
.cred-card { border-radius: var(--r-lg); overflow: hidden; background: var(--eb-white); box-shadow: var(--shadow-md), 0 0 0 1px var(--eb-line); }
.cred-card .ph { aspect-ratio: 16 / 10; background: var(--eb-sky-100); }
.cred-card .ph img { width: 100%; height: 100%; object-fit: cover; }
.cred-card dl { margin: 0; padding: 0.5rem 1.5rem 1.25rem; }
.cred-card dl > div { display: grid; grid-template-columns: 7.5rem minmax(0, 1fr); gap: 1rem; padding: 0.85rem 0; border-bottom: 1px solid var(--eb-line); }
.cred-card dl > div:last-child { border-bottom: 0; }
.cred-card dt { font-size: 0.75rem; font-weight: var(--w-heading); letter-spacing: 0.08em; text-transform: uppercase; color: var(--eb-ink-2); padding-top: 0.15rem; }
.cred-card dd { margin: 0; font-size: 0.9375rem; font-weight: var(--w-semibold); color: var(--eb-navy); }
@media (max-width: 60em) { .cred { grid-template-columns: 1fr; } }

.whofor { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 1.25rem 0 0; padding: 0; }
.whofor li { padding: 0.55rem 0.9rem; border-radius: var(--r-sm); background: var(--eb-white); box-shadow: 0 0 0 1px var(--eb-line); font-size: 0.9375rem; font-weight: var(--w-bold); color: var(--eb-navy); }

/* the course list on a certification page: one row per course */
.crow { list-style: none; margin: 0; padding: 0; border-top: 2px solid var(--eb-navy); }
.crow li { border-bottom: 1px solid var(--eb-line); }
.crow a { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr) 9.5rem 1.5rem; gap: 1rem 1.5rem; align-items: center; padding: 1.2rem 0.25rem; color: inherit; text-decoration: none; transition: background-color var(--dur); }
.crow a:hover { background: #F9FBFE; }
.crow .nm b { display: block; font-size: 1.125rem; color: var(--eb-navy); letter-spacing: -0.01em; transition: color var(--dur); }
.crow a:hover .nm b { color: var(--eb-blue); }
.crow .nm span { font-size: 0.8125rem; color: var(--eb-ink-2); font-weight: var(--w-semibold); }
.crow .fm { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.crow .fm span { padding: 0.2rem 0.5rem; border-radius: var(--r-sm); background: var(--eb-sky-100); color: var(--eb-navy); font-size: 0.72rem; font-weight: var(--w-heading); }
.crow .pr { text-align: right; font-size: 0.8125rem; color: var(--eb-ink-2); font-weight: var(--w-semibold); }
.crow .pr b { display: block; font-size: 1.125rem; color: var(--eb-navy); font-weight: var(--w-heading); font-variant-numeric: tabular-nums; }
.crow svg { width: 1.1rem; height: 1.1rem; color: var(--eb-blue); transition: transform 250ms var(--ease); }
.crow a:hover svg { transform: translateX(4px); }
@media (max-width: 48em) {
  .crow a { grid-template-columns: minmax(0, 1fr) auto; }
  .crow .fm { grid-column: 1; grid-row: 2; }
  .crow .pr { grid-column: 2; grid-row: 1 / 3; }
  .crow svg { display: none; }
}

/* -- group training: who it is for, as three doors ---------------------------- */
.doors3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 0.75rem + 1vw, 1.75rem); }
.gdoor { display: flex; flex-direction: column; background: var(--eb-white); border-radius: var(--r-lg); overflow: hidden; box-shadow: 0 0 0 1px var(--eb-line); }
.gdoor .ph { aspect-ratio: 16 / 10; background: var(--eb-sky-100); overflow: hidden; }
.gdoor .ph img { width: 100%; height: 100%; object-fit: cover; transition: transform 900ms var(--ease); }
.gdoor:hover .ph img { transform: scale(1.04); }
.gdoor .bd { display: flex; flex-direction: column; gap: 0.6rem; padding: clamp(1.2rem, 1rem + 0.8vw, 1.6rem); flex: 1; }
.gdoor .k { font-size: 0.7rem; font-weight: var(--w-heading); letter-spacing: 0.1em; text-transform: uppercase; color: var(--eb-blue); }
.gdoor h3 { font-size: 1.3rem; margin: 0; }
.gdoor p { margin: 0; font-size: 0.9375rem; color: var(--eb-ink); }
.gdoor ul { list-style: none; margin: 0.25rem 0 0.5rem; padding: 0; display: grid; gap: 0.35rem; }
.gdoor li { position: relative; padding-left: 1.1rem; font-size: 0.875rem; font-weight: var(--w-semibold); color: var(--eb-navy); }
.gdoor li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.4rem; height: 0.4rem; border-radius: 2px; background: var(--eb-yellow); }
.gdoor .link-arrow { margin-top: auto; font-size: 0.9375rem; }
@media (max-width: 60em) { .doors3 { grid-template-columns: 1fr; } .gdoor { display: grid; grid-template-columns: 14rem minmax(0, 1fr); } .gdoor .ph { aspect-ratio: auto; height: 100%; } }
@media (max-width: 40em) { .gdoor { display: flex; } .gdoor .ph { aspect-ratio: 16 / 10; height: auto; } }

/* ways to train: four ruled cells */
.ways { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--eb-line); }
.ways li { padding: 1.5rem 1.5rem 1.5rem 0; border-bottom: 1px solid var(--eb-line); }
.ways li + li { padding-left: 1.5rem; border-left: 1px solid var(--eb-line); }
.ways .ic { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: var(--r-sm); background: var(--eb-sky-100); color: var(--eb-blue); margin-bottom: 0.9rem; }
.ways .ic svg { width: 1.35rem; height: 1.35rem; }
.ways h3 { font-size: 1.0625rem; margin: 0 0 0.4rem; }
.ways p { margin: 0; font-size: 0.9063rem; color: var(--eb-ink); }
@media (max-width: 60em) { .ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } .ways li:nth-child(3) { padding-left: 0; border-left: 0; } }
@media (max-width: 40em) { .ways { grid-template-columns: 1fr; } .ways li, .ways li + li { padding-left: 0; border-left: 0; } }

/* the request: what happens, then the form card */
.rq { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(2rem, 1.5rem + 3vw, 4.5rem); align-items: start; }
.rq-card { background: var(--eb-white); border-radius: var(--r-lg); box-shadow: var(--shadow-lg), 0 0 0 1px var(--eb-line); padding: clamp(1.4rem, 1rem + 1.5vw, 2.25rem); }
.rq-card h3 { font-size: 1.375rem; margin: 0 0 0.35rem; }
.rq-card > p { margin: 0 0 1.5rem; color: var(--eb-ink); font-size: 0.9375rem; }
.rq-card .choices { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.rq-card .ok { display: grid; justify-items: start; gap: 0.5rem; }
.rq-card .ok[hidden] { display: none; }
.rq-card .ok i { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; background: var(--eb-success); color: var(--eb-white); }
.rq-card .ok i svg { width: 1.3rem; height: 1.3rem; }
.scope-note { margin-top: 1.5rem; padding: 1rem 1.1rem; border-left: 3px solid var(--eb-sky); background: var(--eb-surface); border-radius: 0 var(--r-sm) var(--r-sm) 0; font-size: 0.875rem; color: var(--eb-ink); }
.scope-note b { color: var(--eb-navy); }
@media (max-width: 60em) { .rq { grid-template-columns: 1fr; } }
@media (max-width: 40em) { .rq-card .choices { grid-template-columns: 1fr; } }

/* -- the phone register bar: price and the one action, always in reach ------- */
.rbar { display: none; }
@media (max-width: 60em) {
  .rbar { position: fixed; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; z-index: 55; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.6rem 0.6rem 0.6rem 1rem; border-radius: var(--r-md); background: rgba(255,255,255,0.96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); box-shadow: 0 18px 40px -16px rgba(30,42,71,0.45), 0 0 0 1px var(--eb-line); transform: translateY(130%); transition: transform 400ms var(--ease); }
  .rbar.is-on { transform: none; }
  .rbar .p { font-size: 0.75rem; font-weight: var(--w-semibold); color: var(--eb-ink-2); line-height: 1.2; }
  .rbar .p b { display: block; font-size: 1.125rem; color: var(--eb-navy); font-weight: var(--w-heading); }
  .rbar .btn { min-height: 2.9rem; padding: 0.6rem 1.25rem; }
}
@media (prefers-reduced-motion: reduce) { .rbar { transition: none; } .cc, .gdoor .ph img { transition: none; } }

/* -- the closer for training pages ------------------------------------------- */
.trclose { text-align: center; }
.trclose h2 { font-size: clamp(1.9rem, 1.3rem + 2.2vw, 3.2rem); letter-spacing: -0.03em; line-height: 1.06; margin: 0 auto 0.9rem; max-width: 16em; }
.trclose p { margin: 0 auto; max-width: 34em; color: var(--eb-ink); font-size: 1.0625rem; }
.trclose .cluster { justify-content: center; margin-top: 1.75rem; gap: 0.75rem 1.5rem; }
.trclose .tel { font-size: 1.25rem; font-weight: var(--w-heading); color: var(--eb-navy); }
.trclose .tel:hover { color: var(--eb-blue); }

/* -- the TREC overview: who it serves, the three-part offer ------------------ */
.trec3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(1rem, 0.75rem + 1vw, 1.75rem); list-style: none; margin: 0; padding: 0; }
.trec3 li { display: flex; flex-direction: column; padding: clamp(1.3rem, 1rem + 1vw, 1.9rem); border-radius: var(--r-lg); background: var(--eb-white); box-shadow: 0 0 0 1px var(--eb-line); }
.trec3 .n { font-size: 0.72rem; font-weight: var(--w-heading); letter-spacing: 0.12em; color: var(--eb-blue); margin-bottom: 0.75rem; }
.trec3 h3 { font-size: 1.25rem; margin: 0 0 0.5rem; }
.trec3 p { margin: 0 0 1rem; font-size: 0.9375rem; color: var(--eb-ink); }
.trec3 ul { list-style: none; margin: auto 0 0; padding: 0.9rem 0 0; border-top: 1px solid var(--eb-line); display: grid; gap: 0.4rem; }
.trec3 ul li { padding: 0 0 0 1.1rem; border: 0; box-shadow: none; border-radius: 0; background: none; position: relative; font-size: 0.875rem; font-weight: var(--w-semibold); color: var(--eb-navy); display: block; }
.trec3 ul li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 0.4rem; height: 0.4rem; border-radius: 2px; background: var(--eb-yellow); }
@media (max-width: 60em) { .trec3 { grid-template-columns: 1fr; } }
.statepick { display: flex; flex-wrap: wrap; gap: 0.5rem; list-style: none; margin: 0; padding: 0; }
.statepick a { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1rem; border-radius: var(--r-sm); background: var(--eb-white); box-shadow: 0 0 0 1px var(--eb-line); font-weight: var(--w-bold); color: var(--eb-navy); }
.statepick a:hover { box-shadow: 0 0 0 1.5px var(--eb-blue); color: var(--eb-blue); }
.statepick a small { font-weight: var(--w-semibold); color: var(--eb-ink-2); font-size: 0.75rem; }
.reslist { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: 2rem; }
.reslist li { break-inside: avoid; border-top: 1px solid var(--eb-line); }
.reslist a { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; padding: 0.8rem 0; font-weight: var(--w-semibold); color: var(--eb-navy); font-size: 0.9375rem; }
.reslist a:hover { color: var(--eb-blue); }
.reslist svg { width: 1rem; height: 1rem; flex: none; color: var(--eb-blue); }
@media (max-width: 48em) { .reslist { columns: 1; } }
.trclose .fin-k { display: block; margin: 0 auto clamp(1.1rem, 0.9rem + 0.8vw, 1.6rem); font-size: 0.72rem; font-weight: var(--w-heading); letter-spacing: 0.14em; text-transform: uppercase; color: var(--eb-ink-2); }
.fd > * { min-width: 0; }
[data-rc-dates][hidden], .rc-price [hidden] { display: none !important; }
@media (max-width: 60em) { .ch-photo { display: none; } }
.tr-top + .tr-sec { padding-top: clamp(1rem, 0.5rem + 1vw, 2rem); }
@media (min-width: 60.01em) { .fd-tabs { flex-wrap: wrap; overflow: visible; } }
.fd-more { display: flex; margin: 1.5rem auto 0; }
.fd-more[hidden] { display: none; }

/* vet fixes, 2026-10-21 */
.cc .pr { white-space: nowrap; }
.cpath > li { display: flex; flex-direction: column; }
.cpath > li .meta { margin-top: auto; padding-top: 0.75rem; }
@media (max-width: 60em) { .rbar.is-foot { transform: translateY(130%); } }
.whofor li { box-shadow: none; background: var(--eb-sky-100); border-radius: var(--r-sm); }
@media (max-width: 48em) {
  .subnav ul, .fd-tabs { -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
  .crow a { grid-template-columns: 1fr; gap: 0.5rem; }
  .crow .fm { grid-column: 1; grid-row: auto; }
  .crow .pr { grid-column: 1; grid-row: auto; text-align: left; }
  .crow .pr b { display: inline; margin-left: 0.25rem; }
}
@media (max-width: 40em) { .tr-crumbs [aria-current="page"] { display: none; } }