/* =========================================================
   SOUTHPORT KEY CLUB — ABOUT PAGE
   ========================================================= */


/* =========================================================
   ABOUT HERO
   ========================================================= */

.about-hero {
    position: relative;
    min-height: 500px;

    display: flex;
    align-items: center;
    justify-content: center;

    isolation: isolate;
    overflow: hidden;

    background:
        radial-gradient(
            circle at 78% 18%,
            rgba(247, 189, 50, 0.24),
            transparent 27%
        ),
        radial-gradient(
            circle at 12% 82%,
            rgba(21, 101, 216, 0.25),
            transparent 30%
        ),
        linear-gradient(
            145deg,
            #07162e 0%,
            var(--navy) 48%,
            var(--navy-2) 100%
        );
}


/* Giant word in background */

.about-hero::before {
    content: "ABOUT";

    position: absolute;
    z-index: -1;

    right: -0.05em;
    bottom: -0.12em;

    color: transparent;

    -webkit-text-stroke:
        2px rgba(255, 255, 255, 0.055);

    font-size: clamp(8rem, 18vw, 16rem);
    font-weight: 950;

    line-height: 0.8;
    letter-spacing: -0.09em;

    pointer-events: none;
}


/* Decorative ring */

.about-hero::after {
    content: "";

    position: absolute;
    z-index: -1;

    width: 380px;
    height: 380px;

    top: -170px;
    left: -130px;

    border:
        55px solid rgba(247, 189, 50, 0.065);

    border-radius: 50%;
}


.about-hero-content {
    position: relative;
    z-index: 2;

    width: min(850px, calc(100% - 44px));

    padding: 70px 30px;

    text-align: center;
}


/* Small label */

.about-hero-content::before {
    content: "SOUTHPORT KEY CLUB";

    display: inline-block;

    margin-bottom: 22px;
    padding: 8px 15px;

    border:
        1px solid rgba(247, 189, 50, 0.4);

    border-radius: 999px;

    background:
        rgba(255, 255, 255, 0.04);

    color: var(--gold);

    font-size: 0.7rem;
    font-weight: 900;

    letter-spacing: 0.22em;

    backdrop-filter: blur(12px);
}


.about-hero h1 {
    margin: 0 0 22px;

    color: var(--white);

    font-size: clamp(3rem, 7vw, 5.6rem);
    font-weight: 950;

    line-height: 0.94;

    letter-spacing: -0.065em;

    text-shadow:
        0 14px 40px rgba(0, 0, 0, 0.25);
}


.hero-subtitle {
    max-width: 650px;

    margin: 0 auto;

    color: #c6d5ec;

    font-size: clamp(1rem, 2vw, 1.22rem);
    font-weight: 550;

    line-height: 1.75;

    letter-spacing: 0.01em;
}


/* =========================================================
   OUR STORY
   ========================================================= */

.our-story {
    position: relative;

    padding: 130px 22px;

    background:
        linear-gradient(
            180deg,
            #ffffff 0%,
            #fbfcff 100%
        );

    overflow: hidden;
}


/* Giant decorative number/shape */

.our-story::before {
    content: "01";

    position: absolute;

    top: 35px;
    left: max(20px, calc((100vw - var(--content)) / 2));

    color:
        rgba(10, 39, 82, 0.045);

    font-size: clamp(7rem, 13vw, 12rem);
    font-weight: 950;

    letter-spacing: -0.08em;

    line-height: 1;

    pointer-events: none;
}


.story-container {
    position: relative;
    z-index: 1;

    width:
        min(calc(100% - 40px), var(--content));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        minmax(0, 1.45fr)
        minmax(280px, 0.75fr);

    gap: 85px;

    align-items: center;
}


.story-text {
    position: relative;

    padding-left: 32px;
}


/* Vertical gold line */

