/**
 * Sikkim Manipal University landing page, header and footer.
 *
 * Loaded on every page, because the header and the footer it styles are the
 * site's own. The landing-page rules below it only match inside the .smu
 * wrapper, which front-page.php is the only template to print.
 *
 * Every selector is namespaced under .smu or the smu- prefix. That is not
 * decoration: this design uses names the theme already owns — hero, card,
 * btn, chip, fact, step, pill, lead, eyebrow, timeline, modal — and an
 * unprefixed port would silently restyle the CF7 forms, the blog and every
 * other page on the site.
 *
 * The --smu-* tokens it reads are declared at :root in style.css, so the
 * header and the footer — which render outside the .smu wrapper — resolve
 * them too.
 *
 * @package MBA_Admission_Guide
 */

.smu{
  font-family:var(--smu-f);
  font-size:15.5px;
  font-weight:400;
  line-height:1.75;
  color:var(--smu-text);
  background:#fff;
}

/* The landing header and footer are outside .smu, so they set their own
   typeface rather than inheriting the theme's. */
.smu-head,
.smu-foot{font-family:var(--smu-f)}

.smu *,.smu *::before,.smu *::after{box-sizing:border-box}
.smu img{max-width:100%;display:block}
.smu p{margin:0}

/* 80% of the viewport, so the page keeps a visible margin either side rather
   than running to the edges. The max-width still caps it on very wide screens,
   and narrow screens go near-full-width — 80% of a phone is too narrow to
   read comfortably. */
.smu-shell{width:80%;max-width:var(--smu-shell);margin:0 auto;padding:0}
@media(max-width:900px){.smu-shell{width:92%}}
@media(max-width:560px){.smu-shell{width:100%;padding:0 18px}}
.smu-section{padding:var(--smu-pad) 0}

/* Alternating bands.
   The class is assigned in PHP as the page renders, not by :nth-of-type,
   because three of these sections hide themselves when their Customizer
   fields are empty. A CSS rule counting siblings would alternate over the
   sections that *exist in the file*; the PHP counter alternates over the
   ones that actually render, which is the only version that survives an
   empty fee block or a hidden impact band. */
.smu-band{background:var(--smu-surface)}
.smu-band--alt{background:var(--smu-surface-alt)}

/* The sticky landing header would otherwise cover the top of any section
   an in-page anchor jumps to. */
.smu [id]{scroll-margin-top:96px}

.smu h1,.smu h2,.smu h3,.smu h4{
  margin:0;font-family:var(--smu-f);color:var(--smu-navy);
  font-weight:600;line-height:1.18;letter-spacing:-.025em;
}
.smu h1{font-size:clamp(2rem,4.4vw,3.2rem)}
.smu h2{font-size:clamp(1.9rem,3.4vw,2.75rem)}
.smu h3{font-size:1.12rem;letter-spacing:-.012em}

.smu-h-orange{color:var(--smu-orange);display:block}
.smu-h-orange--inline{display:inline}
.smu-h-underline{display:inline-block;border-bottom:3px solid var(--smu-orange);padding-bottom:6px}

.smu-center{text-align:center}
.smu-center .smu-lede{margin-left:auto;margin-right:auto}

.smu-eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.74rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--smu-orange);background:var(--smu-pink);border:1px solid var(--smu-pink-line);
  padding:.44rem 1.05rem;border-radius:99px;margin-bottom:1.4rem;
}
.smu-eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--smu-orange)}


.smu-lede{font-size:1rem;font-weight:400;color:var(--smu-text);max-width:70ch;line-height:1.8}

