:root {
    --brand: #f2a365;
    --ink: #e9f0ff;
    --ink-dim: #c8d1ff;
    --panel: rgba(15,18,36,.55);
    --panel-strong: rgba(22,26,48,.7);
    --shadow: 0 18px 60px rgba(0,0,0,.55);
    --about-parallax-y: 0px;
    --about-parallax-y-deep: 0px;
}

*, *::before, *::after {
    box-sizing: border-box
}

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

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

/* Backdrop (page-local) */
#AboutStarsWrap {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
}

    #AboutStarsWrap canvas {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        display: block;
    }

.about-bg-fx {
    position: absolute;
    inset: 0;
    background-position: center;
    background-size: cover;
    pointer-events: none
}

.about-bg-near {
    z-index: -1;
    opacity: .36;
    transform: translateY(var(--about-parallax-y));
    background-image: radial-gradient(1100px 700px at 70% 20%, rgba(145,171,255,.25), transparent), radial-gradient(900px 600px at 30% 80%, rgba(68,114,255,.22), transparent), linear-gradient(#03040a,#070a1a);
}

.about-bg-deep {
    z-index: -2;
    opacity: .26;
    filter: blur(2px) saturate(.9);
    transform: translateY(var(--about-parallax-y-deep)) scale(1.06);
    background-image: radial-gradient(900px 600px at 50% 40%, rgba(255,255,255,.10), transparent), linear-gradient(#010207,#040815);
}

.fx-scan {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    opacity: .07;
    background-image: linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px);
    background-size: 100% 2px
}

.fx-vignette {
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background: radial-gradient(1200px 800px at 50% 50%, transparent 40%, rgba(0,0,0,.55) 100%)
}

/* Animated ring support */
@property --angle {
    syntax: '<angle>';
    initial-value: 0deg;
    inherits: false
}

/* TEAM */
.team-section {
    text-align: center;
    padding: clamp(84px, 11vw, 140px) 22px clamp(72px,10vw,120px);
    position: relative;
    isolation: isolate;
    overflow: hidden;
}

    .team-section h2 {
        font-size: clamp(1.9rem,3.4vw,2.6rem);
        margin: 0 0 clamp(18px,3vw,34px);
        letter-spacing: .08em;
        text-transform: uppercase;
        font-weight: 900
    }

.team-container {
    display: grid;
    grid-template-columns: repeat(auto-fit,minmax(300px,1fr));
    gap: clamp(18px,2vw,32px);
    justify-items: center;
    position: relative;
    z-index: 1;
    max-width: 1200px;
    margin: 0 auto
}

.team-member {
    position: relative;
    overflow: hidden;
    background: var(--panel);
    backdrop-filter: blur(8px);
    border-radius: 16px;
    padding: 20px;
    width: 100%;
    max-width: 560px;
    box-shadow: var(--shadow);
    border: 1px solid rgba(255,255,255,.08);
    transition: background .25s ease, box-shadow .25s ease, filter .25s ease, transform .18s ease;
    transform: perspective(700px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transform-style: preserve-3d;
}

    .team-member:hover {
        background: var(--panel-strong);
        filter: brightness(1.05)
    }

    .team-member::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 16px;
        pointer-events: none;
        background: radial-gradient(320px 220px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.14), transparent 60%);
        opacity: 0;
        transition: opacity .2s ease;
    }

    .team-member.is-hover::before {
        opacity: 1;
    }

    .team-member img {
        width: 100%;
        aspect-ratio: 1/1;
        object-fit: cover;
        border-radius: 50%;
        padding: 6px;
        background: conic-gradient(from var(--angle), rgba(242,163,101,.95), rgba(146,170,255,.92), rgba(242,163,101,.95));
        border: 3px solid rgba(0,0,0,.45);
        margin-bottom: 12px;
        animation: ring-spin 14s linear infinite;
    }

@keyframes ring-spin {
    to {
        --angle: 360deg;
    }
}

.team-member h3 {
    font-size: 1.05rem;
    margin: 6px 0 2px;
    font-weight: 800;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: #eaf2ff
}

.team-member p {
    color: var(--ink-dim);
    margin: 0
}

/* ABOUT SECTIONS (copy intact) */
.our-sections-wrapper {
    position: relative;
    padding: 0;
    overflow: hidden;
    isolation: isolate;
}

.OurVision-section, .OurMission-section, .OurOrigins-Section {
    position: relative;
    z-index: 1;
    text-align: center;
    background: transparent;
    padding: clamp(54px, 7vw, 90px) 20px;
}

.our-section h2 {
    font-size: clamp(1.7rem,3.2vw,2.4rem);
    margin: 0 0 14px;
    font-weight: 900;
    text-transform: uppercase;
    letter-spacing: .02em
}

.our-section p {
    line-height: 1.8;
    margin: 0 auto;
    color: var(--ink)
}

.OurVision-section p {
    max-width: 1000px
}

