:root {
    --crimson: #b61d23;
    --rust: #7c2d12;
    --amber: #f59e0b;
    --cream: #fff7ed;
    --slate: #475569;
    --wine: #6b2a3b;
    --wine-deep: #4a1c29;
    --font-display: "Bricolage Grotesque", sans-serif;
    --font-body: "Poppins", sans-serif;
    --font-script: "Great Vibes", cursive;
    --max: 1120px;
}

body {
    margin: 0;
    font-family: var(--font-body);
    color: var(--slate);
    background: var(--cream);
    -webkit-font-smoothing: antialiased;
    overflow-x: hidden;
}

img, svg {
    display: block;
    max-width: 100%;
}
.wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 28px;
}
h1, h2, h3 {
    font-family: var(--font-display);
    color: var(--wine-deep);
    margin: 0;
    line-height: 1.08;
}

p {
    margin: 0;
}

.script {
    font-family: var(--font-script);
}

.reveal {
    opacity: 0;
    transform: translateY(26px);
    transition: opacity .8s ease, transform .8s ease;
}

    .reveal.in {
        opacity: 1;
        transform: translateY(0);
    }

@media (prefers-reduced-motion: reduce) {
    .reveal {
        opacity: 1;
        transform: none;
        transition: none;
    }

    html {
        scroll-behavior: auto;
    }
}


.wordmark {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 20px;
    color: var(--crimson);
    letter-spacing: .3px;
}

    .wordmark span {
        color: var(--rust);
    }

/* ---------- HERO ---------- */
.hero {
    position: relative;
    /*  background: #6e2534;*/
    color: var(--cream);
    padding: 50px 0 50px;
    overflow: hidden;
    background-image: url('../images/myimages/egua/eb1.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
}
    .hero::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        background: #6e2534d9;
    }
section.eguabanner .hero-in {
    position: relative;
    z-index: 2;
    max-width: 1180px;
    display: block;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12.5px;
    letter-spacing: .22em;
    text-transform: uppercase;
    color: var(--amber);
    margin-bottom: 26px;
}

    .eyebrow::before {
        content: "";
        width: 30px;
        height: 1px;
        background: var(--amber);
    }

.hero h1 {
    font-size: 71px;
    font-weight: 700;
    color: var(--cream);
    line-height: 81px;
}
.hero .script-line {
    display: block;
    margin-top: 6px;
    font-family: var(--font-script);
    font-size: clamp(30px, 4vw, 44px);
    color: var(--amber);
    font-weight: 400;
}
.hero .lede {
    margin-top: 12px;
    font-size: 17px;
    line-height: 25px;
    max-width: 860px;
    color: #f1e3d9;
    font-weight: 300;
    margin-bottom: 12px;
}
    .hero .lede strong {
        color: var(--amber);
        font-weight: 600;
    }

.btn-ghost {
    display: inline-block;
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--cream);
    border: 1px solid rgba(255,247,237,.5);
    padding: 16px 34px;
    border-radius: 2px;
    text-decoration: none;
    transition: background .25s ease,border-color .25s ease;
}

    .btn-ghost:hover {
        background: rgba(255,247,237,.1);
        border-color: var(--cream);
    }

/* ---------- SECTION shell ---------- */
section {
    padding: 50px 0;
}
.section-alt {
    background: #fbeee0;
}

.kicker {
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 12px;
    letter-spacing: .2em;
    text-transform: uppercase;
    color: var(--crimson);
    margin-bottom: 16px;
    display: block;
}

h2.headline {
    font-size: clamp(26px,3.6vw,40px);
    max-width: 760px;
}
.body-col {
    max-width: 700px;
    margin-top: 12px;
    font-size: 16px;
    line-height: 24px;
    font-weight: 300;
}
    .body-col p + p {
        margin-top: 14px;
    }

/* ---------- Reality callout ---------- */
.callout {
    margin-top: 46px;
    background: linear-gradient(135deg, var(--wine) 0%, var(--wine-deep) 100%);
    color: var(--cream);
    padding: 32px 38px;
    border-radius: 4px;
    position: relative;
    max-width: 900px;
}

    .callout::before {
        content: "REALITY";
        position: absolute;
        top: -13px;
        left: 44px;
        background: var(--amber);
        color: var(--wine-deep);
        font-family: var(--font-body);
        font-weight: 700;
        font-size: 11px;
        letter-spacing: .2em;
        padding: 6px 16px;
        border-radius: 2px;
    }
    .callout p {
        font-size: 19px;
        line-height: 27px;
        font-weight: 300;
        font-family: var(--font-body);
    }
        .callout p strong {
            font-family: var(--font-display);
            font-weight: 600;
            color: var(--amber);
        }

