/* ── ABOUT PAGE SPECIFIC ─────────────────────────────── */

        /* Hero */
        .about-hero {
            min-height: 70vh;
            display: flex;
            align-items: center;
            padding: 160px 0 100px;
            position: relative;
            overflow: hidden;
        }

        .about-hero-inner {
            text-align: center;
            max-width: 760px;
            margin: 0 auto;
            position: relative;
            z-index: 2
        }

        .about-hero-overlay {
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 50% 60% at 50% 50%, rgba(2, 8, 15, .45) 0%, rgba(2, 8, 15, .1) 100%);
            z-index: 1;
        }

        .about-h1 {
            font-size: clamp(30px, 4.8vw, 56px);
            font-weight: 900;
            line-height: 1.18;
            letter-spacing: -1px;
            margin-bottom: 22px;
        }

        .about-sub {
            font-size: 17px;
            color: var(--g1);
            line-height: 1.9;
            max-width: 600px;
            margin: 0 auto
        }

        .about-sub,
        .story-text p,
        .story-note,
        .pillar-d,
        .val-d,
        .val-proof,
        .about-cta .cta-sub {
            text-align: justify !important;
            text-align-last: right;
            text-justify: inter-word;
        }

        .about-sub,
        .about-cta .cta-sub {
            text-align-last: center;
        }

        .about-section-head {
            max-width: 760px;
            margin: 0 auto;
            text-align: center;
        }

        .about-section-head .h2 {
            text-align: center;
        }

        .about-section-head .lead {
            max-width: 620px;
            margin: 0 auto;
            text-align: center !important;
            text-align-last: center;
        }

        .about-split-section {
            padding-block: 110px;
        }

        #mission.about-split-section {
            padding-bottom: 96px;
        }

        .about-values-section {
            margin-top: 0;
            padding-top: 110px;
        }

        /* Story section */
        .story-grid {
            display: grid;
            grid-template-columns:1fr 1fr;
            gap: 72px;
            align-items: center;
            margin-top: 60px;
        }

        .story-text {
        }

        .story-text p {
            font-size: 16px;
            color: var(--g1);
            line-height: 2;
            margin-bottom: 18px
        }

        .story-text p:last-child {
            margin-bottom: 0
        }

        .story-text strong {
            color: var(--white);
            font-weight: 700
        }

        .story-pull {
            font-size: clamp(20px, 2.6vw, 26px);
            font-weight: 800;
            line-height: 1.4;
            letter-spacing: -.4px;
            color: var(--white);
            padding-right: 24px;
            border-right: 3px solid var(--teal);
        }

        .story-year {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: 13px;
            font-weight: 700;
            color: var(--teal);
            letter-spacing: .8px;
            margin-bottom: 24px;
        }

        .story-year::before {
            content: '';
            width: 28px;
            height: 2px;
            background: linear-gradient(90deg, var(--teal), var(--violet));
            border-radius: 1px;
        }

        /* Mission pillars */
        .pillars {
            display: grid;
            grid-template-columns:repeat(3, 1fr);
            gap: 24px;
            margin-top: 52px;
        }

        .pillar {
            background: var(--glass-bg);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--glass-border);
            border-top-color: var(--glass-top);
            border-radius: var(--rl);
            padding: 32px 28px;
            position: relative;
            overflow: hidden;
            box-shadow: 0 20px 50px rgba(0, 0, 0, .3), inset 0 1px 0 var(--glass-top);
            transition: transform .25s var(--ease), box-shadow .25s var(--ease);
        }

        .pillar:hover {
            transform: translateY(-4px);
            box-shadow: 0 28px 60px rgba(0, 0, 0, .4), inset 0 1px 0 var(--glass-top)
        }

        .pillar::before {
            content: '';
            position: absolute;
            top: 0;
            right: 0;
            left: 0;
            height: 2px;
            background: linear-gradient(90deg, var(--teal), var(--violet));
        }

        .pillar-icon {
            width: 44px;
            height: 44px;
            border-radius: 12px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin: 0 auto 20px;
        }

        .pillar-icon.t {
            background: var(--tlo)
        }

        .pillar-icon.v {
            background: var(--vlo)
        }

        .pillar-icon.g {
            background: var(--glo)
        }

        .pillar-t {
            font-size: 17px;
            font-weight: 800;
            color: var(--white);
            margin-bottom: 10px;
            line-height: 1.3;
            text-align: center;
        }

        .pillar-d {
            font-size: 14.5px;
            color: var(--g1);
            line-height: 1.8
        }

        /* Values */
        .values-grid {
            display: grid;
            grid-template-columns:repeat(3, 1fr);
            gap: 24px;
            margin-top: 52px
        }

        .val-card {
            background: var(--glass-bg);
            border: 1px solid var(--glass-border);
            border-top-color: var(--glass-top);
            border-radius: var(--rl);
            padding: 36px 30px;
            position: relative;
        }

        .val-head {
            display: flex;
            align-items: flex-start;
            gap: 12px;
            margin-bottom: 12px;
        }

        .val-num {
            font-size: 13px;
            font-weight: 800;
            color: var(--teal);
            letter-spacing: 1.5px;
            line-height: 1.3;
            padding-top: 3px;
            opacity: .7;
            flex-shrink: 0;
        }

        .val-t {
            font-size: 18px;
            font-weight: 800;
            color: var(--white);
            line-height: 1.3;
            margin: 0
        }

        .val-d {
            font-size: 15px;
            color: var(--g1);
            line-height: 1.85
        }

        .val-proof {
            margin-top: 20px;
            padding: 14px 16px;
            background: rgba(5, 212, 220, .06);
            border: 1px solid rgba(5, 212, 220, .14);
            border-radius: 8px;
            font-size: 13.5px;
            color: var(--teal);
            line-height: 1.6;
            font-style: italic;
        }

        /* Team */
        .about-team-section {
            padding-bottom: 92px;
        }

        .team-grid {
            display: grid;
            grid-template-columns:repeat(3, 1fr);
            gap: 28px;
            margin-top: 52px;
        }

        .team-card {
            background: var(--glass-bg);
            backdrop-filter: var(--glass-blur);
            -webkit-backdrop-filter: var(--glass-blur);
            border: 1px solid var(--glass-border);
            border-top-color: var(--glass-top);
            border-radius: var(--rl);
            overflow: hidden;
            transition: transform .25s var(--ease), box-shadow .25s var(--ease);
        }

        .team-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 24px 56px rgba(0, 0, 0, .4)
        }

        .team-photo {
            width: 100%;
            aspect-ratio: 1/1;
            background: linear-gradient(135deg, rgba(5, 212, 220, .14) 0%, rgba(139, 111, 232, .18) 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
        }

        /* Two stacked photos — B&W default, colour crossfades in on card hover */
        .team-photo img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
            display: block;
            transition: opacity .55s var(--ease), transform .55s var(--ease);
        }

        .team-photo .ti-bw {
            z-index: 0
        }

        .team-photo .ti-color {
            z-index: 1;
            opacity: 0
        }

        .team-card.is-active .team-photo .ti-color {
            opacity: 1
        }

        @media (hover: hover) {
            .team-card:hover .team-photo .ti-color {
                opacity: 1
            }
        }

        .team-photo-fallback {
            font-size: 36px;
            font-weight: 900;
            position: relative;
            z-index: 1;
            background: linear-gradient(130deg, var(--teal) 0%, var(--violet) 100%);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            transition: transform .55s var(--ease);
        }

        .team-info {
            padding: 22px 20px
        }

        .team-name {
            font-size: 16px;
            font-weight: 800;
            color: var(--white);
            margin-bottom: 5px;
            transition: color .3s var(--ease)
        }

        .team-role {
            font-size: 13px;
            color: var(--teal);
            font-weight: 600;
            letter-spacing: .3px;
            line-height: 1.4;
        }

        .team-card.is-active .team-photo img,
        .team-card.is-active .team-photo-fallback {
            transform: scale(1.08)
        }

        .team-card.is-active .team-name {
            color: var(--teal)
        }

        @media (hover: hover) {
            .team-card:hover .team-photo img,
            .team-card:hover .team-photo-fallback {
                transform: scale(1.08)
            }

            .team-card:hover .team-name {
                color: var(--teal)
            }
        }

        /* Teal sheen rising from the bottom of the photo on hover */
        .team-photo::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(180deg, transparent 55%, rgba(5, 212, 220, .22) 100%);
            opacity: 0;
            transition: opacity .4s var(--ease);
        }

        .team-card.is-active .team-photo::after {
            opacity: 1
        }

        @media (hover: hover) {
            .team-card:hover .team-photo::after {
                opacity: 1
            }
        }

        /* Ensure footer renders above fixed about-bg */
        footer {
            position: relative;
            z-index: 1
        }

        /* CTA section overrides for about page */
        .about-cta {
            text-align: center;
            margin-top: 56px;
            padding-top: 128px;
            isolation: isolate;
        }

        .about-cta::before {
            content: "";
            position: absolute;
            top: 42px;
            right: 50%;
            width: min(720px, calc(100% - 48px));
            height: 2px;
            border-radius: 999px;
            transform: translateX(50%);
            background: linear-gradient(90deg, transparent, rgba(5, 212, 220, .58), rgba(139, 111, 232, .46), transparent);
        }

        .about-cta .cta-in {
            display: block;
            max-width: 700px;
            margin: 0 auto;
            opacity: 1;
            transform: none;
        }

        /* ── ARCHITECTURAL BACKGROUND ────────────────────────────── */
        .about-bg {
            position: fixed;
            inset: 0;
            z-index: 0;
            background: radial-gradient(120% 80% at 82% -12%, rgba(5, 212, 220, .10), transparent 55%),
            radial-gradient(120% 90% at 8% 112%, rgba(139, 111, 232, .12), transparent 55%),
            var(--bg);
            overflow: hidden;
            pointer-events: none;
        }

        /* Octagon tessellation grid — 4.8.8 tiling, faded at edges */
        .ab-grid {
            position: absolute;
            inset: -2px;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpolygon points='70.7,100 100,70.7 100,29.3 70.7,0 29.3,0 0,29.3 0,70.7 29.3,100' fill='none' stroke='rgba(5,212,220,0.05)' stroke-width='1'/%3E%3C/svg%3E");
            background-size: 96px 96px;
            mask-image: radial-gradient(ellipse 78% 72% at 50% 42%, #000 0%, transparent 96%);
            -webkit-mask-image: radial-gradient(ellipse 78% 72% at 50% 42%, #000 0%, transparent 96%);
        }

        /* Interactive layer — octagons light up around the cursor */
        .ab-grid-hot {
            position: absolute;
            inset: -2px;
            --mx: 50%;
            --my: 40%;
            background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpolygon points='70.7,100 100,70.7 100,29.3 70.7,0 29.3,0 0,29.3 0,70.7 29.3,100' fill='none' stroke='rgba(5,212,220,0.55)' stroke-width='1.1'/%3E%3C/svg%3E");
            background-size: 96px 96px;
            opacity: 0;
            transition: opacity .5s ease;
            mask-image: radial-gradient(circle 220px at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .35) 45%, transparent 72%);
            -webkit-mask-image: radial-gradient(circle 220px at var(--mx) var(--my), #000 0%, rgba(0, 0, 0, .35) 45%, transparent 72%);
        }

        .about-bg.is-hover .ab-grid-hot {
            opacity: 1
        }

        /* Soft directional glows */
        .ab-glow {
            position: absolute;
            border-radius: 50%;
            filter: blur(70px)
        }

        .ab-glow-1 {
            width: 680px;
            height: 680px;
            top: -16%;
            right: -10%;
            background: radial-gradient(circle, rgba(5, 212, 220, .12), transparent 68%);
            animation: ab-float-a 34s ease-in-out infinite;
        }

        .ab-glow-2 {
            width: 620px;
            height: 620px;
            bottom: -14%;
            left: -8%;
            background: radial-gradient(circle, rgba(139, 111, 232, .14), transparent 68%);
            animation: ab-float-b 42s ease-in-out infinite;
        }

        .ab-vignette {
            position: absolute;
            inset: 0;
            background: radial-gradient(ellipse 110% 100% at 50% 50%, transparent 45%, rgba(2, 8, 15, .72) 100%);
        }

        @keyframes ab-float-a {
            0%, 100% {
                transform: translate(0, 0) scale(1)
            }
            50% {
                transform: translate(-50px, 50px) scale(1.08)
            }
        }

        @keyframes ab-float-b {
            0%, 100% {
                transform: translate(0, 0) scale(1)
            }
            50% {
                transform: translate(60px, -40px) scale(1.06)
            }
        }

        /* ── SECTION REVEAL VARIANTS (about page) ─────────────────── */
        /* Uses individual translate/scale props so `transform` stays free for hover */
        .fi.rv-zoom, .fi.rv-left, .fi.rv-right {
            transform: none
        }

        .fi.rv-zoom {
            translate: 0 30px;
            scale: .96
        }

        .fi.rv-zoom.on {
            translate: 0 0;
            scale: 1
        }

        .fi.rv-right {
            translate: 54px 0
        }

        .fi.rv-right.on {
            translate: 0 0
        }

        .fi.rv-left {
            translate: -54px 0
        }

        .fi.rv-left.on {
            translate: 0 0
        }

        .fi.rv-zoom, .fi.rv-left, .fi.rv-right {
            transition: opacity .8s var(--ease), translate .8s var(--ease), scale .8s var(--ease), transform .3s var(--ease);
        }

        @media (prefers-reduced-motion: reduce) {
            .fi, .fi.rv-zoom, .fi.rv-left, .fi.rv-right {
                transition: none;
                transform: none;
                translate: none;
                scale: none
            }

            .team-photo img {
                transition: none
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .ab-grid, .ab-glow {
                animation: none
            }
        }

        /* ── RESPONSIVE ──────────────────────────────────────────── */
        @media (max-width: 1024px) {
            .team-grid {
                grid-template-columns:repeat(2, 1fr)
            }

            .pillars {
                grid-template-columns:1fr 1fr
            }

            .values-grid {
                grid-template-columns:1fr 1fr
            }
        }

        @media (max-width: 768px) {
            .about-split-section {
                padding-block: 76px;
            }

            #mission.about-split-section {
                padding-bottom: 64px;
            }

            .about-values-section {
                margin-top: 0;
                padding-top: 76px;
            }

            .story-grid {
                grid-template-columns:1fr;
                gap: 40px
            }

            .pillars {
                grid-template-columns:1fr
            }

            .values-grid {
                grid-template-columns:1fr
            }

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

            .about-team-section {
                padding-bottom: 66px;
            }

            .about-cta {
                margin-top: 36px;
                padding-top: 88px;
            }

            .about-cta::before {
                top: 30px;
                width: calc(100% - 32px);
            }

            .about-hero {
                min-height: 55vh;
                padding: 140px 0 80px
            }

            /* Horizontal reveals would overflow narrow screens — fade up instead */
            .fi.rv-left, .fi.rv-right {
                translate: 0 28px
            }

            /* Octagon grid on mobile — visible, slightly sparser than desktop */
            .ab-grid {
                background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cpolygon points='70.7,100 100,70.7 100,29.3 70.7,0 29.3,0 0,29.3 0,70.7 29.3,100' fill='none' stroke='rgba(5,212,220,0.09)' stroke-width='1.15'/%3E%3C/svg%3E");
                background-size: 108px 108px;
                opacity: .92;
                mask-image: radial-gradient(ellipse 96% 92% at 50% 38%, #000 0%, transparent 99%);
                -webkit-mask-image: radial-gradient(ellipse 96% 92% at 50% 38%, #000 0%, transparent 99%);
            }

            .ab-grid-hot {
                display: none
            }

            .ab-glow-1 {
                width: 520px;
                height: 520px;
                opacity: .62;
                filter: blur(52px)
            }

            .ab-glow-2 {
                width: 460px;
                height: 460px;
                opacity: .62;
                filter: blur(52px)
            }

            .ab-vignette {
                background: radial-gradient(ellipse 110% 100% at 50% 50%, transparent 72%, rgba(2, 8, 15, .38) 100%);
            }

            .about-bg {
                background: radial-gradient(120% 80% at 82% -12%, rgba(5, 212, 220, .09), transparent 55%),
                radial-gradient(120% 90% at 8% 112%, rgba(139, 111, 232, .10), transparent 55%),
                var(--bg);
            }

            .sec-bg {
                background: rgba(6, 20, 34, .48)
            }
        }

        @media (max-width: 520px) {
            .team-grid {
                grid-template-columns:1fr 1fr
            }
        }