/* TORQUE IT — design system. Plain CSS, no build step.
   Tokens are the single source of truth; no page introduces colours or fonts
   outside this file. Light is default; dark is opt-in via [data-theme="dark"]. */

/* ---------------------------------------------------------------------------
   Tokens
--------------------------------------------------------------------------- */
:root {
    color-scheme: light;
    --bg: #FFFFFF;
    --surface: #F6F8FB;
    --surface-2: #EEF2F7;
    --border: #E3E8EF;
    --border-strong: #CDD5E0;
    --text: #0F1E33;
    --text-muted: #5A6B82;
    --navy: #11294D;
    --navy-700: #0B1E3A;
    --orange: #F26A1B;
    --orange-600: #D9590F;
    --orange-soft: #FCEEE3;
    --success: #1E9E6A;
    --danger: #D64545;
    --ring: rgba(242, 106, 27, .30);

    --radius: 12px;
    --radius-sm: 8px;
    --maxw: 1380px;

    --font-head: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-body: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

    --scrollbar-size: 5px;
    --scrollbar-thumb: #0F1E33;
    --scrollbar-thumb-hover: #000000;
}

[data-theme="dark"] {
    --bg: #0E1726;
    --surface: #15212F;
    --surface-2: #1C2A3A;
    --border: #233144;
    --border-strong: #324356;
    --text: #E8EDF4;
    --text-muted: #93A1B5;
    --navy: #9DB8E0;
    --navy-700: #C3D4EE;
    --orange: #F47B33;
    --orange-600: #F26A1B;
    --orange-soft: rgba(242, 106, 27, .14);
    --success: #34B883;
    --danger: #E26A6A;
    --ring: rgba(242, 106, 27, .30);

    --scrollbar-thumb: rgba(232, 237, 244, .5);
    --scrollbar-thumb-hover: rgba(232, 237, 244, .72);
}

/* ---------------------------------------------------------------------------
   Base
--------------------------------------------------------------------------- */
* { box-sizing: border-box; }

/* Global scrollbars — transparent track, thin black thumb, no arrows */
* {
    scrollbar-width: thin;
    scrollbar-color: var(--scrollbar-thumb) transparent;
}
*::-webkit-scrollbar {
    width: var(--scrollbar-size);
    height: var(--scrollbar-size);
}
*::-webkit-scrollbar-track {
    background: transparent;
}
*::-webkit-scrollbar-thumb {
    background-color: var(--scrollbar-thumb);
    border-radius: 999px;
}
*::-webkit-scrollbar-thumb:hover {
    background-color: var(--scrollbar-thumb-hover);
}
*::-webkit-scrollbar-corner {
    background: transparent;
}
*::-webkit-scrollbar-button {
    display: none;
    width: 0;
    height: 0;
}

html, body { margin: 0; height: 100%; }

body {
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 400;
    line-height: 1.7;
    min-height: 100vh;
    min-height: 100dvh;
    height: 100%;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
    font-family: var(--font-head);
    font-weight: 600;
    line-height: 1.25;
    color: var(--text);
    margin: 0 0 .6em;
}

h1 { font-size: clamp(2rem, 5vw, 2.6rem); font-weight: 500; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.25rem; }
small, .small { font-size: .8125rem; }

p { margin: 0 0 1rem; }

a { color: var(--orange-600); text-decoration: none; }
a:hover { text-decoration: underline; }

img { max-width: 100%; display: block; }

hr { border: 0; border-top: 1px solid var(--border); margin: 2rem 0; }

.divider { border: 0; border-top: 1px solid var(--border); margin: 3rem 0; }

/* ---------------------------------------------------------------------------
   Layout helpers
--------------------------------------------------------------------------- */
.container {
    width: 100%;
    max-width: var(--maxw);
    margin: 0 auto;
    padding: 0 1.25rem;
}

.page-scroll {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
}

main { flex: 1; }

.section { padding: 3.5rem 0; }
.section-sm { padding: 2rem 0; }
.section-tight { padding: 1.5rem 0; }

.muted { color: var(--text-muted); }
.center { text-align: center; }
.stack > * + * { margin-top: 1rem; }

.grid { display: grid; gap: 1.25rem; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }

.row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; }
.between { justify-content: space-between; }
.flex-grow { flex: 1; }

.section-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    margin-bottom: 1.5rem;
    flex-wrap: wrap;
}
.section-head h2 { margin: 0; }

/* ---------------------------------------------------------------------------
   Wordmark
--------------------------------------------------------------------------- */
.wordmark {
    font-family: var(--font-head);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    white-space: nowrap;
    line-height: 1;
}
.wordmark-torque { color: var(--navy); }
.wordmark-it { color: var(--orange); }

.brand .wordmark { font-size: 1.4rem; }

/* Brand logo image — replaces the text wordmark in the header & footer. */
.brand-logo { display: block; width: auto; height: 40px; }
.site-header .brand-logo { height: 40px; }
.site-footer .brand-logo { height: 84px; }

/* The logo carries navy + black ink that disappears on dark backgrounds, so
   give it a light backing chip in dark mode (rather than inverting and losing
   the orange). */
[data-theme="dark"] .brand-logo {
    background: #FFFFFF;
    padding: 5px 9px;
    border-radius: var(--radius-sm);
}

/* ---------------------------------------------------------------------------
   Buttons
--------------------------------------------------------------------------- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--font-body);
    font-size: .95rem;
    font-weight: 500;
    line-height: 1;
    padding: .75rem 1.25rem;
    border-radius: var(--radius-sm);
    border: 1px solid transparent;
    cursor: pointer;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, transform .05s ease;
    white-space: nowrap;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: scale(.98); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring); }

.btn-primary { background: var(--orange); color: #fff; }
.btn-primary:hover { background: var(--orange-600); color: #fff; }

.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #188A5C; color: #fff; }
[data-theme="dark"] .btn-success:hover { background: #2BA374; color: #fff; }

.btn-navy { background: var(--navy); color: #fff; }
[data-theme="dark"] .btn-navy { color: var(--bg); }
.btn-navy:hover { background: var(--navy-700); }

.btn-ghost { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-ghost:hover { background: var(--surface); }

.btn-sm { padding: .45rem .8rem; font-size: .85rem; }
.btn-lg { padding: 1rem 1.6rem; font-size: 1.05rem; }
.btn-block { display: flex; width: 100%; }

.btn:disabled, .btn[aria-disabled="true"] {
    opacity: .5;
    cursor: not-allowed;
    pointer-events: none;
}

/* ---------------------------------------------------------------------------
   Cards
--------------------------------------------------------------------------- */
.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 1.5rem;
    transition: border-color .15s ease;
}
.card:hover { border-color: var(--orange); }

.card-flush { padding: 0; overflow: hidden; }

