:root {
    --red: #c8102e;
    --red-dark: #9f0d25;
    --red-soft: #f7e7ea;
    --black: #111111;
    --white: #ffffff;
    --off-white: #ffffff;
    --border: #e3aeb8;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
    margin: 0;
    font-family: 'Montserrat', sans-serif;
    color: var(--black);
    background: var(--white);
    line-height: 1.7;
}

a { color: inherit; }
.site-header {
    min-height: 82px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 5%;
    background: var(--black);
    border-bottom: 4px solid var(--red);
    position: sticky;
    top: 0;
    z-index: 100;
}

.brand { display: flex; align-items: center; gap: 12px; text-decoration: none; font-weight: 800; letter-spacing: 1px; color: white; }
.brand img { width: 58px; height: 58px; object-fit: contain; }
.site-nav { display: flex; align-items: center; gap: 24px; flex-wrap: wrap; justify-content: flex-end; }
.site-nav a { text-decoration: none; font-size: 14px; font-weight: 600; color: white; }
.site-nav a:hover { color: var(--red); }
.nav-cta { background: var(--red); color: white; padding: 10px 18px; border-radius: 999px; }

.hero {
    min-height: 680px;
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    background: linear-gradient(135deg, #111111 0%, #050505 100%);
    color: white;
    text-align: center;
}
.hero-logo-watermark {
    position: absolute;
    inset: 50% auto auto 50%;
    width: min(620px, 75vw);
    height: min(620px, 75vw);
    transform: translate(-50%, -50%);
    background: url('/images/stockland-belles-logo.png') center/contain no-repeat;
    opacity: .16;
    pointer-events: none;
}
.hero-content { position: relative; z-index: 1; max-width: 850px; padding: 50px 25px; }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: 3px; margin: 0 0 14px; }
.hero h1 { font-size: clamp(44px, 8vw, 78px); line-height: 1.05; margin: 0 0 18px; }
.hero-text { font-size: clamp(22px, 3vw, 32px); font-weight: 600; margin: 0 0 10px; }
.hero-subtext { max-width: 700px; margin: 0 auto 28px; font-size: 17px; }
.hero-actions { display: flex; justify-content: center; gap: 12px; flex-wrap: wrap; }

.button { display: inline-block; padding: 13px 24px; border-radius: 999px; text-decoration: none; font-weight: 700; border: 2px solid transparent; }
.button-light, .button-white { background: white; color: var(--red); }
.button-outline { border-color: white; color: white; }
.button-red { background: var(--red); color: white; }

.section { max-width: 1120px; margin: 0 auto; padding: 80px 24px; }
.welcome { text-align: center; max-width: 900px; }
.welcome h2 { font-size: clamp(30px, 5vw, 46px); line-height: 1.2; margin: 0 0 20px; }
.welcome p:last-child { font-size: 17px; }
.red-text { color: var(--red); }
.page-hero .eyebrow { color: var(--red); }

.level-grid, .cards, .sponsor-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 22px;
}
.level-card, .team-card, .sponsor-card {
    background: white;
    border: 1px solid #dddddd;
    border-top: 6px solid var(--red);
    border-radius: 18px;
    padding: 30px;
}
.level-card span { color: var(--red); font-weight: 800; }
.level-card h3, .team-card h2, .sponsor-card h3 { margin: 8px 0 10px; }
.level-card a { color: var(--red); font-weight: 700; text-decoration: none; }

.red-banner {
    background: #111111;
    color: white;
    border-top: 5px solid var(--red);
    border-bottom: 5px solid var(--red);
    padding: 55px max(24px, 7%);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 30px;
}
.red-banner h2 { margin: 0; font-size: clamp(28px, 4vw, 42px); line-height: 1.2; }
.red-banner p { margin-bottom: 0; }

.page-hero {
    background: #111111;
    color: white;
    border-bottom: 5px solid var(--red);
    padding: 90px 7%;
}
.page-hero > div { max-width: 900px; }
.page-hero h1 { margin: 0 0 15px; font-size: clamp(40px, 6vw, 64px); line-height: 1.1; }
.page-hero p:last-child { font-size: 19px; }

.content { max-width: 900px; }
.content h2, .contact h2, .sponsor-intro h2 { font-size: 38px; line-height: 1.2; }

