/*
Theme Name: Ecomcademy
Theme URI: https://ecomcademy.com
Author: WDM
Author URI: https://wdmarket.com
Description: Custom WordPress theme for the Ecomcademy non-profit community.
Version: 1.3.1
Text Domain: ecomcademy
*/

/* Remove global html scroll-behavior to prevent browser scroll-restoration bugs on page navigation */


:root {
    /* WD.Market Warm Cream Friendly Aesthetic */
    --color-background: #F4F0E6; /* Warm cream page background */
    --color-surface: #ffffff; /* Pure white for cards */
    --color-dark-teal: #0A1312; /* Dark background matching hero */
    --color-dark-surface: #151d1c; /* Dark card surface */
    
    --color-lime: #7CB342; /* Friendly Leaf/Apple Green */
    --color-lime-hover: #6CA034; 
    --color-brand-green: #7CB342;
    --color-primary: #7CB342;
    /* Text-safe green. The brand lime is 2.50:1 on white and 2.20:1 on the
       cream page background, both below WCAG AA. This is the same hue,
       darkened until it passes on both (5.57:1 and 4.89:1). Use it for text
       on light surfaces; keep --color-primary for fills and dark contexts. */
    --color-primary-on-light: #4A7326;
    --color-primary-hover: #6CA034; 
    
    --color-text-main: #111111; /* Warm charcoal black headings */
    --color-text-muted: #5A5A54; /* Medium muted warm text */
    --color-pill-bg: #EFEBE0; /* Soft beige pill background */
    --color-pill-border: #D9D6CC; /* Soft beige pill border */

    /* Typography */
    --font-family-main: 'Onest', 'Manrope', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;
}

body {
    background-color: var(--color-background);
    color: var(--color-text-muted);
    font-family: var(--font-family-main);
    font-size: var(--font-size-base);
    line-height: var(--line-height-base);
    margin: 0;
    padding: 0;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4, h5, h6 {
    color: var(--color-text-main);
    margin-top: 0;
    font-weight: 700; /* Increased weight for wdmarket style */
    letter-spacing: -0.02em; /* Tighter tracking */
}

a {
    color: var(--color-primary-on-light);
    text-decoration: none;
    transition: color 0.3s ease;
}

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

.container {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 20px;
}

/* Utilities */
.d-flex { display: flex; }
.align-items-center { align-items: center; }
.justify-content-center { justify-content: center; }
.justify-content-between { justify-content: space-between; }
.text-center { text-align: center; }
.mt-4 { margin-top: 30px; }

/* Buttons */
.btn {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.btn-primary {
    background-color: var(--color-primary);
    /* Dark text on the lime fill reads at 7.54:1. White was 2.50:1. */
    color: var(--color-dark-teal);
}

.btn-primary:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-dark-teal);
}

.btn-lime {
    background-color: var(--color-lime);
    color: var(--color-dark-teal);
}

.btn-lime:hover {
    background-color: var(--color-lime-hover);
    color: var(--color-dark-teal);
}

/* Join Us CTA (header, footer) */
.btn-join {
    background-color: var(--color-primary);
    color: var(--color-dark-teal);
}

.btn-join:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-dark-teal);
}

.btn-secondary {
    background-color: transparent;
    border: 1px solid #d1d5db;
    color: var(--color-text-main);
}

.btn-secondary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-on-light);
}

.btn-large {
    padding: 16px 32px;
    font-size: 18px;
}

/* Pill Label */
.pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background-color: var(--color-pill-bg);
    color: #555550;
    border: 1px solid var(--color-pill-border);
    padding: 6px 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-bottom: 20px;
}
.pill::before {
    content: "•";
    color: var(--color-primary);
    font-size: 16px;
}

/* Header */
.site-header {
    background-color: #F4F0E6;
    border-bottom: 1px solid rgba(0, 0, 0, 0.07);
}

.top-bar {
    background-color: #EFEBE0;
    color: #111111;
    padding: 8px 0;
    text-align: center;
    font-size: 13.5px;
    font-weight: 500;
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
}
.top-bar__cta-link { color: #111111; text-decoration: none; font-weight: 600; }
.top-bar__cta-link:hover { color: var(--color-primary-on-light); text-decoration: underline; }

.main-bar { padding: 20px 0; }
.site-title { margin: 0; font-size: 24px; color: #111111; display: flex; align-items: center; gap: 10px;}
.site-title a { color: #111111; }
.site-title svg { width: 32px; height: 32px; }
.site-branding img, .custom-logo {
    max-height: 45px;
    width: auto;
}

.main-navigation > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    gap: 30px;
}
.main-navigation a {
    color: #102B20;
    font-weight: 500;
    font-size: 15px;
}
.main-navigation a:hover {
    color: var(--color-primary-on-light);
}

.site-header .btn-primary, .header-buttons .btn {
    background-color: #081716;
    color: #ffffff;
    border-radius: 999px;
    padding: 10px 24px;
    font-weight: 500;
}
.site-header .btn-primary:hover, .header-buttons .btn:hover {
    background-color: var(--color-primary);
    color: #ffffff;
}

.header-buttons {
    display: flex;
    align-items: center;
    gap: 10px;
}

/* My account: the signed-in member's way into /account/, /write/ and the rest,
   which are noindexed and not in the menu. The toggle reads as part of the
   navigation rather than as another button: no outline, the label at the nav
   links' size and weight, and the member's initial in a disc that takes the
   header buttons' dark fill and lime hover. It matches .header-buttons .btn at
   (0,2,0) to drop that rule's fill and padding. */
.header-account {
    position: relative;
}

.header-buttons .header-account__toggle {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 5px 14px 5px 5px;
    background-color: transparent;
    color: #102B20;
    border: 0;
    /* A <button> does not inherit the page font on its own. */
    font-family: inherit;
    font-size: 15px;
    font-weight: 500;
    line-height: 1.2;
    cursor: pointer;
}

.header-buttons .header-account__toggle:hover,
.header-buttons .header-account__toggle[aria-expanded="true"] {
    background-color: rgba(10, 19, 18, 0.06);
    color: #102B20;
}

.header-account__avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background-color: #081716;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.header-account__toggle:hover .header-account__avatar,
.header-account__toggle[aria-expanded="true"] .header-account__avatar {
    background-color: var(--color-primary);
    color: var(--color-dark-teal);
}

/* A photo cannot change colour, so it takes the lime as a ring instead. */
.header-account__avatar--photo {
    object-fit: cover;
    transition: box-shadow 0.3s ease;
}

.header-account__toggle:hover .header-account__avatar--photo,
.header-account__toggle[aria-expanded="true"] .header-account__avatar--photo {
    box-shadow: 0 0 0 2px var(--color-primary);
}

/* Same chevron as the menu's own dropdowns. */
.header-account__toggle::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease;
}

.header-account__toggle[aria-expanded="true"]::after {
    transform: translateY(1px) rotate(-135deg);
}

/* Panel styled after .main-navigation .sub-menu. */
.header-account__menu {
    position: absolute;
    top: calc(100% + 10px);
    right: 0;
    z-index: 10;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 220px;
    margin: 0;
    padding: 10px;
    list-style: none;
    background-color: var(--color-surface);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(10, 19, 18, 0.14);
}

/* display: flex above would otherwise beat the hidden attribute. */
.header-account__menu[hidden] {
    display: none;
}

.header-account__menu a {
    display: block;
    padding: 9px 12px;
    border-radius: 9px;
    color: var(--color-text-main);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: background-color 0.18s ease, color 0.18s ease;
}

.header-account__menu a:hover,
.header-account__menu a:focus-visible {
    background-color: var(--color-pill-bg);
    color: var(--color-primary-on-light);
}

.header-account__who {
    padding: 4px 12px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
    font-size: 13px;
    color: var(--color-text-muted);
    white-space: nowrap;
}

.header-account__who strong {
    color: var(--color-text-main);
    font-weight: 600;
}

/* Log out is last and set apart, so it is not hit on the way to Saved. */
.header-account__signout {
    margin-top: 4px;
    padding-top: 4px;
    border-top: 1px solid rgba(0, 0, 0, 0.08);
}

.header-account__menu .header-account__signout a {
    color: var(--color-text-muted);
}

@media (prefers-reduced-motion: reduce) {
    .header-account__toggle::after,
    .header-account__menu a {
        transition: none;
    }
}

/* The notification bell, beside My account. A round control the size of the
   avatar disc plus its padding, in the same ink and hover wash as the account
   toggle; the unread count is a lime pill ringed in the header's cream so it
   reads as sitting on the bell rather than beside it. The panel is the account
   menu's card, wider. The list styles are shared with the Notifications tab of
   /account/, which is why they live here and not in the plugin's stylesheet:
   that one only loads on the plugin's own pages, and the bell is on all of
   them. */
.header-bell {
    position: relative;
}

.header-bell__toggle {
    position: relative;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: #102B20;
    transition: background-color 0.18s ease;
}

.header-bell__toggle:hover,
.header-bell__toggle[aria-expanded="true"] {
    background-color: rgba(10, 19, 18, 0.06);
    color: #102B20;
}

.header-bell__icon {
    display: block;
    width: 22px;
    height: 22px;
}

.header-bell__count {
    position: absolute;
    top: 3px;
    right: 1px;
    min-width: 18px;
    height: 18px;
    padding: 0 5px;
    box-sizing: border-box;
    border-radius: 999px;
    background-color: var(--color-primary);
    color: var(--color-dark-teal);
    box-shadow: 0 0 0 2px #F4F0E6;
    font-size: 11px;
    font-weight: 700;
    line-height: 18px;
    text-align: center;
}

.header-bell__count[hidden] {
    display: none;
}

.header-bell__panel {
    position: absolute;
    top: calc(100% + 10px);
    right: -8px;
    z-index: 10;
    width: 380px;
    max-width: calc(100vw - 32px);
    padding: 8px;
    box-sizing: border-box;
    background-color: var(--color-surface);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 14px;
    box-shadow: 0 18px 40px rgba(10, 19, 18, 0.14);
}

.header-bell__panel[hidden] {
    display: none;
}

.header-bell__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 10px 10px;
    margin-bottom: 4px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.header-bell__title {
    color: var(--color-text-main);
    font-size: 15px;
    font-weight: 600;
}

.header-bell__all {
    color: var(--color-primary-on-light);
    font-size: 13px;
    font-weight: 500;
}

.header-bell__body {
    max-height: min(440px, 70vh);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.ecc-notifications__list {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.ecc-notification__link {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 10px;
    border-radius: 9px;
    color: var(--color-text-muted);
    text-decoration: none;
    transition: background-color 0.18s ease;
}

.ecc-notification__link:hover,
.ecc-notification__link:focus-visible {
    background-color: var(--color-pill-bg);
    color: var(--color-text-muted);
}

/* New ones carry a faint lime wash and a dot, so they still read as new once
   the panel has marked them read underneath. */
.ecc-notification--unread .ecc-notification__link {
    padding-right: 28px;
    background-color: rgba(124, 179, 66, 0.10);
}

.ecc-notification--unread .ecc-notification__link:hover,
.ecc-notification--unread .ecc-notification__link:focus-visible {
    background-color: rgba(124, 179, 66, 0.18);
}

.ecc-notification--unread .ecc-notification__link::after {
    content: "";
    position: absolute;
    top: 17px;
    right: 11px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-primary-on-light);
}

.ecc-notification__badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background-color: #081716;
    color: var(--color-primary);
    font-size: 14px;
    font-weight: 700;
    line-height: 1;
}

.ecc-notification__badge--photo {
    object-fit: cover;
}

.ecc-notification__badge--icon {
    background-color: var(--color-pill-bg);
    color: var(--color-primary-on-light);
}

/* Sized here: the plugin's .ecc-icon rules are not loaded on every page. */
.ecc-notification__badge svg {
    width: 18px;
    height: 18px;
}

.ecc-notification__text {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    font-size: 14px;
    line-height: 1.4;
}

.ecc-notification__what {
    color: var(--color-text-main);
}

.ecc-notification__what strong {
    font-weight: 600;
}

.ecc-notification__what em {
    font-style: normal;
    font-weight: 600;
}

.ecc-notification__detail {
    display: -webkit-box;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    font-size: 13px;
    overflow-wrap: anywhere;
}

.ecc-notification__when {
    font-size: 12px;
}

.ecc-notifications__empty,
.ecc-notifications__status {
    margin: 0;
    padding: 20px 10px;
    color: var(--color-text-muted);
    font-size: 14px;
    text-align: center;
}

/* The Notifications tab of /account/: the same list on a card of its own. */
.ecc-notifications--page {
    padding: 8px;
    background-color: var(--color-surface);
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 14px;
}

.ecc-notifications__markall {
    display: flex;
    justify-content: flex-end;
    margin-bottom: 10px;
}

@media (prefers-reduced-motion: reduce) {
    .header-bell__toggle,
    .ecc-notification__link {
        transition: none;
    }
}

/* Below 991px the bell would sit inside the closed hamburger panel, where it
   helps nobody. It goes, the account list's Notifications entry carries the
   count instead, and a dot on the hamburger says there is something to see. */
@media (max-width: 991px) {
    .header-bell {
        display: none;
    }

    .mobile-menu-toggle.has-unread {
        position: relative;
    }

    .mobile-menu-toggle.has-unread::after {
        content: "";
        position: absolute;
        top: 6px;
        right: 5px;
        width: 9px;
        height: 9px;
        border-radius: 50%;
        background-color: var(--color-primary);
        box-shadow: 0 0 0 2px #F4F0E6;
    }
}

/* Log in sits beside Join free when signed out. Join free is the primary
   action and keeps the fill; Log in is the secondary, so it mirrors Log out and
   matches the same (0,2,0) specificity that beats .header-buttons .btn. */
.header-buttons .header-login {
    background-color: transparent;
    color: var(--color-text-muted);
    border: 1px solid rgba(0, 0, 0, 0.14);
    font-weight: 600;
}
.header-buttons .header-login:hover {
    background-color: transparent;
    color: var(--color-text-main);
    border-color: rgba(0, 0, 0, 0.30);
}

/* Below 991px .header-buttons becomes the hamburger panel. As with the menu's
   own dropdowns there is no hover there, so the toggle goes and the links are
   simply listed, whatever the hidden attribute says. */
@media (max-width: 991px) {
    /* .btn too: the panel's .header-buttons .btn rule further down is also
       !important and would otherwise win on order. */
    .header-buttons .btn.header-account__toggle {
        display: none !important;
    }

    .header-account__menu,
    .header-account__menu[hidden] {
        position: static;
        display: flex;
        min-width: 0;
        margin-top: 10px;
        box-shadow: none;
    }

    .header-account__menu a,
    .header-account__who {
        white-space: normal;
    }
}

/* Join Us keeps the lime fill so it reads as the primary action in the header. */
.site-header .btn-join, .header-buttons .btn-join {
    background-color: var(--color-primary);
    color: var(--color-dark-teal);
}
.site-header .btn-join:hover, .header-buttons .btn-join:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-dark-teal);
}

/* Sections */
.section {
    padding: 100px 0;
}
.section__header {
    margin-bottom: 60px;
    max-width: 800px;
    margin-left: auto;
    margin-right: auto;
}
.section__header h2 {
    font-size: 42px;
    margin-bottom: 20px;
    letter-spacing: -0.02em;
}
.section__header p {
    font-size: 18px;
}

/* Backgrounds */
.bg-cream { background-color: var(--color-background); color: #111111; }
.bg-white { background-color: #ffffff; }
.bg-light-green { background-color: var(--color-background); }
.bg-dark-teal { 
    background-color: var(--color-dark-teal); 
    color: #ffffff; 
}
.bg-dark-teal h1, .bg-dark-teal h2, .bg-dark-teal h3, .bg-dark-teal h4, .bg-dark-teal h5, .bg-dark-teal .hero__subheadline {
    color: rgba(255, 255, 255, 0.92);
}
.bg-dark-teal p {
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
}
.bg-dark-teal .hero__supporting {
    color: rgba(255, 255, 255, 0.85);
}

.text-highlight-green {
    color: var(--color-primary-on-light);
    position: relative;
    display: inline-block;
}
.text-highlight-green::after {
    content: "";
    position: absolute;
    bottom: 2px;
    left: 0;
    width: 100%;
    height: 4px;
    background-color: rgba(124, 179, 66, 0.35);
    border-radius: 2px;
}

.hero-badge-item.dark-badge-item {
    background-color: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
}

/* Redesigned Dark Hero Section */
.hero {
    padding: 85px 0 0;
    background-color: #0A1312;
    position: relative;
    overflow: hidden;
}

.hero-wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: flex-end;
}

.hero__composition {
    position: relative;
    width: 100%;
    min-height: 580px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.hero__person-wrapper {
    position: absolute;
    bottom: 0;
    right: 2%;
    z-index: 2;
    width: 95%;
    max-width: 520px;
}

.hero__composition-person {
    position: relative;
    z-index: 2;
    width: 100%;
    margin: 0;
    padding: 0;
    line-height: 0;
}
.hero__composition-person img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
    margin: 0;
    padding: 0;
    vertical-align: bottom;
}

.pill-dark {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.15);
    color: #ffffff;
}
.pill-lime {
    background: rgba(211, 251, 82, 0.1);
    border: 1px solid rgba(124, 179, 66, 0.3);
    color: var(--color-lime);
}

/* Hero tagline (Section 1, front-page.php): short "Learn. Develop. Share." line
   sitting between the audience pill and the H1. Scoped under .hero so it beats
   `.bg-dark-teal p` above, which would otherwise force it to 0.7 white / 400. */
.hero .hero-tagline {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-lime);
    margin-top: 18px;
    margin-bottom: 0;
}

.hero-title {
    font-size: clamp(38px, 4.5vw, 54px);
    line-height: 1.15;
    color: #ffffff;
    margin-top: 15px;
    margin-bottom: 24px;
    letter-spacing: -0.02em;
    font-weight: 700;
}

/* Hero section: red hero title variant (home page hero) */
.hero-title--red {
    color: #FF4D4D;
}

.text-green-highlight {
    color: #7CB342;
}

.hero-subheadline {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.8);
    max-width: 520px;
    margin-bottom: 35px;
}

.hero__actions {
    gap: 16px;
    margin-bottom: 40px;
}

.hero .btn-ghost,
.bg-dark-teal .btn-ghost {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, 0.3) !important;
    color: #ffffff !important;
    padding: 14px 32px !important;
    border-radius: 30px !important;
    font-weight: 700 !important;
    font-size: 16px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-decoration: none !important;
    transition: all 0.2s ease !important;
}
.hero .btn-ghost:hover,
.bg-dark-teal .btn-ghost:hover {
    border-color: #C0FA3F !important;
    color: #C0FA3F !important;
    background: rgba(255, 255, 255, 0.08) !important;
    transform: translateY(-1px);
}

.hero-badges-list {
    gap: 10px;
    flex-wrap: wrap;
}

.dark-badge-item {
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.85);
    padding: 7px 15px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    display: inline-flex;
    align-items: center;
    gap: 8px;
}

/* Orbiting Icons & Person Cutout Composition */
.hero__composition {
    position: relative;
    width: 100%;
    min-height: 520px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.wdm-orbit-icon {
    position: absolute;
    width: 60px;
    height: 60px;
    background: #191c20;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(0,0,0,0.3);
    z-index: 3;
    animation: floatIcon 6s ease-in-out infinite;
    transition: transform 0.3s ease;
}

.wdm-orbit-icon:hover {
    transform: scale(1.1);
}

.wdm-orbit-icon img {
    max-width: 30px;
    max-height: 30px;
    object-fit: contain;
}

/* Specific Positions on the orbit */
.wdm-icon-1 { top: 8%; left: -8%; animation-delay: 0s; }
.wdm-icon-2 { top: 1%; left: 37%; animation-delay: 1s; }
.wdm-icon-ga { top: 4%; right: -5%; animation-delay: 2.5s; width: 56px; height: 56px; }
.wdm-icon-3 { top: 32%; right: -12%; animation-delay: 2s; }
.wdm-icon-4 { top: 38%; left: -10%; animation-delay: 3s; width: 60px; height: 60px; }
.wdm-icon-5 { top: 62%; right: -8%; animation-delay: 4s; }
.wdm-icon-6 { top: 68%; left: -5%; animation-delay: 5s; width: 52px; height: 52px; }

@keyframes floatIcon {
    0% { transform: translateY(0px) rotate(0deg); }
    50% { transform: translateY(-12px) rotate(3deg); }
    100% { transform: translateY(0px) rotate(0deg); }
}

/* Hero Floating Widgets (WD Market Shopify Maintenance Style) */
.widget-sales-monitoring {
    position: absolute;
    top: auto;
    bottom: 12%;
    right: 15%;
    left: auto;
    z-index: 4;
    width: 210px;
    background: linear-gradient(135deg, rgba(16, 40, 38, 0.95), rgba(7, 24, 25, 0.95));
    border: 1px solid rgba(211, 251, 82, 0.25);
    border-radius: 14px;
    padding: 16px 18px 12px;
    box-shadow: 0 20px 40px rgba(0,0,0,0.4);
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    animation: floatIcon 7s ease-in-out infinite;
}

.widget-sales-monitoring__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 12px;
}

.widget-sales-monitoring__badge {
    position: absolute;
    top: -14px;
    right: -14px;
    width: 44px;
    height: 44px;
    background: #192b28;
    border: 1px solid rgba(211, 251, 82, 0.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

.widget-sales-monitoring__badge img {
    width: 22px;
    height: 22px;
    object-fit: contain;
}



.widget-pill-speed {
    position: absolute;
    top: 55%;
    left: -15%;
    z-index: 4;
    background: rgba(22, 42, 40, 0.95);
    border: 1px solid rgba(211, 251, 82, 0.3);
    color: var(--color-lime);
    font-size: 13px;
    font-weight: 500;
    padding: 10px 20px;
    border-radius: 100px;
    display: flex;
    align-items: center;
    gap: 8px;
    box-shadow: 0 15px 30px rgba(0,0,0,0.3);
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
    animation: floatIcon 8s ease-in-out infinite 1s;
}

/* Layout Grids */
.grid { display: grid; gap: 30px; }
.grid--3-col { grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); }
.grid--4-col { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }

/* 2-Column Split Section */
.split-section {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 60px;
    align-items: flex-start;
}
.split-content h2 { font-size: 42px; line-height: 1.1; margin-bottom: 20px; }
.split-graphic { margin-top: 65px; }

.feature-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 16px;
}
.feature-list li {
    display: flex;
    gap: 16px;
    align-items: flex-start;
}
.feature-list__icon {
    width: 40px;
    height: 40px;
    background-color: var(--color-pill-bg);
    color: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.feature-list li strong {
    display: block;
    font-size: 16px;
    color: var(--color-text-main);
    margin-bottom: 2px;
}
.feature-list li span {
    font-size: 14.5px;
    color: var(--color-text-muted);
    line-height: 1.4;
    display: block;
}

.play-button:hover { transform: scale(1.05); }

/* Cards Styling */
.card {
    background-color: var(--color-surface);
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    border: 1px solid rgba(0,0,0,0.05);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover {
    transform: translateY(-8px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.08);
}
.card-content {
    padding: 30px;
}
.card h3, .card h4 {
    margin-bottom: 15px;
    font-size: 20px;
}
.card p { margin: 0; font-size: 15px; }

/* Specific Card Types */
.dark-card {
    background-color: #0b2221;
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
    color: white;
}
.dark-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(211,251,82,0.1);
    border: 1px solid rgba(211,251,82,0.3);
}
.dark-card h3 {
    color: white;
}
.dark-card p {
    color: rgba(255,255,255,0.7);
}
.card-image-wrap {
    width: 100%;
    height: 220px;
    overflow: hidden;
    position: relative;
}
.card-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.dark-card:hover .card-image-wrap img {
    transform: scale(1.05);
}

.card--benefit { padding: 40px 30px; }
.card--benefit .icon-wrapper {
    width: 60px;
    height: 60px;
    background: transparent;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
}

.branded-card {
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.4s ease;
    border: 1px solid rgba(0,0,0,0.05);
}
.branded-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 20px 40px rgba(149, 191, 71, 0.15);
    border-color: rgba(149, 191, 71, 0.3);
}

.card--category { padding: 32px 28px; }
.card--category .icon-wrapper {
    width: 44px;
    height: 44px;
    background: transparent;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    margin-bottom: 20px;
}

.topic-card {
    background-color: #ffffff;
    border: 1px solid rgba(8, 23, 22, 0.08);
    border-radius: 16px;
    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.35s ease, border-color 0.35s ease;
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.02);
}

.topic-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 20px 35px rgba(149, 191, 71, 0.14);
    border-color: rgba(149, 191, 71, 0.4);
}

.topic-card h3,
.topic-card h4 {
    color: #081716;
    font-size: 19px;
    font-weight: 600;
    margin-bottom: 12px;
}

.topic-card p {
    color: #586865;
    font-size: 14.5px;
    line-height: 1.5;
}


/* Front page Section 5: Latest podcast. A light media card on the cream page,
   sitting directly above the topics section (also cream), so the section drops
   its bottom padding and the card carries the separation. */
