/* ==========================================================================
   MS Growth Academy — design system
   Navy + gold palette taken from the academy logo.
   ========================================================================== */

:root {
    /* Brand */
    --navy-900: #0B1B42;
    --navy-800: #102452;
    --navy-700: #16305F;
    --navy-600: #1B3E82;
    --navy-500: #2A4E96;
    --navy-400: #3E63AC;
    --navy-200: #A8B8DA;

    --gold-700: #A8842F;
    --gold-600: #B8913C;
    --gold: #C9A24B;
    --gold-400: #D4B266;
    --gold-300: #E4C87A;
    --gold-100: #F4E7C6;

    /* Neutrals */
    --paper: #FFFFFF;
    --cream: #F7F8FC;
    --cream-2: #EEF1F8;
    --line: #E2E7F1;
    --ink: #14213D;
    --ink-soft: #3A4560;
    --muted: #6A748C;

    /* Type */
    --font-display: 'Playfair Display', Georgia, 'Times New Roman', serif;
    --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Layout */
    --container: 1200px;
    --gutter: 6vw;
    --radius-sm: 10px;
    --radius: 16px;
    --radius-lg: 24px;
    --radius-xl: 32px;

    /* Elevation */
    --shadow-sm: 0 2px 8px rgba(11, 27, 66, .06);
    --shadow: 0 12px 30px rgba(11, 27, 66, .09);
    --shadow-lg: 0 28px 60px rgba(11, 27, 66, .16);
    --shadow-gold: 0 14px 32px rgba(201, 162, 75, .35);

    --header-h: 76px;
    --ticker-h: 40px;
}

/* --------------------------------------------------------------- Reset --- */
*,
*::before,
*::after { box-sizing: border-box; }

* { margin: 0; padding: 0; }

html {
    scroll-behavior: smooth;
    scroll-padding-top: calc(var(--header-h) + 24px);
    -webkit-text-size-adjust: 100%;
}

/* A flat cream fill read as bare on every section that doesn't set its own
   background, which is most of the page between the hero and the footer.
   These soft gold/navy washes sit once on the document, at fixed points
   near its top, sides and a lower corner, so the plain sections along the
   way each pick up a little of one instead of all reading as the same
   blank cream. */
body {
    font-family: var(--font-body);
    font-size: 16px;
    line-height: 1.6;
    color: var(--ink);
    background:
        radial-gradient(1100px 620px at 12% 0%, rgba(201, 162, 75, .09), transparent 60%),
        radial-gradient(900px 560px at 100% 18%, rgba(27, 62, 130, .07), transparent 58%),
        radial-gradient(800px 620px at -5% 62%, rgba(201, 162, 75, .06), transparent 55%),
        var(--cream);
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

/* height:auto keeps the intrinsic ratio when max-width shrinks a sized image. */
img, svg { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; cursor: pointer; border: none; background: none; color: inherit; }
ul, ol { list-style: none; }

h1, h2, h3, h4, .display { font-family: var(--font-display); font-weight: 700; line-height: 1.15; letter-spacing: -.01em; }

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

.skip-link {
    position: absolute;
    left: -9999px;
    top: 0;
    z-index: 999;
    background: var(--navy-900);
    color: #fff;
    padding: 12px 20px;
    border-radius: 0 0 var(--radius-sm) 0;
}
.skip-link:focus { left: 0; }

.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    *, *::before, *::after {
        animation-duration: .01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: .01ms !important;
    }
}

/* ----------------------------------------------------------- Utilities --- */
.container {
    width: min(100% - (var(--gutter) * 2), var(--container));
    margin-inline: auto;
}
.container-wide { width: min(100% - (var(--gutter) * 2), 1380px); margin-inline: auto; }

section { position: relative; }
.section { padding: 96px 0; }
.section-sm { padding: 64px 0; }
.section-tight { padding-top: 0; }

.bg-cream { background: var(--cream); }
.bg-cream-2 { background: var(--cream-2); }
.bg-paper { background: var(--paper); }
.bg-navy { background: var(--navy-900); color: #fff; }

.text-center { text-align: center; }

/* Reveal on scroll */
.reveal {
    opacity: 0;
    transform: translateY(28px);
    transition: opacity .7s cubic-bezier(.22, .68, .28, 1), transform .7s cubic-bezier(.22, .68, .28, 1);
    will-change: opacity, transform;
}
.reveal.is-visible { opacity: 1; transform: none; }

/* Decorative background blobs */
.blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .3;
    pointer-events: none;
    z-index: 0;
}
.blob--gold { background: var(--gold-300); }
.blob--navy { background: var(--navy-400); }

/* ------------------------------------------------------------ Buttons --- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 15px 30px;
    border-radius: 999px;
    font-weight: 600;
    font-size: 15px;
    line-height: 1;
    text-align: center;
    transition: transform .25s ease, box-shadow .25s ease, background .25s ease, color .25s ease, border-color .25s ease;
}
.btn:hover { transform: translateY(-3px); }
.btn:active { transform: translateY(-1px); }

.btn--primary { background: var(--navy-900); color: #fff; box-shadow: var(--shadow); }
.btn--primary:hover { background: var(--navy-600); box-shadow: var(--shadow-lg); }

.btn--gold { background: var(--gold); color: var(--navy-900); box-shadow: var(--shadow-gold); }
.btn--gold:hover { background: var(--gold-300); }

.btn--ghost { border: 1.5px solid var(--navy-600); color: var(--navy-900); }
.btn--ghost:hover { background: var(--navy-900); color: #fff; border-color: var(--navy-900); }

.btn--light { background: #fff; color: var(--navy-900); box-shadow: var(--shadow); }
.btn--light:hover { background: var(--gold-100); }

.btn--outline-light { border: 1.5px solid rgba(255, 255, 255, .45); color: #fff; }
.btn--outline-light:hover { background: rgba(255, 255, 255, .12); border-color: #fff; }

.btn--sm { padding: 11px 22px; font-size: 13.5px; }
.btn--block { width: 100%; }

/* -------------------------------------------------------------- Chips --- */
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .14em;
    text-transform: uppercase;
    color: var(--gold-700);
    background: var(--gold-100);
    border: 1px solid rgba(201, 162, 75, .35);
    padding: 8px 16px;
    border-radius: 999px;
}
.eyebrow--light {
    color: var(--gold-300);
    background: rgba(201, 162, 75, .12);
    border-color: rgba(201, 162, 75, .3);
}
.eyebrow .dot {
    width: 7px; height: 7px;
    border-radius: 50%;
    background: #E5544B;
    animation: pulse-dot 1.7s ease-in-out infinite;
}
@keyframes pulse-dot {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: .35; transform: scale(1.35); }
}

.kicker {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--gold-700);
    margin-bottom: 14px;
}
.kicker--light { color: var(--gold-300); }

.pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 7px 14px;
    border-radius: 999px;
    background: var(--cream-2);
    border: 1px solid var(--line);
    font-size: 12.5px;
    font-weight: 500;
    color: var(--ink-soft);
}
.pill--gold { background: var(--gold-100); border-color: rgba(201, 162, 75, .35); color: var(--gold-700); }
.pill--dark { background: rgba(255, 255, 255, .09); border-color: rgba(255, 255, 255, .18); color: #fff; }

/* -------------------------------------------------------- Section head --- */
.section-head { max-width: 660px; margin: 0 auto 56px; text-align: center; }
.section-head h2 { font-size: clamp(28px, 4vw, 44px); color: var(--navy-900); }
.section-head p { color: var(--muted); margin-top: 16px; font-size: 16px; line-height: 1.75; }
.section-head--left { margin-inline: 0; text-align: left; }
.section-head--light h2 { color: #fff; }
.section-head--light p { color: rgba(255, 255, 255, .72); }

/* ----------------------------------------------------- Scroll progress --- */
#scroll-progress {
    position: fixed;
    inset: 0 auto auto 0;
    height: 3px;
    width: 0;
    background: linear-gradient(90deg, var(--gold), var(--navy-400));
    z-index: 300;
    transition: width .1s linear;
}

/* ------------------------------------------------------------- Header --- */
.site-header {
    position: fixed;
    inset: 0 0 auto 0;
    z-index: 200;
    height: var(--header-h);
    display: flex;
    align-items: center;
    background: rgba(255, 255, 255, .82);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(20, 33, 61, .06);
    transition: height .3s ease, box-shadow .3s ease, background .3s ease;
}
.site-header.is-scrolled {
    height: 64px;
    box-shadow: 0 6px 26px rgba(11, 27, 66, .1);
    background: rgba(255, 255, 255, .95);
}
.site-header .container-wide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    width: min(100% - 40px, 1380px);
}

.brand { display: flex; align-items: center; gap: 11px; }
.brand__mark {
    width: 42px; height: 42px;
    border-radius: 12px;
    object-fit: contain;
    background: #fff;
    border: 1px solid var(--line);
    padding: 3px;
    flex-shrink: 0;
    transition: transform .3s ease;
}
.brand:hover .brand__mark { transform: rotate(-4deg) scale(1.05); }
.brand__text { display: flex; flex-direction: column; line-height: 1.15; }
.brand__name { font-family: var(--font-display); font-weight: 700; font-size: 17px; color: var(--navy-900); letter-spacing: -.01em; }
.brand__sub { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--gold-700); font-weight: 600; }

