/* ==========================================================
   MMCOA — responsive.css  (v2)
   Include AFTER any page-level <style>:
   <link rel="stylesheet" href="css/responsive.css">
   Also include before </body>:  <script src="js/util-nav.js" defer></script>
   Breakpoints: desktop >1080 · tablet 601–1080 (768 tested) · mobile ≤600 (375, 320 tested)
   ========================================================== */
:root{--header-h:78px;--header-bottom:78px;}
html{scroll-padding-top:calc(var(--header-h) + 12px);-webkit-text-size-adjust:100%;}
body{overflow-x:clip;}
img,svg,video,iframe{max-width:100%;}
h1,h2,h3,h4,p,li,.doc-name{overflow-wrap:anywhere;}




.util-bar.open{max-height:70vh;overflow-y:auto;-webkit-overflow-scrolling:touch;}
.site-top .dropdown-menu{z-index:1100;}
.nav-row{min-height:72px;}
.brand{min-width:0;}
.facts-card{top:calc(var(--header-h) + 20px)!important;}

/* ---------- Hamburger (three lines) — used by BOTH navbars ---------- */
.menu-toggle::before,.util-toggle::before{
  content:"";display:inline-block;width:18px;height:12px;flex-shrink:0;
  background:
    linear-gradient(currentColor,currentColor) 0 0/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) 0 50%/100% 2px no-repeat,
    linear-gradient(currentColor,currentColor) 0 100%/100% 2px no-repeat;
  transition:background-size .2s ease,transform .2s ease;}
/* open state → X (a "+" rotated 45°) */
.menu-toggle[aria-expanded="true"]::before,.util-toggle[aria-expanded="true"]::before{
  background-image:linear-gradient(currentColor,currentColor),linear-gradient(currentColor,currentColor);
  background-size:100% 2px,2px 100%;background-position:center,center;background-repeat:no-repeat;
  transform:rotate(45deg);}

/* ---------- Desktop ---------- */
@media (min-width:1081px){
  .nav-item:nth-last-child(-n+3) .dropdown-menu{left:auto;right:0;}
  .menu-toggle,.util-toggle{display:none!important;}
  /* nested (3rd level) menus fly out sideways */
  .dropdown-menu .has-dropdown{position:relative;}
  .dropdown-menu .has-dropdown>.dropdown-menu{top:-9px;left:100%;margin:0 0 0 2px;}
  .dropdown-menu .has-dropdown>a{justify-content:space-between;}
  .nav-item:nth-last-child(-n+3) .dropdown-menu .has-dropdown>.dropdown-menu{left:auto;right:100%;margin:0 2px 0 0;}
}
@media (min-width:1081px) and (max-width:1280px){
  nav.primary{gap:12px;}
  nav.primary a{font-size:10px;}
  .campus-switch a{padding:8px 14px;}
}

