:root {
    --primary:#4c4d9a;
    --primary-dark:#383973;
    --ink:#202138;
    --muted:#505365;
    --line:#e5e5ef;
    --paper:#f8f8fc;
    --lavender:#efeff9;
    --radius:20px
}

* {
    box-sizing:border-box
}

html {
    scroll-behavior:smooth;
    scroll-padding-top:110px
}

body {
    margin:0;
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
    color:var(--ink);
    background:#fff;
    line-height:1.65
}

h1,h2,h3,.brand {
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
    line-height:1.2
}

h1,h2,h3,p {
    margin:0
}

a {
    color:inherit;
    text-decoration:none
}

button {
    font:inherit
}

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

a,button {
    -webkit-tap-highlight-color:transparent
}

a:focus-visible,button:focus-visible {
    outline:3px solid #bf870f;
    outline-offset:5px
}

a,button {
    touch-action:manipulation
}

[hidden] {
    display:none!important
}

.container {
    width:min(1200px,calc(100% - 64px));
    margin-inline:auto
}

.site-header {
    position:sticky;
    top:0;
    z-index:30;
    background:rgba(255,255,255,.97);
    border-bottom:1px solid var(--line)
}

.nav-bar {
    min-height:94px;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:24px
}

.brand {
    display:flex;
    align-items:center;
    gap:12px;
    font-weight:700;
    font-size:20px;
    letter-spacing:-.7px;
    flex-shrink:0
}

.brand img {
    width:48px;
    height:48px;
    object-fit:contain
}

.brand small {
    display:block;
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
    font-size:13px;
    font-weight:500;
    letter-spacing:.4px;
    text-transform:none;
    color:var(--muted);
    margin-top:6px
}

.desktop-links,.nav-actions {
    display:flex;
    align-items:center;
    gap:25px
}

.desktop-links a,.login-link {
    font-size:15px;
    font-weight:600
}

.desktop-links a:hover,.login-link:hover,.site-footer a:hover {
    color:var(--primary)
}

.nav-actions {
    gap:18px
}

.language-switch {
    display:flex;
    gap:2px;
    padding:3px;
    border:1px solid var(--line);
    border-radius:9px
}

.language-switch a {
    font-size:14px;
    padding:6px 8px;
    line-height:1.3;
    border-radius:6px
}

.language-switch a[aria-current] {
    background:var(--lavender);
    color:var(--primary);
    font-weight:700
}

.button {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:22px;
    padding:16px 24px;
    border:1px solid transparent;
    border-radius:9px;
    font-weight:700;
    font-size:16px;
    line-height:1.5;
    transition:background .2s,box-shadow .2s;
    min-height:50px
}

.button span {
    font-size:20px;
    line-height:1
}

.button-primary {
    background:var(--primary);
    color:white;
    box-shadow:0 6px 16px #4c4d9a18
}

.button-primary:hover {
    background:var(--primary-dark);
    box-shadow:0 8px 20px #4c4d9a30
}

.nav-actions .button {
    padding:11px 17px;
    font-size:15px
}

.button-outline {
    border-color:#d7d7e5;
    background:white
}

.button-outline:hover {
    background:var(--lavender);
    border-color:var(--primary)
}

.button-white {
    background:#fff;
    color:var(--primary);
    flex-shrink:0
}

.button-white:hover {
    background:var(--lavender)
}

.menu-toggle {
    display:none;
    border:1px solid var(--line);
    background:white;
    width:44px;
    height:44px;
    border-radius:9px;
    padding:11px;
    cursor:pointer
}

.menu-toggle span {
    display:block;
    height:2px;
    background:var(--ink);
    margin:4px 0
}

.mobile-menu {
    padding-block:12px 24px;
    border-top:1px solid var(--line)
}

.mobile-menu a {
    display:block;
    padding:12px;
    border-radius:8px;
    font-size:16px
}

.mobile-menu a:hover {
    background:var(--paper)
}

.skip-link {
    position:fixed;
    top:-100px;
    left:20px;
    z-index:100;
    background:var(--ink);
    color:white;
    padding:12px 20px;
    border-radius:8px
}

.skip-link:focus {
    top:12px
}

