:root {
    --primary-color: #082340;
    --secondary-color: #b29750;

    /* Brand-derived shades */
    --primary-dark: #061a30;
    --primary-darker: #04111f;
    --primary-tint: #eef3f8;
    --primary-tint-2: #dce7f1;
    --primary-soft: #3d5d7c;

    /* Neutrals */
    --ink: #12161c;
    --body-text: #454e5b;
    --muted: #6d7683;
    --light-bg: #f6f7fa;
    --line: #e8eaef;

    /* Dark surfaces */
    --dark-bg: #082340;
    --dark-bg-2: #0d1b2a;
    --dark-card: rgba(255, 255, 255, .045);
    --dark-border: rgba(255, 255, 255, .09);
    --dark-text: #aab3bf;

    /* Type */
    --font-head: 'Plus Jakarta Sans', system-ui, sans-serif;
    --font-body: 'Inter', system-ui, sans-serif;

    /* Shape & elevation */
    --radius-lg: 22px;
    --radius-md: 16px;
    --radius-sm: 12px;

    --shadow-sm: 0 6px 18px rgba(8, 35, 64, .07);
    --shadow-md: 0 14px 34px rgba(8, 35, 64, .10);
    --shadow-lg: 0 26px 64px rgba(178, 151, 80, .16);

    /* Brand shadow */
    --shadow-primary: 0 14px 30px rgba(8, 35, 64, .28);
}


/* =========================
   2. BASE & TYPOGRAPHY
========================= */
html {
    scroll-behavior: smooth;
    scroll-padding-top: 92px;
}

body {
    font-family: var(--font-body);
    color: var(--body-text);
    background: var(--secondary-color);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--font-head);
    font-weight: 800;
    color: var(--ink);
    letter-spacing: -.01em;
}

p {
    line-height: 1.75;
}

a {
    transition: color .2s ease, background-color .2s ease,
        border-color .2s ease, transform .2s ease;
}

::selection {
    background: var(--primary-color);
    color: var(--secondary-color);
}

:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
    border-radius: 4px;
}

.navbar{
    padding: 0px;
}

/* =========================
   3. SHARED COMPONENTS
========================= */
.section {
    padding: 64px 0;
}


/* Red eyebrow label (hero) */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    font-family: var(--font-head);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--primary-dark);
    margin: 0 0 10px;
}

.eyebrow::before {
    content: "";
    width: 26px;
    height: 2px;
    background: var(--primary-color);
}

.eyebrow-on-dark {
    color: var(--primary-soft);
}

/* Section heading block */
.section-head {
    max-width: 760px;
    margin: 0 auto 48px;
}

.section-title {
    font-size: clamp(1.55rem, 1.1rem + 2.2vw, 2.5rem);
    line-height: 1.2;
    margin: 0 0 14px;
}

.section-lead {
    font-size: 1.02rem;
    color: var(--muted);
    margin: 0;
}

/* Buttons */
.btn {
    font-family: var(--font-head);
    font-weight: 700;
    border-radius: 999px;
    transition: all .25s ease;
}

.btn-sm {
    padding: .5rem 1.05rem;
    font-size: .86rem;
}

.btn-lg {
    padding: .85rem 1.9rem;
    font-size: 1rem;
}

.btn-brand {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: var(--secondary-color);
    box-shadow: 0 10px 24px rgba(8, 35, 64, .22);
}

.btn-brand:hover,
.btn-brand:focus-visible {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--secondary-color);
    transform: translateY(-2px);
    box-shadow: var(--shadow-red);
}

.btn-outline-brand {
    background: transparent;
    border: 1.5px solid var(--primary-color);
    color: var(--primary-dark);
}

.btn-outline-brand:hover,
.btn-outline-brand:focus-visible {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--secondary-color);
    transform: translateY(-2px);
}

.btn-ghost-light {
    background: transparent;
    border: 1.5px solid rgba(255, 255, 255, .45);
    color: var(--secondary-color);
}

.btn-ghost-light:hover,
.btn-ghost-light:focus-visible {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--ink);
    transform: translateY(-2px);
}

.btn-light-brand {
    background: var(--secondary-color);
    border: 1px solid var(--secondary-color);
    color: var(--primary-darker);
}

.btn-light-brand:hover,
.btn-light-brand:focus-visible {
    background: var(--ink);
    border-color: var(--ink);
    color: var(--secondary-color);
    transform: translateY(-2px);
}


/* =========================
   4A. TOP ANNOUNCEMENT BAR — SHELL & ROTATING MESSAGES
   (the red bar itself + the rotating announcement slides)
========================= */
.topbar {
    background: var(--primary-color);
    /* color: var(--secondary-color); */
    color: #ffc836;
}

/* Shared wrapper for both rows (messages + utility) */
.topbar-inner {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 6px 0;
    text-align: center;
}

.topbar-message {
    position: relative;
    min-height: 2.9em;
    /* allows 2 wrapped lines on small screens */
    font-size: .8rem;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    width: 100%;
    padding-right: 20px;
}

.topbar-marquee {
    overflow: hidden;
    width: 100%;
}

.topbar-marquee-content {
    display: inline-flex;
    align-items: center;
    gap: 18px;
    white-space: nowrap;
    animation: topbarMarquee 100s linear infinite;
    will-change: transform;
}

.topbar-marquee-content span {
    flex-shrink: 0;
}

@keyframes topbarMarquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}



/* =========================
   4B. TOPBAR UTILITY LINKS
   (Verify Credential / Member Login row + separators)
========================= */
.topbar-utility {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    gap: .15rem .6rem;
    font-size: .74rem;
    font-weight: 600;
    letter-spacing: .02em;
}

.topbar-utility a {
    color: rgba(255, 255, 255, .92);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: .3rem;
}

.topbar-utility a:hover {
    color: var(--secondary-color);
}

.topbar-sep {
    display: inline-block;
    width: 1px;
    height: 12px;
    background: rgba(255, 255, 255, .45);
}


/* =========================
   4C. TOPBAR DROPDOWN MENUS
   (Certifications / Membership / Partners / Resources quick menus)
========================= */
/* Raise the bar above the sticky header (z-index 1030)
   so the dropdowns open OVER it instead of underneath */
.topbar {
    position: relative;
    z-index: 1040;
}

.topbar-menus {
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem .6rem;
    /* same rhythm as the utility links */
}

.topbar .topbar-link {
    white-space: nowrap;
}

/* Open state of a topbar dropdown toggle */
.topbar .topbar-link.show {
    color: var(--secondary-color);
    text-decoration: underline;
}

/* Menus inherit the topbar's centered text — reset so items read normally */
.topbar .dropdown-menu {
    text-align: left;
}

/* White focus ring — the default red one is invisible on the red bar
   (applies across the whole topbar, announcement links included) */
.topbar :focus-visible {
    outline-color: var(--secondary-color);
}


/* =========================
   5. HEADER NAVIGATION
========================= */
.site-header {
    position: sticky;
    top: 0;
    z-index: 1030;
    background: rgba(255, 255, 255, .94);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid var(--line);
    transition: box-shadow .3s ease;
}



.navbar {
    --bs-navbar-padding-y: .55rem;
}



.navbar-toggler {
    border: 1px solid var(--line);
    border-radius: 12px;
    padding: .45rem .6rem;
}

.navbar-toggler:focus {
    box-shadow: 0 0 0 3px rgba(8, 35, 64, .25);
}


/* Nav links */
.navbar-nav .nav-link {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .9rem;
    color: var(--ink);
    padding: .55rem .7rem;
    border-radius: 10px;
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus {
    color: var(--primary-dark);
    background: var(--primary-tint);
}

/* Dropdowns */
.dropdown-menu {
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    padding: .5rem;
    min-width: 230px;
    --bs-dropdown-link-color: var(--ink);
}

.dropdown-item {
    border-radius: 10px;
    font-size: .9rem;
    font-weight: 500;
    padding: .5rem .75rem;
}

.colors{
    color: #fff !important;
    
}
.colors:hover{
    background: #ffffff !important;
    color: var(--primary-dark) !important;
}

.colors_dropdown{
    background: var(--primary-color);
}

.dropdown-item:hover,
.dropdown-item:focus {
    background: var(--primary-tint);
    color: var(--primary-dark);
}


/* =========================
   TOPBAR QUICK MENUS
========================= */
.topbar {
    position: relative;
    z-index: 1040;
    /* lets the topbar dropdowns open OVER the sticky header (z-index 1030) */
}

.topbar-menus {
    flex-wrap: wrap;
    align-items: center;
    gap: .15rem .6rem;
    /* same rhythm as the existing utility links */
}

.topbar .topbar-link {
    white-space: nowrap;
}

/* Open state of a topbar dropdown toggle */
.topbar .topbar-link.show {
    color: var(--secondary-color);
    text-decoration: underline;
}

/* Menus inherit the topbar's centered text — reset so items read normally */
.topbar .dropdown-menu {
    text-align: left;
}

/* The red focus ring is invisible on the red bar — use white there */
.topbar :focus-visible {
    outline-color: var(--secondary-color);
}



/* =========================
   6. HERO SECTION
========================= */
.hero {
    position: relative;
background: linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)), url('/uploads/heor_img.jpeg');
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
    color: var(--secondary-color);
    overflow: hidden;
    padding: 72px 0 96px;
}

.hero::before {
    content: "";
    position: absolute;
    top: -220px;
    right: -160px;
    width: 640px;
    height: 640px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .30), transparent 65%);
}

.hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(ellipse at 70% 25%, rgba(0, 0, 0, .9), transparent 70%);
    mask-image: radial-gradient(ellipse at 70% 25%, rgba(0, 0, 0, .9), transparent 70%);
    z-index: -1;
}

.hero .container-xl {
    z-index: 2;
}

.hero-title {
    color: var(--secondary-color);
    font-size: clamp(2rem, 1.35rem + 3.4vw, 3.6rem);
    line-height: 1.12;
    letter-spacing: -.02em;
    margin: 14px 0 18px;
}

.hero-lead {
    color: #c3cad4;
    font-size: 1.05rem;
    max-width: 600px;
    margin-bottom: 28px;
}

.hero-actions {
    margin-bottom: 34px;
}

/* Hero search */
.hero-search {
    max-width: 560px;
}

.hero-search-field {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: rgba(255, 255, 255, .06);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    padding: .35rem .4rem .35rem 1.1rem;
    transition: border-color .25s ease, background .25s ease;
}

.hero-search-field:focus-within {
    border-color: var(--primary-color);
    background: rgba(255, 255, 255, .09);
}

.hero-search-field .bi-search {
    color: var(--primary-soft);
    flex: 0 0 auto;
}

.hero-search-field input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--secondary-color);
    font-size: .95rem;
    padding: .45rem 0;
}

.hero-search-field input::placeholder {
    color: #8d97a5;
}

.hero-search-btn {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border: 0;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--secondary-color);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .25s ease;
}

.hero-search-btn:hover {
    background: var(--primary-dark);
    transform: scale(1.06);
}

.hero-search-hint {
    margin: .6rem 0 0;
    font-size: .78rem;
    color: #8d97a5;
}

/* Hero entrance animation (pure CSS, JS-independent) */
@keyframes fadeUp {
    from {
        opacity: 0;
        transform: translateY(24px);
    }

    to {
        opacity: 1;
        transform: none;
    }
}

.hero-anim {
    animation: fadeUp .8s cubic-bezier(.22, .61, .36, 1) both;
}



.cert-line {
    height: 10px;
    border-radius: 999px;
    background: #eef0f4;
    margin-bottom: 12px;
}

.cert-line.w-80 {
    width: 82%;
}

.cert-line.w-70 {
    width: 70%;
}

.cert-line.w-60 {
    width: 58%;
}



@keyframes floatY {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}




/* =========================
   7. FOUR WAYS TO GROW SECTION
========================= */
.ways {
    background: var(--light-bg);
}

.grow-card {
    position: relative;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.9rem 1.6rem;
    overflow: hidden;
    transition: all .3s ease;
}

.grow-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-darker));
    transition: width .35s ease;
}

.grow-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.grow-card:hover::after {
    width: 100%;
}

.grow-icon {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.55rem;
    margin-bottom: 1.1rem;
    transition: all .3s ease;
}

.grow-card:hover .grow-icon {
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    box-shadow: 0 12px 24px rgba(8, 35, 64, .3);
}

.grow-card h3 {
    font-size: 1.08rem;
    margin: 0 0 .55rem;
}

.grow-card p {
    margin: 0;
    font-size: .93rem;
    line-height: 1.7;
}


/* =========================
   8. PROFESSIONAL CERTIFICATION SECTION
========================= */
.cert-section {
    background: var(--secondary-color);
}

.cert-section p {
    margin-bottom: 1.05rem;
}

.cert-feature {
    position: relative;
    background: var(--primary-tint);
    border: 1px solid var(--primary-tint-2);
    border-radius: var(--radius-lg);
    padding: 34px 28px;
    overflow: hidden;
}

.cert-feature .watermark {
    position: absolute;
    right: -30px;
    bottom: -34px;
    font-size: 170px;
    line-height: 1;
    color: rgba(8, 35, 64, .08);
    pointer-events: none;
}

.cert-feature-row {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--secondary-color);
    border: 1px solid var(--primary-tint-2);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    box-shadow: var(--shadow-sm);
}

.cert-feature-row+.cert-feature-row {
    margin-top: .9rem;
}

.cert-feature-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.cert-feature-row>span:last-child {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .95rem;
}


/* =========================
   9. POPULAR PROFESSIONAL AREAS SECTION
========================= */
.areas {
    background: var(--light-bg);
}

.area-tile {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    text-decoration: none;
    transition: all .25s ease;
}

.area-tile:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.area-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all .25s ease;
}

.area-tile:hover .area-icon {
    background: var(--primary-color);
    color: var(--secondary-color);
}

.area-tile>span:last-child {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .92rem;
    line-height: 1.35;
}


/* =========================
   10. CORPORATE LEARNING SOLUTIONS SECTION
========================= */
.corporate {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.corporate::before {
    content: "";
    position: absolute;
    left: -180px;
    top: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .22), transparent 65%);
}

.corporate .container-xl {
    z-index: 2;
}

.corporate .section-title {
    color: var(--secondary-color);
}

.corporate p {
    color: #b8c0cc;
    margin-bottom: 1.05rem;
}

.delivery-card {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-lg);
    padding: 30px 26px;
    backdrop-filter: blur(6px);
}

.delivery-label {
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #8d97a5;
    margin: 0 0 16px;
}

.delivery-item {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 1rem;
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    background: rgba(255, 255, 255, .03);
    transition: all .25s ease;
}

.delivery-item+.delivery-item {
    margin-top: .8rem;
}

.delivery-item:hover {
    border-color: rgba(178, 151, 80, .5);
    transform: translateX(6px);
}

.delivery-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: rgba(178, 151, 80, 1);
    color: var(--primary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.delivery-item>span:last-child {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
}


/* =========================
   11. MEMBERSHIP SECTION
========================= */
.membership {
    background: var(--secondary-color);
}

.membership p {
    margin-bottom: 1.05rem;
}

.member-card {
    position: relative;
    max-width: 440px;
    margin: 0 auto;
    background: linear-gradient(155deg, #1c222d, var(--dark-bg) 70%);
    border: 1px solid var(--dark-border);
    border-radius: 24px;
    padding: 30px;
    padding-bottom: 60px;
    color: var(--secondary-color);
    box-shadow: var(--shadow-lg);
}

.member-chip {
    display: inline-flex;
    align-items: center;
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--primary-color);
    background: rgba(178, 151, 80, 1);
    border: 1px solid rgba(178, 151, 80, .3);
    border-radius: 999px;
    padding: .4rem .8rem;
    margin-bottom: 18px;
}

.member-seal-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 20px;
}

.member-seal {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 10px 22px rgba(178, 151, 80, .35);
}

.member-name {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.15rem;
    margin: 0;
}

.member-sub {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8d97a5;
    margin: 2px 0 0;
}

.member-card .cert-line {
    background: rgba(255, 255, 255, .12);
}

.member-float {
    position: absolute;
    right: -8px;
    bottom: -18px;
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--primary-color);
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .86rem;
    border-radius: 999px;
    padding: .7rem 1.15rem;
    text-decoration: none;
    box-shadow: var(--shadow-red);
}

.member-float:hover {
    background: var(--primary-dark);
    color: var(--secondary-color);
}


/* =========================
   12. LEARNER JOURNEY PROCESS SECTION
========================= */
.journey {
    background: var(--light-bg);
}

.step-card {
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.4rem 1.5rem;
    transition: all .3s ease;
}

.step-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.step-num {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(8, 35, 64, .25);
}

.step-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.step-card p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.65;
    color: var(--body-text);
}


/* =========================
   13. FINAL CALL TO ACTION SECTION
========================= */
.cta {
    position: relative;
    background: linear-gradient(130deg,
            var(--primary-color) 0%,
            var(--primary-dark) 55%,
            var(--primary-darker) 100%);
    color: var(--secondary-color);
    overflow: hidden;
    padding: 72px 0;
}

.cta::before,
.cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .18);
    pointer-events: none;
}

.cta::before {
    width: 320px;
    height: 320px;
    top: -130px;
    left: -100px;
}

.cta::after {
    width: 420px;
    height: 420px;
    bottom: -210px;
    right: -140px;
    border-color: rgba(255, 255, 255, .12);
}

.cta .container-xl {
    z-index: 2;
}

.cta h2 {
    color: var(--secondary-color);
    font-size: clamp(1.5rem, 1.1rem + 2.4vw, 2.5rem);
    line-height: 1.25;
    max-width: 820px;
    margin: 0 auto 26px;
}


/* =========================
   14. FOOTER
========================= */
.footer {
    background: var(--dark-bg);
    color: #9aa3af;
    padding-bottom: 28px;
}

/* Footer CTA + newsletter panel */
.footer-cta-panel {
    background: linear-gradient(180deg, rgba(255, 0, 0, .10), rgba(255, 0, 0, .02));
    border: 1px solid rgba(8, 35, 64, .28);
    border-radius: var(--radius-lg);
    padding: 34px 28px;
    margin: 56px 0;
}

.footer-cta-title {
    color: var(--secondary-color);
    font-size: clamp(1.35rem, 1.1rem + 1.6vw, 1.9rem);
    line-height: 1.25;
    margin: 0 0 10px;
}

.footer-cta-panel>.row>[class*="col"]>p {
    color: #c3cad4;
    margin: 0;
}

.newsletter-card {
    background: var(--dark-bg-2);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    padding: 26px;
}

.newsletter-title {
    color: var(--secondary-color);
    font-size: 1.02rem;
    margin: 0 0 8px;
}

.newsletter-card>p {
    font-size: .88rem;
    color: var(--dark-text);
    margin: 0 0 16px;
}

.newsletter-field {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.newsletter-field input {
    flex: 1 1 200px;
    min-width: 0;
    background: var(--dark-bg);
    border: 1px solid #2a3140;
    color: var(--secondary-color);
    border-radius: 999px;
    padding: .7rem 1.1rem;
    font-size: .92rem;
}

.newsletter-field input::placeholder {
    color: #7f8894;
}

.newsletter-field input:focus {
    outline: 0;
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(178, 151, 80, .2);
}

.newsletter-note {
    font-size: .76rem;
    color: #7f8894;
    margin: .8rem 0 0;
}

/* Footer columns */
.footer h3 {
    font-family: var(--font-head);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: #7f8894;
    margin: 0 0 18px;
}

.footer-desc {
    font-size: .92rem;
    line-height: 1.75;
    margin-top: 16px;
    color: #9aa3af;
}

.footer-contact li {
    display: flex;
    gap: .7rem;
    margin-bottom: 12px;
    font-size: .9rem;
    color: #c3cad4;
}

.footer-contact .bi {
    color: var(--secondary-color);
    margin-top: .2rem;
    flex: 0 0 auto;
}

.footer-links {
    display: grid;
    grid-template-columns: 1fr;
    gap: .55rem;
    margin: 0;
    padding: 0;
}

.footer-links a {
    color: #c3cad4;
    text-decoration: none;
    font-size: .9rem;
}

.footer-links a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
    text-decoration-color: var(--primary-color);
    text-underline-offset: 4px;
}

/* Footer bottom bar */
.footer-bottom {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    border-top: 1px solid var(--dark-border);
    margin-top: 48px;
    padding-top: 22px;
}

.footer-bottom p {
    margin: 0;
    font-size: .82rem;
    color: #7f8894;
}

.back-top {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    border: 1px solid var(--dark-border);
    background: transparent;
    color: #c3cad4;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    transition: all .25s ease;
}

.back-top:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--secondary-color);
}




/* =========================
   15. SCROLL REVEAL & MOTION
========================= */
.js .reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.js .reveal.is-visible {
    opacity: 1;
    transform: none;
}









/* About csss */






/* =========================
   03. WHO WE ARE
========================= */
.about-cpa-who .section-title {
    margin-bottom: 16px;
}

.about-cpa-who p {
    margin-bottom: 1.05rem;
}

.about-cpa-who p:last-child {
    margin-bottom: 0;
}

/* Brand credential visual */
.about-cpa-visual {
    position: relative;
    max-width: 440px;
    margin: 8px auto 0;
    padding-bottom: 26px;
    /* space for floating badge */
}

.about-cpa-brand-card {
    position: relative;
    background: linear-gradient(155deg, #1c222d, var(--dark-bg) 70%);
    border: 1px solid var(--dark-border);
    border-radius: 24px;
    padding: 30px;
    padding-bottom: 34px;
    color: var(--secondary-color);
    box-shadow: var(--shadow-lg);
    text-align: left;
}

.about-cpa-brand-chip {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-head);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--primary-soft);
    background: rgba(178, 151, 80, .12);
    border: 1px solid rgba(178, 151, 80, .3);
    border-radius: 999px;
    padding: .4rem .8rem;
    margin-bottom: 18px;
}

.about-cpa-brand-head {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 22px;
}

.about-cpa-seal {
    width: 52px;
    height: 52px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 10px 22px rgba(178, 151, 80, .35);
}

.about-cpa-brand-name {
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1.15rem;
    line-height: 1.2;
    margin: 0;
}

.about-cpa-brand-sub {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8d97a5;
    margin: 2px 0 0;
}

.about-cpa-line {
    height: 10px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    margin-bottom: 12px;
}

.about-cpa-line-80 {
    width: 82%;
}

.about-cpa-line-70 {
    width: 70%;
}

.about-cpa-line-60 {
    width: 58%;
}

.about-cpa-brand-tagline {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    margin: 20px 0 0;
    padding-top: 16px;
    border-top: 1px dashed var(--dark-border);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .8rem;
    color: var(--secondary-color);
}

.about-cpa-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--primary-color);
    display: inline-block;
}

.about-cpa-orb {
    position: absolute;
    top: -20px;
    right: -8px;
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    border: 4px solid var(--secondary-color);
    color: var(--secondary-color);
    font-size: 1.4rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 16px 34px rgba(255, 0, 0, .4);
}

.about-cpa-float-badge {
    position: absolute;
    left: -6px;
    bottom: -6px;
    display: flex;
    align-items: center;
    gap: .55rem;
    background: var(--secondary-color);
    color: var(--ink);
    border-radius: 999px;
    padding: .6rem 1rem;
    font-weight: 700;
    font-size: .8rem;
    box-shadow: 0 16px 36px rgba(18, 22, 28, .25);
}

.about-cpa-float-badge .bi {
    color: var(--primary-color);
    font-size: 1.05rem;
    flex: 0 0 auto;
}

@keyframes about-cpa-float {

    0%,
    100% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }
}

.about-cpa-float-badge {
    animation: about-cpa-float 5s ease-in-out infinite;
}


/* =========================
   04. WHAT WE DO
========================= */
.about-cpa-do {
    background: var(--light-bg);
}

.about-cpa-do-card {
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.8rem 1.5rem;
    height: 100%;
    transition: all .3s ease;
}

.about-cpa-do-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.about-cpa-do-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.05rem;
    transition: all .3s ease;
}

.about-cpa-do-card:hover .about-cpa-do-icon {
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    box-shadow: 0 12px 24px rgba(178, 151, 80, .3);
}

.about-cpa-do-card p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.7;
}


