.hero{
    position:relative;
    min-height:760px;
    display:grid;
    align-items:stretch;
    overflow:hidden;
    background:var(--navy);
    color:#fff
}
 .hero-bg{
    position:absolute;
    inset:0
}
 .hero-bg img{
    width:100%;
    height:100%;
    object-fit:cover;
    filter:saturate(.96) contrast(1.02)
}
 .hero-bg:after{
    content:"";
    position:absolute;
    inset:0;
    background:radial-gradient(circle at 74% 18%,rgba(200,164,93,.2),transparent 34%),linear-gradient(90deg,rgba(7,13,25,.94),rgba(9,16,30,.84) 36%,rgba(9,16,30,.44) 66%,rgba(9,16,30,.22)),linear-gradient(0deg,rgba(7,13,25,.46),rgba(7,13,25,.04))
}
 .hero-inner{
    position:relative;
    z-index:2;
    max-width:var(--max);
    width:100%;
    margin:0 auto;
    padding:110px 24px 78px;
    display:grid;
    grid-template-columns:minmax(0,690px) 1fr;
    gap:42px;
    align-items:center
}
.hero-inner > div {
    transform: translateY(-40px);
}
.eyebrow{
    display:inline-flex;
    gap:10px;
    align-items:center;
    margin-bottom:22px;
    color:var(--gold2);
    font-weight:900;
    font-size:13px;
    letter-spacing:.13em;
    text-transform:uppercase
}
 .eyebrow:before{
    content:"";
    width:38px;
    height:1px;
    background:var(--gold)
}
 h1{
    margin:0 0 24px;
    max-width:820px;
    font-size:clamp(44px,7vw,86px);
    line-height:.96;
    text-wrap:pretty
}
 .hero-copy{
    margin:0 0 34px;
    max-width:650px;
    font-size:19px;
    color:rgba(255,255,255,.78);
    font-size:clamp(15px, 2.8vw, 19px);
}
 .hero-actions{
    display:flex;
    gap:14px;
    flex-wrap:wrap
}
 .hero-floating{
    align-self:end;
    justify-self:end;
    width:min(360px,100%);
    padding:24px;
    border:1px solid rgba(255,255,255,.18);
    border-radius:28px;
    background:rgba(255,255,255,.1);
    backdrop-filter:blur(16px);
    box-shadow:0 24px 70px rgba(0,0,0,.28)
}
 .hero-floating img{
    width:112px;
    height:90px;
    object-fit:contain;
    display:block;
    margin-bottom:16px
}
 .hero-floating strong{
    display:block;
    font-size:18px;
    margin-bottom:8px
}
 .hero-floating span{
    color:rgba(255,255,255,.72);
    font-size:14px
}
 section{
    padding:86px 24px;
    padding:var(--section-padding) 20px;
}
 .container{
    max-width:var(--max);
    margin:0 auto
}
 .section-head{
    display:grid;
    grid-template-columns:.85fr 1.15fr;
    gap:40px;
    align-items:end;
    margin-bottom:38px
}
 .section-head h2{
    margin:0;
    color:var(--navy);
    font-size:clamp(26px, 6vw, 58px);
    line-height:1;
    text-wrap:pretty
}
 .section-head p{
    margin:0;
    color:var(--muted);
    font-size:17px
}
 .cards{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:18px
}
 .two{
    grid-template-columns:repeat(2,1fr)
}
 .card{
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:28px;
    background:#fff;
    box-shadow:0 16px 42px rgba(13,23,41,.06)
}
 .card h3{
    margin:0 0 10px;
    color:var(--navy);
    font-size:20px
}
 .card p,.card li{
    color:var(--muted)
}
 .num{
    display:inline-grid;
    place-items:center;
    width:42px;
    height:42px;
    border-radius:50%;
    background:#f6ead0;
    color:#7a6127;
    font-weight:900;
    margin-bottom:18px
}
 .placeholder-grid{
    display:grid;
    grid-template-columns:1.15fr .85fr;
    gap:18px;
    align-items:stretch;
    grid-auto-rows: 280px;
}
 .placeholder-grid.three{
    grid-template-columns:repeat(3,1fr)
}

