/* ==========================================================================
   KVS Theme — compiled CSS (source of truth: assets/scss/*.scss)
   Palette: Deep Maroon #4a0e14, Gold #c9a227, Cream #fbf9f4, Charcoal #29241f
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,500;9..144,600;9..144,700&family=Inter:wght@400;500;600;700&family=IBM+Plex+Mono:wght@500&display=swap');

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin:0; background:#fbf9f4; color:#29241f; font-family:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif; font-size:1rem; line-height:1.65; -webkit-font-smoothing:antialiased; }
img { max-width:100%; height:auto; display:block; }
a { color:inherit; text-decoration:none; }
ul { padding:0; margin:0; list-style:none; }
:focus-visible { outline:3px solid #c9a227; outline-offset:2px; }
@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation-duration:0.001ms !important; animation-iteration-count:1 !important; transition-duration:0.001ms !important; scroll-behavior:auto !important; }
}
.container { max-width:1200px; margin-inline:auto; padding-inline: clamp(1rem, 4vw, 2.5rem); }
.visually-hidden { position:absolute !important; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; }
.skip-link { position:absolute; left:-999px; top:0; background:#4a0e14; color:#fff; padding:12px 20px; z-index:9999; border-radius:0 0 10px 0; }
.skip-link:focus { left:0; }

/* ---------- Typography ---------- */
h1, h2, h3, h4, .font-display { font-family:'Fraunces',Georgia,serif; font-weight:600; letter-spacing:-0.01em; color:#4a0e14; line-height:1.15; margin:0 0 0.5em; }
h1 { font-size: clamp(2.25rem, 4vw + 1rem, 3.75rem); }
h2 { font-size: clamp(1.75rem, 2.5vw + 1rem, 2.75rem); }
h3 { font-size: clamp(1.3rem, 1.2vw + 1rem, 1.75rem); }
.eyebrow { display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono',monospace; font-size:0.75rem; letter-spacing:0.12em; text-transform:uppercase; color:#a9791f; margin-bottom:0.75em; }
.eyebrow::before { content:''; width:22px; height:2px; background:#c9a227; display:inline-block; }
.lede { font-size:1.15rem; color:#57504a; max-width:60ch; }
.text-muted { color:#57504a; }
.text-gold { color:#a9791f; }
.numeral { font-family:'IBM Plex Mono',monospace; }

/* ---------- Buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; font-family:'Inter',sans-serif; font-weight:600; font-size:0.95rem; padding:0.85em 1.6em; border-radius:999px; border:1.5px solid transparent; cursor:pointer; transition:transform .18s ease, box-shadow .18s ease, background .18s ease; }
.btn:hover { transform: translateY(-1px); }
.btn-primary { background:#4a0e14; color:#fff; box-shadow:0 4px 24px rgba(74,14,20,.08); }
.btn-primary:hover { background:#6d1522; box-shadow:0 12px 40px rgba(74,14,20,.14); }
.btn-gold { background:#c9a227; color:#4a0e14; }
.btn-gold:hover { background:#a9791f; color:#fff; }
.btn-outline { background:transparent; border-color:#4a0e14; color:#4a0e14; }
.btn-outline:hover { background:#f7ecec; }
.btn-outline-light { background:transparent; border-color:rgba(255,255,255,.6); color:#fff; }
.btn-outline-light:hover { background:rgba(255,255,255,.12); }
.btn-sm { padding:0.55em 1.2em; font-size:0.85rem; }
.btn-block { width:100%; }

/* ---------- Cards ---------- */
.card { background:#fff; border-radius:24px; box-shadow:0 4px 24px rgba(74,14,20,.08); padding:clamp(1.25rem,2vw,2rem); transition:box-shadow .2s ease, transform .2s ease; }
.card-hover:hover { box-shadow:0 12px 40px rgba(74,14,20,.14); transform:translateY(-3px); }
.card-flush { padding:0; overflow:hidden; }
.card-grid { display:grid; gap:clamp(1.25rem,2vw,1.75rem); grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); }

.profile-card { background:#fff; border-radius:24px; box-shadow:0 4px 24px rgba(74,14,20,.08); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease; }
.profile-card:hover { transform:translateY(-4px); box-shadow:0 12px 40px rgba(74,14,20,.14); }
.profile-card__photo { aspect-ratio:4/5; background:#f1efec center/cover no-repeat; position:relative; }
.profile-card__badge { position:absolute; top:12px; right:12px; background:#c9a227; color:#4a0e14; font-size:.7rem; font-weight:700; padding:4px 10px; border-radius:999px; }
.profile-card__body { padding:1.25rem; flex:1; display:flex; flex-direction:column; gap:6px; }
.profile-card__name { font-family:'Fraunces',serif; font-size:1.15rem; color:#4a0e14; margin:0; }
.profile-card__meta { font-size:.88rem; color:#57504a; }
.profile-card__cta { margin-top:auto; padding-top:12px; }

.stat-item { text-align:center; padding:1.5rem 1rem; }
.stat-item__number { font-family:'Fraunces',serif; font-size:clamp(2rem,3vw,2.75rem); color:#4a0e14; display:block; }
.stat-item__label { font-size:.85rem; text-transform:uppercase; letter-spacing:.08em; color:#a9791f; }

.kolam-divider { height:28px; width:100%; background-image:radial-gradient(#c9a227 1.5px, transparent 1.6px); background-size:18px 18px; background-position:center; opacity:.55; -webkit-mask-image:linear-gradient(to bottom, transparent, black 40%, black 60%, transparent); mask-image:linear-gradient(to bottom, transparent, black 40%, black 60%, transparent); }
.kolam-corner { position:relative; }
.kolam-corner::before { content:''; position:absolute; top:-6px; left:-6px; width:14px; height:14px; border-top:2px solid #c9a227; border-left:2px solid #c9a227; border-radius:4px 0 0 0; }

/* ---------- Forms ---------- */
.form-row { margin-bottom:1.1rem; }
.form-grid { display:grid; grid-template-columns:1fr 1fr; gap:0 1.25rem; }
@media (max-width:768px){ .form-grid { grid-template-columns:1fr; } }
label { display:block; font-weight:600; font-size:.88rem; margin-bottom:.4rem; color:#29241f; }
.form-control { width:100%; padding:.75em 1em; border:1.5px solid #ddd8d0; border-radius:10px; background:#fff; font-family:'Inter',sans-serif; font-size:.95rem; transition:border-color .15s ease, box-shadow .15s ease; }
.form-control:focus { border-color:#c9a227; box-shadow:0 0 0 3px rgba(201,162,39,.18); outline:none; }
textarea.form-control { resize:vertical; min-height:100px; }
.form-help { font-size:.8rem; color:#57504a; margin-top:.3rem; }
.filter-bar { background:#fff; border-radius:24px; box-shadow:0 4px 24px rgba(74,14,20,.08); padding:1.25rem; display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:.9rem; align-items:end; margin-bottom:2rem; }

/* ---------- Badges ---------- */
.badge { display:inline-block; font-size:.72rem; font-weight:700; padding:3px 12px; border-radius:999px; text-transform:uppercase; letter-spacing:.04em; }
.badge-gold { background:#ecd9a0; color:#a9791f; }
.badge-maroon { background:#f7ecec; color:#4a0e14; }
.badge-success { background:#e5f3e8; color:#1e7e34; }
.badge-pending { background:#fbf1de; color:#a9791f; }
.badge-danger { background:#f8e6e8; color:#a71d2a; }

/* ---------- Header ---------- */
.site-header { background:#fbf9f4; border-bottom:1px solid #ddd8d0; position:sticky; top:0; z-index:500; }
.site-header__bar { display:flex; align-items:center; justify-content:space-between; padding-block:.9rem; }
.site-header__brand { display:flex; align-items:center; gap:12px; font-family:'Fraunces',serif; font-size:1.3rem; color:#4a0e14; }
.site-header__brand-mark { width:42px; height:42px; border-radius:50%; background:#4a0e14; color:#c9a227; display:flex; align-items:center; justify-content:center; font-family:'Fraunces',serif; font-size:1.1rem; }

.main-nav { display:flex; align-items:center; gap:clamp(1rem,2vw,2rem); }
.main-nav__link { font-size:.92rem; font-weight:600; color:#29241f; padding:.4rem 0; border-bottom:2px solid transparent; transition:border-color .15s ease, color .15s ease; }
.main-nav__link:hover, .main-nav__link.is-active { color:#4a0e14; border-color:#c9a227; }
@media (max-width:992px){
	.main-nav { display:none; }
	.main-nav.is-open { display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:#fff; padding:1.25rem clamp(1rem,4vw,2.5rem); box-shadow:0 12px 40px rgba(74,14,20,.14); }
}
.nav-toggle { display:none; background:none; border:none; cursor:pointer; }
@media (max-width:992px){ .nav-toggle { display:block; } }
.header-cta { display:flex; align-items:center; gap:.75rem; }

/* ---------- Hero / Sections ---------- */
.hero { background:linear-gradient(135deg,#4a0e14 0%,#6d1522 60%,#7d1c2a 100%); color:#fff; position:relative; overflow:hidden; padding-block:clamp(3.5rem,8vw,7rem); }
.hero::after { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(201,162,39,.35) 1.5px, transparent 1.6px); background-size:26px 26px; opacity:.18; pointer-events:none; }
.hero__inner { position:relative; z-index:2; max-width:680px; }
.hero__eyebrow { color:#ecd9a0; }
.hero h1 { color:#fff; }
.hero__lede { color:rgba(255,255,255,.82); font-size:1.15rem; max-width:55ch; }
.hero__actions { display:flex; gap:1rem; margin-top:2rem; flex-wrap:wrap; }

.section { padding-block:clamp(2.5rem,6vw,5rem); }
.section-alt { background:#f1efec; }
.section-maroon { background:#f7ecec; }
.section-head { max-width:640px; margin-bottom:clamp(1.5rem,3vw,2.5rem); }
.section-head--center { margin-inline:auto; text-align:center; }

/* ---------- Footer ---------- */
.site-footer { background:#29241f; color:rgba(255,255,255,.78); padding-block:clamp(2.5rem,5vw,4rem) 1.5rem; }
.site-footer__grid { display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2rem; }
@media (max-width:992px){ .site-footer__grid { grid-template-columns:1fr 1fr; } }
@media (max-width:576px){ .site-footer__grid { grid-template-columns:1fr; } }
.site-footer h4 { color:#ecd9a0; font-size:1rem; font-family:'Inter',sans-serif; font-weight:700; }
.site-footer__link { display:block; padding:5px 0; font-size:.9rem; color:rgba(255,255,255,.72); }
.site-footer__link:hover { color:#ecd9a0; }
.site-footer__bottom { margin-top:2.5rem; padding-top:1.5rem; border-top:1px solid rgba(255,255,255,.14); font-size:.8rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:.5rem; }

/* ---------- Dashboard ---------- */
.dashboard-shell { display:grid; grid-template-columns:260px 1fr; gap:2rem; padding-block:2.5rem; }
@media (max-width:992px){ .dashboard-shell { grid-template-columns:1fr; } }
.dashboard-nav { background:#fff; border-radius:24px; box-shadow:0 4px 24px rgba(74,14,20,.08); padding:1rem; height:fit-content; }
.dashboard-nav__link { display:flex; align-items:center; gap:10px; padding:.7rem .9rem; border-radius:10px; font-weight:600; font-size:.92rem; color:#29241f; }
.dashboard-nav__link:hover { background:#f7ecec; }
.dashboard-nav__link.is-active { background:#4a0e14; color:#fff; }

.membership-card { background:linear-gradient(135deg,#4a0e14,#6d1522); color:#fff; border-radius:24px; padding:1.75rem; position:relative; overflow:hidden; box-shadow:0 12px 40px rgba(74,14,20,.14); }
.membership-card__id { font-family:'IBM Plex Mono',monospace; letter-spacing:.05em; font-size:1.1rem; color:#ecd9a0; }
.membership-card__name { font-family:'Fraunces',serif; font-size:1.4rem; margin:.4rem 0; }
.membership-card__qr { background:#fff; padding:8px; border-radius:10px; width:96px; height:96px; }
.membership-card__row { display:flex; justify-content:space-between; align-items:flex-end; margin-top:1.25rem; }

.dash-widget { background:#fff; border-radius:24px; box-shadow:0 4px 24px rgba(74,14,20,.08); padding:1.5rem; }

/* ---------- Utility spacing ---------- */
.mt-0{margin-top:0} .mb-0{margin-bottom:0}
.mt-1{margin-top:.5rem} .mb-1{margin-bottom:.5rem}
.mt-2{margin-top:1rem} .mb-2{margin-bottom:1rem}
.mt-3{margin-top:1.5rem} .mb-3{margin-bottom:1.5rem}
.mt-4{margin-top:2.5rem} .mb-4{margin-bottom:2.5rem}
.flex{display:flex} .items-center{align-items:center} .justify-between{justify-content:space-between}
.gap-1{gap:.5rem} .gap-2{gap:1rem} .gap-3{gap:1.5rem}
.text-center{text-align:center}