:root {
    --navy: #0c2346;
    --navy-2: #102e59;
    --gold: #c9963e;
    --gold-light: #e0bb72;
    --cream: #f7f3eb;
    --paper: #fffdf9;
    --ink: #172238;
    --muted: #687387;
    --line: #ded9cf;
    --white: #fff;
    --green: #168a63;
    --shadow: 0 24px 70px rgba(12, 35, 70, 0.12);
}


/* =========================================================
   RESET
========================================================= */

* {
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    margin: 0;
    color: var(--ink);
    background: #fff;
    font: 400 16px/1.65 "DM Sans", Arial, sans-serif;
}

body.menu-open {
    overflow: hidden;
}

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

button {
    font: inherit;
}

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

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

.skip-link {
    position: fixed;
    left: 15px;
    top: -60px;
    z-index: 100;

    padding: 10px 16px;

    background: var(--gold);
    color: var(--navy);

    font-weight: 700;
}

.skip-link:focus {
    top: 15px;
}


/* =========================================================
   HEADER
   ========================================================= */

.site-header {
    position: sticky;
    top: 0;
    z-index: 50;

    height: 100px;

    background: rgba(255, 253, 249, 0.98);
    border-bottom: 1px solid rgba(12, 35, 70, 0.10);

    backdrop-filter: blur(18px);
    -webkit-backdrop-filter: blur(18px);

    transition:
        box-shadow 0.25s ease,
        background-color 0.25s ease;
}

.site-header.scrolled {
    background: rgba(255, 253, 249, 0.99);
    box-shadow: 0 10px 35px rgba(12, 35, 70, 0.10);
}

.header-inner {
    width: 100%;
    height: 100%;

    display: flex;
    align-items: center;
    justify-content: space-between;

    gap: 60px;
}

/* ---------- BRAND ---------- */

.brand {
    width: 250px;
    height: 92px;

    flex: 0 0 250px;

    display: flex;
    align-items: center;

    overflow: hidden;
}

.brand img {
    width: 100%;
    height: 100%;

    object-fit: contain;

    mix-blend-mode: multiply;
}

/* ---------- NAVIGATION ---------- */

.main-nav {
    flex: 1;

    display: flex;
    align-items: center;
    justify-content: flex-end;

    gap: clamp(50px, 5vw, 78px);
}

.main-nav a {
    position: relative;

    display: inline-flex;
    align-items: center;

    height: 100px;
    padding: 0;

    color: #3d4a60;

    font-size: 16px;
    font-weight: 600;

    white-space: nowrap;

    transition:
        color 0.25s ease,
        transform 0.25s ease;
}

.main-nav a::after {
    content: "";

    position: absolute;

    left: 0;
    right: 100%;
    bottom: 27px;

    height: 2px;

    background: var(--gold);

    transition: right 0.3s ease;
}

.main-nav a:hover,
.main-nav a.active {
    color: var(--navy);
}

.main-nav a:hover::after,
.main-nav a.active::after {
    right: 0;
}

/* ---------- MOBILE MENU BUTTON ---------- */

.menu-toggle {
    display: none;

    width: 46px;
    height: 46px;

    padding: 10px;

    border: 1px solid var(--line);
    background: transparent;

    cursor: pointer;
}

.menu-toggle span {
    display: block;

    height: 2px;
    margin: 5px 0;

    background: var(--navy);

    transition: transform 0.25s ease;
}


/* =========================================================
   HERO
========================================================= */

.hero {
    position: relative;

    height: min(760px, calc(100vh - 86px));

    min-height: 650px;

    overflow: hidden;

    background: var(--navy);

    color: #fff;
}

.hero-slides,
.hero-slide {
    position: absolute;
    inset: 0;
}

.hero-slide {
    background-image: var(--hero-image);

    background-position: center;
    background-size: cover;

    opacity: 0;
    visibility: hidden;

    transform: scale(1);

    transition:
        opacity 1s ease,
        visibility 1s ease;
}

.hero-slide.active {
    opacity: 1;
    visibility: visible;

    animation: heroZoom 7.5s ease-out both;
}

.hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 17, 35, 0.91) 0%,
            rgba(8, 28, 57, 0.72) 44%,
            rgba(8, 28, 57, 0.18) 100%
        );
}

.hero-content {
    height: 100%;

    display: flex;
    align-items: center;

    position: relative;
    z-index: 2;
}

.hero-copy {
    max-width: 760px;

    padding-bottom: 35px;

    opacity: 0;

    transform: translateY(18px);

    transition: 0.8s 0.2s;
}

.hero-slide.active .hero-copy {
    opacity: 1;
    transform: none;
}

.eyebrow {
    margin: 0 0 15px;

    color: var(--gold);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2.2px;
}

.eyebrow.light {
    color: var(--gold-light);
}

h1,
h2,
h3,
p {
    overflow-wrap: break-word;
}

.hero h1 {
    margin: 0 0 25px;

    font:
        700 clamp(50px, 6.2vw, 84px) / 1.02
        "Playfair Display",
        Georgia,
        serif;

    letter-spacing: -3px;
}

.hero h1 em,
h2 em {
    color: var(--gold-light);

    font-style: normal;
}

.hero-copy > p:not(.eyebrow) {
    max-width: 650px;

    margin: 0;

    color: rgba(255, 255, 255, 0.86);

    font-size: 18px;
    line-height: 1.75;
}

.hero-actions {
    display: flex;

    gap: 13px;

    margin-top: 36px;
}

.btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    min-height: 51px;

    padding: 13px 24px;

    border: 1px solid transparent;

    font-size: 14px;
    font-weight: 700;

    cursor: pointer;

    transition: 0.25s;
}

.btn:hover {
    transform: translateY(-2px);
}

.btn-gold {
    background: var(--gold);

    color: var(--navy);

    box-shadow:
        0 13px 28px rgba(201, 150, 62, 0.22);
}

.btn-gold:hover {
    background: var(--gold-light);
}

.btn-outline-light {
    border-color: rgba(255, 255, 255, 0.55);

    color: #fff;

    background: rgba(255, 255, 255, 0.05);
}

.btn-outline-light:hover {
    background: #fff;
    color: var(--navy);
}

.btn-navy {
    background: var(--navy);
    color: #fff;
}

.btn.large {
    padding: 16px 30px;
}


/* =========================================================
   HERO ARROWS
========================================================= */

.hero-arrow {
    position: absolute;

    top: 50%;
    z-index: 4;

    width: 48px;
    height: 48px;

    border: 1px solid rgba(255, 255, 255, 0.35);

    border-radius: 50%;

    background: rgba(0, 0, 0, 0.15);

    color: #fff;

    cursor: pointer;

    transform: translateY(-50%);

    transition: 0.25s;
}

.hero-arrow:hover {
    background: rgba(255, 255, 255, 0.17);

    transform:
        translateY(-50%)
        scale(1.06);
}

.hero-arrow.prev {
    left: 25px;
}

.hero-arrow.next {
    right: 25px;
}


/* =========================================================
   HERO DOTS
========================================================= */

.hero-dots {
    position: absolute;

    z-index: 5;

    bottom: 28px;
    left: 50%;

    display: flex;

    gap: 8px;

    transform: translateX(-50%);
}

.hero-dots button {
    width: 9px;
    height: 9px;

    padding: 0;

    border: 0;
    border-radius: 20px;

    background: rgba(255, 255, 255, 0.45);

    cursor: pointer;

    transition: 0.25s;
}

.hero-dots button.active {
    width: 30px;

    background: var(--gold-light);
}


/* =========================================================
   STATS
========================================================= */

.stats {
    padding: 44px 0;

    background: var(--paper);

    border-bottom: 1px solid var(--line);
}

.stats-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);
}

.stat {
    padding: 4px 25px;

    text-align: center;

    border-right: 1px solid var(--line);
}

.stat:last-child {
    border: 0;
}

.stat strong {
    display: block;

    color: var(--navy);

    font:
        700 38px/1.1
        "Playfair Display",
        Georgia,
        serif;
}

.stat span {
    display: block;

    margin-top: 6px;

    color: var(--muted);

    font-size: 13px;
    font-weight: 600;
}

.stat small {
    display: block;

    margin-top: 5px;

    color: #a2772f;

    font-size: 8px;

    letter-spacing: 1px;
}


/* =========================================================
   GENERAL SECTIONS
========================================================= */

.section {
    padding: 112px 0;
}

.intro {
    background: var(--cream);
}

.split-heading {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 90px;

    align-items: end;

    margin-bottom: 55px;
}

.split-heading h2,
.section-heading h2,
.faq-intro h2 {
    margin: 0;

    font:
        700 clamp(38px, 4.5vw, 60px) / 1.08
        "Playfair Display",
        Georgia,
        serif;

    letter-spacing: -2px;
}

.split-heading h2 span,
.section-heading h2 span,
.faq-intro h2 span {
    color: var(--gold);
}

.lead {
    max-width: 570px;

    margin: 0;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.8;
}


/* =========================================================
   WHY CHOOSE US
========================================================= */

.feature-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid #d9d1c3;
    border-bottom: 1px solid #d9d1c3;
}

.feature {
    padding: 32px 25px;

    border-right: 1px solid #d9d1c3;
}

.feature:last-child {
    border: 0;
}

.feature-no {
    display: block;

    margin-bottom: 35px;

    color: var(--gold);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;
}

.feature h3 {
    margin: 0 0 10px;

    color: var(--navy);

    font-size: 18px;
}

.feature p {
    margin: 0;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.7;
}


/* =========================================================
   SERVICES
========================================================= */

.services {
    background: #fff;
}

.section-heading {
    max-width: 730px;

    margin: 0 auto 58px;

    text-align: center;
}

.section-heading > p:last-child {
    max-width: 650px;

    margin: 18px auto 0;

    color: var(--muted);

    font-size: 17px;
}

.service-groups {
    display: grid;

    grid-template-columns: 1fr 1fr;

    gap: 24px;
}

.service-group {
    padding: 38px;

    background: var(--cream);

    border: 1px solid var(--line);
}

.service-group.dark {
    background: var(--navy);

    color: #fff;

    border-color: var(--navy);
}

.group-title {
    display: flex;

    gap: 20px;

    align-items: flex-start;

    margin-bottom: 30px;
}

.group-title > span {
    color: var(--gold);

    font:
        600 22px
        "Playfair Display",
        Georgia,
        serif;
}

.group-title h3 {
    margin: 0;

    font:
        700 34px/1.1
        "Playfair Display",
        Georgia,
        serif;
}

.service-list {
    display: grid;

    grid-template-columns: 1fr;

    gap: 0;
}

.service-list article {
    padding: 22px 0;

    border-top: 1px solid rgba(12, 35, 70, 0.14);
}

.service-group.dark .service-list article {
    border-color: rgba(255, 255, 255, 0.16);
}

.service-list b {
    font-size: 16px;
}

.service-list p {
    margin: 5px 0 0;

    color: var(--muted);

    font-size: 14px;
}

.service-group.dark .service-list p {
    color: #adb8c9;
}

.mini-services {
    display: flex;

    flex-wrap: wrap;
    justify-content: center;

    gap: 10px;

    margin-top: 25px;
}

.mini-services span {
    padding: 9px 14px;

    border: 1px solid var(--line);

    color: var(--muted);

    font-size: 12px;
    font-weight: 600;
}


/* =========================================================
   GERMAN LANGUAGE PROGRAM
========================================================= */

.language {
    background: var(--paper);
}

.levels {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 1px;

    border: 1px solid var(--line);

    background: var(--line);
}

.level {
    min-height: 430px;

    padding: 30px 25px;

    background: #fff;
}

.level.active {
    background: var(--navy);

    color: #fff;
}

.level-top {
    display: flex;

    align-items: end;
    justify-content: space-between;

    padding-bottom: 19px;

    border-bottom: 1px solid var(--line);
}

.level.active .level-top {
    border-color: rgba(255, 255, 255, 0.2);
}

.level-top span {
    color: var(--navy);

    font:
        700 43px
        "Playfair Display",
        Georgia,
        serif;
}

.level.active .level-top span {
    color: var(--gold-light);
}

.level-top small {
    color: var(--gold);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 1px;
}

.level h3 {
    margin: 25px 0 10px;

    font-size: 18px;
}

.level p {
    margin: 0;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.7;
}

.level.active p {
    color: #b7c1d1;
}

.level ul {
    margin: 22px 0 0;

    padding: 0;

    list-style: none;
}

.level li {
    padding: 8px 0;

    border-top: 1px solid var(--line);

    font-size: 12px;

    color: #445066;
}

.level.active li {
    border-color: rgba(255, 255, 255, 0.16);

    color: #d7deea;
}

.skills {
    display: flex;

    justify-content: center;

    gap: 0;

    margin-top: 35px;

    border-block: 1px solid var(--line);
}

.skills span {
    flex: 1;

    padding: 19px 10px;

    text-align: center;

    color: var(--navy);

    font-size: 12px;
    font-weight: 700;

    text-transform: uppercase;

    letter-spacing: 1px;

    border-right: 1px solid var(--line);
}

.skills span:last-child {
    border: 0;
}

.program-details {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    margin-top: 35px;

    border: 1px solid var(--line);
}

.program-details div {
    padding: 25px;

    text-align: center;

    border-right: 1px solid var(--line);
}

.program-details div:last-child {
    border: 0;
}

.program-details strong {
    display: block;

    color: var(--navy);

    font-size: 17px;
}

.program-details span {
    display: block;

    margin-top: 4px;

    color: var(--muted);

    font-size: 12px;
}

.schedule-box {
    display: grid;

    grid-template-columns: 1fr 1fr;

    margin-top: 18px;

    background: var(--navy);

    color: #fff;
}

.schedule-box div {
    padding: 25px 30px;

    text-align: center;
}

.schedule-box div + div {
    border-left: 1px solid rgba(255, 255, 255, 0.18);
}

.schedule-box small {
    display: block;

    color: var(--gold-light);

    font-weight: 700;

    letter-spacing: 1px;
}

.schedule-box strong {
    display: block;

    margin-top: 4px;

    font:
        600 22px
        "Playfair Display",
        Georgia,
        serif;
}

.fee-box {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;

    margin-top: 18px;

    padding: 28px 30px;

    border: 1px solid var(--gold);

    background: #fff;
}

.fee-box h3 {
    margin: 0 0 5px;

    font:
        600 25px
        "Playfair Display",
        Georgia,
        serif;
}

.fee-box p:not(.eyebrow) {
    margin: 0;

    color: var(--muted);

    font-size: 13px;
}


/* =========================================================
   GERMANY OPPORTUNITIES
========================================================= */

.germany {
    background: var(--cream);
}

.opportunities {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 16px;
}

.opportunity {
    min-height: 230px;

    padding: 26px;

    background: #fff;

    border: 1px solid var(--line);

    transition: 0.25s;
}

.opportunity:hover {
    transform: translateY(-5px);

    box-shadow: var(--shadow);
}

.opportunity span {
    color: var(--gold);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1px;
}

.opportunity h3 {
    margin: 35px 0 8px;

    color: var(--navy);

    font:
        600 24px
        "Playfair Display",
        Georgia,
        serif;
}

.opportunity p {
    margin: 0;

    color: var(--muted);

    font-size: 13px;

    line-height: 1.65;
}

.opportunity:nth-child(5),
.opportunity:nth-child(6),
.opportunity:nth-child(7) {
    grid-column: span 1;
}

/* ==========================================
   GERMANY OPPORTUNITIES MOBILE SLIDER
   ========================================== */

.opportunity-dots {
    display: none;
}