.main-nav ul { display: flex; align-items: center; gap: 30px; }
.main-nav a {
    position: relative;
    font-size: 14.5px;
    font-weight: 500;
    color: var(--navy-800);
    padding: 6px 0;
    transition: color .25s ease;
}
.main-nav a::after {
    content: '';
    position: absolute;
    left: 0; bottom: 0;
    height: 2px; width: 0;
    background: var(--gold);
    border-radius: 2px;
    transition: width .3s ease;
}
.main-nav a:hover { color: var(--gold-700); }
.main-nav a:hover::after,
.main-nav a.is-active::after { width: 100%; }
.main-nav a.is-active { color: var(--gold-700); font-weight: 600; }

.header-actions { display: flex; align-items: center; gap: 12px; }
.header-phone {
    display: inline-flex; align-items: center; gap: 7px;
    font-size: 13.5px; font-weight: 600; color: var(--navy-800);
}
.header-phone:hover { color: var(--gold-700); }

.nav-toggle {
    display: none;
    width: 44px; height: 44px;
    border-radius: 12px;
    border: 1px solid var(--line);
    background: #fff;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: 5px;
}
.nav-toggle span {
    display: block;
    width: 20px; height: 2px;
    background: var(--navy-900);
    border-radius: 2px;
    transition: transform .3s ease, opacity .3s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* Mobile drawer */
.mobile-nav {
    position: fixed;
    inset: var(--header-h) 0 auto 0;
    z-index: 190;
    background: #fff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-lg);
    padding: 20px var(--gutter) 28px;
    display: none;
}
.mobile-nav.is-open { display: block; animation: drop-in .28s ease; }
@keyframes drop-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
.mobile-nav ul { display: flex; flex-direction: column; gap: 4px; }
.mobile-nav a {
    display: block;
    padding: 13px 4px;
    font-size: 16px;
    font-weight: 500;
    color: var(--navy-800);
    border-bottom: 1px solid var(--cream-2);
}
.mobile-nav .btn { margin-top: 18px; }

/* ------------------------------------------------------------- Ticker --- */
.ticker {
    position: relative;
    margin-top: var(--header-h);
    background: var(--navy-900);
    overflow: hidden;
    z-index: 5;
}
.ticker::before,
.ticker::after {
    content: '';
    position: absolute;
    top: 0; bottom: 0;
    width: 70px;
    z-index: 2;
    pointer-events: none;
}
.ticker::before { left: 0; background: linear-gradient(90deg, var(--navy-900), transparent); }
.ticker::after { right: 0; background: linear-gradient(270deg, var(--navy-900), transparent); }

.ticker__track {
    display: flex;
    width: max-content;
    animation: ticker-scroll 45s linear infinite;
}
.ticker:hover .ticker__track,
.ticker__track:focus-within { animation-play-state: paused; }

@keyframes ticker-scroll {
    from { transform: translateX(0); }
    to { transform: translateX(-50%); }
}

.ticker__item {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 11px 26px;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--gold-300);
    white-space: nowrap;
    border-right: 1px solid rgba(228, 200, 122, .22);
    transition: color .25s ease, background .25s ease;
}
.ticker__item:hover { color: #fff; background: rgba(201, 162, 75, .16); }
.ticker__item::before {
    content: '';
    width: 5px; height: 5px;
    border-radius: 50%;
    background: var(--gold);
    flex-shrink: 0;
}

/* --------------------------------------------------------------- Hero --- */
.hero {
    position: relative;
    padding: 172px 0 148px;
    overflow: hidden;
    isolation: isolate;
}

/* The photo carries its own gradient wash in the same background-image
   layer, so there is exactly one paint layer to size and no separate
   overlay element to keep lined up with it. */
.hero__bg {
    position: absolute;
    inset: 0;
    z-index: -1;
    /* Relative to this stylesheet's own location (public/css/site.css), so
       it resolves to public/images/hero-bg.jpg whether the app sits at the
       domain root (production) or under a subfolder like localhost/msgrowth
       (local XAMPP) — a root-absolute /images/... path only works for the
       first of those. */
    background-image:
        linear-gradient(180deg, rgba(8, 18, 46, .58) 0%, rgba(8, 18, 46, .82) 58%, rgba(8, 18, 46, .93) 100%),
        url('../images/hero-bg.jpg');
    background-size: cover;
    background-position: center 68%;
}

.hero__grid {
    position: relative;
    z-index: 2;
    max-width: 1100px;
    margin: 0 auto;
    text-align: center;
}

.hero h1 {
    /* Sized to still fit "Learn. Earn. Grow." on one line at the width
       above — checked at 1440px, 1280px and 1024px, not just estimated. */
    font-size: clamp(38px, 5.4vw, 74px);
    line-height: 1.03;
    margin: 26px 0 0;
    white-space: nowrap;
}
/* Inline (the default) rather than block, so the words sit on one line —
   the space between them comes from the whitespace already between the
   spans in the template, not from any margin added here. */
.hero h1 .word-1 { color: #fff; }
.hero h1 .word-2 { color: var(--gold-300); }
.hero h1 .word-3 { color: var(--navy-200); }

.hero__lead {
    color: rgba(255, 255, 255, .8);
    font-size: 17.5px;
    line-height: 1.75;
    margin: 26px auto 34px;
    max-width: 600px;
}
.hero__cta { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }

.hero__proof {
    display: flex;
    gap: 34px;
    margin-top: 48px;
    flex-wrap: wrap;
    justify-content: center;
}
.hero__proof div { font-size: 12.5px; color: rgba(255, 255, 255, .62); }
.hero__proof strong {
    display: block;
    font-family: var(--font-display);
    font-size: 26px;
    color: #fff;
    margin-bottom: 2px;
}

/* --------------------------------------------------------- Trust strip --- */
.trust-strip {
    background: var(--paper);
    border-block: 1px solid var(--line);
    padding: 26px 0;
}
.trust-strip__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 22px;
    flex-wrap: wrap;
}
.trust-item {
    display: flex;
    align-items: center;
    gap: 11px;
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
}
.trust-item__icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--cream-2);
    color: var(--navy-600);
    display: grid;
    place-items: center;
    flex-shrink: 0;
}

/* -------------------------------------------------------------- Stats --- */
.stats-band {
    background: var(--navy-900);
    border-radius: var(--radius-xl);
    padding: 56px 5%;
    position: relative;
    overflow: hidden;
}
.stats-band::after {
    content: '';
    position: absolute;
    width: 340px; height: 340px;
    border-radius: 50%;
    background: var(--gold);
    opacity: .13;
    top: -150px; right: -110px;
}
.stats-grid {
    position: relative;
    z-index: 2;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 28px;
    text-align: center;
}
.stat__num {
    font-family: var(--font-display);
    font-size: clamp(34px, 4vw, 46px);
    font-weight: 700;
    color: var(--gold-300);
    line-height: 1;
}
.stat__label {
    margin-top: 10px;
    font-size: 13px;
    color: rgba(255, 255, 255, .68);
    letter-spacing: .02em;
}

/* ------------------------------------------------------- Course cards --- */
.course-grid {
    display: grid;
    /* min(280px, 100%): same reasoning as .testimonial-grid — a flat floor
       is wider than the very smallest phones once gutters are subtracted,
       and this is the only sizing rule for the column. */
    grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
    gap: 24px;
}

