:root {
  --kb-navy-950: #060f24;
  --kb-navy-900: #0b1a38;
  --kb-navy-800: #12295a;
  --kb-navy-700: #1b3a72;
  --kb-blue-500: #2f5fa8;
  --kb-blue-300: #6f97cf;
  --kb-gold-300: #f0d68a;
  --kb-gold-400: #e3c674;
  --kb-gold-500: #c9a227;
  --kb-gold-600: #a97e15;
  --kb-cream: #f8f6f1;
  --kb-cream-dark: #efeadf;
  --kb-ink: #17203a;
  --kb-gray: #5b6478;
  --kb-radius: 0.9rem;
  --kb-shadow: 0 1.25rem 3rem -1.5rem rgba(6, 15, 36, 0.45);
  --kb-shadow-sm: 0 0.5rem 1.5rem -0.75rem rgba(6, 15, 36, 0.35);
}

html { scroll-behavior: smooth; }

body {
  font-family: "Source Sans 3", "Inter", system-ui, -apple-system, sans-serif;
  color: var(--kb-ink);
  background-color: var(--kb-cream);
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, .font-serif {
  font-family: "Playfair Display", Georgia, "Times New Roman", serif;
}

.text-gold { color: var(--kb-gold-500) !important; }
.text-navy { color: var(--kb-navy-800) !important; }
.bg-navy { background-color: var(--kb-navy-900) !important; }
.bg-cream { background-color: var(--kb-cream) !important; }
.bg-cream-dark { background-color: var(--kb-cream-dark) !important; }

.gradient-navy {
  background: linear-gradient(135deg, var(--kb-navy-950) 0%, var(--kb-navy-800) 48%, var(--kb-blue-500) 130%);
}

.gradient-gold {
  background: linear-gradient(120deg, var(--kb-gold-300), var(--kb-gold-500) 55%, var(--kb-gold-600));
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--kb-gold-500);
}
.eyebrow::before {
  content: "";
  width: 2rem;
  height: 2px;
  background: var(--kb-gold-500);
  display: inline-block;
}

/* ---------- SVG background patterns (inline data URIs, low-opacity decoration) ---------- */
.pattern-dots {
  position: relative;
  isolation: isolate;
}
.pattern-dots::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.12;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='28'%3E%3Ccircle cx='2' cy='2' r='1.6' fill='%23e3c674'/%3E%3C/svg%3E");
  background-size: 28px 28px;
}

.pattern-grid {
  position: relative;
  isolation: isolate;
}
.pattern-grid::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.06;
  background-image:
    linear-gradient(#fff 1px, transparent 1px),
    linear-gradient(90deg, #fff 1px, transparent 1px);
  background-size: 44px 44px;
}

.pattern-diagonal {
  position: relative;
  isolation: isolate;
}
.pattern-diagonal::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  opacity: 0.05;
  background-image: repeating-linear-gradient(45deg, var(--kb-navy-800) 0 2px, transparent 2px 26px);
}

.pattern-scales {
  position: relative;
}
.pattern-scales::after {
  content: "";
  position: absolute;
  right: -3rem;
  bottom: -3rem;
  width: 16rem;
  height: 16rem;
  z-index: 0;
  opacity: 0.06;
  pointer-events: none;
  background-repeat: no-repeat;
  background-size: contain;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'%3E%3Cg fill='none' stroke='%230b1a38' stroke-width='2.5'%3E%3Cline x1='50' y1='8' x2='50' y2='80'/%3E%3Cline x1='20' y1='22' x2='80' y2='22'/%3E%3Cpath d='M20 22 L8 46 a14 10 0 0 0 24 0 Z'/%3E%3Cpath d='M80 22 L68 46 a14 10 0 0 0 24 0 Z'/%3E%3Ccircle cx='50' cy='8' r='4'/%3E%3Cline x1='34' y1='92' x2='66' y2='92'/%3E%3Cline x1='50' y1='80' x2='50' y2='92'/%3E%3C/g%3E%3C/svg%3E");
}

section, .section-inner { position: relative; z-index: 1; }