@media (max-width: 850px) {

    /* VIEWPORT */
    .opportunities-slider {
        width: 100%;
        overflow: hidden;
    }

    /* MOVING TRACK */
    .opportunities {
        display: flex !important;
        grid-template-columns: none !important;

        width: 100% !important;

        gap: 0 !important;

        margin: 0 !important;

        transition: transform 0.55s cubic-bezier(.22, 1, .36, 1);

        transform: translateX(0);
    }

    /* CARD */
    .opportunity {
        flex: 0 0 100% !important;

        width: 100% !important;
        min-width: 100% !important;

        min-height: 230px !important;
        height: 250px !important;

        box-sizing: border-box;

        margin: 0 !important;

        transform: none !important;
        opacity: 1 !important;
    }

    .opportunity:hover {
        transform: none !important;
        box-shadow: none !important;
    }

    /* DOTS */
    .opportunity-dots {
        display: flex !important;

        justify-content: center;
        align-items: center;

        gap: 8px;

        margin-top: 24px;
    }

    .opportunity-dot {
        width: 8px;
        height: 8px;

        padding: 0;

        border: 0;

        border-radius: 50%;

        background: rgba(12, 35, 70, 0.25);

        cursor: pointer;

        transition:
            width 0.25s ease,
            background 0.25s ease;
    }

    .opportunity-dot.active {
        width: 24px;

        background: var(--gold);

        border-radius: 999px;
    }
}

/* =========================================================
   PROCESS
========================================================= */

.process {
    background: var(--navy);

    color: #fff;
}

.process .section-heading {
    margin-left: 0;

    text-align: left;
}

.process .section-heading > p:last-child {
    display: none;
}

.process .section-heading h2 {
    color: #fff;
}

.process-grid {
    display: grid;

    grid-template-columns: repeat(3, 1fr);

    border-top: 1px solid rgba(255, 255, 255, 0.17);
    border-left: 1px solid rgba(255, 255, 255, 0.17);
}

.process-step {
    min-height: 220px;

    padding: 30px;

    border-right: 1px solid rgba(255, 255, 255, 0.17);
    border-bottom: 1px solid rgba(255, 255, 255, 0.17);
}

.process-step > span {
    color: var(--gold-light);

    font-size: 12px;
    font-weight: 700;
}

.process-step h3 {
    margin: 30px 0 9px;

    font:
        600 22px
        "Playfair Display",
        Georgia,
        serif;
}

.process-step p {
    margin: 0;

    color: #aeb9cb;

    font-size: 13px;

    line-height: 1.7;
}


/* =========================================================
   TEAM
========================================================= */

.team {
    background: #fff;
}

.team-grid {
    display: grid;

    grid-template-columns: repeat(4, 1fr);

    gap: 18px;
}

.team-card {
    padding: 15px;

    border: 1px solid var(--line);

    background: var(--paper);
}

.team-photo {
    height: 260px;

    display: grid;
    place-items: center;

    background:
        linear-gradient(
            135deg,
            #ebe6dc,
            #d5cfbf
        );

    color: #827862;

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;
}

.team-card h3 {
    margin: 19px 0 4px;

    font:
        600 22px
        "Playfair Display",
        Georgia,
        serif;
}

.team-card p {
    margin: 0;

    color: var(--gold);

    font-size: 12px;
}

.team-card > span {
    display: block;

    margin-top: 10px;

    color: var(--muted);

    font-size: 12px;
}


/* =========================================================
   PREMIUM TESTIMONIAL CAROUSEL
   Desktop: multiple cards visible
   Mobile: one card visible + swipe
========================================================= */

.stories {
    position: relative;
    overflow: hidden;

    background:
        linear-gradient(
            rgba(247,243,235,.88),
            rgba(247,243,235,.88)
        ),
        url("../images/germany-bg.jpg") center / cover no-repeat;
}


/* =========================================================
   CAROUSEL
========================================================= */

.testimonial-carousel {
    position: relative;

    width: 100%;
    max-width: 1180px;

    margin: 0 auto;

    padding: 15px 60px 25px;

    overflow: hidden;
}


/* =========================================================
   TRACK
========================================================= */

.testimonial-track {
    display: flex;

    align-items: stretch;

    gap: 24px;

    width: max-content;

    transform: translateX(0);

    transition:
        transform .7s cubic-bezier(.22,1,.36,1);

    will-change: transform;
}


/* =========================================================
   CARD
========================================================= */

.testimonial-card {
    position: relative;

    flex: 0 0 350px;

    width: 350px;
    height: 540px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(247,243,235,.97)
        );

    border: 1px solid rgba(201,150,62,.32);

    border-radius: 20px;

    box-shadow:
        0 20px 55px rgba(12,35,70,.14);

    transition:
        box-shadow .35s ease,
        transform .35s ease;
}

.testimonial-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 28px 65px rgba(12,35,70,.18);
}


/* =========================================================
   TOP
========================================================= */

.testimonial-top {
    position: absolute;

    top: 17px;
    left: 18px;
    right: 18px;

    z-index: 5;

    display: flex;
    align-items: center;
    justify-content: space-between;
}

.testimonial-logo {
    width: 92px;
    height: 38px;

    object-fit: contain;

    mix-blend-mode: multiply;
}


/* =========================================================
   PHOTO
========================================================= */

.testimonial-photo-wrap {
    position: relative;

    height: 265px;

    overflow: hidden;

    background:
        linear-gradient(
            135deg,
            #eee7dc,
            #ddd3c3
        );
}

.testimonial-photo-wrap::before {
    content: "";

    position: absolute;
    inset: 0;

    z-index: 2;

    pointer-events: none;

    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,.2),
            transparent 55%
        );
}

.testimonial-photo-wrap::after {
    content: "GERMANY";

    position: absolute;

    right: -13px;
    bottom: 24px;

    z-index: 3;

    padding: 6px 17px;

    color: rgba(12,35,70,.45);

    font-size: 7px;
    font-weight: 700;

    letter-spacing: 3px;

    border: 1px solid rgba(12,35,70,.16);

    transform: rotate(-90deg);
}

.testimonial-photo {
    width: 100%;
    height: 100%;

    display: block;

    object-fit: cover;
    object-position: center;
}


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

.testimonial-content {
    position: relative;

    height: 275px;

    padding: 18px 22px 20px;

    background:
        linear-gradient(
            180deg,
            rgba(255,253,249,.98),
            rgba(247,243,235,.96)
        );
}

.testimonial-stars {
    margin-bottom: 7px;

    color: var(--gold);

    font-size: 13px;

    letter-spacing: 2px;
}

.testimonial-quote-mark {
    position: absolute;

    top: 22px;
    right: 20px;

    color: rgba(201,150,62,.18);

    font:
        700 58px/1
        "Playfair Display",
        Georgia,
        serif;
}

.testimonial-content blockquote {
    position: relative;

    z-index: 2;

    height: 105px;

    margin: 0;

    color: #354158;

    font:
        400 14px/1.55
        "Playfair Display",
        Georgia,
        serif;
}


/* =========================================================
   STUDENT
========================================================= */

.testimonial-student {
    display: flex;

    align-items: center;

    gap: 10px;

    margin-top: 15px;

    padding-top: 12px;

    border-top: 1px solid rgba(12,35,70,.12);
}

.testimonial-student strong {
    display: block;

    color: var(--navy);

    font-size: 14px;
    font-weight: 700;
}


/* =========================================================
   ARROWS
========================================================= */

.testimonial-arrow {
    position: absolute;

    top: 50%;

    z-index: 20;

    width: 48px;
    height: 48px;

    display: grid;
    place-items: center;

    border: 1px solid rgba(12,35,70,.12);

    border-radius: 50%;

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

    color: var(--navy);

    font-size: 30px;
    line-height: 1;

    cursor: pointer;

    box-shadow:
        0 10px 28px rgba(12,35,70,.14);

    transform: translateY(-50%);

    transition:
        background .25s ease,
        color .25s ease,
        transform .25s ease,
        box-shadow .25s ease;
}

.testimonial-prev {
    left: 0;
}

.testimonial-next {
    right: 0;
}

.testimonial-arrow:hover {
    background: var(--navy);

    color: #fff;

    transform:
        translateY(-50%)
        scale(1.06);

    box-shadow:
        0 14px 34px rgba(12,35,70,.20);
}

.testimonial-arrow[hidden] {
    display: none !important;
}


/* =========================================================
   DOTS
========================================================= */

.testimonial-dots {
    display: flex;

    justify-content: center;
    align-items: center;

    gap: 8px;

    margin-top: 22px;
}

.testimonial-dots button {
    width: 7px;
    height: 7px;

    padding: 0;

    border: 0;

    border-radius: 50%;

    background: rgba(12,35,70,.25);

    cursor: pointer;

    transition:
        width .25s ease,
        background .25s ease;
}

.testimonial-dots button.active {
    width: 24px;

    border-radius: 999px;

    background: var(--gold);
}


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

@media(max-width:1150px) {

    .testimonial-carousel {
        max-width: 850px;

        padding-left: 55px;
        padding-right: 55px;
    }

    .testimonial-card {
        flex-basis: 330px;
        width: 330px;
    }

}


/* =========================================================
   MOBILE
   ONE CARD AT A TIME
   NO ARROWS
========================================================= */

/* =========================================================
   MOBILE — PORTRAIT TESTIMONIAL CARD
========================================================= */

@media(max-width:850px) {

    .testimonial-carousel {
        width: 100%;
        max-width: 430px;

        margin: 0 auto;

        padding: 15px 0 20px;

        overflow: hidden;
    }


    .testimonial-track {
        gap: 0;
        width: 100%;
    }


    .testimonial-card {
        flex: 0 0 100%;
        width: 100%;

        /* Portrait proportion */
        height: 125vw;
        max-height: 620px;
        min-height: 500px;

        border-radius: 18px;

        transform: none !important;
    }


    .testimonial-card:hover {
        transform: none;
    }


    /* Hide arrows on mobile */

    .testimonial-arrow {
        display: none !important;
    }


    /* Keep dots */

    .testimonial-dots {
        margin-top: 18px;
    }

}


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

@media(max-width:560px) {

    .testimonial-carousel {
        width: 100%;
        max-width: 100%;

        padding: 12px 0 15px;
    }


    .testimonial-card {
        width: 100%;

        /*
           Full-width portrait card.
           Example:
           360px screen → ~450px tall
        */

        height: 125vw;

        min-height: 450px;
        max-height: 560px;

        border-radius: 15px;
    }


    .testimonial-photo-wrap {
        height: 58%;
    }


    .testimonial-content {
        height: 42%;

        padding: 17px 20px;
    }

}


/* =========================================================
   VERY SMALL MOBILE
========================================================= */

@media(max-width:380px) {

    .testimonial-card {
        width: 100%;

        height: 125vw;

        min-height: 420px;
        max-height: 500px;

        border-radius: 14px;
    }


    .testimonial-photo-wrap {
        height: 57%;
    }


    .testimonial-content {
        height: 43%;
    }

}


/* =========================================================
   FAQ
========================================================= */

.faq {
    background: #fff;
}

.faq-layout {
    display: grid;

    grid-template-columns: 0.8fr 1.2fr;

    gap: 90px;

    align-items: start;
}

.faq-intro {
    position: sticky;

    top: 125px;
}

.faq-intro > p:last-child {
    max-width: 410px;

    color: var(--muted);

    font-size: 16px;
}

.faq-list {
    border-top: 1px solid var(--line);
}

.faq-item {
    border-bottom: 1px solid var(--line);
}

.faq-question {
    width: 100%;

    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 20px;

    padding: 23px 0;

    border: 0;

    background: none;

    color: var(--navy);

    text-align: left;

    font-size: 15px;
    font-weight: 700;

    cursor: pointer;
}

.faq-question b {
    flex: 0 0 auto;

    width: 30px;
    height: 30px;

    display: grid;
    place-items: center;

    border: 1px solid var(--line);

    font-size: 19px;
    font-weight: 400;

    transition: 0.25s;
}

.faq-item.active .faq-question b {
    background: var(--navy);

    color: #fff;

    border-color: var(--navy);

    transform: rotate(0);
}

.faq-answer {
    display: grid;

    grid-template-rows: 0fr;

    transition:
        grid-template-rows 0.3s ease;
}

.faq-answer p {
    overflow: hidden;

    margin: 0;

    color: var(--muted);

    font-size: 14px;

    line-height: 1.75;
}

.faq-item.active .faq-answer {
    grid-template-rows: 1fr;
}

.faq-item.active .faq-answer p {
    padding: 0 45px 24px 0;
}


/* =========================================================
   FINAL CTA
========================================================= */

.final-cta {
    padding: 85px 0;

    background: var(--navy);

    color: #fff;
}

.cta-inner {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 50px;
}

.cta-inner h2 {
    margin: 0;

    font:
        700 clamp(40px, 5vw, 65px) / 1.03
        "Playfair Display",
        Georgia,
        serif;

    letter-spacing: -2px;
}

.cta-inner > div > p:last-child {
    margin: 18px 0 0;

    color: #b8c2d1;
}


/* =========================================================
   FOOTER
========================================================= */

.site-footer {
    padding: 65px 0 0;

    background: #071a34;

    color: #fff;
}

.footer-grid {
    display: grid;

    grid-template-columns: 1.7fr 1fr 1.3fr 1.1fr;

    gap: 45px;

    padding-bottom: 55px;
}

.footer-brand img {
    width: 175px;
    height: 75px;

    object-fit: contain;

    mix-blend-mode: screen;

    background: #fff;
}

.footer-brand p {
    max-width: 270px;

    color: #9facbf;

    font-size: 13px;
}

.footer-grid h3 {
    margin: 0 0 18px;

    color: var(--gold-light);

    font-size: 13px;

    letter-spacing: 1px;

    text-transform: uppercase;
}

.footer-grid a,
.footer-grid p {
    display: block;

    margin: 0 0 9px;

    color: #aab6c8;

    font-size: 13px;

    line-height: 1.7;
}

.footer-grid a:hover {
    color: #fff;
}

.footer-bottom {
    padding: 18px 0;

    border-top: 1px solid rgba(255, 255, 255, 0.1);

    color: #77869d;

    font-size: 11px;
}

.footer-bottom .container {
    display: flex;

    justify-content: space-between;

    gap: 20px;
}



/* =========================================================
   FLOATING CONTACT ICONS
   ========================================================= */

.floating-contact {
    position: fixed;
    right: 22px;
    bottom: 22px;
    z-index: 100;

    display: flex;
    flex-direction: column;
    gap: 12px;
}