/* ---------- Academic DNA row ---------- */
.dna-row {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(140px,1fr));
    gap: 9px;
    margin-top: 44px;
}
.dna-tile {
    border: 1px solid rgba(124,45,18,.2);
    border-left: 3px solid var(--crimson);
    background: var(--cream);
    padding: 18px 16px;
    font-size: 14px;
    line-height: 1.6;
    font-weight: 300;
}

    .dna-tile b {
        display: block;
        font-family: var(--font-display);
        font-size: 15px;
        color: var(--wine-deep);
        font-weight: 700;
        margin-bottom: 4px;
    }

/* ---------- Stepper (vertical flow) ---------- */
.stepper {
    margin-top: 50px;
    max-width: 520px;
}
.step {
    display: flex;
    gap: 22px;
    position: relative;
    padding-bottom: 34px;
    align-items: center;
}
    .step:last-child {
        padding-bottom: 0;
    }
    .step:not(:last-child)::before {
        content: "";
        position: absolute;
        left: 49px;
        top: 42px;
        bottom: 0;
        width: 3px;
        background: repeating-linear-gradient(0deg, var(--rust) 0 6px, transparent 6px 12px);
    }
.final .step-dot img {
    filter: brightness(0) saturate(100%) invert(100%) sepia(1%) saturate(0%) hue-rotate(179deg) brightness(102%) contrast(101%);
}
.compare-card span.arrow img {
    height: 50px;
}
.compare-card.na span.arrow img {
    filter: brightness(0) saturate(100%) invert(9%) sepia(24%) saturate(5332%) hue-rotate(318deg) brightness(86%) contrast(87%);
}
.compare-card.global span.arrow img {
    filter: brightness(0) saturate(100%) invert(55%) sepia(79%) saturate(546%) hue-rotate(359deg) brightness(105%) contrast(92%);
}
.step-dot {
    flex: 0 0 auto;
    width: 100px;
    height: 100px;
    border-radius: 50%;
    background: var(--cream);
    border: 2px solid #b61d23;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 14px;
    color: var(--crimson);
    z-index: 1;
}
    .step-dot img {
        height: 60px;
        filter: brightness(0) saturate(100%) invert(15%) sepia(87%) saturate(3684%) hue-rotate(348deg) brightness(86%) contrast(92%);
    }
.step-label {
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 16.5px;
    color: var(--wine-deep);
    padding-top: 8px;
}

.step.dna .step-dot {
    background: var(--amber);
    border-color: var(--amber);
    color: var(--wine-deep);
}

.step.dna .step-label {
    color: var(--crimson);
}

.step.final .step-dot {
    background: var(--crimson);
    border-color: var(--crimson);
    color: var(--cream);
}

.step.final .step-label {
    color: var(--crimson);
    font-size: 19px;
}
.closing-line {
    margin-top: 25px;
    font-family: var(--font-script);
    font-size: 26px;
    color: var(--rust);
}
/* ---------- Comparison two-column flows ---------- */
.compare-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 32px;
    margin-top: 50px;
}

@media (max-width:760px) {
    .compare-grid {
        grid-template-columns: 1fr;
    }
}

.compare-card {
    padding: 36px 30px;
    border-radius: 4px;
}

    .compare-card.na {
        background: #f1eee7;
        border: 1px solid rgba(71,85,105,.2);
    }

    .compare-card.global {
        background: var(--wine-deep);
        color: var(--cream);
    }

    .compare-card h3 {
        font-size: 20px;
        margin-bottom: 26px;
    }

    .compare-card.na h3 {
        color: var(--slate);
    }

    .compare-card.global h3 {
        color: var(--amber);
    }

.mini-step {
    display: flex;
    align-items: center;
    gap: 12px;
    font-family: var(--font-body);
    font-size: 15px;
    font-weight: 500;
    padding: 12px 0;
}

.compare-card.na .mini-step {
    border-bottom: 1px dashed rgba(71,85,105,.25);
}

.compare-card.global .mini-step {
    border-bottom: 1px dashed rgba(255,247,237,.2);
}

.mini-step:last-child {
    border-bottom: none;
}

.mini-step .arrow {
    color: var(--crimson);
    font-size: 12px;
}

.compare-card.global .mini-step .arrow {
    color: var(--amber);
}

.compare-foot {
    margin-top: 30px;
    font-size: 15px;
    font-style: italic;
    font-weight: 300;
    max-width: 600px;
}