.hero {
    background:radial-gradient(ellipse at 90% 55%,#e5e5f6 0,transparent 55%),linear-gradient(110deg,#fafafd,#f5f5fc);
    padding:30px 0 80px;
    overflow:hidden
}

.announcement {
    display:flex;
    align-items:center;
    gap:18px;
    padding:12px 18px;
    background:#fff;
    border:1px solid #e6e4f1;
    border-radius:10px;
    font-size:15px;
    box-shadow:0 3px 8px #20213803
}

.announcement-label {
    font-size:13px;
    text-transform:uppercase;
    letter-spacing:1px;
    font-weight:700;
    color:var(--primary);
    background:var(--lavender);
    padding:5px 10px;
    border-radius:5px;
    flex-shrink:0
}

.announcement-title {
    line-height:1.5
}

.announcement-date {
    color:var(--muted)
}

.announcement-arrow {
    margin-left:auto;
    font-size:20px;
    color:var(--primary)
}

.hero-grid {
    display:grid;
    grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);
    align-items:center;
    gap:70px;
    padding-top:70px
}

.eyebrow {
    display:inline-flex;
    align-items:center;
    gap:9px;
    text-transform:uppercase;
    letter-spacing:.8px;
    font-size:13px;
    font-weight:700;
    color:var(--primary);
    line-height:1.6
}

.status-dot {
    width:7px;
    height:7px;
    border-radius:50%;
    background:var(--primary);
    box-shadow:0 0 0 4px #4c4d9a12
}

.hero h1 {
    font-size:clamp(36px,3.5vw,48px);
    line-height:1.22;
    letter-spacing:-1px;
    font-weight:700;
    margin:22px 0;
    overflow-wrap:anywhere
}

.hero h1 span {
    color:var(--primary)
}

.hero-description {
    color:var(--muted);
    font-size:18px;
    max-width:520px;
    line-height:1.85
}

.button-row {
    display:flex;
    gap:12px;
    flex-wrap:wrap;
    margin-top:30px
}

.hero-topics {
    display:flex;
    gap:16px;
    flex-wrap:wrap;
    margin-top:28px;
    font-size:13px;
    color:var(--muted)
}

.hero-topics span {
    display:flex;
    align-items:center;
    gap:6px
}

.hero-topics span:before {
    content:'✓';
    color:var(--primary);
    font-weight:700
}

.hero-visual {
    position:relative;
    padding-bottom:0
}

.video-card {
    position:relative;
    border:1px solid #fff;
    border-radius:var(--radius);
    background:white;
    box-shadow:0 24px 65px #3839731a;
    overflow:hidden
}

.video-topline {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:17px 20px;
    font-size:12px;
    color:var(--muted);
    border-bottom:1px solid var(--line)
}

.video-dots {
    display:flex;
    gap:5px
}

.video-dots i {
    height:6px;
    width:6px;
    border-radius:50%;
    background:#d8d7e6
}

.video-dots i:first-child {
    background:#9a98c5
}

.video-frame {
    aspect-ratio:16/10;
    background:#232335
}

.video-frame iframe {
    width:100%;
    height:100%;
    border:0;
    display:block
}

.video-caption {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    padding:23px
}

.video-caption .eyebrow {
    font-size:12px
}

.video-caption h2 {
    font-size:17px;
    margin-top:7px;
    letter-spacing:-.3px
}

.round-arrow {
    border:1px solid var(--line);
    border-radius:50%;
    width:38px;
    height:38px;
    display:grid;
    place-items:center;
    color:var(--primary);
    flex-shrink:0
}

.visual-note {
    position:relative;
    margin:16px 0 0 auto;
    display:flex;
    align-items:center;
    gap:13px;
    padding:14px 23px;
    background:white;
    border:1px solid var(--line);
    box-shadow:0 12px 35px #38397312;
    border-radius:12px;
    max-width:95%
}

.visual-note strong {
    display:block;
    font-size:15px
}

.visual-note div>span {
    display:block;
    font-size:13px;
    color:var(--muted);
    margin-top:2px
}

.note-icon {
    width:38px;
    height:38px;
    border-radius:10px;
    display:grid;
    place-items:center;
    background:#eeedf9;
    color:var(--primary);
    font-size:25px;
    flex-shrink:0
}

.pathways {
    border-top:1px solid var(--line);
    border-bottom:1px solid var(--line)
}

.pathway-grid {
    display:grid;
    grid-template-columns:repeat(3,1fr)
}

.pathway {
    display:flex;
    align-items:center;
    gap:16px;
    padding:30px 25px;
    border-right:1px solid var(--line)
}