/* =========================
   05. WHO WE SERVE
========================= */
.about-cpa-serve-chips {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .75rem;
    max-width: 900px;
}

.about-cpa-chip {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .65rem 1.15rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .88rem;
    color: var(--ink);
    transition: all .25s ease;
}

.about-cpa-chip .bi {
    color: var(--primary-dark);
    font-size: 1.05rem;
    transition: color .25s ease;
}

.about-cpa-chip:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-md);
    transform: translateY(-3px);
}

.about-cpa-chip:hover .bi {
    color: var(--primary-color);
}


/* =========================
   06. OUR APPROACH
========================= */
.about-cpa-approach {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.about-cpa-approach::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.about-cpa-approach .container-xl {
    position: relative;
    z-index: 2;
}

.about-cpa-approach .section-title {
    color: var(--secondary-color);
}

/* Numbered timeline */
.about-cpa-timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    max-width: 640px;
}

.about-cpa-step {
    position: relative;
    display: flex;
    gap: 1.1rem;
    padding-bottom: 28px;
}

.about-cpa-step:last-child {
    padding-bottom: 0;
}

.about-cpa-step::before {
    content: "";
    position: absolute;
    left: 23px;
    top: 52px;
    bottom: 2px;
    width: 2px;
    background: linear-gradient(180deg, rgba(178, 151, 80, .55), rgba(255, 255, 255, .08));
}

.about-cpa-step:last-child::before {
    display: none;
}

.about-cpa-step-num {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(8, 35, 64, .28);
}

.about-cpa-step-text {
    margin: 0;
    padding-top: .55rem;
    color: #c3cad4;
    font-size: 1rem;
    line-height: 1.7;
}


/* =========================
   07. OUR PROMISE
========================= */
.about-cpa-promise-card {
    background: var(--primary-tint);
    border: 1px solid var(--primary-tint-2);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.3rem;
    height: 100%;
    text-align: center;
    transition: all .3s ease;
}

.about-cpa-promise-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    background: var(--primary-tint-2);
}

.about-cpa-promise-icon {
    width: 52px;
    height: 52px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: var(--secondary-color);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    box-shadow: var(--shadow-sm);
}

.about-cpa-promise-card p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .95rem;
    color: var(--ink);
    line-height: 1.5;
}


/* =========================
   08. CLOSING CTA BAND
========================= */
.about-cpa-cta {
    position: relative;
    background: linear-gradient(130deg,
            var(--primary-color) 0%,
            var(--primary-dark) 55%,
            var(--primary-darker) 100%);
    color: var(--secondary-color);
    overflow: hidden;
    padding: 72px 0;
    text-align: center;
}

.about-cpa-cta::before,
.about-cpa-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .18);
    pointer-events: none;
}

.about-cpa-cta::before {
    width: 320px;
    height: 320px;
    top: -130px;
    left: -100px;
}

.about-cpa-cta::after {
    width: 420px;
    height: 420px;
    bottom: -210px;
    right: -140px;
    border-color: rgba(255, 255, 255, .12);
}

.about-cpa-cta .container-xl {
    position: relative;
    z-index: 2;
}

.about-cpa-cta h2 {
    color: var(--secondary-color);
    font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.35rem);
    line-height: 1.28;
    max-width: 860px;
    margin: 0 auto 16px;
}

.about-cpa-cta p {
    color: rgba(255, 255, 255, .92);
    max-width: 680px;
    margin: 0 auto 28px;
}

.about-cpa-cta-actions {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .85rem;
}


/* =========================
   09. SCROLL REVEAL
   (page-specific hook — never conflicts with the
   global .reveal observer used on the Home page)
========================= */
.about-cpa-js .about-cpa-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.about-cpa-js .about-cpa-reveal.is-visible {
    opacity: 1;
    transform: none;
}








/* purpose Vission and mission */







/* In-page section navigation pills (Purpose → Vision → Mission → Values) */
.pvm-hero-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin: 0;
}

.pvm-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 999px;
    padding: .62rem 1.15rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .85rem;
    color: #c3cad4;
    text-decoration: none;
    transition: all .25s ease;
}

.pvm-nav-pill .bi {
    color: var(--primary-soft);
    font-size: 1rem;
    transition: color .25s ease;
}

.pvm-nav-pill:hover {
    color: var(--secondary-color);
    border-color: rgba(178, 151, 80, .5);
    background: rgba(178, 151, 80, .08);
    transform: translateY(-2px);
}

.pvm-nav-pill:hover .bi {
    color: var(--primary-color);
}


/* =========================
   03. OUR PURPOSE
========================= */
.pvm-purpose {
    background: var(--secondary-color);
}

.pvm-purpose .section-title {
    margin: 0;
}

.pvm-purpose-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: var(--shadow-red);
    margin-bottom: 16px;
}

/* Large editorial statement with red rule */
.pvm-purpose-statement {
    margin: 0;
    max-width: 680px;
    padding-left: 1.6rem;
    border-left: 4px solid var(--primary-color);
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: clamp(1.3rem, 1rem + 1.5vw, 1.9rem);
    line-height: 1.5;
    letter-spacing: -.01em;
}

/* Highlighter effect on key phrases (styling only — text unchanged) */
.pvm-hl {
    background: linear-gradient(transparent 62%, var(--primary-tint-2) 62%);
    padding: 0 .05em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}


/* =========================
   04. OUR VISION
========================= */
.pvm-vision {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.pvm-vision::before {
    content: "";
    position: absolute;
    top: -200px;
    right: -140px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .22), transparent 65%);
}

.pvm-vision .container-xl {
    position: relative;
    z-index: 2;
}

/* Statement card */
.pvm-vision-card {
    position: relative;
    max-width: 960px;
    margin: 0 auto;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 24px;
    padding: 56px 32px 48px;
    text-align: center;
    backdrop-filter: blur(6px);
}

.pvm-vision-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.pvm-vision-badge {
    position: absolute;
    top: -30px;
    left: 50%;
    transform: translateX(-50%);
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    border: 4px solid var(--dark-bg);
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 14px 30px rgba(178, 151, 80, .35);
}

.pvm-vision-label {
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-size: .85rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    margin: 0 0 18px;
}

.pvm-vision-statement {
    margin: 0 auto;
    max-width: 820px;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: clamp(1.4rem, 1.05rem + 2vw, 2.2rem);
    line-height: 1.45;
    letter-spacing: -.01em;
}

.pvm-hl-dark {
    color: var(--primary-soft);
    background: rgba(178, 151, 80, .14);
    padding: .04em .18em;
    border-radius: .35em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}


/* =========================
   05. OUR MISSION
========================= */
.pvm-mission {
    background: var(--light-bg);
}

/* Numbered ledger list */
.pvm-mission-list {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pvm-mission-item {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.3rem;
    transition: all .3s ease;
}

.pvm-mission-item:hover {
    transform: translateX(6px);
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-md);
}

.pvm-mission-head {
    display: flex;
    align-items: center;
    gap: .6rem;
    flex: 0 0 auto;
}



.pvm-mission-icon {
    width: 44px;
    height: 44px;
    flex: 0 0 auto;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.pvm-mission-item p {
    margin: 0;
    font-size: 1rem;
    line-height: 1.65;
}


/* =========================
   06. OUR VALUES
========================= */
.pvm-values {
    background: var(--secondary-color);
}

.pvm-value-card {
    position: relative;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.7rem 1.5rem;
    height: 100%;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: all .3s ease;
}

.pvm-value-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-darker));
    transition: width .35s ease;
}

.pvm-value-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.pvm-value-card:hover::after {
    width: 100%;
}

.pvm-value-icon {
    width: 54px;
    height: 54px;
    border-radius: 16px;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    margin-bottom: 1.05rem;
    box-shadow: 0 10px 22px rgba(8, 35, 64, .28);
    transition: transform .3s ease;
}

.pvm-value-card:hover .pvm-value-icon {
    transform: scale(1.06) rotate(-4deg);
}

.pvm-value-name {
    font-size: 1.08rem;
    margin: 0 0 .55rem;
}

.pvm-value-card p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--body-text);
}











/* Governance Quality and Standards */









/* =========================
   03. GOVERNANCE PRINCIPLES
========================= */
.gqs-principles {
    background: var(--secondary-color);
}

.gqs-principle-card {
    position: relative;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.8rem 1.5rem;
    height: 100%;
    overflow: hidden;
    transition: all .3s ease;
}

.gqs-principle-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-darker));
    transition: width .35s ease;
}

.gqs-principle-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.gqs-principle-card:hover::after {
    width: 100%;
}

.gqs-principle-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: 1.05rem;
    transition: all .3s ease;
}

.gqs-principle-card:hover .gqs-principle-icon {
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    box-shadow: 0 12px 24px rgba(178, 151, 80, .3);
}

.gqs-principle-card p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.7;
}


/* =========================
   04. PROGRAMME QUALITY CYCLE
========================= */
.gqs-cycle {
    background: var(--light-bg);
}

.gqs-step-card {
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.4rem 1.5rem;
    height: 100%;
    transition: all .3s ease;
}

.gqs-step-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.gqs-step-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.gqs-step-num {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(8, 35, 64, .25);
}

.gqs-step-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
}

.gqs-step-title {
    font-size: 1.05rem;
    margin: 0 0 .5rem;
}

.gqs-step-card p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.65;
    color: var(--body-text);
}


/* =========================
   05. ASSESSMENT INTEGRITY
========================= */
.gqs-integrity {
    background: var(--secondary-color);
}

.gqs-integrity .section-title {
    margin: 0 0 14px;
}

.gqs-intro {
    margin: 0;
    font-size: 1.02rem;
}

/* Highlighter effect (styling only — text unchanged) */
.gqs-hl {
    background: linear-gradient(transparent 62%, var(--primary-tint-2) 62%);
    padding: 0 .05em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Methods panel */
.gqs-methods-panel {
    display: flex;
    align-items: center;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
}

.gqs-methods {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.gqs-method {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .55rem 1rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .87rem;
    color: var(--ink);
    transition: all .25s ease;
}

.gqs-method .bi {
    color: var(--primary-dark);
    font-size: 1rem;
    transition: color .25s ease;
}

.gqs-method:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.gqs-method:hover .bi {
    color: var(--primary-color);
}

/* Verbatim controls statement strip */
.gqs-controls-strip {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--primary-tint);
    border: 1px solid var(--primary-tint-2);
    border-radius: var(--radius-md);
    padding: 1.2rem 1.4rem;
}

.gqs-controls-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--secondary-color);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    box-shadow: var(--shadow-sm);
}

.gqs-controls-strip p {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
    font-size: .98rem;
    line-height: 1.65;
}


/* =========================
   06. RECOGNITION AND ACCREDITATION STATEMENT
========================= */
.gqs-recognition {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.gqs-recognition::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.gqs-recognition .container-xl {
    position: relative;
    z-index: 2;
}

.gqs-recognition .section-title {
    color: var(--secondary-color);
}

.gqs-recognition-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: var(--shadow-red);
    margin-bottom: 16px;
}

.gqs-recognition p {
    color: #c3cad4;
}

/* Red emphasis on the compliance phrase (styling only) */
.gqs-hl-dark {
    color: var(--primary-soft);
    background: rgba(178, 151, 80, .14);
    padding: .04em .18em;
    border-radius: .35em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Disclaimer panel */
.gqs-recognition-note {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.25rem;
    margin-top: 1.25rem;
}

.gqs-recognition-note>.bi {
    flex: 0 0 auto;
    color: var(--primary-soft);
    font-size: 1.2rem;
    margin-top: .15rem;
}

.gqs-recognition-note p {
    margin: 0;
    font-weight: 600;
    color: var(--secondary-color);
    font-size: .97rem;
    line-height: 1.65;
}


/* =========================
   07. COMPLAINTS AND APPEALS
========================= */
.gqs-complaints {
    background: var(--secondary-color);
}

.gqs-complaints-wrap {
    max-width: 760px;
    margin: 0 auto;
    text-align: center;
}

.gqs-complaints-wrap p {
    margin: 0 0 26px;
}


/* =========================
   08. SCROLL REVEAL
   (page-specific hook — never conflicts with the
   .pvm-reveal / .about-cpa-reveal observers on other pages)
========================= */
.gqs-js .gqs-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.gqs-js .gqs-reveal.is-visible {
    opacity: 1;
    transform: none;
}













/* Why choose us  */














/* =========================
   03. WHAT YOU CAN EXPECT (ledger)
========================= */
.wcc-expect {
    background: var(--secondary-color);
}

.wcc-expect .section-head {
    margin-bottom: 40px;
}

/* Column labels strip — mirrors the document table headers */
.wcc-expect-head {
    padding: 0 1.5rem;
    margin-bottom: 12px;
}

.wcc-expect-head-label {
    display: inline-block;
    font-family: var(--font-head);
    font-size: .72rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--muted);
}

/* Ledger rows */
.wcc-expect-list {
    display: flex;
    flex-direction: column;
    gap: 14px;
    max-width: 960px;
    margin: 0 auto;
}

.wcc-expect-row {
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    transition: all .3s ease;
}

.wcc-expect-row:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

/* Left panel — the expectation */
.wcc-expect-main {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--light-bg);
    padding: 1.3rem 1.5rem;
    height: 100%;
}

.wcc-expect-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: all .3s ease;
}

.wcc-expect-row:hover .wcc-expect-icon {
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    box-shadow: 0 12px 24px rgba(178, 151, 80, .3);
}

.wcc-expect-num {
    display: block;
    font-family: var(--font-head);
    font-size: .7rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--primary-dark);
    margin-bottom: 2px;
}

.wcc-expect-title {
    font-size: 1.05rem;
    margin: 0;
    line-height: 1.3;
}

/* Right panel — the value */
.wcc-expect-value {
    display: flex;
    align-items: center;
    padding: 1.3rem 1.5rem;
    height: 100%;
}

.wcc-expect-value p {
    margin: 0;
    font-size: .97rem;
    line-height: 1.7;
}

/* Divider between panels and column alignment (md and up) */



/* =========================
   04. THE RIGHT PROGRAMME / RIGHT QUESTION
========================= */
.wcc-question {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.wcc-question::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -160px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.wcc-question::after {
    content: "";
    position: absolute;
    left: -200px;
    bottom: -220px;
    width: 480px;
    height: 480px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .12), transparent 65%);
}

.wcc-question .container-xl {
    position: relative;
    z-index: 2;
}

.wcc-question .section-title {
    color: var(--secondary-color);
}

.wcc-question-lead {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--primary-soft);
    font-size: 1.05rem;
    margin: 0;
}

/* Consideration cards */
.wcc-question-card {
    position: relative;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    padding: 1.7rem 1.3rem 1.5rem;
    height: 100%;
    text-align: center;
    transition: all .3s ease;
}

.wcc-question-card:hover {
    transform: translateY(-5px);
    border-color: rgba(178, 151, 80, .5);
    background: rgba(178, 151, 80, .06);
}

.wcc-question-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto 1rem;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    box-shadow: 0 12px 26px rgba(178, 151, 80, .3);
    transition: transform .3s ease;
}

.wcc-question-card:hover .wcc-question-icon {
    transform: scale(1.06);
}

.wcc-question-card p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: 1rem;
    line-height: 1.5;
}

/* Closing line + CTA */
.wcc-question-close {
    text-align: center;
    margin-top: 44px;
}

.wcc-question-close p {
    color: #c3cad4;
    font-size: 1.05rem;
    margin: 0 0 24px;
}


/* =========================
   05. SCROLL REVEAL
   (page-specific hook — never conflicts with the
   reveal observers used on other pages)
========================= */
.wcc-js .wcc-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.wcc-js .wcc-reveal.is-visible {
    opacity: 1;
    transform: none;
}










/* Professoional Certifiations */













/* =========================
   03. WHAT IS A PROFESSIONAL CERTIFICATION
========================= */
.pcert-what {
    background: var(--secondary-color);
}

.pcert-what .section-title {
    margin-bottom: 18px;
}

/* Editorial definition statement */
.pcert-definition {
    margin: 0;
    max-width: 560px;
    padding-left: 1.5rem;
    border-left: 4px solid var(--primary-color);
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: clamp(1.2rem, 1rem + 1vw, 1.55rem);
    line-height: 1.55;
    letter-spacing: -.01em;
}

/* Published-facts panel */
.pcert-what-panel {
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px;
}

.pcert-what-intro {
    margin: 0 0 16px;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--body-text);
}

.pcert-what-item {
    display: flex;
    align-items: center;
    gap: .65rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .7rem .85rem;
    height: 100%;
    transition: all .25s ease;
}

.pcert-what-item:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
}

.pcert-what-icon {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
}

.pcert-what-item>span:last-child {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .85rem;
    line-height: 1.35;
}


/* =========================
   04. CHOOSE BY PROFESSIONAL AREA
========================= */
.pcert-areas {
    background: var(--light-bg);
}

.pcert-areas .section-head {
    margin-bottom: 40px;
}

.pcert-area-card {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    text-decoration: none;
    transition: all .25s ease;
}

.pcert-area-card:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-md);
    transform: translateY(-4px);
}

.pcert-area-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    transition: all .25s ease;
}

.pcert-area-card:hover .pcert-area-icon {
    background: var(--primary-color);
    color: var(--secondary-color);
}

.pcert-area-card>span:last-child {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .92rem;
    line-height: 1.35;
}


/* =========================
   05. CHOOSE BY CAREER STAGE
========================= */
.pcert-stages {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.pcert-stages::before {
    content: "";
    position: absolute;
    top: -200px;
    right: -140px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.pcert-stages .container-xl {
    position: relative;
    z-index: 2;
}

.pcert-stages .section-title {
    color: var(--secondary-color);
}

.pcert-stage-card {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.3rem 1.5rem;
    height: 100%;
    transition: all .3s ease;
}

.pcert-stage-card:hover {
    transform: translateY(-5px);
    border-color: rgba(178, 151, 80, .5);
    background: rgba(178, 151, 80, .06);
}

.pcert-stage-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}



.pcert-stage-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(178, 151, 80, .16);
    color: var(--primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.pcert-stage-name {
    color: var(--secondary-color);
    font-size: 1.1rem;
    margin: 0 0 .5rem;
}

.pcert-stage-card p {
    margin: 0;
    color: #c3cad4;
    font-size: .92rem;
    line-height: 1.65;
}


/* =========================
   06. WHAT EVERY CERTIFICATION PAGE SHOULD SHOW
========================= */
.pcert-standard {
    background: var(--secondary-color);
}

.pcert-standard .section-head {
    margin-bottom: 40px;
}

/* Closing checklist panel with red top accent */
.pcert-standard-panel {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 34px 30px;
    overflow: hidden;
}

.pcert-standard-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.pcert-standard-item {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1rem 1.1rem;
    height: 100%;
    transition: all .25s ease;
}

.pcert-standard-item:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.pcert-standard-check {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-top: .1rem;
}

.pcert-standard-item p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.55;
}


/* =========================
   07. SCROLL REVEAL
   (page-specific hook — never conflicts with the
   reveal observers used on other pages)
========================= */









/* Certification Areas */







/* =========================
   03. CERTIFICATION AREAS GRID
========================= */
.carea-areas {
    background: var(--secondary-color);
}

/* Editorial area card */
.carea-card {
    position: relative;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.9rem 1.6rem;
    height: 100%;
    overflow: hidden;
    transition: all .3s ease;
}

.carea-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-darker));
    transition: width .35s ease;
}

.carea-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.carea-card:hover::after {
    width: 100%;
}

.carea-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 1.05rem;
}

.carea-card-icon {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    transition: all .3s ease;
}

.carea-card:hover .carea-card-icon {
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    box-shadow: 0 12px 24px rgba(178, 151, 80, .3);
}

.carea-card-num {
    font-family: var(--font-head);
    font-size: .8rem;
    font-weight: 800;
    letter-spacing: .14em;
    color: var(--primary-dark);
    opacity: .32;
}

.carea-card-name {
    font-size: 1.12rem;
    line-height: 1.35;
    margin: 0 0 .55rem;
}

.carea-card p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--body-text);
}


/* =========================
   04. PROGRAMME FINDER FILTERS
========================= */
.carea-filters {
    background: var(--light-bg);
}

.carea-filters .section-head {
    margin-bottom: 40px;
}

/* Finder panel with red top accent */
.carea-filters-panel {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 34px 30px;
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.carea-filters-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.carea-filters {
    list-style: none;
    margin: 0;
    padding: 15px;
    border-radius: 15px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .65rem;
}

.carea-filter {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .65rem 1.15rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .88rem;
    color: var(--ink);
    transition: all .25s ease;
}

.carea-filter .bi {
    color: var(--primary-dark);
    font-size: 1rem;
    transition: color .25s ease;
}

.carea-filter:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.carea-filter:hover .bi {
    color: var(--primary-color);
}













/* Certification Pathway */









/* =========================
   03. CERTIFICATION PATHWAY TIMELINE
========================= */
.cpath-steps {
    background: var(--secondary-color);
}

.cpath-steps .section-head {
    margin-bottom: 48px;
}

/* Ordered vertical timeline */
.cpath-timeline {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 800px;
}

.cpath-step {
    position: relative;
    display: flex;
    gap: 1.25rem;
    padding-bottom: 26px;
}

.cpath-step:last-child {
    padding-bottom: 0;
}

/* Connecting rail */
.cpath-step::before {
    content: "";
    position: absolute;
    left: 25px;
    top: 58px;
    bottom: 2px;
    width: 2px;
    background: linear-gradient(180deg, rgba(178, 151, 80, .5), var(--line));
}

.cpath-step:last-child::before {
    display: none;
}

/* Number node */
.cpath-node {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(8, 35, 64, .28);
}

/* Step card */
.cpath-card {
    flex: 1 1 auto;
    min-width: 0;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.35rem;
    transition: all .3s ease;
}

.cpath-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.cpath-card-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .5rem;
}

.cpath-card-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.cpath-step-title {
    font-size: 1.05rem;
    line-height: 1.35;
    margin: 0;
}

.cpath-card p {
    margin: 0;
    font-size: .95rem;
    line-height: 1.7;
    color: var(--body-text);
}


/* =========================
   04. RECOGNITION OF PRIOR LEARNING
========================= */
.cpath-rpl {
    background: var(--light-bg);
}

.cpath-rpl .section-title {
    margin-bottom: 16px;
}

.cpath-rpl-statement {
    margin: 0;
    font-size: 1.02rem;
    line-height: 1.75;
    max-width: 460px;
}

/* Note cards */
.cpath-rpl-note {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.2rem 1.3rem;
    box-shadow: var(--shadow-sm);
}

.cpath-rpl-note+.cpath-rpl-note {
    margin-top: 1rem;
}

.cpath-rpl-note>.bi {
    flex: 0 0 auto;
    color: var(--primary-dark);
    font-size: 1.25rem;
    margin-top: .15rem;
}

.cpath-rpl-note p {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
    font-size: .98rem;
    line-height: 1.65;
}


/* =========================
   05. NEED HELP CHOOSING
========================= */
.cpath-guidance {
    background: var(--secondary-color);
}

.cpath-guidance .section-head {
    margin-bottom: 36px;
}

.cpath-guidance-lead {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: 1.1rem;
    margin: 0;
}

/* Information chips */
.cpath-chips {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .7rem;
    max-width: 760px;
}

.cpath-chip {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .65rem 1.15rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .88rem;
    color: var(--ink);
    transition: all .25s ease;
}

.cpath-chip .bi {
    color: var(--primary-dark);
    font-size: 1rem;
    transition: color .25s ease;
}

.cpath-chip:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.cpath-chip:hover .bi {
    color: var(--primary-color);
}

/* Guidance expectation note */
.cpath-guidance-note {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    max-width: 720px;
    margin: 26px auto 32px;
    background: var(--primary-tint);
    border: 1px solid var(--primary-tint-2);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.3rem;
}

.cpath-guidance-note>.bi {
    flex: 0 0 auto;
    color: var(--primary-dark);
    font-size: 1.25rem;
    margin-top: .15rem;
}

.cpath-guidance-note p {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
    font-size: .97rem;
    line-height: 1.65;
}














/* Assessment and Certification Standards */









/* =========================
   03. ASSESSMENT PRINCIPLE
========================= */
.acs-principle {
    background: var(--secondary-color);
}