.course-card {
    position: relative;
    display: flex;
    flex-direction: column;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s ease, border-color .4s ease;
}
.course-card:hover {
    transform: translateY(-9px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(201, 162, 75, .5);
}

/* Colour band standing in for a course photo. Three gradients cycle across
   the grid so sixteen cards in a row read as a set, not sixteen repeats of
   the same tile — the badge and title still carry the actual identity. */
.course-card__cover {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 22px 22px 40px;
    background: linear-gradient(135deg, var(--navy-900), var(--navy-600));
    overflow: hidden;
}
.course-card__cover::after {
    content: '';
    position: absolute;
    inset: 0;
    background-image: radial-gradient(rgba(255, 255, 255, .16) 1px, transparent 1px);
    background-size: 15px 15px;
    -webkit-mask-image: linear-gradient(160deg, #000 10%, transparent 65%);
            mask-image: linear-gradient(160deg, #000 10%, transparent 65%);
}
.course-grid > a:nth-child(3n+2) .course-card__cover { background: linear-gradient(135deg, var(--navy-800), var(--navy-400)); }
.course-grid > a:nth-child(3n+3) .course-card__cover { background: linear-gradient(135deg, var(--gold-700), var(--navy-800)); }

.course-card__badge {
    position: relative;
    z-index: 2;
    width: 52px; height: 52px;
    border-radius: 14px;
    background: rgba(255, 255, 255, .14);
    border: 1px solid rgba(255, 255, 255, .28);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
    font-size: 14px;
    letter-spacing: .01em;
    transition: transform .35s ease, background .35s ease;
}
.course-card:hover .course-card__badge {
    background: var(--gold);
    border-color: var(--gold);
    color: var(--navy-900);
    transform: rotate(-7deg) scale(1.07);
}
.course-card__live {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: #fff;
    background: rgba(11, 27, 66, .35);
    border: 1px solid rgba(255, 255, 255, .3);
    border-radius: 999px;
    padding: 5px 11px 5px 9px;
}
.course-card__live-dot {
    width: 6px; height: 6px;
    border-radius: 50%;
    background: #FF6B5E;
    animation: pulse-dot 1.7s ease-in-out infinite;
}

.course-card__body {
    position: relative;
    z-index: 2;
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-top: -22px;
    padding: 22px 24px 24px;
    background: #fff;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.course-card h3 { font-size: 19px; color: var(--navy-900); margin-bottom: 9px; }
.course-card p { font-size: 14px; color: var(--muted); line-height: 1.65; flex-grow: 1; }

.course-card__meta {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 20px;
    padding-top: 18px;
    border-top: 1px solid var(--cream-2);
    font-size: 12.5px;
    color: var(--muted);
}
.course-card__meta span { display: inline-flex; align-items: center; gap: 5px; }
.course-card__link {
    margin-top: 18px;
    font-size: 13.5px;
    font-weight: 700;
    color: var(--navy-600);
    display: inline-flex;
    align-items: center;
    gap: 7px;
    transition: gap .25s ease, color .25s ease;
}
.course-card:hover .course-card__link { gap: 12px; color: var(--gold-700); }

/* "See all" tile — already a solid colour panel, so it keeps the plain
   single-padding layout rather than the cover/body split above. */
.course-card--cta {
    background: linear-gradient(150deg, var(--navy-800), var(--navy-600));
    border-color: transparent;
    color: #fff;
    padding: 34px 28px;
    justify-content: center;
    align-items: flex-start;
    gap: 12px;
}
.course-card--cta .course-card__badge { margin-bottom: 4px; }
.course-card--cta h3 { color: #fff; }
.course-card--cta p { color: rgba(255, 255, 255, .72); flex-grow: 0; }
.course-card--cta .course-card__link { color: var(--gold-300); }
.course-card--cta:hover .course-card__link { color: #fff; }

/* --------------------------------------------------------- Steps / how --- */
.steps {
    position: relative;
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}
/* A single line threading behind all four badges reads as one path from
   enrolling to earning, rather than four unrelated cards sitting side by
   side. It sits at the badge's vertical centre and fades at both ends so it
   never looks like it is cut off by the container edge. */
.steps::before {
    content: '';
    position: absolute;
    top: 60px;
    left: 8%;
    right: 8%;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--gold-300) 12%, var(--gold-300) 88%, transparent);
}

.step {
    position: relative;
    z-index: 1;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 30px 26px 28px;
    box-shadow: var(--shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.step:hover {
    transform: translateY(-7px);
    box-shadow: var(--shadow-lg);
    border-color: rgba(201, 162, 75, .4);
}

.step__badge {
    position: relative;
    width: 60px; height: 60px;
    border-radius: 16px;
    display: grid;
    place-items: center;
    color: #fff;
    margin-bottom: 22px;
    background: linear-gradient(135deg, var(--navy-900), var(--navy-600));
    box-shadow: 0 10px 22px -8px rgba(11, 27, 66, .45);
}
/* Same alternating treatment as the course card covers, so the whole path
   reads as one family of components rather than a one-off. */
.steps > .step:nth-child(2) .step__badge { background: linear-gradient(135deg, var(--navy-800), var(--navy-400)); }
.steps > .step:nth-child(3) .step__badge { background: linear-gradient(135deg, var(--gold-700), var(--navy-800)); }
.steps > .step:nth-child(4) .step__badge { background: linear-gradient(135deg, var(--navy-900), var(--gold-700)); }

.step__num {
    position: absolute;
    top: -8px; right: -8px;
    width: 24px; height: 24px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--navy-900);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 12px;
    display: grid;
    place-items: center;
    border: 2px solid var(--paper);
}

.step h3 { font-size: 17.5px; color: var(--navy-900); margin-bottom: 9px; }
.step p { font-size: 14px; color: var(--muted); line-height: 1.7; margin: 0; }

/* ---------------------------------------------------------- Why / USP --- */
.why-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: center;
}
.why-list { display: flex; flex-direction: column; gap: 26px; margin-top: 30px; }
.why-item { display: flex; gap: 18px; }
.why-item__num {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    color: var(--gold);
    min-width: 40px;
    line-height: 1.3;
}
.why-item h3 { font-size: 17px; color: var(--navy-900); margin-bottom: 5px; }
.why-item p { font-size: 14.5px; color: var(--muted); line-height: 1.7; }

.zoom-panel {
    background: linear-gradient(160deg, var(--navy-900), var(--navy-700));
    border-radius: var(--radius-xl);
    padding: 52px 40px;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.zoom-panel::before {
    content: '';
    position: absolute;
    inset: auto -60px -90px auto;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: var(--gold);
    opacity: .14;
}
.zoom-panel__icon {
    position: relative;
    width: 92px; height: 92px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--navy-900);
    display: grid;
    place-items: center;
    margin: 0 auto 22px;
    animation: pulse-ring 2.6s ease-out infinite;
}
@keyframes pulse-ring {
    0% { box-shadow: 0 0 0 0 rgba(201, 162, 75, .55); }
    70% { box-shadow: 0 0 0 28px rgba(201, 162, 75, 0); }
    100% { box-shadow: 0 0 0 0 rgba(201, 162, 75, 0); }
}
.zoom-panel h3 { font-size: 22px; margin-bottom: 12px; position: relative; }
.zoom-panel p { color: rgba(255, 255, 255, .72); font-size: 14.5px; line-height: 1.75; position: relative; }
.zoom-panel__points {
    position: relative;
    margin-top: 26px;
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    justify-content: center;
}

/* -------------------------------------------------------- Instructors --- */
.instructor-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr));
    gap: 24px;
}
.instructor-card {
    position: relative;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 40px 26px 32px;
    text-align: center;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease;
}
.instructor-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); }

/* A soft colour bloom behind the avatar instead of a flat card top — the
   only decoration a photo-less trainer card has room for, so it carries
   the whole "this card belongs to the brand" job. Alternates gold and navy
   across the grid the same way the course cards' covers do. */
.instructor-card__glow {
    position: absolute;
    top: -70px; left: 50%;
    transform: translateX(-50%);
    width: 220px; height: 220px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(201, 162, 75, .24), transparent 68%);
    pointer-events: none;
}
.instructor-grid > :nth-child(3n+2) .instructor-card__glow {
    background: radial-gradient(circle, rgba(27, 62, 130, .2), transparent 68%);
}

.instructor-card__avatar-ring {
    position: relative;
    z-index: 1;
    display: inline-flex;
    padding: 4px;
    border-radius: 50%;
    background: conic-gradient(from -40deg, var(--gold-300), var(--gold-700), var(--navy-600), var(--gold-300));
    margin-bottom: 20px;
}
.instructor-card__avatar-ring .avatar {
    width: 84px; height: 84px;
    margin: 0;
    border: 3px solid #fff;
}

.avatar {
    width: 76px; height: 76px;
    border-radius: 50%;
    margin: 0 auto 18px;
    display: grid;
    place-items: center;
    font-family: var(--font-display);
    font-size: 25px;
    font-weight: 700;
    color: var(--navy-900);
    background: linear-gradient(140deg, var(--gold-100), var(--gold-300));
    border: 2px solid var(--gold);
    object-fit: cover;
}
.avatar--sm { width: 50px; height: 50px; font-size: 17px; margin: 0; }
.instructor-card h3 { position: relative; font-size: 18.5px; color: var(--navy-900); margin-bottom: 8px; }
.instructor-card .role {
    position: relative;
    display: inline-block;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .02em;
    color: var(--gold-700);
    background: var(--gold-100);
    border: 1px solid rgba(201, 162, 75, .3);
    padding: 5px 14px;
    border-radius: 999px;
    margin-bottom: 16px;
}
.instructor-card p { position: relative; font-size: 13.5px; color: var(--muted); line-height: 1.7; }
.tag-row { position: relative; display: flex; flex-wrap: wrap; gap: 7px; justify-content: center; margin-top: 18px; }
.tag {
    font-size: 11.5px;
    padding: 5px 11px;
    border-radius: 999px;
    background: var(--cream-2);
    color: var(--ink-soft);
    font-weight: 500;
}

