:root{
  --navy:#0d2742; --blue:#174f78; --gold:#c99a3d; --ink:#203040;
  --muted:#66778a; --bg:#f4f7fa; --white:#fff; --line:#dce5ed;
  --shadow:0 12px 35px rgba(13,39,66,.09); --max:1180px;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{font-family:Inter,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:var(--bg);line-height:1.7}
a{text-decoration:none;color:inherit}.container{width:min(92%,var(--max));margin:auto}
.topbar{background:var(--navy);color:#dbe7f0;font-size:.82rem}
.topbar .container{display:flex;justify-content:space-between;gap:20px;padding:8px 0}
.navbar{background:#fff;position:sticky;top:0;z-index:20;box-shadow:0 2px 15px rgba(0,0,0,.06)}
.nav{min-height:78px;display:flex;align-items:center;justify-content:space-between;gap:25px}
.brand{display:flex;align-items:center;gap:12px}
.brand-mark{width:46px;height:46px;border-radius:8px;background:var(--navy);display:grid;place-items:center;color:#fff;font-weight:800;letter-spacing:-2px}
.brand strong{display:block;color:var(--navy);font-family:Georgia,serif;font-size:1.12rem;line-height:1.1}
.brand span{font-size:.73rem;color:var(--muted)}
.navlinks{display:flex;list-style:none;gap:22px;align-items:center}
.navlinks a{font-size:.9rem;font-weight:650;color:#24384a;padding:28px 0;position:relative}
.navlinks a.active,.navlinks a:hover{color:var(--blue)}
.navlinks a.active:after,.navlinks a:hover:after{content:"";position:absolute;bottom:18px;left:0;width:100%;height:2px;background:var(--gold)}
.menu{display:none;border:0;background:none;font-size:1.4rem;color:var(--navy)}
.hero{min-height:570px;display:grid;align-items:center;background:
linear-gradient(90deg,rgba(7,29,49,.95),rgba(7,29,49,.72)),
radial-gradient(circle at 80% 30%,rgba(201,154,61,.24),transparent 35%),
linear-gradient(135deg,#174f78,#0d2742);color:#fff;position:relative;overflow:hidden}
.hero:after{content:"";position:absolute;inset:auto -10% -55% 35%;height:90%;border:1px solid rgba(255,255,255,.08);border-radius:50%;transform:rotate(-12deg)}
.hero-content{max-width:780px;padding:90px 0}
.eyebrow{display:inline-flex;padding:6px 13px;border:1px solid rgba(255,255,255,.24);border-radius:999px;font-size:.78rem;color:#e9d49e;margin-bottom:20px}
h1,h2,h3{font-family:Georgia,"Times New Roman",serif;color:var(--navy);line-height:1.2}
.hero h1{font-size:clamp(2.8rem,6vw,5rem);color:#fff;margin-bottom:22px;max-width:820px}
.hero h1 em{font-style:normal;color:#e2bd69}
.hero p{font-size:1.08rem;color:#d9e4ed;max-width:700px;margin-bottom:30px}
.actions{display:flex;flex-wrap:wrap;gap:12px}
.btn{display:inline-block;padding:12px 20px;border-radius:5px;font-weight:700;font-size:.9rem;transition:.2s}
.btn-primary{background:var(--gold);color:#fff}.btn-primary:hover{filter:brightness(.93);transform:translateY(-1px)}
.btn-light{border:1px solid rgba(255,255,255,.55);color:#fff}.btn-light:hover{background:#fff;color:var(--navy)}
.page-hero{background:linear-gradient(135deg,var(--navy),var(--blue));color:#fff;padding:75px 0}
.page-hero h1{color:#fff;font-size:clamp(2.3rem,5vw,3.8rem);margin-bottom:12px}
.page-hero p{color:#dce8f1;max-width:760px}
section{padding:82px 0}.white{background:#fff}
.heading{text-align:center;max-width:760px;margin:0 auto 45px}
.heading .eyebrow{color:var(--gold);border:0;padding:0;border-radius:0;text-transform:uppercase;letter-spacing:1.8px;font-weight:800}
.heading h2{font-size:2.35rem;margin:8px 0 12px}.heading p{color:var(--muted)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:22px}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:28px}
.card{background:#fff;border:1px solid var(--line);border-radius:9px;padding:28px;box-shadow:0 5px 20px rgba(13,39,66,.035);transition:.2s}
.card:hover{transform:translateY(-4px);box-shadow:var(--shadow)}
.icon{width:52px;height:52px;border-radius:8px;background:#edf4f9;color:var(--blue);display:grid;place-items:center;font-size:1.25rem;margin-bottom:18px}
.card h3{font-family:Inter,sans-serif;font-size:1.06rem;margin-bottom:9px}.card p{font-size:.91rem;color:var(--muted)}
.split{display:grid;grid-template-columns:1fr 1fr;gap:65px;align-items:center}
.visual{min-height:350px;border-radius:12px;background:
linear-gradient(145deg,rgba(23,79,120,.94),rgba(13,39,66,.97)),
repeating-linear-gradient(0deg,transparent 0 22px,rgba(255,255,255,.08) 23px),
repeating-linear-gradient(90deg,transparent 0 22px,rgba(255,255,255,.08) 23px);
display:grid;place-items:center;box-shadow:var(--shadow);position:relative;overflow:hidden}
.ca-grid{display:grid;grid-template-columns:repeat(8,28px);gap:4px;transform:rotate(-8deg)}
.ca-grid i{width:28px;height:28px;border-radius:3px;background:#fff3c9;opacity:.9}.ca-grid i:nth-child(3n),.ca-grid i:nth-child(7n){opacity:.2}.ca-grid i:nth-child(5n){background:#c99a3d}
.prose h2{font-size:2.25rem;margin-bottom:18px}.prose p{color:var(--muted);margin-bottom:17px}.checks{list-style:none;margin-top:18px}.checks li{margin:9px 0}.checks li:before{content:"✓";color:var(--gold);font-weight:900;margin-right:10px}
.band{background:var(--navy);color:#fff}.stats{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;text-align:center}.stat strong{display:block;color:#e5c16e;font-size:2rem;font-family:Georgia,serif}.stat span{color:#c7d5e1;font-size:.9rem}
.list{display:grid;gap:16px}.list-item{background:#fff;border:1px solid var(--line);border-left:4px solid var(--gold);padding:24px}.list-item h3{font-family:Inter,sans-serif;font-size:1.05rem;margin-bottom:6px}.meta{font-size:.8rem;color:var(--blue);font-weight:700;margin-bottom:8px}.list-item p{color:var(--muted);font-size:.91rem}
.event{overflow:hidden;padding:0}.event-date{background:var(--navy);color:#fff;padding:18px;text-align:center}.event-date strong{display:block;font:700 1.7rem Georgia,serif;color:#e5c16e}.event-body{padding:24px}.event-body h3{font-family:Inter,sans-serif;font-size:1.05rem;margin-bottom:8px}.event-body p{color:var(--muted);font-size:.9rem}
.resource{text-align:center}.resource .icon{margin:0 auto 18px}
.contact-grid{display:grid;grid-template-columns:1fr 1fr;gap:30px}.contact-box{background:#fff;border:1px solid var(--line);padding:30px;border-radius:9px}.contact-box h3{margin-bottom:12px}.contact-box p{color:var(--muted);margin-bottom:9px}.contact-box a{color:var(--blue);font-weight:650}
footer{background:#111d28;color:#c5d1db;padding:55px 0 20px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:45px;margin-bottom:38px}.footer-grid h3{color:#fff;font-family:Inter,sans-serif;font-size:1rem;margin-bottom:15px}.footer-grid p,.footer-grid li{font-size:.88rem}.footer-links{list-style:none;display:grid;gap:8px}.footer-links a:hover{color:#e5c16e}.copyright{border-top:1px solid #2c3b49;padding-top:18px;text-align:center;font-size:.78rem}
@media(max-width:900px){.grid-4{grid-template-columns:repeat(2,1fr)}.grid-3,.split,.contact-grid{grid-template-columns:1fr}.stats{grid-template-columns:repeat(2,1fr)}.footer-grid{grid-template-columns:1fr 1fr}}
@media(max-width:700px){.topbar .container{justify-content:center}.topbar .right{display:none}.navlinks{display:none;position:absolute;top:78px;left:0;right:0;background:#fff;padding:18px 5%;flex-direction:column;align-items:flex-start;box-shadow:0 12px 20px rgba(0,0,0,.1)}.navlinks.open{display:flex}.navlinks a{padding:8px 0}.navlinks a.active:after,.navlinks a:hover:after{display:none}.menu{display:block}.grid-4,.grid-3,.grid-2,.stats,.footer-grid{grid-template-columns:1fr}.hero{min-height:540px}.hero-content{padding:70px 0}section{padding:65px 0}}

.brand { display: flex; align-items: center; gap: 12px; } .brand-logo { display: flex; align-items: center; text-decoration: none; background: none !important; border: none !important; padding: 0; } .brand-logo img { display: block; width: 52px; height: 52px; object-fit: contain; background: transparent !important; border: none !important; } .brand-text { display: flex; flex-direction: column; justify-content: center; line-height: 1.15; } .brand-text strong { font-size: 18px; font-weight: 700; white-space: nowrap; } .brand-text span { margin-top: 4px; font-size: 11px; letter-spacing: 0.7px; opacity: 0.7; white-space: nowrap; }

/* =========================================================
   FIXED HERO DIMENSION
========================================================= */

.hero-carousel {

    position: relative;

    width: 100%;

    /*
       FIXED HEIGHT
    */

    height: 680px;

    min-height: 680px;
    max-height: 680px;

    overflow: hidden;

    isolation: isolate;

    background: #07111f;

}


/* =========================================================
   BACKGROUND
========================================================= */

.hero-background {

    position: absolute;

    top: 0;
    right: 0;
    bottom: 0;
    left: 0;

    overflow: hidden;

    z-index: -10;

}


/* =========================================================
   BACKGROUND SLIDES
========================================================= */

.hero-bg-slide {

    position: absolute;

    top: -20px;
    right: -20px;
    bottom: -20px;
    left: -20px;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    opacity: 0;

    transform: translateX(100%);

    filter: blur(1px);

    transition:
        transform .65s cubic-bezier(.77,0,.18,1),
        opacity .35s ease;

}


/* Current image */

.hero-bg-slide.active {

    opacity: 1;

    transform: translateX(0);

}


/* Old image */

.hero-bg-slide.previous {

    opacity: 0;

    transform: translateX(-100%);

}


/* =========================================================
   OVERLAY
========================================================= */

.hero-overlay {

    position: absolute;

    inset: 0;

    background:

        linear-gradient(
            90deg,
            rgba(3,10,20,.94) 0%,
            rgba(3,10,20,.78) 45%,
            rgba(3,10,20,.50) 100%
        );

    z-index: 2;

}


/* =========================================================
   GRID
========================================================= */

.hero-grid {

    position: absolute;

    inset: 0;

    z-index: 3;

    opacity: .15;

    background-image:

        linear-gradient(
            rgba(255,255,255,.08) 1px,
            transparent 1px
        ),

        linear-gradient(
            90deg,
            rgba(255,255,255,.08) 1px,
            transparent 1px
        );

    background-size: 70px 70px;

    pointer-events: none;

}


/* =========================================================
   FIXED HERO CONTAINER
========================================================= */

.hero-container {

    position: relative;

    width: min(
        1200px,
        calc(100% - 140px)
    );

    height: 680px;

    margin: 0 auto;

    z-index: 10;

}


/* =========================================================
   TEXT AREA
========================================================= */

.hero-text-area {

    position: relative;

    width: 100%;

    height: 100%;

}


/* =========================================================
   TEXT SLIDES
========================================================= */

.hero-text {

    /*
       Every text slide occupies exactly the same
       fixed area.

       Therefore text length cannot change hero height.
    */

    position: absolute;

    left: 0;

    top: 145px;

    width: 760px;

    opacity: 0;

    visibility: hidden;

    transform: translateX(-45px);

    pointer-events: none;

}


/* =========================================================
   ACTIVE TEXT
========================================================= */

.hero-text.active {

    opacity: 1;

    visibility: visible;

    transform: translateX(0);

    pointer-events: auto;

    /*
       VERY FAST SHARP ANIMATION
    */

    animation:

        textSlideIn
        .32s
        cubic-bezier(.22,.61,.36,1)
        both;

}


/* =========================================================
   FAST TEXT ANIMATION
========================================================= */

@keyframes textSlideIn {

    0% {

        opacity: 0;

        transform: translateX(-45px);

    }

    55% {

        opacity: 1;

        transform: translateX(8px);

    }

    100% {

        opacity: 1;

        transform: translateX(0);

    }

}


/* =========================================================
   EYEBROW
========================================================= */

.eyebrow {

    display: inline-flex;

    align-items: center;

    margin-bottom: 22px;

    padding: 8px 14px;

    border:
        1px solid
        rgba(255,255,255,.22);

    border-radius: 999px;

    background:
        rgba(255,255,255,.07);

    backdrop-filter: blur(8px);

    color:
        rgba(255,255,255,.85);

    font-size: 13px;

    letter-spacing: .08em;

    text-transform: uppercase;

}


/* =========================================================
   HEADING
========================================================= */

.hero h1 {

    margin: 0;

    width: 760px;

    color: #fff;

    font-size:
        clamp(44px, 5.7vw, 74px);

    line-height: 1.03;

    letter-spacing: -.045em;

}


/* Highlight */

.hero h1 em {

    font-style: normal;

    background:

        linear-gradient(
            90deg,
            #ffffff,
            #9fdcff
        );

    -webkit-background-clip: text;

    background-clip: text;

    color: transparent;

}


/* =========================================================
   DESCRIPTION
========================================================= */

.hero p {

    width: 650px;

    margin:

        26px 0 0;

    color:

        rgba(255,255,255,.76);

    font-size: 18px;

    line-height: 1.65;

}


/* =========================================================
   FIXED BUTTON AREA
========================================================= */

.hero-actions {

    /*
       ABSOLUTELY FIXED POSITION
    */

    position: absolute;

    left: 0;

    top: 470px;

    display: flex;

    align-items: center;

    gap: 14px;

    z-index: 30;

}


/* =========================================================
   BUTTONS
========================================================= */

.btn {

    display: inline-flex;

    align-items: center;

    justify-content: center;

    height: 48px;

    padding: 0 22px;

    border-radius: 8px;

    text-decoration: none;

    font-weight: 600;

    white-space: nowrap;

    transition:
        transform .2s ease,
        background .2s ease;

}


.btn:hover {

    transform:
        translateY(-2px);

}


/* Primary */

.btn-primary {

    color: #fff;

    background: #1268d8;

    box-shadow:
        0 10px 30px
        rgba(0,0,0,.25);

}


.btn-primary:hover {

    background: #1976e8;

}


/* Secondary */

.btn-light {

    color: #fff;

    border:
        1px solid
        rgba(255,255,255,.3);

    background:
        rgba(255,255,255,.08);

    backdrop-filter: blur(8px);

}


.btn-light:hover {

    background:
        rgba(255,255,255,.16);

}


/* =========================================================
   ARROWS
========================================================= */
.hero-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: auto; height: auto; padding: 10px; border: none; 
    background: transparent; color: rgba(255,255,255,.75); font-family: Arial, sans-serif; font-size: 48px; font-weight: 200; line-height: 1; 
    cursor: pointer; z-index: 100; transition: color .2s ease, transform .2s ease; } 
    
/* ========================================================= LEFT < ========================================================= */ 
.hero-arrow-left { left: 28px; } 
/* ========================================================= RIGHT > ========================================================= */ 
.hero-arrow-right { right: 28px; } 
/* ========================================================= HOVER ========================================================= */ 
.hero-arrow-left:hover { color: #fff; transform: translateY(-50%) translateX(-4px); } .hero-arrow-right:hover { color: #fff; transform: translateY(-50%) translateX(4px); } 
/* ========================================================= MOBILE ========================================================= */ 
@media (max-width: 650px) { .hero-arrow { font-size: 38px; } .hero-arrow-left { left: 8px; } .hero-arrow-right { right: 8px; } }


/* =========================================================
   INDICATORS
========================================================= */

.hero-indicators {

    position: absolute;

    left: 50%;

    bottom: 25px;

    transform:
        translateX(-50%);

    display: flex;

    gap: 8px;

    z-index: 100;

}


.hero-dot {

    width: 26px;

    height: 4px;

    padding: 0;

    border: 0;

    border-radius: 10px;

    background:
        rgba(255,255,255,.30);

    cursor: pointer;

    transition:
        width .2s ease,
        background .2s ease;

}


.hero-dot.active {

    width: 45px;

    background: #fff;

}


/* =========================================================
   TABLET
========================================================= */

@media (max-width: 900px) {

    .hero-carousel {

        height: 650px;

        min-height: 650px;

        max-height: 650px;

    }


    .hero-container {

        height: 650px;

        width:
            calc(100% - 120px);

    }


    .hero-text {

        width: 650px;

    }


    .hero h1 {

        width: 650px;

    }


    .hero p {

        width: 580px;

    }


    .hero-actions {

        top: 455px;

    }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 650px) {

    .hero-carousel {

        height: 650px;

        min-height: 650px;

        max-height: 650px;

    }


    .hero-container {

        height: 650px;

        width:
            calc(100% - 80px);

    }


    .hero-text {

        top: 110px;

        width: 100%;

    }


    .hero h1 {

        width: 100%;

        font-size: 43px;

    }


    .hero p {

        width: 100%;

        font-size: 16px;

        line-height: 1.55;

    }


    .hero-actions {

        top: 475px;

        left: 0;

        flex-wrap: wrap;

    }


    .hero-arrow {

        width: 44px;

        height: 44px;

        font-size: 19px;

    }


    .hero-arrow-left {

        left: 10px;

    }


    .hero-arrow-right {

        right: 10px;

    }

}


/* =========================================================
   VERY SMALL SCREEN
========================================================= */

@media (max-width: 450px) {

    .hero-carousel {

        height: 680px;

        min-height: 680px;

        max-height: 680px;

    }


    .hero-container {

        height: 680px;

    }


    .hero-text {

        top: 95px;

    }


    .hero h1 {

        font-size: 38px;

    }


    .hero-actions {

        top: 510px;

    }

}

.event-full {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 40px;
    padding: 50px 0;
    border-bottom: 1px solid #ddd;
}

.event-full:last-child {
    border-bottom: none;
}

.event-label {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.event-label strong {
    font-size: 1.8rem;
}

.event-label span {
    font-size: 1rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.08em;
}

.event-content h2 {
    margin-top: 0;
    margin-bottom: 15px;
}

.event-content p {
    line-height: 1.7;
    margin-bottom: 15px;
}

.event-info {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    margin-top: 30px;
    padding-top: 20px;
    border-top: 1px solid #ddd;
}

.event-info div {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.event-info strong {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.event-info span {
    font-size: 0.95rem;
}

@media (max-width: 700px) {
    .event-full {
        grid-template-columns: 1fr;
        gap: 20px;
    }

    .event-info {
        grid-template-columns: 1fr;
    }
}


/* =========================================================
   EVENTS
   ========================================================= */

.events-section {
    margin-top: 45px;
}

.events-title {
    margin: 0 0 18px;
    font-size: 1.25rem;
    font-weight: 700;
}


/* List of events */

.event-list {
    display: flex;
    flex-direction: column;
    gap: 16px;
}


/* =========================================================
   EVENT BOX
   ========================================================= */

.event-card {
    display: grid;
    grid-template-columns: 105px 1fr;

    width: 100%;

    border: 1px solid rgba(0, 0, 0, 0.14);
    border-radius: 8px;

    background: #ffffff;

    overflow: hidden;
}


/* =========================================================
   DATE COLUMN
   ========================================================= */

.event-date {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;

    padding: 20px 10px;

    text-align: center;

    background: #f7f8fa;

    border-right: 1px solid rgba(0, 0, 0, 0.12);
}

.event-date span {
    display: block;

    font-size: 0.72rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.12em;

    opacity: 0.60;
}

.event-date strong {
    display: block;

    margin: 4px 0;

    font-size: 2rem;
    line-height: 1;

    font-weight: 800;
}

.event-date small {
    display: block;

    font-size: 0.72rem;

    opacity: 0.55;
}


/* =========================================================
   EVENT CONTENT
   ========================================================= */

.event-content {
    display: flex;
    flex-direction: column;

    padding: 20px 24px;
}

.event-type {
    display: block;

    margin-bottom: 6px;

    font-size: 0.68rem;
    font-weight: 700;

    text-transform: uppercase;
    letter-spacing: 0.10em;

    opacity: 0.55;
}

.event-content h3 {
    margin: 0 0 8px;

    font-size: 1.05rem;
    line-height: 1.4;
}

.event-content p {
    margin: 0;

    max-width: 800px;

    font-size: 0.88rem;
    line-height: 1.6;

    opacity: 0.70;
}


/* =========================================================
   EVENT WEBSITE LINK
   ========================================================= */

.event-link {
    display: inline-block;

    margin-top: 12px;

    width: fit-content;

    font-size: 0.82rem;
    font-weight: 600;

    text-decoration: none;
}

.event-link:hover {
    text-decoration: underline;
}

.event-date {
    display: flex;
    align-items: center;
    justify-content: center;

    padding: 20px 15px;

    text-align: center;

    background: #f7f8fa;

    border-right: 1px solid rgba(0, 0, 0, 0.12);
}

.event-date strong {
    font-size: 0.9rem;
    line-height: 1.4;
    font-weight: 700;
}

/* =========================================================
   MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .event-card {
        grid-template-columns: 78px 1fr;
    }

    .event-date {
        padding: 12px 6px;
    }

    .event-date strong {
        font-size: 0.82rem;
        line-height: 1.3;
    }

    .event-content {
        padding: 17px;
    }

    .event-content h3 {
        font-size: 0.95rem;
    }

    .event-content p {
        font-size: 0.83rem;
    }

}

/* =========================================================
   PAST EVENTS SCROLLER
   ========================================================= */

.past-events-scroll {
    height: 700px;
    overflow-y: scroll;
    overflow-x: hidden;
    padding-right: 12px;
    box-sizing: border-box;
}

/* Chrome / Edge / Safari */
.past-events-scroll::-webkit-scrollbar {
    width: 12px;
}

.past-events-scroll::-webkit-scrollbar-track {
    background: #e5e5e5;
    border-radius: 6px;
}

.past-events-scroll::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 6px;
}

.past-events-scroll::-webkit-scrollbar-thumb:hover {
    background: #555;
}

/* Firefox */
.past-events-scroll {
    scrollbar-width: auto;
    scrollbar-color: #888 #e5e5e5;
}

/* =========================================
   PAST EVENTS SCROLLBAR
   ========================================= */

.past-events-wrapper {
    height: 700px;
    overflow-y: scroll;
    overflow-x: hidden;
    width: 100%;
}

/* Chrome / Edge */
.past-events-wrapper::-webkit-scrollbar {
    width: 14px;
}

.past-events-wrapper::-webkit-scrollbar-track {
    background: #eeeeee;
}

.past-events-wrapper::-webkit-scrollbar-thumb {
    background: #777777;
    border-radius: 7px;
}

.past-events-wrapper::-webkit-scrollbar-thumb:hover {
    background: #555555;
}