.story-text::before {
    content: "";

    position: absolute;

    top: 5px;
    left: 0;

    width: 5px;
    height: 85px;

    border-radius: 999px;

    background:
        linear-gradient(
            var(--gold),
            #ffd75e
        );

    box-shadow:
        0 8px 22px rgba(247, 189, 50, 0.25);
}


.story-text::after {
    content: "OUR STORY";

    display: block;

    order: -1;

    margin-bottom: 12px;

    color: var(--blue);

    font-size: 0.72rem;
    font-weight: 950;

    letter-spacing: 0.24em;

    text-transform: uppercase;
}


.story-text h2 {
    margin: 0 0 28px;

    max-width: 700px;

    color: var(--navy);

    font-size: clamp(2.4rem, 4vw, 3.4rem);
    font-weight: 950;

    line-height: 1.05;

    letter-spacing: -0.052em;
}


.story-text p {
    max-width: 720px;

    margin: 0 0 22px;

    color: var(--muted);

    font-size: 1.04rem;

    line-height: 1.9;
}


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


/* =========================================================
   STORY STATS
   ========================================================= */

.story-stats {
    display: grid;

    grid-template-columns: 1fr;

    gap: 18px;
}


.story-stat {
    position: relative;

    padding: 32px 26px;

    background:
        linear-gradient(
            145deg,
            #f8fbff,
            #edf4ff
        );

    border:
        1px solid rgba(21, 101, 216, 0.11);

    border-radius: 22px;

    overflow: hidden;

    text-align: left;

    box-shadow:
        0 10px 35px rgba(12, 40, 82, 0.06);

    transition:
        transform 220ms ease,
        box-shadow 220ms ease,
        border-color 220ms ease;
}


.story-stat::before {
    content: "";

    position: absolute;

    width: 90px;
    height: 90px;

    right: -35px;
    top: -35px;

    border:
        20px solid rgba(247, 189, 50, 0.11);

    border-radius: 50%;

    transition:
        transform 300ms ease;
}


.story-stat::after {
    content: "";

    position: absolute;

    bottom: 0;
    left: 0;

    width: 0;
    height: 4px;

    background:
        linear-gradient(
            90deg,
            var(--gold),
            #ffd65a
        );

    transition:
        width 250ms ease;
}


.story-stat:hover {
    transform:
        translateX(7px);

    border-color:
        rgba(21, 101, 216, 0.23);

    box-shadow:
        0 18px 40px rgba(12, 40, 82, 0.11);
}


.story-stat:hover::before {
    transform:
        rotate(12deg)
        scale(1.08);
}


.story-stat:hover::after {
    width: 100%;
}


.story-stat .stat-number {
    position: relative;

    display: block;

    margin-bottom: 9px;

    color: var(--navy);

    font-size: clamp(2.7rem, 4vw, 3.8rem);
    font-weight: 950;

    line-height: 0.95;

    letter-spacing: -0.06em;
}


.story-stat .stat-label {
    position: relative;

    color: var(--blue);

    font-size: 0.72rem;
    font-weight: 900;

    letter-spacing: 0.18em;

    text-transform: uppercase;
}


/* =========================================================
   WHAT WE DO
   ========================================================= */

.what-we-do {
    position: relative;

    padding: 125px 22px;

    background:
        radial-gradient(
            circle at 90% 10%,
            rgba(247, 189, 50, 0.09),
            transparent 24%
        ),
        linear-gradient(
            180deg,
            #f3f7fd,
            #edf3fb
        );

    overflow: hidden;
}


.what-we-do::before {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    left: -270px;
    bottom: -240px;

    border:
        65px solid rgba(21, 101, 216, 0.045);

    border-radius: 50%;
}


.section-header {
    position: relative;
    z-index: 2;

    width:
        min(calc(100% - 40px), var(--content));

    margin: 0 auto 60px;

    text-align: center;
}


.section-header .eyebrow {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin: 0 0 14px;

    color: var(--blue);

    font-size: 0.72rem;
    font-weight: 950;

    letter-spacing: 0.23em;

    text-transform: uppercase;
}