/* Course card */
.course-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
    transition: border-color .15s ease;
    height: 100%;
}
.course-card { position: relative; }
.course-card:hover { border-color: var(--orange); box-shadow: 0 6px 20px rgba(17, 41, 77, .08); }
.course-card__banner {
    flex: 0 0 6.5rem;
    width: 6.5rem;
    max-width: 6.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border-right: 1px solid var(--border);
    overflow: hidden;
}
.course-card__banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: .5rem;
    background: var(--surface-2);
}
.course-card__banner--placeholder {
    position: relative;
    isolation: isolate;
}
.course-card__banner--placeholder::before {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}
.course-card__banner-initial {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.5rem;
    height: 3.5rem;
    border-radius: 50%;
    font-family: var(--font-head);
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1;
    letter-spacing: -.02em;
    background: rgba(255, 255, 255, .42);
    border: 1px solid rgba(255, 255, 255, .55);
    box-shadow:
        0 4px 14px rgba(17, 41, 77, .12),
        inset 0 1px 0 rgba(255, 255, 255, .65);
    backdrop-filter: blur(4px);
}
.course-card__banner-fallback {
    position: relative;
    z-index: 1;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: 1.35rem;
    line-height: 1.15;
    text-align: center;
    color: var(--text-muted);
}
/* Themed vendor placeholder banners */
.course-card__banner--business-relationship-management {
    color: #0E7AA8;
    background: linear-gradient(155deg, #EAF6FA 0%, #C8E6F0 48%, #9DD4E6 100%);
}
.course-card__banner--business-relationship-management::before {
    background:
        radial-gradient(circle at 88% 12%, rgba(14, 122, 168, .22) 0, transparent 46%),
        radial-gradient(circle at 8% 92%, rgba(17, 41, 77, .08) 0, transparent 40%);
}
.course-card__banner--change-management {
    color: var(--orange-600);
    background: linear-gradient(155deg, var(--orange-soft) 0%, #F8CFAE 48%, #F0B07E 100%);
}
.course-card__banner--change-management::before {
    background:
        radial-gradient(circle at 10% 90%, rgba(242, 106, 27, .24) 0, transparent 48%),
        repeating-linear-gradient(-45deg, transparent, transparent 8px, rgba(17, 41, 77, .05) 8px, rgba(17, 41, 77, .05) 9px);
}
.course-card__banner--project-management {
    color: #3949AB;
    background: linear-gradient(155deg, #ECEEF8 0%, #D0D6EE 48%, #B3BCE3 100%);
}
.course-card__banner--project-management::before {
    background:
        radial-gradient(circle at 82% 18%, rgba(57, 73, 171, .2) 0, transparent 44%),
        linear-gradient(180deg, transparent 65%, rgba(17, 41, 77, .06) 100%);
}
.course-card__banner--other {
    color: var(--navy);
    background: linear-gradient(155deg, var(--surface-2) 0%, #DDE5EF 48%, #C8D4E2 100%);
}
.course-card__banner--other::before {
    background:
        linear-gradient(90deg, var(--orange) 0, var(--orange) 4px, transparent 4px),
        radial-gradient(circle at 22% 50%, rgba(17, 41, 77, .1) 0, transparent 58%);
}
.course-card__banner--learnership {
    color: #3B82F6;
    background: linear-gradient(155deg, #EBF4FF 0%, #CFE3FC 48%, #A8CFFC 100%);
}
.course-card__banner--learnership::before {
    background:
        radial-gradient(circle at 80% 20%, rgba(59, 130, 246, .22) 0, transparent 46%),
        radial-gradient(circle at 14% 85%, rgba(30, 158, 106, .14) 0, transparent 42%);
}
[data-theme="dark"] .course-card__banner--business-relationship-management {
    color: #67D3EE;
    background: linear-gradient(155deg, #143845 0%, #0F2D38 48%, #0A222C 100%);
}
[data-theme="dark"] .course-card__banner--business-relationship-management .course-card__banner-initial {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(103, 211, 238, .25);
    box-shadow: 0 4px 14px rgba(0, 0, 0, .25), inset 0 1px 0 rgba(255, 255, 255, .08);
}
[data-theme="dark"] .course-card__banner--change-management {
    color: #FBBF24;
    background: linear-gradient(155deg, #3F2818 0%, #2E1C10 48%, #23160C 100%);
}
[data-theme="dark"] .course-card__banner--change-management .course-card__banner-initial {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(251, 191, 36, .25);
}
[data-theme="dark"] .course-card__banner--project-management {
    color: #9FA8DA;
    background: linear-gradient(155deg, #222948 0%, #1A2038 48%, #13182B 100%);
}
[data-theme="dark"] .course-card__banner--project-management .course-card__banner-initial {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(159, 168, 218, .25);
}
[data-theme="dark"] .course-card__banner--other {
    color: var(--navy);
    background: linear-gradient(155deg, #1C2A3A 0%, #162232 48%, #111B28 100%);
}
[data-theme="dark"] .course-card__banner--other .course-card__banner-initial {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(157, 184, 224, .2);
}
[data-theme="dark"] .course-card__banner--learnership {
    color: #93C5FD;
    background: linear-gradient(155deg, #1A3050 0%, #142640 48%, #0F1E32 100%);
}
[data-theme="dark"] .course-card__banner--learnership .course-card__banner-initial {
    background: rgba(255, 255, 255, .08);
    border-color: rgba(147, 197, 253, .25);
}
[data-theme="dark"] .course-card__banner--other::before {
    background:
        linear-gradient(90deg, var(--orange) 0, var(--orange) 4px, transparent 4px),
        radial-gradient(circle at 22% 50%, rgba(157, 184, 224, .14) 0, transparent 58%);
}
/* Title link stretches over the whole card so the entire card is clickable. */
.course-card h3 a::after {
    content: '';
    position: absolute;
    inset: 0;
    z-index: 1;
}
/* Keep the Book-seat button (and price) above the stretched link. */
.course-card .foot { position: relative; z-index: 2; }
.course-card .thumb {
    aspect-ratio: 16 / 9;
    background: var(--surface-2);
    object-fit: cover;
    width: 100%;
}
.course-card .thumb-placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--text-muted);
    font-family: var(--font-head);
    font-weight: 600;
}
.course-card .body {
    flex: 1;
    min-width: 0;
    padding: 1rem 1.15rem;
    display: flex;
    flex-direction: column;
    gap: .5rem;
}
.course-card h3 { font-size: 1rem; margin: 0; line-height: 1.35; }
.course-card h3 a {
    color: var(--text);
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
}
.course-card .meta { color: var(--text-muted); font-size: .8rem; display: flex; gap: .75rem; flex-wrap: wrap; }
.course-card .foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: .5rem; padding-top: .35rem; flex-wrap: wrap; }

.course-card-grid {
    align-items: stretch;
}
.course-card-grid > .course-card {
    height: 100%;
}

/* ---------------------------------------------------------------------------
   Badges & pills
--------------------------------------------------------------------------- */
.badge {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .25rem .6rem;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 500;
    background: var(--orange-soft);
    color: var(--orange-600);
    white-space: nowrap;
}
.badge-neutral { background: var(--surface-2); color: var(--text-muted); }
.badge-success { background: rgba(30, 158, 106, .14); color: var(--success); }
.badge-danger { background: rgba(214, 69, 69, .14); color: var(--danger); }

/* Learnership card badges: NQF accreditation = light blue, duration = brand orange */
.badge-nqf { background: rgba(59, 130, 246, .12); color: #3B82F6; }
[data-theme="dark"] .badge-nqf { color: #93C5FD; }
.badge-duration { background: rgba(124, 58, 237, .12); color: #7C3AED; }
[data-theme="dark"] .badge-duration { color: #C4B5FD; }

/* ---------------------------------------------------------------------------
   Vendor badges (per-vendor colour coding on course cards)
   Solid brand-appropriate text colour over a lighter tint of the same hue.
   Theme-aware: dark mode lightens the text colour for legibility.
--------------------------------------------------------------------------- */
.badge-vendor--microsoft  { background: rgba(37, 99, 235, .12);  color: #2563EB; } /* blue */
.badge-vendor--cisco      { background: rgba(14, 122, 168, .12); color: #0E7AA8; } /* teal/cyan */
.badge-vendor--isc2       { background: rgba(19, 138, 94, .12);  color: #138A5E; } /* green */
.badge-vendor--aws        { background: rgba(217, 119, 6, .12);  color: #D97706; } /* amber */
.badge-vendor--comptia    { background: rgba(220, 38, 38, .12);  color: #DC2626; } /* red */
.badge-vendor--ec-council { background: rgba(124, 58, 237, .12); color: #7C3AED; } /* purple */
.badge-vendor--apmg       { background: rgba(57, 73, 171, .12);  color: #3949AB; } /* indigo/navy */
.badge-vendor--business-relationship-management { background: rgba(14, 122, 168, .12); color: #0E7AA8; }
.badge-vendor--change-management { background: rgba(242, 106, 27, .12); color: var(--orange-600); }
.badge-vendor--project-management { background: rgba(57, 73, 171, .12); color: #3949AB; }
.badge-vendor--other { background: var(--surface-2); color: var(--navy); }
.badge-vendor--learnership { background: rgba(59, 130, 246, .12); color: #3B82F6; }

[data-theme="dark"] .badge-vendor--microsoft  { color: #93C5FD; }
[data-theme="dark"] .badge-vendor--cisco      { color: #67D3EE; }
[data-theme="dark"] .badge-vendor--isc2       { color: #4ADE80; }
[data-theme="dark"] .badge-vendor--aws        { color: #FBBF24; }
[data-theme="dark"] .badge-vendor--comptia    { color: #F87171; }
[data-theme="dark"] .badge-vendor--ec-council { color: #C4B5FD; }
[data-theme="dark"] .badge-vendor--apmg       { color: #9FA8DA; }
[data-theme="dark"] .badge-vendor--business-relationship-management { color: #67D3EE; }
[data-theme="dark"] .badge-vendor--change-management { color: #FBBF24; }
[data-theme="dark"] .badge-vendor--project-management { color: #9FA8DA; }
[data-theme="dark"] .badge-vendor--other { color: var(--navy); }
[data-theme="dark"] .badge-vendor--learnership { color: #93C5FD; }

.status-badge { text-transform: capitalize; }
.status-pending { background: var(--orange-soft); color: var(--orange-600); }
.status-paid { background: rgba(30, 158, 106, .14); color: var(--success); }
.status-cancelled { background: rgba(214, 69, 69, .14); color: var(--danger); }
.status-refunded { background: var(--surface-2); color: var(--text-muted); }

/* ---------------------------------------------------------------------------
   Price
--------------------------------------------------------------------------- */
.price { color: var(--navy); font-weight: 500; }
.price-lg { font-size: 1.6rem; }
/* Price tag — quiet "From" kicker over a confident price, no pill chrome. */
.price-tag {
    display: inline-flex;
    flex-direction: column;
    align-items: flex-end;
    line-height: 1.15;
    white-space: nowrap;
}
.price-tag__from {
    font-size: .66rem;
    font-weight: 600;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--text-muted);
}
.price-tag__amount {
    font-family: var(--font-head);
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--navy);
}

/* ---------------------------------------------------------------------------
   Forms
--------------------------------------------------------------------------- */
label { display: block; font-size: .9rem; font-weight: 500; margin-bottom: .35rem; }

input[type="text"], input[type="email"], input[type="tel"], input[type="password"],
input[type="number"], input[type="search"], input[type="date"], input[type="url"],
select, textarea {
    width: 100%;
    font-family: var(--font-body);
    font-size: .95rem;
    color: var(--text);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .65rem .8rem;
    transition: border-color .15s ease, box-shadow .15s ease;
}
input[type="text"]:focus, input[type="email"]:focus, input[type="tel"]:focus,
input[type="password"]:focus, input[type="number"]:focus, input[type="search"]:focus,
input[type="date"]:focus, input[type="url"]:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 3px var(--ring);
}
textarea { min-height: 120px; resize: vertical; }

/* Radios & checkboxes: clean native orange accent, no square glow. */
input[type="radio"], input[type="checkbox"] { accent-color: var(--orange); }
input[type="radio"]:focus-visible, input[type="checkbox"]:focus-visible {
    outline: 2px solid var(--ring);
    outline-offset: 2px;
}

.field { margin-bottom: 1.1rem; }
.field .hint { color: var(--text-muted); font-size: .8rem; margin-top: .3rem; }
.field .error { color: var(--danger); font-size: .8rem; margin-top: .3rem; }
.field.is-invalid label,
.checkbox-row.is-invalid label { color: var(--danger); }
.field.is-invalid input:not([type="checkbox"]),
.field.is-invalid select,
.field.is-invalid textarea {
    border-color: var(--danger);
    box-shadow: 0 0 0 1px var(--danger);
}
.field.is-invalid input:not([type="checkbox"]):focus,
.field.is-invalid select:focus,
.field.is-invalid textarea:focus {
    border-color: var(--danger);
    box-shadow: 0 0 0 3px rgba(214, 69, 69, .22);
}
.checkbox-row.is-invalid {
    border: 1px solid var(--danger);
    border-radius: var(--radius-sm);
    padding: .5rem .65rem;
    margin: 1rem 0;
}
.checkout-attendees.is-invalid,
.attendee-block.is-invalid {
    border-color: var(--danger);
    box-shadow: 0 0 0 2px rgba(214, 69, 69, .18);
}

.checkbox-row { display: flex; align-items: flex-start; gap: .6rem; }
.checkbox-row input { width: auto; margin-top: .25rem; }
.checkbox-row label { margin: 0; font-weight: 400; }

.honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 1rem; }

/* ---------------------------------------------------------------------------
   Header
--------------------------------------------------------------------------- */
.site-header {
    position: relative;
    flex-shrink: 0;
    z-index: 50;
    background: var(--bg);
    border-bottom: 1px solid var(--border);
}
.header-inner {
    display: flex;
    align-items: center;
    gap: 1.25rem;
    height: 64px;
}
.brand { display: inline-flex; align-items: center; }
.site-nav { display: flex; gap: 2.25rem; margin-left: 1rem; }
.site-nav a {
    position: relative;
    color: var(--text);
    font-size: .95rem;
    padding-bottom: 4px;
    transition: color .18s ease;
}
.site-nav a:hover { color: var(--orange-600); text-decoration: none; }

/* Every nav item carries an underline bar that grows outwards from the
   middle on hover (same motion as the footer links); the current page keeps
   it fully drawn with a subtle glow. The bar is an absolutely-positioned
   ::after so it never shifts the layout. */
.site-nav a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 2px;
    border-radius: 2px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .22s ease;
}
.site-nav a:hover::after { transform: scaleX(1); }
.site-nav a.active,
.site-nav a[aria-current="page"] {
    color: var(--orange-600);
    text-shadow: 0 0 12px rgba(242, 106, 27, .35);
}
.site-nav a.active::after,
.site-nav a[aria-current="page"]::after {
    transform: scaleX(1);
    box-shadow: 0 0 8px rgba(242, 106, 27, .55);
}
.header-actions { display: flex; align-items: center; gap: .35rem; margin-left: auto; }

.icon-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text);
    cursor: pointer;
    position: relative;
    text-decoration: none;
}
.icon-btn:hover { background: var(--surface); }
.header-actions .icon-btn:hover,
.header-actions .icon-btn.is-active {
    background: var(--surface);
    border-color: var(--orange);
}
.header-actions .icon-btn.is-active {
    color: var(--orange-600);
}
.icon-btn svg { width: 20px; height: 20px; }

/* Theme toggle — show the icon for the theme you'd switch *to*. */
.theme-toggle__sun { display: none; }
.theme-toggle__moon { display: block; }
[data-theme="dark"] .theme-toggle__sun { display: block; }
[data-theme="dark"] .theme-toggle__moon { display: none; }

.cart-bubble {
    position: absolute;
    top: 2px;
    right: 2px;
    min-width: 18px;
    height: 18px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--orange);
    color: #fff;
    font-size: .7rem;
    line-height: 18px;
    text-align: center;
    font-weight: 600;
}

.header-search { position: relative; }
.header-search form { display: flex; }
.header-search input { width: 220px; }

.account-menu { position: relative; }
.dropdown {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    min-width: 220px;
    background: var(--bg);
    border: 1px solid var(--orange);
    border-radius: var(--radius);
    padding: .5rem;
    z-index: 60;
    box-shadow: 0 14px 40px rgba(17, 41, 77, .14);
}
.dropdown a:not(.btn),
.dropdown button:not(.btn) {
    display: block;
    width: 100%;
    text-align: left;
    padding: .5rem .65rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    background: transparent;
    border: 0;
    font: inherit;
    cursor: pointer;
}
.dropdown a:not(.btn):hover,
.dropdown button:not(.btn):hover { background: var(--surface); text-decoration: none; }

/* Mini-cart */
.mini-cart { min-width: 320px; }
.mini-cart .mc-item { display: flex; gap: .6rem; padding: .6rem 0; border-bottom: 1px solid var(--border); align-items: center; }
.mini-cart .mc-item:last-of-type { border-bottom: 0; }
.mini-cart .mc-title { font-weight: 500; font-size: .9rem; }
.mini-cart .mc-meta { color: var(--text-muted); font-size: .8rem; }
.mini-cart .mc-subtotal { display: flex; justify-content: space-between; padding: .75rem 0; font-weight: 500; }
.mini-cart .mc-actions { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem; }
.mini-cart .mc-actions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
}
.mini-cart .mc-empty { padding: 1rem .25rem; color: var(--text-muted); }

/* Hamburger / mobile nav */
.hamburger { display: none; }
.mobile-nav { display: none; }

/* ---------------------------------------------------------------------------
   Hero — "Living Path": a live canvas of learning-path nodes behind the copy.
   Markup: <section class="hero-live" data-pathfield> with the canvas injected
   by pathfield.js; copy sits left, the field breathes across the full bleed.
--------------------------------------------------------------------------- */
.hero-live {
    position: relative;
    min-height: 540px;
    display: flex;
    align-items: center;
    padding: 3rem 0 2.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    /* No overflow clipping — the search-suggest panel hangs below the fold. */
}
.pathfield-canvas {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
}
.hero-live__content {
    position: relative;
    z-index: 1;
    pointer-events: none; /* let the field receive hovers/clicks… */
}
.hero-live__copy { max-width: 560px; }
.hero-live__copy a,
.hero-live__copy button,
.hero-live__copy input,
.hero-live__copy form { pointer-events: auto; } /* …except real controls */

.hero-live__eyebrow {
    display: inline-block;
    font-family: var(--font-head);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--orange-600);
    margin-bottom: .75rem;
}
.hero-live h1 { max-width: 20ch; }
.hero-live__accent { color: var(--orange-600); }
/* "Start yours." always sits on its own line under the full phrase. */
.hero-live__accent--block { display: block; }
.hero-live .lead {
    font-size: 1.1rem;
    color: var(--text-muted);
    max-width: 46ch;
    /* Soft plate so the drifting field never fights the copy for legibility. */
    text-shadow: 0 0 18px var(--surface), 0 0 6px var(--surface);
}
.hero-live__hint {
    position: absolute;
    right: 1.25rem;
    bottom: .6rem;
    z-index: 1;
    margin: 0;
    font-size: .75rem;
    color: var(--text-muted);
    opacity: .75;
    pointer-events: none;
}
/* Deterministic wrap so a late-loading webfont can't reflow the headline. */
.hero-h1-br { display: none; }
@media (min-width: 700px) { .hero-h1-br { display: inline; } }

@media (max-width: 768px) {
    /* Phones: the node field doesn't render, so the hero is just the copy. */
    .hero-live { min-height: auto; padding: 2rem 0 2.5rem; align-items: flex-start; }
    .hero-live__copy { max-width: none; }
    .hero-live__hint, .pathfield-canvas { display: none; }
}
.hero-search { display: flex; gap: .6rem; margin: 1.5rem 0 .75rem; max-width: 640px; flex-wrap: wrap; }
.hero-search input { flex: 1; min-width: 240px; }

.trust-strip {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem 1.25rem;
    color: var(--text-muted);
    font-size: .9rem;
    padding: 1rem 0;
}
.trust-strip span { display: inline-flex; align-items: center; gap: .5rem; }

/* Category tiles */
.category-tile {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    padding: 1.25rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    color: var(--text);
    text-align: left;
}
.category-tile { transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease; }
.category-tile:hover {
    border-color: var(--orange);
    box-shadow: 0 0 0 1px var(--orange), 0 8px 24px rgba(242, 106, 27, .28);
    text-decoration: none;
    transform: translateY(-2px);
}
.category-tile .cat-icon {
    width: 40px; height: 40px;
    display: flex; align-items: center; justify-content: center;
    border-radius: var(--radius-sm);
    /* Default (Microsoft 365 and any unmapped category): orange. */
    background: var(--orange-soft); color: var(--orange-600);
}
/* Field colour-coding: solid icon tone over a lighter tint of the same hue. */
.category-tile .cat-icon--cybersecurity      { background: rgba(220, 38, 38, .12);  color: #DC2626; } /* red */
.category-tile .cat-icon--cloud              { background: rgba(59, 130, 246, .12);  color: #3B82F6; } /* light blue */
.category-tile .cat-icon--networking         { background: rgba(22, 163, 74, .12);   color: #16A34A; } /* green */
.category-tile .cat-icon--data-ai            { background: rgba(124, 58, 237, .12);   color: #7C3AED; } /* purple */
.category-tile .cat-icon--project-management { background: rgba(30, 64, 175, .14);    color: #1E40AF; } /* darker blue */

[data-theme="dark"] .category-tile .cat-icon--cybersecurity      { color: #F87171; }
[data-theme="dark"] .category-tile .cat-icon--cloud              { color: #93C5FD; }
[data-theme="dark"] .category-tile .cat-icon--networking         { color: #4ADE80; }
[data-theme="dark"] .category-tile .cat-icon--data-ai            { color: #C4B5FD; }
[data-theme="dark"] .category-tile .cat-icon--project-management { color: #60A5FA; }

.category-tile .cat-name { font-family: var(--font-head); font-weight: 600; }

/* Upcoming dates strip */
.dates-list { display: flex; flex-direction: column; }
.date-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .9rem 0;
    border-bottom: 1px solid var(--border);
    flex-wrap: wrap;
}
.date-row:last-child { border-bottom: 0; }
.date-row .d-date { font-weight: 500; min-width: 130px; }
.date-row .d-course { flex: 1; min-width: 200px; }
.date-row .d-course a { color: var(--text); }

/* Vendor partners — compact seamless grid */
.vendor-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1px;
    background: var(--border);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    overflow: hidden;
}
.vendor-partners__more[hidden] { display: none !important; }
.vendor-partners__actions {
    margin-top: 1.25rem;
    text-align: center;
}

.vendor-card {
    display: flex;
    flex-direction: column;
    background: var(--bg);
    text-decoration: none;
    transition: background .15s ease;
}
.vendor-card:hover {
    background: var(--surface);
    text-decoration: none;
}
.vendor-card__media {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: .65rem 1rem;
    background: var(--bg);
    overflow: hidden;
    height: 8.25rem;
}

.vendor-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
}
/* Per-vendor logo size tweaks — scoped to the "Our vendor partners" section
   only (.vendor-partners) so these never affect logos elsewhere on the site. */
.vendor-partners .vendor-card--oracle .vendor-card__media img { transform: scale(0.5); }
.vendor-partners .vendor-card--red-hat .vendor-card__media img { transform: scale(0.85); }
.vendor-partners .vendor-card--itil .vendor-card__media img { transform: scale(0.7); }
.vendor-partners .vendor-card--peoplecert .vendor-card__media img { transform: scale(0.85); }
.vendor-partners .vendor-card--cloud-credential-council .vendor-card__media img { transform: scale(0.8); }

.vendor-card__fallback {
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .85rem;
    color: var(--text-muted);
    text-align: center;
}
.vendor-card__label {
    padding: .55rem .6rem;
    text-align: center;
    font-family: var(--font-head);
    font-weight: 700;
    font-size: .9rem;
    line-height: 1.3;
    color: var(--text);
    background: var(--surface);
    border-top: 1px solid var(--border);
    white-space: normal;
}
.vendor-card:hover .vendor-card__label { color: var(--text); }
.vendor-row .vendor-name {
    font-family: var(--font-head);
    font-weight: 600;
    color: var(--text-muted);
    font-size: 1.05rem;
}

/* Navy CTA band */
.cta-band {
    background: var(--navy);
    color: #fff;
    border-radius: var(--radius);
    padding: 2rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
[data-theme="dark"] .cta-band { background: var(--surface-2); }
.cta-band h2 { color: #fff; margin: 0; }
[data-theme="dark"] .cta-band h2 { color: var(--text); }
.cta-band .btn-ghost {
    background: #fff;
    border-color: #fff;
    color: #0F1E33;
}
.cta-band .btn-ghost:hover {
    background: #F6F8FB;
    border-color: #F6F8FB;
    color: #0F1E33;
    text-decoration: none;
}

/* ---------------------------------------------------------------------------
   Catalogue
--------------------------------------------------------------------------- */
.catalogue { display: grid; grid-template-columns: 260px 1fr; gap: 2rem; align-items: start; }
/* The filter rail rides along as you scroll the catalogue; when it's taller
   than the viewport it scrolls internally. (Mobile keeps its toggle sheet.) */
@media (min-width: 769px) {
    .catalogue .filters {
        position: sticky;
        top: 1rem;
        max-height: calc(100dvh - 100px); /* header + breathing room */
        overflow-y: auto;
        overflow-x: hidden; /* vertical rail only — never a horizontal bar */
        overscroll-behavior: contain;
        padding-right: .35rem;
    }
}
.filters .filter-group { margin-bottom: 1.5rem; }
.filters h4 { margin: 0 0 .6rem; font-size: .9rem; }
/* Filter rows — custom radios: quiet rows that light up orange when active. */
.filter-option {
    display: flex;
    align-items: center;
    gap: .55rem;
    /* No negative bleed — inside the scrollable rail it forced a horizontal
       scrollbar (overflow-y:auto makes overflow-x compute to auto too). */
    margin: 0 0 .1rem;
    padding: .38rem .6rem;
    border-radius: var(--radius-sm);
    font-size: .9rem;
    color: var(--text-muted);
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease;
}
.filter-option:hover { background: var(--surface); color: var(--text); }
.filter-option input {
    appearance: none;
    -webkit-appearance: none;
    width: 15px;
    height: 15px;
    margin: 0;
    flex-shrink: 0;
    border: 1.5px solid var(--border-strong);
    border-radius: 50%;
    background: var(--bg);
    position: relative;
    cursor: pointer;
    transition: border-color .15s ease;
}
.filter-option input:hover { border-color: var(--orange); }
.filter-option input:checked { border-color: var(--orange); }
.filter-option input:checked::after {
    content: "";
    position: absolute;
    inset: 2.5px;
    border-radius: 50%;
    background: var(--orange);
}
.filter-option input:focus-visible { outline: 2px solid var(--ring); outline-offset: 2px; }
.filter-option:has(input:checked) {
    background: var(--orange-soft);
    color: var(--orange-600);
    font-weight: 600;
}
.vendor-more-toggle {
    margin-top: .4rem;
    padding: 0;
    background: none;
    border: 0;
    color: var(--orange);
    font-size: .85rem;
    font-weight: 600;
    cursor: pointer;
}
.vendor-more-toggle:hover { text-decoration: underline; }

/* Payflex promo card — self-contained dark card. Custom properties are scoped
   to .pf-card so they never override the site's global --navy / --orange. */
.pf-card {
    --pf-navy: #14284c;
    --pf-navy-2: #1f3a6e;
    --pf-navy-line: rgba(255, 255, 255, .14);
    --pf-orange: #f47a21;
    --pf-white: #ffffff;
    --pf-ink-soft: rgba(255, 255, 255, .72);

    width: 100%;
    max-width: 360px;
    background: var(--pf-navy);
    background-image: radial-gradient(120% 90% at 100% 0%, var(--pf-navy-2) 0%, var(--pf-navy) 55%);
    border-radius: 18px;
    padding: 22px 22px 20px;
    color: var(--pf-white);
    position: relative;
    overflow: hidden;
    box-shadow: 0 18px 40px -18px rgba(20, 40, 76, .55);
    opacity: 0;
    transform: translateY(14px);
    animation: pfRise .55s cubic-bezier(.2, .6, .2, 1) .05s forwards;
}
@keyframes pfRise { to { opacity: 1; transform: none; } }

.pf-card::before {
    content: ""; position: absolute; inset: 0 0 auto 0; height: 4px;
    background: linear-gradient(90deg, var(--pf-orange), #ffb066);
}

.pf-eyebrow {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 11px; font-weight: 700; letter-spacing: .12em;
    color: var(--pf-orange); background: rgba(244, 122, 33, .16);
    padding: 6px 11px; border-radius: 999px; text-transform: uppercase;
}
.pf-eyebrow .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--pf-orange); }

.pf-head { font-size: 21px; line-height: 1.18; font-weight: 800; margin: 14px 0 4px; letter-spacing: -.01em; color: var(--pf-white); }
.pf-sub { font-size: 13px; line-height: 1.5; color: var(--pf-ink-soft); margin: 0 0 18px; }

.pf-meter { margin: 0 0 6px; }
.pf-track { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.pf-seg { height: 9px; border-radius: 5px; background: rgba(255, 255, 255, .12); position: relative; overflow: hidden; }
.pf-seg::after {
    content: ""; position: absolute; inset: 0; border-radius: 5px;
    background: var(--pf-orange); transform: scaleX(0); transform-origin: left;
    transition: transform .45s cubic-bezier(.2, .6, .2, 1);
}
.pf-seg.now::after { transform: scaleX(1); }
.pf-card:hover .pf-seg::after { transform: scaleX(1); }
.pf-card:hover .pf-seg:nth-child(2)::after { transition-delay: .06s; }
.pf-card:hover .pf-seg:nth-child(3)::after { transition-delay: .12s; }
.pf-card:hover .pf-seg:nth-child(4)::after { transition-delay: .18s; }

.pf-labels {
    display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px;
    margin-top: 9px; font-size: 10.5px; color: var(--pf-ink-soft); letter-spacing: .02em;
}
.pf-labels span { text-align: center; }
.pf-labels span:first-child { color: var(--pf-orange); font-weight: 700; }

.pf-eg {
    display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
    margin: 18px 0 18px; padding: 12px 14px;
    background: rgba(255, 255, 255, .05); border: 1px solid var(--pf-navy-line); border-radius: 12px;
}
.pf-eg .from { font-size: 12px; color: var(--pf-ink-soft); }
.pf-eg .total {
    font-size: 14px; font-weight: 600; text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, .35); color: var(--pf-ink-soft);
}
.pf-eg .arrow { color: var(--pf-orange); font-weight: 700; }
.pf-eg .split { font-size: 17px; font-weight: 800; }
.pf-eg .split b { color: var(--pf-orange); }
.pf-eg .mo { font-size: 12px; color: var(--pf-ink-soft); }

.pf-foot { display: flex; align-items: center; gap: 14px; }
.pf-logo {
    flex: 0 0 auto; background: #fff; border-radius: 10px;
    padding: 9px 14px; display: flex; align-items: center;
}
.pf-logo img { display: block; height: 26px; width: auto; }

.pf-cta {
    flex: 1 1 auto; border: 0; cursor: pointer; font-family: inherit;
    background: var(--pf-orange); color: #fff;
    font-size: 14px; font-weight: 700; letter-spacing: .01em;
    padding: 13px 16px; border-radius: 11px;
    display: inline-flex; align-items: center; justify-content: center; gap: 8px;
    transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
    box-shadow: 0 8px 18px -8px rgba(244, 122, 33, .7);
    text-decoration: none;
}
.pf-cta:hover { background: #d9640d; box-shadow: 0 12px 22px -8px rgba(244, 122, 33, .8); text-decoration: none; }
.pf-cta:active { transform: translateY(1px); }
.pf-cta:focus-visible { outline: 3px solid #ffd0a3; outline-offset: 2px; }
.pf-cta svg { transition: transform .18s ease; }
.pf-cta:hover svg { transform: translateX(3px); }

.pf-fine { margin: 13px 2px 0; font-size: 10.5px; color: rgba(255, 255, 255, .5); text-align: center; }

@media (prefers-reduced-motion: reduce) {
    .pf-card { opacity: 1; transform: none; animation: none; }
    .pf-seg::after { transform: scaleX(1); transition: none; }
}

.active-filters { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1rem; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    padding: .3rem .7rem;
    border-radius: 999px;
    background: var(--surface-2);
    color: var(--text);
    font-size: .8rem;
}
.chip a { color: var(--text-muted); font-weight: 700; }
.chip a:hover { color: var(--danger); text-decoration: none; }

.catalogue-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 1rem; flex-wrap: wrap; }
.result-count { color: var(--text-muted); font-size: .9rem; }

.pagination {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: .65rem 1rem;
    margin-top: 2rem;
    justify-content: center;
    align-items: center;
}
.pagination__main {
    display: flex;
    align-items: center;
    gap: .5rem;
}
.pagination a, .pagination span {
    padding: .45rem .8rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text);
    box-sizing: border-box;
}
.pagination__arrow {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.05rem;
    height: 2.05rem;
    padding: 0;
    text-decoration: none;
    font-size: 1.1rem;
    line-height: 1;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pagination a.pagination__arrow:hover {
    border-color: var(--orange);
    box-shadow: 0 0 0 1px var(--orange);
    text-decoration: none;
    color: var(--text);
}
.pagination__arrow--disabled {
    opacity: .35;
    pointer-events: none;
    border: 1px solid var(--border);
}
.pagination__status {
    border: none;
    padding: 0 .15rem;
    font-size: .88rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.pagination__jump {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
}
.pagination__jump-label {
    font-size: .82rem;
    color: var(--text-muted);
    white-space: nowrap;
}
.pagination__jump-input,
.pagination__go {
    box-sizing: border-box;
    height: 2.05rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    font-size: .82rem;
    line-height: 1;
    transition: border-color .15s ease, box-shadow .15s ease;
}
.pagination__jump-input {
    width: 1.85rem;
    min-width: 1.85rem;
    padding: 0 .1rem;
    color: var(--text);
    background: var(--bg);
    text-align: center;
    -moz-appearance: textfield;
    appearance: textfield;
}
.pagination__jump-input::-webkit-outer-spin-button,
.pagination__jump-input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.pagination__jump-input:focus {
    outline: none;
    border-color: var(--orange);
    box-shadow: 0 0 0 1px var(--orange);
}
.pagination__go {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2.05rem;
    padding: 0 .45rem;
    background: transparent;
    color: var(--text);
    cursor: pointer;
    font-family: inherit;
    font-weight: 500;
}
.pagination__go:hover {
    border-color: var(--orange);
    box-shadow: 0 0 0 1px var(--orange);
}
.pagination .active { background: var(--navy); color: #fff; border-color: var(--navy); }
[data-theme="dark"] .pagination .active { color: var(--bg); }

.empty-state { text-align: center; padding: 3rem 1rem; color: var(--text-muted); }

.filters-toggle { display: none; }

/* ---------------------------------------------------------------------------
   Course detail
--------------------------------------------------------------------------- */
.course-detail { display: grid; grid-template-columns: 1fr 360px; gap: 2.5rem; align-items: stretch; }
.course-detail > aside { min-height: 0; }
.course-detail .outline-list { padding-left: 1.2rem; }
.course-detail .outline-list li { margin-bottom: .4rem; }
.facts { display: flex; flex-wrap: wrap; gap: 1.25rem; margin: 1rem 0; }
.fact { display: flex; flex-direction: column; }
.fact .label { font-size: .75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: .04em; }
.fact .value { font-weight: 500; }

/* Tabs (CSS-only, work without JS) */
.tabs { margin-top: 1.5rem; }
.tab-radio { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.tab-bar { display: flex; gap: .25rem; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin-bottom: 1.5rem; }
.tab-bar label {
    margin: 0;
    padding: .65rem 1rem;
    font-weight: 500;
    color: var(--text-muted);
    cursor: pointer;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    white-space: nowrap;
}
.tab-bar label:hover { color: var(--text); }
.tab-panel { display: none; }

#ct-about:checked ~ #p-about,
#ct-path:checked ~ #p-path,
#ct-content:checked ~ #p-content,
#ct-cert:checked ~ #p-cert { display: block; }

#ct-about:checked ~ .tab-bar label[for="ct-about"],
#ct-path:checked ~ .tab-bar label[for="ct-path"],
#ct-content:checked ~ .tab-bar label[for="ct-content"],
#ct-cert:checked ~ .tab-bar label[for="ct-cert"] {
    color: var(--orange-600);
    border-bottom-color: var(--orange);
}
.tab-radio:focus-visible ~ .tab-bar label { outline: 2px solid var(--ring); }

/* Learning-path mindmap */
.mindmap { display: flex; align-items: center; gap: 0; flex-wrap: wrap; }
.mm-root {
    background: var(--navy);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 600;
    padding: .9rem 1.1rem;
    border-radius: var(--radius);
    max-width: 240px;
    position: relative;
    margin-right: 28px;
}
[data-theme="dark"] .mm-root { background: var(--surface-2); color: var(--text); }
.mm-root::after {
    content: '';
    position: absolute;
    right: -28px;
    top: 50%;
    width: 28px;
    height: 2px;
    background: var(--border-strong);
}
.mm-branches { position: relative; padding-left: 28px; display: flex; flex-direction: column; gap: .75rem; flex: 1; min-width: 240px; }
.mm-branches::before { content: ''; position: absolute; left: 0; top: 20px; bottom: 20px; width: 2px; background: var(--border-strong); }
.mm-branch { position: relative; }
.mm-branch::before {
    content: '';
    position: absolute;
    left: -28px;
    top: 20px;
    width: 28px;
    height: 2px;
    background: var(--border-strong);
}
.mm-node {
    display: inline-block;
    background: var(--orange-soft);
    color: var(--orange-600);
    border: 1px solid var(--orange);
    border-radius: 999px;
    padding: .45rem .9rem;
    font-weight: 500;
}
.mm-leaves { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .5rem; padding-left: .5rem; }
.mm-leaf {
    font-size: .8rem;
    background: var(--surface-2);
    color: var(--text-muted);
    border-radius: var(--radius-sm);
    padding: .2rem .55rem;
}

@media (max-width: 640px) {
    .mindmap { flex-direction: column; align-items: stretch; }
    .mm-root { margin-right: 0; margin-bottom: 1rem; max-width: none; }
    .mm-root::after { display: none; }
    .mm-branches { padding-left: 16px; }
    .mm-branches::before { left: 0; }
    .mm-branch::before { left: -16px; width: 16px; }

    .vendor-card__media { height: 6rem; }
    .vendor-card__label { font-size: .82rem; padding: .45rem .4rem; }
}

/* Hierarchical learning-path mindmap (category paths) */
.mindmap-v2 { margin-top: 1rem; }

/* Interactive hub mindmap — root → vendors → levels → courses */
.mindmap-hub {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0;
    width: 100%;
}
.mindmap-hub__root {
    background: var(--navy);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: 1rem;
    padding: .85rem 1.35rem;
    border-radius: var(--radius);
    text-align: center;
    max-width: min(100%, 420px);
}
[data-theme="dark"] .mindmap-hub__root {
    background: var(--surface-2);
    color: var(--text);
    border: 1px solid var(--border-strong);
}
.mindmap-hub__connector {
    width: 2px;
    height: 1.5rem;
    background: var(--border-strong);
}
.mindmap-hub__spokes {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: .5rem;
    width: 100%;
    padding: .25rem 0 .5rem;
    position: relative;
}
.mindmap-hub__spokes::before {
    content: '';
    position: absolute;
    top: 0;
    left: 10%;
    right: 10%;
    height: 2px;
    background: var(--border-strong);
}
.mindmap-hub__vendor {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    gap: .15rem;
    margin-top: .65rem;
    padding: .5rem .85rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--surface);
    color: var(--text);
    font-family: var(--font-body);
    font-size: .82rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
    position: relative;
    z-index: 1;
}
.mindmap-hub__vendor::before {
    content: '';
    position: absolute;
    top: -.65rem;
    left: 50%;
    width: 2px;
    height: .65rem;
    background: var(--border-strong);
    transform: translateX(-50%);
}
.mindmap-hub__vendor:hover {
    border-color: var(--orange);
    color: var(--orange-600);
}
.mindmap-hub__vendor.is-active {
    background: var(--orange-soft);
    border-color: var(--orange);
    color: var(--orange-600);
    box-shadow: 0 0 0 1px rgba(242, 106, 27, .25);
}
.mindmap-hub__vendor-name { font-weight: 600; line-height: 1.2; }
.mindmap-hub__vendor-count {
    font-size: .7rem;
    color: var(--text-muted);
    font-weight: 400;
}
.mindmap-hub__vendor.is-active .mindmap-hub__vendor-count { color: var(--orange-600); opacity: .85; }

.mindmap-hub__detail {
    width: 100%;
    margin-top: 1rem;
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--surface);
    min-height: 4rem;
}
.mindmap-hub__panel { padding: 1rem 1.15rem; }
.mindmap-hub__panel[hidden] { display: none !important; }
.mindmap-hub__levels {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    margin-bottom: .85rem;
    padding-bottom: .85rem;
    border-bottom: 1px solid var(--border);
}
.mindmap-hub__level {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    padding: .35rem .75rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text-muted);
    font-size: .8rem;
    font-weight: 500;
    cursor: pointer;
    transition: border-color .15s ease, background .15s ease, color .15s ease;
}
.mindmap-hub__level:hover {
    border-color: var(--orange);
    color: var(--orange-600);
}
.mindmap-hub__level.is-active {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}
[data-theme="dark"] .mindmap-hub__level.is-active {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text);
}
.mindmap-hub__level-count {
    font-size: .68rem;
    opacity: .75;
}
.mindmap-hub__courses {
    list-style: none;
    margin: 0;
    padding: 0;
    max-height: 16rem;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: .35rem;
}
.mindmap-hub__courses[hidden] { display: none !important; }
.mindmap-hub__course {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .55rem .75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font-size: .85rem;
    line-height: 1.35;
    text-decoration: none;
    transition: border-color .15s ease, background .15s ease;
}
a.mindmap-hub__course:hover {
    border-color: var(--orange);
    background: var(--orange-soft);
    color: var(--orange-600);
    text-decoration: none;
}
.mindmap-hub__course.is-current {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
}
a.mindmap-hub__course.is-current:hover {
    color: #fff;
    filter: brightness(1.05);
}
[data-theme="dark"] .mindmap-hub__course.is-current {
    background: var(--surface-2);
    border-color: var(--border-strong);
    color: var(--text);
}

.mm-tree-root {
    display: inline-block;
    background: var(--navy);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 600;
    padding: .85rem 1.15rem;
    border-radius: var(--radius);
    margin-bottom: 1.25rem;
}
.mm-tree { list-style: none; margin: 0; padding-left: 1.25rem; border-left: 2px solid var(--border-strong); }
.mm-tree--root { padding-left: 0; border-left: 0; }
.mm-tree-item { margin: .5rem 0; position: relative; }
.mm-tree-node {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    flex-wrap: wrap;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    padding: .4rem .75rem;
    font-size: .9rem;
    font-weight: 500;
}
.mm-tree-node.is-linked { background: var(--orange-soft); border-color: var(--orange); color: var(--orange-600); text-decoration: none; }
.mm-tree-node.is-linked:hover { text-decoration: none; filter: brightness(.98); }
.mm-tree-node.is-current {
    background: var(--navy);
    border-color: var(--navy);
    color: #fff;
    box-shadow: 0 0 0 3px var(--ring);
}
.mm-tree-node.is-current.is-linked { color: #fff; }
.mm-you-are-here {
    font-size: .7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    background: var(--orange);
    color: #fff;
    padding: .1rem .45rem;
    border-radius: 999px;
}
.course-hero {
    margin: 1rem 0;
    border-radius: var(--radius);
    overflow: hidden;
    border: 1px solid var(--border);
    max-width: 420px;
}
.course-hero img { display: block; width: 100%; height: auto; }

/* Contact page locations + maps */
.contact-layout {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: auto 1fr;
    gap: 1.25rem 2rem;
    align-items: start;
}
.contact-layout__title,
.contact-layout__locations-title {
    margin: 0;
    align-self: start;
}
.contact-layout__title {
    grid-column: 1;
    grid-row: 1;
}
.contact-layout__locations-title {
    grid-column: 2;
    grid-row: 1;
    font-size: clamp(2rem, 5vw, 2.6rem);
    font-weight: 500;
}
.contact-layout__main {
    grid-column: 1;
    grid-row: 2;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
    align-self: stretch;
    min-height: 0;
}
.contact-layout__lead {
    margin: 0;
    font-size: 1.05rem;
    line-height: 1.55;
    max-width: 52ch;
}
.contact-layout__main form { width: 100%; flex-shrink: 0; }
.contact-layout__locations {
    grid-column: 2;
    grid-row: 2;
    align-self: stretch;
}

.contact-whatsapp {
    margin-top: auto;
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1.25rem 1.35rem;
    background: rgba(37, 211, 102, .1);
    border: 1px solid rgba(37, 211, 102, .35);
    border-radius: var(--radius);
}
.contact-whatsapp__icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
}
.contact-whatsapp__text {
    flex: 1;
    min-width: min(100%, 14rem);
}
.contact-whatsapp__text h3 {
    margin: 0 0 .25rem;
    font-size: 1.05rem;
    color: #128C7E;
}
.contact-whatsapp__text p {
    margin: 0;
    font-size: .9rem;
}
.btn-whatsapp {
    background: #25D366;
    border: 1px solid #25D366;
    color: #fff;
    flex-shrink: 0;
}
.btn-whatsapp:hover {
    background: #1EBE5B;
    border-color: #1EBE5B;
    color: #fff;
    text-decoration: none;
}
[data-theme="dark"] .contact-whatsapp {
    background: rgba(37, 211, 102, .14);
    border-color: rgba(37, 211, 102, .4);
}
[data-theme="dark"] .contact-whatsapp__text h3 { color: #5FE89A; }

.location-list { display: flex; flex-direction: column; gap: 1rem; }
.location-card h3 { display: flex; align-items: center; gap: .5rem; margin: 0 0 .35rem; }
.location-contacts { display: flex; flex-wrap: wrap; gap: .5rem; align-items: center; margin: .25rem 0 1rem; font-size: .9rem; }
.map-frame {
    position: relative;
    width: 100%;
    aspect-ratio: 32 / 9;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface-2);
    margin-bottom: .75rem;
}
.map-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

.contact-cta {
    padding: 2rem;
    background: #11294D;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius);
    position: relative;
    overflow: hidden;
}
.contact-vendor-band {
    background: #11294D;
    padding: 2.5rem 0;
    margin-top: 0;
}
.contact-vendor-band .contact-cta {
    margin-top: 0;
    padding: 0;
    background: transparent;
    border: none;
    border-radius: 0;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 2rem;
    flex-wrap: wrap;
}
.contact-cta__content { position: relative; flex: 1; min-width: min(100%, 36rem); }
.contact-cta__eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: .5rem;
}
.contact-cta h2 { margin: 0 0 .6rem; color: #fff; }
.contact-cta p { color: rgba(255, 255, 255, .82); max-width: 48ch; margin-bottom: 0; }
.contact-vendor-band .contact-cta p { margin-bottom: 0; }
.contact-cta .btn { flex-shrink: 0; }

/* Events — card thumbnail (top-right square) */
.event-card {
    position: relative;
}
.event-card--has-media {
    padding-right: calc(1.5rem + 5.5rem + 1rem);
}
.event-card__media {
    position: absolute;
    top: 1.5rem;
    right: 1.5rem;
    width: 5.5rem;
    height: 5.5rem;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-sm);
    overflow: hidden;
    border: 1px solid var(--border);
    background: var(--surface-2);
}
.event-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.event-card h3 { margin-top: 0; padding-right: 0; }
.event-card .article-meta { margin-bottom: 1rem; }

/* Learnerships — Career Campus intro */
.campus-intro {
    margin: 1.75rem 0 2rem;
    padding: 1.75rem 2rem;
    background: var(--surface);
    border: 1px solid var(--border);
    border-left: 4px solid var(--orange);
    border-radius: var(--radius);
}
.campus-intro__eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--orange-600);
    margin-bottom: .35rem;
}
.campus-intro h2 { margin: 0 0 .6rem; }
.campus-intro p { color: var(--text-muted); max-width: 70ch; margin: 0; }
.campus-intro__actions { margin: 1.25rem 0 0; }
.about-intro { max-width: 70ch; margin-bottom: 1.5rem; }

.learnership-card { display: flex; flex-direction: column; align-items: stretch; }
/* Uniform picture frame: every card's image window is the same size; the
   photo covers it (cropped, never stretched or squashed). */
.learnership-card__media {
    height: 180px;
    overflow: hidden;
    border-bottom: 1px solid var(--border);
    background: var(--surface-2);
}
.learnership-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}
.learnership-card__body {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
    padding: 1.5rem;
    flex: 1;
}
.learnership-card__meta { display: flex; flex-wrap: wrap; gap: .4rem; }
.learnership-card h3 { margin: 0; }
.learnership-card .btn { margin-top: auto; }

/* Brochure download CTA */
.brochure-cta {
    margin-top: 2.5rem;
    padding: 2rem;
    background: #11294D;
    color: #fff;
    border: 1px solid rgba(255, 255, 255, .08);
    border-radius: var(--radius);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.5rem;
    flex-wrap: wrap;
}
.brochure-cta__eyebrow {
    display: inline-block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: .35rem;
}
.brochure-cta h3 { margin: 0 0 .4rem; color: #fff; }
.brochure-cta p { margin: 0; color: rgba(255, 255, 255, .82); max-width: 52ch; }
.brochure-cta__text { flex: 1; min-width: 260px; }

/* Booking + Payflex float together as one sticky stack so they never clash. */
.booking-stack {
    position: sticky;
    top: 88px;
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.booking-stack .booking-card {
    position: static;
    top: auto;
}
.booking-stack .pf-card { max-width: none; }

/* View-calendar button */
.booking-cal-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; margin-top: .75rem; }
.booking-cal-btn svg { flex: 0 0 auto; }

/* Calendar modal */
.cal-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 1.25rem; }
.cal-modal[hidden] { display: none; }
.cal-modal__backdrop { position: absolute; inset: 0; background: rgba(15, 30, 51, .55); backdrop-filter: blur(2px); }
.cal-modal__dialog {
    position: relative;
    width: 100%;
    max-width: 480px;
    max-height: 86vh;
    overflow-y: auto;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 24px 60px -20px rgba(15, 30, 51, .55);
    padding: 1.25rem 1.4rem 1.4rem;
}
.cal-modal__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.cal-modal__head h3 { margin: 0; font-size: 1.1rem; }
.cal-modal__close { border: 0; background: none; font-size: 1.6rem; line-height: 1; color: var(--text-muted); cursor: pointer; padding: 0 .25rem; }
.cal-modal__close:hover { color: var(--text); }

.cal-nav { display: flex; align-items: center; justify-content: space-between; margin-bottom: .75rem; }
.cal-nav__label { font-family: var(--font-head); font-weight: 700; font-size: 1rem; }
.cal-nav__btn {
    width: 2rem; height: 2rem; border-radius: 50%;
    border: 1px solid var(--border); background: var(--bg); color: var(--text);
    font-size: 1.2rem; line-height: 1; cursor: pointer;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .15s ease, border-color .15s ease;
}
.cal-nav__btn:hover:not(:disabled) { background: var(--surface); border-color: var(--border-strong); }
.cal-nav__btn:disabled { opacity: .35; cursor: default; }

.cal-weekdays, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; }
.cal-weekdays { margin-bottom: 4px; }
.cal-weekdays span { text-align: center; font-size: .7rem; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }

.cal-cell {
    position: relative;
    aspect-ratio: 1 / 1;
    border: 1px solid transparent;
    border-radius: var(--radius-sm, 8px);
    background: var(--surface);
    color: var(--text);
    font-size: .85rem;
    font-weight: 500;
    cursor: default;
    display: flex; align-items: center; justify-content: center;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.cal-cell--blank { background: transparent; border: 0; }
.cal-cell--empty { color: var(--text-muted); opacity: .5; background: transparent; }
.cal-cell--has { cursor: pointer; font-weight: 700; }
.cal-cell--bookable { border-color: var(--navy); }
.cal-cell--bookable:hover { background: var(--orange-soft); border-color: var(--orange); }
.cal-cell--full { color: var(--text-muted); }
.cal-cell--full:hover { border-color: var(--border-strong); }
.cal-cell--active { border-color: var(--navy); background: var(--bg); }
.cal-cell__dot { position: absolute; bottom: 5px; left: 50%; transform: translateX(-50%); width: 5px; height: 5px; border-radius: 50%; background: var(--orange); }
.cal-cell--full .cal-cell__dot { background: var(--text-muted); }

.cal-legend { display: flex; align-items: center; gap: .4rem; margin-top: .8rem; font-size: .75rem; color: var(--text-muted); }
.cal-legend__dot { width: 6px; height: 6px; border-radius: 50%; background: var(--orange); }

.cal-day { margin-top: 1rem; border-top: 1px solid var(--border); padding-top: .9rem; }
.cal-day__title { margin: 0 0 .6rem; font-size: .95rem; }
.cal-day__row { display: flex; align-items: center; justify-content: space-between; gap: .75rem; padding: .55rem 0; border-bottom: 1px solid var(--border); }
.cal-day__row:last-child { border-bottom: 0; }
.cal-day__info { display: flex; flex-direction: column; gap: .15rem; }
.cal-day__meta { font-size: .85rem; font-weight: 500; }
.cal-day__status { font-size: .78rem; color: var(--text-muted); }

.booking-card,
.checkout-card {
    position: sticky;
    top: 88px;
    border-color: var(--orange);
    box-shadow: 0 0 0 1px rgba(242, 106, 27, .35), 0 10px 30px rgba(242, 106, 27, .15);
    transition: box-shadow .2s ease, border-color .2s ease;
}
.booking-card:hover,
.checkout-card:hover {
    box-shadow: 0 0 0 1px var(--orange), 0 12px 36px rgba(242, 106, 27, .28);
}
.session-option {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    margin-bottom: .6rem;
    cursor: pointer;
}
.session-option:hover { border-color: var(--border-strong); }
.session-option input { width: auto; margin: 0; }
.session-option.disabled { opacity: .5; cursor: not-allowed; }
.session-option .so-main { flex: 1; }
.session-option .so-date { font-weight: 500; }
.session-option .so-meta { font-size: .8rem; color: var(--text-muted); }

.stepper { display: inline-flex; align-items: center; border: 1px solid var(--border); border-radius: var(--radius-sm); overflow: hidden; }
.stepper button { width: 36px; height: 36px; border: 0; background: var(--surface); color: var(--text); cursor: pointer; font-size: 1.1rem; }
.stepper button:hover { background: var(--surface-2); }
.stepper input { width: 48px; text-align: center; border: 0; border-left: 1px solid var(--border); border-right: 1px solid var(--border); border-radius: 0; }
.stepper input[type="number"] {
    -moz-appearance: textfield;
    appearance: textfield;
}
.stepper input[type="number"]::-webkit-outer-spin-button,
.stepper input[type="number"]::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.stepper input:focus { box-shadow: none; }

/* ---------------------------------------------------------------------------
   Cart & checkout
--------------------------------------------------------------------------- */
.cart-layout, .checkout-layout { display: grid; grid-template-columns: 1fr 360px; gap: 2rem; align-items: stretch; }
.checkout-layout > aside,
.checkout-sidebar { min-height: 0; }
.checkout-main { display: flex; flex-direction: column; gap: 1.5rem; min-width: 0; }
.checkout-attendees__course + .checkout-attendees__course { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }

.checkout-payment {
    margin-top: 1rem;
    display: flex;
    flex-direction: column;
    gap: .55rem;
}
.checkout-payment__heading {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: var(--text-muted);
}
.pay-opt {
    display: block;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
    padding: .75rem .9rem;
    cursor: pointer;
    transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.pay-opt:hover { border-color: var(--border-strong); }
.pay-opt:has(input:checked) {
    border-color: var(--navy);
    box-shadow: 0 0 0 1px var(--navy);
    background: var(--bg);
}
.pay-opt input { margin-right: .65rem; vertical-align: middle; }
.pay-opt__row {
    display: inline-flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    width: calc(100% - 1.4rem);
}
.pay-opt__text { display: flex; flex-direction: column; gap: .15rem; }
.pay-opt__title { font-size: .92rem; font-weight: 600; color: var(--text); }
.pay-opt__sub { font-size: .78rem; color: var(--text-muted); }
.pay-opt__logo { display: block; height: 26px; width: auto; flex: 0 0 auto; }

/* Cart Payflex notice */
.cart-payflex-note {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin: 1rem 0;
    padding: .85rem .95rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.cart-payflex-note__logo { flex: 0 0 auto; height: 24px; width: auto; margin-top: .1rem; background: #fff; border-radius: 6px; padding: 3px 6px; }
.cart-payflex-note p { margin: 0; font-size: .8rem; line-height: 1.45; color: var(--text-muted); }
.cart-payflex-note strong { color: var(--text); font-weight: 600; }

.line-item { display: grid; grid-template-columns: auto 1fr auto auto; gap: 1rem; align-items: center; padding: 1rem 0; border-bottom: 1px solid var(--border); }
.line-item .li-title { font-weight: 500; }
.line-item .li-meta { color: var(--text-muted); font-size: .85rem; }
.line-item__qty {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .35rem;
    margin: 0;
}
.line-item__qty label {
    margin: 0;
    font-size: .85rem;
    color: var(--text-muted);
}

.vendor-banner {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
}
.vendor-banner.course-card__banner {
    flex: none;
    max-width: none;
    border-right: 0;
}
.vendor-banner--cart {
    width: 5.5rem;
    min-width: 5.5rem;
    height: 3.75rem;
}
.vendor-banner--mini {
    width: 3.75rem;
    min-width: 3.75rem;
    height: 2.5rem;
}
.vendor-banner img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: contain;
    object-position: center;
    padding: .25rem;
    background: var(--surface-2);
}
.vendor-banner--cart .course-card__banner-initial {
    width: 2.25rem;
    height: 2.25rem;
    font-size: 1rem;
}
.vendor-banner--mini .course-card__banner-initial {
    width: 1.5rem;
    height: 1.5rem;
    font-size: .75rem;
}
.vendor-banner .course-card__banner-fallback {
    font-size: .9rem;
}
.vendor-banner--mini .course-card__banner-fallback {
    font-size: .7rem;
}

.summary-row { display: flex; justify-content: space-between; padding: .4rem 0; }
.summary-total { display: flex; justify-content: space-between; padding: .75rem 0; border-top: 1px solid var(--border); margin-top: .5rem; font-weight: 600; font-size: 1.1rem; }

.attendee-block { border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 1rem; margin-bottom: 1rem; }
.attendee-block h4 { margin: 0 0 .75rem; }

/* ---------------------------------------------------------------------------
   Tables
--------------------------------------------------------------------------- */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); }
table.data { width: 100%; border-collapse: collapse; font-size: .9rem; }
table.data th, table.data td { padding: .75rem 1rem; text-align: left; border-bottom: 1px solid var(--border); white-space: nowrap; }
table.data th { background: var(--surface); font-weight: 600; color: var(--text-muted); font-size: .8rem; text-transform: uppercase; letter-spacing: .03em; }
table.data tr:last-child td { border-bottom: 0; }
table.data tbody tr:hover, table.data tr:hover { background: var(--surface); }

/* ---------------------------------------------------------------------------
   Flash messages
--------------------------------------------------------------------------- */
.flash-stack { margin: 1rem 0; }
.flash {
    padding: .85rem 1rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--border);
    margin-bottom: .6rem;
    font-size: .92rem;
}
.flash-success { background: rgba(30, 158, 106, .12); border-color: var(--success); color: var(--success); }
.flash-danger { background: rgba(214, 69, 69, .12); border-color: var(--danger); color: var(--danger); }
.flash-info { background: var(--orange-soft); border-color: var(--orange); color: var(--orange-600); }
.flash-warning { background: var(--orange-soft); border-color: var(--orange); color: var(--orange-600); }

/* ---------------------------------------------------------------------------
   Articles / prose
--------------------------------------------------------------------------- */
.prose { max-width: 70ch; }
.prose h2 { margin-top: 2rem; }
.article-meta { color: var(--text-muted); font-size: .9rem; margin-bottom: 1.5rem; }

.insight-list {
    display: flex;
    flex-direction: column;
    gap: 1.25rem;
}
.insight-list > * + * { margin-top: 0; }

.insight-card {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    min-height: 10.5rem;
}
.insight-card__body {
    flex: 1;
    min-width: 0;
    padding: 1.5rem;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.insight-card__body h3 { margin: 0; }
.insight-card__body .article-meta { margin-bottom: 0; }
.insight-card__body p { margin: 0; }
.insight-card__link {
    margin-top: auto;
    padding-top: .35rem;
    font-weight: 500;
    text-decoration: none;
}
.insight-card__link:hover { text-decoration: underline; }
.insight-card__media {
    flex: 0 0 18rem;
    width: 18rem;
    max-width: 18rem;
    background: var(--surface-2);
    border-left: 1px solid var(--border);
    overflow: hidden;
}
.insight-card__media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

/* ---------------------------------------------------------------------------
   Footer
--------------------------------------------------------------------------- */
.site-footer { border-top: 1px solid var(--border); background: var(--surface); margin-top: 4rem; }
main:has(> .contact-vendor-band:last-child) + .site-footer { margin-top: 0; }
.footer-inner { display: grid; grid-template-columns: 1.5fr repeat(4, 1fr); gap: 2rem; padding: 3rem 0 2rem; }
.footer-inner h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .04em; color: var(--text-muted); }
.footer-inner ul { list-style: none; padding: 0; margin: 0; }
.footer-inner li { margin-bottom: .5rem; }
.footer-inner a { color: var(--text); font-size: .9rem; }
.footer-inner ul a {
    position: relative;
    text-decoration: none;
    transition: color .15s ease;
}
.footer-inner ul a::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -2px;
    height: 1px;
    background: var(--orange);
    transform: scaleX(0);
    transform-origin: center; /* underline grows outwards from the middle */
    transition: transform .22s ease;
}
.footer-inner ul a:hover { color: var(--orange-600); text-decoration: none; }
.footer-inner ul a:hover::after { transform: scaleX(1); }
.footer-blurb { color: var(--text-muted); font-size: .9rem; max-width: 30ch; }
.footer-socials { display: flex; justify-content: flex-end; gap: .75rem; flex-wrap: wrap; padding: 0 0 1.5rem; }
.social-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .9rem;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .85rem;
    line-height: 1;
    transition: background .15s ease, border-color .15s ease, color .15s ease;
}
.social-badge i { font-size: 1rem; color: var(--text-muted); transition: color .15s ease; }
.social-badge:hover { background: var(--surface); border-color: var(--border-strong); text-decoration: none; }
.social-badge:hover i { color: var(--orange); }

.footer-bottom { border-top: 1px solid var(--border); padding: 1.25rem 0; display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; color: var(--text-muted); font-size: .85rem; }

/* ---------------------------------------------------------------------------
   Style guide
--------------------------------------------------------------------------- */
.swatch { height: 64px; border-radius: var(--radius-sm); border: 1px solid var(--border); display: flex; align-items: flex-end; padding: .4rem; font-size: .7rem; }

/* ---------------------------------------------------------------------------
   Responsive
--------------------------------------------------------------------------- */
@media (max-width: 1024px) {
    .course-detail, .cart-layout, .checkout-layout { grid-template-columns: 1fr; }
    .booking-stack { position: static; }
    .booking-card, .checkout-card { position: static; }
    .grid-4 { grid-template-columns: repeat(2, 1fr); }
    .footer-inner { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
    .site-nav { display: none; }
    .header-search { display: none; }
    [data-search-toggle] { display: none; } /* search lives on the pages themselves */
    .hamburger { display: inline-flex; }
    .catalogue { grid-template-columns: 1fr; }
    .filters { display: none; }
    .filters.open { display: block; }
    .filters-toggle { display: inline-flex; }
    .grid-2, .grid-3 { grid-template-columns: 1fr; }
    .contact-layout {
        grid-template-columns: 1fr;
        grid-template-rows: auto;
    }
    .contact-layout__title,
    .contact-layout__locations-title,
    .contact-layout__main,
    .contact-layout__locations {
        grid-column: 1;
        grid-row: auto;
    }
    .contact-layout__locations-title { font-size: 1.75rem; }
    .contact-whatsapp { margin-top: 1.25rem; }
    .contact-vendor-band .contact-cta {
        flex-direction: column;
        align-items: flex-start;
    }
    .insight-card { flex-direction: column; min-height: 0; }
    .insight-card__media {
        flex: none;
        width: 100%;
        max-width: none;
        height: 10rem;
        border-left: none;
        border-top: 1px solid var(--border);
        order: -1;
    }
    .course-card { flex-direction: column; min-height: 0; }
    .course-card__banner {
        flex: none;
        max-width: none;
        width: 100%;
        height: 5.5rem;
        border-right: none;
        border-bottom: 1px solid var(--border);
    }
    .form-grid { grid-template-columns: 1fr; }

    .mobile-nav {
        display: none;
        flex-direction: column;
        gap: .25rem;
        padding: 1rem 0;
        border-top: 1px solid var(--border);
    }
    .mobile-nav.open { display: flex; }
    .mobile-nav a { color: var(--text); padding: .6rem 0; }
}

@media (max-width: 520px) {
    .grid-4 { grid-template-columns: 1fr; }
    .footer-inner { grid-template-columns: 1fr; }
    .cta-band { flex-direction: column; align-items: flex-start; }
    .line-item { grid-template-columns: 1fr; }
}

/* ---------------------------------------------------------------------------
   Print (invoice)
--------------------------------------------------------------------------- */
@media print {
    .site-header, .site-footer, .no-print { display: none !important; }
    body { background: #fff; color: #000; }
    .container { max-width: none; }
    .ai-widget { display: none !important; }
}

/* ---------------------------------------------------------------------------
   AI assistant widget ("Torq") — floating launcher + chat panel.
   Uses the shared design tokens so it sits natively in light and dark themes.
--------------------------------------------------------------------------- */
.ai-widget {
    position: fixed;
    right: 1.25rem;
    bottom: 1.25rem;
    z-index: 1000;
    font-family: var(--font-body);
}

/* Launcher button */
.ai-launcher {
    display: inline-flex;
    align-items: center;
    gap: .55rem;
    padding: .7rem .95rem;
    border: 1px solid var(--orange);
    border-radius: 999px;
    background: var(--orange);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 600;
    font-size: .95rem;
    line-height: 1;
    cursor: pointer;
    box-shadow: 0 0 0 1px rgba(242, 106, 27, .35), 0 10px 30px rgba(242, 106, 27, .28);
    transition: background-color .15s ease, transform .08s ease, box-shadow .2s ease;
}
.ai-launcher:hover { background: var(--orange-600); box-shadow: 0 0 0 1px var(--orange), 0 12px 38px rgba(242, 106, 27, .4); }
.ai-launcher:active { transform: scale(.97); }
.ai-launcher:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--ring), 0 10px 30px rgba(242, 106, 27, .28); }
.ai-launcher-icon { display: inline-flex; }
.ai-launcher-icon svg { width: 22px; height: 22px; }
.ai-launcher-icon i { font-size: 1.4rem; line-height: 1; }
.ai-launcher-label { white-space: nowrap; }

/* Subtle attention shake (toggled by JS on an interval) */
@keyframes ai-shake {
    0%, 100% { transform: rotate(0deg) translateX(0); }
    15% { transform: rotate(-6deg) translateX(-2px); }
    30% { transform: rotate(5deg) translateX(2px); }
    45% { transform: rotate(-4deg) translateX(-1px); }
    60% { transform: rotate(3deg) translateX(1px); }
    75% { transform: rotate(-2deg) translateX(0); }
}
.ai-launcher--shake { animation: ai-shake .8s ease-in-out; }

@media (prefers-reduced-motion: reduce) {
    .ai-launcher--shake { animation: none; }
}

/* Hide the launcher while the panel is open */
.ai-widget.open .ai-launcher { display: none; }

/* Chat panel */
.ai-panel[hidden] { display: none; }
.ai-panel {
    display: flex;
    flex-direction: column;
    width: 494px; /* 380px + 30% */
    max-width: calc(100vw - 2.5rem);
    height: calc(100dvh - 2.5rem); /* fill the screen height, minus margins */
    max-height: calc(100vh - 2.5rem);
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 18px 50px rgba(17, 41, 77, .22);
    overflow: hidden;
    animation: ai-pop .16s ease;
}
@keyframes ai-pop {
    from { opacity: 0; transform: translateY(12px) scale(.98); }
    to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Header */
.ai-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    padding: .9rem 1rem;
    background: var(--navy);
    color: #fff;
    border-bottom: 1px solid var(--border);
}
[data-theme="dark"] .ai-head { background: var(--surface-2); color: var(--text); }
.ai-head-id { display: flex; align-items: center; gap: .65rem; }
.ai-name { margin: 0; font-family: var(--font-head); font-weight: 600; font-size: 1rem; line-height: 1.1; }
.ai-tag { margin: 0; font-size: .75rem; opacity: .8; line-height: 1.2; }

.ai-avatar {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: var(--orange);
    color: #fff;
    font-family: var(--font-head);
    font-weight: 700;
    flex-shrink: 0;
}
.ai-avatar-sm { width: 28px; height: 28px; font-size: .85rem; }

.ai-close {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: inherit;
    cursor: pointer;
    opacity: .85;
}
.ai-close:hover { opacity: 1; background: rgba(255, 255, 255, .14); }
[data-theme="dark"] .ai-close:hover { background: var(--surface); }
.ai-close svg { width: 18px; height: 18px; }

/* Messages */
.ai-messages {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    display: flex;
    flex-direction: column;
    gap: .75rem;
    background: var(--surface);
}
.ai-msg { display: flex; gap: .5rem; align-items: flex-end; max-width: 88%; }
.ai-msg-bot { align-self: flex-start; }
.ai-msg-user { align-self: flex-end; flex-direction: row-reverse; }

.ai-bubble {
    padding: .6rem .8rem;
    border-radius: var(--radius);
    font-size: .9rem;
    line-height: 1.55;
    word-wrap: break-word;
    overflow-wrap: anywhere;
}
.ai-msg-bot .ai-bubble {
    background: var(--bg);
    border: 1px solid var(--border);
    color: var(--text);
    border-bottom-left-radius: var(--radius-sm);
}
.ai-msg-user .ai-bubble {
    background: var(--orange);
    color: #fff;
    border-bottom-right-radius: var(--radius-sm);
}
.ai-bubble p {
    margin: 0 0 .55rem;
}
.ai-bubble p:last-child { margin-bottom: 0; }
.ai-bubble strong { font-weight: 600; }
.ai-bubble em { font-style: italic; }
.ai-bubble a { color: var(--orange-600); font-weight: 500; text-decoration: underline; }
.ai-msg-user .ai-bubble a { color: #fff; }
.ai-bubble ul.ai-list,
.ai-bubble ol.ai-list {
    margin: .35rem 0 .55rem;
    padding-left: 1.2rem;
    display: block;
}
.ai-bubble ul.ai-list { list-style: disc; }
.ai-bubble ol.ai-list { list-style: decimal; }
.ai-bubble .ai-list li {
    margin-bottom: .3rem;
    padding-left: .15rem;
}
.ai-bubble .ai-list li:last-child { margin-bottom: 0; }

/* Typing indicator */
.ai-typing { display: inline-flex; gap: 4px; align-items: center; }
.ai-typing span {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--text-muted);
    animation: ai-blink 1.2s infinite ease-in-out;
}
.ai-typing span:nth-child(2) { animation-delay: .2s; }
.ai-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes ai-blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } }

/* Quick-prompt chips */
.ai-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: .4rem;
    padding: .65rem 1rem;
    background: var(--surface);
    border-top: 1px solid var(--border);
}
.ai-suggestions:empty { display: none; }
.ai-chip {
    padding: .4rem .7rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    font-size: .8rem;
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease;
}
.ai-chip:hover { border-color: var(--orange); color: var(--orange-600); }

/* Input row — the send button lives inside the text field */
.ai-input {
    position: relative;
    display: block;
    padding: .75rem;
    background: var(--bg);
    border-top: 1px solid var(--border);
}
.ai-input textarea {
    display: block;
    width: 100%;
    resize: none;
    max-height: 120px;
    padding: .6rem 3.1rem .6rem .75rem; /* clearance for the in-field button */
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: .9rem;
    line-height: 1.4;
}
.ai-input textarea:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--ring); }
.ai-send {
    position: absolute;
    right: 1.15rem;
    bottom: 1.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    background: var(--orange);
    color: #fff;
    cursor: pointer;
    transition: background-color .15s ease;
}
.ai-send:hover { background: var(--orange-600); }
.ai-send:disabled { opacity: .5; cursor: not-allowed; }
.ai-send svg { width: 16px; height: 16px; }

/* Mobile: near full-width sheet */
@media (max-width: 480px) {
    .ai-widget { right: .75rem; bottom: .75rem; left: .75rem; }
    .ai-launcher { margin-left: auto; }
    .ai-panel {
        width: 100%;
        max-width: none;
        height: 75vh;
    }
}

/* ===========================================================================
   Entrance animations
   - Hero: staggered rise-in on page load (CSS only).
   - Browse-by-category & Popular-courses: one-shot scroll reveals (JS-gated).
   Both are wrapped in prefers-reduced-motion so motion-sensitive users and
   no-JS visitors always see fully-visible content.
   =========================================================================== */
@media (prefers-reduced-motion: no-preference) {
    @keyframes heroRise {
        from { opacity: 0; transform: translateY(12px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .hero-live__eyebrow,
    .hero-live h1,
    .hero-live .lead,
    .hero-live .hero-search input[type="search"],
    .hero-live .hero-search .btn-navy,
    .hero-live .hero-search .btn-primary,
    .hero-live .trust-strip,
    .pathfield-canvas {
        opacity: 0;
        animation: heroRise 450ms cubic-bezier(.2, .6, .2, 1) both;
    }
    .hero-live__eyebrow                        { animation-delay: 0ms; }
    .hero-live h1                              { animation-delay: 60ms; }
    .hero-live .lead                           { animation-delay: 130ms; }
    .hero-live .hero-search input[type="search"] { animation-delay: 200ms; }
    .hero-live .hero-search .btn-navy          { animation-delay: 260ms; }
    .hero-live .hero-search .btn-primary       { animation-delay: 320ms; }
    .hero-live .trust-strip                    { animation-delay: 390ms; }
    .pathfield-canvas { animation-duration: 900ms; animation-delay: 250ms; }

    /* Scroll reveals — only hide when JS can observe + reveal them. */
    .js [data-reveal] > * {
        opacity: 0;
        transform: translateY(10px);
        transition: opacity 400ms cubic-bezier(.2, .6, .2, 1),
                    transform 400ms cubic-bezier(.2, .6, .2, 1);
    }
    .js [data-reveal].is-revealed > * {
        opacity: 1;
        transform: none;
    }
}

/* ===========================================================================
   About page — cinematic sections (node motif shared with the home hero)
   =========================================================================== */
.about-hero {
    position: relative;
    padding: 4.5rem 0 3rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    overflow: hidden;
}
.about-hero .container { position: relative; }
.about-hero h1 { max-width: 24ch; position: relative; z-index: 1; }
.about-hero .lead { max-width: 56ch; color: var(--text-muted); position: relative; z-index: 1; }
.about-hero__accent { color: var(--orange-600); }

.about-hero__nodes {
    position: absolute;
    top: 50%;
    right: -1rem;
    transform: translateY(-50%);
    width: min(520px, 55%);
    height: auto;
    color: var(--navy);
    opacity: .8;
    pointer-events: none;
}
[data-theme="dark"] .about-hero__nodes { opacity: .55; }

/* Shared node-motif primitives (about hero + Career Campus art) */
.ah-line { fill: none; opacity: .3; }
.ah-line--soft { opacity: .14; stroke-width: 1; }
.ah-dot { fill: var(--navy); }
.ah-dot--hollow { fill: none; stroke: var(--navy); stroke-width: 1.4; opacity: .6; }
.ah-dot--orange { fill: var(--orange); }
.ah-ring {
    fill: none;
    stroke: var(--orange);
    stroke-width: 1.2;
    opacity: .5;
}
@media (prefers-reduced-motion: no-preference) {
    .ah-ring { animation: ahPulse 2.6s ease-in-out infinite; transform-origin: center; transform-box: fill-box; }
    @keyframes ahPulse {
        0%, 100% { transform: scale(1); opacity: .5; }
        50%      { transform: scale(1.18); opacity: .2; }
    }
}
@media (max-width: 900px) {
    .about-hero__nodes { display: none; }
}

/* Stat cards */
.about-stats .stat-card { text-align: center; padding: 1.75rem 1rem; }
.about-stats .stat-value { font-size: 2.4rem; line-height: 1.1; }

/* Timeline */
.timeline {
    list-style: none;
    margin: 0;
    padding: 0;
    position: relative;
}
.timeline::before {
    content: "";
    position: absolute;
    left: 99px;
    top: 8px;
    bottom: 8px;
    width: 2px;
    background: var(--border-strong);
}
.timeline__item {
    position: relative;
    padding: 0 0 2.25rem 144px;
}
.timeline__item:last-child { padding-bottom: 0; }
.timeline__item::before {
    content: "";
    position: absolute;
    left: 94px;
    top: 6px;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: var(--bg);
    border: 3px solid var(--navy);
}
.timeline__item--now::before {
    border-color: var(--orange);
    background: var(--orange);
    box-shadow: 0 0 0 5px var(--orange-soft);
}
.timeline__marker {
    position: absolute;
    left: 0;
    top: 2px;
    width: 84px;
    text-align: right;
    font-family: var(--font-head);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--orange-600);
}
.timeline__item h3 { margin-bottom: .25rem; }
.timeline__item p { max-width: 62ch; margin: 0; }
@media (max-width: 600px) {
    .timeline::before { left: 5px; }
    .timeline__item { padding-left: 32px; }
    .timeline__item::before { left: 0; }
    .timeline__marker {
        position: static;
        display: block;
        width: auto;
        text-align: left;
        margin-bottom: .15rem;
    }
}

/* Delivery-mode cards */
.mode-card { display: flex; flex-direction: column; gap: .35rem; }
.mode-card__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-sm);
    background: var(--orange-soft);
    color: var(--orange-600);
    margin-bottom: .4rem;
}
.mode-card h3 { margin-bottom: .1rem; }

/* Impact band (Pearson VUE) — flat navy statement panel */
.impact-band {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 2.5rem;
    align-items: center;
    background: var(--navy-700);
    color: #E8EDF4;
    border-radius: var(--radius);
    padding: 3rem 3.25rem;
}
[data-theme="dark"] .impact-band {
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    color: var(--text);
}
.impact-band h2 { color: inherit; max-width: 22ch; }
.impact-band p { color: inherit; opacity: .85; margin: 0; max-width: 52ch; }
.impact-band__eyebrow {
    display: inline-block;
    font-family: var(--font-head);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: .6rem;
}
.impact-band__figures {
    display: grid;
    gap: 1.1rem;
}
.impact-figure {
    display: flex;
    align-items: baseline;
    gap: .9rem;
    border-left: 3px solid var(--orange);
    padding-left: 1rem;
}
.impact-figure__n {
    font-family: var(--font-head);
    font-size: 1.9rem;
    font-weight: 700;
    color: var(--orange);
    min-width: 3.2ch;
}
.impact-figure__l { opacity: .85; font-size: .95rem; }
@media (max-width: 820px) {
    .impact-band { grid-template-columns: 1fr; padding: 2rem 1.5rem; gap: 1.75rem; }
}

/* Career Campus visual */
.campus-visual {
    display: grid;
    grid-template-columns: 1.3fr 1fr;
    gap: 2.5rem;
    align-items: center;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 2.75rem 3rem;
}
.campus-visual__copy p { max-width: 58ch; }
.campus-visual__copy .campus-intro__actions { display: flex; gap: .6rem; flex-wrap: wrap; margin: 1.25rem 0 0; }
.campus-visual__art svg { width: 100%; max-width: 320px; height: auto; color: var(--navy); margin: 0 auto; display: block; }
.campus-visual__label {
    font-family: var(--font-body);
    font-size: 11px;
    fill: var(--text-muted);
}
.campus-visual__label--orange {
    font-family: var(--font-head);
    font-size: 13px;
    font-weight: 600;
    fill: var(--orange-600);
}
@media (max-width: 820px) {
    .campus-visual { grid-template-columns: 1fr; padding: 1.75rem 1.5rem; }
    .campus-visual__art { order: -1; }
}

/* ===========================================================================
   Shared page hero, section kickers, Torq band, contact upgrade
   =========================================================================== */

/* Section kicker — small orange eyebrow above section titles */
.kicker {
    display: block;
    font-family: var(--font-head);
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--orange-600);
    margin-bottom: .2rem;
}

/* Page hero — flat surface band with the node-path motif (matches .about-hero) */
.page-hero {
    position: relative;
    padding: 3.25rem 0 2.5rem;
    background: var(--surface);
    border-bottom: 1px solid var(--border);
    /* No overflow clipping — the live search-suggest panel hangs below. */
}
.page-hero .container { position: relative; }
.page-hero h1 { max-width: 26ch; margin-bottom: .4em; position: relative; z-index: 1; }
.page-hero .lead { max-width: 58ch; color: var(--text-muted); margin-bottom: 0; position: relative; z-index: 1; }
.page-hero__accent { color: var(--orange-600); }
.page-hero__eyebrow {
    display: inline-block;
    font-family: var(--font-head);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--orange-600);
    margin-bottom: .6rem;
}
.page-hero__art {
    position: absolute;
    top: 50%;
    right: 4vw;
    transform: translateY(-50%);
    width: clamp(180px, 20vw, 260px);
    color: var(--navy);
    opacity: .75;
    pointer-events: none;
}
.page-hero__art svg { width: 100%; height: auto; display: block; }
[data-theme="dark"] .page-hero__art { opacity: .6; }

/* Hero-motif line-art primitives (used by page heroes and the about hero) */
.hm-line { stroke: currentColor; fill: none; opacity: .55; }
.hm-soft { stroke: currentColor; fill: none; opacity: .22; }
.hm-accent { stroke: var(--orange); fill: none; }
.hm-fill { fill: var(--orange); }
.hm-fill-path { fill: var(--orange); }
.hm-dots { fill: currentColor; opacity: .25; }

.page-hero__extra { position: relative; z-index: 1; margin-top: 1.25rem; }
.page-hero__search { display: flex; gap: .6rem; max-width: 640px; flex-wrap: wrap; }
.page-hero__search input[type="search"] { flex: 1; min-width: 240px; }
@media (max-width: 900px) {
    .page-hero__art { display: none; }
}

/* Torq career-path band — the "map my career" conversion moment */
.torq-band {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: 2rem;
    background: var(--navy-700);
    color: #E8EDF4;
    border-radius: var(--radius);
    padding: 2.25rem 2.75rem;
}
[data-theme="dark"] .torq-band {
    background: var(--surface-2);
    border: 1px solid var(--border-strong);
    color: var(--text);
}
.torq-band__art { width: 96px; color: #E8EDF4; }
[data-theme="dark"] .torq-band__art { color: var(--navy); }
.torq-band__art svg { width: 100%; height: auto; display: block; }
.torq-band__art .ah-dot { fill: currentColor; }
.torq-band h2 { color: inherit; margin-bottom: .3em; }
.torq-band p { color: inherit; opacity: .85; margin: 0; max-width: 56ch; }
.torq-band__eyebrow {
    display: inline-block;
    font-family: var(--font-head);
    font-size: .78rem;
    font-weight: 600;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--orange);
    margin-bottom: .45rem;
}
.torq-band__action { display: flex; flex-direction: column; align-items: center; gap: .5rem; }
.torq-band__hint { font-size: .8rem; opacity: .7; }
@media (max-width: 820px) {
    .torq-band { grid-template-columns: 1fr; padding: 1.75rem 1.5rem; gap: 1.25rem; text-align: left; }
    .torq-band__art { display: none; }
    .torq-band__action { align-items: flex-start; }
}

/* Contact page — quick contact chips in the hero */
.quick-contacts { display: flex; flex-wrap: wrap; gap: .6rem; }
.quick-contact {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .55rem .95rem;
    background: var(--bg);
    border: 1px solid var(--border);
    border-radius: 999px;
    color: var(--text);
    font-size: .9rem;
    text-decoration: none;
    transition: border-color .15s ease, transform .15s ease;
}
.quick-contact:hover { border-color: var(--orange); text-decoration: none; transform: translateY(-1px); }
.quick-contact strong { font-weight: 600; margin-right: .25rem; }
.quick-contact__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--orange-soft);
    color: var(--orange-600);
    flex-shrink: 0;
}

/* Contact form card */
.contact-form-card { padding: 1.75rem; }
.contact-form-card__head { margin-bottom: 1.25rem; }
.contact-form-card__head h2 { margin-bottom: .25rem; }
.contact-form-card__head p { margin: 0; }

/* The old page title cell is gone — let the form card span both grid rows so
   it top-aligns with the "Locations" heading. */
.contact-layout__main { grid-row: 1 / 3; }
@media (max-width: 768px) {
    .contact-layout__main { grid-row: auto; }
}

/* ===========================================================================
   Torq chat — link buttons, structured Q&A, expanded focus mode
   =========================================================================== */

/* Reply links render as labelled buttons — never raw URLs */
.ai-bubble .ai-link-btn {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin: .2rem .3rem .2rem 0;
    padding: .34rem .8rem;
    border-radius: 999px;
    background: var(--orange);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    line-height: 1.2;
    text-decoration: none;
    transition: background-color .15s ease, transform .15s ease;
}
.ai-bubble .ai-link-btn:hover { background: var(--orange-600); text-decoration: none; transform: translateY(-1px); }
.ai-bubble .ai-link-btn::after { content: "→"; font-size: .85em; }
.ai-msg-user .ai-bubble .ai-link-btn { background: #fff; color: var(--orange-600); }

/* Structured Q&A — tappable options for the model's ask_user tool */
.ai-ask { width: 100%; }
.ai-ask__q { margin-bottom: .65rem; }
.ai-ask__q:last-child { margin-bottom: 0; }
.ai-ask__label { margin: 0 0 .45rem; font-weight: 600; }
.ai-ask__options { display: flex; flex-wrap: wrap; gap: .4rem; }
.ai-ask__option {
    padding: .42rem .85rem;
    border: 1px solid var(--border-strong);
    border-radius: 999px;
    background: var(--bg);
    color: var(--text);
    font-size: .85rem;
    font-family: var(--font-body);
    cursor: pointer;
    transition: border-color .15s ease, background-color .15s ease, color .15s ease;
}
.ai-ask__option:hover { border-color: var(--orange); color: var(--orange-600); }
.ai-ask__option.is-selected {
    border-color: var(--orange);
    background: var(--orange);
    color: #fff;
}
.ai-ask__option--custom { border-style: dashed; color: var(--text-muted); }
.ai-ask.is-done .ai-ask__option { opacity: .55; pointer-events: none; }
.ai-ask.is-done .ai-ask__option.is-selected { opacity: 1; }

/* Primary suggestion chip */
.ai-chip--primary {
    border-color: var(--orange);
    background: var(--orange-soft);
    color: var(--orange-600);
    font-weight: 600;
}

/* Header actions + expand button icon swap */
.ai-head-actions { display: flex; align-items: center; gap: .15rem; }
.ai-expand .ai-expand__shrink { display: none; }
.ai-widget.ai-expanded .ai-expand .ai-expand__grow { display: none; }
.ai-widget.ai-expanded .ai-expand .ai-expand__shrink { display: block; }

/* Fogged backdrop + centred 75% modal in expanded mode */
.ai-backdrop[hidden] { display: none; }
.ai-backdrop {
    position: fixed;
    inset: 0;
    z-index: 1001;
    background: rgba(10, 18, 32, .55);
    -webkit-backdrop-filter: blur(4px);
    backdrop-filter: blur(4px);
}
.ai-widget.ai-expanded .ai-panel {
    position: fixed;
    z-index: 1002;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 85vw;
    height: 85vh;
    max-width: 1280px;
    max-height: none;
    box-shadow: 0 30px 80px rgba(5, 10, 20, .45);
}
.ai-widget.ai-expanded .ai-messages { padding: 1.5rem; }
.ai-modal-open, .ai-modal-open body { overflow: hidden; }
@media (max-width: 768px) {
    .ai-widget.ai-expanded .ai-panel { width: 94vw; height: 86vh; }
}
@media (prefers-reduced-motion: no-preference) {
    .ai-widget.ai-expanded .ai-panel { animation: aiExpandIn .18s ease; }
    @keyframes aiExpandIn {
        from { transform: translate(-50%, -50%) scale(.97); opacity: .6; }
        to   { transform: translate(-50%, -50%) scale(1); opacity: 1; }
    }
}

/* ===========================================================================
   Hero motif animations + filter icons
   =========================================================================== */

/* Navy-accent motif primitives (e.g. the learnerships flag) */
.hm-navy { stroke: var(--navy); fill: none; }
.hm-navy-fill { fill: var(--navy); }

/* Filter icons — quiet chips that light up with the active row */
.filter-ico {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
    border-radius: 7px;
    background: var(--surface-2);
    color: var(--text-muted);
    flex-shrink: 0;
    transition: background-color .15s ease, color .15s ease;
}
.filter-option:hover .filter-ico { color: var(--text); }
.filter-option:has(input:checked) .filter-ico { background: var(--orange); color: #fff; }

/* About dial label — sits on a rounded theme-background plate (same treatment
   as the landing hero's "Your path to …" caption) */
.about-dial__label {
    font-family: var(--font-head);
    font-size: 15px;
    font-weight: 600;
    fill: var(--orange-600);
}
.about-dial__plate {
    fill: var(--bg);
    stroke: var(--border);
    stroke-width: 1;
}

/* One-shot entrance choreography. All initial "hidden" states live inside the
   no-preference media query, so reduced-motion (and no-CSS-animation) visitors
   simply see the finished artwork. SMIL motion paths are frozen at their end
   state by app.js for those visitors. */
@media (prefers-reduced-motion: no-preference) {
    /* Lines that draw themselves (elements carry pathLength="1") */
    .hero-anim .hm-draw {
        stroke-dasharray: 1;
        stroke-dashoffset: 1;
        animation: hmDraw var(--hm-dur, .8s) ease var(--hm-delay, 0s) forwards;
    }
    @keyframes hmDraw { to { stroke-dashoffset: 0; } }

    /* Simple fade-in */
    .hero-anim .hm-fade {
        opacity: 0;
        animation: hmFade .5s ease var(--hm-delay, 0s) forwards;
    }
    @keyframes hmFade { to { opacity: 1; } }
    .hero-anim .hm-dots.hm-fade { animation-name: hmFadeDots; }
    @keyframes hmFadeDots { to { opacity: .25; } }
    .hero-anim .hm-soft.hm-fade { animation-name: hmFadeSoft; }
    @keyframes hmFadeSoft { to { opacity: .22; } }

    /* Stamp: slams in from above with a little overshoot */
    .hero-anim .hm-stamp {
        opacity: 0;
        transform-box: fill-box;
        transform-origin: center;
        animation: hmStamp .45s cubic-bezier(.2, 1.4, .4, 1) var(--hm-delay, 0s) forwards;
    }
    @keyframes hmStamp {
        0%   { opacity: 0; transform: scale(2.3); }
        55%  { opacity: 1; transform: scale(.9); }
        100% { opacity: 1; transform: scale(1); }
    }

    /* Chat bubble pop — grows from its tail corner */
    .hero-anim .hm-pop {
        opacity: 0;
        transform-box: fill-box;
        transform-origin: center bottom;
        animation: hmPop .4s cubic-bezier(.2, 1.3, .4, 1) var(--hm-delay, 0s) forwards;
    }
    @keyframes hmPop {
        from { opacity: 0; transform: translateY(10px) scale(.7); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }

    /* Typing dots — appear, then keep gently pulsing */
    .hero-anim .hm-typing {
        opacity: 0;
        animation: hmTyping 1.1s ease var(--hm-delay, 0s) infinite;
    }
    @keyframes hmTyping {
        0%, 100% { opacity: .25; }
        30%      { opacity: 1; }
    }

    /* Speedometer ring: fades in after the ball arrives, then pulses */
    .hero-anim .hm-ring-late {
        fill: none;
        stroke: var(--orange);
        stroke-width: 1.2;
        opacity: 0;
        transform-box: fill-box;
        transform-origin: center;
        animation:
            hmFadeHalf .4s ease var(--hm-delay, 0s) forwards,
            ahPulse 2.6s ease-in-out calc(var(--hm-delay, 0s) + .5s) infinite;
    }
    @keyframes hmFadeHalf { to { opacity: .5; } }
    .hero-anim .about-dial__label.hm-fade { animation-duration: .6s; }
}
/* Static fallback (reduced motion / older browsers): ring + label visible */
@media (prefers-reduced-motion: reduce) {
    .hero-anim .hm-ring-late { fill: none; stroke: var(--orange); stroke-width: 1.2; opacity: .5; }
    .hero-anim .hm-typing { opacity: 1; }
}
.hero-anim .hm-ring-late { fill: none; stroke: var(--orange); stroke-width: 1.2; }

/* ===========================================================================
   Vendor filter dropdown, search suggestions, AI sparkle
   =========================================================================== */

/* Vendor picker (courses toolbar) */
.vendor-menu { position: relative; }
.vendor-menu__btn { display: inline-flex; align-items: center; gap: .4rem; }
.vendor-menu__btn.is-active { border-color: var(--orange); color: var(--orange-600); }
.vendor-menu__panel {
    position: absolute;
    right: 0;
    top: calc(100% + 8px);
    z-index: 70;
    width: min(520px, calc(100vw - 2.5rem));
    max-height: 340px;
    overflow-y: auto;
    background: var(--bg);
    border: 1px solid var(--orange);
    border-radius: var(--radius);
    box-shadow: 0 14px 40px rgba(17, 41, 77, .14);
    padding: .5rem;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: .1rem .5rem;
    align-content: start;
}
.vendor-menu__panel[hidden] { display: none; }
.vendor-menu__item {
    padding: .42rem .6rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: .88rem;
    text-decoration: none;
}
.vendor-menu__item:hover { background: var(--surface); color: var(--orange-600); text-decoration: none; }
.vendor-menu__item.is-active { background: var(--orange-soft); color: var(--orange-600); font-weight: 600; }
@media (max-width: 560px) {
    .vendor-menu__panel { grid-template-columns: 1fr; }
}

/* Live search suggestions */
.search-suggest {
    position: absolute;
    z-index: 80;
    background: var(--bg);
    border: 1px solid var(--orange);
    border-radius: var(--radius);
    box-shadow: 0 16px 44px rgba(17, 41, 77, .16);
    padding: .35rem;
    max-height: 330px;
    overflow-y: auto;
}
.search-suggest[hidden] { display: none; }
.ss-item {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 1rem;
    padding: .5rem .65rem;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: .9rem;
    text-decoration: none;
}
.ss-item:hover, .ss-item.is-cursor { background: var(--surface); text-decoration: none; }
.ss-item .ss-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ss-item .ss-title strong { color: var(--orange-600); font-weight: 600; }
.ss-item .ss-meta { flex-shrink: 0; color: var(--text-muted); font-size: .78rem; white-space: nowrap; }
.ss-all {
    display: block;
    padding: .5rem .65rem;
    margin-top: .15rem;
    border-top: 1px solid var(--border);
    border-radius: 0 0 var(--radius-sm) var(--radius-sm);
    color: var(--orange-600);
    font-size: .85rem;
    font-weight: 600;
    text-decoration: none;
}
.ss-all:hover { background: var(--surface); text-decoration: none; }

/* AI sparkle — the career-guidance band's mark */
.tq-spark { fill: var(--orange); }
.tq-spark--sat { fill: currentColor; opacity: .75; }
@media (prefers-reduced-motion: no-preference) {
    .tq-orbit {
        transform-box: fill-box;
        transform-origin: center;
        animation: tqOrbit 26s linear infinite;
    }
    @keyframes tqOrbit { to { transform: rotate(360deg); } }
    .tq-spark--main {
        transform-box: fill-box;
        transform-origin: center;
        animation: tqPulse 3.2s ease-in-out infinite;
    }
    @keyframes tqPulse {
        0%, 100% { transform: scale(1) rotate(0deg); }
        50%      { transform: scale(1.12) rotate(12deg); }
    }
    .tq-spark--sat {
        transform-box: fill-box;
        transform-origin: center;
        animation: tqTwinkle 2.4s ease-in-out infinite;
    }
    .tq-spark--s2 { animation-delay: 1.2s; animation-duration: 2.8s; }
    @keyframes tqTwinkle {
        0%, 100% { opacity: .25; transform: scale(.7); }
        50%      { opacity: 1; transform: scale(1); }
    }
}

/* ===========================================================================
   Google sign-in, deferred maps, vendor carousel, about dial plate
   =========================================================================== */

/* "or" divider between the email form and Google sign-in */
.auth-divider {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: 1.1rem 0;
    color: var(--text-muted);
    font-size: .8rem;
    text-transform: uppercase;
    letter-spacing: .08em;
}
.auth-divider::before,
.auth-divider::after {
    content: "";
    flex: 1;
    height: 1px;
    background: var(--border);
}
.google-signin { display: flex; justify-content: center; }
.google-signin .g_id_signin { display: inline-block; }

/* Deferred map embeds: shimmer until the iframe reports load */
.map-frame--pending {
    background: linear-gradient(100deg, var(--surface) 40%, var(--surface-2) 50%, var(--surface) 60%);
    background-size: 200% 100%;
}
@media (prefers-reduced-motion: no-preference) {
    .map-frame--pending { animation: mapShimmer 1.4s ease-in-out infinite; }
    @keyframes mapShimmer { to { background-position: -200% 0; } }
}
.map-frame--pending iframe { opacity: 0; }
.map-frame iframe { transition: opacity .35s ease; }

/* Vendor partners carousel — one looping row with arrow navigation */
.vendor-carousel { position: relative; }
.vendor-carousel__viewport {
    overflow-x: auto;
    scrollbar-width: none;      /* motion is the affordance, not a scrollbar */
    border: 1px solid var(--border);
    border-radius: var(--radius);
    background: var(--bg);
}
.vendor-carousel__viewport::-webkit-scrollbar { display: none; }
.vendor-carousel__track {
    display: flex;
    align-items: stretch;
    gap: 16px;
    padding: 12px;
    width: max-content;
}
.vendor-carousel .vendor-card {
    flex: 0 0 auto;
    width: 240px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    overflow: hidden;
    transition: border-color .15s ease;
}
.vendor-carousel .vendor-card:hover { border-color: var(--orange); }
.vendor-carousel__arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border: 1px solid var(--border-strong);
    border-radius: 50%;
    background: var(--bg);
    color: var(--text);
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(17, 41, 77, .12);
    transition: border-color .15s ease, color .15s ease, transform .15s ease;
}
.vendor-carousel__arrow:hover { border-color: var(--orange); color: var(--orange-600); transform: translateY(-50%) scale(1.06); }
.vendor-carousel__arrow svg { width: 18px; height: 18px; }
.vendor-carousel__arrow--prev { left: -14px; }
.vendor-carousel__arrow--next { right: -14px; }
@media (max-width: 640px) {
    .vendor-carousel .vendor-card { width: 200px; }
    .vendor-carousel__arrow--prev { left: 4px; }
    .vendor-carousel__arrow--next { right: 4px; }
}

/* Dark theme: Google Maps embeds can't be themed directly, so invert +
   hue-rotate turns the light map into a matching dark one (colours like
   water/parks stay plausible because the hue rotation flips them back). */
[data-theme="dark"] .map-frame iframe {
    filter: invert(0.9) hue-rotate(180deg) contrast(0.92) saturate(0.85);
}

/* ===========================================================================
   Mobile search-suggest readability + Torq chat history
   =========================================================================== */

/* Phones: the suggest panel takes the form's full width and lets titles
   breathe on two lines instead of ellipsising into nothing. */
@media (max-width: 640px) {
    .search-suggest {
        left: 0 !important;
        width: 100% !important;
    }
    .ss-item { flex-direction: column; align-items: flex-start; gap: .15rem; }
    .ss-item .ss-title { white-space: normal; }
}

/* Quick-start chips row hides while a conversation is loaded */
.ai-suggestions[hidden] { display: none; }

/* History button badge — red count of saved chats */
.ai-history-btn { position: relative; }
.ai-history-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    border-radius: 999px;
    background: var(--danger);
    color: #fff;
    font-size: .65rem;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
}
.ai-history-btn.is-active { opacity: 1; background: rgba(255, 255, 255, .14); }

/* History list view (replaces the message area while open) */
.ai-history-panel {
    flex: 1;
    overflow-y: auto;
    padding: 1rem;
    background: var(--surface);
}
.ai-history-panel__title {
    margin: 0 0 .75rem;
    font-family: var(--font-head);
    font-weight: 600;
}
.ai-history-panel__list { display: flex; flex-direction: column; gap: .5rem; }
.ai-history-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: .15rem;
    width: 100%;
    padding: .7rem .85rem;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--bg);
    color: var(--text);
    font: inherit;
    text-align: left;
    cursor: pointer;
    transition: border-color .15s ease;
}
.ai-history-item:hover { border-color: var(--orange); }
.ai-history-item__title { font-weight: 600; font-size: .9rem; }
.ai-history-item__when { font-size: .75rem; color: var(--text-muted); }

/* ===========================================================================
   Insights — vendor tab rail
   =========================================================================== */
.vendor-insights {
    display: grid;
    grid-template-columns: 250px 1fr;
    gap: 2rem;
    align-items: start;
}
.vendor-insights__rail {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    position: sticky;
    top: 1rem;
    max-height: calc(100dvh - 100px);
    overflow-y: auto;
    overflow-x: hidden;
    padding-right: .35rem;
}
.vendor-insights__tab {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .6rem;
    width: 100%;
    padding: .45rem .7rem;
    border: 0;
    border-left: 2px solid transparent;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background: transparent;
    color: var(--text-muted);
    font: inherit;
    font-size: .9rem;
    text-align: left;
    cursor: pointer;
    transition: background-color .12s ease, color .12s ease, border-color .12s ease;
}
.vendor-insights__tab:hover { background: var(--surface); color: var(--text); }
.vendor-insights__tab.is-active {
    border-left-color: var(--orange);
    background: var(--orange-soft);
    color: var(--orange-600);
    font-weight: 600;
}
.vendor-insights__count {
    font-size: .72rem;
    font-weight: 600;
    color: var(--text-muted);
    background: var(--surface-2);
    border-radius: 999px;
    padding: .05rem .45rem;
    flex-shrink: 0;
}
.vendor-insights__tab.is-active .vendor-insights__count { background: var(--orange); color: #fff; }

.vendor-insights__panels { min-width: 0; }
.vendor-insights__panel {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}
.vendor-insights__panel[hidden] { display: none; }
.vendor-insights__article h3 { margin: .15rem 0 .35rem; }
.vendor-insights__article p { margin-bottom: .5rem; }
.vendor-insights__courses { align-self: flex-start; }

@media (max-width: 820px) {
    .vendor-insights { grid-template-columns: 1fr; }
    /* Rail becomes a horizontally scrollable chip row on phones. */
    .vendor-insights__rail {
        position: static;
        max-height: none;
        flex-direction: row;
        overflow-x: auto;
        overflow-y: hidden;
        gap: .4rem;
        padding: 0 0 .5rem;
        scrollbar-width: none;
    }
    .vendor-insights__rail::-webkit-scrollbar { display: none; }
    .vendor-insights__tab {
        width: auto;
        flex: 0 0 auto;
        border: 1px solid var(--border-strong);
        border-radius: 999px;
        padding: .35rem .8rem;
    }
    .vendor-insights__tab.is-active { border-color: var(--orange); }
}

/* ===========================================================================
   Page rails — mirrored PCB bus traces in the wide-desktop margins,
   with orange signal pulses flowing hero → footer.
   =========================================================================== */
.insights-body { position: relative; }
.page-rail {
    display: none;
    position: absolute;
    top: 0;
    bottom: 0;
    width: 90px;
    pointer-events: none;
    opacity: .8;
}
.page-rail--left { left: 18px; }
.page-rail--right { right: 18px; transform: scaleX(-1); } /* identical, flipped */
/* Only where genuine margin space exists beyond the 1380px container. */
@media (min-width: 1600px) {
    .page-rail { display: block; }
}
.page-rail__svg { display: block; }
.rail-trace { stroke: var(--border-strong); stroke-width: 2; }
.rail-trace--leg { stroke-width: 3; }
.rail-via { fill: var(--bg); stroke: var(--border-strong); stroke-width: 2; }
.rail-pad { fill: var(--surface-2); stroke: var(--border-strong); stroke-width: 1.5; }

/* The signal: a short orange pulse travelling the trace on a seamless loop.
   Dash period (60 + 1400) matches the keyframe offset, so the cycle never
   visibly restarts. */
.rail-signal {
    stroke: var(--orange);
    stroke-width: 2;
    stroke-linecap: round;
    stroke-dasharray: 60 1400;
    stroke-dashoffset: 60; /* static fallback: one pulse resting near the top */
    opacity: .9;
}
@media (prefers-reduced-motion: no-preference) {
    .rail-signal {
        animation: railFlow var(--rf-dur, 7s) linear var(--rf-delay, 0s) infinite;
    }
    @keyframes railFlow {
        from { stroke-dashoffset: 1460; }
        to   { stroke-dashoffset: 0; }
    }
}

/* ===========================================================================
   Rail/footer join, card title colours, orphan-card centring
   =========================================================================== */

/* The bus rails must meet the footer flush — drop the footer's gap on the
   insights page and let the rails run right up to its border. */
main:has(.insights-body) + .site-footer { margin-top: 0; }
.insights-body { padding-bottom: 2rem; }

/* Card titles: navy in light theme, orange in dark (insights, learnerships,
   events). Hover warms to orange in light for affordance. */
.insight-card h3 a,
.vendor-insights__article h3 a,
.learnership-card h3 a,
.event-card h3 {
    color: var(--navy);
}
.insight-card h3 a:hover,
.vendor-insights__article h3 a:hover,
.learnership-card h3 a:hover {
    color: var(--orange-600);
}
[data-theme="dark"] .insight-card h3 a,
[data-theme="dark"] .vendor-insights__article h3 a,
[data-theme="dark"] .learnership-card h3 a,
[data-theme="dark"] .event-card h3 {
    color: var(--orange);
}

/* A lone learnership card on the last row sits centred, not stranded left. */
@media (min-width: 769px) {
    .grid-2 > .learnership-card:last-child:nth-child(odd) {
        grid-column: 1 / -1;
        justify-self: center;
        width: calc(50% - .625rem); /* one column's width incl. half the gap */
    }
}

/* About delivery modes: flex-centred rows, so the trailing pair of cards
   sits in the middle instead of hugging the left edge. */
.mode-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 1.25rem;
}
.mode-grid > .mode-card {
    flex: 0 0 calc((100% - 2.5rem) / 3);
}
@media (max-width: 768px) {
    .mode-grid > .mode-card { flex-basis: 100%; }
}

/* ===========================================================================
   Mobile booking FAB + mini-cart mobile sheet polish
   =========================================================================== */

/* Floating "Book course" trigger — phones only, stacked above the Torq
   launcher; JS reveals it while the booking card is out of view. */
.book-fab {
    position: fixed;
    right: 1rem;
    bottom: 5.75rem;
    z-index: 998;
    display: none;
    align-items: center;
    gap: .5rem;
    padding: .85rem 1.2rem;
    border: 0;
    border-radius: 999px;
    background: var(--orange);
    color: #fff;
    font-family: var(--font-head);
    font-size: .95rem;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 12px 32px rgba(242, 106, 27, .45);
}
@media (max-width: 768px) {
    .book-fab:not([hidden]) { display: inline-flex; }
}
@media (prefers-reduced-motion: no-preference) {
    .book-fab:not([hidden]) { animation: fabIn .25s cubic-bezier(.2, 1.2, .4, 1); }
    @keyframes fabIn {
        from { opacity: 0; transform: translateY(14px) scale(.9); }
        to   { opacity: 1; transform: translateY(0) scale(1); }
    }
}

/* Long course titles wrap inside the mini-cart instead of forcing overflow. */
.mini-cart .mc-title { overflow-wrap: anywhere; }