/* ==========================================================================
   Training26 - Opening the Book 2026 Redesign
   Only custom rules that Bootstrap 5 can't handle.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Variables & Base
   -------------------------------------------------------------------------- */

:root {
    /* WCAG AA contrast tokens (2026-07-22 accessibility fixes):
       -primary       #e01e5f  4.65:1 with white - safe as a solid bg behind
                               white text and for large (24px+/18.7px bold) text.
       -primary-text  #d31663  4.5:1+ on white AND every light tint we use
                               (#fafafa/#f6f6f4/#f5f5f7/#f3f4f6/#f1f1f0) - use
                               for pink text at normal size.
       -primary-chip  #c8125a  4.5:1+ on the pink chip tints (#fde4ec/#fce7ef).
       Was #ec2669 (4.16:1 - failed AA for normal text); keep #ec2669 only for
       purely decorative gradients/tints, never text or button backgrounds. */
    --training26-primary: #e01e5f;
    --training26-primary-hover: #c8125a;
    --training26-primary-text: #d31663;
    --training26-primary-chip: #c8125a;
}

/* The canvas behind the page: on a short page (content shorter than the
   viewport) the area below the footer shows the HTML element's background,
   not the body's - body is only as tall as its content, and the later
   ".training26 { background: #fff }" rule (section 2) keeps the body white
   by design. Painting html in the footer's bottom copyright colour makes
   that leftover band (and overscroll) read as footer instead of white. */
html {
    background-color: #0d0d0d;
}

body {
    background-color: #0d0d0d;
    /* Tell browsers our content is light-mode so native form widgets
       (input/select/textarea) keep their light defaults even when the OS
       is in dark mode. Without this, Chromium auto-darkens fields. */
    color-scheme: light;
}

.training26 {
    background-color: #222;
}

.training26-content {
    background-color: #fff;
}

.training26 .text-secondary {
    color: #555 !important;
}

.training26-cap {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
}

.training26-cap-container {
    max-width: 1440px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 1rem;
    padding-right: var(--bs-gutter-x, 0.75rem);
}

@media (min-width: 768px) {
    .training26-cap-container { padding-left: calc((100vw - 720px) / 2 + 0.75rem); }
}
@media (min-width: 992px) {
    .training26-cap-container { padding-left: calc((100vw - 960px) / 2 + 0.75rem); }
}
@media (min-width: 1200px) {
    .training26-cap-container { padding-left: calc((100vw - 1140px) / 2 + 0.75rem); }
}
@media (min-width: 1400px) {
    .training26-cap-container { padding-left: calc((100vw - 1320px) / 2 + 0.75rem); }
}
@media (min-width: 1440px) {
    .training26-cap-container { padding-left: calc((1440px - 1320px) / 2 + 0.75rem); }
}

/* Reusable hover shadow - add to any card / panel */
.training26-hover-shadow {
    transition: box-shadow 0.3s;
}

.training26-hover-shadow:hover {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.1);
}

.training26 a {
    color: var(--training26-primary-text);
    transition: color 0.2s;
}

.training26 a:hover {
    color: var(--training26-primary-hover);
}

/* Mobile viewport guard: any section that overflows horizontally would
   otherwise widen the phone layout viewport - the browser zooms out and
   position:fixed chrome (mobile menu, action bar) lays out wider than the
   screen, pushing its right-edge controls off-screen. clip rather than
   hidden: hidden would make body a scroll container and break
   position:sticky descendants. */
body.training26 {
    overflow-x: clip;
}


/* --------------------------------------------------------------------------
   2. Buttons (brand colours Bootstrap can't provide)
   -------------------------------------------------------------------------- */

.training26-btn-primary {
    display: inline-block;
    background-color: var(--training26-primary);
    color: #fff !important;
    border: 2px solid var(--training26-primary);
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none !important;
    padding: 0.7rem 1.9rem;
    border-radius: 999px;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.training26-btn-primary:hover {
    background-color: var(--training26-primary-hover);
    color: #fff !important;
}

.training26-btn-outline {
    display: inline-block;
    background-color: transparent;
    color: var(--training26-primary-text) !important;
    border: 2px solid var(--training26-primary);
    font-size: 1.05rem;
    font-weight: 700;
    text-decoration: none !important;
    padding: 0.7rem 1.9rem;
    border-radius: 999px;
    transition: background-color 0.2s, color 0.2s;
    white-space: nowrap;
}

.training26-btn-outline:hover {
    background-color: var(--training26-primary);
    color: #fff !important;
}


/* --------------------------------------------------------------------------
   3. Header nav (link styling Bootstrap can't do)
   -------------------------------------------------------------------------- */

.training26-nav a {
    color: #1a1a1a !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 8px 16px;
    transition: color 0.2s;
}

.training26-nav a:hover,
.training26-nav .active a {
    color: var(--training26-primary-text) !important;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .training26-nav-about { display: none; }
}


/* --------------------------------------------------------------------------
   4. Hamburger (animated icon - no Bootstrap equivalent)
   -------------------------------------------------------------------------- */

.training26-hamburger {
    background: none;
    border: none;
    cursor: pointer;
    padding: 8px;
    position: relative;
    width: 36px;
    height: 36px;
}

.training26-hamburger span {
    display: block;
    width: 22px;
    height: 2px;
    background: #1a1a1a;
    position: absolute;
    left: 7px;
    transition: transform 0.3s, opacity 0.3s;
}

.training26-hamburger span:nth-child(1) { top: 10px; }
.training26-hamburger span:nth-child(2) { top: 17px; }
.training26-hamburger span:nth-child(3) { top: 24px; }

.training26-hamburger.open span:nth-child(1) { transform: rotate(45deg); top: 17px; }
.training26-hamburger.open span:nth-child(2) { opacity: 0; }
.training26-hamburger.open span:nth-child(3) { transform: rotate(-45deg); top: 17px; }

/* While the mobile menu is open, the header stack floats above the overlay
   so the hamburger (now morphed into an X) closes the menu from exactly
   the same spot it opened from. */
body.training26-menu-open .training26-otb-headstack {
    position: relative;
    z-index: 1060;
}


/* --------------------------------------------------------------------------
   5. Mobile menu (full-screen overlay - no Bootstrap equivalent)
   -------------------------------------------------------------------------- */

/* Mobile drilldown menu - full-screen overlay with two switchable panels.
   Z-index sits above the product page's sticky buy bar (1030) so the menu
   isn't pierced by it when open. */
/* The menu itself never scrolls - the panel inside does. That keeps the
   Course-login / basket bar genuinely pinned to the bottom of the screen
   rather than relying on sticky inside a scrolling container. */
.training26-mobile-menu {
    display: none;
    position: fixed;
    inset: 0;
    background: #fff;
    z-index: 1050;
    flex-direction: column;
    overflow: hidden;
}

.training26-mobile-menu.open {
    display: flex;
}

/* Single panel - the old two-panel drilldown is gone; Training is an
   inline accordion instead. The panel is the scroll container; min-height
   0 lets it shrink below its content so the CTA bar always stays visible. */
.training26-mobile-panel {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
    -webkit-overflow-scrolling: touch;
}

/* Panel header: title left, close right */
.training26-mobile-panelhead {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 1rem 1.25rem;
}

.training26-mobile-panelhead-title {
    margin: 0;
    font-size: 1.35rem;
    font-weight: 800;
    color: #111;
}

.training26-mobile-panelhead-logo img {
    display: block;
    height: 30px;
    width: auto;
}

/* Region row at the top of the menu - current region + "Change" expander. */
.training26-mobile-regiontop {
    border-top: 1px solid #f1f1f1;
    border-bottom: 1px solid #f1f1f1;
}

.training26-mobile-regiontop-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: 100%;
    padding: 0.85rem 1.5rem;
    background: #fff;
    border: none;
    cursor: pointer;
    text-align: left;
    font-size: 0.95rem;
    color: #333;
}

.training26-mobile-regiontop-current {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
}

.training26-mobile-regiontop-current img {
    width: 22px;
    height: auto;
    border-radius: 2px;
    flex-shrink: 0;
}

.training26-mobile-regiontop-sep {
    color: #bbb;
}

.training26-mobile-regiontop-change {
    color: var(--training26-primary-text);
    font-size: 0.9rem;
    font-weight: 700;
    white-space: nowrap;
}

.training26-mobile-regiontop-change i {
    font-size: 0.75rem;
    margin-left: 0.2rem;
    transition: transform 0.15s;
}

.training26-mobile-regiontop.is-open .training26-mobile-regiontop-change i {
    transform: rotate(180deg);
}

.training26-mobile-regiontop-options {
    display: none;
    padding: 0 1.5rem 1rem;
    gap: 0.6rem;
}

.training26-mobile-regiontop.is-open .training26-mobile-regiontop-options {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.training26-mobile-regiontop-options a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0.4rem;
    padding: 0.55rem 0.5rem;
    border: 1px solid #e5e5e5;
    border-radius: 999px;
    color: #444 !important;
    text-decoration: none !important;
    font-size: 0.85rem;
    font-weight: 600;
}

.training26-mobile-regiontop-options a img {
    width: 18px;
    height: auto;
    border-radius: 2px;
}

.training26-mobile-regiontop-options a.is-active {
    background-color: var(--training26-primary);
    border-color: var(--training26-primary);
    color: #fff !important;
}


.training26-mobile-panelhead-close {
    justify-self: end;
    width: 2.4rem;
    height: 2.4rem;
    border-radius: 50%;
    border: 1px solid #ececec;
    background: #fff;
    color: #555;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.05rem;
}

.training26-mobile-panelhead-close:hover {
    color: var(--training26-primary-text);
    border-color: var(--training26-primary);
}

/* Section eyebrow ("LIBRARY TRAINING COURSES" / "TRAINING RESOURCES") */
.training26-mobile-grouphead {
    margin: 0;
    padding: 1.25rem 1.5rem 0.75rem;
    color: #6d6d6d;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.training26-mobile-grouphead-spaced {
    padding-top: 1.75rem;
    border-top: 1px solid #f1f1f1;
    margin-top: 0.25rem;
}

/* Item rows */
.training26-mobile-list {
    list-style: none;
    margin: 0;
    padding: 0;
}

.training26-mobile-listitem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
    padding: 1rem 1.5rem;
    background: #fff;
    border: none;
    border-bottom: 1px solid #f1f1f1;
    color: #111 !important;
    text-decoration: none !important;
    font-size: 1.05rem;
    font-weight: 700;
    cursor: pointer;
    text-align: left;
    transition: background-color 0.15s;
}

.training26-mobile-listitem.is-featured,
.training26-mobile-listitem.is-active {
    color: var(--training26-primary-text) !important;
}

.training26-mobile-listitem > span {
    min-width: 0;
}

.training26-mobile-listitem > i {
    color: #c8c8c8;
    font-size: 0.85rem;
    flex-shrink: 0;
    margin-left: 0.75rem;
    transition: transform 0.15s;
}

.training26-mobile-listitem:hover {
    background-color: #fafafa;
}

.training26-mobile-listitem.is-active {
    background-color: #fde4ec;
    color: var(--training26-primary-text);
}

.training26-mobile-listitem.is-active > i {
    color: var(--training26-primary-text);
}

/* Course-count pill on "Browse all courses" - quiet outline chip. */
.training26-mobile-pill {
    flex-shrink: 0;
    background-color: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 999px;
    padding: 0.25rem 0.65rem;
    font-size: 0.75rem;
    font-weight: 700;
    color: #444;
}

/* Inline accordion row + sub-list (sister-sites group). Deliberately
   quieter than the training rows - it's secondary, cross-site wayfinding. */
.training26-mobile-acc > .training26-mobile-listitem {
    font-size: 0.95rem;
    font-weight: 500;
    color: #444 !important;
}

.training26-mobile-sublist {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;
    background-color: #fafafa;
}

.training26-mobile-acc.is-open > .training26-mobile-sublist {
    display: block;
}

.training26-mobile-acc.is-open > .training26-mobile-listitem > i {
    transform: rotate(180deg);
    color: var(--training26-primary-text);
}

.training26-mobile-subitem {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.5rem 0.85rem 2rem;
    border-bottom: 1px solid #f1f1f1;
    color: #444 !important;
    text-decoration: none !important;
    font-size: 0.95rem;
    font-weight: 600;
}

.training26-mobile-subitem:hover {
    color: var(--training26-primary-text) !important;
}

.training26-mobile-subitem i {
    color: #b8b8b8;
    font-size: 0.75rem;
    flex-shrink: 0;
}

/* Support rows - quieter than the main training list. */
.training26-mobile-list-small .training26-mobile-listitem {
    padding: 0.8rem 1.5rem;
    font-size: 0.95rem;
    font-weight: 500;
}

/* Bottom CTA bar - Course login pill + circular basket */
.training26-mobile-cta {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1rem 1.25rem calc(1.25rem + env(safe-area-inset-bottom));
    background: #fff;
    border-top: 1px solid #ececec;
    flex: 0 0 auto;
}

.training26-mobile-cta-login {
    flex: 1 1 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.85rem 1.25rem;
    border-radius: 999px;
    background-color: var(--training26-primary);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 0.95rem;
    font-weight: 700;
    transition: background-color 0.15s;
}

.training26-mobile-cta-login:hover {
    background-color: var(--training26-primary-hover);
}

.training26-mobile-cta-basket {
    flex: 0 0 auto;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    border: 1px solid var(--training26-primary);
    background: #fff;
    color: var(--training26-primary-text) !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.3rem;
    font-size: 0.95rem;
    font-weight: 600;
    transition: background-color 0.15s, color 0.15s;
}

.training26-mobile-cta-basket:hover {
    background-color: var(--training26-primary);
    color: #fff !important;
}

.training26-mobile-cta-basket-count {
    font-size: 0.85rem;
    line-height: 1;
}


/* --------------------------------------------------------------------------
   6. Hero split (50/50 layout)
   -------------------------------------------------------------------------- */

.training26-hero-content-inner {
    max-width: 600px;
}

/* Left padding that matches Bootstrap container edge */
.training26-hero-container-pad {
    padding-left: 1rem;
}

@media (min-width: 768px) {
    .training26-hero-container-pad { padding-left: calc((100vw - 720px) / 2 + 0.75rem); }
}
@media (min-width: 992px) {
    .training26-hero-container-pad { padding-left: calc((100vw - 960px) / 2 + 0.75rem); }
}
@media (min-width: 1200px) {
    .training26-hero-container-pad { padding-left: calc((100vw - 1140px) / 2 + 0.75rem); }
}
@media (min-width: 1400px) {
    .training26-hero-container-pad { padding-left: calc((100vw - 1320px) / 2 + 0.75rem); }
}
/* When hero is capped at 1440px, use fixed padding */
@media (min-width: 1440px) {
    .training26-hero-container-pad { padding-left: calc((1440px - 1320px) / 2 + 0.75rem); }
}

.training26-hero-h1 {
    font-size: 3.4rem;
    line-height: 1.1;
}

.training26-hero-text {
    font-size: 1.1rem;
    line-height: 1.75;
    color: #000;
}

.training26-hero-image {
    background-size: cover;
    background-position: center;
    min-height: 400px;
}

@media (min-width: 992px) {
    .training26-hero-content { flex: 0 0 50%; max-width: 50%; }
    .training26-hero-image   { flex: 0 0 50%; max-width: 50%; }
    .training26-hero         { min-height: 520px; }
}

@media (max-width: 991.98px) {
    .training26-hero-image { order: -1; }
    .training26-hero-content-inner { margin: 0 auto; }
    .training26-hero-h1 { font-size: 2.4rem; }
}


/* --------------------------------------------------------------------------
   7. Hero full-bleed
   -------------------------------------------------------------------------- */

.training26-hero-full {
    min-height: 520px;
    background-size: cover;
    background-position: center;
}

.training26-hero-full-overlay {
    background: linear-gradient(to top, rgba(30,30,30,0.95) 0%, rgba(30,30,30,0.85) 60%, transparent 100%);
}

@media (max-width: 991.98px) {
    .training26-hero-full { min-height: 400px; }
}

/* Case Studies hero sizing */
.training26-hero-cs { min-height: 560px; }
.training26-hero-cs > .container { min-height: 560px; }
.training26-hero-cs-h1 { font-size: 3.2rem; }
.training26-hero-cs-p { font-size: 1.05rem; }

/* Smaller laptops / tablets landscape */
@media (max-width: 1199.98px) {
    .training26-hero-cs,
    .training26-hero-cs > .container { min-height: 420px; }
    .training26-hero-cs-h1 { font-size: 2.6rem; }
}

/* Tablets portrait and below */
@media (max-width: 991.98px) {
    .training26-hero-cs,
    .training26-hero-cs > .container { min-height: 380px; }
    .training26-hero-cs-h1 { font-size: 2.2rem; }
    .training26-hero-cs-p { font-size: 0.95rem; }
}

/* Mobile */
@media (max-width: 575.98px) {
    .training26-hero-cs,
    .training26-hero-cs > .container { min-height: 400px; }
    .training26-hero-cs-h1 { font-size: 2rem; }
}


/* --------------------------------------------------------------------------
   8. Stats bar (brand colour on numbers)
   -------------------------------------------------------------------------- */

.training26-stats {
    background-color: #333333;
}

.training26-stat-number {
    color: #fff; /*var(--training26-primary);*/
}


/* --------------------------------------------------------------------------
   9. Service cards
   -------------------------------------------------------------------------- */

.training26-card-img {
    height: 240px;
    background-size: cover;
    background-position: center;
}

.training26-card-img-tall {
    height: 280px;
}

.training26-card-tag {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: var(--training26-primary-text);
    margin-bottom: 6px;
}

/* Clickable card wrapper - use as <a> around a card */
.training26-card-clickable {
    color: inherit !important;
    text-decoration: none !important;
    display: block;
}

.training26-card-link {
    color: var(--training26-primary-text) !important;
    text-decoration: none !important;
    transition: color 0.2s;
}

.training26-card-link:hover {
    color: var(--training26-primary-hover) !important;
}

/* Case study index cards */
.training26-cs-card {
    background: #f0f0f0;
    transition: box-shadow 0.3s, transform 0.3s;
}

.training26-cs-card:hover {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.12);
    transform: translateY(-2px);
}

.training26-cs-card-img {
    height: 260px;
    background-size: cover;
    background-position: center;
}

/* Case study detail page - hero */
.training26-cs-hero {
    background-size: cover;
    background-position: center;
}

.training26-cs-hero-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(0,0,0,0.55) 0%, rgba(0,0,0,0.08) 50%, transparent 100%);
}

/* Case study detail page - quote block override */
.training26-case-study .blockQuote {
    background: #f5f0eb;
    border-left: 4px solid var(--training26-primary);
    border-radius: 6px;
    padding: 2rem 2.5rem;
    margin: 2rem 0;
}

.training26-case-study .blockQuote .quote {
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.7;
    color: #333;
}

.training26-case-study .blockQuote .quote-arrow {
    display: none;
}

.training26-case-study .blockQuote .source {
    font-weight: 700;
    color: var(--training26-primary-text);
    margin-top: 1rem;
    font-size: 0.9rem;
}

.training26-case-study .blockQuote .attribute {
    color: #666;
    font-size: 0.9rem;
}

/* Case study detail page - rich text & headings */
.training26-case-study .blockRichText {
    font-size: 1.05rem;
    line-height: 1.8;
    color: #444;
    margin: 1.5rem 0;
}

.training26-case-study .blockRichText h3,
.training26-case-study .blockRichText h2 {
    font-weight: 700;
    color: #222;
    font-size: 1.6rem;
    margin-top: 2.5rem;
    margin-bottom: 0.75rem;
}

.training26-case-study .blockImage {
    margin: 2rem 0;
}

.training26-case-study .blockSplitComponent {
    margin: 2rem 0;
    --bs-gutter-x: 0.5rem;
}

.training26-case-study .blockSplitComponent .blockImage {
    margin: 0;
}

.training26-case-study .blockSplitComponent .blockImage img {
    border-radius: 6px;
}

/* Case study detail page - gallery grid */
.training26-cs-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.training26-cs-gallery-item {
    height: 240px;
    display: block;
    overflow: hidden;
}

.training26-cs-gallery-wide {
    grid-column: span 2;
}

@media (max-width: 576px) {
    .training26-cs-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    .training26-cs-gallery-wide {
        grid-column: span 2;
    }
    .training26-cs-gallery-item {
        height: 180px;
    }
}


/* --------------------------------------------------------------------------
   10. Dark section (reusable dark-background block)
   -------------------------------------------------------------------------- */

.training26-dark-section {
    background-color: #2b2b2b;
}

.training26-dark-section a {
    color: var(--training26-primary-text) !important;
}

.training26-dark-section a:hover {
    color: var(--training26-primary-hover) !important;
}

.training26-dark-section .training26-btn-primary,
.training26-dark-section .training26-btn-primary:hover {
    color: #fff !important;
}


/* --------------------------------------------------------------------------
   11. Before / After comparison slider
   -------------------------------------------------------------------------- */

.training26-compare {
    position: relative;
    user-select: none;
    -webkit-user-select: none;
    overflow: hidden;
    cursor: ew-resize;
}

.training26-compare img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.training26-compare-after,
.training26-compare-before {
    max-height: 420px;
}

.training26-compare-after {
    height: 420px;
}

.training26-compare-after {
    position: relative;
}

.training26-compare-before {
    position: absolute;
    inset: 0;
    clip-path: inset(0 50% 0 0);
}

.training26-compare-handle {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 50%;
    width: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

.training26-compare-line {
    flex: 1;
    width: 3px;
    background: #fff;
    box-shadow: 0 0 6px rgba(0,0,0,0.4);
}

.training26-compare-grip {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: #fff;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    font-size: 16px;
    font-weight: 700;
    color: #333;
    flex-shrink: 0;
}

.training26-compare-label {
    position: absolute;
    bottom: 12px;
    background: rgba(0,0,0,0.6);
    color: #fff;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 1px;
    text-transform: uppercase;
    padding: 4px 12px;
    border-radius: 3px;
    pointer-events: none;
    z-index: 1;
}

.training26-compare-label-before { left: 12px; }
.training26-compare-label-after  { right: 12px; }


/* --------------------------------------------------------------------------
   12. Jump navigation (sticky section nav)
   -------------------------------------------------------------------------- */

/* --- Sticky behaviour (shared by jump nav and section nav) --- */

.training26-jump-nav.stuck,
.training26-section-nav.stuck {
    position: fixed;
    /* top is set dynamically by JS to sit below the header */
    left: 0;
    right: 0;
    z-index: 1020;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

/* --- Jump link pills (row 2 / standalone) --- */

.training26-jump-link {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 20px;
    border: 1px solid #ddd;
    font-size: 13px;
    font-weight: 500;
    color: #555 !important;
    text-decoration: none !important;
    transition: all 0.2s;
    white-space: nowrap;
}

.training26-jump-link:hover {
    border-color: var(--training26-primary);
    color: var(--training26-primary-text) !important;
}

.training26-jump-link.active {
    background-color: var(--training26-primary);
    border-color: var(--training26-primary);
    color: #fff !important;
}

@media (max-width: 767px) {
    .training26-jump-nav {
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }
    .training26-jump-nav .container {
        gap: 0.25rem !important;
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
    }
    .training26-jump-nav .training26-jump-link {
        font-size: 10px;
        padding: 3px 8px;
        border-radius: 14px;
    }
}

/* --- Two-layer section navigation --- */

.training26-section-nav {
    position: relative;
    z-index: 2;
}

.training26-section-nav-row {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    -ms-overflow-style: none;
}

.training26-section-nav-row::-webkit-scrollbar {
    display: none;
}

/* Row 1: section pages - slightly darker neutral grey */
.training26-section-nav-row--sections {
    background: #e6e6e6;
    border-bottom: 1px solid #d0d0d0;
}

/* Row 2: jump links - lighter to show hierarchy */
.training26-section-nav-row--jump {
    background: #efefef;
    border-bottom: 1px solid #d0d0d0;
}

.training26-section-nav-label {
    display: inline-flex;
    align-items: center;
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #999;
    white-space: nowrap;
    flex-shrink: 0;
}

.training26-section-nav-label--jump {
    font-size: 0.65rem;
    color: #aaa;
}

.training26-section-nav-sep {
    display: inline-flex;
    align-items: center;
    color: #bbb;
    font-size: 0.85rem;
    flex-shrink: 0;
}

.training26-section-links {
    display: flex;
    gap: 0.15rem;
    flex-wrap: nowrap;
    align-items: center;
}

/* Shared link base for both rows */
.training26-section-link {
    display: inline-flex;
    align-items: center;
    padding: 10px 10px;
    font-size: 0.85rem;
    font-weight: 500;
    color: #6d6d6d !important;
    text-decoration: none !important;
    white-space: nowrap;
    border: none;
    border-radius: 0;
    background: none;
    transition: color 0.2s;
}

.training26-section-link:hover {
    color: #555 !important;
}

/* Row 1 active: bold dark grey + pink underline via ::after */
.training26-section-nav-row--sections .training26-section-link.active {
    position: relative;
    color: #555 !important;
    font-weight: 700;
}

.training26-section-nav-row--sections .training26-section-link.active::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: 0;
    height: 3px;
    background: var(--training26-primary);
    border-radius: 2px 2px 0 0;
}

/* Jump links inside section nav - override pill defaults */
.training26-jump-link.training26-section-link {
    border: none;
    border-radius: 0;
    background: none;
    padding: 10px 10px;
    font-size: 0.85rem;
    color: #6d6d6d !important;
}

.training26-jump-link.training26-section-link:hover {
    background: none;
    color: #555 !important;
}

/* Row 2 active: bold + pink text, no underline */
.training26-section-nav-row--jump .training26-section-link.active {
    color: var(--training26-primary-text) !important;
    font-weight: 700;
}

/* --- Gallery browse bar (row 2 on GalleryDetail) --- */

.training26-gallery-browse-select {
    appearance: none;
    -webkit-appearance: none;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 30px 4px 10px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #444;
    background: #fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23666'/%3E%3C/svg%3E") no-repeat right 10px center;
    background-size: 10px 6px;
    min-width: 180px;
    max-width: 300px;
    cursor: pointer;
    flex-shrink: 0;
    line-height: 1.4;
}

.training26-gallery-browse-select:focus {
    outline: 2px solid var(--training26-primary);
    outline-offset: 1px;
    border-color: var(--training26-primary);
}

.training26-gallery-browse-all {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 0.8rem;
    font-weight: 600;
    color: #999 !important;
    text-decoration: none !important;
    white-space: nowrap;
    margin-left: auto;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.training26-gallery-browse-all:hover {
    color: var(--training26-primary-text) !important;
}

/* Responsive: compact on small screens */
@media (max-width: 767.98px) {
    .training26-section-nav-row .container {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
    }
    .training26-section-nav-row .container::-webkit-scrollbar {
        display: none;
    }
    .training26-section-link,
    .training26-jump-link.training26-section-link {
        font-size: 0.75rem;
        padding: 8px 8px;
    }
    .training26-gallery-browse-select {
        min-width: 0;
        max-width: none;
        flex: 1 1 auto;
    }
    .training26-gallery-browse-quick {
        display: none;
    }
}


/* --------------------------------------------------------------------------
   13. Principle cards & carousel
   -------------------------------------------------------------------------- */

.training26-principle-card {
    background-color: #353535;
    border: 1px solid #444;
    min-height: 160px;
}

.training26-principle-number {
    font-size: 2rem;
    font-weight: 700;
    color: var(--training26-primary-text);
    line-height: 1;
}

/* Splide arrows on dark sections */
.training26-dark-section .splide__arrow {
    background: rgba(255,255,255,0.1);
    opacity: 1;
}

.training26-dark-section .splide__arrow svg {
    fill: #fff;
}

.training26-dark-section .splide__arrow:hover {
    background: rgba(255,255,255,0.2);
}

#principles-carousel .splide__arrow--prev { left: -1.5rem; }
#principles-carousel .splide__arrow--next { right: -1.5rem; }


/* --------------------------------------------------------------------------
   13. Footer (dark theme overrides)
   -------------------------------------------------------------------------- */

.training26-footer {
    background-color: #2b2b2b;
    color: #ccc;
    border-top: 4px solid var(--training26-primary);
}

.training26-footer h4, .training26-footer h2 { color: #fff; }

.training26-footer a { color: #ccc !important; transition: color 0.2s; }
.training26-footer a:hover { color: #fff !important; }

.training26-footer hr { border-color: rgba(255,255,255,0.1); }

.training26-footer .copyright {
    background-color: #222;
    color: #949494; /* 5.2:1 on #222 (AA); mid-greys fail on this dark stripe */
}

.training26-footer .copyright a { color: #949494 !important; display: inline; }
.training26-footer .copyright a:hover { color: #fff !important; }


/* --- Mobile footer (compact, single-column) ---------------------------- */

.training26-footer-mobile {
    padding: 2rem 0 0;
}

.training26-footer-mobile-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 2rem;
}

/* The logo PNG is dark-on-white; rather than the old invert() hack (which
   left a floating black box on the dark footer) it sits on a deliberate
   white chip. Swap for a white-on-transparent asset when one exists. */
.training26-footer-mobile-logo {
    /* White box removed 2026-08-21 - the img is now the inverted
       (white-text) logo cut, transparent on the dark footer. */
    display: inline-flex;
    align-items: center;
}

.training26-footer-mobile-logo img {
    display: block;
    height: 24px;
    width: auto;
}

/* Selector deliberately scoped under .training26-footer so it beats the
   generic `.training26-footer a { color: #ccc !important }` rule above -
   without this lift the !important on the generic wins on specificity and
   the button text shows muted grey on the pink pill. */
.training26-footer .training26-footer-mobile-login {
    display: inline-flex;
    align-items: center;
    background-color: var(--training26-primary);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 0.9rem;
    font-weight: 700;
    padding: 0.65rem 1.25rem;
    border-radius: 999px;
    transition: background-color 0.15s;
}

.training26-footer .training26-footer-mobile-login:hover {
    background-color: var(--training26-primary-hover);
    color: #fff !important;
}

.training26-footer-mobile-links {
    display: grid;
    grid-template-columns: 1fr 1fr;
    column-gap: 1rem;
    row-gap: 0.6rem;
    margin-bottom: 1.5rem;
}

.training26-footer-mobile-links a {
    color: #e6e6e6 !important;
    text-decoration: none !important;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 0.35rem 0;
}

.training26-footer-mobile-links a:hover {
    color: var(--training26-primary-text) !important;
}

/* Contact & address - uses native <details> so it works with no JS. */
.training26-footer-mobile-toggle {
    border-top: 1px solid #3a3a3a;
    border-bottom: 1px solid #3a3a3a;
    padding: 1rem 0;
    margin-bottom: 1.5rem;
}

.training26-footer-mobile-toggle summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
}

.training26-footer-mobile-toggle summary::-webkit-details-marker {
    display: none;
}

.training26-footer-mobile-toggle summary i {
    color: #999;
    transition: transform 0.15s;
    font-size: 0.8rem;
}

.training26-footer-mobile-toggle[open] summary i {
    transform: rotate(180deg);
}

.training26-footer-mobile-toggle-body {
    padding-top: 1rem;
}

.training26-footer-mobile-toggle-body h5,
.training26-footer-mobile-toggle-body h2 {
    margin: 1rem 0 0.25rem;
    font-size: 0.95rem;
    font-weight: 700;
    color: #fff;
}

.training26-footer-mobile-toggle-body h5:first-child,
.training26-footer-mobile-toggle-body h2:first-child {
    margin-top: 0;
}

.training26-footer-mobile-toggle-body p {
    margin: 0;
    color: #c0c0c0;
    line-height: 1.5;
    font-size: 0.95rem;
}

.training26-footer-mobile-toggle-body a {
    color: #c0c0c0 !important;
    text-decoration: none !important;
}

.training26-footer-mobile-toggle-body a:hover {
    color: #fff !important;
}

/* CILIP partner card - same ringed-badge treatment as the hero strip. */
.training26-footer-mobile-cilip {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 0.25rem 0 1.5rem;
}

.training26-footer-mobile-cilip img {
    width: 64px;
    height: 64px;
    flex-shrink: 0;
    border-radius: 50%;
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.training26-footer-mobile-cilip strong {
    color: #fff;
    display: block;
    font-size: 0.95rem;
    line-height: 1.3;
}

.training26-footer-mobile-cilip span {
    color: #c0c0c0;
    font-size: 0.9rem;
    line-height: 1.3;
}

/* Footer copyright stripe - slightly darker than the main footer body. */
.training26-footer-mobile-copyright {
    background-color: #0d0d0d;
    color: #999;
    padding: 0.85rem 0;
    text-align: center;
    font-size: 0.85rem;
}


/* --------------------------------------------------------------------------
   10. Logo
   -------------------------------------------------------------------------- */

/* 2026 logo png: tightly cropped, no built-in whitespace, aspect ~6.85 -
   width is ~6.85x the height set here. Steps keep the nav row from wrapping:
   the overflow system (More collapse, 992-1400px) was budgeted for the old
   210px logo, so as the viewport tightens the logo gives the space back. */
.training26-logo img {
    height: 40px; /* ~274px wide */
    width: auto;
    position: relative;
    top: 0;
}

@media (max-width: 1699.98px) {
    .training26-logo img { height: 32px; } /* ~219px - full nav still shows to 1400 */
}
@media (max-width: 1399.98px) {
    .training26-logo img { height: 30px; } /* ~206px - matches the old logo footprint */
}
@media (max-width: 991.98px) {
    /* mobile header: logo + basket + burger only. Width-driven so the logo
       shrinks fluidly on very narrow phones (320px) instead of colliding. */
    .training26-logo img { height: auto; width: min(233px, 60vw); }
}


/* --------------------------------------------------------------------------
   14. Breadcrumb (tag-style pills)
   -------------------------------------------------------------------------- */

.training26-breadcrumb,
.training26-breadcrumb .breadcrumb-item,
.training26-breadcrumb .breadcrumb-item a {
    font-size: 11px !important;
    font-weight: 600;
    letter-spacing: 1.5px;
    text-transform: uppercase;
}

    .training26-breadcrumb .breadcrumb-item a {
        color: #999 !important;
        text-decoration: none !important;
    }

.training26-breadcrumb .breadcrumb-item a:hover {
    color: var(--training26-primary-hover) !important;
}

.training26-breadcrumb .breadcrumb-item.active {
    color: #999;
}

.training26-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: #aaa;
}


/* --------------------------------------------------------------------------
   15. Interior Design principle cards (gradient-bar grid)
   -------------------------------------------------------------------------- */

.training26-id-principle-card {
    background-color: #353535;
    border: 1px solid #444;
    position: relative;
    overflow: hidden;
    color: #ccc;
    font-size: 0.9rem;
    line-height: 1.6;
}

.training26-id-principle-bar {
    height: 4px;
    border-radius: 2px;
    margin-bottom: 1rem;
}

/* Inset shadow overlay for white-edged images */
.training26-inset-shadow {
    position: relative;
}
.training26-inset-shadow::after,
.training26-inset-shadow-strong::after {
    content: "";
    position: absolute;
    inset: 0;
    box-shadow: inset 0 0 24px rgba(0,0,0,0.15);
    border-radius: inherit;
    pointer-events: none;
}
.training26-inset-shadow-strong { position: relative; }
.training26-inset-shadow-strong::after {
    box-shadow: inset 0 0 40px rgba(0,0,0,0.3);
}

/* Theme tag pills (gallery cross-link) */
.training26-theme-pill {
    display: inline-block;
    padding: 6px 16px;
    border-radius: 50px;
    border: 1px solid #c5c0b8;
    background: #fff;
    color: #666 !important;
    font-size: 0.85rem;
    text-decoration: none !important;
    transition: border-color 0.2s, color 0.2s;
}
.training26-theme-pill:hover {
    border-color: var(--training26-primary);
    color: var(--training26-primary-text) !important;
}
@media (max-width: 767px) {
    .training26-theme-pill {
        font-size: 0.75rem;
        padding: 4px 10px;
    }
}

/* "Also in Library Design" section-switcher cards */
.training26-also-in {
    background: #fff;
}

.training26-also-in-heading {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #999;
    border-bottom: 3px solid var(--training26-primary);
    padding-bottom: 0.75rem;
}

.training26-also-in-card {
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    padding: 1.5rem;
    transition: border-color 0.2s, box-shadow 0.2s;
}

.training26-also-in-card:hover {
    border-color: #ccc;
    box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

.training26-also-in-tag {
    font-size: 0.65rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.12em;
    color: #999;
    margin-bottom: 0.5rem;
}

.training26-also-in-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #333;
    margin-bottom: 0.5rem;
}

.training26-also-in-desc {
    font-size: 0.9rem;
    color: #666;
    line-height: 1.6;
    margin-bottom: 1rem;
}

.training26-also-in-link {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--training26-primary-text);
}

.training26-also-in-card:hover .training26-also-in-link {
    color: var(--training26-primary-hover);
}


/* --------------------------------------------------------------------------
   16. FAQ accordion (brand-coloured active state)
   -------------------------------------------------------------------------- */

.training26-accordion .accordion-button {
    font-size: 1.05rem;
    color: #222;
}

.training26-accordion .accordion-button:not(.collapsed) {
    color: #fff !important;
    background-color: #2b2b2b !important;
    box-shadow: none;
}

.training26-accordion .accordion-button:not(.collapsed)::after {
    filter: brightness(0) invert(1);
}

.training26-accordion .accordion-button:focus {
    box-shadow: 0 0 0 3px rgba(0, 0, 0, 0.1);
}


/* --------------------------------------------------------------------------
   17. Reading for Pleasure - hero collage grid
   -------------------------------------------------------------------------- */

.training26-rfp-collage-wrap {
    background-color: #1a0a14;
    overflow: hidden;
}

.training26-rfp-collage {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    grid-template-rows: repeat(3, 1fr);
    height: 100%;
    gap: 3px;
    opacity: 0.75;
}

.training26-rfp-collage > div {
    min-height: 80px;
}


/* --------------------------------------------------------------------------
   18. Legacy training.css - ported classes, restyled to the LIGHT OTB26 palette
       (white content, dark text, pink accent, no dark-theme backgrounds)
       All rules scoped under .training26 so they never leak to the Design site.
   -------------------------------------------------------------------------- */

/* Override the dark body bg from section 1 - training site is light */
.training26 {
    background-color: #fff;
}

.training26 .form-control {
    border-radius: 4px;
}

.training26 .display-5 {
    font-size: 2.25rem;
}


/* --- Training section backgrounds (now light panels, subtle separation) --- */

.training26 .trainingSection1 {
    position: relative;
    background-color: #fff !important;
    color: #222;
}

.training26 .trainingSection2 {
    position: relative;
    background-color: #f7f7f7 !important;
    color: #222;
}

.training26 .trainingSection3 {
    position: relative;
    background-color: #f0f0f0 !important;
    color: #222;
}

.training26 .blockSection {
    padding: 2.5em 0;
}

.training26 .trainingSection1:after {
    content: none;
}


/* --- Heading / link overrides inside training26 --- */

.training26 .blockRichText h3,
.training26 .blockRichText .h3,
.training26 h3,
.training26 h1.title.display-4.text-primary,
.training26 .blockPageTitle h1.display-4 {
    color: #222 !important;
}

.training26 a {
    font-weight: 500;
}

.training26 .table {
    color: #222;
}

.training26 .table.table-dark > :not(caption) > * > * {
    background-color: #2b2b2b !important;
    color: #fff;
}


/* --- Quote block (light theme, pink accent bar) --- */

.training26 .blockQuote {
    padding: 2rem 2.5rem;
    background: #f5f0eb;
    border-left: 4px solid var(--training26-primary);
    border-radius: 6px;
    margin: 2rem 0;
    color: #333;
    text-align: left;
    font-size: 1.05rem;
    line-height: 1.7;
}

.training26 .blockQuote .quote {
    font-style: italic;
}

.training26 .blockQuote .quote p {
    padding: 0;
    background: transparent;
    position: relative;
    margin-bottom: 1rem;
    border: none;
    border-radius: 0;
    color: #333;
}

.training26 .blockQuote .quote p:after {
    content: none;
}

.training26 .blockQuote .source {
    font-weight: 700;
    color: var(--training26-primary-text);
    margin-top: 1rem;
    font-size: 0.9rem;
}

.training26 .blockQuote .attribute {
    font-style: italic;
    color: #666;
    font-size: 0.9rem;
}


/* --- Panel block (light card) --- */

.training26 .blockPanel .card,
.training26 .blockPanel .card .card-body,
.training26 .blockPanel .card .card-header {
    color: #222 !important;
    border-color: #e0e0e0 !important;
    border-radius: 6px !important;
    font-size: 1.05rem !important;
    background-color: #fff;
}

.training26 .blockPanel .card {
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.training26 .blockPanel.support .card .card-header {
    background-color: #f5f0eb;
    font-weight: 700;
    color: #222 !important;
    border-bottom: 1px solid #e0e0e0;
}

.training26 .blockPanel.support .card .card-body {
    background-color: #fff;
    padding: 2rem;
}

.training26 .blockPanel.support .card,
.training26 .blockPanel.support .card .card-body,
.training26 .blockPanel.support .card .card-header {
    border-width: 1px;
    border-color: #e0e0e0 !important;
}

.training26 .blockPanel.support .card-body .blockPanel.default .card,
.training26 .blockPanel.support .card-body .blockPanel.default .card .card-body,
.training26 .blockPanel.support .card-body .blockPanel.default .card .card-header {
    color: #222 !important;
    border-color: #e0e0e0 !important;
    border-radius: 6px !important;
    border-width: 1px !important;
    font-size: 1.05rem !important;
    background-color: #fff;
}


/* --- Top header strip / body background (light) --- */

.training26 .header {
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
}


/* --- Secondary nav (top utility bar - light) --- */

.training26 .nav-second li a {
    color: #555 !important;
    text-decoration: none !important;
    transition: color 0.2s;
}

.training26 .nav-second li a:hover {
    color: var(--training26-primary-text) !important;
}

.training26 .nav-second .dropdown-menu {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.training26 .nav-second .dropdown-menu li a {
    color: #555 !important;
}

.training26 .nav-second .dropdown-menu li a:hover {
    color: #fff !important;
    text-decoration: none;
    background-color: var(--training26-primary) !important;
}


/* --- Main navigation bar (light) --- */

.training26 .main-navigation-bar {
    border: none;
    border-bottom: 1px solid #e0e0e0;
    background-color: #fff !important;
}

.training26 #mainNavigation ul.navbar-nav > li {
    background-color: transparent !important;
    border: none;
}

.training26 #mainNavigation ul.navbar-nav > li a {
    background-color: transparent !important;
    color: #1a1a1a !important;
    border: none;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 8px 16px;
    transition: color 0.2s;
}

.training26 #mainNavigation ul.navbar-nav > li a:hover,
.training26 #mainNavigation ul.navbar-nav > li.active a,
.training26 #mainNavigation ul.navbar-nav > li a.active {
    color: var(--training26-primary-text) !important;
    background-color: transparent !important;
}


/* --- Brand primary background / text overrides --- */

.training26 .bg-primary {
    background-color: var(--training26-primary) !important;
    color: #fff;
}

.training26 #mainNavigation ul.navbar-nav > li a.nav-link.bg-primary,
.training26 .bg-primary a,
.training26 a.nav-link.bg-primary,
.training26 .bg-primary span,
.training26 .bg-primary div {
    color: #fff !important;
}

.training26 #mainNavigation .primary-color,
.training26 .primary-color,
.training26 .text-primary {
    color: var(--training26-primary-text) !important;
}

.training26 #mainNavigation ul.navbar-nav > li.primary-bg,
.training26 #mainNavigation ul.navbar-nav > li a.primary-bg,
.training26 .primary-bg {
    background-color: var(--training26-primary) !important;
    color: #fff !important;
}

.training26 #mainNavigation ul.navbar-nav > li.primary-bg a,
.training26 #mainNavigation ul.navbar-nav > li a.primary-bg {
    color: #fff !important;
}


/* --- Page title block --- */

.training26 .blockPageTitle .display-4 {
    font-weight: 700;
    color: #222;
}


/* --- Page cards block (light) --- */

.training26 .blockPageCards .card {
    background-color: #fff;
    border: 1px solid #e0e0e0;
    border-radius: 8px;
    transition: box-shadow 0.3s, transform 0.3s;
}

.training26 .blockPageCards .card:hover {
    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.training26 .blockPageCards .card .card-body,
.training26 .blockPageCards .card .card-body p.card-text,
.training26 .blockPageCards .card .card-body h5.card-title {
    color: #222 !important;
    text-align: center;
    justify-content: center;
}

.training26 .blockPageCards .card .card-body h5.card-title a {
    color: var(--training26-primary-text) !important;
    text-decoration: none;
}

.training26 .blockPageCards .card .card-body h5.card-title a:hover {
    color: var(--training26-primary-hover) !important;
}


/* --- Megamenu (inside navbar - light dropdown) --- */

.training26 .navbar .megamenu {
    padding: 1.5rem;
    background-color: #fff;
    border: 1px solid #e0e0e0;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.training26 #mainNavigation ul.navbar-nav > li .card,
.training26 #mainNavigation ul.navbar-nav > li .card a {
    border: none;
    background-color: transparent !important;
    padding: 0;
    color: #1a1a1a !important;
}

.training26 #mainNavigation ul.navbar-nav > li .card a:hover {
    color: var(--training26-primary-text) !important;
}

@media all and (min-width: 768px) {
    .training26 .navbar .has-megamenu {
        position: static !important;
    }

    .training26 .navbar .megamenu {
        left: 0;
        right: 0;
        width: 100%;
        margin-top: 0;
    }
}

@media (max-width: 767px) {
    .training26 .navbar.fixed-top .navbar-collapse,
    .training26 .navbar.sticky-top .navbar-collapse {
        overflow-y: auto;
        max-height: 90vh;
        margin-top: 10px;
        background-color: #fff;
    }
}


/* --------------------------------------------------------------------------
   19. Training site header - two-row (utility bar + main nav)
       Matches the Training26 header mockup.
   -------------------------------------------------------------------------- */

.training26-header {
    background-color: #fff;
    border-bottom: 1px solid #e0e0e0;
    z-index: 1030;
}

/* --- Row 1: utility bar (sister sites · support/contact · language) --- */

.training26-utility-bar {
    background-color: #fff;
    border-bottom: 1px solid #eee;
    font-size: 0.85rem;
    padding: 0.6rem 0;
}

.training26-utility-sites,
.training26-utility-meta {
    gap: 0.25rem;
}

.training26-utility-sites a,
.training26-utility-meta a {
    color: #555 !important;
    text-decoration: none !important;
    padding: 4px 10px;
    font-weight: 500;
    transition: color 0.2s;
}

.training26-utility-sites a:hover,
.training26-utility-meta a:hover {
    color: var(--training26-primary-text) !important;
}

.training26-utility-sites a.active {
    color: var(--training26-primary-text) !important;
    position: relative;
}

.training26-utility-sites a.active::after {
    content: '';
    position: absolute;
    left: 10px;
    right: 10px;
    bottom: -6px;
    height: 2px;
    background: var(--training26-primary);
    border-radius: 1px;
}

.training26-utility-sep {
    color: #ccc;
    font-size: 0.75rem;
    line-height: 1;
    padding: 0 2px;
    user-select: none;
}

/* Language / country dropdown (flag + name, Bootstrap 5 dropdown) */

.training26-lang-dropdown {
    margin-left: 0.5rem;
}

.training26-lang-btn {
    background: none;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #333;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
    transition: border-color 0.2s, color 0.2s;
}

.training26-lang-btn:hover,
.training26-lang-btn[aria-expanded="true"] {
    border-color: var(--training26-primary);
    color: var(--training26-primary-text);
}

.training26-lang-btn i {
    font-size: 0.75rem;
    color: #6d6d6d;
}

.training26-lang-btn:hover i,
.training26-lang-btn[aria-expanded="true"] i {
    color: var(--training26-primary-text);
}

.training26-lang-flag {
    display: inline-block;
    width: 18px;
    height: 11px;
    object-fit: cover;
    flex-shrink: 0;
}

.training26-lang-menu {
    /* Force light theme regardless of any inherited Bootstrap dark-mode vars */
    --bs-dropdown-bg: #fff;
    --bs-dropdown-color: #333;
    --bs-dropdown-link-color: #333;
    --bs-dropdown-link-hover-color: var(--training26-primary-text);
    --bs-dropdown-link-hover-bg: #f5f5f5;
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--training26-primary);
    --bs-dropdown-border-color: #e0e0e0;
    --bs-dropdown-divider-bg: #eee;

    min-width: 200px;
    padding: 0.35rem 0 !important;
    margin-top: 0.35rem !important;
    background-color: #fff !important;
    color: #333 !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 4px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
    font-size: 0.85rem !important;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}

.training26-lang-menu .dropdown-item {
    display: flex !important;
    align-items: center;
    gap: 10px;
    padding: 0.5rem 0.9rem !important;
    color: #333 !important;
    background-color: transparent !important;
    font-size: 0.85rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.4;
}

.training26-lang-menu .dropdown-item:hover,
.training26-lang-menu .dropdown-item:focus {
    background-color: #f5f5f5 !important;
    color: var(--training26-primary-text) !important;
}

.training26-lang-menu .dropdown-item:active,
.training26-lang-menu .dropdown-item.active {
    background-color: var(--training26-primary) !important;
    color: #fff !important;
}


/* --- Row 2: main nav (logo + nav + basket + sign in) --- */

.training26-main-nav {
    background-color: #fff;
}

/* Logo area - placeholder until brand asset wired in */

.training26-logo-placeholder {
    font-size: 1.5rem;
    font-weight: 500;
    color: #222;
    text-decoration: none !important;
    letter-spacing: -0.01em;
}

.training26-logo-placeholder:hover {
    color: var(--training26-primary-text);
}

/* Main nav links - based on .otb26-nav (uppercase, letter-spaced, pink hover/active) */

.training26-thdr-nav {
    gap: 0.25rem;
}

.training26-thdr-nav > li > a {
    display: inline-block;
    color: #1a1a1a !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 8px 16px;
    transition: color 0.2s;
}

.training26-thdr-nav > li > a:hover,
.training26-thdr-nav > li.active > a {
    color: var(--training26-primary-text) !important;
}

/* Basket link */

.training26-basket {
    color: #555 !important;
    text-decoration: none !important;
    font-size: 0.9rem;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    transition: color 0.2s;
}

.training26-basket i {
    font-size: 1.05rem;
}

.training26-basket:hover {
    color: var(--training26-primary-text) !important;
}

.training26-basket-count {
    color: #6d6d6d;
    font-weight: 500;
}

/* Pill-shaped Sign in button */

.training26-btn-pill {
    display: inline-block;
    background-color: var(--training26-primary);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 0.9rem;
    font-weight: 500;
    letter-spacing: 0.01em;
    padding: 9px 26px;
    border: none;
    border-radius: 999px;
    transition: background-color 0.2s;
    white-space: nowrap;
}

.training26-btn-pill:hover {
    background-color: var(--training26-primary-hover);
    color: #fff !important;
}

/* --- Basket icon (desktop) - minimal icon + circular count badge ---
   Matches the conventional pattern (Material / Tailwind / Shopify):
   ~20px icon, ~18px circular badge, 11.5px digit, badge sized via
   border-box so the white ring + padding don't inflate it. */
.training26-basket-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.5rem;
    height: 2.5rem;
    color: #1a1a1a;
    text-decoration: none !important;
}

.training26-basket-icon:hover {
    color: var(--training26-primary-text);
}

.training26-basket-icon i {
    font-size: 1.25rem;
}

.training26-basket-badge {
    position: absolute;
    top: 2px;
    right: 2px;
    box-sizing: border-box;
    min-width: 1.15rem;
    height: 1.15rem;
    padding: 0 4px;
    border-radius: 999px;
    border: 1.5px solid #fff;
    background-color: var(--training26-primary);
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    line-height: 1rem;
    text-align: center;
}


/* --- Responsive tweaks --- */

@media (max-width: 991.98px) {
    .training26-logo-placeholder {
        font-size: 1.25rem;
    }
}

@media (max-width: 767.98px) {
    .training26-utility-bar {
        display: none;
    }
}


/* --------------------------------------------------------------------------
   20. Homepage hero - left text column + right featured-course card
   -------------------------------------------------------------------------- */

/* Base typography - system sans, no web-font loads */
.training26 {
    font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
    color: #141416;
    -webkit-font-smoothing: antialiased;
}

.training26-hero {
    padding: 4rem 0 5rem;
    background: #fff;
    overflow: hidden;
}

.training26-hero-h1 {
    font-size: clamp(2.25rem, 4.8vw, 3.6rem);
    font-weight: 700;
    line-height: 1.1;
    letter-spacing: -0.02em;
    color: #141416;
    margin: 0 0 1.5rem;
}

.training26-hero-h1-italic {
    font-style: italic;
    font-weight: 600;
    color: var(--training26-primary-text);
    letter-spacing: -0.015em;
}

.training26-hero-lede {
    font-size: 1.02rem;
    line-height: 1.6;
    color: #52525B;
    max-width: 560px;
    margin: 0 0 1.75rem;
}

.training26-hero-lede strong {
    color: #141416;
    font-weight: 600;
}

.training26-hero-stat-accent {
    color: var(--training26-primary-text);
}

/* Hero CTAs */
.training26-hero-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.9rem;
    margin-bottom: 2rem;
}

.training26-btn-pill-lg {
    font-size: 0.95rem;
    font-weight: 600;
    padding: 14px 30px;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
}

.training26-btn-pill-lg i {
    font-size: 0.9em;
    transition: transform 0.2s;
}

.training26-btn-pill-lg:hover i {
    transform: translateX(3px);
}

.training26-btn-pill-outline {
    background-color: transparent;
    color: #141416 !important;
    border: 1px solid #141416;
    padding: 13px 29px; /* compensate for 1px border */
}

.training26-btn-pill-outline:hover {
    background-color: #141416;
    color: #fff !important;
    border-color: #141416;
}

/* Inline stats row (below CTAs, divider above) */
.training26-hero-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.85rem;
    padding-top: 1.5rem;
    border-top: 1px solid #e4e4e7;
    font-size: 0.85rem;
    color: #52525B;
    max-width: 560px;
}

.training26-hero-meta strong {
    color: #141416;
    font-weight: 700;
    font-size: 1rem;
}

.training26-hero-meta-sep {
    color: #c5c5cb;
    user-select: none;
}

@media (max-width: 991.98px) {
    .training26-hero {
        padding: 2.5rem 0 3rem;
    }
}


/* --------------------------------------------------------------------------
   21. Featured course card - right-hand side of the hero
   -------------------------------------------------------------------------- */

.training26-course-card {
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 16px 36px -18px rgba(20, 20, 22, 0.16);
    max-width: 400px;
    margin-left: auto;
}

/* Media area - dark plate behind the course image */
.training26-course-card-media {
    position: relative;
    aspect-ratio: 16 / 10;
    background: #2d3e48;
    overflow: hidden;
}

.training26-course-card-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.training26-course-card-tag {
    position: absolute;
    top: 12px;
    left: 12px;
    background: #fff;
    color: var(--training26-primary-text);
    padding: 4px 11px;
    border-radius: 999px;
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    box-shadow: 0 3px 10px rgba(20, 20, 22, 0.1);
}

/* Body section */
.training26-course-card-body {
    padding: 1.1rem 1.25rem 1.1rem;
}

.training26-course-card-meta {
    font-size: 0.66rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--training26-primary-text);
    margin-bottom: 0.45rem;
}

.training26-course-card-title {
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.25;
    color: #141416;
    margin: 0 0 0.5rem;
    letter-spacing: -0.01em;
}

.training26-course-card-desc {
    font-size: 0.85rem;
    line-height: 1.5;
    color: #52525B;
    margin: 0 0 0.85rem;
}

.training26-course-card-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    margin-bottom: 0;
}

.training26-course-chip {
    display: inline-block;
    background: #f0f0f3;
    color: #141416;
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 12px;
    border-radius: 999px;
}

.training26-course-card-rule {
    border: 0;
    border-top: 1px solid #e4e4e7;
    margin: 1rem 0;
}

.training26-course-card-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.training26-course-card-price {
    display: flex;
    flex-direction: column;
    line-height: 1.1;
}

.training26-course-card-price-value {
    font-size: 1.45rem;
    font-weight: 700;
    color: #141416;
    letter-spacing: -0.01em;
}

.training26-course-card-price-label {
    font-size: 0.72rem;
    color: #7a7a82;
    margin-top: 2px;
}

/* The Buy place pill is a touch smaller than the hero CTAs */
.training26-course-card-foot .training26-btn-pill-lg {
    font-size: 0.85rem;
    padding: 10px 20px;
}

@media (max-width: 991.98px) {
    .training26-course-card {
        margin-top: 1rem;
        margin-left: 0;
        margin-right: auto;
    }
}


/* --------------------------------------------------------------------------
   22. Section wrapper + listing course cards (e.g. "Fresh courses" grid)
   -------------------------------------------------------------------------- */

.training26-section {
    padding: 4rem 0;
    background: #fff;
}

.training26-section-muted {
    background: #f4f4f6;
}

.training26-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 2rem;
    margin-bottom: 2.25rem;
    flex-wrap: wrap;
}

.training26-section-title {
    font-size: clamp(1.75rem, 3.2vw, 2.5rem);
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.015em;
    color: #141416;
    margin: 0;
}

.training26-section-link {
    color: var(--training26-primary-text) !important;
    font-weight: 600;
    font-size: 0.95rem;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.2s;
    white-space: nowrap;
}

.training26-section-link i {
    font-size: 0.85em;
    transition: transform 0.2s;
}

.training26-section-link:hover {
    color: var(--training26-primary-hover) !important;
}

.training26-section-link:hover i {
    transform: translateX(3px);
}

/* Listing card - reuses .training26-course-card-* children but with its
   own wrapper sizing/hover behaviour (no 400px cap, full-column, clickable). */

.training26-course-listing-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #e4e4e7;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit !important;
    box-shadow: 0 6px 16px -10px rgba(20, 20, 22, 0.12);
    transition: box-shadow 0.3s, transform 0.3s;
    height: 100%;
}

.training26-course-listing-card:hover {
    box-shadow: 0 18px 40px -16px rgba(20, 20, 22, 0.18);
    transform: translateY(-2px);
    color: inherit !important;
}

.training26-course-listing-card .training26-course-card-media {
    aspect-ratio: 16 / 10;
    flex-shrink: 0;
}

.training26-course-listing-card .training26-course-card-body {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    padding: 1.25rem 1.5rem 1.4rem;
}

.training26-course-listing-card .training26-course-card-title {
    font-size: 1.2rem;
    margin-bottom: 0.5rem;
}

.training26-course-listing-card .training26-course-card-desc {
    flex: 1 1 auto;
    font-size: 0.9rem;
    margin-bottom: 1rem;
}

.training26-course-listing-card .training26-course-card-rule {
    margin: 0 0 1rem;
}

.training26-course-listing-card .training26-course-card-foot {
    margin-top: auto;
}

.training26-course-view {
    color: var(--training26-primary-text);
    font-weight: 600;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: color 0.2s;
    white-space: nowrap;
}

.training26-course-view i {
    font-size: 0.85em;
    transition: transform 0.2s;
}

.training26-course-listing-card:hover .training26-course-view {
    color: var(--training26-primary-hover);
}

.training26-course-listing-card:hover .training26-course-view i {
    transform: translateX(3px);
}

@media (max-width: 767.98px) {
    .training26-section {
        padding: 2.5rem 0;
    }
    .training26-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
        margin-bottom: 1.5rem;
    }
}


/* --------------------------------------------------------------------------
   23. Sector cards - "Built for every kind of library"
       Dark gradient tiles showing course-count badge + audience meta + title.
   -------------------------------------------------------------------------- */

.training26-sector-card {
    position: relative;
    display: block;
    border-radius: 20px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    padding: 1.4rem 1.5rem 1.75rem;
    color: #fff !important;
    text-decoration: none !important;
    box-shadow: 0 10px 30px -15px rgba(20, 20, 22, 0.3);
    transition: transform 0.3s, box-shadow 0.3s;
}

.training26-sector-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 20px 44px -16px rgba(20, 20, 22, 0.4);
    color: #fff !important;
}

/* Subtle top-right highlight sheen on every variant */
.training26-sector-card::after {
    content: "";
    position: absolute;
    inset: 0;
    background: radial-gradient(ellipse 60% 50% at 85% 15%, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.training26-sector-card-count {
    position: relative;
    z-index: 1;
    display: inline-block;
    background: rgba(255, 255, 255, 0.92);
    color: #141416;
    font-size: 0.82rem;
    font-weight: 600;
    padding: 4px 14px;
    border-radius: 999px;
    letter-spacing: 0.01em;
}

.training26-sector-card-body {
    position: absolute;
    left: 1.5rem;
    right: 1.5rem;
    bottom: 1.6rem;
    z-index: 1;
}

.training26-sector-card-meta {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.65);
    margin-bottom: 0.7rem;
}

.training26-sector-card-title {
    font-size: 1.5rem;
    font-weight: 700;
    line-height: 1.15;
    letter-spacing: -0.01em;
    margin: 0;
    color: #fff;
}

/* Gradient variants - cycled through by index */

.training26-sector-card--1 {
    /* Warm amber / brown */
    background:
        radial-gradient(ellipse at 85% 20%, #6b4423 0%, #2e1d10 55%, #1a0f06 100%);
}

.training26-sector-card--2 {
    /* Indigo / deep purple */
    background:
        radial-gradient(ellipse at 85% 20%, #463871 0%, #221c44 55%, #120d23 100%);
}

.training26-sector-card--3 {
    /* Forest green */
    background:
        radial-gradient(ellipse at 85% 20%, #1f5a44 0%, #0d3024 55%, #071a13 100%);
}

.training26-sector-card--4 {
    /* Wine / burgundy */
    background:
        radial-gradient(ellipse at 85% 20%, #6b2142 0%, #3a0f24 55%, #1f0614 100%);
}

@media (max-width: 575.98px) {
    .training26-sector-card {
        aspect-ratio: 5 / 4;
        padding: 1.25rem 1.25rem 1.4rem;
    }
    .training26-sector-card-body {
        left: 1.25rem;
        right: 1.25rem;
        bottom: 1.25rem;
    }
    .training26-sector-card-title {
        font-size: 1.3rem;
    }
}


/* --------------------------------------------------------------------------
   24. OTB-style training header - single-row (logo + nav + Contact us pill).
       Mirrors the OTB26 main-site header so the training section reads
       as part of the same family of sites.
   -------------------------------------------------------------------------- */

.training26-otb-header {
    background-color: #fff;
}

/* Optical centring: the old logo PNG carried a lot of built-in whitespace
   below the swoosh and needed a 14px push to sit centred. The 2026 png is
   tightly cropped (glyph centre = image centre), so flex-centring is
   already correct and no offset is needed. */
.training26-otb-header .training26-logo img {
    top: 0;
}

.training26-otb-nav {
    gap: 0.25rem;
}

.training26-otb-nav > li > a {
    display: inline-block;
    color: #1a1a1a !important;
    text-decoration: none !important;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    padding: 8px 16px;
    transition: color 0.2s;
}

.training26-otb-nav > li > a:hover,
.training26-otb-nav > li.active > a {
    color: var(--training26-primary-text) !important;
}

@media (min-width: 992px) and (max-width: 1199.98px) {
    .training26-otb-nav-about { display: none; }
}

/* Local training nav - same bar, sentence case instead of the uppercase
   brand treatment. */
.training26-localnav > li > a {
    text-transform: none;
    letter-spacing: 0;
    /* rem so it follows the reading-tools text sizes, but capped: an
       uncapped 20px root pushed the nav to 19px and wrapped every item
       into two lines at mid widths */
    font-size: min(0.95rem, 16.25px);
    font-weight: 600;
    padding: 8px 13px;
    white-space: nowrap;
}

.training26-localnav > li > a i {
    font-size: 0.7rem;
    margin-left: 0.25rem;
    color: #b8b8b8;
    transition: color 0.2s;
}

.training26-localnav > li > a:hover i,
.training26-localnav > li.active > a i {
    color: var(--training26-primary-text);
}

/* "Course login" text link beside the basket pill */
.training26-otb-loginlink {
    color: var(--training26-primary-text) !important;
    text-decoration: none !important;
    font-size: min(0.95rem, 16.25px); /* capped like the nav - see above */
    font-weight: 700;
    white-space: nowrap;
}

.training26-otb-loginlink:hover {
    color: var(--training26-primary-hover) !important;
    text-decoration: underline !important;
}

/* Nav links that leave this site (Library design on the brand site)
   carry a small external-link marker. */
.training26-otb-nav > li > a.training26-otb-nav-ext i {
    font-size: 0.6rem;
    color: #b8b8b8;
    margin-left: 0.3rem;
    vertical-align: 1px;
    transition: color 0.2s;
}

.training26-otb-nav > li > a.training26-otb-nav-ext:hover i,
.training26-otb-nav > li.active > a.training26-otb-nav-ext i {
    color: var(--training26-primary-text);
}

/* Overflow behaviour - between lg and xxl there isn't room for the full
   seven-item row + login + basket, so the quieter items
   (.training26-nav-secondary) collapse into the "More ▾" dropdown
   (.training26-nav-more). At xxl the secondary items show flat in the row AND
   More stays put, because Accessibility lives only inside it.
   This is what stops the row wrapping onto a second line. Below lg the
   whole nav is replaced by the mobile menu, which lists everything. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .training26-localnav > li.training26-nav-secondary {
        display: none;
    }
}

@media (min-width: 1400px) {
    /* "More" used to be hidden here, which also removed the ONLY desktop header
       link to /accessibility/ on screens >= 1400px (fixed 2026-08-18). It now
       stays in the row at every width; only its duplicate Library design entry
       is hidden, because that item is already flat in the row at this size. */
    .training26-localnav > li.training26-nav-more .training26-nav-more-secondary {
        display: none;
    }
}

/* Extra squeeze room. The header row is justify-content: space-between, so a
   wide nav does not overflow - it slides up against the logo until they touch,
   which is what "tight up to the logo" looks like. It bites hardest SIGNED IN,
   where the avatar + "My account" is roughly twice the width of "Log in", so
   it is easy to miss when browsing logged out.

   Extended to 1400 on 2026-08-18 (the 1200-1399 range was still on the roomy
   13px), and a lighter trim added for 1400-1599 because "More" now stays in
   the row at every width - that range carries one item more than it used to. */
@media (min-width: 992px) and (max-width: 1399.98px) {
    .training26-localnav > li > a {
        padding: 8px 9px;
    }
}

@media (min-width: 1400px) and (max-width: 1599.98px) {
    .training26-localnav > li > a {
        padding: 8px 10px;
    }
}

/* Signed in, the account control is 148px wide against "Log in"'s 43px, and at
   992-1199 that +105px is the whole problem: logo 205 + nav 550 + right 204 =
   959px inside a 960px container, so the nav ends up flush against the logo.
   Measured 2026-08-18. Below xl the avatar + caret carry the control on their
   own - the button already has aria-label="Account menu", and the country
   switcher next to it goes icon-only on the same principle. Frees 84px. */
@media (min-width: 992px) and (max-width: 1199.98px) {
    .training26-otb-account-btn > span:not(.training26-subnav-account-avatar) {
        display: none;
    }
}

/* A floor under the logo/nav/account gaps so they can never collide. Safe at
   992 now that the account label is dropped there (85px of slack, ~42px a
   side); without that it would have forced a horizontal overflow instead. */
@media (min-width: 992px) {
    .training26-otb-header .container > .d-flex {
        column-gap: clamp(1rem, 1.8vw, 2.5rem);
    }
}

/* Signed-in account button beside the basket - light-bar variant of the
   old dark utility pill; reuses .training26-subnav-account-avatar for the
   initials circle and .training26-account-menu for the dropdown panel. */
.training26-otb-account-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background-color: #fff;
    border: 1px solid #e3e3e3;
    border-radius: 999px;
    padding: 4px 14px 4px 4px;
    color: #1a1a1a;
    font-size: 0.9rem;
    font-weight: 600;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color 0.2s, border-color 0.2s;
}

.training26-otb-account-btn:hover,
.training26-otb-account-btn[aria-expanded="true"] {
    background-color: #f7f7f7;
    border-color: #cfcfcf;
}

.training26-otb-account-btn i {
    font-size: 0.65rem;
    opacity: 0.6;
    margin-left: 2px;
}


/* --------------------------------------------------------------------------
   25. Pink-outline pill button (used by hero secondary CTA).
   -------------------------------------------------------------------------- */

.training26-btn-pill-outline-primary {
    background-color: transparent;
    color: var(--training26-primary-text) !important;
    border: 1px solid var(--training26-primary);
    padding: 13px 29px; /* compensate for 1px border */
}

.training26-btn-pill-outline-primary:hover {
    background-color: var(--training26-primary);
    color: #fff !important;
    border-color: var(--training26-primary);
}


/* --------------------------------------------------------------------------
   26. Headline hero - full-bleed B/W image with offset white card overlay.
   -------------------------------------------------------------------------- */

.training26-hero-headline {
    position: relative;
    background-color: #d8d8d8;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    min-height: 720px;
    padding: 5rem 0;
    display: flex;
    align-items: center;
}

.training26-hero-headline > .container {
    width: 100%;
}

.training26-hero-headline-card {
    background: #fff;
    padding: 2.75rem 3rem 3rem;
    max-width: 560px;
    box-shadow: 0 24px 60px rgba(0, 0, 0, 0.18);
    border-radius: 4px;
}

.training26-hero-headline-eyebrow {
    color: var(--training26-primary-text);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    margin-bottom: 1.25rem;
}

.training26-hero-headline-h1 {
    font-size: 3.4rem;
    font-weight: 700;
    line-height: 1.1;
    color: #141416;
    margin: 0 0 1.5rem;
}

.training26-hero-headline-lede {
    font-size: 1.1rem;
    line-height: 1.75;
    color: #000;
    margin-bottom: 1.75rem;
}

.training26-hero-headline-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (max-width: 991.98px) {
    .training26-hero-headline {
        min-height: 520px;
    }
}

@media (max-width: 767.98px) {
    .training26-hero-headline {
        min-height: 460px;
        padding: 2.5rem 0;
    }
    .training26-hero-headline-card {
        padding: 1.75rem 1.75rem 2rem;
    }
    .training26-hero-headline-h1 {
        font-size: 2.4rem;
    }
}


/* --------------------------------------------------------------------------
   27. OTB-style header stack - sticky wrapper for the top OTB-style nav
       plus the dark training-section sub-bar beneath it.
   -------------------------------------------------------------------------- */

.training26-otb-headstack {
    background-color: #fff;
}


/* --------------------------------------------------------------------------
   28. Training sub-nav (dark) - utility strip ABOVE the OTB-style header
       and section nav BELOW it. Visible at >=lg only; on smaller screens
       the same links are folded into #trainingOtbMobileMenu.
   -------------------------------------------------------------------------- */

/* --- Utility strip (above main header) --- */

.training26-subnav-utility {
    background-color: #1a1a1a;
    color: #d6d6d6;
    font-size: 0.85rem;
    padding: 0.45rem 0;
}

.training26-subnav-utility > .container {
    gap: 0.4rem;
}

.training26-subnav-utility-link {
    color: #bdbdbd !important;
    text-decoration: none !important;
    padding: 6px 12px;
    transition: color 0.2s;
    white-space: nowrap;
}

.training26-subnav-utility-link:hover {
    /* light pink: the utility strip is near-black, dark pinks only reach ~3.4:1 */
    color: #ff8bbb !important;
}

/* Mobile utility bar - slim "Support / UK · Login" */
.training26-subnav-utility-mobile {
    color: #d6d6d6;
    font-size: 0.85rem;
    gap: 0.5rem;
}

.training26-subnav-utility-country {
    font-weight: 600;
    color: #fff;
    letter-spacing: 0.04em;
}

.training26-subnav-utility-sep {
    color: #5a5a5a;
}

@media (max-width: 991.98px) {
    .training26-subnav-utility {
        padding: 0.35rem 0;
        font-size: 0.8rem;
    }
    .training26-subnav-utility-link {
        padding: 4px 6px;
    }
}

/* Language dropdown - dark variant of .training26-lang-btn */

.training26-subnav-lang-dropdown {
    margin-left: 0.25rem;
}

.training26-subnav-lang-btn {
    background: transparent;
    border: 1px solid #3a3a3a;
    border-radius: 4px;
    padding: 4px 10px;
    font-size: 0.82rem;
    font-weight: 500;
    color: #e2e2e2;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    line-height: 1.2;
    transition: border-color 0.2s, color 0.2s;
}

.training26-subnav-lang-btn:hover,
.training26-subnav-lang-btn[aria-expanded="true"] {
    border-color: var(--training26-primary);
    color: #ff8bbb; /* light pink for the dark utility strip */
}

.training26-subnav-lang-btn i {
    font-size: 0.75rem;
    color: #6d6d6d;
}

.training26-subnav-lang-btn:hover i,
.training26-subnav-lang-btn[aria-expanded="true"] i {
    color: #ff8bbb;
}

/* Course login pill */

.training26-subnav-login {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: #3a3a3a;
    color: #fff !important;
    text-decoration: none !important;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 3px;
    transition: background-color 0.2s;
    margin-left: 0.25rem;
    white-space: nowrap;
}

.training26-subnav-login:hover {
    background-color: #555;
    color: #fff !important;
}

.training26-subnav-login i {
    font-size: 0.7rem;
}

/* Account button (replaces Login pill when authenticated) - sits in the
   dark utility-bar so the pill is white-on-dark with a pink avatar. */

.training26-subnav-account {
    margin-left: 0.5rem;
}
.training26-subnav-account-btn {
    display: inline-flex !important;
    align-items: center;
    gap: 8px;
    background-color: rgba(255, 255, 255, 0.08) !important;
    color: #fff !important;
    border: 1px solid rgba(255, 255, 255, 0.18) !important;
    padding: 4px 14px 4px 4px !important;
    border-radius: 999px !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0.06em !important;
    text-transform: uppercase !important;
    cursor: pointer;
    white-space: nowrap;
    transition: background-color 0.15s ease, border-color 0.15s ease;
    line-height: 1;
}
.training26-subnav-account-btn:hover,
.training26-subnav-account-btn[aria-expanded="true"] {
    background-color: rgba(255, 255, 255, 0.16) !important;
    border-color: rgba(255, 255, 255, 0.32) !important;
}
.training26-subnav-account-avatar {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 999px;
    background: var(--training26-primary) !important;
    color: #fff !important;
    font-size: 0.72rem !important;
    font-weight: 700 !important;
    letter-spacing: 0 !important;
    flex-shrink: 0;
}
.training26-subnav-account-label {
    line-height: 1;
}
.training26-subnav-account-btn i {
    font-size: 0.65rem;
    opacity: 0.7;
    margin-left: 2px;
}

/* Dropdown menu - force light theme regardless of inherited Bootstrap dark
   vars, mirrors the pattern used for .training26-lang-menu. */
.training26-account-menu {
    --bs-dropdown-bg: #fff;
    --bs-dropdown-color: #111827;
    --bs-dropdown-link-color: #111827;
    --bs-dropdown-link-hover-color: var(--training26-primary-text);
    --bs-dropdown-link-hover-bg: #f9eef3;
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--training26-primary);
    --bs-dropdown-border-color: #e5e7eb;
    --bs-dropdown-divider-bg: #eef0f3;

    min-width: 280px !important;
    margin-top: 0.5rem !important;
    padding: 0 !important;
    background-color: #fff !important;
    color: #111827 !important;
    border: 1px solid #e5e7eb !important;
    border-radius: 12px !important;
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.14) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    overflow: hidden;
}
.training26-account-menu-head {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 16px;
    background: #f7f7f9;
    border-bottom: 1px solid #eef0f3;
}
.training26-account-menu-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: 999px;
    background: var(--training26-primary);
    color: #fff;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.02em;
    flex-shrink: 0;
}
.training26-account-menu-meta {
    display: flex;
    flex-direction: column;
    min-width: 0;
    line-height: 1.3;
}
.training26-account-menu-meta strong {
    color: #111827 !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.training26-account-menu-meta span {
    color: #5d6570 !important;
    font-size: 0.8125rem !important;
    font-weight: 400 !important;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: none !important;
    letter-spacing: normal !important;
}
.training26-account-menu .dropdown-divider {
    margin: 0 !important;
    border-top: 1px solid #eef0f3 !important;
}
.training26-account-menu .dropdown-item {
    display: flex !important;
    align-items: center;
    gap: 12px;
    padding: 12px 16px !important;
    color: #1f2937 !important;
    background-color: transparent !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    text-transform: none !important;
    letter-spacing: normal !important;
    line-height: 1.3;
}
.training26-account-menu .dropdown-item i {
    width: 18px;
    color: #9ca3af;
    font-size: 0.95rem;
    text-align: center;
}
.training26-account-menu .dropdown-item:hover,
.training26-account-menu .dropdown-item:focus {
    background-color: #f9eef3 !important;
    color: var(--training26-primary-text) !important;
}
.training26-account-menu .dropdown-item:hover i,
.training26-account-menu .dropdown-item:focus i {
    color: var(--training26-primary-text);
}
.training26-account-menu .dropdown-item:active,
.training26-account-menu .dropdown-item.active {
    background-color: var(--training26-primary) !important;
    color: #fff !important;
}
.training26-account-menu .dropdown-item:active i,
.training26-account-menu .dropdown-item.active i {
    color: #fff;
}

/* Basket - pink pill with cart icon */

.training26-subnav-basket {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--training26-primary);
    color: #fff !important;
    text-decoration: none !important;
    font-size: 0.78rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 6px 14px;
    border-radius: 3px;
    transition: background-color 0.2s;
    margin-left: 0.4rem;
    white-space: nowrap;
}

.training26-subnav-basket:hover {
    background-color: var(--training26-primary-hover);
    color: #fff !important;
}

.training26-subnav-basket-count {
    font-weight: 700;
}

/* --- Section nav (below main header) - strengthened, title-case, with TRAINING / anchor --- */

.training26-subnav-mainwrap {
    background-color: #e6e6e6;
    border-bottom: 1px solid #d0d0d0;
    /* No overflow-x clipping here - it would hide the courses dropdown panel.
       The bar fits all items at >=lg viewports anyway, and the whole nav is
       hidden on smaller screens via d-none d-lg-block. */
}

.training26-subnav-main {
    margin: 0;
    gap: 2rem;
    align-items: stretch;
}

.training26-subnav-main > li {
    display: flex;
    align-items: stretch;
}

/* Pin the last item (FAQs) to the far right */
.training26-subnav-main > li.training26-subnav-main-end {
    margin-left: auto;
}

/* "Training /" left-anchor label - same family as nav links but muted */
.training26-subnav-anchor {
    color: #6d6d6d;
    font-size: 0.95rem;
    font-weight: 500;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    padding: 14px 0;
    display: inline-flex;
    align-items: center;
    user-select: none;
}

.training26-subnav-anchor-sep {
    color: #b0b0b0;
    margin-left: 0.4rem;
    font-weight: 400;
}

/* The "Training /" anchor is now a real link back to the training landing.
   Inherit the muted look from .training26-subnav-anchor; brighten on hover. */
.training26-subnav-anchor-link {
    color: inherit !important;
    text-decoration: none !important;
    display: inline-flex;
    align-items: center;
    transition: color 0.15s;
}

.training26-subnav-anchor-link:hover,
.training26-subnav-anchor-link:focus {
    color: var(--training26-primary-text) !important;
}

.training26-subnav-anchor-link:hover .training26-subnav-anchor-sep {
    color: var(--training26-primary-text);
}

.training26-subnav-main-link {
    display: inline-flex;
    align-items: center;
    color: #444 !important;
    text-decoration: none !important;
    font-size: 0.95rem;
    font-weight: 500;
    padding: 14px 2px;
    background: none;
    border: none;
    border-radius: 0;
    transition: color 0.2s, background-color 0.2s;
    white-space: nowrap;
}

.training26-subnav-main > li > .training26-subnav-main-link:hover {
    color: #1a1a1a !important;
}

/* Active treatment: solid muted-pink block, white text, darker strip beneath */
.training26-subnav-main > li.active > .training26-subnav-main-link,
.training26-subnav-main > li.is-current > .training26-subnav-main-link {
    background-color: var(--training26-primary);
    color: #ffffff !important;
    font-weight: 500;
    padding: 14px 1.5rem;
    box-shadow: inset 0 -4px 0 var(--training26-primary-hover);
}

.training26-subnav-main > li.active > .training26-subnav-main-link:hover,
.training26-subnav-main > li.is-current > .training26-subnav-main-link:hover {
    color: #ffffff !important;
    background-color: var(--training26-primary-hover);
}

.training26-subnav-main > li > .training26-subnav-main-link i {
    font-size: 0.7rem;
    margin-left: 0.25rem;
    transition: transform 0.2s;
}

.training26-subnav-main > li.dropdown.show > .training26-subnav-main-link i {
    transform: rotate(180deg);
}

/* Courses dropdown - light theme to match the new light section nav */

.training26-subnav-courses-menu {
    --bs-dropdown-bg: #fff;
    --bs-dropdown-color: #444;
    --bs-dropdown-link-color: #444;
    --bs-dropdown-link-hover-color: var(--training26-primary-text);
    --bs-dropdown-link-hover-bg: #f5f5f5;
    --bs-dropdown-link-active-color: #fff;
    --bs-dropdown-link-active-bg: var(--training26-primary);
    --bs-dropdown-border-color: #d0d0d0;

    min-width: 240px;
    margin-top: 0 !important;
    background-color: #fff !important;
    color: #444 !important;
    border: 1px solid #d0d0d0 !important;
    border-top: none !important;
    border-radius: 0 0 4px 4px !important;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.08) !important;
    padding: 0.35rem 0 !important;
    font-size: 0.85rem !important;
    font-weight: 500;
    text-transform: none;
    letter-spacing: normal;
}

.training26-subnav-courses-menu .dropdown-item {
    padding: 0.55rem 1.1rem !important;
    color: #444 !important;
    background-color: transparent !important;
    transition: background-color 0.15s, color 0.15s;
}

.training26-subnav-courses-menu .dropdown-item:hover,
.training26-subnav-courses-menu .dropdown-item:focus {
    background-color: #f5f5f5 !important;
    color: var(--training26-primary-text) !important;
}

.training26-subnav-courses-menu .dropdown-item.training26-subnav-courses-menu-all {
    color: var(--training26-primary-text) !important;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-size: 0.78rem !important;
    padding-top: 0.65rem !important;
    padding-bottom: 0.55rem !important;
}

.training26-subnav-courses-menu .dropdown-divider {
    margin: 0.25rem 0 !important;
    border-top-color: #e6e6e6 !important;
}


/* --------------------------------------------------------------------------
   29. Mobile menu additions - divider + indented course-sector sub-list.
   -------------------------------------------------------------------------- */

/* Mobile overlay - compact layout */

.training26-mobile-nav {
    width: 100%;
    max-width: 360px;
    padding: 0 1rem;
}

/* Sector list - primary, generous spacing */
/* Legacy `.training26-mobile-sectors / -sections / -actions / -utility / -allcourses`
   rules removed - the mobile menu is now a drilldown panel layout (see
   .training26-mobile-menu / -panel / -panelhead / -list / -listitem / -cta). */


/* --------------------------------------------------------------------------
   30. Legacy training block overrides
       The training-section page blocks (blockProductInfo, blockPageSectionDivider,
       etc.) are shared with the older training site, where the page background
       was dark - so they liberally use Bootstrap's .text-white, .btn-outline-light,
       and a custom .text-pink class. The new skin renders them inside a white
       .training26-content wrapper, which makes the original utilities invisible.
       The rules below scope the colour fix-ups to .training26-content so they
       only apply to the redesigned chain and don't leak into the older site.
   -------------------------------------------------------------------------- */

/* --- Section divider (Training default style) --- */

.training26-content .blockPageSectionDivider.training,
.training26-content .blockPageSectionDivider.training h1,
.training26-content .blockPageSectionDivider.training h2,
.training26-content .blockPageSectionDivider.training h3,
.training26-content .blockPageSectionDivider.training h4,
.training26-content .blockPageSectionDivider.training p,
.training26-content .blockPageSectionDivider.training a {
    color: #ffffff !important;
}

.training26-content .blockPageSectionDivider.training {
    padding: 1.25rem 1rem 1.5rem;
}


/* --- Product info block (course tiles inside .blockProductInfo) --- */

.training26-content .blockProductInfo {
    color: #1f1f23;
}

/* Course title - pink */
.training26-content .blockProductInfo a.text-pink,
.training26-content .blockProductInfo .text-pink {
    color: var(--training26-primary-text) !important;
    text-decoration: none;
}

.training26-content .blockProductInfo a.text-pink:hover {
    color: var(--training26-primary-hover) !important;
}

/* Description body + course-properties list - were .text-white. Make them
   dark grey so they're legible on the white content wrapper. */
.training26-content .blockProductInfo .text-white {
    color: #2a2a2a !important;
}

.training26-content .blockProductInfo .course-properties {
    color: #555 !important;
    list-style: none;
    padding-left: 0;
}

.training26-content .blockProductInfo .course-properties .fa,
.training26-content .blockProductInfo .course-properties .fa-solid {
    color: var(--training26-primary-text);
    margin-right: 0.5rem;
}

/* Outline-light buttons - flip to pink-outline so they read on white. */
.training26-content .blockProductInfo .btn.btn-outline-light {
    color: var(--training26-primary-text) !important;
    border-color: var(--training26-primary) !important;
    background-color: transparent !important;
    transition: background-color 0.15s, color 0.15s;
}

.training26-content .blockProductInfo .btn.btn-outline-light:hover,
.training26-content .blockProductInfo .btn.btn-outline-light:focus {
    color: #ffffff !important;
    background-color: var(--training26-primary) !important;
    border-color: var(--training26-primary) !important;
}

/* Restore product card breathing room and add a subtle separator. */
.training26-content .blockProductInfo .product {
    padding: 1.5rem 0;
    border-bottom: 1px solid #ececec;
}

.training26-content .blockProductInfo .product:last-child {
    border-bottom: none;
}


/* --- Generic fallbacks for legacy blocks that lean on dark-page utilities --- */

/* Any other block markup that uses .text-pink should still render brand pink. */
.training26-content .text-pink {
    color: var(--training26-primary-text) !important;
}

/* The custom .fs-8 used in legacy markup isn't a Bootstrap utility - give it
   a sensible fallback so pages don't fall back to default 16px. */
.training26-content .fs-8 {
    font-size: 0.9rem;
}


/* --------------------------------------------------------------------------
   30b. Redesigned blocks (Views/Partials/Blocks26/)
        These rules style the namespaced training26-* markup emitted by the
        partials in /Views/Partials/Blocks26/. No !important hacks needed -
        the markup is owned by the new skin so we can style cleanly.
   -------------------------------------------------------------------------- */


/* --- Page section divider (Blocks26/blockPageSectionDivider.cshtml) ------
   Two visual styles: "Training default" (magenta band with arrow) and
   default (light grey card with brand-pink title). */

.training26-divider {
    margin: 2rem 0;
}

.training26-divider .training26-divider-inner {
    text-align: center;
}

.training26-divider .training26-divider-title {
    margin: 0;
    font-weight: 600;
    line-height: 1.25;
}

.training26-divider .training26-divider-subtitle {
    margin: 0.4rem 0 0;
    font-size: 0.95rem;
    line-height: 1.5;
}

/* "Training default" - solid magenta band.
   The .training26 body wrapper has a global `.training26 h3 { color: #222 !important }`
   rule (line ~1198) which overrides h-tag colour - defeat it with !important here. */
.training26-divider-training {
    background-color: #791b4e;
    color: #fff;
    position: relative;
    padding: 1.5rem 1rem 1.75rem;
    margin: 2.5rem 0 3rem;
}

.training26-divider-training .training26-divider-title,
.training26-divider-training h3.training26-divider-title,
.training26-divider-training h2.training26-divider-title {
    font-size: 1.4rem;
    color: #ffffff !important;
}

.training26-divider-training .training26-divider-subtitle {
    color: rgba(255, 255, 255, 0.92) !important;
}

.training26-divider-training::after {
    content: "";
    position: absolute;
    bottom: -22px;
    left: 50%;
    transform: translateX(-50%);
    width: 0;
    height: 0;
    border-left: 22px solid transparent;
    border-right: 22px solid transparent;
    border-top: 22px solid #791b4e;
}

/* Default - light grey card with brand-pink title */
.training26-divider-default {
    background-color: #f6f6f6;
    padding: 1.75rem 1.5rem;
    border-radius: 4px;
}

.training26-divider-default .training26-divider-title {
    color: var(--training26-primary-text);
    font-size: 1.6rem;
    font-weight: 300;
}

.training26-divider-default .training26-divider-subtitle {
    color: #555;
}


/* --- Store product info (Blocks26/storeProductInfo.cshtml) ---------------
   Course tile list. Thumbnail + title + summary + actions + meta column. */

.training26-product-list {
    margin: 1rem 0 2rem;
}

.training26-product {
    padding: 1.5rem 0;
    border-bottom: 1px solid #ececec;
}

.training26-product:last-child {
    border-bottom: none;
}

.training26-product-image img {
    border-radius: 4px;
    width: 100%;
    height: auto;
}

.training26-product-title {
    font-size: 1.25rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
    line-height: 1.25;
}

.training26-product-title a {
    color: var(--training26-primary-text);
    text-decoration: none;
}

.training26-product-title a:hover {
    color: var(--training26-primary-hover);
}

.training26-product-summary {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.55;
    margin: 0 0 1rem;
}

.training26-product-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin-top: 1rem;
}

.training26-product-meta {
    list-style: none;
    padding: 0;
    margin: 0;
    color: #555;
    font-size: 0.9rem;
}

.training26-product-meta li {
    padding: 0.45rem 0;
    display: flex;
    align-items: center;
    gap: 0.6rem;
}

.training26-product-meta li .fa-solid {
    color: var(--training26-primary-text);
    width: 1.25em;
    text-align: center;
}


/* --- Buttons used by Blocks26 partials -----------------------------------
   Reusable pill-button pair: primary (filled pink) and outline (pink border,
   transparent fill). Designed for any Blocks26 partial that needs a CTA. */

.training26-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.7rem 1.9rem;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    /* Defeat the legacy uppercase/letter-spaced button rules earlier in
       this file - the 2026 brand style is bold sentence case. */
    text-transform: none;
    letter-spacing: normal;
    border-radius: 999px;
    border: 2px solid transparent;
    text-decoration: none;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    cursor: pointer;
}

.training26-btn-primary {
    background-color: var(--training26-primary);
    color: #fff;
    border-color: var(--training26-primary);
}

.training26-btn-primary:hover,
.training26-btn-primary:focus {
    background-color: var(--training26-primary-hover);
    border-color: var(--training26-primary-hover);
    color: #fff;
}

.training26-btn-outline {
    background-color: transparent;
    color: var(--training26-primary-text);
    border-color: var(--training26-primary);
}

.training26-btn-outline:hover,
.training26-btn-outline:focus {
    background-color: var(--training26-primary);
    /* !important: the base .training26-btn-outline colour is !important, so a
       plain #fff here loses and the filled state shows pink-on-pink */
    color: #fff !important;
    border-color: var(--training26-primary);
}


/* --- Hero (Blocks26/blockHero/*.cshtml) ----------------------------------
   Three variants:
     - .training26-hero-light       - clean light section (no bg image)
     - .training26-hero-image       - title/desc on top of a darkened bg image
     - .training26-hero-overlay     - centered overlay panel (training1)
     - .training26-hero-band        - solid magenta call-out band (training2)
*/

.training26-hero {
    margin-bottom: 2rem;
}

.training26-hero .training26-hero-title {
    font-weight: 700;
    line-height: 1.1;
    margin: 0 0 1rem;
}

.training26-hero .training26-hero-subtitle {
    font-weight: 600;
    line-height: 1.3;
    margin: 0 0 1rem;
    font-size: 1.25rem;
}

.training26-hero .training26-hero-description {
    line-height: 1.6;
    margin: 0 0 1.25rem;
}

.training26-hero .training26-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

/* Light variant - sits on the white content background */
.training26-hero-light {
    padding: 3rem 0;
}

.training26-hero-light .training26-hero-title {
    color: #1f1f23;
    font-size: clamp(2rem, 3vw, 3rem);
}

.training26-hero-light .training26-hero-description {
    color: #555;
}

/* Image variant - full-bleed bg image, white type with a dark gradient */
.training26-hero-image {
    background-position: center;
    background-size: cover;
    color: #fff;
    padding: 5rem 0;
    position: relative;
}

.training26-hero-image::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to right, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.25) 70%, rgba(0, 0, 0, 0) 100%);
}

.training26-hero-image > .container {
    position: relative;
    z-index: 1;
}

.training26-hero-image .training26-hero-title {
    color: #fff;
    font-size: clamp(2.2rem, 3.5vw, 3.5rem);
}

.training26-hero-image .training26-hero-description {
    color: rgba(255, 255, 255, 0.9);
}

/* Overlay variant (training1) - centered translucent panel on a bg image */
.training26-hero-overlay {
    background-position: center;
    background-size: cover;
    padding: 4rem 0;
}

.training26-hero-overlay-wrap {
    display: flex;
    justify-content: center;
}

.training26-hero-overlay-panel {
    background-color: rgba(0, 0, 0, 0.65);
    color: #fff;
    text-align: center;
    padding: 2.5rem 2rem;
    max-width: 900px;
    width: 100%;
    border-radius: 4px;
}

.training26-hero-overlay-panel .training26-hero-title {
    color: #fff;
    font-size: clamp(2.2rem, 4vw, 3.25rem);
    font-weight: 800;
}

.training26-hero-overlay-panel .training26-hero-subtitle {
    color: rgba(255, 255, 255, 0.95);
}

.training26-hero-overlay-panel .training26-hero-description {
    color: rgba(255, 255, 255, 0.85);
    max-width: 720px;
    margin-left: auto;
    margin-right: auto;
}

/* Band variant (training2) - solid magenta call-out section */
.training26-hero-band {
    background-color: #791b4e;
    color: #fff;
    padding: 3rem 0;
    text-align: center;
}

.training26-hero-band .training26-hero-band-mark {
    max-width: 110px;
    height: auto;
    margin-bottom: 1.25rem;
    border-radius: 4px;
}

.training26-hero-band .training26-hero-title {
    color: #fff;
    font-size: clamp(1.8rem, 2.8vw, 2.5rem);
}

.training26-hero-band .training26-hero-subtitle,
.training26-hero-band .training26-hero-description {
    color: rgba(255, 255, 255, 0.92);
    max-width: 900px;
    margin-left: auto;
    margin-right: auto;
}


/* --------------------------------------------------------------------------
   31. Per-block styling for the new light skin
       Every shared training block partial in /Views/Partials/Training/blocks/
       gets a dedicated style group below. Rules are scoped to
       .training26-content so they only affect the redesigned BS5 chain - the
       legacy training site is unaffected. The defaults aim for clean light-
       background readability; tweak each block group as visual review demands.
   -------------------------------------------------------------------------- */


/* --- blockHero (default.cshtml) ------------------------------------------
   Two-column hero. Default partial uses .text-white on the H1 and inline
   white on the H2 - that needs a dark background to read. If a background
   image is set, keep the white type; if NOT, flip to dark on .bg-light. */

.training26-content .blockHero.otb-hero {
    background-color: #f6f6f6;
    margin-bottom: 2rem;
}

.training26-content .blockHero.otb-hero[style*="background-image"] {
    background-position: center;
    background-size: cover;
}

/* No-bg-image fallback (rare): make white type readable */
.training26-content .blockHero.otb-hero:not([style*="background-image"]) h1.text-white {
    color: #1f1f23 !important;
}
.training26-content .blockHero.otb-hero:not([style*="background-image"]) h2[style*="white"] {
    color: #555 !important;
}

.training26-content .blockHero.otb-hero .btn {
    background-color: var(--training26-primary);
    color: #fff !important;
    border-color: var(--training26-primary);
    border-radius: 999px;
    padding: 0.6rem 1.4rem;
    font-weight: 600;
    margin-top: 1rem;
}

.training26-content .blockHero.otb-hero .btn:hover {
    background-color: var(--training26-primary-hover);
    border-color: var(--training26-primary-hover);
}


/* --- blockHero (training1.cshtml) ----------------------------------------
   Centered hero with a translucent black overlay panel:
     <div class="col-12 p-5 text-center" style="background-color: rgba(0,0,0,0.65)">
   The partial sets NO colour on the heading/description - on the legacy dark
   site the body colour was white. On the new light skin we need to force
   white inside the overlay panel so the title is readable. */

.training26-content .blockHero.otb-hero .flex-container > .col-12.text-center,
.training26-content .blockHero.otb-hero .flex-container > .col-12.text-center h1,
.training26-content .blockHero.otb-hero .flex-container > .col-12.text-center h2,
.training26-content .blockHero.otb-hero .flex-container > .col-12.text-center h3,
.training26-content .blockHero.otb-hero .flex-container > .col-12.text-center p {
    color: #ffffff !important;
}

.training26-content .blockHero.otb-hero .flex-container > .col-12.text-center {
    border-radius: 4px;
}


/* --- blockHero (training2.cshtml) ----------------------------------------
   Dark hero with logo image + title + sub-title. Wrapper has .bg-dark - the
   partial relies on the parent dark background but doesn't actually set
   white type, so force white inside. */

.training26-content .blockHero.otb-hero.training2,
.training26-content .blockHero.otb-hero.training2 h1,
.training26-content .blockHero.otb-hero.training2 h3,
.training26-content .blockHero.otb-hero.training2 p {
    color: #ffffff !important;
}

.training26-content .blockHero.otb-hero.training2.bg-dark {
    border-radius: 4px;
    overflow: hidden;
    margin-bottom: 2rem;
}


/* --- blockButton ---------------------------------------------------------
   Single CTA button. The Bootstrap primary/outline-primary palette doesn't
   match the brand pink, so map it to the training26 colours. */

.training26-content .blockButton {
    margin: 1rem 0;
}

.training26-content .blockButton .btn-primary {
    background-color: var(--training26-primary);
    border-color: var(--training26-primary);
    color: #fff;
    border-radius: 999px;
    padding: 0.55rem 1.4rem;
    font-weight: 600;
}

.training26-content .blockButton .btn-primary:hover {
    background-color: var(--training26-primary-hover);
    border-color: var(--training26-primary-hover);
    color: #fff;
}

.training26-content .blockButton .btn-outline-primary {
    color: var(--training26-primary-text);
    border-color: var(--training26-primary);
    background-color: transparent;
    border-radius: 999px;
    padding: 0.55rem 1.4rem;
    font-weight: 600;
}

.training26-content .blockButton .btn-outline-primary:hover {
    color: #fff;
    background-color: var(--training26-primary);
    border-color: var(--training26-primary);
}


/* --- blockCard / blockCardsRow -------------------------------------------
   Card with image + title + description. blockCardsRow renders a row of
   .blockCard cards inside a Bootstrap .card-group. Soften the borders and
   make the card title readable on light. */

.training26-content .blockCard {
    background-color: #fff;
    border: 1px solid #e6e6e6;
    transition: box-shadow 0.25s, transform 0.25s;
}

.training26-content .blockCard:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.training26-content .blockCard .card-title {
    font-weight: 700;
    color: #1f1f23;
    margin-bottom: 0.5rem;
}

.training26-content .blockCard .card-title a {
    color: #1f1f23;
    text-decoration: none;
}

.training26-content .blockCard .card-title a:hover {
    color: var(--training26-primary-text);
}

.training26-content .blockCard .card-text {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.55;
}

.training26-content .card-group {
    margin-bottom: 2rem;
}


/* --- blockCaseStudyHero --------------------------------------------------
   Already self-styled inline - image background with translucent panel.
   Just ensure the wrapper has consistent vertical rhythm. */

.training26-content .training26-cs-hero {
    margin-bottom: 2rem;
}


/* --- blockCaseStudyGallery -----------------------------------------------
   Grid of project images with a "wide" hero tile. Provide the grid template
   that the partial expects (`.training26-cs-gallery-grid` /
   `.training26-cs-gallery-item` / `.training26-cs-gallery-wide`). */

.training26-content .training26-cs-gallery {
    margin: 2rem 0;
}

.training26-content .training26-cs-gallery h2 {
    color: #1f1f23;
    font-weight: 700;
}

.training26-content .training26-cs-gallery-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
}

@media (max-width: 767px) {
    .training26-content .training26-cs-gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.training26-content .training26-cs-gallery-item {
    aspect-ratio: 4 / 3;
    display: block;
    overflow: hidden;
}

.training26-content .training26-cs-gallery-item img {
    transition: transform 0.3s;
}

.training26-content .training26-cs-gallery-item:hover img {
    transform: scale(1.05);
}

.training26-content .training26-cs-gallery-wide {
    grid-column: span 2;
    aspect-ratio: 16 / 9;
}


/* --- blockCode -----------------------------------------------------------
   Raw HTML embed. The partial wraps in .tc-code-block .blockCode - no styling
   should be forced beyond a bit of vertical breathing room because authors
   may inject their own markup with their own styles. */

.training26-content .blockCode {
    margin: 1rem 0;
}


/* --- blockForm -----------------------------------------------------------
   Forms come from /Views/Partials/forms/. Just provide consistent spacing
   and align Bootstrap form controls to the brand. */

.training26-content .blockForm {
    margin: 1.5rem 0;
}

.training26-content .blockForm .form-control:focus,
.training26-content .blockForm .form-select:focus {
    border-color: var(--training26-primary);
    box-shadow: 0 0 0 0.2rem rgba(236, 38, 105, 0.15);
}

.training26-content .blockForm .btn-primary {
    background-color: var(--training26-primary);
    border-color: var(--training26-primary);
}

.training26-content .blockForm .btn-primary:hover {
    background-color: var(--training26-primary-hover);
    border-color: var(--training26-primary-hover);
}


/* --- blockGridGallery ----------------------------------------------------
   Bootstrap row + col grid of glightbox-linked images. The block ships its
   own inline magnify overlay; we just scope the hover treatment. */

.training26-content .blockGridGallery {
    margin: 1.5rem 0;
}

.training26-content .blockGridGallery .img-square-wrapper {
    overflow: hidden;
}

.training26-content .blockGridGallery .img-square-wrapper img {
    width: 100%;
    height: auto;
    transition: transform 0.3s;
}

.training26-content .blockGridGallery .img-square-wrapper:hover img {
    transform: scale(1.04);
}


/* --- blockIconWithRichText -----------------------------------------------
   Big icon left, rich text right. Original partial sets icon to .text-white;
   we flip that to brand pink for the light skin. */

.training26-content .blockIconWithRichText {
    margin: 1.5rem 0;
}

.training26-content .blockIconWithRichText .fa-solid.text-white {
    color: var(--training26-primary-text) !important;
}


/* --- blockImage ----------------------------------------------------------
   Inline image. Optionally wrapped in .glightbox with a magnify overlay.
   Ensure margin and rounded corners for consistency. */

.training26-content .blockImage {
    margin: 1.5rem 0;
}

.training26-content .blockImage img {
    border-radius: 4px;
}


/* --- BlockImageSlider ----------------------------------------------------
   Splide carousel of images. Splide handles its own DOM; we only need slide
   image breathing and arrow visibility on light. */

.training26-content .blockImageSlider {
    margin: 1.5rem 0;
}

.training26-content .blockImageSlider .splide__arrow {
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    opacity: 0.85;
}

.training26-content .blockImageSlider .splide__arrow:hover {
    background: var(--training26-primary);
    opacity: 1;
}

.training26-content .blockImageSlider .splide__pagination__page.is-active {
    background: var(--training26-primary);
}


/* --- blockList / blockListItem -------------------------------------------
   FontAwesome icon list. Keep tight spacing and brand-coloured icons. */

.training26-content .blockList {
    margin: 1rem 0 1.5rem;
}

.training26-content .blockList .blockListItem {
    padding: 0.35rem 0;
    color: #2a2a2a;
}

.training26-content .blockList .fa-li {
    color: var(--training26-primary-text);
}


/* --- blockPageCards ------------------------------------------------------
   Auto-generated cards listing child pages. The partial uses .text-light on
   the title link (legacy dark-bg) - flip to dark for the light skin. */

.training26-content .blockPageCards {
    margin: 1.5rem 0;
}

.training26-content .blockPageCards .card {
    border: 1px solid #e6e6e6;
    transition: box-shadow 0.25s, transform 0.25s;
}

.training26-content .blockPageCards .card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.training26-content .blockPageCards .card-body {
    background-color: #fff;
    border-top: 1px solid #ececec;
    padding: 1rem;
}

.training26-content .blockPageCards .card-title a.text-light {
    color: #1f1f23 !important;
    text-decoration: none;
    font-weight: 600;
}

.training26-content .blockPageCards .card-title a.text-light:hover {
    color: var(--training26-primary-text) !important;
}

.training26-content .blockPageCards .card-text {
    color: #555;
    font-size: 0.9rem;
    line-height: 1.5;
}


/* --- blockPageTitle ------------------------------------------------------
   Page heading with intro. The partial uses `.title.display-4.text-primary`
   which Bootstrap maps to its own primary blue. Override to brand pink so
   page titles match the rest of the skin. */

.training26-content .blockPageTitle {
    margin: 1.5rem 0 1rem;
}

.training26-content .blockPageTitle h1.title.display-4.text-primary {
    color: var(--training26-primary-text) !important;
    font-weight: 700;
    line-height: 1.15;
}

.training26-content .blockPageTitle .intro {
    color: #555;
    line-height: 1.55;
    max-width: 880px;
}


/* --- blockPageTitleSplit -------------------------------------------------
   Two-coloured title. The class names on each span are author-supplied so
   the only baseline rule is the wrapper margin. */

.training26-content .blockPageTitleSplit {
    margin: 1.5rem 0 1rem;
}

.training26-content .blockPageTitleSplit h1.title {
    line-height: 1.15;
    font-weight: 700;
}


/* --- blockPanel ----------------------------------------------------------
   Card-style panel that wraps a list of nested blocks with an optional
   header. */

.training26-content .blockPanel {
    margin: 1.5rem 0;
}

.training26-content .blockPanel .card {
    background-color: transparent;
    border: 1px solid #e0e0e0;
    border-radius: 4px;
}

.training26-content .blockPanel .card-header {
    background-color: #f6f6f6;
    border-bottom: 1px solid #e0e0e0;
    color: #1f1f23;
    font-weight: 600;
    padding: 0.85rem 1rem;
}

.training26-content .blockPanel .card-body {
    padding: 1.25rem;
}


/* --- blockQuote ----------------------------------------------------------
   Pull quote with optional source/attribute. The partial provides
   `.quote`, `.quote-arrow`, `.source`, `.attribute` hooks but no styling. */

.training26-content .blockQuote {
    margin: 2rem 0;
    padding: 1.5rem 1.5rem 1.5rem 3rem;
    background-color: #f6f6f6;
    border-left: 4px solid var(--training26-primary);
    position: relative;
}

.training26-content .blockQuote::before {
    content: "\201C";
    position: absolute;
    top: 0.25rem;
    left: 0.85rem;
    font-size: 3rem;
    color: var(--training26-primary-text);
    line-height: 1;
    font-family: Georgia, serif;
}

.training26-content .blockQuote .quote {
    font-size: 1.15rem;
    line-height: 1.55;
    color: #2a2a2a;
    font-style: italic;
}

.training26-content .blockQuote .source {
    margin-top: 0.75rem;
    font-weight: 600;
    color: #1f1f23;
}

.training26-content .blockQuote .attribute {
    color: #6d6d6d;
    font-size: 0.9rem;
}

.training26-content .blockQuote .quote-arrow {
    display: none; /* legacy hook - not used in new skin */
}


/* --- blockRichText -------------------------------------------------------
   Free-form rich text from the editor. The partial ships an inline override
   for h6 (lifted into here so we can keep the partial clean). */

.training26-content .blockRichText {
    color: #2a2a2a;
    line-height: 1.65;
    margin: 1rem 0;
}

.training26-content .blockRichText h2,
.training26-content .blockRichText h3,
.training26-content .blockRichText h4,
.training26-content .blockRichText h5 {
    color: #1f1f23;
    font-weight: 700;
    margin-top: 1.5rem;
    margin-bottom: 0.65rem;
}

.training26-content .blockRichText h6 {
    font-size: 1.1rem;
    margin-top: 1rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.training26-content .blockRichText a {
    color: var(--training26-primary-text);
}

.training26-content .blockRichText a:hover {
    color: var(--training26-primary-hover);
}

.training26-content .blockRichText p {
    margin-bottom: 1rem;
}

.training26-content .blockRichText ul,
.training26-content .blockRichText ol {
    margin-bottom: 1rem;
    padding-left: 1.5rem;
}


/* --- blockSection --------------------------------------------------------
   Wrapper section with optional bg-dark variant ("trainingSection1/2/3"). On
   the light skin the bg-dark variants stay dark - make sure nested text is
   readable in both modes. */

.training26-content .blockSection {
    padding: 2rem 0;
}

.training26-content .blockSection.bg-dark,
.training26-content .blockSection.bg-dark.bg-opacity-25,
.training26-content .blockSection.bg-dark.bg-opacity-50 {
    color: #fff;
}

.training26-content .blockSection.bg-dark h1,
.training26-content .blockSection.bg-dark h2,
.training26-content .blockSection.bg-dark h3,
.training26-content .blockSection.bg-dark h4,
.training26-content .blockSection.bg-dark p {
    color: #fff;
}


/* --- blockSimpleList -----------------------------------------------------
   Plain bullet list with check icons. Partial uses .color-pink on the icon
   which isn't a Bootstrap class - make sure it resolves. */

.training26-content .blockSimpleList {
    margin: 1rem 0 1.5rem;
}

.training26-content .blockSimpleList ul {
    padding-left: 1.5rem;
}

.training26-content .blockSimpleList li {
    padding: 0.3rem 0;
    color: #2a2a2a;
}

.training26-content .blockSimpleList .color-pink,
.training26-content .blockSimpleList .fa-li {
    color: var(--training26-primary-text);
}


/* --- blockSplitComponent -------------------------------------------------
   Two columns with optional background images. Already a Bootstrap row -
   just provide vertical rhythm + balanced gutters. */

.training26-content .blockSplitComponent {
    margin: 1.5rem 0;
    --bs-gutter-x: 2rem;
}

.training26-content .blockSplitComponent > [class*="col-"] {
    padding-top: 1rem;
    padding-bottom: 1rem;
}


/* --- blockStaffProfile ---------------------------------------------------
   Staff bio with optional likes gallery. Reuses .blockPageTitle inside -
   keep the title styling consistent and ensure the headshot is balanced. */

.training26-content .blockStaffProfile {
    margin: 2rem 0;
}

.training26-content .blockStaffProfile .blockPageTitle h1.title {
    font-size: 2.25rem;
    margin-bottom: 0.5rem;
}

.training26-content .blockStaffProfile h3 {
    color: #555;
    font-weight: 400;
    font-size: 1.1rem;
    margin-bottom: 1rem;
}

.training26-content .blockStaffProfile .image img {
    width: 100%;
    height: auto;
    border-radius: 4px;
}

.training26-content .blockStaffProfile .likes h4 {
    color: #1f1f23;
    font-weight: 600;
    margin-top: 1.25rem;
    margin-bottom: 0.75rem;
    font-size: 1.05rem;
}


/* --- blockTabbedContent (wrapper) ----------------------------------------
   Pure pass-through wrapper for nested tabs. Spacing only. */

.training26-content .blockTabbedContent {
    margin: 1.5rem 0;
}


/* --- blockTabs -----------------------------------------------------------
   Vertical pill tabs (desktop) + accordion (mobile). The partial ships a
   dark FAQ-style colour scheme inline (`.training-faqs`). For the new light
   skin the default tabs render against white; the inline FAQ styles still
   apply if `.training-faqs` is added by the page. Ensure the default look
   on light is legible. */

.training26-content .blockTabs {
    margin: 1.5rem 0;
}

.training26-content .blockTabs .nav-pills .nav-link {
    background-color: #f6f6f6;
    color: #1f1f23;
    border-radius: 0;
    text-align: left;
    padding: 0.85rem 1rem;
    border-bottom: 1px solid #e6e6e6;
    font-weight: 500;
}

.training26-content .blockTabs .nav-pills .nav-link.active {
    background-color: var(--training26-primary);
    color: #fff;
    font-weight: 700;
}

.training26-content .blockTabs .nav-pills .nav-link:hover:not(.active) {
    background-color: #ececec;
    color: var(--training26-primary-text);
}

.training26-content .blockTabs .tab-content {
    background-color: #fff;
    color: #2a2a2a;
    padding: 1.5rem;
    border: 1px solid #e6e6e6;
    border-left: 0;
}

/* Mobile accordion */
.training26-content .accordion-item {
    border: 1px solid #e6e6e6;
}

.training26-content .accordion-button {
    color: #1f1f23;
    background-color: #f6f6f6;
    font-weight: 600;
}

.training26-content .accordion-button:not(.collapsed) {
    background-color: var(--training26-primary);
    color: #fff;
    box-shadow: none;
}

.training26-content .accordion-button:focus {
    box-shadow: 0 0 0 0.2rem rgba(236, 38, 105, 0.15);
}


/* --- blockThreeColumns ---------------------------------------------------
   Three-column wrapper. Bootstrap rows already handle layout - just space
   nested blocks evenly. */

.training26-content .blockThreeColumns {
    margin: 1.5rem 0;
    --bs-gutter-x: 2rem;
}

.training26-content .blockThreeColumns > [class*="col-"] {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
}


/* --- blockTimeline / blockTimelineItem -----------------------------------
   Ordered timeline. The default and "blockTimelineDefault" partials live in
   /Views/Partials/Blocks/blockTimeline/ - they expect an `.item` with `h3`
   year + `.content` body. Provide a vertical bar + dot treatment in brand. */

.training26-content .blockTimeline {
    position: relative;
    margin: 2rem 0;
    padding-left: 2rem;
    border-left: 2px solid #e6e6e6;
}

.training26-content .blockTimeline .item {
    position: relative;
    padding-bottom: 1.5rem;
}

.training26-content .blockTimeline .item::before {
    content: "";
    position: absolute;
    left: -2.4rem;
    top: 0.4rem;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--training26-primary);
    border: 2px solid #fff;
    box-shadow: 0 0 0 2px var(--training26-primary);
}

.training26-content .blockTimeline .item h3 {
    color: var(--training26-primary-text);
    font-weight: 700;
    font-size: 1.15rem;
    margin-bottom: 0.5rem;
}

.training26-content .blockTimeline .item .content {
    color: #2a2a2a;
}


/* --- blockTimelineAboutItem ----------------------------------------------
   "About" timeline variant with a date pill, subtitle, image grid. The
   partial sets its own inline accent colour (#d6264e) and grey subtitle. We
   only need to ensure the description body text stays readable. */

.training26-content .timeline {
    margin: 2rem 0;
}

.training26-content .timeline .timeline-content .description {
    color: #2a2a2a;
    line-height: 1.6;
    margin-bottom: 0.75rem;
}

.training26-content .timeline .timeline-content .title {
    font-weight: 700;
    margin-bottom: 0.5rem;
}

.training26-content .timeline .date-content .date,
.training26-content .timeline .date-content .year {
    color: var(--training26-primary-text);
    font-weight: 700;
}


/* --- blockTitleDescription -----------------------------------------------
   Simple two-line block: bold title + description. */

.training26-content .blockTitleDescription {
    margin: 1rem 0;
}

.training26-content .blockTitleDescription strong {
    color: #1f1f23;
    font-size: 1.05rem;
    display: inline-block;
    margin-bottom: 0.25rem;
}

.training26-content .blockTitleDescription > div:last-child {
    color: #555;
    line-height: 1.55;
}


/* --- blockTrainingTestimonial / blockTrainingTestimonials ----------------
   Splide carousel of pull-quote testimonials. The slide partial uses
   .text-white (legacy dark site), so override to dark on the light skin and
   make .text-primary brand pink instead of Bootstrap blue. */

.training26-content .blockTrainingTestimonials {
    background-color: #f6f6f6;
    padding: 2.5rem 0;
    margin: 2rem 0;
    border-radius: 4px;
}

.training26-content .blockTrainingTestimonials .splide__slide p.text-white {
    color: #2a2a2a !important;
    font-size: 1.1rem;
    line-height: 1.65;
    font-style: italic;
}

.training26-content .blockTrainingTestimonials .splide__slide strong.text-white {
    color: #1f1f23 !important;
}

.training26-content .blockTrainingTestimonials .splide__slide .text-primary {
    color: var(--training26-primary-text) !important;
    font-weight: 600;
}

.training26-content .blockTrainingTestimonials .splide__arrow {
    background: var(--training26-primary);
    opacity: 0.9;
}

.training26-content .blockTrainingTestimonials .splide__arrow svg {
    fill: #fff;
}

.training26-content .blockTrainingTestimonials .splide__arrow:hover {
    background: var(--training26-primary-hover);
    opacity: 1;
}

.training26-content .blockTrainingTestimonials .splide__pagination__page.is-active {
    background: var(--training26-primary);
}


/* --- blockYouTubeVideo ---------------------------------------------------
   Responsive 16:9 iframe wrapper. */

.training26-content .ratio.ratio-16x9 {
    margin: 1.5rem 0;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}


/* --- blockASKCollection --------------------------------------------------
   ASK collection display: divider title bar + collection image. The
   partial provides its own .heading-1 styles inline; reinforce here so the
   white pill divider lands on the right shade. */

.training26-content .tc-ask-collection-block {
    margin: 2rem 0;
}

.training26-content .tc-ask-collection-block .heading-1 span {
    background: #fff;
    color: #1f1f23;
    font-weight: 600;
}

.training26-content .tc-ask-collection-block img {
    border: 1px solid #ececec;
    border-radius: 4px;
}


/* --- BlockUmbracoContents ------------------------------------------------
   Featured-card list of related content nodes. Same Bootstrap card scheme
   used elsewhere - match blockCard styling for consistency. */

.training26-content .blockUmbracoContents {
    margin: 1.5rem 0;
}

.training26-content .blockUmbracoContents .card {
    border: 1px solid #e6e6e6;
    transition: box-shadow 0.25s, transform 0.25s;
}

.training26-content .blockUmbracoContents .card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.training26-content .blockUmbracoContents .card-title a {
    color: #1f1f23;
    text-decoration: none;
    font-weight: 600;
}

.training26-content .blockUmbracoContents .card-title a:hover {
    color: var(--training26-primary-text);
}

.training26-content .blockUmbracoContents .card-text {
    color: #555;
    font-size: 0.95rem;
}


/* --- storeProductCards ---------------------------------------------------
   Auto-generated card list of store products. Partial uses .bg-dark on the
   card body and .text-white on the title - flip both for the light skin. */

.training26-content .blockPageCards .card-body.bg-dark {
    background-color: #fff !important;
    border-top: 1px solid #ececec !important;
}

.training26-content .blockPageCards .card-title a.text-white {
    color: #1f1f23 !important;
    text-decoration: none;
    font-weight: 600;
}

.training26-content .blockPageCards .card-title a.text-white:hover {
    color: var(--training26-primary-text) !important;
}


/* --- storeOtherProducts --------------------------------------------------
   Splide carousel of related products. Wrapper has an inline dark
   background (#282d31). Override to light and reflow the card bodies so the
   titles are visible on white. */

.training26-content .blockTrainingTestimonials.splide[data-splide] {
    background-color: transparent;
}

.training26-content > div[style*="#282d31"],
.training26-content [style*="background-color: #282d31"] {
    background-color: #f6f6f6 !important;
    color: #1f1f23 !important;
    border-radius: 4px;
}

.training26-content [style*="#282d31"] h3 {
    color: #1f1f23 !important;
}

.training26-content [style*="#282d31"] .card-body.bg-dark {
    background-color: #fff !important;
    border-top: 1px solid #ececec !important;
}

.training26-content [style*="#282d31"] .card-title a.text-white {
    color: #1f1f23 !important;
}

.training26-content [style*="#282d31"] .card-title a.text-white:hover {
    color: var(--training26-primary-text) !important;
}


/* --- storeProductDetail --------------------------------------------------
   Full product info read-out. Partial uses .text-white throughout - flip
   for the light skin. */

.training26-content .blockCode.tc-code-block h1.text-white,
.training26-content .blockCode.tc-code-block .text-white {
    color: #1f1f23 !important;
}

.training26-content .blockCode.tc-code-block img {
    border-radius: 4px;
    margin-top: 1rem;
}


/* --- Generic .image-container / .magnify-overlay -------------------------
   Used by blockImage when lightbox is enabled. Inherits from BS5_Base.cshtml
   inline styles. Just ensure consistent rounding inside the new skin. */

.training26-content .image-container {
    border-radius: 4px;
    overflow: hidden;
}


/* --------------------------------------------------------------------------
   32. Sector landing page (Views/store26SectorHomepage.cshtml)
        Hero strip, group sections grouped by band, and the course-card grid.
        All class names are .training26-sector-* / .training26-course-card-*.
   -------------------------------------------------------------------------- */


/* --- Hero strip ---------------------------------------------------------
   Cream/beige band with eyebrow, page title, description, and a stats row. */

.training26-content .training26-sector-hero {
    background-color: #f3f4f6;
    padding: 3.5rem 0 2.75rem;
    margin-bottom: 2.5rem;
}

/* Two-column hero grid: text body left, illustrative course image right.
   Image fills the full height of the hero band by canceling the parent
   section's vertical padding via negative margins (and stretching via the
   grid's align-items: stretch). Falls back to single-column on smaller
   viewports; hidden on mobile. */
.training26-content .training26-sector-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: stretch;
}

.training26-content .training26-sector-hero-body {
    align-self: center;
}

.training26-content .training26-sector-hero-image {
    /* Cancel the .training26-sector-hero padding (3.5rem top, 2.75rem bottom)
       so the image bleeds top-to-bottom of the hero band. */
    margin-top: -3.5rem;
    margin-bottom: -2.75rem;
    overflow: hidden;
    background-color: #e6e7ea;
    min-height: 100%;
}

.training26-content .training26-sector-hero-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

@media (max-width: 991px) {
    .training26-content .training26-sector-hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }

    .training26-content .training26-sector-hero-image {
        max-width: 480px;
        margin: 0 auto;
        aspect-ratio: 5 / 4;
        min-height: 0;
    }
}

@media (max-width: 575px) {
    .training26-content .training26-sector-hero-image {
        display: none;
    }
}

.training26-content .training26-sector-eyebrow {
    color: var(--training26-primary-text);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    margin: 0 0 1rem;
    text-transform: uppercase;
}

.training26-content .training26-sector-title {
    font-size: clamp(2rem, 4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.05;
    color: #111;
    margin: 0 0 1rem;
    max-width: 720px;
}

.training26-content .training26-sector-description {
    color: #4a4a4a;
    font-size: 1rem;
    line-height: 1.6;
    max-width: 640px;
    margin: 0 0 1.75rem;
}

.training26-content .training26-sector-stats {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2rem 2.75rem;
    color: #2a2a2a;
}

.training26-content .training26-sector-stats li {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.9rem;
}

.training26-content .training26-sector-stats strong {
    font-size: 1.15rem;
    font-weight: 800;
    color: #111;
}

.training26-content .training26-sector-stats span {
    color: #555;
}


/* --- Toolbar (view-mode toggle + filter pills) -------------------------
   Single horizontal row above the views. View toggle on the left, filter
   pills on the right. Wraps to a column on narrow viewports. */

.training26-content .training26-sector-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    margin: 0 0 2rem;
}


/* --- View-mode toggle --------------------------------------------------
   Two-button segmented control: "All courses" / "By role". Active button is
   filled with the brand pink; inactive sit on a subtle bordered pill. */

.training26-content .training26-sector-view-toggle {
    display: inline-flex;
    align-items: stretch;
    background-color: #fff;
    border: 1px solid #d8d8db;
    border-radius: 999px;
    padding: 0.25rem;
}

.training26-content .training26-sector-view-toggle button {
    appearance: none;
    background: transparent;
    border: none;
    padding: 0.4rem 1rem;
    font-size: 0.85rem;
    font-weight: 600;
    color: #555;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s;
    line-height: 1.3;
}

.training26-content .training26-sector-view-toggle button:hover {
    color: var(--training26-primary-text);
}

.training26-content .training26-sector-view-toggle button.is-active {
    background-color: var(--training26-primary);
    color: #fff;
}


/* --- Flat-grid view --------------------------------------------------- */

.training26-content .training26-sector-flat-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
    padding-bottom: 4rem;
}

/* Large desktops: go 4-up so more courses fit at once and card images are
   smaller. Medium desktops (992-1199px) stay 3-up to avoid cramped cards. */
@media (min-width: 1200px) {
    .training26-content .training26-sector-flat-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 991px) {
    .training26-content .training26-sector-flat-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .training26-content .training26-sector-flat-grid {
        grid-template-columns: 1fr;
    }

    .training26-content .training26-sector-toolbar {
        flex-direction: column;
        align-items: stretch;
    }
}


/* --- View-mode visibility ----------------------------------------------
   .training26-sector-views[data-view-mode] toggles which child renders.
   Filter pills only make sense in grouped view, so they're hidden when
   flat view is active. */

.training26-sector-views[data-view-mode="flat"] .training26-sector-groups,
.training26-sector-views[data-view-mode="flat"] .training26-sector-filter {
    display: none;
}

.training26-sector-views[data-view-mode="grouped"] .training26-sector-flat-grid {
    display: none;
}

/* All-courses page: only the by-sector view + sector filter render.
   The legacy [data-view-mode="flat"] rule above already hides
   .training26-sector-flat-grid because that grid isn't emitted on
   this page - left as-is to keep the sector-page wrapper consistent. */


/* --- Filter bar ---------------------------------------------------------
   Pill-row alongside the view toggle. Click "All" or a single group pill to
   filter the visible groups (handled by inline JS in the page template).
   Active state is `.is-active` + `aria-pressed="true"` on the button. */

.training26-content .training26-sector-filter {
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

.training26-content .training26-sector-filter-label {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #6d6d6d;
    margin-right: 0.5rem;
}

.training26-content .training26-sector-filter-pill {
    appearance: none;
    border: 1px solid #d8d8db;
    background-color: #fff;
    color: #2a2a2a;
    font-size: 0.85rem;
    font-weight: 600;
    padding: 0.4rem 0.95rem;
    border-radius: 999px;
    cursor: pointer;
    transition: background-color 0.15s, color 0.15s, border-color 0.15s;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    line-height: 1.3;
}

.training26-content .training26-sector-filter-pill:hover {
    border-color: var(--training26-primary);
    color: var(--training26-primary-text);
}

.training26-content .training26-sector-filter-pill.is-active {
    background-color: var(--training26-primary);
    border-color: var(--training26-primary);
    color: #fff;
}

.training26-content .training26-sector-filter-pill .training26-sector-filter-count {
    background-color: rgba(0, 0, 0, 0.08);
    color: inherit;
    font-size: 0.7rem;
    font-weight: 700;
    padding: 0.05rem 0.45rem;
    border-radius: 999px;
}

.training26-content .training26-sector-filter-pill.is-active .training26-sector-filter-count {
    /* solid white + pink text: translucent white over the pink pill left the
       white count text at ~3.1:1 */
    background-color: #fff;
    color: var(--training26-primary-text);
}

/* When a specific filter is active, hide every group except the matching one.
   `data-active-filter` lives on .training26-sector-groups and matches a
   `data-group` on each .training26-sector-group. "all" disables filtering. */
.training26-content .training26-sector-groups[data-active-filter]:not([data-active-filter="all"]) .training26-sector-group {
    display: none;
}

.training26-content .training26-sector-groups[data-active-filter]:not([data-active-filter="all"]) .training26-sector-group[data-group-active="true"] {
    display: block;
}


/* --- Group section ------------------------------------------------------
   Header (group title + subtitle on the left, "X courses · from £Y" on the
   right) followed by a 3-up card grid. */

.training26-content .training26-sector-groups {
    padding-bottom: 4rem;
}

.training26-content .training26-sector-group {
    margin-bottom: 3.5rem;
}

.training26-content .training26-sector-group-header {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 0 0 1.5rem;
    padding-bottom: 1rem;
    border-bottom: 1px solid #ececec;
}

.training26-content .training26-sector-group-title h2 {
    margin: 0 0 0.25rem;
    font-size: 1.6rem;
    font-weight: 800;
    color: #111;
    line-height: 1.15;
}

.training26-content .training26-sector-group-title p {
    margin: 0;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.5;
}

.training26-content .training26-sector-group-meta {
    flex-shrink: 0;
    color: #6d6d6d;
    font-size: 0.85rem;
    text-align: right;
    white-space: nowrap;
}


/* --- Card grid ----------------------------------------------------------
   Four columns on large desktop, three on standard desktop, two on tablet,
   one on mobile. Shared by store26AllCourses (by-sector groups) and the
   sector page's "By role" grouped view, so both stay in step with the
   flat "All courses" grid above. */

.training26-content .training26-sector-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

/* Large desktops: go 4-up so more courses fit at once and card images are
   smaller. Medium desktops (992-1199px) stay 3-up to avoid cramped cards. */
@media (min-width: 1200px) {
    .training26-content .training26-sector-grid {
        grid-template-columns: repeat(4, 1fr);
    }
}

@media (max-width: 991px) {
    .training26-content .training26-sector-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .training26-content .training26-sector-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Course card --------------------------------------------------------
   Square image at top, body (chips + title + summary), divider, footer
   (price left, actions right). */

.training26-content .training26-course-card {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #ececec;
    border-radius: 6px;
    overflow: hidden;
    transition: box-shadow 0.25s, transform 0.25s, border-color 0.25s;
}

.training26-content .training26-course-card:hover {
    box-shadow: 0 12px 32px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
    border-color: #e0e0e0;
}

.training26-content .training26-course-card-image {
    display: block;
    aspect-ratio: 3 / 2;
    background-color: #eef0f3;
    overflow: hidden;
}

.training26-content .training26-course-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.4s;
}

.training26-content .training26-course-card:hover .training26-course-card-image img {
    transform: scale(1.04);
}

.training26-content .training26-course-card-body {
    padding: 1rem 1.25rem 1.25rem;
    flex: 1 1 auto;
}

.training26-content .training26-course-card-chips {
    list-style: none;
    padding: 0;
    margin: 0 0 0.85rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.training26-content .training26-course-card-chips li {
    display: inline-block;
    padding: 0.25rem 0.65rem;
    font-size: 0.72rem;
    font-weight: 600;
    background-color: #eef0f3;
    color: #4a4a4a;
    border-radius: 999px;
    line-height: 1.3;
    letter-spacing: 0.01em;
}

.training26-content .training26-course-card-title {
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 0.5rem;
    color: #111;
}

.training26-content .training26-course-card-title a {
    color: inherit;
    text-decoration: none;
}

.training26-content .training26-course-card-title a:hover {
    color: var(--training26-primary-text);
}

.training26-content .training26-course-card-summary {
    color: #555;
    font-size: 0.9rem;
    line-height: 1.55;
    margin: 0;
}

/* Footer divider line + price/action row */
.training26-content .training26-course-card-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.85rem 1.25rem 1rem;
    border-top: 1px solid #ececec;
}

.training26-content .training26-course-card-price strong {
    font-size: 1.05rem;
    font-weight: 800;
    color: #111;
}

.training26-content .training26-course-card-price span {
    color: #6d6d6d;
    font-size: 0.85rem;
    margin-left: 0.15rem;
}

.training26-content .training26-course-card-actions {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
}

.training26-content .training26-course-card-details {
    color: var(--training26-primary-text);
    font-size: 0.85rem;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
}

.training26-content .training26-course-card-details:hover {
    color: var(--training26-primary-hover);
}

/* Smaller pill button for the card footer (paired with .training26-btn-primary) */
.training26-content .training26-btn-sm {
    padding: 0.4rem 1rem;
    font-size: 0.8rem;
}


/* --------------------------------------------------------------------------
   33. StoreSimpleProduct page light-skin overrides
        Views/StoreSimpleProduct.cshtml ships a large inline <style> block
        designed for the legacy dark page (white text on #202020). On the new
        light skin every white-on-dark utility renders white-on-white. These
        rules scope to .training26-content and use specificity (no !important
        unless required) to flip the page to readable on a white background.
        Touches: hero title, description, breadcrumb, tabs, testimonials,
        course-contents, price box, trust badges, micro-testimonial, sticky
        mobile CTA.
   -------------------------------------------------------------------------- */


/* --- Page background wrapper (#product-bg-{id}) -------------------------
   The inline rule sets a near-black background and a faded greyscale image
   pseudo-element. Disable both - the white .training26-content wrapper
   provides the canvas now. */

.training26-content [id^="product-bg-"] {
    background-color: transparent !important;
}

.training26-content [id^="product-bg-"]::before,
.training26-content [id^="product-bg-"] ::before {
    display: none !important;
    content: none !important;
}


/* --- Breadcrumb ---------------------------------------------------------
   Partial wraps the list in <nav class="bg-secondary bg-opacity-10"> with
   pink links on every item. Strip the panel, tighten typography, mute the
   parent links to grey, and de-link the current page (last item). */

.training26-content nav[aria-label="breadcrumb"] {
    background-color: transparent !important;
    padding: 0;
}

.training26-content .breadcrumb {
    background-color: transparent;
    padding: 0.5rem 0 0.75rem;
    margin: 0;
    font-size: 0.8rem;
}

.training26-content .breadcrumb-item a,
.training26-content [id^="product-bg-"] .breadcrumb a {
    color: #6d6d6d !important;
    text-decoration: none;
    font-weight: 400;
}

.training26-content .breadcrumb-item a:hover,
.training26-content [id^="product-bg-"] .breadcrumb a:hover {
    color: var(--training26-primary-text) !important;
    text-decoration: none;
}

/* Current page (last item) - plain dark, no link styling */
.training26-content .breadcrumb-item:last-child a {
    color: #2a2a2a !important;
    pointer-events: none;
    cursor: default;
    font-weight: 500;
}

/* Tighter chevron separator */
.training26-content .breadcrumb-item + .breadcrumb-item::before {
    color: #c8c8c8 !important;
    padding: 0 0.45rem !important;
    font-size: 0.8em !important;
    content: "›" !important;
}


/* --- Page hero - title + long description ------------------------------- */

.training26-content .product-description {
    color: #2a2a2a;
    line-height: 1.65;
}

.training26-content .product-description h1,
.training26-content .product-description h1.text-white,
.training26-content .product-description h1.display-3.text-white {
    color: #111 !important;
    font-weight: 800;
    line-height: 1.1;
}

.training26-content .product-description p,
.training26-content .product-description li,
.training26-content .product-description div {
    color: #2a2a2a;
}

.training26-content .product-description a {
    color: var(--training26-primary-text);
}

.training26-content .product-description a:hover {
    color: var(--training26-primary-hover);
}


/* --- Tabs (.product-tabs .nav-tabs) -------------------------------------
   Inline rules use rgba(255,255,255,0.6) for the link colour - invisible on
   white. Flip to dark grey, brand-pink on hover/active, subtle bottom rule. */

.training26-content .product-tabs .nav-tabs {
    border-bottom: 1px solid #e6e6e6;
}

.training26-content .product-tabs .nav-tabs .nav-link {
    color: #555;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
}

.training26-content .product-tabs .nav-tabs .nav-link:hover {
    color: var(--training26-primary-text);
    border-bottom-color: rgba(236, 38, 105, 0.35);
}

.training26-content .product-tabs .nav-tabs .nav-link.active {
    color: var(--training26-primary-text);
    border-bottom-color: var(--training26-primary-text);
    background: transparent;
    font-weight: 700;
}

.training26-content .product-tabs .tab-content {
    color: #2a2a2a;
}


/* --- Testimonial bubbles ------------------------------------------------
   Light grey card with dark italic text. Keep the speech-bubble triangle
   pointing down-left from each bubble, recoloured to match the bubble bg. */

.training26-content .testimonial-content {
    background-color: #f3f4f6;
    color: #2a2a2a;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
    border-radius: 8px;
    border: 1px solid #e6e6e6;
}

.training26-content .testimonial-content p {
    color: #2a2a2a;
}

.training26-content .testimonial-content::after {
    border-top-color: #f3f4f6;
}

.training26-content .testimonial-source {
    color: #555;
    font-weight: 600;
    text-shadow: none;
}


/* --- Course contents block (.course-contents) ---------------------------
   Markup comes from the external CourseContentsService and ships with
   bg-dark / bg-black row utilities (white text on near-black) - invisible
   on the light skin. Strip those utilities and apply a clean alternating
   light-row table look with a darker first-row "header" treatment. */

.training26-content .course-contents,
.training26-content .course-contents p,
.training26-content .course-contents li {
    color: #2a2a2a;
}

.training26-content .course-contents h2,
.training26-content .course-contents h3,
.training26-content .course-contents h4,
.training26-content .course-contents h3.text-pink {
    color: var(--training26-primary-text) !important;
    font-weight: 700;
    margin-top: 1.5rem;
}

/* Strip dark utilities anywhere inside .course-contents */
.training26-content .course-contents .bg-dark,
.training26-content .course-contents .bg-black,
.training26-content .course-contents tr.bg-dark,
.training26-content .course-contents tr.bg-black,
.training26-content .course-contents td.bg-dark,
.training26-content .course-contents td.bg-black,
.training26-content .course-contents th.bg-dark,
.training26-content .course-contents th.bg-black {
    background-color: transparent !important;
    color: #2a2a2a !important;
}

/* Tables: zebra rows, darker header row, brand-pink links */
.training26-content .course-contents table {
    width: 100%;
    border-collapse: collapse;
    margin: 0.75rem 0 1.5rem;
    color: #2a2a2a;
    border: 1px solid #ececec;
    border-radius: 4px;
    overflow: hidden;
}

.training26-content .course-contents table tr {
    background-color: #fafafa !important;
    border-bottom: 1px solid #ececec;
}

.training26-content .course-contents table tr:nth-child(even) {
    background-color: #ffffff !important;
}

.training26-content .course-contents table tr:first-child {
    background-color: #ececef !important;
    font-weight: 700;
}

.training26-content .course-contents table tr:last-child {
    border-bottom: none;
}

.training26-content .course-contents table td,
.training26-content .course-contents table th {
    color: #2a2a2a !important;
    background-color: transparent !important;
    padding: 0.65rem 0.9rem;
    border-color: #ececec !important;
    vertical-align: middle;
}

.training26-content .course-contents table td a,
.training26-content .course-contents table th a {
    color: var(--training26-primary-text) !important;
    text-decoration: none;
}

.training26-content .course-contents table td a:hover,
.training26-content .course-contents table th a:hover {
    color: var(--training26-primary-hover) !important;
    text-decoration: underline;
}


/* --- Price box (.product-price-box .bg-black) ---------------------------
   Flip the dark "buy" panel to a light bordered card with brand colours. */

.training26-content .product-price-box .bg-black {
    background-color: #ffffff !important;
    color: #2a2a2a !important;
    border: 1px solid #ececec;
    border-radius: 6px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
}

.training26-content .product-price-box .bg-black h1,
.training26-content .product-price-box .bg-black h1.text-white,
.training26-content .product-price-box .bg-black h1.display-3.text-white {
    color: #111 !important;
    font-weight: 800;
}

.training26-content .product-price-box .bg-black .text-white {
    color: #2a2a2a !important;
}

.training26-content .product-price-box .bg-black h4.text-primary {
    color: #999 !important;
    font-weight: 400;
}

.training26-content .product-price-box .add-to-cart-block {
    color: #2a2a2a;
}

/* "Buy places" CTA - branded pink pill */
.training26-content .product-price-box .btn-add-to-cart,
.training26-content .product-price-box .btn.btn-primary.btn-add-to-cart {
    background-color: var(--training26-primary);
    border-color: var(--training26-primary);
    color: #ffffff !important;
    border-radius: 999px;
    padding: 0.65rem 1.5rem;
    font-weight: 700;
}

.training26-content .product-price-box .btn-add-to-cart:hover,
.training26-content .product-price-box .btn-add-to-cart:focus {
    background-color: var(--training26-primary-hover);
    border-color: var(--training26-primary-hover);
    color: #ffffff !important;
}

/* "Prices displayed in {currency}" small print + new-pricing alert */
.training26-content .product-price-box .bg-black small {
    color: #6d6d6d !important;
}

.training26-content .product-price-box .alert.alert-danger {
    background-color: #fff5f7;
    border-color: #ffe0e9;
    color: #8a1d3f;
}


/* --- Trust badges ------------------------------------------------------- */

.training26-content .trust-badge {
    color: #555;
    background-color: #f3f4f6;
    border: 1px solid #e6e6e6;
}

.training26-content .trust-badge i {
    color: #4caf50;
}


/* --- Micro testimonial pull-quote --------------------------------------- */

.training26-content .micro-testimonials {
    background-color: #f6f6f6;
    border-left: 3px solid var(--training26-primary);
    border-radius: 4px;
}

.training26-content .testimonial-snippet {
    color: #2a2a2a;
    font-style: italic;
}

.training26-content .testimonial-snippet strong {
    color: #111;
    font-style: normal;
}


/* --- Sticky mobile CTA bar ---------------------------------------------
   Inline rule paints this near-black with a pink top border. On the white
   skin a light surface + dark price + pink button feels native. */

.training26-content .sticky-cta-mobile,
.training26 .sticky-cta-mobile {
    background: #ffffff !important;
    border-top: 2px solid var(--training26-primary);
    box-shadow: 0 -4px 14px rgba(0, 0, 0, 0.08);
}

.training26 .sticky-cta-mobile .price-display {
    color: #111;
}

.training26 .sticky-cta-mobile .btn-buy-sticky,
.training26 .sticky-cta-mobile .btn-primary {
    background-color: var(--training26-primary);
    border-color: var(--training26-primary);
    color: #fff;
    border-radius: 999px;
}


/* --- Product thumbnail grid -------------------------------------------- */

.training26-content .product-thumbnail a,
.training26-content .product-thumbnail-grid a {
    border: 1px solid #ececec;
    border-radius: 4px;
    overflow: hidden;
    display: block;
}

.training26-content .product-thumbnail a:hover img,
.training26-content .product-thumbnail-grid a:hover img {
    opacity: 0.92;
}


/* --------------------------------------------------------------------------
   34. Product detail page (Views/StoreSimpleProduct.cshtml - redesigned)
        Two-column layout: main column on the left (chips, title, summary,
        learning-outcomes card, tabs), sticky right rail (price box, meta box,
        stats strip, team-quote card). All classes prefixed `training26-pdt-`.
   -------------------------------------------------------------------------- */


/* --- Layout grid -------------------------------------------------------- */

.training26-content .training26-pdt {
    /* Use vertical-only padding so Bootstrap's container side gutter
       (responsive --bs-gutter-x) keeps content off the screen edge on
       mobile. Setting the shorthand previously zeroed out the horizontal
       padding and clipped chips/title against the viewport. */
    padding-top: 1rem;
    padding-bottom: 4rem;
}

/* Three explicit areas rather than two columns: the copy spans both rows on
   the left, the price box sits top-right, and the course photo sits directly
   under it. Placing the photo here instead of splitting the hero 50/50 keeps
   the title on the full main column at every width - at 992–1199px the
   container is still only 960px, and a hero split left the H1 ~238px. */
.training26-content .training26-pdt-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    /* Row 1 is sized by the rail; row 2 must be flexible, not auto. The main
       column spans both rows, and grid shares a spanning item's excess height
       equally across spanned *auto* tracks - which would inflate row 1 to
       ~1175px and drop the photo miles below the price box. A 1fr row 2
       absorbs the remainder instead, pinning row 1 to the rail's own height. */
    grid-template-rows: auto 1fr;
    column-gap: 3rem;
    row-gap: 1rem;
    align-items: start;
}

.training26-content .training26-pdt-main {
    grid-column: 1;
    grid-row: 1 / span 2;
    min-width: 0;
}

/* Not sticky: with the photo below it, a sticky rail would detach on scroll
   and slide straight over the top of the photo, and price + strip + photo
   (~935px) is taller than a laptop viewport, which strands its lower half
   off-screen. The rail barely travelled anyway. Mobile keeps its own sticky
   buy bar (.training26-pdt-stickybuy). */
.training26-content .training26-pdt-rail {
    grid-column: 2;
    grid-row: 1;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

/* Course photo: right column, directly under the price box. The main column
   spans both rows, so this row grows to the copy's height and the photo
   start-aligns to the top of it - i.e. it sits just below the rail rather
   than floating at the foot of a 2,000px column. */
.training26-content .training26-pdt-hero-image {
    grid-column: 2;
    grid-row: 2;
    align-self: start;
}

@media (max-width: 991px) {
    /* Single column: drop the explicit placement so everything auto-flows,
       then pull the photo above the copy - it led the page here before the
       rail move, and it's decorative, so reordering costs no meaning. */
    .training26-content .training26-pdt-grid {
        grid-template-columns: 1fr;
        grid-template-rows: none;
        gap: 2rem;
    }

    .training26-content .training26-pdt-main,
    .training26-content .training26-pdt-rail,
    .training26-content .training26-pdt-hero-image {
        grid-column: auto;
        grid-row: auto;
    }

    .training26-content .training26-pdt-hero-image {
        order: -1;
    }

    /* Hide the in-rail price box on mobile - its job is taken over by
       .training26-pdt-stickybuy. Keep meta, stats strip and team-quote
       since they carry useful info. */
    .training26-content .training26-pdt-rail .training26-pdt-price-box {
        display: none;
    }

    /* Pad the page bottom so the sticky bar doesn't cover content, and
       widen the side gutter slightly above Bootstrap's 12px default so the
       text isn't kissing the screen edge. */
    .training26-content .training26-pdt {
        padding-bottom: 6rem;
        padding-left: 1rem;
        padding-right: 1rem;
    }
}


/* --- Breadcrumb --------------------------------------------------------- */

.training26-content .training26-pdt-breadcrumb {
    margin: 0 0 1.5rem;
    font-size: 0.9rem;
    color: #6d6d6d;
}

.training26-content .training26-pdt-breadcrumb ol {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
    align-items: center;
}

.training26-content .training26-pdt-breadcrumb li {
    display: inline-flex;
    align-items: center;
}

.training26-content .training26-pdt-breadcrumb li + li::before {
    content: "›";
    margin-right: 0.75rem;
    color: #c0c0c0;
}

.training26-content .training26-pdt-breadcrumb a {
    color: #6d6d6d;
    text-decoration: none;
}

.training26-content .training26-pdt-breadcrumb a:hover {
    color: var(--training26-primary-text);
}

.training26-content .training26-pdt-breadcrumb [aria-current="page"] {
    color: #111;
    font-weight: 600;
}

/* Mobile: only show the parent crumb + the current page (last 2 items) so
   long trails like "Homepage › en-uk › Courses › Public Library Training ›
   Putting readers first" don't wrap onto multiple lines. */
@media (max-width: 767.98px) {
    .training26-content .training26-pdt-breadcrumb li:not(:nth-last-child(-n+2)) {
        display: none;
    }
    /* The first visible crumb shouldn't render its leading separator. */
    .training26-content .training26-pdt-breadcrumb li:nth-last-child(2)::before {
        content: none;
        margin-right: 0;
    }
}


/* --- Hero (chips / title / summary - full main column) ----------------- */

/* The photo used to be a second column here; it now lives in the right rail
   (see .training26-pdt-hero-image above), so the copy takes the whole main
   column and the title keeps a readable measure at every breakpoint. */
.training26-content .training26-pdt-hero {
    margin: 0 0 2.5rem;
}

.training26-content .training26-pdt-hero-image {
    overflow: hidden;
    border-radius: 4px;
}

.training26-content .training26-pdt-hero-image img {
    display: block;
    width: 100%;
    height: auto;
}

.training26-content .training26-pdt-hero-body {
    min-width: 0;
}


/* --- Hero chips --------------------------------------------------------- */

.training26-content .training26-pdt-chips {
    list-style: none;
    padding: 0;
    margin: 0 0 1.25rem;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.training26-content .training26-pdt-chip {
    display: inline-block;
    padding: 0.3rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 600;
    background-color: #eef0f3;
    color: #4a4a4a;
    border-radius: 999px;
    line-height: 1.3;
}

.training26-content .training26-pdt-chip.is-primary {
    background-color: #fde4ec;
    color: var(--training26-primary-text);
}


/* --- Title + summary + stats line --------------------------------------- */

.training26-content .training26-pdt-title {
    font-size: clamp(2rem, 3.5vw, 2.85rem);
    font-weight: 800;
    line-height: 1.1;
    color: #111;
    margin: 0 0 1rem;
    max-width: 720px;
}

.training26-content .training26-pdt-summary {
    color: #555;
    font-size: 1.05rem;
    line-height: 1.55;
    margin: 0 0 1.25rem;
    max-width: 760px;
}

/* The summary is RTE-sourced (repo shortDescription), so it may contain its
   own paragraphs - keep the outer 1.25rem gap as the only trailing space. */
.training26-content .training26-pdt-summary p {
    margin: 0 0 0.75em;
}

.training26-content .training26-pdt-summary p:last-child {
    margin-bottom: 0;
}

.training26-content .training26-pdt-stats {
    color: #555;
    font-size: 0.9rem;
    margin: 0 0 1.75rem;
}

.training26-content .training26-pdt-stats strong {
    color: #111;
    font-weight: 700;
}

.training26-content .training26-pdt-stats-sep {
    margin: 0 0.65rem;
    color: #c8c8c8;
}

/* When the sector aggregate is shown, it leads above the reviews line.
   Tighten the gap so the two paragraphs read as a stat block. */
.training26-content .training26-pdt-stats.training26-pdt-stats-sector {
    color: #6a6a6a;
    margin-bottom: 0.4rem;
}

.training26-content .training26-pdt-stats.training26-pdt-stats-sector + .training26-pdt-stats {
    margin-top: 0;
}


/* --- "What you'll learn" card ------------------------------------------- */

.training26-content .training26-pdt-outcomes {
    background-color: #f7f7f8;
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 1.5rem 1.5rem 1.25rem;
    margin: 0 0 2.5rem;
}

.training26-content .training26-pdt-eyebrow {
    color: var(--training26-primary-text);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    margin: 0 0 1rem;
}

.training26-content .training26-pdt-outcomes-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

/* Rich-text body variant of the "What you'll learn" card. Editors author a
   bulleted list in the RTE; each <li> gets the same pink tick as the stub
   list above without needing per-item markup. */
.training26-content .training26-pdt-outcomes-body {
    color: #2a2a2a;
    line-height: 1.55;
}

.training26-content .training26-pdt-outcomes-body ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.training26-content .training26-pdt-outcomes-body li {
    position: relative;
    padding-left: 2.15rem;
}

.training26-content .training26-pdt-outcomes-body li::before {
    content: "\2713"; /* ✓ - font-independent so it never renders as tofu */
    position: absolute;
    left: 0;
    top: 0.05rem;
    width: 1.4rem;
    height: 1.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background-color: #fde4ec;
    color: var(--training26-primary-text);
    font-size: 0.8rem;
    font-weight: 700;
}

.training26-content .training26-pdt-outcomes-body p:last-child {
    margin-bottom: 0;
}

.training26-content .training26-pdt-outcomes-list li {
    display: flex;
    align-items: flex-start;
    gap: 0.75rem;
    color: #2a2a2a;
    line-height: 1.55;
}

/* 2-column outcomes (trial for Rachel, 2026-07-21). `columns: <width> 2`
   sizes off the card itself, not the viewport: 2 columns only when each can
   be ≥21rem, otherwise a single column identical to the old flex layout -
   so narrow desktops, tablets and mobiles all degrade without breakpoints. */
.training26-content .training26-pdt-outcomes-list,
.training26-content .training26-pdt-outcomes-body ul {
    display: block; /* columns doesn't apply to flex */
    columns: 21rem 2;
    column-gap: 2.5rem;
}

.training26-content .training26-pdt-outcomes-list li,
.training26-content .training26-pdt-outcomes-body li {
    break-inside: avoid; /* never split a bullet across columns */
    margin-bottom: 0.75rem; /* replaces the flex gap */
}

.training26-content .training26-pdt-tick {
    flex-shrink: 0;
    width: 1.4rem;
    height: 1.4rem;
    border-radius: 50%;
    background-color: #fde4ec;
    color: var(--training26-primary-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.1rem;
    font-size: 0.7rem;
}


/* --- Tabs -------------------------------------------------------------- */

.training26-content .training26-pdt-tabs {
    margin: 0 0 1rem;
}

.training26-content .training26-pdt-tablist {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    gap: 0.25rem;
    border-bottom: 1px solid #e6e6e6;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    /* Hide scrollbar - overflow-x: auto can show a gutter on Windows even
       when content fits. Tabs still scroll horizontally if they ever overflow. */
    scrollbar-width: none;
}

.training26-content .training26-pdt-tablist::-webkit-scrollbar {
    display: none;
}

.training26-content .training26-pdt-tab {
    appearance: none;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: #555;
    /* Small caps to match the LEARNING OUTCOMES eyebrow (.training26-pdt-eyebrow) */
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    padding: 1rem 1.25rem;
    cursor: pointer;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    transition: color 0.15s, border-color 0.15s;
    margin-bottom: -1px;
}

.training26-content .training26-pdt-tab:hover {
    color: var(--training26-primary-text);
}

.training26-content .training26-pdt-tab.is-active {
    color: var(--training26-primary-text);
    border-bottom-color: var(--training26-primary-text);
}

.training26-content .training26-pdt-tab-count {
    background-color: #eef0f3;
    color: #555;
    font-size: 0.75rem;
    font-weight: 700;
    padding: 0.05rem 0.5rem;
    border-radius: 999px;
    line-height: 1.4;
}

.training26-content .training26-pdt-tabpanel {
    display: none;
    padding: 1.5rem 0 0;
}

.training26-content .training26-pdt-tabpanel.is-active {
    display: block;
}

.training26-content .training26-pdt-tab-meta {
    color: #555;
    font-size: 0.95rem;
    margin: 0 0 1rem;
}


/* --- Contents part list ------------------------------------------------
   Static list of part headings - no concertina. The accordion styles below
   are kept for any legacy <details> usage. */

.training26-content .training26-pdt-accordion {
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}

.training26-content ol.training26-pdt-contents-static {
    list-style: none;
    padding: 0;
    margin: 0;
}

.training26-content .training26-pdt-contents-static .training26-pdt-accordion-item {
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 600;
    color: #111;
}

.training26-content .training26-pdt-accordion-item {
    border: 1px solid #ececec;
    border-radius: 6px;
    background-color: #fff;
    overflow: hidden;
}

.training26-content .training26-pdt-accordion-item[open] {
    border-color: #d8d8db;
}

.training26-content .training26-pdt-accordion-summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    gap: 1rem;
    font-weight: 600;
    color: #111;
    transition: background-color 0.15s;
}

.training26-content .training26-pdt-accordion-summary::-webkit-details-marker {
    display: none;
}

.training26-content .training26-pdt-accordion-summary:hover {
    background-color: #fafafa;
}

.training26-content .training26-pdt-accordion-num {
    color: var(--training26-primary-text);
    font-weight: 800;
    font-size: 0.95rem;
    min-width: 1.5rem;
    flex-shrink: 0;
}

.training26-content .training26-pdt-accordion-title {
    flex: 1;
    line-height: 1.3;
}

.training26-content .training26-pdt-accordion-caret {
    color: #999;
    font-size: 0.85rem;
    transition: transform 0.2s;
}

.training26-content .training26-pdt-accordion-item[open] .training26-pdt-accordion-caret {
    transform: rotate(180deg);
}

.training26-content .training26-pdt-accordion-body {
    padding: 0.5rem 1.25rem 1.25rem;
    border-top: 1px solid #ececec;
    background-color: #fff;
}

.training26-content .training26-pdt-accordion-heading {
    color: #555;
    font-size: 0.85rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin: 0.75rem 0 0.5rem;
}

.training26-content .training26-pdt-accordion-topics {
    list-style: none;
    padding: 0;
    margin: 0;
}

.training26-content .training26-pdt-accordion-topics li {
    padding: 0.6rem 0;
    color: #2a2a2a;
    border-bottom: 1px solid #f3f3f4;
}

.training26-content .training26-pdt-accordion-topics li:last-child {
    border-bottom: none;
}


/* --- "What learners say" section --------------------------------------- */

.training26-content .training26-pdt-learners {
    margin: 3rem 0 0;
    padding-top: 2rem;
    border-top: 1px solid #ececec;
}

.training26-content .training26-pdt-learners-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1.25rem;
}

.training26-content .training26-pdt-learners-head h2 {
    font-size: 1.6rem;
    font-weight: 800;
    color: #111;
    margin: 0;
}

.training26-content .training26-pdt-learners-all {
    background: none;
    border: none;
    padding: 0;
    color: var(--training26-primary-text);
    font-weight: 600;
    font-size: 0.95rem;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.training26-content .training26-pdt-learners-all:hover {
    text-decoration: underline;
}


/* --- Reviews grid (used in the learners section) ----------------------- */

.training26-content .training26-pdt-reviews-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    margin: 0 0 1.25rem;
}

.training26-content .training26-pdt-reviews-count {
    color: #555;
    font-size: 0.95rem;
    margin: 0;
}

.training26-content .training26-pdt-reviews-sort select {
    appearance: none;
    border: 1px solid #d8d8db;
    border-radius: 6px;
    background-color: #fff;
    padding: 0.4rem 2rem 0.4rem 0.75rem;
    font-size: 0.85rem;
    color: #2a2a2a;
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath fill='%23555' d='M5 6L0 0h10z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.65rem center;
}

.training26-content .training26-pdt-reviews-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
}

@media (max-width: 767px) {
    .training26-content .training26-pdt-reviews-grid {
        grid-template-columns: 1fr;
    }
}

.training26-content .training26-pdt-review {
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 1.25rem 1.25rem 1rem;
    background-color: #fff;
}

.training26-content .training26-pdt-review-quote {
    color: #2a2a2a;
    font-style: italic;
    line-height: 1.6;
    margin: 0 0 1rem;
}

.training26-content .training26-pdt-review-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-top: 1px solid #ececec;
    padding-top: 0.85rem;
}

.training26-content .training26-pdt-avatar {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: #fde4ec;
    color: var(--training26-primary-text);
    font-weight: 700;
    font-size: 0.8rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.training26-content .training26-pdt-review-author-meta {
    line-height: 1.3;
    font-size: 0.9rem;
    color: #555;
}

.training26-content .training26-pdt-review-author-meta strong {
    color: #111;
    font-weight: 700;
    display: block;
}

.training26-content .training26-pdt-reviews-more {
    text-align: center;
    margin-top: 1.5rem;
}


/* --- FAQ tab ----------------------------------------------------------- */

.training26-content .training26-pdt-faq {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.training26-content .training26-pdt-faq-item {
    background-color: #f7f7f8;
    border: 1px solid #ececec;
    border-radius: 6px;
    overflow: hidden;
}

.training26-content .training26-pdt-faq-item[open] {
    background-color: #fff;
    border-color: #d8d8db;
}

.training26-content .training26-pdt-faq-summary {
    list-style: none;
    cursor: pointer;
    padding: 1rem 1.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    color: #2a2a2a;
    font-weight: 500;
}

.training26-content .training26-pdt-faq-summary::-webkit-details-marker {
    display: none;
}

.training26-content .training26-pdt-faq-item[open] .training26-pdt-faq-summary {
    color: var(--training26-primary-text);
    font-weight: 700;
}

.training26-content .training26-pdt-faq-caret {
    color: #999;
    font-size: 0.8rem;
    transition: transform 0.2s;
}

.training26-content .training26-pdt-faq-item[open] .training26-pdt-faq-caret {
    transform: rotate(180deg);
    color: var(--training26-primary-text);
}

.training26-content .training26-pdt-faq-body {
    padding: 0 1.25rem 1.25rem;
    color: #2a2a2a;
    line-height: 1.6;
    border-top: 1px solid #ececec;
    padding-top: 0.85rem;
}

.training26-content .training26-pdt-link,
.training26-content .training26-pdt-faq-body a {
    color: var(--training26-primary-text);
    font-weight: 700;
    text-decoration: none;
}

.training26-content .training26-pdt-link:hover,
.training26-content .training26-pdt-faq-body a:hover {
    color: var(--training26-primary-hover);
    text-decoration: underline;
}


/* --- Right-rail price box ---------------------------------------------- */

.training26-content .training26-pdt-price-box {
    border: 1px solid #ececec;
    border-radius: 10px;
    background-color: #fff;
    padding: 1.5rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.training26-content .training26-pdt-price-old {
    color: #999;
    font-size: 0.85rem;
    margin: 0 0 0.25rem;
}

.training26-content .training26-pdt-price {
    margin: 0 0 0.25rem;
    display: flex;
    align-items: baseline;
    gap: 0.5rem;
}

.training26-content .training26-pdt-price strong {
    color: #111;
    font-size: 2.25rem;
    font-weight: 800;
    line-height: 1.1;
}

.training26-content .training26-pdt-price span {
    color: #555;
    font-size: 0.9rem;
}

.training26-content .training26-pdt-price-note {
    color: #6d6d6d;
    font-size: 0.78rem;
    margin: 0 0 1rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.training26-content .training26-pdt-price-note img {
    width: 16px;
    height: auto;
}

.training26-content .training26-pdt-buy-form {
    margin: 0 0 0.5rem;
}

.training26-content .training26-btn-block {
    width: 100%;
    padding: 0.85rem 1rem;
    font-size: 1rem;
    gap: 0.55rem;
}

.training26-content .training26-pdt-rule {
    border: none;
    border-top: 1px solid #ececec;
    margin: 1.25rem 0 1rem;
}

.training26-content .training26-pdt-meta {
    margin: 0;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0;
}

.training26-content .training26-pdt-meta dt {
    /* #777 was too faint for caps this small (Rachel, 2026-07-20); #555 is
       the standard secondary-text grey used elsewhere on the page. */
    color: #555;
    font-size: 0.78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: 0.85rem;
}

.training26-content .training26-pdt-meta dt:first-child {
    margin-top: 0;
}

.training26-content .training26-pdt-meta dd {
    color: #2a2a2a;
    font-size: 0.92rem;
    line-height: 1.45;
    margin: 0.2rem 0 0;
}


/* --- Right-rail stats strip ------------------------------------------- */

.training26-content .training26-pdt-stats-strip {
    display: flex;
    align-items: center;
    justify-content: space-around;
    gap: 1rem;
    border: 1px solid #ececec;
    border-radius: 10px;
    background-color: #fff;
    padding: 0.85rem 1rem;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
}

.training26-content .training26-pdt-stats-strip > div {
    display: inline-flex;
    align-items: baseline;
    gap: 0.4rem;
    font-size: 0.85rem;
    color: #555;
}

.training26-content .training26-pdt-stats-strip i {
    color: var(--training26-primary-text);
}

.training26-content .training26-pdt-stats-strip strong {
    color: #111;
    font-weight: 700;
}


/* --- Right-rail team-quote card --------------------------------------- */

.training26-content .training26-pdt-team {
    border: 1px solid #fde4ec;
    border-radius: 10px;
    background-color: #fff5f8;
    padding: 1.25rem;
}

.training26-content .training26-pdt-team-title {
    margin: 0 0 0.25rem;
    font-weight: 700;
    color: #111;
}

.training26-content .training26-pdt-team-body {
    margin: 0 0 0.75rem;
    color: #555;
    font-size: 0.92rem;
}

.training26-content .training26-pdt-team-link {
    color: var(--training26-primary-text);
    font-weight: 700;
    text-decoration: none;
}

.training26-content .training26-pdt-team-link:hover {
    color: var(--training26-primary-hover);
    text-decoration: underline;
}


/* --- "Other courses" strip -------------------------------------------- */

.training26-content .training26-pdt-other {
    margin-top: 4rem;
    padding-top: 2rem;
    border-top: 1px solid #ececec;
}

.training26-content .training26-pdt-other-title {
    font-size: 1.5rem;
    font-weight: 800;
    color: #111;
    margin: 0 0 1.25rem;
}

.training26-content .training26-pdt-other-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

@media (max-width: 1199px) {
    .training26-content .training26-pdt-other-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .training26-content .training26-pdt-other-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .training26-content .training26-pdt-other-grid {
        grid-template-columns: 1fr;
    }
}


/* --- Mobile basket icon (header) --------------------------------------- */

.training26-mobile-basket-icon {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    height: 2.4rem;
    color: #1a1a1a;
    text-decoration: none;
    font-size: 1.1rem;
}

.training26-mobile-basket-icon:hover {
    color: var(--training26-primary-text);
}

.training26-mobile-basket-badge {
    position: absolute;
    top: 2px;
    right: 0;
    min-width: 1.1rem;
    height: 1.1rem;
    padding: 0 4px;
    border-radius: 999px;
    background-color: var(--training26-primary);
    color: #fff;
    font-size: 0.7rem;
    font-weight: 700;
    line-height: 1.1rem;
    text-align: center;
}


/* --- Mobile sticky bottom buy bar -------------------------------------- */

.training26-pdt-stickybuy {
    display: none;
}

@media (max-width: 991px) {
    .training26-pdt-stickybuy {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 1030;
        align-items: center;
        gap: 1rem;
        padding: 0.75rem 1rem;
        background-color: #fff;
        border-top: 1px solid #ececec;
        box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
    }

    .training26-pdt-stickybuy-price {
        flex: 0 0 auto;
        line-height: 1.2;
    }

    .training26-pdt-stickybuy-price strong {
        display: block;
        font-size: 1.25rem;
        font-weight: 800;
        color: #111;
    }

    .training26-pdt-stickybuy-price span {
        display: block;
        font-size: 0.78rem;
        color: #6d6d6d;
    }

    .training26-pdt-stickybuy-actions {
        flex: 1 1 auto;
        display: flex;
        /* Centre, don't stretch: stretching sizes the team <a> off the
           form's baseline-padded height and the buttons come out unequal. */
        align-items: center;
        gap: 0.5rem;
        min-width: 0;
    }

    .training26-pdt-stickybuy form {
        /* Secondary next to the team CTA; stretches only when it's the sole
           button (no team band on the course). display:flex kills the
           inline-flex baseline gap that otherwise makes the form ~8px taller
           than its button (and stretches the team CTA to match). */
        flex: 0 1 auto;
        display: flex;
        margin: 0;
    }
    /* Outranks `.training26-content .training26-pdt-buy-form` (margin-bottom
       0.5rem for the rail layout) - in the bar that margin made the row 8px
       taller than the buttons and knocked them out of alignment. */
    .training26-pdt-stickybuy .training26-pdt-buy-form { margin: 0; }
    .training26-pdt-stickybuy-actions form:only-child { flex: 1 1 auto; }

    .training26-pdt-stickybuy .training26-btn {
        width: 100%;
        /* training26-btn is inline-flex, which swallows the whitespace text
           node between the icon and the label. */
        gap: 0.45rem;
        white-space: nowrap;
        /* Legacy skin adds margin-top to anchor buttons, which made the
           team <a> sit 8px lower/taller than the form's <button>. */
        margin: 0;
    }

    /* "For a team" - the PRIMARY pink CTA (opens the how-to-pay drawer):
       nearly all sales are services buying offline, so the team path leads. */
    .training26-pdt-stickybuy-teambtn {
        flex: 1 1 auto;
        width: auto !important;
    }

    /* Personal card checkout - neutral secondary so the bar keeps a single
       pink CTA (Rachel's "2 pink buttons" rule). */
    .training26-pdt-stickybuy-mebtn {
        background: #fff;
        border: 2px solid #d8d8db;
        color: #16181d;
    }
    .training26-pdt-stickybuy-mebtn:hover {
        border-color: #16181d;
        background: #fff;
        color: #16181d;
    }
}

/* Phone widths: the base .training26-btn side padding (1.9rem) makes
   price + two buttons overflow a 375px bar - slim everything down. */
@media (max-width: 520px) {
    .training26-pdt-stickybuy { gap: 0.7rem; }
    .training26-pdt-stickybuy .training26-btn {
        padding: 0.7rem 0.8rem;
        font-size: 0.92rem;
    }
    /* The bag icon is the difference between fitting and overflowing a
       375px bar now the CTA reads "Buy for a team". */
    .training26-pdt-stickybuy-mebtn i { display: none; }
}


/* ==========================================================================
   Homepage (training26 redesign)
   Sections: hero, partner strip, featured courses, by library type, method,
   impact, feedback, big CTA banner, FAQs.
   ========================================================================== */

/* --- Shared section primitives ---------------------------------------- */

.training26-content .training26-hp-eyebrow {
    margin: 0 0 1rem;
    color: var(--training26-primary-text);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
}

.training26-content .training26-hp-section {
    padding: 4.5rem 0;
}

.training26-content .training26-hp-section-tinted {
    background-color: #f6f6f4;
}

.training26-content .training26-hp-section-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin: 0 0 2.5rem;
}

.training26-content .training26-hp-section-head-center {
    display: block;
    text-align: center;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}

.training26-content .training26-hp-section-head-center .training26-hp-eyebrow {
    margin-bottom: 0.5rem;
}

.training26-content .training26-hp-section-title {
    margin: 0;
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    line-height: 1.15;
    color: #111;
}

.training26-content .training26-hp-section-subtitle {
    margin: 0.75rem 0 0;
    color: #555;
    font-size: 1.05rem;
    line-height: 1.55;
}

.training26-content .training26-hp-section-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    color: var(--training26-primary-text) !important;
    text-decoration: none !important;
    font-size: 0.95rem;
    font-weight: 700;
    white-space: nowrap;
}

.training26-content .training26-hp-section-link:hover {
    color: var(--training26-primary-hover) !important;
    text-decoration: underline !important;
}

.training26-content .training26-hp-section-foot {
    margin-top: 2.5rem;
    text-align: center;
}

@media (max-width: 767.98px) {
    .training26-content .training26-hp-section { padding: 2.5rem 0; }
    .training26-content .training26-hp-section-head {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
        margin-bottom: 1.5rem;
    }
    .training26-content .training26-hp-section-foot { margin-top: 1.5rem; }
}


/* --- 1. Hero ----------------------------------------------------------- */

.training26-content .training26-hp-hero {
    background-color: #fafafa;
    padding: 4.5rem 0 0;
    /* No border-bottom - the dark partner strip is the section's own
       closing edge. */
}

.training26-content .training26-hp-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 3rem;
    align-items: center;
    padding-bottom: 4rem;
}

.training26-content .training26-hp-hero-title {
    margin: 0 0 1.5rem;
    font-size: clamp(2.25rem, 4.4vw, 3.75rem);
    font-weight: 800;
    line-height: 1.05;
    color: #111;
}

.training26-content .training26-hp-accent {
    color: var(--training26-primary-text);
}

.training26-content .training26-hp-hero-desc {
    margin: 0 0 2rem;
    color: #444;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 640px;
}

.training26-content .training26-hp-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 1.5rem;
}

.training26-content .training26-hp-hero-rating {
    margin: 0;
    color: #555;
    font-size: 0.95rem;
}

.training26-content .training26-hp-hero-rating strong {
    color: #111;
    font-weight: 700;
}

.training26-content .training26-hp-stars {
    color: #ec2669;
    margin-right: 0.4rem;
    letter-spacing: 0.1em;
}

.training26-content .training26-hp-hero-image {
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 4 / 3;
}

.training26-content .training26-hp-hero-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Neutral grey rendering - no pink tint, just light desaturation. */
    filter: contrast(0.95) brightness(1.02);
}

/* Hero description has a long (desktop) and a short (phone) variant -
   only one is visible at a time. */
.training26-content .training26-hp-hero-desc-short { display: none; }

@media (max-width: 991.98px) {
    .training26-content .training26-hp-hero { padding-top: 1.5rem; }
    .training26-content .training26-hp-hero-grid {
        grid-template-columns: 1fr;
        gap: 1.5rem;
        padding-bottom: 2.5rem;
    }
    .training26-content .training26-hp-hero .training26-hp-eyebrow { margin-bottom: 0.5rem; }
    .training26-content .training26-hp-hero-title { margin-bottom: 1rem; }
    .training26-content .training26-hp-hero-desc { margin-bottom: 1.5rem; }
    .training26-content .training26-hp-hero-actions { margin-bottom: 0; }
    /* Shorter, letterbox-cropped artwork on tablets. */
    .training26-content .training26-hp-hero-image { aspect-ratio: 16 / 9; }
}

@media (max-width: 767.98px) {
    /* Phones: the artwork is decorative filler here - drop it entirely so
       the partner strip and courses arrive a screen sooner. */
    .training26-content .training26-hp-hero-image { display: none; }
    .training26-content .training26-hp-hero-desc-full { display: none; }
    .training26-content .training26-hp-hero-desc-short { display: inline; }
    /* Full-width stacked CTAs. */
    .training26-content .training26-hp-hero-actions {
        flex-direction: column;
        gap: 0.75rem;
    }
    .training26-content .training26-hp-hero-actions .training26-btn { width: 100%; }
}

/* Partner strip below the hero - dark inverse band: white stat figures
   stacked over muted labels, CILIP badge separated by a hairline divider. */
.training26-content .training26-hp-strip {
    background-color: #161616;
    padding: 1.5rem 0;
}

.training26-content .training26-hp-strip-inner {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 2.5rem;
    flex-wrap: wrap;
}

.training26-content .training26-hp-strip-cilip {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding-right: 2.5rem;
    border-right: 1px solid rgba(255, 255, 255, 0.18);
}

.training26-content .training26-hp-strip-cilip img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    /* Faint ring so the dark navy badge doesn't melt into the dark strip. */
    box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.25);
}

.training26-content .training26-hp-strip-cilip strong {
    display: block;
    color: #fff;
    font-size: 0.95rem;
    line-height: 1.1;
}

.training26-content .training26-hp-strip-cilip span {
    color: #9a9a9a;
    font-size: 0.85rem;
}

.training26-content .training26-hp-strip-stats {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 2.5rem;
}

.training26-content .training26-hp-strip-stats li {
    color: #9a9a9a;
    font-size: 0.85rem;
}

.training26-content .training26-hp-strip-stats strong {
    display: block;
    color: #fff;
    font-weight: 800;
    font-size: 1.45rem;
    line-height: 1.1;
    margin: 0 0 0.2rem;
}

@media (max-width: 575.98px) {
    .training26-content .training26-hp-strip { padding: 1.5rem 0; }
    .training26-content .training26-hp-strip-inner { gap: 1.25rem; }
    /* Badge takes the full first row, closed off by a hairline rule -
       the side divider makes no sense once the stats wrap below it. */
    .training26-content .training26-hp-strip-cilip {
        width: 100%;
        padding-right: 0;
        border-right: 0;
        padding-bottom: 1.25rem;
        border-bottom: 1px solid rgba(255, 255, 255, 0.14);
    }
    .training26-content .training26-hp-strip-cilip strong {
        font-size: 1.1rem;
        margin-bottom: 0.15rem;
    }
    .training26-content .training26-hp-strip-cilip span { font-size: 0.9rem; }
    /* Fixed 2x2 grid instead of free flex-wrap so the four stats always
       land in two tidy rows rather than a ragged stack. */
    .training26-content .training26-hp-strip-stats {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem 1rem;
        width: 100%;
    }
    .training26-content .training26-hp-strip-stats li { font-size: 0.9rem; }
    .training26-content .training26-hp-strip-stats strong {
        font-size: 1.75rem;
        margin-bottom: 0.3rem;
    }
}


/* --- 2. Featured courses ---------------------------------------------- */

.training26-content .training26-hp-courses {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.training26-content .training26-hp-course {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit;
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}

.training26-content .training26-hp-course:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    transform: translateY(-2px);
    border-color: #d8d8d8;
}

.training26-content .training26-hp-course-image {
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f0f0f0;
}

.training26-content .training26-hp-course-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.training26-content .training26-hp-course-body {
    padding: 1.25rem 1.25rem 0.75rem;
    flex: 1 1 auto;
}

.training26-content .training26-hp-course-chips {
    list-style: none;
    margin: 0.85rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
}

.training26-content .training26-hp-course-chips li {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background-color: #eef0f3;
    color: #4a4a4a;
    font-size: 0.72rem;
    font-weight: 600;
    line-height: 1.3;
}

.training26-content .training26-hp-course-chips li.is-primary {
    background-color: #fde4ec;
    color: var(--training26-primary-text);
}

.training26-content .training26-hp-course-title {
    margin: 0 0 0.5rem;
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.25;
    color: #111;
}

.training26-content .training26-hp-course-summary {
    margin: 0;
    color: #555;
    font-size: 0.9rem;
    line-height: 1.5;
    /* Razor already trims the blurb to its first sentence; the clamp is a
       backstop so cards in the same row stay visually even. */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

/* Card foot: price with the hours line stacked left beneath it (Rachel,
   07 Aug 2026 - the currency flag line is gone; the course page carries the
   full currency note). Mobile compact rows override back to a single line. */
.training26-content .training26-hp-course-foot {
    padding: 0.85rem 1.25rem 1.1rem;
    margin-top: auto;
    border-top: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.25rem;
}

.training26-content .training26-hp-course-price strong {
    color: #111;
    font-weight: 800;
    font-size: 1.45rem;
    line-height: 1.1;
}

.training26-content .training26-hp-course-price {
    color: #6d6d6d;
    font-size: 0.9rem;
}

.training26-content .training26-hp-course-meta {
    color: #6d6d6d;
    font-size: 0.8rem;
    line-height: 1.5;
    text-align: left;
}

@media (max-width: 1199.98px) {
    .training26-content .training26-hp-courses { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767.98px) {
    /* Compact list rows on phones: square thumbnail down the left, title +
       price/meta on the right. Blurbs and the long audience chip are cut -
       the course page carries the detail; here the user just needs to scan
       and compare. */
    .training26-content .training26-hp-courses {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
    .training26-content .training26-hp-course {
        display: grid;
        grid-template-columns: 112px minmax(0, 1fr);
        grid-template-rows: auto auto;
        border-radius: 8px;
    }
    .training26-content .training26-hp-course-image {
        grid-row: 1 / span 2;
        height: 100%;
        aspect-ratio: auto;
    }
    .training26-content .training26-hp-course-body { padding: 0.85rem 0.95rem 0.35rem; }
    .training26-content .training26-hp-course-chips { margin: 0.45rem 0 0; }
    .training26-content .training26-hp-course-chips li.is-primary { display: none; }
    .training26-content .training26-hp-course-chips li {
        font-size: 0.66rem;
        padding: 0.2rem 0.55rem;
    }
    .training26-content .training26-hp-course-title {
        font-size: 1rem;
        margin-bottom: 0.35rem;
    }
    .training26-content .training26-hp-course-summary { display: none; }
    .training26-content .training26-hp-course-foot {
        border-top: 0;
        padding: 0 0.95rem 0.85rem;
        /* Compact rows: back to a single line each side (base is a column now). */
        flex-direction: row;
        justify-content: space-between;
        align-items: baseline;
        gap: 0.5rem;
        flex-wrap: wrap;
    }
    .training26-content .training26-hp-course-price strong { font-size: 1.1rem; }
    .training26-content .training26-hp-course-meta { font-size: 0.75rem; text-align: right; }
}


/* --- 3. By library type (sectors) ------------------------------------- */

.training26-content .training26-hp-sectors {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.training26-content .training26-hp-sector {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit;
    transition: box-shadow 0.15s, transform 0.15s;
}

.training26-content .training26-hp-sector:hover {
    box-shadow: 0 8px 24px rgba(0,0,0,0.06);
    transform: translateY(-2px);
}

.training26-content .training26-hp-sector-image {
    aspect-ratio: 16 / 10;
    background-color: #f0f0f0;
    overflow: hidden;
}

.training26-content .training26-hp-sector-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.training26-content .training26-hp-sector-body {
    padding: 1.25rem;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.training26-content .training26-hp-sector-title {
    margin: 0;
    font-size: 1.2rem;
    font-weight: 800;
    color: #111;
}

.training26-content .training26-hp-sector-desc {
    margin: 0;
    color: #555;
    font-size: 0.9rem;
    line-height: 1.5;
    /* Razor prefers the editor's cardText (first sentence of introText as
       fallback); clamp is the backstop that keeps the four cards even.
       4 lines: Rachel's 2026-08-05 card copy runs to four at this width. */
    display: -webkit-box;
    -webkit-line-clamp: 4;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.training26-content .training26-hp-sector-meta {
    margin: 0;
    color: #6d6d6d;
    font-size: 0.9rem;
}

.training26-content .training26-hp-sector-meta strong {
    color: #111;
    font-weight: 700;
}

.training26-content .training26-hp-sector-meta-sep {
    margin: 0 0.4rem;
    color: #ccc;
}

@media (max-width: 991.98px) {
    .training26-content .training26-hp-sectors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575.98px) {
    /* Same compact-row treatment as the featured courses: the four sector
       cards stacked full-size were ~4 screens of scrolling for what is
       really a navigation list. */
    .training26-content .training26-hp-sectors {
        grid-template-columns: 1fr;
        gap: 0.85rem;
    }
    .training26-content .training26-hp-sector {
        display: grid;
        grid-template-columns: 104px minmax(0, 1fr);
        border-radius: 8px;
    }
    .training26-content .training26-hp-sector-image {
        height: 100%;
        aspect-ratio: auto;
    }
    .training26-content .training26-hp-sector-body {
        padding: 0.85rem 0.95rem;
        gap: 0.3rem;
    }
    .training26-content .training26-hp-sector-title { font-size: 1.05rem; }
    .training26-content .training26-hp-sector-desc { display: none; }
}


/* --- 4. Method -------------------------------------------------------- */

.training26-content .training26-hp-method {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 3rem;
    align-items: center;
}

.training26-content .training26-hp-method-image {
    overflow: hidden;
    border-radius: 8px;
    aspect-ratio: 1 / 1;
}

.training26-content .training26-hp-method-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* :not() keeps the eyebrow out of this rule - it's also a <p>, and the
   element selector here would otherwise out-rank the pink eyebrow style. */
.training26-content .training26-hp-method-body p:not(.training26-hp-eyebrow) {
    color: #555;
    font-size: 1.1rem;
    line-height: 1.7;
    margin: 0 0 1.25rem;
}

.training26-content .training26-hp-method-body .training26-hp-section-title {
    margin-bottom: 1.5rem;
}

.training26-content .training26-hp-method-body .training26-hp-section-link {
    margin-top: 0.5rem;
    font-size: 1.05rem;
}

@media (max-width: 991.98px) {
    .training26-content .training26-hp-method {
        grid-template-columns: 1fr;
        gap: 1.5rem;
    }
    /* Text first on a phone - the copy is the point of this section; the
       square photo becomes a shorter 16:9 closer below it. */
    .training26-content .training26-hp-method-body { order: 1; }
    .training26-content .training26-hp-method-image {
        order: 2;
        aspect-ratio: 16 / 9;
    }
}


/* --- 5. Impact -------------------------------------------------------- */

.training26-content .training26-hp-impact {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 2rem;
    text-align: center;
    margin-top: 2rem;
}

.training26-content .training26-hp-impact > div {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.6rem;
}

.training26-content .training26-hp-impact strong {
    color: var(--training26-primary-text);
    font-size: clamp(3.5rem, 6vw, 5rem);
    font-weight: 800;
    line-height: 1;
}

.training26-content .training26-hp-impact span {
    color: #555;
    font-size: 1rem;
    line-height: 1.45;
    max-width: 18rem;
}

/* Each impact stat carries a long and a short label; phones show the short. */
.training26-content .training26-hp-impact-label-short { display: none; }

@media (max-width: 767.98px) {
    /* Keep the three columns side by side on phones - smaller figures with
       short centred captions underneath, per the 2026 mock. */
    .training26-content .training26-hp-impact {
        grid-template-columns: repeat(3, minmax(0, 1fr));
        gap: 1rem;
        margin-top: 1.5rem;
    }
    .training26-content .training26-hp-impact > div { gap: 0.5rem; }
    .training26-content .training26-hp-impact strong { font-size: 2.6rem; }
    .training26-content .training26-hp-impact span {
        font-size: 0.85rem;
        line-height: 1.4;
    }
    .training26-content .training26-hp-impact-label-full { display: none; }
    .training26-content .training26-hp-impact-label-short { display: inline; }
}


/* --- 6. Feedback ------------------------------------------------------ */

.training26-content .training26-hp-feedback {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.training26-content .training26-hp-quote {
    background-color: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
}

.training26-content .training26-hp-quote-mark {
    color: var(--training26-primary-text);
    font-size: 2.5rem;
    line-height: 1;
    font-family: Georgia, serif;
    margin-bottom: 0.25rem;
}

.training26-content .training26-hp-quote-body {
    color: #2a2a2a;
    font-style: italic;
    line-height: 1.6;
    margin: 0 0 1.25rem;
    flex: 1 1 auto;
}

.training26-content .training26-hp-quote-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-top: 1px solid #ececec;
    padding-top: 0.85rem;
}

.training26-content .training26-hp-quote-avatar {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: #fde4ec;
    color: var(--training26-primary-text);
    font-weight: 700;
    font-size: 0.8rem;
    /* CSS grid + place-items is the most reliable way to vertically centre
       single-line text inside a fixed-size circle - flex was leaving the
       glyphs slightly above the optical centre because of font metrics
       (ascender height vs the circle's geometric centre). */
    display: grid;
    place-items: center;
    line-height: 1;
    text-align: center;
    /* Pull the text down by half its over-lift so the optical centre lands
       on the geometric centre of the circle. */
    padding-top: 0.1em;
}

.training26-content .training26-hp-quote-author strong {
    color: #111;
    font-weight: 700;
    font-size: 0.95rem;
}

@media (max-width: 991.98px) {
    .training26-content .training26-hp-feedback {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .training26-content .training26-hp-quote { padding: 1.25rem; }
    /* Two quotes are plenty in a single column - the third is rendered but
       hidden. Note the "All customer feedback" link that used to carry the rest
       was removed in Aug 2026, so on mobile the third quote is simply not shown. */
    .training26-content .training26-hp-quote:nth-child(n+3) { display: none; }
}


/* --- 7. Big CTA banner ----------------------------------------------- */

.training26-content .training26-hp-bigcta {
    background-color: var(--training26-primary);
    color: #fff;
    text-align: center;
    padding: 4rem 0;
}

.training26-content .training26-hp-bigcta h2 {
    margin: 0 0 0.85rem;
    font-size: clamp(1.6rem, 2.6vw, 2.25rem);
    font-weight: 800;
    color: #fff;
    line-height: 1.2;
}

.training26-content .training26-hp-bigcta p {
    margin: 0 0 2rem;
    color: #fff; /* translucent white on the pink band fell below 4.5:1 */
    font-size: 1.05rem;
}

.training26-content .training26-hp-bigcta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.85rem;
}

.training26-content .training26-hp-btn-light {
    background-color: #fff;
    color: var(--training26-primary-text) !important;
    border: 2px solid #fff;
}

.training26-content .training26-hp-btn-light:hover {
    background-color: rgba(255,255,255,0.92);
    color: var(--training26-primary-hover) !important;
}

.training26-content .training26-hp-btn-ghost {
    background-color: transparent;
    color: #fff !important;
    border: 2px solid #fff;
}

.training26-content .training26-hp-btn-ghost:hover {
    background-color: rgba(255,255,255,0.12);
    color: #fff !important;
}

@media (max-width: 575.98px) {
    .training26-content .training26-hp-bigcta { padding: 2.75rem 0; }
    .training26-content .training26-hp-bigcta p { margin-bottom: 1.5rem; }
}


/* --- 8. FAQs ---------------------------------------------------------- */

.training26-content .training26-hp-section-faq {
    background-color: #fff;
}

/* The forced white above beats the (earlier, equal-specificity) tinted rule,
   which killed the "Tinted background" toggle on FAQ sections - reinstate it. */
.training26-content .training26-hp-section-faq.training26-hp-section-tinted {
    background-color: #f6f6f4;
}

.training26-content .training26-hp-faq-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr);
    gap: 3rem;
    align-items: start;
}

.training26-content .training26-hp-faq-intro p {
    color: #555;
    font-size: 1rem;
    line-height: 1.55;
    margin: 0.75rem 0 1.25rem;
}

.training26-content .training26-hp-faq-intro .training26-hp-section-link {
    font-size: 1rem;
}

.training26-content .training26-hp-faq-list details {
    border: 1px solid #ececec;
    border-radius: 8px;
    margin-bottom: 0.75rem;
    overflow: hidden;
    background: #fff;
}

.training26-content .training26-hp-faq-list details[open] {
    background: #fafafa;
}

.training26-content .training26-hp-faq-list summary {
    list-style: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    padding: 1rem 1.25rem;
    font-weight: 700;
    color: #111;
    font-size: 1rem;
}

.training26-content .training26-hp-faq-list summary::-webkit-details-marker {
    display: none;
}

.training26-content .training26-hp-faq-list details[open] summary {
    color: var(--training26-primary-text);
}

.training26-content .training26-hp-faq-list summary i {
    color: #999;
    font-size: 0.85rem;
    transition: transform 0.15s;
}

.training26-content .training26-hp-faq-list details[open] summary i {
    transform: rotate(180deg);
    color: var(--training26-primary-text);
}

.training26-content .training26-hp-faq-list details > p {
    margin: 0;
    padding: 0 1.25rem 1.25rem;
    color: #555;
    line-height: 1.6;
}

@media (max-width: 991.98px) {
    .training26-content .training26-hp-faq-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}


/* --- 9. Mobile action bar (homepage only) ----------------------------- */

@media (max-width: 767.98px) {
    .training26-content .training26-hp-actionbar {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 1030;
        display: flex;
        gap: 0.75rem;
        padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
        background-color: #fff;
        border-top: 1px solid #ececec;
        box-shadow: 0 -6px 20px rgba(0, 0, 0, 0.08);
    }

    .training26-content .training26-hp-actionbar .training26-btn {
        flex: 1 1 0;
        padding-left: 0.5rem;
        padding-right: 0.5rem;
        white-space: nowrap;
    }

    /* Reserve the bar's height below the footer so the last footer line
       can scroll fully clear of the fixed bar. */
    body:has(.training26-hp-actionbar) {
        padding-bottom: calc(4.75rem + env(safe-area-inset-bottom));
    }
}


/* ==========================================================================
   Buy For Team page (training26 redesign)
   Hero, packages, dashboard zigzag, customer stories, public-sector trust,
   quote form. Reuses .training26-hp-section / -head / -bigcta etc. for the
   shared rhythm.
   ========================================================================== */

/* --- 1. Hero ---------------------------------------------------------- */

.training26-content .training26-bft-hero {
    background-color: #fafafa;
    padding: 4rem 0;
    border-bottom: 1px solid #ececec;
}

.training26-content .training26-bft-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 3rem;
    align-items: center;
}

.training26-content .training26-bft-hero-title {
    margin: 0 0 1.5rem;
    font-size: clamp(2.25rem, 4.4vw, 3.75rem);
    font-weight: 800;
    line-height: 1.05;
    color: #111;
}

.training26-content .training26-bft-hero-desc {
    margin: 0 0 2rem;
    color: #444;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 640px;
}

.training26-content .training26-bft-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
    margin-bottom: 1.75rem;
}

.training26-content .training26-bft-hero-image {
    overflow: hidden;
    border-radius: 6px;
    aspect-ratio: 4 / 3;
}

.training26-content .training26-bft-hero-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.training26-content .training26-bft-trustline {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 1.75rem;
    color: #555;
    font-size: 0.9rem;
}

.training26-content .training26-bft-trustline strong {
    color: #111;
    font-weight: 700;
    margin-right: 0.25rem;
}

@media (max-width: 991.98px) {
    .training26-content .training26-bft-hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}


/* --- 2. How services buy: pyramid + variations + tailored callout ---- */

.training26-content .training26-bft-pyramid-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
    margin-bottom: 2.5rem;
}

.training26-content .training26-bft-pyramid {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.training26-content .training26-bft-pyramid-row {
    display: grid;
    grid-template-columns: 60% 40%;
    align-items: stretch;
    background: #fff;
    border-radius: 6px;
    overflow: hidden;
    border: 1px solid #ececec;
    min-height: 92px;
}

.training26-content .training26-bft-pyramid-bar {
    position: relative;
    width: var(--bar-width, 100%);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0.85rem 1.25rem;
    color: #fff;
    font-weight: 800;
}

.training26-content .training26-bft-pyramid-bar-top { background: var(--training26-primary); }
.training26-content .training26-bft-pyramid-bar-mid { background: #c4205a; }
.training26-content .training26-bft-pyramid-bar-bot { background: #921947; }

.training26-content .training26-bft-pyramid-count {
    font-size: 1.1rem;
    letter-spacing: 0.01em;
}

.training26-content .training26-bft-pyramid-label {
    padding: 0.85rem 1.25rem;
    background: #fafafa;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.training26-content .training26-bft-pyramid-label strong {
    color: #111;
    font-weight: 800;
    font-size: 1rem;
    margin-bottom: 0.15rem;
}

.training26-content .training26-bft-pyramid-label span {
    color: #555;
    font-size: 0.88rem;
    line-height: 1.35;
}

.training26-content .training26-bft-pyramid-caption {
    margin: 1.25rem 0 0;
    color: #555;
    font-style: italic;
    font-size: 0.95rem;
}

/* Other patterns */
.training26-content .training26-bft-patterns h3 {
    margin: 0 0 1.5rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: #111;
}

.training26-content .training26-bft-patterns dl {
    margin: 0;
}

.training26-content .training26-bft-patterns dt {
    color: #111;
    font-weight: 800;
    margin-bottom: 0.35rem;
    font-size: 1rem;
}

.training26-content .training26-bft-patterns dd {
    margin: 0 0 1.25rem;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.55;
}

.training26-content .training26-bft-patterns dd:last-child { margin-bottom: 0; }

/* Tailored quote callout (pink-bg banner under the pyramid) */
.training26-content .training26-bft-tailored {
    background: #fde4ec;
    border-radius: 12px;
    padding: 2rem 2.25rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}

.training26-content .training26-bft-tailored h3 {
    margin: 0 0 0.5rem;
    color: #111;
    font-size: 1.2rem;
    font-weight: 800;
}

.training26-content .training26-bft-tailored p {
    margin: 0;
    color: #444;
    font-size: 0.95rem;
    line-height: 1.55;
    max-width: 70ch;
}

.training26-content .training26-bft-tailored .training26-btn {
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .training26-content .training26-bft-pyramid-grid {
        grid-template-columns: 1fr;
        gap: 2.5rem;
    }
    .training26-content .training26-bft-pyramid-row {
        grid-template-columns: 55% 45%;
    }
    .training26-content .training26-bft-tailored {
        align-items: flex-start;
    }
}


/* --- 3. Evidence at scale ------------------------------------------- */

.training26-content .training26-bft-evidence {
    display: grid;
    grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
    gap: 3rem;
    align-items: start;
}

.training26-content .training26-bft-evidence-story h3 {
    margin: 0 0 1rem;
    font-size: 1.4rem;
    font-weight: 800;
    color: #111;
}

.training26-content .training26-bft-evidence-story p {
    margin: 0 0 0.85rem;
    color: #555;
    font-size: 1rem;
    line-height: 1.6;
}

.training26-content .training26-bft-evidence-story strong {
    color: var(--training26-primary-text);
    font-weight: 800;
    font-size: 1.1rem;
}

.training26-content .training26-bft-evidence-tag {
    color: #6d6d6d !important;
    font-style: italic;
    font-size: 0.95rem;
}

.training26-content .training26-bft-evidence-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.5rem;
}

.training26-content .training26-bft-evidence-stats > div {
    text-align: center;
}

.training26-content .training26-bft-evidence-stats strong {
    display: block;
    color: var(--training26-primary-text);
    font-size: clamp(2.5rem, 4.5vw, 3.5rem);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.5rem;
}

.training26-content .training26-bft-evidence-stats span {
    color: #555;
    font-size: 0.92rem;
    line-height: 1.4;
}

.training26-content .training26-bft-evidence-source {
    grid-column: 1 / -1;
    text-align: center;
    color: #6d6d6d;
    font-size: 0.95rem;
    margin: 1rem 0 0;
}

.training26-content .training26-bft-evidence-source strong {
    color: #111;
    font-weight: 700;
    font-size: inherit;
}

/* Testimonial variant: replaces the stats grid in the right-hand column.
   Deliberately unboxed - an open editorial quote balances the unboxed
   story text on the left (a bordered panel here reads lopsided). */
.training26-content .training26-bft-evidence-quote {
    margin: 0;
    padding: 0 0 0 3.25rem;
    position: relative;
}

.training26-content .training26-bft-evidence-quote .training26-hp-quote-mark {
    position: absolute;
    top: -0.35rem;
    left: 0;
    font-size: 3.5rem;
    line-height: 1;
}

.training26-content .training26-bft-evidence-quote blockquote {
    margin: 0 0 1.25rem;
    padding: 0;
    color: #2a2a2a;
    font-style: italic;
    font-size: 1.2rem;
    line-height: 1.65;
}

.training26-content .training26-bft-evidence-quote figcaption {
    color: #555;
    font-size: 0.95rem;
}

.training26-content .training26-bft-evidence-quote figcaption strong {
    display: block;
    color: #111;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .training26-content .training26-bft-evidence { grid-template-columns: 1fr; gap: 2rem; }
}

@media (max-width: 575.98px) {
    .training26-content .training26-bft-evidence-stats { grid-template-columns: 1fr; gap: 2rem; }
    .training26-content .training26-bft-evidence-quote {
        padding-left: 0;
    }
    .training26-content .training26-bft-evidence-quote blockquote {
        font-size: 1.1rem;
    }
    .training26-content .training26-bft-evidence-quote .training26-hp-quote-mark {
        position: static;
        display: block;
        margin-bottom: 0.5rem;
    }
}


/* --- 5. Approaches: pull-quote in the dashboard zigzag + Stirling box -- */

.training26-content .training26-bft-zig-pullquote {
    margin-top: 1.25rem;
    padding-left: 1rem;
    border-left: 3px solid var(--training26-primary);
    color: #555;
    font-style: italic;
    font-size: 0.95rem;
    line-height: 1.55;
}

.training26-content .training26-bft-pullquote {
    margin: 3rem 0 0;
    padding: 2rem 2.25rem;
    border: 2px solid var(--training26-primary);
    border-radius: 12px;
    background: #fff;
    position: relative;
}

.training26-content .training26-bft-pullquote .training26-hp-quote-mark {
    position: absolute;
    top: 1.25rem;
    left: 1.5rem;
    font-size: 2.5rem;
}

.training26-content .training26-bft-pullquote blockquote {
    margin: 0 0 1rem;
    padding: 0 0 0 2.5rem;
    color: #2a2a2a;
    font-style: italic;
    font-size: 1.05rem;
    line-height: 1.55;
}

.training26-content .training26-bft-pullquote figcaption {
    padding-left: 2.5rem;
    color: #555;
    font-size: 0.95rem;
}

.training26-content .training26-bft-pullquote figcaption strong {
    color: #111;
    font-weight: 700;
}

@media (max-width: 575.98px) {
    .training26-content .training26-bft-pullquote {
        padding: 1.5rem;
    }
    .training26-content .training26-bft-pullquote blockquote,
    .training26-content .training26-bft-pullquote figcaption {
        padding-left: 0;
    }
    .training26-content .training26-bft-pullquote .training26-hp-quote-mark {
        position: static;
        display: block;
        margin-bottom: 0.5rem;
    }
}


/* --- 6. Trust card extras (check icon variant) ---------------------- */

.training26-content .training26-bft-trust-icon-check {
    background: #d8f5dc;
    color: #1f7a37;
}


/* ==========================================================================
   Star Learners index (training26 redesign)
   Hero, sticky filter, featured-most-recent, card grid, big CTA, nominate
   form. Reuses .training26-hp-section / -bigcta / -hp-faq-list etc.
   ========================================================================== */

/* --- 1. Hero ---------------------------------------------------------- */

.training26-content .training26-sl-hero {
    background-color: #fafafa;
    padding: 4rem 0 3rem;
    border-bottom: 1px solid #ececec;
}

.training26-content .training26-sl-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, auto);
    gap: 2rem;
    align-items: center;
}

.training26-content .training26-sl-hero-title {
    margin: 0 0 1rem;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
    color: #111;
}

.training26-content .training26-sl-hero-desc {
    margin: 0;
    color: #444;
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 680px;
}

.training26-content .training26-sl-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.55rem 0.55rem 0.55rem 1.25rem;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 999px;
    color: #333 !important;
    text-decoration: none !important;
    font-size: 0.95rem;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.15s, transform 0.15s;
    white-space: nowrap;
}

.training26-content .training26-sl-hero-pill:hover {
    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
    transform: translateY(-1px);
}

.training26-content .training26-sl-hero-pill strong {
    color: var(--training26-primary-text);
    font-weight: 700;
}

.training26-content .training26-sl-hero-pill-icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--training26-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
}

@media (max-width: 767.98px) {
    .training26-content .training26-sl-hero-grid {
        grid-template-columns: 1fr;
    }
    .training26-content .training26-sl-hero-pill {
        white-space: normal;
        align-self: flex-start;
    }
}


/* --- 2. Filter (sticky) ---------------------------------------------- */

.training26-content .training26-sl-filterwrap {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(6px);
    border-bottom: 1px solid #ececec;
    padding: 0.85rem 0;
}

.training26-content .training26-sl-filterbar {
    display: flex;
    align-items: center;
    gap: 1rem;
}

.training26-content .training26-sl-filter-toggle {
    appearance: none;
    background: #f1f1f0;
    border: none;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.6rem;
    padding: 0.45rem 1.1rem;
    color: #333;
    font-weight: 600;
    font-size: 0.9rem;
    transition: background-color 0.15s;
}

.training26-content .training26-sl-filter-toggle:hover {
    background: #e6e6e3;
}

.training26-content .training26-sl-filter-label {
    color: #6d6d6d;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    flex-shrink: 0;
}

.training26-content .training26-sl-filter-current {
    color: var(--training26-primary-text);
    font-weight: 700;
    max-width: 15rem;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.training26-content .training26-sl-filter-chevron {
    display: inline-flex;
    align-items: center;
    color: #6d6d6d;
    font-size: 0.72rem;
    transition: transform 0.2s ease;
}

.training26-content .training26-sl-filterwrap.is-open .training26-sl-filter-chevron {
    transform: rotate(180deg);
}

.training26-content .training26-sl-filter-panel {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.28s ease;
}

.training26-content .training26-sl-filterwrap.is-open .training26-sl-filter-panel {
    max-height: 60vh;
}

.training26-content .training26-sl-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    padding-top: 0.85rem;
}

.training26-content .training26-sl-pill {
    appearance: none;
    background: #f1f1f0;
    border: none;
    color: #333;
    font-size: 0.88rem;
    font-weight: 600;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background-color 0.15s, color 0.15s;
}

.training26-content .training26-sl-pill:hover {
    background: #e6e6e3;
}

.training26-content .training26-sl-pill.is-active {
    background: var(--training26-primary);
    color: #fff;
}

.training26-content .training26-sl-pill-count {
    color: #6d6d6d;
    font-weight: 600;
    font-size: 0.82rem;
}

.training26-content .training26-sl-pill.is-active .training26-sl-pill-count {
    color: #fff;
}

.training26-content .training26-sl-filter-tally {
    color: #555;
    font-size: 0.95rem;
    margin-left: auto;
}

.training26-content .training26-sl-filter-tally strong {
    color: #111;
    font-weight: 700;
}

/* Mobile: reveal the filters as a single horizontal-swipe row so the
   expanded panel costs almost no vertical space. */
@media (max-width: 767.98px) {
    .training26-content .training26-sl-filterwrap.is-open .training26-sl-filter-panel {
        max-height: 5rem;
    }

    .training26-content .training26-sl-filter-pills {
        flex-wrap: nowrap;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 0.35rem;
    }

    .training26-content .training26-sl-filter-pills::-webkit-scrollbar {
        display: none;
    }

    .training26-content .training26-sl-pill {
        flex: 0 0 auto;
    }
}


/* --- 3. Featured / Most-recent --------------------------------------- */

.training26-content .training26-sl-featuredwrap {
    padding: 2.5rem 0;
}

.training26-content .training26-sl-featured {
    display: grid;
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
    gap: 2.5rem;
    align-items: center;
    background: #fff;
    border: 1px solid var(--training26-primary);
    border-radius: 14px;
    overflow: hidden;
}

.training26-content .training26-sl-featured-image {
    display: block;
    overflow: hidden;
    aspect-ratio: 4 / 3;
    background: #f0f0f0;
}

.training26-content .training26-sl-featured-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

.training26-content .training26-sl-featured-body {
    padding: 2rem 2.25rem 2rem 0;
}

.training26-content .training26-sl-featured-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: #fde4ec;
    color: var(--training26-primary-text);
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    margin-bottom: 1rem;
}

.training26-content .training26-sl-featured-title {
    margin: 0 0 1rem;
    font-size: clamp(1.5rem, 2.6vw, 2.1rem);
    font-weight: 800;
    line-height: 1.15;
    color: #111;
}

.training26-content .training26-sl-featured-title a {
    color: inherit !important;
    text-decoration: none !important;
}

.training26-content .training26-sl-featured-title a:hover {
    color: var(--training26-primary-text) !important;
}

.training26-content .training26-sl-meta {
    list-style: none;
    margin: 0 0 1.25rem;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem 1.25rem;
    color: #555;
    font-size: 0.92rem;
}

.training26-content .training26-sl-meta li {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.training26-content .training26-sl-meta i {
    color: var(--training26-primary-text);
    font-size: 0.85rem;
}

.training26-content .training26-sl-featured-desc {
    margin: 0 0 1.25rem;
    color: #444;
    font-size: 1rem;
    line-height: 1.6;
}

.training26-content .training26-sl-took {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.4rem 0.85rem;
    border-radius: 999px;
    background: #fde4ec;
    color: var(--training26-primary-text) !important;
    text-decoration: none !important;
    font-size: 0.9rem;
    font-weight: 600;
    margin-bottom: 1.25rem;
}

.training26-content .training26-sl-took i {
    font-size: 0.85rem;
}

.training26-content .training26-sl-took:hover {
    background: #fbcdd9;
    /* the darker hover tint drops the chip pink to 4.0:1 - deepen to compensate */
    color: #b80f4d !important;
}

.training26-content .training26-sl-took-archived {
    background: #ececec;
    color: #555 !important;
    cursor: default;
}

.training26-content .training26-sl-featured-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem;
}

@media (max-width: 991.98px) {
    .training26-content .training26-sl-featured {
        grid-template-columns: 1fr;
    }
    .training26-content .training26-sl-featured-body {
        padding: 1.5rem;
    }
}


/* --- 4. All-other-posts grid ----------------------------------------- */

.training26-content .training26-sl-gridwrap {
    padding-top: 2rem;
}

.training26-content .training26-sl-gridhead {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
}

.training26-content .training26-sl-gridhead-tally {
    color: #6d6d6d;
    font-size: 0.9rem;
}

.training26-content .training26-sl-gridhead-tally strong {
    color: #111;
    font-weight: 700;
}

.training26-content .training26-sl-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.training26-content .training26-sl-card {
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none !important;
    color: inherit;
    transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}

.training26-content .training26-sl-card:hover {
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.06);
    transform: translateY(-2px);
    border-color: #d8d8d8;
}

.training26-content .training26-sl-card-image {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    background: #f0f0f0;
}

.training26-content .training26-sl-card-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Anchor crop to the top of the image so portrait shots don't lose
       the subject's head when the source is taller than 4:3. */
    object-position: center top;
}

.training26-content .training26-sl-card-body {
    padding: 1.1rem 1.25rem 0.5rem;
    flex: 1 1 auto;
}

.training26-content .training26-sl-card-title {
    margin: 0 0 0.4rem;
    font-size: 1.1rem;
    font-weight: 800;
    color: #111;
    line-height: 1.2;
}

.training26-content .training26-sl-card-meta {
    margin: 0 0 0.35rem;
    color: #555;
    font-size: 0.88rem;
}

.training26-content .training26-sl-card-additional {
    margin: 0 0 0.5rem;
    color: var(--training26-primary-text);
    font-size: 0.82rem;
    font-weight: 600;
}

.training26-content .training26-sl-card-text {
    margin: 0;
    color: #555;
    font-size: 0.92rem;
    line-height: 1.5;
}

.training26-content .training26-sl-card-foot {
    padding: 0.85rem 1.25rem 1.1rem;
    margin-top: auto;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
}

.training26-content .training26-sl-card-coursetag {
    display: inline-block;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    background: #fde4ec;
    color: var(--training26-primary-text);
    font-size: 0.75rem;
    font-weight: 600;
    line-height: 1.3;
}

.training26-content .training26-sl-card-readmore {
    color: var(--training26-primary-text);
    font-weight: 700;
    font-size: 0.9rem;
}

.training26-content .training26-sl-grid-empty {
    grid-column: 1 / -1;
    text-align: center;
    margin: 2rem 0 0;
    color: #6d6d6d;
}

.training26-content .training26-sl-grid-empty-reset {
    appearance: none;
    background: none;
    border: none;
    color: var(--training26-primary-text);
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    padding: 0;
}

@media (max-width: 991.98px) {
    .training26-content .training26-sl-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
    .training26-content .training26-sl-grid { grid-template-columns: 1fr; }
    .training26-content .training26-sl-gridhead { flex-direction: column; align-items: flex-start; }
}


/* --- 5. Big CTA ------------------------------------------------------ */

.training26-content .training26-sl-cta {
    background-color: var(--training26-primary);
    color: #fff;
    padding: 3rem 0;
    margin-top: 2rem;
}

.training26-content .training26-sl-cta-inner {
    display: grid;
    grid-template-columns: minmax(0, 1.6fr) minmax(0, auto);
    gap: 2rem;
    align-items: center;
    border-radius: 12px;
}

.training26-content .training26-sl-cta-inner h2 {
    margin: 0 0 0.5rem;
    color: #fff;
    font-size: clamp(1.4rem, 2.4vw, 1.8rem);
    font-weight: 800;
    line-height: 1.2;
}

.training26-content .training26-sl-cta-inner p {
    margin: 0;
    color: #fff; /* translucent white on the pink band fell below 4.5:1 */
    font-size: 1rem;
    line-height: 1.55;
}

@media (max-width: 767.98px) {
    .training26-content .training26-sl-cta-inner {
        grid-template-columns: 1fr;
    }
}


/* --- 6. Nominate form ------------------------------------------------ */

.training26-content .training26-sl-nominate {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 3rem;
    align-items: start;
}

.training26-content .training26-sl-nominate-intro p {
    color: #555;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0.85rem 0;
}

.training26-content .training26-sl-form-help {
    color: #6d6d6d;
    font-size: 0.82rem;
    margin-top: 0.35rem;
    display: block;
}

@media (max-width: 991.98px) {
    .training26-content .training26-sl-nominate { grid-template-columns: 1fr; }
}


/* --- 3. Dashboard zigzag --------------------------------------------- */

.training26-content .training26-bft-dashsection .training26-hp-section-head {
    margin-bottom: 4rem;
}

.training26-content .training26-bft-zig {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
    gap: 4rem;
    align-items: center;
    margin-bottom: 4rem;
}

.training26-content .training26-bft-zig:last-child { margin-bottom: 0; }

.training26-content .training26-bft-zig-reverse .training26-bft-zig-body { order: 2; }
.training26-content .training26-bft-zig-reverse .training26-bft-mock { order: 1; }

.training26-content .training26-bft-zig-title {
    margin: 0 0 1rem;
    font-size: clamp(1.5rem, 2.4vw, 2rem);
    font-weight: 800;
    line-height: 1.2;
    color: #111;
}

.training26-content .training26-bft-zig-body p {
    color: #555;
    font-size: 1rem;
    line-height: 1.65;
    margin: 0 0 1.5rem;
}

.training26-content .training26-bft-features {
    list-style: none;
    margin: 0;
    padding: 0;
}

.training26-content .training26-bft-features li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.55rem 0;
    color: #2a2a2a;
    font-size: 0.95rem;
    line-height: 1.5;
}

.training26-content .training26-bft-features li > span {
    flex-shrink: 0;
    font-size: 1.1rem;
    line-height: 1.4;
}

.training26-content .training26-bft-features strong {
    color: #111;
    font-weight: 700;
}

@media (max-width: 991.98px) {
    .training26-content .training26-bft-zig {
        grid-template-columns: 1fr;
        gap: 1.75rem;
        margin-bottom: 3rem;
    }
    .training26-content .training26-bft-zig-reverse .training26-bft-zig-body { order: 1; }
    .training26-content .training26-bft-zig-reverse .training26-bft-mock { order: 2; }
}


/* --- Real screenshot tile + click-to-zoom lightbox ------------------- */

.training26-content .training26-bft-mockimg {
    position: relative;
    display: block;
    background: #f1f1f0;
    border-radius: 12px;
    padding: 1.75rem;
    cursor: zoom-in;
    overflow: hidden;
    text-decoration: none !important;
    transition: box-shadow 0.15s, transform 0.15s;
}

.training26-content .training26-bft-mockimg:hover {
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.training26-content .training26-bft-mockimg img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
    background: #fff;
}

.training26-content .training26-bft-mockimg-zoom {
    position: absolute;
    bottom: 1rem;
    right: 1rem;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: 6px;
    background: rgba(0, 0, 0, 0.6);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    opacity: 0;
    transition: opacity 0.15s;
    pointer-events: none;
}

.training26-content .training26-bft-mockimg:hover .training26-bft-mockimg-zoom,
.training26-content .training26-bft-mockimg:focus-visible .training26-bft-mockimg-zoom {
    opacity: 1;
}

/* Fullscreen overlay - built by JS, attached to <body>. */
.training26-bft-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.88);
    z-index: 2000;
    display: none;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    cursor: zoom-out;
}

.training26-bft-lightbox.is-open {
    display: flex;
}

.training26-bft-lightbox img {
    max-width: 100%;
    max-height: 100%;
    display: block;
    border-radius: 6px;
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.5);
}


/* --- Dashboard mock window (illustrative only - kept in case it's
       ever wanted again; the live page now uses real screenshots). ----- */

.training26-content .training26-bft-mock {
    background: #f1f1f0;
    border-radius: 12px;
    padding: 1.75rem;
    aspect-ratio: 5 / 4;
    display: flex;
    flex-direction: column;
}

.training26-content .training26-bft-mock-chrome {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    background: #fff;
    border: 1px solid #ececec;
    border-bottom: none;
    border-radius: 8px 8px 0 0;
    padding: 0.65rem 0.85rem;
}

.training26-content .training26-bft-mock-chrome > span {
    width: 0.55rem;
    height: 0.55rem;
    border-radius: 50%;
    background: #d6d6d6;
}

.training26-content .training26-bft-mock-title {
    margin-left: auto;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    background: none !important;
    color: #6d6d6d;
    font-size: 0.78rem;
}

.training26-content .training26-bft-mock-body {
    flex: 1 1 auto;
    background: #fff;
    border: 1px solid #ececec;
    border-top: none;
    border-radius: 0 0 8px 8px;
    padding: 1.25rem 1.25rem 1.5rem;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.training26-content .training26-bft-mock-chip {
    align-self: flex-start;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    background: #fde4ec;
    color: var(--training26-primary-text);
    font-size: 0.78rem;
    font-weight: 600;
}

.training26-content .training26-bft-mock-rows {
    display: flex;
    flex-direction: column;
    gap: 0.55rem;
}

.training26-content .training26-bft-mock-rows > div {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.training26-content .training26-bft-mock-bar {
    flex: 1 1 auto;
    height: 0.6rem;
    border-radius: 999px;
    background: #ececec;
}

.training26-content .training26-bft-mock-bar.is-pink { background: #fde4ec; max-width: 22%; }
.training26-content .training26-bft-mock-bar.is-green { background: #d8f5dc; max-width: 22%; }

.training26-content .training26-bft-mock-table {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.training26-content .training26-bft-mock-tablehead {
    display: grid;
    grid-template-columns: 1fr 1fr 0.6fr;
    gap: 1rem;
    color: #6d6d6d;
    font-size: 0.78rem;
    border-bottom: 1px solid #ececec;
    padding-bottom: 0.4rem;
}

.training26-content .training26-bft-mock-tablerow {
    display: grid;
    grid-template-columns: 1fr 1fr 0.6fr;
    gap: 1rem;
    align-items: center;
}

.training26-content .training26-bft-mock-tiles {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.85rem;
}

.training26-content .training26-bft-mock-tiles > div {
    background: #fafafa;
    border: 1px solid #f0f0f0;
    border-radius: 6px;
    padding: 0.85rem 1rem;
}

.training26-content .training26-bft-mock-tiles strong {
    display: block;
    color: var(--training26-primary-text);
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
}

.training26-content .training26-bft-mock-tiles span {
    color: #6d6d6d;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
}


/* --- 4. Customer stories --------------------------------------------- */

.training26-content .training26-bft-stories {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1.5rem;
}

.training26-content .training26-bft-story {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

.training26-content .training26-bft-story > header {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    padding: 1.25rem;
    border-bottom: 1px solid #ececec;
}

.training26-content .training26-bft-story > header strong {
    display: block;
    color: #111;
    font-size: 1rem;
    margin-bottom: 0.15rem;
}

.training26-content .training26-bft-story > header span {
    display: block;
    color: #6d6d6d;
    font-size: 0.85rem;
    line-height: 1.4;
}

.training26-content .training26-bft-story .training26-hp-quote-mark {
    margin: 1.25rem 1.25rem 0;
}

.training26-content .training26-bft-story-quote {
    padding: 0 1.25rem;
    margin: 0 0 0.75rem;
    color: #2a2a2a;
    font-style: italic;
    line-height: 1.55;
}

.training26-content .training26-bft-story > p:not(.training26-bft-story-quote) {
    padding: 0 1.25rem 1.25rem;
    margin: 0;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.55;
    flex: 1 1 auto;
}

.training26-content .training26-bft-story > footer {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0.75rem;
    padding: 1rem 1.25rem 1.25rem;
    background: #fafafa;
    border-top: 1px solid #ececec;
}

.training26-content .training26-bft-story > footer strong {
    display: block;
    color: var(--training26-primary-text);
    font-size: 1.1rem;
    font-weight: 800;
    line-height: 1.2;
}

.training26-content .training26-bft-story > footer span {
    display: block;
    color: #6d6d6d;
    font-size: 0.7rem;
    letter-spacing: 0.08em;
    /* The inherited line-height computes against the card's body text, which
       makes wrapped labels ("BRANCHES & MOBILES") gape - size it locally. */
    line-height: 1.4;
}

@media (max-width: 991.98px) {
    .training26-content .training26-bft-stories { grid-template-columns: 1fr; }
}


/* --- 5. Public-sector trust ------------------------------------------ */

.training26-content .training26-bft-trust {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

.training26-content .training26-bft-trust article {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 1.5rem;
}

.training26-content .training26-bft-trust h3 {
    margin: 1rem 0 0.5rem;
    font-size: 1.05rem;
    font-weight: 800;
    color: #111;
}

.training26-content .training26-bft-trust p {
    margin: 0;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.55;
}

.training26-content .training26-bft-trust-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 3rem;
    height: 3rem;
    border-radius: 10px;
    background: #fde4ec;
    color: var(--training26-primary-text);
    font-size: 1.1rem;
}

.training26-content .training26-bft-trust-icon-cilip {
    background: #2f6f80;
    color: #fff;
    border-radius: 50%;
}

.training26-content .training26-bft-trust-icon-cilip span {
    font-size: 0.55rem;
    font-weight: 700;
    line-height: 1.1;
    text-align: center;
    letter-spacing: 0.05em;
}

.training26-content .training26-bft-trust-icon-text {
    background: #fde4ec;
}

.training26-content .training26-bft-trust-icon-text span {
    color: var(--training26-primary-text);
    font-weight: 800;
    font-size: 0.95rem;
    letter-spacing: 0.05em;
}

@media (max-width: 991.98px) {
    .training26-content .training26-bft-trust { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 480px) {
    .training26-content .training26-bft-trust { grid-template-columns: 1fr; }
}


/* --- 6. Quote form --------------------------------------------------- */

.training26-content .training26-bft-quote {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr);
    gap: 3rem;
    align-items: start;
}

.training26-content .training26-bft-quote-intro p {
    color: #555;
    font-size: 1rem;
    line-height: 1.6;
    margin: 1rem 0 1.5rem;
}

.training26-content .training26-bft-quote-direct {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.training26-content .training26-bft-quote-direct li {
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.training26-content .training26-bft-quote-direct strong {
    display: block;
    color: #111;
    font-size: 0.95rem;
}

.training26-content .training26-bft-quote-direct a {
    color: var(--training26-primary-text) !important;
    text-decoration: none !important;
    font-weight: 600;
}

.training26-content .training26-bft-quote-direct-icon {
    width: 2.5rem;
    height: 2.5rem;
    border-radius: 10px;
    background: #fde4ec;
    color: var(--training26-primary-text);
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.training26-content .training26-bft-form {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 2rem;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    /* Force native widgets (input/select/textarea) to render light-mode
       chrome regardless of OS dark-mode preference - without this, Chromium
       auto-darkens fields even though we've set #fff backgrounds. */
    color-scheme: light;
}

/* minmax(0, …) is load-bearing: a bare 1fr is minmax(auto, 1fr), and a
   <select> refuses to shrink below its widest <option> - the long package
   option (~430px) was forcing the whole page wider than phone viewports,
   which in turn broke every position:fixed element (mobile menu). */
.training26-content .training26-bft-form-row {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 1.25rem;
}

.training26-content .training26-bft-form label {
    display: flex;
    flex-direction: column;
    gap: 0.45rem;
}

.training26-content .training26-bft-form label > span {
    color: #6d6d6d;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.training26-content .training26-bft-form input,
.training26-content .training26-bft-form select,
.training26-content .training26-bft-form textarea {
    width: 100%;
    min-width: 0;
    padding: 0.7rem 0.85rem;
    border: 1px solid #d8d8db;
    border-radius: 6px;
    /* !important here because Chromium's auto-dark-mode for native widgets
       beats normal author styles, even with color-scheme on the parent. */
    background-color: #fff !important;
    color: #2a2a2a !important;
    color-scheme: light;
    font-size: 0.95rem;
    font-family: inherit;
}

.training26-content .training26-bft-form input:focus,
.training26-content .training26-bft-form select:focus,
.training26-content .training26-bft-form textarea:focus {
    outline: none;
    border-color: var(--training26-primary);
    box-shadow: 0 0 0 3px rgba(236, 38, 105, 0.15);
}

.training26-content .training26-bft-form textarea { resize: vertical; }

.training26-content .training26-bft-form-submit {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
}

.training26-content .training26-bft-form-note {
    color: #6d6d6d;
    font-size: 0.9rem;
}

@media (max-width: 991.98px) {
    .training26-content .training26-bft-quote { grid-template-columns: 1fr; }
    .training26-content .training26-bft-form-row { grid-template-columns: minmax(0, 1fr); }
}


/* ==========================================================================
   Star Learner detail (training26 redesign)
   Single-learner page rendered as a partial from store26StarLearners.cshtml
   when Model.CurrentStarLearnerPage is set. Uses the `sld` prefix to keep
   classes distinct from the index `sl-` rules.
   ========================================================================== */

/* --- 1. Breadcrumb --------------------------------------------------- */

.training26-content .training26-sld-breadcrumb {
    margin: 0 auto;
    padding-top: 1.5rem;
    padding-bottom: 1.25rem;
    font-size: 0.9rem;
    color: #6d6d6d;
}

.training26-content .training26-sld-breadcrumb ol {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 0.75rem;
}

.training26-content .training26-sld-breadcrumb li {
    display: inline-flex;
    align-items: center;
}

.training26-content .training26-sld-breadcrumb li + li::before {
    content: "›";
    margin-right: 0.75rem;
    color: #c0c0c0;
}

.training26-content .training26-sld-breadcrumb a {
    color: #6d6d6d !important;
    text-decoration: none !important;
}

.training26-content .training26-sld-breadcrumb a:hover {
    color: var(--training26-primary-text) !important;
}

.training26-content .training26-sld-breadcrumb [aria-current="page"] {
    color: #111;
    font-weight: 700;
}


/* --- 2. Two-column body --------------------------------------------- */

.training26-content .training26-sld-wrap {
    padding-bottom: 4rem;
}

.training26-content .training26-sld-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 380px;
    gap: 3rem;
    align-items: start;
}

@media (max-width: 991px) {
    .training26-content .training26-sld-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}


/* --- Left column (main) --------------------------------------------- */

.training26-content .training26-sld-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.training26-content .training26-sld-eyebrow i {
    font-size: 0.7rem;
}

.training26-content .training26-sld-name {
    margin: 0 0 1.75rem;
    font-size: clamp(2.25rem, 4vw, 3.25rem);
    font-weight: 800;
    line-height: 1.05;
    color: #111;
}

/* Info table - definition list dressed up as rows. */
.training26-content .training26-sld-info {
    margin: 0 0 2rem;
    display: grid;
    grid-template-columns: minmax(120px, auto) 1fr;
    column-gap: 1.25rem;
    row-gap: 0;
}

.training26-content .training26-sld-info dt {
    border-top: 1px solid #ececec;
    padding: 0.95rem 0;
    color: #555;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    display: flex;
    align-items: center;
    gap: 0.65rem;
}

.training26-content .training26-sld-info dd {
    border-top: 1px solid #ececec;
    padding: 0.95rem 0;
    margin: 0;
    color: #111;
    font-size: 1rem;
}

.training26-content .training26-sld-info dt:first-of-type,
.training26-content .training26-sld-info dt:first-of-type + dd {
    border-top: none;
}

.training26-content .training26-sld-info dd strong {
    display: block;
    color: #111;
    font-weight: 700;
}

.training26-content .training26-sld-info-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.7rem;
    height: 1.7rem;
    border-radius: 6px;
    background: #fde4ec;
    color: var(--training26-primary-text);
    font-size: 0.75rem;
}

.training26-content .training26-sld-info-sub {
    display: block;
    color: var(--training26-primary-text) !important;
    text-decoration: none !important;
    font-size: 0.92rem;
    font-weight: 600;
    margin-top: 0.2rem;
}

.training26-content .training26-sld-info-sub:hover {
    text-decoration: underline !important;
}

.training26-content .training26-sld-info-sub-plain {
    display: block;
    color: #6d6d6d;
    font-size: 0.92rem;
    margin-top: 0.2rem;
    font-weight: 500;
}

.training26-content .training26-sld-info-coursename {
    color: var(--training26-primary-text) !important;
    text-decoration: none !important;
    font-weight: 800;
    font-size: 1.05rem;
}

.training26-content .training26-sld-info-coursename:hover {
    text-decoration: underline !important;
}

.training26-content .training26-sld-info-coursearchived {
    color: #555 !important;
}

/* Pull quote */
.training26-content .training26-sld-quote {
    position: relative;
    margin: 0 0 2.5rem;
    padding: 1.75rem 2rem 1.5rem;
    background: #fde4ec;
    border-left: 4px solid var(--training26-primary);
    border-radius: 0 12px 12px 0;
}

.training26-content .training26-sld-quote-mark {
    position: absolute;
    top: 0.75rem;
    left: 1.5rem;
    color: var(--training26-primary-text);
    font-family: Georgia, serif;
    font-size: 2.5rem;
    line-height: 1;
}

.training26-content .training26-sld-quote blockquote {
    margin: 1.5rem 0 1rem;
    padding: 0;
    color: #2a2a2a;
    font-style: italic;
    font-size: 1.15rem;
    line-height: 1.55;
}

.training26-content .training26-sld-quote figcaption {
    color: #555;
    font-size: 0.95rem;
}

.training26-content .training26-sld-quote figcaption strong {
    color: #111;
    font-weight: 700;
}

/* Main body - author HTML in `starLearnerHtml`. */
.training26-content .training26-sld-body {
    color: #2a2a2a;
    font-size: 1rem;
    line-height: 1.7;
    margin-bottom: 2.5rem;
}

.training26-content .training26-sld-body p {
    margin: 0 0 1.25rem;
}
/* Anne 12 Aug: no bold pull-out emphasis in story prose - "a section to
   read, not a big sales push". Presentational only, so the semantic <strong>
   stays in the content; pull-quote attribution names (figcaption) keep their
   bold. */
.training26-content .training26-sld-body p strong,
.training26-content .training26-sld-body li strong {
    font-weight: inherit;
}

.training26-content .training26-sld-body a {
    color: var(--training26-primary-text);
    font-weight: 600;
    text-decoration: underline;
}

.training26-content .training26-sld-body strong {
    color: #111;
    font-weight: 700;
}

.training26-content .training26-sld-body h2 {
    margin: 2.5rem 0 1rem;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.2;
    color: #111;
    display: flex;
    align-items: center;
    gap: 0.85rem;
}

.training26-content .training26-sld-body h2 .num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.1rem;
    height: 2.1rem;
    padding: 0 0.45rem;
    border-radius: 6px;
    background: #fde4ec;
    color: var(--training26-primary-text);
    font-weight: 800;
    font-size: 0.9rem;
    letter-spacing: 0.04em;
}

.training26-content .training26-sld-body h3 {
    margin: 2rem 0 0.85rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: #111;
}

.training26-content .training26-sld-body ul {
    margin: 0 0 1.5rem;
    padding-left: 1.25rem;
}

.training26-content .training26-sld-body li {
    margin-bottom: 0.5rem;
}

/* Takeaways block - renders the editor's <div class="takeaways">…</div>. */
.training26-content .training26-sld-body .takeaways {
    margin: 2rem 0;
    padding: 1.5rem 1.75rem;
    background: #fafaf7;
    border: 1px solid #ececec;
    border-radius: 12px;
}

.training26-content .training26-sld-body .takeaways .label {
    margin: 0 0 0.4rem;
    color: var(--training26-primary-text);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.training26-content .training26-sld-body .takeaways h3 {
    margin: 0 0 1rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: #111;
}

.training26-content .training26-sld-body .takeaways ul {
    margin: 0;
    padding: 0;
    list-style: none;
}

.training26-content .training26-sld-body .takeaways li {
    position: relative;
    padding: 0.45rem 0 0.45rem 1.85rem;
    font-size: 0.95rem;
    line-height: 1.55;
}

.training26-content .training26-sld-body .takeaways li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0.55rem;
    color: var(--training26-primary-text);
    font-weight: 700;
    font-size: 0.95rem;
}

/* Editor uses Bootstrap-ish utility classes for the closing testimonial
   paragraph. Style them to match the rest of the article. */
.training26-content .training26-sld-body .text-secondary { color: #6d6d6d !important; }
.training26-content .training26-sld-body .fst-italic { font-style: italic; }
.training26-content .training26-sld-body .small { font-size: 0.92rem; }

/* Single editorial image inside a Star Learner body */
.training26-sld-body .training26-sld-figure {
    margin: 2rem 0;
}

.training26-sld-body .training26-sld-figure img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 0.5rem;
    cursor: zoom-in;
}

.training26-sld-body .training26-sld-figure figcaption {
    margin-top: 0.5rem;
    font-size: 0.92rem;
    font-style: italic;
    color: #6c757d;
}

/* Narrow variant for portrait-orientation editorial images */
.training26-sld-body .training26-sld-figure--narrow {
    max-width: 420px;
    margin-left: auto;
    margin-right: auto;
}

/* Editorial image pair (e.g. before/after) inside a Star Learner body */
.training26-sld-body .training26-sld-figure-pair {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1rem;
    margin: 2rem 0;
}

.training26-sld-body .training26-sld-figure-pair figure {
    margin: 0;
}

.training26-sld-body .training26-sld-figure-pair img {
    width: 100%;
    aspect-ratio: 4 / 3;
    object-fit: cover;
    display: block;
    border-radius: 0.5rem;
    cursor: zoom-in;
}

.training26-sld-body .training26-sld-figure-pair figcaption {
    margin-top: 0.5rem;
    font-size: 0.92rem;
    font-style: italic;
    color: #6c757d; /* matches Bootstrap text-secondary used elsewhere */
}

/* Stack on narrow screens */
@media (max-width: 576px) {
    .training26-sld-body .training26-sld-figure-pair {
        grid-template-columns: 1fr;
    }
}

/* Lightbox - click any Star Learner story image to view it full-size */
.training26-sld-lightbox {
    position: fixed;
    inset: 0;
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 2rem;
    background: rgba(0, 0, 0, 0.9);
    cursor: zoom-out;
}

.training26-sld-lightbox[hidden] {
    display: none;
}

.training26-sld-lightbox img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
    border-radius: 0.4rem;
    box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
}

.training26-sld-lightbox-close {
    position: absolute;
    top: 1rem;
    right: 1.5rem;
    font-size: 2.25rem;
    line-height: 1;
    color: #fff;
    background: none;
    border: none;
    cursor: pointer;
    opacity: 0.85;
}

.training26-sld-lightbox-close:hover {
    opacity: 1;
}


/* --- Prev / Next ----------------------------------------------------- */

.training26-content .training26-sld-prevnext {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 1.25rem;
    border-top: 1px solid #ececec;
    padding-top: 2rem;
    margin-top: 1rem;
}

.training26-content .training26-sld-prev,
.training26-content .training26-sld-next {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 1.25rem 1.5rem;
    border: 1px solid #ececec;
    border-radius: 10px;
    text-decoration: none !important;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.training26-content .training26-sld-next {
    text-align: right;
}

.training26-content .training26-sld-prev:hover,
.training26-content .training26-sld-next:hover {
    border-color: var(--training26-primary);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.04);
}

.training26-content .training26-sld-prevnext-dir {
    color: #6d6d6d;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.training26-content .training26-sld-prevnext-name {
    color: #111;
    font-size: 1.05rem;
    font-weight: 800;
}

.training26-content .training26-sld-prevnext-meta {
    color: #6d6d6d;
    font-size: 0.88rem;
}

@media (max-width: 575.98px) {
    .training26-content .training26-sld-prevnext {
        grid-template-columns: 1fr;
    }
}


/* --- Right rail ----------------------------------------------------- */

.training26-content .training26-sld-rail {
    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.training26-content .training26-sld-rail-image {
    overflow: hidden;
    border-radius: 12px;
    aspect-ratio: 4 / 5;
    background: #f0f0f0;
}

.training26-content .training26-sld-rail-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center top;
}

/* Course details card */
.training26-content .training26-sld-rail-course {
    padding: 1.5rem 1.5rem 1.25rem;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
}

.training26-content .training26-sld-rail-tag {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.3rem 0.75rem;
    margin-bottom: 1rem;
    border-radius: 999px;
    background: #fde4ec;
    color: var(--training26-primary-text);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.1em;
}

.training26-content .training26-sld-rail-tag-archived {
    background: #ececec;
    color: #555;
}

.training26-content .training26-sld-rail-course h3 {
    margin: 0 0 0.65rem;
    font-size: 1.25rem;
    font-weight: 800;
    color: #111;
    line-height: 1.2;
}

.training26-content .training26-sld-rail-course-desc {
    margin: 0 0 1rem;
    color: #555;
    font-size: 0.92rem;
    line-height: 1.5;
}

.training26-content .training26-sld-rail-course-price {
    margin: 0 0 1rem;
    color: #555;
    font-size: 0.95rem;
    border-bottom: 1px solid #ececec;
    padding-bottom: 1rem;
}

.training26-content .training26-sld-rail-course-price strong {
    color: #111;
    font-weight: 800;
    font-size: 1.5rem;
}

.training26-content .training26-sld-rail-course-meta {
    margin: 0 0 1.25rem;
    display: grid;
    gap: 0.65rem;
}

.training26-content .training26-sld-rail-course-meta dt {
    color: #6d6d6d;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin: 0;
}

.training26-content .training26-sld-rail-course-meta dd {
    margin: 0.15rem 0 0;
    color: #2a2a2a;
    font-size: 0.95rem;
}

.training26-content .training26-sld-rail-course-actions {
    display: flex;
    flex-direction: column;
    gap: 0.6rem;
}

.training26-content .training26-sld-rail-btn {
    width: 100%;
    text-align: center;
}

/* Flex buttons swallow the whitespace text node between icon and label. */
.training26-content .training26-sld-rail-btn i {
    margin-right: 0.5rem;
}

/* Talk-to-{name} card */
.training26-content .training26-sld-rail-talk {
    padding: 1.25rem 1.5rem;
    background: #fafaf7;
    border: 1px solid #ececec;
    border-radius: 12px;
}

.training26-content .training26-sld-rail-talk-eyebrow {
    margin: 0 0 0.5rem;
    color: #555;
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.training26-content .training26-sld-rail-talk p {
    margin: 0 0 0.85rem;
    color: #555;
    font-size: 0.95rem;
    line-height: 1.5;
}

.training26-content .training26-sld-rail-talk-link {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.6rem 0.95rem;
    border: 1px solid #ececec;
    border-radius: 999px;
    background: #fff;
    color: var(--training26-primary-text) !important;
    text-decoration: none !important;
    font-weight: 600;
    font-size: 0.92rem;
    transition: border-color 0.15s, background-color 0.15s;
}

.training26-content .training26-sld-rail-talk-link:hover {
    border-color: var(--training26-primary);
    background: #fff5f8;
}


/* --- 3. More on this course strip ------------------------------------ */

.training26-content .training26-sld-more {
    padding-top: 3rem;
}

.training26-content .training26-sld-more-head {
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 1.5rem;
    margin-bottom: 2rem;
}

/* Override the shared 3-col grid - the detail page's "More on this course"
   strip wants 4 across so it sits as a single row of compact cards. */
.training26-content .training26-sld-more .training26-sl-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.25rem;
}

@media (max-width: 1199.98px) {
    .training26-content .training26-sld-more .training26-sl-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 767.98px) {
    .training26-content .training26-sld-more .training26-sl-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .training26-content .training26-sld-more .training26-sl-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575.98px) {
    .training26-content .training26-sld-more-head {
        flex-direction: column;
        align-items: flex-start;
    }
}


/* ==========================================================================
   Customer Feedback page (training26 redesign)
   Hero with stats + 3 starter quotes, sticky course/region filter, masonry
   grid of quote cards, country grouping, share-your-experience form.
   ========================================================================== */

/* --- Country code badge - shared across cards / pills / source lines --- */

.training26-content .training26-cf-cc {
    display: inline-block;
    margin-right: 0.4rem;
    padding: 0.05rem 0.35rem;
    border-radius: 3px;
    background-color: #ececec;
    color: #555;
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    vertical-align: 0.1em;
}


/* --- 1. Hero -------------------------------------------------------- */

.training26-content .training26-cf-hero {
    background-color: #fafafa;
    padding: 4rem 0 3rem;
    border-bottom: 1px solid #ececec;
}

.training26-content .training26-cf-hero-head {
    display: grid;
    grid-template-columns: minmax(0, 1.4fr) minmax(0, auto);
    gap: 2rem;
    align-items: center;
    margin-bottom: 2.5rem;
}

.training26-content .training26-cf-hero-title {
    margin: 0 0 1rem;
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    line-height: 1.05;
    color: #111;
}

.training26-content .training26-cf-hero-desc {
    margin: 0;
    color: #444;
    font-size: 1.05rem;
    line-height: 1.6;
    max-width: 680px;
}

.training26-content .training26-cf-hero-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.6rem 0.6rem 0.6rem 1.5rem;
    background: transparent;
    border: 1px solid var(--training26-primary);
    border-radius: 999px;
    color: var(--training26-primary-text) !important;
    text-decoration: none !important;
    font-size: 0.95rem;
    font-weight: 700;
    transition: background-color 0.15s, color 0.15s;
    white-space: nowrap;
}

.training26-content .training26-cf-hero-pill:hover {
    background: var(--training26-primary);
    color: #fff !important;
}

.training26-content .training26-cf-hero-pill:hover .training26-cf-hero-pill-icon {
    background: #fff;
    color: var(--training26-primary-text);
}

.training26-content .training26-cf-hero-pill-icon {
    width: 2.2rem;
    height: 2.2rem;
    border-radius: 50%;
    background: var(--training26-primary);
    color: #fff;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0.85rem;
    flex-shrink: 0;
    transition: background-color 0.15s, color 0.15s;
}

@media (max-width: 767.98px) {
    .training26-content .training26-cf-hero-head {
        grid-template-columns: 1fr;
    }
    .training26-content .training26-cf-hero-pill {
        align-self: flex-start;
        white-space: normal;
    }
}

/* Hero stats strip */
.training26-content .training26-cf-hero-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 1.5rem 1.75rem;
    margin-bottom: 2rem;
}

.training26-content .training26-cf-hero-stats > div {
    display: flex;
    flex-direction: column;
    line-height: 1.2;
    border-left: 1px solid #ececec;
    padding-left: 1.5rem;
}

.training26-content .training26-cf-hero-stats > div:first-child {
    border-left: none;
    padding-left: 0;
}

.training26-content .training26-cf-hero-stats strong {
    color: var(--training26-primary-text);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    line-height: 1;
    margin-bottom: 0.4rem;
}

.training26-content .training26-cf-hero-stats span {
    color: #111;
    font-weight: 700;
    font-size: 0.95rem;
}

.training26-content .training26-cf-hero-stats small {
    color: #6d6d6d;
    font-size: 0.82rem;
    margin-top: 0.15rem;
}

@media (max-width: 767.98px) {
    .training26-content .training26-cf-hero-stats {
        grid-template-columns: 1fr 1fr;
        gap: 1.25rem;
    }
    .training26-content .training26-cf-hero-stats > div {
        border-left: none;
        padding-left: 0;
    }
}

/* Hero starter quotes - 3 across */
.training26-content .training26-cf-hero-starters {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 1.25rem;
}

.training26-content .training26-cf-starter {
    position: relative;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 1.5rem 1.5rem 1.25rem;
}

.training26-content .training26-cf-starter-mark {
    color: var(--training26-primary-text);
    font-family: Georgia, serif;
    font-size: 2.5rem;
    line-height: 1;
}

.training26-content .training26-cf-starter-quote {
    margin: 0.25rem 0 1.5rem;
    color: #2a2a2a;
    font-style: italic;
    line-height: 1.55;
    font-size: 0.98rem;
    /* Cap the visible block so unusually long quotes don't blow out the
       hero card heights. */
    display: -webkit-box;
    -webkit-line-clamp: 8;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.training26-content .training26-cf-starter-author {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    border-top: 1px solid #ececec;
    padding-top: 0.85rem;
}

.training26-content .training26-cf-starter-author strong {
    display: block;
    color: #111;
    font-size: 0.95rem;
}

.training26-content .training26-cf-starter-author span {
    color: #555;
    font-size: 0.85rem;
}

.training26-content .training26-cf-avatar {
    flex-shrink: 0;
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background-color: #fde4ec;
    color: var(--training26-primary-text);
    font-weight: 700;
    font-size: 0.78rem;
    display: grid;
    place-items: center;
    line-height: 1;
}

@media (max-width: 991.98px) {
    .training26-content .training26-cf-hero-starters { grid-template-columns: 1fr; }
}


/* --- 2. Filter bar - sticky ---------------------------------------- */

.training26-content .training26-cf-filterwrap {
    position: sticky;
    top: 0;
    z-index: 10;
    background: rgba(255, 255, 255, 0.97);
    backdrop-filter: blur(8px);
    border-bottom: 1px solid #ececec;
    padding: 0.85rem 0;
}

.training26-content .training26-cf-filter {
    display: flex;
    flex-direction: column;
    gap: 0.65rem;
}

.training26-content .training26-cf-filter-row {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    flex-wrap: wrap;
}

.training26-content .training26-cf-filter-label {
    color: #6d6d6d;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    flex-shrink: 0;
    min-width: 60px;
}

.training26-content .training26-cf-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    flex: 1 1 auto;
}

.training26-content .training26-cf-pill {
    appearance: none;
    background: #f1f1f0;
    border: none;
    color: #333;
    font-size: 0.86rem;
    font-weight: 600;
    padding: 0.35rem 0.85rem;
    border-radius: 999px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    transition: background-color 0.15s, color 0.15s;
}

.training26-content .training26-cf-pill > span:not(.training26-cf-cc) {
    color: #6d6d6d;
    font-weight: 700;
    font-size: 0.78rem;
}

.training26-content .training26-cf-pill:hover {
    background: #e6e6e3;
}

.training26-content .training26-cf-pill.is-active {
    background: var(--training26-primary);
    color: #fff;
}

.training26-content .training26-cf-pill.is-active > span:not(.training26-cf-cc) {
    color: rgba(255, 255, 255, 0.85);
}

.training26-content .training26-cf-pill.is-active .training26-cf-cc {
    background: rgba(255, 255, 255, 0.25);
    color: #fff;
}

.training26-content .training26-cf-search {
    margin-left: auto;
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    background: #fff;
    border: 1px solid #d8d8db;
    border-radius: 999px;
    padding: 0.35rem 0.95rem;
    color: #6d6d6d;
    transition: border-color 0.15s, box-shadow 0.15s;
    min-width: 240px;
}

.training26-content .training26-cf-search:focus-within {
    border-color: var(--training26-primary);
    box-shadow: 0 0 0 3px rgba(236, 38, 105, 0.15);
}

.training26-content .training26-cf-search input {
    border: none;
    outline: none;
    /* !important + color-scheme so Chromium's auto-dark-mode for native
       inputs doesn't paint the search field black even though the parent
       wrapper is white. Same pattern as the Buy For Team form. */
    background: transparent !important;
    color: #2a2a2a !important;
    color-scheme: light;
    font-size: 0.92rem;
    width: 100%;
}

.training26-content .training26-cf-search input::placeholder {
    color: #999;
}

@media (max-width: 767.98px) {
    .training26-content .training26-cf-search {
        margin-left: 0;
        width: 100%;
    }
}


/* --- 3. Quote grid - masonry via CSS columns ----------------------- */

.training26-content .training26-cf-gridwrap {
    padding-top: 2rem;
}

.training26-content .training26-cf-resultcount {
    margin: 0 0 1.5rem;
    color: #555;
    font-size: 0.95rem;
}

.training26-content .training26-cf-resultcount strong {
    color: #111;
    font-weight: 700;
}

.training26-content .training26-cf-grid {
    column-count: 3;
    column-gap: 1.25rem;
}

@media (max-width: 991.98px) {
    .training26-content .training26-cf-grid { column-count: 2; }
}

@media (max-width: 575.98px) {
    .training26-content .training26-cf-grid { column-count: 1; }
}

.training26-content .training26-cf-card {
    display: block;
    break-inside: avoid;
    margin: 0 0 1.25rem;
    padding: 1.5rem 1.5rem 1.25rem;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    position: relative;
}

.training26-content .training26-cf-card-mark {
    color: var(--training26-primary-text);
    font-family: Georgia, serif;
    font-size: 1.6rem;
    line-height: 1;
    margin-right: 0.25rem;
}

.training26-content .training26-cf-card-quote {
    display: inline;
    color: #2a2a2a;
    font-style: italic;
    line-height: 1.55;
    font-size: 0.95rem;
}

.training26-content .training26-cf-card-foot {
    margin-top: 1.25rem;
    padding-top: 0.85rem;
    border-top: 1px solid #ececec;
}

.training26-content .training26-cf-card-foot strong {
    display: block;
    color: #111;
    font-size: 0.95rem;
    margin-bottom: 0.15rem;
}

.training26-content .training26-cf-card-place {
    color: #6d6d6d;
    font-size: 0.85rem;
}

.training26-content .training26-cf-card-tag {
    display: inline-block;
    margin-top: 0.85rem;
    padding: 0.3rem 0.85rem;
    border-radius: 999px;
    background: #fde4ec;
    color: var(--training26-primary-text) !important;
    text-decoration: none !important;
    font-size: 0.78rem;
    font-weight: 600;
}

a.training26-content .training26-cf-card-tag:hover,
.training26-content .training26-cf-card-tag:hover {
    background: #fbcdd9;
}

/* Empty-state message + reset */
.training26-content .training26-cf-empty {
    text-align: center;
    padding: 3rem 1rem;
    color: #6d6d6d;
}

.training26-content .training26-cf-empty-reset {
    appearance: none;
    background: none;
    border: none;
    color: var(--training26-primary-text);
    font-weight: 700;
    cursor: pointer;
    text-decoration: underline;
    margin-left: 0.4rem;
    padding: 0;
}


/* --- 4. Countries section ------------------------------------------- */

.training26-content .training26-cf-countries {
    padding-top: 3rem;
    padding-bottom: 3rem;
}

.training26-content .training26-cf-country-pills {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 0.5rem;
    margin-top: 2rem;
}

.training26-content .training26-cf-country-pills .training26-cf-pill {
    background: #fff;
    border: 1px solid #ececec;
}

.training26-content .training26-cf-country-pills .training26-cf-pill:hover {
    border-color: #d8d8d8;
    background: #fafafa;
}

.training26-content .training26-cf-country-pills .training26-cf-pill.is-active {
    background: var(--training26-primary);
    border-color: var(--training26-primary);
    color: #fff;
}

.training26-content .training26-cf-pill-clear {
    color: #6d6d6d;
    font-size: 0.78rem;
}


/* --- 5. Share form -------------------------------------------------- */

.training26-content .training26-cf-share {
    background-color: #fafaf7;
}

.training26-content .training26-cf-share-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    gap: 3rem;
    align-items: start;
}

.training26-content .training26-cf-share-intro p {
    color: #555;
    font-size: 1rem;
    line-height: 1.6;
    margin: 0.85rem 0;
}

.training26-content .training26-cf-share-aside {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    padding-top: 0.5rem;
}

.training26-content .training26-cf-share-star {
    color: #f5b400;
    font-size: 1.1rem;
    flex-shrink: 0;
}

.training26-content .training26-cf-share-aside a {
    color: var(--training26-primary-text);
    text-decoration: none;
}

.training26-content .training26-cf-share-aside a:hover {
    text-decoration: underline;
}

.training26-content .training26-cf-share-consent {
    display: flex;
    align-items: flex-start;
    gap: 0.65rem;
    color: #555;
    font-size: 0.92rem;
    line-height: 1.4;
}

.training26-content .training26-cf-share-consent input[type="checkbox"] {
    margin-top: 0.2rem;
    flex-shrink: 0;
}

@media (max-width: 991.98px) {
    .training26-content .training26-cf-share-grid { grid-template-columns: 1fr; }
}


/* ==========================================================================
   Authors page (training26 redesign)
   Hero ("the team behind the courses") + per-person profile sections for
   Rachel / Anne / Fiona. Reuses .training26-hp-eyebrow, .training26-btn,
   and .training26-hp-bigcta from elsewhere in this file.
   ========================================================================== */

/* --- 1. Hero ---------------------------------------------------------- */

.training26-content .training26-au-hero {
    background-color: #fafafa;
    padding: 4rem 0 3rem;
    border-bottom: 1px solid #ececec;
}

.training26-content .training26-au-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr);
    gap: 3rem;
    align-items: center;
}

.training26-content .training26-au-hero-title {
    margin: 0 0 1.5rem;
    font-size: clamp(2.25rem, 4.4vw, 3.5rem);
    font-weight: 800;
    line-height: 1.05;
    color: #111;
}

.training26-content .training26-au-hero-lede {
    margin: 0 0 2rem;
    color: #444;
    font-size: 1.1rem;
    line-height: 1.6;
    max-width: 640px;
}

/* The lede is rich text (Aug 2026), so it supplies its own paragraphs. Space
   them, and drop the trailing margin so the block spacing above still holds. */
.training26-content .training26-au-hero-lede p {
    margin: 0 0 1rem;
}

.training26-content .training26-au-hero-lede p:last-child {
    margin-bottom: 0;
}

.training26-content .training26-au-hero-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 0.85rem;
}

.training26-content .training26-au-hero-figure {
    position: relative;
}

.training26-content .training26-au-hero-image {
    overflow: hidden;
    border-radius: 14px;
    aspect-ratio: 4 / 3;
    background: #f0f0f0;
}

.training26-content .training26-au-hero-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.training26-content .training26-au-hero-tags {
    list-style: none;
    margin: 1rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.training26-content .training26-au-hero-tags li {
    flex: 1 1 0;
    min-width: 0;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 10px;
    padding: 0.65rem 0.85rem;
    text-align: center;
}

.training26-content .training26-au-hero-tags strong {
    display: block;
    color: #111;
    font-size: 0.92rem;
    font-weight: 700;
    line-height: 1.2;
}

.training26-content .training26-au-hero-tags span {
    display: block;
    color: var(--training26-primary-text);
    font-size: 0.78rem;
    font-weight: 600;
    margin-top: 0.15rem;
    letter-spacing: 0.04em;
}

/* Stats strip below the hero */
.training26-content .training26-au-hero-stats {
    list-style: none;
    margin: 3rem 0 0;
    padding: 1.5rem 0 0;
    border-top: 1px solid #ececec;
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1.5rem;
}

.training26-content .training26-au-hero-stats li {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
}

.training26-content .training26-au-hero-stats strong {
    color: var(--training26-primary-text);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    font-weight: 800;
    line-height: 1;
}

.training26-content .training26-au-hero-stats span {
    color: #111;
    font-size: 0.95rem;
    font-weight: 700;
    margin-top: 0.35rem;
}

.training26-content .training26-au-hero-stats em {
    color: #6d6d6d;
    font-size: 0.85rem;
    font-style: normal;
    line-height: 1.3;
}

@media (max-width: 991.98px) {
    .training26-content .training26-au-hero { padding: 2.5rem 0 2rem; }
    .training26-content .training26-au-hero-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
    .training26-content .training26-au-hero-stats {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 1.25rem;
        margin-top: 2rem;
    }
}

@media (max-width: 575.98px) {
    .training26-content .training26-au-hero-tags { flex-direction: column; }
    .training26-content .training26-au-hero-tags li { flex: 0 0 auto; }
}


/* --- 2. Per-person profile sections ----------------------------------- */

.training26-content .training26-au-person {
    padding: 4.5rem 0;
    background: #fff;
    scroll-margin-top: 5rem;
}

.training26-content .training26-au-person-tinted {
    background: #f6f6f4;
}

.training26-content .training26-au-person-grid {
    display: grid;
    grid-template-columns: minmax(0, 320px) minmax(0, 1fr);
    gap: 3rem;
    align-items: start;
}

@media (max-width: 991.98px) {
    .training26-content .training26-au-person { padding: 3rem 0; }
    .training26-content .training26-au-person-grid {
        grid-template-columns: 1fr;
        gap: 2rem;
    }
}

/* Aside: image + info table ------------------------------------------ */

.training26-content .training26-au-person-aside {
    position: sticky;
    top: 5rem;
    align-self: start;
}

@media (max-width: 991.98px) {
    .training26-content .training26-au-person-aside {
        position: static;
    }
}

/* Portrait - vertical arch (pill on top, slight rounding bottom) */
.training26-content .training26-au-person-image {
    overflow: hidden;
    border-radius: 16px;
    aspect-ratio: 4 / 5;
    background: #f3f3f3;
    margin-bottom: 1.5rem;
}

.training26-content .training26-au-person-image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* "What X leads" panel - under portrait */
.training26-content .training26-au-leads {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 14px;
    padding: 1.25rem 1.25rem 0.5rem;
}

.training26-content .training26-au-leads-head {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    margin: 0 0 0.5rem;
    color: var(--training26-primary-text);
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.training26-content .training26-au-leads ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.training26-content .training26-au-leads li {
    display: flex;
    align-items: flex-start;
    gap: 0.85rem;
    padding: 0.85rem 0;
    border-top: 1px solid #ececec;
}

.training26-content .training26-au-leads li:first-child {
    border-top: none;
}

.training26-content .training26-au-leads-icon {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 9px;
    background: #fde4ec;
    display: grid;
    place-items: center;
    color: var(--training26-primary-text);
    font-size: 0.95rem;
}

.training26-content .training26-au-leads-text {
    display: block;
    min-width: 0;
}

.training26-content .training26-au-leads-text strong {
    display: block;
    color: #111;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.25;
}

.training26-content .training26-au-leads-text em {
    display: block;
    color: #6d6d6d;
    font-size: 0.82rem;
    font-style: normal;
    line-height: 1.4;
    margin-top: 0.1rem;
}


/* Horizontal info row - top of body */
.training26-content .training26-au-info {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 1.5rem 2rem;
    margin: 0 0 2rem;
    padding: 1.1rem 0;
    border-top: 1px solid #ececec;
    border-bottom: 1px solid #ececec;
}

.training26-content .training26-au-info > div {
    margin: 0;
}

.training26-content .training26-au-info dt {
    margin: 0 0 0.3rem;
    color: #6d6d6d;
    font-size: 0.72rem;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.training26-content .training26-au-info dd {
    margin: 0;
    color: #111;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.35;
}


/* Body: pill eyebrow, name, strap, dashed sub-headings -------------- */

.training26-content .training26-au-person-body {
    color: #333;
}

.training26-content .training26-au-pill {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    margin: 0 0 1rem;
    padding: 0.3rem 0.75rem;
    background: #fde4ec;
    color: var(--training26-primary-text);
    border-radius: 999px;
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
}

.training26-content .training26-au-pill i {
    color: var(--training26-primary-text);
}

.training26-content .training26-au-person-name {
    margin: 0 0 0.65rem;
    font-size: clamp(2rem, 3.5vw, 2.75rem);
    font-weight: 800;
    line-height: 1.1;
    color: #111;
}

.training26-content .training26-au-strap {
    margin: 0 0 1.5rem;
    color: #666;
    font-family: Georgia, "Times New Roman", serif;
    font-size: 1.2rem;
    font-style: italic;
    line-height: 1.45;
    max-width: 60ch;
}

/* Pink-dash subheading: "- Heading"
   Uses an inline pseudo-element so the dash always sits flush left and the
   heading text wraps cleanly underneath if it gets long. */
.training26-content .training26-au-h {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 1.85rem 0 0.65rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: #111;
    line-height: 1.25;
}

.training26-content .training26-au-h::before {
    content: "";
    flex: 0 0 auto;
    display: inline-block;
    width: 1.4rem;
    height: 3px;
    border-radius: 999px;
    background: var(--training26-primary);
}

/* Rich-text body sub-headings (h3/h4) get the same pink-dash treatment as
   .training26-au-h. The Authors page prose is now authored in Umbraco as rich
   text, so headings typed there arrive as plain <h3>/<h4> - this keeps them
   looking identical to the original hard-coded design. */
.training26-content .training26-au-person-body :is(h3, h4) {
    display: flex;
    align-items: center;
    gap: 0.65rem;
    margin: 1.85rem 0 0.65rem;
    font-size: 1.2rem;
    font-weight: 800;
    color: #111;
    line-height: 1.25;
}

.training26-content .training26-au-person-body :is(h3, h4)::before {
    content: "";
    flex: 0 0 auto;
    display: inline-block;
    width: 1.4rem;
    height: 3px;
    border-radius: 999px;
    background: var(--training26-primary);
}

.training26-content .training26-au-person-body p {
    margin: 0 0 1rem;
    color: #444;
    font-size: 1rem;
    line-height: 1.65;
    max-width: 70ch;
}

.training26-content .training26-au-person-body p strong {
    color: #111;
    font-weight: 700;
}

.training26-content .training26-au-person-body p a {
    color: var(--training26-primary-text);
    text-decoration: underline;
}

.training26-content .training26-au-person-body p a:hover {
    color: var(--training26-primary-hover);
}


/* Mirrored layout - Anne's section: image right, body left */
.training26-content .training26-au-person--mirrored .training26-au-person-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
}

@media (max-width: 991.98px) {
    .training26-content .training26-au-person--mirrored .training26-au-person-grid {
        grid-template-columns: 1fr;
    }
    .training26-content .training26-au-person--mirrored .training26-au-person-aside {
        order: -1;
    }
}

/* Contact pills ------------------------------------------------------- */

.training26-content .training26-au-pills {
    list-style: none;
    margin: 1.5rem 0 0;
    padding: 1.25rem 0 0;
    border-top: 1px solid #ececec;
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
}

.training26-content .training26-au-person-tinted .training26-au-pills {
    border-top-color: #e2e2dc;
}

.training26-content .training26-au-pills li {
    margin: 0;
}

.training26-content .training26-au-pills a {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0.95rem;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 999px;
    color: #2a2a2a !important;
    text-decoration: none !important;
    font-size: 0.88rem;
    font-weight: 600;
    transition: border-color 0.15s, background-color 0.15s, color 0.15s;
}

.training26-content .training26-au-pills a:hover {
    border-color: var(--training26-primary);
    color: var(--training26-primary-text) !important;
    background: #fff;
}

.training26-content .training26-au-pills a i {
    color: var(--training26-primary-text);
}


/* ==========================================================================
   All-courses landing page (training26 redesign)
   Sits above the per-sector homepages. Reuses .training26-sector-* classes
   for the toolbar, view-mode wrapper, group sections and card grid; this
   block adds: sector-tile quick-jump strip + a "Visit {sector} →" link
   on each sector group header.
   ========================================================================== */

/* --- All-courses view shell ------------------------------------------ */

/* Adds breathing room above the toolbar and below the last group on the
   all-courses page. The sector page already lives flush against its hero,
   but here we have a sector-tile strip above and longer filter rows. */
.training26-content .training26-allcourses-views {
    padding: 0 0 1rem;
}


/* --- Sector quick-jump strip ----------------------------------------- */

.training26-content .training26-allcourses-sectors {
    padding: 1rem 0 2.5rem;
}

.training26-content .training26-allcourses-sector-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 1rem;
}

@media (max-width: 991.98px) {
    .training26-content .training26-allcourses-sector-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575.98px) {
    .training26-content .training26-allcourses-sector-grid {
        grid-template-columns: 1fr;
    }
}

.training26-content .training26-allcourses-sector-tile {
    display: flex;
    align-items: center;
    gap: 0.85rem;
    padding: 0.75rem;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    text-decoration: none !important;
    color: inherit;
    transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s;
}

.training26-content .training26-allcourses-sector-tile:hover {
    border-color: var(--training26-primary);
    transform: translateY(-1px);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.05);
}

.training26-content .training26-allcourses-sector-tile-img {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 8px;
    overflow: hidden;
    background: #f0f0f0;
}

.training26-content .training26-allcourses-sector-tile-img img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.training26-content .training26-allcourses-sector-tile-body {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.training26-content .training26-allcourses-sector-tile-body strong {
    display: block;
    color: #111;
    font-size: 0.95rem;
    font-weight: 700;
    line-height: 1.2;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.training26-content .training26-allcourses-sector-tile-body em {
    color: var(--training26-primary-text);
    font-size: 0.78rem;
    font-style: normal;
    font-weight: 600;
    margin-top: 0.15rem;
    letter-spacing: 0.04em;
}


/* --- Toolbar refinement on this page --------------------------------- */

/* Stack the view toggle and filter into a tidy two-row block, separated
   from the first group by a thin underline. Gives the controls a clear
   "pane" to live in instead of floating between strips. */
.training26-content .training26-allcourses-views .training26-sector-toolbar {
    flex-direction: column;
    align-items: stretch;
    gap: 1rem;
    margin: 0 0 2.5rem;
    padding: 0 0 1.25rem;
    border-bottom: 1px solid #ececec;
}

.training26-content .training26-allcourses-views .training26-sector-view-toggle {
    align-self: flex-start;
}

.training26-content .training26-allcourses-views .training26-sector-filter {
    flex-direction: column;
    align-items: flex-start;
    row-gap: 0.5rem;
}

.training26-content .training26-allcourses-views .training26-sector-filter-label {
    margin: 0.5rem 0 0;
}

.training26-content .training26-allcourses-views .training26-sector-filter-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 0.5rem;
    align-items: center;
}

/* First group sits below the underlined toolbar - drop its top margin
   so the page reads tightly without doubling the gap. */
.training26-content .training26-allcourses-by-sector .training26-sector-group:first-child,
.training26-content .training26-allcourses-by-role .training26-sector-group:first-child {
    margin-top: 0;
}


/* --- Per-sector "Visit X →" link in group header --------------------- */

.training26-content .training26-allcourses-sector-link {
    display: inline-block;
    color: var(--training26-primary-text) !important;
    font-size: 0.9rem;
    font-weight: 700;
    text-decoration: none !important;
    margin-bottom: 0.25rem;
    white-space: nowrap;
}

.training26-content .training26-allcourses-sector-link:hover {
    color: var(--training26-primary-hover) !important;
    text-decoration: underline !important;
}

/* Sector group header on this page stacks the link above the meta line. */
.training26-content .training26-allcourses-by-sector .training26-sector-group-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    text-align: right;
}

@media (max-width: 767.98px) {
    /* Stack the sector header - side by side, the nowrap meta column was
       crushing the title/blurb into a sliver on phones (2026-08-21). */
    .training26-content .training26-allcourses-by-sector .training26-sector-group-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 0.75rem;
    }
    .training26-content .training26-allcourses-by-sector .training26-sector-group-meta {
        align-items: flex-start;
        text-align: left;
        white-space: normal;
    }
}


/* ==========================================================================
   FAQs page (store26FaQs.cshtml) - 2026-05-11 redesign
   Long-form Q&A guide with sticky left-column TOC + Q-card right column.
   ========================================================================== */

/* ----- Hero ----- */
.training26-content .training26-faq-hero {
    background-color: #f5f5f5;
    padding: 4rem 0 3rem;
}

.training26-content .training26-faq-hero-title {
    font-size: clamp(2rem, 4vw + 1rem, 3.4rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.01em;
    margin: 0.5rem 0 1rem;
    color: #111;
}

.training26-content .training26-faq-hero-lede {
    max-width: 60ch;
    font-size: 1.1rem;
    line-height: 1.55;
    color: #444;
    margin: 0;
}

/* ----- Main section: white bg, override the default tinted alternation ----- */
.training26-content .training26-faq-main {
    background-color: #fff;
}

/* ----- TOC (sticky on lg+) ----- */
.training26-content .training26-faq-toc {
    position: sticky;
    top: 1rem;
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 1.25rem 1.25rem 0.5rem;
    font-size: 0.92rem;
    /* Cap height so very long TOCs scroll inside the sticky card rather than
       overflowing past the viewport. */
    max-height: calc(100vh - 2rem);
    overflow-y: auto;
}

.training26-content .training26-faq-toc-label {
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--training26-primary-text);
    margin: 0 0 0.75rem;
}

.training26-content .training26-faq-toc-group {
    margin-bottom: 1rem;
    padding-bottom: 0.75rem;
    border-bottom: 1px solid #f1f1f1;
}

.training26-content .training26-faq-toc-group:last-child {
    border-bottom: 0;
}

.training26-content .training26-faq-toc-title {
    font-weight: 700;
    color: #222;
    margin: 0 0 0.4rem;
    font-size: 0.88rem;
}

.training26-content .training26-faq-toc ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.training26-content .training26-faq-toc ul li {
    margin: 0;
}

.training26-content .training26-faq-toc ul a {
    display: block;
    padding: 0.35rem 0.6rem;
    margin-left: -0.6rem;
    color: #555;
    text-decoration: none;
    line-height: 1.4;
    border-radius: 6px;
    transition: background-color 0.15s, color 0.15s;
}

.training26-content .training26-faq-toc ul a:hover {
    color: var(--training26-primary-text);
    background-color: #fafafa;
}

.training26-content .training26-faq-toc ul a.active {
    color: var(--training26-primary-text);
    background-color: #fff0f5;
    font-weight: 600;
}

/* ----- Group banner (separator between audience groups) ----- */
.training26-content .training26-faq-group-banner {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1.25rem 1.5rem;
    background: #fff0f5;
    border-radius: 12px;
    margin: 0 0 1.5rem;
}

.training26-content .training26-faq-group-banner:not(:first-child) {
    margin-top: 3rem;
}

.training26-content .training26-faq-group-banner h2 {
    font-size: 1.5rem;
    font-weight: 700;
    color: #111;
    margin: 0 0 0.25rem;
}

.training26-content .training26-faq-group-banner p {
    color: #555;
    font-size: 0.95rem;
    line-height: 1.5;
    margin: 0;
}

/* ----- Q-card (the main repeating answer unit) ----- */
.training26-content .training26-faq-card {
    background: #fff;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 1.75rem 2rem 1.5rem;
    margin: 0 0 1.5rem;
    scroll-margin-top: 1.5rem;
}

.training26-content .training26-faq-card-num {
    display: inline-block;
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--training26-primary-text);
    background-color: #fff0f5;
    padding: 0.25rem 0.7rem;
    border-radius: 999px;
    margin-bottom: 0.85rem;
}

.training26-content .training26-faq-card h3 {
    font-size: 1.55rem;
    font-weight: 800;
    color: #111;
    line-height: 1.2;
    margin: 0 0 1.25rem;
}

.training26-content .training26-faq-card-ans {
    color: #333;
    font-size: 1rem;
    line-height: 1.65;
}

.training26-content .training26-faq-card-ans p {
    margin: 0 0 1rem;
}

.training26-content .training26-faq-card-ans h4 {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 1rem;
    font-weight: 700;
    color: #111;
    margin: 1.5rem 0 0.75rem;
}

/* Decorative pink bar before FAQ h4s - kept by explicit choice (Tristan,
   2026-07-22): the no-em-dash rule is about dashes in COPY, and this design
   accent looked better with it. It is pure CSS, not a text character. */
.training26-content .training26-faq-card-ans h4::before {
    content: "";
    display: inline-block;
    width: 1.25rem;
    height: 2px;
    background-color: var(--training26-primary);
}

.training26-content .training26-faq-card-ans a {
    color: var(--training26-primary-text);
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* ----- Embedded quote (testimonial inside a Q-card) ----- */
.training26-content .training26-faq-quote {
    background: #fff0f5;
    border-left: 4px solid var(--training26-primary);
    border-radius: 0 8px 8px 0;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0;
}

.training26-content .training26-faq-quote blockquote {
    font-style: italic;
    color: #333;
    margin: 0 0 0.5rem;
    line-height: 1.55;
}

.training26-content .training26-faq-quote figcaption {
    font-size: 0.85rem;
    color: #666;
    margin: 0;
}

.training26-content .training26-faq-quote figcaption strong {
    color: #222;
}

/* ----- Stats row ----- */
.training26-content .training26-faq-stats {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 1.25rem 0;
}

.training26-content .training26-faq-stat {
    text-align: center;
    background: #fafafa;
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 1.25rem 0.75rem;
}

.training26-content .training26-faq-stat strong {
    display: block;
    font-size: 2rem;
    font-weight: 800;
    color: var(--training26-primary-text);
    line-height: 1;
    margin-bottom: 0.35rem;
}

.training26-content .training26-faq-stat span {
    display: block;
    font-size: 0.85rem;
    color: #555;
    line-height: 1.35;
}

@media (max-width: 575.98px) {
    .training26-content .training26-faq-stats {
        grid-template-columns: 1fr;
    }
}

/* ----- Callout (CTA strip inside an answer) ----- */
.training26-content .training26-faq-callout {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.25rem;
    background: #fafafa;
    border: 1px solid #ececec;
    border-radius: 8px;
    padding: 1rem 1.25rem;
    margin: 1.25rem 0 0;
}

.training26-content .training26-faq-callout > div {
    color: #333;
    font-size: 0.95rem;
    line-height: 1.5;
}

.training26-content .training26-faq-callout .training26-btn {
    flex-shrink: 0;
}

@media (max-width: 575.98px) {
    .training26-content .training26-faq-callout {
        flex-direction: column;
        align-items: flex-start;
    }
}

/* ----- Pyramid mini (FAQ variant - similar to bft pyramid but smaller) ----- */
.training26-content .training26-faq-pyramid {
    margin: 1rem 0 1.25rem;
}

.training26-content .training26-faq-pyramid-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    margin-bottom: 0.5rem;
}

.training26-content .training26-faq-pyramid-bar {
    flex-shrink: 0;
    width: var(--bar-width);
    max-width: 280px;
    padding: 0.6rem 0.85rem;
    border-radius: 6px;
    color: #fff;
    font-weight: 600;
    font-size: 0.9rem;
    background-color: var(--training26-primary);
}

.training26-content .training26-faq-pyramid-bar-top { background-color: #ec2669; }
.training26-content .training26-faq-pyramid-bar-mid { background-color: #d11e5b; }
.training26-content .training26-faq-pyramid-bar-bot { background-color: #b3174d; }

.training26-content .training26-faq-pyramid-label {
    font-size: 0.9rem;
    line-height: 1.35;
}

.training26-content .training26-faq-pyramid-label strong {
    color: #111;
    display: block;
}

.training26-content .training26-faq-pyramid-label span {
    color: #666;
    font-size: 0.82rem;
}

/* ----- Check-list (bulleted tick list) ----- */
.training26-content .training26-faq-check-list {
    list-style: none;
    padding: 0;
    margin: 0.5rem 0 1rem;
}

.training26-content .training26-faq-check-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: 0.4rem;
}

.training26-content .training26-faq-check-list li::before {
    content: "\2713";
    position: absolute;
    left: 0;
    top: 0;
    color: var(--training26-primary-text);
    font-weight: 700;
}

/* ----- CTA strip at the bottom of the page (pink full-bleed) ----- */
.training26-content .training26-faq-cta-strip {
    background-color: var(--training26-primary);
    color: #fff;
    padding: 3.5rem 0 4rem;
}

.training26-content .training26-faq-cta-head {
    text-align: center;
    margin-bottom: 2rem;
}

.training26-content .training26-faq-cta-head h2 {
    color: #fff;
    font-size: 2rem;
    font-weight: 800;
    margin: 0 0 0.5rem;
}

.training26-content .training26-faq-cta-head p {
    color: #fff;
    opacity: 0.92;
    margin: 0;
    font-size: 1rem;
}

.training26-content .training26-faq-cta-card {
    display: block;
    height: 100%;
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 1.5rem 1.25rem;
    color: #fff;
    text-decoration: none;
    transition: background-color 0.2s, transform 0.2s, border-color 0.2s;
    position: relative;
}

.training26-content .training26-faq-cta-card:hover {
    background-color: rgba(255, 255, 255, 0.16);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
    transform: translateY(-2px);
}

.training26-content .training26-faq-cta-card h4 {
    color: #fff;
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 0.5rem;
}

.training26-content .training26-faq-cta-card p {
    color: #fff;
    opacity: 0.9;
    font-size: 0.9rem;
    line-height: 1.45;
    margin: 0 0 1rem;
}

.training26-content .training26-faq-cta-card .arrow {
    display: inline-block;
    font-size: 1.25rem;
    font-weight: 700;
    transition: transform 0.2s;
}

.training26-content .training26-faq-cta-card:hover .arrow {
    transform: translateX(4px);
}

/* ----- Responsive tweaks ----- */
@media (max-width: 991.98px) {
    .training26-content .training26-faq-card {
        padding: 1.25rem 1.25rem 1rem;
    }
    .training26-content .training26-faq-card h3 {
        font-size: 1.3rem;
    }
}


/* ==========================================================================
   Team-places picker (Views/Partials/store/teamPlacesPicker.cshtml)
   Sector chips -> level cards -> add team places to basket. Used by the
   standalone /buy-places page and embedded in the buy-for-a-team page.
   Extracted from the old StoreBuyPlaces inline <style>; bp- prefix kept.
   ========================================================================== */

.bp-wrap { max-width: 1180px; margin: 0 auto; padding: 34px 28px 70px; }
.bp-kicker { font-size: 11px; font-weight: 800; letter-spacing: .7px; color: #e6017e; }
.bp-title { font-size: 44px; letter-spacing: -1px; margin: .2em 0 .1em; }
.bp-intro { color: #5b6470; margin: 0 0 22px; max-width: 760px; }
.bp-stepword { font-size: 12px; font-weight: 800; letter-spacing: .6px; text-transform: uppercase; color: #e6017e; margin: 24px 0 6px; }
.bp-sectorbar { display: flex; flex-wrap: wrap; gap: 12px; margin: 8px 0 6px; }
.bp-sector { border: 2px solid #e7e9ec; background: #fff; border-radius: 12px; padding: 16px 20px; cursor: pointer; font-weight: 700; font-size: 15px; display: flex; align-items: center; gap: 10px; color: #14181f; }
.bp-sector--on { border-color: #e6017e; background: #fdeaf4; color: #c10168; }
.bp-levelgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 18px; margin-top: 10px; }
.bp-lvl { background: #fff; border: 1.5px solid #e7e9ec; border-radius: 14px; padding: 22px; display: flex; flex-direction: column; }
.bp-lvl__name { font-size: 19px; font-weight: 800; margin: 0; }
.bp-lvl__price { font-size: 30px; font-weight: 800; margin: 6px 0; }
.bp-lvl__price small { font-size: 13px; color: #5b6470; font-weight: 600; }
.bp-lvl__fill { color: #5b6470; font-size: 12px; margin: 0 0 4px; }
.bp-lvl__courses { padding-left: 18px; margin: 0 0 10px; color: #3a414b; font-size: 13px; line-height: 1.5; }
.bp-lvl__cta { margin-top: auto; }
.bp-qtyrow { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; font-weight: 700; font-size: 14px; }
.bp-stepper { display: inline-flex; align-items: center; border: 1px solid #e7e9ec; border-radius: 999px; background: #fff; }
.bp-stepper button { border: 0; background: transparent; width: 36px; height: 36px; font-size: 18px; cursor: pointer; }
.bp-stepper span { width: 36px; text-align: center; font-weight: 700; }
.bp-btn-ghost { background: #fff; border: 2px solid #e6017e; color: #e6017e; }
.bp-how-title { margin-top: 34px; font-size: 24px; }
.bp-howrow { display: flex; gap: 20px; margin-top: 14px; flex-wrap: wrap; }
.bp-how { flex: 1 1 240px; background: #fbfbfc; border: 1px solid #e7e9ec; border-radius: 12px; padding: 18px; }
.bp-how__n { display: flex; width: 30px; height: 30px; border-radius: 50%; background: #e6017e; color: #fff; font-weight: 800; align-items: center; justify-content: center; margin-bottom: 10px; }
.bp-how p { color: #5b6470; font-size: 13.5px; margin: 6px 0 0; }
.bp-empty { color: #5b6470; }
@media (max-width: 700px) { .bp-title { font-size: 32px; } }

/* Embedded on the buy-for-a-team page (headerless picker + page-supplied
   header and not-for-profit note). Lives in its own section now, so no
   top margin - the section header provides the spacing. */
.training26-content .training26-bft-buyplaces-note {
    max-width: 760px;
    margin: 1.75rem auto 0;
    text-align: center;
    color: #6d6d6d;
    font-size: 0.9rem;
    line-height: 1.6;
}



/* =====================================================================
   CASE STUDIES - index + detail (training26)
   ---------------------------------------------------------------------
   Ported from wwwroot/mockups/training-case-study.html. The prototype
   .cs-* rules are namespaced .training26-tcs-*. The prototype toolbar and
   the inline header/footer/nav are intentionally omitted - those are
   supplied by BS5_Default + Training/global/OtbStyleHeader.
   ===================================================================== */

/* ---- Index page ---- */
.training26-tcs-index-title { margin-top: .35rem; }
.training26-tcs-index-lede {
    font-size: 1.15rem; line-height: 1.7; color: #4a4a50;
    max-width: 720px; margin: .75rem 0 0;
}
.training26-tcs-index-intro { margin-top: 1rem; color: #4a4a50; max-width: 760px; }
.training26-tcs-index-empty { color: #6d6d6d; font-size: 1.02rem; }

/* ---- Detail hero ---- */
.training26-tcs-hero {
    position: relative; overflow: hidden;
    background:
        radial-gradient(130% 120% at 88% 8%, rgba(236,38,105,.30), transparent 52%),
        linear-gradient(158deg, #232327 0%, #161618 55%, #0e0e0f 100%);
    color: #fff;
}
.training26-tcs-hero::before {
    content: ""; position: absolute; inset: 0; opacity: .05; pointer-events: none;
    background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 13px);
}
/* Photo hero - the photo is set per case study via --cs-hero-img. A
   magenta-tinted left-dark gradient keeps white text readable. */
.training26-tcs-hero--photo {
    background-image:
        radial-gradient(120% 130% at 90% 10%, rgba(236,38,105,.30), transparent 48%),
        linear-gradient(90deg, rgba(13,13,14,.94) 0%, rgba(13,13,14,.86) 28%, rgba(13,13,14,.55) 58%, rgba(13,13,14,.28) 100%),
        var(--cs-hero-img);
    background-size: cover;
    background-position: center right;
}
.training26-tcs-hero--photo::before { display: none; }
@media (max-width: 991.98px) {
    .training26-tcs-hero--photo {
        background-image:
            linear-gradient(180deg, rgba(13,13,14,.84) 0%, rgba(13,13,14,.74) 50%, rgba(13,13,14,.92) 100%),
            var(--cs-hero-img);
        background-position: center;
    }
}
.training26-tcs-hero-inner { position: relative; max-width: 820px; padding: 5.5rem 0 3.5rem; }
.training26-tcs-hero-eyebrow {
    display: inline-block; font-size: .72rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase;
    color: #ff8bbb; margin-bottom: 1.1rem;
}
.training26-tcs-hero-title {
    font-size: clamp(2.1rem, 5vw, 3.4rem); font-weight: 800;
    line-height: 1.08; letter-spacing: -.02em; margin: 0 0 1.1rem;
}
.training26-tcs-hero-lede {
    font-size: 1.15rem; line-height: 1.7; color: #d3d3d6;
    max-width: 640px; margin: 0 0 1.75rem;
}
.training26-tcs-hero-meta {
    display: flex; flex-wrap: wrap; gap: .65rem 1.25rem;
    font-size: .92rem; color: #cfcfd3;
}
.training26-tcs-hero-meta span { display: inline-flex; align-items: center; gap: .45rem; }
.training26-tcs-hero-meta i { color: var(--training26-primary-text); }

/* ---- At-a-glance stat band ---- */
.training26-tcs-statband { background: #2b2b2e; }
.training26-tcs-stat {
    padding: 1.9rem 1rem; text-align: center;
    border-right: 1px solid rgba(255,255,255,.08);
}
.training26-tcs-statband .row > [class*="col"]:last-child .training26-tcs-stat { border-right: 0; }
.training26-tcs-stat-num { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; color: #fff; line-height: 1; }
.training26-tcs-stat-num-accent { color: var(--training26-primary-text); }
.training26-tcs-stat-label {
    margin-top: .55rem; font-size: .74rem; font-weight: 600;
    letter-spacing: .08em; text-transform: uppercase; color: #a7a7ac;
}
@media (max-width: 767.98px) {
    .training26-tcs-statband .row > [class*="col"]:nth-child(2n) .training26-tcs-stat { border-right: 0; }
    .training26-tcs-stat { border-bottom: 1px solid rgba(255,255,255,.08); }
}

/* ---- Location map card ---- */
.training26-tcs-map-card {
    border-radius: 14px; overflow: hidden;
    border: 1px solid #e4e4e7; box-shadow: 0 10px 30px -18px rgba(0,0,0,.35);
    background: #fff;
}
.training26-tcs-map-card img { display: block; width: 100%; height: auto; }
.training26-tcs-map-cap {
    padding: .8rem 1.1rem; font-size: .82rem; color: #666;
    display: flex; align-items: center; gap: .5rem;
}
.training26-tcs-map-cap i { color: var(--training26-primary-text); }

/* ---- Service definition list ---- */
.training26-tcs-deflist { margin: 0; }
.training26-tcs-deflist > div {
    display: flex; gap: 1rem; padding: 1.05rem 0;
    border-bottom: 1px solid #ececef;
}
.training26-tcs-deflist > div:first-child { padding-top: 0; }
.training26-tcs-deflist dt {
    flex: 0 0 38%; font-size: .74rem; font-weight: 700;
    letter-spacing: .07em; text-transform: uppercase; color: #6d6d73;
    padding-top: .15rem;
}
.training26-tcs-deflist dd { flex: 1 1 auto; margin: 0; font-size: 1.02rem; line-height: 1.55; color: #2a2a2e; }

/* ---- Rollout cards ---- */
.training26-tcs-rollout-card {
    position: relative; height: 100%;
    background: #fff; border: 1px solid #e7e7ea;
    border-left: 4px solid var(--training26-primary);
    border-radius: 12px; padding: 1.5rem 1.6rem;
    box-shadow: 0 6px 20px -16px rgba(20,20,22,.25);
    transition: box-shadow .25s, transform .25s;
}
.training26-tcs-rollout-card:hover { box-shadow: 0 16px 36px -20px rgba(20,20,22,.3); transform: translateY(-2px); }
.training26-tcs-rollout-card-muted {
    border-left-color: #c9c9cf; border-style: dashed; background: #fbfbfc;
}
.training26-tcs-rollout-eyebrow {
    font-size: .68rem; font-weight: 700; letter-spacing: .12em;
    text-transform: uppercase; color: var(--training26-primary-text); margin-bottom: .5rem;
}
.training26-tcs-rollout-card-muted .training26-tcs-rollout-eyebrow { color: #6d6d73; }
.training26-tcs-rollout-title { font-size: 1.22rem; font-weight: 700; color: #1c1c20; margin: 0 0 .85rem; line-height: 1.25; }
.training26-tcs-rollout-places { display: inline-flex; align-items: baseline; gap: .4rem; margin-bottom: .75rem; }
.training26-tcs-rollout-places b { font-size: 1.8rem; font-weight: 800; color: #1c1c20; line-height: 1; }
.training26-tcs-rollout-places span { font-size: .82rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: #6d6d73; }
.training26-tcs-rollout-desc { font-size: .95rem; line-height: 1.6; color: #5a5a60; margin: 0; }

/* ---- Manager reflection pull-quote ---- */
.training26-tcs-mgr {
    background: #f5f0eb; border-radius: 16px;
    padding: 2.75rem clamp(1.5rem, 4vw, 3.25rem);
    position: relative;
}
.training26-tcs-mgr-mark { font-family: Georgia, serif; font-size: 4.5rem; line-height: .7; color: var(--training26-primary-text); opacity: .5; }
.training26-tcs-mgr-quote {
    font-size: clamp(1.25rem, 2.2vw, 1.7rem); line-height: 1.5;
    color: #2a2620; font-weight: 500; margin: .5rem 0 1.5rem; max-width: 880px;
}
/* The quote is RTE markup now, so it arrives as one or more <p> rather than as
   bare text. Space multi-paragraph quotes, and drop the trailing margin so a
   quote does not sit lower than it used to when it is a single paragraph. */
.training26-tcs-mgr-quote p { margin: 0 0 .85em; }
.training26-tcs-mgr-quote p:last-child { margin-bottom: 0; }
/* Multi-paragraph reflections (view adds --long) read as editorial body copy:
   pull-quote type at 1.7rem across four paragraphs overwhelmed the page. */
.training26-tcs-mgr--long .training26-tcs-mgr-quote {
    font-size: clamp(1.02rem, 1.5vw, 1.18rem); line-height: 1.65; font-weight: 400;
    max-width: 760px;
}
.training26-tcs-mgr-quote a { color: var(--training26-primary-text); text-decoration: underline; }
.training26-tcs-mgr-by { display: flex; align-items: center; gap: .9rem; }
.training26-tcs-mgr-avatar {
    flex: 0 0 auto; width: 46px; height: 46px; border-radius: 50%;
    background: var(--training26-primary); color: #fff;
    display: grid; place-items: center; font-weight: 700; font-size: 1rem;
}
.training26-tcs-mgr-name { font-weight: 700; color: #1f1f23; line-height: 1.2; }
.training26-tcs-mgr-role { font-size: .88rem; color: #6d6d6d; }
/* Two or more manager quotes carousel (one per page - see store26CaseStudy).
   Navigation is centred dots under the card, nothing else: the card runs the
   full width of the container, so arrows would either sit on the quote or need
   a gutter that narrows it. Slides must be equal height or the beige cards jump
   as you page through. */
.training26-tcs-mgrs .splide__list { align-items: stretch; }
.training26-tcs-mgrs .splide__slide { height: auto; }
.training26-tcs-mgrs .splide__slide .training26-tcs-mgr { height: 100%; }
.training26-tcs-mgrs .splide__pagination {
    position: static; margin-top: 1.5rem;
    display: flex; justify-content: center; gap: .1rem; padding: 0;
}
.training26-tcs-mgrs .splide__pagination__page { background: #cfcfd4; margin: 0 .25rem; }
.training26-tcs-mgrs .splide__pagination__page.is-active { background: var(--training26-primary); transform: scale(1.25); }
.training26-tcs-placeholder-tag {
    display: inline-flex; align-items: center; gap: .4rem;
    background: #fff3cd; color: #8a6d00; border: 1px solid #ffe69c;
    font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
    padding: .25rem .6rem; border-radius: 999px; margin-bottom: 1.1rem;
}

/* ---- Learner feedback carousel ---- */
.training26-tcs-feedback-card {
    height: 100%; background: #fff; border: 1px solid #e7e7ea;
    border-radius: 14px; padding: 1.6rem 1.6rem 1.7rem;
    display: flex; flex-direction: column;
    box-shadow: 0 6px 18px -14px rgba(20,20,22,.2);
}
.training26-tcs-feedback-mark { font-family: Georgia, serif; font-size: 2.6rem; line-height: .6; color: var(--training26-primary-text); opacity: .35; margin-bottom: .4rem; }
.training26-tcs-feedback-text { font-family: Georgia, serif; font-style: italic; font-size: 1.04rem; line-height: 1.6; color: #33333a; margin: 0; }
.training26-tcs-feedback-foot {
    margin-top: 1.25rem; padding-top: .9rem; border-top: 1px solid #efeff1;
    font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: #a0a0a6;
    display: flex; align-items: center; gap: .5rem;
}
.training26-tcs-feedback-foot i { color: var(--training26-primary-text); }
.training26-tcs-feedback .splide__slide { height: auto; }
/* Dots only, centred under the cards - arrows sat on top of the card text. */
.training26-tcs-feedback .splide__pagination {
    position: static; margin-top: 1.4rem;
    display: flex; justify-content: center; padding: 0;
}
.training26-tcs-feedback .splide__pagination__page { background: #cfcfd4; margin: 0 .25rem; }
.training26-tcs-feedback .splide__pagination__page.is-active { background: var(--training26-primary); transform: scale(1.25); }
.training26-tcs-swipe-hint { font-size: .82rem; color: #6d6d73; display: inline-flex; align-items: center; gap: .5rem; }

/* ---- Closing CTA ---- */
.training26-tcs-cta {
    background:
        radial-gradient(120% 140% at 12% 18%, rgba(236,38,105,.55), transparent 55%),
        linear-gradient(135deg, #1d1d20 0%, #0f0f10 100%);
    color: #fff; border-radius: 20px;
    padding: clamp(2.5rem, 5vw, 4rem) clamp(1.5rem, 5vw, 4rem);
    text-align: center;
}
.training26-tcs-cta h2 { font-size: clamp(1.7rem, 3.4vw, 2.5rem); font-weight: 800; letter-spacing: -.02em; margin: 0 0 .9rem; }
.training26-tcs-cta p { font-size: 1.08rem; color: #d2d2d6; max-width: 560px; margin: 0 auto 1.9rem; line-height: 1.65; }
.training26-tcs-cta-btns { display: flex; flex-wrap: wrap; gap: .9rem; justify-content: center; }
.training26-tcs-btn-white {
    display: inline-block; background: #fff; color: #1c1c20 !important;
    border: 2px solid #fff; font-size: 1.05rem; font-weight: 700;
    text-decoration: none !important; padding: .7rem 1.9rem; border-radius: 999px;
    transition: background .2s, color .2s;
}
.training26-tcs-btn-white:hover { background: transparent; color: #fff !important; }
.training26-tcs-btn-ghost {
    display: inline-block; background: transparent; color: #fff !important;
    border: 2px solid rgba(255,255,255,.5); font-size: 1.05rem; font-weight: 700;
    text-decoration: none !important; padding: .7rem 1.9rem; border-radius: 999px;
    transition: border-color .2s, background .2s;
}
.training26-tcs-btn-ghost:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* ---- Breadcrumb ---- */
.training26-tcs-breadcrumb { font-size: .85rem; color: #6d6d6d; }
.training26-tcs-breadcrumb a { color: #6d6d6d; text-decoration: none; }
.training26-tcs-breadcrumb a:hover { color: var(--training26-primary-text); }
.training26-tcs-breadcrumb .sep { margin: 0 .5rem; color: #ccc; }


/* =====================================================================
   BUY FOR A TEAM - rich-text containers
   ---------------------------------------------------------------------
   Three containers on the block-driven store26BuyForTeamPage are fed from
   Rich Text rather than a bare string, so their copy arrives wrapped in the
   editor's own <p>. The container rules above already set the spacing, so
   collapse the first/last child margins to stop them stacking. Without this
   the note and the stats source sit a line lower than they used to.
   ===================================================================== */
.training26-content .training26-bft-evidence-source > :first-child,
.training26-content .training26-bft-buyplaces-note > :first-child,
.training26-content .training26-hp-section-subtitle > :first-child {
    margin-top: 0;
}

.training26-content .training26-bft-evidence-source > :last-child,
.training26-content .training26-bft-buyplaces-note > :last-child,
.training26-content .training26-hp-section-subtitle > :last-child {
    margin-bottom: 0;
}


/* =====================================================================
   HOW TO PAY (store26HowToPay)
   ---------------------------------------------------------------------
   Simple prose page for team / institutional buyers. Body is editor RTE,
   so the child rules target plain h2/p/ol coming out of the editor.
   ===================================================================== */
.training26-content .training26-htp { padding: clamp(2.5rem, 6vw, 4.5rem) 0; }
.training26-content .training26-htp-wrap { max-width: 780px; }
.training26-content .training26-htp-title {
    font-size: clamp(2.1rem, 4.5vw, 3.1rem);
    font-weight: 800; letter-spacing: -.02em; line-height: 1.08;
    margin: .4rem 0 1.1rem;
}
.training26-content .training26-htp-intro {
    font-size: 1.12rem; line-height: 1.65; color: #55555a; margin: 0 0 2.2rem;
}
.training26-content .training26-htp-body { font-size: 1.02rem; line-height: 1.7; }
.training26-content .training26-htp-body h2 {
    font-size: 1.3rem; font-weight: 700; letter-spacing: -.01em; margin: 2.1rem 0 .55rem;
}
.training26-content .training26-htp-body h2:first-child { margin-top: 0; }
.training26-content .training26-htp-body p { margin: 0 0 1rem; }
.training26-content .training26-htp-body a { color: var(--training26-primary-text); }
.training26-content .training26-htp-body hr {
    border: 0; border-top: 1px solid #e4e4e8; margin: 2.2rem 0;
}
.training26-content .training26-htp-body h3 {
    font-size: 1.12rem; font-weight: 700; letter-spacing: -.01em; margin: 1.7rem 0 .5rem;
}
.training26-content .training26-htp-body ul { margin: 0 0 1rem; padding-left: 1.3rem; }
.training26-content .training26-htp-body li { margin-bottom: .35rem; }
.training26-content .training26-htp-body blockquote {
    border-left: 3px solid var(--training26-primary);
    margin: 1.2rem 0; padding: .35rem 0 .35rem 1.1rem;
    color: #55555a; font-style: italic;
}
.training26-content .training26-htp-body blockquote p { margin-bottom: .5rem; }
.training26-content .training26-htp-body blockquote p:last-child { margin-bottom: 0; }
.training26-content .training26-htp-body blockquote strong { font-style: normal; color: #1c1c20; }
.training26-content .training26-htp-cta { margin-top: 2.4rem; }
/* .training26-btn is inline-flex, which swallows the whitespace text node
   between the icon and the label - reinstate the gap explicitly. */
.training26-content .training26-htp-cta .training26-btn { gap: .5rem; }

/* --- Ledger layout (Rachel 2026-07-20: big numbers 1-4, short, no quotes) --- */
.training26-content .training26-htp-grid {
    /* minmax(0, …) stops the aside's min-content (the nowrap CTA button)
       stealing width from the text column and inverting the ratio */
    display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 3rem; align-items: start;
}
.training26-content .training26-htp-ledger { margin-top: .6rem; }
.training26-content .training26-htp-row {
    display: flex; gap: 1.5rem; align-items: flex-start;
    padding: 1.15rem 0; border-top: 1px solid #ececec;
}
.training26-content .training26-htp-row:first-child { border-top: none; padding-top: .4rem; }
.training26-content .training26-htp-num {
    font-size: 4rem; font-weight: 800; line-height: 1;
    color: var(--training26-primary-text); min-width: 4rem; text-align: right;
    user-select: none;
}
.training26-content .training26-htp-rowbody h2 {
    font-size: 1.15rem; font-weight: 700; letter-spacing: -.01em;
    margin: .35rem 0 .25rem; padding: 0;
}
.training26-content .training26-htp-stepbody { font-size: .95rem; line-height: 1.55; color: #55555a; max-width: 52ch; }
.training26-content .training26-htp-stepbody p { margin: 0 0 .5rem; }
.training26-content .training26-htp-stepbody p:last-child { margin-bottom: 0; }
.training26-content .training26-htp-stepbody ul { margin: 0 0 .5rem; padding-left: 1.2rem; }
.training26-content .training26-htp-stepbody li { margin-bottom: .2rem; }
.training26-content .training26-htp-aside {
    display: flex; flex-direction: column; gap: 1.2rem;
    position: sticky; top: 6.5rem;
}
.training26-content .training26-htp-card {
    border: 1px solid #ececec; border-radius: 12px; padding: 1.5rem;
}
.training26-content .training26-htp-card h3 { font-size: 1.05rem; font-weight: 700; margin: 0; }
.training26-content .training26-htp-card p { font-size: .92rem; color: #55555a; line-height: 1.55; margin: .4rem 0 0; }
.training26-content .training26-htp-card .training26-btn {
    display: flex; justify-content: center; gap: .5rem; margin-top: .9rem; width: 100%;
    white-space: normal; /* .training26-btn nowrap would blow out narrow cards */
}
.training26-content .training26-htp-btn-ghost {
    background: #fff; color: var(--training26-primary-text);
    border: 2px solid var(--training26-primary);
}
.training26-content .training26-htp-btn-ghost:hover {
    background: var(--training26-primary); color: #fff;
}
/* Below lg the bootstrap container is only 720px wide - two columns inside
   that are cramped, so stack instead. */
@media (max-width: 991.98px) {
    .training26-content .training26-htp-grid { grid-template-columns: 1fr; gap: 2rem; }
    .training26-content .training26-htp-aside { position: static; }
    .training26-content .training26-htp-num { font-size: 3rem; min-width: 3rem; }
}
/* Stacked but not phone-narrow: the two action cards sit side by side. */
@media (min-width: 640px) and (max-width: 991.98px) {
    .training26-content .training26-htp-aside {
        display: grid; grid-template-columns: 1fr 1fr; align-items: stretch;
    }
}

/* --- How-to-pay drawer (product page) ----------------------------------
   Native <dialog> as a right-hand slide-over; bottom sheet on phones.
   Content is the same Umbraco steps as /how-to-pay (HowToPayDrawer.cshtml). */
.training26-htp-drawer {
    position: fixed; inset: 0 0 0 auto; margin: 0;
    height: 100dvh; max-height: 100dvh;
    width: min(30rem, 100vw);
    border: none; border-left: 1px solid #ececec;
    padding: 0; background: #fff;
    display: none; flex-direction: column;
    box-shadow: -12px 0 40px rgba(0, 0, 0, .14);
    font-family: inherit;
}
.training26-htp-drawer[open] { display: flex; animation: htp-drawer-in .22s ease-out; }
@keyframes htp-drawer-in { from { transform: translateX(100%); } to { transform: none; } }
.training26-htp-drawer::backdrop { background: rgba(22, 24, 29, .45); }

.training26-htp-drawer-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 1.1rem 1.5rem; border-bottom: 1px solid #ececec;
}
.training26-htp-drawer-head h2,
.training26-htp-drawer-head .training26-htp-drawer-title { font-size: 1.35rem; font-weight: 800; margin: 0; }
.training26-htp-drawer-close {
    appearance: none; background: #f4f4f6; border: none; border-radius: 50%;
    width: 2.2rem; height: 2.2rem; cursor: pointer; color: #444; font-size: 1rem;
    display: inline-flex; align-items: center; justify-content: center;
}
.training26-htp-drawer-close:hover { background: #e9e9ee; }

.training26-htp-drawer-body { flex: 1; overflow-y: auto; padding: .5rem 1.5rem; }
.training26-htp-drawer .training26-htp-row { gap: 1rem; padding: .9rem 0; }
.training26-htp-drawer .training26-htp-num { font-size: 2.4rem; min-width: 2.6rem; }
.training26-htp-drawer .training26-htp-rowbody h3 {
    font-size: 1rem; font-weight: 700; letter-spacing: -.01em; margin: .25rem 0 .2rem;
}
.training26-htp-drawer .training26-htp-stepbody { font-size: .9rem; }

.training26-htp-drawer-foot {
    padding: 1.1rem 1.5rem; border-top: 1px solid #ececec;
    display: flex; flex-direction: column; gap: .7rem;
}
.training26-htp-drawer-foot .training26-btn { display: flex; justify-content: center; gap: .5rem; width: 100%; }
.training26-htp-drawer-pagelink {
    text-align: center; font-size: .85rem; color: #6d6d6d; text-decoration: underline;
}
.training26-htp-drawer-pagelink:hover { color: var(--training26-primary-text); }

/* Accessibility signpost inside the Reading settings drawer (2026-08-18).
   Deliberately colour-free: the copy reuses .training26-reading-note and the
   link reuses .training26-htp-drawer-pagelink, both already themed in the
   GENERATED training26-reading.css - so this block needs no regeneration. */
.training26-reading-a11y {
    display: grid; gap: .6rem; margin-top: 1.1rem;
    padding-top: 1rem; border-top: 1px solid rgba(128, 128, 128, .25);
}
.training26-reading-a11y .training26-htp-drawer-pagelink { display: block; text-align: left; }

@media (max-width: 640px) {
    .training26-htp-drawer {
        /* max-width beats the UA default max-width: calc(100% - 6px - 2em),
           which otherwise clamps the sheet narrower than the screen. */
        inset: auto 0 0 0; width: 100vw; max-width: 100vw; height: auto; max-height: 88dvh;
        border-left: none; border-top: 1px solid #ececec; border-radius: 14px 14px 0 0;
    }
    @keyframes htp-drawer-in { from { transform: translateY(100%); } to { transform: none; } }
}

/* --- Added-to-basket panel (product page) -------------------------------
   Shares the drawer chrome above; on desktop it hugs content height rather
   than the full viewport - it's a confirmation, not a page. */
.training26-atb-panel { height: auto; max-height: 100dvh; }
.training26-atb-panel .training26-htp-drawer-head h2 { font-size: 1.15rem; }
.training26-atb-check { color: #1a9e55; margin-right: .3rem; }
.training26-atb-item {
    display: flex; justify-content: space-between; align-items: baseline; gap: 1rem;
    border: 1px solid #ececec; border-radius: 10px;
    padding: .9rem 1.1rem; margin: .9rem 0 .6rem;
    font-weight: 600; color: #16181d;
}
.training26-atb-item strong { white-space: nowrap; }
.training26-atb-count { color: #55555a; font-size: .9rem; margin: 0 0 .5rem; }
.training26-atb-continue {
    background: #fff; border: 2px solid #d8d8db; color: #16181d;
}
.training26-atb-continue:hover { border-color: #16181d; }


/* =====================================================================
   BUY FOR A TEAM - dashboard screenshot carousel
   ---------------------------------------------------------------------
   A dashboard row with 2+ screenshots renders a Splide carousel
   (.training26-bft-mockcarousel). Dots sit below the image so they never
   cover the screenshot; arrows float subtly over the sides.
   ===================================================================== */
.training26-content .training26-bft-mockcarousel { position: relative; min-width: 0; }
.training26-content .training26-bft-mockcarousel .splide__slide .training26-bft-mockimg {
    display: block; width: 100%;
}
.training26-content .training26-bft-mockcarousel .splide__pagination {
    position: static; padding: .65rem 0 0; display: flex; justify-content: center;
}
.training26-content .training26-bft-mockcarousel .splide__pagination__page {
    background: #cfcfd4; margin: 0 .25rem;
}
.training26-content .training26-bft-mockcarousel .splide__pagination__page.is-active {
    background: var(--training26-primary); transform: scale(1.25);
}
.training26-content .training26-bft-mockcarousel .splide__arrow {
    background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.2); opacity: .92;
    width: 2.2rem; height: 2.2rem;
}
.training26-content .training26-bft-mockcarousel .splide__arrow svg { fill: #333; width: 1rem; height: 1rem; }
.training26-content .training26-bft-mockcarousel .splide__arrow:hover { opacity: 1; }


/* ---- Lightbox prev/next (multi-screenshot rows) ---- */
.training26-bft-lightbox .training26-bft-lightbox-nav {
    position: fixed; top: 50%; transform: translateY(-50%);
    z-index: 2001; cursor: pointer;
    width: 2.9rem; height: 2.9rem; border-radius: 50%;
    border: 0; background: rgba(255,255,255,.14); color: #fff;
    font-size: 1.15rem; line-height: 1;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s;
}
.training26-bft-lightbox .training26-bft-lightbox-nav:hover { background: rgba(255,255,255,.3); }
.training26-bft-lightbox [data-lb-prev] { left: 1.1rem; }
.training26-bft-lightbox [data-lb-next] { right: 1.1rem; }
.training26-bft-lightbox .training26-bft-lightbox-count {
    position: fixed; bottom: 1.2rem; left: 50%; transform: translateX(-50%);
    z-index: 2001; color: #fff; font-size: .95rem; letter-spacing: .06em;
    background: rgba(0,0,0,.45); padding: .25rem .8rem; border-radius: 999px;
}

/* ============================================================
   Outcomes / combined (Case studies + Star Learners)
   Stacked layout on the Case Studies page. Zone A (case studies)
   uses these training26-oc-* rules; Zone B (star learners) reuses
   the training26-sl-* archive components above.
   ============================================================ */

/* ---- Combined hero (dark - case studies lead) ---- */
.training26-content .training26-oc-hero {
    position: relative; overflow: hidden; color: #fff;
    background:
        radial-gradient(130% 120% at 88% 6%, rgba(236,38,105,.30), transparent 52%),
        linear-gradient(158deg, #232327 0%, #161618 55%, #0e0e0f 100%);
}
.training26-content .training26-oc-hero::before {
    content: ""; position: absolute; inset: 0; opacity: .05; pointer-events: none;
    background: repeating-linear-gradient(90deg, #fff 0 2px, transparent 2px 13px);
}
/* Photo hero - editor-supplied image via --oc-hero-img. A magenta-tinted
   left-dark scrim keeps the white text on the left fully readable while the
   photo shows through on the right (same treatment as the detail heroes). */
.training26-content .training26-oc-hero.has-photo {
    background-image:
        radial-gradient(120% 130% at 90% 10%, rgba(236,38,105,.30), transparent 48%),
        linear-gradient(90deg, rgba(13,13,14,.94) 0%, rgba(13,13,14,.86) 30%, rgba(13,13,14,.55) 62%, rgba(13,13,14,.28) 100%),
        var(--oc-hero-img);
    background-size: cover;
    background-position: center right;
}
.training26-content .training26-oc-hero.has-photo::before { display: none; }
@media (max-width: 991.98px) {
    .training26-content .training26-oc-hero.has-photo {
        background-image:
            linear-gradient(180deg, rgba(13,13,14,.84) 0%, rgba(13,13,14,.74) 50%, rgba(13,13,14,.92) 100%),
            var(--oc-hero-img);
        background-position: center;
    }
}
.training26-content .training26-oc-hero-inner { position: relative; max-width: 900px; padding: 4.75rem 0 3rem; }
.training26-content .training26-oc-hero-eyebrow {
    display: inline-block; font-size: .72rem; font-weight: 700;
    letter-spacing: .18em; text-transform: uppercase; color: #ff8bbb; margin-bottom: 1rem;
}
.training26-content .training26-oc-hero-title {
    font-size: clamp(2.1rem, 5vw, 3.35rem); font-weight: 800;
    line-height: 1.08; letter-spacing: -.02em; margin: 0 0 1.05rem; color: #fff;
}
.training26-content .training26-oc-hero-lede {
    font-size: 1.14rem; line-height: 1.7; color: #d3d3d6; max-width: 660px; margin: 0 0 1.75rem;
}
/* Bolded section names in the lede; "Learner stories" is also a jump link
   down to the section, which sits a long way below the fold. */
.training26-content .training26-oc-hero-lede strong { color: #fff; font-weight: 700; }
.training26-content .training26-oc-hero-lede a {
    color: #fff; text-decoration: underline;
    text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.45);
}
.training26-content .training26-oc-hero-lede a:hover { text-decoration-color: #fff; }
.training26-content .training26-oc-hero-stats { display: flex; flex-wrap: wrap; gap: .6rem .75rem; }
.training26-content .training26-oc-hero-stat {
    display: inline-flex; align-items: baseline; gap: .5rem;
    background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.12);
    border-radius: 999px; padding: .5rem 1rem;
}
.training26-content .training26-oc-hero-stat b { font-size: 1.05rem; font-weight: 800; color: #fff; }
.training26-content .training26-oc-hero-stat span { font-size: .82rem; color: #cfcfd3; }
/* The learner-stories stat doubles as a jump link to the section. */
.training26-content a.training26-oc-hero-stat { text-decoration: none; }
.training26-content a.training26-oc-hero-stat:hover {
    background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32);
}

/* ---- In-page jump nav ---- */
.training26-content .training26-oc-jump {
    position: sticky; top: 0; z-index: 40;
    background: rgba(255,255,255,.92); backdrop-filter: blur(8px);
    border-bottom: 1px solid #ececee;
}
.training26-content .training26-oc-jump-inner { display: flex; gap: .4rem; align-items: center; padding: .55rem 0; }
.training26-content .training26-oc-jump a {
    font-size: .82rem; font-weight: 700; letter-spacing: .02em; text-decoration: none;
    color: #444; padding: .35rem .85rem; border-radius: 999px; border: 1px solid transparent;
}
.training26-content .training26-oc-jump a:not(.training26-oc-jump-nominate):hover { background: #f4f4f6; color: #111; }
.training26-content .training26-oc-jump-count { display: inline-block; margin-left: .35rem; font-size: .72rem; font-weight: 700; color: var(--training26-primary-text); }
.training26-content .training26-oc-jump-spacer { flex: 1 1 auto; }
.training26-content .training26-oc-jump-nominate {
    font-size: .8rem; font-weight: 700; color: #fff !important;
    background: var(--training26-primary); border-radius: 999px; padding: .4rem .95rem !important;
}
.training26-content .training26-oc-jump-nominate:hover { background: var(--training26-primary-hover); color: #fff !important; }
@media (max-width: 575.98px) { .training26-content .training26-oc-jump-nominate { display: none; } }

/* ---- Section head (both zones) ---- */
.training26-content .training26-oc-sechead { display: flex; align-items: flex-end; justify-content: space-between; gap: 1rem; margin-bottom: 1.6rem; }
.training26-content .training26-oc-sechead h2 { font-size: clamp(1.6rem, 3vw, 2.15rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.1; margin: .35rem 0 0; }
.training26-content .training26-oc-sechead-lede { color: #55555b; font-size: 1rem; max-width: 560px; margin: .5rem 0 0; }
.training26-content .training26-oc-sechead-aside { flex: 0 0 auto; text-align: right; color: #6d6d73; font-size: .85rem; }
.training26-content .training26-oc-eyebrow-pink { color: var(--training26-primary-text); }

/* ---- Case-study feature cards (primary zone) ---- */
.training26-content .training26-oc-cs-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
@media (max-width: 991.98px) { .training26-content .training26-oc-cs-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 639.98px) { .training26-content .training26-oc-cs-grid { grid-template-columns: 1fr; } }

.training26-content .training26-oc-cs-card {
    display: flex; flex-direction: column; background: #fff;
    border: 1px solid #e7e7ea; border-radius: 16px; overflow: hidden;
    text-decoration: none; color: inherit; transition: box-shadow .18s, transform .18s, border-color .18s;
}
.training26-content .training26-oc-cs-card:hover { transform: translateY(-3px); box-shadow: 0 18px 40px -22px rgba(15,15,20,.45); border-color: #d9d9de; }
.training26-content .training26-oc-cs-card-media {
    position: relative; aspect-ratio: 16 / 10; background-size: cover; background-position: center;
}
.training26-content .training26-oc-cs-card-media.is-empty {
    background:
        radial-gradient(120% 120% at 85% 12%, rgba(236,38,105,.32), transparent 55%),
        linear-gradient(150deg, #33333a 0%, #17171a 100%);
}
.training26-content .training26-oc-cs-card-region {
    position: absolute; left: 12px; top: 12px;
    display: inline-flex; align-items: center; gap: .4rem;
    background: rgba(13,13,14,.72); color: #fff; font-size: .72rem; font-weight: 700;
    letter-spacing: .04em; padding: .32rem .7rem; border-radius: 999px;
}
.training26-content .training26-oc-cs-card-region i { color: var(--training26-primary-text); }
.training26-content .training26-oc-cs-card-body { padding: 1.15rem 1.25rem 0; flex: 1 1 auto; }
.training26-content .training26-oc-cs-card-kicker {
    font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
    color: var(--training26-primary-text); margin: 0 0 .45rem;
}
.training26-content .training26-oc-cs-card-title { font-size: 1.18rem; font-weight: 800; line-height: 1.25; margin: 0 0 .55rem; letter-spacing: -.01em; }
.training26-content .training26-oc-cs-card-lede { font-size: .93rem; line-height: 1.6; color: #55555b; margin: 0; }
.training26-content .training26-oc-cs-stats { display: flex; gap: 1.1rem; padding: 1.05rem 1.25rem; margin-top: 1rem; border-top: 1px solid #eeeef0; }
.training26-content .training26-oc-cs-stat-num { font-size: 1.3rem; font-weight: 800; line-height: 1; color: #111; }
.training26-content .training26-oc-cs-stat-num.is-accent { color: var(--training26-primary-text); }
.training26-content .training26-oc-cs-stat-lbl { display: block; font-size: .72rem; color: #6d6d73; margin-top: .25rem; }
.training26-content .training26-oc-cs-card-foot {
    display: flex; align-items: center; justify-content: space-between;
    padding: .85rem 1.25rem; border-top: 1px solid #eeeef0; margin-top: auto;
}
.training26-content .training26-oc-cs-card-read { font-weight: 700; font-size: .88rem; color: var(--training26-primary-text); }
.training26-content .training26-oc-cs-card-tag { font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: #6d6d73; }

/* ---- Zone framing ---- */
.training26-content .training26-oc-zone-primary { padding: 3.25rem 0 3.5rem; }
.training26-content .training26-oc-zone-secondary { padding: 0 0 1rem; background: #f7f7f9; border-top: 1px solid #ececee; }
.training26-content .training26-oc-zone-secondary .training26-oc-sechead { padding-top: 3rem; }

/* --------------------------------------------------------------------------
   Accessibility page (store26Accessibility) - training26-a11y-*
   -------------------------------------------------------------------------- */
.training26-content .training26-a11y-hero { padding: 3.5rem 0 2.25rem; }
.training26-content .training26-a11y-title {
    font-size: clamp(2rem, 4.5vw, 3rem); font-weight: 800; letter-spacing: -.02em;
    line-height: 1.12; margin: 0 0 1rem; max-width: 40rem;
}
.training26-content .training26-a11y-intro {
    font-size: 1.08rem; line-height: 1.65; color: #55555b; max-width: 44rem; margin: 0;
}
.training26-content .training26-a11y-section-title {
    font-size: 1.55rem; font-weight: 800; letter-spacing: -.01em; margin: 0 0 1.5rem;
}
.training26-content .training26-a11y-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem;
}
.training26-content .training26-a11y-grid-2 { grid-template-columns: repeat(2, 1fr); max-width: 52rem; }
.training26-content .training26-a11y-card {
    background: #fff; border: 1px solid #ececee; border-radius: 14px;
    padding: 1.4rem 1.5rem;
}
.training26-content .training26-a11y-card-icon {
    display: inline-flex; align-items: center; justify-content: center;
    width: 2.6rem; height: 2.6rem; border-radius: 10px; margin-bottom: .85rem;
    background: rgba(236, 38, 105, .09); color: var(--training26-primary-text); font-size: 1.05rem;
}
.training26-content .training26-a11y-card-title { font-size: 1.05rem; font-weight: 800; margin: 0 0 .45rem; letter-spacing: -.01em; }
.training26-content .training26-a11y-card-body { font-size: .93rem; line-height: 1.6; color: #55555b; margin: 0; }
.training26-content .training26-a11y-tools {
    padding: 3rem 0; background: #f7f7f9; border-top: 1px solid #ececee; border-bottom: 1px solid #ececee;
}
.training26-content .training26-a11y-tools-intro { font-size: 1rem; color: #55555b; margin: -0.75rem 0 1.5rem; max-width: 44rem; }
.training26-content .training26-a11y-card-tool { border-color: rgba(236, 38, 105, .25); }
.training26-content .training26-a11y-panels { padding-bottom: 1rem; }
.training26-content .training26-a11y-panel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.training26-content .training26-a11y-panel {
    background: #fff; border: 1px solid #ececee; border-radius: 14px; padding: 1.6rem 1.7rem;
}
.training26-content .training26-a11y-panel-highlight { background: rgba(236, 38, 105, .05); border-color: rgba(236, 38, 105, .25); }
.training26-content .training26-a11y-panel-title { font-size: 1.25rem; font-weight: 800; margin: 0 0 .75rem; letter-spacing: -.01em; }
.training26-content .training26-a11y-panel-body { font-size: .95rem; line-height: 1.65; color: #47474d; }
.training26-content .training26-a11y-panel-body p:last-child { margin-bottom: 0; }
.training26-content .training26-a11y-cta { padding: 3rem 0 3.75rem; text-align: center; }
.training26-content .training26-a11y-cta-title { font-size: 1.6rem; font-weight: 800; margin: 0 0 .5rem; letter-spacing: -.01em; }
.training26-content .training26-a11y-cta-body { font-size: 1rem; color: #55555b; margin: 0 0 1.4rem; }
.training26-content .training26-a11y-cta-btn {
    display: inline-block; padding: .8rem 1.9rem; border-radius: 999px;
    background: var(--training26-primary); color: #fff; font-weight: 700; text-decoration: none;
}
.training26-content .training26-a11y-cta-btn:hover { background: var(--training26-primary-hover); color: #fff; }
@media (max-width: 991.98px) {
    .training26-content .training26-a11y-grid { grid-template-columns: repeat(2, 1fr); }
    .training26-content .training26-a11y-panel-grid { grid-template-columns: 1fr; }
}
@media (max-width: 575.98px) {
    .training26-content .training26-a11y-grid,
    .training26-content .training26-a11y-grid-2 { grid-template-columns: 1fr; }
    .training26-content .training26-a11y-hero { padding: 2.5rem 0 1.5rem; }
}

/* ---- Product page: "Designed for every learner" accessibility strip ---- */
.training26-content .training26-pdt-a11y {
    display: flex; align-items: center; justify-content: space-between; gap: 1rem;
    flex-wrap: wrap; margin: 1.1rem 0 1.4rem; padding: .8rem 1.15rem;
    background: rgba(236, 38, 105, .04); border: 1px solid rgba(236, 38, 105, .18);
    border-radius: 12px;
}
.training26-content .training26-pdt-a11y-list {
    display: flex; flex-wrap: wrap; gap: .35rem 1.15rem;
    list-style: none; margin: 0; padding: 0;
}
.training26-content .training26-pdt-a11y-list li {
    font-size: .85rem; font-weight: 600; color: #47474d; white-space: nowrap;
}
.training26-content .training26-pdt-a11y-list i {
    color: var(--training26-primary-text); margin-right: .35rem; font-size: .8rem;
}
.training26-content .training26-pdt-a11y-link {
    font-size: .85rem; font-weight: 700; color: var(--training26-primary-text);
    text-decoration: none; white-space: nowrap;
}
.training26-content .training26-pdt-a11y-link:hover { text-decoration: underline; }
@media (max-width: 575.98px) {
    .training26-content .training26-pdt-a11y { flex-direction: column; align-items: flex-start; gap: .6rem; }
}

/* In-rail variant: the strip now sits in the 380px right column between the
   price box and the course photo, so the row layout has no room - stack the
   box and its list vertically instead. The rail's own flex gap handles
   spacing, so drop the strip's standalone margins. */
.training26-content .training26-pdt-rail .training26-pdt-a11y {
    flex-direction: column; align-items: flex-start; gap: .6rem; margin: 0;
}
.training26-content .training26-pdt-rail .training26-pdt-a11y-list {
    flex-direction: column; gap: .5rem;
}

/* ---- Accessibility page: "See it in action" screenshot strip ---- */
.training26-content .training26-a11y-shots { padding-top: 0; }
.training26-content .training26-a11y-shots-grid {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.1rem;
}
.training26-content .training26-a11y-shot {
    margin: 0; background: #fff; border: 1px solid #ececee; border-radius: 14px;
    padding: .8rem; display: flex; flex-direction: column; gap: .6rem;
}
.training26-content .training26-a11y-shot img {
    width: 100%; height: auto; border-radius: 8px; border: 1px solid #ececee; display: block;
}
.training26-content .training26-a11y-shot figcaption {
    font-size: .84rem; line-height: 1.5; color: #55555b; padding: 0 .2rem .2rem;
}
@media (max-width: 991.98px) {
    .training26-content .training26-a11y-shots-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 575.98px) {
    .training26-content .training26-a11y-shots-grid { grid-template-columns: 1fr; }
}

/* ---- A11y screenshots: spacing fix + lightbox ---- */
/* The strip previously inherited hp-section's 4.5rem bottom which stacked
   with the panels section's 4.5rem top into a ~9rem void. */
.training26-content .training26-a11y-shots { padding: 3rem 0 1rem; }
.training26-content .training26-a11y-panels { padding-top: 2rem; }
.training26-content .training26-a11y-shot-link { display: block; cursor: zoom-in; }
.training26-content .training26-a11y-shot-link:focus-visible {
    outline: 3px solid var(--training26-primary); outline-offset: 2px; border-radius: 8px;
}
.training26-a11y-lb {
    position: fixed; inset: 0; z-index: 1080;
    background: rgba(13, 13, 13, .93);
    display: flex; align-items: center; justify-content: center; gap: .75rem;
    padding: 2.5rem 1rem 1.5rem;
}
.training26-a11y-lb[hidden] { display: none; }
.training26-a11y-lb-figure { margin: 0; max-width: min(1100px, 88vw); text-align: center; }
.training26-a11y-lb-figure img {
    max-width: 100%; max-height: 78vh; border-radius: 10px;
    box-shadow: 0 12px 48px rgba(0, 0, 0, .55); background: #fff;
}
.training26-a11y-lb-figure figcaption { color: #e8e8ea; font-size: .95rem; margin-top: .9rem; }
.training26-a11y-lb-btn {
    flex: 0 0 auto; width: 2.9rem; height: 2.9rem; border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .08);
    color: #fff; font-size: 1.5rem; line-height: 1; cursor: pointer;
}
.training26-a11y-lb-btn:hover { background: rgba(255, 255, 255, .22); }
.training26-a11y-lb-btn:focus-visible { outline: 3px solid var(--training26-primary); outline-offset: 2px; }
.training26-a11y-lb-close { position: absolute; top: 1.1rem; right: 1.1rem; }
@media (max-width: 575.98px) {
    .training26-a11y-lb { gap: .4rem; padding: 3.25rem .5rem 1rem; }
    .training26-a11y-lb-figure img { max-height: 70vh; }
}

/* --------------------------------------------------------------------------
   Accessibility overrides (2026-07-22 audit)
   -------------------------------------------------------------------------- */

/* Pink text sitting on the pink chip tint (#fde4ec) needs the deeper chip
   token to reach 4.5:1 - the general text token only manages 4.3:1 there. */
.training26-mobile-listitem.is-active,
.training26-content .training26-pdt-chip.is-primary,
.training26-content .training26-hp-course-chips li.is-primary,
.training26-content .training26-sl-featured-tag,
.training26-content .training26-sl-card-coursetag,
.training26-content .training26-bft-mock-chip,
.training26-content .training26-pdt-avatar,
.training26-content .training26-hp-quote-avatar,
.training26-content .training26-cf-avatar {
    color: var(--training26-primary-chip);
}

.training26-content .training26-sl-took {
    color: var(--training26-primary-chip) !important;
}

/* Branded keyboard focus for the custom buttons: their :focus style is just
   the hover colour swap, which isn't a visible indicator on its own. The
   dark outline + white halo pair stays visible on white, pink and dark
   surfaces alike. */
.training26-btn:focus-visible {
    outline: 3px solid #111;
    outline-offset: 2px;
    box-shadow: 0 0 0 6px rgba(255, 255, 255, 0.85);
}

/* Skip-to-content link (trainingBase.cshtml): visually hidden until focused,
   then pinned top-left above the header. */
.training26-skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 2000;
    padding: 0.75rem 1.25rem;
    background: #111;
    /* !important: generic link hover/focus colours otherwise repaint this
       pink on the near-black chip */
    color: #fff !important;
    font-weight: 700;
    text-decoration: none;
    border-radius: 0 0 8px 0;
}
.training26-skip-link:focus,
.training26-skip-link:focus-visible {
    left: 0;
    outline: 3px solid #fff;
    outline-offset: -6px;
    color: #fff !important;
}

/* =====================================================================
   404 page (store26FourOhFour.cshtml) - training26-styled error page.
   Provisioned alongside docs/store/404-provisioning/.
   ===================================================================== */
.training26-content .training26-404 {
    padding: clamp(2.5rem, 7vw, 5.5rem) 0 clamp(3rem, 7vw, 5rem);
}
.training26-content .training26-404-hero {
    position: relative;
    max-width: 720px;
}
/* Oversized decorative numeral behind the copy - tint only, never text-on-text. */
.training26-content .training26-404-num {
    position: absolute;
    top: -0.18em;
    left: -0.06em;
    z-index: 0;
    font-size: clamp(7rem, 22vw, 13rem);
    font-weight: 800;
    line-height: 1;
    letter-spacing: -0.02em;
    color: #fde4ec;
    user-select: none;
    pointer-events: none;
}
.training26-content .training26-404-hero > :not(.training26-404-num) {
    position: relative;
    z-index: 1;
}
.training26-content .training26-404-hero .training26-hp-eyebrow {
    padding-top: clamp(3.2rem, 9vw, 5.5rem);
}
.training26-content .training26-404-title {
    font-size: clamp(2rem, 4.5vw, 3rem);
    font-weight: 800;
    line-height: 1.15;
    margin: 0 0 1.1rem;
}
.training26-content .training26-404-intro {
    font-size: 1.08rem;
    line-height: 1.65;
    color: #55555a;
    max-width: 56ch;
    margin: 0 0 1.9rem;
}
.training26-content .training26-404-ctas {
    display: flex;
    flex-wrap: wrap;
    gap: 0.8rem;
    align-items: center;
}
.training26-content .training26-404-ctas .training26-btn { gap: 0.55rem; }
.training26-content .training26-404-btn-ghost {
    background: #fff;
    color: var(--training26-primary-text);
    border: 2px solid var(--training26-primary);
}
.training26-content .training26-404-btn-ghost:hover,
.training26-content .training26-404-btn-ghost:focus {
    background: var(--training26-primary);
    color: #fff;
}
.training26-content .training26-404-links {
    margin-top: clamp(2.6rem, 6vw, 4rem);
}
.training26-content .training26-404-links h2 {
    font-size: 1.15rem;
    font-weight: 700;
    margin: 0 0 1.1rem;
}
.training26-content .training26-404-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 0.9rem;
}
.training26-content .training26-404-card {
    display: flex;
    gap: 0.85rem;
    align-items: flex-start;
    padding: 1.1rem 1.2rem;
    border: 1px solid #ececec;
    border-radius: 12px;
    text-decoration: none;
    color: inherit;
    transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.training26-content .training26-404-card:hover,
.training26-content .training26-404-card:focus {
    border-color: var(--training26-primary);
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.07);
    transform: translateY(-2px);
    color: inherit;
}
.training26-content .training26-404-card-icon {
    flex: 0 0 auto;
    width: 2.4rem;
    height: 2.4rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: #fde4ec;
    color: var(--training26-primary-chip);
    font-size: 0.95rem;
}
.training26-content .training26-404-card-body { display: block; }
.training26-content .training26-404-card-title {
    display: block;
    font-weight: 700;
    font-size: 1rem;
    line-height: 1.3;
}
.training26-content .training26-404-card-desc {
    display: block;
    font-size: 0.88rem;
    line-height: 1.5;
    color: #55555a;
    margin-top: 0.2rem;
}
@media (max-width: 575.98px) {
    .training26-content .training26-404-ctas .training26-btn {
        width: 100%;
    }
}

/* =====================================================================
   Terms & conditions page (store26Terms.cshtml) - reuses the FAQ hero/
   TOC/card styling; these are the terms-only additions.
   Provisioned alongside docs/store/terms-provisioning/.
   ===================================================================== */
.training26-content .training26-terms-updated {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    background: #fde4ec;
    color: var(--training26-primary-chip);
    font-size: 0.82rem;
    font-weight: 700;
    border-radius: 999px;
    padding: 0.35rem 0.95rem;
    margin: 1.1rem 0 0;
}
/* Legal-text rhythm inside the section cards. */
.training26-content .training26-terms-body p {
    margin: 0 0 0.9rem;
}
.training26-content .training26-terms-body p:last-child { margin-bottom: 0; }
.training26-content .training26-terms-body ul {
    margin: 0 0 0.9rem;
    padding-left: 1.3rem;
}
.training26-content .training26-terms-body li { margin-bottom: 0.4rem; }
.training26-content .training26-terms-body a {
    color: var(--training26-primary-text);
}
.training26-content .training26-terms-contact {
    margin-top: 2rem;
    border: 1px solid #ececec;
    border-radius: 12px;
    padding: 1.5rem;
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
    align-items: center;
    justify-content: space-between;
}
.training26-content .training26-terms-contact h2 {
    font-size: 1.1rem;
    font-weight: 700;
    margin: 0;
}
.training26-content .training26-terms-contact p {
    font-size: 0.92rem;
    color: #55555a;
    margin: 0.3rem 0 0;
}
.training26-content .training26-terms-contact .training26-btn {
    gap: 0.55rem;
    white-space: normal;
    word-break: break-word;
}

/* The terms lede is a full paragraph, not the FAQ hero's one-liner - the
   inherited 60ch cap leaves it huddled in the left half of the hero, so
   let it run most of the content width at a slightly smaller size. */
.training26-content .training26-terms-lede {
    max-width: 100ch;
    font-size: 1.02rem;
}

/* ============================================================
   Sector page sections (.training26-secx-*)
   Optional block-list sections on store26SectorPage, rendered by
   Views/Partials/Store/_sectorSections.cshtml. Built for the College
   sector page; any sector can adopt. Mockup: mockups/college-sector-page.html
   ============================================================ */

/* ---- Feature cards ---- */
.training26-secx-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.25rem; }
.training26-secx-cards[data-count="3"] { grid-template-columns: repeat(3, 1fr); }
.training26-secx-card {
    background: #fff; border: 1px solid #e9e9ef; border-radius: 14px;
    padding: 1.4rem 1.25rem;
}
.training26-secx-card i { color: var(--training26-primary); font-size: 1.25rem; display: block; margin-bottom: .7rem; }
.training26-secx-card h3 { font-size: .98rem; font-weight: 700; margin-bottom: .4rem; }
.training26-secx-card p { font-size: .88rem; color: #4a4a55; line-height: 1.55; margin: 0; }
@media (max-width: 991.98px) { .training26-secx-cards, .training26-secx-cards[data-count="3"] { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .training26-secx-cards, .training26-secx-cards[data-count="3"] { grid-template-columns: 1fr; } }

.training26-secx-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.training26-secx-chip {
    font-size: .8rem; font-weight: 600; background: #f4f4f7; color: #44444f;
    border-radius: 999px; padding: .4rem .9rem;
}
.training26-secx-chip i { color: var(--training26-primary); margin-right: .4rem; }

/* ---- Role map ---- */
.training26-secx-role-row {
    display: grid; grid-template-columns: 230px 1fr 110px 80px; gap: 1.25rem;
    align-items: center; padding: 1.15rem 0; border-bottom: 1px solid #e9e9ef;
}
.training26-secx-role-row:last-child { border-bottom: 0; }
/* Consecutive rows for the same role render as one group: the separator INSIDE
   a group goes dashed, and repeated labels stay in the grid + accessibility
   tree (opacity, not visibility) but disappear for sighted users. */
.training26-secx-role-row-grouped { border-bottom-style: dashed; border-bottom-color: #ececf2; }
.training26-secx-role-who-cont { opacity: 0; }
.training26-secx-role-who { font-weight: 700; color: #1b1b22; font-size: .95rem; }
.training26-secx-role-course { font-size: .92rem; color: #4a4a55; line-height: 1.5; }
.training26-secx-role-course a { color: var(--training26-primary-text); font-weight: 600; text-decoration: none; }
.training26-secx-role-course a:hover { text-decoration: underline; }
.training26-secx-role-level {
    font-size: .66rem; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
    background: #fff; border: 1px solid #e2e2ea; color: #55555f; padding: .3rem .65rem;
    border-radius: 999px; white-space: nowrap; text-align: center;
}
.training26-secx-role-price { font-weight: 800; font-size: 1rem; text-align: right; white-space: nowrap; }
@media (max-width: 991.98px) {
    .training26-secx-role-row { grid-template-columns: 1fr auto auto; gap: .5rem .75rem; }
    .training26-secx-role-course { grid-column: 1 / -1; }
}

/* ---- Role map: ladder layout (2026-08-04) ----
   Steps up a development path with a progress spine. The old grouped-row
   table styles above are KEPT for rollback (useLadder flag in the view). */
.training26-secx-ladder { position: relative; padding-left: 2.1rem; }
.training26-secx-ladder::before {
    content: ""; position: absolute; left: .55rem; top: .9rem; bottom: 1.1rem;
    width: 3px; background: linear-gradient(#e2e2ea, var(--training26-primary)); border-radius: 2px;
}
.training26-secx-ladder-step { position: relative; padding: 0 0 2.1rem; }
.training26-secx-ladder-step:last-child { padding-bottom: 0; }
.training26-secx-ladder-step::before {
    content: ""; position: absolute; left: -2.1rem; top: .22rem;
    width: 1.3rem; height: 1.3rem; border-radius: 50%;
    background: #fff; border: 3px solid #d76a92;
}
.training26-secx-ladder-step:first-child::before { border-color: #b9b9c6; }
.training26-secx-ladder-step:last-child::before { border-color: var(--training26-primary); }
.training26-secx-ladder-head { display: flex; align-items: baseline; gap: .75rem; flex-wrap: wrap; margin-bottom: .65rem; }
.training26-secx-ladder-level {
    font-size: .72rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
    color: var(--training26-primary-text);
}
.training26-secx-ladder-for { font-weight: 800; font-size: 1.05rem; color: #1b1b22; }
.training26-secx-ladder-price { color: #4a4a55; font-size: .85rem; font-weight: 600; }
.training26-secx-ladder-courses {
    display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: .7rem .9rem; align-items: stretch;
    /* Every card in a step matches the tallest, even across wrapped rows. */
    grid-auto-rows: 1fr;
}
/* The card IS the link - whole surface clickable, quiet ink title that warms
   to primary on hover, border + shadow lift for affordance. */
.training26-secx-ladder-card {
    background: #fff; border: 1px solid #e9e9ef; border-radius: 10px;
    padding: .8rem 1rem;
    display: flex; flex-direction: column; gap: .2rem; align-items: flex-start;
    justify-content: center;
    text-decoration: none;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.training26-secx-ladder-card:hover,
.training26-secx-ladder-card:focus-visible {
    border-color: var(--training26-primary);
    box-shadow: 0 2px 10px rgba(224, 30, 95, .12);
    text-decoration: none;
}
/* Muted section bands need cards to lift off the grey. */
.training26-section-muted .training26-secx-ladder-card { box-shadow: 0 1px 2px rgba(20,20,30,.04); }
.training26-section-muted .training26-secx-ladder-card:hover,
.training26-section-muted .training26-secx-ladder-card:focus-visible { box-shadow: 0 2px 10px rgba(224, 30, 95, .12); }
.training26-secx-ladder-card-role {
    font-size: .64rem; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; color: #7a7a88;
}
.training26-secx-ladder-card-title { color: #16181d; font-weight: 700; font-size: .95rem; line-height: 1.4; }
.training26-secx-ladder-card:hover .training26-secx-ladder-card-title,
.training26-secx-ladder-card:focus-visible .training26-secx-ladder-card-title { color: var(--training26-primary-text); }
.training26-secx-ladder-card-price { font-weight: 800; font-size: .95rem; margin-top: auto; }
/* Optional bold closing line under a role map (sectorRoleMap `note`). */
.training26-secx-ladder-note { font-weight: 700; color: #1b1b22; max-width: 70ch; margin: 1.75rem 0 0; }

/* Centre the section head over the pyramid - the standard left-aligned head
   reads lopsided above a centred diagram. */
.training26-secx-pyramid-section .training26-section-head { justify-content: center; text-align: center; }

/* ---- Role map: pyramid layout (sectorRoleMap pyramidLayout) ----
   First row = top tier, later rows widen beneath, joined by a "supports"
   arrow. Built for Community facilitators' "Course or toolkit?"
   (Rachel, 10 Aug 2026); mockup wwwroot/mockups/community-course-or-toolkit-pyramid.html. */
.training26-secx-pyramid { max-width: 760px; margin: 0 auto; }
.training26-secx-pyramid-tier {
    width: min(var(--tier-w, 100%), 100%); margin: 0 auto;
    background: #fff; border: 1px solid #e9e9ef;
    border-left: 4px solid var(--training26-primary); border-radius: 12px;
    padding: 1.35rem 1.6rem; text-align: center;
    box-shadow: 0 1px 2px rgba(20,20,30,.05);
}
.training26-secx-pyramid-people { display: flex; justify-content: center; gap: .35rem; margin-bottom: .55rem; }
.training26-secx-pyramid-people i { color: #d76a92; font-size: 1.05rem; }
.training26-secx-pyramid-tier:first-child .training26-secx-pyramid-people i {
    color: var(--training26-primary); font-size: 1.3rem;
}
.training26-secx-pyramid-role { font-size: 1.02rem; font-weight: 800; color: #1b1b22; }
.training26-secx-pyramid-course { margin-top: .3rem; }
.training26-secx-pyramid-course a { color: var(--training26-primary-text); font-weight: 700; text-decoration: none; font-size: .98rem; }
.training26-secx-pyramid-course a:hover { text-decoration: underline; }
.training26-secx-pyramid-price { margin-top: .35rem; font-size: .85rem; font-weight: 600; color: #4a4a55; }
.training26-secx-pyramid-connector {
    display: flex; flex-direction: column; align-items: center; gap: .1rem;
    padding: .9rem 0;
}
.training26-secx-pyramid-connector span {
    font-size: .72rem; font-weight: 800; letter-spacing: .1em;
    text-transform: uppercase; color: var(--training26-primary-text);
}
.training26-secx-pyramid-connector i { color: var(--training26-primary); font-size: 1.2rem; }
/* The closing note centres under a pyramid (it is left-aligned under the ladder). */
.training26-secx-pyramid ~ .training26-secx-ladder-note { text-align: center; margin-left: auto; margin-right: auto; }
@media (max-width: 575.98px) {
    .training26-secx-pyramid-tier { width: 100%; }
}
@media (max-width: 767.98px) {
    .training26-secx-ladder { padding-left: 1.55rem; }
    .training26-secx-ladder::before { left: .32rem; }
    .training26-secx-ladder-step::before { left: -1.55rem; width: 1.05rem; height: 1.05rem; }
    .training26-secx-ladder-step { padding-bottom: 1.6rem; }
    /* Stacked cards: natural heights - equalising only matters in multi-column rows. */
    .training26-secx-ladder-courses { grid-template-columns: 1fr; grid-auto-rows: auto; }
    .training26-secx-ladder-card { min-height: 0; }
}

/* ---- Quotes ---- */
/* Optional lede between a section head and its cards (sectorQuotes intro). */
.training26-secx-intro { max-width: 70ch; color: #5a5a60; line-height: 1.6; margin: -1.25rem 0 1.75rem; }
.training26-secx-quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.25rem; }
.training26-secx-quote { background: #fff; border: 1px solid #e9e9ef; border-radius: 14px; padding: 1.6rem 1.5rem; }
.training26-secx-quote-mark { font-family: Georgia, serif; font-size: 2.4rem; line-height: .6; color: var(--training26-primary); opacity: .28; }
.training26-secx-quote p { font-size: .93rem; line-height: 1.65; color: #33333d; margin: .75rem 0 0; font-style: italic; }
.training26-secx-quote-from { margin-top: .9rem; font-size: .76rem; font-weight: 700; color: #81818e; text-transform: uppercase; letter-spacing: .06em; }
@media (max-width: 767.98px) { .training26-secx-quotes { grid-template-columns: 1fr; } }

/* ---- FAQ ---- */
.training26-secx-faq details { border: 1px solid #e9e9ef; border-radius: 12px; padding: 1.05rem 1.25rem; margin-bottom: .7rem; background: #fff; }
.training26-secx-faq summary { font-weight: 700; font-size: .98rem; cursor: pointer; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
.training26-secx-faq summary::-webkit-details-marker { display: none; }
.training26-secx-faq summary::after {
    content: '\f078'; font-family: 'Font Awesome 6 Free'; font-weight: 900;
    font-size: .78rem; color: var(--training26-primary); transition: transform .15s;
}
.training26-secx-faq details[open] summary::after { transform: rotate(180deg); }
.training26-secx-faq-answer { margin-top: .8rem; font-size: .92rem; color: #4a4a55; line-height: 1.65; }
.training26-secx-faq-answer p { margin: 0 0 .6rem; }
.training26-secx-faq-answer p:last-child { margin-bottom: 0; }

/* ---- Link strip ---- */
.training26-secx-strip {
    display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
    background: #f4f4f7; border-radius: 14px; padding: 1.25rem 1.5rem;
}
.training26-secx-strip i { color: var(--training26-primary); font-size: 1.2rem; }
.training26-secx-strip p { margin: 0; font-size: .93rem; color: #4a4a55; flex: 1 1 260px; }
.training26-secx-strip a { color: var(--training26-primary-text); font-weight: 700; text-decoration: none; white-space: nowrap; }
.training26-secx-strip a:hover { text-decoration: underline; }
/* Muted sections need the strip to sit on white, not grey-on-grey. */
.training26-section-muted .training26-secx-strip { background: #fff; border: 1px solid #e9e9ef; }

/* ---- CTA ---- */
.training26-secx-cta {
    background: linear-gradient(120deg, #1b1b22, #33131f 60%, #4a0f2b);
    border-radius: 18px; padding: 3rem 2.5rem; text-align: center; color: #fff;
}
.training26-secx-cta h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin-bottom: .75rem; }
.training26-secx-cta p { color: #d8d8e2; max-width: 620px; margin: 0 auto 1.6rem; }
.training26-secx-cta-btns { display: flex; gap: .75rem; justify-content: center; flex-wrap: wrap; }
.training26-secx-btn-white { background: #fff; color: #1b1b22; border-radius: 999px; padding: .7rem 1.7rem; font-weight: 700; text-decoration: none; }
.training26-secx-btn-white:hover { color: #1b1b22; opacity: .9; }
.training26-secx-btn-ghost { border: 1px solid rgba(255,255,255,.45); color: #fff; border-radius: 999px; padding: .7rem 1.7rem; font-weight: 700; text-decoration: none; }
.training26-secx-btn-ghost:hover { color: #fff; border-color: #fff; }

/* If a sector carries sections ABOVE the course grid, the views toolbar needs
   breathing room from the preceding section band (it normally follows the hero,
   which brings its own spacing). */
.training26-secx + .training26-sector-views { padding-top: 3rem; }

/* ---- Other-sector cross-links (auto, bottom of every sector page) ---- */
.training26-sector-others { padding: 2.4rem 0 3rem; }
.training26-sector-others p { font-weight: 700; margin: 0 0 .7rem; color: #16181d; }
.training26-sector-others ul {
    list-style: none; display: flex; flex-wrap: wrap; gap: .6rem;
    margin: 0; padding: 0;
}
.training26-sector-others a {
    display: inline-block; border: 1px solid #dcdce2; border-radius: 999px;
    padding: .45rem 1.1rem; font-weight: 600; text-decoration: none; color: #16181d;
}
.training26-sector-others a:hover,
.training26-sector-others a:focus-visible {
    border-color: var(--training26-primary); color: var(--training26-primary-text);
}

/* ---- Case study photo gallery (optional section, see store26CaseStudy) ---- */
.training26-tcs-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }
.training26-tcs-photo-grid[data-count="2"] { grid-template-columns: repeat(2, 1fr); }
.training26-tcs-photo-grid[data-count="1"] { grid-template-columns: minmax(0, 640px); justify-content: center; }
.training26-tcs-photo-card {
    margin: 0; background: #fff; border: 1px solid #e9e9ef; border-radius: 14px;
    overflow: hidden; box-shadow: 0 6px 18px rgba(20,20,40,.06);
}
.training26-tcs-photo-card img { width: 100%; height: auto; display: block; }
.training26-tcs-photo-cap {
    padding: .75rem 1rem; font-size: .82rem; color: #5a5a66; line-height: 1.5;
}
.training26-tcs-photo-cap i { color: var(--training26-primary); margin-right: .4rem; }
@media (max-width: 991.98px) { .training26-tcs-photo-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 575.98px) { .training26-tcs-photo-grid, .training26-tcs-photo-grid[data-count="2"] { grid-template-columns: 1fr; } }

/* Case-study photo cards are zoomable - expand badge mirrors the BFT
   screenshot affordance; caption bar extends the shared lightbox overlay. */
.training26-tcs-photo-link { position: relative; display: block; }
.training26-tcs-photo-zoom {
    position: absolute; bottom: .8rem; right: .8rem;
    width: 2.1rem; height: 2.1rem; border-radius: 6px;
    background: rgba(0, 0, 0, 0.6); color: #fff;
    display: inline-flex; align-items: center; justify-content: center;
    font-size: .85rem; opacity: 0; transition: opacity .15s;
}
.training26-tcs-photo-card:hover .training26-tcs-photo-zoom,
.training26-tcs-photo-link:focus-visible .training26-tcs-photo-zoom { opacity: 1; }
.training26-bft-lightbox .training26-bft-lightbox-cap {
    position: fixed; bottom: 3.1rem; left: 50%; transform: translateX(-50%);
    z-index: 2001; color: #fff; font-size: .95rem; line-height: 1.5;
    max-width: min(90vw, 46rem); text-align: center;
    background: rgba(0,0,0,.45); padding: .35rem 1rem; border-radius: 999px;
}

/* Course links on case-study rollout cards + feedback attributions. */
.training26-tcs-rollout-title a {
    color: var(--training26-primary-text); text-decoration: none;
}
.training26-tcs-rollout-title a:hover { text-decoration: underline; }
/* A title holding two linked course names joined by bare text ("X and Y",
   Cork's entry card): the black 700 connective reads heavier than the pink
   links beside it, so quieten bare text in linked titles only - the links
   keep the h3's 700, and titles with no link at all are untouched. */
.training26-tcs-rollout-title:has(a) { font-weight: 400; }
.training26-tcs-rollout-title:has(a) a { font-weight: 700; }
.training26-tcs-feedback-foot a {
    color: var(--training26-primary-text); font-weight: 700; text-decoration: none;
}
.training26-tcs-feedback-foot a:hover { text-decoration: underline; }

/* Rollout cards: the eyebrow goes grey (matching the def-list labels) so the
   pink accent means exactly one thing on these cards - "clickable course".
   Linked titles and in-description course names carry it; nothing else. */
.training26-tcs-rollout-eyebrow { color: #71717f; }
.training26-tcs-rollout-desc a {
    color: var(--training26-primary-text); font-weight: 600; text-decoration: none;
}
.training26-tcs-rollout-desc a:hover { text-decoration: underline; }

/* --------------------------------------------------------------------------
   Sign-out control (2026-08-19 security fix, L3)
   /logout moved from GET to POST + antiforgery, so the sign-out links became
   forms with submit buttons. These rules make the button render exactly as the
   anchor did. .training26-mobile-listitem already neutralises button chrome
   (border:none / width:100% / text-align:left), so it needs nothing extra.
   -------------------------------------------------------------------------- */

.training26-logout-form {
    margin: 0;
    padding: 0;
}

.checkout-page--v2 .training26-logout-form button.co-signedin__out {
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    cursor: pointer;
}

/* ==========================================================================
   Homepage hero "Browse" sector dropdown (Rachel 2026-08-20).
   The primary CTA is now a <button> opening the market's sector list; the
   shared .training26-subnav-courses-menu skin is drawn to hang flush off
   the nav bar, so under the hero's rounded pill give it back a top border,
   corners and a little separation.
   ========================================================================== */
.training26-content .training26-hp-hero-browse {
    cursor: pointer;
    gap: 0.5rem;
}
.training26-content .training26-hp-hero-actions .training26-subnav-courses-menu {
    margin-top: 0.4rem !important;
    border: 1px solid #d0d0d0 !important;
    border-radius: 10px !important;
}