.acs-principle .section-title {
    margin: 0;
}

.acs-principle-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: var(--shadow-red);
    margin-bottom: 16px;
}

/* Editorial statement with red rule */
.acs-principle-statement {
    margin: 0;
    max-width: 680px;
    padding-left: 1.6rem;
    border-left: 4px solid var(--primary-color);
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: clamp(1.2rem, 1rem + 1.1vw, 1.65rem);
    line-height: 1.55;
    letter-spacing: -.01em;
}

/* Highlighter effect on key phrases (styling only — text unchanged) */
.acs-hl {
    background: linear-gradient(transparent 62%, var(--primary-tint-2) 62%);
    padding: 0 .05em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}


/* =========================
   04. POSSIBLE ASSESSMENT METHODS
========================= */
.acs-methods {
    background: var(--light-bg);
}

.acs-methods .section-head {
    margin-bottom: 40px;
}

.acs-method-card {
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.55rem 1.4rem;
    height: 100%;
    transition: all .3s ease;
}

.acs-method-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.acs-method-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 1rem;
    transition: all .3s ease;
}

.acs-method-card:hover .acs-method-icon {
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    box-shadow: 0 12px 24px rgba(178, 151, 80, .3);
}

.acs-method-card p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .97rem;
    line-height: 1.55;
}


/* =========================
   05. CANDIDATE RESPONSIBILITIES (LEDGER)
========================= */
.acs-resp {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.acs-resp::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.acs-resp .container-xl {
    position: relative;
    z-index: 2;
}

.acs-resp .section-title {
    color: var(--secondary-color);
}

/* Numbered ledger rows */
.acs-resp-list {
    max-width: 880px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.acs-resp-row {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.3rem;
    transition: all .3s ease;
}

.acs-resp-row:hover {
    transform: translateX(6px);
    border-color: rgba(178, 151, 80, .5);
    background: rgba(178, 151, 80, .06);
}

.acs-resp-num {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(8, 35, 64, .28);
}

.acs-resp-row p {
    margin: 0;
    color: #c3cad4;
    font-size: 1rem;
    line-height: 1.65;
}


/* =========================
   06. ASSESSMENT DECISIONS
========================= */
.acs-decisions {
    background: var(--secondary-color);
}

.acs-decisions .section-title {
    margin-bottom: 12px;
}

.acs-decisions-lead {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: 1.15rem;
    margin: 0;
}

/* Published-items panel */
.acs-decisions-panel {
    display: flex;
    align-items: center;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
}

.acs-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.acs-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .6rem 1.05rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .88rem;
    color: var(--ink);
    transition: all .25s ease;
}

.acs-chip:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

/* Info / requirement note strip */
.acs-note {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    max-width: 880px;
    margin-left: auto;
    margin-right: auto;
    background: var(--primary-tint);
    border: 1px solid var(--primary-tint-2);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.3rem;
}

.acs-note>.bi {
    flex: 0 0 auto;
    color: var(--primary-dark);
    font-size: 1.25rem;
    margin-top: .15rem;
}

.acs-note p {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
    font-size: .98rem;
    line-height: 1.65;
}


/* =========================
   07. USE OF ARTIFICIAL INTELLIGENCE
========================= */
.acs-ai {
    background: var(--light-bg);
}

.acs-ai .section-head {
    margin-bottom: 36px;
}

/* Responsibility checklist panel */
.acs-ai-panel {
    max-width: 820px;
    margin: 0 auto;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px;
    box-shadow: var(--shadow-sm);
}

.acs-ai-lead {
    margin: 0 0 16px;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: 1.02rem;
    line-height: 1.5;
}

.acs-ai-item {
    display: flex;
    align-items: flex-start;
    gap: .8rem;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: .95rem 1.05rem;
    height: 100%;
    transition: all .25s ease;
}

.acs-ai-item:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
}

.acs-ai-check {
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .95rem;
    margin-top: .1rem;
}

.acs-ai-item p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.5;
}

/* Consequence warning strip */
.acs-ai-warning {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    max-width: 820px;
    margin: 20px auto 0;
    background: var(--primary-tint);
    border: 1px solid var(--primary-tint-2);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.3rem;
}

.acs-ai-warning>.bi {
    flex: 0 0 auto;
    color: var(--primary-color);
    font-size: 1.25rem;
    margin-top: .15rem;
}

.acs-ai-warning p {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
    font-size: .98rem;
    line-height: 1.65;
}


/* =========================
   08. APPEALS
========================= */
.acs-appeals {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.acs-appeals::before {
    content: "";
    position: absolute;
    left: -180px;
    bottom: -200px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 0, 0, .18), transparent 65%);
}

.acs-appeals .container-xl {
    position: relative;
    z-index: 2;
}

.acs-appeals .section-title {
    color: var(--secondary-color);
    margin-bottom: 16px;
}

/* Statement card */
.acs-appeals-statement {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.6rem;
}

.acs-appeals-statement p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: clamp(1.15rem, 1rem + .8vw, 1.45rem);
    line-height: 1.55;
    letter-spacing: -.01em;
}

/* Red emphasis on dark (styling only — text unchanged) */
.acs-hl-dark {
    color: var(--primary-soft);
    background: rgba(178, 151, 80, .14);
    padding: .04em .18em;
    border-radius: .35em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.acs-appeals-lead {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: 1.05rem;
    margin: 0 0 14px;
}

/* Chips on dark surface */
.acs-chips-dark {
    margin-bottom: 18px;
}

.acs-chip-dark {
    background: rgba(255, 255, 255, .03);
    border-color: var(--dark-border);
    color: var(--secondary-color);
}

.acs-chip-dark .bi {
    color: var(--primary-soft);
    font-size: 1rem;
}

.acs-chip-dark:hover {
    border-color: rgba(178, 151, 80, .5);
    background: rgba(178, 151, 80, .06);
    box-shadow: none;
}

/* Note on dark surface */
.acs-note-dark {
    background: var(--dark-card);
    border-color: var(--dark-border);
    max-width: none;
}

.acs-note-dark>.bi {
    color: var(--primary-soft);
}

.acs-note-dark p {
    color: var(--secondary-color);
}


 









/* Certification Renewal and CPD */






/* =========================
   03. KEEPING PROFESSIONAL RECOGNITION CURRENT
========================= */
.crcpd-current {
    background: var(--secondary-color);
}

.crcpd-current .section-head {
    margin-bottom: 40px;
}

/* Side-by-side credential status cards */
.crcpd-status-card {
    display: flex;
    align-items: center;
    gap: 1.15rem;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.5rem;
    height: 100%;
    transition: all .3s ease;
}

.crcpd-status-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.crcpd-status-card p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: 1.05rem;
    line-height: 1.55;
}

.crcpd-status-card strong {
    font-weight: 800;
    color: var(--primary-dark);
}

.crcpd-status-icon {
    flex: 0 0 auto;
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.45rem;
    box-shadow: 0 10px 22px rgba(178, 151, 80, .3);
}

.crcpd-status-icon-neutral {
    background: var(--secondary-color);
    color: var(--primary-dark);
    border: 1px solid var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
}

/* Verbatim rule strip */
.crcpd-rule-strip {
    display: flex;
    align-items: center;
    gap: 1rem;
    max-width: 820px;
    margin: 26px auto 0;
    background: var(--primary-tint);
    border: 1px solid var(--primary-tint-2);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.2rem 1.4rem;
}

.crcpd-rule-icon {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--secondary-color);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: var(--shadow-sm);
}

.crcpd-rule-strip p {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
    font-size: .98rem;
    line-height: 1.65;
}


/* =========================
   04. TYPICAL RENEWAL EVIDENCE
========================= */
.crcpd-evidence {
    background: var(--light-bg);
}

.crcpd-evidence .section-head {
    margin-bottom: 40px;
}

.crcpd-evidence-card {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.2rem 1.2rem;
    height: 100%;
    transition: all .25s ease;
}

.crcpd-evidence-card:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.crcpd-evidence-check {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-top: .1rem;
}

.crcpd-evidence-card p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.55;
}


/* =========================
   05. SUGGESTED CPD CATEGORIES
========================= */
.crcpd-categories {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.crcpd-categories::before {
    content: "";
    position: absolute;
    top: -200px;
    right: -140px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.crcpd-categories .container-xl {
    position: relative;
    z-index: 2;
}

.crcpd-categories .section-title {
    color: var(--secondary-color);
}

.crcpd-cat-card {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.3rem 1.5rem;
    height: 100%;
    transition: all .3s ease;
}

.crcpd-cat-card:hover {
    transform: translateY(-5px);
    border-color: rgba(178, 151, 80, .5);
    background: rgba(178, 151, 80, .06);
}

.crcpd-cat-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 16px;
}

.crcpd-cat-num {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(8, 35, 64, .28);
}

.crcpd-cat-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(178, 151, 80, .16);
    color: var(--primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.crcpd-cat-name {
    color: var(--secondary-color);
    font-size: 1.08rem;
    line-height: 1.35;
    margin: 0 0 .5rem;
}

.crcpd-cat-card p {
    margin: 0;
    color: #c3cad4;
    font-size: .92rem;
    line-height: 1.65;
}


/* =========================
   06. CPD QUALITY
========================= */
.crcpd-quality {
    background: var(--secondary-color);
}

.crcpd-quality .section-head {
    margin-bottom: 36px;
}

.crcpd-quality-lead {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: 1.15rem;
    margin: 0;
}

/* Verbatim record-element tiles */
.crcpd-quality-tile {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .75rem;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.25rem .9rem;
    height: 100%;
    transition: all .25s ease;
}

.crcpd-quality-tile:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.crcpd-quality-icon {
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    box-shadow: 0 10px 20px rgba(8, 35, 64, .25);
}

.crcpd-quality-tile p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .9rem;
    line-height: 1.45;
}

/* Verbatim warning strip */
.crcpd-quality-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    max-width: 560px;
    margin: 26px auto 0;
    background: var(--primary-tint);
    border: 1px solid var(--primary-tint-2);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.3rem;
}

.crcpd-quality-warning>.bi {
    flex: 0 0 auto;
    color: var(--primary-color);
    font-size: 1.25rem;
}

.crcpd-quality-warning p {
    margin: 0;
    font-weight: 700;
    color: var(--ink);
    font-size: .98rem;
    line-height: 1.55;
}


/* =========================
   07. LAPSED CREDENTIALS
========================= */
.crcpd-lapsed {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.crcpd-lapsed::before {
    content: "";
    position: absolute;
    left: -180px;
    bottom: -200px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 0, 0, .18), transparent 65%);
}

.crcpd-lapsed .container-xl {
    position: relative;
    z-index: 2;
}

.crcpd-lapsed .section-title {
    color: var(--secondary-color);
    margin-bottom: 16px;
}

/* Verbatim status statement */
.crcpd-lapsed-statement {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.6rem;
}

.crcpd-lapsed-statement p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: clamp(1.1rem, 1rem + .7vw, 1.35rem);
    line-height: 1.6;
    letter-spacing: -.01em;
}

/* Red emphasis on statuses (styling only — text unchanged) */
.crcpd-hl-dark {
    color: var(--primary-soft);
    background: rgba(178, 151, 80, .14);
    padding: .04em .18em;
    border-radius: .35em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.crcpd-reinstate-lead {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: 1.05rem;
    margin: 0 0 14px;
}

/* Reinstatement chips (dark surface) */
.crcpd-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.crcpd-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--dark-border);
    border-radius: 999px;
    padding: .6rem 1.05rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .88rem;
    color: var(--secondary-color);
    transition: all .25s ease;
}

.crcpd-chip .bi {
    color: var(--primary-soft);
    font-size: 1rem;
}

.crcpd-chip:hover {
    border-color: rgba(178, 151, 80, .5);
    background: rgba(178, 151, 80, .06);
    transform: translateY(-2px);
}











/* Certification Faq */









/* =========================
   03. FAQ ACCORDION
========================= */
.cfq-faq {
    background: var(--secondary-color);
}

/* Accordion shell */
.cfq-accordion {
    max-width: 860px;
    margin: 0 auto;
}

/* Single item card */
.cfq-item {
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: 12px;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.cfq-item:last-child {
    margin-bottom: 0;
}

.cfq-item:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
}



/* Remove Bootstrap's group divider + radius handling
   (scoped to this accordion only) */
.cfq-accordion .accordion-item {
    background: transparent;
    border: 0;
}

/* Question button */
.cfq-question-btn {
    display: flex;
    align-items: center;
    gap: .95rem;
    width: 100%;
    text-align: left;
    background: var(--primary-tint);
    color: var(--ink);
    border: 0;
    border-radius: 0;
    padding: 1.2rem 1.4rem;
    font-family: var(--font-head);
    box-shadow: none;
    transition: background .25s ease, color .25s ease;
}

.cfq-question-btn:hover {
    background: var(--light-bg);
    color: var(--ink);
}

/* Open-state question */
.cfq-accordion .accordion-button:not(.collapsed) {
    background: var(--primary-tint);
    color: var(--primary-dark);
    box-shadow: none;
}

/* Hide Bootstrap's default chevron (custom toggle used instead) */
.cfq-accordion .accordion-button::after {
    display: none;
}

/* Keyboard focus (global :focus-visible outline remains active;
   this softens Bootstrap's own :focus ring only) */
.cfq-accordion .accordion-button:focus {
    box-shadow: none;
}

.cfq-accordion .accordion-button:focus-visible {
    box-shadow: inset 0 0 0 3px rgba(8, 35, 64, .25);
}

/* Question number badge */
.cfq-q-num {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 10px;
    background: var(--light-bg);
    color: var(--primary-dark);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: .82rem;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all .25s ease;
}

.cfq-accordion .accordion-button:not(.collapsed) .cfq-q-num {
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    box-shadow: 0 8px 18px rgba(8, 35, 64, .25);
}

/* Question text */
.cfq-q-text {
    flex: 1 1 auto;
    min-width: 0;
    font-weight: 700;
    font-size: 1.02rem;
    line-height: 1.45;
}

/* Custom toggle icon (plus → × when open) */
.cfq-toggle {
    flex: 0 0 auto;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--light-bg);
    color: var(--ink);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    transition: background .25s ease, color .25s ease;
}

.cfq-toggle .bi {
    transition: transform .3s ease;
}

.cfq-accordion .accordion-button:not(.collapsed) .cfq-toggle {
    background: var(--primary-color);
    color: var(--secondary-color);
}

.cfq-accordion .accordion-button:not(.collapsed) .cfq-toggle .bi {
    transform: rotate(45deg);
}

/* Answer body */
.cfq-accordion .accordion-body {
    padding: 0 1.4rem 1.35rem;
}

.cfq-answer p {
    margin: 0 0 .6rem;
    font-size: .97rem;
    line-height: 1.75;
    max-width: 680px;
}

.cfq-answer p:last-child {
    margin-bottom: 0;
}

.cfq-answer-lead {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
}

.cfq-answer a {
    color: var(--primary-dark);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
}

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

/* Inline-list chips (used where the document lists items in a sentence) */
.cfq-chips {
    list-style: none;
    margin: .35rem 0 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}

.cfq-chip {
    display: inline-flex;
    align-items: center;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .45rem .95rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .84rem;
    color: var(--ink);
    transition: all .25s ease;
}

.cfq-chip:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}










/* Professional Memeberhsip */








/* =========================
   03. MORE THAN A MEMBER TITLE (OVERVIEW)
========================= */
.pmem-overview {
    background: var(--secondary-color);
}

.pmem-overview .section-title {
    margin-bottom: 18px;
}

/* Editorial statement with red rule (sentence 1) */
.pmem-statement {
    margin: 0;
    max-width: 520px;
    padding-left: 1.5rem;
    border-left: 4px solid var(--primary-color);
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: clamp(1.2rem, 1rem + 1vw, 1.55rem);
    line-height: 1.55;
    letter-spacing: -.01em;
}

/* Support panel (sentence 2 reorganized) */
.pmem-pillars-panel {
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px;
}

.pmem-pillars-lead {
    margin: 0 0 16px;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.5;
}

.pmem-pillar {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: .6rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.15rem .8rem;
    height: 100%;
    transition: all .25s ease;
}

.pmem-pillar:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.pmem-pillar-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    box-shadow: 0 10px 20px rgba(8, 35, 64, .25);
}

.pmem-pillar>span:last-child {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .92rem;
    line-height: 1.35;
}

.pmem-pillars-close {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .55rem;
    margin: 18px 0 0;
    padding-top: 16px;
    border-top: 1px dashed var(--line);
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .95rem;
}

.pmem-pillars-close .bi {
    color: var(--primary-color);
}


/* =========================
   04. MEMBER BENEFITS
========================= */
.pmem-benefits {
    background: var(--light-bg);
}

.pmem-benefits .section-head {
    margin-bottom: 40px;
}

.pmem-benefit-card {
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.55rem 1.4rem;
    height: 100%;
    transition: all .3s ease;
}

.pmem-benefit-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.pmem-benefit-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 1rem;
    transition: all .3s ease;
}

.pmem-benefit-card:hover .pmem-benefit-icon {
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    box-shadow: 0 12px 24px rgba(178, 151, 80, .3);
}

.pmem-benefit-card p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .94rem;
    line-height: 1.6;
}


/* =========================
   05. MEMBERSHIP RESPONSIBILITIES (LEDGER)
========================= */
.pmem-resp {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.pmem-resp::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.pmem-resp .container-xl {
    position: relative;
    z-index: 2;
}

.pmem-resp .section-title {
    color: var(--secondary-color);
}

.pmem-resp-lead {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--primary-soft);
    font-size: 1.08rem;
    margin: 0;
}

/* Numbered ledger rows */
.pmem-resp-list {
    max-width: 820px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.pmem-resp-row {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.3rem;
    transition: all .3s ease;
}

.pmem-resp-row:hover {
    transform: translateX(6px);
    border-color: rgba(178, 151, 80, .5);
    background: rgba(178, 151, 80, .06);
}

.pmem-resp-num {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(8, 35, 64, .28);
}

.pmem-resp-row p {
    margin: 0;
    color: #c3cad4;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1rem;
    line-height: 1.6;
}


/* =========================
   06. A CATEGORY FOR EACH CAREER STAGE (CTA BAND)
========================= */
.pmem-cta {
    position: relative;
    background: linear-gradient(130deg,
            var(--primary-color) 0%,
            var(--primary-dark) 55%,
            var(--primary-darker) 100%);
    color: var(--secondary-color);
    overflow: hidden;
    padding: 72px 0;
    text-align: center;
}

.pmem-cta::before,
.pmem-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .18);
    pointer-events: none;
}

.pmem-cta::before {
    width: 320px;
    height: 320px;
    top: -130px;
    left: -100px;
}

.pmem-cta::after {
    width: 420px;
    height: 420px;
    bottom: -210px;
    right: -140px;
    border-color: rgba(255, 255, 255, .12);
}

.pmem-cta .container-xl {
    position: relative;
    z-index: 2;
}

.pmem-cta h2 {
    color: var(--secondary-color);
    font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.4rem);
    line-height: 1.25;
    max-width: 760px;
    margin: 0 auto 16px;
}

.pmem-cta p {
    color: rgba(255, 255, 255, .92);
    max-width: 640px;
    margin: 0 auto 14px;
}

.pmem-cta p:last-of-type {
    margin-bottom: 26px;
}


/* =========================
   07. SCROLL REVEAL
   (page-specific hook — never conflicts with the
   reveal observers used on other pages)
========================= */
.pmem-js .pmem-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.pmem-js .pmem-reveal.is-visible {
    opacity: 1;
    transform: none;
}








/* Memebrhsip Catageories */









/* =========================
   03. MEMBERSHIP CATEGORIES GRID
========================= */
.mcat-categories {
    background: var(--light-bg);
}

/* Category card with left red accent on hover */
.mcat-card {
    position: relative;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.7rem 1.5rem;
    height: 100%;
    overflow: hidden;
    transition: all .3s ease;
}

.mcat-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, var(--primary-color), var(--primary-darker));
    transition: height .35s ease;
}

.mcat-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.mcat-card:hover::before {
    height: 100%;
}

.mcat-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.mcat-card-num {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(8, 35, 64, .25);
}

.mcat-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.mcat-card-name {
    font-size: 1.1rem;
    line-height: 1.35;
    margin: 0 0 14px;
}

/* Field blocks — labels use the document's own column headers */
.mcat-field {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .85rem .95rem;
    background: var(--light-bg);
}

.mcat-field+.mcat-field {
    margin-top: .7rem;
}

.mcat-field-label {
    display: block;
    font-family: var(--font-head);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}

.mcat-field-text {
    margin: 0;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--body-text);
}

.mcat-field-evidence {
    background: var(--primary-tint);
    border-color: var(--primary-tint-2);
}

.mcat-field-evidence .mcat-field-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    color: var(--primary-dark);
}

.mcat-field-evidence .mcat-field-label .bi {
    font-size: .85rem;
    flex: 0 0 auto;
}

.mcat-field-evidence .mcat-field-text {
    color: var(--ink);
    font-weight: 500;
}


/* =========================
   04. DESIGNATION AND POST-NOMINALS
========================= */
.mcat-designation {
    background: var(--secondary-color);
}

.mcat-designation .section-title {
    margin-bottom: 16px;
}

/* Editorial statement (sentence 1, verbatim) */
.mcat-statement {
    margin: 0;
    max-width: 480px;
    padding-left: 1.5rem;
    border-left: 4px solid var(--primary-color);
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: clamp(1.15rem, 1rem + .8vw, 1.45rem);
    line-height: 1.55;
    letter-spacing: -.01em;
}

/* Highlighter effect (styling only — text unchanged) */
.mcat-hl {
    background: linear-gradient(transparent 62%, var(--primary-tint-2) 62%);
    padding: 0 .05em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Rule note card (sentence 2, verbatim) */
.mcat-note {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.2rem 1.3rem;
    box-shadow: var(--shadow-sm);
    height: 100%;
}

.mcat-note>.bi {
    flex: 0 0 auto;
    color: var(--primary-dark);
    font-size: 1.25rem;
    margin-top: .15rem;
}

.mcat-note p {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
    font-size: .98rem;
    line-height: 1.65;
}


/* =========================
   05. UPGRADING MEMBERSHIP
========================= */
.mcat-upgrade {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.mcat-upgrade::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.mcat-upgrade .container-xl {
    position: relative;
    z-index: 2;
}

.mcat-upgrade .section-title {
    color: var(--secondary-color);
    margin-bottom: 16px;
}

/* Criteria statement card (sentence 1, verbatim) */
.mcat-upgrade-statement {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.6rem;
}

.mcat-upgrade-statement p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: clamp(1.1rem, 1rem + .7vw, 1.35rem);
    line-height: 1.6;
    letter-spacing: -.01em;
}

/* Red emphasis on criteria (styling only — text unchanged) */
.mcat-hl-dark {
    color: var(--primary-soft);
    background: rgba(178, 151, 80, .14);
    padding: .04em .18em;
    border-radius: .35em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Note on dark surface (sentence 2, verbatim) */
.mcat-note-dark {
    background: var(--dark-card);
    border-color: var(--dark-border);
    box-shadow: none;
}

.mcat-note-dark>.bi {
    color: var(--primary-soft);
}

.mcat-note-dark p {
    color: var(--secondary-color);
}


/* =========================
   06. FEES
========================= */
.mcat-fees {
    background: var(--light-bg);
}

.mcat-fees .section-head {
    margin-bottom: 36px;
}

/* Fees panel — sentence 1 with inline chips */
.mcat-fees-panel {
    max-width: 880px;
    margin: 0 auto;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 34px 30px;
    box-shadow: var(--shadow-sm);
}

.mcat-fees-sentence {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: 1.05rem;
    line-height: 2.5;
}

/* Inline chips for the exact fee-schedule items */
.mcat-chip {
    display: inline-flex;
    align-items: center;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .28rem .85rem;
    font-size: .88rem;
    font-weight: 700;
    color: var(--ink);
    margin: .1rem 0;
    transition: all .25s ease;
}

.mcat-chip:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
}

/* Verbatim warning strip (sentence 2) */
.mcat-warning {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    max-width: 640px;
    margin: 20px auto 0;
    background: var(--primary-tint);
    border: 1px solid var(--primary-tint-2);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.3rem;
}

.mcat-warning>.bi {
    flex: 0 0 auto;
    color: var(--primary-color);
    font-size: 1.25rem;
}

.mcat-warning p {
    margin: 0;
    font-weight: 700;
    color: var(--ink);
    font-size: .98rem;
    line-height: 1.55;
}


/* =========================
   07. SCROLL REVEAL
   (page-specific hook — never conflicts with the
   reveal observers used on other pages)
========================= */
.mcat-js .mcat-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.mcat-js .mcat-reveal.is-visible {
    opacity: 1;
    transform: none;
}








/* Memberhsip Benifits */







/* =========================
   03. BENEFIT AREAS GRID
========================= */
.mben-benefits {
    background: var(--secondary-color);
}

/* Editorial benefit card — icon + area name + member value */
.mben-card {
    position: relative;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.7rem 1.5rem;
    height: 100%;
    overflow: hidden;
    transition: all .3s ease;
}

.mben-card::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-darker));
    transition: width .35s ease;
}

