:root{--navy:#071a33;--gold:#d5a84b;--cream:#f5f1e8;--red:#981d1d;--muted:#667085}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Arial,Helvetica,sans-serif;color:#162234;line-height:1.65}.container{width:min(1160px,92%);margin:auto}.narrow{max-width:820px}.center{text-align:center}header{height:82px;position:fixed;inset:0 0 auto;z-index:20;background:rgba(5,15,30,.9);backdrop-filter:blur(12px)}.nav{height:82px;display:flex;align-items:center;justify-content:space-between}.brand{color:white;text-decoration:none;font-weight:800;letter-spacing:3px}.brand b{color:var(--gold);border:1px solid var(--gold);border-radius:50%;padding:2px 8px;margin-right:8px}nav{display:flex;gap:26px;align-items:center}nav a{color:#d8e0ea;text-decoration:none;font-size:14px;font-weight:bold}.join{background:var(--red);padding:10px 18px}.menu{display:none}.hero{padding-top:82px;min-height:780px;overflow:hidden;color:white;background:radial-gradient(circle at 15% 70%,#123f75,transparent 35%),linear-gradient(110deg,#06172e,#091b35 58%,#1a0d08)}.hero-grid{min-height:698px;display:grid;grid-template-columns:1.05fr .95fr;gap:30px;align-items:center}.eyebrow{color:var(--gold);font-size:12px;font-weight:bold;letter-spacing:4px}.hero h1{font-size:clamp(48px,6vw,78px);line-height:1.05;letter-spacing:-2px;margin:14px 0 25px}.lead{font-size:20px;color:#425066}.hero .lead{color:#d5deea}.buttons{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}.btn{padding:14px 20px;text-decoration:none;font-weight:bold;border-radius:2px}.gold{background:var(--gold);color:#142033}.outline{border:1px solid #ffffff66;color:white}.white{background:white;color:var(--navy)}.values{margin-top:40px;color:#c9d3df;font-size:13px;font-weight:bold;word-spacing:8px}.portrait{height:100%;min-height:610px;display:flex;align-items:end;justify-content:center;position:relative}.portrait img{max-height:650px;max-width:100%;z-index:2;filter:drop-shadow(0 25px 25px #0008)}.halo{position:absolute;width:520px;height:520px;border-radius:50%;bottom:75px;background:radial-gradient(circle,rgba(213,168,75,.32),rgba(213,168,75,.04) 55%,transparent 70%)}.caption{position:absolute;z-index:3;bottom:25px;left:4%;padding:13px 17px;border-left:3px solid var(--gold);background:#061224cc;display:flex;flex-direction:column;font-size:12px}.caption span{color:var(--gold)}.section{padding:105px 0}.cream{background:var(--cream)}h2{font-size:clamp(36px,4vw,55px);line-height:1.12;margin:10px 0 22px}.navy{background:var(--navy);color:white}.navy p:not(.eyebrow){color:#d5deea}.about{display:grid;grid-template-columns:1fr 1fr;gap:75px;align-items:center}.about img{width:100%;box-shadow:20px 20px #d5a84b22}.section-head{display:flex;justify-content:space-between;align-items:end;gap:20px}.section-head h2{margin-bottom:0}.section-head input{width:280px;padding:14px;border:1px solid #dce2ea;font-size:15px}.muted{color:var(--muted);max-width:760px}.grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:35px}.card{border:1px solid #e2e7ee;padding:18px;display:flex;align-items:center;justify-content:space-between}.card h3{font-size:16px;margin:0}.card small{color:var(--muted)}.card a{background:#25D366;color:white;padding:8px 12px;text-decoration:none;font-size:13px;font-weight:bold}.card.pending a{background:#7d8793}.watch{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:40px}.watch div{border-top:2px solid var(--gold);padding:20px 5px;color:#9a7a39}.watch b{color:#182438}.cta{background:var(--red);color:white;padding:75px 0}.cta-inner{display:grid;grid-template-columns:1fr auto;gap:40px;align-items:center}.cta p:not(.eyebrow){color:#f1dcdc}footer{background:#040d1b;color:#b9c2cf;padding:42px 0}footer strong{color:white;letter-spacing:2px}@media(max-width:850px){nav{display:none;position:absolute;top:82px;left:0;right:0;background:var(--navy);padding:20px;flex-direction:column;align-items:stretch}nav.open{display:flex}.menu{display:block;background:none;border:0;color:white;font-size:25px}.hero-grid,.about,.cta-inner{grid-template-columns:1fr}.hero-copy{padding-top:45px}.portrait{min-height:480px}.portrait img{max-height:520px}.grid{grid-template-columns:repeat(2,1fr)}.watch{grid-template-columns:repeat(2,1fr)}.section-head{flex-direction:column;align-items:stretch}.section-head input{width:100%}}@media(max-width:520px){header,.nav{height:70px}.hero{padding-top:70px}.hero h1{font-size:43px}.buttons{flex-direction:column}.btn{text-align:center}.grid,.watch{grid-template-columns:1fr}.section{padding:75px 0}.portrait{min-height:410px}.portrait img{max-height:450px}.caption{left:0}.section-head input{width:100%}}
.ndc-btn {
    background: #ffffff;
    color: #102a43;
    border: 2px solid #ffffff;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 14px 26px;
    min-height: 58px;
    border-radius: 6px;
    text-decoration: none;
    font-weight: 700;
    transition: all 0.3s ease;
    line-height: 1.2;
}

.ndc-btn span {
    font-size: 16px;
    font-weight: 800;
}

.ndc-btn small {
    font-size: 11px;
    font-weight: 500;
    opacity: 0.75;
    margin-top: 3px;
}

.ndc-btn:hover {
    background: transparent;
    color: #ffffff;
    transform: translateY(-2px);
}
.brand {
    display: flex;
    align-items: center;
    text-decoration: none;
}

.site-logo {
    height: 52px;
    width: auto;
    display: block;
    object-fit: contain;
}

@media (max-width: 768px) {
    .site-logo {
        height: 42px;
    }
}
/* =========================================
   COMMUNITIES SECTION REDESIGN
========================================= */

#communities {
    padding: 100px 0;
    background: #f7f6f2;
}

