/* Success Stories page — approved editorial design (October 2026), same tokens as the homepage (home.css). Loaded last on /successstories only. Every rule is scoped with #mx-stories because editorial.css and approved-pages.css style headings and the legacy page at high specificity. */ #mx-stories { --ivory:#FCF9F3; --ivory-2:#F7F3EA; --cream:#F2E7D8; --navy:#062B55; --navy-2:#082F5C; --blue:#174A85; --ink:#0C315E; --muted:#687485; --gold:#C69A4B; --gold-2:#D2AC63; --gold-text:#9A7034; --line:#E6E8EB; --line-warm:rgba(12,49,94,.1); --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-stories *,#mx-stories *:before,#mx-stories *:after {box-sizing:border-box} #mx-stories .sx-wrap {width:min(100% - 64px,1224px); margin-inline:auto} #mx-stories ul {list-style:none; margin:0; padding:0} #mx-stories img {display:block; max-width:100%} #mx-stories :is(h1,h2,h3) {font-family:var(--serif); font-weight:400; letter-spacing:-.01em; color:var(--ink); margin:0; text-wrap:balance} #mx-stories h2 span {display:block} #mx-stories p {margin:0; font-size:14px; line-height:1.6; color:var(--muted)} #mx-stories .sx-eyebrow {margin:0 0 12px; font:600 11px/1.4 var(--sans); letter-spacing:.18em; text-transform:uppercase; color:var(--ink)} #mx-stories .sx-icon {width:26px; height:26px; flex:none; stroke-width:1.4} #mx-stories .sx-arrow {width:15px; height:15px; flex:none; transition:transform .2s} #mx-stories .sx-script {margin:0; font:400 30px/1.08 var(--script); color:var(--ink); pointer-events:none} #mx-stories .sx-script span {display:block} #mx-stories :is(a,button,[tabindex]):focus-visible {outline:2px solid var(--blue); outline-offset:3px} /* ---------- buttons (same family as the homepage) ---------- */ #mx-stories .sx-actions {display:flex; flex-wrap:wrap; gap:16px; margin-top:26px} #mx-stories .sx-btn {display:inline-flex; align-items:center; justify-content:center; gap:10px; min-height:46px; padding:0 24px; border-radius:3px; border:1px solid transparent; font:600 13.5px/1 var(--sans); text-decoration:none!important; white-space:nowrap; transition:background-color .2s,color .2s,border-color .2s,filter .2s} #mx-stories .sx-btn:hover .sx-arrow {transform:translateX(3px)} #mx-stories .sx-btn-navy {background:var(--navy); color:#fff!important} #mx-stories .sx-btn-navy:hover {background:var(--blue)} #mx-stories .sx-btn-light {background:#fff; border-color:var(--line); color:var(--ink)!important} #mx-stories .sx-btn-light:hover {border-color:var(--ink)} #mx-stories .sx-btn-gold {background:linear-gradient(180deg,#E3C27F,#D5AE63); color:var(--navy)!important} #mx-stories .sx-btn-gold:hover {filter:brightness(1.05)} #mx-stories .sx-btn-ghost {background:rgba(6,43,85,.2); border-color:rgba(255,255,255,.8); color:#fff!important} #mx-stories .sx-btn-ghost:hover {background:rgba(255,255,255,.12)} #mx-stories .sx-play {display:grid; place-items:center; width:22px; height:22px; border-radius:50%; background:var(--navy); color:#fff} #mx-stories .sx-play svg {width:12px; height:12px} #mx-stories .sx-round-btn {display:grid; place-items:center; width:48px; height:48px; border-radius:50%; border:1px solid var(--line); background:#fff; color:var(--ink); cursor:pointer; box-shadow:0 2px 10px rgba(6,43,85,.06); transition:border-color .2s} #mx-stories .sx-round-btn:hover:not(:disabled) {border-color:var(--ink)} #mx-stories .sx-round-btn:disabled {opacity:.4; cursor:default} #mx-stories .sx-round-btn svg {width:18px; height:18px} #mx-stories .sx-round-sm {width:44px; height:44px} /* ---------- hero (540px at 1440) ---------- */ #mx-stories .sx-hero {position:relative; margin-top:var(--mb-h); min-height:540px; display:flex; align-items:center; isolation:isolate; background:var(--ivory)} #mx-stories .sx-hero-media {position:absolute; top:0; right:0; bottom:0; width:60%; z-index:-1; margin:0} #mx-stories .sx-hero-media img {width:100%; height:100%; object-fit:cover; object-position:30% 50%} #mx-stories .sx-hero-media:before {content:""; position:absolute; inset:0; z-index:1; background:linear-gradient(90deg,var(--ivory) 0%,rgba(252,249,243,.82) 8%,rgba(252,249,243,.3) 18%,rgba(252,249,243,0) 30%)} #mx-stories .sx-hero-script {position:absolute; z-index:2; top:60px; left:43%; transform:rotate(-14deg); transform-origin:left top; text-shadow:0 0 2px #fff,0 0 12px rgba(255,255,255,.9),0 0 22px rgba(255,255,255,.7)} #mx-stories .sx-hero-script span:nth-child(2) {padding-left:14px} #mx-stories .sx-hero-script span:nth-child(3) {padding-left:26px} #mx-stories .sx-hero-script span:nth-child(4) {padding-left:60px; color:var(--gold-text)} #mx-stories .sx-hero-caption {position:absolute; z-index:2; top:170px; right:44px; margin:0; font:600 10px/2 var(--sans)!important; letter-spacing:.2em; text-transform:uppercase; color:#fff!important; text-shadow:0 1px 8px rgba(6,43,85,.55)} #mx-stories .sx-hero-inner {width:min(100% - 64px,1130px); padding-block:56px 40px} #mx-stories .sx-hero-copy {max-width:480px} #mx-stories .sx-eyebrow-rule {display:flex; align-items:center; gap:12px} #mx-stories .sx-eyebrow-rule:before {content:""; width:2px; height:12px; background:var(--gold)} #mx-stories .sx-hero h1 {font-size:62px; line-height:1.04; letter-spacing:-.02em; margin:6px 0 20px} #mx-stories .sx-hero h1 span {display:block} #mx-stories .sx-gold {color:var(--gold-text); background:linear-gradient(100deg,#7F5B28 0%,#A9803F 45%,#C29A5C 75%,#A27A3D 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent} #mx-stories .sx-lead {max-width:465px; font-size:15px!important; line-height:1.6!important; color:#3b4b60!important} #mx-stories .sx-trust {display:flex; align-items:center; gap:18px; margin-top:24px} #mx-stories .sx-avatars {display:flex} #mx-stories .sx-avatars img {width:38px; height:38px; border-radius:50%; object-fit:cover; object-position:center 20%; border:2px solid var(--ivory); margin-left:-8px} #mx-stories .sx-avatars img:first-child {margin-left:0} #mx-stories .sx-trust p {font-size:12.5px; line-height:1.45; color:#4b5c72} #mx-stories .sx-trust strong {color:var(--ink); font-weight:600} #mx-stories .sx-hero-panel {position:absolute; right:max(32px,calc((100% - 1400px) / 2 + 58px)); bottom:84px; z-index:2; display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:24px 22px; width:376px; padding:24px 26px; background:rgba(255,255,255,.94); border:1px solid rgba(255,255,255,.85); border-radius:4px; box-shadow:0 8px 24px rgba(6,43,85,.12)} #mx-stories .sx-hero-panel li {display:flex; align-items:flex-start; gap:12px; color:var(--gold)} #mx-stories .sx-hero-panel span {display:flex; flex-direction:column; gap:4px; font-size:11px; line-height:1.3; color:var(--muted)} #mx-stories .sx-hero-panel strong {font:600 15px/1.1 var(--sans); color:var(--ink)} /* ---------- stats strip (130px) ---------- */ #mx-stories .sx-stats {background:#fff; border-top:1px solid var(--line-warm); border-bottom:1px solid var(--line-warm)} #mx-stories .sx-stats-inner {display:flex; align-items:center; min-height:130px; width:min(100% - 64px,1264px)} #mx-stories .sx-stats-label {flex:none; width:212px; padding-left:14px; border-left:2px solid var(--gold); font:700 17px/1.2 var(--sans)!important; letter-spacing:.06em; text-transform:uppercase; color:var(--ink)!important} #mx-stories .sx-stats-label span {display:block; margin-bottom:4px; font-size:10.5px; font-weight:500; letter-spacing:.14em; color:var(--muted)} #mx-stories .sx-stats-list {flex:1; display:grid; grid-template-columns:repeat(4,minmax(0,1fr))} #mx-stories .sx-stats-list li {display:flex; align-items:center; justify-content:center; gap:18px; border-left:1px solid var(--line)} #mx-stories .sx-stats-list .sx-icon {width:38px; height:38px; color:var(--ink); stroke-width:1.2} #mx-stories .sx-stats-list span {display:flex; flex-direction:column; gap:4px; font-size:14px; color:var(--muted)} #mx-stories .sx-stats-list strong {font:600 22px/1 var(--sans); color:var(--ink)} /* ---------- featured story ---------- */ #mx-stories .sx-featured {position:relative; overflow:hidden; background:linear-gradient(180deg,#F8F4EC,#F4EFE5); padding:52px 0} #mx-stories .sx-featured-art {position:absolute; right:-30px; bottom:40px; width:320px; color:#C9B184; opacity:.35; pointer-events:none} #mx-stories .sx-featured-inner {position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,600px) minmax(0,1fr); gap:56px; align-items:center; width:min(100% - 64px,1260px)} #mx-stories .sx-featured-media {display:flex; align-items:center; justify-content:center; gap:28px} #mx-stories .sx-featured-stage {display:grid; width:min(100%,360px)} #mx-stories .sx-featured-poster {grid-area:1/1; display:block; width:100%; padding:0; border:0; background:#fff; border-radius:3px; overflow:hidden; cursor:zoom-in; box-shadow:0 14px 34px rgba(6,43,85,.16); opacity:0; transition:opacity .45s ease} #mx-stories .sx-featured-poster.is-active {opacity:1} #mx-stories .sx-featured-poster[hidden] {display:none} #mx-stories .sx-featured-poster img {width:100%; height:auto; aspect-ratio:2/3; object-fit:cover} #mx-stories .sx-featured-copy {max-width:560px} #mx-stories .sx-featured h2 {font-size:52px; line-height:1.05; margin-bottom:14px} #mx-stories .sx-featured h2 em {font-style:normal; color:var(--gold-text)} #mx-stories .sx-featured-meta {margin-bottom:10px!important; font:600 12px/1.4 var(--sans)!important; letter-spacing:.12em; text-transform:uppercase; color:var(--gold-text)!important} #mx-stories .sx-featured-copy > p:not(.sx-eyebrow):not(.sx-featured-meta) {font-size:15.5px; line-height:1.6; color:#4b5b70} #mx-stories .sx-note {position:relative; margin:24px 0 22px; padding:22px 26px 20px 30px; background:#fff; border-radius:4px; box-shadow:0 2px 14px rgba(6,43,85,.05)} #mx-stories .sx-note:before {content:"“"; position:absolute; left:-12px; top:-26px; font:400 72px/1 var(--serif); color:var(--gold)} #mx-stories .sx-note p {font-size:15px; line-height:1.6; color:#4b5b70} #mx-stories .sx-note footer {margin-top:10px; font:600 13px/1.4 var(--sans); color:var(--ink)} #mx-stories .sx-checks {display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px 20px} #mx-stories .sx-checks li {display:flex; align-items:center; gap:10px; font-size:13.5px; color:var(--ink)} #mx-stories .sx-check {width:17px; height:17px; flex:none; color:var(--gold)} #mx-stories .sx-featured-nav {display:flex; align-items:center; gap:10px; margin-top:26px} #mx-stories .sx-counter {margin-left:12px!important; font:600 14px/1 var(--sans)!important; color:var(--ink)!important} #mx-stories .sx-counter span {color:var(--gold-text)} /* ---------- gallery ---------- */ #mx-stories .sx-gallery {padding:60px 0 64px; background:var(--ivory)} #mx-stories .sx-gallery-head {display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:30px} #mx-stories .sx-gallery h2 {font-size:42px; line-height:1.1; margin-bottom:8px} #mx-stories .sx-gallery-head p {font-size:15px} #mx-stories .sx-count {flex:none; padding:10px 16px; border:1px solid var(--line); border-radius:3px; background:#fff; font:600 12.5px/1 var(--sans)!important; color:var(--ink)!important} #mx-stories .sx-grid {display:grid; grid-template-columns:repeat(var(--sx-cols,4),minmax(0,1fr)); gap:30px 24px; align-items:start} #mx-stories .sx-tile {min-width:0} #mx-stories .sx-poster {position:relative; display:block; width:100%; padding:0; border:0; border-radius:3px; overflow:hidden; background:#fff; cursor:zoom-in; box-shadow:0 6px 18px rgba(6,43,85,.1); transition:transform .25s ease,box-shadow .25s ease} #mx-stories .sx-poster:hover {transform:translateY(-3px); box-shadow:0 12px 26px rgba(6,43,85,.14)} #mx-stories .sx-poster img {width:100%; height:auto; aspect-ratio:2/3; object-fit:cover} #mx-stories .sx-zoom {position:absolute; right:10px; top:10px; display:grid; place-items:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.94); color:var(--ink); opacity:0; transition:opacity .2s} #mx-stories .sx-zoom svg {width:16px; height:16px} #mx-stories .sx-poster:hover .sx-zoom,#mx-stories .sx-poster:focus-visible .sx-zoom {opacity:1} #mx-stories .sx-tile-meta {padding-top:14px} #mx-stories .sx-tile-meta h3 {font:600 15px/1.35 var(--sans); letter-spacing:0; color:var(--ink)} #mx-stories .sx-tile-meta p {margin-top:2px!important; font-size:13px} #mx-stories .sx-tag {display:inline-block; margin-top:10px; padding:6px 10px; border-radius:3px; background:#EEF1F5; font:600 11.5px/1 var(--sans); color:var(--ink)} #mx-stories .sx-next {grid-column:span var(--sx-span,2); position:relative; isolation:isolate; overflow:hidden; align-self:stretch; display:flex; align-items:flex-end; min-height:340px; border-radius:4px; background:var(--navy)} #mx-stories .sx-next img {position:absolute; inset:0; z-index:-2; width:100%; height:100%; object-fit:cover; object-position:60% 40%} #mx-stories .sx-next:before {content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(6,35,70,.9) 0%,rgba(6,35,70,.7) 45%,rgba(6,35,70,.15) 100%)} #mx-stories .sx-next > div {padding:36px 34px} #mx-stories .sx-next h2 {font-size:40px; line-height:1.08; color:#fff; margin-bottom:12px} #mx-stories .sx-next h2 span {color:var(--gold-2)} #mx-stories .sx-next p {max-width:300px; font-size:14.5px; color:#e3e9f1; margin-bottom:20px} /* ---------- admitted students: same compact card as the homepage preview (home-success-stories.css) ---------- */ #mx-stories .sx-students {padding:60px 0 8px; background:var(--ivory)} #mx-stories .sx-students h2 {font-size:42px; line-height:1.1; margin-bottom:8px} #mx-stories .sx-students .sx-gallery-head p:not(.sx-eyebrow) {font-size:15px} #mx-stories .sx-students-grid {display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px} #mx-stories .mx-student {min-width:0; padding:8px 10px 16px; border:1px solid rgba(196,154,86,.2); border-radius:7px; background:#fffefa; box-shadow:0 3px 12px rgba(6,39,77,.035); transition:transform .2s,box-shadow .2s} #mx-stories .mx-student:hover {transform:translateY(-2px); box-shadow:0 5px 16px rgba(6,39,77,.065)} #mx-stories .mx-student-cover {position:relative; height:112px; border-radius:4px; overflow:hidden; background:var(--ivory)} #mx-stories .mx-student-campus {width:100%; height:100%; object-fit:cover; object-position:65% center} #mx-stories .mx-student-cover:after {content:""; position:absolute; inset:0; background:linear-gradient(90deg,#fffefa 0%,rgba(255,254,250,.7) 22%,transparent 65%); pointer-events:none} #mx-stories .mx-student-photo {position:absolute; z-index:1; top:14px; left:7px; display:grid; place-items:center; width:94px; height:94px; border:2px solid #fff; border-radius:50%; overflow:hidden; background:#fff; color:#9AA8BA} #mx-stories .mx-student-photo img {width:100%; height:100%; max-width:none; object-fit:cover; object-position:center 22%; transition:transform .2s} #mx-stories .mx-student:hover .mx-student-photo img {transform:scale(1.02)} #mx-stories .mx-student-photo svg {width:40px; height:40px} #mx-stories .mx-student h3 {margin:10px 8px 8px; font:400 19px/1.2 var(--serif); color:var(--navy)} #mx-stories .mx-student-study {display:flex; align-items:flex-start; gap:8px; margin-inline:8px; min-width:0} #mx-stories .mx-student-degree-icon {display:grid; place-items:center; flex:none; width:24px; height:24px; background:#f8efdf; border-radius:50%; color:var(--ink)} #mx-stories .mx-student-degree-icon svg {width:17px; height:17px} #mx-stories .mx-student-study p {min-width:0; font:400 11px/1.45 var(--sans)!important; color:var(--navy)!important} #mx-stories .mx-student-degree,#mx-stories .mx-student-university {display:block} #mx-stories .mx-student-university {margin-top:2px; font-size:9px; letter-spacing:.06em; text-transform:uppercase; color:var(--muted)} #mx-stories .mx-student-intake {display:flex; align-items:center; gap:10px; margin:14px 8px 0!important; font:500 9px/1.5 var(--sans)!important; letter-spacing:.1em; text-transform:uppercase; color:var(--gold-text)!important} #mx-stories .mx-student-intake svg {width:16px; height:16px; flex:none} /* ---------- testimonials ---------- */ #mx-stories .sx-feedback {position:relative; overflow:hidden; background:linear-gradient(180deg,#F6F1E7,#F8F4EC); padding:60px 0} #mx-stories .sx-feedback-art {position:absolute; left:-60px; bottom:20px; width:280px; color:#C9B184; opacity:.25; pointer-events:none} #mx-stories .sx-feedback-inner {position:relative; z-index:1; display:grid; grid-template-columns:minmax(0,300px) minmax(0,1fr); gap:48px; align-items:center; width:min(100% - 64px,1260px)} #mx-stories .sx-feedback h2 {font-size:44px; line-height:1.1; margin-bottom:16px} #mx-stories .sx-feedback-intro p:not(.sx-eyebrow) {font-size:14.5px; margin-bottom:24px} #mx-stories .sx-feedback-btns {display:flex; gap:10px} #mx-stories .sx-quotes {display:grid; grid-auto-flow:column; grid-auto-columns:calc((100% - 44px) / 3); gap:22px; overflow-x:auto; scroll-snap-type:x mandatory; scrollbar-width:none; padding:4px 2px 10px} #mx-stories .sx-quotes::-webkit-scrollbar {display:none} #mx-stories .sx-quote {scroll-snap-align:start; margin:0; display:flex; flex-direction:column; padding:26px 24px 22px; background:#fff; border-radius:4px; box-shadow:0 2px 14px rgba(6,43,85,.06)} #mx-stories .sx-quote-mark {font:400 46px/.6 var(--serif); color:var(--ink); height:22px} #mx-stories .sx-quote blockquote {margin:12px 0 22px; font-size:14.5px; line-height:1.65; color:#5b6a7e} #mx-stories .sx-quote figcaption {margin-top:auto; display:flex; align-items:center; gap:12px; font-size:12.5px; line-height:1.4; color:var(--muted)} #mx-stories .sx-quote figcaption img {width:46px; height:46px; border-radius:50%; object-fit:cover; object-position:center 20%} #mx-stories .sx-quote figcaption > span:first-of-type {flex:1; min-width:0} #mx-stories .sx-quote strong {display:block; font:600 14px/1.3 var(--sans); color:var(--ink)} #mx-stories .sx-stars {flex:none; font-weight:600; color:var(--ink); white-space:nowrap} #mx-stories .sx-stars span {color:#C08A2E; letter-spacing:2px; margin-right:6px} /* ---------- closing CTA ---------- */ #mx-stories .sx-cta {position:relative; isolation:isolate; overflow:hidden; min-height:270px; display:flex; align-items:center; background:var(--navy)} #mx-stories .sx-cta-media {position:absolute; inset:0; z-index:-2} #mx-stories .sx-cta-media img {width:100%; height:100%; object-fit:cover; object-position:center 55%} #mx-stories .sx-cta:before {content:""; position:absolute; inset:0; z-index:-1; background:linear-gradient(90deg,rgba(6,35,70,.92) 0%,rgba(6,35,70,.82) 38%,rgba(6,35,70,.42) 68%,rgba(6,35,70,.15) 100%)} #mx-stories .sx-cta-inner {padding-block:40px} #mx-stories .sx-cta .sx-eyebrow {color:var(--gold-2)} #mx-stories .sx-cta h2 {font-size:44px; line-height:1.1; color:#fff; margin-bottom:12px} #mx-stories .sx-cta-inner > p:not(.sx-eyebrow) {max-width:560px; font-size:15px; color:#e0e7f1} #mx-stories .sx-cta .sx-btn-gold {min-width:250px} #mx-stories .sx-cta .sx-btn-ghost {min-width:200px} /* ---------- lightbox (shared dialog, restyled) ---------- */ #mx-stories .sx-lightbox {max-width:min(92vw,620px); margin:auto} #mx-stories .sx-lightbox figure {border-radius:4px; background:#0B1E3A} #mx-stories .sx-lightbox img {max-height:82vh; background:#0B1E3A} #mx-stories .sx-lightbox figcaption {font:600 14px/1.4 var(--sans)} #mx-stories .sx-lightbox .mp-lb-btn {color:var(--ink)} /* ---------- ≤1280 ---------- */ @media (max-width:1280px) { #mx-stories .sx-hero-media {width:57%} #mx-stories .sx-hero-caption {display:none} #mx-stories .sx-hero-panel {width:340px; padding:20px 22px} #mx-stories .sx-featured-inner {grid-template-columns:minmax(0,500px) minmax(0,1fr); gap:40px} #mx-stories .sx-featured-stage {width:min(100%,330px)} #mx-stories .sx-featured-media {gap:18px} } /* ---------- ≤1100 ---------- */ @media (max-width:1100px) { #mx-stories p {font-size:15px} #mx-stories .sx-hero {min-height:500px} #mx-stories .sx-hero h1 {font-size:54px} #mx-stories .sx-hero-script {left:44%; font-size:26px} #mx-stories .sx-hero-panel {right:24px; bottom:28px; width:300px; gap:16px 14px; padding:18px} #mx-stories .sx-hero-panel strong {font-size:14px} #mx-stories .sx-hero-panel span {font-size:12px} #mx-stories .sx-stats-inner {flex-wrap:wrap; padding-block:24px; row-gap:18px} #mx-stories .sx-stats-label {width:100%} #mx-stories .sx-stats-list {flex-basis:100%} #mx-stories .sx-stats-list li:first-child {border-left:0; justify-content:flex-start} #mx-stories .sx-featured-inner {grid-template-columns:1fr; gap:36px; max-width:760px} #mx-stories .sx-featured-copy {max-width:none} #mx-stories .sx-grid {grid-template-columns:repeat(3,minmax(0,1fr))} #mx-stories .sx-students-grid {grid-template-columns:repeat(3,minmax(0,1fr))} #mx-stories .sx-next {grid-column:1/-1; min-height:300px} #mx-stories .sx-feedback-inner {grid-template-columns:1fr; gap:28px} #mx-stories .sx-feedback-intro {display:grid; grid-template-columns:minmax(0,1fr) auto; gap:0 32px; align-items:end} #mx-stories .sx-feedback-intro p:not(.sx-eyebrow) {margin-bottom:0} #mx-stories .sx-feedback-btns {grid-column:2; grid-row:1/4; align-self:end} #mx-stories .sx-quotes {grid-auto-columns:calc((100% - 22px) / 2)} #mx-stories .sx-tile-meta h3 {font-size:16px} #mx-stories .sx-tile-meta p,#mx-stories .sx-tag {font-size:13.5px} } /* ---------- ≤900: stacked hero ---------- */ @media (max-width:900px) { #mx-stories .sx-wrap,#mx-stories .sx-hero-inner,#mx-stories .sx-stats-inner,#mx-stories .sx-featured-inner,#mx-stories .sx-feedback-inner {width:calc(100% - 48px)} #mx-stories .sx-hero {flex-direction:column; align-items:stretch; min-height:0} #mx-stories .sx-hero-inner {order:1; padding-block:40px 32px} #mx-stories .sx-hero-copy {max-width:560px} #mx-stories .sx-lead {max-width:540px} #mx-stories .sx-hero-media {order:2; position:relative; width:100%; aspect-ratio:16/10; z-index:0} #mx-stories .sx-hero-media:before {background:linear-gradient(180deg,var(--ivory) 0%,rgba(252,249,243,0) 22%)} #mx-stories .sx-hero-script {top:12%; left:auto; right:6%} #mx-stories .sx-hero-panel {order:3; position:relative; right:auto; bottom:auto; width:calc(100% - 48px); margin:-60px auto 32px; grid-template-columns:repeat(4,minmax(0,1fr)); gap:16px; padding:20px} #mx-stories .sx-hero-panel li {flex-direction:column; gap:10px} #mx-stories .sx-btn {min-height:48px; font-size:14.5px} #mx-stories .sx-stats-list {grid-template-columns:repeat(2,minmax(0,1fr)); row-gap:18px} #mx-stories .sx-stats-list li,#mx-stories .sx-stats-list li:first-child {justify-content:flex-start; border-left:0; padding-left:0} #mx-stories .sx-stats-list li:nth-child(even) {border-left:1px solid var(--line); padding-left:24px} #mx-stories .sx-grid {grid-template-columns:repeat(2,minmax(0,1fr))} #mx-stories .sx-students-grid {grid-template-columns:repeat(2,minmax(0,1fr))} #mx-stories .sx-cta:before {background:linear-gradient(90deg,rgba(6,35,70,.92),rgba(6,35,70,.65))} } /* ---------- ≤600: phones ---------- */ @media (max-width:600px) { #mx-stories .sx-wrap,#mx-stories .sx-hero-inner,#mx-stories .sx-stats-inner,#mx-stories .sx-featured-inner,#mx-stories .sx-feedback-inner {width:calc(100% - 40px)} #mx-stories p {font-size:15.5px} #mx-stories .sx-eyebrow {font-size:11.5px; letter-spacing:.15em} #mx-stories .sx-hero-inner {padding-block:32px 28px} #mx-stories .sx-hero h1 {font-size:clamp(42px,12vw,50px); line-height:1.04; margin-bottom:16px} #mx-stories .sx-lead {font-size:16px!important} #mx-stories .sx-actions {flex-direction:column; align-items:stretch; gap:12px} #mx-stories .sx-btn {min-height:52px; font-size:15px} #mx-stories .sx-cta .sx-btn-gold,#mx-stories .sx-cta .sx-btn-ghost {min-width:0} #mx-stories .sx-trust p {font-size:14px} #mx-stories .sx-hero-media {aspect-ratio:4/3.3} #mx-stories .sx-hero-media img {object-position:40% 50%} #mx-stories .sx-hero-script {font-size:22px; top:10%; right:4%} #mx-stories .sx-hero-panel {width:calc(100% - 40px); margin:-48px auto 28px; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 12px; padding:18px 16px} #mx-stories .sx-hero-panel li {flex-direction:row; gap:10px} #mx-stories .sx-hero-panel .sx-icon {width:22px; height:22px} #mx-stories .sx-hero-panel span {font-size:12.5px} #mx-stories .sx-stats-inner {padding-block:22px} #mx-stories .sx-stats-label {font-size:15px!important} #mx-stories .sx-stats-list {gap:18px 0} #mx-stories .sx-stats-list li {gap:12px} #mx-stories .sx-stats-list li:nth-child(even) {padding-left:16px} #mx-stories .sx-stats-list .sx-icon {width:30px; height:30px} #mx-stories .sx-stats-list strong {font-size:20px} #mx-stories .sx-stats-list span {font-size:13px} #mx-stories .sx-featured {padding:44px 0 48px} #mx-stories .sx-featured-media {gap:0} #mx-stories .sx-featured-media > .sx-round-btn {display:none} #mx-stories .sx-featured-stage {width:min(100%,330px)} #mx-stories .sx-featured h2 {font-size:clamp(36px,10vw,42px)} #mx-stories .sx-featured-copy > p:not(.sx-eyebrow):not(.sx-featured-meta) {font-size:16px} #mx-stories .sx-note {padding:20px 20px 18px 24px} #mx-stories .sx-note:before {left:-6px} #mx-stories .sx-note p {font-size:15.5px} #mx-stories .sx-checks {grid-template-columns:1fr} #mx-stories .sx-checks li {font-size:15px} #mx-stories .sx-gallery {padding:48px 0 52px} #mx-stories .sx-gallery-head {flex-direction:column; align-items:flex-start; gap:14px} #mx-stories .sx-gallery h2 {font-size:34px} #mx-stories .sx-grid {grid-template-columns:1fr; gap:32px} #mx-stories .sx-tile {width:min(100%,360px); margin-inline:auto} #mx-stories .sx-zoom {opacity:1} #mx-stories .sx-next {min-height:360px} #mx-stories .sx-next > div {padding:28px 22px} #mx-stories .sx-next h2 {font-size:34px} #mx-stories .sx-next .sx-btn {width:100%} #mx-stories .sx-next:before {background:linear-gradient(180deg,rgba(6,35,70,.3) 0%,rgba(6,35,70,.85) 55%,rgba(6,35,70,.95) 100%)} #mx-stories .sx-feedback {padding:48px 0} #mx-stories .sx-feedback-intro {display:block} #mx-stories .sx-feedback h2 {font-size:36px} #mx-stories .sx-feedback-intro p:not(.sx-eyebrow) {margin-bottom:20px} #mx-stories .sx-quotes {grid-auto-columns:88%; gap:12px; margin-right:-20px; padding-right:20px} #mx-stories .sx-quote blockquote {font-size:15.5px} #mx-stories .sx-quote figcaption {flex-wrap:wrap; font-size:13px} #mx-stories .sx-stars {width:100%; padding-left:58px} #mx-stories .sx-cta {min-height:0} #mx-stories .sx-cta-inner {padding-block:52px} #mx-stories .sx-cta h2 {font-size:clamp(32px,9vw,38px)} #mx-stories .sx-cta-inner > p:not(.sx-eyebrow) {font-size:15.5px} #mx-stories .sx-cta:before {background:linear-gradient(180deg,rgba(6,35,70,.86),rgba(6,35,70,.72))} #mx-stories .sx-cta-media img {object-position:65% center} #mx-stories .sx-lightbox .mp-lb-prev {left:4px} #mx-stories .sx-lightbox .mp-lb-next {right:4px} #mx-stories .sx-lightbox .mp-lb-close {right:8px; top:8px; z-index:2} #mx-stories .sx-lightbox img {max-height:calc(100dvh - 104px)} } @media (prefers-reduced-motion:reduce) { #mx-stories *,#mx-stories *:before,#mx-stories *:after {transition:none!important} } /* ---------- pass 2 ---------- */ #mx-stories .sx-quote figcaption {display:grid; grid-template-columns:46px minmax(0,1fr); gap:2px 12px; align-items:center} #mx-stories .sx-quote figcaption img {grid-row:1/3} #mx-stories .sx-stars {grid-column:2; width:auto; padding:0; font-size:12px} #mx-stories .sx-quote figcaption:not(:has(img)) {grid-template-columns:1fr} #mx-stories .sx-quote figcaption:not(:has(img)) .sx-stars {grid-column:1} #mx-stories .sx-tile-meta {display:flex; align-items:baseline; justify-content:space-between; gap:12px; flex-wrap:wrap; cursor:pointer} #mx-stories .sx-tile-meta > p {flex-basis:100%; order:3} #mx-stories .sx-view {display:inline-flex; align-items:center; gap:6px; font:600 12.5px/1 var(--sans); color:var(--gold-text)} #mx-stories .sx-tile-meta:hover .sx-view .sx-arrow {transform:translateX(3px)} @media (max-width:900px) { /* the stats strip right below repeats these figures */ #mx-stories .sx-hero-panel {display:none} #mx-stories .sx-hero-media {margin-bottom:0} } @media (max-width:600px) { #mx-stories .sx-view {font-size:14px; min-height:32px} #mx-stories .sx-tile-meta h3 {font-size:17px} } @media (max-width:600px) { #mx-stories .sx-gallery h2,#mx-stories .sx-feedback h2,#mx-stories .sx-students h2 {font-size:clamp(30px,8.2vw,34px)} #mx-stories .sx-students {padding-top:48px} #mx-stories .sx-students-grid {grid-template-columns:1fr; gap:14px} #mx-stories .mx-student h3 {font-size:21px} #mx-stories .mx-student-study p {font-size:12.5px!important} #mx-stories .mx-student-intake {font-size:10px!important} #mx-stories .sx-featured h2,#mx-stories .sx-cta h2 {font-size:clamp(32px,8.8vw,36px)} #mx-stories .sx-next h2 {font-size:clamp(28px,7.6vw,32px)} #mx-stories .sx-stats-label span {font-size:11.5px} }