/* ---------- Mobile / tablet navigation (≤1080 → includes 768, 375, 320) ---------- */
.menu-toggle{display:none;}
.util-toggle{display:none;}
body.nav-open{overflow:hidden;}
@media (max-width:1080px){
  .nav-row{min-height:64px;gap:12px;}
  .menu-toggle{display:inline-flex!important;align-items:center;justify-content:center;gap:10px;min-height:44px;min-width:44px;padding:0 16px;
    border:1px solid var(--line-strong)!important;border-radius:2px;background:transparent;color:var(--ink);cursor:pointer;
    font:500 12px 'IBM Plex Mono',monospace;letter-spacing:.06em;text-transform:uppercase;-webkit-tap-highlight-color:transparent;}
  .menu-toggle{margin-left:auto;}
  .menu-toggle:hover,.menu-toggle[aria-expanded="true"]{background:var(--ink);color:var(--paper);}
  nav.primary{display:none!important;}
  body.nav-open nav.primary{display:flex!important;flex-direction:column;align-items:stretch;gap:0;flex-wrap:nowrap;
    position:fixed;top:var(--header-bottom);left:0;right:0;bottom:0;height:auto;max-height:calc(100vh - var(--header-bottom));
    overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    background:var(--paper);border-top:1px solid var(--line);padding:4px 24px calc(28px + env(safe-area-inset-bottom,0px));z-index:900;}
  @supports (height:100dvh){body.nav-open nav.primary{max-height:calc(100dvh - var(--header-bottom));}}
  nav.primary .nav-item{width:100%;border-bottom:1px solid var(--line);}
  nav.primary .nav-item>a{justify-content:space-between;min-height:50px;padding:14px 0;font-size:13px;letter-spacing:.03em;}
  nav.primary a::after{display:none;}
  nav.primary .caret{font-size:12px;padding:14px;margin:-14px -14px -14px 0;min-width:44px;text-align:center;}
  /* dropdown → accordion */
  nav.primary .dropdown-menu{position:static!important;min-width:0;width:auto;max-width:100%;margin:0 0 10px 6px;padding:2px 0 2px 14px;box-shadow:none;border:none;
    border-left:2px solid var(--oxide);background:transparent;display:none!important;opacity:1;visibility:visible;transform:none;}
  nav.primary .has-dropdown.open>.dropdown-menu{display:flex!important;}
  nav.primary .dropdown-menu a{padding:13px 8px;font-size:14px;min-height:46px;display:flex;align-items:center;justify-content:space-between;white-space:normal;line-height:1.3;}
  /* nested (3rd level) accordion */
  nav.primary .dropdown-menu .dropdown-menu{margin:0 0 6px 4px;padding-left:12px;border-left:2px solid var(--gold);}
  nav.primary .dropdown-menu .dropdown-menu a{font-size:13.5px;}
  nav.primary .dropdown-menu .caret{margin:0;padding:12px;}
  .has-dropdown:hover .caret{transform:none;}
  .has-dropdown.open>a .caret,.has-dropdown.open>.caret{transform:rotate(180deg);}
  .has-dropdown.open>a{color:var(--oxide);}
}