.floating-icon {
    width: 54px;
    height: 54px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color: #fff;

    box-shadow:
        0 10px 28px rgba(0, 0, 0, 0.20);

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.floating-icon svg {
    width: 24px;
    height: 24px;
    fill: currentColor;
}

.floating-icon:hover {
    transform: scale(1.1);
    box-shadow:
        0 14px 32px rgba(0, 0, 0, 0.28);
}

/* WhatsApp */
.floating-icon.whatsapp {
    background: #168a63;
}

/* Phone */
.floating-icon.phone {
    background: var(--navy);
}


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

@media (max-width: 560px) {

    .floating-contact {
        right: 14px;
        bottom: 14px;
        gap: 10px;
    }

    .floating-icon {
        width: 50px;
        height: 50px;
    }

    .floating-icon svg {
        width: 22px;
        height: 22px;
    }
}

/* ---------- MOBILE ---------- */

@media (max-width: 560px) {

    .floating-wa {
        right: 14px;
        bottom: 14px;

        min-width: 54px;
        width: 54px;
        height: 54px;

        padding: 0;

        gap: 0;
    }

    .floating-wa span,
    .floating-wa .phone-icon {
        display: none;
    }

    .floating-wa svg {
        width: 24px;
        height: 24px;
    }
}


/* =========================================================
   GENERAL REVEAL
========================================================= */

.reveal {
    opacity: 0;

    transform: translateY(25px);

    transition:
        opacity 0.7s ease,
        transform 0.7s ease;
}

.reveal.visible {
    opacity: 1;

    transform: none;
}


/* =========================================================
   ANIMATIONS
========================================================= */

@keyframes heroZoom {

    from {
        transform: scale(1);
    }

    to {
        transform: scale(1.07);
    }
}

@keyframes route {

    0% {
        width: 0;
    }

    45% {
        width: 42%;
    }

    75% {
        width: 75%;
    }

    100% {
        width: 100%;
    }
}

@keyframes fly {

    0%,
    100% {
        transform:
            translate(0, 0)
            rotate(-12deg);
    }

    50% {
        transform:
            translate(65px, -12px)
            rotate(-12deg);
    }
}



@media (max-width: 850px) {

    .header-inner {
        width: 100%;
        padding-left: 0;
        padding-right: 12px;
        gap: 0;
    }

    .brand {
        margin-left: 20px !important;
        margin-right: auto;
        
        width: 150px;
        height: 58px;
        flex: 0 0 150px;
    }

    .brand img {
        width: calc(100% - 8px);
        height: 100%;
        object-fit: contain;
        object-position: left center;
    }

    .menu-toggle {
        display: block;

        width: 46px;
        height: 46px;

        margin-left: auto;
        flex: 0 0 46px;

        padding: 10px;

        position: relative;
        z-index: 110;
    }

    /* Full-width mobile menu */
    .main-nav {
        position: absolute;

        top: 72px;
        left: 0;
        right: 0;

        width: 100%;

        display: grid;
        gap: 0;

        padding: 10px 16px 18px;

        background: rgba(255, 253, 249, 0.97);

        border: 0;
        border-bottom: 1px solid var(--line);
        border-radius: 0;

        box-shadow:
            0 18px 35px rgba(12, 35, 70, 0.12);

        backdrop-filter: blur(20px);
        -webkit-backdrop-filter: blur(20px);

        transform: translateY(-10px);
        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transition:
            opacity 0.25s ease,
            transform 0.25s ease,
            visibility 0.25s ease;
    }

    .main-nav.is-open {
        transform: translateY(0);

        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    .main-nav a {
        width: 100%;
        height: 50px;

        justify-content: flex-start;

        padding: 0 16px;

        border-radius: 10px;

        font-size: 15px;
    }

    .main-nav a:hover {
        transform: none;
    }

    .main-nav a.active::before {
        left: 8px;
        bottom: 50%;

        transform: translateY(50%);
    }
}


@media (max-width: 560px) {

    .header-inner {
        padding-left: 0;
        padding-right: 10px;
    }

    .brand {
        width: 145px;
        height: 54px;
        flex-basis: 145px;
    }

    .menu-toggle {
        width: 44px;
        height: 44px;
        flex-basis: 44px;
    }

    .main-nav {
        top: 66px;
        padding-left: 12px;
        padding-right: 12px;
    }
}
/* =========================================================
   DESKTOP SIZE ENHANCEMENTS
   Text and logo only — layout/functionality preserved
   ========================================================= */

@media (min-width: 851px) {

    /* Header / logo */
    .brand {
        width: 280px;
        height: 100px;
        flex-basis: 280px;
    }

    .brand img {
        width: 100%;
        height: 100%;
        object-fit: contain;
    }

    .main-nav {
        gap: clamp(52px, 5vw, 80px);
    }

    .main-nav a {
        font-size: 18px;
    }

    /* Hero */
    .hero-copy > p:not(.eyebrow) {
        font-size: 19px;
    }

    .btn {
        font-size: 15px;
    }

    .eyebrow {
        font-size: 13px;
    }

    /* Stats */
    .stat strong {
        font-size: 40px;
    }

    .stat span {
        font-size: 14px;
    }

    /* Section headings */
    .lead {
        font-size: 19px;
    }

    .section-heading > p:last-child {
        font-size: 18px;
    }

    /* Why Choose */
    .feature h3 {
        font-size: 19px;
    }

    .feature p {
        font-size: 15px;
    }

    /* Services */
    .group-title > span {
        font-size: 23px;
    }

    .group-title h3 {
        font-size: 36px;
    }

    .service-list b {
        font-size: 17px;
    }

    .service-list p {
        font-size: 15px;
    }

    .mini-services span {
        font-size: 13px;
    }

    /* German language program */
    .level-top span {
        font-size: 45px;
    }

    .level-top small {
        font-size: 10px;
    }

    .level h3 {
        font-size: 19px;
    }

    .level p {
        font-size: 15px;
    }

    .level li {
        font-size: 13px;
    }

    .skills span {
        font-size: 13px;
    }

    .program-details strong {
        font-size: 18px;
    }

    .program-details span {
        font-size: 13px;
    }

    .schedule-box small {
        font-size: 13px;
    }

    .schedule-box strong {
        font-size: 23px;
    }

    .fee-box h3 {
        font-size: 26px;
    }

    .fee-box p:not(.eyebrow) {
        font-size: 14px;
    }

    /* Germany opportunities */
    .opportunity span {
        font-size: 12px;
    }

    .opportunity h3 {
        font-size: 26px;
    }

    .opportunity p {
        font-size: 14px;
    }

    /* Process */
    .process-step > span {
        font-size: 13px;
    }

    .process-step h3 {
        font-size: 23px;
    }

    .process-step p {
        font-size: 14px;
    }

    /* Team */
    .team-photo {
        font-size: 12px;
    }

    .team-card h3 {
        font-size: 23px;
    }

    .team-card p,
    .team-card > span {
        font-size: 13px;
    }

    /* Student stories */
    .story blockquote {
        font-size: 18px;
    }

    .story strong {
        font-size: 15px;
    }

    .story small {
        font-size: 12px;
    }

    /* FAQ */
    .faq-intro > p:last-child {
        font-size: 17px;
    }

    .faq-question {
        font-size: 16px;
    }

    .faq-answer p {
        font-size: 15px;
    }

    /* CTA */
    .cta-inner > div > p:last-child {
        font-size: 16px;
    }

    /* Footer */
    .footer-brand p,
    .footer-grid a,
    .footer-grid p {
        font-size: 14px;
    }

    .footer-grid h3 {
        font-size: 14px;
    }

    .footer-bottom {
        font-size: 12px;
    }

    /* Floating WhatsApp */
    .floating-wa {
        font-size: 14px;
    }
}


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

@media (max-width: 1000px) {

    .main-nav {
        gap: 18px;
    }

    .main-nav a {
        font-size: 12px;
    }

    .container {
        width: min(100% - 40px, 900px);
    }

    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .feature:nth-child(2) {
        border-right: 0;
    }

    .feature:nth-child(n + 3) {
        border-top: 1px solid #d9d1c3;
    }

    .service-groups,
    .faq-layout {
        grid-template-columns: 1fr;
    }

    .faq-intro {
        position: static;
    }

    .levels {
        grid-template-columns: repeat(2, 1fr);
    }

    .level {
        min-height: 380px;
    }

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

    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}


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

@media (max-width: 850px) {

    .site-header {
        height: 72px;
    }

    .brand {
        width: 135px;
        height: 56px;
    }

    .menu-toggle {
        display: block;
    }

    .main-nav {
        position: absolute;

        top: 72px;
        left: 0;
        right: 0;

        display: grid;

        gap: 0;

        padding: 10px 20px 20px;

        background: var(--paper);

        border-bottom: 1px solid var(--line);

        box-shadow:
            0 20px 30px rgba(0, 0, 0, 0.08);

        transform: translateY(-10px);

        opacity: 0;

        pointer-events: none;

        transition: 0.25s;
    }

    .main-nav.is-open {
        transform: none;

        opacity: 1;

        pointer-events: auto;
    }

    .main-nav a {
        padding: 15px 0;

        font-size: 14px;

        border-bottom: 1px solid var(--line);
    }

    .main-nav a:last-child {
        border: 0;
    }

    .main-nav a::after {
        display: none;
    }


    /* Hero */

    .hero {
        height: calc(100svh - 72px);

        min-height: 650px;
    }

    .hero-overlay {
        background:
            linear-gradient(
                180deg,
                rgba(5, 17, 35, 0.35),
                rgba(5, 17, 35, 0.82) 65%,
                rgba(5, 17, 35, 0.96)
            );
    }

    .hero-content {
        align-items: flex-end;

        padding-bottom: 82px;
    }

    .hero h1 {
        font-size: clamp(44px, 10vw, 65px);

        letter-spacing: -2px;
    }

    .hero-copy > p:not(.eyebrow) {
        font-size: 16px;
    }

    .hero-actions {
        flex-direction: column;

        max-width: 390px;
    }

    .hero-actions .btn {
        width: 100%;
    }

    .hero-arrow {
        display: none;
    }


    /* Stats */

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat:nth-child(2) {
        border: 0;
    }

    .stat:nth-child(n + 3) {
        padding-top: 24px;

        border-top: 1px solid var(--line);
    }


    /* Layout */

    .split-heading {
        grid-template-columns: 1fr;

        gap: 25px;
    }

    .section {
        padding: 85px 0;
    }


    /* Process */

    .process-grid {
        grid-template-columns: repeat(2, 1fr);
    }


    /* Program */

    .program-details {
        grid-template-columns: repeat(2, 1fr);
    }

    .program-details div:nth-child(2) {
        border-right: 0;
    }

    .program-details div:nth-child(n + 3) {
        border-top: 1px solid var(--line);
    }

    .skills {
        flex-wrap: wrap;
    }

    .skills span {
        flex: 0 0 33.333%;
        border-bottom: 1px solid var(--line);
    }

    .skills span:nth-child(3) {
        border-right: 0;
    }


    /* Opportunities */

    .opportunities {
        grid-template-columns: repeat(2, 1fr);
    }
}


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

@media (max-width: 560px) {

    .container {
        width: calc(100% - 32px);
    }


    /* Header */

    .site-header {
        height: 66px;
    }

    .main-nav {
        top: 66px;
    }


    /* Hero */

    .hero {
        min-height: 620px;
    }

    .hero-content {
        padding-bottom: 75px;
    }

    .hero h1 {
        font-size: 43px;
    }

    .hero-copy > p:not(.eyebrow) {
        font-size: 15px;
    }


    /* Stats */

    .stats-grid {
        grid-template-columns: 1fr;
    }

    .stat,
    .stat:nth-child(2),
    .stat:nth-child(n + 3) {
        padding: 20px 10px;

        border-right: 0;

        border-top: 1px solid var(--line);
    }

    .stat:first-child {
        border-top: 0;
    }


    /* Headings */

    .split-heading h2,
    .section-heading h2,
    .faq-intro h2 {
        font-size: 40px;
    }


    /* Features */

    .feature-grid {
        grid-template-columns: 1fr;
    }

    .feature,
    .feature:nth-child(2),
    .feature:nth-child(n + 3) {
        border-right: 0;

        border-top: 1px solid #d9d1c3;
    }

    .feature:first-child {
        border-top: 0;
    }


    /* Services */

    .service-group {
        padding: 26px 20px;
    }

    .group-title h3 {
        font-size: 28px;
    }


    /* Language program */

    .levels {
        grid-template-columns: 1fr;
    }

    .level {
        min-height: auto;
    }

    .skills span {
        flex: 0 0 50%;
    }

    .skills span:nth-child(2),
    .skills span:nth-child(4) {
        border-right: 0;
    }

    .program-details {
        grid-template-columns: 1fr;
    }

    .program-details div,
    .program-details div:nth-child(2),
    .program-details div:nth-child(n + 3) {
        border-right: 0;

        border-top: 1px solid var(--line);
    }

    .program-details div:first-child {
        border-top: 0;
    }

    .schedule-box {
        grid-template-columns: 1fr;
    }

    .schedule-box div + div {
        border-left: 0;

        border-top: 1px solid rgba(255, 255, 255, 0.18);
    }

    .fee-box {
        align-items: flex-start;

        flex-direction: column;

        padding: 25px 20px;
    }


    /* Germany */

    .opportunities {
        grid-template-columns: 1fr;
    }


    /* Process */

    .process-grid {
        grid-template-columns: 1fr;
    }


    /* Team */

    .team-grid,
    .story-grid {
        grid-template-columns: 1fr;
    }

    .team-photo {
        height: 300px;
    }


    /* FAQ */

    .faq-question {
        font-size: 14px;
    }


    /* CTA */

    .cta-inner {
        align-items: flex-start;

        flex-direction: column;
    }


    /* Footer */

    .footer-grid {
        grid-template-columns: 1fr;

        gap: 30px;
    }

    .footer-bottom .container {
        flex-direction: column;
    }


    /* WhatsApp */

    .floating-wa {
        right: 14px;
        bottom: 14px;
    }

    .floating-wa span {
        display: none;
    }


    /* Old journey styles retained exactly as provided */

    .journey-track {
        height: 230px;
    }

    .route-line {
        left: 35px;
        right: 35px;
        top: 60px;
    }

    .location.india {
        left: 0;
    }

    .location.germany {
        right: 0;
    }

    .plane {
        left: 43%;
        top: 40px;
    }

    .pin {
        width: 56px;
        height: 56px;
    }

    .location strong {
        font-size: 18px;
    }
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {

    html {
        scroll-behavior: auto;
    }

    .hero-slide.active {
        animation: none;
    }

    .route-line span,
    .plane {
        animation: none;
    }

    .reveal,
    .hero-copy {
        transition: none;
    }

    .btn,
    .opportunity {
        transition: none;
    }
}


/* =========================================================
   OLD CINEMATIC JOURNEY STYLES
   Currently retained in your uploaded CSS
========================================================= */

.journey-scroll {
    position: relative;

    height: 330vh;

    background: #061a35;
}

.journey-sticky {
    position: sticky;

    top: 0;

    height: 100svh;

    min-height: 680px;

    overflow: hidden;

    background: #061a35;

    color: #fff;

    perspective: 1500px;

    isolation: isolate;
}

.journey-background {
    position: absolute;

    inset: -8%;

    background-size: cover;
    background-position: center;

    transform: scale(1.12);

    will-change: transform, opacity;
}

.india-bg {
    background-image:
        linear-gradient(
            90deg,
            rgba(5, 18, 38, 0.90),
            rgba(7, 27, 54, 0.62) 48%,
            rgba(7, 27, 54, 0.35)
        ),
        url("https://images.unsplash.com/photo-1524492412937-b28074a5d7da?auto=format&fit=crop&w=2400&q=88");

    opacity: 1;
}

.germany-bg {
    background-image:
        linear-gradient(
            90deg,
            rgba(5, 18, 38, 0.88),
            rgba(7, 27, 54, 0.58) 48%,
            rgba(7, 27, 54, 0.30)
        ),
        url("https://images.unsplash.com/photo-1467269204594-9661b134dd2b?auto=format&fit=crop&w=2400&q=88");

    opacity: 0;
}

.journey-atmosphere {
    position: absolute;

    inset: 0;

    z-index: 1;

    background:
        radial-gradient(
            circle at 18% 48%,
            rgba(201, 150, 62, 0.15),
            transparent 28%
        ),
        radial-gradient(
            circle at 82% 45%,
            rgba(201, 150, 62, 0.12),
            transparent 25%
        ),
        linear-gradient(
            180deg,
            rgba(2, 11, 25, 0.05),
            rgba(2, 11, 25, 0.45)
        );
}

.journey-stars {
    position: absolute;

    inset: 0;

    z-index: 2;

    opacity: 0.3;

    background-image:
        radial-gradient(
            circle,
            rgba(255, 255, 255, 0.7) 1px,
            transparent 1.5px
        ),
        radial-gradient(
            circle,
            rgba(220, 187, 114, 0.45) 1px,
            transparent 1.5px
        );

    background-size:
        125px 125px,
        190px 190px;

    background-position:
        20px 40px,
        80px 20px;

    mix-blend-mode: screen;
}

.journey-perspective-grid {
    position: absolute;

    z-index: 2;

    left: -20%;
    right: -20%;

    bottom: -43%;

    height: 75%;

    opacity: 0.16;

    background-image:
        linear-gradient(
            rgba(214, 169, 79, 0.55) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(214, 169, 79, 0.55) 1px,
            transparent 1px
        );

    background-size: 85px 85px;

    transform:
        perspective(520px)
        rotateX(62deg)
        translateZ(-90px);

    transform-origin: center top;
}

.journey-stage {
    position: relative;

    height: 100%;

    z-index: 5;
}

.journey-copy {
    position: absolute;

    top: 16%;
    left: 0;

    max-width: 700px;

    transform: translateZ(120px);
}

.journey-copy .eyebrow {
    margin-bottom: 17px;

    color: var(--gold-light);
}

.journey-copy h2 {
    margin: 0;

    font:
        700 clamp(48px, 6vw, 80px) / 0.98
        "Playfair Display",
        Georgia,
        serif;

    letter-spacing: -3px;
}

.journey-copy h2 em {
    display: block;

    color: var(--gold-light);

    font-style: normal;
}

.journey-copy > p:last-child {
    max-width: 610px;

    margin: 24px 0 0;

    color: rgba(255, 255, 255, 0.76);

    font-size: 17px;

    line-height: 1.75;
}

.journey-map {
    position: absolute;

    left: 0;
    right: 0;

    top: 55%;

    height: 230px;

    transform-style: preserve-3d;
}

.route-main {
    position: absolute;

    left: 8%;
    right: 8%;

    top: 76px;

    height: 2px;

    transform: translateZ(30px);

    background:
        linear-gradient(
            90deg,
            rgba(214, 169, 79, 0.95),
            rgba(255, 255, 255, 0.24),
            rgba(214, 169, 79, 0.95)
        );

    box-shadow:
        0 0 18px rgba(214, 169, 79, 0.12);
}

.route-main span {
    display: block;

    width: 0;
    height: 100%;

    background: var(--gold-light);

    box-shadow:
        0 0 15px rgba(224, 187, 114, 0.7);
}

.route-shadow {
    position: absolute;

    left: 8%;
    right: 8%;

    top: 82px;

    height: 12px;

    transform:
        translateZ(-10px)
        rotateX(75deg);

    background: rgba(0, 0, 0, 0.35);

    filter: blur(8px);
}

.route-dash {
    position: absolute;

    left: 8%;
    right: 8%;

    top: 76px;

    height: 2px;

    background:
        repeating-linear-gradient(
            90deg,
            transparent 0 20px,
            rgba(255, 255, 255, 0.18) 20px 22px
        );

    transform: translateZ(5px);
}

.journey-city {
    position: absolute;

    top: 36px;

    display: flex;

    align-items: flex-start;

    gap: 14px;

    z-index: 4;

    transform-style: preserve-3d;
}

.city-india {
    left: 3%;
}

.city-germany {
    right: 3%;

    flex-direction: row-reverse;

    text-align: right;
}

.city-marker {
    width: 78px;
    height: 78px;

    display: grid;
    place-items: center;

    border: 1px solid var(--gold);

    border-radius: 50%;

    background:
        radial-gradient(
            circle at 30% 25%,
            rgba(255, 255, 255, 0.14),
            rgba(8, 31, 61, 0.97) 65%
        );

    box-shadow:
        0 20px 45px rgba(0, 0, 0, 0.28),
        0 0 0 9px rgba(214, 169, 79, 0.045);

    transform: translateZ(100px);
}

.city-marker span {
    color: var(--gold-light);

    font-size: 14px;
    font-weight: 700;
}

.city-copy {
    padding-top: 9px;

    transform: translateZ(70px);
}

.city-copy strong {
    display: block;

    font:
        600 25px/1.1
        "Playfair Display",
        Georgia,
        serif;
}

.city-copy small {
    display: block;

    margin-top: 7px;

    color: rgba(255, 255, 255, 0.56);

    font-size: 11px;

    white-space: nowrap;
}

.journey-plane {
    position: absolute;

    left: 0;
    top: 76px;

    width: 90px;
    height: 90px;

    display: grid;
    place-items: center;

    z-index: 8;

    transform:
        translate(-50%, -50%)
        translateZ(190px);

    transform-style: preserve-3d;

    will-change:
        left,
        transform;
}

.journey-plane span {
    display: block;

    color: var(--gold-light);

    font-size: 39px;
    line-height: 1;

    filter:
        drop-shadow(
            0 15px 15px rgba(0, 0, 0, 0.42)
        );

    transform: rotate(-9deg);
}

.journey-plane::before {
    content: "";

    position: absolute;

    width: 110px;
    height: 110px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(224, 187, 114, 0.22),
            transparent 68%
        );

    filter: blur(5px);

    z-index: -1;
}

.journey-plane::after {
    content: "";

    position: absolute;

    right: 68px;

    width: 170px;
    height: 1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(224, 187, 114, 0.55)
        );

    transform: rotate(5deg);

    transform-origin: right center;
}

.journey-message {
    position: absolute;

    left: 50%;
    bottom: 18%;

    width: min(560px, calc(100% - 60px));

    display: flex;

    gap: 20px;

    align-items: flex-start;

    padding: 24px 28px;

    border-left: 2px solid var(--gold);

    background:
        linear-gradient(
            90deg,
            rgba(5, 22, 44, 0.78),
            rgba(5, 22, 44, 0.14)
        );

    backdrop-filter: blur(8px);

    transform:
        translateX(-50%)
        translateZ(120px);

    will-change:
        transform,
        opacity;
}

.journey-step {
    flex: 0 0 auto;

    padding-top: 4px;

    color: var(--gold-light);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 2px;
}

.journey-message h3 {
    margin: 0 0 6px;

    font:
        600 28px/1.15
        "Playfair Display",
        Georgia,
        serif;
}

.journey-message p {
    margin: 0;

    color: rgba(255, 255, 255, 0.65);

    font-size: 14px;

    line-height: 1.65;
}

.journey-progress-wrap {
    position: absolute;

    left: 3%;
    right: 3%;

    bottom: 7%;
}

.journey-progress {
    height: 2px;

    background: rgba(255, 255, 255, 0.17);
}

.journey-progress span {
    display: block;

    width: 0;
    height: 100%;

    background: var(--gold-light);

    box-shadow:
        0 0 14px rgba(224, 187, 114, 0.6);
}

.journey-progress-label {
    display: flex;

    justify-content: space-between;

    margin-top: 9px;

    color: rgba(255, 255, 255, 0.43);

    font-size: 9px;
    font-weight: 700;

    letter-spacing: 2px;
}


/* =========================================================
   OLD JOURNEY RESPONSIVE
========================================================= */

@media (max-width: 850px) {

    .journey-scroll {
        height: 300vh;
    }

    .journey-sticky {
        min-height: 650px;
    }

    .journey-copy {
        top: 11%;

        left: 20px;
        right: 20px;
    }

    .journey-copy h2 {
        font-size: clamp(44px, 11vw, 64px);

        letter-spacing: -2px;
    }

    .journey-copy > p:last-child {
        font-size: 15px;
    }

    .journey-map {
        left: 20px;
        right: 20px;

        top: 54%;
    }

    .route-main,
    .route-dash,
    .route-shadow {
        left: 8%;
        right: 8%;
    }

    .journey-city {
        gap: 9px;
    }

    .city-marker {
        width: 60px;
        height: 60px;
    }

    .city-copy strong {
        font-size: 19px;
    }

    .city-copy small {
        font-size: 9px;
    }

    .journey-plane {
        width: 74px;
        height: 74px;

        transform:
            translate(-50%, -50%)
            translateZ(120px);
    }

    .journey-plane span {
        font-size: 31px;
    }

    .journey-plane::after {
        right: 55px;

        width: 100px;
    }

    .journey-message {
        bottom: 17%;

        width: calc(100% - 40px);

        padding: 20px;
    }

    .journey-progress-wrap {
        left: 20px;
        right: 20px;
    }
}


@media (max-width: 560px) {

    .journey-scroll {
        height: 280vh;
    }

    .journey-sticky {
        min-height: 620px;
    }

    .journey-copy {
        top: 9%;
    }

    .journey-copy h2 {
        font-size: 43px;
    }

    .journey-copy > p:last-child {
        font-size: 14px;

        margin-top: 18px;
    }

    .journey-map {
        top: 52%;

        height: 220px;
    }

    .route-main,
    .route-dash,
    .route-shadow {
        left: 7%;
        right: 7%;

        top: 68px;
    }

    .journey-city {
        top: 28px;
    }

    .city-india {
        left: 0;
    }

    .city-germany {
        right: 0;
    }

    .city-marker {
        width: 54px;
        height: 54px;
    }

    .city-copy {
        padding-top: 4px;
    }

    .city-copy strong {
        font-size: 17px;
    }

    .city-copy small {
        max-width: 100px;

        font-size: 8px;

        white-space: normal;
    }

    .journey-plane {
        top: 68px;
    }

    .journey-message {
        bottom: 15%;

        gap: 13px;

        padding: 18px;
    }

    .journey-message h3 {
        font-size: 23px;
    }

    .journey-message p {
        font-size: 12px;
    }

    .journey-progress-wrap {
        bottom: 6%;
    }
}


/* =========================================================
   REDUCED MOTION FOR OLD JOURNEY
========================================================= */

@media (prefers-reduced-motion: reduce) {

    .journey-scroll {
        height: auto;
    }

    .journey-sticky {
        position: relative;

        height: 650px;
    }

    .journey-plane {
        left: 50% !important;

        transform:
            translate(-50%, -50%)
            translateZ(120px) !important;
    }

    .journey-progress span {
        width: 50% !important;
    }

    .germany-bg {
        opacity: 0.35 !important;
    }

    .india-bg {
        opacity: 0.65 !important;
    }
}


/* =========================================================
   FLYWISE — LAPTOP DESKTOP VISUAL SCALE
   Target: premium 1366–1536px laptop layout
   ========================================================= */

@media (min-width: 1001px) {

    /* ---------- GLOBAL DESKTOP FRAME ---------- */

    .container {
        width: min(1500px, calc(100% - 80px));
    }

    .section {
        padding: 120px 0;
    }

    /* ---------- HEADER ---------- */

    .site-header {
        height: 98px;
    }

    .header-inner {
        gap: 56px;
    }

    .brand {
        width: 205px;
        height: 78px;
        flex: 0 0 205px;
    }

    .main-nav {
        flex: 1;
        justify-content: flex-end;
        gap: clamp(24px, 2.3vw, 42px);
    }

    .main-nav a {
        padding: 36px 0;
        font-size: 15px;
        letter-spacing: 0.1px;
    }

    .main-nav a::after {
        bottom: 25px;
        height: 2px;
    }

    /* ---------- HERO ---------- */

    .hero {
        height: min(820px, calc(100vh - 98px));
        min-height: 700px;
    }

    .hero-content {
        padding-inline: 42px;
    }

    .hero-copy {
        max-width: 930px;
        padding-bottom: 10px;
    }

    .eyebrow {
        margin-bottom: 20px;
        font-size: 13px;
        letter-spacing: 2.8px;
    }

    .hero h1 {
        max-width: 920px;
        margin-bottom: 30px;
        font-size: clamp(64px, 6.4vw, 100px);
        line-height: 0.98;
        letter-spacing: -4px;
    }

    .hero-copy > p:not(.eyebrow) {
        max-width: 760px;
        font-size: 20px;
        line-height: 1.72;
    }

    .hero-actions {
        margin-top: 42px;
        gap: 16px;
    }

    .btn {
        min-height: 58px;
        padding: 16px 32px;
        font-size: 15px;
    }

    .hero-arrow {
        width: 58px;
        height: 58px;
    }

    .hero-arrow.prev {
        left: 38px;
    }

    .hero-arrow.next {
        right: 38px;
    }

    .hero-dots {
        bottom: 34px;
    }

    /* ---------- STATS ---------- */

    .stats {
        padding: 58px 0;
    }

    .stats-grid {
        width: min(1420px, 100%);
    }

    .stat {
        padding: 8px 36px;
    }

    .stat strong {
        font-size: 52px;
        line-height: 1;
    }

    .stat span {
        margin-top: 10px;
        font-size: 15px;
    }

    /* ---------- GENERAL HEADINGS ---------- */

    .split-heading {
        grid-template-columns: 1.05fr 0.95fr;
        gap: 120px;
        margin-bottom: 72px;
    }

    .split-heading h2,
    .section-heading h2,
    .faq-intro h2 {
        font-size: clamp(50px, 4.7vw, 76px);
        line-height: 1.01;
        letter-spacing: -3px;
    }

    .lead {
        max-width: 680px;
        font-size: 20px;
        line-height: 1.78;
    }

    .section-heading {
        max-width: 1000px;
        margin-bottom: 72px;
    }

    .section-heading > p:last-child {
        max-width: 820px;
        margin-top: 22px;
        font-size: 18px;
        line-height: 1.8;
    }

    /* ---------- WHY FLYWISE ---------- */

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

    .feature {
        min-height: 290px;
        padding: 42px 36px;
    }

    .feature-no {
        margin-bottom: 54px;
        font-size: 13px;
        letter-spacing: 2.5px;
    }

    .feature h3 {
        margin-bottom: 14px;
        font-size: 21px;
        line-height: 1.25;
    }

    .feature p {
        max-width: 290px;
        font-size: 15px;
        line-height: 1.8;
    }

    /* ---------- SERVICES ---------- */

    .service-groups {
        gap: 32px;
    }

    .service-group {
        min-height: 510px;
        padding: 54px 50px;
    }

    .group-title {
        gap: 28px;
        margin-bottom: 40px;
    }

    .group-title > span {
        font-size: 27px;
    }

    .group-title h3 {
        font-size: 42px;
        line-height: 1.05;
    }

    .service-list article {
        padding: 27px 0;
    }

    .service-list b {
        font-size: 18px;
    }

    .service-list p {
        margin-top: 8px;
        font-size: 15px;
        line-height: 1.75;
    }

    .mini-services {
        gap: 12px;
        margin-top: 30px;
    }

    .mini-services span {
        padding: 12px 18px;
        font-size: 13px;
    }

    /* ---------- GERMAN PROGRAM ---------- */

    .levels {
        grid-template-columns: repeat(4, 1fr);
        gap: 2px;
    }

    .level {
        min-height: 490px;
        padding: 40px 32px;
    }

    .level-top {
        padding-bottom: 24px;
    }

    .level-top span {
        font-size: 54px;
    }

    .level-top small {
        font-size: 10px;
    }

    .level h3 {
        margin: 30px 0 12px;
        font-size: 20px;
        line-height: 1.3;
    }

    .level p {
        font-size: 15px;
        line-height: 1.78;
    }

    .level ul {
        margin-top: 24px;
    }

    .level li {
        padding: 10px 0;
        font-size: 13px;
    }

    .skills {
        margin-top: 46px;
    }

    .skills span {
        padding: 23px 12px;
        font-size: 13px;
    }

    .program-details {
        margin-top: 46px;
    }

    .program-details div {
        padding: 32px;
    }

    .program-details strong {
        font-size: 20px;
    }

    .program-details span {
        font-size: 13px;
    }

    .schedule-box {
        margin-top: 22px;
    }

    .schedule-box div {
        padding: 32px 40px;
    }

    .schedule-box strong {
        font-size: 26px;
    }

    .fee-box {
        margin-top: 22px;
        padding: 34px 40px;
    }

    .fee-box h3 {
        font-size: 29px;
    }

    .fee-box p:not(.eyebrow) {
        font-size: 14px;
        line-height: 1.75;
    }

    /* ---------- STUDY IN GERMANY ---------- */

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

    .opportunity {
        min-height: 290px;
        padding: 34px 32px;
    }

    .opportunity span {
        font-size: 12px;
    }

    .opportunity h3 {
        margin: 48px 0 10px;
        font-size: 29px;
        line-height: 1.1;
    }

    .opportunity p {
        font-size: 15px;
        line-height: 1.75;
    }

    /* Keep the 7-item structure visually balanced */
    .opportunity:nth-child(5),
    .opportunity:nth-child(6),
    .opportunity:nth-child(7) {
        min-height: 260px;
    }

    /* ---------- PROCESS ---------- */

    .process {
        padding: 125px 0;
    }

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

    .process-step {
        min-height: 280px;
        padding: 40px;
    }

    .process-step > span {
        font-size: 13px;
    }

    .process-step h3 {
        margin: 40px 0 12px;
        font-size: 25px;
        line-height: 1.2;
    }

    .process-step p {
        font-size: 15px;
        line-height: 1.78;
    }

    /* ---------- TEAM ---------- */

    .team-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 24px;
    }

    .team-card {
        padding: 19px;
    }

    .team-photo {
        height: 330px;
    }

    .team-card h3 {
        margin-top: 23px;
        font-size: 25px;
    }

    .team-card p,
    .team-card > span {
        font-size: 13px;
    }

    /* ---------- STUDENT STORIES ---------- */

    .story-grid {
        gap: 24px;
    }

    .story {
        min-height: 350px;
        padding: 42px;
    }

    .quote {
        font-size: 76px;
    }

    .story blockquote {
        min-height: 120px;
        margin: 15px 0 38px;
        font-size: 20px;
        line-height: 1.78;
    }

    .story strong {
        font-size: 15px;
    }

    .story small {
        font-size: 12px;
    }

    /* ---------- FAQ ---------- */

    .faq-layout {
        grid-template-columns: 0.85fr 1.15fr;
        gap: 125px;
    }

    .faq-intro > p:last-child {
        max-width: 500px;
        font-size: 17px;
        line-height: 1.8;
    }

    .faq-question {
        padding: 29px 0;
        font-size: 17px;
    }

    .faq-question b {
        width: 38px;
        height: 38px;
        font-size: 22px;
    }

    .faq-answer p {
        font-size: 15px;
        line-height: 1.82;
    }

    .faq-item.active .faq-answer p {
        padding-bottom: 30px;
    }

    /* ---------- FINAL CTA ---------- */

    .final-cta {
        padding: 115px 0;
    }

    .cta-inner {
        gap: 90px;
    }

    .cta-inner h2 {
        font-size: clamp(52px, 5.2vw, 78px);
        line-height: 1;
    }

    .cta-inner > div > p:last-child {
        font-size: 18px;
        line-height: 1.7;
    }

    /* ---------- FOOTER ---------- */

    .site-footer {
        padding-top: 82px;
    }

    .footer-grid {
        gap: 60px;
        padding-bottom: 70px;
    }

    .footer-brand img {
        width: 205px;
        height: 88px;
    }

    .footer-brand p {
        max-width: 330px;
        font-size: 14px;
        line-height: 1.75;
    }

    .footer-grid h3 {
        font-size: 14px;
    }

    .footer-grid a,
    .footer-grid p {
        font-size: 14px;
    }

    .footer-bottom {
        padding: 22px 0;
        font-size: 12px;
    }

    /* ---------- FLOATING WHATSAPP ---------- */

    .floating-wa {
        right: 30px;
        bottom: 30px;
        padding: 16px 20px;
        font-size: 14px;
    }

    /* ---------- REMOVE VISUAL EFFECT OF UNUSED JOURNEY ---------- */

    .journey-scroll,
    .journey-sticky {
        display: none;
    }
}