/* ---------- Table ---------- */
.vs-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 46px;
    max-width: 820px;
}

    .vs-table thead th {
        font-family: var(--font-display);
        font-size: 15px;
        font-weight: 700;
        text-align: left;
        padding: 16px 22px;
        background: var(--crimson);
        color: var(--cream);
    }

        .vs-table thead th:first-child {
            border-radius: 4px 0 0 0;
        }

        .vs-table thead th:last-child {
            border-radius: 0 4px 0 0;
        }

    .vs-table tbody td {
        padding: 15px 22px;
        font-size: 15px;
        font-weight: 400;
        border-bottom: 1px solid rgba(124,45,18,.14);
    }

    .vs-table tbody tr:nth-child(odd) {
        background: #f6ebdd;
    }

    .vs-table tbody td:first-child {
        color: var(--slate);
    }

    .vs-table tbody td:last-child {
        color: var(--rust);
        font-weight: 600;
    }

/* ---------- Chip lists ---------- */
.chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-top: 34px;
}
.chip {
    font-family: var(--font-body);
    font-size: 13.5px;
    font-weight: 500;
    padding: 10px 18px;
    border-radius: 50px;
    border: 1px solid var(--rust);
    color: var(--rust);
    background: transparent;
    position: relative;
    box-shadow: none;
    animation: unset;
    display: flex;
    align-items: center;
    gap: 15px;
}
    .chip img {
        height: 50px;
        filter: brightness(0) saturate(100%) invert(9%) sepia(31%) saturate(3416%) hue-rotate(314deg) brightness(101%) contrast(88%);
    }
    .chip.muted {
        border-color: rgba(71,85,105,.35);
        color: var(--slate);
    }

.emphasis {
    margin-top: 34px;
    font-family: var(--font-display);
    font-weight: 600;
    font-size: 20px;
    color: var(--crimson);
    max-width: 560px;
    line-height: 1.5;
}