.fixture {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    padding: 20px;
    margin: 12px 0;
    border-left: 5px solid var(--red);
    background: var(--off-white);
}
.small-note { color: #666; margin-top: 25px; }
.sponsor-intro { max-width: 760px; margin-bottom: 35px; }
.logo-placeholder {
    height: 150px; display: grid; place-items: center; background: white;
    border: 2px dashed #e3a7b2; color: var(--red); font-weight: 800;
}
.sponsor-card { text-align: center; }
.sponsor-card .logo-placeholder { margin: -30px -30px 25px; border-radius: 14px 14px 0 0; border-left: 0; border-right: 0; border-top: 0; }
.gallery-placeholder { display: grid; grid-template-columns: repeat(3,1fr); gap: 18px; }
.gallery-placeholder div { min-height: 220px; display: grid; place-items: center; background: var(--red-soft); color: var(--red); font-weight: 800; border-radius: 16px; }

.site-footer {
    background: var(--black); color: white; padding: 55px 7% 25px;
    display: grid; grid-template-columns: 2fr 1fr; gap: 40px;
}
.site-footer img { width: 65px; display: block; margin-bottom: 12px; }
.site-footer strong { font-size: 18px; }
.site-footer p { color: #ddd; }
.footer-links { display: flex; flex-direction: column; gap: 9px; }
.footer-links a { text-decoration: none; }
.footer-links a:hover { color: #ffb6c2; }
.copyright { grid-column: 1 / -1; border-top: 1px solid #444; padding-top: 18px; font-size: 13px; }

@media (max-width: 850px) {
    .site-header { position: static; flex-direction: column; gap: 12px; }
    .site-nav { justify-content: center; gap: 12px 18px; }
    .level-grid, .cards, .sponsor-grid { grid-template-columns: 1fr; }
    .red-banner { flex-direction: column; align-items: flex-start; }
    .gallery-placeholder { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 520px) {
    .brand span { font-size: 14px; }
    .hero { min-height: 600px; }
    .hero-logo-watermark { width: 95vw; height: 95vw; }
    .site-nav a { font-size: 12px; }
    .page-hero { padding: 65px 24px; }
    .gallery-placeholder { grid-template-columns: 1fr; }
    .site-footer { grid-template-columns: 1fr; }
    .copyright { grid-column: auto; }
}


/* MEMBERS & ADMIN */
.member-intro { max-width: 820px; margin-bottom: 35px; }
.member-levels { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.member-level { padding: 28px; background: #f7f7f7; border-left: 5px solid var(--red); border-radius: 12px; }
.member-level h3 { margin-top: 0; color: var(--red); }

.admin-login { min-height: 72vh; display: grid; place-items: center; padding: 60px 20px; background: #f5f5f5; }
.admin-card { width: min(460px, 100%); background: white; padding: 42px; border-top: 7px solid var(--red); box-shadow: 0 12px 35px rgba(0,0,0,.12); border-radius: 14px; }
.admin-card img { width: 90px; margin-bottom: 15px; }
.admin-card h1 { margin-top: 0; }
.member-form { max-width: 700px; display: grid; gap: 9px; }
.member-form input, .member-form select, .admin-card input {
    width: 100%; padding: 13px 14px; border: 1px solid #ccc; border-radius: 7px;
    font-family: inherit; font-size: 15px; margin-bottom: 12px;
}
.member-form label, .admin-card label { font-weight: 700; }
.checkbox { display: flex !important; align-items: center; gap: 10px; margin: 10px 0; }
.checkbox input { width: auto; margin: 0; }
.form-actions { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 12px; }
.button-dark { background: var(--black); color: white; }
.form-error { color: #a00020; background: #ffe7ec; border: 1px solid #e5a4b2; padding: 12px 15px; border-radius: 7px; margin-bottom: 15px; }
.admin-toolbar { display: flex; justify-content: space-between; gap: 15px; align-items: center; margin-bottom: 25px; }
.admin-table-wrap { overflow-x: auto; }
.admin-table { width: 100%; border-collapse: collapse; background: white; }
.admin-table th { background: var(--black); color: white; text-align: left; padding: 13px; }
.admin-table td { padding: 13px; border-bottom: 1px solid #ddd; }
.admin-table tr:nth-child(even) { background: #fafafa; }
.actions { white-space: nowrap; }
.actions a { color: var(--red); font-weight: 700; text-decoration: none; margin-right: 12px; }
.danger-link { color: #8d001d !important; }
.narrow-admin { max-width: 800px; }
@media (max-width: 800px) {
    .member-levels { grid-template-columns: 1fr; }
    .admin-toolbar { align-items: flex-start; flex-direction: column; }
}