/* =========================================================
   LARGE DESKTOP — 1600px+
   Use the extra viewport instead of leaving it empty.
   ========================================================= */

@media (min-width: 1600px) {

    .container {
        width: min(1580px, calc(100% - 96px));
    }

    .hero-content {
        padding-inline: 55px;
    }

    .hero-copy {
        max-width: 980px;
    }

    .hero h1 {
        max-width: 980px;
        font-size: 104px;
    }

    .split-heading {
        gap: 150px;
    }

    .section {
        padding: 135px 0;
    }

    .feature {
        min-height: 310px;
        padding: 48px 40px;
    }

    .service-group {
        min-height: 540px;
        padding: 58px 56px;
    }

    .group-title h3 {
        font-size: 45px;
    }

    .level {
        min-height: 520px;
        padding: 44px 36px;
    }

    .level-top span {
        font-size: 58px;
    }

    .opportunity {
        min-height: 310px;
        padding: 38px 36px;
    }

    .process-step {
        min-height: 300px;
        padding: 44px;
    }

    .team-photo {
        height: 360px;
    }

    .story {
        min-height: 380px;
        padding: 48px;
    }
}


/* =========================================================
   DESKTOP POLISH — INTERACTION / HIERARCHY
   ========================================================= */

@media (min-width: 1001px) {

    .feature,
    .service-group,
    .level,
    .opportunity,
    .team-card,
    .story,
    .process-step {
        transition:
            transform 0.3s ease,
            box-shadow 0.3s ease,
            border-color 0.3s ease,
            background-color 0.3s ease;
    }

    .feature:hover {
        transform: translateY(-5px);
        background: rgba(255, 255, 255, 0.35);
    }

    .service-group:hover {
        transform: translateY(-4px);
        box-shadow: 0 28px 70px rgba(12, 35, 70, 0.10);
    }

    .level:not(.active):hover {
        transform: translateY(-4px);
        box-shadow: 0 22px 55px rgba(12, 35, 70, 0.10);
    }

    .team-card:hover,
    .story:hover {
        transform: translateY(-5px);
        box-shadow: 0 24px 65px rgba(12, 35, 70, 0.10);
    }

    .process-step:hover {
        background: rgba(255, 255, 255, 0.035);
    }

    .hero-copy,
    .section-heading,
    .split-heading,
    .faq-layout,
    .cta-inner {
        position: relative;
    }

    /* Slightly stronger separators make large sections feel intentional */
    .feature-grid,
    .process-grid {
        box-shadow: 0 1px 0 rgba(12, 35, 70, 0.02);
    }
}