.mben-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-md);
    border-color: transparent;
}

.mben-card:hover::after {
    width: 100%;
}

.mben-card-head {
    display: flex;
    align-items: center;
    gap: .95rem;
    margin-bottom: .9rem;
}

.mben-card-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: all .3s ease;
}

.mben-card:hover .mben-card-icon {
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    box-shadow: 0 12px 24px rgba(178, 151, 80, .3);
}

.mben-card-name {
    font-size: 1.1rem;
    line-height: 1.35;
    margin: 0;
}

.mben-card p {
    margin: 0;
    font-size: .96rem;
    line-height: 1.7;
    color: var(--body-text);
}


/* =========================
   04. BENEFIT AVAILABILITY
========================= */
.mben-availability {
    background: var(--light-bg);
}

.mben-availability .section-title {
    margin-bottom: 16px;
}

/* Editorial statement (sentence 1, verbatim) */
.mben-statement {
    margin: 0;
    max-width: 460px;
    padding-left: 1.5rem;
    border-left: 4px solid var(--primary-color);
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: clamp(1.15rem, 1rem + .9vw, 1.5rem);
    line-height: 1.6;
    letter-spacing: -.01em;
}

/* Highlighter effect on variation factors (styling only) */
.mben-hl {
    background: linear-gradient(transparent 62%, var(--primary-tint-2) 62%);
    padding: 0 .05em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Note cards (sentence 2 clauses, verbatim) */
.mben-note {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.2rem 1.3rem;
    box-shadow: var(--shadow-sm);
}

.mben-note+.mben-note {
    margin-top: 1rem;
}

.mben-note>.bi {
    flex: 0 0 auto;
    color: var(--primary-dark);
    font-size: 1.25rem;
    margin-top: .15rem;
}

.mben-note p {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
    font-size: .98rem;
    line-height: 1.65;
}

/* Warning variant */
.mben-note-warn {
    background: var(--primary-tint);
    border-color: var(--primary-tint-2);
}

.mben-note-warn>.bi {
    color: var(--primary-color);
}


/* =========================
   05. MEMBER SPOTLIGHT
========================= */
.mben-spotlight {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.mben-spotlight::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.mben-spotlight .container-xl {
    position: relative;
    z-index: 2;
}

.mben-spotlight .section-title {
    color: var(--secondary-color);
    margin-bottom: 16px;
}

/* Statement card (sentence 1, verbatim) */
.mben-spot-statement {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.6rem;
}

.mben-spot-statement p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: clamp(1.1rem, 1rem + .8vw, 1.4rem);
    line-height: 1.6;
    letter-spacing: -.01em;
}

/* Red emphasis on spotlight themes (styling only — text unchanged) */
.mben-hl-dark {
    color: var(--primary-soft);
    background: rgba(178, 151, 80, .14);
    padding: .04em .18em;
    border-radius: .35em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Consent note on dark surface (sentence 2, verbatim) */
.mben-note-dark {
    background: var(--dark-card);
    border-color: var(--dark-border);
    box-shadow: none;
}

.mben-note-dark>.bi {
    color: var(--primary-soft);
}

.mben-note-dark p {
    color: var(--secondary-color);
}

/* Documented button row */
.mben-spot-action {
    margin-top: 1.4rem;
}


/* =========================
   06. SCROLL REVEAL
   (page-specific hook — never conflicts with the
   reveal observers used on other pages)
========================= */
.mben-js .mben-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.mben-js .mben-reveal.is-visible {
    opacity: 1;
    transform: none;
}





/* How to Join*/










/* =========================
   03. APPLICATION STEPS TIMELINE
========================= */
.howjoin-steps {
    background: var(--secondary-color);
}

.howjoin-steps .section-head {
    margin-bottom: 48px;
}

/* Ordered vertical timeline */
.howjoin-timeline {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 800px;
}

.howjoin-step {
    position: relative;
    display: flex;
    gap: 1.25rem;
    padding-bottom: 26px;
}

.howjoin-step:last-child {
    padding-bottom: 0;
}

/* Connecting rail */
.howjoin-step::before {
    content: "";
    position: absolute;
    left: 25px;
    top: 58px;
    bottom: 2px;
    width: 2px;
    background: linear-gradient(180deg, rgba(178, 151, 80, .5), var(--line));
}

.howjoin-step:last-child::before {
    display: none;
}

/* Number node */
.howjoin-node {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(8, 35, 64, .28);
}

/* Step card */
.howjoin-card {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 1.05rem;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.25rem 1.35rem;
    transition: all .3s ease;
}

.howjoin-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.howjoin-card-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.howjoin-card p {
    margin: 0;
    font-size: .97rem;
    line-height: 1.7;
    color: var(--body-text);
}


/* =========================
   04. APPLICATION EVIDENCE
========================= */
.howjoin-evidence {
    background: var(--light-bg);
}

.howjoin-evidence .section-head {
    margin-bottom: 40px;
}

.howjoin-evidence-card {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.2rem 1.2rem;
    height: 100%;
    transition: all .25s ease;
}

.howjoin-evidence-card:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.howjoin-evidence-check {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-top: .1rem;
}

.howjoin-evidence-card p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.55;
}


/* =========================
   05. DECISION STATEMENT
========================= */
.howjoin-decision {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.howjoin-decision::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.howjoin-decision .container-xl {
    position: relative;
    z-index: 2;
}

.howjoin-decision .section-title {
    color: var(--secondary-color);
    margin-bottom: 16px;
}

/* Statement card (sentence 1, verbatim) */
.howjoin-decision-card {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.6rem;
}

.howjoin-decision-card p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: clamp(1.1rem, 1rem + .8vw, 1.4rem);
    line-height: 1.6;
    letter-spacing: -.01em;
}

/* Red emphasis (styling only — text unchanged) */
.howjoin-hl-dark {
    color: var(--primary-soft);
    background: rgba(178, 151, 80, .14);
    padding: .04em .18em;
    border-radius: .35em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.howjoin-may-lead {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: 1.08rem;
    margin: 0 0 14px;
}

/* Action chips (dark surface) */
.howjoin-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.howjoin-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--dark-border);
    border-radius: 999px;
    padding: .6rem 1.05rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .88rem;
    color: var(--secondary-color);
    transition: all .25s ease;
}

.howjoin-chip .bi {
    color: var(--primary-soft);
    font-size: 1rem;
}

.howjoin-chip:hover {
    border-color: rgba(178, 151, 80, .5);
    background: rgba(178, 151, 80, .06);
    transform: translateY(-2px);
}

/* Scope note (dark surface) */
.howjoin-note {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    margin-top: 16px;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
}

.howjoin-note>.bi {
    flex: 0 0 auto;
    color: var(--primary-soft);
    font-size: 1.2rem;
    margin-top: .15rem;
}

.howjoin-note p {
    margin: 0;
    font-weight: 600;
    color: var(--secondary-color);
    font-size: .96rem;
    line-height: 1.65;
}


/* =========================
   06. READY TO APPLY (CTA BAND)
========================= */
.howjoin-cta {
    position: relative;
    background: linear-gradient(130deg,
            var(--primary-color) 0%,
            var(--primary-dark) 55%,
            var(--primary-darker) 100%);
    color: var(--secondary-color);
    overflow: hidden;
    padding: 72px 0;
    text-align: center;
}

.howjoin-cta::before,
.howjoin-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .18);
    pointer-events: none;
}

.howjoin-cta::before {
    width: 320px;
    height: 320px;
    top: -130px;
    left: -100px;
}

.howjoin-cta::after {
    width: 420px;
    height: 420px;
    bottom: -210px;
    right: -140px;
    border-color: rgba(255, 255, 255, .12);
}

.howjoin-cta .container-xl {
    position: relative;
    z-index: 2;
}

.howjoin-cta h2 {
    color: var(--secondary-color);
    font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.4rem);
    line-height: 1.25;
    margin: 0 auto 14px;
}

.howjoin-cta p {
    color: rgba(255, 255, 255, .92);
    max-width: 620px;
    margin: 0 auto 26px;
}


/* =========================
   07. SCROLL REVEAL
   (page-specific hook — never conflicts with the
   reveal observers used on other pages)
========================= */
.howjoin-js .howjoin-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.howjoin-js .howjoin-reveal.is-visible {
    opacity: 1;
    transform: none;
}






/* CPD Start */







/* =========================
   03. THE CPD CYCLE (6 STAGES)
========================= */
.cpd-cycle {
    background: var(--secondary-color);
}

.cpd-cycle .section-head {
    margin-bottom: 40px;
}

.cpd-cycle-card {
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.4rem 1.5rem;
    height: 100%;
    transition: all .3s ease;
}

.cpd-cycle-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.cpd-cycle-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.cpd-cycle-num {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(8, 35, 64, .25);
}

.cpd-cycle-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--secondary-color);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    border: 1px solid var(--primary-tint-2);
}

.cpd-cycle-name {
    font-size: 1.1rem;
    margin: 0 0 .5rem;
}

.cpd-cycle-card p {
    margin: 0;
    font-size: .94rem;
    line-height: 1.65;
    color: var(--body-text);
}


/* =========================
   04. WHAT MAY COUNT AS CPD
========================= */
.cpd-activities {
    background: var(--light-bg);
}

.cpd-activities .section-head {
    margin-bottom: 40px;
}

/* Checklist panel */
.cpd-act-panel {
    max-width: 920px;
    margin: 0 auto;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
}

.cpd-act-item {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.05rem 1.15rem;
    height: 100%;
    transition: all .25s ease;
}

.cpd-act-item:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.cpd-act-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.cpd-act-item p {
    margin: 0;
    padding-top: .35rem;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.55;
}


/* =========================
   05. SUGGESTED CPD RECORD FIELDS
========================= */
.cpd-record {
    background: var(--secondary-color);
}

.cpd-record .section-head {
    margin-bottom: 40px;
}

/* Document-style record panel with red top accent */
.cpd-record-panel {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 30px 28px;
    overflow: hidden;
}

.cpd-record-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

/* Numbered field rows */
.cpd-field-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .85rem 1rem;
    transition: all .25s ease;
}

.cpd-field-row:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
}

.cpd-field-num {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.cpd-field-text {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.45;
}


/* =========================
   06. AUDIT AND VERIFICATION
========================= */
.cpd-audit {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.cpd-audit::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.cpd-audit .container-xl {
    position: relative;
    z-index: 2;
}

.cpd-audit .section-title {
    color: var(--secondary-color);
    margin-bottom: 16px;
}

/* Statement card (sentence 1, verbatim) */
.cpd-audit-card {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.6rem;
}

.cpd-audit-card p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: clamp(1.1rem, 1rem + .8vw, 1.4rem);
    line-height: 1.6;
    letter-spacing: -.01em;
}

/* Red emphasis (styling only — text unchanged) */
.cpd-hl-dark {
    color: var(--primary-soft);
    background: rgba(178, 151, 80, .14);
    padding: .04em .18em;
    border-radius: .35em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Obligation rows (sentence 2 clauses, verbatim) */
.cpd-obligation {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.25rem;
}

.cpd-obligation+.cpd-obligation {
    margin-top: 1rem;
}

.cpd-obligation>.bi {
    flex: 0 0 auto;
    color: var(--primary-soft);
    font-size: 1.25rem;
    margin-top: .1rem;
}

.cpd-obligation p {
    margin: 0;
    padding-top: .2rem;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: .98rem;
    line-height: 1.6;
}

/* Warning variant */
.cpd-obligation-warn {
    border-color: rgba(178, 151, 80, .35);
}

.cpd-obligation-warn>.bi {
    color: var(--primary-color);
}


/* =========================
   07. SCROLL REVEAL
   (page-specific hook — never conflicts with the
   reveal observers used on other pages)
========================= */
.cpd-js .cpd-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.cpd-js .cpd-reveal.is-visible {
    opacity: 1;
    transform: none;
}





/* Code of Professioanl Conduct */












/* =========================
   03. PURPOSE
========================= */
.cpc-purpose {
    background: var(--secondary-color);
}

.cpc-purpose .section-title {
    margin: 0;
}

.cpc-purpose-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    box-shadow: var(--shadow-red);
    margin-bottom: 16px;
}

/* Editorial statement (sentence 1, verbatim) */
.cpc-purpose-statement {
    margin: 0 0 18px;
    max-width: 640px;
    padding-left: 1.6rem;
    border-left: 4px solid var(--primary-color);
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: clamp(1.15rem, 1rem + 1vw, 1.55rem);
    line-height: 1.55;
    letter-spacing: -.01em;
}

/* Highlighter effect (styling only — text unchanged) */
.cpc-hl {
    background: linear-gradient(transparent 62%, var(--primary-tint-2) 62%);
    padding: 0 .05em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Supporting note (sentence 2, verbatim) */
.cpc-purpose-note {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    max-width: 640px;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.3rem;
}

.cpc-purpose-note>.bi {
    flex: 0 0 auto;
    color: var(--primary-dark);
    font-size: 1.25rem;
    margin-top: .15rem;
}

.cpc-purpose-note p {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
    font-size: .97rem;
    line-height: 1.65;
}


/* =========================
   04. PROFESSIONAL PRINCIPLES (NUMBERED RULES)
========================= */
.cpc-principles {
    background: var(--light-bg);
}

.cpc-principles .section-head {
    margin-bottom: 40px;
}

/* Ordered policy list */
.cpc-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 860px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.cpc-principle {
    display: flex;
    align-items: flex-start;
    gap: 1.15rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.35rem 1.4rem;
    transition: all .3s ease;
}

.cpc-principle:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}


.cpc-principle-body {
    flex: 1 1 auto;
    min-width: 0;
}

.cpc-principle-head {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin-bottom: .45rem;
}

.cpc-principle-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.cpc-principle h3 {
    font-size: 1.08rem;
    line-height: 1.35;
    margin: 0;
}

.cpc-principle p {
    margin: 0;
    padding-left: 52px;
    /* aligns under the principle name (icon 40 + gap 12) */
    font-size: .96rem;
    line-height: 1.7;
    color: var(--body-text);
}


/* =========================
   05. USE OF TITLES AND CREDENTIALS
========================= */
.cpc-titles {
    background: var(--secondary-color);
}

.cpc-titles .section-title {
    margin-bottom: 16px;
}

/* Obligation statement (sentence 1, verbatim) */
.cpc-titles-statement {
    margin: 0;
    max-width: 460px;
    padding-left: 1.5rem;
    border-left: 4px solid var(--primary-color);
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: clamp(1.15rem, 1rem + .8vw, 1.45rem);
    line-height: 1.55;
    letter-spacing: -.01em;
}

/* Prohibition panel (sentence 2 reorganized) */
.cpc-prohibit {
    background: var(--primary-tint);
    border: 1px solid var(--primary-tint-2);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.35rem 1.4rem;
    height: 100%;
}

.cpc-prohibit-lead {
    display: flex;
    align-items: center;
    gap: .55rem;
    margin: 0 0 14px;
    font-family: var(--font-head);
    font-weight: 800;
    color: var(--primary-dark);
    font-size: 1.08rem;
}

.cpc-prohibit-lead .bi {
    font-size: 1.2rem;
}

.cpc-prohibit-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .6rem;
}

.cpc-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .6rem 1.05rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .88rem;
    color: var(--ink);
    transition: all .25s ease;
}

.cpc-chip .bi {
    color: var(--primary-color);
    font-size: 1rem;
}

.cpc-chip:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}


/* =========================
   06. REPORTING CONCERNS
========================= */
.cpc-reporting {
    background: var(--light-bg);
}

.cpc-reporting .section-title {
    margin-bottom: 16px;
}

/* Statement (sentence 1, verbatim) */
.cpc-reporting-statement {
    margin: 0;
    max-width: 460px;
    padding-left: 1.5rem;
    border-left: 4px solid var(--primary-color);
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: clamp(1.15rem, 1rem + .8vw, 1.45rem);
    line-height: 1.55;
    letter-spacing: -.01em;
}

/* Note (sentence 2, verbatim) */
.cpc-reporting-note {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.35rem 1.4rem;
    box-shadow: var(--shadow-sm);
    height: 100%;
}

.cpc-reporting-note>.bi {
    flex: 0 0 auto;
    color: var(--primary-dark);
    font-size: 1.25rem;
    margin-top: .15rem;
}

.cpc-reporting-note p {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
    font-size: .98rem;
    line-height: 1.65;
}


/* =========================
   07. POSSIBLE OUTCOMES
========================= */
.cpc-outcomes {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.cpc-outcomes::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.cpc-outcomes .container-xl {
    position: relative;
    z-index: 2;
}

.cpc-outcomes .section-title {
    color: var(--secondary-color);
    margin-bottom: 22px;
}

/* Conditional statement (sentence 1 lead-in, verbatim) */
.cpc-outcomes-statement {
    max-width: 720px;
    margin: 0 auto;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.4rem 1.5rem;
}

.cpc-outcomes-statement p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: clamp(1.1rem, 1rem + .7vw, 1.3rem);
    line-height: 1.6;
    letter-spacing: -.01em;
}

/* Outcome chips (dark surface) */
.cpc-outcomes-chips {
    list-style: none;
    margin: 22px auto 0;
    padding: 0;
    max-width: 840px;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
}

.cpc-chip-dark {
    background: rgba(255, 255, 255, .03);
    border-color: var(--dark-border);
    color: var(--secondary-color);
}

.cpc-chip-dark .bi {
    color: var(--primary-soft);
}

.cpc-chip-dark:hover {
    border-color: rgba(178, 151, 80, .5);
    background: rgba(178, 151, 80, .06);
}

/* Appeal note (sentence 2, verbatim) */
.cpc-appeal {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    max-width: 640px;
    margin: 22px auto 0;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.3rem;
}

.cpc-appeal>.bi {
    flex: 0 0 auto;
    color: var(--primary-soft);
    font-size: 1.25rem;
}

.cpc-appeal p {
    margin: 0;
    font-weight: 700;
    color: var(--secondary-color);
    font-size: .98rem;
    line-height: 1.55;
}


/* =========================
   08. SCROLL REVEAL
   (page-specific hook — never conflicts with the
   reveal observers used on other pages)
========================= */
.cpc-js .cpc-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.cpc-js .cpc-reveal.is-visible {
    opacity: 1;
    transform: none;
}








/* Corportate Trainning Solutions */











/* =========================
   03. FROM TRAINING ACTIVITY TO CAPABILITY IMPROVEMENT
========================= */
.cls-approach {
    background: var(--secondary-color);
}

.cls-approach .section-title {
    margin-bottom: 18px;
}

/* Editorial statement (paragraph 1, verbatim) */
.cls-statement {
    margin: 0;
    max-width: 480px;
    padding-left: 1.5rem;
    border-left: 4px solid var(--primary-color);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--body-text);
}

.cls-statement span {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
}

/* Highlighter effect (styling only — text unchanged) */
.cls-hl {
    background: linear-gradient(transparent 62%, var(--primary-tint-2) 62%);
    padding: 0 .05em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Result panel (paragraph 2 reorganized) */
.cls-result-panel {
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
}

.cls-result-lead {
    margin: 0 0 14px;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: 1.02rem;
}

.cls-result-row {
    display: flex;
    align-items: center;
    gap: .95rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: .95rem 1.1rem;
    transition: all .25s ease;
}

.cls-result-row+.cls-result-row {
    margin-top: .65rem;
}

.cls-result-row:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateX(4px);
}

.cls-result-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.cls-result-row p {
    margin: 0;
    padding-top: .25rem;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .96rem;
    line-height: 1.45;
}


/* =========================
   04. CORPORATE SOLUTION AREAS
========================= */
.cls-areas {
    background: var(--light-bg);
}

.cls-areas .section-head {
    margin-bottom: 40px;
}

/* Numbered area row (names only — no invented descriptions) */
.cls-area-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.05rem 1.2rem;
    height: 100%;
    transition: all .3s ease;
}

.cls-area-row:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.cls-area-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 12px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all .3s ease;
}

.cls-area-row:hover .cls-area-icon {
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    box-shadow: 0 10px 20px rgba(8, 35, 64, .25);
}

.cls-area-name {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .97rem;
    line-height: 1.45;
}

.cls-area-num {
    flex: 0 0 auto;
    font-family: var(--font-head);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--primary-dark);
    opacity: .35;
}


/* =========================
   05. WHAT CAN BE CUSTOMIZED
========================= */
.cls-custom {
    background: var(--secondary-color);
}

.cls-custom .section-head {
    margin-bottom: 36px;
}

/* Checklist panel with red top accent */
.cls-custom-panel {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 28px;
    overflow: hidden;
}

.cls-custom-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.cls-custom-item {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.05rem 1.15rem;
    height: 100%;
    transition: all .25s ease;
}

.cls-custom-item:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.cls-custom-check {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-top: .1rem;
}

.cls-custom-item p {
    margin: 0;
    padding-top: .3rem;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.55;
}


/* =========================
   06. POSSIBLE DELIVERABLES
========================= */
.cls-deliverables {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.cls-deliverables::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.cls-deliverables .container-xl {
    position: relative;
    z-index: 2;
}

.cls-deliverables .section-title {
    color: var(--secondary-color);
}

/* Deliverable rows (dark surface) */
.cls-del-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.2rem;
    height: 100%;
    transition: all .3s ease;
}

.cls-del-row:hover {
    border-color: rgba(178, 151, 80, .5);
    background: rgba(178, 151, 80, .06);
    transform: translateY(-2px);
}

.cls-del-icon {
    flex: 0 0 auto;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    background: rgba(178, 151, 80, .16);
    color: var(--primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.cls-del-row p {
    margin: 0;
    padding-top: .4rem;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--secondary-color);
    font-size: .97rem;
    line-height: 1.5;
}


/* =========================
   07. START WITH A FOCUSED CONVERSATION (CTA BAND)
========================= */
.cls-cta {
    position: relative;
    background: linear-gradient(130deg,
            var(--primary-color) 0%,
            var(--primary-dark) 55%,
            var(--primary-darker) 100%);
    color: var(--secondary-color);
    overflow: hidden;
    padding: 72px 0;
    text-align: center;
}

.cls-cta::before,
.cls-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .18);
    pointer-events: none;
}

.cls-cta::before {
    width: 320px;
    height: 320px;
    top: -130px;
    left: -100px;
}

.cls-cta::after {
    width: 420px;
    height: 420px;
    bottom: -210px;
    right: -140px;
    border-color: rgba(255, 255, 255, .12);
}

.cls-cta .container-xl {
    position: relative;
    z-index: 2;
}

.cls-cta h2 {
    color: var(--secondary-color);
    font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.4rem);
    line-height: 1.25;
    margin: 0 auto 20px;
}

.cls-cta-lead {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: 1.12rem;
    margin: 0 0 16px;
}

/* Conversation chips on the red band */
.cls-chips {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    max-width: 760px;
}

.cls-chip {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    padding: .6rem 1.15rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .88rem;
    color: var(--secondary-color);
    transition: all .25s ease;
}

.cls-chip:hover {
    background: rgba(255, 255, 255, .22);
    transform: translateY(-2px);
}

.cls-cta-note {
    color: rgba(255, 255, 255, .92);
    max-width: 560px;
    margin: 20px auto 26px;
}


