{"id":57779,"date":"2026-09-18T18:41:13","date_gmt":"2026-09-18T18:41:13","guid":{"rendered":"https:\/\/mbararahigh.sc.ug\/?page_id=57779"},"modified":"2026-10-05T22:24:41","modified_gmt":"2026-10-05T22:24:41","slug":"home","status":"publish","type":"page","link":"https:\/\/mbararahigh.sc.ug\/","title":{"rendered":"Home"},"content":{"rendered":"<div>\n<p>    <!-- ============================================================\n     MBARARA HIGH SCHOOL\n     PREMIUM CINEMATIC HERO SLIDER\n     COMPLETE RESPONSIVE VERSION\n     ============================================================ --><\/p>\n<section class=\"mhs-hero-slider\" id=\"mhsHeroSlider\">\n<div class=\"mhs-slides\">\n<p>        <!-- ====================================================\n             SLIDE 01 \u2014 HERITAGE\n             ==================================================== --><\/p>\n<article class=\"mhs-slide is-active\" data-slide=\"1\">\n<div class=\"mhs-slide-image\"\n                 style=\"background-image:url('\/wp-content\/uploads\/MHSC_2025_DJI_0052-scaled.jpg');\">\n            <\/div>\n<div class=\"mhs-image-shade\"><\/div>\n<div class=\"mhs-slide-glow\"><\/div>\n<div class=\"mhs-hero-container\">\n<div class=\"mhs-hero-content\">\n<div class=\"mhs-slide-eyebrow\">\n                        <span class=\"mhs-eyebrow-line\"><\/span><br \/>\n                        MBARARA HIGH SCHOOL\n                    <\/div>\n<h1 class=\"mhs-hero-title\">\n                        A Legacy of<br \/>\n                        <span>Strength.<\/span><br \/>\n                        A Future of Excellence.<br \/>\n                    <\/h1>\n<p class=\"mhs-hero-text\">\n                        Since 1911, generations of young men have<br \/>\n                        walked these grounds with courage, discipline<br \/>\n                        and purpose.\n                    <\/p>\n<div class=\"mhs-hero-buttons\">\n<p>                        <a href=\"\/about\/\"\n                           class=\"mhs-btn mhs-btn-primary\"><br \/>\n                            Discover Our Story<br \/>\n                            <span>\u2192<\/span><br \/>\n                        <\/a><\/p>\n<p>                        <a href=\"\/contact\/\"\n                           class=\"mhs-btn mhs-btn-ghost\"><br \/>\n                            Visit MHS<br \/>\n                        <\/a><\/p><\/div>\n<\/p><\/div>\n<div class=\"mhs-heritage-card\">\n<p>                    <span class=\"mhs-card-label\"><br \/>\n                        OUR HERITAGE<br \/>\n                    <\/span><\/p>\n<p>                    <strong>115<\/strong><\/p>\n<p>                    <span class=\"mhs-card-years\"><br \/>\n                        YEARS OF LEGACY<br \/>\n                    <\/span><\/p>\n<div class=\"mhs-card-rule\"><\/div>\n<p>                    <small><br \/>\n                        1911 \u2014 2026<br \/>\n                    <\/small><\/p><\/div>\n<\/p><\/div>\n<\/article>\n<p>        <!-- ====================================================\n             SLIDE 02 \u2014 ACADEMICS\n             ==================================================== --><\/p>\n<article class=\"mhs-slide\" data-slide=\"2\">\n<div class=\"mhs-slide-image\"\n                 style=\"background-image:url('\/wp-content\/uploads\/Gemini_Generated_Image_sr3d11sr3d11sr3d.png');\">\n            <\/div>\n<div class=\"mhs-image-shade\"><\/div>\n<div class=\"mhs-slide-glow\"><\/div>\n<div class=\"mhs-hero-container\">\n<div class=\"mhs-hero-content\">\n<div class=\"mhs-slide-eyebrow\">\n                        <span class=\"mhs-eyebrow-line\"><\/span><br \/>\n                        ACADEMIC EXCELLENCE\n                    <\/div>\n<h2 class=\"mhs-hero-title\">\n                        Learning That<br \/>\n                        <span>Builds Minds.<\/span><br \/>\n                        Character That Builds Men.<br \/>\n                    <\/h2>\n<p class=\"mhs-hero-text\">\n                        We nurture intellectual curiosity,<br \/>\n                        discipline and confidence, preparing<br \/>\n                        students to meet the future with strength.\n                    <\/p>\n<div class=\"mhs-hero-buttons\">\n<p>                        <a href=\"\/academics\/\"\n                           class=\"mhs-btn mhs-btn-primary\"><br \/>\n                            Explore Academics<br \/>\n                            <span>\u2192<\/span><br \/>\n                        <\/a><\/p><\/div>\n<\/p><\/div>\n<div class=\"mhs-word-card\">\n<p>                    <span>LEARN<\/span><br \/>\n                    <i><\/i><br \/>\n                    <span>LEAD<\/span><br \/>\n                    <i><\/i><br \/>\n                    <span>EXCEL<\/span><\/p><\/div>\n<\/p><\/div>\n<\/article>\n<p>        <!-- ====================================================\n             SLIDE 03 \u2014 STUDENT LIFE\n             ==================================================== --><\/p>\n<article class=\"mhs-slide\" data-slide=\"3\">\n<div class=\"mhs-slide-image\"\n                 style=\"background-image:url('\/wp-content\/uploads\/mhsc2O2A8835-scaled.jpg');\">\n            <\/div>\n<div class=\"mhs-image-shade\"><\/div>\n<div class=\"mhs-slide-glow\"><\/div>\n<div class=\"mhs-hero-container\">\n<div class=\"mhs-hero-content\">\n<div class=\"mhs-slide-eyebrow\">\n                        <span class=\"mhs-eyebrow-line\"><\/span><br \/>\n                        BEYOND THE CLASSROOM\n                    <\/div>\n<h2 class=\"mhs-hero-title\">\n                        Discover Talent.<br \/>\n                        <span>Build Character.<\/span><br \/>\n                        Inspire Leadership.<br \/>\n                    <\/h2>\n<p class=\"mhs-hero-text\">\n                        Sport, leadership, creativity and<br \/>\n                        co-curricular life form an essential part<br \/>\n                        of the Mbarara High School experience.\n                    <\/p>\n<div class=\"mhs-hero-buttons\">\n<p>                        <a href=\"\/activities\/\"\n                           class=\"mhs-btn mhs-btn-primary\"><br \/>\n                            Student Life<br \/>\n                            <span>\u2192<\/span><br \/>\n                        <\/a><\/p><\/div>\n<\/p><\/div>\n<div class=\"mhs-word-card\">\n<p>                    <span>COURAGE<\/span><br \/>\n                    <i><\/i><br \/>\n                    <span>DISCIPLINE<\/span><br \/>\n                    <i><\/i><br \/>\n                    <span>LEADERSHIP<\/span><\/p><\/div>\n<\/p><\/div>\n<\/article>\n<p>        <!-- ====================================================\n             SLIDE 04 \u2014 HISTORY\n             ==================================================== --><\/p>\n<article class=\"mhs-slide\" data-slide=\"4\">\n<div class=\"mhs-slide-image\"\n                 style=\"background-image:url('\/wp-content\/uploads\/MG_1898.jpg');\">\n            <\/div>\n<div class=\"mhs-image-shade\"><\/div>\n<div class=\"mhs-slide-glow\"><\/div>\n<div class=\"mhs-hero-container\">\n<div class=\"mhs-hero-content\">\n<div class=\"mhs-slide-eyebrow\">\n                        <span class=\"mhs-eyebrow-line\"><\/span><br \/>\n                        SINCE 1911\n                    <\/div>\n<h2 class=\"mhs-hero-title\">\n                        Rooted in History.<br \/>\n                        <span>Ready for Tomorrow.<\/span><br \/>\n                    <\/h2>\n<p class=\"mhs-hero-text\">\n                        From our beginnings in Kamukuzi to our<br \/>\n                        home on Ruharo Hill, our story continues<br \/>\n                        through every generation.\n                    <\/p>\n<div class=\"mhs-hero-buttons\">\n<p>                        <a href=\"\/about\/\"\n                           class=\"mhs-btn mhs-btn-primary\"><br \/>\n                            Our History<br \/>\n                            <span>\u2192<\/span><br \/>\n                        <\/a><\/p><\/div>\n<\/p><\/div>\n<div class=\"mhs-motto-card\">\n<p>                    <span>OUR MOTTO<\/span><\/p>\n<p>                    <strong><br \/>\n                        MUGUME<br \/>\n                        <br \/>\n                        NAMAANI<br \/>\n                    <\/strong><\/p>\n<p>                    <small><br \/>\n                        BE STRONG AND COURAGEOUS<br \/>\n                    <\/small><\/p><\/div>\n<\/p><\/div>\n<\/article><\/div>\n<p>    <!-- DECORATIVE ARCHITECTURAL LINES --><\/p>\n<div class=\"mhs-hero-architecture\">\n        <span><\/span><br \/>\n        <span><\/span><br \/>\n        <span><\/span>\n    <\/div>\n<p>    <!-- ========================================================\n         SLIDER CONTROLS\n         ======================================================== --><\/p>\n<div class=\"mhs-slider-controls\">\n<div class=\"mhs-slide-counter\">\n<p>            <span id=\"mhsCurrentSlide\">01<\/span><\/p>\n<div class=\"mhs-counter-line\"><\/div>\n<p>            <span>04<\/span><\/p><\/div>\n<div class=\"mhs-slider-progress\">\n            <span id=\"mhsProgress\"><\/span>\n        <\/div>\n<div class=\"mhs-slider-dots\">\n<p>            <button class=\"mhs-dot is-active\"\n                    data-index=\"0\"\n                    aria-label=\"Slide 1\"><br \/>\n            <\/button><\/p>\n<p>            <button class=\"mhs-dot\"\n                    data-index=\"1\"\n                    aria-label=\"Slide 2\"><br \/>\n            <\/button><\/p>\n<p>            <button class=\"mhs-dot\"\n                    data-index=\"2\"\n                    aria-label=\"Slide 3\"><br \/>\n            <\/button><\/p>\n<p>            <button class=\"mhs-dot\"\n                    data-index=\"3\"\n                    aria-label=\"Slide 4\"><br \/>\n            <\/button><\/p><\/div>\n<div class=\"mhs-slider-arrows\">\n<p>            <button id=\"mhsPrev\"\n                    aria-label=\"Previous slide\"><br \/>\n                \u2190<br \/>\n            <\/button><\/p>\n<p>            <button id=\"mhsNext\"\n                    aria-label=\"Next slide\"><br \/>\n                \u2192<br \/>\n            <\/button><\/p><\/div>\n<\/p><\/div>\n<p>    <a href=\"#mhs-after-hero\"\n       class=\"mhs-scroll-cue\"><\/p>\n<p>        <span>SCROLL TO EXPLORE<\/span><\/p>\n<p>        <i><\/i><\/p>\n<p>    <\/a><\/p>\n<\/section>\n<div id=\"mhs-after-hero\"><\/div>\n<style>\n<p>\/* ============================================================\n   GLOBAL \/ BASE\n   ============================================================ *\/<\/p>\n<p>#mhsHeroSlider,\n#mhsHeroSlider * {\n    box-sizing: border-box;\n}<\/p>\n<p>.mhs-hero-slider {<\/p>\n<p>    --mhs-blue: #078ee4;\n    --mhs-light: #76d0ff;\n    --mhs-navy: #03182e;<\/p>\n<p>    position: relative;<\/p>\n<p>    width: 100%;<\/p>\n<p>    height: clamp(680px, 86vh, 900px);\n    min-height: 680px;<\/p>\n<p>    overflow: hidden;<\/p>\n<p>    background: #021426;<\/p>\n<p>    color: #fff;<\/p>\n<p>    isolation: isolate;\n}<\/p>\n<p>\/* ============================================================\n   SLIDES\n   ============================================================ *\/<\/p>\n<p>.mhs-slides,\n.mhs-slide {<\/p>\n<p>    position: absolute;\n    inset: 0;<\/p>\n<p>}<\/p>\n<p>.mhs-slide {<\/p>\n<p>    opacity: 0;\n    visibility: hidden;<\/p>\n<p>    z-index: 1;<\/p>\n<p>    transition:\n        opacity 1.15s cubic-bezier(.4,0,.2,1),\n        visibility 1.15s;<\/p>\n<p>}<\/p>\n<p>.mhs-slide.is-active {<\/p>\n<p>    opacity: 1;\n    visibility: visible;<\/p>\n<p>    z-index: 2;<\/p>\n<p>}<\/p>\n<p>\/* ============================================================\n   PHOTOGRAPHS\n   ============================================================ *\/<\/p>\n<p>.mhs-slide-image {<\/p>\n<p>    position: absolute;<\/p>\n<p>    inset: -4%;<\/p>\n<p>    background-position: center;\n    background-repeat: no-repeat;\n    background-size: cover;<\/p>\n<p>    transform: scale(1.08);<\/p>\n<p>    transition:\n        transform 8s cubic-bezier(.16,.8,.3,1);<\/p>\n<p>}<\/p>\n<p>.mhs-slide.is-active .mhs-slide-image {<\/p>\n<p>    transform: scale(1);<\/p>\n<p>}<\/p>\n<p>\/* ============================================================\n   DESKTOP IMAGE SHADE\n   ============================================================ *\/<\/p>\n<p>.mhs-image-shade {<\/p>\n<p>    position: absolute;<\/p>\n<p>    inset: 0;<\/p>\n<p>    background:<\/p>\n<p>        linear-gradient(\n            90deg,\n            rgba(1,14,31,.95) 0%,\n            rgba(2,25,52,.84) 34%,\n            rgba(3,42,78,.48) 59%,\n            rgba(2,26,48,.13) 78%,\n            rgba(2,18,35,.28) 100%\n        ),<\/p>\n<p>        linear-gradient(\n            0deg,\n            rgba(1,13,27,.73) 0%,\n            transparent 35%,\n            rgba(1,15,30,.15) 100%\n        );<\/p>\n<p>}<\/p>\n<p>.mhs-slide-glow {<\/p>\n<p>    position: absolute;<\/p>\n<p>    left: -10%;\n    top: 20%;<\/p>\n<p>    width: 650px;\n    height: 650px;<\/p>\n<p>    border-radius: 50%;<\/p>\n<p>    background: rgba(0,135,225,.15);<\/p>\n<p>    filter: blur(110px);<\/p>\n<p>    pointer-events: none;<\/p>\n<p>}<\/p>\n<p>\/* ============================================================\n   CONTENT CONTAINER\n   ============================================================ *\/<\/p>\n<p>.mhs-hero-container {<\/p>\n<p>    position: relative;<\/p>\n<p>    z-index: 5;<\/p>\n<p>    width:\n        min(1380px, calc(100% - 100px));<\/p>\n<p>    height: 100%;<\/p>\n<p>    margin: auto;<\/p>\n<p>    display: flex;<\/p>\n<p>    align-items: center;<\/p>\n<p>    justify-content: space-between;<\/p>\n<p>    gap: 70px;<\/p>\n<p>    padding:\n        55px 0 125px;<\/p>\n<p>}<\/p>\n<p>.mhs-hero-content {<\/p>\n<p>    width: min(730px, 64%);<\/p>\n<p>    padding-top: 30px;<\/p>\n<p>}<\/p>\n<p>\/* ============================================================\n   EYEBROW\n   ============================================================ *\/<\/p>\n<p>.mhs-slide-eyebrow {<\/p>\n<p>    display: flex;<\/p>\n<p>    align-items: center;<\/p>\n<p>    gap: 15px;<\/p>\n<p>    margin-bottom: 22px;<\/p>\n<p>    color: #85d6ff;<\/p>\n<p>    font-size: 11px;<\/p>\n<p>    font-weight: 700;<\/p>\n<p>    letter-spacing: 5px;<\/p>\n<p>    opacity: 0;<\/p>\n<p>    transform: translateY(20px);<\/p>\n<p>}<\/p>\n<p>.mhs-eyebrow-line {<\/p>\n<p>    width: 42px;<\/p>\n<p>    height: 2px;<\/p>\n<p>    flex: 0 0 auto;<\/p>\n<p>    background:\n        linear-gradient(\n            90deg,\n            var(--mhs-blue),\n            #b6e9ff\n        );<\/p>\n<p>}<\/p>\n<p>\/* ============================================================\n   MAIN TITLE\n   ============================================================ *\/<\/p>\n<p>.mhs-hero-title {<\/p>\n<p>    max-width: 800px;<\/p>\n<p>    margin: 0;<\/p>\n<p>    color: #fff !important;<\/p>\n<p>    -webkit-text-fill-color:\n        #fff !important;<\/p>\n<p>    font-family:\n        \"Montserrat\",\n        \"Helvetica Neue\",\n        Arial,\n        sans-serif;<\/p>\n<p>    font-size:\n        clamp(48px, 5vw, 78px);<\/p>\n<p>    line-height: .98;<\/p>\n<p>    font-weight: 750;<\/p>\n<p>    letter-spacing: -3.4px;<\/p>\n<p>    text-wrap: balance;<\/p>\n<p>    opacity: 0;<\/p>\n<p>    transform: translateY(38px);<\/p>\n<p>}<\/p>\n<p>.mhs-hero-title span {<\/p>\n<p>    color: #78d0ff !important;<\/p>\n<p>    -webkit-text-fill-color:\n        #78d0ff !important;<\/p>\n<p>}<\/p>\n<p>\/* ============================================================\n   DESCRIPTION\n   ============================================================ *\/<\/p>\n<p>.mhs-hero-text {<\/p>\n<p>    max-width: 620px;<\/p>\n<p>    margin:\n        27px 0 31px;<\/p>\n<p>    color:\n        rgba(255,255,255,.80) !important;<\/p>\n<p>    font-size: 16px;<\/p>\n<p>    line-height: 1.8;<\/p>\n<p>    font-weight: 400;<\/p>\n<p>    opacity: 0;<\/p>\n<p>    transform: translateY(25px);<\/p>\n<p>}<\/p>\n<p>\/* ============================================================\n   BUTTON AREA\n   ============================================================ *\/<\/p>\n<p>.mhs-hero-buttons {<\/p>\n<p>    display: flex;<\/p>\n<p>    align-items: center;<\/p>\n<p>    flex-wrap: wrap;<\/p>\n<p>    gap: 12px;<\/p>\n<p>    opacity: 0;<\/p>\n<p>    transform: translateY(22px);<\/p>\n<p>}<\/p>\n<p>.mhs-btn {<\/p>\n<p>    min-height: 52px;<\/p>\n<p>    display: inline-flex;<\/p>\n<p>    align-items: center;<\/p>\n<p>    justify-content: center;<\/p>\n<p>    gap: 22px;<\/p>\n<p>    padding:\n        0 25px;<\/p>\n<p>    border-radius: 4px;<\/p>\n<p>    font-size: 12px;<\/p>\n<p>    font-weight: 700;<\/p>\n<p>    letter-spacing: .7px;<\/p>\n<p>    text-decoration:\n        none !important;<\/p>\n<p>    transition:\n        transform .25s ease,\n        background .25s ease,\n        border-color .25s ease,\n        box-shadow .25s ease;<\/p>\n<p>}<\/p>\n<p>.mhs-btn-primary {<\/p>\n<p>    background:\n        linear-gradient(\n            135deg,\n            #0877c8,\n            #08a0ee\n        );<\/p>\n<p>    color: #fff !important;<\/p>\n<p>    box-shadow:\n        0 12px 30px\n        rgba(0,126,210,.25);<\/p>\n<p>}<\/p>\n<p>.mhs-btn-primary:hover {<\/p>\n<p>    color: #fff !important;<\/p>\n<p>    transform:\n        translateY(-2px);<\/p>\n<p>    box-shadow:\n        0 17px 38px\n        rgba(0,126,210,.36);<\/p>\n<p>}<\/p>\n<p>.mhs-btn-primary span {<\/p>\n<p>    font-size: 18px;<\/p>\n<p>    transition:\n        transform .25s ease;<\/p>\n<p>}<\/p>\n<p>.mhs-btn-primary:hover span {<\/p>\n<p>    transform:\n        translateX(4px);<\/p>\n<p>}<\/p>\n<p>.mhs-btn-ghost {<\/p>\n<p>    border:\n        1px solid\n        rgba(255,255,255,.32);<\/p>\n<p>    background:\n        rgba(255,255,255,.07);<\/p>\n<p>    backdrop-filter:\n        blur(10px);<\/p>\n<p>    color: #fff !important;<\/p>\n<p>}<\/p>\n<p>.mhs-btn-ghost:hover {<\/p>\n<p>    border-color:\n        rgba(255,255,255,.65);<\/p>\n<p>    background:\n        rgba(255,255,255,.13);<\/p>\n<p>    color: #fff !important;<\/p>\n<p>}<\/p>\n<p>\/* ============================================================\n   HERITAGE + MOTTO CARDS\n   ============================================================ *\/<\/p>\n<p>.mhs-heritage-card,\n.mhs-motto-card {<\/p>\n<p>    position: relative;<\/p>\n<p>    width: 220px;<\/p>\n<p>    flex:\n        0 0 220px;<\/p>\n<p>    padding:\n        30px 27px;<\/p>\n<p>    border:\n        1px solid\n        rgba(255,255,255,.17);<\/p>\n<p>    border-radius: 3px;<\/p>\n<p>    background:\n        linear-gradient(\n            145deg,\n            rgba(255,255,255,.12),\n            rgba(255,255,255,.035)\n        );<\/p>\n<p>    backdrop-filter:\n        blur(15px);<\/p>\n<p>    box-shadow:\n        0 30px 70px\n        rgba(0,0,0,.19);<\/p>\n<p>    opacity: 0;<\/p>\n<p>    transform:\n        translateX(30px);<\/p>\n<p>    overflow: hidden;<\/p>\n<p>}<\/p>\n<p>.mhs-heritage-card::before,\n.mhs-motto-card::before {<\/p>\n<p>    content: \"\";<\/p>\n<p>    position: absolute;<\/p>\n<p>    left: 0;\n    top: 0;<\/p>\n<p>    width: 3px;\n    height: 100%;<\/p>\n<p>    background:\n        linear-gradient(\n            #71d4ff,\n            #087ccc\n        );<\/p>\n<p>}<\/p>\n<p>.mhs-card-label,\n.mhs-motto-card > span {<\/p>\n<p>    display: block;<\/p>\n<p>    color:\n        rgba(255,255,255,.58);<\/p>\n<p>    font-size: 9px;<\/p>\n<p>    font-weight: 700;<\/p>\n<p>    letter-spacing: 3px;<\/p>\n<p>}<\/p>\n<p>.mhs-heritage-card strong {<\/p>\n<p>    display: block;<\/p>\n<p>    margin:\n        9px 0 -3px;<\/p>\n<p>    color: #fff;<\/p>\n<p>    font-size: 67px;<\/p>\n<p>    line-height: 1;<\/p>\n<p>    font-weight: 300;<\/p>\n<p>    letter-spacing: -5px;<\/p>\n<p>}<\/p>\n<p>.mhs-card-years {<\/p>\n<p>    color: #75d0ff;<\/p>\n<p>    font-size: 10px;<\/p>\n<p>    font-weight: 700;<\/p>\n<p>    letter-spacing: 2px;<\/p>\n<p>}<\/p>\n<p>.mhs-card-rule {<\/p>\n<p>    width: 100%;<\/p>\n<p>    height: 1px;<\/p>\n<p>    margin:\n        20px 0 14px;<\/p>\n<p>    background:\n        rgba(255,255,255,.15);<\/p>\n<p>}<\/p>\n<p>.mhs-heritage-card small {<\/p>\n<p>    color:\n        rgba(255,255,255,.60);<\/p>\n<p>    font-size: 10px;<\/p>\n<p>    letter-spacing: 3px;<\/p>\n<p>}<\/p>\n<p>\/* ============================================================\n   MOTTO CARD\n   ============================================================ *\/<\/p>\n<p>.mhs-motto-card {<\/p>\n<p>    width: 260px;<\/p>\n<p>    flex-basis: 260px;<\/p>\n<p>}<\/p>\n<p>.mhs-motto-card strong {<\/p>\n<p>    display: block;<\/p>\n<p>    margin:\n        14px 0 15px;<\/p>\n<p>    color: #fff;<\/p>\n<p>    font-size: 32px;<\/p>\n<p>    line-height: 1;<\/p>\n<p>    letter-spacing: -1px;<\/p>\n<p>}<\/p>\n<p>.mhs-motto-card small {<\/p>\n<p>    color: #77d1ff;<\/p>\n<p>    font-size: 9px;<\/p>\n<p>    font-weight: 700;<\/p>\n<p>    letter-spacing: 2px;<\/p>\n<p>}<\/p>\n<p>\/* ============================================================\n   WORD CARD\n   ============================================================ *\/<\/p>\n<p>.mhs-word-card {<\/p>\n<p>    display: flex;<\/p>\n<p>    align-items: center;<\/p>\n<p>    gap: 11px;<\/p>\n<p>    padding:\n        13px 17px;<\/p>\n<p>    border:\n        1px solid\n        rgba(255,255,255,.17);<\/p>\n<p>    background:\n        rgba(2,25,48,.24);<\/p>\n<p>    backdrop-filter:\n        blur(12px);<\/p>\n<p>    color:\n        rgba(255,255,255,.78);<\/p>\n<p>    font-size: 9px;<\/p>\n<p>    font-weight: 700;<\/p>\n<p>    letter-spacing: 2px;<\/p>\n<p>    opacity: 0;<\/p>\n<p>    transform:\n        translateX(30px);<\/p>\n<p>}<\/p>\n<p>.mhs-word-card i {<\/p>\n<p>    width: 4px;\n    height: 4px;<\/p>\n<p>    border-radius: 50%;<\/p>\n<p>    background: #35b8ff;<\/p>\n<p>}<\/p>\n<p>\/* ============================================================\n   ACTIVE SLIDE REVEALS\n   ============================================================ *\/<\/p>\n<p>.mhs-slide.is-active\n.mhs-slide-eyebrow {<\/p>\n<p>    animation:\n        mhsHeroReveal\n        .7s .25s forwards;<\/p>\n<p>}<\/p>\n<p>.mhs-slide.is-active\n.mhs-hero-title {<\/p>\n<p>    animation:\n        mhsHeroReveal\n        .85s .38s forwards;<\/p>\n<p>}<\/p>\n<p>.mhs-slide.is-active\n.mhs-hero-text {<\/p>\n<p>    animation:\n        mhsHeroReveal\n        .8s .56s forwards;<\/p>\n<p>}<\/p>\n<p>.mhs-slide.is-active\n.mhs-hero-buttons {<\/p>\n<p>    animation:\n        mhsHeroReveal\n        .8s .70s forwards;<\/p>\n<p>}<\/p>\n<p>.mhs-slide.is-active\n.mhs-heritage-card,<\/p>\n<p>.mhs-slide.is-active\n.mhs-motto-card,<\/p>\n<p>.mhs-slide.is-active\n.mhs-word-card {<\/p>\n<p>    animation:\n        mhsCardReveal\n        .9s .72s forwards;<\/p>\n<p>}<\/p>\n<p>@keyframes mhsHeroReveal {<\/p>\n<p>    to {<\/p>\n<p>        opacity: 1;<\/p>\n<p>        transform:\n            translateY(0);<\/p>\n<p>    }<\/p>\n<p>}<\/p>\n<p>@keyframes mhsCardReveal {<\/p>\n<p>    to {<\/p>\n<p>        opacity: 1;<\/p>\n<p>        transform:\n            translateX(0);<\/p>\n<p>    }<\/p>\n<p>}<\/p>\n<p>\/* ============================================================\n   ARCHITECTURAL DECORATION\n   ============================================================ *\/<\/p>\n<p>.mhs-hero-architecture {<\/p>\n<p>    position: absolute;<\/p>\n<p>    right: -100px;<\/p>\n<p>    bottom: 20%;<\/p>\n<p>    width: 450px;\n    height: 450px;<\/p>\n<p>    z-index: 3;<\/p>\n<p>    opacity: .08;<\/p>\n<p>    pointer-events: none;<\/p>\n<p>}<\/p>\n<p>.mhs-hero-architecture span {<\/p>\n<p>    position: absolute;<\/p>\n<p>    border:\n        1px solid #83d8ff;<\/p>\n<p>    transform:\n        rotate(45deg);<\/p>\n<p>}<\/p>\n<p>.mhs-hero-architecture span:nth-child(1) {<\/p>\n<p>    inset: 0;<\/p>\n<p>}<\/p>\n<p>.mhs-hero-architecture span:nth-child(2) {<\/p>\n<p>    inset: 60px;<\/p>\n<p>}<\/p>\n<p>.mhs-hero-architecture span:nth-child(3) {<\/p>\n<p>    inset: 120px;<\/p>\n<p>}<\/p>\n<p>\/* ============================================================\n   BOTTOM CONTROLS\n   ============================================================ *\/<\/p>\n<p>.mhs-slider-controls {<\/p>\n<p>    position: absolute;<\/p>\n<p>    z-index: 20;<\/p>\n<p>    left: 50%;<\/p>\n<p>    bottom: 48px;<\/p>\n<p>    width:\n        min(1380px, calc(100% - 100px));<\/p>\n<p>    transform:\n        translateX(-50%);<\/p>\n<p>    display: grid;<\/p>\n<p>    grid-template-columns:\n        auto minmax(100px, 280px)\n        1fr auto;<\/p>\n<p>    align-items: center;<\/p>\n<p>    gap: 24px;<\/p>\n<p>}<\/p>\n<p>\/* Counter *\/<\/p>\n<p>.mhs-slide-counter {<\/p>\n<p>    display: flex;<\/p>\n<p>    align-items: center;<\/p>\n<p>    gap: 9px;<\/p>\n<p>    color:\n        rgba(255,255,255,.52);<\/p>\n<p>    font-size: 10px;<\/p>\n<p>    font-weight: 700;<\/p>\n<p>    letter-spacing: 2px;<\/p>\n<p>}<\/p>\n<p>#mhsCurrentSlide {<\/p>\n<p>    color: #fff;<\/p>\n<p>    font-size: 14px;<\/p>\n<p>}<\/p>\n<p>.mhs-counter-line {<\/p>\n<p>    width: 25px;<\/p>\n<p>    height: 1px;<\/p>\n<p>    background:\n        rgba(255,255,255,.32);<\/p>\n<p>}<\/p>\n<p>\/* Progress *\/<\/p>\n<p>.mhs-slider-progress {<\/p>\n<p>    position: relative;<\/p>\n<p>    height: 2px;<\/p>\n<p>    overflow: hidden;<\/p>\n<p>    background:\n        rgba(255,255,255,.17);<\/p>\n<p>}<\/p>\n<p>.mhs-slider-progress span {<\/p>\n<p>    position: absolute;<\/p>\n<p>    left: 0;\n    top: 0;<\/p>\n<p>    width: 0;\n    height: 100%;<\/p>\n<p>    background:\n        linear-gradient(\n            90deg,\n            #078fe5,\n            #8bdcff\n        );<\/p>\n<p>}<\/p>\n<p>\/* Dots *\/<\/p>\n<p>.mhs-slider-dots {<\/p>\n<p>    display: flex;<\/p>\n<p>    justify-content: flex-end;<\/p>\n<p>    gap: 9px;<\/p>\n<p>}<\/p>\n<p>.mhs-dot {<\/p>\n<p>    width: 7px;\n    height: 7px;<\/p>\n<p>    padding: 0;<\/p>\n<p>    border: 0;<\/p>\n<p>    border-radius: 50%;<\/p>\n<p>    background:\n        rgba(255,255,255,.32);<\/p>\n<p>    cursor: pointer;<\/p>\n<p>    transition:\n        width .3s ease,\n        border-radius .3s ease,\n        background .3s ease;<\/p>\n<p>}<\/p>\n<p>.mhs-dot.is-active {<\/p>\n<p>    width: 26px;<\/p>\n<p>    border-radius: 10px;<\/p>\n<p>    background: #5bc7ff;<\/p>\n<p>}<\/p>\n<p>\/* Arrows *\/<\/p>\n<p>.mhs-slider-arrows {<\/p>\n<p>    display: flex;<\/p>\n<p>    gap: 8px;<\/p>\n<p>}<\/p>\n<p>.mhs-slider-arrows button {<\/p>\n<p>    width: 43px;\n    height: 43px;<\/p>\n<p>    display: flex;<\/p>\n<p>    align-items: center;\n    justify-content: center;<\/p>\n<p>    border:\n        1px solid\n        rgba(255,255,255,.22);<\/p>\n<p>    border-radius: 50%;<\/p>\n<p>    background:\n        rgba(255,255,255,.055);<\/p>\n<p>    backdrop-filter:\n        blur(10px);<\/p>\n<p>    color: #fff;<\/p>\n<p>    font-size: 17px;<\/p>\n<p>    cursor: pointer;<\/p>\n<p>    transition:\n        background .25s ease,\n        border-color .25s ease,\n        transform .25s ease;<\/p>\n<p>}<\/p>\n<p>.mhs-slider-arrows button:hover {<\/p>\n<p>    background: #087fce;<\/p>\n<p>    border-color: #087fce;<\/p>\n<p>    transform:\n        translateY(-2px);<\/p>\n<p>}<\/p>\n<p>\/* ============================================================\n   SCROLL CUE\n   ============================================================ *\/<\/p>\n<p>.mhs-scroll-cue {<\/p>\n<p>    position: absolute;<\/p>\n<p>    z-index: 15;<\/p>\n<p>    right: 27px;<\/p>\n<p>    top: 50%;<\/p>\n<p>    display: flex;<\/p>\n<p>    align-items: center;<\/p>\n<p>    gap: 13px;<\/p>\n<p>    transform:\n        translateY(-50%)\n        rotate(90deg);<\/p>\n<p>    transform-origin: center;<\/p>\n<p>    color:\n        rgba(255,255,255,.50) !important;<\/p>\n<p>    font-size: 8px;<\/p>\n<p>    font-weight: 700;<\/p>\n<p>    letter-spacing: 3px;<\/p>\n<p>    text-decoration:\n        none !important;<\/p>\n<p>}<\/p>\n<p>.mhs-scroll-cue i {<\/p>\n<p>    position: relative;<\/p>\n<p>    width: 52px;\n    height: 1px;<\/p>\n<p>    overflow: hidden;<\/p>\n<p>    background:\n        rgba(255,255,255,.20);<\/p>\n<p>}<\/p>\n<p>.mhs-scroll-cue i::after {<\/p>\n<p>    content: \"\";<\/p>\n<p>    position: absolute;<\/p>\n<p>    width: 25px;\n    height: 100%;<\/p>\n<p>    background: #68ceff;<\/p>\n<p>    animation:\n        mhsScrollMove\n        1.8s infinite ease-in-out;<\/p>\n<p>}<\/p>\n<p>@keyframes mhsScrollMove {<\/p>\n<p>    from {<\/p>\n<p>        left: -25px;<\/p>\n<p>    }<\/p>\n<p>    to {<\/p>\n<p>        left: 55px;<\/p>\n<p>    }<\/p>\n<p>}<\/p>\n<p>\/* ============================================================\n   TABLET\n   ============================================================ *\/<\/p>\n<p>@media (max-width: 1100px) {<\/p>\n<p>    .mhs-hero-container,\n    .mhs-slider-controls {<\/p>\n<p>        width:\n            calc(100% - 60px);<\/p>\n<p>    }<\/p>\n<p>    .mhs-hero-title {<\/p>\n<p>        font-size:\n            clamp(45px, 6vw, 68px);<\/p>\n<p>    }<\/p>\n<p>    .mhs-heritage-card,\n    .mhs-motto-card,\n    .mhs-word-card {<\/p>\n<p>        display: none;<\/p>\n<p>    }<\/p>\n<p>    .mhs-hero-content {<\/p>\n<p>        width: 78%;<\/p>\n<p>    }<\/p>\n<p>}<\/p>\n<p>\/* ============================================================\n   MOBILE\n   ============================================================ *\/<\/p>\n<p>@media (max-width: 767px) {<\/p>\n<p>    .mhs-hero-slider {<\/p>\n<p>        \/*\n         * Taller than the old mobile version.\n         * This gives the photograph and text room to breathe.\n         *\/<\/p>\n<p>        height: 82dvh;<\/p>\n<p>        min-height: 650px;<\/p>\n<p>        max-height: 820px;<\/p>\n<p>    }<\/p>\n<p>    \/* --------------------------------------------------------\n       PHOTOGRAPH\n       -------------------------------------------------------- *\/<\/p>\n<p>    .mhs-slide-image {<\/p>\n<p>        inset: 0;<\/p>\n<p>        transform:\n            scale(1.05);<\/p>\n<p>        background-position:\n            center center;<\/p>\n<p>        background-size:\n            cover;<\/p>\n<p>    }<\/p>\n<p>    .mhs-slide.is-active\n    .mhs-slide-image {<\/p>\n<p>        transform:\n            scale(1);<\/p>\n<p>    }<\/p>\n<p>    \/* --------------------------------------------------------\n       MOBILE SHADE\n       -------------------------------------------------------- *\/<\/p>\n<p>    .mhs-image-shade {<\/p>\n<p>        background:<\/p>\n<p>            linear-gradient(\n                0deg,\n                rgba(1,13,28,.97) 0%,\n                rgba(2,22,46,.91) 28%,\n                rgba(2,30,59,.72) 49%,\n                rgba(3,37,69,.38) 70%,\n                rgba(2,18,35,.14) 100%\n            ),<\/p>\n<p>            linear-gradient(\n                90deg,\n                rgba(0,19,39,.20),\n                transparent 48%,\n                rgba(0,19,39,.12)\n            );<\/p>\n<p>    }<\/p>\n<p>    \/* --------------------------------------------------------\n       CONTENT POSITION\n       -------------------------------------------------------- *\/<\/p>\n<p>    .mhs-hero-container {<\/p>\n<p>        width:\n            calc(100% - 40px);<\/p>\n<p>        height: 100%;<\/p>\n<p>        display: flex;<\/p>\n<p>        align-items: flex-end;<\/p>\n<p>        padding:\n            54px 0 124px;<\/p>\n<p>    }<\/p>\n<p>    .mhs-hero-content {<\/p>\n<p>        width: 100%;<\/p>\n<p>        max-width: 620px;<\/p>\n<p>        padding: 0;<\/p>\n<p>    }<\/p>\n<p>    \/* --------------------------------------------------------\n       EYEBROW\n       -------------------------------------------------------- *\/<\/p>\n<p>    .mhs-slide-eyebrow {<\/p>\n<p>        gap: 10px;<\/p>\n<p>        margin-bottom: 13px;<\/p>\n<p>        font-size: 10px;<\/p>\n<p>        line-height: 1.35;<\/p>\n<p>        font-weight: 700;<\/p>\n<p>        letter-spacing: 3px;<\/p>\n<p>    }<\/p>\n<p>    .mhs-eyebrow-line {<\/p>\n<p>        width: 30px;<\/p>\n<p>        height: 2px;<\/p>\n<p>    }<\/p>\n<p>    \/* --------------------------------------------------------\n       MAIN MOBILE TITLE\n       -------------------------------------------------------- *\/<\/p>\n<p>    .mhs-hero-title {<\/p>\n<p>        max-width: 100%;<\/p>\n<p>        font-size:\n            clamp(34px, 9.2vw, 44px);<\/p>\n<p>        line-height: 1.02;<\/p>\n<p>        font-weight: 750;<\/p>\n<p>        letter-spacing: -1.7px;<\/p>\n<p>        text-wrap: balance;<\/p>\n<p>    }<\/p>\n<p>    .mhs-hero-title span {<\/p>\n<p>        color:\n            #78d0ff !important;<\/p>\n<p>        -webkit-text-fill-color:\n            #78d0ff !important;<\/p>\n<p>    }<\/p>\n<p>    \/*\n     * Slides 2 and 3 have considerably more title text.\n     * Reduce them only slightly rather than shrinking every\n     * slide.\n     *\/<\/p>\n<p>    .mhs-slide[data-slide=\"2\"]\n    .mhs-hero-title,<\/p>\n<p>    .mhs-slide[data-slide=\"3\"]\n    .mhs-hero-title {<\/p>\n<p>        font-size:\n            clamp(32px, 8.6vw, 41px);<\/p>\n<p>        line-height: 1.03;<\/p>\n<p>    }<\/p>\n<p>    \/* --------------------------------------------------------\n       DESCRIPTION\n       -------------------------------------------------------- *\/<\/p>\n<p>    .mhs-hero-text {<\/p>\n<p>        max-width: 96%;<\/p>\n<p>        margin:\n            17px 0 22px;<\/p>\n<p>        font-size: 15px;<\/p>\n<p>        line-height: 1.55;<\/p>\n<p>        font-weight: 400;<\/p>\n<p>        color:\n            rgba(255,255,255,.84) !important;<\/p>\n<p>    }<\/p>\n<p>    \/* --------------------------------------------------------\n       MOBILE BUTTON\n       -------------------------------------------------------- *\/<\/p>\n<p>    .mhs-hero-buttons {<\/p>\n<p>        gap: 10px;<\/p>\n<p>    }<\/p>\n<p>    .mhs-btn {<\/p>\n<p>        width: auto;<\/p>\n<p>        min-width: 175px;<\/p>\n<p>        max-width: 88%;<\/p>\n<p>        min-height: 48px;<\/p>\n<p>        padding:\n            0 22px;<\/p>\n<p>        font-size: 12px;<\/p>\n<p>        font-weight: 700;<\/p>\n<p>        letter-spacing: .45px;<\/p>\n<p>    }<\/p>\n<p>    .mhs-btn-primary span {<\/p>\n<p>        font-size: 18px;<\/p>\n<p>    }<\/p>\n<p>    .mhs-btn-ghost {<\/p>\n<p>        display: none;<\/p>\n<p>    }<\/p>\n<p>    \/* --------------------------------------------------------\n       MOBILE CONTROLS\n       -------------------------------------------------------- *\/<\/p>\n<p>    .mhs-slider-controls {<\/p>\n<p>        left: 20px;<\/p>\n<p>        right: 20px;<\/p>\n<p>        bottom: 28px;<\/p>\n<p>        width: auto;<\/p>\n<p>        transform: none;<\/p>\n<p>        grid-template-columns:\n            auto 1fr auto;<\/p>\n<p>        gap: 14px;<\/p>\n<p>    }<\/p>\n<p>    .mhs-slider-progress {<\/p>\n<p>        display: block;<\/p>\n<p>    }<\/p>\n<p>    .mhs-slider-dots {<\/p>\n<p>        display: none;<\/p>\n<p>    }<\/p>\n<p>    .mhs-slider-arrows {<\/p>\n<p>        gap: 7px;<\/p>\n<p>    }<\/p>\n<p>    .mhs-slider-arrows button {<\/p>\n<p>        width: 39px;<\/p>\n<p>        height: 39px;<\/p>\n<p>        font-size: 15px;<\/p>\n<p>    }<\/p>\n<p>    \/* Counter *\/<\/p>\n<p>    .mhs-slide-counter {<\/p>\n<p>        gap: 7px;<\/p>\n<p>        font-size: 9px;<\/p>\n<p>        letter-spacing: 1.4px;<\/p>\n<p>    }<\/p>\n<p>    #mhsCurrentSlide {<\/p>\n<p>        font-size: 12px;<\/p>\n<p>    }<\/p>\n<p>    .mhs-counter-line {<\/p>\n<p>        width: 16px;<\/p>\n<p>    }<\/p>\n<p>    \/* Remove desktop decorations *\/<\/p>\n<p>    .mhs-scroll-cue,\n    .mhs-hero-architecture {<\/p>\n<p>        display: none;<\/p>\n<p>    }<\/p>\n<p>}<\/p>\n<p>\/* ============================================================\n   VERY SMALL PHONES\n   ============================================================ *\/<\/p>\n<p>@media (max-width: 390px) {<\/p>\n<p>    .mhs-hero-slider {<\/p>\n<p>        height: 84dvh;<\/p>\n<p>        min-height: 630px;<\/p>\n<p>        max-height: 780px;<\/p>\n<p>    }<\/p>\n<p>    .mhs-hero-container {<\/p>\n<p>        width:\n            calc(100% - 32px);<\/p>\n<p>        padding:\n            48px 0 116px;<\/p>\n<p>    }<\/p>\n<p>    .mhs-hero-title {<\/p>\n<p>        font-size:\n            clamp(32px, 9vw, 38px);<\/p>\n<p>        line-height: 1.03;<\/p>\n<p>        letter-spacing: -1.4px;<\/p>\n<p>    }<\/p>\n<p>    .mhs-slide[data-slide=\"2\"]\n    .mhs-hero-title,<\/p>\n<p>    .mhs-slide[data-slide=\"3\"]\n    .mhs-hero-title {<\/p>\n<p>        font-size:\n            clamp(30px, 8.4vw, 36px);<\/p>\n<p>    }<\/p>\n<p>    .mhs-hero-text {<\/p>\n<p>        max-width: 100%;<\/p>\n<p>        margin:\n            15px 0 19px;<\/p>\n<p>        font-size: 14px;<\/p>\n<p>        line-height: 1.52;<\/p>\n<p>    }<\/p>\n<p>    .mhs-slide-eyebrow {<\/p>\n<p>        margin-bottom: 11px;<\/p>\n<p>        font-size: 9px;<\/p>\n<p>        letter-spacing: 2.5px;<\/p>\n<p>    }<\/p>\n<p>    .mhs-btn {<\/p>\n<p>        min-height: 46px;<\/p>\n<p>        min-width: 165px;<\/p>\n<p>        padding:\n            0 19px;<\/p>\n<p>        font-size: 11px;<\/p>\n<p>    }<\/p>\n<p>    .mhs-slider-controls {<\/p>\n<p>        left: 16px;<\/p>\n<p>        right: 16px;<\/p>\n<p>        bottom: 25px;<\/p>\n<p>    }<\/p>\n<p>}<\/p>\n<p>\/* ============================================================\n   SHORT MOBILE SCREENS\n   Prevent content collision on landscape\/short browsers\n   ============================================================ *\/<\/p>\n<p>@media (max-width: 767px) and (max-height: 680px) {<\/p>\n<p>    .mhs-hero-slider {<\/p>\n<p>        height: 680px;<\/p>\n<p>        min-height: 680px;<\/p>\n<p>    }<\/p>\n<p>    .mhs-hero-container {<\/p>\n<p>        padding-bottom: 108px;<\/p>\n<p>    }<\/p>\n<p>    .mhs-hero-title {<\/p>\n<p>        font-size:\n            clamp(31px, 8.5vw, 38px);<\/p>\n<p>    }<\/p>\n<p>    .mhs-slide[data-slide=\"2\"]\n    .mhs-hero-title,<\/p>\n<p>    .mhs-slide[data-slide=\"3\"]\n    .mhs-hero-title {<\/p>\n<p>        font-size:\n            clamp(29px, 8vw, 35px);<\/p>\n<p>    }<\/p>\n<p>    .mhs-hero-text {<\/p>\n<p>        font-size: 14px;<\/p>\n<p>        margin:\n            14px 0 17px;<\/p>\n<p>    }<\/p>\n<p>}<\/p>\n<p>\/* ============================================================\n   REDUCED MOTION\n   ============================================================ *\/<\/p>\n<p>@media (prefers-reduced-motion: reduce) {<\/p>\n<p>    .mhs-slide-image,\n    .mhs-slide-eyebrow,\n    .mhs-hero-title,\n    .mhs-hero-text,\n    .mhs-hero-buttons,\n    .mhs-heritage-card,\n    .mhs-motto-card,\n    .mhs-word-card {<\/p>\n<p>        animation:\n            none !important;<\/p>\n<p>        transition:\n            none !important;<\/p>\n<p>        opacity:\n            1 !important;<\/p>\n<p>        transform:\n            none !important;<\/p>\n<p>    }<\/p>\n<p>}<\/p>\n<\/style>\n<p><script><\/p>\n<p>(function () {<\/p>\n<p>    const slider =\n        document.getElementById('mhsHeroSlider');<\/p>\n<p>    if (!slider) return;<\/p>\n<p>    const slides =\n        Array.from(\n            slider.querySelectorAll('.mhs-slide')\n        );<\/p>\n<p>    const dots =\n        Array.from(\n            slider.querySelectorAll('.mhs-dot')\n        );<\/p>\n<p>    const prev =\n        slider.querySelector('#mhsPrev');<\/p>\n<p>    const next =\n        slider.querySelector('#mhsNext');<\/p>\n<p>    const counter =\n        slider.querySelector('#mhsCurrentSlide');<\/p>\n<p>    const progress =\n        slider.querySelector('#mhsProgress');<\/p>\n<p>    const duration = 6500;<\/p>\n<p>    let current = 0;<\/p>\n<p>    let timer = null;<\/p>\n<p>    let touchStartX = 0;<\/p>\n<p>    let touchEndX = 0;<\/p>\n<p>    \/* ========================================================\n       PROGRESS BAR\n       ======================================================== *\/<\/p>\n<p>    function startProgress() {<\/p>\n<p>        if (!progress) return;<\/p>\n<p>        progress.style.transition = 'none';<\/p>\n<p>        progress.style.width = '0%';<\/p>\n<p>        requestAnimationFrame(function () {<\/p>\n<p>            requestAnimationFrame(function () {<\/p>\n<p>                progress.style.transition =\n                    'width ' +\n                    duration +\n                    'ms linear';<\/p>\n<p>                progress.style.width =\n                    '100%';<\/p>\n<p>            });<\/p>\n<p>        });<\/p>\n<p>    }<\/p>\n<p>    \/* ========================================================\n       SHOW SLIDE\n       ======================================================== *\/<\/p>\n<p>    function showSlide(index) {<\/p>\n<p>        if (index < 0) {\n\n            index =\n                slides.length - 1;\n\n        }\n\n\n        if (index >= slides.length) {<\/p>\n<p>            index = 0;<\/p>\n<p>        }<\/p>\n<p>        slides.forEach(function (slide) {<\/p>\n<p>            slide.classList.remove(\n                'is-active'\n            );<\/p>\n<p>        });<\/p>\n<p>        dots.forEach(function (dot) {<\/p>\n<p>            dot.classList.remove(\n                'is-active'\n            );<\/p>\n<p>        });<\/p>\n<p>        \/*\n         * Force browser reflow so the entrance animation\n         * restarts when a slide returns.\n         *\/<\/p>\n<p>        void slides[index].offsetWidth;<\/p>\n<p>        slides[index].classList.add(\n            'is-active'\n        );<\/p>\n<p>        if (dots[index]) {<\/p>\n<p>            dots[index].classList.add(\n                'is-active'\n            );<\/p>\n<p>        }<\/p>\n<p>        current = index;<\/p>\n<p>        if (counter) {<\/p>\n<p>            counter.textContent =\n                String(index + 1)\n                .padStart(2, '0');<\/p>\n<p>        }<\/p>\n<p>        startProgress();<\/p>\n<p>    }<\/p>\n<p>    \/* ========================================================\n       AUTOPLAY\n       ======================================================== *\/<\/p>\n<p>    function startAutoPlay() {<\/p>\n<p>        clearInterval(timer);<\/p>\n<p>        startProgress();<\/p>\n<p>        timer =\n            setInterval(function () {<\/p>\n<p>                showSlide(\n                    current + 1\n                );<\/p>\n<p>            }, duration);<\/p>\n<p>    }<\/p>\n<p>    function resetAutoPlay() {<\/p>\n<p>        clearInterval(timer);<\/p>\n<p>        startAutoPlay();<\/p>\n<p>    }<\/p>\n<p>    \/* ========================================================\n       ARROWS\n       ======================================================== *\/<\/p>\n<p>    if (next) {<\/p>\n<p>        next.addEventListener(\n            'click',\n            function () {<\/p>\n<p>                showSlide(\n                    current + 1\n                );<\/p>\n<p>                resetAutoPlay();<\/p>\n<p>            }\n        );<\/p>\n<p>    }<\/p>\n<p>    if (prev) {<\/p>\n<p>        prev.addEventListener(\n            'click',\n            function () {<\/p>\n<p>                showSlide(\n                    current - 1\n                );<\/p>\n<p>                resetAutoPlay();<\/p>\n<p>            }\n        );<\/p>\n<p>    }<\/p>\n<p>    \/* ========================================================\n       DOT NAVIGATION\n       ======================================================== *\/<\/p>\n<p>    dots.forEach(function (dot) {<\/p>\n<p>        dot.addEventListener(\n            'click',\n            function () {<\/p>\n<p>                const index =\n                    Number(\n                        this.dataset.index\n                    );<\/p>\n<p>                showSlide(index);<\/p>\n<p>                resetAutoPlay();<\/p>\n<p>            }\n        );<\/p>\n<p>    });<\/p>\n<p>    \/* ========================================================\n       PAUSE WHILE DESKTOP USER HOVERS\n       ======================================================== *\/<\/p>\n<p>    slider.addEventListener(\n        'mouseenter',\n        function () {<\/p>\n<p>            clearInterval(timer);<\/p>\n<p>            if (progress) {<\/p>\n<p>                const width =\n                    progress.getBoundingClientRect()\n                    .width;<\/p>\n<p>                const parentWidth =\n                    progress.parentElement\n                    .getBoundingClientRect()\n                    .width;<\/p>\n<p>                if (parentWidth > 0) {<\/p>\n<p>                    const percent =\n                        (width \/ parentWidth) * 100;<\/p>\n<p>                    progress.style.transition =\n                        'none';<\/p>\n<p>                    progress.style.width =\n                        percent + '%';<\/p>\n<p>                }<\/p>\n<p>            }<\/p>\n<p>        }\n    );<\/p>\n<p>    slider.addEventListener(\n        'mouseleave',\n        function () {<\/p>\n<p>            startAutoPlay();<\/p>\n<p>        }\n    );<\/p>\n<p>    \/* ========================================================\n       MOBILE SWIPE\n       ======================================================== *\/<\/p>\n<p>    slider.addEventListener(\n        'touchstart',\n        function (event) {<\/p>\n<p>            touchStartX =\n                event.changedTouches[0]\n                .screenX;<\/p>\n<p>        },\n        {\n            passive: true\n        }\n    );<\/p>\n<p>    slider.addEventListener(\n        'touchend',\n        function (event) {<\/p>\n<p>            touchEndX =\n                event.changedTouches[0]\n                .screenX;<\/p>\n<p>            const distance =\n                touchEndX -\n                touchStartX;<\/p>\n<p>            if (\n                Math.abs(distance) <\n                45\n            ) {\n\n                return;\n\n            }\n\n\n            if (distance < 0) {\n\n                showSlide(\n                    current + 1\n                );\n\n            } else {\n\n                showSlide(\n                    current - 1\n                );\n\n            }\n\n\n            resetAutoPlay();\n\n        },\n        {\n            passive: true\n        }\n    );\n\n\n\n    \/* ========================================================\n       KEYBOARD NAVIGATION\n       ======================================================== *\/\n\n    document.addEventListener(\n        'keydown',\n        function (event) {\n\n            if (\n                event.key ===\n                'ArrowRight'\n            ) {\n\n                showSlide(\n                    current + 1\n                );\n\n                resetAutoPlay();\n\n            }\n\n\n            if (\n                event.key ===\n                'ArrowLeft'\n            ) {\n\n                showSlide(\n                    current - 1\n                );\n\n                resetAutoPlay();\n\n            }\n\n        }\n    );\n\n\n\n    \/* ========================================================\n       BACKGROUND TAB\n       ======================================================== *\/\n\n    document.addEventListener(\n        'visibilitychange',\n        function () {\n\n            if (\n                document.hidden\n            ) {\n\n                clearInterval(timer);\n\n            } else {\n\n                startAutoPlay();\n\n            }\n\n        }\n    );\n\n\n\n    \/* ========================================================\n       INITIALISE\n       ======================================================== *\/\n\n    showSlide(0);\n\n    startAutoPlay();\n\n})();\n\n<\/script>\n<\/div>\n<div>\n<p>    <!-- =========================================================\n     MBARARA HIGH SCHOOL\n     WHY MHS \/ INSTITUTIONAL INTRODUCTION\n     ========================================================= --><\/p>\n<section class=\"mhs-why\">\n<p>    <!-- Decorative background --><\/p>\n<div class=\"mhs-why-grid\"><\/div>\n<div class=\"mhs-why-glow\"><\/div>\n<div class=\"mhs-why-ring ring-one\"><\/div>\n<div class=\"mhs-why-ring ring-two\"><\/div>\n<div class=\"mhs-why-container\">\n<p>        <!-- =========================\n             SECTION INTRO\n             ========================= --><\/p>\n<div class=\"mhs-why-intro\">\n<div class=\"mhs-eyebrow\">\n                <span class=\"mhs-eyebrow-line\"><\/span><br \/>\n                <span>WHY MBARARA HIGH SCHOOL<\/span>\n            <\/div>\n<div class=\"mhs-intro-grid\">\n<div class=\"mhs-intro-heading\">\n<h2>\n                        More Than a School.<br \/>\n                        <span>A Legacy of Strength.<\/span><br \/>\n                    <\/h2>\n<\/p><\/div>\n<div class=\"mhs-intro-copy\">\n<p>\n                        Since 1911, Mbarara High School has stood for<br \/>\n                        academic excellence, character, discipline and<br \/>\n                        purposeful leadership.\n                    <\/p>\n<p>\n                        From our historic home on Ruharo Hill, generations<br \/>\n                        of students have been prepared not only to succeed,<br \/>\n                        but to lead with courage and responsibility.\n                    <\/p>\n<p>                    <a href=\"\/about\/\" class=\"mhs-text-link\"><br \/>\n                        <span>Discover Mbarara High School<\/span><br \/>\n                        <span class=\"mhs-link-arrow\">\u2192<\/span><br \/>\n                    <\/a>\n                <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>        <!-- =========================\n             PILLARS\n             ========================= --><\/p>\n<div class=\"mhs-pillars\">\n<p>            <!-- 01 --><br \/>\n            <a href=\"\/academics\/\" class=\"mhs-pillar\"><\/p>\n<div class=\"mhs-pillar-number\">01<\/div>\n<div class=\"mhs-pillar-icon\">\n                    <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                        <path d=\"M8 23L32 12l24 11-24 11L8 23Z\"\/>\n                        <path d=\"M17 29v13c8 8 22 8 30 0V29\"\/>\n                        <path d=\"M56 23v17\"\/>\n                    <\/svg>\n                <\/div>\n<div class=\"mhs-pillar-content\">\n                    <span class=\"mhs-pillar-small\">LEARN<\/span><\/p>\n<h3>Academic<br \/>Excellence<\/h3>\n<p>\n                        An environment that nurtures intellectual<br \/>\n                        curiosity, confidence and the pursuit of<br \/>\n                        outstanding achievement.\n                    <\/p>\n<\/p><\/div>\n<div class=\"mhs-pillar-arrow\">&#x2197;<\/div>\n<p>            <\/a><\/p>\n<p>            <!-- 02 --><br \/>\n            <a href=\"\/about\/\" class=\"mhs-pillar\"><\/p>\n<div class=\"mhs-pillar-number\">02<\/div>\n<div class=\"mhs-pillar-icon\">\n                    <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                        <path d=\"M32 7 51 14v16c0 13-8 22-19 28C21 52 13 43 13 30V14L32 7Z\"\/>\n                        <path d=\"m23 31 6 6 13-14\"\/>\n                    <\/svg>\n                <\/div>\n<div class=\"mhs-pillar-content\">\n                    <span class=\"mhs-pillar-small\">GROW<\/span><\/p>\n<h3>Character &amp;<br \/>Discipline<\/h3>\n<p>\n                        Strength of character, integrity and discipline<br \/>\n                        remain central to the Mbarara High School<br \/>\n                        experience.\n                    <\/p>\n<\/p><\/div>\n<div class=\"mhs-pillar-arrow\">&#x2197;<\/div>\n<p>            <\/a><\/p>\n<p>            <!-- 03 --><br \/>\n            <a href=\"\/activities\/\" class=\"mhs-pillar\"><\/p>\n<div class=\"mhs-pillar-number\">03<\/div>\n<div class=\"mhs-pillar-icon\">\n                    <svg viewBox=\"0 0 64 64\" aria-hidden=\"true\">\n                        <circle cx=\"32\" cy=\"19\" r=\"9\"\/>\n                        <path d=\"M16 54c1-12 6-20 16-20s15 8 16 20\"\/>\n                        <path d=\"M12 25 6 31l6 6\"\/>\n                        <path d=\"M52 25l6 6-6 6\"\/>\n                    <\/svg>\n                <\/div>\n<div class=\"mhs-pillar-content\">\n                    <span class=\"mhs-pillar-small\">LEAD<\/span><\/p>\n<h3>Leadership &amp;<br \/>Talent<\/h3>\n<p>\n                        Sport, leadership, creativity and co-curricular<br \/>\n                        life help students discover ability beyond the<br \/>\n                        classroom.\n                    <\/p>\n<\/p><\/div>\n<div class=\"mhs-pillar-arrow\">&#x2197;<\/div>\n<p>            <\/a><\/p>\n<p>            <!-- 04 --><br \/>\n            <a href=\"\/about\/\" class=\"mhs-pillar mhs-pillar-featured\"><\/p>\n<div class=\"mhs-feature-circle\"><\/div>\n<div class=\"mhs-pillar-number\">04<\/div>\n<div class=\"mhs-years\">\n                    <strong>115<\/strong><br \/>\n                    <span>YEARS<\/span>\n                <\/div>\n<div class=\"mhs-pillar-content\">\n                    <span class=\"mhs-pillar-small\">SINCE 1911<\/span><\/p>\n<h3>A Living<br \/>Heritage<\/h3>\n<p>\n                        More than a century of education, tradition and<br \/>\n                        service continues to shape every new generation.\n                    <\/p>\n<\/p><\/div>\n<div class=\"mhs-pillar-arrow\">&#x2197;<\/div>\n<p>            <\/a><\/p><\/div>\n<p>        <!-- =========================\n             MOTTO BAND\n             ========================= --><\/p>\n<div class=\"mhs-motto-band\">\n<div class=\"mhs-motto-mark\">\n                <span><\/span>\n            <\/div>\n<div class=\"mhs-motto-copy\">\n                <small>OUR ENDURING CALL<\/small><\/p>\n<div class=\"mhs-motto-title\">\n                    <strong>MUGUME<\/strong><br \/>\n                    <span>NAMAANI<\/span>\n                <\/div>\n<p>Be Strong and Courageous.<\/p>\n<\/p><\/div>\n<p>            <a href=\"\/about\/\" class=\"mhs-motto-button\"><br \/>\n                <span>Our Story<\/span><br \/>\n                <span>\u2192<\/span><br \/>\n            <\/a><\/p><\/div>\n<\/p><\/div>\n<\/section>\n<style>\n<p>\/* =========================================================\n   SECTION BASE\n   ========================================================= *\/<\/p>\n<p>.mhs-why,\n.mhs-why * {\n    box-sizing: border-box;\n}<\/p>\n<p>.mhs-why {\n    --navy: #082b4c;\n    --navy-deep: #051f38;\n    --blue: #087dcc;\n    --blue-bright: #16a9ee;\n    --cyan: #65d5ff;\n    --text: #183650;\n    --muted: #617488;\n    --line: rgba(7, 94, 157, .12);<\/p>\n<p>    position: relative;\n    overflow: hidden;\n    background:\n        linear-gradient(\n            135deg,\n            #ffffff 0%,\n            #f7fbff 52%,\n            #edf7ff 100%\n        );<\/p>\n<p>    padding: 110px 30px 80px;\n    font-family: inherit;\n}<\/p>\n<p>\/* =========================================================\n   BACKGROUND DETAILS\n   ========================================================= *\/<\/p>\n<p>.mhs-why-grid {\n    position: absolute;\n    inset: 0;\n    pointer-events: none;<\/p>\n<p>    background-image:\n        linear-gradient(\n            rgba(8, 80, 135, .035) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(8, 80, 135, .035) 1px,\n            transparent 1px\n        );<\/p>\n<p>    background-size: 80px 80px;<\/p>\n<p>    mask-image:\n        linear-gradient(\n            to bottom,\n            transparent,\n            black 25%,\n            black 75%,\n            transparent\n        );\n}<\/p>\n<p>.mhs-why-glow {\n    position: absolute;\n    width: 650px;\n    height: 650px;\n    right: -300px;\n    top: -300px;<\/p>\n<p>    border-radius: 50%;<\/p>\n<p>    background:\n        radial-gradient(\n            circle,\n            rgba(29, 174, 238, .12),\n            transparent 68%\n        );\n}<\/p>\n<p>.mhs-why-ring {\n    position: absolute;\n    border-radius: 50%;\n    border: 1px solid rgba(8, 125, 204, .09);\n    pointer-events: none;\n}<\/p>\n<p>.mhs-why-ring.ring-one {\n    width: 460px;\n    height: 460px;\n    right: -180px;\n    top: 170px;\n}<\/p>\n<p>.mhs-why-ring.ring-two {\n    width: 310px;\n    height: 310px;\n    right: -105px;\n    top: 245px;\n}<\/p>\n<p>\/* =========================================================\n   CONTAINER\n   ========================================================= *\/<\/p>\n<p>.mhs-why-container {\n    position: relative;\n    z-index: 2;<\/p>\n<p>    width: min(1380px, 100%);\n    margin: 0 auto;\n}<\/p>\n<p>\/* =========================================================\n   EYEBROW\n   ========================================================= *\/<\/p>\n<p>.mhs-eyebrow {\n    display: flex;\n    align-items: center;\n    gap: 18px;<\/p>\n<p>    margin-bottom: 30px;<\/p>\n<p>    color: var(--blue);\n    font-size: 12px;\n    font-weight: 800;\n    letter-spacing: .30em;\n}<\/p>\n<p>.mhs-eyebrow-line {\n    display: block;\n    width: 52px;\n    height: 3px;<\/p>\n<p>    background:\n        linear-gradient(\n            90deg,\n            var(--blue),\n            var(--cyan)\n        );\n}<\/p>\n<p>\/* =========================================================\n   INTRO\n   ========================================================= *\/<\/p>\n<p>.mhs-intro-grid {\n    display: grid;\n    grid-template-columns: 1.35fr .65fr;\n    gap: 90px;\n    align-items: end;<\/p>\n<p>    margin-bottom: 75px;\n}<\/p>\n<p>.mhs-intro-heading h2 {\n    margin: 0;<\/p>\n<p>    color: var(--navy-deep);<\/p>\n<p>    font-size: clamp(46px, 5vw, 78px);\n    line-height: .98;\n    letter-spacing: -.055em;\n    font-weight: 800;\n}<\/p>\n<p>.mhs-intro-heading h2 span {\n    display: inline-block;<\/p>\n<p>    color: transparent;<\/p>\n<p>    background:\n        linear-gradient(\n            90deg,\n            var(--blue),\n            var(--blue-bright)\n        );<\/p>\n<p>    -webkit-background-clip: text;\n    background-clip: text;\n}<\/p>\n<p>.mhs-intro-copy {\n    max-width: 500px;\n}<\/p>\n<p>.mhs-intro-copy p {\n    margin: 0 0 15px;<\/p>\n<p>    color: var(--muted);<\/p>\n<p>    font-size: 16px;\n    line-height: 1.75;\n}<\/p>\n<p>.mhs-text-link {\n    display: inline-flex;\n    align-items: center;\n    gap: 16px;<\/p>\n<p>    margin-top: 15px;<\/p>\n<p>    color: var(--navy) !important;\n    text-decoration: none !important;<\/p>\n<p>    font-size: 14px;\n    font-weight: 750;\n}<\/p>\n<p>.mhs-link-arrow {\n    display: flex;\n    justify-content: center;\n    align-items: center;<\/p>\n<p>    width: 36px;\n    height: 36px;<\/p>\n<p>    border-radius: 50%;\n    background: var(--navy);\n    color: white;<\/p>\n<p>    transition:\n        transform .3s ease,\n        background .3s ease;\n}<\/p>\n<p>.mhs-text-link:hover .mhs-link-arrow {\n    transform: translateX(5px);\n    background: var(--blue);\n}<\/p>\n<p>\/* =========================================================\n   PILLARS\n   ========================================================= *\/<\/p>\n<p>.mhs-pillars {\n    display: grid;\n    grid-template-columns: repeat(4, 1fr);<\/p>\n<p>    border-top: 1px solid var(--line);\n    border-bottom: 1px solid var(--line);<\/p>\n<p>    margin-bottom: 65px;\n}<\/p>\n<p>.mhs-pillar {\n    position: relative;<\/p>\n<p>    min-height: 470px;\n    padding: 34px 30px 36px;<\/p>\n<p>    display: flex;\n    flex-direction: column;<\/p>\n<p>    border-right: 1px solid var(--line);<\/p>\n<p>    color: inherit !important;\n    text-decoration: none !important;<\/p>\n<p>    overflow: hidden;<\/p>\n<p>    transition:\n        transform .4s cubic-bezier(.2,.8,.2,1),\n        background .4s ease,\n        box-shadow .4s ease;\n}<\/p>\n<p>.mhs-pillar:first-child {\n    border-left: 1px solid var(--line);\n}<\/p>\n<p>.mhs-pillar::before {\n    content: \"\";<\/p>\n<p>    position: absolute;\n    left: 0;\n    right: 0;\n    bottom: 0;<\/p>\n<p>    height: 4px;<\/p>\n<p>    background:\n        linear-gradient(\n            90deg,\n            var(--blue),\n            var(--cyan)\n        );<\/p>\n<p>    transform: scaleX(0);\n    transform-origin: left;<\/p>\n<p>    transition: transform .4s ease;\n}<\/p>\n<p>.mhs-pillar:hover {\n    z-index: 3;<\/p>\n<p>    transform: translateY(-10px);<\/p>\n<p>    background: rgba(255,255,255,.95);<\/p>\n<p>    box-shadow:\n        0 28px 70px rgba(7, 50, 86, .10);\n}<\/p>\n<p>.mhs-pillar:hover::before {\n    transform: scaleX(1);\n}<\/p>\n<p>\/* number *\/<\/p>\n<p>.mhs-pillar-number {\n    color: rgba(8, 43, 76, .35);<\/p>\n<p>    font-size: 11px;\n    font-weight: 800;\n    letter-spacing: .20em;<\/p>\n<p>    margin-bottom: 45px;\n}<\/p>\n<p>\/* icon *\/<\/p>\n<p>.mhs-pillar-icon {\n    width: 62px;\n    height: 62px;<\/p>\n<p>    display: flex;\n    justify-content: center;\n    align-items: center;<\/p>\n<p>    margin-bottom: 45px;<\/p>\n<p>    border-radius: 18px;<\/p>\n<p>    background:\n        linear-gradient(\n            145deg,\n            rgba(8,125,204,.10),\n            rgba(101,213,255,.10)\n        );<\/p>\n<p>    transition:\n        transform .4s ease,\n        background .4s ease;\n}<\/p>\n<p>.mhs-pillar-icon svg {\n    width: 32px;\n    height: 32px;<\/p>\n<p>    fill: none;\n    stroke: var(--blue);\n    stroke-width: 2;\n    stroke-linecap: round;\n    stroke-linejoin: round;\n}<\/p>\n<p>.mhs-pillar:hover .mhs-pillar-icon {\n    transform: translateY(-5px) rotate(-3deg);<\/p>\n<p>    background:\n        linear-gradient(\n            145deg,\n            var(--blue),\n            var(--blue-bright)\n        );\n}<\/p>\n<p>.mhs-pillar:hover .mhs-pillar-icon svg {\n    stroke: white;\n}<\/p>\n<p>\/* content *\/<\/p>\n<p>.mhs-pillar-content {\n    margin-top: auto;\n}<\/p>\n<p>.mhs-pillar-small {\n    display: block;<\/p>\n<p>    margin-bottom: 10px;<\/p>\n<p>    color: var(--blue);<\/p>\n<p>    font-size: 10px;\n    font-weight: 800;\n    letter-spacing: .28em;\n}<\/p>\n<p>.mhs-pillar h3 {\n    margin: 0 0 17px;<\/p>\n<p>    color: var(--navy-deep);<\/p>\n<p>    font-size: 28px;\n    line-height: 1.05;\n    letter-spacing: -.035em;\n    font-weight: 800;\n}<\/p>\n<p>.mhs-pillar p {\n    margin: 0;<\/p>\n<p>    color: var(--muted);<\/p>\n<p>    font-size: 14px;\n    line-height: 1.7;\n}<\/p>\n<p>.mhs-pillar-arrow {\n    position: absolute;\n    top: 31px;\n    right: 27px;<\/p>\n<p>    color: var(--blue);<\/p>\n<p>    font-size: 22px;<\/p>\n<p>    opacity: .45;<\/p>\n<p>    transition:\n        transform .3s ease,\n        opacity .3s ease;\n}<\/p>\n<p>.mhs-pillar:hover .mhs-pillar-arrow {\n    transform: translate(4px,-4px);\n    opacity: 1;\n}<\/p>\n<p>\/* =========================================================\n   FEATURED HERITAGE CARD\n   ========================================================= *\/<\/p>\n<p>.mhs-pillar-featured {\n    background:\n        linear-gradient(\n            145deg,\n            #07365e 0%,\n            #087dcc 100%\n        ) !important;\n}<\/p>\n<p>.mhs-pillar-featured::after {\n    content: \"\";<\/p>\n<p>    position: absolute;\n    width: 260px;\n    height: 260px;<\/p>\n<p>    right: -130px;\n    bottom: -130px;<\/p>\n<p>    border-radius: 50%;\n    border: 1px solid rgba(255,255,255,.15);\n}<\/p>\n<p>.mhs-pillar-featured .mhs-pillar-number,\n.mhs-pillar-featured .mhs-pillar-small,\n.mhs-pillar-featured p,\n.mhs-pillar-featured .mhs-pillar-arrow {\n    color: rgba(255,255,255,.72);\n}<\/p>\n<p>.mhs-pillar-featured h3 {\n    color: white;\n}<\/p>\n<p>.mhs-years {\n    margin-bottom: 25px;\n    position: relative;\n    z-index: 2;\n}<\/p>\n<p>.mhs-years strong {\n    display: block;<\/p>\n<p>    color: white;<\/p>\n<p>    font-size: 76px;\n    line-height: .85;\n    letter-spacing: -.07em;\n    font-weight: 800;\n}<\/p>\n<p>.mhs-years span {\n    display: block;<\/p>\n<p>    margin-top: 12px;<\/p>\n<p>    color: var(--cyan);<\/p>\n<p>    font-size: 10px;\n    font-weight: 800;\n    letter-spacing: .42em;\n}<\/p>\n<p>.mhs-feature-circle {\n    position: absolute;<\/p>\n<p>    width: 170px;\n    height: 170px;<\/p>\n<p>    right: -50px;\n    top: 60px;<\/p>\n<p>    border-radius: 50%;\n    border: 1px solid rgba(255,255,255,.12);\n}<\/p>\n<p>\/* =========================================================\n   MOTTO BAND\n   ========================================================= *\/<\/p>\n<p>.mhs-motto-band {\n    position: relative;<\/p>\n<p>    display: grid;\n    grid-template-columns: 90px 1fr auto;\n    align-items: center;\n    gap: 30px;<\/p>\n<p>    padding: 36px 42px;<\/p>\n<p>    overflow: hidden;<\/p>\n<p>    border-radius: 6px;<\/p>\n<p>    background:\n        linear-gradient(\n            110deg,\n            #061f38 0%,\n            #073d69 55%,\n            #087dcc 100%\n        );<\/p>\n<p>    box-shadow:\n        0 24px 60px rgba(5, 39, 70, .13);\n}<\/p>\n<p>.mhs-motto-band::after {\n    content: \"\";<\/p>\n<p>    position: absolute;<\/p>\n<p>    width: 340px;\n    height: 340px;<\/p>\n<p>    right: 12%;\n    top: -270px;<\/p>\n<p>    border-radius: 50%;\n    border: 1px solid rgba(255,255,255,.12);\n}<\/p>\n<p>.mhs-motto-mark {\n    position: relative;<\/p>\n<p>    width: 70px;\n    height: 70px;<\/p>\n<p>    display: flex;\n    justify-content: center;\n    align-items: center;<\/p>\n<p>    border: 1px solid rgba(255,255,255,.18);\n    border-radius: 50%;\n}<\/p>\n<p>.mhs-motto-mark::before,\n.mhs-motto-mark::after {\n    content: \"\";<\/p>\n<p>    position: absolute;<\/p>\n<p>    width: 25px;\n    height: 34px;<\/p>\n<p>    top: 14px;<\/p>\n<p>    border-top: 2px solid var(--cyan);\n}<\/p>\n<p>.mhs-motto-mark::before {\n    left: 10px;\n    transform: rotate(-42deg);\n}<\/p>\n<p>.mhs-motto-mark::after {\n    right: 10px;\n    transform: rotate(42deg);\n}<\/p>\n<p>.mhs-motto-mark span {\n    width: 8px;\n    height: 8px;<\/p>\n<p>    border-radius: 50%;\n    background: var(--cyan);<\/p>\n<p>    box-shadow: 0 0 20px rgba(101,213,255,.9);\n}<\/p>\n<p>.mhs-motto-copy {\n    position: relative;\n    z-index: 2;\n}<\/p>\n<p>.mhs-motto-copy small {\n    display: block;<\/p>\n<p>    margin-bottom: 8px;<\/p>\n<p>    color: rgba(255,255,255,.58);<\/p>\n<p>    font-size: 9px;\n    font-weight: 700;\n    letter-spacing: .34em;\n}<\/p>\n<p>.mhs-motto-title {\n    display: flex;\n    gap: 12px;\n    flex-wrap: wrap;<\/p>\n<p>    font-size: 28px;\n    line-height: 1;\n    letter-spacing: -.025em;\n}<\/p>\n<p>.mhs-motto-title strong {\n    color: white;\n}<\/p>\n<p>.mhs-motto-title span {\n    color: var(--cyan);\n    font-weight: 800;\n}<\/p>\n<p>.mhs-motto-copy p {\n    margin: 8px 0 0;<\/p>\n<p>    color: rgba(255,255,255,.7);<\/p>\n<p>    font-size: 13px;\n}<\/p>\n<p>.mhs-motto-button {\n    position: relative;\n    z-index: 3;<\/p>\n<p>    min-width: 160px;<\/p>\n<p>    display: flex;\n    justify-content: space-between;\n    align-items: center;\n    gap: 25px;<\/p>\n<p>    padding: 17px 20px;<\/p>\n<p>    border: 1px solid rgba(255,255,255,.25);<\/p>\n<p>    color: white !important;\n    text-decoration: none !important;<\/p>\n<p>    font-size: 12px;\n    font-weight: 700;\n    letter-spacing: .05em;<\/p>\n<p>    transition:\n        background .3s ease,\n        color .3s ease;\n}<\/p>\n<p>.mhs-motto-button:hover {\n    background: white;\n    color: var(--navy) !important;\n}<\/p>\n<p>\/* =========================================================\n   TABLET\n   ========================================================= *\/<\/p>\n<p>@media (max-width: 1100px) {<\/p>\n<p>    .mhs-why {\n        padding: 85px 24px 65px;\n    }<\/p>\n<p>    .mhs-intro-grid {\n        grid-template-columns: 1fr;\n        gap: 28px;\n    }<\/p>\n<p>    .mhs-intro-copy {\n        max-width: 700px;\n    }<\/p>\n<p>    .mhs-pillars {\n        grid-template-columns: repeat(2, 1fr);\n    }<\/p>\n<p>    .mhs-pillar {\n        border-bottom: 1px solid var(--line);\n        min-height: 410px;\n    }<\/p>\n<p>}<\/p>\n<p>\/* =========================================================\n   MOBILE\n   ========================================================= *\/<\/p>\n<p>@media (max-width: 640px) {<\/p>\n<p>    .mhs-why {\n        padding: 68px 20px 50px;\n    }<\/p>\n<p>    .mhs-eyebrow {\n        gap: 12px;\n        margin-bottom: 22px;<\/p>\n<p>        font-size: 10px;\n        letter-spacing: .20em;\n    }<\/p>\n<p>    .mhs-eyebrow-line {\n        width: 34px;\n    }<\/p>\n<p>    .mhs-intro-grid {\n        margin-bottom: 48px;\n    }<\/p>\n<p>    \/* Keep mobile typography readable *\/\n    .mhs-intro-heading h2 {\n        font-size: 43px;\n        line-height: 1.02;\n        letter-spacing: -.045em;\n    }<\/p>\n<p>    .mhs-intro-copy p {\n        font-size: 16px;\n        line-height: 1.7;\n    }<\/p>\n<p>    .mhs-text-link {\n        font-size: 14px;\n    }<\/p>\n<p>    \/* Cards become a vertical editorial sequence *\/\n    .mhs-pillars {\n        grid-template-columns: 1fr;<\/p>\n<p>        border: 0;\n        gap: 12px;<\/p>\n<p>        margin-bottom: 38px;\n    }<\/p>\n<p>    .mhs-pillar,\n    .mhs-pillar:first-child {\n        min-height: 0;<\/p>\n<p>        padding: 27px 25px 29px;<\/p>\n<p>        border:\n            1px solid rgba(8, 83, 140, .10);<\/p>\n<p>        background: rgba(255,255,255,.78);<\/p>\n<p>        border-radius: 8px;\n    }<\/p>\n<p>    .mhs-pillar-number {\n        margin-bottom: 25px;\n    }<\/p>\n<p>    .mhs-pillar-icon {\n        width: 56px;\n        height: 56px;<\/p>\n<p>        margin-bottom: 30px;\n    }<\/p>\n<p>    .mhs-pillar-content {\n        margin-top: 0;\n    }<\/p>\n<p>    .mhs-pillar h3 {\n        font-size: 27px;\n    }<\/p>\n<p>    .mhs-pillar p {\n        max-width: 440px;<\/p>\n<p>        font-size: 15px;\n        line-height: 1.65;\n    }<\/p>\n<p>    .mhs-pillar:hover {\n        transform: none;\n    }<\/p>\n<p>    \/* Heritage card *\/\n    .mhs-pillar-featured {\n        min-height: 360px;\n    }<\/p>\n<p>    .mhs-years {\n        margin: 25px 0 38px;\n    }<\/p>\n<p>    .mhs-years strong {\n        font-size: 74px;\n    }<\/p>\n<p>    \/* Motto *\/\n    .mhs-motto-band {\n        grid-template-columns: 1fr;\n        gap: 20px;<\/p>\n<p>        padding: 32px 27px;\n    }<\/p>\n<p>    .mhs-motto-mark {\n        width: 58px;\n        height: 58px;\n    }<\/p>\n<p>    .mhs-motto-title {\n        font-size: 25px;\n    }<\/p>\n<p>    .mhs-motto-copy p {\n        font-size: 14px;\n    }<\/p>\n<p>    .mhs-motto-button {\n        width: 100%;\n        min-width: 0;<\/p>\n<p>        padding: 17px 18px;\n    }<\/p>\n<p>}<\/p>\n<p>\/* =========================================================\n   VERY SMALL PHONES\n   ========================================================= *\/<\/p>\n<p>@media (max-width: 390px) {<\/p>\n<p>    .mhs-why {\n        padding-left: 17px;\n        padding-right: 17px;\n    }<\/p>\n<p>    .mhs-intro-heading h2 {\n        font-size: 38px;\n    }<\/p>\n<p>    .mhs-pillar h3 {\n        font-size: 25px;\n    }<\/p>\n<p>}<\/p>\n<p>\/* =========================================================\n   REDUCED MOTION\n   ========================================================= *\/<\/p>\n<p>@media (prefers-reduced-motion: reduce) {<\/p>\n<p>    .mhs-pillar,\n    .mhs-pillar-icon,\n    .mhs-pillar-arrow,\n    .mhs-link-arrow {\n        transition: none !important;\n    }<\/p>\n<p>}<\/p>\n<\/style>\n<\/div>\n<div>\n<section class=\"mhs-coming-hero\">\n<p>    <!-- Decorative background --><\/p>\n<div class=\"mhs-grid\"><\/div>\n<div class=\"mhs-glow mhs-glow-one\"><\/div>\n<div class=\"mhs-glow mhs-glow-two\"><\/div>\n<div class=\"mhs-hero-inner\">\n<p>        <!-- LEFT --><\/p>\n<div class=\"mhs-hero-content\">\n<div class=\"mhs-status\">\n                <span class=\"mhs-status-dot\"><\/span><br \/>\n                WEBSITE UPDATE IN PROGRESS\n            <\/div>\n<div class=\"mhs-small-title\">\n                MBARARA HIGH SCHOOL\n            <\/div>\n<h1>\n                A New Digital<br \/>\n                <span>Experience Is Coming.<\/span><br \/>\n            <\/h1>\n<p class=\"mhs-lead\">\n                We are refreshing our website to better reflect the<br \/>\n                excellence, heritage and future of Mbarara High School.\n            <\/p>\n<div class=\"mhs-divider\">\n                <span><\/span>\n            <\/div>\n<p class=\"mhs-message\">\n                While we put the finishing touches on our new online<br \/>\n                experience, you can still explore the school and get in<br \/>\n                touch with us.\n            <\/p>\n<div class=\"mhs-actions\">\n                <a href=\"\/about-us\/\" class=\"mhs-btn mhs-btn-primary\"><br \/>\n                    Explore Our School<br \/>\n                    <span>\u2192<\/span><br \/>\n                <\/a><\/p>\n<p>                <a href=\"\/contact\/\" class=\"mhs-btn mhs-btn-secondary\"><br \/>\n                    Contact Us<br \/>\n                <\/a>\n            <\/div>\n<div class=\"mhs-motto\">\n                <span class=\"mhs-motto-line\"><\/span><\/p>\n<div>\n                    <small>OUR MOTTO<\/small><br \/>\n                    <strong>MUGUME NAMAANI<\/strong>\n                <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<p>        <!-- RIGHT --><\/p>\n<div class=\"mhs-hero-visual\">\n<div class=\"mhs-logo-orbit orbit-one\"><\/div>\n<div class=\"mhs-logo-orbit orbit-two\"><\/div>\n<div class=\"mhs-logo-card\">\n<div class=\"mhs-logo-shine\"><\/div>\n<p>                <img decoding=\"async\"\n    src=\"\/wp-content\/uploads\/images-removebg-preview.png\"\n    alt=\"Mbarara High School\"\n    class=\"mhs-logo\"\n><\/p>\n<div class=\"mhs-logo-caption\">\n                    <span>MBARARA HIGH SCHOOL<\/span><br \/>\n                    <small>Excellence \u2022 Heritage \u2022 Future<\/small>\n                <\/div>\n<\/p><\/div>\n<div class=\"mhs-floating-tag mhs-tag-one\">\n                <strong>EST.<\/strong><br \/>\n                <span>A Legacy of Excellence<\/span>\n            <\/div>\n<div class=\"mhs-floating-tag mhs-tag-two\">\n                <span class=\"mhs-tag-icon\">\u2726<\/span><br \/>\n                <span>New Website<br \/><strong>Coming Soon<\/strong><\/span>\n            <\/div>\n<\/p><\/div>\n<\/p><\/div>\n<div class=\"mhs-bottom-line\"><\/div>\n<\/section>\n<\/div>\n<div>\n<p>    <!-- ============================================================\n     MBARARA HIGH SCHOOL\n     CINEMATIC CHARGING BULL WELCOME\n     ============================================================ --><\/p>\n<div id=\"mhs-intro\" class=\"mhs-intro\">\n<p>    <button class=\"mhs-intro-skip\" type=\"button\"><br \/>\n        SKIP <span>\u2192<\/span><br \/>\n    <\/button><\/p>\n<div class=\"mhs-grid\"><\/div>\n<div class=\"mhs-ambient\"><\/div>\n<div class=\"mhs-floor\"><\/div>\n<p>    <!-- ========================================================\n         CHARGING BULL\n         ======================================================== --><\/p>\n<div class=\"mhs-bull-scene\">\n<div class=\"mhs-bull-aura\"><\/div>\n<p>        <svg class=\"mhs-bull\"\n             viewBox=\"0 0 900 570\"\n             xmlns=\"http:\/\/www.w3.org\/2000\/svg\"\n             aria-hidden=\"true\"><\/p>\n<p>            <defs><\/p>\n<linearGradient id=\"mhsBullStroke\"\n                                x1=\"0%\" y1=\"0%\"\n                                x2=\"100%\" y2=\"100%\">\n                    <stop offset=\"0%\" stop-color=\"#ffffff\"\/>\n                    <stop offset=\"40%\" stop-color=\"#8bd8ff\"\/>\n                    <stop offset=\"100%\" stop-color=\"#078be8\"\/>\n                <\/linearGradient>\n<linearGradient id=\"mhsBullFill\"\n                                x1=\"0%\" y1=\"0%\"\n                                x2=\"0%\" y2=\"100%\">\n                    <stop offset=\"0%\"\n                          stop-color=\"#1699eb\"\n                          stop-opacity=\".25\"\/>\n                    <stop offset=\"100%\"\n                          stop-color=\"#041a34\"\n                          stop-opacity=\".08\"\/>\n                <\/linearGradient>\n<p>                <filter id=\"mhsBullGlow\"\n                        x=\"-30%\" y=\"-30%\"\n                        width=\"160%\" height=\"160%\">\n                    <feGaussianBlur stdDeviation=\"4\"\n                                    result=\"blur\"\/>\n                    <feMerge>\n                        <feMergeNode in=\"blur\"\/>\n                        <feMergeNode in=\"SourceGraphic\"\/>\n                    <\/feMerge>\n                <\/filter><\/p>\n<p>            <\/defs><\/p>\n<p>            <!-- BODY \/ BACK \/ BELLY -->\n            <path class=\"bull-main\"\n                  d=\"\n                  M350 176\n                  C420 123 527 108 635 135\n                  C692 149 740 179 763 220\n\n                  C788 265 780 322 751 360\n                  C727 391 692 408 650 411\n\n                  C608 414 567 401 527 383\n\n                  C480 399 430 398 384 380\n                  C342 363 311 334 296 299\n\n                  C278 257 293 210 350 176\n                  Z\n                  \"\/><\/p>\n<p>            <!-- SHOULDER MASS -->\n            <path class=\"bull-detail\"\n                  d=\"\n                  M380 178\n                  C421 193 445 226 449 267\n                  C453 307 437 342 404 372\n                  \"\/><\/p>\n<p>            <!-- NECK -->\n            <path class=\"bull-main\"\n                  d=\"\n                  M355 190\n                  C325 177 290 180 263 199\n\n                  C238 217 225 245 230 276\n\n                  C235 309 258 337 292 350\n\n                  C321 361 351 353 378 332\n\n                  C397 317 409 295 411 269\n\n                  C414 235 393 207 355 190\n                  Z\n                  \"\/><\/p>\n<p>            <!-- LOWERED HEAD -->\n            <path class=\"bull-main\"\n                  d=\"\n                  M263 226\n                  C230 216 196 225 174 249\n\n                  C150 276 145 318 160 354\n\n                  C175 391 208 417 246 419\n\n                  C280 421 311 402 325 371\n\n                  C338 341 333 300 315 269\n\n                  C302 247 284 233 263 226\n                  Z\n                  \"\/><\/p>\n<p>            <!-- MUZZLE -->\n            <path class=\"bull-detail\"\n                  d=\"\n                  M165 349\n                  C186 335 222 333 247 345\n                  C264 354 269 376 257 392\n                  C241 413 198 416 173 397\n                  C157 385 153 361 165 349\n                  Z\n                  \"\/><\/p>\n<p>            <!-- LEFT HORN -->\n            <path class=\"bull-horn\"\n                  d=\"\n                  M205 253\n                  C158 237 107 202 79 153\n                  C59 118 53 83 60 51\n\n                  C78 94 103 123 139 144\n                  C172 163 204 172 238 177\n\n                  C244 202 233 230 205 253\n                  \"\/><\/p>\n<p>            <!-- RIGHT HORN -->\n            <path class=\"bull-horn\"\n                  d=\"\n                  M267 231\n                  C303 206 331 172 350 127\n                  C363 95 367 66 363 38\n\n                  C346 73 324 98 296 117\n                  C274 132 252 143 229 151\n\n                  C235 182 247 208 267 231\n                  \"\/><\/p>\n<p>            <!-- EARS -->\n            <path class=\"bull-detail\"\n                  d=\"\n                  M194 257\n                  C166 247 144 253 129 271\n                  C150 279 170 285 190 284\n                  \"\/><\/p>\n<path class=\"bull-detail\"\n                  d=\"\n                  M285 250\n                  C307 238 329 239 347 252\n                  C329 266 309 272 291 271\n                  \"\/><\/p>\n<p>            <!-- BROW \/ FACE -->\n            <path class=\"bull-detail\"\n                  d=\"\n                  M187 298\n                  C202 284 218 280 234 287\n                  \"\/><\/p>\n<path class=\"bull-detail\"\n                  d=\"\n                  M270 287\n                  C287 281 300 286 309 298\n                  \"\/><\/p>\n<p>            <!-- EYES -->\n            <circle class=\"bull-eye\"\n                    cx=\"218\" cy=\"305\" r=\"5\"\/><\/p>\n<p>            <circle class=\"bull-eye\"\n                    cx=\"285\" cy=\"302\" r=\"5\"\/><\/p>\n<p>            <!-- NOSTRILS -->\n            <ellipse class=\"bull-eye\"\n                     cx=\"192\" cy=\"371\"\n                     rx=\"6\" ry=\"4\"\/><\/p>\n<p>            <ellipse class=\"bull-eye\"\n                     cx=\"232\" cy=\"370\"\n                     rx=\"6\" ry=\"4\"\/><\/p>\n<p>            <!-- FRONT LEG - PLANTED -->\n            <path class=\"bull-leg\"\n                  d=\"\n                  M384 346\n\n                  C384 385 377 420 365 455\n\n                  C359 473 361 488 373 497\n\n                  C387 507 407 501 413 485\n\n                  C423 458 425 422 423 382\n\n                  L420 354\n                  \"\/><\/p>\n<p>            <!-- FRONT LEG - CHARGING FORWARD -->\n            <path class=\"bull-leg bull-moving-leg\"\n                  d=\"\n                  M432 351\n\n                  C449 378 465 403 488 424\n\n                  C503 438 520 446 532 438\n\n                  C544 430 540 413 527 401\n\n                  C505 381 487 361 472 333\n                  \"\/><\/p>\n<p>            <!-- REAR LEG - PLANTED -->\n            <path class=\"bull-leg\"\n                  d=\"\n                  M679 390\n\n                  C685 425 692 456 708 481\n\n                  C718 496 735 501 747 491\n\n                  C759 480 753 464 744 450\n\n                  C730 428 725 407 727 376\n                  \"\/><\/p>\n<p>            <!-- REAR LEG - LIFTED -->\n            <path class=\"bull-leg bull-rear-leg\"\n                  d=\"\n                  M633 398\n\n                  C626 427 617 450 599 469\n\n                  C587 481 570 486 560 477\n\n                  C550 468 557 454 568 444\n\n                  C586 427 595 409 597 382\n                  \"\/><\/p>\n<p>            <!-- TAIL -->\n            <path class=\"bull-tail\"\n                  d=\"\n                  M758 222\n                  C810 202 833 168 826 127\n                  C820 94 831 70 851 57\n                  \"\/><\/p>\n<p>            <!-- TAIL TUFT -->\n            <path class=\"bull-tail\"\n                  d=\"\n                  M850 59\n                  C844 38 855 20 876 10\n                  C878 33 870 52 850 59\n                  Z\n                  \"\/><\/p>\n<p>            <!-- BODY MUSCLE LINES -->\n            <path class=\"bull-detail\"\n                  d=\"\n                  M494 153\n                  C515 171 527 191 532 217\n                  \"\/><\/p>\n<path class=\"bull-detail\"\n                  d=\"\n                  M596 143\n                  C620 167 630 194 630 225\n                  \"\/><\/p>\n<path class=\"bull-detail\"\n                  d=\"\n                  M537 382\n                  C567 359 592 350 621 348\n                  \"\/><\/p>\n<p>            <!-- GROUND SHADOW -->\n            <ellipse class=\"bull-shadow\"\n                     cx=\"465\"\n                     cy=\"508\"\n                     rx=\"330\"\n                     ry=\"25\"\/><\/p>\n<p>        <\/svg><\/p><\/div>\n<p>    <!-- ENERGY RELEASE --><\/p>\n<div class=\"mhs-energy\">\n        <span><\/span>\n    <\/div>\n<p>    <!-- ========================================================\n         WELCOME\n         ======================================================== --><\/p>\n<div class=\"mhs-copy\">\n<div class=\"mhs-welcome\">\n            WELCOME TO\n        <\/div>\n<h1 class=\"mhs-title\">\n            <span class=\"mhs-title-one\"><br \/>\n                MBARARA HIGH<br \/>\n            <\/span><\/p>\n<p>            <span class=\"mhs-title-two\"><br \/>\n                SCHOOL<br \/>\n            <\/span><br \/>\n        <\/h1>\n<div class=\"mhs-rule\">\n            <span><\/span>\n        <\/div>\n<div class=\"mhs-motto\">\n            MUGUME NAMAANI\n        <\/div>\n<\/p><\/div>\n<div class=\"mhs-meta\">\n        <span>EST. 1911<\/span><br \/>\n        <i><\/i><br \/>\n        <span>EXCELLENCE<\/span><br \/>\n        <i><\/i><br \/>\n        <span>HERITAGE<\/span><br \/>\n        <i><\/i><br \/>\n        <span>FUTURE<\/span>\n    <\/div>\n<\/div>\n<p><!-- ============================================================\n     MOBILE QUICK ACTIONS\n     ============================================================ --><\/p>\n<div class=\"mhs-mobile-actions\">\n<p>    <a class=\"mhs-action mhs-whatsapp\"\n       href=\"https:\/\/wa.me\/256XXXXXXXXX\"\n       target=\"_blank\"\n       rel=\"noopener\"><\/p>\n<p>        <svg viewBox=\"0 0 24 24\">\n            <path fill=\"currentColor\"\n                  d=\"M12.04 2a9.84 9.84 0 0 0-8.42 14.92L2 22l5.22-1.58A9.9 9.9 0 1 0 12.04 2Zm0 17.98a8.05 8.05 0 0 1-4.1-1.12l-.29-.17-3.1.94.97-3.02-.19-.31A8.08 8.08 0 1 1 12.04 19.98Zm4.43-6.05c-.24-.12-1.44-.71-1.66-.79-.22-.08-.38-.12-.54.12-.16.24-.62.79-.76.95-.14.16-.28.18-.52.06-.24-.12-1.02-.38-1.94-1.2-.72-.64-1.2-1.43-1.34-1.67-.14-.24-.02-.37.1-.49.11-.11.24-.28.36-.42.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42-.06-.12-.54-1.3-.74-1.78-.2-.47-.4-.4-.54-.41h-.46c-.16 0-.42.06-.64.3-.22.24-.84.82-.84 2s.86 2.32.98 2.48c.12.16 1.69 2.58 4.1 3.62.57.25 1.02.4 1.37.51.58.18 1.1.16 1.51.1.46-.07 1.44-.59 1.64-1.16.2-.57.2-1.06.14-1.16-.06-.1-.22-.16-.46-.28Z\"\/>\n        <\/svg><\/p>\n<p>        <span>WhatsApp<\/span><\/p>\n<p>    <\/a><\/p>\n<p>    <a class=\"mhs-action mhs-contact\"\n       href=\"\/contact\/\"><\/p>\n<p>        <svg viewBox=\"0 0 24 24\">\n            <path fill=\"currentColor\"\n                  d=\"M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5-8-5V6l8 5 8-5v2Z\"\/>\n        <\/svg><\/p>\n<p>        <span>Contact Us<\/span><\/p>\n<p>    <\/a><\/p>\n<\/div>\n<style>\n<p>\/* ============================================================\n   SCREEN\n   ============================================================ *\/<\/p>\n<p>#mhs-intro {\n    position: fixed;\n    inset: 0;<\/p>\n<p>    width: 100%;\n    height: 100vh;\n    height: 100dvh;<\/p>\n<p>    z-index: 99999;<\/p>\n<p>    overflow: hidden;<\/p>\n<p>    color: #fff;<\/p>\n<p>    background:\n        radial-gradient(\n            circle at 28% 45%,\n            rgba(13,143,229,.24),\n            transparent 37%\n        ),\n        linear-gradient(\n            125deg,\n            #010816 0%,\n            #031a35 47%,\n            #075087 100%\n        );<\/p>\n<p>    transition:\n        opacity .8s ease,\n        visibility .8s ease;\n}<\/p>\n<p>\/* Background grid *\/<\/p>\n<p>.mhs-grid {\n    position: absolute;\n    inset: 0;<\/p>\n<p>    opacity: .07;<\/p>\n<p>    background-image:\n        linear-gradient(\n            rgba(255,255,255,.15) 1px,\n            transparent 1px\n        ),\n        linear-gradient(\n            90deg,\n            rgba(255,255,255,.15) 1px,\n            transparent 1px\n        );<\/p>\n<p>    background-size:\n        70px 70px;\n}<\/p>\n<p>\/* Ambient *\/<\/p>\n<p>.mhs-ambient {\n    position: absolute;<\/p>\n<p>    left: 24%;\n    top: 45%;<\/p>\n<p>    width: 650px;\n    height: 650px;<\/p>\n<p>    transform:\n        translate(-50%, -50%);<\/p>\n<p>    border-radius: 50%;<\/p>\n<p>    background:\n        rgba(22,153,239,.12);<\/p>\n<p>    filter:\n        blur(110px);<\/p>\n<p>    animation:\n        mhsAmbient\n        4s ease forwards;\n}<\/p>\n<p>\/* Perspective floor *\/<\/p>\n<p>.mhs-floor {\n    position: absolute;<\/p>\n<p>    left: -15%;\n    right: -15%;\n    bottom: -17%;<\/p>\n<p>    height: 43%;<\/p>\n<p>    transform:\n        perspective(500px)\n        rotateX(68deg);<\/p>\n<p>    transform-origin:\n        center top;<\/p>\n<p>    background:\n        repeating-linear-gradient(\n            90deg,\n            transparent 0,\n            transparent 78px,\n            rgba(61,182,255,.065) 79px,\n            rgba(61,182,255,.065) 80px\n        ),\n        repeating-linear-gradient(\n            0deg,\n            transparent 0,\n            transparent 58px,\n            rgba(61,182,255,.065) 59px,\n            rgba(61,182,255,.065) 60px\n        );\n}<\/p>\n<p>\/* ============================================================\n   BULL\n   ============================================================ *\/<\/p>\n<p>.mhs-bull-scene {\n    position: absolute;<\/p>\n<p>    left: 3%;\n    top: 50%;<\/p>\n<p>    width: min(51vw, 760px);<\/p>\n<p>    z-index: 4;<\/p>\n<p>    opacity: 0;<\/p>\n<p>    transform:\n        translateY(-50%)\n        translateX(-110px)\n        scale(.80);<\/p>\n<p>    animation:\n        bullEnter .9s .1s\n        cubic-bezier(.16,.84,.35,1)\n        forwards,<\/p>\n<p>        bullCharge .72s 1.08s\n        cubic-bezier(.2,.8,.3,1)\n        forwards,<\/p>\n<p>        bullImpact .45s 1.80s\n        ease-out forwards,<\/p>\n<p>        bullExit .55s 4.25s\n        ease forwards;\n}<\/p>\n<p>.mhs-bull {\n    width: 100%;<\/p>\n<p>    overflow: visible;<\/p>\n<p>    filter:\n        drop-shadow(\n            0 16px 25px\n            rgba(0,0,0,.32)\n        );\n}<\/p>\n<p>.bull-main {\n    fill:\n        url(#mhsBullFill);<\/p>\n<p>    stroke:\n        url(#mhsBullStroke);<\/p>\n<p>    stroke-width: 5;<\/p>\n<p>    stroke-linecap: round;\n    stroke-linejoin: round;<\/p>\n<p>    stroke-dasharray: 1800;\n    stroke-dashoffset: 1800;<\/p>\n<p>    filter:\n        url(#mhsBullGlow);<\/p>\n<p>    animation:\n        drawBull 1.15s .12s\n        ease forwards;\n}<\/p>\n<p>.bull-horn,\n.bull-leg,\n.bull-tail {\n    fill: none;<\/p>\n<p>    stroke:\n        url(#mhsBullStroke);<\/p>\n<p>    stroke-width: 6;<\/p>\n<p>    stroke-linecap: round;\n    stroke-linejoin: round;<\/p>\n<p>    stroke-dasharray: 800;\n    stroke-dashoffset: 800;<\/p>\n<p>    filter:\n        url(#mhsBullGlow);<\/p>\n<p>    animation:\n        drawBull 1s .2s\n        ease forwards;\n}<\/p>\n<p>.bull-detail {\n    fill: none;<\/p>\n<p>    stroke:\n        rgba(190,231,255,.85);<\/p>\n<p>    stroke-width: 3.5;<\/p>\n<p>    stroke-linecap: round;\n    stroke-linejoin: round;<\/p>\n<p>    stroke-dasharray: 400;\n    stroke-dashoffset: 400;<\/p>\n<p>    animation:\n        drawBull .75s .62s\n        ease forwards;\n}<\/p>\n<p>.bull-eye {\n    fill: #fff;<\/p>\n<p>    opacity: 0;<\/p>\n<p>    filter:\n        drop-shadow(\n            0 0 8px #6bd0ff\n        );<\/p>\n<p>    animation:\n        bullEyes .2s 1s\n        forwards;\n}<\/p>\n<p>.bull-shadow {\n    fill:\n        rgba(0,0,0,.30);<\/p>\n<p>    filter:\n        blur(8px);<\/p>\n<p>    opacity: 0;<\/p>\n<p>    animation:\n        shadowIn .6s .5s\n        forwards;\n}<\/p>\n<p>.mhs-bull-aura {\n    position: absolute;<\/p>\n<p>    left: 50%;\n    top: 50%;<\/p>\n<p>    width: 70%;\n    aspect-ratio: 1;<\/p>\n<p>    transform:\n        translate(-50%, -50%);<\/p>\n<p>    border-radius: 50%;<\/p>\n<p>    background:\n        radial-gradient(\n            circle,\n            rgba(48,181,255,.18),\n            transparent 68%\n        );<\/p>\n<p>    filter:\n        blur(22px);<\/p>\n<p>    animation:\n        bullAura 1.5s ease infinite;\n}<\/p>\n<p>\/* ============================================================\n   ENERGY STRIKE\n   ============================================================ *\/<\/p>\n<p>.mhs-energy {\n    position: absolute;<\/p>\n<p>    left: 34%;\n    right: 7%;<\/p>\n<p>    top: 51%;<\/p>\n<p>    z-index: 3;\n}<\/p>\n<p>.mhs-energy span {\n    display: block;<\/p>\n<p>    width: 0;\n    height: 2px;<\/p>\n<p>    background:\n        linear-gradient(\n            90deg,\n            transparent,\n            #139eea,\n            #fff,\n            transparent\n        );<\/p>\n<p>    box-shadow:\n        0 0 12px rgba(72,197,255,.85),\n        0 0 35px rgba(26,147,222,.55);<\/p>\n<p>    animation:\n        energyStrike\n        .9s 1.35s\n        ease-out forwards;\n}<\/p>\n<p>\/* ============================================================\n   WORDING\n   ============================================================ *\/<\/p>\n<p>.mhs-copy {\n    position: absolute;<\/p>\n<p>    left: 54%;\n    top: 50%;<\/p>\n<p>    width: 41%;<\/p>\n<p>    transform:\n        translateY(-50%);<\/p>\n<p>    z-index: 6;\n}<\/p>\n<p>.mhs-welcome {\n    margin-bottom: 13px;<\/p>\n<p>    color: #80d2ff;<\/p>\n<p>    font-size:\n        clamp(10px, .9vw, 14px);<\/p>\n<p>    font-weight: 700;<\/p>\n<p>    letter-spacing: 8px;<\/p>\n<p>    opacity: 0;<\/p>\n<p>    transform:\n        translateX(-30px);<\/p>\n<p>    animation:\n        welcomeReveal\n        .42s 1.43s\n        forwards;\n}<\/p>\n<p>.mhs-title {\n    margin: 0;<\/p>\n<p>    font-family:\n        \"Montserrat\",\n        Arial,\n        sans-serif;<\/p>\n<p>    font-size:\n        clamp(46px, 5.4vw, 86px);<\/p>\n<p>    line-height: .91;<\/p>\n<p>    font-weight: 800;<\/p>\n<p>    letter-spacing: -3px;<\/p>\n<p>    text-transform: uppercase;\n}<\/p>\n<p>.mhs-title span {\n    display: block;<\/p>\n<p>    opacity: 0;\n}<\/p>\n<p>.mhs-title-one {\n    transform:\n        translateX(-55px);<\/p>\n<p>    filter:\n        blur(6px);<\/p>\n<p>    animation:\n        titleImpact\n        .55s 1.65s\n        forwards;\n}<\/p>\n<p>.mhs-title-two {\n    color: #7ad0ff;<\/p>\n<p>    transform:\n        translateX(-55px);<\/p>\n<p>    filter:\n        blur(6px);<\/p>\n<p>    animation:\n        titleImpact\n        .55s 1.93s\n        forwards;\n}<\/p>\n<p>.mhs-rule {\n    width: 190px;<\/p>\n<p>    margin:\n        25px 0 15px;\n}<\/p>\n<p>.mhs-rule span {\n    display: block;<\/p>\n<p>    width: 0;\n    height: 2px;<\/p>\n<p>    background:\n        linear-gradient(\n            90deg,\n            #159cea,\n            #fff,\n            transparent\n        );<\/p>\n<p>    animation:\n        ruleGrow\n        .7s 2.18s\n        forwards;\n}<\/p>\n<p>.mhs-motto {\n    color:\n        rgba(255,255,255,.67);<\/p>\n<p>    font-size: 10px;<\/p>\n<p>    font-weight: 600;<\/p>\n<p>    letter-spacing: 7px;<\/p>\n<p>    opacity: 0;<\/p>\n<p>    animation:\n        mottoIn\n        .5s 2.38s\n        forwards;\n}<\/p>\n<p>\/* ============================================================\n   META\n   ============================================================ *\/<\/p>\n<p>.mhs-meta {\n    position: absolute;<\/p>\n<p>    left: 50%;\n    bottom: 32px;<\/p>\n<p>    transform:\n        translateX(-50%);<\/p>\n<p>    display: flex;\n    align-items: center;<\/p>\n<p>    gap: 13px;<\/p>\n<p>    color:\n        rgba(255,255,255,.38);<\/p>\n<p>    font-size: 8px;<\/p>\n<p>    font-weight: 600;<\/p>\n<p>    letter-spacing: 2px;<\/p>\n<p>    white-space: nowrap;<\/p>\n<p>    opacity: 0;<\/p>\n<p>    animation:\n        metaIn\n        .6s 2.7s\n        forwards;\n}<\/p>\n<p>.mhs-meta i {\n    width: 3px;\n    height: 3px;<\/p>\n<p>    border-radius: 50%;<\/p>\n<p>    background: #159cea;\n}<\/p>\n<p>\/* ============================================================\n   SKIP\n   ============================================================ *\/<\/p>\n<p>.mhs-intro-skip {\n    position: absolute;<\/p>\n<p>    top: 24px;\n    right: 27px;<\/p>\n<p>    z-index: 20;<\/p>\n<p>    padding:\n        9px 15px;<\/p>\n<p>    border:\n        1px solid\n        rgba(255,255,255,.22);<\/p>\n<p>    border-radius: 40px;<\/p>\n<p>    background:\n        rgba(255,255,255,.04);<\/p>\n<p>    color:\n        rgba(255,255,255,.7);<\/p>\n<p>    font-size: 10px;<\/p>\n<p>    font-weight: 600;<\/p>\n<p>    letter-spacing: 2px;<\/p>\n<p>    cursor: pointer;\n}<\/p>\n<p>\/* ============================================================\n   MOBILE CONTACT\n   ============================================================ *\/<\/p>\n<p>.mhs-mobile-actions {\n    display: none;\n}<\/p>\n<p>@media (max-width: 767px) {<\/p>\n<p>    .mhs-mobile-actions {\n        position: fixed;<\/p>\n<p>        left: 50%;<\/p>\n<p>        bottom:\n            calc(\n                14px +\n                env(safe-area-inset-bottom)\n            );<\/p>\n<p>        transform:\n            translateX(-50%);<\/p>\n<p>        z-index: 9000;<\/p>\n<p>        display: flex;<\/p>\n<p>        gap: 8px;<\/p>\n<p>        width:\n            calc(100% - 28px);<\/p>\n<p>        max-width: 420px;\n    }<\/p>\n<p>    .mhs-action {\n        flex: 1;<\/p>\n<p>        min-height: 48px;<\/p>\n<p>        display: flex;\n        align-items: center;\n        justify-content: center;<\/p>\n<p>        gap: 8px;<\/p>\n<p>        border-radius: 28px;<\/p>\n<p>        color: white !important;<\/p>\n<p>        font-size: 13px;\n        font-weight: 700;<\/p>\n<p>        text-decoration:\n            none !important;<\/p>\n<p>        box-shadow:\n            0 8px 24px\n            rgba(0,20,50,.22);\n    }<\/p>\n<p>    .mhs-action svg {\n        width: 20px;\n        height: 20px;\n    }<\/p>\n<p>    .mhs-whatsapp {\n        background: #25D366;\n    }<\/p>\n<p>    .mhs-contact {\n        background:\n            linear-gradient(\n                135deg,\n                #075da9,\n                #078ee4\n            );\n    }<\/p>\n<p>}<\/p>\n<p>\/* ============================================================\n   MOBILE INTRO\n   CRITICAL: OWN KEYFRAMES KEEP THE BULL CENTRED\n   ============================================================ *\/<\/p>\n<p>@media (max-width: 767px) {<\/p>\n<p>    .mhs-bull-scene {\n        left: 50%;\n        top: 29%;<\/p>\n<p>        width:\n            min(96vw, 540px);<\/p>\n<p>        opacity: 0;<\/p>\n<p>        transform:\n            translate(-50%, -50%)\n            scale(.69);<\/p>\n<p>        animation:\n            bullEnterMobile\n            .9s .1s\n            cubic-bezier(.16,.84,.35,1)\n            forwards,<\/p>\n<p>            bullChargeMobile\n            .72s 1.08s\n            cubic-bezier(.2,.8,.3,1)\n            forwards,<\/p>\n<p>            bullImpactMobile\n            .45s 1.80s\n            ease-out forwards,<\/p>\n<p>            bullExitMobile\n            .55s 4.25s\n            ease forwards;\n    }<\/p>\n<p>    .mhs-copy {\n        left: 5%;\n        top: 57%;<\/p>\n<p>        width: 90%;<\/p>\n<p>        transform: none;<\/p>\n<p>        text-align: center;\n    }<\/p>\n<p>    .mhs-welcome {\n        margin-bottom: 10px;<\/p>\n<p>        font-size: 9px;<\/p>\n<p>        letter-spacing: 5px;\n    }<\/p>\n<p>    .mhs-title {\n        font-size:\n            clamp(37px, 11.5vw, 56px);<\/p>\n<p>        line-height: .91;<\/p>\n<p>        letter-spacing: -1.5px;\n    }<\/p>\n<p>    .mhs-rule {\n        width: 145px;<\/p>\n<p>        margin:\n            17px auto 12px;\n    }<\/p>\n<p>    .mhs-motto {\n        font-size: 8px;<\/p>\n<p>        letter-spacing: 4px;\n    }<\/p>\n<p>    .mhs-energy {\n        left: 8%;\n        right: 8%;<\/p>\n<p>        top: 49%;\n    }<\/p>\n<p>    .mhs-meta {\n        bottom:\n            calc(\n                24px +\n                env(safe-area-inset-bottom)\n            );<\/p>\n<p>        gap: 6px;<\/p>\n<p>        font-size: 6px;<\/p>\n<p>        letter-spacing: .7px;\n    }<\/p>\n<p>    .mhs-intro-skip {\n        top:\n            calc(\n                16px +\n                env(safe-area-inset-top)\n            );<\/p>\n<p>        right: 15px;\n    }<\/p>\n<p>}<\/p>\n<p>\/* ============================================================\n   DESKTOP ANIMATIONS\n   ============================================================ *\/<\/p>\n<p>@keyframes drawBull {\n    to {\n        stroke-dashoffset: 0;\n    }\n}<\/p>\n<p>@keyframes bullEyes {\n    to {\n        opacity: 1;\n    }\n}<\/p>\n<p>@keyframes shadowIn {\n    to {\n        opacity: 1;\n    }\n}<\/p>\n<p>@keyframes bullEnter {<\/p>\n<p>    from {\n        opacity: 0;<\/p>\n<p>        transform:\n            translateY(-50%)\n            translateX(-120px)\n            scale(.72);\n    }<\/p>\n<p>    to {\n        opacity: 1;<\/p>\n<p>        transform:\n            translateY(-50%)\n            translateX(0)\n            scale(.82);\n    }\n}<\/p>\n<p>@keyframes bullCharge {<\/p>\n<p>    0% {\n        transform:\n            translateY(-50%)\n            translateX(0)\n            scale(.82);\n    }<\/p>\n<p>    45% {\n        transform:\n            translateY(-48%)\n            translateX(28px)\n            scale(.86)\n            rotate(-1deg);\n    }<\/p>\n<p>    72% {\n        transform:\n            translateY(-50%)\n            translateX(48px)\n            scale(.89)\n            rotate(-2deg);\n    }<\/p>\n<p>    100% {\n        transform:\n            translateY(-49%)\n            translateX(38px)\n            scale(.87)\n            rotate(-1deg);\n    }\n}<\/p>\n<p>@keyframes bullImpact {<\/p>\n<p>    0% {\n        transform:\n            translateY(-49%)\n            translateX(38px)\n            scale(.87);\n    }<\/p>\n<p>    45% {\n        transform:\n            translateY(-48%)\n            translateX(33px)\n            scale(.85);\n    }<\/p>\n<p>    100% {\n        transform:\n            translateY(-49%)\n            translateX(38px)\n            scale(.87);\n    }\n}<\/p>\n<p>@keyframes bullExit {<\/p>\n<p>    to {\n        opacity: 0;<\/p>\n<p>        transform:\n            translateY(-49%)\n            translateX(75px)\n            scale(.94);<\/p>\n<p>        filter:\n            blur(5px);\n    }\n}<\/p>\n<p>\/* ============================================================\n   MOBILE BULL ANIMATIONS\n   ============================================================ *\/<\/p>\n<p>@keyframes bullEnterMobile {<\/p>\n<p>    from {\n        opacity: 0;<\/p>\n<p>        transform:\n            translate(-50%, -50%)\n            translateY(-20px)\n            scale(.55);\n    }<\/p>\n<p>    to {\n        opacity: 1;<\/p>\n<p>        transform:\n            translate(-50%, -50%)\n            translateY(0)\n            scale(.69);\n    }\n}<\/p>\n<p>@keyframes bullChargeMobile {<\/p>\n<p>    0% {\n        transform:\n            translate(-50%, -50%)\n            translateY(0)\n            scale(.69);\n    }<\/p>\n<p>    45% {\n        transform:\n            translate(-50%, -50%)\n            translateY(10px)\n            scale(.76)\n            rotate(-1deg);\n    }<\/p>\n<p>    72% {\n        transform:\n            translate(-50%, -50%)\n            translateY(17px)\n            scale(.80)\n            rotate(-2deg);\n    }<\/p>\n<p>    100% {\n        transform:\n            translate(-50%, -50%)\n            translateY(11px)\n            scale(.76)\n            rotate(-1deg);\n    }\n}<\/p>\n<p>@keyframes bullImpactMobile {<\/p>\n<p>    0% {\n        transform:\n            translate(-50%, -50%)\n            translateY(11px)\n            scale(.76);\n    }<\/p>\n<p>    50% {\n        transform:\n            translate(-50%, -50%)\n            translateY(6px)\n            scale(.73);\n    }<\/p>\n<p>    100% {\n        transform:\n            translate(-50%, -50%)\n            translateY(9px)\n            scale(.75);\n    }\n}<\/p>\n<p>@keyframes bullExitMobile {<\/p>\n<p>    to {\n        opacity: 0;<\/p>\n<p>        transform:\n            translate(-50%, -50%)\n            translateY(-2px)\n            scale(.83);<\/p>\n<p>        filter:\n            blur(5px);\n    }\n}<\/p>\n<p>\/* ============================================================\n   GENERAL ANIMATIONS\n   ============================================================ *\/<\/p>\n<p>@keyframes energyStrike {<\/p>\n<p>    from {\n        width: 0;\n        opacity: 0;\n    }<\/p>\n<p>    20% {\n        opacity: 1;\n    }<\/p>\n<p>    to {\n        width: 100%;\n        opacity: .6;\n    }\n}<\/p>\n<p>@keyframes welcomeReveal {<\/p>\n<p>    to {\n        opacity: 1;\n        transform: translateX(0);\n    }\n}<\/p>\n<p>@keyframes titleImpact {<\/p>\n<p>    from {\n        opacity: 0;<\/p>\n<p>        transform:\n            translateX(-55px);<\/p>\n<p>        filter:\n            blur(6px);\n    }<\/p>\n<p>    to {\n        opacity: 1;<\/p>\n<p>        transform:\n            translateX(0);<\/p>\n<p>        filter:\n            blur(0);\n    }\n}<\/p>\n<p>@keyframes ruleGrow {\n    to {\n        width: 100%;\n    }\n}<\/p>\n<p>@keyframes mottoIn {\n    to {\n        opacity: 1;\n    }\n}<\/p>\n<p>@keyframes metaIn {\n    to {\n        opacity: 1;\n    }\n}<\/p>\n<p>@keyframes bullAura {<\/p>\n<p>    0%,\n    100% {\n        opacity: .45;<\/p>\n<p>        transform:\n            translate(-50%, -50%)\n            scale(.88);\n    }<\/p>\n<p>    50% {\n        opacity: .9;<\/p>\n<p>        transform:\n            translate(-50%, -50%)\n            scale(1.08);\n    }\n}<\/p>\n<p>@keyframes mhsAmbient {<\/p>\n<p>    from {\n        opacity: 0;<\/p>\n<p>        transform:\n            translate(-50%, -50%)\n            scale(.6);\n    }<\/p>\n<p>    to {\n        opacity: .55;<\/p>\n<p>        transform:\n            translate(-50%, -50%)\n            scale(1.2);\n    }\n}<\/p>\n<p>\/* ============================================================\n   EXIT\n   ============================================================ *\/<\/p>\n<p>#mhs-intro.mhs-intro-finished {\n    opacity: 0;\n    visibility: hidden;\n    pointer-events: none;\n}<\/p>\n<p>@media (prefers-reduced-motion: reduce) {<\/p>\n<p>    #mhs-intro {\n        display: none;\n    }<\/p>\n<p>}<\/p>\n<p>\/* ============================================================\n   FIX \u2014 MBARARA HIGH TITLE COLOUR\n   ============================================================ *\/<\/p>\n<p>#mhs-intro .mhs-title .mhs-title-one {\n    color: #ffffff !important;\n    -webkit-text-fill-color: #ffffff !important;\n}<\/p>\n<p>#mhs-intro .mhs-title .mhs-title-two {\n    color: #7ad0ff !important;\n    -webkit-text-fill-color: #7ad0ff !important;\n}<\/p>\n<\/style>\n<p><script><\/p>\n<p>(function () {<\/p>\n<p>    const intro =\n        document.getElementById('mhs-intro');<\/p>\n<p>    if (!intro) return;<\/p>\n<p>    const skip =\n        intro.querySelector('.mhs-intro-skip');<\/p>\n<p>    let finished = false;<\/p>\n<p>    function finishIntro() {<\/p>\n<p>        if (finished) return;<\/p>\n<p>        finished = true;<\/p>\n<p>        intro.classList.add(\n            'mhs-intro-finished'\n        );<\/p>\n<p>        setTimeout(function () {\n            intro.remove();\n        }, 850);<\/p>\n<p>    }<\/p>\n<p>    \/*\n       BULL ENTERS\n       \u2193\n       HEAD-LOW CHARGE\n       \u2193\n       ENERGY STRIKE\n       \u2193\n       WELCOME TO\n       \u2193\n       MBARARA HIGH\n       \u2193\n       SCHOOL\n       \u2193\n       MUGUME NAMAANI\n       \u2193\n       HOMEPAGE\n    *\/<\/p>\n<p>    const timer =\n        setTimeout(\n            finishIntro,\n            4900\n        );<\/p>\n<p>    if (skip) {<\/p>\n<p>        skip.addEventListener(\n            'click',\n            function () {<\/p>\n<p>                clearTimeout(timer);<\/p>\n<p>                finishIntro();<\/p>\n<p>            }\n        );<\/p>\n<p>    }<\/p>\n<p>})();<\/p>\n<p><\/script>\n<\/div>\n<p><!--more--><br \/>\n<!-- {\"type\":\"layout\",\"children\":[{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<!-- ============================================================\\n     MBARARA HIGH SCHOOL\\n     PREMIUM CINEMATIC HERO SLIDER\\n     COMPLETE RESPONSIVE VERSION\\n     ============================================================ -->\\n\\n<\/p>\n<section class=\\\"mhs-hero-slider\\\" id=\\\"mhsHeroSlider\\\">\\n\\n    <\/p>\n<div class=\\\"mhs-slides\\\">\\n\\n        <!-- ====================================================\\n             SLIDE 01 \u2014 HERITAGE\\n             ==================================================== -->\\n\\n        <\/p>\n<article class=\\\"mhs-slide is-active\\\" data-slide=\\\"1\\\">\\n\\n            <\/p>\n<div class=\\\"mhs-slide-image\\\"\\n                 style=\\\"background-image:url('\/wp-content\/uploads\/MHSC_2025_DJI_0052-scaled.jpg');\\\">\\n            <\/div>\n<p>\\n\\n            <\/p>\n<div class=\\\"mhs-image-shade\\\"><\/div>\n<p>\\n            <\/p>\n<div class=\\\"mhs-slide-glow\\\"><\/div>\n<p>\\n\\n            <\/p>\n<div class=\\\"mhs-hero-container\\\">\\n\\n                <\/p>\n<div class=\\\"mhs-hero-content\\\">\\n\\n                    <\/p>\n<div class=\\\"mhs-slide-eyebrow\\\">\\n                        <span class=\\\"mhs-eyebrow-line\\\"><\/span>\\n                        MBARARA HIGH SCHOOL\\n                    <\/div>\n<p>\\n\\n                    <\/p>\n<h1 class=\\\"mhs-hero-title\\\">\\n                        A Legacy of\\n                        <span>Strength.<\/span>\\n                        A Future of Excellence.\\n                    <\/h1>\n<p>\\n\\n                    <\/p>\n<p class=\\\"mhs-hero-text\\\">\\n                        Since 1911, generations of young men have\\n                        walked these grounds with courage, discipline\\n                        and purpose.\\n                    <\/p>\n<p>\\n\\n                    <\/p>\n<div class=\\\"mhs-hero-buttons\\\">\\n\\n                        <a href=\\\"\/about\/\\\"\\n                           class=\\\"mhs-btn mhs-btn-primary\\\">\\n                            Discover Our Story\\n                            <span>\u2192<\/span>\\n                        <\/a>\\n\\n                        <a href=\\\"\/contact\/\\\"\\n                           class=\\\"mhs-btn mhs-btn-ghost\\\">\\n                            Visit MHS\\n                        <\/a>\\n\\n                    <\/div>\n<p>\\n\\n                <\/p><\/div>\n<p>\\n\\n\\n                <\/p>\n<div class=\\\"mhs-heritage-card\\\">\\n\\n                    <span class=\\\"mhs-card-label\\\">\\n                        OUR HERITAGE\\n                    <\/span>\\n\\n                    <strong>115<\/strong>\\n\\n                    <span class=\\\"mhs-card-years\\\">\\n                        YEARS OF LEGACY\\n                    <\/span>\\n\\n                    <\/p>\n<div class=\\\"mhs-card-rule\\\"><\/div>\n<p>\\n\\n                    <small>\\n                        1911 \u2014 2026\\n                    <\/small>\\n\\n                <\/div>\n<p>\\n\\n            <\/p><\/div>\n<p>\\n\\n        <\/article>\n<p>\\n\\n\\n\\n        <!-- ====================================================\\n             SLIDE 02 \u2014 ACADEMICS\\n             ==================================================== -->\\n\\n        <\/p>\n<article class=\\\"mhs-slide\\\" data-slide=\\\"2\\\">\\n\\n            <\/p>\n<div class=\\\"mhs-slide-image\\\"\\n                 style=\\\"background-image:url('\/wp-content\/uploads\/Gemini_Generated_Image_sr3d11sr3d11sr3d.png');\\\">\\n            <\/div>\n<p>\\n\\n            <\/p>\n<div class=\\\"mhs-image-shade\\\"><\/div>\n<p>\\n            <\/p>\n<div class=\\\"mhs-slide-glow\\\"><\/div>\n<p>\\n\\n            <\/p>\n<div class=\\\"mhs-hero-container\\\">\\n\\n                <\/p>\n<div class=\\\"mhs-hero-content\\\">\\n\\n                    <\/p>\n<div class=\\\"mhs-slide-eyebrow\\\">\\n                        <span class=\\\"mhs-eyebrow-line\\\"><\/span>\\n                        ACADEMIC EXCELLENCE\\n                    <\/div>\n<p>\\n\\n                    <\/p>\n<h2 class=\\\"mhs-hero-title\\\">\\n                        Learning That\\n                        <span>Builds Minds.<\/span>\\n                        Character That Builds Men.\\n                    <\/h2>\n<p>\\n\\n                    <\/p>\n<p class=\\\"mhs-hero-text\\\">\\n                        We nurture intellectual curiosity,\\n                        discipline and confidence, preparing\\n                        students to meet the future with strength.\\n                    <\/p>\n<p>\\n\\n                    <\/p>\n<div class=\\\"mhs-hero-buttons\\\">\\n\\n                        <a href=\\\"\/academics\/\\\"\\n                           class=\\\"mhs-btn mhs-btn-primary\\\">\\n                            Explore Academics\\n                            <span>\u2192<\/span>\\n                        <\/a>\\n\\n                    <\/div>\n<p>\\n\\n                <\/p><\/div>\n<p>\\n\\n\\n                <\/p>\n<div class=\\\"mhs-word-card\\\">\\n\\n                    <span>LEARN<\/span>\\n                    <i><\/i>\\n                    <span>LEAD<\/span>\\n                    <i><\/i>\\n                    <span>EXCEL<\/span>\\n\\n                <\/div>\n<p>\\n\\n            <\/p><\/div>\n<p>\\n\\n        <\/article>\n<p>\\n\\n\\n\\n        <!-- ====================================================\\n             SLIDE 03 \u2014 STUDENT LIFE\\n             ==================================================== -->\\n\\n        <\/p>\n<article class=\\\"mhs-slide\\\" data-slide=\\\"3\\\">\\n\\n            <\/p>\n<div class=\\\"mhs-slide-image\\\"\\n                 style=\\\"background-image:url('\/wp-content\/uploads\/mhsc2O2A8835-scaled.jpg');\\\">\\n            <\/div>\n<p>\\n\\n            <\/p>\n<div class=\\\"mhs-image-shade\\\"><\/div>\n<p>\\n            <\/p>\n<div class=\\\"mhs-slide-glow\\\"><\/div>\n<p>\\n\\n            <\/p>\n<div class=\\\"mhs-hero-container\\\">\\n\\n                <\/p>\n<div class=\\\"mhs-hero-content\\\">\\n\\n                    <\/p>\n<div class=\\\"mhs-slide-eyebrow\\\">\\n                        <span class=\\\"mhs-eyebrow-line\\\"><\/span>\\n                        BEYOND THE CLASSROOM\\n                    <\/div>\n<p>\\n\\n                    <\/p>\n<h2 class=\\\"mhs-hero-title\\\">\\n                        Discover Talent.\\n                        <span>Build Character.<\/span>\\n                        Inspire Leadership.\\n                    <\/h2>\n<p>\\n\\n                    <\/p>\n<p class=\\\"mhs-hero-text\\\">\\n                        Sport, leadership, creativity and\\n                        co-curricular life form an essential part\\n                        of the Mbarara High School experience.\\n                    <\/p>\n<p>\\n\\n                    <\/p>\n<div class=\\\"mhs-hero-buttons\\\">\\n\\n                        <a href=\\\"\/activities\/\\\"\\n                           class=\\\"mhs-btn mhs-btn-primary\\\">\\n                            Student Life\\n                            <span>\u2192<\/span>\\n                        <\/a>\\n\\n                    <\/div>\n<p>\\n\\n                <\/p><\/div>\n<p>\\n\\n\\n                <\/p>\n<div class=\\\"mhs-word-card\\\">\\n\\n                    <span>COURAGE<\/span>\\n                    <i><\/i>\\n                    <span>DISCIPLINE<\/span>\\n                    <i><\/i>\\n                    <span>LEADERSHIP<\/span>\\n\\n                <\/div>\n<p>\\n\\n            <\/p><\/div>\n<p>\\n\\n        <\/article>\n<p>\\n\\n\\n\\n        <!-- ====================================================\\n             SLIDE 04 \u2014 HISTORY\\n             ==================================================== -->\\n\\n        <\/p>\n<article class=\\\"mhs-slide\\\" data-slide=\\\"4\\\">\\n\\n            <\/p>\n<div class=\\\"mhs-slide-image\\\"\\n                 style=\\\"background-image:url('\/wp-content\/uploads\/MG_1898.jpg');\\\">\\n            <\/div>\n<p>\\n\\n            <\/p>\n<div class=\\\"mhs-image-shade\\\"><\/div>\n<p>\\n            <\/p>\n<div class=\\\"mhs-slide-glow\\\"><\/div>\n<p>\\n\\n            <\/p>\n<div class=\\\"mhs-hero-container\\\">\\n\\n                <\/p>\n<div class=\\\"mhs-hero-content\\\">\\n\\n                    <\/p>\n<div class=\\\"mhs-slide-eyebrow\\\">\\n                        <span class=\\\"mhs-eyebrow-line\\\"><\/span>\\n                        SINCE 1911\\n                    <\/div>\n<p>\\n\\n                    <\/p>\n<h2 class=\\\"mhs-hero-title\\\">\\n                        Rooted in History.\\n                        <span>Ready for Tomorrow.<\/span>\\n                    <\/h2>\n<p>\\n\\n                    <\/p>\n<p class=\\\"mhs-hero-text\\\">\\n                        From our beginnings in Kamukuzi to our\\n                        home on Ruharo Hill, our story continues\\n                        through every generation.\\n                    <\/p>\n<p>\\n\\n                    <\/p>\n<div class=\\\"mhs-hero-buttons\\\">\\n\\n                        <a href=\\\"\/about\/\\\"\\n                           class=\\\"mhs-btn mhs-btn-primary\\\">\\n                            Our History\\n                            <span>\u2192<\/span>\\n                        <\/a>\\n\\n                    <\/div>\n<p>\\n\\n                <\/p><\/div>\n<p>\\n\\n\\n                <\/p>\n<div class=\\\"mhs-motto-card\\\">\\n\\n                    <span>OUR MOTTO<\/span>\\n\\n                    <strong>\\n                        MUGUME\\n                        <br \/>\\n                        NAMAANI\\n                    <\/strong>\\n\\n                    <small>\\n                        BE STRONG AND COURAGEOUS\\n                    <\/small>\\n\\n                <\/div>\n<p>\\n\\n            <\/p><\/div>\n<p>\\n\\n        <\/article>\n<p>\\n\\n    <\/p><\/div>\n<p>\\n\\n\\n\\n    <!-- DECORATIVE ARCHITECTURAL LINES -->\\n\\n    <\/p>\n<div class=\\\"mhs-hero-architecture\\\">\\n        <span><\/span>\\n        <span><\/span>\\n        <span><\/span>\\n    <\/div>\n<p>\\n\\n\\n\\n    <!-- ========================================================\\n         SLIDER CONTROLS\\n         ======================================================== -->\\n\\n    <\/p>\n<div class=\\\"mhs-slider-controls\\\">\\n\\n        <\/p>\n<div class=\\\"mhs-slide-counter\\\">\\n\\n            <span id=\\\"mhsCurrentSlide\\\">01<\/span>\\n\\n            <\/p>\n<div class=\\\"mhs-counter-line\\\"><\/div>\n<p>\\n\\n            <span>04<\/span>\\n\\n        <\/div>\n<p>\\n\\n\\n        <\/p>\n<div class=\\\"mhs-slider-progress\\\">\\n            <span id=\\\"mhsProgress\\\"><\/span>\\n        <\/div>\n<p>\\n\\n\\n        <\/p>\n<div class=\\\"mhs-slider-dots\\\">\\n\\n            <button class=\\\"mhs-dot is-active\\\"\\n                    data-index=\\\"0\\\"\\n                    aria-label=\\\"Slide 1\\\">\\n            <\/button>\\n\\n            <button class=\\\"mhs-dot\\\"\\n                    data-index=\\\"1\\\"\\n                    aria-label=\\\"Slide 2\\\">\\n            <\/button>\\n\\n            <button class=\\\"mhs-dot\\\"\\n                    data-index=\\\"2\\\"\\n                    aria-label=\\\"Slide 3\\\">\\n            <\/button>\\n\\n            <button class=\\\"mhs-dot\\\"\\n                    data-index=\\\"3\\\"\\n                    aria-label=\\\"Slide 4\\\">\\n            <\/button>\\n\\n        <\/div>\n<p>\\n\\n\\n        <\/p>\n<div class=\\\"mhs-slider-arrows\\\">\\n\\n            <button id=\\\"mhsPrev\\\"\\n                    aria-label=\\\"Previous slide\\\">\\n                \u2190\\n            <\/button>\\n\\n            <button id=\\\"mhsNext\\\"\\n                    aria-label=\\\"Next slide\\\">\\n                \u2192\\n            <\/button>\\n\\n        <\/div>\n<p>\\n\\n    <\/p><\/div>\n<p>\\n\\n\\n\\n    <a href=\\\"#mhs-after-hero\\\"\\n       class=\\\"mhs-scroll-cue\\\">\\n\\n        <span>SCROLL TO EXPLORE<\/span>\\n\\n        <i><\/i>\\n\\n    <\/a>\\n\\n<\/section>\n<p>\\n\\n\\n<\/p>\n<div id=\\\"mhs-after-hero\\\"><\/div>\n<p>\\n\\n\\n\\n<\/p>\n<style>\\n\\n\/* ============================================================\\n   GLOBAL \/ BASE\\n   ============================================================ *\/\\n\\n#mhsHeroSlider,\\n#mhsHeroSlider * {\\n    box-sizing: border-box;\\n}\\n\\n\\n.mhs-hero-slider {\\n\\n    --mhs-blue: #078ee4;\\n    --mhs-light: #76d0ff;\\n    --mhs-navy: #03182e;\\n\\n    position: relative;\\n\\n    width: 100%;\\n\\n    height: clamp(680px, 86vh, 900px);\\n    min-height: 680px;\\n\\n    overflow: hidden;\\n\\n    background: #021426;\\n\\n    color: #fff;\\n\\n    isolation: isolate;\\n}\\n\\n\\n\\n\/* ============================================================\\n   SLIDES\\n   ============================================================ *\/\\n\\n.mhs-slides,\\n.mhs-slide {\\n\\n    position: absolute;\\n    inset: 0;\\n\\n}\\n\\n\\n.mhs-slide {\\n\\n    opacity: 0;\\n    visibility: hidden;\\n\\n    z-index: 1;\\n\\n    transition:\\n        opacity 1.15s cubic-bezier(.4,0,.2,1),\\n        visibility 1.15s;\\n\\n}\\n\\n\\n.mhs-slide.is-active {\\n\\n    opacity: 1;\\n    visibility: visible;\\n\\n    z-index: 2;\\n\\n}\\n\\n\\n\\n\/* ============================================================\\n   PHOTOGRAPHS\\n   ============================================================ *\/\\n\\n.mhs-slide-image {\\n\\n    position: absolute;\\n\\n    inset: -4%;\\n\\n    background-position: center;\\n    background-repeat: no-repeat;\\n    background-size: cover;\\n\\n    transform: scale(1.08);\\n\\n    transition:\\n        transform 8s cubic-bezier(.16,.8,.3,1);\\n\\n}\\n\\n\\n.mhs-slide.is-active .mhs-slide-image {\\n\\n    transform: scale(1);\\n\\n}\\n\\n\\n\\n\/* ============================================================\\n   DESKTOP IMAGE SHADE\\n   ============================================================ *\/\\n\\n.mhs-image-shade {\\n\\n    position: absolute;\\n\\n    inset: 0;\\n\\n    background:\\n\\n        linear-gradient(\\n            90deg,\\n            rgba(1,14,31,.95) 0%,\\n            rgba(2,25,52,.84) 34%,\\n            rgba(3,42,78,.48) 59%,\\n            rgba(2,26,48,.13) 78%,\\n            rgba(2,18,35,.28) 100%\\n        ),\\n\\n        linear-gradient(\\n            0deg,\\n            rgba(1,13,27,.73) 0%,\\n            transparent 35%,\\n            rgba(1,15,30,.15) 100%\\n        );\\n\\n}\\n\\n\\n.mhs-slide-glow {\\n\\n    position: absolute;\\n\\n    left: -10%;\\n    top: 20%;\\n\\n    width: 650px;\\n    height: 650px;\\n\\n    border-radius: 50%;\\n\\n    background: rgba(0,135,225,.15);\\n\\n    filter: blur(110px);\\n\\n    pointer-events: none;\\n\\n}\\n\\n\\n\\n\/* ============================================================\\n   CONTENT CONTAINER\\n   ============================================================ *\/\\n\\n.mhs-hero-container {\\n\\n    position: relative;\\n\\n    z-index: 5;\\n\\n    width:\\n        min(1380px, calc(100% - 100px));\\n\\n    height: 100%;\\n\\n    margin: auto;\\n\\n    display: flex;\\n\\n    align-items: center;\\n\\n    justify-content: space-between;\\n\\n    gap: 70px;\\n\\n    padding:\\n        55px 0 125px;\\n\\n}\\n\\n\\n.mhs-hero-content {\\n\\n    width: min(730px, 64%);\\n\\n    padding-top: 30px;\\n\\n}\\n\\n\\n\\n\/* ============================================================\\n   EYEBROW\\n   ============================================================ *\/\\n\\n.mhs-slide-eyebrow {\\n\\n    display: flex;\\n\\n    align-items: center;\\n\\n    gap: 15px;\\n\\n    margin-bottom: 22px;\\n\\n    color: #85d6ff;\\n\\n    font-size: 11px;\\n\\n    font-weight: 700;\\n\\n    letter-spacing: 5px;\\n\\n    opacity: 0;\\n\\n    transform: translateY(20px);\\n\\n}\\n\\n\\n.mhs-eyebrow-line {\\n\\n    width: 42px;\\n\\n    height: 2px;\\n\\n    flex: 0 0 auto;\\n\\n    background:\\n        linear-gradient(\\n            90deg,\\n            var(--mhs-blue),\\n            #b6e9ff\\n        );\\n\\n}\\n\\n\\n\\n\/* ============================================================\\n   MAIN TITLE\\n   ============================================================ *\/\\n\\n.mhs-hero-title {\\n\\n    max-width: 800px;\\n\\n    margin: 0;\\n\\n    color: #fff !important;\\n\\n    -webkit-text-fill-color:\\n        #fff !important;\\n\\n    font-family:\\n        \\\"Montserrat\\\",\\n        \\\"Helvetica Neue\\\",\\n        Arial,\\n        sans-serif;\\n\\n    font-size:\\n        clamp(48px, 5vw, 78px);\\n\\n    line-height: .98;\\n\\n    font-weight: 750;\\n\\n    letter-spacing: -3.4px;\\n\\n    text-wrap: balance;\\n\\n    opacity: 0;\\n\\n    transform: translateY(38px);\\n\\n}\\n\\n\\n.mhs-hero-title span {\\n\\n    color: #78d0ff !important;\\n\\n    -webkit-text-fill-color:\\n        #78d0ff !important;\\n\\n}\\n\\n\\n\\n\/* ============================================================\\n   DESCRIPTION\\n   ============================================================ *\/\\n\\n.mhs-hero-text {\\n\\n    max-width: 620px;\\n\\n    margin:\\n        27px 0 31px;\\n\\n    color:\\n        rgba(255,255,255,.80) !important;\\n\\n    font-size: 16px;\\n\\n    line-height: 1.8;\\n\\n    font-weight: 400;\\n\\n    opacity: 0;\\n\\n    transform: translateY(25px);\\n\\n}\\n\\n\\n\\n\/* ============================================================\\n   BUTTON AREA\\n   ============================================================ *\/\\n\\n.mhs-hero-buttons {\\n\\n    display: flex;\\n\\n    align-items: center;\\n\\n    flex-wrap: wrap;\\n\\n    gap: 12px;\\n\\n    opacity: 0;\\n\\n    transform: translateY(22px);\\n\\n}\\n\\n\\n.mhs-btn {\\n\\n    min-height: 52px;\\n\\n    display: inline-flex;\\n\\n    align-items: center;\\n\\n    justify-content: center;\\n\\n    gap: 22px;\\n\\n    padding:\\n        0 25px;\\n\\n    border-radius: 4px;\\n\\n    font-size: 12px;\\n\\n    font-weight: 700;\\n\\n    letter-spacing: .7px;\\n\\n    text-decoration:\\n        none !important;\\n\\n    transition:\\n        transform .25s ease,\\n        background .25s ease,\\n        border-color .25s ease,\\n        box-shadow .25s ease;\\n\\n}\\n\\n\\n.mhs-btn-primary {\\n\\n    background:\\n        linear-gradient(\\n            135deg,\\n            #0877c8,\\n            #08a0ee\\n        );\\n\\n    color: #fff !important;\\n\\n    box-shadow:\\n        0 12px 30px\\n        rgba(0,126,210,.25);\\n\\n}\\n\\n\\n.mhs-btn-primary:hover {\\n\\n    color: #fff !important;\\n\\n    transform:\\n        translateY(-2px);\\n\\n    box-shadow:\\n        0 17px 38px\\n        rgba(0,126,210,.36);\\n\\n}\\n\\n\\n.mhs-btn-primary span {\\n\\n    font-size: 18px;\\n\\n    transition:\\n        transform .25s ease;\\n\\n}\\n\\n\\n.mhs-btn-primary:hover span {\\n\\n    transform:\\n        translateX(4px);\\n\\n}\\n\\n\\n.mhs-btn-ghost {\\n\\n    border:\\n        1px solid\\n        rgba(255,255,255,.32);\\n\\n    background:\\n        rgba(255,255,255,.07);\\n\\n    backdrop-filter:\\n        blur(10px);\\n\\n    color: #fff !important;\\n\\n}\\n\\n\\n.mhs-btn-ghost:hover {\\n\\n    border-color:\\n        rgba(255,255,255,.65);\\n\\n    background:\\n        rgba(255,255,255,.13);\\n\\n    color: #fff !important;\\n\\n}\\n\\n\\n\\n\/* ============================================================\\n   HERITAGE + MOTTO CARDS\\n   ============================================================ *\/\\n\\n.mhs-heritage-card,\\n.mhs-motto-card {\\n\\n    position: relative;\\n\\n    width: 220px;\\n\\n    flex:\\n        0 0 220px;\\n\\n    padding:\\n        30px 27px;\\n\\n    border:\\n        1px solid\\n        rgba(255,255,255,.17);\\n\\n    border-radius: 3px;\\n\\n    background:\\n        linear-gradient(\\n            145deg,\\n            rgba(255,255,255,.12),\\n            rgba(255,255,255,.035)\\n        );\\n\\n    backdrop-filter:\\n        blur(15px);\\n\\n    box-shadow:\\n        0 30px 70px\\n        rgba(0,0,0,.19);\\n\\n    opacity: 0;\\n\\n    transform:\\n        translateX(30px);\\n\\n    overflow: hidden;\\n\\n}\\n\\n\\n.mhs-heritage-card::before,\\n.mhs-motto-card::before {\\n\\n    content: \\\"\\\";\\n\\n    position: absolute;\\n\\n    left: 0;\\n    top: 0;\\n\\n    width: 3px;\\n    height: 100%;\\n\\n    background:\\n        linear-gradient(\\n            #71d4ff,\\n            #087ccc\\n        );\\n\\n}\\n\\n\\n.mhs-card-label,\\n.mhs-motto-card > span {\\n\\n    display: block;\\n\\n    color:\\n        rgba(255,255,255,.58);\\n\\n    font-size: 9px;\\n\\n    font-weight: 700;\\n\\n    letter-spacing: 3px;\\n\\n}\\n\\n\\n.mhs-heritage-card strong {\\n\\n    display: block;\\n\\n    margin:\\n        9px 0 -3px;\\n\\n    color: #fff;\\n\\n    font-size: 67px;\\n\\n    line-height: 1;\\n\\n    font-weight: 300;\\n\\n    letter-spacing: -5px;\\n\\n}\\n\\n\\n.mhs-card-years {\\n\\n    color: #75d0ff;\\n\\n    font-size: 10px;\\n\\n    font-weight: 700;\\n\\n    letter-spacing: 2px;\\n\\n}\\n\\n\\n.mhs-card-rule {\\n\\n    width: 100%;\\n\\n    height: 1px;\\n\\n    margin:\\n        20px 0 14px;\\n\\n    background:\\n        rgba(255,255,255,.15);\\n\\n}\\n\\n\\n.mhs-heritage-card small {\\n\\n    color:\\n        rgba(255,255,255,.60);\\n\\n    font-size: 10px;\\n\\n    letter-spacing: 3px;\\n\\n}\\n\\n\\n\\n\/* ============================================================\\n   MOTTO CARD\\n   ============================================================ *\/\\n\\n.mhs-motto-card {\\n\\n    width: 260px;\\n\\n    flex-basis: 260px;\\n\\n}\\n\\n\\n.mhs-motto-card strong {\\n\\n    display: block;\\n\\n    margin:\\n        14px 0 15px;\\n\\n    color: #fff;\\n\\n    font-size: 32px;\\n\\n    line-height: 1;\\n\\n    letter-spacing: -1px;\\n\\n}\\n\\n\\n.mhs-motto-card small {\\n\\n    color: #77d1ff;\\n\\n    font-size: 9px;\\n\\n    font-weight: 700;\\n\\n    letter-spacing: 2px;\\n\\n}\\n\\n\\n\\n\/* ============================================================\\n   WORD CARD\\n   ============================================================ *\/\\n\\n.mhs-word-card {\\n\\n    display: flex;\\n\\n    align-items: center;\\n\\n    gap: 11px;\\n\\n    padding:\\n        13px 17px;\\n\\n    border:\\n        1px solid\\n        rgba(255,255,255,.17);\\n\\n    background:\\n        rgba(2,25,48,.24);\\n\\n    backdrop-filter:\\n        blur(12px);\\n\\n    color:\\n        rgba(255,255,255,.78);\\n\\n    font-size: 9px;\\n\\n    font-weight: 700;\\n\\n    letter-spacing: 2px;\\n\\n    opacity: 0;\\n\\n    transform:\\n        translateX(30px);\\n\\n}\\n\\n\\n.mhs-word-card i {\\n\\n    width: 4px;\\n    height: 4px;\\n\\n    border-radius: 50%;\\n\\n    background: #35b8ff;\\n\\n}\\n\\n\\n\\n\/* ============================================================\\n   ACTIVE SLIDE REVEALS\\n   ============================================================ *\/\\n\\n.mhs-slide.is-active\\n.mhs-slide-eyebrow {\\n\\n    animation:\\n        mhsHeroReveal\\n        .7s .25s forwards;\\n\\n}\\n\\n\\n.mhs-slide.is-active\\n.mhs-hero-title {\\n\\n    animation:\\n        mhsHeroReveal\\n        .85s .38s forwards;\\n\\n}\\n\\n\\n.mhs-slide.is-active\\n.mhs-hero-text {\\n\\n    animation:\\n        mhsHeroReveal\\n        .8s .56s forwards;\\n\\n}\\n\\n\\n.mhs-slide.is-active\\n.mhs-hero-buttons {\\n\\n    animation:\\n        mhsHeroReveal\\n        .8s .70s forwards;\\n\\n}\\n\\n\\n.mhs-slide.is-active\\n.mhs-heritage-card,\\n\\n.mhs-slide.is-active\\n.mhs-motto-card,\\n\\n.mhs-slide.is-active\\n.mhs-word-card {\\n\\n    animation:\\n        mhsCardReveal\\n        .9s .72s forwards;\\n\\n}\\n\\n\\n@keyframes mhsHeroReveal {\\n\\n    to {\\n\\n        opacity: 1;\\n\\n        transform:\\n            translateY(0);\\n\\n    }\\n\\n}\\n\\n\\n@keyframes mhsCardReveal {\\n\\n    to {\\n\\n        opacity: 1;\\n\\n        transform:\\n            translateX(0);\\n\\n    }\\n\\n}\\n\\n\\n\\n\/* ============================================================\\n   ARCHITECTURAL DECORATION\\n   ============================================================ *\/\\n\\n.mhs-hero-architecture {\\n\\n    position: absolute;\\n\\n    right: -100px;\\n\\n    bottom: 20%;\\n\\n    width: 450px;\\n    height: 450px;\\n\\n    z-index: 3;\\n\\n    opacity: .08;\\n\\n    pointer-events: none;\\n\\n}\\n\\n\\n.mhs-hero-architecture span {\\n\\n    position: absolute;\\n\\n    border:\\n        1px solid #83d8ff;\\n\\n    transform:\\n        rotate(45deg);\\n\\n}\\n\\n\\n.mhs-hero-architecture span:nth-child(1) {\\n\\n    inset: 0;\\n\\n}\\n\\n\\n.mhs-hero-architecture span:nth-child(2) {\\n\\n    inset: 60px;\\n\\n}\\n\\n\\n.mhs-hero-architecture span:nth-child(3) {\\n\\n    inset: 120px;\\n\\n}\\n\\n\\n\\n\/* ============================================================\\n   BOTTOM CONTROLS\\n   ============================================================ *\/\\n\\n.mhs-slider-controls {\\n\\n    position: absolute;\\n\\n    z-index: 20;\\n\\n    left: 50%;\\n\\n    bottom: 48px;\\n\\n    width:\\n        min(1380px, calc(100% - 100px));\\n\\n    transform:\\n        translateX(-50%);\\n\\n    display: grid;\\n\\n    grid-template-columns:\\n        auto minmax(100px, 280px)\\n        1fr auto;\\n\\n    align-items: center;\\n\\n    gap: 24px;\\n\\n}\\n\\n\\n\\n\/* Counter *\/\\n\\n.mhs-slide-counter {\\n\\n    display: flex;\\n\\n    align-items: center;\\n\\n    gap: 9px;\\n\\n    color:\\n        rgba(255,255,255,.52);\\n\\n    font-size: 10px;\\n\\n    font-weight: 700;\\n\\n    letter-spacing: 2px;\\n\\n}\\n\\n\\n#mhsCurrentSlide {\\n\\n    color: #fff;\\n\\n    font-size: 14px;\\n\\n}\\n\\n\\n.mhs-counter-line {\\n\\n    width: 25px;\\n\\n    height: 1px;\\n\\n    background:\\n        rgba(255,255,255,.32);\\n\\n}\\n\\n\\n\\n\/* Progress *\/\\n\\n.mhs-slider-progress {\\n\\n    position: relative;\\n\\n    height: 2px;\\n\\n    overflow: hidden;\\n\\n    background:\\n        rgba(255,255,255,.17);\\n\\n}\\n\\n\\n.mhs-slider-progress span {\\n\\n    position: absolute;\\n\\n    left: 0;\\n    top: 0;\\n\\n    width: 0;\\n    height: 100%;\\n\\n    background:\\n        linear-gradient(\\n            90deg,\\n            #078fe5,\\n            #8bdcff\\n        );\\n\\n}\\n\\n\\n\\n\/* Dots *\/\\n\\n.mhs-slider-dots {\\n\\n    display: flex;\\n\\n    justify-content: flex-end;\\n\\n    gap: 9px;\\n\\n}\\n\\n\\n.mhs-dot {\\n\\n    width: 7px;\\n    height: 7px;\\n\\n    padding: 0;\\n\\n    border: 0;\\n\\n    border-radius: 50%;\\n\\n    background:\\n        rgba(255,255,255,.32);\\n\\n    cursor: pointer;\\n\\n    transition:\\n        width .3s ease,\\n        border-radius .3s ease,\\n        background .3s ease;\\n\\n}\\n\\n\\n.mhs-dot.is-active {\\n\\n    width: 26px;\\n\\n    border-radius: 10px;\\n\\n    background: #5bc7ff;\\n\\n}\\n\\n\\n\\n\/* Arrows *\/\\n\\n.mhs-slider-arrows {\\n\\n    display: flex;\\n\\n    gap: 8px;\\n\\n}\\n\\n\\n.mhs-slider-arrows button {\\n\\n    width: 43px;\\n    height: 43px;\\n\\n    display: flex;\\n\\n    align-items: center;\\n    justify-content: center;\\n\\n    border:\\n        1px solid\\n        rgba(255,255,255,.22);\\n\\n    border-radius: 50%;\\n\\n    background:\\n        rgba(255,255,255,.055);\\n\\n    backdrop-filter:\\n        blur(10px);\\n\\n    color: #fff;\\n\\n    font-size: 17px;\\n\\n    cursor: pointer;\\n\\n    transition:\\n        background .25s ease,\\n        border-color .25s ease,\\n        transform .25s ease;\\n\\n}\\n\\n\\n.mhs-slider-arrows button:hover {\\n\\n    background: #087fce;\\n\\n    border-color: #087fce;\\n\\n    transform:\\n        translateY(-2px);\\n\\n}\\n\\n\\n\\n\/* ============================================================\\n   SCROLL CUE\\n   ============================================================ *\/\\n\\n.mhs-scroll-cue {\\n\\n    position: absolute;\\n\\n    z-index: 15;\\n\\n    right: 27px;\\n\\n    top: 50%;\\n\\n    display: flex;\\n\\n    align-items: center;\\n\\n    gap: 13px;\\n\\n    transform:\\n        translateY(-50%)\\n        rotate(90deg);\\n\\n    transform-origin: center;\\n\\n    color:\\n        rgba(255,255,255,.50) !important;\\n\\n    font-size: 8px;\\n\\n    font-weight: 700;\\n\\n    letter-spacing: 3px;\\n\\n    text-decoration:\\n        none !important;\\n\\n}\\n\\n\\n.mhs-scroll-cue i {\\n\\n    position: relative;\\n\\n    width: 52px;\\n    height: 1px;\\n\\n    overflow: hidden;\\n\\n    background:\\n        rgba(255,255,255,.20);\\n\\n}\\n\\n\\n.mhs-scroll-cue i::after {\\n\\n    content: \\\"\\\";\\n\\n    position: absolute;\\n\\n    width: 25px;\\n    height: 100%;\\n\\n    background: #68ceff;\\n\\n    animation:\\n        mhsScrollMove\\n        1.8s infinite ease-in-out;\\n\\n}\\n\\n\\n@keyframes mhsScrollMove {\\n\\n    from {\\n\\n        left: -25px;\\n\\n    }\\n\\n    to {\\n\\n        left: 55px;\\n\\n    }\\n\\n}\\n\\n\\n\\n\/* ============================================================\\n   TABLET\\n   ============================================================ *\/\\n\\n@media (max-width: 1100px) {\\n\\n    .mhs-hero-container,\\n    .mhs-slider-controls {\\n\\n        width:\\n            calc(100% - 60px);\\n\\n    }\\n\\n\\n    .mhs-hero-title {\\n\\n        font-size:\\n            clamp(45px, 6vw, 68px);\\n\\n    }\\n\\n\\n    .mhs-heritage-card,\\n    .mhs-motto-card,\\n    .mhs-word-card {\\n\\n        display: none;\\n\\n    }\\n\\n\\n    .mhs-hero-content {\\n\\n        width: 78%;\\n\\n    }\\n\\n}\\n\\n\\n\\n\/* ============================================================\\n   MOBILE\\n   ============================================================ *\/\\n\\n@media (max-width: 767px) {\\n\\n    .mhs-hero-slider {\\n\\n        \/*\\n         * Taller than the old mobile version.\\n         * This gives the photograph and text room to breathe.\\n         *\/\\n\\n        height: 82dvh;\\n\\n        min-height: 650px;\\n\\n        max-height: 820px;\\n\\n    }\\n\\n\\n\\n    \/* --------------------------------------------------------\\n       PHOTOGRAPH\\n       -------------------------------------------------------- *\/\\n\\n    .mhs-slide-image {\\n\\n        inset: 0;\\n\\n        transform:\\n            scale(1.05);\\n\\n        background-position:\\n            center center;\\n\\n        background-size:\\n            cover;\\n\\n    }\\n\\n\\n    .mhs-slide.is-active\\n    .mhs-slide-image {\\n\\n        transform:\\n            scale(1);\\n\\n    }\\n\\n\\n\\n    \/* --------------------------------------------------------\\n       MOBILE SHADE\\n       -------------------------------------------------------- *\/\\n\\n    .mhs-image-shade {\\n\\n        background:\\n\\n            linear-gradient(\\n                0deg,\\n                rgba(1,13,28,.97) 0%,\\n                rgba(2,22,46,.91) 28%,\\n                rgba(2,30,59,.72) 49%,\\n                rgba(3,37,69,.38) 70%,\\n                rgba(2,18,35,.14) 100%\\n            ),\\n\\n            linear-gradient(\\n                90deg,\\n                rgba(0,19,39,.20),\\n                transparent 48%,\\n                rgba(0,19,39,.12)\\n            );\\n\\n    }\\n\\n\\n\\n    \/* --------------------------------------------------------\\n       CONTENT POSITION\\n       -------------------------------------------------------- *\/\\n\\n    .mhs-hero-container {\\n\\n        width:\\n            calc(100% - 40px);\\n\\n        height: 100%;\\n\\n        display: flex;\\n\\n        align-items: flex-end;\\n\\n        padding:\\n            54px 0 124px;\\n\\n    }\\n\\n\\n    .mhs-hero-content {\\n\\n        width: 100%;\\n\\n        max-width: 620px;\\n\\n        padding: 0;\\n\\n    }\\n\\n\\n\\n    \/* --------------------------------------------------------\\n       EYEBROW\\n       -------------------------------------------------------- *\/\\n\\n    .mhs-slide-eyebrow {\\n\\n        gap: 10px;\\n\\n        margin-bottom: 13px;\\n\\n        font-size: 10px;\\n\\n        line-height: 1.35;\\n\\n        font-weight: 700;\\n\\n        letter-spacing: 3px;\\n\\n    }\\n\\n\\n    .mhs-eyebrow-line {\\n\\n        width: 30px;\\n\\n        height: 2px;\\n\\n    }\\n\\n\\n\\n    \/* --------------------------------------------------------\\n       MAIN MOBILE TITLE\\n       -------------------------------------------------------- *\/\\n\\n    .mhs-hero-title {\\n\\n        max-width: 100%;\\n\\n        font-size:\\n            clamp(34px, 9.2vw, 44px);\\n\\n        line-height: 1.02;\\n\\n        font-weight: 750;\\n\\n        letter-spacing: -1.7px;\\n\\n        text-wrap: balance;\\n\\n    }\\n\\n\\n    .mhs-hero-title span {\\n\\n        color:\\n            #78d0ff !important;\\n\\n        -webkit-text-fill-color:\\n            #78d0ff !important;\\n\\n    }\\n\\n\\n\\n    \/*\\n     * Slides 2 and 3 have considerably more title text.\\n     * Reduce them only slightly rather than shrinking every\\n     * slide.\\n     *\/\\n\\n    .mhs-slide[data-slide=\\\"2\\\"]\\n    .mhs-hero-title,\\n\\n    .mhs-slide[data-slide=\\\"3\\\"]\\n    .mhs-hero-title {\\n\\n        font-size:\\n            clamp(32px, 8.6vw, 41px);\\n\\n        line-height: 1.03;\\n\\n    }\\n\\n\\n\\n    \/* --------------------------------------------------------\\n       DESCRIPTION\\n       -------------------------------------------------------- *\/\\n\\n    .mhs-hero-text {\\n\\n        max-width: 96%;\\n\\n        margin:\\n            17px 0 22px;\\n\\n        font-size: 15px;\\n\\n        line-height: 1.55;\\n\\n        font-weight: 400;\\n\\n        color:\\n            rgba(255,255,255,.84) !important;\\n\\n    }\\n\\n\\n\\n    \/* --------------------------------------------------------\\n       MOBILE BUTTON\\n       -------------------------------------------------------- *\/\\n\\n    .mhs-hero-buttons {\\n\\n        gap: 10px;\\n\\n    }\\n\\n\\n    .mhs-btn {\\n\\n        width: auto;\\n\\n        min-width: 175px;\\n\\n        max-width: 88%;\\n\\n        min-height: 48px;\\n\\n        padding:\\n            0 22px;\\n\\n        font-size: 12px;\\n\\n        font-weight: 700;\\n\\n        letter-spacing: .45px;\\n\\n    }\\n\\n\\n    .mhs-btn-primary span {\\n\\n        font-size: 18px;\\n\\n    }\\n\\n\\n    .mhs-btn-ghost {\\n\\n        display: none;\\n\\n    }\\n\\n\\n\\n    \/* --------------------------------------------------------\\n       MOBILE CONTROLS\\n       -------------------------------------------------------- *\/\\n\\n    .mhs-slider-controls {\\n\\n        left: 20px;\\n\\n        right: 20px;\\n\\n        bottom: 28px;\\n\\n        width: auto;\\n\\n        transform: none;\\n\\n        grid-template-columns:\\n            auto 1fr auto;\\n\\n        gap: 14px;\\n\\n    }\\n\\n\\n    .mhs-slider-progress {\\n\\n        display: block;\\n\\n    }\\n\\n\\n    .mhs-slider-dots {\\n\\n        display: none;\\n\\n    }\\n\\n\\n    .mhs-slider-arrows {\\n\\n        gap: 7px;\\n\\n    }\\n\\n\\n    .mhs-slider-arrows button {\\n\\n        width: 39px;\\n\\n        height: 39px;\\n\\n        font-size: 15px;\\n\\n    }\\n\\n\\n\\n    \/* Counter *\/\\n\\n    .mhs-slide-counter {\\n\\n        gap: 7px;\\n\\n        font-size: 9px;\\n\\n        letter-spacing: 1.4px;\\n\\n    }\\n\\n\\n    #mhsCurrentSlide {\\n\\n        font-size: 12px;\\n\\n    }\\n\\n\\n    .mhs-counter-line {\\n\\n        width: 16px;\\n\\n    }\\n\\n\\n\\n    \/* Remove desktop decorations *\/\\n\\n    .mhs-scroll-cue,\\n    .mhs-hero-architecture {\\n\\n        display: none;\\n\\n    }\\n\\n}\\n\\n\\n\\n\/* ============================================================\\n   VERY SMALL PHONES\\n   ============================================================ *\/\\n\\n@media (max-width: 390px) {\\n\\n    .mhs-hero-slider {\\n\\n        height: 84dvh;\\n\\n        min-height: 630px;\\n\\n        max-height: 780px;\\n\\n    }\\n\\n\\n    .mhs-hero-container {\\n\\n        width:\\n            calc(100% - 32px);\\n\\n        padding:\\n            48px 0 116px;\\n\\n    }\\n\\n\\n    .mhs-hero-title {\\n\\n        font-size:\\n            clamp(32px, 9vw, 38px);\\n\\n        line-height: 1.03;\\n\\n        letter-spacing: -1.4px;\\n\\n    }\\n\\n\\n    .mhs-slide[data-slide=\\\"2\\\"]\\n    .mhs-hero-title,\\n\\n    .mhs-slide[data-slide=\\\"3\\\"]\\n    .mhs-hero-title {\\n\\n        font-size:\\n            clamp(30px, 8.4vw, 36px);\\n\\n    }\\n\\n\\n    .mhs-hero-text {\\n\\n        max-width: 100%;\\n\\n        margin:\\n            15px 0 19px;\\n\\n        font-size: 14px;\\n\\n        line-height: 1.52;\\n\\n    }\\n\\n\\n    .mhs-slide-eyebrow {\\n\\n        margin-bottom: 11px;\\n\\n        font-size: 9px;\\n\\n        letter-spacing: 2.5px;\\n\\n    }\\n\\n\\n    .mhs-btn {\\n\\n        min-height: 46px;\\n\\n        min-width: 165px;\\n\\n        padding:\\n            0 19px;\\n\\n        font-size: 11px;\\n\\n    }\\n\\n\\n    .mhs-slider-controls {\\n\\n        left: 16px;\\n\\n        right: 16px;\\n\\n        bottom: 25px;\\n\\n    }\\n\\n}\\n\\n\\n\\n\/* ============================================================\\n   SHORT MOBILE SCREENS\\n   Prevent content collision on landscape\/short browsers\\n   ============================================================ *\/\\n\\n@media (max-width: 767px) and (max-height: 680px) {\\n\\n    .mhs-hero-slider {\\n\\n        height: 680px;\\n\\n        min-height: 680px;\\n\\n    }\\n\\n\\n    .mhs-hero-container {\\n\\n        padding-bottom: 108px;\\n\\n    }\\n\\n\\n    .mhs-hero-title {\\n\\n        font-size:\\n            clamp(31px, 8.5vw, 38px);\\n\\n    }\\n\\n\\n    .mhs-slide[data-slide=\\\"2\\\"]\\n    .mhs-hero-title,\\n\\n    .mhs-slide[data-slide=\\\"3\\\"]\\n    .mhs-hero-title {\\n\\n        font-size:\\n            clamp(29px, 8vw, 35px);\\n\\n    }\\n\\n\\n    .mhs-hero-text {\\n\\n        font-size: 14px;\\n\\n        margin:\\n            14px 0 17px;\\n\\n    }\\n\\n}\\n\\n\\n\\n\/* ============================================================\\n   REDUCED MOTION\\n   ============================================================ *\/\\n\\n@media (prefers-reduced-motion: reduce) {\\n\\n    .mhs-slide-image,\\n    .mhs-slide-eyebrow,\\n    .mhs-hero-title,\\n    .mhs-hero-text,\\n    .mhs-hero-buttons,\\n    .mhs-heritage-card,\\n    .mhs-motto-card,\\n    .mhs-word-card {\\n\\n        animation:\\n            none !important;\\n\\n        transition:\\n            none !important;\\n\\n        opacity:\\n            1 !important;\\n\\n        transform:\\n            none !important;\\n\\n    }\\n\\n}\\n\\n<\/style>\n<p>\\n\\n\\n\\n<script>\\n\\n(function () {\\n\\n    const slider =\\n        document.getElementById('mhsHeroSlider');\\n\\n    if (!slider) return;\\n\\n\\n    const slides =\\n        Array.from(\\n            slider.querySelectorAll('.mhs-slide')\\n        );\\n\\n\\n    const dots =\\n        Array.from(\\n            slider.querySelectorAll('.mhs-dot')\\n        );\\n\\n\\n    const prev =\\n        slider.querySelector('#mhsPrev');\\n\\n\\n    const next =\\n        slider.querySelector('#mhsNext');\\n\\n\\n    const counter =\\n        slider.querySelector('#mhsCurrentSlide');\\n\\n\\n    const progress =\\n        slider.querySelector('#mhsProgress');\\n\\n\\n    const duration = 6500;\\n\\n    let current = 0;\\n\\n    let timer = null;\\n\\n    let touchStartX = 0;\\n\\n    let touchEndX = 0;\\n\\n\\n\\n    \/* ========================================================\\n       PROGRESS BAR\\n       ======================================================== *\/\\n\\n    function startProgress() {\\n\\n        if (!progress) return;\\n\\n        progress.style.transition = 'none';\\n\\n        progress.style.width = '0%';\\n\\n\\n        requestAnimationFrame(function () {\\n\\n            requestAnimationFrame(function () {\\n\\n                progress.style.transition =\\n                    'width ' +\\n                    duration +\\n                    'ms linear';\\n\\n                progress.style.width =\\n                    '100%';\\n\\n            });\\n\\n        });\\n\\n    }\\n\\n\\n\\n    \/* ========================================================\\n       SHOW SLIDE\\n       ======================================================== *\/\\n\\n    function showSlide(index) {\\n\\n        if (index < 0) {\\n\\n            index =\\n                slides.length - 1;\\n\\n        }\\n\\n\\n        if (index >= slides.length) {\\n\\n            index = 0;\\n\\n        }\\n\\n\\n        slides.forEach(function (slide) {\\n\\n            slide.classList.remove(\\n                'is-active'\\n            );\\n\\n        });\\n\\n\\n        dots.forEach(function (dot) {\\n\\n            dot.classList.remove(\\n                'is-active'\\n            );\\n\\n        });\\n\\n\\n        \/*\\n         * Force browser reflow so the entrance animation\\n         * restarts when a slide returns.\\n         *\/\\n\\n        void slides[index].offsetWidth;\\n\\n\\n        slides[index].classList.add(\\n            'is-active'\\n        );\\n\\n\\n        if (dots[index]) {\\n\\n            dots[index].classList.add(\\n                'is-active'\\n            );\\n\\n        }\\n\\n\\n        current = index;\\n\\n\\n        if (counter) {\\n\\n            counter.textContent =\\n                String(index + 1)\\n                .padStart(2, '0');\\n\\n        }\\n\\n\\n        startProgress();\\n\\n    }\\n\\n\\n\\n    \/* ========================================================\\n       AUTOPLAY\\n       ======================================================== *\/\\n\\n    function startAutoPlay() {\\n\\n        clearInterval(timer);\\n\\n        startProgress();\\n\\n\\n        timer =\\n            setInterval(function () {\\n\\n                showSlide(\\n                    current + 1\\n                );\\n\\n            }, duration);\\n\\n    }\\n\\n\\n    function resetAutoPlay() {\\n\\n        clearInterval(timer);\\n\\n        startAutoPlay();\\n\\n    }\\n\\n\\n\\n    \/* ========================================================\\n       ARROWS\\n       ======================================================== *\/\\n\\n    if (next) {\\n\\n        next.addEventListener(\\n            'click',\\n            function () {\\n\\n                showSlide(\\n                    current + 1\\n                );\\n\\n                resetAutoPlay();\\n\\n            }\\n        );\\n\\n    }\\n\\n\\n    if (prev) {\\n\\n        prev.addEventListener(\\n            'click',\\n            function () {\\n\\n                showSlide(\\n                    current - 1\\n                );\\n\\n                resetAutoPlay();\\n\\n            }\\n        );\\n\\n    }\\n\\n\\n\\n    \/* ========================================================\\n       DOT NAVIGATION\\n       ======================================================== *\/\\n\\n    dots.forEach(function (dot) {\\n\\n        dot.addEventListener(\\n            'click',\\n            function () {\\n\\n                const index =\\n                    Number(\\n                        this.dataset.index\\n                    );\\n\\n\\n                showSlide(index);\\n\\n                resetAutoPlay();\\n\\n            }\\n        );\\n\\n    });\\n\\n\\n\\n    \/* ========================================================\\n       PAUSE WHILE DESKTOP USER HOVERS\\n       ======================================================== *\/\\n\\n    slider.addEventListener(\\n        'mouseenter',\\n        function () {\\n\\n            clearInterval(timer);\\n\\n            if (progress) {\\n\\n                const width =\\n                    progress.getBoundingClientRect()\\n                    .width;\\n\\n                const parentWidth =\\n                    progress.parentElement\\n                    .getBoundingClientRect()\\n                    .width;\\n\\n                if (parentWidth > 0) {\\n\\n                    const percent =\\n                        (width \/ parentWidth) * 100;\\n\\n                    progress.style.transition =\\n                        'none';\\n\\n                    progress.style.width =\\n                        percent + '%';\\n\\n                }\\n\\n            }\\n\\n        }\\n    );\\n\\n\\n    slider.addEventListener(\\n        'mouseleave',\\n        function () {\\n\\n            startAutoPlay();\\n\\n        }\\n    );\\n\\n\\n\\n    \/* ========================================================\\n       MOBILE SWIPE\\n       ======================================================== *\/\\n\\n    slider.addEventListener(\\n        'touchstart',\\n        function (event) {\\n\\n            touchStartX =\\n                event.changedTouches[0]\\n                .screenX;\\n\\n        },\\n        {\\n            passive: true\\n        }\\n    );\\n\\n\\n    slider.addEventListener(\\n        'touchend',\\n        function (event) {\\n\\n            touchEndX =\\n                event.changedTouches[0]\\n                .screenX;\\n\\n\\n            const distance =\\n                touchEndX -\\n                touchStartX;\\n\\n\\n            if (\\n                Math.abs(distance) <\\n                45\\n            ) {\\n\\n                return;\\n\\n            }\\n\\n\\n            if (distance < 0) {\\n\\n                showSlide(\\n                    current + 1\\n                );\\n\\n            } else {\\n\\n                showSlide(\\n                    current - 1\\n                );\\n\\n            }\\n\\n\\n            resetAutoPlay();\\n\\n        },\\n        {\\n            passive: true\\n        }\\n    );\\n\\n\\n\\n    \/* ========================================================\\n       KEYBOARD NAVIGATION\\n       ======================================================== *\/\\n\\n    document.addEventListener(\\n        'keydown',\\n        function (event) {\\n\\n            if (\\n                event.key ===\\n                'ArrowRight'\\n            ) {\\n\\n                showSlide(\\n                    current + 1\\n                );\\n\\n                resetAutoPlay();\\n\\n            }\\n\\n\\n            if (\\n                event.key ===\\n                'ArrowLeft'\\n            ) {\\n\\n                showSlide(\\n                    current - 1\\n                );\\n\\n                resetAutoPlay();\\n\\n            }\\n\\n        }\\n    );\\n\\n\\n\\n    \/* ========================================================\\n       BACKGROUND TAB\\n       ======================================================== *\/\\n\\n    document.addEventListener(\\n        'visibilitychange',\\n        function () {\\n\\n            if (\\n                document.hidden\\n            ) {\\n\\n                clearInterval(timer);\\n\\n            } else {\\n\\n                startAutoPlay();\\n\\n            }\\n\\n        }\\n    );\\n\\n\\n\\n    \/* ========================================================\\n       INITIALISE\\n       ======================================================== *\/\\n\\n    showSlide(0);\\n\\n    startAutoPlay();\\n\\n})();\\n\\n<\/script>\"}}]}]}]},{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"padding_bottom\":\"none\",\"padding_top\":\"none\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<!-- =========================================================\\n     MBARARA HIGH SCHOOL\\n     WHY MHS \/ INSTITUTIONAL INTRODUCTION\\n     ========================================================= -->\\n\\n<\/p>\n<section class=\\\"mhs-why\\\">\\n\\n    <!-- Decorative background -->\\n    <\/p>\n<div class=\\\"mhs-why-grid\\\"><\/div>\n<p>\\n    <\/p>\n<div class=\\\"mhs-why-glow\\\"><\/div>\n<p>\\n    <\/p>\n<div class=\\\"mhs-why-ring ring-one\\\"><\/div>\n<p>\\n    <\/p>\n<div class=\\\"mhs-why-ring ring-two\\\"><\/div>\n<p>\\n\\n    <\/p>\n<div class=\\\"mhs-why-container\\\">\\n\\n        <!-- =========================\\n             SECTION INTRO\\n             ========================= -->\\n        <\/p>\n<div class=\\\"mhs-why-intro\\\">\\n\\n            <\/p>\n<div class=\\\"mhs-eyebrow\\\">\\n                <span class=\\\"mhs-eyebrow-line\\\"><\/span>\\n                <span>WHY MBARARA HIGH SCHOOL<\/span>\\n            <\/div>\n<p>\\n\\n            <\/p>\n<div class=\\\"mhs-intro-grid\\\">\\n\\n                <\/p>\n<div class=\\\"mhs-intro-heading\\\">\\n                    <\/p>\n<h2>\\n                        More Than a School.<br \/>\\n                        <span>A Legacy of Strength.<\/span>\\n                    <\/h2>\n<p>\\n                <\/p><\/div>\n<p>\\n\\n                <\/p>\n<div class=\\\"mhs-intro-copy\\\">\\n                    <\/p>\n<p>\\n                        Since 1911, Mbarara High School has stood for\\n                        academic excellence, character, discipline and\\n                        purposeful leadership.\\n                    <\/p>\n<p>\\n\\n                    <\/p>\n<p>\\n                        From our historic home on Ruharo Hill, generations\\n                        of students have been prepared not only to succeed,\\n                        but to lead with courage and responsibility.\\n                    <\/p>\n<p>\\n\\n                    <a href=\\\"\/about\/\\\" class=\\\"mhs-text-link\\\">\\n                        <span>Discover Mbarara High School<\/span>\\n                        <span class=\\\"mhs-link-arrow\\\">\u2192<\/span>\\n                    <\/a>\\n                <\/div>\n<p>\\n\\n            <\/p><\/div>\n<p>\\n        <\/p><\/div>\n<p>\\n\\n\\n        <!-- =========================\\n             PILLARS\\n             ========================= -->\\n        <\/p>\n<div class=\\\"mhs-pillars\\\">\\n\\n            <!-- 01 -->\\n            <a href=\\\"\/academics\/\\\" class=\\\"mhs-pillar\\\">\\n                <\/p>\n<div class=\\\"mhs-pillar-number\\\">01<\/div>\n<p>\\n\\n                <\/p>\n<div class=\\\"mhs-pillar-icon\\\">\\n                    <svg viewBox=\\\"0 0 64 64\\\" aria-hidden=\\\"true\\\">\\n                        <path d=\\\"M8 23L32 12l24 11-24 11L8 23Z\\\"\/>\\n                        <path d=\\\"M17 29v13c8 8 22 8 30 0V29\\\"\/>\\n                        <path d=\\\"M56 23v17\\\"\/>\\n                    <\/svg>\\n                <\/div>\n<p>\\n\\n                <\/p>\n<div class=\\\"mhs-pillar-content\\\">\\n                    <span class=\\\"mhs-pillar-small\\\">LEARN<\/span>\\n                    <\/p>\n<h3>Academic<br \/>Excellence<\/h3>\n<p>\\n                    <\/p>\n<p>\\n                        An environment that nurtures intellectual\\n                        curiosity, confidence and the pursuit of\\n                        outstanding achievement.\\n                    <\/p>\n<p>\\n                <\/p><\/div>\n<p>\\n\\n                <\/p>\n<div class=\\\"mhs-pillar-arrow\\\">&#x2197;<\/div>\n<p>\\n            <\/a>\\n\\n\\n            <!-- 02 -->\\n            <a href=\\\"\/about\/\\\" class=\\\"mhs-pillar\\\">\\n                <\/p>\n<div class=\\\"mhs-pillar-number\\\">02<\/div>\n<p>\\n\\n                <\/p>\n<div class=\\\"mhs-pillar-icon\\\">\\n                    <svg viewBox=\\\"0 0 64 64\\\" aria-hidden=\\\"true\\\">\\n                        <path d=\\\"M32 7 51 14v16c0 13-8 22-19 28C21 52 13 43 13 30V14L32 7Z\\\"\/>\\n                        <path d=\\\"m23 31 6 6 13-14\\\"\/>\\n                    <\/svg>\\n                <\/div>\n<p>\\n\\n                <\/p>\n<div class=\\\"mhs-pillar-content\\\">\\n                    <span class=\\\"mhs-pillar-small\\\">GROW<\/span>\\n                    <\/p>\n<h3>Character &amp;<br \/>Discipline<\/h3>\n<p>\\n                    <\/p>\n<p>\\n                        Strength of character, integrity and discipline\\n                        remain central to the Mbarara High School\\n                        experience.\\n                    <\/p>\n<p>\\n                <\/p><\/div>\n<p>\\n\\n                <\/p>\n<div class=\\\"mhs-pillar-arrow\\\">&#x2197;<\/div>\n<p>\\n            <\/a>\\n\\n\\n            <!-- 03 -->\\n            <a href=\\\"\/activities\/\\\" class=\\\"mhs-pillar\\\">\\n                <\/p>\n<div class=\\\"mhs-pillar-number\\\">03<\/div>\n<p>\\n\\n                <\/p>\n<div class=\\\"mhs-pillar-icon\\\">\\n                    <svg viewBox=\\\"0 0 64 64\\\" aria-hidden=\\\"true\\\">\\n                        <circle cx=\\\"32\\\" cy=\\\"19\\\" r=\\\"9\\\"\/>\\n                        <path d=\\\"M16 54c1-12 6-20 16-20s15 8 16 20\\\"\/>\\n                        <path d=\\\"M12 25 6 31l6 6\\\"\/>\\n                        <path d=\\\"M52 25l6 6-6 6\\\"\/>\\n                    <\/svg>\\n                <\/div>\n<p>\\n\\n                <\/p>\n<div class=\\\"mhs-pillar-content\\\">\\n                    <span class=\\\"mhs-pillar-small\\\">LEAD<\/span>\\n                    <\/p>\n<h3>Leadership &amp;<br \/>Talent<\/h3>\n<p>\\n                    <\/p>\n<p>\\n                        Sport, leadership, creativity and co-curricular\\n                        life help students discover ability beyond the\\n                        classroom.\\n                    <\/p>\n<p>\\n                <\/p><\/div>\n<p>\\n\\n                <\/p>\n<div class=\\\"mhs-pillar-arrow\\\">&#x2197;<\/div>\n<p>\\n            <\/a>\\n\\n\\n            <!-- 04 -->\\n            <a href=\\\"\/about\/\\\" class=\\\"mhs-pillar mhs-pillar-featured\\\">\\n\\n                <\/p>\n<div class=\\\"mhs-feature-circle\\\"><\/div>\n<p>\\n\\n                <\/p>\n<div class=\\\"mhs-pillar-number\\\">04<\/div>\n<p>\\n\\n                <\/p>\n<div class=\\\"mhs-years\\\">\\n                    <strong>115<\/strong>\\n                    <span>YEARS<\/span>\\n                <\/div>\n<p>\\n\\n                <\/p>\n<div class=\\\"mhs-pillar-content\\\">\\n                    <span class=\\\"mhs-pillar-small\\\">SINCE 1911<\/span>\\n                    <\/p>\n<h3>A Living<br \/>Heritage<\/h3>\n<p>\\n                    <\/p>\n<p>\\n                        More than a century of education, tradition and\\n                        service continues to shape every new generation.\\n                    <\/p>\n<p>\\n                <\/p><\/div>\n<p>\\n\\n                <\/p>\n<div class=\\\"mhs-pillar-arrow\\\">&#x2197;<\/div>\n<p>\\n            <\/a>\\n\\n        <\/div>\n<p>\\n\\n\\n        <!-- =========================\\n             MOTTO BAND\\n             ========================= -->\\n        <\/p>\n<div class=\\\"mhs-motto-band\\\">\\n\\n            <\/p>\n<div class=\\\"mhs-motto-mark\\\">\\n                <span><\/span>\\n            <\/div>\n<p>\\n\\n            <\/p>\n<div class=\\\"mhs-motto-copy\\\">\\n                <small>OUR ENDURING CALL<\/small>\\n\\n                <\/p>\n<div class=\\\"mhs-motto-title\\\">\\n                    <strong>MUGUME<\/strong>\\n                    <span>NAMAANI<\/span>\\n                <\/div>\n<p>\\n\\n                <\/p>\n<p>Be Strong and Courageous.<\/p>\n<p>\\n            <\/p><\/div>\n<p>\\n\\n            <a href=\\\"\/about\/\\\" class=\\\"mhs-motto-button\\\">\\n                <span>Our Story<\/span>\\n                <span>\u2192<\/span>\\n            <\/a>\\n\\n        <\/div>\n<p>\\n\\n    <\/p><\/div>\n<p>\\n<\/section>\n<p>\\n\\n\\n<\/p>\n<style>\\n\\n\/* =========================================================\\n   SECTION BASE\\n   ========================================================= *\/\\n\\n.mhs-why,\\n.mhs-why * {\\n    box-sizing: border-box;\\n}\\n\\n.mhs-why {\\n    --navy: #082b4c;\\n    --navy-deep: #051f38;\\n    --blue: #087dcc;\\n    --blue-bright: #16a9ee;\\n    --cyan: #65d5ff;\\n    --text: #183650;\\n    --muted: #617488;\\n    --line: rgba(7, 94, 157, .12);\\n\\n    position: relative;\\n    overflow: hidden;\\n    background:\\n        linear-gradient(\\n            135deg,\\n            #ffffff 0%,\\n            #f7fbff 52%,\\n            #edf7ff 100%\\n        );\\n\\n    padding: 110px 30px 80px;\\n    font-family: inherit;\\n}\\n\\n\\n\/* =========================================================\\n   BACKGROUND DETAILS\\n   ========================================================= *\/\\n\\n.mhs-why-grid {\\n    position: absolute;\\n    inset: 0;\\n    pointer-events: none;\\n\\n    background-image:\\n        linear-gradient(\\n            rgba(8, 80, 135, .035) 1px,\\n            transparent 1px\\n        ),\\n        linear-gradient(\\n            90deg,\\n            rgba(8, 80, 135, .035) 1px,\\n            transparent 1px\\n        );\\n\\n    background-size: 80px 80px;\\n\\n    mask-image:\\n        linear-gradient(\\n            to bottom,\\n            transparent,\\n            black 25%,\\n            black 75%,\\n            transparent\\n        );\\n}\\n\\n.mhs-why-glow {\\n    position: absolute;\\n    width: 650px;\\n    height: 650px;\\n    right: -300px;\\n    top: -300px;\\n\\n    border-radius: 50%;\\n\\n    background:\\n        radial-gradient(\\n            circle,\\n            rgba(29, 174, 238, .12),\\n            transparent 68%\\n        );\\n}\\n\\n.mhs-why-ring {\\n    position: absolute;\\n    border-radius: 50%;\\n    border: 1px solid rgba(8, 125, 204, .09);\\n    pointer-events: none;\\n}\\n\\n.mhs-why-ring.ring-one {\\n    width: 460px;\\n    height: 460px;\\n    right: -180px;\\n    top: 170px;\\n}\\n\\n.mhs-why-ring.ring-two {\\n    width: 310px;\\n    height: 310px;\\n    right: -105px;\\n    top: 245px;\\n}\\n\\n\\n\/* =========================================================\\n   CONTAINER\\n   ========================================================= *\/\\n\\n.mhs-why-container {\\n    position: relative;\\n    z-index: 2;\\n\\n    width: min(1380px, 100%);\\n    margin: 0 auto;\\n}\\n\\n\\n\/* =========================================================\\n   EYEBROW\\n   ========================================================= *\/\\n\\n.mhs-eyebrow {\\n    display: flex;\\n    align-items: center;\\n    gap: 18px;\\n\\n    margin-bottom: 30px;\\n\\n    color: var(--blue);\\n    font-size: 12px;\\n    font-weight: 800;\\n    letter-spacing: .30em;\\n}\\n\\n.mhs-eyebrow-line {\\n    display: block;\\n    width: 52px;\\n    height: 3px;\\n\\n    background:\\n        linear-gradient(\\n            90deg,\\n            var(--blue),\\n            var(--cyan)\\n        );\\n}\\n\\n\\n\/* =========================================================\\n   INTRO\\n   ========================================================= *\/\\n\\n.mhs-intro-grid {\\n    display: grid;\\n    grid-template-columns: 1.35fr .65fr;\\n    gap: 90px;\\n    align-items: end;\\n\\n    margin-bottom: 75px;\\n}\\n\\n.mhs-intro-heading h2 {\\n    margin: 0;\\n\\n    color: var(--navy-deep);\\n\\n    font-size: clamp(46px, 5vw, 78px);\\n    line-height: .98;\\n    letter-spacing: -.055em;\\n    font-weight: 800;\\n}\\n\\n.mhs-intro-heading h2 span {\\n    display: inline-block;\\n\\n    color: transparent;\\n\\n    background:\\n        linear-gradient(\\n            90deg,\\n            var(--blue),\\n            var(--blue-bright)\\n        );\\n\\n    -webkit-background-clip: text;\\n    background-clip: text;\\n}\\n\\n.mhs-intro-copy {\\n    max-width: 500px;\\n}\\n\\n.mhs-intro-copy p {\\n    margin: 0 0 15px;\\n\\n    color: var(--muted);\\n\\n    font-size: 16px;\\n    line-height: 1.75;\\n}\\n\\n.mhs-text-link {\\n    display: inline-flex;\\n    align-items: center;\\n    gap: 16px;\\n\\n    margin-top: 15px;\\n\\n    color: var(--navy) !important;\\n    text-decoration: none !important;\\n\\n    font-size: 14px;\\n    font-weight: 750;\\n}\\n\\n.mhs-link-arrow {\\n    display: flex;\\n    justify-content: center;\\n    align-items: center;\\n\\n    width: 36px;\\n    height: 36px;\\n\\n    border-radius: 50%;\\n    background: var(--navy);\\n    color: white;\\n\\n    transition:\\n        transform .3s ease,\\n        background .3s ease;\\n}\\n\\n.mhs-text-link:hover .mhs-link-arrow {\\n    transform: translateX(5px);\\n    background: var(--blue);\\n}\\n\\n\\n\/* =========================================================\\n   PILLARS\\n   ========================================================= *\/\\n\\n.mhs-pillars {\\n    display: grid;\\n    grid-template-columns: repeat(4, 1fr);\\n\\n    border-top: 1px solid var(--line);\\n    border-bottom: 1px solid var(--line);\\n\\n    margin-bottom: 65px;\\n}\\n\\n.mhs-pillar {\\n    position: relative;\\n\\n    min-height: 470px;\\n    padding: 34px 30px 36px;\\n\\n    display: flex;\\n    flex-direction: column;\\n\\n    border-right: 1px solid var(--line);\\n\\n    color: inherit !important;\\n    text-decoration: none !important;\\n\\n    overflow: hidden;\\n\\n    transition:\\n        transform .4s cubic-bezier(.2,.8,.2,1),\\n        background .4s ease,\\n        box-shadow .4s ease;\\n}\\n\\n.mhs-pillar:first-child {\\n    border-left: 1px solid var(--line);\\n}\\n\\n.mhs-pillar::before {\\n    content: \\\"\\\";\\n\\n    position: absolute;\\n    left: 0;\\n    right: 0;\\n    bottom: 0;\\n\\n    height: 4px;\\n\\n    background:\\n        linear-gradient(\\n            90deg,\\n            var(--blue),\\n            var(--cyan)\\n        );\\n\\n    transform: scaleX(0);\\n    transform-origin: left;\\n\\n    transition: transform .4s ease;\\n}\\n\\n.mhs-pillar:hover {\\n    z-index: 3;\\n\\n    transform: translateY(-10px);\\n\\n    background: rgba(255,255,255,.95);\\n\\n    box-shadow:\\n        0 28px 70px rgba(7, 50, 86, .10);\\n}\\n\\n.mhs-pillar:hover::before {\\n    transform: scaleX(1);\\n}\\n\\n\\n\/* number *\/\\n\\n.mhs-pillar-number {\\n    color: rgba(8, 43, 76, .35);\\n\\n    font-size: 11px;\\n    font-weight: 800;\\n    letter-spacing: .20em;\\n\\n    margin-bottom: 45px;\\n}\\n\\n\\n\/* icon *\/\\n\\n.mhs-pillar-icon {\\n    width: 62px;\\n    height: 62px;\\n\\n    display: flex;\\n    justify-content: center;\\n    align-items: center;\\n\\n    margin-bottom: 45px;\\n\\n    border-radius: 18px;\\n\\n    background:\\n        linear-gradient(\\n            145deg,\\n            rgba(8,125,204,.10),\\n            rgba(101,213,255,.10)\\n        );\\n\\n    transition:\\n        transform .4s ease,\\n        background .4s ease;\\n}\\n\\n.mhs-pillar-icon svg {\\n    width: 32px;\\n    height: 32px;\\n\\n    fill: none;\\n    stroke: var(--blue);\\n    stroke-width: 2;\\n    stroke-linecap: round;\\n    stroke-linejoin: round;\\n}\\n\\n.mhs-pillar:hover .mhs-pillar-icon {\\n    transform: translateY(-5px) rotate(-3deg);\\n\\n    background:\\n        linear-gradient(\\n            145deg,\\n            var(--blue),\\n            var(--blue-bright)\\n        );\\n}\\n\\n.mhs-pillar:hover .mhs-pillar-icon svg {\\n    stroke: white;\\n}\\n\\n\\n\/* content *\/\\n\\n.mhs-pillar-content {\\n    margin-top: auto;\\n}\\n\\n.mhs-pillar-small {\\n    display: block;\\n\\n    margin-bottom: 10px;\\n\\n    color: var(--blue);\\n\\n    font-size: 10px;\\n    font-weight: 800;\\n    letter-spacing: .28em;\\n}\\n\\n.mhs-pillar h3 {\\n    margin: 0 0 17px;\\n\\n    color: var(--navy-deep);\\n\\n    font-size: 28px;\\n    line-height: 1.05;\\n    letter-spacing: -.035em;\\n    font-weight: 800;\\n}\\n\\n.mhs-pillar p {\\n    margin: 0;\\n\\n    color: var(--muted);\\n\\n    font-size: 14px;\\n    line-height: 1.7;\\n}\\n\\n.mhs-pillar-arrow {\\n    position: absolute;\\n    top: 31px;\\n    right: 27px;\\n\\n    color: var(--blue);\\n\\n    font-size: 22px;\\n\\n    opacity: .45;\\n\\n    transition:\\n        transform .3s ease,\\n        opacity .3s ease;\\n}\\n\\n.mhs-pillar:hover .mhs-pillar-arrow {\\n    transform: translate(4px,-4px);\\n    opacity: 1;\\n}\\n\\n\\n\/* =========================================================\\n   FEATURED HERITAGE CARD\\n   ========================================================= *\/\\n\\n.mhs-pillar-featured {\\n    background:\\n        linear-gradient(\\n            145deg,\\n            #07365e 0%,\\n            #087dcc 100%\\n        ) !important;\\n}\\n\\n.mhs-pillar-featured::after {\\n    content: \\\"\\\";\\n\\n    position: absolute;\\n    width: 260px;\\n    height: 260px;\\n\\n    right: -130px;\\n    bottom: -130px;\\n\\n    border-radius: 50%;\\n    border: 1px solid rgba(255,255,255,.15);\\n}\\n\\n.mhs-pillar-featured .mhs-pillar-number,\\n.mhs-pillar-featured .mhs-pillar-small,\\n.mhs-pillar-featured p,\\n.mhs-pillar-featured .mhs-pillar-arrow {\\n    color: rgba(255,255,255,.72);\\n}\\n\\n.mhs-pillar-featured h3 {\\n    color: white;\\n}\\n\\n.mhs-years {\\n    margin-bottom: 25px;\\n    position: relative;\\n    z-index: 2;\\n}\\n\\n.mhs-years strong {\\n    display: block;\\n\\n    color: white;\\n\\n    font-size: 76px;\\n    line-height: .85;\\n    letter-spacing: -.07em;\\n    font-weight: 800;\\n}\\n\\n.mhs-years span {\\n    display: block;\\n\\n    margin-top: 12px;\\n\\n    color: var(--cyan);\\n\\n    font-size: 10px;\\n    font-weight: 800;\\n    letter-spacing: .42em;\\n}\\n\\n.mhs-feature-circle {\\n    position: absolute;\\n\\n    width: 170px;\\n    height: 170px;\\n\\n    right: -50px;\\n    top: 60px;\\n\\n    border-radius: 50%;\\n    border: 1px solid rgba(255,255,255,.12);\\n}\\n\\n\\n\/* =========================================================\\n   MOTTO BAND\\n   ========================================================= *\/\\n\\n.mhs-motto-band {\\n    position: relative;\\n\\n    display: grid;\\n    grid-template-columns: 90px 1fr auto;\\n    align-items: center;\\n    gap: 30px;\\n\\n    padding: 36px 42px;\\n\\n    overflow: hidden;\\n\\n    border-radius: 6px;\\n\\n    background:\\n        linear-gradient(\\n            110deg,\\n            #061f38 0%,\\n            #073d69 55%,\\n            #087dcc 100%\\n        );\\n\\n    box-shadow:\\n        0 24px 60px rgba(5, 39, 70, .13);\\n}\\n\\n.mhs-motto-band::after {\\n    content: \\\"\\\";\\n\\n    position: absolute;\\n\\n    width: 340px;\\n    height: 340px;\\n\\n    right: 12%;\\n    top: -270px;\\n\\n    border-radius: 50%;\\n    border: 1px solid rgba(255,255,255,.12);\\n}\\n\\n.mhs-motto-mark {\\n    position: relative;\\n\\n    width: 70px;\\n    height: 70px;\\n\\n    display: flex;\\n    justify-content: center;\\n    align-items: center;\\n\\n    border: 1px solid rgba(255,255,255,.18);\\n    border-radius: 50%;\\n}\\n\\n.mhs-motto-mark::before,\\n.mhs-motto-mark::after {\\n    content: \\\"\\\";\\n\\n    position: absolute;\\n\\n    width: 25px;\\n    height: 34px;\\n\\n    top: 14px;\\n\\n    border-top: 2px solid var(--cyan);\\n}\\n\\n.mhs-motto-mark::before {\\n    left: 10px;\\n    transform: rotate(-42deg);\\n}\\n\\n.mhs-motto-mark::after {\\n    right: 10px;\\n    transform: rotate(42deg);\\n}\\n\\n.mhs-motto-mark span {\\n    width: 8px;\\n    height: 8px;\\n\\n    border-radius: 50%;\\n    background: var(--cyan);\\n\\n    box-shadow: 0 0 20px rgba(101,213,255,.9);\\n}\\n\\n.mhs-motto-copy {\\n    position: relative;\\n    z-index: 2;\\n}\\n\\n.mhs-motto-copy small {\\n    display: block;\\n\\n    margin-bottom: 8px;\\n\\n    color: rgba(255,255,255,.58);\\n\\n    font-size: 9px;\\n    font-weight: 700;\\n    letter-spacing: .34em;\\n}\\n\\n.mhs-motto-title {\\n    display: flex;\\n    gap: 12px;\\n    flex-wrap: wrap;\\n\\n    font-size: 28px;\\n    line-height: 1;\\n    letter-spacing: -.025em;\\n}\\n\\n.mhs-motto-title strong {\\n    color: white;\\n}\\n\\n.mhs-motto-title span {\\n    color: var(--cyan);\\n    font-weight: 800;\\n}\\n\\n.mhs-motto-copy p {\\n    margin: 8px 0 0;\\n\\n    color: rgba(255,255,255,.7);\\n\\n    font-size: 13px;\\n}\\n\\n.mhs-motto-button {\\n    position: relative;\\n    z-index: 3;\\n\\n    min-width: 160px;\\n\\n    display: flex;\\n    justify-content: space-between;\\n    align-items: center;\\n    gap: 25px;\\n\\n    padding: 17px 20px;\\n\\n    border: 1px solid rgba(255,255,255,.25);\\n\\n    color: white !important;\\n    text-decoration: none !important;\\n\\n    font-size: 12px;\\n    font-weight: 700;\\n    letter-spacing: .05em;\\n\\n    transition:\\n        background .3s ease,\\n        color .3s ease;\\n}\\n\\n.mhs-motto-button:hover {\\n    background: white;\\n    color: var(--navy) !important;\\n}\\n\\n\\n\/* =========================================================\\n   TABLET\\n   ========================================================= *\/\\n\\n@media (max-width: 1100px) {\\n\\n    .mhs-why {\\n        padding: 85px 24px 65px;\\n    }\\n\\n    .mhs-intro-grid {\\n        grid-template-columns: 1fr;\\n        gap: 28px;\\n    }\\n\\n    .mhs-intro-copy {\\n        max-width: 700px;\\n    }\\n\\n    .mhs-pillars {\\n        grid-template-columns: repeat(2, 1fr);\\n    }\\n\\n    .mhs-pillar {\\n        border-bottom: 1px solid var(--line);\\n        min-height: 410px;\\n    }\\n\\n}\\n\\n\\n\/* =========================================================\\n   MOBILE\\n   ========================================================= *\/\\n\\n@media (max-width: 640px) {\\n\\n    .mhs-why {\\n        padding: 68px 20px 50px;\\n    }\\n\\n    .mhs-eyebrow {\\n        gap: 12px;\\n        margin-bottom: 22px;\\n\\n        font-size: 10px;\\n        letter-spacing: .20em;\\n    }\\n\\n    .mhs-eyebrow-line {\\n        width: 34px;\\n    }\\n\\n    .mhs-intro-grid {\\n        margin-bottom: 48px;\\n    }\\n\\n    \/* Keep mobile typography readable *\/\\n    .mhs-intro-heading h2 {\\n        font-size: 43px;\\n        line-height: 1.02;\\n        letter-spacing: -.045em;\\n    }\\n\\n    .mhs-intro-copy p {\\n        font-size: 16px;\\n        line-height: 1.7;\\n    }\\n\\n    .mhs-text-link {\\n        font-size: 14px;\\n    }\\n\\n\\n    \/* Cards become a vertical editorial sequence *\/\\n    .mhs-pillars {\\n        grid-template-columns: 1fr;\\n\\n        border: 0;\\n        gap: 12px;\\n\\n        margin-bottom: 38px;\\n    }\\n\\n    .mhs-pillar,\\n    .mhs-pillar:first-child {\\n        min-height: 0;\\n\\n        padding: 27px 25px 29px;\\n\\n        border:\\n            1px solid rgba(8, 83, 140, .10);\\n\\n        background: rgba(255,255,255,.78);\\n\\n        border-radius: 8px;\\n    }\\n\\n    .mhs-pillar-number {\\n        margin-bottom: 25px;\\n    }\\n\\n    .mhs-pillar-icon {\\n        width: 56px;\\n        height: 56px;\\n\\n        margin-bottom: 30px;\\n    }\\n\\n    .mhs-pillar-content {\\n        margin-top: 0;\\n    }\\n\\n    .mhs-pillar h3 {\\n        font-size: 27px;\\n    }\\n\\n    .mhs-pillar p {\\n        max-width: 440px;\\n\\n        font-size: 15px;\\n        line-height: 1.65;\\n    }\\n\\n    .mhs-pillar:hover {\\n        transform: none;\\n    }\\n\\n\\n    \/* Heritage card *\/\\n    .mhs-pillar-featured {\\n        min-height: 360px;\\n    }\\n\\n    .mhs-years {\\n        margin: 25px 0 38px;\\n    }\\n\\n    .mhs-years strong {\\n        font-size: 74px;\\n    }\\n\\n\\n    \/* Motto *\/\\n    .mhs-motto-band {\\n        grid-template-columns: 1fr;\\n        gap: 20px;\\n\\n        padding: 32px 27px;\\n    }\\n\\n    .mhs-motto-mark {\\n        width: 58px;\\n        height: 58px;\\n    }\\n\\n    .mhs-motto-title {\\n        font-size: 25px;\\n    }\\n\\n    .mhs-motto-copy p {\\n        font-size: 14px;\\n    }\\n\\n    .mhs-motto-button {\\n        width: 100%;\\n        min-width: 0;\\n\\n        padding: 17px 18px;\\n    }\\n\\n}\\n\\n\\n\/* =========================================================\\n   VERY SMALL PHONES\\n   ========================================================= *\/\\n\\n@media (max-width: 390px) {\\n\\n    .mhs-why {\\n        padding-left: 17px;\\n        padding-right: 17px;\\n    }\\n\\n    .mhs-intro-heading h2 {\\n        font-size: 38px;\\n    }\\n\\n    .mhs-pillar h3 {\\n        font-size: 25px;\\n    }\\n\\n}\\n\\n\\n\/* =========================================================\\n   REDUCED MOTION\\n   ========================================================= *\/\\n\\n@media (prefers-reduced-motion: reduce) {\\n\\n    .mhs-pillar,\\n    .mhs-pillar-icon,\\n    .mhs-pillar-arrow,\\n    .mhs-link-arrow {\\n        transition: none !important;\\n    }\\n\\n}\\n\\n<\/style>\n<p>\"}}]}]}]},{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<\/p>\n<section class=\\\"mhs-coming-hero\\\">\\n\\n    <!-- Decorative background -->\\n    <\/p>\n<div class=\\\"mhs-grid\\\"><\/div>\n<p>\\n    <\/p>\n<div class=\\\"mhs-glow mhs-glow-one\\\"><\/div>\n<p>\\n    <\/p>\n<div class=\\\"mhs-glow mhs-glow-two\\\"><\/div>\n<p>\\n\\n    <\/p>\n<div class=\\\"mhs-hero-inner\\\">\\n\\n        <!-- LEFT -->\\n        <\/p>\n<div class=\\\"mhs-hero-content\\\">\\n\\n            <\/p>\n<div class=\\\"mhs-status\\\">\\n                <span class=\\\"mhs-status-dot\\\"><\/span>\\n                WEBSITE UPDATE IN PROGRESS\\n            <\/div>\n<p>\\n\\n            <\/p>\n<div class=\\\"mhs-small-title\\\">\\n                MBARARA HIGH SCHOOL\\n            <\/div>\n<p>\\n\\n            <\/p>\n<h1>\\n                A New Digital<br \/>\\n                <span>Experience Is Coming.<\/span>\\n            <\/h1>\n<p>\\n\\n            <\/p>\n<p class=\\\"mhs-lead\\\">\\n                We are refreshing our website to better reflect the\\n                excellence, heritage and future of Mbarara High School.\\n            <\/p>\n<p>\\n\\n            <\/p>\n<div class=\\\"mhs-divider\\\">\\n                <span><\/span>\\n            <\/div>\n<p>\\n\\n            <\/p>\n<p class=\\\"mhs-message\\\">\\n                While we put the finishing touches on our new online\\n                experience, you can still explore the school and get in\\n                touch with us.\\n            <\/p>\n<p>\\n\\n            <\/p>\n<div class=\\\"mhs-actions\\\">\\n                <a href=\\\"\/about-us\/\\\" class=\\\"mhs-btn mhs-btn-primary\\\">\\n                    Explore Our School\\n                    <span>\u2192<\/span>\\n                <\/a>\\n\\n                <a href=\\\"\/contact\/\\\" class=\\\"mhs-btn mhs-btn-secondary\\\">\\n                    Contact Us\\n                <\/a>\\n            <\/div>\n<p>\\n\\n            <\/p>\n<div class=\\\"mhs-motto\\\">\\n                <span class=\\\"mhs-motto-line\\\"><\/span>\\n                <\/p>\n<div>\\n                    <small>OUR MOTTO<\/small>\\n                    <strong>MUGUME NAMAANI<\/strong>\\n                <\/div>\n<p>\\n            <\/p><\/div>\n<p>\\n\\n        <\/p><\/div>\n<p>\\n\\n\\n        <!-- RIGHT -->\\n        <\/p>\n<div class=\\\"mhs-hero-visual\\\">\\n\\n            <\/p>\n<div class=\\\"mhs-logo-orbit orbit-one\\\"><\/div>\n<p>\\n            <\/p>\n<div class=\\\"mhs-logo-orbit orbit-two\\\"><\/div>\n<p>\\n\\n            <\/p>\n<div class=\\\"mhs-logo-card\\\">\\n\\n                <\/p>\n<div class=\\\"mhs-logo-shine\\\"><\/div>\n<p>\\n\\n                <img\\n    src=\\\"\/wp-content\/uploads\/images-removebg-preview.png\\\"\\n    alt=\\\"Mbarara High School\\\"\\n    class=\\\"mhs-logo\\\"\\n>\\n\\n                <\/p>\n<div class=\\\"mhs-logo-caption\\\">\\n                    <span>MBARARA HIGH SCHOOL<\/span>\\n                    <small>Excellence \u2022 Heritage \u2022 Future<\/small>\\n                <\/div>\n<p>\\n\\n            <\/p><\/div>\n<p>\\n\\n            <\/p>\n<div class=\\\"mhs-floating-tag mhs-tag-one\\\">\\n                <strong>EST.<\/strong>\\n                <span>A Legacy of Excellence<\/span>\\n            <\/div>\n<p>\\n\\n            <\/p>\n<div class=\\\"mhs-floating-tag mhs-tag-two\\\">\\n                <span class=\\\"mhs-tag-icon\\\">\u2726<\/span>\\n                <span>New Website<br \/><strong>Coming Soon<\/strong><\/span>\\n            <\/div>\n<p>\\n\\n        <\/p><\/div>\n<p>\\n\\n    <\/p><\/div>\n<p>\\n\\n    <\/p>\n<div class=\\\"mhs-bottom-line\\\"><\/div>\n<p>\\n\\n<\/section>\n<p>\"}}]}]}]},{\"type\":\"section\",\"props\":{\"image_position\":\"center-center\",\"style\":\"default\",\"title_breakpoint\":\"xl\",\"title_position\":\"top-left\",\"title_rotation\":\"left\",\"vertical_align\":\"middle\",\"width\":\"default\"},\"children\":[{\"type\":\"row\",\"children\":[{\"type\":\"column\",\"props\":{\"image_position\":\"center-center\",\"position_sticky_breakpoint\":\"m\"},\"children\":[{\"type\":\"html\",\"props\":{\"content\":\"<!-- ============================================================\\n     MBARARA HIGH SCHOOL\\n     CINEMATIC CHARGING BULL WELCOME\\n     ============================================================ -->\\n\\n<\/p>\n<div id=\\\"mhs-intro\\\" class=\\\"mhs-intro\\\">\\n\\n    <button class=\\\"mhs-intro-skip\\\" type=\\\"button\\\">\\n        SKIP <span>\u2192<\/span>\\n    <\/button>\\n\\n    <\/p>\n<div class=\\\"mhs-grid\\\"><\/div>\n<p>\\n    <\/p>\n<div class=\\\"mhs-ambient\\\"><\/div>\n<p>\\n    <\/p>\n<div class=\\\"mhs-floor\\\"><\/div>\n<p>\\n\\n\\n    <!-- ========================================================\\n         CHARGING BULL\\n         ======================================================== -->\\n\\n    <\/p>\n<div class=\\\"mhs-bull-scene\\\">\\n\\n        <\/p>\n<div class=\\\"mhs-bull-aura\\\"><\/div>\n<p>\\n\\n        <svg class=\\\"mhs-bull\\\"\\n             viewBox=\\\"0 0 900 570\\\"\\n             xmlns=\\\"http:\/\/www.w3.org\/2000\/svg\\\"\\n             aria-hidden=\\\"true\\\">\\n\\n            <defs>\\n\\n                <linearGradient id=\\\"mhsBullStroke\\\"\\n                                x1=\\\"0%\\\" y1=\\\"0%\\\"\\n                                x2=\\\"100%\\\" y2=\\\"100%\\\">\\n                    <stop offset=\\\"0%\\\" stop-color=\\\"#ffffff\\\"\/>\\n                    <stop offset=\\\"40%\\\" stop-color=\\\"#8bd8ff\\\"\/>\\n                    <stop offset=\\\"100%\\\" stop-color=\\\"#078be8\\\"\/>\\n                <\/linearGradient>\\n\\n                <linearGradient id=\\\"mhsBullFill\\\"\\n                                x1=\\\"0%\\\" y1=\\\"0%\\\"\\n                                x2=\\\"0%\\\" y2=\\\"100%\\\">\\n                    <stop offset=\\\"0%\\\"\\n                          stop-color=\\\"#1699eb\\\"\\n                          stop-opacity=\\\".25\\\"\/>\\n                    <stop offset=\\\"100%\\\"\\n                          stop-color=\\\"#041a34\\\"\\n                          stop-opacity=\\\".08\\\"\/>\\n                <\/linearGradient>\\n\\n                <filter id=\\\"mhsBullGlow\\\"\\n                        x=\\\"-30%\\\" y=\\\"-30%\\\"\\n                        width=\\\"160%\\\" height=\\\"160%\\\">\\n                    <feGaussianBlur stdDeviation=\\\"4\\\"\\n                                    result=\\\"blur\\\"\/>\\n                    <feMerge>\\n                        <feMergeNode in=\\\"blur\\\"\/>\\n                        <feMergeNode in=\\\"SourceGraphic\\\"\/>\\n                    <\/feMerge>\\n                <\/filter>\\n\\n            <\/defs>\\n\\n\\n            <!-- BODY \/ BACK \/ BELLY -->\\n            <path class=\\\"bull-main\\\"\\n                  d=\\\"\\n                  M350 176\\n                  C420 123 527 108 635 135\\n                  C692 149 740 179 763 220\\n\\n                  C788 265 780 322 751 360\\n                  C727 391 692 408 650 411\\n\\n                  C608 414 567 401 527 383\\n\\n                  C480 399 430 398 384 380\\n                  C342 363 311 334 296 299\\n\\n                  C278 257 293 210 350 176\\n                  Z\\n                  \\\"\/>\\n\\n\\n            <!-- SHOULDER MASS -->\\n            <path class=\\\"bull-detail\\\"\\n                  d=\\\"\\n                  M380 178\\n                  C421 193 445 226 449 267\\n                  C453 307 437 342 404 372\\n                  \\\"\/>\\n\\n\\n            <!-- NECK -->\\n            <path class=\\\"bull-main\\\"\\n                  d=\\\"\\n                  M355 190\\n                  C325 177 290 180 263 199\\n\\n                  C238 217 225 245 230 276\\n\\n                  C235 309 258 337 292 350\\n\\n                  C321 361 351 353 378 332\\n\\n                  C397 317 409 295 411 269\\n\\n                  C414 235 393 207 355 190\\n                  Z\\n                  \\\"\/>\\n\\n\\n            <!-- LOWERED HEAD -->\\n            <path class=\\\"bull-main\\\"\\n                  d=\\\"\\n                  M263 226\\n                  C230 216 196 225 174 249\\n\\n                  C150 276 145 318 160 354\\n\\n                  C175 391 208 417 246 419\\n\\n                  C280 421 311 402 325 371\\n\\n                  C338 341 333 300 315 269\\n\\n                  C302 247 284 233 263 226\\n                  Z\\n                  \\\"\/>\\n\\n\\n            <!-- MUZZLE -->\\n            <path class=\\\"bull-detail\\\"\\n                  d=\\\"\\n                  M165 349\\n                  C186 335 222 333 247 345\\n                  C264 354 269 376 257 392\\n                  C241 413 198 416 173 397\\n                  C157 385 153 361 165 349\\n                  Z\\n                  \\\"\/>\\n\\n\\n            <!-- LEFT HORN -->\\n            <path class=\\\"bull-horn\\\"\\n                  d=\\\"\\n                  M205 253\\n                  C158 237 107 202 79 153\\n                  C59 118 53 83 60 51\\n\\n                  C78 94 103 123 139 144\\n                  C172 163 204 172 238 177\\n\\n                  C244 202 233 230 205 253\\n                  \\\"\/>\\n\\n\\n            <!-- RIGHT HORN -->\\n            <path class=\\\"bull-horn\\\"\\n                  d=\\\"\\n                  M267 231\\n                  C303 206 331 172 350 127\\n                  C363 95 367 66 363 38\\n\\n                  C346 73 324 98 296 117\\n                  C274 132 252 143 229 151\\n\\n                  C235 182 247 208 267 231\\n                  \\\"\/>\\n\\n\\n            <!-- EARS -->\\n            <path class=\\\"bull-detail\\\"\\n                  d=\\\"\\n                  M194 257\\n                  C166 247 144 253 129 271\\n                  C150 279 170 285 190 284\\n                  \\\"\/>\\n\\n            <path class=\\\"bull-detail\\\"\\n                  d=\\\"\\n                  M285 250\\n                  C307 238 329 239 347 252\\n                  C329 266 309 272 291 271\\n                  \\\"\/>\\n\\n\\n            <!-- BROW \/ FACE -->\\n            <path class=\\\"bull-detail\\\"\\n                  d=\\\"\\n                  M187 298\\n                  C202 284 218 280 234 287\\n                  \\\"\/>\\n\\n            <path class=\\\"bull-detail\\\"\\n                  d=\\\"\\n                  M270 287\\n                  C287 281 300 286 309 298\\n                  \\\"\/>\\n\\n\\n            <!-- EYES -->\\n            <circle class=\\\"bull-eye\\\"\\n                    cx=\\\"218\\\" cy=\\\"305\\\" r=\\\"5\\\"\/>\\n\\n            <circle class=\\\"bull-eye\\\"\\n                    cx=\\\"285\\\" cy=\\\"302\\\" r=\\\"5\\\"\/>\\n\\n\\n            <!-- NOSTRILS -->\\n            <ellipse class=\\\"bull-eye\\\"\\n                     cx=\\\"192\\\" cy=\\\"371\\\"\\n                     rx=\\\"6\\\" ry=\\\"4\\\"\/>\\n\\n            <ellipse class=\\\"bull-eye\\\"\\n                     cx=\\\"232\\\" cy=\\\"370\\\"\\n                     rx=\\\"6\\\" ry=\\\"4\\\"\/>\\n\\n\\n            <!-- FRONT LEG - PLANTED -->\\n            <path class=\\\"bull-leg\\\"\\n                  d=\\\"\\n                  M384 346\\n\\n                  C384 385 377 420 365 455\\n\\n                  C359 473 361 488 373 497\\n\\n                  C387 507 407 501 413 485\\n\\n                  C423 458 425 422 423 382\\n\\n                  L420 354\\n                  \\\"\/>\\n\\n\\n            <!-- FRONT LEG - CHARGING FORWARD -->\\n            <path class=\\\"bull-leg bull-moving-leg\\\"\\n                  d=\\\"\\n                  M432 351\\n\\n                  C449 378 465 403 488 424\\n\\n                  C503 438 520 446 532 438\\n\\n                  C544 430 540 413 527 401\\n\\n                  C505 381 487 361 472 333\\n                  \\\"\/>\\n\\n\\n            <!-- REAR LEG - PLANTED -->\\n            <path class=\\\"bull-leg\\\"\\n                  d=\\\"\\n                  M679 390\\n\\n                  C685 425 692 456 708 481\\n\\n                  C718 496 735 501 747 491\\n\\n                  C759 480 753 464 744 450\\n\\n                  C730 428 725 407 727 376\\n                  \\\"\/>\\n\\n\\n            <!-- REAR LEG - LIFTED -->\\n            <path class=\\\"bull-leg bull-rear-leg\\\"\\n                  d=\\\"\\n                  M633 398\\n\\n                  C626 427 617 450 599 469\\n\\n                  C587 481 570 486 560 477\\n\\n                  C550 468 557 454 568 444\\n\\n                  C586 427 595 409 597 382\\n                  \\\"\/>\\n\\n\\n            <!-- TAIL -->\\n            <path class=\\\"bull-tail\\\"\\n                  d=\\\"\\n                  M758 222\\n                  C810 202 833 168 826 127\\n                  C820 94 831 70 851 57\\n                  \\\"\/>\\n\\n            <!-- TAIL TUFT -->\\n            <path class=\\\"bull-tail\\\"\\n                  d=\\\"\\n                  M850 59\\n                  C844 38 855 20 876 10\\n                  C878 33 870 52 850 59\\n                  Z\\n                  \\\"\/>\\n\\n\\n            <!-- BODY MUSCLE LINES -->\\n            <path class=\\\"bull-detail\\\"\\n                  d=\\\"\\n                  M494 153\\n                  C515 171 527 191 532 217\\n                  \\\"\/>\\n\\n            <path class=\\\"bull-detail\\\"\\n                  d=\\\"\\n                  M596 143\\n                  C620 167 630 194 630 225\\n                  \\\"\/>\\n\\n            <path class=\\\"bull-detail\\\"\\n                  d=\\\"\\n                  M537 382\\n                  C567 359 592 350 621 348\\n                  \\\"\/>\\n\\n\\n            <!-- GROUND SHADOW -->\\n            <ellipse class=\\\"bull-shadow\\\"\\n                     cx=\\\"465\\\"\\n                     cy=\\\"508\\\"\\n                     rx=\\\"330\\\"\\n                     ry=\\\"25\\\"\/>\\n\\n        <\/svg>\\n\\n    <\/div>\n<p>\\n\\n\\n    <!-- ENERGY RELEASE -->\\n    <\/p>\n<div class=\\\"mhs-energy\\\">\\n        <span><\/span>\\n    <\/div>\n<p>\\n\\n\\n    <!-- ========================================================\\n         WELCOME\\n         ======================================================== -->\\n\\n    <\/p>\n<div class=\\\"mhs-copy\\\">\\n\\n        <\/p>\n<div class=\\\"mhs-welcome\\\">\\n            WELCOME TO\\n        <\/div>\n<p>\\n\\n        <\/p>\n<h1 class=\\\"mhs-title\\\">\\n            <span class=\\\"mhs-title-one\\\">\\n                MBARARA HIGH\\n            <\/span>\\n\\n            <span class=\\\"mhs-title-two\\\">\\n                SCHOOL\\n            <\/span>\\n        <\/h1>\n<p>\\n\\n        <\/p>\n<div class=\\\"mhs-rule\\\">\\n            <span><\/span>\\n        <\/div>\n<p>\\n\\n        <\/p>\n<div class=\\\"mhs-motto\\\">\\n            MUGUME NAMAANI\\n        <\/div>\n<p>\\n\\n    <\/p><\/div>\n<p>\\n\\n\\n    <\/p>\n<div class=\\\"mhs-meta\\\">\\n        <span>EST. 1911<\/span>\\n        <i><\/i>\\n        <span>EXCELLENCE<\/span>\\n        <i><\/i>\\n        <span>HERITAGE<\/span>\\n        <i><\/i>\\n        <span>FUTURE<\/span>\\n    <\/div>\n<p>\\n\\n<\/p><\/div>\n<p>\\n\\n\\n<!-- ============================================================\\n     MOBILE QUICK ACTIONS\\n     ============================================================ -->\\n\\n<\/p>\n<div class=\\\"mhs-mobile-actions\\\">\\n\\n    <a class=\\\"mhs-action mhs-whatsapp\\\"\\n       href=\\\"https:\/\/wa.me\/256XXXXXXXXX\\\"\\n       target=\\\"_blank\\\"\\n       rel=\\\"noopener\\\">\\n\\n        <svg viewBox=\\\"0 0 24 24\\\">\\n            <path fill=\\\"currentColor\\\"\\n                  d=\\\"M12.04 2a9.84 9.84 0 0 0-8.42 14.92L2 22l5.22-1.58A9.9 9.9 0 1 0 12.04 2Zm0 17.98a8.05 8.05 0 0 1-4.1-1.12l-.29-.17-3.1.94.97-3.02-.19-.31A8.08 8.08 0 1 1 12.04 19.98Zm4.43-6.05c-.24-.12-1.44-.71-1.66-.79-.22-.08-.38-.12-.54.12-.16.24-.62.79-.76.95-.14.16-.28.18-.52.06-.24-.12-1.02-.38-1.94-1.2-.72-.64-1.2-1.43-1.34-1.67-.14-.24-.02-.37.1-.49.11-.11.24-.28.36-.42.12-.14.16-.24.24-.4.08-.16.04-.3-.02-.42-.06-.12-.54-1.3-.74-1.78-.2-.47-.4-.4-.54-.41h-.46c-.16 0-.42.06-.64.3-.22.24-.84.82-.84 2s.86 2.32.98 2.48c.12.16 1.69 2.58 4.1 3.62.57.25 1.02.4 1.37.51.58.18 1.1.16 1.51.1.46-.07 1.44-.59 1.64-1.16.2-.57.2-1.06.14-1.16-.06-.1-.22-.16-.46-.28Z\\\"\/>\\n        <\/svg>\\n\\n        <span>WhatsApp<\/span>\\n\\n    <\/a>\\n\\n\\n    <a class=\\\"mhs-action mhs-contact\\\"\\n       href=\\\"\/contact\/\\\">\\n\\n        <svg viewBox=\\\"0 0 24 24\\\">\\n            <path fill=\\\"currentColor\\\"\\n                  d=\\\"M20 4H4a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2V6a2 2 0 0 0-2-2Zm0 4-8 5-8-5V6l8 5 8-5v2Z\\\"\/>\\n        <\/svg>\\n\\n        <span>Contact Us<\/span>\\n\\n    <\/a>\\n\\n<\/div>\n<p>\\n\\n\\n<\/p>\n<style>\\n\\n\/* ============================================================\\n   SCREEN\\n   ============================================================ *\/\\n\\n#mhs-intro {\\n    position: fixed;\\n    inset: 0;\\n\\n    width: 100%;\\n    height: 100vh;\\n    height: 100dvh;\\n\\n    z-index: 99999;\\n\\n    overflow: hidden;\\n\\n    color: #fff;\\n\\n    background:\\n        radial-gradient(\\n            circle at 28% 45%,\\n            rgba(13,143,229,.24),\\n            transparent 37%\\n        ),\\n        linear-gradient(\\n            125deg,\\n            #010816 0%,\\n            #031a35 47%,\\n            #075087 100%\\n        );\\n\\n    transition:\\n        opacity .8s ease,\\n        visibility .8s ease;\\n}\\n\\n\\n\/* Background grid *\/\\n\\n.mhs-grid {\\n    position: absolute;\\n    inset: 0;\\n\\n    opacity: .07;\\n\\n    background-image:\\n        linear-gradient(\\n            rgba(255,255,255,.15) 1px,\\n            transparent 1px\\n        ),\\n        linear-gradient(\\n            90deg,\\n            rgba(255,255,255,.15) 1px,\\n            transparent 1px\\n        );\\n\\n    background-size:\\n        70px 70px;\\n}\\n\\n\\n\/* Ambient *\/\\n\\n.mhs-ambient {\\n    position: absolute;\\n\\n    left: 24%;\\n    top: 45%;\\n\\n    width: 650px;\\n    height: 650px;\\n\\n    transform:\\n        translate(-50%, -50%);\\n\\n    border-radius: 50%;\\n\\n    background:\\n        rgba(22,153,239,.12);\\n\\n    filter:\\n        blur(110px);\\n\\n    animation:\\n        mhsAmbient\\n        4s ease forwards;\\n}\\n\\n\\n\/* Perspective floor *\/\\n\\n.mhs-floor {\\n    position: absolute;\\n\\n    left: -15%;\\n    right: -15%;\\n    bottom: -17%;\\n\\n    height: 43%;\\n\\n    transform:\\n        perspective(500px)\\n        rotateX(68deg);\\n\\n    transform-origin:\\n        center top;\\n\\n    background:\\n        repeating-linear-gradient(\\n            90deg,\\n            transparent 0,\\n            transparent 78px,\\n            rgba(61,182,255,.065) 79px,\\n            rgba(61,182,255,.065) 80px\\n        ),\\n        repeating-linear-gradient(\\n            0deg,\\n            transparent 0,\\n            transparent 58px,\\n            rgba(61,182,255,.065) 59px,\\n            rgba(61,182,255,.065) 60px\\n        );\\n}\\n\\n\\n\/* ============================================================\\n   BULL\\n   ============================================================ *\/\\n\\n.mhs-bull-scene {\\n    position: absolute;\\n\\n    left: 3%;\\n    top: 50%;\\n\\n    width: min(51vw, 760px);\\n\\n    z-index: 4;\\n\\n    opacity: 0;\\n\\n    transform:\\n        translateY(-50%)\\n        translateX(-110px)\\n        scale(.80);\\n\\n    animation:\\n        bullEnter .9s .1s\\n        cubic-bezier(.16,.84,.35,1)\\n        forwards,\\n\\n        bullCharge .72s 1.08s\\n        cubic-bezier(.2,.8,.3,1)\\n        forwards,\\n\\n        bullImpact .45s 1.80s\\n        ease-out forwards,\\n\\n        bullExit .55s 4.25s\\n        ease forwards;\\n}\\n\\n\\n.mhs-bull {\\n    width: 100%;\\n\\n    overflow: visible;\\n\\n    filter:\\n        drop-shadow(\\n            0 16px 25px\\n            rgba(0,0,0,.32)\\n        );\\n}\\n\\n\\n.bull-main {\\n    fill:\\n        url(#mhsBullFill);\\n\\n    stroke:\\n        url(#mhsBullStroke);\\n\\n    stroke-width: 5;\\n\\n    stroke-linecap: round;\\n    stroke-linejoin: round;\\n\\n    stroke-dasharray: 1800;\\n    stroke-dashoffset: 1800;\\n\\n    filter:\\n        url(#mhsBullGlow);\\n\\n    animation:\\n        drawBull 1.15s .12s\\n        ease forwards;\\n}\\n\\n\\n.bull-horn,\\n.bull-leg,\\n.bull-tail {\\n    fill: none;\\n\\n    stroke:\\n        url(#mhsBullStroke);\\n\\n    stroke-width: 6;\\n\\n    stroke-linecap: round;\\n    stroke-linejoin: round;\\n\\n    stroke-dasharray: 800;\\n    stroke-dashoffset: 800;\\n\\n    filter:\\n        url(#mhsBullGlow);\\n\\n    animation:\\n        drawBull 1s .2s\\n        ease forwards;\\n}\\n\\n\\n.bull-detail {\\n    fill: none;\\n\\n    stroke:\\n        rgba(190,231,255,.85);\\n\\n    stroke-width: 3.5;\\n\\n    stroke-linecap: round;\\n    stroke-linejoin: round;\\n\\n    stroke-dasharray: 400;\\n    stroke-dashoffset: 400;\\n\\n    animation:\\n        drawBull .75s .62s\\n        ease forwards;\\n}\\n\\n\\n.bull-eye {\\n    fill: #fff;\\n\\n    opacity: 0;\\n\\n    filter:\\n        drop-shadow(\\n            0 0 8px #6bd0ff\\n        );\\n\\n    animation:\\n        bullEyes .2s 1s\\n        forwards;\\n}\\n\\n\\n.bull-shadow {\\n    fill:\\n        rgba(0,0,0,.30);\\n\\n    filter:\\n        blur(8px);\\n\\n    opacity: 0;\\n\\n    animation:\\n        shadowIn .6s .5s\\n        forwards;\\n}\\n\\n\\n.mhs-bull-aura {\\n    position: absolute;\\n\\n    left: 50%;\\n    top: 50%;\\n\\n    width: 70%;\\n    aspect-ratio: 1;\\n\\n    transform:\\n        translate(-50%, -50%);\\n\\n    border-radius: 50%;\\n\\n    background:\\n        radial-gradient(\\n            circle,\\n            rgba(48,181,255,.18),\\n            transparent 68%\\n        );\\n\\n    filter:\\n        blur(22px);\\n\\n    animation:\\n        bullAura 1.5s ease infinite;\\n}\\n\\n\\n\/* ============================================================\\n   ENERGY STRIKE\\n   ============================================================ *\/\\n\\n.mhs-energy {\\n    position: absolute;\\n\\n    left: 34%;\\n    right: 7%;\\n\\n    top: 51%;\\n\\n    z-index: 3;\\n}\\n\\n\\n.mhs-energy span {\\n    display: block;\\n\\n    width: 0;\\n    height: 2px;\\n\\n    background:\\n        linear-gradient(\\n            90deg,\\n            transparent,\\n            #139eea,\\n            #fff,\\n            transparent\\n        );\\n\\n    box-shadow:\\n        0 0 12px rgba(72,197,255,.85),\\n        0 0 35px rgba(26,147,222,.55);\\n\\n    animation:\\n        energyStrike\\n        .9s 1.35s\\n        ease-out forwards;\\n}\\n\\n\\n\/* ============================================================\\n   WORDING\\n   ============================================================ *\/\\n\\n.mhs-copy {\\n    position: absolute;\\n\\n    left: 54%;\\n    top: 50%;\\n\\n    width: 41%;\\n\\n    transform:\\n        translateY(-50%);\\n\\n    z-index: 6;\\n}\\n\\n\\n.mhs-welcome {\\n    margin-bottom: 13px;\\n\\n    color: #80d2ff;\\n\\n    font-size:\\n        clamp(10px, .9vw, 14px);\\n\\n    font-weight: 700;\\n\\n    letter-spacing: 8px;\\n\\n    opacity: 0;\\n\\n    transform:\\n        translateX(-30px);\\n\\n    animation:\\n        welcomeReveal\\n        .42s 1.43s\\n        forwards;\\n}\\n\\n\\n.mhs-title {\\n    margin: 0;\\n\\n    font-family:\\n        \\\"Montserrat\\\",\\n        Arial,\\n        sans-serif;\\n\\n    font-size:\\n        clamp(46px, 5.4vw, 86px);\\n\\n    line-height: .91;\\n\\n    font-weight: 800;\\n\\n    letter-spacing: -3px;\\n\\n    text-transform: uppercase;\\n}\\n\\n\\n.mhs-title span {\\n    display: block;\\n\\n    opacity: 0;\\n}\\n\\n\\n.mhs-title-one {\\n    transform:\\n        translateX(-55px);\\n\\n    filter:\\n        blur(6px);\\n\\n    animation:\\n        titleImpact\\n        .55s 1.65s\\n        forwards;\\n}\\n\\n\\n.mhs-title-two {\\n    color: #7ad0ff;\\n\\n    transform:\\n        translateX(-55px);\\n\\n    filter:\\n        blur(6px);\\n\\n    animation:\\n        titleImpact\\n        .55s 1.93s\\n        forwards;\\n}\\n\\n\\n.mhs-rule {\\n    width: 190px;\\n\\n    margin:\\n        25px 0 15px;\\n}\\n\\n\\n.mhs-rule span {\\n    display: block;\\n\\n    width: 0;\\n    height: 2px;\\n\\n    background:\\n        linear-gradient(\\n            90deg,\\n            #159cea,\\n            #fff,\\n            transparent\\n        );\\n\\n    animation:\\n        ruleGrow\\n        .7s 2.18s\\n        forwards;\\n}\\n\\n\\n.mhs-motto {\\n    color:\\n        rgba(255,255,255,.67);\\n\\n    font-size: 10px;\\n\\n    font-weight: 600;\\n\\n    letter-spacing: 7px;\\n\\n    opacity: 0;\\n\\n    animation:\\n        mottoIn\\n        .5s 2.38s\\n        forwards;\\n}\\n\\n\\n\/* ============================================================\\n   META\\n   ============================================================ *\/\\n\\n.mhs-meta {\\n    position: absolute;\\n\\n    left: 50%;\\n    bottom: 32px;\\n\\n    transform:\\n        translateX(-50%);\\n\\n    display: flex;\\n    align-items: center;\\n\\n    gap: 13px;\\n\\n    color:\\n        rgba(255,255,255,.38);\\n\\n    font-size: 8px;\\n\\n    font-weight: 600;\\n\\n    letter-spacing: 2px;\\n\\n    white-space: nowrap;\\n\\n    opacity: 0;\\n\\n    animation:\\n        metaIn\\n        .6s 2.7s\\n        forwards;\\n}\\n\\n\\n.mhs-meta i {\\n    width: 3px;\\n    height: 3px;\\n\\n    border-radius: 50%;\\n\\n    background: #159cea;\\n}\\n\\n\\n\/* ============================================================\\n   SKIP\\n   ============================================================ *\/\\n\\n.mhs-intro-skip {\\n    position: absolute;\\n\\n    top: 24px;\\n    right: 27px;\\n\\n    z-index: 20;\\n\\n    padding:\\n        9px 15px;\\n\\n    border:\\n        1px solid\\n        rgba(255,255,255,.22);\\n\\n    border-radius: 40px;\\n\\n    background:\\n        rgba(255,255,255,.04);\\n\\n    color:\\n        rgba(255,255,255,.7);\\n\\n    font-size: 10px;\\n\\n    font-weight: 600;\\n\\n    letter-spacing: 2px;\\n\\n    cursor: pointer;\\n}\\n\\n\\n\/* ============================================================\\n   MOBILE CONTACT\\n   ============================================================ *\/\\n\\n.mhs-mobile-actions {\\n    display: none;\\n}\\n\\n\\n@media (max-width: 767px) {\\n\\n    .mhs-mobile-actions {\\n        position: fixed;\\n\\n        left: 50%;\\n\\n        bottom:\\n            calc(\\n                14px +\\n                env(safe-area-inset-bottom)\\n            );\\n\\n        transform:\\n            translateX(-50%);\\n\\n        z-index: 9000;\\n\\n        display: flex;\\n\\n        gap: 8px;\\n\\n        width:\\n            calc(100% - 28px);\\n\\n        max-width: 420px;\\n    }\\n\\n\\n    .mhs-action {\\n        flex: 1;\\n\\n        min-height: 48px;\\n\\n        display: flex;\\n        align-items: center;\\n        justify-content: center;\\n\\n        gap: 8px;\\n\\n        border-radius: 28px;\\n\\n        color: white !important;\\n\\n        font-size: 13px;\\n        font-weight: 700;\\n\\n        text-decoration:\\n            none !important;\\n\\n        box-shadow:\\n            0 8px 24px\\n            rgba(0,20,50,.22);\\n    }\\n\\n\\n    .mhs-action svg {\\n        width: 20px;\\n        height: 20px;\\n    }\\n\\n\\n    .mhs-whatsapp {\\n        background: #25D366;\\n    }\\n\\n\\n    .mhs-contact {\\n        background:\\n            linear-gradient(\\n                135deg,\\n                #075da9,\\n                #078ee4\\n            );\\n    }\\n\\n}\\n\\n\\n\/* ============================================================\\n   MOBILE INTRO\\n   CRITICAL: OWN KEYFRAMES KEEP THE BULL CENTRED\\n   ============================================================ *\/\\n\\n@media (max-width: 767px) {\\n\\n    .mhs-bull-scene {\\n        left: 50%;\\n        top: 29%;\\n\\n        width:\\n            min(96vw, 540px);\\n\\n        opacity: 0;\\n\\n        transform:\\n            translate(-50%, -50%)\\n            scale(.69);\\n\\n        animation:\\n            bullEnterMobile\\n            .9s .1s\\n            cubic-bezier(.16,.84,.35,1)\\n            forwards,\\n\\n            bullChargeMobile\\n            .72s 1.08s\\n            cubic-bezier(.2,.8,.3,1)\\n            forwards,\\n\\n            bullImpactMobile\\n            .45s 1.80s\\n            ease-out forwards,\\n\\n            bullExitMobile\\n            .55s 4.25s\\n            ease forwards;\\n    }\\n\\n\\n    .mhs-copy {\\n        left: 5%;\\n        top: 57%;\\n\\n        width: 90%;\\n\\n        transform: none;\\n\\n        text-align: center;\\n    }\\n\\n\\n    .mhs-welcome {\\n        margin-bottom: 10px;\\n\\n        font-size: 9px;\\n\\n        letter-spacing: 5px;\\n    }\\n\\n\\n    .mhs-title {\\n        font-size:\\n            clamp(37px, 11.5vw, 56px);\\n\\n        line-height: .91;\\n\\n        letter-spacing: -1.5px;\\n    }\\n\\n\\n    .mhs-rule {\\n        width: 145px;\\n\\n        margin:\\n            17px auto 12px;\\n    }\\n\\n\\n    .mhs-motto {\\n        font-size: 8px;\\n\\n        letter-spacing: 4px;\\n    }\\n\\n\\n    .mhs-energy {\\n        left: 8%;\\n        right: 8%;\\n\\n        top: 49%;\\n    }\\n\\n\\n    .mhs-meta {\\n        bottom:\\n            calc(\\n                24px +\\n                env(safe-area-inset-bottom)\\n            );\\n\\n        gap: 6px;\\n\\n        font-size: 6px;\\n\\n        letter-spacing: .7px;\\n    }\\n\\n\\n    .mhs-intro-skip {\\n        top:\\n            calc(\\n                16px +\\n                env(safe-area-inset-top)\\n            );\\n\\n        right: 15px;\\n    }\\n\\n}\\n\\n\\n\/* ============================================================\\n   DESKTOP ANIMATIONS\\n   ============================================================ *\/\\n\\n@keyframes drawBull {\\n    to {\\n        stroke-dashoffset: 0;\\n    }\\n}\\n\\n\\n@keyframes bullEyes {\\n    to {\\n        opacity: 1;\\n    }\\n}\\n\\n\\n@keyframes shadowIn {\\n    to {\\n        opacity: 1;\\n    }\\n}\\n\\n\\n@keyframes bullEnter {\\n\\n    from {\\n        opacity: 0;\\n\\n        transform:\\n            translateY(-50%)\\n            translateX(-120px)\\n            scale(.72);\\n    }\\n\\n    to {\\n        opacity: 1;\\n\\n        transform:\\n            translateY(-50%)\\n            translateX(0)\\n            scale(.82);\\n    }\\n}\\n\\n\\n@keyframes bullCharge {\\n\\n    0% {\\n        transform:\\n            translateY(-50%)\\n            translateX(0)\\n            scale(.82);\\n    }\\n\\n    45% {\\n        transform:\\n            translateY(-48%)\\n            translateX(28px)\\n            scale(.86)\\n            rotate(-1deg);\\n    }\\n\\n    72% {\\n        transform:\\n            translateY(-50%)\\n            translateX(48px)\\n            scale(.89)\\n            rotate(-2deg);\\n    }\\n\\n    100% {\\n        transform:\\n            translateY(-49%)\\n            translateX(38px)\\n            scale(.87)\\n            rotate(-1deg);\\n    }\\n}\\n\\n\\n@keyframes bullImpact {\\n\\n    0% {\\n        transform:\\n            translateY(-49%)\\n            translateX(38px)\\n            scale(.87);\\n    }\\n\\n    45% {\\n        transform:\\n            translateY(-48%)\\n            translateX(33px)\\n            scale(.85);\\n    }\\n\\n    100% {\\n        transform:\\n            translateY(-49%)\\n            translateX(38px)\\n            scale(.87);\\n    }\\n}\\n\\n\\n@keyframes bullExit {\\n\\n    to {\\n        opacity: 0;\\n\\n        transform:\\n            translateY(-49%)\\n            translateX(75px)\\n            scale(.94);\\n\\n        filter:\\n            blur(5px);\\n    }\\n}\\n\\n\\n\/* ============================================================\\n   MOBILE BULL ANIMATIONS\\n   ============================================================ *\/\\n\\n@keyframes bullEnterMobile {\\n\\n    from {\\n        opacity: 0;\\n\\n        transform:\\n            translate(-50%, -50%)\\n            translateY(-20px)\\n            scale(.55);\\n    }\\n\\n    to {\\n        opacity: 1;\\n\\n        transform:\\n            translate(-50%, -50%)\\n            translateY(0)\\n            scale(.69);\\n    }\\n}\\n\\n\\n@keyframes bullChargeMobile {\\n\\n    0% {\\n        transform:\\n            translate(-50%, -50%)\\n            translateY(0)\\n            scale(.69);\\n    }\\n\\n    45% {\\n        transform:\\n            translate(-50%, -50%)\\n            translateY(10px)\\n            scale(.76)\\n            rotate(-1deg);\\n    }\\n\\n    72% {\\n        transform:\\n            translate(-50%, -50%)\\n            translateY(17px)\\n            scale(.80)\\n            rotate(-2deg);\\n    }\\n\\n    100% {\\n        transform:\\n            translate(-50%, -50%)\\n            translateY(11px)\\n            scale(.76)\\n            rotate(-1deg);\\n    }\\n}\\n\\n\\n@keyframes bullImpactMobile {\\n\\n    0% {\\n        transform:\\n            translate(-50%, -50%)\\n            translateY(11px)\\n            scale(.76);\\n    }\\n\\n    50% {\\n        transform:\\n            translate(-50%, -50%)\\n            translateY(6px)\\n            scale(.73);\\n    }\\n\\n    100% {\\n        transform:\\n            translate(-50%, -50%)\\n            translateY(9px)\\n            scale(.75);\\n    }\\n}\\n\\n\\n@keyframes bullExitMobile {\\n\\n    to {\\n        opacity: 0;\\n\\n        transform:\\n            translate(-50%, -50%)\\n            translateY(-2px)\\n            scale(.83);\\n\\n        filter:\\n            blur(5px);\\n    }\\n}\\n\\n\\n\/* ============================================================\\n   GENERAL ANIMATIONS\\n   ============================================================ *\/\\n\\n@keyframes energyStrike {\\n\\n    from {\\n        width: 0;\\n        opacity: 0;\\n    }\\n\\n    20% {\\n        opacity: 1;\\n    }\\n\\n    to {\\n        width: 100%;\\n        opacity: .6;\\n    }\\n}\\n\\n\\n@keyframes welcomeReveal {\\n\\n    to {\\n        opacity: 1;\\n        transform: translateX(0);\\n    }\\n}\\n\\n\\n@keyframes titleImpact {\\n\\n    from {\\n        opacity: 0;\\n\\n        transform:\\n            translateX(-55px);\\n\\n        filter:\\n            blur(6px);\\n    }\\n\\n    to {\\n        opacity: 1;\\n\\n        transform:\\n            translateX(0);\\n\\n        filter:\\n            blur(0);\\n    }\\n}\\n\\n\\n@keyframes ruleGrow {\\n    to {\\n        width: 100%;\\n    }\\n}\\n\\n\\n@keyframes mottoIn {\\n    to {\\n        opacity: 1;\\n    }\\n}\\n\\n\\n@keyframes metaIn {\\n    to {\\n        opacity: 1;\\n    }\\n}\\n\\n\\n@keyframes bullAura {\\n\\n    0%,\\n    100% {\\n        opacity: .45;\\n\\n        transform:\\n            translate(-50%, -50%)\\n            scale(.88);\\n    }\\n\\n    50% {\\n        opacity: .9;\\n\\n        transform:\\n            translate(-50%, -50%)\\n            scale(1.08);\\n    }\\n}\\n\\n\\n@keyframes mhsAmbient {\\n\\n    from {\\n        opacity: 0;\\n\\n        transform:\\n            translate(-50%, -50%)\\n            scale(.6);\\n    }\\n\\n    to {\\n        opacity: .55;\\n\\n        transform:\\n            translate(-50%, -50%)\\n            scale(1.2);\\n    }\\n}\\n\\n\\n\/* ============================================================\\n   EXIT\\n   ============================================================ *\/\\n\\n#mhs-intro.mhs-intro-finished {\\n    opacity: 0;\\n    visibility: hidden;\\n    pointer-events: none;\\n}\\n\\n\\n@media (prefers-reduced-motion: reduce) {\\n\\n    #mhs-intro {\\n        display: none;\\n    }\\n\\n}\\n\\n\/* ============================================================\\n   FIX \u2014 MBARARA HIGH TITLE COLOUR\\n   ============================================================ *\/\\n\\n#mhs-intro .mhs-title .mhs-title-one {\\n    color: #ffffff !important;\\n    -webkit-text-fill-color: #ffffff !important;\\n}\\n\\n#mhs-intro .mhs-title .mhs-title-two {\\n    color: #7ad0ff !important;\\n    -webkit-text-fill-color: #7ad0ff !important;\\n}\\n    \\n<\/style>\n<p>\\n\\n<script>\\n\\n(function () {\\n\\n    const intro =\\n        document.getElementById('mhs-intro');\\n\\n    if (!intro) return;\\n\\n\\n    const skip =\\n        intro.querySelector('.mhs-intro-skip');\\n\\n\\n    let finished = false;\\n\\n\\n    function finishIntro() {\\n\\n        if (finished) return;\\n\\n        finished = true;\\n\\n        intro.classList.add(\\n            'mhs-intro-finished'\\n        );\\n\\n        setTimeout(function () {\\n            intro.remove();\\n        }, 850);\\n\\n    }\\n\\n\\n    \/*\\n       BULL ENTERS\\n       \u2193\\n       HEAD-LOW CHARGE\\n       \u2193\\n       ENERGY STRIKE\\n       \u2193\\n       WELCOME TO\\n       \u2193\\n       MBARARA HIGH\\n       \u2193\\n       SCHOOL\\n       \u2193\\n       MUGUME NAMAANI\\n       \u2193\\n       HOMEPAGE\\n    *\/\\n\\n    const timer =\\n        setTimeout(\\n            finishIntro,\\n            4900\\n        );\\n\\n\\n    if (skip) {\\n\\n        skip.addEventListener(\\n            'click',\\n            function () {\\n\\n                clearTimeout(timer);\\n\\n                finishIntro();\\n\\n            }\\n        );\\n\\n    }\\n\\n})();\\n\\n<\/script>\"}}]}]}]}],\"version\":\"5.0.37\"} --><\/p>\n","protected":false},"excerpt":{"rendered":"<p>MBARARA HIGH SCHOOL A Legacy of Strength. A Future of Excellence. Since 1911, generations of young men have walked these grounds with courage, discipline and purpose. Discover Our Story \u2192 Visit MHS OUR HERITAGE 115 YEARS OF LEGACY 1911 \u2014 2026 ACADEMIC EXCELLENCE Learning That Builds Minds. Character That Builds Men. We nurture intellectual curiosity, [&hellip;]<\/p>\n","protected":false},"author":5,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-57779","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/mbararahigh.sc.ug\/index.php?rest_route=\/wp\/v2\/pages\/57779","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mbararahigh.sc.ug\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/mbararahigh.sc.ug\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/mbararahigh.sc.ug\/index.php?rest_route=\/wp\/v2\/users\/5"}],"replies":[{"embeddable":true,"href":"https:\/\/mbararahigh.sc.ug\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=57779"}],"version-history":[{"count":16,"href":"https:\/\/mbararahigh.sc.ug\/index.php?rest_route=\/wp\/v2\/pages\/57779\/revisions"}],"predecessor-version":[{"id":57799,"href":"https:\/\/mbararahigh.sc.ug\/index.php?rest_route=\/wp\/v2\/pages\/57779\/revisions\/57799"}],"wp:attachment":[{"href":"https:\/\/mbararahigh.sc.ug\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=57779"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}