:root {
    --oxblood: #ae2220;
    --oxblood-deep: #7e1815;
    --cream: #f7f0de;
    --cream-dim: #efe4c6;
    --navy: #0a2d64;
    --navy-deep: #061b3f;
    --ink: #191510;
    --gold: #c9a24a;
    --line: rgba(10,45,100,0.16);
}

body {
    background: var(--cream);
    color: var(--ink);
    font-family: "Poppins", sans-serif;
    overflow-x: hidden;
    -webkit-font-smoothing: antialiased;
}

::selection {
    background: var(--oxblood);
    color: var(--cream);
}

h1, h2, h3, h4 {
    font-family: "Bricolage Grotesque", sans-serif;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: var(--navy);
}

.script {
    font-family: "Great Vibes", cursive;
    color: var(--oxblood);
    font-weight: 400;
}

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

/* ---------- Texture layer ---------- */
.paper-grain {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 1;
    opacity: .5;
    mix-blend-mode: multiply;
    background-image: radial-gradient(circle at 20% 30%, rgba(10,45,100,0.02) 0, transparent 40%), radial-gradient(circle at 80% 70%, rgba(174,34,32,0.02) 0, transparent 40%);
}

/* ---------- Reveal ---------- */



/* ---------- HERO ---------- */
.hero {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    background-image: none;
    padding: 50px 15px 50px;
    background-color: #fff;
}
    .hero::before {
        content: "";
        position: absolute;
        inset: 0;
        background-image: repeating-linear-gradient(115deg, rgba(247,240,222,0.025) 0px, rgba(247,240,222,0.025) 1px, transparent 1px, transparent 90px);
        pointer-events: none;
    }
.hero-grid {
    display: grid;
    grid-template-columns: 1fr;
    gap: 60px;
    align-items: center;
    position: relative;
    z-index: 2;
}
.eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    color: var(--gold);
    font-size: .78rem;
    letter-spacing: .22em;
    text-transform: uppercase;
    font-weight: 600;
    margin-bottom: 26px;
}
/*
    .eyebrow::before {
        content: "";
        width: 34px;
        height: 1px;
        background: var(--gold);
    }
*/
section.hero.abouthero .eyebrow::before {
    display: none;
}
section.hero.abouthero .eyebrow img {
    filter: brightness(0) saturate(100%) invert(64%) sepia(20%) saturate(1199%) hue-rotate(4deg) brightness(103%) contrast(77%);
}
section.aboutsectionbanner {
    padding: 0;
}
.hero h1 {
    color: #000;
    font-size: 45px;
    line-height: 48px;
    font-weight: 800;
    margin-bottom: 20px;
}
.hero h1 em {
    font-style: normal;
    color: var(--oxblood);
    -webkit-text-stroke: 0;
}
.hero .lede {
    color: #565857;
    font-size: 16px;
    line-height: 24px;
    max-width: 100%;
    margin-bottom: 38px;
    font-weight: 300;
}
.eyebrow img {
    height: 30px;
    filter: brightness(0) saturate(100%) invert(19%) sepia(70%) saturate(2253%) hue-rotate(346deg) brightness(102%) contrast(92%);
}
section.abouthero::before {
    display: none;
}
.hero-cta-row {
    display: flex;
    align-items: center;
    gap: 28px;
    flex-wrap: wrap;
}

    .btn-primary:hover {
        transform: translateY(-3px);
        background: var(--oxblood-deep);
        box-shadow: 0 20px 36px -12px rgba(174,34,32,0.7);
    }

.hero-note {
    display: flex;
    align-items: center;
    gap: 12px;
    color: var(--cream-dim);
    font-size: .85rem;
}

    .hero-note .script {
        font-size: 1.5rem;
        color: var(--gold);
    }

/* seal */
.seal-wrap {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
}

.seal {
    width: min(360px, 80%);
    animation: sealdrift 10s ease-in-out infinite;
}

@keyframes sealdrift {
    0%,100% {
        transform: translateY(0) rotate(0deg);
    }

    50% {
        transform: translateY(-10px) rotate(1.5deg);
    }
}

.seal-ring-text {
    animation: spin 34s linear infinite;
    transform-origin: 180px 180px;
}