/* ---------- FIRST navbar (top utility bar) — collapsible with three lines ---------- */
@media (max-width:1080px){
  .util-bar{position:relative;}
  .util-bar .container{height:auto!important;min-height:44px;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:0;padding-top:0;padding-bottom:0;}
  .util-toggle{display:inline-flex!important;align-items:center;justify-content:center;min-height:44px;min-width:44px;margin-left:auto;padding:0 10px;
    background:transparent;border:none;color:#fff;cursor:pointer;-webkit-tap-highlight-color:transparent;}
  .util-toggle:hover,.util-toggle[aria-expanded="true"]{background:rgba(255,255,255,.12);}
  .util-toggle{order:-1;}
  .util-bar .container>*:not(.util-toggle){display:none!important;}
  .util-bar.open .container>*:not(.util-toggle){
    display:flex!important;flex-direction:column;align-items:stretch;gap:0;width:100%;flex:0 0 100%;order:1;margin:0;padding:0 0 10px;
    border-top:1px solid rgba(255,255,255,.18);}
  .util-bar.open .container>a{flex-direction:row;}
  .util-bar.open a{display:flex;align-items:center;justify-content:space-between;min-height:44px;padding:10px 2px;font-size:12.5px;
    border-bottom:1px solid rgba(255,255,255,.1);}
  /* dropdown inside first navbar → accordion */
  .util-bar .nav-item,.util-bar li{position:relative;width:100%;}
  .util-bar .dropdown-menu{position:static!important;display:none!important;opacity:1;visibility:visible;transform:none;min-width:0;width:100%;margin:0;padding:0 0 4px 14px;
    background:transparent;border:none;border-left:2px solid var(--oxide);box-shadow:none;}
  .util-bar .has-dropdown.open>.dropdown-menu{display:flex!important;}
  .util-bar .dropdown-menu a{color:rgba(255,255,255,.85);font-family:'IBM Plex Mono',monospace;text-transform:none;font-size:12.5px;}
  .util-bar .dropdown-menu a:hover{background:transparent;color:#fff;}
  .util-bar .caret{padding:12px;margin:-12px -10px -12px 0;min-width:44px;text-align:center;}
}

/* ---------- Page section switcher → dropdown on tablet & mobile ---------- */
.switch-select{display:none;}
@media (max-width:1080px){
  .campus-switch{display:none!important;}
  .switch-select{display:block;margin-bottom:36px;}
  .switch-select label{display:block;font:500 11px 'IBM Plex Mono',monospace;letter-spacing:.1em;text-transform:uppercase;color:var(--oxide);margin-bottom:8px;}
  .switch-select select{width:100%;max-width:100%;min-height:50px;padding:0 44px 0 16px;font:500 16px 'IBM Plex Sans',Arial,sans-serif;color:var(--ink);text-overflow:ellipsis;
    background:var(--paper) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%231B1B18' stroke-width='1.6'/%3E%3C/svg%3E") no-repeat right 16px center;
    border:1px solid var(--line-strong);border-radius:2px;-webkit-appearance:none;appearance:none;cursor:pointer;}
  .switch-select select:focus{outline:2px solid var(--oxide);outline-offset:2px;}
}
@media (min-width:1081px){
  .campus-switch a{padding:8px 16px;font-size:11.5px;}
}

/* ---------- Tablet (≤1080) ---------- */
@media (max-width:1080px){
  .container{padding:0 28px;}
  section{padding:72px 0;}
  .page-header{padding-top:48px;}
  .page-header-strip{display:grid;grid-template-columns:repeat(2,1fr);}
  .page-header-strip .item{border-bottom:1px solid rgba(255,255,255,.18);}
  .footer-grid{grid-template-columns:repeat(3,1fr)!important;gap:32px;}
  .footer-brand{grid-column:1/-1;}
  .detail-wrap{grid-template-columns:1fr;gap:36px;}
  .facts-card{position:static!important;}
  .cta-inner{gap:24px;}
  .hero-image img{height:340px;}
  .seal{width:96px;height:96px;}
}

/* ---------- Tablet portrait (≤860) — covers 768 ---------- */
@media (max-width:860px){
  .container{padding:0 24px;}
  .footer-grid{grid-template-columns:1fr 1fr!important;}
  .sheet-head{margin-bottom:36px;padding-bottom:20px;}
  .doc-item{grid-template-columns:1fr!important;gap:6px;padding:20px 4px;}
  .doc-name{font-size:18px;}
  .float-enquiry{padding:12px 18px;}
  .page-header h1{font-size:clamp(32px,6.4vw,48px);}
  .hero-copy h1{font-size:clamp(38px,8vw,60px);}
  .photo-grid.three{grid-template-columns:repeat(2,1fr);}
  .intake-grid{grid-template-columns:1fr;}
  .research-grid{grid-template-columns:repeat(2,1fr);}
  .about-media img,.alumni-media img{height:340px;}
  .course-panel-copy{padding:30px 26px;}
  .cta-inner h2{max-width:100%;}
}

/* ---------- Mobile (≤600) — 375 and below ---------- */
@media (max-width:600px){
  body{font-size:15.5px;}
  .container{padding:0 18px;}
  section{padding:52px 0;}
  .util-bar{font-size:11px;}
  .util-right{gap:12px;flex-wrap:wrap;}
  .logo-img,header .logo-img{width:40px;height:40px;}
  .nav-row{padding:8px 0;}
  .page-header{padding-top:36px;}
  .page-header h1{font-size:clamp(28px,8.6vw,38px);margin:14px 0 16px;}
  .page-header p{font-size:15px;margin-bottom:28px;}
  .breadcrumb{font-size:10.5px;}
  .page-header-strip .item{padding:14px 14px;font-size:10px;}
  .page-header-strip .item b{font-size:15px;}
  .hero-inner{padding-top:44px;gap:36px;}
  .hero-copy h1{font-size:clamp(34px,10.4vw,46px);}
  .hero-copy p{font-size:15.5px;}
  .hero-ctas{margin-bottom:36px;}
  .hero-ctas .btn{flex:1 1 100%;justify-content:center;}
  .hero-image img{height:240px;}
  .hero-image .frame{padding:10px;}
  .seal,.seal-center{display:none;}
  .dim-item{padding:16px 16px;}
  .dim-item .num{font-size:21px;}
  .dim-strip .container{grid-template-columns:repeat(2,1fr);}
  .dim-item:nth-child(2n){border-right:none;}
  .sheet-head{flex-direction:column;align-items:flex-start;gap:12px;}
  .sheet-no{text-align:left;}
  .sheet-no b{font-size:18px;}
  .ticker-band .ticker-label{padding:0 12px;font-size:10px;}
  .ticker-track{padding-left:110px;font-size:12px;}
  .ticker-track span{padding:10px 28px;}
  .detail-copy p.lede{font-size:17px;}
  .facts-card{padding:24px 20px;}
  .facts-card dl div{flex-direction:column;gap:4px;}
  .facts-card dl dd{text-align:left;}
  .doc-name small{font-size:10.5px;}
  .doc-cta{font-size:11.5px;}
  .about-wrap,.alumni-wrap{gap:36px;}
  .about-media img,.alumni-media img{height:260px;}
  .about-list li{flex-direction:column;gap:4px;}
  .about-list li b{width:auto;}
  .course-tabs{flex-wrap:nowrap;overflow-x:auto;-webkit-overflow-scrolling:touch;margin-right:-18px;padding-right:18px;scrollbar-width:none;}
  .course-tabs::-webkit-scrollbar{display:none;}
  .course-tab-btn{flex:0 0 auto;padding:11px 16px;font-size:11.5px;}
  .course-panel-copy{padding:24px 20px;}
  .course-panel-copy h3{font-size:22px;}
  .course-panel-meta{gap:18px;flex-wrap:wrap;}
  .course-panel-meta div b{font-size:16px;}
  .course-panel-img img{min-height:180px;}
  .gallery-grid{grid-template-columns:1fr;grid-auto-rows:210px;}
  .research-grid{grid-template-columns:1fr;}
  .research-strip{padding-top:56px;padding-bottom:56px;}
  .alumni-stats{gap:28px;flex-wrap:wrap;}
  .photo-grid.three{grid-template-columns:1fr;}
  .intake-card{padding:26px 20px;}
  .intake-card .num{font-size:52px;}
  .testi-quote{font-size:clamp(19px,5.6vw,24px);}
  .faq-q{font-size:15.5px;padding:18px 2px;}
  .cta-band{padding:52px 0!important;}
  .cta-actions{width:100%;flex-direction:column;}
  .cta-actions .btn{width:100%;justify-content:center;}
  .footer-grid{grid-template-columns:1fr!important;gap:28px;}
  .footer-top{padding:52px 0 36px;}
  .footer-bottom{flex-direction:column;align-items:flex-start;}
  .lightbox{padding:16px;}
  .lightbox-close{top:14px;right:14px;}
  .lightbox-cap{bottom:18px;font-size:11px;padding:0 16px;}
  .float-stack{right:14px;bottom:calc(14px + env(safe-area-inset-bottom,0px));gap:10px;}
  .float-enquiry{font-size:11px;padding:11px 16px;}
  .float-whatsapp{width:46px;height:46px;}
  .btn{padding:13px 18px;white-space:normal;}
  body.nav-open nav.primary{padding-left:18px;padding-right:18px;}
}

/* ---------- Small phones (≤380 — 375 & 360) ---------- */
@media (max-width:380px){
  .container{padding:0 16px;}
  .menu-toggle{padding:0 12px;}
  .page-header-strip .item{padding:12px 12px;}
  .footer-brand p{max-width:100%;}
}

/* ---------- Smallest phones (≤340 — 320) ---------- */
@media (max-width:340px){
  body{font-size:15px;}
  .container{padding:0 14px;}
  section{padding:44px 0;}
  .util-toggle{font-size:10.5px;}
  .logo-img,header .logo-img{width:36px;height:36px;}
  .brand{gap:8px;}
  .brand-title .smallF,header .brand-title .smallF{font-size:11.5px;white-space:normal;line-height:1.15;}
  .menu-toggle{min-height:40px;padding:0 10px;gap:8px;font-size:11px;}
  .header-actions .btn{display:none;}
  .nav-row{gap:8px;}
  body.nav-open nav.primary{padding-left:14px;padding-right:14px;}
  nav.primary .nav-item>a{font-size:12.5px;}
  nav.primary .dropdown-menu{padding-left:10px;margin-left:2px;}
  nav.primary .dropdown-menu a{font-size:13.5px;padding:12px 6px;}
  .page-header h1{font-size:27px;}
  .page-header-strip{grid-template-columns:1fr 1fr;}
  .page-header-strip .item{padding:10px 10px;font-size:9.5px;}
  .page-header-strip .item b{font-size:14px;}
  .hero-copy h1{font-size:32px;}
  .hero-image img{height:200px;}
  .dim-item .num{font-size:18px;}
  .dim-item .lbl{font-size:9.5px;}
  .ticker-track{padding-left:96px;}
  .sheet-head h2{font-size:25px;}
  .course-panel-meta div{font-size:10px;}
  .course-panel-copy{padding:20px 16px;}
  .gallery-grid{grid-auto-rows:180px;}
  .intake-card .num{font-size:44px;}
  .alumni-stats div .n{font-size:28px;}
  .btn{font-size:12px;padding:12px 14px;letter-spacing:.04em;}
  .float-enquiry{font-size:10.5px;padding:10px 14px;}
  .doc-name{font-size:17px;}
  .facts-card{padding:20px 16px;}
  .switch-select select{font-size:15px;}
}

/* ---------- Footer — never overflow, always padded (all screens) ---------- */
footer{max-width:100%;overflow-x:clip;}
footer p,footer li,footer a,footer h5,footer span{overflow-wrap:anywhere;word-break:normal;}
footer .container{max-width:100%;}
.footer-bottom p{white-space:normal;max-width:100%;}
.footer-grid>*,.footer-bottom>*{min-width:0;}
@media (max-width:1080px){
  footer .container{padding-left:28px!important;padding-right:28px!important;}
  footer .footer-top:not(:has(.container)),footer .footer-bottom:not(:has(.container)){padding-left:28px;padding-right:28px;}
}
@media (max-width:860px){
  footer .container{padding-left:24px!important;padding-right:24px!important;}
  footer .footer-top:not(:has(.container)),footer .footer-bottom:not(:has(.container)){padding-left:24px;padding-right:24px;}
}
@media (max-width:600px){
  footer .container{padding-left:18px!important;padding-right:18px!important;}
  footer .footer-top:not(:has(.container)),footer .footer-bottom:not(:has(.container)){padding-left:18px;padding-right:18px;}
  .footer-grid{grid-template-columns:1fr!important;}
  .footer-col ul li{margin-bottom:9px;}
  .footer-col ul li a{display:inline-block;padding:3px 0;}
  .footer-bottom{gap:8px;padding-bottom:calc(84px + env(safe-area-inset-bottom,0px));}
  .footer-bottom p{font-size:11px;line-height:1.5;}
  .float-stack{max-width:calc(100vw - 28px);}
}
@media (max-width:340px){
  footer .container{padding-left:14px!important;padding-right:14px!important;}
  footer .footer-top:not(:has(.container)),footer .footer-bottom:not(:has(.container)){padding-left:14px;padding-right:14px;}
}

/* ---------- Touch comfort ---------- */
@media (hover:none){
  .lift:hover,.float-enquiry:hover,.float-whatsapp:hover{transform:none;}
  .photo:hover img,.gallery-item:hover img{transform:none;}
  .tilt:hover{transform:rotate(var(--rot,-1.2deg));}
}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}



/* ================================
   COMMON FOOTER
================================ */

footer .footer-top,
footer .footer-bottom {
    width: 100%;
    max-width: 1240px;
    margin-left: auto;
    margin-right: auto;
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;
}

.footer-social {
    display: flex;
    align-items: center;
    gap: 16px;
}

.footer-social a {
    width: 34px;
    height: 34px;
    border: 1px solid rgba(255,255,255,.3);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: rgba(255,255,255,.7);
}

.footer-social a:hover {
    background: #fff;
    color: var(--blueprint-deep);
    border-color: #fff;
}




/* ==========================================================
   FINAL MOBILE WIDTH FIX — MMCOA
   ========================================================== */

html,
body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden !important;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}