.OurMission-section, .OurOrigins-Section {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: center;
    gap: clamp(16px,2.2vw,24px);
    text-align: left;
}

    .OurMission-section::before, .OurOrigins-Section::before {
        content: "";
        position: absolute;
        inset: clamp(12px,1.8vw,18px);
        background: var(--panel);
        border: 1px solid rgba(255,255,255,.10);
        border-radius: 16px;
        box-shadow: var(--shadow);
        backdrop-filter: blur(8px);
        z-index: -1;
    }

    .OurMission-section::after, .OurOrigins-Section::after {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 16px;
        pointer-events: none;
        background: linear-gradient(90deg, transparent, rgba(255,255,255,.12), transparent);
        opacity: 0;
        animation: panel-sheen 14s ease-in-out infinite;
    }

@keyframes panel-sheen {
    0%,100% {
        opacity: 0;
        transform: translateX(-30%)
    }

    50% {
        opacity: .45;
        transform: translateX(30%)
    }
}

.OurMission-section img, .OurOrigins-Section img {
    max-width: 520px;
    height: auto;
    border-radius: 14px;
    box-shadow: var(--shadow);
    justify-self: center;
    will-change: transform;
}

.OurMission-section h2, .OurOrigins-Section h2 {
    margin-left: 30px
}

.OurMission-section p, .OurOrigins-Section p {
    margin-left: 50px;
    max-width: 900px
}

/* STAFF DETAIL PAGES */
.Staff-section {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    position: relative;
    overflow: hidden;
    isolation: isolate;
    min-height: 100vh;
    padding: clamp(48px,6vw,64px) 20px;
    margin: 0 auto;
}

    .Staff-section::before {
        content: "";
        position: absolute;
        inset: -10% -10%;
        z-index: 0;
        pointer-events: none;
        background: radial-gradient(1100px 700px at 70% 20%, rgba(145,171,255,.22), transparent 60%), radial-gradient(900px 600px at 30% 80%, rgba(242,163,101,.18), transparent 60%), radial-gradient(1200px 900px at 50% 50%, rgba(255,255,255,.06), transparent 60%);
        filter: saturate(1.05);
        transform: translateY(var(--about-parallax-y-deep)) scale(1.04);
    }

    .Staff-section::after {
        content: "";
        position: absolute;
        inset: -20% -20%;
        z-index: 0;
        pointer-events: none;
        opacity: .25;
        background-image: radial-gradient(1px 1px at 40px 60px, rgba(255,255,255,.9) 100%, transparent 0), radial-gradient(1px 1px at 110px 80px, rgba(255,255,255,.7) 100%, transparent 0), radial-gradient(1px 1px at 160px 140px, rgba(255,255,255,.8) 100%, transparent 0);
        background-size: 220px 220px;
        background-repeat: repeat;
        transform: translateY(var(--about-parallax-y));
    }

.staff-card {
    position: relative;
    overflow: hidden;
    display: grid;
    grid-template-columns: auto 1fr;
    gap: clamp(16px,2vw,24px);
    align-items: center;
    background: var(--panel);
    border-radius: 16px;
    padding: clamp(18px,2vw,24px);
    box-shadow: var(--shadow);
    border: 1px solid rgba(255,255,255,.10);
    backdrop-filter: blur(8px);
    max-width: 1100px;
    margin: 0 auto 20px;
    transform: perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));
    transition: transform .18s ease;
}

    .staff-card::before {
        content: "";
        position: absolute;
        inset: 0;
        border-radius: 16px;
        pointer-events: none;
        background: radial-gradient(420px 300px at var(--mx,50%) var(--my,50%), rgba(255,255,255,.10), transparent 60%);
        opacity: 0;
        transition: opacity .2s ease;
    }

    .staff-card.is-hover::before {
        opacity: .9;
    }

.staff-image img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 12px;
    padding: 6px;
    background: conic-gradient(from var(--angle), rgba(242,163,101,.95), rgba(146,170,255,.92), rgba(242,163,101,.95));
    border: 3px solid rgba(0,0,0,.45);
    animation: ring-spin 14s linear infinite;
}

.staff-card h2, .staff-card h3, .staff-card p {
    margin-bottom: 10px
}

.backToTeam {
    display: inline-block;
    text-align: right;
    margin-top: 8px;
    color: #fff;
    text-decoration: none;
    border-bottom: 1px solid #ffffff44;
    transition: color .3s, border-color .3s;
}

    .backToTeam:hover {
        color: #ffcc00;
        border-color: #102dd9
    }

.ProjectHeading {
    max-width: 1100px;
    margin: 10px auto 6px;
    padding: 0 4px;
    text-align: left
}

    .ProjectHeading h2 {
        font-size: 1.2rem;
        letter-spacing: .08em;
        text-transform: uppercase;
        margin: 0;
        color: #eaf2ff
    }