/* ================= BUTTONS ================= */
.smu-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.65rem;
  font-family:var(--smu-f);font-weight:500;font-size:.97rem;
  padding:1rem 1.9rem;border-radius:8px;border:2px solid transparent;
  transition:background .2s,color .2s,border-color .2s;cursor:pointer;
  text-decoration:none;
}
.smu-btn-orange{background:var(--smu-orange);color:#fff}
.smu-btn-orange:hover,.smu-btn-orange:focus{background:var(--smu-orange-2);color:#fff}
.smu-btn-line-navy{border-color:var(--smu-navy);color:var(--smu-navy);background:transparent}
.smu-btn-line-navy:hover,.smu-btn-line-navy:focus{background:var(--smu-navy);color:#fff}
.smu-btn-pill{border-radius:99px;padding:1.05rem 2.4rem}
.smu-arr{font-size:1.15rem;line-height:1}

/* ================= HERO ================= */
.smu-hero{
  position:relative;overflow:hidden;padding:88px 0 96px;
  /* Campus photograph behind the hero. The layers, front to back:
     a left-weighted scrim that keeps the headline side dark enough for white
     text wherever the photo happens to be bright, a warm orange wash for the
     brand, then the image itself. The colour underneath matters — it is what
     shows while the image loads and if it ever 404s. */
  background:
    linear-gradient(100deg,rgba(10,14,35,.52) 0%,rgba(10,14,35,.36) 38%,rgba(10,14,35,.20) 68%,rgba(10,14,35,.12) 100%),
    radial-gradient(900px 520px at 88% 6%,rgba(238,90,17,.16),transparent 62%),
    url("../images/smu/hero-campus.webp") center/cover no-repeat,
    #10142c;
}

/* Everything in the hero is now on a dark ground.
   The scrim is deliberately light so the campus reads through it, which means
   the type sits over photographic detail rather than flat colour. A soft
   shadow keeps the edges crisp against the busier parts of the building. */
.smu-hero h1,
.smu-hero .smu-h-underline{color:#fff;text-shadow:0 2px 18px rgba(6,9,24,.55)}
.smu-hero .smu-sell,
.smu-hero .smu-hero-ticks li{text-shadow:0 1px 12px rgba(6,9,24,.5)}
.smu-hero .smu-sell{color:#fff}
.smu-hero .smu-hero-ticks li{color:rgba(255,255,255,.94)}

/* The orange sits on near-black here, where the brand tone reads dull and
   fails contrast. Lifted to a lighter tint that keeps the hue. */
.smu-hero .smu-h-orange{color:#FF9A5C}
.smu-hero .smu-h-underline{border-bottom-color:#FF9A5C}

.smu-hero .smu-eyebrow{
  color:#FFD9C6;background:rgba(255,255,255,.10);border-color:rgba(255,255,255,.22);
}

/* The outlined button was navy-on-white and would have vanished. */
.smu-hero .smu-btn-line-navy{border-color:rgba(255,255,255,.55);color:#fff;background:transparent}
.smu-hero .smu-btn-line-navy:hover,
.smu-hero .smu-btn-line-navy:focus{background:rgba(255,255,255,.14);border-color:#fff;color:#fff}

.smu-hero :focus-visible{outline-color:#FFD9C6}

/* On a phone the photo is mostly cropped away and the text column is full
   width, so the scrim becomes vertical and heavier. */
@media(max-width:760px){
  .smu-hero{
    background:
      linear-gradient(180deg,rgba(10,14,35,.62) 0%,rgba(10,14,35,.52) 55%,rgba(10,14,35,.66) 100%),
      url("../images/smu/hero-campus.webp") center/cover no-repeat,
      #10142c;
  }
}
.smu-hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.06fr .94fr;gap:56px;align-items:start}
/* Colour is set with the rest of the hero's dark-ground rules above; this
   rule sits later in the file and would otherwise win and re-darken it. */
.smu-hero .smu-sell{font-size:1.06rem;max-width:52ch;margin-top:1.4rem}
.smu-hero-btns{display:flex;flex-wrap:wrap;gap:14px;margin-top:2.2rem}
.smu-hero-ticks{list-style:none;margin:2.4rem 0 0;padding:0;display:grid;grid-template-columns:1fr 1fr;gap:13px 24px;max-width:540px}
.smu-hero-ticks li{position:relative;padding-left:31px;font-size:.94rem;color:var(--smu-text)}
.smu-hero-ticks li::before{
  content:"";position:absolute;left:0;top:3px;width:21px;height:21px;border-radius:50%;
  background:var(--smu-orange) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%23fff'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") center/10px 10px no-repeat;
}

/* Lead card — wraps the theme's CF7 form, so it only sets the shell. */
.smu-leadcard{background:#fff;border:1px solid var(--smu-line);border-radius:20px;padding:28px;box-shadow:0 22px 54px rgba(21,26,58,.10)}
.smu-leadcard h2{font-size:1.4rem}
.smu-leadcard .smu-sub{font-size:.9rem;margin:.35rem 0 1.1rem;color:var(--smu-text-2)}
.smu-tick-row{display:flex;flex-wrap:wrap;gap:14px;justify-content:center;font-size:.74rem;font-weight:500;color:var(--smu-navy);margin-bottom:1rem}
.smu-tick-row span::before{content:"\2713 ";color:#0f9d58}
.smu-secure{display:flex;align-items:center;gap:8px;justify-content:center;margin-top:14px;font-size:.78rem;color:var(--smu-text-2)}
.smu-secure svg{width:13px;height:13px;fill:currentColor;flex:0 0 13px}

@media(max-width:940px){.smu-hero-grid{grid-template-columns:1fr;gap:40px}.smu-hero-ticks{max-width:none}}
@media(max-width:520px){.smu-hero-ticks{grid-template-columns:1fr}}

/* ================= ACCREDITATIONS ================= */

/* ================= PROGRAMME ================= */
/* Copy on the left, a photograph on the right. The specialization picker
   that used to hold the right-hand column became its own section, which
   left this band running text down one half and nothing down the other.

   The media column is opt-in: the modifier class is only printed when the
   image file is actually there, so a missing file gives a single full-width
   column rather than a 50% gap. */
.smu-prog__grid{display:grid;gap:clamp(30px,4vw,60px);align-items:center}
.smu-prog__grid--media{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr)}

.smu-prog__media{
  margin:0;border-radius:var(--smu-r-md);overflow:hidden;
  background:var(--smu-surface-alt);box-shadow:var(--smu-shadow-lift);
}
/* aspect-ratio rather than a fixed height: the box keeps its shape at every
   column width, so the band never reflows when the image loads. */
.smu-prog__media img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block}

.smu-prog__intro{max-width:56ch}
.smu-prog .smu-lede{margin-top:24px;line-height:1.85;max-width:none}
.smu-prog .smu-btn{margin-top:32px}

/* Key facts as a definition list — each one drops out when its Customizer
   field is empty, so this never shows a label with nothing beside it. */
.smu-prog__meta{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:20px 28px;margin:32px 0 0;padding:24px 0 0;
  border-top:1px solid var(--smu-line);
}
.smu-prog__meta dt{
  font-size:.7rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--smu-text-2);margin-bottom:5px;
}
.smu-prog__meta dd{margin:0;font-size:.95rem;font-weight:500;color:var(--smu-navy);line-height:1.45}

@media(max-width:960px){
  /* Stacked, and the photograph goes first: on a phone it is the fastest
     thing to read, and it sets up the copy underneath it. */
  .smu-prog__grid--media{grid-template-columns:1fr}
  .smu-prog__media{order:-1}
  .smu-prog__intro{max-width:none}
}

.smu-prog .smu-btn{margin-top:30px}


/* ================= ADVANTAGES ================= */
.smu-adv{border-top:1px solid var(--smu-line)}
.smu-adv-grid{display:grid;grid-template-columns:340px 1fr;gap:60px;align-items:start}
.smu-adv h2{font-size:clamp(2rem,3.4vw,2.9rem)}
.smu-adv .smu-lede{margin-top:26px;font-size:1rem;max-width:34ch}
.smu-stats{margin-top:46px;display:flex;flex-direction:column;gap:26px}
.smu-stat b{display:block;color:var(--smu-orange);font-weight:600;font-size:2.35rem;line-height:1}
.smu-stat b sup{font-size:.5em;font-weight:600;color:var(--smu-gold-2);vertical-align:baseline;margin-left:2px}
.smu-stat span{display:block;font-size:.92rem;color:var(--smu-text-2);margin-top:2px}

.smu-adv-cards{display:grid;grid-template-columns:1fr 1fr;gap:26px}
.smu-adv-card{background:#fff;border-radius:20px;padding:34px 32px 36px;box-shadow:0 2px 18px rgba(21,26,58,.05);transition:box-shadow .22s,transform .22s}
.smu-adv-card:hover{box-shadow:0 18px 44px rgba(21,26,58,.12);transform:translateY(-3px)}
.smu-adv-card .smu-circle{width:60px;height:60px;border-radius:50%;background:var(--smu-pink);display:grid;place-items:center;margin-bottom:22px}
.smu-adv-card .smu-circle svg{width:25px;height:25px;fill:var(--smu-maroon)}
.smu-adv-card h3{margin-bottom:.6rem}
.smu-adv-card p{font-size:.93rem;line-height:1.8}
@media(max-width:1000px){.smu-adv-grid{grid-template-columns:1fr;gap:44px}.smu-adv .smu-lede{max-width:none}.smu-stats{flex-direction:row;flex-wrap:wrap;gap:34px}}
@media(max-width:760px){.smu-adv-cards{grid-template-columns:1fr}}

/* ================= GLOBAL IMPACT ================= */

.smu-impact h2{font-size:clamp(1.9rem,3.6vw,2.9rem)}
.smu-impact-grid{display:grid;grid-template-columns:210px 1fr 210px;gap:40px;align-items:center;margin-top:56px}
.smu-imp-col{display:flex;flex-direction:column;gap:46px}
.smu-imp b{display:block;color:var(--smu-orange);font-weight:600;font-size:2.3rem;line-height:1}
.smu-imp b sup{font-size:.5em;font-weight:600;color:var(--smu-gold-2);vertical-align:baseline;margin-left:2px}
.smu-imp span{display:block;font-size:.92rem;color:var(--smu-text-2);line-height:1.45;margin-top:4px}
.smu-map-wrap{width:100%}
@media(max-width:980px){
  .smu-impact-grid{grid-template-columns:1fr;gap:34px}
  .smu-map-wrap{order:-1}
  .smu-imp-col{flex-direction:row;flex-wrap:wrap;gap:30px}
  .smu-imp{flex:1 1 190px}
}

/* ================= PLACEMENTS ================= */
.smu-logos{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin-top:44px}
.smu-logo-cell{
  background:var(--smu-paper);border:1px solid var(--smu-line);border-radius:12px;
  min-height:78px;display:grid;place-items:center;padding:12px;text-align:center;
  font-size:.8rem;font-weight:500;color:var(--smu-navy);line-height:1.35;
}
.smu-money{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-top:50px}
.smu-money-card{background:#fff;border:1px solid var(--smu-line);border-top:4px solid var(--smu-gold);border-radius:16px;padding:28px}
.smu-money-card h3{margin-bottom:.5rem}
.smu-money-card p{font-size:.95rem}
@media(max-width:720px){.smu-money{grid-template-columns:1fr}}

/* ================= FEES ================= */
.smu-fee-tab{display:inline-flex;align-items:center;gap:9px;font-weight:500;font-size:.95rem;color:var(--smu-orange);padding:0 6px 11px;border-bottom:3px solid var(--smu-orange);margin-top:36px}
.smu-fee-tab svg{width:16px;height:16px;fill:var(--smu-orange)}

.smu-fee-layout{display:grid;grid-template-columns:.86fr 1.14fr;gap:18px;margin-top:26px}
.smu-fee-layout--solo{grid-template-columns:1fr;max-width:520px}
.smu-fee-main{position:relative;overflow:hidden;background:var(--smu-orange);color:#fff;border-radius:12px;padding:34px 34px 30px;display:flex;flex-direction:column;justify-content:center}
.smu-fee-main::after{content:"";position:absolute;top:-70px;right:-46px;width:230px;height:230px;border-radius:50%;background:rgba(255,255,255,.075)}
.smu-fee-main .smu-k{font-size:.79rem;font-weight:500;letter-spacing:.13em;text-transform:uppercase;position:relative;z-index:2}
.smu-fee-main .smu-k2{font-size:.87rem;color:rgba(255,255,255,.86);margin-top:3px;position:relative;z-index:2}
.smu-fee-main .smu-big{font-weight:600;font-size:clamp(2rem,3.4vw,2.7rem);line-height:1;margin-top:30px;position:relative;z-index:2}
.smu-fee-main .smu-fine{font-size:.76rem;font-style:italic;color:rgba(255,255,255,.82);margin-top:11px;position:relative;z-index:2}
.smu-badge{position:absolute;top:22px;right:26px;z-index:3;background:var(--smu-gold);color:#2E2405;font-size:.65rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase;padding:.42rem .95rem;border-radius:99px}

.smu-fee-side{display:grid;gap:18px;align-content:stretch}
.smu-fee-row{border-radius:12px;padding:22px 26px;display:flex;align-items:center;gap:16px;color:#fff}
.smu-fee-row--navy{background:#1E1C5E}
.smu-fee-row--gold{background:#C6A233}
.smu-fee-row .smu-ic{width:44px;height:44px;flex:0 0 44px;border-radius:10px;background:rgba(255,255,255,.17);display:grid;place-items:center}
.smu-fee-row .smu-ic svg{width:20px;height:20px;fill:#fff}
.smu-fee-row .smu-k{font-size:.82rem;font-weight:500;letter-spacing:.11em;text-transform:uppercase}
.smu-fee-row .smu-right{margin-left:auto;text-align:right}
.smu-fee-row .smu-amt{display:block;font-weight:600;font-size:1.5rem;line-height:1.15}
.smu-fee-row .smu-fine{display:block;font-size:.71rem;font-style:italic;opacity:.86;margin-top:4px}

.smu-schol-bar{margin-top:20px;background:#fff;border-left:4px solid var(--smu-gold);border-radius:10px;padding:18px 26px;display:flex;align-items:center;gap:16px;flex-wrap:wrap;box-shadow:0 1px 10px rgba(21,26,58,.05)}
.smu-schol-bar>svg{width:22px;height:22px;flex:0 0 22px;fill:var(--smu-gold)}
.smu-schol-bar p{font-size:.95rem}
.smu-schol-bar b{color:var(--smu-orange);font-weight:500}
.smu-schol-bar .smu-btn{margin-left:auto;padding:.72rem 1.35rem;font-size:.9rem}
@media(max-width:940px){.smu-fee-layout{grid-template-columns:1fr}}
@media(max-width:620px){.smu-fee-row{flex-wrap:wrap}.smu-fee-row .smu-right{margin-left:0;text-align:left;width:100%}.smu-schol-bar .smu-btn{margin-left:0}}

/* ================= ADMISSION ================= */
/* ================= ADMISSION STEPS =================
   One component, not two. The previous version drew a timeline row and a
   card row as separate grids, which only lined up while both were four
   across — the moment they wrapped, the page showed every number first and
   then every card. Here each step owns its numeral, and the connector is a
   pseudo-element on the step itself, so the line can never point at a card
   that is not there: :not(:last-child) ends it, and the rule only has to
   change orientation between the two layouts.

   The connector is measured from badge centre to badge centre. Horizontally
   that is one card plus one gap, which is why the gap is a variable the
   segment can read rather than a number repeated in two places. */
.smu-steps{
  --smu-step-gap:22px;
  --smu-step-badge:46px;
  --smu-step-dur:2.4s;
  --smu-step-stagger:.4s;
  list-style:none;margin:58px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:var(--smu-step-gap);
}

.smu-step{
  position:relative;
  /* The badge clears the card entirely rather than straddling its edge. It
     has to: the connector runs through the badge centres, so an overlapping
     badge would put that line flush on the card's top edge, where the card's
     own opaque background covers everything except the gap between cards —
     four dashes instead of a chain. Clear of the card, the line has open
     space to cross. */
  padding-top:calc(var(--smu-step-badge) + 14px);
}

.smu-step:not(:last-child)::before{
  content:"";position:absolute;z-index:0;
  top:calc(var(--smu-step-badge) / 2 - 1.5px);
  left:50%;width:calc(100% + var(--smu-step-gap));height:3px;
  border-radius:2px;
  /* Two layers: the sweep rides on top of the line's own gradient. Painting
     it as a background rather than an extra element means it is clipped to
     the segment for free and costs nothing in the DOM. */
  background-image:
    linear-gradient(90deg,transparent 0%,rgba(255,255,255,.95) 50%,transparent 100%),
    linear-gradient(90deg,var(--smu-orange) 0%,#D98A1C 60%,#C9A227 100%);
  background-size:45% 100%,100% 100%;
  background-repeat:no-repeat;
  background-position:-90% 0,0 0;
  animation:smu-step-flow var(--smu-step-dur) linear infinite;
  animation-delay:calc(var(--smu-step-i) * var(--smu-step-stagger));
}

/* The stagger is what turns three separate sweeps into one pulse walking
   1 -> 2 -> 3 -> 4. Without it they would all fire together and the eye
   would read a blink, not a direction. CSS cannot do arithmetic on an
   nth-child index, so the index is handed to each step as a variable and
   the delay is calculated from it — the pace stays tunable in one place. */
.smu-step{--smu-step-i:0}
.smu-step:nth-child(2){--smu-step-i:1}
.smu-step:nth-child(3){--smu-step-i:2}
.smu-step:nth-child(4){--smu-step-i:3}
.smu-step:nth-child(5){--smu-step-i:4}
.smu-step:nth-child(6){--smu-step-i:5}

/* Sized at 45% of the segment, background-position:0% sits the sweep flush
   left and 100% flush right, so it is only fully clear of the line at about
   -82% and 182%. The range below clears both ends with a little to spare. */
@keyframes smu-step-flow{
  from{background-position:-90% 0,0 0}
  to{background-position:190% 0,0 0}
}
@keyframes smu-step-flow-y{
  from{background-position:0 -90%,0 0}
  to{background-position:0 190%,0 0}
}

.smu-step__n{
  position:absolute;z-index:2;top:0;left:50%;transform:translateX(-50%);
  width:var(--smu-step-badge);height:var(--smu-step-badge);border-radius:50%;
  background:var(--smu-orange);color:#fff;
  font-weight:600;font-size:1.05rem;
  display:grid;place-items:center;
  /* the white ring is what lets the connector pass behind the badge */
  box-shadow:0 0 0 5px var(--smu-surface),0 6px 16px rgba(238,90,17,.32);
}
.smu-band--alt .smu-step__n{box-shadow:0 0 0 5px var(--smu-surface-alt),0 6px 16px rgba(238,90,17,.32)}

.smu-step__card{
  position:relative;z-index:1;height:100%;
  background:var(--smu-surface-alt);border:1px solid var(--smu-line);
  border-radius:var(--smu-r-md);
  padding:28px 26px 30px;
  text-align:center;
  transition:border-color .18s,box-shadow .18s,transform .18s;
}
.smu-step:hover .smu-step__card{
  border-color:var(--smu-orange);
  box-shadow:var(--smu-shadow-lift);
  transform:translateY(-3px);
}

.smu-step__card .smu-ic{
  width:52px;height:52px;border-radius:14px;background:var(--smu-pink);
  display:grid;place-items:center;margin:0 auto 20px;
}
.smu-step__card .smu-ic svg{width:23px;height:23px;fill:var(--smu-orange)}
.smu-step__card h3{font-size:1.02rem;margin-bottom:.55rem}
.smu-step__card p{font-size:.875rem;line-height:1.75}

.smu-steps-foot{margin-top:56px;display:flex;flex-direction:column;align-items:center;gap:14px}
.smu-steps-foot small{font-size:.89rem;color:var(--smu-text-2)}

/* One column below this, and the connector turns to run down the badges.
   Two across was the old compromise; it is dropped because a process reads
   as a sequence, and a 2x2 grid asks the eye to break the line and come
   back. Vertically the segment spans exactly one row — from this badge's
   centre to the next one's — which is height:100% once the top offset and
   the next card's own offset cancel out. */
@media(max-width:900px){
  .smu-steps{grid-template-columns:1fr;gap:0;margin-top:44px}

  .smu-step{
    display:grid;
    grid-template-columns:var(--smu-step-badge) 1fr;
    gap:18px;align-items:start;
    padding-top:0;padding-bottom:26px;
  }
  .smu-step:last-child{padding-bottom:0}

  .smu-step:not(:last-child)::before{
    top:calc(var(--smu-step-badge) / 2);
    left:calc(var(--smu-step-badge) / 2 - 1.5px);
    width:3px;height:100%;
    background-image:
      linear-gradient(180deg,transparent 0%,rgba(255,255,255,.95) 50%,transparent 100%),
      linear-gradient(180deg,var(--smu-orange) 0%,#D98A1C 60%,#C9A227 100%);
    background-size:100% 45%,100% 100%;
    background-position:0 -90%,0 0;
    animation-name:smu-step-flow-y;
  }

  .smu-step__n{position:static;transform:none}

  .smu-step__card{padding:24px;text-align:left}
  .smu-step__card .smu-ic{margin:0 0 16px}
  .smu-step:hover .smu-step__card{transform:none}
}

/* .smu * already has animation:none!important under reduced motion, which
   would leave the sweep frozen mid-segment. Dropping the layer restores the
   plain line rather than a highlight parked at random. */
@media(prefers-reduced-motion:reduce){
  .smu-step__card{transition:none}
  .smu-step:hover .smu-step__card{transform:none}
  .smu-step:not(:last-child)::before{
    background-image:linear-gradient(90deg,var(--smu-orange) 0%,#D98A1C 60%,#C9A227 100%);
    background-size:100% 100%;
  }
}

/* The reset above sits after the 900px block, so on a narrow screen it would
   otherwise repaint the vertical connector with a horizontal gradient — a
   3px-wide slice of it, which is a flat colour. Restated for that pairing. */
@media(max-width:900px) and (prefers-reduced-motion:reduce){
  .smu-step:not(:last-child)::before{
    background-image:linear-gradient(180deg,var(--smu-orange) 0%,#D98A1C 60%,#C9A227 100%);
  }
}

/* ================= DEGREE ================= */
.smu-degree{border-top:1px solid var(--smu-line);border-bottom:1px solid var(--smu-line)}
.smu-deg-grid{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.smu-pills{display:flex;flex-wrap:wrap;gap:10px;margin-top:2rem}
.smu-pill{background:#fff;color:var(--smu-navy);border:1.5px solid var(--smu-line);border-radius:99px;padding:.5rem 1.15rem;font-size:.86rem;font-weight:500}
.smu-cert{position:relative;aspect-ratio:4/3;border:1px solid var(--smu-line);border-radius:16px;background:#fff;display:grid;place-items:center;text-align:center;padding:32px;box-shadow:0 2px 16px rgba(21,26,58,.05)}
.smu-cert img{margin:0 auto;max-height:100%;width:auto;border-radius:8px}
.smu-cert .smu-seal{width:84px;height:84px;margin:0 auto 18px;border-radius:50%;border:2px solid var(--smu-gold);color:var(--smu-gold);display:grid;place-items:center;font-weight:600;font-size:.82rem;line-height:1.3}
.smu-cert p{font-size:.85rem;color:var(--smu-text-2)}
.smu-cert .smu-legacy{position:absolute;right:-16px;bottom:-16px;background:var(--smu-orange);color:#fff;border-radius:12px;padding:.85rem 1.2rem;font-weight:600;line-height:1.15;box-shadow:0 12px 28px rgba(0,0,0,.32)}
.smu-cert .smu-legacy span{display:block;font-size:.68rem;font-weight:500;opacity:.92}
@media(max-width:880px){.smu-deg-grid{grid-template-columns:1fr;gap:44px}}

/* ================= PROSE + FINAL ================= */
.smu-prose{max-width:74ch;margin:0 auto}
.smu-prose > * + *{margin-top:16px}
.smu-final{padding:var(--smu-pad) 0}

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

/* ================= COURSE CAROUSEL ================= */
.smu-courses-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap}
.smu-courses-head h2{font-size:clamp(1.8rem,3.2vw,2.6rem)}

.smu-course-nav{display:flex;gap:10px;flex:0 0 auto}
.smu-course-arrow{
  width:46px;height:46px;border-radius:50%;border:1.5px solid var(--smu-line);
  background:#fff;color:var(--smu-navy);font-size:1.5rem;line-height:1;
  display:grid;place-items:center;cursor:pointer;transition:.18s;
}
.smu-course-arrow:hover:not(:disabled){background:var(--smu-orange);border-color:var(--smu-orange);color:#fff}
.smu-course-arrow:disabled{opacity:.35;cursor:default}

.smu-course-track{
  display:flex;gap:22px;margin-top:34px;padding:6px 4px 22px;
  overflow-x:auto;
  /* No scroll-snap and no CSS smooth scrolling: both fight the per-frame
     scrollLeft the marquee writes. Arrow clicks pass behavior:'smooth'
     directly, which still animates. */
  scroll-behavior:auto;
  scrollbar-width:thin;scrollbar-color:#C9CEDD transparent;
}
.smu-course-track::-webkit-scrollbar{height:7px}
.smu-course-track::-webkit-scrollbar-thumb{background:#C9CEDD;border-radius:4px}
.smu-course-track::-webkit-scrollbar-track{background:transparent}

.smu-course-card{
  flex:0 0 300px;
  display:flex;flex-direction:column;
  background:#fff;border:1px solid var(--smu-line);border-radius:16px;
  padding:22px;
  transition:transform .22s,border-color .22s;
}
.smu-course-card:hover{transform:translateY(-3px);border-color:var(--smu-orange)}

.smu-course-badges{display:flex;flex-wrap:wrap;gap:7px;margin-bottom:16px}
.smu-course-badge{
  font-size:.65rem;font-weight:500;letter-spacing:.07em;text-transform:uppercase;
  background:var(--smu-navy);color:#fff;padding:.3rem .7rem;border-radius:99px;
}
.smu-course-badge--hot{background:var(--smu-orange)}
.smu-course-tag{
  font-size:.65rem;font-weight:500;letter-spacing:.05em;
  background:var(--smu-cream);color:var(--smu-chip-text);
  border:1px solid var(--smu-cream-line);padding:.3rem .7rem;border-radius:99px;
}


.smu-course-card h3{font-size:1.02rem;line-height:1.35;margin-bottom:14px}

.smu-course-meta{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.smu-course-meta span{
  display:inline-flex;align-items:center;gap:5px;
  font-size:.78rem;font-weight:500;color:var(--smu-navy);
  background:var(--smu-paper);border:1px solid var(--smu-line);
  padding:.28rem .65rem;border-radius:6px;
}
.smu-course-meta svg{width:12px;height:12px;flex:0 0 12px}
.smu-course-rating svg{fill:var(--smu-gold)}
.smu-course-dur svg{fill:var(--smu-text-2)}

.smu-course-fee{font-weight:600;font-size:1.28rem;color:var(--smu-navy);line-height:1.2}
.smu-course-elig{font-size:.8rem;color:var(--smu-text-2);margin-top:4px}

/* Pushes the CTA to the bottom so cards of unequal height still line up. */
.smu-course-cta{margin-top:auto;padding:.8rem 1.2rem;font-size:.9rem;width:100%}
.smu-course-card > :not(.smu-course-cta):last-child{margin-bottom:18px}

.smu-course-note{margin-top:14px;font-size:.78rem;font-style:italic;color:var(--smu-text-2);max-width:80ch}

@media(max-width:640px){
  .smu-course-nav{display:none}
  .smu-course-card{flex-basis:82%}
}
@media(prefers-reduced-motion:reduce){.smu-course-track{scroll-behavior:auto}}

/* ================= LANDING HEADER ================= */
.smu-head{
  position:sticky;top:0;z-index:60;background:#fff;
  border-bottom:1px solid var(--smu-line);
}
.smu-head__in{display:flex;align-items:center;justify-content:space-between;gap:22px;min-height:76px}
.smu-head__brand{display:flex;align-items:center;flex:0 0 auto}
.smu-head__brand img{width:auto;height:40px;max-width:min(330px,44vw);object-fit:contain}
.smu-head__name{font-weight:600;font-size:1.05rem;color:var(--smu-navy)}

.smu-nav__list{display:flex;align-items:center;gap:26px;list-style:none;margin:0;padding:0}
.smu-nav__list a{
  font-size:.9rem;font-weight:500;color:var(--smu-navy);
  text-decoration:none;position:relative;padding:5px 0;display:block;
}
.smu-nav__list a::after{
  content:"";position:absolute;left:0;bottom:0;height:2px;width:0;
  background:var(--smu-orange);transition:width .22s;
}
.smu-nav__list a:hover::after,.smu-nav__list .current-menu-item > a::after{width:100%}

.smu-head__cta{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.smu-head__phone{display:flex;align-items:center;gap:9px;color:var(--smu-navy);text-decoration:none}
.smu-head__phone svg{width:15px;height:15px;fill:var(--smu-orange);flex:0 0 15px}
.smu-head__phone span{display:block;font-size:.9rem;font-weight:500;line-height:1.2}
.smu-head__phone small{display:block;font-size:.68rem;font-weight:500;color:var(--smu-text-2)}

.smu-head__toggle{
  display:none;width:44px;height:44px;border:1px solid var(--smu-line);
  border-radius:9px;background:#fff;cursor:pointer;
}
.smu-head__bars,.smu-head__bars::before,.smu-head__bars::after{
  display:block;width:19px;height:2px;background:var(--smu-navy);border-radius:2px;
  margin:0 auto;position:relative;transition:.2s;
}
.smu-head__bars::before,.smu-head__bars::after{content:"";position:absolute;left:0}
.smu-head__bars::before{top:-6px}
.smu-head__bars::after{top:6px}
.smu-head__toggle[aria-expanded="true"] .smu-head__bars{background:transparent}
.smu-head__toggle[aria-expanded="true"] .smu-head__bars::before{top:0;transform:rotate(45deg)}
.smu-head__toggle[aria-expanded="true"] .smu-head__bars::after{top:0;transform:rotate(-45deg)}

@media(max-width:1080px){
  .smu-head__toggle{display:grid;place-items:center;order:3}
  .smu-head__cta{order:2;gap:10px}
  .smu-nav{
    order:4;flex-basis:100%;display:none;
    border-top:1px solid var(--smu-line);padding:12px 0 16px;
  }
  .smu-nav.is-open{display:block}
  .smu-head__in{flex-wrap:wrap;padding-top:10px;padding-bottom:10px}
  .smu-nav__list{flex-direction:column;align-items:stretch;gap:0}
  .smu-nav__list a{padding:11px 2px;border-bottom:1px solid var(--smu-line)}
  .smu-nav__list li:last-child a{border-bottom:0}
}
@media(max-width:520px){
  /* The number stays visible: it is the fastest conversion path on a phone,
     where tapping to call costs one tap. The "Counsellor on call" line above
     it is the part that goes, since the icon already says it is a phone. */
  .smu-head__in{gap:12px}
  .smu-head__phone small{display:none}
  .smu-head__phone span{font-size:.84rem;white-space:nowrap}
  .smu-head__phone{flex:0 0 auto}
  .smu-head__brand{min-width:0}
  .smu-head__brand img{height:30px;max-width:34vw}
}

/* ================= SUPPLIED IMAGERY ================= */
.smu-course-photo{
  margin:-22px -22px 16px;border-radius:16px 16px 0 0;overflow:hidden;
  background:var(--smu-paper);aspect-ratio:378/220;
}
.smu-course-photo img{width:100%;height:100%;object-fit:cover;display:block}

.smu-map-wrap img{width:100%;height:auto;max-width:760px;margin:0 auto;display:block}

.smu-placement-strip{
  margin-top:44px;background:#fff;border:1px solid var(--smu-line);
  border-radius:16px;padding:22px;box-shadow:0 2px 14px rgba(21,26,58,.05);
}
.smu-placement-strip img{width:100%;height:auto;display:block}

.smu-cert img{width:100%;height:auto;max-height:100%;object-fit:contain;border-radius:8px}

/* ================= DESIGN SYSTEM PASS ================= */

/* --- Global Impact as the page's one dark band ---
   A page of white and one pale tint has rhythm but no focal point. This is
   the natural place for the contrast: the map art is a light landmass on a
   transparent ground, so it gains from a dark field, and the statistics are
   the thing most worth stopping on. */
.smu-impact{background:var(--smu-surface-deep);color:rgba(255,255,255,.72)}
.smu-impact h2{color:#fff}
.smu-impact .smu-imp span{color:rgba(255,255,255,.66)}
.smu-impact .smu-map-wrap img{
  filter:drop-shadow(0 10px 30px rgba(0,0,0,.35));
}

/* --- One card treatment, applied everywhere --- */
.smu-money-card,.smu-step__card,.smu-leadcard,
.smu-adv-card,.smu-placement-strip,.smu-cert,.smu-schol-bar{
  border-radius:var(--smu-r-md);
}
.smu-leadcard,.smu-adv-card{border-radius:var(--smu-r-lg)}
.smu-money-card,.smu-placement-strip,.smu-cert{box-shadow:var(--smu-shadow)}
.smu-adv-card{box-shadow:var(--smu-shadow)}
.smu-adv-card:hover{box-shadow:var(--smu-shadow-lift)}

/* On the tinted band, white cards need an edge or they float. */
.smu-band--alt .smu-adv-card,
.smu-band--alt .smu-money-card{border:1px solid var(--smu-line)}

/* --- Section heads: consistent spacing above the body copy --- */
.smu-center .smu-lede{margin-top:24px}

/* --- Sections that sit on the tinted band need their insets lifted --- */
.smu-band--alt .smu-step__card{background:#fff;border-color:var(--smu-line)}

/* --- Focus visibility, on both surfaces --- */
.smu :focus-visible{outline:3px solid var(--smu-orange);outline-offset:3px;border-radius:4px}
.smu-impact :focus-visible{outline-color:var(--smu-gold-2)}

/* --- Respect reduced motion for the card lift --- */
@media(prefers-reduced-motion:reduce){
  .smu-adv-card:hover,.smu-course-card:hover{transform:none}
}

/* ================= CLOSING CTA ================= */
/* An inset card rather than centred text on a bare band: the last thing on
   the page should look like a destination, not a footnote. The gradient runs
   navy into a warm rust so it reads as its own moment and not a second copy
   of the dark Global Impact band. */
.smu-cta{
  position:relative;overflow:hidden;
  border-radius:calc(var(--smu-r-lg) + 6px);
  background:
    radial-gradient(120% 140% at 88% 8%,rgba(238,90,17,.34),transparent 58%),
    linear-gradient(135deg,#1B1F4A 0%,#2A1B3D 52%,#48221A 100%);
  padding:clamp(38px,5vw,66px) clamp(24px,4vw,64px);
  box-shadow:0 26px 60px rgba(21,26,58,.24);
  text-align:center;
  isolation:isolate;
}

/* Soft light bloom behind the heading. */
.smu-cta__glow{
  position:absolute;z-index:-1;pointer-events:none;
  width:520px;height:520px;top:-58%;left:50%;transform:translateX(-50%);
  background:radial-gradient(circle,rgba(238,90,17,.28),transparent 62%);
}

.smu-cta__body{position:relative;z-index:1;max-width:640px;margin:0 auto}

.smu-cta__eyebrow{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.72rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:#FFD9C6;background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.20);
  padding:.42rem 1.05rem;border-radius:99px;margin-bottom:1.3rem;
}
.smu-cta__eyebrow::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--smu-orange)}

.smu-cta h2{color:#fff;font-size:clamp(1.75rem,3.2vw,2.55rem);line-height:1.16}
.smu-cta p{
  margin:1.1rem auto 0;max-width:52ch;
  font-size:1.02rem;line-height:1.75;color:rgba(255,255,255,.82);
}

.smu-cta__actions{
  display:flex;flex-wrap:wrap;gap:14px;justify-content:center;margin-top:2.1rem;
}
.smu-cta__actions .smu-btn{min-width:212px}

/* Secondary action. White on the dark card, so it stays legible where a
   ghost button on the orange brand colour would not have been. */
.smu-btn-ghost{
  border-color:rgba(255,255,255,.42);color:#fff;background:transparent;
}
.smu-btn-ghost:hover,.smu-btn-ghost:focus{
  background:rgba(255,255,255,.13);border-color:rgba(255,255,255,.72);color:#fff;
}
.smu-btn-ghost svg{width:15px;height:15px;fill:currentColor;flex:0 0 15px}

.smu-cta__trust{
  list-style:none;margin:2rem 0 0;padding:0;
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:center;
}
.smu-cta__trust li{
  display:inline-flex;align-items:center;gap:8px;
  font-size:.86rem;font-weight:500;color:rgba(255,255,255,.74);
}
.smu-cta__trust li::before{
  content:"";width:17px;height:17px;flex:0 0 17px;border-radius:50%;
  background:rgba(255,255,255,.13) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512' fill='%2373E8A6'%3E%3Cpath d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") center/9px 9px no-repeat;
}

.smu-cta :focus-visible{outline-color:#FFD9C6}

@media(max-width:560px){
  .smu-cta__actions{flex-direction:column}
  .smu-cta__actions .smu-btn{width:100%}
  .smu-cta__trust{flex-direction:column;align-items:center;gap:9px}
}

/* ================= LANDING FOOTER ================= */
/* Deep navy, closing the page on the same dark family as the CTA card that
   sits above it. The logo is dark artwork on transparency, so it needs a
   light plate here rather than being dropped onto the navy invisibly. */
.smu-foot{
  background:var(--smu-surface-deep);
  color:rgba(255,255,255,.68);
  padding:clamp(46px,5vw,72px) 0 0;
  font-size:.92rem;
}
.smu-foot__top{
  display:grid;grid-template-columns:1.5fr 1fr 1fr;gap:44px;
  padding-bottom:clamp(34px,4vw,52px);
}
.smu-foot__brand p{margin-top:16px;max-width:44ch;line-height:1.8;color:rgba(255,255,255,.62)}

.smu-foot__plate{
  display:inline-flex;background:#fff;border-radius:var(--smu-r-sm);
  padding:11px 16px;box-shadow:0 6px 20px rgba(0,0,0,.25);
}
.smu-foot__plate img{width:auto;height:34px;max-width:250px;object-fit:contain}
.smu-foot__name{font-size:1.1rem;font-weight:600;color:#fff}

.smu-foot__col h2{
  font-size:.76rem;font-weight:500;letter-spacing:.16em;text-transform:uppercase;
  color:#fff;margin-bottom:1.1rem;
}

.smu-foot__links{list-style:none;margin:0;padding:0;display:grid;gap:11px}
.smu-foot__links a{
  color:rgba(255,255,255,.68);text-decoration:none;transition:color .18s;
}
.smu-foot__links a:hover,.smu-foot__links a:focus{color:var(--smu-orange)}

.smu-foot__contact{
  display:flex;align-items:center;gap:10px;margin-bottom:12px;
  color:#fff;font-weight:500;text-decoration:none;transition:color .18s;
}
.smu-foot__contact:hover,.smu-foot__contact:focus{color:var(--smu-orange)}
.smu-foot__contact svg{width:15px;height:15px;flex:0 0 15px;fill:var(--smu-orange)}

.smu-foot__meta{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:9px}
.smu-foot__meta li{
  display:flex;align-items:center;gap:9px;
  font-size:.84rem;color:rgba(255,255,255,.58);
}
.smu-foot__meta svg{width:13px;height:13px;flex:0 0 13px;fill:rgba(255,255,255,.45)}

.smu-foot__bot{
  display:flex;flex-wrap:wrap;gap:10px 26px;justify-content:space-between;
  padding:20px 0 26px;border-top:1px solid rgba(255,255,255,.11);
  font-size:.82rem;color:rgba(255,255,255,.5);
}
/* The Privacy Policy link is the one thing in this row a visitor can click,
   so it underlines to read as a link at the size the row is set in, and
   takes the same orange on hover as every other footer link. */
.smu-foot__legal{
  color:rgba(255,255,255,.5);text-decoration:underline;
  text-underline-offset:3px;transition:color .18s;
}
.smu-foot__legal:hover,.smu-foot__legal:focus{color:var(--smu-orange)}

.smu-foot :focus-visible{outline-color:#FFD9C6}

@media(max-width:880px){
  .smu-foot__top{grid-template-columns:1fr 1fr;gap:34px}
  .smu-foot__brand{grid-column:1 / -1}
}
@media(max-width:560px){
  .smu-foot__top{grid-template-columns:1fr;gap:30px}
  .smu-foot__bot{flex-direction:column;gap:8px}
}
/* The mobile sticky bar sits over the footer's last rows. */
@media(max-width:760px){.smu-foot__bot{padding-bottom:84px}}

/* ================= FULL-WIDTH NAV BAR ================= */
/* A full-bleed sticky strip: the bar spans the viewport edge to edge, and
   only its contents are held to the page container so the logo and the
   phone number stay in line with every section below. */
.smu-head{
  background:rgba(255,255,255,.96);
  -webkit-backdrop-filter:saturate(180%) blur(12px);
          backdrop-filter:saturate(180%) blur(12px);
  /* No shadow. The bar is sticky, so its shadow tracked down the page and
     fell across whatever sat under it — read as a shadow crossing the cards
     rather than as depth on the header. The hairline border still separates
     it from the content behind. */
  border-bottom:1px solid var(--smu-line);
  padding:0;
}
.smu-head__in{
  /* Width and gutters come from .smu-shell, which this row also carries.
     Setting them again here would indent the logo and phone relative to
     every section below. */
  min-height:74px;
  background:none;
  border:0;
  border-radius:0;
  box-shadow:none;
  -webkit-backdrop-filter:none;
          backdrop-filter:none;
}

/* Desktop only, and deliberately inside a min-width query.
   Unscoped, these two rules sit later in the file than the mobile block
   above and carry the same specificity, so they won over it: .smu-nav went
   back to display:flex below 1080px, which left the menu permanently open
   and the hamburger doing nothing. */
@media(min-width:1081px){
  /* The nav takes the space between the logo and the phone rather than
     sitting in its natural width, so the links spread across the bar. */
  .smu-nav{flex:1 1 auto;display:flex;justify-content:center}
  .smu-nav__list{gap:clamp(18px,2.6vw,40px)}
}

.smu [id]{scroll-margin-top:92px}

@media(max-width:1080px){
  .smu-head__in{padding-top:8px;padding-bottom:8px;min-height:62px}
  /* display stays with the mobile block above: none, or block when open. */
  .smu-nav{flex:0 0 100%;padding:12px 0 14px}
}

/* ================= LIGHT FOOTER ================= */
/* Was deep navy; now a light band so the menu reads in black, as asked.
   The top border matters: the closing band above can itself land on the
   tinted surface, and without a rule the two would merge. */
.smu-foot{
  background:var(--smu-surface-alt);
  color:var(--smu-text);
  border-top:1px solid var(--smu-line);
}
.smu-foot__brand p{color:var(--smu-text)}

/* On a light ground the logo needs no plate behind it. */
.smu-foot__plate{background:none;padding:0;box-shadow:none;border-radius:0}
.smu-foot__name{color:var(--smu-navy)}

.smu-foot__col h2{color:var(--smu-navy)}

.smu-foot__links a{color:var(--smu-navy)}
.smu-foot__links a:hover,.smu-foot__links a:focus{color:var(--smu-orange)}

.smu-foot__contact{color:var(--smu-navy)}
.smu-foot__contact:hover,.smu-foot__contact:focus{color:var(--smu-orange)}

.smu-foot__meta li{color:var(--smu-text-2)}
.smu-foot__meta svg{fill:var(--smu-text-2)}

.smu-foot__bot{
  border-top:1px solid var(--smu-line);
  color:var(--smu-text-2);
}
.smu-foot__legal{color:var(--smu-text-2)}
.smu-foot__legal:hover,.smu-foot__legal:focus{color:var(--smu-orange)}

/* The legal line. It takes the border that used to sit on the copyright row
   and the copyright row gives it up, so the two close the footer as one
   block instead of stacking two rules a few pixels apart. */
.smu-foot__disc{
  margin:0;padding:18px 0 14px;
  border-top:1px solid var(--smu-line);
  font-size:.74rem;line-height:1.7;color:var(--smu-text-2);
}
.smu-foot__disc strong{color:var(--smu-navy);font-weight:600}
.smu-foot__disc + .smu-foot__bot{border-top:0;padding-top:0}

.smu-foot :focus-visible{outline-color:var(--smu-orange)}

/* ================= SPECIALIZATIONS =================
   A flat card grid, deliberately without the shadow the other card families
   carry: thirteen elevated cards in one view reads as noise, so the border
   does the separating and the accent border marks the popular ones. The
   mockup's own palette mapped onto the tokens almost exactly — its #F4F6FB
   page tint is --smu-surface-alt and its 10px radius is --smu-r-sm — so the
   only real change is the body colour, which was a blue that belongs to no
   other element on this page. */
.smu-specs .smu-lede{margin-top:10px}

.smu-specs-grid{
  display:grid;grid-template-columns:repeat(4,1fr);gap:16px;
  list-style:none;margin:32px 0 0;padding:0;
}

.smu-spec-card{
  position:relative;background:var(--smu-surface);
  border:1.5px solid var(--smu-line);border-radius:var(--smu-r-sm);
  padding:20px;
}
.smu-spec-card--pop{border-color:var(--smu-orange)}

/* Pulled onto the border by its own width, so the badge sits flush with the
   card corner rather than a hairline inside it. */
.smu-spec-card__badge{
  position:absolute;top:-1.5px;right:-1.5px;
  background:var(--smu-orange);color:#fff;
  font-size:.69rem;font-weight:500;line-height:1.4;
  padding:4px 10px;border-radius:0 var(--smu-r-sm) 0 8px;
}

.smu-spec-card__n{
  display:block;color:var(--smu-orange);
  font-weight:500;font-size:.81rem;margin-bottom:6px;
}
.smu-spec-card h3{font-size:1rem;margin-bottom:8px}
.smu-spec-card p{font-size:.84rem;color:var(--smu-text-2);line-height:1.55}

.smu-specs-note{
  margin-top:32px;text-align:center;
  font-size:.84rem;color:var(--smu-text-2);
}

@media(max-width:900px){.smu-specs-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.smu-specs-grid{grid-template-columns:1fr}}

/* ================= CAROUSEL MARQUEE ================= */
/* Applied by JS once the loop is built, so none of this affects a visitor
   whose carousel stays manual (reduced motion, or too few cards). */
.smu-course-track.is-marquee{
  /* No edge mask. It faded the cards out as they entered and left, which on
     a moving track reads as a shadow crossing them rather than as a soft
     edge. Cards now simply clip at the container. */
  scrollbar-width:none;
}
.smu-course-track.is-marquee::-webkit-scrollbar{height:0}

/* Clones repeat content that is already announced once. */
.smu-course-card.is-clone{pointer-events:auto}

/* Pause / resume control, drawn with pseudo-elements so it needs no icon. */
.smu-course-toggle span{
  display:block;width:12px;height:12px;position:relative;
}
.smu-course-toggle span::before,
.smu-course-toggle span::after{
  content:"";position:absolute;top:0;width:3.5px;height:12px;
  background:currentColor;border-radius:1px;
}
.smu-course-toggle span::before{left:1px}
.smu-course-toggle span::after{right:1px}

/* Pressed = paused, so the button offers "play". */
.smu-course-toggle[aria-pressed="true"] span::before{
  left:2px;width:0;height:0;border-radius:0;
  border-left:9px solid currentColor;
  border-top:6px solid transparent;
  border-bottom:6px solid transparent;
}
.smu-course-toggle[aria-pressed="true"] span::after{display:none}

/* ================= RANKINGS & ACCREDITATIONS ================= */
.smu-ranks-grid{
  list-style:none;margin:44px 0 0;padding:0;
  display:grid;grid-template-columns:repeat(auto-fit,minmax(158px,1fr));gap:18px;
}
.smu-rank{
  background:#fff;border:1px solid var(--smu-line);border-radius:var(--smu-r-md);
  padding:26px 16px 22px;text-align:center;
  box-shadow:var(--smu-shadow);
  transition:box-shadow .22s,transform .22s;
}
.smu-rank:hover{box-shadow:var(--smu-shadow-lift);transform:translateY(-3px)}

/* The badges are square JPEG-sourced artwork on a white ground, so they need
   a white plate of their own to sit on — on the tinted band they would
   otherwise show a visible square edge against the section behind them. */
.smu-rank__badge{
  display:grid;place-items:center;width:76px;height:76px;margin:0 auto 14px;
  background:#fff;border-radius:50%;overflow:hidden;
}
.smu-rank__badge img{width:100%;height:100%;object-fit:contain}

.smu-rank b{
  display:block;font-family:var(--smu-f);font-weight:600;font-size:1rem;
  color:var(--smu-navy);line-height:1.3;
}
.smu-rank span{
  display:block;margin-top:5px;font-size:.78rem;line-height:1.45;color:var(--smu-text-2);
}

.smu-center + .smu-ranks-grid{margin-top:40px}

@media(max-width:520px){
  .smu-ranks-grid{grid-template-columns:repeat(2,1fr);gap:14px}
  .smu-rank{padding:20px 12px 18px}
  .smu-rank__badge{width:62px;height:62px}
}