#communities .container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 30px;
}


/* HEADER */

.communities-intro {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
}

.communities-intro .eyebrow {
    margin-bottom: 15px;
}

.communities-intro h2 {
    font-size: 52px;
    line-height: 1.1;
    color: #243247;
    margin-bottom: 20px;
}

.communities-intro .intro-text {
    max-width: 720px;
    margin: 0 auto;
    font-size: 18px;
    line-height: 1.7;
    color: #667085;
}


/* COMMUNITY STATS */

.community-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 60px;
    margin: 45px 0 35px;
    text-align: center;
}

.stat-card {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.stat-card strong {
    font-size: 28px;
    font-weight: 700;
    color: #243246;
}

.stat-card span {
    font-size: 17px;
    color: #5f6875;
    font-weight: 500;
}

/* FILTER AREA */

.community-controls {
    max-width: 850px;
    margin: 0 auto 50px;
}

.community-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 20px;
}

.community-tabs button {
    border: 1px solid #d9dee5;
    background: #ffffff;
    color: #243247;
    padding: 12px 22px;
    border-radius: 4px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s ease;
}

.community-tabs button:hover {
    background: #243247;
    color: #ffffff;
    border-color: #243247;
}

.community-tabs button.active {
    background: #b8963e;
    color: #ffffff;
    border-color: #b8963e;
}


/* SEARCH */

.search-wrapper {
    position: relative;
    max-width: 650px;
    margin: 0 auto;
}

