/* ═══════════════════════════════════════════════
   ABOUT PAGE — SPECIFIC CSS ONLY BELOW
═══════════════════════════════════════════════ */

        /* ── PAGE HERO ── */
        #phero {
            position: relative;
            height: 80vh;
            min-height: 520px;
            display: flex;
            align-items: center;
            overflow: hidden
        }

        .ph-bg {
            position: absolute;
            inset: 0;
            background: url('https://images.unsplash.com/photo-1503387762-592deb58ef4e?w=1800&q=85&auto=format&fit=crop') center/cover no-repeat;
            transform: scale(1.06);
            transition: transform 9s ease;
            will-change: transform;
            filter: saturate(.75)
        }

        #phero.loaded .ph-bg {
            transform: scale(1)
        }

        .ph-ov {
            position: absolute;
            inset: 0;
            background: linear-gradient(105deg, rgba(10, 13, 8, .96) 0%, rgba(30, 40, 20, .88) 50%, rgba(10, 13, 8, .7) 100%)
        }

        .ph-grid {
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(201, 168, 76, .03) 1px, transparent 1px), linear-gradient(90deg, rgba(201, 168, 76, .03) 1px, transparent 1px);
            background-size: 64px 64px
        }

        .ph-inner {
            position: relative;
            z-index: 2;
            max-width: 1200px;
            width: 100%;
            margin: 0 auto;
            padding: 0 5vw;
            padding-top: 80px
        }

        .ph-bread {
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: .65rem;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: rgba(249, 247, 242, .38);
            margin-bottom: 1.8rem;
            opacity: 0;
            animation: fup .8s .2s forwards
        }

        .ph-bread a {
            color: rgba(249, 247, 242, .38);
            text-decoration: none;
            transition: color .3s
        }

        .ph-bread a:hover {
            color: var(--g)
        }

        .ph-bread span {
            color: var(--g)
        }

        .ph-eyebrow {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            font-size: .65rem;
            letter-spacing: .38em;
            text-transform: uppercase;
            color: var(--g);
            margin-bottom: 1.4rem;
            opacity: 0;
            animation: fup .8s .35s forwards
        }

        .ph-eyebrow::before {
            content: '';
            width: 36px;
            height: 1px;
            background: var(--g)
        }

        .ph-h1 {
            font-family: var(--fd);
            font-size: clamp(2.8rem, 6vw, 5.5rem);
            font-weight: 700;
            line-height: 1.06;
            color: var(--w);
            opacity: 0;
            animation: fup .9s .5s forwards
        }

        .ph-h1 em {
            color: var(--g2);
            font-style: italic
        }

        .ph-sub {
            margin-top: 1.4rem;
            font-size: 1rem;
            color: rgba(249, 247, 242, .6);
            line-height: 1.85;
            font-weight: 300;
            max-width: 520px;
            opacity: 0;
            animation: fup .9s .7s forwards
        }

        .ph-scroll {
            position: absolute;
            bottom: 32px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            z-index: 2;
            opacity: 0;
            animation: fin 1s 1.4s forwards
        }

        .ph-dot {
            width: 26px;
            height: 42px;
            border: 1px solid rgba(201, 168, 76, .35);
            border-radius: 13px;
            display: flex;
            justify-content: center;
            padding-top: 6px
        }

        .ph-dot::after {
            content: '';
            width: 4px;
            height: 7px;
            background: var(--g);
            border-radius: 2px;
            animation: sbd 1.8s infinite
        }

        .ph-scroll-txt {
            font-size: .52rem;
            letter-spacing: .3em;
            text-transform: uppercase;
            color: rgba(201, 168, 76, .45)
        }

        /* ── STORY SECTION ── */
        #story {
            background: var(--d2);
            padding: 110px 0;
            overflow: hidden
        }

        .story-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 80px;
            align-items: center
        }

        .story-imgcol {
            position: relative
        }

        .story-img-main {
            width: 100%;
            aspect-ratio: 3/4;
            object-fit: cover;
            filter: brightness(.84) contrast(1.06) saturate(.8);
            display: block
        }

        .story-img-sq {
            position: absolute;
            bottom: -36px;
            right: -36px;
            width: 54%;
            aspect-ratio: 1;
            object-fit: cover;
            border: 6px solid var(--d2);
            filter: brightness(.8)
        }

        .story-gold-bar {
            position: absolute;
            top: 32px;
            left: -16px;
            width: 3px;
            height: 110px;
            background: linear-gradient(to bottom, var(--g), transparent)
        }

        .story-year-badge {
            position: absolute;
            top: 36px;
            right: -28px;
            background: var(--ag);
            border: 1px solid rgba(201, 168, 76, .2);
            padding: 20px 22px;
            text-align: center
        }

        .syb-num {
            font-family: var(--fd);
            font-size: 2.8rem;
            font-weight: 700;
            color: var(--g);
            line-height: 1
        }

        .syb-lbl {
            font-size: .58rem;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: rgba(249, 247, 242, .45);
            margin-top: 3px;
            line-height: 1.4
        }

        .story-body {
            padding-left: 10px
        }

        .story-text {
            margin-top: 1.4rem;
            font-size: .97rem;
            color: rgba(249, 247, 242, .6);
            line-height: 1.95;
            font-weight: 300
        }

        .story-text+.story-text {
            margin-top: 1rem
        }

        .story-quote {
            margin-top: 2.2rem;
            padding: 22px 26px;
            border-left: 3px solid var(--g);
            background: rgba(61, 74, 46, .1)
        }

        .story-quote p {
            font-family: var(--fd);
            font-size: 1.35rem;
            font-style: italic;
            color: rgba(249, 247, 242, .8);
            line-height: 1.6
        }

        .story-quote cite {
            display: block;
            margin-top: 10px;
            font-size: .65rem;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: var(--g);
            font-style: normal
        }

        /* ── STATS STRIP ── */
        #stats-strip {
            background: var(--ag);
            padding: 0;
            border-top: 1px solid rgba(201, 168, 76, .12);
            border-bottom: 1px solid rgba(201, 168, 76, .12)
        }

        .stats-row {
            display: flex
        }

        .stat-item {
            flex: 1;
            padding: 44px 24px;
            text-align: center;
            border-right: 1px solid rgba(201, 168, 76, .1);
            position: relative;
            transition: background .4s;
            cursor: default
        }

        .stat-item:last-child {
            border-right: none
        }

        .stat-item:hover {
            background: rgba(201, 168, 76, .06)
        }

        .stat-item::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--g), transparent);
            transform: scaleX(0);
            transition: transform .5s
        }

        .stat-item:hover::before {
            transform: scaleX(1)
        }

        .stat-num {
            font-family: var(--fd);
            font-size: 3.2rem;
            font-weight: 700;
            color: var(--g);
            line-height: 1
        }

        .stat-lbl {
            font-size: .63rem;
            letter-spacing: .2em;
            text-transform: uppercase;
            color: rgba(249, 247, 242, .45);
            margin-top: 6px
        }

        .stat-desc {
            font-size: .78rem;
            color: rgba(249, 247, 242, .28);
            margin-top: 4px;
            font-weight: 300
        }

        /* ── VISION MISSION ── */
        #vision {
            background: var(--d);
            padding: 110px 0;
            overflow: hidden
        }

        .vm-header {
            text-align: center;
            margin-bottom: 64px
        }

        .vm-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 28px
        }

        .vm-card {
            position: relative;
            padding: 48px 40px;
            border: 1px solid rgba(201, 168, 76, .12);
            overflow: hidden;
            transition: all .5s var(--ease)
        }

        .vm-card::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            height: 2px;
            background: linear-gradient(90deg, transparent, var(--g), transparent);
            transform: scaleX(0);
            transition: transform .5s
        }

        .vm-card:hover {
            border-color: rgba(201, 168, 76, .3);
            box-shadow: 0 20px 60px rgba(0, 0, 0, .35);
            background: rgba(42, 51, 32, .15)
        }

        .vm-card:hover::before {
            transform: scaleX(1)
        }

        .vm-icon-wrap {
            width: 60px;
            height: 60px;
            border: 1px solid rgba(201, 168, 76, .2);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.6rem;
            margin-bottom: 24px;
            transition: all .4s
        }

        .vm-card:hover .vm-icon-wrap {
            border-color: var(--g);
            background: rgba(201, 168, 76, .1)
        }

        .vm-label {
            font-size: .6rem;
            letter-spacing: .3em;
            text-transform: uppercase;
            color: var(--g);
            margin-bottom: 10px
        }

        .vm-title {
            font-family: var(--fd);
            font-size: 1.9rem;
            font-weight: 700;
            color: var(--w);
            margin-bottom: 16px;
            line-height: 1.15
        }

        .vm-text {
            font-size: .9rem;
            color: rgba(249, 247, 242, .55);
            line-height: 1.9;
            font-weight: 300
        }

        .vm-bg-num {
            position: absolute;
            bottom: -10px;
            right: 20px;
            font-family: var(--fd);
            font-size: 8rem;
            font-weight: 700;
            color: rgba(201, 168, 76, .04);
            line-height: 1;
            transition: color .4s
        }

        .vm-card:hover .vm-bg-num {
            color: rgba(201, 168, 76, .07)
        }

        /* ── VALUES ── */
        #values {
            background: var(--d2);
            padding: 110px 0;
            position: relative;
            overflow: hidden
        }

        #values::before {
            content: '';
            position: absolute;
            inset: 0;
            background-image: linear-gradient(rgba(201, 168, 76, .025) 1px, transparent 1px), linear-gradient(90deg, rgba(201, 168, 76, .025) 1px, transparent 1px);
            background-size: 72px 72px
        }

        .values-hd {
            text-align: center;
            margin-bottom: 64px
        }

        .val-sub {
            margin-top: .9rem;
            font-size: .95rem;
            color: rgba(249, 247, 242, .45);
            max-width: 460px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.8
        }

        .values-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 20px;
            position: relative;
            z-index: 1
        }

        .val-card {
            padding: 34px 24px;
            border: 1px solid rgba(201, 168, 76, .1);
            background: rgba(10, 13, 8, .45);
            backdrop-filter: blur(8px);
            position: relative;
            overflow: hidden;
            transition: all .5s var(--ease);
            cursor: default
        }

        .val-card::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 0;
            background: linear-gradient(to top, rgba(61, 74, 46, .3), transparent);
            transition: height .5s
        }

        .val-card:hover {
            border-color: rgba(201, 168, 76, .28);
            transform: translateY(-5px);
            box-shadow: 0 18px 48px rgba(0, 0, 0, .36)
        }

        .val-card:hover::after {
            height: 100%
        }

        .val-icon {
            font-size: 1.8rem;
            margin-bottom: 18px;
            display: block
        }

        .val-num {
            position: absolute;
            top: 14px;
            right: 18px;
            font-family: var(--fd);
            font-size: 2.8rem;
            font-weight: 700;
            color: rgba(201, 168, 76, .05);
            line-height: 1
        }

        .val-name {
            font-family: var(--fd);
            font-size: 1.2rem;
            font-weight: 600;
            color: var(--w);
            margin-bottom: 10px;
            position: relative;
            z-index: 1
        }

        .val-text {
            font-size: .82rem;
            color: rgba(249, 247, 242, .48);
            line-height: 1.8;
            font-weight: 300;
            position: relative;
            z-index: 1
        }

        /* ── TEAM ── */
        #team {
            background: var(--ag);
            padding: 110px 0;
            overflow: hidden
        }

        .team-hd {
            text-align: center;
            margin-bottom: 64px
        }

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

        .team-card {
            position: relative;
            overflow: hidden;
            cursor: default
        }

        .team-card:hover .tc-img {
            transform: scale(1.06);
            filter: brightness(.6) saturate(.7)
        }

        .tc-img {
            width: 100%;
            aspect-ratio: 3/4;
            object-fit: cover;
            filter: brightness(.82) saturate(.75);
            transition: transform .7s var(--ease), filter .5s;
            display: block
        }

        .tc-body {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            padding: 24px 20px;
            background: linear-gradient(to top, rgba(10, 13, 8, .95) 0%, rgba(10, 13, 8, .3) 70%, transparent 100%);
            transform: translateY(8px);
            transition: transform .4s
        }

        .team-card:hover .tc-body {
            transform: none
        }

        .tc-role {
            font-size: .58rem;
            letter-spacing: .24em;
            text-transform: uppercase;
            color: var(--g);
            margin-bottom: 4px;
            opacity: 0;
            transition: opacity .4s .05s
        }

        .team-card:hover .tc-role {
            opacity: 1
        }

        .tc-name {
            font-family: var(--fd);
            font-size: 1.25rem;
            font-weight: 600;
            color: var(--w);
            line-height: 1.2
        }

        .tc-exp {
            font-size: .75rem;
            color: rgba(249, 247, 242, .45);
            margin-top: 4px;
            font-weight: 300;
            opacity: 0;
            transform: translateY(6px);
            transition: all .4s .08s
        }

        .team-card:hover .tc-exp {
            opacity: 1;
            transform: none
        }

        .tc-gold-line {
            position: absolute;
            bottom: 0;
            left: 0;
            right: 100%;
            height: 2px;
            background: var(--g);
            transition: right .5s var(--ease)
        }

        .team-card:hover .tc-gold-line {
            right: 0
        }

        /* ── TIMELINE ── */
        #timeline {
            background: var(--d);
            padding: 110px 0;
            overflow: hidden
        }

        .tl-hd {
            text-align: center;
            margin-bottom: 72px
        }

        .tl-wrap {
            position: relative;
            padding: 0 0 0 0
        }

        .tl-line {
            position: absolute;
            top: 0;
            bottom: 0;
            left: 50%;
            width: 1px;
            background: linear-gradient(to bottom, transparent, rgba(201, 168, 76, .3) 5%, rgba(201, 168, 76, .3) 95%, transparent);
            transform: translateX(-50%)
        }

        .tl-item {
            display: grid;
            grid-template-columns: 1fr 60px 1fr;
            gap: 0;
            margin-bottom: 52px;
            align-items: center
        }

        .tl-item:last-child {
            margin-bottom: 0
        }

        .tl-content {
            padding: 28px 32px;
            border: 1px solid rgba(201, 168, 76, .12);
            background: rgba(15, 18, 10, .6);
            transition: all .45s
        }

        .tl-content:hover {
            border-color: rgba(201, 168, 76, .28);
            background: rgba(42, 51, 32, .18);
            box-shadow: 0 12px 36px rgba(0, 0, 0, .28)
        }

        .tl-item:nth-child(even) .tl-content:first-child {
            grid-column: 3
        }

        .tl-item.left .tl-content {
            text-align: right
        }

        .tl-dot {
            width: 14px;
            height: 14px;
            border-radius: 50%;
            background: var(--g);
            margin: 0 auto;
            position: relative;
            z-index: 1;
            box-shadow: 0 0 0 4px rgba(201, 168, 76, .15), 0 0 0 8px rgba(201, 168, 76, .06)
        }

        .tl-year {
            font-family: var(--fd);
            font-size: 1.5rem;
            font-weight: 700;
            color: var(--g);
            margin-bottom: 6px;
            line-height: 1
        }

        .tl-event {
            font-family: var(--fd);
            font-size: 1.15rem;
            font-weight: 600;
            color: var(--w);
            margin-bottom: 8px;
            line-height: 1.3
        }

        .tl-desc {
            font-size: .82rem;
            color: rgba(249, 247, 242, .5);
            line-height: 1.75;
            font-weight: 300
        }

        /* right-side items: blank left col */
        .tl-right {
            grid-template-areas: "blank dot content"
        }

        .tl-right .tl-blank {
            grid-area: blank
        }

        .tl-right .tl-dot {
            grid-area: dot
        }

        .tl-right .tl-content {
            grid-area: content
        }

        .tl-left {
            grid-template-areas: "content dot blank"
        }

        .tl-left .tl-content {
            grid-area: content;
            text-align: right
        }

        .tl-left .tl-dot {
            grid-area: dot
        }

        .tl-left .tl-blank {
            grid-area: blank
        }

        /* ── AWARDS ── */
        #awards {
            background: var(--d2);
            padding: 100px 0;
            overflow: hidden
        }

        .awards-hd {
            text-align: center;
            margin-bottom: 56px
        }

        .awards-strip {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: center
        }

        .award-pill {
            display: flex;
            align-items: center;
            gap: 14px;
            padding: 18px 28px;
            border: 1px solid rgba(201, 168, 76, .14);
            background: rgba(61, 74, 46, .08);
            transition: all .4s
        }

        .award-pill:hover {
            border-color: rgba(201, 168, 76, .35);
            background: rgba(61, 74, 46, .18);
            transform: translateY(-3px)
        }

        .award-ico {
            font-size: 1.4rem;
            flex-shrink: 0
        }

        .award-txt {
            font-size: .8rem;
            color: rgba(249, 247, 242, .6);
            font-weight: 300;
            line-height: 1.45
        }

        .award-txt strong {
            display: block;
            font-size: .88rem;
            color: var(--w);
            font-weight: 500;
            margin-bottom: 2px
        }

        /* ── CTA BAND ── */
        #cta-band {
            position: relative;
            padding: 110px 0;
            overflow: hidden;
            text-align: center
        }

        .cta-bg {
            position: absolute;
            inset: 0;
            background: url('https://images.unsplash.com/photo-1504307651254-35680f356dfd?w=1600&q=80&auto=format&fit=crop') center/cover no-repeat;
            filter: saturate(.6)
        }

        .cta-bg::after {
            content: '';
            position: absolute;
            inset: 0;
            background: linear-gradient(135deg, rgba(10, 13, 8, .94), rgba(42, 51, 32, .9), rgba(10, 13, 8, .96))
        }

        .cta-inner {
            position: relative;
            z-index: 1
        }

        .cta-ey {
            display: inline-flex;
            align-items: center;
            gap: 12px;
            font-size: .63rem;
            letter-spacing: .36em;
            text-transform: uppercase;
            color: var(--g);
            margin-bottom: 1.2rem
        }

        .cta-ey::before,
        .cta-ey::after {
            content: '';
            width: 36px;
            height: 1px;
            background: var(--g)
        }

        .cta-title {
            font-family: var(--fd);
            font-size: clamp(2rem, 4vw, 3.8rem);
            font-weight: 700;
            color: var(--w);
            line-height: 1.1;
            max-width: 700px;
            margin: 0 auto
        }

        .cta-title em {
            color: var(--g2);
            font-style: italic
        }

        .cta-sub {
            margin-top: 1.2rem;
            font-size: .97rem;
            color: rgba(249, 247, 242, .52);
            max-width: 420px;
            margin-left: auto;
            margin-right: auto;
            line-height: 1.8;
            font-weight: 300
        }

        .cta-btns {
            display: flex;
            gap: 1rem;
            justify-content: center;
            flex-wrap: wrap;
            margin-top: 2.6rem
        }

        /* ── RESPONSIVE (about-page-specific) ── */
        @media(max-width:1024px) {
            .story-grid {
                grid-template-columns: 1fr;
                gap: 48px
            }

            .story-img-sq,
            .story-year-badge,
            .story-gold-bar {
                display: none
            }

            .story-body {
                padding-left: 0
            }

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

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

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

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

            .stats-row {
                flex-wrap: wrap
            }

            .stat-item {
                min-width: 50%;
                border-bottom: 1px solid rgba(201, 168, 76, .08)
            }
        }

        @media(max-width:768px) {
            .nav-links {
                display: none
            }

            .hbg {
                display: flex
            }

            #phero {
                height: 65vh;
                min-height: 420px
            }

            .ph-h1 {
                font-size: clamp(2.2rem, 8vw, 3.2rem)
            }

            .ph-scroll {
                display: none
            }

            .tl-wrap .tl-line {
                left: 20px
            }

            .tl-item {
                grid-template-columns: 40px 1fr;
                grid-template-areas: "dot content" !important
            }

            .tl-item .tl-blank {
                display: none
            }

            .tl-content {
                text-align: left !important
            }

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

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

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

            .footer-bot {
                flex-direction: column;
                text-align: center
            }

            .stat-item {
                min-width: 50%
            }

            .cta-btns {
                flex-direction: column;
                align-items: center
            }

            .awards-strip {
                flex-direction: column;
                align-items: stretch
            }
        }

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

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

            .vm-card {
                padding: 32px 24px
            }

            #drawer a {
                font-size: 1.9rem
            }
        }