/* ══════════════════════════════════════
   DEEP INK + WARM BRONZE/GOLD PALETTE
   ══════════════════════════════════════ */
:root {
  --font-heading:     'Fraunces', serif;
  --font-body:        'Plus Jakarta Sans', sans-serif;
  --bg-primary:       #14110f;
  --bg-secondary:     #1c1815;
  --bg-tertiary:      #262019;
  --text-primary:     #f5f1ea;
  --text-secondary:   #a89a86;
  --text-muted:       #6e6255;
  --accent:           #b8863f;
  --accent-secondary: #d4a24e;
  --accent-light:     rgba(184,134,63,0.1);
  --accent-glow:      rgba(212,162,78,0.15);
  --border-color:     rgba(245,241,234,0.08);
  --border-focus:     rgba(212,162,78,0.5);
  --glass-bg:         rgba(28,24,21,0.4);
  --glass-border:     rgba(245,241,234,0.05);
  --card-bg-fallback: #1c1815;
  --shadow-glow:      0 0 30px rgba(184,134,63,0.2);
}
[data-theme="light"], .light {
  --bg-primary:       #faf7f2;
  --bg-secondary:     #ffffff;
  --bg-tertiary:      #f2ede4;
  --text-primary:     #1f1a14;
  --text-secondary:   #5c5245;
  --text-muted:       #8a7d6c;
  --accent:           #9a6b2f;
  --accent-secondary: #b8863f;
  --accent-light:     rgba(154,107,47,0.08);
  --accent-glow:      rgba(184,134,63,0.15);
  --border-color:     rgba(31,26,20,0.08);
  --border-focus:     rgba(154,107,47,0.5);
  --glass-bg:         rgba(255,255,255,0.7);
  --glass-border:     rgba(31,26,20,0.06);
  --card-bg-fallback: #ffffff;
  --shadow-glow:      0 0 30px rgba(154,107,47,0.1);
}

/* ══════════════════════════════════════
   LIGHT THEME OVERRIDES
   ══════════════════════════════════════ */
[data-theme="light"] body,
[data-theme="light"] .bg-[#14110f],
[data-theme="light"] footer,
[data-theme="light"] #mobileMenu {
  background: var(--bg-primary) !important;
  color: var(--text-primary) !important;
}

[data-theme="light"] .text-slate-100,
[data-theme="light"] .text-slate-200 {
  color: var(--text-primary) !important;
}

[data-theme="light"] .text-slate-300,
[data-theme="light"] .text-slate-400 {
  color: var(--text-secondary) !important;
}

[data-theme="light"] .text-slate-500,
[data-theme="light"] .text-slate-600 {
  color: var(--text-muted) !important;
}

[data-theme="light"] .card,
[data-theme="light"] .bg-white\/\[0\.03\] {
  background: rgba(154,107,47,0.03) !important;
  border-color: var(--border-color) !important;
}

[data-theme="light"] .border-white\/\[0\.08\],
[data-theme="light"] .border-white\/10 {
  border-color: var(--border-color) !important;
}

[data-theme="light"] .bg-white\/5,
[data-theme="light"] .bg-white\/10 {
  background: var(--accent-light) !important;
}

[data-theme="light"] header {
  background: var(--bg-secondary) !important;
  border-bottom-color: var(--border-color) !important;
}

[data-theme="light"] .capss-layout > div:first-child {
  background: var(--bg-secondary) !important;
  border-right-color: var(--border-color) !important;
}

[data-theme="light"] .stat-n,
[data-theme="light"] .tg {
  background: linear-gradient(135deg,#9a6b2f,#b8863f,#d4a24e) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
}

[data-theme="light"] .sec-label {
  color: #9a6b2f !important;
  background: rgba(154,107,47,0.1) !important;
  border-color: rgba(154,107,47,0.25) !important;
}

[data-theme="light"] .btn-p {
  background: linear-gradient(135deg,#9a6b2f,#b8863f,#d4a24e) !important;
}

[data-theme="light"] .geo-tag,
[data-theme="light"] .exp-tag {
  background: rgba(154,107,47,0.1) !important;
  border-color: rgba(154,107,47,0.2) !important;
  color: #9a6b2f !important;
}

[data-theme="light"] .gal-cat-tag {
  background: linear-gradient(135deg, rgba(154,107,47,0.9), rgba(184,134,63,0.9)) !important;
}

[data-theme="light"] #scrollBar {
  background: linear-gradient(90deg,#9a6b2f,#b8863f,#d4a24e) !important;
}

/* Light theme - amber/red problem indicators */
[data-theme="light"] .border-l-red-500 {
  border-left-color: #dc2626 !important;
}

[data-theme="light"] .text-red-500 {
  color: #dc2626 !important;
}

/* Light theme - success/info colors */
[data-theme="light"] .text-green-500,
[data-theme="light"] .bg-green-500 {
  color: #16a34a !important;
}

/* Light theme - hover states */
[data-theme="light"] .hover\:text-amber-500:hover,
[data-theme="light"] .hover\:text-amber-400:hover {
  color: #9a6b2f !important;
}

[data-theme="light"] .hover\:border-amber-600\/40:hover {
  border-color: rgba(154,107,47,0.4) !important;
}

/* Light theme - mobile menu */
[data-theme="light"] #mobileMenu a {
  color: var(--text-secondary) !important;
}

[data-theme="light"] #mobileMenu a:hover {
  color: var(--text-primary) !important;
  background: rgba(154,107,47,0.1) !important;
}

/* Light theme - buttons */
[data-theme="light"] .btn-g {
  background: rgba(154,107,47,0.1) !important;
  color: var(--text-primary) !important;
  border-color: rgba(154,107,47,0.25) !important;
}

[data-theme="light"] .btn-g:hover {
  background: rgba(154,107,47,0.15) !important;
}

/* Light theme - nav links */
[data-theme="light"] .nav-link {
  color: var(--text-secondary) !important;
}

[data-theme="light"] .nav-link:hover,
[data-theme="light"] .nav-link.active {
  color: var(--text-primary) !important;
}