/* =========================
   08. SCROLL REVEAL
   (page-specific hook — never conflicts with the
   reveal observers used on other pages)
========================= */
.cls-js .cls-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.cls-js .cls-reveal.is-visible {
    opacity: 1;
    transform: none;
}







/* Customized Trainnig */









/* =========================
   03. OUR CUSTOMIZATION PROCESS (7 STAGES)
========================= */
.custom-training-process {
    background: var(--secondary-color);
}

.custom-training-process .section-head {
    margin-bottom: 40px;
}

.custom-training-stage {
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.4rem 1.5rem;
    height: 100%;
    transition: all .3s ease;
}

.custom-training-stage:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.custom-training-stage-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}



.custom-training-stage-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--secondary-color);
    color: var(--primary-dark);
    border: 1px solid var(--primary-tint-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.custom-training-stage-name {
    font-size: 1.1rem;
    margin: 0 0 .5rem;
}

.custom-training-stage p {
    margin: 0;
    font-size: .94rem;
    line-height: 1.65;
    color: var(--body-text);
}


/* =========================
   04. WHAT WE NEED FROM THE CLIENT
========================= */
.custom-training-needs {
    background: var(--light-bg);
}

.custom-training-needs .section-head {
    margin-bottom: 36px;
}

/* Checklist panel with red top accent */
.custom-training-needs-panel {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.custom-training-needs-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.custom-training-need {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.05rem 1.15rem;
    height: 100%;
    transition: all .25s ease;
}

.custom-training-need:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.custom-training-need-check {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-top: .1rem;
}

.custom-training-need p {
    margin: 0;
    padding-top: .3rem;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.55;
}


/* =========================
   05. CUSTOMIZATION BOUNDARIES
========================= */
.custom-training-boundaries {
    background: var(--secondary-color);
}

.custom-training-boundaries .section-title {
    margin-bottom: 16px;
}

/* Editorial statement (sentence 1, verbatim) */
.custom-training-statement {
    margin: 0;
    max-width: 480px;
    padding-left: 1.5rem;
    border-left: 4px solid var(--primary-color);
    font-size: 1rem;
    line-height: 1.8;
    color: var(--body-text);
}

.custom-training-statement span {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
}

/* Highlighter effect (styling only — text unchanged) */
.custom-training-hl {
    background: linear-gradient(transparent 62%, var(--primary-tint-2) 62%);
    padding: 0 .05em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Compliance warning strip (sentence 2, verbatim) */
.custom-training-boundary-note {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: var(--primary-tint);
    border: 1px solid var(--primary-tint-2);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.35rem 1.4rem;
}

.custom-training-boundary-note>.bi {
    flex: 0 0 auto;
    color: var(--primary-color);
    font-size: 1.3rem;
    margin-top: .15rem;
}

.custom-training-boundary-note p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: 1.02rem;
    line-height: 1.6;
}


/* =========================
   06. PROPOSAL INFORMATION
========================= */
.custom-training-proposal {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.custom-training-proposal::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.custom-training-proposal .container-xl {
    position: relative;
    z-index: 2;
}

.custom-training-proposal .section-title {
    color: var(--secondary-color);
}

/* Numbered information panel */
.custom-training-proposal-panel {
    max-width: 920px;
    margin: 0 auto;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-lg);
    padding: 26px;
}

.custom-training-prop-row {
    display: flex;
    align-items: center;
    gap: .95rem;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    padding: 1.05rem 1.15rem;
    height: 100%;
    transition: all .25s ease;
}

.custom-training-prop-row:hover {
    border-color: rgba(178, 151, 80, .5);
    background: rgba(178, 151, 80, .06);
    transform: translateX(4px);
}

.custom-training-prop-num {
    flex: 0 0 auto;
    width: 38px;
    height: 38px;
    border-radius: 11px;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 8px 18px rgba(8, 35, 64, .25);
}

.custom-training-prop-text {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: .96rem;
    line-height: 1.5;
}


/* =========================
   07. SCROLL REVEAL
   (page-specific hook — never conflicts with the
   reveal observers used on other pages)
========================= */
.custom-training-js .custom-training-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.custom-training-js .custom-training-reveal.is-visible {
    opacity: 1;
    transform: none;
}






/* functional Academies */








/* =========================
   03. WHAT IS A FUNCTIONAL ACADEMY
========================= */
.functional-academies-what {
    background: var(--secondary-color);
}

.functional-academies-what .section-title {
    margin-bottom: 18px;
}

/* Editorial statement (sentence 1, verbatim) */
.functional-academies-statement {
    margin: 0;
    max-width: 420px;
    padding-left: 1.5rem;
    border-left: 4px solid var(--primary-color);
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: clamp(1.2rem, 1rem + 1vw, 1.55rem);
    line-height: 1.55;
    letter-spacing: -.01em;
}

/* Highlighter effect (styling only — text unchanged) */
.functional-academies-hl {
    background: linear-gradient(transparent 62%, var(--primary-tint-2) 62%);
    padding: 0 .05em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Connect panel (sentence 2 reorganized) */
.functional-academies-connect-panel {
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
}

.functional-academies-connect-lead {
    margin: 0 0 14px;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: 1.02rem;
}

.functional-academies-connect-item {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: .9rem 1.05rem;
    height: 100%;
    transition: all .25s ease;
}

.functional-academies-connect-item:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.functional-academies-connect-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.functional-academies-connect-item p {
    margin: 0;
    padding-top: .25rem;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .93rem;
    line-height: 1.45;
}


/* =========================
   04. POSSIBLE ACADEMIES
========================= */
.functional-academies-list {
    background: var(--light-bg);
}

.functional-academies-list .section-head {
    margin-bottom: 40px;
}

/* Academy card — names only, no invented descriptions */
.functional-academies-card {
    position: relative;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.4rem;
    height: 100%;
    overflow: hidden;
    transition: all .3s ease;
}

.functional-academies-card::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, var(--primary-color), var(--primary-darker));
    transition: height .35s ease;
}

.functional-academies-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.functional-academies-card:hover::before {
    height: 100%;
}

.functional-academies-card-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.functional-academies-card-num {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: .9rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(8, 35, 64, .25);
}

.functional-academies-card-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.functional-academies-card-name {
    font-size: 1.02rem;
    line-height: 1.4;
    margin: 0;
}


/* =========================
   05. CORE ACADEMY COMPONENTS
========================= */
.functional-academies-components {
    background: var(--secondary-color);
}

.functional-academies-components .section-head {
    margin-bottom: 36px;
}

/* Checklist panel with red top accent */
.functional-academies-components-panel {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.functional-academies-components-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.functional-academies-component {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.05rem 1.15rem;
    height: 100%;
    transition: all .25s ease;
}

.functional-academies-component:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.functional-academies-component-check {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-top: .1rem;
}

.functional-academies-component p {
    margin: 0;
    padding-top: .3rem;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.55;
}


/* =========================
   06. TYPICAL DEVELOPMENT PHASES (5-STEP PROCESS)
========================= */
.functional-academies-phases {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.functional-academies-phases::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.functional-academies-phases .container-xl {
    position: relative;
    z-index: 2;
}

.functional-academies-phases .section-title {
    color: var(--secondary-color);
}

/* Phase step card */
.functional-academies-phase {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.3rem 1.4rem;
    height: 100%;
    transition: all .3s ease;
}

.functional-academies-phase:hover {
    transform: translateY(-5px);
    border-color: rgba(178, 151, 80, .5);
    background: rgba(178, 151, 80, .06);
}

.functional-academies-phase-num {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(8, 35, 64, .28);
    margin-bottom: 16px;
}

.functional-academies-phase-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(178, 151, 80, .16);
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    margin-bottom: 14px;
}

.functional-academies-phase p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: .97rem;
    line-height: 1.55;
}


/* =========================
   07. BUILD FOR ADOPTION
========================= */
.functional-academies-adoption {
    background: var(--light-bg);
}

.functional-academies-adoption .section-head {
    margin-bottom: 36px;
}

.functional-academies-adoption-lead {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: 1.12rem;
    margin: 0;
}

/* Adoption factor tiles */
.functional-academies-tile {
    display: flex;
    align-items: center;
    gap: .95rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.2rem;
    height: 100%;
    transition: all .25s ease;
}

.functional-academies-tile:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.functional-academies-tile-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
    box-shadow: 0 10px 20px rgba(8, 35, 64, .25);
}

.functional-academies-tile p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .94rem;
    line-height: 1.5;
}

/* Documented CTA row */
.functional-academies-cta-row {
    margin-top: 40px;
}


/* =========================
   08. SCROLL REVEAL
   (page-specific hook — never conflicts with the
   reveal observers used on other pages)
========================= */
.functional-academies-js .functional-academies-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.functional-academies-js .functional-academies-reveal.is-visible {
    opacity: 1;
    transform: none;
}







/* Leadership Developement */









/* =========================
   03. PATHWAYS BY LEADERSHIP LEVEL (5 LEVEL CARDS)
========================= */
.leadership-development-pathways {
    background: var(--secondary-color);
}

.leadership-development-pathways .section-head {
    margin-bottom: 40px;
}

.leadership-development-level {
    position: relative;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.4rem 1.5rem;
    height: 100%;
    overflow: hidden;
    transition: all .3s ease;
}

.leadership-development-level::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-darker));
    transition: width .35s ease;
}

.leadership-development-level:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.leadership-development-level:hover::before {
    width: 100%;
}

.leadership-development-level-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}



.leadership-development-level-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--secondary-color);
    color: var(--primary-dark);
    border: 1px solid var(--primary-tint-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.leadership-development-level-name {
    font-size: 1.1rem;
    line-height: 1.35;
    margin: 0 0 14px;
}

/* Focus chips inside each level card */
.leadership-development-focus {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: .45rem;
}

.leadership-development-focus-chip {
    display: inline-flex;
    align-items: center;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .4rem .85rem;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .82rem;
    color: var(--body-text);
    transition: all .25s ease;
}

.leadership-development-level:hover .leadership-development-focus-chip {
    border-color: var(--primary-tint-2);
    color: var(--ink);
}


/* =========================
   04. LEARNING METHODS
========================= */
.leadership-development-methods {
    background: var(--light-bg);
}

.leadership-development-methods .section-head {
    margin-bottom: 36px;
}

/* Checklist panel with red top accent */
.leadership-development-methods-panel {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.leadership-development-methods-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.leadership-development-method {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.05rem 1.15rem;
    height: 100%;
    transition: all .25s ease;
}

.leadership-development-method:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.leadership-development-method-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.leadership-development-method p {
    margin: 0;
    padding-top: .3rem;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.55;
}


/* =========================
   05. MEASURING LEADERSHIP DEVELOPMENT
========================= */
.leadership-development-measuring {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.leadership-development-measuring::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.leadership-development-measuring .container-xl {
    position: relative;
    z-index: 2;
}

.leadership-development-measuring .section-title {
    color: var(--secondary-color);
}

.leadership-development-measuring-lead {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--primary-soft);
    font-size: 1.1rem;
    margin: 0;
}

/* Measurement area chips (dark surface) */
.leadership-development-measure-chips {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    max-width: 760px;
}

.leadership-development-measure-chip {
    display: inline-flex;
    align-items: center;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 999px;
    padding: .65rem 1.15rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .9rem;
    color: var(--secondary-color);
    transition: all .25s ease;
}

.leadership-development-measure-chip:hover {
    border-color: rgba(178, 151, 80, .5);
    background: rgba(178, 151, 80, .06);
    transform: translateY(-2px);
}

/* Attribution caution note (sentence 2, verbatim) */
.leadership-development-caution {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    max-width: 680px;
    margin: 26px auto 0;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.2rem 1.3rem;
}

.leadership-development-caution>.bi {
    flex: 0 0 auto;
    color: var(--primary-soft);
    font-size: 1.25rem;
    margin-top: .15rem;
}

.leadership-development-caution p {
    margin: 0;
    font-weight: 600;
    color: var(--secondary-color);
    font-size: .97rem;
    line-height: 1.65;
}


/* =========================
   06. SCROLL REVEAL
   (page-specific hook — never conflicts with the
   reveal observers used on other pages)
========================= */
.leadership-development-js .leadership-development-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.leadership-development-js .leadership-development-reveal.is-visible {
    opacity: 1;
    transform: none;
}





/* Delivery and evaluation approch */







/* =========================
   03. DELIVERY OPTIONS (TABLE + MOBILE CARDS)
========================= */
.delivery-evaluation-options {
    background: var(--secondary-color);
}

.delivery-evaluation-options .section-head {
    margin-bottom: 40px;
}

/* ----- Desktop table shell ----- */
.delivery-evaluation-table-shell {
    max-width: 1020px;
    margin: 0 auto;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
}

.table-responsive{
    overflow-y: hidden;
}

/* Scoped Bootstrap table overrides */
.delivery-evaluation-table {
    --bs-table-bg: transparent;
    margin: 0;
}

.delivery-evaluation-table thead th {
    background: var(--dark-bg);
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .78rem;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: 1.05rem 1.4rem;
    border: 0;
    white-space: nowrap;
}

.delivery-evaluation-table tbody th,
.delivery-evaluation-table tbody td {
    padding: 1.2rem 1.4rem;
    border-color: var(--line);
    vertical-align: top;
    font-size: .95rem;
    line-height: 1.65;
    color: var(--body-text);
}

.delivery-evaluation-table tbody th {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .98rem;
    white-space: nowrap;
}

.delivery-evaluation-table tbody tr {
    transition: background .25s ease;
}

.delivery-evaluation-table tbody tr:hover {
    background: var(--primary-tint);
}

.delivery-evaluation-table tbody tr:last-child th,
.delivery-evaluation-table tbody tr:last-child td {
    border-bottom: 0;
}

/* ----- Mobile mode cards ----- */
.delivery-evaluation-mode-card {
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.3rem;
    margin-bottom: 16px;
    transition: all .3s ease;
}

.delivery-evaluation-mode-card:last-child {
    margin-bottom: 0;
}

.delivery-evaluation-mode-card:hover {
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.delivery-evaluation-mode-head {
    display: flex;
    align-items: center;
    gap: .85rem;
    margin-bottom: 14px;
}

.delivery-evaluation-mode-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    box-shadow: 0 10px 20px rgba(8, 35, 64, .25);
}

.delivery-evaluation-mode-name {
    font-size: 1.08rem;
    line-height: 1.3;
    margin: 0;
}

.delivery-evaluation-mode-field {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--light-bg);
    padding: .85rem 1rem;
}

.delivery-evaluation-mode-field+.delivery-evaluation-mode-field {
    margin-top: .65rem;
}

.delivery-evaluation-mode-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-head);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}

.delivery-evaluation-mode-field p {
    margin: 0;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--body-text);
}

.delivery-evaluation-mode-field-tint {
    background: var(--primary-tint);
    border-color: var(--primary-tint-2);
}

.delivery-evaluation-mode-field-tint .delivery-evaluation-mode-label {
    color: var(--primary-dark);
}

.delivery-evaluation-mode-field-tint p {
    color: var(--ink);
    font-weight: 500;
}


/* =========================
   04. FACILITATION STANDARDS
========================= */
.delivery-evaluation-standards {
    background: var(--light-bg);
}

.delivery-evaluation-standards .section-head {
    margin-bottom: 36px;
}

/* Checklist panel with red top accent */
.delivery-evaluation-standards-panel {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.delivery-evaluation-standards-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.delivery-evaluation-standard {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.05rem 1.15rem;
    height: 100%;
    transition: all .25s ease;
}

.delivery-evaluation-standard:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.delivery-evaluation-standard-check {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-top: .1rem;
}

.delivery-evaluation-standard p {
    margin: 0;
    padding-top: .3rem;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.55;
}


/* =========================
   05. EVALUATION FRAMEWORK (5 AREAS)
========================= */
.delivery-evaluation-framework {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.delivery-evaluation-framework::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.delivery-evaluation-framework .container-xl {
    position: relative;
    z-index: 2;
}

.delivery-evaluation-framework .section-title {
    color: var(--secondary-color);
}

/* Framework area card */
.delivery-evaluation-area {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.3rem 1.4rem;
    height: 100%;
    transition: all .3s ease;
}

.delivery-evaluation-area:hover {
    transform: translateY(-5px);
    border-color: rgba(178, 151, 80, .5);
    background: rgba(178, 151, 80, .06);
}

.delivery-evaluation-area-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}



.delivery-evaluation-area-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: rgba(178, 151, 80, .16);
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.delivery-evaluation-area p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: .98rem;
    line-height: 1.55;
}


/* =========================
   06. REPORTING
========================= */
.delivery-evaluation-reporting {
    background: var(--secondary-color);
}

.delivery-evaluation-reporting .section-head {
    margin-bottom: 36px;
}

.delivery-evaluation-reporting-lead {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: 1.12rem;
    margin: 0;
}

/* Report content chips */
.delivery-evaluation-report-chips {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    max-width: 820px;
}

.delivery-evaluation-report-chip {
    display: inline-flex;
    align-items: center;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .65rem 1.15rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .9rem;
    color: var(--ink);
    transition: all .25s ease;
}

.delivery-evaluation-report-chip:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

/* Verbatim caution strip (sentence 2) */
.delivery-evaluation-caution {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    max-width: 680px;
    margin: 26px auto 0;
    background: var(--primary-tint);
    border: 1px solid var(--primary-tint-2);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.3rem;
}

.delivery-evaluation-caution>.bi {
    flex: 0 0 auto;
    color: var(--primary-color);
    font-size: 1.25rem;
}

.delivery-evaluation-caution p {
    margin: 0;
    font-weight: 700;
    color: var(--ink);
    font-size: .98rem;
    line-height: 1.55;
}


/* =========================
   07. SCROLL REVEAL
   (page-specific hook — never conflicts with the
   reveal observers used on other pages)
========================= */
.delivery-evaluation-js .delivery-evaluation-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.delivery-evaluation-js .delivery-evaluation-reveal.is-visible {
    opacity: 1;
    transform: none;
}






/* Request a corporate trainning request */









/* =========================
   03. PROPOSAL REQUEST FORM
========================= */
.corporate-proposal-form-section {
    background: var(--secondary-color);
}

.corporate-proposal-form-section .section-head {
    margin-bottom: 36px;
}

/* Form card with red top accent */
.corporate-proposal-form {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 34px 30px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.corporate-proposal-form::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

/* Labels */
.corporate-proposal-form .form-label {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .92rem;
    margin-bottom: .45rem;
}

/* Text / file inputs */
.corporate-proposal-form .form-control {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--light-bg);
    color: var(--ink);
    padding: .75rem 1rem;
    font-size: .95rem;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.corporate-proposal-form .form-control::placeholder {
    color: var(--muted);
}

.corporate-proposal-form .form-control:focus {
    border-color: var(--primary-color);
    background: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(178, 151, 80, .12);
}

.corporate-proposal-form textarea.form-control {
    min-height: 110px;
    resize: vertical;
    line-height: 1.65;
}

/* Checkbox (consent) */
.corporate-proposal-consent-box {
    background: var(--primary-tint);
    border: 1px solid var(--primary-tint-2);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
}

.corporate-proposal-consent {
    margin: 0;
}

.corporate-proposal-form .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .15rem;
    border: 1.5px solid var(--line);
    border-radius: .4rem;
    transition: all .2s ease;
}

.corporate-proposal-form .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.corporate-proposal-form .form-check-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 0, 0, .15);
}

.corporate-proposal-form .form-check-label {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.55;
}

/* Submit area */
.corporate-proposal-actions {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}


/* =========================
   04. WHAT HAPPENS NEXT (TIMELINE)
========================= */
.corporate-proposal-next {
    background: var(--light-bg);
}

.corporate-proposal-next .section-head {
    margin-bottom: 44px;
}

/* Ordered vertical timeline */
.corporate-proposal-timeline {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 800px;
}

.corporate-proposal-step {
    position: relative;
    display: flex;
    gap: 1.25rem;
    padding-bottom: 26px;
}

.corporate-proposal-step:last-child {
    padding-bottom: 0;
}

/* Connecting rail */
.corporate-proposal-step::before {
    content: "";
    position: absolute;
    left: 25px;
    top: 58px;
    bottom: 2px;
    width: 2px;
    background: linear-gradient(180deg, rgba(178, 151, 80, .5), var(--line));
}

.corporate-proposal-step:last-child::before {
    display: none;
}

/* Number node */
.corporate-proposal-node {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(8, 35, 64, .28);
}

/* Step card */
.corporate-proposal-card {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 1.05rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.25rem;
    transition: all .3s ease;
}

.corporate-proposal-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.corporate-proposal-card-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.corporate-proposal-card p {
    margin: 0;
    font-size: .97rem;
    line-height: 1.7;
    color: var(--body-text);
}


/* =========================
   05. RESPONSE STATEMENT
========================= */
.corporate-proposal-response {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.corporate-proposal-response::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.corporate-proposal-response .container-xl {
    position: relative;
    z-index: 2;
}

.corporate-proposal-response .section-title {
    color: var(--secondary-color);
}

/* Statement card (sentence 1, verbatim) */
.corporate-proposal-response-card {
    max-width: 720px;
    margin: 0 auto;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.6rem;
}

.corporate-proposal-response-card p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: clamp(1.1rem, 1rem + .8vw, 1.4rem);
    line-height: 1.6;
    letter-spacing: -.01em;
}

/* Red emphasis (styling only — text unchanged) */
.corporate-proposal-hl-dark {
    color: var(--primary-soft);
    background: rgba(178, 151, 80, .14);
    padding: .04em .18em;
    border-radius: .35em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Upload caution note (sentence 2, verbatim) */
.corporate-proposal-response-note {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    max-width: 720px;
    margin: 18px auto 0;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    padding: 1.2rem 1.3rem;
}

.corporate-proposal-response-note>.bi {
    flex: 0 0 auto;
    color: var(--primary-soft);
    font-size: 1.25rem;
    margin-top: .15rem;
}

.corporate-proposal-response-note p {
    margin: 0;
    font-weight: 600;
    color: var(--secondary-color);
    font-size: .97rem;
    line-height: 1.65;
}


/* =========================
   06. SCROLL REVEAL
   (page-specific hook — never conflicts with the
   reveal observers used on other pages)
========================= */
.corporate-proposal-js .corporate-proposal-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.corporate-proposal-js .corporate-proposal-reveal.is-visible {
    opacity: 1;
    transform: none;
}






/* Individual Professional Developement */






/* =========================
   03. DEVELOPMENT FOR REAL CAREER MOMENTS (6 CARDS)
========================= */
.individual-development-moments {
    background: var(--light-bg);
}

.individual-development-moments .section-head {
    margin-bottom: 40px;
}

.individual-development-moment {
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.4rem;
    height: 100%;
    transition: all .3s ease;
}

.individual-development-moment:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.individual-development-moment-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.individual-development-moment-num {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(8, 35, 64, .25);
}

.individual-development-moment-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.individual-development-moment p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .98rem;
    line-height: 1.6;
}


/* =========================
   04. LEARNING FORMATS
========================= */
.individual-development-formats {
    background: var(--secondary-color);
}

.individual-development-formats .section-head {
    margin-bottom: 36px;
}