.podcast { padding-bottom: 0; }
.podcast__card {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr);
    gap: 56px;
    align-items: center;
    padding: 16px 56px 16px 16px;
    border-radius: 28px;
    overflow: hidden;
    background:
        radial-gradient(90% 120% at 100% 0%, rgba(124, 179, 66, 0.10) 0%, rgba(124, 179, 66, 0) 60%),
        var(--color-surface);
    border: 1px solid rgba(10, 19, 18, 0.06);
    box-shadow:
        0 1px 2px rgba(10, 19, 18, 0.04),
        0 24px 48px -24px rgba(10, 19, 18, 0.18);
}
.podcast__video {
    position: relative;
    aspect-ratio: 16 / 9;
    border-radius: 18px;
    overflow: hidden;
    background-color: var(--color-dark-teal);
}
.podcast__video iframe {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
}
.podcast__eyebrow {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 18px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-primary-on-light);
}
.podcast__dot {
    position: relative;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background-color: var(--color-lime);
}
.podcast__dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    background-color: var(--color-lime);
    animation: podcast-pulse 2s ease-out infinite;
}
@keyframes podcast-pulse {
    0%   { transform: scale(1); opacity: 0.6; }
    100% { transform: scale(3); opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
    .podcast__dot::after { animation: none; }
}
.podcast__title {
    color: var(--color-text-main);
    font-size: 34px;
    line-height: 1.15;
    letter-spacing: -0.025em;
    margin-bottom: 14px;
}
.podcast__topics {
    display: flex;
    flex-wrap: wrap;
    margin: 0 0 20px;
    padding: 0;
    list-style: none;
    font-size: 14px;
    font-weight: 500;
    color: var(--color-text-muted);
}
.podcast__topics li + li::before {
    content: "/";
    margin: 0 10px;
    color: rgba(10, 19, 18, 0.2);
}
.podcast__text {
    color: var(--color-text-muted);
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 32px;
}
.podcast__footer {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-top: 24px;
    border-top: 1px solid rgba(10, 19, 18, 0.08);
}
.podcast__guest {
    display: flex;
    align-items: center;
    gap: 12px;
}
.podcast__avatar {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    object-fit: cover;
    box-shadow: 0 0 0 2px var(--color-surface), 0 0 0 4px rgba(124, 179, 66, 0.45);
}
.podcast__guest-name {
    color: var(--color-text-main);
    font-size: 16px;
    font-weight: 600;
}
.podcast__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 20px;
    border-radius: 999px;
    background-color: var(--color-lime);
    color: var(--color-dark-teal);
    font-size: 15px;
    font-weight: 600;
    text-decoration: none;
    transition: background-color 0.2s ease, transform 0.2s ease;
}
.podcast__cta:hover {
    background-color: var(--color-lime-hover);
    color: var(--color-dark-teal);
    transform: translateY(-1px);
}
.podcast__cta:focus-visible {
    outline: 2px solid var(--color-dark-teal);
    outline-offset: 3px;
}

@media (max-width: 991px) {
    .podcast__card {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
        padding: 12px 12px 28px;
        border-radius: 24px;
    }
    .podcast__body { padding: 0 14px; }
    .podcast__title { font-size: 27px; }
}

/* Course topics: 8 cards. The grid is declared in half-columns; each card spans two of them. */
.topics-grid {
    display: grid;
    grid-template-columns: repeat(8, minmax(0, 1fr));
    gap: 30px;
    align-items: stretch;
}
.topics-grid > .topic-card { grid-column: span 2; }
/* 4 per row -> two full rows of 4, nothing to centre */

@media (max-width: 1199px) {
    /* 3 per row -> the last row holds 2 cards, centred */
    .topics-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .topics-grid > .topic-card:nth-child(7) { grid-column: 2 / span 2; }
    .topics-grid > .topic-card:nth-child(8) { grid-column: 4 / span 2; }
}

@media (max-width: 991px) {
    /* 2 per row -> four full rows */
    .topics-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }
    .topics-grid > .topic-card:nth-child(7),
    .topics-grid > .topic-card:nth-child(8) { grid-column: span 2; }
}

@media (max-width: 700px) {
    .topics-grid { grid-template-columns: minmax(0, 1fr); }
    .topics-grid > .topic-card,
    .topics-grid > .topic-card:nth-child(5),
    .topics-grid > .topic-card:nth-child(7),
    .topics-grid > .topic-card:nth-child(8) { grid-column: 1 / -1; }
}
/* Why Us Consolidated Grid */
.why-card {
    background-color: #ffffff;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 16px;
    padding: 22px 20px;
    display: flex;
    align-items: flex-start;
    gap: 14px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.02);
    transition: transform 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}
.why-card:hover {
    transform: translateY(-4px);
    border-color: rgba(124, 179, 66, 0.5);
    box-shadow: 0 12px 25px rgba(124, 179, 66, 0.12);
}
.why-card__icon {
    width: 32px;
    height: 32px;
    background-color: #EFEBE0;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: 2px;
}
.why-card strong {
    display: block;
    font-size: 15px;
    color: #111111;
    font-weight: 600;
    margin-bottom: 4px;
    line-height: 1.3;
}
.why-card span {
    font-size: 13.5px;
    color: #5A5A54;
    line-height: 1.4;
    display: block;
}

/* Why Us: balance the two columns so the text side is not left with dead space.
   Cards run 2-up (8 items = 4 tidy rows) and both columns center against each other. */
.why-us-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    align-items: stretch;
}
.why-section .split-section {
    grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
    gap: 56px;
    align-items: center;
}
.why-section .split-graphic { margin-top: 0; }
.why-section .split-content { max-width: 520px; }

@media (max-width: 1199px) {
    .why-section .split-section { gap: 40px; }
}

/* Step Timeline */
.step-timeline { counter-reset: step-counter; }
.step-item { position: relative; padding-top: 50px; }
.step-item h3,
.step-item h4 { margin-bottom: 8px; }
.step-item p { margin-top: 0; }
.step-number {
    position: absolute;
    top: 0;
    left: 0;
    width: 40px;
    height: 40px;
    background-color: var(--color-pill-bg);
    color: var(--color-primary-on-light);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 18px;
}

/* Dark Mode Step Numbers */
.bg-dark-teal .step-item {
    padding-top: 68px;
}
.bg-dark-teal .step-number {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, rgba(124, 179, 66, 0.2), rgba(124, 179, 66, 0.05));
    border: 1px solid rgba(124, 179, 66, 0.4);
    color: var(--color-lime);
    font-size: 19px;
    font-weight: 700;
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), inset 0 2px 4px rgba(255, 255, 255, 0.05);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

/* Footer */
.site-footer {
    background-color: var(--color-surface);
    padding: 60px 0 20px;
    border-top: 1px solid #e5e7eb;
}
.site-info {
    text-align: center;
    margin-top: 40px;
    padding-top: 20px;
    border-top: 1px solid #e5e7eb;
    color: var(--color-text-muted);
}

/* Trust Bar */
.trust-bar {
    margin-top: 40px;
    display: flex;
    flex-wrap: wrap;
    gap: 30px;
    align-items: center;
    border-top: 1px solid rgba(255,255,255,0.1);
    padding-top: 25px;
}
.trust-bar__item {
    display: flex;
    align-items: center;
    gap: 12px;
}
.trust-bar__item strong {
    font-size: 16px;
    color: #ffffff;
    display: block;
}
.trust-bar__item span {
    font-size: 13px;
    color: rgba(255,255,255,0.7);
    display: block;
    line-height: 1.2;
}
.trust-bar__item svg {
    width: 24px;
    height: 24px;
    color: var(--color-lime);
}

/* Mission Page Styles */
.mission-hero, .mission-vision, .mission-future {
    background-color: var(--color-background);
}
.mission-why, .mission-principles {
    background-color: var(--color-surface);
}

/* Graphic Placeholder */
.graphic-placeholder {
    background: linear-gradient(135deg, #eaf6ea, #d8f1d8);
    border-radius: 12px;
    width: 480px;
    height: 320px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
    box-shadow: inset 0 0 0 1px rgba(124, 179, 66, 0.1);
}
.graphic-icon {
    background: #ffffff;
    width: 56px;
    height: 56px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
}
.graphic-placeholder p {
    color: var(--color-primary);
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 1px;
    margin: 0;
}


/* Principles Cards */
.principle-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 12px;
    padding: 30px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
}
.principle-icon {
    width: 40px;
    height: 40px;
    background: #0F5E3E;
    color: #ffffff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 20px;
}
.principle-icon svg {
    width: 20px;
    height: 20px;
}
.principle-card h3,
.principle-card h4 {
    font-size: 18px;
    margin-bottom: 12px;
}
.principle-card p {
    margin: 0;
    font-size: 14.5px;
    color: var(--color-text-muted);
}

/* Future Cards */
.future-card {
    background: #ffffff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 12px;
    padding: 25px 15px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.02);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.future-icon {
    color: #0F5E3E;
    margin-bottom: 12px;
}
.future-icon svg {
    width: 32px;
    height: 32px;
    stroke-width: 1.5;
}
.future-title {
    font-size: 16px;
    font-weight: 500;
    color: var(--color-text-main);
}

/* ==========================================================================
   Vlog Page Styles
   ========================================================================== */

/* Tabs */
.vlog-tab {
    transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.vlog-tab:hover {
    background: rgba(15, 94, 62, 0.1) !important;
    color: var(--color-primary) !important;
}

/* Vlog Short Form Track & Cards (9:16) */
.shorts-track {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    width: 100%;
}
.vlog-card-short {
    display: block;
    width: 100%;
    aspect-ratio: 9 / 16;
    height: auto;
    position: relative;
    border-radius: 16px;
    overflow: hidden;
    text-decoration: none;
    box-shadow: 0 10px 30px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}
.vlog-card-short:hover {
    transform: translateY(-8px);
}

@media (max-width: 991px) {
    .shorts-track {
        display: flex !important;
        overflow-x: auto !important;
        scroll-snap-type: x mandatory !important;
        -webkit-overflow-scrolling: touch;
        gap: 16px !important;
        padding-bottom: 20px !important;
        scrollbar-width: none;
    }
    .shorts-track::-webkit-scrollbar {
        display: none;
    }
    .vlog-card-short {
        flex: 0 0 220px !important;
        width: 220px !important;
        height: 390px !important;
        scroll-snap-align: start !important;
    }
}
.vlog-card-short__image {
    width: 100%;
    height: 100%;
    position: relative;
}
.vlog-card-short__image img, .vlog-card-short__image .img-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.vlog-card-short:hover .vlog-card-short__image img, 
.vlog-card-short:hover .vlog-card-short__image .img-placeholder {
    transform: scale(1.05);
}
.vlog-card-short__overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: linear-gradient(to top, rgba(0,0,0,0.95) 0%, rgba(0,0,0,0.55) 45%, rgba(0,0,0,0.25) 100%);
    z-index: 1;
}
.vlog-card-short__play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 60px;
    height: 60px;
    background: rgba(255,255,255,0.2);
    backdrop-filter: blur(4px);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    opacity: 0;
    z-index: 2;
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.vlog-card-short:hover .vlog-card-short__play {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
}
.vlog-card-short__content {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
    padding: 12px 14px;
    z-index: 2;
    color: #fff;
    box-sizing: border-box;
}
.vlog-card-short__content h3 {
    margin: 0;
    font-size: 13px;
    font-weight: 700;
    line-height: 1.3;
    color: #fff;
    text-shadow: 0 2px 4px rgba(0,0,0,0.9);
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    word-break: break-word;
}

/* Vlog Long Form Card (16:9) */
.vlog-card-long {
    display: flex;
    flex-direction: column;
    background: #fff;
    border-radius: 12px;
    overflow: hidden;
    text-decoration: none;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.03);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.vlog-card-long:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 35px rgba(0,0,0,0.08);
}
.vlog-card-long__image {
    width: 100%;
    aspect-ratio: 16/9;
    position: relative;
    overflow: hidden;
}
.vlog-card-long__image img, .vlog-card-long__image .img-placeholder {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.5s ease;
}
.vlog-card-long:hover .vlog-card-long__image img,
.vlog-card-long:hover .vlog-card-long__image .img-placeholder {
    transform: scale(1.05);
}
.vlog-card-long__play {
    position: absolute;
    bottom: 15px;
    right: 15px;
    width: 40px;
    height: 40px;
    background: var(--color-lime);
    color: #111;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 0.3s ease, transform 0.3s ease;
}
.vlog-card-long:hover .vlog-card-long__play {
    opacity: 1;
    transform: translateY(0);
}
.vlog-card-long__content {
    padding: 25px;
}
.vlog-meta {
    font-size: 12px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-primary-on-light);
    margin-bottom: 10px;
    display: inline-block;
}
.vlog-card-long__content h3 {
    margin: 0 0 10px 0;
    font-size: 20px;
    font-weight: 700;
    color: var(--color-text-main);
    line-height: 1.4;
}
.vlog-card-long__content p {
    margin: 0;
    font-size: 15px;
    color: var(--color-text-muted);
    line-height: 1.6;
}

/* ==========================================================================
   About Us Page Styles
   ========================================================================== */

/* Badges */
.badge-pill {
    display: inline-block;
    background: #e6f2eb;
    color: var(--color-primary-on-light);
    padding: 6px 16px;
    border-radius: 30px;
    font-size: 13px;
    font-weight: 700;
}

/* Hero Section */
.about-hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}
@media (min-width: 992px) {
    .about-hero-grid {
        grid-template-columns: 2fr 1fr;
        gap: 80px;
    }
}
.about-hero-content {
    padding-right: 20px;
}

.about-story-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
}
@media (min-width: 768px) {
    .about-story-grid {
        grid-template-columns: 1fr 1fr;
        gap: 60px;
    }
}

.about-hero-image-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background-color: #f3f9f6;
    background-image: 
      linear-gradient(rgba(15, 94, 62, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15, 94, 62, 0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    border-radius: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}
.about-hero-image-placeholder .icon-wrapper {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 15px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.05);
}
.about-hero-image-placeholder span {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 1px;
}

/* Stats Section */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 24px;
    align-items: stretch;
}
.stat-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 16px;
    padding: 30px 22px 28px;
    text-align: center;
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
    /* the theme has no global border-box reset, so set it here: without it the
       padding is added on top of the stretched grid-row height and the card
       ends up ~64px taller than its content */
    box-sizing: border-box;
    /* column layout keeps every value on the same baseline */
    display: flex;
    flex-direction: column;
    align-items: center;
}
.stat-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
    border-color: rgba(124, 179, 66, 0.35);
}
.stat-value {
    /* scales down so the longer word values stay on one line in a narrow card */
    font-size: clamp(28px, 2.6vw, 36px);
    font-weight: 800;
    color: var(--color-dark-teal);
    line-height: 1.15;
    margin-bottom: 14px;
    letter-spacing: -1px;
    white-space: nowrap;
}
.stat-value::after {
    content: "";
    display: block;
    width: 28px;
    height: 3px;
    border-radius: 2px;
    background: #7CB342;
    margin: 12px auto 0;
}
.stat-label {
    /* no ch cap here: 20ch was forcing "Industries & Business Models" onto two
       lines, which stretched every other card to match */
    font-size: 14.5px;
    line-height: 1.5;
    color: var(--color-text-muted);
    max-width: 100%;
}

@media (max-width: 991px) {
    .stats-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 20px;
    }
    .stat-value { font-size: 30px; }
}

@media (max-width: 520px) {
    .stats-grid { grid-template-columns: minmax(0, 1fr); }
}

/* Team Section */
.team-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
    gap: 30px;
}
.profile-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.profile-card.dark-card {
    background-color: #0b2221;
    border: 1px solid rgba(255,255,255,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.5);
}
.profile-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}
.profile-card__image-wrap {
    width: 100%;
    aspect-ratio: 1/1;
    background-color: #f3f9f6;
    background-image: 
      linear-gradient(rgba(15, 94, 62, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15, 94, 62, 0.05) 1px, transparent 1px);
    background-size: 20px 20px;
    display: flex;
    align-items: center;
    justify-content: center;
}
.profile-card__placeholder {
    width: 48px;
    height: 48px;
    background: #fff;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.profile-card__content {
    padding: 24px;
}
.profile-card__name {
    font-size: 18px;
    font-weight: 800;
    margin: 0 0 5px 0;
    color: var(--color-text-main);
}
.dark-card .profile-card__name,
.profile-card.dark-card .profile-card__name {
    color: white;
}
.profile-card__role {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary-on-light);
    margin-bottom: 12px;
}
.dark-card .profile-card__role,
.profile-card.dark-card .profile-card__role {
    color: var(--color-lime);
}
.profile-card__bio {
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}
.dark-card .profile-card__bio,
.profile-card.dark-card .profile-card__bio {
    color: rgba(255,255,255,0.7);
}

/* Projects Section */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 30px;
}
.project-card {
    background: #fff;
    border-radius: 16px;
    overflow: hidden;
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 4px 15px rgba(0,0,0,0.02);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.project-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(0,0,0,0.05);
}
.project-card__image-wrap {
    width: 100%;
    aspect-ratio: 16/9;
    background-color: #f3f9f6;
    background-image: 
      linear-gradient(rgba(15, 94, 62, 0.05) 1px, transparent 1px),
      linear-gradient(90deg, rgba(15, 94, 62, 0.05) 1px, transparent 1px);
    background-size: 30px 30px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
.project-card__placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}
.project-card__placeholder svg {
    background: #fff;
    padding: 10px;
    border-radius: 12px;
    width: 44px;
    height: 44px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}
.project-card__badge {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 1px;
}
.project-card__content {
    padding: 24px;
}
.project-card__title {
    font-size: 20px;
    font-weight: 800;
    margin: 0 0 5px 0;
    color: var(--color-text-main);
}
.project-card__category {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary-on-light);
    margin-bottom: 12px;
}
.project-card__desc {
    font-size: 15px;
    color: var(--color-text-muted);
    margin: 0;
    line-height: 1.5;
}

/* CTA Banner */
.about-cta-banner {
    background-color: var(--color-primary);
    border-radius: 24px;
    padding: 80px 40px;
    position: relative;
    overflow: hidden;
}

/* ==========================================================================
   Courses Page Styles
   ========================================================================== */

/* Course Components (Categories, Cards, Lessons) */

/* Course Library Grid & Cards */
.course-library-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 30px;
    align-items: stretch;
}
@media (max-width: 991px) {
    .course-library-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767px) {
    .course-library-grid {
        grid-template-columns: 1fr;
    }
}
.course-card {
    background: #fff;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    height: 100%;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.course-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 40px rgba(17,105,62,0.1);
}
.course-card-image {
    position: relative;
    overflow: hidden;
    border-radius: 16px 16px 0 0;
    background: #0f1710;
    width: 100%;
    aspect-ratio: 16 / 9;
    border-bottom: 1px solid rgba(0,0,0,0.05);
}
.course-card-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.course-card-image .play-icon {
    width: 50px;
    height: 50px;
    background: #fff;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    box-shadow: 0 8px 20px rgba(0,0,0,0.08);
    margin-bottom: 12px;
}
.course-card-image .image-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 1px;
    color: var(--color-primary-on-light);
}
.course-card-content {
    padding: 30px;
    display: flex;
    flex-direction: column;
    flex-grow: 1;
}
.course-meta {
    display: flex;
    align-items: center;
    gap: 15px;
    margin-bottom: 15px;
    font-size: 13px;
    color: var(--color-text-muted);
}
.meta-badge {
    background: #eaf3ea;
    color: var(--color-primary-on-light);
    padding: 4px 10px;
    border-radius: 6px;
    font-weight: 600;
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.meta-time {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}
.course-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
    letter-spacing: -0.5px;
}
.course-card p {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-bottom: 20px;
    line-height: 1.5;
}
.course-features {
    list-style: none;
    padding: 0;
    margin: 0 0 25px 0;
}
.course-features li {
    font-size: 13px;
    color: var(--color-text-muted);
    display: flex;
    align-items: center;
    gap: 8px;
}
.course-features li svg {
    color: var(--color-primary);
    flex-shrink: 0;
}
.btn-ghost {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: transparent;
    color: var(--color-text-muted);
    border: 1px solid rgba(0,0,0,0.1);
    padding: 12px 24px;
    border-radius: 30px;
    font-weight: 600;
    text-decoration: none;
    transition: all 0.2s ease;
    width: auto;
}
.btn-ghost:hover {
    border-color: rgba(0,0,0,0.2);
    color: var(--color-text-main);
    background: rgba(0,0,0,0.02);
}
.course-card .btn,
.course-card .btn-ghost {
    display: inline-flex;
    justify-content: center;
    align-items: center;
    margin-top: auto;
    align-self: center;
    width: auto;
}

/* Category Grid */
.courses-hero-section {
    position: relative;
    overflow: hidden;
    background-color: #faf9f6;
}
.courses-hero-section::before {
    content: '';
    position: absolute;
    top: -20%;
    right: -10%;
    width: 800px;
    height: 800px;
    background: radial-gradient(circle, rgba(17,105,62,0.06) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}
.courses-hero-section::after {
    content: '';
    position: absolute;
    bottom: -10%;
    left: -5%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(17,105,62,0.04) 0%, rgba(255,255,255,0) 70%);
    border-radius: 50%;
    z-index: 0;
    pointer-events: none;
}
.courses-hero-section .container {
    position: relative;
    z-index: 1;
}

@keyframes coursesFloat {
    0% { transform: translateY(0px); }
    50% { transform: translateY(-12px); }
    100% { transform: translateY(0px); }
}
@keyframes coursesPulsePlay {
    0% { box-shadow: 0 0 0 0 rgba(17, 105, 62, 0.2); }
    70% { box-shadow: 0 0 0 15px rgba(17, 105, 62, 0); }
    100% { box-shadow: 0 0 0 0 rgba(17, 105, 62, 0); }
}

.courses-hero-grid,
.courses-coming-soon-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 40px;
    align-items: center;
}
@media (min-width: 992px) {
    .courses-hero-grid {
        grid-template-columns: 1fr 1fr;
        gap: 60px;
    }
    .courses-coming-soon-grid {
        grid-template-columns: 5fr 6fr;
        gap: 60px;
    }
}

.badge-pill-light {
    display: inline-block;
    background-color: #E6F4EA;
    color: var(--color-primary-on-light);
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 700;
    margin-bottom: 20px;
}

.courses-hero-video {
    background-color: #eaf3ea;
    border-radius: 24px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 350px;
    position: relative;
    background-image: linear-gradient(rgba(17,105,62,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(17,105,62,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
    animation: coursesFloat 6s ease-in-out infinite;
    box-shadow: 0 20px 40px rgba(17,105,62,0.05);
    border: 1px solid rgba(255,255,255,0.6);
}
.courses-hero-video__icon {
    width: 60px;
    height: 60px;
    background: #fff;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    margin-bottom: 15px;
    color: var(--color-primary);
    animation: coursesPulsePlay 2s infinite;
}
.courses-hero-video__text {
    font-size: 11px;
    font-weight: 700;
    color: var(--color-primary-on-light);
    letter-spacing: 1px;
    text-transform: uppercase;
    text-align: center;
}

/* Category Grid */
.category-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
@media (max-width: 1199px) {
    .category-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 767px) {
    .category-grid {
        grid-template-columns: 1fr;
    }
}
.category-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.06);
    border-radius: 20px;
    padding: 30px;
    text-align: left; /* fixes the centering issue */
    box-shadow: 0 4px 20px rgba(0,0,0,0.03);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
.category-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 15px 30px rgba(17,105,62,0.08);
}
.category-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 12px;
    letter-spacing: -0.5px;
}
.category-card p {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-bottom: 20px;
    line-height: 1.5;
}
.category-card ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.category-card ul li {
    font-size: 13px;
    color: var(--color-text-main);
    font-weight: 500;
    position: relative;
    padding-left: 20px;
    display: flex;
    align-items: center;
}
.category-card ul li::before {
    content: '';
    position: absolute;
    left: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-primary);
}

/* Video Lessons Grid */
.video-lessons-grid {
    display: grid;
    grid-template-columns: 1.2fr 400px;
    gap: 30px;
    max-width: 1100px;
    margin: 0 auto;
}
@media (max-width: 991px) {
    .video-lessons-grid {
        grid-template-columns: 1fr;
    }
}
.video-card-main {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 24px;
    overflow: hidden;
    height: 100%;
}
.video-card-main__placeholder {
    height: 300px;
    background-color: #eaf3ea;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-image: linear-gradient(rgba(17,105,62,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(17,105,62,0.05) 1px, transparent 1px);
    background-size: 40px 40px;
}
.video-card-main__content {
    padding: 30px;
}
.video-card-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.video-card-list-item {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 20px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 20px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.video-card-list-item:hover {
    transform: translateY(-2px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
    text-decoration: none;
}
.video-card-list-item__thumb {
    width: 80px;
    height: 80px;
    background: #c8e1d2;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}
.video-card-list-item__thumb svg {
    background: #fff;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    padding: 6px;
}
.video-card-list-item__content {
    flex-grow: 1;
}

/* Resources Grid */
.resources-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 30px;
}
@media (max-width: 991px) {
    .resources-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}
@media (max-width: 575px) {
    .resources-grid {
        grid-template-columns: 1fr;
    }
}
.resource-card {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 24px;
    padding: 30px;
    display: flex;
    flex-direction: column;
}
.resource-card__icon {
    width: 48px;
    height: 48px;
    background: #E6F4EA;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    margin-bottom: 20px;
}
.resource-card h3 {
    font-size: 20px;
    font-weight: 700;
    margin-bottom: 10px;
}
.resource-card p {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-bottom: 20px;
    line-height: 1.5;
    flex-grow: 1;
}
.resource-card .btn-download {
    display: block;
    width: 100%;
    text-align: center;
    padding: 12px;
    border-radius: 30px;
    border: 1px solid rgba(0,0,0,0.1);
    color: var(--color-text-main);
    font-weight: 600;
    font-size: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}
.resource-card .btn-download:hover {
    background: var(--color-primary);
    color: #fff;
    border-color: var(--color-primary);
}

/* Coming Soon Grid */
.pill-list-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
@media (max-width: 575px) {
    .pill-list-grid {
        grid-template-columns: 1fr;
    }
}
.pill-list-item {
    background: #fff;
    border: 1px solid rgba(0,0,0,0.08);
    border-radius: 30px;
    padding: 15px 24px;
    font-size: 14px;
    font-weight: 600;
    color: var(--color-text-main);
}

/* ==========================================================================
   Contact Page Styles
   ========================================================================== */

/* --- Hero --- */
.contact-hero {
    background-color: var(--color-background);
    padding: 85px 0 45px;
}
.contact-hero__inner {
    max-width: 720px;
    margin: 0 auto;
}
.contact-hero .pill {
    margin-bottom: 22px;
}
.contact-hero__title {
    font-size: clamp(30px, 4.2vw, 42px);
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1.2px;
    margin: 0 0 18px;
}
.contact-hero__lead {
    font-size: 17px;
    line-height: 1.6;
    color: var(--color-text-muted);
    max-width: 620px;
    margin: 0 auto;
}

/* --- Layout --- */
.contact-main {
    padding: 0 0 90px;
}
.contact-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 40px;
}
.contact-grid__aside {
    flex: 1 1 380px;
    min-width: 300px;
}
.contact-grid__main {
    flex: 1 1 520px;
    min-width: 300px;
}
.contact-subheading {
    font-size: 22px;
    font-weight: 700;
    margin: 38px 0 18px;
}

/* --- Form --- */
.contact-form-wrapper {
    background: #fff;
    padding: 40px;
    border-radius: 20px;
    box-shadow: 0 15px 40px rgba(0,0,0,0.04);
    border: 1px solid rgba(0,0,0,0.04);
}
.contact-form-title {
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 26px;
}
.contact-form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}
.contact-form-group {
    margin-bottom: 22px;
}
.contact-form-group label {
    display: block;
    margin-bottom: 8px;
    font-weight: 700;
    color: var(--color-primary-on-light);
    font-size: 12px;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}