.pathway:first-child {
    padding-left:0
}

.pathway:last-child {
    border:0;
    padding-right:0
}

.pathway-number {
    font-family:'Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
    color:#aaa9c9;
    font-size:15px
}

.pathway h2 {
    font-size:16px;
    margin-bottom:5px
}

.pathway p {
    font-size:14px;
    color:var(--muted)
}

.pathway>span:last-child {
    margin-left:auto;
    color:var(--primary);
    font-size:22px
}

.pathway:hover h2 {
    color:var(--primary)
}

.section {
    padding:88px 0
}

.section-heading {
    display:flex;
    align-items:end;
    justify-content:space-between;
    gap:40px;
    margin-bottom:36px
}

.section-heading h2,.steps-intro h2 {
    font-size:clamp(28px,3vw,39px);
    letter-spacing:-.6px;
    line-height:1.25;
    margin-top:12px;
    max-width:580px
}

.section-heading>p {
    font-size:16px;
    color:var(--muted);
    max-width:350px
}

.feature-grid {
    display:grid;
    grid-template-columns:repeat(4,1fr);
    gap:20px
}

.feature-card {
    position:relative;
    padding:28px 24px;
    border:1px solid var(--line);
    border-radius:14px;
    transition:border-color .2s,box-shadow .2s
}

.feature-card:hover {
    border-color:#c2c1e0;
    box-shadow:0 10px 30px #38397309
}

.feature-icon {
    display:grid;
    place-items:center;
    width:45px;
    height:45px;
    background:var(--lavender);
    color:var(--primary);
    border-radius:12px;
    font-size:25px;
    margin-bottom:28px
}

.feature-number {
    position:absolute;
    right:24px;
    top:30px;
    color:#a5a4bd;
    font-size:13px
}

.feature-card h3 {
    font-size:17px;
    line-height:1.5;
    margin-bottom:10px
}

.feature-card p {
    font-size:15px;
    color:var(--muted);
    line-height:1.9
}

.steps-section {
    background:var(--paper);
    border-block:1px solid var(--line)
}

.steps-layout {
    display:grid;
    grid-template-columns:1fr 1.1fr;
    gap:100px;
    align-items:center
}

.steps-intro h2 {
    max-width:400px
}

.steps-intro>p {
    font-size:16px;
    color:var(--muted);
    margin:20px 0 24px
}

.text-link {
    display:inline-flex;
    align-items:center;
    justify-content:space-between;
    gap:20px;
    font-weight:700;
    color:var(--primary);
    font-size:15px
}

.text-link:hover {
    text-decoration:underline;
    text-underline-offset:5px
}

.step {
    display:flex;
    align-items:start;
    gap:24px;
    padding:27px 0;
    border-bottom:1px solid #dedeea
}

.step:first-child {
    padding-top:0
}

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

.step-number {
    display:grid;
    place-items:center;
    width:43px;
    height:43px;
    flex-shrink:0;
    border:1px solid #d9d9eb;
    background:white;
    color:var(--primary);
    border-radius:50%;
    font-size:15px;
    font-weight:700
}

.step h3 {
    font-size:18px;
    margin-bottom:10px
}

.step p {
    font-size:15px;
    color:var(--muted);
    line-height:1.85
}

.events-grid,.directory-grid {
    display:grid;
    grid-template-columns:repeat(3,minmax(0,1fr));
    gap:24px
}

.event-card {
    border:1px solid var(--line);
    border-radius:16px;
    overflow:hidden;
    display:flex;
    flex-direction:column;
    min-width:0
}

.event-image {
    width:100%;
    aspect-ratio:16/9;
    object-fit:cover
}

.event-body {
    padding:26px;
    display:flex;
    flex-direction:column;
    flex:1
}

.event-meta {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    margin-bottom:20px
}

.tag {
    font-size:12px;
    line-height:1.6;
    font-weight:600;
    color:var(--primary);
    background:var(--lavender);
    padding:5px 9px;
    border-radius:5px;
    overflow-wrap:anywhere
}

.event-status {
    font-size:12px;
    color:var(--muted);
    flex-shrink:0
}

.status-featured {
    color:#8b6319
}

.status-cancelled {
    color:#ad3849
}

.event-card h3 {
    font-size:20px;
    line-height:1.45;
    letter-spacing:-.4px;
    margin-bottom:12px;
    overflow-wrap:anywhere
}