@media (max-width: 960px) {
    .placeholder-grid,
    .placeholder-grid.three {
        grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
        grid-auto-rows: auto;
    }
}

 .photo-placeholder{
    min-height: 250px;
    border-radius: 30px;
    border: 1px dashed rgba(122,97,39,.45);
    background: radial-gradient(circle at 72% 24%,rgba(200,164,93,.22),transparent 32%),
                linear-gradient(135deg,#fffaf0,#eadfc9);
    box-shadow: 0 20px 50px rgba(13,23,41,.08);
    position: relative;
    overflow: hidden;
}
 .photo-placeholder.dark{
    background:linear-gradient(135deg,#14223a,#0d1729);
    border-color:rgba(230,209,155,.45);
    color:#fff
}
 .photo-placeholder.hero-img{
    background-image:linear-gradient(0deg,rgba(13,23,41,.18),rgba(13,23,41,.18));
    background-size:cover;
    background-position:center;
    border-style:solid
}
 .photo-placeholder span{
    display:inline-flex;
    max-width:320px;
    padding:13px 16px;
    border-radius:18px;
    background:rgba(255,253,248,.9);
    border:1px solid rgba(13,23,41,.08);
    color:#4a5568;
    font-size:14px;
    font-weight:800;
    backdrop-filter:blur(10px)
}
 .photo-placeholder.dark span,.photo-placeholder.hero-img span{
    background:rgba(13,23,41,.72);
    border-color:rgba(255,255,255,.14);
    color:#fff
}

.photo-placeholder img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.carousel-wrap{
    position:relative;
    margin-bottom:22px
}
.carousel-item {
    flex: 0 0 calc((100% - 36px)/3);
    height: 260px;
    border-radius: 30px;
    overflow: hidden;
    scroll-snap-align: start;
    position: relative;
}
.carousel{
    display:flex;
    gap:18px;
    overflow-x:auto;
    scroll-snap-type:x mandatory;
    padding:4px 4px 18px;
    scrollbar-width:thin;
    scrollbar-color:rgba(200,164,93,.65) rgba(255,255,255,.08)
}
.carousel::-webkit-scrollbar{
    height:8px
}
.carousel::-webkit-scrollbar-track{
    background:rgba(255,255,255,.08);
    border-radius:999px
}
.carousel::-webkit-scrollbar-thumb{
    background:rgba(200,164,93,.75);
    border-radius:999px
}
.carousel .photo-placeholder{
    flex:0 0 calc((100% - 36px)/3);
    scroll-snap-align:start;
    margin:0
}
.carousel-item img{
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}
.carousel.two .photo-placeholder{
    flex-basis:calc((100% - 18px)/2)
}
.carousel-controls{
    display:flex;
    justify-content:flex-end;
    gap:10px;
    margin-top:10px
}
.carousel-btn{
    width:38px;
    height:38px;
    border-radius:50%;
    border:1px solid rgba(200,164,93,.48);
    background:rgba(255,253,248,.92);
    color:var(--navy);
    font-weight:900;
    cursor:pointer;
    box-shadow:0 10px 28px rgba(13,23,41,.08)
}
.carousel-btn:hover{
    background:#f7edd6
}
.navy-band .carousel-btn{
    background:rgba(255,255,255,.1);
    color:#fff;
    border-color:rgba(230,209,155,.45)
}
.navy-band .carousel-btn:hover{
    background:rgba(230,209,155,.18)
}
 .navy-band{
    background:var(--navy);
    color:#fff;
    position:relative;
    overflow:hidden
}
 .navy-band:before{
    content:"";
    position:absolute;
    inset:-30% -20% auto auto;
    width:540px;
    height:540px;
    border-radius:50%;
    background:radial-gradient(circle,rgba(200,164,93,.22),transparent 62%)
}
 .navy-band .section-head h2{
    color:#fff
}
 .navy-band .section-head p{
    color:rgba(255,255,255,.68)
}
 .member-grid{
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:18px;
    position:relative
}
 .member-tile{
    padding:24px;
    border-radius:24px;
    background:rgba(255,255,255,.07);
    border:1px solid rgba(255,255,255,.12);
    display:flex;
    justify-content:space-between;
    gap:16px;
    align-items:center
}
 .member-tile span{
    color:rgba(255,255,255,.72);
    font-size:14px
}
 .pill{
    white-space:nowrap;
    color:#f3d893;
    border:1px solid rgba(243,216,147,.35);
    border-radius:999px;
    padding:7px 11px;
    font-size:12px;
    font-weight:900
}
 .join-panel{
    border-radius:40px;
    padding:46px;
    background:linear-gradient(135deg,rgba(13,23,41,.96),rgba(23,36,59,.9)),radial-gradient(circle at 80% 18%,rgba(200,164,93,.45),transparent 34%);
    color:#fff;
    display:grid;
    grid-template-columns:1fr auto;
    gap:28px;
    align-items:center;
    box-shadow:var(--shadow)
}
 .join-panel h2{
    margin:0 0 12px;
    font-size:clamp(32px,4vw,52px);
    line-height:1
}
 .join-panel p{
    margin:0;
    color:rgba(255,255,255,.72);
    max-width:700px
}


.event-card {
    height: 250px;   
    min-width: 560px;
    border-radius: 30px;
    border: 1px dashed rgba(122,97,39,.45);
    background: none;
    box-shadow: 0 20px 50px rgba(13,23,41,.08);
    position: relative;
    overflow: hidden;
}

.event-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.event-card:hover img {
    transform: scale(1.1);
}

@media (max-width: 960px) {
    .event-card {
        min-width: 100%;
    }
    .carousel-item{
        min-width: 100%;
    }
}

/* Responsive */
 .dev-note{
    margin-top:18px;
    color:rgba(255,255,255,.52);
    font-size:12px
}
 @media(max-width:960px){
    .hero{
        min-height:auto
    }
    .hero-inner,.section-head,.join-panel{
        grid-template-columns:1fr
    }
    .hero-inner{
        padding:76px 24px 58px
    }
    .hero-floating{
        justify-self:start
    }
    .cards,.cards.two,.member-grid,.placeholder-grid,.placeholder-grid.three{
        grid-template-columns:repeat(auto-fit,minmax(260px,1fr));
    }
    section{
        padding:64px 20px
    }
    .photo-placeholder{
        min-height:220px
    }
    .carousel .photo-placeholder,.carousel.two .photo-placeholder{
        flex-basis:82%;
        min-width:260px
    }
    .carousel-controls{
        justify-content:center
    }
}

@media (max-width:768px){
    .hero-inner{
        grid-template-columns:1fr;
        padding:60px 20px 40px;
        gap:28px;
        text-align:center;
    }

    .hero-actions{
        justify-content:center;
    }

    .hero-floating{
        width:100%;
        max-width:320px;
        margin:0 auto;
    }

    .section-head{
        grid-template-columns:1fr;
        gap:16px;
        text-align:center;
    }

    .join-panel{
        grid-template-columns:1fr;
        text-align:center;
        padding:32px 20px;
    }

    .carousel .photo-placeholder{
        flex:0 0 85%;
    }
}

@media (max-width:480px){
    .hero-inner{
        padding-top:50px;
    }

    .hero-copy{
        font-size:14px;
    }

}