/* =========================================================
   DESKTOP CONTENT WIDTH SAFETY
   Prevent very long text lines at huge resolutions.
   ========================================================= */

@media (min-width: 1001px) {

    .feature p,
    .service-list p,
    .level p,
    .opportunity p,
    .process-step p,
    .story blockquote,
    .faq-answer p,
    .lead,
    .section-heading > p:last-child {
        text-wrap: pretty;
    }
}

/* =========================================================
   CURSOR INTERACTION EFFECTS
   ========================================================= */

/* ---------- SERVICE CARDS ---------- */

.service-group {
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.service-group::before {
    content: "";
    position: absolute;
    inset: -80%;
    background:
        radial-gradient(
            circle at var(--mx, 50%) var(--my, 50%),
            rgba(201, 150, 62, 0.12),
            transparent 25%
        );
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.35s ease;
}

.service-group:hover::before {
    opacity: 1;
}

.service-group:hover {
    box-shadow: 0 25px 60px rgba(12, 35, 70, 0.12);
}


/* ---------- OPPORTUNITY CARDS ---------- */

.opportunity {
    position: relative;
    overflow: hidden;
    transform-style: preserve-3d;
    transition:
        transform 0.3s ease,
        box-shadow 0.3s ease;
}

.opportunity::after {
    content: "";
    position: absolute;

    width: 180px;
    height: 180px;

    left: var(--mx, 50%);
    top: var(--my, 50%);

    transform: translate(-50%, -50%);

    background: radial-gradient(
        circle,
        rgba(201, 150, 62, 0.16),
        transparent 70%
    );

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.3s ease;
}

.opportunity:hover::after {
    opacity: 1;
}

.opportunity:hover {
    box-shadow: 0 20px 45px rgba(12, 35, 70, 0.12);
}


/* ---------- LANGUAGE LEVEL CARDS ---------- */

.level {
    position: relative;
    overflow: hidden;

    transform-style: preserve-3d;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.level::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        radial-gradient(
            circle at var(--mx, 50%) var(--my, 50%),
            rgba(201, 150, 62, 0.10),
            transparent 35%
        );

    opacity: 0;
    pointer-events: none;

    transition: opacity 0.3s ease;
}

.level:hover::after {
    opacity: 1;
}

.level:hover {
    box-shadow: 0 20px 45px rgba(12, 35, 70, 0.10);
}


/* =========================================================
   TEAM CARDS — COMPACT MOBILE / RESPONSIVE
   ========================================================= */

.team{
    width:100%;
    background:var(--paper);
    padding:90px 0;
    overflow:hidden;
}

.team > .container{
    width:min(1500px, calc(100% - 80px));
    margin:0 auto;
}


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

.team-grid{
    display:grid !important;
    grid-template-columns:repeat(3, minmax(0, 1fr)) !important;
    gap:28px !important;
    width:100%;
    align-items:start !important;
}


/* =========================
   CARD
   ========================= */

.team-card{
    position:relative !important;

    width:100% !important;
    min-width:0 !important;
    min-height:0 !important;

    height:360px !important;
    aspect-ratio:auto !important;

    overflow:hidden !important;

    border-radius:18px !important;

    background:var(--navy);

    border:1px solid rgba(12,35,70,.08);

    box-shadow:0 18px 45px rgba(12,35,70,.12);

    isolation:isolate;

    grid-column:auto !important;
    grid-row:auto !important;

    transform:none;
}


/* =========================
   IMAGE
   ========================= */

.team-card .team-photo,
.team-card > img{
    position:absolute !important;
    inset:0 !important;

    width:100% !important;
    height:100% !important;

    overflow:hidden;
}

.team-card .team-photo img,
.team-card > img{
    width:100% !important;
    height:100% !important;

    object-fit:cover !important;
    object-position:center !important;

    display:block;
}


/* =========================
   DARK IMAGE GRADIENT
   ========================= */

.team-card::after{
    content:"";

    position:absolute;
    inset:0;

    z-index:1;

    background:
        linear-gradient(
            to top,
            rgba(7,22,45,.96) 0%,
            rgba(7,22,45,.70) 30%,
            rgba(7,22,45,.12) 65%,
            rgba(7,22,45,0) 100%
        );

    pointer-events:none;
}


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

.team-card-content,
.team-card > div:last-child{
    position:absolute !important;

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

    z-index:2;

    padding:26px 24px 22px;

    color:#fff;
}


/* =========================
   NAME
   ========================= */

.team-card h3{
    margin:0 0 5px !important;

    color:#fff;

    font-family:Georgia, "Times New Roman", serif;

    font-size:25px !important;
    line-height:1.1 !important;

    font-weight:700;
}


/* =========================
   ROLE
   ========================= */

.team-card p{
    margin:0 !important;

    color:#fff;

    font-size:12px !important;
    line-height:1.4 !important;

    font-weight:600;
}


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

@media(max-width:1100px){

    .team{
        padding:80px 0;
    }

    .team > .container{
        width:calc(100% - 50px);
        max-width:900px;
    }

    .team-grid{
        grid-template-columns:repeat(2, minmax(0,1fr)) !important;
        gap:22px !important;
    }

    .team-card{
        height:320px !important;
    }

}


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

@media(max-width:850px){

    .team{
        padding:65px 0 75px;
    }

    .team > .container{
        width:calc(100% - 32px);
        max-width:700px;
        margin:0 auto;
    }


    /* EXACTLY TWO CARDS PER ROW */

    .team-grid{
        display:grid !important;

        grid-template-columns:
            repeat(2, minmax(0, 1fr)) !important;

        gap:16px !important;

        align-items:start !important;
    }


    /* COMPACT CARD */

    .team-card,
    .team-card:nth-child(n){
        width:100% !important;

        height:clamp(155px, 44vw, 180px) !important;

        min-height:0 !important;
        max-height:180px !important;

        aspect-ratio:auto !important;

        grid-column:auto !important;
        grid-row:auto !important;

        border-radius:14px !important;

        overflow:hidden !important;
    }


    /* IMAGE MUST NOT CONTROL CARD HEIGHT */

    .team-card .team-photo,
    .team-card > img{
        position:absolute !important;
        inset:0 !important;

        width:100% !important;
        height:100% !important;

        min-height:0 !important;
    }


    .team-card .team-photo img,
    .team-card > img{
        width:100% !important;
        height:100% !important;

        object-fit:cover !important;
    }


    /* COMPACT TEXT */

    .team-card-content,
    .team-card > div:last-child{
        padding:14px 13px 12px !important;
    }

    .team-card h3{
        margin:0 0 3px !important;

        font-size:17px !important;
        line-height:1.1 !important;
    }

    .team-card p{
        margin:0 !important;

        font-size:9px !important;
        line-height:1.3 !important;

        font-weight:600;
    }


    /* REMOVE HOVER LIFT ON TOUCH */

    .team-card:hover{
        transform:none !important;
    }

}


/* =========================================================
   SMALL PHONES
   ========================================================= */

@media(max-width:560px){

    .team{
        padding:55px 0 65px;
    }

    .team > .container{
        width:calc(100% - 24px);
    }

    .team-grid{
        grid-template-columns:
            repeat(2, minmax(0,1fr)) !important;

        gap:12px !important;
    }

    .team-card,
    .team-card:nth-child(n){
        height:clamp(150px, 43vw, 170px) !important;

        max-height:170px !important;

        border-radius:12px !important;
    }

    .team-card-content,
    .team-card > div:last-child{
        padding:12px 10px 10px !important;
    }

    .team-card h3{
        font-size:15px !important;
    }

    .team-card p{
        font-size:8px !important;
        line-height:1.3 !important;
    }

}


/* =========================================================
   VERY SMALL PHONES
   ========================================================= */

@media(max-width:380px){

    .team > .container{
        width:calc(100% - 20px);
    }

    .team-grid{
        gap:10px !important;
    }

    .team-card,
    .team-card:nth-child(n){
        height:150px !important;
        max-height:150px !important;
        border-radius:11px !important;
    }

    .team-card-content,
    .team-card > div:last-child{
        padding:10px 9px 9px !important;
    }

    .team-card h3{
        font-size:14px !important;
    }

    .team-card p{
        font-size:7.5px !important;
    }

}

/* ---------- STUDENT STORIES ---------- */

.story {
    position: relative;

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.story:hover {
    transform: translateY(-7px);
    box-shadow: 0 20px 50px rgba(12, 35, 70, 0.10);
}


/* ---------- BUTTONS ---------- */

.btn {
    position: relative;
    overflow: hidden;

    transition:
        transform 0.25s ease,
        box-shadow 0.25s ease;
}

.btn::before {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    left: var(--mx, 50%);
    top: var(--my, 50%);

    transform: translate(-50%, -50%);

    background: radial-gradient(
        circle,
        rgba(255, 255, 255, 0.22),
        transparent 70%
    );

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.25s ease;
}

.btn:hover::before {
    opacity: 1;
}

.btn:hover {
    box-shadow: 0 12px 30px rgba(201, 150, 62, 0.20);
}


/* ---------- FAQ HOVER ---------- */

.faq-question {
    transition:
        padding-left 0.25s ease,
        color 0.25s ease;
}

.faq-question:hover {
    padding-left: 8px;
}

.faq-question:hover b {
    border-color: var(--gold);
    color: var(--gold);
}


/* ---------- REDUCED MOTION ---------- */

@media (prefers-reduced-motion: reduce) {

    .service-group,
    .opportunity,
    .level,
    .team-card,
    .story,
    .btn,
    .team-photo,
    .faq-question {
        transform: none !important;
        transition: none !important;
    }
}


/* ---------- DISABLE 3D EFFECT ON TOUCH ---------- */

@media (hover: none), (pointer: coarse) {

    .service-group,
    .opportunity,
    .level,
    .team-card,
    .story,
    .btn {
        transform: none !important;
    }

    .service-group::before,
    .opportunity::after,
    .level::after,
    .btn::before {
        display: none;
    }
}

/* =========================================================
   ABOUT PAGE
   ========================================================= */

.about-hero {
    position: relative;
    height: min(620px, calc(100vh - 100px));
    min-height: 520px;

    overflow: hidden;

    background: var(--navy);
    color: #fff;
}

.about-hero-image {
    position: absolute;
    inset: 0;

    background-image:
        url("../images/about-hero.jpg");

    background-size: cover;
    background-position: center;
}

.about-hero-overlay {
    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            90deg,
            rgba(5, 17, 35, 0.90),
            rgba(8, 28, 57, 0.55) 52%,
            rgba(8, 28, 57, 0.20)
        );
}

.about-hero-content {
    position: relative;
    z-index: 2;

    height: 100%;

    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;

    max-width: 1500px;
}

.about-hero h1 {
    max-width: 850px;

    margin: 0 0 25px;

    font:
        700 clamp(54px, 6vw, 82px) / 1.02
        "Playfair Display",
        Georgia,
        serif;

    letter-spacing: -3px;
}

.about-hero h1 em {
    display: block;

    color: var(--gold-light);
    font-style: normal;
}

.about-hero-content > p:last-child {
    max-width: 650px;

    margin: 0;

    color: rgba(255, 255, 255, 0.84);

    font-size: 19px;
    line-height: 1.75;
}


/* =========================================================
   ABOUT INTRO
   ========================================================= */

.about-intro {
    background: var(--cream);
}

.about-intro-grid {
    display: grid;
    grid-template-columns: 0.9fr 1.1fr;

    gap: 100px;

    align-items: start;
}

.about-intro h2,
.vision-header h2 {
    margin: 0;

    font:
        700 clamp(42px, 4.8vw, 65px) / 1.05
        "Playfair Display",
        Georgia,
        serif;

    letter-spacing: -2px;
}

.about-intro h2 span,
.vision-header h2 span {
    color: var(--gold);
}

.about-intro-grid > div:last-child {
    padding-top: 8px;
}

.about-large-text {
    margin: 0 0 24px;

    color: var(--navy);

    font:
        500 24px/1.6
        "Playfair Display",
        Georgia,
        serif;
}

.about-intro-grid > div:last-child p:not(.about-large-text) {
    margin: 0 0 18px;

    color: var(--muted);

    font-size: 17px;
    line-height: 1.8;
}


/* =========================================================
   OFFICE
   ========================================================= */

.about-office {
    padding: 120px 0;

    background: #fff;
}

.office-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;

    gap: 90px;

    align-items: center;
}