/* Formats panel with red top accent */
.individual-development-formats-wrap {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.individual-development-formats-wrap::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.individual-development-formats-list {
    margin: 0;
}

.individual-development-format {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.05rem 1.15rem;
    height: 100%;
    transition: all .25s ease;
}

.individual-development-format:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.individual-development-format-check {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.individual-development-format p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.5;
}


/* =========================
   05. HOW TO CHOOSE
========================= */
.individual-development-choose {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.individual-development-choose::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.individual-development-choose .container-xl {
    position: relative;
    z-index: 2;
}

.individual-development-choose .section-title {
    color: var(--secondary-color);
}

/* Statement card (sentence 1, verbatim) */
.individual-development-choose-statement {
    max-width: 640px;
    margin: 0 auto;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.6rem;
}

.individual-development-choose-statement p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: clamp(1.2rem, 1rem + 1vw, 1.6rem);
    line-height: 1.55;
    letter-spacing: -.01em;
    text-align: center;
}

/* Red emphasis (styling only — text unchanged) */
.individual-development-hl-dark {
    color: var(--primary-soft);
    background: rgba(178, 151, 80, .14);
    padding: .04em .18em;
    border-radius: .35em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.individual-development-choose-review {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--primary-soft);
    font-size: 1.08rem;
    text-align: center;
    margin: 26px 0 14px;
}

/* Review chips (dark surface) */
.individual-development-choose-chips {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    max-width: 760px;
}

.individual-development-choose-chip {
    display: inline-flex;
    align-items: center;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 999px;
    padding: .65rem 1.15rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .88rem;
    color: var(--secondary-color);
    transition: all .25s ease;
}

.individual-development-choose-chip:hover {
    border-color: rgba(178, 151, 80, .5);
    background: rgba(178, 151, 80, .06);
    transform: translateY(-2px);
}

/* Verbatim note (sentence 3) */
.individual-development-choose-note {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    max-width: 640px;
    margin: 26px auto 0;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    padding: 1.2rem 1.3rem;
}

.individual-development-choose-note>.bi {
    flex: 0 0 auto;
    color: var(--primary-soft);
    font-size: 1.25rem;
    margin-top: .15rem;
}

.individual-development-choose-note p {
    margin: 0;
    font-weight: 600;
    color: var(--secondary-color);
    font-size: .97rem;
    line-height: 1.65;
}


/* =========================
   06. COMPLETION AND RECOGNITION (CLOSING BAND)
========================= */
.individual-development-cta {
    position: relative;
    background: linear-gradient(130deg,
            var(--primary-color) 0%,
            var(--primary-dark) 55%,
            var(--primary-darker) 100%);
    color: var(--secondary-color);
    overflow: hidden;
    padding: 72px 0;
    text-align: center;
}

.individual-development-cta::before,
.individual-development-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .18);
    pointer-events: none;
}

.individual-development-cta::before {
    width: 320px;
    height: 320px;
    top: -130px;
    left: -100px;
}

.individual-development-cta::after {
    width: 420px;
    height: 420px;
    bottom: -210px;
    right: -140px;
    border-color: rgba(255, 255, 255, .12);
}

.individual-development-cta .container-xl {
    position: relative;
    z-index: 2;
}

.individual-development-cta h2 {
    color: var(--secondary-color);
    font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.4rem);
    line-height: 1.25;
    margin: 0 auto 18px;
}

.individual-development-cta p {
    color: rgba(255, 255, 255, .94);
    max-width: 680px;
    margin: 0 auto 12px;
}

.individual-development-cta strong {
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
}


/* =========================
   07. SCROLL REVEAL
   (page-specific hook — never conflicts with the
   reveal observers used on other pages)
========================= */
.individual-development-js .individual-development-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.individual-development-js .individual-development-reveal.is-visible {
    opacity: 1;
    transform: none;
}






/* short Courses */








/* =========================
   03. WHAT TO EXPECT
========================= */
.short-courses-expect {
    background: var(--secondary-color);
}

.short-courses-expect .section-head {
    margin-bottom: 36px;
}

/* Checklist panel with red top accent */
.short-courses-expect-panel {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.short-courses-expect-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.short-courses-expect-item {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.05rem 1.15rem;
    height: 100%;
    transition: all .25s ease;
}

.short-courses-expect-item:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.short-courses-expect-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.short-courses-expect-item p {
    margin: 0;
    padding-top: .3rem;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.55;
}


/* =========================
   04. SUGGESTED CATEGORIES
========================= */
.short-courses-categories {
    background: var(--light-bg);
}

.short-courses-categories .section-head {
    margin-bottom: 40px;
}

/* Category tile — names only, no invented descriptions */
.short-courses-category {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.3rem;
    height: 100%;
    overflow: hidden;
    transition: all .3s ease;
}

.short-courses-category:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.short-courses-category-num {
    font-family: var(--font-head);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--primary-dark);
    opacity: .4;
    margin-bottom: .8rem;
}

.short-courses-category-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    transition: all .3s ease;
}

.short-courses-category:hover .short-courses-category-icon {
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    box-shadow: 0 10px 20px rgba(8, 35, 64, .25);
}

.short-courses-category p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .96rem;
    line-height: 1.5;
}


/* =========================
   05. COURSE CARD CONTENT
========================= */
.short-courses-card {
    background: var(--secondary-color);
}

.short-courses-card .section-head {
    margin-bottom: 36px;
}

/* Spec panel with red top accent */
.short-courses-card-panel {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.short-courses-card-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.short-courses-card-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .85rem 1rem;
    transition: all .25s ease;
}

.short-courses-card-row:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
}

.short-courses-card-row+.short-courses-card-row {
    margin-top: .7rem;
}

.short-courses-card-num {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.short-courses-card-text {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.45;
}


/* =========================
   06. QUALITY DISTINCTION (CLOSING BAND)
========================= */
.short-courses-cta {
    position: relative;
    background: linear-gradient(130deg,
            var(--primary-color) 0%,
            var(--primary-dark) 55%,
            var(--primary-darker) 100%);
    color: var(--secondary-color);
    overflow: hidden;
    padding: 72px 0;
    text-align: center;
}

.short-courses-cta::before,
.short-courses-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .18);
    pointer-events: none;
}

.short-courses-cta::before {
    width: 320px;
    height: 320px;
    top: -130px;
    left: -100px;
}

.short-courses-cta::after {
    width: 420px;
    height: 420px;
    bottom: -210px;
    right: -140px;
    border-color: rgba(255, 255, 255, .12);
}

.short-courses-cta .container-xl {
    position: relative;
    z-index: 2;
}

.short-courses-cta h2 {
    color: var(--secondary-color);
    font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.4rem);
    line-height: 1.25;
    margin: 0 auto 18px;
}

.short-courses-cta p {
    color: rgba(255, 255, 255, .94);
    max-width: 680px;
    margin: 0 auto 12px;
}

.short-courses-cta strong {
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
}


/* =========================
   07. SCROLL REVEAL
   (page-specific hook — never conflicts with the
   reveal observers used on other pages)
========================= */
.short-courses-js .short-courses-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.short-courses-js .short-courses-reveal.is-visible {
    opacity: 1;
    transform: none;
}






/* Porfessional Masterclass */








/* =========================
   03. DESIGNED FOR (AUDIENCE CARDS)
========================= */
.professional-masterclasses-designed {
    background: var(--light-bg);
}

.professional-masterclasses-designed .section-head {
    margin-bottom: 40px;
}

.professional-masterclasses-audience {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.4rem;
    height: 100%;
    overflow: hidden;
    transition: all .3s ease;
}

.professional-masterclasses-audience::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-darker));
    transition: width .35s ease;
}

.professional-masterclasses-audience {
    position: relative;
}

.professional-masterclasses-audience:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.professional-masterclasses-audience:hover::before {
    width: 100%;
}

.professional-masterclasses-audience-icon {
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 14px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    transition: all .3s ease;
}

.professional-masterclasses-audience:hover .professional-masterclasses-audience-icon {
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    box-shadow: 0 12px 24px rgba(178, 151, 80, .3);
}

.professional-masterclasses-audience p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .98rem;
    line-height: 1.6;
}


/* =========================
   04. MASTERCLASS EXPERIENCE
========================= */
.professional-masterclasses-experience {
    background: var(--secondary-color);
}

.professional-masterclasses-experience .section-head {
    margin-bottom: 36px;
}

/* Experience panel with red top accent */
.professional-masterclasses-experience-panel {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.professional-masterclasses-experience-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.professional-masterclasses-experience-item {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.05rem 1.15rem;
    height: 100%;
    transition: all .25s ease;
}

.professional-masterclasses-experience-item:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.professional-masterclasses-experience-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.professional-masterclasses-experience-item p {
    margin: 0;
    padding-top: .3rem;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.55;
}


/* =========================
   05. SPEAKER INFORMATION
========================= */
.professional-masterclasses-speaker {
    background: var(--light-bg);
}

.professional-masterclasses-speaker .section-title {
    margin-bottom: 16px;
}

/* Editorial statement (sentence 1, verbatim) */
.professional-masterclasses-statement {
    margin: 0;
    max-width: 480px;
    padding-left: 1.5rem;
    border-left: 4px solid var(--primary-color);
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: clamp(1.15rem, 1rem + .9vw, 1.5rem);
    line-height: 1.6;
    letter-spacing: -.01em;
}

/* Highlighter effect (styling only — text unchanged) */
.professional-masterclasses-hl {
    background: linear-gradient(transparent 62%, var(--primary-tint-2) 62%);
    padding: 0 .05em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Caution note (sentence 2, verbatim) */
.professional-masterclasses-speaker-note {
    display: flex;
    align-items: center;
    gap: .9rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.35rem 1.4rem;
    box-shadow: var(--shadow-sm);
    height: 100%;
}

.professional-masterclasses-speaker-note>.bi {
    flex: 0 0 auto;
    color: var(--primary-dark);
    font-size: 1.3rem;
}

.professional-masterclasses-speaker-note p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: 1rem;
    line-height: 1.6;
}


/* =========================
   06. UPCOMING LISTING FILTERS
========================= */
.professional-masterclasses-filters {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.professional-masterclasses-filters::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.professional-masterclasses-filters .container-xl {
    position: relative;
    z-index: 2;
}

.professional-masterclasses-filters .section-title {
    color: var(--secondary-color);
}

/* Filters panel with red top accent (dark surface) */
.professional-masterclasses-filters-panel {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-lg);
    padding: 30px 26px;
    overflow: hidden;
}

.professional-masterclasses-filters-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.professional-masterclasses-filter-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
}

.professional-masterclasses-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--dark-border);
    border-radius: 999px;
    padding: .65rem 1.15rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .88rem;
    color: var(--secondary-color);
    transition: all .25s ease;
}

.professional-masterclasses-filter-chip .bi {
    color: var(--primary-soft);
    font-size: 1rem;
}

.professional-masterclasses-filter-chip:hover {
    border-color: rgba(178, 151, 80, .5);
    background: rgba(178, 151, 80, .06);
    transform: translateY(-2px);
}


/* =========================
   07. SCROLL REVEAL
   (page-specific hook — never conflicts with the
   reveal observers used on other pages)
========================= */
.professional-masterclasses-js .professional-masterclasses-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.professional-masterclasses-js .professional-masterclasses-reveal.is-visible {
    opacity: 1;
    transform: none;
}









/* Executive Learning */









/* =========================
   03. POTENTIAL THEMES (8 AREAS)
========================= */
.executive-learning-themes {
    background: var(--secondary-color);
}

.executive-learning-themes .section-head {
    margin-bottom: 40px;
}

/* Editorial theme row — names only, no invented descriptions */
.executive-learning-theme {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.3rem;
    height: 100%;
    transition: all .3s ease;
}

.executive-learning-theme:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.executive-learning-theme-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    transition: all .3s ease;
}

.executive-learning-theme:hover .executive-learning-theme-icon {
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    box-shadow: 0 10px 20px rgba(8, 35, 64, .25);
}

.executive-learning-theme-name {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .98rem;
    line-height: 1.45;
}

.executive-learning-theme-num {
    flex: 0 0 auto;
    font-family: var(--font-head);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--primary-dark);
    opacity: .35;
}


/* =========================
   04. DELIVERY OPTIONS
========================= */
.executive-learning-delivery {
    background: var(--light-bg);
}

.executive-learning-delivery .section-head {
    margin-bottom: 36px;
}

/* Delivery panel with red top accent */
.executive-learning-delivery-panel {
    position: relative;
    max-width: 920px;
    margin: 0 auto;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.executive-learning-delivery-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.executive-learning-delivery-item {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.05rem 1.15rem;
    height: 100%;
    transition: all .25s ease;
}

.executive-learning-delivery-item:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.executive-learning-delivery-icon {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.executive-learning-delivery-item p {
    margin: 0;
    padding-top: .3rem;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.55;
}


/* =========================
   05. DESIGN PRINCIPLES (5 TILES)
========================= */
.executive-learning-principles {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.executive-learning-principles::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.executive-learning-principles .container-xl {
    position: relative;
    z-index: 2;
}

.executive-learning-principles .section-title {
    color: var(--secondary-color);
}

.executive-learning-principles-lead {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--primary-soft);
    font-size: 1.1rem;
    margin: 0;
}

/* Principle tile */
.executive-learning-principle {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    padding: 1.2rem 1.3rem;
    height: 100%;
    transition: all .3s ease;
}

.executive-learning-principle:hover {
    border-color: rgba(178, 151, 80, .5);
    background: rgba(178, 151, 80, .06);
    transform: translateY(-3px);
}

.executive-learning-principle-icon {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 10px 20px rgba(8, 35, 64, .28);
}

.executive-learning-principle p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: .96rem;
    line-height: 1.55;
}

/* Final, longest principle spans the full row */
@media (min-width:768px) {
    .executive-learning-principle-wide {
        flex: 0 0 auto;
        width: 100%;
    }
}


/* =========================
   06. PRIVATE COHORTS (CLOSING BAND)
========================= */
.executive-learning-cta {
    position: relative;
    background: linear-gradient(130deg,
            var(--primary-color) 0%,
            var(--primary-dark) 55%,
            var(--primary-darker) 100%);
    color: var(--secondary-color);
    overflow: hidden;
    padding: 72px 0;
    text-align: center;
}

.executive-learning-cta::before,
.executive-learning-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .18);
    pointer-events: none;
}

.executive-learning-cta::before {
    width: 320px;
    height: 320px;
    top: -130px;
    left: -100px;
}

.executive-learning-cta::after {
    width: 420px;
    height: 420px;
    bottom: -210px;
    right: -140px;
    border-color: rgba(255, 255, 255, .12);
}

.executive-learning-cta .container-xl {
    position: relative;
    z-index: 2;
}

.executive-learning-cta h2 {
    color: var(--secondary-color);
    font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.4rem);
    line-height: 1.25;
    margin: 0 auto 14px;
}

.executive-learning-cta p {
    color: rgba(255, 255, 255, .94);
    max-width: 620px;
    margin: 0 auto 26px;
}


/* =========================
   07. SCROLL REVEAL
   (page-specific hook — never conflicts with the
   reveal observers used on other pages)
========================= */
.executive-learning-js .executive-learning-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.executive-learning-js .executive-learning-reveal.is-visible {
    opacity: 1;
    transform: none;
}









/* Career Developement Pathways */





/* =========================
   03. PATHWAY STAGES (6-STAGE FRAMEWORK)
========================= */
.career-development-pathways-stages {
    background: var(--secondary-color);
}

/* Stage card — genuine sequential pathway (01–06) */
.career-development-pathways-stage {
    position: relative;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.6rem 1.4rem 1.5rem;
    height: 100%;
    overflow: hidden;
    transition: all .3s ease;
}

.career-development-pathways-stage::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, var(--primary-color), var(--primary-darker));
    transition: height .35s ease;
}

.career-development-pathways-stage:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.career-development-pathways-stage:hover::before {
    height: 100%;
}

.career-development-pathways-stage-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 14px;
}

.career-development-pathways-stage-num {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(8, 35, 64, .25);
}

.career-development-pathways-stage-icon {
    width: 42px;
    height: 42px;
    border-radius: 50%;
    background: var(--secondary-color);
    color: var(--primary-dark);
    border: 1px solid var(--primary-tint-2);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.15rem;
}

.career-development-pathways-stage-name {
    font-size: 1.15rem;
    line-height: 1.3;
    margin: 0 0 14px;
}

/* Field blocks — labels use the document's own column headers */
.career-development-pathways-field {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .85rem .95rem;
    background: var(--secondary-color);
}

.career-development-pathways-field+.career-development-pathways-field {
    margin-top: .7rem;
}

.career-development-pathways-field-label {
    display: flex;
    align-items: center;
    gap: .4rem;
    font-family: var(--font-head);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--muted);
    margin-bottom: 4px;
}

.career-development-pathways-field-text {
    margin: 0;
    font-size: .92rem;
    line-height: 1.6;
    color: var(--body-text);
}

.career-development-pathways-field-dev {
    background: var(--primary-tint);
    border-color: var(--primary-tint-2);
}

.career-development-pathways-field-dev .career-development-pathways-field-label {
    color: var(--primary-dark);
}

.career-development-pathways-field-dev .career-development-pathways-field-label .bi {
    font-size: .85rem;
    flex: 0 0 auto;
}

.career-development-pathways-field-dev .career-development-pathways-field-text {
    color: var(--ink);
    font-weight: 500;
}


/* =========================
   04. PATHWAY GUIDANCE QUESTIONS
========================= */
.career-development-pathways-questions {
    background: var(--light-bg);
}

.career-development-pathways-questions .section-head {
    margin-bottom: 36px;
}

/* Questions panel with red top accent */
.career-development-pathways-questions-panel {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.career-development-pathways-questions-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.career-development-pathways-question {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .95rem 1.05rem;
    transition: all .25s ease;
}

.career-development-pathways-question:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
}

.career-development-pathways-question+.career-development-pathways-question {
    margin-top: .7rem;
}

.career-development-pathways-question-num {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.career-development-pathways-question-text {
    margin: 0;
    padding-top: .3rem;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.55;
}


/* =========================
   05. CAREER DISCLAIMER (CLOSING BAND)
========================= */
.career-development-pathways-cta {
    position: relative;
    background: linear-gradient(130deg,
            var(--primary-color) 0%,
            var(--primary-dark) 55%,
            var(--primary-darker) 100%);
    color: var(--secondary-color);
    overflow: hidden;
    padding: 72px 0;
    text-align: center;
}

.career-development-pathways-cta::before,
.career-development-pathways-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .18);
    pointer-events: none;
}

.career-development-pathways-cta::before {
    width: 320px;
    height: 320px;
    top: -130px;
    left: -100px;
}

.career-development-pathways-cta::after {
    width: 420px;
    height: 420px;
    bottom: -210px;
    right: -140px;
    border-color: rgba(255, 255, 255, .12);
}

.career-development-pathways-cta .container-xl {
    position: relative;
    z-index: 2;
}

.career-development-pathways-cta h2 {
    color: var(--secondary-color);
    font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.4rem);
    line-height: 1.25;
    margin: 0 auto 16px;
}

.career-development-pathways-cta p {
    color: rgba(255, 255, 255, .94);
    max-width: 680px;
    margin: 0 auto;
}

.career-development-pathways-cta strong {
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
}


/* =========================
   06. SCROLL REVEAL
   (page-specific hook — never conflicts with the
   reveal observers used on other pages)
========================= */
.career-development-pathways-js .career-development-pathways-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.career-development-pathways-js .career-development-pathways-reveal.is-visible {
    opacity: 1;
    transform: none;
}




/* Learning Calender */




/* =========================
   03. CALENDAR FILTERS
========================= */
.learning-calendar-filters {
    background: var(--secondary-color);
}

.learning-calendar-filters .section-head {
    margin-bottom: 40px;
}

/* Filters panel with red top accent (dark surface) */
.learning-calendar-filters-panel {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    background: var(--dark-bg);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-lg);
    padding: 30px 26px;
    overflow: hidden;
}

.learning-calendar-filters-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.learning-calendar-filter-chips {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
}

.learning-calendar-filter-chip {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255, 255, 255, .03);
    border: 1px solid var(--dark-border);
    border-radius: 999px;
    padding: .65rem 1.15rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .88rem;
    color: var(--secondary-color);
    transition: all .25s ease;
}

.learning-calendar-filter-chip .bi {
    color: var(--primary-soft);
    font-size: 1rem;
}

.learning-calendar-filter-chip:hover {
    border-color: rgba(178, 151, 80, .5);
    background: rgba(178, 151, 80, .06);
    transform: translateY(-2px);
}


/* =========================
   04. EVENT CARD FIELDS
========================= */
.learning-calendar-card {
    background: var(--light-bg);
}

.learning-calendar-card .section-head {
    margin-bottom: 36px;
}

/* Spec panel with red top accent */
.learning-calendar-card-panel {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.learning-calendar-card-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.learning-calendar-field-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .85rem 1rem;
    transition: all .25s ease;
}

.learning-calendar-field-row:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
}

.learning-calendar-field-row+.learning-calendar-field-row {
    margin-top: .7rem;
}

.learning-calendar-field-num {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.learning-calendar-field-text {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.45;
}


/* =========================
   05. NO SUITABLE DATE (CLOSING BAND)
========================= */
.learning-calendar-cta {
    position: relative;
    background: linear-gradient(130deg,
            var(--primary-color) 0%,
            var(--primary-dark) 55%,
            var(--primary-darker) 100%);
    color: var(--secondary-color);
    overflow: hidden;
    padding: 72px 0;
    text-align: center;
}

.learning-calendar-cta::before,
.learning-calendar-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .18);
    pointer-events: none;
}

.learning-calendar-cta::before {
    width: 320px;
    height: 320px;
    top: -130px;
    left: -100px;
}

.learning-calendar-cta::after {
    width: 420px;
    height: 420px;
    bottom: -210px;
    right: -140px;
    border-color: rgba(255, 255, 255, .12);
}

.learning-calendar-cta .container-xl {
    position: relative;
    z-index: 2;
}

.learning-calendar-cta h2 {
    color: var(--secondary-color);
    font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.4rem);
    line-height: 1.25;
    margin: 0 auto 16px;
}

.learning-calendar-cta p {
    color: rgba(255, 255, 255, .94);
    max-width: 640px;
    margin: 0 auto 26px;
}


/* =========================
   06. SCROLL REVEAL
   (page-specific hook — never conflicts with the
   reveal observers used on other pages)
========================= */
.learning-calendar-js .learning-calendar-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.learning-calendar-js .learning-calendar-reveal.is-visible {
    opacity: 1;
    transform: none;
}






/* Professional Resources */






/* =========================
   03. RESOURCE CATEGORIES
========================= */
.professional-resources-categories {
    background: var(--secondary-color);
}

.professional-resources-categories .section-head {
    margin-bottom: 40px;
}

/* Category tile — names only, no invented descriptions */
.professional-resources-category {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.3rem 1.35rem;
    height: 100%;
    overflow: hidden;
    transition: all .3s ease;
}

.professional-resources-category::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-darker));
    transition: width .35s ease;
}

.professional-resources-category:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.professional-resources-category:hover::before {
    width: 100%;
}

.professional-resources-category-icon {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    transition: all .3s ease;
}

.professional-resources-category:hover .professional-resources-category-icon {
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    box-shadow: 0 12px 24px rgba(178, 151, 80, .3);
}

.professional-resources-category p {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .98rem;
    line-height: 1.45;
}

.professional-resources-category-num {
    flex: 0 0 auto;
    font-family: var(--font-head);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--primary-dark);
    opacity: .35;
}


/* =========================
   04. EDITORIAL PROMISE
========================= */
.professional-resources-promise {
    background: var(--light-bg);
}

.professional-resources-promise .section-title {
    margin-bottom: 16px;
}

/* Editorial statement (sentence 1, verbatim) */
.professional-resources-statement {
    margin: 0;
    max-width: 460px;
    padding-left: 1.5rem;
    border-left: 4px solid var(--primary-color);
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: clamp(1.15rem, 1rem + .9vw, 1.5rem);
    line-height: 1.6;
    letter-spacing: -.01em;
}