.search-wrapper::before {
    content: "⌕";
    position: absolute;
    left: 18px;
    top: 50%;
    transform: translateY(-52%);
    font-size: 24px;
    color: #8b95a1;
}

#search {
    width: 100%;
    padding: 17px 20px 17px 50px;
    border: 1px solid #d9dee5;
    border-radius: 5px;
    font-size: 15px;
    outline: none;
    background: #ffffff;
    color: #243247;
    box-sizing: border-box;
    transition: all 0.3s ease;
}

#search:focus {
    border-color: #b8963e;
    box-shadow: 0 0 0 3px rgba(184, 150, 62, 0.12);
}


/* COMMUNITY GRID */

#grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}


/* COMMUNITY CARD */

.community-card {
    background: #ffffff;
    border: 1px solid #e2e6eb;
    padding: 25px;
    border-radius: 6px;
    transition: all 0.3s ease;
}

.community-card:hover {
    transform: translateY(-5px);
    border-color: #b8963e;
    box-shadow: 0 12px 30px rgba(36, 50, 71, 0.08);
}

.community-card h3 {
    font-size: 18px;
    color: #243247;
    margin-bottom: 8px;
}

.community-card p {
    font-size: 14px;
    color: #77808d;
    margin-bottom: 22px;
}


/* JOIN BUTTON */

.community-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: #243247;
    color: #ffffff;
    text-decoration: none;
    padding: 12px 20px;
    font-size: 13px;
    font-weight: 700;
    border-radius: 3px;
    transition: all 0.3s ease;
}

.community-btn:hover {
    background: #b8963e;
    color: #ffffff;
}


/* COMING SOON */

.coming-soon {
    display: inline-block;
    padding: 10px 16px;
    background: #f1f2f4;
    color: #8b95a1;
    font-size: 13px;
    font-weight: 600;
    border-radius: 3px;
}


/* MOBILE */

@media (max-width: 900px) {

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

}


@media (max-width: 600px) {

    #communities {
        padding: 70px 0;
    }

    #communities .container {
        padding: 0 20px;
    }

    .communities-intro h2 {
        font-size: 36px;
    }

    .community-stats {
        gap: 10px;
    }

    .stat-item {
        min-width: 140px;
        flex: 1;
    }

    .community-tabs {
        flex-wrap: wrap;
    }

    #grid {
        grid-template-columns: 1fr;
    }

}
.community-footer {
    text-align: center;
    margin-top: 70px;
    padding-top: 50px;
    border-top: 1px solid #e2e6eb;
}

.community-footer h3 {
    font-size: 24px;
    color: #243247;
    margin-bottom: 12px;
}

.community-footer p {
    color: #667085;
    margin-bottom: 25px;
}

.start-community-btn {
    display: inline-block;
    padding: 14px 28px;
    background: #b8963e;
    color: #ffffff;
    text-decoration: none;
    font-weight: 700;
    border-radius: 3px;
}

.start-community-btn:hover {
    background: #243247;
}
/* ==========================================
   COMMUNITY PAGE FINAL POLISH
========================================== */

/* Main community section */
#communities {
    padding: 80px 0 100px;
}

#communities .container {
    max-width: 1180px;
    margin: 0 auto;
    padding: 0 35px;
}


/* Centre the heading area */
#communities .section-head,
#communities .communities-intro {
    text-align: center;
    justify-content: center;
}

#communities .section-head {
    display: block;
}

#communities .section-head h2,
#communities h2 {
    margin-bottom: 18px;
}


/* Description */
#communities .muted {
    max-width: 850px;
    margin: 0 auto;
    text-align: center;
    line-height: 1.7;
}


/* Statistics */
.community-stats,
.stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 35px;
    margin: 35px auto 30px;
    flex-wrap: wrap;
}

.community-stats span,
.stats span {
    color: #5d6875;
    font-size: 15px;
}


/* FILTER BUTTON AREA */