.section-header .eyebrow::before,
.section-header .eyebrow::after {
    content: "";

    width: 25px;
    height: 2px;

    background: var(--gold);

    border-radius: 99px;
}


.section-header h2 {
    margin: 0;

    color: var(--navy);

    font-size: clamp(2.3rem, 4.5vw, 3.6rem);
    font-weight: 950;

    line-height: 1;

    letter-spacing: -0.055em;
}


/* =========================================================
   ACTIVITY CARDS
   ========================================================= */

.activities-grid {
    position: relative;
    z-index: 2;

    width:
        min(calc(100% - 40px), var(--content));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(3, 1fr);

    gap: 26px;
}


.activity-card {
    position: relative;

    min-height: 240px;

    padding: 35px;

    background:
        rgba(255, 255, 255, 0.9);

    border:
        1px solid rgba(12, 40, 82, 0.09);

    border-radius: 24px;

    overflow: hidden;

    box-shadow:
        0 12px 35px rgba(12, 40, 82, 0.06);

    transition:
        transform 240ms ease,
        box-shadow 240ms ease,
        border-color 240ms ease;
}


.activity-card::before {
    content: "";

    position: absolute;

    width: 120px;
    height: 120px;

    top: -70px;
    right: -60px;

    background:
        var(--gold);

    border-radius: 50%;

    opacity: 0.10;

    transition:
        transform 260ms ease,
        opacity 260ms ease;
}


.activity-card::after {
    content: "";

    position: absolute;

    left: 35px;
    bottom: 0;

    width: 45px;
    height: 4px;

    background: var(--blue);

    border-radius:
        999px 999px 0 0;

    transition:
        width 250ms ease;
}


.activity-card:hover {
    transform:
        translateY(-9px);

    border-color:
        rgba(21, 101, 216, 0.20);

    box-shadow:
        0 25px 55px rgba(12, 40, 82, 0.12);
}


.activity-card:hover::before {
    transform:
        scale(1.25);

    opacity: 0.16;
}


.activity-card:hover::after {
    width: 100px;
}


.activity-icon {
    position: relative;
    z-index: 1;

    display: grid;

    place-items: center;

    width: 64px;
    height: 64px;

    margin-bottom: 25px;

    background:
        linear-gradient(
            135deg,
            rgba(21, 101, 216, 0.11),
            rgba(247, 189, 50, 0.15)
        );

    border:
        1px solid rgba(21, 101, 216, 0.10);

    border-radius: 18px;

    font-size: 2rem;

    transition:
        transform 220ms ease;
}


.activity-card:hover .activity-icon {
    transform:
        rotate(-5deg)
        scale(1.07);
}


.activity-card h3 {
    position: relative;
    z-index: 1;

    margin: 0 0 13px;

    color: var(--navy);

    font-size: 1.28rem;
    font-weight: 900;

    letter-spacing: -0.03em;
}


.activity-card p {
    position: relative;
    z-index: 1;

    margin: 0;

    color: var(--muted);

    font-size: 0.95rem;

    line-height: 1.75;
}


/* =========================================================
   LEADERSHIP
   ========================================================= */

.leadership {
    position: relative;

    padding: 125px 22px 140px;

    background:
        #ffffff;

    overflow: hidden;
}


.leadership::before {
    content: "LEAD";

    position: absolute;

    left: -20px;
    bottom: -40px;

    color:
        rgba(12, 40, 82, 0.025);

    font-size: clamp(8rem, 17vw, 15rem);
    font-weight: 950;

    letter-spacing: -0.09em;

    line-height: 0.8;

    pointer-events: none;
}


.leadership-grid {
    position: relative;

    width:
        min(calc(100% - 40px), var(--content));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 24px;
}