.contact-form-control {
    box-sizing: border-box;
    width: 100%;
    padding: 14px 18px;
    background: #f8faf9;
    border: 1px solid rgba(0,0,0,0.05);
    border-radius: 12px;
    font-size: 15px;
    font-family: inherit;
    color: var(--color-text-main);
    transition: all 0.3s ease;
}
.contact-form-control::placeholder {
    color: rgba(0,0,0,0.3);
}
.contact-form-control:focus {
    outline: none;
    background: #fff;
    border-color: var(--color-lime);
    box-shadow: 0 8px 25px rgba(124, 179, 66, 0.15);
}
textarea.contact-form-control {
    resize: vertical;
    min-height: 130px;
}
.contact-form-submit {
    width: 100%;
    padding: 15px;
    font-size: 16px;
    font-weight: 600;
    margin-top: 4px;
}

/* --- Info cards --- */
.contact-info-card {
    background: var(--color-surface);
    padding: 24px 26px;
    border-radius: 16px;
    display: flex;
    align-items: flex-start;
    gap: 18px;
    margin-bottom: 16px;
    border: 1px solid rgba(0,0,0,0.03);
    transition: transform 0.2s ease;
}
.contact-info-card:last-child {
    margin-bottom: 0;
}
.contact-info-card:hover {
    transform: translateY(-3px);
}
.contact-info-icon {
    width: 44px;
    height: 44px;
    background: #fff;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    flex-shrink: 0;
}
.contact-info-content h2,
.contact-info-content h3,
.contact-info-content h4 {
    margin: 0 0 4px 0;
    font-size: 17px;
    font-weight: 700;
    color: var(--color-text-main);
}
.contact-info-content p {
    margin: 0;
    font-size: 15px;
    color: var(--color-text-muted);
    line-height: 1.5;
}
.contact-info-content .contact-info-meta {
    font-size: 14px;
    line-height: 1.55;
}

/* --- Responsive --- */
@media (max-width: 991px) {
    .contact-hero {
        padding: 55px 0 35px;
    }
    .contact-main {
        padding: 0 0 60px;
    }
    .contact-grid {
        gap: 28px;
    }
    .contact-form-wrapper {
        padding: 30px;
    }
}

@media (max-width: 575px) {
    .contact-hero {
        padding: 40px 0 28px;
    }
    .contact-hero .pill {
        margin-bottom: 16px;
    }
    .contact-hero__title {
        letter-spacing: -0.6px;
        margin-bottom: 14px;
    }
    .contact-hero__lead {
        font-size: 15.5px;
    }
    .contact-main {
        padding: 0 0 48px;
    }
    .contact-subheading {
        margin: 30px 0 14px;
        font-size: 20px;
    }
    .contact-form-wrapper {
        padding: 24px 20px;
    }
    .contact-form-row {
        grid-template-columns: 1fr;
        gap: 0;
    }
    .contact-info-card {
        padding: 20px;
        gap: 14px;
    }
}

/* Modern Gradient Hero Heading */
.gradient-text-animated {
    background: linear-gradient(to right, #d3fb52 0%, #00e5ff 50%, #d3fb52 100%);
    background-size: 200% auto;
    color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: shine-gradient 4s linear infinite;
    display: inline-block;
}
@keyframes shine-gradient {
    to {
        background-position: 200% center;
    }
}

/* ==========================================================================
   Single Course Page Styles
   ========================================================================== */

.single-course-page {
    background-color: var(--color-dark-teal);
    padding: 80px 0;
}

.course-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 80px;
    align-items: center;
}

@media (max-width: 991px) {
    .course-hero {
        grid-template-columns: 1fr;
    }
}

.course-hero-content .back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    text-decoration: none;
    margin-bottom: 32px;
    transition: color 0.3s ease;
}

.course-hero-content .back-link:hover {
    color: #fff;
}

.course-hero-content h1 {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1.5px;
    margin-bottom: 24px;
    color: #fff;
}

@media (max-width: 768px) {
    .course-hero-content h1 {
        font-size: 36px;
    }
}

.course-hero-content .course-excerpt {
    font-size: 18px;
    color: rgba(255, 255, 255, 0.7);
    line-height: 1.6;
    margin-bottom: 40px;
}

.course-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 40px;
}

.course-hero-meta .meta-badge-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 100px;
    font-size: 13px;
    font-weight: 500;
    color: #fff;
    background: rgba(255, 255, 255, 0.05);
}
.course-hero-meta .meta-badge-outline svg {
    color: #fff;
}

.course-hero-actions {
    display: flex;
    gap: 16px;
    flex-wrap: wrap;
}

.course-hero-actions .btn-outline {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.2);
    color: #fff;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 12px 24px;
    border-radius: 100px;
    font-weight: 600;
    font-size: 15px;
    text-decoration: none;
    transition: all 0.3s ease;
}

.course-hero-actions .btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.3);
    color: #fff;
}

/* Video Wrapper */
.course-hero-video {
    width: 100%;
}

.video-wrapper {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 */
    height: 0;
    overflow: hidden;
    border-radius: 16px;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.video-wrapper iframe,
.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 16px;
}

.video-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background: url('data:image/svg+xml;utf8,<svg width="100%" height="100%" xmlns="http://www.w3.org/2000/svg"><defs><pattern id="grid" width="40" height="40" patternUnits="userSpaceOnUse"><path d="M 40 0 L 0 0 0 40" fill="none" stroke="%237CB342" stroke-width="0.5" stroke-opacity="0.3"/></pattern></defs><rect width="100%" height="100%" fill="url(%23grid)" /></svg>');
    background-color: rgba(255, 255, 255, 0.02);
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 1px;
    box-shadow: 0 4px 20px rgba(0,0,0,0.1);
}

.main-video-placeholder {
    width: 100%;
    aspect-ratio: 16/9;
    background: linear-gradient(135deg, #e6f4ea 0%, #d1e8d5 100%);
    background-image: linear-gradient(#e5e7eb 1px, transparent 1px), linear-gradient(90deg, #e5e7eb 1px, transparent 1px);
    background-size: 40px 40px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    font-weight: bold;
    font-size: 14px;
    letter-spacing: 1px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.play-icon-large {
    background: white;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 16px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
}

/* Main Layout */
.course-main-layout {
    display: grid;
    grid-template-columns: 1fr 400px;
    gap: 60px;
    margin-bottom: 80px;
    align-items: start;
}

.course-sidebar-col {
    position: sticky;
    top: 120px;
}

@media (max-width: 991px) {
    .course-main-layout {
        grid-template-columns: 1fr;
    }
}

/* What You'll Learn */
.what-youll-learn {
    background: transparent;
    margin-top: 48px !important;
}
.course-main-video {
    margin-bottom: 48px !important;
}

.section-tag {
    display: inline-block;
    background: #dcfce7;
    color: #166534;
    padding: 6px 16px;
    border-radius: 20px;
    font-size: 14px;
    font-weight: 600;
    margin-bottom: 16px;
}

.section-tag-small {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1px;
    color: var(--color-primary-on-light);
    text-transform: uppercase;
    display: block;
    margin-bottom: 8px;
}

.section-desc {
    font-size: 18px;
    color: var(--color-text-muted);
    margin-bottom: 40px;
    line-height: 1.6;
}

.learn-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
}

@media (max-width: 768px) {
    .learn-grid {
        grid-template-columns: 1fr;
    }
}

.learn-item {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 24px;
    display: flex;
    gap: 16px;
    align-items: flex-start;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.learn-item svg {
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.learn-item span {
    color: var(--color-text);
    font-weight: 500;
    line-height: 1.5;
}

/* Curriculum Sidebar */
.curriculum-box {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}

.curriculum-header {
    background: #f0fdf4;
    padding: 24px;
    border-bottom: 1px solid #e5e7eb;
}

.curriculum-header h3 {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
}

.curriculum-list {
    display: flex;
    flex-direction: column;
}

.curriculum-item {
    display: flex;
    align-items: flex-start;
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    background: white;
    transition: background 0.2s ease;
    text-decoration: none;
    color: inherit;
}

.curriculum-item:last-child {
    border-bottom: none;
}

.curriculum-item.unlocked:hover {
    background: #f9fafb;
    cursor: pointer;
}

.curriculum-item-number {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    font-weight: 600;
    margin-right: 16px;
    flex-shrink: 0;
}

.curriculum-item.unlocked .curriculum-item-number {
    background: #dcfce7;
    color: var(--color-primary);
}
.curriculum-item.locked {
    cursor: not-allowed;
}

.curriculum-item.locked .curriculum-item-number {
    background: #e5e7eb;
    color: #6b7280;
}

.curriculum-item-content {
    flex-grow: 1;
}

.curriculum-item-content h4 {
    margin: 0 0 6px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}

.curriculum-item.locked .curriculum-item-content h4 {
    color: #4b5563;
}

.lesson-time {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    color: var(--color-text-muted);
}

.curriculum-item-icon {
    margin-left: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 24px;
}

/* Resources Section */
.course-resources-section {
    padding-top: 40px;
    border-top: 1px solid #e5e7eb;
}

.resources-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}

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

@media (max-width: 768px) {
    .resources-grid {
        grid-template-columns: 1fr;
    }
}

.resource-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 32px 24px;
    display: flex;
    flex-direction: column;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}

.resource-icon {
    background: #dcfce7;
    color: var(--color-primary);
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
}

.resource-card h3 {
    font-size: 18px;
    margin-bottom: 12px;
}

.resource-card p {
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 24px;
}

/* Updated Single Course Styles */
.meta-badge-outline {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: transparent;
    color: var(--color-text);
    padding: 6px 14px;
    border-radius: 20px;
    font-size: 13px;
    font-weight: 500;
    border: 1px solid #e5e7eb;
}
.meta-badge-outline svg {
    color: var(--color-text-muted);
}

.btn-green {
    background-color: var(--color-primary);
    color: white;
}
.btn-green:hover {
    background-color: #05663b; /* Darker green */
}

.btn-outline {
    border: 1px solid #e5e7eb;
    background: transparent;
    color: var(--color-text);
}
.btn-outline:hover {
    background: #f9fafb;
}

.course-main-section {
    background: white;
    padding-top: 80px;
    padding-bottom: 80px;
}

.course-locked-state {
    background: #F4F0E6;
    border-radius: 24px;
    padding: 60px 40px;
    text-align: center;
    border: 1px solid rgba(0,0,0,0.05);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    min-height: 400px;
}
.locked-icon {
    width: 80px;
    height: 80px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 24px;
    color: var(--color-primary);
    box-shadow: 0 10px 20px rgba(0,0,0,0.05);
}

.learn-item-icon {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: #dcfce7;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    margin-top: -2px;
}
.learn-item-icon svg {
    width: 14px;
    height: 14px;
    color: var(--color-primary);
    margin-top: 0;
}

/* Practical Task Section */
.course-task-section {
    background: white;
    padding: 60px 0;
    border-top: 1px solid #e5e7eb;
}
.task-content {
    max-width: 800px;
    margin: 0 auto;
}
.task-card {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 16px;
    padding: 32px;
    display: flex;
    gap: 24px;
    margin-top: 32px;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}
@media (max-width: 768px) {
    .task-card {
        flex-direction: column;
        padding: 24px;
    }
}
.task-card-icon {
    width: 48px;
    height: 48px;
    background: var(--color-primary);
    color: white;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}
.task-card-content h3 {
    margin-top: 0;
    font-size: 18px;
    margin-bottom: 8px;
}
.task-card-content p {
    color: var(--color-text-muted);
    font-size: 15px;
    margin-bottom: 24px;
    line-height: 1.5;
}
.task-card-actions {
    display: flex;
    align-items: center;
    gap: 24px;
    flex-wrap: wrap;
}
.task-checkbox-wrap {
    display: flex;
    align-items: center;
    gap: 12px;
    cursor: pointer;
    font-size: 15px;
    color: var(--color-text);
}
.task-checkbox-wrap input {
    display: none;
}
.custom-checkbox {
    width: 20px;
    height: 20px;
    border: 2px solid #e5e7eb;
    border-radius: 50%;
    display: inline-block;
    position: relative;
    transition: all 0.2s;
}
.task-checkbox-wrap input:checked + .custom-checkbox {
    border-color: var(--color-primary);
    background: var(--color-primary);
}
.task-complete-btn {
    padding: 8px 16px;
    display: flex;
    align-items: center;
    border-radius: 8px;
    font-weight: 500;
    gap: 8px;
}

/* Instructor Section */
.course-instructor-section {
    background: var(--color-background, #F4F0E6);
    padding: 80px 0;
}
.course-instructor-section h2 {
    color: var(--color-text-main, #111111);
}
.instructor-card {
    background: white;
    border-radius: 16px;
    padding: 40px;
    display: flex;
    gap: 40px;
    margin-top: 40px;
    align-items: center;
    box-shadow: 0 4px 6px rgba(0,0,0,0.02);
}
@media (max-width: 768px) {
    .instructor-card {
        flex-direction: column;
        padding: 24px;
        text-align: center;
        gap: 24px;
    }
}
.instructor-image {
    flex-shrink: 0;
}
.instructor-placeholder {
    width: 200px;
    height: 200px;
    background: #e6f4ea;
    background-image: linear-gradient(#dcfce7 1px, transparent 1px), linear-gradient(90deg, #dcfce7 1px, transparent 1px);
    background-size: 20px 20px;
    border-radius: 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 12px;
}
.instructor-icon-bg {
    width: 48px;
    height: 48px;
    background: white;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}
.instructor-placeholder span {
    font-size: 12px;
    font-weight: 700;
    color: var(--color-primary);
    letter-spacing: 1px;
}
.instructor-info h3 {
    font-size: 24px;
    margin-bottom: 4px;
}
.instructor-title {
    display: block;
    color: var(--color-primary-on-light);
    font-weight: 500;
    margin-bottom: 16px;
}
.instructor-info p {
    color: var(--color-text-muted);
    line-height: 1.6;
    font-size: 16px;
}

/* Continue Learning Section */
.continue-learning-section {
    background: white;
    padding: 80px 0;
}
.continue-learning-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-bottom: 40px;
}
@media (max-width: 768px) {
    .continue-learning-header {
        flex-direction: column;
        align-items: flex-start;
        gap: 20px;
    }
}

.continue-list-item {
    background: white;
    border: 1px solid #e5e7eb;
    border-radius: 12px;
    padding: 32px;
    margin-bottom: 16px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.02);
}
.continue-list-item-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: var(--color-text-muted);
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
}
.continue-list-item-meta svg {
    color: var(--color-text);
}
.continue-list-item h3 {
    font-size: 20px;
    margin: 0 0 12px 0;
    color: var(--color-text);
}
.continue-list-item p {
    color: var(--color-text-muted);
    font-size: 15px;
    line-height: 1.5;
    margin-bottom: 24px;
    max-width: 800px;
}
.btn-sm {
    padding: 10px 24px;
    font-size: 14px;
    border-radius: 8px;
}

/* Footer join column: Join Us is the primary action, Explore Courses sits back. */
.footer-join-actions .btn-primary {
    background-color: transparent;
    border: 1px solid rgba(0, 0, 0, 0.15);
    color: var(--color-text-main);
}

.footer-join-actions .btn-primary:hover {
    border-color: var(--color-primary);
    color: var(--color-primary-on-light);
    background-color: transparent;
}

/* Custom Footer Layout */
.custom-footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.5fr;
    gap: 40px;
}
@media (max-width: 991px) {
    .custom-footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}
@media (max-width: 767px) {
    .custom-footer-grid {
        grid-template-columns: 1fr;
        gap: 30px;
    }
}
/* Social profile buttons, in the footer brand column. The :hover rule below
   has been in this stylesheet since the first commit, written for markup that
   was never added; this is the base it was waiting for. */
.footer-social {
    list-style: none;
    margin: 28px 0 0;
    padding: 0;
    display: flex;
    gap: 12px;
}

.footer-social a {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border: 1px solid var(--color-pill-border);
    border-radius: 50%;
    background: transparent;
    color: var(--color-text-muted);
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.footer-social a:focus-visible {
    outline: 3px solid var(--color-primary-on-light);
    outline-offset: 3px;
}

.footer-social svg {
    display: block;
    width: 20px;
    height: 20px;
}

.footer-social a:hover {
    background: var(--color-primary);
    color: #fff !important;
    border-color: var(--color-primary) !important;
    transition: all 0.2s ease;
}

/* Lesson Resources specific styling */
#lesson-resources-container {
    background: #f9fafb;
    padding: 30px;
    border-radius: 12px;
    margin-bottom: 40px;
}

#lesson-resources-container h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: 20px;
    color: #1f2937;
}

.lesson-resources-grid {
    grid-template-columns: repeat(2, 1fr) !important;
}

@media (max-width: 768px) {
    .lesson-resources-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Vlog Video Modal */
.vlog-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    z-index: 99999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.vlog-modal-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(8px);
}
.vlog-modal-content {
    position: relative;
    z-index: 2;
    max-width: 400px;
    width: 90%;
    display: flex;
    flex-direction: column;
    align-items: center;
}
.vlog-modal-close {
    position: absolute;
    top: -44px;
    right: 0;
    background: transparent;
    border: none;
    color: white;
    font-size: 36px;
    cursor: pointer;
    line-height: 1;
}
.vlog-video-wrapper {
    width: 100%;
    aspect-ratio: 9/16;
    background: #000;
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
}
.vlog-video-wrapper video {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
#vlog-modal-title {
    color: white;
    margin-top: 15px;
    font-size: 18px;
    font-weight: 700;
    text-align: center;
}

/* ==========================================================================
   Comprehensive Mobile & Tablet Responsiveness Fixes
   ========================================================================== */

/* `clip` rather than `hidden`: both suppress the same horizontal overflow, but
   `hidden` turns the root into a scroll container and position: sticky cannot
   resolve against one, which would leave the sticky header (and the course and
   article sidebars) stuck to nothing. See the sticky header block at the end of
   this stylesheet. */
html, body {
    overflow-x: clip !important;
    width: 100% !important;
    max-width: 100vw !important;
}

/* Mobile Header Toggle */
.mobile-menu-toggle {
    display: none;
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 8px;
    z-index: 1001;
}

