/* Universities page — approved editorial design (October 2026), same tokens as the homepage (home.css).
   Loaded last on /universities only. Every rule is scoped with #mx-unis because editorial.css and
   approved-pages.css style headings, forms and the legacy page at high specificity.
   Desktop geometry follows the approved reference at 1440px. */
#mx-unis {
  --ivory:#FBF8F1; --ivory-2:#F7F3EB; --cream:#F3E8D6;
  --navy:#062B55; --navy-2:#082F5C; --band:#0A2650; --blue:#174A85; --ink:#0C315E; --muted:#697587;
  --gold:#C89B4D; --gold-2:#D7AF68; --gold-text:#9A7034; --line:rgba(12,49,94,.12); --line-dark:rgba(255,255,255,.16);
  --edge:max(32px,calc(50vw - 565px));
  --serif:'DM Serif Display','Fraunces',Georgia,serif; --sans:'Inter',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --script:'Nothing You Could Do','Segoe Script',cursive;
  background:var(--ivory); color:var(--ink); font-family:var(--sans); overflow-x:clip;
}
#mx-unis *,#mx-unis *:before,#mx-unis *:after {box-sizing:border-box}
#mx-unis .ux-wrap {width:min(100% - 64px,1114px); margin-inline:auto}
#mx-unis ul,#mx-unis ol {list-style:none; margin:0; padding:0}
#mx-unis img {display:block; max-width:100%}
#mx-unis :is(h1,h2,h3) {font-family:var(--serif); font-weight:400; letter-spacing:-.01em; color:var(--ink); margin:0; text-wrap:balance}
#mx-unis h2 span {display:block}
#mx-unis p {margin:0; font-size:13.5px; line-height:1.6; color:var(--muted)}
#mx-unis .ux-eyebrow {margin:0 0 10px; font:600 10.5px/1.4 var(--sans); letter-spacing:.2em; text-transform:uppercase; color:var(--ink)}
#mx-unis .ux-eyebrow-line {display:flex; align-items:center; gap:12px}
#mx-unis .ux-eyebrow-line:after {content:""; width:40px; height:1px; background:var(--gold)}
#mx-unis .ux-icon {width:22px; height:22px; flex:none; stroke-width:1.4}
#mx-unis .ux-arrow {width:14px; height:14px; flex:none; transition:transform .2s}
#mx-unis .ux-script {margin:0; font:400 34px/1.05 var(--script); color:var(--gold-text); pointer-events:none}
#mx-unis .ux-script span {display:block}
#mx-unis :is(a,button,input,select):focus-visible {outline:2px solid var(--gold-2); outline-offset:3px}

/* ---------- buttons ---------- */
#mx-unis .ux-actions {display:flex; flex-wrap:wrap; gap:16px; margin-top:24px}
#mx-unis .ux-btn {display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:44px; padding:0 22px; border-radius:3px; border:1px solid transparent; font:600 13px/1 var(--sans); text-decoration:none!important; white-space:nowrap; cursor:pointer; transition:background-color .2s,color .2s,border-color .2s,filter .2s}
#mx-unis .ux-btn:hover .ux-arrow {transform:translateX(3px)}
#mx-unis .ux-btn-navy {background:var(--navy); color:#fff!important}
#mx-unis .ux-btn-navy:hover {background:var(--blue)}
#mx-unis .ux-btn-outline {background:rgba(255,255,255,.75); border-color:var(--navy); color:var(--ink)!important}
#mx-unis .ux-btn-outline:hover {background:var(--navy); color:#fff!important}
#mx-unis .ux-btn-gold {background:linear-gradient(180deg,#E3C27F,#D5AE63); color:var(--navy)!important}
#mx-unis .ux-btn-gold:hover {filter:brightness(1.05)}
#mx-unis .ux-btn-ghost {background:rgba(6,43,85,.25); border-color:rgba(255,255,255,.8); color:#fff!important}
#mx-unis .ux-btn-ghost:hover {background:rgba(255,255,255,.12)}