.office-image-wrap {
    position: relative;
}

.office-main-image {
    width: 100%;
    height: 620px;

    object-fit: cover;
}

.office-caption {
    position: absolute;

    left: 25px;
    bottom: 25px;

    padding: 18px 22px;

    background: rgba(12, 35, 70, 0.94);
    color: #fff;
}

.office-caption span {
    display: block;

    margin-bottom: 5px;

    color: var(--gold-light);

    font-size: 10px;
    font-weight: 700;

    letter-spacing: 1.5px;
}

.office-caption strong {
    font:
        600 20px
        "Playfair Display",
        Georgia,
        serif;
}

.office-content h2 {
    margin: 0 0 28px;

    font:
        700 clamp(42px, 4.5vw, 62px) / 1.05
        "Playfair Display",
        Georgia,
        serif;

    letter-spacing: -2px;
}

.office-content h2 span {
    color: var(--gold);
}

.office-content > p:not(.eyebrow) {
    margin: 0 0 18px;

    color: var(--muted);

    font-size: 17px;
    line-height: 1.8;
}

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

    margin-top: 35px;

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

.office-details div {
    padding: 20px 10px;

    border-right: 1px solid var(--line);
}

.office-details div:last-child {
    border-right: 0;
}

.office-details strong {
    display: block;

    margin-bottom: 6px;

    color: var(--gold);

    font-size: 12px;
}

.office-details span {
    color: var(--navy);

    font-weight: 700;
}


/* =========================================================
   VISION
   ========================================================= */

.vision-section {
    background: var(--paper);
}

.vision-header {
    display: grid;
    grid-template-columns: 1fr 0.7fr;

    gap: 100px;

    align-items: end;

    margin-bottom: 65px;
}

.vision-header > p {
    margin: 0;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.8;
}

.vision-grid {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;

    gap: 0;

    background: var(--navy);
    color: #fff;
}

.vision-image {
    min-height: 620px;
}

.vision-image img {
    width: 100%;
    height: 100%;

    min-height: 620px;

    object-fit: cover;
}

.vision-copy {
    padding: 65px 55px;
}

.vision-number {
    color: var(--gold-light);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;
}

.vision-copy h3 {
    margin: 8px 0 5px;

    font:
        600 30px
        "Playfair Display",
        Georgia,
        serif;
}

.vision-copy p {
    margin: 0 0 30px;

    color: #b7c1d1;

    font-size: 15px;
    line-height: 1.75;
}


/* =========================================================
   BELIEFS
   ========================================================= */

.about-beliefs {
    padding: 120px 0;

    background: var(--cream);
}

.about-beliefs .section-heading {
    max-width: 800px;

    margin-bottom: 60px;

    margin-left: 0;

    text-align: left;
}

.about-beliefs .section-heading h2 {
    margin: 0;

    font:
        700 clamp(42px, 4.5vw, 62px) / 1.05
        "Playfair Display",
        Georgia,
        serif;
}

.about-beliefs .section-heading h2 span {
    display: block;

    color: var(--gold);
}

.belief-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);

    border-top: 1px solid #d9d1c3;
    border-bottom: 1px solid #d9d1c3;
}

.belief-card {
    padding: 32px 28px;

    min-height: 245px;

    border-right: 1px solid #d9d1c3;
}

.belief-card:last-child {
    border-right: 0;
}

.belief-card > span {
    color: var(--gold);

    font-size: 12px;
    font-weight: 700;

    letter-spacing: 2px;
}

.belief-card h3 {
    margin: 55px 0 10px;

    color: var(--navy);

    font:
        600 27px
        "Playfair Display",
        Georgia,
        serif;
}

.belief-card p {
    margin: 0;

    color: var(--muted);

    font-size: 14px;
    line-height: 1.7;
}


/* =========================================================
   CTA
   ========================================================= */

.about-cta {
    padding: 90px 0;

    background: var(--navy);
    color: #fff;
}

.about-cta-inner {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 50px;
}

.about-cta h2 {
    max-width: 850px;

    margin: 0;

    font:
        700 clamp(40px, 5vw, 68px) / 1.03
        "Playfair Display",
        Georgia,
        serif;

    letter-spacing: -2px;
}

.about-cta h2 em {
    display: block;

    color: var(--gold-light);

    font-style: normal;
}


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

@media (max-width: 1000px) {

    .about-intro-grid,
    .office-grid,
    .vision-header,
    .vision-grid {
        grid-template-columns: 1fr;
    }

    .office-grid {
        gap: 55px;
    }

    .vision-header {
        gap: 25px;
    }

    .vision-image,
    .vision-image img {
        min-height: 450px;
    }

    .belief-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .belief-card:nth-child(2) {
        border-right: 0;
    }

    .belief-card:nth-child(n + 3) {
        border-top: 1px solid #d9d1c3;
    }

    .about-cta-inner {
        align-items: flex-start;
        flex-direction: column;
    }

}


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

@media (max-width: 850px) {

    .about-hero {
        height: calc(100svh - 72px);
        min-height: 600px;
    }

    .about-hero h1 {
        font-size: clamp(46px, 10vw, 64px);
    }

    .about-hero-content > p:last-child {
        font-size: 16px;
    }

    .about-office {
        padding: 85px 0;
    }

    .office-main-image {
        height: 450px;
    }

    .vision-copy {
        padding: 50px 30px;
    }

    .about-beliefs {
        padding: 85px 0;
    }

}


@media (max-width: 560px) {

    .about-hero {
        min-height: 560px;
    }

    .about-intro-grid {
        gap: 35px;
    }

    .about-large-text {
        font-size: 20px;
    }

    .office-main-image,
    .vision-image,
    .vision-image img {
        min-height: 350px;
        height: 350px;
    }

    .office-caption {
        left: 15px;
        right: 15px;
        bottom: 15px;
    }

    .office-details {
        grid-template-columns: 1fr;
    }

    .office-details div {
        border-right: 0;
        border-bottom: 1px solid var(--line);
    }

    .office-details div:last-child {
        border-bottom: 0;
    }

    .belief-grid {
        grid-template-columns: 1fr;
    }

    .belief-card,
    .belief-card:nth-child(2) {
        border-right: 0;
    }

    .belief-card:nth-child(n + 2) {
        border-top: 1px solid #d9d1c3;
    }

    .belief-card h3 {
        margin-top: 35px;
    }

    .about-cta {
        padding: 70px 0;
    }

    .about-cta h2 {
        font-size: 42px;
    }

}

/* =========================================================
   MOBILE NAVBAR FIX
   ========================================================= */

@media (max-width: 850px) {

    .site-header {
        position: sticky;
        top: 0;
        height: 72px;
        z-index: 1000;
    }

    .header-inner {
        width: 100%;
        height: 100%;

        padding-left: 0;
        padding-right: 12px;

        margin: 0;

        display: flex;
        align-items: center;

        gap: 0;
    }

    /* ---------- LOGO ---------- */

    .brand {
        width: 150px;
        height: 58px;

        flex: 0 0 150px;

        margin: 0 auto 0 0;

        display: flex;
        align-items: center;

        overflow: visible;
    }

    .brand img {
        width: 100%;
        height: 100%;

        object-fit: contain;
        object-position: left center;

        transform: scale(1.05);
        transform-origin: left center;
    }

    /* ---------- MENU BUTTON ---------- */

    .menu-toggle {
        display: block;

        width: 46px;
        height: 46px;

        flex: 0 0 46px;

        margin: 0 0 0 auto;

        padding: 10px;

        position: relative;
        z-index: 1100;

        border: 1px solid var(--line);
        border-radius: 4px;

        background: rgba(255, 253, 249, 0.95);
    }

    /* ---------- MOBILE MENU ---------- */

    .main-nav {
        position: absolute !important;

        top: 100% !important;
        left: 0 !important;
        right: 0 !important;

        width: 100% !important;
        max-width: none !important;

        height: auto;

        display: grid !important;

        grid-template-columns: 1fr;

        gap: 0 !important;

        padding: 8px 20px 18px !important;

        margin: 0 !important;

        background: rgba(255, 253, 249, 0.98) !important;

        border: 0 !important;
        border-radius: 0 !important;

        box-shadow:
            0 18px 35px rgba(12, 35, 70, 0.12) !important;

        backdrop-filter: blur(18px);
        -webkit-backdrop-filter: blur(18px);

        transform: translateY(-10px) !important;

        opacity: 0;
        visibility: hidden;
        pointer-events: none;

        transition:
            opacity 0.25s ease,
            transform 0.25s ease,
            visibility 0.25s ease;
    }

    .main-nav.is-open {
        transform: translateY(0) !important;

        opacity: 1;
        visibility: visible;
        pointer-events: auto;
    }

    /* ---------- NAV LINKS ---------- */

    .main-nav a {
        width: 100% !important;
        height: 52px;

        display: flex !important;
        align-items: center;
        justify-content: flex-start;

        padding: 0 16px !important;

        margin: 0;

        border-radius: 0 !important;

        border-bottom: 1px solid var(--line);

        background: transparent !important;

        color: var(--navy);

        font-size: 15px;

        text-align: left;

        transform: none !important;
    }

    .main-nav a:last-child {
        border-bottom: 0;
    }

    .main-nav a:hover {
        background: rgba(201, 150, 62, 0.08) !important;
    }

    /* Active item */

    .main-nav a.active {
        background: rgba(201, 150, 62, 0.08) !important;

        color: var(--navy);

        box-shadow: none !important;
    }

    .main-nav a.active::before {
        content: "";

        position: absolute;

        left: 5px;
        bottom: 50%;

        width: 4px;
        height: 22px;

        border-radius: 999px;

        background: var(--gold);

        transform: translateY(50%);
    }

    .main-nav a::after {
        display: none !important;
    }
}


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

@media (max-width: 560px) {

    .site-header {
        height: 66px;
    }

    .header-inner {
        padding-right: 10px;
    }

    .brand {
        width: 145px;
        height: 54px;

        flex-basis: 145px;
    }

    .menu-toggle {
        width: 44px;
        height: 44px;

        flex-basis: 44px;
    }

    .main-nav {
        top: 100% !important;
    }
}
/* =========================================================
   PREMIUM WHY CHOOSE CARDS
   ========================================================= */

.feature-grid {
    gap: 16px;

    border: 0;

    background: transparent;
}

.feature {
    position: relative;

    min-height: 300px;

    padding: 34px 30px;

    overflow: hidden;

    background:
        linear-gradient(
            145deg,
            rgba(255, 255, 255, 0.98),
            rgba(247, 243, 235, 0.94)
        );

    border: 1px solid rgba(12, 35, 70, 0.10) !important;

    border-radius: 18px;

    isolation: isolate;

    transform-style: preserve-3d;

    transition:
        transform 0.35s cubic-bezier(.2,.8,.2,1),
        box-shadow 0.35s ease,
        border-color 0.35s ease;
}


/* Cursor-following glow */

.feature::before {
    content: "";

    position: absolute;

    width: 260px;
    height: 260px;

    left: var(--mx, 50%);
    top: var(--my, 50%);

    transform: translate(-50%, -50%);

    background:
        radial-gradient(
            circle,
            rgba(201, 150, 62, 0.18) 0%,
            rgba(201, 150, 62, 0.08) 28%,
            transparent 68%
        );

    opacity: 0;

    pointer-events: none;

    transition: opacity 0.35s ease;

    z-index: -1;
}


/* Soft navy depth */

.feature::after {
    content: "";

    position: absolute;
    inset: 0;

    border-radius: inherit;

    background:
        linear-gradient(
            135deg,
            rgba(12, 35, 70, 0.04),
            transparent 45%
        );

    pointer-events: none;

    z-index: -1;
}


/* Hover */

.feature:hover {
    transform:
        translateY(-10px)
        rotateX(2deg)
        rotateY(-2deg);

    border-color:
        rgba(201, 150, 62, 0.42) !important;

    box-shadow:
        0 22px 45px rgba(12, 35, 70, 0.10),
        0 0 35px rgba(201, 150, 62, 0.08);
}

.feature:hover::before {
    opacity: 1;
}


/* =========================================================
   NUMBER
   ========================================================= */

.feature-no {
    position: relative;

    width: 42px;
    height: 42px;

    display: grid;
    place-items: center;

    margin-bottom: 55px;

    border-radius: 50%;

    background:
        linear-gradient(
            135deg,
            var(--navy),
            var(--navy-2)
        );

    color: var(--gold-light);

    font-size: 11px;
    font-weight: 700;

    letter-spacing: 1px;

    box-shadow:
        0 8px 20px rgba(12, 35, 70, 0.16);

    transition:
        transform 0.35s ease,
        box-shadow 0.35s ease;
}

.feature:hover .feature-no {
    transform:
        translateZ(25px)
        rotate(8deg)
        scale(1.08);

    box-shadow:
        0 10px 25px rgba(12, 35, 70, 0.20),
        0 0 20px rgba(201, 150, 62, 0.18);
}


/* =========================================================
   TITLE
   ========================================================= */

