/* ==========================================================================
   Modern Theme — Silas International School
   Bootstrap 5.3 + Custom Design System
   ========================================================================== */

/* ---------- CSS Custom Properties ---------- */
:root {
    --si-primary: #450920;
    --si-primary-light: #7a1038;
    --si-primary-dark: #1a0209;
    --si-accent: #f59e0b;
    --si-accent-hover: #d97706;
    --si-success: #10b981;
    --si-light: #f8fafc;
    --si-dark: #190406;
    --si-gray-100: #f1f5f9;
    --si-gray-200: #e2e8f0; 
    --si-gray-300: #cbd5e1;
    --si-gray-500: #64748b;
    --si-gray-700: #334155;
    --si-gray-900: #0f172a;
    --si-body-font: 'Poppins', sans-serif;
    --si-heading-font: 'Montserrat', sans-serif;
    --si-title-font: 'Montserrat', sans-serif;
    --si-radius: 1rem;
    --si-radius-sm: 0.5rem;
    --si-radius-lg: 1.5rem;
    --si-shadow-sm: 0 1px 3px rgba(0,0,0,.08);
    --si-shadow: 0 4px 24px rgba(0,0,0,.08);
    --si-shadow-lg: 0 12px 48px rgba(0,0,0,.12);
    --si-transition: all .3s cubic-bezier(.4,0,.2,1);
}

/* ---------- Base ---------- */
html {
    scroll-behavior: smooth;
    overflow-x: hidden;
}

body {
    font-family: var(--si-body-font);
    font-size: 14px;
    line-height: 1.85;
    color: var(--si-gray-700);
    background: #fff;
    -webkit-font-smoothing: antialiased;
    display: flex;
    flex-direction: column;
    min-height: 100vh;
}

main {
    flex: 1 0 auto;
}

h1, h2, h3, h4, h5, h6 {
    font-family: var(--si-heading-font);
    color: var(--si-dark);
    font-weight: 700;
    line-height: 1.3;
}

a {
    color: var(--si-primary);
    text-decoration: none;
    transition: var(--si-transition);
}

a:hover {
    color: var(--si-accent);
}

img {
    max-width: 100%;
    height: auto;
}

::selection {
    background: var(--si-accent);
    color: #fff;
}

/* ---------- Top Bar ---------- */
.si-topbar {
    background: var(--si-primary-dark);
    color: rgba(255,255,255,.8);
    font-size: .85rem;
    padding: .5rem 0;
    border-bottom: 3px solid var(--si-accent);
}

.si-topbar a {
    color: rgba(255,255,255,.8);
    transition: var(--si-transition);
}

.si-topbar a:hover {
    color: var(--si-accent);
}

.si-topbar .bi {
    font-size: .9rem;
}

.si-topbar-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    color: #fff;
    margin-left: .35rem;
    font-size: .85rem;
    transition: var(--si-transition);
}

.si-topbar-social a:hover {
    background: var(--si-accent);
    transform: translateY(-2px);
}

/* ---------- Navbar ---------- */
.si-navbar {
    background: #fff;
    box-shadow: var(--si-shadow-sm);
    padding: .5rem 0;
    transition: box-shadow .3s ease, padding .3s ease;
    z-index: 1050;
}

.si-navbar.scrolled {
    box-shadow: var(--si-shadow);
    padding: .25rem 0;
}

.si-navbar .navbar-brand img {
    height: 60px;
    transition: height .3s ease;
}

.si-navbar.scrolled .navbar-brand img {
    height: 48px;
}

.si-navbar .nav-link {
    font-family: var(--si-body-font);
    font-weight: 600;
    font-size: .9rem;
    color: var(--si-dark);
    padding: .6rem 1rem !important;
    letter-spacing: .02em;
    position: relative;
    transition: color .3s ease;
}

/* Underline accent — only on non-dropdown links */
.si-navbar .nav-item:not(.dropdown) > .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 1rem;
    right: 1rem;
    height: 2px;
    background: var(--si-accent);
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .3s ease;
}

.si-navbar .nav-item:not(.dropdown) > .nav-link:hover::after,
.si-navbar .nav-item:not(.dropdown) > .nav-link.active::after {
    transform: scaleX(1);
}

.si-navbar .nav-link:hover,
.si-navbar .nav-link.active {
    color: var(--si-primary);
}

/* Dropdown caret colour */
.si-navbar .dropdown-toggle::after {
    color: var(--si-gray-500);
    transition: transform .3s ease;
}

.si-navbar .dropdown-toggle[aria-expanded="true"]::after {
    transform: rotate(180deg);
}

.si-navbar .dropdown-menu {
    border: none;
    box-shadow: var(--si-shadow-lg);
    border-radius: var(--si-radius-sm);
    padding: .5rem 0;
    min-width: 220px;
    margin-top: .25rem;
    animation: fadeDown .25s ease forwards;
}

@keyframes fadeDown {
    from { opacity: 0; transform: translateY(-8px); }
    to   { opacity: 1; transform: translateY(0); }
}

.si-navbar .dropdown-item {
    font-size: .88rem;
    font-weight: 500;
    padding: .55rem 1.25rem;
    color: var(--si-gray-700);
    transition: background .2s ease, padding-left .2s ease, color .2s ease;
}

.si-navbar .dropdown-item:hover,
.si-navbar .dropdown-item:focus {
    background: var(--si-gray-100);
    color: var(--si-primary);
    padding-left: 1.5rem;
}

/* Mobile collapsed nav */
.si-navbar .navbar-collapse {
    padding: 1rem 0 .5rem;
}

@media (min-width: 992px) {
    .si-navbar .navbar-collapse {
        padding: 0;
    }
}

.si-navbar .navbar-toggler-icon {
    width: 1.25em;
    height: 1.25em;
}

/* ---------- Hero Carousel ---------- */
.si-hero {
    position: relative;
    overflow: hidden;
}

.si-hero .carousel-inner,
.si-hero .carousel-item {
    height: 85vh;
    min-height: 500px;
    max-height: 850px;
}

.si-hero .carousel-item {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-color: var(--si-primary-dark, #1a0209);
    display: flex !important;
    align-items: center;
}

.si-hero .carousel-item::before {
    content: none;
}

.si-hero-content {
    position: relative;
    z-index: 2;
    max-width: 680px;
    padding: 2rem 0;
}

.si-hero-content h1 {
    font-size: clamp(2.2rem, 5vw, 3.8rem);
    color: #fff;
    font-weight: 800;
    margin-bottom: 1.25rem;
    text-shadow: 0 2px 16px rgba(0,0,0,.2);
}

.si-hero-content p {
    font-size: 1.05rem;
    color: rgba(255,255,255,.9);
    line-height: 1.8;
    margin-bottom: 2rem;
    max-width: 560px;
}

/* Indicators */
.si-hero .carousel-indicators {
    margin-bottom: 1.5rem;
    gap: .4rem;
}

.si-hero .carousel-indicators [data-bs-target] {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.7);
    background: transparent;
    opacity: .7;
    margin: 0;
    transition: background .3s ease, border-color .3s ease, transform .3s ease;
}

.si-hero .carousel-indicators .active {
    background: var(--si-accent);
    border-color: var(--si-accent);
    opacity: 1;
    transform: scale(1.25);
}

/* Controls — fixed centering, override Bootstrap defaults */
.si-hero .carousel-control-prev,
.si-hero .carousel-control-next {
    position: absolute;
    top: 50%;
    bottom: auto;
    width: 52px;
    height: 52px;
    margin-top: -26px;
    background: rgba(255,255,255,.15);
    backdrop-filter: blur(6px);
    -webkit-backdrop-filter: blur(6px);
    border-radius: 50%;
    border: 1px solid rgba(255,255,255,.2);
    opacity: 0;
    transition: opacity .3s ease, background .3s ease;
    z-index: 5;
}

.si-hero:hover .carousel-control-prev,
.si-hero:hover .carousel-control-next {
    opacity: 1;
}

.si-hero .carousel-control-prev { left: 1.5rem; }
.si-hero .carousel-control-next { right: 1.5rem; }

.si-hero .carousel-control-prev:hover,
.si-hero .carousel-control-next:hover {
    background: var(--si-accent);
    border-color: var(--si-accent);
}

.si-hero .carousel-control-prev-icon,
.si-hero .carousel-control-next-icon {
    width: 1rem;
    height: 1rem;
}

/* ---------- Buttons ---------- */
.btn-si-primary {
    background: var(--si-primary);
    color: #fff;
    border: none;
    padding: .75rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .02em;
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
    box-shadow: 0 4px 16px rgba(69,9,32,.25);
}

.btn-si-primary:hover,
.btn-si-primary:focus {
    background: var(--si-primary-light);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(69,9,32,.35);
}

.btn-si-accent {
    background: var(--si-accent);
    color: #fff;
    border: none;
    padding: .75rem 2rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: .95rem;
    letter-spacing: .02em;
    transition: background .3s ease, transform .3s ease, box-shadow .3s ease;
    box-shadow: 0 4px 16px rgba(245,158,11,.25);
}

.btn-si-accent:hover,
.btn-si-accent:focus {
    background: var(--si-accent-hover);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(245,158,11,.35);
}

.btn-si-outline {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.6);
    padding: .7rem 1.8rem;
    border-radius: 50px;
    font-weight: 600;
    font-size: .95rem;
    transition: background .3s ease, color .3s ease, border-color .3s ease;
}

.btn-si-outline:hover,
.btn-si-outline:focus {
    background: #fff;
    color: var(--si-primary);
    border-color: #fff;
}

/* ---------- Section Titles ---------- */
.si-section-title {
    text-align: center;
    margin-bottom: 3.5rem;
}

.si-section-title .si-badge {
    display: inline-block;
    background: rgba(69,9,32,.08);
    color: var(--si-primary);
    font-size: .8rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .35rem 1rem;
    border-radius: 50px;
    margin-bottom: .75rem;
}

.si-section-title h2 {
    font-family: var(--si-title-font);
    font-size: clamp(1.75rem, 3vw, 2.5rem);
    margin-bottom: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.si-section-title p {
    max-width: 600px;
    margin: 0 auto;
    color: var(--si-gray-500);
    font-size: 1.05rem;
}

.si-team .si-section-title p {
    white-space: nowrap;
    max-width: 100%;
}

.si-section-title .si-divider {
    width: 60px;
    height: 4px;
    background: var(--si-accent);
    border-radius: 2px;
    margin: 1rem auto 0;
}

/* ---------- About Section ---------- */
.si-about {
    padding: 6rem 0;
    background: #fff;
}

.si-about-img-wrapper {
    position: relative;
    border-radius: var(--si-radius-lg);
    overflow: hidden;
    box-shadow: var(--si-shadow-lg);
}

.si-about-img-wrapper::before {
    content: '';
    position: absolute;
    top: -20px;
    left: -20px;
    width: 100px;
    height: 100px;
    background: var(--si-accent);
    border-radius: 50%;
    opacity: .15;
    z-index: 0;
    pointer-events: none;
}

.si-about-img-wrapper .ratio {
    border-radius: var(--si-radius-lg);
    overflow: hidden;
}

.si-about-img-wrapper iframe {
    border: 0;
    border-radius: var(--si-radius-lg);
}

.si-about-img-wrapper img {
    width: 100%;
    border-radius: var(--si-radius-lg);
    display: block;
}

.si-about-badge {
    display: inline-block;
    background: rgba(69,9,32,.08);
    color: var(--si-primary);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .4rem 1.1rem;
    border-radius: 50px;
    margin-bottom: .75rem;
}

.si-about-text h2 {
    font-family: var(--si-title-font);
    font-size: clamp(1.6rem, 3vw, 2.2rem);
    font-weight: 700;
    margin-bottom: 1.25rem;
}

.si-about-text .highlight {
    color: var(--si-accent);
}

.si-about-text p {
    text-align: justify;
    color: var(--si-gray-500);
    margin-bottom: 1.75rem;
    line-height: 1.85;
}

/* ---------- Admin / Team Cards ---------- */
.si-team {
    padding: 6rem 0;
    background: var(--si-gray-100);
}

.si-team-card {
    background: #fff;
    border-radius: var(--si-radius);
    overflow: hidden;
    box-shadow: var(--si-shadow);
    transition: var(--si-transition);
    height: 100%;
}

.si-team-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--si-shadow-lg);
}

.si-team-card-img {
    position: relative;
    overflow: hidden;
    height: 280px;
}

.si-team-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.si-team-card:hover .si-team-card-img img {
    transform: scale(1.05);
}

.si-team-card-img .si-team-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26,3,11,.8) 0%, transparent 60%);
    display: flex;
    align-items: flex-end;
    padding: 1.5rem;
    opacity: 0;
    transition: var(--si-transition);
}

.si-team-card:hover .si-team-overlay {
    opacity: 1;
}

.si-team-overlay-content h5 {
    color: #fff;
    font-family: var(--si-body-font);
    font-size: 1rem;
    margin: 0;
}

.si-team-card-body {
    padding: 1.5rem;
}

.si-team-card-body .si-role {
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--si-accent);
    margin-bottom: .5rem;
}

.si-team-card-body h4 {
    font-family: var(--si-body-font);
    font-size: 1.1rem;
    font-weight: 700;
    margin-bottom: .5rem;
}

.si-team-card-body h4 a {
    color: var(--si-dark);
}

.si-team-card-body h4 a:hover {
    color: var(--si-primary);
}

.si-team-card-body p {
    font-size: .92rem;
    color: var(--si-gray-500);
    margin-bottom: 1rem;
    line-height: 1.7;
}

.si-team-card-body .btn-si-link {
    font-size: .88rem;
    font-weight: 600;
    color: var(--si-primary);
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    transition: var(--si-transition);
}

.si-team-card-body .btn-si-link:hover {
    color: var(--si-accent);
    gap: .65rem;
}

/* ---------- Admission CTA ---------- */
.si-admission {
    padding: 6rem 0;
    background: #fff;
}

.si-admission-banner {
    border-radius: var(--si-radius-lg);
    overflow: hidden;
    position: relative;
    box-shadow: var(--si-shadow-lg);
    height: 100%;
    min-height: 300px;
}

.si-admission-banner img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.si-admission-info {
    background: linear-gradient(135deg, var(--si-primary) 0%, var(--si-primary-dark) 100%);
    border-radius: var(--si-radius-lg);
    padding: 3rem 2.5rem;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
    height: 100%;
}

.si-admission-info h3 {
    color: #fff;
    font-size: 1.75rem;
    margin-bottom: 1rem;
}

.si-admission-info p {
    color: rgba(255,255,255,.85);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: 1.75rem;
}

.si-admission-info .si-phone {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    font-size: 1.15rem;
    font-weight: 700;
    color: var(--si-accent);
    margin-bottom: 1.5rem;
}

/* ---------- Popup / Modal ---------- */
.si-popup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.6);
    backdrop-filter: blur(4px);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: var(--si-transition);
}

.si-popup-overlay.active {
    opacity: 1;
    visibility: visible;
}

.si-popup {
    background: #fff;
    border-radius: var(--si-radius-lg);
    max-width: 520px;
    width: 90%;
    padding: 2rem;
    position: relative;
    box-shadow: var(--si-shadow-lg);
    transform: scale(.9);
    transition: transform .3s ease;
}

.si-popup-overlay.active .si-popup {
    transform: scale(1);
}

.si-popup-close {
    position: absolute;
    top: .75rem;
    right: .75rem;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: none;
    background: var(--si-gray-100);
    color: var(--si-gray-700);
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: var(--si-transition);
}

.si-popup-close:hover {
    background: var(--si-primary);
    color: #fff;
}

.si-popup img {
    border-radius: var(--si-radius);
    width: 100%;
}

/* ---------- Newsletter ---------- */
.si-newsletter {
    background: linear-gradient(135deg, var(--si-primary) 0%, var(--si-primary-dark) 100%);
    padding: 4rem 0;
    color: #fff;
}

.si-newsletter h3 {
    color: #fff;
    font-size: 1.75rem;
    margin-bottom: .5rem;
}

.si-newsletter p {
    color: rgba(255,255,255,.75);
    margin-bottom: 0;
}

.si-newsletter .input-group {
    max-width: 500px;
    width: 100%;
}

.si-newsletter .form-control {
    border-radius: 50px 0 0 50px !important;
    border: none;
    padding: .85rem 1.5rem;
    font-size: .95rem;
    height: auto;
}

.si-newsletter .form-control:focus {
    box-shadow: 0 0 0 3px rgba(245,158,11,.3);
}

.si-newsletter .input-group > .btn {
    border-radius: 0 50px 50px 0 !important;
    padding: .85rem 2rem;
    font-weight: 600;
    white-space: nowrap;
}

/* Custom newsletter form (replaces Bootstrap input-group for better mobile) */
.si-newsletter-form {
    width: 100%;
    max-width: 500px;
}

.si-newsletter-input-wrap {
    display: flex;
    align-items: stretch;
    width: 100%;
    border-radius: 50px;
    overflow: hidden;
    box-shadow: 0 4px 20px rgba(0,0,0,.15);
}

.si-newsletter-input-wrap .form-control {
    flex: 1 1 auto;
    min-width: 0;
    border: none;
    border-radius: 50px 0 0 50px !important;
    padding: .85rem 1.5rem;
    font-size: .9rem;
    height: auto;
    outline: none;
}

.si-newsletter-input-wrap .form-control:focus {
    box-shadow: none;
}

.si-newsletter-input-wrap .btn {
    flex-shrink: 0;
    border-radius: 0 50px 50px 0 !important;
    padding: .85rem 1.75rem;
    font-weight: 600;
    font-size: .9rem;
    white-space: nowrap;
    border: none;
}

/* ---------- Footer ---------- */
.si-footer {
    background: var(--si-dark);
    color: rgba(255,255,255,.7);
    padding: 5rem 0 0;
}

.si-footer h5 {
    color: #fff;
    font-family: var(--si-body-font);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    margin-bottom: 1.5rem;
    position: relative;
    padding-bottom: .75rem;
}

.si-footer h5::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 30px;
    height: 3px;
    background: var(--si-accent);
    border-radius: 2px;
}

.si-footer p {
    font-size: .92rem;
    line-height: 1.8;
}

.si-footer a {
    color: rgba(255,255,255,.7);
}

.si-footer a:hover {
    color: var(--si-accent);
}

.si-footer-logo {
    max-height: 56px;
    margin-bottom: 1.25rem;
}

.si-footer-social a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255,255,255,.08);
    color: #fff;
    margin-right: .5rem;
    font-size: 1rem;
    transition: var(--si-transition);
}

.si-footer-social a:hover {
    background: var(--si-accent);
    transform: translateY(-3px);
}

.si-footer-contact li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .85rem;
    font-size: .92rem;
}

.si-footer-contact .bi {
    color: var(--si-accent);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: .2rem;
}

.si-footer-links li {
    margin-bottom: .6rem;
}

.si-footer-links a {
    font-size: .92rem;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
}

