:root {
  --navy: #17233C;
  --navy-2: #243456;
  --orange: #E87500;
  --orange-dark: #C95700;
  --gold: #D4A72C;
  --maroon: #7A1F1F;
  --cream: #FFF8EC;
  --cream-border: #F0E4CE;
  --gray-border: #E8E8E8;
  --text: #202020;
  --text-muted: #666666;
  --text-mute2: #888888;
  --success-bg: #E8F6EE; --success-fg: #18794E;
  --warn-bg: #FFF4E0; --warn-fg: #B26A00;
  --danger-bg: #FCEBEA; --danger-fg: #B42318;
  --placeholder-bg: repeating-linear-gradient(135deg, #F5EEE2, #F5EEE2 8px, #EFE5D5 8px, #EFE5D5 16px);
  --radius: 14px;
  --radius-sm: 8px;
  --shadow-soft: 0 2px 10px rgba(23,35,60,.04);
  --shadow-lift: 0 20px 44px rgba(23,35,60,.1);
}

* { text-wrap: pretty; }

body {
  margin: 0;
  font-family: 'Poppins', system-ui, -apple-system, sans-serif;
  color: var(--text);
  background: #fff;
  -webkit-font-smoothing: antialiased;
}
.font-devanagari { font-family: 'Noto Sans Devanagari', sans-serif; }
.font-display { font-family: 'Playfair Display', serif; }

a { color: var(--orange); text-decoration: none; }
a:hover { color: var(--orange-dark); }
::selection { background: var(--orange); color: #fff; }

img { max-width: 100%; }
.img-placeholder { background: var(--placeholder-bg); }

.hero-carousel { width:100%; overflow:hidden; }
.embla { width:100%; overflow:hidden; }
.embla__container { display:flex; }
.embla__slide { flex:0 0 100%; min-width:0; }
.embla__slide img { display:block; width:100%; height:auto; }

/* ---------------- Utility text/section styles ---------------- */
.eyebrow {
  font-size: 12px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--orange); font-weight: 600;
}
.eyebrow-light { color: var(--gold); }
.section-title {
  margin: 14px 0 0; font-weight: 700; letter-spacing: -.02em; color: var(--navy);
  font-size: clamp(26px, 3.4vw, 40px); line-height: 1.22;
}
.section-divider {
  display: flex; align-items: center; gap: 8px; margin-top: 18px;
}
.section-divider .line { width: 44px; height: 2px; background: linear-gradient(90deg, transparent, var(--gold)); }
.section-divider .dot { width: 8px; height: 8px; transform: rotate(45deg); background: var(--orange); }
.section-divider.center { justify-content: center; }

.bg-cream { background: var(--cream); }
.bg-navy { background: var(--navy); color: #fff; }
.border-cream { border: 1px solid var(--cream-border) !important; }

/* ---------------- Buttons ---------------- */
.btn-brand {
  border: 0; border-radius: var(--radius-sm); background: var(--orange); color: #fff;
  font-weight: 600; padding: 14px 28px; box-shadow: 0 10px 26px rgba(232,117,0,.3);
  transition: background .2s, transform .2s;
}
.btn-brand:hover, .btn-brand:focus { background: var(--orange-dark); color: #fff; transform: translateY(-2px); }
.btn-outline-brand {
  border: 1px solid var(--orange); border-radius: var(--radius-sm); background: #fff; color: var(--orange);
  font-weight: 600; padding: 13px 24px; transition: background .2s, color .2s;
}
.btn-outline-brand:hover { background: var(--orange); color: #fff; }
.btn-outline-light-drs {
  border: 1px solid rgba(255,255,255,.32); border-radius: var(--radius-sm); background: rgba(255,255,255,.06); color: #fff;
  font-weight: 600; padding: 15px 28px; transition: background .2s, border-color .2s;
}
.btn-outline-light-drs:hover { background: rgba(255,255,255,.14); border-color: var(--gold); color: #fff; }
.btn-maroon { border: 0; border-radius: var(--radius-sm); background: var(--maroon); color: #fff; font-weight: 600; padding: 14px; transition: background .2s; }
.btn-maroon:hover { background: #5f1717; color: #fff; }

/* ---------------- Top bar + header ---------------- */
.topbar { background: var(--navy); color: #cfd5e2; font-size: 12.5px; }
.topbar a { color: #cfd5e2; }
.topbar a:hover { color: var(--gold); }
.topbar .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--gold); }
.topbar-inner { min-height: 38px; }

/* Flash messages float as a toast stack instead of pushing page content down —
   keeps them out of the dead zone above each page's hero/breadcrumb. */
.flash-toast-stack { position: fixed; top: 130px; left: 50%; transform: translateX(-50%); z-index: 1500; width: min(92vw, 480px); display: grid; gap: 10px; }
@media (max-width: 767.98px) { .flash-toast-stack { top: 110px; } }
.flash-toast { box-shadow: 0 18px 40px rgba(23,35,60,.18); margin: 0; }

.site-header { background: rgba(255,255,255,.97); backdrop-filter: blur(14px); border-bottom: 1px solid var(--gray-border); box-shadow: 0 1px 24px rgba(23,35,60,.06); position: sticky; top: 0; z-index: 900; }
.site-header .accent-bar { height: 3px; background: linear-gradient(90deg, var(--orange), var(--gold) 42%, var(--maroon)); }
.brand-mark {
  width: 46px; height: 46px; border-radius: 50%;
  background: linear-gradient(150deg, var(--orange), var(--orange-dark) 60%, var(--maroon));
  display: grid; place-items: center; box-shadow: 0 6px 18px rgba(232,117,0,.28); position: relative; flex: none;
}
.brand-mark::after { content:''; position:absolute; inset:3px; border:1px solid rgba(255,255,255,.5); border-radius:50%; }
.brand-mark span { font-family: 'Noto Sans Devanagari', sans-serif; font-weight: 700; font-size: 19px; color: #fff; }
.brand-name { font-weight: 700; font-size: 16.5px; letter-spacing: -.015em; color: var(--navy); line-height: 1.15; }
.brand-sub { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: #888; font-weight: 500; margin-top: 2px; }
.brand-logo-img { width:46px; height:46px; border-radius:50%; object-fit:cover; }

.main-nav { gap: 2px; }
.main-nav .nav-link { border: 0; background: none; padding: 9px 13px; font-size: 14.5px; font-weight: 500; color: var(--navy); border-radius: 8px; transition: color .18s, background .18s; position: relative; }
.main-nav .nav-link:hover, .main-nav .nav-link.active { background: var(--cream); color: var(--orange); }
.main-nav .nav-link.active::after { content:''; position:absolute; left:13px; right:13px; bottom:2px; height:2px; border-radius:2px; background: linear-gradient(90deg, var(--orange), var(--gold)); }

.icon-btn { border: 1px solid var(--gray-border); background: #fff; color: var(--navy); border-radius: 8px; width: 44px; height: 44px; display: grid; place-items: center; font-size: 17px; transition: border-color .2s, color .2s; }
.icon-btn:hover { border-color: var(--orange); color: var(--orange); }

/* ---------------- Hero ---------------- */
.hero { position: relative; min-height: min(80vh, 700px); display: flex; align-items: center; background: var(--navy); overflow: hidden; }
.hero .hero-slide { position: absolute; inset: 0; }
.hero .hero-slide img { width: 100%; height: 100%; object-fit: cover; }
.hero-overlay-1 { position:absolute; inset:0; background: linear-gradient(100deg, rgba(23,35,60,.93) 0%, rgba(23,35,60,.78) 42%, rgba(122,31,31,.55) 100%); }
.hero-overlay-2 { position:absolute; inset:0; background: radial-gradient(1100px 520px at 78% 22%, rgba(212,167,44,.22), transparent 70%); }
.hero-pill { display:inline-flex; align-items:center; gap:10px; padding:8px 16px 8px 10px; border:1px solid rgba(212,167,44,.45); background:rgba(212,167,44,.12); border-radius:100px; color:#F0D89B; font-size:11.5px; font-weight:600; letter-spacing:.16em; text-transform:uppercase; }
.hero-pill .pulse-dot { width:7px; height:7px; border-radius:50%; background: var(--gold); animation: drsPulse 2s infinite; }
.hero h1 { margin: 26px 0 0; font-family:'Noto Sans Devanagari', sans-serif; font-weight:700; font-size: clamp(30px,5vw,58px); line-height:1.22; color:#fff; letter-spacing:-.01em; }
.hero p.lead-text { margin:22px 0 0; max-width:560px; font-size: clamp(15px,1.6vw,18.5px); line-height:1.7; color: rgba(255,255,255,.78); }
.hero-fact { display:flex; align-items:center; gap:12px; }
.hero-fact .icon { width:42px; height:42px; border-radius:10px; background: rgba(232,117,0,.18); border:1px solid rgba(232,117,0,.4); display:grid; place-items:center; color:#F3A24E; font-size:17px; flex: none; }
.hero-fact .label { display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color: rgba(255,255,255,.5); font-weight:500; }
.hero-fact .value { color:#fff; font-weight:600; font-size:15.5px; }

.hero-card { background: rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.16); backdrop-filter: blur(16px); border-radius:16px; padding:26px; box-shadow: 0 30px 70px rgba(0,0,0,.3); }
.countdown-box { background: rgba(23,35,60,.55); border:1px solid rgba(212,167,44,.24); border-radius:12px; padding:14px 6px; text-align:center; }
.countdown-box .v { font-weight:700; font-size: clamp(20px,3vw,28px); color:#fff; line-height:1; }
.countdown-box .l { margin-top:7px; font-size:10px; letter-spacing:.14em; text-transform:uppercase; color: rgba(255,255,255,.5); font-weight:500; }
.quick-action { display:flex; align-items:center; gap:13px; width:100%; text-align:left; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.04); border-radius:10px; padding:12px 14px; color:#fff; transition: background .2s, border-color .2s; }
.quick-action:hover { background: rgba(232,117,0,.16); border-color: rgba(232,117,0,.5); color: #fff; }
.quick-action .qicon { width:36px; height:36px; border-radius:9px; background: rgba(212,167,44,.16); display:grid; place-items:center; color:#E2C471; font-size:16px; flex:none; }

@keyframes drsPulse { 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.35;transform:scale(.82)} }
@keyframes drsRise { from{opacity:0; transform: translateY(14px)} to{opacity:1; transform:none} }
.reveal { animation: drsRise .5s ease both; }

/* ---------------- Stats strip ---------------- */
.stat-value { font-weight:700; font-size: clamp(28px,4vw,42px); color: var(--maroon); line-height:1; letter-spacing:-.02em; }
.stat-rule { margin:12px auto 0; width:26px; height:2px; background: var(--gold); }
.stat-label { margin-top:12px; font-size:13.5px; color: var(--text-muted); font-weight:500; }

/* ---------------- Cards ---------------- */
.card-drs { background:#fff; border:1px solid var(--gray-border); border-radius: var(--radius); transition: transform .28s, box-shadow .28s, border-color .28s; }
.card-cream { background:#fff; border:1px solid var(--cream-border); border-radius: var(--radius); }
.card-cream:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: var(--gold); }

.highlight-card { height:100%; background:#fff; border:1px solid var(--cream-border); border-radius: var(--radius); padding: clamp(20px,2.4vw,30px); box-shadow: 0 2px 10px rgba(23,35,60,.04); transition: transform .28s, box-shadow .28s, border-color .28s; }
.highlight-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lift); border-color: var(--gold); }
.highlight-icon { display:grid; place-items:center; width:48px; height:48px; border-radius:12px; background: linear-gradient(145deg,#FFF3E0,#FFE8CC); color: var(--orange-dark); font-size:20px; }
.highlight-big { margin-top:22px; font-weight:700; font-size: clamp(22px,2.6vw,30px); color: var(--maroon); letter-spacing:-.02em; line-height:1.1; }
.highlight-label { margin-top:10px; font-size:14px; color: var(--text-muted); line-height:1.6; }

/* schedule / event card image + date badge */
.ev-thumb { position:relative; aspect-ratio:16/10; overflow:hidden; background: var(--placeholder-bg); }
.ev-thumb img { width:100%; height:100%; object-fit:cover; }
.date-badge { position:absolute; left:14px; top:14px; background:#fff; border-radius:10px; padding:8px 12px; text-align:center; box-shadow:0 8px 20px rgba(0,0,0,.18); min-width:56px; }
.date-badge .dd { font-weight:700; font-size:19px; color: var(--orange); line-height:1; }
.date-badge .mon { font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:#888; font-weight:600; margin-top:2px; }
.date-badge-inset { left:16px; top:16px; }
.date-badge-static { position:static; min-width:46px; }
.dot-sep { width:4px; height:4px; border-radius:50%; background:var(--gray-border); }
.flag-pill { background:var(--cream); border:1px solid var(--cream-border); color:var(--orange-dark); border-radius:6px; padding:4px 10px; font-size:11px; font-weight:600; }
.flag-pill-lg { background:var(--cream); border:1px solid var(--cream-border); color:var(--orange-dark); border-radius:6px; padding:6px 12px; font-size:12px; font-weight:600; }
.btn-pad-details { font-size:14px; padding:11px 20px; }
.not-found-pad { padding:100px 0; }
.overlay-gold-radial { background: radial-gradient(900px 460px at 80% 10%,rgba(212,167,44,.3),transparent 70%); }
.plan-header-row { min-height:26px; }
.plan-period-pad { padding-bottom:5px; }
.plan-feat-text { color:#444; }
.highlight-card-outlined { border:1px solid var(--gray-border); }
.btn-pad-cta { font-size:16px; padding:17px 34px; }
.overlay-gold-radial-sm { background: radial-gradient(800px 380px at 20% 0%,rgba(232,117,0,.24),transparent 70%); }
.fs-clamp-h4-reg { font-size: clamp(25px,3.6vw,40px); }
.success-check-circle { width:82px; height:82px; margin:0 auto; border-radius:50%; background:#E8F6EE; display:grid; place-items:center; color:#18794E; font-size:36px; }
.shadow-soft-drs { box-shadow: var(--shadow-soft); }
.fs-clamp-h4-lg { font-size: clamp(21px,2.6vw,28px); }
.map-caption-text { color:#8a7f6d; }
.auth-section-min-h { min-height:70vh; }

/* ---------------- Live telecast player ---------------- */
.overlay-orange-radial-tl { background: radial-gradient(900px 420px at 20% 0%, rgba(232,117,0,.2), transparent 68%); }
.text-white-68 { color: rgba(255,255,255,.68) !important; }
.live-player-frame { position:relative; border-radius:16px; overflow:hidden; aspect-ratio:16/9; background:#0f1728; border:1px solid rgba(255,255,255,.12); box-shadow:0 30px 70px rgba(0,0,0,.4); }
.live-player-iframe { width:100%; height:100%; border:0; }
.live-player-fallback-img { width:100%; height:100%; object-fit:cover; opacity:.5; }
.live-player-fallback-overlay { position:absolute; inset:0; background:linear-gradient(to top, rgba(15,23,40,.92), rgba(15,23,40,.6)); }
.live-player-fallback-msg { position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; padding:20px; }
.live-badge-pill { position:absolute; left:18px; top:18px; display:flex; align-items:center; gap:8px; border-radius:6px; padding:7px 12px; font-size:11.5px; font-weight:700; letter-spacing:.1em; color:#fff; }
.live-badge-on { background:#D22B2B; }
.live-badge-off { background:rgba(255,255,255,.16); }
.live-badge-dot { width:7px; height:7px; border-radius:50%; background:#fff; animation: drsPulse 1.4s infinite; }
.live-viewers-pill { position:absolute; right:18px; top:18px; background:rgba(0,0,0,.5); backdrop-filter:blur(6px); color:#fff; border-radius:6px; padding:7px 12px; font-size:12px; font-weight:500; }
.mem-mobile-nav { background:var(--navy); width:272px; }
.mem-mobile-link { color:#9aa4b7; background:transparent; }
.mem-mobile-link.active { color:#fff; background: rgba(232,117,0,.18); }
.member-card-crest { background:linear-gradient(150deg,var(--orange),var(--maroon)); display:grid; place-items:center; border:1px solid rgba(212,167,44,.6); }
.member-card-photo { border:1px solid rgba(212,167,44,.5); }
.member-card-photo-lg { width:80px; height:96px; border-radius:8px; border:1px solid rgba(212,167,44,.5); }
.member-card-divider { border-top:1px solid rgba(255,255,255,.15); }
.admin-login-body { min-height:100vh; display:flex; align-items:center; }
.admin-login-icon { width:56px; height:56px; border-radius:14px; background:linear-gradient(150deg,var(--orange),var(--maroon)); display:grid; place-items:center; color:#fff; font-size:24px; }
.admin-body { background:#F6F7F9; }
.admin-crest-icon { width:40px; height:40px; border-radius:10px; background:linear-gradient(150deg,var(--orange),var(--maroon)); display:grid; place-items:center; color:#fff; font-size:17px; }
.admin-mobile-nav { background:var(--navy); width:266px; }
.admin-avatar-badge { width:40px; height:40px; border-radius:10px; background:var(--navy); color:#fff; display:grid; place-items:center; font-weight:600; font-size:13.5px; }
.btn-pad-view-all { padding:8px 16px; font-size:13px; }
.row-unread { background: #FFFBF3; }
.thumb-90x60 { width:90px; height:60px; object-fit:cover; }
.thumb-110x60 { width:110px; height:60px; object-fit:cover; }
.thumb-60x60 { width:60px; height:60px; object-fit:cover; }
.avatar-sm-sq { border-radius:6px; }
.avatar-sm-slide { border-radius:6px; width:60px; height:36px; }
.btn-pad-filter { padding:12px; }
.btn-pad-nowrap { white-space:nowrap; padding:10px 16px; }
.gallery-thumb-clip { overflow:hidden; }
.btn-pad-xs { font-size:11px; padding:3px 8px; }
.settings-logo-preview { width:40px; height:40px; border-radius:50%; object-fit:cover; }
.settings-about-preview { width:70px; height:50px; object-fit:cover; }
.member-view-photo { width:110px; height:110px; object-fit:cover; border:3px solid var(--cream); box-shadow:0 0 0 2px var(--gold); }
.mini-label { font-size:12px; }
.btn-pad-save-notes { padding:8px 18px; font-size:13.5px; }

/* Team */
.team-card { text-align:center; border:1px solid var(--gray-border); border-radius: var(--radius); padding:0; background:#fff; transition: border-color .25s, box-shadow .25s, transform .25s; height: 100%; }
.team-card:hover { border-color: var(--gold); box-shadow: 0 18px 40px rgba(23,35,60,.09); transform: translateY(-4px); }
.team-avatar { width:96px; height:96px; margin:0 auto; border-radius:50%; overflow:hidden; background: var(--placeholder-bg); border:2px solid var(--cream); box-shadow: 0 0 0 2px var(--gold); }
.team-avatar img { width:100%; height:100%; object-fit:cover; }
.team-name { margin-top:0; font-weight:600; font-size:17px; color: var(--navy); line-height:1.35; }
.team-role { margin-top:5px; font-size:14.5px; color: var(--orange); font-weight:500; }
.team-info { padding: 0px 5px 10px 5px; }
.team-image { position: relative; width: 100%; line-height: 0; }
.team-image::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 15%; background: linear-gradient(to bottom, hsla(0, 0%, 100%, 0) 0%, hsla(0, 0%, 100%, 0.013) 8.1%, hsla(0, 0%, 100%, 0.049) 15.5%, hsla(0, 0%, 100%, 0.104) 22.5%, hsla(0, 0%, 100%, 0.175) 29%, hsla(0, 0%, 100%, 0.259) 35.3%, hsla(0, 0%, 100%, 0.352) 41.2%, hsla(0, 0%, 100%, 0.45) 47.1%, hsla(0, 0%, 100%, 0.55) 52.9%, hsla(0, 0%, 100%, 0.648) 58.8%, hsla(0, 0%, 100%, 0.741) 64.7%, hsla(0, 0%, 100%, 0.825) 71%, hsla(0, 0%, 100%, 0.896) 77.5%, hsla(0, 0%, 100%, 0.951) 84.5%, hsla(0, 0%, 100%, 0.987) 91.9%, hsl(0, 0%, 100%) 100%); pointer-events: none; }
.team-image img { display: block; width: 100%; height: auto; border-radius: var(--radius); }

/* Gallery */
.gal-tile { position:relative; border-radius: var(--radius); overflow:hidden; cursor:pointer; aspect-ratio:1/1; background: var(--placeholder-bg); display:block; }
.gal-tile img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition: transform .6s ease; }
.gal-tile:hover img { transform: scale(1.08); }
.gal-tile .gal-overlay { position:absolute; left:0; right:0; bottom:0; height:35%; z-index:0; background:linear-gradient(to top,rgba(23,35,60,1) 0%,rgba(23,35,60,.99) 25%,rgba(23,35,60,.98) 50%,rgba(23,35,60,0) 100%); }
.gal-tile .gal-caption { position:absolute; left:10px; right:10px; bottom:8px; color:#fff; }
.gal-cat-btn { border:1px solid var(--gray-border); background:#fff; color: var(--text-muted); border-radius:8px; font-weight:500; font-size:14px; padding:11px 20px; transition: all .2s; }
.gal-cat-btn:hover, .gal-cat-btn.active { border-color: var(--orange); color: var(--orange); background: var(--cream); }

/* News */
.news-cat-badge { position:absolute; left:12px; top:12px; background: var(--maroon); color:#fff; border-radius:6px; padding:5px 10px; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }
.news-cat-badge-dark { background: rgba(23,35,60,.9); }
.featured-badge { background:var(--maroon); color:#fff; border-radius:6px; padding:5px 11px; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; }

/* Membership plan cards */
.plan-card { height:100%; background:#fff; border:1.5px solid var(--gray-border); border-radius:16px; padding: clamp(24px,2.6vw,34px); display:flex; flex-direction:column; transition: box-shadow .28s, border-color .28s, transform .2s; }
.plan-card.featured { border-color: var(--gold); box-shadow: 0 24px 60px rgba(23,35,60,.14); transform: translateY(-6px); }
.plan-badge { background: linear-gradient(120deg, var(--gold), var(--orange)); color:#fff; border-radius:100px; padding:6px 14px; font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; }
.plan-price { font-weight:700; font-size:42px; line-height:.95; color: var(--navy); letter-spacing:-.03em; }
.plan-feat-check { width:19px; height:19px; border-radius:50%; background: var(--cream); border:1px solid var(--cream-border); display:grid; place-items:center; color: var(--gold); font-size:9px; flex:none; margin-top:2px; }

/* Forms (public) */
.form-control-drs, textarea.form-control-drs, select.form-control-drs {
  width:100%; border:1px solid var(--gray-border); border-radius:8px; padding:13px 15px; font-size:14.5px; outline:none; transition: border-color .2s; background:#fff; font-family: inherit;
}
.form-control-drs:focus { border-color: var(--orange); box-shadow: none; }
.form-label-drs { display:block; font-size:13px; font-weight:500; color: var(--navy); margin-bottom:7px; }
.req { color: var(--orange); }

/* Footer */
.site-footer { background: var(--navy); color:#cfd5e2; border-top:3px solid var(--gold); }
.site-footer a { color:#9aa4b7; }
.site-footer a:hover { color: var(--cream); }
.footer-heading { font-size:11.5px; letter-spacing:.16em; text-transform:uppercase; color: var(--gold); font-weight:600; }
.social-btn { width:40px; height:40px; border-radius:10px; border:1px solid rgba(255,255,255,.14); display:grid; place-items:center; color:#cfd5e2; font-size:16px; transition: all .2s; }
.social-btn:hover { background: var(--orange); border-color: var(--orange); color:#fff; }

/* ---------------- Portal (Member + Admin) shared layout ---------------- */
.portal-wrap { display:flex; min-height:100vh; background:#F6F7F9; }
.portal-sidebar { width:268px; flex:none; background: var(--navy); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto; }
.portal-sidebar .brand-block { padding:22px 20px; border-bottom:1px solid rgba(255,255,255,.09); display:flex; align-items:center; gap:12px; }
.portal-nav { padding:12px 10px; flex:1; }
.portal-nav a { width:100%; display:flex; align-items:center; gap:12px; text-align:left; border:0; background:transparent; color:#9aa4b7; border-radius:9px; padding:12px 14px; font-size:14.5px; font-weight:500; margin-bottom:3px; position:relative; transition: background .2s, color .2s; text-decoration:none; }
.portal-nav a:hover { background: rgba(255,255,255,.07); color:#fff; }
.portal-nav a.active { background: rgba(232,117,0,.18); color:#fff; }
.portal-nav a.active::before { content:''; position:absolute; left:0; top:8px; bottom:8px; width:3px; border-radius:0 3px 3px 0; background: var(--orange); }
.portal-logout { padding:12px 10px; border-top:1px solid rgba(255,255,255,.09); }
.portal-logout a { display:flex; align-items:center; gap:12px; border:0; background:none; color:#9aa4b7; border-radius:9px; padding:12px 14px; font-size:14px; font-weight:500; text-decoration:none; }
.portal-logout a:hover { background: rgba(255,255,255,.07); color:#fff; }
.portal-main { flex:1; min-width:0; }
.portal-topbar { background:#fff; border-bottom:1px solid var(--gray-border); position:sticky; top:0; z-index:400; padding:13px clamp(16px,2.4vw,28px); display:flex; align-items:center; gap:14px; }
.portal-body { padding: clamp(18px,2.4vw,28px); }
.stat-card { background:#fff; border:1px solid var(--gray-border); border-radius:14px; padding:22px; }
.stat-card .icon-chip { width:36px; height:36px; border-radius:10px; display:grid; place-items:center; font-size:16px; }

.member-card-visual { border-radius:14px; overflow:hidden; background: linear-gradient(135deg, var(--navy) 0%, var(--navy-2) 48%, var(--maroon) 100%); padding:22px; color:#fff; position:relative; box-shadow: 0 18px 40px rgba(23,35,60,.24); }

/* Admin/member tables */
.table-drs thead th { border:0; padding:13px 16px; font-size:11.5px; letter-spacing:.1em; text-transform:uppercase; color:#888; font-weight:600; background:#FAFBFC; }
.table-drs td { padding:13px 16px; border-color:#F1F2F5; vertical-align: middle; }
.avatar-sm { width:36px; height:36px; border-radius:50%; object-fit:cover; background: var(--placeholder-bg); }

/* Page hero (inner pages) */
.page-hero { position:relative; background: var(--navy); overflow:hidden; }
.page-hero img.bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.28; }
.page-hero .overlay { position:absolute; inset:0; background: linear-gradient(100deg, rgba(23,35,60,.93), rgba(122,31,31,.7)); }
.page-hero .inner { position:relative; padding: clamp(52px,7vw,96px) 15px; }
.page-hero h1 { margin:14px 0 0; font-weight:700; font-size: clamp(30px,4.6vw,52px); color:#fff; letter-spacing:-.02em; }
.breadcrumb-drs { margin-top:16px; display:flex; align-items:center; gap:10px; font-size:14px; color: rgba(255,255,255,.6); }
.breadcrumb-drs a { color: rgba(255,255,255,.85); }
.page-hero-maroon { background: var(--maroon); }
.overlay-maroon { background: linear-gradient(100deg,rgba(122,31,31,.92),rgba(23,35,60,.8)); }
.overlay-navy-radial-l { background: radial-gradient(800px 400px at 15% 0%, rgba(232,117,0,.28), transparent 70%); }
.overlay-navy-radial-r { background: radial-gradient(800px 400px at 85% 0%, rgba(232,117,0,.26), transparent 70%); }

/* Login / auth pages */
.auth-card { max-width:460px; margin: 0 auto; background:#fff; border:1px solid var(--gray-border); border-radius:16px; padding: clamp(28px,4vw,40px); box-shadow: var(--shadow-soft); }

/* Misc */
.badge-status { border-radius:6px; padding:5px 11px; font-size:12px; font-weight:600; }
.donate-chip { border:1px solid var(--gray-border); border-radius:8px; padding:9px 14px; font-size:14px; font-weight:600; color: var(--navy); cursor:pointer; }
.donate-chip-radio { border:1px solid var(--gray-border); border-radius:8px; padding:10px 18px; font-size:14px; font-weight:600; color:var(--navy); cursor:pointer; transition:all .2s; display:inline-block; }
.donate-chip-radio:has(input:checked) { border-color:var(--orange); background:var(--cream); color:var(--orange); }
.donate-chip-radio:hover { border-color: var(--orange); }
.step-pill { width:38px; height:38px; border-radius:10px; display:grid; place-items:center; font-weight:700; font-size:13.5px; flex:none; }

/* ==========================================================================
   UTILITY SYSTEM
   Every inline style value used across the site lives here as a class.
   Change a value once (e.g. --section-lg, .fs-16, .text-body-muted) and it
   updates on every page that uses the class — that's the whole point.
   ========================================================================== */

/* ---------------- Section padding scale ---------------- */
:root {
  --section-xl: clamp(60px,8vw,104px);
  --section-lg: clamp(56px,7vw,96px);
  --section-md: clamp(48px,6vw,84px);
  --section-sm: clamp(40px,5vw,64px);
  --pad-block: clamp(20px,2.4vw,28px);
  --pad-block-lg: clamp(26px,3.4vw,44px);
}
.py-section-xl { padding: var(--section-xl) 0; }
.py-section-lg { padding: var(--section-lg) 0; }
.py-section-md { padding: var(--section-md) 0; }
.py-section-sm { padding: var(--section-sm) 0; }
.pb-section-lg { padding-bottom: var(--section-lg); }
.section-gallery-pad { padding: clamp(40px,5vw,72px) 0 var(--section-lg); }
.section-cta-pad { padding: 0 0 var(--section-lg); }
.pad-block { padding: var(--pad-block); }
.pad-block-lg { padding: var(--pad-block-lg); }

/* ---------------- Font-size scale (px-named, matches design) ---------------- */
.fs-9 { font-size: 9px; } .fs-9-5 { font-size: 9.5px; }
.fs-10 { font-size: 10px; } .fs-10-5 { font-size: 10.5px; }
.fs-11 { font-size: 11px; } .fs-11-5 { font-size: 11.5px; }
.fs-12 { font-size: 12px; } .fs-12-5 { font-size: 12.5px; }
.fs-13 { font-size: 13px; } .fs-13-5 { font-size: 13.5px; }
.fs-14 { font-size: 14px; } .fs-14-5 { font-size: 14.5px; }
.fs-15 { font-size: 15px; } .fs-15-5 { font-size: 15.5px; }
.fs-16 { font-size: 16px; } .fs-16-5 { font-size: 16.5px; }
.fs-17 { font-size: 17px; } .fs-17-5 { font-size: 17.5px; }
.fs-18 { font-size: 18px; }
.fs-19 { font-size: 19px; }
.fs-20 { font-size: 20px; }
.fs-21 { font-size: 21px; }
.fs-22 { font-size: 22px; }
.fs-24 { font-size: 24px; }
.fs-26 { font-size: 26px; }
.fs-27 { font-size: 27px; }
.fs-28 { font-size: 28px; }
.fs-30 { font-size: 30px; }
.fs-34 { font-size: 34px; }
.fs-36 { font-size: 36px; }
.fs-42 { font-size: 42px; }
.fs-clamp-h1 { font-size: clamp(30px,4.6vw,52px); }
.fs-clamp-h1-lg { font-size: clamp(28px,4.2vw,48px); }
.fs-clamp-h2 { font-size: clamp(25px,3.2vw,38px); }
.fs-clamp-h2-lg { font-size: clamp(26px,3.4vw,40px); }
.fs-clamp-h3 { font-size: clamp(24px,3vw,34px); }
.fs-clamp-h4 { font-size: clamp(21px,2.6vw,27px); }
.fs-clamp-h5 { font-size: clamp(22px,2.8vw,30px); }
.fs-clamp-topline { font-size: clamp(15px,1.9vw,19px); }
.fs-clamp-news-title { font-size: clamp(22px,2.8vw,32px); }
.fs-clamp-title-sm { font-size: clamp(17px,2.2vw,22px); }
.fs-clamp-h1-news { font-size: clamp(26px,4vw,44px); }
.fs-clamp-topbar-name { font-size: clamp(16px,2vw,20px); }

/* ---------------- Line-height utilities ---------------- */
.lh-1 { line-height: 1; }
.lh-tight { line-height: 1.22; }
.lh-snug { line-height: 1.32; }
.lh-normal { line-height: 1.5; }
.lh-relaxed { line-height: 1.65; }
.lh-loose { line-height: 1.7; }
.lh-loose2 { line-height: 1.75; }
.lh-loose3 { line-height: 1.8; }
.lh-loose4 { line-height: 1.85; }
.lh-loose5 { line-height: 1.9; }

/* ---------------- Letter-spacing ---------------- */
.ls-tight { letter-spacing: -.02em; }
.ls-tight2 { letter-spacing: -.015em; }
.ls-tight3 { letter-spacing: -.01em; }
.ls-wide { letter-spacing: .06em; }
.ls-wider { letter-spacing: .1em; }
.ls-eyebrow { letter-spacing: .12em; }
.ls-eyebrow2 { letter-spacing: .14em; }
.ls-eyebrow3 { letter-spacing: .16em; }
.ls-eyebrow4 { letter-spacing: .18em; }

/* ---------------- Text colors ---------------- */
.text-body-muted { color: var(--text-muted) !important; }
.text-body-muted2 { color: var(--text-mute2) !important; }
.text-navy { color: var(--navy) !important; }
.text-orange { color: var(--orange) !important; }
.text-orange-dark { color: var(--orange-dark) !important; }
.text-gold { color: var(--gold) !important; }
.text-maroon { color: var(--maroon) !important; }
.text-success-drs { color: var(--success-fg) !important; }
.text-warn-drs { color: var(--warn-fg) !important; }
.text-danger-drs { color: var(--danger-fg) !important; }
.text-slate { color: #9aa4b7 !important; }
.text-slate-dim { color: #7d879a !important; }
.text-faint { color: #aaa !important; }
.text-tan { color: #7a6a4f !important; }
.text-white-45 { color: rgba(255,255,255,.45) !important; }
.text-white-50 { color: rgba(255,255,255,.5) !important; }
.text-white-55 { color: rgba(255,255,255,.55) !important; }
.text-white-60 { color: rgba(255,255,255,.6) !important; }
.text-white-65 { color: rgba(255,255,255,.65) !important; }
.text-white-70 { color: rgba(255,255,255,.7) !important; }
.text-white-78 { color: rgba(255,255,255,.78) !important; }
.text-white-80 { color: rgba(255,255,255,.8) !important; }
.text-white-82 { color: rgba(255,255,255,.82) !important; }
.text-gold-soft { color: #F0D89B !important; }

/* ---------------- Background colors ---------------- */
.bg-cream-solid { background: #FAFBFC; }
.bg-white-05 { background: rgba(255,255,255,.05); }
.bg-white-06 { background: rgba(255,255,255,.06); }
.bg-white-07 { background: rgba(255,255,255,.07); }

/* ---------------- Spacing scale — not covered by Bootstrap's mt-1..mt-5 ---------------- */
.mt-6{margin-top:6px} .mt-9{margin-top:9px} .mt-10{margin-top:10px} .mt-12{margin-top:12px}
.mt-13{margin-top:13px} .mt-14{margin-top:14px} .mt-16{margin-top:16px} .mt-18{margin-top:18px}
.mt-20{margin-top:20px} .mt-22{margin-top:22px} .mt-24{margin-top:24px} .mt-26{margin-top:26px}
.mt-28{margin-top:28px} .mt-30{margin-top:30px} .mt-32{margin-top:32px} .mt-34{margin-top:34px}
.mt-36{margin-top:36px} .mt-44{margin-top:44px} .mt-52{margin-top:52px}

.mb-6{margin-bottom:6px} .mb-9{margin-bottom:9px} .mb-10{margin-bottom:10px} .mb-12{margin-bottom:12px}
.mb-14{margin-bottom:14px} .mb-16{margin-bottom:16px} .mb-18{margin-bottom:18px} .mb-20{margin-bottom:20px}
.mb-22{margin-bottom:22px} .mb-26{margin-bottom:26px} .mb-30{margin-bottom:30px}

.pt-6{padding-top:6px} .pt-9{padding-top:9px} .pt-14{padding-top:14px} .pt-16{padding-top:16px}
.pt-22{padding-top:22px}
.pb-5{padding-bottom:5px} .pb-9{padding-bottom:9px} .pb-14{padding-bottom:14px}

.gap-6{gap:6px} .gap-7{gap:7px} .gap-8{gap:8px} .gap-9{gap:9px} .gap-10{gap:10px}
.gap-11{gap:11px} .gap-12{gap:12px} .gap-13{gap:13px} .gap-14{gap:14px} .gap-16{gap:16px}
.gap-18{gap:18px} .gap-20{gap:20px} .gap-22{gap:22px} .gap-24{gap:24px} .gap-26{gap:26px}

/* ---------------- Sizing (icon squares / avatars / small fixed boxes) ---------------- */
/* !important here is deliberate: these express fixed-box intent and must always
   win over fill utilities like .media-cover (width/height:100%) when combined
   on the same element, regardless of stylesheet order. */
.sq-30 { width:30px!important; height:30px!important; } .sq-34 { width:34px!important; height:34px!important; } .sq-36 { width:36px!important; height:36px!important; }
.sq-38 { width:38px!important; height:38px!important; } .sq-40 { width:40px!important; height:40px!important; } .sq-42 { width:42px!important; height:42px!important; }
.sq-44 { width:44px!important; height:44px!important; } .sq-46 { width:46px!important; height:46px!important; } .sq-48 { width:48px!important; height:48px!important; }
.sq-56 { width:56px!important; height:56px!important; } .sq-60 { width:60px!important; height:60px!important; } .sq-64 { width:64px!important; height:64px!important; }
.sq-82 { width:82px!important; height:82px!important; }
.w-max-160{max-width:160px} .w-max-200{max-width:200px} .w-max-280{max-width:280px} .w-max-380{max-width:380px}
.w-max-420{max-width:420px} .w-max-440{max-width:440px} .w-max-460{max-width:460px} .w-max-480{max-width:480px}
.w-max-520{max-width:520px} .w-max-560{max-width:560px} .w-max-600{max-width:600px} .w-max-620{max-width:620px}
.w-max-640{max-width:640px} .w-max-680{max-width:680px} .w-max-700{max-width:700px} .w-max-720{max-width:720px}
.w-max-760{max-width:760px} .w-max-780{max-width:780px} .w-max-820{max-width:820px}
.h-260{height:260px}

/* ---------------- Aspect ratios / object-fit media ---------------- */
.ratio-4x3 { aspect-ratio: 4/3; }
.ratio-4x3-1 { aspect-ratio: 4/3.1; }
.ratio-4x5 { aspect-ratio: 4/5; }
.ratio-16x9 { aspect-ratio: 16/9; }
.ratio-1x1 { aspect-ratio: 1/1; }
.min-h-170 { min-height: 170px; }
.min-h-220 { min-height: 220px; }
.min-h-280 { min-height: 280px; }
.media-cover { width:100%; height:100%; object-fit:cover; }
.media-cover-abs { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }

/* ---------------- Generic icon chip (replaces one-off inline icon squares) ---------------- */
.icon-chip-lg { display:grid; place-items:center; border-radius:11px; font-size:18px; flex:none; }
.icon-chip-cream { background:var(--cream); border:1px solid var(--cream-border); color:var(--orange); }
.icon-chip-cream-navy { background:#fff; border:1px solid var(--cream-border); color:var(--navy); }
.icon-chip-cream-orange { background:#fff; border:1px solid var(--cream-border); color:var(--orange); }
.icon-chip-cream-maroon { background:#fff; border:1px solid var(--cream-border); color:var(--maroon); }
.icon-chip-gold-soft { background: rgba(212,167,44,.16); color:#E2C471; }
.icon-chip-navy-soft { background: rgba(23,35,60,.55); }
.icon-chip-success { background: var(--success-bg); color: var(--success-fg); }
.icon-chip-warn { background: var(--warn-bg); color: var(--warn-fg); }
.icon-chip-danger { background: var(--danger-bg); color: var(--danger-fg); }
.icon-chip-orange-soft { background:#FFF3E0; color:var(--orange-dark); }
.icon-chip-navy-blue { background:#EEF2FA; color:var(--navy); }
.icon-chip-yellow-soft { background:#FFF8E1; color:#B26A00; }

/* ---------------- Rounded-corner scale not in Bootstrap ---------------- */
.radius-6 { border-radius:6px; }
.radius-8 { border-radius:8px; }
.radius-9 { border-radius:9px; }
.radius-10 { border-radius:10px; }
.radius-11 { border-radius:11px; }
.radius-12 { border-radius:12px; }
.radius-14 { border-radius:14px; }
.radius-16 { border-radius:16px; }
.radius-circle { border-radius:50%; }

/* ---------------- Composed components seen repeatedly across pages ---------------- */
.info-row-icon { display:grid; place-items:center; flex:none; }
.two-line-label { display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:rgba(255,255,255,.5); font-weight:500; }
.stat-kv-row { display:flex; justify-content:space-between; gap:14px; padding:15px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.stat-kv-row:last-child { border-bottom: 0; }
.stat-kv-key { color:#9aa4b7; font-size:14px; }
.stat-kv-val { font-weight:600; font-size:14.5px; }

.milestone-rule { margin-top:14px; height:2px; width:34px; background:var(--gold); }
.quote-block { border-left:3px solid var(--orange); background:var(--cream); border-radius:0 12px 12px 0; padding:22px 26px; }
.quote-mark { font-family:'Playfair Display',serif; font-size:34px; color:var(--gold); line-height:1; }

.contact-info-card { border:1px solid var(--gray-border); border-radius:14px; padding:24px; display:flex; gap:16px; }
.map-embed-box { height:260px; position:relative; overflow:hidden; }
.map-embed-caption { position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center; }

.hero-mini { padding: var(--section-xl) 0; min-height:auto; }
.plain-btn { border:0; background:none; padding:0; }

.dashed-upload-box { border:1px dashed var(--gold) !important; background:#FFFBF3; border-radius:12px; padding:24px; }
.dashed-upload-box-sm { border:1px dashed var(--gold) !important; background:#FFFBF3; border-radius:12px; padding:22px; }

.plan-choice-row { border:1.5px solid var(--gray-border); border-radius:12px; padding:22px; cursor:pointer; }
.plan-choice-row.selected { border-color: var(--orange) !important; }

.progress-track { height:8px; border-radius:100px; background:#F1F2F5; overflow:hidden; }
.progress-fill-brand { display:block; height:100%; background:linear-gradient(90deg,var(--orange),var(--gold)); }

.mono-text { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; }

.cta-banner { border-radius:16px; padding: clamp(28px,4vw,48px); display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:24px; position:relative; overflow:hidden; }
.cta-banner-maroon { background: linear-gradient(115deg,var(--maroon),#9d2a24 55%,var(--orange-dark)); }
.cta-banner-navy { background: linear-gradient(115deg,var(--navy),var(--navy-2)); text-align:center; }

.thumb-sm-rect { width:74px; height:60px; flex:none; overflow:hidden; }
.thumb-md-rect { width:90px; height:60px; object-fit:cover; }
.thumb-list-icon { width:64px; height:76px; }

.opacity-90 { opacity:.9; } .opacity-72 { opacity:.72; } .opacity-28 { opacity:.28; }

.avatar-circle-border { border-radius:50%; overflow:hidden; border:2px solid var(--cream); box-shadow:0 0 0 1px var(--gold); background:#EFE5D5; }
.avatar-circle-plain { border-radius:50%; overflow:hidden; background:#243456; }

.field-hint-box { border-radius:10px; padding:16px; font-size:13px; line-height:1.7; }
.field-hint-box-cream { background:var(--cream); border:1px solid var(--cream-border); color:#7a6a4f; }

.radio-lg { width:20px; height:20px; accent-color: var(--orange); }
.sticky-top-150 { position: sticky; top: 150px; }
.z-toolbar { z-index: 900; }
.sticky-top-header { position: sticky; top: 0; }
.min-w-0 { min-width: 0; }
.btn-brand-compact { padding: 11px 20px; }
.topbar-social { padding-left:6px; border-left:1px solid rgba(255,255,255,.14); }
.mobile-nav-panel { width: min(88vw,340px); }
.mobile-nav-link { color:#333; font-weight:500; }
.mobile-nav-link.active { color: var(--orange); }
.footer-top-pad { padding-top: clamp(48px,6vw,76px); padding-bottom: 30px; }
.footer-divider { border-color: rgba(255,255,255,.1) !important; }
.info-row-icon-top { margin-top: 3px; }

/* ---------------- Homepage-specific composed pieces ---------------- */
.hero-slide-transition { transition: opacity 1.4s ease; }
.hero-inner-pad { padding-top:76px; padding-bottom:76px; }
.hero-fact .icon.icon-gold-variant { background:rgba(212,167,44,.16); border-color:rgba(212,167,44,.4); color:#E2C471; }
.hairline-white { height:1px; background:rgba(255,255,255,.14); }
.stats-strip { border-bottom:1px solid var(--cream-border); }
.stats-strip-pad { padding:44px 12px; }
.about-media-wrap { position:relative; padding:0 0 26px 26px; }
.about-media-frame { position:absolute; left:0; bottom:0; width:62%; height:76%; border:1px solid var(--gold); border-radius:16px; }
.about-media-badge { position:absolute; right:-6px; bottom:6px; background:var(--navy); color:#fff; border-radius:14px; padding:18px 22px; box-shadow:0 18px 40px rgba(23,35,60,.28); border-bottom:3px solid var(--orange); }
.about-divider-line { background:var(--orange); width:52px; }
.btn-outline-neutral { border-color:var(--gray-border) !important; color:var(--navy) !important; background:#fff !important; }
.btn-pad-13 { padding:13px; }
.notice-row { padding:14px 0; border-bottom:1px solid rgba(255,255,255,.1); }
.notice-dot { width:6px; height:6px; border-radius:50%; background:var(--orange); margin-top:7px; }
.fs-clamp-cta-title { font-size: clamp(22px,3vw,34px); }
.btn-cta-white { border:0; border-radius:8px; background:#fff; color:var(--maroon); font-weight:600; font-size:15px; padding:15px 28px; display:inline-block; transition: transform .2s; }
.btn-cta-white:hover { color: var(--maroon); transform: translateY(-2px); }