/* ------------------------------------------------------- Testimonials --- */
.testimonial-grid {
    display: grid;
    /* min(300px, 100%) rather than a bare 300px: on the narrowest phones
       (320px and under, once gutters are subtracted) a flat 300px floor is
       wider than the screen itself, and this is the column's only sizing
       rule — there is no separate mobile override to catch it. Capping the
       floor at 100% means the column can still shrink to fit instead of
       forcing a fixed-width overflow. */
    grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr));
    gap: 24px;
}
.testimonial-card {
    position: relative;
    background: linear-gradient(165deg, #fff, var(--cream) 130%);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 32px 28px 28px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform .35s ease, box-shadow .35s ease, border-color .35s ease;
}
.testimonial-card:hover { transform: translateY(-7px); box-shadow: var(--shadow-lg); border-color: rgba(201, 162, 75, .4); }

/* An oversized quotation mark reads as a deliberate editorial flourish
   rather than a generic template, and it is the one card type here that
   earns it — this is the only content on the page that is a direct quote. */
.testimonial-card::before {
    content: '\201C';
    position: absolute;
    top: -28px; right: 18px;
    font-family: var(--font-display);
    font-size: 130px;
    line-height: 1;
    color: var(--gold-100);
    z-index: 0;
}

.stars { position: relative; z-index: 1; color: var(--gold); font-size: 14px; letter-spacing: 3px; margin-bottom: 14px; }
.testimonial-card blockquote {
    position: relative;
    z-index: 1;
    font-family: var(--font-display);
    font-style: italic;
    font-size: 16px;
    line-height: 1.7;
    color: var(--ink-soft);
    flex-grow: 1;
}
.testimonial-card__person {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 13px;
    margin-top: 22px;
    padding-top: 20px;
    border-top: 1px solid var(--line);
}
.testimonial-card__person .avatar--sm {
    border-width: 2px;
    box-shadow: 0 0 0 3px var(--gold-100);
}
.testimonial-card__person h4 { font-family: var(--font-body); font-size: 14.5px; font-weight: 700; color: var(--navy-900); }
.testimonial-card__person span { font-size: 12.5px; color: var(--muted); }

/* ----------------------------------------------------------- Accordion --- */
.accordion { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 14px; }
.accordion-item {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    box-shadow: var(--shadow-sm);
    transition: border-color .3s ease, box-shadow .3s ease, background .3s ease;
}
.accordion-item:hover { border-color: rgba(201, 162, 75, .4); }
.accordion-item.is-open {
    border-color: rgba(201, 162, 75, .6);
    box-shadow: var(--shadow);
    background: linear-gradient(180deg, var(--gold-100) 0%, #fff 90px);
}
.accordion-trigger {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    padding: 19px 22px;
    text-align: left;
    font-size: 15.5px;
    font-weight: 600;
    color: var(--navy-900);
    transition: color .25s ease;
}
.accordion-trigger:hover { color: var(--gold-700); }
.accordion-trigger__mark {
    flex-shrink: 0;
    width: 30px; height: 30px;
    border-radius: 9px;
    background: var(--cream-2);
    color: var(--navy-600);
    display: grid;
    place-items: center;
    transition: background .3s ease, color .3s ease;
}
.accordion-item.is-open .accordion-trigger__mark { background: var(--navy-900); color: var(--gold-300); }
.accordion-trigger__icon {
    flex-shrink: 0;
    width: 28px; height: 28px;
    border-radius: 50%;
    background: var(--cream-2);
    color: var(--navy-600);
    display: grid;
    place-items: center;
    font-size: 16px;
    line-height: 1;
    transition: transform .3s ease, background .3s ease, color .3s ease;
}
.accordion-item.is-open .accordion-trigger__icon {
    transform: rotate(45deg);
    background: var(--gold);
    color: var(--navy-900);
}
.accordion-panel {
    display: grid;
    grid-template-rows: 0fr;
    transition: grid-template-rows .35s ease;
}
.accordion-item.is-open .accordion-panel { grid-template-rows: 1fr; }
.accordion-panel > div { overflow: hidden; }
.accordion-panel p,
.accordion-panel ul {
    padding: 0 24px 22px;
    font-size: 14.5px;
    line-height: 1.8;
    color: var(--muted);
}
.accordion-panel ul { display: grid; gap: 8px; }
.accordion-panel li { position: relative; padding-left: 20px; }
.accordion-panel li::before {
    content: '';
    position: absolute;
    left: 2px; top: 10px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--gold);
}

/* ------------------------------------------------------------ CTA band --- */
.cta-band {
    background: linear-gradient(150deg, var(--navy-900), var(--navy-700));
    border-radius: var(--radius-xl);
    padding: 72px 6%;
    text-align: center;
    color: #fff;
    position: relative;
    overflow: hidden;
}
.cta-band::before,
.cta-band::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background: var(--gold);
    opacity: .14;
}
.cta-band::before { width: 300px; height: 300px; top: -130px; right: -90px; }
.cta-band::after { width: 220px; height: 220px; bottom: -120px; left: -70px; opacity: .1; }
.cta-band > * { position: relative; z-index: 2; }
.cta-band h2 { font-size: clamp(28px, 3.8vw, 42px); }
.cta-band p { color: rgba(255, 255, 255, .75); margin: 16px auto 32px; max-width: 560px; font-size: 16px; }
.cta-band__actions { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }

/* ----------------------------------------------------------- Newsletter --- */
.newsletter-form {
    display: flex;
    gap: 10px;
    max-width: 460px;
    margin: 0 auto;
    flex-wrap: wrap;
}
.newsletter-form input {
    flex: 1 1 220px;
    padding: 14px 18px;
    border-radius: 999px;
    border: 1px solid rgba(255, 255, 255, .25);
    background: rgba(255, 255, 255, .1);
    color: #fff;
    font-size: 14.5px;
}
.newsletter-form input::placeholder { color: rgba(255, 255, 255, .55); }
.newsletter-form input:focus { outline-color: var(--gold-300); }