.si-footer-links a::before {
    content: '\F285';
    font-family: "bootstrap-icons";
    font-size: .7rem;
    color: var(--si-accent);
    display: inline-block;
    speak: none;
    font-style: normal;
    font-weight: normal;
    font-variant: normal;
    text-transform: none;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

.si-footer-bottom {
    border-top: 1px solid #c08552;
    padding: 1.5rem 0;
    margin-top: 3.5rem;
    font-size: .85rem;
    color: rgba(255,255,255,.5);
}

/* ---------- Scroll To Top ---------- */
.si-scroll-top {
    position: fixed;
    bottom: 2rem;
    right: 2rem;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--si-primary);
    color: #fff;
    border: none;
    font-size: 1.2rem;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--si-shadow);
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: opacity .3s ease, visibility .3s ease, transform .3s ease, background .3s ease;
    z-index: 1040;
    cursor: pointer;
}

.si-scroll-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.si-scroll-top.visible:hover {
    background: var(--si-accent);
    transform: translateY(-4px);
}

/* ---------- Animations ---------- */
.si-fade-up {
    opacity: 0;
    transform: translateY(30px);
    transition: opacity .6s ease, transform .6s ease;
}

.si-fade-up.visible {
    opacity: 1;
    transform: translateY(0);
}

/* ---------- Page Banner / Breadcrumb ---------- */
.si-page-banner {
    background: linear-gradient(135deg, #1a0209 0%, #450920 45%, #7a1038 100%);
    padding: 4.5rem 0 3.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}

.si-page-banner::before {
    content: '';
    position: absolute;
    top: -40%;
    right: -8%;
    width: 500px;
    height: 500px;
    background: radial-gradient(circle, rgba(245,158,11,.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.si-page-banner::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -5%;
    width: 350px;
    height: 350px;
    background: radial-gradient(circle, rgba(255,255,255,.04) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.si-page-banner h1 {
    color: #fff;
    font-family: var(--si-title-font);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
    margin-bottom: .75rem;
    position: relative;
    z-index: 1;
}

/* Background image variant */
.si-page-banner-bg {
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding: 6rem 0 5rem;
}

.si-page-banner-bg::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(135deg, rgba(26,3,11,.85) 0%, rgba(69,9,32,.75) 100%);
    z-index: 0;
}

.si-page-banner-bg h1 {
    font-size: clamp(2.5rem, 5vw, 4rem);
    font-weight: 800;
    letter-spacing: .04em;
    text-shadow: 0 2px 12px rgba(0,0,0,.3);
}

.si-page-banner-bg .breadcrumb,
.si-page-banner-bg nav {
    position: relative;
    z-index: 1;
}

.si-page-banner .breadcrumb {
    background: none;
    padding: 0;
    margin: 0;
}

.si-page-banner .breadcrumb-item a {
    color: rgba(255,255,255,.7);
    font-weight: 500;
}

.si-page-banner .breadcrumb-item a:hover {
    color: var(--si-accent);
}

.si-page-banner .breadcrumb-item.active {
    color: var(--si-accent);
}

.si-page-banner .breadcrumb-item + .breadcrumb-item::before {
    color: rgba(255,255,255,.4);
}

/* ---------- Faculty Cards ---------- */
.si-faculty {
    padding: 6rem 0;
    background: var(--si-gray-100);
}

.si-faculty-card {
    background: #fff;
    border-radius: var(--si-radius);
    overflow: hidden;
    box-shadow: var(--si-shadow);
    transition: var(--si-transition);
    height: 100%;
}

.si-faculty-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--si-shadow-lg);
}

.si-faculty-card-img {
    position: relative;
    overflow: hidden;
    height: 340px;
}

.si-faculty-card-img img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .5s ease;
}

.si-faculty-card:hover .si-faculty-card-img img {
    transform: scale(1.08);
}

.si-faculty-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(26,3,11,.85) 0%, rgba(26,3,11,.2) 40%, transparent 70%);
    display: flex;
    align-items: flex-end;
    justify-content: center;
    padding: 1.25rem;
    opacity: 0;
    transition: var(--si-transition);
}

.si-faculty-card:hover .si-faculty-overlay {
    opacity: 1;
}

.si-faculty-role {
    display: inline-block;
    background: var(--si-accent);
    color: #fff;
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .35rem 1rem;
    border-radius: 50px;
    transform: translateY(10px);
    transition: transform .3s ease;
}

.si-faculty-card:hover .si-faculty-role {
    transform: translateY(0);
}

.si-faculty-card-body {
    padding: 1.25rem;
    text-align: center;
}

.si-faculty-card-body h5 {
    font-family: var(--si-body-font);
    font-size: 1rem;
    font-weight: 700;
    color: var(--si-dark);
    margin-bottom: .25rem;
}

.si-faculty-card-body p {
    font-size: .85rem;
    color: var(--si-gray-500);
    margin-bottom: 0;
}

/* ---------- Content Pages ---------- */

/* ---------- Message Pages (Principal, President, Director) ---------- */
.si-message-page {
    padding: 5rem 0;
    background: var(--si-gray-100);
}

.si-profile-card {
    background: #fff;
    border-radius: var(--si-radius-lg);
    overflow: hidden;
    box-shadow: var(--si-shadow);
    position: sticky;
    top: 6rem;
}

.si-profile-img-wrapper {
    position: relative;
    background: linear-gradient(135deg, var(--si-primary) 0%, var(--si-primary-dark) 100%);
    padding: 2rem 2rem 0;
}

.si-profile-img-wrapper img {
    width: 180px;
    height: 180px;
    border-radius: 50%;
    object-fit: cover;
    border: 5px solid #fff;
    box-shadow: 0 8px 32px rgba(0,0,0,.18);
    display: block;
    margin: 0 auto;
    position: relative;
    top: 2rem;
}

.si-profile-info {
    padding: 3rem 1.5rem 2rem;
}

.si-profile-info h3 {
    font-family: var(--si-heading-font);
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--si-dark);
    margin-bottom: .25rem;
}

.si-profile-role {
    display: inline-block;
    background: var(--si-accent);
    color: var(--si-dark);
    font-size: .75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .08em;
    padding: .3rem 1rem;
    border-radius: 50px;
    margin-top: .5rem;
}

.si-profile-divider {
    width: 40px;
    height: 3px;
    background: var(--si-primary);
    margin: 1rem auto;
    border-radius: 3px;
}

.si-profile-org {
    font-size: .85rem;
    color: var(--si-gray-500);
    margin-bottom: 0;
}

.si-message-content {
    background: #fff;
    border-radius: var(--si-radius-lg);
    padding: 3rem;
    box-shadow: var(--si-shadow);
}

.si-message-content p {
    text-align: justify;
    margin-bottom: 1rem;
    color: var(--si-gray-700);
}

.si-quote {
    background: linear-gradient(135deg, rgba(69,9,32,.04) 0%, rgba(245,158,11,.06) 100%);
    border-left: 4px solid var(--si-accent);
    border-radius: 0 var(--si-radius) var(--si-radius) 0;
    padding: 1.75rem 2rem;
    margin-bottom: 2rem;
    position: relative;
}

.si-quote-icon {
    font-size: 2.5rem;
    color: var(--si-accent);
    opacity: .5;
    position: absolute;
    top: .5rem;
    left: .75rem;
}

.si-quote p {
    font-family: var(--si-heading-font);
    font-size: 1.1rem;
    font-style: italic;
    font-weight: 500;
    color: var(--si-primary);
    margin-bottom: .5rem;
    padding-left: 1.5rem;
}

.si-quote cite {
    font-size: .85rem;
    color: var(--si-gray-500);
    font-style: normal;
    font-weight: 600;
    padding-left: 1.5rem;
}

.si-signature {
    margin-top: 2rem;
    padding-top: 1.5rem;
}

.si-signature-line {
    width: 80px;
    height: 3px;
    background: var(--si-accent);
    margin-bottom: 1rem;
    border-radius: 3px;
}

.si-signature strong {
    display: block;
    font-family: var(--si-heading-font);
    font-size: 1.05rem;
    color: var(--si-dark);
}

.si-signature span {
    display: block;
    font-size: .85rem;
    color: var(--si-gray-500);
    margin-top: .15rem;
}

@media (max-width: 991px) {
    .si-profile-card {
        position: static;
        max-width: 320px;
        margin: 0 auto 2rem;
    }

    .si-message-content {
        padding: 2rem 1.5rem;
    }

    .si-quote {
        padding: 1.25rem 1.5rem;
    }
}

@media (max-width: 575px) {
    .si-message-page {
        padding: 3rem 0;
    }

    .si-profile-img-wrapper img {
        width: 140px;
        height: 140px;
    }

    .si-message-content {
        padding: 1.5rem 1rem;
    }
}

.si-content-card {
    background: #fff;
    border-radius: var(--si-radius);
    padding: 2rem;
    box-shadow: var(--si-shadow);
    height: 100%;
    border: 1px solid var(--si-gray-200);
}

.si-content-heading {
    font-family: var(--si-body-font);
    font-weight: 700;
    font-size: 1.05rem;
    color: var(--si-primary);
    margin-top: 1.5rem;
    margin-bottom: .75rem;
}

.si-check-list {
    list-style: none;
    padding-left: 0;
    margin-bottom: 1rem;
}

.si-check-list li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: .5rem;
    font-size: .93rem;
    color: var(--si-gray-700);
    line-height: 1.7;
}

.si-check-list li::before {
    content: '\F26A';
    font-family: "bootstrap-icons";
    position: absolute;
    left: 0;
    top: .1em;
    color: var(--si-accent);
    font-size: .8rem;
    font-style: normal;
    font-weight: normal;
    line-height: 1;
    -webkit-font-smoothing: antialiased;
}

/* ==========================================================================
   Admission Page — Professional Redesign
   ========================================================================== */

/* --- Admission Hero --- */
.si-adm-hero {
    padding: 5rem 0 4rem;
    background: #fff;
}

.si-adm-badge {
    display: inline-block;
    background: rgba(245,158,11,.12);
    color: var(--si-accent-hover);
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .4rem 1.2rem;
    border-radius: 50px;
    margin-bottom: 1rem;
}

.si-adm-headline {
    font-family: var(--si-heading-font);
    font-size: clamp(2rem, 4vw, 3rem);
    font-weight: 800;
    color: var(--si-dark);
    line-height: 1.2;
    margin-bottom: 1rem;
}

.si-adm-headline span {
    color: var(--si-primary);
}

.si-adm-lead {
    font-size: .95rem;
    color: var(--si-gray-700);
    line-height: 1.8;
    max-width: 520px;
}

.si-adm-btn-outline {
    background: transparent;
    color: var(--si-primary);
    border: 2px solid var(--si-primary);
    border-radius: 50px;
    padding: .65rem 1.75rem;
    font-weight: 600;
    transition: var(--si-transition);
}

.si-adm-btn-outline:hover {
    background: var(--si-primary);
    color: #fff;
}

.si-adm-poster {
    position: relative;
}

.si-adm-poster img {
    border-radius: var(--si-radius-lg);
    box-shadow: var(--si-shadow-lg);
    max-height: 420px;
    width: auto;
    max-width: 100%;
    object-fit: cover;
}

/* --- Admission Stats --- */
.si-adm-stats {
    padding: 3rem 0;
    background: linear-gradient(135deg, var(--si-primary) 0%, var(--si-primary-dark) 100%);
}

.si-stat-item {
    color: #fff;
    padding: 1.5rem 1rem;
}

.si-stat-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255,255,255,.12);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.4rem;
    color: var(--si-accent);
}

.si-stat-item h3 {
    font-family: var(--si-heading-font);
    font-size: 1.6rem;
    font-weight: 800;
    margin-bottom: .25rem;
    color: #fff;
}

.si-stat-item p {
    font-size: .8rem;
    opacity: .8;
    margin-bottom: 0;
    text-transform: uppercase;
    letter-spacing: .04em;
    color: #fff;
}

/* --- Admission Features --- */
.si-adm-details {
    padding: 5rem 0;
    background: var(--si-gray-100);
}

.si-adm-feature-card {
    background: #fff;
    border-radius: var(--si-radius);
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: var(--si-shadow-sm);
    height: 100%;
    transition: var(--si-transition);
    border: 1px solid transparent;
}

.si-adm-feature-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--si-shadow-lg);
    border-color: var(--si-accent);
}

.si-adm-feature-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(69,9,32,.06) 0%, rgba(245,158,11,.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.5rem;
    color: var(--si-primary);
    transition: var(--si-transition);
}

.si-adm-feature-card:hover .si-adm-feature-icon {
    background: var(--si-primary);
    color: #fff;
}

.si-adm-feature-card h5 {
    font-family: var(--si-heading-font);
    font-weight: 700;
    font-size: .95rem;
    color: var(--si-dark);
    margin-bottom: .5rem;
}

.si-adm-feature-card p {
    font-size: .85rem;
    color: var(--si-gray-500);
    margin-bottom: 0;
    line-height: 1.6;
}

/* --- Admission Steps --- */
.si-adm-process {
    padding: 5rem 0;
    background: #fff;
}

.si-adm-step {
    text-align: center;
    padding: 2rem 1.5rem;
    position: relative;
    height: 100%;
}

.si-adm-step-num {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: var(--si-primary);
    color: #fff;
    font-family: var(--si-heading-font);
    font-size: 1.3rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    box-shadow: 0 6px 20px rgba(69,9,32,.25);
}

.si-adm-step h5 {
    font-family: var(--si-heading-font);
    font-weight: 700;
    font-size: .95rem;
    color: var(--si-dark);
    margin-bottom: .5rem;
}

.si-adm-step p {
    font-size: .85rem;
    color: var(--si-gray-500);
    line-height: 1.6;
    margin-bottom: 0;
}

/* --- Admission Form --- */
.si-adm-form-section {
    padding: 5rem 0;
    background: var(--si-gray-100);
}

.si-adm-form-card {
    background: #fff;
    border-radius: var(--si-radius-lg);
    padding: 0;
    box-shadow: var(--si-shadow);
    overflow: hidden;
}

.si-adm-form-header {
    background: linear-gradient(135deg, var(--si-primary) 0%, var(--si-primary-dark) 100%);
    color: #fff;
    padding: 2rem 2.5rem;
    text-align: center;
}

.si-adm-form-header i {
    font-size: 2rem;
    margin-bottom: .5rem;
    display: block;
    opacity: .7;
}

.si-adm-form-header h3 {
    font-family: var(--si-heading-font);
    font-weight: 700;
    font-size: 1.4rem;
    margin-bottom: .25rem;
    color: #fff;
}

.si-adm-form-header p {
    font-size: .85rem;
    opacity: .75;
    margin-bottom: 0;
}

.si-adm-form-card form {
    padding: 2rem 2.5rem 2.5rem;
}

.si-adm-field {
    margin-bottom: 1.25rem;
}

.si-adm-field .form-label {
    font-weight: 600;
    font-size: .85rem;
    color: var(--si-dark);
    margin-bottom: .4rem;
}

.si-adm-field .input-group-text {
    background: var(--si-gray-100);
    border-right: none;
    color: var(--si-primary);
}

.si-adm-field .form-control,
.si-adm-field .form-select {
    border-left: none;
    font-size: .9rem;
}

.si-adm-field .form-control:focus,
.si-adm-field .form-select:focus {
    box-shadow: 0 0 0 .2rem rgba(69,9,32,.12);
    border-color: var(--si-primary);
}

.si-adm-field .input-group-text,
.si-adm-field .form-control,
.si-adm-field .form-select {
    padding: .65rem .9rem;
}

/* --- QR & Contact side cards --- */
.si-adm-qr-card {
    background: #fff;
    border-radius: var(--si-radius);
    padding: 2rem;
    box-shadow: var(--si-shadow-sm);
    width: 100%;
}

.si-adm-qr-card img {
    max-width: 180px;
    border-radius: var(--si-radius-sm);
    margin-bottom: .75rem;
}

.si-adm-qr-card p {
    font-weight: 600;
    color: var(--si-primary);
    font-size: .9rem;
    margin-bottom: 0;
}

.si-adm-contact-card {
    background: #fff;
    border-radius: var(--si-radius);
    padding: 1.75rem;
    box-shadow: var(--si-shadow-sm);
    width: 100%;
    border-top: 3px solid var(--si-accent);
}

.si-adm-contact-card h5 {
    font-family: var(--si-heading-font);
    font-weight: 700;
    font-size: 1rem;
    color: var(--si-dark);
    margin-bottom: .5rem;
}

.si-adm-contact-card p {
    font-size: .85rem;
    color: var(--si-gray-500);
}

.si-adm-contact-card a {
    color: var(--si-primary);
    text-decoration: none;
    font-size: .9rem;
    transition: var(--si-transition);
}

.si-adm-contact-card a:hover {
    color: var(--si-accent);
}

/* --- CTA Banner --- */
.si-adm-cta {
    padding: 4rem 0;
    background: linear-gradient(135deg, var(--si-primary) 0%, var(--si-primary-dark) 100%);
    color: #fff;
}

.si-adm-cta h2 {
    font-family: var(--si-heading-font);
    font-weight: 800;
    font-size: clamp(1.5rem, 3vw, 2rem);
    margin-bottom: .5rem;
}

.si-adm-cta p {
    font-size: 1rem;
    opacity: .8;
    margin-bottom: 1.5rem;
}

.si-adm-cta .btn-si-primary {
    background: var(--si-accent);
    color: var(--si-dark);
}

.si-adm-cta .btn-si-primary:hover {
    background: var(--si-accent-hover);
    color: #fff;
}

@media (max-width: 991px) {
    .si-adm-hero { padding: 3rem 0; }
    .si-adm-poster img { max-height: 320px; }
    .si-adm-form-card form { padding: 1.5rem; }
}

@media (max-width: 575px) {
    .si-adm-headline { font-size: 1.75rem; }
    .si-stat-item h3 { font-size: 1.2rem; }
    .si-adm-form-header { padding: 1.5rem; }
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
    .si-hero .carousel-inner,
    .si-hero .carousel-item {
        height: 60vh;
        min-height: 400px;
    }

    .si-hero-content h1 {
        font-size: 2rem;
    }

    .si-hero-content {
        padding: 1.5rem 0;
    }

    .si-about, .si-team, .si-admission {
        padding: 4rem 0;
    }

    .si-faculty {
        padding: 4rem 0;
    }

    .si-admission-info {
        margin-top: 1.5rem;
    }

    /* Hide underline on mobile — links stacked vertically */
    .si-navbar .nav-item:not(.dropdown) > .nav-link::after {
        display: none;
    }

    /* Mobile dropdown menu: no shadow, no animation */
    .si-navbar .dropdown-menu {
        box-shadow: none;
        animation: none;
        border-left: 3px solid var(--si-accent);
        border-radius: 0;
        padding: .25rem 0 .25rem .5rem;
        margin-left: .5rem;
    }
}

@media (max-width: 767.98px) {
    .si-hero .carousel-inner,
    .si-hero .carousel-item {
        height: auto;
        min-height: unset;
        aspect-ratio: 2.4 / 1;
    }

    .si-hero .carousel-item {
        background-size: contain;
        background-position: center center;
    }

    .si-hero-content p {
        display: none;
    }

    .si-hero-content h1 {
        font-size: 1.6rem;
    }

    .si-hero .btn {
        padding: .55rem 1.2rem;
        font-size: .85rem;
    }

    .si-topbar .row > div:not(:first-child) {
        display: none;
    }

    .si-team-card-img {
        height: 220px;
    }

    .si-faculty-card-img {
        height: 280px;
    }

    .si-page-banner {
        padding: 2.5rem 0 2rem;
    }

    .si-admission-banner {
        min-height: 200px;
    }

    .si-section-title {
        margin-bottom: 2rem;
    }

    .si-section-title h2 {
        font-size: 1.5rem;
    }

    .si-newsletter {
        padding: 2.5rem 0;
    }

    .si-newsletter .input-group {
        max-width: 100%;
        flex-direction: column;
    }

    .si-newsletter .form-control {
        border-radius: 50px !important;
        margin-bottom: .5rem;
    }

    .si-newsletter .input-group > .btn {
        border-radius: 50px !important;
        width: 100%;
    }

    .si-footer {
        padding: 3rem 0 0;
        text-align: center;
    }

    .si-footer h5::after {
        left: 50%;
        transform: translateX(-50%);
    }

    .si-footer-social {
        justify-content: center;
        display: flex;
    }

    .si-footer-contact li {
        justify-content: center;
    }
}