.event-body>p {
    font-size:15px;
    color:var(--muted);
    line-height:1.9;
    margin-bottom:24px;
    white-space:pre-line;
    overflow-wrap:anywhere
}

.event-details {
    border-top:1px solid var(--line);
    padding-top:16px;
    margin: auto 0 0
}

.event-details div {
    display:grid;
    grid-template-columns:85px 1fr;
    gap:8px;
    margin:8px 0;
    font-size:14px
}

.event-details dt {
    color:var(--muted)
}

.event-details dd {
    margin:0;
    font-weight:500;
    overflow-wrap:anywhere
}

.directory-section {
    border-top:1px solid var(--line)
}

.profile-card {
    padding:26px;
    border:1px solid var(--line);
    border-radius:16px;
    display:flex;
    flex-direction:column;
    gap:20px;
    min-width:0
}

.profile-heading {
    display:flex;
    gap:16px;
    align-items:center
}

.profile-heading img {
    width:56px;
    height:56px;
    border-radius:50%;
    object-fit:cover
}

.profile-heading h3 {
    font-size:17px;
    overflow-wrap:anywhere
}

.profile-heading span {
    font-size:14px;
    color:var(--primary)
}

.profile-card>p {
    color:var(--muted);
    font-size:15px;
    overflow-wrap:anywhere
}

.profile-tags {
    display:flex;
    flex-wrap:wrap;
    gap:6px
}

.profile-card .text-link {
    border-top:1px solid var(--line);
    padding-top:15px;
    margin-top:auto
}

.empty-state {
    grid-column:1/-1;
    padding:30px;
    background:var(--paper);
    border-radius:12px;
    color:var(--muted);
    font-size:16px
}

.cta-section {
    padding-top:0
}

.cta-panel {
    position:relative;
    display:flex;
    justify-content:space-between;
    align-items:center;
    gap:45px;
    padding:55px 60px;
    background:var(--primary);
    color:white;
    border-radius:22px;
    overflow:hidden
}

.cta-panel:before {
    content:'';
    position:absolute;
    inset:auto -100px -260px auto;
    width:550px;
    height:550px;
    border:1px solid #ffffff15;
    box-shadow:0 0 0 55px #ffffff06,0 0 0 110px #ffffff04;
    border-radius:50%;
    pointer-events:none
}

.cta-panel>div,.cta-panel>a {
    position:relative
}

.cta-panel .eyebrow {
    color:#d5d4f2
}

.cta-panel h2 {
    font-size:32px;
    letter-spacing:-1px;
    max-width:550px;
    margin:14px 0
}

.cta-panel p {
    font-size:15px;
    color:#e1e0f2;
    max-width:510px
}

.site-footer {
    border-top:1px solid var(--line);
    background:var(--paper);
    padding-top:55px
}

.footer-grid {
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:80px;
    padding-bottom:45px
}

.footer-about p {
    font-size:15px;
    color:var(--muted);
    max-width:350px;
    margin-top:20px
}

.footer-grid h2 {
    font-size:15px;
    margin-bottom:20px
}

.footer-grid>div:not(:first-child)>a {
    display:block;
    color:var(--muted);
    font-size:15px;
    margin-bottom:10px
}

.footer-bottom {
    border-top:1px solid var(--line);
    padding-block:23px;
    display:flex;
    justify-content:space-between;
    gap:20px;
    color:var(--muted);
    font-size:13px
}

@media(min-width:1600px) {
    .hero-grid {
        padding-top:90px
    }
    .hero {
        padding-bottom:100px
    }
}

@media(max-width:1199px) {
    .desktop-links,.desktop-cta,.login-link {
        display:none
    }
    .menu-toggle {
        display:block
    }
    .nav-bar {
        min-height:80px
    }
    .hero-grid {
        gap:35px
    }
    .hero h1 {
        font-size:40px
    }
    .button {
        padding:14px 18px;
        font-size:15px;
        gap:12px
    }
    .feature-grid {
        grid-template-columns:repeat(2,1fr)
    }
    .pathway {
        padding-inline:18px;
        gap:12px
    }
    .pathway h2 {
        font-size:15px
    }
    .steps-layout {
        gap:55px
    }
    .events-grid,.directory-grid {
        grid-template-columns:repeat(2,minmax(0,1fr))
    }
    .cta-panel {
        padding:45px
    }
    .footer-grid {
        gap:45px
    }
}