@media (max-width: 991px) {
    .mobile-menu-toggle {
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .main-bar .container {
        position: relative;
        flex-wrap: wrap;
    }

    .main-navigation {
        display: none;
        width: 100%;
        order: 3;
        padding-top: 15px;
        padding-bottom: 10px;
    }

    .main-navigation.mobile-open {
        display: block !important;
    }

    .main-navigation > ul {
        flex-direction: column;
        gap: 12px;
        align-items: flex-start;
        background: #F4F0E6;
        padding: 15px 20px;
        border-radius: 12px;
        border: 1px solid rgba(0,0,0,0.06);
    }

    .main-navigation a {
        font-size: 16px;
        font-weight: 600;
        display: block;
        padding: 6px 0;
    }

    .header-buttons {
        display: none;
        width: 100% !important;
        max-width: 100% !important;
        order: 4;
        padding-bottom: 15px;
        box-sizing: border-box !important;
    }

    .header-buttons.mobile-open {
        display: block !important;
    }

    .header-buttons .btn {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        text-align: center !important;
        justify-content: center !important;
        display: flex !important;
        margin-top: 10px !important;
        padding: 12px 20px !important;
    }

    /* Hero Section Responsive */
    .hero {
        padding: 40px 0 0 !important;
    }

    .hero-wrapper {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .hero__content {
        padding-bottom: 20px !important;
    }

    .hero-title {
        font-size: 32px !important;
        line-height: 1.25 !important;
        margin-bottom: 16px !important;
    }

    .hero-subheadline {
        font-size: 16px !important;
        line-height: 1.5 !important;
        margin-bottom: 24px !important;
    }

    .hero__content {
        box-sizing: border-box !important;
        max-width: 100% !important;
        width: 100% !important;
    }

    .hero__actions {
        box-sizing: border-box !important;
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero__actions .btn {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 16px !important;
        padding-right: 16px !important;
        font-size: 15px !important;
        white-space: normal !important;
        text-align: center !important;
        justify-content: center !important;
        display: flex !important;
    }

    .hero-badges-list {
        box-sizing: border-box !important;
        flex-direction: column !important;
        gap: 8px !important;
        margin-top: 24px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-badge-item {
        box-sizing: border-box !important;
        font-size: 13px !important;
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .hero__composition {
        min-height: auto !important;
        height: auto !important;
        padding-top: 20px;
        display: flex;
        justify-content: center;
    }

    .hero__person-wrapper {
        position: relative !important;
        right: auto !important;
        bottom: auto !important;
        width: 100% !important;
        max-width: 320px !important;
        margin: 0 auto !important;
    }

    .wdm-orbit-icon {
        transform: scale(0.65) !important;
    }

    .widget-pill-speed {
        font-size: 11px !important;
        padding: 4px 10px !important;
        top: 10px !important;
        left: 5px !important;
    }

    /* Sections & Grids */
    .section {
        padding: 50px 0 !important;
    }

    .section__header {
        margin-bottom: 35px !important;
    }

    .section__header h2 {
        font-size: 28px !important;
        line-height: 1.3 !important;
    }

    .split-section {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        gap: 30px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .split-content {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        box-sizing: border-box !important;
    }

    .split-graphic {
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        margin-top: 0 !important;
        box-sizing: border-box !important;
    }

    .why-us-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 12px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .why-card {
        box-sizing: border-box !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    .grid--3-col, .grid--4-col, .grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 20px !important;
        width: 100% !important;
    }

    .step-timeline {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    .step-timeline::before {
        display: none !important;
    }

    /* Single Course Page Responsive */
    .course-hero-wrapper {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .course-main-layout {
        grid-template-columns: 1fr !important;
        gap: 30px !important;
    }

    .course-hero-content h1 {
        font-size: 28px !important;
    }

    .course-hero-meta {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    .single-course-page .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    .course-card-image {
        aspect-ratio: 16 / 9 !important;
        height: auto !important;
        width: 100% !important;
    }

    /* Mission Stats Card Mobile Alignment */
    .mission-stats-card {
        display: none !important;
    }
    /* Mission Core Cards Mobile Responsiveness */
    .core-card {
        flex: 1 1 100% !important;
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        padding: 28px 20px !important;
        box-sizing: border-box !important;
    }
    h1, .hero-title, .page-title, .course-hero-content h1, .vlog-hero h1, .entry-title {
        font-size: 32px !important;
        line-height: 1.2 !important;
        letter-spacing: -0.5px !important;
    }
    h2, .section__header h2, .section-title, .split-content h2, .core-card h2 {
        font-size: 26px !important;
        line-height: 1.25 !important;
    }
}

.core-card {
    flex: 1 1 45%;
    border-radius: 16px;
    padding: 50px;
    box-sizing: border-box;
}
.core-card h2 {
    font-size: 32px;
    font-weight: 700;
    line-height: 1.2;
    letter-spacing: -0.5px;
}
.core-card--light {
    background: var(--color-surface);
    border: 1px solid rgba(0,0,0,0.05);
    box-shadow: 0 10px 30px rgba(0,0,0,0.02);
}
.core-card--dark {
    background: #0F5E3E;
    color: #fff;
    position: relative;
    overflow: hidden;
    box-shadow: 0 15px 40px rgba(15, 94, 62, 0.2);
}

.mission-stats-card {
    position: absolute;
    bottom: -20px;
    left: -20px;
    z-index: 3;
    background: #fff;
    padding: 20px;
    border-radius: 12px;
    box-shadow: 0 15px 35px rgba(0,0,0,0.1);
    width: 280px;
    border: 1px solid rgba(0,0,0,0.05);
}

@media (max-width: 575px) {
    .container {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    h1, .hero-title, .page-title, .course-hero-content h1, .vlog-hero h1, .entry-title {
        font-size: 26px !important;
        line-height: 1.25 !important;
        letter-spacing: -0.3px !important;
    }

    h2, .section__header h2, .section-title, .split-content h2, .core-card h2 {
        font-size: 22px !important;
        line-height: 1.3 !important;
        letter-spacing: -0.2px !important;
    }

    h3 {
        font-size: 18px !important;
        line-height: 1.35 !important;
    }
}


/* ==========================================================================
   Member Video Reviews (vlog page, dark section)
   ========================================================================== */

.ec-video-reviews-section {
    overflow: hidden;
}

/* --- Intro column: retired with the review framing, kept per the theme's
   keep-retired-CSS rule. The heading now uses the shared .section__header. --- */

.ec-video-reviews__label {
    display: inline-flex;
    align-items: center;
    gap: 0 8px;
    height: 30px;
    padding: 0 14px;
    margin: 0 0 28px;
    border-radius: 999px;
    background-color: rgba(124, 179, 66, 0.14);
    border: 1px solid rgba(124, 179, 66, 0.3);
    color: #D6EFB8;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.01em;
}

.ec-video-reviews__label::before {
    content: "";
    flex-shrink: 0;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background-color: var(--color-lime);
}

.ec-video-reviews__heading {
    color: #ffffff;
    font-size: 44px;
    font-weight: 700;
    line-height: 1.14;
    letter-spacing: -0.02em;
    margin: 0 0 20px;
}

.ec-video-reviews__text p {
    color: rgba(244, 240, 230, 0.72);
    font-size: 17px;
    line-height: 1.6;
    margin: 0;
}

.ec-video-reviews__rating {
    display: flex;
    align-items: center;
    gap: 0 14px;
    margin: 28px 0 0;
}

.ec-video-reviews__rating-star {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: rgba(124, 179, 66, 0.16);
    color: var(--color-lime);
}

.ec-video-reviews__rating-info {
    display: flex;
    flex-direction: column;
    gap: 2px 0;
    min-width: 0;
}

.ec-video-reviews__rating-score {
    color: #ffffff;
    font-size: 20px;
    font-weight: 600;
    letter-spacing: -0.02em;
    line-height: 26px;
}

.ec-video-reviews__rating-caption {
    color: rgba(244, 240, 230, 0.7);
    font-size: 14px;
    line-height: 20px;
}

.ec-video-reviews__cta {
    display: inline-flex;
    align-items: center;
    gap: 0 12px;
    margin: 28px 0 0;
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
}

.ec-video-reviews__cta::after {
    content: "→";
    font-size: 18px;
    line-height: 1;
    color: var(--color-lime);
    transition: transform 0.3s ease;
}

.ec-video-reviews__cta:hover {
    color: #ffffff;
}

.ec-video-reviews__cta:hover::after {
    transform: translateX(6px);
}

/* --- Card grid --- */

.ec-video-reviews__grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
}
.ec-video-reviews__grid:focus-visible {
    outline: 3px solid var(--color-lime);
    outline-offset: 6px;
    border-radius: 4px;
}

.ec-review-card {
    display: flex;
    flex: 0 0 260px;
    flex-direction: column;
    background: var(--color-dark-surface);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 20px;
    overflow: hidden;
}

.ec-review-card__media {
    position: relative;
    display: flex;
    aspect-ratio: 9 / 16;
    background: var(--color-dark-teal);
    overflow: hidden;
}

.ec-review-card__video,
.ec-review-card__poster {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.ec-review-card__poster {
    background-color: var(--color-dark-surface);
    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
}

.ec-review-card__duration {
    position: absolute;
    top: 12px;
    left: 12px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    height: 26px;
    padding: 0 10px;
    border-radius: 999px;
    background: rgba(4, 17, 16, 0.72);
    backdrop-filter: blur(8px);
    color: #F4F0E6;
    font-size: 12px;
    font-weight: 500;
    pointer-events: none;
    transition: opacity 0.3s ease-in-out;
}

.ec-review-card__play {
    position: absolute;
    top: 50%;
    left: 50%;
    z-index: 2;
    width: 60px;
    height: 60px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: #ffffff;
    cursor: pointer;
    transform: translate(-50%, -50%);
    transition: background 0.3s ease-in-out, transform 0.3s ease-in-out;
}

.ec-review-card__play::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 8px 0 8px 14px;
    border-color: transparent transparent transparent var(--color-dark-teal);
    transform: translate(-40%, -50%);
}

.ec-review-card__play:hover {
    background: var(--color-lime);
    transform: translate(-50%, -50%) scale(1.06);
}

.ec-review-card__play:focus-visible {
    outline: 2px solid var(--color-lime);
    outline-offset: 4px;
}

.ec-review-card__media.is-playing .ec-review-card__duration { opacity: 0; }
.ec-review-card__media.is-playing .ec-review-card__play { display: none; }

.ec-review-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding: 18px;
}

.ec-review-card__badges {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0 0 12px;
    padding: 0;
}

.ec-review-card__badge {
    display: inline-flex;
    align-items: center;
    height: 24px;
    padding: 0 9px;
    border-radius: 999px;
    background: rgba(124, 179, 66, 0.14);
    color: #C9E8A4;
    font-size: 11px;
    font-weight: 500;
    white-space: nowrap;
}

.ec-review-card__title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 600;
    line-height: 1.33;
    margin: 0 0 16px;
}

/* A card that carries nothing but a title should not keep the gap meant for the
   badges and author block below it. */
.ec-review-card__title:only-child {
    margin-bottom: 0;
}

.ec-review-card__author {
    display: flex;
    align-items: center;
    gap: 0 12px;
    margin-top: auto;
    padding: 14px 0 0;
    border-top: 1px solid rgba(244, 240, 230, 0.12);
}

.ec-review-card__author-info {
    display: flex;
    flex-direction: column;
    gap: 1px 0;
    margin-right: auto;
    min-width: 0;
}

.ec-review-card__company {
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    line-height: 20px;
    text-transform: uppercase;
}

.ec-review-card__person,
.ec-review-card__country {
    color: rgba(244, 240, 230, 0.75);
    font-size: 13px;
    line-height: 19px;
}

.ec-review-card__country {
    display: inline-flex;
    align-items: center;
    gap: 0 6px;
    flex-shrink: 0;
    white-space: nowrap;
}

.ec-review-card__country img {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Admin-only placeholder shown while no reviews exist yet. */
.ec-review-card--empty {
    align-items: center;
    justify-content: center;
    gap: 12px 0;
    aspect-ratio: 9 / 16;
    padding: 24px;
    border-style: dashed;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
}

.ec-review-card--empty:hover {
    border-color: var(--color-lime);
    color: #ffffff;
}

.ec-review-card__empty-plus {
    font-size: 34px;
    line-height: 1;
    color: var(--color-lime);
}

.ec-review-card__empty-text {
    font-size: 14px;
    font-weight: 600;
}

.ec-review-card__empty-text small {
    display: block;
    margin-top: 6px;
    font-weight: 400;
    font-size: 12px;
    opacity: 0.65;
}

/* --- Scroll reveal (mirrors the .animate pattern) --- */

.ec-video-reviews__intro > *,
.ec-video-reviews__grid > * {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity 0.6s ease-out, transform 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

.ec-video-reviews-section.animate .ec-video-reviews__intro > *,
.ec-video-reviews-section.animate .ec-video-reviews__grid > * {
    opacity: 1;
    transform: translateY(0);
}

.ec-video-reviews-section.animate .ec-video-reviews__intro > *:nth-child(2) { transition-delay: 0.08s; }
.ec-video-reviews-section.animate .ec-video-reviews__intro > *:nth-child(3) { transition-delay: 0.16s; }
.ec-video-reviews-section.animate .ec-video-reviews__intro > *:nth-child(4) { transition-delay: 0.24s; }
.ec-video-reviews-section.animate .ec-video-reviews__intro > *:nth-child(5) { transition-delay: 0.32s; }

.ec-video-reviews-section.animate .ec-video-reviews__grid > *:nth-child(1) { transition-delay: 0.20s; }
.ec-video-reviews-section.animate .ec-video-reviews__grid > *:nth-child(2) { transition-delay: 0.30s; }
.ec-video-reviews-section.animate .ec-video-reviews__grid > *:nth-child(3) { transition-delay: 0.40s; }
.ec-video-reviews-section.animate .ec-video-reviews__grid > *:nth-child(4) { transition-delay: 0.50s; }
.ec-video-reviews-section.animate .ec-video-reviews__grid > *:nth-child(5) { transition-delay: 0.60s; }
.ec-video-reviews-section.animate .ec-video-reviews__grid > *:nth-child(6) { transition-delay: 0.70s; }

@media (prefers-reduced-motion: reduce) {
    .ec-video-reviews__intro > *,
    .ec-video-reviews__grid > * {
        opacity: 1;
        transform: none;
        transition: none;
    }
    .ec-video-reviews__grid {
        scroll-behavior: auto;
    }
}

/* --- Responsive --- */

@media screen and (max-width: 1199px) {
    .ec-video-reviews__grid { gap: 20px; }
    .ec-review-card { flex-basis: 220px; }
    .ec-video-reviews__heading { font-size: 38px; }
}

@media screen and (max-width: 991px) {
    .ec-video-reviews__grid { max-width: 620px; margin: 0 auto; }
    .ec-review-card { flex: 0 1 190px; border-radius: 16px; }
    .ec-review-card__play { width: 54px; height: 54px; }
}

@media screen and (max-width: 639px) {
    .ec-video-reviews__grid {
        flex-wrap: nowrap;
        justify-content: flex-start;
        gap: 14px;
        max-width: none;
        margin: 0 -20px;
        padding: 0 20px 18px;
        overflow-x: auto;
        /* Without this, swiping past either end of the carousel hands the
           gesture to the browser, which reads it as swipe to go back. */
        overscroll-behavior-x: contain;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        scroll-padding: 0 20px;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .ec-video-reviews__grid::-webkit-scrollbar { display: none; }
    .ec-review-card {
        flex: 0 0 62vw;
        max-width: 260px;
        scroll-snap-align: start;
        scroll-snap-stop: always;
        border-radius: 16px;
    }
    /* The last card's start-aligned snap position sits past the end of the
       scroll range, and mandatory snapping would refuse to rest there, leaving
       it permanently cut off. Aligning the last one to the end puts its snap
       position at max scroll, so it can actually be reached. */
    .ec-review-card:last-child {
        scroll-snap-align: end;
    }
    .ec-review-card__play { width: 44px; height: 44px; }
    .ec-review-card__play::before { border-width: 6px 0 6px 10px; }
    .ec-review-card__body { padding: 14px; min-width: 0; }
    .ec-review-card__title { font-size: 15px; line-height: 20px; margin: 0 0 12px; }
    .ec-review-card__author { flex-direction: column; align-items: flex-start; gap: 4px 0; padding: 12px 0 0; }
    .ec-review-card--empty { flex-direction: column; }
}

/* ==========================================================================
   Home: hero video + section-two person composition (swapped placements)
   ========================================================================== */

/* Hero now holds the intro video instead of the person cutout */
.hero--media {
    padding-bottom: 85px;
}

.hero--media .hero-wrapper {
    align-items: center;
}

.hero__composition--video {
    min-height: 0;
    align-items: center;
    padding-top: 10px;
}

.hero__composition--video .video-container {
    width: 100%;
    border: 1px solid rgba(211, 251, 82, 0.18);
    box-shadow: 0 30px 60px -20px rgba(0, 0, 0, 0.7),
                0 0 0 8px rgba(211, 251, 82, 0.04);
}

/* Section two now holds the person cutout + orbiting tech icons */
.split-graphic--person {
    position: relative;
    margin-top: 0;
    min-height: 520px;
    display: flex;
    align-items: flex-end;
    justify-content: center;
}

.split-graphic--person .hero__person-wrapper {
    position: relative;
    right: auto;
    bottom: auto;
    width: 100%;
    max-width: 460px;
    margin: 0 auto;
}

/* Fade the cutout's hard bottom crop into the white section.
   Smoothstep-eased stops: a plain two-stop gradient leaves visible Mach
   bands where the fade starts and where it lands on fully transparent. */
.split-graphic--person .hero__composition-person img {
    -webkit-mask-image: linear-gradient(to bottom,
                #000 42%,
                rgba(0, 0, 0, 0.985) 46.1%,
                rgba(0, 0, 0, 0.945) 50.3%,
                rgba(0, 0, 0, 0.882) 54.4%,
                rgba(0, 0, 0, 0.802) 58.6%,
                rgba(0, 0, 0, 0.708) 62.7%,
                rgba(0, 0, 0, 0.606) 66.9%,
                rgba(0, 0, 0, 0.5) 71%,
                rgba(0, 0, 0, 0.394) 75.1%,
                rgba(0, 0, 0, 0.292) 79.3%,
                rgba(0, 0, 0, 0.198) 83.4%,
                rgba(0, 0, 0, 0.118) 87.6%,
                rgba(0, 0, 0, 0.055) 91.7%,
                rgba(0, 0, 0, 0.015) 95.9%,
                rgba(0, 0, 0, 0) 100%);
    mask-image: linear-gradient(to bottom,
                #000 42%,
                rgba(0, 0, 0, 0.985) 46.1%,
                rgba(0, 0, 0, 0.945) 50.3%,
                rgba(0, 0, 0, 0.882) 54.4%,
                rgba(0, 0, 0, 0.802) 58.6%,
                rgba(0, 0, 0, 0.708) 62.7%,
                rgba(0, 0, 0, 0.606) 66.9%,
                rgba(0, 0, 0, 0.5) 71%,
                rgba(0, 0, 0, 0.394) 75.1%,
                rgba(0, 0, 0, 0.292) 79.3%,
                rgba(0, 0, 0, 0.198) 83.4%,
                rgba(0, 0, 0, 0.118) 87.6%,
                rgba(0, 0, 0, 0.055) 91.7%,
                rgba(0, 0, 0, 0.015) 95.9%,
                rgba(0, 0, 0, 0) 100%);
}

/* Keep the floating pill clear of the text column on this layout */
.split-graphic--person .widget-pill-speed {
    left: -6%;
}

@media (max-width: 991px) {
    .hero--media {
        padding-bottom: 45px !important;
    }

    .hero__composition--video {
        padding-top: 0 !important;
    }

    .split-graphic--person {
        min-height: 0 !important;
        margin-top: 10px !important;
        padding-top: 25px !important;
    }

    .split-graphic--person .hero__person-wrapper {
        max-width: 320px !important;
    }

    /* The shared mobile rule parks the pill top-left, on top of the Woo icon */
    .split-graphic--person .widget-pill-speed {
        top: 34% !important;
        left: -2% !important;
    }
}

/* Section two photo: eCommerce team reviewing store analytics */
.split-graphic--photo {
    /* Centre the photo against the text column instead of hanging off the top */
    margin-top: 0;
    align-self: center;
}

.split-graphic--photo img {
    display: block;
    width: 100%;
    height: auto;
    /* Section 2 photo: matches the file's own ratio so nothing is cropped */
    aspect-ratio: 960 / 720;
    object-fit: cover;
    border-radius: 16px;
    box-shadow: 0 18px 40px rgba(10, 40, 35, 0.12);
}

@media (max-width: 768px) {
    .split-graphic--photo {
        margin-top: 0 !important;
        align-self: stretch !important;
    }
}

/* ==========================================================================
   Ad Grants compliance: controls that used to be dead links
   Curriculum rows (single-course.php) and the fallback vlog cards
   (archive-vlog.php) are buttons now, not <a href="#"> or links to a raw
   .mp4. These rules make a <button> inherit the card styling it replaced.
   ========================================================================== */
button.curriculum-item {
    width: 100%;
    margin: 0;
    padding: 0;
    border: none;
    border-radius: inherit;
    font: inherit;
    color: inherit;
    text-align: left;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

button.curriculum-item {
    padding: 20px 24px;
    border-bottom: 1px solid #e5e7eb;
    border-radius: 0;
}

button.curriculum-item:last-child {
    border-bottom: none;
}

/* Fallback vlog cards are divs containing a heading, so the click target is a
   transparent button laid over the card rather than the card itself. */
.vlog-card-long,
.vlog-card-short {
    position: relative;
}

.vlog-card__trigger {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    background: transparent;
    border-radius: inherit;
    cursor: pointer;
    -webkit-appearance: none;
    appearance: none;
}

button.curriculum-item:focus-visible,
.vlog-card__trigger:focus-visible {
    outline: 3px solid var(--color-primary);
    outline-offset: 2px;
}

/* ==========================================================================
   Legal pages (Privacy Policy, Terms of Service)
   page.php renders these through .entry-content with no block styles of its
   own, so the retention table and the section spacing are set here.
   ========================================================================== */
.entry-content h2 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--color-text-main);
    margin-top: 40px;
    margin-bottom: 14px;
}

.entry-content h3 {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-main);
    margin-top: 28px;
    margin-bottom: 10px;
}

.entry-content ul {
    margin: 0 0 18px;
    padding-left: 22px;
}

.entry-content li {
    margin-bottom: 8px;
}

.entry-content a {
    color: var(--color-primary-on-light);
}

.entry-content code {
    background: var(--color-surface);
    border-radius: 4px;
    padding: 2px 6px;
    font-size: 14px;
}

/* Retention table: must scroll inside itself rather than widen the page. */
.entry-content .table-scroll {
    overflow-x: auto;
    margin: 0 0 24px;
}

.entry-content table {
    width: 100%;
    min-width: 480px;
    border-collapse: collapse;
    font-size: 15px;
}

.entry-content th,
.entry-content td {
    text-align: left;
    vertical-align: top;
    padding: 12px 14px;
    border-bottom: 1px solid rgba(0,0,0,0.08);
}

.entry-content caption {
    caption-side: top;
    text-align: left;
    font-weight: 700;
    color: var(--color-text-main);
    padding: 0 0 10px;
}

.entry-content thead th {
    font-weight: 700;
    color: var(--color-text-main);
    background: var(--color-background);
}

/* Row headers name the row rather than label a column, so they read as
   emphasised body cells rather than a second header band. */
.entry-content tbody th {
    font-weight: 700;
    color: var(--color-text-main);
    width: 34%;
}

@media (max-width: 640px) {
    .entry-content h2 { font-size: 21px; }
}


/* ==========================================================================
   Curriculum rows: the children became spans so the row can be a real
   <button> (a button may only contain phrasing content).

   The three direct children (number, content, icon) need no display rule
   here: they are flex items of .curriculum-item, so the browser already
   blockifies them, and forcing display:block would strip the display:flex
   that centres the number inside its circle and the play icon in its box.
   Only the title needs restating, since it stands in for the old h4.
   ========================================================================== */

/* Values copied from the .curriculum-item-content h4 rule this replaces, so
   the row looks exactly as it did before. */
.curriculum-item-title {
    display: block;
    margin: 0 0 6px 0;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text);
}

.curriculum-item.locked .curriculum-item-title {
    color: #4b5563;
}

/* ==========================================================================
   Join page (page-join.php)
   Branded registration replacing the wp-login.php screen.
   ========================================================================== */
.join-hero {
    background-color: var(--color-background);
    padding: 70px 20px 40px;
    text-align: center;
}

.join-hero__inner {
    max-width: 760px;
    margin: 0 auto;
}

.join-hero h1 {
    font-size: 44px;
    font-weight: 800;
    letter-spacing: -1.5px;
    margin: 18px 0 16px;
}

.join-hero__lead {
    font-size: 18px;
    line-height: 1.65;
    color: var(--color-text-muted);
    margin: 0;
}

.join-body {
    background-color: var(--color-background);
    padding: 20px 20px 80px;
}

.join-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: start;
}

.join-info h2 {
    font-size: 22px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 34px 0 12px;
}

.join-info h2:first-child { margin-top: 0; }

.join-info p {
    color: var(--color-text-muted);
    line-height: 1.7;
    margin: 0 0 12px;
}

.join-list,
.join-steps {
    color: var(--color-text-muted);
    line-height: 1.7;
    margin: 0 0 12px;
    padding-left: 22px;
}

.join-list li,
.join-steps li { margin-bottom: 9px; }

.join-form-card {
    background: var(--color-surface);
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 20px;
    padding: 34px;
    box-shadow: 0 10px 34px rgba(0,0,0,0.05);
}

.join-form-card h2 {
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.5px;
    margin: 0 0 22px;
}

.join-field { margin-bottom: 20px; }

.join-field label,
.join-fieldset legend {
    display: block;
    font-weight: 700;
    font-size: 14px;
    color: var(--color-text-main);
    margin-bottom: 7px;
}

.join-required { color: #a3341f; font-weight: 600; }
.join-optional { color: var(--color-text-muted); font-weight: 500; }

.join-field input[type="text"],
.join-field input[type="email"],
.join-field input[type="password"],
.join-field select,
.join-field textarea {
    width: 100%;
    box-sizing: border-box;
    padding: 12px 14px;
    font: inherit;
    font-size: 15px;
    color: var(--color-text-main);
    background: #FDFCF9;
    border: 1px solid #DDD8CB;
    border-radius: 11px;
}

.join-field input:focus,
.join-field select:focus,
.join-field textarea:focus,
.join-consent input:focus-visible,
.join-submit:focus-visible {
    outline: 3px solid var(--color-primary-on-light);
    outline-offset: 2px;
    border-color: var(--color-primary-on-light);
}

.join-help {
    display: block;
    font-size: 13px;
    color: var(--color-text-muted);
    margin-top: 6px;
    line-height: 1.5;
}

.join-fieldset { border: 0; padding: 0; margin: 0 0 20px; }

.join-checkgrid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px 14px;
    margin-top: 10px;
}

.join-check {
    display: flex;
    gap: 9px;
    align-items: flex-start;
    font-weight: 500 !important;
    font-size: 14px !important;
    color: var(--color-text-muted) !important;
    line-height: 1.45;
    margin-bottom: 0 !important;
    cursor: pointer;
}

.join-check input { margin-top: 2px; flex-shrink: 0; }

.join-consent {
    margin: 24px 0 12px;
    padding: 16px;
    background: var(--color-background);
    border: 1px solid var(--color-pill-border);
    border-radius: 12px;
}

.join-consent .join-check { align-items: flex-start; }

.join-withdraw {
    font-size: 13px;
    color: var(--color-text-muted);
    line-height: 1.55;
    margin: 0 0 20px;
}

/* Honeypot: off screen rather than display:none, which some bots detect. */
.join-hp {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

.join-submit { width: 100%; justify-content: center; }

.join-signin {
    text-align: center;
    font-size: 14px;
    color: var(--color-text-muted);
    margin: 18px 0 0;
}

.join-errors {
    background: #FCEEEA;
    border: 1px solid #E9C3B8;
    border-left: 4px solid #a3341f;
    border-radius: 10px;
    padding: 14px 16px;
    margin-bottom: 22px;
    color: #6d2415;
    font-size: 14px;
}

.join-errors ul { margin: 8px 0 0; padding-left: 20px; }

.join-legal {
    font-size: 12.5px;
    line-height: 1.6;
    color: var(--color-text-muted);
    text-align: center;
    margin: 20px 0 0;
}

/* Confirmation state */
.join-confirm {
    max-width: 680px;
    margin: 0 auto;
    background: var(--color-surface);
    border: 1px solid rgba(0,0,0,0.07);
    border-radius: 20px;
    padding: 46px 38px;
    text-align: left;
    box-shadow: 0 10px 34px rgba(0,0,0,0.05);
}

.join-confirm__icon {
    color: var(--color-primary-on-light);
    display: flex;
    justify-content: center;
    margin-bottom: 14px;
}

.join-confirm h1 {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -1px;
    text-align: center;
    margin: 0 0 12px;
}

.join-confirm__lead {
    text-align: center;
    font-size: 17px;
    color: var(--color-text-muted);
    margin: 0 0 28px;
}

.join-confirm__next {
    font-size: 19px;
    font-weight: 800;
    margin: 0 0 12px;
}

.join-confirm__actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
    justify-content: center;
    margin: 28px 0 0;
}

.join-confirm__help {
    text-align: center;
    font-size: 13.5px;
    color: var(--color-text-muted);
    margin: 22px 0 0;
}

@media (max-width: 900px) {
    .join-grid { grid-template-columns: 1fr; gap: 36px; }
    .join-hero h1 { font-size: 34px; }
    .join-checkgrid { grid-template-columns: 1fr; }
    .join-form-card { padding: 26px 20px; }
    .join-confirm { padding: 32px 22px; }
}

/* ==========================================================================
   Get Involved Page Styles (page-get-involved.php)
   ========================================================================== */

/* --- Section 1: Hero --- */
.gi-hero {
    background-color: var(--color-background);
    padding: 85px 0 80px;
}
.gi-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 60px;
    align-items: center;
}
.gi-hero__content {
    max-width: 580px;
}
.gi-hero__title {
    font-size: 46px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1px;
    margin-bottom: 24px;
}
.gi-underline {
    position: relative;
    display: inline-block;
    white-space: nowrap;
}
.gi-underline::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 5px;
    background-color: rgba(124, 179, 66, 0.55);
    border-radius: 3px;
}
.gi-hero__lead {
    font-size: 17px;
    line-height: 1.65;
    color: var(--color-text-muted);
    margin: 0 0 18px;
}
.gi-hero__emphasis {
    font-size: 17px;
    line-height: 1.6;
    font-weight: 600;
    color: var(--color-text-main);
    margin: 0 0 32px;
}
.gi-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

.gi-hero__graphic {
    display: flex;
    justify-content: flex-end;
}
.gi-hero__frame {
    position: relative;
    width: 100%;
    max-width: 560px;
    padding: 10px;
}
.gi-hero__backdrop {
    position: absolute;
    top: -6px;
    right: -6px;
    bottom: -6px;
    left: 18px;
    background-color: #EAF3DF;
    border: 2px solid #C4E395;
    border-radius: 26px;
    z-index: 0;
}
.gi-hero__photo {
    position: relative;
    z-index: 1;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}
.gi-hero__photo img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* --- Shared section headings --- */
.gi-section-intro {
    max-width: 760px;
    margin: 0 auto 56px;
}
.gi-section-title {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -1px;
    line-height: 1.2;
    margin: 0 0 18px;
}
.gi-section-title--left {
    text-align: left;
}
.gi-section-lead {
    font-size: 17px;
    line-height: 1.65;
    color: var(--color-text-muted);
    margin: 0;
}

/* --- Section 2: Support Our Mission --- */
.gi-support {
    background-color: var(--color-surface);
    padding: 90px 0;
}
/* Three columns rather than three boxes. The blocks of copy are very different
   lengths, and a card outlines its leftover space on all four sides, which is
   what made the short ones read as holes. Without a box the slack is just page
   whitespace: copy starts at the same height in all three, and the buttons
   still line up along the bottom. */
.gi-card-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    align-items: stretch;
}
.gi-card {
    display: flex;
    flex-direction: column;
    padding: 0 44px;
    border-left: 1px solid rgba(0, 0, 0, 0.09);
}
.gi-card:first-child {
    padding-left: 0;
    border-left: none;
}
.gi-card:last-child {
    padding-right: 0;
}
.gi-card__icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: #0F5E3E;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 26px;
    flex-shrink: 0;
}
.gi-card__title {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 18px;
}
.gi-card__body {
    flex: 1;
}
.gi-card__text {
    font-size: 15px;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin: 0 0 14px;
}
.gi-card__text:last-child {
    margin-bottom: 0;
}
.gi-card__text strong {
    color: var(--color-text-main);
    font-weight: 700;
}
.gi-card__cta {
    align-self: flex-start;
    margin-top: 32px;
    padding: 12px 26px;
    font-weight: 600;
}

/* Between 992px and 1199px three columns plus a 44px gutter squeezes the line
   length below a comfortable measure. Tighten the gutter in that band. */
@media (min-width: 992px) and (max-width: 1199px) {
    .gi-card {
        padding: 0 26px;
    }
}

/* --- Section 3: Other Ways to Support Us --- */
.gi-other {
    background-color: var(--color-background);
    padding: 90px 0;
}
.gi-other__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 60px;
    align-items: center;
}
.gi-other__frame {
    position: relative;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: 0 20px 45px rgba(0, 0, 0, 0.12);
}
.gi-other__frame img {
    display: block;
    width: 100%;
    height: auto;
    object-fit: cover;
}
.gi-other__content {
    max-width: 560px;
}
.gi-other__text {
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-text-muted);
    margin: 0 0 16px;
}
.gi-other__list {
    list-style: none;
    margin: 28px 0 32px;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.gi-other__list li {
    display: flex;
    align-items: center;
    gap: 12px;
    background: var(--color-surface);
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: 30px;
    padding: 13px 22px;
    font-size: 15px;
    font-weight: 600;
    color: var(--color-text-main);
}
.gi-other__list-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary-on-light);
    flex-shrink: 0;
}
.gi-other__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* --- Section 4: Why Your Support Matters --- */
.gi-why {
    background-color: var(--color-surface);
    padding: 90px 0;
}
.gi-why__text {
    font-size: 17px;
    line-height: 1.7;
    color: var(--color-text-muted);
    margin: 0 0 16px;
}
.gi-why__text:last-child {
    margin-bottom: 0;
}