/* ---------- Navbar ---------- */
.navbar-kb {
  background: rgba(11, 26, 56, 0.92);
  backdrop-filter: blur(10px);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.navbar-kb.is-scrolled { box-shadow: var(--kb-shadow-sm); }
.navbar-kb .nav-link {
  color: rgba(255, 255, 255, 0.85);
  font-weight: 600;
  font-size: 0.95rem;
  padding: 0.5rem 1rem !important;
}
.navbar-kb .nav-link:hover,
.navbar-kb .nav-link.active { color: var(--kb-gold-400); }
.navbar-brand-kb {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: "Playfair Display", serif;
  font-weight: 700;
  color: #fff !important;
  font-size: 1.05rem;
  line-height: 1.15;
}
.navbar-brand-kb img { width: 42px; height: 42px; }
.navbar-brand-kb small {
  display: block;
  font-family: "Source Sans 3", sans-serif;
  font-weight: 500;
  font-size: 0.68rem;
  letter-spacing: 0.06em;
  color: var(--kb-gold-400);
  text-transform: uppercase;
}

/* ---------- Buttons ---------- */
.btn-gold {
  background: linear-gradient(120deg, var(--kb-gold-300), var(--kb-gold-500) 60%, var(--kb-gold-600));
  border: none;
  color: var(--kb-navy-950);
  font-weight: 700;
  box-shadow: 0 0.5rem 1.25rem -0.5rem rgba(169, 126, 21, 0.65);
}
.btn-gold:hover, .btn-gold:focus {
  color: var(--kb-navy-950);
  filter: brightness(1.06);
  transform: translateY(-1px);
  box-shadow: 0 0.75rem 1.5rem -0.5rem rgba(169, 126, 21, 0.75);
}
.btn-outline-cream {
  border: 1.5px solid rgba(255, 255, 255, 0.55);
  color: #fff;
  font-weight: 600;
}
.btn-outline-cream:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: #fff;
  color: #fff;
}
.btn-navy {
  background: var(--kb-navy-800);
  color: #fff;
  font-weight: 600;
}
.btn-navy:hover { background: var(--kb-navy-700); color: #fff; }
.btn, .btn-gold, .btn-outline-cream, .btn-navy {
  border-radius: 0.6rem;
  padding-inline: 1.5rem;
  padding-block: 0.65rem;
}

/* ---------- Hero ---------- */
.hero {
  color: #fff;
  padding-top: 9.5rem;
  padding-bottom: 6rem;
  position: relative;
  overflow: hidden;
}
.hero::after {
  content: "";
  position: absolute;
  inset: auto -10% -30% auto;
  width: 46rem;
  height: 46rem;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(227, 198, 116, 0.18), transparent 70%);
  z-index: 0;
  pointer-events: none;
}
.hero-shape-divider {
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  line-height: 0;
}
.hero-image-frame {
  position: relative;
  border-radius: var(--kb-radius);
  overflow: hidden;
  box-shadow: var(--kb-shadow);
}
.hero-image-frame::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(200deg, rgba(11, 26, 56, 0) 55%, rgba(11, 26, 56, 0.55));
  z-index: 1;
}
.hero-image-frame img { width: 100%; height: 100%; object-fit: cover; display: block; }
.stat-badge {
  position: absolute;
  left: -1.25rem;
  bottom: -1.25rem;
  background: #fff;
  color: var(--kb-navy-900);
  border-radius: var(--kb-radius);
  box-shadow: var(--kb-shadow);
  padding: 1rem 1.35rem;
  z-index: 2;
}
.stat-badge .num {
  font-family: "Playfair Display", serif;
  font-weight: 700;
  font-size: 1.6rem;
  color: var(--kb-gold-600);
  line-height: 1;
}
.stat-badge .label { font-size: 0.72rem; color: var(--kb-gray); font-weight: 600; }

/* ---------- Page hero (inner pages) ---------- */
.page-hero {
  color: #fff;
  padding-top: 9.5rem;
  padding-bottom: 5rem;
  position: relative;
}

/* ---------- Section framing ---------- */
.section { padding-block: 5.5rem; }
.section-tight { padding-block: 3.5rem; }

/* ---------- Cards ---------- */
.card-kb {
  background: #fff;
  border: 1px solid rgba(11, 26, 56, 0.06);
  border-radius: var(--kb-radius);
  box-shadow: var(--kb-shadow-sm);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  height: 100%;
}
.card-kb:hover { transform: translateY(-4px); box-shadow: var(--kb-shadow); }

.practice-card {
  padding: 2rem 1.75rem;
  border-top: 3px solid transparent;
  border-image: linear-gradient(120deg, var(--kb-gold-300), var(--kb-gold-600)) 1;
}
.practice-card .icon-wrap {
  width: 3.25rem;
  height: 3.25rem;
  border-radius: 0.75rem;
  background: linear-gradient(135deg, var(--kb-navy-800), var(--kb-blue-500));
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--kb-gold-300);
  font-size: 1.3rem;
  margin-bottom: 1.1rem;
}

.team-card { text-align: center; padding: 1.75rem 1.25rem 2rem; }
.team-card .photo-wrap {
  width: 128px;
  height: 128px;
  margin: 0 auto 1.1rem;
  border-radius: 50%;
  padding: 4px;
  background: linear-gradient(135deg, var(--kb-gold-300), var(--kb-gold-600));
}
.team-card .photo-wrap img {
  width: 100%;
  height: 100%;
  border-radius: 50%;
  object-fit: cover;
  display: block;
  border: 3px solid #fff;
}
.team-card h3 { font-size: 1.08rem; margin-bottom: 0.15rem; }
.team-card .role {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--kb-gold-600);
  background: rgba(201, 162, 39, 0.12);
  border-radius: 2rem;
  padding: 0.2rem 0.75rem;
  margin-bottom: 0.75rem;
}
.team-card p.bio { font-size: 0.88rem; color: var(--kb-gray); }

.support-team-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: #fff;
  border-radius: var(--kb-radius);
  box-shadow: var(--kb-shadow-sm);
  padding: 0.9rem 1.1rem;
  height: 100%;
}
.support-team-card img {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}
.support-team-card h4 { font-size: 0.92rem; margin-bottom: 0.1rem; }
.support-team-card .role { font-size: 0.75rem; color: var(--kb-gold-600); font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; }