/* ---------- Event Gallery ---------- */
.si-gallery-filters {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
    justify-content: center;
}

.si-filter-btn {
    background: var(--si-gray-100);
    color: var(--si-gray-700);
    border: 1px solid var(--si-gray-200);
    border-radius: 50px;
    padding: .35rem 1.25rem;
    font-size: .85rem;
    font-weight: 500;
    transition: var(--si-transition);
}

.si-filter-btn:hover,
.si-filter-btn.active {
    background: var(--si-primary);
    color: #fff;
    border-color: var(--si-primary);
}

.si-event-card {
    border-radius: var(--si-radius);
    overflow: hidden;
    box-shadow: var(--si-shadow-sm);
    transition: var(--si-transition);
    background: #fff;
    height: 100%;
    position: relative;
}

.si-event-card:hover {
    box-shadow: var(--si-shadow-lg);
    transform: translateY(-4px);
}

.si-event-card .si-event-img-wrap {
    position: relative;
    overflow: hidden;
}

.si-event-card img {
    width: 100%;
    height: 220px;
    object-fit: cover;
    transition: var(--si-transition);
    display: block;
}

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

.si-event-card .si-event-overlay {
    position: absolute;
    inset: 0;
    background: rgba(17,2,7,.6);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: var(--si-transition);
}

.si-event-card:hover .si-event-overlay {
    opacity: 1;
}

.si-event-view-btn {
    display: inline-block;
    padding: .5rem 1.5rem;
    font-size: .8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #fff;
    background: var(--si-accent);
    border: none;
    border-radius: 50px;
    text-decoration: none;
    transition: var(--si-transition);
    cursor: pointer;
}

.si-event-view-btn:hover {
    background: var(--si-accent-hover);
    color: #fff;
    transform: scale(1.05);
}

.si-event-card-body {
    padding: 1rem 1.25rem;
}

.si-event-card-body h5 {
    font-family: var(--si-heading-font);
    font-size: .95rem;
    font-weight: 600;
    color: var(--si-dark);
    margin-bottom: .25rem;
}

.si-event-card-body small {
    color: var(--si-gray-500);
    font-size: .8rem;
}

/* ==========================================================================
   About & Mission/Vision Pages
   ========================================================================== */

/* --- About Intro --- */
.si-about-intro {
    padding: 5rem 0;
    background: #fff;
}

.si-about-intro p {
    color: var(--si-gray-700);
    line-height: 1.85;
    font-size: .92rem;
    text-align: justify;
}

/* Image with experience badge */
.si-about-img-wrap {
    position: relative;
    display: inline-block;
}

.si-about-img-wrap img {
    border-radius: var(--si-radius-lg);
    box-shadow: var(--si-shadow-lg);
    width: 100%;
    object-fit: cover;
}

.si-about-exp-badge {
    position: absolute;
    bottom: -1.5rem;
    left: -1.5rem;
    background: var(--si-primary);
    color: #fff;
    padding: 1.25rem 1.5rem;
    border-radius: var(--si-radius);
    text-align: center;
    box-shadow: 0 8px 30px rgba(69,9,32,.3);
    line-height: 1.2;
}

.si-about-exp-badge strong {
    display: block;
    font-family: var(--si-heading-font);
    font-size: 1.6rem;
    font-weight: 800;
}

.si-about-exp-badge span {
    display: block;
    font-size: .72rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    opacity: .85;
    margin-top: .2rem;
}

/* --- About Stats --- */
.si-about-stats {
    padding: 3.5rem 0;
    background: var(--si-gray-100);
}

.si-about-stat-item {
    padding: 1.5rem 1rem;
}

.si-about-stat-item i {
    font-size: 2rem;
    color: var(--si-primary);
    margin-bottom: .75rem;
    display: block;
}

.si-about-stat-item h3 {
    font-family: var(--si-heading-font);
    font-size: 1.4rem;
    font-weight: 800;
    color: var(--si-dark);
    margin-bottom: .25rem;
}

.si-about-stat-item p {
    font-size: .8rem;
    color: var(--si-gray-500);
    text-transform: uppercase;
    letter-spacing: .04em;
    margin-bottom: 0;
}

/* --- About Details (reuses si-facility-fcard) --- */
.si-about-details {
    padding: 5rem 0;
    background: var(--si-gray-100);
}

/* --- Mission/Vision Cards --- */
.si-mv-section {
    padding: 5rem 0;
    background: var(--si-gray-100);
}

.si-mv-card {
    background: #fff;
    border-radius: var(--si-radius-lg);
    padding: 2.5rem 2rem;
    box-shadow: var(--si-shadow);
    height: 100%;
    position: relative;
    overflow: hidden;
    border-top: 4px solid transparent;
    transition: var(--si-transition);
}

.si-mv-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--si-shadow-lg);
}

.si-mv-vision {
    border-top-color: var(--si-primary);
}

.si-mv-mission {
    border-top-color: var(--si-accent);
}

.si-mv-card-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.25rem;
}

.si-mv-vision .si-mv-card-icon {
    background: rgba(69,9,32,.08);
    color: var(--si-primary);
}

.si-mv-mission .si-mv-card-icon {
    background: rgba(245,158,11,.12);
    color: var(--si-accent-hover);
}

.si-mv-card h3 {
    font-family: var(--si-heading-font);
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--si-dark);
    margin-bottom: .75rem;
}

.si-mv-card p {
    font-size: .9rem;
    color: var(--si-gray-700);
    line-height: 1.75;
    margin-bottom: 1rem;
}

.si-mv-card ul {
    list-style: none;
    padding-left: 0;
    margin-bottom: 0;
}

.si-mv-card ul li {
    position: relative;
    padding-left: 1.5rem;
    margin-bottom: .5rem;
    font-size: .85rem;
    color: var(--si-gray-700);
}

.si-mv-card ul li::before {
    content: '\F26A';
    font-family: 'bootstrap-icons';
    position: absolute;
    left: 0;
    top: .1em;
    font-size: .75rem;
}

.si-mv-vision ul li::before {
    color: var(--si-primary);
}

.si-mv-mission ul li::before {
    color: var(--si-accent);
}

@media (max-width: 991px) {
    .si-about-intro { padding: 3rem 0; }
    .si-about-img-wrap { max-width: 420px; margin: 2rem auto 0; display: block; }
    .si-about-exp-badge { bottom: -1rem; left: -1rem; padding: 1rem; }
    .si-about-exp-badge strong { font-size: 1.3rem; }
    .si-mv-section { padding: 3rem 0; }
}

@media (max-width: 575px) {
    .si-about-exp-badge { position: static; display: inline-block; margin-top: 1rem; }
    .si-mv-card { padding: 1.5rem; }
}

/* ==========================================================================
   Facility Pages — Professional Layout (Labs, Library, etc.)
   ========================================================================== */

/* --- Intro Section --- */
.si-facility-intro {
    padding: 5rem 0;
    background: #fff;
}

.si-facility-badge {
    display: inline-block;
    background: rgba(69,9,32,.06);
    color: var(--si-primary);
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    padding: .4rem 1.2rem;
    border-radius: 50px;
    margin-bottom: 1rem;
}

.si-facility-headline {
    font-family: var(--si-heading-font);
    font-size: clamp(1.75rem, 3.5vw, 2.5rem);
    font-weight: 800;
    color: var(--si-dark);
    line-height: 1.2;
    margin-bottom: 1rem;
}

.si-facility-headline span {
    color: var(--si-primary);
}

.si-facility-intro p {
    color: var(--si-gray-700);
    line-height: 1.8;
    font-size: .92rem;
}

/* Mini stat items */
.si-facility-mini-stat {
    display: flex;
    align-items: center;
    gap: .75rem;
    background: var(--si-gray-100);
    border-radius: var(--si-radius);
    padding: .85rem 1rem;
    transition: var(--si-transition);
    border: 1px solid transparent;
}

.si-facility-mini-stat:hover {
    border-color: var(--si-primary);
    background: rgba(69,9,32,.03);
}

.si-facility-mini-stat > i {
    font-size: 1.4rem;
    color: var(--si-primary);
    flex-shrink: 0;
}

.si-facility-mini-stat strong {
    display: block;
    font-size: .85rem;
    color: var(--si-dark);
}

.si-facility-mini-stat small {
    font-size: .75rem;
    color: var(--si-gray-500);
}

/* Photo gallery grid */
.si-facility-gallery {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: 1rem;
    height: 100%;
}

.si-facility-gallery-main img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: var(--si-radius-lg);
    box-shadow: var(--si-shadow);
}

.si-facility-gallery-side {
    display: flex;
    flex-direction: column;
    gap: 1rem;
}

.si-facility-gallery-side img {
    width: 100%;
    flex: 1;
    object-fit: cover;
    border-radius: var(--si-radius);
    box-shadow: var(--si-shadow-sm);
}

/* --- Lab Mosaic Gallery --- */
.si-lab-mosaic {
    display: flex;
    flex-direction: column;
    gap: .85rem;
}

.si-lab-mosaic-hero {
    position: relative;
    border-radius: var(--si-radius-lg);
    overflow: hidden;
    height: 260px;
    box-shadow: var(--si-shadow);
}

.si-lab-mosaic-hero img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.si-lab-mosaic-hero:hover img {
    transform: scale(1.04);
}

.si-lab-mosaic-badge {
    position: absolute;
    bottom: 1rem;
    left: 1rem;
    background: rgba(69,9,32,.82);
    color: #fff;
    font-size: .78rem;
    font-weight: 600;
    padding: .35rem .85rem;
    border-radius: 50px;
    letter-spacing: .04em;
    backdrop-filter: blur(4px);
}

/* Bottom: 4 equal tiles in one row */
.si-lab-mosaic-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: .85rem;
}

.si-lab-mosaic-item {
    position: relative;
    border-radius: var(--si-radius);
    overflow: hidden;
    height: 130px;
    box-shadow: var(--si-shadow-sm);
}

.si-lab-mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .45s ease;
}

.si-lab-mosaic-item:hover img {
    transform: scale(1.08);
}

.si-lab-mosaic-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(69,9,32,.75) 0%, transparent 60%);
    display: flex;
    align-items: flex-end;
    padding: .5rem .6rem;
    opacity: 0;
    transition: opacity .3s ease;
}

.si-lab-mosaic-item:hover .si-lab-mosaic-overlay {
    opacity: 1;
}

.si-lab-mosaic-overlay span {
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    letter-spacing: .03em;
    white-space: nowrap;
}

@media (max-width: 991px) {
    .si-lab-mosaic { max-width: 500px; margin: 2rem auto 0; }
    .si-lab-mosaic-hero { height: 220px; }
    .si-lab-mosaic-grid { grid-template-columns: repeat(4, 1fr); }
    .si-lab-mosaic-item { height: 100px; }
}

@media (max-width: 575px) {
    .si-lab-mosaic-grid { grid-template-columns: repeat(2, 1fr); }
    .si-lab-mosaic-hero { height: 190px; }
    .si-lab-mosaic-item { height: 110px; }
}

/* --- Features Section --- */
.si-facility-features {
    padding: 5rem 0;
    background: var(--si-gray-100);
}

.si-facility-fcard {
    background: #fff;
    border-radius: var(--si-radius);
    padding: 2rem 1.5rem;
    text-align: center;
    box-shadow: var(--si-shadow-sm);
    height: 100%;
    transition: var(--si-transition);
    border-bottom: 3px solid transparent;
}

.si-facility-fcard:hover {
    transform: translateY(-6px);
    box-shadow: var(--si-shadow-lg);
    border-bottom-color: var(--si-accent);
}

.si-facility-fcard-icon {
    width: 60px;
    height: 60px;
    border-radius: 50%;
    background: linear-gradient(135deg, rgba(69,9,32,.08) 0%, rgba(245,158,11,.1) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1rem;
    font-size: 1.4rem;
    color: var(--si-primary);
    transition: var(--si-transition);
}

.si-facility-fcard:hover .si-facility-fcard-icon {
    background: var(--si-primary);
    color: #fff;
}

.si-facility-fcard h5 {
    font-family: var(--si-heading-font);
    font-weight: 700;
    font-size: .92rem;
    color: var(--si-dark);
    margin-bottom: .5rem;
}

.si-facility-fcard p {
    font-size: .84rem;
    color: var(--si-gray-500);
    margin-bottom: 0;
    line-height: 1.6;
}

@media (max-width: 991px) {
    .si-facility-intro { padding: 3rem 0; }
    .si-facility-gallery {
        grid-template-columns: 1fr;
        max-width: 420px;
        margin: 2rem auto 0;
    }
    .si-facility-gallery-side { flex-direction: row; }
}

@media (max-width: 575px) {
    .si-facility-mini-stat { padding: .65rem .75rem; }
    .si-facility-gallery-side { flex-direction: column; }
}

/* ==========================================================================
   Events 2025-26 & Event Detail Pages
   ========================================================================== */

.si-events-page {
    padding: 5rem 0;
    background: #fff;
}

/* Photo count badge on thumbnail */
.si-event-count-badge {
    position: absolute;
    top: .6rem;
    right: .6rem;
    background: rgba(17,2,7,.72);
    color: #fff;
    font-size: .72rem;
    font-weight: 600;
    padding: .25rem .6rem;
    border-radius: 50px;
    backdrop-filter: blur(4px);
    z-index: 2;
    pointer-events: none;
}

/* Event Detail Page */
.si-event-detail-page {
    padding: 4rem 0 5rem;
    background: #fff;
}

.si-event-detail-header {
    background: var(--si-gray-100);
    border-radius: var(--si-radius-lg);
    padding: 2.5rem;
    margin-bottom: 3rem;
    border-left: 4px solid var(--si-primary);
}

.si-event-detail-desc {
    font-size: .92rem;
    color: var(--si-gray-700);
    line-height: 1.85;
    margin-top: .75rem;
    margin-bottom: 0;
    text-align: justify;
}

.si-event-detail-meta {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}

.si-event-meta-item {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: #fff;
    border: 1px solid rgba(69,9,32,.12);
    border-radius: 50px;
    padding: .5rem 1.2rem;
    font-size: .85rem;
    font-weight: 600;
    color: var(--si-primary);
}

.si-event-meta-item i {
    font-size: 1rem;
}

/* Gallery grid images */
.si-event-detail-gallery {
    margin-top: 1rem;
}

.si-detail-img-wrap {
    position: relative;
    overflow: hidden;
    border-radius: var(--si-radius);
    cursor: zoom-in;
    aspect-ratio: 4 / 3;
    background: var(--si-gray-100);
}

.si-detail-img-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform .4s ease;
    display: block;
}

.si-detail-img-wrap:hover img {
    transform: scale(1.06);
}

.si-detail-img-overlay {
    position: absolute;
    inset: 0;
    background: rgba(17,2,7,.45);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity .3s ease;
    color: #fff;
    font-size: 1.4rem;
}

.si-detail-img-wrap:hover .si-detail-img-overlay {
    opacity: 1;
}

/* Lightbox */
.si-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,.93);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.si-lightbox.active {
    opacity: 1;
    pointer-events: all;
}

.si-lightbox-inner {
    max-width: 90vw;
    max-height: 90vh;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.si-lightbox-inner img {
    max-width: 90vw;
    max-height: 80vh;
    object-fit: contain;
    border-radius: var(--si-radius);
    box-shadow: 0 8px 40px rgba(0,0,0,.6);
}

.si-lightbox-caption {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    padding: .75rem .25rem 0;
    color: rgba(255,255,255,.8);
    font-size: .85rem;
    gap: 1rem;
}

.si-lightbox-close {
    position: fixed;
    top: 1.25rem;
    right: 1.5rem;
    background: rgba(255,255,255,.1);
    border: none;
    color: #fff;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    font-size: 1.1rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    z-index: 10000;
}

.si-lightbox-close:hover {
    background: rgba(255,255,255,.2);
}

.si-lightbox-nav {
    position: fixed;
    top: 50%;
    transform: translateY(-50%);
    background: rgba(255,255,255,.1);
    border: none;
    color: #fff;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    font-size: 1.2rem;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background .2s;
    z-index: 10000;
}

.si-lightbox-nav:hover {
    background: rgba(255,255,255,.22);
}

.si-lb-prev { left: 1.25rem; }
.si-lb-next { right: 1.25rem; }

@media (max-width: 575px) {
    .si-event-detail-header { padding: 1.5rem; }
    .si-event-detail-meta { align-items: flex-start; margin-top: 1rem; }
    .si-lb-prev { left: .5rem; }
    .si-lb-next { right: .5rem; }
}

/* ---------- Academic Pages ---------- */
.si-academic-gallery {
    padding: 5rem 0;
    background: #fff;
}

/* --- Kindergarten Life Gallery --- */
.si-kg-gallery {
    display: grid;
    grid-template-columns: 1.6fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: .85rem;
    height: 480px;
}

.si-kg-gallery-featured {
    grid-column: 1;
    grid-row: 1 / 3;
    position: relative;
    border-radius: var(--si-radius-lg);
    overflow: hidden;
    box-shadow: var(--si-shadow);
}

.si-kg-gallery-tile {
    position: relative;
    border-radius: var(--si-radius);
    overflow: hidden;
    box-shadow: var(--si-shadow-sm);
}

.si-kg-gallery-featured img,
.si-kg-gallery-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform .5s ease;
}

.si-kg-gallery-featured:hover img,
.si-kg-gallery-tile:hover img {
    transform: scale(1.06);
}

.si-kg-gallery-overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to top, rgba(69,9,32,.7) 0%, transparent 50%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    opacity: 0;
    transition: opacity .35s ease;
}

.si-kg-gallery-featured:hover .si-kg-gallery-overlay,
.si-kg-gallery-tile:hover .si-kg-gallery-overlay {
    opacity: 1;
}

.si-kg-gallery-overlay i {
    font-size: 1.6rem;
    color: #fff;
}

.si-kg-gallery-overlay span {
    color: #fff;
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: .04em;
}

@media (max-width: 991px) {
    .si-kg-gallery {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 220px 160px 160px;
        height: auto;
    }
    .si-kg-gallery-featured {
        grid-column: 1 / 3;
        grid-row: 1;
    }
}

@media (max-width: 575px) {
    .si-kg-gallery {
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 180px 120px 120px;
    }
    .si-kg-gallery-featured { grid-column: 1 / 3; }
}

.si-academic-cocurricular {
    padding: 5rem 0;
    background: #fff;
}