.feature h3 {
    position: relative;

    margin: 0 0 12px;

    color: var(--navy);

    font-size: 20px;
    font-weight: 700;

    transform: translateZ(16px);

    transition:
        color 0.3s ease,
        transform 0.3s ease;
}

.feature:hover h3 {
    color: #153a70;

    transform: translateZ(22px);
}


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

.feature p {
    position: relative;

    margin: 0;

    color: #67748a;

    font-size: 15px;
    line-height: 1.75;

    transform: translateZ(10px);
}


/* =========================================================
   GOLD ACCENT LINE
   ========================================================= */

.feature > h3::after {
    content: "";

    display: block;

    width: 0;
    height: 2px;

    margin-top: 10px;

    background:
        linear-gradient(
            90deg,
            var(--gold),
            var(--gold-light)
        );

    border-radius: 999px;

    transition:
        width 0.35s ease;
}

.feature:hover > h3::after {
    width: 55px;
}


/* =========================================================
   FIRST CARD SPECIAL ACCENT
   ========================================================= */

.feature:first-child {
    background:
        linear-gradient(
            145deg,
            rgba(12, 35, 70, 0.98),
            rgba(16, 46, 89, 0.96)
        );

    color: #fff;
}

.feature:first-child h3 {
    color: #fff;
}

.feature:first-child p {
    color: #c2cddd;
}

.feature:first-child::after {
    background:
        linear-gradient(
            135deg,
            rgba(255,255,255,0.05),
            transparent 55%
        );
}

.feature:first-child:hover {
    box-shadow:
        0 25px 50px rgba(12, 35, 70, 0.22),
        0 0 40px rgba(201, 150, 62, 0.10);
}


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

@media (hover: none), (pointer: coarse) {

    .feature {
        transform: none !important;
    }

    .feature::before {
        display: none;
    }

    .feature:hover {
        transform: translateY(-4px) !important;
    }

}


/* =========================================================
   REDUCED MOTION
   ========================================================= */

@media (prefers-reduced-motion: reduce) {

    .feature,
    .feature-no,
    .feature h3,
    .feature > h3::after {
        transition: none;
    }

    .feature:hover {
        transform: none;
    }
}

/* =========================================================
   PRIVACY / LEGAL HERO
   ========================================================= */

.legal-hero {
    padding: 75px 0;

    background: var(--navy);
    color: #fff;
}

.legal-hero-inner {
    display: grid;

    grid-template-columns: 1fr 0.75fr;

    gap: 80px;

    align-items: center;
}

.legal-hero-content h1 {
    margin: 0;

    font:
        700 clamp(48px, 5.5vw, 76px) / 1.05
        "Playfair Display",
        Georgia,
        serif;

    letter-spacing: -2px;
}

.legal-hero-content h1 em {
    color: var(--gold-light);
    font-style: normal;
}

.legal-hero-photo {
    height: 300px;

    overflow: hidden;

    border-radius: 4px;

    border: 1px solid rgba(255, 255, 255, 0.14);

    box-shadow:
        0 25px 60px rgba(0, 0, 0, 0.20);
}

.legal-hero-photo img {
    width: 100%;
    height: 100%;

    object-fit: cover;

    transition: transform 0.5s ease;
}

.legal-hero-photo:hover img {
    transform: scale(1.04);
}


@media (max-width: 850px) {

    .legal-hero {
        padding: 65px 0;
    }

    .legal-hero-inner {
        grid-template-columns: 1fr;
        gap: 35px;
    }

    .legal-hero-photo {
        height: 280px;
    }
}


@media (max-width: 560px) {

    .legal-hero {
        padding: 55px 0;
    }

    .legal-hero-content h1 {
        font-size: 46px;
    }

    .legal-hero-photo {
        height: 220px;
    }
}
/* =========================================
   GERMANY SECTION BACKGROUND
   ========================================= */

#germany.germany{
    position:relative !important;
    overflow:hidden !important;

    background-image:
        linear-gradient(
            90deg,
            rgba(247,243,235,.90) 0%,
            rgba(247,243,235,.76) 40%,
            rgba(247,243,235,.50) 70%,
            rgba(247,243,235,.25) 100%
        ),
        url("../images/germany-bg.jpg") !important;

    background-size:cover !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    background-attachment:scroll !important;
}

#germany.germany::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(12,35,70,.06);
    pointer-events:none;
}

#germany .container{
    position:relative;
    z-index:2;
}

#germany .opportunity{
    background:rgba(255,253,249,.70) !important;
    border:1px solid rgba(255,255,255,.75);
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(8px);
    box-shadow:0 18px 45px rgba(12,35,70,.12);
}

#germany .opportunity:hover{
    transform:translateY(-7px);
    background:rgba(255,253,249,.84) !important;
}

@media(max-width:850px){
    #germany.germany{
        background-image:
            linear-gradient(
                rgba(247,243,235,.82),
                rgba(247,243,235,.90)
            ),
            url("../images/germany-bg.jpg") !important;

        background-size:cover !important;
        background-position:center !important;
        background-attachment:scroll !important;
    }
}
@media(max-width:850px){
    #germany.germany{
        background-image:
            linear-gradient(
                rgba(247,243,235,.58),
                rgba(247,243,235,.68)
            ),
            url("../images/germany-bg.jpg") !important;

        background-size:cover !important;
        background-position:center !important;
        background-attachment:scroll !important;
    }

    #germany .opportunity{
        background:rgba(255,253,249,.55) !important;
        backdrop-filter:blur(6px);
        -webkit-backdrop-filter:blur(6px);
    }
}

/* =========================================
   FAQ — NAVY QUESTION CARDS
   ========================================= */

.faq-item{
    background:var(--navy) !important;
    border:1px solid rgba(255,255,255,.08) !important;
    border-radius:4px !important;
    margin-bottom:14px !important;
    overflow:hidden;
    box-shadow:0 12px 30px rgba(12,35,70,.10);
    transition:
        transform .3s ease,
        box-shadow .3s ease,
        background .3s ease;
}

.faq-item:hover{
    transform:translateY(-3px);
    box-shadow:0 18px 38px rgba(12,35,70,.18);
}

/* Question */
.faq-question{
    color:#fff !important;
    background:transparent !important;
    padding:24px 26px !important;
}

/* Plus button */
.faq-question button,
.faq-toggle{
    color:var(--gold) !important;
    border-color:var(--gold) !important;
    background:transparent !important;
}

/* Answer area */
.faq-answer{
    background:#fff !important;
    color:var(--ink) !important;
    border-top:1px solid rgba(201,150,62,.25);
    padding:20px 26px !important;
}

/* Open state */
.faq-item.active,
.faq-item.open{
    background:var(--navy-2) !important;
}

.faq-item.active .faq-question,
.faq-item.open .faq-question{
    color:#fff !important;
}

/* =========================================
   FAQ — REMOVE WHITE SPACE WHEN CLOSED
   ========================================= */

.faq-item{
    background:var(--navy) !important;
    margin-bottom:16px !important;
    border-radius:4px !important;
    overflow:hidden !important;
}

/* Question row */
.faq-question{
    background:var(--navy) !important;
    color:#fff !important;
    min-height:92px;
    display:flex;
    align-items:center;
    justify-content:space-between;
}

/* Hide answer completely when closed */
.faq-answer[hidden]{
    display:none !important;
}

/* Answer only appears when opened */
.faq-answer{
    background:#fff;
    color:var(--ink);
    padding:22px 26px;
    border-top:1px solid rgba(201,150,62,.25);
}

.faq-answer{
    display:none;
}

.faq-item.is-open .faq-answer,
.faq-item.open .faq-answer,
.faq-item.active .faq-answer{
    display:block;
}

/* =========================================================
   PROCESS — SCROLL REVEAL / PINNED SECTION
   ========================================================= */

.process{
    position:relative;
    min-height:420vh !important;

    /* Same Germany-style transparent background */
    background-image:
        linear-gradient(
            135deg,
            rgba(12,35,70,.90) 0%,
            rgba(12,35,70,.78) 48%,
            rgba(12,35,70,.66) 100%
        ),
        url("../images/germany-bg.jpg") !important;

    background-size:cover !important;
    background-position:center !important;
    background-repeat:no-repeat !important;
    background-attachment:scroll !important;

    overflow:clip;
    color:#fff;
}

/* Sticky visual area */
.process > .container{
    position:sticky !important;
    top:92px;
    height:100vh;
    min-height:680px;

    display:flex;
    flex-direction:column;
    justify-content:center;

    padding-top:70px;
    padding-bottom:70px;

    overflow:hidden;
}

/* Keep heading above the animation */
.process .section-heading{
    position:relative;
    z-index:10;
    flex:0 0 auto;
    margin-bottom:42px;
}

/* Cards grid */
.process-grid{
    position:relative;
    z-index:5;

    display:grid !important;
    grid-template-columns:repeat(3,minmax(0,1fr)) !important;

    border-top:1px solid rgba(255,255,255,.18) !important;
    border-left:1px solid rgba(255,255,255,.18) !important;

    overflow:visible;
}

/* Individual cards */
.process-step{
    position:relative;

    min-height:220px !important;

    border-right:1px solid rgba(255,255,255,.18) !important;
    border-bottom:1px solid rgba(255,255,255,.18) !important;

    background:rgba(12,35,70,.22) !important;

    opacity:0;
    transform:translate3d(0,110vh,0) scale(.94);

    transition:
        transform .75s cubic-bezier(.22,1,.36,1),
        opacity .55s ease,
        background .3s ease,
        box-shadow .3s ease;

    will-change:transform,opacity;
}

/* Glass effect */
.process-step::before{
    content:"";
    position:absolute;
    inset:0;
    background:rgba(255,255,255,.025);
    backdrop-filter:blur(4px);
    -webkit-backdrop-filter:blur(4px);
    pointer-events:none;
}

/* Revealed state */
.process-step.process-visible{
    opacity:1;
    transform:translate3d(0,0,0) scale(1);
}

/* Nice hover after revealed */
.process-step.process-visible:hover{
    background:rgba(255,255,255,.065) !important;
    box-shadow:
        inset 0 0 0 1px rgba(201,150,62,.18),
        0 15px 35px rgba(0,0,0,.14);
}

/* Gold number */
.process-step > span{
    position:relative;
    z-index:2;
}

