/* ============================================================
   CMS Page-Builder block styles — Aon-inspired design system.
   Loaded on the frontend AND inside the admin builder preview,
   so blocks look identical in both places.
   ============================================================ */
/* ============================================================
   Typographic scale — one ladder for every block, fluid between
   a 360px phone and a 1600px desktop. Sizes are the *only* place
   font-size is decided; blocks reference the tokens, never px.
   Declared on :root as well as .cmsb so the admin builder preview,
   which loads this sheet on its own, gets the same scale.
   ============================================================ */
:root,
.cmsb {
    --t-2xs:  .75rem;                                       /* 12   tracked-out uppercase only */
    --t-xs:   .8125rem;                                     /* 13   captions, breadcrumbs      */
    --t-sm:   .875rem;                                      /* 14   meta lines                 */
    --t-ms:   .9375rem;                                     /* 15   dense body                 */
    --t-base: clamp(.96875rem, .93rem + .17vw, 1.0625rem);  /* 16 → 17  body                   */
    --t-md:   clamp(1.0625rem, 1rem + .22vw, 1.1875rem);    /* 17 → 19  standfirst             */
    --t-h4:   clamp(1.0625rem, .99rem + .27vw, 1.25rem);    /* 17 → 20                         */
    --t-h3:   clamp(1.125rem, 1.04rem + .36vw, 1.375rem);   /* 18 → 22                         */
    --t-h2s:  clamp(1.375rem, 1.15rem + .95vw, 1.75rem);    /* 22 → 28  sub-heads inside prose */
    --t-h2:   clamp(1.625rem, 1.19rem + 1.9vw, 2.75rem);    /* 26 → 44  section heads          */
    --t-h1:   clamp(2rem, 1.44rem + 2.45vw, 3.5rem);        /* 32 → 56  page heads             */
    --t-display: clamp(2.25rem, 1.48rem + 3.35vw, 4.25rem); /* 36 → 68  stat figures           */
    --t-hero:    clamp(1.875rem, 1.33rem + 2.4vw, 3.25rem); /* 30 → 52  homepage hero          */

    /* line heights and measure */
    --t-lh-display: 1.05;
    --t-lh-head: 1.16;
    --t-lh-body: 1.65;
    --t-measure: 62ch;
}
.cmsb {
    /* ---- signature palette ---- */
    /* black + navy blue */
    --b-black: #0a0d16;
    --b-navy: #141c33;          /* dark surfaces */
    --b-navy-2: #1b2440;        /* second navy, for adjacent panels */
    --b-accent: #0a0d16;        /* black — accent on light backgrounds */
    --b-accent-soft: #4a72b8;   /* navy blue — accent on dark backgrounds */

    /* aliases: the whole sheet refers to these, so the theme swaps in one place */
    --b-red: var(--b-accent);
    --b-red-dark: #000;
    --b-gray-01: #46535e;
    --b-gray-02: #5d6d78;
    --b-gray-03: #82939a;
    --b-gray-04: #acc0c4;
    --b-gray-05: #cddbde;
    --b-gray-06: #e5eff0;
    --b-gray-07: #eef6f7;
    --b-gray-08: #f9fcfc;

    /* ---- legacy aliases (kept so older markup keeps working) ---- */
    --b-primary: var(--b-red);
    --b-primary-dark: var(--b-red-dark);
    --b-dark: var(--b-navy);
    --b-muted: var(--b-gray-02);
    --b-bg: var(--b-gray-07);
    --b-border: var(--b-gray-05);

    /* ---- rhythm ---- */
    --b-gap: clamp(24px, 2.6vw, 40px);
    --b-pad: clamp(20px, 3.2vw, 48px);

    font-family: 'Helvetica Now Text', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    color: var(--b-navy);
    box-sizing: border-box;
}
.cmsb *, .cmsb *::before, .cmsb *::after { box-sizing: border-box; }