/* ---------- Framework (Section VII) ---------- */
.framework-section {
    background-image: url('../images/myimages/egua/eb2.png');
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
}
section.eguabanner .btn-primary:hover {
    border: 1px solid #fff !important;
    color: #fff;
}
    .framework-section::before {
        content: "";
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
        background: linear-gradient(180deg, #4a1c29d1 0%, #6b2a3be0 100%);
    }
    .framework-section .kicker {
        color: var(--amber);
    }

    .framework-section h2.headline {
        color: var(--cream);
    }
.fw-stepper {
    margin-top: 56px;
    max-width: 100%;
    display: flex;
    justify-content: space-between;
}
.fw-step {
    display: flex;
    gap: 20px;
    position: relative;
    padding-bottom: 30px;
    flex-direction: column;
}
    .fw-step:last-child {
        padding-bottom: 0;
    }
    .fw-step:not(:last-child)::before {
        content: "";
        position: absolute;
        left: 47px;
        top: 38px;
        bottom: 0;
        width: 100%;
        height: 1px;
        background: rgba(245,158,11,.35);
    }
.fw-dot img {
    height: 46px;
    filter: brightness(0) saturate(100%) invert(60%) sepia(94%) saturate(646%) hue-rotate(353deg) brightness(96%) contrast(99%);
}
.framework-section h2 span {
    color: #f59e0b;
}
.country-pill .flag img {
    height: 50px;
    border: 1px solid #00000026;
    border-radius: 50%;
}
.fw-dot {
    flex: 0 0 auto;
    width: 76px;
    height: 76px;
    border-radius: 50%;
    border: 1px solid rgba(245,158,11,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 13px;
    color: var(--amber);
    background: #602535;
    position: relative;
}
.fw-label {
    font-family: var(--font-body);
    font-weight: 300;
    font-size: 16px;
    padding-top: 6px;
    color: #f1e3d9;
}
.fw-step.dna .fw-dot {
    background: var(--amber);
    border-color: var(--amber);
    color: var(--wine-deep);
    box-shadow: 0 0 0 6px rgba(245,158,11,.15);
}

.fw-step.dna .fw-label {
    color: var(--amber);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 18px;
}

.fw-step.final .fw-dot {
    background: var(--crimson);
    border-color: var(--crimson);
    color: var(--cream);
}

.fw-step.final .fw-label {
    color: var(--cream);
    font-family: var(--font-display);
    font-weight: 700;
    font-size: 19px;
    letter-spacing: .02em;
}

/* ---------- Countries row ---------- */
.country-row {
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-top: 26px;
}
.country-pill {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 15px;
    border-radius: 50px;
    background: var(--cream);
    border: 1px solid var(--rust);
    font-family: var(--font-body);
    font-weight: 600;
    font-size: 14.5px;
    color: var(--wine-deep);
}
    .country-pill .flag {
        font-size: 20px;
    }

/* ---------- Section IX quote block ---------- */
.quote-block {
    max-width: 700px;
    margin-top: 36px;
}

    .quote-block p {
        font-size: 17px;
        line-height: 1.9;
        font-weight: 300;
    }

        .quote-block p + p {
            margin-top: 14px;
        }

    .quote-block .distinct {
        margin-top: 28px;
        font-family: var(--font-script);
        font-size: 30px;
        color: var(--crimson);
        line-height: 1.4;
    }

/* ---------- University seals (Section X) ---------- */
.uni-list {
    margin-top: 60px;
    display: flex;
    flex-direction: column;
    gap: 64px;
}

.uni-row {
    display: grid;
    grid-template-columns: 220px 1fr;
    gap: 44px;
    align-items: start;
}

    .uni-row.reverse {
        grid-template-columns: 1fr 220px;
    }

        .uni-row.reverse .uni-seal {
            order: 2;
        }

        .uni-row.reverse .uni-text {
            order: 1;
        }

@media (max-width:700px) {
    .uni-row, .uni-row.reverse {
        grid-template-columns: 1fr;
    }

        .uni-row.reverse .uni-seal {
            order: 0;
        }
}

.uni-seal {
    width: 190px;
    height: 190px;
    border-radius: 50%;
    margin: 0 auto;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: radial-gradient(circle at 50% 50%, #fdf3e4 0%, #f6e6cf 70%, #f6e6cf 100%);
    border: 2px solid var(--amber);
    box-shadow: 0 0 0 6px var(--cream), 0 0 0 7px rgba(124,45,18,.35), 0 18px 34px -14px rgba(107,42,59,.4);
}
/*
    .uni-seal::before {
        content: "";
        position: absolute;
        inset: 14px;
        border-radius: 50%;
        border: 1px dashed var(--rust);
        opacity: .55;
    }
*/
    .uni-seal img {
        max-width: 150px;
        width: 100%;
    }
    .uni-seal .flag-big {
        font-size: 52px;
    }

    .uni-seal .seal-ring-text {
        position: absolute;
        inset: 0;
    }

.uni-tag {
    display: inline-block;
    margin-bottom: 10px;
    font-family: var(--font-body);
    font-weight: 700;
    font-size: 11px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--crimson);
}

.uni-text h3 {
    font-size: 24px;
    margin-bottom: 4px;
}

.uni-role {
    font-family: var(--font-script);
    font-size: 24px;
    color: var(--rust);
    margin-top: 2px;
    display: block;
}

.uni-text p {
    margin-top: 16px;
    font-size: 15.5px;
    line-height: 1.85;
    font-weight: 300;
}

.best-suited {
    margin-top: 20px;
    padding: 16px 20px;
    border-left: 3px solid var(--amber);
    background: #f6ebdd;
    font-size: 14px;
    line-height: 1.7;
}

    .best-suited b {
        font-family: var(--font-display);
        color: var(--wine-deep);
        display: block;
        margin-bottom: 4px;
        font-size: 13px;
        letter-spacing: .03em;
        text-transform: uppercase;
    }

/* ---------- Closing insight ---------- */
.closing-section {
    position: relative;
    background: radial-gradient(circle at 75% 20%, rgba(245,158,11,.16), transparent 45%), linear-gradient(150deg, var(--wine-deep) 0%, #3d1622 100%);
    color: var(--cream);
    padding: 50px 0 50px;
    text-align: center;
}
    .closing-section .kicker {
        color: var(--amber);
    }

    .closing-section h2 {
        font-size: clamp(28px,4.2vw,42px);
        color: var(--cream);
        max-width: 760px;
        margin: 0 auto;
    }

    .closing-section .body-col {
        margin: 26px auto 0;
        max-width: 640px;
        color: #f1e3d9;
        text-align: center;
    }

.not-but {
    margin: 44px auto 0;
    max-width: 560px;
}

    .not-but .line {
        font-family: var(--font-display);
        font-size: 19px;
        margin: 10px 0;
    }

    .not-but .no {
        color: #d99;
        text-decoration: line-through;
        text-decoration-color: rgba(217,153,153,.5);
        opacity: .75;
    }

    .not-but .yes {
        color: var(--amber);
        font-weight: 700;
        font-size: 21px;
    }

.closing-cta {
    margin-top: 52px;
    display: flex;
    gap: 18px;
    justify-content: center;
    flex-wrap: wrap;
}
.closing-section h2 span {
    color: #f59e0b;
}