/* All major wrappers must stay inside viewport */
.container,
.hero,
.hero-inner,
.hero-copy,
.hero-image,
.hero-image .frame,
.dim-strip,
.dim-strip .container,
section,
main {
    width: 100%;
    max-width: 100%;
    min-width: 0;
}

/* ---------- TABLET ---------- */

@media (max-width:1080px) {

    .container {
        width: 100%;
        max-width: 100%;
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    .hero-inner {
        display: grid !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 36px !important;
        padding-top: 48px !important;
    }

    .hero-copy,
    .hero-image {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .hero-copy h1 {
        max-width: 100%;
        overflow-wrap: normal;
        word-break: normal;
    }

    .hero-copy p {
        max-width: 100%;
    }

    .hero-image .frame {
        width: 100%;
        max-width: 100%;
    }

    .hero-image img {
        width: 100%;
        max-width: 100%;
        height: 340px;
        object-fit: cover;
    }

    .dim-strip .container {
        width: 100%;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .dim-item {
        min-width: 0;
    }
}


/* ---------- MOBILE ---------- */

@media (max-width:600px) {

    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    .hero {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
    }

    .hero-inner {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        max-width: 100% !important;
        gap: 30px !important;
        padding: 42px 0 0 !important;
    }

    .hero-copy {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .hero-copy h1 {
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(34px, 10vw, 46px) !important;
        line-height: 1.05 !important;
        margin: 16px 0 20px !important;
        overflow: visible !important;
    }

    .hero-copy p {
        width: 100% !important;
        max-width: 100% !important;
        font-size: 15px !important;
    }

    .hero-ctas {
        width: 100%;
        display: flex;
        flex-direction: column;
        gap: 10px;
    }

    .hero-ctas .btn {
        width: 100% !important;
        flex: none !important;
    }

    .hero-image {
        width: 100% !important;
        max-width: 100% !important;
    }

    .hero-image .frame {
        width: 100% !important;
        max-width: 100% !important;
        padding: 10px !important;
    }

    .hero-image img {
        width: 100% !important;
        height: 240px !important;
        max-width: 100% !important;
        object-fit: cover;
    }

    .hero-image .tag {
        left: 10px;
        right: 10px;
    }

    .dim-strip {
        width: 100% !important;
        max-width: 100% !important;
    }

    .dim-strip .container {
        width: 100% !important;
        max-width: 100% !important;
        grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    }

    .dim-item {
        min-width: 0 !important;
        padding: 16px 12px !important;
    }

    .dim-item .num {
        font-size: 20px !important;
    }

    /* Prevent long text from creating horizontal layout */
    p,
    h1,
    h2,
    h3,
    h4,
    a,
    span {
        max-width: 100%;
    }

    /* Research strip was using huge negative margins */
    .research-strip {
        margin-left: 0 !important;
        margin-right: 0 !important;
        padding-left: 0 !important;
        padding-right: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
    }
}


/* ---------- VERY SMALL PHONES ---------- */

@media (max-width:380px) {

    .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    .hero-copy h1 {
        font-size: 32px !important;
    }

    .dim-strip .container {
        grid-template-columns: 1fr 1fr !important;
    }
}



/* ==========================================================
   MMCOA — FINAL CONTAINER SYSTEM
   ========================================================== */

.container {
    width: 100%;
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px;
    padding-right: 32px;
    box-sizing: border-box;
}

@media (max-width:1080px) {
    .container {
        max-width: 100% !important;
        padding-left: 28px !important;
        padding-right: 28px !important;
    }
}

@media (max-width:860px) {
    .container {
        padding-left: 24px !important;
        padding-right: 24px !important;
    }
}

@media (max-width:600px) {
    .container {
        max-width: 100% !important;
        padding-left: 18px !important;
        padding-right: 18px !important;
    }
}

@media (max-width:340px) {
    .container {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }
}




/* ==========================================================
   MMCOA — STICKY HEADER ALL DEVICES
   ========================================================== */

.site-top {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 99999 !important;
}

.site-top header {
    position: relative !important;
    top: auto !important;
    width: 100% !important;
}

/* Prevent page content from going underneath header */
body {
    padding-top: var(--header-h);
}



/* ==========================================================
   MMCOA CAREERS PAGE — HEADER WIDTH FIX
   ========================================================== */

.page-header {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    display: block !important;
    box-sizing: border-box;
}

.page-header-inner {
    width: 100% !important;
    max-width: 1240px !important;
    margin-left: auto !important;
    margin-right: auto !important;
    padding-left: 32px !important;
    padding-right: 32px !important;
    box-sizing: border-box;
}

.page-header h1 {
    width: auto !important;
    max-width: 900px !important;
    display: block !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: normal !important;
}

.page-header p {
    width: auto !important;
    max-width: 600px !important;
}

.page-header-strip {
    width: 100% !important;
}


/* ---------- Tablet ---------- */
@media (max-width: 1080px) {
    .page-header-inner {
        padding-left: 28px !important;
        padding-right: 28px !important;
    }

    .page-header h1 {
        max-width: 800px !important;
    }
}


/* ---------- Mobile ---------- */
@media (max-width: 600px) {
    .page-header {
        width: 100% !important;
    }

    .page-header-inner {
        width: 100% !important;
        padding-left: 20px !important;
        padding-right: 20px !important;
    }

    .page-header h1 {
        width: 100% !important;
        max-width: 100% !important;
        font-size: clamp(34px, 11vw, 48px) !important;
        line-height: 1.05 !important;
        word-break: normal !important;
        overflow-wrap: normal !important;
    }

    .page-header p {
        width: 100% !important;
        max-width: 100% !important;
    }

    .page-header-strip {
        width: 100% !important;
        flex-direction: column;
    }

    .page-header-strip .item {
        width: 100%;
        border-right: 0;
        border-bottom: 1px solid rgba(255,255,255,.18);
    }
}












/* Global text justification across all pages */
p,
.text-box,
.content-box,
.section-content,
.about-content,
.detail-copy,
.page-content,
article {
    text-align: justify !important;
    text-justify: inter-word;
}









/* ==========================================
   MMCOA ADMISSION PROCESS - MOBILE RESPONSIVE
   Below 425px
========================================== */

@media screen and (max-width: 425px) {

    /* Prevent horizontal overflow */
    html,
    body {
        width: 100%;
        max-width: 100%;
        overflow-x: hidden;
    }

    /* Container spacing */
    .container {
        width: 100% !important;
        max-width: 100% !important;
        padding-left: 14px !important;
        padding-right: 14px !important;
        box-sizing: border-box;
    }

    /* Admission content - single column */
    .detail-wrap {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        width: 100% !important;
        gap: 24px !important;
    }

    .detail-copy,
    .detail-wrap aside {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Advertisement image */
    .figure {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 20px !important;
        overflow: hidden;
    }

    .figure img {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: contain !important;
    }

    /* Admission headings */
    .detail-copy h3 {
        font-size: 21px !important;
        line-height: 1.3 !important;
        overflow-wrap: anywhere;
    }

    .detail-copy p {
        font-size: 14px !important;
        line-height: 1.6 !important;
        overflow-wrap: anywhere;
    }

    .detail-copy p.lede {
        font-size: 16px !important;
    }

    /* Admission links */
    .row-list {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .row-list .row {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) !important;
        gap: 8px !important;
        padding: 14px 5px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    .r-main {
        font-size: 15px !important;
        line-height: 1.45 !important;
        overflow-wrap: anywhere !important;
        word-break: break-word !important;
    }

    .r-side {
        font-size: 11px !important;
        text-align: left !important;
    }

    /* Contact information */
    .facts-card {
        width: 100% !important;
        padding: 20px 16px !important;
    }

    .facts-card dl div {
        flex-wrap: wrap;
        gap: 6px;
    }

    .facts-card dl dd {
        overflow-wrap: anywhere;
    }

    /* Admission category buttons */
    .campus-switch {
        gap: 8px !important;
        margin-bottom: 25px !important;
    }

    .campus-switch a {
        font-size: 10px !important;
        padding: 8px 12px !important;
    }

    /* Page heading */
    .page-header {
        padding-top: 35px !important;
    }

    .page-header h1 {
        font-size: 30px !important;
        line-height: 1.2 !important;
        overflow-wrap: anywhere;
        margin-bottom: 25px !important;
    }

    .page-header-strip .item {
        padding: 12px 15px !important;
        width: 100%;
        overflow-wrap: anywhere;
    }

    /* CTA buttons */
    .cta-inner {
        gap: 20px !important;
    }

    .cta-actions {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
    }

    .cta-actions .btn {
        width: 100% !important;
        justify-content: center;
        white-space: normal !important;
    }
}

/* Extra-small phones */
@media screen and (max-width: 360px) {

    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .page-header h1 {
        font-size: 26px !important;
    }

    .detail-copy h3 {
        font-size: 19px !important;
    }
}