/*
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;
}


/* Course topics: 7 cards, so the last row is centred instead of leaving an empty cell.
   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 -> row 2 holds 3 cards, offset by half a card to centre it */
.topics-grid > .topic-card:nth-child(5) { grid-column: 2 / span 2; }

@media (max-width: 1199px) {
    /* 3 per row -> the 7th card sits alone and is centred */
    .topics-grid { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .topics-grid > .topic-card:nth-child(5) { grid-column: span 2; }
    .topics-grid > .topic-card:nth-child(7) { grid-column: 3 / span 2; }
}

@media (max-width: 991px) {
    /* 2 per row -> the 7th card is centred across the row */
    .topics-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
        gap: 20px;
    }
    .topics-grid > .topic-card:nth-child(5) { grid-column: span 2; }
    .topics-grid > .topic-card:nth-child(7) { grid-column: 2 / 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) { 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: 1600 / 955;
    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;
    }
}

/* =========================================================================
   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;
}

.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; }
}