/* ---------- hero (435px) ---------- */
#mx-unis .ux-hero {position:relative; margin-top:var(--mb-h); min-height:435px; display:flex; align-items:center; isolation:isolate; background:radial-gradient(70% 90% at 12% 50%,#FDFBF6,var(--ivory) 70%)}
#mx-unis .ux-hero-media {position:absolute; top:0; bottom:0; left:40%; right:152px; z-index:-1; margin:0}
#mx-unis .ux-hero-media img {width:100%; height:100%; object-fit:cover; object-position:50% 42%}
#mx-unis .ux-hero-media:before {content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,var(--ivory) 0%,rgba(251,248,241,.8) 10%,rgba(251,248,241,.3) 22%,rgba(251,248,241,0) 34%)}
#mx-unis .ux-hero .ux-script {position:absolute; z-index:2; top:44px; left:1%; transform:rotate(-14deg); transform-origin:left top; text-shadow:0 0 2px #fff,0 0 12px rgba(255,255,255,.85)}
#mx-unis .ux-hero .ux-script span:nth-child(2) {padding-left:40px}
#mx-unis .ux-side {position:absolute; top:0; bottom:0; right:0; width:152px; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:16px; background:var(--ivory)}
#mx-unis .ux-side-rule,#mx-unis .ux-side:after {content:""; width:1px; height:56px; background:var(--gold)}
#mx-unis .ux-side-ko {writing-mode:vertical-rl; font:500 17px/1 'Malgun Gothic','Apple SD Gothic Neo',var(--sans); letter-spacing:.06em; color:var(--gold-text)}
#mx-unis .ux-side-en {font:600 9.5px/1.8 var(--sans); letter-spacing:.2em; text-transform:uppercase; text-align:center; color:var(--gold-text)}
#mx-unis .ux-hero-inner {width:min(100% - 64px,1114px); padding-block:40px 28px}
#mx-unis .ux-hero-copy {max-width:420px}
#mx-unis .ux-hero h1 {font-size:50px; line-height:1.02; letter-spacing:-.02em; margin:4px 0 18px}
#mx-unis .ux-hero h1 span {display:block}
#mx-unis .ux-lead {font-size:14px!important; line-height:1.55!important; color:#3b4b60!important}
#mx-unis .ux-tagline {display:flex; align-items:center; gap:10px; margin-top:26px!important; font:600 9.5px/1.4 var(--sans)!important; letter-spacing:.2em; text-transform:uppercase; color:var(--muted)!important; white-space:nowrap}
#mx-unis .ux-tagline:after {content:""; width:30px; height:1px; background:var(--gold)}
#mx-unis .ux-panel {position:absolute; z-index:2; right:193px; top:125px; width:318px; padding:26px 30px 22px; background:rgba(255,253,248,.96); border-radius:3px; box-shadow:0 10px 30px rgba(6,43,85,.12)}
#mx-unis .ux-panel-eyebrow {display:flex; align-items:center; gap:14px; margin:0!important; font:700 10.5px/1.4 var(--sans)!important; letter-spacing:.2em; text-transform:uppercase; color:var(--ink)!important}
#mx-unis .ux-panel-eyebrow .ux-icon {width:26px; height:26px; color:var(--gold)}
#mx-unis .ux-panel-sub {margin:8px 0 6px 40px!important; font:italic 400 13px/1.4 var(--serif)!important; color:var(--gold-text)!important}
#mx-unis .ux-panel li {display:flex; align-items:center; gap:16px; padding:10px 0; font-size:12.5px; color:#3b4b60}
#mx-unis .ux-panel li + li {border-top:1px solid var(--line)}
#mx-unis .ux-panel li .ux-icon {width:22px; height:22px; color:var(--gold)}

/* ---------- navy band (192px) ---------- */
#mx-unis .ux-band {position:relative; overflow:hidden; background:var(--band)}
#mx-unis .ux-band-art {position:absolute; bottom:-6px; width:250px; color:var(--gold-2); opacity:.3; pointer-events:none}
#mx-unis .ux-band-art-l {left:-30px}
#mx-unis .ux-band-art-r {right:-40px; transform:scaleX(-1)}
#mx-unis .ux-band-inner {position:relative; z-index:1; width:min(100% - 64px,1034px); padding-block:32px 30px}
#mx-unis .ux-metrics {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-bottom:28px}
#mx-unis .ux-metrics li {display:flex; align-items:center; justify-content:center; gap:20px; padding:4px 12px}
#mx-unis .ux-metrics li + li {border-left:1px solid var(--line-dark)}
#mx-unis .ux-metrics .ux-icon {width:36px; height:36px; color:var(--gold-2); stroke-width:1.3}
#mx-unis .ux-metrics span {display:flex; flex-direction:column; gap:4px; font-size:13.5px; line-height:1.3; color:#cfd8e4}
#mx-unis .ux-metrics strong {font:400 27px/1 var(--serif); color:#fff}
#mx-unis .ux-search {position:relative; display:grid; grid-template-columns:minmax(0,1fr) 146px auto auto; gap:8px; align-items:stretch}
#mx-unis .ux-q {position:absolute; left:16px; top:13px; color:#cfd8e4; pointer-events:none}
#mx-unis .ux-q .ux-icon {width:18px; height:18px}
#mx-unis .ux-search input,#mx-unis .ux-search select {width:100%; min-height:46px; margin:0; border:1px solid rgba(215,175,104,.45); border-radius:3px; background:rgba(255,255,255,.04); box-shadow:none; font:400 13.5px var(--sans); color:#fff}
#mx-unis .ux-search input {padding:0 16px 0 46px}
#mx-unis .ux-search input::placeholder {color:#b9c6d8}
#mx-unis .ux-search select {padding:0 34px 0 14px; font-weight:600; appearance:none; -webkit-appearance:none; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 14px center; cursor:pointer}
#mx-unis .ux-search select option {color:var(--ink); background:#fff}
#mx-unis .ux-search :is(input,select):focus {outline:none; border-color:var(--gold-2); background-color:rgba(255,255,255,.08); box-shadow:0 0 0 3px rgba(215,175,104,.25)}
#mx-unis .ux-search .ux-btn {min-height:46px; min-width:124px}
#mx-unis .ux-search .ux-btn .ux-icon {width:16px; height:16px}
#mx-unis .ux-clear {min-height:46px; padding:0 16px; border:1px solid var(--line-dark); border-radius:3px; background:transparent; color:#fff; font:600 13px var(--sans); cursor:pointer}
#mx-unis .ux-clear[hidden] {display:none}