/* ---------- CTA banner ---------- */
.cta-banner {
  color: #fff;
  border-radius: 1.25rem;
  padding: 3.25rem 2.5rem;
  overflow: hidden;
  position: relative;
}

/* ---------- Mission / foundation split ---------- */
.mission-card {
  background: #fff;
  border-radius: var(--kb-radius);
  padding: 2rem;
  box-shadow: var(--kb-shadow-sm);
  border-left: 4px solid var(--kb-gold-500);
  height: 100%;
}

/* ---------- FAQ accordion ---------- */
.accordion-kb .accordion-item {
  border: none;
  border-radius: var(--kb-radius) !important;
  overflow: hidden;
  margin-bottom: 0.85rem;
  box-shadow: var(--kb-shadow-sm);
}
.accordion-kb .accordion-button {
  font-weight: 700;
  color: var(--kb-navy-900);
  font-family: "Playfair Display", serif;
}
.accordion-kb .accordion-button:not(.collapsed) {
  background: var(--kb-navy-900);
  color: #fff;
}
.accordion-kb .accordion-button:not(.collapsed)::after {
  filter: invert(1) brightness(3);
}
.accordion-kb .accordion-button:focus { box-shadow: none; }

/* ---------- Contact / office hours ---------- */
.visit-card {
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--kb-radius);
  backdrop-filter: blur(6px);
  padding: 2.25rem 2rem;
  box-shadow: var(--kb-shadow-sm);
}

.hours-list { display: flex; flex-direction: column; }
.hours-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}
.hours-row:last-child { border-bottom: none; padding-bottom: 0; }
.hours-row .day { font-weight: 600; color: #fff; }
.hours-row .time { color: var(--kb-gold-300); font-weight: 600; font-size: 0.92rem; }
.hours-row.is-muted .day { color: rgba(255, 255, 255, 0.65); font-weight: 500; }
.hours-row.is-muted .time { color: rgba(255, 255, 255, 0.55); font-weight: 500; font-style: italic; }

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.3rem 0.75rem;
  border-radius: 2rem;
}
.status-pill .dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  display: inline-block;
}
.status-pill.status-open { background: rgba(45, 201, 118, 0.16); color: #6fe3a4; }
.status-pill.status-open .dot { background: #2dc976; box-shadow: 0 0 0 3px rgba(45, 201, 118, 0.25); }
.status-pill.status-closed { background: rgba(255, 255, 255, 0.1); color: rgba(255, 255, 255, 0.7); }
.status-pill.status-closed .dot { background: rgba(255, 255, 255, 0.5); }

.contact-info-item {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
}
.contact-info-item .icon-wrap {
  width: 2.75rem;
  height: 2.75rem;
  border-radius: 0.65rem;
  background: rgba(227, 198, 116, 0.15);
  color: var(--kb-gold-400);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* ---------- Footer ---------- */
.footer-kb { color: rgba(255, 255, 255, 0.75); }
.footer-kb a { color: rgba(255, 255, 255, 0.75); text-decoration: none; }
.footer-kb a:hover { color: var(--kb-gold-400); }
.footer-kb h5 { color: #fff; font-size: 0.95rem; margin-bottom: 1rem; }
.footer-kb hr { border-color: rgba(255, 255, 255, 0.12); }
.social-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  transition: background 0.2s ease, color 0.2s ease;
}
.social-icon:hover { background: var(--kb-gold-500); color: var(--kb-navy-950); }

/* ---------- WhatsApp floating button ---------- */
.whatsapp-fab {
  position: fixed;
  right: 1.25rem;
  bottom: 1.25rem;
  z-index: 1040;
  width: 3.4rem;
  height: 3.4rem;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.6rem;
  box-shadow: 0 0.75rem 1.5rem -0.5rem rgba(0,0,0,0.4);
  transition: transform 0.2s ease;
}
.whatsapp-fab:hover { transform: scale(1.07); color: #fff; }

/* ---------- Consultation modal ---------- */
#consultModal .modal-content { border-radius: var(--kb-radius); overflow: hidden; border: none; }
#consultModal .modal-header {
  background: linear-gradient(120deg, var(--kb-navy-950), var(--kb-navy-800));
  color: #fff;
  border: none;
}
#consultModal .btn-close { filter: invert(1); }

/* ---------- Utility ---------- */
.rounded-kb { border-radius: var(--kb-radius) !important; }
.shadow-kb { box-shadow: var(--kb-shadow) !important; }
.divider-gold {
  width: 4rem;
  height: 3px;
  background: linear-gradient(120deg, var(--kb-gold-300), var(--kb-gold-600));
  border-radius: 2px;
}

@media (max-width: 767.98px) {
  .hero, .page-hero { padding-top: 7.5rem; padding-bottom: 3.5rem; }
  .stat-badge { left: 1rem; bottom: -1rem; }
  .cta-banner { padding: 2.25rem 1.5rem; }
}