/* Highlighter effect on qualities (styling only — text unchanged) */
.professional-resources-hl {
    background: linear-gradient(transparent 62%, var(--primary-tint-2) 62%);
    padding: 0 .05em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Promise note cards (sentences 2 & 3, verbatim) */
.professional-resources-note {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.2rem 1.3rem;
    box-shadow: var(--shadow-sm);
}

.professional-resources-note+.professional-resources-note {
    margin-top: 1rem;
}

.professional-resources-note>.bi {
    flex: 0 0 auto;
    color: var(--primary-dark);
    font-size: 1.25rem;
    margin-top: .15rem;
}

.professional-resources-note p {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
    font-size: .98rem;
    line-height: 1.65;
}

/* Promotional-content variant */
.professional-resources-note-warn {
    background: var(--primary-tint);
    border-color: var(--primary-tint-2);
}

.professional-resources-note-warn>.bi {
    color: var(--primary-color);
}


/* =========================
   05. FEATURED RESOURCE BLOCK
========================= */
.professional-resources-featured {
    background: var(--secondary-color);
}

.professional-resources-featured .section-head {
    margin-bottom: 36px;
}

/* Featured card with red top accent */
.professional-resources-featured-card {
    position: relative;
    max-width: 760px;
    margin: 0 auto;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 34px 30px;
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.professional-resources-featured-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.professional-resources-featured-chip {
    display: inline-flex;
    align-items: center;
    font-family: var(--font-head);
    font-size: .66rem;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--primary-dark);
    background: var(--primary-tint);
    border: 1px solid var(--primary-tint-2);
    border-radius: 999px;
    padding: .4rem .85rem;
    margin-bottom: 18px;
}

.professional-resources-featured-title {
    font-size: clamp(1.25rem, 1.05rem + 1vw, 1.7rem);
    line-height: 1.35;
    margin: 0 0 12px;
}

.professional-resources-featured-summary {
    margin: 0 0 20px;
    font-size: .98rem;
    line-height: 1.75;
    color: var(--body-text);
}

/* Details row — the document's own three metadata slots */
.professional-resources-featured-details {
    display: flex;
    flex-wrap: wrap;
    gap: .55rem;
    margin-bottom: 24px;
}

.professional-resources-featured-detail {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .5rem 1rem;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .84rem;
    color: var(--ink);
}

.professional-resources-featured-detail .bi {
    color: var(--primary-dark);
    font-size: .95rem;
}

.professional-resources-featured-action {
    padding-top: 4px;
}


/* =========================
   06. STAY INFORMED (CLOSING BAND)
========================= */
.professional-resources-cta {
    position: relative;
    background: linear-gradient(130deg,
            var(--primary-color) 0%,
            var(--primary-dark) 55%,
            var(--primary-darker) 100%);
    color: var(--secondary-color);
    overflow: hidden;
    padding: 72px 0;
    text-align: center;
}

.professional-resources-cta::before,
.professional-resources-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .18);
    pointer-events: none;
}

.professional-resources-cta::before {
    width: 320px;
    height: 320px;
    top: -130px;
    left: -100px;
}

.professional-resources-cta::after {
    width: 420px;
    height: 420px;
    bottom: -210px;
    right: -140px;
    border-color: rgba(255, 255, 255, .12);
}

.professional-resources-cta .container-xl {
    position: relative;
    z-index: 2;
}

.professional-resources-cta h2 {
    color: var(--secondary-color);
    font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.4rem);
    line-height: 1.25;
    margin: 0 auto 14px;
}

.professional-resources-cta p {
    color: rgba(255, 255, 255, .94);
    max-width: 560px;
    margin: 0 auto 26px;
}






/* Insights and Articles */






/* =========================
   03. EDITORIAL CATEGORIES
========================= */
.insights-articles-categories {
    background: var(--secondary-color);
}

.insights-articles-categories .section-head {
    margin-bottom: 40px;
}

/* Category tile — names only, no invented descriptions */
.insights-articles-category {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.3rem;
    height: 100%;
    overflow: hidden;
    transition: all .3s ease;
}

.insights-articles-category::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-darker));
    transition: width .35s ease;
}

.insights-articles-category:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.insights-articles-category:hover::before {
    width: 100%;
}

.insights-articles-category-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    transition: all .3s ease;
}

.insights-articles-category:hover .insights-articles-category-icon {
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    box-shadow: 0 10px 20px rgba(8, 35, 64, .25);
}

.insights-articles-category p {
    margin: 0 0 .9rem;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .96rem;
    line-height: 1.45;
}

.insights-articles-category-num {
    margin-top: auto;
    font-family: var(--font-head);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--primary-dark);
    opacity: .35;
}


/* =========================
   04. ARTICLE STRUCTURE
========================= */
.insights-articles-structure {
    background: var(--light-bg);
}

.insights-articles-structure .section-head {
    margin-bottom: 36px;
}

/* Structure panel with red top accent */
.insights-articles-structure-panel {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.insights-articles-structure-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.insights-articles-structure-row {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .85rem 1rem;
    transition: all .25s ease;
}

.insights-articles-structure-row:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
}

.insights-articles-structure-row+.insights-articles-structure-row {
    margin-top: .7rem;
}

.insights-articles-structure-num {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.insights-articles-structure-text {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.45;
}


/* =========================
   05. SUGGESTED LAUNCH ARTICLES
========================= */
.insights-articles-launch {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.insights-articles-launch::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.insights-articles-launch .container-xl {
    position: relative;
    z-index: 2;
}

.insights-articles-launch .section-title {
    color: var(--secondary-color);
}

/* Launch article ledger rows */
.insights-articles-launch-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 860px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.insights-articles-launch-row {
    display: flex;
    align-items: center;
    gap: 1.1rem;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.3rem;
    transition: all .3s ease;
}

.insights-articles-launch-row:hover {
    transform: translateX(6px);
    border-color: rgba(178, 151, 80, .5);
    background: rgba(178, 151, 80, .06);
}

.insights-articles-launch-num {
    flex: 0 0 auto;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: .95rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(8, 35, 64, .28);
}

.insights-articles-launch-text {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: 1rem;
    line-height: 1.55;
}










/* Events and Webinars */






/* =========================
   03. EVENT TYPES
========================= */
.events-webinars-types {
    background: var(--secondary-color);
}

.events-webinars-types .section-head {
    margin-bottom: 40px;
}

/* Event type tile — names only, no invented descriptions */
.events-webinars-type {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.3rem;
    height: 100%;
    overflow: hidden;
    transition: all .3s ease;
}

.events-webinars-type::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 4px;
    height: 0;
    background: linear-gradient(180deg, var(--primary-color), var(--primary-darker));
    transition: height .35s ease;
}

.events-webinars-type:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.events-webinars-type:hover::before {
    height: 100%;
}

.events-webinars-type-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    transition: all .3s ease;
}

.events-webinars-type:hover .events-webinars-type-icon {
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    box-shadow: 0 10px 20px rgba(8, 35, 64, .25);
}

.events-webinars-type p {
    margin: 0 0 .9rem;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .96rem;
    line-height: 1.45;
}

.events-webinars-type-num {
    margin-top: auto;
    font-family: var(--font-head);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--primary-dark);
    opacity: .35;
}


/* =========================
   04. EVENT PAGE REQUIREMENTS
========================= */
.events-webinars-requirements {
    background: var(--light-bg);
}

.events-webinars-requirements .section-head {
    margin-bottom: 36px;
}

/* Requirements panel with red top accent */
.events-webinars-requirements-panel {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.events-webinars-requirements-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.events-webinars-requirement {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .85rem 1rem;
    transition: all .25s ease;
}

.events-webinars-requirement:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
}

.events-webinars-requirement+.events-webinars-requirement {
    margin-top: .7rem;
}

.events-webinars-requirement-check {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
}

.events-webinars-requirement p {
    margin: 0;
    padding-top: .3rem;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.5;
}


/* =========================
   05. REGISTRATION CONFIRMATION (CLOSING BAND)
========================= */
.events-webinars-cta {
    position: relative;
    background: linear-gradient(130deg,
            var(--primary-color) 0%,
            var(--primary-dark) 55%,
            var(--primary-darker) 100%);
    color: var(--secondary-color);
    overflow: hidden;
    padding: 72px 0;
    text-align: center;
}

.events-webinars-cta::before,
.events-webinars-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .18);
    pointer-events: none;
}

.events-webinars-cta::before {
    width: 320px;
    height: 320px;
    top: -130px;
    left: -100px;
}

.events-webinars-cta::after {
    width: 420px;
    height: 420px;
    bottom: -210px;
    right: -140px;
    border-color: rgba(255, 255, 255, .12);
}

.events-webinars-cta .container-xl {
    position: relative;
    z-index: 2;
}

.events-webinars-cta h2 {
    color: var(--secondary-color);
    font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.4rem);
    line-height: 1.25;
    margin: 0 auto 16px;
}

.events-webinars-cta p {
    color: rgba(255, 255, 255, .94);
    max-width: 680px;
    margin: 0 auto 12px;
}

.events-webinars-cta strong {
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
}


/* =========================
   06. SCROLL REVEAL
   (page-specific hook — never conflicts with the
   reveal observers used on other pages)
========================= */






/* downlaod And guides */





/* =========================
   03. SUGGESTED RESOURCES
========================= */
.downloads-guides-library {
    background: var(--secondary-color);
}

.downloads-guides-library .section-head {
    margin-bottom: 40px;
}

/* Resource tile — titles only, no invented metadata or links */
.downloads-guides-resource {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.3rem;
    height: 100%;
    overflow: hidden;
    transition: all .3s ease;
}

.downloads-guides-resource::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-darker));
    transition: width .35s ease;
}

.downloads-guides-resource:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.downloads-guides-resource:hover::before {
    width: 100%;
}

.downloads-guides-resource-num {
    font-family: var(--font-head);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--primary-dark);
    opacity: .4;
    margin-bottom: .8rem;
}

.downloads-guides-resource-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    transition: all .3s ease;
}

.downloads-guides-resource:hover .downloads-guides-resource-icon {
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    box-shadow: 0 10px 20px rgba(8, 35, 64, .25);
}

.downloads-guides-resource p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .96rem;
    line-height: 1.5;
}


/* =========================
   04. DOWNLOAD FORM
========================= */
.downloads-guides-form {
    background: var(--light-bg);
}

.downloads-guides-form .section-head {
    margin-bottom: 36px;
}

/* Form card with red top accent */
.downloads-guides-form-card {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 34px 30px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.downloads-guides-form-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

/* Labels */
.downloads-guides-form-card .form-label {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .92rem;
    margin-bottom: .45rem;
}

/* Inputs */
.downloads-guides-form-card .form-control {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--light-bg);
    color: var(--ink);
    padding: .75rem 1rem;
    font-size: .95rem;
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}

.downloads-guides-form-card .form-control::placeholder {
    color: var(--muted);
}

.downloads-guides-form-card .form-control:focus {
    border-color: var(--primary-color);
    background: var(--secondary-color);
    box-shadow: 0 0 0 3px rgba(178, 151, 80, .12);
}

/* Checkbox (optional consent) */
.downloads-guides-consent-box {
    background: var(--primary-tint);
    border: 1px solid var(--primary-tint-2);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
}

.downloads-guides-consent {
    margin: 0;
}

.downloads-guides-form-card .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .15rem;
    border: 1.5px solid var(--line);
    border-radius: .4rem;
    transition: all .2s ease;
}

.downloads-guides-form-card .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.downloads-guides-form-card .form-check-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 0, 0, .15);
}

.downloads-guides-form-card .form-check-label {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.55;
}

/* Submit area */
.downloads-guides-actions {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}


/* =========================
   05. USAGE NOTE
========================= */
.downloads-guides-usage {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.downloads-guides-usage::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.downloads-guides-usage .container-xl {
    position: relative;
    z-index: 2;
}

.downloads-guides-usage .section-title {
    color: var(--secondary-color);
    margin-bottom: 16px;
}

/* Statement card (sentence 1, verbatim) */
.downloads-guides-usage-card {
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.6rem;
}

.downloads-guides-usage-card p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: clamp(1.1rem, 1rem + .8vw, 1.4rem);
    line-height: 1.6;
    letter-spacing: -.01em;
}

/* Red emphasis (styling only — text unchanged) */
.downloads-guides-hl-dark {
    color: var(--primary-soft);
    background: rgba(178, 151, 80, .14);
    padding: .04em .18em;
    border-radius: .35em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Copyright note (sentence 2, verbatim) */
.downloads-guides-usage-note {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    padding: 1.2rem 1.3rem;
}

.downloads-guides-usage-note>.bi {
    flex: 0 0 auto;
    color: var(--primary-soft);
    font-size: 1.25rem;
    margin-top: .15rem;
}

.downloads-guides-usage-note p {
    margin: 0;
    font-weight: 600;
    color: var(--secondary-color);
    font-size: .97rem;
    line-height: 1.65;
}




/* Success Stories */







/* =========================
   03. PAGE INTRODUCTION
========================= */
.success-stories-intro {
    background: var(--secondary-color);
    padding: 40px 0;
}

.success-stories-intro p {
    margin: 0;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
    font-size: 1.08rem;
    line-height: 1.8;
    color: var(--body-text);
}


/* =========================
   04. STORY STRUCTURE PANELS (INDIVIDUAL + CORPORATE)
========================= */
.success-stories-individual {
    background: var(--secondary-color);
}

.success-stories-individual .section-head {
    margin-bottom: 36px;
}

.success-stories-corporate {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.success-stories-corporate::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.success-stories-corporate .container-xl {
    position: relative;
    z-index: 2;
}

.success-stories-corporate .section-title {
    color: var(--secondary-color);
}

/* Shared ordered structure list */
.success-stories-list {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 760px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

/* Light variant (individual) */
.success-stories-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
    transition: all .3s ease;
}

.success-stories-row:hover {
    transform: translateX(6px);
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-md);
}

.success-stories-row-num {
    flex: 0 0 auto;
    width: 46px;
    height: 46px;
    border-radius: 13px;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: .92rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(8, 35, 64, .25);
}

.success-stories-row-text {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .98rem;
    line-height: 1.55;
}

/* Dark variant (corporate) */
.success-stories-list-dark {
    max-width: 760px;
}

.success-stories-row-dark {
    background: var(--dark-card);
    border-color: var(--dark-border);
}

.success-stories-row-dark:hover {
    border-color: rgba(178, 151, 80, .5);
    background: rgba(178, 151, 80, .06);
    box-shadow: none;
}

.success-stories-row-dark .success-stories-row-text {
    color: var(--secondary-color);
}


/* =========================
   05. EVIDENCE STANDARD (CLOSING BAND)
========================= */
.success-stories-cta {
    position: relative;
    background: linear-gradient(130deg,
            var(--primary-color) 0%,
            var(--primary-dark) 55%,
            var(--primary-darker) 100%);
    color: var(--secondary-color);
    overflow: hidden;
    padding: 72px 0;
    text-align: center;
}

.success-stories-cta::before,
.success-stories-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .18);
    pointer-events: none;
}

.success-stories-cta::before {
    width: 320px;
    height: 320px;
    top: -130px;
    left: -100px;
}

.success-stories-cta::after {
    width: 420px;
    height: 420px;
    bottom: -210px;
    right: -140px;
    border-color: rgba(255, 255, 255, .12);
}

.success-stories-cta .container-xl {
    position: relative;
    z-index: 2;
}

.success-stories-cta h2 {
    color: var(--secondary-color);
    font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.4rem);
    line-height: 1.25;
    margin: 0 auto 18px;
}

.success-stories-cta p {
    color: rgba(255, 255, 255, .94);
    max-width: 680px;
    margin: 0 auto 12px;
}

.success-stories-cta strong {
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
}







/* Help Centre */










/* =========================
   03. SEARCH
========================= */
.help-centre-search {
    background: var(--secondary-color);
    padding: 34px 0 0;
}

.help-centre-search-card {
    max-width: 640px;
    margin: 0 auto;
}

.help-centre-search-field {
    display: flex;
    align-items: center;
    gap: .6rem;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: 999px;
    padding: .35rem .4rem .35rem 1.1rem;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.help-centre-search-field:focus-within {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(178, 151, 80, .12);
}

.help-centre-search-field .bi-search {
    color: var(--primary-dark);
    flex: 0 0 auto;
}

.help-centre-search-field input {
    flex: 1 1 auto;
    min-width: 0;
    background: transparent;
    border: 0;
    outline: 0;
    color: var(--ink);
    font-size: .95rem;
    padding: .55rem 0;
}

.help-centre-search-field input::placeholder {
    color: var(--muted);
}

.help-centre-search-clear {
    flex: 0 0 auto;
    width: 40px;
    height: 40px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--muted);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all .25s ease;
}

.help-centre-search-clear:hover {
    background: var(--primary-tint);
    color: var(--primary-dark);
}


/* =========================
   04. HELP CATEGORIES
========================= */
.help-centre-categories {
    background: var(--secondary-color);
}

.help-centre-categories .section-head {
    margin-bottom: 40px;
}

/* Category card — names only, no invented descriptions or links */
.help-centre-category {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.4rem 1.3rem;
    height: 100%;
    overflow: hidden;
    transition: all .3s ease;
}

.help-centre-category::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-darker));
    transition: width .35s ease;
}

.help-centre-category:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.help-centre-category:hover::before {
    width: 100%;
}

.help-centre-category-icon {
    width: 46px;
    height: 46px;
    border-radius: 14px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    margin-bottom: 1rem;
    transition: all .3s ease;
}

.help-centre-category:hover .help-centre-category-icon {
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    box-shadow: 0 10px 20px rgba(8, 35, 64, .25);
}

.help-centre-category p {
    margin: 0 0 .9rem;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .96rem;
    line-height: 1.45;
}

.help-centre-category-num {
    margin-top: auto;
    font-family: var(--font-head);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--primary-dark);
    opacity: .35;
}


/* =========================
   05. POPULAR HELP QUESTIONS
========================= */
.help-centre-questions {
    background: var(--light-bg);
}

.help-centre-questions .section-head {
    margin-bottom: 36px;
}

/* Questions panel with red top accent */
.help-centre-questions-list {
    list-style: none;
    max-width: 880px;
    margin: 0 auto;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    display: flex;
    flex-direction: column;
    gap: .7rem;
    position: relative;
}

.help-centre-questions-list::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.help-centre-question {
    display: flex;
    align-items: center;
    gap: .85rem;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    padding: .85rem 1rem;
    transition: all .25s ease;
}

.help-centre-question:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
}

.help-centre-question-num {
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    border-radius: 10px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: .8rem;
    display: flex;
    align-items: center;
    justify-content: center;
}

.help-centre-question-text {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.55;
}

/* Empty search state — handbook "Empty search" microcopy */
.help-centre-empty {
    max-width: 880px;
    margin: 18px auto 0;
    background: var(--primary-tint);
    border: 1px solid var(--primary-tint-2);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.3rem;
    display: flex;
    align-items: center;
    gap: .9rem;
}

.help-centre-empty>.bi {
    flex: 0 0 auto;
    color: var(--primary-dark);
    font-size: 1.25rem;
}

.help-centre-empty p {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
    font-size: .97rem;
    line-height: 1.65;
}


/* =========================
   06. CONTACT SUPPORT (CLOSING BAND)
========================= */
.help-centre-cta {
    position: relative;
    background: linear-gradient(130deg,
            var(--primary-color) 0%,
            var(--primary-dark) 55%,
            var(--primary-darker) 100%);
    color: var(--secondary-color);
    overflow: hidden;
    padding: 72px 0;
    text-align: center;
}

.help-centre-cta::before,
.help-centre-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .18);
    pointer-events: none;
}

.help-centre-cta::before {
    width: 320px;
    height: 320px;
    top: -130px;
    left: -100px;
}

.help-centre-cta::after {
    width: 420px;
    height: 420px;
    bottom: -210px;
    right: -140px;
    border-color: rgba(255, 255, 255, .12);
}

.help-centre-cta .container-xl {
    position: relative;
    z-index: 2;
}

.help-centre-cta h2 {
    color: var(--secondary-color);
    font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.4rem);
    line-height: 1.25;
    margin: 0 auto 16px;
}

.help-centre-cta>.container-xl>div>p {
    color: rgba(255, 255, 255, .94);
    max-width: 680px;
    margin: 0 auto 24px;
}

.help-centre-cta strong {
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
}

/* Caution note inside the band (sentence 2, verbatim) */
.help-centre-cta-note {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .8rem;
    max-width: 640px;
    margin: 0 auto 26px;
    background: rgba(0, 0, 0, .18);
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: var(--radius-md);
    padding: 1.05rem 1.25rem;
}

.help-centre-cta-note>.bi {
    flex: 0 0 auto;
    color: var(--secondary-color);
    font-size: 1.2rem;
}

.help-centre-cta-note p {
    margin: 0;
    font-weight: 700;
    color: var(--secondary-color);
    font-size: .96rem;
    line-height: 1.55;
    text-align: left;
}


/* =========================
   07. SEARCH VISIBILITY STATE
========================= */
.help-centre-is-hidden {
    display: none !important;
}









/* Become a learning Prtner */






/* =========================
   03. WHO MAY APPLY
========================= */
.learning-partner-eligibility {
    background: var(--light-bg);
}

.learning-partner-eligibility .section-head {
    margin-bottom: 40px;
}

.learning-partner-eligibility-card {
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.4rem;
    height: 100%;
    transition: all .3s ease;
}

.learning-partner-eligibility-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.learning-partner-eligibility-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 1rem;
    transition: all .3s ease;
}

.learning-partner-eligibility-card:hover .learning-partner-eligibility-icon {
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    box-shadow: 0 12px 24px rgba(178, 151, 80, .3);
}

.learning-partner-eligibility-card p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .96rem;
    line-height: 1.6;
}


/* =========================
   04. WHAT WE ASSESS
========================= */
.learning-partner-assess {
    background: var(--secondary-color);
}

.learning-partner-assess .section-head {
    margin-bottom: 36px;
}

/* Checklist panel with red top accent */
.learning-partner-assess-panel {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.learning-partner-assess-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.learning-partner-assess-item {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.05rem 1.15rem;
    height: 100%;
    transition: all .25s ease;
}

.learning-partner-assess-item:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.learning-partner-assess-check {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-top: .1rem;
}

.learning-partner-assess-item p {
    margin: 0;
    padding-top: .3rem;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.55;
}


/* =========================
   05. PARTNER RESPONSIBILITIES
========================= */
.learning-partner-resp {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.learning-partner-resp::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.learning-partner-resp .container-xl {
    position: relative;
    z-index: 2;
}

.learning-partner-resp .section-title {
    color: var(--secondary-color);
    margin-bottom: 16px;
}

/* Editorial statement (sentence 1, verbatim) */
.learning-partner-statement {
    margin: 0;
    max-width: 400px;
    padding-left: 1.5rem;
    border-left: 4px solid var(--primary-color);
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: clamp(1.15rem, 1rem + .9vw, 1.5rem);
    line-height: 1.6;
    letter-spacing: -.01em;
}

/* Highlighter effect (styling only — text unchanged) */
.learning-partner-hl {
    color: var(--primary-soft);
    background: rgba(178, 151, 80, .14);
    padding: .04em .18em;
    border-radius: .35em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.learning-partner-must-lead {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--primary-soft);
    font-size: 1.1rem;
    margin: 0 0 14px;
}

/* Responsibility rows (dark surface) */
.learning-partner-resp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.learning-partner-resp-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
    transition: all .3s ease;
}

.learning-partner-resp-row:hover {
    transform: translateX(6px);
    border-color: rgba(178, 151, 80, .5);
    background: rgba(178, 151, 80, .06);
}

.learning-partner-resp-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2rem;
    box-shadow: 0 10px 20px rgba(8, 35, 64, .28);
}

.learning-partner-resp-row p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: .97rem;
    line-height: 1.55;
}


/* =========================
   06. APPLICATION PROCESS (8-STEP TIMELINE)
========================= */
.learning-partner-process {
    background: var(--light-bg);
}

.learning-partner-process .section-head {
    margin-bottom: 44px;
}

/* Ordered vertical timeline */
.learning-partner-timeline {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 800px;
}

.learning-partner-step {
    position: relative;
    display: flex;
    gap: 1.25rem;
    padding-bottom: 26px;
}

.learning-partner-step:last-child {
    padding-bottom: 0;
}

/* Connecting rail */
.learning-partner-step::before {
    content: "";
    position: absolute;
    left: 25px;
    top: 58px;
    bottom: 2px;
    width: 2px;
    background: linear-gradient(180deg, rgba(178, 151, 80, .5), var(--line));
}

.learning-partner-step:last-child::before {
    display: none;
}

/* Number node */
.learning-partner-node {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(8, 35, 64, .28);
}

/* Step card */
.learning-partner-card {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 1.05rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.25rem;
    transition: all .3s ease;
}

.learning-partner-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.learning-partner-card-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.learning-partner-card p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .97rem;
    line-height: 1.6;
}


/* =========================
   07. NO IMPLIED APPROVAL (CLOSING BAND)
========================= */
.learning-partner-cta {
    position: relative;
    background: linear-gradient(130deg,
            var(--primary-color) 0%,
            var(--primary-dark) 55%,
            var(--primary-darker) 100%);
    color: var(--secondary-color);
    overflow: hidden;
    padding: 72px 0;
    text-align: center;
}

.learning-partner-cta::before,
.learning-partner-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .18);
    pointer-events: none;
}

.learning-partner-cta::before {
    width: 320px;
    height: 320px;
    top: -130px;
    left: -100px;
}