.community-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 25px 0 18px;
    flex-wrap: wrap;
}


/* Style every filter button */

.community-tabs button,
.filters button,
.filter-btn {
    border: 1px solid #d8dde3;
    background: #ffffff;
    color: #26364a;
    padding: 10px 20px;
    border-radius: 4px;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all .25s ease;
}


/* Hover */

.community-tabs button:hover,
.filters button:hover,
.filter-btn:hover {
    background: #26364a;
    color: #ffffff;
    border-color: #26364a;
}


/* Active */

.community-tabs button.active,
.filters button.active,
.filter-btn.active {
    background: #b9913d;
    color: #ffffff;
    border-color: #b9913d;
}


/* SEARCH */

.search-wrapper {
    max-width: 720px;
    margin: 0 auto 50px;
}

#search {
    display: block;
    width: 100%;
    height: 52px;
    padding: 0 20px;
    border: 1px solid #d8dde3;
    border-radius: 5px;
    background: #ffffff;
    color: #26364a;
    font-size: 15px;
    outline: none;
    box-sizing: border-box;
    transition: all .25s ease;
}

#search::placeholder {
    color: #9aa3ad;
}

#search:focus {
    border-color: #b9913d;
    box-shadow: 0 0 0 3px rgba(185, 145, 61, 0.12);
}


/* COMMUNITY GRID */

#grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    width: 100%;
}


/* COMMUNITY CARDS */

.community-card {
    background: #ffffff;
    border: 1px solid #e1e5e9;
    padding: 24px;
    min-height: 130px;
    border-radius: 5px;
    box-sizing: border-box;

    display: flex;
    flex-direction: column;
    justify-content: space-between;

    transition: transform .25s ease,
                box-shadow .25s ease,
                border-color .25s ease;
}


.community-card:hover {
    transform: translateY(-4px);
    border-color: #b9913d;
    box-shadow: 0 10px 30px rgba(0,0,0,.08);
}


.community-card h3 {
    color: #26364a;
    font-size: 18px;
    margin: 0 0 7px;
}


.community-card p {
    color: #77818d;
    font-size: 14px;
    margin: 0 0 18px;
}


/* JOIN BUTTON */

.community-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: fit-content;

    padding: 11px 18px;

    background: #26364a;
    color: #ffffff;

    text-decoration: none;

    font-size: 13px;
    font-weight: 700;

    border-radius: 3px;

    transition: all .25s ease;
}


.community-btn:hover {
    background: #b9913d;
    color: #ffffff;
}


/* MOBILE */

@media (max-width: 900px) {

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

}


@media (max-width: 600px) {

    #communities .container {
        padding: 0 20px;
    }

    #grid {
        grid-template-columns: 1fr;
    }

    .community-stats,
    .stats {
        gap: 15px;
    }

    .community-tabs {
        gap: 8px;
    }

}
/* =========================================
   COMMUNITIES SECTION ALIGNMENT
========================================= */

.communities-section {
    text-align: center;
}

.community-intro {
    max-width: 850px;
    margin: 0 auto 45px;
    text-align: center;
}

.community-intro .eyebrow {
    text-align: center;
}

.community-intro h2 {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
}

.community-intro p {
    text-align: center;
    max-width: 760px;
    margin-left: auto;
    margin-right: auto;
}


/* Statistics */

.community-stats {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 55px;
    margin: 30px auto 35px;
}


/* Filter Tabs */

.community-tabs {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    gap: 12px;
    margin: 0 auto 20px;
}


/* Search */

.search-wrapper {
    max-width: 850px;
    margin: 0 auto 45px;
}


/* Mobile Responsiveness */

@media (max-width: 768px) {

    .community-intro {
        text-align: left;
    }

    .community-intro .eyebrow,
    .community-intro h2,
    .community-intro p {
        text-align: left;
    }

    .community-stats {
        gap: 20px;
        flex-wrap: wrap;
    }

}