/* ==========================================
        1. ROOT VARIABLES
        ========================================== */
        :root {
            --color-gold: #ffe81a;
            --color-gold-soft: #f1cf85;
            --color-gold-dark: #e8b84e;
            --color-red: #ed0008;
            --color-red-dark: #8f0008;
            --color-charcoal: #333132;
            --color-ink: #06100a;
            --color-white: #fff;
            --color-body: #fffaf0;

            --herosl-serif: "Playfair Display", Georgia, serif;
            --herosl-sans: "Poppins", system-ui, sans-serif;
            --herosl-script: "Yellowtail", "Brush Script MT", cursive;
            --nav-serif: "Lora", Georgia, "Times New Roman", serif;
            --nav-sans: "Segoe UI", system-ui, -apple-system, sans-serif;

            --herosl-w: clamp(280px, 22vw, 380px);
            --herosl-h: clamp(320px, 40vh, 400px);
            --herosl-sw: min(58vw, 1020px);
            --nav-img: url("../images/navrudra.webp");
            --nav-ease: cubic-bezier(0.2, 0.8, 0.2, 1);
            --ban1-w: min(800px, 92vw);

            font-family: var(--nav-sans);
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: var(--herosl-sans);
            background: linear-gradient(135deg, #fef9ec8c 0%, #f8eedbbf 100%);
            background-image:
                linear-gradient(135deg, #fef9eccc 0%, #f8eedbc9 100%),
                url("../images/bgrudra.webp");
            background-repeat: repeat-y;
            background-size: 100% auto;
            background-attachment: scroll;
            overflow-x: hidden;
        }

        /* ==========================================
        2. HERO
        ========================================== */
        .herosl-section {
            position: relative;
            min-height: 100vh;
            min-height: 100svh;
            overflow: hidden;
            isolation: isolate;
            background: #0b1a10;
            padding-top: 130px;
        }

        .herosl-video {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: -3;
        }

        .herosl-section::before {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -2;
            background:
                linear-gradient(90deg,
                    rgba(3, 10, 6, 0.82) 0%,
                    rgba(3, 10, 6, 0.55) 32%,
                    rgba(3, 10, 6, 0.1) 62%,
                    rgba(3, 10, 6, 0.25) 100%),
                linear-gradient(0deg, rgba(3, 10, 6, 0.75) 0%, rgba(3, 10, 6, 0) 38%);
        }

        .herosl-section::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: -1;
            pointer-events: none;
            background: radial-gradient(60% 50% at 80% 0%,
                    rgba(255, 190, 110, 0.28),
                    transparent 70%);
        }

        .herosl-copy {
            position: absolute;
            left: clamp(24px, 6vw, 108px);
            top: 55%;
            transform: translateY(-50%);
            max-width: 620px;
            z-index: 4;
        }

        .herosl-eyebrow {
            display: flex;
            align-items: center;
            gap: clamp(12px, 1.3vw, 20px);
            font-weight: 500;
            font-size: clamp(12px, 1.05vw, 16px);
            letter-spacing: 0.42em;
            text-transform: uppercase;
            color: var(--color-white);
            text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5);
        }

        .herosl-eyebrow::before {
            content: "";
            width: clamp(28px, 3vw, 48px);
            height: 1.5px;
            background: linear-gradient(90deg, transparent, var(--color-gold-dark));
            transform-origin: left;
        }

        .herosl-eyebrow i {
            width: 6px;
            height: 6px;
            flex: none;
            background: var(--color-gold-dark);
            transform: rotate(45deg);
            box-shadow: 0 0 10px rgba(232, 184, 78, 0.8);
        }

        .herosl-eyebrow span:last-child {
            margin-right: -0.42em;
        }

        .herosl-title {
            font-family: var(--herosl-serif);
            font-weight: 700;
            font-size: clamp(44px, 5.4vw, 86px);
            line-height: 1.08;
            margin-top: 22px;
            letter-spacing: -0.005em;
            color: #fff;
        }

        .herosl-title em {
            display: block;
            font-family: var(--herosl-script);
            font-style: normal;
            font-weight: 400;
            color: var(--color-gold-dark);
            font-size: clamp(90px, 12vw, 190px);
            line-height: 0.85;
            margin: -6px 0 0 14px;
            position: relative;
            transform: rotate(-4deg);
            transform-origin: left bottom;
            text-shadow: 0 4px 24px rgba(0, 0, 0, 0.35);
        }

        .herosl-title em::after {
            content: "";
            position: absolute;
            left: 4%;
            right: -14%;
            bottom: -2px;
            height: 5px;
            border-radius: 50%;
            background: linear-gradient(90deg,
                    transparent,
                    var(--color-gold-dark) 30%,
                    var(--color-gold-soft));
            transform: rotate(-2deg);
            opacity: 0.9;
        }

        .herosl-lead {
            font-size: clamp(16px, 1.3vw, 21px);
            line-height: 1.45;
            max-width: 340px;
            margin-top: 20px;
            font-weight: 400;
            color: #fff;
        }

        /* slider */
        .herosl-slider {
            position: absolute;
            right: 0;
            top: calc(50% - var(--herosl-h) / 2 + 36px);
            width: var(--herosl-sw);
            height: var(--herosl-h);
            z-index: 4;
            perspective: 1600px;
        }

        .herosl-track {
            position: relative;
            width: 100%;
            height: 100%;
            transform-style: preserve-3d;
        }

        .herosl-card {
            position: absolute;
            top: 0;
            left: 50%;
            width: var(--herosl-w);
            height: 100%;
            margin-left: calc(var(--herosl-w) / -2);
            border-radius: 26px;
            overflow: hidden;
            cursor: pointer;
            border: 0;
            padding: 0;
            text-align: left;
            color: var(--color-white);
            background: linear-gradient(135deg, #1c4a2a, #0d2416);
            box-shadow: 0 26px 60px rgba(0, 0, 0, 0.5);
            transition:
                transform 0.8s cubic-bezier(0.22, 0.8, 0.25, 1),
                opacity 0.6s,
                filter 0.6s;
            opacity: 0;
            pointer-events: none;
            will-change: transform;
        }

        .herosl-card:nth-child(2) {
            background: linear-gradient(135deg, #2c3f6e, #101a36);
        }

        .herosl-card:nth-child(3) {
            background: linear-gradient(135deg, #3c6b3a, #12301a);
        }

        .herosl-card:nth-child(4) {
            background: linear-gradient(135deg, #7a4a2a, #2b1709);
        }

        .herosl-card:nth-child(5) {
            background: linear-gradient(135deg, #5a3a6e, #1c1030);
        }

        .herosl-card::before {
            content: "";
            position: absolute;
            inset: 0;
            border-radius: inherit;
            z-index: 3;
            pointer-events: none;
            box-shadow:
                inset 0 0 0 4px rgba(255, 255, 255, 0.18),
                inset 0 0 0 5px rgba(255, 255, 255, 0.32);
        }

        .herosl-card img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
            display: block;
            transition: transform 1.2s;
        }

        .herosl-card::after {
            content: "";
            position: absolute;
            inset: 0;
            z-index: 1;
            background: linear-gradient(0deg,
                    rgba(0, 0, 0, 0.9) 0%,
                    rgba(0, 0, 0, 0.5) 36%,
                    rgba(0, 0, 0, 0) 66%);
        }

        .herosl-card-body {
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            padding: 0 84px 26px 26px;
            z-index: 2;
        }

        .herosl-card-title {
            font-family: var(--herosl-serif);
            font-style: italic;
            font-weight: 600;
            font-size: clamp(24px, 2.3vw, 36px);
            line-height: 1.1;
            display: block;
        }

        .herosl-card-sub {
            display: block;
            font-size: 14px;
            line-height: 1.4;
            margin-top: 12px;
            font-weight: 500;
            opacity: 0;
            max-height: 0;
            overflow: hidden;
            transition: opacity 0.5s 0.2s;
        }

        .herosl-card-go {
            position: absolute;
            right: 24px;
            bottom: 26px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            background: var(--color-white);
            color: #111;
            display: grid;
            place-items: center;
            z-index: 2;
            opacity: 0;
            transform: scale(0.6);
            transition:
                opacity 0.4s 0.25s,
                transform 0.4s 0.25s;
        }

        .herosl-card[data-pos="0"] {
            opacity: 1;
            pointer-events: auto;
            z-index: 5;
            transform: translateX(0) scale(1);
        }

        .herosl-card[data-pos="0"] .herosl-card-sub {
            opacity: 1;
            max-height: 60px;
        }

        .herosl-card[data-pos="0"] .herosl-card-go {
            opacity: 1;
            transform: none;
        }

        .herosl-card[data-pos="0"] img {
            transform: scale(1.04);
        }

        .herosl-card[data-pos="-1"] {
            opacity: 1;
            pointer-events: auto;
            z-index: 3;
            transform: translateX(calc(var(--herosl-w) * -0.9)) translateZ(-140px) scale(0.86) rotateY(26deg);
            filter: brightness(0.75);
        }

        .herosl-card[data-pos="1"] {
            opacity: 1;
            pointer-events: auto;
            z-index: 3;
            transform: translateX(calc(var(--herosl-w) * 0.9)) translateZ(-140px) scale(0.86) rotateY(-26deg);
            filter: brightness(0.75);
        }

        .herosl-card[data-pos="-1"] .herosl-card-title,
        .herosl-card[data-pos="1"] .herosl-card-title {
            font-size: clamp(18px, 1.6vw, 26px);
        }

        .herosl-card[data-pos="-1"] .herosl-card-body,
        .herosl-card[data-pos="1"] .herosl-card-body {
            padding-right: 20px;
        }

        .herosl-card[data-pos="-2"] {
            opacity: 0;
            transform: translateX(calc(var(--herosl-w) * -1.4)) translateZ(-300px) scale(0.6);
        }

        .herosl-card[data-pos="2"] {
            opacity: 0;
            transform: translateX(calc(var(--herosl-w) * 1.4)) translateZ(-300px) scale(0.6);
        }

        /* arrows */
        .herosl-arrow {
            position: absolute;
            top: 55%;
            margin-top: -25px;
            width: 50px;
            height: 50px;
            border-radius: 50%;
            border: 1.5px solid rgba(255, 255, 255, 0.6);
            background: rgba(0, 0, 0, 0.18);
            backdrop-filter: blur(6px);
            color: var(--color-white);
            display: grid;
            place-items: center;
            cursor: pointer;
            z-index: 8;
            transition:
                background 0.25s,
                border-color 0.25s;
        }

        .herosl-arrow:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: var(--color-white);
        }

        .herosl-arrow-prev {
            left: calc(100% - var(--herosl-sw) + clamp(14px, 2vw, 36px));
            margin-top: 0;
        }

        .herosl-arrow-next {
            right: clamp(14px, 2vw, 36px);
        }

        /* dots */
        .herosl-dots {
            position: absolute;
            top: calc(50% + var(--herosl-h) / 2 + 4px);
            right: 0;
            width: var(--herosl-sw);
            display: flex;
            gap: 16px;
            justify-content: center;
            z-index: 6;
        }

        .herosl-dot {
            width: 11px;
            height: 11px;
            border-radius: 50%;
            border: 1.5px solid rgba(255, 255, 255, 0.55);
            background: transparent;
            cursor: pointer;
            padding: 0;
            transition: all 0.3s;
        }

        .herosl-dot[aria-current="true"] {
            background: var(--color-gold-dark);
            border-color: var(--color-gold-dark);
            transform: scale(1.15);
        }

        /* features */
        .herosl-features {
            position: absolute;
            right: clamp(24px, 5vw, 90px);
            bottom: clamp(30px, 6vh, 60px);
            display: flex;
            z-index: 5;
            list-style: none;
        }

        .herosl-feature {
            width: clamp(120px, 11.4vw, 200px);
            text-align: center;
            padding: 0 10px;
            position: relative;
            font-weight: 500;
            font-size: clamp(12px, 0.95vw, 15px);
            line-height: 1.3;
            color: #fff;
        }

        .herosl-feature+.herosl-feature::before {
            content: "";
            position: absolute;
            left: 0;
            top: 8px;
            height: 48px;
            width: 1px;
            background: rgba(255, 255, 255, 0.35);
        }

        .herosl-feature svg {
            display: block;
            margin: 0 auto 12px;
            width: 54px;
            height: 54px;
            padding: 13px;
            border-radius: 50%;
            border: 1px solid rgba(232, 184, 78, 0.8);
            background: rgba(0, 0, 0, 0.28);
            backdrop-filter: blur(4px);
            color: var(--color-gold-dark);
            fill: none;
            stroke: currentColor;
            stroke-width: 1.5;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        /* ==========================================
        3. NAVBAR
        ========================================== */
        .nav-icon {
            width: 1em;
            height: 1em;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            stroke-linecap: round;
            stroke-linejoin: round;
            flex: none;
        }

        .nav-container {
            width: 100%;
            max-width: 1200px;
            margin: 0 auto;
            padding: 0 15px;
        }

        .nav-wrap {
            position: fixed;
            top: 12px;
            left: 50%;
            z-index: 2000;
            width: min(960px, calc(100% - 20px));
            transform: translateX(-50%);
            filter: drop-shadow(0 8px 10px rgba(120, 0, 6, 0.3));
        }

        .nav-bar {
            position: relative;
            height: 102px;
        }

        .nav-bar::before {
            content: "";
            position: absolute;
            inset: 0;
            pointer-events: none;
            border-style: solid;
            border-width: 0 60px 0 432px;
            border-image-source: var(--nav-img);
            border-image-slice: 0 116 0 830 fill;
        }

        .nav-crest-link {
            position: absolute;
            left: 0;
            top: 0;
            width: 146px;
            height: 100%;
            z-index: 4;
            display: block;
        }

        .nav-crest-logo {
            position: absolute;
            left: 33px;
            top: 1px;
            width: 102px;
            height: auto;
            pointer-events: none;
            filter: drop-shadow(0 3px 4px rgba(60, 0, 4, 0.35));
        }

        .nav-brand {
            position: absolute;
            z-index: 4;
            left: 154px;
            top: 48.5%;
            transform: translateY(-50%);
            text-decoration: none;
            line-height: 1.1;
            white-space: nowrap;
            color: var(--color-white);
            font-family: var(--nav-serif);
        }

        .nav-brand b {
            display: block;
            font: 700 28px var(--nav-serif);
            letter-spacing: 0.01em;
            text-transform: uppercase;
            text-shadow: 0 2px 4px rgba(60, 0, 4, 0.45);
        }

        .nav-brand small {
            display: block;
            margin-top: 5px;
            color: #fff4d6;
            font: 600 10px var(--nav-serif);
            letter-spacing: 0.06em;
            text-transform: uppercase;
        }

        .nav-brand em {
            display: block;
            margin-top: 5px;
            font: italic 500 15px var(--nav-serif);
            color: rgba(255, 255, 255, 0.92);
        }

        .nav-right {
            position: absolute;
            z-index: 4;
            right: 48px;
            top: 52%;
            transform: translateY(-50%);
            display: flex;
            align-items: center;
            gap: 14px;
            color: var(--color-white);
        }

        .nav-sep {
            width: 1px;
            height: 42px;
            flex: none;
            background: linear-gradient(180deg,
                    transparent,
                    rgba(255, 232, 26, 0.85) 50%,
                    transparent);
        }

        .nav-contacts {
            display: flex;
            flex-direction: column;
            gap: 9px;
        }

        .nav-contact {
            display: flex;
            align-items: center;
            gap: 8px;
            color: var(--color-white);
            text-decoration: none;
            font: 500 0.76rem var(--nav-sans);
            white-space: nowrap;
            transition: color 0.2s;
        }

        .nav-cic {
            width: 16px;
            font-size: 0.85rem;
            display: grid;
            place-items: center;
        }

        .nav-contact:hover {
            color: var(--color-gold);
        }

        .nav-affil {
            display: flex;
            align-items: center;
            gap: 9px;
            padding: 7px 13px 7px 10px;
            border: 1.3px solid rgba(255, 232, 26, 0.8);
            border-radius: 12px;
            background: rgba(60, 0, 4, 0.18);
            white-space: nowrap;
            line-height: 1.1;
        }

        .nav-affil svg {
            font-size: 1.5rem;
            color: var(--color-gold);
            stroke-width: 2.2;
        }

        .nav-affil small {
            display: block;
            font: 500 0.58rem var(--nav-sans);
            color: rgba(255, 255, 255, 0.95);
        }

        .nav-affil b {
            display: block;
            margin-top: 3px;
            font: 800 0.8rem var(--nav-sans);
            letter-spacing: 0.02em;
            color: var(--color-gold);
        }

        .nav-menu-btn {
            display: inline-flex;
            align-items: center;
            gap: 11px;
            height: 42px;
            padding: 0 19px;
            cursor: pointer;
            border: 1.5px solid var(--color-gold);
            border-radius: 14px;
            background: linear-gradient(180deg, #a30009, #6a0006);
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.35);
            color: var(--color-white);
            font: 700 0.92rem var(--nav-sans);
            transition:
                transform 0.25s var(--nav-ease),
                background 0.25s,
                color 0.25s,
                box-shadow 0.3s;
        }

        .nav-menu-btn:hover {
            transform: translateY(-2px);
            background: var(--color-gold);
            color: var(--color-red-dark);
        }

        .nav-burger {
            width: 20px;
            height: 14px;
            display: grid;
            align-content: space-between;
        }

        .nav-burger i {
            display: block;
            height: 2.5px;
            border-radius: 2px;
            background: currentColor;
            transition:
                transform 0.35s var(--nav-ease),
                opacity 0.2s;
        }

        .nav-menu-btn[aria-expanded="true"] {
            background: var(--color-gold);
            color: var(--color-red-dark);
            box-shadow: 0 0 0 3px rgba(255, 232, 26, 0.3);
        }

        .nav-menu-btn[aria-expanded="true"] .nav-burger i:nth-child(1) {
            transform: translateY(5.75px) rotate(45deg);
        }

        .nav-menu-btn[aria-expanded="true"] .nav-burger i:nth-child(2) {
            opacity: 0;
        }

        .nav-menu-btn[aria-expanded="true"] .nav-burger i:nth-child(3) {
            transform: translateY(-5.75px) rotate(-45deg);
        }

        /* fullscreen overlay menu */
        .nav-fullscreen-menu {
            position: fixed;
            inset: 0;
            overflow-y: auto;
            overflow-x: hidden;
            background: var(--color-body);
            opacity: 0;
            visibility: hidden;
            pointer-events: none;
            transition: all 0.4s cubic-bezier(0.77, 0, 0.175, 1);
            z-index: 1500;
            padding: 140px 0 40px;
        }

        .nav-fullscreen-menu.nav-show {
            opacity: 1;
            visibility: visible;
            pointer-events: auto;
        }

        .nav-menu-grid {
            display: grid;
            grid-template-columns: repeat(4, 1fr);
            gap: 25px;
        }

        .nav-fullscreen-menu ul,
        .nav-fullscreen-menu li {
            list-style: none;
        }

        .nav-menu-title {
            display: block;
            margin-bottom: 12px;
            padding-bottom: 8px;
            font-weight: 700;
            font-size: 1.15rem;
            color: var(--color-red-dark);
            text-decoration: none;
            border-bottom: 2px solid rgba(224, 178, 74, 0.5);
            transition: color 0.3s;
        }

        .nav-menu-title:hover {
            color: var(--color-charcoal);
        }

        .nav-dropdown-item {
            position: relative;
            display: block;
            padding: 7px 0 7px 18px;
            color: #333;
            text-decoration: none;
            font-size: 0.95rem;
            font-weight: 500;
            transition: all 0.3s ease;
        }

        .nav-dropdown-item::before {
            content: "";
            position: absolute;
            left: 0;
            top: 14px;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background: var(--color-gold);
            transition: transform 0.3s;
        }

        .nav-dropdown-item:hover {
            color: var(--color-red-dark);
            padding-left: 22px;
        }

        .nav-dropdown-item:hover::before {
            transform: scale(1.3);
            background: var(--color-red-dark);
        }

        .nav-admission-card {
            position: relative;
            overflow: hidden;
            width: 100%;
            padding: 30px 20px;
            text-align: center;
            background: linear-gradient(140deg,
                    var(--color-red),
                    var(--color-red-dark));
            border: 1px solid rgba(224, 178, 74, 0.6);
            border-radius: 20px;
            box-shadow: 0 15px 35px rgba(74, 7, 14, 0.25);
        }

        .nav-admission-card::before {
            content: "";
            position: absolute;
            top: -50px;
            right: -50px;
            width: 120px;
            height: 120px;
            border-radius: 50%;
            background: rgba(224, 178, 74, 0.12);
        }

        .nav-admission-card h2 {
            font: 800 1.5rem var(--nav-serif);
            color: var(--color-gold);
            margin-bottom: 6px;
        }

        .nav-enroll-now {
            display: inline-block;
            margin-top: 10px;
            padding: 8px 18px;
            background: var(--color-gold);
            color: var(--color-red-dark);
            font-weight: 700;
            border-radius: 50px;
            text-decoration: none;
            transition: 0.3s;
        }

        .nav-enroll-now:hover {
            background: var(--color-white);
        }

        .nav-fullscreen-social {
            display: flex;
            justify-content: center;
            gap: 15px;
            margin: 20px 0 10px;
        }

        .nav-fullscreen-social li {
            width: 40px;
            height: 40px;
            display: flex;
            justify-content: center;
            align-items: center;
            border-radius: 50%;
            background: var(--color-white);
            cursor: pointer;
            border: 1px solid rgba(107, 12, 23, 0.15);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.03);
            transition: 0.3s ease;
        }

        .nav-fullscreen-social li a {
            color: var(--color-red-dark);
            font-size: 15px;
            transition: 0.3s;
        }

        .nav-fullscreen-social li:hover {
            background: var(--color-red-dark);
            border-color: var(--color-red-dark);
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(107, 12, 23, 0.2);
        }

        .nav-fullscreen-social li:hover a {
            color: var(--color-gold);
        }

        .nav-fullscreen-contact {
            color: #444;
            font-size: 13.5px;
            line-height: 1.6;
            font-weight: 500;
        }

        .nav-fullscreen-contact i {
            color: var(--color-gold);
            font-size: 15px;
            margin-right: 6px;
        }

        .nav-fullscreen-copyright {
            color: #666;
            font-size: 12.5px;
            text-align: center;
            border-top: 1px solid rgba(107, 12, 23, 0.1);
            padding-top: 15px;
            margin-top: 20px;
        }

        /* menu layout helpers */
        .nav-row {
            display: flex;
            flex-wrap: wrap;
            margin: 0 -15px;
        }

        .nav-align-items-start {
            align-items: flex-start;
        }

        .nav-justify-content-between {
            justify-content: space-between;
        }

        .nav-text-center {
            text-align: center;
        }

        .nav-text-white {
            color: var(--color-white);
        }

        .nav-fw-bold {
            font-weight: 700;
        }

        .nav-mb-1 {
            margin-bottom: 0.25rem;
        }

        .nav-mb-3 {
            margin-bottom: 1rem;
        }

        .nav-mt-1 {
            margin-top: 0.25rem;
        }

        .nav-mt-2 {
            margin-top: 0.5rem;
        }

        .nav-opacity-75 {
            opacity: 0.75;
        }

        .nav-d-none {
            display: none;
        }

        .nav-col-12 {
            flex: 0 0 100%;
            max-width: 100%;
        }

        .nav-px-0 {
            padding-left: 0;
            padding-right: 0;
        }

        @media (min-width: 768px) {
            .nav-text-md-end {
                text-align: right;
            }

            .nav-col-md-7 {
                flex: 0 0 58.333333%;
                max-width: 58.333333%;
            }

            .nav-col-md-5 {
                flex: 0 0 41.666667%;
                max-width: 41.666667%;
            }

            .nav-px-md-3 {
                padding-left: 1rem;
                padding-right: 1rem;
            }
        }

        @media (min-width: 992px) {
            .nav-d-lg-block {
                display: block;
            }

            .nav-col-lg-8 {
                flex: 0 0 66.666667%;
                max-width: 66.666667%;
            }

            .nav-col-lg-4 {
                flex: 0 0 33.333333%;
                max-width: 33.333333%;
            }
        }

        @media (min-width: 1200px) {
            .nav-col-xl-3 {
                flex: 0 0 25%;
                max-width: 25%;
            }
        }

        .nav-wrap :focus-visible,
        .nav-fullscreen-menu :focus-visible {
            outline: 2px solid var(--color-gold);
            outline-offset: 2px;
        }

        /* ==========================================
        4. HERO / NAV RESPONSIVE
        ========================================== */
        @media (max-width: 1200px) {
            .nav-menu-grid {
                grid-template-columns: repeat(2, 1fr);
                gap: 20px;
            }
        }

        @media (max-width: 1100px) {
            .herosl-section {
                min-height: auto;
                padding: 120px 0 40px;
                --herosl-sw: 100%;
                --herosl-w: min(300px, 70vw);
                --herosl-h: 340px;
            }

            .herosl-copy {
                position: relative;
                left: auto;
                top: auto;
                transform: none;
                padding: 0 24px;
            }

            .herosl-slider {
                position: relative;
                right: auto;
                top: auto;
                margin-top: 60px;
                transform: none;
            }

            .herosl-card[data-pos="-1"] {
                transform: translateX(calc(var(--herosl-w) * -0.78)) translateZ(-140px) scale(0.84) rotateY(26deg);
            }

            .herosl-card[data-pos="1"] {
                transform: translateX(calc(var(--herosl-w) * 0.78)) translateZ(-140px) scale(0.84) rotateY(-26deg);
            }

            .herosl-dots {
                position: relative;
                right: auto;
                top: auto;
                justify-content: center;
                margin-top: 22px;
            }

            .herosl-features {
                position: relative;
                right: auto;
                bottom: auto;
                margin: 34px 12px 0;
                justify-content: center;
                flex-wrap: wrap;
                row-gap: 22px;
            }

            .herosl-arrow {
                top: auto;
                bottom: -6px;
            }
        }

        @media (max-width: 1000px) {

            .nav-affil,
            .nav-sep {
                display: none;
            }
        }

        @media (max-width: 820px) {
            .nav-bar {
                height: 86px;
            }

            .nav-bar::before {
                border-width: 0 51px 0 364px;
            }

            .nav-crest-link {
                width: 123px;
            }

            .nav-crest-logo {
                left: 36px;
                top: 1px;
                width: 86px;
            }

            .nav-brand {
                left: 131px;
            }

            .nav-brand b {
                font-size: 24px;
            }

            .nav-brand small {
                margin-top: 4px;
                font-size: 9px;
            }

            .nav-brand em {
                margin-top: 4px;
                font-size: 13px;
            }

            .nav-right {
                right: 41px;
            }

            .nav-contacts {
                display: none;
            }
        }

        @media (max-width: 576px) {
            .nav-menu-grid {
                grid-template-columns: 1fr;
            }
        }

        @media (max-width: 560px) {
            .herosl-arrow {
                display: none;
            }

            .herosl-feature {
                width: 50%;
            }

            .herosl-feature:nth-child(3)::before {
                display: none;
            }

            .nav-wrap {
                top: 8px;
            }

            .nav-bar {
                height: 67px;
            }

            .nav-bar::before {
                border-width: 0 40px 0 284px;
            }

            .nav-crest-link {
                width: 95px;
            }

            .nav-crest-logo {
                left: 28px;
                top: 1px;
                width: 67px;
            }

            .nav-brand {
                left: 101px;
            }

            .nav-brand b {
                font-size: 18px;
            }

            .nav-brand small {
                margin-top: 3px;
                font-size: 7.5px;
                letter-spacing: 0.04em;
            }

            .nav-brand em {
                margin-top: 3px;
                font-size: 10px;
            }

            .nav-right {
                right: 27px;
            }

            .nav-menu-btn {
                padding: 0 12px;
                height: 38px;
                border-radius: 12px;
            }

            .nav-lbl {
                display: none;
            }
        }

        @media (prefers-reduced-motion: reduce) {

            .herosl-card,
            .herosl-card img,
            .herosl-card-sub,
            .herosl-card-go,
            .nav-wrap *,
            .nav-fullscreen-menu * {
                transition: none !important;
                animation: none !important;
            }
        }

        .ns-sec {
            position: relative;
            padding: 60px 0;
            overflow: hidden;
        }

        .ns-overlap {
    text-align: center;
  font-size: 75px;
  font-weight: bold;
  position: absolute;
  z-index: 1;
  color: #8a0910;
  opacity: 0.15;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
        }

        .ns-wrap {
            position: relative;
            z-index: 1;
            max-width: 1320px;
            margin: 0 auto;
            overflow: hidden;
        }

        /* image + text scale together via container units */
        .ns-stage {
            position: relative;
            width: 100%;
            container-type: inline-size;
        }

        .ns-img {
            display: block;
            width: 100%;
            height: auto;
            pointer-events: none;
            user-select: none;
        }

        /* area inside the blank white board (kept clear of the pointing hands) */
        .ns-content {
            position: absolute;
            left: 19%;
            right: 18.5%;
            top: 36%;
            bottom: 22.6%;
            display: flex;
            flex-direction: column;
            gap: 0.7cqw;
        }

        /* ---------- slim header bar ---------- */
        .ns-bar {
            display: flex;
            align-items: center;
            gap: 1.2cqw;
            flex: 0 0 auto;
        }

        .ns-title {
            display: flex;
            align-items: center;
            gap: 0.8cqw;
            margin: 0;
            font-family: "Cinzel", serif;
            font-weight: 800;
            font-size: clamp(11px, 1.55cqw, 21px);
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--color-ink);
            white-space: nowrap;
        }

        .ns-title i {
            color: var(--color-red);
            font-size: 0.9em;
        }

        .ns-rule {
            flex: 1;
            height: 3px;
            border-radius: 3px;
            background: linear-gradient(90deg,
                    var(--color-red) 0 12%,
                    var(--color-gold) 12% 22%,
                    rgba(241, 207, 133, 0.45) 22% 100%);
        }

        .ns-all {
            color: var(--color-red);
            font-weight: 600;
            text-decoration: none;
            white-space: nowrap;
            font-size: clamp(9px, 1.05cqw, 14px);
            transition: 0.3s ease;
        }

        .ns-all i {
            margin-left: 0.4cqw;
            font-size: 0.85em;
            transition: 0.3s ease;
        }

        .ns-all:hover {
            color: var(--color-red-dark);
        }

        .ns-all:hover i {
            margin-left: 0.8cqw;
        }

        .ns-nav {
            display: flex;
            gap: 0.5cqw;
        }

        .ns-prev,
        .ns-next {
            width: clamp(22px, 2.4cqw, 32px);
            height: clamp(22px, 2.4cqw, 32px);
            padding: 0;
            border-radius: 50%;
            border: 1.5px solid var(--color-ink);
            background: var(--color-white);
            color: var(--color-ink);
            font-size: clamp(8px, 0.95cqw, 12px);
            display: inline-flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            transition: 0.25s ease;
        }

        .ns-prev:hover,
        .ns-next:hover {
            background: var(--color-red);
            border-color: var(--color-red);
            color: var(--color-white);
        }

        /* ---------- slider ---------- */
        .ns-swiper {
            flex: 1 1 auto;
            min-height: 0;
            width: 100%;
            padding: 0.3cqw 0.4cqw 0.9cqw;
            overflow: hidden;
        }

        .ns-swiper .swiper-slide {
            height: auto;
        }

        /* ==========================================
     CARD
     ========================================== */
        .ns-card {
            position: relative;
            height: 100%;
            display: flex;
            flex-direction: column;
            background:
                radial-gradient(circle at 100% 100%,
                    rgba(255, 232, 26, 0.22),
                    transparent 42%),
                var(--color-white);
            border: 1px solid rgba(232, 184, 78, 0.7);
            border-radius: 1.2cqw;
            box-shadow:
                0 0.2cqw 0 rgba(232, 184, 78, 0.55),
                0 0.8cqw 1.8cqw rgba(143, 0, 8, 0.13);
            overflow: hidden;
            transition:
                transform 0.3s ease,
                box-shadow 0.3s ease;
        }

        .ns-card:hover {
            transform: translateY(-0.3cqw);
            box-shadow:
                0 0.2cqw 0 var(--color-gold-dark),
                0 1.1cqw 2.2cqw rgba(143, 0, 8, 0.22);
        }

        /* red header band */
        .ns-top {
            position: relative;
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            gap: 1cqw;
            padding: 0.75cqw 1.5cqw 0.75cqw 8.3cqw;
            color: var(--color-white);
            background:
                radial-gradient(circle at 92% -60%,
                    rgba(255, 232, 26, 0.55),
                    transparent 55%),
                repeating-linear-gradient(115deg,
                    rgba(255, 255, 255, 0.07) 0 0.5cqw,
                    transparent 0.5cqw 1cqw),
                linear-gradient(100deg, var(--color-red-dark), var(--color-red));
        }

        .ns-top::after {
            /* thin gold edge under the band */
            content: "";
            position: absolute;
            left: 0;
            right: 0;
            bottom: 0;
            height: 3px;
            background: linear-gradient(90deg,
                    var(--color-gold),
                    var(--color-gold-soft) 60%,
                    transparent);
        }

        .ns-date-text {
            display: inline-flex;
            align-items: center;
            gap: 0.55cqw;
            font-size: clamp(8px, 1cqw, 13px);
            font-weight: 500;
            letter-spacing: 0.03em;
            white-space: nowrap;
        }

        .ns-date-text i {
            color: var(--color-gold);
        }

        .ns-tag {
            font-size: clamp(7px, 0.82cqw, 11px);
            font-weight: 600;
            letter-spacing: 0.12em;
            text-transform: uppercase;
            line-height: 1.5;
            padding: 0.2cqw 1cqw;
            border-radius: 50px;
            box-shadow: 0 2px 6px rgba(0, 0, 0, 0.25);
        }

        .ns-tag.latest {
            background: var(--color-gold);
            color: var(--color-ink);
        }

        .ns-tag.notice {
            background: var(--color-white);
            color: var(--color-red);
        }

        .ns-tag.update {
            background: var(--color-ink);
            color: var(--color-gold);
        }

        /* body : badge + text */
        .ns-main {
            position: relative;
            flex: 1 1 auto;
            min-height: 0;
            display: grid;
            grid-template-columns: 5.6cqw 1fr;
            gap: 1.4cqw;
            padding: 0 1.5cqw 0 1.5cqw;
        }

        .ns-badge {
            width: 5.6cqw;
            height: 5.6cqw;
            margin-top: -2.6cqw;
            border-radius: 50%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: radial-gradient(circle at 30% 25%,
                    #fff6a8,
                    var(--color-gold) 55%,
                    var(--color-gold-dark));
            border: 0.35cqw solid var(--color-white);
            box-shadow:
                0 0.4cqw 1cqw rgba(143, 0, 8, 0.35),
                0 0 0 2px var(--color-red);
            z-index: 2;
        }

        .ns-day {
            font-family: "Cinzel", serif;
            font-weight: 800;
            line-height: 1;
            color: var(--color-ink);
            font-size: clamp(14px, 2.3cqw, 31px);
        }

        .ns-mon {
            margin-top: 0.15cqw;
            font-weight: 600;
            line-height: 1;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--color-red);
            font-size: clamp(6px, 0.8cqw, 11px);
        }

        .ns-text {
            min-width: 0;
            padding-top: 0.7cqw;
            display: flex;
            flex-direction: column;
            gap: 0.35cqw;
        }

        .ns-card-title {
            margin: 0;
            color: var(--color-ink);
            font-weight: 600;
            line-height: 1.3;
            font-size: clamp(11px, 1.45cqw, 19px);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .ns-card-desc {
            margin: 0;
            color: var(--color-charcoal);
            line-height: 1.5;
            font-size: clamp(9px, 1.05cqw, 14px);
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        /* footer */
        .ns-foot {
            flex: 0 0 auto;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin: 0 1.5cqw;
            padding: 0.55cqw 0 0.8cqw;
            border-top: 1px dashed var(--color-gold-soft);
        }

        .ns-more {
            display: inline-flex;
            align-items: center;
            gap: 0.6cqw;
            color: var(--color-red);
            font-weight: 600;
            text-decoration: none;
            font-size: clamp(9px, 1.05cqw, 14px);
            transition: 0.3s ease;
        }

        .ns-more i {
            width: 1.9cqw;
            height: 1.9cqw;
            min-width: 16px;
            min-height: 16px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: 0.78em;
            color: var(--color-ink);
            background: var(--color-gold);
            transition: 0.3s ease;
        }

        .ns-more:hover {
            color: var(--color-red-dark);
        }

        .ns-more:hover i {
            background: var(--color-red);
            color: var(--color-white);
            transform: translateX(3px);
        }

        .ns-ico {
            width: 2.2cqw;
            height: 2.2cqw;
            min-width: 18px;
            min-height: 18px;
            border-radius: 50%;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            font-size: clamp(8px, 1cqw, 13px);
            color: var(--color-gold);
            background: var(--color-ink);
        }

        /* ==========================================
     TABLET / MOBILE – zoom in on the board, 1 card
     ========================================== */
        @media (max-width: 1000px) {
            .ns-overlap {
                display: none;
            }

            .ns-sec {
                padding: 20px 0;
            }

            .ns-stage {
                width: 200%;
                margin-left: -50%;
            }

            .ns-content {
                left: 26%;
                right: 26%;
                top: 35.8%;
                bottom: 22.3%;
                gap: 0.7cqw;
            }

            .ns-title {
                font-size: clamp(10px, 1.7cqw, 20px);
            }

            .ns-all {
                font-size: clamp(8px, 1.15cqw, 13px);
            }

            .ns-prev,
            .ns-next {
                width: clamp(19px, 2.6cqw, 30px);
                height: clamp(19px, 2.6cqw, 30px);
                font-size: clamp(8px, 1.1cqw, 12px);
            }

            .ns-swiper {
                padding: 0.3cqw 0.4cqw 0.6cqw;
            }

            .ns-card {
                border-radius: 1.8cqw;
            }

            .ns-top {
                padding: 0.6cqw 1.8cqw 0.6cqw 9.6cqw;
            }

            .ns-date-text {
                font-size: clamp(8px, 1.2cqw, 14px);
            }

            .ns-tag {
                font-size: clamp(7px, 0.95cqw, 12px);
                padding: 0.15cqw 1.1cqw;
            }

            .ns-main {
                grid-template-columns: 6.6cqw 1fr;
                gap: 1.6cqw;
                padding: 0 1.8cqw;
            }

            .ns-badge {
                width: 6.6cqw;
                height: 6.6cqw;
                margin-top: -2.6cqw;
            }

            .ns-day {
                font-size: clamp(13px, 2.6cqw, 34px);
            }

            .ns-mon {
                font-size: clamp(6px, 0.9cqw, 12px);
            }

            .ns-text {
                padding-top: 0.5cqw;
                gap: 0.3cqw;
            }

            .ns-card-title {
                font-size: clamp(11px, 1.75cqw, 22px);
                -webkit-line-clamp: 1;
            }

            .ns-card-desc {
                font-size: clamp(9px, 1.3cqw, 16px);
                -webkit-line-clamp: 2;
            }

            .ns-foot {
                display: none;
            }

            .ns-main {
                padding-bottom: 0.8cqw;
            }
        }

        /* ==========================================
        6. INSTITUTIONAL PROFILE
        ========================================== */
        .institutional-profile-section {
            width: 100%;
            padding: 0 0 60px 0;
            position: relative;
        }

        .institutional-profile-section::before {
            content: "";
            position: absolute;
            top: 10%;
            left: 5%;
            width: 350px;
            height: 350px;
            background: radial-gradient(circle,
                    rgba(255, 232, 26, 0.15) 0%,
                    transparent 70%);
            z-index: 0;
            pointer-events: none;
        }

        .reference-collage-wrapper {
            position: relative;
            width: 100%;
            height: 520px;
            display: grid;
            grid-template-columns: repeat(12, 1fr);
            grid-template-rows: repeat(12, 1fr);
            gap: 16px;
            z-index: 1;
        }

        .ref-card {
            position: relative;
            overflow: hidden;
            box-shadow: 0 20px 45px rgba(18, 19, 22, 0.1);
            background: var(--color-white);
            transition: all 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
        }

        .ref-card img,
        .ref-card iframe {
            width: 100%;
            height: 100%;
            object-fit: cover;
            transition: transform 0.6s ease;
            border: none;
        }

        .ref-card:hover img {
            transform: scale(1.06);
        }

        .ref-card:hover {
            box-shadow: 0 30px 60px rgba(143, 0, 8, 0.18);
            z-index: 20;
        }

        .ref-card-1 {
            grid-column: 1 / 8;
            grid-row: 1 / 8;
            border-radius: 120px 24px 24px 24px;
            z-index: 2;
        }

        .ref-card-2 {
            grid-column: 8 / 13;
            grid-row: 2 / 7;
            border-radius: 24px 120px 24px 24px;
            z-index: 2;
        }

        .ref-card-3 {
            grid-column: 2 / 6;
            grid-row: 8 / 13;
            border-radius: 24px;
            z-index: 2;
        }

        .ref-card-4 {
            grid-column: 6 / 13;
            grid-row: 7 / 13;
            border-radius: 24px 24px 120px 24px;
            box-shadow: 0 35px 70px rgba(18, 19, 22, 0.15);
            z-index: 3;
            background: var(--color-ink);
        }

        .ref-floating-badge {
            position: absolute;
            top: -25px;
            left: 0;
            font-family: var(--nav-serif);
            font-size: 0.85rem;
            font-weight: 700;
            letter-spacing: 4px;
            color: var(--color-red-dark);
            text-transform: uppercase;
            z-index: 10;
            padding: 0 10px 0 0;
        }

        .video-overlay-badge {
            position: absolute;
            bottom: 12px;
            right: 12px;
            background: rgba(143, 0, 8, 0.85);
            color: var(--color-gold);
            padding: 5px 10px;
            border-radius: 20px;
            font-size: 0.65rem;
            font-weight: 700;
            letter-spacing: 1px;
            z-index: 5;
            display: flex;
            align-items: center;
            gap: 5px;
            backdrop-filter: blur(4px);
        }

        .editorial-content-area {
            padding-left: 1rem;
            position: relative;
            z-index: 1;
        }

        .section-tag {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            font-size: 0.75rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 3px;
            color: var(--color-red-dark);
            margin-bottom: 14px;
            background: rgba(143, 0, 8, 0.06);
            padding: 5px 14px;
            border-radius: 30px;
            border: 1px solid rgba(143, 0, 8, 0.12);
        }

        .section-tag i {
            color: var(--color-red);
            font-size: 0.9rem;
        }

        .profile-title {
            font-family: var(--nav-serif);
            font-size: 2.6rem;
            font-weight: 700;
            color: var(--color-charcoal);
            line-height: 1.12;
            margin-bottom: 20px;
            letter-spacing: -0.5px;
        }

        .narrative-block {
            display: flex;
            flex-direction: column;
            gap: 14px;
            margin-bottom: 26px;
        }

        .narrative-p {
            font-size: 1rem;
            line-height: 1.7;
            color: var(--color-ink);
        }

        .narrative-p.featured {
            color: var(--color-charcoal);
            font-weight: 600;
            padding-left: 16px;
            border-left: 4px solid var(--color-red);
            background: rgba(237, 0, 8, 0.02);
            border-radius: 0 6px 6px 0;
            padding-top: 4px;
            padding-bottom: 4px;
        }

        .metrics-cards-grid {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
            margin-bottom: 28px;
        }

        .metric-creative-card {
            background: var(--color-white);
            border-radius: 14px;
            padding: 12px 14px;
            display: flex;
            align-items: center;
            gap: 12px;
            box-shadow: 0 6px 20px rgba(18, 19, 22, 0.03);
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .metric-creative-card::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            width: 3px;
            height: 100%;
            background: var(--color-red);
            opacity: 0;
            transition: opacity 0.3s ease;
        }

        .metric-creative-card:hover {
            transform: translateY(-3px);
            box-shadow: 0 12px 30px rgba(143, 0, 8, 0.08);
        }

        .metric-creative-card:hover::before {
            opacity: 1;
        }

        .metric-icon-box {
            width: 38px;
            height: 38px;
            background: rgba(237, 0, 8, 0.08);
            color: var(--color-red-dark);
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1rem;
            flex-shrink: 0;
        }

        .metric-content-wrap {
            display: flex;
            flex-direction: column;
            min-width: 0;
        }

        .metric-value-text {
            font-family: var(--nav-serif);
            font-size: 1.1rem;
            font-weight: 700;
            color: var(--color-charcoal);
            line-height: 1.1;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .metric-label-text {
            font-size: 0.65rem;
            font-weight: 700;
            text-transform: uppercase;
            letter-spacing: 0.8px;
            color: var(--color-charcoal);
            margin-top: 2px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        .action-group {
            display: flex;
            gap: 14px;
            align-items: center;
        }

        .btn-fluid-primary {
            background: var(--color-red-dark);
            color: var(--color-white);
            font-family: var(--nav-sans);
            font-size: 0.9rem;
            font-weight: 600;
            padding: 14px 30px;
            border-radius: 50px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 10px;
            box-shadow: 0 10px 25px rgba(143, 0, 8, 0.25);
            transition: all 0.3s ease;
            border: none;
        }

        .btn-fluid-primary:hover {
            background: var(--color-red);
            transform: translateY(-2px);
            box-shadow: 0 15px 30px rgba(143, 0, 8, 0.35);
            color: var(--color-white);
        }

        .btn-fluid-secondary {
            background: transparent;
            color: var(--color-charcoal);
            font-family: var(--nav-sans);
            font-size: 0.9rem;
            font-weight: 600;
            padding: 14px 26px;
            border-radius: 50px;
            text-decoration: none;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            border: 2px solid var(--color-charcoal);
            transition: all 0.3s ease;
        }

        .btn-fluid-secondary:hover {
            background: var(--color-charcoal);
            color: var(--color-white);
            transform: translateY(-2px);
        }

        @media (max-width: 991.98px) {
            .editorial-content-area {
                padding-left: 0;
                margin-top: 40px;
            }

            .reference-collage-wrapper {
                max-width: 480px;
                height: 440px;
                margin: 0 auto;
            }

            .profile-title {
                font-size: 2.3rem;
            }
        }

        @media (max-width: 767.98px) {
            .metrics-cards-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .metric-creative-card {
                padding: 10px 12px;
            }

            .action-group {
                flex-direction: column;
                width: 100%;
            }

            .btn-fluid-primary,
            .btn-fluid-secondary {
                width: 100%;
                justify-content: center;
            }
        }

        /* ==========================================
        7. MANAGEMENT MESSAGE (pm1)
        ========================================== */
        .pm1-section {
            position: relative;
            overflow: hidden;
            color: var(--color-white);
            background:
                radial-gradient(55% 80% at 70% 50%,
                    rgba(237, 0, 8, 0.5) 0%,
                    rgba(237, 0, 8, 0) 70%),
                linear-gradient(125deg,
                    var(--color-charcoal) 0%,
                    var(--color-red-dark) 55%,
                    var(--color-red) 100%);
            padding: 60px 0;
        }

        .pm1-section::before,
        .pm1-section::after {
            content: "";
            position: absolute;
            border-radius: 50%;
            pointer-events: none;
            border: 1px solid rgba(241, 207, 133, 0.2);
        }

        .pm1-section::before {
            width: 620px;
            height: 620px;
            right: -120px;
            top: 50%;
            transform: translateY(-50%);
            box-shadow:
                0 0 0 70px rgba(255, 255, 255, 0.025),
                0 0 0 140px rgba(255, 255, 255, 0.018);
        }

        .pm1-section::after {
            width: 240px;
            height: 240px;
            left: -90px;
            bottom: -100px;
            border-color: rgba(255, 232, 26, 0.22);
        }

        .pm1-wrap {
            position: relative;
            z-index: 1;
            max-width: 1600px;
            margin: 0 auto;
        }

        .pm1-grid {
            display: grid;
            grid-template-columns: 1fr 1fr;
            grid-auto-rows: 1fr;
            height: 100%;
        }

        .pm1-cell {
            display: flex;
        }

        .pm1-link {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            text-align: center;
            gap: 16px;
            width: 100%;
            padding: 26px 8px;
            text-decoration: none;
            color: var(--color-white);
            transition: transform 0.25s;
        }

        .pm1-link:hover,
        .pm1-link:focus-visible {
            color: var(--color-white);
            transform: translateY(-5px);
            outline: none;
        }

        .pm1-ico {
            position: relative;
            width: 68px;
            height: 68px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 27px;
            color: var(--color-gold);
            border: 2px solid var(--color-gold);
            transition:
                color 0.25s,
                border-color 0.25s,
                box-shadow 0.25s;
        }

        .pm1-ico::before {
            content: "";
            position: absolute;
            inset: -9px;
            border-radius: 50%;
            border: 1px dashed rgba(255, 232, 26, 0.45);
            transition:
                inset 0.25s,
                border-color 0.25s;
        }

        .pm1-link:hover .pm1-ico {
            color: var(--color-white);
            border-color: var(--color-white);
            box-shadow: 0 0 22px rgba(255, 232, 26, 0.5);
        }

        .pm1-link:hover .pm1-ico::before {
            inset: -12px;
            border-color: var(--color-white);
        }

        .pm1-lbl {
            font-weight: 500;
            font-size: 15px;
            line-height: 1.3;
        }

        .pm1-lbl small {
            display: block;
            font-weight: 300;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.72);
            margin-top: 3px;
        }

        .pm1-cell:nth-child(odd) {
            border-right: 1px solid rgba(241, 207, 133, 0.28);
        }

        .pm1-cell:nth-child(-n + 4) {
            border-bottom: 1px solid rgba(241, 207, 133, 0.28);
        }

        .pm1-title {
            font-weight: 600;
            color: var(--color-gold);
            text-transform: uppercase;
            font-size: clamp(26px, 3.2vw, 38px);
            line-height: 1.2;
            margin-bottom: 20px;
        }

        .pm1-quote-ico {
            display: block;
            font-size: 40px;
            color: var(--color-gold);
            opacity: 0.85;
            margin-bottom: 14px;
        }

        .pm1-msgs {
            display: grid;
        }

        .pm1-msg {
            grid-area: 1/1;
            visibility: hidden;
            opacity: 0;
            transform: translateY(8px);
            transition:
                opacity 0.4s,
                transform 0.4s,
                visibility 0.4s;
        }

        .pm1-msg.pm1-on {
            visibility: visible;
            opacity: 1;
            transform: none;
        }

        .pm1-lead {
            font-style: italic;
            font-weight: 400;
            font-size: 18px;
            line-height: 1.6;
            color: var(--color-white);
            margin-bottom: 14px;
        }

        .pm1-text {
            font-weight: 300;
            font-size: 15px;
            line-height: 1.8;
            color: rgba(255, 255, 255, 0.9);
            margin-bottom: 12px;
        }

        .pm1-more {
            color: var(--color-gold);
            font-style: italic;
            text-decoration: none;
            font-size: 15px;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 4px;
        }

        .pm1-more:hover {
            color: var(--color-gold-soft);
        }

        .pm1-more i {
            transition: transform 0.2s;
        }

        .pm1-more:hover i {
            transform: translateX(5px);
        }

        .pm1-sign {
            margin-top: 22px;
        }

        .pm1-sign::before {
            content: "";
            display: block;
            width: 44px;
            height: 3px;
            border-radius: 3px;
            margin-bottom: 12px;
            background: linear-gradient(90deg,
                    var(--color-gold),
                    var(--color-gold-dark));
        }

        .pm1-name {
            font-weight: 600;
            color: var(--color-gold);
            text-transform: uppercase;
            font-size: 16px;
            margin: 0 0 2px;
        }

        .pm1-role {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.8);
            letter-spacing: 0.08em;
        }

        .pm1-people {
            position: relative;
            width: 100%;
            max-width: 400px;
            aspect-ratio: 1/1.12;
            margin: 0 auto;
        }

        .pm1-person {
            position: absolute;
            aspect-ratio: 1;
            cursor: pointer;
            transition:
                left 0.6s cubic-bezier(0.65, 0, 0.35, 1),
                top 0.6s cubic-bezier(0.65, 0, 0.35, 1),
                width 0.6s cubic-bezier(0.65, 0, 0.35, 1);
        }

        .pm1-person::before {
            content: "";
            position: absolute;
            inset: -8px;
            border-radius: 50%;
            border: 1.5px dashed rgba(255, 232, 26, 0.55);
            transition:
                inset 0.3s,
                border-color 0.3s;
        }

        .pm1-photo {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            padding: 0;
            overflow: hidden;
            cursor: pointer;
            border: 4px solid var(--color-gold-soft);
            background: linear-gradient(145deg,
                    var(--color-gold-soft),
                    var(--color-gold-dark));
            box-shadow: 0 14px 30px rgba(0, 0, 0, 0.35);
            transition:
                border-color 0.3s,
                box-shadow 0.3s;
        }

        .pm1-photo:focus-visible {
            outline: 3px solid var(--color-gold);
            outline-offset: 6px;
        }

        .pm1-photo .pm1-fallback {
            position: absolute;
            inset: 0;
            display: flex;
            align-items: flex-end;
            justify-content: center;
            color: rgba(143, 0, 8, 0.55);
            font-size: clamp(44px, 11vw, 100px);
        }

        .pm1-photo img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top;
        }

        .pm1-cap {
            position: absolute;
            left: 50%;
            bottom: -14px;
            transform: translateX(-50%);
            white-space: nowrap;
            z-index: 3;
            display: inline-flex;
            align-items: center;
            gap: 7px;
            padding: 6px 14px;
            border-radius: 999px;
            font-size: 12px;
            font-weight: 500;
            line-height: 1.2;
            transition:
                background 0.3s,
                color 0.3s,
                border-color 0.3s;
        }

        .pm1-person[data-slot="main"] {
            left: 22%;
            top: 22%;
            width: 78%;
            z-index: 2;
        }

        .pm1-person[data-slot="main"] .pm1-photo {
            border-color: var(--color-gold);
            border-width: 5px;
            box-shadow:
                0 0 0 8px rgba(255, 232, 26, 0.12),
                0 20px 40px rgba(0, 0, 0, 0.45);
        }

        .pm1-person[data-slot="main"] .pm1-cap {
            background: var(--color-gold);
            color: var(--color-ink);
            font-size: 13px;
            padding: 7px 18px;
            box-shadow: 0 8px 18px rgba(0, 0, 0, 0.35);
        }

        .pm1-person[data-slot="top"] {
            left: 0;
            top: 0;
            width: 28%;
            z-index: 1;
        }

        .pm1-person[data-slot="top"] .pm1-cap {
            background: var(--color-red-dark);
            color: var(--color-gold-soft);
            border: 1px solid rgba(241, 207, 133, 0.7);
        }

        .pm1-person[data-slot="top"]:hover::before,
        .pm1-person[data-slot="top"]:focus-within::before {
            inset: -11px;
            border-style: solid;
            border-color: var(--color-gold);
        }

        .pm1-person[data-slot="top"]:hover .pm1-photo {
            border-color: var(--color-gold);
            box-shadow:
                0 0 0 5px rgba(255, 232, 26, 0.18),
                0 14px 30px rgba(0, 0, 0, 0.4);
        }

        .pm1-person[data-slot="top"]:hover .pm1-cap {
            background: var(--color-gold);
            color: var(--color-ink);
            border-color: var(--color-gold);
        }

        .pm1-hint {
            text-align: center;
            font-size: 12px;
            color: rgba(255, 255, 255, 0.7);
            margin-top: 26px;
        }

        .pm1-hint i {
            color: var(--color-gold);
            margin-right: 6px;
        }

        @media (prefers-reduced-motion: reduce) {

            .pm1-msg,
            .pm1-person,
            .pm1-link {
                transition: none;
            }
        }

        @media (max-width: 991.98px) {
            .pm1-section {
                padding: 56px 0;
            }

            .pm1-section::before {
                right: -260px;
            }

            .pm1-link {
                padding: 26px 8px;
            }
        }

        @media (max-width: 575.98px) {
            .pm1-lead {
                font-size: 16px;
            }

            .pm1-ico {
                width: 62px;
                height: 62px;
                font-size: 25px;
            }

            .pm1-lbl {
                font-size: 13.5px;
            }

            .pm1-people {
                max-width: 300px;
            }
        }

        /* ==========================================
        8. GALLERY
        ========================================== */
        .gal {
            padding: 60px 0;
            overflow: hidden;
            font-family: var(--nav-serif);
            color: var(--color-ink);
        }

        .gal .container-fluid {
            padding-inline: clamp(16px, 4vw, 64px);
        }

        .gal :focus-visible {
            outline: 3px solid var(--color-red);
            outline-offset: 3px;
        }

        .galsec-overlap {
            text-align: center;
            font-size: 75px;
            font-weight: bold;
            z-index: 1;
            color: #8a0910;
            opacity: 0.15;
            top: 40px;
        }

        .gal-top {
            text-align: center;
            margin-bottom: 40px;
        }

        .gal-head {
            position: relative;
            display: flex;
            align-items: center;
            flex-wrap: wrap;
            gap: 14px 16px;
            padding-bottom: 20px;
            border-bottom: 1px solid var(--color-gold-dark);
        }

        .gal-head::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -2px;
            width: 96px;
            height: 3px;
            border-radius: 3px;
            background: var(--color-red);
        }

        .gal-ic {
            flex: none;
            width: 54px;
            height: 54px;
            border-radius: 50%;
            background: var(--color-ink);
            color: var(--color-gold);
            display: grid;
            place-items: center;
            font-size: 1.4rem;
            box-shadow: 0 0 0 4px var(--color-gold);
        }

        .gal-head-title {
            font-weight: 700;
            font-size: clamp(1.6rem, 2.4vw, 2.1rem);
            line-height: 1.1;
            margin: 0;
        }

        .gal-head-text {
            margin: 4px 0 0;
            font-size: 0.9rem;
            color: var(--color-charcoal);
        }

        .gal-tools {
            margin-left: auto;
            display: flex;
            align-items: center;
            gap: 10px;
        }

        .gal-arrow {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            border: 1.5px solid var(--color-ink);
            background: var(--color-white);
            color: var(--color-ink);
            display: grid;
            place-items: center;
        }

        .gal-arrow:hover {
            background: var(--color-gold);
            border-color: var(--color-gold);
        }

        .gal-view {
            display: inline-flex;
            align-items: center;
            gap: 10px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.9rem;
            background: var(--color-ink);
            color: var(--color-white);
            padding: 6px 6px 6px 20px;
            border-radius: 99px;
        }

        .gal-view::after {
            content: "\f138";
            font-family: bootstrap-icons;
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background: var(--color-red);
            color: var(--color-gold);
            display: grid;
            place-items: center;
        }

        .gal-view:hover {
            background: var(--color-gold);
            color: var(--color-ink);
        }

        .gal-col {
            container-type: inline-size;
        }

        .gal-stack {
            --gal-w: max(250px, min(60cqw, 620px));
            --gal-k: 0.75;
            position: relative;
            margin-top: 44px;
            height: calc(var(--gal-w) * var(--gal-k) + 90px);
            user-select: none;
        }

        .gal-card {
            position: absolute;
            left: 50%;
            top: 50%;
            width: var(--gal-w);
            margin: calc((var(--gal-w) * var(--gal-k) + 20px) * -0.5) 0 0 calc(var(--gal-w) * -0.5);
            padding: 10px;
            background: var(--color-white);
            border-radius: 24px;
            cursor: pointer;
            box-shadow: 0 24px 44px -24px color-mix(in srgb, var(--color-ink) 55%, transparent);
            transition:
                transform 0.8s cubic-bezier(0.22, 0.9, 0.28, 1),
                opacity 0.5s,
                z-index 0.8s;
        }

        .gal-img {
            position: relative;
            display: block;
            aspect-ratio: 4/3;
            border-radius: 15px;
            overflow: hidden;
            background: var(--color-charcoal);
            container-type: inline-size;
        }

        .gal-img img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            display: block;
            pointer-events: none;
            transition: transform 1.2s;
        }

        .gal-img img.gal-hq {
            width: 134%;
            height: 134%;
            max-width: none;
            margin: -16.7%;
        }

        .gal-front:hover img {
            transform: scale(1.05);
        }

        .gal-img iframe {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            border: 0;
            background: var(--color-ink);
        }

        .gal-playing .gal-info,
        .gal-playing .gal-play {
            display: none;
        }

        .gal-info {
            position: absolute;
            inset: auto 0 0;
            display: flex;
            flex-direction: column;
            align-items: flex-start;
            gap: 7px;
            padding: 16cqw 6cqw 6cqw;
            color: var(--color-white);
            background: linear-gradient(to top,
                    color-mix(in srgb, var(--color-ink) 94%, transparent) 35%,
                    color-mix(in srgb, var(--color-ink) 60%, transparent) 72%,
                    transparent);
            opacity: 0;
            visibility: hidden;
            transition:
                opacity 0.4s,
                visibility 0s 0.4s;
        }

        .gal-front .gal-info {
            opacity: 1;
            visibility: visible;
            transition-delay: 0.3s;
        }

        .gal-info>* {
            margin: 0;
        }

        .gal-date {
            color: var(--color-gold);
            font-weight: 600;
            font-size: 0.8rem;
            letter-spacing: 0.03em;
        }

        .gal-date::before {
            content: "\f20e";
            font-family: bootstrap-icons;
            margin-right: 7px;
        }

        .gal-name {
            font-weight: 700;
            font-size: clamp(1.1rem, 5.2cqw, 1.9rem);
            line-height: 1.15;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .gal-text {
            font-size: 0.86rem;
            line-height: 1.45;
            opacity: 0.85;
            display: -webkit-box;
            -webkit-line-clamp: 1;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .gal-btn {
            display: inline-flex;
            align-items: center;
            gap: 8px;
            margin-top: 3px;
            text-decoration: none;
            font-weight: 600;
            font-size: 0.84rem;
            background: var(--color-white);
            color: var(--color-ink);
            padding: 5px 5px 5px 16px;
            border-radius: 99px;
        }

        .gal-btn::after {
            content: "\f138";
            font-family: bootstrap-icons;
            width: 26px;
            height: 26px;
            border-radius: 50%;
            background: var(--color-red);
            color: var(--color-gold);
            display: grid;
            place-items: center;
        }

        .gal-btn:hover {
            background: var(--color-gold);
            color: var(--color-ink);
        }

        .gal-play {
            position: absolute;
            left: 50%;
            top: 30%;
            width: 68px;
            height: 68px;
            margin: -34px 0 0 -34px;
            border-radius: 50%;
            display: grid;
            place-items: center;
            font-size: 2.2rem;
            background: var(--color-white);
            color: var(--color-red);
            box-shadow: 0 0 0 10px color-mix(in srgb, var(--color-white) 35%, transparent);
        }

       /* ==========================================
        9. FACILITIES
        ========================================== */
        .fac-section {
            padding: 60px 0;
            background: #f4ecdb;
            color: var(--color-charcoal);
            overflow: hidden;
        }

        .fac-section :focus-visible {
            outline: 3px solid var(--color-gold-dark);
            outline-offset: 2px;
        }

        .fac-poster {
            container-type: inline-size;
        }

        .fac-stage {
            display: flex;
            align-items: flex-end;
            padding-top: 1cqw;
        }

        .fac-stu {
            flex: 0 0 188px;
            width: 188px;
            height: 600px;
            margin-right: -52px;
            position: relative;
            z-index: 2;
        }

        .fac-stu:before {
            content: "";
            position: absolute;
            inset: auto 0 -6px -6%;
            height: 20px;
            background: radial-gradient(closest-side,
                    rgba(60, 0, 4, 0.4),
                    transparent);
            z-index: -1;
        }

        .fac-stu img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: 13% bottom;
            filter: drop-shadow(4px 3px 6px rgba(60, 0, 4, 0.25));
        }

        .fac-stu-r {
            margin-right: 0;
            margin-left: -52px;
        }

        .fac-stu-r img {
            object-position: 75% bottom;
        }

        @media (max-width: 1399.98px) {
            .fac-stu {
                flex-basis: 162px;
                width: 162px;
                height: 516px;
                margin-right: -45px;
            }

            .fac-stu-r {
                margin-right: 0;
                margin-left: -45px;
            }
        }

        @media (max-width: 1199.98px) {
            .fac-stu {
                flex-basis: 135px;
                width: 135px;
                height: 432px;
                margin-right: -37px;
            }

            .fac-stu-r {
                margin-right: 0;
                margin-left: -37px;
            }
        }

        @media (max-width: 991.98px) {
            .fac-stu {
                flex-basis: 102px;
                width: 102px;
                height: 324px;
                margin-right: -28px;
            }

            .fac-stu-r {
                margin-right: 0;
                margin-left: -28px;
            }
        }

        .fac-card {
            position: relative;
            z-index: 1;
            flex: 1;
            min-width: 0;
            min-height: 38cqw;
            margin-bottom: 1.8cqw;
            display: grid;
            grid-template-columns: 1.14fr 1fr;
            background: var(--color-body);
            border-radius: max(18px, 2.6cqw);
            overflow: hidden;
            box-shadow: 0 2.2cqw 4cqw -1.4cqw rgba(60, 0, 4, 0.38);
        }

        .fac-card:before {
            content: "";
            position: absolute;
            left: -3cqw;
            top: -3cqw;
            width: 11cqw;
            height: 11cqw;
            border-radius: 50%;
            background: var(--color-gold-soft);
            opacity: 0.6;
        }

        .fac-left {
            position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            padding: max(24px, 3cqw) max(14px, 2cqw) max(24px, 3cqw) max(16px, 4.2cqw);
        }

        .fac-eyebrow {
            display: flex;
            align-items: center;
            gap: 1cqw;
            font-size: max(10px, 0.82cqw);
            letter-spacing: 0.32em;
        }

        .fac-eyebrow:after {
            content: "";
            width: max(30px, 5cqw);
            height: 2px;
            background: var(--color-gold-dark);
        }

        .fac-title {
            margin: 0.8cqw 0 1.2cqw;
            font:
                800 max(26px, 3.5cqw)/0.98 "Playfair Display",
                serif;
        }

        .fac-title em {
            display: block;
            font-style: normal;
            color: var(--color-red);
        }

        .fac-intro {
            max-width: 46ch;
            margin: 0 0 1.8cqw;
            font-size: max(13px, 1.06cqw);
            line-height: 1.5;
            color: var(--color-charcoal);
            opacity: 0.78;
        }

        .fac-list {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 0.6cqw 1cqw;
        }

        .fac-item {
            display: flex;
            gap: 1cqw;
            align-items: center;
            padding: 0.6cqw;
            border: 1px solid transparent;
            border-radius: max(12px, 1.2cqw);
            cursor: pointer;
            transition: 0.25s;
        }

        .fac-item:hover,
        .fac-item.fac-on {
            background: rgba(232, 184, 78, 0.18);
            border-color: var(--color-gold-dark);
        }

        .fac-ic {
            flex: none;
            width: max(38px, 3.1cqw);
            height: max(38px, 3.1cqw);
            border-radius: 50%;
            display: grid;
            place-items: center;
            color: var(--color-white);
            font-size: max(16px, 1.4cqw);
            box-shadow:
                0 0.7cqw 1cqw -0.4cqw rgba(60, 0, 4, 0.38),
                inset 0 0.25cqw 0.4cqw rgba(255, 255, 255, 0.45);
        }

        .fac-item b {
            display: block;
            font-weight: 500;
            font-size: max(13px, 1.12cqw);
            line-height: 1.22;
        }

        .fac-item small {
            display: block;
            margin-top: 0.3cqw;
            font-size: max(10.5px, 0.82cqw);
            line-height: 1.3;
            color: var(--color-charcoal);
            opacity: 0.78;
        }

        .fac-viewall {
            align-self: flex-start;
            margin-top: 2cqw;
            display: inline-flex;
            align-items: center;
            gap: 1cqw;
            padding: 0.4cqw 0.4cqw 0.4cqw 2cqw;
            border: 0;
            border-radius: 999px;
            background: linear-gradient(125deg,
                    var(--color-charcoal),
                    var(--color-red-dark) 55%,
                    var(--color-red));
            color: var(--color-white);
            font:
                700 max(13px, 1.05cqw) "DM Sans",
                sans-serif;
            text-decoration: none;
            cursor: pointer;
            box-shadow: 0 0.9cqw 1.5cqw -0.6cqw rgba(60, 0, 4, 0.38);
        }

        .fac-viewall span {
            width: max(34px, 2.8cqw);
            height: max(34px, 2.8cqw);
            border-radius: 50%;
            display: grid;
            place-items: center;
            background: var(--color-gold);
            color: var(--color-charcoal);
            font-size: max(14px, 1.1cqw);
            transition: transform 0.25s;
        }

        .fac-viewall:hover span {
            transform: translateX(0.4cqw);
        }

        .fac-sw {
            --o: max(6px, 0.9cqw);
            --r: max(18px, 6cqw) max(8px, 2cqw);
            position: relative;
            margin: max(16px, 2.2cqw);
            min-height: 22cqw;
        }

        .fac-sw:before {
            content: "";
            position: absolute;
            inset: var(--o) var(--o) calc(var(--o) * -1) calc(var(--o) * -1);
            border-radius: var(--r);
            background: linear-gradient(135deg,
                    var(--color-gold),
                    var(--color-gold-dark));
        }

        .fac-slides {
            position: absolute;
            inset: 0;
            border-radius: var(--r);
            overflow: hidden;
        }

        .fac-slide {
            position: absolute;
            inset: 0;
            opacity: 0;
            transition: opacity 0.9s;
            background: linear-gradient(135deg, var(--c), var(--color-charcoal));
        }

        .fac-slide.fac-on {
            opacity: 1;
        }

        .fac-slide:before {
            content: attr(data-t);
            position: absolute;
            inset: 0;
            display: grid;
            place-items: center;
            padding: 20px;
            text-align: center;
            color: var(--color-white);
            font:
                700 max(18px, 2.2cqw) "DM Sans",
                sans-serif;
        }

        .fac-slide img {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        .fac-cap {
            position: absolute;
            left: 1.4cqw;
            bottom: 1.6cqw;
            padding: 0.5cqw 1.3cqw;
            border-radius: 999px;
            background: linear-gradient(125deg,
                    rgba(51, 49, 50, 0.92),
                    rgba(143, 0, 8, 0.92));
            color: var(--color-white);
            font-size: max(12px, 1cqw);
        }

        @container (max-width:760px) {
            .fac-stu {
                display: none;
            }

            .fac-stage {
                padding-top: 0;
            }

            .fac-card {
                grid-template-columns: 1fr;
                min-height: 0;
                margin-bottom: 0;
                border-radius: 22px;
            }

            .fac-card:before {
                width: 90px;
                height: 90px;
                left: -30px;
                top: -30px;
            }

            .fac-left {
                padding: 30px 22px 6px;
            }

            .fac-eyebrow {
                gap: 10px;
            }

            .fac-title {
                margin: 10px 0 12px;
                font-size: 34px;
            }

            .fac-intro {
                margin-bottom: 18px;
                font-size: 14px;
            }

            .fac-list {
                gap: 8px 12px;
            }

            .fac-item {
                gap: 12px;
                padding: 8px;
            }

            .fac-item b {
                font-size: 14px;
            }

            .fac-item small {
                margin-top: 3px;
                font-size: 11.5px;
            }

            .fac-viewall {
                gap: 14px;
                margin-top: 20px;
                padding: 5px 5px 5px 22px;
                font-size: 14px;
            }

            .fac-viewall span {
                width: 36px;
                height: 36px;
                font-size: 14px;
            }

            .fac-sw {
                --o: 8px;
                --r: 40px 14px;
                min-height: 0;
                aspect-ratio: 16/10;
                margin: 24px 22px 28px;
            }

            .fac-list,
            .fac-viewall,
            .fac-cap {
                display: none;
            }

            .fac-left {
                padding-bottom: 0;
            }

            .fac-intro {
                margin-bottom: 0;
            }
        }

        @container (max-width:520px) {
            .fac-list {
                grid-template-columns: 1fr;
            }

            .fac-left {
                padding: 26px 18px 4px;
            }

            .fac-title {
                font-size: 30px;
            }

            .fac-sw {
                margin: 22px 18px 26px;
            }
        }

        @media (prefers-reduced-motion: reduce) {
            .fac-section * {
                transition: none !important;
            }
        }

        /* ==========================================
        10. TOPPERS
        ========================================== */
        .bt-section {
            position: relative;
            overflow: hidden;
            padding: 60px 0 0 0;
            font-family: "Montserrat", sans-serif;
            color: var(--color-ink);
        }

        .bt-section * {
            box-sizing: border-box;
        }

        .topsec-overlap {
            text-align: center;
            font-size: 63px;
            font-weight: bold;
            position: absolute;
            z-index: 1;
            color: #8a0910;
            opacity: 0.15;
            top: 40px;
            left: 50%;
            transform: translateX(-50%);
        }

        .bt-row {
            display: grid;
            grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
            margin-top: 120px;
        }

        .bt-col {
            min-width: 0;
            padding: 0 clamp(12px, 2.2vw, 30px);
        }

        .bt-col+.bt-col {
            border-left: 2px dotted rgba(232, 184, 78, 0.65);
        }

        .bt-top {
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 12px 14px;
            margin-bottom: 10px;
        }

        .bt-title {
            display: flex;
            align-items: center;
            gap: 14px;
            min-width: 0;
        }

        .bt-roman {
            font-family: "Playfair Display", serif;
            font-weight: 800;
            font-size: clamp(44px, 5vw, 64px);
            line-height: 1;
            letter-spacing: -2px;
            color: transparent;
            -webkit-text-stroke: 1.6px var(--color-gold-dark);
        }

        .bt-title h3 {
            margin: 0;
            font-family: "Playfair Display", serif;
            font-weight: 700;
            font-size: clamp(19px, 2vw, 25px);
            line-height: 1.15;
            color: var(--color-red-dark);
        }

        .bt-title p {
            margin: 4px 0 0;
            font-size: 12px;
            font-weight: 500;
            letter-spacing: 0.06em;
            color: var(--color-charcoal);
        }

        .bt-tools {
            display: flex;
            align-items: center;
            gap: 8px;
            flex-shrink: 0;
        }

        .bt-btn {
            width: 40px;
            height: 40px;
            padding: 0;
            border-radius: 50%;
            border: 1.5px solid var(--color-red-dark);
            background: transparent;
            color: var(--color-red-dark);
            font-size: 15px;
            line-height: 1;
            cursor: pointer;
            display: grid;
            place-items: center;
            transition: 0.25s;
            touch-action: manipulation;
        }

        .bt-btn:hover,
        .bt-btn:focus-visible {
            background: var(--color-red-dark);
            color: var(--color-white);
            outline: none;
        }

        .bt-all {
            margin-right: 6px;
            font-size: 13px;
            font-weight: 700;
            color: var(--color-red-dark);
            text-decoration: none;
            background: linear-gradient(var(--color-gold-dark),
                    var(--color-gold-dark)) 0 100%/100% 2px no-repeat;
            padding-bottom: 3px;
            transition: 0.25s;
        }

        .bt-all:hover {
            color: var(--color-red);
        }

        .bt-swiper {
            overflow: hidden;
            padding: 34px 12px 34px;
        }

        .bt-swiper .swiper-slide {
            height: auto;
        }

        .bt-item {
            position: relative;
            text-align: center;
            padding-top: 4px;
        }

        .bt-down .bt-item {
            margin-top: 42px;
        }

        .bt-orb {
            position: relative;
            z-index: 1;
            width: min(188px, 78%);
            aspect-ratio: 1/1;
            margin: 16px auto 0;
        }

        .bt-orb::before {
            content: "";
            position: absolute;
            inset: -22px;
            border-radius: 50%;
            background: radial-gradient(circle,
                    rgba(255, 232, 26, 0.32) 35%,
                    rgba(241, 207, 133, 0) 72%);
        }

        .bt-img {
            position: relative;
            z-index: 1;
            width: 100%;
            height: 100%;
            border-radius: 50%;
            overflow: hidden;
            background: linear-gradient(150deg,
                    var(--color-red),
                    var(--color-red-dark));
            box-shadow: 0 18px 30px rgba(143, 0, 8, 0.22);
            transition: transform 0.5s;
        }

        .bt-img img {
            display: block;
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: top center;
            font-size: 0;
            color: transparent;
        }

        .bt-ring {
            position: absolute;
            inset: -10px;
            z-index: 2;
            border-radius: 50%;
            border: 1.6px dashed var(--color-gold-dark);
            pointer-events: none;
            transition: transform 1.2s;
        }

        .bt-ring::after {
            content: "";
            position: absolute;
            top: 14%;
            left: 2%;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: var(--color-gold);
            box-shadow: 0 0 0 4px rgba(232, 184, 78, 0.25);
        }

        @media (hover: hover) {
            .bt-item:hover .bt-img {
                transform: translateY(-8px);
            }

            .bt-item:hover .bt-ring {
                transform: rotate(90deg);
            }

            .bt-item:hover .bt-pct {
                transform: translateX(-50%) translateY(-4px);
            }

            .bt-item:hover .bt-cls::before {
                width: 54px;
            }
        }

        .bt-pct {
            position: absolute;
            z-index: 3;
            left: 50%;
            bottom: -18px;
            transform: translateX(-50%);
            white-space: nowrap;
            display: flex;
            align-items: baseline;
            gap: 6px;
            padding: 7px 16px 7px 18px;
            border-radius: 40px;
            background: linear-gradient(135deg,
                    var(--color-red-dark),
                    var(--color-ink));
            color: var(--color-gold);
            box-shadow:
                0 10px 18px rgba(143, 0, 8, 0.3),
                inset 0 0 0 1.5px rgba(241, 207, 133, 0.45);
            transition: transform 0.5s;
        }

        .bt-pct b {
            font-family: "Playfair Display", serif;
            font-weight: 800;
            font-size: clamp(16px, 1.6vw, 20px);
            line-height: 1;
        }

        .bt-pct small {
            font-size: 8px;
            font-weight: 700;
            letter-spacing: 0.22em;
            color: var(--color-white);
            opacity: 0.9;
        }

        .bt-name {
            position: relative;
            z-index: 1;
            margin: 40px 0 0;
            font-family: "Playfair Display", serif;
            font-weight: 700;
            font-size: clamp(15px, 1.5vw, 19px);
            line-height: 1.25;
            letter-spacing: 0.03em;
            text-transform: uppercase;
            color: var(--color-red-dark);
            overflow-wrap: anywhere;
            padding: 0 4px;
        }

        .bt-cls {
            position: relative;
            z-index: 1;
            display: block;
            margin-top: 7px;
            font-size: 11px;
            font-weight: 600;
            letter-spacing: 0.2em;
            text-transform: uppercase;
            color: var(--color-charcoal);
        }

        .bt-cls::before {
            content: "";
            display: block;
            width: 26px;
            height: 2px;
            margin: 0 auto 9px;
            background: var(--color-gold-dark);
            transition: width 0.4s;
        }

        @media (max-width: 991px) {
            .bt-row {
                grid-template-columns: minmax(0, 1fr);
                gap: 56px;
            }

            .bt-col {
                padding: 0 8px;
            }

            .bt-col+.bt-col {
                border-left: 0;
                border-top: 2px dotted rgba(232, 184, 78, 0.65);
                padding-top: 48px;
            }
        }

        @media (max-width: 560px) {
            .bt-title {
                gap: 10px;
            }

            .bt-title p,
            .bt-all {
                display: none;
            }

            .bt-orb {
                width: min(164px, 74%);
            }

            .bt-down .bt-item {
                margin-top: 30px;
            }

            .bt-swiper {
                padding-left: 6px;
                padding-right: 6px;
            }

            .bt-pct {
                padding: 6px 12px;
                gap: 4px;
                bottom: -16px;
            }

            .bt-pct b {
                font-size: 15px;
            }

            .bt-pct small {
                font-size: 7px;
                letter-spacing: 0.14em;
            }

            .bt-name {
                font-size: 13px;
                margin-top: 34px;
                letter-spacing: 0.01em;
            }

            .bt-cls {
                font-size: 10px;
                letter-spacing: 0.14em;
            }
        }

        @media (max-width: 360px) {
            .bt-btn {
                width: 36px;
                height: 36px;
            }

            .bt-pct {
                padding: 6px 12px;
            }
        }

        @media (prefers-reduced-motion: reduce) {

            .bt-img,
            .bt-ring,
            .bt-pct,
            .bt-cls::before {
                transition: none;
            }
        }

        /* ==========================================
        11. ENROLL BANNER
        ========================================== */
        .ban1-hero {
            position: relative;
            padding-top: 20px;
            overflow: hidden;
        }

        .ban1-stage {
            position: relative;
            z-index: 2;
            width: var(--ban1-w);
            margin: 0 auto;
            aspect-ratio: 1600/935;
        }

        .ban1-media {
            position: absolute;
            inset: 0;
        }

        .ban1-card {
            position: absolute;
            left: 11.6%;
            right: 11.6%;
            top: 35.8%;
            bottom: 0;
            background: var(--color-white);
            border-radius: 30px;
            box-shadow: 0 18px 40px rgba(143, 0, 8, 0.15);
        }

        .ban1-student {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .ban1-content {
            position: absolute;
            left: 14%;
            right: 14%;
            top: 41%;
            bottom: 4%;
            gap: clamp(6px, 1.4vw, 14px);
        }

        .ban1-title {
            font-family: var(--herosl-sans);
            font-weight: 600;
            color: var(--color-red);
            font-size: clamp(16px, 3.1vw, 29px);
            line-height: 1.25;
            margin: 0;
            letter-spacing: 0.01em;
        }

        .ban1-text {
            font-size: clamp(12px, 1.8vw, 17px);
            line-height: 1.4;
            max-width: 28ch;
            margin: 0;
            color: var(--color-charcoal);
        }

        .ban1-btn {
            background: linear-gradient(180deg,
                    var(--color-gold) 0%,
                    var(--color-gold-dark) 100%);
            color: var(--color-ink);
            font-weight: 600;
            border: 0;
            padding: clamp(8px, 1.3vw, 13px) clamp(18px, 3vw, 30px) clamp(8px, 1.3vw, 13px) clamp(8px, 1.3vw, 12px);
            font-size: clamp(12px, 1.7vw, 15px);
            box-shadow: 0 8px 18px rgba(232, 184, 78, 0.55);
            transition:
                transform 0.2s,
                box-shadow 0.2s;
        }

        .ban1-btn:hover {
            color: var(--color-ink);
            transform: translateY(-2px);
            box-shadow: 0 12px 22px rgba(232, 184, 78, 0.65);
        }

        .ban1-btn:focus-visible {
            outline: 3px solid var(--color-red);
            outline-offset: 3px;
        }

        .ban1-btn-ico {
            width: 1.9em;
            height: 1.9em;
            border-radius: 50%;
            background: var(--color-red);
            color: var(--color-gold);
            font-size: 0.95em;
            flex: none;
        }

        .ban1-call {
            font-size: clamp(10px, 1.5vw, 14px);
            color: var(--color-charcoal);
        }

        .ban1-call a {
            color: var(--color-ink);
            font-weight: 500;
        }

        .ban1-call-ico {
            width: 2em;
            height: 2em;
            border-radius: 50%;
            background: var(--color-red);
            color: var(--color-white);
            font-size: 0.95em;
            flex: none;
            box-shadow: 0 0 0 4px rgba(237, 0, 8, 0.12);
        }

        .ban1-band {
            position: relative;
            z-index: 1;
            margin-top: calc(var(--ban1-w) * -0.124);
            padding: calc(var(--ban1-w) * 0.124 + 60px) 0 60px;
            color: var(--color-white);
            background: linear-gradient(100deg,
                    var(--color-red-dark) 0%,
                    var(--color-red) 100%);
        }

        .ban1-stat {
            position: relative;
        }

        @media (min-width: 768px) {
            .ban1-stat+.ban1-stat::before {
                content: "";
                position: absolute;
                left: 0;
                top: 12%;
                bottom: 12%;
                width: 1px;
                background: rgba(255, 255, 255, 0.22);
            }
        }

        .ban1-icon {
            width: 64px;
            height: 64px;
            border-radius: 50%;
            font-size: 26px;
            background: linear-gradient(145deg,
                    var(--color-gold) 0%,
                    var(--color-gold-dark) 100%);
            color: var(--color-red-dark);
            box-shadow:
                0 0 0 6px rgba(255, 232, 26, 0.18),
                0 10px 20px rgba(0, 0, 0, 0.25);
            transition: transform 0.25s;
        }

        .ban1-stat:hover .ban1-icon {
            transform: translateY(-3px) scale(1.06);
        }

        .ban1-num {
            font-size: clamp(30px, 4.4vw, 46px);
            font-weight: 500;
            color: var(--color-gold);
            line-height: 1.1;
        }

        .ban1-label {
            font-size: clamp(10px, 1.2vw, 13px);
            letter-spacing: 0.08em;
            font-weight: 400;
        }

        .ban1-legs {
            position: relative;
            z-index: 2;
            display: block;
            width: min(250px, 50vw);
            height: auto;
            margin: -30px auto 0;
            top: 30px;
        }

        @media (max-width: 767.98px) {
            .ban1-hero {
                padding-top: 16px;
                padding-bottom: 0;
            }

            .ban1-stage {
                aspect-ratio: auto;
            }

            .ban1-media {
                position: relative;
                inset: auto;
                aspect-ratio: 1600/690;
                overflow: hidden;
            }

            .ban1-card {
                top: 48.5%;
                border-radius: 0;
                box-shadow: none;
            }

            .ban1-student {
                object-fit: cover;
                object-position: top center;
            }

            .ban1-content {
                position: relative;
                inset: auto;
                width: 76.8%;
                margin: calc(var(--ban1-w) * -0.2) auto 0;
                padding: 0 14px 28px;
                gap: 10px;
                background: var(--color-white);
                border-radius: 0 0 26px 26px;
                box-shadow: 0 18px 30px rgba(143, 0, 8, 0.15);
            }

            .ban1-title {
                font-size: 17px;
            }

            .ban1-text {
                font-size: 13px;
                max-width: 30ch;
            }

            .ban1-btn {
                font-size: 14px;
                padding: 8px 20px 8px 8px;
            }

            .ban1-call {
                font-size: 12px;
            }

            .ban1-band {
                margin-top: -30px;
                padding: 80px 0 44px;
            }

            .ban1-icon {
                width: 52px;
                height: 52px;
                font-size: 21px;
            }

            .ban1-num {
                font-size: 30px;
            }

            .ban1-label {
                font-size: 11px;
            }

            .ban1-legs {
                display: none;
            }
        }

        /* ==========================================
        12. MOBILE RESPONSIVE ADDITIONS
        ========================================== */
        html,
        body {
            max-width: 100%;
            overflow-x: hidden;
        }

        video,
        iframe {
            max-width: 100%;
        }

        body.nav-menu-open {
            overflow: hidden;
        }

        @media (max-width: 991.98px) {
            .nav-col-lg-8 {
                flex: 0 0 100%;
                max-width: 100%;
            }

            .nav-fullscreen-menu {
                padding-top: 120px;
            }

            .nav-menu-grid {
                padding: 0 15px;
            }
        }

        @media (max-width: 767.98px) {

            .nav-col-md-7,
            .nav-col-md-5 {
                flex: 0 0 100%;
                max-width: 100%;
            }

            .nav-fullscreen-contact {
                padding: 0 15px;
                text-align: center;
            }

            .bt-row {
                margin-top: 30px;
            }

            .gal-top {
                margin-bottom: 0;
            }
        }

        @media (max-width: 575.98px) {
            .nav-fullscreen-menu {
                padding-top: 100px;
            }

            .nav-menu-title {
                font-size: 1.05rem;
            }

            .herosl-section {
                padding: 100px 0 32px;
            }

            .herosl-eyebrow {
                letter-spacing: 0.22em;
                gap: 8px;
                flex-wrap: wrap;
                font-size: 11px;
            }

            .herosl-eyebrow span:last-child {
                margin-right: 0;
            }

            .herosl-title {
                font-size: 38px;
                margin-top: 16px;
            }

            .herosl-title em {
                font-size: clamp(72px, 24vw, 110px);
                margin-left: 6px;
            }

            .herosl-lead {
                font-size: 15px;
                max-width: 280px;
            }

            .herosl-slider {
                margin-top: 40px;
            }

            .herosl-card-body {
                padding: 0 70px 20px 20px;
            }

            .herosl-card-go {
                width: 42px;
                height: 42px;
                right: 18px;
                bottom: 20px;
            }

            .herosl-features {
                margin: 28px 8px 0;
            }

            .herosl-feature {
                padding: 0 6px;
            }

            .institutional-profile-section {
                padding-bottom: 40px;
            }

            .reference-collage-wrapper {
                height: 380px;
                gap: 10px;
            }

            .ref-card-1 {
                border-radius: 70px 18px 18px 18px;
            }

            .ref-card-2 {
                border-radius: 18px 70px 18px 18px;
            }

            .ref-card-3 {
                border-radius: 18px;
            }

            .ref-card-4 {
                border-radius: 18px 18px 70px 18px;
            }

            .ref-floating-badge {
                font-size: 0.7rem;
                letter-spacing: 2px;
                top: -22px;
            }

            .section-tag {
                font-size: 0.68rem;
                letter-spacing: 2px;
            }

            .profile-title {
                font-size: 1.8rem;
            }

            .narrative-p {
                font-size: 0.95rem;
                line-height: 1.65;
            }

            .editorial-content-area {
                margin-top: 32px;
            }

            .pm1-section {
                padding: 44px 0;
            }

            .pm1-title {
                font-size: 24px;
                margin-bottom: 14px;
            }

            .pm1-quote-ico {
                font-size: 30px;
                margin-bottom: 10px;
            }

            .pm1-text {
                font-size: 14px;
                line-height: 1.7;
            }

            .pm1-link {
                padding: 20px 6px;
                gap: 14px;
            }

            .pm1-lbl small {
                font-size: 11px;
            }

            .gal {
                padding: 44px 0;
            }

            .gal-head {
                gap: 12px;
            }

            .gal-ic {
                width: 44px;
                height: 44px;
                font-size: 1.15rem;
            }

            .gal-head-title {
                font-size: 1.4rem;
            }

            .gal-head-text {
                font-size: 0.82rem;
            }

            .gal-tools {
                margin-left: 0;
                width: 100%;
                gap: 8px;
            }

            .gal-arrow {
                width: 38px;
                height: 38px;
            }

            .gal-view {
                font-size: 0.84rem;
                margin-left: auto;
            }

            .gal-stack {
                --gal-w: max(200px, min(66cqw, 620px));
                margin-top: 30px;
            }

            .gal-card {
                padding: 7px;
                border-radius: 18px;
            }

            .gal-img {
                border-radius: 12px;
            }

            .gal-play {
                width: 54px;
                height: 54px;
                margin: -27px 0 0 -27px;
                font-size: 1.8rem;
            }

            .gal-text {
                font-size: 0.78rem;
            }

            .gal-btn {
                font-size: 0.78rem;
            }

            .fac-section {
                padding: 40px 0;
            }

            .bt-section {
                padding-top: 40px;
            }

            .bt-row {
                gap: 44px;
            }

            .ban1-band {
                padding: 70px 0 36px;
            }

            .ban1-label {
                letter-spacing: 0.04em;
            }
        }

        @media (max-width: 400px) {
            .nav-brand b {
                font-size: 16px;
            }

            .nav-brand small {
                font-size: 6.5px;
            }

            .nav-brand em {
                font-size: 9px;
            }

            .herosl-title {
                font-size: 34px;
            }

            .ban1-title {
                font-size: 15px;
            }

            .ban1-text {
                font-size: 12px;
            }

            .reference-collage-wrapper {
                height: 340px;
            }

            .profile-title {
                font-size: 1.6rem;
            }

            .gal-view {
                margin-left: 0;
            }
        }

        /* ==========================================================================
       13. BIRTHDAY + ACHIEVEMENTS  (every class starts with "bach-")
       ========================================================================== */
        .bach-section {
            position: relative;
            width: 100%;
            padding: 60px 0;
        }

        .bach-section::before {
            content: "";
            position: absolute;
            top: 10%;
            left: 5%;
            width: 350px;
            height: 350px;
            background: radial-gradient(circle,
                    rgba(255, 232, 26, 0.15) 0%,
                    transparent 70%);
            z-index: 0;
            pointer-events: none;
        }

        .bach-section button:focus-visible,
        .bach-section a:focus-visible {
            outline: 3px solid var(--color-gold-dark);
            outline-offset: 3px;
        }

        svg.bach-i {
            width: 1em;
            height: 1em;
            fill: none;
            stroke: currentColor;
            stroke-width: 2.4;
            stroke-linecap: round;
            stroke-linejoin: round;
        }

        /* ---------- birthday (positions in cqw of a 456px box) ---------- */
        .bach-bday {
            container-type: inline-size;
            position: relative;
            width: 100%;
            max-width: 456px;
            aspect-ratio: 456/672;
            margin: 0 auto;
            text-align: center;
        }

        .bach-bday>* {
            position: absolute;
        }

        .bach-bday img {
            display: block;
            max-width: none;
            height: auto;
        }

        .bach-flag {
            left: 6.6cqw;
            top: 0;
            width: 90.1cqw;
        }

        .bach-bday .bach-t {
            left: 0;
            width: 100%;
            margin: 0;
            line-height: 1;
            transform: translateY(-50%);
            white-space: nowrap;
        }

        .bach-wish,
        .bach-month {
            font:
                300 2.95cqw "Rubik",
                sans-serif;
            letter-spacing: 0.14em;
            text-transform: uppercase;
            color: var(--color-charcoal);
        }

        .bach-month {
            letter-spacing: 0.1em;
            font-size: 3.05cqw;
        }

        .bach-title {
            font:
                400 7.7cqw "Marcellus",
                serif;
            letter-spacing: 0.02em;
            text-transform: uppercase;
            color: var(--color-red);
        }

        .bach-wish {
            top: 29.7cqw;
        }

        .bach-title {
            top: 36.8cqw;
        }

        .bach-month {
            top: 45.1cqw;
        }

        .bach-bl {
            top: 47.4cqw;
            transform-origin: 50% 100%;
            animation: bach-sway 5.5s ease-in-out infinite;
            z-index: 1;
        }

        .bach-bl.bach-l {
            left: 0;
            width: 24.1cqw;
        }

        .bach-bl.bach-r {
            right: 0;
            width: 25cqw;
            animation-delay: -2.7s;
        }

        @keyframes bach-sway {
            50% {
                transform: rotate(2.5deg) translateY(-6px);
            }
        }

        .bach-caps {
            z-index: 3;
            left: 14.7cqw;
            top: 79.7cqw;
            width: 67.7cqw;
            pointer-events: none;
        }

        .bach-pswiper {
            z-index: 2;
            left: 0;
            top: 54.8cqw;
            width: 100cqw;
            height: 84cqw;
        }

        .bach-pswiper .swiper-slide {
            height: 100%;
        }

        .bach-pcard {
            position: absolute;
            left: 28.2cqw;
            top: 0;
            width: 43.9cqw;
            height: 50.4cqw;
            border-radius: 6.5cqw;
            overflow: hidden;
            isolation: isolate;
            -webkit-mask-image: -webkit-radial-gradient(#fff, #000);
            background: var(--color-white);
            box-shadow: 0 14px 34px rgba(6, 16, 10, 0.1);
            display: grid;
            place-items: center;
        }

        .bach-pcard .bach-who {
            width: 80%;
            height: auto;
        }

        .bach-pcard .bach-pic {
            position: absolute;
            inset: 0;
            border-radius: inherit;
            background: center top/cover no-repeat;
        }

        .bach-pswiper .swiper-slide .bach-t {
            position: absolute;
        }

        .bach-nm {
            top: 57.2cqw;
            font:
                700 3.85cqw "Rubik",
                sans-serif;
            letter-spacing: 0.06em;
            text-transform: uppercase;
            color: var(--color-ink);
        }

        .bach-cl {
            top: 65.1cqw;
            font:
                700 3.4cqw "Rubik",
                sans-serif;
            letter-spacing: 0.1em;
            text-transform: uppercase;
            color: var(--color-ink);
        }

        .bach-dt {
            top: 72.6cqw;
            font:
                700 4.65cqw "Rubik",
                sans-serif;
            letter-spacing: 0.05em;
            text-transform: uppercase;
            color: var(--color-red);
        }

        .bach-dt sup {
            font-size: 0.68em;
            text-transform: lowercase;
            letter-spacing: 0;
            vertical-align: baseline;
            position: relative;
            top: -0.45em;
        }

        .bach-rl {
            top: 80.2cqw;
            font:
                400 3.95cqw "Rubik",
                sans-serif;
            text-transform: uppercase;
            color: var(--color-ink);
        }

        .bach-dctl {
            left: 0;
            width: 100%;
            top: 140.7cqw;
            display: flex;
            justify-content: center;
            gap: 1.1cqw;
        }

        .bach-dbtn {
            width: 6.6cqw;
            height: 6.6cqw;
            min-width: 28px;
            min-height: 28px;
            border: 0;
            border-radius: 50%;
            background: var(--color-red);
            color: var(--color-white);
            font-size: 3.3cqw;
            display: grid;
            place-items: center;
            transition: 0.2s;
        }

        .bach-dbtn:hover {
            background: var(--color-red-dark);
            transform: scale(1.08);
        }

        /* ---------- achievements ---------- */
        .bach-ahead {
            text-align: center;
            margin-bottom: 1rem;
        }

        .bach-ahead h2 {
            margin: 0;
            font:
                400 clamp(1.9rem, 3vw, 2.6rem)/1.1 "Marcellus",
                serif;
            color: var(--color-red);
            text-transform: uppercase;
        }

        .bach-ahead p {
            margin: 0.5rem 0 0;
            font-weight: 600;
            color: var(--color-ink);
        }

        .bach-ahead i {
            display: block;
            width: 70px;
            height: 4px;
            border-radius: 4px;
            margin: 0.6rem auto 0;
            background: linear-gradient(90deg, var(--color-red), var(--color-gold));
        }

        .bach-aswiper {
            flex: 1;
            min-height: 0;
            width: calc(100% + 40px);
            padding: 12px 20px 30px;
            margin: 0 -20px;
        }

        .bach-aswiper .swiper-slide {
            height: auto;
            display: flex;
        }

        .bach-acard {
            display: flex;
            flex-direction: column;
            width: 100%;
            color: inherit;
            text-decoration: none;
        }

        .bach-photo {
            position: relative;
            z-index: 2;
            flex: 1 1 auto;
            min-height: 250px;
            border: 5px solid var(--color-white);
            border-radius: 28px;
            overflow: hidden;
            background: linear-gradient(150deg,
                    var(--color-red),
                    var(--color-red-dark));
            box-shadow: 0 14px 26px -12px rgba(6, 16, 10, 0.45);
            display: grid;
            place-items: center;
        }

        .bach-photo .bach-ph {
            width: 110px;
            height: 110px;
            opacity: 0.4;
        }

        .bach-photo .bach-pic {
            position: absolute;
            inset: 0;
            background: center/cover no-repeat;
            transition: transform 0.7s;
        }

        .bach-acard:hover .bach-pic {
            transform: scale(1.06);
        }

        .bach-chip {
            position: absolute;
            z-index: 3;
            top: 14px;
            left: 14px;
            padding: 0.3rem 0.85rem;
            border-radius: 99px;
            background: var(--color-gold);
            color: var(--color-red-dark);
            font:
                600 0.78rem "Rubik",
                sans-serif;
            box-shadow: 0 4px 10px rgba(6, 16, 10, 0.25);
        }

        .bach-badge {
            position: absolute;
            z-index: 3;
            top: 12px;
            right: 12px;
            width: 46px;
            height: 46px;
            border-radius: 50%;
            background: var(--color-white);
            display: grid;
            place-items: center;
            box-shadow: 0 4px 12px rgba(6, 16, 10, 0.25);
        }

        .bach-badge svg {
            width: 26px;
            height: 26px;
        }

        .bach-abody {
            background: var(--color-white);
            border-radius: 38px;
            margin: -52px -14px 0;
            padding: 74px 30px 24px;
            text-align: center;
            box-shadow: 0 22px 36px -20px rgba(6, 16, 10, 0.4);
            transition: transform 0.35s;
        }

        .bach-acard:hover .bach-abody {
            transform: translateY(4px);
        }

        .bach-adate {
            display: block;
            margin-bottom: 0.35rem;
            font:
                500 0.8rem "Rubik",
                sans-serif;
            color: var(--color-red);
        }

        .bach-abody h4 {
            margin: 0 0 0.55rem;
            font:
                600 1.12rem/1.3 "Rubik",
                sans-serif;
            color: var(--color-ink);
        }

        .bach-abody p {
            margin: 0 0 1rem;
            color: var(--color-charcoal);
            font-size: 0.9rem;
            line-height: 1.65;
            display: -webkit-box;
            -webkit-line-clamp: 3;
            -webkit-box-orient: vertical;
            overflow: hidden;
        }

        .bach-more {
            display: inline-flex;
            align-items: center;
            gap: 0.4rem;
            padding: 0.35rem 1.1rem;
            border-radius: 99px;
            background: var(--color-gold-soft);
            color: var(--color-red-dark);
            font-weight: 600;
            font-size: 0.85rem;
            transition: 0.2s;
        }

        .bach-acard:hover .bach-more {
            background: var(--color-gold);
        }

        .bach-actl {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 12px;
        }

        .bach-abtn {
            width: 40px;
            height: 40px;
            border: 0;
            border-radius: 50%;
            background: var(--color-white);
            color: var(--color-ink);
            font-size: 1.1rem;
            display: grid;
            place-items: center;
            box-shadow: 0 3px 10px rgba(6, 16, 10, 0.2);
            transition: 0.2s;
        }

        .bach-abtn:hover {
            background: var(--color-red);
            color: var(--color-white);
        }

        .bach-viewall {
            display: inline-block;
            padding: 0.6rem 1.7rem;
            border: 2px solid var(--color-white);
            border-radius: 99px;
            color: var(--color-white);
            font-weight: 500;
            text-decoration: none;
            background: linear-gradient(180deg,
                    var(--color-red),
                    var(--color-red-dark));
            box-shadow: 0 4px 12px rgba(6, 16, 10, 0.3);
            transition: 0.2s;
        }

        .bach-viewall:hover {
            color: var(--color-white);
            transform: translateY(-2px);
        }

        @media (prefers-reduced-motion: reduce) {
            .bach-section * {
                animation: none !important;
                transition: none !important;
            }
        }

        /* ---------- bach: mobile ---------- */
        @media (max-width: 575.98px) {
            .bach-section {
                padding-bottom: 40px;
            }

            .bach-aswiper {
                width: calc(100% + 24px);
                margin: 0 -12px;
                padding: 12px 12px 30px;
            }

            .bach-photo {
                min-height: 220px;
            }

            .bach-abody {
                margin: -52px -4px 0;
                padding: 68px 20px 20px;
                border-radius: 30px;
            }

            .bach-abody h4 {
                font-size: 1.02rem;
            }

            .bach-abody p {
                font-size: 0.86rem;
            }

            .bach-actl {
                gap: 8px;
            }

            .bach-viewall {
                padding: 0.5rem 1.3rem;
                font-size: 0.9rem;
            }
        }

        /* Footer  */

        .ftr-site-footer {
            position: relative;
            background-color: var(--color-body);
            color: var(--color-ink);
            padding-top: 100px;
            overflow: hidden;
        }

        /* Background Image Container */
        .ftr-bg-container {
            position: absolute;
            inset: 0;
            width: 100%;
            height: 100%;
            z-index: 1;
        }

        .ftr-bg-img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            object-position: center;
        }

        /* Top Wave Transition */
        .ftr-wave {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            line-height: 0;
            z-index: 3;
        }

        .ftr-wave svg {
            display: block;
            width: 100%;
            height: 60px;
        }

        .ftr-wave .shape-fill {
            fill: #faf2e4;
        }

        /* Main Content Container */
        .ftr-main-container {
            position: relative;
            z-index: 5;
        }

        /* Logo Box */
        .ftr-logo-box {
            background: var(--color-white);
            width: fit-content;
            padding: 12px 18px;
            border-radius: 20px;
            margin-bottom: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            border: 2px solid var(--color-gold);
            box-shadow: 0 10px 25px rgba(237, 0, 8, 0.15);
        }

        .ftr-logo-box img {
            max-width: 90px;
            height: auto;
        }

        /* School Name & Brand Typography */
        .ftr-brand h2 {
            font-family: var(--font-serif);
            font-size: 1.55rem;
            font-weight: 800;
            color: var(--color-red);
            margin-bottom: 15px;
            line-height: 1.25;
            letter-spacing: 0.5px;
        }

        .ftr-brand h2 span {
            color: var(--color-charcoal);
            font-size: 1.25rem;
            font-weight: 700;
        }

        .ftr-brand p {
            font-family: var(--font-sans);
            font-size: 0.9rem;
            color: var(--color-ink);
            font-weight: 600;
            line-height: 1.7;
        }

        /* Section Headings */
        .ftr-heading {
            font-family: var(--font-sans);
            font-size: 1.15rem;
            font-weight: 800;
            color: var(--color-charcoal);
            text-transform: uppercase;
            letter-spacing: 1.5px;
            margin-bottom: 25px;
            position: relative;
            display: inline-block;
        }

        .ftr-heading::after {
            content: "";
            position: absolute;
            left: 0;
            bottom: -8px;
            width: 45px;
            height: 3px;
            background: var(--color-red);
            border-radius: 2px;
        }

        /* Quick Links */
        .ftr-links {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .ftr-links li {
            margin-bottom: 12px;
        }

        .ftr-links a {
            font-family: var(--font-sans);
            color: var(--color-ink);
            text-decoration: none;
            font-size: 0.92rem;
            font-weight: 700;
            transition: all 0.3s ease;
            display: flex;
            align-items: center;
        }

        .ftr-links a i {
            font-size: 0.8rem;
            margin-right: 10px;
            color: var(--color-red);
            transition: transform 0.3s ease;
        }

        .ftr-links a:hover {
            color: var(--color-red);
            transform: translateX(6px);
        }

        .ftr-links a:hover i {
            transform: translateX(4px);
            color: var(--color-charcoal);
        }

        /* Contact Info Items */
        .ftr-c-item {
            display: flex;
            align-items: flex-start;
            margin-bottom: 18px;
        }

        .ftr-c-item i {
            background: linear-gradient(135deg,
                    var(--color-red),
                    var(--color-red-dark));
            color: var(--color-gold-soft);
            width: 38px;
            height: 38px;
            border-radius: 10px;
            display: flex;
            align-items: center;
            justify-content: center;
            margin-right: 14px;
            flex-shrink: 0;
            box-shadow: 0 4px 12px rgba(237, 0, 8, 0.2);
            font-size: 0.95rem;
            border: 1px solid var(--color-gold);
        }

        .ftr-c-item p {
            margin: 0;
            font-family: var(--font-sans);
            font-size: 0.9rem;
            font-weight: 700;
            line-height: 1.5;
            color: var(--color-ink);
        }

        /* Social Media Icons */
        .ftr-social-row {
            display: flex;
            gap: 10px;
            margin-top: 15px;
        }

        .ftr-social-row a {
            color: var(--color-white);
            background: linear-gradient(135deg,
                    var(--color-red),
                    var(--color-red-dark));
            border: 1px solid var(--color-gold);
            width: 38px;
            height: 38px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            border-radius: 50%;
            transition: all 0.3s ease;
            text-decoration: none;
            box-shadow: 0 4px 12px rgba(237, 0, 8, 0.2);
        }

        .ftr-social-row a:hover {
            background: var(--color-gold);
            color: var(--color-charcoal);
            border-color: var(--color-red-dark);
            transform: translateY(-4px);
            box-shadow: 0 6px 15px rgba(255, 232, 26, 0.3);
        }

        /* Map Frame */
        .ftr-map-container {
            border-radius: 14px;
            overflow: hidden;
            height: 130px;
            margin-bottom: 18px;
            border: 2.5px solid var(--color-white);
            background: var(--color-white);
            box-shadow: 0 8px 25px rgba(143, 0, 8, 0.2);
        }

        .ftr-map-container iframe {
            width: 100%;
            height: 100%;
            border: 0;
        }

        /* App Store Buttons */
        .ftr-store-btns {
            display: flex;
            flex-direction: row;
            flex-wrap: wrap;
            gap: 10px;
        }

        .ftr-store-btn {
            flex: 1;
            min-width: 120px;
            background: linear-gradient(135deg,
                    var(--color-red) 0%,
                    var(--color-ink) 100%);
            padding: 8px 12px;
            border-radius: 30px;
            display: flex;
            align-items: center;
            text-decoration: none;
            color: var(--color-white);
            transition: all 0.3s ease;
            border: 1.5px solid var(--color-gold);
            box-shadow: 0 4px 14px rgba(237, 0, 8, 0.2);
        }

        .ftr-store-btn:hover {
            background: linear-gradient(135deg,
                    var(--color-red-dark) 0%,
                    var(--color-ink) 100%);
            color: var(--color-gold-soft);
            transform: translateY(-3px);
            box-shadow: 0 8px 20px rgba(255, 232, 26, 0.3);
        }

        .ftr-store-btn i {
            font-size: 1.2rem;
            margin-right: 10px;
            color: var(--color-gold);
            transition: color 0.3s ease;
        }

        .ftr-store-btn:hover i {
            color: var(--color-gold-soft);
        }

        .ftr-store-btn span {
            display: block;
            font-size: 0.62rem;
            opacity: 0.9;
            line-height: 1;
            text-transform: uppercase;
        }

        .ftr-store-btn b {
            font-size: 0.8rem;
        }

        /* Bottom Frame & School Image Bar */
        .ftr-school-frame {
            position: relative;
            margin-top: 50px;
            border-radius: 20px 20px 0 0;
            overflow: hidden;
            line-height: 0;
            z-index: 5;
        }

        .ftr-school-frame img {
            width: 100%;
            height: auto;
            object-fit: cover;
            margin-top: -80px;
        }

        .ftr-bottom-bar {
            position: absolute;
            bottom: 0;
            left: 0;
            width: 100%;
            backdrop-filter: blur(8px);
            padding: 16px 0;
            text-align: center;
            font-family: var(--font-sans);
            font-size: 0.85rem;
            line-height: 1.6;
            border-top: 2px solid var(--color-gold);
            color: var(--color-white);
        }

        .ftr-bottom-bar p {
            margin: 0;
        }

        .ftr-bottom-bar span {
            color: var(--color-gold);
            font-weight: 700;
        }

        /* Floating Back to Top Button */
        .ftr-back-to-top {
            position: fixed;
            bottom: 30px;
            right: 30px;
            width: 45px;
            height: 45px;
            background: var(--color-red);
            color: var(--color-gold-soft);
            border: 2px solid var(--color-gold);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 1.2rem;
            cursor: pointer;
            z-index: 99;
            transition: all 0.3s ease;
            box-shadow: 0 6px 20px rgba(237, 0, 8, 0.2);
            text-decoration: none;
        }

        .ftr-back-to-top:hover {
            transform: translateY(-5px);
            background: var(--color-gold);
            color: var(--color-ink);
            border-color: var(--color-red-dark);
            box-shadow: 0 8px 25px rgba(255, 232, 26, 0.3);
        }

        /* Mobile Responsive */
        @media (max-width: 575px) {
            .ftr-school-frame img {
                margin-bottom: 80px;
                margin-top: 0 !important;
            }
        }



/* ============================================================================== */
        /* Banners & Overlays */
        /* ============================================================================== */
        .universal-banner,
        .hero-banner {
            background: linear-gradient(to right, rgba(6, 16, 10, 0.9), rgba(143, 0, 8, 0.85), rgba(6, 16, 10, 0.9)), url('../images/Schoolrudra.webp') center/cover no-repeat;
            height: 430px;
            position: relative;
            display: flex;
            align-items: center;
            justify-content: center;
            overflow: hidden;
        }

        .hero-overlay {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background-color: var(--color-ink);
            opacity: 0.75;
            z-index: 1;
        }

        /* ============================================================================== */
        /* Enhanced Banner & Title Design */
        /* ============================================================================== */

        .banner-content {
            position: relative;
            z-index: 2;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            margin-top: 100px;
        }

        .banner-content h1 {
            font-size: 2.5rem;
            font-weight: 800;
            color: var(--color-white);
            letter-spacing: 3px;
            text-transform: uppercase;
            text-shadow: 0 4px 15px rgba(0, 0, 0, 0.6);
            margin-bottom: 15px;
        }

        /* Red Monotone Separator */
        .heading-separator {
            width: 100px;
            height: 5px;
            background: linear-gradient(90deg, var(--color-red), var(--color-red-dark));
            border-radius: 5px;
            margin: 0 auto 25px;
            box-shadow: 0 0 12px rgba(237, 0, 8, 0.4);
        }

        .banner-footer {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 15px;
            margin-top: 10px;
        }

        .decorative-line {
            height: 2px;
            width: 60px;
            background: linear-gradient(90deg, transparent, var(--color-red), transparent);
        }

        .location-tag {
            margin: 0;
            padding: 5px 10px;
            background: rgba(143, 0, 8, 0.6);
            backdrop-filter: blur(8px);
            -webkit-backdrop-filter: blur(8px);
            border: 1px solid rgba(237, 0, 8, 0.5);
            border-radius: 40px;
            color: var(--color-white);
            font-weight: 500;
            font-size: 0.9rem;
            letter-spacing: 1px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
        }

        @media (max-width: 768px) {
            .banner-content h1 {
                font-size: 2.5rem;
            }

            .decorative-line {
                display: none;
            }

            .location-tag {
                font-size: 0.95rem;
                padding: 8px 18px;
            }
        }

        /* ============================================================================== */
        /* General Content Styles */
        /* ============================================================================== */

        .about-content {
            padding: 50px 0px;
            background: var(--color-body);
        }

        .page-heading {
            text-transform: uppercase;
            position: relative;
            color: var(--color-red);
            font-weight: 700;
        }

        .about-quote {
            text-transform: uppercase;
            position: relative;
            color: var(--color-red);
            font-weight: 600;
        }

        .yellow-divider {
            width: 200px;
            height: 6px;
            background: linear-gradient(90deg, var(--color-red), var(--color-red-dark));
            margin: 10px auto;
            border-radius: 1px;
        }

        .heroSwiper {
            width: 100%;
            height: 100%;
        }

        .heroSwiper .swiper-slide {
            width: 100%;
            height: 100%;
        }

        .heroSwiper img {
            width: 100%;
            height: 100%;
            object-fit: cover;
        }

        /* ============================================================================== */
        /* Cards */
        /* ============================================================================== */
        .custom-card {
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            border-radius: var(--card-radius, 8px);
            border: 1px solid rgba(237, 0, 8, 0.2);
        }

        .custom-card:hover {
            transform: translateY(-5px);
            box-shadow: 0 10px 20px rgba(237, 0, 8, 0.15);
        }

        .card-img-top {
            height: 220px;
            object-fit: cover;
            border-top-left-radius: var(--card-radius, 8px);
            border-top-right-radius: var(--card-radius, 8px);
        }

        /* ============================================================================== */
        /* Lists */
        /* ============================================================================== */
        .list-styling-arrow {
            padding: 0% 0% 0% 1%;
            margin: 0;
        }

        .list-styling-arrow li {
            position: relative;
            line-height: 28px;
            padding: 0px 0 0px 32px;
            list-style: none;
            margin: 8px 0;
            color: var(--color-ink);
        }

        .list-styling-arrow li::before {
            content: "\f00c";
            font-family: "Font Awesome 6 Free";
            font-weight: 900;
            position: absolute;
            left: 0;
            top: 14px;
            transform: translateY(-50%);
            width: 20px;
            height: 20px;
            display: flex;
            align-items: center;
            justify-content: center;
            background: var(--color-red);
            color: var(--color-white);
            font-size: 11px;
            border-radius: 20px;
        }

        ol li {
            line-height: 28px;
            padding: 0px !important;
            list-style-type: disc !important;
            background: none !important;
            list-style: none;
            margin: 8px 0px;
            vertical-align: middle;
            color: var(--color-ink);
        }

        /* ============================================================================== */
        /* Tables */
        /* ============================================================================== */
        thead th {
            background: linear-gradient(135deg, var(--color-red), var(--color-red-dark)) !important;
            color: var(--color-white) !important;
            border-color: var(--color-red-dark) !important;
            text-align: center;
            vertical-align: middle;
            font-weight: 700;
        }

        table td {
            font-size: 15px;
            background: var(--color-white) !important;
            color: var(--color-ink);
            border-color: rgba(237, 0, 8, 0.15);
        }

        /* ============================================================================== */
        /* Accordion */
        /* ============================================================================== */

        .accordion-item {
            border: none;
            background: transparent;
            margin-bottom: 10px;
        }

        .accordion-button {
            background: linear-gradient(135deg, var(--color-red), var(--color-red-dark));
            color: var(--color-white);
            border-radius: 10px !important;
            padding: 15px 20px;
            border: none;
            box-shadow: none;
            transition: all 0.3s ease;
            font-weight: 700;
        }

        .accordion-button::after {
            display: none;
        }

        .arrow-icon {
            transition: transform 0.3s ease;
            font-size: 14px;
            color: var(--color-white);
        }

        .accordion-button:not(.collapsed) .arrow-icon {
            transform: rotate(180deg);
        }

        /* OPEN STATE HEADER (Red Theme Variant) */
        .accordion-button:not(.collapsed) {
            border-radius: 10px 10px 0 0 !important;
            background: linear-gradient(135deg, var(--color-red), var(--color-red-dark));
            color: var(--color-white);
        }

        .accordion-button:not(.collapsed) .arrow-icon {
            color: var(--color-white);
        }

        .accordion-body {
            background: var(--color-body);
            border: 1px solid rgba(237, 0, 8, 0.2);
            border-top: none;
            border-radius: 0 0 10px 10px;
            padding: 20px;
            color: var(--color-ink);
        }

        .accordion-collapse {
            border: none;
            margin-top: -5px;
        }

        .accordion-button:focus {
            box-shadow: none;
        }