@keyframes spin {
    to {
        transform: rotate(360deg);
    }
}
.hero-stats {
    position: relative;
    z-index: 2;
    margin-top: 0px;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    border-top: 1px solid #00000047;
    padding-top: 34px;
    grid-gap: 15px;
}
.hero-stats > div {
    padding: 30px 40px;
    box-shadow: 0 0 30px 0 #00000014;
    position: relative;
    background: #ffffff73;
}
.hero-stats .num {
    color: #ae2220;
    font-family: "Bricolage Grotesque",sans-serif;
    font-weight: 700;
    font-size: 2rem;
}
.hero-stats .lbl {
    color: #565857;
    font-size: 14px;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-top: 4px;
    line-height: 24px;
    font-weight: 700;
}
@media (max-width:900px) {
    .hero-grid {
        grid-template-columns: 1fr;
    }

    .seal-wrap {
        order: -1;
        margin-bottom: 10px;
    }

    .seal {
        width: 220px;
    }

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

    }

        .hero-stats div {
            border-left: none;
            padding-left: 0;
        }
}

/* ---------- Section shell ---------- */
section {
    position: relative;
    padding: 50px 0px;
    z-index: 2;
}
.section-head {
    max-width: 680px;
    margin-bottom: 25px;
}
.file-ref {
    display: inline-block;
    font-size: .74rem;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--oxblood);
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 10px;
}
.doctrine .section-head {
    display: flex;
    align-items: flex-start;
    max-width: 100%;
}
.doctrine .section-head > div {
    width: 50%;
}
.section-head h2 {
    font-size: clamp(2rem,3.6vw,3rem);
    line-height: 1.1;
}
.section-head p {
    margin-top: 10px;
    color: #4a4438;
    font-size: 16px;
    line-height: 24px;
    max-width: 560px;
    font-weight: 300;
}

/* ---------- DOCTRINE ---------- */
.doctrine {
    background: var(--cream);
    padding: 40px 0;
}
.doctrine-inner {
    display: grid;
    grid-template-columns: .9fr 1.1fr;
    gap: 70px;
    align-items: start;
}

.doctrine-mark {
    border: 1px solid var(--line);
    padding: 46px 40px;
    position: relative;
    background: rgba(255,255,255,0.4);
}

    .doctrine-mark::before {
        content: "§";
        position: absolute;
        top: -24px;
        left: 36px;
        font-family: "Bricolage Grotesque",sans-serif;
        font-size: 3.6rem;
        color: var(--oxblood);
        background: var(--cream);
        padding: 0 10px;
        font-weight: 800;
    }

    .doctrine-mark .script {
        font-size: 2.6rem;
        display: block;
        margin-bottom: 10px;
    }

    .doctrine-mark p {
        color: #4a4438;
        line-height: 1.8;
        font-size: .98rem;
    }

.doctrine-list {
    display: flex;
    flex-direction: column;
    gap: 0;
}
.doctrine-row {
    display: grid;
    grid-template-columns: 70px 1fr;
    gap: 24px;
    padding: 15px 0;
    border-bottom: 1px solid var(--line);
    transition: padding-left .35s ease;
}

    .doctrine-row:first-child {
        border-top: 1px solid var(--line);
    }

    .doctrine-row:hover {
        padding-left: 12px;
    }

    .doctrine-row .idx {
        font-family: "Great Vibes",cursive;
        font-size: 2.1rem;
        color: var(--oxblood);
        line-height: 1;
    }

    .doctrine-row h4 {
        font-size: 1.15rem;
        margin-bottom: 8px;
    }
    .doctrine-row p {
        color: #4a4438;
        font-size: 15px;
        line-height: 23px;
        font-weight: 300;
        margin: 0;
    }