/* ---------- 404 Error Page ---------- */
.si-error-page {
    position: relative;
    min-height: 80vh;
    display: flex;
    align-items: center;
    background: linear-gradient(135deg, var(--si-light) 0%, #eef2ff 100%);
    overflow: hidden;
    padding: 5rem 0;
}

/* Decorative background blobs */
.si-error-blob {
    position: absolute;
    border-radius: 50%;
    filter: blur(80px);
    opacity: .18;
    pointer-events: none;
}

.si-error-blob--1 {
    width: 500px;
    height: 500px;
    background: var(--si-primary-light);
    top: -120px;
    right: -100px;
}

.si-error-blob--2 {
    width: 380px;
    height: 380px;
    background: var(--si-accent);
    bottom: -80px;
    left: -80px;
}

.si-error-inner {
    position: relative;
    z-index: 1;
    text-align: center;
    max-width: 620px;
    margin: 0 auto;
    animation: si-error-fadein .7s ease both;
}

@keyframes si-error-fadein {
    from { opacity: 0; transform: translateY(30px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* Giant animated 404 */
.si-error-code {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    font-family: var(--si-heading-font);
    font-size: clamp(5rem, 16vw, 9rem);
    font-weight: 900;
    line-height: 1;
    color: var(--si-primary);
    margin-bottom: 1.5rem;
    letter-spacing: -.04em;
}

.si-error-code span {
    display: inline-block;
    animation: si-error-bounce 1.8s ease-in-out infinite;
}

.si-error-code span:nth-child(3) {
    animation-delay: .2s;
}

@keyframes si-error-bounce {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-14px); }
}

/* The "0" replaced with a search icon circle */
.si-error-zero {
    width: clamp(4.5rem, 14vw, 8rem);
    height: clamp(4.5rem, 14vw, 8rem);
    border-radius: 50%;
    background: linear-gradient(135deg, var(--si-accent) 0%, var(--si-accent-hover) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: clamp(2rem, 6vw, 3.5rem);
    color: #fff;
    animation: si-error-spin 3s ease-in-out infinite !important;
    box-shadow: 0 8px 32px rgba(245,158,11,.35);
}

@keyframes si-error-spin {
    0%, 100% { transform: rotate(-10deg) scale(1); }
    50%       { transform: rotate(10deg) scale(1.06); }
}

/* Badge */
.si-error-badge {
    display: inline-block;
    background: rgba(69,9,32,.08);
    color: var(--si-primary);
    font-size: .78rem;
    font-weight: 700;
    letter-spacing: .1em;
    text-transform: uppercase;
    padding: .35rem 1.1rem;
    border-radius: 50px;
    border: 1.5px solid rgba(69,9,32,.15);
    margin-bottom: 1rem;
}

/* Title */
.si-error-title {
    font-family: var(--si-heading-font);
    font-size: clamp(1.5rem, 4vw, 2.2rem);
    font-weight: 800;
    color: var(--si-dark);
    margin-bottom: .75rem;
}

/* Description */
.si-error-desc {
    font-size: .97rem;
    color: var(--si-gray-500);
    line-height: 1.8;
    margin-bottom: 2rem;
    max-width: 500px;
    margin-left: auto;
    margin-right: auto;
}

/* Quick navigation links */
.si-error-links {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: .75rem;
    margin-bottom: 2rem;
}

.si-error-link-item {
    display: flex;
    align-items: center;
    gap: .4rem;
    background: #fff;
    border: 1.5px solid var(--si-gray-200);
    border-radius: 50px;
    padding: .45rem 1.1rem;
    font-size: .84rem;
    font-weight: 600;
    color: var(--si-gray-700);
    transition: var(--si-transition);
    box-shadow: var(--si-shadow-sm);
}

.si-error-link-item:hover {
    border-color: var(--si-primary);
    color: var(--si-primary);
    transform: translateY(-2px);
    box-shadow: var(--si-shadow);
}

.si-error-link-item i {
    color: var(--si-accent);
    font-size: .9rem;
}

.si-error-link-item a {
    color: inherit;
    text-decoration: none;
}

.si-error-link-item:hover a {
    color: var(--si-primary);
}

/* Primary CTA button */
.si-error-btn {
    display: inline-flex;
    align-items: center;
    background: linear-gradient(135deg, var(--si-primary) 0%, var(--si-primary-light) 100%);
    color: #fff !important;
    font-size: .92rem;
    font-weight: 700;
    padding: .85rem 2.2rem;
    border-radius: 50px;
    text-decoration: none;
    box-shadow: 0 6px 24px rgba(69,9,32,.25);
    transition: var(--si-transition);
    letter-spacing: .02em;
}

.si-error-btn:hover {
    background: linear-gradient(135deg, var(--si-primary-dark) 0%, var(--si-primary) 100%);
    transform: translateY(-3px);
    box-shadow: 0 10px 32px rgba(69,9,32,.32);
    color: #fff !important;
}

@media (max-width: 575px) {
    .si-error-code { gap: .25rem; }
    .si-error-links { gap: .5rem; }
    .si-error-link-item { font-size: .78rem; padding: .4rem .85rem; }

    /* Newsletter mobile fix */
    .si-newsletter {
        padding: 2.5rem 0;
    }
    .si-newsletter h3 {
        font-size: 1.25rem;
        text-align: center;
    }
    .si-newsletter p {
        font-size: .85rem;
        text-align: center;
    }
    .si-newsletter-form {
        max-width: 100%;
    }
    .si-newsletter-input-wrap {
        flex-direction: column;
        border-radius: var(--si-radius);
        overflow: visible;
        box-shadow: none;
        gap: .6rem;
    }
    .si-newsletter-input-wrap .form-control {
        border-radius: 50px !important;
        padding: .75rem 1.25rem;
        font-size: .875rem;
        box-shadow: 0 2px 8px rgba(0,0,0,.1);
    }
    .si-newsletter-input-wrap .btn {
        border-radius: 50px !important;
        width: 100%;
        padding: .75rem 1.25rem;
        font-size: .875rem;
    }
}

/* ---------- Contact Page ---------- */
.btn-si-primary {
    background: var(--si-primary);
    color: #fff;
    border: none;
    border-radius: 50px;
    padding: .75rem 2rem;
    font-weight: 600;
    transition: var(--si-transition);
}

.btn-si-primary:hover {
    background: var(--si-primary-dark);
    color: #fff;
    transform: translateY(-2px);
    box-shadow: var(--si-shadow);
}

/* ==========================================================================
   Infrastructure Pages — Shared Utilities
   ========================================================================== */

.si-overview-heading {
    font-family: var(--si-heading-font);
    font-size: clamp(1.75rem, 3vw, 2.4rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .02em;
}

.si-divider-left {
    width: 60px;
    height: 4px;
    background: var(--si-accent);
    border-radius: 2px;
    margin-bottom: 1.5rem;
}

.si-body-text {
    color: var(--si-gray-500);
    line-height: 1.95;
    font-size: .97rem;
}

.si-text-primary { color: var(--si-primary) !important; }
.si-text-accent  { color: var(--si-accent) !important; }
.si-text-green   { color: #059669 !important; }
.si-text-blue    { color: #2563eb !important; }
.si-text-red     { color: #dc3545 !important; }
.si-text-purple  { color: #7c3aed !important; }

.si-icon-dot {
    font-size: .5rem;
    vertical-align: middle;
}

.si-fact-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .75rem;
    background: #fff;
    border-radius: var(--si-radius-sm);
    box-shadow: var(--si-shadow-sm);
}

.si-fact-icon {
    width: 44px;
    height: 44px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1.2rem;
}

.si-fact-icon--primary { background: rgba(69,9,32,.08); color: var(--si-primary); }
.si-fact-icon--accent  { background: rgba(245,158,11,.1);  color: var(--si-accent); }
.si-fact-icon--green   { background: rgba(16,185,129,.08); color: #059669; }

.si-fact-title {
    font-size: .85rem;
    font-weight: 700;
    color: var(--si-dark);
    display: block;
    margin-bottom: .15rem;
}

.si-fact-text {
    font-size: .82rem;
    color: var(--si-gray-500);
    margin: 0;
}

.si-quote-wrap {
    max-width: 760px;
    margin: 0 auto;
}

.si-section-heading {
    font-family: var(--si-heading-font);
    font-weight: 700;
    color: var(--si-dark);
}

.si-cta-icon {
    font-size: 3rem;
    color: var(--si-accent);
}

.si-btn-pill {
    border-radius: 50px !important;
    font-weight: 600;
    padding: .7rem 2rem;
}

.si-z-1 { z-index: 1; }

/* ==========================================================================
   Library Page
   ========================================================================== */

.lib-overview { padding: 6rem 0; background: #fff; }

.lib-info-card {
    background: linear-gradient(135deg, var(--si-primary) 0%, var(--si-primary-light) 100%);
    border-radius: var(--si-radius-lg);
    padding: 2.5rem;
    color: #fff;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.lib-info-card::before {
    content: '\f02d';
    font-family: 'Bootstrap-Icons';
    position: absolute;
    bottom: -1.5rem;
    right: -1rem;
    font-size: 8rem;
    opacity: .06;
    line-height: 1;
}

.lib-info-card h3 { color: #fff; font-size: 1.5rem; margin-bottom: 1.25rem; }
.lib-info-card p  { color: rgba(255,255,255,.85); line-height: 1.9; font-size: .95rem; margin-bottom: 0; }

.lib-highlight-pill {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50px;
    padding: .45rem 1rem;
    font-size: .8rem;
    font-weight: 600;
    color: #fff;
    margin: .3rem .2rem 0 0;
}

.lib-highlight-pill .bi { color: var(--si-accent); font-size: 1rem; }

/* --- Stats Strip --- */
.lib-stats {
    padding: 4rem 0;
    background: linear-gradient(135deg, #1a0209 0%, var(--si-primary) 60%, var(--si-primary-light) 100%);
    position: relative;
    overflow: hidden;
}

.lib-stats::before {
    content: '';
    position: absolute;
    top: -60%; right: -5%;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(245,158,11,.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.lib-stat-item { text-align: center; padding: 1.25rem; }

.lib-stat-icon {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    border: 2px solid rgba(245,158,11,.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--si-accent);
    margin-bottom: 1rem;
}

.lib-stat-number {
    font-family: var(--si-heading-font);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: #fff;
    line-height: 1;
    display: block;
}

.lib-stat-suffix { color: var(--si-accent); }

.lib-stat-label {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.65);
    margin-top: .4rem;
    display: block;
}

.lib-stat-divider {
    width: 1px;
    background: rgba(255,255,255,.12);
    align-self: stretch;
    margin: 1rem 0;
}

/* --- Collection Cards --- */
.lib-collection { padding: 6rem 0; background: var(--si-gray-100); }

.lib-col-card {
    background: #fff;
    border-radius: var(--si-radius);
    padding: 2rem 1.5rem;
    text-align: center;
    transition: var(--si-transition);
    box-shadow: var(--si-shadow-sm);
    height: 100%;
    border-bottom: 3px solid transparent;
}

.lib-col-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--si-shadow-lg);
    border-bottom-color: var(--si-accent);
}

.lib-col-icon {
    width: 70px; height: 70px;
    border-radius: var(--si-radius);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    margin-bottom: 1.2rem;
    transition: var(--si-transition);
}

.lib-col-card:hover .lib-col-icon { transform: scale(1.08); }
.lib-col-card h5 { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; color: var(--si-dark); }
.lib-col-card p  { font-size: .85rem; color: var(--si-gray-500); margin: 0; }

.lib-col-icon--primary { background: rgba(69,9,32,.08); color: var(--si-primary); }
.lib-col-icon--accent  { background: rgba(245,158,11,.1);  color: var(--si-accent); }
.lib-col-icon--green   { background: rgba(16,185,129,.08); color: #059669; }
.lib-col-icon--purple  { background: rgba(168,85,247,.08); color: #7c3aed; }
.lib-col-icon--blue    { background: rgba(59,130,246,.08); color: #2563eb; }
.lib-col-icon--red     { background: rgba(239,68,68,.08);  color: #dc2626; }

/* --- Hours Section --- */
.lib-hours { padding: 6rem 0; background: #fff; }

.lib-hours-card {
    background: var(--si-gray-100);
    border-radius: var(--si-radius-lg);
    padding: 2.5rem;
    height: 100%;
}

.lib-hours-card h4 { font-size: 1.2rem; margin-bottom: 1.5rem; color: var(--si-dark); }

.lib-hours-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .75rem 0;
    border-bottom: 1px dashed var(--si-gray-200);
    font-size: .9rem;
}

.lib-hours-row:last-child { border-bottom: none; }
.lib-hours-day { font-weight: 600; color: var(--si-gray-700); }

.lib-hours-time {
    font-weight: 700;
    color: var(--si-primary);
    background: rgba(69,9,32,.07);
    padding: .25rem .75rem;
    border-radius: 50px;
    font-size: .82rem;
}

.lib-hours-closed {
    font-weight: 600;
    color: #dc3545;
    background: rgba(220,53,69,.08);
    padding: .25rem .75rem;
    border-radius: 50px;
    font-size: .82rem;
}

.lib-access-card {
    background: linear-gradient(135deg, var(--si-accent) 0%, #d97706 100%);
    border-radius: var(--si-radius-lg);
    padding: 2.5rem;
    height: 100%;
    color: #fff;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.lib-access-card h4 { color: #fff; font-size: 1.3rem; margin-bottom: 1rem; }

.lib-access-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    margin-bottom: .85rem;
    font-size: .9rem;
    color: rgba(255,255,255,.92);
}

.lib-access-item .bi { color: #fff; font-size: 1.1rem; margin-top: .1rem; flex-shrink: 0; }

/* --- Quote --- */
.lib-quote { padding: 5rem 0; background: var(--si-gray-100); text-align: center; }

.lib-quote-mark {
    font-size: 5rem;
    line-height: .6;
    color: var(--si-accent);
    font-family: Georgia, serif;
    display: block;
    margin-bottom: .5rem;
}

.lib-quote-text {
    font-size: clamp(1.1rem, 2vw, 1.4rem);
    font-style: italic;
    color: var(--si-gray-700);
    line-height: 1.8;
    font-family: var(--si-heading-font);
}

.lib-quote-author {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.5rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--si-primary);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.lib-quote-author::before {
    content: '';
    display: inline-block;
    width: 30px; height: 2px;
    background: var(--si-accent);
}

/* --- Stream Badges --- */
.lib-stream-badge {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    padding: .6rem 1.4rem;
    border-radius: var(--si-radius);
    font-weight: 700;
    font-size: .85rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin: .35rem;
}

.lib-stream-badge--arts     { background: rgba(69,9,32,.08); color: var(--si-primary); }
.lib-stream-badge--commerce { background: rgba(16,185,129,.08); color: #059669; }
.lib-stream-badge--science  { background: rgba(59,130,246,.08); color: #2563eb; }

/* ==========================================================================
   Counselling Page
   ========================================================================== */

.coun-overview { padding: 6rem 0; background: #fff; }

.coun-feature-card {
    background: linear-gradient(135deg, var(--si-primary) 0%, var(--si-primary-light) 100%);
    border-radius: var(--si-radius-lg);
    padding: 2.5rem;
    color: #fff;
    height: 100%;
    position: relative;
    overflow: hidden;
}

.coun-feature-card::before {
    content: '\f4c3';
    font-family: 'Bootstrap-Icons';
    position: absolute;
    bottom: -1.5rem;
    right: -1rem;
    font-size: 8rem;
    opacity: .05;
    line-height: 1;
    pointer-events: none;
}

.coun-feature-card h3 { color: #fff; font-size: 1.4rem; margin-bottom: 1.2rem; }
.coun-feature-card p  { color: rgba(255,255,255,.85); line-height: 1.9; font-size: .95rem; margin-bottom: 0; }

.coun-pill {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: rgba(69,9,32,.07);
    border: 1px solid rgba(69,9,32,.18);
    border-radius: 50px;
    padding: .4rem 1rem;
    font-size: .8rem;
    font-weight: 600;
    color: var(--si-primary);
    margin: .3rem .2rem 0 0;
}

.coun-pill .bi { color: var(--si-accent); font-size: .95rem; }

/* Pills inside the dark feature card stay white */
.coun-feature-card .coun-pill {
    background: rgba(255,255,255,.12);
    border-color: rgba(255,255,255,.2);
    color: #fff;
}

/* --- Stats Strip --- */
.coun-stats {
    padding: 4rem 0;
    background: linear-gradient(135deg, var(--si-primary-dark) 0%, var(--si-primary) 60%, var(--si-primary-light) 100%);
    position: relative;
    overflow: hidden;
}

.coun-stats::before {
    content: '';
    position: absolute;
    top: -60%; right: -5%;
    width: 420px; height: 420px;
    background: radial-gradient(circle, rgba(245,158,11,.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.coun-stat-item { text-align: center; padding: 1.25rem; }

.coun-stat-icon {
    width: 60px; height: 60px;
    border-radius: 50%;
    background: rgba(255,255,255,.1);
    border: 2px solid rgba(245,158,11,.4);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    color: var(--si-accent);
    margin-bottom: 1rem;
}

.coun-stat-number {
    font-family: var(--si-heading-font);
    font-size: clamp(2rem, 4vw, 2.8rem);
    font-weight: 800;
    color: #fff;
    line-height: 1;
    display: block;
}

.coun-stat-suffix { color: var(--si-accent); }

.coun-stat-label {
    font-size: .8rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: .1em;
    color: rgba(255,255,255,.65);
    margin-top: .4rem;
    display: block;
}

.coun-stat-divider {
    width: 1px;
    background: rgba(255,255,255,.12);
    align-self: stretch;
    margin: 1rem 0;
}

/* --- Services --- */
.coun-services { padding: 6rem 0; background: var(--si-gray-100); }

.coun-service-card {
    background: #fff;
    border-radius: var(--si-radius);
    padding: 2rem 1.5rem;
    height: 100%;
    transition: var(--si-transition);
    box-shadow: var(--si-shadow-sm);
    border-left: 4px solid transparent;
}

.coun-service-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--si-shadow-lg);
    border-left-color: var(--si-accent);
}

.coun-service-icon {
    width: 56px; height: 56px;
    border-radius: var(--si-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.1rem;
    flex-shrink: 0;
    transition: var(--si-transition);
}

.coun-service-card:hover .coun-service-icon { transform: scale(1.1); }
.coun-service-card h5 { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; color: var(--si-dark); }
.coun-service-card p  { font-size: .85rem; color: var(--si-gray-500); margin: 0; line-height: 1.75; }

.coun-service-icon--primary { background: rgba(69,9,32,.08); color: var(--si-primary); }
.coun-service-icon--accent  { background: rgba(245,158,11,.1);  color: var(--si-accent); }
.coun-service-icon--green   { background: rgba(16,185,129,.08); color: #059669; }
.coun-service-icon--purple  { background: rgba(168,85,247,.08); color: #7c3aed; }
.coun-service-icon--blue    { background: rgba(59,130,246,.08); color: #2563eb; }
.coun-service-icon--red     { background: rgba(239,68,68,.08);  color: #dc2626; }

/* --- Process Steps --- */
.coun-process { padding: 6rem 0; background: #fff; }

.coun-step-wrap {
    display: flex;
    flex-direction: column;
    gap: 0;
    position: relative;
}

.coun-step-wrap::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 28px;
    bottom: 28px;
    width: 2px;
    background: var(--si-gray-200);
    z-index: 0;
}

.coun-step {
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    padding: 1.25rem 0;
    position: relative;
    z-index: 1;
}

.coun-step-num {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--si-primary);
    color: #fff;
    font-family: var(--si-heading-font);
    font-size: 1.1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(69,9,32,.35);
}

.coun-step-num.accent { background: var(--si-accent); box-shadow: 0 4px 14px rgba(245,158,11,.35); }
.coun-step-body h5 { font-size: 1rem; font-weight: 700; margin-bottom: .35rem; color: var(--si-dark); }
.coun-step-body p  { font-size: .87rem; color: var(--si-gray-500); margin: 0; line-height: 1.75; }

.coun-process-visual {
    background: linear-gradient(160deg, var(--si-gray-100) 0%, #fff 100%);
    border-radius: var(--si-radius-lg);
    padding: 2.5rem;
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    gap: 1.5rem;
    border: 1px solid var(--si-gray-200);
}

.coun-process-visual .big-icon {
    width: 90px; height: 90px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--si-primary) 0%, var(--si-primary-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2.5rem;
    color: #fff;
    box-shadow: 0 8px 28px rgba(69,9,32,.3);
}

.coun-process-visual h4 { font-size: 1.2rem; font-weight: 700; color: var(--si-dark); margin: 0; }
.coun-process-visual p  { font-size: .88rem; color: var(--si-gray-500); max-width: 280px; margin: 0; }

.coun-assurance-item {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: 1rem;
    border-radius: var(--si-radius-sm);
    background: var(--si-gray-100);
    margin-bottom: .75rem;
    transition: var(--si-transition);
}

.coun-assurance-item:hover { background: rgba(69,9,32,.06); }
.coun-assurance-item:last-child { margin-bottom: 0; }
.coun-assurance-item .bi { font-size: 1.3rem; flex-shrink: 0; margin-top: .05rem; }
.coun-assurance-item div strong { font-size: .88rem; color: var(--si-dark); display: block; margin-bottom: .15rem; }
.coun-assurance-item div span  { font-size: .82rem; color: var(--si-gray-500); }

/* --- CTA Banner --- */
.coun-cta {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--si-primary-dark) 0%, var(--si-primary) 50%, var(--si-primary-light) 100%);
    text-align: center;
    position: relative;
    overflow: hidden;
}

.coun-cta::before {
    content: '';
    position: absolute;
    top: -50%; right: -8%;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(245,158,11,.08) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}

.coun-cta h2 { color: #fff; font-family: var(--si-heading-font); font-size: clamp(1.6rem,3vw,2.2rem); font-weight: 700; margin-bottom: .75rem; }
.coun-cta p  { color: rgba(255,255,255,.8); font-size: 1rem; max-width: 560px; margin: 0 auto 1.75rem; }
.coun-cta .btn-outline-light { border-width: 2px; font-weight: 600; padding: .65rem 2rem; border-radius: 50px; transition: var(--si-transition); }
.coun-cta .btn-outline-light:hover { background: var(--si-accent); border-color: var(--si-accent); color: #fff; }

/* --- Quote --- */
.coun-quote { padding: 5rem 0; background: var(--si-gray-100); text-align: center; }

.coun-quote-mark {
    font-size: 5rem;
    line-height: .6;
    color: var(--si-accent);
    font-family: Georgia, serif;
    display: block;
    margin-bottom: .5rem;
}

.coun-quote-text {
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    font-style: italic;
    color: var(--si-gray-700);
    line-height: 1.85;
    font-family: var(--si-heading-font);
    max-width: 740px;
    margin: 0 auto;
}

.coun-quote-author {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.5rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--si-primary);
    text-transform: uppercase;
    letter-spacing: .08em;
}

.coun-quote-author::before {
    content: '';
    display: inline-block;
    width: 30px; height: 2px;
    background: var(--si-accent);
}


/* ==========================================================================
   Hostel Page Styles
   ========================================================================== */

/* --- Overview --- */
.host-overview { padding: 6rem 0; background: #fff; }

.host-info-card {
    background: linear-gradient(135deg, var(--si-primary) 0%, var(--si-primary-light) 100%);
    border-radius: var(--si-radius-lg);
    padding: 2.5rem;
    color: #fff;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.host-info-card::before {
    content: '\f4c3';
    font-family: 'Bootstrap-Icons';
    position: absolute;
    bottom: -1.5rem; right: -1rem;
    font-size: 8rem;
    opacity: .05;
    line-height: 1;
    pointer-events: none;
}
.host-info-card h3 { color: #fff; font-size: 1.4rem; margin-bottom: 1.2rem; }
.host-info-card p  { color: rgba(255,255,255,.85); line-height: 1.9; font-size: .95rem; margin-bottom: 0; }

.host-type-badge {
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    border-radius: 50px;
    padding: .4rem 1.1rem;
    font-size: .82rem;
    font-weight: 700;
    margin: .3rem .4rem 0 0;
}
.host-type-badge--gents  { background: rgba(69,9,32,.08);  border: 1px solid rgba(69,9,32,.2);  color: var(--si-primary); }
.host-type-badge--ladies { background: rgba(245,158,11,.1); border: 1px solid rgba(245,158,11,.3); color: #92400e; }

.host-highlight-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50px;
    padding: .38rem 1rem;
    font-size: .78rem;
    font-weight: 600;
    color: #fff;
    margin: .3rem .2rem 0 0;
}
.host-highlight-pill .bi { color: var(--si-accent); }

/* --- Facilities --- */
.host-facilities { padding: 6rem 0; background: var(--si-gray-100); }

.host-fac-card {
    background: #fff;
    border-radius: var(--si-radius);
    padding: 2rem 1.5rem;
    height: 100%;
    transition: var(--si-transition);
    box-shadow: var(--si-shadow-sm);
    border-left: 4px solid transparent;
}
.host-fac-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--si-shadow-lg);
    border-left-color: var(--si-accent);
}
.host-fac-icon {
    width: 56px; height: 56px;
    border-radius: var(--si-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.1rem;
    transition: var(--si-transition);
}
.host-fac-card:hover .host-fac-icon { transform: scale(1.1); }
.host-fac-card h5 { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; color: var(--si-dark); }
.host-fac-card p  { font-size: .85rem; color: var(--si-gray-500); margin: 0; line-height: 1.75; }

.host-fac-icon--primary { background: rgba(69,9,32,.08);   color: var(--si-primary); }
.host-fac-icon--accent  { background: rgba(245,158,11,.1);  color: var(--si-accent); }
.host-fac-icon--green   { background: rgba(16,185,129,.08); color: #059669; }
.host-fac-icon--purple  { background: rgba(168,85,247,.08); color: #7c3aed; }
.host-fac-icon--blue    { background: rgba(59,130,246,.08); color: #2563eb; }
.host-fac-icon--red     { background: rgba(239,68,68,.08);  color: #dc2626; }

/* --- Hostel Life --- */
.host-life { padding: 6rem 0; background: #fff; }

.host-life-card {
    background: var(--si-gray-100);
    border-radius: var(--si-radius-lg);
    padding: 2.5rem;
    border: 1px solid var(--si-gray-200);
}

.host-stat-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--si-primary) 0%, var(--si-primary-light) 100%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #fff;
    box-shadow: 0 6px 20px rgba(69,9,32,.3);
}

.host-accent-card {
    background: linear-gradient(135deg, var(--si-primary) 0%, var(--si-primary-light) 100%);
    border-radius: var(--si-radius-lg);
    padding: 2.5rem;
    color: #fff;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.host-accent-card::before {
    content: '\f4c6';
    font-family: 'Bootstrap-Icons';
    position: absolute;
    bottom: -1.5rem; right: -1rem;
    font-size: 8rem;
    opacity: .05;
    line-height: 1;
    pointer-events: none;
}
.host-accent-card h4 { color: #fff; font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; }
.host-accent-card p  { color: rgba(255,255,255,.85); font-size: .92rem; line-height: 1.9; margin: 0; }
.host-accent-card strong { color: #fff; }

/* --- Quote --- */
.host-quote { padding: 5rem 0; background: var(--si-gray-100); text-align: center; }

.host-quote-mark {
    font-size: 5rem;
    line-height: .6;
    color: var(--si-accent);
    font-family: Georgia, serif;
    display: block;
    margin-bottom: .5rem;
}
.host-quote-text {
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    font-style: italic;
    color: var(--si-gray-700);
    line-height: 1.85;
    font-family: var(--si-heading-font);
    max-width: 740px;
    margin: 0 auto;
}
.host-quote-author {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.5rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--si-primary);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.host-quote-author::before {
    content: '';
    display: inline-block;
    width: 30px; height: 2px;
    background: var(--si-accent);
}


/* ==========================================================================
   Laboratories Page Styles
   ========================================================================== */

/* --- Overview --- */
.lab-overview { padding: 6rem 0; background: #fff; }

.lab-info-card {
    background: linear-gradient(135deg, var(--si-primary) 0%, var(--si-primary-light) 100%);
    border-radius: var(--si-radius-lg);
    padding: 2.5rem;
    color: #fff;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.lab-info-card::before {
    content: '\f509';
    font-family: 'Bootstrap-Icons';
    position: absolute;
    bottom: -1.5rem; right: -1rem;
    font-size: 8rem;
    opacity: .05;
    line-height: 1;
    pointer-events: none;
}
.lab-info-card h3 { color: #fff; font-size: 1.4rem; margin-bottom: 1.2rem; }
.lab-info-card p  { color: rgba(255,255,255,.85); line-height: 1.9; font-size: .95rem; margin-bottom: 0; }

.lab-stream-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: 50px;
    padding: .38rem 1rem;
    font-size: .8rem;
    font-weight: 700;
    margin: .3rem .35rem 0 0;
}
.lab-stream-badge--physics  { background: rgba(245,158,11,.1);  border: 1px solid rgba(245,158,11,.3); color: #92400e; }
.lab-stream-badge--chemistry{ background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25); color: #065f46; }
.lab-stream-badge--biology  { background: rgba(168,85,247,.08); border: 1px solid rgba(168,85,247,.25); color: #5b21b6; }
.lab-stream-badge--computer { background: rgba(59,130,246,.08); border: 1px solid rgba(59,130,246,.25); color: #1e40af; }

.lab-highlight-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50px;
    padding: .38rem 1rem;
    font-size: .78rem;
    font-weight: 600;
    color: #fff;
    margin: .3rem .2rem 0 0;
}
.lab-highlight-pill .bi { color: var(--si-accent); }

/* --- Individual Lab Cards --- */
.lab-labs { padding: 6rem 0; background: var(--si-gray-100); }

.lab-detail-card {
    background: #fff;
    border-radius: var(--si-radius-lg);
    padding: 2.5rem;
    height: 100%;
    transition: var(--si-transition);
    box-shadow: var(--si-shadow-sm);
    border-top: 5px solid transparent;
}
.lab-detail-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--si-shadow-lg);
}
.lab-detail-card--physics  { border-top-color: #f59e0b; }
.lab-detail-card--chemistry{ border-top-color: #10b981; }
.lab-detail-card--biology  { border-top-color: #a855f7; }
.lab-detail-card--computer { border-top-color: #3b82f6; }

.lab-detail-header {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    margin-bottom: 1.2rem;
}
.lab-detail-icon {
    width: 64px; height: 64px;
    border-radius: var(--si-radius);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.9rem;
    flex-shrink: 0;
}
.lab-detail-card--physics  .lab-detail-icon { background: rgba(245,158,11,.1);  color: #d97706; }
.lab-detail-card--chemistry .lab-detail-icon { background: rgba(16,185,129,.1);  color: #059669; }
.lab-detail-card--biology  .lab-detail-icon { background: rgba(168,85,247,.1);  color: #7c3aed; }
.lab-detail-card--computer .lab-detail-icon { background: rgba(59,130,246,.1);  color: #2563eb; }

.lab-detail-card h4 { font-size: 1.15rem; font-weight: 700; color: var(--si-dark); margin: 0 0 .3rem; }
.lab-detail-tag {
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    color: var(--si-gray-500);
}
.lab-detail-desc {
    font-size: .88rem;
    color: var(--si-gray-500);
    line-height: 1.85;
    margin-bottom: 1.5rem;
}
.lab-detail-features {
    display: flex;
    flex-wrap: wrap;
    gap: .5rem;
}
.lab-detail-features span {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    background: var(--si-gray-100);
    border-radius: 50px;
    padding: .3rem .85rem;
    font-size: .78rem;
    font-weight: 600;
    color: var(--si-gray-700);
}
.lab-detail-card--physics  .lab-detail-features span .bi,
.lab-detail-card--physics  .lab-detail-features .bi { color: #d97706; }
.lab-detail-card--chemistry .lab-detail-features .bi { color: #059669; }
.lab-detail-card--biology  .lab-detail-features .bi { color: #7c3aed; }
.lab-detail-card--computer .lab-detail-features .bi { color: #2563eb; }

/* --- Access & Safety --- */
.lab-access { padding: 6rem 0; background: #fff; }

.lab-access-card {
    background: var(--si-gray-100);
    border-radius: var(--si-radius-lg);
    padding: 2.5rem;
    border: 1px solid var(--si-gray-200);
}

.lab-stat-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--si-primary) 0%, var(--si-primary-light) 100%);
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #fff;
    box-shadow: 0 6px 20px rgba(69,9,32,.3);
}

.lab-rules-card {
    background: linear-gradient(135deg, var(--si-primary) 0%, var(--si-primary-light) 100%);
    border-radius: var(--si-radius-lg);
    padding: 2.5rem;
    color: #fff;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.lab-rules-card::before {
    content: '\f512';
    font-family: 'Bootstrap-Icons';
    position: absolute;
    bottom: -1.5rem; right: -1rem;
    font-size: 8rem;
    opacity: .05;
    line-height: 1;
    pointer-events: none;
}
.lab-rules-card h4 { color: #fff; font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; }
.lab-rules-card p  { color: rgba(255,255,255,.85); font-size: .92rem; line-height: 1.9; margin: 0; }

/* --- Quote --- */
.lab-quote { padding: 5rem 0; background: var(--si-gray-100); text-align: center; }

.lab-quote-mark {
    font-size: 5rem;
    line-height: .6;
    color: var(--si-accent);
    font-family: Georgia, serif;
    display: block;
    margin-bottom: .5rem;
}
.lab-quote-text {
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    font-style: italic;
    color: var(--si-gray-700);
    line-height: 1.85;
    font-family: var(--si-heading-font);
    max-width: 740px;
    margin: 0 auto;
}
.lab-quote-author {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.5rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--si-primary);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.lab-quote-author::before {
    content: '';
    display: inline-block;
    width: 30px; height: 2px;
    background: var(--si-accent);
}


/* ==========================================================================
   Mid-Day Meal Page Styles
   ========================================================================== */

.mdm-overview { padding: 6rem 0; background: #fff; }

.mdm-info-card {
    background: linear-gradient(135deg, var(--si-primary) 0%, var(--si-primary-light) 100%);
    border-radius: var(--si-radius-lg);
    padding: 2.5rem;
    color: #fff;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.mdm-info-card::before {
    content: '\f284';
    font-family: 'Bootstrap-Icons';
    position: absolute;
    bottom: -1.5rem; right: -1rem;
    font-size: 8rem;
    opacity: .05;
    line-height: 1;
    pointer-events: none;
}
.mdm-info-card h3 { color: #fff; font-size: 1.4rem; margin-bottom: 1.2rem; }
.mdm-info-card p  { color: rgba(255,255,255,.85); line-height: 1.9; font-size: .95rem; margin-bottom: 0; }

.mdm-badge {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    border-radius: 50px;
    padding: .38rem 1rem;
    font-size: .8rem;
    font-weight: 700;
    margin: .3rem .35rem 0 0;
}
.mdm-badge--welfare   { background: rgba(69,9,32,.08);   border: 1px solid rgba(69,9,32,.2);   color: var(--si-primary); }
.mdm-badge--nutrition { background: rgba(245,158,11,.1);  border: 1px solid rgba(245,158,11,.3); color: #92400e; }
.mdm-badge--inclusive { background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.25);color: #065f46; }

.mdm-highlight-pill {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: 50px;
    padding: .38rem 1rem;
    font-size: .78rem;
    font-weight: 600;
    color: #fff;
    margin: .3rem .2rem 0 0;
}
.mdm-highlight-pill .bi { color: var(--si-accent); }

/* --- Highlights Grid --- */
.mdm-highlights { padding: 6rem 0; background: var(--si-gray-100); }

.mdm-card {
    background: #fff;
    border-radius: var(--si-radius);
    padding: 2rem 1.5rem;
    height: 100%;
    transition: var(--si-transition);
    box-shadow: var(--si-shadow-sm);
    border-left: 4px solid transparent;
}
.mdm-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--si-shadow-lg);
    border-left-color: var(--si-accent);
}
.mdm-card-icon {
    width: 56px; height: 56px;
    border-radius: var(--si-radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.1rem;
    transition: var(--si-transition);
}
.mdm-card:hover .mdm-card-icon { transform: scale(1.1); }
.mdm-card h5 { font-size: 1rem; font-weight: 700; margin-bottom: .5rem; color: var(--si-dark); }
.mdm-card p  { font-size: .85rem; color: var(--si-gray-500); margin: 0; line-height: 1.75; }

.mdm-card-icon--primary { background: rgba(69,9,32,.08);   color: var(--si-primary); }
.mdm-card-icon--accent  { background: rgba(245,158,11,.1);  color: var(--si-accent); }
.mdm-card-icon--green   { background: rgba(16,185,129,.08); color: #059669; }
.mdm-card-icon--purple  { background: rgba(168,85,247,.08); color: #7c3aed; }
.mdm-card-icon--blue    { background: rgba(59,130,246,.08); color: #2563eb; }
.mdm-card-icon--red     { background: rgba(239,68,68,.08);  color: #dc2626; }

/* --- Eligibility Section --- */
.mdm-eligibility { padding: 6rem 0; background: #fff; }

.mdm-elig-card {
    background: var(--si-gray-100);
    border-radius: var(--si-radius-lg);
    padding: 2.5rem;
    border: 1px solid var(--si-gray-200);
}

.mdm-stat-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--si-primary) 0%, var(--si-primary-light) 100%);
    align-items: center;
    justify-content: center;
    font-size: 1.8rem;
    color: #fff;
    box-shadow: 0 6px 20px rgba(69,9,32,.3);
}

.mdm-apply-card {
    background: linear-gradient(135deg, var(--si-primary) 0%, var(--si-primary-light) 100%);
    border-radius: var(--si-radius-lg);
    padding: 2.5rem;
    color: #fff;
    height: 100%;
    position: relative;
    overflow: hidden;
}
.mdm-apply-card::before {
    content: '\f1c5';
    font-family: 'Bootstrap-Icons';
    position: absolute;
    bottom: -1.5rem; right: -1rem;
    font-size: 8rem;
    opacity: .05;
    line-height: 1;
    pointer-events: none;
}
.mdm-apply-card h4 { color: #fff; font-size: 1.3rem; font-weight: 700; margin-bottom: 1rem; }
.mdm-apply-card p  { color: rgba(255,255,255,.85); font-size: .92rem; line-height: 1.9; margin: 0; }

/* --- Quote --- */
.mdm-quote { padding: 5rem 0; background: var(--si-gray-100); text-align: center; }

.mdm-quote-mark {
    font-size: 5rem;
    line-height: .6;
    color: var(--si-accent);
    font-family: Georgia, serif;
    display: block;
    margin-bottom: .5rem;
}
.mdm-quote-text {
    font-size: clamp(1.05rem, 2vw, 1.35rem);
    font-style: italic;
    color: var(--si-gray-700);
    line-height: 1.85;
    font-family: var(--si-heading-font);
    max-width: 740px;
    margin: 0 auto;
}
.mdm-quote-author {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.5rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--si-primary);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.mdm-quote-author::before {
    content: '';
    display: inline-block;
    width: 30px; height: 2px;
    background: var(--si-accent);
}


/* ==========================================================================
   Principal's Message Page Styles
   ========================================================================== */

/* --- Intro Section --- */
.pm-intro { padding: 6rem 0; background: #fff; }

.pm-photo-card {
    background: #fff;
    border-radius: var(--si-radius-lg);
    box-shadow: var(--si-shadow-lg);
    overflow: hidden;
    text-align: center;
    border: 1px solid var(--si-gray-200);
}
.pm-photo-wrap {
    background: linear-gradient(160deg, var(--si-primary) 0%, var(--si-primary-light) 100%);
    padding: 0.3rem 0.3rem 0;
    position: relative;
}
.pm-photo-wrap::before {
    content: '';
    position: absolute;
    top: -30%; right: -10%;
    width: 220px; height: 220px;
    background: radial-gradient(circle, rgba(245,158,11,.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.pm-photo {
    width: auto;
    height: auto;
    object-fit: contain;
    object-position: top;
    border-radius: var(--si-radius) var(--si-radius) 0 0;
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    box-shadow: 0 -4px 5px rgba(69,9,32,.25);
}
.pm-photo-info {
    padding: 1.5rem 1.5rem 2rem;
}
.pm-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--si-dark);
    margin-bottom: .5rem;
    font-family: var(--si-heading-font);
}
.pm-title-badge {
    display: inline-block;
    background: var(--si-primary);
    color: #fff;
    font-size: .72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .1em;
    padding: .3rem .9rem;
    border-radius: 50px;
    margin-bottom: .75rem;
}
.pm-college {
    font-size: .8rem;
    color: var(--si-gray-500);
    margin: 0;
    line-height: 1.6;
}

/* --- Mandela Quote --- */
.pm-mandela-quote {
    background: linear-gradient(135deg, var(--si-gray-100) 0%, #fff 100%);
    border-left: 5px solid var(--si-accent);
    border-radius: 0 var(--si-radius) var(--si-radius) 0;
    padding: 1.5rem 2rem;
    margin-top: 1.5rem;
    position: relative;
}
.pm-mandela-mark {
    font-size: 4rem;
    line-height: .5;
    color: var(--si-accent);
    font-family: Georgia, serif;
    display: block;
    margin-bottom: .5rem;
    opacity: .6;
}
.pm-mandela-quote p {
    font-size: 1.15rem;
    font-style: italic;
    font-weight: 600;
    color: var(--si-dark);
    font-family: var(--si-heading-font);
    margin: 0 0 .75rem;
    line-height: 1.7;
}
.pm-mandela-author {
    font-size: .82rem;
    font-weight: 700;
    color: var(--si-primary);
    text-transform: uppercase;
    letter-spacing: .08em;
}

/* --- Message Body --- */
.pm-body {
    padding: 5rem 0;
    background: var(--si-gray-100);
}
.pm-message-block { display: flex; flex-direction: column; gap: 1.25rem; }

.pm-para-card {
    background: #fff;
    border-radius: var(--si-radius);
    padding: 2rem;
    display: flex;
    align-items: flex-start;
    gap: 1.5rem;
    box-shadow: var(--si-shadow-sm);
    transition: var(--si-transition);
    border-left: 4px solid transparent;
}
.pm-para-card:hover {
    box-shadow: var(--si-shadow);
    border-left-color: var(--si-accent);
    transform: translateX(4px);
}
.pm-para-icon {
    width: 52px; height: 52px;
    border-radius: var(--si-radius-sm);
    background: linear-gradient(135deg, var(--si-primary) 0%, var(--si-primary-light) 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    color: #fff;
    flex-shrink: 0;
    box-shadow: 0 4px 12px rgba(69,9,32,.25);
}
.pm-para-card h5 {
    font-size: 1rem;
    font-weight: 700;
    color: var(--si-dark);
    margin-bottom: .5rem;
    font-family: var(--si-heading-font);
}
.pm-para-card p {
    font-size: .9rem;
    color: var(--si-gray-500);
    line-height: 1.9;
    margin: 0;
}
.pm-para-card strong { color: var(--si-primary); font-weight: 700; }

/* --- Closing Section --- */
.pm-closing {
    padding: 5rem 0;
    background: #fff;
}
.pm-closing-card {
    background: linear-gradient(135deg, var(--si-primary) 0%, var(--si-primary-light) 100%);
    border-radius: var(--si-radius-lg);
    padding: 3.5rem;
    text-align: center;
    position: relative;
    overflow: hidden;
}
.pm-closing-card::before {
    content: '';
    position: absolute;
    top: -40%; right: -5%;
    width: 400px; height: 400px;
    background: radial-gradient(circle, rgba(245,158,11,.1) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.pm-closing-icon {
    font-size: 3rem;
    color: var(--si-accent);
    margin-bottom: 1.5rem;
    display: block;
    position: relative;
    z-index: 1;
}
.pm-closing-quote {
    font-size: clamp(1.1rem, 2.5vw, 1.5rem);
    font-style: italic;
    color: #fff;
    font-family: var(--si-heading-font);
    font-weight: 600;
    line-height: 1.75;
    max-width: 680px;
    margin: 0 auto 2rem;
    position: relative;
    z-index: 1;
    border: none;
    padding: 0;
}
.pm-closing-quote strong { color: var(--si-accent); font-style: normal; }

.pm-closing-sig {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1.25rem;
    position: relative;
    z-index: 1;
}
.pm-sig-line {
    width: 40px; height: 2px;
    background: rgba(255,255,255,.4);
    flex-shrink: 0;
}
.pm-sig-info { text-align: left; }
.pm-sig-name {
    display: block;
    font-size: .92rem;
    font-weight: 700;
    color: #fff;
    font-family: var(--si-heading-font);
}
.pm-sig-role {
    display: block;
    font-size: .78rem;
    color: rgba(255,255,255,.7);
    margin-top: .2rem;
}

/* Photo placeholder — shown until real photo is added */
.pm-photo-placeholder {
    width: 180px;
    height: 220px;
    border-radius: var(--si-radius) var(--si-radius) 0 0;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto;
    background: rgba(255,255,255,.1);
    border: 2px dashed rgba(255,255,255,.3);
    position: relative;
    z-index: 1;
}
.pm-photo-placeholder .bi {
    font-size: 5rem;
    color: rgba(255,255,255,.35);
}


/* ==========================================================================
   Principals Page Styles
   ========================================================================== */

.prin-intro { padding: 4rem 0 0; background: #fff; }

/* --- Timeline Container --- */
.prin-timeline { padding: 3rem 0 6rem; background: #fff; }

.prin-track {
    position: relative;
    max-width: 820px;
    margin: 0 auto;
    padding-left: 2rem;
}
.prin-track::before {
    content: '';
    position: absolute;
    left: 27px;
    top: 0; bottom: 0;
    width: 3px;
    background: linear-gradient(to bottom, var(--si-primary) 0%, var(--si-accent) 100%);
    border-radius: 3px;
}

/* --- Each Timeline Item --- */
.prin-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 1.75rem;
    margin-bottom: 2.5rem;
}
.prin-item:last-child { margin-bottom: 0; }

/* Step number bubble */
.prin-badge {
    width: 56px; height: 56px;
    border-radius: 50%;
    background: var(--si-primary);
    color: #fff;
    font-family: var(--si-heading-font);
    font-size: 1rem;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    position: relative;
    z-index: 2;
    box-shadow: 0 4px 14px rgba(69,9,32,.35);
}
.prin-badge--accent  { background: var(--si-accent); box-shadow: 0 4px 14px rgba(245,158,11,.4); color: #1a0209; }
.prin-badge--current {
    width: 64px; height: 64px;
    font-size: 1.1rem;
    background: linear-gradient(135deg, var(--si-primary) 0%, var(--si-primary-light) 100%);
    box-shadow: 0 6px 20px rgba(69,9,32,.45);
    border: 3px solid var(--si-accent);
}

/* --- Card --- */
.prin-card {
    background: var(--si-gray-100);
    border-radius: var(--si-radius);
    padding: 1.75rem 2rem;
    flex: 1;
    border: 1px solid var(--si-gray-200);
    transition: var(--si-transition);
    border-left: 4px solid transparent;
}
.prin-card:hover {
    box-shadow: var(--si-shadow);
    border-left-color: var(--si-accent);
    transform: translateX(4px);
}
.prin-card--current {
    background: linear-gradient(135deg, var(--si-primary) 0%, var(--si-primary-light) 100%);
    border-color: transparent;
    box-shadow: var(--si-shadow-lg);
}
.prin-card--current:hover { transform: translateX(4px); }

.prin-card-header {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 1rem;
    margin-bottom: 1rem;
}

/* Avatar */
.prin-avatar {
    width: 52px; height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.prin-avatar--founder {
    background: rgba(69,9,32,.1);
    color: var(--si-primary);
    width: 120px;
    height: 120px;
}
.prin-avatar--default {
    background: rgba(245,158,11,.1);
    width: 120px; height: 120px;
    color: #92400e;
    width: 120px;
    height: 120px;
}
.prin-avatar--current {
    width: 120px; height: 120px;
    background: rgba(255,255,255,.15);
    color: #fff;
    overflow: hidden;
    border: 2px solid rgba(255,255,255,.35);
}
.prin-avatar-img {
    width: 100%; height: 100%;
    object-fit: cover;
    object-position: top;
    border-radius: 50%;
}

/* Name & tenure */
.prin-name {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--si-dark);
    margin: 0 0 .25rem;
    font-family: var(--si-heading-font);
}
.prin-card--current .prin-name { color: #fff; }

.prin-tenure {
    font-size: .78rem;
    font-weight: 600;
    color: var(--si-gray-500);
    display: inline-flex;
    align-items: center;
}
.prin-tenure--current { color: rgba(255,255,255,.8); }

/* Tags */
.prin-tag {
    display: inline-flex;
    align-items: center;
    border-radius: 50px;
    padding: .28rem .85rem;
    font-size: .7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .07em;
    margin-left: auto;
}
.prin-tag--founder { background: rgba(69,9,32,.1);   color: var(--si-primary);  border: 1px solid rgba(69,9,32,.2); }
.prin-tag--decade  { background: rgba(245,158,11,.12); color: #92400e;           border: 1px solid rgba(245,158,11,.3); }
.prin-tag--current { background: var(--si-accent);   color: #1a0209;            box-shadow: 0 2px 8px rgba(245,158,11,.4); }

/* Description */
.prin-desc {
    font-size: .88rem;
    color: var(--si-gray-500);
    line-height: 1.85;
    margin: 0;
}
.prin-card--current .prin-desc { color: rgba(255,255,255,.8); }

/* --- Quote --- */
.prin-quote { padding: 5rem 0; background: var(--si-gray-100); text-align: center; }

.prin-quote-mark {
    font-size: 5rem;
    line-height: .6;
    color: var(--si-accent);
    font-family: Georgia, serif;
    display: block;
    margin-bottom: .5rem;
}
.prin-quote-text {
    font-size: clamp(1.05rem, 2vw, 1.3rem);
    font-style: italic;
    color: var(--si-gray-700);
    line-height: 1.85;
    font-family: var(--si-heading-font);
    max-width: 720px;
    margin: 0 auto;
}
.prin-quote-author {
    display: inline-flex;
    align-items: center;
    gap: .5rem;
    margin-top: 1.5rem;
    font-size: .85rem;
    font-weight: 700;
    color: var(--si-primary);
    text-transform: uppercase;
    letter-spacing: .08em;
}
.prin-quote-author::before {
    content: '';
    display: inline-block;
    width: 30px; height: 2px;
    background: var(--si-accent);
}

/* Responsive */
@media (max-width: 576px) {
    .prin-track { padding-left: 1rem; }
    .prin-card { padding: 1.25rem; }
    .prin-tag { display: none; }
}


/* ==========================================================================
   About College Page (ac-*)
   ========================================================================== */

/* --- Welcome section --- */
.ac-welcome {
    padding: 5rem 0;
    background: #fff;
}
.ac-welcome-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.ac-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .82rem;
    font-weight: 600;
    color: var(--si-primary);
    background: rgba(69,9,32,.07);
    border: 1px solid rgba(69,9,32,.15);
    border-radius: 50px;
    padding: .35rem 1rem;
}
.ac-pill i { color: var(--si-accent); font-size: .9rem; }

/* Campus image frame */
.ac-img-frame {
    position: relative;
    border-radius: var(--si-radius-lg);
    overflow: hidden;
    box-shadow: var(--si-shadow-lg);
}
.ac-campus-img {
    width: 100%;
    height: 380px;
    object-fit: cover;
    display: block;
}
.ac-img-badge {
    position: absolute;
    bottom: 20px;
    left: 20px;
    background: var(--si-primary);
    color: #fff;
    border-radius: var(--si-radius-sm);
    padding: 10px 16px;
    box-shadow: 0 4px 16px rgba(0,0,0,.25);
}
.ac-img-badge-year {
    font-family: var(--si-heading-font);
    font-size: 1.4rem;
    font-weight: 900;
    line-height: 1;
}
.ac-img-badge-text {
    font-size: .72rem;
    font-weight: 600;
    opacity: .85;
    letter-spacing: .04em;
}

/* --- Stats band --- */
.ac-stats-band {
    background: linear-gradient(135deg, var(--si-primary-dark) 0%, var(--si-primary) 55%, var(--si-primary-light) 100%);
    padding: 3.5rem 0;
}
.ac-stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 0;
}
.ac-stat {
    text-align: center;
    padding: 1rem 1.5rem;
    border-right: 1px solid rgba(255,255,255,.15);
}
.ac-stat:last-child { border-right: none; }
.ac-stat-icon {
    font-size: 1.8rem;
    color: var(--si-accent);
    margin-bottom: .5rem;
}
.ac-stat-num {
    font-family: var(--si-heading-font);
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    line-height: 1.1;
}
.ac-stat-label {
    font-size: .8rem;
    color: rgba(255,255,255,.72);
    margin-top: .25rem;
    font-weight: 500;
}

/* --- Who Are We section --- */
.ac-who {
    padding: 5rem 0;
    background: var(--si-gray-100);
}

/* Quick facts card */
.ac-who-card {
    background: #fff;
    border-radius: var(--si-radius);
    box-shadow: var(--si-shadow);
    overflow: hidden;
}
.ac-who-card-header {
    background: linear-gradient(90deg, var(--si-primary) 0%, var(--si-primary-light) 100%);
    color: #fff;
    padding: 1.1rem 1.5rem;
    font-family: var(--si-heading-font);
    font-weight: 700;
    font-size: .95rem;
    display: flex;
    align-items: center;
    gap: 10px;
}
.ac-who-card-header i { font-size: 1.1rem; color: var(--si-accent); }
.ac-fact-list {
    list-style: none;
    margin: 0;
    padding: 0;
}
.ac-fact-list li {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 1rem 1.5rem;
    border-bottom: 1px solid var(--si-gray-100);
    transition: var(--si-transition);
}
.ac-fact-list li:last-child { border-bottom: none; }
.ac-fact-list li:hover { background: rgba(69,9,32,.03); }
.ac-fact-list li > i {
    color: var(--si-primary);
    font-size: 1rem;
    margin-top: 3px;
    flex-shrink: 0;
}
.ac-fact-list li > div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}
.ac-fact-list li strong {
    font-size: .8rem;
    font-weight: 700;
    color: var(--si-gray-700);
    text-transform: uppercase;
    letter-spacing: .04em;
}
.ac-fact-list li span {
    font-size: .88rem;
    color: var(--si-gray-500);
    line-height: 1.5;
}

/* Blockquote */
.ac-quote {
    border-left: 4px solid var(--si-accent);
    background: rgba(69,9,32,.04);
    border-radius: 0 var(--si-radius-sm) var(--si-radius-sm) 0;
    padding: 1rem 1.25rem;
    margin: 1.5rem 0 0;
    font-size: .93rem;
    color: var(--si-gray-700);
    line-height: 1.8;
}
.ac-quote > .bi {
    font-size: 1.6rem;
    color: var(--si-accent);
    display: block;
    margin-bottom: .5rem;
    opacity: .6;
}

/* --- Patroness section --- */
.ac-patroness {
    padding: 5.5rem 0;
    background: linear-gradient(135deg, #1a0209 0%, var(--si-primary) 55%, #7a1038 100%);
    position: relative;
    overflow: hidden;
}
.ac-patroness::before {
    content: '';
    position: absolute;
    top: -80px; right: -80px;
    width: 320px; height: 320px;
    background: radial-gradient(circle, rgba(245,158,11,.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.si-badge-light {
    background: rgba(255,255,255,.15) !important;
    color: #fff !important;
    border-color: rgba(255,255,255,.2) !important;
}
.ac-patroness-heading {
    font-family: var(--si-heading-font);
    font-size: clamp(1.8rem, 3vw, 2.5rem);
    font-weight: 800;
    color: #fff;
}
.ac-patroness-text {
    color: rgba(255,255,255,.82);
    line-height: 1.9;
    font-size: .95rem;
    margin-bottom: 1rem;
}
.ac-patroness-values {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1.5rem;
}
.ac-patroness-values span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,.12);
    border: 1px solid rgba(255,255,255,.22);
    color: #fff;
    font-size: .8rem;
    font-weight: 600;
    padding: .35rem 1rem;
    border-radius: 50px;
}
.ac-patroness-values span i { color: var(--si-accent); }

.ac-patroness-card {
    background: rgba(255,255,255,.10);
    border: 1px solid rgba(255,255,255,.2);
    border-radius: var(--si-radius);
    padding: 2.5rem 2rem;
    text-align: center;
    backdrop-filter: blur(4px);
}
.ac-patroness-icon {
    width: 72px; height: 72px;
    background: var(--si-accent);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.8rem;
    margin: 0 auto 1.25rem;
    box-shadow: 0 6px 20px rgba(245,158,11,.35);
}
.ac-patroness-card h4 {
    color: #fff;
    font-family: var(--si-heading-font);
    font-size: 1.05rem;
    font-weight: 700;
    margin-bottom: .75rem;
}
.ac-patroness-card p {
    color: rgba(255,255,255,.78);
    font-size: .88rem;
    line-height: 1.8;
    margin: 0;
}

/* --- Milestones timeline --- */
.ac-milestones {
    padding: 5rem 0;
    background: #fff;
}
.ac-timeline {
    position: relative;
    padding-left: 160px;
    margin-top: 2.5rem;
}
.ac-timeline::before {
    content: '';
    position: absolute;
    left: 140px;
    top: 0; bottom: 0;
    width: 2px;
    background: var(--si-gray-200);
}
.ac-timeline-item {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: 24px;
    margin-bottom: 2.5rem;
}
.ac-timeline-item:last-child { margin-bottom: 0; }

.ac-timeline-year {
    position: absolute;
    left: -160px;
    width: 120px;
    text-align: right;
    font-family: var(--si-heading-font);
    font-size: .82rem;
    font-weight: 700;
    color: var(--si-primary);
    padding-top: 6px;
    letter-spacing: .02em;
}
.ac-timeline-dot {
    position: absolute;
    left: -28px;
    width: 36px; height: 36px;
    background: var(--si-primary);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: .85rem;
    flex-shrink: 0;
    z-index: 1;
    box-shadow: 0 0 0 4px rgba(69,9,32,.12);
}
.ac-timeline-dot--current {
    background: var(--si-accent);
    box-shadow: 0 0 0 4px rgba(245,158,11,.2);
}
.ac-timeline-content {
    background: var(--si-gray-100);
    border-radius: var(--si-radius-sm);
    padding: 1.1rem 1.4rem;
    flex: 1;
    border-left: 3px solid var(--si-primary);
    transition: var(--si-transition);
}
.ac-timeline-content:hover {
    box-shadow: var(--si-shadow);
    transform: translateX(4px);
}
.ac-timeline-content h4 {
    font-family: var(--si-heading-font);
    font-size: .95rem;
    font-weight: 700;
    color: var(--si-dark);
    margin-bottom: .4rem;
}
.ac-timeline-content p {
    font-size: .86rem;
    color: var(--si-gray-500);
    line-height: 1.75;
    margin: 0;
}

/* --- Campus Life section --- */
.ac-campus-life {
    padding: 5rem 0;
    background: var(--si-gray-100);
}

/* Intro prose block above the cards */
.ac-campus-intro {
    max-width: 860px;
    margin: 0 auto 3rem;
    background: #fff;
    border-radius: var(--si-radius);
    border-left: 4px solid var(--si-accent);
    padding: 2rem 2.25rem;
    box-shadow: var(--si-shadow-sm);
}
.ac-campus-intro-text p {
    color: var(--si-gray-500);
    font-size: .95rem;
    line-height: 1.9;
    margin-bottom: .85rem;
}
.ac-campus-intro-text p:last-child { margin-bottom: 0; }

.ac-campus-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
}
.ac-campus-card {
    background: #fff;
    border-radius: var(--si-radius);
    padding: 2rem 1.75rem;
    text-align: center;
    box-shadow: var(--si-shadow-sm);
    border: 1.5px solid var(--si-gray-200);
    transition: var(--si-transition);
}
.ac-campus-card:hover {
    border-color: var(--si-primary-light);
    box-shadow: var(--si-shadow);
    transform: translateY(-6px);
}
.ac-campus-card-icon {
    width: 60px; height: 60px;
    background: rgba(69,9,32,.08);
    color: var(--si-primary);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto 1.1rem;
    transition: var(--si-transition);
}
.ac-campus-card:hover .ac-campus-card-icon {
    background: var(--si-primary);
    color: var(--si-accent);
}
.ac-campus-card h4 {
    font-family: var(--si-heading-font);
    font-size: 1rem;
    font-weight: 700;
    color: var(--si-dark);
    margin-bottom: .6rem;
}
.ac-campus-card p {
    font-size: .86rem;
    color: var(--si-gray-500);
    line-height: 1.75;
    margin: 0;
}

/* --- CTA band --- */
.ac-cta {
    padding: 4rem 0;
    background: linear-gradient(135deg, var(--si-primary-dark) 0%, var(--si-primary) 55%, var(--si-primary-light) 100%);
}
.ac-cta-inner {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 28px 40px;
    justify-content: space-between;
}
.ac-cta-text h3 {
    font-family: var(--si-heading-font);
    font-size: 1.35rem;
    font-weight: 800;
    color: #fff;
    margin-bottom: .4rem;
}
.ac-cta-text p { color: rgba(255,255,255,.78); font-size: .9rem; margin: 0; }
.ac-cta-actions {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* --- Responsive --- */
@media (max-width: 1024px) {
    .ac-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .ac-stats-grid .ac-stat:nth-child(2) { border-right: none; }
    .ac-stats-grid .ac-stat:nth-child(3),
    .ac-stats-grid .ac-stat:nth-child(4) { border-top: 1px solid rgba(255,255,255,.15); }
    .ac-campus-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 768px) {
    .ac-welcome, .ac-who, .ac-milestones, .ac-campus-life { padding: 3.5rem 0; }
    .ac-patroness { padding: 4rem 0; }
    .ac-campus-img { height: 240px; }
    .ac-stats-grid { grid-template-columns: repeat(2, 1fr); }
    .ac-timeline { padding-left: 110px; }
    .ac-timeline::before { left: 90px; }
    .ac-timeline-year { left: -110px; width: 80px; font-size: .75rem; }
    .ac-cta-inner { flex-direction: column; align-items: flex-start; }
    .ac-campus-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .ac-timeline { padding-left: 0; padding-top: 20px; }
    .ac-timeline::before { display: none; }
    .ac-timeline-year { position: static; width: auto; text-align: left; margin-bottom: 4px; font-size: .78rem; }
    .ac-timeline-dot { position: static; margin-bottom: 8px; }
    .ac-timeline-item { flex-direction: column; gap: 0; }
    .ac-stats-grid { grid-template-columns: 1fr 1fr; }
    .ac-stat { border-right: none; border-bottom: 1px solid rgba(255,255,255,.15); }
}


/* ==========================================================================
   College Emblem Page (emb-*)
   ========================================================================== */

/* --- Emblem Showcase --- */
.emb-showcase {
    padding: 5rem 0;
    background: #fff;
}

.emb-frame {
    position: relative;
    display: inline-block;
}
.emb-glow-ring {
    position: absolute;
    inset: -16px;
    border-radius: calc(var(--si-radius-lg) + 16px);
    background: radial-gradient(circle, rgba(245,158,11,.18) 0%, transparent 70%);
    pointer-events: none;
    animation: embPulse 3s ease-in-out infinite;
}
@keyframes embPulse {
    0%, 100% { transform: scale(1); opacity: .7; }
    50%       { transform: scale(1.06); opacity: 1; }
}
.emb-img {
    width: 280px;
    height: auto;
    object-fit: contain;
    border-radius: var(--si-radius-lg);
    border: 4px solid var(--si-primary);
    box-shadow: 0 0 0 8px rgba(69,9,32,.10), var(--si-shadow-lg);
    display: block;
    margin: 0 auto;
    position: relative;
    z-index: 1;
    background: #fff;
    padding: 16px;
}
.emb-motto-ribbon {
    margin-top: 16px;
    display: inline-block;
    background: linear-gradient(90deg, var(--si-primary-dark) 0%, var(--si-primary) 100%);
    color: #fff;
    font-family: var(--si-heading-font);
    font-size: .88rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
    padding: .5rem 1.5rem;
    border-radius: 50px;
    box-shadow: 0 4px 14px rgba(69,9,32,.28);
}
.emb-motto-ribbon i { color: var(--si-accent); }
.emb-motto-translation {
    font-size: .9rem;
    color: var(--si-gray-500);
    font-style: italic;
}

/* Overview tags */
.emb-overview-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}
.emb-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: .8rem;
    font-weight: 600;
    color: var(--si-primary);
    background: rgba(69,9,32,.07);
    border: 1px solid rgba(69,9,32,.14);
    border-radius: 50px;
    padding: .35rem 1rem;
}
.emb-tag i { color: var(--si-accent); font-size: .85rem; }

/* --- Symbol Cards Grid --- */
.emb-symbols {
    padding: 5rem 0;
    background: var(--si-gray-100);
}
.emb-symbols-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 28px;
}
.emb-symbol-card {
    background: #fff;
    border-radius: var(--si-radius);
    padding: 2.25rem 2rem;
    box-shadow: var(--si-shadow-sm);
    border: 1.5px solid var(--si-gray-200);
    position: relative;
    transition: var(--si-transition);
    overflow: hidden;
}
.emb-symbol-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: linear-gradient(90deg, var(--si-primary), var(--si-accent));
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .35s ease;
}
.emb-symbol-card:hover { box-shadow: var(--si-shadow); transform: translateY(-6px); border-color: var(--si-primary-light); }
.emb-symbol-card:hover::before { transform: scaleX(1); }

/* Number badge */
.emb-symbol-num {
    position: absolute;
    top: 16px; right: 20px;
    font-family: var(--si-heading-font);
    font-size: 1.8rem;
    font-weight: 900;
    color: var(--si-gray-200);
    line-height: 1;
    user-select: none;
    transition: var(--si-transition);
}
.emb-symbol-card:hover .emb-symbol-num { color: rgba(69,9,32,.14); }

/* Icon circle */
.emb-symbol-icon {
    width: 64px; height: 64px;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 1.6rem;
    margin-bottom: 1.25rem;
    flex-shrink: 0;
    transition: var(--si-transition);
}
.emb-symbol-card:hover .emb-symbol-icon { transform: scale(1.1); }

.emb-icon-star    { background: rgba(245,158,11,.12); color: var(--si-accent); }
.emb-icon-boat    { background: rgba(37,99,235,.10);  color: #2563eb; }
.emb-icon-cross   { background: rgba(245,158,11,.12); color: var(--si-accent); }
.emb-icon-lotus   { background: rgba(69,9,32,.08);    color: var(--si-primary); }

.emb-symbol-card h3 {
    font-family: var(--si-heading-font);
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--si-dark);
    margin-bottom: .75rem;
    line-height: 1.4;
}
.emb-symbol-card h3 em {
    font-style: italic;
    color: var(--si-primary);
    font-size: .95rem;
}
.emb-symbol-card p {
    font-size: .88rem;
    color: var(--si-gray-500);
    line-height: 1.85;
    margin: 0;
}

/* --- Closing Inspiration Band --- */
.emb-inspiration {
    padding: 5rem 0;
    background: linear-gradient(135deg, #1a0209 0%, var(--si-primary) 55%, #7a1038 100%);
    position: relative;
    overflow: hidden;
}
.emb-inspiration::before {
    content: '';
    position: absolute;
    top: -60px; right: -60px;
    width: 280px; height: 280px;
    background: radial-gradient(circle, rgba(245,158,11,.12) 0%, transparent 70%);
    border-radius: 50%;
    pointer-events: none;
}
.emb-inspiration-inner {
    display: flex;
    align-items: flex-start;
    gap: 2.5rem;
    flex-wrap: wrap;
}
.emb-inspiration-icon {
    width: 80px; height: 80px;
    background: var(--si-accent);
    color: #fff;
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-size: 2rem;
    flex-shrink: 0;
    box-shadow: 0 6px 24px rgba(245,158,11,.35);
}
.emb-inspiration-text { flex: 1; min-width: 240px; }
.emb-inspiration-text blockquote {
    border: none;
    background: none;
    padding: 0;
    margin: 0;
    font-size: 1rem;
    color: rgba(255,255,255,.88);
    line-height: 1.9;
}
.emb-inspiration-text blockquote > .bi {
    font-size: 1.8rem;
    color: var(--si-accent);
    display: block;
    margin-bottom: .5rem;
    opacity: .7;
}
.emb-inspiration-links {
    display: flex;
    gap: 12px;
    flex-wrap: wrap;
}

/* --- Responsive --- */
@media (max-width: 768px) {
    .emb-symbols-grid { grid-template-columns: 1fr; }
    .emb-inspiration-inner { flex-direction: column; gap: 1.5rem; }
    .emb-showcase { padding: 3.5rem 0; }
    .emb-symbols  { padding: 3.5rem 0; }
    .emb-inspiration { padding: 3.5rem 0; }
    .emb-img { width: 200px; }
}
}

/* =============================================================
   FOUNDER & ARCHITECT PAGE  (fa-*)
   ============================================================= */

/* ---- Key Dates Card ---- */
.fa-dates-card {
    background: #fff;
    border: 1px solid rgba(69,9,32,.12);
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(69,9,32,.07);
}
.fa-date-row {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: .85rem 1.25rem;
    border-bottom: 1px solid rgba(69,9,32,.08);
    transition: background .2s;
}
.fa-date-row:last-child { border-bottom: none; }
.fa-date-row:hover { background: rgba(69,9,32,.04); }
.fa-date-row i {
    font-size: 1.25rem;
    color: var(--si-primary);
    width: 1.75rem;
    text-align: center;
    flex-shrink: 0;
}
.fa-date-row div {
    display: flex;
    flex-direction: column;
    line-height: 1.3;
}
.fa-date-row strong {
    font-size: .78rem;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #555;
}
.fa-date-row span {
    font-size: .95rem;
    color: var(--si-primary);
    font-weight: 600;
}

/* ---- Vision Quote ---- */
.fa-vision-quote {
    position: relative;
    background: linear-gradient(135deg, rgba(69,9,32,.05) 0%, rgba(69,9,32,.02) 100%);
    border-left: 4px solid var(--si-primary);
    border-radius: 0 .75rem .75rem 0;
    padding: 1.5rem 2rem 1.5rem 3rem;
    margin-top: 1.5rem;
}
.fa-vision-mark {
    position: absolute;
    top: -.5rem;
    left: .75rem;
    font-size: 5rem;
    line-height: 1;
    color: var(--si-primary);
    opacity: .25;
    font-family: Georgia, serif;
    pointer-events: none;
}
.fa-vision-quote p {
    font-size: 1.15rem;
    font-style: italic;
    color: #2a2a2a;
    margin-bottom: .5rem;
    line-height: 1.7;
    font-weight: 500;
}
.fa-vision-attr {
    font-size: .85rem;
    color: var(--si-primary);
    font-weight: 600;
    letter-spacing: .04em;
}

/* ---- Legacy Pillars Section ---- */
.fa-pillars {
    padding: 5rem 0;
    background: linear-gradient(180deg, #f9f5f6 0%, #fff 100%);
}
.fa-pillars-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 2rem;
    margin-top: 2.5rem;
}
.fa-pillar-card {
    background: #fff;
    border-radius: 1rem;
    padding: 2.25rem 1.75rem;
    text-align: center;
    box-shadow: 0 6px 28px rgba(69,9,32,.09);
    border: 1px solid rgba(69,9,32,.08);
    transition: transform .25s, box-shadow .25s;
}
.fa-pillar-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 14px 40px rgba(69,9,32,.15);
}
.fa-pillar-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto 1.25rem;
    font-size: 1.6rem;
}
.fa-icon-vision  { background: rgba(69,9,32,.12);  color: var(--si-primary); }
.fa-icon-edu     { background: rgba(69,9,32,.20);  color: var(--si-primary); }
.fa-icon-builder { background: rgba(69,9,32,.10);  color: var(--si-primary); }
.fa-pillar-card h4 {
    font-size: 1.15rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: .75rem;
}
.fa-pillar-card p {
    font-size: .93rem;
    color: #555;
    line-height: 1.7;
    margin: 0;
}

/* ---- Biographical Narrative ---- */
.fa-narrative {
    padding: 5rem 0;
    background: #fff;
}

/* ---- Mini Timeline ---- */
.fa-mini-timeline {
    background: var(--si-primary);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(69,9,32,.25);
}
.fa-mini-header {
    background: rgba(0,0,0,.2);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    padding: 1rem 1.5rem;
}
.fa-mini-item {
    display: flex;
    gap: 1rem;
    padding: 1.1rem 1.5rem;
    border-bottom: 1px solid rgba(255,255,255,.12);
    transition: background .2s;
}
.fa-mini-item:last-child { border-bottom: none; }
.fa-mini-item:hover { background: rgba(255,255,255,.07); }
.fa-mini-year {
    font-size: .82rem;
    font-weight: 800;
    color: #f4c9d5;
    text-transform: uppercase;
    letter-spacing: .05em;
    white-space: nowrap;
    min-width: 4.5rem;
    padding-top: .15rem;
}
.fa-mini-content {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.fa-mini-content strong {
    color: #fff;
    font-size: .9rem;
}
.fa-mini-content span {
    color: rgba(255,255,255,.78);
    font-size: .83rem;
    line-height: 1.5;
}
.fa-mini-item--accent { background: rgba(255,255,255,.08); }
.fa-mini-item--accent .fa-mini-year { color: #ffd6e3; font-size: .75rem; }

/* ---- Tribute Band ---- */
.fa-tribute {
    padding: 5rem 0;
    background: linear-gradient(135deg, var(--si-primary) 0%, #6b0d28 100%);
}
.fa-tribute-inner {
    display: flex;
    gap: 2.5rem;
    align-items: flex-start;
    background: rgba(255,255,255,.06);
    border: 1px solid rgba(255,255,255,.15);
    border-radius: 1.25rem;
    padding: 3rem;
    backdrop-filter: blur(4px);
}
.fa-tribute-icon {
    flex-shrink: 0;
    width: 4.5rem;
    height: 4.5rem;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
    color: #ffd6e3;
    border: 2px solid rgba(255,255,255,.25);
}
.fa-tribute-text h3 {
    color: #fff;
    font-size: 1.65rem;
    font-weight: 800;
    margin-bottom: 1rem;
}
.fa-tribute-text p {
    color: rgba(255,255,255,.88);
    font-size: 1rem;
    line-height: 1.8;
    margin-bottom: .75rem;
}
.fa-tribute-text strong { color: #fff; }
.fa-tribute-footer {
    color: rgba(255,255,255,.7) !important;
    font-size: .9rem !important;
}
.fa-tribute-actions {
    display: flex;
    gap: 1rem;
    flex-wrap: wrap;
}

/* ---- Button variants used in tribute ---- */
.btn-si-outline-light {
    background: transparent;
    color: #fff;
    border: 2px solid rgba(255,255,255,.6);
    font-weight: 600;
    transition: all .25s;
}
.btn-si-outline-light:hover {
    background: rgba(255,255,255,.15);
    border-color: #fff;
    color: #fff;
}

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .fa-pillars-grid { grid-template-columns: 1fr; }
    .fa-tribute-inner { flex-direction: column; align-items: center; text-align: center; }
    .fa-tribute-actions { justify-content: center; }
}
@media (max-width: 767px) {
    .fa-pillars  { padding: 3.5rem 0; }
    .fa-narrative { padding: 3.5rem 0; }
    .fa-tribute  { padding: 3.5rem 0; }
    .fa-tribute-inner { padding: 2rem 1.5rem; }
    .fa-mini-item { flex-direction: column; gap: .3rem; }
    .fa-vision-quote { padding: 1.25rem 1.25rem 1.25rem 2rem; }
}

/* =============================================================
   ADMISSION PAGE  (adm-*)
   ============================================================= */

/* ---- Intro section ---- */
.adm-intro {
    padding: 5rem 0;
    background: #fff;
}
.adm-intro-stats {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
    flex-wrap: wrap;
}
.adm-stat {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: rgba(69,9,32,.05);
    border: 1px solid rgba(69,9,32,.12);
    border-radius: .75rem;
    padding: 1rem 1.5rem;
    min-width: 6rem;
    text-align: center;
}
.adm-stat-num {
    font-size: 1.9rem;
    font-weight: 800;
    color: var(--si-primary);
    line-height: 1;
}
.adm-stat-label {
    font-size: .75rem;
    color: #666;
    text-transform: uppercase;
    letter-spacing: .06em;
    margin-top: .25rem;
}

/* Highlight card */
.adm-highlight-card {
    background: #fff;
    border: 1px solid rgba(69,9,32,.12);
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 6px 28px rgba(69,9,32,.08);
}
.adm-highlight-header {
    background: var(--si-primary);
    color: #fff;
    font-weight: 700;
    font-size: .95rem;
    padding: 1rem 1.5rem;
    letter-spacing: .04em;
}
.adm-highlight-list {
    list-style: none;
    margin: 0;
    padding: .5rem 0;
}
.adm-highlight-list li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .7rem 1.5rem;
    border-bottom: 1px solid rgba(69,9,32,.06);
    font-size: .92rem;
    color: #333;
    line-height: 1.5;
    transition: background .2s;
}
.adm-highlight-list li:last-child { border-bottom: none; }
.adm-highlight-list li:hover { background: rgba(69,9,32,.03); }
.adm-highlight-list li i {
    color: var(--si-primary);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: .1rem;
}

/* ---- Courses section ---- */
.adm-courses {
    padding: 5rem 0;
    background: #f9f5f6;
}

/* Stream tab bar */
.adm-stream-tabs {
    display: flex;
    gap: .75rem;
    margin-bottom: 2rem;
    flex-wrap: wrap;
}
.adm-stream-tab {
    background: #fff;
    border: 2px solid rgba(69,9,32,.2);
    border-radius: 50px;
    padding: .55rem 1.5rem;
    font-size: .9rem;
    font-weight: 600;
    color: var(--si-primary);
    cursor: pointer;
    transition: all .25s;
}
.adm-stream-tab:hover {
    background: rgba(69,9,32,.06);
    border-color: var(--si-primary);
}
.adm-stream-tab.active {
    background: var(--si-primary);
    border-color: var(--si-primary);
    color: #fff;
}

/* Stream panels */
.adm-stream-panel { display: none; }
.adm-stream-panel.active { display: block; }

/* Stream intro row */
.adm-stream-intro {
    display: flex;
    align-items: flex-start;
    gap: 1.25rem;
    margin-bottom: 1.75rem;
    padding: 1.5rem;
    background: #fff;
    border-radius: .75rem;
    border: 1px solid rgba(69,9,32,.1);
}
.adm-stream-intro h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: .4rem;
}
.adm-stream-intro p {
    font-size: .92rem;
    color: #555;
    margin: 0;
    line-height: 1.6;
}
.adm-stream-icon {
    width: 3.5rem;
    height: 3.5rem;
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    flex-shrink: 0;
}
.adm-icon-science  { background: rgba(69,9,32,.1);  color: var(--si-primary); }
.adm-icon-commerce { background: rgba(180,83,9,.1);  color: #b45309; }
.adm-icon-arts     { background: rgba(26,2,9,.1);    color: #4a0015; }

/* Combo cards grid */
.adm-combos-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1.5rem;
}
.adm-combos-grid-3 {
    grid-template-columns: repeat(3, 1fr);
}
.adm-combo-card {
    background: #fff;
    border-radius: .875rem;
    padding: 1.5rem;
    border: 2px solid transparent;
    box-shadow: 0 4px 18px rgba(0,0,0,.07);
    display: flex;
    flex-direction: column;
    gap: 1rem;
    transition: transform .25s, box-shadow .25s;
}
.adm-combo-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 36px rgba(0,0,0,.12);
}
.adm-combo-science { border-top: 4px solid var(--si-primary); }
.adm-combo-commerce { border-top: 4px solid #b45309; }
.adm-combo-arts    { border-top: 4px solid #4a0015; }

.adm-combo-code {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    font-weight: 800;
    letter-spacing: .08em;
    padding: .4rem 1rem;
    border-radius: .5rem;
    align-self: flex-start;
}
.adm-combo-science .adm-combo-code  { background: rgba(69,9,32,.1);  color: var(--si-primary); }
.adm-combo-commerce .adm-combo-code { background: rgba(180,83,9,.1);  color: #b45309; }
.adm-combo-arts .adm-combo-code     { background: rgba(74,0,21,.1);   color: #4a0015; }

.adm-combo-subjects {
    display: flex;
    flex-direction: column;
    gap: .25rem;
    flex: 1;
}
.adm-subject {
    display: flex;
    align-items: center;
    font-size: .88rem;
    color: #333;
    line-height: 1.5;
}
.adm-subject i {
    color: var(--si-primary);
    font-size: 1.1rem;
    flex-shrink: 0;
}

.adm-combo-career {
    font-size: .78rem;
    color: #777;
    font-style: italic;
    padding: .4rem .75rem;
    background: rgba(69,9,32,.04);
    border-radius: .4rem;
    border-left: 3px solid var(--si-primary);
}
.adm-combo-commerce .adm-combo-career { border-left-color: #b45309; }
.adm-combo-arts .adm-combo-career     { border-left-color: #4a0015; }

.adm-combo-btn {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    font-size: .82rem;
    font-weight: 700;
    color: var(--si-primary);
    text-decoration: none;
    transition: gap .2s, color .2s;
}
.adm-combo-btn:hover { gap: .65rem; color: #6b0d28; }
.adm-combo-commerce .adm-combo-btn { color: #b45309; }
.adm-combo-commerce .adm-combo-btn:hover { color: #92400e; }
.adm-combo-arts .adm-combo-btn { color: #4a0015; }

/* ---- Admission Process ---- */
.adm-process {
    padding: 5rem 0;
    background: #fff;
}
.adm-steps-row {
    display: flex;
    align-items: flex-start;
    gap: 0;
    margin-top: 2.5rem;
    flex-wrap: wrap;
    justify-content: center;
}
.adm-step {
    flex: 1;
    min-width: 160px;
    max-width: 200px;
    text-align: center;
    padding: 0 .75rem;
}
.adm-step-num {
    font-size: .72rem;
    font-weight: 800;
    letter-spacing: .1em;
    color: var(--si-primary);
    text-transform: uppercase;
    margin-bottom: .5rem;
    opacity: .6;
}
.adm-step-icon {
    width: 4rem;
    height: 4rem;
    border-radius: 50%;
    background: rgba(69,9,32,.08);
    color: var(--si-primary);
    font-size: 1.5rem;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto .9rem;
    border: 2px solid rgba(69,9,32,.15);
    transition: background .25s;
}
.adm-step:hover .adm-step-icon {
    background: var(--si-primary);
    color: #fff;
}
.adm-step h5 {
    font-size: .92rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: .4rem;
}
.adm-step p {
    font-size: .8rem;
    color: #666;
    line-height: 1.6;
    margin: 0;
}
.adm-step-arrow {
    flex-shrink: 0;
    align-self: center;
    color: rgba(69,9,32,.3);
    font-size: 1.25rem;
    padding: 0 .25rem;
    padding-bottom: 2.5rem;
}

/* ---- Documents + Dates ---- */
.adm-docs {
    padding: 5rem 0;
    background: #f9f5f6;
}
.adm-doc-list {
    list-style: none;
    padding: 0;
    margin: 1.5rem 0 0;
    display: flex;
    flex-direction: column;
    gap: .6rem;
}
.adm-doc-list li {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    background: #fff;
    border: 1px solid rgba(69,9,32,.1);
    border-radius: .5rem;
    padding: .7rem 1rem;
    font-size: .9rem;
    color: #333;
    transition: background .2s;
}
.adm-doc-list li:hover { background: rgba(69,9,32,.03); }
.adm-doc-list li i {
    color: var(--si-primary);
    font-size: 1rem;
    flex-shrink: 0;
    margin-top: .1rem;
}

.adm-dates-card {
    background: #fff;
    border: 1px solid rgba(69,9,32,.12);
    border-radius: .875rem;
    overflow: hidden;
    box-shadow: 0 4px 18px rgba(69,9,32,.07);
}
.adm-date-row {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 1.25rem;
    border-bottom: 1px solid rgba(69,9,32,.08);
    transition: background .2s;
}
.adm-date-row:last-child { border-bottom: none; }
.adm-date-row:hover { background: rgba(69,9,32,.03); }
.adm-date-icon {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: .5rem;
    background: rgba(69,9,32,.08);
    color: var(--si-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 1rem;
}
.adm-date-info {
    display: flex;
    flex-direction: column;
    gap: .2rem;
}
.adm-date-info strong {
    font-size: .88rem;
    color: #1a1a1a;
    font-weight: 700;
}
.adm-date-info span {
    font-size: .82rem;
    color: #666;
    line-height: 1.5;
}

.adm-contact-box {
    display: flex;
    gap: 1rem;
    align-items: flex-start;
    background: var(--si-primary);
    border-radius: .875rem;
    padding: 1.25rem 1.5rem;
    color: #fff;
}
.adm-contact-icon {
    font-size: 1.5rem;
    flex-shrink: 0;
    opacity: .85;
    padding-top: .15rem;
}
.adm-contact-box strong {
    display: block;
    font-size: .95rem;
    margin-bottom: .3rem;
}
.adm-contact-box span {
    font-size: .85rem;
    opacity: .85;
    line-height: 1.5;
    display: block;
    margin-bottom: .5rem;
}
.adm-contact-link {
    font-size: .82rem;
    font-weight: 700;
    color: #ffd6e3;
    text-decoration: none;
    transition: color .2s;
}
.adm-contact-link:hover { color: #fff; }

/* ---- Responsive ---- */
@media (max-width: 991px) {
    .adm-combos-grid-3 { grid-template-columns: repeat(2, 1fr); }
    .adm-steps-row { gap: 1rem; }
    .adm-step-arrow { display: none; }
}
@media (max-width: 767px) {
    .adm-intro    { padding: 3.5rem 0; }
    .adm-courses  { padding: 3.5rem 0; }
    .adm-process  { padding: 3.5rem 0; }
    .adm-docs     { padding: 3.5rem 0; }
    .adm-combos-grid     { grid-template-columns: 1fr; }
    .adm-combos-grid-3   { grid-template-columns: 1fr; }
    .adm-stream-intro    { flex-direction: column; }
    .adm-intro-stats     { gap: 1rem; }
}

/* =============================================================
   CONTACT PAGE  (ct-*)
   ============================================================= */

/* ---- Intro ---- */
.ct-intro {
    padding: 4rem 0 0;
    background: #fff;
}

/* ---- Info Cards Grid ---- */
.ct-info {
    padding: 4rem 0 5rem;
    background: #fff;
}
.ct-info-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
}
.ct-info-card {
    background: #fff;
    border-radius: 1rem;
    padding: 1.75rem 1.5rem;
    box-shadow: 0 6px 28px rgba(69,9,32,.08);
    border: 1px solid rgba(69,9,32,.1);
    display: flex;
    flex-direction: column;
    gap: .75rem;
    transition: transform .25s, box-shadow .25s;
    position: relative;
    overflow: hidden;
}
.ct-info-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    background: linear-gradient(90deg, var(--si-primary), #6b0d28);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform .3s ease;
}
.ct-info-card:hover { transform: translateY(-6px); box-shadow: 0 14px 40px rgba(69,9,32,.16); }
.ct-info-card:hover::after { transform: scaleX(1); }

.ct-info-icon {
    width: 3rem;
    height: 3rem;
    border-radius: .75rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.4rem;
    flex-shrink: 0;
}
.ct-icon-address { background: rgba(69,9,32,.1);   color: var(--si-primary); }
.ct-icon-phone   { background: rgba(20,184,166,.1); color: #0d9488; }
.ct-icon-email   { background: rgba(34,197,94,.1);  color: #16a34a; }
.ct-icon-hours   { background: rgba(168,85,247,.1); color: #9333ea; }

.ct-info-card h3 {
    font-size: 1rem;
    font-weight: 700;
    color: #1a1a1a;
    margin: 0;
}
.ct-info-card p {
    font-size: .87rem;
    color: #555;
    margin: 0;
    line-height: 1.6;
}
.ct-info-link, .ct-phone-link, .ct-email-link {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    font-size: .83rem;
    font-weight: 600;
    color: var(--si-primary);
    text-decoration: none;
    transition: gap .2s, color .2s;
    margin-top: .25rem;
}
.ct-info-link:hover, .ct-phone-link:hover, .ct-email-link:hover {
    color: #6b0d28;
    gap: .5rem;
}
.ct-phone-link, .ct-email-link { display: block; margin-top: 0; }
.ct-small-text { font-size: .78rem; opacity: .7; }

/* ---- Form + Map Section ---- */
.ct-form-section {
    padding: 5rem 0;
    background: #f9f5f6;
}

/* Form card */
.ct-form-card {
    background: #fff;
    border-radius: 1rem;
    padding: 2.5rem;
    box-shadow: 0 8px 32px rgba(69,9,32,.09);
    border: 1px solid rgba(69,9,32,.1);
    height: 100%;
}
.ct-form-title {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--si-primary);
    margin-bottom: 1.75rem;
    padding-bottom: 1rem;
    border-bottom: 2px solid rgba(69,9,32,.1);
    display: flex;
    align-items: center;
}
.ct-form { display: flex; flex-direction: column; gap: 1.1rem; }
.ct-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.ct-form-group { display: flex; flex-direction: column; gap: .3rem; }
.ct-form-label {
    font-size: .78rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: .06em;
    color: #444;
}
.ct-form-input {
    background: #fdfbfb;
    border: 1.5px solid #e0d0d3;
    border-radius: .5rem;
    padding: .7rem 1rem;
    font-size: .9rem;
    color: #333;
    font-family: inherit;
    transition: border-color .2s, box-shadow .2s;
    width: 100%;
}
.ct-form-input:focus {
    outline: none;
    border-color: var(--si-primary);
    box-shadow: 0 0 0 3px rgba(69,9,32,.1);
    background: #fff;
}
.ct-form-textarea { resize: vertical; min-height: 130px; }
.ct-form-btn {
    background: linear-gradient(135deg, var(--si-primary), #6b0d28);
    color: #fff;
    border: none;
    border-radius: .6rem;
    padding: .85rem 2rem;
    font-size: .95rem;
    font-weight: 700;
    cursor: pointer;
    transition: all .25s;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    letter-spacing: .03em;
    align-self: flex-start;
    margin-top: .25rem;
}
.ct-form-btn:hover {
    box-shadow: 0 8px 24px rgba(69,9,32,.3);
    transform: translateY(-2px);
}

/* Map + side info */
.ct-map-container {
    border-radius: 1rem;
    overflow: hidden;
    box-shadow: 0 8px 32px rgba(69,9,32,.12);
    height: 340px;
}
.ct-map-iframe { width: 100%; height: 100%; border: none; display: block; }

.ct-side-info {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    margin-top: 1.25rem;
}
.ct-quick-info {
    background: #fff;
    border: 1px solid rgba(69,9,32,.1);
    border-radius: .875rem;
    padding: 1.25rem 1.5rem;
    box-shadow: 0 4px 16px rgba(69,9,32,.06);
    flex: 1;
}
.ct-quick-info h4 {
    font-size: .9rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: .75rem;
}
.ct-quick-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: .45rem;
}
.ct-quick-list li {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: .84rem;
    color: #555;
    line-height: 1.5;
}
.ct-quick-list li i { color: var(--si-primary); font-size: .95rem; flex-shrink: 0; margin-top: .1rem; }

/* Social row */
.ct-social {
    background: var(--si-primary);
    border-radius: .875rem;
    padding: 1.25rem 1.5rem;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    flex-wrap: wrap;
}
.ct-social-label {
    font-size: .88rem;
    font-weight: 700;
    color: #fff;
    opacity: .9;
}
.ct-social-links { display: flex; gap: .6rem; }
.ct-social-link {
    width: 2.25rem;
    height: 2.25rem;
    border-radius: 50%;
    background: rgba(255,255,255,.15);
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    font-size: 1rem;
    border: 1px solid rgba(255,255,255,.25);
    transition: all .2s;
}
.ct-social-link:hover {
    background: rgba(255,255,255,.3);
    color: #fff;
    transform: scale(1.15);
}

/* ---- Department Contacts ---- */
.ct-departments { padding: 5rem 0; background: #fff; }
.ct-dept-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1.5rem;
    margin-top: 2.5rem;
}
.ct-dept-card {
    background: #fff;
    border-radius: .875rem;
    padding: 1.75rem 1.5rem;
    border: 1.5px solid rgba(69,9,32,.1);
    box-shadow: 0 4px 16px rgba(69,9,32,.06);
    text-align: center;
    transition: all .25s;
}
.ct-dept-card:hover {
    border-color: var(--si-primary);
    box-shadow: 0 8px 28px rgba(69,9,32,.15);
    transform: translateY(-4px);
}
.ct-dept-icon {
    width: 3rem;
    height: 3rem;
    border-radius: 50%;
    background: rgba(69,9,32,.08);
    color: var(--si-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.35rem;
    margin: 0 auto .9rem;
    transition: all .25s;
}
.ct-dept-card:hover .ct-dept-icon {
    background: var(--si-primary);
    color: #fff;
}
.ct-dept-card h4 {
    font-size: .98rem;
    font-weight: 700;
    color: #1a1a1a;
    margin-bottom: .4rem;
}
.ct-dept-email { margin-bottom: .4rem; }
.ct-dept-email a {
    font-size: .8rem;
    font-weight: 600;
    color: var(--si-primary);
    text-decoration: none;
    word-break: break-all;
}
.ct-dept-desc {
    font-size: .8rem;
    color: #777;
    margin: 0;
    line-height: 1.5;
}

/* ---- FAQ Accordion ---- */
.ct-faq { padding: 5rem 0; background: #f9f5f6; }
.ct-faq-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 1rem;
    margin-top: 2.5rem;
    align-items: start;
}
.ct-faq-item {
    background: #fff;
    border: 1px solid rgba(69,9,32,.1);
    border-radius: .75rem;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(69,9,32,.05);
}
.ct-faq-toggle {
    width: 100%;
    background: none;
    border: none;
    padding: 1.1rem 1.4rem;
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1rem;
    cursor: pointer;
    transition: background .2s;
}
.ct-faq-toggle:hover { background: rgba(69,9,32,.03); }
.ct-faq-toggle.ct-faq-open { background: rgba(69,9,32,.04); }
.ct-faq-q {
    font-size: .92rem;
    font-weight: 600;
    color: #1a1a1a;
    line-height: 1.4;
}
.ct-faq-toggle.ct-faq-open .ct-faq-q { color: var(--si-primary); }
.ct-faq-chevron {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: rgba(69,9,32,.08);
    color: var(--si-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: .85rem;
    transition: transform .25s, background .2s;
}
.ct-faq-toggle.ct-faq-open .ct-faq-chevron {
    transform: rotate(180deg);
    background: var(--si-primary);
    color: #fff;
}
.ct-faq-body {
    display: none;
    padding: 0 1.4rem 1.1rem;
    font-size: .88rem;
    color: #555;
    line-height: 1.8;
    border-top: 1px solid rgba(69,9,32,.08);
}
.ct-faq-body p { margin: 0; padding-top: .9rem; }

/* ---- Responsive ---- */
@media (max-width: 1199px) {
    .ct-info-grid  { grid-template-columns: repeat(2, 1fr); }
    .ct-dept-grid  { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 767px) {
    .ct-intro { padding: 2.5rem 0 0; }
    .ct-info { padding: 3rem 0; }
    .ct-form-section { padding: 3.5rem 0; }
    .ct-departments { padding: 3.5rem 0; }
    .ct-faq { padding: 3.5rem 0; }
    .ct-info-grid { grid-template-columns: 1fr; }
    .ct-dept-grid { grid-template-columns: 1fr; }
    .ct-faq-grid  { grid-template-columns: 1fr; }
    .ct-form-card { padding: 1.5rem; }
    .ct-form-row  { grid-template-columns: 1fr; }
    .ct-map-container { height: 260px; }
    .ct-social { justify-content: center; }
}