/* --------------------------------------------------------------- Forms --- */
.form-card {
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 38px;
    box-shadow: var(--shadow-sm);
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: flex; flex-direction: column; gap: 7px; }
.field--full { grid-column: 1 / -1; }
.field label { font-size: 13.5px; font-weight: 600; color: var(--navy-800); }
.field .req { color: #D64545; }
.field input,
.field select,
.field textarea {
    width: 100%;
    padding: 13px 16px;
    border: 1.5px solid var(--line);
    border-radius: var(--radius-sm);
    background: var(--cream);
    font-family: inherit;
    font-size: 15px;
    color: var(--ink);
    transition: border-color .25s ease, background .25s ease, box-shadow .25s ease;
}
.field textarea { min-height: 130px; resize: vertical; }
.field select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236A748C' d='M1 1l5 5 5-5'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; padding-right: 40px; }
.field input:focus,
.field select:focus,
.field textarea:focus {
    border-color: var(--gold);
    background: #fff;
    outline: none;
    box-shadow: 0 0 0 4px rgba(201, 162, 75, .16);
}
.field .error { font-size: 12.5px; color: #D64545; font-weight: 500; }
.field input.has-error,
.field select.has-error,
.field textarea.has-error { border-color: #D64545; }
.field .hint { font-size: 12.5px; color: var(--muted); }
.honeypot { position: absolute; left: -9999px; opacity: 0; height: 0; width: 0; }

.alert {
    display: flex;
    gap: 12px;
    padding: 16px 20px;
    border-radius: var(--radius-sm);
    font-size: 14.5px;
    margin-bottom: 24px;
    border: 1px solid;
}
.alert--success { background: #EDF7F0; border-color: #BFE0CA; color: #1E6B3A; }
.alert--error { background: #FDF0F0; border-color: #F3C9C9; color: #A63232; }

/* ---------------------------------------------------------- Page hero --- */
.page-hero {
    position: relative;
    padding: 72px 0 60px;
    background: linear-gradient(170deg, var(--navy-900), var(--navy-700));
    color: #fff;
    overflow: hidden;
}
.page-hero::after {
    content: '';
    position: absolute;
    width: 420px; height: 420px;
    border-radius: 50%;
    background: var(--gold);
    opacity: .12;
    top: -180px; right: -120px;
}
.page-hero > * { position: relative; z-index: 2; }
.page-hero h1 { font-size: clamp(34px, 5vw, 56px); margin-bottom: 18px; }
.page-hero p { color: rgba(255, 255, 255, .78); font-size: 17px; line-height: 1.75; max-width: 620px; }

.breadcrumb {
    display: flex;
    align-items: center;
    gap: 9px;
    font-size: 13px;
    color: rgba(255, 255, 255, .6);
    margin-bottom: 22px;
    flex-wrap: wrap;
}
.breadcrumb a:hover { color: var(--gold-300); }
.breadcrumb span[aria-current] { color: var(--gold-300); }

/* --------------------------------------------------- Course detail page --- */
.course-hero__grid {
    display: grid;
    grid-template-columns: 1.4fr 1fr;
    gap: 48px;
    align-items: start;
}
.course-facts {
    background: #fff;
    color: var(--ink);
    border-radius: var(--radius-lg);
    padding: 30px 28px;
    box-shadow: var(--shadow-lg);
}
.course-facts__price {
    display: flex;
    align-items: baseline;
    gap: 10px;
    padding-bottom: 18px;
    margin-bottom: 18px;
    border-bottom: 1px solid var(--cream-2);
}
.course-facts__price strong { font-family: var(--font-display); font-size: 32px; color: var(--navy-900); }
.course-facts__price del { font-size: 15px; color: var(--muted); }
.course-facts__price .save {
    font-size: 11.5px;
    font-weight: 700;
    background: var(--gold-100);
    color: var(--gold-700);
    padding: 4px 10px;
    border-radius: 999px;
}
.fact-list { display: flex; flex-direction: column; gap: 2px; margin-bottom: 22px; }
.fact-list li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 11px 0;
    font-size: 14px;
    border-bottom: 1px solid var(--cream-2);
}
.fact-list li:last-child { border-bottom: none; }
.fact-list .label { color: var(--muted); display: inline-flex; align-items: center; gap: 9px; }
.fact-list .value { font-weight: 600; color: var(--navy-900); text-align: right; }

.outcome-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr));
    gap: 18px;
}
.outcome {
    display: flex;
    gap: 14px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px;
    font-size: 14.5px;
    color: var(--ink-soft);
    line-height: 1.65;
    transition: transform .3s ease, border-color .3s ease;
}
.outcome:hover { transform: translateY(-4px); border-color: rgba(201, 162, 75, .5); }
.outcome__check {
    flex-shrink: 0;
    width: 26px; height: 26px;
    border-radius: 50%;
    background: var(--gold-100);
    color: var(--gold-700);
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 700;
}

/* Curriculum timeline */
.curriculum { max-width: 860px; margin: 0 auto; }
.curriculum .accordion-item { position: relative; padding-left: 0; }
.week-tag {
    flex-shrink: 0;
    display: inline-grid;
    place-items: center;
    min-width: 62px;
    padding: 6px 10px;
    border-radius: 999px;
    background: var(--navy-900);
    color: var(--gold-300);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.accordion-trigger__label { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.accordion-panel .module-desc {
    padding: 0 24px 12px;
    font-size: 14px;
    color: var(--ink-soft);
    font-style: italic;
}

.chip-grid { display: flex; flex-wrap: wrap; gap: 10px; }
.chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    background: #fff;
    border: 1px solid var(--line);
    font-size: 14px;
    font-weight: 500;
    color: var(--ink-soft);
    transition: transform .25s ease, border-color .25s ease, background .25s ease;
}
.chip:hover { transform: translateY(-3px); border-color: var(--gold); background: var(--gold-100); }

.split-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 48px; }

.instructor-feature {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    padding: 36px;
    align-items: start;
}
.instructor-feature .avatar { width: 100px; height: 100px; font-size: 32px; margin: 0; }
.instructor-feature h3 { font-size: 22px; color: var(--navy-900); margin-bottom: 4px; }
.instructor-feature .role { color: var(--gold-700); font-weight: 600; font-size: 14px; margin-bottom: 14px; }
.instructor-feature p { color: var(--muted); font-size: 14.5px; line-height: 1.8; }
.instructor-feature .tag-row { justify-content: flex-start; }

/* Sticky enrol bar (mobile) */
.sticky-enroll {
    position: fixed;
    inset: auto 0 0 0;
    z-index: 150;
    display: none;
    align-items: center;
    justify-content: space-between;
    gap: 14px;
    padding: 12px 18px;
    background: rgba(255, 255, 255, .96);
    backdrop-filter: blur(12px);
    border-top: 1px solid var(--line);
    box-shadow: 0 -6px 24px rgba(11, 27, 66, .1);
}
.sticky-enroll__price { font-family: var(--font-display); font-size: 20px; font-weight: 700; color: var(--navy-900); }
.sticky-enroll__meta { font-size: 11.5px; color: var(--muted); }

/* ------------------------------------------------------------- Footer --- */
.site-footer {
    background: var(--navy-900);
    color: rgba(255, 255, 255, .7);
    padding: 72px 0 0;
    position: relative;
    overflow: hidden;
}
.site-footer::before {
    content: '';
    position: absolute;
    width: 400px; height: 400px;
    border-radius: 50%;
    background: var(--navy-500);
    opacity: .22;
    filter: blur(90px);
    top: -180px; left: -120px;
}
.footer-grid {
    position: relative;
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
    gap: 44px;
    padding-bottom: 52px;
}
.footer-brand .brand__name { color: #fff; }
.footer-brand .brand__mark { background: #fff; border-color: rgba(255, 255, 255, .2); }
.footer-brand p { font-size: 14px; line-height: 1.8; margin-top: 18px; max-width: 330px; }
.footer-motto {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--gold-300);
    font-size: 16px;
    margin-top: 14px;
}
.footer-col h4 {
    font-family: var(--font-body);
    font-size: 12px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--gold-300);
    margin-bottom: 20px;
    font-weight: 700;
}
.footer-col ul { display: flex; flex-direction: column; gap: 11px; }
.footer-col a { font-size: 14px; transition: color .25s ease, padding-left .25s ease; }
.footer-col a:hover { color: var(--gold-300); padding-left: 5px; }

.footer-contact li { display: flex; gap: 11px; font-size: 14px; margin-bottom: 14px; align-items: flex-start; }
.footer-contact svg { flex-shrink: 0; margin-top: 3px; color: var(--gold-300); }

.social-row { display: flex; gap: 10px; margin-top: 20px; }
.social-row a {
    width: 38px; height: 38px;
    border-radius: 11px;
    background: rgba(255, 255, 255, .08);
    display: grid;
    place-items: center;
    transition: background .25s ease, transform .25s ease, color .25s ease;
}
.social-row a:hover { background: var(--gold); color: var(--navy-900); transform: translateY(-3px); }

.footer-bottom {
    position: relative;
    border-top: 1px solid rgba(255, 255, 255, .1);
    padding: 24px 0 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 18px;
    flex-wrap: wrap;
    font-size: 13px;
}
.footer-bottom a:hover { color: var(--gold-300); }

/* ------------------------------------------------------- WhatsApp FAB --- */
.whatsapp-fab {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 160;
    width: 56px; height: 56px;
    border-radius: 50%;
    background: #25D366;
    color: #fff;
    display: grid;
    place-items: center;
    box-shadow: 0 10px 26px rgba(37, 211, 102, .45);
    transition: transform .3s ease;
}
.whatsapp-fab:hover { transform: scale(1.08); }

/* ------------------------------------------------------------ 404 page --- */
.error-page { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: 90px 0; }
.error-page .code {
    font-family: var(--font-display);
    font-size: clamp(80px, 16vw, 170px);
    line-height: 1;
    color: var(--navy-900);
    opacity: .12;
}

/* --------------------------------------------------------- Responsive --- */
@media (max-width: 1080px) {
    .footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; }
    /* Two columns break the single left-to-right path the connector line
       implies, so it is dropped rather than made to bend. */
    .steps { grid-template-columns: repeat(2, 1fr); row-gap: 36px; }
    .steps::before { display: none; }
}

@media (max-width: 980px) {
    :root { --gutter: 22px; }

    .main-nav, .header-phone { display: none; }
    .nav-toggle { display: flex; }

    .hero { padding: 128px 0 96px; }
    /* Below tablet width the single-line headline has nowhere left to
       shrink into — the clamp() floor stops lowering the font size well
       before the line stops being wider than the screen. Stacking the three
       words back onto their own lines, the way they already read well on
       phones, avoids that instead of fighting for a few more pixels. */
    .hero h1 { white-space: normal; font-size: clamp(38px, 9vw, 58px); }
    .hero h1 span { display: block; }

    .why-grid, .split-2, .course-hero__grid { grid-template-columns: 1fr; gap: 40px; }
    .stats-grid { grid-template-columns: repeat(2, 1fr); gap: 34px; }
    .section { padding: 72px 0; }
    .sticky-enroll { display: flex; }
    .site-footer { padding-bottom: 76px; }
    .whatsapp-fab { bottom: 88px; }
}

@media (max-width: 620px) {
    .form-grid { grid-template-columns: 1fr; }
    .form-card { padding: 26px 22px; }
    .footer-grid { grid-template-columns: 1fr; gap: 34px; }
    .steps { grid-template-columns: 1fr; }
    .instructor-feature { grid-template-columns: 1fr; text-align: center; }
    .instructor-feature .avatar { margin-inline: auto; }
    .instructor-feature .tag-row { justify-content: center; }
    .stats-band { padding: 42px 24px; }
    .cta-band { padding: 52px 24px; }
    .hero { padding: 112px 0 76px; }
    .hero h1 { margin-top: 20px; }
    .hero__proof { gap: 22px 30px; }
    .accordion-trigger { padding: 17px 18px; font-size: 14.5px; }
    .accordion-panel p, .accordion-panel ul { padding-inline: 18px; }
}

@media (max-width: 480px) {
    /* Brand mark + name no longer leave room for the pill button beside the
       menu toggle at this width — it was pushing the toggle off the right
       edge of the screen entirely on ordinary phones (390–428px wide). The
       drawer opened by that toggle carries its own full-width "Join a live
       batch" button, so nothing is actually lost by dropping this one. */
    .header-cta { display: none; }
}

/* ==========================================================================
   Blog
   ========================================================================== */

/* -------------------------------------------------------- Extra pills --- */
.pill--navy { background: rgba(27, 62, 130, .08); border-color: rgba(27, 62, 130, .18); color: var(--navy-600); }
.pill--light { background: var(--cream); border-color: var(--line); color: var(--ink-soft); }

/* ------------------------------------------------------- Category bar --- */
.blog-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 9px;
    justify-content: center;
    margin-bottom: 44px;
}
.blog-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 18px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--ink-soft);
    font-size: 13.5px;
    font-weight: 600;
    transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.blog-chip span { color: var(--muted); font-weight: 500; }
.blog-chip:hover { border-color: var(--navy-400); color: var(--navy-700); }
.blog-chip.on { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.blog-chip.on span { color: rgba(255, 255, 255, .6); }

/* ----------------------------------------------------- Featured card --- */
.blog-feature {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-sm);
    margin-bottom: 40px;
    transition: transform .3s ease, box-shadow .3s ease;
}
.blog-feature:hover { transform: translateY(-4px); box-shadow: var(--shadow-lg); }