.kicker img {
    height: 30px;
    filter: brightness(0) saturate(100%) invert(19%) sepia(70%) saturate(2253%) hue-rotate(346deg) brightness(102%) contrast(92%);
}
/* ---------- THE SYSTEM ---------- */
.file-ref.kicker img {
    filter: brightness(0) saturate(100%) invert(64%) sepia(20%) saturate(1199%) hue-rotate(4deg) brightness(103%) contrast(77%);
}
.system {
    /* background: var(--navy);
    background: linear-gradient(180deg, var(--navy) 0%, var(--navy-deep) 100%);*/
    padding: 50px 0;
    background-image: url('../images/myimages/about/a2.png');
    background-repeat: no-repeat;
    background-size: cover;
}
    .system::before {
        content: "";
        background: linear-gradient(180deg, #0a2d64e0 0%, #061b3fd4 100%);
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
    }
.system .file-ref {
    color: var(--gold);
    border-color: rgba(247,240,222,0.2);
}
.system .section-head h2 {
    color: var(--cream);
}
.system .section-head p {
    color: rgba(247,240,222,0.68);
}
.pillars {
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1px;
    background: rgba(247,240,222,0.14);
    border: 1px solid rgba(247,240,222,0.14);
}
.pillar {
    background: #061b3f69;
    padding: 25px 25px;
    position: relative;
    overflow: hidden;
    transition: background .4s ease;
}

    .pillar::before {
        content: "";
        position: absolute;
        left: 0;
        top: 0;
        height: 0;
        width: 3px;
        background: var(--oxblood);
        transition: height .4s ease;
    }

    .pillar:hover {
        background: #0d3a7e;
    }

        .pillar:hover::before {
            height: 100%;
        }

    .pillar .pnum {
        color: var(--gold);
        font-family: "Bricolage Grotesque",sans-serif;
        font-weight: 700;
        font-size: .85rem;
        letter-spacing: .1em;
    }
    .pillar .picon {
        width: 44px;
        height: 44px;
        margin: 0;
    }
    .pillar h4 {
        color: var(--cream);
        font-size: 1.15rem;
        margin-bottom: 14px;
        line-height: 1.3;
    }
.iconwrap img {
    height: 90px;
    margin: 0 0 10px 0;
    filter: brightness(0) saturate(100%) invert(64%) sepia(20%) saturate(1199%) hue-rotate(4deg) brightness(103%) contrast(77%);
}
.system h2 span {
    color: #c9a24a;
}
    .pillar p {
        color: rgba(247,240,222,0.62);
        font-size: .88rem;
        line-height: 1.7;
        font-weight: 300;
    }

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

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

/* ---------- STORIES / timeline ---------- */
.stories {
    background: var(--cream);
    background-image: radial-gradient(circle at 90% 10%, rgba(174,34,32,0.06) 0, transparent 40%);
}

.timeline {
    position: relative;
    margin-top: 20px;
}

    .timeline::before {
        content: "";
        position: absolute;
        left: 118px;
        top: 10px;
        bottom: 10px;
        width: 1px;
        background: repeating-linear-gradient(to bottom, var(--oxblood) 0 6px, transparent 6px 12px);
    }

@media (max-width:760px) {
    .timeline::before {
        left: 64px;
    }
}
.tl-row {
    display: grid;
    grid-template-columns: 118px 1fr;
    gap: 0;
    position: relative;
    padding: 10px 0;
}
@media (max-width:760px) {
    .tl-row {
        grid-template-columns: 64px 1fr;
    }
}

.tl-year {
    font-family: "Bricolage Grotesque",sans-serif;
    font-weight: 700;
    color: var(--navy);
    font-size: 1.3rem;
    padding-top: 4px;
}

.tl-dot {
    position: absolute;
    left: 113px;
    top: 44px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: var(--cream);
    border: 2px solid var(--oxblood);
}

@media (max-width:760px) {
    .tl-dot {
        left: 59px;
    }
}

.tl-body {
    padding-left: 44px;
}

@media (max-width:760px) {
    .tl-body {
        padding-left: 30px;
    }
}

.tl-body h4 {
    font-size: 1.2rem;
    margin-bottom: 10px;
}
.tl-body p {
    color: #4a4438;
    font-size: 15px;
    line-height: 23px;
    font-weight: 300;
    max-width: 100%;
}
/* ---------- LEADERSHIP ---------- */
.leadership {
    background: #fff;
}
.offices .section-head h2 span {
    color: #c9a24a;
}
.lead-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    gap: 36px;
}

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

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

.lead-card {
    background: var(--cream);
    border: 1px solid var(--line);
    padding: 0;
    position: relative;
    overflow: hidden;
    transition: transform .4s ease, box-shadow .4s ease;
}

    .lead-card:hover {
        transform: translateY(-6px);
        box-shadow: 0 24px 40px -20px rgba(10,45,100,0.25);
    }