.leader-card {
    position: relative;

    padding:
        42px 25px 32px;

    background:
        linear-gradient(
            180deg,
            #f8fbff,
            #f3f7fc
        );

    border:
        1px solid rgba(12, 40, 82, 0.09);

    border-radius: 24px;

    text-align: center;

    overflow: hidden;

    transition:
        transform 220ms ease,
        box-shadow 220ms ease;
}


/* Gold ceiling */

.leader-card::before {
    content: "";

    position: absolute;

    top: 0;
    left: 0;

    width: 100%;
    height: 5px;

    background:
        linear-gradient(
            90deg,
            var(--blue),
            var(--gold)
        );

    transform:
        scaleX(0);

    transform-origin: left;

    transition:
        transform 260ms ease;
}


.leader-card:hover {
    transform:
        translateY(-8px);

    box-shadow:
        0 22px 45px rgba(12, 40, 82, 0.11);
}


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


.leader-avatar {
    position: relative;

    width: 92px;
    height: 92px;

    margin: 0 auto 24px;

    display: flex;
    align-items: center;
    justify-content: center;

    background:
        linear-gradient(
            145deg,
            var(--navy),
            var(--blue)
        );

    border:
        6px solid white;

    border-radius: 50%;

    box-shadow:
        0 0 0 3px rgba(247, 189, 50, 0.45),
        0 12px 30px rgba(12, 40, 82, 0.18);

    transition:
        transform 230ms ease;
}


.leader-card:hover .leader-avatar {
    transform:
        translateY(-4px)
        scale(1.05);
}


.avatar-initials {
    color: var(--white);

    font-size: 1.6rem;
    font-weight: 900;

    letter-spacing: -0.03em;
}


.leader-card h3 {
    margin: 0 0 8px;

    color: var(--navy);

    font-size: 1.14rem;
    font-weight: 900;

    letter-spacing: -0.025em;
}


.leader-role {
    display: inline-block;

    margin: 0;

    padding:
        6px 11px;

    background:
        rgba(21, 101, 216, 0.08);

    border-radius: 999px;

    color: var(--blue);

    font-size: 0.67rem;
    font-weight: 900;

    text-transform: uppercase;
}

/* =========================================================
   PHOTO GALLERY
   ========================================================= */

.photo-gallery {
    position: relative;
    
    padding: 125px 22px;
    
    background:
        radial-gradient(
            circle at 10% 90%,
            rgba(247, 189, 50, 0.10),
            transparent 28%
        ),
        linear-gradient(
            180deg,
            #ffffff,
            #f8fbff
        );
    
    overflow: hidden;
}

.photo-gallery::before {
    content: "";
    
    position: absolute;
    
    width: 380px;
    height: 380px;
    
    right: -180px;
    top: -160px;
    
    border:
        55px solid rgba(21, 101, 216, 0.05);
    
    border-radius: 50%;
}

.gallery-header {
    position: relative;
    z-index: 2;
    
    width:
        min(calc(100% - 40px), var(--content));
    
    margin: 0 auto 60px;
    
    text-align: center;
}

.gallery-header .eyebrow {
    display: inline-flex;
    
    align-items: center;
    
    gap: 10px;
    
    margin: 0 0 14px;
    
    color: var(--blue);
    
    font-size: 0.72rem;
    font-weight: 950;
    
    letter-spacing: 0.23em;
    
    text-transform: uppercase;
}

.gallery-header .eyebrow::before,
.gallery-header .eyebrow::after {
    content: "";
    
    width: 25px;
    height: 2px;
    
    background: var(--gold);
    
    border-radius: 99px;
}

.gallery-header h2 {
    margin: 0;
    
    color: var(--navy);
    
    font-size: clamp(2.3rem, 4.5vw, 3.6rem);
    font-weight: 950;
    
    line-height: 1;
    
    letter-spacing: -0.055em;
}

.gallery-grid {
    position: relative;
    z-index: 2;
    
    width:
        min(calc(100% - 40px), var(--content));
    
    margin: 0 auto;
    
    display: grid;
    
    grid-template-columns:
        repeat(2, 1fr);
    
    gap: 32px;
}