/* --- Section 5: Closing CTA --- */
.gi-closing {
    padding: 90px 0;
}
.gi-closing__kicker {
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--color-lime) !important;
    margin: 0 0 18px;
}
.gi-closing__title {
    font-size: 34px;
    font-weight: 800;
    letter-spacing: -0.8px;
    line-height: 1.25;
    max-width: 760px;
    margin: 0 auto 34px;
    color: #ffffff;
}
.gi-closing__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
}

/* --- Get Involved responsive --- */
@media (max-width: 991px) {
    .gi-hero__grid,
    .gi-other__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 40px;
    }
    .gi-hero__content,
    .gi-other__content {
        max-width: 100%;
    }
    .gi-hero__graphic {
        justify-content: center;
    }
    .gi-hero__frame {
        max-width: 620px;
    }
    .gi-card-grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
    }
    .gi-card {
        padding: 34px 0;
        border-left: none;
        border-top: 1px solid rgba(0, 0, 0, 0.09);
    }
    .gi-card:first-child {
        padding-top: 0;
        border-top: none;
    }
    .gi-card:last-child {
        padding-bottom: 0;
    }
    .gi-card__cta {
        margin-top: 24px;
    }
    .gi-section-intro {
        margin-bottom: 40px;
    }
}

@media (max-width: 575px) {
    .gi-hero__frame {
        padding: 8px;
    }
    .gi-hero__backdrop {
        left: 12px;
        border-radius: 20px;
    }
    .gi-hero__photo {
        border-radius: 18px;
    }
    .gi-hero__lead,
    .gi-hero__emphasis {
        font-size: 16px;
    }
    .gi-hero__actions .btn,
    .gi-other__actions .btn,
    .gi-closing__actions .btn {
        width: 100%;
        box-sizing: border-box;
        padding: 14px 20px;
        font-size: 16px;
    }
    .gi-card {
        padding: 28px 0;
    }
    .gi-card__cta {
        display: block;
        width: 100%;
        box-sizing: border-box;
        align-self: stretch;
        text-align: center;
    }
    .gi-other__frame {
        border-radius: 18px;
    }
    .gi-other__list li {
        font-size: 14px;
        padding: 12px 18px;
        border-radius: 16px;
        align-items: flex-start;
    }
    .gi-why__text,
    .gi-section-lead {
        font-size: 16px;
    }
}

/* Header nav fit for seven items (Get Involved added).
   Between 992px and 1199px the horizontal menu is still shown but the row is
   tight, and labels such as "About Us" and "Get Involved" were breaking onto a
   second line. Tighten the spacing and type in that band only. */
@media (min-width: 992px) and (max-width: 1199px) {
    .main-navigation > ul {
        gap: 18px;
    }
    .main-navigation a {
        font-size: 14px;
        white-space: nowrap;
    }
    .site-header .btn-primary,
    .header-buttons .btn {
        padding: 10px 18px;
        font-size: 14px;
        white-space: nowrap;
    }
}

/* Keyboard focus for the Get Involved calls to action. The base .btn carries no
   focus style, and every action on this page is a link, so without this a
   keyboard user cannot tell which CTA is selected. */
.get-involved-page .btn:focus-visible,
.get-involved-page a:focus-visible {
    outline: 3px solid var(--color-primary-on-light);
    outline-offset: 3px;
    border-radius: 999px;
}
.get-involved-page .bg-dark-teal .btn:focus-visible {
    outline-color: #C0FA3F;
}

/* ==========================================================================
   BLOG BEGIN
   Blog index (archive-blog.php) and single article (single-blog.php).
   Self contained: every selector below is namespaced with .blog-, so this
   whole block can be cut out again without touching anything else.
   ========================================================================== */

/* --- Shared -------------------------------------------------------------- */

.blog-archive,
.blog-single {
    background-color: var(--color-background);
}

.container--article {
    max-width: 1120px;
}

.blog-pill {
    display: inline-block;
    padding: 5px 12px;
    border-radius: 999px;
    background: var(--color-pill-bg);
    border: 1px solid var(--color-pill-border);
    color: var(--color-text-main);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    line-height: 1.4;
}

.blog-pill--solid {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-dark-teal);
}

.blog-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--color-text-muted);
    font-size: 14px;
}

.blog-meta__dot {
    opacity: 0.5;
}

.blog-arrow {
    display: inline-block;
    transition: transform 0.2s ease;
}

a:hover > .blog-arrow,
a:hover .blog-arrow {
    transform: translateX(3px);
}

.blog-section-title {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin: 0 0 24px;
}

/* Ghost button used on the dark CTA panels. */
.btn-ghost-light {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    color: #ffffff;
    font-weight: 700;
}

.btn-ghost-light:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.6);
    color: #ffffff;
}

/* --- Covers -------------------------------------------------------------- */
/* The blog has no photography yet. Until it does, each article gets a drawn
   panel keyed off its post ID, so the covers stay stable and distinct without
   shipping placeholder stock images. A featured image, once set, replaces it. */

.blog-cover {
    display: block;
    position: relative;
    overflow: hidden;
    border-radius: 20px;
    background: var(--color-pill-bg);
    aspect-ratio: 16 / 9;
    /* Explicit, because a block box that carries both an aspect-ratio and a
       max-height otherwise takes its width from the ratio and stops filling
       the column. That is what the hero band does. */
    width: 100%;
}

.blog-cover__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* Shown only when a featured image replaces the drawn cover, so the topic is
   still stated on the card. */
.blog-cover__tag {
    position: absolute;
    left: 16px;
    bottom: 16px;
    z-index: 1;
    padding: 6px 14px;
    border-radius: 999px;
    background: rgba(10, 19, 18, 0.82);
    color: #ffffff;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.blog-cover__art {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: flex-end;
    padding: 24px;
}

.blog-cover__art::after {
    /* Concentric rings, offset to the top right, as a quiet texture. */
    content: "";
    position: absolute;
    top: -30%;
    right: -12%;
    width: 62%;
    aspect-ratio: 1;
    border-radius: 50%;
    background:
        radial-gradient(circle at center, transparent 0 38%, rgba(255, 255, 255, 0.14) 38% 40%, transparent 40%),
        radial-gradient(circle at center, transparent 0 58%, rgba(255, 255, 255, 0.12) 58% 60%, transparent 60%),
        radial-gradient(circle at center, transparent 0 78%, rgba(255, 255, 255, 0.10) 78% 80%, transparent 80%);
}

.blog-cover__glyph {
    position: relative;
    z-index: 1;
    font-size: clamp(20px, 3.4vw, 34px);
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: rgba(255, 255, 255, 0.92);
    text-transform: none;
}

.blog-cover__art--a {
    background: linear-gradient(140deg, #0A1312 0%, #14322A 55%, #1E4A34 100%);
}

.blog-cover__art--b {
    background: linear-gradient(140deg, #14322A 0%, #2F6B3C 55%, #4A7326 100%);
}

.blog-cover__art--c {
    background: linear-gradient(140deg, #101E2B 0%, #1B3B44 55%, #2F6B58 100%);
}

/* --- Archive: hero ------------------------------------------------------- */

.blog-hero {
    padding: 80px 0 48px;
}

.blog-hero__eyebrow {
    margin: 0 0 12px;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--color-primary-on-light);
}

.blog-hero__title {
    margin: 0 0 20px;
    font-size: clamp(36px, 5vw, 56px);
    font-weight: 800;
    letter-spacing: -0.03em;
    line-height: 1.05;
}

.blog-hero__lead {
    max-width: 780px;
    margin: 0;
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text-muted);
}


/* --- Archive: lead card -------------------------------------------------- */

.blog-lead-section {
    padding: 24px 0 16px;
}

.blog-lead {
    display: grid;
    grid-template-columns: 1.05fr 1fr;
    gap: 0;
    background: var(--color-surface);
    border: 1px solid var(--color-pill-border);
    border-radius: 28px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.04);
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.blog-lead:hover {
    box-shadow: 0 18px 44px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.blog-lead__media {
    border-radius: 0;
    aspect-ratio: auto;
    min-height: 320px;
}

.blog-lead__body {
    padding: 40px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 16px;
    justify-content: center;
}

.blog-lead__title {
    margin: 0;
    font-size: clamp(24px, 2.6vw, 32px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
}

.blog-lead__title a {
    color: var(--color-text-main);
}

.blog-lead__title a:hover {
    color: var(--color-primary-on-light);
}

.blog-lead__deck {
    margin: 0;
    font-size: 17px;
    line-height: 1.65;
    color: var(--color-text-muted);
}

.blog-lead__cta {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 700;
    color: var(--color-primary-on-light);
}

/* --- Archive: grid ------------------------------------------------------- */

.blog-grid-section {
    padding: 48px 0 24px;
}

.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
}

.blog-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid var(--color-pill-border);
    border-radius: 24px;
    overflow: hidden;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.blog-card:hover {
    box-shadow: 0 16px 36px rgba(0, 0, 0, 0.07);
    transform: translateY(-2px);
}

.blog-card__media {
    border-radius: 0;
}

.blog-card__body {
    padding: 24px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    flex: 1;
}

.blog-card__title {
    margin: 0;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}

.blog-card__title a {
    color: var(--color-text-main);
}

.blog-card__title a:hover {
    color: var(--color-primary-on-light);
}

.blog-card__deck {
    margin: 0;
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-text-muted);
    flex: 1;
}

.blog-empty {
    padding: 40px 0;
    color: var(--color-text-muted);
}

/* --- Archive: closing CTA ------------------------------------------------ */

.blog-cta-section {
    padding: 48px 0 88px;
}

.blog-cta {
    background: var(--color-dark-teal);
    border-radius: 28px;
    padding: 56px 40px;
    text-align: center;
}

.blog-cta__title {
    margin: 0 0 14px;
    color: #ffffff;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 800;
    letter-spacing: -0.02em;
}

.blog-cta__text {
    max-width: 620px;
    margin: 0 auto 28px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 17px;
    line-height: 1.65;
}

.blog-cta__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* --- Single: reading progress ------------------------------------------- */

.blog-progress {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: 3px;
    z-index: 9999;
    background: transparent;
    pointer-events: none;
}

.blog-progress__bar {
    display: block;
    height: 100%;
    width: 100%;
    transform: scaleX(0);
    transform-origin: 0 50%;
    background: var(--color-primary);
}

/* --- Single: header ------------------------------------------------------ */

.blog-article-header {
    padding: 48px 0 0;
}

.blog-breadcrumb {
    display: flex;
    gap: 8px;
    align-items: center;
    font-size: 14px;
    color: var(--color-text-muted);
    margin-bottom: 24px;
}

.blog-breadcrumb a {
    color: var(--color-text-muted);
}

.blog-breadcrumb a:hover {
    color: var(--color-primary-on-light);
}

.blog-article-title {
    margin: 16px 0 20px;
    font-size: clamp(32px, 4.6vw, 52px);
    font-weight: 800;
    line-height: 1.08;
    letter-spacing: -0.03em;
    max-width: 20ch;
}

.blog-article-deck {
    max-width: 62ch;
    margin: 0 0 24px;
    font-size: 20px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.blog-meta--header {
    padding-bottom: 32px;
    border-bottom: 1px solid var(--color-pill-border);
}

.blog-cover--hero {
    margin-top: 32px;
    border-radius: 24px;
    /* A band rather than a full 16:9 panel, so the cover does not push the
       first paragraph of a long read most of the way down the screen. The
       artwork is drawn with its content inside the middle 62% of the height,
       which is what survives this crop. See docs/blog-launch/covers/. */
    aspect-ratio: 21 / 9;
    max-height: 400px;
}

.blog-cover--hero .blog-cover__glyph {
    /* The topic is already stated in the pill above the headline. */
    display: none;
}

/* --- Single: layout ------------------------------------------------------ */

.blog-article-wrap {
    padding: 48px 0 0;
}

.blog-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 260px;
    gap: 56px;
    align-items: start;
}

.blog-toc {
    order: 2;
    position: sticky;
    top: 32px;
}

.blog-toc__box {
    background: var(--color-surface);
    border: 1px solid var(--color-pill-border);
    border-radius: 20px;
    padding: 20px 22px;
}

.blog-toc__summary {
    cursor: pointer;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--color-text-muted);
    list-style: none;
}

.blog-toc__summary::-webkit-details-marker {
    display: none;
}

.blog-toc__summary::after {
    content: "";
    float: right;
    width: 8px;
    height: 8px;
    margin-top: 4px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    transition: transform 0.2s ease;
}

.blog-toc__box[open] .blog-toc__summary::after {
    transform: rotate(-135deg);
    margin-top: 7px;
}

.blog-toc__list {
    margin: 16px 0 0;
    padding: 0;
    list-style: none;
    border-left: 2px solid var(--color-pill-border);
    /* An article with a lot of headings must not push the sticky panel past
       the fold. Past that height the list scrolls inside itself. */
    max-height: calc(100vh - 160px);
    overflow-y: auto;
}

.blog-toc__list li {
    margin-left: -2px;
    padding: 7px 0 7px 14px;
    border-left: 2px solid transparent;
    font-size: 14px;
    line-height: 1.45;
    color: var(--color-text-muted);
    transition: border-color 0.2s ease;
}

.blog-toc__list a {
    color: var(--color-text-muted);
}

.blog-toc__list a:hover {
    color: var(--color-primary-on-light);
}

/* Set by the scrollspy in single-blog.php on the section currently in view. */
.blog-toc__list li.is-current {
    border-left-color: var(--color-primary);
}

.blog-toc__list li.is-current > a {
    color: var(--color-text-main);
    font-weight: 700;
}

.blog-article {
    order: 1;
    min-width: 0;
}

/* --- Single: prose ------------------------------------------------------- */

.blog-article__body {
    max-width: 68ch;
    font-size: 18px;
    line-height: 1.75;
    color: #2A2A26;
}

.blog-article__body p {
    margin: 0 0 24px;
}

.blog-article__body h2 {
    margin: 56px 0 18px;
    padding-top: 24px;
    border-top: 2px solid var(--color-pill-border);
    font-size: clamp(24px, 2.6vw, 30px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -0.02em;
    scroll-margin-top: 24px;
}

.blog-article__body h2:first-child {
    margin-top: 0;
}

.blog-article__body h3 {
    margin: 40px 0 14px;
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    color: var(--color-text-main);
    scroll-margin-top: 24px;
}

.blog-article__body ul {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.blog-article__body ul li {
    position: relative;
    padding-left: 30px;
}

.blog-article__body ul li::before {
    content: "";
    position: absolute;
    left: 4px;
    top: 12px;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary);
}

.blog-article__body a {
    color: var(--color-primary-on-light);
    text-decoration: underline;
    text-underline-offset: 3px;
}

.blog-article__body strong {
    color: var(--color-text-main);
}

/* Paths, URL patterns and field names, so a reader can tell a literal string
   from prose. Deliberately quiet: a tint and a monospace face, no border and
   no syntax colour. */
.blog-article__body code {
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;
    font-size: 0.875em;
    line-height: 1.4;
    padding: 0.15em 0.4em;
    border-radius: 5px;
    background: #E8E4D6;
    color: #1F3D2B;
    /* Long paths break rather than widening the column on a phone. */
    overflow-wrap: anywhere;
}

/* In a table the same string has to share a row with two others, so it is set
   a little smaller and kept on one line. A break mid path reads worse than a
   scroll, and the wrapper scrolls on narrow screens. */
.blog-article__body td code {
    background: #EFEBE0;
    font-size: 0.8em;
    white-space: nowrap;
}

.blog-article__body a code {
    color: inherit;
    background: rgba(74, 115, 38, 0.12);
}

.blog-article__body .table-scroll {
    overflow-x: auto;
    margin: 0 0 32px;
    border: 1px solid var(--color-pill-border);
    border-radius: 16px;
    -webkit-overflow-scrolling: touch;
    /* Scroll shadows. The two cover layers scroll with the content (`local`)
       and the two shadow layers do not, so an edge shadow is only visible
       while there is more table in that direction. Pure CSS, no listener. */
    background:
        linear-gradient(to right, #ffffff 40%, rgba(255, 255, 255, 0)) left center / 44px 100% no-repeat local,
        linear-gradient(to left, #ffffff 40%, rgba(255, 255, 255, 0)) right center / 44px 100% no-repeat local,
        radial-gradient(farthest-side at 0 50%, rgba(10, 19, 18, 0.16), rgba(10, 19, 18, 0)) left center / 16px 100% no-repeat scroll,
        radial-gradient(farthest-side at 100% 50%, rgba(10, 19, 18, 0.16), rgba(10, 19, 18, 0)) right center / 16px 100% no-repeat scroll;
    background-color: var(--color-surface);
}

.blog-article__body table {
    width: 100%;
    min-width: 520px;
    border-collapse: collapse;
    font-size: 15px;
}

.blog-article__body thead th {
    text-align: left;
    padding: 14px 15px;
    background: var(--color-pill-bg);
    color: var(--color-text-main);
    font-weight: 700;
    font-size: 13px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    white-space: nowrap;
}

.blog-article__body tbody td {
    padding: 14px 15px;
    border-top: 1px solid var(--color-pill-border);
    vertical-align: top;
    line-height: 1.55;
}

/* --- Single: keep learning ---------------------------------------------- */

.blog-keep {
    margin: 64px 0 0;
    max-width: 68ch;
    background: var(--color-dark-teal);
    border-radius: 24px;
    padding: 40px;
}

.blog-keep__title {
    margin: 0 0 12px;
    color: #ffffff;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
}

.blog-keep__intro {
    margin: 0 0 24px;
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
    line-height: 1.65;
}

.blog-keep__list {
    margin: 0 0 28px;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.blog-keep__list li {
    padding-left: 20px;
    border-left: 2px solid var(--color-primary);
    color: rgba(255, 255, 255, 0.78);
    font-size: 16px;
    line-height: 1.6;
}

.blog-keep__link {
    display: block;
    color: #ffffff;
    font-weight: 700;
    text-decoration: underline;
    text-underline-offset: 3px;
    margin-bottom: 2px;
}

.blog-keep__link:hover {
    color: var(--color-primary);
}

.blog-keep__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

/* --- Single: related ----------------------------------------------------- */

.blog-related-section {
    padding: 72px 0 88px;
}

.blog-related {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 28px;
}

.blog-related__all {
    margin: 28px 0 0;
    font-weight: 700;
}

/* --- Focus states -------------------------------------------------------- */

.blog-archive a:focus-visible,
.blog-single a:focus-visible,
.blog-toc__summary:focus-visible {
    outline: 3px solid var(--color-primary-on-light);
    outline-offset: 3px;
    border-radius: 6px;
}

.blog-cta a:focus-visible,
.blog-keep a:focus-visible {
    outline-color: #C0FA3F;
}

/* --- Sticky contents list ------------------------------------------------ */
/* This page used to swap the global overflow-x from `hidden` to `clip` on its
   own, because `hidden` makes the root a scroll container and position: sticky
   cannot resolve against one. The global rule is `clip` for every page now
   (the sticky header needs the same thing), so nothing is needed here. */

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

@media (max-width: 1080px) {
    .blog-layout {
        grid-template-columns: minmax(0, 1fr);
        gap: 32px;
    }

    .blog-toc {
        order: 0;
        position: static;
        max-width: 68ch;
    }

    .blog-article {
        order: 1;
    }
}

@media (max-width: 860px) {
    .blog-lead {
        grid-template-columns: minmax(0, 1fr);
    }

    .blog-lead__media {
        min-height: 0;
        aspect-ratio: 16 / 9;
    }

    .blog-lead__body {
        padding: 28px;
    }

    .blog-cover--hero {
        aspect-ratio: 16 / 9;
    }

    .blog-article-title {
        max-width: none;
    }
}

@media (max-width: 600px) {
    .blog-hero {
        padding: 48px 0 32px;
    }

    .blog-article-header {
        padding-top: 32px;
    }

    .blog-article-deck {
        font-size: 18px;
    }

    .blog-article__body {
        font-size: 17px;
    }

    .blog-cta,
    .blog-keep {
        padding: 32px 24px;
    }

    .blog-cta__actions .btn,
    .blog-keep__actions .btn {
        width: 100%;
    }

    .blog-related-section {
        padding: 48px 0 64px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .blog-lead,
    .blog-card,
    .blog-arrow {
        transition: none;
    }

    .blog-lead:hover,
    .blog-card:hover {
        transform: none;
    }
}

/* BLOG END */

/* ==========================================================================
   Primary navigation dropdown

   The menu has one parent item ("eCom Resources") holding Vlogs, Blog and
   Courses. The base list rule is scoped to `.main-navigation > ul`, so the
   nested `.sub-menu` gets its box here; before this it inherited the
   top-level flex row and rendered as a second line under the header.
   ========================================================================== */

/* The header sits above the hero, which is position: relative, so it needs its
   own layer for the dropdown panel to paint over the section below. It is also
   the sticky bar (see the block at the end of this stylesheet), so `position`
   is set once, here. */
.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
}

.main-navigation .menu-item-has-children {
    position: relative;
}

.main-navigation .sub-menu {
    list-style: none;
    margin: 0;
    padding: 0;
}

/* Chevron on the trigger. The anchor is inline by default, so make it a flex
   row to keep the label and the arrow on one line. */
.main-navigation .menu-item-has-children > a {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.main-navigation .menu-item-has-children > a::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform 0.2s ease;
}

@media (min-width: 992px) {
    /* Invisible bridge across the gap between the trigger and the panel, so
       the pointer can travel down without the panel closing. It only exists
       while the item is open, so it never swallows clicks otherwise. */
    .main-navigation .menu-item-has-children:hover::after,
    .main-navigation .menu-item-has-children:focus-within::after {
        content: "";
        position: absolute;
        top: 100%;
        left: 0;
        width: 100%;
        height: 18px;
    }

    .main-navigation .sub-menu {
        position: absolute;
        top: calc(100% + 18px);
        left: -22px;
        z-index: 10;
        display: flex;
        flex-direction: column;
        gap: 2px;
        min-width: 200px;
        padding: 10px;
        background-color: var(--color-surface);
        border: 1px solid rgba(0, 0, 0, 0.07);
        border-radius: 14px;
        box-shadow: 0 18px 40px rgba(10, 19, 18, 0.14);
        opacity: 0;
        visibility: hidden;
        transform: translateY(-6px);
        /* visibility is a discrete property: animating it would flip halfway
           through the fade. Delay it to the end when closing, and drop the
           delay when opening (below), so the panel is never half-there. */
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s;
    }

    /* :focus-within opens it for keyboard users. It fires on the trigger
       itself, which is what makes the hidden children reachable by Tab. */
    .main-navigation .menu-item-has-children:hover > .sub-menu,
    .main-navigation .menu-item-has-children:focus-within > .sub-menu {
        opacity: 1;
        visibility: visible;
        transform: translateY(0);
        transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s;
    }

    .main-navigation .menu-item-has-children:hover > a::after,
    .main-navigation .menu-item-has-children:focus-within > a::after {
        transform: translateY(1px) rotate(-135deg);
    }

    .main-navigation .sub-menu a {
        display: block;
        padding: 9px 12px;
        border-radius: 9px;
        white-space: nowrap;
        transition: background-color 0.18s ease, color 0.18s ease;
    }

    .main-navigation .sub-menu a:hover,
    .main-navigation .sub-menu a:focus-visible {
        background-color: var(--color-pill-bg);
        color: var(--color-primary-on-light);
    }
}

@media (max-width: 991px) {
    /* In the hamburger panel there is no hover to open anything, so the
       children are simply listed under the parent, indented. */
    .main-navigation .sub-menu {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        margin: 10px 0 0;
        padding: 0 0 0 14px;
        border-left: 2px solid rgba(0, 0, 0, 0.1);
    }

    .main-navigation .sub-menu a {
        font-weight: 500;
    }

    /* No chevron: nothing expands, so an arrow would promise a control that
       is not there. The trigger takes the same block-level tap target as the
       other links in the panel. */
    .main-navigation .menu-item-has-children > a {
        display: flex;
    }

    .main-navigation .menu-item-has-children > a::after {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .main-navigation .sub-menu,
    .main-navigation .sub-menu a,
    .main-navigation .menu-item-has-children > a::after {
        transition: none;
    }
}

/* ==========================================================================
   Sticky header

   The bar stays visible in both scroll directions, as on wdmarket.com. That
   site uses position: fixed plus a compensating offset; sticky gets the same
   result here without one, because the header keeps its place in the flow and
   its height can change (the hamburger panel) without anything to re-measure.

   position/top/z-index live in the navigation block above, so the header has a
   single position rule. The global html/body overflow-x is `clip` rather than
   `hidden` for the same reason (see the note at that rule).
   ========================================================================== */

:root {
    /* .main-bar padding (20px x 2) + the 45px logo cap + the 1px border. Used
       for scroll offsets only; the sticky bar itself measures nothing. */
    --header-height: 86px;
}

/* Soft lift so the bar separates from light content scrolling under it. It is
   invisible over the dark hero at the top of the page, which is intended. */
.site-header {
    box-shadow: 0 6px 20px rgba(10, 19, 18, 0.06);
}

/* In-page anchors (the smooth scroll in header.php uses scrollIntoView, which
   honours this) would otherwise land their target underneath the bar. */
html {
    scroll-padding-top: calc(var(--header-height) + 16px);
}

/* The article contents list sticks too. Its 32px offset was measured against a
   header that scrolled away; hold it clear of the bar instead.
   .course-sidebar-col already sits at 120px and needs no change. */
.blog-toc {
    top: calc(var(--header-height) + 24px);
}

@media (max-width: 991px) {
    /* An open hamburger panel can be taller than a short viewport (a phone in
       landscape), and a pinned box taller than the scrollport hides its own
       bottom rows. Let the panel scroll inside the bar in that case; when it
       fits, max-height does nothing and no scrollbar appears. */
    .site-header:has(.main-navigation.mobile-open) {
        max-height: 100vh;
        max-height: 100dvh;
        overflow-y: auto;
    }
}

/* Page frozen behind the open hamburger panel. header.php puts this class on
   the root element, and only overflow-y is touched: the scroll position is
   kept, and the root does not become a scroll container, so the sticky bar
   goes on resolving against the viewport. A position: fixed body would break
   both. Not inside the media query above, so that a resize past the
   breakpoint cannot leave a locked page behind. */
html.menu-open {
    overflow-y: hidden !important;
}

/* Logged-in views: the WordPress admin bar is fixed over the top of the page,
   32px tall and 46px on tablets. Below 601px it scrolls away with the
   document, so the header goes back to 0. */
body.admin-bar .site-header {
    top: 32px;
}

@media screen and (max-width: 782px) {
    body.admin-bar .site-header {
        top: 46px;
    }
}

@media screen and (max-width: 600px) {
    body.admin-bar .site-header {
        top: 0;
    }
}

/* Floating header. The sticky layer itself goes transparent and the bar inside
   it becomes a rounded card inset from the edges, so content scrolls past
   visibly around it. The transparent margin must not swallow clicks meant for
   the page underneath, hence pointer-events off on the layer and back on for
   the bar. Overrides the full-width background, border and shadow above. */
.site-header {
    background-color: transparent;
    border-bottom: 0;
    box-shadow: none;
    padding: 12px 16px;
    pointer-events: none;
}

.site-header .main-bar {
    pointer-events: auto;
    max-width: 1440px;
    margin: 0 auto;
    padding: 14px 0;
    background-color: #F4F0E6;
    border: 1px solid rgba(0, 0, 0, 0.07);
    border-radius: 18px;
    box-shadow: 0 10px 30px rgba(10, 19, 18, 0.12);
}

:root {
    /* 12px layer padding x 2 + 14px bar padding x 2 + the 45px logo cap + the
       1px border x 2. Replaces the 86px above. */
    --header-height: 99px;
}

@media (max-width: 991px) {
    .site-header {
        padding: 8px 10px;
    }

    .site-header .main-bar {
        padding: 10px 0;
        border-radius: 14px;
    }

    :root {
        --header-height: 83px;
    }
}

/* On pages that open with a dark hero, the cream strip around the floating bar
   is the body showing through. Pull the hero up underneath the header instead,
   so the dark background runs to the top of the viewport behind the bar. The
   hero keeps its own padding; a transparent top border of the header's height
   makes room for the bar, and the hero's background paints under it because
   background-clip defaults to border-box. Cream heroes need nothing: the strip
   already matches them. */
body:has(.site-main > .hero.bg-dark-teal:first-child, .site-main > .webinar-hero:first-child, .single-course-page, .single-webinar-page) .site-header {
    margin-bottom: calc(-1 * var(--header-height));
}

.site-main > .hero.bg-dark-teal:first-child,
.site-main > .webinar-hero:first-child,
.single-course-page,
.single-webinar-page {
    border-top: var(--header-height) solid transparent;
}

/* At the top of the page the header has no background of its own and reads as
   part of the hero. The card above only appears once the page is scrolled
   (header.php sets .is-scrolled) or while the hamburger panel is open, when
   the links would otherwise sit unreadable over the content. The two triggers
   are separate rules so a browser without :has() still gets the first. */
.site-header .main-bar {
    background-color: transparent;
    border-color: transparent;
    box-shadow: none;
    transition: background-color 0.25s ease, border-color 0.25s ease, box-shadow 0.25s ease;
}

.site-header.is-scrolled .main-bar {
    background-color: #F4F0E6;
    border-color: rgba(0, 0, 0, 0.07);
    box-shadow: 0 10px 30px rgba(10, 19, 18, 0.12);
}

.site-header:has(.mobile-open) .main-bar {
    background-color: #F4F0E6;
    border-color: rgba(0, 0, 0, 0.07);
    box-shadow: 0 10px 30px rgba(10, 19, 18, 0.12);
}

/* Pages whose hero is the dark teal (body.has-dark-hero, set in functions.php):
   the strip behind the header takes the hero colour, and the logo, links and
   buttons go light until the card comes in. The logo has no light version, so
   a filter turns it white rather than adding a new file. */
.has-dark-hero .site-header:not(.is-scrolled) {
    background-color: var(--color-dark-teal);
}

.site-header .custom-logo {
    transition: filter 0.25s ease;
}

/* Centre the logo in the floating bar. The logo is an inline image inside a
   link, so the 1.6 line height left a strip of empty space under it and it sat
   high against the bar's equal top and bottom padding. Making the link a flex
   box and the image a block removes that strip, so the space above and below
   the logo is the same. */
.site-header .main-bar .container {
    align-items: center;
}

.site-header .site-branding {
    display: flex;
    align-items: center;
    line-height: 0;
}

.site-header .site-branding .custom-logo-link {
    display: flex;
    align-items: center;
}

.site-header .site-branding .custom-logo {
    display: block;
    height: 45px;
    width: auto;
    max-height: none;
}

.has-dark-hero .site-header:not(.is-scrolled) .custom-logo {
    filter: brightness(0) invert(1);
}

.has-dark-hero .site-header:not(.is-scrolled) .site-title a {
    color: #ffffff;
}

.has-dark-hero .site-header:not(.is-scrolled) .mobile-menu-toggle svg {
    stroke: #ffffff;
}

.has-dark-hero .site-header:not(.is-scrolled):has(.mobile-open) .custom-logo {
    filter: none;
}

.has-dark-hero .site-header:not(.is-scrolled):has(.mobile-open) .mobile-menu-toggle svg {
    stroke: #102B20;
}

/* Below 992px the links and buttons live in the cream hamburger panel, so they
   keep their dark colours there. */
@media (min-width: 992px) {
    .has-dark-hero .site-header:not(.is-scrolled) .main-navigation > ul > li > a {
        color: rgba(255, 255, 255, 0.92);
    }

    .has-dark-hero .site-header:not(.is-scrolled) .main-navigation > ul > li > a:hover {
        color: var(--color-primary);
    }

    .has-dark-hero .site-header:not(.is-scrolled) .header-buttons .header-login {
        color: rgba(255, 255, 255, 0.92);
        border-color: rgba(255, 255, 255, 0.3);
    }

    .has-dark-hero .site-header:not(.is-scrolled) .header-buttons .header-login:hover {
        color: #ffffff;
        border-color: rgba(255, 255, 255, 0.6);
    }

    .has-dark-hero .site-header:not(.is-scrolled) .header-buttons .header-account__toggle,
    .has-dark-hero .site-header:not(.is-scrolled) .header-bell__toggle {
        color: rgba(255, 255, 255, 0.92);
    }

    .has-dark-hero .site-header:not(.is-scrolled) .header-buttons .header-account__toggle:hover,
    .has-dark-hero .site-header:not(.is-scrolled) .header-buttons .header-account__toggle[aria-expanded="true"],
    .has-dark-hero .site-header:not(.is-scrolled) .header-bell__toggle:hover,
    .has-dark-hero .site-header:not(.is-scrolled) .header-bell__toggle[aria-expanded="true"] {
        background-color: rgba(255, 255, 255, 0.1);
        color: #ffffff;
    }
}

/* =========================================================================
   Webinars

   The overview page at /webinars/ and the single session template. Shares the
   dark hero and the cream body of the course pages on purpose: a webinar and a
   course should feel like two shelves of the same library.
   ========================================================================= */

/* Hero, overview page */
.webinar-hero {
    background-color: var(--color-dark-teal);
    padding: 80px 0 72px;
}

.webinar-hero__inner {
    max-width: 780px;
}

.webinar-hero h1 {
    font-size: 48px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -1.5px;
    color: #fff;
    margin-bottom: 24px;
}

.webinar-hero__lead {
    font-size: 19px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.82);
    margin-bottom: 16px;
}

.webinar-hero__note {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 32px;
}

.webinar-hero__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
}

/* The latest podcast beside the hero copy: the embed in a glowing frame,
   and a two line caption under it. One column below 992px. */
.webinar-hero--podcast {
    position: relative;
    overflow: hidden;
}

.webinar-hero__grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 64px;
    align-items: center;
}

.webinar-hero__podcast {
    position: relative;
    margin: 0;
}

.webinar-hero__podcast::before {
    content: "";
    position: absolute;
    inset: -12% -8% 10%;
    z-index: 0;
    background: radial-gradient(closest-side, rgba(124, 179, 66, 0.28), transparent);
    filter: blur(24px);
    pointer-events: none;
}

.webinar-hero__podcast-frame {
    position: relative;
    z-index: 1;
    aspect-ratio: 16 / 9;
    padding: 6px;
    border: 1px solid rgba(124, 179, 66, 0.3);
    border-radius: 22px;
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
    box-shadow: 0 30px 60px rgba(0, 0, 0, 0.45);
}

.webinar-hero__podcast-frame iframe {
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    border-radius: 16px;
    background: #000;
}

.webinar-hero__podcast-caption {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 20px;
    padding-left: 4px;
}

.webinar-hero__podcast-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 1.2px;
    text-transform: uppercase;
    color: var(--color-primary, #7CB342);
}

.webinar-hero__podcast-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-primary, #7CB342);
    box-shadow: 0 0 0 0 rgba(124, 179, 66, 0.6);
    animation: webinar-hero-pulse 2s ease-out infinite;
}

@keyframes webinar-hero-pulse {
    0% { box-shadow: 0 0 0 0 rgba(124, 179, 66, 0.6); }
    70%, 100% { box-shadow: 0 0 0 10px rgba(124, 179, 66, 0); }
}

.webinar-hero__podcast-title {
    font-size: 17px;
    font-weight: 600;
    line-height: 1.45;
    color: rgba(255, 255, 255, 0.88);
}

@media (max-width: 991px) {
    .webinar-hero__grid {
        grid-template-columns: minmax(0, 1fr);
        gap: 48px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .webinar-hero__podcast-dot {
        animation: none;
    }
}

.btn-outline-light {
    border: 1px solid rgba(255, 255, 255, 0.25);
    background: transparent;
    color: #fff;
}

.btn-outline-light:hover {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.4);
    color: #fff;
}

/* Section shells */
.webinar-section {
    padding: 72px 0;
}

.webinar-section--light {
    background: var(--color-surface);
}

.webinar-section--next {
    background: var(--color-background);
}

.webinar-section--muted,
.webinar-section--faq {
    background: var(--color-background);
}

.webinar-section--links {
    background: var(--color-surface);
    padding-bottom: 88px;
}

.webinar-section__title {
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -0.8px;
    margin-bottom: 12px;
}

.webinar-section__lead {
    font-size: 17px;
    color: var(--color-text-muted);
    margin-bottom: 36px;
    max-width: 680px;
}

/* Status pill. The four states are the only place colour carries meaning in
   this section, so each one also says what it is in words. */
.webinar-status {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 13px;
    border-radius: 100px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    background: var(--color-pill-bg);
    border: 1px solid var(--color-pill-border);
    color: var(--color-text-main);
}

.webinar-status--upcoming {
    background: rgba(124, 179, 66, 0.14);
    border-color: rgba(124, 179, 66, 0.4);
    color: var(--color-primary-on-light);
}

.webinar-status--live {
    background: #B3261E;
    border-color: #B3261E;
    color: #fff;
}

.webinar-status__dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #fff;
    display: inline-block;
}