.lead-photo {
    height: 230px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(150deg, var(--navy) 0%, var(--navy-deep) 100%);
}

    .lead-photo .initials {
        font-family: "Bricolage Grotesque",sans-serif;
        font-weight: 700;
        font-size: 2.6rem;
        color: var(--cream);
        width: 96px;
        height: 96px;
        border: 1px solid rgba(201,162,74,0.5);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .lead-photo::after {
        content: "";
        position: absolute;
        inset: 0;
        background: radial-gradient(circle at 30% 20%, rgba(174,34,32,0.35), transparent 60%);
    }

.lead-info {
    padding: 26px 26px 30px;
}

    .lead-info h4 {
        font-size: 1.1rem;
    }

    .lead-info .role {
        color: var(--oxblood);
        font-size: .78rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        font-weight: 600;
        margin: 6px 0 14px;
    }

    .lead-info p {
        color: #4a4438;
        font-size: .88rem;
        line-height: 1.65;
        font-weight: 300;
    }

/* ---------- GLOBAL OFFICES ---------- */
.offices {
    /* background: var(--navy-deep);*/
    background-image: url('../images/myimages/about/a5.png');
    background-repeat: no-repeat;
    background-size: cover;
}
    .offices::before {
        content: "";
        background: #000000d1;
        position: absolute;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100%;
        width: 100%;
    }
    .offices .file-ref {
        color: var(--gold);
        border-color: rgba(247,240,222,0.2);
    }

    .offices .section-head h2 {
        color: var(--cream);
    }

    .offices .section-head p {
        color: rgba(247,240,222,0.68);
    }

.office-grid {
    display: grid;
    grid-template-columns: repeat(3,1fr);
    border-top: 1px solid rgba(247,240,222,0.16);
    border-left: 1px solid rgba(247,240,222,0.16);
}

@media (max-width:900px) {
    .office-grid {
        grid-template-columns: repeat(2,1fr);
    }
}

@media (max-width:560px) {
    .office-grid {
        grid-template-columns: 1fr;
    }
}
.office-cell {
    border-right: 1px solid rgba(247,240,222,0.16);
    border-bottom: 1px solid rgba(247,240,222,0.16);
    padding: 36px 30px;
    transition: background .35s ease;
}
.office-cell:hover {
    background: rgba(174,34,32,0.14);
}
.office-cell .city {
    color: var(--cream);
    font-family: "Bricolage Grotesque",sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    margin-bottom: 6px;
}
.office-cell .country {
    color: var(--gold);
    font-size: .76rem;
    letter-spacing: .1em;
    text-transform: uppercase;
    margin-bottom: 16px;
}
.office-cell .addr {
    color: rgba(247,240,222,0.6);
    font-size: .86rem;
    line-height: 1.7;
    font-weight: 300;
}

/* ---------- CTA / Footer ---------- */
.cta-band {
    background: var(--oxblood);
    background: linear-gradient(120deg, var(--oxblood) 0%, var(--oxblood-deep) 100%);
    padding: 50px 0;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.cta-band::before {
    content: "SureAdmit";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
    font-family: "Bricolage Grotesque",sans-serif;
    font-weight: 800;
    font-size: 11vw;
    color: rgba(247,240,222,0.045);
    white-space: nowrap;
    pointer-events: none;
}
.cta-band .script {
    color: var(--cream);
    font-size: 2.4rem;
    display: block;
    margin-bottom: 10px;
}
.cta-band h2 {
    color: var(--cream);
    font-size: clamp(1.9rem,3.6vw,2.8rem);
    margin-bottom: 30px;
    position: relative;
}
.cta-band .btn-primary {
    background: var(--cream);
    color: var(--oxblood);
    box-shadow: 0 14px 30px -10px rgba(0,0,0,0.35);
    position: relative;
}
.cta-band .btn-primary:hover {
    background: #fff;
}
section.abouthero::before {
    content: "";
    background-image: url('../images/myimages/whysureadmit/backhoundimage.png');
    background-repeat: no-repeat;
    background-size: 100% 100%;
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: block;
    opacity: 0.1;
}