:root {
    --course-blue: #1a365d;
    --course-dark: #0a2342;
    --course-yellow: #ffcc00;
    --course-ink: #243247;
    --course-muted: #64748b;
    --course-soft: #f3f6fa;
    --course-line: #dbe3ec;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; color: var(--course-ink); font-family: 'Hanken Grotesk', sans-serif; background: #fff; }
.course-page { overflow: hidden; }
.course-container { width: min(1180px, calc(100% - 40px)); margin-inline: auto; }

.course-hero {
    position: relative;
    padding: clamp(72px, 10vw, 126px) 0 0;
    color: #fff;
    background: radial-gradient(circle at 82% 20%, rgba(255, 204, 0, .2), transparent 27%), linear-gradient(128deg, var(--course-dark), var(--course-blue));
}
.course-hero::before { content: ''; position: absolute; inset: 0; opacity: .55; background: repeating-linear-gradient(135deg, transparent 0 34px, rgba(255,255,255,.028) 34px 36px); }
.course-hero__inner { position: relative; z-index: 1; max-width: 900px; padding-bottom: clamp(64px, 8vw, 96px); }
.course-breadcrumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 34px; color: #c8d4e2; font-size: .84rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.course-breadcrumb a { color: var(--course-yellow); text-decoration: none; }
.course-breadcrumb__separator { color: #8597aa; font-size: 1.1rem; line-height: 1; }
.course-category { display: inline-flex; align-items: center; gap: 10px; margin: 0 0 18px; color: var(--course-yellow); font-size: .78rem; font-weight: 800; letter-spacing: .19em; text-transform: uppercase; }
.course-category::before { content: ''; width: 34px; height: 3px; background: currentColor; }
.course-hero h1 { max-width: 860px; margin: 0; color: #fff; font: 700 clamp(2.7rem, 6.4vw, 5.5rem)/1.02 'Source Serif 4', serif; letter-spacing: -.04em; }
.course-hero__lead { max-width: 730px; margin: 25px 0 0; color: #dce5ef; font-size: clamp(1.05rem, 2vw, 1.24rem); line-height: 1.7; }

.course-facts { position: relative; z-index: 2; display: grid; grid-template-columns: repeat(3, 1fr); margin-bottom: -72px; background: #fff; box-shadow: 0 24px 60px rgba(7,28,54,.22); }
.course-fact { min-height: 144px; display: grid; grid-template-columns: auto 1fr; align-content: center; gap: 3px 18px; padding: 28px 34px; border-right: 1px solid var(--course-line); }
.course-fact:last-child { border-right: 0; }
.course-fact__icon { grid-row: span 2; align-self: center; display: grid; place-items: center; width: 50px; height: 50px; color: var(--course-blue); background: var(--course-yellow); border-radius: 50%; }
.course-fact__icon svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.course-fact__label { color: var(--course-muted); font-size: .74rem; font-weight: 800; letter-spacing: .13em; text-transform: uppercase; }
.course-fact strong { color: var(--course-dark); font: 700 clamp(1.05rem, 2vw, 1.42rem)/1.25 'Source Serif 4', serif; }

.course-section { padding: clamp(82px, 9vw, 116px) 0; }
.course-overview { padding-top: clamp(142px, 15vw, 180px); background: #fff; }
.course-grid { display: grid; grid-template-columns: minmax(220px, .62fr) minmax(0, 1.38fr); gap: clamp(46px, 8vw, 108px); align-items: start; }
.course-section-label { position: sticky; top: 120px; }
.course-eyebrow { display: block; margin-bottom: 13px; color: var(--course-blue); font-size: .76rem; font-weight: 800; letter-spacing: .17em; text-transform: uppercase; }
.course-section h2, .course-cta h2 { margin: 0; color: var(--course-dark); font: 700 clamp(2.1rem, 4vw, 3.55rem)/1.08 'Source Serif 4', serif; letter-spacing: -.025em; }
.course-copy p { margin: 0; color: #526176; font-size: 1.05rem; line-height: 1.88; }
.course-copy p + p { margin-top: 22px; }
.course-copy p:first-child { color: var(--course-ink); font-size: 1.14rem; }

.course-requirements { color: #fff; background: var(--course-dark); }
.course-requirements .course-eyebrow { color: var(--course-yellow); }
.course-requirements h2 { color: #fff; }
.course-requirement-card { position: relative; padding: clamp(34px, 5vw, 56px); color: var(--course-dark); background: #fff; border-left: 7px solid var(--course-yellow); box-shadow: 0 20px 50px rgba(0,0,0,.18); }
.course-requirement-card svg { display: block; width: 44px; height: 44px; margin-bottom: 20px; fill: none; stroke: var(--course-blue); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.course-requirement-card p { margin: 0; font-size: clamp(1.08rem, 2vw, 1.28rem); font-weight: 600; line-height: 1.7; }

.course-curriculum { background: linear-gradient(180deg, #f7f9fc 0%, #fff 100%); }
.course-curriculum__intro { max-width: 760px; margin-bottom: 48px; }
.course-curriculum__intro p { margin: 18px 0 0; color: var(--course-muted); font-size: 1.04rem; line-height: 1.75; }
.course-outcomes { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.course-outcome { position: relative; display: grid; grid-template-columns: 64px 1fr; min-height: 168px; padding: 30px; background: #fff; border: 1px solid var(--course-line); box-shadow: 0 10px 30px rgba(10,35,66,.055); transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease; }
.course-outcome__number { color: var(--course-blue); font-size: .84rem; font-weight: 800; letter-spacing: .12em; }
.course-outcome p { margin: 0; color: #4a596d; line-height: 1.72; }
.course-outcome strong { color: var(--course-dark); }
.course-outcome:last-child:nth-child(odd) { grid-column: 1 / -1; }
@media (hover: hover) and (pointer: fine) { .course-outcome:hover { transform: translateY(-5px); border-color: #b8c8dc; box-shadow: 0 18px 40px rgba(10,35,66,.11); } }

.course-cta { padding: clamp(66px, 8vw, 94px) 0; background: var(--course-yellow); }
.course-cta__inner { display: flex; justify-content: space-between; align-items: center; gap: 42px; }
.course-cta h2 { max-width: 700px; }
.course-cta p { margin: 15px 0 0; color: #4b4322; font-size: 1.04rem; }
.course-cta__button { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; min-height: 56px; padding: 0 27px; color: #fff; background: var(--course-dark); font-size: .84rem; font-weight: 800; letter-spacing: .07em; text-decoration: none; text-transform: uppercase; transition: transform .3s ease, background .3s ease; }
.course-cta__button:hover { transform: translateY(-3px); background: var(--course-blue); }

@media (max-width: 820px) {
    .course-facts { grid-template-columns: 1fr; margin-bottom: -52px; }
    .course-fact { min-height: 116px; border-right: 0; border-bottom: 1px solid var(--course-line); }
    .course-fact:last-child { border-bottom: 0; }
    .course-overview { padding-top: 118px; }
    .course-grid { grid-template-columns: 1fr; gap: 30px; }
    .course-section-label { position: static; }
    .course-outcomes { grid-template-columns: 1fr; }
    .course-outcome:last-child:nth-child(odd) { grid-column: auto; }
    .course-cta__inner { align-items: flex-start; flex-direction: column; }
}
@media (max-width: 520px) {
    .course-container { width: min(1180px, calc(100% - 32px)); }
    .course-hero { padding-top: 54px; }
    .course-breadcrumb { margin-bottom: 26px; }
    .course-breadcrumb__separator { display: none; }
    .course-breadcrumb span:last-child { flex-basis: 100%; font-size: .7rem; line-height: 1.45; overflow-wrap: anywhere; }
    .course-fact { padding: 23px 22px; }
    .course-outcome { grid-template-columns: 42px 1fr; padding: 24px 20px; }
}
@media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .course-outcome, .course-cta__button { transition: none; }
}