.gallery-item {
    position: relative;
    
    overflow: hidden;
    
    border-radius: 24px;
    
    box-shadow:
        0 15px 40px rgba(12, 40, 82, 0.08);
}

.gallery-image-wrapper {
    position: relative;
    
    width: 100%;
    padding-top: 70%;
    
    overflow: hidden;
    
    border-radius: 24px;
}

.gallery-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    object-fit: cover;
    
    transition: transform 0.7s cubic-bezier(0.4, 0, 0.2, 1);
    
    animation: gentlePulse 5s ease-in-out infinite;
}

.gallery-item:nth-child(2) .gallery-image {
    animation-delay: 0.7s;
}

@keyframes gentlePulse {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.04);
    }
}

.gallery-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    
    background:
        linear-gradient(
            to top,
            rgba(7, 22, 46, 0.88),
            rgba(7, 22, 46, 0.4),
            transparent
        );
    
    display: flex;
    align-items: flex-end;
    
    padding: 32px;
    
    opacity: 0;
    
    transition: opacity 0.5s ease;
}

.gallery-caption {
    color: var(--white);
    
    font-size: 1.25rem;
    font-weight: 800;
    
    transform: translateY(25px);
    
    transition: transform 0.5s ease;
    
    letter-spacing: -0.02em;
}

.gallery-item:hover .gallery-image {
    transform: scale(1.12);
    animation: none;
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-item:hover .gallery-caption {
    transform: translateY(0);
}

/* =========================================================
   PARTNERS
   ========================================================= */

.partners {
    position: relative;

    padding: 125px 22px;

    background:
        radial-gradient(
            circle at 90% 15%,
            rgba(247, 189, 50, 0.18),
            transparent 27%
        ),
        linear-gradient(
            145deg,
            #07162e,
            var(--navy)
        );

    overflow: hidden;
}


.partners::before {
    content: "";

    position: absolute;

    width: 450px;
    height: 450px;

    top: -250px;
    left: -180px;

    border:
        65px solid rgba(255, 255, 255, 0.025);

    border-radius: 50%;
}


.partners .section-header {
    position: relative;
}


.partners .section-header .eyebrow {
    color: var(--gold);
}


.partners .section-header h2 {
    color: var(--white);
}


.partners-list {
    position: relative;
    z-index: 2;

    width:
        min(calc(100% - 40px), var(--content));

    margin: 0 auto;

    display: grid;

    grid-template-columns:
        repeat(2, 1fr);

    gap: 25px;
}


.partner-item {
    position: relative;

    padding:
        38px 36px 38px 42px;

    background:
        rgba(255, 255, 255, 0.065);

    border:
        1px solid rgba(255, 255, 255, 0.09);

    border-radius: 22px;

    backdrop-filter:
        blur(14px);

    overflow: hidden;

    transition:
        transform 220ms ease,
        background 220ms ease,
        border-color 220ms ease;
}


.partner-item::before {
    content: "";

    position: absolute;

    top: 22%;
    left: 0;

    width: 5px;
    height: 56%;

    background:
        var(--gold);

    border-radius:
        0 999px 999px 0;

    transition:
        height 220ms ease,
        top 220ms ease;
}


.partner-item:hover {
    transform:
        translateY(-6px);

    background:
        rgba(255, 255, 255, 0.10);

    border-color:
        rgba(247, 189, 50, 0.27);
}


.partner-item:hover::before {
    top: 10%;

    height: 80%;
}


.partner-item h3 {
    margin: 0 0 13px;

    color: var(--gold);

    font-size: 1.3rem;
    font-weight: 900;

    letter-spacing: -0.025em;
}


.partner-item p {
    margin: 0;

    color: #b9c9df;

    font-size: 0.95rem;

    line-height: 1.75;
}


/* =========================================================
   JOIN CTA
   ========================================================= */

.join-cta {
    position: relative;

    padding:
        135px 22px;

    background:
        linear-gradient(
            135deg,
            #f3f7fd,
            #ffffff
        );

    overflow: hidden;
}


.join-cta::before {
    content: "";

    position: absolute;

    width: 420px;
    height: 420px;

    left: -170px;
    bottom: -220px;

    background:
        radial-gradient(
            circle,
            rgba(247, 189, 50, 0.17),
            transparent 68%
        );

    border-radius: 50%;
}


.join-cta::after {
    content: "JOIN";

    position: absolute;

    top: 50%;
    right: -0.03em;

    transform:
        translateY(-50%);

    color: transparent;

    -webkit-text-stroke:
        2px rgba(12, 40, 82, 0.045);

    font-size: clamp(8rem, 18vw, 16rem);
    font-weight: 950;

    letter-spacing: -0.09em;

    line-height: 1;

    pointer-events: none;
}


.join-cta .cta-content {
    position: relative;
    z-index: 2;

    width:
        min(calc(100% - 40px), 780px);

    margin: 0 auto;

    padding:
        60px 45px;

    text-align: center;

    background:
        rgba(255, 255, 255, 0.78);

    border:
        1px solid rgba(12, 40, 82, 0.09);

    border-radius: 28px;

    box-shadow:
        0 24px 60px rgba(12, 40, 82, 0.09);

    backdrop-filter:
        blur(14px);
}


.join-cta .cta-content::before {
    content: "";

    display: block;

    width: 56px;
    height: 5px;

    margin:
        0 auto 24px;

    background:
        var(--gold);

    border-radius:
        999px;
}


.join-cta h2 {
    margin:
        0 0 18px;

    color: var(--navy);

    font-size:
        clamp(2.4rem, 5vw, 3.8rem);

    font-weight: 950;

    line-height: 1;

    letter-spacing: -0.055em;
}


.join-cta p {
    max-width: 580px;

    margin:
        0 auto 34px;

    color: var(--muted);

    font-size: 1.08rem;

    line-height: 1.7;
}


/* If your CTA has a button */

.join-cta .btn,
.join-cta .cta-btn {
    display: inline-flex;

    align-items: center;
    justify-content: center;

    padding:
        15px 27px;

    border: 0;

    border-radius:
        999px;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            #0c4d9f
        );

    color: white;

    text-decoration: none;

    font-size: 0.95rem;
    font-weight: 850;

    box-shadow:
        0 10px 25px rgba(21, 101, 216, 0.24);

    transition:
        transform 180ms ease,
        box-shadow 180ms ease;
}