@media(max-width:767px) {
    .container {
        width:calc(100% - 40px)
    }
    .brand {
        font-size:17px;
        gap:9px
    }
    .brand img {
        width:39px;
        height:39px
    }
    .brand small {
        display:none
    }
    .nav-actions {
        gap:10px
    }
    .language-switch a {
        font-size:13px;
        padding:6px
    }
    .nav-bar {
        gap:12px;
        min-height:76px
    }
    .hero {
        padding-top:20px;
        padding-bottom:45px
    }
    .announcement {
        gap:9px;
        padding:12px;
        font-size:14px;
        align-items:start
    }
    .announcement-label {
        font-size:11px;
        padding:5px 7px
    }
    .announcement-date {
        display:block
    }
    .hero-grid {
        grid-template-columns:1fr;
        padding-top:40px;
        gap:35px
    }
    .hero h1 {
        font-size:clamp(32px,7.5vw,40px);
        letter-spacing:-.7px;
        max-width:580px;
        margin:20px 0
    }
    .hero-description {
        font-size:16px
    }
    .button-row {
        margin-top:25px
    }
    .hero-topics {
        gap:12px;
        margin-top:22px
    }
    .hero-visual {
        max-width:570px;
        width:100%;
        margin-inline:auto
    }
    .video-frame {
        aspect-ratio:16/9
    }
    .visual-note {
        max-width:100%;
        margin-top:16px
    }
    .video-caption {
        padding:20px
    }
    .pathway-grid {
        grid-template-columns:1fr
    }
    .pathway,.pathway:first-child,.pathway:last-child {
        padding:20px 0;
        border-right:0;
        border-bottom:1px solid var(--line)
    }
    .pathway:last-child {
        border-bottom:0
    }
    .pathway h2 {
        font-size:16px
    }
    .pathway p {
        font-size:15px
    }
    .pathway-number {
        min-width:28px
    }
    .section {
        padding:56px 0
    }
    .section-heading {
        flex-direction:column;
        align-items:start;
        gap:16px;
        margin-bottom:28px
    }
    .section-heading h2,.steps-intro h2 {
        font-size:30px;
        letter-spacing:-1px
    }
    .section-heading>p {
        max-width:100%;
        font-size:15px
    }
    .feature-grid {
        gap:14px
    }
    .feature-card {
        padding:22px 18px
    }
    .feature-number {
        right:18px;
        top:24px
    }
    .feature-icon {
        margin-bottom:22px
    }
    .feature-card h3 {
        font-size:16px
    }
    .steps-layout {
        grid-template-columns:1fr;
        gap:36px
    }
    .steps-intro h2 {
        max-width:100%
    }
    .step {
        gap:18px;
        padding-block:24px
    }
    .events-grid,.directory-grid {
        grid-template-columns:1fr
    }
    .event-body {
        padding:24px
    }
    .cta-section {
        padding-top:0
    }
    .cta-panel {
        flex-direction:column;
        align-items:start;
        padding:32px 26px;
        gap:25px;
        border-radius:16px
    }
    .cta-panel h2 {
        font-size:28px
    }
    .footer-grid {
        grid-template-columns:1fr 1fr;
        gap:35px 25px
    }
    .footer-about {
        grid-column:1/-1
    }
    .footer-about p {
        max-width:100%
    }
    .footer-bottom {
        flex-direction:column;
        gap:8px
    }
    .site-footer {
        padding-top:40px
    }
}

@media(max-width:600px) {
    .feature-grid {
        grid-template-columns:1fr
    }
}

@media(max-width:380px) {
    .container {
        width:calc(100% - 28px)
    }
    .brand {
        font-size:16px
    }
    .brand small {
        font-size:11px
    }
    .brand img {
        width:33px;
        height:33px
    }
    .nav-actions {
        gap:6px
    }
    .feature-grid {
        grid-template-columns:1fr
    }
    .button-row .button {
        width:100%
    }
    .announcement {
        flex-wrap:wrap
    }
    .announcement-title {
        flex:1
    }
    .video-caption h2 {
        font-size:16px
    }
}

@media(prefers-reduced-motion:reduce) {
    html {
        scroll-behavior:auto
    }
    *,*:before,*:after {
        animation:none!important;
        transition:none!important
    }
}