/* With no cover image the second column would sit empty, so the text takes
   the full width instead of leaving a hole beside it. */
.blog-feature--bare { grid-template-columns: 1fr; }
.blog-feature--bare .blog-feature__body { padding: 40px; max-width: 780px; }
/* The image is taken out of the flow so its own height cannot stretch the
   card. The row is sized by the text beside it, with a floor so a short
   summary still leaves the picture room to read. */
.blog-feature__media {
    display: block;
    position: relative;
    min-height: 300px;
    background: linear-gradient(160deg, #fff, var(--cream));
    overflow: hidden;
}
/* contain, not cover: these covers usually carry the headline as artwork,
   and a crop would slice the wording off. The panel is large enough that a
   1200x630 image fills it almost exactly, so the backing only shows on
   squarer uploads — where it reads as a deliberate mount, not a mistake. */
.blog-feature__media img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: contain;
    display: block;
}
.blog-feature__body { display: block; padding: 38px 36px; align-self: center; }
.blog-feature__body h2 {
    font-size: clamp(23px, 2.4vw, 31px);
    color: var(--navy-900);
    line-height: 1.28;
    margin: 14px 0 12px;
}
.blog-feature__body p { color: var(--muted); font-size: 15px; line-height: 1.75; margin-bottom: 20px; }

/* --------------------------------------------------------- Card grid --- */
.blog-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(300px, 100%), 1fr));
    gap: 26px;
}

.blog-card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    overflow: hidden;
    background: #fff;
    box-shadow: var(--shadow-sm);
    transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}
.blog-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-lg); border-color: transparent; }
.blog-card__link { display: flex; flex-direction: column; height: 100%; }

/* Same rule as the featured panel: the artwork usually carries the headline,
   so it is fitted rather than cropped. A 1200x630 cover fills this 16:9 box
   almost exactly; other proportions sit on the backing instead of losing an
   edge. The fixed ratio is what keeps every card in the grid the same size
   no matter what shape gets uploaded. */