.webinar-status--recorded {
    background: rgba(17, 17, 17, 0.06);
    border-color: rgba(17, 17, 17, 0.14);
    color: var(--color-text-main);
}

.webinar-status--past {
    background: transparent;
    border-color: var(--color-pill-border);
    color: var(--color-text-muted);
}

/* Coming next block */
.webinar-next {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    gap: 48px;
    align-items: center;
    background: var(--color-surface);
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: 24px;
    padding: 40px;
    margin-top: 24px;
}

.webinar-next__body h3 {
    font-size: 30px;
    line-height: 1.2;
    letter-spacing: -0.8px;
    margin: 18px 0 14px;
}

.webinar-next__body h3 a {
    color: var(--color-text-main);
}

.webinar-next__body h3 a:hover {
    color: var(--color-primary-on-light);
}

.webinar-next__excerpt {
    font-size: 17px;
    line-height: 1.65;
    color: var(--color-text-muted);
    margin-bottom: 22px;
}

.webinar-next__facts {
    list-style: none;
    padding: 0;
    margin: 0 0 28px;
    font-size: 15px;
    color: var(--color-text-muted);
}

.webinar-next__facts li {
    padding: 7px 0;
    border-bottom: 1px solid rgba(17, 17, 17, 0.06);
}

.webinar-next__facts li:last-child {
    border-bottom: 0;
}

.webinar-next__facts strong {
    color: var(--color-text-main);
    font-weight: 600;
}

.webinar-next__actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.webinar-next__media img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: 16px;
}

/* Card grid */
.webinar-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
    gap: 28px;
}

.webinar-card {
    display: flex;
    flex-direction: column;
    background: var(--color-surface);
    border: 1px solid rgba(17, 17, 17, 0.08);
    border-radius: 18px;
    overflow: hidden;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.webinar-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 16px 40px rgba(17, 17, 17, 0.08);
}

.webinar-card__media {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    background: var(--color-pill-bg);
    overflow: hidden;
}

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

.webinar-card__placeholder {
    display: block;
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #EFEBE0 0%, #DCD8CB 100%);
}

.webinar-card__placeholder--large {
    aspect-ratio: 16 / 9;
    border-radius: 16px;
}

.webinar-card__media .webinar-status {
    position: absolute;
    top: 12px;
    left: 12px;
}

.webinar-card__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    padding: 22px 22px 24px;
}

.webinar-card__meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px;
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 0 0 12px;
}

.webinar-card__date {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-weight: 600;
    color: var(--color-text-main);
}

.webinar-card__level,
.webinar-card__topic {
    padding: 3px 10px;
    border-radius: 100px;
    background: var(--color-pill-bg);
    border: 1px solid var(--color-pill-border);
    font-size: 12px;
}

.webinar-card__title {
    font-size: 20px;
    line-height: 1.3;
    letter-spacing: -0.4px;
    margin: 0 0 10px;
}

.webinar-card__title a {
    color: var(--color-text-main);
}

.webinar-card__title a:hover {
    color: var(--color-primary-on-light);
}

.webinar-card__excerpt {
    font-size: 15px;
    line-height: 1.6;
    color: var(--color-text-muted);
    margin: 0 0 20px;
}

.webinar-card__footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-top: auto;
    padding-top: 6px;
}

.webinar-card__speaker {
    font-size: 13px;
    color: var(--color-text-muted);
}

.webinar-card__cta {
    padding: 9px 20px;
    font-size: 14px;
    font-weight: 600;
    white-space: nowrap;
}

.webinar-card__link {
    font-size: 14px;
    font-weight: 600;
}

/* Past sessions, listed rather than carded: there is nothing to click through
   to but a summary. */
.webinar-past-list {
    list-style: none;
    padding: 0;
    margin: 0;
    max-width: 760px;
}

.webinar-past-list li {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 0;
    border-bottom: 1px solid var(--color-pill-border);
}

.webinar-past-list a {
    font-size: 17px;
    font-weight: 600;
}

.webinar-past-list__date {
    font-size: 14px;
    color: var(--color-text-muted);
}

/* Empty state */
.webinar-empty {
    max-width: 640px;
    margin: 0 auto;
    text-align: center;
}

.webinar-empty h2 {
    font-size: 28px;
    margin-bottom: 14px;
}

.webinar-empty p {
    font-size: 17px;
    color: var(--color-text-muted);
    margin-bottom: 28px;
}

.webinar-empty__links {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: center;
}

/* Questions block */
.webinar-faq {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 28px;
    margin-top: 32px;
}

.webinar-faq__item h3 {
    font-size: 19px;
    margin-bottom: 10px;
}

.webinar-faq__item p {
    font-size: 16px;
    line-height: 1.65;
    color: var(--color-text-muted);
    margin: 0;
}

.webinar-links {
    list-style: none;
    padding: 0;
    margin: 28px 0 0;
    max-width: 760px;
}

.webinar-links li {
    padding: 12px 0;
    font-size: 16px;
    color: var(--color-text-muted);
    border-bottom: 1px solid var(--color-pill-border);
}

.webinar-links li:last-child {
    border-bottom: 0;
}

.webinar-links a {
    font-weight: 600;
}

/* ---- Single webinar ---- */
.single-webinar-page {
    background-color: var(--color-dark-teal);
    padding: 80px 0;
}

.webinar-single-hero {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 72px;
    align-items: center;
}

.webinar-single-hero__content .back-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 26px;
}

.webinar-single-hero__content .back-link:hover {
    color: #fff;
}

.webinar-single-hero__content h1 {
    font-size: 44px;
    font-weight: 800;
    line-height: 1.12;
    letter-spacing: -1.4px;
    color: #fff;
    margin: 16px 0 20px;
}

.webinar-single-hero__deck {
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.72);
    margin-bottom: 32px;
}

.webinar-single-hero .hero-image-wrapper {
    border-radius: 16px;
    overflow: hidden;
    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(124, 179, 66, 0.25);
}

.webinar-single-hero .hero-image-wrapper img {
    width: 100%;
    height: auto;
    display: block;
}

.webinar-single-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 56px;
    align-items: start;
}

.webinar-block {
    margin-bottom: 48px;
}

.webinar-block h2 {
    font-size: 26px;
    letter-spacing: -0.6px;
    margin-bottom: 18px;
}

.webinar-block--prose .entry-content {
    font-size: 17px;
    line-height: 1.75;
    color: var(--color-text-main);
}

.webinar-ticks {
    list-style: none;
    padding: 0;
    margin: 0;
}

.webinar-ticks li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 9px 0;
    font-size: 16px;
    line-height: 1.6;
    color: var(--color-text-muted);
}

.webinar-ticks svg {
    flex: 0 0 auto;
    margin-top: 3px;
    color: var(--color-primary-on-light);
}

.webinar-speaker {
    display: flex;
    gap: 20px;
    align-items: flex-start;
    background: var(--color-background);
    border-radius: 16px;
    padding: 24px;
}

.webinar-speaker__photo {
    width: 96px;
    height: 96px;
    border-radius: 50%;
    object-fit: cover;
    flex: 0 0 auto;
}

.webinar-speaker__name {
    font-size: 18px;
    font-weight: 700;
    color: var(--color-text-main);
    margin: 0 0 2px;
}

.webinar-speaker__role {
    font-size: 14px;
    color: var(--color-primary-on-light);
    font-weight: 600;
    margin: 0 0 10px;
}

.webinar-speaker__bio {
    font-size: 15px;
    line-height: 1.65;
    color: var(--color-text-muted);
    margin: 0;
}

.webinar-related {
    list-style: none;
    padding: 0;
    margin: 0;
}

.webinar-related li {
    padding: 12px 0;
    border-bottom: 1px solid var(--color-pill-border);
    font-size: 16px;
}

.webinar-related li:last-child {
    border-bottom: 0;
}

.webinar-aside-card {
    position: sticky;
    top: 110px;
    background: var(--color-background);
    border: 1px solid rgba(17, 17, 17, 0.07);
    border-radius: 20px;
    padding: 28px;
}

.webinar-aside-card__title {
    font-size: 18px;
    margin-bottom: 18px;
}

.webinar-facts {
    margin: 0 0 24px;
}

.webinar-facts dt {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    color: var(--color-text-muted);
    margin-top: 14px;
}

.webinar-facts dt:first-child {
    margin-top: 0;
}

.webinar-facts dd {
    margin: 3px 0 0;
    font-size: 15px;
    color: var(--color-text-main);
    font-weight: 500;
}

.webinar-aside-card__cta {
    display: block;
    width: 100%;
    /* .btn is content-box, so width:100% would add its 24px side padding on
       top of the card's inner width and spill past the card edge. */
    box-sizing: border-box;
}

.webinar-aside-card__note {
    font-size: 13px;
    color: var(--color-text-muted);
    margin: 12px 0 0;
    text-align: center;
}

.webinar-more {
    margin-top: 72px;
    padding-top: 56px;
    border-top: 1px solid var(--color-pill-border);
}

/* Responsive */
@media (max-width: 991px) {
    .webinar-next,
    .webinar-single-hero,
    .webinar-single-layout {
        grid-template-columns: 1fr;
    }

    .webinar-next {
        gap: 32px;
        padding: 28px;
    }

    .webinar-next__media {
        order: -1;
    }

    .webinar-single-hero {
        gap: 40px;
    }

    .webinar-aside-card {
        position: static;
    }
}

@media (max-width: 768px) {
    .webinar-hero {
        padding: 56px 0 48px;
    }

    .webinar-hero h1 {
        font-size: 34px;
        letter-spacing: -1px;
    }

    .webinar-hero__lead {
        font-size: 17px;
    }

    .webinar-section {
        padding: 52px 0;
    }

    .webinar-section__title {
        font-size: 26px;
    }

    .webinar-single-hero__content h1 {
        font-size: 32px;
    }

    .webinar-next__body h3 {
        font-size: 24px;
    }

    .webinar-speaker {
        flex-direction: column;
    }
}

/* Webinars: a session with no featured image yet drops the media column
   rather than reserving an empty grey panel where a picture will go. */
.webinar-next--no-media,
.webinar-single-hero--no-media {
    grid-template-columns: 1fr;
}

.webinar-single-hero--no-media .webinar-single-hero__content {
    max-width: 840px;
}

/* The back link is block level so the status pill starts its own line, and
   carries vertical padding so the tap target is not 22px tall. */
.webinar-single-hero__content .back-link {
    display: flex;
    width: -moz-fit-content;
    width: fit-content;
    padding: 8px 0;
    margin-bottom: 18px;
}

@media (max-width: 991px) {
    .webinar-single-hero__content .back-link {
        padding: 12px 0;
    }
}

/* The status pill sits on the dark hero on a single session, where the light
   surface versions of recorded and past disappear into the background. */
.webinar-single-hero__content .webinar-status {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.22);
    color: #fff;
}

.webinar-single-hero__content .webinar-status--upcoming {
    background: rgba(124, 179, 66, 0.18);
    border-color: rgba(124, 179, 66, 0.5);
    color: #A9DB6B;
}

.webinar-single-hero__content .webinar-status--live {
    background: #B3261E;
    border-color: #B3261E;
    color: #fff;
}

/* ==========================================================================
   Gutenberg block content
   ==========================================================================

   This is a classic theme. There is no theme.json, and the theme declares
   neither editor-styles nor wp-block-styles, so core block markup used to
   arrive on the page with nothing but wp-block-library defaults on it. A
   Gutenberg button rendered as a dark core pill next to the theme's green
   ones, which is what happened on /courses/ after page 44 was converted to an
   editable page on 2026-09-12.

   Everything below is scoped to .entry-content so it only touches content that
   came out of the editor, never the hand built sections in the page templates.

   Added 2026-09-15, see docs/copy-changes/2026-09-15-courses-layout-restore/.
   ========================================================================== */

.entry-content > * + * {
    margin-top: 24px;
}

.entry-content p {
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text-main);
}

.entry-content h2,
.entry-content h3,
.entry-content h4 {
    font-weight: 800;
    letter-spacing: -0.5px;
    color: var(--color-text-main);
    margin-top: 48px;
    margin-bottom: 16px;
}

.entry-content h2 { font-size: 32px; letter-spacing: -1px; }
.entry-content h3 { font-size: 24px; }
.entry-content h4 { font-size: 20px; }

.entry-content > *:first-child {
    margin-top: 0;
}

/* Links. --color-primary is 2.50:1 on white, so text links take the darkened
   text-safe green instead. Same reasoning as the :root comment. */
.entry-content a:not(.wp-block-button__link) {
    color: var(--color-primary-on-light);
    text-decoration: underline;
    text-underline-offset: 2px;
}

.entry-content a:not(.wp-block-button__link):hover {
    text-decoration-thickness: 2px;
}

.entry-content ul,
.entry-content ol {
    padding-left: 24px;
    font-size: 18px;
    line-height: 1.7;
    color: var(--color-text-main);
}

.entry-content li + li {
    margin-top: 8px;
}

/* Core block buttons, matched to .btn and .btn-primary above so an editor
   placed button is indistinguishable from a template one. */
.entry-content .wp-block-buttons {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.entry-content .wp-block-button__link {
    display: inline-block;
    padding: 12px 24px;
    border-radius: 999px;
    font-weight: 700;
    text-align: center;
    text-decoration: none;
    cursor: pointer;
    background-color: var(--color-primary);
    color: var(--color-dark-teal);
    transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.entry-content .wp-block-button__link:hover {
    background-color: var(--color-primary-hover);
    color: var(--color-dark-teal);
}

.entry-content .wp-block-button.is-style-outline .wp-block-button__link {
    background-color: transparent;
    color: var(--color-primary-on-light);
    border: 1px solid var(--color-pill-border);
}

.entry-content blockquote {
    margin-left: 0;
    padding-left: 20px;
    border-left: 3px solid var(--color-primary);
    color: var(--color-text-muted);
    font-style: italic;
}

.entry-content figure,
.entry-content img {
    max-width: 100%;
    height: auto;
}

.entry-content figcaption {
    font-size: 14px;
    color: var(--color-text-muted);
    margin-top: 8px;
}

.entry-content .wp-block-separator {
    border: 0;
    border-top: 1px solid var(--color-pill-border);
    margin: 48px 0;
}

/* Tables scroll inside their own box rather than widening the page. */
.entry-content .wp-block-table {
    overflow-x: auto;
}

.entry-content table {
    width: 100%;
    border-collapse: collapse;
    font-size: 16px;
}

.entry-content th,
.entry-content td {
    padding: 12px;
    border: 1px solid var(--color-pill-border);
    text-align: left;
}

.entry-content th {
    font-weight: 700;
    background: var(--color-pill-bg);
}

@media (max-width: 767px) {
    .entry-content p,
    .entry-content ul,
    .entry-content ol { font-size: 16px; }
    .entry-content h2 { font-size: 26px; }
    .entry-content h3 { font-size: 21px; }
}

/* ==========================================================================
   Homepage 2026-10-01 (prototype port). Purpose, Topics, Knowledge teaser
   (.kt), Upcoming event (.ev), Principles, CTA. See
   docs/copy-changes/2026-10-01-homepage-knowledge/CHANGELOG.md.
   ========================================================================== */
.section__intro { font-size: var(--fs-lead, 17px) !important; line-height: 1.6; color: var(--color-text-muted); max-width: 720px; margin: 16px auto 0; }
.bg-dark-teal .section__intro { color: rgba(255, 255, 255, 0.72); }
.body-copy { font-size: var(--fs-lead, 17px); line-height: 1.6; color: var(--color-text-muted); margin-bottom: 20px; }
.body-copy--lead { margin-bottom: 28px; }
.cta-copy { margin-bottom: 30px; }
.btn-community, .btn-community:hover { background-color: var(--color-lime); color: var(--color-dark-teal); border-color: transparent; font-weight: 700; }
.purpose-label { margin: 8px 0 16px; font-size: 13px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-muted); }
.topic-card--link { display: flex; flex-direction: column; color: inherit; text-decoration: none; }
.topic-card--link:hover { color: inherit; }
.topic-card--link p { flex: 1 1 auto; }
.topic-card__more { margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--color-primary-on-light); }
.topic-card--link:hover h3 { color: var(--color-primary-on-light); }
.topic-card--link:focus-visible { outline: 3px solid var(--color-primary-on-light); outline-offset: 3px; }
@media (max-width: 991px) { .body-copy, .section__intro, .cta-copy { font-size: 16px !important; } }