.learning-partner-cta::after {
    width: 420px;
    height: 420px;
    bottom: -210px;
    right: -140px;
    border-color: rgba(255, 255, 255, .12);
}

.learning-partner-cta .container-xl {
    position: relative;
    z-index: 2;
}

.learning-partner-cta h2 {
    color: var(--secondary-color);
    font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.4rem);
    line-height: 1.25;
    margin: 0 auto 16px;
}

.learning-partner-cta p {
    color: rgba(255, 255, 255, .94);
    max-width: 680px;
    margin: 0 auto 26px;
}









/* Corporate and instituional partnership */






/* =========================
   03. POTENTIAL COLLABORATION
========================= */
.corporate-partnerships-collaboration {
    background: var(--light-bg);
}

.corporate-partnerships-collaboration .section-head {
    margin-bottom: 40px;
}

/* Collaboration tile — names only, no invented descriptions */
.corporate-partnerships-collab {
    position: relative;
    display: flex;
    align-items: center;
    gap: 1rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.3rem 1.35rem;
    height: 100%;
    overflow: hidden;
    transition: all .3s ease;
}

.corporate-partnerships-collab::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-darker));
    transition: width .35s ease;
}

.corporate-partnerships-collab:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.corporate-partnerships-collab:hover::before {
    width: 100%;
}

.corporate-partnerships-collab-icon {
    flex: 0 0 auto;
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    transition: all .3s ease;
}

.corporate-partnerships-collab:hover .corporate-partnerships-collab-icon {
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    box-shadow: 0 12px 24px rgba(178, 151, 80, .3);
}

.corporate-partnerships-collab p {
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .97rem;
    line-height: 1.45;
}

.corporate-partnerships-collab-num {
    flex: 0 0 auto;
    font-family: var(--font-head);
    font-size: .78rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--primary-dark);
    opacity: .35;
}


/* =========================
   04. PARTNERSHIP PRINCIPLES
========================= */
.corporate-partnerships-principles {
    background: var(--secondary-color);
}

.corporate-partnerships-principles .section-head {
    margin-bottom: 36px;
}

/* Principles panel with red top accent */
.corporate-partnerships-principles-panel {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.corporate-partnerships-principles-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.corporate-partnerships-principle {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.05rem 1.15rem;
    height: 100%;
    transition: all .25s ease;
}

.corporate-partnerships-principle:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.corporate-partnerships-principle-check {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-top: .1rem;
}

.corporate-partnerships-principle p {
    margin: 0;
    padding-top: .3rem;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.55;
}


/* =========================
   05. START A CONVERSATION (CLOSING BAND)
========================= */
.corporate-partnerships-cta {
    position: relative;
    background: linear-gradient(130deg,
            var(--primary-color) 0%,
            var(--primary-dark) 55%,
            var(--primary-darker) 100%);
    color: var(--secondary-color);
    overflow: hidden;
    padding: 72px 0;
    text-align: center;
}

.corporate-partnerships-cta::before,
.corporate-partnerships-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .18);
    pointer-events: none;
}

.corporate-partnerships-cta::before {
    width: 320px;
    height: 320px;
    top: -130px;
    left: -100px;
}

.corporate-partnerships-cta::after {
    width: 420px;
    height: 420px;
    bottom: -210px;
    right: -140px;
    border-color: rgba(255, 255, 255, .12);
}

.corporate-partnerships-cta .container-xl {
    position: relative;
    z-index: 2;
}

.corporate-partnerships-cta h2 {
    color: var(--secondary-color);
    font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.4rem);
    line-height: 1.25;
    margin: 0 auto 20px;
}

.corporate-partnerships-cta-lead {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: 1.12rem;
    margin: 0 0 16px;
}

/* Conversation chips on the red band */
.corporate-partnerships-chips {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    max-width: 820px;
}

.corporate-partnerships-chip {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    padding: .6rem 1.15rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .88rem;
    color: var(--secondary-color);
    transition: all .25s ease;
}

.corporate-partnerships-chip:hover {
    background: rgba(255, 255, 255, .22);
    transform: translateY(-2px);
}









/* Falculty and TRainer */










/* =========================
   03. WHAT WE LOOK FOR
========================= */
.faculty-experts-look {
    background: var(--secondary-color);
}

.faculty-experts-look .section-head {
    margin-bottom: 36px;
}

/* Checklist panel with red top accent */
.faculty-experts-look-panel {
    position: relative;
    max-width: 880px;
    margin: 0 auto;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 26px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.faculty-experts-look-panel::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

.faculty-experts-look-item {
    display: flex;
    align-items: flex-start;
    gap: .85rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    padding: 1.05rem 1.15rem;
    height: 100%;
    transition: all .25s ease;
}

.faculty-experts-look-item:hover {
    border-color: var(--primary-tint-2);
    box-shadow: var(--shadow-sm);
    transform: translateY(-2px);
}

.faculty-experts-look-check {
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1rem;
    margin-top: .1rem;
}

.faculty-experts-look-item p {
    margin: 0;
    padding-top: .3rem;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.55;
}


/* =========================
   04. POSSIBLE ROLES
========================= */
.faculty-experts-roles {
    background: var(--light-bg);
}

.faculty-experts-roles .section-head {
    margin-bottom: 40px;
}

/* Role tile — names only, no invented descriptions */
.faculty-experts-role {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.35rem 1.25rem;
    height: 100%;
    overflow: hidden;
    transition: all .3s ease;
}

.faculty-experts-role:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.faculty-experts-role-num {
    font-family: var(--font-head);
    font-size: .76rem;
    font-weight: 800;
    letter-spacing: .12em;
    color: var(--primary-dark);
    opacity: .4;
    margin-bottom: .8rem;
}

.faculty-experts-role-icon {
    width: 44px;
    height: 44px;
    border-radius: 13px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    margin-bottom: 1rem;
    transition: all .3s ease;
}

.faculty-experts-role:hover .faculty-experts-role-icon {
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    box-shadow: 0 10px 20px rgba(8, 35, 64, .25);
}

.faculty-experts-role p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.45;
}


/* =========================
   05. SELECTION PROCESS (7-STEP TIMELINE)
========================= */
.faculty-experts-process {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.faculty-experts-process::before {
    content: "";
    position: absolute;
    right: -180px;
    top: -160px;
    width: 520px;
    height: 520px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(178, 151, 80, .2), transparent 65%);
}

.faculty-experts-process .container-xl {
    position: relative;
    z-index: 2;
}

.faculty-experts-process .section-title {
    color: var(--secondary-color);
}

/* Ordered vertical timeline */
.faculty-experts-timeline {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    max-width: 800px;
}

.faculty-experts-step {
    position: relative;
    display: flex;
    gap: 1.25rem;
    padding-bottom: 26px;
}

.faculty-experts-step:last-child {
    padding-bottom: 0;
}

/* Connecting rail */
.faculty-experts-step::before {
    content: "";
    position: absolute;
    left: 25px;
    top: 58px;
    bottom: 2px;
    width: 2px;
    background: linear-gradient(180deg, rgba(178, 151, 80, .5), rgba(255, 255, 255, .09));
}

.faculty-experts-step:last-child::before {
    display: none;
}

/* Number node */
.faculty-experts-node {
    position: relative;
    z-index: 2;
    flex: 0 0 auto;
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 20px rgba(8, 35, 64, .28);
}

/* Step card */
.faculty-experts-card {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 1.05rem;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: var(--radius-md);
    padding: 1.15rem 1.25rem;
    transition: all .3s ease;
}

.faculty-experts-card:hover {
    transform: translateY(-3px);
    border-color: rgba(178, 151, 80, .5);
    background: rgba(178, 151, 80, .06);
}

.faculty-experts-card-icon {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(178, 151, 80, .16);
    color: var(--primary-soft);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.faculty-experts-card p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--secondary-color);
    font-size: .97rem;
    line-height: 1.6;
}


/* =========================
   06. INDEPENDENT RELATIONSHIP (CLOSING BAND)
========================= */
.faculty-experts-cta {
    position: relative;
    background: linear-gradient(130deg,
            var(--primary-color) 0%,
            var(--primary-dark) 55%,
            var(--primary-darker) 100%);
    color: var(--secondary-color);
    overflow: hidden;
    padding: 72px 0;
    text-align: center;
}

.faculty-experts-cta::before,
.faculty-experts-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .18);
    pointer-events: none;
}

.faculty-experts-cta::before {
    width: 320px;
    height: 320px;
    top: -130px;
    left: -100px;
}

.faculty-experts-cta::after {
    width: 420px;
    height: 420px;
    bottom: -210px;
    right: -140px;
    border-color: rgba(255, 255, 255, .12);
}

.faculty-experts-cta .container-xl {
    position: relative;
    z-index: 2;
}

.faculty-experts-cta h2 {
    color: var(--secondary-color);
    font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.4rem);
    line-height: 1.25;
    margin: 0 auto 16px;
}

.faculty-experts-cta>.container-xl>div>p:first-of-type {
    color: rgba(255, 255, 255, .94);
    max-width: 560px;
    margin: 0 auto 24px;
}

.faculty-experts-cta strong {
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
}

.faculty-experts-cta-lead {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    font-size: 1.12rem;
    margin: 0 0 16px;
}

/* Contract-term chips on the red band */
.faculty-experts-chips {
    list-style: none;
    margin: 0 auto;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    max-width: 820px;
}

.faculty-experts-chip {
    display: inline-flex;
    align-items: center;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .35);
    border-radius: 999px;
    padding: .6rem 1.15rem;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .88rem;
    color: var(--secondary-color);
    transition: all .25s ease;
}

.faculty-experts-chip:hover {
    background: rgba(255, 255, 255, .22);
    transform: translateY(-2px);
}









/* Verify a Credential */









/* =========================
   03. VERIFICATION FORM
========================= */



/* =========================
   05. PRIVACY AND INTERPRETATION
========================= */
.verify-credential-privacy {
    background: var(--light-bg);
}

.verify-credential-privacy .section-title {
    margin-bottom: 16px;
}

/* Editorial statement (verbatim) */
.verify-credential-statement {
    margin: 0;
    max-width: 460px;
    padding-left: 1.5rem;
    border-left: 4px solid var(--primary-color);
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: clamp(1.1rem, 1rem + .8vw, 1.4rem);
    line-height: 1.65;
    letter-spacing: -.01em;
}

/* Highlighter effect (styling only — text unchanged) */
.verify-credential-hl {
    background: linear-gradient(transparent 62%, var(--primary-tint-2) 62%);
    padding: 0 .05em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

/* Interpretation note cards */
.verify-credential-note {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.2rem 1.3rem;
    box-shadow: var(--shadow-sm);
}

.verify-credential-note+.verify-credential-note {
    margin-top: 1rem;
}

.verify-credential-note>.bi {
    flex: 0 0 auto;
    color: var(--primary-dark);
    font-size: 1.25rem;
    margin-top: .15rem;
}

.verify-credential-note p {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
    font-size: .97rem;
    line-height: 1.65;
}

/* Warning variant */
.verify-credential-note-warn {
    background: var(--primary-tint);
    border-color: var(--primary-tint-2);
}

.verify-credential-note-warn>.bi {
    color: var(--primary-color);
}


/* =========================
   06. IF NO RECORD IS FOUND (CLOSING BAND)
========================= */
.verify-credential-cta {
    position: relative;
    background: linear-gradient(130deg,
            var(--primary-color) 0%,
            var(--primary-dark) 55%,
            var(--primary-darker) 100%);
    color: var(--secondary-color);
    overflow: hidden;
    padding: 72px 0;
    text-align: center;
}

.verify-credential-cta::before,
.verify-credential-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .18);
    pointer-events: none;
}

.verify-credential-cta::before {
    width: 320px;
    height: 320px;
    top: -130px;
    left: -100px;
}

.verify-credential-cta::after {
    width: 420px;
    height: 420px;
    bottom: -210px;
    right: -140px;
    border-color: rgba(255, 255, 255, .12);
}

.verify-credential-cta .container-xl {
    position: relative;
    z-index: 2;
}

.verify-credential-cta h2 {
    color: var(--secondary-color);
    font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.4rem);
    line-height: 1.25;
    margin: 0 auto 16px;
}

.verify-credential-cta p {
    color: rgba(255, 255, 255, .94);
    max-width: 640px;
    margin: 0 auto 12px;
}

.verify-credential-cta strong {
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
}





/* =========================
   04. CONTACT DETAILS
========================= */
.contact-cpa-details {
    background: var(--light-bg);
}

.contact-cpa-details .section-head {
    margin-bottom: 40px;
}

.contact-cpa-card {
    position: relative;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 1.5rem 1.4rem;
    height: 100%;
    overflow: hidden;
    transition: all .3s ease;
}

.contact-cpa-card::before {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--primary-color), var(--primary-darker));
    transition: width .35s ease;
}

.contact-cpa-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-md);
    border-color: var(--primary-tint-2);
}

.contact-cpa-card:hover::before {
    width: 100%;
}

.contact-cpa-card-icon {
    width: 50px;
    height: 50px;
    border-radius: 14px;
    background: var(--primary-tint);
    color: var(--primary-dark);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin-bottom: 1rem;
    transition: all .3s ease;
}

.contact-cpa-card:hover .contact-cpa-card-icon {
    background: linear-gradient(140deg, var(--primary-color), var(--primary-darker));
    color: var(--secondary-color);
    box-shadow: 0 12px 24px rgba(178, 151, 80, .3);
}



.contact-cpa-card-text {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .96rem;
    line-height: 1.55;
    overflow-wrap: anywhere;
    word-break: break-word;
}


/* =========================
   05. CONTACT FORM
========================= */


/* Form card with red top accent */
.contact-cpa-form-card {
    position: relative;
    max-width: 860px;
    margin: 0 auto;
    background: var(--light-bg);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 34px 30px;
    box-shadow: var(--shadow-sm);
    overflow: hidden;
}

.contact-cpa-form-card::before {
    content: "";
    position: absolute;
    top: 0;
    left: 24px;
    right: 24px;
    height: 4px;
    border-radius: 0 0 4px 4px;
    background: linear-gradient(90deg, transparent, var(--primary-color), transparent);
}

/* Labels */
.contact-cpa-form-card .form-label {
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: .92rem;
    margin-bottom: .45rem;
}

/* Inputs, textarea and file */
.contact-cpa-form-card .form-control {
    border: 1px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--secondary-color);
    color: var(--ink);
    padding: .75rem 1rem;
    font-size: .95rem;
    transition: border-color .25s ease, box-shadow .25s ease;
}

.contact-cpa-form-card .form-control::placeholder {
    color: var(--muted);
}

.contact-cpa-form-card .form-control:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(178, 151, 80, .12);
}

.contact-cpa-form-card textarea.form-control {
    min-height: 120px;
    resize: vertical;
    line-height: 1.65;
}

/* Checkbox (privacy consent) */
.contact-cpa-consent-box {
    background: var(--primary-tint);
    border: 1px solid var(--primary-tint-2);
    border-radius: var(--radius-md);
    padding: 1.1rem 1.25rem;
}

.contact-cpa-consent {
    margin: 0;
}

.contact-cpa-form-card .form-check-input {
    width: 1.25rem;
    height: 1.25rem;
    margin-top: .15rem;
    border: 1.5px solid var(--line);
    border-radius: .4rem;
    transition: all .2s ease;
}

.contact-cpa-form-card .form-check-input:checked {
    background-color: var(--primary-color);
    border-color: var(--primary-color);
}

.contact-cpa-form-card .form-check-input:focus {
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px rgba(255, 0, 0, .15);
}

.contact-cpa-form-card .form-check-label {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--ink);
    font-size: .95rem;
    line-height: 1.55;
}

/* Submit area */
.contact-cpa-actions {
    display: flex;
    justify-content: center;
    margin-top: 28px;
}


/* =========================
   06. SERVICE EXPECTATION
========================= */
.contact-cpa-service {
    background: var(--light-bg);
}

.contact-cpa-service .section-title {
    margin-bottom: 16px;
}

/* Statement card (sentence 1, verbatim) */
.contact-cpa-service-card {
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.5rem 1.6rem;
    box-shadow: var(--shadow-sm);
}

.contact-cpa-service-card p {
    margin: 0;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: clamp(1.1rem, 1rem + .8vw, 1.4rem);
    line-height: 1.65;
    letter-spacing: -.01em;
}

/* Highlighter effect on the documented placeholder (styling only) */
.contact-cpa-hl-dark {
    background: linear-gradient(transparent 62%, var(--primary-tint-2) 62%);
    padding: 0 .05em;
    -webkit-box-decoration-break: clone;
    box-decoration-break: clone;
}

.contact-cpa-service-lead {
    margin: 0 0 14px;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--ink);
    font-size: 1.05rem;
    line-height: 1.6;
}

/* Scope note (sentence 3, verbatim) */
.contact-cpa-service-note {
    display: flex;
    align-items: flex-start;
    gap: .9rem;
    background: var(--secondary-color);
    border: 1px solid var(--line);
    border-left: 3px solid var(--primary-color);
    border-radius: var(--radius-md);
    padding: 1.2rem 1.3rem;
    box-shadow: var(--shadow-sm);
}

.contact-cpa-service-note>.bi {
    flex: 0 0 auto;
    color: var(--primary-dark);
    font-size: 1.25rem;
    margin-top: .15rem;
}

.contact-cpa-service-note p {
    margin: 0;
    font-weight: 600;
    color: var(--ink);
    font-size: .97rem;
    line-height: 1.65;
}


/* =========================
   07. SAFETY NOTE (CLOSING BAND)
========================= */
.contact-cpa-cta {
    position: relative;
    background: linear-gradient(130deg,
            var(--primary-color) 0%,
            var(--primary-dark) 55%,
            var(--primary-darker) 100%);
    color: var(--secondary-color);
    overflow: hidden;
    padding: 72px 0;
    text-align: center;
}

.contact-cpa-cta::before,
.contact-cpa-cta::after {
    content: "";
    position: absolute;
    border-radius: 50%;
    border: 2px solid rgba(255, 255, 255, .18);
    pointer-events: none;
}

.contact-cpa-cta::before {
    width: 320px;
    height: 320px;
    top: -130px;
    left: -100px;
}

.contact-cpa-cta::after {
    width: 420px;
    height: 420px;
    bottom: -210px;
    right: -140px;
    border-color: rgba(255, 255, 255, .12);
}

.contact-cpa-cta .container-xl {
    position: relative;
    z-index: 2;
}

.contact-cpa-cta h2 {
    color: var(--secondary-color);
    font-size: clamp(1.5rem, 1.1rem + 2.2vw, 2.4rem);
    line-height: 1.25;
    margin: 0 auto 18px;
}

.contact-cpa-cta p {
    color: rgba(255, 255, 255, .94);
    max-width: 680px;
    margin: 0 auto 12px;
}

.contact-cpa-cta strong {
    color: var(--secondary-color);
    font-family: var(--font-head);
    font-weight: 800;
}



















/*
=========================================================
COMMON CSS REFACTOR
Generated from the supplied style(4).css

IMPORTANT:
- This file consolidates repeated page-prefixed components.
- It is intentionally conservative: unique page sections are NOT merged.
- Add the common classes below to the relevant HTML/Blade elements.
=========================================================
*/

/* =====================================================
   1. COMMON INNER-PAGE HERO
===================================================== */
.page-hero {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
    padding: 88px 0 96px;
    text-align: center;
}

.page-hero::before {
    content: "";
    position: absolute;
    top: -260px;
    left: 50%;
    transform: translateX(-50%);
    width: 760px;
    height: 760px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(8, 35, 64, .28), transparent 65%);
}

.page-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(255, 255, 255, .05) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .05) 1px, transparent 1px);
    background-size: 44px 44px;
    -webkit-mask-image: radial-gradient(
        ellipse at 50% 18%,
        rgba(0, 0, 0, .85),
        transparent 72%
    );
    mask-image: radial-gradient(
        ellipse at 50% 18%,
        rgba(0, 0, 0, .85),
        transparent 72%
    );
    z-index: -1;
}

.page-hero .container-xl {
    position: relative;
    z-index: 2;
}

/* Common hero title */
.page-hero-title {
    color: var(--secondary-color);
    font-size: clamp(2rem, 1.35rem + 3vw, 3.4rem);
    line-height: 1.12;
    letter-spacing: -.02em;
    max-width: 880px;
    margin: 14px auto 16px;
}



/* Common hero lead */
.page-hero-lead {
    color: #c3cad4;
    font-size: 1.03rem;
    max-width: 660px;
    margin: 0 auto 30px;
}

/* Small modifier classes preserve the source page-specific widths. */


/* Hero navigation */
.page-hero-nav {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .6rem;
    margin: 0;
}

/* Hero navigation pill */
.page-nav-pill {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    background: var(--dark-card);
    border: 1px solid var(--dark-border);
    border-radius: 999px;
    padding: .62rem 1.15rem;
    font-family: var(--font-head);
    font-weight: 700;
    color: var(--secondary-color);
    text-decoration: none;
    transition: all .25s ease;
}

.page-nav-pill:hover {
    color: var(--secondary-color);
    border-color: rgba(178, 151, 80, .5);
    background: rgba(178, 151, 80, .08);
    transform: translateY(-2px);
}

.page-nav-pill .bi {
    color: var(--secondary-color);
    font-size: 1rem;
    transition: color .25s ease;
}

.page-nav-pill:hover .bi {
    color: var(--secondary-color);
}

/* Hero animation */
.page-hero-anim {
    animation: page-fade-up .8s cubic-bezier(.22, .61, .36, 1) both;
}

.page-hero-anim-2 {
    animation-delay: .15s;
}

.page-hero-anim-3 {
    animation-delay: .3s;
}

@keyframes page-fade-up {
    from {
        opacity: 0;
        transform: translateY(22px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* =====================================================
   2. COMMON INNER-PAGE BREADCRUMB
===================================================== */
.page-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .35rem .55rem;
    list-style: none;
    margin: 0 0 26px;
    padding: 0;
    font-size: .82rem;
    font-weight: 600;
    color: #8d97a5;
}

.page-breadcrumb li {
    display: flex;
    align-items: center;
    gap: .55rem;
}

.page-breadcrumb li + li::before {
    content: "/";
    color: rgba(255, 255, 255, .25);
}

.page-breadcrumb a {
    color: #c3cad4;
    text-decoration: none;
}

.page-breadcrumb a:hover {
    color: var(--secondary-color);
    text-decoration: underline;
}

.page-breadcrumb [aria-current] {
    color: var(--secondary-color);
}

/* =====================================================
   3. COMMON SCROLL REVEAL
===================================================== */
.js .page-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}
 .page-reveal {
    opacity: 0;
    transform: translateY(26px);
    transition:
        opacity .7s cubic-bezier(.22, .61, .36, 1),
        transform .7s cubic-bezier(.22, .61, .36, 1);
    will-change: opacity, transform;
}

.js .page-reveal.is-visible {
    opacity: 1;
    transform: none;
}
 .page-reveal.is-visible {
    opacity: 1;
    transform: none;
}

/* =====================================================
   4. EXISTING GLOBAL COMPONENTS — KEEP THESE AS COMMON
   These already exist in the supplied stylesheet and
   should NOT be duplicated per page.
===================================================== */

/*
.section
.section-head
.section-title
.section-lead

.btn
.btn-sm
.btn-lg
.btn-brand
.btn-outline-brand
.btn-ghost-light
.btn-light-brand

.topbar
.topbar-inner
.topbar-message
.topbar-marquee
.topbar-marquee-content
.topbar-utility
.topbar-sep

.site-header
.navbar
.navbar-toggler
.brand-mark
.brand-text
.navbar-nav .nav-link
.dropdown-menu
.dropdown-item

.footer
.footer-cta-panel
.newsletter-card
.footer-links
.footer-bottom
.back-top
*/

/* =====================================================
   5. OPTIONAL UNIVERSAL UTILITY
===================================================== */
.page-section-light {
    background: var(--light-bg);
}

.page-section-white {
    background: var(--secondary-color);
}

.page-section-dark {
    position: relative;
    background: var(--dark-bg);
    color: var(--secondary-color);
    overflow: hidden;
}

.page-container-layer {
    position: relative;
    z-index: 2;
}