.cmsb-wrap { max-width: 1440px; margin: 0 auto; padding: 0 var(--b-pad); width: 100%; }
.cmsb h1, .cmsb h2, .cmsb h3, .cmsb h4 {
    font-family: 'Helvetica Now Display', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-weight: 500; letter-spacing: -.02em; line-height: var(--t-lh-head); margin: 0 0 .4em; color: inherit;
    text-wrap: balance;
}
.cmsb h1 { font-size: var(--t-h1); line-height: var(--t-lh-display); }
.cmsb h2 { font-size: var(--t-h2); }
.cmsb h3 { font-size: var(--t-h3); letter-spacing: -.01em; line-height: 1.25; }
.cmsb h4 { font-size: var(--t-h4); letter-spacing: 0; }
.cmsb p { font-size: var(--t-base); line-height: var(--t-lh-body); }
.cmsb img { max-width: 100%; height: auto; display: block; }
.cmsb section { padding: clamp(56px, 6.4vw, 104px) 0; }
.cmsb .b-alt { background: var(--b-gray-07); }
.cmsb .b-dark { background: var(--b-navy); color: #fff; }

/* ---------- section head (left aligned + red rule — Aon style) ---------- */
.cmsb .b-head { max-width: 62ch; margin: 0 0 clamp(36px, 4vw, 56px); }
.cmsb .b-head.center { margin-left: auto; margin-right: auto; text-align: center; }
.cmsb .b-head::before {
    content: ''; display: block; width: 64px; height: 4px;
    background: var(--b-red); margin-bottom: 28px;
}
.cmsb .b-head.center::before { margin-left: auto; margin-right: auto; }
.cmsb .b-head h2 { margin: 0 0 16px; }
.cmsb .b-head p { color: var(--b-gray-01); font-size: var(--t-md); line-height: 1.55; margin: 0; max-width: 60ch; }

/* eyebrow / tag */
.cmsb .b-eyebrow {
    display: inline-block; font-size: var(--t-2xs); font-weight: 600; letter-spacing: .14em;
    text-transform: uppercase; color: var(--b-red); margin-bottom: 14px;
}

/* ---------- buttons: square corners, red fill, inverts on hover ---------- */
.cmsb .b-btn {
    display: inline-flex; align-items: center; justify-content: space-between; gap: 24px;
    background: var(--b-red); border: 1px solid var(--b-red); color: #fff;
    padding: 15px 24px; border-radius: 0; font-size: var(--t-base); line-height: 24px; font-weight: 500;
    text-decoration: none; cursor: pointer;
    transition: background .25s ease, color .25s ease, border-color .25s ease;
}
.cmsb .b-btn:hover { background: transparent; color: var(--b-red); }
.cmsb .b-btn i { font-size: var(--t-xs); transition: transform .25s ease; }
.cmsb .b-btn:hover i { transform: translateX(4px); }

/* secondary: outlined */
.cmsb .b-btn.ghost { background: #fff; color: var(--b-navy); border-color: var(--b-red); }
.cmsb .b-btn.ghost i { color: var(--b-red); }
.cmsb .b-btn.ghost:hover { background: var(--b-red); color: #fff; }
.cmsb .b-btn.ghost:hover i { color: #fff; }

/* on dark backgrounds */
.cmsb .b-dark .b-btn.ghost, .cmsb .on-dark .b-btn.ghost {
    background: transparent; color: #fff; border-color: #fff;
}
.cmsb .b-dark .b-btn.ghost i, .cmsb .on-dark .b-btn.ghost i { color: #fff; }
.cmsb .b-dark .b-btn.ghost:hover, .cmsb .on-dark .b-btn.ghost:hover { background: #fff; color: var(--b-navy); }
.cmsb .b-dark .b-btn.ghost:hover i, .cmsb .on-dark .b-btn.ghost:hover i { color: var(--b-red); }

/* tertiary link: navy text, thin underline, red arrow */
.cmsb .more, .cmsb .b-more {
    display: inline-flex; align-items: center; gap: 10px; text-decoration: none;
    font-size: var(--t-base); font-weight: 500; color: var(--b-navy);
}
.cmsb .more span, .cmsb .b-more span {
    background-image: linear-gradient(var(--b-red), var(--b-red));
    background-size: 100% 1px; background-repeat: no-repeat; background-position: 0 100%;
    padding-bottom: 2px;
}
.cmsb .more i, .cmsb .b-more i { color: var(--b-red); font-size: var(--t-2xs); transition: transform .25s ease; }
.cmsb .more:hover i, .cmsb .b-more:hover i { transform: translateX(5px); }
.cmsb .b-dark .more, .cmsb .on-dark .more { color: #fff; }

/* ---------- grid ----------
   min-width:0 on every grid child: aspect-ratio boxes otherwise derive an
   automatic minimum width from the row height and overflow the container. */
.cmsb-grid { display: grid; gap: var(--b-gap); }
.cmsb-grid > *, .cmsb-fwi .grid > *, .cmsb-contact .grid > *, .cmsb-hero .hero-inner > * { min-width: 0; }
.cmsb-grid.c2 { grid-template-columns: repeat(2, 1fr); }
.cmsb-grid.c3 { grid-template-columns: repeat(3, 1fr); }
.cmsb-grid.c4 { grid-template-columns: repeat(4, 1fr); }

/* ---------- card (16:9 media on top, square corners) ---------- */
.cmsb-card {
    background: #fff; border: 0; border-radius: 0; display: flex; flex-direction: column;
    position: relative;
}
.cmsb-card .img {
    aspect-ratio: 16 / 9; background: var(--b-gray-06) center/cover no-repeat;
    margin-bottom: 24px; overflow: hidden;
}
.cmsb-card .ic {
    width: 56px; height: 56px; border-radius: 0; background: var(--b-gray-07);
    border-bottom: 3px solid var(--b-red); color: var(--b-red);
    display: flex; align-items: center; justify-content: center; font-size: var(--t-h3); margin-bottom: 24px;
}
.cmsb-card h3 { margin: 0 0 12px; }
.cmsb-card p { color: var(--b-gray-01); font-size: var(--t-base); margin: 0 0 20px; flex: 1; }
.cmsb-card .more { margin-top: auto; align-self: flex-start; }

/* ================= page header ================= */
.cmsb-pageheader {
    background: var(--b-navy); color: #fff; position: relative;
    padding: 128px 0 96px; overflow: hidden; text-align: center;
}
.cmsb-pageheader.has-img { background-size: cover; background-position: center; }
.cmsb-pageheader::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(20,28,51,.92) 0%, rgba(20,28,51,.72) 55%, rgba(20,28,51,.4) 100%);
}
.cmsb-pageheader .cmsb-wrap { position: relative; z-index: 2; }
.cmsb-pageheader h1 { color: #fff; max-width: 18ch; margin: 0 auto; font-size: var(--t-h1); }
.cmsb-pageheader h1::before {
    content: ''; display: block; width: 64px; height: 4px; background: var(--b-red);
    margin: 0 auto 32px;
}
.cmsb-pageheader p { color: var(--b-gray-05); font-size: var(--t-h4); margin: 24px auto 0; max-width: 720px; }
.cmsb-pageheader.left { text-align: left; }
.cmsb-pageheader.left h1, .cmsb-pageheader.left p { margin-left: 0; margin-right: 0; }
.cmsb-pageheader.left h1::before { margin-left: 0; }

/* ================= hero (content panel + frosted quicklinks over image) ================= */
.cmsb section.cmsb-hero { padding: 0; }
.cmsb-hero {
    position: relative; background: var(--b-navy); min-height: 640px;
    display: flex; align-items: stretch; overflow: hidden;
}
.cmsb-hero .hero-bg { position: absolute; inset: 0; background: var(--b-navy) center/cover no-repeat; }
.cmsb-hero .hero-bg::after { content: ''; position: absolute; inset: 0; background: rgba(20,28,51,.35); }
.cmsb-hero .hero-inner {
    position: relative; z-index: 2; display: flex; width: 100%; max-width: 1440px; margin: 0 auto;
}
.cmsb-hero .hero-panel {
    background: var(--b-gray-07); color: var(--b-navy);
    flex: 0 0 54%; padding: 96px var(--b-pad);
    display: flex; flex-direction: column; justify-content: center;
}
.cmsb-hero .badge {
    display: inline-block; align-self: flex-start; background: var(--b-red); color: #fff;
    font-size: var(--t-2xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    padding: 7px 14px; margin-bottom: 28px;
}
.cmsb-hero h1 { margin: 0 0 24px; }
.cmsb-hero h1 .hl { color: var(--b-red); }
.cmsb-hero p.sub { font-size: var(--t-h4); line-height: 1.5; color: var(--b-gray-01); margin: 0 0 40px; max-width: 46ch; }
.cmsb-hero .btns { display: flex; gap: 16px; flex-wrap: wrap; }
.cmsb-hero .hero-quick {
    flex: 0 0 26%; padding: 96px 40px;
    background: rgba(249,252,252,.82); backdrop-filter: blur(15px); -webkit-backdrop-filter: blur(15px);
    display: flex; flex-direction: column; justify-content: center;
}
.cmsb-hero .hero-quick .qh {
    font-size: var(--t-2xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--b-gray-02); margin-bottom: 8px;
}
.cmsb-hero .hero-quick .trust-item {
    display: flex; align-items: center; gap: 14px; padding: 20px 0;
    border-bottom: 1px solid var(--b-gray-05); font-size: var(--t-base); font-weight: 500; color: var(--b-navy);
}
.cmsb-hero .hero-quick .trust-item:last-child { border-bottom: 0; }
.cmsb-hero .hero-quick .trust-item i { color: var(--b-red); font-size: var(--t-ms); width: 20px; }
.cmsb-hero .hero-media-fallback {
    flex: 1; display: flex; align-items: center; justify-content: center;
    color: rgba(255,255,255,.28); font-size: 42px;
}

/* ================= hero slider ================= */
.cmsb section.cmsb-slider { position: relative; padding: 0; overflow: hidden; }
.cmsb-slider { position: relative; padding: 0; overflow: hidden; }
.cmsb-slider-track { position: relative; height: 680px; }
.cmsb-slide {
    position: absolute; inset: 0; display: flex; align-items: center;
    background: var(--b-navy) center/cover no-repeat;
    opacity: 0; visibility: hidden; transform: scale(1.05);
    transition: opacity .9s ease, transform 7s linear, visibility .9s;
}
.cmsb-slide.is-active { opacity: 1; visibility: visible; transform: scale(1); z-index: 1; }
.cmsb-slide-overlay {
    position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(20,28,51,.9) 0%, rgba(20,28,51,.6) 50%, rgba(20,28,51,.15) 100%);
}
.cmsb-slide .cmsb-wrap { position: relative; z-index: 2; width: 100%; }
.cmsb-slide-inner { max-width: 720px; color: #fff; }
.cmsb-slide-inner h2 { color: #fff; font-size: var(--t-hero); line-height: var(--t-lh-display); margin: 0 0 20px; opacity: 0; transform: translateY(28px); }
.cmsb-slide-inner h2::before {
    content: ''; display: block; width: 64px; height: 4px; background: var(--b-red); margin-bottom: 28px;
}
.cmsb-slide-inner p { color: var(--b-gray-05); font-size: var(--t-h4); line-height: 1.55; margin: 0 0 36px; opacity: 0; transform: translateY(28px); }
.cmsb-slide-inner .b-btn { opacity: 0; transform: translateY(28px); }
.cmsb-slide.is-active .cmsb-slide-inner h2 { animation: cmsbUp .8s .25s ease forwards; }
.cmsb-slide.is-active .cmsb-slide-inner p { animation: cmsbUp .8s .4s ease forwards; }
.cmsb-slide.is-active .cmsb-slide-inner .b-btn { animation: cmsbUp .8s .55s ease forwards; }
@keyframes cmsbUp { to { opacity: 1; transform: translateY(0); } }

.cmsb-slider-nums {
    position: absolute; right: var(--b-pad); top: 50%; transform: translateY(-50%);
    z-index: 3; display: flex; flex-direction: column; gap: 4px;
}
.cmsb-slider-nums button {
    background: none; border: 0; cursor: pointer; padding: 10px 0 10px 20px; text-align: left;
    color: rgba(255,255,255,.5); font-size: var(--t-sm); font-weight: 600; letter-spacing: .08em;
    font-family: inherit; border-left: 2px solid rgba(255,255,255,.25); transition: .25s;
}
.cmsb-slider-nums button.on { color: #fff; border-left-color: var(--b-red); }
.cmsb-slider-arrows { position: absolute; right: var(--b-pad); bottom: 48px; z-index: 3; display: flex; gap: 8px; }
.cmsb-slider-nav {
    width: 52px; height: 52px; border: 1px solid rgba(255,255,255,.4); background: transparent;
    color: #fff; cursor: pointer; transition: .25s; font-size: var(--t-sm);
}
.cmsb-slider-nav:hover { background: var(--b-red); border-color: var(--b-red); }

/* ================= text ================= */
.cmsb-text .prose { font-size: var(--t-md); line-height: 1.7; color: var(--b-gray-01); max-width: 820px; }
.cmsb-text .prose.center { margin: 0 auto; text-align: center; }
.cmsb .prose h2, .cmsb .prose h3 { color: var(--b-navy); margin-top: 1.4em; }
.cmsb .prose a { color: var(--b-navy); text-decoration: underline; text-decoration-color: var(--b-red); text-underline-offset: 3px; }
.cmsb .prose ul, .cmsb .prose ol { padding-left: 20px; }
.cmsb .prose li { margin-bottom: 10px; }
.cmsb .prose img { margin: 24px 0; }

/* ================= features ================= */
.cmsb-features .cmsb-card {
    padding: 32px; background: var(--b-gray-08); border-top: 3px solid transparent;
    transition: border-color .3s ease, background .3s ease, box-shadow .3s ease;
}
.cmsb-features .cmsb-card:hover { border-top-color: var(--b-red); background: #fff; box-shadow: 0 24px 60px rgba(20,28,51,.10); }
.cmsb-features .cmsb-card .ic {
    background: transparent; border: 0; width: auto; height: auto;
    font-size: 34px; margin-bottom: 20px; justify-content: flex-start;
}

/* ================= services grid ================= */
.cmsb-services .cmsb-card { background: transparent; }
/* services without a photograph get the same 16:9 media block, with the icon
   centred in it — otherwise the rows sit at different heights */
.cmsb-services .cmsb-card .ic {
    width: 100%; height: auto; aspect-ratio: 16 / 9; margin-bottom: 24px;
    background: var(--b-gray-07); border-bottom: 0; font-size: 40px;
}
.cmsb-services .cmsb-card .img { transition: opacity .3s ease; }
.cmsb-services .cmsb-card:hover .img { opacity: .85; }
.cmsb-services .cmsb-card h3 a { color: inherit; text-decoration: none; }

/* ================= stats ================= */
.cmsb-stats .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; }
.cmsb-stats .stat { padding: 8px 32px; border-left: 1px solid var(--b-gray-05); }
.cmsb-stats .stat:first-child { border-left: 0; padding-left: 0; }
.cmsb-stats .num {
    font-family: 'Helvetica Now Display', 'Inter', Helvetica, Arial, sans-serif;
    font-size: var(--t-display); font-weight: 500; letter-spacing: -.03em; line-height: 1; color: var(--b-navy);
}
.cmsb-stats .num .sfx { color: var(--b-red); }
.cmsb-stats .lbl { color: var(--b-gray-02); font-size: var(--t-base); margin-top: 12px; }

/* ================= feature with image / why choose ================= */
.cmsb-fwi .grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; }
.cmsb-fwi.left .grid > div:first-child { order: 2; }
.cmsb-fwi.left .grid .media { order: 1; }
.cmsb-fwi .sub {
    font-size: var(--t-2xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--b-red); margin-bottom: 16px;
}
.cmsb-fwi h2 { margin: 0 0 24px; }
.cmsb-fwi .prose { font-size: var(--t-md); line-height: 1.7; color: var(--b-gray-01); }
.cmsb-fwi .points { list-style: none; padding: 0; margin: 32px 0; }
.cmsb-fwi .points li {
    display: flex; align-items: flex-start; gap: 14px; padding: 14px 0;
    border-bottom: 1px solid var(--b-gray-06); font-size: var(--t-base); color: var(--b-navy);
}
.cmsb-fwi .points li::before {
    content: '\f061'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    color: var(--b-red); font-size: var(--t-2xs); margin-top: 6px;
}
.cmsb-fwi .media {
    aspect-ratio: 4 / 3; background: var(--b-gray-06) center/cover no-repeat; position: relative;
}
.cmsb-fwi .media::after {
    content: ''; position: absolute; left: 0; bottom: 0; width: 96px; height: 8px; background: var(--b-red);
}
.cmsb-fwi .reasons { margin-top: 24px; }
.cmsb-fwi .reason { display: flex; gap: 20px; padding: 24px 0; border-top: 1px solid var(--b-gray-06); }
.cmsb-fwi .reason:last-child { border-bottom: 1px solid var(--b-gray-06); }
.cmsb-fwi .reason .ic {
    flex: 0 0 auto; width: 44px; height: 44px; background: var(--b-gray-07); color: var(--b-red);
    display: flex; align-items: center; justify-content: center; font-size: var(--t-md);
}
.cmsb-fwi .reason h3 { font-size: var(--t-h4); margin: 0 0 6px; }
.cmsb-fwi .reason p { margin: 0; color: var(--b-gray-01); font-size: var(--t-base); }

/* ================= gallery ================= */
.cmsb-gallery figure { margin: 0; }
.cmsb-gallery .ph { aspect-ratio: 4 / 3; background: var(--b-gray-06) center/cover no-repeat; transition: opacity .3s ease; }
.cmsb-gallery figure:hover .ph { opacity: .85; }
.cmsb-gallery figcaption { font-size: var(--t-ms); color: var(--b-gray-02); margin-top: 14px; }

/* ================= faq ================= */
.cmsb-faq .list { max-width: 900px; }
.cmsb-faq details { border-top: 1px solid var(--b-gray-05); }
.cmsb-faq details:last-child { border-bottom: 1px solid var(--b-gray-05); }
.cmsb-faq summary {
    list-style: none; cursor: pointer; padding: 28px 44px 28px 0; position: relative;
    font-size: var(--t-h4); font-weight: 500; color: var(--b-navy);
    font-family: 'Helvetica Now Display', 'Inter', Helvetica, Arial, sans-serif; letter-spacing: -.01em;
}
.cmsb-faq summary::-webkit-details-marker { display: none; }
.cmsb-faq summary::after {
    content: '\2b'; font-family: 'Font Awesome 6 Free'; font-weight: 900; font-size: var(--t-ms);
    position: absolute; right: 4px; top: 50%; transform: translateY(-50%); color: var(--b-red); transition: .25s;
}
.cmsb-faq details[open] summary::after { content: '\f068'; }
.cmsb-faq .ans { padding: 0 44px 30px 0; color: var(--b-gray-01); font-size: var(--t-base); line-height: 1.7; }

/* ================= testimonials ================= */
.cmsb-testi .cmsb-card { background: #fff; padding: 40px; border-left: 3px solid var(--b-red); }
.cmsb-testi .quote {
    font-family: 'Helvetica Now Display', 'Inter', Helvetica, Arial, sans-serif;
    font-size: var(--t-h3); line-height: 1.45; letter-spacing: -.01em; color: var(--b-navy); margin-bottom: 32px; flex: 1;
}
.cmsb-testi .who { display: flex; align-items: center; gap: 16px; margin-top: auto; }
.cmsb-testi .av { width: 56px; height: 56px; background: var(--b-gray-06) center/cover no-repeat; border-radius: 50%; flex: 0 0 auto; }
.cmsb-testi .nm { font-weight: 600; font-size: var(--t-base); }
.cmsb-testi .rl { color: var(--b-gray-02); font-size: var(--t-sm); }

/* ================= partners ================= */
/* auto-fit so any number of logos fills the row — no empty grey cells */
.cmsb-partners .logos {
    display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 1px;
    background: var(--b-gray-05); border: 1px solid var(--b-gray-05);
}
.cmsb-partners .logos a {
    background: #fff; display: flex; align-items: center; justify-content: center;
    padding: 32px 20px; min-height: 128px; text-decoration: none;
    color: var(--b-gray-02); font-weight: 600; font-size: var(--t-ms); transition: background .25s ease;
}
.cmsb-partners .logos a:hover { background: var(--b-gray-08); }
.cmsb-partners .logos img { max-height: 48px; width: auto; filter: grayscale(1); opacity: .65; transition: .25s; }
.cmsb-partners .logos a:hover img { filter: none; opacity: 1; }

/* ================= video (poster + click-to-load embed) ================= */
.cmsb-video .frame { position: relative; aspect-ratio: 16 / 9; background: var(--b-navy); overflow: hidden; }
.cmsb-video .frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.cmsb-video .frame .poster { position: absolute; inset: 0; background: var(--b-navy) center/cover no-repeat; }
.cmsb-video .frame .poster::after { content: ''; position: absolute; inset: 0; background: rgba(20,28,51,.3); }
.cmsb-video .frame .play {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    width: 88px; height: 88px; border-radius: 50%; border: 0; cursor: pointer;
    background: var(--b-red); color: #fff; font-size: 24px; padding-left: 5px;
    transition: transform .25s ease, background .25s ease;
}
.cmsb-video .frame .play::after {
    content: ''; position: absolute; inset: -14px; border-radius: 50%;
    border: 1px solid rgba(255,255,255,.45);
}
.cmsb-video .frame .play:hover { transform: translate(-50%, -50%) scale(1.08); background: var(--b-red-dark); }

/* ================= CTA banner ================= */
.cmsb section.cmsb-cta { padding: 0; }
.cmsb-cta .box { padding: 96px var(--b-pad); position: relative; overflow: hidden; }
.cmsb-cta .box .inner {
    max-width: 1440px; margin: 0 auto; position: relative; z-index: 2;
    display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center;
}
.cmsb-cta.gradient .box { background: var(--b-navy); color: #fff; }
.cmsb-cta.dark .box { background: #17181f; color: #fff; }
.cmsb-cta.light .box { background: var(--b-gray-07); color: var(--b-navy); }
.cmsb-cta h2 { margin: 0 0 12px; color: inherit; font-size: var(--t-h2); }
.cmsb-cta h2::before { content: ''; display: block; width: 64px; height: 4px; background: var(--b-red); margin-bottom: 28px; }
.cmsb-cta p { margin: 0; font-size: var(--t-md); opacity: .85; max-width: 60ch; }
.cmsb-cta.gradient .box::after, .cmsb-cta.dark .box::after {
    content: ''; position: absolute; right: -80px; top: -80px; width: 320px; height: 320px;
    border: 1px solid rgba(255,255,255,.10); transform: rotate(45deg); z-index: 1;
}

/* ================= contact ================= */
.cmsb-contact .grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: 80px; align-items: start; }
.cmsb-contact .info-item { display: flex; gap: 20px; padding: 26px 0; border-top: 1px solid var(--b-gray-05); }
.cmsb-contact .info-item:last-child { border-bottom: 1px solid var(--b-gray-05); }
.cmsb-contact .info-item .ic {
    flex: 0 0 auto; width: 46px; height: 46px; background: var(--b-gray-07); color: var(--b-red);
    display: flex; align-items: center; justify-content: center; font-size: var(--t-base);
}
.cmsb-contact .info-item h4 {
    font-size: var(--t-2xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--b-gray-02); margin: 0 0 6px;
}
.cmsb-contact .info-item p { margin: 0; font-size: var(--t-md); color: var(--b-navy); }
.cmsb-contact .info-item a { color: var(--b-navy); text-decoration: none; }
.cmsb-contact .info-item a:hover { color: var(--b-red); }
.cmsb-contact form { background: var(--b-gray-08); padding: 40px; }
.cmsb-contact .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cmsb-contact label {
    display: block; font-size: var(--t-2xs); font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--b-gray-02); margin-bottom: 8px;
}
.cmsb-contact input, .cmsb-contact textarea {
    width: 100%; padding: 14px 16px; border: 1px solid var(--b-gray-05); border-radius: 0;
    font-family: inherit; font-size: var(--t-base); color: var(--b-navy); background: #fff; outline: none;
    margin-bottom: 22px; transition: border-color .2s ease;
}
.cmsb-contact input:focus, .cmsb-contact textarea:focus { border-color: var(--b-red); }
.cmsb-contact textarea { resize: vertical; }

/* ================= hero + scroll-pinned topic panels =================
   Consecutive `position: sticky` siblings stack: each panel pins to the top
   until the next one scrolls over it. */
.cmsb section.cmsb-pinned { padding: 0; }
/* The stage is pure scroll distance — one viewport per slide. The viewport
   inside it pins below the shrunk site header (0 in the admin preview, which
   has no header of its own) while the slide track moves sideways. */
.cmsb-pinned .pin-stage { position: relative; height: calc(var(--pin-n, 2) * 100vh); }
.cmsb-pinned .pin-viewport {
    position: sticky; top: var(--cms-header-h-sm, 0px);
    height: calc(100vh - var(--cms-header-h-sm, 0px)); overflow: hidden;
}
.cmsb-pinned .pin-slides { display: flex; height: 100%; will-change: transform; }
.cmsb-pinned .pin-panel {
    position: relative; flex: 0 0 100%; height: 100%; overflow: hidden;
    display: flex; align-items: stretch; background: var(--b-navy);
}
.cmsb-pinned .pin-bg { position: absolute; inset: 0; background: var(--b-navy) center/cover no-repeat; }
/* full-bleed: the panels run edge to edge, their text still lines up with the
   1440px container gutter */
.cmsb-pinned .pin-inner { position: relative; z-index: 2; width: 100%; display: flex; }
.cmsb-pinned { --pin-gutter: max(var(--b-pad), calc((100vw - 1344px) / 2)); }

/* --- hero panel: solid statement column + quick-link column, image on the right --- */
.cmsb-pinned .pin-cta {
    flex: 0 0 48%; padding: 0 var(--b-pad) 0 var(--pin-gutter);
    display: flex; flex-direction: column; justify-content: center;
    background: var(--b-navy); color: #fff; position: relative;
}
.cmsb-pinned .pin-cta h1 { font-size: var(--t-hero); line-height: var(--t-lh-display); color: #fff; margin: 0 0 clamp(24px, 3.2vw, 52px); max-width: 17ch; }
.cmsb-pinned .pin-cta .b-btn { align-self: flex-start; padding: 20px 34px; font-size: var(--t-base); }
.cmsb-pinned .pin-quick {
    flex: 0 0 25%; padding: 0 44px;
    background: var(--b-navy-2, #1b2440);
    display: flex; flex-direction: column; justify-content: center;
}
.cmsb-pinned .pin-quick .qh { font-size: var(--t-base); color: var(--b-gray-04); margin-bottom: 28px; }
.cmsb-pinned .pin-quick .ql {
    display: inline-flex; align-items: center; gap: 18px; align-self: flex-start;
    padding: 16px 0; color: #fff; font-size: var(--t-base); font-weight: 600; text-decoration: none;
}
.cmsb-pinned .pin-quick .ql span { border-bottom: 1px solid rgba(255,255,255,.85); padding-bottom: 3px; }
.cmsb-pinned .pin-quick .ql i { font-size: var(--t-base); transition: transform .25s ease; }
.cmsb-pinned .pin-quick .ql:hover i { transform: translateX(6px); }

/* light variant of the hero */
.cmsb-pinned.theme-light .pin-cta { background: var(--b-gray-07); color: var(--b-navy); }
.cmsb-pinned.theme-light .pin-cta h1 { color: var(--b-navy); }
.cmsb-pinned.theme-light .pin-quick { background: var(--b-gray-06); }
.cmsb-pinned.theme-light .pin-quick .qh { color: var(--b-gray-02); }
.cmsb-pinned.theme-light .pin-quick .ql { color: var(--b-navy); }
.cmsb-pinned.theme-light .pin-quick .ql span { border-bottom-color: var(--b-navy); }

/* --- topic panels --- */
.cmsb-pinned .pin-topic .pin-bg::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(90deg, rgba(20,28,51,.92) 0%, rgba(20,28,51,.68) 48%, rgba(20,28,51,.28) 100%);
}
.cmsb-pinned .pin-topic .pin-inner { align-items: center; padding: 0 var(--pin-gutter); }
.cmsb-pinned .pin-content { max-width: 900px; color: #fff; }
.cmsb-pinned .pin-label { font-size: var(--t-h4); font-weight: 500; color: #fff; margin-bottom: 14px; }
.cmsb-pinned .pin-topic h2 { font-size: var(--t-h2); line-height: var(--t-lh-head); color: #fff; margin: 0 0 18px; max-width: 18ch; }
.cmsb-pinned .pin-topic p { font-size: var(--t-md); line-height: 1.55; color: var(--b-gray-05); margin: 0 0 8px; max-width: 52ch; }

/* rail: progress bar → Learn More → sliding thumbnail strip */
.cmsb-pinned .pin-rail { margin-top: 40px; max-width: 760px; }
.cmsb-pinned .pin-progress { position: relative; height: 1px; background: rgba(255,255,255,.35); }
.cmsb-pinned .pin-progress span {
    position: absolute; left: 0; top: -1px; height: 3px; width: 25%;
    background: var(--b-red); transition: width .25s ease;
}
.cmsb-pinned .pin-more {
    display: inline-flex; align-items: center; gap: 14px; margin: 18px 0 20px;
    color: #fff; font-size: var(--t-base); font-weight: 600; text-decoration: none;
}
.cmsb-pinned .pin-more i { font-size: var(--t-ms); transition: transform .25s ease; }
.cmsb-pinned .pin-more:hover i { transform: translateX(6px); }

.cmsb-pinned .pin-thumbs { overflow: hidden; }
.cmsb-pinned .pin-track {
    display: flex; gap: 16px;
    transition: transform .5s cubic-bezier(.4, 0, .2, 1); will-change: transform;
}
.cmsb-pinned .pin-thumb {
    position: relative; flex: 0 0 270px; height: 152px; overflow: hidden;
    border: 0; padding: 0; background: none; cursor: pointer; text-align: left;
}
.cmsb-pinned .pin-thumb .t {
    position: absolute; inset: 0; background: var(--b-navy) center/cover no-repeat; transition: transform .4s ease;
}
.cmsb-pinned .pin-thumb .t::after {
    content: ''; position: absolute; inset: 0; background: rgba(20,28,51,.62); transition: background .35s ease;
}
.cmsb-pinned .pin-thumb .n {
    position: absolute; left: 18px; bottom: 14px; z-index: 2;
    color: #fff; font-size: var(--t-base); font-weight: 600; letter-spacing: -.01em;
}
.cmsb-pinned .pin-thumb:hover .t { transform: scale(1.05); }
.cmsb-pinned .pin-thumb:hover .t::after { background: rgba(20,28,51,.42); }
.cmsb-pinned .pin-thumb.on .t::after { background: rgba(20,28,51,.14); }
.cmsb-pinned .pin-thumb.on::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: var(--b-red); z-index: 3;
}

/* staggered reveal once a panel has pinned into view */
.cmsb-pinned .pin-topic .pin-content > * { opacity: 0; transform: translateY(26px); transition: opacity .7s ease, transform .7s ease; }
.cmsb-pinned .pin-topic.is-in .pin-content > * { opacity: 1; transform: none; }
.cmsb-pinned .pin-topic.is-in .pin-content > *:nth-child(2) { transition-delay: .1s; }
.cmsb-pinned .pin-topic.is-in .pin-content > *:nth-child(3) { transition-delay: .2s; }
.cmsb-pinned .pin-topic.is-in .pin-content > *:nth-child(4) { transition-delay: .3s; }

.cmsb-pinned .pin-skip {
    position: absolute; right: 0; bottom: 0; z-index: 3;
    background: rgba(249,252,252,.94); border: 0; color: var(--b-navy);
    padding: 26px 40px; font: 600 13px/1 inherit; letter-spacing: .18em; text-transform: uppercase;
    cursor: pointer; display: inline-flex; align-items: center; gap: 18px; transition: .25s;
}
.cmsb-pinned .pin-skip:hover { background: var(--b-red); color: #fff; }
/* "Scroll ———" cue on the right of the hero image */
.cmsb-pinned .pin-scroll {
    position: absolute; top: 50%; right: 0; transform: translateY(-50%); z-index: 3;
    display: inline-flex; align-items: center; gap: 16px;
    background: none; border: 0; cursor: pointer; padding: 0;
    color: #fff; font: 600 15px/1 inherit;
}
.cmsb-pinned .pin-scroll em { display: block; width: 90px; height: 1px; background: rgba(255,255,255,.85); transition: width .25s ease; }
.cmsb-pinned .pin-scroll:hover em { width: 130px; }

/* ================= insights tray (blog-driven) ================= */
.cmsb-tray .tray-grid { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 64px; align-items: start; }
/* the carousel rail is min-content-wide without this, and drags the grid cell wider than the page */
.cmsb-tray .tray-grid > * { min-width: 0; }
.cmsb-tray .tray-left h2 { font-size: var(--t-h2); margin: 0 0 16px; }
.cmsb-tray .tray-left p { color: var(--b-gray-01); font-size: var(--t-base); margin: 0 0 28px; }
.cmsb-tray .tray-items { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 40px; }
.cmsb-tray .tray-card { background: transparent; }
.cmsb-tray .tray-card .b-eyebrow { margin-bottom: 10px; }
.cmsb-tray .tray-card h3 { font-size: var(--t-h3); }
.cmsb-tray .tray-card h3 a { color: inherit; text-decoration: none; }
.cmsb-tray .tray-card h3 a:hover { color: var(--b-red); }
.cmsb-tray .tray-card .img { display: block; transition: opacity .3s ease; }
.cmsb-tray .tray-card:hover .img { opacity: .85; }

/* free-scrolling rail — no scroll-snap, which would yank a part-way drag back */
.cmsb-tray .is-carousel .tray-items {
    display: flex; gap: 32px; overflow-x: auto;
    scrollbar-width: none; -ms-overflow-style: none; padding-bottom: 4px;
    cursor: grab; overscroll-behavior-x: contain;
}
.cmsb-tray .is-carousel .tray-items::-webkit-scrollbar { display: none; }
.cmsb-tray .is-carousel .tray-card { flex: 0 0 300px; }
/* while dragging: no text selection, and links must not swallow the pointer */
.cmsb-tray .is-carousel .tray-items.dragging {
    cursor: grabbing; user-select: none; scroll-behavior: auto;
}
.cmsb-tray .is-carousel .tray-items.dragging a { pointer-events: none; }
.cmsb-tray .tray-nav { display: flex; align-items: center; gap: 28px; margin-top: 40px; }
.cmsb-tray .tray-bar { position: relative; flex: 1; height: 2px; background: var(--b-gray-05); }
.cmsb-tray .tray-bar span { position: absolute; top: 0; left: 0; height: 2px; background: var(--b-red); transition: left .2s ease, width .2s ease; }
.cmsb-tray .tray-arrows { display: flex; gap: 8px; }
.cmsb-tray .tray-arrows button {
    width: 46px; height: 46px; border: 1px solid var(--b-gray-05); background: #fff;
    color: var(--b-navy); cursor: pointer; transition: .25s; font-size: var(--t-xs);
}
.cmsb-tray .tray-arrows button:hover { background: var(--b-red); border-color: var(--b-red); color: #fff; }

/* ================= story / statement ================= */
.cmsb-story { position: relative; overflow: hidden; }
.cmsb-story.theme-gray { background: var(--b-gray-07); }
.cmsb-story.theme-navy { background: var(--b-navy); color: #fff; }
.cmsb-story.theme-navy h2, .cmsb-story.theme-navy .prose { color: #fff; }
.cmsb-story.theme-navy .prose a { color: #fff; }
.cmsb-story .story-mark {
    position: absolute; right: -2vw; top: 40px;
    font-family: 'Helvetica Now Display', 'Inter', sans-serif; font-weight: 700; font-size: 20vw;
    line-height: 1; letter-spacing: -.05em; white-space: nowrap;
    color: transparent; -webkit-text-stroke: 1px rgba(20,28,51,.10);
    pointer-events: none; user-select: none; z-index: 1;
}
.cmsb-story.theme-navy .story-mark { -webkit-text-stroke-color: rgba(255,255,255,.12); }
.cmsb-story .cmsb-wrap { position: relative; z-index: 2; }
.cmsb-story .story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }
.cmsb-story .story-head h2 { font-size: var(--t-h2); margin: 0; }
.cmsb-story .story-body .prose { font-size: var(--t-md); line-height: 1.75; color: inherit; }
.cmsb-story.theme-light .story-body .prose, .cmsb-story.theme-gray .story-body .prose { color: var(--b-gray-01); }
.cmsb-story .story-body .b-btn { margin-top: 30px; }
.cmsb-story .story-media { margin-top: 72px; aspect-ratio: 21 / 9; background: var(--b-gray-06) center/cover no-repeat; }

/* ================= image + floating card ================= */
.cmsb section.cmsb-imagecard { padding: 0; }
.cmsb-imagecard { position: relative; display: flex; align-items: center; min-height: 620px; }
.cmsb-imagecard .ic-bg { position: absolute; inset: 0; background: var(--b-navy) center/cover no-repeat; }
.cmsb-imagecard .cmsb-wrap { position: relative; z-index: 2; display: flex; justify-content: flex-end; padding-top: 96px; padding-bottom: 96px; }
.cmsb-imagecard.left .cmsb-wrap { justify-content: flex-start; }
.cmsb-imagecard .ic-card { background: #fff; padding: 48px; max-width: 480px; border-top: 4px solid var(--b-red); }
.cmsb-imagecard .ic-card h2 { font-size: var(--t-h2s); margin: 0 0 14px; }
.cmsb-imagecard .ic-card .sub {
    font-size: var(--t-2xs); font-weight: 600; letter-spacing: .14em; text-transform: uppercase;
    color: var(--b-red); margin-bottom: 18px;
}
.cmsb-imagecard .ic-card p { color: var(--b-gray-01); font-size: var(--t-base); margin: 0 0 28px; }

/* ================= lead CTA banner ================= */
.cmsb section.cmsb-leadcta { padding: 0; }
.cmsb-leadcta { position: relative; display: flex; align-items: center; min-height: 520px; }
.cmsb-leadcta .lc-bg { position: absolute; inset: 0; background: var(--b-navy) center/cover no-repeat; }
.cmsb-leadcta .lc-bg::after { content: ''; position: absolute; inset: 0; background: rgba(20,28,51,.35); }
.cmsb-leadcta .cmsb-wrap { position: relative; z-index: 2; padding-top: 96px; padding-bottom: 96px; }
.cmsb-leadcta .lc-panel {
    background: rgba(255,255,255,.88); backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
    padding: 52px; max-width: 620px;
}
.cmsb-leadcta.navy .lc-panel { background: rgba(20,28,51,.84); color: #fff; }
.cmsb-leadcta.navy .lc-panel h2 { color: #fff; }
.cmsb-leadcta .lc-panel h2 { font-size: var(--t-h2); margin: 0 0 14px; }
.cmsb-leadcta .lc-panel p { font-size: var(--t-md); margin: 0 0 30px; }

/* ================= consulting modules (projects / training) ================= */
.cmsb-modcards .meta-line { font-size: var(--t-sm); color: var(--b-gray-02); margin: -4px 0 12px; }
.cmsb-modcards .cmsb-card h3 a { color: inherit; text-decoration: none; }
.cmsb-modcards .cmsb-card h3 a:hover { color: var(--b-accent-soft); }
.cmsb-modcards .cmsb-card .img { display: block; transition: opacity .3s ease; }
.cmsb-modcards .cmsb-card:hover .img { opacity: .88; }
.cmsb-modcards .mod-group {
    font-size: var(--t-h3); margin: 0 0 28px; padding-bottom: 14px;
    border-bottom: 1px solid var(--b-gray-05);
}
.cmsb-modcards .mod-gap { margin-bottom: 64px; }
.cmsb-modcards .mod-foot { margin-top: 56px; }

/* filter pills + empty state on the listing pages */
.cmsb-modcards .mod-filter, .cmsb-courses .mod-filter { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 40px; }
.cmsb-modcards .mod-filter a, .cmsb-courses .mod-filter a {
    padding: 10px 18px; font-size: var(--t-ms); font-weight: 500; color: var(--b-gray-01);
    border: 1px solid var(--b-gray-05); text-decoration: none; transition: .22s;
}
.cmsb-modcards .mod-filter a:hover, .cmsb-courses .mod-filter a:hover { border-color: var(--b-accent); color: var(--b-accent); }
.cmsb-modcards .mod-filter a.on, .cmsb-courses .mod-filter a.on { background: var(--b-navy); border-color: var(--b-navy); color: #fff; }
.cmsb-modcards .mod-empty, .cmsb-courses .mod-empty {
    border: 1px solid var(--b-gray-05); border-top: 3px solid var(--b-accent);
    padding: 72px 24px; text-align: center; color: var(--b-gray-02);
}
.cmsb-modcards .card-h { font-size: var(--t-h3); letter-spacing: -.01em; line-height: 1.25; margin: 0 0 12px; }
.cmsb-modcards .card-h a { color: inherit; text-decoration: none; }
.cmsb-modcards .card-h a:hover { color: var(--b-accent-soft); }

/* ================= case study / programme detail ================= */
.cmsb-case .case-grid { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 80px; align-items: start; }
.cmsb-case .case-body h2 { font-size: var(--t-h2s); margin: 0 0 18px; }
.cmsb-case .case-body h2:not(:first-child) { margin-top: 52px; }
.cmsb-case .case-body p { font-size: var(--t-md); line-height: 1.75; color: var(--b-gray-01); margin: 0 0 1.2em; }
.cmsb-case .trainer-name { font-weight: 600; color: var(--b-navy); margin-bottom: .5em !important; }
.cmsb-case .case-list { list-style: none; padding: 0; margin: 0; }
.cmsb-case .case-list li {
    display: flex; gap: 14px; padding: 14px 0; border-bottom: 1px solid var(--b-gray-06);
    font-size: var(--t-base); color: var(--b-navy);
}
.cmsb-case .case-list li::before {
    content: '\f061'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    color: var(--b-accent); font-size: var(--t-2xs); margin-top: 6px; flex: 0 0 auto;
}
.cmsb-case .case-list.outcomes li::before { content: '\f00c'; color: var(--b-accent-soft); }
.cmsb-case .case-outline { counter-reset: outline; list-style: none; padding: 0; margin: 0; }
.cmsb-case .case-outline li {
    counter-increment: outline; position: relative; padding: 16px 0 16px 52px;
    border-bottom: 1px solid var(--b-gray-06); font-size: var(--t-base); color: var(--b-navy);
}
.cmsb-case .case-outline li::before {
    content: counter(outline, decimal-leading-zero); position: absolute; left: 0; top: 16px;
    font-size: var(--t-sm); font-weight: 600; color: var(--b-accent-soft); letter-spacing: .06em;
}
.cmsb-case .case-video { position: relative; aspect-ratio: 16 / 9; background: var(--b-navy); }
.cmsb-case .case-video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.cmsb-case .case-side { background: var(--b-gray-07); padding: 36px; position: sticky; top: 120px; }
.cmsb-case .case-side h3 { font-size: var(--t-h4); margin: 0 0 22px; }
.cmsb-case .case-fact { padding: 14px 0; border-top: 1px solid var(--b-gray-05); }
.cmsb-case .case-fact span {
    display: block; font-size: var(--t-2xs); font-weight: 600; letter-spacing: .12em;
    text-transform: uppercase; color: var(--b-gray-02); margin-bottom: 4px;
}
.cmsb-case .case-fact strong { font-weight: 500; font-size: var(--t-base); color: var(--b-navy); }
.cmsb-case .case-cta { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--b-gray-05); }
.cmsb-case .case-cta p { font-size: var(--t-ms); color: var(--b-gray-01); margin: 0 0 18px; }
.cmsb-case .case-cta .b-btn { width: 100%; }
.cmsb-case .case-brochure { margin-top: 10px; }

/* ================= achievements ================= */
.cmsb-achieve .ach-card .cert {
    aspect-ratio: 4 / 3; background: var(--b-gray-06) center/cover no-repeat; margin-bottom: 24px;
}
.cmsb-achieve .ach-card { background: var(--b-gray-08); padding: 28px; border-top: 3px solid var(--b-accent); }
.cmsb-achieve .ach-card .cert { margin: -28px -28px 24px; }
.cmsb-achieve .ach-card h3 { font-size: var(--t-h4); margin: 0 0 8px; }
.cmsb-achieve .meta-line { font-size: var(--t-sm); color: var(--b-gray-02); margin-bottom: 14px; }
.cmsb-achieve .ach-card p { font-size: var(--t-ms); margin: 0; }

.cmsb-achieve .ach-timeline { list-style: none; margin: 0; padding: 0; max-width: 900px; }
.cmsb-achieve .ach-timeline li {
    display: grid; grid-template-columns: 130px minmax(0, 1fr); gap: 32px;
    padding: 32px 0; border-top: 1px solid var(--b-gray-05);
}
.cmsb-achieve .ach-timeline li:last-child { border-bottom: 1px solid var(--b-gray-05); }
.cmsb-achieve .ach-date {
    font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; text-transform: uppercase;
    color: var(--b-gray-02); padding-top: 4px;
}
.cmsb-achieve .ach-body h3 { font-size: var(--t-h3); margin: 0 0 6px; }
.cmsb-achieve .ach-body p { font-size: var(--t-base); margin: 10px 0 0; color: var(--b-gray-01); }

/* ================= service request form ================= */
.cmsb-request .req-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 64px; align-items: start; }
.cmsb-request .req-grid.single { grid-template-columns: minmax(0, 1fr); max-width: 860px; }
.cmsb-request .f-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.cmsb-request label {
    display: block; font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--b-gray-02); margin-bottom: 8px;
}
.cmsb-request label span { color: var(--b-accent-soft); }
.cmsb-request input[type="text"],
.cmsb-request input[type="email"],
.cmsb-request input[type="tel"],
.cmsb-request select,
.cmsb-request textarea {
    width: 100%; padding: 14px 16px; border: 1px solid var(--b-gray-05); border-radius: 0;
    font-family: inherit; font-size: var(--t-base); color: var(--b-navy); background: #fff; outline: none;
    margin-bottom: 22px; transition: border-color .2s ease;
}
.cmsb-request input:focus, .cmsb-request select:focus, .cmsb-request textarea:focus { border-color: var(--b-accent); }
.cmsb-request input:invalid:not(:placeholder-shown) { border-color: #b3261e; }
.cmsb-request textarea { resize: vertical; }

.cmsb-request .req-radios { border: 0; padding: 0; margin: 0 0 28px; }
.cmsb-request .req-radios legend {
    font-size: var(--t-2xs); font-weight: 600; letter-spacing: .12em; text-transform: uppercase;
    color: var(--b-gray-02); margin-bottom: 12px; padding: 0;
}
.cmsb-request .req-radios label {
    display: inline-flex; align-items: center; gap: 9px; margin: 0 24px 0 0;
    font-size: var(--t-base); letter-spacing: 0; text-transform: none; color: var(--b-navy); font-weight: 500;
}
.cmsb-request .req-radios input { margin: 0; accent-color: var(--b-accent); }

/* honeypot — off-screen but still focusable by bots */
.cmsb-request .req-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.cmsb-request .req-success {
    display: flex; gap: 18px; align-items: flex-start;
    background: var(--b-gray-07); border-left: 3px solid var(--b-accent-soft);
    padding: 24px 28px; margin-bottom: 32px;
}
.cmsb-request .req-success i { color: var(--b-accent-soft); font-size: var(--t-h3); margin-top: 3px; }
.cmsb-request .req-success h3 { font-size: var(--t-h4); margin: 0 0 6px; }
.cmsb-request .req-success p { margin: 0; font-size: var(--t-base); color: var(--b-gray-01); }
.cmsb-request .req-errors {
    background: #fdeceb; border-left: 3px solid #b3261e; padding: 18px 24px; margin-bottom: 28px;
}
.cmsb-request .req-errors ul { margin: 0; padding-left: 18px; color: #8c1d18; font-size: var(--t-ms); }

.cmsb-request .req-side { background: var(--b-gray-07); padding: 36px; }
.cmsb-request .req-side h3 { font-size: var(--t-h3); margin: 0 0 24px; }
.cmsb-request .req-info { display: flex; gap: 14px; align-items: flex-start; padding: 14px 0; border-top: 1px solid var(--b-gray-05); font-size: var(--t-base); }
.cmsb-request .req-info i { color: var(--b-accent-soft); margin-top: 5px; width: 18px; flex: 0 0 auto; }
.cmsb-request .req-info a { color: var(--b-navy); text-decoration: none; }
.cmsb-request .req-info a:hover { color: var(--b-accent-soft); }
.cmsb-request .req-note { font-size: var(--t-sm); color: var(--b-gray-02); margin: 22px 0 0; }

/* ================= accent on dark surfaces =================
   The accent is black, which vanishes on navy. Wherever it sits on a dark
   panel it becomes the lighter navy blue (or white) instead. */
.cmsb-pageheader h1::before,
.cmsb-slide-inner h2::before,
.cmsb-cta.gradient h2::before,
.cmsb-cta.dark h2::before,
.cmsb-pinned .pin-progress span,
.cmsb-pinned .pin-thumb.on::after { background: var(--b-accent-soft); }

.cmsb .b-dark .b-eyebrow,
.cmsb .on-dark .b-eyebrow,
.cmsb-story.theme-navy .b-eyebrow,
.cmsb-leadcta.navy .b-eyebrow { color: var(--b-accent-soft); }

.cmsb-slider-nums button.on { border-left-color: var(--b-accent-soft); }
.cmsb-slider-nav:hover { background: var(--b-accent-soft); border-color: var(--b-accent-soft); }
.cmsb-pinned .pin-skip:hover { background: var(--b-accent-soft); color: #fff; }
.cmsb-video .frame .play { background: var(--b-accent-soft); }
.cmsb-video .frame .play:hover { background: #fff; color: var(--b-navy); }

/* solid buttons on dark panels */
/* white reads as the primary action on navy — black would disappear */
.cmsb .b-dark .b-btn:not(.ghost),
.cmsb .on-dark .b-btn:not(.ghost),
.cmsb-pinned .b-btn:not(.ghost),
.cmsb-story.theme-navy .b-btn:not(.ghost),
.cmsb-leadcta.navy .b-btn:not(.ghost) {
    background: #fff; border-color: #fff; color: var(--b-navy);
}
.cmsb .b-dark .b-btn:not(.ghost) i,
.cmsb .on-dark .b-btn:not(.ghost) i,
.cmsb-pinned .b-btn:not(.ghost) i,
.cmsb-story.theme-navy .b-btn:not(.ghost) i,
.cmsb-leadcta.navy .b-btn:not(.ghost) i { color: var(--b-accent-soft); }
.cmsb .b-dark .b-btn:not(.ghost):hover,
.cmsb .on-dark .b-btn:not(.ghost):hover,
.cmsb-pinned .b-btn:not(.ghost):hover,
.cmsb-story.theme-navy .b-btn:not(.ghost):hover,
.cmsb-leadcta.navy .b-btn:not(.ghost):hover {
    background: var(--b-accent-soft); border-color: var(--b-accent-soft); color: #fff;
}
.cmsb .b-dark .b-btn:not(.ghost):hover i,
.cmsb .on-dark .b-btn:not(.ghost):hover i,
.cmsb-pinned .b-btn:not(.ghost):hover i,
.cmsb-story.theme-navy .b-btn:not(.ghost):hover i,
.cmsb-leadcta.navy .b-btn:not(.ghost):hover i { color: #fff; }

/* tertiary links on dark panels */
.cmsb .b-dark .more span, .cmsb .on-dark .more span,
.cmsb .b-dark .b-more span, .cmsb .on-dark .b-more span { background-image: linear-gradient(#fff, #fff); }
.cmsb .b-dark .more i, .cmsb .on-dark .more i,
.cmsb .b-dark .b-more i, .cmsb .on-dark .b-more i { color: #fff; }

/* ================= responsive ================= */
@media (max-width: 1200px) {
    .cmsb-hero .hero-panel { flex: 0 0 58%; }
    .cmsb-hero .hero-quick { flex: 0 0 30%; }
    .cmsb-partners .logos { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
    .cmsb-stats .grid { grid-template-columns: repeat(2, 1fr); row-gap: 40px; }
    .cmsb-stats .stat:nth-child(odd) { border-left: 0; padding-left: 0; }
    .cmsb-pinned .pin-cta { flex: 0 0 58%; }
    .cmsb-pinned .pin-quick { flex: 0 0 30%; }
    .cmsb-pinned .pin-rail { max-width: 620px; }
    .cmsb-pinned .pin-thumb { flex: 0 0 210px; height: 128px; }
    .cmsb-tray .tray-grid { grid-template-columns: 280px minmax(0, 1fr); gap: 44px; }
    .cmsb-story .story-grid { gap: 48px; }
}
@media (max-width: 900px) {
    .cmsb-hero { min-height: 0; }
    .cmsb-hero .hero-inner { flex-direction: column; }
    .cmsb-hero .hero-panel { flex: none; width: 100%; padding: 56px var(--b-pad); }
    .cmsb-hero .hero-quick { flex: none; width: 100%; padding: 32px var(--b-pad); background: rgba(249,252,252,.92); }
    .cmsb-hero .hero-media-fallback { min-height: 220px; }
    .cmsb-slider-track { height: 520px; }
    .cmsb-slider-nums { right: 16px; }
    .cmsb-slider-arrows { right: 16px; bottom: 24px; }
    .cmsb-fwi .grid, .cmsb-contact .grid { grid-template-columns: 1fr; gap: 40px; }
    .cmsb-fwi.left .grid > div:first-child, .cmsb-fwi.left .grid .media { order: initial; }
    .cmsb-pageheader { padding: 88px 0 64px; }
    .cmsb-cta .box { padding: 64px var(--b-pad); }
    .cmsb-cta .box .inner { grid-template-columns: 1fr; gap: 32px; }
    .cmsb-partners .logos { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
    .cmsb-contact form { padding: 28px; }
    .cmsb-contact .f-row { grid-template-columns: 1fr; }
    .cmsb-testi .cmsb-card { padding: 28px; }
    .cmsb-testi .quote { font-size: var(--t-md); }
    .cmsb-stats .num { font-size: var(--t-h1); }

    /* sideways sliding off on small screens — panels just stack normally.
       `align-items` must return to stretch: left as `center` from the desktop
       rule, a long heading in a column flex box overflows both edges and gets
       clipped on the left. */
    .cmsb-pinned .pin-stage { height: auto; }
    .cmsb-pinned .pin-viewport { position: static; height: auto; overflow: visible; }
    .cmsb-pinned .pin-slides { flex-direction: column; height: auto; transform: none !important; }
    .cmsb-pinned .pin-panel { flex: none; width: 100%; height: auto; min-height: 0; }
    .cmsb-pinned .pin-inner { flex-direction: column; align-items: stretch; }
    .cmsb-pinned .pin-content { width: 100%; max-width: none; }
    .cmsb-pinned .pin-cta { flex: none; width: 100%; padding: 56px var(--b-pad); }
    .cmsb-pinned .pin-cta h1 { margin-bottom: 28px; }
    .cmsb-pinned .pin-quick { flex: none; width: 100%; padding: 8px var(--b-pad) 48px; }
    .cmsb-pinned .pin-topic .pin-inner { padding: 56px var(--b-pad) 88px; align-items: stretch; }
    .cmsb-pinned .pin-topic p { font-size: var(--t-base); }
    .cmsb-pinned .pin-label { font-size: var(--t-base); }
    .cmsb-pinned .pin-topic .pin-content > * { opacity: 1; transform: none; }
    /* no transform on small screens — the strip just scrolls with a finger */
    .cmsb-pinned .pin-rail { max-width: none; margin-top: 28px; }
    .cmsb-pinned .pin-thumbs { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
    .cmsb-pinned .pin-thumbs::-webkit-scrollbar { display: none; }
    .cmsb-pinned .pin-track { transform: none !important; }
    .cmsb-pinned .pin-thumb { flex: 0 0 172px; height: 106px; }
    .cmsb-pinned .pin-thumb .n { font-size: var(--t-ms); left: 14px; bottom: 12px; }
    /* nothing is pinned on mobile, so there is nothing to skip past */
    .cmsb-pinned .pin-skip { display: none; }
    .cmsb-pinned .pin-scroll { display: none; }

    .cmsb-tray .tray-grid { grid-template-columns: 1fr; gap: 36px; }
    .cmsb-tray .tray-items { grid-template-columns: 1fr; gap: 36px; }
    .cmsb-tray .is-carousel .tray-card { flex: 0 0 78%; }
    .cmsb-tray .tray-nav { margin-top: 28px; }

    .cmsb-story .story-grid { grid-template-columns: 1fr; gap: 28px; }
    .cmsb-story .story-mark { font-size: 34vw; right: -10vw; top: 20px; }
    .cmsb-story .story-media { margin-top: 40px; aspect-ratio: 16 / 9; }

    .cmsb-imagecard { min-height: 0; }
    .cmsb-imagecard .cmsb-wrap { padding-top: 56px; padding-bottom: 56px; }
    .cmsb-imagecard .ic-card { padding: 28px; max-width: none; }

    .cmsb-leadcta { min-height: 0; }
    .cmsb-leadcta .cmsb-wrap { padding-top: 56px; padding-bottom: 56px; }
    .cmsb-leadcta .lc-panel { padding: 28px; max-width: none; }

    .cmsb-modcards .mod-gap { margin-bottom: 44px; }
    .cmsb-modcards .mod-foot { margin-top: 36px; }
    .cmsb-modcards .mod-filter { margin-bottom: 32px; }
    .cmsb-case .case-grid { grid-template-columns: 1fr; gap: 40px; }
    .cmsb-case .case-side { position: static; padding: 26px; }
    .cmsb-case .case-body h2:not(:first-child) { margin-top: 36px; }
    .cmsb-case .case-body p { font-size: var(--t-base); }
    .cmsb-achieve .ach-timeline li { grid-template-columns: 1fr; gap: 10px; padding: 24px 0; }
    .cmsb-request .req-grid { grid-template-columns: 1fr; gap: 40px; }
    .cmsb-request .f-row { grid-template-columns: 1fr; gap: 0; }
    .cmsb-request .req-side { padding: 26px; }
}

/* ============================================================
   PREMIUM SECTIONS — split section heads, the "What We Do"
   service index, the Core Competencies band and the refined
   card treatment shared by Training and Projects.
   ============================================================ */

/* ---------- split head: title left, standfirst + link right ---------- */
.cmsb .b-head.split {
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    gap: 48px 80px;
    align-items: end;
    padding-bottom: 34px;
    border-bottom: 1px solid var(--b-gray-05);
    margin-bottom: 56px;
}
.cmsb .b-head.split::before { display: none; }
.cmsb .b-head.split .b-head-l { min-width: 0; }
.cmsb .b-head.split .b-head-r { min-width: 0; padding-bottom: 4px; }
.cmsb .b-head.split h2 { margin: 0; }
.cmsb .b-head.split .b-eyebrow { margin-bottom: 18px; }
.cmsb .b-head.split .b-head-r p { font-size: var(--t-md); line-height: 1.6; color: var(--b-gray-01); margin: 0 0 20px; }

/* underlined text link with a sliding rule */
.cmsb .b-link {
    display: inline-flex; align-items: center; gap: 12px;
    font-size: var(--t-base); font-weight: 600; color: var(--b-navy);
    text-decoration: none; padding-bottom: 4px; position: relative;
}
.cmsb .b-link::after {
    content: ''; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%;
    background: var(--b-accent); transform-origin: left; transition: transform .3s ease;
}
.cmsb .b-link:hover::after { transform: scaleX(.35); }
.cmsb .b-link i { font-size: var(--t-2xs); transition: transform .3s ease; }
.cmsb .b-link:hover i { transform: translateX(5px); }

/* ================= What We Do ================= */
.cmsb-svc.t-gray { background: var(--b-gray-07); }
.cmsb-svc.t-dark { background: var(--b-navy); color: #fff; }
.cmsb-svc.t-dark .b-head.split { border-bottom-color: rgba(255, 255, 255, .16); }
.cmsb-svc.t-dark .b-eyebrow { color: var(--b-accent-soft); }
.cmsb-svc.t-dark .b-head-r p { color: var(--b-gray-05); }
.cmsb-svc.t-dark .b-link { color: #fff; }
.cmsb-svc.t-dark .b-link::after { background: var(--b-accent-soft); }

/* numbered editorial index */
.cmsb-svc .svc-index { display: grid; gap: 0 64px; }
.cmsb-svc .svc-index.c2, .cmsb-svc .svc-index.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.cmsb-svc .svc-row {
    display: grid;
    grid-template-columns: 54px minmax(0, 1fr) 32px;
    align-items: start;
    gap: 8px;
    padding: 30px 0 28px;
    border-bottom: 1px solid var(--b-gray-05);
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: padding-left .32s cubic-bezier(.22, .61, .36, 1);
}
.cmsb-svc.t-dark .svc-row { border-bottom-color: rgba(255, 255, 255, .16); }
.cmsb-svc .svc-row::before {
    content: ''; position: absolute; left: -20px; right: -20px; top: 0; bottom: 0;
    background: var(--b-gray-08); opacity: 0; transition: opacity .3s ease; z-index: 0;
}
.cmsb-svc.t-gray .svc-row::before { background: #fff; }
.cmsb-svc.t-dark .svc-row::before { background: rgba(255, 255, 255, .05); }
.cmsb-svc a.svc-row:hover::before { opacity: 1; }
.cmsb-svc a.svc-row:hover { padding-left: 20px; }
.cmsb-svc .svc-row > * { position: relative; z-index: 1; }

.cmsb-svc .svc-no {
    font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em; color: var(--b-gray-03);
    padding-top: 7px; font-variant-numeric: tabular-nums;
}
.cmsb-svc.t-dark .svc-no { color: var(--b-accent-soft); }
.cmsb-svc .svc-body { display: block; min-width: 0; }
.cmsb-svc .svc-title {
    display: block; font-family: 'Helvetica Now Display', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--t-h3); font-weight: 500; letter-spacing: -.01em;
    line-height: 1.25; margin-bottom: 10px;
}
.cmsb-svc .svc-text { display: block; font-size: var(--t-ms); line-height: 1.6; color: var(--b-gray-01); }
.cmsb-svc.t-dark .svc-text { color: var(--b-gray-04); }
.cmsb-svc .svc-go {
    width: 32px; height: 32px; border: 1px solid var(--b-gray-05); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 11px;
    color: var(--b-accent); margin-top: 3px; flex: 0 0 auto;
    transition: background .3s ease, color .3s ease, border-color .3s ease, transform .3s ease;
}
.cmsb-svc.t-dark .svc-go { border-color: rgba(255, 255, 255, .28); color: #fff; }
.cmsb-svc div.svc-row .svc-go { display: none; }
.cmsb-svc a.svc-row:hover .svc-go {
    background: var(--b-accent); border-color: var(--b-accent); color: #fff; transform: translateX(3px);
}
.cmsb-svc.t-dark a.svc-row:hover .svc-go { background: var(--b-accent-soft); border-color: var(--b-accent-soft); }

/* icon-card variant */
.cmsb-svc .svc-cards { display: grid; gap: var(--b-gap); }
.cmsb-svc .svc-cards.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cmsb-svc .svc-cards.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cmsb-svc .svc-cards.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.cmsb-svc .svc-card {
    display: flex; flex-direction: column; text-decoration: none; color: inherit;
    background: #fff; border: 1px solid var(--b-gray-06); border-top: 3px solid transparent;
    padding: 32px 28px 28px; transition: border-top-color .3s ease, box-shadow .3s ease, transform .3s ease;
}
.cmsb-svc.t-dark .svc-card { background: rgba(255, 255, 255, .04); border-color: rgba(255, 255, 255, .12); }
.cmsb-svc a.svc-card:hover {
    border-top-color: var(--b-accent); box-shadow: 0 24px 60px rgba(20, 28, 51, .1); transform: translateY(-3px);
}
.cmsb-svc.t-dark a.svc-card:hover { border-top-color: var(--b-accent-soft); box-shadow: none; }
.cmsb-svc .svc-ic {
    width: 52px; height: 52px; background: var(--b-gray-07); color: var(--b-accent);
    display: flex; align-items: center; justify-content: center; font-size: var(--t-h3); margin-bottom: 24px;
}
.cmsb-svc.t-dark .svc-ic { background: rgba(255, 255, 255, .08); color: var(--b-accent-soft); }
.cmsb-svc .svc-img { display: block; aspect-ratio: 16 / 10; background: var(--b-gray-06) center/cover no-repeat; margin: -32px -28px 24px; }
.cmsb-svc .svc-card .svc-text { flex: 1; margin-bottom: 20px; }
.cmsb-svc .svc-more {
    display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-ms); font-weight: 600;
    color: var(--b-accent); margin-top: auto;
}
.cmsb-svc.t-dark .svc-more { color: #fff; }
.cmsb-svc .svc-more i { font-size: 11px; transition: transform .25s ease; }
.cmsb-svc a.svc-card:hover .svc-more i { transform: translateX(5px); }

/* ================= Core Competencies ================= */
.cmsb-comp { background: var(--b-navy); color: #fff; }
.cmsb-comp.t-white { background: #fff; color: var(--b-navy); }
.cmsb-comp.t-gray { background: var(--b-gray-07); color: var(--b-navy); }
.cmsb-comp .comp-grid {
    display: grid; grid-template-columns: minmax(0, 360px) minmax(0, 1fr); gap: 40px 88px; align-items: start;
}
.cmsb-comp .comp-intro { position: sticky; top: 108px; }
.cmsb-comp .comp-intro .b-eyebrow { color: var(--b-accent-soft); }
.cmsb-comp.t-white .comp-intro .b-eyebrow, .cmsb-comp.t-gray .comp-intro .b-eyebrow { color: var(--b-accent); }
.cmsb-comp .comp-intro h2 { margin: 0 0 18px; }
.cmsb-comp .comp-intro h2::after {
    content: ''; display: block; width: 56px; height: 3px; background: var(--b-accent-soft); margin-top: 26px;
}
.cmsb-comp.t-white .comp-intro h2::after, .cmsb-comp.t-gray .comp-intro h2::after { background: var(--b-accent); }
.cmsb-comp .comp-intro p { color: var(--b-gray-04); font-size: var(--t-base); margin: 26px 0 0; }
.cmsb-comp.t-white .comp-intro p, .cmsb-comp.t-gray .comp-intro p { color: var(--b-gray-01); }

.cmsb-comp .comp-list { display: grid; gap: 0 56px; }
.cmsb-comp .comp-list.c2, .cmsb-comp .comp-list.c3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cmsb-comp .comp-item {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 18px; align-items: start;
    padding: 26px 0; border-bottom: 1px solid rgba(255, 255, 255, .14);
    text-decoration: none; color: inherit;
}
.cmsb-comp.t-white .comp-item, .cmsb-comp.t-gray .comp-item { border-bottom-color: var(--b-gray-05); }
.cmsb-comp .comp-ic {
    width: 44px; height: 44px; border: 1px solid rgba(255, 255, 255, .22); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: var(--t-base);
    color: var(--b-accent-soft); transition: background .3s ease, color .3s ease, border-color .3s ease;
}
.cmsb-comp.t-white .comp-ic, .cmsb-comp.t-gray .comp-ic { border-color: var(--b-gray-05); color: var(--b-accent); }
.cmsb-comp a.comp-item:hover .comp-ic { background: var(--b-accent-soft); border-color: var(--b-accent-soft); color: #fff; }
.cmsb-comp .comp-body { min-width: 0; }
.cmsb-comp .comp-title {
    display: block; font-family: 'Helvetica Now Display', 'Inter', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    font-size: var(--t-h4); font-weight: 500; letter-spacing: -.01em; line-height: 1.3; margin-bottom: 8px;
}
.cmsb-comp .comp-text { display: block; font-size: var(--t-ms); line-height: 1.6; color: var(--b-gray-04); }
.cmsb-comp.t-white .comp-text, .cmsb-comp.t-gray .comp-text { color: var(--b-gray-01); }
.cmsb-comp .comp-go { align-self: center; color: var(--b-accent-soft); font-size: var(--t-2xs); }

/* ================= refined Training / Projects cards ================= */
.cmsb-modcards.premium .cmsb-card { background: transparent; }
.cmsb-modcards.premium .cmsb-card .img { margin-bottom: 22px; position: relative; overflow: hidden; }
.cmsb-modcards.premium .cmsb-card .img:not(.no-img)::after {
    content: ''; position: absolute; inset: 0;
    background: linear-gradient(180deg, rgba(10, 13, 22, 0) 45%, rgba(10, 13, 22, .38) 100%);
    opacity: 0; transition: opacity .4s ease;
}
.cmsb-modcards.premium .cmsb-card:hover .img { opacity: 1; }
.cmsb-modcards.premium .cmsb-card:hover .img:not(.no-img)::after { opacity: 1; }
.cmsb-modcards.premium .cmsb-card .b-eyebrow { margin-bottom: 10px; font-size: var(--t-2xs); color: var(--b-gray-02); }
.cmsb-modcards.premium .cmsb-card h3 { font-size: var(--t-h3); margin-bottom: 10px; }
.cmsb-modcards.premium .cmsb-card h3 a {
    background-image: linear-gradient(var(--b-accent), var(--b-accent));
    background-size: 0 1px; background-position: 0 100%; background-repeat: no-repeat;
    transition: background-size .35s ease, color .25s ease;
    padding-bottom: 2px;
}
.cmsb-modcards.premium .cmsb-card:hover h3 a { background-size: 100% 1px; }
.cmsb-modcards.premium .cmsb-card p { font-size: var(--t-ms); margin-bottom: 18px; }
.cmsb-modcards.premium .cmsb-card .more span { font-size: var(--t-ms); }

/* ---------------- responsive ---------------- */
@media (max-width: 1100px) {
    .cmsb .b-head.split { grid-template-columns: 1fr; gap: 24px; align-items: start; }
    .cmsb .b-head.split .b-head-r { padding-bottom: 0; }
    .cmsb-comp .comp-grid { grid-template-columns: 1fr; gap: 44px; }
    .cmsb-comp .comp-intro { position: static; }
}

@media (max-width: 900px) {
    .cmsb-svc .svc-index.c2, .cmsb-svc .svc-index.c3 { grid-template-columns: 1fr; gap: 0; }
    .cmsb-svc .svc-cards.c3, .cmsb-svc .svc-cards.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .cmsb-comp .comp-list.c2, .cmsb-comp .comp-list.c3 { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 640px) {
    .cmsb .b-head.split { padding-bottom: 24px; margin-bottom: 36px; }
    .cmsb-svc .svc-row { grid-template-columns: 40px minmax(0, 1fr) 26px; padding: 24px 0 22px; gap: 6px; }
    .cmsb-svc .svc-go { width: 26px; height: 26px; font-size: 10px; }
    .cmsb-svc a.svc-row:hover { padding-left: 0; }
    .cmsb-svc a.svc-row:hover::before { opacity: 0; }
    .cmsb-svc .svc-cards.c2, .cmsb-svc .svc-cards.c3, .cmsb-svc .svc-cards.c4 { grid-template-columns: 1fr; }
    .cmsb-comp .comp-item { grid-template-columns: 38px minmax(0, 1fr); gap: 14px; padding: 22px 0; }
    .cmsb-comp .comp-ic { width: 38px; height: 38px; font-size: var(--t-ms); }
}

.cmsb-case .case-side .side-note { font-size: var(--t-ms); line-height: 1.6; color: var(--b-gray-01); margin: -8px 0 22px; }

/* ============================================================
   Reading measure and vertical rhythm.

   Body copy was running to ~107 characters a line on a wide
   screen, which is roughly half again the comfortable maximum.
   These caps apply only to running prose — never to grid cards,
   which are already narrow, or to headings, which want the room.
   ============================================================ */
.cmsb .b-head p,
.cmsb .b-head.split .b-head-r p,
.cmsb-story .story-body p,
.cmsb-story .story-body .prose,
.cmsb-case .case-body p,
.cmsb-fwi .body p,
.cmsb-fwi .body .prose,
.cmsb-fwi p,
.cmsb-tray .tray-left p,
.cmsb-leadcta .lc-panel p,
.cmsb-request .b-head p,
.cmsb-imagecard .ic-card p {
    max-width: var(--t-measure);
}

/* headings breathe a little tighter than body copy */
.cmsb .b-head h2 { margin-bottom: .35em; }

/* paragraphs inside long-form prose get consistent separation */
.cmsb-case .case-body p { margin: 0 0 1.15em; }
.cmsb-case .case-body p:last-child { margin-bottom: 0; }

/* stop a lone short word wrapping onto its own line under a heading */
.cmsb .b-eyebrow { text-wrap: nowrap; }

/* ------------------------------------------------------------
   Touch targets. Anything a finger has to hit is at least 44px
   tall on a coarse pointer, which several inline links were not.
   ------------------------------------------------------------ */
@media (pointer: coarse) {
    .cmsb .more,
    .cmsb .b-more,
    .cmsb .b-link,
    .cmsb-modcards .mod-filter a, .cmsb-courses .mod-filter a {
        min-height: 44px;
        display: inline-flex;
        align-items: center;
    }
}

/* ------------------------------------------------------------
   Small-screen refinements. The fluid scale handles sizing, so
   these only fix layout that cannot be expressed as a clamp.
   ------------------------------------------------------------ */
@media (max-width: 560px) {
    /* buttons go full width rather than sitting awkwardly mid-row */
    .cmsb .b-btn { width: 100%; justify-content: space-between; }
    .cmsb .b-head { margin-bottom: 32px; }

    /* the case-study sidebar is a panel, not a rail, at this width */
    .cmsb-case .case-side { padding: 22px; }
    .cmsb-case .case-cta .b-btn + .b-btn { margin-top: 10px; }

    /* two-up fact rows stack */
    .cmsb-request .f-row { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   Card grids step down a column at a time. Collapsing 4 → 1 in
   one jump left tablet-width cards running the full page width,
   which pushed their body copy past 100 characters a line.
   ------------------------------------------------------------ */
@media (max-width: 1400px) {
    .cmsb-grid.c4 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 1040px) {
    .cmsb-grid.c3, .cmsb-grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 760px) {
    .cmsb-grid.c2 { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 620px) {
    .cmsb-grid.c2, .cmsb-grid.c3, .cmsb-grid.c4 { grid-template-columns: minmax(0, 1fr); }
}

/* a single-column card still should not run a 100-character line */
.cmsb-card p,
.cmsb-svc .svc-text,
.cmsb-comp .comp-text {
    max-width: 62ch;
}

/* ============================================================
   Finishing pass — the details that separate a page that looks
   right in a screenshot from one that behaves well in use:
   keyboard focus, reduced motion, anchor offsets, selection.
   ============================================================ */

/* ---- keyboard focus -------------------------------------------------
   Visible only for keyboard users, never on a mouse click, and drawn
   outside the element so it survives on dark panels and thin links. */
.cmsb a:focus-visible,
.cmsb button:focus-visible,
.cmsb input:focus-visible,
.cmsb select:focus-visible,
.cmsb textarea:focus-visible,
.cmsb [tabindex]:focus-visible {
    outline: 2px solid var(--b-accent);
    outline-offset: 3px;
    border-radius: 2px;
}
.cmsb .b-dark a:focus-visible,
.cmsb .b-dark button:focus-visible,
.cmsb-comp a:focus-visible,
.cmsb-svc.t-dark a:focus-visible,
.cmsb-pinned a:focus-visible,
.cmsb-pageheader a:focus-visible {
    outline-color: #fff;
}
/* form fields get a ring rather than an outline, so the field still reads
   as a field while it has focus */
.cmsb-request input:focus-visible,
.cmsb-request select:focus-visible,
.cmsb-request textarea:focus-visible,
.cmsb-contact input:focus-visible,
.cmsb-contact textarea:focus-visible {
    outline: none;
    border-color: var(--b-accent);
    box-shadow: 0 0 0 3px rgba(10, 13, 22, .12);
}

/* ---- anchor links land below the sticky header ---------------------- */
html { scroll-behavior: smooth; }
:target,
[id] { scroll-margin-top: calc(var(--cms-header-h-sm, 68px) + 24px); }

/* ---- text selection -------------------------------------------------- */
::selection { background: var(--b-navy, #141c33); color: #fff; }

/* ---- motion --------------------------------------------------------
   Everything that moves has a still equivalent. The scroll-driven hero
   is the important one: it becomes a plain stack rather than a track
   that slides sideways as the reader scrolls. */
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }

    .cmsb *,
    .cmsb *::before,
    .cmsb *::after {
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .001ms !important;
        scroll-behavior: auto !important;
    }

    .cmsb-pinned .pin-stage { height: auto !important; }
    .cmsb-pinned .pin-viewport { position: static !important; height: auto !important; overflow: visible !important; }
    .cmsb-pinned .pin-slides { transform: none !important; flex-direction: column; width: auto !important; }
    .cmsb-pinned .pin-panel { width: 100% !important; min-height: 70vh; }

    .cmsb-slide-inner h2,
    .cmsb-slide-inner p,
    .cmsb-slide-inner .b-btn { opacity: 1 !important; transform: none !important; }
}

/* ---- images ---------------------------------------------------------
   A picture that has not loaded should hold its space rather than
   collapsing and shifting the copy beneath it. */
.cmsb img { background: var(--b-gray-07); }
.cmsb-card .img,
.cmsb-svc .svc-img,
.cmsb-tray .tray-card .img { content-visibility: auto; }

/* ---- disabled and busy states --------------------------------------- */
.cmsb .b-btn[disabled],
.cmsb .b-btn[aria-disabled="true"] { opacity: .55; pointer-events: none; }

/* ---- print ----------------------------------------------------------
   Case studies and programme pages get printed and emailed around, so
   make that produce something readable. */
@media print {
    .cms-header, .cms-footer, .cms-search-overlay, .cms-nav,
    .cmsb-pinned, .cmsb-request form, #cmsBackToTop { display: none !important; }
    .cmsb section { padding: 18px 0 !important; }
    .cmsb, .cmsb * { color: #000 !important; background: transparent !important; }
    .cmsb a { text-decoration: underline; }
    .cmsb a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; }
}

/* ============================================================
   Events, calendar and the enrolment form.
   ============================================================ */

/* ---------------- event cards ---------------- */
.cmsb-modcards .ev-card .img { position: relative; }
.cmsb-modcards .ev-card .ev-date {
    position: absolute; top: 12px; left: 12px; z-index: 2;
    background: #fff; border-radius: 8px; padding: 7px 11px 8px;
    display: flex; flex-direction: column; align-items: center; line-height: 1;
    box-shadow: 0 4px 14px rgba(10, 13, 22, .16);
}
.cmsb-modcards .ev-card .ev-date em {
    font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--b-accent-soft);
}
.cmsb-modcards .ev-card .ev-date strong {
    font-family: 'Helvetica Now Display', 'Inter', sans-serif;
    font-size: 20px; font-weight: 600; color: var(--b-navy); margin-top: 3px;
}
.cmsb-modcards .mod-filter .cal-link { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; }

/* ---------------- calendar ---------------- */
.cmsb-calendar .cal-bar {
    display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
    padding-bottom: 22px; border-bottom: 1px solid var(--b-gray-05); margin-bottom: 18px;
}
.cmsb-calendar .cal-bar h2 { margin: 0; font-size: var(--t-h2s); min-width: 200px; }
.cmsb-calendar .cal-nav {
    width: 38px; height: 38px; border: 1px solid var(--b-gray-05); border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    color: var(--b-navy); font-size: 12px; transition: background .2s, border-color .2s, color .2s;
}
.cmsb-calendar .cal-nav:hover { background: var(--b-accent); border-color: var(--b-accent); color: #fff; }
.cmsb-calendar .cal-bar-right { margin-left: auto; display: flex; align-items: center; gap: 20px; }
.cmsb-calendar .cal-today { font-size: var(--t-sm); font-weight: 600; color: var(--b-gray-02); }
.cmsb-calendar .cal-today:hover { color: var(--b-accent); }

.cmsb-calendar .cal-legend { display: flex; gap: 22px; font-size: var(--t-sm); color: var(--b-gray-02); margin-bottom: 20px; }
.cmsb-calendar .cal-legend span { display: inline-flex; align-items: center; gap: 8px; }
.dot { width: 9px; height: 9px; border-radius: 50%; display: inline-block; flex: 0 0 auto; }
.dot.ev { background: var(--b-accent-soft); }
.dot.tr { background: var(--b-navy); }

.cmsb-calendar .cal-grid { border: 1px solid var(--b-gray-05); border-radius: 4px; overflow: hidden; }
.cmsb-calendar .cal-head,
.cmsb-calendar .cal-body { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); }
.cmsb-calendar .cal-head {
    background: var(--b-gray-07); border-bottom: 1px solid var(--b-gray-05);
}
.cmsb-calendar .cal-head > div {
    padding: 11px 12px; font-size: var(--t-2xs); font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--b-gray-02);
}
.cmsb-calendar .cal-head .short { display: none; }

.cmsb-calendar .cal-day {
    min-height: 116px; padding: 9px 9px 11px; border-right: 1px solid var(--b-gray-06);
    border-bottom: 1px solid var(--b-gray-06); background: #fff; min-width: 0;
}
.cmsb-calendar .cal-day:nth-child(7n) { border-right: 0; }
.cmsb-calendar .cal-day.out { background: var(--b-gray-08); }
.cmsb-calendar .cal-day.out .d { color: var(--b-gray-04); }
.cmsb-calendar .cal-day.today { background: rgba(74, 114, 184, .06); }
.cmsb-calendar .cal-day .d {
    display: inline-flex; align-items: center; justify-content: center;
    min-width: 24px; height: 24px; font-size: var(--t-xs); font-weight: 600;
    color: var(--b-gray-02); margin-bottom: 6px;
}
.cmsb-calendar .cal-day.today .d { background: var(--b-navy); color: #fff; border-radius: 50%; }

.cmsb-calendar .cal-item {
    display: block; font-size: 11.5px; line-height: 1.35; font-weight: 600;
    padding: 5px 7px; margin-bottom: 4px; border-radius: 4px; text-decoration: none;
    border-left: 3px solid transparent; transition: background .15s;
}
.cmsb-calendar .cal-item span {
    display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.cmsb-calendar .cal-item.event { background: rgba(74, 114, 184, .12); border-left-color: var(--b-accent-soft); color: #2c4573; }
.cmsb-calendar .cal-item.training { background: rgba(20, 28, 51, .07); border-left-color: var(--b-navy); color: var(--b-navy); }
.cmsb-calendar .cal-item:hover { filter: brightness(.95); }

/* ---------------- month as a list ---------------- */
.cmsb-calendar .cal-list { margin-top: 52px; }
.cmsb-calendar .cal-list h3 { font-size: var(--t-h3); margin: 0 0 18px; }
.cmsb-calendar .cal-row {
    display: grid; grid-template-columns: 62px minmax(0, 1fr) 30px; gap: 18px; align-items: center;
    padding: 18px 0; border-bottom: 1px solid var(--b-gray-06); text-decoration: none; color: inherit;
}
.cmsb-calendar .cal-row:first-of-type { border-top: 1px solid var(--b-gray-06); }
.cmsb-calendar .cal-row-date {
    display: flex; flex-direction: column; align-items: center; line-height: 1;
    border: 1px solid var(--b-gray-05); border-radius: 6px; padding: 9px 0 10px;
}
.cmsb-calendar .cal-row-date em {
    font-style: normal; font-size: 10.5px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--b-gray-03);
}
.cmsb-calendar .cal-row-date strong {
    font-family: 'Helvetica Now Display', 'Inter', sans-serif;
    font-size: 21px; font-weight: 600; margin-top: 4px; color: var(--b-navy);
}
.cmsb-calendar .cal-row-body { min-width: 0; }
.cmsb-calendar .cal-row-body .t {
    display: block; font-family: 'Helvetica Now Display', 'Inter', sans-serif;
    font-size: var(--t-h4); font-weight: 500; letter-spacing: -.01em; margin-bottom: 5px;
}
.cmsb-calendar .cal-row-body .m {
    display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
    font-size: var(--t-sm); color: var(--b-gray-02);
}
.cmsb-calendar .cal-row-go {
    width: 30px; height: 30px; border: 1px solid var(--b-gray-05); border-radius: 50%;
    display: flex; align-items: center; justify-content: center; font-size: 11px;
    color: var(--b-accent); transition: background .25s, border-color .25s, color .25s, transform .25s;
}
.cmsb-calendar .cal-row:hover .cal-row-go {
    background: var(--b-accent); border-color: var(--b-accent); color: #fff; transform: translateX(3px);
}
.cmsb-calendar .cal-row:hover .cal-row-body .t { text-decoration: underline; text-underline-offset: 3px; }

/* ---------------- enrolment form ---------------- */
.cmsb-enroll {
    margin-top: 52px; padding: 32px; border: 1px solid var(--b-gray-05);
    border-top: 3px solid var(--b-accent); background: var(--b-gray-08);
}
.cmsb-enroll .en-head h3 { font-size: var(--t-h3); margin: 0 0 6px; }
.cmsb-enroll .en-when { font-size: var(--t-sm); color: var(--b-gray-02); margin: 0 0 22px; display: flex; align-items: center; gap: 8px; }
.cmsb-enroll .en-when i { color: var(--b-accent-soft); }

.cmsb-enroll .en-success,
.cmsb-enroll .en-closed {
    display: flex; align-items: flex-start; gap: 13px; padding: 16px 18px;
    border-radius: 4px; margin-bottom: 22px; font-size: var(--t-ms); line-height: 1.6;
}
.cmsb-enroll .en-success { background: #ecfdf3; border: 1px solid #c3ebd7; color: #05603a; }
.cmsb-enroll .en-success i { font-size: 18px; margin-top: 1px; }
.cmsb-enroll .en-success strong { display: block; margin-bottom: 3px; }
.cmsb-enroll .en-closed { background: #fff; border: 1px solid var(--b-gray-05); color: var(--b-gray-01); flex-wrap: wrap; align-items: center; }
.cmsb-enroll .en-closed i { color: var(--b-accent-soft); font-size: 16px; }
.cmsb-enroll .en-closed span { flex: 1; min-width: 200px; }

.cmsb-enroll .en-errors {
    background: #fef2f2; border: 1px solid #fecaca; color: #b42318;
    padding: 14px 18px; border-radius: 4px; margin-bottom: 22px; font-size: var(--t-ms);
}
.cmsb-enroll .en-errors ul { margin: 0; padding-left: 18px; }

.cmsb-enroll .en-seats {
    display: inline-flex; align-items: center; gap: 8px; font-size: var(--t-sm);
    font-weight: 600; color: var(--b-gray-01); background: #fff;
    border: 1px solid var(--b-gray-05); border-radius: 30px; padding: 6px 14px; margin: 0 0 22px;
}
.cmsb-enroll .en-seats i { color: var(--b-accent-soft); font-size: 12px; }

.cmsb-enroll .en-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cmsb-enroll .en-row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.cmsb-enroll label {
    display: block; font-size: var(--t-xs); font-weight: 600; letter-spacing: .1em;
    text-transform: uppercase; color: var(--b-gray-02); margin-bottom: 8px;
}
.cmsb-enroll label span { color: var(--b-accent-soft); }
.cmsb-enroll input[type="text"],
.cmsb-enroll input[type="email"],
.cmsb-enroll input[type="tel"],
.cmsb-enroll input[type="number"],
.cmsb-enroll textarea {
    width: 100%; border: 1px solid var(--b-gray-05); background: #fff; border-radius: 0;
    padding: 13px 15px; font-size: var(--t-base); font-family: inherit; color: var(--b-navy);
    margin-bottom: 20px; outline: none; transition: border-color .2s, box-shadow .2s;
}
.cmsb-enroll input:focus, .cmsb-enroll textarea:focus {
    border-color: var(--b-accent); box-shadow: 0 0 0 3px rgba(10, 13, 22, .07);
}
.cmsb-enroll textarea { resize: vertical; line-height: 1.6; }
.cmsb-enroll .b-btn { margin-top: 4px; }

/* ---------------- responsive ---------------- */
@media (max-width: 900px) {
    .cmsb-calendar .cal-day { min-height: 92px; padding: 7px 6px 9px; }
    .cmsb-calendar .cal-item { font-size: 10.5px; padding: 4px 5px; }
    .cmsb-calendar .cal-head > div { padding: 9px 6px; }
    .cmsb-enroll { padding: 24px; }
}

@media (max-width: 700px) {
    .cmsb-calendar .cal-head .full { display: none; }
    .cmsb-calendar .cal-head .short { display: inline; }
    .cmsb-calendar .cal-head > div { text-align: center; }
    /* on a phone the grid becomes a density map and the list does the reading */
    .cmsb-calendar .cal-day { min-height: 54px; text-align: center; }
    .cmsb-calendar .cal-day .d { margin-bottom: 3px; }
    .cmsb-calendar .cal-item { padding: 0; margin: 2px auto 0; width: 6px; height: 6px; border-radius: 50%; border-left: 0; }
    .cmsb-calendar .cal-item span { display: none; }
    .cmsb-calendar .cal-item.event { background: var(--b-accent-soft); }
    .cmsb-calendar .cal-item.training { background: var(--b-navy); }
    .cmsb-calendar .cal-list { margin-top: 36px; }
    .cmsb-calendar .cal-bar h2 { min-width: 0; font-size: var(--t-h3); }
    .cmsb-calendar .cal-bar-right { width: 100%; margin-left: 0; justify-content: space-between; }
    .cmsb-enroll .en-row { grid-template-columns: 1fr; gap: 0; }
    .cmsb-calendar .cal-row { grid-template-columns: 54px minmax(0, 1fr); gap: 14px; }
    .cmsb-calendar .cal-row-go { display: none; }
}

/* ============================================================
   Course cards — the listing style shared by Training
   Programmes and Events: a bordered card, image on top, bold
   title, who runs it, a chip row of facts, then the fee.
   ============================================================ */
.cmsb-courses .course-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 26px;
}

.cmsb-course {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--b-gray-05);
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .2s ease, box-shadow .25s ease, transform .25s ease;
}
.cmsb-course:hover {
    border-color: var(--b-gray-04);
    box-shadow: 0 14px 34px rgba(20, 28, 51, .10);
    transform: translateY(-2px);
}

.cmsb-course .c-media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--b-gray-06) center/cover no-repeat;
    border-bottom: 1px solid var(--b-gray-06);
}

/* the date chip an event carries */
.cmsb-course .c-date {
    position: absolute; top: 10px; left: 10px; z-index: 2;
    background: #fff; border-radius: 8px; padding: 6px 10px 7px;
    display: flex; flex-direction: column; align-items: center; line-height: 1;
    box-shadow: 0 4px 14px rgba(10, 13, 22, .18);
}
.cmsb-course .c-date em {
    font-style: normal; font-size: 10px; font-weight: 700; letter-spacing: .1em;
    text-transform: uppercase; color: var(--b-accent-soft);
}
.cmsb-course .c-date strong {
    font-family: 'Helvetica Now Display', 'Inter', sans-serif;
    font-size: 18px; font-weight: 600; color: var(--b-navy); margin-top: 3px;
}

/* a corner flag for the state of the thing */
.cmsb-course .c-flag {
    position: absolute; top: 10px; right: 10px; z-index: 2;
    background: var(--b-navy); color: #fff; border-radius: 6px;
    padding: 4px 9px; font-size: 10.5px; font-weight: 700;
    letter-spacing: .08em; text-transform: uppercase;
}
.cmsb-course .c-flag.open { background: #05603a; }
.cmsb-course .c-flag.full { background: #8a5a12; }
.cmsb-course .c-flag.past { background: var(--b-gray-03); }

.cmsb-course .c-body { padding: 16px 16px 18px; display: flex; flex-direction: column; flex: 1; }

.cmsb-course .c-title {
    font-family: 'Helvetica Now Display', 'Inter', sans-serif;
    font-size: var(--t-h4);
    font-weight: 700;
    letter-spacing: -.015em;
    line-height: 1.28;
    color: var(--b-navy);
    margin: 0 0 6px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.cmsb-course:hover .c-title { text-decoration: underline; text-underline-offset: 3px; }

.cmsb-course .c-by {
    font-size: var(--t-xs);
    color: var(--b-gray-03);
    margin: 0 0 10px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.cmsb-course .c-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 12px; }
.cmsb-course .c-chip {
    display: inline-flex; align-items: center; gap: 5px;
    background: var(--b-gray-07); color: var(--b-gray-01);
    border-radius: 5px; padding: 4px 8px;
    font-size: 11.5px; font-weight: 600; line-height: 1.3;
}
.cmsb-course .c-chip i { font-size: 10px; color: var(--b-gray-03); }
.cmsb-course .c-chip.tag { background: rgba(74, 114, 184, .12); color: #2c4573; }
.cmsb-course .c-chip.tag i { color: var(--b-accent-soft); }

.cmsb-course .c-text {
    font-size: var(--t-sm); line-height: 1.55; color: var(--b-gray-01); margin: 0 0 14px;
    display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

.cmsb-course .c-foot {
    margin-top: auto; display: flex; align-items: baseline; gap: 9px;
    padding-top: 12px; border-top: 1px solid var(--b-gray-06);
}
.cmsb-course .c-fee {
    font-family: 'Helvetica Now Display', 'Inter', sans-serif;
    font-size: 17px; font-weight: 700; color: var(--b-navy); letter-spacing: -.01em;
}
.cmsb-course .c-fee.free { color: #05603a; }
.cmsb-course .c-seats { font-size: var(--t-xs); color: var(--b-gray-03); margin-left: auto; }

/* group heading between category runs */
.cmsb-courses .course-group {
    font-size: var(--t-h3); margin: 0 0 22px; padding-bottom: 12px;
    border-bottom: 1px solid var(--b-gray-05);
}
.cmsb-courses .course-gap { margin-bottom: 56px; }

/* the calendar sits above the cards on the events page */
.cmsb-courses .course-cal { margin-bottom: 56px; }

@media (max-width: 1200px) { .cmsb-courses .course-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .cmsb-courses .course-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; } }
@media (max-width: 560px)  { .cmsb-courses .course-grid { grid-template-columns: minmax(0, 1fr); } }

/* the "full calendar" link is not a filter, so set it apart */
.cmsb-courses .mod-filter .cal-link,
.cmsb-modcards .mod-filter .cal-link {
    margin-left: auto; border-color: transparent; font-weight: 600;
    display: inline-flex; align-items: center; gap: 8px; color: var(--b-accent);
}
.cmsb-courses .mod-filter .cal-link:hover,
.cmsb-modcards .mod-filter .cal-link:hover {
    border-color: var(--b-gray-05); background: var(--b-gray-07);
}

/* the events block can be set to fewer columns than the listing default */
.cmsb-courses .course-grid.c2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cmsb-courses .course-grid.c3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.cmsb-courses .course-grid.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1200px) { .cmsb-courses .course-grid.c4 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 900px)  { .cmsb-courses .course-grid.c3, .cmsb-courses .course-grid.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px)  { .cmsb-courses .course-grid.c2, .cmsb-courses .course-grid.c3, .cmsb-courses .course-grid.c4 { grid-template-columns: minmax(0, 1fr); } }

/* ============================================================
   Section seams.

   Every block renders its own <section> with a full measure of
   padding top and bottom. Where two sections share a background
   the two paddings met and produced a ~196px void — nearly twice
   the intended rhythm, most visible on the Services page where
   four feature sections stack. Collapse the seam when the
   backgrounds match; keep the full gap when the colour changes,
   because there the padding is doing real work.
   ============================================================ */
@supports selector(:has(*)) {
    /* plain → plain */
    .cmsb:has(> section:not(.b-alt):not(.b-dark):not(.t-dark):not(.t-gray):not(.cmsb-comp):not(.cmsb-pinned):not(.cmsb-pageheader))
    + .cmsb > section:not(.b-alt):not(.b-dark):not(.t-dark):not(.t-gray):not(.cmsb-comp):not(.cmsb-pageheader) {
        padding-top: calc(var(--t-section-pad, 96px) * .42);
    }

    /* light-gray → light-gray */
    .cmsb:has(> section.b-alt) + .cmsb > section.b-alt,
    .cmsb:has(> section.t-gray) + .cmsb > section.t-gray {
        padding-top: calc(var(--t-section-pad, 96px) * .42);
    }

    /* dark → dark */
    .cmsb:has(> section.b-dark) + .cmsb > section.b-dark,
    .cmsb:has(> section.cmsb-comp) + .cmsb > section.cmsb-comp,
    .cmsb:has(> section.t-dark) + .cmsb > section.t-dark {
        padding-top: calc(var(--t-section-pad, 96px) * .42);
    }

    /* a heading block sitting directly on its own listing needs no seam at all */
    .cmsb:has(> section.cmsb-pageheader) + .cmsb > section {
        padding-top: var(--t-section-pad, 96px);
    }
}

/* the video poster stand-in on a course card */
.cmsb-course .c-play {
    position: absolute; inset: 0; z-index: 1;
    display: flex; align-items: center; justify-content: center;
    background: rgba(10, 13, 22, .28); color: #fff; font-size: 22px;
    transition: background .25s ease;
}
.cmsb-course:hover .c-play { background: rgba(10, 13, 22, .4); }