/* ===== Projects (DESKTOP/TABLET default) =====
   - Card grid built from inline-blocks (no markup changes)
   - 16:9 image, title below
   - Gradient border glow + lift on hover
*/
.Staff-Project {
    position: relative;
    display: inline-block; /* allows natural wrapping into a grid */
    vertical-align: top;
    width: calc(33.333% - 16px); /* 3-up by default; see breakpoints below */
    margin: 10px 8px 18px;
    padding: 12px;
    border-radius: 14px;
    background: linear-gradient(var(--panel), var(--panel)) padding-box, linear-gradient(135deg, rgba(242,163,101,.35), rgba(146,170,255,.35)) border-box;
    border: 1px solid transparent;
    box-shadow: var(--shadow);
    backdrop-filter: blur(6px);
    transition: transform .22s ease, background .22s ease, box-shadow .22s ease;
    overflow: hidden;
}

    .Staff-Project:hover {
        transform: translateY(-6px);
        background: linear-gradient(var(--panel-strong), var(--panel-strong)) padding-box, linear-gradient(135deg, rgba(242,163,101,.85), rgba(146,170,255,.80)) border-box;
        box-shadow: 0 22px 70px rgba(0,0,0,.55);
    }

    .Staff-Project::after { /* subtle moving sheen */
        content: "";
        position: absolute;
        inset: 0;
        pointer-events: none;
        background: linear-gradient(100deg, transparent, rgba(255,255,255,.12), transparent);
        transform: translateX(-30%);
        opacity: 0;
        transition: opacity .22s ease, transform .7s ease;
    }

    .Staff-Project:hover::after {
        opacity: .6;
        transform: translateX(30%);
    }

    .Staff-Project a {
        display: block;
        text-decoration: none;
        color: inherit;
    }

    .Staff-Project img {
        width: 100%;
        height: auto;
        aspect-ratio: 16/9; /* consistent thumbnails */
        object-fit: cover;
        border-radius: 10px;
        margin: 0 0 10px;
        box-shadow: var(--shadow);
    }

    .Staff-Project h3 {
        margin: 0;
        font-size: 1.05rem;
        line-height: 1.25;
        text-align: left;
    }

/* Column count tweaks for common desktop widths */
@media (min-width:1025px) and (max-width:1199px) {
    .Staff-Project {
        width: calc(50% - 16px);
    }
    /* 2-up on smaller desktops */
}

@media (min-width:1600px) {
    .Staff-Project {
        width: calc(25% - 16px);
    }
    /* 4-up on widescreen */
}

/* ---------- Responsive ---------- */
@media (max-width:1100px) {
    .team-container {
        grid-template-columns: repeat(auto-fit,minmax(260px,1fr));
    }
}

/* MOBILE: Projects compact layout (row with small thumb) */
@media (max-width:1024px) {
    .team-member {
        width: 85%;
        max-width: 520px;
        margin: 0 auto
    }

    .OurMission-section, .OurOrigins-Section {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        gap: 18px;
        padding: 28px 18px;
    }

        .OurMission-section::before, .OurOrigins-Section::before {
            inset: 12px
        }

        .OurMission-section img, .OurOrigins-Section img {
            width: 100%;
            max-width: 520px;
            height: auto;
            border-radius: 10px
        }

        .OurMission-section h2, .OurOrigins-Section h2,
        .OurMission-section p, .OurOrigins-Section p {
            text-align: center;
            margin: 0 auto;
            max-width: 100%
        }

    .staff-card {
        display: flex;
        flex-direction: column-reverse;
        gap: 18px
    }

    .staff-image img {
        width: 100%;
        max-width: 300px;
        margin-bottom: 12px
    }

    .Staff-Project {
        display: block; /* reset for mobile row style */
        width: 100%;
        max-width: 640px;
        margin: 8px auto 12px;
        padding: 10px 12px;
        transform: none; /* no hover lift on touch */
    }

        .Staff-Project a {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: flex-start;
            gap: 12px;
            padding: 0;
            width: 100%;
        }

        .Staff-Project img {
            width: 96px;
            height: 96px;
            flex: 0 0 96px;
            object-fit: cover;
            margin: 0;
            border-radius: 10px;
        }

        .Staff-Project h3 {
            margin: 0;
            font-size: 1rem;
            text-align: left;
            line-height: 1.25;
        }
}

/* Extra-small phones */
@media (max-width:480px) {
    .Staff-Project img {
        width: 76px;
        height: 76px;
        flex-basis: 76px;
    }

    .Staff-Project h3 {
        font-size: .95rem;
    }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    #AboutStarsWrap, .fx-scan, .fx-vignette {
        display: none;
    }

    .team-member, .staff-card {
        transition: none;
        transform: none
    }

        .team-member img, .staff-image img {
            animation: none
        }

    .OurMission-section::after, .OurOrigins-Section::after {
        animation: none;
        opacity: 0
    }

    .Staff-Project {
        transition: none
    }
}