/* Knowledge teaser */
.kt { --kt-ink:#111111; --kt-muted:#5A5A54; --kt-accent:#4A7326; --kt-fill:#7CB342; --kt-soft:#E6F4EA; --kt-pill:#EFEBE0; --kt-pill-line:#D9D6CC; --kt-line:rgba(10,19,18,.10); --kt-card-line:rgba(17,17,17,.08); background:#fff; color:var(--kt-muted); }
.kt *, .kt *::before, .kt *::after { box-sizing:border-box; }
.kt a { text-decoration:none; }
.kt__head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:24px 48px; margin-bottom:56px; }
.kt__intro { max-width:640px; }
.kt__pill { display:inline-flex; align-items:center; gap:6px; margin:0 0 20px; padding:6px 18px; border:1px solid var(--kt-pill-line); border-radius:999px; background:var(--kt-pill); color:#555550; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.kt__pill::before { content:"•"; color:var(--kt-fill); font-size:16px; }
.kt__title { margin:0 0 20px; color:var(--kt-ink); font-size:var(--fs-h2,42px); line-height:1.15; font-weight:700; letter-spacing:-.02em; text-wrap:balance; }
.kt__lead { margin:0; font-size:var(--fs-lead,17px); line-height:1.6; color:var(--kt-muted); }
.kt__actions { display:flex; flex-wrap:wrap; gap:12px; }
.kt__btn { display:inline-block; padding:12px 26px; border:1px solid transparent; border-radius:999px; font-size:16px; font-weight:700; line-height:1.2; text-align:center; transition:background-color .2s,border-color .2s,color .2s; }
.kt__btn--primary { background:var(--kt-fill); color:#0A1312; }
.kt__btn--primary:hover { background:#6CA034; color:#0A1312; }
.kt__btn--ghost { border-color:var(--kt-pill-line); color:var(--kt-ink); background:transparent; }
.kt__btn--ghost:hover { border-color:var(--kt-fill); color:var(--kt-accent); }
.kt__list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; margin:0; padding:0; list-style:none; }
.kt__list--1 { grid-template-columns:minmax(0,640px); }
.kt__list--2 { grid-template-columns:repeat(2,minmax(0,1fr)); }
.kt__card { display:flex; flex-direction:column; height:100%; padding:28px; background:#fff; border:1px solid var(--kt-card-line); border-radius:var(--radius-card,20px); box-shadow:0 4px 20px rgba(10,19,18,.05); transition:transform .3s,border-color .3s,box-shadow .3s; }
.kt__card:hover { transform:translateY(-4px); border-color:rgba(124,179,66,.45); box-shadow:0 16px 32px rgba(10,19,18,.09); }
.kt__card--pinned { border-color:rgba(124,179,66,.45); }
.kt__cardhead { display:flex; align-items:center; gap:12px; margin:0 0 14px; }
.kt__avatar { flex:0 0 40px; width:40px; height:40px; border-radius:50%; object-fit:cover; display:inline-flex; align-items:center; justify-content:center; background:var(--kt-soft); color:var(--kt-accent); font-size:16px; font-weight:800; line-height:1; }
.kt__who { display:flex; flex-direction:column; gap:2px; min-width:0; margin:0; line-height:1.35; }
.kt__author { display:inline-flex; align-items:center; gap:6px; font-size:15px; font-weight:700; color:var(--kt-ink); }
.kt__verified { display:inline-flex; width:17px; height:17px; color:var(--kt-accent); }
.kt__verified svg { display:block; width:100%; height:100%; }
.kt__meta { display:flex; flex-wrap:wrap; gap:0 6px; font-size:13px; color:var(--kt-muted); }
.kt__meta a { color:var(--kt-accent); font-weight:600; }
.kt__meta a:hover { text-decoration:underline; }
.kt__pinned { display:inline-flex; align-items:center; gap:6px; margin-left:auto; padding:6px 14px; border-radius:999px; background:var(--kt-soft); color:var(--kt-accent); font-size:13px; font-weight:600; white-space:nowrap; }
.kt__pinned svg { width:14px; height:14px; }
.kt__cardtitle { margin:0 0 10px; color:var(--kt-ink); font-size:var(--fs-h3,20px); line-height:1.3; letter-spacing:-.01em; font-weight:700; }
.kt__cardtitle a { color:inherit; }
.kt__cardtitle a:hover { color:var(--kt-accent); }
.kt__excerpt { margin:0 0 14px; font-size:15px; line-height:1.6; color:var(--kt-muted); display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; }
.kt__chips { display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:0 0 14px; padding:0; list-style:none; font-size:13px; font-weight:600; color:var(--kt-muted); }
.kt__chips li { display:inline-flex; align-items:center; gap:6px; }
.kt__chips svg { width:15px; height:15px; }
.kt__type { display:inline-block; padding:6px 14px; border-radius:999px; background:var(--kt-pill); color:var(--kt-ink); font-size:13px; font-weight:600; line-height:1.4; }
.kt__type--guide, .kt__type--tutorial { background:var(--kt-soft); color:var(--kt-accent); }
.kt__type--video { background:#EEF3FB; color:#2B4C7E; }
.kt__stats { display:flex; flex-wrap:wrap; align-items:center; gap:12px 18px; margin:auto 0 0; padding-top:14px; border-top:1px solid var(--kt-line); font-size:13px; font-weight:600; }
.kt__stats a { display:inline-flex; align-items:center; gap:6px; padding:6px 12px; margin:-6px 0; border-radius:999px; color:var(--kt-muted); transition:background-color .12s,color .12s; }
.kt__stats a:first-child { margin-left:-12px; }
.kt__stats a:hover { background:var(--kt-soft); color:var(--kt-accent); }
.kt__stats svg { width:16px; height:16px; flex:0 0 auto; }
.kt__stats a:first-child svg { color:var(--kt-accent); }
.kt a:focus-visible { outline:3px solid var(--kt-accent); outline-offset:2px; }
@media (max-width:1199px) { .kt__list { grid-template-columns:repeat(2,minmax(0,1fr)); } .kt__list > li:nth-child(3) { display:none; } .kt__list--1 { grid-template-columns:minmax(0,640px); } }
@media (max-width:991px) { .kt__title { font-size:26px !important; line-height:1.25 !important; } .kt__lead { font-size:16px; } }
@media (max-width:700px) { .kt__list, .kt__list--1 { grid-template-columns:minmax(0,1fr); } .kt__list > li:nth-child(3) { display:block; } }
@media (max-width:600px) { .kt__card { padding:22px; } .kt__stats { gap:8px 6px; } .kt__stats a { padding:6px 8px; } .kt__stats a:first-child { margin-left:-8px; } .kt__actions { width:100%; } .kt__btn { flex:1 1 100%; } }
@media (max-width:575px) { .kt__title { font-size:22px !important; line-height:1.3 !important; } }
@media (prefers-reduced-motion:reduce) { .kt__card, .kt__stats a, .kt__btn { transition:none; } }

/* Upcoming event */
.ev { --ev-ink:var(--color-text-main,#111); --ev-muted:var(--color-text-muted,#5A5A54); --ev-accent:var(--color-primary-on-light,#4A7326); --ev-fill:var(--color-lime,#7CB342); --ev-soft:#E6F4EA; --ev-pill:var(--color-pill-bg,#EFEBE0); --ev-pill-line:var(--color-pill-border,#D9D6CC); --ev-line:rgba(17,17,17,.08); --ev-dark:var(--color-dark-teal,#0A1312); }
.ev *, .ev *::before, .ev *::after { box-sizing:border-box; }
.ev__grid { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,440px); gap:64px; align-items:center; max-width:1120px; margin:0 auto; }
.ev__pill { display:inline-flex; align-items:center; gap:6px; margin:0 0 20px; padding:6px 18px; border:1px solid var(--ev-pill-line); border-radius:999px; background:var(--ev-pill); color:#555550; font-size:13px; font-weight:600; letter-spacing:.04em; text-transform:uppercase; }
.ev__pill::before { content:"•"; color:var(--ev-fill); font-size:16px; }
.ev__title { margin:0 0 20px; color:var(--ev-ink); font-size:var(--fs-h2,42px); line-height:1.15; font-weight:700; letter-spacing:-.02em; text-wrap:balance; }
.ev__lead { margin:0 0 24px; font-size:var(--fs-lead,17px); line-height:1.6; color:var(--ev-muted); max-width:520px; }
.ev__points { display:grid; gap:12px; margin:0 0 28px; padding:0; list-style:none; }
.ev__points li { display:flex; gap:12px; align-items:flex-start; font-size:15px; line-height:1.6; color:var(--ev-muted); }
.ev__points li::before { content:""; flex:0 0 22px; height:22px; margin-top:1px; border-radius:50%; background:var(--ev-soft) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234A7326' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='20 6 9 17 4 12'/%3E%3C/svg%3E") center/12px no-repeat; }
.ev__points strong { color:var(--ev-ink); font-weight:700; }
.ev__more { font-size:15px; font-weight:700; color:var(--ev-accent); text-decoration:none; }
.ev__more:hover { text-decoration:underline; }
.ev__card { background:#fff; border:1px solid var(--ev-line); border-radius:var(--radius-card,20px); box-shadow:0 4px 20px rgba(10,19,18,.05); overflow:hidden; }
.ev__banner { position:relative; display:flex; flex-direction:column; justify-content:space-between; gap:28px; min-height:168px; padding:24px 28px; color:#fff; background-color:var(--ev-dark); background-image:radial-gradient(circle at 88% 12%, rgba(124,179,66,.38), transparent 55%), linear-gradient(rgba(255,255,255,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,.045) 1px, transparent 1px); background-size:auto, 22px 22px, 22px 22px; }
.ev__bannertop { display:flex; justify-content:space-between; align-items:flex-start; gap:12px; }
.ev__type { display:inline-flex; align-items:center; gap:8px; padding:6px 14px; border-radius:999px; background:rgba(255,255,255,.1); border:1px solid rgba(255,255,255,.16); font-size:13px; font-weight:600; }
.ev__type::before { content:""; width:8px; height:8px; border-radius:50%; background:var(--ev-fill); box-shadow:0 0 0 4px rgba(124,179,66,.25); }
.ev__date { display:flex; align-items:flex-end; gap:14px; }
.ev__day { font-size:48px; font-weight:800; line-height:.9; letter-spacing:-.03em; }
.ev__month { font-size:13px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--ev-fill); line-height:1.3; }
.ev__month span { display:block; color:rgba(255,255,255,.75); letter-spacing:.02em; text-transform:none; font-weight:500; font-size:14px; }
.ev__body { padding:24px 28px 28px; }
.ev__name { margin:0 0 8px; font-size:var(--fs-h3,20px); line-height:1.3; font-weight:700; color:var(--ev-ink); }
.ev__meta { display:flex; flex-wrap:wrap; gap:6px 16px; margin:0 0 14px; padding:0; list-style:none; font-size:13px; font-weight:600; color:var(--ev-muted); }
.ev__meta li { display:inline-flex; align-items:center; gap:6px; }
.ev__meta svg { width:15px; height:15px; color:var(--ev-accent); flex:0 0 auto; }
.ev__desc { margin:0 0 20px; font-size:15px; line-height:1.6; color:var(--ev-muted); }
.ev__stats { display:grid; grid-template-columns:repeat(3,1fr); margin:0 0 18px; border-top:1px solid var(--ev-line); border-bottom:1px solid var(--ev-line); }
.ev__stats--2 { grid-template-columns:repeat(2,1fr); }
.ev__stats div { display:flex; flex-direction:column-reverse; gap:2px; padding:14px 4px; text-align:center; }
.ev__stats div + div { border-left:1px solid var(--ev-line); }
.ev__stats dt { font-size:12.5px; color:var(--ev-muted); }
.ev__stats dd { margin:0; font-size:22px; font-weight:800; color:var(--ev-ink); line-height:1.2; font-variant-numeric:tabular-nums; }
.ev__bar { height:6px; margin:-8px 0 22px; border-radius:999px; background:var(--ev-pill); overflow:hidden; }
.ev__bar span { display:block; height:100%; border-radius:inherit; background:var(--ev-fill); }
.ev__cta { display:block; width:100%; padding:14px 26px; border:1px solid transparent; border-radius:999px; background:var(--ev-fill); color:var(--ev-dark); font-size:16px; font-weight:700; line-height:1.25; text-align:center; text-decoration:none; transition:background-color .2s; }
.ev__cta:hover { background:var(--color-lime-hover,#6CA034); color:var(--ev-dark); }
.ev__cta:focus-visible, .ev__more:focus-visible { outline:3px solid var(--ev-accent); outline-offset:2px; }
.ev__card--empty .ev__body { text-align:center; }
@media (max-width:991px) { .ev__grid { grid-template-columns:1fr; gap:36px; } .ev__title { font-size:26px !important; line-height:1.25 !important; } .ev__lead { font-size:16px; max-width:none; } .ev__card { max-width:520px; } }
@media (max-width:575px) { .ev__title { font-size:22px !important; line-height:1.3 !important; } .ev__banner, .ev__body { padding-left:22px; padding-right:22px; } .ev__day { font-size:40px; } }
@media (prefers-reduced-motion:reduce) { .ev__cta { transition:none; } }

/* Header logo over the dark hero: swap to the white logo that keeps the green
   "e" (second image added by ecomcademy_light_header_logo() in functions.php)
   instead of the all-white filter above, which is now switched off. */
.custom-logo--light,
.site-header .site-branding .custom-logo.custom-logo--light {
    display: none;
}

.has-dark-hero .site-header:not(.is-scrolled) .custom-logo {
    filter: none;
}

.has-dark-hero .site-header:not(.is-scrolled) .custom-logo:not(.custom-logo--light) {
    display: none;
}

.has-dark-hero .site-header:not(.is-scrolled) .custom-logo--light {
    display: block;
}

.has-dark-hero .site-header:not(.is-scrolled):has(.mobile-open) .custom-logo:not(.custom-logo--light) {
    display: block;
}

.has-dark-hero .site-header:not(.is-scrolled):has(.mobile-open) .custom-logo--light {
    display: none;
}

/* Homepage Section 3: community sneak peek (inc/community-preview.php). The
   cards and the leaderboard are the community plugin's own; this is the
   scrollable frame, the fade at its bottom, and the Read all button. */
.cp .ecc-community .ecc-community__side { position: static; }
.cp .ecc-community__peek { position: relative; }
.cp .ecc-community__peek-frame {
    height: 620px; overflow-y: auto; overscroll-behavior: contain; padding: 0 8px 0 0;
    scrollbar-width: thin; scrollbar-color: rgba(61,107,31,0.55) transparent;
}
.cp .ecc-community__peek-frame:focus-visible { outline: 3px solid var(--color-lime, #7CB342); outline-offset: 3px; }
.cp .ecc-community__peek::after {
    content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px; pointer-events: none;
    background: linear-gradient(180deg, rgba(244,240,230,0) 0%, var(--color-background, #F4F0E6) 90%);
}
/* Matching fade at the top, so cards scrolled out of view dissolve instead of
   being cut off. The frame has a little top padding so the first card is clear
   of it before anything is scrolled. */
.cp .ecc-community__peek::before {
    content: ""; position: absolute; left: 0; right: 0; top: 0; height: 40px; z-index: 1; pointer-events: none;
    background: linear-gradient(0deg, rgba(244,240,230,0) 0%, var(--color-background, #F4F0E6) 85%);
}
.cp .ecc-community__peek-frame { padding-top: 20px; }
.cp .ecc-community__peek .ecc-community__list { margin-bottom: 84px; }
/* Read all sits on the fade at the bottom of the feed, centred on the feed
   column (the 300px leaderboard column and the 40px gap are subtracted). */
.cp__more {
    position: absolute; left: 0; right: 0; bottom: 14px; z-index: 2; margin: 0; text-align: center; pointer-events: none;
}
.cp__more .cp__all { pointer-events: auto; }
.cp__all { display: inline-block; padding: 12px 26px; border-radius: 999px; background: var(--color-dark-teal, #0A1312); color: #fff; font-weight: 700; font-size: 15px; text-decoration: none; transition: background-color 0.2s ease; }
.cp__all:hover { background: #102B20; color: #fff; }
.cp__all:focus-visible { outline: 3px solid var(--color-lime, #7CB342); outline-offset: 3px; }
@media (max-width: 600px) { .cp .ecc-community__peek-frame { height: 520px; } }

/* Upcoming event under the leaderboard in the community sneak peek. It reuses
   the .ev card styles, which read their colours from the .ev wrapper. */
.cp__event { margin-top: 20px; }
.cp__event-title { margin: 0 0 12px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ev-ink); }
.cp__event .ev__banner { min-height: 130px; padding: 20px 22px; gap: 20px; }
.cp__event .ev__body { padding: 20px 22px 22px; }
.cp__event-more { margin: 12px 0 0; text-align: center; }

/* Recorded session card under the leaderboard (community sneak peek). */
.cp__rec-media { display: block; background: var(--ev-dark, #0A1312); }
.cp__rec-media img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.cp__rec-label { margin: 0 0 8px; font-size: 12.5px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ev-accent); }
.cp__rec .ev__name a { color: inherit; text-decoration: none; }
.cp__rec .ev__name a:hover { text-decoration: underline; }

/* Hero badges sit straight under the video (moved from the text column). */
.hero__composition--video { flex-direction: column; justify-content: center; }
.hero__composition--video .hero-badges-list { justify-content: center; margin-top: 26px; width: 100%; }

/* Mobile: badges under the video as a compact centred row that wraps, instead
   of three full-width bars, and a tighter gap between the button and the video
   (the 991px rules above stack the badges and add padding for the old layout). */
@media (max-width: 991px) {
    .hero--media .hero-wrapper { gap: 22px !important; }
    .hero--media .hero__content { padding-bottom: 0 !important; }
    .hero__composition--video { padding-top: 0 !important; }
    .hero__composition--video .hero-badges-list {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 8px !important;
        margin-top: 18px !important;
    }
    .hero__composition--video .hero-badge-item {
        width: auto !important;
        max-width: none !important;
        padding: 6px 12px !important;
        font-size: 12.5px !important;
    }
}

/* Homepage hero video: compact play button over the poster. */
#homeVideoOverlay .play-button {
    width: 60px; height: 60px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
    margin-bottom: 14px; padding-left: 3px; box-sizing: border-box;
    background: var(--color-lime); color: var(--color-dark-teal);
    box-shadow: 0 0 0 8px rgba(124,179,66,0.22), 0 8px 24px rgba(0,0,0,0.35);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
#homeVideoOverlay:hover .play-button { transform: scale(1.06); box-shadow: 0 0 0 11px rgba(124,179,66,0.28), 0 8px 24px rgba(0,0,0,0.35); }
#homeVideoOverlay:focus-visible { outline: 3px solid var(--color-lime); outline-offset: -3px; }
#homeVideoOverlay .play-label { font-size: 12px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255,255,255,0.9); }
@media (max-width: 575px) { #homeVideoOverlay .play-button { width: 52px; height: 52px; margin-bottom: 10px; } }

/* Mobile menu: the fixed cookie banner sat on top of the open hamburger panel
   and covered its last links and the login buttons. Hide it while the menu is
   open (header.php puts .menu-open on the root); it comes back on close. */
html.menu-open #gdpr-cookie-banner { display: none !important; }

/* Short phones: the open header's max-height (100dvh) did not include its own
   8px padding, so it ended up 16px taller than the screen and the bottom edge
   of the menu card was cut off even when scrolled to the end. */
@media (max-width: 991px) {
    .site-header:has(.main-navigation.mobile-open) { box-sizing: border-box; }
}

/* Homepage final call to action: a compact rounded dark card. Text on the left,
   the two actions (members, then industry experts and partners) on the right.
   The background is a faint fine grid that fades out towards the left, with a
   soft green glow, so it reads as texture and not as a pattern. */
.fcta-section { padding-top: 40px; padding-bottom: 80px; }
.fcta {
    position: relative; overflow: hidden; isolation: isolate; max-width: 1180px; margin: 0 auto; padding: 48px 56px;
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 40px;
    border-radius: 28px; background-color: #0E1F1D;
}
.fcta::before {
    content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
    background-image:
        radial-gradient(ellipse 60% 120% at 100% 100%, rgba(124,179,66,0.20), rgba(124,179,66,0) 70%),
        radial-gradient(ellipse 45% 90% at 0% 0%, rgba(124,179,66,0.07), rgba(124,179,66,0) 70%),
        linear-gradient(rgba(255,255,255,0.045) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px);
    background-size: auto, auto, 44px 44px, 44px 44px;
    -webkit-mask-image: linear-gradient(90deg, rgba(0,0,0,0.25) 0%, #000 100%);
    mask-image: linear-gradient(90deg, rgba(0,0,0,0.25) 0%, #000 100%);
}
.fcta__body { max-width: 620px; }
.fcta__title { margin: 0 0 16px; color: rgba(255,255,255,0.92); font-size: var(--fs-h2, 42px); line-height: 1.2; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; }
.fcta__copy { margin: 0; color: rgba(255,255,255,0.7); font-size: var(--fs-lead, 17px); line-height: 1.6; }
.fcta__actions { display: flex; flex-direction: column; gap: 12px; min-width: 250px; }
.fcta__actions .btn { box-sizing: border-box; width: 100%; justify-content: center; text-align: center; }
.fcta__actions .btn-ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.45); }
.fcta__actions .btn-ghost:hover, .fcta__actions .btn-ghost:focus-visible { background: rgba(255,255,255,0.1); border-color: #fff; color: #fff; }
@media (max-width: 860px) {
    .fcta { grid-template-columns: 1fr; gap: 28px; padding: 36px 26px; border-radius: 22px; }
    .fcta__actions { min-width: 0; }
    .fcta-section { padding-top: 24px; padding-bottom: 56px; }
}

/* Final CTA text follows the same type scale as every other section heading and
   lead (the theme drops h2 to 26px and then 22px on smaller screens). */
@media (max-width: 991px) {
    .fcta__title { font-size: 26px !important; line-height: 1.25 !important; }
    .fcta__copy { font-size: 16px !important; }
}
@media (max-width: 575px) {
    .fcta__title { font-size: 22px !important; line-height: 1.3 !important; }
}

/* ==========================================================================
   About hub (page-about.php): sticky section menu on the left on desktop, a
   sticky scrolling tab bar on mobile, one panel per section.
   ========================================================================== */
.about-hub { --ah-ink: var(--color-text-main, #111); --ah-muted: var(--color-text-muted, #5A5A54); --ah-accent: var(--color-primary-on-light, #4A7326); --ah-line: rgba(17,43,32,0.10); --ah-dark: var(--color-dark-teal, #0A1312); --ah-lime: var(--color-lime, #7CB342); background: var(--color-background, #F4F0E6); padding-bottom: 80px; }
.ah-hero { padding: 64px 0 40px; }
.ah-hero__title { margin: 0 0 16px; font-size: clamp(34px, 4.6vw, 54px); line-height: 1.08; letter-spacing: -0.03em; color: var(--ah-ink); }
.ah-hero__lead { margin: 0; max-width: 720px; font-size: 19px; line-height: 1.6; color: var(--ah-muted); }

.ah-layout { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 48px; align-items: start; }

/* Section menu */
.ah-nav { position: sticky; top: calc(var(--header-height, 99px) + 12px); align-self: start; }
.ah-nav__label { margin: 0 0 12px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ah-muted); }
.ah-nav__list { list-style: none; margin: 0; padding: 0 0 0 0; border-left: 1px solid var(--ah-line); display: flex; flex-direction: column; }
.ah-nav__link { position: relative; display: flex; align-items: baseline; gap: 12px; padding: 9px 0 9px 18px; color: var(--ah-muted); font-size: 15px; font-weight: 500; text-decoration: none; transition: color 0.2s ease; }
.ah-nav__link::before { content: ""; position: absolute; left: -1px; top: 6px; bottom: 6px; width: 2px; border-radius: 2px; background: transparent; transition: background-color 0.2s ease; }
.ah-nav__num { font-variant-numeric: tabular-nums; font-size: 12px; letter-spacing: 0.04em; opacity: 0.7; }
.ah-nav__link:hover { color: var(--ah-ink); }
.ah-nav__link.is-current { color: var(--ah-ink); font-weight: 700; }
.ah-nav__link.is-current::before { background: var(--ah-lime); }
.ah-nav__link:focus-visible, .ah-nav__cta:focus-visible { outline: 2px solid var(--ah-accent); outline-offset: 2px; border-radius: 4px; }
.ah-nav__cta { display: inline-flex; align-items: center; gap: 8px; margin-top: 22px; font-size: 14px; font-weight: 700; color: var(--ah-accent); text-decoration: none; }
.ah-nav__cta:hover { text-decoration: underline; }

/* Panels */
.ah-content { display: grid; gap: 24px; min-width: 0; }
.ah-panel { scroll-margin-top: calc(var(--header-height, 99px) + 12px); padding: 44px 44px 48px; background: #fff; border: 1px solid var(--ah-line); border-radius: 24px; box-shadow: 0 8px 28px rgba(10,19,18,0.04); }
.ah-panel__kicker { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--ah-accent); font-variant-numeric: tabular-nums; }
.ah-panel__title { margin: 0 0 18px; font-size: clamp(26px, 2.8vw, 34px); line-height: 1.18; letter-spacing: -0.02em; color: var(--ah-ink); text-wrap: balance; }
.ah-lead { margin: 0 0 28px; max-width: 70ch; font-size: 17px; line-height: 1.65; color: var(--ah-muted); }
.ah-h3 { margin: 0 0 10px; font-size: 18px; line-height: 1.3; color: var(--ah-ink); }
.ah-text { margin: 0 0 14px; font-size: 16px; line-height: 1.6; color: var(--ah-muted); }
.ah-text--muted { font-size: 15px; margin-bottom: 0; }
.ah-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.ah-checks, .ah-questions, .ah-areas, .ah-formats { list-style: none; margin: 0; padding: 0; }
.ah-checks { display: grid; gap: 10px; margin: 0 0 16px; }
.ah-checks li { display: flex; gap: 10px; align-items: flex-start; font-size: 15.5px; line-height: 1.5; color: var(--ah-ink); }
.ah-checks svg { flex: 0 0 auto; margin-top: 2px; color: var(--ah-accent); }
.ah-callout { padding: 26px 26px 22px; border-radius: 18px; background: var(--ah-dark); color: rgba(255,255,255,0.78); }
.ah-callout .ah-h3 { color: #fff; }
.ah-callout .ah-text { color: rgba(255,255,255,0.7); }
.ah-questions { display: grid; gap: 12px; }
.ah-questions li { position: relative; padding-left: 20px; font-size: 15px; line-height: 1.5; color: rgba(255,255,255,0.88); }
.ah-questions li::before { content: ""; position: absolute; left: 0; top: 9px; width: 7px; height: 7px; border-radius: 2px; background: var(--ah-lime); }

.ah-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 32px; }
.ah-pair__item { padding: 24px 26px; border-radius: 18px; background: #F6F4EC; border: 1px solid var(--ah-line); }
.ah-pair__label { margin: 0 0 8px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ah-accent); }
.ah-pair__text { margin: 0; font-size: 17px; line-height: 1.55; color: var(--ah-ink); }
.ah-grid { display: grid; gap: 16px; }
.ah-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.ah-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
/* About hub, Industry insights: space between the cards and the line below them. */
.ah-grid + .ah-text { margin-top: 24px; }
.ah-card { padding: 20px 20px 22px; border: 1px solid var(--ah-line); border-radius: 16px; background: #fff; }
.ah-card h4 { margin: 0 0 8px; font-size: 16px; line-height: 1.3; color: var(--ah-ink); }
.ah-card p { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ah-muted); }

.ah-formats { border-top: 1px solid var(--ah-line); margin-bottom: 36px; }
.ah-formats li { display: grid; grid-template-columns: 210px minmax(0, 1fr) auto; gap: 8px 24px; align-items: baseline; padding: 18px 0; border-bottom: 1px solid var(--ah-line); }
.ah-formats__name { font-weight: 700; font-size: 16px; color: var(--ah-ink); }
.ah-formats__desc { font-size: 15px; line-height: 1.55; color: var(--ah-muted); }
.ah-formats__link { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; font-weight: 700; color: var(--ah-accent); text-decoration: none; white-space: nowrap; }
.ah-formats__link:hover { text-decoration: underline; }
.ah-formats__soon { font-size: 13px; font-weight: 600; color: var(--ah-muted); white-space: nowrap; }
.ah-areas { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; border-top: 1px solid var(--ah-line); }
.ah-areas li { display: flex; align-items: center; gap: 12px; padding: 13px 0; border-bottom: 1px solid var(--ah-line); font-size: 15.5px; color: var(--ah-ink); }
.ah-areas li::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; border-radius: 2px; background: var(--ah-lime); }

.ah-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 32px; margin: 0; border-top: 1px solid var(--ah-line); }
.ah-facts > div { padding: 16px 0; border-bottom: 1px solid var(--ah-line); }
.ah-facts dt { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ah-muted); }
.ah-facts dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ah-ink); }

.ah-action { display: flex; flex-direction: column; align-items: flex-start; gap: 0; padding: 26px; border: 1px solid var(--ah-line); border-radius: 18px; background: #fff; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.ah-action:hover { border-color: rgba(74,115,38,0.45); box-shadow: 0 10px 28px rgba(10,19,18,0.06); }
.ah-action h3 { margin: 0 0 8px; font-size: 19px; color: var(--ah-ink); }
.ah-action p { margin: 0 0 20px; font-size: 15px; line-height: 1.6; color: var(--ah-muted); flex: 1 1 auto; }
.ah-action__links { display: flex; flex-wrap: wrap; gap: 10px; }
.ah-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 11px 20px; border-radius: 999px; border: 1.5px solid rgba(17,43,32,0.28); background: transparent; color: var(--ah-ink); font-size: 14.5px; font-weight: 700; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, border-color 0.2s ease; font-family: inherit; }
.ah-btn:hover { background: rgba(17,43,32,0.06); border-color: var(--ah-ink); color: var(--ah-ink); }
.ah-btn--primary { background: var(--ah-lime); border-color: var(--ah-lime); color: var(--ah-dark); }
.ah-btn--primary:hover { background: var(--color-lime-hover, #6CA034); border-color: var(--color-lime-hover, #6CA034); color: var(--ah-dark); }
.ah-btn:focus-visible { outline: 3px solid var(--ah-accent); outline-offset: 2px; }

.ah-contact { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 36px; align-items: start; }
.ah-contact__label { margin: 0 0 4px; font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ah-muted); }
.ah-contact__value { margin: 0 0 22px; font-size: 16px; line-height: 1.5; color: var(--ah-ink); }
.ah-contact__value a { color: var(--ah-accent); font-weight: 600; }
.ah-contact__form { scroll-margin-top: calc(var(--header-height, 99px) + 24px); }
.ah-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ah-field { margin-bottom: 16px; }
.ah-field label { display: block; margin-bottom: 6px; font-size: 13.5px; font-weight: 600; color: var(--ah-ink); }
.ah-field input, .ah-field textarea { box-sizing: border-box; width: 100%; padding: 12px 14px; border: 1px solid rgba(17,43,32,0.22); border-radius: 12px; background: #fff; color: var(--ah-ink); font: inherit; font-size: 15.5px; transition: border-color 0.2s ease, box-shadow 0.2s ease; }
.ah-field textarea { resize: vertical; min-height: 130px; }
.ah-field input:focus, .ah-field textarea:focus { outline: none; border-color: var(--ah-accent); box-shadow: 0 0 0 3px rgba(124,179,66,0.25); }
.ah-btn--submit { padding: 13px 28px; font-size: 15.5px; }
.ah-notice { margin-bottom: 20px; padding: 14px 16px; border-radius: 12px; font-size: 14.5px; line-height: 1.5; }
.ah-notice--ok { background: rgba(124,179,66,0.15); border: 1px solid var(--ah-lime); color: #2e5110; }
.ah-notice--error { background: rgba(239,68,68,0.08); border: 1px solid #ef4444; color: #991b1b; }

/* Tablet: tighter menu column and panels */
@media (max-width: 1199px) {
    .ah-layout { grid-template-columns: 200px minmax(0, 1fr); gap: 32px; }
    .ah-panel { padding: 36px 32px 40px; }
    .ah-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ah-formats li { grid-template-columns: 170px minmax(0, 1fr); }
    .ah-formats__link, .ah-formats__soon { grid-column: 2; }
}

/* Mobile and small tablet: the menu becomes a sticky scrolling tab bar. */
@media (max-width: 991px) {
    .ah-hero { padding: 36px 0 20px; }
    .ah-hero__lead { font-size: 17px; }
    .ah-layout { grid-template-columns: minmax(0, 1fr); gap: 16px; }
    .ah-nav { position: sticky; top: calc(var(--header-height, 83px) - 10px); z-index: 20; margin: 0 -20px; padding: 0 20px; background: var(--color-background, #F4F0E6); border-bottom: 1px solid var(--ah-line); }
    .ah-nav__label, .ah-nav__cta { display: none; }
    .ah-nav__list { flex-direction: row; gap: 4px; border-left: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; scroll-snap-type: x proximity; }
    .ah-nav__list::-webkit-scrollbar { display: none; }
    .ah-nav__list li { flex: 0 0 auto; scroll-snap-align: center; }
    .ah-nav__link { padding: 14px 12px; white-space: nowrap; font-size: 14.5px; }
    .ah-nav__num { display: none; }
    .ah-nav__link::before { left: 12px; right: 12px; top: auto; bottom: -1px; width: auto; height: 2px; }
    .ah-panel { scroll-margin-top: calc(var(--header-height, 83px) + 48px); padding: 28px 22px 32px; border-radius: 20px; }
    .ah-split, .ah-pair, .ah-grid--2, .ah-contact, .ah-areas, .ah-facts { grid-template-columns: minmax(0, 1fr); }
    .ah-contact { gap: 24px; }
    .ah-contact__aside { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; }
}
@media (max-width: 600px) {
    .ah-grid--4 { grid-template-columns: minmax(0, 1fr); }
    .ah-form-row { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .ah-formats li { grid-template-columns: minmax(0, 1fr); gap: 4px; }
    .ah-formats__link, .ah-formats__soon { grid-column: 1; margin-top: 4px; }
    .ah-contact__aside { grid-template-columns: minmax(0, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .ah-nav__list { scroll-behavior: auto; } }

/* Keep the hub at a comfortable reading width on large screens. */
.about-hub .container { max-width: 1240px; margin-left: auto; margin-right: auto; }

/* About hub: founders */
.ah-founders { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; margin-bottom: 22px; }
.ah-founder { overflow: hidden; border: 1px solid var(--ah-line); border-radius: 18px; background: #fff; }
.ah-founder__photo { aspect-ratio: 4 / 4.4; overflow: hidden; background: #d9dadb; }
.ah-founder__photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 22%; transition: transform 0.4s ease; }
.ah-founder:hover .ah-founder__photo img { transform: scale(1.03); }
.ah-founder__body { padding: 18px 20px 22px; }
.ah-founder__name { margin: 0 0 2px; font-size: 18px; line-height: 1.3; color: var(--ah-ink); }
.ah-founder__role { margin: 0 0 10px; font-size: 13px; font-weight: 700; letter-spacing: 0.04em; color: var(--ah-accent); }
.ah-founder__bio { margin: 0; font-size: 14.5px; line-height: 1.55; color: var(--ah-muted); }
.ah-founders__note { margin: 0; font-size: 15px; }
.ah-founders__note a { color: var(--ah-accent); font-weight: 600; }
@media (max-width: 1199px) { .ah-founders { gap: 14px; } .ah-founder__body { padding: 16px 16px 18px; } }
@media (max-width: 767px) {
    .ah-founders { grid-template-columns: minmax(0, 1fr); }
    .ah-founder { display: grid; grid-template-columns: 112px minmax(0, 1fr); }
    .ah-founder__photo { aspect-ratio: auto; height: 100%; min-height: 150px; }
    .ah-founder__body { padding: 14px 16px 16px; }
}

/* Founder cards: years of experience as a clear figure under the role. */
.ah-founder__years { display: flex; align-items: baseline; gap: 8px; margin: 0 0 12px; padding: 10px 0; border-top: 1px solid var(--ah-line); border-bottom: 1px solid var(--ah-line); }
.ah-founder__years strong { font-size: 32px; line-height: 1; font-weight: 800; letter-spacing: -0.03em; color: var(--ah-ink); font-variant-numeric: tabular-nums; }
.ah-founder__years span { font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--ah-muted); }

/* Contact: one column, with the email beside the send button. */
.ah-contact { grid-template-columns: minmax(0, 1fr); max-width: 720px; }
.ah-form-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 24px; }
.ah-form-alt { margin: 0; font-size: 15px; color: var(--ah-muted); }
.ah-form-alt a { color: var(--ah-accent); font-weight: 700; text-decoration: none; border-bottom: 1px solid rgba(74,115,38,0.4); }
.ah-form-alt a:hover { border-bottom-color: var(--ah-accent); }

/* Contact: the form uses the full width of the section; name, surname and email share the first row. */
.ah-contact { max-width: none; }
.ah-form-row { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 767px) { .ah-form-row { grid-template-columns: minmax(0, 1fr); gap: 0; } }

/* ==========================================================================
   Green call-to-action: one style, one size, with a cursor-tracking glow.
   Every lime/green CTA variant (.btn-primary, .btn-lime, .btn-join,
   .btn-green, .btn-community, the homepage podcast / knowledge / events
   buttons, About form buttons and editor buttons) shares this block.
   assets/js/cta-glow.js writes --mx / --my (cursor position inside the
   button, in px) and --glow (0 to 1). Without JS the glow simply stays off.
   The footer "Explore Courses" ghost variant is deliberately excluded.
   ========================================================================== */
:is(.btn-primary, .btn-lime, .btn-join, .btn-green, .btn-community, .podcast__cta, .kt__btn--primary, .ev__cta, .ah-btn--primary, .wp-block-button__link):is(.btn, .kt__btn, .ev__cta, .ah-btn, .podcast__cta, .wp-block-button__link):not(.footer-join-actions *) {
    --mx: 50%;
    --my: 50%;
    --glow: 0;
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    box-sizing: border-box;
    min-height: 52px;
    padding: 14px 30px;
    border: 1px solid transparent;
    border-radius: 999px;
    background: var(--color-lime);
    color: var(--color-dark-teal);
    font-family: inherit;
    font-size: 16px;
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 0 0 0 rgba(124, 179, 66, 0);
    transition: background-color 0.3s ease, box-shadow 0.5s ease, transform 0.5s cubic-bezier(0.22, 1.2, 0.36, 1), color 0.3s ease;
}

/* Glow: a wide, soft spotlight that trails the cursor (position is eased in JS),
   with a warm core and a faint cool halo so it reads as light, not a white blob. */
:is(.btn-primary, .btn-lime, .btn-join, .btn-green, .btn-community, .podcast__cta, .kt__btn--primary, .ev__cta, .ah-btn--primary, .wp-block-button__link):is(.btn, .kt__btn, .ev__cta, .ah-btn, .podcast__cta, .wp-block-button__link):not(.footer-join-actions *)::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    pointer-events: none;
    background:
        radial-gradient(circle 70px at var(--mx) var(--my), rgba(255, 255, 255, 0.75), rgba(255, 255, 255, 0) 100%),
        radial-gradient(circle 190px at var(--mx) var(--my), rgba(214, 255, 150, 0.55), rgba(214, 255, 150, 0) 100%);
    opacity: var(--glow);
    transition: opacity 0.45s ease;
}

/* Sheen: a single soft diagonal sweep across the button on hover. */
:is(.btn-primary, .btn-lime, .btn-join, .btn-green, .btn-community, .podcast__cta, .kt__btn--primary, .ev__cta, .ah-btn--primary, .wp-block-button__link):is(.btn, .kt__btn, .ev__cta, .ah-btn, .podcast__cta, .wp-block-button__link):not(.footer-join-actions *)::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    width: 55%;
    z-index: -1;
    pointer-events: none;
    background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.35) 50%, rgba(255, 255, 255, 0) 100%);
    transform: translateX(-130%) skewX(-18deg);
    opacity: 0;
}
:is(.btn-primary, .btn-lime, .btn-join, .btn-green, .btn-community, .podcast__cta, .kt__btn--primary, .ev__cta, .ah-btn--primary, .wp-block-button__link):is(.btn, .kt__btn, .ev__cta, .ah-btn, .podcast__cta, .wp-block-button__link):not(.footer-join-actions *):is(:hover, :focus-visible)::after {
    opacity: 1;
    transform: translateX(260%) skewX(-18deg);
    transition: transform 0.9s cubic-bezier(0.22, 0.8, 0.3, 1), opacity 0.2s ease;
}

:is(.btn-primary, .btn-lime, .btn-join, .btn-green, .btn-community, .podcast__cta, .kt__btn--primary, .ev__cta, .ah-btn--primary, .wp-block-button__link):is(.btn, .kt__btn, .ev__cta, .ah-btn, .podcast__cta, .wp-block-button__link):not(.footer-join-actions *):is(:hover, :focus-visible) {
    background: var(--color-lime-hover);
    color: var(--color-dark-teal);
    border-color: transparent;
    transform: translate3d(var(--tx, 0px), calc(var(--ty, 0px) - 3px), 0) scale(1.02);
    box-shadow: 0 14px 30px -10px rgba(108, 160, 52, 0.7), 0 0 0 4px rgba(124, 179, 66, 0.14), 0 0 34px rgba(160, 220, 90, 0.4);
}

:is(.btn-primary, .btn-lime, .btn-join, .btn-green, .btn-community, .podcast__cta, .kt__btn--primary, .ev__cta, .ah-btn--primary, .wp-block-button__link):is(.btn, .kt__btn, .ev__cta, .ah-btn, .podcast__cta, .wp-block-button__link):not(.footer-join-actions *):active {
    transform: translate3d(0, 0, 0) scale(0.98);
    transition-duration: 0.12s;
}

:is(.btn-primary, .btn-lime, .btn-join, .btn-green, .btn-community, .podcast__cta, .kt__btn--primary, .ev__cta, .ah-btn--primary, .wp-block-button__link):is(.btn, .kt__btn, .ev__cta, .ah-btn, .podcast__cta, .wp-block-button__link):not(.footer-join-actions *):focus-visible {
    outline: 3px solid var(--color-dark-teal);
    outline-offset: 3px;
}

/* Layout-only variants keep their width but share the same size and type. */
.ev__cta, .webinar-aside-card__cta, .contact-form-submit, .join-submit, .ah-btn--submit { width: 100%; }
.gi-card__cta { align-self: flex-start; }
@media (max-width: 767px) {
    .gi-card__cta { width: 100%; align-self: stretch; }
}

@media (prefers-reduced-motion: reduce) {
    :is(.btn-primary, .btn-lime, .btn-join, .btn-green, .btn-community, .podcast__cta, .kt__btn--primary, .ev__cta, .ah-btn--primary, .wp-block-button__link):is(.btn, .kt__btn, .ev__cta, .ah-btn, .podcast__cta, .wp-block-button__link):not(.footer-join-actions *) {
        transition: none;
    }
    :is(.btn-primary, .btn-lime, .btn-join, .btn-green, .btn-community, .podcast__cta, .kt__btn--primary, .ev__cta, .ah-btn--primary, .wp-block-button__link):is(.btn, .kt__btn, .ev__cta, .ah-btn, .podcast__cta, .wp-block-button__link):not(.footer-join-actions *):is(:hover, :focus-visible) {
        transform: none;
    }
    :is(.btn-primary, .btn-lime, .btn-join, .btn-green, .btn-community, .podcast__cta, .kt__btn--primary, .ev__cta, .ah-btn--primary, .wp-block-button__link):is(.btn, .kt__btn, .ev__cta, .ah-btn, .podcast__cta, .wp-block-button__link):not(.footer-join-actions *)::after { display: none; }
}

/* ==========================================================================
   Footer, dark (2026-10-03). Logo row, two scrolling tickers (formats, focus
   topics), link columns with the newest podcast, webinar and guide, a trust
   row, the legal text and a bottom bar. Colours and type are the site's own:
   the dark-teal of the hero, the brand green, the dark pills of the hero
   badges and the white-on-teal text levels of the homepage's final CTA. See
   docs/copy-changes/2026-10-03-footer-redesign/.
   ========================================================================== */
.site-footer--dark {
    --sf-line: rgba(255, 255, 255, 0.12);
    --sf-text: rgba(255, 255, 255, 0.7);
    --sf-strong: rgba(255, 255, 255, 0.92);
    --sf-pill: rgba(255, 255, 255, 0.08);
    background: var(--color-dark-teal);
    color: var(--sf-text);
    font-family: var(--font-family-main);
    padding: 64px 0 28px;
    border-top: 0;
}

.site-footer--dark a:not(.btn) { color: inherit; text-decoration: none; }

/* Top row */
.sf-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding-bottom: 28px;
    border-bottom: 1px solid var(--sf-line);
}
.sf-logo img { display: block; width: auto; height: 34px; }
/* Same treatment as the hero tagline: small, bold, tracked, brand green. */
.sf-tagline {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    color: var(--color-lime);
    font-size: 13px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.sf-tagline__dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: var(--color-lime);
    box-shadow: 0 0 0 4px rgba(124, 179, 66, 0.2);
}

/* Tickers */
.sf-ticker {
    display: grid;
    gap: 12px;
    margin: 36px 0 48px;
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
            mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.sf-ticker__row {
    display: flex;
    width: max-content;
    animation: sf-ticker 60s linear infinite;
}
.sf-ticker__row--reverse { animation-direction: reverse; animation-duration: 75s; }
.sf-ticker:hover .sf-ticker__row,
.sf-ticker:focus-within .sf-ticker__row { animation-play-state: paused; }
.sf-ticker__track {
    display: flex;
    gap: 12px;
    margin: 0;
    padding: 0 12px 0 0;
    list-style: none;
}
/* The hero's dark badge pill. */
.sf-pill {
    display: inline-flex;
    align-items: center;
    height: 44px;
    padding: 0 22px;
    border: 1px solid var(--sf-line);
    border-radius: 999px;
    background: var(--sf-pill);
    color: rgba(255, 255, 255, 0.9);
    font-size: 15px;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.site-footer--dark a.sf-pill:hover,
.site-footer--dark a.sf-pill:focus-visible {
    background: var(--color-lime);
    border-color: var(--color-lime);
    color: var(--color-dark-teal);
}
/* The hero's lime pill, for the topics. */
.sf-pill--topic {
    background: rgba(124, 179, 66, 0.1);
    border-color: rgba(124, 179, 66, 0.3);
    color: var(--color-lime);
}
@keyframes sf-ticker {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
    .sf-ticker { -webkit-mask-image: none; mask-image: none; }
    .sf-ticker__row { animation: none; width: auto; flex-wrap: wrap; }
    .sf-ticker__track[aria-hidden="true"], .sf-ticker__track li[aria-hidden="true"] { display: none; }
    .sf-ticker__track { flex-wrap: wrap; }
}

/* Columns */
.sf-grid {
    display: grid;
    grid-template-columns: 1.3fr 0.9fr 0.9fr 1.6fr;
    gap: 40px;
}
.site-footer--dark .sf-heading {
    margin: 0 0 22px;
    color: #fff;
    font-size: 16px;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: -0.01em;
}
.sf-text { margin: 0; max-width: 300px; font-size: 15px; line-height: 1.6; }
.sf-links { margin: 0; padding: 0; list-style: none; display: grid; gap: 12px; }
.sf-links a { font-size: 15px; transition: color 0.2s ease; }
.site-footer--dark .sf-links a:hover,
.site-footer--dark .sf-links a:focus-visible { color: var(--color-lime); }

/* Latest podcast, webinar, guide */
.sf-latest { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; }
.sf-latest__item { display: flex; gap: 14px; align-items: flex-start; }
.sf-latest__thumb {
    flex: 0 0 96px;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    border-radius: 8px;
    background: var(--sf-pill);
}
.sf-latest__thumb img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; }
.sf-latest__item:hover .sf-latest__thumb img { transform: scale(1.05); }
.sf-latest__body { display: grid; gap: 3px; min-width: 0; }
.sf-latest__kind {
    color: var(--color-lime);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.sf-latest__title {
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    line-height: 1.4;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}
.sf-latest__item:hover .sf-latest__title,
.sf-latest__item:focus-visible .sf-latest__title { color: var(--color-lime); }
.sf-latest__meta { font-size: 12px; }

/* Trust row */
.sf-trust {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin-top: 48px;
    padding-top: 32px;
    border-top: 1px solid var(--sf-line);
}
.sf-badges { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.sf-badge {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 4px 22px;
    border-left: 1px solid var(--sf-line);
}
.sf-badge:first-child { padding-left: 0; border-left: 0; }
.sf-badge__link { display: flex; align-items: center; gap: 12px; }
.sf-badge__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(124, 179, 66, 0.12);
    color: var(--color-lime);
    transition: background-color 0.2s ease, color 0.2s ease;
}
.sf-badge strong { display: block; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.3; }
.sf-badge small { display: block; font-size: 13px; line-height: 1.4; }
.sf-badge__link:hover .sf-badge__icon,
.sf-badge__link:focus-visible .sf-badge__icon { background: var(--color-lime); color: var(--color-dark-teal); }
.sf-badge__link:hover strong,
.sf-badge__link:focus-visible strong { color: var(--color-lime); }
.sf-cta { white-space: nowrap; }

/* Legal and bottom bar */
.sf-legal {
    margin-top: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--sf-line);
    font-size: 13px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.5);
}
.sf-legal p { margin: 0 0 6px; }
.sf-bottom {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}
.sf-copy { margin: 0; font-size: 13px; }
.sf-bottom__links { margin-left: 16px; }
.sf-bottom__links a { margin-right: 16px; text-decoration: underline !important; text-underline-offset: 3px; }
.site-footer--dark .sf-bottom__links a:hover { color: var(--color-lime); }
.site-footer--dark .footer-social { margin: 0; gap: 8px; }
.site-footer--dark .footer-social a { border-color: var(--sf-line); color: var(--sf-text); width: 40px; height: 40px; }
.site-footer--dark .footer-social a:hover { background: var(--color-lime); border-color: var(--color-lime) !important; color: var(--color-dark-teal) !important; }
.site-footer--dark a:focus-visible { outline: 2px solid var(--color-lime); outline-offset: 3px; border-radius: 6px; }

@media (max-width: 1199px) {
    .sf-trust { flex-direction: column; align-items: flex-start; }
}
@media (max-width: 991px) {
    .sf-grid { grid-template-columns: 1fr 1fr; }
    .sf-col--about, .sf-col--latest { grid-column: 1 / -1; }
    .sf-text { max-width: none; }
    .sf-badges { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
    .sf-badge { padding: 0; border-left: 0; }
}
@media (max-width: 575px) {
    .site-footer--dark { padding-top: 48px; }
    .sf-top { flex-direction: column; align-items: flex-start; }
    .sf-logo img { height: 28px; }
    .sf-pill { height: 38px; padding: 0 16px; font-size: 14px; }
    .sf-badges { grid-template-columns: 1fr; }
    .sf-bottom { flex-direction: column-reverse; align-items: flex-start; }
    .sf-bottom__links { display: block; margin: 8px 0 0; }
}