:root {
    --body-font-family: "Inter";
    --header-font-family: "Roboto";

    --primary-color: #b91c1c;
    --primary-contrast-color: #ffffff;
    --primary-hover-color: #c03333;
    --primary-soft-color: #f9eded;

    --secondary-color: #1e293b;
    --secondary-contrast-color: #ffffff;
    --secondary-hover-color: #353e4f;
    --secondary-soft-color: #e4e5e7;

    --bg-color: #ffffff;
    --bg-alt-color: #f7f7f7;
    --surface-color: #ffffff;
    --surface-muted-color: #f5f5f5;
    --surface-contrast-color: #000000;

    --text-color: #0f172a;
    --text-muted-color: #656b77;
    --text-soft-color: #9a9ea6;

    --accent-color: #fbbf24;
    --accent-contrast-color: #000000;
    --accent-hover-color: #e2ac20;

    --border-color: #e0e0e0;
    --header-footer-foreground: #ffffff;
    --header-footer-muted: #ffffff;

    --menu-badge-bg-color: #1e293b;
    --menu-badge-text-color: #ffffff;
    --menu-button-bg-color: #1e293b;
    --menu-button-text-color: #ffffff;
    --menu-button-border-color: #1e293b;

    --footer-input-bg-color: #ffffff;
    --footer-input-text-color: #0f172a;
    --footer-input-border-color: #dbdbdb;

    --cta-bg-color: #b91c1c;
    --cta-text-color: #ffffff;
    --cta-hover-bg-color: #c03333;
    --cta-hover-text-color: #ffffff;
    --cta-font-size: 16px;
    --border-radius: 6px;

    --boxed-layout-bg-color: #ffffff;
    --contrast-layout-bg-color: #000000;
    --layout-pattern-img: url('');
}

body {
  background-color:var(--bg-color);
  font-family: var(--body-font-family);
  color: var(--text-color);
  font-size: 16px;
  overflow-x: hidden;
  --theme-cta-gradient: linear-gradient(90deg, var(--primary-color), var(--secondary-color, var(--accent-color, var(--primary-hover-color))));
  --theme-cta-gradient-hover: linear-gradient(90deg, var(--secondary-color, var(--accent-color, var(--primary-hover-color))), var(--primary-color));

  /* ── Elevation tokens ── */
  --shadow-card-hover: 0 8px 24px color-mix(in srgb, var(--primary-color) 16%, transparent);

  /* ── Status / semantic color tokens ── */
  --status-success: #16a34a;
  --status-danger:  #dc2626;
  --status-warning: #d97706;
  --status-info:    #0284c7;
  --placement-status-open: var(--status-success);
  --placement-status-closed: var(--status-danger);
  --placement-status-upcoming: var(--status-info);

  /* ── Semantic badge palette (event categories) ── */
  /* All values verified WCAG AA (≥4.5:1) against white text */
  --badge-workshop:  #7c3aed; /* 5.1:1 */
  --badge-seminar:   #0284c7; /* 6.2:1 */
  --badge-cultural:  #92400e; /* 6.3:1  — darkened from #d97706 (was 2.9:1, failed) */
  --badge-sports:    #047857; /* 5.0:1  — darkened from #059669 (was 3.7:1, failed) */
  --badge-placement: #2563eb; /* 4.7:1 */
  --badge-webinar:   #4f46e5; /* 5.3:1 */
  --badge-festival:  #db2777; /* 5.4:1 */
  --badge-academic:  #1e293b; /* 14.1:1 */
  --badge-news:      #0891b2; /* Cyan 600, 4.6:1 — teal distinct from primary */
  --badge-article:   #7c3aed; /* Violet 700, 5.1:1 */
  --badge-press:     #be185d; /* Pink 700, 6.1:1 */

  /* ── Typography scale (fluid via clamp) ── */
  --text-xs:   11px;
  --text-sm:   13px;
  --text-base: 15px;
  --text-md:   17px;
  --text-lg:   clamp(18px, 2vw, 20px);
  --text-xl:   clamp(20px, 2.5vw, 24px);
  --text-2xl:  clamp(22px, 3vw, 30px);
  --text-3xl:  clamp(26px, 3.5vw, 38px);

  /* ── Section padding defaults ── */
  --section-padding-y:    80px;
  --section-padding-y-sm: 64px;
}

/* m-05: Responsive section padding — reduce 80px on smaller screens */
@media (max-width: 991px) {
  body {
    --section-padding-y:    50px;
    --section-padding-y-sm: 40px;
  }
}
@media (max-width: 767px) {
  body {
    --section-padding-y:    36px;
    --section-padding-y-sm: 28px;
  }
}


.layout-style {
    width: 100%;
    background: var(--bg-color);
}

#mu-menu {
    position: relative;
    z-index: 1030;
    width: 100%;
}

#mu-menu .navbar {
    width: 100%;
}

#mu-menu { transition: box-shadow 0.3s ease; }
#mu-menu.is-scrolled { box-shadow: 0 2px 16px rgba(0, 0, 0, 0.12); }

/* Floating WhatsApp button */
.sch-wa-float {
    align-items: center;
    background: #25d366;
    border-radius: 50%;
    bottom: 80px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.18);
    color: #fff;
    display: flex;
    font-size: 26px;
    height: 52px;
    justify-content: center;
    position: fixed;
    right: 20px;
    text-decoration: none;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
    width: 52px;
    z-index: 1040;
}
.sch-wa-float:hover { color: #fff; transform: scale(1.1); box-shadow: 0 6px 20px rgba(0,0,0,0.24); }
@media (prefers-reduced-motion: reduce) { .sch-wa-float { transition: none; } }

/* m-11: offset anchor scroll past sticky nav */
html { scroll-padding-top: 72px; }

/* m-13: safe-area-inset for scroll-to-top and WhatsApp float */
.scrollToTop { bottom: calc(20px + env(safe-area-inset-bottom, 0px)); right: calc(20px + env(safe-area-inset-right, 0px)); }
.sch-wa-float { bottom: calc(80px + env(safe-area-inset-bottom, 0px)); right: calc(20px + env(safe-area-inset-right, 0px)); }

.body-sub-section {
  background:var(--bg-color);
}

/* ════════════════════════════════════════
   SKIP LINK (accessibility)
   ════════════════════════════════════════ */

.mu-skip-link {
    background: #000;
    border-radius: 0 0 4px 0;
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    left: 0;
    padding: 10px 20px;
    position: absolute;
    text-decoration: none;
    top: -100%;
    z-index: 9999;
}
.mu-skip-link:focus { top: 0; }

/* Global :focus-visible ring — covers all interactive elements across the theme */
:where(a[href],button,[role="button"],[role="tab"],input,select,textarea,[tabindex]:not([tabindex="-1"])):focus-visible {
    outline: 2px solid var(--primary-color, #0055aa);
    outline-offset: 2px;
    border-radius: 3px;
}
:where(a[href],button,[role="button"],[role="tab"]):focus-visible { text-decoration: none; }

/* ════════════════════════════════════════
   SHARED EMPTY STATE  (.mu-empty-state)
   Used via partials/empty-state.blade.php
   ════════════════════════════════════════ */

.mu-empty-state {
    text-align: center;
    padding: 60px 20px;
    color: var(--text-muted-color, #666);
}
.mu-empty-state .fa {
    font-size: 48px;
    color: var(--border-color, #ddd);
    display: block;
    margin-bottom: 16px;
}
.mu-empty-state h4 {
    font-size: var(--text-xl, 22px);
    color: var(--heading-color, #333);
    margin: 0 0 10px;
    font-weight: 600;
}
.mu-empty-state p { margin: 0 0 20px; font-size: var(--text-base, 15px); }
.mu-empty-state-link {
    display: inline-block;
    padding: 8px 24px;
    background: var(--primary-color);
    color: #fff;
    border-radius: 4px;
    text-decoration: none;
    font-size: var(--text-sm, 13px);
    font-weight: 500;
    transition: background 0.2s;
}
.mu-empty-state-link:hover { background: var(--primary-hover-color, var(--primary-color)); color: #fff; }

/* ════════════════════════════════════════
   NOTICE TICKER
   ════════════════════════════════════════ */

.notice-ticker {
    display: flex;
    align-items: stretch;
    background: color-mix(in srgb, var(--primary-color), #fff 90%);
    border-bottom: 2px solid color-mix(in srgb, var(--primary-color), transparent 70%);
    color: var(--text-color);
    height: 38px;
    overflow: hidden;
    position: relative;
    z-index: 1000;
    clear: both;
    float: left;
    width: 100%;
}

/* Fixed label badge */
.notice-ticker__label {
    display: flex;
    align-items: center;
    gap: 7px;
    padding: 0 18px;
    background: var(--primary-color);
    font-size: var(--text-xs);
    font-weight: 800;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--primary-contrast-color, #fff);
    flex-shrink: 0;
    white-space: nowrap;
}

/* Scrollable track wrapper */
.notice-ticker__wrap {
    flex: 1;
    overflow: hidden;
    display: flex;
    align-items: center;
    /* mask edges */
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 3%, #000 97%, transparent 100%);
}

/* Animated track */
.notice-ticker__track {
    display: flex;
    align-items: center;
    gap: 0;
    white-space: nowrap;
    width: max-content;
    animation: ticker-scroll 30s linear infinite;
}

@keyframes ticker-scroll {
    0%   { transform: translateX(100%); }
    100% { transform: translateX(-100%); }
}

/* Individual notice link */
.notice-ticker__item {
    display: inline-flex;
    align-items: center;
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-color);
    text-decoration: none;
    padding: 0 14px;
    transition: color 0.2s;
    white-space: nowrap;
}

.notice-ticker__item:hover {
    color: var(--primary-color);
    text-decoration: underline;
}

/* Bullet separator */
.notice-ticker__sep {
    font-size: 10px;
    opacity: 0.35;
    padding: 0 4px;
    color: var(--primary-color);
}

/* Close button */
.notice-ticker__close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    flex-shrink: 0;
    background: transparent;
    border: none;
    border-left: 1px solid color-mix(in srgb, var(--primary-color), transparent 75%);
    color: color-mix(in srgb, var(--text-color), transparent 40%);
    font-size: 12px;
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
}

.notice-ticker__close:hover {
    background: color-mix(in srgb, var(--primary-color), transparent 88%);
    color: var(--primary-color);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .notice-ticker__track {
        animation: none;
        flex-wrap: wrap;
    }
}

/* ════════════════════════════════════════
   CARD HOVER ELEVATION UTILITY
   .default-card-hover class — or apply directly to card selectors below.
════════════════════════════════════════ */
.default-card-hover,
.dhb-card,
.default-event-card,
.course-program-card,
.pd-card,
.car-card,
.ast-card,
.fac-card {
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}
@media (prefers-reduced-motion: no-preference) {
    .default-card-hover:hover,
    .default-card-hover:focus-within,
    .dhb-card:hover,
    .default-event-card:hover,
    .course-program-card:hover,
    .pd-card:hover,
    .car-card:hover,
    .ast-card:hover {
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.13);
        transform: translateY(-4px);
    }
}

/* ════════════════════════════════════════
   SCROLL-TRIGGERED REVEAL
   Elements with [data-reveal] start hidden and fade+slide in
   when they enter the viewport. custom.js drives the .is-visible toggle.
   Disabled by prefers-reduced-motion.
════════════════════════════════════════ */
@media (prefers-reduced-motion: no-preference) {
    [data-reveal] {
        opacity: 0;
        transform: translateY(24px);
        transition: opacity 0.55s ease, transform 0.55s ease;
    }
    [data-reveal][data-reveal="left"] {
        transform: translateX(-28px);
    }
    [data-reveal][data-reveal="right"] {
        transform: translateX(28px);
    }
    [data-reveal][data-reveal="scale"] {
        transform: scale(0.94);
    }
    [data-reveal].is-visible {
        opacity: 1;
        transform: none;
    }
}

/* ════════════════════════════════════════
   SHARED SECTION HEADING SYSTEM
   Usage:
     <div class="page-section-header [page-section-header--center]">
       <span class="section-eyebrow">Eyebrow</span>
       <h2 class="section-heading">Title</h2>
       <p class="section-description">Lead text.</p>
     </div>
   ════════════════════════════════════════ */

.page-section-header {
    margin-bottom: 40px;
}

.page-section-header--center {
    text-align: center;
}

.section-eyebrow {
    background: color-mix(in srgb, var(--primary-color), transparent 88%);
    border-radius: 100px;
    color: var(--primary-color);
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-bottom: 10px;
    padding: 4px 14px;
    text-transform: uppercase;
}

.section-heading {
    color: var(--heading-color, var(--text-color));
    font-family: var(--header-font-family);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 12px;
}

.section-description {
    color: var(--text-muted-color);
    font-size: var(--text-base);
    line-height: 1.65;
    margin: 0;
    max-width: 680px;
}

.page-section-header--center .section-description {
    margin-left: auto;
    margin-right: auto;
}

/* ── Dark section overrides ── */
.home-section-bg-dark .section-eyebrow {
    background: color-mix(in srgb, var(--primary-color), transparent 82%);
    color: var(--primary-color);
}

.home-section-bg-dark .section-heading {
    color: var(--home-section-heading, var(--home-section-text));
}

.home-section-bg-dark .section-description {
    color: var(--home-section-muted);
}

/* ════════════════════════════════════════
   SHARED BADGE SYSTEM  (.theme-badge)
   Usage: <span class="theme-badge theme-badge--primary">Label</span>
   ════════════════════════════════════════ */

.theme-badge {
    border-radius: 4px;
    display: inline-block;
    font-size: var(--text-xs, 11px);
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 3px 8px;
    text-transform: uppercase;
    white-space: nowrap;
}

.theme-badge--primary {
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    color: var(--primary-color);
}

.theme-badge--accent {
    background: color-mix(in srgb, var(--accent-color) 10%, transparent);
    color: var(--accent-color);
}

.theme-badge--secondary {
    background: color-mix(in srgb, var(--secondary-color) 10%, transparent);
    color: var(--secondary-color);
}

.theme-badge--success {
    background: color-mix(in srgb, var(--status-success, #16a34a) 12%, transparent);
    color: var(--status-success, #16a34a);
}

.theme-badge--danger {
    background: color-mix(in srgb, var(--status-danger, #dc2626) 12%, transparent);
    color: var(--status-danger, #dc2626);
}

.theme-badge--warning {
    background: color-mix(in srgb, var(--status-warning, #d97706) 12%, transparent);
    color: var(--status-warning, #d97706);
}

.theme-badge--neutral {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    color: var(--text-muted-color);
}

/* ════════════════════════════════════════
   SHARED FILTER TAB SYSTEM  (.filter-tab)
   Usage: <div class="filter-tab-group"><button class="filter-tab is-active">All</button></div>
   ════════════════════════════════════════ */

.filter-tab-group {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 28px;
}

.filter-tab {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-muted-color);
    cursor: pointer;
    font-family: var(--body-font-family);
    font-size: var(--text-sm, 13px);
    font-weight: 600;
    padding: 6px 18px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.filter-tab.is-active {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--secondary-contrast-color, #fff);
}

.filter-tab:not(.is-active):hover {
    background: color-mix(in srgb, var(--secondary-color) 10%, transparent);
    border-color: var(--secondary-color);
    color: var(--secondary-color);
}

/* ════════════════════════════════════════
   SHARED DETAIL PAGE LAYOUT  (.detail-layout)
   Usage: <div class="detail-layout"><main>…</main><aside class="detail-aside-card">…</aside></div>
   ════════════════════════════════════════ */

.detail-layout {
    align-items: start;
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr 320px;
}

.detail-aside-card {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, 10px);
    padding: 24px;
    position: sticky;
    top: 80px;
}

@media (max-width: 991px) {
    .detail-layout { grid-template-columns: 1fr; }
    .detail-aside-card { position: static; }
}

/*==================
 HOME PAGE CTA SECTIONS ANIMATION */

.default-home-section-shell {
  --home-section-bg: var(--bg-color);
  --home-section-text: var(--text-color);
  --home-section-muted: var(--text-muted-color);
  --home-section-heading: var(--heading-color, var(--text-color));
  --home-section-surface: var(--surface-color);
  --home-section-border: var(--border-color);
  background: var(--home-section-bg);
  color: var(--home-section-text);
  font-family: var(--body-font-family);
}

#mu-slider,
.hero-video-section,
.default-home-section-shell .body-sub-section {
  font-family: var(--body-font-family);
}

#mu-slider h1,
#mu-slider h2,
#mu-slider h3,
.hero-video-section h1,
.hero-video-section h2,
.hero-video-section h3,
.default-home-section-shell :where(h1, h2, h3, h4, h5, h6) {
  font-family: var(--header-font-family);
}

.default-home-section-shell.home-section-bg-light {
  --home-section-bg: var(--bg-color);
  --home-section-text: var(--text-color);
  --home-section-muted: var(--text-muted-color);
  --home-section-heading: var(--heading-color, var(--text-color));
  --home-section-surface: var(--surface-color);
  --home-section-border: var(--border-color);
}

.default-home-section-shell.home-section-bg-alt {
  --home-section-bg: var(--bg-alt-color);
  --home-section-text: var(--text-color);
  --home-section-muted: var(--text-muted-color);
  --home-section-heading: var(--heading-color, var(--text-color));
  --home-section-surface: var(--surface-color);
  --home-section-border: var(--border-color);
}

.default-home-section-shell.home-section-bg-dark,
.default-home-section-shell .home-section-bg-dark {
  --_dark-base:           color-mix(in srgb, var(--secondary-color) 70%, #0f172a);
  --home-section-bg:      var(--_dark-base);
  --home-section-text:    color-mix(in srgb, #ffffff 94%, var(--secondary-color));
  --home-section-muted:   color-mix(in srgb, #ffffff 62%, var(--secondary-color));
  --home-section-heading: var(--home-section-text);
  --home-section-surface: color-mix(in srgb, #ffffff 10%, var(--_dark-base));
  --home-section-border:  color-mix(in srgb, #ffffff 14%, transparent);
  --home-link-color:      var(--accent-color);
  --home-link-hover:      color-mix(in srgb, var(--accent-color) 80%, #ffffff);
  --home-soft-primary:    color-mix(in srgb, var(--primary-color) 18%, var(--_dark-base));
}

.default-home-section-shell.home-section-bg-dark :where(
  .default-about-heading,
  .default-testimonial-heading,
  .default-courses-heading,
  .default-facilities-heading,
  .default-events-heading,
  .default-gallery-heading,
  .default-departments-section,
  .default-highlights-section,
  .default-facts-section,
  .default-cta-copy,
  .dhb-header,
  .dtr-header,
  .dnb-header,
  .dss-header,
  .dhm-header,
  .dip-header,
  .daj-header
) h2,
.default-home-section-shell .home-section-bg-dark :where(
  .default-about-heading,
  .default-testimonial-heading,
  .default-courses-heading,
  .default-facilities-heading,
  .default-events-heading,
  .default-gallery-heading,
  .default-departments-section,
  .default-highlights-section,
  .default-facts-section,
  .default-cta-copy,
  .dhb-header,
  .dtr-header,
  .dnb-header,
  .dss-header,
  .dhm-header,
  .dip-header,
  .daj-header
) h2 {
  color: var(--home-section-heading, var(--home-section-text)) !important;
}

.default-home-section-shell > .body-sub-section,
.default-home-section-shell > section,
.default-home-section-shell > div {
  background: var(--home-section-bg) !important;
}

.default-home-section-shell > #mu-about-us.default-about-section,
.default-home-section-shell > .default-cta-section {
  background: var(--home-section-bg) !important;
}

.mu-read-more-btn {
  display: inline-block;
  padding: 10px 20px;
  text-transform: uppercase;
  font-weight: bold;
  transition: all 0.4s ease;
  border-radius: var(--border-radius);
  text-decoration: none;
  font-size: var(--cta-font-size);
  text-align: center;
}


.mu-read-more-btn {
  background-color: var(--primary-color);
  color: var(--primary-contrast-color);
  border: none;
}
.mu-read-more-btn:hover, .mu-read-more-btn:focus {
  background-color: var(--primary-hover-color);
  color:var(--accent-color);
}


.sch-cta-btn--secondary {
  background-color: transparent;
  border: 2px solid var(--primary-color);
  color: var(--primary-color);
  border-radius: var(--border-radius);
}
.sch-cta-btn--secondary:hover,
.sch-cta-btn--secondary:focus {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-contrast-color);
}

#mu-footer .mu-footer-top .mu-footer-top-area .mu-footer-widget .mu-subscribe-form .mu-subscribe-btn {
  background-color: var(--cta-bg-color, var(--primary-color));
  border: none;
  border-radius: var(--border-radius);
  color: var(--cta-text-color, var(--primary-contrast-color, #fff));
}
#mu-footer .mu-footer-top .mu-footer-top-area .mu-footer-widget .mu-subscribe-form .mu-subscribe-btn:hover, #mu-footer .mu-footer-top .mu-footer-top-area .mu-footer-widget .mu-subscribe-form .mu-subscribe-btn:focus {
  background-color: var(--cta-hover-bg-color, var(--primary-hover-color));
  color: var(--cta-hover-text-color, var(--primary-contrast-color, #fff));
}


h1, h2, h3, h4, h5, h6 {
  font-family: var(--header-font-family);
}

.cta-button {
    background-color: var(--cta-bg-color);
    color: var(--cta-text-color);
    font-size: var(--cta-font-size);
    border-radius: var(--border-radius);
}


/* LAYOUTS - Page layout styles */
/*==================
 HEADER SECTION
====================*/
#mu-header {
  background-color: var(--primary-color);
  color: var(--header-footer-foreground);
  display: inline;
  float: left;
  width: 100%;
}
#mu-header a,
#mu-header .fa,
#mu-header .mu-top-email a,
#mu-header .mu-top-phone a,
#mu-header .mu-top-social-nav li a {
  color: var(--header-footer-foreground);
}
#mu-header .mu-top-social-nav li a:hover,
#mu-header .mu-top-social-nav li a:focus {
  color: var(--accent-color);
}
#mu-header .mu-header-area {
  display: inline;
  float: left;
  padding: 10px 0;
  width: 100%;
}
#mu-header .mu-header-area .mu-header-top-left {
  display: inline;
  float: left;
  width: 100%;
}
#mu-header .mu-header-area .mu-header-top-left .mu-top-email {
  display: inline;
  float: left;
  font-size: 14px;
}
#mu-header .mu-header-area .mu-header-top-left .mu-top-email i {
  margin-right: 5px;
}
#mu-header .mu-header-area .mu-header-top-left .mu-top-phone {
  border-left: 1px solid rgba(255, 255, 255, 0.22);
  display: inline;
  font-size: 14px;
  float: left;
  margin-left: 15px;
  padding-left: 15px;
}
#mu-header .mu-header-area .mu-header-top-left .mu-top-phone i {
  margin-right: 5px;
}
#mu-header .mu-header-area .mu-header-top-right {
  display: inline;
  float: left;
  text-align: right;
  width: 100%;
}
#mu-header .mu-header-area .mu-header-top-right .mu-top-social-nav {
  display: inline-block;
}
#mu-header .mu-header-area .mu-header-top-right .mu-top-social-nav li {
  display: inline-block;
  margin: 0 2px;
}
#mu-header .mu-header-area .mu-header-top-right .mu-top-social-nav li a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  font-size: 13px;
  border: 1px solid color-mix(in srgb, var(--header-footer-foreground) 40%, transparent);
  border-radius: 3px;
  color: var(--header-footer-foreground);
  background: transparent;
  transition: all 0.3s ease;
  padding: 0;
}
#mu-header .mu-header-area .mu-header-top-right .mu-top-social-nav li a:hover,
#mu-header .mu-header-area .mu-header-top-right .mu-top-social-nav li a:focus {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
}
/* Language switcher dropdown */
#mu-header .lang-switcher { display: inline-block; vertical-align: middle; position: relative; }
#mu-header .lang-switcher__toggle {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid color-mix(in srgb, var(--header-footer-foreground) 40%, transparent);
  border-radius: 3px;
  color: var(--header-footer-foreground);
  font-size: 12px;
  font-weight: 600;
  padding: 3px 8px;
  cursor: pointer;
  height: 28px;
  transition: all 0.3s ease;
}
#mu-header .lang-switcher__toggle:hover,
#mu-header .lang-switcher__toggle:focus,
#mu-header .lang-switcher.show .lang-switcher__toggle {
  background: var(--primary-color);
  border-color: var(--primary-color);
  color: #fff;
  outline: none;
}
#mu-header .lang-switcher__toggle .fa { font-size: 12px; }
#mu-header .lang-switcher__toggle::after { display: none; }
#mu-header .lang-switcher__menu {
  min-width: 120px;
  padding: 4px 0;
  border-radius: 4px;
  border: 1px solid var(--border-color);
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  z-index: 9999;
}
#mu-header .lang-switcher__option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  font-size: 13px;
  color: var(--text-color);
  font-weight: 600;
}
#mu-header .lang-switcher__option .lang-switcher__label {
  font-weight: 400;
  font-size: 12px;
  color: var(--text-muted, #777);
}
#mu-header .lang-switcher__option:hover,
#mu-header .lang-switcher__option:focus {
  background: var(--primary-color);
  color: #fff;
}
#mu-header .lang-switcher__option:hover .lang-switcher__label,
#mu-header .lang-switcher__option:focus .lang-switcher__label { color: rgba(255,255,255,0.8); }
#mu-header .lang-switcher__option.active { background: var(--primary-color); color: #fff; }
#mu-header .lang-switcher__option.active .lang-switcher__label { color: rgba(255,255,255,0.8); }
#mu-menu .navbar {
  background: var(--bg-color);
  border-color: var(--border-color);
}
#mu-menu .navbar-default .navbar-nav > li > a,
#mu-menu .navbar-default .navbar-nav > li > a:focus,
#mu-menu .navbar-brand span,
#mu-menu .navbar-header .navbar-brand,
#mu-menu .navbar-header .navbar-brand:hover,
#mu-menu .navbar-header .navbar-brand:focus,
#mu-menu .navbar-default .navbar-toggle {
  color: var(--text-color);
}
#mu-menu .navbar-default .navbar-nav > li > a:hover,
#mu-menu .navbar-default .navbar-nav > li > a:focus:hover,
#mu-menu .navbar-default .navbar-nav > .open > a,
#mu-menu .navbar-default .navbar-nav > .open > a:hover,
#mu-menu .navbar-default .navbar-nav > .open > a:focus {
  color: var(--primary-color);
  background: var(--primary-soft-color);
}
#mu-menu .dropdown-menu,
#mu-menu .mu-mega-menu {
  background: var(--bg-color);
  border-color: var(--border-color);
  max-width: calc(100vw - 20px);
  position: absolute;
  z-index: 1040;
}
#mu-menu .mu-mega-menu {
  overflow: hidden;
}
#mu-menu .dropdown-menu > li > a,
#mu-menu .mu-mega-menu-links a,
#mu-menu .mu-mega-menu-column h5 {
  color: var(--text-color);
}
#mu-menu .dropdown-menu > li > a:hover,
#mu-menu .dropdown-menu > li > a:focus,
#mu-menu .mu-mega-menu-links a:hover {
  color: var(--primary-color);
  background: var(--primary-soft-color);
}
#mu-menu .navbar-default .navbar-nav .open > a,
#mu-menu .navbar-default .navbar-nav .open > a:hover,
#mu-menu .navbar-default .navbar-nav .open > a:focus,
#mu-menu .navbar-default .navbar-nav li .dropdown-menu li a:hover,
#mu-menu .navbar-default .navbar-nav li .dropdown-menu li a:focus {
  color: var(--primary-contrast-color);
  background: var(--primary-color);
}
.navbar-toggle,
.navbar-default .navbar-toggle,
.navbar-default .navbar-toggle:hover,
.navbar-default .navbar-toggle:focus {
  background-color: var(--menu-button-bg-color);
  border-color: var(--menu-button-border-color);
}
.navbar-default .navbar-toggle .icon-bar {
  background-color: var(--menu-button-text-color);
}
.scrollToTop,
.scrollToTop:hover,
.scrollToTop:focus {
  color: var(--primary-contrast-color);
  background-color: var(--primary-color);
  border-color: var(--primary-color);
}

.scrollToTop:hover,
.scrollToTop:focus {
  background-color: var(--primary-hover-color);
  border-color: var(--primary-hover-color);
}

.scrollToTop:focus-visible {
  outline: 3px solid var(--primary-soft-color);
  outline-offset: 3px;
}

/*==================
 FOOTER
====================*/
#mu-footer {
  display: inline;
  float: left;
  width: 100%;
}

#mu-footer .mu-footer-top {
 background-color:var(--primary-color);
  display: inline;
  float: left;
  padding: 30px 0;
  width: 100%;
}

#mu-footer .mu-footer-top .mu-footer-top-area {
  display: inline;
  float: left;
  width: 100%;
}
#mu-footer .mu-footer-top .mu-footer-top-area .mu-footer-widget {
  display: inline;
  float: left;
  width: 100%;
}
#mu-footer .mu-footer-top .mu-footer-top-area .mu-footer-widget h4 {
  color: var(--header-footer-foreground);
  margin-bottom: 15px;
  text-transform: uppercase;
}
#mu-footer .mu-footer-top .mu-footer-top-area .mu-footer-widget h4 a {
  color: var(--header-footer-foreground);
}
#mu-footer .mu-footer-bottom .mu-footer-bottom-area p,
#mu-footer .mu-footer-bottom .mu-footer-bottom-area p a {
  color: var(--header-footer-muted, var(--header-footer-foreground));
}
#mu-footer .mu-footer-top .mu-footer-top-area .mu-footer-widget ul li a {
  color: var(--header-footer-foreground);
  display: inline-block;
  font-size: 14px;
  font-weight: normal;
  padding: 5px 0 5px 15px;
  position: relative;
  text-transform: capitalize;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
#mu-footer .mu-footer-top .mu-footer-top-area .mu-footer-widget ul li a:before {
  content: "\f101";
  font-family: FontAwesome;
  left: 0;
  position: absolute;
  top: 5px;
}
#mu-footer .mu-footer-top .mu-footer-top-area .mu-footer-widget ul li a:hover, #mu-footer .mu-footer-top .mu-footer-top-area .mu-footer-widget ul li a:focus {
  margin-left: 5px;
}
#mu-footer .mu-footer-top .mu-footer-top-area .mu-footer-widget p {
  color: var(--header-footer-foreground);
}
#mu-footer .mu-footer-top .mu-footer-top-area .mu-footer-widget .mu-subscribe-form {
  display: inline;
  float: left;
  margin-top: 10px;
  width: 100%;
}
#mu-footer .mu-footer-top .mu-footer-top-area .mu-footer-widget .mu-subscribe-form input[type="email"] {
  border: 1px solid var(--footer-input-border-color);
  border-radius: 4px;
  background: var(--footer-input-bg-color);
  color: var(--footer-input-text-color);
  font-size: var(--text-base);
  height: 35px;
  margin-bottom: 20px;
  padding: 5px;
  width: 100%;
  -webkit-transition: all 0.5s;
  -moz-transition: all 0.5s;
  -ms-transition: all 0.5s;
  -o-transition: all 0.5s;
  transition: all 0.5s;
}
#mu-footer .mu-footer-top .mu-footer-top-area .mu-footer-widget .mu-subscribe-form .mu-subscribe-btn {
  font-size: 14px;
  letter-spacing: 0.5px;
  padding: 5px 14px;
  width: auto;
}
#mu-footer .mu-footer-top .mu-footer-top-area .mu-footer-widget address p {
  font-weight: lighter;
  letter-spacing: 0.5px;
  color: var(--header-footer-muted, var(--header-footer-foreground));
  opacity: 0.8;
}
#mu-footer .mu-footer-bottom {

  display: inline;
  float: left;
  padding: 25px 0;
  width: 100%;
}
#mu-footer .mu-footer-bottom .mu-footer-bottom-area {
  display: inline;
  float: left;
  text-align: center;
  width: 100%;
}
#mu-footer .mu-footer-bottom .mu-footer-bottom-area p {
  color: var(--header-footer-foreground);
  margin-bottom: 0;
  letter-spacing: 0.3px;
}
#mu-footer .mu-footer-bottom .mu-footer-bottom-area p a {
  color: var(--header-footer-foreground);
}


/*==================
 ABOUT SECTION
====================*/
#mu-about-us {
  display: inline;
  float: left;
  width: 100%;
  padding: var(--section-padding-y, 80px) 0;
}
#mu-about-us .mu-about-us-area {
  display: inline;
  float: left;
  width: 100%;
}
#mu-about-us .mu-about-us-area .mu-about-us-left {
  display: inline;
  float: left;
  width: 100%;
}
#mu-about-us .mu-about-us-area .mu-about-us-left h2 {
  font-size: clamp(26px, 4vw, 40px);
  margin-bottom: 20px;
  text-align: left;
}
#mu-about-us .mu-about-us-area .mu-about-us-left ul {
  margin-left: 25px;
  margin-bottom: 15px;
}
#mu-about-us .mu-about-us-area .mu-about-us-left ul li {
  line-height: 30px;
  list-style: circle;
}
#mu-about-us .mu-about-us-area .mu-about-us-right {
  display: inline;
    /* float: left; */
    width: 100%;
    min-width: 100%;
    align-items: center;
    display: flex;
    width: 100%;
    background-color: var(--surface-color);
}
#mu-about-us .mu-about-us-area .mu-about-us-right a {
  display: block;
  width: 100%;
  position: relative;
}
#mu-about-us .mu-about-us-area .mu-about-us-right a img {
  width: 100%;
}
#mu-about-us .mu-about-us-area .mu-about-us-right a:after {
  background-color: rgba(0, 0, 0, 0.8);
  bottom: 0;
  color: var(--border-color);
  content: '\f04b';
  font-family: fontAwesome;
  font-size: 50px;
  left: 0;
  padding-top: 27%;
  position: absolute;
  right: 0;
  text-align: center;
  top: 0;
}

/*==== about us dynamic video player ====*/
#about-video-popup {
  background-color: rgba(0, 0, 0, 0.9);
  position: fixed;
  left: 0;
  top: 0;
  right: 0;
  text-align: center;
  bottom: 0;
  z-index: 99999;
}
#about-video-popup span {
  color: #fff;
  cursor: pointer;
  float: right;
  font-size: 30px;
  margin-right: 50px;
  margin-top: 50px;
}
#about-video-popup iframe {
  background: url(../img/loader.gif) center center no-repeat;
  margin: 10% auto;
  width: 650px;
  height: 450px;
}

.mu-title {
  display: inline;
  float: left;
  text-align: center;
  width: 100%;
}
.mu-title h2 {
  color: var(--text-color);
  margin-bottom: 10px;
  text-transform: uppercase;
}
.mu-title p {
  color: var(--text-color);
  letter-spacing: 0.3px;
  line-height: 1.7;
  padding: 0 120px;
}

.scrollToTop {
  background-color: var(--primary-color);
  border: 2px solid var(--primary-color);
  color: var(--primary-contrast-color);
}

/*
.mu-read-more-btn:hover, .mu-read-more-btn:focus {
  background-color: var(--primary-color);
  border-color: var(--primary-color);

}
*/
#mu-menu .navbar-header .navbar-brand {
  color: var(--text-color);
  font-family:var(--header-font-family);
  font-size: 26px;
  font-weight: bold;
  text-transform: uppercase;
  padding-top: 20px;
  letter-spacing: 0.5px;
}
#mu-menu .navbar-header .navbar-brand i {
  color: var(--primary-color);
}

#mu-menu .navbar-default .navbar-nav li > a:hover,
#mu-menu .navbar-default .navbar-nav li > a:focus {
  border-color: var(--primary-color);
  color: var(--primary-color);
}

#mu-menu .navbar-default .navbar-nav li .dropdown-menu {
  border-top: 2px solid var(--primary-color);
}

#mu-menu .navbar-default .navbar-nav li .dropdown-menu li a:hover,
#mu-menu .navbar-default .navbar-nav li .dropdown-menu li a:focus {
  background-color: var(--primary-color);
}

#mu-menu .navbar-default .navbar-nav .open a:hover,
#mu-menu .navbar-default .navbar-nav .open a:focus {
  background-color: var(--primary-color);
}

#mu-menu .navbar-default .navbar-nav > .active > a,
#mu-menu .navbar-default .navbar-nav > .active > a:hover,
#mu-menu .navbar-default .navbar-nav > .active > a:focus {
  color: var(--primary-color);
  border-bottom: 2px solid var(--primary-color);
  background-color: transparent;
}

#mu-slider .mu-slider-single .mu-slider-content span:not(.hero-eyebrow) {
  background-color: var(--primary-color);
}

#mu-slider.sch-cta-style-accent .mu-slider-single .mu-slider-content .sch-cta-btn,
#mu-mobile-slider.sch-cta-style-accent .mu-slider-single .mu-slider-content .sch-cta-btn {
  background-color: var(--accent-color);
  border-color: var(--accent-color);
  color: var(--accent-contrast-color);
}

#mu-slider.sch-cta-style-primary .mu-slider-single .mu-slider-content .sch-cta-btn,
#mu-mobile-slider.sch-cta-style-primary .mu-slider-single .mu-slider-content .sch-cta-btn {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--primary-contrast-color);
}

#mu-slider.sch-cta-style-secondary .mu-slider-single .mu-slider-content .sch-cta-btn,
#mu-mobile-slider.sch-cta-style-secondary .mu-slider-single .mu-slider-content .sch-cta-btn {
  background-color: var(--secondary-color);
  border-color: var(--secondary-color);
  color: var(--secondary-contrast-color);
}

#mu-slider.sch-cta-style-outline .mu-slider-single .mu-slider-content .sch-cta-btn,
#mu-mobile-slider.sch-cta-style-outline .mu-slider-single .mu-slider-content .sch-cta-btn {
  background-color: transparent;
  border-color: currentColor;
  color: var(--primary-contrast-color, #fff);
}



#mu-slider .mu-slider-single .mu-slider-content .sch-cta-btn:hover,#mu-slider .mu-slider-single .mu-slider-content .sch-cta-btn:focus,#mu-mobile-slider .mu-slider-single .mu-slider-content .sch-cta-btn:hover,#mu-mobile-slider .mu-slider-single .mu-slider-content .sch-cta-btn:focus {
  background-color: var(--primary-hover-color);
  border-color: var(--primary-hover-color);
  color: var(--primary-contrast-color);
}

#mu-slider .mu-carousel-btn {
  background-color: var(--secondary-color);
  color: var(--secondary-contrast-color);
}

#mu-slider .mu-carousel-btn:hover,
#mu-slider .mu-carousel-btn:focus {
  background-color: var(--primary-color);
  color: var(--primary-contrast-color);
}

/* Base grid stacking/visibility now lives unconditionally in style.css
   (not gated behind .mu-carousel-ready) to avoid a pre/post-JS layout
   jump -- see that file for why. */

/* ── Carousel slide content entrance animation ── */
@media (prefers-reduced-motion: no-preference) {
  @keyframes muSlideContentIn {
    from { opacity: 0; transform: translateY(22px); }
    to   { opacity: 1; transform: none; }
  }
  #mu-slider.mu-carousel-ready .mu-slider-single.mu-carousel-active .mu-slider-content .hero-eyebrow,
  #mu-slider.mu-carousel-ready .mu-slider-single.mu-carousel-active .mu-slider-content h4,
  #mu-slider.mu-carousel-ready .mu-slider-single.mu-carousel-active .mu-slider-content h2,
  #mu-slider.mu-carousel-ready .mu-slider-single.mu-carousel-active .mu-slider-content p,
  #mu-slider.mu-carousel-ready .mu-slider-single.mu-carousel-active .mu-slider-content .sch-cta-btn {
    animation: muSlideContentIn 0.55s ease both;
  }
  #mu-slider.mu-carousel-ready .mu-slider-single.mu-carousel-active .mu-slider-content .hero-eyebrow { animation-delay: 0.1s; }
  #mu-slider.mu-carousel-ready .mu-slider-single.mu-carousel-active .mu-slider-content h4 { animation-delay: 0.2s; }
  #mu-slider.mu-carousel-ready .mu-slider-single.mu-carousel-active .mu-slider-content h2 { animation-delay: 0.35s; }
  #mu-slider.mu-carousel-ready .mu-slider-single.mu-carousel-active .mu-slider-content p  { animation-delay: 0.5s; }
  #mu-slider.mu-carousel-ready .mu-slider-single.mu-carousel-active .mu-slider-content .sch-cta-btn { animation-delay: 0.65s; }
}

/* ── Testimonial carousel ── */
/* Double-ID (2,1,0)=210 beats style.css #mu-testimonial .mu-testimonial-area .mu-testimonial-content (1,2,0)=120 */
#mu-testimonial #mu-testimonial-slide.mu-testimonial-ready {
    display: grid;
    float: none;
}
/* (2,2,0)=220 beats style.css ...mu-testimonial-content .mu-testimonial-item (1,3,0)=130 */
#mu-testimonial #mu-testimonial-slide.mu-testimonial-ready .mu-testimonial-item {
    display: block;
    float: none;
    grid-area: 1 / 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.5s ease;
}
#mu-testimonial #mu-testimonial-slide.mu-testimonial-ready .mu-testimonial-item.mu-testimonial-active {
    opacity: 1;
    pointer-events: auto;
}
.mu-testimonial-dots {
    display: flex;
    gap: 8px;
    justify-content: center;
    list-style: none;
    margin: 20px 0 0;
    padding: 0;
}
.mu-testimonial-dots li {
    background-color: var(--home-section-text, #333);
    border-radius: 50%;
    cursor: pointer;
    height: 10px;
    opacity: 0.5;
    width: 10px;
}
.mu-testimonial-dots li.active {
    background-color: var(--primary-color);
    opacity: 1;
}

/* ── Gallery lightbox ── */
#mu-lightbox {
    align-items: center;
    background: rgba(0, 0, 0, 0.92);
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
}
#mu-lightbox[hidden] { display: none; }
.mu-lb-img-wrap {
    max-height: 90vh;
    max-width: 90vw;
}
.mu-lb-img {
    display: block;
    max-height: 90vh;
    max-width: 100%;
    object-fit: contain;
}
.mu-lb-close,
.mu-lb-prev,
.mu-lb-next {
    background: rgba(0, 0, 0, 0.5);
    border: none;
    border-radius: 4px;
    color: #fff;
    cursor: pointer;
    font-size: 24px;
    line-height: 1;
    padding: 10px 14px;
    position: absolute;
}
.mu-lb-close { right: 16px; top: 16px; }
.mu-lb-prev  { left: 16px;  top: 50%; transform: translateY(-50%); }
.mu-lb-next  { right: 16px; top: 50%; transform: translateY(-50%); }

#mu-features .mu-features-area .mu-features-content .mu-single-feature span {
  color: var(--primary-color);
  border: 1px solid var(--primary-color);
}

#mu-features .mu-features-area .mu-features-content .mu-single-feature a:hover,
#mu-features .mu-features-area .mu-features-content .mu-single-feature a:focus {
  color: var(--primary-color);
  border-color: var(--primary-color);
}

/* legacy slick-dots rule removed — section uses custom filter tabs */

.mu-latest-course-single .mu-latest-course-img .mu-latest-course-imgcaption a:hover,
.mu-latest-course-single .mu-latest-course-img .mu-latest-course-imgcaption a:focus {
  color: var(--primary-color);
}

.mu-latest-course-single .mu-latest-course-single-content h4 a:hover,
.mu-latest-course-single .mu-latest-course-single-content h4 a:focus {
  color: var(--primary-color);
}

.mu-latest-course-single .mu-latest-course-single-content .mu-latest-course-single-contbottom .mu-course-details {
  color: var(--primary-color);
}

#mu-our-teacher .mu-our-teacher-area .mu-our-teacher-content .mu-our-teacher-single .mu-our-teacher-img .mu-our-teacher-social {
  background-color: var(--primary-color);
}

#mu-our-teacher .mu-our-teacher-area .mu-our-teacher-content .mu-our-teacher-single .mu-our-teacher-img .mu-our-teacher-social a:hover,
#mu-our-teacher .mu-our-teacher-area .mu-our-teacher-content .mu-our-teacher-single .mu-our-teacher-img .mu-our-teacher-social a:focus {
  color: var(--primary-color);
}

/* ── Testimonial: remove background-image & dark overlay ── */
#mu-testimonial {
    background-attachment: unset !important;
    background-image: none !important;
}

#mu-testimonial::after {
    display: none !important;
}

/* ID+class (1,1,0) beats style.css #mu-testimonial padding (1,0,0) */
#mu-testimonial.default-testimonial-section {
    padding: var(--section-padding-y, 80px) 0 !important;
}

/* ── Testimonial inner elements: replace hard-coded dark colours ── */
#mu-testimonial .mu-testimonial-area .mu-testimonial-content .mu-testimonial-item .mu-testimonial-quote {
    background-color: var(--home-section-surface) !important;
}

#mu-testimonial.default-testimonial-section.home-section-bg-light .mu-testimonial-area .mu-testimonial-content .mu-testimonial-item .mu-testimonial-quote,
#mu-testimonial.default-testimonial-section.home-section-bg-alt .mu-testimonial-area .mu-testimonial-content .mu-testimonial-item .mu-testimonial-quote {
    background-color: var(--text-color) !important;
}

#mu-testimonial .mu-testimonial-area .mu-testimonial-content .mu-testimonial-item .mu-testimonial-quote blockquote:before {
    color: var(--home-section-muted) !important;
}

#mu-testimonial.default-testimonial-section.home-section-bg-light .mu-testimonial-area .mu-testimonial-content .mu-testimonial-item .mu-testimonial-quote blockquote:before,
#mu-testimonial.default-testimonial-section.home-section-bg-alt .mu-testimonial-area .mu-testimonial-content .mu-testimonial-item .mu-testimonial-quote blockquote:before {
    color: color-mix(in srgb, var(--bg-color), var(--text-color) 22%) !important;
}

#mu-testimonial .mu-testimonial-area .mu-testimonial-content .mu-testimonial-item .mu-testimonial-quote blockquote p {
    color: var(--home-section-text) !important;
}

#mu-testimonial.default-testimonial-section.home-section-bg-light .mu-testimonial-area .mu-testimonial-content .mu-testimonial-item .mu-testimonial-quote blockquote p,
#mu-testimonial.default-testimonial-section.home-section-bg-alt .mu-testimonial-area .mu-testimonial-content .mu-testimonial-item .mu-testimonial-quote blockquote p {
    color: var(--bg-color) !important;
}

#mu-testimonial .mu-testimonial-area .mu-testimonial-content .mu-testimonial-item .mu-testimonial-img img {
    background-color: var(--home-section-surface) !important;
    border-color: var(--home-section-border) !important;
}

#mu-testimonial .mu-testimonial-area .mu-testimonial-content .mu-testimonial-item .mu-testimonial-info h4 {
    color: var(--home-section-heading) !important;
}

#mu-testimonial .default-testimonial-heading .default-courses-lead,
#mu-testimonial .mu-testimonial-area .mu-testimonial-content .mu-testimonial-item .mu-testimonial-info span {
    color: var(--home-section-muted) !important;
}

#mu-testimonial .mu-testimonial-dots li {
    background-color: var(--home-section-text) !important;
}

/* ── Section heading ── */
.default-testimonial-heading {
    margin-bottom: 44px;
}

.default-testimonial-heading h2 {
    color: var(--home-section-heading, var(--heading-color, var(--home-section-text, var(--text-color))));
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
}

/* ── Avatar — proper circle ── */
.mu-testimonial-avatar {
    border-radius: 50% !important;
    height: 120px !important;
    margin: -50px auto 5px !important;
    object-fit: cover !important;
    width: 120px !important;
}

#mu-testimonial .mu-testimonial-dots li.active {
    background-color: var(--primary-color) !important;
}
.mu-blog-single-item {
  background: var(--bg-color);
}
.mu-blog-single-item .mu-blog-single-img .mu-blog-caption h3 a:hover {
  color: var(--primary-color);
}

.mu-blog-single-item .mu-blog-meta a:hover,
.mu-blog-single-item .mu-blog-meta a:focus {
  color: var(--primary-color);
}

.mu-blog-single-item .mu-blog-description a:hover,
.mu-blog-single-item .mu-blog-description a:focus {
  border-color: var(--primary-color);
}

#mu-page-breadcrumb .mu-page-breadcrumb-area .breadcrumb .active {
  color: var(--primary-color);
}

#mu-course-content {
  background-color: var(--bg-color);
  display: inline;
  float: left;
  padding: var(--section-padding-y, 80px) 0;
  width: 100%;
}

#mu-course-content .mu-course-content-area {
  display: inline;
  float: left;
  width: 100%;
}

#mu-course-content .mu-course-content-area .mu-course-container {
  display: inline;
  float: left;
  width: 100%;
}

#mu-course-content .mu-course-content-area .mu-course-container .mu-latest-course-single {
  border: 1px solid var(--secondary-color);
  margin-bottom: 30px;
}

/** TABLE */

/* Apply primary color to table header */


.table-themed thead {
  background-color: color-mix(in srgb, var(--primary-color) 6%, var(--bg-color));
  color: var(--text-color);
  font-family: var(--header-font-family);
}

/* Alternate row colors using secondary and background color */
.table-themed tbody tr:nth-child(odd) {
  background-color: color-mix(in srgb, var(--accent-color) 8%, var(--bg-color));
  color: var(--text-color);
  font-family: var(--body-font-family);
}

.table-themed tbody tr:nth-child(even) {
  background-color: var(--bg-color);
  color: var(--text-color);
  font-family: var(--body-font-family);
}

/* Hover effect using primary color */
.table-themed tbody tr:hover {
  background-color: color-mix(in srgb, var(--primary-color) 5%, var(--bg-color));
  color: var(--text-color);
}

/* Optional: add borders in primary color */
.table-themed td,
.table-themed th {
  border: 1px solid var(--border-color);
}

.fee-total-row {
  font-weight: bold;
}

/* ============================================================
   FEES PAGE  (fps-)
   ============================================================ */
.fps-shell {
    padding: 52px 0 64px;
}

/* ── Year tab pills ── */
.fps-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 32px;
}
.fps-tab {
    background: var(--surface-color, #fff);
    border: 2px solid var(--border-color, rgba(0,0,0,.12));
    border-radius: 50px;
    color: var(--text-muted, #6c757d);
    cursor: pointer;
    font-family: var(--header-font-family);
    font-size: 0.875rem;
    font-weight: 600;
    padding: 8px 24px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.fps-tab:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.fps-tab--active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-contrast-color, #fff);
}

/* ── Year panels ── */
.fps-panel { display: none; }
.fps-panel--active { display: block; }

/* ── Per-course summary cards ── */
.fps-summary {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
    margin-bottom: 28px;
}
.fps-summary-card {
    align-items: stretch;
    background: var(--surface-color, #fff);
    border: 1px solid color-mix(in srgb, var(--primary-color) 18%, transparent);
    border-radius: var(--border-radius, 12px);
    border-top: 4px solid var(--primary-color);
    box-shadow: 0 2px 10px rgba(0,0,0,.05);
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 20px 18px 16px;
    transition: box-shadow 0.2s, transform 0.2s;
}
.fps-summary-card:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,.1);
    transform: translateY(-2px);
}
.fps-summary-icon {
    align-items: center;
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    border-radius: 8px;
    color: var(--primary-color);
    display: flex;
    font-size: 16px;
    height: 36px;
    justify-content: center;
    margin-bottom: 8px;
    width: 36px;
}
.fps-summary-course {
    color: var(--text-muted, #6c757d);
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.07em;
    overflow: hidden;
    text-overflow: ellipsis;
    text-transform: uppercase;
    white-space: nowrap;
}
.fps-summary-amount {
    color: var(--primary-color);
    font-family: var(--header-font-family);
    font-size: 1.4rem;
    font-weight: 800;
    line-height: 1.2;
}
.fps-summary-sublabel {
    color: var(--text-muted, #6c757d);
    font-size: 0.82rem;
    margin-top: 2px;
}

/* ── Breakdown table card ── */
.fps-breakdown {
    background: var(--surface-color, #fff);
    border: 1px solid var(--border-color, rgba(0,0,0,.10));
    border-radius: var(--border-radius, 12px);
    box-shadow: 0 2px 12px rgba(0,0,0,.05);
    margin-bottom: 20px;
    overflow: hidden;
}
.fps-breakdown-header {
    align-items: center;
    background: color-mix(in srgb, var(--primary-color) 7%, transparent);
    border-bottom: 1px solid color-mix(in srgb, var(--primary-color) 16%, transparent);
    color: var(--heading-color, var(--text-color));
    display: flex;
    font-family: var(--header-font-family);
    font-size: 0.875rem;
    font-weight: 700;
    gap: 10px;
    letter-spacing: 0.06em;
    padding: 12px 20px;
    text-transform: uppercase;
}
.fps-breakdown-header i { color: var(--primary-color); }

/* ── Category filter pills ── */
.fps-category-nav {
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,.10));
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 16px 20px;
}
.fps-cat-pill {
    background: var(--bg-alt-color, transparent);
    border: 1px solid var(--border-color, rgba(0,0,0,.12));
    border-radius: 50px;
    color: var(--text-muted, #6c757d);
    cursor: pointer;
    font-family: var(--header-font-family);
    font-size: 0.8rem;
    font-weight: 600;
    padding: 6px 18px;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.fps-cat-pill:hover {
    border-color: var(--primary-color);
    color: var(--primary-color);
}
.fps-cat-pill--active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-contrast-color, #fff);
}

/* ── Category groups: per-course fee cards ── */
.fps-category-groups {
    padding: 20px;
}
.fps-category-group + .fps-category-group {
    margin-top: 28px;
}
.fps-category-title {
    color: var(--heading-color, var(--text-color));
    font-family: var(--header-font-family);
    font-size: 1rem;
    font-weight: 700;
    margin-bottom: 14px;
}
.fps-course-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
}
.fps-course-card {
    background: var(--bg-alt-color, transparent);
    border: 1px solid var(--border-color, rgba(0,0,0,.10));
    border-radius: var(--border-radius, 10px);
    overflow: hidden;
}
.fps-course-card-header {
    align-items: center;
    background: color-mix(in srgb, var(--primary-color) 7%, transparent);
    color: var(--heading-color, var(--text-color));
    display: flex;
    font-family: var(--header-font-family);
    font-size: 0.9rem;
    font-weight: 700;
    gap: 8px;
    padding: 12px 16px;
}
.fps-course-card-header i { color: var(--primary-color); }
.fps-course-card-table {
    border-collapse: collapse;
    width: 100%;
}
.fps-course-card-table td {
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,.07));
    color: var(--text-color);
    font-size: 0.875rem;
    padding: 10px 16px;
}
.fps-course-card-table td:last-child {
    text-align: right;
}
.fps-course-card-table tr:last-child td {
    border-bottom: none;
}
.fps-course-card-total td {
    color: var(--primary-color);
    font-weight: 700;
}

.fps-table-wrap {
    -webkit-overflow-scrolling: touch;
    overflow-x: auto;
}
.fps-table {
    border-collapse: collapse;
    min-width: 480px;
    width: 100%;
}
.fps-th {
    background: color-mix(in srgb, var(--primary-color) 6%, transparent);
    border-bottom: 2px solid color-mix(in srgb, var(--primary-color) 22%, transparent);
    color: var(--heading-color, var(--text-color));
    font-family: var(--header-font-family);
    font-size: 0.875rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    padding: 13px 18px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}
.fps-th--label { min-width: 170px; }
.fps-td {
    border-bottom: 1px solid var(--border-color, rgba(0,0,0,.07));
    color: var(--text-color);
    font-family: var(--body-font-family);
    font-size: 0.95rem;
    padding: 12px 18px;
}
.fps-td--label {
    color: var(--text-muted, #555);
    font-weight: 500;
}
.fps-row:nth-child(odd) {
    background: color-mix(in srgb, var(--accent-color) 4%, var(--bg-color, #fff));
}
.fps-row:nth-child(even) {
    background: var(--surface-color, var(--bg-color, #fff));
}
.fps-row:hover {
    background: color-mix(in srgb, var(--primary-color) 5%, var(--bg-color, #fff));
}

/* ── tfoot total row — always after all body rows ── */
.fps-tfoot-total {
    background: var(--primary-color) !important;
}
.fps-td--total-label,
.fps-td--total-val {
    border-bottom: none;
    border-top: none;
    color: var(--primary-contrast-color, #fff) !important;
    font-size: 1rem;
    font-weight: 700;
}
.fps-td--total-label { font-size: 0.95rem; letter-spacing: 0.04em; text-transform: uppercase; }

/* ── Disclaimer strip ── */
.fps-disclaimer {
    align-items: flex-start;
    background: color-mix(in srgb, var(--accent-color) 6%, var(--bg-color, #fff));
    border: 1px solid var(--border-color, rgba(0,0,0,.08));
    border-radius: var(--border-radius, 8px);
    color: var(--text-muted, #6c757d);
    display: flex;
    font-size: 0.84rem;
    gap: 12px;
    line-height: 1.6;
    margin-top: 4px;
    padding: 16px 20px;
}
.fps-disclaimer-icon {
    align-items: center;
    background: color-mix(in srgb, var(--primary-color) 10%, transparent);
    border-radius: 50%;
    color: var(--primary-color);
    display: flex;
    flex-shrink: 0;
    font-size: 14px;
    height: 28px;
    justify-content: center;
    width: 28px;
}

/* ── Empty state ── */
.fps-empty {
    background: var(--bg-alt-color, rgba(0,0,0,.03));
    border: 1px dashed var(--border-color, rgba(0,0,0,.16));
    border-radius: var(--border-radius, 8px);
    color: var(--text-muted, #6c757d);
    padding: 56px 24px;
    text-align: center;
}
.fps-empty i { display: block; font-size: 2.5rem; margin-bottom: 14px; opacity: .35; }
.fps-empty h4 { font-size: 1.1rem; margin: 0 0 8px; }
.fps-empty p { font-size: .9rem; margin: 0; }

/*==================
 COURSES SECTION
====================*/
.default-courses-section {
  --dco-tab-accent: var(--secondary-color);
  --dco-tab-accent-contrast: var(--secondary-contrast-color, #fff);
  padding: var(--section-padding-y, 80px) 0;
  color: var(--home-section-text, var(--text-color));
}

/* ── Section heading ── */
.default-courses-heading {
  margin-bottom: 48px;
}

.default-courses-heading h2 {
  color: var(--home-section-heading, var(--heading-color, var(--home-section-text, var(--text-color))));
  font-size: clamp(26px, 3vw, 30px);
  font-weight: 700;
  margin-bottom: 10px;
}

.default-courses-lead {
  color: var(--home-section-muted, var(--text-muted-color));
  font-size: var(--text-md);
  margin: 0 auto;
  max-width: 720px;
}

/* ── Course grid (CSS Grid, replaces Bootstrap row/col) ── */
.default-courses-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(3, 1fr);
}

@media (max-width: 991px) {
    .default-courses-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    .default-courses-grid { grid-template-columns: 1fr; }
}

.default-courses-grid > .dco-item {
    display: flex;
}

.default-courses-grid > .dco-item > .default-course-card {
    width: 100%;
}

.default-course-card {
  background: var(--home-section-surface, var(--surface-color, var(--bg-color)));
  border: 1px solid var(--home-section-border, var(--border-color));
  border-radius: var(--border-radius, 10px);
  box-shadow: none;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.default-course-card:hover {
  box-shadow: var(--shadow-card-hover);
  transform: translateY(-5px);
}

/* ── Image area ── */
.default-course-card-img-wrap {
  flex-shrink: 0;
  height: 200px;
  overflow: hidden;
  position: relative;
}

.default-course-card-img {
  box-shadow: none;
  display: block;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
  width: 100%;
}

.default-course-card:hover .default-course-card-img {
  transform: scale(1.05);
}

/* Gradient overlay + badge */
.default-course-card-badge {
  bottom: 0;
  left: 0;
  padding: 32px 14px 12px;
  position: absolute;
  right: 0;
}

.default-course-card-badge span {
  background: var(--primary-color);
  border-radius: 4px;
  color: var(--primary-contrast-color, #fff);
  display: inline-block;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 3px 10px;
  text-transform: uppercase;
}

/* ── Card body ── */
.default-course-card-body {
  display: flex;
  flex: 1;
  flex-direction: column;
  padding: 18px 20px 20px;
}

.default-course-card-title {
  font-size: var(--text-md);
  font-weight: 600;
  line-height: 1.45;
  margin-bottom: 8px;
}

.default-course-card-title a {
  color: var(--home-section-heading, var(--heading-color, var(--home-section-text, var(--text-color))));
  text-decoration: none;
  transition: color 0.2s;
}

.default-course-card-title a:hover {
  color: var(--primary-color);
}

.default-course-card-desc {
  color: var(--home-section-muted, var(--text-muted-color));
  flex: 1;
  font-size: var(--text-base);
  line-height: 1.65;
  margin-bottom: 16px;
}

.default-course-card-link,
.theme-link-cta {
  align-items: center;
  color: var(--accent-color);
  display: inline-flex;
  font-size: var(--text-sm);
  font-weight: 700;
  gap: 6px;
  letter-spacing: 0.04em;
  text-decoration: none;
  text-transform: uppercase;
  transition: gap 0.2s ease, opacity 0.2s ease;
}
.default-course-card-link { margin-top: auto; }

.default-course-card-link:hover,
.theme-link-cta:hover,
.theme-link-cta:focus {
  color: var(--accent-color);
  gap: 10px;
  opacity: 0.78;
  text-decoration: none;
}

/* ── Course type tabs ── */
.dco-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
}

.dco-tab {
    padding: 7px 22px;
    border-radius: 999px;
    border: 1.5px solid var(--home-section-border, var(--border-color));
    background: transparent;
    color: var(--home-section-muted, var(--text-muted-color));
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.dco-tab:not(.dco-tab--active):hover {
    border-color: var(--dco-tab-accent);
    color: var(--dco-tab-accent);
}

.dco-tab--active {
    background: var(--dco-tab-accent);
    border-color: var(--dco-tab-accent);
    color: var(--dco-tab-accent-contrast);
}

.dco-tab--active:hover {
    background: var(--dco-tab-accent);
    border-color: var(--dco-tab-accent);
    color: var(--dco-tab-accent-contrast);
}

.dco-item--hidden {
    display: none !important;
}

.dco-load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.dco-load-more-wrap--hidden {
    display: none !important;
}

.dco-load-more {
    align-items: center;
    background: none;
    border: 1.5px solid var(--dco-tab-accent);
    border-radius: 999px;
    color: var(--dco-tab-accent);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--text-sm);
    font-weight: 600;
    gap: 8px;
    letter-spacing: 0.03em;
    padding: 9px 26px;
    transition: background 0.2s, color 0.2s;
}

.dco-load-more:hover {
    background: var(--dco-tab-accent);
    color: var(--dco-tab-accent-contrast);
}

.home-section-bg-dark .dco-load-more {
    border-color: color-mix(in srgb, var(--bg-color), transparent 50%);
    color: var(--home-section-muted, var(--text-muted-color));
}

.home-section-bg-dark .dco-load-more:hover {
    background: var(--dco-tab-accent);
    border-color: var(--dco-tab-accent);
    color: var(--dco-tab-accent-contrast);
}

/* ── Course type label inside card ── */
.dco-type-label {
    align-self: flex-start;
    border-radius: 999px;
    color: var(--primary-color);
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
    padding: 2px 10px;
    text-transform: uppercase;
    width: -webkit-fit-content;
    width: fit-content;
}

/* ── Dark section overrides ── */
.home-section-bg-dark .default-course-card-title a:hover {
  color: var(--accent-color);
}

.home-section-bg-dark .default-course-card-link:hover {
  opacity: 1;
}

.home-section-bg-dark .dco-tab {
    border-color: color-mix(in srgb, var(--bg-color), transparent 50%);
    color: var(--home-section-muted, var(--text-muted-color));
}

.home-section-bg-dark .dco-tab:not(.dco-tab--active):hover {
    border-color: var(--dco-tab-accent);
    color: var(--dco-tab-accent);
}

.home-section-bg-dark .dco-tab--active {
    background: var(--dco-tab-accent);
    border-color: var(--dco-tab-accent);
    color: var(--dco-tab-accent-contrast);
}

.home-section-bg-dark .dco-tab--active:hover {
    background: var(--dco-tab-accent);
    border-color: var(--dco-tab-accent);
    color: var(--dco-tab-accent-contrast);
}

.home-section-bg-dark .dco-type-label {
    color: var(--primary-color);
}

/*==================
 FACILITIES SECTION
====================*/
.default-facilities-section {
    color: var(--home-section-text, var(--text-color));
    padding: var(--section-padding-y, 80px) 0;
}

.default-facilities-heading {
    margin-bottom: 48px;
}

.default-facilities-section h2 {
    color: var(--home-section-heading, var(--heading-color, var(--home-section-text, var(--text-color))));
    font-size: clamp(26px, 3vw, 30px);
    font-weight: 700;
    margin-bottom: 10px;
}

/* 2-column grid of horizontal cards */
.default-facilities-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, 1fr);
}

/* ── Card ── */
.default-facility-card {
    background: var(--home-section-surface, var(--surface-color, var(--bg-color)));
    border: 1px solid var(--home-section-border, var(--border-color));
    border-radius: var(--border-radius, 10px);
    display: flex;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.default-facility-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-5px);
}

/* ── Image panel ── */
.default-facility-img-wrap {
    flex: 0 0 38%;
    overflow: hidden;
    position: relative;
}

.default-facility-img-wrap img {
    display: block;
    height: 100%;
    min-height: 168px;
    object-fit: cover;
    transition: transform 0.4s ease;
    width: 100%;
}

.default-facility-card:hover .default-facility-img-wrap img {
    transform: scale(1.04);
}

/* ── Content panel ── */
.default-facility-body {
    border-left: 3px solid color-mix(in srgb, var(--primary-color), transparent 65%);
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
    padding: 22px 22px;
    transition: border-left-color 0.25s ease;
}

.default-facility-card:hover .default-facility-body {
    border-left-color: var(--primary-color);
}

.default-facility-title {
    color: var(--home-section-heading, var(--heading-color, var(--home-section-text, var(--text-color))));
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 8px;
}

.default-facility-desc {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: var(--home-section-muted, var(--text-muted-color));
    display: -webkit-box;
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 12px;
    overflow: hidden;
}

.default-facility-link {
    align-items: center;
    color: var(--accent-color);
    display: inline-flex;
    font-size: var(--text-sm);
    font-weight: 700;
    gap: 6px;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    transition: gap 0.2s ease, opacity 0.2s ease;
}

.default-facility-link:hover {
    gap: 10px;
    opacity: 0.78;
}

/* ── View all footer ── */
.default-facilities-footer {
    margin-top: 32px;
    text-align: center;
}

.default-facilities-view-all {
    align-items: center;
    border: 2px solid var(--primary-color);
    border-radius: 6px;
    color: var(--primary-color);
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    padding: 10px 24px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, gap 0.2s ease;
}

.default-facilities-view-all:hover,
.default-facilities-view-all:focus {
    background: var(--primary-color);
    color: var(--primary-contrast-color);
    gap: 12px;
    text-decoration: none;
}

/* ── Dark section overrides ── */
.home-section-bg-dark .default-facility-body {
    border-left-color: color-mix(in srgb, var(--accent-color), transparent 55%);
}

.home-section-bg-dark .default-facility-card:hover .default-facility-body {
    border-left-color: var(--accent-color);
}

.home-section-bg-dark .default-facility-card:hover {
    border-color: var(--accent-color);
    box-shadow: 0 10px 30px color-mix(in srgb, var(--accent-color), transparent 76%);
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .default-facilities-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 575px) {
    .default-facility-img-wrap {
        flex: 0 0 120px;
    }

    .default-facility-body {
        padding: 16px 16px;
    }
}

/*==================
 EVENTS SECTION
====================*/

/* ── Section wrapper ── */
.default-events-section {
    color: var(--home-section-text, var(--text-color));
    padding: var(--section-padding-y, 80px) 0;
}

/* ── Heading block (mirrors .default-courses-heading) ── */
.default-events-heading {
    margin-bottom: 48px;
}

.default-events-heading h2 {
    color: var(--home-section-heading, var(--heading-color, var(--home-section-text, var(--text-color))));
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
}

/* ── Grid ── */
.default-events-grid {
    display: grid;
    gap: 28px;
    grid-template-columns: repeat(3, 1fr);
}

/* ── Card shell ── */
.default-event-card {
    background: var(--home-section-surface, var(--surface-color, var(--bg-color)));
    border: 1px solid var(--home-section-border, var(--border-color));
    border-radius: var(--border-radius, 12px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.default-event-card:hover {
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-5px);
}

/* ── Image panel ── */
.default-event-img-wrap {
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
}

.default-event-img {
    aspect-ratio: 16 / 9;
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    width: 100%;
}

.default-event-card:hover .default-event-img {
    transform: scale(1.05);
}

/* ── Category badge (top-left) ── */
.default-event-badge {
    background: var(--primary-color);
    border-radius: 4px;
    color: var(--primary-contrast-color, #fff);
    font-size: 10px;
    font-weight: 700;
    left: 14px;
    letter-spacing: 0.06em;
    padding: 4px 10px;
    position: absolute;
    text-transform: uppercase;
    top: 14px;
}

/* Semantic badge colours — keyed to CSS variables so admins can override per-token */
.default-event-badge--workshop  { background: var(--badge-workshop,  #7c3aed); color: #fff; }
.default-event-badge--seminar   { background: var(--badge-seminar,   #0284c7); color: #fff; }
.default-event-badge--cultural  { background: var(--badge-cultural,  #92400e); color: #fff; }
.default-event-badge--sports    { background: var(--badge-sports,    #047857); color: #fff; }
.default-event-badge--placement { background: var(--badge-placement, #2563eb); color: #fff; }
.default-event-badge--webinar   { background: var(--badge-webinar,   #4f46e5); color: #fff; }
.default-event-badge--festival  { background: var(--badge-festival,  #db2777); color: #fff; }
.default-event-badge--academic  { background: var(--badge-academic,  #1e293b); color: #fff; }

/* ── Venue-mode pill (bottom-right) ── */
.default-event-mode {
    align-items: center;
    border-radius: 20px;
    bottom: 12px;
    display: inline-flex;
    font-size: var(--text-xs);
    font-weight: 700;
    gap: 4px;
    letter-spacing: 0.03em;
    padding: 4px 10px;
    position: absolute;
    right: 12px;
    text-transform: uppercase;
}

.default-event-mode--online  {
    background: color-mix(in srgb, var(--status-success, #059669) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--status-success, #059669) 30%, transparent);
    color: var(--status-success, #059669);
}

.default-event-mode--offline {
    background: color-mix(in srgb, var(--status-info, #2563eb) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--status-info, #2563eb) 30%, transparent);
    color: var(--status-info, #2563eb);
}

.default-event-mode--hybrid  {
    background: color-mix(in srgb, var(--badge-workshop, #7c3aed) 15%, transparent);
    border: 1px solid color-mix(in srgb, var(--badge-workshop, #7c3aed) 30%, transparent);
    color: var(--badge-workshop, #7c3aed);
}

/* ── Card body ── */
.default-event-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px 22px 22px;
}

/* ── Meta row (date + location) ── */
.default-event-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 16px;
    margin-bottom: 10px;
}

.default-event-meta-item {
    align-items: center;
    color: var(--home-section-muted, var(--text-muted-color));
    display: inline-flex;
    font-size: var(--text-sm);
    gap: 5px;
}

.default-event-meta-item i {
    color: var(--primary-color);
    font-size: var(--text-xs);
}

/* ── Title ── */
.default-event-title {
    font-size: var(--text-md);
    font-weight: 700;
    line-height: 1.4;
    margin: 0 0 10px;
}

.default-event-title a {
    color: var(--home-section-heading, var(--heading-color, var(--home-section-text, var(--text-color))));
    text-decoration: none;
    transition: color 0.2s;
}

.default-event-title a:hover {
    color: var(--primary-color);
}

/* ── Description ── */
.default-event-desc {
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
    color: var(--home-section-muted, var(--text-muted-color));
    display: -webkit-box;
    flex: 1;
    font-size: 14px;
    line-height: 1.65;
    margin: 0 0 18px;
    overflow: hidden;
}

/* ── Footer / CTA ── */
.default-event-footer {
    margin-top: auto;
}

.default-event-cta {
    align-items: center;
    color: var(--primary-color);
    display: inline-flex;
    font-size: var(--text-sm);
    font-weight: 700;
    gap: 6px;
    letter-spacing: 0.04em;
    text-decoration: none;
    text-transform: uppercase;
    transition: gap 0.2s ease, opacity 0.2s ease;
}

.default-event-cta:hover {
    color: var(--primary-hover-color, var(--primary-color));
    gap: 10px;
    opacity: 0.78;
}

/* ── Empty state ── */
.default-events-empty {
    color: var(--home-section-muted, var(--text-muted-color));
    font-size: var(--text-base);
    grid-column: 1 / -1;
    text-align: center;
}

/* ── View All footer ── */
.default-events-view-all-wrap {
    margin-top: 40px;
    text-align: center;
}

.default-events-view-all {
    align-items: center;
    border: 2px solid var(--primary-color);
    border-radius: 6px;
    color: var(--primary-color);
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    padding: 10px 28px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, gap 0.2s ease;
}

.default-events-view-all:hover,
.default-events-view-all:focus {
    background: var(--primary-color);
    color: var(--primary-contrast-color);
    gap: 12px;
    text-decoration: none;
}

/* ── Dark section overrides ── */
.home-section-bg-dark .default-event-title a:hover {
    color: var(--accent-color);
}

.home-section-bg-dark .default-event-meta-item i {
    color: var(--accent-color);
}

.home-section-bg-dark .default-event-cta:hover {
    opacity: 1;
}

.home-section-bg-dark .default-event-mode--online  { background: color-mix(in srgb, var(--status-success,  #059669) 25%, transparent); }
.home-section-bg-dark .default-event-mode--offline { background: color-mix(in srgb, var(--status-info,    #2563eb) 25%, transparent); }
.home-section-bg-dark .default-event-mode--hybrid  { background: color-mix(in srgb, var(--badge-workshop, #7c3aed) 25%, transparent); }

/* ── Responsive ── */
@media (max-width: 991px) {
    .default-events-grid {
        gap: 22px;
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 575px) {
    .default-events-grid {
        gap: 18px;
        grid-template-columns: 1fr;
    }

    .default-events-heading {
        margin-bottom: 32px;
    }

    .default-event-body {
        padding: 16px 18px 18px;
    }
}

/*==========================
 PLACEMENT DRIVES SECTION
============================*/
.default-placement-drives-section {
    color: var(--home-section-text, var(--text-color));
    padding: var(--section-padding-y-sm, 64px) 0 var(--section-padding-y, 80px);
}

.default-placement-drives-heading {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 36px;
}

.default-placement-drives-heading > div {
    text-align: center;
    width: 100%;
}

.default-placement-drives-heading h2 {
    color: var(--home-section-heading, var(--heading-color, var(--home-section-text, var(--text-color))));
    font-family: var(--header-font-family);
    font-size: clamp(25px, 3vw, 31px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 9px;
}

.default-placement-drives-heading p {
    color: var(--home-section-muted, var(--text-muted-color));
    font-size: var(--text-base);
    line-height: 1.65;
    margin: 0 auto;
    max-width: 720px;
    text-align: center;
}

.default-placement-drives-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.default-placement-drive-card {
    background: var(--home-section-surface, var(--surface-color, var(--bg-color)));
    border: 1px solid var(--home-section-border, var(--border-color));
    border-radius: var(--border-radius, 12px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 22px;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.default-placement-drive-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-2px);
}

.default-placement-drive-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}

.default-placement-drive-mode,
.default-placement-drive-status {
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    padding: 6px 12px;
}

.default-placement-drive-mode {
    background: color-mix(in srgb, var(--accent-color) 12%, var(--home-section-surface, var(--surface-color)));
    color: var(--accent-color);
}

.default-placement-drive-main {
    align-items: flex-start;
    display: flex;
    gap: 15px;
}

.default-placement-drive-date {
    background: color-mix(in srgb, var(--secondary-color) 10%, var(--home-section-surface, var(--surface-color)));
    border-radius: 10px;
    color: var(--secondary-color);
    display: flex;
    flex: 0 0 64px;
    flex-direction: column;
    padding: 10px 6px;
    text-align: center;
}

.default-placement-drive-date strong {
    font-size: 23px;
    font-weight: 700;
    line-height: 1.1;
}

.default-placement-drive-date span {
    font-size: var(--text-xs);
    font-weight: 700;
    margin-top: 4px;
    text-transform: uppercase;
}

.default-placement-drive-content {
    min-width: 0;
}

.default-placement-drive-title {
    font-size: 19px;
    font-weight: 700;
    line-height: 1.38;
    margin: 0 0 12px;
}

.default-placement-drive-title a {
    color: var(--home-section-heading, var(--heading-color, var(--home-section-text, var(--text-color))));
    text-decoration: none;
    transition: color 0.2s ease;
}

.default-placement-drive-title a:hover {
    color: var(--primary-color);
}

.default-placement-drive-meta {
    align-items: flex-start;
    color: var(--home-section-muted, var(--text-muted-color));
    display: flex;
    font-size: var(--text-sm);
    gap: 9px;
    line-height: 1.5;
    margin: 0 0 7px;
}

.default-placement-drive-meta i {
    color: var(--primary-color);
    margin-top: 4px;
    width: 13px;
}

.default-placement-drive-description {
    color: var(--home-section-muted, var(--text-muted-color));
    font-size: 14px;
    line-height: 1.6;
    margin: 16px 0 0;
}

.default-placement-drive-footer {
    margin-top: auto;
    padding-top: 18px;
    border-top: 1px solid var(--home-section-border, var(--border-color));
}

.default-placement-drive-cta {
    align-items: center;
    color: var(--primary-color);
    display: inline-flex;
    font-size: var(--text-xs);
    font-weight: 700;
    gap: 5px;
    letter-spacing: 0.04em;
    margin-top: auto;
    text-decoration: none;
    text-transform: uppercase;
    transition: gap 0.2s ease;
}

.default-placement-drive-card:hover .default-placement-drive-cta {
    gap: 8px;
}

.default-placement-drives-empty {
    background: var(--home-section-surface, var(--surface-color, var(--bg-color)));
    border: 1px dashed var(--home-section-border, var(--border-color));
    border-radius: var(--border-radius, 12px);
    color: var(--home-section-muted, var(--text-muted-color));
    grid-column: 1 / -1;
    margin: 0;
    padding: 30px;
    text-align: center;
}

.default-placement-drives-view-all {
    align-items: center;
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, gap 0.25s ease;
    white-space: nowrap;
}

.default-placement-drives-view-all:hover,
.default-placement-drives-view-all:focus {
    gap: 12px;
    text-decoration: none;
}

.default-placement-drives-view-all i {
    transition: transform 0.25s ease;
}

.default-placement-drives-view-all:hover i,
.default-placement-drives-view-all:focus i {
    transform: translateX(3px);
}

/* Dark bg adaptation: primary outline, accent hover (same as dhm-view-all) */
.home-section-bg-dark .default-placement-drives-view-all {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.home-section-bg-dark .default-placement-drives-view-all:hover,
.home-section-bg-dark .default-placement-drives-view-all:focus {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--accent-contrast-color, #000);
}

.home-section-bg-dark .default-placement-drive-title a:hover,
.home-section-bg-dark .default-placement-drive-meta i {
    color: var(--accent-color);
}

@media (max-width: 991px) {
    .default-placement-drives-heading {
        align-items: center;
        flex-direction: column;
        text-align: center;
    }

    .default-placement-drives-heading > div {
        text-align: center;
    }

    .default-placement-drives-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .default-home-section-shell .default-placement-drives-view-all {
        align-self: center;
    }
}

@media (max-width: 575px) {
    .default-placement-drives-heading {
        margin-bottom: 30px;
    }

    .default-placement-drives-grid {
        gap: 18px;
        grid-template-columns: 1fr;
    }

    .default-placement-drive-card {
        padding: 20px;
    }
}

/*================================
 PLACEMENT DRIVES PAGES (pd-*)
 Color use:
   --primary-color    → CTA buttons, icons, top accent bar, links, card hover border
   --secondary-color  → Date box tint & color, capacity fill bar
   --accent-color     → Mode badge tint & color, registration-deadline highlight
   --heading-color    → Drive title, section title, sidebar section heading
   --text-color       → Body text, sidebar values
   --text-muted-color → Meta text, lead text, capacity label
   --border-color     → Card border, filter border, sidebar dividers, capacity track
   --surface-color    → Card background, filter bar background, sidebar card background
   --bg-color         → Input background, hero tint base
=================================*/

/* ---- Page header ---- */
.pd-page-section {
    color: var(--text-color);
    padding: 60px 0 80px;
}

.pd-page-header {
    margin-bottom: 32px;
}

.pd-page-title {
    color: var(--heading-color, var(--text-color));
    font-family: var(--header-font-family);
    font-size: clamp(24px, 3vw, 30px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}

.pd-page-lead {
    color: var(--text-muted-color);          /* muted: supporting copy */
    font-size: var(--text-base);
    margin: 0;
}

/* ---- Filter bar ---- */
.pd-filter-bar {
    align-items: center;
    background: var(--surface-color, var(--bg-color)); /* surface: bar background */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, 12px);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 36px;
    padding: 16px 20px;
}

.pd-filter-fields {
    display: flex;
    flex: 1;
    flex-wrap: wrap;
    gap: 12px;
}

.pd-filter-search {
    flex: 1 1 260px;
    position: relative;
}

.pd-filter-select-wrap {
    flex: 0 1 180px;
    position: relative;
}

.pd-filter-icon {
    color: var(--text-muted-color);
    left: 14px;
    pointer-events: none;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
}

.pd-filter-input,
.pd-filter-select {
    background: var(--bg-color);             /* bg: input background */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-color);
    font-size: 14px;
    height: 42px;
    padding: 0 14px 0 38px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

.pd-filter-input:focus,
.pd-filter-select:focus {
    border-color: var(--primary-color);      /* primary: focus ring */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 18%, transparent);
    outline: none;
}

.pd-filter-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.pd-filter-actions {
    display: flex;
    gap: 8px;
}

.pd-filter-btn {
    align-items: center;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 7px;
    height: 42px;
    padding: 0 20px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
    white-space: nowrap;
}

.pd-filter-btn-submit {
    background: var(--primary-color);        /* primary: submit action */
    color: var(--primary-contrast-color, #fff);
}

.pd-filter-btn-submit:hover {
    background: var(--primary-hover-color, var(--primary-color));
    color: var(--primary-contrast-color, #fff);
    text-decoration: none;
}

.pd-filter-btn-reset {
    background: transparent;
    border: 1px solid var(--border-color);
    color: var(--text-muted-color);
}

.pd-filter-btn-reset:hover {
    border-color: var(--text-color);
    color: var(--text-color);
    text-decoration: none;
}

/* ---- Card grid ---- */
.pd-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.pd-grid-sm {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* ---- Card ---- */
.pd-card {
    background: var(--surface-color, var(--bg-color)); /* surface: card background */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, 12px);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    transition: border-color 0.22s ease, box-shadow 0.22s ease, transform 0.22s ease;
}

.pd-card:hover {
    border-color: var(--primary-color);
    box-shadow: var(--shadow-card-hover);
    transform: translateY(-3px);
}

.pd-card-top-bar {
    background: var(--primary-color);        /* primary: top accent stripe */
    height: 3px;
    width: 100%;
}

.pd-card-inner {
    display: flex;
    flex: 1;
    flex-direction: column;
    padding: 20px 22px 22px;
}

/* Badges */
.pd-card-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 16px;
}

.pd-badge {
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    padding: 5px 11px;
}

.pd-badge-mode {
    background: color-mix(in srgb, var(--accent-color) 12%, var(--surface-color, var(--bg-color)));
    color: var(--accent-color);              /* accent: mode type (Online/Offline/Hybrid) */
}

.placement-drive-status {
    align-items: center;
    display: inline-flex;
    gap: 6px;
}

.placement-drive-status--open {
    background: color-mix(in srgb, var(--placement-status-open) 12%, var(--surface-color, var(--bg-color)));
    color: var(--placement-status-open);
}

.placement-drive-status--closed {
    background: color-mix(in srgb, var(--placement-status-closed) 12%, var(--surface-color, var(--bg-color)));
    color: var(--placement-status-closed);
}

.placement-drive-status--upcoming {
    background: color-mix(in srgb, var(--placement-status-upcoming) 12%, var(--surface-color, var(--bg-color)));
    color: var(--placement-status-upcoming);
}

.placement-drive-status-dot {
    animation: pd-pulse 1.5s ease-in-out infinite;
    background: currentColor;
    border-radius: 50%;
    display: inline-block;
    height: 7px;
    width: 7px;
}

@keyframes pd-pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.55; transform: scale(0.7); }
}

/* Date box */
.pd-card-main {
    align-items: flex-start;
    display: flex;
    gap: 14px;
}

.pd-card-date {
    background: color-mix(in srgb, var(--secondary-color) 12%, var(--surface-color, var(--bg-color)));
    border-radius: 9px;
    color: var(--secondary-color);           /* secondary: date calendar box */
    display: flex;
    flex: 0 0 58px;
    flex-direction: column;
    padding: 9px 6px;
    text-align: center;
}

.pd-card-date strong {
    font-size: 22px;
    font-weight: 700;
    line-height: 1.1;
}

.pd-card-date span {
    font-size: var(--text-xs);
    font-weight: 700;
    line-height: 1.4;
    text-transform: uppercase;
}

.pd-card-year {
    color: color-mix(in srgb, var(--secondary-color) 55%, transparent);
    font-size: 10px !important;
}

/* Content */
.pd-card-content {
    min-width: 0;
}

.pd-card-title {
    font-size: var(--text-md);
    font-weight: 700;
    line-height: 1.38;
    margin: 0 0 10px;
}

.pd-card-title a {
    color: var(--heading-color, var(--text-color));
    text-decoration: none;
    transition: color 0.2s ease;
}

.pd-card-title a:hover {
    color: var(--primary-color);             /* primary: title hover */
}

.pd-card-meta {
    align-items: flex-start;
    color: var(--text-muted-color);          /* muted: meta labels */
    display: flex;
    font-size: var(--text-sm);
    gap: 8px;
    line-height: 1.5;
    margin: 0 0 7px;
}

.pd-card-meta i {
    color: var(--primary-color);             /* primary: meta icons */
    flex-shrink: 0;
    margin-top: 3px;
    width: 13px;
}

.pd-card-deadline {
    color: color-mix(in srgb, var(--accent-color) 80%, var(--text-color));
}

.pd-card-deadline i {
    color: var(--accent-color);              /* accent: deadline urgency */
}

/* Capacity bar */
.pd-card-capacity {
    margin-top: 15px;
}

.pd-capacity-track {
    background: var(--border-color);         /* border: capacity bar track */
    border-radius: 999px;
    height: 5px;
    margin-top: 6px;
    overflow: hidden;
}

.pd-capacity-fill {
    background: var(--secondary-color);      /* secondary: capacity fill */
    border-radius: 999px;
    height: 100%;
    transition: width 0.3s ease;
}

.pd-capacity-label {
    color: var(--text-muted-color);
    display: block;
    font-size: 12px;
    margin-top: 5px;
}

/* Footer CTA */
.pd-card-footer {
    margin-top: auto;
    padding-top: 16px;
}

.pd-card-cta {
    align-items: center;
    border-top: 1px solid var(--border-color);
    color: var(--primary-color);             /* primary: card CTA link */
    display: flex;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    padding-top: 16px;
    text-decoration: none;
    transition: gap 0.2s ease;
}

.pd-card-cta:hover,
.pd-card-cta:focus {
    color: var(--primary-color);
    gap: 12px;
    text-decoration: none;
}

/* Empty state */
.pd-empty {
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius, 12px);
    color: var(--text-muted-color);
    padding: 56px 20px;
    text-align: center;
}

.pd-empty-icon {
    color: var(--border-color);
    display: block;
    font-size: 36px;
    margin-bottom: 14px;
}

/* Pagination */
.pd-pagination {
    margin-top: 40px;
}

/* ---- Detail page ---- */
.pd-detail-section {
    color: var(--text-color);
    padding: 60px 0 80px;
}

.pd-detail-hero {
    background: color-mix(in srgb, var(--secondary-color) 8%, var(--bg-color));
    border: 1px solid color-mix(in srgb, var(--secondary-color) 20%, var(--border-color));
    border-radius: var(--border-radius, 12px);
    margin-bottom: 36px;
    padding: 32px 36px;
}

.pd-detail-badges {
    display: flex;
    gap: 8px;
    margin-bottom: 14px;
}

.pd-detail-title {
    color: var(--heading-color, var(--text-color));
    font-family: var(--header-font-family);
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 18px;
}

.pd-detail-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
}

.pd-detail-stat {
    align-items: center;
    color: var(--text-muted-color);
    display: flex;
    font-size: 14px;
    gap: 9px;
}

.pd-detail-stat i {
    color: var(--primary-color);             /* primary: hero stat icons */
    width: 14px;
}

/* Two-column layout */
.pd-detail-layout {
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr 320px;
}

/* Body */
.pd-detail-body > * + * {
    margin-top: 36px;
}

.pd-detail-description h3,
.pd-detail-instructions h3,
.pd-detail-related h3 {
    color: var(--heading-color, var(--text-color));
    font-size: 20px;
    font-weight: 700;
    margin: 0 0 16px;
}

.pd-detail-description-content {
    color: var(--text-color);
    font-size: var(--text-base);
    line-height: 1.7;
}

.pd-detail-instructions {
    background: color-mix(in srgb, var(--accent-color) 8%, var(--bg-color));
    border: 1px solid color-mix(in srgb, var(--accent-color) 22%, var(--border-color));
    border-radius: var(--border-radius, 12px);
    padding: 24px 28px;
}

.pd-detail-instructions h3 {
    align-items: center;
    display: flex;
    gap: 10px;
}

.pd-detail-instructions h3 i {
    color: var(--accent-color);              /* accent: instructions info icon */
}

.pd-detail-instructions > div {
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.7;
}

/* Sidebar */
.pd-detail-sidebar {
    align-self: start;
    position: sticky;
    top: 24px;
}

.pd-sidebar-card {
    background: var(--surface-color, var(--bg-color));
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, 12px);
    overflow: hidden;
}

.pd-sidebar-title {
    background: color-mix(in srgb, var(--primary-color) 6%, var(--surface-color, var(--bg-color)));
    border-bottom: 1px solid var(--border-color);
    color: var(--heading-color, var(--text-color));
    font-size: 16px;
    font-weight: 700;
    margin: 0;
    padding: 18px 22px;
}

.pd-sidebar-dl {
    margin: 0;
    padding: 18px 22px;
}

.pd-sidebar-row {
    align-items: flex-start;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 13px;
    padding: 13px 0;
}

.pd-sidebar-row:first-child { padding-top: 0; }
.pd-sidebar-row:last-child { border-bottom: none; padding-bottom: 0; }

.pd-sidebar-row > i {
    color: var(--primary-color);             /* primary: sidebar row icons */
    flex-shrink: 0;
    font-size: var(--text-base);
    margin-top: 2px;
    width: 16px;
}

.pd-sidebar-row dt {
    color: var(--text-muted-color);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
}

.pd-sidebar-row dd {
    color: var(--text-color);
    font-size: 14px;
    margin: 2px 0 0;
}

.pd-sidebar-action {
    border-top: 1px solid var(--border-color);
    padding: 18px 22px;
}

.pd-register-btn {
    display: flex;
    justify-content: center;
    width: 100%;
    gap: 9px;
    padding: 13px 22px;
    align-items: center;
}

.pd-register-btn:hover,
.pd-register-btn:focus {
    gap: 12px;
    text-decoration: none;
}

.pd-reg-status {
    align-items: center;
    border-radius: 8px;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    gap: 9px;
    justify-content: center;
    padding: 12px 18px;
}

.pd-reg-closed,
.pd-reg-full {
    background: color-mix(in srgb, var(--status-danger) 10%, var(--surface-color, var(--bg-color)));
    color: var(--status-danger);
}

.pd-reg-open {
    background: color-mix(in srgb, var(--status-success) 10%, var(--surface-color, var(--bg-color)));
    color: var(--status-success);
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .pd-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .pd-grid-sm {
        grid-template-columns: 1fr;
    }

    .pd-detail-layout {
        grid-template-columns: 1fr;
    }

    .pd-detail-sidebar {
        position: static;
    }
}

@media (max-width: 575px) {
    .pd-grid {
        gap: 16px;
        grid-template-columns: 1fr;
    }

    .pd-filter-bar {
        align-items: stretch;
        flex-direction: column;
    }

    .pd-filter-fields {
        flex-direction: column;
    }

    .pd-filter-search,
    .pd-filter-select-wrap {
        flex: auto;
    }

    .pd-filter-actions {
        width: 100%;
    }

    .pd-filter-btn-submit {
        flex: 1;
        justify-content: center;
    }

    .pd-detail-hero {
        padding: 24px 20px;
    }

    .pd-detail-stats {
        flex-direction: column;
        gap: 10px;
    }
}

/*================================
 PLACEMENT DRIVE REGISTRATION
 Color use:
   --primary-color    → Submit button, focus ring, upload icon, card icon, required mark
   --secondary-color  → Education row background tint, row index label color
   --accent-color     → (reserved for deadline highlight via pd-sidebar-row-deadline)
   --heading-color    → Card section headings
   --text-color       → Labels, input text, sidebar values
   --text-muted-color → Placeholder, sub-label, hint text, cancel link
   --border-color     → Input borders, card borders, edu-row borders, upload dashed border
   --surface-color    → Card background
   --bg-color         → Input background, page section background, upload tint base
=================================*/
.pd-form-section {
    color: var(--text-color);
    padding: 60px 0 80px;
}

/* Two-column layout */
.pd-form-layout {
    display: grid;
    gap: 32px;
    grid-template-columns: 1fr 300px;
}

.pd-form-main {
    min-width: 0;
}

/* Blocked state */
.pd-form-blocked {
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius, 12px);
    color: var(--text-muted-color);
    margin: 0 auto;
    max-width: 520px;
    padding: 56px 32px;
    text-align: center;
}

.pd-form-blocked-icon {
    color: var(--status-danger);
    font-size: 40px;
    margin-bottom: 16px;
}

.pd-form-blocked h3 {
    color: var(--heading-color, var(--text-color));
    font-family: var(--header-font-family);
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 10px;
}

.pd-form-blocked p {
    font-size: var(--text-base);
    margin: 0 0 24px;
}

/* External registration state */
.pd-form-external {
    border: 1px solid color-mix(in srgb, var(--primary-color) 30%, var(--border-color));
    border-radius: var(--border-radius, 12px);
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0 auto;
    max-width: 520px;
    padding: 56px 32px;
    text-align: center;
}

.pd-form-external-icon {
    align-items: center;
    background: color-mix(in srgb, var(--primary-color) 10%, var(--bg-color));
    border-radius: 50%;
    color: var(--primary-color);             /* primary: external link icon */
    display: flex;
    font-size: 26px;
    height: 64px;
    justify-content: center;
    margin-bottom: 20px;
    width: 64px;
}

.pd-form-external h3 {
    color: var(--heading-color, var(--text-color));
    font-family: var(--header-font-family);
    font-size: 22px;
    font-weight: 700;
    margin: 0 0 10px;
}

.pd-form-external p {
    color: var(--text-muted-color);
    font-size: var(--text-base);
    margin: 0 0 28px;
}

.pd-form-external-btn {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 13px 28px;
}

.pd-form-external-btn:hover,
.pd-form-external-btn:focus {
    gap: 12px;
    text-decoration: none;
}

.pd-form-back-link {
    align-items: center;
    color: var(--primary-color);            /* primary: navigation link */
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    text-decoration: none;
    transition: gap 0.2s ease;
}
.pd-form-back-link--spaced { margin-top: 16px; }

.pd-form-back-link:hover {
    color: var(--primary-color);
    gap: 4px;
    text-decoration: none;
}

/* Error banner */
.pd-form-error-banner {
    align-items: center;
    background: color-mix(in srgb, var(--status-danger) 10%, var(--bg-color));
    border: 1px solid color-mix(in srgb, var(--status-danger) 30%, var(--border-color));
    border-radius: var(--border-radius, 12px);
    color: var(--status-danger);
    display: flex;
    font-size: 14px;
    font-weight: 600;
    gap: 10px;
    margin-bottom: 24px;
    padding: 14px 18px;
}

/* Form card */
.pd-form-card {
    background: var(--surface-color, var(--bg-color)); /* surface: card background */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, 12px);
    margin-bottom: 24px;
    overflow: hidden;
}

.pd-form-card-header {
    align-items: flex-start;
    border-bottom: 1px solid var(--border-color);
    display: flex;
    gap: 14px;
    padding: 20px 24px;
}

.pd-form-card-icon {
    align-items: center;
    background: color-mix(in srgb, var(--primary-color) 10%, var(--surface-color, var(--bg-color)));
    border-radius: 9px;
    color: var(--primary-color);            /* primary: card section icon */
    display: flex;
    flex-shrink: 0;
    font-size: 16px;
    height: 40px;
    justify-content: center;
    width: 40px;
}

.pd-form-card-header > div h3 {
    color: var(--heading-color, var(--text-color));
    font-family: var(--header-font-family);
    font-size: var(--text-md);
    font-weight: 700;
    margin: 0 0 3px;
}

.pd-form-card-header > div p {
    color: var(--text-muted-color);          /* muted: card sub-description */
    font-size: var(--text-sm);
    margin: 0;
}

.pd-form-card-body {
    padding: 24px;
}

/* Form grid */
.pd-form-grid {
    display: grid;
    gap: 20px 18px;
    margin-bottom: 20px;
}

.pd-form-grid-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.pd-form-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

/* Form group */
.pd-form-group {
    display: flex;
    flex-direction: column;
    gap: 7px;
}

.pd-form-label {
    color: var(--text-color);               /* text: label */
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.01em;
}

.pd-form-required {
    color: var(--status-danger);
    margin-left: 2px;
}

/* Inputs */
.pd-form-input,
.pd-form-select,
.pd-form-textarea {
    background: var(--bg-color);             /* bg: input fill */
    border: 1px solid var(--border-color);
    border-radius: 8px;
    color: var(--text-color);
    font-family: var(--body-font-family);
    font-size: 14px;
    padding: 10px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
    width: 100%;
}

.pd-form-input::placeholder,
.pd-form-textarea::placeholder {
    color: var(--text-soft-color, var(--text-muted-color));
}

.pd-form-input:focus,
.pd-form-select:focus,
.pd-form-textarea:focus {
    border-color: var(--primary-color);      /* primary: active/focus border */
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color) 16%, transparent);
    outline: none;
}

.pd-form-select {
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 12px center;
    cursor: pointer;
    padding-right: 34px;
}

.pd-form-textarea {
    resize: vertical;
}

.pd-form-input--invalid,
.pd-form-select--invalid,
.pd-form-textarea--invalid {
    border-color: var(--status-danger) !important;
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--status-danger) 16%, transparent) !important;
}

.pd-form-field-error {
    color: var(--status-danger);
    font-size: 12.5px;
    margin-top: 4px;
}

/* File upload */
.pd-form-upload {
    align-items: center;
    background: color-mix(in srgb, var(--primary-color) 4%, var(--bg-color));
    border: 1.5px dashed color-mix(in srgb, var(--primary-color) 35%, var(--border-color));
    border-radius: 8px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 18px 14px;
    text-align: center;
    transition: background 0.2s ease, border-color 0.2s ease;
}

.pd-form-upload:hover {
    background: color-mix(in srgb, var(--primary-color) 8%, var(--bg-color));
    border-color: var(--primary-color);      /* primary: upload hover border */
}

.pd-form-upload-icon {
    color: var(--primary-color);             /* primary: upload cloud icon */
    font-size: 22px;
    margin-bottom: 4px;
}

.pd-form-upload-text {
    color: var(--text-color);
    font-size: var(--text-sm);
    font-weight: 600;
}

.pd-form-upload-hint {
    color: var(--text-muted-color);          /* muted: upload format hint */
    font-size: 12px;
}

.pd-form-upload-input {
    display: none;
}

.pd-form-upload-filename {
    color: var(--primary-color);
    font-size: 12px;
    font-style: italic;
    min-height: 18px;
    padding-top: 2px;
}

/* Education rows */
.pd-edu-row {
    background: color-mix(in srgb, var(--secondary-color) 5%, var(--surface-color, var(--bg-color)));
    border: 1px solid var(--border-color);
    border-radius: 10px;
    margin-bottom: 16px;
    padding: 18px 20px;
}

.pd-edu-row-header {
    align-items: center;
    display: flex;
    justify-content: space-between;
    margin-bottom: 16px;
}

.pd-edu-row-index {
    color: var(--secondary-color);           /* secondary: education row label */
    font-size: var(--text-sm);
    font-weight: 700;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.pd-edu-remove {
    align-items: center;
    background: transparent;
    border: none;
    color: var(--text-muted-color);
    cursor: pointer;
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    gap: 5px;
    padding: 0;
    transition: color 0.2s ease;
}

.pd-edu-remove:hover {
    color: var(--status-danger);
}

.pd-edu-row .pd-form-grid {
    margin-bottom: 0;
}

.pd-edu-row .pd-form-grid + .pd-form-grid {
    margin-top: 16px;
}

/* Add education button */
.pd-add-edu-btn {
    align-items: center;
    background: transparent;
    border: 1.5px dashed var(--border-color);
    border-radius: 8px;
    color: var(--text-muted-color);
    cursor: pointer;
    display: flex;
    font-size: 14px;
    font-weight: 600;
    gap: 8px;
    justify-content: center;
    padding: 12px 20px;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    width: 100%;
}

.pd-add-edu-btn:hover {
    background: color-mix(in srgb, var(--primary-color) 6%, var(--surface-color, var(--bg-color)));
    border-color: var(--primary-color);      /* primary: add button hover */
    color: var(--primary-color);
}

/* Form actions */
.pd-form-actions {
    align-items: center;
    display: flex;
    gap: 16px;
    justify-content: flex-end;
}

.pd-form-cancel {
    align-items: center;
    color: var(--text-muted-color);          /* muted: cancel / back link */
    display: inline-flex;
    font-size: 14px;
    font-weight: 600;
    gap: 7px;
    text-decoration: none;
    transition: color 0.2s ease, gap 0.2s ease;
}

.pd-form-cancel:hover {
    color: var(--text-color);
    gap: 4px;
    text-decoration: none;
}

.pd-form-submit-btn {
    align-items: center;
    background: var(--primary-color);        /* primary: submit action */
    border: none;
    border-radius: 8px;
    color: var(--primary-contrast-color, #fff);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--text-base);
    font-weight: 700;
    gap: 9px;
    padding: 13px 28px;
    transition: background 0.2s ease, gap 0.2s ease;
}

.pd-form-submit-btn:hover {
    background: var(--primary-hover-color, var(--primary-color));
    gap: 12px;
}

/* Sidebar (re-uses pd-sidebar-* from pd-* block above) */
.pd-form-sidebar {
    align-self: start;
    position: sticky;
    top: 24px;
}

/* Deadline row accent */
.pd-sidebar-row-deadline > i {
    color: var(--accent-color);              /* accent: deadline icon urgency */
}

.pd-sidebar-row-deadline dd {
    color: color-mix(in srgb, var(--accent-color) 80%, var(--text-color));
}

/* Responsive */
@media (max-width: 991px) {
    .pd-form-layout {
        grid-template-columns: 1fr;
    }

    .pd-form-sidebar {
        order: -1;
        position: static;
    }
}

@media (max-width: 575px) {
    .pd-form-grid-2,
    .pd-form-grid-3 {
        grid-template-columns: 1fr;
    }

    .pd-form-card-body {
        padding: 18px;
    }

    .pd-form-actions {
        align-items: stretch;
        flex-direction: column;
    }

    .pd-form-submit-btn {
        justify-content: center;
    }
}

/*================================
 PLACEMENT STATISTICS PAGE (pd-stats-*)
 Color use:
   --primary-color    → Filter submit button, placement % bar fill, % label, highest package value
   --secondary-color  → Table header background tint, average package value, summary icon bg
   --accent-color     → Academic year badge, placement rate summary icon
   --heading-color    → Table header text, page title
   --text-color       → Table body text, label text, summary values
   --text-muted-color → Filter placeholders, "of" divider, dash placeholder, page lead
   --border-color     → Table borders, column dividers, % bar track
   --surface-color    → Table row bg, table header tint base, filter bar bg
   --bg-color         → Page section background, summary card background
=================================*/
.pd-stats-section {
    color: var(--text-color);
    padding: 60px 0 80px;
}

/* Summary strip */
.pd-stats-summary {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    margin-bottom: 28px;
}

.pd-stats-summary-card {
    align-items: center;
    background: var(--surface-color, var(--bg-color));  /* surface: card bg */
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, 12px);
    display: flex;
    gap: 14px;
    padding: 18px 20px;
}

.pd-stats-summary-icon {
    align-items: center;
    background: color-mix(in srgb, var(--secondary-color) 12%, var(--bg-color));
    border-radius: 9px;
    color: var(--secondary-color);           /* secondary: default summary icon */
    display: flex;
    flex-shrink: 0;
    font-size: var(--text-md);
    height: 44px;
    justify-content: center;
    width: 44px;
}

.pd-stats-summary-icon--primary {
    background: color-mix(in srgb, var(--primary-color) 12%, var(--bg-color));
    color: var(--primary-color);             /* primary: highest package icon */
}

.pd-stats-summary-icon--secondary {
    background: color-mix(in srgb, var(--secondary-color) 12%, var(--bg-color));
    color: var(--secondary-color);           /* secondary: avg package icon */
}

.pd-stats-summary-icon--accent {
    background: color-mix(in srgb, var(--accent-color) 12%, var(--bg-color));
    color: var(--accent-color);              /* accent: placement rate icon */
}

.pd-stats-summary-value {
    color: var(--heading-color, var(--text-color));
    display: block;
    font-size: 20px;
    font-weight: 700;
    line-height: 1.2;
}

.pd-stats-summary-value small {
    font-size: 12px;
    font-weight: 600;
    opacity: 0.75;
}

.pd-stats-summary-label {
    color: var(--text-muted-color);          /* muted: summary card label */
    display: block;
    font-size: 12px;
    margin-top: 2px;
}

/* Table wrapper */
.pd-stats-table-wrap {
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, 12px);
    margin-bottom: 32px;
    overflow: hidden;
}

.pd-stats-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Table */
.pd-stats-table {
    border-collapse: collapse;
    min-width: 640px;
    width: 100%;
}

.pd-stats-table thead th {
    background: color-mix(in srgb, var(--secondary-color) 10%, var(--surface-color, var(--bg-color)));
    border-bottom: 2px solid color-mix(in srgb, var(--secondary-color) 25%, var(--border-color));
    color: var(--heading-color, var(--text-color));      /* heading: column labels */
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .06em;
    padding: 14px 18px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.pd-stats-table tbody tr {
    border-bottom: 1px solid var(--border-color);
    transition: background 0.15s ease;
}

.pd-stats-table tbody tr:last-child {
    border-bottom: none;
}

.pd-stats-table tbody tr:hover {
    background: color-mix(in srgb, var(--primary-color) 4%, var(--surface-color, var(--bg-color)));
}

.pd-stats-table tbody td {
    color: var(--text-color);
    font-size: 14px;
    padding: 14px 18px;
    vertical-align: middle;
}

/* Academic year badge */
.pd-stats-year {
    background: color-mix(in srgb, var(--accent-color) 12%, var(--surface-color, var(--bg-color)));
    border-radius: 999px;
    color: var(--accent-color);              /* accent: academic year tag */
    font-size: 12px;
    font-weight: 700;
    padding: 4px 12px;
    white-space: nowrap;
}

/* Status badge */
.pd-stats-status {
    background: color-mix(in srgb, var(--secondary-color) 10%, var(--surface-color, var(--bg-color)));
    border-radius: 999px;
    color: var(--secondary-color);           /* secondary: status label */
    font-size: 12px;
    font-weight: 600;
    padding: 4px 10px;
    white-space: nowrap;
}

/* Dash placeholder */
.pd-stats-dash {
    color: var(--text-muted-color);
}

/* Placement column */
.pd-stats-placement {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 110px;
}

.pd-stats-placement-count {
    font-size: 14px;
    font-weight: 600;
}

.pd-stats-of {
    color: var(--text-muted-color);          /* muted: "of" separator */
    font-size: 12px;
    margin: 0 3px;
}

.pd-stats-pct-bar {
    background: var(--border-color);         /* border: progress track */
    border-radius: 999px;
    height: 4px;
    overflow: hidden;
    width: 100%;
}

.pd-stats-pct-fill {
    background: var(--primary-color);        /* primary: placement % fill */
    border-radius: 999px;
    height: 100%;
    transition: width 0.3s ease;
}

.pd-stats-pct-label {
    color: var(--primary-color);             /* primary: % value */
    font-size: 12px;
    font-weight: 700;
}

/* Package values */
.pd-stats-pkg {
    font-size: 14px;
    font-weight: 700;
    white-space: nowrap;
}

.pd-stats-pkg small {
    font-size: var(--text-xs);
    font-weight: 600;
    opacity: 0.7;
}

.pd-stats-pkg-high {
    color: var(--primary-color);             /* primary: highest package — standout */
}

.pd-stats-pkg-avg {
    color: var(--secondary-color);           /* secondary: average package */
}

/* Responsive */
@media (max-width: 991px) {
    .pd-stats-summary {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 575px) {
    .pd-stats-summary {
        grid-template-columns: 1fr;
    }
}

/*==================
 DEPARTMENTS SECTION
====================*/
.default-departments-section {
    color: var(--home-section-text, var(--text-color));
    padding: var(--section-padding-y, 80px) 0;
}

.default-departments-heading {
    margin-bottom: 40px;
}

.default-departments-heading .section-eyebrow {
    margin-top: 12px;
}

.default-departments-section h2 {
    color: var(--home-section-heading, var(--heading-color, var(--home-section-text, var(--text-color))));
    font-size: clamp(26px, 3vw, 30px);
    font-weight: 700;
    margin-bottom: 10px;
}

/* ── Scroll wrapper — clips horizontally only, not vertically ── */
.default-departments-scroll-wrap {
    overflow-x: clip;
    padding-bottom: 4px;
    width: 100%;
}

/* ── Animated track ── */
.default-departments-track {
    animation: dept-marquee 25s linear infinite;
    display: flex;
    flex-wrap: nowrap;
    gap: 16px;
    width: max-content;
}

.default-departments-scroll-wrap:hover .default-departments-track {
    animation-play-state: paused;
}

@keyframes dept-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

/* ── Individual tile — 4 per container row ── */
.default-dept-tile {
    /* 4 tiles + 3 gaps fill the Bootstrap container inner width */
    align-items: center;
    background: var(--home-section-surface, var(--surface-color));
    border: 1px solid var(--home-section-border, var(--border-color));
    border-radius: 16px;
    color: var(--home-section-text, var(--text-color));
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    gap: 12px;
    overflow: hidden;
    padding: 28px 16px 24px;
    position: relative;
    text-align: center;
    text-decoration: none;
    transition: border-color 0.25s ease, color 0.25s ease;
    width: calc((min(100vw - 30px, 1110px) - 3 * 16px) / 4);
}

/* Gradient fill on hover */
.default-dept-tile::before {
    background: linear-gradient(145deg, var(--primary-color) 0%, color-mix(in srgb, var(--primary-color), var(--accent-color) 52%) 100%);
    border-radius: inherit;
    bottom: 0;
    content: '';
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 0.25s ease;
    z-index: 0;
}

.default-dept-tile:hover::before,
.default-dept-tile:focus::before {
    opacity: 1;
}

.default-dept-tile:hover,
.default-dept-tile:focus {
    border-color: var(--primary-color);
    color: var(--primary-contrast-color);
    text-decoration: none;
}

/* Children above the gradient */
.default-dept-tile-icon,
.default-dept-tile-name {
    position: relative;
    z-index: 1;
}

/* ── Icon ── */
.default-dept-tile-icon {
    align-items: center;
    background: color-mix(in srgb, var(--primary-color), transparent 88%);
    border-radius: 14px;
    color: var(--primary-color);
    display: inline-flex;
    font-size: 24px;
    height: 56px;
    justify-content: center;
    overflow: hidden;
    transition: background 0.25s ease, color 0.25s ease;
    width: 56px;
}

.default-dept-tile-icon img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.default-dept-tile:hover .default-dept-tile-icon,
.default-dept-tile:focus .default-dept-tile-icon {
    background: color-mix(in srgb, var(--primary-contrast-color), transparent 78%);
    color: var(--primary-contrast-color);
}

/* ── Name ── */
.default-dept-tile-name {
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.35;
}

/* ── Dark section overrides ── */
.home-section-bg-dark .default-dept-tile {
    background: color-mix(in srgb, var(--bg-color), transparent 90%);
    border-color: color-mix(in srgb, var(--bg-color), transparent 80%);
}

.home-section-bg-dark .default-dept-tile::before {
    background: linear-gradient(145deg, var(--accent-color) 0%, color-mix(in srgb, var(--accent-color), var(--primary-color) 42%) 100%);
}

.home-section-bg-dark .default-dept-tile-icon {
    background: color-mix(in srgb, var(--accent-color), transparent 82%);
    color: var(--accent-color);
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .default-dept-tile {
        width: calc((100vw - 30px - 2 * 16px) / 3);
    }
}

@media (max-width: 767px) {
    .default-departments-section {
        padding-top: 48px !important;
        padding-bottom: 48px !important;
    }

    .default-dept-tile {
        padding: 22px 12px 18px;
        width: calc((100vw - 30px - 16px) / 2);
    }

    .default-dept-tile-icon {
        font-size: 20px;
        height: 48px;
        width: 48px;
    }

    .default-dept-tile-icon img {
        height: 100%;
        width: 100%;
    }

    .default-departments-track {
        animation-duration: 18s;
    }
}


/*==================
 KEY HIGHLIGHTS SECTION
====================*/
#mu-key-highlights.default-highlights-section {
    color: var(--home-section-text, var(--text-color));
    padding: 80px 0 !important;
}

.default-highlights-heading {
    margin-bottom: 48px;
}

.default-highlights-section h2 {
    color: var(--home-section-heading, var(--heading-color, var(--home-section-text, var(--text-color))));
    font-size: clamp(26px, 3vw, 30px);
    font-weight: 700;
    margin-bottom: 10px;
}

.default-highlights-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, 1fr);
}

.default-highlight-card {
    align-items: center;
    aspect-ratio: 1 / 1;
    background: var(--home-section-surface, var(--surface-color));
    border: 1px solid var(--home-section-border, var(--border-color));
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    justify-content: center;
    padding: 24px 20px;
    text-align: center;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.default-highlight-card:hover {
    box-shadow: 0 8px 28px color-mix(in srgb, var(--primary-color), transparent 88%);
    transform: translateY(-3px);
}

.default-highlight-icon {
    align-items: center;
    background: color-mix(in srgb, var(--primary-color), transparent 88%);
    border-radius: 14px;
    color: var(--primary-color);
    display: inline-flex;
    font-size: 26px;
    height: 64px;
    justify-content: center;
    overflow: hidden;
    width: 64px;
}

.default-highlight-icon img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.default-highlight-title {
    color: var(--home-section-heading, var(--heading-color, var(--home-section-text, var(--text-color))));
    font-size: 16px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0;
}

.default-highlight-desc {
    color: var(--home-section-muted, var(--text-muted-color));
    font-size: 14px;
    line-height: 1.65;
    margin: 0;
}

.home-section-bg-dark .default-highlight-icon {
    background: color-mix(in srgb, var(--accent-color), transparent 82%);
    color: var(--accent-color);
}

@media (max-width: 991px) {
    .default-highlights-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    #mu-key-highlights.default-highlights-section { padding: 56px 0 !important; }
    .default-highlights-grid { grid-template-columns: 1fr; gap: 16px; }
}

/*==================
 FACTS & FIGURES SECTION
====================*/
.default-facts-section {
    color: var(--home-section-text, var(--text-color));
    padding: var(--section-padding-y, 80px) 0;
}

.default-facts-heading {
    margin-bottom: 48px;
}

.default-facts-heading .section-eyebrow {
    margin-top: 0;
}

.default-facts-section h2 {
    color: var(--home-section-heading, var(--heading-color, var(--home-section-text, var(--text-color))));
    font-size: clamp(26px, 3vw, 30px);
    font-weight: 700;
    margin-bottom: 10px;
}

.default-facts-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, 1fr);
}

.default-fact-item {
    align-items: center;
    background: var(--home-section-surface, var(--surface-color));
    border: 1px solid var(--home-section-border, var(--border-color));
    border-radius: 14px;
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 32px 20px;
    text-align: center;
    transition: box-shadow 0.25s ease, transform 0.25s ease;
}

.default-fact-item:hover {
    box-shadow: 0 8px 28px color-mix(in srgb, var(--primary-color), transparent 88%);
    transform: translateY(-3px);
}

.default-fact-icon {
    align-items: center;
    background: color-mix(in srgb, var(--primary-color), transparent 88%);
    border-radius: 12px;
    color: var(--primary-color);
    display: inline-flex;
    font-size: 22px;
    height: 56px;
    justify-content: center;
    overflow: hidden;
    width: 56px;
}

.default-fact-icon img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.default-fact-metric {
    color: var(--primary-color);
    display: block;
    font-size: clamp(28px, 4vw, 42px);
    font-weight: 800;
    letter-spacing: -0.5px;
    line-height: 1.1;
}

.default-fact-title {
    color: var(--home-section-muted, var(--text-muted-color));
    display: block;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    text-transform: uppercase;
}

.home-section-bg-dark .default-fact-item {
    background: color-mix(in srgb, #fff, transparent 92%);
    border-color: color-mix(in srgb, #fff, transparent 85%);
}

.home-section-bg-dark .default-fact-icon {
    background: color-mix(in srgb, var(--accent-color), transparent 82%);
    color: var(--accent-color);
}

.home-section-bg-dark .default-fact-metric {
    color: var(--accent-color, var(--primary-color));
}

@media (max-width: 991px) {
    .default-facts-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    .default-facts-section {
        padding: 56px 0;
    }
    .default-facts-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
    .default-fact-icon { width: 44px; height: 44px; font-size: 18px; }
    /* m-08: reduce icon sizes on mobile */
    .default-highlight-icon { width: 52px; height: 52px; font-size: 22px; }
}

/** banner  */
.edu-banner {
  position: relative;
  width: 100%;
  height: 35vh;
  background: var(--secondary-color);
  color: var(--text-color);
  background-size: cover;       /* cover entire box */
  background-position: center;  /* keep centered */
  background-repeat: no-repeat; /* avoid tiling */
  display: flex;                /* for centering text */
  align-items: center;
  justify-content: center;
  padding: 20px;
  overflow: hidden;
  text-align: center;
  font-family: var(--header-font-family);
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
}

.edu-banner--image {
  background-color: var(--secondary-color);
  background-size: cover;
}

/* Floating animated icons representing various educations */
.animated-icons {
  position: absolute;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}

.icon {
  position: absolute;
  font-size: 32px;
  opacity: 0.2;
  animation: float 6s infinite ease-in-out;
}

.icon.book    { top: 10%; left: 10%; animation-delay: 0s; }
.icon.atom    { top: 30%; left: 85%; animation-delay: 1s; }
.icon.flask   { top: 75%; left: 15%; animation-delay: 2s; }
.icon.heart   { top: 60%; left: 75%; animation-delay: 3s; }
.icon.gear    { top: 20%; left: 50%; animation-delay: 4s; }
.icon.pencil  { top: 45%; left: 25%; animation-delay: 5s; }

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50% { transform: translateY(-10px) rotate(5deg); }
}

.banner-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  padding: 20px;
}

.banner-content h1 {
  font-size: 36px;
  margin-bottom: 12px;
  color: var(--text-color);
  overflow-wrap: break-word;
  text-shadow: 1px 1px 2px rgba(0,0,0,0.3);
  word-break: break-word;
}

.banner-content p {
  font-size: 18px;
  color: var(--text-color);
  text-shadow: 1px 1px 1px rgba(0,0,0,0.2);
}

/* Responsiveness */
@media (max-width: 768px) {
  .banner-content h1 { font-size: 28px; }
  .banner-content p { font-size: 16px; }
  .icon { font-size: 24px; }
}


@media (max-width: 640px) {
  #mu-header .mu-header-area .mu-header-top-left .mu-top-phone {
    display: none;
  }

  #mu-slider .mu-slider-single .mu-slider-content h2 {
    font-size: 25px;
    line-height: 1.3;
  }

  #mu-slider .mu-slider-single .mu-slider-img {
    height: 350px;
  }

  #mu-slider .mu-slider-single .mu-slider-content h4 {
    letter-spacing: 0;
  }

  #mu-service {
    margin-top: 30px;
  }

  #mu-service .mu-service-area .mu-service-single {
    padding: 20px 5px;
  }

  #mu-service .mu-service-area .mu-service-single h3 {
    font-size: 16px;
  }

  #mu-slider .mu-slider-single .mu-slider-img figure img {
    width: 100%;
  }

  #mu-gallery .mu-gallery-area .mu-gallery-content .mu-gallery-top ul li {
    padding: 5px 10px;
    margin-bottom: 5px;
  }
  .mu-title p {
  color: var(--text-muted-color);
  letter-spacing: 0.3px;
  line-height: 1.7;
  padding: 0 20px;
}
}
@media (max-width: 480px) {
  #mu-header .mu-header-area .mu-header-top-left .mu-top-email {
    font-size: 12px;
    margin-top: 3px;
  }

  #mu-header .mu-header-area .mu-header-top-left .mu-top-email i {
    margin-right: 0;
  }

  #mu-header .mu-header-area .mu-header-top-right .mu-top-social-nav li a {
    width: 24px;
    height: 24px;
    font-size: 11px;
  }

  #mu-slider .mu-slider-single .mu-slider-content h2 {
    font-size: 18px;
    line-height: 1.3;
  }

  #mu-slider .mu-slider-single .mu-slider-content h4 {
    font-size: var(--text-base);
    line-height: 16px;
  }

  #mu-slider .mu-slider-single .mu-slider-content p {
    font-size: 14px;
    line-height: 1.5;
  }

  #mu-slider .mu-slider-single .mu-slider-content {
    padding: 0 2%;
  }

  #mu-slider .mu-slider-single .mu-slider-content {
    top: 5%;
  }

  #mu-slider .mu-carousel-btn {
    height: 40px;
    width: 40px;
  }

  #mu-slider .mu-slider-single .mu-slider-img {
    height: 270px;
  }

  #mu-service .mu-service-area .mu-service-single {
    padding: 20px 15px;
    width: 100%;
  }

  #mu-service .mu-service-area .mu-service-single h3 {
    font-size: 18px;
  }

  #about-video-popup iframe {
    height: 300px;
    margin: 5% auto;
    width: 80%;
  }

  #mu-footer .mu-footer-top .mu-footer-top-area .mu-footer-widget .mu-subscribe-form input[type="email"] {
    margin-right: 0;
    width: 100%;
  }

  .mu-pagination {
    text-align: center;
  }

  .mu-pagination .pagination li a,
  .mu-pagination .pagination li span {
    align-items: center;
    display: flex;
    font-size: 14px;
    justify-content: center;
    margin: 0 2px;
    min-height: 44px;
    min-width: 44px;
    padding: 5px 12px;
  }

  .mu-blog-single .mu-blog-single-item .mu-blog-description h1 {
    font-size: 25px;
  }

  .mu-blog-single .mu-blog-single-item .mu-blog-description h2 {
    font-size: 22px;
    line-height: 30px;
  }

  .mu-blog-single .mu-blog-single-item .mu-blog-description h3 {
    font-size: 18px;
    line-height: 24px;
  }

  .mu-blog-single .mu-blog-single-item .mu-blog-description h4 {
    font-size: 16px;
    line-height: 20px;
  }

  .mu-blog-single .mu-blog-single-item .mu-blog-social .mu-news-social-nav li a {
    font-size: var(--text-base);
    height: 30px;
    line-height: 30px;
    min-width: 30px;
  }

  #respond input[type="text"], #respond input[type="email"], #respond input[type="url"] {
    width: 100%;
  }

  #mu-gallery .mu-gallery-area .mu-gallery-content .mu-gallery-body ul li .mu-single-gallery .mu-single-gallery-item .mu-single-gallery-img {
    height: 280px;
  }

  #mu-gallery .mu-gallery-area .mu-gallery-content .mu-gallery-top ul li {
    margin-bottom: 10px;
  }

  #mu-contact .mu-contact-area .mu-contact-content .mu-contact-right iframe {
    height: 350px;
  }
}
@media (max-width: 360px) {
  #mu-about-us .mu-about-us-area .mu-about-us-left h2 {
    font-size: 30px;
    margin-bottom: 10px;
  }

  #mu-testimonial .mu-testimonial-area .mu-testimonial-content .mu-testimonial-item .mu-testimonial-quote {
    padding: 40px 15px 80px;
  }

  #mu-footer .mu-footer-top {
    padding: 50px 0 10px;
  }

  .mu-pagination .pagination li a,
  .mu-pagination .pagination li span {
    min-height: 44px;
    min-width: 44px;
    padding: 5px 8px;
  }

  .mu-comments-area .comments .commentlist li .news-img {
    margin-right: 0;
  }

  .mu-comments-area .comments .commentlist .children {
    margin-left: 10px;
  }

  .mu-blog-single .mu-blog-single-item .mu-blog-social .mu-news-social-nav li a {
    margin-bottom: 10px;
  }

  #mu-gallery .mu-gallery-area .mu-gallery-content .mu-gallery-body ul li .mu-single-gallery .mu-single-gallery-item .mu-single-gallery-img {
    height: 220px;
  }

  #mu-contact .mu-contact-area .mu-contact-content .mu-contact-right iframe {
    height: 300px;
  }

  #mu-error .mu-error-area p {
    font-size: 18px;
  }

  #mu-error .mu-error-area span {
    font-size: 14px;
  }

  #mu-error .mu-error-area h2 {
    font-size: 100px;
  }

  /** custom css*/


}


/*==================
 GALLERY SECTION
====================*/

/* ── Section wrapper ── */
.default-gallery-section {
    --dgf-tab-accent: var(--secondary-color);
    --dgf-tab-accent-contrast: var(--secondary-contrast-color, #fff);
    color: var(--home-section-text, var(--text-color));
    padding: var(--section-padding-y, 80px) 0;
}

/* ── Heading ── */
.default-gallery-heading {
    margin-bottom: 44px;
}

.default-gallery-heading h2 {
    color: var(--home-section-heading, var(--heading-color, var(--home-section-text, var(--text-color))));
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin-bottom: 10px;
}

/* ── Filter tabs ── */
.default-gallery-filters {
    margin-bottom: 36px;
}

.default-gallery-filter-list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    list-style: none;
    margin: 0;
    padding: 0;
}

.default-gallery-filter-btn {
    background: transparent;
    border: 1.5px solid var(--home-section-border, var(--border-color));
    border-radius: 100px;
    color: var(--home-section-muted, var(--text-muted-color));
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 600;
    letter-spacing: 0.03em;
    padding: 7px 22px;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    user-select: none;
}

.default-gallery-filter-btn:not(.active):hover {
    border-color: var(--dgf-tab-accent);
    color: var(--dgf-tab-accent);
}

.default-gallery-filter-btn.active {
    background: var(--dgf-tab-accent);
    border-color: var(--dgf-tab-accent);
    color: var(--dgf-tab-accent-contrast);
}

/* ── Grid ── */
.default-gallery-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, 1fr);
    list-style: none;
    margin: 0;
    padding: 0;
}

@media (max-width: 991px) {
    .default-gallery-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    .default-gallery-grid { grid-template-columns: 1fr; }
}

/* ── Grid item ── */
.default-gallery-item {
    margin: 0;
    padding: 0;
}

/* ── Card ── */
.default-gallery-card {
    border-radius: var(--border-radius, 12px);
    cursor: pointer;
    overflow: hidden;
    position: relative;
}

/* ── Image ── */
.default-gallery-img {
    aspect-ratio: 4 / 3;
    display: block;
    height: 100%;
    object-fit: cover;
    transition: transform 0.45s ease;
    width: 100%;
}

.default-gallery-card:hover .default-gallery-img {
    transform: scale(1.07);
}

/* ── Overlay ── */
.default-gallery-overlay {
    background: linear-gradient(
        to top,
        rgba(0, 0, 0, 0.72) 0%,
        rgba(0, 0, 0, 0.18) 50%,
        transparent 100%
    );
    bottom: 0;
    left: 0;
    opacity: 0;
    position: absolute;
    right: 0;
    top: 0;
    transition: opacity 0.3s ease;
}

.default-gallery-card:hover .default-gallery-overlay {
    opacity: 1;
}

/* ── Overlay content ── */
.default-gallery-overlay-inner {
    align-items: flex-end;
    bottom: 0;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    left: 0;
    padding: 14px 16px;
    position: absolute;
    right: 0;
    transform: translateY(6px);
    transition: transform 0.3s ease;
}

.default-gallery-card:hover .default-gallery-overlay-inner {
    transform: translateY(0);
}

/* ── Caption ── */
.default-gallery-caption {
    color: #fff;
    flex: 1;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.4;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Zoom button ── */
.default-gallery-zoom {
    align-items: center;
    backdrop-filter: blur(4px);
    background: rgba(255, 255, 255, 0.15);
    border: 1.5px solid rgba(255, 255, 255, 0.35);
    border-radius: 8px;
    color: #fff;
    display: flex;
    flex-shrink: 0;
    font-size: 14px;
    height: 34px;
    justify-content: center;
    text-decoration: none;
    transition: background 0.2s ease;
    width: 34px;
}

.default-gallery-zoom:hover,
.default-gallery-zoom:focus {
    background: rgba(255, 255, 255, 0.3);
    color: #fff;
    text-decoration: none;
}

/* ── Gallery items: hidden only when JS filter has excluded them ── */
#mixit-container.default-gallery-grid .mix[hidden] {
    display: none;
}

/* ── "All" tab pagination: items beyond the current batch ── */
.default-gallery-item--paged-hidden {
    display: none !important;
}

.default-gallery-load-more-wrap {
    display: flex;
    justify-content: center;
    margin-top: 32px;
}

.default-gallery-load-more-wrap--hidden {
    display: none !important;
}

.default-gallery-load-more {
    align-items: center;
    background: none;
    border: 1.5px solid var(--dgf-tab-accent);
    border-radius: 999px;
    color: var(--dgf-tab-accent);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--text-sm);
    font-weight: 600;
    gap: 8px;
    letter-spacing: 0.03em;
    padding: 9px 26px;
    transition: background 0.2s, color 0.2s;
}

.default-gallery-load-more:hover {
    background: var(--dgf-tab-accent);
    color: var(--dgf-tab-accent-contrast);
}

.home-section-bg-dark .default-gallery-load-more {
    border-color: color-mix(in srgb, var(--bg-color), transparent 50%);
    color: var(--home-section-muted, var(--text-muted-color));
}

.home-section-bg-dark .default-gallery-load-more:hover {
    background: var(--dgf-tab-accent);
    border-color: var(--dgf-tab-accent);
    color: var(--dgf-tab-accent-contrast);
}

/* ── Dark section overrides ── */
.home-section-bg-dark .default-gallery-filter-btn {
    border-color: color-mix(in srgb, var(--bg-color), transparent 50%);
    color: var(--home-section-muted, var(--text-muted-color));
}

.home-section-bg-dark .default-gallery-filter-btn:not(.active):hover {
    border-color: var(--dgf-tab-accent);
    color: var(--dgf-tab-accent);
}

.home-section-bg-dark .default-gallery-filter-btn.active {
    background: var(--dgf-tab-accent);
    border-color: var(--dgf-tab-accent);
    color: var(--dgf-tab-accent-contrast);
}

/* ── Responsive ── */
@media (max-width: 575px) {
    .default-gallery-heading {
        margin-bottom: 32px;
    }

    .default-gallery-filter-btn {
        font-size: var(--text-xs);
        padding: 5px 14px;
    }
}

/** Awards Page */
/* The actual timeline (the vertical ruler) */
.main-timeline-2 {
  position: relative;
}

/* The actual timeline (the vertical ruler) */
.main-timeline-2::after {
  content: "";
  position: absolute;
  width: 2px;
  background-color:var(--primary-color);
  top: 0;
  bottom: 0;
  left: 50%;
  margin-left: -3px;
}

/* Container around content */
.timeline-2 {
  position: relative;
  background-color: inherit;
  width: 50%;
}

/* The circles on the timeline */
.timeline-2::after {
  content: "";
  position: absolute;
  width: 25px;
  height: 25px;
  right: -11px;
  background-color: var(--primary-color);
  top: 15px;
  border-radius: 50%;
  z-index: 1;
}

/* Place the container to the left */
.left-2 {
  padding: 0px 40px 20px 0px;
  left: 0;
}

/* Place the container to the right */
.right-2 {
  padding: 0px 0px 20px 40px;
  left: 50%;
}

/* Add arrows to the left container (pointing right) */
.left-2::before {
  content: " ";
  position: absolute;
  top: 18px;
  z-index: 1;
  right: 30px;
  border: medium solid white;
  border-width: 10px 0 10px 10px;
  border-color: transparent transparent transparent white;
}

/* Add arrows to the right container (pointing left) */
.right-2::before {
  content: " ";
  position: absolute;
  top: 18px;
  z-index: 1;
  left: 30px;
  border: medium solid white;
  border-width: 10px 10px 10px 0;
  border-color: transparent white transparent transparent;
}

/* Fix the circle for containers on the right side */
.right-2::after {
  left: -14px;
}

/* Media queries - Responsive timeline on screens less than 600px wide */
@media screen and (max-width: 600px) {
  /* Place the timelime to the left */
  .main-timeline-2::after {
    left: 31px;
  }

  /* Full-width containers */
  .timeline-2 {
    width: 100%;
    padding-left: 70px;
    padding-right: 25px;
  }

  /* Make sure that all arrows are pointing leftwards */
  .timeline-2::before {
    left: 60px;
    border: medium solid white;
    border-width: 10px 10px 10px 0;
    border-color: transparent white transparent transparent;
  }

  /* Make sure all circles are at the same spot */
  .left-2::after,
  .right-2::after {
    left: 18px;
  }

  .left-2::before {
    right: auto;
  }

  /* Make all right containers behave like the left ones */
  .right-2 {
    left: 0%;
  }
}

.leader-name{
  color:var(--primary-color);
}

.color-white{
  background-color:var(--bg-color);
}

/** management committee  */

.member-card {
    min-height: 130px;
    padding: 15px;
    border-radius: 10px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    transition: all 0.3s ease-in-out;
    opacity: 0;
    transform: translateY(20px);
    animation: fadeInUp 0.4s forwards;
}


.member-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15); /* stronger hover shadow */
}

@keyframes fadeInUp {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.default-management-detail-section {
    background: var(--home-section-bg, #fff);
    color: var(--home-section-text, var(--text-color));
    padding: var(--section-padding-y, 80px) 0;
}

.dmc-grid {
    display: grid;
    gap: 24px;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.dmc-card {
    border-radius: 18px;
    min-height: 360px;
    outline: none;
    overflow: hidden;
    position: relative;
}
.dmc-card:focus-visible {
    outline: 3px solid var(--primary-color);
    outline-offset: 3px;
}

.dmc-media {
    background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color), #ffffff 28%));
    height: 100%;
    min-height: 360px;
    position: relative;
}

.dmc-media img,
.dmc-initials {
    display: block;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    object-position: top center;
    transition: transform 0.35s ease;
    width: 100%;
}

.dmc-initials {
    align-items: center;
    color: rgba(255,255,255,0.8);
    display: flex;
    font-size: 56px;
    font-weight: 800;
    justify-content: center;
}

.dmc-face {
    background: linear-gradient(to bottom, transparent 0%, rgba(0,0,0,0.2) 35%, rgba(0,0,0,0.78) 100%);
    bottom: 0;
    color: #fff;
    left: 0;
    padding: 72px 18px 20px;
    position: absolute;
    right: 0;
    z-index: 2;
}

.dmc-badge {
    background: var(--primary-color);
    border-radius: 100px;
    color: var(--primary-contrast-color, #fff);
    display: inline-block;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
    padding: 4px 10px;
    text-transform: uppercase;
}

.dmc-face h3,
.dmc-details h3 {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

.dmc-face p,
.dmc-role {
    margin: 6px 0 0;
}

.dmc-face p {
    color: rgba(255,255,255,0.88);
}

.dmc-details {
    background: rgba(17, 24, 39, 0.94);
    color: #fff;
    inset: 0;
    opacity: 0;
    padding: 20px;
    position: absolute;
    transform: translateY(16px);
    transition: opacity 0.25s ease, transform 0.25s ease;
    z-index: 3;
}

.dmc-card:hover .dmc-details,
.dmc-card:focus-within .dmc-details,
.dmc-card:focus .dmc-details {
    opacity: 1;
    transform: translateY(0);
}

.dmc-card:hover .dmc-media img,
.dmc-card:focus .dmc-media img {
    transform: scale(1.05);
}

.dmc-details-scroll {
    max-height: 100%;
    overflow-y: auto;
    padding-right: 4px;
}

.dmc-role {
    color: rgba(255,255,255,0.78);
    font-size: var(--text-sm);
}

.dmc-details dl {
    display: grid;
    gap: 10px;
    margin: 18px 0 0;
}

.dmc-details dl div {
    border-top: 1px solid rgba(255,255,255,0.14);
    padding-top: 10px;
}

.dmc-details dt {
    color: rgba(255,255,255,0.56);
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.dmc-details dd {
    color: rgba(255,255,255,0.9);
    font-size: var(--text-sm);
    line-height: 1.5;
    margin: 3px 0 0;
    overflow-wrap: anywhere;
}

.dmc-bio {
    border-top: 1px solid rgba(255,255,255,0.14);
    color: rgba(255,255,255,0.84);
    font-size: var(--text-sm);
    line-height: 1.6;
    margin: 16px 0 0;
    padding-top: 14px;
}

@media (max-width: 575px) {
    .default-management-detail-section {
        padding: 56px 0;
    }
}

@media (max-width: 1199px) {
    .dmc-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
}

@media (max-width: 991px) {
    .dmc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .dmc-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .dmc-grid {
        grid-template-columns: 1fr;
    }
}

   .course-card {
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        border-radius: 12px;
        overflow: hidden;
    }

    .course-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
    }

    .card-img-top-wrapper {
        overflow: hidden;
        height: 180px;
    }

    .card-img-top {
        height: 100%;
        width: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
    }

    .course-card:hover .card-img-top {
        transform: scale(1.05);
    }

    .mu-sidebar-catg {
    list-style: none;
    padding-left: 0;
}

.mu-sidebar-catg > li {
    margin-bottom: 8px;
}

.mu-sub-catg {
    list-style: none;
    padding-left: 15px;
}

.mu-sub-catg li {
    margin-top: 4px;
}

.sidebar-nav-custom {
        border: 1px solid var(--border-color);
        border-radius: 0px;
        padding: 0;
        margin: 0;
        list-style: none;
        background-color: var(--bg-color);
    }

    .sidebar-nav-custom li {
        border-bottom: 1px solid var(--border-color);
    }

    .sidebar-nav-custom li:last-child {
        border-bottom: none;
    }

    .sidebar-nav-custom li a {
        display: block;
        padding: 10px 15px;
        text-decoration: none;
        color: var(--text-color);
        background-color: var(--bg-color);
        transition: background-color 0.2s ease, color 0.2s ease;
    }
    .sidebar-nav-custom li a.active {
        display: block;
        padding: 10px 15px;
        text-decoration: none;
        color: var(--accent-color);
        background-color: var(--primary-color);
        transition: background-color 0.2s ease, color 0.2s ease;
    }

    .sidebar-nav-custom li a:hover {
        background-color: var(--primary-color);
        color: var(--accent-color);
    }


 .facility-card {
      border-radius: var(--border-radius, 12px);
      overflow: hidden;
      box-shadow: 0 4px 12px rgba(0,0,0,0.08);
      transition: transform 0.3s ease;
      height: 100%;
    }
    .facility-card:hover {
      transform: translateY(-6px);
    }
    .facility-icon {
      font-size: 40px;
      color: var(--primary-color);
      margin-bottom: 15px;
    }
    .facility-img {
      height: 200px;
      object-fit: cover;
      width: 100%;
    }


.hero-video-section {
    position: relative;
    height: 700px;
    margin-bottom: 120px;
}

.hero-video-section .video-content {
    position: relative;
    z-index: 3;
    height: 100%;
    width: 100%;
    padding: 0 15%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    color: #fff;
}
.hero-video-section .video-content h2 {
    color: #fff;
    font-size: clamp(26px, 5vw, 50px);
    line-height: 1.4;
    margin-bottom: 10px;
}
.hero-video-section .video-content p {
    color: #fff;
    font-size: 18px;
    letter-spacing: 0.5px;
    line-height: 28px;
}
.hero-video-section .video-content .mu-read-more-btn {
    margin-top: 25px;
}



.hero-video-section video {
    position: absolute;
    top: 50%;
    left: 50%;
    min-width: 100%;
    min-height: 100%;
    object-fit: cover;
    transform: translate(-50%, -50%);
    z-index: 1;
}
.hero-video-section .video-wrapper {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden; /* just in case */
}
.video-hero-pause-btn {
    position: absolute;
    bottom: 16px;
    right: 16px;
    z-index: 4;
    background: rgba(0,0,0,0.55);
    border: 2px solid rgba(255,255,255,0.7);
    border-radius: 50%;
    color: var(--primary-contrast-color, #fff);
    cursor: pointer;
    font-size: 14px;
    height: 40px;
    width: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background 0.2s;
}
.video-hero-pause-btn:hover,
.video-hero-pause-btn:focus-visible {
    background: rgba(0,0,0,0.8);
    outline: 3px solid var(--primary-color);
    outline-offset: 2px;
}

.hero-video-section .overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.4); /* Dark overlay */
    z-index: 2;
}


/* Tablet */
@media (max-width: 991px) {
    .hero-video-section {
        height: 500px;
    }
}

/* Mobile */
@media (max-width: 767px) {
    .hero-video-section {
        height: 350px;
    }
    .hero-video-section .video-content {
        padding: 0 6%;
    }
    .hero-video-section .video-content h2 {
        font-size: 26px;
        line-height: 36px;
    }
    .hero-video-section .video-content p {
        font-size: 14px;
        line-height: 22px;
    }
}

@media (max-width: 991px) and (min-width: 768px) {
    .hero-video-section .video-content {
        padding: 0 10%;
    }
    .hero-video-section .video-content h2 {
        font-size: 36px;
        line-height: 52px;
    }
}

/* ── Hero text color mode: dark ────────────────────────────── */
#mu-slider.sch-hero-text-dark .mu-slider-single .mu-slider-content .hero-eyebrow,
#mu-slider.sch-hero-text-dark .mu-slider-single .mu-slider-content h2,
#mu-slider.sch-hero-text-dark .mu-slider-single .mu-slider-content h4 {
    color: var(--secondary-color);
}
#mu-slider.sch-hero-text-dark .mu-slider-single .mu-slider-content p {
    color: var(--text-color);
}
.hero-video-section.sch-hero-text-dark .video-content .hero-eyebrow,
.hero-video-section.sch-hero-text-dark .video-content h2 {
    color: var(--secondary-color);
}
.hero-video-section.sch-hero-text-dark .video-content p {
    color: var(--text-color);
}

#mu-latest-courses {
    background-color: var(--bg-alt-color);
}
.mu-title h2 {
    color: var(--text-color);
    font-weight: 700;
    letter-spacing: 0.5px;
}
.mu-latest-course-single {
    transition: all 0.3s ease;
}
.mu-latest-course-single:hover {
    transform: translateY(-6px);
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.15);
}
.mu-latest-course-imgcaption {
    background: rgba(0, 0, 0, 0.8);
}

#mu-from-blog .mu-blog-single-item {
    transition: all 0.3s ease-in-out;
    padding:20px;
}
#mu-from-blog .mu-blog-single-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 20px rgba(0,0,0,0.1);
}
#mu-from-blog h2 {
    letter-spacing: 0.5px;
}
#mu-from-blog .mu-blog-caption h6 {
    font-size: var(--text-base);
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
}

/* Shared home hero advanced settings */
#mu-slider {
    background: var(--primary-color, #01bafd);
}
#mu-slider.sch-hero-height-medium .mu-slider-single .mu-slider-img {
  height: 500px;
}

#mu-slider .mu-slider-single .mu-slider-img:after {
  background-color: rgba(0, 0, 0, var(--hero-overlay-opacity, 0.5));
}

#mu-slider.sch-hero-overlay-off .mu-slider-single .mu-slider-img:after {
  display: none;
}

.hero-video-section.sch-hero-height-small {
  height: 420px;
}

.hero-video-section.sch-hero-height-medium {
  height: 600px;
}

.hero-video-section.sch-hero-height-full {
  height: 100vh;
  min-height: 620px;
}

.hero-video-section .overlay {
  background: rgba(0, 0, 0, var(--hero-overlay-opacity, 0.5));
}

.hero-video-section.sch-hero-overlay-off .overlay {
  display: none;
}

.hero-video-section.sch-hero-text-left .video-content {
  align-items: flex-start !important;
  text-align: left !important;
}

.hero-video-section.sch-hero-text-right .video-content {
  align-items: flex-end !important;
  text-align: right !important;
}

.hero-video-section.sch-hero-valign-top .video-content {
  justify-content: flex-start !important;
  padding-top: 8%;
}

.hero-video-section.sch-hero-valign-bottom .video-content {
  justify-content: flex-end !important;
  padding-bottom: 8%;
}

@media (max-width: 767px) {
  #mu-slider.sch-hide-caption-mobile .mu-slider-content h2,
  #mu-slider.sch-hide-caption-mobile .mu-slider-content h3,
  #mu-slider.sch-hide-caption-mobile .mu-slider-content p,
  #mu-slider.sch-hide-caption-mobile .mu-slider-content span,
  .hero-video-section.sch-hide-caption-mobile .video-content h2,
  .hero-video-section.sch-hide-caption-mobile .video-content h3,
  .hero-video-section.sch-hide-caption-mobile .video-content p,
  .hero-video-section.sch-hide-caption-mobile .video-content span {
    display: none !important;
  }

  .hero-video-section.sch-hide-cta-mobile .sch-cta-btn,
  #mu-slider.sch-hide-cta-mobile .sch-cta-btn {
    display: none !important;
  }

  /* ── Hero mobile: breathing room + scaled typography ── */
  #mu-slider .mu-slider-single .mu-slider-content {
    padding: 0 20px;
    top: 16%;
  }
  #mu-slider .mu-slider-single .mu-slider-content h2 {
    font-size: clamp(20px, 6vw, 28px);
    line-height: 1.25;
    margin-bottom: 8px;
  }
  #mu-slider .mu-slider-single .mu-slider-content p {
    font-size: 14px;
    letter-spacing: 0;
    line-height: 1.55;
    margin-bottom: 0;
  }
  .mu-slider-content .hero-eyebrow,
  .video-content .hero-eyebrow {
    font-size: 11px;
    margin-bottom: 6px;
  }
  .hero-cta-wrap {
    flex-direction: column;
    flex-wrap: nowrap;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
  }
  /* CTA wrap: when column, align-items controls horizontal — follow text position setting */
  #mu-slider.sch-hero-text-left .hero-cta-wrap,
  .hero-video-section.sch-hero-text-left .hero-cta-wrap {
    align-items: flex-start;
  }
  #mu-slider.sch-hero-text-right .hero-cta-wrap,
  .hero-video-section.sch-hero-text-right .hero-cta-wrap {
    align-items: flex-end;
  }
  .hero-cta-wrap .sch-cta-btn,
  .hero-cta-wrap .mu-read-more-btn {
    padding: 10px 22px;
    font-size: 13px;
  }
  .hero-video-section .video-content {
    padding: 0 20px;
  }
  .hero-video-section .video-content h2 {
    font-size: clamp(20px, 6vw, 28px);
    line-height: 1.25;
    margin-bottom: 8px;
  }
  .hero-video-section .video-content p {
    font-size: 14px;
    line-height: 1.55;
  }
}

@media (prefers-reduced-motion: reduce) {
    .hero-video-section video {
        animation: none !important;
    }
    #mu-testimonial-slide.mu-testimonial-ready .mu-testimonial-item {
        transition: none !important;
    }
    /* m-10: remaining keyframe animations */
    .placement-drive-status-dot { animation: none; }
    .default-departments-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; }
    .icon { animation: none; }
    .member-card { animation: none; opacity: 1; transform: none; }
    .daj-modal-inner { animation: none; }
    .daj-dot-ring { animation: none; }
    .dnb-live-badge { animation: none; }
    .igl-item--entering { animation: none; opacity: 1; transform: none; }
}

/* Shared navigation submenu token rules */
.navigation-submenu-bg-light {
    --submenu-panel-bg: var(--surface-color);
    --submenu-section-bg: var(--bg-color);
    --submenu-border-color: var(--border-color);
    --submenu-heading-color: var(--heading-color, var(--text-color));
    --submenu-text-color: var(--text-color);
    --submenu-muted-color: var(--text-muted-color);
    --submenu-hover-bg: var(--primary-soft-color);
    --submenu-hover-text-color: var(--primary-color);
}

.navigation-submenu-bg-dark {
    --submenu-panel-bg: var(--text-color);
    --submenu-section-bg: var(--text-color);
    --submenu-border-color: color-mix(in srgb, var(--bg-color), transparent 82%);
    --submenu-heading-color: var(--bg-color);
    --submenu-text-color: var(--bg-color);
    --submenu-muted-color: color-mix(in srgb, var(--bg-color), var(--text-color) 18%);
    --submenu-hover-bg: var(--primary-color);
    --submenu-hover-text-color: var(--primary-contrast-color);
}

.navigation-submenu-bg-brand {
    --submenu-panel-bg: var(--primary-color);
    --submenu-section-bg: var(--primary-color);
    --submenu-border-color: color-mix(in srgb, var(--primary-contrast-color), transparent 82%);
    --submenu-heading-color: var(--primary-contrast-color);
    --submenu-text-color: var(--primary-contrast-color);
    --submenu-muted-color: color-mix(in srgb, var(--primary-contrast-color), var(--primary-color) 20%);
    --submenu-hover-bg: color-mix(in srgb, var(--primary-contrast-color), transparent 88%);
    --submenu-hover-text-color: var(--primary-contrast-color);
}

.navigation-submenu-bg-contrast {
    --submenu-panel-bg: var(--secondary-color);
    --submenu-section-bg: var(--secondary-color);
    --submenu-border-color: color-mix(in srgb, var(--secondary-contrast-color), transparent 82%);
    --submenu-heading-color: var(--secondary-contrast-color);
    --submenu-text-color: var(--secondary-contrast-color);
    --submenu-muted-color: color-mix(in srgb, var(--secondary-contrast-color), var(--secondary-color) 20%);
    --submenu-hover-bg: color-mix(in srgb, var(--secondary-contrast-color), transparent 88%);
    --submenu-hover-text-color: var(--secondary-contrast-color);
}
/* Default theme navigation styles */
.mu-nav-badge {
        display: inline-block;
        margin-left: 8px;
        padding: 2px 8px;
        border-radius: 999px;
        color: var(--secondary-contrast-color);
        font-size: 11px;
        line-height: 1.4;
        vertical-align: middle;
    }

    .mu-nav-button-link {
        border-radius: 999px;
        background: var(--menu-button-bg-color);
        color: var(--menu-button-text-color) !important;
        padding: 10px 18px !important;
    }

    #mu-menu .navbar-default .navbar-nav li > a,
    #mu-menu .navbar-default .navbar-nav li > a:hover,
    #mu-menu .navbar-default .navbar-nav li > a:focus,
    #mu-menu .navbar-default .navbar-nav > li > a:focus,
    #mu-menu .navbar-default .navbar-nav > .open > a,
    #mu-menu .navbar-default .navbar-nav > .open > a:hover,
    #mu-menu .navbar-default .navbar-nav > .open > a:focus,
    #mu-menu .navbar-default .navbar-nav > .active > a,
    #mu-menu .navbar-default .navbar-nav > .active > a:hover,
    #mu-menu .navbar-default .navbar-nav > .active > a:focus {
        border-bottom: 0 !important;
    }

    .mu-mega-menu {
        background: var(--submenu-panel-bg, var(--surface-color));
        border: 1px solid var(--submenu-border-color, var(--border-color));
        border-radius: 6px !important;
        box-shadow: 0 18px 45px color-mix(in srgb, var(--text-color), transparent 84%);
        left: 0;
        min-width: 760px;
        padding: 18px;
        right: auto;
        transform: none;
        width: min(980px, 92vw);
    }

    .mu-mega-menu.mu-mega-menu--align-right {
        left: auto;
        right: 0;
    }

    .mu-mega-menu.mu-mega-menu--align-left {
        left: 0;
        right: auto;
    }

    .mu-mega-menu-shell {
        display: block;
        padding: 0;
    }

    .mu-mega-menu-grid {
        display: grid;
        gap: 16px;
        grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    }

    .mu-mega-menu-section {
        background: var(--submenu-section-bg, var(--bg-color));
        border: 1px solid var(--submenu-border-color, var(--border-color));
        border-radius: 6px;
        min-width: 0;
        padding: 16px;
    }

    .mu-mega-menu-column h5 {
        border-bottom: 1px solid var(--submenu-border-color, var(--border-color));
        color: var(--submenu-heading-color, var(--heading-color, var(--text-color)));
        font-size: 15px;
        font-weight: 700;
        line-height: 1.25;
        margin: 0 0 12px;
        padding-bottom: 10px;
    }

    .mu-mega-menu-links {
        margin: 0;
        padding: 0;
        list-style: none;
    }

    .mu-mega-menu-links li + li {
        margin-top: 6px;
    }

    .mu-mega-menu-links a {
        align-items: center;
        border: 0 !important;
        border-radius: 4px;
        color: var(--submenu-text-color, var(--text-color));
        display: flex;
        font-size: 14px;
        line-height: 1.35;
        padding: 7px 8px !important;
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
        white-space: normal;
    }

    .mu-mega-menu-links a::before {
        color: currentColor;
        content: "\f105";
        flex: 0 0 auto;
        font-family: FontAwesome;
        font-size: 12px;
        margin-right: 8px;
    }

    #mu-menu .navbar-default .navbar-nav li .mu-mega-menu .mu-mega-menu-links a:hover,
    #mu-menu .navbar-default .navbar-nav li .mu-mega-menu .mu-mega-menu-links a:focus {
        background: var(--submenu-hover-bg, var(--primary-soft-color));
        color: var(--submenu-hover-text-color, var(--primary-color));
        padding-left: 12px !important;
    }

    #mu-menu .navbar-default .navbar-nav li .dropdown-menu:not(.mu-mega-menu) {
        background: var(--submenu-panel-bg, var(--surface-color));
        border: 1px solid var(--submenu-border-color, var(--border-color));
        border-top: 2px solid var(--primary-color);
        border-radius: 6px;
        box-shadow: 0 14px 35px color-mix(in srgb, var(--text-color), transparent 86%);
        min-width: 240px;
        padding: 8px 0;
    }

    #mu-menu .navbar-default .navbar-nav li .dropdown-menu:not(.mu-mega-menu) li a {
        align-items: center;
        border: 0 !important;
        border-radius: 4px;
        color: var(--submenu-text-color, var(--text-color));
        display: flex;
        font-size: 14px;
        line-height: 1.35;
        margin: 0 8px;
        min-height: 36px;
        padding: 8px 10px !important;
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
        white-space: normal;
    }

    #mu-menu .navbar-default .navbar-nav li .dropdown-menu:not(.mu-mega-menu) li a:hover,
    #mu-menu .navbar-default .navbar-nav li .dropdown-menu:not(.mu-mega-menu) li a:focus {
        background: var(--submenu-hover-bg, var(--primary-soft-color));
        color: var(--submenu-hover-text-color, var(--primary-color));
        padding-left: 14px !important;
    }

    #mu-menu .navbar-default .navbar-nav li .dropdown-menu:not(.mu-mega-menu) li a .fa {
        color: currentColor;
    }

    /* The template already renders the nested arrow icon. */
    #mu-menu .navbar-default .navbar-nav li.dropdown-submenu > a::after {
        content: none !important;
        display: none !important;
    }

    /* Nested dynamic groups reveal their items only when that group is active. */
    #mu-menu .navbar-default .navbar-nav li.dropdown-submenu > .dropdown-menu {
        display: none !important;
        left: 100%;
        top: 0;
    }

    @media (min-width: 768px) {
        #mu-menu .navbar-default .navbar-nav li.dropdown-submenu:hover > .dropdown-menu,
        #mu-menu .navbar-default .navbar-nav li.dropdown-submenu:focus-within > .dropdown-menu,
        #mu-menu .navbar-default .navbar-nav li.dropdown-submenu.is-submenu-active > .dropdown-menu {
            display: block !important;
        }
    }

    .mu-mega-menu-text {
        color: var(--submenu-text-color, var(--text-color));
        font-size: 13px;
        line-height: 1.55;
        margin: 0;
    }

    .mu-mega-menu-section-text {
        color: var(--submenu-muted-color, var(--text-muted-color));
        margin-bottom: 12px;
    }

    .mu-mega-content-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .mu-mega-content-list li {
        align-items: flex-start;
        color: var(--submenu-text-color, var(--text-color));
        display: flex;
        font-size: 13px;
        gap: 8px;
        line-height: 1.45;
        margin-bottom: 8px;
    }

    .mu-mega-content-list .fa {
        color: currentColor;
        flex: 0 0 14px;
        margin-top: 3px;
        text-align: center;
    }

    .mu-mega-content-list a {
        border: 0 !important;
        color: var(--submenu-text-color, var(--text-color));
        padding: 0 !important;
        text-decoration: none;
    }

    .mu-mega-content-list a:hover,
    .mu-mega-content-list a:focus {
        background: transparent;
        color: var(--submenu-hover-text-color, var(--primary-color));
    }

    .mu-mega-social-links {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }

    .mu-mega-social-links a {
        align-items: center;
        background: var(--primary-soft-color);
        border: 0 !important;
        border-radius: 50%;
        color: var(--primary-color);
        display: inline-flex;
        height: 32px;
        justify-content: center;
        padding: 0 !important;
        text-decoration: none;
        width: 32px;
    }

    .mu-mega-social-links a:hover,
    .mu-mega-social-links a:focus {
        background: var(--primary-color);
        color: var(--primary-contrast-color);
    }

    .mu-mega-content-button {
        background: var(--menu-button-bg-color);
        border: 1px solid var(--menu-button-border-color) !important;
        border-radius: 999px;
        color: var(--menu-button-text-color) !important;
        display: inline-flex;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        padding: 8px 14px !important;
        text-decoration: none;
    }

    .mu-mega-content-button:hover,
    .mu-mega-content-button:focus {
        background: var(--primary-hover-color);
        color: var(--primary-contrast-color) !important;
        text-decoration: none;
    }

    #mu-menu .navbar-default .navbar-nav li .mu-mega-menu .mu-mega-menu-section a:not(.mu-mega-content-button),
    #mu-menu .navbar-default .navbar-nav li .mu-mega-menu .mu-mega-content-list li,
    #mu-menu .navbar-default .navbar-nav li .mu-mega-menu .mu-mega-content-list span,
    #mu-menu .navbar-default .navbar-nav li .mu-mega-menu .mu-mega-menu-text {
        color: var(--submenu-text-color, var(--text-color)) !important;
    }

    #mu-menu .navbar-default .navbar-nav li .mu-mega-menu .mu-mega-menu-column h5 {
        color: var(--submenu-heading-color, var(--heading-color, var(--text-color))) !important;
    }

    #mu-menu .navbar-default .navbar-nav li .mu-mega-menu .mu-mega-menu-section-text {
        color: var(--submenu-muted-color, var(--text-muted-color)) !important;
    }

    #mu-menu .navbar-default .navbar-nav li .mu-mega-menu .mu-mega-menu-links a:hover,
    #mu-menu .navbar-default .navbar-nav li .mu-mega-menu .mu-mega-menu-links a:focus {
        background: var(--submenu-hover-bg, var(--primary-soft-color)) !important;
        color: var(--submenu-hover-text-color, var(--primary-color)) !important;
    }

    #mu-menu .navbar-default .navbar-nav li .mu-mega-menu .mu-mega-content-list a:hover,
    #mu-menu .navbar-default .navbar-nav li .mu-mega-menu .mu-mega-content-list a:focus {
        background: transparent !important;
        color: var(--submenu-hover-text-color, var(--primary-color)) !important;
    }

    .mu-top-login-action {
        display: inline-flex !important;
        align-items: center;
        gap: 6px;
        margin-left: 8px;
        padding: 2px 10px !important;
        border: 1px solid currentColor;
        border-radius: 999px;
        color: inherit;
        font-size: 13px;
        font-weight: 600;
        line-height: 1.2;
        text-decoration: none;
        text-transform: none;
        vertical-align: middle;
    }

    .mu-top-login-action:hover,
    .mu-top-login-action:focus {
        color: inherit;
        text-decoration: none;
    }

    .mu-top-login-action .fa {
        font-size: 12px;
        line-height: 1;
    }

    #mu-header .mu-header-top-left {
        align-items: center;
        display: flex;
        flex-wrap: nowrap;
        gap: 12px;
        line-height: 1;
        min-width: 0;
    }

    #mu-header .mu-header-area {
        padding-bottom: 4px;
        padding-top: 4px;
    }

    #mu-header .mu-header-top-left {
        justify-content: flex-start;
    }

    #mu-header .mu-header-top-right {
        align-items: center;
        display: inline-flex;
        float: left;
        justify-content: flex-end;
        gap: 8px;
        text-align: right;
        width: 100%;
    }

    #mu-header .mu-header-top-right nav {
        display: inline-flex;
        line-height: 1;
    }

    #mu-header .mu-top-email,
    #mu-header .mu-top-phone {
        align-items: center;
        display: inline-flex;
        min-width: 0;
        line-height: 1;
        white-space: nowrap;
    }

    #mu-header .mu-top-email a,
    #mu-header .mu-top-phone a {
        overflow: hidden;
        text-overflow: ellipsis;
    }

    #mu-header .mu-top-social-nav {
        white-space: nowrap;
    }

    #mu-menu .navbar-header .navbar-brand.theme-brand-logo {
        --theme-brand-logo-height: 48px;
        --theme-brand-logo-max-width: 190px;
        --theme-brand-logo-square-size: 48px;
        align-items: center;
        display: inline-flex;
        float: left;
        height: auto;
        line-height: 1.2;
        min-height: 70px;
        padding-bottom: 10px;
        padding-top: 10px;
        text-transform: none;
    }

    #mu-menu .navbar-header .navbar-brand.theme-brand-logo .theme-brand-logo__image {
        object-fit: contain;
    }

    #mu-menu .navbar-header .navbar-brand.theme-brand-logo .theme-brand-logo__text {
        margin-left: 0;
    }

    @media (max-width: 767px) {
        #mu-menu .navbar-header .navbar-brand.theme-brand-logo {
            --theme-brand-logo-mobile-height: 40px;
            --theme-brand-logo-mobile-max-width: 145px;
            --theme-brand-logo-mobile-square-size: 54px;
            min-height: 52px;
            padding-bottom: 6px;
            padding-top: 6px;
        }

        .mu-mega-menu {
            box-shadow: none;
            left: auto;
            min-width: 100%;
            right: auto;
            transform: none;
            width: 100%;
        }

        #mu-header .mu-header-top-left {
            flex-wrap: wrap;
            gap: 8px;
        }

        #mu-menu .navbar-default .navbar-nav .open li.dropdown-submenu > .dropdown-menu {
            display: none !important;
            left: auto;
            position: static;
            width: 100%;
        }

        #mu-menu .navbar-default .navbar-nav .open li.dropdown-submenu.open > .dropdown-menu {
            display: block !important;
        }
    }
/* Admission breadcrumb */
.adm-bc { padding: 8px 0 10px; }
.adm-bc ol { display: flex; align-items: center; flex-wrap: wrap; list-style: none; margin: 0; padding: 0; font-size: var(--text-sm, 13px); }
.adm-bc li { display: flex; align-items: center; }
.adm-bc li:not(:last-child)::after { content: '/'; margin: 0 7px; color: var(--text-muted-color, #999); font-size: 11px; }
.adm-bc a { color: var(--primary-color); text-decoration: none; }
.adm-bc a:hover { text-decoration: underline; }
.adm-bc li[aria-current="page"] { color: var(--text-muted-color, #666); font-weight: 500; }

/* Default theme admission page */
.admission-page {
    background: var(--bg-color);
    color: var(--text-color);
    font-family: var(--body-font-family);
    --admission-label-color: var(--accent-color, var(--primary-color));
    --admission-label-hover-color: var(--accent-hover-color, var(--primary-hover-color));
    --admission-soft-shadow: 0 12px 30px color-mix(in srgb, var(--text-color), transparent 92%);
    --admission-hover-shadow: 0 18px 38px color-mix(in srgb, var(--text-color), transparent 88%);
}
.admission-page :where(p, li, a, span, input, button, summary, details, td, th) {
    font-family: var(--body-font-family);
}
.admission-page :where(h1, h2, h3, h4, h5, h6) {
    font-family: var(--header-font-family);
}
.admission-hero {
    background: linear-gradient(135deg, color-mix(in srgb, var(--primary-color), transparent 88%), var(--bg-alt-color));
    border-bottom: 1px solid var(--border-color);
    padding: 54px 0 38px;
}
.admission-hero-grid {
    align-items: stretch;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr) 330px;
}
.admission-eyebrow,
.admission-section-heading span,
.admission-bottom-cta span,
.admission-action-card > span {
    color: var(--admission-label-color);
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0;
    text-transform: uppercase;
}
.admission-hero-copy h1,
.admission-section-heading h2,
.admission-bottom-cta h2,
.admission-action-card h2 {
    color: var(--heading-color, var(--text-color));
    font-family: var(--header-font-family);
    line-height: 1.18;
    margin: 0;
}
.admission-hero-copy h1 {
    font-size: 42px;
    margin-top: 10px;
    max-width: 760px;
}
.admission-hero-copy p,
.admission-hero-panel p,
.admission-action-card p,
.admission-bottom-cta p {
    color: var(--text-muted-color);
    line-height: 1.7;
    margin: 14px 0 0;
}
.admission-hero-copy p {
    font-size: 16px;
    max-width: 680px;
}
.admission-hero-actions,
.admission-bottom-cta {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}
.admission-hero-actions {
    margin-top: 24px;
}
.admission-intro-panel {
    align-items: center;
    background: linear-gradient(135deg, var(--surface-color), color-mix(in srgb, var(--primary-color), var(--surface-color) 94%));
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, 8px);
    box-shadow: var(--admission-soft-shadow);
    display: grid;
    gap: 18px;
    grid-template-columns: minmax(0, 1fr) auto;
    margin-bottom: 18px;
    padding: 24px;
}
.admission-intro-panel h2 {
    color: var(--heading-color, var(--text-color));
    font-family: var(--header-font-family);
    font-size: 28px;
    line-height: 1.25;
    margin: 6px 0 0;
}
.admission-intro-panel p {
    color: var(--text-muted-color);
    line-height: 1.7;
    margin: 10px 0 0;
    max-width: 760px;
}
.admission-intro-stat {
    align-items: center;
    color: var(--text-color);
    display: inline-flex;
    flex-wrap: wrap;
    font-size: 13px;
    gap: 8px;
    margin-top: 14px;
}
.admission-intro-stat i {
    color: var(--accent-color, var(--primary-color));
}
.admission-intro-stat span {
    color: var(--text-muted-color);
    font-weight: 700;
}
.admission-intro-stat strong {
    color: var(--accent-color, var(--primary-color));
    font-weight: 800;
}
.admission-course-type-badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
}
.admission-course-type-badge {
    align-items: center;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: 999px;
    color: var(--text-color);
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 6px;
    line-height: 1;
    padding: 6px 8px;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.admission-course-type-badge:hover,
.admission-course-type-badge:focus,
.admission-course-type-badge.active {
    background: var(--accent-color, var(--primary-color));
    border-color: var(--accent-color, var(--primary-color));
    color: var(--accent-contrast-color, var(--primary-contrast-color, #fff));
    text-decoration: none;
}
.admission-course-type-badge:hover strong,
.admission-course-type-badge:focus strong,
.admission-course-type-badge.active strong {
    background: var(--surface-color);
    color: var(--accent-color, var(--primary-color));
}
.admission-course-type-badge strong {
    align-items: center;
    background: color-mix(in srgb, var(--accent-color, var(--primary-color)), transparent 88%);
    border-radius: 999px;
    color: var(--accent-color, var(--primary-color));
    display: inline-flex;
    font-size: 11px;
    height: 20px;
    justify-content: center;
    min-width: 20px;
    padding: 0 6px;
}
.admission-intro-panel .admission-hero-actions {
    justify-content: flex-end;
    margin-top: 0;
}
.admission-btn {
    align-items: center;
    border-radius: var(--border-radius, 8px);
    display: inline-flex;
    font-size: var(--cta-font-size, 13px);
    font-weight: 800;
    gap: 8px;
    justify-content: center;
    line-height: 1;
    min-height: 42px;
    padding: 13px 16px;
    text-decoration: none;
    text-transform: uppercase;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.admission-btn:hover,
.admission-btn:focus {
    text-decoration: none;
    transform: translateY(-1px);
}

.admission-btn-primary {
    background: var(--cta-bg-color, var(--primary-color));
    border: 1px solid var(--cta-bg-color, var(--primary-color));
    color: var(--cta-text-color, var(--primary-contrast-color));
}
.admission-btn-primary:hover,
.admission-btn-primary:focus {
    background: var(--cta-hover-bg-color, var(--primary-hover-color));
    border-color: var(--cta-hover-bg-color, var(--primary-hover-color));
    color: var(--cta-hover-text-color, var(--primary-contrast-color));
}
.admission-bottom-cta .admission-btn-primary {
    background: transparent;
    border-color: var(--primary-contrast-color, #fff);
    color: var(--primary-contrast-color, #fff);
}
.admission-bottom-cta .admission-btn-primary:hover,
.admission-bottom-cta .admission-btn-primary:focus {
    background: var(--primary-contrast-color, #fff);
    border-color: var(--primary-contrast-color, #fff);
    color: var(--primary-color);
}
.admission-btn-secondary {
    background: transparent;
    border: 2px solid var(--secondary-color);
    color: var(--secondary-color);
}
.admission-btn-secondary:hover,
.admission-btn-secondary:focus {
    background: var(--secondary-color);
    border-color: var(--secondary-color);
    color: var(--secondary-contrast-color);
}
.admission-hero-panel,
.admission-panel,
.admission-action-card,
.admission-bottom-cta {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, 8px);
}
.admission-panel,
.admission-action-card,
.admission-bottom-cta {
    box-shadow: var(--admission-soft-shadow);
}
.admission-hero-panel {
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 24px;
}
.admission-hero-panel span {
    color: var(--text-muted-color);
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}
.admission-hero-panel strong {
    color: var(--primary-color);
    display: block;
    font-family: var(--header-font-family);
    font-size: 28px;
    line-height: 1.15;
    margin-top: 8px;
}
.admission-shell {
    padding: 28px 0 64px;
}
.admission-section-nav a,
.admission-course-card,
.admission-info-card,
.admission-step,
.admission-dates div,
.admission-faq details {
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, 8px);
    min-width: 0;
}
.admission-info-card > i,
.admission-step-icon {
    align-items: center;
    background: color-mix(in srgb, var(--primary-color), transparent 88%);
    border-radius: 50%;
    color: var(--primary-color);
    display: inline-flex;
    height: 32px;
    justify-content: center;
    width: 32px;
}
.admission-step-icon img {
    border-radius: 50%;
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.admission-course-card span,
.admission-step span,
.admission-dates time {
    color: var(--text-muted-color);
    display: block;
    font-size: 11px;
    font-weight: 800;
    margin-top: 10px;
    text-transform: uppercase;
}
.admission-section-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 22px;
}
.admission-content-shell--vertical {
    align-items: start;
    display: grid;
    gap: 24px;
    grid-template-columns: 260px minmax(0, 1fr);
}
.admission-content-shell--vertical .admission-menu-sidebar {
    align-self: start;
    position: sticky;
    top: 18px;
}
.admission-content-shell--vertical .admission-section-nav {
    flex-direction: column;
    margin-bottom: 14px;
}
.admission-section-nav--vertical a {
    justify-content: flex-start;
    width: 100%;
}
.admission-section-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin: 0 0 18px;
}
.admission-section-nav a {
    align-items: center;
    color: var(--text-color);
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    gap: 8px;
    padding: 10px 13px;
    text-decoration: none;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.admission-section-tabs button {
    align-items: center;
    background: var(--surface-color);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius, 8px);
    color: var(--text-color);
    cursor: pointer;
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    gap: 8px;
    padding: 10px 13px;
    text-transform: uppercase;
    transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
}
.admission-section-nav a:hover,
.admission-section-nav a:focus,
.admission-section-nav a.active,
.admission-section-tabs button:hover,
.admission-section-tabs button:focus,
.admission-section-tabs button.active {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-contrast-color);
    text-decoration: none;
    transform: translateY(-1px);
}
.admission-layout {
    align-items: start;
    display: grid;
    gap: 24px;
    grid-template-columns: minmax(0, 1fr) 300px;
}
.admission-layout--no-aside {
    grid-template-columns: minmax(0, 1fr);
}
.admission-main {
    display: grid;
    gap: 22px;
    min-width: 0;
}
.admission-panel {
    overflow: hidden;
    padding: 24px;
}
.admission-section-heading {
    border-bottom: 1px solid var(--border-color);
    margin-bottom: 18px;
    padding-bottom: 14px;
}
.admission-section-heading h2 {
    font-size: 24px;
    margin-top: 5px;
}
.admission-course-grid,
.admission-info-grid,
.admission-steps,
.admission-dates {
    display: grid;
    gap: 14px;
}
.admission-course-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}
.admission-info-grid {
    grid-template-columns: 1fr;
}
.admission-steps,
.admission-dates {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}
.admission-course-card,
.admission-info-card,
.admission-offered-course-card,
.admission-step,
.admission-dates div {
    padding: 18px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}
.admission-course-card:hover,
.admission-info-card:hover,
.admission-offered-course-card:hover,
.admission-step:hover {
    border-color: var(--primary-color);
    box-shadow: var(--admission-hover-shadow);
    transform: translateY(-2px);
}
.admission-course-card h3,
.admission-info-card h3,
.admission-step h3,
.admission-dates strong {
    color: var(--heading-color, var(--text-color));
    font-family: var(--header-font-family);
    line-height: 1.3;
    margin: 0;
}
.admission-course-card h3 {
    font-size: 19px;
    margin-top: 6px;
}
.admission-course-meta,
.admission-step p,
.admission-dates span {
    color: var(--text-muted-color);
    font-size: 13px;
    line-height: 1.6;
}
.admission-course-meta {
    margin: 12px 0;
}
.admission-course-meta p {
    margin: 0 0 5px;
}
.admission-offered-course-meta {
    color: var(--text-muted-color);
    font-size: 12px;
    line-height: 1.32;
    margin: 6px 0 7px;
}
.admission-offered-course-meta p {
    margin: 0 0 2px;
}
.admission-offered-course-card .default-course-card-link {
    font-size: 12px;
    margin-top: auto;
}
.admission-offered-courses-grid,
.default-courses-grid.admission-offered-courses-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 20px;
}
.admission-offered-courses-grid > .dco-item {
    display: flex;
}
.admission-offered-course-card--horizontal {
    align-items: stretch;
    display: flex;
    flex-direction: row;
    min-height: 180px;
    overflow: hidden;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
    width: 100%;
}
.admission-offered-course-card--horizontal:hover {
    border-color: var(--primary-color);
    box-shadow: var(--admission-hover-shadow);
}
.admission-offered-course-card--horizontal .admission-offered-course-image {
    box-sizing: border-box;
    flex: 0 0 38%;
    height: auto;
    max-width: 38%;
    min-height: 180px;
    min-width: 38%;
    width: 38%;
}
.admission-offered-course-card .default-course-card-badge {
    display: none;
}
.admission-offered-course-card .dco-type-label {
    color: var(--admission-label-color);
    display: inline-block;
    font-size: 11px;
    font-weight: 800;
    text-transform: uppercase;
}
.admission-offered-course-card .default-course-card-title a {
    color: var(--heading-color, var(--text-color));
    text-decoration: none;
}
.admission-offered-course-card .default-course-card-title a:hover {
    color: var(--admission-label-hover-color);
}
.admission-offered-course-card--horizontal .default-course-card-img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}
.admission-offered-course-body {
    box-sizing: border-box;
    display: flex;
    flex: 0 0 62%;
    flex-direction: column;
    height: auto;
    justify-content: center;
    max-width: 62%;
    min-width: 62%;
    overflow: hidden;
    padding: 16px 18px;
    width: 62%;
}
.admission-offered-course-card .default-course-card-title {
    font-size: 15px;
    line-height: 1.25;
    margin-bottom: 6px;
}
.admission-offered-course-card .dco-type-label {
    margin-bottom: 4px;
}
.admission-offered-course-main {
    min-width: 0;
}
.admission-offered-course-action {
    align-items: center;
    display: flex;
    justify-content: flex-start;
    margin-top: 4px;
}
.admission-course-card a,
.admission-link-action {
    align-items: center;
    color: var(--primary-color);
    display: inline-flex;
    font-size: 13px;
    font-weight: 800;
    gap: 7px;
    text-decoration: none;
    text-transform: uppercase;
}
.admission-course-card a:hover,
.admission-link-action:hover {
    color: var(--primary-hover-color);
    text-decoration: none;
}
.admission-info-card > i,
.admission-step-icon {
    margin-bottom: 12px;
}
.admission-info-card {
    box-shadow: 0 8px 20px color-mix(in srgb, var(--text-color), transparent 94%);
}
.admission-info-card h3,
.admission-step h3 {
    font-size: 17px;
    margin-bottom: 10px;
}
.admission-info-card .theme-rich-text {
    color: var(--text-color);
    font-size: 14px;
    line-height: 1.65;
}
.admission-info-card .theme-rich-text :where(p, ul, ol) {
    margin-bottom: 10px;
}
.admission-info-card .theme-rich-text :where(ul, ol) {
    padding-left: 20px;
}
.admission-step {
    position: relative;
}
.admission-step span,
.admission-dates time {
    margin-top: 0;
}
.admission-step p,
.admission-dates span {
    margin: 8px 0 0;
}
.admission-dates strong {
    display: block;
    font-size: 16px;
    margin-top: 6px;
}
.admission-dates div {
    background: linear-gradient(180deg, color-mix(in srgb, var(--secondary-color), var(--surface-color) 94%), var(--surface-color));
}
.admission-faq details {
    margin-bottom: 10px;
    overflow: hidden;
}
.admission-faq summary {
    color: var(--text-color);
    cursor: pointer;
    font-weight: 800;
    list-style: none;
    padding: 15px 16px;
    position: relative;
}
.admission-faq summary::after {
    color: var(--primary-color);
    content: "+";
    font-size: 18px;
    font-weight: 800;
    position: absolute;
    right: 16px;
    top: 12px;
}
.admission-faq details[open] summary::after {
    content: "-";
}
.admission-faq summary::-webkit-details-marker {
    display: none;
}
.admission-faq p {
    border-top: 1px solid var(--border-color);
    color: var(--text-muted-color);
    line-height: 1.65;
    margin: 0;
    padding: 14px 16px 16px;
}
.admission-action-card {
    background: linear-gradient(180deg, color-mix(in srgb, var(--secondary-color), var(--surface-color) 92%), var(--surface-color));
    padding: 22px;
    position: sticky;
    top: 84px;
}
.admission-action-card h2 {
    font-size: 24px;
    margin-top: 8px;
}
.admission-action-card .admission-btn {
    margin-top: 12px;
    width: 100%;
}
.admission-link-action {
    margin-top: 16px;
}
.admission-bottom-cta {
    background: linear-gradient(135deg, var(--primary-color), var(--secondary-color));
    border-color: var(--primary-color);
    color: var(--primary-contrast-color);
    justify-content: space-between;
    margin-top: 24px;
    padding: 26px;
}
.admission-bottom-cta span,
.admission-bottom-cta h2,
.admission-bottom-cta p {
    color: var(--primary-contrast-color);
}
.admission-bottom-cta h2 {
    font-size: 28px;
    margin-top: 5px;
}
.admission-empty,
.admission-note {
    background: var(--bg-alt-color);
    border: 1px dashed var(--border-color);
    border-radius: var(--border-radius, 8px);
    color: var(--text-muted-color);
    padding: 18px;
}
.admission-fee-table-wrap {
    overflow-x: auto;
}
.admission-fee-table {
    border-collapse: collapse;
    min-width: 680px;
    width: 100%;
}
.admission-fee-table th,
.admission-fee-table td {
    border: 1px solid var(--border-color);
    color: var(--text-color);
    padding: 12px;
    text-align: left;
}
.admission-fee-table th {
    background: var(--primary-color);
    color: var(--primary-contrast-color);
    font-size: 12px;
    text-transform: uppercase;
}
.admission-fee-table tr.is-total td {
    background: color-mix(in srgb, var(--primary-color), transparent 90%);
    font-weight: 800;
}
.admission-note {
    margin: 16px 0 0;
}
@media (prefers-reduced-motion: reduce) {
    .admission-btn,
    .admission-course-card,
    .admission-info-card,
    .admission-step {
        transition: none;
    }
    .admission-btn:hover,
    .admission-course-card:hover,
    .admission-info-card:hover,
    .admission-step:hover {
        transform: none;
    }
}
@media (max-width: 991px) {
    .admission-hero-grid,
    .admission-intro-panel,
    .admission-content-shell--vertical,
    .admission-layout {
        grid-template-columns: 1fr;
    }
    .admission-content-shell--vertical .admission-menu-sidebar {
        position: static;
    }
    .admission-action-card {
        position: static;
    }
}
@media (max-width: 767px) {
    .admission-hero {
        padding: 38px 0 28px;
    }
    .admission-hero-copy h1 {
        font-size: 30px;
    }
    .admission-course-grid,
    .admission-info-grid,
    .admission-steps,
    .admission-dates {
        grid-template-columns: 1fr;
    }
    .admission-section-nav {
        flex-wrap: nowrap;
        margin-left: -15px;
        margin-right: -15px;
        overflow-x: auto;
        padding: 0 15px 4px;
    }
    .admission-section-tabs {
        flex-wrap: nowrap;
        margin-left: -15px;
        margin-right: -15px;
        overflow-x: auto;
        padding: 0 15px 4px;
    }
    .admission-section-nav a,
    .admission-section-tabs button {
        flex: 0 0 auto;
    }
    .admission-section-nav--vertical {
        flex-wrap: wrap;
        margin-left: 0;
        margin-right: 0;
        overflow-x: visible;
        padding: 0;
    }
    .admission-section-nav--vertical a {
        flex: 1 1 100%;
    }
    .admission-content-shell--vertical .admission-section-nav {
        margin-bottom: 16px;
    }
    .admission-panel,
    .admission-bottom-cta,
    .admission-action-card,
    .admission-hero-panel {
        padding: 20px;
    }
    .admission-bottom-cta .admission-btn,
    .admission-intro-panel .admission-btn,
    .admission-hero-actions .admission-btn {
        width: 100%;
    }
    .admission-intro-panel .admission-hero-actions {
        justify-content: stretch;
    }
    .admission-offered-courses-grid,
    .default-courses-grid.admission-offered-courses-grid {
        grid-template-columns: 1fr;
    }
    .admission-offered-course-card--horizontal {
        flex-direction: column;
        min-height: unset;
    }
    .admission-offered-course-card--horizontal .admission-offered-course-image {
        flex: 0 0 auto;
        height: 200px;
        max-width: 100%;
        min-height: 0;
        min-width: 0;
        width: 100%;
    }
    .admission-offered-course-body {
        flex: 1 1 auto;
        max-width: 100%;
        min-width: 0;
        padding: 14px 16px;
        width: 100%;
    }
    .admission-offered-course-action {
        justify-content: flex-start;
    }
}
/* Shared footer scheme token rules */
.footer-scheme-light {
    --footer-bg: var(--surface-color);
    --footer-bottom-bg: var(--bg-alt-color);
    --footer-heading-color: var(--text-color);
    --footer-text-color: var(--text-color);
    --footer-muted-color: var(--text-muted-color);
    --footer-link-color: var(--text-color);
    --footer-link-hover-color: var(--primary-color);
    --footer-link-hover-bg: var(--primary-soft-color);
    --footer-border-color: var(--border-color);
}

.footer-scheme-dark {
    --footer-bg: var(--text-color);
    --footer-bottom-bg: color-mix(in srgb, var(--text-color), var(--bg-color) 8%);
    --footer-heading-color: var(--bg-color);
    --footer-text-color: var(--bg-color);
    --footer-muted-color: color-mix(in srgb, var(--bg-color), var(--text-color) 22%);
    --footer-link-color: var(--bg-color);
    --footer-link-hover-color: var(--primary-color);
    --footer-link-hover-bg: color-mix(in srgb, var(--bg-color), transparent 90%);
    --footer-border-color: color-mix(in srgb, var(--bg-color), transparent 82%);
}

.footer-scheme-brand {
    --footer-bg: var(--primary-color);
    --footer-bottom-bg: var(--primary-hover-color);
    --footer-heading-color: var(--primary-contrast-color);
    --footer-text-color: var(--primary-contrast-color);
    --footer-muted-color: color-mix(in srgb, var(--primary-contrast-color), var(--primary-color) 22%);
    --footer-link-color: var(--primary-contrast-color);
    --footer-link-hover-color: var(--accent-color);
    --footer-link-hover-bg: color-mix(in srgb, var(--primary-contrast-color), transparent 90%);
    --footer-border-color: color-mix(in srgb, var(--primary-contrast-color), transparent 82%);
}

.footer-scheme-contrast {
    --footer-bg: var(--secondary-color);
    --footer-bottom-bg: var(--secondary-hover-color);
    --footer-heading-color: var(--secondary-contrast-color);
    --footer-text-color: var(--secondary-contrast-color);
    --footer-muted-color: color-mix(in srgb, var(--secondary-contrast-color), var(--secondary-color) 22%);
    --footer-link-color: var(--secondary-contrast-color);
    --footer-link-hover-color: var(--secondary-contrast-color);
    --footer-link-hover-bg: color-mix(in srgb, var(--secondary-contrast-color), transparent 90%);
    --footer-border-color: color-mix(in srgb, var(--secondary-contrast-color), transparent 82%);
}

.footer-scheme-custom {
    --footer-bg: var(--footer-custom-bg, var(--text-color));
    --footer-bottom-bg: color-mix(in srgb, var(--footer-custom-bg, var(--text-color)), var(--bg-color) 8%);
    --footer-heading-color: var(--header-footer-foreground);
    --footer-text-color: var(--header-footer-foreground);
    --footer-muted-color: var(--header-footer-muted);
    --footer-link-color: var(--header-footer-foreground);
    --footer-link-hover-color: var(--accent-color);
    --footer-link-hover-bg: color-mix(in srgb, var(--header-footer-foreground), transparent 90%);
    --footer-border-color: color-mix(in srgb, var(--header-footer-foreground), transparent 82%);
}
/* Default theme footer styles */
#mu-footer .mu-footer-top {
        background: var(--footer-bg) !important;
        color: var(--footer-text-color) !important;
        padding: 56px 0 34px;
    }

    #mu-footer .mu-footer-bottom {
        background: var(--footer-bottom-bg) !important;
        border-top: 1px solid var(--footer-border-color);
        color: var(--footer-text-color) !important;
        padding: 16px 0;
    }

    #mu-footer .mu-footer-top-area {
        padding: 0;
    }

    #mu-footer .mu-footer-widget {
        margin-bottom: 28px;
        min-width: 0;
    }

    #mu-footer .mu-footer-widget h4,
    #mu-footer .mu-footer-widget h4 a {
        color: var(--footer-heading-color) !important;
        font-size: 15px;
        font-weight: 700;
        letter-spacing: 0;
        line-height: 1.3;
        margin: 0 0 16px;
        padding-bottom: 10px;
        position: relative;
        text-transform: uppercase;
    }

    #mu-footer .mu-footer-widget h4::after {
        background: var(--footer-link-hover-color);
        bottom: 0;
        content: "";
        height: 2px;
        left: 0;
        position: absolute;
        width: 36px;
    }

    #mu-footer .mu-footer-widget p,
    #mu-footer .mu-footer-widget address,
    #mu-footer .mu-footer-widget address p,
    #mu-footer .mu-footer-widget li,
    #mu-footer .mu-footer-widget span,
    #mu-footer .mu-footer-bottom p {
        color: var(--footer-muted-color) !important;
        font-size: 14px;
        line-height: 1.65;
    }

    #mu-footer .mu-footer-widget ul {
        list-style: none;
        margin: 0;
        padding: 0;
    }

    #mu-footer .mu-footer-widget li + li {
        margin-top: 6px;
    }

    #mu-footer .mu-footer-widget a,
    #mu-footer .mu-footer-bottom a {
        border-radius: 4px;
        color: var(--footer-link-color) !important;
        display: inline-flex;
        line-height: 1.45;
        padding: 2px 0;
        text-decoration: none;
        transition: background-color 0.2s ease, color 0.2s ease, padding-left 0.2s ease;
    }

    #mu-footer .mu-footer-widget a:hover,
    #mu-footer .mu-footer-widget a:focus,
    #mu-footer .mu-footer-bottom a:hover,
    #mu-footer .mu-footer-bottom a:focus {
        color: var(--footer-link-hover-color) !important;
        text-decoration: none;
    }

    #mu-footer .mu-footer-widget ul a:hover,
    #mu-footer .mu-footer-widget ul a:focus {
        background: var(--footer-link-hover-bg);
        padding-left: 8px;
    }

    #mu-footer .mu-subscribe-form input[type="email"] {
        background: var(--footer-input-bg-color);
        border-color: var(--footer-input-border-color);
        color: var(--footer-input-text-color);
    }

    #mu-footer .mu-footer-bottom-area {
        text-align: center;
    }

    #mu-footer .mu-footer-bottom-area p {
        margin: 0;
    }

/* Default theme Home CTA section */
.default-cta-section {
    background: var(--home-section-bg, var(--bg-color)) !important;
    clear: both;
    color: var(--home-section-text, var(--text-color));
    display: block;
    float: none;
    overflow: hidden;
    padding: 76px 0 !important;
    position: relative;
    width: 100%;
}

.default-cta-section::before {
    background: color-mix(in srgb, var(--accent-color), transparent 94%);
    border-radius: 50%;
    content: "";
    height: 360px;
    position: absolute;
    right: max(-130px, -8vw);
    top: 50%;
    transform: translateY(-50%);
    width: 360px;
}

.default-cta-section .default-cta-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    margin-left: 0;
    margin-right: 0;
    min-height: 320px;
    position: relative;
    width: 100%;
}
.default-cta-section .default-cta-row--image-left {
    flex-direction: row-reverse;
}
.default-cta-section .default-cta-row--image-left .default-cta-copy {
    padding-left: 44px;
    padding-right: 15px;
}

.default-cta-section .default-cta-copy,
.default-cta-section .default-cta-visual {
    flex: 0 0 50%;
    float: none;
    max-width: 50%;
    min-width: 0;
    position: relative;
}

.default-cta-section .default-cta-copy {
    padding: 8px 44px 8px 15px;
    z-index: 2;
}

.default-cta-section .default-cta-copy h2 {
    color: var(--home-section-heading, var(--heading-color, var(--text-color)));
    font-size: clamp(26px, 2.8vw, 36px);
    font-weight: 700;
    line-height: 1.28;
    margin: 0;
    max-width: 620px;
}

.default-cta-section .default-cta-copy p {
    color: var(--home-section-muted, var(--text-muted-color));
    font-size: 16px;
    line-height: 1.72;
    margin: 14px 0 0;
    max-width: 580px;
}

.default-cta-section .default-cta-action {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: flex-start;
    margin-top: 24px;
}

.default-cta-section .default-cta-button {
    align-items: center;
    background: var(--cta-bg-color, var(--primary-color));
    border: 1px solid var(--cta-bg-color, var(--primary-color));
    border-radius: var(--border-radius);
    color: var(--cta-text-color, var(--primary-contrast-color));
    gap: 10px;
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    justify-content: center;
    line-height: 1.2;
    min-height: 46px;
    min-width: 158px;
    padding: 13px 20px;
    text-decoration: none;
    transition: background-color 0.25s ease, border-color 0.25s ease, color 0.25s ease, gap 0.25s ease, transform 0.25s ease;
    white-space: normal;
}

.default-cta-section .default-cta-button:hover,
.default-cta-section .default-cta-button:focus {
    background: var(--cta-hover-bg-color, var(--primary-hover-color));
    border-color: var(--cta-hover-bg-color, var(--primary-hover-color));
    color: var(--cta-hover-text-color, var(--primary-contrast-color));
    gap: 14px;
    text-decoration: none;
}

.default-cta-section .default-cta-button i {
    font-size: 18px;
    line-height: 1;
    transition: transform 0.25s ease;
}

.default-cta-section .default-cta-button:hover i,
.default-cta-section .default-cta-button:focus i {
    transform: translateX(3px);
}

.default-cta-section .default-cta-button {
    background: var(--cta-bg-color, var(--primary-color));
    border-color: var(--cta-bg-color, var(--primary-color));
    color: var(--cta-text-color, var(--primary-contrast-color));
}

.default-cta-section .default-cta-button:hover,
.default-cta-section .default-cta-button:focus {
    background: var(--cta-hover-bg-color, var(--primary-hover-color));
    border-color: var(--cta-hover-bg-color, var(--primary-hover-color));
    color: var(--cta-hover-text-color, var(--primary-contrast-color));
}

.default-cta-section .default-cta-visual {
    align-items: center;
    display: flex;
    justify-content: center;
    min-height: 280px;
    opacity: 0.96;
    padding: 24px 15px;
    z-index: 1;
}

.default-cta-section .default-cta-image-wrap {
    border-radius: 10px;
    max-width: 420px;
    overflow: hidden;
    width: 100%;
}
.default-cta-section .default-cta-video-wrap {
    max-width: 560px;
    position: relative;
}

.default-cta-section .default-cta-image {
    border-radius: 10px;
    display: block;
    height: 100%;
    max-height: 320px;
    object-fit: cover;
    width: 100%;
}
.default-cta-section .default-cta-video {
    border-radius: 10px;
    display: block;
    height: auto;
    max-height: 460px;
    width: 100%;
}

.default-cta-section .default-cta-education-mark {
    height: 230px;
    max-width: 360px;
    position: relative;
    width: 100%;
}

.default-cta-section .default-cta-education-mark::before {
    background: color-mix(in srgb, var(--accent-color), transparent 92%);
    border: 1px solid color-mix(in srgb, var(--accent-color), transparent 78%);
    border-radius: 50%;
    content: "";
    height: 210px;
    left: 50%;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 210px;
}

.default-cta-section .default-cta-book {
    background: var(--home-section-surface, var(--surface-color));
    border: 2px solid color-mix(in srgb, var(--accent-color), var(--home-section-border, var(--border-color)) 45%);
    bottom: 38px;
    height: 90px;
    position: absolute;
    width: 122px;
}

.default-cta-section .default-cta-book-left {
    border-radius: 6px 0 0 6px;
    left: 57px;
    transform: skewY(8deg);
}

.default-cta-section .default-cta-book-right {
    border-radius: 0 6px 6px 0;
    right: 57px;
    transform: skewY(-8deg);
}

.default-cta-section .default-cta-book::before,
.default-cta-section .default-cta-book::after {
    background: color-mix(in srgb, var(--accent-color), transparent 50%);
    content: "";
    height: 2px;
    left: 22px;
    position: absolute;
    right: 22px;
}

.default-cta-section .default-cta-book::before {
    top: 28px;
}

.default-cta-section .default-cta-book::after {
    top: 48px;
}

.default-cta-section .default-cta-cap {
    height: 112px;
    left: 50%;
    position: absolute;
    top: 40px;
    transform: translateX(-50%);
    width: 140px;
}

.default-cta-section .default-cta-cap::before {
    background: color-mix(in srgb, var(--accent-color), #111 22%);
    clip-path: polygon(50% 0%, 100% 36%, 50% 72%, 0% 36%);
    content: "";
    height: 110px;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
}

.default-cta-section .default-cta-cap::after {
    background: color-mix(in srgb, var(--accent-color), #0a0a0a 38%);
    border-radius: 3px 3px 10px 10px;
    box-shadow: 0 6px 18px color-mix(in srgb, var(--accent-color), transparent 68%);
    content: "";
    height: 38px;
    left: 50%;
    position: absolute;
    top: 62px;
    transform: translateX(-50%);
    width: 52px;
}

.default-cta-section .default-cta-cap .default-cta-tassel {
    background: color-mix(in srgb, var(--accent-color), #f8f3cf 48%);
    border-radius: 999px;
    height: 46px;
    position: absolute;
    right: 5px;
    top: 36px;
    width: 2px;
    z-index: 1;
}

.default-cta-section .default-cta-cap .default-cta-tassel::after {
    background: color-mix(in srgb, var(--accent-color), #f8f3cf 48%);
    border-radius: 50%;
    bottom: -1px;
    content: "";
    height: 8px;
    left: -3px;
    position: absolute;
    width: 8px;
}

.default-cta-section .default-cta-line {
    background: color-mix(in srgb, var(--home-section-muted, var(--text-muted-color)), transparent 46%);
    height: 1px;
    position: absolute;
    right: 0;
    width: 80px;
}

.default-cta-section .default-cta-line-one {
    top: 70px;
}

.default-cta-section .default-cta-line-two {
    top: 96px;
    width: 112px;
}

.default-cta-section .default-cta-dot {
    background: var(--accent-color);
    border-radius: 50%;
    height: 10px;
    position: absolute;
    width: 10px;
}

.default-cta-section .default-cta-dot-one {
    left: 28px;
    top: 56px;
}

.default-cta-section .default-cta-dot-two {
    bottom: 42px;
    right: 28px;
}

.default-cta-instance-2::before {
    background: color-mix(in srgb, var(--secondary-color), transparent 93%);
    left: max(-140px, -9vw);
    right: auto;
}

.default-cta-instance-2 .default-cta-education-mark {
    transform: rotate(3deg);
}

.default-cta-instance-2 .default-cta-cap::after,
.default-cta-instance-2 .default-cta-dot {
    background: var(--secondary-color);
}

.default-cta-instance-2 .default-cta-cap::before {
    background: var(--secondary-color);
}

.default-cta-instance-2 .default-cta-cap .default-cta-tassel,
.default-cta-instance-2 .default-cta-cap .default-cta-tassel::after {
    background: color-mix(in srgb, var(--secondary-color), #f8f3cf 42%);
}

.default-cta-instance-3::before {
    background: color-mix(in srgb, var(--primary-color), transparent 92%);
    height: 300px;
    right: max(-100px, -6vw);
    width: 300px;
}

.default-cta-instance-3 .default-cta-education-mark {
    transform: rotate(-3deg) scale(0.96);
}

.default-cta-instance-3 .default-cta-book {
    border-color: color-mix(in srgb, var(--primary-color), var(--home-section-border, var(--border-color)) 35%);
}

.default-cta-instance-3 .default-cta-line {
    background: color-mix(in srgb, var(--primary-color), transparent 42%);
}

.default-cta-instance-3 .default-cta-cap::before {
    background: color-mix(in srgb, var(--primary-color), #111 22%);
}

.default-cta-instance-3 .default-cta-cap::after {
    background: color-mix(in srgb, var(--primary-color), #0a0a0a 38%);
    box-shadow: 0 6px 18px color-mix(in srgb, var(--primary-color), transparent 68%);
}

.default-cta-instance-3 .default-cta-cap .default-cta-tassel,
.default-cta-instance-3 .default-cta-cap .default-cta-tassel::after {
    background: color-mix(in srgb, var(--primary-color), #f8f3cf 48%);
}

@media (max-width: 767px) {
    .default-cta-section {
        padding: 54px 0 !important;
    }

    .default-cta-section::before {
        height: 240px;
        left: auto;
        right: -120px;
        top: auto;
        bottom: 8px;
        transform: none;
        width: 240px;
    }

    .default-cta-section .default-cta-row {
        min-height: 0;
    }

    .default-cta-section .default-cta-copy,
    .default-cta-section .default-cta-visual {
        flex: 0 0 100%;
        max-width: 100%;
    }

    .default-cta-section .default-cta-copy {
        padding: 0 15px;
    }

    .default-cta-section .default-cta-copy h2 {
        font-size: 24px;
    }

    .default-cta-section .default-cta-action {
        justify-content: flex-start;
        margin-top: 20px;
    }

    .default-cta-section .default-cta-button {
        width: 100%;
    }

    .default-cta-section .default-cta-visual {
        min-height: 220px;
        padding: 34px 15px 0;
    }

    .default-cta-section .default-cta-education-mark {
        height: 200px;
        max-width: 300px;
    }

    .default-cta-section .default-cta-education-mark::before {
        height: 176px;
        width: 176px;
    }

    .default-cta-section .default-cta-book {
        bottom: 34px;
        height: 74px;
        width: 98px;
    }

    .default-cta-section .default-cta-book-left {
        left: 48px;
    }

    .default-cta-section .default-cta-book-right {
        right: 48px;
    }

    .default-cta-section .default-cta-cap {
        top: 70px;
        width: 70px;
    }

    .default-cta-section .default-cta-cap::before {
        border-left-width: 68px;
        border-right-width: 68px;
        border-top-width: 28px;
    }

    .default-cta-section .default-cta-cap .default-cta-tassel {
        height: 40px;
        top: 0;
    }

    .default-cta-section .default-cta-cap .default-cta-tassel::after {
        top: 36px;
    }
}

/* ══════════════════════════════════════
   Default theme — About section
══════════════════════════════════════ */
#mu-about-us.default-about-section {
    background: var(--home-section-bg, var(--bg-color)) !important;
    clear: both;
    color: var(--home-section-text, var(--text-color));
    display: block;
    float: none;
    padding: 80px 0 80px !important;
    width: 100%;
}

/* ── Section heading ── */
.default-about-heading {
    margin-bottom: 52px;
}

.default-about-section h2 {
    color: var(--home-section-heading, var(--heading-color, var(--home-section-text, var(--text-color))));
    font-size: clamp(26px, 3vw, 32px);
    font-weight: 700;
    line-height: 1.22;
    margin: 0 0 12px;
}

/* ── Main body layout ── */
.default-about-body {
    align-items: flex-start;
    display: flex;
    gap: 52px;
}

.default-about-body--image-right {
    flex-direction: row-reverse;
}

.default-about-body--no-image .default-about-info {
    max-width: 820px;
    margin: 0 auto;
}

/* ── Image column ── */
.default-about-visual {
    align-self: flex-start;
    flex: 0 0 44%;
    max-width: 44%;
    position: relative;
}

.default-about-img-wrap {
    aspect-ratio: 4 / 3;
    border-radius: 14px;
    height: auto;
    min-height: 0;
    overflow: hidden;
    position: relative;
    width: 100%;
}

.default-about-img-wrap img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

/* ── Info column ── */
.default-about-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: flex-start;
    min-width: 0;
}

/* Lead text */
.default-about-lead {
    color: var(--home-section-text, var(--text-color));
    font-size: var(--text-md);
    font-weight: 600;
    line-height: 1.7;
    margin: 0 0 18px;
}

/* Body copy */
.default-about-copy,
.default-about-copy p {
    color: var(--home-section-muted, var(--text-muted-color));
    font-size: var(--text-base);
    line-height: 1.8;
}

.default-about-copy p {
    margin-bottom: 12px;
}

/* CTA button */
.default-about-cta {
    align-items: center;
    background: var(--primary-color);
    border-radius: var(--border-radius);
    color: var(--primary-contrast-color);
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    margin-bottom: 32px;
    margin-top: 6px;
    padding: 11px 22px;
    text-decoration: none;
    transition: background 0.2s ease, gap 0.2s ease;
    width: fit-content;
}

.default-about-cta:hover,
.default-about-cta:focus {
    background: var(--primary-hover-color);
    color: var(--primary-contrast-color);
    gap: 13px;
    text-decoration: none;
}

/* ── Pillars 2×2 grid ── */
.default-about-cta {
    background: var(--primary-color);
    border: 1px solid var(--primary-color);
    color: var(--primary-contrast-color);
}

.default-about-cta:hover,
.default-about-cta:focus {
    background: var(--primary-hover-color);
    border-color: var(--primary-hover-color);
    color: var(--primary-contrast-color);
}

.default-about-pillars {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    margin-top: 42px;
}

.default-about-pillar-icon {
    align-items: center;
    background: color-mix(in srgb, var(--primary-color), transparent 88%);
    border-radius: 8px;
    color: var(--primary-color);
    display: inline-flex;
    flex: 0 0 42px;
    font-size: var(--text-md);
    height: 42px;
    justify-content: center;
    width: 42px;
}

.default-about-pillar {
    align-items: flex-start;
    background: var(--home-section-surface, var(--surface-color));
    border: 1px solid var(--home-section-border, var(--border-color));
    border-radius: 8px;
    box-shadow: 0 10px 28px color-mix(in srgb, var(--text-color), transparent 94%);
    display: flex;
    gap: 14px;
    min-height: 180px;
    padding: 24px;
}

.default-about-pillar--wide {
    grid-column: 1 / -1;
    min-height: 0;
}

.default-about-pillar-body h3 {
    color: var(--home-section-heading, var(--heading-color, var(--home-section-text, var(--text-color))));
    font-size: 18px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0 0 8px;
}

.default-about-pillar-text,
.default-about-pillar-text p {
    color: var(--home-section-muted, var(--text-muted-color));
    font-size: 14px;
    line-height: 1.75;
    margin: 0;
}

/* ── Responsive ── */
.home-section-bg-dark #mu-about-us.default-about-section h2,
.home-section-bg-dark #mu-about-us.default-about-section .default-about-pillar-body h3,
/* Dark section overrides */
#mu-about-us.default-about-section.home-section-bg-dark h2,
#mu-about-us.default-about-section.home-section-bg-dark .default-about-pillar-body h3 {
    color: var(--home-section-text, var(--bg-color)) !important;
}

.home-section-bg-dark #mu-about-us.default-about-section .default-about-lead,
#mu-about-us.default-about-section.home-section-bg-dark .default-about-lead {
    color: var(--home-section-text, var(--bg-color));
}

.home-section-bg-dark #mu-about-us.default-about-section .default-about-copy,
.home-section-bg-dark #mu-about-us.default-about-section .default-about-copy p,
.home-section-bg-dark #mu-about-us.default-about-section .default-about-pillar-text,
.home-section-bg-dark #mu-about-us.default-about-section .default-about-pillar-text p,
#mu-about-us.default-about-section.home-section-bg-dark .default-about-copy,
#mu-about-us.default-about-section.home-section-bg-dark .default-about-copy p,
#mu-about-us.default-about-section.home-section-bg-dark .default-about-pillar-text,
#mu-about-us.default-about-section.home-section-bg-dark .default-about-pillar-text p {
    color: var(--home-section-muted, var(--text-muted-color));
}

.home-section-bg-dark #mu-about-us.default-about-section .default-about-pillar,
#mu-about-us.default-about-section.home-section-bg-dark .default-about-pillar {
    background: color-mix(in srgb, var(--bg-color), transparent 78%);
    border-color: var(--home-section-border, color-mix(in srgb, var(--bg-color), transparent 62%));
}

.home-section-bg-dark #mu-about-us.default-about-section .default-about-pillar,
#mu-about-us.default-about-section.home-section-bg-dark .default-about-pillar {
    box-shadow: none;
}

@media (max-width: 991px) {
    .default-about-body {
        align-items: stretch;
        flex-direction: column;
        gap: 36px;
    }

    .default-about-visual {
        flex: none;
        max-width: 100%;
        width: 100%;
    }

    .default-about-img-wrap {
        height: auto;
        min-height: 0;
    }

    .default-about-img-wrap img {
        height: 100%;
        object-fit: cover;
    }

}

@media (max-width: 767px) {
    #mu-about-us.default-about-section {
        padding: 64px 0 52px !important;
    }

    .default-about-section h2 {
        font-size: 25px;
    }

    .default-about-heading {
        margin-bottom: 36px;
    }

    .default-about-img-wrap {
        min-height: 0;
    }

    .default-about-pillars {
        grid-template-columns: 1fr;
    }

    .default-about-pillar {
        min-height: 0;
        padding: 18px;
    }

    .default-about-cta {
        margin-bottom: 24px;
    }
}

/*==================
 AWARDS JOURNEY ROADMAP
====================*/
#mu-awards.default-awards-section {
    clear: both;
    color: var(--home-section-text, var(--text-color));
    display: block;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    width: 100%;
}

/* ── Section heading ── */
.daj-header {
    margin-bottom: 52px;
}

.daj-header h2 {
    color: var(--home-section-heading, var(--heading-color, var(--home-section-text, var(--text-color))));
    font-size: clamp(26px, 3vw, 32px);
    font-weight: 700;
    margin-bottom: 12px;
}

/* ── Scroll wrapper ── */
.daj-scroll-outer {
    position: relative;
    overflow-x: auto;
    overflow-y: visible;
    padding: 0 48px 28px;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: thin;
    scrollbar-color: var(--primary-color) color-mix(in srgb, var(--primary-color), transparent 88%);
}

.daj-scroll-outer::-webkit-scrollbar { height: 4px; }
.daj-scroll-outer::-webkit-scrollbar-track { background: transparent; }
.daj-scroll-outer::-webkit-scrollbar-thumb {
    background: var(--primary-color);
    border-radius: 4px;
}

/* ── Roadmap shell ── */
.daj-roadmap {
    display: flex;
    flex-direction: column;
    min-width: max-content;
}

/* ── Top / bottom rows ── */
.daj-row {
    display: flex;
    align-items: stretch;
}

.daj-row--top {
    align-items: flex-end;
    min-height: 210px;
}

.daj-row--bottom {
    align-items: flex-start;
    min-height: 210px;
}

/* ── Columns ── */
.daj-col {
    flex: 0 0 230px;
    width: 230px;
    display: flex;
    justify-content: center;
    padding: 0 10px;
}

/* ── Cards ── */
.daj-card {
    background: var(--home-section-surface, var(--surface-color, var(--bg-color)));
    border: 1px solid var(--home-section-border, var(--border-color));
    border-radius: 14px;
    padding: 0;
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.28s ease, box-shadow 0.28s ease, border-color 0.28s ease;
    box-shadow: 0 2px 14px color-mix(in srgb, var(--primary-color), transparent 92%);
}

.daj-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 14px 14px 0 0;
}

.daj-card:hover {
    transform: translateY(-7px);
    box-shadow: 0 18px 44px color-mix(in srgb, var(--primary-color), transparent 72%);
    border-color: color-mix(in srgb, var(--primary-color), transparent 55%);
}

/* ── Card icon — top-half banner ── */
.daj-card-icon {
    width: 100%;
    height: 110px;
    border-radius: 0;
    background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color), var(--accent-color, #6c63ff) 50%));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.daj-card-icon .fa {
    color: rgba(255,255,255,0.92);
    font-size: 36px;
    filter: drop-shadow(0 2px 6px rgba(0,0,0,0.18));
}

.daj-card-icon img {
    width: 68px;
    height: 68px;
    object-fit: cover;
    border-radius: 12px;
    box-shadow: 0 4px 18px rgba(0,0,0,0.22);
}

/* ── Card body — data below icon ── */
.daj-card-body {
    padding: 14px 16px 16px;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* ── Year badge ── */
.daj-card-year {
    display: inline-block;
    background: var(--primary-color);
    color: var(--primary-contrast-color, #fff);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.08em;
    padding: 2px 10px;
    border-radius: 100px;
    margin-bottom: 8px;
    text-transform: uppercase;
}

/* ── Title ── */
.daj-card-title {
    font-size: var(--text-sm);
    font-weight: 700;
    line-height: 1.45;
    color: var(--home-section-heading, var(--heading-color, var(--home-section-text, var(--text-color))));
    margin: 0 0 7px;
}

/* ── Description ── */
.daj-card-desc {
    font-size: 12px;
    color: var(--home-section-muted, var(--text-muted-color));
    line-height: 1.65;
    margin: 0 0 10px;
}

/* ── Card clickable & link ── */
.daj-card--clickable {
    cursor: pointer;
}

.daj-card-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    margin-top: auto;
    transition: gap 0.2s ease;
}

.daj-card--clickable:hover .daj-card-link {
    gap: 8px;
}

/* ── Award detail modal ── */
.daj-modal {
    position: fixed;
    inset: 0;
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.daj-modal[hidden] {
    display: none;
}

.daj-modal-backdrop {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
}

.daj-modal-dialog {
    position: relative;
    z-index: 1;
    background: var(--surface-color, #fff);
    border-radius: 18px;
    width: 100%;
    max-width: 460px;
    overflow: hidden;
    box-shadow: 0 24px 64px rgba(0,0,0,0.22);
    animation: dajModalIn 0.28s cubic-bezier(0.34,1.56,0.64,1) both;
}

@keyframes dajModalIn {
    from { opacity: 0; transform: scale(0.88) translateY(20px); }
    to   { opacity: 1; transform: scale(1) translateY(0); }
}

.daj-modal-close {
    position: absolute;
    top: 12px;
    right: 12px;
    z-index: 2;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: none;
    background: rgba(0,0,0,0.18);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 14px;
    transition: background 0.2s;
}

.daj-modal-close:hover {
    background: rgba(0,0,0,0.38);
}

.daj-modal-img-wrap {
    width: 100%;
    height: 200px;
    background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color), var(--accent-color, #6c63ff) 50%));
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.daj-modal-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.daj-modal-icon-fallback {
    font-size: 56px;
    color: rgba(255,255,255,0.85);
}

.daj-modal-body {
    padding: 24px 24px 28px;
}

.daj-modal-title {
    font-size: 18px;
    font-weight: 700;
    line-height: 1.4;
    color: var(--heading-color, var(--text-color));
    margin: 10px 0 12px;
}

.daj-modal-desc {
    font-size: 14px;
    color: var(--text-muted-color);
    line-height: 1.7;
    margin: 0;
    white-space: pre-line;
}

body.daj-modal-open {
    overflow: hidden;
}

/* ── Road row ── */
.daj-road {
    display: flex;
    align-items: center;
    position: relative;
    height: 68px;
    flex-shrink: 0;
}

.daj-road-line {
    position: absolute;
    left: 0; right: 0;
    top: 50%;
    transform: translateY(-50%);
    height: 4px;
    background: linear-gradient(90deg,
        transparent 0%,
        var(--primary-color) 4%,
        color-mix(in srgb, var(--primary-color), var(--accent-color) 45%) 50%,
        var(--primary-color) 96%,
        transparent 100%
    );
    border-radius: 4px;
    z-index: 1;
}

/* ── Road columns ── */
.daj-road-col {
    flex: 0 0 230px;
    width: 230px;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    z-index: 2;
    height: 100%;
}

/* Connector going UP (to card above) */
.daj-road-col--up::before {
    content: '';
    position: absolute;
    bottom: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 210px;
    background: linear-gradient(to top,
        var(--primary-color) 0%,
        color-mix(in srgb, var(--primary-color), transparent 55%) 100%
    );
    z-index: 1;
}

/* Connector going DOWN (to card below) */
.daj-road-col--down::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    height: 210px;
    background: linear-gradient(to bottom,
        var(--primary-color) 0%,
        color-mix(in srgb, var(--primary-color), transparent 55%) 100%
    );
    z-index: 1;
}

/* ── Dot ── */
.daj-dot {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--primary-color);
    border: 3px solid var(--home-section-surface, var(--bg-color));
    box-shadow: 0 0 0 3px var(--primary-color);
    position: relative;
    z-index: 3;
    transition: transform 0.25s ease;
    cursor: pointer;
}

.daj-road-col:hover .daj-dot {
    transform: scale(1.35);
}

/* Dot pulse ring */
.daj-dot-ring {
    position: absolute;
    inset: -7px;
    border-radius: 50%;
    border: 2px solid var(--primary-color);
    opacity: 0;
    animation: daj-pulse 3s ease-out infinite;
}

.daj-road-col:nth-child(2) .daj-dot-ring { animation-delay: 0.6s; }
.daj-road-col:nth-child(3) .daj-dot-ring { animation-delay: 1.2s; }
.daj-road-col:nth-child(4) .daj-dot-ring { animation-delay: 1.8s; }
.daj-road-col:nth-child(5) .daj-dot-ring { animation-delay: 2.4s; }
.daj-road-col:nth-child(6) .daj-dot-ring { animation-delay: 0.3s; }

@keyframes daj-pulse {
    0%   { opacity: 0.65; transform: scale(1); }
    100% { opacity: 0;    transform: scale(2.4); }
}

/* ── Scroll animation (enhancement only — cards visible by default) ── */
.daj-animate .daj-card {
    opacity: 0;
    transform: translateY(18px);
    transition: opacity 0.45s ease, transform 0.45s ease;
    transition-delay: var(--daj-delay, 0s);
}

.daj-animate .daj-card.daj-visible {
    opacity: 1;
    transform: translateY(0);
}

/* ── Footer ── */
.daj-footer {
    margin-top: 44px;
}

/* ── View all button ── */
.default-awards-view-all {
    align-items: center;
    border: 2px solid var(--primary-color);
    border-radius: 6px;
    color: var(--primary-color);
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    padding: 10px 28px;
    text-decoration: none;
    transition: background 0.2s ease, color 0.2s ease, gap 0.2s ease;
}

.default-awards-view-all:hover,
.default-awards-view-all:focus {
    background: var(--primary-color);
    color: var(--primary-contrast-color, #fff);
    gap: 12px;
    text-decoration: none;
}

/* ════════════════════════════════════════════
   HOME BLOG / NEWS / ARTICLES SECTION  (dhb-)
   ════════════════════════════════════════════ */

/* ── Filter tabs ── */
#mu-blog.default-blog-section {
    --dhb-tab-accent: var(--secondary-color);
    --dhb-tab-accent-contrast: var(--secondary-contrast-color, #fff);
    color: var(--home-section-text, var(--text-color));
    clear: both;
    display: block;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    width: 100%;
}

.dhb-header { margin-bottom: 36px; }

.dhb-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin-bottom: 36px;
    flex-wrap: wrap;
}

.dhb-tab {
    padding: 7px 22px;
    border-radius: 100px;
    border: 1.5px solid var(--home-section-border, var(--border-color));
    background: transparent;
    color: var(--home-section-muted, var(--text-muted-color));
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.dhb-tab:not(.dhb-tab--active):hover {
    border-color: var(--dhb-tab-accent);
    color: var(--dhb-tab-accent);
}

.dhb-tab--active {
    background: var(--dhb-tab-accent);
    border-color: var(--dhb-tab-accent);
    color: var(--dhb-tab-accent-contrast);
}

.dhb-tab--active:hover {
    background: var(--dhb-tab-accent);
    border-color: var(--dhb-tab-accent);
    color: var(--dhb-tab-accent-contrast);
}

/* ── Card grid ── */
.dhb-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    margin-bottom: 40px;
}

/* ── Card ── */
.dhb-card {
    background: var(--home-section-surface, var(--surface-color, #fff));
    border: 1px solid var(--home-section-border, var(--border-color));
    border-radius: 16px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dhb-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 16px 40px color-mix(in srgb, var(--primary-color), transparent 80%);
}

/* ── Card image ── */
.dhb-card-img-wrap {
    position: relative;
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, var(--primary-color), color-mix(in srgb, var(--primary-color), var(--accent-color, #6c63ff) 50%));
    text-decoration: none;
    flex-shrink: 0;
}

.dhb-card-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform 0.4s ease;
    display: block;
}

.dhb-card:hover .dhb-card-img-wrap img {
    transform: scale(1.05);
}

.dhb-card-img-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 38px;
    color: rgba(255, 255, 255, 0.65);
}

/* ── Type badge ── */
.dhb-type-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 3px 12px;
    border-radius: 100px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    pointer-events: none;
}

.dhb-type-badge--blog    { background: var(--primary-color); color: var(--primary-contrast-color, #fff); }
.dhb-type-badge--news    { background: var(--badge-news); color: #fff; }
.dhb-type-badge--article { background: var(--badge-article); color: #fff; }

/* ── Card body ── */
.dhb-card-body {
    padding: 20px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* ── Title ── */
.dhb-card-title {
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1.45;
    margin: 0 0 10px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
}

.dhb-card-title a {
    color: var(--home-section-heading, var(--heading-color, var(--text-color)));
    text-decoration: none;
    transition: color 0.2s;
}

.dhb-card-title a:hover { color: var(--primary-color); }

/* ── Excerpt ── */
.dhb-card-excerpt {
    font-size: var(--text-sm);
    color: var(--home-section-muted, var(--text-muted-color));
    line-height: 1.65;
    margin: 0 0 14px;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    flex: 1;
}

/* ── Meta row ── */
.dhb-card-meta {
    display: flex;
    align-items: center;
    gap: 14px;
    margin-bottom: 14px;
    flex-wrap: wrap;
}

.dhb-card-date,
.dhb-card-read-time {
    font-size: var(--text-xs);
    color: var(--home-section-muted, var(--text-muted-color));
    display: flex;
    align-items: center;
    gap: 5px;
}

/* ── Read more ── */
.dhb-card-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-xs);
    font-weight: 700;
    color: var(--primary-color);
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-top: auto;
    transition: gap 0.2s ease;
}

.dhb-card-link:hover { gap: 9px; color: var(--primary-color); }

/* ── Footer ── */
.dhb-footer { margin-top: 8px; }

.dhb-view-all {
    align-items: center;
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s, color 0.25s, gap 0.25s;
    white-space: nowrap;
}

.dhb-view-all:hover,
.dhb-view-all:focus {
    gap: 12px;
    text-decoration: none;
}

/* ── Hidden state (used by JS filter) ── */
.dhb-card--hidden {
    display: none !important;
}

/* ── Empty state ── */
.dhb-empty {
    text-align: center;
    color: var(--home-section-muted, var(--text-muted-color));
    padding: 40px 0;
    font-size: 14px;
}

/* ── Dark section overrides ── */
.home-section-bg-dark .dhb-tab {
    border-color: color-mix(in srgb, var(--bg-color), transparent 50%);
    color: var(--home-section-muted, var(--text-muted-color));
}

.home-section-bg-dark .dhb-tab:not(.dhb-tab--active):hover {
    border-color: var(--dhb-tab-accent);
    color: var(--dhb-tab-accent);
}

.home-section-bg-dark .dhb-tab--active {
    background: var(--dhb-tab-accent);
    border-color: var(--dhb-tab-accent);
    color: var(--dhb-tab-accent-contrast);
}

.home-section-bg-dark .dhb-tab--active:hover {
    background: var(--dhb-tab-accent);
    border-color: var(--dhb-tab-accent);
    color: var(--dhb-tab-accent-contrast);
}

.home-section-bg-dark .dhb-card {
    background: color-mix(in srgb, var(--bg-color), transparent 78%);
    border-color: color-mix(in srgb, var(--bg-color), transparent 65%);
}

.home-section-bg-dark .dhb-card:hover {
    box-shadow: 0 16px 40px color-mix(in srgb, var(--accent-color), transparent 78%);
}

.home-section-bg-dark .dhb-card-title a {
    color: var(--home-section-heading, var(--heading-color));
}

.home-section-bg-dark .dhb-card-link { color: var(--primary-color); }
.home-section-bg-dark .dhb-card-link:hover { color: var(--primary-color); }

.home-section-bg-dark .dhb-view-all {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.home-section-bg-dark .dhb-view-all:hover {
    background: var(--accent-color);
    color: var(--accent-contrast-color, #000);
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .dhb-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 575px) {
    #mu-blog.default-blog-section {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }

    .dhb-grid { grid-template-columns: 1fr; gap: 16px; }

    .dhb-tab {
        padding: 7px 18px;
        font-size: 12px;
    }
}

/* ════════════════════════════════════════
   TOPPERS SECTION  (dtr-)
   ════════════════════════════════════════ */

#mu-toppers.default-toppers-section {
    --dtr-accent: var(--primary-color);
    --dtr-accent-contrast: var(--primary-contrast-color, #fff);
    --dtr-tab-accent: var(--primary-color);
    --dtr-tab-accent-contrast: var(--primary-contrast-color, #fff);
    color: var(--home-section-text, var(--text-color));
    clear: both;
    display: block;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    width: 100%;
}

.dtr-header { margin-bottom: 36px; }

.dtr-year-badge {
    display: inline-block;
    background: color-mix(in srgb, var(--dtr-accent), transparent 88%);
    color: var(--dtr-accent);
    font-size: 12px;
    font-weight: 700;
    padding: 4px 16px;
    border-radius: 100px;
    letter-spacing: 0.06em;
    margin-top: 8px;
}

/* ── Tabs ── */
.dtr-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
}

.dtr-tab {
    padding: 7px 22px;
    border-radius: 100px;
    border: 1.5px solid var(--home-section-border, var(--border-color));
    background: transparent;
    color: var(--home-section-muted, var(--text-muted-color));
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.dtr-tab:not(.dtr-tab--active):hover {
    border-color: var(--dtr-tab-accent);
    color: var(--dtr-tab-accent);
}

.dtr-tab--active {
    background: var(--dtr-tab-accent);
    border-color: var(--dtr-tab-accent);
    color: var(--dtr-tab-accent-contrast);
}

.dtr-tab--active:hover {
    background: var(--dtr-tab-accent);
    border-color: var(--dtr-tab-accent);
    color: var(--dtr-tab-accent-contrast);
}

/* ── Grid ── */
.dtr-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 24px;
}

.dtr-card--hidden { display: none !important; }

/* ── Card ── */
.dtr-card {
    position: relative;
    background: var(--home-section-surface, var(--surface-color, #fff));
    border-radius: 20px;
    overflow: visible;
    text-align: center;
    box-shadow: 0 4px 24px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dtr-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 24px 52px rgba(0,0,0,0.13);
}

/* ── Card ── */
.dtr-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    text-align: center;
    padding: 22px 20px 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    background: var(--home-section-surface, var(--surface-color, #fff));
    border: 1px solid var(--home-section-border, var(--border-color));
    box-shadow: 0 4px 20px rgba(0,0,0,0.07);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dtr-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.12);
}

/* ── Medal — top-left ── */
.dtr-medal {
    position: absolute;
    top: 12px;
    left: 14px;
    font-size: 24px;
    line-height: 1;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.3));
}

/* ── Course name — top center ── */
.dtr-header-course {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.14em;
    color: var(--home-section-muted, var(--text-muted-color));
    margin-top: 4px;
}

/* ── Circular photo with rings ── */
.dtr-card-photo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    overflow: hidden;
    background: color-mix(in srgb, var(--dtr-accent), transparent 82%);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    border: 3px solid color-mix(in srgb, var(--dtr-accent), transparent 60%);
    box-shadow:
        0 0 0 6px color-mix(in srgb, var(--dtr-accent), transparent 88%),
        0 0 0 12px color-mix(in srgb, var(--dtr-accent), transparent 94%),
        0 6px 18px rgba(0,0,0,0.12);
    transition: transform 0.35s ease;
}

.dtr-card:hover .dtr-card-photo { transform: scale(1.05); }

.dtr-card-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.dtr-initials {
    font-size: 36px;
    font-weight: 800;
    color: rgba(255,255,255,0.85);
}

/* ── Year badge ── */
.dtr-year {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    color: var(--home-section-muted, var(--text-muted-color));
    margin-top: -6px;
}

/* ── Info bar — dark background for light sections ── */
.dtr-info-bar {
    width: calc(100% + 40px);
    margin: 0 -20px;
    background: var(--home-section-heading, var(--heading-color, var(--text-color)));
    border-top: none;
    padding: 14px 16px 16px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
}

.dtr-score {
    font-size: 22px;
    font-weight: 900;
    color: var(--primary-color);
    line-height: 1;
    letter-spacing: -0.01em;
}

.dtr-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--home-section-heading, var(--heading-color, var(--text-color)));
    letter-spacing: 0.06em;
    line-height: 1.3;
}

/* ── Rank accent bar ── */
.dtr-rank-bar { height: 4px; width: 100%; }
.dtr-rank--gold   .dtr-rank-bar { background: linear-gradient(90deg, #F59E0B, #FCD34D); }
.dtr-rank--silver .dtr-rank-bar { background: linear-gradient(90deg, #94A3B8, #CBD5E1); }
.dtr-rank--bronze .dtr-rank-bar { background: linear-gradient(90deg, #B45309, #D97706); }

/* ── Dark section overrides ── */
#mu-toppers.default-toppers-section.home-section-bg-dark,
.home-section-bg-dark #mu-toppers.default-toppers-section {
    --dtr-accent: var(--home-section-muted, var(--text-muted-color));
    --dtr-accent-contrast: var(--home-section-bg, var(--text-color));
    --dtr-tab-accent: var(--primary-color);
    --dtr-tab-accent-contrast: var(--primary-contrast-color, #fff);
}

.home-section-bg-dark .dtr-card {
    background: color-mix(in srgb, var(--bg-color), transparent 78%);
    border-color: color-mix(in srgb, var(--bg-color), transparent 62%);
}

.home-section-bg-dark .dtr-header-course {
    color: var(--home-section-muted, var(--text-muted-color));
}

.home-section-bg-dark .dtr-year {
    color: var(--dtr-accent);
}

.home-section-bg-dark .dtr-info-bar {
    background: color-mix(in srgb, var(--home-section-bg, var(--text-color)), var(--home-section-text, var(--bg-color)) 12%);
    border-color: var(--home-section-border, color-mix(in srgb, var(--bg-color), transparent 62%));
}

.home-section-bg-dark .dtr-score {
    color: var(--dtr-accent);
}


.dtr-name {
    font-size: var(--text-base);
    font-weight: 700;
    color: var(--dtr-accent);
    margin: 0;
    line-height: 1.3;
}

.dtr-score {
    font-size: 30px;
    font-weight: 900;
    color: var(--dtr-accent);
    line-height: 1;
    letter-spacing: -0.02em;
}

.dtr-score-label {
    font-size: 10px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--home-section-muted, var(--text-muted-color));
    margin-top: -2px;
}

.dtr-year {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--dtr-accent);
    background: color-mix(in srgb, var(--dtr-accent), transparent 90%);
    padding: 3px 12px;
    border-radius: 100px;
}

/* ── Rank accent bar at bottom ── */
.dtr-rank-bar {
    height: 4px;
    border-radius: 0 0 20px 20px;
}

.dtr-rank--gold   .dtr-rank-bar { background: linear-gradient(90deg, #F59E0B, #FCD34D); }
.dtr-rank--silver .dtr-rank-bar { background: linear-gradient(90deg, #94A3B8, #CBD5E1); }
.dtr-rank--bronze .dtr-rank-bar { background: linear-gradient(90deg, #B45309, #D97706); }

/* ── Dark overrides ── */
.home-section-bg-dark .dtr-card {
    background: color-mix(in srgb, var(--bg-color), transparent 78%);
    border-color: color-mix(in srgb, var(--bg-color), transparent 65%);
}

.home-section-bg-dark .dtr-card:hover {
    box-shadow: 0 16px 40px color-mix(in srgb, var(--dtr-accent), transparent 82%);
}

.home-section-bg-dark .dtr-name  { color: var(--dtr-accent); }
.home-section-bg-dark .dtr-score { color: var(--dtr-accent); }
.home-section-bg-dark .dtr-info-bar {
    background: color-mix(in srgb, var(--home-section-bg, var(--text-color)), var(--home-section-text, var(--bg-color)) 12%);
    border-color: var(--home-section-border, color-mix(in srgb, var(--bg-color), transparent 55%));
}

.home-section-bg-dark .dtr-tab {
    border-color: color-mix(in srgb, var(--bg-color), transparent 50%);
    color: var(--home-section-muted, var(--text-muted-color));
}

.home-section-bg-dark .dtr-tab:not(.dtr-tab--active):hover {
    border-color: var(--dtr-tab-accent);
    color: var(--dtr-tab-accent);
}

.home-section-bg-dark .dtr-tab--active {
    background: var(--dtr-tab-accent);
    border-color: var(--dtr-tab-accent);
    color: var(--dtr-tab-accent-contrast);
}

.home-section-bg-dark .dtr-tab--active:hover {
    background: var(--dtr-tab-accent);
    border-color: var(--dtr-tab-accent);
    color: var(--dtr-tab-accent-contrast);
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .dtr-grid { grid-template-columns: repeat(2, 1fr); gap: 20px; }
}

@media (max-width: 575px) {
    #mu-toppers.default-toppers-section {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }

    .dtr-grid { grid-template-columns: 1fr; gap: 16px; }
}

/* ════════════════════════════════════════
   TRUST BAR SECTION  (dtrb-)
   ════════════════════════════════════════ */

#mu-trust-bar.default-trust-bar-section {
    --dtrb-accent: var(--primary-color);
    color: var(--home-section-text, var(--text-color));
    clear: both;
    display: block;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    width: 100%;
}

.dtrb-header { margin-bottom: 36px; }

.dtrb-lead {
    font-size: 16px;
    color: var(--home-section-muted, var(--text-muted-color));
    max-width: 600px;
    margin: 8px auto 0;
}

/* ── Grid ── */
.dtrb-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    gap: 20px;
}

/* ── Card item ── */
.dtrb-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 10px;
    padding: 20px 10px 16px;
    background: var(--home-section-surface, var(--surface-color, #fff));
    border: 1px solid var(--home-section-border, var(--border-color));
    border-radius: 12px;
    text-decoration: none;
    min-width: 0;
    width: 100%;
    overflow: hidden;
    transition: transform 0.22s ease, box-shadow 0.22s ease;
}

a.dtrb-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(0,0,0,0.10);
    text-decoration: none;
}

/* ── Icon / Logo ── */
.dtrb-icon {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: color-mix(in srgb, var(--dtrb-accent), transparent 88%);
    flex-shrink: 0;
}

.dtrb-icon img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 50%;
}

.dtrb-icon i {
    font-size: 34px;
    color: var(--primary-color);
}

/* ── Body text ── */
.dtrb-body {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    min-width: 0;
    width: 100%;
}

.dtrb-value {
    font-size: 18px;
    font-weight: 800;
    color: var(--home-section-text, var(--text-color));
    line-height: 1.2;
    letter-spacing: -0.01em;
    word-break: break-word;
    overflow-wrap: break-word;
    width: 100%;
}

.dtrb-label {
    font-size: var(--text-xs);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--home-section-muted, var(--text-muted-color));
    word-break: break-word;
    overflow-wrap: break-word;
    width: 100%;
}

.dtrb-desc {
    font-size: var(--text-xs);
    color: var(--home-section-muted, var(--text-muted-color));
    line-height: 1.4;
    margin-top: 2px;
    word-break: break-word;
    overflow-wrap: break-word;
    width: 100%;
}

/* ── Rankings & Accreditations section ───────────────── */
.default-rankings-section { padding: 60px 0; }
.rnk-header { margin-bottom: 44px; }
.rnk-lead { color: var(--text-muted, #6b7280); font-size: var(--text-base); max-width: 600px; margin: 0 auto; }
.rnk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 200px)); gap: 20px; justify-content: center; }
.rnk-card { align-items: center; background: var(--card-bg, #fff); border: 1px solid var(--border-color, #e5e7eb); border-radius: 12px; display: flex; flex-direction: column; gap: 8px; padding: 24px 16px; text-align: center; text-decoration: none; transition: box-shadow 0.25s ease, transform 0.25s ease; width: 100%; }
.rnk-card:hover { box-shadow: 0 6px 24px rgba(0,0,0,0.1); transform: translateY(-3px); }
.rnk-card--primary { border-color: var(--primary-color); background: color-mix(in srgb, var(--primary-color) 6%, transparent); }
.rnk-card-icon { color: var(--primary-color); font-size: 32px; line-height: 1; }
.rnk-card-icon img { height: 48px; width: auto; object-fit: contain; }
.rnk-card-grade { color: var(--primary-color); font-size: clamp(22px, 3vw, 32px); font-weight: 800; line-height: 1; }
.rnk-card-label { color: var(--heading-color, #111); font-size: 13px; font-weight: 600; }
.rnk-card-desc { color: var(--text-muted, #6b7280); font-size: 12px; }
@media (prefers-reduced-motion: no-preference) {
    .rnk-card { will-change: transform; }
}
@media (prefers-reduced-motion: reduce) { .rnk-card { transition: none; } }
@media (max-width: 767px) { .rnk-grid { grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: 14px; justify-content: center; } }


/* ── Badge type accent borders ── */
.dtrb-item--accreditation { border-top: 3px solid var(--accent-color); }
.dtrb-item--affiliation   { border-top: 3px solid var(--primary-color); }
.dtrb-item--award         { border-top: 3px solid var(--status-success); }
.dtrb-item--certification { border-top: 3px solid var(--badge-webinar, #6366f1); }
.dtrb-item--stat          { border-top: 3px solid var(--accent-color, var(--primary-color)); }

/* ── Dark background overrides ── */
#mu-trust-bar.default-trust-bar-section.home-section-bg-dark,
.home-section-bg-dark #mu-trust-bar.default-trust-bar-section {
    --dtrb-accent: var(--home-section-text, var(--bg-color));
}

.home-section-bg-dark .dtrb-item {
    border-color: var(--home-section-border, color-mix(in srgb, var(--bg-color), transparent 82%));
}

.home-section-bg-dark .dtrb-icon {
    background: color-mix(in srgb, var(--dtrb-accent), transparent 85%);
}

.home-section-bg-dark .dtrb-icon i { color: var(--primary-color); }

.home-section-bg-dark .dtrb-value {
    color: var(--home-section-text, var(--bg-color));
    font-size: var(--text-base);
}

.home-section-bg-dark .dtrb-label,
.home-section-bg-dark .dtrb-desc {
    color: var(--home-section-muted, var(--text-muted-color));
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .dtrb-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
    .dtrb-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; }
}

@media (max-width: 480px) {
    #mu-trust-bar.default-trust-bar-section {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }

    .dtrb-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .dtrb-item { padding: 18px 12px 14px; }
}

/* ════════════════════════════════════════
   NOTICE BOARD SECTION  (dnb-)
   ════════════════════════════════════════ */

#mu-notice-board.default-notice-board-section {
    --dnb-accent: var(--primary-color);
    --dnb-accent-contrast: var(--primary-contrast-color, #fff);
    color: var(--home-section-text, var(--text-color));
    clear: both;
    display: block;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    width: 100%;
}

.dnb-header { margin-bottom: 36px; }

/* ── Filter tabs ── */
.dnb-tabs {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 36px;
}

.dnb-tab {
    padding: 7px 22px;
    border-radius: 100px;
    border: 1.5px solid var(--home-section-border, var(--border-color));
    background: transparent;
    color: var(--home-section-muted, var(--text-muted-color));
    font-size: var(--text-sm);
    font-weight: 600;
    cursor: pointer;
    letter-spacing: 0.03em;
    transition: background 0.2s, border-color 0.2s, color 0.2s;
}

.dnb-tab--active {
    background: var(--dnb-accent);
    border-color: var(--dnb-accent);
    color: var(--dnb-accent-contrast);
}

.dnb-tab--active:hover {
    background: var(--dnb-accent);
    border-color: var(--dnb-accent);
    color: var(--dnb-accent-contrast);
}

.dnb-tab:not(.dnb-tab--active):hover {
    border-color: var(--dnb-accent);
    color: var(--dnb-accent);
}

/* ── Wrapper ── */
.dnb-wrapper {
    max-width: 820px;
    margin: 0 auto 28px;
    border: 1px solid var(--home-section-border, var(--border-color));
    border-radius: 16px;
    overflow: hidden;
}

/* ── Scrollable list ── */
.dnb-list {
    max-height: 380px;
    overflow-y: auto;
    scrollbar-width: thin;
    scrollbar-color: var(--dnb-accent) transparent;
}

.dnb-list::-webkit-scrollbar { width: 4px; }
.dnb-list::-webkit-scrollbar-track { background: transparent; }
.dnb-list::-webkit-scrollbar-thumb {
    background: color-mix(in srgb, var(--dnb-accent), transparent 60%);
    border-radius: 4px;
}

/* ── Notice row ── */
.dnb-item {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 13px 18px;
    border-bottom: 1px solid var(--home-section-border, var(--border-color));
    background: var(--home-section-surface, var(--surface-color, #fff));
    transition: background 0.18s ease;
}

.dnb-item:last-child { border-bottom: none; }

.dnb-item:hover {
    background: color-mix(in srgb, var(--dnb-accent), transparent 96%);
}

.dnb-item--pinned {
    background: color-mix(in srgb, var(--dnb-accent), transparent 95%);
}

/* ── Type badge ── */
.dnb-badge {
    flex-shrink: 0;
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.07em;
    padding: 3px 9px;
    border-radius: 100px;
    white-space: nowrap;
}

.dnb-badge--primary {
    background: color-mix(in srgb, var(--dnb-accent), transparent 85%);
    color: var(--dnb-accent);
}

.dnb-badge--success {
    background: color-mix(in srgb, var(--status-success), transparent 82%);
    color: var(--status-success);
}

.dnb-badge--warning {
    background: color-mix(in srgb, var(--status-warning), transparent 82%);
    color: var(--status-warning);
}

.dnb-badge--accent {
    background: color-mix(in srgb, var(--accent-color, #6c63ff), transparent 85%);
    color: var(--accent-color, #6c63ff);
}

/* ── Content area ── */
.dnb-content {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: nowrap;
    overflow: hidden;
}

.dnb-pin {
    color: var(--dnb-accent);
    font-size: var(--text-xs);
    flex-shrink: 0;
}

.dnb-new {
    flex-shrink: 0;
    font-size: 8px;
    font-weight: 800;
    letter-spacing: 0.08em;
    color: #fff;
    background: var(--status-danger);
    padding: 2px 6px;
    border-radius: 4px;
    animation: dnb-pulse 1.8s ease-in-out infinite;
}

@keyframes dnb-pulse {
    0%, 100% { opacity: 1; }
    50%       { opacity: 0.55; }
}

.dnb-title {
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--home-section-muted, var(--text-muted-color));
    text-decoration: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    transition: color 0.18s;
}

a.dnb-title:hover { color: var(--home-section-text, var(--text-color)); text-decoration: none; }
.dnb-title--plain { color: var(--home-section-muted, var(--text-muted-color)); }

/* ── Right meta ── */
.dnb-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.dnb-date {
    font-size: var(--text-xs);
    color: var(--home-section-muted, var(--text-muted-color));
    white-space: nowrap;
}

.dnb-download {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    border: 1px solid var(--home-section-border, var(--border-color));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    color: var(--home-section-muted, var(--text-muted-color));
    text-decoration: none;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.dnb-download:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-contrast-color, #fff);
    text-decoration: none;
}

/* ── Footer ── */
.dnb-footer { margin-top: 4px; }

.dnb-view-all {
    align-items: center;
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s, color 0.25s, gap 0.25s;
    white-space: nowrap;
}

.dnb-view-all:hover,
.dnb-view-all:focus {
    gap: 12px;
    text-decoration: none;
}

/* ── Dark section overrides ── */
#mu-notice-board.default-notice-board-section.home-section-bg-dark,
.home-section-bg-dark #mu-notice-board.default-notice-board-section {
    --dnb-accent: var(--primary-color);
    --dnb-accent-contrast: var(--primary-contrast-color, #fff);
}

.home-section-bg-dark .dnb-view-all {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.home-section-bg-dark .dnb-view-all:hover,
.home-section-bg-dark .dnb-view-all:focus {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--accent-contrast-color, #000);
}

#mu-notice-board.default-notice-board-section.home-section-bg-dark .dnb-header h2,
.home-section-bg-dark #mu-notice-board.default-notice-board-section .dnb-header h2 {
    color: var(--home-section-text, var(--bg-color)) !important;
}

#mu-notice-board.default-notice-board-section.home-section-bg-dark .dnb-header p,
#mu-notice-board.default-notice-board-section.home-section-bg-dark .dnb-title,
#mu-notice-board.default-notice-board-section.home-section-bg-dark .dnb-title--plain,
#mu-notice-board.default-notice-board-section.home-section-bg-dark .text-muted,
.home-section-bg-dark #mu-notice-board.default-notice-board-section .dnb-header p,
.home-section-bg-dark #mu-notice-board.default-notice-board-section .dnb-title,
.home-section-bg-dark #mu-notice-board.default-notice-board-section .dnb-title--plain,
.home-section-bg-dark #mu-notice-board.default-notice-board-section .text-muted {
    color: var(--home-section-muted, var(--text-muted-color)) !important;
}

.home-section-bg-dark .dnb-wrapper {
    border-color: color-mix(in srgb, var(--bg-color), transparent 50%);
}

.home-section-bg-dark .dnb-item {
    background: color-mix(in srgb, var(--bg-color), transparent 78%);
    border-color: color-mix(in srgb, var(--bg-color), transparent 60%);
}

.home-section-bg-dark .dnb-item:hover {
    background: color-mix(in srgb, var(--dnb-accent), transparent 90%);
}

.home-section-bg-dark .dnb-item--pinned {
    background: color-mix(in srgb, var(--dnb-accent), transparent 88%);
}

.home-section-bg-dark .dnb-badge--primary {
    background: color-mix(in srgb, var(--dnb-accent), transparent 82%);
    color: var(--dnb-accent);
}

.home-section-bg-dark .dnb-pin { color: var(--dnb-accent); }

/* ── Responsive ── */
@media (max-width: 575px) {
    #mu-notice-board.default-notice-board-section {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }

    .dnb-item { gap: 8px; padding: 11px 14px; }
    .dnb-badge { display: none; }
    .dnb-date { display: none; }
}

/* ════════════════════════════════════════
   SUCCESS STORIES SECTION  (dss-)
   ════════════════════════════════════════ */

#mu-success-stories.default-success-stories-section {
    color: var(--home-section-text, var(--text-color));
    padding-top: 80px !important;
    padding-bottom: 80px !important;
}

.dss-header { margin-bottom: 48px; }

/* ── Carousel wrapper ── */
.dss-carousel {
    position: relative;
    margin-bottom: 16px;
}

.dss-track-wrap {
    overflow: hidden;
}

.dss-track {
    display: flex;
    gap: 16px;
    transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
    will-change: transform;
}

/* ── Arrow buttons ── */
.dss-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 2;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1.5px solid var(--home-section-border, var(--border-color));
    background: var(--home-section-surface, var(--surface-color, #fff));
    color: var(--home-section-heading, var(--heading-color));
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    font-size: 12px;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    box-shadow: 0 2px 8px rgba(0,0,0,0.08);
}

.dss-arrow--prev { left: -18px; }
.dss-arrow--next { right: -18px; }

.dss-arrow:hover {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-contrast-color, #fff);
}

.dss-arrow:disabled {
    opacity: 0.35;
    cursor: default;
    pointer-events: none;
}

/* ── Dots ── */
.dss-dots {
    display: flex;
    justify-content: center;
    gap: 6px;
    margin-bottom: 24px;
}

.dss-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    border: none;
    background: var(--home-section-border, var(--border-color));
    cursor: pointer;
    padding: 0;
    transition: background 0.2s, width 0.2s;
}

.dss-dot--active {
    background: var(--primary-color);
    width: 20px;
    border-radius: 4px;
}

/* ── Card — two-column: photo | data ── */
.dss-card {
    background: var(--home-section-surface, var(--surface-color, #fff));
    border: 1px solid var(--home-section-border, var(--border-color));
    border-radius: 14px;
    padding: 14px 16px;
    display: flex;
    align-items: center;
    gap: 12px;
    text-decoration: none;
    box-shadow: 0 2px 10px rgba(0,0,0,0.05);
    transition: transform 0.25s ease, box-shadow 0.25s ease;
    flex: 0 0 calc(25% - 12px);
    min-width: 0;
}

.dss-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px color-mix(in srgb, var(--primary-color), transparent 84%);
    text-decoration: none;
}

/* ── Left: photo with badge ── */
.dss-photo {
    position: relative;
    width: 54px;
    height: 54px;
    border-radius: 12px;
    overflow: visible;
    flex-shrink: 0;
}

.dss-photo img {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    object-fit: cover;
    object-position: top center;
    display: block;
}

.dss-initials {
    width: 54px;
    height: 54px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--primary-color),
        color-mix(in srgb, var(--primary-color), var(--accent-color, #6c63ff) 50%));
    font-size: 20px;
    font-weight: 800;
    color: rgba(255,255,255,0.85);
}

/* Green achievement badge on photo */
.dss-photo-badge {
    position: absolute;
    bottom: -6px;
    right: -6px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    background: var(--status-success);
    border: 2px solid var(--home-section-surface, var(--surface-color, #fff));
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #fff;
}

/* ── Right: info ── */
.dss-info {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.dss-name {
    font-size: var(--text-sm);
    font-weight: 700;
    color: var(--home-section-heading, var(--heading-color, var(--text-color)));
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    margin: 0;
}

.dss-achievement {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--primary-color);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dss-company {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 10px;
    color: var(--home-section-muted, var(--text-muted-color));
    background: color-mix(in srgb, var(--home-section-border, var(--border-color)), transparent 30%);
    border-radius: 8px;
    padding: 4px 10px;
    margin-top: 4px;
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* ── Footer ── */
.dss-footer { margin-top: 4px; text-align: center; }

.dss-view-all {
    align-items: center;
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s, color 0.25s, gap 0.25s;
    white-space: nowrap;
}

.dss-view-all:hover,
.dss-view-all:focus {
    gap: 12px;
    text-decoration: none;
}

/* ── Dark section overrides ── */
.home-section-bg-dark .dss-card {
    background: color-mix(in srgb, var(--bg-color), transparent 75%);
    border-color: color-mix(in srgb, var(--bg-color), transparent 60%);
    box-shadow: none;
}

.home-section-bg-dark .dss-card:hover {
    box-shadow: 0 12px 32px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.home-section-bg-dark .dss-achievement { color: var(--primary-color); }

.home-section-bg-dark .dss-photo-badge {
    border-color: color-mix(in srgb, var(--bg-color), transparent 55%);
}

.home-section-bg-dark .dss-initials {
    background: linear-gradient(135deg, var(--accent-color),
        color-mix(in srgb, var(--accent-color), var(--primary-color) 50%));
}

.home-section-bg-dark .dss-company {
    background: color-mix(in srgb, var(--bg-color), transparent 50%);
}

.home-section-bg-dark .dss-view-all {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.home-section-bg-dark .dss-view-all:hover {
    background: var(--accent-color);
    color: var(--accent-contrast-color, #000);
}

/* ── Dark overrides — arrows & dots ── */
.home-section-bg-dark .dss-arrow {
    background: color-mix(in srgb, var(--bg-color), transparent 60%);
    border-color: color-mix(in srgb, var(--bg-color), transparent 40%);
    color: var(--home-section-text, var(--bg-color));
}

.home-section-bg-dark .dss-arrow:hover {
    background: var(--accent-color);
    border-color: var(--accent-color);
    color: var(--accent-contrast-color, #000);
}

.home-section-bg-dark .dss-dot--active { background: var(--accent-color); }

/* ── Responsive ── */
@media (max-width: 991px) {
    .dss-card { flex: 0 0 calc(50% - 8px); }
}

@media (max-width: 575px) {
    #mu-success-stories.default-success-stories-section {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }

    .dss-card { flex: 0 0 100%; }
    .dss-arrow--prev { left: -12px; }
    .dss-arrow--next { right: -12px; }
}

/* ════════════════════════════════════════
   MANAGEMENT SECTION  (dhm-)
   ════════════════════════════════════════ */

.default-management-section {
    color: var(--home-section-text, var(--text-color));
    padding: 80px 0;
}

.dhm-header { margin-bottom: 48px; }

/* ── Grid — flex so partial rows center ── */
.dhm-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 24px;
    margin-bottom: 40px;
}

/* ── Card — portrait photo with overlay ── */
.dhm-card {
    position: relative;
    border-radius: 18px;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    width: calc(25% - 18px);
    flex-shrink: 0;
    cursor: default;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.dhm-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 22px 48px rgba(0,0,0,0.22);
}

/* ── Photo fills entire card ── */
.dhm-card-photo-wrap {
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg,
        var(--primary-color),
        color-mix(in srgb, var(--primary-color), var(--accent-color, #6c63ff) 55%)
    );
}

.dhm-card-photo-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    display: block;
    transition: transform 0.4s ease;
}

.dhm-card:hover .dhm-card-photo-wrap img {
    transform: scale(1.06);
}

/* ── Initials fallback ── */
.dhm-card-initials {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 52px;
    font-weight: 800;
    color: rgba(255,255,255,0.75);
    letter-spacing: 0.05em;
}

/* ── Gradient overlay — always visible at bottom ── */
.dhm-card-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: 64px 16px 18px;
    background: linear-gradient(to bottom,
        transparent 0%,
        rgba(0,0,0,0.18) 30%,
        rgba(0,0,0,0.72) 100%
    );
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
    transition: padding 0.3s ease;
}

.dhm-card:hover .dhm-card-overlay {
    padding-bottom: 22px;
}

/* Badge — slides up on hover */
.dhm-card-badge {
    display: inline-block;
    background: var(--primary-color);
    color: var(--primary-contrast-color, #fff);
    font-size: 9px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.09em;
    padding: 3px 10px;
    border-radius: 100px;
    opacity: 0;
    transform: translateY(6px);
    transition: opacity 0.3s ease, transform 0.3s ease;
    margin-bottom: 2px;
}

.dhm-card:hover .dhm-card-badge {
    opacity: 1;
    transform: translateY(0);
}

.dhm-card-name {
    font-size: var(--text-base);
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
    text-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

.dhm-card-designation {
    font-size: 12px;
    color: rgba(255,255,255,0.85);
    font-weight: 500;
    margin: 0;
}

.dhm-card-post {
    font-size: var(--text-xs);
    color: rgba(255,255,255,0.7);
    margin: 0;
    display: flex;
    align-items: center;
    gap: 4px;
    opacity: 0;
    transform: translateY(4px);
    transition: opacity 0.3s ease 0.05s, transform 0.3s ease 0.05s;
}

.dhm-card:hover .dhm-card-post {
    opacity: 1;
    transform: translateY(0);
}

/* ── View all ── */
.dhm-footer { margin-top: 8px; }

.dhm-view-all {
    align-items: center;
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s, color 0.25s, gap 0.25s;
    white-space: nowrap;
}

.dhm-view-all:hover,
.dhm-view-all:focus {
    gap: 12px;
    text-decoration: none;
}

/* ── Dark section overrides ── */
.home-section-bg-dark .dhm-card-badge {
    background: var(--accent-color);
    color: var(--accent-contrast-color, #000);
}

.home-section-bg-dark .dhm-card-photo-wrap {
    background: linear-gradient(135deg,
        var(--accent-color),
        color-mix(in srgb, var(--accent-color), var(--primary-color) 50%)
    );
}

.home-section-bg-dark .dhm-view-all {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.home-section-bg-dark .dhm-view-all:hover {
    background: var(--accent-color);
    color: var(--accent-contrast-color, #000);
}

/* ── Responsive ── */
@media (max-width: 1199px) {
    .dhm-card { width: calc(33.333% - 16px); }
}

@media (max-width: 991px) {
    .dhm-card { width: calc(50% - 12px); }
}

@media (max-width: 767px) {
    .default-management-section { padding: 56px 0; }
    .dhm-grid { gap: 16px; }
    .dhm-card { width: calc(50% - 8px); }
    .dhm-card-name { font-size: var(--text-sm); }
}

@media (max-width: 400px) {
    .dhm-grid { gap: 12px; }
    .dhm-card { width: calc(50% - 6px); }
}

/* ════════════════════════════════════════
   INDUSTRY PARTNERS SECTION  (dip-)
   ════════════════════════════════════════ */

#mu-industry-partners.default-industry-partners-section {
    color: var(--home-section-text, var(--text-color));
    clear: both;
    display: block;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    width: 100%;
}

.dip-header { margin-bottom: 40px; }

/* Scroll wrapper — mask fades on both edges */
.dip-scroll-wrapper {
    overflow: hidden;
    margin-bottom: 36px;
    -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0%, #000 8%, #000 92%, transparent 100%);
}

/* Animated track — rendered twice for seamless loop */
.dip-track {
    display: flex;
    align-items: flex-start;
    gap: 24px;
    width: max-content;
    padding: 16px 10px;
    animation: dip-marquee 35s linear infinite;
}

.dip-scroll-wrapper:hover .dip-track {
    animation-play-state: paused;
}

@keyframes dip-marquee {
    0%   { transform: translateX(0); }
    100% { transform: translateX(-50%); }
}

@media (prefers-reduced-motion: reduce) {
    .dip-track {
        animation: none;
        flex-wrap: wrap;
        width: auto;
        justify-content: center;
    }
}

/* Logo card */
.dip-logo-card {
    width: 100px;
    height: 100px;
    border-radius: 14px;
    overflow: hidden;
    border: 1px solid var(--home-section-border, var(--border-color));
    background: var(--home-section-surface, var(--surface-color, #fff));
    flex-shrink: 0;
    cursor: default;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.dip-logo-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 10px 28px color-mix(in srgb, var(--primary-color), transparent 84%);
}

/* Logo image — fills the full square card */
.dip-logo-card img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    filter: grayscale(50%);
    opacity: 0.8;
    transition: filter 0.25s, opacity 0.25s;
}

.dip-logo-card:hover img {
    filter: grayscale(0%);
    opacity: 1;
}

/* Fallback initials box */
.dip-logo-fallback {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    background: color-mix(in srgb, var(--primary-color), transparent 88%);
    border-radius: 8px;
    font-size: 20px;
    font-weight: 700;
    color: var(--primary-color);
    letter-spacing: 0.05em;
}

/* Company name label */
/* Wrapper for card + name */
.dip-logo-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    flex-shrink: 0;
}

.dip-company-name {
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--home-section-muted, var(--text-muted-color));
    text-align: center;
    white-space: nowrap;
    max-width: 110px;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* View all */
.dip-footer { margin-top: 4px; }

.dip-view-all {
    align-items: center;
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    letter-spacing: 0.02em;
    text-decoration: none;
    transition: background 0.25s, border-color 0.25s, color 0.25s, gap 0.25s;
    white-space: nowrap;
}

.dip-view-all:hover,
.dip-view-all:focus {
    gap: 12px;
    text-decoration: none;
}

/* Dark section overrides */
.home-section-bg-dark .dip-logo-card {
    background: color-mix(in srgb, var(--bg-color), transparent 75%);
    border-color: color-mix(in srgb, var(--bg-color), transparent 60%);
}

.home-section-bg-dark .dip-logo-card:hover {
    box-shadow: 0 10px 28px color-mix(in srgb, var(--accent-color), transparent 80%);
}

.home-section-bg-dark .dip-logo-card img {
    filter: grayscale(20%) brightness(1.2);
    opacity: 0.85;
}

.home-section-bg-dark .dip-logo-card:hover img {
    filter: grayscale(0%) brightness(1.3);
    opacity: 1;
}

.home-section-bg-dark .dip-logo-fallback {
    background: color-mix(in srgb, var(--primary-color), transparent 85%);
    color: var(--primary-color);
}

.home-section-bg-dark .dip-view-all {
    border-color: var(--primary-color);
    color: var(--primary-color);
}

.home-section-bg-dark .dip-view-all:hover {
    background: var(--accent-color);
    color: var(--accent-contrast-color, #000);
}

/* Placement companies directory */
.partner-directory-page {
    --partner-muted-bg: var(--bg-alt-color, #f4f7fb);
    --partner-border: var(--border-color, rgba(15, 23, 42, 0.1));
    --partner-heading: var(--heading-color, var(--text-color, #172033));
    --partner-text: var(--text-color, #354052);
    --partner-muted: var(--text-muted-color, #64748b);
    --partner-primary: var(--primary-color, #0055aa);
    --partner-secondary: var(--secondary-color, var(--partner-primary));
    --partner-accent: var(--accent-color, var(--partner-primary));
    background: var(--bg-color, #f8fafc);
    color: var(--partner-text);
}

/* Placement overview page */
.placements-modern-page {
    --placements-surface: var(--surface-color, var(--bg-color, #fff));
    --placements-alt: var(--bg-alt-color, #f4f7fb);
    --placements-border: var(--border-color, rgba(15, 23, 42, 0.1));
    --placements-heading: var(--heading-color, var(--text-color, #172033));
    --placements-text: var(--text-color, #354052);
    --placements-muted: var(--text-muted-color, #64748b);
    --placements-primary: var(--primary-color, #0055aa);
    --placements-primary-hover: var(--primary-hover-color, var(--placements-primary));
    --placements-secondary: var(--secondary-color, var(--placements-primary));
    --placements-secondary-hover: var(--secondary-hover-color, var(--placements-secondary));
    --placements-accent: var(--accent-color, var(--placements-primary));
    background: var(--bg-color, #f8fafc);
    color: var(--placements-text);
}

.placements-modern-page .placements-shell {
    padding: 52px 0 72px;
}

.placements-modern-page .placements-intro {
    align-items: end;
    background: var(--placements-surface);
    border: 1px solid var(--placements-border);
    border-radius: var(--border-radius, 12px);
    display: flex;
    gap: 30px;
    justify-content: space-between;
    margin-bottom: 36px;
    padding: 34px 38px;
}

.placements-modern-page .placements-intro-copy {
    max-width: 720px;
}

.placements-modern-page .placements-kicker,
.placements-modern-page .placements-section-label {
    color: var(--placements-accent);
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.placements-modern-page .placements-intro h2 {
    color: var(--placements-heading);
    font-family: var(--header-font-family);
    font-size: clamp(29px, 4vw, 39px);
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 12px;
}

.placements-modern-page .placements-intro p {
    color: var(--placements-muted);
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}

.placements-modern-page .placements-actions {
    display: flex;
    flex-shrink: 0;
    flex-wrap: wrap;
    gap: 10px;
}

.placements-modern-page .placements-action {
    align-items: center;
    border: 1px solid var(--placements-secondary);
    border-radius: 999px;
    color: var(--placements-secondary);
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    gap: 9px;
    padding: 12px 20px;
    text-decoration: none;
    transition: background-color .2s ease, border-color .2s ease, color .2s ease, gap .2s ease;
}

.placements-modern-page .placements-action-primary {
    background: var(--placements-primary);
    border-color: var(--placements-primary);
    color: var(--primary-contrast-color, #fff);
}

.placements-modern-page .placements-action-secondary:hover {
    background: var(--placements-secondary-hover);
    border-color: var(--placements-secondary-hover);
    color: var(--secondary-contrast-color, #fff);
    gap: 13px;
    text-decoration: none;
}

.placements-modern-page .placements-action-primary:hover {
    background: var(--placements-primary-hover);
    border-color: var(--placements-primary-hover);
    color: var(--primary-contrast-color, #fff);
    gap: 13px;
    text-decoration: none;
}

.placements-modern-page .placements-outcomes,
.placements-modern-page .placements-partners,
.placements-modern-page .placements-drives {
    margin-bottom: 48px;
}

.placements-modern-page .placements-drives {
    margin-bottom: 0;
}

.placements-modern-page .placements-section-header {
    align-items: end;
    display: flex;
    gap: 24px;
    justify-content: space-between;
    margin-bottom: 21px;
}

.placements-modern-page .placements-section-header h3 {
    color: var(--placements-heading);
    font-family: var(--header-font-family);
    font-size: clamp(23px, 3vw, 28px);
    font-weight: 700;
    line-height: 1.25;
    margin: 0;
}

.placements-modern-page .placements-section-header p {
    color: var(--placements-muted);
    line-height: 1.6;
    margin: 7px 0 0;
}

.placements-modern-page .placements-link {
    align-items: center;
    border: 0;
    color: var(--placements-primary);
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    gap: 9px;
    flex-shrink: 0;
    padding: 8px 0;
    text-decoration: none;
    transition: color .2s ease, gap .2s ease;
}

.placements-modern-page .placements-link:hover {
    color: var(--placements-primary-hover);
    gap: 13px;
    text-decoration: none;
}

.placements-modern-page .placements-metric-grid {
    display: grid;
    gap: 18px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.placements-modern-page .placements-metric {
    background: var(--placements-surface);
    border: 1px solid var(--placements-border);
    border-radius: var(--border-radius, 12px);
    padding: 23px 22px;
}

.placements-modern-page .placements-metric i {
    align-items: center;
    background: color-mix(in srgb, var(--placements-primary) 10%, var(--placements-alt));
    border-radius: 10px;
    color: var(--placements-primary);
    display: inline-flex;
    font-size: 18px;
    height: 44px;
    justify-content: center;
    margin-bottom: 19px;
    width: 44px;
}

.placements-modern-page .placements-metric strong {
    color: var(--placements-heading);
    display: block;
    font-size: clamp(26px, 3vw, 33px);
    font-weight: 700;
    line-height: 1.1;
    margin-bottom: 6px;
}

.placements-modern-page .placements-metric span {
    color: var(--placements-muted);
    font-size: 14px;
    font-weight: 600;
}

.placements-modern-page .placements-partner-grid {
    display: grid;
    gap: 25px 22px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.placements-modern-page .placements-partner {
    text-align: center;
}

.placements-modern-page .placements-partner-logo {
    align-items: center;
    background: var(--placements-alt);
    border: 1px solid var(--placements-border);
    border-radius: var(--border-radius, 10px);
    display: flex;
    height: 142px;
    justify-content: center;
    margin-bottom: 12px;
    overflow: hidden;
    width: 100%;
}

.placements-modern-page .placements-partner-logo img {
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.placements-modern-page .placements-partner-logo span {
    color: var(--placements-primary);
    font-size: 21px;
    font-weight: 700;
}

.placements-modern-page .placements-partner h4 {
    color: var(--placements-heading);
    font-size: var(--text-base);
    font-weight: 600;
    margin: 0;
}

.placements-modern-page .placements-drive-grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.placements-modern-page .placements-drive {
    background: var(--placements-surface);
    border: 1px solid var(--placements-border);
    border-radius: var(--border-radius, 12px);
    display: flex;
    flex-direction: column;
    padding: 23px;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.placements-modern-page .placements-drive:hover {
    border-color: var(--placements-primary);
    box-shadow: 0 16px 32px color-mix(in srgb, var(--placements-text), transparent 93%);
    transform: translateY(-2px);
}

.placements-modern-page .placements-drive-topline {
    align-items: center;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 16px;
}

.placements-modern-page .placements-drive-topline span {
    background: color-mix(in srgb, var(--placements-accent) 12%, var(--placements-alt));
    border-radius: 999px;
    color: var(--placements-accent);
    font-size: 12px;
    font-weight: 700;
    padding: 7px 12px;
}

.placements-modern-page .placements-drive-topline time {
    background: color-mix(in srgb, var(--placements-secondary) 10%, var(--placements-alt));
    border-radius: 999px;
    color: var(--placements-secondary);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 6px 10px;
}

.placements-modern-page .placements-drive h4 {
    color: var(--placements-heading);
    font-size: 20px;
    font-weight: 700;
    line-height: 1.35;
    margin: 0 0 15px;
}

.placements-modern-page .placements-drive-company,
.placements-modern-page .placements-drive-meta {
    align-items: center;
    color: var(--placements-muted);
    display: flex;
    font-size: 14px;
    gap: 9px;
    line-height: 1.5;
    margin: 0 0 9px;
}

.placements-modern-page .placements-drive-company i,
.placements-modern-page .placements-drive-meta i {
    color: var(--placements-primary);
    text-align: center;
    width: 15px;
}

.placements-modern-page .placements-drive-link {
    align-items: center;
    border-top: 1px solid var(--placements-border);
    color: var(--placements-primary);
    display: flex;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    margin-top: auto;
    padding-top: 18px;
    text-decoration: none;
}

.placements-modern-page .placements-drive-link:hover {
    gap: 12px;
    text-decoration: none;
}

@media (max-width: 991px) {
    .placements-modern-page .placements-intro {
        align-items: start;
        flex-direction: column;
    }
    .placements-modern-page .placements-metric-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .placements-modern-page .placements-partner-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .placements-modern-page .placements-drive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .placements-modern-page .placements-shell {
        padding: 38px 0 54px;
    }
    .placements-modern-page .placements-intro {
        margin-bottom: 30px;
        padding: 25px 22px;
    }
    .placements-modern-page .placements-section-header {
        align-items: start;
        flex-direction: column;
        gap: 8px;
    }
    .placements-modern-page .placements-partner-grid,
    .placements-modern-page .placements-drive-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 480px) {
    .placements-modern-page .placements-metric-grid,
    .placements-modern-page .placements-drive-grid {
        grid-template-columns: 1fr;
    }
}

.partner-directory-page .partner-directory-shell {
    padding: 56px 0 72px;
}

.partner-directory-page .partner-directory-intro {
    margin: 0 auto 34px;
    max-width: 760px;
    text-align: center;
}

.partner-directory-page .partner-directory-kicker {
    color: var(--partner-accent);
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.1em;
    margin-bottom: 10px;
    text-transform: uppercase;
}

.partner-directory-page .partner-directory-intro h2 {
    color: var(--partner-heading);
    font-size: clamp(28px, 4vw, 38px);
    font-weight: 700;
    margin: 0 0 12px;
}

.partner-directory-page .partner-directory-intro p {
    color: var(--partner-muted);
    font-size: 16px;
    line-height: 1.7;
    margin: 0;
}

.partner-directory-page .partner-directory-grid {
    display: grid;
    gap: 38px 24px;
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

.partner-directory-page .partner-company-item {
    align-items: center;
    display: flex;
    flex-direction: column;
    text-align: center;
}

.partner-directory-page .partner-company-logo {
    align-items: center;
    background: var(--partner-muted-bg);
    border: 1px solid var(--partner-border);
    border-radius: 10px;
    box-sizing: border-box;
    display: flex;
    height: 110px;
    justify-content: center;
    margin-bottom: 14px;
    overflow: hidden;
    padding: 16px;
    width: 100%;
    transition: border-color 0.25s ease;
}

.partner-directory-page .partner-company-item:hover .partner-company-logo {
    border-color: var(--primary-color);
}

.partner-directory-page .partner-company-logo img {
    height: 100%;
    object-fit: contain;
    width: 100%;
    filter: grayscale(70%);
    opacity: 0.75;
    transition: filter 0.3s ease, opacity 0.3s ease;
}

.partner-directory-page .partner-company-item:hover .partner-company-logo img {
    filter: grayscale(0%);
    opacity: 1;
}
@media (prefers-reduced-motion: reduce) {
    .partner-directory-page .partner-company-logo,
    .partner-directory-page .partner-company-logo img { transition: none; }
}

.partner-directory-page .partner-company-logo span {
    color: var(--partner-secondary);
    font-size: 21px;
    font-weight: 700;
}

.partner-directory-page .partner-company-item h3 {
    color: var(--partner-heading);
    font-size: 16px;
    font-weight: 600;
    margin: 0;
}

/* ════════════════════════════════════════
   DEFAULT THEME — SHARED PAGINATION
   ════════════════════════════════════════ */
.default-pagination {
    display: flex;
    justify-content: center;
    margin-top: 44px;
}
.default-pagination .pagination {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    list-style: none;
    margin: 0;
    padding: 0;
}
.default-pagination .page-item .page-link {
    align-items: center;
    background: var(--surface-color, #fff);
    border: 1.5px solid var(--border-color, rgba(0,0,0,.12));
    border-radius: var(--border-radius, 8px);
    color: var(--text-color);
    display: flex;
    font-family: var(--header-font-family);
    font-size: 0.875rem;
    font-weight: 600;
    height: 40px;
    justify-content: center;
    min-width: 40px;
    padding: 0 12px;
    text-decoration: none;
    transition: background 0.18s, border-color 0.18s, color 0.18s;
}
.default-pagination .page-item .page-link:hover {
    background: color-mix(in srgb, var(--primary-color) 8%, transparent);
    border-color: var(--primary-color);
    color: var(--primary-color);
    text-decoration: none;
}
.default-pagination .page-item.active .page-link {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-contrast-color, #fff);
    pointer-events: none;
}
.default-pagination .page-item.disabled .page-link {
    background: var(--bg-alt-color, rgba(0,0,0,.03));
    border-color: var(--border-color, rgba(0,0,0,.08));
    color: var(--text-muted-color, #aaa);
    cursor: not-allowed;
    opacity: 0.55;
    pointer-events: none;
}
/* alias kept so existing wrapper divs still work */
.partner-directory-pagination { display: contents; }

.partner-directory-page .partner-directory-empty {
    padding: 58px 24px;
    text-align: center;
}

.partner-directory-page .partner-directory-empty i {
    color: color-mix(in srgb, var(--partner-secondary) 38%, transparent);
    font-size: 42px;
    margin-bottom: 16px;
}

.partner-directory-page .partner-directory-empty h3 {
    color: var(--partner-heading);
    font-size: 22px;
    margin: 0 0 8px;
}

.partner-directory-page .partner-directory-empty p {
    color: var(--partner-muted);
    margin: 0;
}

@media (max-width: 991px) {
    .partner-directory-page .partner-directory-grid {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 767px) {
    .partner-directory-page .partner-directory-shell {
        padding: 38px 0 54px;
    }
    .partner-directory-page .partner-directory-grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

@media (max-width: 420px) {
    .partner-directory-page .partner-directory-grid {
        grid-template-columns: 1fr;
    }
}

/* ── Dark section overrides ── */
@media (max-width: 575px) {
    #mu-industry-partners.default-industry-partners-section {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }
}

.home-section-bg-dark .daj-card {
    background: color-mix(in srgb, var(--bg-color), transparent 78%);
    border-color: color-mix(in srgb, var(--bg-color), transparent 68%);
}

.home-section-bg-dark .daj-card:hover {
    box-shadow: 0 18px 44px color-mix(in srgb, var(--accent-color), transparent 68%);
    border-color: color-mix(in srgb, var(--accent-color), transparent 40%);
}

.home-section-bg-dark .daj-card-icon {
    background: linear-gradient(135deg, var(--accent-color), color-mix(in srgb, var(--accent-color), var(--primary-color) 50%));
}

.home-section-bg-dark .daj-card-icon .fa {
    color: #fff;
}

.home-section-bg-dark .daj-card-year {
    background: var(--accent-color);
    color: var(--accent-contrast-color, #000);
}

.home-section-bg-dark .daj-dot {
    background: var(--accent-color);
    box-shadow: 0 0 0 3px var(--accent-color);
    border-color: var(--home-section-surface, var(--bg-color));
}

.home-section-bg-dark .daj-dot-ring {
    border-color: var(--accent-color);
}

.home-section-bg-dark .daj-road-line {
    background: linear-gradient(90deg,
        transparent 0%,
        var(--accent-color) 4%,
        color-mix(in srgb, var(--accent-color), var(--primary-color) 40%) 50%,
        var(--accent-color) 96%,
        transparent 100%
    );
}

@media (max-width: 767px) {
    .home-section-bg-dark .daj-row--top::before,
    .home-section-bg-dark .daj-row--bottom::before {
        background: linear-gradient(to bottom,
            color-mix(in srgb, var(--accent-color), transparent 65%) 0%,
            var(--accent-color) 25%,
            var(--accent-color) 75%,
            color-mix(in srgb, var(--accent-color), transparent 65%) 100%
        );
    }

    .home-section-bg-dark .daj-col::before {
        background: var(--accent-color);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent-color), transparent 76%);
    }
}

.home-section-bg-dark .daj-road-col--up::before {
    background: linear-gradient(to top,
        var(--accent-color) 0%,
        color-mix(in srgb, var(--accent-color), transparent 55%) 100%
    );
}

.home-section-bg-dark .daj-road-col--down::before {
    background: linear-gradient(to bottom,
        var(--accent-color) 0%,
        color-mix(in srgb, var(--accent-color), transparent 55%) 100%
    );
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .daj-col,
    .daj-road-col {
        flex: 0 0 200px;
        width: 200px;
    }
}

/* ── Mobile: vertical timeline ── */
@media (max-width: 767px) {
    /* Kill horizontal scroll */
    .daj-scroll-outer {
        overflow-x: visible;
        padding: 0 20px 24px;
    }

    /* Roadmap fills width */
    .daj-roadmap {
        min-width: 0;
        width: 100%;
    }

    /* Hide cards beyond mobile limit */
    .daj-col--mobile-hide {
        display: none !important;
    }

    /* Hide horizontal road line + dots */
    .daj-road {
        display: none;
    }

    /* Stack each row into a vertical column with left timeline line */
    .daj-row--top,
    .daj-row--bottom {
        flex-direction: column;
        min-height: 0;
        align-items: stretch;
        gap: 16px;
        padding-left: 36px;
        position: relative;
    }

    .daj-row--top { padding-bottom: 8px; }
    .daj-row--bottom { padding-top: 8px; }

    /* Vertical line */
    .daj-row--top::before,
    .daj-row--bottom::before {
        content: '';
        position: absolute;
        left: 12px;
        top: 0;
        bottom: 0;
        width: 2px;
        background: linear-gradient(to bottom,
            color-mix(in srgb, var(--primary-color), transparent 65%) 0%,
            var(--primary-color) 25%,
            var(--primary-color) 75%,
            color-mix(in srgb, var(--primary-color), transparent 65%) 100%
        );
    }

    /* Hide empty cols (the alternating placeholders) */
    .daj-col:not(:has(.daj-card)) {
        display: none;
    }

    /* Each col full-width */
    .daj-col {
        flex: none;
        width: 100%;
        padding: 0;
        position: relative;
    }

    /* Dot aligned on the timeline */
    .daj-col::before {
        content: '';
        position: absolute;
        left: -30px;
        top: 50%;
        transform: translateY(-50%);
        width: 12px;
        height: 12px;
        border-radius: 50%;
        background: var(--primary-color);
        box-shadow: 0 0 0 4px color-mix(in srgb, var(--primary-color), transparent 76%);
        z-index: 2;
    }

    /* Cards fill the column */
    .daj-card {
        width: 100%;
    }

    .daj-card-icon {
        height: 90px;
    }

    .daj-card-icon img {
        width: 56px;
        height: 56px;
        border-radius: 10px;
    }

}

@media (max-width: 575px) {
    #mu-awards.default-awards-section {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }

    .daj-header {
        margin-bottom: 36px;
    }
}

/* Unified view-all action buttons */
:where(.dhb-view-all, .dnb-view-all, .dss-view-all, .dhm-view-all, .dip-view-all, .default-placement-drives-view-all) {
    align-items: center;
    background: transparent !important;
    border: 2px solid var(--primary-color) !important;
    border-radius: var(--border-radius, 4px) !important;
    color: var(--primary-color) !important;
    display: inline-flex;
    font-size: 14px;
    font-weight: 700;
    gap: 8px;
    justify-content: center;
    letter-spacing: 0.02em;
    min-height: 46px;
    padding: 12px 32px;
    text-decoration: none;
    transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, gap 0.25s ease;
}

:where(.dhb-view-all, .dnb-view-all, .dss-view-all, .dhm-view-all, .dip-view-all, .default-placement-drives-view-all):hover,
:where(.dhb-view-all, .dnb-view-all, .dss-view-all, .dhm-view-all, .dip-view-all, .default-placement-drives-view-all):focus {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-contrast-color, #fff) !important;
    gap: 12px;
    text-decoration: none;
}

:where(.dhb-view-all, .dnb-view-all, .dss-view-all, .dhm-view-all, .dip-view-all, .default-placement-drives-view-all) i {
    transition: transform 0.25s ease;
}

:where(.dhb-view-all, .dnb-view-all, .dss-view-all, .dhm-view-all, .dip-view-all, .default-placement-drives-view-all):hover i,
:where(.dhb-view-all, .dnb-view-all, .dss-view-all, .dhm-view-all, .dip-view-all, .default-placement-drives-view-all):focus i {
    transform: translateX(3px);
}


:where(.dhb-view-all, .dnb-view-all, .dss-view-all, .dhm-view-all, .dip-view-all, .default-placement-drives-view-all) {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    border-radius: var(--border-radius, 4px) !important;
    color: var(--primary-contrast-color, #fff) !important;
}

:where(.dhb-view-all, .dnb-view-all, .dss-view-all, .dhm-view-all, .dip-view-all, .default-placement-drives-view-all):hover,
:where(.dhb-view-all, .dnb-view-all, .dss-view-all, .dhm-view-all, .dip-view-all, .default-placement-drives-view-all):focus {
    background: var(--primary-hover-color, var(--primary-color)) !important;
    border-color: var(--primary-hover-color, var(--primary-color)) !important;
    color: var(--primary-contrast-color, #fff) !important;
}

/* Global dark-section action links */
.default-home-section-shell.home-section-bg-dark :where(
    .default-course-card-link,
    .default-facility-link,
    .dhb-card-link,
    .daj-card-link,
    .default-placement-drive-cta,
    .dnb-download
),
.default-home-section-shell .home-section-bg-dark :where(
    .default-course-card-link,
    .default-facility-link,
    .dhb-card-link,
    .daj-card-link,
    .default-placement-drive-cta,
    .dnb-download
) {
    color: var(--primary-color) !important;
}

.default-home-section-shell.home-section-bg-dark .dnb-download,
.default-home-section-shell .home-section-bg-dark .dnb-download {
    border-color: var(--primary-color) !important;
}

.default-home-section-shell.home-section-bg-dark .dnb-download:hover,
.default-home-section-shell .home-section-bg-dark .dnb-download:hover {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-contrast-color, #fff) !important;
}

.default-home-section-shell.home-section-bg-dark :where(
    .default-course-card-link,
    .default-facility-link,
    .dhb-card-link,
    .daj-card-link,
    .default-placement-drive-cta,
    .dnb-download
):hover,
.default-home-section-shell .home-section-bg-dark :where(
    .default-course-card-link,
    .default-facility-link,
    .dhb-card-link,
    .daj-card-link,
    .default-placement-drive-cta,
    .dnb-download
):hover {
    color: var(--primary-color) !important;
}

.default-home-section-shell.home-section-bg-dark :where(
    .default-facilities-view-all,
    .default-events-view-all,
    .default-awards-view-all
),
.default-home-section-shell .home-section-bg-dark :where(
    .default-facilities-view-all,
    .default-events-view-all,
    .default-awards-view-all
) {
    border-color: var(--primary-color) !important;
    color: var(--primary-color) !important;
}

.default-home-section-shell.home-section-bg-dark :where(
    .default-facilities-view-all,
    .default-events-view-all,
    .default-awards-view-all
):hover,
.default-home-section-shell.home-section-bg-dark :where(
    .default-facilities-view-all,
    .default-events-view-all,
    .default-awards-view-all
):focus,
.default-home-section-shell .home-section-bg-dark :where(
    .default-facilities-view-all,
    .default-events-view-all,
    .default-awards-view-all
):hover,
.default-home-section-shell .home-section-bg-dark :where(
    .default-facilities-view-all,
    .default-events-view-all,
    .default-awards-view-all
):focus {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-contrast-color, #fff) !important;
}

/* ═══════════════════════════════════════════════════
   Departments Listing Page  (dpl-*)
═══════════════════════════════════════════════════ */

.dpl-page {
    background: var(--alt-color, #f8f9fa);
}

.dpl-shell {
    padding: 56px 0 72px;
}

.dpl-header {
    margin-bottom: 40px;
    text-align: center;
}

.dpl-header h2 {
    color: var(--heading-color, #1e293b);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    margin-bottom: 0;
}

/* Tile grid — override fixed width from scrolling-track context */
.dpl-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(4, 1fr);
}

.dpl-grid .default-dept-tile {
    width: auto;
}

/* Short description line under name */
.dpl-tile-desc {
    color: inherit;
    font-size: 12px;
    line-height: 1.45;
    opacity: 0.65;
    position: relative;
    z-index: 1;
}

/* Empty */
.dpl-empty {
    color: var(--muted-color, #94a3b8);
    padding: 64px 0;
    text-align: center;
}

.dpl-empty i  { display: block; font-size: 40px; margin-bottom: 16px; }
.dpl-empty h4 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.dpl-empty p  { font-size: 14px; }

/* Responsive */
@media (max-width: 991px) {
    .dpl-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 767px) {
    .dpl-grid  { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575px) {
    .dpl-grid  { grid-template-columns: repeat(2, 1fr); gap: 10px; }
    .dpl-shell { padding: 32px 0 48px; }
}

/* Department detail page */
    html {
        scroll-behavior: smooth;
    }
    .department-page {
        background: var(--bg-color);
        color: var(--text-color);
        font-family: var(--body-font-family);
        overflow-x: clip;
        --department-bg: var(--bg-color);
        --department-alt-bg: var(--bg-alt-color, var(--bg-color));
        --department-surface: var(--card-bg, var(--surface-color, var(--bg-color)));
        --department-muted-surface: var(--bg-alt-color, rgba(0, 0, 0, 0.03));
        --department-border: var(--border-color, rgba(0, 0, 0, 0.12));
        --department-text: var(--text-color);
        --department-muted: var(--text-muted, var(--text-muted-color, #6c757d));
        --department-heading: var(--heading-color, var(--text-color));
        --department-primary: var(--primary-color);
        --department-primary-hover: var(--primary-hover-color, var(--primary-color));
        --department-primary-soft: var(--primary-soft-color, color-mix(in srgb, var(--primary-color), transparent 88%));
        --department-primary-contrast: var(--primary-contrast-color, #fff);
        --department-secondary: var(--secondary-color, var(--primary-color));
        --department-secondary-contrast: var(--secondary-contrast-color, var(--department-primary-contrast));
        --department-accent: var(--accent-color, var(--department-secondary));
    }
    .department-page :where(h1, h2, h3, h4, h5, h6) {
        font-family: var(--header-font-family);
    }
    .department-shell {
        padding: 56px 0 72px;
    }
    .department-hero {
        align-items: stretch;
        background: var(--department-surface);
        border: 1px solid var(--department-border);
        border-radius: var(--border-radius, 8px);
        color: var(--department-text);
        display: grid;
        gap: 0;
        grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
        overflow: hidden;
        animation: departmentFadeUp 0.45s ease both;
    }
    .department-hero-copy {
        min-width: 0;
        padding: 42px;
    }
    .department-kicker,
    .department-section-heading span {
        color: var(--department-accent);
        display: block;
        font-size: 12px;
        font-weight: 700;
        letter-spacing: 0;
        margin-bottom: 8px;
        text-transform: uppercase;
    }
    .department-hero h2 {
        color: var(--department-heading);
        font-size: 38px;
        line-height: 1.15;
        margin: 0 0 18px;
    }
    .department-intro {
        color: var(--department-muted);
        font-size: 16px;
        line-height: 1.75;
        max-height: 230px;
        overflow: hidden;
    }
    .department-actions {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-top: 24px;
    }
    .department-action {
        align-items: center;
        border: 1px solid var(--department-border);
        border-radius: var(--border-radius, 6px);
        color: var(--department-text);
        display: inline-flex;
        font-weight: 700;
        gap: 8px;
        min-height: 42px;
        padding: 10px 16px;
        text-decoration: none;
        transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }
    .department-action:hover {
        border-color: var(--department-primary);
        color: var(--department-primary);
        text-decoration: none;
        transform: translateY(-1px);
    }
    .department-action-primary {
        background: var(--department-primary);
        border-color: var(--department-primary);
        color: var(--department-primary-contrast);
    }
    .department-action-primary:hover {
        background: var(--department-primary-hover);
        border-color: var(--department-primary-hover);
        color: var(--department-primary-contrast);
    }
    .department-hero-media {
        background: color-mix(in srgb, var(--department-primary), var(--department-bg) 82%);
        min-height: 360px;
    }
    .department-hero-media img {
        display: block;
        height: 100%;
        object-fit: cover;
        width: 100%;
    }
    .department-hero-placeholder {
        align-items: center;
        color: var(--department-primary);
        display: flex;
        font-size: 76px;
        height: 100%;
        justify-content: center;
        min-height: 360px;
    }
    .department-stats {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(4, minmax(0, 1fr));
        margin: 18px 0;
    }
    .department-stat {
        background: var(--department-surface);
        border: 1px solid var(--department-border);
        border-radius: var(--border-radius, 8px);
        padding: 20px;
        transition: border-color 0.2s ease, transform 0.2s ease;
    }
    .department-stat:hover {
        border-color: var(--department-primary);
        transform: translateY(-2px);
    }
    .department-stat span {
        color: var(--department-heading);
        display: block;
        font-size: 30px;
        font-weight: 800;
        line-height: 1;
    }
    .department-stat small {
        color: var(--department-muted);
        display: block;
        font-size: var(--text-sm);
        margin-top: 8px;
    }
    .department-document-ticker {
        align-items: stretch;
        background: var(--department-surface);
        border: 1px solid var(--department-border);
        border-radius: var(--border-radius, 8px);
        display: flex;
        margin: 0 0 18px;
        max-width: 100%;
        overflow: hidden;
    }
    .department-document-ticker__label {
        align-items: center;
        background: var(--department-primary);
        color: var(--department-primary-contrast);
        display: inline-flex;
        flex: 0 0 auto;
        font-size: var(--text-sm);
        font-weight: 800;
        gap: 8px;
        min-height: 48px;
        padding: 12px 16px;
        text-transform: uppercase;
    }
    .department-document-ticker__wrap {
        align-items: center;
        display: flex;
        flex: 1 1 auto;
        min-width: 0;
        overflow: hidden;
        white-space: nowrap;
    }
    .department-document-ticker__track {
        align-items: center;
        display: inline-flex;
        min-width: max-content;
        will-change: transform;
        animation: departmentDocumentTicker 30s linear infinite;
    }
    .department-document-ticker:hover .department-document-ticker__track {
        animation-play-state: paused;
    }
    .department-document-ticker__item {
        color: var(--department-text);
        display: inline-flex;
        font-size: 14px;
        font-weight: 700;
        padding: 0 10px;
        text-decoration: none;
    }
    .department-document-ticker__item:hover {
        color: var(--department-primary);
        text-decoration: none;
    }
    .department-document-ticker__sep {
        color: var(--department-muted);
        font-size: 14px;
        padding: 0 2px;
    }
    .department-nav {
        background: var(--department-surface);
        border: 1px solid var(--department-border);
        border-radius: var(--border-radius, 8px);
        box-shadow: 0 10px 24px color-mix(in srgb, var(--text-color), transparent 90%);
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
        margin-bottom: 18px;
        padding: 10px;
        position: sticky;
        top: var(--department-sticky-offset, 82px);
        z-index: 30;
    }
    .department-nav a {
        border-radius: var(--border-radius, 6px);
        color: var(--department-text);
        font-size: var(--text-sm);
        font-weight: 700;
        padding: 9px 12px;
        text-decoration: none;
        transition: background 0.2s ease, color 0.2s ease;
    }
    .department-nav a:hover {
        background: var(--department-primary-soft);
        color: var(--department-primary);
        text-decoration: none;
    }
    .department-nav a.active {
        background: transparent;
        color: var(--department-primary);
        text-decoration: none;
    }
    .department-layout {
        align-items: start;
        display: grid;
        gap: 22px;
        grid-template-columns: minmax(0, 1fr) 320px;
        max-width: 100%;
        min-width: 0;
    }
    .department-main {
        display: grid;
        gap: 22px;
        min-width: 0;
    }
    .department-aside {
        min-width: 0;
    }
    .department-section,
    .department-aside-panel {
        background: var(--department-surface);
        border: 1px solid var(--department-border);
        border-radius: var(--border-radius, 8px);
        min-width: 0;
        padding: 28px;
        scroll-margin-top: calc(var(--department-sticky-offset, 82px) + 72px);
    }
    .department-section-soft {
        background: var(--department-muted-surface);
    }
    .department-section-heading {
        margin-bottom: 18px;
    }
    .department-section-heading h3 {
        color: var(--department-heading);
        font-size: 26px;
        line-height: 1.25;
        margin: 0;
    }
    .department-section-heading-row {
        align-items: center;
        display: flex;
        justify-content: space-between;
        gap: 16px;
    }
    .department-section-heading-row > i {
        align-items: center;
        background: var(--department-primary-soft);
        border-radius: var(--border-radius, 8px);
        color: var(--department-primary);
        display: inline-flex;
        flex: 0 0 44px;
        height: 44px;
        justify-content: center;
        width: 44px;
    }
    .theme-rich-text,
    .department-rich-text {
        color: var(--department-text, var(--text-color));
        font-size: var(--text-base);
        line-height: 1.8;
        max-width: 100%;
        min-width: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .theme-rich-text p:last-child,
    .department-rich-text p:last-child {
        margin-bottom: 0;
    }
    .theme-rich-text h1,
    .theme-rich-text h2,
    .theme-rich-text h3,
    .theme-rich-text h4,
    .theme-rich-text h5,
    .theme-rich-text h6,
    .department-rich-text h1,
    .department-rich-text h2,
    .department-rich-text h3,
    .department-rich-text h4,
    .department-rich-text h5,
    .department-rich-text h6 {
        color: var(--department-heading, var(--heading-color, var(--text-color)));
        line-height: 1.3;
        margin: 22px 0 12px;
    }
    .theme-rich-text h1:first-child,
    .theme-rich-text h2:first-child,
    .theme-rich-text h3:first-child,
    .theme-rich-text h4:first-child,
    .theme-rich-text h5:first-child,
    .theme-rich-text h6:first-child,
    .department-rich-text h1:first-child,
    .department-rich-text h2:first-child,
    .department-rich-text h3:first-child,
    .department-rich-text h4:first-child,
    .department-rich-text h5:first-child,
    .department-rich-text h6:first-child {
        margin-top: 0;
    }
    .theme-rich-text a,
    .department-rich-text a {
        color: var(--department-primary, var(--primary-color));
        font-weight: 700;
        text-decoration: underline;
        text-underline-offset: 3px;
    }
    .theme-rich-text a:hover,
    .department-rich-text a:hover {
        color: var(--department-primary-hover, var(--primary-hover-color, var(--department-primary, var(--primary-color))));
    }
    .theme-rich-text ul,
    .theme-rich-text ol,
    .department-rich-text ul,
    .department-rich-text ol {
        list-style-position: outside;
        margin: 0 0 18px 22px;
        padding-left: 18px;
    }
    .theme-rich-text ul,
    .department-rich-text ul {
        list-style-type: disc;
    }
    .theme-rich-text ol,
    .department-rich-text ol {
        list-style-type: decimal;
    }
    .theme-rich-text ul ul,
    .department-rich-text ul ul {
        list-style-type: circle;
        margin-bottom: 0;
    }
    .theme-rich-text ul ul ul,
    .department-rich-text ul ul ul {
        list-style-type: square;
    }
    .theme-rich-text ol ol,
    .department-rich-text ol ol {
        list-style-type: lower-alpha;
        margin-bottom: 0;
    }
    .theme-rich-text ol ol ol,
    .department-rich-text ol ol ol {
        list-style-type: lower-roman;
    }
    .theme-rich-text li,
    .department-rich-text li {
        display: list-item;
        margin-bottom: 7px;
        padding-left: 2px;
    }
    .theme-rich-text blockquote,
    .department-rich-text blockquote {
        background: var(--department-muted-surface, rgba(0, 0, 0, 0.025));
        border-left: 4px solid var(--department-primary, var(--primary-color));
        color: var(--department-heading, var(--heading-color, var(--text-color)));
        margin: 20px 0;
        padding: 14px 18px;
    }
    .theme-rich-text blockquote p:last-child,
    .department-rich-text blockquote p:last-child {
        margin-bottom: 0;
    }
    .theme-rich-text hr,
    .department-rich-text hr {
        border: 0;
        border-top: 1px solid var(--department-border, var(--border-color, #dee2e6));
        margin: 24px 0;
    }
    .theme-rich-text img,
    .department-rich-text img {
        height: auto;
        max-width: 100%;
    }
    .theme-rich-text figure,
    .department-rich-text figure {
        margin: 20px 0;
    }
    .theme-rich-text figure.image,
    .department-rich-text figure.image {
        display: table;
        max-width: 100%;
    }
    .theme-rich-text figure.image img,
    .department-rich-text figure.image img {
        border-radius: var(--border-radius, 8px);
        display: block;
        width: 100%;
    }
    .theme-rich-text .image-style-align-left,
    .department-rich-text .image-style-align-left {
        float: left;
        margin: 6px 22px 16px 0;
        max-width: min(50%, 360px);
    }
    .theme-rich-text .image-style-align-right,
    .department-rich-text .image-style-align-right {
        float: right;
        margin: 6px 0 16px 22px;
        max-width: min(50%, 360px);
    }
    .theme-rich-text .image-style-align-center,
    .department-rich-text .image-style-align-center {
        margin-left: auto;
        margin-right: auto;
    }
    .theme-rich-text figcaption,
    .department-rich-text figcaption {
        color: var(--department-muted, var(--text-muted, #6c757d));
        caption-side: bottom;
        display: table-caption;
        font-size: var(--text-sm);
        line-height: 1.5;
        padding-top: 8px;
        text-align: center;
    }
    .theme-rich-text pre,
    .department-rich-text pre {
        background: var(--department-muted-surface, #f8f9fa);
        border: 1px solid var(--department-border, var(--border-color, #dee2e6));
        border-radius: var(--border-radius, 8px);
        color: var(--department-heading, var(--heading-color, var(--text-color)));
        font-size: var(--text-sm);
        line-height: 1.6;
        margin: 18px 0;
        overflow-x: auto;
        padding: 14px 16px;
    }
    .theme-rich-text code,
    .department-rich-text code {
        background: var(--department-muted-surface, #f8f9fa);
        border-radius: 4px;
        color: var(--department-heading, var(--heading-color, var(--text-color)));
        font-size: 0.92em;
        padding: 2px 5px;
    }
    .theme-rich-text pre code,
    .department-rich-text pre code {
        background: transparent;
        border-radius: 0;
        padding: 0;
    }
    .theme-rich-text .media,
    .theme-rich-text .raw-html-embed,
    .department-rich-text .media,
    .department-rich-text .raw-html-embed {
        margin: 20px 0;
        max-width: 100%;
        overflow-x: auto;
    }
    .theme-rich-text iframe,
    .theme-rich-text video,
    .department-rich-text iframe,
    .department-rich-text video {
        max-width: 100%;
    }
    .theme-rich-text figure.table,
    .theme-rich-text .table-responsive,
    .department-rich-text figure.table,
    .department-rich-text .table-responsive {
        display: block;
        margin: 18px 0;
        max-width: 100%;
        overflow-x: auto;
    }
    .theme-rich-text table,
    .department-rich-text table {
        background: var(--department-surface, var(--bg-color, #ffffff));
        border: 1px solid var(--department-border, var(--border-color, #dee2e6));
        border-collapse: collapse;
        color: var(--department-text, var(--text-color));
        margin: 0;
        max-width: 100%;
        min-width: 100%;
        width: 100%;
    }
    .theme-rich-text th,
    .theme-rich-text td,
    .department-rich-text th,
    .department-rich-text td {
        border: 1px solid var(--department-border, var(--border-color, #dee2e6));
        line-height: 1.5;
        padding: 10px 12px;
        text-align: left;
        vertical-align: top;
    }
    .theme-rich-text th,
    .department-rich-text th {
        background: var(--department-primary-soft, rgba(var(--primary-rgb, 13, 110, 253), 0.08));
        color: var(--department-heading, var(--heading-color, var(--text-color)));
        font-weight: 800;
    }
    .theme-rich-text tbody tr:nth-child(even) td,
    .department-rich-text tbody tr:nth-child(even) td {
        background: var(--department-muted-surface, rgba(0, 0, 0, 0.025));
    }
    .theme-rich-text caption,
    .department-rich-text caption {
        color: var(--department-muted, var(--text-muted, #6c757d));
        font-size: var(--text-sm);
        padding: 8px 0;
        text-align: left;
    }
    .theme-rich-text::after,
    .department-rich-text::after {
        clear: both;
        content: "";
        display: block;
    }

    .courses-page {
        background: var(--bg-color);
        color: var(--text-color);
        font-family: var(--body-font-family);
    }
    .courses-shell {
        padding: 42px 0 70px;
    }
    .courses-discovery {
        align-items: stretch;
        background: var(--card-bg, var(--bg-color));
        border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
        border-radius: var(--border-radius, 8px);
        display: grid;
        gap: 22px;
        grid-template-columns: minmax(0, 1fr) 380px;
        margin-bottom: 24px;
        padding: 26px;
    }
    .courses-discovery-copy span,
    .courses-group-header span,
    .course-program-topline span {
        color: var(--primary-color);
        display: inline-block;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0;
        margin-bottom: 6px;
        text-transform: uppercase;
    }
    .courses-discovery-copy h2,
    .courses-group-header h3 {
        color: var(--heading-color, var(--text-color));
        font-family: var(--header-font-family);
        line-height: 1.2;
        margin: 0;
    }
    .courses-discovery-copy h2 {
        font-size: 34px;
        max-width: 720px;
    }
    .courses-discovery-copy p {
        color: var(--text-muted, #6c757d);
        font-size: var(--text-base);
        line-height: 1.7;
        margin: 12px 0 0;
        max-width: 680px;
    }
    .courses-discovery-tools {
        align-content: center;
        display: grid;
        gap: 14px;
    }
    .courses-search {
        align-items: center;
        background: var(--bg-alt-color, rgba(0, 0, 0, 0.03));
        border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
        border-radius: var(--border-radius, 8px);
        display: grid;
        gap: 10px;
        grid-template-columns: 18px minmax(0, 1fr);
        padding: 13px 14px;
    }
    .courses-search i {
        color: var(--primary-color);
    }
    .courses-search input {
        background: transparent;
        border: 0;
        color: var(--text-color);
        font-size: 14px;
        min-width: 0;
        outline: 0;
        width: 100%;
    }
    .courses-type-nav {
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
        margin-bottom: 28px;
    }
    .courses-type-nav button {
        background: var(--card-bg, var(--bg-color));
        border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
        border-radius: 999px;
        color: var(--text-color);
        cursor: pointer;
        font-size: var(--text-sm);
        font-weight: 800;
        padding: 9px 14px;
        transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    }
    .courses-type-nav button.active,
    .courses-type-nav button:hover {
        background: var(--primary-color);
        border-color: var(--primary-color);
        color: var(--primary-contrast-color, #fff);
    }
    .courses-group {
        margin-bottom: 38px;
    }
    .courses-group:last-child {
        margin-bottom: 0;
    }
    .courses-group-header {
        align-items: flex-end;
        border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.1));
        display: flex;
        justify-content: space-between;
        margin-bottom: 18px;
        padding-bottom: 12px;
    }
    .courses-group-header h3 {
        font-size: 22px;
    }
    .courses-grid {
        display: grid;
        gap: 22px;
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }
    .course-program-card {
        background: var(--card-bg, var(--bg-color));
        border: 1px solid var(--border-color, rgba(0, 0, 0, 0.12));
        border-radius: var(--border-radius, 8px);
        display: flex;
        flex-direction: column;
        min-height: 100%;
        overflow: hidden;
        transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }
    .course-program-card:hover {
        border-color: var(--primary-color);
        box-shadow: 0 16px 34px rgba(0, 0, 0, 0.09);
        transform: translateY(-2px);
    }
    .course-program-card-no-media {
        background: var(--card-bg, var(--bg-color));
    }
    .course-program-media {
        align-items: center;
        background: color-mix(in srgb, var(--primary-color) 12%, var(--bg-alt-color, #f5f5f5));
        display: flex;
        flex: 0 0 auto;
        justify-content: center;
        min-height: 0;
        overflow: hidden;
        position: relative;
        text-decoration: none;
    }
    .course-program-media::after {
        background: linear-gradient(180deg, transparent 30%, rgba(0, 0, 0, 0.72));
        bottom: 0;
        content: "";
        left: 0;
        opacity: 1;
        pointer-events: none;
        position: absolute;
        right: 0;
        top: 0;
        transition: opacity 0.2s ease;
    }
    .course-program-card:hover .course-program-media::after {
        opacity: 1;
    }
    .course-program-media img {
        display: block;
        aspect-ratio: 16 / 10;
        height: auto;
        object-fit: cover;
        transition: transform 0.25s ease;
        width: 100%;
    }
    .course-program-card:hover .course-program-media img {
        transform: scale(1.04);
    }
    .course-program-media span {
        align-items: center;
        background: var(--primary-color);
        border-radius: 50%;
        color: var(--primary-contrast-color, #fff);
        display: inline-flex;
        font-size: 30px;
        font-weight: 900;
        height: 96px;
        justify-content: center;
        margin: 46px 0;
        position: relative;
        width: 96px;
        z-index: 1;
    }
    .course-program-media .course-program-media-overlay {
        align-items: flex-start;
        background: transparent;
        border-radius: 0;
        bottom: 0;
        color: #fff;
        display: flex;
        flex-direction: column;
        font-size: inherit;
        font-weight: inherit;
        gap: 5px;
        height: auto;
        justify-content: flex-end;
        left: 0;
        margin: 0;
        padding: 16px;
        position: absolute;
        right: 0;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.35);
        top: auto;
        width: auto;
        z-index: 2;
    }
    .course-program-media-overlay small {
        color: color-mix(in srgb, #fff 82%, var(--primary-color));
        font-size: var(--text-xs);
        font-weight: 800;
        line-height: 1.2;
        text-transform: uppercase;
    }
    .course-program-media-overlay strong {
        color: #fff;
        font-family: var(--header-font-family);
        font-size: 18px;
        font-weight: 800;
        line-height: 1.25;
    }
    .course-program-content {
        display: flex;
        flex-direction: column;
        flex: 1 1 auto;
        min-width: 0;
        padding: 18px;
    }
    .course-program-topline {
        align-items: flex-start;
        display: flex;
        gap: 12px;
        justify-content: space-between;
        margin-bottom: 6px;
    }
    .course-program-card h4 {
        color: var(--heading-color, var(--text-color));
        font-family: var(--header-font-family);
        font-size: 18px;
        line-height: 1.25;
        margin: 0;
    }
    .course-program-card h4 a {
        color: inherit;
        text-decoration: none;
    }
    .course-program-card h4 a:hover {
        color: var(--primary-color);
        text-decoration: none;
    }
    .course-program-title {
        color: var(--text-muted, #6c757d);
        font-size: var(--text-sm);
        line-height: 1.45;
        margin: 6px 0 0;
    }
    .course-program-meta {
        display: grid;
        gap: 7px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin: 14px 0 14px;
    }
    .course-program-meta div {
        align-items: center;
        background: transparent;
        border: 0;
        border-bottom: 1px solid var(--border-color, rgba(0, 0, 0, 0.08));
        display: grid;
        gap: 8px;
        grid-template-columns: 16px auto minmax(0, 1fr);
        min-width: 0;
        padding: 0 0 7px;
    }
    .course-program-meta i {
        color: var(--primary-color);
        font-size: 12px;
        line-height: 1.35;
        margin-right: 0;
    }
    .course-program-meta span {
        color: var(--text-muted, #6c757d);
        display: block;
        font-size: 10px;
        font-weight: 700;
        line-height: 1.2;
        text-transform: uppercase;
    }
    .course-program-meta strong {
        color: var(--text-color);
        display: block;
        font-size: 12px;
        line-height: 1.25;
        margin-top: 0;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
    .course-program-description {
        color: var(--text-color);
        font-size: var(--text-sm);
        line-height: 1.55;
        margin: 0 0 14px;
    }
    .course-program-action {
        align-items: center;
        border-radius: var(--border-radius, 8px);
        display: inline-flex;
        font-size: var(--text-sm);
        font-weight: 800;
        gap: 7px;
        justify-content: center;
        margin-top: auto;
        padding: 9px 12px;
        text-decoration: none;
        text-transform: uppercase;
        transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
    }

    .course-program-action {
        background: var(--primary-color);
        border: none;
        color: var(--primary-contrast-color, #fff);
    }
    .course-program-action:hover, .course-program-action:focus {
        background: var(--primary-hover-color);
        color: var(--accent-color);
        text-decoration: none;
    }
    .courses-empty {
        background: var(--bg-alt-color, rgba(0, 0, 0, 0.03));
        border: 1px dashed var(--border-color, rgba(0, 0, 0, 0.16));
        border-radius: var(--border-radius, 8px);
        color: var(--text-muted, #6c757d);
        padding: 26px;
        text-align: center;
    }
    .department-pillars {
        display: grid;
        gap: 14px;
    }
    .department-pillar {
        align-items: flex-start;
        background: var(--department-surface);
        border: 1px solid var(--department-border);
        border-radius: var(--border-radius, 8px);
        display: flex;
        gap: 16px;
        padding: 20px;
        transition: border-color 0.2s ease, transform 0.2s ease;
    }
    .department-pillar:hover {
        border-color: var(--department-primary);
        transform: translateY(-2px);
    }
    .department-pillar-icon {
        align-items: center;
        background: var(--department-primary);
        border-radius: var(--border-radius, 8px);
        color: var(--department-primary-contrast);
        display: inline-flex;
        flex: 0 0 46px;
        height: 46px;
        justify-content: center;
        width: 46px;
    }
    .department-pillar h4,
    .department-faculty h4,
    .department-lab h4 {
        color: var(--department-heading);
        font-size: 18px;
        margin: 0 0 8px;
    }
    .department-faculty-grid {
        display: grid;
        gap: 18px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .department-lab-grid {
        display: grid;
        gap: 16px;
    }
    .department-lab {
        background: var(--department-surface);
        border: 1px solid var(--department-border);
        border-radius: var(--border-radius, 8px);
        display: grid;
        gap: 0;
        grid-template-columns: 220px minmax(0, 1fr);
        min-height: 190px;
        overflow: hidden;
        transition: border-color 0.2s ease, transform 0.2s ease;
    }
    .department-faculty {
        background: var(--department-surface);
        border: 1px solid var(--department-border);
        border-radius: var(--border-radius, 8px);
        display: grid;
        grid-template-columns: 150px minmax(0, 1fr);
        min-height: 190px;
        min-width: 0;
        overflow: hidden;
        transition: border-color 0.2s ease, transform 0.2s ease;
    }
    .department-faculty:hover,
    .department-lab:hover {
        border-color: var(--department-primary);
        transform: translateY(-2px);
    }
    .department-faculty.is-expanded,
    .department-faculty:has(.department-faculty-details[open]) {
        grid-column: 1 / -1;
    }
    .department-lab img {
        height: 190px;
        min-height: 0;
        object-fit: cover;
        width: 100%;
    }
    .department-faculty-photo {
        background: var(--department-muted-surface);
        height: 190px;
        overflow: hidden;
    }
    .department-faculty-photo img {
        display: block;
        height: 100%;
        object-fit: cover;
        object-position: center top;
        width: 100%;
    }
    .department-faculty-body {
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding: 16px;
    }
    .department-lab-body {
        padding: 20px;
    }
    .department-lab-preview {
        color: var(--department-text);
        font-size: 14px;
        line-height: 1.6;
        margin: 0;
    }
    .department-lab-read-more {
        color: var(--department-primary);
        font-weight: 800;
        margin-left: 4px;
        text-decoration: none;
        white-space: nowrap;
    }
    .department-lab-read-more:hover {
        color: var(--department-primary-hover);
        text-decoration: none;
    }
    .department-card-grid {
        display: grid;
        gap: 14px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .department-card-grid-single {
        grid-template-columns: 1fr;
    }
    .department-mini-card,
    .department-event-card {
        background: var(--department-surface);
        border: 1px solid var(--department-border);
        border-radius: var(--border-radius, 8px);
        overflow: hidden;
        transition: border-color 0.2s ease, transform 0.2s ease;
    }
    .department-mini-card:hover,
    .department-event-card:hover {
        border-color: var(--department-primary);
        transform: translateY(-2px);
    }
    .department-mini-card {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        min-height: 180px;
        padding: 18px;
    }
    .department-mini-card h4,
    .department-event-card h4 {
        color: var(--department-heading);
        font-size: var(--text-md);
        line-height: 1.35;
        margin: 0 0 8px;
    }
    .department-mini-card p,
    .department-event-card p {
        color: var(--department-text);
        font-size: 14px;
        line-height: 1.6;
        margin: 0 0 12px;
    }
    .department-mini-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 8px 14px;
        margin-top: 12px;
    }
    .department-mini-meta span {
        align-items: center;
        color: var(--department-muted);
        display: inline-flex;
        font-size: 12px;
        gap: 6px;
        line-height: 1.4;
    }
    .department-mini-meta i {
        color: var(--department-primary);
    }
    .department-inline-link {
        color: var(--department-primary);
        display: inline-flex;
        font-size: var(--text-sm);
        font-weight: 800;
        margin-top: 14px;
        text-decoration: none;
        text-transform: uppercase;
    }
    .department-inline-link:hover {
        color: var(--department-primary-hover);
        text-decoration: none;
    }
    .department-committee-details {
        border-top: 1px solid var(--department-border);
        margin-top: 16px;
        padding-top: 12px;
    }
    .department-committee-details summary {
        align-items: center;
        color: var(--department-primary);
        cursor: pointer;
        display: inline-flex;
        font-size: var(--text-sm);
        font-weight: 800;
        gap: 7px;
        list-style: none;
        text-transform: uppercase;
    }
    .department-committee-details summary::-webkit-details-marker {
        display: none;
    }
    .department-committee-details summary:hover {
        color: var(--department-primary-hover);
    }
    .department-committee-details summary i {
        transition: transform 0.2s ease;
    }
    .department-committee-details[open] summary i {
        transform: rotate(180deg);
    }
    .department-committee-details .read-less-text {
        display: none;
    }
    .department-committee-details[open] .read-more-text {
        display: none;
    }
    .department-committee-details[open] .read-less-text {
        display: inline;
    }
    .department-committee-members {
        display: grid;
        gap: 10px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        margin-top: 14px;
    }
    .department-committee-member {
        background: var(--department-muted-surface);
        border: 1px solid var(--department-border);
        border-radius: var(--border-radius, 8px);
        padding: 12px;
    }
    .department-committee-member strong,
    .department-committee-member span,
    .department-committee-member small {
        display: block;
        line-height: 1.45;
    }
    .department-committee-member strong {
        color: var(--department-heading);
        font-size: 14px;
    }
    .department-committee-member span {
        color: var(--department-text);
        font-size: var(--text-sm);
        margin-top: 2px;
    }
    .department-committee-member small {
        color: var(--department-muted);
        font-size: 12px;
        margin-top: 4px;
    }
    .department-event-card {
        display: grid;
        grid-template-columns: 150px minmax(0, 1fr);
        min-height: 180px;
    }
    .department-event-card img {
        height: 180px;
        object-fit: cover;
        width: 100%;
    }
    .department-event-card-body {
        display: flex;
        flex-direction: column;
        min-width: 0;
        padding: 18px;
    }
    .department-event-card-body .department-inline-link {
        margin-top: auto;
    }
    .department-role {
        color: var(--department-primary);
        font-weight: 700;
        margin-bottom: 10px;
    }
    .department-faculty-meta {
        display: grid;
        gap: 5px;
        margin: 2px 0 12px;
    }
    .department-faculty-meta p {
        font-size: var(--text-sm);
        line-height: 1.45;
        margin: 0;
        overflow-wrap: anywhere;
        word-break: break-word;
    }
    .department-faculty-meta .department-faculty-designation {
        font-weight: 700;
    }
    .department-faculty-details {
        grid-column: 1 / -1;
        margin-top: auto;
        padding: 0 16px 16px;
    }
    .department-faculty-details summary {
        align-items: center;
        color: var(--department-primary);
        cursor: pointer;
        display: inline-flex;
        font-size: var(--text-sm);
        font-weight: 800;
        gap: 7px;
        list-style: none;
        text-transform: uppercase;
    }
    .department-faculty-details summary::-webkit-details-marker {
        display: none;
    }
    .department-faculty-details summary:hover {
        color: var(--department-primary-hover);
    }
    .department-faculty-details summary i {
        transition: transform 0.2s ease;
    }
    .department-faculty-details[open] summary i {
        transform: rotate(180deg);
    }
    .department-faculty-details .read-less-text {
        display: none;
    }
    .department-faculty-details[open] .read-more-text {
        display: none;
    }
    .department-faculty-details[open] .read-less-text {
        display: inline;
    }
    .department-faculty-bio {
        color: var(--department-muted);
        font-size: var(--text-sm);
        line-height: 1.7;
        margin-top: 12px;
    }
    .department-faculty-bio p:last-child {
        margin-bottom: 0;
    }
    .department-faculty-detail-block {
        border-top: 1px solid var(--department-border);
        margin-top: 12px;
        padding-top: 12px;
    }
    .department-faculty-detail-block strong {
        color: var(--department-heading);
        display: block;
        font-size: 12px;
        margin-bottom: 6px;
        text-transform: uppercase;
    }
    .department-faculty-detail-block .department-rich-text {
        color: var(--department-muted);
        font-size: var(--text-sm);
    }
    .department-lab-count {
        background: var(--department-primary-soft);
        border-radius: var(--border-radius, 6px);
        color: var(--department-primary);
        display: inline-block;
        font-size: 12px;
        font-weight: 800;
        margin-top: 10px;
        padding: 6px 10px;
        text-transform: uppercase;
    }
    .department-aside {
        display: grid;
        gap: 18px;
        position: sticky;
        top: 72px;
    }
    .department-aside-panel h3 {
        color: var(--department-heading);
        font-size: 18px;
        margin: 0 0 16px;
    }
    .department-snapshot {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .department-snapshot li {
        align-items: center;
        border-bottom: 1px solid var(--department-border);
        display: grid;
        gap: 10px;
        grid-template-columns: 28px minmax(0, 1fr);
        padding: 12px 0;
    }
    .department-snapshot li:last-child {
        border-bottom: 0;
        padding-bottom: 0;
    }
    .department-snapshot i {
        color: var(--department-primary);
    }
    .department-snapshot span {
        color: var(--department-muted);
        font-size: var(--text-sm);
    }
    .department-snapshot strong {
        color: var(--department-heading);
        display: block;
        font-size: var(--text-base);
        grid-column: 2;
        word-break: break-word;
    }
    .department-related {
        display: grid;
        gap: 8px;
    }
    .department-related a {
        align-items: center;
        background: var(--department-muted-surface);
        border: 1px solid var(--department-border);
        border-radius: var(--border-radius, 8px);
        color: var(--department-text);
        display: flex;
        font-weight: 700;
        justify-content: space-between;
        gap: 12px;
        padding: 12px;
        text-decoration: none;
        transition: border-color 0.2s ease, color 0.2s ease, transform 0.2s ease;
    }
    .department-related a:hover {
        border-color: var(--department-primary);
        color: var(--department-primary);
        text-decoration: none;
        transform: translateX(2px);
    }
    .department-empty {
        background: var(--department-muted-surface);
        border: 1px dashed var(--department-border);
        border-radius: var(--border-radius, 8px);
        color: var(--department-muted);
        padding: 18px;
    }
    .department-empty-small {
        font-size: var(--text-sm);
        padding: 12px;
    }
    @keyframes departmentFadeUp {
        from {
            opacity: 0;
            transform: translateY(10px);
        }
        to {
            opacity: 1;
            transform: translateY(0);
        }
    }
    @keyframes departmentDocumentTicker {
        from {
            transform: translateX(0);
        }
        to {
            transform: translateX(-50%);
        }
    }
    @media (prefers-reduced-motion: reduce) {
        html {
            scroll-behavior: auto;
        }
        .department-hero {
            animation: none;
        }
        .department-document-ticker__track {
            animation: none;
        }
        .department-action,
        .department-stat,
        .department-nav a,
        .department-pillar,
        .department-faculty,
        .department-lab,
        .department-related a {
            transition: none;
        }
        .department-action:hover,
        .department-stat:hover,
        .department-pillar:hover,
        .department-faculty:hover,
        .department-lab:hover,
        .department-related a:hover {
            transform: none;
        }
    }
    @media (max-width: 991px) {
        .department-hero,
        .department-layout {
            grid-template-columns: 1fr;
        }
        .department-aside {
            position: static;
        }
        .department-stats {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .department-document-ticker {
            display: block;
        }
        .department-document-ticker__label {
            width: 100%;
        }
        .department-document-ticker__wrap {
            min-height: 46px;
        }
        .courses-grid {
            grid-template-columns: repeat(2, minmax(0, 1fr));
        }
        .courses-discovery {
            grid-template-columns: 1fr;
        }
    }
    @media (max-width: 767px) {
        .department-actions,
        .department-section-heading-row,
        .dept-hod-message {
            flex-direction: column;
            align-items: flex-start;
        }
        .department-action,
        .department-nav a {
            max-width: 100%;
            white-space: normal;
        }
        .department-nav {
            position: static;
        }
        .department-faculty-grid {
            grid-template-columns: 1fr;
        }
        .department-card-grid {
            grid-template-columns: 1fr;
        }
        .department-committee-members {
            grid-template-columns: 1fr;
        }
        .courses-grid {
            grid-template-columns: 1fr;
        }
        .course-program-meta {
            grid-template-columns: 1fr;
        }
        .department-faculty {
            grid-template-columns: 1fr;
        }
        .department-faculty.is-expanded,
        .department-faculty:has(.department-faculty-details[open]) {
            grid-column: auto;
        }
    }

/* ════════════════════════════════════════
   DEPARTMENT — HOD MESSAGE
   ════════════════════════════════════════ */
.dept-hod-message {
    display: flex;
    gap: 28px;
    align-items: flex-start;
    background: var(--surface-color, var(--bg-color));
    border: 1px solid var(--border-color, rgba(0,0,0,.1));
    border-left: 4px solid var(--secondary-color, var(--primary-color));
    border-radius: var(--border-radius, 8px);
    padding: 28px 32px;
}
.dept-hod-photo-wrap {
    flex-shrink: 0;
}
.dept-hod-photo {
    aspect-ratio: 1 / 1;
    border-radius: var(--border-radius, 8px);
    border: 3px solid color-mix(in srgb, var(--secondary-color, var(--primary-color)), transparent 75%);
    display: block;
    object-fit: cover;
    object-position: top center;
    width: 160px;
}
.dept-hod-body {
    flex: 1;
    min-width: 0;
}
.dept-hod-quote-icon {
    color: var(--secondary-color, var(--primary-color));
    font-size: 22px;
    line-height: 1;
    margin-bottom: 10px;
    opacity: 0.5;
}
.dept-hod-text {
    color: var(--text-color);
    font-size: var(--text-base);
    line-height: 1.75;
    margin-bottom: 16px;
}
.dept-hod-attribution {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.dept-hod-name {
    color: var(--heading-color, var(--text-color));
    font-size: var(--text-base);
    font-weight: 700;
}
.dept-hod-designation {
    color: var(--secondary-color, var(--primary-color));
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.dept-hod-photo-placeholder {
    align-items: center;
    background: color-mix(in srgb, var(--secondary-color, var(--primary-color)), transparent 85%);
    color: var(--secondary-color, var(--primary-color));
    display: flex;
    font-size: 52px;
    font-weight: 800;
    justify-content: center;
    line-height: 1;
}
.department-faculty-photo-placeholder {
    align-items: center;
    background: var(--department-primary-soft);
    color: var(--department-primary);
    display: flex;
    font-size: 42px;
    font-weight: 800;
    height: 100%;
    justify-content: center;
}
@media (max-width: 575px) {
    .dept-hod-message {
        flex-direction: column;
        gap: 16px;
        padding: 20px 18px;
    }
    .dept-hod-photo {
        aspect-ratio: 1 / 1;
        width: 90px;
    }
}

/* ════════════════════════════════════════
   CONTACT PAGE
   ════════════════════════════════════════ */
.default-contact-page {
    --cp-surface : var(--surface-color, var(--bg-color));
    --cp-border  : var(--border-color, color-mix(in srgb, var(--text-color), transparent 84%));
    --cp-muted   : var(--text-muted-color, color-mix(in srgb, var(--text-color), var(--bg-color) 38%));
    --cp-soft-bg : var(--bg-alt-color, color-mix(in srgb, var(--bg-color), var(--text-color) 4%));
    background: var(--bg-color);
    color: var(--text-color);
    padding: 60px 0 88px;
}
.contact-alerts {
    margin-bottom: 28px;
}
.contact-intro {
    margin-bottom: 52px;
    text-align: center;
}
.contact-eyebrow {
    background: color-mix(in srgb, var(--accent-color, var(--primary-color)), transparent 88%);
    border: 1px solid color-mix(in srgb, var(--accent-color, var(--primary-color)), transparent 70%);
    border-radius: 999px;
    color: var(--accent-color, var(--primary-color));
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.1em;
    margin-bottom: 14px;
    padding: 6px 16px;
    text-transform: uppercase;
}
.contact-heading {
    color: var(--heading-color, var(--text-color));
    font-family: var(--header-font-family, inherit);
    font-size: 36px;
    font-weight: 700;
    line-height: 1.15;
    margin: 0 0 14px;
}
.contact-description {
    color: var(--cp-muted);
    font-size: 16px;
    line-height: 1.75;
    margin: 0 auto;
    max-width: 600px;
}
.contact-grid {
    align-items: start;
    display: grid;
    gap: 36px;
    grid-template-columns: 5fr 7fr;
}
.contact-grid--form-left {
    grid-template-columns: 7fr 5fr;
}
.contact-grid--form-left .contact-info-side {
    order: 2;
}
.contact-grid--form-left .contact-form-side {
    order: 1;
}
.contact-info-side {
    display: flex;
    flex-direction: column;
    gap: 20px;
}
.contact-address-card {
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--border-radius, 8px);
    overflow: hidden;
    transition: box-shadow 0.22s ease;
}
.contact-address-card:hover {
    box-shadow: 0 6px 24px color-mix(in srgb, var(--text-color), transparent 90%);
}
.contact-address-card-header {
    align-items: center;
    background: var(--cp-soft-bg);
    border-bottom: 1px solid var(--cp-border);
    display: flex;
    gap: 12px;
    padding: 14px 18px;
}
.contact-address-icon-wrap {
    align-items: center;
    background: color-mix(in srgb, var(--secondary-color, var(--primary-color)), transparent 88%);
    border-radius: 50%;
    color: var(--secondary-color, var(--primary-color));
    display: inline-flex;
    flex-shrink: 0;
    font-size: 14px;
    height: 36px;
    justify-content: center;
    width: 36px;
}
.contact-address-label {
    color: var(--secondary-color, var(--text-color));
    font-size: var(--text-base);
    font-weight: 700;
    line-height: 1.3;
}
.contact-address-card-body {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px 18px;
}
.contact-address-divider {
    border: none;
    border-top: 1px solid var(--cp-border);
    margin: 12px 0;
}
.contact-address-sublabel {
    color: var(--secondary-color, var(--primary-color));
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 8px;
    text-transform: uppercase;
}
.contact-address-row {
    align-items: flex-start;
    color: var(--cp-muted);
    display: flex;
    font-size: 14px;
    gap: 12px;
    line-height: 1.6;
}
.contact-address-row i {
    color: var(--secondary-color, var(--primary-color));
    flex-shrink: 0;
    font-size: var(--text-sm);
    margin-top: 2px;
    text-align: center;
    width: 16px;
}
.contact-address-row a {
    color: var(--primary-color);
    text-decoration: none;
    word-break: break-all;
}
.contact-address-row a:hover {
    color: var(--primary-hover-color, var(--primary-color));
    text-decoration: underline;
}
.contact-map-wrap {
    border: 1px solid var(--cp-border);
    border-radius: var(--border-radius, 8px);
    min-height: 280px;
    overflow: hidden;
}
.contact-map-wrap iframe {
    display: block;
    height: 280px;
    min-height: 280px;
    width: 100%;
}
.contact-form-side {
    align-self: start;
    position: sticky;
    top: 90px;
}
.contact-form-card {
    background: var(--cp-surface);
    border: 1px solid var(--cp-border);
    border-radius: var(--border-radius, 8px);
    box-shadow: 0 8px 40px color-mix(in srgb, var(--text-color), transparent 93%);
    overflow: hidden;
}
.contact-form-card-header {
    align-items: center;
    background: var(--cp-soft-bg);
    border-bottom: 1px solid var(--cp-border);
    display: flex;
    gap: 14px;
    padding: 18px 24px;
}
.contact-form-icon-wrap {
    align-items: center;
    background: color-mix(in srgb, var(--secondary-color, var(--primary-color)), transparent 88%);
    border-radius: 50%;
    color: var(--secondary-color, var(--primary-color));
    display: inline-flex;
    flex-shrink: 0;
    font-size: var(--text-base);
    height: 38px;
    justify-content: center;
    width: 38px;
}
.contact-form-card-header h3 {
    color: var(--text-color);
    font-family: var(--header-font-family, inherit);
    font-size: var(--text-md);
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}
.contact-form-card-desc {
    border-bottom: 1px solid var(--cp-border);
    color: var(--cp-muted);
    font-size: var(--text-base);
    line-height: 1.7;
    padding: 14px 24px;
}
.contact-form {
    padding: 24px 26px 28px;
}
.contact-form .form-group {
    margin-bottom: 18px;
}
.contact-form label {
    color: var(--text-color);
    display: block;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.06em;
    margin-bottom: 6px;
    text-transform: uppercase;
}
.contact-form label .required {
    color: var(--accent-color, #e53e3e);
    margin-left: 2px;
}
.contact-form .form-control {
    background: var(--cp-soft-bg);
    border: 1.5px solid var(--cp-border);
    border-radius: var(--border-radius, 6px);
    color: var(--text-color);
    font-size: 14px;
    height: auto;
    min-height: 44px;
    padding: 10px 14px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.contact-form .form-control:focus {
    background: var(--cp-surface);
    border-color: var(--primary-color);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary-color), transparent 80%);
    outline: none;
}
.contact-form select.form-control {
    appearance: auto;
    cursor: pointer;
}
.contact-form textarea.form-control {
    resize: vertical;
}
.contact-submit-btn {
    align-items: center;
    cursor: pointer;
    display: inline-flex;
    gap: 10px;
    justify-content: center;
    padding: 14px 28px;
    width: 100%;
}
.contact-form-hint {
    color: var(--text-muted-color, color-mix(in srgb, var(--text-color), var(--bg-color) 38%));
    display: block;
    font-size: 12px;
    margin-top: 4px;
}
@media (max-width: 1099px) {
    .contact-form-side {
        position: static;
    }
}
@media (max-width: 991px) {
    .contact-grid {
        grid-template-columns: 1fr;
    }
    .contact-form-side {
        order: -1;
    }
}
@media (max-width: 575px) {
    .default-contact-page {
        padding: 40px 0 64px;
    }
    .contact-heading {
        font-size: 26px;
    }
    .contact-form {
        padding: 18px 16px 22px;
    }
}
/* ════════════════════════════════════════
   FEEDBACK & SURVEY PUBLIC FORM
   ════════════════════════════════════════ */
.feedback-form-wrap {
    max-width: 760px;
    margin: 0 auto;
}
.feedback-success-banner {
    display: flex;
    align-items: center;
    gap: 14px;
    background: color-mix(in srgb, var(--primary-color), white 88%);
    border: 1px solid color-mix(in srgb, var(--primary-color), white 60%);
    border-radius: var(--border-radius, 8px);
    padding: 20px 24px;
    margin-bottom: 32px;
    color: var(--text-color);
}
.feedback-success-banner i {
    font-size: 28px;
    color: var(--primary-color);
    flex-shrink: 0;
}
.feedback-success-banner p {
    margin: 0;
    font-size: 16px;
    font-weight: 500;
}
.feedback-respondent-section {
    background: var(--surface-color, #f8f8f8);
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: var(--border-radius, 6px);
    padding: 18px 20px 8px;
    margin-bottom: 28px;
}
.feedback-section-label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    margin-bottom: 14px;
}
.feedback-question {
    border-bottom: 1px solid var(--border-color, #eee);
    padding: 22px 0;
}
.feedback-question:last-of-type {
    border-bottom: none;
}
.feedback-question-label {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    margin-bottom: 10px;
}
.feedback-question-num {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: 50%;
    background: var(--primary-color);
    color: var(--primary-contrast-color);
    font-size: 12px;
    font-weight: 700;
    flex-shrink: 0;
    margin-top: 1px;
}
.feedback-question-label label {
    font-size: 15px;
    font-weight: 600;
    color: var(--text-color);
    margin: 0;
    cursor: default;
    line-height: 1.5;
}
.feedback-question-label label .required {
    color: #dc3545;
    margin-left: 3px;
}
.feedback-question-hint {
    font-size: 13px;
    color: var(--text-muted-color, #888);
    margin: -4px 0 10px 38px;
}
.feedback-question-input {
    padding-left: 38px;
}
.feedback-question-error {
    color: #dc3545;
    font-size: 13px;
    margin-top: 6px;
    padding-left: 38px;
}
.feedback-faculty-block {
    border: 1px solid var(--border-color, #e0e0e0);
    border-radius: 10px;
    padding: 24px 28px;
    margin-bottom: 28px;
    background: color-mix(in srgb, var(--primary-color), white 96%);
}
.feedback-faculty-block:last-of-type {
    margin-bottom: 0;
}
.feedback-faculty-title {
    font-size: 16px;
    font-weight: 700;
    color: var(--primary-color);
    margin: 0 0 18px 0;
    padding-bottom: 14px;
    border-bottom: 2px solid var(--primary-color);
    display: flex;
    align-items: center;
    gap: 10px;
}
/* Choice inputs (radio, checkbox) */
.feedback-radio-option {
    margin-bottom: 8px;
}
.feedback-choice-label {
    display: flex;
    align-items: center;
    gap: 10px;
    cursor: pointer;
    font-weight: 400;
    margin: 0;
    font-size: 14px;
    color: var(--text-color);
}
.feedback-choice-label input[type="radio"],
.feedback-choice-label input[type="checkbox"] {
    width: 16px;
    height: 16px;
    accent-color: var(--primary-color);
    flex-shrink: 0;
}
/* Likert */
.feedback-likert-options {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.feedback-likert-option {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    cursor: pointer;
    flex: 1;
    min-width: 80px;
    text-align: center;
}
.feedback-likert-option input[type="radio"] {
    width: 18px;
    height: 18px;
    accent-color: var(--primary-color);
}
.feedback-likert-option input[type="radio"]:checked + .feedback-likert-label {
    color: var(--primary-color);
    font-weight: 600;
}
.feedback-likert-label {
    font-size: 12px;
    color: var(--text-color);
    line-height: 1.3;
}
/* Rating */
.feedback-rating-wrap {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.feedback-rating-stars {
    display: flex;
    gap: 6px;
}
.feedback-rating-input {
    position: absolute;
    opacity: 0;
    width: 1px;
    height: 1px;
}
.feedback-rating-star {
    appearance: none;
    background: transparent;
    border: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 28px;
    color: #ccc;
    line-height: 1;
    padding: 0;
    transition: color 0.15s ease;
    margin: 0;
}
.feedback-rating-star .fa {
    pointer-events: none;
}
.feedback-rating-star.is-selected,
.feedback-rating-input:checked + .feedback-rating-star,
.feedback-rating-star:hover {
    color: #f5a623;
}
.feedback-rating-labels {
    display: flex;
    justify-content: space-between;
    font-size: 12px;
    color: var(--text-muted-color, #888);
    max-width: 200px;
}
/* Yes/No */
.feedback-yes-no-wrap {
    display: flex;
    gap: 20px;
}
/* Submit button area */
.feedback-form-submit {
    padding-top: 24px;
    border-top: 1px solid var(--border-color, #eee);
    margin-top: 8px;
}
@media (max-width: 575px) {
    .feedback-likert-options {
        flex-direction: column;
    }
    .feedback-likert-option {
        flex-direction: row;
        text-align: left;
        min-width: unset;
    }
}
    @media (max-width: 575px) {
        .department-shell {
            padding: 32px 0 48px;
        }
        .courses-shell {
            padding: 34px 0 48px;
        }
        .courses-discovery {
            padding: 20px;
        }
        .courses-discovery-copy h2 {
            font-size: 24px;
        }
        .courses-stats {
            grid-template-columns: 1fr;
        }
        .courses-group-header {
            display: block;
        }
        .courses-group-header h3 {
            font-size: 18px;
        }
        .department-hero-copy,
        .department-section,
        .department-aside-panel {
            padding: 20px;
        }
        .department-hero h2 {
            font-size: 28px;
        }
        .department-hero-media,
        .department-hero-placeholder {
            min-height: 230px;
        }
        .department-stats {
            grid-template-columns: 1fr;
        }
        .department-lab {
            grid-template-columns: 1fr;
        }
        .department-faculty {
            grid-template-columns: 1fr;
        }
        .department-event-card {
            grid-template-columns: 1fr;
        }
        .department-lab img {
            height: 230px;
            min-height: 0;
        }
        .department-event-card img {
            height: 210px;
        }
        .department-faculty-photo {
            height: 230px;
        }
        .course-program-card h4 {
            font-size: 20px;
        }
        .course-program-content {
            padding: 18px;
        }
        .department-pillar {
            display: block;
        }
        .department-pillar-icon {
            margin-bottom: 14px;
        }
    }

    /* Image Gallery Listing Page */
    .igl-page {
        --igl-surface: var(--card-bg, var(--surface-color, #fff));
        --igl-border: var(--border-color, rgba(15, 23, 42, 0.1));
        --igl-heading: var(--heading-color, var(--text-color, #172033));
        --igl-muted: var(--text-muted-color, #64748b);
        --igl-primary: var(--primary-color, #0055aa);
        --igl-contrast: var(--primary-contrast-color, #fff);
        background: var(--bg-alt-color, #f4f7fb);
    }
    .igl-shell { padding: 56px 0 72px; }
    .igl-header { margin-bottom: 36px; }
    .igl-header h2 {
        color: var(--igl-heading);
        font-family: var(--header-font-family);
        font-size: clamp(27px, 4vw, 38px);
        margin: 0 0 12px;
    }
    .igl-filter-bar { margin-bottom: 32px; }
    .evl-pill.active {
        background: var(--primary-color, #2563eb);
        border-color: var(--primary-color, #2563eb);
        color: var(--primary-contrast-color, #fff);
    }
    .igl-grid {
        display: grid;
        gap: 12px;
        grid-template-columns: repeat(4, 1fr);
        padding: 0;
    }
    .igl-item { list-style: none; }
    .igl-filter-empty { color: var(--igl-muted, var(--text-muted-color)); font-size: var(--text-base); padding: 32px 0; text-align: center; }
    @keyframes igl-fadeIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
    .igl-item--entering { animation: igl-fadeIn 0.28s ease forwards; }
    .igl-card {
        aspect-ratio: 1;
        border-radius: var(--border-radius, 10px);
        display: block;
        overflow: hidden;
        position: relative;
    }
    .igl-card img {
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
        width: 100%;
    }
    .igl-card:hover img { transform: scale(1.08); }
    .igl-card-overlay {
        align-items: center;
        background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 60%);
        bottom: 0;
        display: flex;
        flex-direction: column;
        gap: 5px;
        justify-content: flex-end;
        left: 0;
        opacity: 0;
        padding: 16px;
        position: absolute;
        right: 0;
        top: 0;
        transition: opacity 0.3s ease;
    }
    .igl-card:hover .igl-card-overlay { opacity: 1; }
    .igl-card-overlay i { color: var(--primary-contrast-color, #fff); font-size: 24px; }
    .igl-card-overlay span {
        color: var(--primary-contrast-color, #fff);
        font-size: 12px;
        font-weight: 600;
        text-align: center;
        text-shadow: 0 1px 4px rgba(0,0,0,0.6);
    }
    .igl-card-badge {
        background: rgba(0,0,0,0.55);
        border-radius: 4px;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        left: 10px;
        letter-spacing: 0.04em;
        padding: 3px 8px;
        position: absolute;
        top: 10px;
    }
    .igl-empty {
        align-items: center;
        border: 1px dashed var(--igl-border);
        border-radius: var(--border-radius, 10px);
        color: var(--igl-muted);
        display: flex;
        flex-direction: column;
        gap: 12px;
        justify-content: center;
        min-height: 220px;
        text-align: center;
    }
    .igl-empty i { color: var(--igl-primary); font-size: 34px; }
    .igl-empty h4 { color: var(--igl-heading); margin: 0; }
    .igl-empty p { margin: 0; }
    @media (max-width: 991px) { .igl-grid { grid-template-columns: repeat(3, 1fr); } }
    @media (max-width: 575px) {
        .igl-shell { padding: 40px 0 56px; }
        .igl-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
    }

    /* Video Gallery Listing Page */
    .vgl-page {
        --vgl-surface: var(--card-bg, var(--surface-color, #fff));
        --vgl-border: var(--border-color, rgba(15, 23, 42, 0.1));
        --vgl-heading: var(--heading-color, var(--text-color, #172033));
        --vgl-text: var(--text-color, #354052);
        --vgl-muted: var(--text-muted-color, #64748b);
        --vgl-primary: var(--primary-color, #0055aa);
        --vgl-contrast: var(--primary-contrast-color, #fff);
        background: var(--bg-alt-color, #f4f7fb);
    }
    .vgl-shell { padding: 56px 0 72px; }
    .vgl-header { margin-bottom: 36px; }
    .vgl-header h2 {
        color: var(--vgl-heading);
        font-family: var(--header-font-family);
        font-size: clamp(27px, 4vw, 38px);
        margin: 0 0 12px;
    }
    .vgl-filter-bar { margin-bottom: 32px; }
    .vgl-grid {
        display: grid;
        gap: 24px;
        grid-template-columns: repeat(3, 1fr);
        padding: 0;
    }
    .vgl-item { list-style: none; }
    .vgl-card {
        color: inherit;
        display: block;
        text-decoration: none;
    }
    .vgl-card:hover { text-decoration: none; }
    .vgl-card-thumb {
        aspect-ratio: 16 / 9;
        border-radius: var(--border-radius, 10px);
        overflow: hidden;
        position: relative;
    }
    .vgl-card-thumb img {
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease, filter 0.3s ease;
        width: 100%;
    }
    .vgl-card:hover .vgl-card-thumb img {
        filter: brightness(0.7);
        transform: scale(1.04);
    }
    .vgl-card-thumb-placeholder {
        align-items: center;
        background: color-mix(in srgb, var(--vgl-primary), transparent 88%);
        display: flex;
        height: 100%;
        justify-content: center;
        width: 100%;
    }
    .vgl-card-thumb-placeholder i {
        color: var(--vgl-primary);
        font-size: 40px;
        opacity: 0.5;
    }
    .vgl-play-btn {
        align-items: center;
        background: rgba(255, 255, 255, 0.92);
        border-radius: 50%;
        color: var(--vgl-primary);
        display: flex;
        font-size: 18px;
        height: 54px;
        justify-content: center;
        left: 50%;
        padding-left: 3px;
        position: absolute;
        top: 50%;
        transform: translate(-50%, -50%) scale(0.88);
        transition: transform 0.25s ease, box-shadow 0.25s ease;
        width: 54px;
    }
    .vgl-card:hover .vgl-play-btn {
        box-shadow: 0 8px 28px rgba(0, 0, 0, 0.28);
        transform: translate(-50%, -50%) scale(1);
    }
    .vgl-card-badge {
        background: rgba(0,0,0,0.55);
        border-radius: 4px;
        bottom: 10px;
        color: #fff;
        font-size: 10px;
        font-weight: 700;
        left: 10px;
        letter-spacing: 0.04em;
        padding: 3px 8px;
        position: absolute;
    }
    .vgl-card-info { padding: 14px 4px 0; }
    .vgl-card-title {
        color: var(--vgl-heading);
        font-family: var(--header-font-family);
        font-size: var(--text-base);
        font-weight: 700;
        line-height: 1.4;
        margin: 0 0 4px;
    }
    .vgl-card-desc {
        color: var(--vgl-muted);
        font-size: var(--text-sm);
        line-height: 1.5;
        margin: 0;
    }
    .vgl-empty {
        align-items: center;
        border: 1px dashed var(--vgl-border);
        border-radius: var(--border-radius, 10px);
        color: var(--vgl-muted);
        display: flex;
        flex-direction: column;
        gap: 12px;
        justify-content: center;
        min-height: 220px;
        text-align: center;
    }
    .vgl-empty i { color: var(--vgl-primary); font-size: 34px; }
    .vgl-empty h4 { color: var(--vgl-heading); margin: 0; }
    .vgl-empty p { margin: 0; }
    @media (max-width: 991px) { .vgl-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 575px) {
        .vgl-shell { padding: 40px 0 56px; }
        .vgl-grid { grid-template-columns: 1fr; }
    }

    /* Awards & Recognitions Page — Vertical Timeline */
    .awd-page {
        --awd-surface: var(--card-bg, var(--surface-color, #fff));
        --awd-border: var(--border-color, rgba(15, 23, 42, 0.1));
        --awd-heading: var(--heading-color, var(--text-color, #172033));
        --awd-text: var(--text-color, #354052);
        --awd-muted: var(--text-muted-color, #64748b);
        --awd-primary: var(--primary-color, #0055aa);
        --awd-accent: var(--accent-color, var(--awd-primary));
        --awd-contrast: var(--primary-contrast-color, #fff);
        background: var(--bg-alt-color, #f4f7fb);
    }
    .awd-shell { padding: 56px 0 72px; }
    .awd-header { margin-bottom: 52px; }
    .awd-header h2 {
        color: var(--awd-heading);
        font-family: var(--header-font-family);
        font-size: clamp(27px, 4vw, 38px);
        margin: 0 0 12px;
    }

    /* Timeline wrapper — 2 columns */
    .awd-timeline {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 28px;
        padding: 0 0 24px;
    }
    .awd-timeline::before { display: none; }

    /* Each item */
    .awd-tl-item {
        display: flex;
        flex-direction: column;
        margin-bottom: 0;
        position: relative;
        width: 100%;
    }
    .awd-tl-item--left,
    .awd-tl-item--right { padding: 0; }

    /* Dot */
    .awd-tl-dot { display: none; }

    /* Card */
    .awd-tl-card {
        background: var(--awd-surface);
        border: 1px solid var(--awd-border);
        border-radius: var(--border-radius, 8px);
        box-shadow: 0 4px 20px color-mix(in srgb, var(--awd-text) 6%, transparent);
        overflow: hidden;
        transition: box-shadow 0.22s ease, transform 0.22s ease;
        width: 100%;
    }
    .awd-tl-card--media {
        display: grid;
        grid-template-columns: minmax(160px, 220px) minmax(0, 1fr);
        min-height: 180px;
    }
    .awd-tl-card--no-media {
        border-left: 4px solid var(--awd-primary);
    }
    .awd-tl-card:hover {
        box-shadow: 0 12px 36px color-mix(in srgb, var(--awd-primary) 14%, transparent);
        transform: translateY(-3px);
    }
    .awd-tl-item--left .awd-tl-card::after,
    .awd-tl-item--right .awd-tl-card::after {
        display: none;
    }

    /* Image inside card */
    .awd-tl-img-wrap {
        aspect-ratio: auto;
        height: 100%;
        min-height: 180px;
        overflow: hidden;
        position: relative;
    }
    .awd-tl-img-wrap img {
        height: 100%;
        object-fit: cover;
        transition: transform 0.4s ease;
        width: 100%;
    }
    .awd-tl-card:hover .awd-tl-img-wrap img { transform: scale(1.05); }
    .awd-tl-year-badge {
        background: var(--awd-primary);
        border-radius: 4px;
        bottom: 12px;
        color: var(--awd-contrast);
        font-size: var(--text-xs);
        font-weight: 800;
        left: 12px;
        letter-spacing: 0.05em;
        padding: 4px 10px;
        position: absolute;
        text-transform: uppercase;
    }

    /* Date strip (shown when no image) */
    .awd-tl-date-strip {
        align-items: center;
        background: color-mix(in srgb, var(--awd-primary), transparent 90%);
        color: var(--awd-primary);
        display: flex;
        font-size: var(--text-sm);
        font-weight: 700;
        gap: 8px;
        padding: 10px 20px;
        border-bottom: 1px solid var(--awd-border);
    }

    /* Card body text */
    .awd-tl-card-body {
        align-self: center;
        padding: 26px 30px;
    }
    .awd-tl-year-pill {
        align-items: center;
        background: color-mix(in srgb, var(--awd-primary) 10%, transparent);
        border-radius: 20px;
        color: var(--awd-primary);
        display: inline-flex;
        font-size: var(--text-xs);
        font-weight: 700;
        gap: 5px;
        letter-spacing: 0.04em;
        margin-bottom: 8px;
        padding: 3px 10px;
    }
    .awd-tl-title {
        color: var(--awd-heading);
        font-family: var(--header-font-family);
        font-size: 19px;
        font-weight: 700;
        line-height: 1.35;
        margin: 0 0 8px;
    }
    .awd-tl-by {
        align-items: center;
        color: var(--awd-accent);
        display: flex;
        font-size: var(--text-sm);
        font-weight: 700;
        gap: 6px;
        margin: 0 0 8px;
    }
    .awd-tl-loc {
        align-items: center;
        color: var(--awd-muted);
        display: flex;
        font-size: var(--text-sm);
        gap: 6px;
        margin: 0 0 10px;
    }
    .awd-tl-loc i, .awd-tl-by i { font-size: var(--text-xs); }
    .awd-tl-desc {
        color: var(--awd-text);
        font-size: 14px;
        line-height: 1.7;
        margin: 0;
    }

    /* Empty state */
    .awd-empty {
        align-items: center;
        border: 1px dashed var(--awd-border);
        border-radius: var(--border-radius, 10px);
        color: var(--awd-muted);
        display: flex;
        flex-direction: column;
        gap: 12px;
        justify-content: center;
        min-height: 220px;
        text-align: center;
    }
    .awd-empty i { color: var(--awd-primary); font-size: 36px; }
    .awd-empty h4 { color: var(--awd-heading); margin: 0; }
    .awd-empty p { margin: 0; }

    /* Responsive */
    @media (max-width: 767px) {
        .awd-shell { padding: 40px 0 56px; }
        .awd-header { margin-bottom: 34px; }
        .awd-timeline { grid-template-columns: 1fr; gap: 20px; }
        .awd-tl-card--media {
            display: block;
        }
        .awd-tl-img-wrap {
            height: 200px;
            min-height: unset;
        }
        .awd-tl-card-body { padding: 18px 20px; }
    }

    /* Reviews Listing Page */
    .rvw-page {
        --rvw-surface: var(--card-bg, var(--surface-color, #fff));
        --rvw-border: var(--border-color, rgba(15, 23, 42, 0.1));
        --rvw-heading: var(--heading-color, var(--text-color, #172033));
        --rvw-text: var(--text-color, #354052);
        --rvw-muted: var(--text-muted-color, #64748b);
        --rvw-primary: var(--primary-color, #0055aa);
        --rvw-contrast: var(--primary-contrast-color, #fff);
        background: var(--bg-alt-color, #f4f7fb);
    }
    .rvw-shell { padding: 56px 0 72px; }
    .rvw-header { margin-bottom: 42px; }
    .rvw-header h2 {
        color: var(--rvw-heading);
        font-family: var(--header-font-family);
        font-size: clamp(27px, 4vw, 38px);
        margin: 0 0 12px;
    }
    .rvw-grid {
        display: grid;
        gap: 24px;
        grid-template-columns: repeat(2, 1fr);
    }
    .rvw-card {
        background: var(--rvw-surface);
        border: 1px solid var(--rvw-border);
        border-radius: var(--border-radius, 12px);
        box-shadow: 0 4px 18px color-mix(in srgb, var(--rvw-text) 5%, transparent);
        display: flex;
        flex-direction: column;
        padding: 28px;
        transition: box-shadow 0.2s ease, transform 0.2s ease;
    }
    .rvw-card:hover {
        box-shadow: 0 12px 36px color-mix(in srgb, var(--rvw-primary) 14%, transparent);
        transform: translateY(-3px);
    }
    .rvw-card-quote {
        color: var(--rvw-primary);
        font-size: 26px;
        line-height: 1;
        margin-bottom: 14px;
        opacity: 0.45;
    }
    .rvw-card-message {
        color: var(--rvw-text);
        flex: 1;
        font-size: var(--text-base);
        font-style: italic;
        line-height: 1.75;
        margin: 0 0 22px;
    }
    .rvw-card-author {
        align-items: center;
        border-top: 1px solid var(--rvw-border);
        display: flex;
        gap: 13px;
        padding-top: 18px;
    }
    .rvw-card-avatar {
        border-radius: 50%;
        flex: 0 0 46px;
        height: 46px;
        object-fit: cover;
        width: 46px;
    }
    .rvw-card-avatar--initial {
        align-items: center;
        background: color-mix(in srgb, var(--rvw-primary), transparent 85%);
        border-radius: 50%;
        color: var(--rvw-primary);
        display: inline-flex;
        flex: 0 0 46px;
        font-size: 20px;
        font-weight: 800;
        height: 46px;
        justify-content: center;
        width: 46px;
    }
    .rvw-card-name {
        color: var(--rvw-heading);
        display: block;
        font-size: var(--text-base);
        font-weight: 700;
    }
    .rvw-card-designation {
        color: var(--rvw-muted);
        display: block;
        font-size: 12px;
        margin-top: 2px;
    }
    .rvw-empty {
        align-items: center;
        border: 1px dashed var(--rvw-border);
        border-radius: var(--border-radius, 10px);
        color: var(--rvw-muted);
        display: flex;
        flex-direction: column;
        gap: 12px;
        justify-content: center;
        min-height: 220px;
        text-align: center;
    }
    .rvw-empty i { color: var(--rvw-primary); font-size: 32px; }
    .rvw-empty h4 { color: var(--rvw-heading); margin: 0; }
    .rvw-empty p { margin: 0; }
    @media (max-width: 575px) {
        .rvw-shell { padding: 40px 0 56px; }
        .rvw-grid { grid-template-columns: 1fr; }
    }

    /* ── Alumni Stories Page (ast-) ── */
    .ast-page {
        --ast-primary:  var(--primary-color, #01bafd);
        --ast-primary-hover: var(--primary-hover-color, var(--ast-primary));
        --ast-contrast: var(--primary-contrast-color, #fff);
        --ast-secondary: var(--secondary-color, var(--ast-primary));
        --ast-accent:    var(--accent-color, #f59e0b);
        --ast-surface:   var(--card-bg, var(--surface-color, #fff));
        --ast-bg-alt:    var(--bg-alt-color, #f4f7fb);
        --ast-border:    var(--border-color, rgba(15,23,42,.1));
        --ast-heading:   var(--heading-color, var(--text-color, #172033));
        --ast-text:      var(--text-color, #354052);
        --ast-muted:     var(--text-muted-color, #64748b);
        background: var(--bg-color, #f8fafc);
        color: var(--ast-text);
        font-size: var(--text-base);
    }
    .ast-page :where(h1,h2,h3,h4) { font-family: var(--header-font-family); }
    .ast-shell { padding: 56px 0 72px; }
    .ast-header { margin-bottom: 48px; }
    .ast-header h2 { font-size: clamp(var(--text-xl), 3.5vw, var(--text-2xl)); font-weight: 700; color: var(--ast-heading); margin-bottom: 12px; }

    /* ── Listing grid ── */
    .ast-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }

    /* Card shell */
    .ast-card {
        background: var(--ast-surface);
        border: 1px solid var(--ast-border);
        border-radius: 16px;
        display: flex;
        flex-direction: column;
        overflow: hidden;
        position: relative;
        transition: box-shadow .25s ease, transform .25s ease;
    }
    .ast-card:hover { box-shadow: 0 14px 44px rgba(0,0,0,.13); transform: translateY(-5px); }

    /* Coloured hero band */
    .ast-card-hero {
        background: linear-gradient(135deg, var(--ast-primary) 0%, color-mix(in srgb, var(--ast-primary) 52%, var(--ast-accent)) 100%);
        flex-shrink: 0;
        height: 88px;
        position: relative;
    }

    /* Featured badge — sits inside the hero band */
    .ast-card-badge {
        position: absolute; top: 12px; right: 12px;
        background: rgba(255, 255, 255, 0.22);
        border: 1px solid rgba(255, 255, 255, 0.38);
        backdrop-filter: blur(4px);
        color: #fff;
        font-size: 10px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
        padding: 3px 10px; border-radius: 20px;
    }

    /* Avatar — centred, overlaps hero/body boundary */
    .ast-avatar-wrap {
        border: 3px solid var(--ast-surface);
        border-radius: 50%;
        bottom: -38px;
        box-shadow: 0 4px 18px rgba(0,0,0,.14);
        height: 76px;
        left: 50%;
        overflow: hidden;
        position: absolute;
        transform: translateX(-50%);
        width: 76px;
    }
    .ast-avatar { display: block; height: 100%; object-fit: cover; object-position: center top; width: 100%; }
    .ast-avatar--initial {
        align-items: center;
        background: linear-gradient(135deg, var(--ast-accent) 0%, color-mix(in srgb, var(--ast-accent) 58%, var(--ast-primary)) 100%);
        color: #fff;
        display: flex;
        font-size: var(--text-xl); font-weight: 800;
        height: 100%; justify-content: center; width: 100%;
    }

    /* Card body */
    .ast-card-body {
        display: flex;
        flex-direction: column;
        flex: 1;
        padding: 52px 22px 22px;
    }

    /* Centred alumni name + achievement pill */
    .ast-card-person { margin-bottom: 18px; text-align: center; }
    .ast-card-name { color: var(--ast-heading); display: block; font-size: var(--text-md); font-weight: 700; margin-bottom: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .ast-card-achievement {
        background: color-mix(in srgb, var(--ast-accent) 13%, transparent);
        border-radius: 20px;
        color: var(--ast-accent);
        display: inline-block;
        font-size: var(--text-xs); font-weight: 700;
        max-width: 100%;
        overflow: hidden;
        padding: 3px 12px;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* Story content */
    .ast-card-title {
        -webkit-box-orient: vertical;
        color: var(--ast-heading);
        display: -webkit-box;
        font-size: var(--text-md); font-weight: 700;
        -webkit-line-clamp: 2;
        line-height: 1.42;
        margin: 0 0 10px;
        overflow: hidden;
    }
    .ast-card-summary {
        -webkit-box-orient: vertical;
        color: var(--ast-muted);
        display: -webkit-box;
        flex: 1;
        font-size: var(--text-sm);
        -webkit-line-clamp: 3;
        line-height: 1.65;
        margin: 0 0 20px;
        overflow: hidden;
    }

    /* Footer */
    .ast-card-footer { align-items: center; border-top: 1px solid var(--ast-border); display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; margin-top: auto; padding-top: 16px; }
    .ast-card-chips { display: flex; flex-wrap: wrap; gap: 6px; }
    .ast-chip {
        align-items: center;
        background: color-mix(in srgb, var(--ast-border) 55%, transparent);
        border-radius: 20px;
        color: var(--ast-muted);
        display: inline-flex;
        font-size: 11px; font-weight: 600;
        gap: 5px;
        padding: 3px 10px;
    }
    .ast-chip i { font-size: 10px; }
    .ast-card-link {
        align-items: center;
        color: var(--ast-primary);
        display: inline-flex;
        font-size: var(--text-sm); font-weight: 700;
        gap: 5px;
        text-decoration: none;
        white-space: nowrap;
    }
    .ast-card-link i { transition: transform .2s ease; }
    .ast-card-link:hover { color: var(--ast-primary-hover); }
    .ast-card-link:hover i { transform: translateX(4px); }

    /* Empty state */
    .ast-empty { background: var(--ast-surface); border: 1px solid var(--ast-border); border-radius: 14px; padding: 64px 24px; text-align: center; }
    .ast-empty i { color: var(--ast-muted); display: block; font-size: var(--text-3xl); margin-bottom: 12px; opacity: .5; }
    .ast-empty h4 { color: var(--ast-heading); font-size: var(--text-lg); margin: 0 0 6px; }
    .ast-empty p { color: var(--ast-muted); font-size: var(--text-base); margin: 0; }
    .ast-pagination { display: flex; justify-content: center; margin-top: 40px; }

    @media (max-width: 991px) { .ast-grid { grid-template-columns: repeat(2, 1fr); } }
    @media (max-width: 575px) {
        .ast-shell { padding: 40px 0 56px; }
        .ast-grid { grid-template-columns: 1fr; gap: 18px; }
        .ast-card-hero { height: 76px; }
    }

    /* ── Alumni Story Detail ── */
    .astd-shell { padding: 48px 0 72px; }
    .astd-layout { display: grid; grid-template-columns: 1fr 300px; gap: 36px; align-items: start; }

    .astd-hero {
        background: var(--ast-surface);
        border: 1px solid var(--ast-border);
        border-top: 4px solid var(--ast-primary);
        border-radius: 16px; padding: 28px 32px;
        box-shadow: 0 4px 20px color-mix(in srgb, var(--ast-text) 6%, transparent);
        display: flex; align-items: center; gap: 24px;
        margin-bottom: 28px;
    }
    .astd-hero-avatar { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid var(--ast-border); flex-shrink: 0; }
    .astd-hero-avatar--initial {
        width: 80px; height: 80px; border-radius: 50%;
        background: var(--ast-primary); color: var(--ast-contrast);
        font-size: var(--text-2xl); font-weight: 700;
        display: flex; align-items: center; justify-content: center; flex-shrink: 0;
        border: 3px solid var(--ast-border);
    }
    .astd-hero-info { flex: 1; min-width: 0; }
    .astd-hero-name { font-size: var(--text-lg); font-weight: 700; margin: 0 0 4px; color: var(--ast-heading); }
    .astd-hero-achievement { font-size: var(--text-base); font-weight: 600; margin: 0 0 12px; }
    .astd-hero-meta { display: flex; flex-wrap: wrap; gap: 12px; }
    .astd-hero-meta-item { display: flex; align-items: center; gap: 6px; font-size: var(--text-sm); color: var(--ast-muted); }
    .astd-featured-tag {
        display: inline-flex; align-items: center; gap: 5px;
        border: 1px solid transparent;
        font-size: var(--text-xs); font-weight: 700; letter-spacing: .4px; text-transform: uppercase;
        padding: 4px 12px; border-radius: 20px; margin-bottom: 12px;
    }

    .astd-article { background: var(--ast-surface); border: 1px solid var(--ast-border); border-radius: 14px; padding: 36px 32px; }
    .astd-title { font-size: clamp(var(--text-xl), 3vw, var(--text-2xl)); font-weight: 800; color: var(--ast-heading); margin: 0 0 16px; line-height: 1.25; }
    .astd-summary { font-size: var(--text-md); color: var(--ast-text); line-height: 1.7; border-left: 4px solid var(--ast-primary); padding: 16px 20px 16px 20px; margin: 0 0 28px; font-style: italic; border-radius: 0 10px 10px 0; }
    .astd-content { font-size: var(--text-base); color: var(--ast-text); line-height: 1.8; }
    .astd-content p { margin-bottom: 1.1em; }
    .astd-content :where(h2,h3,h4) { color: var(--ast-heading); font-family: var(--header-font-family); margin-top: 1.5em; margin-bottom: .5em; }
    .astd-back { margin-top: 28px; }
    .astd-back a { display: inline-flex; align-items: center; gap: 7px; font-size: var(--text-base); font-weight: 600; color: var(--ast-primary); text-decoration: none; }
    .astd-back a:hover { text-decoration: underline; }

    .astd-aside-panel { background: var(--ast-surface); border: 1px solid var(--ast-border); border-radius: 14px; padding: 20px; margin-bottom: 20px; }
    .astd-aside-panel h4 { font-size: var(--text-md); font-weight: 700; color: var(--ast-heading); margin: 0 0 14px; padding-bottom: 10px; border-bottom: 1px solid var(--ast-border); }
    .astd-back-link { align-items: center; color: var(--ast-primary); display: flex; font-size: var(--text-sm); font-weight: 600; gap: 8px; text-decoration: none; }
    .astd-related-item { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; border-bottom: 1px solid var(--ast-border); text-decoration: none; }
    .astd-related-item:last-child { border-bottom: none; padding-bottom: 0; }
    .astd-related-avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--ast-primary); color: var(--ast-contrast); font-size: var(--text-md); font-weight: 700; display: flex; align-items: center; justify-content: center; flex-shrink: 0; object-fit: cover; }
    .astd-related-body strong { display: block; font-size: var(--text-base); color: var(--ast-heading); font-weight: 600; line-height: 1.35; margin-bottom: 3px; }
    .astd-related-body span { font-size: var(--text-sm); color: var(--ast-muted); }

    @media (max-width: 991px) {
        .astd-layout { grid-template-columns: 1fr; }
        .astd-hero { flex-direction: column; text-align: center; }
        .astd-hero-meta { justify-content: center; }
    }
    @media (max-width: 575px) {
        .astd-shell { padding: 32px 0 56px; }
        .astd-article { padding: 24px 18px; }
        .astd-hero { padding: 24px 18px; }
    }

    /* ── Alumni Registration Layout (alr-) ── */
    .alr-section-header { margin-bottom: 40px; text-align: center; }
    .alr-section-header h2 { font-size: clamp(var(--text-xl), 3vw, var(--text-2xl)); font-weight: 700; color: var(--ast-heading); margin: 0 0 10px; }
    .alr-section-header p { color: var(--ast-muted); font-size: var(--text-base); line-height: 1.7; max-width: 680px; margin: 0 auto; }
    .alr-layout {
        align-items: start;
        display: grid;
        gap: 32px;
        grid-template-columns: 5fr 7fr;
    }
    .alr-info-panel {
        background: var(--ast-surface, #fff);
        border: 1px solid var(--ast-border);
        border-radius: var(--border-radius, 12px);
        box-shadow: 0 4px 20px color-mix(in srgb, var(--ast-text, #354052) 5%, transparent);
        padding: 32px 28px;
        position: sticky;
        top: 90px;
    }
    .alr-info-icon {
        align-items: center;
        background: color-mix(in srgb, var(--ast-primary), transparent 88%);
        border-radius: 50%;
        color: var(--ast-primary);
        display: inline-flex;
        font-size: var(--text-xl);
        height: 68px;
        justify-content: center;
        margin-bottom: 18px;
        width: 68px;
    }
    .alr-info-title {
        color: var(--ast-heading);
        font-family: var(--header-font-family, inherit);
        font-size: clamp(var(--text-md), 2vw, var(--text-lg));
        font-weight: 700;
        line-height: 1.3;
        margin: 0 0 10px;
    }
    .alr-info-lead {
        color: var(--ast-muted);
        font-size: var(--text-base);
        line-height: 1.7;
        margin: 0 0 24px;
    }
    .alr-steps {
        border-top: 1px solid var(--ast-border);
        display: flex;
        flex-direction: column;
        gap: 0;
        list-style: none;
        margin: 0;
        padding: 20px 0 0;
    }
    .alr-steps li {
        align-items: flex-start;
        display: flex;
        gap: 14px;
        padding: 12px 0;
        border-bottom: 1px solid var(--ast-border);
    }
    .alr-steps li:last-child { border-bottom: none; padding-bottom: 0; }
    .alr-step-num {
        align-items: center;
        background: color-mix(in srgb, var(--ast-primary), transparent 88%);
        border-radius: 50%;
        color: var(--ast-primary);
        display: inline-flex;
        flex-shrink: 0;
        font-size: var(--text-sm);
        font-weight: 700;
        height: 32px;
        justify-content: center;
        margin-top: 1px;
        width: 32px;
    }
    .alr-steps li > div strong {
        color: var(--ast-heading);
        display: block;
        font-size: var(--text-base);
        font-weight: 700;
        margin-bottom: 3px;
    }
    .alr-steps li > div p {
        color: var(--ast-muted);
        font-size: var(--text-sm);
        line-height: 1.6;
        margin: 0;
    }
    .alr-form-side { align-self: start; }
    @media (max-width: 991px) {
        .alr-layout { grid-template-columns: 1fr; }
        .alr-info-panel { position: static; }
    }
    @media (max-width: 575px) {
        .alr-section-header { margin-bottom: 28px; }
        .alr-info-panel { padding: 22px 18px; }
    }

    /* ── Careers Page (car-) ── */
    .car-page {
        --car-primary:       var(--primary-color, #01bafd);
        --car-primary-hover: var(--primary-hover-color, var(--car-primary));
        --car-contrast:      var(--primary-contrast-color, #fff);
        --car-secondary:     var(--secondary-color, var(--car-primary));
        --car-surface:       var(--card-bg, var(--surface-color, #fff));
        --car-border:        var(--border-color, rgba(15,23,42,.09));
        --car-heading:       var(--heading-color, var(--text-color, #172033));
        --car-text:          var(--text-color, #354052);
        --car-muted:         var(--text-muted-color, #64748b);
        --cp-surface:        var(--surface-color, var(--bg-color));
        --cp-border:         var(--border-color, color-mix(in srgb, var(--text-color), transparent 84%));
        --cp-muted:          var(--text-muted-color, color-mix(in srgb, var(--text-color), var(--bg-color) 38%));
        --cp-soft-bg:        var(--bg-alt-color, color-mix(in srgb, var(--bg-color), var(--text-color) 4%));
        background: var(--bg-color, #f8fafc);
        color: var(--car-text);
        font-size: var(--text-base);
    }
    .car-page :where(h1,h2,h3,h4) { font-family: var(--header-font-family, inherit); }
    .car-shell { padding: 56px 0 72px; }
    .car-header { margin-bottom: 36px; }
    .car-header h2 { font-size: clamp(var(--text-xl), 3vw, var(--text-2xl)); font-weight: 700; color: var(--car-heading); margin: 0 0 10px; }
    .car-header p { color: var(--car-muted); font-size: var(--text-base); line-height: 1.7; margin: 0; }
    .car-filter-bar {
        background: var(--car-surface);
        border: 1px solid var(--car-border);
        border-radius: var(--border-radius, 10px);
        margin-bottom: 28px;
        padding: 16px 20px;
    }
    .car-filter-row {
        align-items: center;
        display: flex;
        flex-wrap: wrap;
        gap: 10px;
    }
    .car-filter-input {
        background: var(--bg-color);
        border: 1.5px solid var(--car-border);
        border-radius: var(--border-radius, 7px);
        color: var(--car-text);
        flex: 1 1 160px;
        font-size: var(--text-sm);
        min-height: 44px;
        padding: 0 14px;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .car-filter-input:focus {
        border-color: var(--car-primary);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--car-primary), transparent 82%);
        outline: none;
    }
    .car-filter-input::placeholder { color: var(--car-muted); opacity: .7; }
    .car-filter-select {
        appearance: none;
        background: var(--bg-color) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23888' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat right 12px center;
        border: 1.5px solid var(--car-border);
        border-radius: var(--border-radius, 7px);
        color: var(--car-text);
        cursor: pointer;
        flex: 1 1 160px;
        font-size: var(--text-sm);
        min-height: 44px;
        padding: 0 36px 0 14px;
        transition: border-color 0.2s ease, box-shadow 0.2s ease;
    }
    .car-filter-select:focus {
        border-color: var(--car-primary);
        box-shadow: 0 0 0 3px color-mix(in srgb, var(--car-primary), transparent 82%);
        outline: none;
    }
    .car-filter-actions { display: flex; gap: 8px; align-items: center; flex-shrink: 0; }
    .car-filter-submit-btn { min-height: 44px; padding: 0 18px; font-size: var(--text-sm); }
    .car-filter-reset {
        background: transparent;
        border: 1.5px solid var(--car-border);
        border-radius: var(--border-radius, 7px);
        color: var(--car-muted);
        font-size: var(--text-sm);
        height: 40px;
        padding: 0 14px;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        transition: border-color 0.2s ease, color 0.2s ease;
    }
    .car-filter-reset:hover { border-color: var(--car-primary); color: var(--car-primary); }
    .car-filter-expired-label {
        align-items: center;
        color: var(--car-muted);
        display: flex;
        font-size: var(--text-sm);
        gap: 6px;
        white-space: nowrap;
    }
    .car-filter-expired-label input[type="checkbox"] { cursor: pointer; }
    .car-filter-expired-row { margin-top: 10px; }
    .car-pagination { margin-top: 32px; }
    .car-list { display: flex; flex-direction: column; gap: 14px; }
    .car-card {
        background: var(--car-surface);
        border: 1px solid var(--car-border);
        border-left: 4px solid transparent;
        border-radius: var(--border-radius, 12px);
        padding: 20px 22px;
        transition: box-shadow 0.22s ease, border-color 0.22s ease;
    }
    .car-card:hover {
        border-left-color: var(--car-primary);
        box-shadow: 0 6px 28px color-mix(in srgb, var(--car-text), transparent 92%);
    }
    .car-card-inner { display: flex; gap: 16px; align-items: flex-start; }
    .car-card-icon {
        align-items: center;
        background: color-mix(in srgb, var(--car-primary), transparent 88%);
        border-radius: 10px;
        color: var(--car-primary);
        display: inline-flex;
        flex-shrink: 0;
        font-size: 18px;
        height: 46px;
        justify-content: center;
        width: 46px;
    }
    .car-card-body { flex: 1; min-width: 0; }
    .car-card-top {
        align-items: flex-start;
        display: flex;
        gap: 10px;
        justify-content: space-between;
        margin-bottom: 3px;
    }
    .car-card-title { font-size: var(--text-md); font-weight: 700; color: var(--car-heading); margin: 0; line-height: 1.35; }
    .car-card-title a { color: inherit; text-decoration: none; }
    .car-card-title a:hover { color: var(--car-primary); }
    .car-badge {
        border-radius: 20px;
        font-size: var(--text-xs);
        font-weight: 700;
        letter-spacing: .04em;
        padding: 3px 10px;
        text-transform: uppercase;
        white-space: nowrap;
        flex-shrink: 0;
    }
    .car-badge--open    { background: color-mix(in srgb, var(--accent-color, #f59e0b), transparent 84%); color: var(--accent-color, #92400e); }
    .car-badge--expired { background: color-mix(in srgb, #94a3b8, transparent 78%); color: #475569; }
    .car-card-meta { color: var(--car-muted); font-size: var(--text-sm); margin: 0 0 10px; }
    .car-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 10px; }
    .car-chips--flush { margin-bottom: 0; }
    .car-chip {
        align-items: center;
        background: color-mix(in srgb, var(--car-primary), transparent 93%);
        border-radius: 20px;
        color: var(--car-text);
        display: inline-flex;
        font-size: var(--text-xs);
        gap: 5px;
        padding: 3px 10px;
    }
    .car-chip i { color: var(--car-primary); font-size: var(--text-xs); }
    .car-card-excerpt { color: var(--car-muted); font-size: var(--text-base); line-height: 1.65; margin: 0 0 14px; }
    .car-card-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--car-border); }
    .car-btn-outline {
        align-items: center;
        background: transparent;
        border: 1.5px solid var(--secondary-color, var(--car-primary));
        border-radius: var(--border-radius, 6px);
        color: var(--secondary-color, var(--car-primary));
        display: inline-flex;
        font-size: var(--text-sm);
        font-weight: 600;
        gap: 6px;
        padding: 7px 16px;
        text-decoration: none;
        transition: background 0.18s ease, color 0.18s ease;
    }
    .car-btn-outline:hover { background: var(--secondary-color, var(--car-primary)); color: var(--secondary-contrast-color, var(--car-contrast)); }
    .car-empty {
        border: 2px dashed var(--car-border);
        border-radius: var(--border-radius, 12px);
        padding: 60px 20px;
        text-align: center;
    }
    .car-empty i { color: var(--car-muted); display: block; font-size: var(--text-3xl); margin-bottom: 14px; opacity: .5; }
    .car-empty p { color: var(--car-muted); font-size: var(--text-base); margin: 0; }
    @media (max-width: 767px) {
        .car-card-inner { flex-direction: column; gap: 10px; }
        .car-filter-row { flex-direction: column; align-items: stretch; }
        .car-filter-input { flex: 1 1 auto; }
        .car-filter-actions { justify-content: flex-start; }
    }
    @media (max-width: 575px) {
        .car-shell { padding: 36px 0 52px; }
        .car-card { padding: 16px 16px; }
    }

    /* ── Career Detail (crd-) ── */
    .crd-hero {
        align-items: flex-start;
        background: var(--car-surface);
        border: 1px solid var(--car-border);
        border-left: 4px solid var(--car-primary);
        border-radius: var(--border-radius, 12px);
        display: flex;
        gap: 20px;
        margin-bottom: 28px;
        padding: 28px 32px;
    }
    .crd-hero-icon {
        align-items: center;
        background: color-mix(in srgb, var(--car-primary), transparent 88%);
        border-radius: 12px;
        color: var(--car-primary);
        display: inline-flex;
        flex-shrink: 0;
        font-size: 24px;
        font-weight: 700;
        height: 60px;
        justify-content: center;
        width: 60px;
    }
    .crd-hero-body { flex: 1; min-width: 0; }
    .crd-hero-title {
        color: var(--car-heading);
        font-family: var(--header-font-family, inherit);
        font-size: clamp(var(--text-xl), 2.5vw, var(--text-2xl));
        font-weight: 800;
        line-height: 1.25;
        margin: 6px 0 6px;
    }
    .crd-hero-dept { color: var(--car-muted); font-size: var(--text-base); margin: 0 0 14px; }
    .crd-hero-chips { display: flex; flex-wrap: wrap; gap: 8px; }
    .crd-hero-chip {
        align-items: center;
        background: color-mix(in srgb, var(--car-primary), transparent 93%);
        border-radius: 20px;
        color: var(--car-text);
        display: inline-flex;
        font-size: var(--text-xs);
        gap: 5px;
        padding: 3px 12px;
    }
    .crd-hero-chip i { color: var(--car-primary); font-size: var(--text-xs); }
    .crd-layout {
        align-items: start;
        display: grid;
        gap: 28px;
        grid-template-columns: 1fr 300px;
    }
    .crd-main { display: flex; flex-direction: column; gap: 20px; }
    .crd-section {
        background: var(--car-surface);
        border: 1px solid var(--car-border);
        border-radius: var(--border-radius, 12px);
        overflow: hidden;
    }
    .crd-section-body {
        color: var(--car-text);
        font-size: var(--text-base);
        line-height: 1.8;
        padding: 24px 26px;
    }
    .crd-section-title {
        color: var(--car-heading);
        font-size: var(--text-md);
        font-weight: 700;
        margin: 0 0 12px;
    }
    .crd-section-content { margin: 0; }
    .crd-section-content p { margin-bottom: 1em; }
    .crd-section-content p:last-child { margin-bottom: 0; }
    .crd-divider {
        border: none;
        border-top: 1px solid var(--car-border);
        margin: 20px 0;
    }
    .crd-back a {
        align-items: center;
        color: var(--car-primary);
        display: inline-flex;
        font-size: var(--text-base);
        font-weight: 600;
        gap: 7px;
        text-decoration: none;
    }
    .crd-back a:hover { text-decoration: underline; }
    .crd-aside-card {
        background: var(--car-surface);
        border: 1px solid var(--car-border);
        border-radius: var(--border-radius, 12px);
        overflow: hidden;
        position: sticky;
        top: 90px;
    }
    .crd-aside-header {
        background: color-mix(in srgb, var(--secondary-color, var(--car-primary)), transparent 92%);
        border-bottom: 1px solid var(--car-border);
        padding: 14px 20px;
    }
    .crd-aside-header h4 { color: var(--car-heading); font-size: var(--text-md); font-weight: 700; margin: 0; }
    .crd-detail-list { display: flex; flex-direction: column; gap: 14px; list-style: none; margin: 0; padding: 18px 20px; }
    .crd-detail-row { align-items: flex-start; display: flex; gap: 12px; }
    .crd-detail-icon { color: var(--secondary-color, var(--car-primary)); flex-shrink: 0; font-size: var(--text-sm); margin-top: 3px; text-align: center; width: 16px; }
    .crd-detail-label { color: var(--car-muted); font-size: var(--text-xs); font-weight: 700; letter-spacing: .05em; margin-bottom: 2px; text-transform: uppercase; }
    .crd-detail-value { color: var(--car-text); font-size: var(--text-base); font-weight: 500; }
    .crd-aside-action { padding: 0 20px 20px; }
    .crd-aside-action .mu-read-more-btn { display: flex; gap: 8px; justify-content: center; width: 100%; }
    .crd-closed-msg {
        background: color-mix(in srgb, #94a3b8, transparent 85%);
        border-radius: var(--border-radius, 8px);
        color: #475569;
        font-size: var(--text-sm);
        padding: 12px 16px;
        text-align: center;
    }
    @media (max-width: 991px) {
        .crd-layout { grid-template-columns: 1fr; }
        .crd-aside-card { position: static; }
    }
    @media (max-width: 767px) {
        .crd-hero { flex-direction: column; gap: 12px; padding: 20px 22px; }
    }
    @media (max-width: 575px) {
        .crd-hero { padding: 18px 16px; }
        .crd-section-body { padding: 18px 18px; }
    }

    /* ── Career Apply (cra-) ── */
    .cra-layout {
        align-items: start;
        display: grid;
        gap: 32px;
        grid-template-columns: 5fr 7fr;
    }
    .cra-info-card {
        background: var(--car-surface);
        border: 1px solid var(--car-border);
        border-radius: var(--border-radius, 12px);
        box-shadow: 0 4px 20px color-mix(in srgb, var(--car-text) 4%, transparent);
        padding: 28px 26px;
        position: sticky;
        top: 90px;
    }
    .cra-info-icon {
        align-items: center;
        background: color-mix(in srgb, var(--car-primary), transparent 88%);
        border-radius: 12px;
        color: var(--car-primary);
        display: inline-flex;
        font-size: 22px;
        font-weight: 700;
        height: 56px;
        justify-content: center;
        margin-bottom: 16px;
        width: 56px;
    }
    .cra-info-title {
        color: var(--car-heading);
        font-family: var(--header-font-family, inherit);
        font-size: clamp(var(--text-md), 2vw, var(--text-lg));
        font-weight: 700;
        line-height: 1.3;
        margin: 0 0 6px;
    }
    .cra-info-meta { color: var(--car-muted); font-size: var(--text-sm); margin: 0 0 14px; }
    .cra-info-divider { border: none; border-top: 1px solid var(--car-border); margin: 18px 0; }
    .cra-back-link {
        align-items: center;
        color: var(--car-primary);
        display: inline-flex;
        font-size: var(--text-sm);
        font-weight: 600;
        gap: 6px;
        text-decoration: none;
    }
    .cra-back-link:hover { text-decoration: underline; }
    .cra-error-bar { margin: 16px 24px 0; }
    .cra-form-side { align-self: start; }
    .cra-closed {
        background: color-mix(in srgb, #94a3b8, transparent 88%);
        border: 1px solid var(--car-border);
        border-radius: var(--border-radius, 12px);
        color: #475569;
        font-size: var(--text-base);
        padding: 32px 24px;
        text-align: center;
    }
    .cra-closed i { display: block; font-size: var(--text-2xl); margin-bottom: 12px; opacity: .5; }
    @media (max-width: 991px) {
        .cra-layout { grid-template-columns: 1fr; }
        .cra-info-card { position: static; }
    }
    @media (max-width: 575px) {
        .cra-info-card { padding: 20px 18px; }
    }

    .committee-page {
        --committee-surface: var(--card-bg, var(--surface-color, #fff));
        --committee-muted-surface: var(--bg-alt-color, #f4f7fb);
        --committee-border: var(--border-color, rgba(15, 23, 42, 0.1));
        --committee-heading: var(--heading-color, var(--text-color, #172033));
        --committee-text: var(--text-color, #354052);
        --committee-muted: var(--text-muted-color, #64748b);
        --committee-primary: var(--primary-color, #0055aa);
        --committee-primary-hover: var(--primary-hover-color, var(--committee-primary));
        --committee-contrast: var(--primary-contrast-color, #fff);
        --committee-secondary: var(--secondary-color, var(--committee-primary));
        --committee-secondary-contrast: var(--secondary-contrast-color, var(--committee-contrast));
        --committee-accent: var(--accent-color, var(--committee-primary));
        background: var(--bg-color, #f8fafc);
        color: var(--committee-text);
    }
    .committee-page :where(h2, h3, h4) {
        font-family: var(--header-font-family);
    }
    .committee-shell {
        padding: 48px 0 68px;
    }
    .committee-hero {
        background: var(--committee-surface);
        border: 1px solid var(--committee-border);
        border-radius: var(--border-radius, 12px);
        box-shadow: 0 18px 46px color-mix(in srgb, var(--committee-text) 6%, transparent);
        display: grid;
        gap: 30px;
        grid-template-columns: minmax(0, 1fr) 220px;
        margin-bottom: 24px;
        overflow: hidden;
        padding: 36px;
        position: relative;
    }
    .committee-hero:before {
        background: var(--committee-primary);
        content: "";
        height: 4px;
        left: 0;
        position: absolute;
        right: 0;
        top: 0;
    }
    .committee-kicker,
    .committee-section-heading > span,
    .committee-section-heading > div > span {
        color: var(--committee-accent);
        display: inline-block;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.08em;
        margin-bottom: 9px;
        text-transform: uppercase;
    }
    .committee-hero h2 {
        color: var(--committee-heading);
        font-size: clamp(27px, 4vw, 38px);
        line-height: 1.2;
        margin: 0;
    }
    .committee-lead {
        color: var(--committee-muted);
        font-size: var(--text-base);
        line-height: 1.7;
        margin: 13px 0 0;
        max-width: 620px;
    }
    .committee-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 12px;
        margin-top: 26px;
    }
    .committee-meta-item {
        background: var(--committee-muted-surface);
        border: 1px solid var(--committee-border);
        border-radius: var(--border-radius, 8px);
        display: grid;
        gap: 2px 10px;
        grid-template-columns: 28px minmax(0, 1fr);
        min-width: 170px;
        padding: 12px 14px;
    }
    .committee-meta-item i {
        align-items: center;
        background: color-mix(in srgb, var(--committee-primary), transparent 88%);
        border-radius: 50%;
        color: var(--committee-primary);
        display: inline-flex;
        grid-row: 1 / span 2;
        height: 28px;
        justify-content: center;
        width: 28px;
    }
    .committee-meta-item span {
        color: var(--committee-muted);
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
    }
    .committee-meta-item strong {
        color: var(--committee-heading);
        font-size: 14px;
        font-weight: 700;
    }
    .committee-hero-summary {
        align-items: center;
        background: linear-gradient(145deg, var(--committee-primary), color-mix(in srgb, var(--committee-primary), #fff 26%));
        border-radius: var(--border-radius, 10px);
        color: var(--committee-contrast);
        display: flex;
        flex-direction: column;
        justify-content: center;
        min-height: 220px;
        padding: 26px;
        text-align: center;
    }
    .committee-summary-icon {
        align-items: center;
        background: rgba(255, 255, 255, 0.18);
        border-radius: 50%;
        display: inline-flex;
        font-size: 27px;
        height: 64px;
        justify-content: center;
        margin-bottom: 17px;
        width: 64px;
    }
    .committee-hero-summary strong {
        color: var(--committee-contrast);
        display: block;
        font-size: 42px;
        font-weight: 800;
        line-height: 1;
    }
    .committee-hero-summary small {
        color: color-mix(in srgb, var(--committee-contrast) 84%, transparent);
        display: block;
        font-size: 12px;
        font-weight: 700;
        margin-top: 9px;
        text-transform: uppercase;
    }
    .committee-section {
        background: var(--committee-surface);
        border: 1px solid var(--committee-border);
        border-radius: var(--border-radius, 12px);
        margin-top: 20px;
        padding: 28px;
    }
    .committee-section-heading {
        margin-bottom: 20px;
    }
    .committee-section-heading h3 {
        color: var(--committee-heading);
        font-size: 25px;
        line-height: 1.28;
        margin: 0;
    }
    .committee-section-heading-row {
        align-items: center;
        display: flex;
        justify-content: space-between;
    }
    .committee-count {
        align-items: center;
        background: color-mix(in srgb, var(--committee-secondary), transparent 90%);
        border-radius: 999px;
        color: var(--committee-secondary);
        display: inline-flex;
        font-size: var(--text-base);
        font-weight: 800;
        height: 42px;
        justify-content: center;
        min-width: 42px;
        padding: 0 14px;
    }
    .committee-rich-text {
        color: var(--committee-text);
        font-size: var(--text-base);
        line-height: 1.8;
    }
    .committee-rich-text > :last-child {
        margin-bottom: 0;
    }
    .committee-member-grid {
        display: grid;
        gap: 16px;
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
    .committee-member-card {
        align-items: center;
        background: var(--committee-muted-surface);
        border: 1px solid var(--committee-border);
        border-radius: var(--border-radius, 10px);
        display: flex;
        gap: 16px;
        min-height: 126px;
        padding: 18px;
        transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
    }
    .committee-member-card:hover {
        border-color: var(--committee-primary);
        box-shadow: 0 12px 28px color-mix(in srgb, var(--committee-text) 6%, transparent);
        transform: translateY(-2px);
    }
    .committee-member-avatar {
        align-items: center;
        background: color-mix(in srgb, var(--committee-primary), transparent 87%);
        border-radius: 50%;
        color: var(--committee-primary);
        display: flex;
        flex: 0 0 58px;
        font-size: 24px;
        font-weight: 800;
        height: 58px;
        justify-content: center;
    }
    .committee-member-content {
        min-width: 0;
    }
    .committee-member-type {
        background: color-mix(in srgb, var(--committee-accent) 12%, transparent);
        border: 1px solid color-mix(in srgb, var(--committee-accent) 28%, transparent);
        border-radius: 999px;
        color: var(--committee-accent);
        display: inline-block;
        font-size: var(--text-xs);
        font-weight: 700;
        letter-spacing: 0.06em;
        margin-bottom: 8px;
        padding: 2px 10px;
        text-transform: uppercase;
    }
    .committee-member-content h4 {
        color: var(--committee-heading);
        font-size: 18px;
        line-height: 1.35;
        margin: 0;
    }
    .committee-member-role {
        color: var(--committee-text);
        font-size: var(--text-sm);
        font-weight: 700;
        line-height: 1.5;
        margin: 4px 0 0;
    }
    .committee-member-contact {
        align-items: center;
        color: var(--committee-muted);
        display: flex;
        font-size: var(--text-sm);
        gap: 7px;
        line-height: 1.45;
        margin: 8px 0 0;
    }
    .committee-member-contact i {
        color: var(--committee-primary);
    }
    .committee-empty {
        align-items: center;
        border: 1px dashed var(--committee-border);
        border-radius: var(--border-radius, 10px);
        color: var(--committee-muted);
        display: flex;
        flex-direction: column;
        gap: 10px;
        justify-content: center;
        min-height: 180px;
        text-align: center;
    }
    .committee-empty i {
        color: var(--committee-primary);
        font-size: 28px;
    }
    .committee-empty p {
        margin: 0;
    }
    @media (max-width: 991px) {
        .committee-hero {
            grid-template-columns: 1fr;
        }
        .committee-hero-summary {
            min-height: 180px;
        }
    }
    @media (max-width: 767px) {
        .committee-shell {
            padding: 34px 0 50px;
        }
        .committee-hero,
        .committee-section {
            padding: 22px;
        }
        .committee-member-grid {
            grid-template-columns: 1fr;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .committee-member-card {
            transition: none;
        }
        .committee-member-card:hover {
            transform: none;
        }
    }

    /* ═══════════════════════════════════════════════════════════
       FACULTIES PAGE  — independent palette, not tied to theme preset
    ═══════════════════════════════════════════════════════════ */
    .fac-page {
        --fac-surface:      var(--surface-color);
        --fac-heading:      var(--text-color);
        --fac-text:         var(--text-color);
        --fac-muted:        var(--text-muted-color);
        --fac-primary:      var(--primary-color);
        --fac-primary-dk:   var(--primary-hover-color);
        --fac-soft:         color-mix(in srgb, var(--border-color, rgba(0,0,0,0.1)), transparent 55%);
        --fac-mid:          var(--border-color, rgba(0,0,0,0.12));
        --fac-border:       var(--border-color, rgba(0,0,0,0.12));
        --fac-shadow-soft:  rgba(0, 0, 0, 0.06);
        --fac-shadow-faint: rgba(0, 0, 0, 0.04);
        --fac-accent:       var(--accent-color);
        --fac-accent-dk:    var(--accent-hover-color);
        background: var(--bg-alt-color, var(--bg-color));
        color: var(--fac-text);
    }
    .fac-page :where(h2, h3, h4) { font-family: var(--header-font-family); }
    .fac-shell { padding: 52px 0 72px; }

    /* Page header */
    .fac-header { margin-bottom: 36px; text-align: center; }
    .fac-heading { color: var(--fac-heading); font-size: clamp(24px, 3.5vw, 34px); font-weight: 700; margin: 0 0 14px; }
    .fac-lead { color: var(--fac-muted); font-size: var(--text-base); margin: 0 auto; max-width: 640px; }

    /* Department filter nav */
    .fac-dept-nav { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 28px; }
    .fac-dept-nav button { background: var(--card-bg, var(--bg-color)); border: 1px solid var(--border-color, rgba(0,0,0,0.12)); border-radius: 999px; color: var(--text-color); cursor: pointer; font-size: 13px; font-weight: 500; padding: 9px 14px; transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease; min-height: 44px; }
    .fac-dept-nav button.active, .fac-dept-nav button:hover { background: var(--primary-color); border-color: var(--primary-color); color: var(--primary-contrast-color, #fff); }

    /* Stats bar */
    .fac-stats-bar {
        display: -webkit-box; display: -ms-flexbox; display: flex;
        -ms-flex-wrap: wrap; flex-wrap: wrap;
        gap: 16px; margin-bottom: 32px;
    }
    .fac-stat {
        -webkit-box-align: center; -ms-flex-align: center; align-items: center;
        background: var(--fac-surface);
        border-top: 3px solid var(--fac-primary);
        border-radius: 8px;
        -webkit-box-shadow: 0 2px 12px var(--fac-shadow-soft); box-shadow: 0 2px 12px var(--fac-shadow-soft);
        display: -webkit-box; display: -ms-flexbox; display: flex;
        -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
        gap: 4px; min-width: 130px; padding: 16px 28px; text-align: center;
    }
    .fac-stat-num {
        color: var(--fac-heading);
        font-family: var(--header-font-family);
        font-size: 30px; font-weight: 800; line-height: 1;
    }
    .fac-stat-label {
        color: var(--fac-muted);
        font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase;
    }

    /* Group container */
    .fac-group { margin-bottom: 40px; }
    .fac-group:last-child { margin-bottom: 0; }

    /* Group header — primary → accent gradient */
    .fac-group-header {
        -webkit-box-align: center; -ms-flex-align: center; align-items: center;
        background: -webkit-linear-gradient(135deg, var(--fac-primary) 0%, color-mix(in srgb, var(--fac-primary) 55%, var(--fac-accent)) 100%);
        background: linear-gradient(135deg, var(--fac-primary) 0%, color-mix(in srgb, var(--fac-primary) 55%, var(--fac-accent)) 100%);
        border-radius: 10px 10px 0 0;
        display: -webkit-box; display: -ms-flexbox; display: flex;
        -ms-flex-wrap: wrap; flex-wrap: wrap;
        gap: 12px; -webkit-box-pack: justify; -ms-flex-pack: justify; justify-content: space-between;
        padding: 14px 20px;
    }
    .fac-group-header-left {
        -webkit-box-align: center; -ms-flex-align: center; align-items: center;
        display: -webkit-box; display: -ms-flexbox; display: flex;
        gap: 12px;
    }
    .fac-group-icon {
        -webkit-box-align: center; -ms-flex-align: center; align-items: center;
        background: rgba(255, 255, 255, 0.18);
        border-radius: 8px; color: #fff;
        display: -webkit-box; display: -ms-flexbox; display: flex;
        font-size: 14px; height: 36px;
        -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
        width: 36px;
    }
    .fac-group-title { color: #fff; font-size: var(--text-md); font-weight: 700; margin: 0; }
    .fac-group-badge {
        background: rgba(255, 255, 255, 0.18);
        border: 1px solid rgba(255, 255, 255, 0.3); border-radius: 20px; color: #fff;
        font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.04em;
        padding: 4px 14px; text-transform: uppercase; white-space: nowrap;
    }

    /* Table card */
    .fac-card {
        background: var(--fac-surface);
        border: 1px solid var(--fac-border);
        border-radius: var(--border-radius, 10px);
        -webkit-box-shadow: 0 4px 24px var(--fac-shadow-faint); box-shadow: 0 4px 24px var(--fac-shadow-faint);
        overflow: hidden;
    }
    .fac-card--connected { border-radius: 0 0 10px 10px; }

    /* Table */
    .fac-tbl { margin-bottom: 0; }
    .fac-tbl > thead > tr > th {
        background: var(--fac-soft);
        border-bottom: 2px solid var(--fac-mid);
        border-top: none;
        color: var(--fac-primary-dk);
        font-family: var(--header-font-family);
        font-size: var(--text-xs); font-weight: 700; letter-spacing: 0.08em;
        padding: 12px 16px; text-transform: uppercase;
        vertical-align: middle; white-space: nowrap;
    }
    .fac-tbl-th--no { text-align: center; width: 40px; }
    .fac-tbl > tbody > tr > td {
        border-color: var(--fac-soft);
        padding: 14px 16px; vertical-align: middle;
    }
    .fac-tbl > tbody > tr:last-child > td { border-bottom: none; }
    .fac-tbl > tbody > tr:hover > td {
        background: var(--fac-soft);
    }
    .fac-tbl-no { color: var(--fac-muted); font-size: var(--text-xs); font-weight: 600; text-align: center; width: 40px; }
    .fac-tbl-action { text-align: right; white-space: nowrap; width: 1%; }

    /* Faculty identity cell */
    .fac-identity {
        -webkit-box-align: center; -ms-flex-align: center; align-items: center;
        display: -webkit-box; display: -ms-flexbox; display: flex;
        gap: 14px; min-width: 200px;
    }
    .fac-identity-photo {
        border: 2px solid var(--fac-mid);
        border-radius: 50%; -ms-flex-negative: 0; flex-shrink: 0;
        height: 52px; overflow: hidden; width: 52px;
    }
    .fac-identity-photo img {
        display: block; height: 100%;
        object-fit: cover; object-position: center top; width: 100%;
    }
    .fac-identity-initials {
        -webkit-box-align: center; -ms-flex-align: center; align-items: center;
        background: var(--fac-mid);
        border-radius: 50%; color: var(--fac-heading);
        display: -webkit-box; display: -ms-flexbox; display: flex;
        font-size: 20px; font-weight: 800; height: 52px;
        -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center;
        width: 52px;
    }
    .fac-identity-name { color: var(--fac-heading); font-size: var(--text-sm); font-weight: 700; line-height: 1.3; }
    .fac-identity-role { color: var(--fac-muted); font-size: var(--text-xs); font-weight: 500; margin-top: 3px; }

    /* Extra field cells & contact links */
    .fac-tbl-val { font-size: var(--text-sm); }
    .fac-tbl-link { color: var(--fac-text); display: inline-block; text-decoration: none; }
    .fac-tbl-link i { color: var(--fac-muted); font-size: var(--text-xs); margin-right: 3px; }
    .fac-tbl-link:hover { color: var(--fac-primary); text-decoration: underline; }

    /* View profile button — sizing only; colors come from .mu-read-more-btn (theme CTA setting) */
    .fac-view-btn {
        font-size: var(--text-xs) !important;
        padding: 5px 14px !important;
        white-space: nowrap;
    }
    .fac-view-btn .fa { font-size: var(--text-xs); margin-left: 3px; }

    /* Empty state */
    .fac-empty {
        -webkit-box-align: center; -ms-flex-align: center; align-items: center;
        background: var(--fac-surface);
        border: 1px dashed var(--fac-mid); border-radius: 10px;
        display: -webkit-box; display: -ms-flexbox; display: flex;
        -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column;
        gap: 10px; padding: 60px 20px; text-align: center;
    }
    .fac-empty i { color: var(--fac-muted); font-size: 40px; opacity: 0.55; }
    .fac-empty h4 { color: var(--fac-heading); font-size: 18px; margin: 0; }
    .fac-empty p { color: var(--fac-muted); font-size: var(--text-sm); margin: 0; }

    @media (max-width: 767px) {
        .fac-shell { padding: 32px 0 48px; }
        .fac-group-header { padding: 12px 16px; }
        .fac-identity { gap: 10px; min-width: 0; }
        .fac-identity-photo,
        .fac-identity-initials { font-size: var(--text-base); height: 40px; width: 40px; }
        .fac-identity-name { font-size: var(--text-sm); }
        .fac-stat { min-width: 100px; padding: 14px 18px; }
        .fac-stat-num { font-size: 24px; }
        /* Stacked card layout — replaces horizontal scroll on mobile */
        .fac-card .table-responsive { overflow-x: visible; }
        .fac-tbl--stacked,
        .fac-tbl--stacked tbody,
        .fac-tbl--stacked tr,
        .fac-tbl--stacked td { display: block; width: 100%; }
        .fac-tbl--stacked thead { display: none; }
        .fac-tbl--stacked tbody tr {
            border-bottom: 2px solid var(--border-color, rgba(0,0,0,.08));
            margin-bottom: 4px;
            padding: 8px 0;
        }
        .fac-tbl--stacked td {
            border-bottom: none;
            padding: 6px 16px;
        }
        .fac-tbl--stacked td[data-label]:not(.fac-tbl-no):not(.fac-tbl-action)::before {
            color: var(--fac-muted);
            content: attr(data-label);
            display: block;
            font-size: 0.7rem;
            font-weight: 700;
            letter-spacing: 0.05em;
            margin-bottom: 2px;
            text-transform: uppercase;
        }
        .fac-tbl-no { display: none; }
        .fac-tbl-action { padding-top: 4px; text-align: left; }
    }
    @media (prefers-reduced-motion: reduce) {
        .fac-view-btn { -webkit-transition: none; transition: none; }
    }
    /* ═══════════════════════════════════════════════════════════
       FACULTY DETAILS PAGE
    ═══════════════════════════════════════════════════════════ */
    .facd-page {
        /* follows the active theme color preset */
        --facd-primary:     var(--primary-color, #1a73e8);
        --facd-primary-dk:  var(--primary-hover-color, #1558b0);
        --facd-soft:        var(--primary-soft-color, #e8f0fe);
        --facd-mid:         color-mix(in srgb, var(--primary-color, #1a73e8) 22%, #fff);
        --facd-accent:      var(--accent-color, var(--primary-color, #1a73e8));
        --facd-accent-soft: color-mix(in srgb, var(--accent-color, var(--primary-color, #1a73e8)) 12%, var(--card-bg, var(--surface-color, #fff)));
        --facd-accent-mid:  color-mix(in srgb, var(--accent-color, var(--primary-color, #1a73e8)) 28%, var(--border-color, rgba(15, 23, 42, 0.1)));
        --facd-heading:     var(--heading-color, var(--text-color, #172033));
        --facd-text:        var(--text-color, #354052);
        --facd-muted:       var(--text-muted-color, #6b7280);
        --facd-surface:     var(--card-bg, var(--surface-color, #fff));
        --facd-border:      var(--border-color, rgba(15, 23, 42, 0.1));
    }
    .facd-shell {
        padding: 52px 0 72px;
    }
    /* Hero card */
    .facd-hero {
        align-items: center;
        background: var(--facd-surface);
        border: 1px solid var(--facd-border);
        border-top: 4px solid var(--facd-primary);
        border-radius: var(--border-radius, 10px);
        display: flex;
        gap: 28px;
        margin-bottom: 32px;
        padding: 28px 32px;
    }
    .facd-hero-photo {
        border: 3px solid var(--facd-accent-mid);
        border-radius: 50%;
        flex-shrink: 0;
        height: 110px;
        overflow: hidden;
        width: 110px;
    }
    .facd-hero-photo img {
        display: block;
        height: 100%;
        object-fit: cover;
        width: 100%;
    }
    .facd-hero-name {
        color: var(--facd-heading);
        font-family: var(--header-font-family);
        font-size: clamp(20px, 3vw, 26px);
        font-weight: 700;
        margin: 0 0 6px;
    }
    .facd-hero-desig {
        color: var(--facd-accent);
        font-size: var(--text-base);
        font-weight: 600;
        margin: 0 0 4px;
    }
    .facd-hero-dept,
    .facd-hero-edu {
        color: var(--facd-muted);
        font-size: var(--text-sm);
        margin: 0 0 3px;
    }
    .facd-hero-dept i,
    .facd-hero-edu i {
        color: var(--facd-primary);
        margin-right: 4px;
    }
    /* Two-column layout */
    .facd-layout {
        display: grid;
        gap: 24px;
        grid-template-columns: 1fr 300px;
    }
    /* Main content sections */
    .facd-section {
        background: var(--facd-surface);
        border: 1px solid var(--facd-border);
        border-radius: 8px;
        margin-bottom: 20px;
        padding: 24px 28px;
    }
    .facd-section:last-child {
        margin-bottom: 0;
    }
    .facd-section-title {
        align-items: center;
        border-bottom: 1px solid var(--facd-border);
        color: var(--facd-heading);
        display: flex;
        font-family: var(--header-font-family);
        font-size: 16px;
        font-weight: 700;
        gap: 8px;
        margin: 0 0 16px;
        padding-bottom: 12px;
    }
    .facd-section-title i {
        color: var(--facd-accent);
    }
    .facd-section-body {
        color: var(--facd-text);
        font-size: 14px;
        line-height: 1.75;
    }
    .facd-no-content {
        color: var(--facd-muted);
        font-size: 14px;
    }
    .facd-back a {
        align-items: center;
        color: var(--facd-primary);
        display: inline-flex;
        font-size: 14px;
        font-weight: 600;
        gap: 6px;
        text-decoration: none;
    }
    .facd-back a:hover {
        text-decoration: underline;
    }
    /* Sidebar */
    .facd-aside-card {
        background: var(--facd-surface);
        border: 1px solid var(--facd-border);
        border-radius: 8px;
        overflow: hidden;
        position: sticky;
        top: 80px;
    }
    .facd-aside-title {
        background: var(--facd-accent-soft);
        border-bottom: 1px solid var(--facd-accent-mid);
        color: var(--facd-primary-dk);
        font-family: var(--header-font-family);
        font-size: var(--text-base);
        font-weight: 700;
        margin: 0;
        padding: 14px 18px;
    }
    .facd-info-list {
        list-style: none;
        margin: 0;
        padding: 0;
    }
    .facd-info-row {
        align-items: flex-start;
        border-bottom: 1px solid var(--facd-border);
        display: flex;
        gap: 12px;
        padding: 12px 18px;
    }
    .facd-info-row:last-child {
        border-bottom: none;
    }
    .facd-info-icon {
        color: var(--facd-accent);
        flex-shrink: 0;
        font-size: 14px;
        margin-top: 2px;
        width: 16px;
    }
    .facd-info-label {
        color: var(--facd-muted);
        font-size: var(--text-xs);
        font-weight: 600;
        text-transform: uppercase;
    }
    .facd-info-value {
        color: var(--facd-text);
        font-size: var(--text-sm);
    }
    .facd-info-link {
        color: var(--facd-primary);
        font-size: var(--text-sm);
        text-decoration: none;
        word-break: break-all;
    }
    .facd-info-link:hover {
        text-decoration: underline;
    }
    @media (max-width: 991px) {
        .facd-layout {
            grid-template-columns: 1fr;
        }
        .facd-aside-card {
            position: static;
        }
    }
    @media (max-width: 767px) {
        .facd-shell {
            padding: 32px 0 48px;
        }
        .facd-hero {
            flex-direction: column;
            padding: 20px;
            text-align: center;
        }
        .facd-hero-photo {
            height: 84px;
            width: 84px;
        }
        .facd-section {
            padding: 18px 16px;
        }
    }

    /* ═══════════════════════════════════════════════════════════
       EVENT DETAILS PAGE
    ═══════════════════════════════════════════════════════════ */
    .event-page {
        --event-surface:    var(--card-bg, var(--surface-color, #fff));
        --event-muted-bg:   var(--bg-alt-color, #f4f7fb);
        --event-border:     var(--border-color, rgba(15, 23, 42, 0.1));
        --event-heading:    var(--heading-color, var(--text-color, #172033));
        --event-text:       var(--text-color, #354052);
        --event-muted:      var(--text-muted-color, #64748b);
        --event-primary:    var(--primary-color, #0055aa);
        --event-primary-h:  var(--primary-hover-color, var(--event-primary));
        --event-contrast:   var(--primary-contrast-color, #fff);
        --event-secondary:  var(--secondary-color, var(--event-primary));
        --event-sec-con:    var(--secondary-contrast-color, var(--event-contrast));
        --event-accent:     var(--accent-color, var(--event-primary));
        --event-radius:     var(--border-radius, 10px);
        background: var(--bg-color, #f8fafc);
        color: var(--event-text);
        font-family: var(--body-font-family);
    }
    .event-page :where(h2, h3, h4) {
        font-family: var(--header-font-family);
        color: var(--event-heading);
    }
    .event-shell {
        padding: 48px 0 68px;
    }

    /* ─── Hero ─── */
    .event-hero {
        display: grid;
        grid-template-columns: 1fr 380px;
        gap: 36px;
        align-items: center;
        background: var(--event-surface);
        border: 1px solid var(--event-border);
        border-radius: var(--event-radius);
        padding: 40px 44px;
        margin-bottom: 32px;
        box-shadow: 0 4px 20px color-mix(in srgb, var(--event-text) 6%, transparent);
    }
    .event-hero-copy h2 {
        font-size: clamp(27px, 4vw, 38px);
        font-weight: 700;
        line-height: 1.2;
        margin: 0 0 12px;
    }
    .event-lead {
        font-size: 16px;
        color: var(--event-muted);
        line-height: 1.7;
        margin-bottom: 20px;
    }
    .event-hero-meta {
        display: flex;
        flex-wrap: wrap;
        gap: 10px 22px;
        margin-top: 16px;
    }
    .event-meta-item {
        display: flex;
        align-items: center;
        gap: 7px;
        font-size: 14px;
        color: var(--event-muted);
    }
    .event-meta-item i {
        color: var(--event-primary);
        font-size: 14px;
        flex-shrink: 0;
    }
    .event-hero-media {
        border-radius: var(--event-radius);
        overflow: hidden;
        aspect-ratio: 4/3;
        background: var(--event-muted-bg);
    }
    .event-hero-media img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        display: block;
    }
    .event-hero-media-placeholder {
        display: flex;
        align-items: center;
        justify-content: center;
        background: color-mix(in srgb, var(--event-primary) 8%, var(--event-surface));
    }
    .event-hero-media-placeholder i {
        font-size: 56px;
        color: color-mix(in srgb, var(--event-primary) 35%, transparent);
    }

    /* ─── Layout ─── */
    .event-layout {
        display: grid;
        grid-template-columns: 1fr 300px;
        gap: 28px;
        align-items: start;
    }

    /* ─── Sections ─── */
    .event-section {
        background: var(--event-surface);
        border: 1px solid var(--event-border);
        border-radius: var(--event-radius);
        padding: 32px 36px;
        margin-bottom: 24px;
    }
    .event-section-soft {
        background: var(--event-muted-bg);
    }
    .event-section-heading {
        margin-bottom: 22px;
    }
    .event-section-heading span {
        display: block;
        font-size: 12px;
        font-weight: 800;
        letter-spacing: 0.08em;
        text-transform: uppercase;
        color: var(--event-accent);
        margin-bottom: 6px;
    }
    .event-section-heading h3 {
        font-size: 25px;
        font-weight: 700;
        line-height: 1.28;
        margin: 0;
    }
    .event-section-heading-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    .event-section-heading-row > i {
        font-size: 28px;
        color: color-mix(in srgb, var(--event-primary) 22%, transparent);
    }

    /* ─── Rich text ─── */
    .event-rich-text {
        font-size: var(--text-base);
        line-height: 1.8;
        color: var(--event-text);
    }
    .event-rich-text :where(h2, h3, h4) {
        margin-top: 1.2em;
    }
    .event-rich-text a {
        color: var(--event-primary);
    }
    .event-rich-text a:hover {
        color: var(--event-primary-h);
    }

    /* Event gallery carousel */
    .event-gallery-section {
        overflow: hidden;
    }
    .event-gallery-carousel {
        position: relative;
    }
    .event-gallery-viewport {
        border-radius: calc(var(--event-radius) - 2px);
        overflow: hidden;
    }
    .event-gallery-track {
        display: flex;
        transition: transform 0.4s ease;
        will-change: transform;
    }
    .event-gallery-slide {
        background: var(--event-muted-bg);
        flex: 0 0 100%;
        margin: 0;
        min-width: 0;
        position: relative;
    }
    .event-gallery-slide img {
        display: block;
        height: 410px;
        object-fit: cover;
        width: 100%;
    }
    .event-gallery-slide figcaption {
        background: linear-gradient(to top, rgba(15, 23, 42, 0.82), transparent);
        bottom: 0;
        color: #fff;
        display: grid;
        gap: 4px;
        left: 0;
        padding: 58px 22px 46px;
        position: absolute;
        right: 0;
    }
    .event-gallery-slide figcaption strong {
        color: #fff;
        font-size: var(--text-md);
    }
    .event-gallery-slide figcaption span {
        color: rgba(255, 255, 255, 0.92);
        font-size: var(--text-sm);
        line-height: 1.5;
    }
    .event-gallery-control {
        align-items: center;
        background: color-mix(in srgb, var(--event-surface) 92%, transparent);
        border: 1px solid var(--event-border);
        border-radius: 50%;
        box-shadow: 0 3px 12px rgba(15, 23, 42, 0.15);
        color: var(--event-primary);
        cursor: pointer;
        display: flex;
        font-size: 22px;
        height: 44px;
        justify-content: center;
        position: absolute;
        top: 50%;
        transform: translateY(-50%);
        transition: background 0.2s, color 0.2s;
        width: 44px;
        z-index: 2;
    }
    .event-gallery-control:hover {
        background: var(--event-primary);
        border-color: var(--event-primary);
        color: var(--event-contrast);
    }
    .event-gallery-control-prev {
        left: 16px;
    }
    .event-gallery-control-next {
        right: 16px;
    }
    .event-gallery-dots {
        align-items: center;
        bottom: 18px;
        display: flex;
        gap: 7px;
        justify-content: center;
        left: 50%;
        position: absolute;
        transform: translateX(-50%);
        z-index: 3;
    }
    .event-gallery-dot {
        background: rgba(255, 255, 255, 0.58);
        border: 0;
        border-radius: 8px;
        cursor: pointer;
        height: 8px;
        padding: 0;
        transition: background 0.2s, width 0.2s;
        width: 8px;
    }
    .event-gallery-dot.is-active {
        background: var(--event-contrast);
        width: 25px;
    }

    /* ─── Venue ─── */
    .event-venue-block {
        font-size: var(--text-base);
    }
    .event-venue-name {
        display: block;
        font-size: 16px;
        font-weight: 600;
        color: var(--event-heading);
        margin-bottom: 6px;
    }
    .event-venue-address {
        font-size: var(--text-base);
        color: var(--event-muted);
        margin-bottom: 12px;
    }
    .event-inline-link {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        font-size: 14px;
        font-weight: 600;
        color: var(--event-primary);
        text-decoration: none;
    }
    .event-inline-link:hover {
        color: var(--event-primary-h);
        text-decoration: underline;
    }

    /* ─── Tags ─── */
    .event-tags {
        display: flex;
        flex-wrap: wrap;
        gap: 8px;
    }
    .event-tag {
        display: inline-block;
        font-size: var(--text-sm);
        font-weight: 500;
        color: var(--event-accent);
        background: color-mix(in srgb, var(--event-accent) 10%, transparent);
        border: 1px solid color-mix(in srgb, var(--event-accent) 22%, transparent);
        border-radius: 20px;
        padding: 5px 14px;
    }


    /* ─── Aside panels ─── */
    .event-aside-panel {
        background: var(--event-surface);
        border: 1px solid var(--event-border);
        border-radius: var(--event-radius);
        padding: 24px 22px;
        margin-bottom: 20px;
        box-shadow: 0 2px 10px color-mix(in srgb, var(--event-text) 5%, transparent);
    }
    .event-aside-panel h3 {
        font-size: 18px;
        font-weight: 700;
        margin: 0 0 16px;
        padding-bottom: 12px;
        border-bottom: 1px solid var(--event-border);
        color: var(--event-heading);
    }

    /* ─── CTA panel ─── */
    .event-cta-panel {
        border-top: 3px solid var(--event-primary);
    }

    /* ─── Status badges ─── */
    .event-status-badge {
        display: flex;
        align-items: center;
        gap: 8px;
        border-radius: 8px;
        padding: 10px 14px;
        font-size: 14px;
        font-weight: 600;
        margin-bottom: 14px;
    }
    .event-status-badge i {
        font-size: 16px;
    }
    .event-status-open {
        background: color-mix(in srgb, var(--status-success) 12%, transparent);
        color: var(--status-success);
        border: 1px solid color-mix(in srgb, var(--status-success) 30%, transparent);
    }
    .event-status-open i { color: var(--status-success); }
    .event-status-closed {
        background: color-mix(in srgb, var(--status-warning) 10%, transparent);
        color: var(--status-warning);
        border: 1px solid color-mix(in srgb, var(--status-warning) 28%, transparent);
    }
    .event-status-closed i { color: var(--status-warning); }
    .event-status-upcoming-reg {
        background: color-mix(in srgb, var(--event-secondary) 12%, transparent);
        color: var(--event-heading);
        border: 1px solid color-mix(in srgb, var(--event-secondary) 30%, transparent);
    }
    .event-status-upcoming-reg i { color: var(--event-secondary); }
    .event-status-completed {
        background: color-mix(in srgb, var(--event-primary) 10%, transparent);
        color: var(--event-heading);
        border: 1px solid color-mix(in srgb, var(--event-primary) 25%, transparent);
    }
    .event-status-completed i { color: var(--event-primary); }
    .event-status-cancelled {
        background: color-mix(in srgb, var(--status-danger) 10%, transparent);
        color: var(--status-danger);
        border: 1px solid color-mix(in srgb, var(--status-danger) 28%, transparent);
    }
    .event-status-cancelled i { color: var(--status-danger); }

    .event-reg-meta {
        font-size: var(--text-sm);
        color: var(--event-muted);
        margin: 0 0 12px;
    }
    .event-reg-fee {
        font-size: var(--text-base);
        margin: 0 0 14px;
        display: flex;
        align-items: center;
        gap: 8px;
    }
    .event-reg-fee-label {
        font-size: var(--text-xs);
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: var(--event-muted);
    }
    .event-reg-fee strong {
        font-size: 18px;
        color: var(--event-heading);
    }
    .event-reg-free {
        color: var(--status-success);
        font-weight: 600;
        font-size: var(--text-base);
    }
    .event-register-btn {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 8px;
        width: 100%;
        padding: 12px 20px;
        background: var(--event-primary);
        color: var(--event-contrast);
        font-size: var(--text-base);
        font-weight: 700;
        border-radius: 8px;
        text-decoration: none;
        transition: background 0.2s, transform 0.15s;
        margin-top: 4px;
    }
    .event-register-btn:hover {
        background: var(--event-primary-h);
        color: var(--event-contrast);
        transform: translateY(-1px);
        text-decoration: none;
    }
    .event-cancelled-reason {
        font-size: var(--text-sm);
        color: var(--event-muted);
        font-style: italic;
        margin-top: -4px;
    }
    .event-seats-row {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: var(--text-sm);
        color: var(--event-muted);
        margin-top: 14px;
        padding-top: 14px;
        border-top: 1px solid var(--event-border);
    }
    .event-seats-row i { color: var(--event-primary); }

    /* ─── Snapshot list ─── */
    .event-snapshot {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        flex-direction: column;
        gap: 12px;
    }
    .event-snapshot li {
        display: grid;
        grid-template-columns: 20px 72px 1fr;
        align-items: center;
        gap: 8px;
    }
    .event-snapshot li i {
        color: var(--event-primary);
        font-size: 14px;
        text-align: center;
    }
    .event-snapshot li span {
        color: var(--event-muted);
        font-size: 10px;
        font-weight: 800;
        text-transform: uppercase;
        letter-spacing: 0.06em;
    }
    .event-snapshot li strong {
        color: var(--event-heading);
        font-size: 14px;
        font-weight: 600;
        word-break: break-word;
    }
    .event-snapshot li strong a {
        color: var(--event-primary);
        text-decoration: none;
    }
    .event-snapshot li strong a:hover {
        text-decoration: underline;
    }

    /* ─── Related events ─── */
    .event-related {
        display: flex;
        flex-direction: column;
        gap: 1px;
    }
    .event-related-item {
        display: flex;
        gap: 12px;
        align-items: flex-start;
        padding: 10px 0;
        border-bottom: 1px solid var(--event-border);
        text-decoration: none;
        transition: background 0.15s;
    }
    .event-related-item:last-child {
        border-bottom: none;
        padding-bottom: 0;
    }
    .event-related-item:hover .event-related-body strong {
        color: var(--event-primary);
    }
    .event-related-date {
        flex-shrink: 0;
        width: 44px;
        background: color-mix(in srgb, var(--event-secondary) 12%, transparent);
        border: 1px solid color-mix(in srgb, var(--event-secondary) 25%, transparent);
        border-radius: 6px;
        text-align: center;
        padding: 5px 2px;
        line-height: 1.2;
    }
    .event-related-date span {
        display: block;
        font-size: var(--text-md);
        font-weight: 700;
        color: var(--event-heading);
    }
    .event-related-date small {
        display: block;
        font-size: 10px;
        text-transform: uppercase;
        letter-spacing: 0.06em;
        color: var(--event-muted);
    }
    .event-related-body {
        flex: 1;
        min-width: 0;
    }
    .event-related-body strong {
        display: block;
        font-size: var(--text-sm);
        font-weight: 600;
        color: var(--event-heading);
        line-height: 1.4;
        transition: color 0.15s;
    }
    .event-related-body small {
        display: block;
        font-size: 12px;
        color: var(--event-muted);
        margin-top: 3px;
    }
    .event-related-body small i {
        margin-right: 3px;
    }

    /* ─── Responsive ─── */
    @media (max-width: 1024px) {
        .event-hero {
            grid-template-columns: 1fr 300px;
        }
        .event-layout {
            grid-template-columns: 1fr 260px;
        }
    }
    @media (max-width: 768px) {
        .event-shell {
            padding: 28px 0 50px;
        }
        .event-hero {
            grid-template-columns: 1fr;
            padding: 24px;
            gap: 20px;
        }
        .event-hero-media {
            order: -1;
            max-height: 220px;
        }
        .event-layout {
            grid-template-columns: 1fr;
        }
        .event-aside {
            order: -1;
        }
        .event-section {
            padding: 22px 18px;
        }
        .event-gallery-slide img {
            height: 275px;
        }
        .event-gallery-control {
            height: 38px;
            width: 38px;
        }
        .event-gallery-control-prev {
            left: 10px;
        }
        .event-gallery-control-next {
            right: 10px;
        }
        .event-snapshot li {
            grid-template-columns: 18px 70px 1fr;
        }
    }
    @media (max-width: 480px) {
    }
    @media (prefers-reduced-motion: reduce) {
        .event-register-btn {
            transition: none;
        }
        .event-register-btn:hover {
            transform: none;
        }
        .event-gallery-track,
        .event-gallery-dot,
        .event-gallery-control {
            transition: none;
        }
    }

/* ═══════════════════════════════════════════
   Institute MOUs page
═══════════════════════════════════════════ */
.mou-page {
    --mou-surface: var(--surface-color, #fff);
    --mou-border: var(--border-color, rgba(15, 23, 42, 0.1));
    --mou-heading: var(--heading-color, var(--text-color, #172033));
    --mou-text: var(--text-color, #354052);
    --mou-muted: var(--text-muted-color, #64748b);
    --mou-primary: var(--primary-color, #0055aa);
    --mou-secondary: var(--secondary-color, var(--mou-primary));
    --mou-accent: var(--accent-color, var(--mou-primary));
    background: var(--bg-color, #f8fafc);
    color: var(--mou-text);
}

.mou-page .mou-shell {
    padding: 56px 0 72px;
}

/* Intro header */
.mou-page .mou-intro {
    margin-bottom: 32px;
}

.mou-page .mou-kicker {
    color: var(--mou-accent);
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    margin-bottom: 8px;
    text-transform: uppercase;
}

.mou-page .mou-title {
    color: var(--mou-heading);
    font-family: var(--header-font-family);
    font-size: clamp(24px, 3vw, 30px);
    font-weight: 700;
    letter-spacing: -0.02em;
    margin: 0 0 8px;
}

.mou-page .mou-lead {
    color: var(--mou-muted);
    font-size: var(--text-base);
    margin: 0;
}

/* Table wrapper */
.mou-page .mou-table-wrap {
    border: 1px solid var(--mou-border);
    border-radius: var(--border-radius, 12px);
    margin-bottom: 32px;
    overflow: hidden;
}

.mou-page .mou-table-scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

/* Table */
.mou-page .mou-table {
    border-collapse: collapse;
    min-width: 600px;
    width: 100%;
}

.mou-page .mou-table thead th {
    background: color-mix(in srgb, var(--mou-secondary) 10%, var(--mou-surface));
    border-bottom: 2px solid color-mix(in srgb, var(--mou-secondary) 25%, var(--mou-border));
    color: var(--mou-heading);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.06em;
    padding: 14px 18px;
    text-align: left;
    text-transform: uppercase;
    white-space: nowrap;
}

.mou-page .mou-table tbody tr {
    border-bottom: 1px solid var(--mou-border);
    transition: background 0.15s ease;
}

.mou-page .mou-table tbody tr:last-child {
    border-bottom: none;
}

.mou-page .mou-table tbody tr:hover {
    background: color-mix(in srgb, var(--mou-primary) 4%, var(--mou-surface));
}

.mou-page .mou-table tbody td {
    color: var(--mou-text);
    font-size: 14px;
    padding: 14px 18px;
    vertical-align: middle;
}

/* Row number */
.mou-page .mou-table-num {
    color: var(--mou-muted);
    font-size: var(--text-sm);
    text-align: center;
    width: 40px;
}

/* Title cell */
.mou-page .mou-table-name {
    color: var(--mou-heading);
    font-weight: 600;
    line-height: 1.4;
}

.mou-page .mou-table-ref {
    color: var(--mou-muted);
    font-size: 12px;
    margin-top: 2px;
}

/* Company cell */
.mou-page .mou-company-cell {
    align-items: center;
    display: flex;
    gap: 10px;
}

.mou-page .mou-company-logo {
    border: 1px solid var(--mou-border);
    border-radius: 6px;
    flex-shrink: 0;
    height: 32px;
    object-fit: contain;
    width: 48px;
}

.mou-page .mou-company-avatar {
    align-items: center;
    background: color-mix(in srgb, var(--mou-primary) 10%, transparent);
    border-radius: 6px;
    color: var(--mou-primary);
    display: flex;
    flex-shrink: 0;
    font-size: var(--text-xs);
    font-weight: 700;
    height: 32px;
    justify-content: center;
    width: 48px;
}

/* Department tag */
.mou-page .mou-dept-tag {
    background: color-mix(in srgb, var(--mou-accent) 10%, transparent);
    border-radius: 999px;
    color: var(--mou-accent);
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    white-space: nowrap;
}

/* Validity period */
.mou-page .mou-validity {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: var(--text-sm);
    gap: 6px;
    white-space: nowrap;
}

.mou-page .mou-validity-sep {
    color: var(--mou-muted);
}

/* Dash placeholder */
.mou-page .mou-table-dash {
    color: var(--mou-muted);
}

/* Status badge */
.mou-page .mou-status-badge {
    border-radius: 999px;
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: 0.04em;
    padding: 4px 12px;
    text-transform: uppercase;
    white-space: nowrap;
}

.mou-page .mou-status-badge--active {
    background: color-mix(in srgb, #16a34a 12%, transparent);
    color: #15803d;
}

.mou-page .mou-status-badge--renewed {
    background: color-mix(in srgb, #0284c7 12%, transparent);
    color: #0369a1;
}

/* Empty state */
.mou-page .mou-empty {
    padding: 64px 24px;
    text-align: center;
}

.mou-page .mou-empty-icon {
    color: color-mix(in srgb, var(--mou-primary) 28%, transparent);
    display: block;
    font-size: 48px;
    margin-bottom: 18px;
}

.mou-page .mou-empty h3 {
    color: var(--mou-heading);
    font-size: 22px;
    margin: 0 0 8px;
}

.mou-page .mou-empty p {
    color: var(--mou-muted);
    margin: 0 0 18px;
}

.mou-page .mou-reset-link {
    color: var(--mou-primary);
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}

.mou-page .mou-reset-link:hover {
    text-decoration: underline;
}

.mou-page .mou-doc-link {
    align-items: center;
    color: var(--mou-primary);
    display: inline-flex;
    font-size: var(--text-sm);
    font-weight: 600;
    gap: 5px;
    text-decoration: none;
    white-space: nowrap;
}

.mou-page .mou-doc-link:hover {
    text-decoration: underline;
}

/* Responsive */
@media (max-width: 767px) {
    .mou-page .mou-shell {
        padding: 38px 0 54px;
    }
}

/* ═══════════════════════════════════════════
   BLOG LIST PAGE  (blp-)
═══════════════════════════════════════════ */
.blp-page {
    background: var(--bg-alt-color, #f4f7fb);
    color: var(--text-color);
    font-family: var(--body-font-family);
}

.blp-shell {
    padding: 56px 0 72px;
}

.blp-header {
    margin-bottom: 48px;
}

.blp-header h2 {
    color: var(--heading-color, var(--text-color));
    font-family: var(--header-font-family);
    font-size: clamp(26px, 3vw, 34px);
    font-weight: 700;
    margin: 0 0 10px;
}

/* Override home-section-shell variables for standalone page context */
.blp-page .dhb-card {
    background: var(--surface-color, #fff);
    border-color: var(--border-color);
}

.blp-page .dhb-card:hover {
    box-shadow: 0 16px 40px color-mix(in srgb, var(--primary-color), transparent 82%);
}

.blp-page .dhb-card-title a {
    color: var(--heading-color, var(--text-color));
}

.blp-page .dhb-card-excerpt {
    color: var(--text-muted-color);
}

.blp-page .dhb-card-date,
.blp-page .dhb-card-read-time {
    color: var(--text-muted-color);
}

.blp-pagination {
    display: flex;
    justify-content: center;
    margin-top: 44px;
}

.blp-empty {
    text-align: center;
    padding: 80px 0;
    color: var(--text-muted-color);
}

.blp-empty i {
    display: block;
    font-size: 52px;
    margin-bottom: 18px;
    opacity: 0.25;
    color: var(--primary-color);
}

.blp-empty h4 {
    font-size: 20px;
    font-weight: 700;
    color: var(--heading-color, var(--text-color));
    margin-bottom: 8px;
}

.blp-empty p {
    font-size: var(--text-base);
    color: var(--text-muted-color);
    max-width: 380px;
    margin: 0 auto;
}

@media (max-width: 575px) {
    .blp-shell { padding: 40px 0 52px; }
    .blp-header { margin-bottom: 32px; }
}

/* ═══════════════════════════════════════════
   EVENTS LISTING PAGE  (evl-)
═══════════════════════════════════════════ */

.evl-page {
    background: var(--alt-color, #f8f9fa);
}

.evl-shell {
    padding: 56px 0 72px;
}

.evl-header {
    margin-bottom: 32px;
}

.evl-header h2 {
    color: var(--heading-color, #1e293b);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    margin-bottom: 8px;
}

/* Category filter bar */
.evl-tab-bar {
    display: flex;
    justify-content: center;
    gap: 0;
    margin-bottom: 28px;
    border-bottom: 2px solid var(--border-color, #e2e8f0);
}
.evl-tab {
    color: var(--muted-color, #64748b);
    font-size: var(--text-sm);
    font-weight: 600;
    padding: 10px 28px;
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -2px;
    transition: color 0.18s, border-color 0.18s;
}
.evl-tab--active { color: var(--primary-color); border-bottom-color: var(--primary-color); }
.evl-tab:hover { color: var(--primary-color); }

.evl-filter-bar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    justify-content: center;
    margin-bottom: 36px;
}

.evl-pill {
    border: 1.5px solid var(--border-color, #e2e8f0);
    border-radius: 100px;
    color: var(--muted-color, #64748b);
    font-size: var(--text-sm);
    font-weight: 500;
    padding: 6px 18px;
    text-decoration: none;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.evl-pill--active {
    background: var(--primary-color, #2563eb);
    border-color: var(--primary-color, #2563eb);
    color: var(--primary-contrast-color, #fff);
    text-decoration: none;
}
.evl-pill:not(.evl-pill--active):hover {
    background: color-mix(in srgb, var(--primary-color, #2563eb) 10%, transparent);
    border-color: var(--primary-color, #2563eb);
    color: var(--primary-color, #2563eb);
    text-decoration: none;
}

/* Grid override — 3 col on listing page */
.evl-grid {
    grid-template-columns: repeat(3, 1fr) !important;
}

/* Register button on card */
.default-event-register-btn {
    align-items: center;
    border: 1.5px solid var(--primary-color, #2563eb);
    border-radius: 6px;
    color: var(--primary-color, #2563eb);
    display: inline-flex;
    font-size: 12px;
    font-weight: 600;
    padding: 6px 14px;
    text-decoration: none;
    transition: background 0.18s, color 0.18s;
}

.default-event-register-btn:hover {
    background: var(--primary-color, #2563eb);
    color: #fff;
    text-decoration: none;
}

/* Pagination */
.evl-pagination {
    margin-top: 40px;
    text-align: center;
}

/* Empty state */
.evl-empty {
    color: var(--muted-color, #94a3b8);
    padding: 64px 0;
    text-align: center;
}

.evl-empty i  { display: block; font-size: 40px; margin-bottom: 16px; }
.evl-empty h4 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.evl-empty p  { font-size: 14px; }

/* Responsive */
@media (max-width: 991px) {
    .evl-grid { grid-template-columns: repeat(2, 1fr) !important; }
}

@media (max-width: 575px) {
    .evl-grid   { grid-template-columns: 1fr !important; }
    .evl-shell  { padding: 32px 0 48px; }
}

/* ═══════════════════════════════════════════
   BLOG DETAIL PAGE  (bld-)
═══════════════════════════════════════════ */
.bld-page {
    --bld-surface:   var(--surface-color, #fff);
    --bld-muted-bg:  var(--bg-alt-color, #f4f7fb);
    --bld-border:    var(--border-color, rgba(15, 23, 42, 0.1));
    --bld-heading:   var(--heading-color, var(--text-color, #172033));
    --bld-text:      var(--text-color, #354052);
    --bld-muted:     var(--text-muted-color, #64748b);
    --bld-primary:   var(--primary-color);
    --bld-primary-h: var(--primary-hover-color, var(--bld-primary));
    --bld-contrast:  var(--primary-contrast-color, #fff);
    --bld-accent:    var(--accent-color, var(--bld-primary));
    --bld-radius:    var(--border-radius, 10px);
    background: var(--bg-color, #f8fafc);
    color: var(--bld-text);
    font-family: var(--body-font-family);
}

.bld-page :where(h2, h3, h4) {
    color: var(--bld-heading);
    font-family: var(--header-font-family);
}

.bld-shell {
    padding: 48px 0 68px;
}

/* ── Hero ── */
.bld-hero {
    align-items: center;
    background: var(--bld-surface);
    border: 1px solid var(--bld-border);
    border-radius: var(--bld-radius);
    box-shadow: 0 4px 20px color-mix(in srgb, var(--bld-text) 6%, transparent);
    display: grid;
    gap: 36px;
    grid-template-columns: 1fr 360px;
    margin-top: 80px;
    margin-bottom: 32px;
    padding: 40px 44px;
}

.bld-hero-copy h2 {
    font-size: clamp(22px, 3.5vw, 36px);
    font-weight: 700;
    line-height: 1.25;
    margin: 0 0 12px;
}

.bld-lead {
    color: var(--bld-muted);
    font-size: var(--text-base);
    line-height: 1.7;
    margin-bottom: 20px;
}

.bld-hero-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 10px 22px;
    margin-top: 16px;
}

.bld-meta-item {
    align-items: center;
    color: var(--bld-muted);
    display: flex;
    font-size: var(--text-sm);
    gap: 7px;
}

.bld-meta-item i {
    color: var(--bld-primary);
    flex-shrink: 0;
}

.bld-hero-media {
    aspect-ratio: 4 / 3;
    background: var(--bld-muted-bg);
    border-radius: var(--bld-radius);
    overflow: hidden;
}

.bld-hero-media img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.bld-hero-media-placeholder {
    align-items: center;
    background: color-mix(in srgb, var(--bld-primary) 8%, var(--bld-surface));
    display: flex;
    justify-content: center;
    width: 100%;
    height: 100%;
}

.bld-hero-media-placeholder i {
    color: color-mix(in srgb, var(--bld-primary) 35%, transparent);
    font-size: 56px;
}

/* ── Two-column layout ── */
.bld-layout {
    align-items: start;
    display: grid;
    gap: 28px;
    grid-template-columns: 1fr 300px;
}

/* ── Content sections ── */
.bld-section {
    background: var(--bld-surface);
    border: 1px solid var(--bld-border);
    border-radius: var(--bld-radius);
    margin-bottom: 24px;
    padding: 32px 36px;
}

.bld-section-heading {
    margin-bottom: 22px;
}

.bld-section-heading span {
    color: var(--bld-accent);
    display: block;
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.bld-section-heading h3 {
    font-size: 21px;
    font-weight: 700;
    line-height: 1.3;
    margin: 0;
}

/* ── Aside panels ── */
.bld-aside-panel {
    background: var(--bld-surface);
    border: 1px solid var(--bld-border);
    border-radius: var(--bld-radius);
    margin-bottom: 20px;
    padding: 24px 28px;
}

.bld-aside-panel h3 {
    border-bottom: 1px solid var(--bld-border);
    color: var(--bld-heading);
    font-size: var(--text-base);
    font-weight: 700;
    margin: 0 0 18px;
    padding-bottom: 12px;
}

/* ── Post info snapshot ── */
.bld-snapshot {
    list-style: none;
    margin: 0;
    padding: 0;
}

.bld-snapshot li {
    align-items: center;
    border-bottom: 1px solid var(--bld-border);
    display: flex;
    font-size: var(--text-sm);
    gap: 10px;
    padding: 9px 0;
}

.bld-snapshot li:last-child { border-bottom: none; }

.bld-snapshot li i {
    color: var(--bld-primary);
    flex-shrink: 0;
    width: 14px;
}

.bld-snapshot li span {
    color: var(--bld-muted);
    flex: 1;
}

.bld-snapshot li strong {
    color: var(--bld-heading);
    font-size: var(--text-sm);
    font-weight: 600;
}

/* ── Related / recent posts ── */
.bld-related {
    display: flex;
    flex-direction: column;
    gap: 14px;
}

.bld-related-item {
    align-items: flex-start;
    display: flex;
    gap: 12px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.bld-related-item:hover { opacity: 0.72; text-decoration: none; }

.bld-related-thumb {
    background: var(--bld-muted-bg);
    border-radius: 6px;
    flex-shrink: 0;
    height: 52px;
    overflow: hidden;
    width: 64px;
}

.bld-related-thumb img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.bld-related-thumb-placeholder {
    align-items: center;
    color: color-mix(in srgb, var(--bld-primary) 35%, transparent);
    display: flex;
    font-size: 18px;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.bld-related-body strong {
    color: var(--bld-heading);
    display: block;
    font-size: var(--text-sm);
    line-height: 1.45;
}

.bld-related-body small {
    align-items: center;
    color: var(--bld-muted);
    display: flex;
    font-size: var(--text-xs);
    gap: 5px;
    margin-top: 4px;
}

/* ── Back button ── */
.bld-aside-cta { text-align: center; }

.bld-back-btn {
    align-items: center;
    border: 1.5px solid var(--bld-primary);
    border-radius: 100px;
    color: var(--bld-primary);
    display: inline-flex;
    font-size: var(--text-sm);
    font-weight: 600;
    gap: 8px;
    padding: 10px 24px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.bld-back-btn:hover {
    background: var(--bld-primary);
    color: var(--bld-contrast) !important;
    text-decoration: none;
}

/* ── Rich text inside blog section ── */
.bld-section .theme-rich-text {
    --department-text: var(--bld-text);
    --department-heading: var(--bld-heading);
    --department-primary: var(--bld-primary);
}

/* ── Responsive ── */
@media (max-width: 991px) {
    .bld-hero {
        grid-template-columns: 1fr;
        gap: 28px;
        margin-top: 0;
    }

    .bld-hero-media {
        max-width: 420px;
        margin: 0 auto;
        width: 100%;
    }

    .bld-layout {
        grid-template-columns: 1fr;
    }

    .bld-aside {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
    }

    .bld-aside-panel {
        margin-bottom: 0;
    }

    .bld-aside-cta {
        grid-column: 1 / -1;
    }
}

@media (max-width: 575px) {
    .bld-shell { padding: 32px 0 48px; }
    .bld-hero { padding: 28px 20px; }
    .bld-section { padding: 24px 20px; }
    .bld-aside-panel { padding: 20px 16px; }

    .bld-aside {
        grid-template-columns: 1fr;
    }

    .bld-aside-cta {
        grid-column: auto;
    }
}

/* ═══════════════════════════════════════════════════
   Blog — Category pills (list + detail)
═══════════════════════════════════════════════════ */

/* List card categories */
.dhb-card-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.dhb-cat-badge {
    background: color-mix(in srgb, var(--primary-color, #2563eb) 10%, transparent);
    border-radius: 100px;
    color: var(--primary-color, #2563eb);
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 1;
    padding: 4px 10px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.dhb-cat-badge:hover {
    background: var(--primary-color, #2563eb);
    color: #fff;
    text-decoration: none;
}

/* Detail hero categories */
.bld-kicker-row {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 12px;
}

.bld-kicker-row .section-eyebrow { margin-bottom: 0; }

.bld-cat-pill {
    background: color-mix(in srgb, var(--bld-primary) 12%, transparent);
    border-radius: 100px;
    color: var(--bld-primary);
    font-size: 12px;
    font-weight: 600;
    padding: 4px 12px;
    text-decoration: none;
    transition: background 0.2s, color 0.2s;
}

.bld-cat-pill:hover {
    background: var(--bld-primary);
    color: var(--bld-contrast);
    text-decoration: none;
}

/* ═══════════════════════════════════════════════════
   Blog — Tags
═══════════════════════════════════════════════════ */

.bld-tags {
    align-items: center;
    border-top: 1px solid var(--bld-border);
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 28px;
    padding-top: 20px;
}

.bld-tags-label {
    align-items: center;
    color: var(--bld-muted);
    display: flex;
    font-size: var(--text-sm);
    font-weight: 600;
    gap: 5px;
    margin-right: 4px;
}

.bld-tag {
    background: var(--bld-muted-bg);
    border: 1px solid var(--bld-border);
    border-radius: 6px;
    color: var(--bld-text);
    font-size: 12px;
    padding: 4px 10px;
}

/* ═══════════════════════════════════════════════════
   Blog — Comments
═══════════════════════════════════════════════════ */

.bld-comments-section {
    margin-top: 24px;
}

.bld-comments-list {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-bottom: 32px;
}

.bld-comment {
    display: flex;
    gap: 14px;
}

.bld-comment-avatar {
    align-items: center;
    background: color-mix(in srgb, var(--bld-primary) 15%, transparent);
    border-radius: 50%;
    color: var(--bld-primary);
    display: flex;
    flex-shrink: 0;
    font-size: var(--text-base);
    font-weight: 700;
    height: 42px;
    justify-content: center;
    width: 42px;
}

.bld-comment-avatar--reply {
    height: 34px;
    font-size: var(--text-sm);
    width: 34px;
}

.bld-comment-body {
    flex: 1;
}

.bld-comment-body p {
    color: var(--bld-text);
    font-size: 14px;
    line-height: 1.65;
    margin: 6px 0 0;
}

.bld-comment-header {
    align-items: center;
    display: flex;
    gap: 12px;
}

.bld-comment-header strong {
    color: var(--bld-heading);
    font-size: 14px;
}

.bld-comment-header time {
    color: var(--bld-muted);
    font-size: 12px;
}

.bld-comment-replies {
    border-left: 3px solid var(--bld-border);
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 16px;
    padding-left: 16px;
}

.bld-comment--reply {
    align-items: flex-start;
}

/* Submission notice */
.bld-comment-notice {
    align-items: center;
    background: color-mix(in srgb, #16a34a 10%, transparent);
    border: 1px solid color-mix(in srgb, #16a34a 30%, transparent);
    border-radius: 8px;
    color: #15803d;
    display: flex;
    font-size: 14px;
    font-weight: 500;
    gap: 8px;
    margin-bottom: 24px;
    padding: 14px 18px;
}

/* Comment form */
.bld-comment-form-wrap {
    border-top: 1px solid var(--bld-border);
    margin-top: 32px;
    padding-top: 28px;
    padding-left:20px;
    padding-right:20px;
    padding-bottom:20px;
}

.bld-comment-form-wrap h4 {
    color: var(--bld-heading);
    font-size: var(--text-md);
    font-weight: 700;
    margin-bottom: 20px;
}

.bld-comment-form-row {
    display: grid;
    gap: 16px;
    grid-template-columns: 1fr 1fr;
    margin-bottom: 16px;
}

.bld-comment-form-group {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin-bottom: 16px;
}

.bld-comment-form-row .bld-comment-form-group {
    margin-bottom: 0;
}

.bld-comment-form-group label {
    color: var(--bld-heading);
    font-size: var(--text-sm);
    font-weight: 600;
}

.bld-comment-form-group label span {
    color: var(--status-danger);
}

.bld-comment-form-group input,
.bld-comment-form-group textarea {
    background: var(--bld-surface);
    border: 1.5px solid var(--bld-border);
    border-radius: 8px;
    color: var(--bld-text);
    font-size: 14px;
    outline: none;
    padding: 10px 14px;
    transition: border-color 0.2s;
    width: 100%;
}

.bld-comment-form-group input:focus,
.bld-comment-form-group textarea:focus {
    border-color: var(--bld-primary);
}

.bld-comment-form-group textarea {
    resize: vertical;
}

.bld-comment-form-error {
    color: var(--status-danger);
    font-size: 12px;
}

.bld-comment-submit {
    align-items: center;
    border-radius: var(--border-radius, 8px);
    cursor: pointer;
    display: inline-flex;
    font-size: var(--cta-font-size, 14px);
    font-weight: 600;
    gap: 8px;
    padding: 11px 24px;
    text-decoration: none;
    transition: background 0.2s, border-color 0.2s, color 0.2s, box-shadow 0.2s;
}

.bld-comment-submit {
    background: var(--primary-color);
    border: none;
    color: var(--primary-contrast-color, #fff);
}
.bld-comment-submit:hover,
.bld-comment-submit:focus {
    background: var(--primary-hover-color);
    color: var(--accent-color);
}

/* Comment section header row (heading + count badge) */
.bld-comments-head {
    align-items: flex-start;
    display: flex;
    gap: 10px;
    justify-content: space-between;
    margin-bottom: 22px;
}

.bld-comments-head .bld-section-heading {
    margin-bottom: 0;
}

.bld-comment-count-badge {
    align-items: center;
    background: color-mix(in srgb, var(--bld-primary) 12%, transparent);
    border-radius: 999px;
    color: var(--bld-primary);
    display: inline-flex;
    flex-shrink: 0;
    font-size: 13px;
    font-weight: 700;
    height: 26px;
    justify-content: center;
    margin-top: 4px;
    min-width: 26px;
    padding: 0 8px;
}

/* Empty comments state */
.bld-no-comments {
    border: 1px dashed var(--bld-border);
    border-radius: 8px;
    color: var(--bld-muted);
    font-size: var(--text-sm);
    margin-bottom: 28px;
    padding: 24px 20px;
    text-align: center;
}

.bld-no-comments i { margin-right: 6px; }

/* Form footer: note + submit side by side */
.bld-comment-form-footer {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    justify-content: space-between;
    margin-top: 8px;
}

.bld-comment-form-note {
    color: var(--bld-muted);
    font-size: 12px;
    margin: 0;
}

.bld-comment-form-note i { margin-right: 4px; }

/* Post Info panel redesign */
.bld-post-info { padding: 20px 22px; }

.bld-post-info-header {
    align-items: center;
    border-bottom: 1px solid var(--bld-border);
    display: flex;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 14px;
}

.bld-post-info-header h3 {
    border: none;
    color: var(--bld-heading);
    font-size: var(--text-base);
    font-weight: 700;
    margin: 0;
    padding: 0;
}

.bld-post-info-icon-wrap {
    align-items: center;
    background: color-mix(in srgb, var(--bld-primary) 12%, transparent);
    border-radius: 8px;
    color: var(--bld-primary);
    display: flex;
    flex-shrink: 0;
    font-size: 14px;
    height: 32px;
    justify-content: center;
    width: 32px;
}

.bld-post-info-items {
    display: flex;
    flex-direction: column;
}

.bld-post-info-item {
    align-items: center;
    border-bottom: 1px solid var(--bld-border);
    display: flex;
    gap: 12px;
    padding: 10px 0;
}

.bld-post-info-item:last-child { border-bottom: none; }

.bld-post-info-item-icon {
    align-items: center;
    background: color-mix(in srgb, var(--bld-primary) 10%, transparent);
    border-radius: 6px;
    color: var(--bld-primary);
    display: flex;
    flex-shrink: 0;
    font-size: 13px;
    height: 30px;
    justify-content: center;
    width: 30px;
}

.bld-post-info-item-text {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.bld-post-info-item-text span {
    color: var(--bld-muted);
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
}

.bld-post-info-item-text strong {
    color: var(--bld-heading);
    font-size: var(--text-sm);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

@media (max-width: 575px) {
    .bld-comment-form-row {
        grid-template-columns: 1fr;
    }

    .bld-comment-form-footer {
        flex-direction: column;
        align-items: stretch;
    }

    .bld-comment-submit {
        justify-content: center;
    }
}

/* ═══════════════════════════════════════════════════
   News listing  (nws-*)
═══════════════════════════════════════════════════ */

.nws-page {
    background: var(--alt-color, #f8f9fa);
}

.nws-shell {
    padding: 56px 0 72px;
}

.nws-header {
    margin-bottom: 40px;
}

.nws-header h2 {
    color: var(--heading-color, #1e293b);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    margin-bottom: 10px;
}

/* Feed */
.nws-feed {
    background: var(--surface-color, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    overflow: hidden;
}

.nws-item {
    align-items: flex-start;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    gap: 0;
    padding: 0;
    transition: background 0.15s;
}

.nws-item:last-child {
    border-bottom: none;
}

.nws-item:hover {
    background: color-mix(in srgb, var(--primary-color, #2563eb) 4%, transparent);
}

/* Date column */
.nws-date {
    align-items: center;
    background: color-mix(in srgb, var(--primary-color, #2563eb) 8%, transparent);
    border-right: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    flex-direction: column;
    flex-shrink: 0;
    justify-content: center;
    min-height: 100%;
    padding: 20px 22px;
    text-align: center;
    width: 88px;
}

.nws-date-day {
    color: var(--primary-color, #2563eb);
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
}

.nws-date-mon {
    color: var(--primary-color, #2563eb);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: 0.08em;
    margin-top: 2px;
    text-transform: uppercase;
}

.nws-date-yr {
    color: var(--muted-color, #94a3b8);
    font-size: var(--text-xs);
    margin-top: 4px;
}

/* Item body */
.nws-item-body {
    flex: 1;
    padding: 20px 24px;
}

.nws-cats {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 8px;
}

.nws-title {
    font-size: var(--text-md);
    font-weight: 700;
    line-height: 1.4;
    margin-bottom: 8px;
}

.nws-title a {
    color: var(--heading-color, #1e293b);
    text-decoration: none;
    transition: color 0.2s;
}

.nws-title a:hover {
    color: var(--primary-color, #2563eb);
    text-decoration: none;
}

.nws-excerpt {
    color: var(--muted-color, #64748b);
    font-size: 14px;
    line-height: 1.6;
    margin-bottom: 12px;
}

.nws-foot {
    align-items: center;
    display: flex;
    gap: 20px;
}

.nws-meta-item {
    align-items: center;
    color: var(--muted-color, #94a3b8);
    display: inline-flex;
    font-size: var(--text-sm);
    gap: 5px;
}

.nws-link {
    align-items: center;
    color: var(--primary-color, #2563eb);
    display: inline-flex;
    font-size: var(--text-sm);
    font-weight: 600;
    gap: 5px;
    margin-left: auto;
    text-decoration: none;
    transition: gap 0.2s;
}

.nws-link:hover {
    gap: 9px;
    text-decoration: none;
}

/* Pagination & empty */
.nws-pagination {
    margin-top: 32px;
}

.nws-empty {
    color: var(--muted-color, #94a3b8);
    padding: 64px 0;
    text-align: center;
}

.nws-empty i {
    display: block;
    font-size: 40px;
    margin-bottom: 16px;
}

.nws-empty h4 {
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 8px;
}

.nws-empty p {
    font-size: 14px;
}

/* Responsive */
@media (max-width: 575px) {
    .nws-shell { padding: 32px 0 48px; }

    .nws-date {
        padding: 16px 14px;
        width: 68px;
    }

    .nws-date-day  { font-size: 22px; }
    .nws-date-mon  { font-size: var(--text-xs); }

    .nws-item-body { padding: 16px 16px; }
    .nws-title     { font-size: var(--text-base); }

    .nws-link { margin-left: 0; }
}

/* ═══════════════════════════════════════════════════
   News detail  (nwd-*)
═══════════════════════════════════════════════════ */

.nwd-page {
    background: var(--alt-color, #f8f9fa);
}

.nwd-shell {
    padding: 56px 0 72px;
}

/* Inherit bld-* variables so bld-aside-panel / bld-related-item work inside nwd-page */
.nwd-page {
    --bld-surface:   var(--surface-color, #fff);
    --bld-muted-bg:  var(--alt-color, #f8f9fa);
    --bld-border:    var(--border-color, #e2e8f0);
    --bld-heading:   var(--heading-color, #1e293b);
    --bld-text:      var(--body-color, #374151);
    --bld-muted:     var(--muted-color, #94a3b8);
    --bld-primary:   var(--primary-color, #2563eb);
    --bld-contrast:  var(--primary-contrast-color, #fff);
    --bld-radius:    14px;
}

/* Two-column layout */
.nwd-layout {
    display: grid;
    gap: 28px;
    grid-template-columns: 1fr 300px;
    align-items: flex-start;
}

.nwd-main {
    min-width: 0;
}

.nwd-aside {
    position: sticky;
    top: 24px;
}

/* Article card */
.nwd-article {
    background: var(--surface-color, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    margin-bottom: 24px;
    padding: 40px 48px;
}

.nwd-title {
    color: var(--heading-color, #1e293b);
    font-size: clamp(22px, 3vw, 30px);
    font-weight: 800;
    line-height: 1.3;
    margin: 12px 0 10px;
}

.nwd-lead {
    color: var(--muted-color, #64748b);
    font-size: 16px;
    line-height: 1.65;
    margin-bottom: 16px;
}

.nwd-meta {
    align-items: center;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    flex-wrap: wrap;
    gap: 16px;
    margin-bottom: 28px;
    padding-bottom: 16px;
}

.nwd-meta-item {
    align-items: center;
    color: var(--muted-color, #94a3b8);
    display: inline-flex;
    font-size: var(--text-sm);
    gap: 6px;
}

/* Cover image */
.nwd-cover {
    border-radius: 10px;
    margin-bottom: 28px;
    overflow: hidden;
}

.nwd-cover img {
    display: block;
    height: auto;
    width: 100%;
}

/* Rich text inside news column */
.nwd-content {
    --department-text: var(--body-color, #374151);
    --department-heading: var(--heading-color, #1e293b);
    --department-primary: var(--primary-color, #2563eb);
}

/* Section heading reused inside nwd-comments-wrap */
.nwd-comments-wrap .bld-section-heading {
    margin-bottom: 24px;
}

/* Footer back button */
.nwd-footer {
    max-width: 800px;
    margin: 0 auto;
    text-align: left;
}

/* ── More News ── */
.nwd-more {
    margin: 0 auto 28px;
    max-width: 800px;
}

.nwd-more-heading {
    color: var(--heading-color, #1e293b);
    font-size: 18px;
    font-weight: 700;
    margin-bottom: 16px;
}

.nwd-more-grid {
    display: grid;
    gap: 16px;
    grid-template-columns: repeat(3, 1fr);
}

.nwd-more-card {
    background: var(--surface-color, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 10px;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow 0.2s, transform 0.2s;
}

.nwd-more-card:hover {
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.09);
    text-decoration: none;
    transform: translateY(-2px);
}

.nwd-more-card-img {
    aspect-ratio: 16 / 9;
    background: var(--alt-color, #f1f5f9);
    overflow: hidden;
    position: relative;
}

.nwd-more-card-img img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.nwd-more-card-img-placeholder {
    align-items: center;
    color: var(--muted-color, #94a3b8);
    display: flex;
    font-size: 22px;
    height: 100%;
    justify-content: center;
    width: 100%;
}

.nwd-more-card-body {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 12px 14px;
}

.nwd-more-card-title {
    color: var(--heading-color, #1e293b);
    display: -webkit-box;
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.45;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

.nwd-more-card-date {
    align-items: center;
    color: var(--muted-color, #94a3b8);
    display: inline-flex;
    font-size: var(--text-xs);
    gap: 4px;
}

/* Responsive */
@media (max-width: 991px) {
    .nwd-layout {
        grid-template-columns: 1fr;
    }

    .nwd-aside {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 20px;
        position: static;
    }

    .nwd-aside .bld-aside-cta {
        grid-column: 1 / -1;
    }
}

@media (max-width: 767px) {
    .nwd-article { padding: 28px 24px; }
    .nwd-title   { font-size: 22px; }
}

@media (max-width: 575px) {
    .nwd-shell   { padding: 32px 0 48px; }
    .nwd-article { padding: 20px 16px; }

    .nwd-aside {
        grid-template-columns: 1fr;
    }

    .nwd-aside .bld-aside-cta {
        grid-column: auto;
    }
}

/* ═══════════════════════════════════════════════════
   Leadership Insights Listing  (lsi-*)
═══════════════════════════════════════════════════ */

.lsi-page {
    background: var(--surface-color, #fff);
}

.lsi-shell {
    padding: 56px 0 72px;
}

.lsi-header {
    margin-bottom: 48px;
}

.lsi-header h2 {
    color: var(--heading-color, #1e293b);
    font-size: clamp(24px, 3vw, 32px);
    font-weight: 800;
    margin-bottom: 0;
}

/* Alternating rows */
.lsi-list {}

.lsi-row {
    align-items: center;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    display: grid;
    gap: 56px;
    grid-template-columns: 300px 1fr;
    padding: 56px 0;
}

.lsi-row:last-child {
    border-bottom: none;
}

.lsi-row--reverse {
    grid-template-columns: 1fr 300px;
}

.lsi-row--reverse .lsi-photo-col {
    order: 2;
}

.lsi-row--reverse .lsi-content-col {
    order: 1;
}

/* Photo column */
.lsi-photo {
    aspect-ratio: 3 / 4;
    border-radius: 14px;
    display: block;
    height: auto;
    object-fit: cover;
    object-position: top center;
    width: 100%;
}

.lsi-photo-placeholder {
    align-items: center;
    background: var(--alt-color, #f1f5f9);
    border: 2px solid var(--border-color, #e2e8f0);
    border-radius: 14px;
    color: var(--muted-color, #94a3b8);
    display: flex;
    font-size: 56px;
    height: 360px;
    justify-content: center;
    width: 100%;
}

/* Content column */
.lsi-sub-title {
    color: var(--muted-color, #64748b);
    font-size: 14px;
    font-style: italic;
    margin-bottom: 16px;
}

.lsi-message {
    color: var(--text-color, #475569);
    font-size: var(--text-base);
    line-height: 1.8;
    margin-bottom: 24px;
}

.lsi-message p { margin-bottom: 12px; }
.lsi-message p:last-child { margin-bottom: 0; }

/* Author block — name + post at bottom */
.lsi-author {
    border-top: 2px solid var(--primary-color, #2563eb);
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding-top: 14px;
}

.lsi-name {
    color: var(--heading-color, #1e293b);
    font-size: 16px;
    font-weight: 700;
    line-height: 1.2;
}

.lsi-kicker {
    color: var(--primary-color, #2563eb);
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

/* Empty */
.lsi-empty {
    color: var(--muted-color, #94a3b8);
    padding: 64px 0;
    text-align: center;
}

.lsi-empty i { display: block; font-size: 40px; margin-bottom: 16px; }
.lsi-empty h4 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.lsi-empty p  { font-size: 14px; }

/* Responsive */
@media (max-width: 991px) {
    .lsi-row,
    .lsi-row--reverse {
        gap: 36px;
        grid-template-columns: 240px 1fr;
    }
    .lsi-photo-placeholder { height: 280px; }
}

@media (max-width: 767px) {
    .lsi-row,
    .lsi-row--reverse {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 40px 0;
    }
    .lsi-row--reverse .lsi-photo-col { order: unset; }
    .lsi-row--reverse .lsi-content-col { order: unset; }
    .lsi-photo-placeholder { height: 260px; }
    .lsi-shell { padding: 32px 0 48px; }
}

/* ═══════════════════════════════════════════════════
   Leadership Insight Detail  (lsd-*)
═══════════════════════════════════════════════════ */

.lsd-page {
    background: var(--alt-color, #f8f9fa);
    --bld-primary:  var(--primary-color, #2563eb);
    --bld-contrast: var(--primary-contrast-color, #fff);
    --bld-border:   var(--border-color, #e2e8f0);
}

.lsd-shell {
    padding: 56px 0 72px;
}

/* Main card — two-column: photo left, content right */
.lsd-card {
    background: var(--surface-color, #fff);
    border: 1px solid var(--border-color, #e2e8f0);
    border-radius: 16px;
    display: grid;
    gap: 0;
    grid-template-columns: 280px 1fr;
    overflow: hidden;
}

/* Photo column */
.lsd-photo-col {
    align-items: center;
    background: var(--alt-color, #f8f9fa);
    border-right: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    flex-direction: column;
    padding: 40px 28px;
    text-align: center;
}

.lsd-photo-wrap {
    margin-bottom: 16px;
}

.lsd-photo-wrap img {
    border: 3px solid var(--border-color, #e2e8f0);
    border-radius: 50%;
    display: block;
    height: 160px;
    object-fit: cover;
    width: 160px;
}

.lsd-photo-name {
    color: var(--heading-color, #1e293b);
    font-size: var(--text-md);
    font-weight: 700;
    margin-bottom: 4px;
}

.lsd-photo-designation {
    color: var(--primary-color, #2563eb);
    font-size: var(--text-sm);
    font-weight: 600;
    margin-bottom: 24px;
}

.lsd-back-btn {
    margin-top: auto;
}

/* Content column */
.lsd-content-col {
    padding: 40px 48px;
}

.lsd-kicker-row {
    margin-bottom: 12px;
}

.lsd-title {
    color: var(--heading-color, #1e293b);
    font-size: clamp(20px, 2.5vw, 26px);
    font-weight: 800;
    line-height: 1.3;
    margin-bottom: 24px;
}

/* Meta row (when no photo column) */
.lsd-meta-row {
    align-items: center;
    border-bottom: 1px solid var(--border-color, #e2e8f0);
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-bottom: 24px;
    padding-bottom: 16px;
}

.lsd-meta-name {
    align-items: center;
    color: var(--heading-color, #1e293b);
    display: inline-flex;
    font-size: var(--text-base);
    font-weight: 700;
    gap: 6px;
}

.lsd-meta-desig {
    color: var(--primary-color, #2563eb);
    font-size: var(--text-sm);
    font-weight: 600;
}

.lsd-message {
    --department-text: var(--body-color, #374151);
    --department-heading: var(--heading-color, #1e293b);
    --department-primary: var(--primary-color, #2563eb);
}

.lsd-footer-actions {
    margin-top: 32px;
    padding-top: 20px;
    border-top: 1px solid var(--border-color, #e2e8f0);
}

/* Responsive */
@media (max-width: 767px) {
    .lsd-card {
        grid-template-columns: 1fr;
    }

    .lsd-photo-col {
        border-right: none;
        border-bottom: 1px solid var(--border-color, #e2e8f0);
        padding: 28px 24px;
    }

    .lsd-back-btn { margin-top: 16px; }
    .lsd-content-col { padding: 28px 24px; }
}

@media (max-width: 575px) {
    .lsd-shell { padding: 32px 0 48px; }
    .lsd-content-col { padding: 20px 16px; }
}

/* ════════════════════════════════════════
   SPLASH SCREEN MODAL
   ════════════════════════════════════════ */

.modal-backdrop.show { background-color: rgba(0,0,0,0.85); }

#splashModal .modal-dialog {
    margin: auto;
    max-height: 90%;
    max-width: 90%;
}

#splashModal .modal-content {
    background: transparent;
    border: none;
    text-align: center;
}

#splashModal .modal-body {
    padding: 0;
    position: relative;
}

#splashModal img {
    display: block;
    height: auto;
    margin: 0 auto;
    max-height: 80vh;
    max-width: 100%;
    width: auto;
}

#splashModal .close {
    color: #fff;
    font-size: var(--text-2xl);
    opacity: 0.9;
    position: absolute;
    right: 15px;
    top: 10px;
}

/* ════════════════════════════════════════
   LABORATORY DETAIL PAGE
   ════════════════════════════════════════ */

.lab-detail {
    background: var(--bg-color, #f8fafc);
    color: var(--text-color, #172033);
    font-family: var(--body-font-family);
    padding: 34px 0 58px;
}

/* ── Hero card ─────────────────────────────────────────────────── */
.lab-hero {
    background: var(--surface-color, #fff);
    border: 1px solid var(--border-color, rgba(15,23,42,.1));
    border-radius: var(--border-radius, 8px);
    box-shadow: 0 18px 42px color-mix(in srgb, var(--text-color, #172033), transparent 92%);
    display: grid;
    gap: 0;
    grid-template-areas: "media side";
    grid-template-columns: minmax(0, 1.15fr) minmax(300px, 0.85fr);
    overflow: hidden;
}

.lab-hero__media {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary-color, #0055aa), transparent 85%),
        var(--bg-alt-color, #eef2f7));
    grid-area: media;
    min-height: 380px;
    overflow: hidden;
    position: relative;
}

.lab-hero__media img {
    display: block;
    height: 100%;
    min-height: 380px;
    object-fit: cover;
    width: 100%;
}

.lab-hero__placeholder {
    align-items: center;
    color: var(--primary-color, #0055aa);
    display: flex;
    flex-direction: column;
    font-size: 52px;
    gap: 12px;
    justify-content: center;
    min-height: 380px;
    opacity: .35;
}

.lab-hero__placeholder span {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: .05em;
    opacity: 1;
    text-transform: uppercase;
}

/* ── Carousel (facility-carousel) ────────────────────────────── */
.facility-carousel { position: relative; }

.facility-carousel__viewport {
    border-radius: var(--border-radius, 8px);
    overflow: hidden;
}

.facility-carousel__track {
    display: flex;
    transition: transform 0.45s ease;
    will-change: transform;
}

.facility-carousel__item {
    flex: 0 0 100%;
    min-width: 0;
}

.facility-carousel__item img {
    display: block;
    height: 420px;
    object-fit: cover;
    width: 100%;
}

.facility-carousel__control {
    align-items: center;
    background: var(--surface-color, #fff);
    border: 1px solid var(--border-color, rgba(15, 23, 42, 0.1));
    border-radius: 999px;
    color: var(--accent-color, var(--primary-color, #0055aa));
    display: inline-flex;
    font-size: 20px;
    height: 38px;
    justify-content: center;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 38px;
    z-index: 2;
}

.facility-carousel__control:hover,
.facility-carousel__control:focus {
    background: var(--accent-color, var(--primary-color, #0055aa));
    color: var(--accent-contrast-color, var(--primary-contrast-color, #fff));
    outline: none;
}

.facility-carousel__control--prev { left: 14px; }
.facility-carousel__control--next { right: 14px; }

.facility-carousel__dots {
    bottom: 18px;
    display: flex;
    gap: 8px;
    justify-content: center;
    left: 50%;
    margin-top: 0;
    position: absolute;
    transform: translateX(-50%);
    z-index: 2;
}

.facility-carousel__dot {
    background: color-mix(in srgb, var(--surface-color, #fff), transparent 25%);
    border: 0;
    border-radius: 999px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);
    height: 8px;
    padding: 0;
    width: 8px;
}

.facility-carousel__dot.is-active {
    background: var(--accent-color, var(--primary-color, #0055aa));
    width: 24px;
}

/* ── Side panel ─────────────────────────────────────────────────── */
.lab-hero__side {
    display: flex;
    flex-direction: column;
    grid-area: side;
}

.lab-hero__content {
    flex: 1;
    padding: 32px;
}

.lab-hero__badges {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 10px;
}
.lab-hero__eyebrow {
    color: var(--accent-color, var(--primary-color, #0055aa));
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .06em;
    margin-bottom: 0;
    text-transform: uppercase;
}
.lab-hero__featured-badge {
    align-items: center;
    background: color-mix(in srgb, #f59e0b, transparent 85%);
    border: 1px solid color-mix(in srgb, #f59e0b, transparent 55%);
    border-radius: 999px;
    color: #92400e;
    display: inline-flex;
    font-size: 11px;
    font-weight: 700;
    gap: 4px;
    letter-spacing: .04em;
    padding: 3px 10px;
    text-transform: uppercase;
}

.lab-hero__content h2 {
    color: var(--heading-color, var(--text-color, #172033));
    font-family: var(--header-font-family);
    font-size: 28px;
    line-height: 1.2;
    margin: 0 0 14px;
}

.lab-hero__desc {
    color: var(--text-muted-color, #667085);
    font-size: var(--text-base);
    line-height: 1.7;
    margin: 0;
}

/* ── Profile grid ─────────────────────────────────────────────── */
.lab-hero__profile {
    border: 1px solid var(--border-color, rgba(15,23,42,.1));
    border-radius: var(--border-radius, 6px);
    display: grid;
    gap: 0;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    margin-bottom: 18px;
    margin-top: 16px;
    overflow: hidden;
}

.lab-hero__profile-item {
    border-right: 1px solid var(--border-color, rgba(15,23,42,.1));
    border-bottom: 1px solid var(--border-color, rgba(15,23,42,.1));
    display: grid;
    gap: 4px;
    padding: 10px 14px;
}

.lab-hero__profile-item:nth-child(3n),
.lab-hero__profile-item:last-child { border-right: 0; }

.lab-hero__profile-item:nth-last-child(-n+3) { border-bottom: 0; }

.lab-hero__profile-item > span {
    color: var(--text-muted-color, #667085);
    font-size: var(--text-xs);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
}

.lab-hero__profile-item strong {
    color: var(--text-color, #172033);
    font-size: 14px;
    font-weight: 800;
}

/* ── Body section ─────────────────────────────────────────────── */
.lab-body { margin-top: 28px; }

.lab-section-title {
    color: var(--heading-color, var(--text-color, #172033));
    font-family: var(--header-font-family);
    font-size: 22px;
    line-height: 1.2;
    margin: 0 0 18px;
}

.lab-description {
    color: var(--text-color, #172033);
    line-height: 1.75;
}

.lab-description :where(p, ul, ol) { margin-bottom: 14px; }

/* ── Equipment table ──────────────────────────────────────────── */
.lab-equipment {
    background: var(--surface-color, #fff);
    border: 1px solid var(--border-color, rgba(15,23,42,.1));
    border-radius: var(--border-radius, 8px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--text-color, #172033), transparent 95%);
    margin-top: 28px;
    overflow: hidden;
}

.lab-equipment__head {
    align-items: center;
    background: color-mix(in srgb, var(--primary-color, #0055aa), transparent 94%);
    border-bottom: 1px solid var(--border-color, rgba(15,23,42,.1));
    display: flex;
    gap: 10px;
    padding: 16px 20px;
}

.lab-equipment__head i {
    color: var(--primary-color, #0055aa);
    font-size: 18px;
}

.lab-equipment__head h3 {
    color: var(--heading-color, var(--text-color, #172033));
    font-family: var(--header-font-family);
    font-size: 18px;
    margin: 0;
}

.lab-equipment table { border-collapse: collapse; width: 100%; }

.lab-equipment thead tr { background: var(--primary-color, #0055aa); }

.lab-equipment thead th {
    color: var(--primary-contrast-color, #fff);
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .05em;
    padding: 10px 16px;
    text-align: left;
    text-transform: uppercase;
}

.lab-equipment tbody tr {
    border-bottom: 1px solid var(--border-color, rgba(15,23,42,.07));
    transition: background .15s ease;
}

.lab-equipment tbody tr:last-child { border-bottom: 0; }

.lab-equipment tbody tr:hover {
    background: color-mix(in srgb, var(--primary-color, #0055aa), transparent 96%);
}

.lab-equipment tbody td {
    color: var(--text-color, #172033);
    font-size: 14px;
    padding: 10px 16px;
    vertical-align: middle;
}

.lab-equipment tbody td:first-child { font-weight: 700; }

.lab-equipment__badge {
    background: color-mix(in srgb, var(--secondary-color, #334155), transparent 88%);
    border-radius: 4px;
    color: var(--text-color, #172033);
    display: inline-block;
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
}

.lab-equipment__empty {
    color: var(--text-muted-color, #667085);
    padding: 24px 20px;
    text-align: center;
}

.lab-equipment__count {
    background: color-mix(in srgb, var(--primary-color, #0055aa), transparent 88%);
    border-radius: 999px;
    color: var(--primary-color, #0055aa);
    font-size: 12px;
    font-weight: 700;
    margin-left: auto;
    padding: 3px 10px;
}

.lab-eq-hidden { display: none; }

.lab-equipment__more {
    border-top: 1px solid var(--border-color, rgba(15,23,42,.07));
    padding: 14px 16px;
    text-align: center;
}

.lab-equipment__load-more {
    background: none;
    border: 1px solid var(--primary-color, #0055aa);
    border-radius: var(--border-radius, 6px);
    color: var(--primary-color, #0055aa);
    cursor: pointer;
    font-size: var(--text-sm);
    font-weight: 700;
    gap: 6px;
    padding: 8px 20px;
    transition: background .15s ease, color .15s ease;
}

.lab-equipment__load-more:hover {
    background: var(--primary-color, #0055aa);
    color: var(--primary-contrast-color, #fff);
}

.lab-equipment__load-more i { transition: transform .2s ease; }

.lab-equipment__load-more.is-expanded i { transform: rotate(180deg); }

/* ── Related labs ─────────────────────────────────────────────── */
.lab-related { margin-top: 40px; }

.lab-related__grid {
    display: grid;
    gap: 20px;
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.lab-related__card {
    background: var(--surface-color, #fff);
    border: 1px solid var(--border-color, rgba(15,23,42,.1));
    border-radius: var(--border-radius, 8px);
    color: inherit;
    display: block;
    overflow: hidden;
    text-decoration: none;
    transition: box-shadow .2s ease, transform .2s ease, border-color .2s ease;
}

.lab-related__card:hover,
.lab-related__card:focus {
    border-color: var(--primary-color, #0055aa);
    box-shadow: 0 16px 34px color-mix(in srgb, var(--text-color, #172033), transparent 90%);
    text-decoration: none;
    transform: translateY(-3px);
}

.lab-related__media {
    background: linear-gradient(135deg,
        color-mix(in srgb, var(--primary-color, #0055aa), transparent 82%),
        var(--bg-alt-color, #eef2f7));
    min-height: 160px;
    overflow: hidden;
    position: relative;
}

.lab-related__media img {
    display: block;
    height: 160px;
    object-fit: cover;
    width: 100%;
}

.lab-related__media-placeholder {
    align-items: center;
    color: color-mix(in srgb, var(--primary-color, #0055aa), transparent 40%);
    display: flex;
    font-size: 40px;
    justify-content: center;
    min-height: 160px;
}

.lab-related__body { padding: 16px; }

.lab-related__body span {
    color: var(--accent-color, var(--primary-color, #0055aa));
    display: block;
    font-size: var(--text-xs);
    font-weight: 800;
    letter-spacing: .05em;
    margin-bottom: 6px;
    text-transform: uppercase;
}

.lab-related__body h3 {
    color: var(--heading-color, var(--text-color, #172033));
    font-family: var(--header-font-family);
    font-size: 16px;
    line-height: 1.35;
    margin: 0 0 6px;
}

.lab-related__body p {
    color: var(--text-muted-color, #667085);
    display: -webkit-box;
    font-size: var(--text-sm);
    line-height: 1.5;
    margin: 0;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2;
}

.lab-related__link {
    align-items: center;
    border-top: 1px solid var(--border-color, rgba(15,23,42,.08));
    color: var(--primary-color, #0055aa);
    display: flex;
    font-size: var(--text-sm);
    font-weight: 700;
    gap: 6px;
    padding: 10px 16px;
    text-decoration: none;
}
.lab-related__link i { font-size: var(--text-xs); }

/* ── Lab responsive ───────────────────────────────────────────── */
@media (max-width: 991px) {
    .lab-hero {
        grid-template-areas: "media" "side";
        grid-template-columns: 1fr;
    }
    .lab-related__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 575px) {
    .lab-detail { padding-top: 24px; }
    .lab-hero__content { padding: 22px; }
    .lab-hero__content h2 { font-size: 22px; }
    .lab-hero__profile-item { padding: 8px 12px; }
    .lab-related__grid { grid-template-columns: 1fr; }
    .facility-carousel__item img,
    .lab-hero__media,
    .lab-hero__media img,
    .lab-hero__placeholder { min-height: 240px; }
}

/* ════════════════════════════════════════
   DOCUMENT CENTER PAGE
   ════════════════════════════════════════ */

.default-document-center {
    --document-surface: var(--card-bg, var(--surface-color, var(--bg-color)));
    --document-soft-surface: var(--bg-alt-color, color-mix(in srgb, var(--bg-color), var(--text-color) 4%));
    --document-border: var(--border-color, color-mix(in srgb, var(--text-color), transparent 86%));
    --document-muted: var(--text-muted-color, color-mix(in srgb, var(--text-color), var(--bg-color) 38%));
    --document-file-color: var(--secondary-color, var(--text-color));
    --document-link-color: var(--accent-color, var(--primary-color));
    --document-action-color: var(--primary-color);
    background: var(--bg-color);
    color: var(--text-color);
}

.document-center-shell { padding: 46px 0 72px; }

.document-center-header {
    align-items: center;
    background: linear-gradient(135deg, var(--document-soft-surface), var(--bg-color));
    border: 1px solid var(--document-border);
    border-left: 4px solid var(--accent-color, var(--primary-color));
    border-radius: var(--border-radius, 8px);
    display: flex;
    gap: 20px;
    justify-content: space-between;
    margin-bottom: 24px;
    padding: 20px;
}

.document-center-kicker {
    color: var(--accent-color, var(--primary-color));
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    text-transform: uppercase;
}

.document-card-type {
    background: color-mix(in srgb, var(--accent-color, var(--primary-color)), transparent 88%);
    border: 1px solid color-mix(in srgb, var(--accent-color, var(--primary-color)), transparent 72%);
    border-radius: 999px;
    color: var(--accent-color, var(--primary-color));
    display: inline-block;
    font-size: var(--text-xs);
    font-weight: 800;
    padding: 5px 9px;
    text-transform: uppercase;
}

.document-center-header h2 {
    color: var(--heading-color, var(--text-color));
    font-family: var(--header-font-family);
    font-size: 30px;
    line-height: 1.2;
    margin: 4px 0 0;
}

.document-center-count {
    background: var(--text-color);
    border-radius: var(--border-radius, 8px);
    color: var(--bg-color);
    min-width: 112px;
    padding: 14px 18px;
    text-align: center;
}

.document-center-count strong,
.document-center-count span { display: block; }

.document-center-count strong { font-size: 24px; line-height: 1; }

.document-center-count span {
    font-size: 12px;
    font-weight: 800;
    margin-top: 5px;
    text-transform: uppercase;
}

.document-center-grid { display: grid; gap: 16px; }
.doc-group { margin-bottom: 36px; }
.doc-group-heading { border-bottom: 2px solid var(--border-color); color: var(--heading-color); font-size: var(--text-xl); font-weight: 700; margin: 0 0 18px; padding-bottom: 10px; }

.document-card {
    align-items: center;
    background: var(--document-surface);
    border: 1px solid var(--document-border);
    border-radius: var(--border-radius, 8px);
    display: grid;
    gap: 18px;
    grid-template-columns: 58px minmax(0, 1fr) auto;
    padding: 18px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease, transform 0.2s ease;
}

.document-card:hover {
    border-color: color-mix(in srgb, var(--accent-color, var(--primary-color)), var(--document-border) 45%);
    box-shadow: 0 14px 32px rgba(0, 0, 0, 0.08);
    transform: translateY(-2px);
}

.document-card-icon {
    align-items: center;
    border-radius: var(--border-radius, 8px);
    display: inline-flex;
    font-size: 22px;
    height: 58px;
    justify-content: center;
    width: 58px;
}

.document-card-icon--file {
    background: color-mix(in srgb, var(--document-file-color), transparent 88%);
    color: var(--document-file-color);
}

.document-card-icon--link {
    background: color-mix(in srgb, var(--document-link-color), transparent 86%);
    color: var(--document-link-color);
}

.document-card-image {
    background: var(--document-soft-surface);
    border: 1px solid var(--document-border);
    border-radius: var(--border-radius, 8px);
    display: block;
    height: 58px;
    overflow: hidden;
    width: 58px;
}

.document-card-image img {
    display: block;
    height: 100%;
    object-fit: cover;
    width: 100%;
}

.document-card-body { min-width: 0; }

.document-card h3 {
    color: var(--text-color);
    font-family: var(--header-font-family);
    font-size: 20px;
    line-height: 1.3;
    margin: 4px 0 0;
}

.document-card-description {
    color: var(--document-muted);
    font-size: 14px;
    line-height: 1.65;
    margin-top: 8px;
}

.document-card-description :last-child { margin-bottom: 0; }

.document-description-toggle {
    background: transparent;
    border: 0;
    color: var(--accent-color, var(--primary-color));
    display: inline-block;
    font-size: 12px;
    font-weight: 800;
    margin-top: 8px;
    padding: 0;
    text-transform: uppercase;
}

.document-description-toggle:hover,
.document-description-toggle:focus {
    color: var(--text-color);
    text-decoration: underline;
}

.document-card-extra {
    border-top: 1px solid var(--document-border);
    display: grid;
    gap: 6px;
    margin-top: 14px;
    padding-top: 12px;
}

.document-card-extra-row {
    column-gap: 12px;
    display: grid;
    grid-template-columns: 140px 1fr;
}

.document-card-extra dt {
    color: var(--document-muted);
    font-size: 12px;
    font-weight: 700;
    padding-top: 1px;
    text-transform: uppercase;
}

.document-card-extra dd {
    color: var(--text-color);
    font-size: 14px;
    margin: 0;
    word-break: break-word;
}

.document-card-extra dd a {
    color: var(--accent-color, var(--primary-color));
    text-decoration: none;
    word-break: break-all;
}

.document-card-extra dd a:hover { text-decoration: underline; }

.document-card-meta {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 12px;
}

.document-card-meta span {
    align-items: center;
    background: var(--document-soft-surface);
    border: 1px solid var(--document-border);
    border-radius: 999px;
    color: var(--document-muted);
    display: inline-flex;
    font-size: 12px;
    font-weight: 700;
    gap: 6px;
    max-width: 100%;
    padding: 7px 10px;
}

.document-card-meta span i { color: var(--accent-color, var(--primary-color)); }

.document-card-action {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.document-action-btn {
    align-items: center;
    color: var(--text-color);
    display: inline-flex;
    font-size: 12px;
    gap: 8px;
    justify-content: center;
    line-height: 1.2;
    min-height: 34px;
    padding: 9px 14px;
    white-space: nowrap;
}

.document-action-btn:hover,
.document-action-btn:focus {
    color: var(--text-color);
    text-decoration: none;
}

.document-download-link {
    align-items: center;
    color: var(--accent-color, var(--primary-color));
    display: inline-flex;
    font-size: 12px;
    font-weight: 800;
    gap: 6px;
    text-decoration: none;
    text-transform: uppercase;
}

.document-download-link:hover,
.document-download-link:focus {
    color: var(--text-color);
    text-decoration: underline;
}

.document-action-empty { display: none; }

.document-empty-state {
    border: 2px dashed var(--document-border);
    border-radius: var(--border-radius, 8px);
    color: var(--document-muted);
    padding: 56px 24px;
    text-align: center;
}

.document-empty-icon {
    color: var(--document-border);
    display: block;
    font-size: 48px;
    margin-bottom: 20px;
}

.document-empty-state h3 {
    color: var(--heading-color, var(--text-color));
    font-family: var(--header-font-family);
    font-size: 20px;
    margin: 0 0 10px;
}

.document-empty-state p { font-size: var(--text-base); margin: 0 0 20px; }

.document-empty-reset {
    align-items: center;
    background: var(--document-soft-surface);
    border: 1px solid var(--document-border);
    border-radius: var(--border-radius, 8px);
    color: var(--document-muted);
    display: inline-flex;
    font-size: var(--text-sm);
    font-weight: 700;
    gap: 6px;
    padding: 8px 16px;
    text-decoration: none;
}

.document-empty-reset:hover {
    border-color: var(--text-color);
    color: var(--text-color);
    text-decoration: none;
}

.document-preview-modal[hidden],
.document-image-modal[hidden] { display: none; }

body.document-preview-open { overflow: hidden; }

.document-preview-modal,
.document-image-modal {
    align-items: center;
    bottom: 0;
    display: flex;
    justify-content: center;
    left: 0;
    padding: 18px;
    position: fixed;
    right: 0;
    top: 0;
    z-index: 9999;
}

.document-preview-backdrop,
.document-image-backdrop {
    background: rgba(0, 0, 0, 0.62);
    bottom: 0;
    left: 0;
    position: absolute;
    right: 0;
    top: 0;
}

.document-preview-dialog,
.document-image-dialog {
    background: var(--bg-color);
    border-radius: var(--border-radius, 8px);
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
    display: flex;
    flex-direction: column;
    max-height: min(88vh, 820px);
    max-width: 1040px;
    overflow: hidden;
    position: relative;
    width: min(100%, 1040px);
}

.document-preview-header {
    align-items: center;
    background: var(--document-soft-surface);
    border-bottom: 1px solid var(--document-border);
    display: flex;
    gap: 14px;
    justify-content: space-between;
    padding: 14px 16px;
}

.document-preview-header h3 {
    color: var(--heading-color, var(--text-color));
    font-family: var(--header-font-family);
    font-size: 18px;
    line-height: 1.3;
    margin: 0;
}

.document-preview-close {
    align-items: center;
    background: var(--bg-color);
    border: 1px solid var(--document-border);
    border-radius: 50%;
    color: var(--text-color);
    display: inline-flex;
    height: 36px;
    justify-content: center;
    width: 36px;
}

.document-preview-frame-wrap {
    background: var(--document-soft-surface);
    height: min(76vh, 720px);
}

.document-preview-frame-wrap iframe {
    border: 0;
    display: block;
    height: 100%;
    width: 100%;
}

.document-image-frame-wrap {
    align-items: center;
    background: var(--document-soft-surface);
    display: flex;
    justify-content: center;
    max-height: min(76vh, 720px);
    overflow: auto;
    padding: 16px;
}

.document-image-frame-wrap img {
    display: block;
    max-height: calc(min(76vh, 720px) - 32px);
    max-width: 100%;
    object-fit: contain;
}

@media (max-width: 767px) {
    .document-center-shell { padding: 34px 0 52px; }
    .document-center-header { align-items: flex-start; display: grid; }
    .document-center-count { min-width: 0; text-align: left; width: 100%; }
    .document-card { align-items: flex-start; grid-template-columns: 48px minmax(0, 1fr); }
    .document-card-icon { font-size: 18px; height: 48px; width: 48px; }
    .document-card-image { height: 48px; width: 48px; }
    .document-card-action { grid-column: 1 / -1; width: 100%; }
    .document-action-btn { width: 100%; }
    .document-download-link { justify-content: center; width: 100%; }
    .document-preview-modal { padding: 10px; }
    .document-preview-dialog { max-height: 92vh; }
    .document-preview-frame-wrap { height: 76vh; }
}

@media (max-width: 480px) {
    .document-card { display: block; }
    .document-card-icon,
    .document-card-image,
    .document-card-body,
    .document-card-action { margin-bottom: 14px; }
    .document-card-action { margin-bottom: 0; }
}

/* Shared table-page field image thumbnail */
.fac-field-img { height: 80px; object-fit: cover; width: 80px; }

/* Visionaries leader photo */
.vis-leader-photo { margin: auto; max-height: 220px; }

/* Inline-style replacements: reusable static presentation classes. */
.fts-disclaimer--dashed {
    border-style: dashed;
}

.car-card-details-btn {
    font-size: 13px !important;
    padding: 8px 18px !important;
}

.alumni-form-alert {
    margin: 16px 24px 0;
}

.alumni-form-divider {
    border-color: var(--cp-border, rgba(0, 0, 0, .1));
    margin: 4px 0 18px;
}

.alumni-form-section-label {
    color: var(--ast-primary, var(--primary-color));
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .06em;
    margin: 0 0 14px;
    text-transform: uppercase;
}

.footer-scheme-custom {
    background-color: var(--footer-custom-bg, var(--secondary-color));
}

/* Default theme color-role balancing
   Primary = main actions/links, Secondary = structure/date/support, Accent = small highlights/status/chips. */
body {
    --theme-secondary-soft: color-mix(in srgb, var(--secondary-color) 11%, var(--surface-color, var(--bg-color)));
    --theme-secondary-softer: color-mix(in srgb, var(--secondary-color) 6%, var(--surface-color, var(--bg-color)));
    --theme-accent-soft: color-mix(in srgb, var(--accent-color) 12%, var(--surface-color, var(--bg-color)));
    --theme-accent-softer: color-mix(in srgb, var(--accent-color) 7%, var(--surface-color, var(--bg-color)));
    --theme-accent-border: color-mix(in srgb, var(--accent-color) 32%, var(--border-color));
    --theme-secondary-border: color-mix(in srgb, var(--secondary-color) 28%, var(--border-color));
}

:where(a, button, input, select, textarea):focus-visible {
    outline: 3px solid color-mix(in srgb, var(--accent-color) 36%, transparent);
    outline-offset: 2px;
}

.section-eyebrow,
.default-home-section-shell .section-eyebrow {
    background: var(--theme-accent-soft) !important;
    color: var(--accent-color) !important;
}

.theme-badge--accent,
:where(
    .ast-card-badge,
    .car-badge--open,
    .dhb-type-badge--article,
    .event-status-open
) {
    background: var(--theme-accent-soft) !important;
    border-color: var(--theme-accent-border) !important;
    color: var(--accent-color) !important;
}

:where(
    .default-event-mode,
    .default-placement-drive-mode,
    .dco-type-label,
    .dhb-card-cats,
    .ast-card-achievement,
    .fac-identity-role,
    .department-role,
    .committee-role,
    .mou-dept-tag
) {
    color: var(--accent-color) !important;
}

:where(
    .default-event-mode,
    .default-placement-drive-mode,
    .car-chip,
    .ast-chip,
    .department-lab-count,
    .mou-dept-tag,
    .dhb-card-cats span
) {
    background: var(--theme-accent-softer) !important;
    border-color: var(--theme-accent-border) !important;
}

:where(
    .default-placement-drive-date,
    .event-related-date,
    .event-date,
    .awd-tl-year-badge,
    .awd-tl-date-strip,
    .ast-card-chips,
    .document-card-icon,
    .department-snapshot i
) {
    background: var(--theme-secondary-soft) !important;
    color: var(--secondary-color) !important;
}

:where(
    .default-facility-body,
    .department-detail-card,
    .ast-card,
    .awd-tl-card--no-media,
    .document-center-hero,
    .committee-card,
    .mou-table-card
) {
    border-color: var(--border-color);
}

:where(
    .default-facility-body,
    .ast-card,
    .awd-tl-card--no-media,
    .document-center-hero
) {
    border-left-color: var(--secondary-color) !important;
}

:where(
    .default-course-card,
    .default-event-card,
    .default-facility-card,
    .default-placement-drive-card,
    .dhb-card,
    .dss-card,
    .ast-card,
    .awd-tl-card,
    .car-card,
    .committee-card,
    .document-card
):hover {
    border-color: var(--theme-accent-border) !important;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--accent-color) 14%, transparent) !important;
}

:where(
    .default-course-card-link,
    .default-facility-link,
    .dhb-card-link,
    .ast-card-link,
    .department-inline-link,
    .mou-doc-link
):hover,
:where(
    .default-course-card-title a,
    .default-event-title a,
    .default-placement-drive-title a,
    .dhb-card-title a,
    .ast-card-title a
):hover {
    color: var(--accent-color) !important;
}

:where(
    .filter-tab.is-active,
    .dco-tab--active,
    .dnb-tab--active,
    .evl-pill--active
) {
    background: var(--secondary-color) !important;
    border-color: var(--secondary-color) !important;
    color: var(--secondary-contrast-color, #fff) !important;
}

:where(
    .filter-tab:not(.is-active):hover,
    .dco-tab:not(.dco-tab--active):hover,
    .dnb-tab:not(.dnb-tab--active):hover,
    .evl-pill:not(.evl-pill--active):hover
) {
    background: color-mix(in srgb, var(--secondary-color) 10%, transparent) !important;
    border-color: var(--secondary-color) !important;
    color: var(--secondary-color) !important;
}

.home-section-bg-dark :where(
    .section-eyebrow,
    .default-event-mode,
    .default-placement-drive-mode,
    .car-chip,
    .ast-card-info
) {
    background: color-mix(in srgb, var(--accent-color) 20%, transparent) !important;
    color: var(--accent-color) !important;
}

.home-section-bg-dark :where(
    .default-placement-drive-date,
    .event-related-date,
    .document-card-icon
) {
    background: color-mix(in srgb, var(--primary-color) 22%, transparent) !important;
    color: color-mix(in srgb, var(--primary-color) 70%, #ffffff) !important;
}

/* Homepage visual consistency pass */
.default-home-section-shell {
    --home-card-bg: var(--home-section-surface, var(--surface-color, var(--bg-color)));
    --home-card-border: var(--home-section-border, var(--border-color));
    --home-card-shadow: 0 8px 24px color-mix(in srgb, var(--home-section-text, var(--text-color)) 7%, transparent);
    --home-card-hover-shadow: 0 14px 34px color-mix(in srgb, var(--primary-color) 16%, transparent);
    --home-link-color: var(--primary-color);
    --home-link-hover: var(--primary-hover-color, var(--primary-color));
    --home-soft-primary: color-mix(in srgb, var(--primary-color) 11%, var(--home-card-bg));
}

.default-home-section-shell :where(
    .default-courses-heading,
    .default-events-heading,
    .default-facilities-heading,
    .default-gallery-heading,
    .default-testimonial-heading,
    .default-management-heading,
    .default-success-stories-heading,
    .default-toppers-heading,
    .default-trust-bar-heading,
    .default-highlights-heading,
    .default-facts-heading,
    .dhb-header,
    .dnb-header,
    .dss-header,
    .dhm-header,
    .dip-header,
    .daj-header
) {
    text-align: center;
}

.default-home-section-shell :where(
    .default-courses-heading,
    .default-events-heading,
    .default-facilities-heading,
    .default-gallery-heading,
    .default-testimonial-heading,
    .default-management-heading,
    .default-success-stories-heading,
    .default-toppers-heading,
    .default-trust-bar-heading,
    .default-highlights-heading,
    .default-facts-heading,
    .dhb-header,
    .dnb-header,
    .dss-header,
    .dhm-header,
    .dip-header,
    .daj-header
) :where(p, .default-courses-lead) {
    color: var(--home-section-muted, var(--text-muted-color));
    margin-left: auto;
    margin-right: auto;
    max-width: 720px;
}

.default-home-section-shell .default-placement-drives-heading {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

.default-home-section-shell .default-placement-drives-heading > div {
    text-align: center;
    width: 100%;
}

.default-home-section-shell .default-placement-drives-view-all {
    align-self: flex-end;
}

.default-home-section-shell :where(
    .default-course-card,
    .default-event-card,
    .default-facility-card,
    .default-placement-drive-card,
    .default-highlight-card,
    .default-about-pillar,
    .default-gallery-card,
    .dhb-card,
    .dss-card,
    .dhm-card,
    .daj-card,
    .dtr-item,
    .default-management-card,
    .default-testimonial-item
) {
    background: var(--home-card-bg) !important;
    border-color: var(--home-card-border) !important;
    box-shadow: var(--home-card-shadow);
    color: var(--home-section-text, var(--text-color));
}

.default-home-section-shell :where(
    .default-course-card,
    .default-event-card,
    .default-facility-card,
    .default-placement-drive-card,
    .default-highlight-card,
    .default-about-pillar,
    .default-gallery-card,
    .dhb-card,
    .dss-card,
    .dhm-card,
    .daj-card,
    .dtr-item,
    .default-management-card,
    .default-testimonial-item
):hover {
    border-color: color-mix(in srgb, var(--primary-color) 50%, var(--home-card-border)) !important;
    box-shadow: var(--home-card-hover-shadow);
}

.default-home-section-shell :where(
    .default-course-card-title a,
    .default-event-title a,
    .default-placement-drive-title a,
    .dhb-card-title a,
    .default-facility-title,
    .default-highlight-title,
    .daj-title,
    .dss-title,
    .dhm-title
) {
    color: var(--home-section-heading, var(--heading-color, var(--home-section-text, var(--text-color)))) !important;
}

.default-home-section-shell :where(
    .default-course-card-title a,
    .default-event-title a,
    .default-placement-drive-title a,
    .dhb-card-title a
):hover {
    color: var(--home-link-hover) !important;
}

.default-home-section-shell :where(
    .default-course-card-desc,
    .default-event-desc,
    .default-event-meta,
    .default-event-meta-item,
    .default-facility-desc,
    .default-placement-drive-meta,
    .default-placement-drive-description,
    .dhb-card-excerpt,
    .dhb-card-date,
    .dhb-card-read-time,
    .default-about-pillar-text,
    .default-about-pillar-text p
) {
    color: var(--home-section-muted, var(--text-muted-color)) !important;
}

.default-home-section-shell :where(
    .default-course-card-link,
    .default-facility-link,
    .dhb-card-link,
    .default-event-cta
) {
    color: var(--home-link-color) !important;
}

.default-home-section-shell :where(
    .default-course-card-link,
    .default-facility-link,
    .dhb-card-link,
    .default-event-cta
):hover {
    color: var(--home-link-hover) !important;
}

.default-home-section-shell :where(
    .section-eyebrow,
    .dco-type-label,
    .default-placement-drive-mode,
    .theme-badge--primary
) {
    background: var(--home-soft-primary) !important;
    color: var(--primary-color) !important;
}

.default-home-section-shell :where(
    .default-placement-drive-date,
    .default-about-pillar-icon,
    .default-highlight-icon
) {
    background: var(--home-soft-primary) !important;
    color: var(--primary-color) !important;
}

/* Alumni success stories redesign */
#mu-success-stories.default-success-stories-section {
    --dss-surface: var(--home-card-bg, var(--home-section-surface, var(--surface-color, var(--bg-color))));
    --dss-border: var(--home-card-border, var(--home-section-border, var(--border-color)));
    --dss-muted: var(--home-section-muted, var(--text-muted-color));
    --dss-heading: var(--home-section-heading, var(--heading-color, var(--home-section-text, var(--text-color))));
    --dss-primary-soft: color-mix(in srgb, var(--primary-color) 11%, var(--dss-surface));
    --dss-accent-soft: color-mix(in srgb, var(--accent-color, var(--primary-color)) 10%, var(--dss-surface));
}

#mu-success-stories .dss-carousel {
    margin: 0 auto 18px;
    max-width: 1120px;
    padding: 0 44px;
}

#mu-success-stories .dss-track {
    gap: 18px;
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
}

#mu-success-stories .dss-card {
    align-items: stretch;
    background: var(--dss-surface) !important;
    border: 1px solid var(--dss-border) !important;
    border-radius: var(--border-radius, 8px);
    box-shadow: 0 8px 24px color-mix(in srgb, var(--home-section-text, var(--text-color)) 7%, transparent);
    display: flex;
    flex: 0 0 calc(33.333% - 12px);
    flex-direction: row;
    gap: 0;
    min-height: 160px;
    overflow: hidden;
    padding: 0;
    text-decoration: none;
}

#mu-success-stories .dss-card:hover {
    box-shadow: 0 16px 36px color-mix(in srgb, var(--primary-color) 15%, transparent);
    transform: translateY(-3px);
}

#mu-success-stories .dss-photo {
    background: linear-gradient(135deg, var(--dss-primary-soft), var(--dss-accent-soft));
    border-radius: 0;
    aspect-ratio: 1 / 1;
    flex: 0 0 132px;
    height: auto;
    overflow: hidden;
    position: relative;
    width: 132px;
}

#mu-success-stories .dss-photo img,
#mu-success-stories .dss-initials {
    border-radius: 0;
    height: 100%;
    width: 100%;
}

#mu-success-stories .dss-photo img {
    display: block;
    object-fit: cover;
    object-position: top center;
}

#mu-success-stories .dss-initials {
    background: linear-gradient(135deg, var(--dss-primary-soft), var(--dss-accent-soft));
    color: var(--primary-color);
    font-size: 34px;
}

#mu-success-stories .dss-photo-badge {
    background: var(--accent-color) !important;
    border: 3px solid var(--dss-surface) !important;
    bottom: 12px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, 0.22);
    color: #fff !important;
    font-size: 14px;
    height: 34px;
    right: 12px;
    width: 34px;
    z-index: 2;
}

#mu-success-stories .dss-info {
    display: flex;
    flex: 1;
    flex-direction: column;
    justify-content: center;
    gap: 8px;
    min-height: 132px;
    min-width: 0;
    padding: 20px;
}

#mu-success-stories .dss-name {
    color: var(--dss-heading);
    font-size: 15px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
}

#mu-success-stories .dss-achievement {
    color: var(--primary-color);
    display: block;
    font-size: 13px;
    line-height: 1.45;
    min-height: 0;
    overflow: visible;
    white-space: normal;
    word-break: break-word;
}

#mu-success-stories .dss-company {
    background: var(--dss-accent-soft);
    color: var(--dss-muted);
    margin-top: 4px;
    overflow: visible;
    text-overflow: clip;
    white-space: normal;
    word-break: break-word;
}

#mu-success-stories .dss-arrow {
    background: var(--dss-surface);
    border-color: var(--dss-border);
    box-shadow: 0 8px 20px color-mix(in srgb, var(--home-section-text, var(--text-color)) 10%, transparent);
    color: var(--primary-color);
}

#mu-success-stories .dss-arrow--prev { left: 0; }
#mu-success-stories .dss-arrow--next { right: 0; }

#mu-success-stories .dss-arrow:hover,
#mu-success-stories .dss-arrow:focus {
    background: var(--primary-color);
    border-color: var(--primary-color);
    color: var(--primary-contrast-color, #fff);
}

#mu-success-stories .dss-dot {
    background: color-mix(in srgb, var(--primary-color) 20%, var(--dss-border));
}

#mu-success-stories .dss-dot--active {
    background: var(--primary-color);
}

@media (max-width: 991px) {
    #mu-success-stories .dss-card {
        flex-basis: calc(50% - 9px);
    }

    #mu-success-stories .dss-photo {
        flex-basis: 150px;
        width: 150px;
    }

    #mu-success-stories .dss-info {
        min-height: 150px;
    }
}

@media (max-width: 575px) {
    #mu-success-stories .dss-carousel {
        padding: 0 34px;
    }

    #mu-success-stories .dss-card {
        flex-direction: column;
        flex-basis: 100%;
        min-height: 300px;
    }

    #mu-success-stories .dss-photo {
        aspect-ratio: 1 / 1;
        flex-basis: auto;
        height: auto;
        width: 100%;
    }
}

/* Final color role enforcement: keep accent visible without replacing primary actions. */
.default-home-section-shell .section-eyebrow,
.page-section-header .section-eyebrow,
.ast-header + .ast-grid .ast-card-badge {
    background: var(--theme-accent-soft) !important;
    color: var(--accent-color) !important;
}

.default-home-section-shell :where(
    .default-event-mode,
    .default-placement-drive-mode,
    .dco-type-label,
    .dhb-type-badge--article,
    .dnb-new
) {
    background: var(--theme-accent-soft) !important;
    border-color: var(--theme-accent-border) !important;
    color: var(--accent-color) !important;
}

.default-home-section-shell :where(
    .default-course-card-link,
    .default-facility-link,
    .dhb-card-link,
    .dss-achievement
):hover,
.default-home-section-shell :where(
    .default-course-card-title a,
    .default-event-title a,
    .default-placement-drive-title a,
    .dhb-card-title a
):hover {
    color: var(--accent-color) !important;
}

.default-home-section-shell :where(
    .default-placement-drive-date,
    .default-facility-body,
    .dss-company
) {
    border-color: var(--theme-secondary-border) !important;
}

.default-home-section-shell :where(
    .default-placement-drive-date,
    .event-related-date,
    .dss-company
) {
    background: var(--theme-secondary-soft) !important;
    color: var(--secondary-color) !important;
}

.default-home-section-shell.home-section-bg-dark .section-eyebrow,
.default-home-section-shell .home-section-bg-dark .section-eyebrow,
.default-home-section-shell.home-section-bg-dark :where(
    .default-event-mode,
    .default-placement-drive-mode,
    .dco-type-label,
    .dhb-type-badge--article,
    .dnb-new
),
.default-home-section-shell .home-section-bg-dark :where(
    .default-event-mode,
    .default-placement-drive-mode,
    .dco-type-label,
    .dhb-type-badge--article,
    .dnb-new
) {
    background: color-mix(in srgb, var(--accent-color) 24%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent-color) 42%, transparent) !important;
    color: color-mix(in srgb, var(--accent-color) 35%, var(--bg-color)) !important;
}

.default-home-section-shell.home-section-bg-dark :where(
    .default-placement-drive-date,
    .event-related-date,
    .dss-company
),
.default-home-section-shell .home-section-bg-dark :where(
    .default-placement-drive-date,
    .event-related-date,
    .dss-company
) {
    background: color-mix(in srgb, var(--primary-color) 22%, transparent) !important;
    border-color: color-mix(in srgb, var(--primary-color) 38%, transparent) !important;
    color: color-mix(in srgb, var(--primary-color) 70%, #ffffff) !important;
}

/* Dark section CTA: override .mu-read-more-btn to primary-filled; keep border-radius/padding from the active CTA shape */
.default-home-section-shell.home-section-bg-dark .mu-read-more-btn:not(:where(.dhb-view-all, .dnb-view-all, .dss-view-all, .dhm-view-all, .dip-view-all, .default-placement-drives-view-all)),
.default-home-section-shell .home-section-bg-dark .mu-read-more-btn:not(:where(.dhb-view-all, .dnb-view-all, .dss-view-all, .dhm-view-all, .dip-view-all, .default-placement-drives-view-all)) {
    background-color: var(--primary-color) !important;
    background-image: none !important;
    border-color: var(--primary-color) !important;
    border-style: solid !important;
    color: var(--primary-contrast-color, #ffffff) !important;
    text-decoration: none !important;
}
.default-home-section-shell.home-section-bg-dark .mu-read-more-btn:not(:where(.dhb-view-all, .dnb-view-all, .dss-view-all, .dhm-view-all, .dip-view-all, .default-placement-drives-view-all)):hover,
.default-home-section-shell.home-section-bg-dark .mu-read-more-btn:not(:where(.dhb-view-all, .dnb-view-all, .dss-view-all, .dhm-view-all, .dip-view-all, .default-placement-drives-view-all)):focus,
.default-home-section-shell .home-section-bg-dark .mu-read-more-btn:not(:where(.dhb-view-all, .dnb-view-all, .dss-view-all, .dhm-view-all, .dip-view-all, .default-placement-drives-view-all)):hover,
.default-home-section-shell .home-section-bg-dark .mu-read-more-btn:not(:where(.dhb-view-all, .dnb-view-all, .dss-view-all, .dhm-view-all, .dip-view-all, .default-placement-drives-view-all)):focus {
    background-color: var(--primary-hover-color, var(--primary-color)) !important;
    background-image: none !important;
    border-color: var(--primary-hover-color, var(--primary-color)) !important;
    color: var(--primary-contrast-color, #ffffff) !important;
}

/* Batch 2: home section color roles. */
.default-home-section-shell {
    --home-accent-soft: var(--theme-accent-soft);
    --home-accent-softer: var(--theme-accent-softer);
    --home-accent-border: var(--theme-accent-border);
    --home-secondary-soft: var(--theme-secondary-soft);
    --home-secondary-border: var(--theme-secondary-border);
}

.default-home-section-shell :where(
    .default-about-heading,
    .default-highlights-heading,
    .default-facts-heading,
    .default-departments-heading,
    .default-gallery-heading,
    .default-testimonial-heading,
    .default-management-heading,
    .default-placement-drives-heading,
    .default-success-stories-heading,
    .default-toppers-heading,
    .default-trust-bar-heading,
    .dtr-header,
    .dtrb-header,
    .daj-header
) {
    text-align: center;
}

.default-home-section-shell :where(
    .default-about-heading,
    .default-highlights-heading,
    .default-facts-heading,
    .default-departments-heading,
    .default-gallery-heading,
    .default-testimonial-heading,
    .default-management-heading,
    .default-placement-drives-heading,
    .default-success-stories-heading,
    .default-toppers-heading,
    .default-trust-bar-heading,
    .dtr-header,
    .dtrb-header,
    .daj-header
) :where(p, .default-courses-lead, .dtrb-lead) {
    color: var(--home-section-muted, var(--text-muted-color)) !important;
    margin-left: auto;
    margin-right: auto;
    max-width: 720px;
}

.default-home-section-shell :where(
    .default-about-pillar,
    .default-highlight-card,
    .default-fact-item,
    .default-gallery-card,
    .default-management-card,
    .default-testimonial-item,
    .dtr-card,
    .dtrb-item,
    .dip-logo-card
) {
    border-color: var(--home-card-border, var(--home-section-border, var(--border-color))) !important;
}

.default-home-section-shell :where(
    .default-about-pillar:hover,
    .default-highlight-card:hover,
    .default-fact-item:hover,
    .default-gallery-card:hover,
    .default-management-card:hover,
    .default-testimonial-item:hover,
    .dtr-card:hover,
    .dtrb-item:hover,
    .dip-logo-card:hover
) {
    border-color: color-mix(in srgb, var(--primary-color) 48%, var(--home-card-border, var(--border-color))) !important;
}

.default-home-section-shell :where(
    .section-eyebrow,
    .default-course-card-badge span,
    .dco-type-label,
    .default-event-mode,
    .default-placement-drive-mode,
    .dhb-type-badge--article,
    .dhm-card-badge,
    .dnb-new
) {
    background: var(--home-accent-soft) !important;
    border-color: var(--home-accent-border) !important;
    color: var(--accent-color) !important;
}

.default-home-section-shell :where(
    .default-about-pillar-icon,
    .default-highlight-icon,
    .default-fact-icon,
    .dtrb-icon,
    .daj-card-icon,
    .dhm-card-initials,
    .dss-initials
) {
    background: var(--home-accent-soft) !important;
    color: var(--accent-color) !important;
}

.default-home-section-shell :where(
    .default-fact-metric,
    .dtr-score,
    .dtrb-value
) {
    color: var(--primary-color) !important;
}

.default-home-section-shell :where(
    .default-event-meta-item,
    .default-placement-drive-meta,
    .default-placement-drive-date,
    .dhb-card-date,
    .dhb-card-read-time,
    .dtr-header-course,
    .dtr-year,
    .dtrb-label,
    .dtrb-desc,
    .dss-company,
    .dip-company-name
) {
    color: var(--home-section-muted, var(--text-muted-color)) !important;
}

.default-home-section-shell :where(
    .default-placement-drive-date,
    .dss-company,
    .dtr-info-bar
) {
    background: var(--home-secondary-soft) !important;
    border-color: var(--home-secondary-border) !important;
}

.default-home-section-shell :where(
    .default-course-card-link,
    .default-facility-link,
    .dhb-card-link,
    .daj-card-link,
    .default-placement-drive-cta
):hover,
.default-home-section-shell :where(
    .default-course-card-title a,
    .default-event-title a,
    .default-placement-drive-title a,
    .dhb-card-title a
):hover {
    color: var(--accent-color) !important;
}

.default-home-section-shell.home-section-bg-dark :where(
    .section-eyebrow,
    .default-course-card-badge span,
    .dco-type-label,
    .default-event-mode,
    .default-placement-drive-mode,
    .dhb-type-badge--article,
    .dhm-card-badge,
    .dnb-new
),
.default-home-section-shell .home-section-bg-dark :where(
    .section-eyebrow,
    .default-course-card-badge span,
    .dco-type-label,
    .default-event-mode,
    .default-placement-drive-mode,
    .dhb-type-badge--article,
    .dhm-card-badge,
    .dnb-new
) {
    background: color-mix(in srgb, var(--accent-color) 24%, transparent) !important;
    border-color: color-mix(in srgb, var(--accent-color) 42%, transparent) !important;
    color: color-mix(in srgb, var(--accent-color) 35%, var(--bg-color)) !important;
}

.default-home-section-shell.home-section-bg-dark :where(
    .default-about-pillar-icon,
    .default-highlight-icon,
    .default-fact-icon,
    .dtrb-icon,
    .daj-card-icon,
    .dhm-card-initials,
    .dss-initials
),
.default-home-section-shell .home-section-bg-dark :where(
    .default-about-pillar-icon,
    .default-highlight-icon,
    .default-fact-icon,
    .dtrb-icon,
    .daj-card-icon,
    .dhm-card-initials,
    .dss-initials
) {
    background: color-mix(in srgb, var(--accent-color) 22%, transparent) !important;
    color: color-mix(in srgb, var(--accent-color) 35%, var(--bg-color)) !important;
}

.default-home-section-shell.home-section-bg-dark :where(
    .default-placement-drive-date,
    .dss-company,
    .dtr-info-bar
),
.default-home-section-shell .home-section-bg-dark :where(
    .default-placement-drive-date,
    .dss-company,
    .dtr-info-bar
) {
    background: color-mix(in srgb, var(--secondary-color) 24%, transparent) !important;
    border-color: color-mix(in srgb, var(--secondary-color) 42%, transparent) !important;
    color: color-mix(in srgb, var(--secondary-color) 35%, var(--bg-color)) !important;
}

/* Batch 3: detail page color roles. CTA/register/apply/submit buttons intentionally excluded. */
:where(
    .facd-page,
    .event-page,
    .pd-detail-section,
    .car-page,
    .bld-page,
    .nwd-page,
    .lab-detail,
    .ast-page
) {
    --detail-accent-soft: color-mix(in srgb, var(--accent-color) 12%, var(--surface-color, var(--bg-color)));
    --detail-accent-softer: color-mix(in srgb, var(--accent-color) 7%, var(--surface-color, var(--bg-color)));
    --detail-accent-border: color-mix(in srgb, var(--accent-color) 30%, var(--border-color));
    --detail-secondary-soft: color-mix(in srgb, var(--secondary-color) 10%, var(--surface-color, var(--bg-color)));
    --detail-secondary-softer: color-mix(in srgb, var(--secondary-color) 6%, var(--surface-color, var(--bg-color)));
    --detail-secondary-border: color-mix(in srgb, var(--secondary-color) 26%, var(--border-color));
}

:where(
    .facd-hero-name,
    .event-hero-copy h2,
    .pd-detail-title,
    .crd-hero-title,
    .bld-hero-copy h2,
    .nwd-title,
    .lab-hero__content h2,
    .astd-title
) {
    color: var(--primary-color) !important;
}

:where(
    .facd-hero-desig,
    .event-section-heading span,
    .event-tag,
    .pd-detail-badges .pd-badge,
    .crd-hero-chip,
    .bld-section-heading span,
    .bld-cat-pill,
    .bld-tag,
    .lab-hero__eyebrow,
    .lab-related__body span,
    .astd-featured-tag,
    .astd-hero-achievement
) {
    color: var(--accent-color) !important;
}

:where(
    .facd-aside-title,
    .event-tag,
    .pd-detail-badges .pd-badge,
    .crd-hero-chip,
    .bld-cat-pill,
    .bld-tag,
    .lab-hero__eyebrow,
    .lab-equipment__badge,
    .astd-featured-tag
) {
    background: var(--detail-accent-soft) !important;
    border-color: var(--detail-accent-border) !important;
}

:where(
    .facd-info-icon,
    .event-meta-item i,
    .event-snapshot li i,
    .event-seats-row i,
    .pd-detail-stat i,
    .pd-detail-instructions h3 i,
    .pd-sidebar-row > i,
    .crd-hero-chip i,
    .crd-detail-icon,
    .bld-meta-item i,
    .bld-snapshot li i,
    .bld-tags-label i,
    .nwd-meta-item i,
    .nwd-more-card-date i,
    .lab-equipment__head i,
    .astd-hero-meta-item i,
    .astd-aside-panel h4 i
) {
    color: var(--accent-color) !important;
}

:where(
    .event-snapshot,
    .pd-detail-hero,
    .pd-sidebar-title,
    .crd-aside-header,
    .bld-snapshot,
    .lab-hero__profile
) {
    background: var(--detail-secondary-softer) !important;
    border-color: var(--detail-secondary-border) !important;
}

:where(
    .facd-info-label,
    .event-meta-item,
    .event-reg-meta,
    .event-reg-fee-label,
    .event-snapshot li span,
    .pd-detail-stat,
    .pd-sidebar-row dt,
    .crd-hero-dept,
    .crd-detail-label,
    .bld-meta-item,
    .bld-snapshot li span,
    .bld-related-body small,
    .nwd-meta-item,
    .nwd-more-card-date,
    .lab-hero__profile-item > span,
    .astd-hero-meta-item,
    .astd-related-body span
) {
    color: var(--text-muted-color) !important;
}

:where(
    .facd-hero,
    .facd-section,
    .facd-aside-card,
    .event-hero,
    .event-section,
    .event-aside-panel,
    .pd-sidebar-card,
    .crd-hero,
    .crd-section,
    .crd-aside-card,
    .bld-hero,
    .bld-section,
    .bld-aside-panel,
    .nwd-article,
    .nwd-more-card,
    .lab-hero,
    .lab-equipment,
    .lab-related__card,
    .astd-article,
    .astd-aside-panel
) {
    border-color: var(--border-color) !important;
}

:where(
    .event-aside-panel:hover,
    .pd-sidebar-card:hover,
    .crd-section:hover,
    .bld-aside-panel:hover,
    .nwd-more-card:hover,
    .lab-related__card:hover,
    .astd-related-item:hover
) {
    border-color: color-mix(in srgb, var(--primary-color) 42%, var(--border-color)) !important;
}

:where(
    .facd-info-link,
    .event-inline-link,
    .event-snapshot li strong a,
    .crd-back a,
    .bld-related-item,
    .nwd-more-card,
    .lab-related__link,
    .astd-back a,
    .astd-back-link,
    .astd-related-item
):hover {
    color: var(--accent-color) !important;
}

.nwd-page {
    --bld-accent: var(--accent-color, var(--primary-color));
}

.lab-equipment__head,
.pd-detail-instructions,
.astd-summary {
    background: var(--detail-secondary-soft) !important;
    border-color: var(--detail-secondary-border) !important;
}

.lab-equipment__badge {
    color: var(--accent-color) !important;
}

.lab-hero__eyebrow {
    border: 1px solid var(--detail-accent-border) !important;
    border-radius: 999px;
    display: inline-flex !important;
    padding: 4px 12px;
    width: fit-content;
}

.bld-cat-pill:hover,
.bld-cat-pill:focus {
    background: var(--accent-color) !important;
    color: var(--accent-contrast-color, var(--primary-contrast-color, #fff)) !important;
}

.astd-featured-tag {
    background: var(--accent-color) !important;
    color: var(--accent-contrast-color, var(--primary-contrast-color, #fff)) !important;
}

/* Batch 4: listing page color roles. CTA/filter-submit buttons intentionally excluded. */
:where(
    .courses-page,
    .facilities-catalog,
    .labs-catalog,
    .evl-page,
    .pd-page-section,
    .blp-page,
    .nws-page,
    .ast-page,
    .car-page,
    .default-document-center,
    .committee-page,
    .fac-page
) {
    --listing-accent-soft: color-mix(in srgb, var(--accent-color) 12%, var(--surface-color, var(--bg-color)));
    --listing-accent-softer: color-mix(in srgb, var(--accent-color) 7%, var(--surface-color, var(--bg-color)));
    --listing-accent-border: color-mix(in srgb, var(--accent-color) 30%, var(--border-color));
    --listing-secondary-soft: color-mix(in srgb, var(--secondary-color) 10%, var(--surface-color, var(--bg-color)));
    --listing-secondary-softer: color-mix(in srgb, var(--secondary-color) 6%, var(--surface-color, var(--bg-color)));
    --listing-secondary-border: color-mix(in srgb, var(--secondary-color) 26%, var(--border-color));
}

:where(
    .course-program-card,
    .facility-card,
    .lab-card,
    .evl-page .default-event-card,
    .pd-card,
    .blp-page .dhb-card,
    .nws-feed,
    .ast-card,
    .car-card,
    .document-card,
    .committee-member-card,
    .fac-card
) {
    border-color: var(--border-color) !important;
}

:where(
    .course-program-card:hover,
    .facility-card:hover,
    .lab-card:hover,
    .evl-page .default-event-card:hover,
    .pd-card:hover,
    .blp-page .dhb-card:hover,
    .nws-item:hover,
    .ast-card:hover,
    .car-card:hover,
    .document-card:hover,
    .committee-member-card:hover,
    .fac-card:hover
) {
    border-color: color-mix(in srgb, var(--primary-color) 46%, var(--border-color)) !important;
    box-shadow: 0 14px 34px color-mix(in srgb, var(--primary-color) 14%, transparent) !important;
}

:where(
    .course-program-card h4 a,
    .facility-card__body h4,
    .lab-card__body h4,
    .evl-page .default-event-title a,
    .pd-card-title a,
    .blp-page .dhb-card-title a,
    .nws-title a,
    .ast-card-title,
    .car-card-title a,
    .document-card h3,
    .committee-member-content h4,
    .fac-identity-name
) {
    color: var(--heading-color, var(--text-color)) !important;
}

:where(
    .course-program-card h4 a:hover,
    .evl-page .default-event-title a:hover,
    .pd-card-title a:hover,
    .blp-page .dhb-card-title a:hover,
    .nws-title a:hover,
    .ast-card-link:hover,
    .car-card-title a:hover,
    .document-card-extra dd a:hover,
    .committee-member-card:hover h4,
    .fac-tbl-link:hover
) {
    color: var(--primary-color) !important;
}

:where(
    .courses-discovery-copy span,
    .courses-group-header span,
    .course-program-topline span,
    .facility-card__type,
    .lab-card__type,
    .pd-badge-mode,
    .blp-page .dhb-type-badge,
    .nws-cats .dhb-cat-badge,
    .ast-card-badge,
    .ast-card-achievement,
    .car-badge--open,
    .document-center-kicker,
    .document-card-type,
    .committee-kicker,
    .fac-group-badge,
    .fac-identity-role
) {
    color: var(--accent-color) !important;
}

:where(
    .course-program-topline span,
    .facility-card__type,
    .lab-card__type,
    .pd-badge-mode,
    .blp-page .dhb-type-badge,
    .nws-cats .dhb-cat-badge,
    .ast-card-badge,
    .car-badge--open,
    .document-card-type,
    .fac-group-badge
) {
    background: var(--listing-accent-soft) !important;
    border-color: var(--listing-accent-border) !important;
}


:where(
    .course-program-meta span,
    .course-program-title,
    .facility-card__body p,
    .facility-card__badge,
    .facilities-results__head span,
    .lab-card__body p,
    .lab-card__badge,
    .labs-results__head span,
    .default-event-meta-item,
    .pd-card-meta,
    .pd-capacity-label,
    .blp-page .dhb-card-date,
    .blp-page .dhb-card-read-time,
    .blp-page .dhb-card-excerpt,
    .nws-excerpt,
    .nws-meta-item,
    .nws-date-yr,
    .ast-chip,
    .ast-card-summary,
    .car-card-meta,
    .car-card-excerpt,
    .car-chip,
    .document-card-description,
    .document-card-meta span,
    .document-card-extra dt,
    .committee-member-contact,
    .committee-meta-item span,
    .fac-stat-label,
    .fac-tbl-no,
    .fac-tbl-val
) {
    color: var(--text-muted-color) !important;
}

:where(
    .course-program-meta i,
    .facilities-results__head h3,
    .labs-results__head h3,
    .pd-card-meta i,
    .blp-page .dhb-card-meta i,
    .nws-meta-item i,
    .ast-chip i,
    .car-chip i,
    .document-card-meta span i,
    .committee-member-contact i,
    .fac-tbl-link i
) {
    color: var(--accent-color) !important;
}

:where(
    .facility-card__link,
    .lab-card__link,
    .pd-card-cta,
    .blp-page .dhb-card-link,
    .nws-link,
    .ast-card-link,
    .document-download-link,
    .document-description-toggle,
    .mou-doc-link
) {
    color: var(--primary-color) !important;
}

:where(
    .facility-card__link:hover,
    .facility-card__link:focus,
    .lab-card__link:hover,
    .lab-card__link:focus,
    .pd-card-cta:hover,
    .pd-card-cta:focus,
    .blp-page .dhb-card-link:hover,
    .nws-link:hover,
    .ast-card-link:hover,
    .document-download-link:hover,
    .document-download-link:focus,
    .document-description-toggle:hover,
    .document-description-toggle:focus,
    .mou-doc-link:hover
) {
    color: var(--accent-color) !important;
}

:where(
    .courses-type-nav button.active,
    .courses-type-nav button:hover,
    .facilities-tabs__item--active,
    .labs-tabs__item--active,
    .evl-pill--active
) {
    background: var(--primary-color) !important;
    border-color: var(--primary-color) !important;
    color: var(--primary-contrast-color, #fff) !important;
}

:where(
    .facilities-tabs__item:not(.facilities-tabs__item--active):hover,
    .facilities-tabs__item:not(.facilities-tabs__item--active):focus,
    .labs-tabs__item:not(.labs-tabs__item--active):hover,
    .labs-tabs__item:not(.labs-tabs__item--active):focus
) {
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
}

/* Batch 5: forms and tables. Submit/action/CTA button colors intentionally excluded. */
body,
:where(
    .default-contact-page,
    .car-page,
    .pd-form-section,
    .pd-stats-section,
    .default-document-center,
    .bld-page,
    .nwd-page
) {
    --form-accent-soft: color-mix(in srgb, var(--accent-color) 11%, var(--surface-color, var(--bg-color)));
    --form-accent-ring: color-mix(in srgb, var(--accent-color) 24%, transparent);
    --form-accent-border: color-mix(in srgb, var(--accent-color) 34%, var(--border-color));
    --form-secondary-soft: color-mix(in srgb, var(--secondary-color) 9%, var(--surface-color, var(--bg-color)));
    --form-secondary-border: color-mix(in srgb, var(--secondary-color) 24%, var(--border-color));
}

:where(
    .contact-form-card,
    .contact-address-card,
    .cra-info-card,
    .alr-info-panel,
    .pd-form-card,
    .pd-stats-table-wrap,
    .document-preview-dialog,
    .document-image-dialog,
    .bld-comment-form-wrap
) {
    border-color: var(--border-color) !important;
}

:where(
    .contact-form-card-header,
    .contact-address-card-header,
    .cra-info-card,
    .alr-info-panel,
    .pd-form-card-header,
    .document-preview-header,
    .pd-stats-table thead th,
    .table-themed thead,
    .bld-comment-form-wrap
) {
    background: var(--form-secondary-soft) !important;
    border-color: var(--form-secondary-border) !important;
}

:where(
    .contact-form-icon-wrap,
    .contact-address-icon-wrap,
    .cra-info-icon,
    .alr-info-icon,
    .alr-step-num,
    .pd-form-card-icon,
    .pd-form-upload-icon,
    .pd-stats-summary-icon,
    .document-card-icon,
    .document-preview-close
) {
    background: var(--form-accent-soft) !important;
    border-color: var(--form-accent-border) !important;
    color: var(--accent-color) !important;
}

:where(
    .contact-form label .required,
    .pd-form-required,
    .bld-comment-form-group label span,
    .contact-eyebrow,
    .document-center-kicker,
    .pd-edu-row-index,
    .pd-stats-year
) {
    color: var(--accent-color) !important;
}

:where(
    .contact-form .form-control,
    .pd-form-input,
    .pd-form-select,
    .pd-form-textarea,
    .pd-filter-input,
    .pd-filter-select,
    .car-filter-input,
    .bld-comment-form-group input,
    .bld-comment-form-group textarea
) {
    background: var(--surface-color, var(--bg-color)) !important;
    border-color: var(--border-color) !important;
    color: var(--text-color) !important;
}

:where(
    .contact-form .form-control:focus,
    .pd-form-input:focus,
    .pd-form-select:focus,
    .pd-form-textarea:focus,
    .pd-filter-input:focus,
    .pd-filter-select:focus,
    .car-filter-input:focus,
    .bld-comment-form-group input:focus,
    .bld-comment-form-group textarea:focus
) {
    border-color: var(--accent-color) !important;
    box-shadow: 0 0 0 3px var(--form-accent-ring) !important;
    outline: none !important;
}

:where(
    .contact-form .form-control::placeholder,
    .pd-form-input::placeholder,
    .pd-form-textarea::placeholder,
    .pd-filter-input::placeholder,
    .car-filter-input::placeholder,
    .bld-comment-form-group input::placeholder,
    .bld-comment-form-group textarea::placeholder
) {
    color: var(--text-muted-color) !important;
}

:where(
    .pd-form-upload,
    .pd-edu-row,
    .pd-stats-summary-card,
    .document-card-meta span,
    .document-card-extra,
    .bld-comment-replies
) {
    background: var(--form-secondary-soft) !important;
    border-color: var(--form-secondary-border) !important;
}

:where(
    .pd-form-upload:hover,
    .pd-add-edu-btn:hover,
    .document-preview-close:hover,
    .document-preview-close:focus
) {
    border-color: var(--accent-color) !important;
    color: var(--accent-color) !important;
}

:where(
    .pd-stats-table thead th,
    .table-themed thead th,
    .table-themed thead td,
    .admission-fee-table th
) {
    color: var(--heading-color, var(--text-color)) !important;
}

:where(
    .pd-stats-table tbody tr:hover,
    .table-themed tbody tr:hover,
    .admission-fee-table tbody tr:hover
) {
    background: color-mix(in srgb, var(--accent-color) 5%, var(--surface-color, var(--bg-color))) !important;
}

:where(
    .fee-total-row,
    .admission-fee-table tr.is-total td
) {
    background: var(--form-secondary-soft) !important;
    color: var(--heading-color, var(--text-color)) !important;
}

:where(
    .pd-form-label,
    .contact-form label,
    .bld-comment-form-group label,
    .document-card-extra dt,
    .pd-stats-summary-label
) {
    color: var(--text-muted-color) !important;
}

:where(
    .pd-form-back-link,
    .pd-form-cancel,
    .cra-back-link,
    .document-empty-reset,
    .bld-back-btn
):hover {
    color: var(--accent-color) !important;
}

/* Final layout enforcement for homepage key highlights. */
.default-home-section-shell[data-home-section="key_highlights"] {
    clear: both;
    display: block;
    float: none;
    width: 100%;
}

.default-home-section-shell[data-home-section="key_highlights"] > #mu-key-highlights.default-highlights-section,
#mu-key-highlights.body-sub-section.default-highlights-section {
    background: var(--home-section-bg, var(--bg-color)) !important;
    clear: both;
    color: var(--home-section-text, var(--text-color));
    display: block;
    float: none;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 80px !important;
    padding-bottom: 80px !important;
    position: relative;
    width: 100%;
}

@media (max-width: 575px) {
    .default-home-section-shell[data-home-section="key_highlights"] > #mu-key-highlights.default-highlights-section,
    #mu-key-highlights.body-sub-section.default-highlights-section {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }
}

/* Final layout enforcement for homepage facts & figures. */
.default-home-section-shell[data-home-section="facts_figures"] {
    clear: both;
    display: block;
    float: none;
    width: 100%;
}

.default-home-section-shell[data-home-section="facts_figures"] > #mu-facts-figures.default-facts-section,
#mu-facts-figures.body-sub-section.default-facts-section {
    background: var(--home-section-bg, var(--bg-color)) !important;
    clear: both;
    color: var(--home-section-text, var(--text-color));
    display: block;
    float: none;
    margin-top: 0;
    margin-bottom: 0;
    padding-top: 70px !important;
    padding-bottom: 80px !important;
    position: relative;
    width: 100%;
}

@media (max-width: 575px) {
    .default-home-section-shell[data-home-section="facts_figures"] > #mu-facts-figures.default-facts-section,
    #mu-facts-figures.body-sub-section.default-facts-section {
        padding-top: 56px !important;
        padding-bottom: 56px !important;
    }
}

/* ============================================================
   PRINT STYLESHEET
   ============================================================ */
/* ── C-05: Touch targets — minimum 44×44px on mobile ── */
@media (max-width: 767px) {
    .fps-tab,
    .dco-tab,
    .dhb-tab {
        min-height: 44px;
    }
    .default-gallery-filter-btn {
        min-height: 44px;
    }
}

@media print {
    /* ---- Reset & base ---- */
    *,
    *::before,
    *::after {
        background: transparent !important;
        box-shadow: none !important;
        text-shadow: none !important;
        color: #000 !important;
    }

    body {
        font-size: 12pt;
        line-height: 1.5;
        margin: 0;
        padding: 0;
    }

    /* ---- Hide chrome ---- */
    header,
    nav,
    .mu-navbar,
    .mu-header,
    .mu-skip-link,
    .scrollToTop,
    .mu-splash-screen,
    .mu-notice-ticker,
    footer,
    .mu-footer,
    .pd-filter-bar,
    .pd-sidebar-action,
    .partner-directory-pagination,
    .mu-blog-pagination,
    .mu-courses-pagination,
    .mu-events-pagination,
    .theme-pagination,
    [class*="-pagination"],
    .mu-empty-state,
    .mu-read-more-btn,
    .mu-read-more-link,
    a[href^="#"].btn,
    button,
    form,
    .alert,
    script,
    iframe,
    video,
    audio {
        display: none !important;
    }

    /* ---- Links ---- */
    a[href]::after {
        content: " (" attr(href) ")";
        font-size: 10pt;
        color: #555 !important;
    }

    /* Suppress for internal anchors and nav links */
    a[href^="#"]::after,
    a[href^="javascript:"]::after {
        content: "";
    }

    /* ---- Images ---- */
    img {
        max-width: 100% !important;
        page-break-inside: avoid;
    }

    /* ---- Page breaks ---- */
    h1, h2, h3, h4, h5, h6 {
        page-break-after: avoid;
    }

    p, blockquote {
        orphans: 3;
        widows: 3;
    }

    .mu-course-detail,
    .facd-detail-section,
    .pd-detail-section,
    .mu-event-detail,
    .mu-post-detail,
    .astd-detail-section {
        page-break-inside: avoid;
    }

    /* ---- Layout ---- */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* ---- Inner banner ---- */
    .mu-inner-page-banner {
        padding: 16pt 0;
    }

    .mu-inner-page-banner-title {
        font-size: 20pt;
    }

    /* ---- Course details ---- */
    .mu-course-detail-layout,
    .pd-detail-layout {
        display: block !important;
    }

    .mu-course-sidebar,
    .pd-detail-sidebar {
        display: none !important;
    }
}



/* ── Dark Mode (prefers-color-scheme: dark) ────────────── */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;
        --bg-color: #0f172a;
        --card-bg: #1e293b;
        --text-color: #e2e8f0;
        --text-muted: #94a3b8;
        --heading-color: #f1f5f9;
        --border-color: rgba(255, 255, 255, 0.10);
        --muted-color: #94a3b8;
        --input-bg: #1e293b;
        --fac-heading: #f1f5f9;
        --fac-muted: #94a3b8;
        --partner-muted-bg: #1e293b;
        --partner-border: rgba(255, 255, 255, 0.10);
    }
    body { background: var(--bg-color); color: var(--text-color); }
    .navbar-default { background: #111827; border-color: #1f2937; }
    #mu-menu .navbar-default .navbar-nav > li > a,
    #mu-menu .navbar-brand span { color: #e2e8f0 !important; }
    #mu-footer { background: #111827 !important; }
    .theme-rich-text img { filter: brightness(0.9); }
}
/* ── RTL Support ──────────────────────────────────────── */
[dir="rtl"] { direction: rtl; }
[dir="rtl"] .mu-header-top-left { float: right; }
[dir="rtl"] .mu-header-top-right { float: left; }
[dir="rtl"] #mu-menu .navbar-nav { float: left; }
[dir="rtl"] #mu-menu .navbar-right { float: left !important; }
[dir="rtl"] #mu-menu .navbar-brand { float: right; }
[dir="rtl"] .dropdown-menu { left: auto; right: 0; text-align: right; }
[dir="rtl"] .mu-mega-menu { left: auto; right: 0; }
[dir="rtl"] .fac-tbl-no { text-align: right; }
[dir="rtl"] .bld-hero { flex-direction: row-reverse; }
[dir="rtl"] .bld-layout { flex-direction: row-reverse; }
[dir="rtl"] .facd-layout { flex-direction: row-reverse; }
[dir="rtl"] .lsd-card { flex-direction: row-reverse; }