/* ---------- directory ---------- */
#mx-unis .ux-directory {scroll-margin-top:calc(var(--mb-h) + 8px)}
#mx-unis .ux-dir-head {display:grid; grid-template-columns:minmax(0,1fr) 330px; gap:40px; align-items:end; padding-block:34px 30px}
#mx-unis .ux-dir-head h2 {font-size:38px; line-height:1.12}
#mx-unis .ux-dir-side p {font-size:13px}
#mx-unis .ux-count {margin-top:8px!important; font:600 11.5px/1.4 var(--sans)!important; letter-spacing:.08em; text-transform:uppercase; color:var(--gold-text)!important}
#mx-unis .ux-rows {border-top:1px solid var(--line)}
#mx-unis .ux-rows[hidden] {display:none}
#mx-unis .ux-row {position:relative; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); min-height:210px; background:var(--ivory)}
#mx-unis .ux-row[hidden] {display:none}
#mx-unis .ux-row + .ux-row {border-top:1px solid #fff}
#mx-unis .ux-media {position:relative; order:2; margin:0; overflow:hidden; background:var(--navy)}
#mx-unis .ux-media img {position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:50% 50%; transition:transform .6s ease}
#mx-unis .ux-campus-gallery {position:absolute; inset:0}
#mx-unis .ux-campus-track {display:flex; width:100%; height:100%; overflow-x:auto; overflow-y:hidden; scroll-snap-type:x mandatory; scrollbar-width:none; overscroll-behavior-x:contain}
#mx-unis .ux-campus-track::-webkit-scrollbar {display:none}
#mx-unis .ux-campus-slide {position:relative; flex:0 0 100%; min-width:0; height:100%; scroll-snap-align:start; scroll-snap-stop:always}
#mx-unis .ux-campus-controls {position:absolute; bottom:14px; right:18px; z-index:3; display:flex; align-items:center; gap:5px; padding:4px; border:1px solid rgba(255,255,255,.35); border-radius:5px; background:rgba(6,35,70,.85); color:#fff; font:500 12px var(--sans)}
#mx-unis .ux-campus-controls[hidden] {display:none}
#mx-unis .ux-photo-pending {position:absolute; left:24px; bottom:16px; z-index:2; margin:0; color:#dce5ef; font-size:12px}
#mx-unis .ux-campus-controls button {display:grid; place-items:center; width:36px; height:36px; padding:0; border:0; border-radius:3px; background:transparent; color:#fff; font-size:20px; cursor:pointer}
#mx-unis .ux-campus-controls button:hover:not(:disabled) {background:rgba(255,255,255,.16)}
#mx-unis .ux-campus-controls button:disabled {opacity:.35; cursor:default}
#mx-unis .ux-campus-controls span {min-width:36px; text-align:center}
#mx-unis .ux-campus-controls button:focus-visible {outline:2px solid var(--gold-2); outline-offset:1px}
#mx-unis .ux-campus-track:focus-visible {outline:3px solid var(--gold-2); outline-offset:-4px}
#mx-unis .ux-media:before,#mx-unis .ux-brand {pointer-events:none}
@media (prefers-reduced-motion:reduce) { #mx-unis .ux-campus-gallery img {transition:none} }
#mx-unis .ux-row:hover .ux-media img {transform:scale(1.02)}
#mx-unis .ux-media:before {content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(270deg,rgba(6,35,70,.62) 0%,rgba(6,35,70,.25) 34%,rgba(6,35,70,0) 58%)}
#mx-unis .ux-brand {position:absolute; z-index:2; top:50%; right:56px; transform:translateY(-50%); max-width:240px; color:#fff}
#mx-unis .ux-brand b {display:block; font:400 40px/1 var(--serif); letter-spacing:.02em}
#mx-unis .ux-brand span {display:block; margin-top:10px; font:600 9.5px/1.7 var(--sans); letter-spacing:.22em; text-transform:uppercase; color:rgba(255,255,255,.92)}
#mx-unis .ux-brand:after {content:""; display:block; width:30px; height:2px; margin-top:12px; background:var(--gold-2)}
#mx-unis .ux-info {position:relative; order:1; overflow:hidden; display:flex; align-items:flex-start; padding:26px 50px 24px var(--edge); background:linear-gradient(90deg,var(--ivory),#FCFAF5)}
#mx-unis .ux-row-art {position:absolute; left:-46px; bottom:-10px; width:220px; color:#C9B184; opacity:.22; pointer-events:none}
#mx-unis .ux-no {position:relative; flex:none; width:52px; padding-top:22px; font:400 20px/1 var(--serif); color:var(--gold)}
#mx-unis .ux-body {position:relative; flex:1; min-width:0; max-width:470px; padding-left:38px; border-left:1px solid var(--line)}
#mx-unis .ux-body:before {content:""; position:absolute; left:-8px; top:30px; width:16px; height:1px; background:var(--gold)}
#mx-unis .ux-city {margin-bottom:4px!important; font:600 10px/1.4 var(--sans)!important; letter-spacing:.2em; text-transform:uppercase; color:var(--ink)!important}
#mx-unis .ux-row h3 {font-size:25px; line-height:1.12; margin-bottom:8px}
#mx-unis .ux-row h3 span {display:block}
#mx-unis .ux-desc {font-size:13px!important; line-height:1.5!important; color:#5b6a7e!important}
#mx-unis .ux-tags {display:flex; flex-wrap:wrap; gap:8px; margin-top:12px}
#mx-unis .ux-tags li {padding:5px 10px; border-radius:3px; background:#E9EEF5; font:500 11.5px/1.2 var(--sans); color:var(--ink)}
#mx-unis .ux-tags .ux-more {background:transparent; border:1px solid var(--line); color:var(--muted)}
#mx-unis .ux-links {display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:14px}
#mx-unis .ux-links a {display:inline-flex; align-items:center; gap:8px; min-height:32px; font:600 12.5px/1 var(--sans); color:var(--ink)!important; text-decoration:none!important; border-bottom:1px solid transparent; transition:border-color .2s}
#mx-unis .ux-links a:hover {border-bottom-color:var(--gold)}
#mx-unis .ux-links a:hover .ux-arrow {transform:translateX(3px)}
#mx-unis .ux-links .ux-arrow {color:var(--gold-text)}
/* alternate by visible position: image left, text right */
#mx-unis .ux-row:nth-child(even of .ux-row:not([hidden])) .ux-media {order:1}
#mx-unis .ux-row:nth-child(even of .ux-row:not([hidden])) .ux-info {order:2; padding:26px var(--edge) 24px 40px; background:linear-gradient(270deg,var(--ivory),#FCFAF5)}
#mx-unis .ux-row:nth-child(even of .ux-row:not([hidden])) .ux-media:before {background:linear-gradient(90deg,rgba(6,35,70,.62) 0%,rgba(6,35,70,.25) 34%,rgba(6,35,70,0) 58%)}
#mx-unis .ux-row:nth-child(even of .ux-row:not([hidden])) .ux-brand {right:auto; left:var(--edge)}
#mx-unis .ux-row:nth-child(even of .ux-row:not([hidden])) .ux-row-art {left:auto; right:-46px}
#mx-unis .ux-tone-navy .ux-media:before,#mx-unis .ux-tone-navy:nth-child(n) .ux-media:before {background:linear-gradient(90deg,rgba(6,35,70,.82) 0%,rgba(6,35,70,.5) 45%,rgba(6,35,70,.18) 100%)}
#mx-unis .ux-empty {padding:56px 0 64px; text-align:center}
#mx-unis .ux-empty[hidden] {display:none}
#mx-unis .ux-empty > .ux-icon {width:34px; height:34px; margin:0 auto 14px; color:var(--gold)}
#mx-unis .ux-empty h3 {font-size:28px; margin-bottom:8px}
#mx-unis .ux-empty p {font-size:15px}
#mx-unis .ux-empty .ux-actions {justify-content:center}

/* ---------- how we help (220px) ---------- */
#mx-unis .ux-help {position:relative; background:#FDFCF9; padding:30px 0 32px; border-top:1px solid var(--line)}
#mx-unis .ux-help-head {display:grid; grid-template-columns:minmax(0,1fr) 360px; gap:40px; align-items:end; margin-bottom:26px}
#mx-unis .ux-help h2 {font-size:34px; line-height:1.05}
#mx-unis .ux-help-head > p {font-size:12.5px}
#mx-unis .ux-steps {display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:28px}
#mx-unis .ux-steps li {position:relative; display:grid; grid-template-columns:auto 48px minmax(0,1fr); gap:14px; align-items:start}
#mx-unis .ux-steps li + li:before {content:""; position:absolute; left:-22px; top:20px; width:8px; height:8px; border-top:1px solid var(--gold); border-right:1px solid var(--gold); transform:rotate(45deg)}
#mx-unis .ux-step-no {padding-top:16px; font:500 12px/1 var(--sans); color:var(--gold-text)}
#mx-unis .ux-ring {display:grid; place-items:center; width:48px; height:48px; border-radius:50%; border:1px solid rgba(200,155,77,.55); background:#fff; color:var(--ink)}
#mx-unis .ux-ring .ux-icon {width:20px; height:20px}
#mx-unis .ux-steps h3 {font:600 13px/1.3 var(--sans); letter-spacing:0; color:var(--ink); margin:2px 0 5px}
#mx-unis .ux-steps p {font-size:12px; line-height:1.5}

/* ---------- closing CTA (220px) ---------- */
#mx-unis .ux-cta {position:relative; isolation:isolate; overflow:hidden; min-height:220px; display:flex; align-items:center; background:var(--navy)}
#mx-unis .ux-cta-media {position:absolute; inset:0; z-index:-2}
#mx-unis .ux-cta-media img {width:100%; height:100%; object-fit:cover; object-position:center 60%}
#mx-unis .ux-cta:before {content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(6,35,70,.94) 0%,rgba(6,35,70,.84) 36%,rgba(6,35,70,.42) 66%,rgba(6,35,70,.15) 100%)}
#mx-unis .ux-cta-inner {padding-block:30px}
#mx-unis .ux-cta .ux-eyebrow {color:var(--gold-2)}
#mx-unis .ux-cta h2 {font-size:38px; line-height:1.1; color:#fff; margin-bottom:10px}
#mx-unis .ux-cta-inner > p:not(.ux-eyebrow) {max-width:580px; font-size:14px; color:#e0e7f1}
#mx-unis .ux-cta .ux-actions {margin-top:20px}
#mx-unis .ux-cta .ux-btn-gold {min-width:212px}
#mx-unis .ux-cta .ux-btn-ghost {min-width:166px}
#mx-unis .ux-cta-script {position:absolute; right:max(32px,calc(50vw - 600px)); top:34px; font-size:24px; color:#E9DCC3; transform:rotate(-12deg)}
#mx-unis .ux-cta-script span:nth-child(2) {padding-left:16px}
#mx-unis .ux-cta-script span:nth-child(3) {padding-left:40px}

/* ---------- ≤1280: drop the decorative side strip ---------- */
@media (max-width:1280px) {
  #mx-unis .ux-side {display:none}
  #mx-unis .ux-hero-media {right:0}
  #mx-unis .ux-panel {right:40px}
  #mx-unis .ux-body {max-width:none}
}

/* ---------- ≤1100: tablets landscape ---------- */
@media (max-width:1100px) {
  #mx-unis p {font-size:14.5px}
  #mx-unis .ux-hero {min-height:470px}
  #mx-unis .ux-hero h1 {font-size:46px}
  #mx-unis .ux-hero-copy {max-width:390px}
  #mx-unis .ux-panel {top:auto; bottom:28px; right:24px; width:280px; padding:20px 22px 16px}
  #mx-unis .ux-panel li {font-size:13.5px; padding:8px 0}
  #mx-unis .ux-metrics {grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:20px}
  #mx-unis .ux-metrics li {justify-content:flex-start}
  #mx-unis .ux-metrics li:nth-child(odd) {border-left:0}
  #mx-unis .ux-search {grid-template-columns:minmax(0,1fr) 160px auto}
  #mx-unis .ux-search .ux-clear {grid-column:auto}
  #mx-unis .ux-dir-head {grid-template-columns:1fr; gap:12px}
  #mx-unis .ux-dir-side p {font-size:14.5px}
  #mx-unis .ux-row {min-height:260px}
  #mx-unis .ux-info,#mx-unis .ux-row:nth-child(even of .ux-row:not([hidden])) .ux-info {padding:28px 32px}
  #mx-unis .ux-row h3 {font-size:24px}
  #mx-unis .ux-desc {font-size:14px!important}
  #mx-unis .ux-tags li {font-size:12.5px}
  #mx-unis .ux-links a {font-size:13.5px; min-height:44px}
  #mx-unis .ux-brand {right:32px}
  #mx-unis .ux-row:nth-child(even of .ux-row:not([hidden])) .ux-brand {left:32px}
  #mx-unis .ux-help-head {grid-template-columns:1fr; gap:12px}
  #mx-unis .ux-steps {grid-template-columns:repeat(2,minmax(0,1fr)); gap:28px 36px}
  #mx-unis .ux-steps li + li:before {display:none}
  #mx-unis .ux-steps h3 {font-size:15px}
  #mx-unis .ux-steps p {font-size:14px}
  #mx-unis .ux-cta-script {display:none}
}

/* ---------- ≤900: stacked hero and rows (image above text) ---------- */
@media (max-width:900px) {
  #mx-unis .ux-wrap,#mx-unis .ux-hero-inner,#mx-unis .ux-band-inner {width:calc(100% - 48px)}
  #mx-unis .ux-hero {flex-direction:column; align-items:stretch; min-height:0}
  #mx-unis .ux-hero-inner {order:1; padding-block:40px 32px}
  #mx-unis .ux-hero-copy {max-width:560px}
  #mx-unis .ux-hero-media {order:2; position:relative; left:auto; right:auto; width:100%; aspect-ratio:16/10; z-index:0}
  #mx-unis .ux-hero-media:before {background:linear-gradient(180deg,var(--ivory) 0%,rgba(251,248,241,0) 22%)}
  #mx-unis .ux-hero .ux-script {top:10%; left:auto; right:8%; font-size:30px}
  #mx-unis .ux-panel {order:3; position:relative; top:auto; bottom:auto; right:auto; width:calc(100% - 48px); margin:-56px auto 32px}
  #mx-unis .ux-panel ul {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); column-gap:24px}
  #mx-unis .ux-panel li + li {border-top:0}
  #mx-unis .ux-panel li:nth-child(n+3) {border-top:1px solid var(--line)}
  #mx-unis .ux-btn {min-height:48px; font-size:14.5px}
  #mx-unis .ux-row,#mx-unis .ux-row:nth-child(n) {grid-template-columns:1fr; min-height:0}
  #mx-unis .ux-row .ux-media,#mx-unis .ux-row:nth-child(even of .ux-row:not([hidden])) .ux-media {order:1; aspect-ratio:16/8}
  #mx-unis .ux-row .ux-info,#mx-unis .ux-row:nth-child(even of .ux-row:not([hidden])) .ux-info {order:2; padding:28px 24px 32px}
  #mx-unis .ux-row .ux-media:before,#mx-unis .ux-row:nth-child(even of .ux-row:not([hidden])) .ux-media:before {background:linear-gradient(90deg,rgba(6,35,70,.66) 0%,rgba(6,35,70,.28) 40%,rgba(6,35,70,0) 70%)}
  #mx-unis .ux-row .ux-brand,#mx-unis .ux-row:nth-child(even of .ux-row:not([hidden])) .ux-brand {right:auto; left:24px}
  #mx-unis .ux-row-art {display:none}
  #mx-unis .ux-row + .ux-row {border-top:0}
  #mx-unis .ux-cta:before {background:linear-gradient(90deg,rgba(6,35,70,.92),rgba(6,35,70,.65))}
}

/* ---------- ≤600: phones ---------- */
@media (max-width:600px) {
  #mx-unis .ux-campus-controls button {width:44px; height:44px}
  #mx-unis .ux-wrap,#mx-unis .ux-hero-inner,#mx-unis .ux-band-inner {width:calc(100% - 40px)}
  #mx-unis p {font-size:15.5px}
  #mx-unis .ux-eyebrow {font-size:11.5px; letter-spacing:.16em}
  #mx-unis .ux-hero-inner {padding-block:32px 28px}
  #mx-unis .ux-hero h1 {font-size:clamp(38px,10.6vw,46px); line-height:1.04; margin-bottom:16px}
  #mx-unis .ux-hero h1 span {display:inline}
  #mx-unis .ux-lead {font-size:16px!important; line-height:1.6!important}
  #mx-unis .ux-actions {flex-direction:column; align-items:stretch; gap:12px}
  #mx-unis .ux-btn {min-height:52px; font-size:15px}
  #mx-unis .ux-tagline {white-space:normal; flex-wrap:wrap; font-size:10.5px!important; line-height:1.8!important}
  #mx-unis .ux-tagline:after {display:none}
  #mx-unis .ux-hero-media {aspect-ratio:4/3.2}
  #mx-unis .ux-hero .ux-script {font-size:24px; top:6%; right:6%}
  #mx-unis .ux-panel {width:calc(100% - 40px); margin:-44px auto 28px; padding:20px 18px 12px}
  #mx-unis .ux-panel ul {grid-template-columns:1fr}
  #mx-unis .ux-panel li:nth-child(n+2) {border-top:1px solid var(--line)}
  #mx-unis .ux-panel li {font-size:15px; padding:11px 0}
  #mx-unis .ux-panel-sub {margin-left:0!important; font-size:15px!important}
  #mx-unis .ux-panel-eyebrow {font-size:11.5px!important}
  #mx-unis .ux-band-inner {padding-block:28px}
  #mx-unis .ux-metrics {gap:20px 0; margin-bottom:24px}
  #mx-unis .ux-metrics li {flex-direction:column; align-items:flex-start; gap:10px; padding:0 12px 0 16px}
  #mx-unis .ux-metrics li:nth-child(odd) {padding-left:0}
  #mx-unis .ux-metrics .ux-icon {width:30px; height:30px}
  #mx-unis .ux-metrics strong {font-size:24px}
  #mx-unis .ux-metrics span {font-size:13.5px}
  #mx-unis .ux-search {grid-template-columns:1fr; gap:10px}
  #mx-unis .ux-search :is(input,select) {min-height:52px; font-size:16px}
  #mx-unis .ux-q {top:16px}
  #mx-unis .ux-search .ux-btn,#mx-unis .ux-clear {min-height:52px; width:100%}
  #mx-unis .ux-dir-head {padding-block:40px 24px}
  #mx-unis .ux-dir-head h2,#mx-unis .ux-help h2 {font-size:clamp(30px,8.2vw,34px)}
  #mx-unis .ux-dir-side p {font-size:15.5px}
  #mx-unis .ux-count {font-size:12px!important}
  #mx-unis .ux-row .ux-media,#mx-unis .ux-row:nth-child(even of .ux-row:not([hidden])) .ux-media {aspect-ratio:16/10}
  #mx-unis .ux-brand b {font-size:34px}
  #mx-unis .ux-brand span {font-size:10.5px}
  #mx-unis .ux-row .ux-info,#mx-unis .ux-row:nth-child(even of .ux-row:not([hidden])) .ux-info {padding:24px 20px 32px}
  #mx-unis .ux-no {width:40px; font-size:18px; padding-top:20px}
  #mx-unis .ux-body {padding-left:20px}
  #mx-unis .ux-city {font-size:11.5px!important}
  #mx-unis .ux-row h3 {font-size:25px}
  #mx-unis .ux-desc {font-size:15.5px!important; line-height:1.6!important}
  #mx-unis .ux-tags li {font-size:13px; padding:7px 11px}
  #mx-unis .ux-links {flex-direction:column; gap:0; margin-top:12px}
  #mx-unis .ux-links a {font-size:15px; min-height:44px}
  #mx-unis .ux-help {padding:44px 0 48px}
  #mx-unis .ux-help-head {margin-bottom:28px}
  #mx-unis .ux-steps {grid-template-columns:1fr; gap:0}
  #mx-unis .ux-steps li {grid-template-columns:48px minmax(0,1fr); gap:16px; padding-bottom:26px}
  #mx-unis .ux-steps li:not(:last-child):after {content:""; position:absolute; left:24px; top:56px; bottom:6px; border-left:1px solid rgba(200,155,77,.5)}
  #mx-unis .ux-step-no {position:absolute; left:58px; top:-2px; padding:0; font-size:12.5px}
  #mx-unis .ux-steps li > div {padding-top:16px}
  #mx-unis .ux-steps h3 {font-size:16px}
  #mx-unis .ux-steps p {font-size:15px}
  #mx-unis .ux-cta {min-height:0}
  #mx-unis .ux-cta-inner {padding-block:52px}
  #mx-unis .ux-cta h2 {font-size:clamp(32px,8.8vw,36px)}
  #mx-unis .ux-cta-inner > p:not(.ux-eyebrow) {font-size:15.5px}
  #mx-unis .ux-cta:before {background:linear-gradient(180deg,rgba(6,35,70,.86),rgba(6,35,70,.72))}
  #mx-unis .ux-cta-media img {object-position:62% center}
  #mx-unis .ux-cta .ux-btn-gold,#mx-unis .ux-cta .ux-btn-ghost {min-width:0}
}

@media (prefers-reduced-motion:reduce) {
  #mx-unis *,#mx-unis *:before,#mx-unis *:after {transition:none!important}
}

/* ---------- pass 2: reference proportions ---------- */
#mx-unis .ux-hero-copy {max-width:470px}
#mx-unis .ux-lead {max-width:430px}
#mx-unis .ux-actions {gap:14px}
#mx-unis .ux-info {padding:22px 36px 20px var(--edge)}
#mx-unis .ux-row:nth-child(even of .ux-row:not([hidden])) .ux-info {padding:22px var(--edge) 20px 40px}
#mx-unis .ux-no {width:48px}
#mx-unis .ux-body {padding-left:32px; max-width:500px}
#mx-unis .ux-row h3 {font-size:24px; margin-bottom:6px}
#mx-unis .ux-desc {font-size:12.5px!important; line-height:1.45!important}
#mx-unis .ux-tags {gap:6px; margin-top:10px}
#mx-unis .ux-tags li {padding:4px 9px; font-size:11px}
#mx-unis .ux-links {margin-top:10px}
#mx-unis .ux-links a {min-height:28px}
@media (max-width:1100px) {
  #mx-unis .ux-desc {font-size:14px!important; line-height:1.55!important}
  #mx-unis .ux-tags li {font-size:12.5px; padding:5px 10px}
  #mx-unis .ux-links a {min-height:44px}
}
#mx-unis .ux-hero-inner {padding-block:34px 24px}
#mx-unis .ux-help {padding:26px 0 28px}
#mx-unis .ux-help-head {margin-bottom:20px}
#mx-unis .ux-cta-inner {padding-block:26px}
#mx-unis .ux-cta h2 {font-size:36px}
@media (max-width:600px) {
  #mx-unis .ux-hero-inner {padding-block:32px 28px}
  #mx-unis .ux-help {padding:44px 0 48px}
  #mx-unis .ux-help-head {margin-bottom:28px}
  #mx-unis .ux-cta-inner {padding-block:52px}
  #mx-unis .ux-cta h2 {font-size:clamp(32px,8.8vw,36px)}
}
/* photos whose free side is on the left keep the name overlay there, whichever side of the row they sit on */
#mx-unis .ux-row.ux-brand-at-left .ux-brand {left:56px; right:auto}
#mx-unis .ux-row.ux-brand-at-left .ux-media:before {background:linear-gradient(90deg,rgba(6,35,70,.62) 0%,rgba(6,35,70,.25) 34%,rgba(6,35,70,0) 58%)}
#mx-unis .ux-row.ux-tone-navy.ux-brand-at-left .ux-media:before {background:linear-gradient(90deg,rgba(6,35,70,.82) 0%,rgba(6,35,70,.5) 45%,rgba(6,35,70,.18) 100%)}
@media (max-width:1100px) {#mx-unis .ux-row.ux-brand-at-left .ux-brand {left:32px}}
@media (max-width:900px) {#mx-unis .ux-row.ux-brand-at-left .ux-brand {left:24px}}
/* overlay legibility on bright photos */
#mx-unis .ux-brand {text-shadow:0 1px 2px rgba(6,35,70,.45),0 2px 16px rgba(6,35,70,.35)}
#mx-unis .ux-media:before {background:linear-gradient(270deg,rgba(6,35,70,.74) 0%,rgba(6,35,70,.46) 40%,rgba(6,35,70,0) 72%)}
#mx-unis .ux-row:nth-child(even of .ux-row:not([hidden])) .ux-media:before,#mx-unis .ux-row.ux-brand-at-left .ux-media:before {background:linear-gradient(90deg,rgba(6,35,70,.74) 0%,rgba(6,35,70,.46) 40%,rgba(6,35,70,0) 72%)}
#mx-unis .ux-row.ux-tone-navy .ux-media:before,#mx-unis .ux-row.ux-tone-navy.ux-brand-at-left .ux-media:before {background:linear-gradient(90deg,rgba(6,35,70,.84) 0%,rgba(6,35,70,.55) 45%,rgba(6,35,70,.2) 100%)}
@media (max-width:900px) {
  #mx-unis .ux-row .ux-media:before,#mx-unis .ux-row:nth-child(n) .ux-media:before {background:linear-gradient(90deg,rgba(6,35,70,.76) 0%,rgba(6,35,70,.45) 42%,rgba(6,35,70,0) 75%)}
}

/* Auto-scrolling partner logo strip under the hero (four identical sets; translating by one set loops seamlessly). */
.ux-marquee{--ux-mq-gap:56px;display:flex;overflow:hidden;background:#fff;border-block:1px solid #e8ecf2;padding:22px 0;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.ux-marquee-set{display:flex;flex:none;gap:0;padding:0;margin:0;list-style:none;animation:ux-marquee 28s linear infinite}
.ux-marquee:hover .ux-marquee-set,.ux-marquee:focus-within .ux-marquee-set{animation-play-state:paused}
.ux-marquee a{display:flex;align-items:center;gap:14px;text-decoration:none!important;color:#082E5B;border-radius:10px;padding:4px 6px}
.ux-marquee a:focus-visible{outline:3px solid #2f69ca;outline-offset:2px}
.ux-marquee img{display:block;width:auto;height:42px;max-width:110px;object-fit:contain}
.ux-marquee span{font:600 11px/1.3 var(--font-sans);letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;color:#4d5d73}
.ux-marquee-set>li{flex:none;margin:0 var(--ux-mq-gap) 0 0}
@keyframes ux-marquee{to{transform:translateX(-100%)}}
@media (max-width:640px){.ux-marquee{--ux-mq-gap:36px;padding:16px 0}.ux-marquee img{height:36px}.ux-marquee span{font-size:10px}.ux-marquee-set{animation-duration:22s}}
@media (prefers-reduced-motion:reduce){.ux-marquee{flex-wrap:wrap;justify-content:center;-webkit-mask-image:none;mask-image:none}.ux-marquee-set>li{margin:0}.ux-marquee-set{animation:none;flex-wrap:wrap;justify-content:center;gap:20px 36px;padding:0 16px}.ux-marquee-set[aria-hidden]{display:none}}