/* Card content above glass layer */
.process-step h3,
.process-step p{
    position:relative;
    z-index:2;
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media(max-width:850px){

    .process{
        min-height:auto !important;

        background-image:
            linear-gradient(
                rgba(12,35,70,.60),
                rgba(12,35,70,.78)
            ),
            url("../images/germany-bg.jpg") !important;

        background-size:cover !important;
        background-position:center !important;
        background-attachment:scroll !important;
    }

    .process > .container{
        position:relative !important;
        top:auto;

        height:auto;
        min-height:auto;

        padding-top:90px;
        padding-bottom:90px;

        overflow:visible;
    }

    .process-grid{
        grid-template-columns:1fr !important;
    }

    .process-step{
        min-height:220px !important;

        opacity:0;
        transform:translate3d(0,100px,0) scale(.97);

        transition:
            transform .7s cubic-bezier(.22,1,.36,1),
            opacity .55s ease,
            background .3s ease;
    }

    .process-step.process-visible{
        opacity:1;
        transform:translate3d(0,0,0) scale(1);
    }
}


/* Reduced motion */
@media(prefers-reduced-motion:reduce){

    .process{
        min-height:auto !important;
    }

    .process > .container{
        position:relative !important;
        height:auto;
    }

    .process-step{
        opacity:1 !important;
        transform:none !important;
        transition:none !important;
    }
}

/* =========================================================
   PROCESS — NAVBAR SAFE STICKY POSITION
   ========================================================= */

@media(min-width:851px){

    .process{
        min-height:420vh !important;
        position:relative;
    }

    .process > .container{
        position:sticky !important;

        /* KEEP CONTENT BELOW NAVBAR */
        top:92px !important;

        /* viewport minus navbar */
        height:calc(100vh - 92px) !important;

        min-height:620px;

        display:flex;
        flex-direction:column;
        justify-content:center;

        padding-top:50px !important;
        padding-bottom:50px !important;

        overflow:hidden;
    }

    .process .section-heading{
        position:relative;
        z-index:20;
        margin-bottom:38px;
    }

    .process-grid{
        position:relative;
        z-index:10;
    }
}

/* =========================================================
   PROCESS — MOBILE CARD STACK
   ========================================================= */

@media(max-width:850px){

    .process{
        position:relative !important;
        min-height:auto !important;

        background-image:
            linear-gradient(
                rgba(12,35,70,.62),
                rgba(12,35,70,.78)
            ),
            url("../images/germany-bg.jpg") !important;

        background-size:cover !important;
        background-position:center !important;
        background-attachment:scroll !important;

        padding:90px 0 120px !important;
    }


    /* Disable desktop sticky container */
    .process > .container{
        position:relative !important;
        top:auto !important;

        height:auto !important;
        min-height:auto !important;

        display:block !important;

        overflow:visible !important;

        padding-top:0 !important;
        padding-bottom:0 !important;
    }


    /* Heading stays normal */
    .process .section-heading{
        position:relative;
        z-index:20;

        margin-bottom:45px;
    }


    /* One-column stack */
    .process-grid{
        display:block !important;

        border:0 !important;

        position:relative;
        overflow:visible;
    }


    /* =========================================
       STACKED CARDS
       ========================================= */

    .process-step{
        position:sticky !important;

        /*
         * All cards stop at the same point,
         * so the next card slides over the previous one.
         */
        top:82px !important;

        min-height:235px !important;

        margin:0 0 18px !important;

        padding:30px 26px !important;

        background:
            rgba(12,35,70,.88) !important;

        border:
            1px solid rgba(255,255,255,.18) !important;

        backdrop-filter:blur(12px);
        -webkit-backdrop-filter:blur(12px);

        box-shadow:
            0 18px 40px rgba(0,0,0,.18);

        /*
         * Override the desktop animation
         */
        opacity:1 !important;
        transform:none !important;

        transition:
            box-shadow .3s ease,
            background .3s ease !important;
    }


    /*
     * Each later card sits ABOVE the previous card.
     */
    .process-step:nth-child(1){
        z-index:1;
    }

    .process-step:nth-child(2){
        z-index:2;
    }

    .process-step:nth-child(3){
        z-index:3;
    }

    .process-step:nth-child(4){
        z-index:4;
    }

    .process-step:nth-child(5){
        z-index:5;
    }

    .process-step:nth-child(6){
        z-index:6;
    }


    /* Card content */
    .process-step > span{
        position:relative;
        z-index:2;
    }

    .process-step h3{
        position:relative;
        z-index:2;

        margin-top:32px !important;
    }

    .process-step p{
        position:relative;
        z-index:2;
    }
}

/* =========================================================
   PROCESS — COMPACT CARDS
   ========================================================= */

/* Laptop / Desktop */
@media(min-width:851px){

    .process-step{
        min-height:180px !important;
        padding:28px 30px !important;
    }

    .process-step h3{
        margin:28px 0 8px !important;
        font-size:22px !important;
        line-height:1.2;
    }

    .process-step p{
        font-size:12px !important;
        line-height:1.6 !important;
    }

    .process-grid{
        margin-top:10px !important;
    }
}


/* Mobile */
@media(max-width:850px){

    .process-step{
        min-height:175px !important;
        padding:24px 22px !important;
        margin-bottom:14px !important;
    }

    .process-step h3{
        margin:24px 0 7px !important;
        font-size:20px !important;
        line-height:1.25;
    }

    .process-step p{
        font-size:13px !important;
        line-height:1.55 !important;
    }

    .process-step > span{
        font-size:11px !important;
    }
}

/* About — tighter top spacing */
.about-vision{
    padding-top:60px !important;
}

/* =========================================
   FOOTER SOCIAL ICONS
   ========================================= */

.footer-socials{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:22px;
}

.footer-socials a{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    color:var(--white);
    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.14);
    border-radius:50%;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.footer-socials a svg{
    width:18px;
    height:18px;
    fill:currentColor;
}

.footer-socials a:hover{
    transform:translateY(-4px);

    background:var(--gold);
    color:var(--navy);
    border-color:var(--gold);

    box-shadow:
        0 10px 24px rgba(201,150,62,.22);
}

@media(max-width:560px){
    .footer-socials{
        margin-top:18px;
    }

    .footer-socials a{
        width:40px;
        height:40px;
    }
}

/* =========================================
   FOOTER SOCIAL ICONS
   ========================================= */

.footer-socials{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:22px;
}

.footer-socials a{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    color:var(--white);
    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.14);
    border-radius:50%;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.footer-socials a svg{
    width:18px;
    height:18px;
    fill:currentColor;
}

.footer-socials a:hover{
    transform:translateY(-4px);
    background:var(--gold);
    color:var(--navy);
    border-color:var(--gold);

    box-shadow:0 10px 24px rgba(201,150,62,.22);
}

@media(max-width:560px){

    .footer-socials{
        margin-top:18px;
    }

    .footer-socials a{
        width:40px;
        height:40px;
    }
}
/* =========================================
   FOOTER SOCIAL LINKS
   ========================================= */

.footer-socials{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:22px;
}

.footer-socials a{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    color:var(--white);
    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.14);
    border-radius:50%;

    text-decoration:none;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.footer-socials a svg{
    width:18px;
    height:18px;
    display:block;
    fill:currentColor;
}

.footer-socials a:hover{
    transform:translateY(-4px);
    background:var(--gold);
    color:var(--navy);
    border-color:var(--gold);
    box-shadow:0 10px 24px rgba(201,150,62,.22);
}

/* Mobile */
@media(max-width:560px){

    .footer-socials{
        margin-top:18px;
        gap:10px;
    }

    .footer-socials a{
        width:40px;
        height:40px;
    }

    .footer-socials a svg{
        width:17px;
        height:17px;
    }
}

/* =========================================
   FOOTER SOCIAL ICONS
   ========================================= */

.footer-socials{
    display:flex;
    align-items:center;
    gap:12px;
    margin-top:22px;
}

.footer-socials a{
    width:42px;
    height:42px;

    display:grid;
    place-items:center;

    color:var(--white);
    background:rgba(255,255,255,.06);

    border:1px solid rgba(255,255,255,.14);
    border-radius:50%;

    text-decoration:none;

    transition:
        transform .25s ease,
        background .25s ease,
        color .25s ease,
        border-color .25s ease,
        box-shadow .25s ease;
}

.footer-socials a svg{
    width:18px;
    height:18px;
    fill:currentColor;
}

.footer-socials a:hover{
    transform:translateY(-4px);
    background:var(--gold);
    color:var(--navy);
    border-color:var(--gold);
    box-shadow:0 10px 24px rgba(201,150,62,.22);
}

@media(max-width:560px){

    .footer-socials{
        gap:10px;
        margin-top:18px;
    }

    .footer-socials a{
        width:40px;
        height:40px;
    }

    .footer-socials a svg{
        width:17px;
        height:17px;
    }
}


/* =========================================================
   FINAL MOBILE PROCESS FIX
   ========================================================= */

@media (max-width: 850px){

    .process{
        padding:110px 0 100px !important;
    }

    .process > .container{
        width:calc(100% - 32px) !important;
        max-width:620px !important;
        margin:0 auto !important;

        padding:0 !important;
        position:relative !important;
        top:auto !important;

        height:auto !important;
        min-height:auto !important;

        display:block !important;
        overflow:visible !important;
    }

    /* Center the heading */
    .process .section-heading{
        width:100% !important;
        max-width:560px !important;

        margin:0 auto 42px !important;

        text-align:center !important;

        position:relative !important;
        z-index:50 !important;
    }

    /* Center the cards */
    .process-grid{
        display:block !important;

        width:100% !important;
        max-width:560px !important;

        margin:0 auto !important;

        border:0 !important;
        position:relative !important;

        overflow:visible !important;
    }

    /* Smaller centered cards */
    .process-step{
        width:calc(100% - 16px) !important;
        margin:0 auto 18px !important;

        min-height:175px !important;
        padding:24px 22px !important;

        position:sticky !important;
        top:82px !important;

        opacity:1 !important;
        transform:none !important;

        border:1px solid rgba(255,255,255,.16) !important;
        border-radius:8px !important;

        background:rgba(12,35,70,.90) !important;

        box-shadow:0 18px 40px rgba(0,0,0,.20);

        backdrop-filter:blur(12px);
        -webkit-backdrop-filter:blur(12px);
    }

    .process-step h3{
        margin:24px 0 8px !important;
        font-size:20px !important;
        line-height:1.25 !important;
    }

    .process-step p{
        font-size:13px !important;
        line-height:1.55 !important;
    }

    .process-step:nth-child(1){z-index:1;}
    .process-step:nth-child(2){z-index:2;}
    .process-step:nth-child(3){z-index:3;}
    .process-step:nth-child(4){z-index:4;}
    .process-step:nth-child(5){z-index:5;}
    .process-step:nth-child(6){z-index:6;}
}

@media (max-width:850px){

    .process{
        position:relative !important;
        min-height:auto !important;
        padding:90px 0 100px !important;
        overflow:visible !important;

        background-image:
            linear-gradient(
                rgba(12,35,70,.62),
                rgba(12,35,70,.78)
            ),
            url("../images/germany-bg.jpg") !important;

        background-size:cover !important;
        background-position:center !important;
        background-attachment:scroll !important;
    }

    .process > .container{
        position:relative !important;
        top:auto !important;
        width:calc(100% - 32px) !important;
        max-width:620px !important;
        margin:0 auto !important;

        height:auto !important;
        min-height:auto !important;
        display:block !important;

        padding:0 !important;
        overflow:visible !important;
    }


    /* =========================================
       HEADING — ALWAYS ABOVE THE CARDS
       ========================================= */

    .process .section-heading{
        position:sticky !important;

        /* below mobile navbar */
        top:78px !important;

        z-index:100 !important;

        width:100% !important;
        max-width:560px !important;

        margin:0 auto 35px !important;
        padding:12px 0 20px !important;

        text-align:center !important;

        /* prevents cards from visually passing through heading */
        background:rgba(12,35,70,.94) !important;

        backdrop-filter:blur(10px);
        -webkit-backdrop-filter:blur(10px);
    }

    .process .section-heading h2{
        margin:0 auto !important;
    }


    /* =========================================
       CARDS
       ========================================= */

    .process-grid{
        display:block !important;

        width:100% !important;
        max-width:560px !important;

        margin:0 auto !important;

        border:0 !important;
        position:relative !important;

        overflow:visible !important;
    }

    .process-step{
        position:sticky !important;

        /*
         * Cards start BELOW the heading,
         * not directly below the navbar.
         */
        top:210px !important;

        width:calc(100% - 16px) !important;

        margin:0 auto 18px !important;

        min-height:175px !important;

        padding:24px 22px !important;

        opacity:1 !important;
        transform:none !important;

        background:rgba(12,35,70,.90) !important;

        border:1px solid rgba(255,255,255,.16) !important;
        border-radius:8px !important;

        box-shadow:0 18px 40px rgba(0,0,0,.20);

        backdrop-filter:blur(12px);
        -webkit-backdrop-filter:blur(12px);
    }


    /* Stack order */
    .process-step:nth-child(1){z-index:1;}
    .process-step:nth-child(2){z-index:2;}
    .process-step:nth-child(3){z-index:3;}
    .process-step:nth-child(4){z-index:4;}
    .process-step:nth-child(5){z-index:5;}
    .process-step:nth-child(6){z-index:6;}


    .process-step h3{
        margin:24px 0 8px !important;
        font-size:20px !important;
        line-height:1.25 !important;
    }

    .process-step p{
        font-size:13px !important;
        line-height:1.55 !important;
    }
}

/* =========================================================
   PAGE HERO CONSISTENCY
   DO NOT CHANGE HOME HERO
   ========================================================= */

/* HOME — keep original cinematic hero */
.hero{
    height:min(760px, calc(100vh - 86px)) !important;
    min-height:650px !important;
    max-height:none !important;
}


/* OTHER PAGE HEROES */
@media(min-width:851px){

    .page-hero,
    .legal-hero,
    .contact-hero,
    .about-hero{
        min-height:500px !important;
        height:500px !important;
        max-height:500px !important;

        overflow:hidden !important;

        background-size:cover !important;
        background-position:center center !important;
        background-repeat:no-repeat !important;
    }
}


/* OTHER PAGE HEROES — MOBILE */
@media(max-width:850px){

    .page-hero,
    .legal-hero,
    .contact-hero,
    .about-hero{
        min-height:390px !important;
        height:390px !important;
        max-height:390px !important;

        overflow:hidden !important;

        background-size:cover !important;
        background-position:center center !important;
        background-repeat:no-repeat !important;
    }
}


/* Small phones */
@media(max-width:560px){

    .page-hero,
    .legal-hero,
    .contact-hero,
    .about-hero{
        min-height:360px !important;
        height:360px !important;
        max-height:360px !important;
    }
}
/* =========================================================
   PREMIUM CURVED CARDS
   ========================================================= */

.feature,
.service-group,
.level,
.fee-box,
.opportunity,
.process-step,
.team-card,
.story,
.testimonial-card,
.faq-item,
.program-details,
.schedule-box,
.contact-card,
.info-card,
.office-card,
.team-photo,
.student-image{
    border-radius:18px !important;
    overflow:hidden;
}

/* Slightly smaller radius for compact elements */
.mini-services span,
.skills span{
    border-radius:999px !important;
}

/* FAQ question card */
.faq-question{
    border-radius:14px !important;
}

/* Buttons */
.btn{
    border-radius:999px !important;
}

/* Fix About intro section */
.intro{
    height:auto !important;
    min-height:0 !important;
    max-height:none !important;
    overflow:visible !important;
}

/* =========================================================
   PREMIUM TEAM CARDS
   ========================================================= */

.team-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}

.team-card {
    position: relative;
    min-height: 520px;
    overflow: hidden;
    border: 1px solid rgba(12, 35, 70, 0.10);
    border-radius: 24px;

    background:
        var(--team-image) center / cover no-repeat;

    box-shadow: 0 22px 60px rgba(12, 35, 70, 0.12);
    isolation: isolate;

    transition:
        transform 0.45s cubic-bezier(.22, 1, .36, 1),
        box-shadow 0.45s ease;
}

/* Image layer */
.team-card::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -2;

    background:
        var(--team-image) center / cover no-repeat;

    transform: scale(1);

    transition:
        transform 0.8s cubic-bezier(.22, 1, .36, 1);
}

/* Dark gradient over image */
.team-card::after {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;

    background:
        linear-gradient(
            180deg,
            rgba(7, 26, 52, 0.00) 20%,
            rgba(7, 26, 52, 0.12) 42%,
            rgba(7, 26, 52, 0.62) 70%,
            rgba(7, 26, 52, 0.96) 100%
        );
}

.team-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 32px 80px rgba(12, 35, 70, 0.20);
}

.team-card:hover::before {
    transform: scale(1.06);
}

.team-card-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    z-index: 2;

    padding: 34px 30px 30px;
    color: #fff;
}

.team-number {
    display: inline-grid;
    place-items: center;

    width: 38px;
    height: 38px;
    margin-bottom: 18px;

    border: 1px solid rgba(255, 255, 255, 0.28);
    border-radius: 50%;

    color: var(--gold-light);
    background: rgba(12, 35, 70, 0.28);

    font-size: 11px;
    font-weight: 700;
    letter-spacing: 1px;

    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}

.team-card h3 {
    margin: 0 0 5px;

    color: #fff;

    font:
        600 30px / 1.1
        "Playfair Display",
        Georgia,
        serif;
}

.team-card p {
    margin: 0;

    color: rgba(255, 255, 255, 0.72);
    font-size: 13px;
}

.team-card p strong {
    color: var(--gold-light);
    font-weight: 600;
}

/* Tablet */
@media (max-width: 1000px) {
    .team-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .team-card {
        min-height: 480px;
    }
}

/* Mobile */
@media (max-width: 560px) {
    .team-grid {
        grid-template-columns: 1fr;
        gap: 18px;
    }

    .team-card {
        min-height: 460px;
        border-radius: 20px;
    }

    .team-card-content {
        padding: 28px 24px 25px;
    }

    .team-card h3 {
        font-size: 27px;
    }
}

/* =========================================================
   CENTER STATS
   ========================================================= */

.stats-grid{
    display:grid;
    grid-template-columns:repeat(3, max-content);
    justify-content:center;
    justify-items:center;
    align-items:center;
    gap:80px;
}

.stat{
    text-align:center;
    border-right:0 !important;
    padding:8px 25px;
}

@media(max-width:560px){
    .stats-grid{
        grid-template-columns:1fr;
        gap:0;
    }

    .stat{
        width:100%;
    }
}

/* =========================================================
   CONTACT FORM SUCCESS POPUP
   ========================================================= */

.form-popup{
    position:fixed;
    inset:0;
    z-index:9999;

    display:flex;
    align-items:center;
    justify-content:center;

    padding:20px;

    opacity:0;
    visibility:hidden;

    transition:
        opacity .3s ease,
        visibility .3s ease;
}

.form-popup.is-open{
    opacity:1;
    visibility:visible;
}


/* Background */

.form-popup-overlay{
    position:absolute;
    inset:0;

    background:rgba(7,22,45,.65);

    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
}


/* Popup */

.form-popup-box{
    position:relative;
    z-index:1;

    width:min(480px,100%);

    padding:42px 36px 36px;

    background:var(--paper);

    border-radius:18px;

    text-align:center;

    box-shadow:
        0 30px 90px rgba(0,0,0,.28);

    transform:translateY(20px) scale(.97);

    transition:
        transform .4s cubic-bezier(.22,1,.36,1);
}

.form-popup.is-open .form-popup-box{
    transform:translateY(0) scale(1);
}


/* Success icon */

.form-popup-icon{
    width:64px;
    height:64px;

    margin:0 auto 22px;

    display:grid;
    place-items:center;

    border-radius:50%;

    background:var(--green);
    color:#fff;

    font-size:30px;
    font-weight:700;
}


/* Heading */

.form-popup-box .eyebrow{
    margin-bottom:10px;
}

.form-popup-box h3{
    margin:0 0 12px;

    color:var(--navy);

    font-family:"Playfair Display",Georgia,serif;

    font-size:28px;
    line-height:1.2;
}

.form-popup-box > p:not(.eyebrow){
    margin:0 auto 25px;

    max-width:360px;

    color:var(--muted);

    font-size:14px;
    line-height:1.65;
}


/* Close button */

.form-popup-close {
    position: absolute;
    top: 14px;
    right: 16px;

    width: 36px;
    height: 36px;

    border: 0;
    border-radius: 50%;

    background: transparent;
    color: var(--navy);

    font-size: 28px;
    line-height: 1;

    cursor: pointer;

    transition: all 0.2s ease;
}

.form-popup-close:hover {
    background: var(--cream);
    transform: rotate(90deg);
}



/* Done button */

.form-popup-box .btn{
    min-width:120px;
}


/* Mobile */

@media(max-width:560px){

    .form-popup{
        padding:16px;
    }

    .form-popup-box{
        padding:38px 24px 28px;
        border-radius:15px;
    }

    .form-popup-icon{
        width:56px;
        height:56px;
        font-size:26px;
        margin-bottom:18px;
    }

    .form-popup-box h3{
        font-size:24px;
    }

}