.blog-card__media {
    display: block;
    aspect-ratio: 16 / 9;
    background: linear-gradient(160deg, #fff, var(--cream));
    overflow: hidden;
}
.blog-card__media img {
    width: 100%; height: 100%;
    object-fit: contain;
    display: block;
    transition: transform .5s ease;
}
.blog-card:hover .blog-card__media img { transform: scale(1.04); }

/* Stands in for a missing cover so every card is the same height. */
.blog-card__fallback {
    display: grid;
    place-items: center;
    width: 100%; height: 100%;
    background: linear-gradient(135deg, var(--navy-800), var(--navy-600));
    color: var(--gold-300);
    font-family: var(--font-display);
    font-size: 52px;
    font-weight: 700;
}

.blog-card__body { display: block; padding: 24px 24px 26px; flex: 1; }
.blog-card__meta {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 9px;
    font-size: 12.5px;
    color: var(--muted);
    margin-bottom: 13px;
}
.blog-card__body h2 {
    font-size: 19px;
    line-height: 1.38;
    color: var(--navy-900);
    margin-bottom: 10px;
    transition: color .25s ease;
}
.blog-card:hover .blog-card__body h2 { color: var(--navy-600); }
.blog-card__body p { font-size: 14.5px; line-height: 1.72; color: var(--muted); margin-bottom: 16px; }

.blog-card__more {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    font-weight: 600;
    color: var(--gold-700);
    transition: gap .25s ease;
}
.blog-card:hover .blog-card__more,
.blog-feature:hover .blog-card__more { gap: 12px; }

/* -------------------------------------------------------- Pagination --- */
.blog-pager { margin-top: 48px; }
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
}
.pagination__pages { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.pagination__link {
    display: inline-grid;
    place-items: center;
    min-width: 42px;
    padding: 10px 16px;
    border-radius: 999px;
    border: 1.5px solid var(--line);
    background: #fff;
    color: var(--ink-soft);
    font-size: 14px;
    font-weight: 600;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}
.pagination__link:hover { border-color: var(--navy-400); color: var(--navy-700); }
.pagination__link.on { background: var(--navy-900); border-color: var(--navy-900); color: #fff; }
.pagination__link.is-off { opacity: .4; pointer-events: none; }
.pagination__gap { padding: 0 4px; color: var(--muted); }

/* ==========================================================================
   Article page
   ========================================================================== */

.page-hero--article { padding-bottom: 46px; }
.page-hero--article h1 { max-width: 900px; font-size: clamp(29px, 4vw, 46px); line-height: 1.24; }

.article-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 22px;
    font-size: 14px;
    color: rgba(255, 255, 255, .74);
}
.article-meta span { display: inline-flex; align-items: center; gap: 7px; }

/* Pulled up so it overlaps the hero, the way a magazine lead image sits. */
/* Lead image.
   Cover pictures are usually graphics with wording on them, so nothing is
   ever cropped — the picture is scaled to fit and centred instead. The frame
   gives every article the same width whatever shape the upload is: a wide
   banner fills it edge to edge, a square or upright one sits centred on the
   card. No image, of any proportion, can push the article down the page. */
.article-cover-frame {
    max-width: 980px;
    min-height: 240px;
    margin: 40px auto 0;
    display: grid;
    place-items: center;
    background: linear-gradient(160deg, #fff, var(--cream));
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    position: relative;
    z-index: 3;
}
.article-cover {
    width: auto;
    max-width: 100%;
    /* 515px is exactly how tall a 1200x630 cover stands in this 980px frame,
       so the recommended size fills it edge to edge with no backing showing.
       Anything squarer or taller is held to the same height instead. */
    max-height: 520px;
    display: block;
}

.article-layout {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 340px;
    gap: 56px;
    /* Deliberately NOT align-items: start. A sticky element can only travel
       inside its own box, so the aside has to stretch the full height of the
       article — otherwise the column ends after the card and the course panel
       scrolls out of view for the rest of the page. */
    align-items: stretch;
}

/* Breathing room under whatever sits above — the lead image, or the navy
   hero when the article has no cover. Applied to the grid rather than the
   text alone so the course panel beside it starts on the same line. */
.article-layout { padding-top: 60px; }

/* ------------------------------------------------ Article typography --- */
.article-body { font-size: 16.5px; line-height: 1.85; color: var(--ink-soft); max-width: 720px; }
.article-body > *:first-child { margin-top: 0; }
.article-body p { margin-bottom: 22px; }

.article-body h2 {
    font-size: clamp(23px, 2.6vw, 30px);
    color: var(--navy-900);
    line-height: 1.3;
    margin: 48px 0 16px;
}
.article-body h3 {
    font-size: clamp(19px, 2vw, 23px);
    color: var(--navy-900);
    line-height: 1.35;
    margin: 36px 0 12px;
}
.article-body h4 { font-size: 17px; color: var(--navy-900); margin: 28px 0 10px; }

.article-body a {
    color: var(--gold-700);
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1.5px;
}
.article-body a:hover { color: var(--navy-600); }

.article-body strong { color: var(--navy-900); font-weight: 700; }

.article-body ul, .article-body ol { margin: 0 0 22px 22px; }
.article-body li { margin-bottom: 10px; }
.article-body ul { list-style: disc; }
.article-body ol { list-style: decimal; }
.article-body li::marker { color: var(--gold); }

.article-body blockquote {
    margin: 32px 0;
    padding: 20px 26px;
    border-left: 3px solid var(--gold);
    background: var(--cream);
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    font-size: 17px;
    color: var(--navy-800);
}
.article-body blockquote p:last-child { margin-bottom: 0; }

.article-body img {
    width: 100%;
    border-radius: var(--radius);
    margin: 30px 0;
    box-shadow: var(--shadow-sm);
}

.article-body code {
    background: var(--cream-2);
    padding: 2px 7px;
    border-radius: 6px;
    font-size: 14px;
    font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
    color: var(--navy-700);
}
.article-body pre {
    background: var(--navy-900);
    color: #E6ECF8;
    padding: 20px 22px;
    border-radius: var(--radius);
    overflow-x: auto;
    margin: 26px 0;
    font-size: 14px;
    line-height: 1.7;
}
.article-body pre code { background: none; color: inherit; padding: 0; }

/* A wide table scrolls inside its own box rather than stretching the page. */
.article-body table {
    width: 100%;
    border-collapse: collapse;
    margin: 26px 0;
    font-size: 15px;
    display: block;
    overflow-x: auto;
}
.article-body th, .article-body td { padding: 12px 14px; border: 1px solid var(--line); text-align: left; }
.article-body th { background: var(--cream); color: var(--navy-900); font-weight: 600; white-space: nowrap; }

.article-body hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }

/* Closing course panel.
   Sits at the end of the article where the reader has just finished, and
   carries the same navy as the site's other closing bands so it reads as
   the page's conclusion rather than an advert dropped into the text. */
.article-endcta {
    margin: 44px 0 0;
    padding: 34px 34px 32px;
    border-radius: var(--radius-lg);
    background: linear-gradient(150deg, var(--navy-900), var(--navy-700));
    color: #fff;
    position: relative;
    overflow: hidden;
}
.article-endcta::before {
    content: "";
    position: absolute;
    width: 260px; height: 260px;
    top: -120px; right: -80px;
    border-radius: 50%;
    background: rgba(255, 255, 255, .05);
}
.article-endcta > * { position: relative; z-index: 2; }

.article-endcta__eyebrow {
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: .17em;
    text-transform: uppercase;
    color: var(--gold-light);
    margin: 0 0 8px;
}
.article-endcta h2 {
    font-size: clamp(22px, 2.7vw, 28px);
    color: #fff;
    line-height: 1.25;
    margin: 0 0 12px;
}
.article-endcta__line {
    color: rgba(255, 255, 255, .78);
    font-size: 15.5px;
    line-height: 1.65;
    margin: 0 0 18px;
    max-width: 52ch;
}

.article-endcta__facts {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    list-style: none;
    margin: 0 0 24px;
    padding: 0;
}
.article-endcta__facts li {
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: .02em;
    color: rgba(255, 255, 255, .9);
    background: rgba(255, 255, 255, .1);
    border: 1px solid rgba(255, 255, 255, .16);
    border-radius: 999px;
    padding: 5px 13px;
}

.article-endcta__actions { display: flex; flex-wrap: wrap; gap: 12px; }
.article-endcta__ghost { border-color: rgba(250, 246, 236, .42); color: var(--cream); }
.article-endcta__ghost:hover { background: rgba(255, 255, 255, .1); border-color: var(--cream); }

/* The panel sits inside .article-body, so the prose rules above reach into
   it and win on specificity: the pills pick up gold disc markers and the
   buttons pick up the underlined gold link styling. These undo that for
   this block only. */
.article-body .article-endcta__facts { list-style: none; padding: 0; }
.article-body .article-endcta__facts li { margin-bottom: 0; }
.article-body .article-endcta__facts li::marker { content: ""; color: transparent; }

.article-body .article-endcta a {
    text-decoration: none;
    font-weight: 600;
}
.article-body .article-endcta a.btn--gold { color: var(--navy-900); }
.article-body .article-endcta a.btn--gold:hover { color: var(--navy-900); }
.article-body .article-endcta a.article-endcta__ghost { color: var(--cream); }
.article-body .article-endcta a.article-endcta__ghost:hover { color: #fff; }

@media (max-width: 560px) {
    .article-endcta { padding: 26px 22px 24px; margin-top: 34px; }
    .article-endcta__actions .btn { width: 100%; justify-content: center; }
}

.article-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 40px;
    padding-top: 26px;
    border-top: 1px solid var(--line);
}

/* ------------------------------------------------------ Article aside --- */
.article-aside { position: relative; height: 100%; }

/* The card follows the reader down the article, so the course is always one
   click away no matter how far they have scrolled. */
.sticky-panel { position: sticky; top: 100px; }

.article-cta {
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, #fff, var(--cream));
    padding: 30px 28px;
    box-shadow: var(--shadow-sm);
}
.article-cta h2 { font-size: 21px; color: var(--navy-900); line-height: 1.32; margin: 10px 0; }
.article-cta > p { font-size: 14.5px; line-height: 1.7; color: var(--muted); margin-bottom: 20px; }

.article-cta__facts {
    display: flex;
    flex-direction: column;
    gap: 11px;
    margin-bottom: 24px;
    padding-bottom: 22px;
    border-bottom: 1px solid var(--line);
}
.article-cta__facts li {
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 14px;
    color: var(--ink-soft);
}
.article-cta__facts svg { color: var(--gold-700); flex-shrink: 0; }

/* --------------------------------------------------------- Responsive --- */
@media (max-width: 980px) {
    .article-layout { grid-template-columns: 1fr; gap: 40px; }

    /* Once the columns stack, the side panel lands directly under the closing
       panel and repeats the same course twice in a row. The closing panel is
       the better placed of the two, so the side one steps aside here. It stays
       when the post has no course, because then it carries the general
       "browse the courses" card instead and nothing else covers it. */
    .article-aside--repeated { display: none; }
    .article-body { max-width: none; }
    /* Sticky is pointless once the card sits below the article. */
    .sticky-panel { position: static; }
    .blog-feature { grid-template-columns: 1fr; }
    .blog-feature__media { aspect-ratio: 16 / 9; }
}

@media (max-width: 560px) {
    .blog-grid { grid-template-columns: 1fr; }
    .blog-feature__body { padding: 28px 24px; }
    .article-cover-frame { margin-top: 26px; border-radius: var(--radius); min-height: 180px; }
    .article-layout { padding-top: 40px; }
    /* A phone screen is short, so the cap comes down with it. */
    .article-cover { max-height: 320px; }
    .article-meta { gap: 14px; font-size: 13px; }
    .pagination__link { min-width: 38px; padding: 9px 13px; font-size: 13px; }
}

/* --------------------------------------------- Registration confirmation --- */
/* A native <dialog>, so focus, Escape and the backdrop come from the browser
   rather than from script. Styled as the same navy band the site closes
   sections with, so the confirmation reads as part of the site and not as a
   browser alert. */
.confirm {
    border: 0;
    padding: 0;
    background: transparent;
    max-width: min(560px, calc(100vw - 32px));
    width: 100%;
    /* The global reset zeroes every margin, which also removes the auto
       margins a modal dialog relies on to sit in the middle of the screen. */
    margin: auto;
}
.confirm__card:focus { outline: none; }
.confirm::backdrop {
    background: rgba(11, 27, 66, .62);
    backdrop-filter: blur(3px);
}
.confirm__card {
    position: relative;
    background: linear-gradient(150deg, var(--navy-900), var(--navy-700));
    color: #fff;
    border-radius: var(--radius-xl);
    padding: 52px 44px 40px;
    text-align: center;
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.confirm__card::before {
    content: '';
    position: absolute;
    width: 260px; height: 260px;
    top: -120px; right: -90px;
    border-radius: 50%;
    background: var(--gold);
    opacity: .14;
}
.confirm__card > * { position: relative; z-index: 1; }
.confirm__card h2 { font-size: clamp(24px, 3.4vw, 32px); margin: 8px 0 14px; color: #fff; }
.confirm__card p { color: rgba(255, 255, 255, .78); font-size: 15.5px; line-height: 1.7; margin: 0 auto; max-width: 440px; }
.confirm__icon {
    display: grid;
    place-items: center;
    width: 68px; height: 68px;
    margin: 0 auto 22px;
    border-radius: 50%;
    background: var(--gold);
    color: var(--navy-900);
}
.confirm__ref {
    display: inline-block;
    margin: 24px auto 28px !important;
    padding: 12px 24px;
    border-radius: 10px;
    background: rgba(255, 255, 255, .1);
}
.confirm__ref span {
    display: block;
    font-size: 11px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: rgba(250, 246, 236, .6);
}
.confirm__ref strong {
    font-family: 'Playfair Display', serif;
    font-size: 22px;
    letter-spacing: .05em;
    color: var(--gold-light, var(--gold));
}
.confirm__actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.confirm__ghost { border-color: rgba(250, 246, 236, .4); color: #fff; }
.confirm__ghost:hover { border-color: #fff; }
.confirm__note { margin-top: 26px !important; font-size: 13px !important; color: rgba(250, 246, 236, .55) !important; }
.confirm__note a { color: var(--gold-light, var(--gold)); }
.confirm__close {
    position: absolute;
    top: 16px; right: 16px;
    z-index: 2;
    width: 38px; height: 38px;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .1);
    color: #fff;
    display: grid;
    place-items: center;
    cursor: pointer;
}
.confirm__close:hover { background: rgba(255, 255, 255, .2); }

@media (max-width: 560px) {
    .confirm__card { padding: 44px 24px 32px; }
}

/* A form in flight looks like it: the button dims and says so, and a second
   click does nothing. */
.btn.is-busy { opacity: .7; pointer-events: none; }

/* ================================================================ Careers */
/* The vacancy pages borrow the course pages' bones — navy hero, white cards
   on cream, the sticky fact panel — so a job reads as the same academy that
   teaches the courses, not a bolted-on job board. */

/* Filter bar: one white strip, not a form card, so the list starts high. */
.job-filters {
    display: grid;
    grid-template-columns: 1.6fr repeat(3, minmax(140px, .8fr)) auto auto;
    gap: 10px;
    align-items: center;
    padding: 12px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    margin-bottom: 34px;
}
.job-filters__search {
    position: relative;
    display: flex;
    align-items: center;
    color: var(--muted);
}
.job-filters__search svg { position: absolute; left: 14px; pointer-events: none; }
.job-filters input,
.job-filters select {
    width: 100%;
    padding: 12px 14px;
    border: 1.5px solid transparent;
    border-radius: var(--radius-sm);
    background: var(--cream);
    font-family: inherit;
    font-size: 14.5px;
    color: var(--ink);
    transition: border-color .25s ease, background .25s ease;
}
.job-filters input { padding-left: 42px; }
.job-filters select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%236A748C' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}
.job-filters input:focus,
.job-filters select:focus { outline: none; border-color: var(--gold); background: #fff; }
.job-filters__clear { font-size: 13.5px; font-weight: 600; color: var(--muted); white-space: nowrap; padding: 0 6px; }
.job-filters__clear:hover { color: var(--navy-900); }

.job-empty__icon {
    display: grid;
    place-items: center;
    width: 64px; height: 64px;
    margin: 0 auto;
    border-radius: 50%;
    background: var(--gold-100);
    color: var(--gold-700);
}

/* Vacancy rows: a list, not a grid. A job is read line by line, and three
   abreast would make every title wrap. */
.job-list { display: flex; flex-direction: column; gap: 16px; }

.job-card {
    display: grid;
    grid-template-columns: 64px 1fr auto;
    gap: 22px;
    align-items: start;
    padding: 26px 28px;
    background: #fff;
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    transition: transform .35s cubic-bezier(.2, .8, .2, 1), box-shadow .35s ease, border-color .35s ease;
}
.job-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); border-color: rgba(201, 162, 75, .5); }
.job-card--featured { border-color: rgba(201, 162, 75, .55); box-shadow: var(--shadow-sm), inset 4px 0 0 var(--gold); }

.job-card__mark {
    display: grid;
    place-items: center;
    width: 64px; height: 64px;
    border-radius: 18px;
    background: linear-gradient(150deg, var(--navy-900), var(--navy-700));
    color: var(--gold-300);
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 700;
    letter-spacing: .04em;
}
.job-card__body { min-width: 0; }
.job-card__top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.job-card__closing { font-size: 12.5px; font-weight: 600; color: var(--gold-700); margin-left: auto; }
.job-card__title { font-size: 22px; margin: 0 0 8px; line-height: 1.25; }
.job-card__title a { color: var(--navy-900); }
.job-card__title a:hover { color: var(--gold-700); }
.job-card__summary { margin: 0 0 14px; font-size: 15px; color: var(--ink-soft); max-width: 62ch; }
.job-card__meta { display: flex; flex-wrap: wrap; gap: 6px 18px; margin: 0; padding: 0; list-style: none; }
.job-card__meta li { display: inline-flex; align-items: center; gap: 7px; font-size: 13.5px; color: var(--muted); }
.job-card__meta svg { color: var(--gold-700); }
.job-card__salary { font-weight: 600; color: var(--navy-800) !important; }

.job-card__side {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    text-align: right;
    white-space: nowrap;
}
.job-card__more { font-size: 13.5px; font-weight: 600; color: var(--navy-700); }
.job-card__more:hover { color: var(--gold-700); }
.job-card__posted { font-size: 12px; color: var(--muted); }

/* Detail page */
.job-hero__facts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }

.job-prose { font-size: 16.5px; line-height: 1.85; color: var(--ink-soft); max-width: 66ch; }

.job-section { margin-top: 40px; }
.job-section__title { display: flex; align-items: center; gap: 12px; font-size: 24px; margin-bottom: 18px; }
.job-section__icon {
    display: grid;
    place-items: center;
    width: 36px; height: 36px;
    border-radius: 10px;
    background: var(--gold-100);
    color: var(--gold-700);
    flex-shrink: 0;
}
.job-section__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; max-width: 66ch; }
.job-section__list li { display: flex; gap: 12px; align-items: flex-start; font-size: 15.5px; line-height: 1.65; color: var(--ink-soft); }
.job-section__list .outcome__check { margin-top: 3px; width: 22px; height: 22px; }

.job-apply-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    flex-wrap: wrap;
    margin-top: 46px;
    padding: 24px 28px;
    border-radius: var(--radius-lg);
    background: linear-gradient(160deg, #fff, var(--cream));
    border: 1px solid var(--line);
}
.job-apply-strip strong { display: block; font-family: var(--font-display); font-size: 20px; color: var(--navy-900); margin-bottom: 4px; }
.job-apply-strip span { font-size: 14px; color: var(--muted); }

.job-panel .eyebrow { margin-bottom: 14px; }
.job-panel .fact-list .value { font-size: 13.5px; }

.job-steps { margin: 12px 0 0; padding: 0; list-style: none; counter-reset: step; display: grid; gap: 12px; }
.job-steps li { position: relative; padding-left: 38px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.job-steps li strong { color: var(--navy-900); }
.job-steps li::before {
    counter-increment: step;
    content: counter(step);
    position: absolute;
    left: 0; top: 1px;
    width: 26px; height: 26px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    background: var(--navy-900);
    color: var(--gold-300);
    font-family: var(--font-display);
    font-size: 12.5px;
    font-weight: 700;
}

/* CV upload: the native control hidden behind a labelled drop zone, so the
   file name is visible and the whole box is the click target. */
.file-drop {
    display: flex;
    align-items: center;
    gap: 16px;
    padding: 18px 20px;
    border: 1.5px dashed var(--navy-400);
    border-radius: var(--radius-sm);
    background: var(--cream);
    cursor: pointer;
    transition: border-color .25s ease, background .25s ease;
}
.file-drop:hover, .file-drop:focus-within { border-color: var(--gold); background: #fff; }
.file-drop input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.file-drop__icon {
    display: grid;
    place-items: center;
    width: 44px; height: 44px;
    border-radius: 12px;
    background: var(--gold-100);
    color: var(--gold-700);
    flex-shrink: 0;
}
.file-drop__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.file-drop__text strong { font-size: 15px; color: var(--navy-900); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-drop__text span { font-size: 13px; color: var(--muted); }

@media (max-width: 980px) {
    .job-filters { grid-template-columns: 1fr 1fr; }
    .job-filters__search { grid-column: 1 / -1; }
    .job-card { grid-template-columns: 52px 1fr; }
    .job-card__mark { width: 52px; height: 52px; font-size: 18px; border-radius: 14px; }
    .job-card__side { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: space-between; text-align: left; white-space: normal; padding-top: 16px; border-top: 1px solid var(--line); }
}
@media (max-width: 560px) {
    .job-filters { grid-template-columns: 1fr; padding: 10px; }
    .job-filters .btn { width: 100%; }
    .job-card { padding: 20px 18px; gap: 14px; }
    .job-card__title { font-size: 19px; }
    .job-card__side { flex-direction: column; align-items: stretch; }
    .job-card__side .btn { width: 100%; justify-content: center; }
    .job-apply-strip .btn { width: 100%; justify-content: center; }
}

/* ============================================================ CEO message */
/* Portrait on the left with a navy name plate sitting over its bottom edge —
   the same plate that is on her desk in the photo — and the message set as
   a quotation on the right, with the first paragraph carrying the weight. */
.ceo {
    display: grid;
    grid-template-columns: minmax(280px, 400px) 1fr;
    gap: 64px;
    align-items: center;
}
.ceo__figure {
    position: relative;
    margin: 0 0 30px;
}
.ceo__figure::before {
    /* Gold offset frame behind the photo, the academy's accent. */
    content: '';
    position: absolute;
    inset: 18px -18px -18px 18px;
    border: 2px solid var(--gold);
    border-radius: var(--radius-xl);
    opacity: .7;
}
.ceo__figure img {
    position: relative;
    display: block;
    width: 100%;
    height: auto;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
}
.ceo__plate {
    position: absolute;
    left: 24px;
    right: 24px;
    bottom: -30px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 16px 20px;
    border-radius: var(--radius);
    background: linear-gradient(150deg, var(--navy-900), var(--navy-700));
    border: 1px solid rgba(201, 162, 75, .55);
    box-shadow: var(--shadow);
    text-align: center;
}
.ceo__plate strong {
    font-family: var(--font-display);
    font-size: 17px;
    color: var(--gold-300);
    letter-spacing: .02em;
}
.ceo__plate span { font-size: 12px; color: rgba(255, 255, 255, .75); letter-spacing: .04em; }

.ceo__body { position: relative; max-width: 62ch; }
.ceo__mark {
    position: absolute;
    top: -6px;
    left: -34px;
    font-family: var(--font-display);
    font-size: 150px;
    line-height: 1;
    color: var(--gold);
    opacity: .16;
    pointer-events: none;
    user-select: none;
}
.ceo__body .kicker { margin-bottom: 22px; }
.ceo__body p { position: relative; color: var(--ink-soft); line-height: 1.85; margin-bottom: 18px; }
.ceo__lead {
    font-family: var(--font-display);
    font-size: clamp(21px, 2.4vw, 27px);
    line-height: 1.45;
    color: var(--navy-900) !important;
    margin-bottom: 24px !important;
}
.ceo__sign {
    display: flex;
    flex-direction: column;
    gap: 3px;
    margin-top: 30px;
    padding-top: 22px;
    border-top: 1px solid var(--line);
    position: relative;
}
.ceo__sign::before {
    content: '';
    position: absolute;
    top: -1px;
    left: 0;
    width: 64px;
    height: 2px;
    background: var(--gold);
}
.ceo__sign-name {
    font-family: var(--font-display);
    font-size: 20px;
    color: var(--navy-900);
}
.ceo__sign-title { font-size: 13.5px; color: var(--muted); letter-spacing: .02em; }

@media (max-width: 900px) {
    .ceo { grid-template-columns: 1fr; gap: 56px; }
    .ceo__figure { max-width: 420px; margin: 0 auto 30px; }
    .ceo__body { max-width: none; }
}
@media (max-width: 560px) {
    .ceo__figure::before { inset: 12px -10px -10px 12px; }
    .ceo__plate { left: 14px; right: 14px; padding: 13px 14px; }
    .ceo__mark { font-size: 110px; left: -6px; }
}