/* Light theme - inputs and forms */
[data-theme="light"] .inp {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

[data-theme="light"] .inp:focus {
  border-color: var(--accent) !important;
  box-shadow: 0 0 0 3px var(--accent-light) !important;
}

/* Light theme - gallery overlay gradient */
[data-theme="light"] .gal-overlay {
  background: linear-gradient(to top, rgba(250,247,242,0.95) 0%, rgba(250,247,242,0.2) 40%, transparent 100%) !important;
}

[data-theme="light"] .gal-item:hover .gal-overlay {
  background: linear-gradient(to top, rgba(250,247,242,0.98) 0%, rgba(250,247,242,0.4) 50%, transparent 100%) !important;
}

[data-theme="light"] .gal-overlay span {
  color: var(--text-primary) !important;
  text-shadow: none !important;
}

/* Pravin S — Additional styles */
.tg { background: linear-gradient(135deg,#b8863f,#d4a24e,#e8c070); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }
.bg-grad  { background: linear-gradient(135deg,#b8863f,#d4a24e,#e8c070); }
.bg-grad2 { background: linear-gradient(135deg,#b8863f,#d4a24e); }
.card { background:rgba(255,255,255,0.03); border:1px solid rgba(255,255,255,0.08); border-radius:1.25rem; transition:all .3s; }
.btn-p { background:linear-gradient(135deg,#b8863f,#d4a24e,#e8c070); color:#fff; font-weight:700; padding:.75rem 1.75rem; border-radius:.75rem; border:none; cursor:pointer; transition:all .2s; font-family: var(--font-heading); box-shadow:0 4px 20px rgba(184,134,63,.3); }
.btn-p:hover { opacity:.88; transform:translateY(-2px); }
.btn-g { background:rgba(255,255,255,.05); color:#f1f5f9; border:1px solid rgba(255,255,255,.15); font-weight:700; padding:.75rem 1.75rem; border-radius:.75rem; cursor:pointer; transition:all .2s; font-family: var(--font-heading); display:inline-flex; align-items:center; text-decoration:none; }
.btn-g:hover { background:rgba(255,255,255,.1); transform:translateY(-2px); }
.sec-label { display:inline-block; font-size:.7rem; font-weight:700; letter-spacing:.18em; text-transform:uppercase; color:#e8c070; background:rgba(212,162,78,.1); border:1px solid rgba(212,162,78,.2); border-radius:100px; padding:.35rem .9rem; margin-bottom:1rem; }
.stat-n { font-family: var(--font-heading); font-size:2.75rem; font-weight:700; background:linear-gradient(135deg,#b8863f,#d4a24e,#e8c070); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; }


.inp { background:#0a0f1e; border:1px solid rgba(255,255,255,.1); border-radius:.75rem; padding:.875rem 1rem; color:#f1f5f9; font-family:'Plus Jakarta Sans',sans-serif; font-size:.95rem; width:100%; outline:none; transition:all .2s; }
.inp:focus { border-color:#b8863f; box-shadow:0 0 0 3px rgba(184,134,63,.15); }
.inp.err { border-color:#ef4444; }
.inp option { background:#0a0f1e; }
.err-msg { color:#f87171; font-size:.78rem; margin-top:.25rem; display:none; }
.err-msg.show { display:block; }
.success-box { display:flex; align-items:center; gap:.75rem; background:rgba(16,185,129,.1); border:1px solid rgba(16,185,129,.25); border-radius:.75rem; padding:1rem 1.25rem; color:#10b981; font-weight:600; font-size:.9rem; }
.fade-up { opacity:0; transform:translateY(28px); transition:opacity .7s ease, transform .7s ease; }
.fade-up.show { opacity:1; transform:translateY(0); }
.geo-tag { display:inline-flex; align-items:center; gap:.5rem; font-size:.8rem; font-weight:600; color:#94a3b8; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.1); padding:.35rem .875rem; border-radius:100px; }
.exp-tag { font-size:.72rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#e8c070; background:rgba(212,162,78,.1); border:1px solid rgba(212,162,78,.2); padding:.3rem .75rem; border-radius:100px; display:inline-block; width:fit-content; }
.cpill { display:flex; align-items:center; gap:1rem; padding:.875rem 1.25rem; border-radius:.75rem; border:1px solid transparent; background:none; color:#94a3b8; cursor:pointer; text-align:left; width:100%; transition:all .2s; font-family:'Plus Jakarta Sans',sans-serif; }
.cpill:hover { background:rgba(255,255,255,.05); color:#f1f5f9; transform:translateX(3px); }
.cpill.active { background:linear-gradient(135deg,#b8863f,#d4a24e,#e8c070); color:#fff; box-shadow:0 4px 16px rgba(184,134,63,.3); }
.cpane { display:none; flex-direction:column; gap:1.25rem; }
.cpane.show { display:flex; animation:fadeUp .35s ease; }
@keyframes fadeUp { from{opacity:0;transform:translateY(10px)} to{opacity:1;transform:translateY(0)} }

/* ── ROADMAP ── */


.rm-item:hover 


.rm-item .card {
  background:rgba(15,23,42,0.75);
  border:1px solid rgba(255,255,255,0.12);
  border-radius:1.25rem;
  transition:all .3s;
}
.rm-item:hover .card {
  border-color:rgba(184,134,63,0.45);
  background:rgba(15,23,42,0.95);
  box-shadow:0 8px 32px rgba(184,134,63,0.12);
  transform:translateX(6px);
}
.rm-item .card h3 { color:#f1f5f9 !important; font-size:1.25rem !important; font-weight:700 !important; }
.rm-item .card p  { color:#94a3b8 !important; line-height:1.65 !important; }
.rm-item .card .text-slate-500 { color:#94a3b8 !important; }
.rm-item .card .text-slate-400 { color:#cbd5e1 !important; font-weight:600 !important; }
.rm-item .card .border-t { border-top-color:rgba(255,255,255,0.1) !important; }

/* book */
.book-front { width:130px; padding:1.5rem 1rem; border-radius:.375rem 0 0 .375rem; border:1px solid rgba(255,255,255,.15); display:flex; flex-direction:column; gap:.5rem; position:relative; overflow:hidden; transition:transform .3s; }
.book-front::before { content:''; position:absolute; top:0; left:0; right:0; height:.125rem; background:rgba(255,255,255,.3); }
.book-card:hover .book-front { transform:perspective(600px) rotateY(-6deg); }
.book-spine { width:18px; border-radius:0 .375rem .375rem 0; }
.book-3d { display:flex; filter:drop-shadow(8px 8px 24px rgba(0,0,0,.5)); }



.modal-bg.open {
  display: flex;
  animation: fadeUp 0.2s ease;
}
.modal-box { background:#0a0f1e; border:1px solid rgba(255,255,255,.12); border-radius:1.5rem; padding:2.5rem; width:100%; max-width:480px; position:relative; box-shadow:0 20px 60px rgba(0,0,0,.6); max-height:90vh; overflow-y:auto; }
#scrollBar { position:fixed; top:0; left:0; height:3px; width:0%; background:linear-gradient(90deg,#b8863f,#d4a24e,#e8c070); z-index:9999; transition:width .1s linear; }

/* profile photo */
.profile-ring-wrap { position:relative; width:13rem; height:13rem; flex-shrink:0; }
.profile-ring-wrap::before { content:''; position:absolute; inset:-3px; border-radius:50%; background:linear-gradient(135deg,#b8863f,#d4a24e,#e8c070); z-index:0; animation:spin 8s linear infinite; }
.profile-ring-inner { position:relative; z-index:1; width:100%; height:100%; border-radius:50%; overflow:hidden; border:3px solid #050810; }
.profile-ring-inner img { width:100%; height:100%; object-fit:cover; object-position:center top; border-radius:50%; display:block; }

@media(max-width:768px) {
  .hero-grid,.about-grid,.capss-layout,.leader-grid,.contact-grid,.footer-grid { grid-template-columns:1fr !important; }
  .why-bento,.exp-grid,.books-grid { grid-template-columns:1fr !important; }
  .stats-bento { grid-template-columns:1fr 1fr !important; }
  .stats-big { grid-column:1/-1 !important; }
  
  .outcomes-grid { grid-template-columns:1fr !important; }
}
@media(max-width:480px) {
  .stats-bento { grid-template-columns:1fr !important; }
  
}

.logo-brand::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,#b8863f,#d4a24e,#e8c070);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.logo-brand:hover::after { transform: scaleX(1); }
.logo-s {
  display: inline-block;
  font-size: 1.75rem;
  font-weight: 900;
  background: linear-gradient(135deg,#b8863f,#d4a24e,#e8c070);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-left: 0.12em;
  letter-spacing: -0.05em;
}
/* ══════════════════════════════
   LEADER PHOTO + EXP BADGE FIX
   ══════════════════════════════ */
.leader-photo-wrap { position:relative; width:220px; height:220px; flex-shrink:0; overflow:visible; }

/* Spinning gradient ring */
.leader-photo-ring { position:absolute; inset:0; border-radius:50%; padding:3px; background:linear-gradient(135deg,#b8863f,#d4a24e,#e8c070); animation:spin 8s linear infinite; z-index:1; }

/* Inner white gap between ring and photo */
.leader-photo-inner { width:100%; height:100%; border-radius:50%; overflow:hidden; background:#050810; border:3px solid #050810; z-index:2; position:relative; }

/* Photo perfectly fitted */
.leader-photo-inner img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center top;
  display: block;
  border-radius: 50%;
}

/* 20+ badge — clearly visible outside the ring */
.leader-exp-badge { position:absolute; bottom:4px; right:-8px; width:72px; height:72px; border-radius:50%; background:linear-gradient(135deg,#b8863f,#d4a24e,#e8c070); display:flex; flex-direction:column; align-items:center; justify-content:center; z-index:99; box-shadow:0 0 0 4px #050810, 0 4px 20px rgba(184,134,63,0.7); }

.leader-exp-num {
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 900;
  color: #ffffff;
  line-height: 1;
}

.leader-exp-txt {
  font-size: 0.6rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.85);
  margin-top: 2px;
}
/* ── BOOKS REAL COVERS ── */
.book-card-new {
  background: rgba(255,255,255,0.03);
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 1.25rem;
  overflow: hidden;
  transition: all 0.35s ease;
}
.book-card-new:hover {
  border-color: rgba(184,134,63,0.45);
  transform: translateY(-8px);
  box-shadow: 0 20px 50px rgba(0,0,0,0.5), 0 0 30px rgba(184,134,63,0.1);
}
.book-img-wrap {
  width: 100%;
  aspect-ratio: 3/4;
  overflow: hidden;
  background: #0a0f1e;
  display: flex;
  align-items: center;
  justify-content: center;
}
.book-cover-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform 0.5s ease;
}
.book-card-new:hover .book-cover-img {
  transform: scale(1.05);
}
.book-info-new {
  padding: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.book-info-new h3 {
  font-family: var(--font-heading);
  font-size: 1.1rem;
  font-weight: 700;
  color: #f1f5f9;
}
.book-info-new p {
  font-size: 0.875rem;
  color: #94a3b8;
  line-height: 1.6;
}
.book-link-new {
  font-size: 0.875rem;
  font-weight: 700;
  color: #d4a24e;
  text-decoration: none;
  transition: color 0.2s;
  display: inline-block;
  margin-top: 0.25rem;
}
.book-link-new:hover { color: #e8c070; }
/* ══════════════════════════════
   LANGUAGE SELECTOR
   ══════════════════════════════ */
.lang-wrap {
  position: relative;
  z-index: 900;
}
.lang-btn {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  background: rgba(255,255,255,0.06);
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0.625rem;
  padding: 0.45rem 0.75rem;
  color: #f1f5f9;
  font-family: var(--font-heading);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}
.lang-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(184,134,63,0.5);
}
.lang-chevron {
  width: 12px;
  height: 12px;
  transition: transform 0.2s ease;
}
.lang-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  background: #0d1526;
  border: 1px solid rgba(255,255,255,0.12);
  border-radius: 0.875rem;
  padding: 0.375rem;
  min-width: 160px;
  box-shadow: 0 12px 40px rgba(0,0,0,0.6);
  display: none;
  flex-direction: column;
  gap: 0.125rem;
  z-index: 1000;
}
.lang-menu.open {
  display: flex;
  animation: fadeUp 0.2s ease;
}
.lang-opt {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  padding: 0.625rem 0.875rem;
  border-radius: 0.625rem;
  border: none;
  background: none;
  color: #94a3b8;
  font-family: 'Plus Jakarta Sans', sans-serif;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 0.15s ease;
  text-align: left;
  width: 100%;
}
.lang-opt:hover {
  background: rgba(184,134,63,0.12);
  color: #f1f5f9;
}
.lang-opt.active {
  background: linear-gradient(135deg, rgba(184,134,63,0.2), rgba(212,162,78,0.15));
  color: #f1f5f9;
  font-weight: 700;
}
/* ══════════════════════════════
   SITE LOGO — UNIFIED STYLE
   ══════════════════════════════ */
.site-logo {
  font-family: var(--font-heading);
  font-size: 1.6rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  text-decoration: none;
  color: #f1f5f9;
  display: inline-flex;
  align-items: baseline;
  gap: 0;
  position: relative;
  line-height: 1;
  transition: opacity 0.2s;
}
.site-logo:hover { opacity: 0.85; }

/* The "S" gets the gradient treatment */
.logo-s-char {
  font-family: var(--font-heading);
  font-weight: 900;
  font-size: 1.6rem;
  letter-spacing: -0.05em;
  background: linear-gradient(135deg,#b8863f,#d4a24e,#e8c070);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  margin-left: 0.08em;
  display: inline-block;
}

/* Animated underline on hover */
.site-logo::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(90deg,#b8863f,#d4a24e,#e8c070);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.3s ease;
}
.site-logo:hover::after { transform: scaleX(1); }
/* ══════════════════════════════
   NAV LINKS — GLOSSY & ATTRACTIVE
   ══════════════════════════════ */
.nav-link {
  font-family: var(--font-heading);
  font-size: 0.875rem;
  font-weight: 600;
  color: #94a3b8;
  padding: 0.45rem 0.875rem;
  border-radius: 0.625rem;
  text-decoration: none;
  position: relative;
  transition: all 0.25s ease;
  letter-spacing: 0.01em;
  border: 1px solid transparent;
}

/* Hover state */
.nav-link:hover {
  color: #f1f5f9;
  background: rgba(255,255,255,0.07);
  border-color: rgba(255,255,255,0.1);
}

/* Active state — glossy gradient pill */
.nav-link.active {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(184,134,63,0.25), rgba(212,162,78,0.2));
  border-color: rgba(184,134,63,0.4);
  box-shadow:
    0 0 12px rgba(184,134,63,0.2),
    inset 0 1px 0 rgba(255,255,255,0.15);
}

/* Glossy shine on active */
.nav-link.active::before {
  content: '';
  position: absolute;
  top: 0;
  left: 10%;
  width: 80%;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent);
  border-radius: 50%;
}

/* Animated bottom line on hover (non-active) */
.nav-link:not(.active)::after {
  content: '';
  position: absolute;
  bottom: 3px;
  left: 50%;
  transform: translateX(-50%) scaleX(0);
  width: 60%;
  height: 2px;
  background: linear-gradient(90deg, #b8863f, #d4a24e);
  border-radius: 2px;
  transition: transform 0.25s ease;
}
.nav-link:not(.active):hover::after {
  transform: translateX(-50%) scaleX(1);
}
/* ── MOBILE MENU LINKS ── */
#mobileMenu a {
  font-family: var(--font-heading);
  font-size: 1.5rem;
  font-weight: 700;
  color: #94a3b8;
  text-decoration: none;
  padding: 0.75rem 2rem;
  border-radius: 0.875rem;
  letter-spacing: -0.01em;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  width: 80%;
  text-align: center;
}
#mobileMenu a:hover {
  color: #ffffff;
  background: linear-gradient(135deg, rgba(184,134,63,0.2), rgba(212,162,78,0.15));
  border-color: rgba(184,134,63,0.35);
  box-shadow: 0 0 20px rgba(184,134,63,0.15);
}

/* ══════════════════════════════
   GALLERY — CLEAN FINAL VERSION
   ══════════════════════════════ */
#galGrid .gal-item {
  position: relative;
  border-radius: 1rem;
  overflow: hidden;
  cursor: pointer;
  display: block;
  background: #0a0f1e;
}
#galGrid .gal-item.row-span-2 {
  grid-row: span 2;
}
#galGrid .gal-item img.gal-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.5s ease;
}
#galGrid .gal-item:hover img.gal-img {
  transform: scale(1.05);
}
/* Overlay — always slightly visible, brighter on hover */
#galGrid .gal-item .gal-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,0.78) 0%, rgba(0,0,0,0.1) 50%, transparent 100%);
  display: flex;
  align-items: flex-end;
  padding: 1.25rem;
  opacity: 1;
  transition: background 0.3s ease;
  z-index: 2;
}
#galGrid .gal-item:hover .gal-overlay {
  background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.3) 55%, transparent 100%);
}
#galGrid .gal-item .gal-overlay span {
  font-family: var(--font-heading);
  font-size: 0.95rem;
  font-weight: 800;
  color: #ffffff;
  line-height: 1.35;
  text-shadow: 0 2px 10px rgba(0,0,0,0.9);
}
/* Category tag */
#galGrid .gal-item .gal-cat-tag {
  position: absolute;
  top: 0.75rem;
  left: 0.75rem;
  font-size: 0.62rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #ffffff;
  background: linear-gradient(135deg, rgba(184,134,63,0.85), rgba(212,162,78,0.85));
  backdrop-filter: blur(6px);
  padding: 0.28rem 0.65rem;
  border-radius: 100px;
  z-index: 3;
  box-shadow: 0 2px 8px rgba(0,0,0,0.4);
}
/* Grid height fix */
#galGrid {
  grid-template-rows: 200px 200px;
}

/* ══════════════════════════════════════════
   GALLERY MOBILE FIXES
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Single column on mobile - override Tailwind grid-cols-3 */
  #galGrid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto !important;
    gap: 1rem !important;
  }
  
  /* Remove row-span on mobile */
  #galGrid .gal-item.row-span-2 {
    grid-row: span 1 !important;
  }
  
  /* Consistent card height on mobile */
  #galGrid .gal-item,
  #galGrid .gal-item img.gal-img {
    min-height: 280px !important;
    max-height: 280px !important;
  }
  
  /* Default image positioning for mobile - can be overridden by data-mobile-position */
  #galGrid .gal-item img.gal-img:not([data-mobile-position]) {
    object-position: center top !important;
  }
  
  /* Ensure overlay has proper padding and positioning */
  #galGrid .gal-item .gal-overlay {
    padding: 1.25rem !important;
    display: flex !important;
    align-items: flex-end !important;
    justify-content: flex-start !important;
  }
  
  /* Text wrapping and sizing */
  #galGrid .gal-item .gal-overlay span {
    font-size: 0.85rem !important;
    line-height: 1.4 !important;
    font-weight: 700 !important;
    word-wrap: break-word !important;
    overflow-wrap: break-word !important;
    word-break: normal !important;
    hyphens: auto !important;
    max-width: 100% !important;
    width: 100% !important;
    display: block !important;
    white-space: normal !important;
    padding-right: 0.5rem !important;
  }
  
  /* Category tag positioning */
  #galGrid .gal-item .gal-cat-tag {
    top: 0.625rem !important;
    left: 0.625rem !important;
  }
}

@media (max-width: 480px) {
  /* Even smaller font on very small screens */
  #galGrid .gal-item .gal-overlay span {
    font-size: 0.8rem !important;
    line-height: 1.35 !important;
  }
  
  /* Reduce category tag size */
  #galGrid .gal-item .gal-cat-tag {
    font-size: 0.58rem !important;
    padding: 0.28rem 0.6rem !important;
  }
  
  /* Slightly more compact cards on smallest screens */
  #galGrid .gal-item,
  #galGrid .gal-item img.gal-img {
    min-height: 260px !important;
    max-height: 260px !important;
  }
  
  /* Tighter padding */
  #galGrid .gal-item .gal-overlay {
    padding: 1rem !important;
  }
}
/* ── MODAL FORCE HIDDEN ── */
.modal-bg { display: none !important; }
.modal-bg.open { display: flex !important; }

/* Fixed heights for staircase */





/* ── Approach Steps Progress Bar ── */
















/* ══════════════════════════════════════════
   STAIRCASE — CONSULTING APPROACH
   Each column: title+desc on top, bar in middle, icon+label at bottom
   Columns increase in height → rising staircase
   ══════════════════════════════════════════ */


/* Column base */


/* ── Different total heights = staircase effect ── */






/* Top area: title + description — pushes down with flex-end */


/* Title box */



/* Theme colors */




/* Description text */


/* Platform bar */





/* Bottom: circle + step label */












/* Mobile */
@media (max-width: 768px) {
  
  
  
  
  
  
}
/* ── ANIMATED PROGRESS BAR ── */












/* Mobile */
@media (max-width: 768px) {
  
  
  
  
  
  
}
/* ══════════════════════════════
   LEAPP LOGO — BIG & THEME STYLE
   ══════════════════════════════ */
.leapp-logo {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-decoration: none;
  line-height: 1;
  gap: 2px;
  flex-shrink: 0;
  position: relative;
  transition: transform 0.25s ease;
}
.leapp-logo:hover { transform: scale(1.05); }

.leapp-img {
  height: 44px;
  width: auto;
  display: none;
  object-fit: contain;
}

.leapp-fallback {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 1px;
}

/* LEAPP — big, bold, brand gradient */
.leapp-text {
  font-family: var(--font-heading);
  font-size: 2.25rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  line-height: 1;
  background: linear-gradient(135deg, #b8863f 0%, #d4a24e 45%, #d4a24e 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  filter: drop-shadow(0 0 12px rgba(184,134,63,0.65)) drop-shadow(0 0 4px rgba(212,162,78,0.4));
  transition: filter 0.3s ease;
}
.leapp-logo:hover .leapp-text {
  filter: drop-shadow(0 0 20px rgba(184,134,63,0.9)) drop-shadow(0 0 8px rgba(212,162,78,0.6));
}

/* Center of Excellence — cyan accent */
.leapp-sub {
  font-family: var(--font-heading);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #e8c070;
  padding-left: 2px;
  text-shadow: 0 0 8px rgba(212,162,78,0.5);
  transition: text-shadow 0.3s;
}
.leapp-logo:hover .leapp-sub {
  text-shadow: 0 0 14px rgba(212,162,78,0.8);
}

/* Divider line between LEAPP and sub */
.leapp-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg,#b8863f,#d4a24e,#e8c070);
  border-radius: 1px;
  opacity: 0.6;
  margin: 1px 0;
}
/* ══════════════════════════════
   ROADMAP — CLEAN FINAL
   ══════════════════════════════ */
.rm2-track {
  position: relative;
  max-width: 820px;
  margin: 0 auto;
}
.rm2-track::before {
  content: "";
  position: absolute;
  top: 50px;
  bottom: 62px;
  left: 54px;
  width: 3px;
  background: linear-gradient(180deg, var(--accent, #b8863f), var(--accent-secondary, #d4a24e), rgba(184,134,63,0.15));
  border-radius: 4px;
  z-index: 0;
  pointer-events: none;
}
.rm2-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 2rem;
  align-items: flex-start;
  margin-bottom: 2.25rem;
  position: relative;
  z-index: 5;
}
.rm2-row:last-child { margin-bottom: 0; }
.rm2-left {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  position: relative;
  z-index: 10;
}
.rm2-stage-label {
  font-family: var(--font-heading);
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  background: linear-gradient(135deg, #b8863f, #0891b2);
  padding: 0.3rem 0.65rem;
  border-radius: 100px;
  white-space: nowrap;
  position: relative;
  z-index: 10;
  box-shadow: 0 2px 10px rgba(184,134,63,0.5), 0 0 0 2px #0a0a14;
}
.rm2-circle {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: linear-gradient(135deg,#b8863f,#d4a24e);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 1.4rem;
  font-weight: 900;
  color: #ffffff;
  position: relative;
  z-index: 10;
  box-shadow: 0 0 0 4px #0a0a14, 0 4px 20px rgba(184,134,63,0.55);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  flex-shrink: 0;
}
.rm2-row:hover .rm2-circle {
  transform: scale(1.12);
  box-shadow: 0 0 0 4px #0a0a14, 0 6px 28px rgba(184,134,63,0.75);
}
.rm2-card {
  background: var(--bg-secondary, #1c1815);
  border: 1px solid var(--border-color, rgba(245,241,234,0.08));
  border-radius: 1.25rem;
  padding: 1.75rem;
  position: relative;
  z-index: 2;
  transition: all 0.3s ease;
}
.rm2-row:hover .rm2-card {
  border-color: rgba(184,134,63,0.45);
  transform: translateX(6px);
  box-shadow: 0 8px 30px rgba(184,134,63, 0.12);
}
.rm2-card-last {
  background: rgba(15, 23, 42, 0.85);
  border-color: rgba(245,241,234,0.1);
}
.rm2-card h3 {
  font-family: var(--font-heading);
  font-size: 1.2rem;
  font-weight: 700;
  color: #f1f5f9;
  margin-bottom: 0.5rem;
}
.rm2-card p {
  font-size: 0.95rem;
  color: var(--text-secondary, #a89a86);
  line-height: 1.65;
  margin-bottom: 1rem;
}
.rm2-detail {
  padding-top: 0.875rem;
  border-top: 1px solid var(--border-color, rgba(245,241,234,0.08));
  font-size: 0.85rem;
  color: var(--text-secondary, #a89a86);
  line-height: 1.6;
}
.rm2-detail strong { color: var(--text-primary, #f5f1ea); font-weight: 700; }

@media (max-width: 640px) {
  .rm2-track::before {
  content: "";
  position: absolute;
  top: 50px;
  bottom: 62px;
  left: 54px;
  width: 3px;
  background: linear-gradient(180deg, var(--accent, #b8863f), var(--accent-secondary, #d4a24e), rgba(184,134,63,0.15));
  border-radius: 4px;
  z-index: 0;
  pointer-events: none;
}
  .rm2-row { grid-template-columns: 80px 1fr; gap: 1rem; }
  .rm2-stage-label { font-size: 0.55rem; padding: 0.2rem 0.45rem; }
  .rm2-circle { width: 40px; height: 40px; font-size: 1rem; }
}
/* ── LEAPP IMAGE LOGO ── */
.leapp-logo {
  display: flex;
  align-items: center;
  text-decoration: none;
  flex-shrink: 0;
  transition: all 0.3s ease;
}
.leapp-logo:hover {
  transform: scale(1.05);
  filter: drop-shadow(0 0 12px rgba(184,134,63,0.5));
}
.leapp-logo .leapp-img {
  height: 52px;
  width: auto;
  display: block;
  object-fit: contain;
  filter: drop-shadow(0 2px 8px rgba(184,134,63,0.3));
  transition: filter 0.3s ease;
}
.leapp-logo:hover .leapp-img {
  filter: drop-shadow(0 4px 16px rgba(184,134,63,0.6)) drop-shadow(0 0 8px rgba(212,162,78,0.4));
}
/* ── LOGO SIZE & FOOTER ALIGNMENT ── */
.leapp-logo .leapp-img {
  max-height: 80px !important;
  width: auto !important;
  display: block !important;
  object-fit: contain;
}
footer .leapp-logo {
  align-self: flex-start !important;
  margin-left: 0 !important;
}
footer .leapp-logo .leapp-img {
  height: 80px !important;
}
/* ── LOGO BIGGER OVERRIDE ── */
.leapp-logo .leapp-img { max-height: 110px !important; }
footer .leapp-logo .leapp-img { height: 110px !important; }
.leapp-logo .leapp-img, footer .leapp-logo .leapp-img { height:105px !important; max-height:105px !important; }
.leapp-logo .leapp-img, footer .leapp-logo .leapp-img { height:100px !important; max-height:100px !important; }
.leapp-logo .leapp-img, footer .leapp-logo .leapp-img { height:80px !important; max-height:80px !important; }
/* ── LOGO STRICT LEFT ALIGNMENT ── */
.leapp-logo {
  flex-shrink: 0 !important;
  margin-right: auto;
  align-self: center;
}
.leapp-logo .leapp-img {
  display: block !important;
  height: 80px !important;
  width: auto !important;
  object-fit: contain;
  object-position: left center;
}
/* ── HEADER LOGO SIZE FIX ── */
header .leapp-logo .leapp-img {
  height: 48px !important;
  max-height: 48px !important;
  width: auto !important;
}
header .leapp-logo {
  flex-shrink: 0 !important;
  align-self: center !important;
}
/* Keep footer logo bigger */
footer .leapp-logo .leapp-img {
  height: 80px !important;
  max-height: 80px !important;
}
/* ── NAVBAR BIGGER LOGO WITH ROOM ── */
header .leapp-logo .leapp-img {
  height: 64px !important;
  max-height: 64px !important;
  width: auto !important;
}
/* Give header more vertical space for bigger logo */
header > div {
  padding-top: 0.875rem !important;
  padding-bottom: 0.875rem !important;
}
/* Push hero section down so badge doesnt overlap */
#home {
  padding-top: 7rem !important;
}
/* ── LOGO 75px WITH PROPER SPACING ── */
header .leapp-logo .leapp-img { height:75px !important; max-height:75px !important; width:auto !important; }
header > div { padding-top:1rem !important; padding-bottom:1rem !important; }
#home { padding-top:7.5rem !important; }
/* ── CHIEF CONSULTANT PROFILE GLOW ── */
.leader-photo-wrap {
  filter: drop-shadow(0 0 20px rgba(184,134,63,0.45)) drop-shadow(0 0 40px rgba(184,134,63,0.2));
  transition: filter 0.4s ease;
}
.leader-photo-wrap:hover {
  filter: drop-shadow(0 0 30px rgba(184,134,63,0.7)) drop-shadow(0 0 60px rgba(212,162,78,0.3));
}
.leader-card {
  box-shadow: 0 0 60px rgba(184,134,63,0.08), 0 0 0 1px rgba(184,134,63,0.15) !important;
}
body { background:#14110f !important; color:#f5f1ea !important; }
.bg-[#050810], [class*='bg-\[#050810\]'] { background:#14110f !important; }
.bg-slate-950 { background:#14110f !important; }
/* ══════════════════════════════════════
   APPROACH — UNIFIED BRONZE/GOLD THEME
   All 5 steps identical style
   ══════════════════════════════════════ */
.sc2-wrap {
  display: flex;
  align-items: flex-end;
  gap: 0;  /* Remove gap to control spacing precisely */
  overflow-x: auto;
  padding-bottom: 0.5rem;
  justify-content: space-between;  /* Evenly distribute columns */
}
.sc2-col {
  flex: 1;
  min-width: 150px;
  max-width: 200px;  /* Add max-width for consistency */
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 5px;  /* Add padding instead of gap */
}
.sc2-top {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 0.6rem;
  padding: 0 0.4rem;
  width: 100%;
}
/* Unified title box — same for ALL steps */
.sc2-box {
  font-family: var(--font-heading);
  font-size: 0.78rem;
  font-weight: 800;
  text-align: center;
  padding: 0.5rem 0.9rem;
  border-radius: 10px;
  line-height: 1.35;
  white-space: nowrap;
  color: #f5f1ea;
  background: linear-gradient(135deg, #3d2a0f, #2a1f0e);
  border: 1.5px solid #b8863f;
  box-shadow: 0 4px 16px rgba(184,134,63,0.35), inset 0 1px 0 rgba(245,241,234,0.12);
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
}
.sc2-box::before {
  content: '';
  position: absolute;
  top: 0; left: 15%; width: 70%; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(212,162,78,0.4), transparent);
  border-radius: 50%;
}
.sc2-col:hover .sc2-box {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(184,134,63,0.5), inset 0 1px 0 rgba(245,241,234,0.15);
}
/* Description */
.sc2-desc {
  font-size: 0.72rem;
  color: var(--text-secondary, #a89a86);
  text-align: center;
  line-height: 1.5;
  padding: 0 0.2rem;
}
/* Unified platform bar - LARGER SIZE for growth visualization */
.sc2-bar {
  width: 100%;
  min-height: 80px;  /* Minimum height for container */
  border-radius: 6px 6px 0 0;
  margin-top: 0.75rem;
  flex-shrink: 0;
  background: transparent;  /* No background - only show filled part */
  position: relative;
  overflow: visible;
  display: flex;
  align-items: flex-end;  /* Align bars to bottom */
}
.sc2-bar::before {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  background: linear-gradient(180deg, #d4a24e, #b8863f);
  border-radius: 6px;
  transition: height 0.5s ease;
  border: 1px solid rgba(184,134,63,0.3);
}
.sc2-bar::after {
  display: none;  /* Remove the top highlight line */
}

/* Growth progression - Vertical fill from bottom to top */
.sc2-col:nth-child(1) .sc2-bar::before { height: 0%; }     /* Step 1: 0% */
.sc2-col:nth-child(2) .sc2-bar::before { height: 25%; }    /* Step 2: 25% */
.sc2-col:nth-child(3) .sc2-bar::before { height: 50%; }    /* Step 3: 50% */
.sc2-col:nth-child(4) .sc2-bar::before { height: 75%; }    /* Step 4: 75% */
.sc2-col:nth-child(5) .sc2-bar::before { height: 100%; }   /* Step 5: 100% */
/* Bottom */
.sc2-foot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin-top: -8px;
  flex-shrink: 0;
}
/* Unified circle — same for ALL steps */
.sc2-circle {
  width: 56px; height: 56px;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  background: linear-gradient(135deg, #3d2a0f, #2a1f0e);
  border: 2.5px solid #d4a24e;
  color: #e8c070;
  box-shadow: 0 0 18px rgba(184,134,63,0.5), 0 0 0 4px rgba(20,17,15,0.6);
  transition: transform 0.3s, box-shadow 0.3s;
  position: relative;
}
/* 1. Completed staircase circles — muted, no glow */
.sc2-col.done .sc2-circle {
  opacity: 0.7;
  box-shadow: none;
  border-color: rgba(212,162,78,0.5);
}
.sc2-col.done .sc2-circle::before { opacity: 0; }
/* 2. Active staircase circle — full glow + pulse */
.sc2-col.active .sc2-circle {
  opacity: 1;
  box-shadow: 0 0 24px rgba(212,162,78,0.8), 0 0 0 4px rgba(20,17,15,0.6), 0 0 0 7px rgba(212,162,78,0.2);
  animation: sc2Pulse 2s ease-in-out infinite;
  border-color: #e8c070;
}
@keyframes sc2Pulse {
  0%,100% { box-shadow: 0 0 24px rgba(212,162,78,0.8), 0 0 0 4px rgba(20,17,15,0.6), 0 0 0 7px rgba(212,162,78,0.2); }
  50%      { box-shadow: 0 0 32px rgba(212,162,78,1.0), 0 0 0 4px rgba(20,17,15,0.6), 0 0 0 12px rgba(212,162,78,0.15); }
}
/* 2. Active label box — filled not just outlined */
.sc2-col.active .sc2-box {
  background: linear-gradient(135deg, rgba(184,134,63,0.25), rgba(212,162,78,0.15));
  border-color: #e8c070;
  box-shadow: 0 4px 20px rgba(212,162,78,0.5), inset 0 1px 0 rgba(245,241,234,0.2);
}
/* 3. Upcoming staircase circles — further dimmed, no glow */
.sc2-col.upcoming .sc2-circle {
  opacity: 0.5;
  box-shadow: none;
  border-color: rgba(212,162,78,0.3);
}
.sc2-col.upcoming .sc2-circle::before { opacity: 0; }
.sc2-col.upcoming .sc2-box {
  opacity: 0.55;
  box-shadow: none;
}
.sc2-col.upcoming .sc2-lbl { opacity: 0.55; }
.sc2-circle::before {
  content: '';
  position: absolute;
  inset: -3px;
  border-radius: 50%;
  background: linear-gradient(135deg,#b8863f,#d4a24e);
  opacity: 0.15;
  filter: blur(8px);
  z-index: -1;
}
.sc2-circle svg { width: 22px; height: 22px; }
.sc2-col:hover .sc2-circle {
  transform: scale(1.1);
  box-shadow: 0 0 28px rgba(212,162,78,0.7), 0 0 0 4px rgba(20,17,15,0.6);
}
/* Step label */
.sc2-lbl {
  font-family: var(--font-heading);
  font-size: 0.8rem; font-weight: 700;
  color: #d4a24e;
  letter-spacing: 0.04em;
}

/* ── PROGRESS BAR ── */
.sc2-progress-wrap {
  display: flex;
  align-items: flex-start;
  gap: 0;
  margin-top: 2rem;
  padding: 0;
  justify-content: space-between;  /* Match the top section */
}
.sc2-seg { 
  flex: 1; 
  min-width: 150px;
  max-width: 200px;  /* Match column width */
  display: flex; 
  flex-direction: column; 
  align-items: center; 
  position: relative;
  padding: 0 5px;  /* Match column padding */
}
.sc2-line { width:100%; height:5px; border-radius:100px; background:rgba(184,134,63,0.15); transition:background 0.6s ease; }
.sc2-line.done   { background:linear-gradient(90deg, #d4a24e 0%, #b8863f 60%, rgba(184,134,63,0.4) 100%); }
.sc2-line.active { background:linear-gradient(90deg, #b8863f 0%, rgba(184,134,63,0.25) 100%); }
.sc2-dot {
  width:32px; height:32px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  font-family: var(--font-heading); font-size:0.8rem; font-weight:800;
  position:absolute; top:-14px; left:50%; transform:translateX(-50%);
  background:rgba(184,134,63,0.08); color:#6e6255;
  border:2px solid rgba(184,134,63,0.15);
  transition:all 0.5s ease;
}
.sc2-dot.done   { background:linear-gradient(135deg,#b8863f,#d4a24e); color:#14110f; box-shadow:0 0 14px rgba(184,134,63,0.6); font-size:0.8rem; }
.sc2-dot.active { background:linear-gradient(135deg,#d4a24e,#e8c070); color:#14110f; box-shadow:0 0 18px rgba(212,162,78,0.8); border:2px solid rgba(245,241,234,0.3); transform:translateX(-50%) scale(1.2); }
.sc2-plbl { font-family: var(--font-heading); font-size:0.68rem; font-weight:600; color:#6e6255; margin-top:1.5rem; letter-spacing:0.05em; transition:color 0.4s; }
.sc2-plbl.active { color:#d4a24e !important; font-weight:700; }
.sc2-plbl.done   { color:#a89a86 !important; }

@media (max-width:768px) {
  .sc2-wrap { flex-direction:column; align-items:stretch; }
  .sc2-col  { 
    height:auto !important; 
    flex-direction:row; 
    align-items:center; 
    gap:0.75rem;
    padding:1rem; 
    background:rgba(184,134,63,0.04);
    border:1px solid rgba(184,134,63,0.15); 
    border-radius:1rem; 
    margin-bottom:0.75rem; 
    min-width:unset; 
    max-width:100%;
    justify-content:space-between;  /* Evenly distribute content */
  }
  .sc2-top  { 
    flex:1; 
    flex-direction:column;  /* Stack box and desc vertically */
    align-items:flex-start; 
    justify-content:center;  /* Center vertically */
    gap:0.5rem;
    min-width:0;  /* Allow flex shrink */
  }
  .sc2-box {
    font-size:0.8rem;
    padding:0.5rem 0.75rem;
    white-space:nowrap;
    flex-shrink:0;  /* Don't shrink the box */
    align-self:flex-start;  /* Align to start */
  }
  .sc2-desc { 
    text-align:left; 
    font-size:0.7rem;
    line-height:1.4;
    flex:1;
    min-width:0;  /* Allow text to wrap */
    align-self:flex-start;  /* Align to start */
    margin:0;
  }
  .sc2-bar  { display:none; }
  .sc2-foot { 
    flex-direction:row; 
    margin-top:0;
    flex-shrink:0;  /* Don't shrink circle */
    gap:0.5rem;
    align-items:center;
  }
  .sc2-circle {
    width:48px;
    height:48px;
    flex-shrink:0;
  }
  .sc2-circle svg {
    width:20px;
    height:20px;
  }
  .sc2-lbl {
    font-size:0.7rem;
    white-space:nowrap;
  }
  
  /* Progress bar - fit all 5 steps in mobile view */
  .sc2-progress-wrap {
    padding:0 0.5rem;
    gap:0;
    overflow-x:visible;
  }
  .sc2-seg {
    min-width:unset;
    max-width:unset;
    flex:1;
    padding:0 2px;
  }
  .sc2-dot {
    width:28px;
    height:28px;
    font-size:0.7rem;
  }
  .sc2-plbl {
    font-size:0.55rem;
    margin-top:0.75rem;
    white-space:nowrap;
  }
  .sc2-line {
    height:3px;
  }
}

/* Extra small mobile - very compact */
@media (max-width:480px) {
  .sc2-col {
    padding:0.875rem;
    gap:0.5rem;
  }
  .sc2-box {
    font-size:0.75rem;
    padding:0.4rem 0.6rem;
  }
  .sc2-desc {
    font-size:0.65rem;
  }
  .sc2-circle {
    width:44px;
    height:44px;
  }
  .sc2-circle svg {
    width:18px;
    height:18px;
  }
  .sc2-lbl {
    font-size:0.65rem;
  }
  .sc2-dot {
    width:24px;
    height:24px;
    font-size:0.65rem;
  }
  .sc2-plbl {
    font-size:0.5rem;
    margin-top:0.5rem;
  }
  .sc2-seg {
    padding:0 1px;
  }
  .sc2-line {
    height:2px;
  }
}
/* ══════════════════════════════════════
   HEADER — INK + BRONZE/GOLD PALETTE
   ══════════════════════════════════════ */

/* 1. Header background — ink primary, glass when scrolled */
#header {
  background: var(--bg-primary, #14110f) !important;
  border-bottom: 1px solid var(--border-color, rgba(245,241,234,0.08));
  transition: background 0.3s ease, box-shadow 0.3s ease, backdrop-filter 0.3s ease;
}
#header.scrolled {
  background: var(--glass-bg, rgba(28,24,21,0.85)) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.6) !important;
  border-bottom-color: rgba(184,134,63,0.15) !important;
}

/* 2 & 3. Nav links — nowrap, tighter gap */
#desktopNav {
  gap: 0.1rem !important;
}
.nav-link {
  white-space: nowrap !important;
  font-size: 0.82rem !important;
  padding: 0.4rem 0.7rem !important;
  color: var(--text-secondary, #a89a86) !important;
  font-family: var(--font-heading);
  font-weight: 500;
  border-radius: 6px;
  transition: all 0.2s ease;
  border: 1px solid transparent;
  text-decoration: none;
}
.nav-link:hover {
  color: var(--text-primary, #f5f1ea) !important;
  background: rgba(184,134,63,0.06) !important;
}

/* 7. Active nav — gold border + subtle accent fill */
.nav-link.active {
  color: var(--text-primary, #f5f1ea) !important;
  background: var(--accent-light, rgba(184,134,63,0.1)) !important;
  border-color: var(--accent-secondary, #d4a24e) !important;
  box-shadow: 0 0 0 0 transparent;
}

/* 4. Logo mark glow — gold halo */
.leapp-logo:hover .leapp-img {
  filter: drop-shadow(0 2px 12px rgba(212,162,78,0.35)) !important;
}
.leapp-logo .leapp-img {
  filter: drop-shadow(0 1px 6px rgba(184,134,63,0.2)) !important;
  transition: filter 0.3s ease;
}

/* 5. Theme toggle — bronze palette pill */
.icon-btn-gold {
  width: 36px; height: 36px;
  background: var(--bg-tertiary, #262019) !important;
  border: 1px solid var(--border-color, rgba(245,241,234,0.08)) !important;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: var(--text-secondary, #a89a86);
  cursor: pointer;
  transition: color 0.2s, background 0.2s, border-color 0.2s, transform 0.2s;
}
.icon-btn-gold:hover {
  color: var(--accent-secondary, #d4a24e) !important;
  border-color: var(--accent-secondary, #d4a24e) !important;
  background: var(--accent-light, rgba(184,134,63,0.1)) !important;
  transform: rotate(12deg);
}
.icon-btn-gold svg { width: 16px; height: 16px; stroke: currentColor; fill: none; }

/* Language selector — bronze palette pill */
.lang-btn {
  background: var(--bg-tertiary, #262019) !important;
  border: 1px solid var(--border-color, rgba(245,241,234,0.08)) !important;
  color: var(--text-secondary, #a89a86) !important;
  border-radius: 8px !important;
}
.lang-btn:hover {
  border-color: var(--accent-secondary, #d4a24e) !important;
  color: var(--accent-secondary, #d4a24e) !important;
  background: var(--accent-light, rgba(184,134,63,0.1)) !important;
}
.lang-menu {
  background: var(--bg-secondary, #1c1815) !important;
  border-color: var(--border-color, rgba(245,241,234,0.08)) !important;
}
.lang-opt:hover { background: var(--accent-light, rgba(184,134,63,0.1)) !important; color: var(--text-primary) !important; }
.lang-opt.active { background: var(--accent-light) !important; color: var(--accent-secondary) !important; }

/* 6. CTA button — metallic gold with dark text */
.btn-cta-gold {
  background: linear-gradient(135deg, var(--accent, #b8863f) 0%, var(--accent-secondary, #d4a24e) 100%);
  color: var(--bg-primary, #14110f) !important;
  font-family: var(--font-heading);
  font-weight: 700;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  transition: opacity 0.2s, transform 0.2s, box-shadow 0.2s;
  box-shadow: 0 2px 12px rgba(184,134,63,0.25);
  position: relative;
  overflow: hidden;
}
.btn-cta-gold::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; height: 1px;
  background: rgba(245,241,234,0.3);
}
.btn-cta-gold:hover {
  opacity: 0.92;
  transform: translateY(-2px);
  box-shadow: var(--shadow-glow, 0 0 30px rgba(184,134,63,0.2)), 0 4px 16px rgba(184,134,63,0.4) !important;
}

/* Collapse nav earlier on smaller desktops */
@media (max-width: 1200px) {
  #desktopNav { display: none !important; }
  #hamBtn { display: flex !important; }
}
@media (min-width: 1201px) {
  #hamBtn { display: none !important; }
  #desktopNav { display: flex !important; }
}
/* ══════════════════════════════════════════
   APPROACH — STEP STATE HIERARCHY (req 1-6)
   ══════════════════════════════════════════ */

/* ── Req 5: Description text = text-secondary ── */
.sc2-desc {
  color: var(--text-secondary, #a89a86) !important;
}

/* ── Req 1: Completed step circles — muted 70%, no glow ── */
.sc2-col.s-done .sc2-circle {
  opacity: 0.7;
  box-shadow: none !important;
  border-color: rgba(212,162,78,0.45) !important;
}
.sc2-col.s-done .sc2-circle::before { opacity: 0 !important; }
.sc2-col.s-done .sc2-box {
  opacity: 0.7;
  box-shadow: none !important;
}
.sc2-col.s-done .sc2-lbl { opacity: 0.75; }

/* ── Req 2: Active step — full brightness, pulse, filled box ── */
.sc2-col.s-active .sc2-circle {
  opacity: 1 !important;
  border-color: #e8c070 !important;
  box-shadow: 0 0 0 4px rgba(20,17,15,0.6),
              0 0 18px rgba(212,162,78,0.8),
              0 0 0 8px rgba(212,162,78,0.12) !important;
  animation: sc2GlowPulse 2s ease-in-out infinite;
}
@keyframes sc2GlowPulse {
  0%,100% { box-shadow: 0 0 0 4px rgba(20,17,15,0.6), 0 0 18px rgba(212,162,78,0.7), 0 0 0 8px rgba(212,162,78,0.10); }
  50%      { box-shadow: 0 0 0 4px rgba(20,17,15,0.6), 0 0 28px rgba(212,162,78,1.0), 0 0 0 13px rgba(212,162,78,0.18); }
}
.sc2-col.s-active .sc2-box {
  background: var(--accent-light, rgba(184,134,63,0.15)) !important;
  border-color: #e8c070 !important;
  box-shadow: 0 4px 20px rgba(212,162,78,0.45), inset 0 1px 0 rgba(245,241,234,0.2) !important;
  opacity: 1 !important;
}
.sc2-col.s-active .sc2-lbl {
  opacity: 1;
  color: #e8c070 !important;
}

/* ── Req 3: Upcoming steps — 50% opacity, no glow ── */
.sc2-col.s-upcoming .sc2-circle {
  opacity: 0.5 !important;
  box-shadow: none !important;
  border-color: rgba(212,162,78,0.25) !important;
}
.sc2-col.s-upcoming .sc2-circle::before { opacity: 0 !important; }
.sc2-col.s-upcoming .sc2-box {
  opacity: 0.45 !important;
  box-shadow: none !important;
}
.sc2-col.s-upcoming .sc2-lbl { opacity: 0.45; }
.sc2-col.s-upcoming .sc2-desc { opacity: 0.45; }

/* ── Req 4: Progress bar — gradient brightest at left, fades right ── */
.sc2-line.done {
  background: linear-gradient(90deg,
    #e8c070 0%,
    #d4a24e 40%,
    rgba(184,134,63,0.45) 100%) !important;
}
.sc2-line.active {
  background: linear-gradient(90deg,
    rgba(184,134,63,0.4) 0%,
    rgba(184,134,63,0.12) 100%) !important;
}
.sc2-line {
  background: rgba(184,134,63,0.08) !important;
}
/* ── SMALL UPPERCASE LABELS — keep Space Grotesk (req 4) ── */
.sec-label, .section-label, .nav-link, .btn-p, .btn-cta-gold, .btn-ghost,
.lang-btn, .lang-opt, .sc2-lbl, .sc2-plbl, .sc2-dot, .rm2-stage-label,
.ap-step-num, .ap-num-green, .geo-tag, .exp-tag, .outcome-pill,
.leapp-sub, .stair2-step, .site-logo, .leapp-text,
.gal-filter-btn, .filter-btn, .gal-cat-tag, .sec-label,
.capss-nav .cpill-name, .capss-nav .cpill-letter,
.rm2-circle, .sc2-circle, .sc2-step-lbl {
  font-family: 'Space Grotesk', sans-serif !important;
}
/* ── Tailwind font-heading → Fraunces ── */
.font-heading {
  font-family: var(--font-heading) !important;
}
h1, h2, h3 {
  font-family: var(--font-heading);
}
/* Body font stays Plus Jakarta Sans */
body, p, span, a, li, input, textarea, select, button {
  font-family: var(--font-body, 'Plus Jakarta Sans', sans-serif);
}
/* Restore button exceptions that use heading font intentionally */
.btn-p, .btn-cta-gold, .btn-ghost, .nav-link, .lang-btn {
  font-family: 'Space Grotesk', sans-serif !important;
}
/* ── ROADMAP — WARM INK PALETTE OVERRIDE ── */
#roadmap { background: var(--bg-primary, #14110f) !important; }

.rm2-track::before {
  content: "";
  position: absolute;
  top: 50px;
  bottom: 62px;
  left: 54px;
  width: 3px;
  background: linear-gradient(180deg, var(--accent, #b8863f), var(--accent-secondary, #d4a24e), rgba(184,134,63,0.15));
  border-radius: 4px;
  z-index: 0;
  pointer-events: none;
}
.rm2-card {
  background: var(--bg-secondary, #1c1815) !important;
  border-color: var(--border-color, rgba(245,241,234,0.08)) !important;
}
.rm2-row:hover .rm2-card {
  background: var(--bg-tertiary, #262019) !important;
  border-color: rgba(184,134,63,0.45) !important;
  box-shadow: 0 8px 30px rgba(184,134,63,0.08) !important;
}
.rm2-card h3 {
  color: var(--text-primary, #f5f1ea) !important;
  font-family: var(--font-heading) !important;
}
.rm2-card p {
  color: var(--text-secondary, #a89a86) !important;
}
.rm2-detail {
  border-top-color: var(--border-color, rgba(245,241,234,0.08)) !important;
  color: var(--text-secondary, #a89a86) !important;
}
.rm2-detail strong {
  color: var(--text-primary, #f5f1ea) !important;
}
/* ── ABOUT SECTION — WARM INK PALETTE OVERRIDE ── */
#about { background: var(--bg-primary, #14110f) !important; }

/* Outcome cards — match expertise card warm brown */
#about .card {
  background: var(--bg-secondary, #1c1815) !important;
  border-color: var(--border-color, rgba(245,241,234,0.08)) !important;
}
#about .card:hover {
  background: var(--bg-tertiary, #262019) !important;
  border-color: rgba(184,134,63,0.4) !important;
  box-shadow: 0 8px 24px rgba(184,134,63,0.08) !important;
}

/* About section number gradient */
.oc-num {
  background: linear-gradient(135deg, #b8863f, #d4a24e) !important;
  -webkit-background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  background-clip: text !important;
  opacity: 0.5;
}
.outcome-card h4, #about h4 {
  color: var(--text-primary, #f5f1ea) !important;
}
.outcome-card p, #about .card p {
  color: var(--text-secondary, #a89a86) !important;
}
/* ── CONTACT SECTION — WARM INK PALETTE OVERRIDE ── */
#contact { background: var(--bg-primary, #14110f) !important; }

/* Form card — warm brown like expertise cards */
#contact .card {
  background: var(--bg-secondary, #1c1815) !important;
  border-color: var(--border-color, rgba(245,241,234,0.08)) !important;
}

/* Input fields — warm brown NOT navy */
#contact .inp,
#contact input,
#contact textarea,
#contact select {
  background: var(--bg-tertiary, #262019) !important;
  border-color: var(--border-color, rgba(245,241,234,0.08)) !important;
  color: var(--text-primary, #f5f1ea) !important;
}
#contact .inp:focus,
#contact input:focus,
#contact textarea:focus {
  border-color: var(--accent, #b8863f) !important;
  box-shadow: 0 0 0 3px rgba(184,134,63,0.15) !important;
}
#contact .inp::placeholder,
#contact input::placeholder,
#contact textarea::placeholder {
  color: var(--text-muted, #6e6255) !important;
}

/* Contact info cards — warm */
#contact .ci-item,
#contact .card.p-4 {
  background: var(--bg-secondary, #1c1815) !important;
  border-color: var(--border-color, rgba(245,241,234,0.08)) !important;
}
#contact .ci-item:hover {
  border-color: rgba(184,134,63,0.35) !important;
  background: var(--bg-tertiary, #262019) !important;
}

/* Contact icon boxes — warm bronze */
#contact .ci-icon {
  background: rgba(184,134,63,0.1) !important;
  border-color: rgba(184,134,63,0.2) !important;
  color: var(--accent, #b8863f) !important;
}

/* Labels and text */
#contact label,
#contact .ci-label {
  color: var(--text-secondary, #a89a86) !important;
}
#contact .ci-value {
  color: var(--text-primary, #f5f1ea) !important;
}
#contact p, #contact .text-slate-400,
#contact .text-slate-500, #contact .ci-sub {
  color: var(--text-secondary, #a89a86) !important;
}
#contact h3 {
  color: var(--text-primary, #f5f1ea) !important;
}

/* Form heading */
#contact .font-heading {
  color: var(--text-primary, #f5f1ea) !important;
}
/* ── SOCIAL ICON LINKS (Contact Section) ── */
.social-icons-row {
  display: flex;
  gap: 0.75rem;
  margin-top: 1.25rem;
  flex-wrap: wrap;
}
.social-icon-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--bg-tertiary, #262019);
  border: 1px solid var(--border-color, rgba(245,241,234,0.08));
  color: var(--accent-secondary, #d4a24e);
  text-decoration: none;
  transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease,
              transform 0.2s ease, box-shadow 0.2s ease;
  flex-shrink: 0;
}
.social-icon-btn svg {
  width: 18px;
  height: 18px;
  stroke: currentColor;
  fill: none;
}
.social-icon-btn:hover {
  color: var(--accent, #b8863f);
  background: rgba(184,134,63,0.1);
  border-color: rgba(184,134,63,0.35);
  transform: translateY(-3px);
  box-shadow: var(--shadow-glow, 0 0 30px rgba(184,134,63,0.2));
}


/* ══════════════════════════════════════════
   COMPREHENSIVE LIGHT THEME OVERRIDES
   Fixes all sections for proper light mode
   ══════════════════════════════════════════ */

/* Expertise Section */
[data-theme="light"] .exp-card {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="light"] .exp-card:hover {
  border-color: rgba(154,107,47,0.4) !important;
  box-shadow: 0 4px 20px rgba(154,107,47,0.08) !important;
}

[data-theme="light"] .exp-card h3 {
  color: var(--text-primary) !important;
}

[data-theme="light"] .exp-card p {
  color: var(--text-secondary) !important;
}

[data-theme="light"] .exp-ico {
  background: rgba(154,107,47,0.12) !important;
  border-color: rgba(154,107,47,0.25) !important;
  color: #9a6b2f !important;
}

[data-theme="light"] .exp-ico svg {
  color: #9a6b2f !important;
}

/* CAPSS Section */
[data-theme="light"] .capss-layout {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="light"] .capss-sidebar {
  background: var(--bg-tertiary) !important;
  border-right-color: var(--border-color) !important;
}

[data-theme="light"] .cpill {
  color: var(--text-secondary) !important;
}

[data-theme="light"] .cpill:hover {
  background: rgba(154,107,47,0.08) !important;
  color: var(--text-primary) !important;
}

[data-theme="light"] .cpill.active {
  background: linear-gradient(135deg,#9a6b2f,#b8863f) !important;
  color: #ffffff !important;
}

[data-theme="light"] .cpill .cpill-l,
[data-theme="light"] .cpill span[class*="w-10"] {
  background: rgba(154,107,47,0.12) !important;
  color: var(--text-primary) !important;
}

[data-theme="light"] .cpill.active .cpill-l,
[data-theme="light"] .cpill.active span[class*="w-10"] {
  background: rgba(255,255,255,0.25) !important;
  color: #ffffff !important;
}

[data-theme="light"] .cpane h3 {
  color: var(--text-primary) !important;
}

[data-theme="light"] .cpane p {
  color: var(--text-secondary) !important;
}

[data-theme="light"] .cpane li {
  color: var(--text-primary) !important;
}

[data-theme="light"] .cpane .text-amber-400 {
  color: #9a6b2f !important;
}

/* Approach Section - Staircase */
[data-theme="light"] .sc2-box {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
  color: var(--text-primary) !important;
}

[data-theme="light"] .sc2-box:hover {
  border-color: rgba(154,107,47,0.4) !important;
  box-shadow: 0 8px 30px rgba(154,107,47,0.12) !important;
}

[data-theme="light"] .sc2-circle {
  background: linear-gradient(135deg,#9a6b2f,#b8863f) !important;
  box-shadow: 0 0 0 4px var(--bg-primary), 0 4px 20px rgba(154,107,47,0.4) !important;
  color: #ffffff !important;
}

[data-theme="light"] .sc2-bar {
  background: transparent !important;
}

[data-theme="light"] .sc2-bar::before {
  background: linear-gradient(180deg, #b8863f, #9a6b2f) !important;
  border-color: rgba(154,107,47,0.3) !important;
}

[data-theme="light"] .sc2-bar::after {
  display: none !important;
}

[data-theme="light"] .sc2-desc {
  color: var(--text-secondary) !important;
}

[data-theme="light"] .sc2-label,
[data-theme="light"] .sc2-step-label,
[data-theme="light"] .sc2-lbl {
  color: var(--accent) !important;
}

[data-theme="light"] .sc2-title {
  color: var(--text-primary) !important;
}

/* Progress bar labels */
[data-theme="light"] .sc2-plbl {
  color: var(--text-muted) !important;
}

[data-theme="light"] .sc2-plbl.active {
  color: var(--accent) !important;
}

[data-theme="light"] .sc2-plbl.done {
  color: var(--text-secondary) !important;
}

/* Roadmap Section */
[data-theme="light"] .rm2-track::before {
  background: linear-gradient(180deg, var(--accent), var(--accent-secondary), rgba(154,107,47,0.15)) !important;
}

[data-theme="light"] .rm2-card {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="light"] .rm2-card:hover {
  border-color: rgba(154,107,47,0.4) !important;
  box-shadow: 0 8px 30px rgba(154,107,47,0.12) !important;
}

[data-theme="light"] .rm2-card h3,
[data-theme="light"] .rm2-card h4 {
  color: var(--text-primary) !important;
}

[data-theme="light"] .rm2-card p,
[data-theme="light"] .rm2-card li {
  color: var(--text-secondary) !important;
}

[data-theme="light"] .rm2-circle {
  background: linear-gradient(135deg,#9a6b2f,#b8863f) !important;
  box-shadow: 0 0 0 4px var(--bg-primary), 0 4px 20px rgba(154,107,47,0.5) !important;
  color: #ffffff !important;
}

[data-theme="light"] .rm2-stage-label {
  background: linear-gradient(135deg, #9a6b2f, #0891b2) !important;
  color: #ffffff !important;
  box-shadow: 0 2px 10px rgba(154,107,47,0.4), 0 0 0 2px var(--bg-primary) !important;
}

/* Leader Section */
[data-theme="light"] .leader-photo-ring {
  background: linear-gradient(135deg,#9a6b2f,#b8863f,#d4a24e) !important;
}

[data-theme="light"] .leader-photo-inner {
  background: var(--bg-primary) !important;
  border-color: var(--bg-primary) !important;
}

[data-theme="light"] .leader-exp-badge {
  background: linear-gradient(135deg,#9a6b2f,#b8863f,#d4a24e) !important;
  box-shadow: 0 0 0 4px var(--bg-primary), 0 4px 20px rgba(154,107,47,0.6) !important;
}

[data-theme="light"] .leader-exp-num,
[data-theme="light"] .leader-exp-txt {
  color: #ffffff !important;
}

/* Books Section */
[data-theme="light"] .book-card-new {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="light"] .book-card-new:hover {
  border-color: rgba(154,107,47,0.4) !important;
  box-shadow: 0 20px 50px rgba(154,107,47,0.15), 0 0 30px rgba(154,107,47,0.1) !important;
}

[data-theme="light"] .book-info-new h3 {
  color: var(--text-primary) !important;
}

[data-theme="light"] .book-info-new p {
  color: var(--text-secondary) !important;
}

[data-theme="light"] .book-link-new {
  color: #9a6b2f !important;
}

[data-theme="light"] .book-link-new:hover {
  color: #b8863f !important;
}

[data-theme="light"] .book-img-wrap {
  background: var(--bg-tertiary) !important;
}

/* Icon backgrounds in cards */
[data-theme="light"] .bg-white\/5,
[data-theme="light"] .bg-white\/10,
[data-theme="light"] [class*="bg-white/"] {
  background: rgba(154,107,47,0.08) !important;
}

[data-theme="light"] .border-white\/10,
[data-theme="light"] .border-white\/\[0\.08\],
[data-theme="light"] [class*="border-white/"] {
  border-color: var(--border-color) !important;
}

/* Amber/Bronze icon colors */
[data-theme="light"] .text-amber-400,
[data-theme="light"] .text-amber-500,
[data-theme="light"] .text-amber-700 {
  color: #9a6b2f !important;
}

[data-theme="light"] .bg-amber-700\/10,
[data-theme="light"] .bg-amber-700\/5 {
  background: rgba(154,107,47,0.1) !important;
}

[data-theme="light"] .border-amber-600\/20,
[data-theme="light"] .border-amber-600\/25,
[data-theme="light"] .border-amber-600\/40 {
  border-color: rgba(154,107,47,0.25) !important;
}

/* Why Capability section icons */
[data-theme="light"] .why-bento .card svg {
  color: #9a6b2f !important;
}

/* Contact form */
[data-theme="light"] #contact .card {
  background: var(--bg-secondary) !important;
}

/* Footer links */
[data-theme="light"] footer a {
  color: var(--text-secondary) !important;
}

[data-theme="light"] footer a:hover {
  color: var(--text-primary) !important;
}

/* Ensure all slate text colors map correctly in light theme */
[data-theme="light"] .text-slate-100,
[data-theme="light"] .text-slate-200 {
  color: var(--text-primary) !important;
}

[data-theme="light"] .text-slate-300,
[data-theme="light"] .text-slate-400 {
  color: var(--text-secondary) !important;
}

[data-theme="light"] .text-slate-500,
[data-theme="light"] .text-slate-600 {
  color: var(--text-muted) !important;
}

/* Roadmap legacy styles */
[data-theme="light"] .rm-item .card {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="light"] .rm-item:hover .card {
  border-color: rgba(154,107,47,0.4) !important;
  box-shadow: 0 8px 32px rgba(154,107,47,0.12) !important;
}

[data-theme="light"] .rm-item .card h3 {
  color: var(--text-primary) !important;
}

[data-theme="light"] .rm-item .card p {
  color: var(--text-secondary) !important;
}

/* Blurred background elements */
[data-theme="light"] section > div[class*="absolute"][class*="blur"] {
  opacity: 0.4 !important;
}

/* Outcome box in CAPSS */
[data-theme="light"] #capss .border-amber-600\/25 {
  background: linear-gradient(135deg,rgba(154,107,47,.1),rgba(184,134,63,.05)) !important;
  border-color: rgba(154,107,47,0.3) !important;
}

[data-theme="light"] #capss .border-amber-600\/25 p {
  color: var(--text-primary) !important;
}

[data-theme="light"] #capss .border-amber-600\/25 strong {
  color: var(--text-primary) !important;
}

/* Stats section */
[data-theme="light"] .stats-bento .card {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="light"] .stats-bento .card:hover {
  border-color: rgba(154,107,47,0.4) !important;
}

/* Why Capability section */
[data-theme="light"] .why-bento .card {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="light"] .why-bento .card:hover {
  border-color: var(--border-color) !important;
}

[data-theme="light"] .why-bento .card h3 {
  color: var(--text-primary) !important;
}

/* Outcomes grid in About section */
[data-theme="light"] .outcomes-grid .card {
  background: var(--bg-secondary) !important;
  border-color: var(--border-color) !important;
}

[data-theme="light"] .outcomes-grid .card h4 {
  color: var(--text-primary) !important;
}

[data-theme="light"] .outcomes-grid .card p {
  color: var(--text-secondary) !important;
}


/* ══════════════════════════════════════════
   LIGHT THEME - CAPSS PILL LETTER FIXES
   ══════════════════════════════════════════ */
[data-theme="light"] .cpill-l,
[data-theme="light"] .cpill span[style*="background: rgba(255,255,255,0.05)"],
[data-theme="light"] .cpill span[style*="background: rgba(255,255,255,0.2)"] {
  background: rgba(154,107,47,0.15) !important;
  color: var(--text-primary) !important;
}

[data-theme="light"] .cpill.active span[style*="background"] {
  background: rgba(255,255,255,0.3) !important;
  color: #ffffff !important;
}


/* ══════════════════════════════════════════
   LIGHT THEME - COMPREHENSIVE TAILWIND CLASS OVERRIDES
   Handles all bg-white/X and border-white/X patterns
   ══════════════════════════════════════════ */

/* Background overrides for light theme */
[data-theme="light"] .bg-white\/5,
[data-theme="light"] .bg-white\/10,
[data-theme="light"] .bg-white\/\[0\.03\],
[data-theme="light"] .bg-white\/\[0\.05\] {
  background: rgba(154,107,47,0.08) !important;
}

[data-theme="light"] .bg-white\/20 {
  background: rgba(154,107,47,0.15) !important;
}

/* Border overrides for light theme */
[data-theme="light"] .border-white\/10,
[data-theme="light"] .border-white\/20,
[data-theme="light"] .border-white\/\[0\.08\],
[data-theme="light"] .border-white\/\[0\.1\] {
  border-color: var(--border-color) !important;
}

/* Hover states for cards and buttons */
[data-theme="light"] .hover\:border-white\/20:hover {
  border-color: rgba(154,107,47,0.25) !important;
}

[data-theme="light"] .hover\:bg-white\/10:hover {
  background: rgba(154,107,47,0.12) !important;
}

[data-theme="light"] .hover\:text-white:hover {
  color: var(--text-primary) !important;
}

/* Gallery filter buttons */
[data-theme="light"] .gal-filter-btn:not(.active) {
  background: rgba(154,107,47,0.08) !important;
  border-color: rgba(154,107,47,0.2) !important;
  color: var(--text-secondary) !important;
}

[data-theme="light"] .gal-filter-btn:not(.active):hover {
  background: rgba(154,107,47,0.15) !important;
  color: var(--text-primary) !important;
}

/* Icon containers in Why Capability cards */
[data-theme="light"] .why-bento .card .w-11 {
  background: rgba(154,107,47,0.12) !important;
  border-color: rgba(154,107,47,0.25) !important;
}

/* Modal close button */
[data-theme="light"] .modal-box button[onclick*="closeModal"] {
  background: rgba(154,107,47,0.08) !important;
  border-color: rgba(154,107,47,0.2) !important;
  color: var(--text-secondary) !important;
}

[data-theme="light"] .modal-box button[onclick*="closeModal"]:hover {
  color: var(--text-primary) !important;
}

/* Contact section icon containers */
[data-theme="light"] #contact .card .w-10 {
  background: rgba(154,107,47,0.12) !important;
  border-color: rgba(154,107,47,0.25) !important;
}

[data-theme="light"] #contact .card:hover {
  border-color: rgba(154,107,47,0.3) !important;
}