.join-cta .btn:hover,
.join-cta .cta-btn:hover {
    transform:
        translateY(-3px);

    box-shadow:
        0 16px 32px rgba(21, 101, 216, 0.3);
}


/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 980px) {

    .story-container {
        grid-template-columns:
            1fr;

        gap: 55px;
    }

    .story-stats {
        grid-template-columns:
            repeat(3, 1fr);
    }

    .story-stat:hover {
        transform:
            translateY(-5px);
    }

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

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

    .gallery-grid {
        grid-template-columns:
            1fr;
    }

}


@media (max-width: 720px) {

    .about-hero {
        min-height: 430px;
    }

    .about-hero h1 {
        font-size:
            clamp(2.8rem, 13vw, 4rem);
    }

    .about-hero::before {
        font-size: 7rem;

        bottom: 0;
    }

    .our-story,
    .what-we-do,
    .leadership,
    .partners,
    .join-cta {
        padding:
            90px 18px;
    }

    .story-text {
        padding-left: 22px;
    }

    .story-stats {
        grid-template-columns:
            1fr;
    }

    .activities-grid {
        grid-template-columns:
            1fr;
    }

    .leadership-grid {
        grid-template-columns:
            1fr;
    }

    .partners-list {
        grid-template-columns:
            1fr;
    }

    .activity-card {
        min-height: auto;
    }

    .join-cta .cta-content {
        padding:
            45px 25px;
    }

}