/* ============================================================================
   BRIGHT MINDS ACADEMY — design system
   ---------------------------------------------------------------------------
   Navy + gold, taken from the logo. Loaded last in <head> on every page by
   database/brand.php, which marks <html data-bm="…"> with the surface:
     home | public | login | student | admin | adminlogin
   Rules are scoped with html[data-bm] so they win over each page's own CSS
   without touching those files.

   The look ("Scholar's Crest"):
     • deep navy surfaces, warm ivory paper
     • gold for one thing per view — the action, the highlight, the rule
     • Cinzel for headings (the logo's engraved capitals),
       Manrope + Noto Sans Sinhala for reading
     • the logo's gold rule with its fleur-de-lis under headings
   ========================================================================== */

:root {
    --bm-navy-950: #020d22;
    --bm-navy-900: #04142f;
    --bm-navy-800: #071c40;
    --bm-navy-700: #0e2b5e;
    --bm-navy-600: #16386f;
    --bm-royal:    #1f4ea3;
    --bm-gold-300: #f4dfa6;
    --bm-gold-400: #e4c67f;
    --bm-gold:     #d9b566;
    --bm-gold-600: #b58b35;
    --bm-gold-700: #8a6a22;
    --bm-ivory:    #fbf8f1;
    --bm-paper:    #ffffff;
    --bm-sand:     #f3eee2;
    --bm-ink:      #0e1a33;
    --bm-ink-2:    #3a4760;
    --bm-muted:    #6a7590;
    --bm-line:     #e7e1d2;
    --bm-line-cool:#e3e8f2;

    --bm-gold-grad: linear-gradient(135deg, #f4dfa6 0%, #d9b566 48%, #a67f2e 100%);
    --bm-navy-grad: linear-gradient(150deg, #16386f 0%, #071c40 55%, #020d22 100%);

    --bm-serif: 'Cinzel', 'Noto Serif Sinhala', Georgia, serif;
    --bm-sans:  'Manrope', 'Noto Sans Sinhala', 'Inter', system-ui, sans-serif;

    --bm-r-sm: 10px; --bm-r-md: 16px; --bm-r-lg: 24px;
    --bm-sh-sm: 0 2px 10px rgba(11,31,77,.06);
    --bm-sh-md: 0 14px 40px rgba(11,31,77,.10);
    --bm-sh-lg: 0 30px 80px rgba(11,31,77,.18);
    --bm-sh-gold: 0 12px 28px rgba(181,139,53,.35);
}

/* ═══════════════════════════════════════════════════════════════════════════
   0. EVERY SURFACE — type, selection, focus, scrollbars
   ═════════════════════════════════════════════════════════════════════════ */
html[data-bm] body { font-family: var(--bm-sans); }
/* :where() keeps this at the weight of a plain element selector: it beats the
   pages' own `* { font-family }` resets but loses to any class rule, so icon
   fonts and anything a page deliberately styles keep their face. */
html[data-bm] body :where(*:not(i):not(code):not(pre):not(kbd):not([class*="fa-"]):not([class^="fa"]):not([class*="bx"]):not([class*="icon"]):not(.material-icons):not(.material-symbols-outlined)) {
    font-family: var(--bm-sans);
}
html[data-bm] ::selection { background: var(--bm-gold); color: var(--bm-navy-900); }
html[data-bm] :focus-visible { outline: 2px solid var(--bm-gold); outline-offset: 2px; }
html[data-bm] ::-webkit-scrollbar { width: 10px; height: 10px; }
html[data-bm] ::-webkit-scrollbar-thumb { background: rgba(14,43,94,.35); border-radius: 10px; border: 2px solid transparent; background-clip: padding-box; }
html[data-bm] ::-webkit-scrollbar-thumb:hover { background: var(--bm-gold-600); background-clip: padding-box; }

/* the logo's gold rule and fleur-de-lis, reusable: <span class="bm-swoosh"></span> */
.bm-swoosh {
    display: block; width: 160px; height: 22px; margin: 14px auto 0;
    background: no-repeat center / 100% 100%
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 22'%3E%3Cg fill='%23b58b35'%3E%3Cpath d='M0 10.4h62v1.2H0zM98 10.4h62v1.2H98z'/%3E%3Cpath d='M80 1c-5 5-5 10-1 15h2c4-5 4-10-1-15z'/%3E%3Cpath d='M71 6c-5 0-6 8-1 8 2 0 3-1 4-2-1 2 0 3 3 4h1c-3-4-4-7-7-10zM89 6c5 0 6 8 1 8-2 0-3-1-4-2 1 2 0 3-3 4h-1c3-4 4-7 7-10z'/%3E%3Cpath d='M73 16h14v1.6H73zM78 18h4l-2 3.5z'/%3E%3C/g%3E%3C/svg%3E");
}

/* ═══════════════════════════════════════════════════════════════════════════
   1. PUBLIC WEBSITE — HOME (layouts/layout_3/home.php)
   ═════════════════════════════════════════════════════════════════════════ */
html[data-bm="home"] {
    --accent: var(--bm-gold-600); --accent-rgb: 181,139,53; --accent-light: #f6ecd2;
    --accent2: var(--bm-navy-700); --accent2-rgb: 14,43,94;
    --gold: var(--bm-gold);
    --bg: var(--bm-ivory); --text: var(--bm-ink); --muted: var(--bm-muted);
    --surface: #ffffff; --surface-deep: #ffffff; --border: var(--bm-line);
    --font-main: var(--bm-sans);
    --nav-h: 84px;
    --radius-xl: 22px;
}
html[data-bm="home"] body { background: var(--bm-ivory); color: var(--bm-ink); letter-spacing: 0; }
html[data-bm="home"] .ambient { display: none; }

/* top strip — fixed above the header (it used to sit hidden under it) */
html[data-bm="home"] { --bm-strip: 36px; }
html[data-bm="home"] .gcc-campus-bar {
    background: var(--bm-navy-900) !important; color: rgba(255,255,255,.78) !important; border: 0 !important;
    position: fixed !important; top: 0; left: 0; right: 0; height: var(--bm-strip); z-index: 901;
    display: flex; align-items: center; font-size: 12.5px; overflow: hidden;
}
html[data-bm="home"] .gcc-campus-bar-inner { width: 100%; max-width: 1240px; margin: 0 auto; padding: 0 5%; display: flex; justify-content: space-between; align-items: center; gap: 16px; white-space: nowrap; }
html[data-bm="home"] .gcc-campus-bar-inner > div { display: flex; gap: 18px; }
html[data-bm="home"] .gcc-campus-bar-inner a { display: inline-flex; gap: 6px; align-items: center; }
html[data-bm="home"] .navbar { top: var(--bm-strip) !important; }
html[data-bm="home"] #home { margin-top: calc(var(--nav-h) + var(--bm-strip)) !important; }
@media (max-width: 760px) {
    html[data-bm="home"] { --bm-strip: 0px; }
    html[data-bm="home"] .gcc-campus-bar { display: none !important; }
}
html[data-bm="home"] .gcc-campus-bar i { color: var(--bm-gold) !important; }
html[data-bm="home"] .gcc-campus-bar a { color: rgba(255,255,255,.85) !important; }
html[data-bm="home"] .gcc-campus-bar a:hover { color: var(--bm-gold-300) !important; }

/* header */
html[data-bm="home"] .navbar {
    height: var(--nav-h); background: rgba(255,255,255,.97) !important;
    backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    border-bottom: 1px solid var(--bm-line) !important;
    box-shadow: 0 1px 0 rgba(217,181,102,.0) !important;
}
html[data-bm="home"] .navbar::after {
    content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
    background: linear-gradient(90deg, transparent, var(--bm-gold) 20%, var(--bm-gold-300) 50%, var(--bm-gold) 80%, transparent);
    opacity: .9;
}
html[data-bm="home"] .navbar.scrolled { box-shadow: 0 10px 30px rgba(11,31,77,.10) !important; }
html[data-bm="home"] .logo-wrap img { height: 60px !important; max-width: 310px; object-fit: contain; }
html[data-bm="home"] .nav-links a {
    font-weight: 700; font-size: 14px; color: var(--bm-navy-800); border-radius: 0;
    padding: 8px 12px; position: relative; background: none !important;
}
html[data-bm="home"] .nav-links a::after {
    content: ''; position: absolute; left: 12px; right: 12px; bottom: 2px; height: 2px;
    background: var(--bm-gold); transform: scaleX(0); transform-origin: left; transition: transform .3s ease;
}
html[data-bm="home"] .nav-links a:hover { color: var(--bm-navy-600); }
html[data-bm="home"] .nav-links a:hover::after { transform: scaleX(1); }
html[data-bm="home"] .nav-actions .btn,
html[data-bm="home"] .nav-links .btn-dark {
    background: var(--bm-navy-800) !important; color: #fff !important; border-radius: 12px;
    padding: 12px 22px; box-shadow: inset 0 -3px 0 var(--bm-gold);
}
html[data-bm="home"] .nav-actions .btn:hover { background: var(--bm-navy-700) !important; }
html[data-bm="home"] .nav-actions .btn::after { display: none; }
html[data-bm="home"] .hamburger { color: var(--bm-navy-800); }
@media (max-width: 900px) {
    html[data-bm="home"] { --nav-h: 70px; }
    html[data-bm="home"] .logo-wrap img { height: 42px !important; max-width: 200px; }
    html[data-bm="home"] .nav-links { background: #fff !important; border-bottom: 3px solid var(--bm-gold) !important; }
    html[data-bm="home"] .nav-links a::after { display: none; }
}
@media (max-width: 400px) {
    html[data-bm="home"] .logo-wrap img { height: 34px !important; max-width: 160px; }
}

/* hero */
html[data-bm="home"] .hero-slider { height: min(calc(100vh - var(--nav-h)), 760px); background: var(--bm-navy-950); }
html[data-bm="home"] .hero-scrim {
    background:
        radial-gradient(120% 90% at 100% 0%, rgba(217,181,102,.18) 0%, transparent 45%),
        linear-gradient(100deg, rgba(5,15,41,.94) 0%, rgba(8,23,59,.80) 38%, rgba(11,31,77,.30) 75%, rgba(11,31,77,.15) 100%);
}
html[data-bm="home"] #home { position: relative; }
html[data-bm="home"] #home::after {           /* the logo's gold rule closes the hero */
    content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 3px; z-index: 5; pointer-events: none;
    background: linear-gradient(90deg, transparent, var(--bm-gold) 20%, var(--bm-gold-300) 50%, var(--bm-gold) 80%, transparent);
}
html[data-bm="home"] .hero-content { max-width: 1240px; }
html[data-bm="home"] .hero-eyebrow {
    background: transparent !important; border: 0 !important; backdrop-filter: none !important;
    color: var(--bm-gold-300) !important; padding: 0 0 0 46px !important; position: relative;
    letter-spacing: .28em !important; font-size: 12px !important; font-weight: 800 !important;
}
html[data-bm="home"] .hero-eyebrow::before {
    content: '✦'; position: absolute; left: 0; top: 50%; transform: translateY(-50%);
    color: var(--bm-gold); font-size: 15px; letter-spacing: 0;
    padding-right: 10px; border-right: 0;
}
html[data-bm="home"] .hero-eyebrow::after {
    content: ''; position: absolute; left: 20px; top: 50%; width: 18px; height: 2px; background: var(--bm-gold); opacity: .7;
}
html[data-bm="home"] .hero-title {
    font-family: var(--bm-serif) !important; font-weight: 800; letter-spacing: -.02em !important;
    font-size: clamp(38px, 5.4vw, 74px); line-height: 1.05; max-width: 14ch; color: #fff;
    text-shadow: 0 4px 30px rgba(0,0,0,.25);
}
html[data-bm="home"] .hero-desc { color: rgba(255,255,255,.86); font-weight: 500; }
html[data-bm="home"] .cursor { background: var(--bm-gold) !important; }
html[data-bm="home"] .hero-btn-primary {
    background: var(--bm-gold-grad) !important; color: var(--bm-navy-900) !important;
    border-radius: 14px; font-weight: 800; box-shadow: var(--bm-sh-gold);
}
html[data-bm="home"] .hero-btn-primary:hover { box-shadow: 0 18px 40px rgba(181,139,53,.5) !important; }
html[data-bm="home"] .hero-btn-outline {
    border-radius: 14px; border: 1.5px solid rgba(255,255,255,.55) !important; background: rgba(255,255,255,.06);
}
html[data-bm="home"] .hero-btn-outline:hover { background: #fff !important; color: var(--bm-navy-900) !important; }
html[data-bm="home"] .swiper-pagination { bottom: 70px !important; }
html[data-bm="home"] .swiper-pagination-bullet-active { background: var(--bm-gold) !important; }
html[data-bm="home"] #scrollProgress { background: var(--bm-gold-grad) !important; box-shadow: none !important; }

/* stats: a navy ribbon with gold numbers */
html[data-bm="home"] .stats-strip { margin-top: -10px; margin-bottom: -46px; }
html[data-bm="home"] .stats-grid, html[data-bm="home"] .glass.stats-grid {
    background: var(--bm-navy-grad) !important; border: 1px solid rgba(217,181,102,.35) !important;
    box-shadow: var(--bm-sh-lg) !important; max-width: 1140px; margin: 0 auto; position: relative;
}
html[data-bm="home"] .stats-grid::before, html[data-bm="home"] .stats-grid::after { display: none !important; }
html[data-bm="home"] .stat-item + .stat-item { border-left: 1px solid rgba(255,255,255,.10); }
html[data-bm="home"] .stat-num { font-family: var(--bm-serif); color: var(--bm-gold-400) !important; font-weight: 800; }
html[data-bm="home"] .stat-lbl { color: rgba(255,255,255,.72) !important; text-transform: uppercase; letter-spacing: .14em; font-size: 11.5px; font-weight: 700; }
@media (max-width: 700px) { html[data-bm="home"] .stat-item + .stat-item { border-left: 0; } }

/* section headings */
html[data-bm="home"] .eyebrow {
    color: var(--bm-gold-700) !important; letter-spacing: .3em !important; font-weight: 800; font-size: 11.5px;
}
html[data-bm="home"] .section-h {
    font-family: var(--bm-serif) !important; font-weight: 800; letter-spacing: -.02em !important;
    background: none !important; -webkit-text-fill-color: var(--bm-navy-800) !important; color: var(--bm-navy-800) !important;
    margin-bottom: 60px; position: relative;
}
html[data-bm="home"] .section-h::after {
    content: ''; display: block; width: 160px; height: 22px; margin: 18px auto 0;
    background: no-repeat center / 100% 100%
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 22'%3E%3Cg fill='%23b58b35'%3E%3Cpath d='M0 10.4h62v1.2H0zM98 10.4h62v1.2H98z'/%3E%3Cpath d='M80 1c-5 5-5 10-1 15h2c4-5 4-10-1-15z'/%3E%3Cpath d='M71 6c-5 0-6 8-1 8 2 0 3-1 4-2-1 2 0 3 3 4h1c-3-4-4-7-7-10zM89 6c5 0 6 8 1 8-2 0-3-1-4-2 1 2 0 3-3 4h-1c3-4 4-7 7-10z'/%3E%3Cpath d='M73 16h14v1.6H73zM78 18h4l-2 3.5z'/%3E%3C/g%3E%3C/svg%3E");
}

/* sections alternate ivory / sand, never glass */
html[data-bm="home"] .alt-bg { background: var(--bm-sand) !important; border-color: var(--bm-line) !important; }
html[data-bm="home"] .glass {
    background: #fff !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important;
    border: 1px solid var(--bm-line) !important; box-shadow: var(--bm-sh-sm) !important; border-radius: 20px;
}
html[data-bm="home"] .glass::before, html[data-bm="home"] .glass::after { display: none !important; }
html[data-bm="home"] .tilt:hover { box-shadow: var(--bm-sh-md) !important; border-color: rgba(217,181,102,.55) !important; }

html[data-bm="home"] .feature-card { position: relative; border-top: 4px solid var(--bm-navy-800) !important; }
html[data-bm="home"] .feature-card:hover { border-top-color: var(--bm-gold) !important; }
html[data-bm="home"] .feat-icon {
    background: var(--bm-navy-800) !important; color: var(--bm-gold-400) !important;
    border-radius: 16px 16px 16px 4px; box-shadow: 0 10px 22px rgba(11,31,77,.22);
}
html[data-bm="home"] .feature-card h3, html[data-bm="home"] .course-row h3,
html[data-bm="home"] .inst-name-tag, html[data-bm="home"] .teacher-body h2,
html[data-bm="home"] .contact-side h2, html[data-bm="home"] .result-name {
    font-family: var(--bm-serif); letter-spacing: -.01em;
}
html[data-bm="home"] .feature-card h3, html[data-bm="home"] .course-row h3,
html[data-bm="home"] .teacher-body h2, html[data-bm="home"] .contact-side h2 { color: var(--bm-navy-800); }

html[data-bm="home"] .btn-accent, html[data-bm="home"] .btn.btn-accent {
    background: var(--bm-gold-grad) !important; color: var(--bm-navy-900) !important; font-weight: 800;
    box-shadow: var(--bm-sh-gold);
}
html[data-bm="home"] .btn-dark { background: var(--bm-navy-800) !important; color: #fff !important; }
html[data-bm="home"] .btn-ghost { color: var(--bm-navy-800) !important; border-color: var(--bm-navy-800) !important; }
html[data-bm="home"] .btn-ghost:hover { background: var(--bm-navy-800) !important; color: #fff !important; }
html[data-bm="home"] .badge, html[data-bm="home"] .course-tag { color: var(--bm-gold-700) !important; }
html[data-bm="home"] .badge { background: #f6ecd2 !important; }

html[data-bm="home"] .teacher-quote { border-left-color: var(--bm-gold) !important; background: linear-gradient(90deg, #f6ecd2, transparent) !important; color: var(--bm-navy-800); }
html[data-bm="home"] .btn-map { background: #eef2fb !important; color: var(--bm-navy-700) !important; }
html[data-bm="home"] .inst-card:hover .btn-map { background: var(--bm-navy-800) !important; color: var(--bm-gold-300) !important; }
html[data-bm="home"] .inst-address i, html[data-bm="home"] .video-meta-txt i { color: var(--bm-gold-600) !important; }
html[data-bm="home"] .video-tag { background: var(--bm-navy-800) !important; color: var(--bm-gold-300) !important; }
html[data-bm="home"] .play-btn { background: var(--bm-gold) !important; color: var(--bm-navy-900) !important; }
html[data-bm="home"] .course-row { border-left: 5px solid var(--bm-navy-800) !important; }
html[data-bm="home"] .course-row:hover { border-left-color: var(--bm-gold) !important; }
html[data-bm="home"] .result-card { border: 1px solid rgba(217,181,102,.4) !important; }
html[data-bm="home"] .result-trophy { background: var(--bm-gold-grad) !important; color: var(--bm-navy-900) !important; }
html[data-bm="home"] .result-badge { background: var(--bm-navy-grad) !important; color: var(--bm-gold-300) !important; }
html[data-bm="home"] .lb-score-box { background: #f6ecd2 !important; border-color: rgba(181,139,53,.35) !important; }
html[data-bm="home"] .lb-score-val, html[data-bm="home"] .lb-score-lbl { color: var(--bm-gold-700) !important; }
html[data-bm="home"] .testi-stars { color: var(--bm-gold) !important; }
html[data-bm="home"] .faq-item { background: #fff !important; border: 1px solid var(--bm-line) !important; backdrop-filter: none !important; }
html[data-bm="home"] .f-input:focus { border-color: var(--bm-gold) !important; box-shadow: 0 0 0 4px rgba(217,181,102,.18) !important; }

/* footer: deep navy with the light logo */
html[data-bm="home"] footer {
    background: var(--bm-navy-grad) !important; color: rgba(255,255,255,.74) !important;
    backdrop-filter: none !important; border-top: 4px solid var(--bm-gold) !important; position: relative;
}
html[data-bm="home"] footer h4 { color: #fff !important; font-family: var(--bm-serif); }
html[data-bm="home"] footer h4::after { content: ''; display: block; width: 34px; height: 3px; background: var(--bm-gold); margin-top: 10px; border-radius: 3px; }
html[data-bm="home"] footer a, html[data-bm="home"] footer p, html[data-bm="home"] footer li { color: rgba(255,255,255,.74) !important; }
html[data-bm="home"] footer a:hover { color: var(--bm-gold-300) !important; }
html[data-bm="home"] footer .logo-wrap img { height: 120px !important; max-width: 220px; }
html[data-bm="home"] footer .social-btn { background: rgba(255,255,255,.08) !important; color: #fff !important; border: 1px solid rgba(255,255,255,.15) !important; }
html[data-bm="home"] footer .social-btn:hover { background: var(--bm-gold) !important; color: var(--bm-navy-900) !important; }
html[data-bm="home"] footer [class*="bottom"], html[data-bm="home"] footer [class*="copy"] { border-color: rgba(255,255,255,.12) !important; color: rgba(255,255,255,.55) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   2. PUBLIC WEBSITE — INNER PAGES (layout_3 l3-*, courses, articles …)
   ═════════════════════════════════════════════════════════════════════════ */
html[data-bm="public"], html[data-bm="home"] {
    --green: var(--bm-gold-600) !important; --green-dark: var(--bm-gold-700) !important; --green-soft: #f6ecd2 !important;
    --navy: var(--bm-navy-700) !important; --navy-deep: var(--bm-navy-900) !important; --navy-soft: #eef2fb !important;
    --ink: var(--bm-ink); --canvas: var(--bm-ivory); --line: var(--bm-line);
    --font: var(--bm-sans);
    --login-blue: var(--bm-navy-800); --login-blue-dark: var(--bm-navy-700);
    --sh-green: var(--bm-sh-gold);
    --primary: var(--bm-navy-700) !important; --primary-rgb: 14,43,94 !important; --primary-hover: var(--bm-navy-900) !important;
}
html[data-bm="public"] { --accent: var(--bm-gold-600) !important; --accent-rgb: 181,139,53 !important;
    --accent2: var(--bm-navy-700) !important; --accent2-rgb: 14,43,94 !important; --accent3: var(--bm-navy-700) !important; }
html[data-bm="public"] body { background: var(--bm-ivory); color: var(--bm-ink); }

html[data-bm="public"] .l3-topbar { background: var(--bm-navy-900) !important; color: rgba(255,255,255,.78); }
html[data-bm="public"] .l3-topbar i { color: var(--bm-gold) !important; }
html[data-bm="public"] .l3-header, html[data-bm="public"] .navbar {
    background: #fff !important; border-bottom: 3px solid var(--bm-gold) !important; box-shadow: 0 8px 24px rgba(11,31,77,.06) !important;
}
html[data-bm="public"] .l3-brand img, html[data-bm="public"] .logo-wrap img,
html[data-bm="public"] .navbar .logo img, html[data-bm="public"] header .logo img { height: 50px !important; width: auto !important; max-width: 260px; object-fit: contain; }
html[data-bm="public"] .l3-brand-mark { background: var(--bm-navy-800) !important; color: var(--bm-gold) !important; }
html[data-bm="public"] .l3-menu a { color: var(--bm-navy-800) !important; font-weight: 700; }
html[data-bm="public"] .l3-menu a.on, html[data-bm="public"] .l3-menu a:hover { color: var(--bm-gold-700) !important; }
html[data-bm="public"] .l3-menu a.on::after { background: var(--bm-gold) !important; }

html[data-bm="public"] .l3-title, html[data-bm="public"] h1, html[data-bm="public"] .section-title,
html[data-bm="public"] .page-title, html[data-bm="public"] .section-h { font-family: var(--bm-serif) !important; letter-spacing: -.015em !important; }
html[data-bm="public"] .l3-title { color: var(--bm-navy-800) !important; }
html[data-bm="public"] .l3-title em { color: var(--bm-gold-600) !important; }
html[data-bm="public"] .l3-eyebrow { color: var(--bm-gold-700) !important; }
html[data-bm="public"] .l3-eyebrow::before { background: var(--bm-gold) !important; }

html[data-bm="public"] .l3-btn-green, html[data-bm="public"] .btn-accent, html[data-bm="public"] .btn-primary {
    background: var(--bm-gold-grad) !important; color: var(--bm-navy-900) !important; border-color: transparent !important; font-weight: 800;
}
html[data-bm="public"] .l3-btn-navy, html[data-bm="public"] .l3-btn-login {
    background: var(--bm-navy-800) !important; color: #fff !important; border-radius: 12px !important;
    box-shadow: inset 0 -3px 0 var(--bm-gold) !important;
}
html[data-bm="public"] .l3-btn-line:hover { border-color: var(--bm-gold) !important; color: var(--bm-navy-800) !important; }
html[data-bm="public"] .l3-arrow { background: #f6ecd2 !important; color: var(--bm-gold-700) !important; }

/* page hero bands become navy */
html[data-bm="public"] [class*="l3-page-hero"], html[data-bm="public"] .l3-phero, html[data-bm="public"] .page-hero {
    background: var(--bm-navy-grad) !important; color: #fff;
}
html[data-bm="public"] [class*="l3-page-hero"] h1, html[data-bm="public"] .l3-phero h1, html[data-bm="public"] .page-hero h1 { color: #fff !important; }

html[data-bm="public"] .l3-footer, html[data-bm="public"] footer {
    background: var(--bm-navy-grad) !important; border-top: 4px solid var(--bm-gold) !important; color: rgba(255,255,255,.74);
}
html[data-bm="public"] .l3-footer a:hover, html[data-bm="public"] footer a:hover { color: var(--bm-gold-300) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   3. LOGIN & REGISTER (login.php, register.php, course-login …)
   ═════════════════════════════════════════════════════════════════════════ */
html[data-bm="login"], html[data-bm="login"][data-theme] {
    --primary-logic: var(--bm-navy-800) !important;
    --accent-logic: var(--bm-gold-600) !important;
    --accent-hover: var(--bm-gold-700) !important;
    --brand-gradient: var(--bm-navy-grad) !important;
}
html[data-bm="login"][data-theme="light"], html[data-bm="login"]:not([data-theme]) {
    --bg-main: var(--bm-ivory) !important; --input-bg: #f6f3ea !important;
}
html[data-bm="login"] .brand-section {
    background: var(--bm-navy-grad) !important; color: #fff !important; position: relative; overflow: hidden;
}
html[data-bm="login"] .brand-section::after {
    content: ''; position: absolute; right: -30%; bottom: -12%; width: 130%; height: 60%; pointer-events: none;
    border-radius: 50%; border-top: 6px solid rgba(217,181,102,.55);
    transform: rotate(-8deg);
}
html[data-bm="login"] .brand-section h1, html[data-bm="login"] .brand-section h2 { font-family: var(--bm-serif) !important; color: #fff !important; }
html[data-bm="login"] .brand-section h1 span, html[data-bm="login"] .brand-section h2 span { color: var(--bm-gold-400) !important; }
html[data-bm="login"] .brand-section p { color: rgba(255,255,255,.78) !important; }
html[data-bm="login"] .brand-title-mini { color: var(--bm-gold-300) !important; letter-spacing: .25em; }
html[data-bm="login"] .brand-section .badge { background: rgba(255,255,255,.08) !important; border: 1px solid rgba(217,181,102,.4) !important; color: #fff !important; }
html[data-bm="login"] .brand-section .badge i { color: var(--bm-gold) !important; }
html[data-bm="login"] .logic-particle { color: rgba(217,181,102,.18) !important; }
html[data-bm="login"] .login-header h2 { font-family: var(--bm-serif) !important; color: var(--bm-navy-800); }
html[data-bm="login"][data-theme="dark"] .login-header h2 { color: #fff; }
html[data-bm="login"] .login-btn, html[data-bm="login"] button[type="submit"]:not(.password-toggle) {
    background: var(--bm-gold-grad) !important; color: var(--bm-navy-900) !important; font-weight: 800 !important;
    box-shadow: var(--bm-sh-gold) !important; border: 0 !important;
}
html[data-bm="login"] input:focus, html[data-bm="login"] select:focus {
    border-color: var(--bm-gold) !important; box-shadow: 0 0 0 4px rgba(217,181,102,.18) !important;
}
html[data-bm="login"] a { color: var(--bm-navy-700); }
html[data-bm="login"] .bm-login-logo { display: block; width: min(260px, 70%); height: auto; margin: 0 0 18px; filter: drop-shadow(0 8px 20px rgba(0,0,0,.25)); }
html[data-bm="login"] .bm-form-logo { display: none; width: 190px; margin: 0 auto 18px; }
@media (max-width: 900px) { html[data-bm="login"] .bm-form-logo { display: block; } }

/* The student portal and admin panel each have their own design:
   assets/brand/student.css and assets/brand/admin.css (see database/brand.php). */

/* ═══════════════════════════════════════════════════════════════════════════
   4. PUBLIC WEBSITE — the logo's own setting: engraved capitals on navy
   The logo's white lettering is made for navy, so every public header is navy
   and carries the transparent logo (brand.js swaps the file in). Comes last so
   it wins over the earlier white-header rules at the same specificity.
   ═════════════════════════════════════════════════════════════════════════ */
html[data-bm="home"], html[data-bm="public"], html[data-bm="home"] body, html[data-bm="public"] body { overflow-x: clip; }

html[data-bm="home"] .section-h, html[data-bm="public"] .section-h,
html[data-bm="public"] .l3-title, html[data-bm="public"] h1, html[data-bm="public"] .section-title,
html[data-bm="public"] .page-title, html[data-bm="home"] .hero-title { letter-spacing: .01em !important; font-weight: 700 !important; }
html[data-bm="home"] .feature-card h3, html[data-bm="home"] .course-row h3, html[data-bm="home"] .teacher-body h2,
html[data-bm="home"] .contact-side h2, html[data-bm="home"] .inst-name-tag, html[data-bm="home"] .result-name { letter-spacing: .01em; font-weight: 700; }
html[data-bm="home"] .hero-title { max-width: 18ch; font-size: clamp(32px, 4.6vw, 64px); }
html[data-bm="home"] .stat-num { font-weight: 700; }

/* header bar */
html[data-bm="home"] .navbar, html[data-bm="home"] .navbar.scrolled,
html[data-bm="public"] .navbar, html[data-bm="public"] .navbar.scrolled,
html[data-bm="public"] .l3-header, html[data-bm="public"] .l3-header.stuck,
html[data-bm="public"] .topbar {
    background: var(--bm-navy-950) !important; border-bottom: 2px solid var(--bm-gold) !important;
    box-shadow: 0 8px 26px rgba(2,13,34,.28) !important;
}
html[data-bm="home"] .navbar::after { display: none; }
html[data-bm="public"] .logo-area img { height: 50px !important; width: auto !important; }
html[data-bm="public"] .topbar .brand img { height: 44px !important; width: auto !important; }

/* header links */
html[data-bm="home"] .nav-links a, html[data-bm="public"] .nav-links a,
html[data-bm="public"] .nav-menu a, html[data-bm="public"] .l3-menu > li > a { color: rgba(255,255,255,.88) !important; background: none !important; }
html[data-bm="home"] .nav-links a:hover, html[data-bm="public"] .nav-links a:hover, html[data-bm="public"] .nav-links a.active,
html[data-bm="public"] .nav-menu a:hover, html[data-bm="public"] .nav-menu a.active,
html[data-bm="public"] .l3-menu > li > a:hover, html[data-bm="public"] .l3-menu > li > a.on { color: var(--bm-gold-400) !important; }
html[data-bm="home"] .hamburger, html[data-bm="public"] .hamburger,
html[data-bm="public"] .menu-toggle { color: var(--bm-gold-400) !important; }
html[data-bm="public"] .l3-burger { color: var(--bm-gold-400) !important; background: transparent !important; border-color: rgba(217,181,102,.5) !important; }

/* header buttons: gold, the logo's accent */
html[data-bm="home"] .nav-actions .btn, html[data-bm="home"] .nav-links .btn-dark,
html[data-bm="public"] .nav-links .btn-dark, html[data-bm="public"] .navbar .btn-login, html[data-bm="public"] .navbar .btn-nav,
html[data-bm="public"] .l3-header .l3-btn-login, html[data-bm="public"] .topbar .btn:not(.ghost) {
    background: var(--bm-gold-grad) !important; color: var(--bm-navy-900) !important; border: 0 !important;
    box-shadow: none !important; font-weight: 800 !important;
}
html[data-bm="home"] .nav-actions .btn:hover { background: var(--bm-gold-grad) !important; filter: brightness(1.08); }
html[data-bm="public"] .navbar .btn-login:hover, html[data-bm="public"] .navbar .btn-nav:hover { color: var(--bm-navy-900) !important; filter: brightness(1.08); }
html[data-bm="public"] .topbar .btn.ghost { background: transparent !important; color: #fff !important; border: 1px solid rgba(255,255,255,.4) !important; }
html[data-bm="public"] .topbar .icon-btn { background: rgba(255,255,255,.1) !important; color: var(--bm-gold-400) !important; }

/* phone menus open on the same navy */
@media (max-width: 900px) {
    html[data-bm="home"] .nav-links, html[data-bm="public"] .nav-links, html[data-bm="public"] .nav-wrapper {
        background: var(--bm-navy-950) !important; border-bottom: 2px solid var(--bm-gold) !important;
    }
}
html[data-bm="public"] .l3-drawer-top { background: var(--bm-navy-950); border-bottom: 2px solid var(--bm-gold); }
html[data-bm="public"] .l3-drawer-close { background: transparent !important; color: var(--bm-gold-400) !important; border-color: rgba(217,181,102,.5) !important; }

/* inner pages: navy title band, calm ivory instead of the old coloured blobs */
html[data-bm="public"] .page-header { background: var(--bm-navy-grad) !important; border-bottom: 2px solid var(--bm-gold) !important; }
html[data-bm="public"] .page-header h1 { color: #fff !important; }
html[data-bm="public"] .page-header p { color: rgba(255,255,255,.8) !important; }
html[data-bm="public"]:not([data-theme="dark"]) .mesh { background: var(--bm-ivory) !important; }
html[data-bm="public"] .mesh::before, html[data-bm="public"] .mesh::after { display: none !important; }
html[data-bm="public"] .float-ic { color: var(--bm-gold-600) !important; }

/* a highlighted word inside a heading keeps the heading's face */
html[data-bm="public"] h1 span, html[data-bm="public"] h1 em { font-family: inherit !important; }
/* older pages' footer contact line */
html[data-bm="public"] .footer-contacts-bottom i { color: var(--bm-gold) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   5. HOME — first screen: hero and the student count always fit together
   The hero used to fill the whole window, which pushed the count card past the
   bottom edge of a PC screen. It now leaves room for the card, which sits half
   over the hero, and the card never waits for a scroll animation.
   ═════════════════════════════════════════════════════════════════════════ */
:root {
    --bm-fleur: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 160 22'%3E%3Cg fill='%23d9b566'%3E%3Cpath d='M0 10.4h62v1.2H0zM98 10.4h62v1.2H98z'/%3E%3Cpath d='M80 1c-5 5-5 10-1 15h2c4-5 4-10-1-15z'/%3E%3Cpath d='M71 6c-5 0-6 8-1 8 2 0 3-1 4-2-1 2 0 3 3 4h1c-3-4-4-7-7-10zM89 6c5 0 6 8 1 8-2 0-3-1-4-2 1 2 0 3-3 4h-1c3-4 4-7 7-10z'/%3E%3Cpath d='M73 16h14v1.6H73zM78 18h4l-2 3.5z'/%3E%3C/g%3E%3C/svg%3E");
}
@media (min-width: 901px) {
    html[data-bm="home"] .hero-slider { height: clamp(420px, calc(100vh - var(--nav-h) - var(--bm-strip)), 720px) !important; }
        html[data-bm="home"] .swiper-pagination { bottom: 24px !important; }
}
@media (max-width: 900px) {
    html[data-bm="home"] .hero-slider { height: min(68vh, 560px) !important; }
    html[data-bm="home"] .swiper-pagination { bottom: 56px !important; }
}
html[data-bm="home"] .hero-scrim {
    background: linear-gradient(100deg, rgba(2,13,34,.96) 0%, rgba(2,13,34,.86) 42%, rgba(4,20,47,.42) 78%, rgba(4,20,47,.22) 100%) !important;
}
html[data-bm="home"] .stats-strip, html[data-bm="home"] .stats-strip.reveal {
    margin: -64px 0 0 !important; position: relative; z-index: 20;
    opacity: 1 !important; transform: none !important; filter: none !important;
}
html[data-bm="home"] .stats-grid, html[data-bm="home"] .glass.stats-grid {
    background: var(--bm-navy-950) !important; border: 1px solid var(--bm-gold) !important; border-radius: 18px !important;
    outline: 1px solid rgba(217,181,102,.32); outline-offset: -8px; padding: 32px 40px !important;
    overflow: visible !important;
}
html[data-bm="home"] .stat-num { line-height: 1.15; white-space: nowrap; }
html[data-bm="home"] #features { padding-top: 96px !important; }
@media (max-width: 700px) {
    html[data-bm="home"] .stats-grid, html[data-bm="home"] .glass.stats-grid { padding: 26px 20px !important; gap: 22px 12px !important; }
    html[data-bm="home"] .stats-strip, html[data-bm="home"] .stats-strip.reveal { margin-top: -40px !important; }
    html[data-bm="home"] #features { padding-top: 70px !important; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. HOME — sections: the crest's shield and double gold frame, navy rhythm
   ═════════════════════════════════════════════════════════════════════════ */
html[data-bm="home"] .eyebrow { display: flex; align-items: center; justify-content: center; gap: 14px; }
html[data-bm="home"] .eyebrow::before, html[data-bm="home"] .eyebrow::after { content: ''; width: 34px; height: 1px; background: var(--bm-gold-600); }
html[data-bm="home"] .section-h::after { background-image: var(--bm-fleur) !important; }

/* cards: a fine inner rule, like the double line of the shield */
html[data-bm="home"] .feature-card, html[data-bm="home"] .vm-card, html[data-bm="home"] .testi-card, html[data-bm="home"] .comm-card {
    border: 1px solid var(--bm-line) !important; border-top: 1px solid var(--bm-line) !important; border-radius: 16px !important;
    outline: 1px solid rgba(181,139,53,.22); outline-offset: -8px;
    transition: border-color .3s, box-shadow .3s, outline-color .3s;
}
html[data-bm="home"] .feature-card:hover, html[data-bm="home"] .vm-card:hover, html[data-bm="home"] .testi-card:hover, html[data-bm="home"] .comm-card:hover {
    border-color: var(--bm-gold) !important; border-top-color: var(--bm-gold) !important; outline-color: rgba(181,139,53,.55); box-shadow: var(--bm-sh-md) !important;
}
/* shield-shaped icons */
html[data-bm="home"] .feature-card .feat-icon, html[data-bm="home"] .vm-icon {
    width: 62px; height: 72px; border-radius: 0 !important; box-shadow: none !important;
    background: var(--bm-navy-800) !important; color: var(--bm-gold-400) !important;
    clip-path: polygon(50% 0, 100% 13%, 100% 60%, 50% 100%, 0 60%, 0 13%);
}
html[data-bm="home"] .vm-card h3, html[data-bm="home"] .comm-card h3, html[data-bm="home"] .subj-card h3, html[data-bm="home"] .video-title-txt {
    color: var(--bm-navy-800);
}
html[data-bm="home"] .vm-card h3, html[data-bm="home"] .comm-card h3, html[data-bm="home"] .subj-card h3 {
    font-family: var(--bm-serif) !important; font-weight: 700; letter-spacing: .01em;
}
html[data-bm="home"] .course-row { border: 1px solid var(--bm-line) !important; border-left: 4px solid var(--bm-gold) !important; border-radius: 14px !important; }
html[data-bm="home"] .course-row:hover { border-color: var(--bm-gold) !important; box-shadow: var(--bm-sh-md) !important; }
html[data-bm="home"] .course-row .btn:hover, html[data-bm="home"] .btn-ghost:hover { background: var(--bm-gold-grad) !important; color: var(--bm-navy-900) !important; border-color: transparent !important; }
html[data-bm="home"] .comm-card .comm-btn { background: var(--bm-navy-800) !important; color: var(--bm-gold-300) !important; }

/* navy sections break up the page */
html[data-bm="home"] section:has(.teacher-wrap), html[data-bm="home"] #results { background: var(--bm-navy-grad) !important; border: 0 !important; }
html[data-bm="home"] section:has(.teacher-wrap) .teacher-body { border: 1px solid var(--bm-gold) !important; outline: 1px solid rgba(181,139,53,.25); outline-offset: -8px; border-radius: 16px !important; }
html[data-bm="home"] section:has(.teacher-wrap) .teacher-photo { border: 1px solid var(--bm-gold); }
html[data-bm="home"] #results .eyebrow { color: var(--bm-gold-400) !important; }
html[data-bm="home"] #results .section-h { color: #fff !important; -webkit-text-fill-color: #fff !important; }
html[data-bm="home"] #results .result-card {
    background: rgba(255,255,255,.05) !important; border: 1px solid rgba(217,181,102,.55) !important; border-radius: 16px !important;
    outline: 1px solid rgba(217,181,102,.2); outline-offset: -8px; box-shadow: none !important;
}
html[data-bm="home"] #results .result-card:hover { border-color: var(--bm-gold) !important; background: rgba(255,255,255,.09) !important; }
html[data-bm="home"] #results .result-name { color: #fff !important; }
html[data-bm="home"] #results .result-card, html[data-bm="home"] #results .result-index { color: rgba(255,255,255,.72) !important; }
html[data-bm="home"] #results .result-badge { background: var(--bm-gold-grad) !important; color: var(--bm-navy-900) !important; box-shadow: none !important; }

/* sliders fade out at the edges instead of slicing a card in half */
html[data-bm="home"] .results-slider, html[data-bm="home"] .testi-slider {
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
    mask-image: linear-gradient(90deg, transparent 0, #000 7%, #000 93%, transparent 100%);
}

/* contact: a navy panel beside the form */
html[data-bm="home"] .contact-side {
    background: var(--bm-navy-grad); border: 1px solid var(--bm-gold); border-radius: 16px; padding: 40px;
    outline: 1px solid rgba(217,181,102,.25); outline-offset: -8px; color: #fff;
}
html[data-bm="home"] .contact-side h2, html[data-bm="home"] .contact-side h5 { color: #fff !important; }
html[data-bm="home"] .contact-side p, html[data-bm="home"] .contact-side span, html[data-bm="home"] .contact-side a { color: rgba(255,255,255,.82) !important; }
html[data-bm="home"] .contact-side .c-ico { background: rgba(217,181,102,.14) !important; color: var(--bm-gold-400) !important; }
html[data-bm="home"] .contact-side .c-ico i { color: var(--bm-gold-400) !important; }

/* ═══════════════════════════════════════════════════════════════════════════
   7. INNER PAGES — same ornament and cards as the home page
   ═════════════════════════════════════════════════════════════════════════ */
html[data-bm="public"] .page-header { padding-top: 64px; padding-bottom: 56px; margin-bottom: 44px; }
html[data-bm="public"] .page-header::after {
    content: ''; display: block; width: 160px; height: 22px; margin: 20px auto 0; background: no-repeat center / 100% 100% var(--bm-fleur);
}
html[data-bm="public"] .section-title { color: var(--bm-navy-800) !important; }
html[data-bm="public"] .section-title::after {
    content: ''; display: block !important; width: 160px !important; height: 22px !important; margin: 16px auto 0 !important;
    background: no-repeat center / 100% 100% var(--bm-fleur) !important; border-radius: 0 !important;
}
html[data-bm="public"] .grid > .card, html[data-bm="public"] .info-card, html[data-bm="public"] .form-card {
    background: #fff; border: 1px solid var(--bm-line) !important; border-top: 3px solid var(--bm-gold) !important;
    border-radius: 14px !important; box-shadow: var(--bm-sh-sm) !important;
}
html[data-bm="public"] .grid > .card:hover, html[data-bm="public"] .info-card:hover { box-shadow: var(--bm-sh-md) !important; border-color: var(--bm-gold) !important; }
html[data-bm="public"] .info-icon { background: var(--bm-navy-800) !important; color: var(--bm-gold-400) !important; }
html[data-bm="public"] .info-icon i { color: var(--bm-gold-400) !important; }
html[data-bm="public"] .form-card h2, html[data-bm="public"] .info-details h3 { font-family: var(--bm-serif) !important; color: var(--bm-navy-800) !important; }
html[data-bm="public"] form button[type="submit"] {
    background: var(--bm-gold-grad) !important; color: var(--bm-navy-900) !important; border: 0 !important; font-weight: 800 !important; border-radius: 12px !important;
}
html[data-bm="public"] .footer-logo { font-family: var(--bm-serif) !important; color: var(--bm-gold-300) !important; letter-spacing: .04em; }
/* one card at a time on phones: nothing to fade */
@media (max-width: 640px) {
    html[data-bm="home"] .results-slider, html[data-bm="home"] .testi-slider { -webkit-mask-image: none; mask-image: none; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. HOME — director photo: a framed portrait, not half the screen
   ═════════════════════════════════════════════════════════════════════════ */
html[data-bm="home"] .teacher-wrap { gap: 44px; align-items: center; flex-wrap: nowrap; }
html[data-bm="home"] .teacher-photo {
    flex: 0 0 300px; width: 300px; min-width: 0; aspect-ratio: 4 / 5; border-radius: 16px;
    box-shadow: 0 24px 50px rgba(0,0,0,.35);
}
html[data-bm="home"] .teacher-photo img { width: 100%; height: 100% !important; object-fit: cover; object-position: center top; }
html[data-bm="home"] .teacher-photo::after { display: none; }
html[data-bm="home"] .teacher-body { flex: 1 1 auto; min-width: 0; }
@media (max-width: 860px) {
    html[data-bm="home"] .teacher-wrap { flex-direction: column; gap: 28px; }
    html[data-bm="home"] .teacher-photo { flex: 0 0 auto; width: min(240px, 70%); }
    html[data-bm="home"] .teacher-body { width: 100%; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   9. HOME — everything below the director
   ═════════════════════════════════════════════════════════════════════════ */
/* vision & mission: one navy, one white, side by side */
html[data-bm="home"] #vision-mission .vm-grid { gap: 28px; align-items: stretch; }
html[data-bm="home"] #vision-mission .vm-card { padding: 44px 40px; }
html[data-bm="home"] #vision-mission .vm-card:first-child {
    background: var(--bm-navy-grad) !important; border-color: var(--bm-gold) !important; outline-color: rgba(217,181,102,.28);
}
html[data-bm="home"] #vision-mission .vm-card:first-child h3 { color: #fff; }
html[data-bm="home"] #vision-mission .vm-card:first-child p { color: rgba(255,255,255,.82); }
html[data-bm="home"] #vision-mission .vm-card:first-child .vm-icon { background: var(--bm-gold-grad) !important; color: var(--bm-navy-900) !important; }
html[data-bm="home"] #vision-mission .vm-card h3 { font-size: 24px; margin: 22px 0 14px; }

/* locations */
html[data-bm="home"] .institute-slider .swiper-wrapper:has(> .swiper-slide:only-child) { justify-content: center; }
html[data-bm="home"] .inst-card { border-radius: 16px !important; overflow: hidden; border: 1px solid var(--bm-line) !important; }
html[data-bm="home"] .inst-card:hover { border-color: var(--bm-gold) !important; box-shadow: var(--bm-sh-md) !important; }
html[data-bm="home"] .inst-thumb { border-radius: 0; border-bottom: 3px solid var(--bm-gold); }
html[data-bm="home"] .inst-overlay { background: linear-gradient(to top, rgba(2,13,34,.9) 0%, rgba(2,13,34,.15) 65%); }
html[data-bm="home"] .btn-map { background: var(--bm-navy-800) !important; color: var(--bm-gold-300) !important; border-radius: 10px; }
html[data-bm="home"] .inst-card:hover .btn-map { background: var(--bm-gold-grad) !important; color: var(--bm-navy-900) !important; }

/* subjects: few cards sit in the centre instead of hugging the left */
html[data-bm="home"] .subj-grid { grid-template-columns: repeat(auto-fit, minmax(290px, 400px)); justify-content: center; gap: 28px; }
html[data-bm="home"] .subj-card { border: 1px solid var(--bm-line) !important; border-radius: 16px !important; }
html[data-bm="home"] .subj-card:hover { border-color: var(--bm-gold) !important; box-shadow: var(--bm-sh-md) !important; }
html[data-bm="home"] .subj-photo { height: 200px; border-radius: 0; border-bottom: 3px solid var(--bm-gold); }
html[data-bm="home"] .subj-photo + .subj-icon {
    background: var(--bm-navy-800) !important; color: var(--bm-gold-400) !important; box-shadow: none;
    width: 56px; height: 64px; border-radius: 0 !important; margin-top: -32px;
    clip-path: polygon(50% 0, 100% 13%, 100% 60%, 50% 100%, 0 60%, 0 13%);
}
html[data-bm="home"] .subj-count, html[data-bm="home"] .subj-count i { color: var(--bm-gold-700) !important; }
html[data-bm="home"] .subj-go { background: var(--bm-navy-800) !important; color: var(--bm-gold-300) !important; }
html[data-bm="home"] .subj-card:hover .subj-go { background: var(--bm-gold-grad) !important; color: var(--bm-navy-900) !important; }

/* classes: two columns of proper cards on a PC, not one long list */
html[data-bm="home"] .courses-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
html[data-bm="home"] .course-row {
    flex-direction: column; align-items: flex-start; justify-content: space-between; gap: 22px; padding: 32px !important;
    background: #fff !important; border: 1px solid var(--bm-line) !important; border-top: 3px solid var(--bm-gold) !important; border-left: 1px solid var(--bm-line) !important;
    border-radius: 14px !important;
}
html[data-bm="home"] .course-row:hover { border-color: var(--bm-gold) !important; }
html[data-bm="home"] .course-row h3 { font-size: 19px; line-height: 1.45; }
html[data-bm="home"] .course-row .btn { background: var(--bm-navy-800) !important; color: var(--bm-gold-300) !important; border-color: var(--bm-navy-800) !important; }
html[data-bm="home"] .course-row:hover .btn { background: var(--bm-gold-grad) !important; color: var(--bm-navy-900) !important; border-color: transparent !important; }
@media (max-width: 820px) { html[data-bm="home"] .courses-list { grid-template-columns: minmax(0, 1fr); } }

/* videos: 16:9 thumbnails, gold play button always showing */
html[data-bm="home"] .video-card { border: 1px solid var(--bm-line) !important; border-radius: 14px !important; overflow: hidden; }
html[data-bm="home"] .video-card:hover { border-color: var(--bm-gold) !important; box-shadow: var(--bm-sh-md) !important; }
html[data-bm="home"] .video-thumb { height: auto; aspect-ratio: 16 / 9; border-radius: 0; border-bottom: 3px solid var(--bm-gold); }
html[data-bm="home"] .play-btn { opacity: 1 !important; box-shadow: 0 8px 22px rgba(2,13,34,.45); }
html[data-bm="home"] .video-title-txt {
    font-weight: 700; line-height: 1.5; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden;
}
html[data-bm="home"] .video-meta-txt { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 1; overflow: hidden; }

/* results: long ranks stay inside their badge */
html[data-bm="home"] #results .result-badge { font-size: 13px; line-height: 1.35; padding: 9px 18px; letter-spacing: .04em; text-align: center; max-width: 100%; }

/* gallery: shows it can be opened */
html[data-bm="home"] .gal-item, html[data-bm="public"] .gallery-item { border-radius: 14px !important; cursor: zoom-in; border: 1px solid var(--bm-line); }
html[data-bm="home"] .gal-item::after, html[data-bm="public"] .gallery-item::after {
    content: "\f00e"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 16px;
    position: absolute; top: 14px; right: 14px; width: 40px; height: 40px; border-radius: 50%; z-index: 3;
    display: flex; align-items: center; justify-content: center;
    background: var(--bm-gold-grad); color: var(--bm-navy-900); opacity: .92; pointer-events: none;
    transition: transform .25s;
}
html[data-bm="home"] .gal-item:hover::after, html[data-bm="public"] .gallery-item:hover::after { transform: scale(1.12); }
html[data-bm="home"] .gal-item:hover, html[data-bm="public"] .gallery-item:hover { border-color: var(--bm-gold); }
html[data-bm="home"] .gal-overlay { background: linear-gradient(to top, rgba(2,13,34,.88) 0%, transparent 55%); }
html[data-bm="home"] .gal-overlay h4 { font-family: var(--bm-serif); }
html[data-bm="home"] .gal-overlay span { color: var(--bm-gold-300); }
@media (max-width: 700px) {
    html[data-bm="home"] .gallery-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: 12px; }
    html[data-bm="home"] .gal-item:nth-child(3n+1) { grid-column: span 2; grid-row: span 1; }
    html[data-bm="home"] .gal-item::after, html[data-bm="public"] .gallery-item::after { width: 32px; height: 32px; font-size: 13px; top: 10px; right: 10px; }
}

/* community */
html[data-bm="home"] .community-grid { grid-template-columns: repeat(auto-fit, minmax(280px, 440px)); justify-content: center; }
html[data-bm="home"] .comm-card h4 { font-family: var(--bm-serif); font-weight: 700; color: var(--bm-navy-800); letter-spacing: .01em; font-size: 20px; }
html[data-bm="home"] .comm-card:hover .comm-btn { background: var(--bm-gold-grad) !important; color: var(--bm-navy-900) !important; }

/* testimonials */
html[data-bm="home"] .testi-card { position: relative; padding-top: 44px; }
html[data-bm="home"] .testi-card::before {
    content: '\201C' !important; display: block !important; position: absolute; top: 12px; right: 26px; width: auto; height: auto; background: none;
    font-family: var(--bm-serif); font-size: 72px; line-height: 1; color: rgba(181,139,53,.3);
}
html[data-bm="home"] .testi-avatar { border: 2px solid var(--bm-gold) !important; }
html[data-bm="home"] .testi-name { color: var(--bm-navy-800); font-weight: 800; }
html[data-bm="home"] .testi-course { color: var(--bm-gold-700) !important; }
html[data-bm="home"] #testimonials form { font-family: var(--bm-sans); }
html[data-bm="home"] #testimonials .reveal > .glass { border-top: 3px solid var(--bm-gold) !important; border-radius: 14px !important; }
html[data-bm="home"] #testimonials .reveal > .glass h3 { font-family: var(--bm-serif) !important; color: var(--bm-navy-800); font-weight: 700 !important; }

/* faq */
html[data-bm="home"] .faq-item { border-radius: 12px !important; border-left: 3px solid var(--bm-gold) !important; }
html[data-bm="home"] .faq-q { color: var(--bm-navy-800); font-weight: 700; }
html[data-bm="home"] .faq-q i { color: var(--bm-gold-600) !important; }
html[data-bm="home"] .faq-item:hover { box-shadow: var(--bm-sh-sm); }

/* forms */
html[data-bm="home"] #contact form button[type="submit"], html[data-bm="home"] #testimonials form button[type="submit"] {
    background: var(--bm-gold-grad) !important; color: var(--bm-navy-900) !important; border: 0 !important; font-weight: 800 !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   10. PHOTO VIEWER (brand.js)
   ═════════════════════════════════════════════════════════════════════════ */
html.bm-lb-lock, html.bm-lb-lock body { overflow: hidden !important; }
.bm-lb {
    position: fixed; inset: 0; z-index: 100000; display: none; align-items: center; justify-content: center;
    background: rgba(2,13,34,.94); padding: 56px 72px;
}
.bm-lb.open { display: flex; }
.bm-lb-fig { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; gap: 12px; min-height: 0; }
.bm-lb-fig img { display: block; max-width: 100%; max-height: calc(100vh - 150px); width: auto; height: auto; object-fit: contain; border: 1px solid var(--bm-gold); border-radius: 8px; background: var(--bm-navy-900); }
.bm-lb-fig figcaption { display: flex; gap: 16px; align-items: baseline; color: #fff; font-family: var(--bm-sans); font-size: 14px; text-align: center; }
.bm-lb-count { color: var(--bm-gold-400); font-weight: 700; font-size: 13px; white-space: nowrap; }
.bm-lb-btn {
    position: absolute; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--bm-gold); background: rgba(2,13,34,.7);
    color: var(--bm-gold-300); font-size: 30px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; padding: 0 0 4px;
}
.bm-lb-btn:hover { background: var(--bm-gold-grad); color: var(--bm-navy-900); }
.bm-lb-close { top: 16px; right: 16px; }
.bm-lb-prev { left: 14px; top: 50%; transform: translateY(-50%); }
.bm-lb-next { right: 14px; top: 50%; transform: translateY(-50%); }
.bm-lb-single .bm-lb-prev, .bm-lb-single .bm-lb-next { display: none; }
@media (max-width: 640px) {
    .bm-lb { padding: 64px 10px 70px; }
    .bm-lb-prev, .bm-lb-next { top: auto; bottom: 14px; transform: none; }
    .bm-lb-prev { left: calc(50% - 60px); } .bm-lb-next { right: calc(50% - 60px); }
    .bm-lb-fig img { max-height: calc(100vh - 190px); }
}

/* empty states: the message stays centred; a contact row with no value hides */
html[data-bm="home"] .courses-list > p { grid-column: 1 / -1; }
html[data-bm="home"] .c-item:has(.c-txt span:empty) { display: none; }