/* ==========================================================================
   Y Academy — "Merit Gazette" landing page design system
   --------------------------------------------------------------------------
   Editorial, results-forward. Ranks are the hero: an Indian coaching
   institute is judged on its honour roll, so toppers get the largest type
   on the page and everything else defers to them.

   Layered on top of Bootstrap 5, which is retained only for carousel,
   navbar-collapse and dropdown behaviour. All layout here is own CSS.
   Scoped under .mg so Bootstrap defaults are overridden predictably
   without needing !important.
   ========================================================================== */

.mg {
  /* Ink / paper / accent. Deliberately three-note: a dominant ink, a warm
     paper ground, one saturated accent. Evenly-spread palettes read timid. */
  --ink:        #101d29;
  --ink-soft:   #1b2f40;
  --ink-line:   #2a4256;
  --paper:      #fbf8f3;
  --paper-2:    #f3ede3;
  --paper-edge: #e3d9c8;
  --vermilion:  #d6371c;
  --vermilion-d:#a82811;
  --brass:      #b8863b;
  --text:       #263542;
  --text-mute:  #6a7885;

  --serif: "Fraunces", "Iowan Old Style", Georgia, serif;
  --sans:  "Mukta", ui-sans-serif, system-ui, sans-serif;

  /* Fluid rhythm: one scale drives every section so vertical spacing stays
     consistent as the viewport changes. */
  --gap:      clamp(10px, 1.2vw, 14px);
  --pad-sec:  clamp(26px, 3.2vw, 46px);
  --shell:    1280px;
  --rule:     1px solid var(--paper-edge);

  background: var(--paper);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Paper grain. Kept as an SVG data URI so it costs no request, and pinned
   behind content so it never intercepts clicks. */
.mg::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: .035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)'/%3E%3C/svg%3E");
}
.mg > * { position: relative; z-index: 1; }

.mg-shell { width: 100%; max-width: var(--shell); margin: 0 auto; padding: 0 clamp(16px, 4vw, 32px); }

.mg h1, .mg h2, .mg h3, .mg h4, .mg h5 {
  font-family: var(--serif);
  font-weight: 600;
  font-variation-settings: "SOFT" 0, "WONK" 1;
  color: var(--ink);
  letter-spacing: -.015em;
  line-height: 1.08;
  margin: 0;
}
.mg a { text-decoration: none; color: inherit; }
.mg img { max-width: 100%; display: block; }

/* Numerals: tabular + lining everywhere numbers are compared (prices, ranks,
   stats). Proportional figures make columns of numbers look ragged. */
.mg .num { font-variant-numeric: tabular-nums lining-nums; }

/* --- section furniture ---------------------------------------------------- */
.mg-sec { padding: var(--pad-sec) 0; }
.mg-sec--ink { background: var(--ink); color: #cfdae4; }
.mg-sec--ink h2, .mg-sec--ink h3, .mg-sec--ink h4 { color: #fff; }
.mg-sec--tint { background: var(--paper-2); }

/* Section heading: an eyebrow, a serif title, a hairline that runs to the
   edge of the column. Reads as a printed page rather than a web card. */
.mg-head { margin-bottom: clamp(16px, 1.8vw, 24px); }
.mg-eyebrow {
  font: 600 11px/1 var(--sans);
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--vermilion);
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}
.mg-eyebrow::after { content: ""; flex: 1; height: 1px; background: var(--paper-edge); }
.mg-sec--ink .mg-eyebrow { color: var(--brass); }
.mg-sec--ink .mg-eyebrow::after { background: var(--ink-line); }
.mg-head h2 { font-size: clamp(24px, 3vw, 34px); }
.mg-head h2 em { font-style: normal; color: var(--vermilion); }
.mg-head p { margin: 7px 0 0; max-width: 60ch; color: var(--text-mute); font-size: 15px; }
.mg-sec--ink .mg-head p { color: #93a6b6; }

/* --- utility bar --------------------------------------------------------- */
.mg-util { background: var(--ink); color: #9fb2c2; font-size: 13px; }
.mg-util .mg-shell { display: flex; justify-content: space-between; align-items: center; gap: 16px; min-height: 40px; }
.mg-util a { color: #9fb2c2; transition: color .18s; }
.mg-util a:hover { color: #fff; }
.mg-util-l { display: flex; gap: 22px; flex-wrap: wrap; }
/* Matches the anchors it sits beside, for when there is no Google listing to link to. */
.mg-util-loc { display: inline-flex; align-items: center; gap: 6px; }
.mg-util-r { display: flex; gap: 6px; }
.mg-util-r a {
  width: 28px; height: 28px; display: grid; place-items: center;
  border: 1px solid var(--ink-line); border-radius: 50%; font-size: 11px;
}
.mg-util-r a:hover { background: var(--vermilion); border-color: var(--vermilion); color: #fff; }

/* --- announcement ticker ------------------------------------------------- */
.mg-ticker {
  background: var(--vermilion);
  color: #fff;
  font-size: 14px;
  display: flex; align-items: center; gap: 14px;
  padding: 9px clamp(16px, 4vw, 32px);
}
.mg-ticker strong { font-weight: 700; }
.mg-ticker a { color: #fff; text-decoration: underline; text-underline-offset: 3px; font-weight: 600; }
.mg-ticker-x {
  margin-left: auto; background: none; border: 0; color: #fff; opacity: .7;
  font-size: 20px; line-height: 1; cursor: pointer; padding: 0 4px;
}
.mg-ticker-x:hover { opacity: 1; }

/* --- masthead ----------------------------------------------------------- */
.mg-mast { background: var(--paper); border-bottom: var(--rule); position: sticky; top: 0; z-index: 60; }
.mg-mast .navbar { padding: 0; }
.mg-mast .mg-shell { display: flex; align-items: center; min-height: 74px; gap: 20px; }
.mg-brand img { height: 44px; width: auto; }
.mg-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.mg-nav .nav-link {
  font: 600 13.5px/1 var(--sans);
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--ink) !important;
  padding: 10px 13px !important;
  position: relative;
}
/* Underline that grows from the left — cheaper and calmer than a colour flip. */
.mg-nav .nav-link::after {
  content: ""; position: absolute; left: 13px; right: 13px; bottom: 4px;
  height: 2px; background: var(--vermilion);
  transform: scaleX(0); transform-origin: left; transition: transform .22s ease;
}
.mg-nav .nav-link:hover::after { transform: scaleX(1); }
.mg-btn-ghost, .mg-btn-solid {
  font: 700 13px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  padding: 12px 20px !important; border-radius: 2px; transition: all .2s;
}
.mg-btn-ghost { border: 1.5px solid var(--ink); color: var(--ink) !important; }
.mg-btn-ghost:hover { background: var(--ink); color: #fff !important; }
.mg-btn-solid { background: var(--vermilion); color: #fff !important; border: 1.5px solid var(--vermilion); }
.mg-btn-solid:hover { background: var(--vermilion-d); border-color: var(--vermilion-d); }
.mg-burger { margin-left: auto; background: none; border: 1.5px solid var(--ink); border-radius: 2px; padding: 8px 11px; }

/* --- hero --------------------------------------------------------------- */
/* Asymmetric split: type on the left, image on the right, with the image
   deliberately overflowing its column so the composition is not a tidy
   two-box grid. */
.mg-hero { background: var(--ink); color: #fff; overflow: hidden; position: relative; }
.mg-hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    radial-gradient(60% 90% at 12% 20%, rgba(214,55,28,.22), transparent 70%),
    linear-gradient(180deg, transparent 60%, rgba(0,0,0,.35));
}
.mg-hero-grid {
  display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.1fr);
  align-items: center; gap: clamp(20px, 2.6vw, 38px);
  padding: clamp(24px, 3.2vw, 42px) 0;
}
.mg-hero-kicker {
  display: inline-flex; align-items: center; gap: 9px;
  font: 600 11px/1 var(--sans); letter-spacing: .2em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 20px;
}
.mg-hero-kicker::before { content: ""; width: 26px; height: 2px; background: var(--brass); }
.mg-hero h1 { color: #fff; font-size: clamp(30px, 4.2vw, 52px); font-weight: 600; }
.mg-hero h1 em { font-style: normal; color: var(--brass); }
.mg-hero-lead {
  font-family: var(--serif); font-weight: 400; font-style: italic;
  font-size: clamp(18px, 2.1vw, 26px); line-height: 1.25;
  color: var(--brass); margin: 14px 0 0; max-width: 30ch;
}
.mg-hero-sub { color: #a9bccb; font-size: clamp(15px, 1.5vw, 18px); margin: 16px 0 0; max-width: 46ch; }
.mg-hero-acts { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.mg-hero-acts a {
  font: 700 13px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  padding: 15px 26px; border-radius: 2px; transition: all .2s;
}
.mg-cta-1 { background: var(--vermilion); color: #fff; }
.mg-cta-1:hover { background: #fff; color: var(--ink); }
.mg-cta-2 { border: 1.5px solid rgba(255,255,255,.4); color: #fff; }
.mg-cta-2:hover { border-color: #fff; background: rgba(255,255,255,.08); }

/* Image side: offset brass rule behind the frame gives depth without a
   drop-shadow, which would look generic here. */
.mg-hero-media { position: relative; }
.mg-hero-media::before {
  content: ""; position: absolute; inset: 14px -14px -14px 14px;
  border: 1px solid var(--brass); opacity: .45;
}
.mg-hero-media .carousel, .mg-hero-media .mg-hero-still { position: relative; background: var(--ink-soft); }
.mg-hero-media img { width: 100%; height: clamp(300px, 40vw, 520px); object-fit: contain; background: #fff; }
.mg-hero-media .carousel-indicators { margin-bottom: 10px; }
.mg-hero-media .carousel-indicators [data-bs-target] { width: 26px; height: 3px; border: 0; background: rgba(255,255,255,.5); }
.mg-hero-media .carousel-indicators .active { background: var(--vermilion); }
.mg-slide-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 30px 20px 16px;
  background: linear-gradient(transparent, rgba(9,17,24,.9));
  font: 600 14px/1.35 var(--sans); color: #fff;
}

/* --- full-bleed result banner ------------------------------------------- */
/* The posters are the institute's primary proof and are dense with names and
   ranks, so they take the full page width. object-fit: contain on a dark ground
   keeps every poster legible whatever its aspect ratio — cropping cut off the
   very names that make it persuasive. */
.mg-banner { background: var(--ink-soft); border-top: 3px solid var(--brass); }
.mg-banner .carousel, .mg-banner .carousel-inner, .mg-banner .carousel-item { background: var(--ink-soft); }
.mg-banner-img {
  width: 100%;
  height: clamp(320px, 46vw, 660px);
  object-fit: contain;
  background: #fff;
}
.mg-banner-text {
  display: grid; place-items: center; text-align: center;
  min-height: clamp(200px, 22vw, 320px); padding: 36px 24px;
  /* Self-contained dark ground. This panel used to live in the dark hero; after the
     gallery moved to a light section, white-on-cream was unreadable. Carrying its
     own background means the slide reads wherever it is placed. */
  background: linear-gradient(150deg, var(--ink), var(--ink-soft));
  border: 1px solid var(--paper-edge);
}
.mg-banner-text h3 { color: #fff; font-size: clamp(22px, 3vw, 40px); }
.mg-banner-text p { color: #a9bccb; margin: 12px 0 0; font-size: clamp(14px, 1.4vw, 17px); }
.mg-banner .carousel-indicators { margin-bottom: 8px; }
.mg-banner .carousel-indicators [data-bs-target] { width: 30px; height: 4px; border: 0; background: rgba(255,255,255,.55); }
.mg-banner .carousel-indicators .active { background: var(--vermilion); }
.mg-banner .carousel-control-prev, .mg-banner .carousel-control-next { width: 6%; opacity: .55; }
.mg-banner .carousel-control-prev:hover, .mg-banner .carousel-control-next:hover { opacity: 1; }
.mg-banner .mg-slide-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 28px clamp(16px, 4vw, 32px) 14px;
  background: linear-gradient(transparent, rgba(9,17,24,.88));
  font: 500 clamp(13px, 1.3vw, 16px)/1.35 var(--sans); color: #fff; text-align: center;
}

/* --- hero intro band (compact, above the banner) ------------------------- */
.mg-hero-intro {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: clamp(16px, 3vw, 40px); flex-wrap: wrap;
  padding: clamp(20px, 2.6vw, 34px) 0 clamp(18px, 2.2vw, 26px);
}
.mg-hero-copy { flex: 1 1 420px; min-width: 0; }
.mg-hero-copy h1 { color: #fff; font-size: clamp(27px, 3.6vw, 46px); }
.mg-hero-copy h1 em { font-style: italic; font-weight: 400; color: var(--brass); display: block; font-size: .55em; margin-top: 6px; }
.mg-hero-intro .mg-hero-sub { margin: 10px 0 0; }
.mg-hero-intro .mg-hero-acts { margin: 0; flex: 0 0 auto; }

/* --- stats -------------------------------------------------------------- */
/* Hairline-separated columns, not floating boxes. Big serif numerals. */
.mg-stats { background: var(--paper); border-bottom: var(--rule); }
.mg-stats-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  padding: clamp(16px, 1.8vw, 24px) 0;
}
.mg-stat { padding: 6px clamp(12px, 2vw, 26px); border-left: var(--rule); }
.mg-stat:first-child { border-left: 0; padding-left: 0; }
.mg-stat b {
  display: block; font-family: var(--serif); font-weight: 600;
  font-size: clamp(24px, 2.5vw, 33px); line-height: 1; color: var(--ink);
}
.mg-stat span { display: block; margin-top: 8px; font-size: 13.5px; color: var(--text-mute); }

/* --- courses ------------------------------------------------------------ */
.mg-course-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: var(--gap); }

/* Card is a flex column so the CTA can sit on the normal flow at the bottom
   instead of being absolutely positioned — the previous design positioned it
   absolutely and the label became unreadable. */
.mg-course {
  display: flex; flex-direction: column;
  background: #fff; border: var(--rule); border-left: 3px solid var(--ink);
  padding: 13px 13px 11px; transition: border-color .2s, transform .2s;
}
.mg-course:hover { border-left-color: var(--vermilion); transform: translateY(-3px); }
.mg-course-tag {
  font: 600 9px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  color: var(--text-mute); margin-bottom: 7px;
}
.mg-course h3 { font-size: 14.5px; margin-bottom: 5px; line-height: 1.25; }
.mg-course p { font-size: 12px; color: var(--text-mute); margin: 0 0 9px; line-height: 1.45; }
.mg-course-foot { margin-top: auto; display: flex; align-items: baseline; justify-content: space-between; gap: 8px; padding-top: 9px; border-top: var(--rule); }
.mg-price { font-family: var(--serif); font-weight: 600; font-size: 17px; color: var(--ink); }
.mg-price s { font-family: var(--sans); font-size: 13px; font-weight: 400; color: var(--text-mute); margin-right: 7px; }
.mg-price .free { color: #1c7a4a; }
.mg-enroll {
  flex: none;
  font: 700 12px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase;
  color: var(--vermilion); border-bottom: 2px solid currentColor; padding-bottom: 2px;
  transition: color .18s;
}
.mg-enroll:hover { color: var(--ink); }
.mg-enrolled { font: 600 12px/1 var(--sans); color: #1c7a4a; letter-spacing: .04em; }
.mg-more { margin-top: 26px; text-align: center; }
.mg-more a {
  display: inline-block; font: 700 12.5px/1 var(--sans); letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink);
  border: 1.5px solid var(--ink); padding: 14px 26px; border-radius: 2px; transition: all .2s;
}
.mg-more a:hover { background: var(--ink); color: #fff; }

/* --- notice board ------------------------------------------------------- */
/* Framed like a physical notice board — the metaphor parents recognise. */

/* --- honour roll (results) — the centrepiece ---------------------------- */
.mg-roll-group { margin-bottom: clamp(18px, 2.2vw, 30px); }
.mg-roll-group:last-child { margin-bottom: 0; }
.mg-roll-head {
  display: flex; align-items: baseline; gap: 12px;
  padding-bottom: 8px; margin-bottom: 12px; border-bottom: 2px solid var(--ink);
}
.mg-roll-head h3 { font-size: clamp(17px, 1.9vw, 22px); }
.mg-roll-n {
  font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--vermilion); margin-left: auto;
}
/* Cards beyond the initial cap are hidden until "Show all" is pressed. */
.mg-topper--extra { display: none; }
.mg-roll-group.is-open .mg-topper--extra { display: block; }
.mg-roll-more {
  margin-top: 12px; width: 100%;
  background: #fff; border: 1.5px solid var(--ink); border-radius: 2px;
  font: 700 12px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink); padding: 12px; cursor: pointer; transition: all .2s;
}
.mg-roll-more:hover { background: var(--ink); color: #fff; }
.mg-roll-group.is-open .mg-roll-more { display: none; }

.mg-roll { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: var(--gap); }
.mg-topper {
  background: #fff; border: var(--rule); padding: 12px 8px 10px;
  text-align: center; position: relative; overflow: hidden;
  transition: transform .2s, border-color .2s;
}
.mg-topper:hover { transform: translateY(-4px); border-color: var(--brass); }
/* Oversized ghost numeral, anchored to the lower-right corner and clipped by
   the card. Kept very low contrast so it reads as watermark texture, not as
   data competing with the student's rank. */
.mg-topper::before {
  content: attr(data-rank);
  position: absolute; right: 6px; bottom: -30px;
  font-family: var(--serif); font-weight: 900; font-size: 58px; line-height: .8;
  color: var(--ink); opacity: .05; z-index: 0;
  font-variant-numeric: lining-nums;
}
.mg-topper > * { position: relative; z-index: 1; }
.mg-topper-ph {
  width: clamp(64px, 8vw, 92px); aspect-ratio: 1; height: auto; margin: 0 auto 8px; border-radius: 50%;
  overflow: hidden; background: var(--ink); color: #fff;
  display: grid; place-items: center;
  font-family: var(--serif); font-size: 21px; font-weight: 600;
  border: 2px solid var(--brass);
}
.mg-topper-ph img { width: 100%; height: 100%; object-fit: cover; }
.mg-topper h4 { font-size: 13px; margin-bottom: 3px; line-height: 1.22; }
.mg-topper span { font: 600 10.5px/1.3 var(--sans); color: var(--vermilion); letter-spacing: .02em; display: block; }

/* --- why us ------------------------------------------------------------- */
/* Numbered editorial list rather than icon cards — icon-card rows are the
   most generic pattern on the web. */
.mg-why { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 0; }
.mg-why-item { padding: clamp(14px, 1.6vw, 20px); border-left: 1px solid var(--ink-line); }
.mg-why-item:first-child { border-left: 0; }
.mg-why-n {
  font-family: var(--serif); font-weight: 600; font-size: 13px;
  color: var(--brass); display: block; margin-bottom: 9px;
}
.mg-why-item h4 { font-size: 15.5px; margin-bottom: 6px; }
.mg-why-item p { font-size: 14px; color: #93a6b6; margin: 0; }

/* --- faculty ------------------------------------------------------------ */
.mg-fac { display: grid; grid-template-columns: repeat(auto-fill, minmax(158px, 1fr)); gap: var(--gap); }
.mg-fac-c { background: #fff; border: var(--rule); overflow: hidden; transition: transform .2s; }
.mg-fac-c:hover { transform: translateY(-3px); }
.mg-fac-ph { aspect-ratio: 4/5; background: var(--paper-2); display: grid; place-items: center; overflow: hidden; }
.mg-fac-ph img { width: 100%; height: 100%; object-fit: cover; }
.mg-fac-ph span { font-family: var(--serif); font-size: 40px; color: var(--paper-edge); }
.mg-fac-b { padding: 10px 11px; border-top: 3px solid var(--vermilion); }
.mg-fac-b h4 { font-size: 13.5px; margin-bottom: 3px; }
.mg-fac-b span { font-size: 12.5px; color: var(--text-mute); display: block; }
.mg-fac-b p { font-size: 13px; color: var(--text-mute); margin: 9px 0 0; }

/* --- testimonials ------------------------------------------------------- */
.mg-quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(252px, 1fr)); gap: var(--gap); }
.mg-quote { background: #fff; border: var(--rule); padding: 20px 18px 16px; position: relative; }
.mg-quote::before {
  content: "\201C"; position: absolute; top: 6px; left: 20px;
  font-family: var(--serif); font-size: 78px; line-height: 1; color: var(--paper-edge);
}
.mg-quote p { position: relative; font-size: 13.5px; color: var(--text); margin: 0 0 13px; font-style: italic; line-height: 1.55; }
.mg-quote-w { display: flex; align-items: center; gap: 12px; padding-top: 16px; border-top: var(--rule); }
.mg-quote-a {
  width: 42px; height: 42px; flex: none; border-radius: 50%; overflow: hidden;
  background: var(--ink); color: #fff; display: grid; place-items: center;
  font-family: var(--serif); font-size: 17px;
}
.mg-quote-a img { width: 100%; height: 100%; object-fit: cover; }
.mg-quote-w b { display: block; font-family: var(--serif); font-weight: 600; font-size: 15px; color: var(--ink); }
.mg-quote-w small { font-size: 12.5px; color: var(--text-mute); }

/* --- campuses ----------------------------------------------------------- */
.mg-camps { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--gap); }
.mg-camp { background: #fff; border: var(--rule); overflow: hidden; display: flex; flex-direction: column; }
.mg-camp-ph { height: 148px; background: var(--ink); display: grid; place-items: center; overflow: hidden; }
.mg-camp-ph img { width: 100%; height: 100%; object-fit: cover; }
.mg-camp-ph i { font-size: 34px; color: var(--ink-line); }
.mg-camp-b { padding: 15px; display: flex; flex-direction: column; flex: 1; }
.mg-camp-b h4 { font-size: 21px; margin-bottom: 8px; }
.mg-camp-addr { font-size: 13.5px; color: var(--vermilion); font-weight: 600; margin-bottom: 10px; }
.mg-camp-b p { font-size: 13.5px; color: var(--text-mute); margin: 0 0 18px; }
.mg-camp-b a {
  margin-top: auto; align-self: flex-start;
  font: 700 12px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink); border-bottom: 2px solid var(--vermilion); padding-bottom: 3px;
}

/* --- enrol / form ------------------------------------------------------- */
.mg-enrol-grid { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,420px); gap: clamp(28px, 4vw, 60px); align-items: center; }
.mg-enrol h2 { font-size: clamp(28px, 4vw, 44px); }
.mg-enrol-pts { list-style: none; margin: 26px 0 0; padding: 0; }
.mg-enrol-pts li { display: flex; gap: 12px; align-items: flex-start; padding: 9px 0; font-size: 15px; color: #b9c9d6; }
.mg-enrol-pts i { color: var(--brass); margin-top: 4px; }
.mg-form { background: var(--paper); padding: clamp(22px, 3vw, 32px); border-top: 4px solid var(--vermilion); }
.mg-form h4 { font-size: 21px; margin-bottom: 4px; }
.mg-form > p { font-size: 13px; color: var(--text-mute); margin: 0 0 18px; }
.mg-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.mg-form input, .mg-form select {
  width: 100%; font-family: var(--sans); font-size: 14.5px; color: var(--ink);
  background: #fff; border: 1px solid var(--paper-edge); border-radius: 2px;
  padding: 12px 13px; margin-bottom: 10px; transition: border-color .18s;
}
.mg-form input:focus, .mg-form select:focus { outline: 0; border-color: var(--ink); }
.mg-form input::placeholder { color: #9aa7b2; }
.mg-consent { display: flex; gap: 8px; align-items: flex-start; font-size: 11.5px; color: var(--text-mute); margin: 4px 0 16px; }
.mg-submit {
  width: 100%; background: var(--vermilion); color: #fff; border: 0; border-radius: 2px;
  font: 700 13.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  padding: 16px; cursor: pointer; transition: background .2s;
}
.mg-submit:hover { background: var(--vermilion-d); }
.mg-apply-big {
  display: inline-block; background: var(--vermilion); color: #fff;
  font: 700 14px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  padding: 18px 34px; border-radius: 2px;
}

/* --- footer ------------------------------------------------------------- */
.mg-foot { background: #0a1420; color: #8b9daa; padding: clamp(40px, 5vw, 68px) 0 0; font-size: 13.5px; }
.mg-foot-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1.3fr; gap: clamp(22px, 3vw, 44px); }
.mg-foot h5 {
  color: #fff; font-family: var(--sans); font-weight: 700; font-size: 11.5px;
  letter-spacing: .16em; text-transform: uppercase; margin-bottom: 16px;
}
.mg-foot a { color: #8b9daa; display: block; padding: 5px 0; transition: color .18s, padding-left .18s; }
.mg-foot a:hover { color: #fff; padding-left: 5px; }
.mg-foot-brand img { height: 40px; filter: brightness(0) invert(1); margin-bottom: 14px; }
.mg-foot-brand p { max-width: 32ch; margin: 0 0 16px; }
.mg-foot-soc { display: flex; gap: 8px; }
.mg-foot-soc a {
  width: 32px; height: 32px; display: grid; place-items: center; padding: 0;
  border: 1px solid #223546; border-radius: 50%;
}
.mg-foot-soc a:hover { background: var(--vermilion); border-color: var(--vermilion); color: #fff; }
.mg-foot-c { border-top: 1px solid #16283a; margin-top: clamp(30px, 4vw, 48px); padding: 20px 0; font-size: 12.5px; text-align: center; }
.mg-contact-l { display: flex; gap: 10px; align-items: flex-start; padding: 6px 0; }
.mg-contact-l i { color: var(--vermilion); margin-top: 4px; width: 14px; flex: none; }

/* --- whatsapp ----------------------------------------------------------- */
.mg-wa {
  position: fixed; right: 18px; bottom: 18px; z-index: 90;
  width: 54px; height: 54px; border-radius: 50%;
  background: #25d366; color: #fff; display: grid; place-items: center;
  font-size: 27px; box-shadow: 0 6px 22px rgba(0,0,0,.28);
  transition: transform .2s;
}
.mg-wa:hover { transform: scale(1.08); color: #fff; }

/* --- preview mode ------------------------------------------------------- */
.mg-preview-bar {
  position: sticky; top: 0; z-index: 200;
  background: repeating-linear-gradient(45deg, #1b2f40, #1b2f40 12px, #16283a 12px, #16283a 24px);
  color: #fff; font: 500 13.5px/1.4 var(--sans);
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  padding: 10px clamp(16px, 4vw, 32px);
}
.mg-preview-bar i { color: var(--brass); }
.mg-preview-bar a {
  flex: none; color: #fff; border: 1px solid rgba(255,255,255,.4);
  border-radius: 2px; padding: 6px 14px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em; font-size: 11.5px;
}
.mg-preview-bar a:hover { background: var(--vermilion); border-color: var(--vermilion); }
.mg-hidden-chip {
  display: inline-block; vertical-align: middle;
  background: var(--vermilion); color: #fff;
  font: 700 9.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  padding: 3px 7px; border-radius: 2px; margin-left: 6px;
}
/* Dim hidden items slightly in preview so drafts read as drafts. */
.mg-preview .mg-topper:has(.mg-hidden-chip),
.mg-preview .mg-fac-c:has(.mg-hidden-chip),
.mg-preview .mg-why-item:has(.mg-hidden-chip),
.mg-preview .mg-camp:has(.mg-hidden-chip),
.mg-preview .mg-quote:has(.mg-hidden-chip),
.mg-preview .mg-stat:has(.mg-hidden-chip) { outline: 2px dashed var(--vermilion); outline-offset: 3px; opacity: .82; }

/* --- entrance motion ---------------------------------------------------- */
/* One orchestrated reveal on load, staggered. Respects reduced-motion. */
@media (prefers-reduced-motion: no-preference) {
  .mg-rise { opacity: 0; transform: translateY(14px); animation: mgRise .7s cubic-bezier(.22,.7,.3,1) forwards; }
  .mg-rise-1 { animation-delay: .05s; }
  .mg-rise-2 { animation-delay: .15s; }
  .mg-rise-3 { animation-delay: .25s; }
  .mg-rise-4 { animation-delay: .35s; }
  @keyframes mgRise { to { opacity: 1; transform: none; } }
}

/* --- responsive --------------------------------------------------------- */
@media (max-width: 1080px) {
  /* The notice board carries time-sensitive admissions info, so it moves
     above the course list on narrow screens rather than being hidden. */
  .mg-foot-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 860px) {
  .mg-hero-grid { grid-template-columns: 1fr; padding-bottom: clamp(28px, 5vw, 48px); }
  .mg-hero-media { order: -1; }
  .mg-hero-media::before { display: none; }
  .mg-enrol-grid { grid-template-columns: 1fr; }
  .mg-why-item { border-left: 0; border-top: 1px solid var(--ink-line); }
  .mg-why-item:first-child { border-top: 0; }
  .mg-nav {
    flex-direction: column; align-items: stretch; gap: 0;
    padding: 12px 0 18px; border-top: var(--rule); margin-top: 0;
  }
  .mg-nav .nav-link { padding: 12px 2px !important; border-bottom: var(--rule); }
  .mg-nav .nav-link::after { display: none; }
  .mg-btn-ghost, .mg-btn-solid { text-align: center; margin-top: 10px; }
}
@media (max-width: 620px) {
  /* Honour roll: on a phone a stacked grid of 45 cards produced a ~3000px
     section. Each exam group becomes a horizontal swipe row instead — same
     density, a fraction of the height, and a familiar gesture. All cards are
     shown, so the "show all" button is redundant here. */
  .mg-roll {
    display: flex; gap: 10px;
    overflow-x: auto; -webkit-overflow-scrolling: touch;
    scroll-snap-type: x mandatory;
    padding-bottom: 8px;
    /* Bleed to the screen edges so the row reads as scrollable. */
    margin-inline: calc(-1 * clamp(16px, 4vw, 32px));
    padding-inline: clamp(16px, 4vw, 32px);
    scrollbar-width: none;
  }
  .mg-roll::-webkit-scrollbar { display: none; }
  .mg-topper { flex: 0 0 116px; scroll-snap-align: start; }
  .mg-topper--extra { display: block; }
  .mg-roll-more { display: none; }
  .mg-roll-group { margin-bottom: 18px; }

  /* Two course cards per row rather than one full-width card. */
  .mg-course-grid { grid-template-columns: 1fr 1fr; }
  .mg-course { padding: 10px 10px 9px; }
  .mg-course h3 { font-size: 13px; }
  .mg-course p { display: none; }          /* name + price is enough at this size */
  .mg-price { font-size: 15px; }

  /* Footer in two columns instead of four stacked. */
  .mg-foot-grid { grid-template-columns: 1fr 1fr; gap: 18px; }
  .mg-foot-brand { grid-column: 1 / -1; }

  .mg-enrol-pts li { font-size: 14px; padding: 6px 0; }
  .mg-quotes { grid-template-columns: 1fr; }
  .mg-fac { grid-template-columns: 1fr 1fr; }
  .mg-banner-img { height: auto; max-height: 68vh; }
  .mg-hero-intro { display: block; padding-bottom: 16px; }
  .mg-hero-intro .mg-hero-acts { margin-top: 14px; }
  .mg-roll-head h3 { font-size: 16px; }

  .mg-stat { border-left: 0; padding-left: 0; }
  .mg-stats-grid { grid-template-columns: 1fr 1fr; gap: 20px 0; }
  .mg-foot-grid { grid-template-columns: 1fr; }
  .mg-form-row { grid-template-columns: 1fr; }
  .mg-util .mg-shell { justify-content: center; }
  .mg-util-l { justify-content: center; gap: 14px; font-size: 12.5px; }
}

/* ==========================================================================
   Public inner pages (login, admissions, registration)
   Uses the same tokens as the landing page so the whole public surface reads
   as one site. Previously these pages rendered the admin chrome.
   ========================================================================== */
.mg-page { padding: clamp(22px, 3vw, 40px) 0 clamp(34px, 5vw, 64px); min-height: 60vh; }
.mg-page-head { margin-bottom: clamp(18px, 2.4vw, 30px); padding-bottom: 14px; border-bottom: 2px solid var(--ink); }
.mg-page-head h1 { font-size: clamp(26px, 3.4vw, 40px); }
.mg-page-head p { margin: 8px 0 0; color: var(--text-mute); font-size: 15px; max-width: 68ch; }
.mg-flash { margin-bottom: 18px; }
.mg-flash .alert { border-radius: 2px; }

/* Programme groups on the admissions page */
.mg-prog { margin-bottom: clamp(20px, 2.6vw, 34px); }
.mg-prog-head { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--paper-edge); padding-bottom: 7px; margin-bottom: 14px; }
.mg-prog-head h2 { font-size: clamp(18px, 2vw, 23px); }
.mg-prog-head span { margin-left: auto; font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--vermilion); }
.mg-prog-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(236px, 1fr)); gap: var(--gap); }
.mg-prog-card {
  display: flex; flex-direction: column; background: #fff;
  border: var(--rule); border-left: 3px solid var(--ink);
  padding: 15px 15px 13px; transition: border-color .2s, transform .2s;
}
.mg-prog-card:hover { border-left-color: var(--vermilion); transform: translateY(-2px); }
.mg-prog-card h3 { font-size: 15.5px; margin-bottom: 6px; line-height: 1.25; }
.mg-prog-card p { font-size: 12.5px; color: var(--text-mute); margin: 0 0 11px; line-height: 1.5; }
.mg-prog-foot { margin-top: auto; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding-top: 11px; border-top: var(--rule); }
.mg-prog-cta {
  flex: none; background: var(--vermilion); color: #fff;
  font: 700 11.5px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase;
  padding: 9px 15px; border-radius: 2px; transition: background .2s;
}
.mg-prog-cta:hover { background: var(--ink); color: #fff; }

/* Cart / current selection */
.mg-cart { border: 1px solid var(--ink); background: #fff; margin-bottom: clamp(20px, 3vw, 32px); }
.mg-cart-h { background: var(--ink); color: #fff; padding: 11px 16px; font: 700 12px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.mg-cart-row { display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-bottom: 1px dashed var(--paper-edge); font-size: 14.5px; }
.mg-cart-row b { margin-left: auto; font-family: var(--serif); font-size: 16px; }
.mg-cart-row a { color: var(--text-mute); }
.mg-cart-row a:hover { color: var(--vermilion); }
.mg-cart-f { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 16px; background: var(--paper-2); }
.mg-cart-f b { font-family: var(--serif); font-size: 19px; color: var(--ink); }
.mg-cart-go { background: var(--vermilion); color: #fff; font: 700 12.5px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; padding: 13px 20px; border-radius: 2px; }
.mg-cart-go:hover { background: var(--ink); color: #fff; }

.mg-empty, .mg-help { background: #fff; border: var(--rule); border-left: 3px solid var(--brass); padding: 18px 20px; font-size: 14.5px; color: var(--text); }
.mg-help { margin-top: 10px; }
.mg-empty a, .mg-help a { color: var(--vermilion); font-weight: 600; }

/* ---- Login / auth card ------------------------------------------------- */
.mg-auth { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,420px); gap: clamp(24px, 4vw, 56px); align-items: center; }
.mg-auth-pitch h2 { font-size: clamp(24px, 3vw, 36px); margin-bottom: 12px; }
.mg-auth-pitch p { color: var(--text-mute); font-size: 15px; max-width: 46ch; }
.mg-auth-pitch ul { list-style: none; padding: 0; margin: 20px 0 0; }
.mg-auth-pitch li { display: flex; gap: 11px; align-items: flex-start; padding: 7px 0; font-size: 14.5px; }
.mg-auth-pitch li i { color: var(--vermilion); margin-top: 4px; }
.mg-card { background: #fff; border: var(--rule); border-top: 4px solid var(--vermilion); padding: clamp(20px, 3vw, 30px); }
.mg-card h3 { font-size: 21px; margin-bottom: 4px; }
.mg-card > p { font-size: 13.5px; color: var(--text-mute); margin: 0 0 18px; }
.mg-field { margin-bottom: 13px; }
.mg-field label { display: block; font: 600 11.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--text-mute); margin-bottom: 6px; }
.mg-card input, .mg-card select, .mg-card textarea {
  width: 100%; font-family: var(--sans); font-size: 15px; color: var(--ink);
  background: #fff; border: 1px solid var(--paper-edge); border-radius: 2px;
  padding: 12px 13px; transition: border-color .18s;
}
.mg-card input:focus, .mg-card select:focus, .mg-card textarea:focus { outline: 0; border-color: var(--ink); }
.mg-card-btn {
  width: 100%; background: var(--vermilion); color: #fff; border: 0; border-radius: 2px;
  font: 700 13.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase;
  padding: 15px; cursor: pointer; transition: background .2s; margin-top: 4px;
}
.mg-card-btn:hover { background: var(--vermilion-d); }
.mg-card-alt { margin-top: 16px; padding-top: 15px; border-top: var(--rule); font-size: 13.5px; color: var(--text-mute); text-align: center; }
.mg-card-alt a { color: var(--vermilion); font-weight: 600; }

@media (max-width: 860px) {
  .mg-auth { grid-template-columns: 1fr; }
  .mg-auth-pitch { order: 2; }
}
@media (max-width: 620px) {
  .mg-prog-grid { grid-template-columns: 1fr 1fr; }
  .mg-prog-card { padding: 11px; }
  .mg-prog-card h3 { font-size: 13.5px; }
  .mg-prog-card p { display: none; }
}

/* ==========================================================================
   The opener — an information band, not a branding band
   --------------------------------------------------------------------------
   Mobile-first and text-only by design: no image above the fold except the
   logo, no JavaScript, so the largest element painted is a text node. That is
   the cheapest possible first screen on a 4G connection, which is what most of
   this audience is on.

   Appended as a self-contained block using min-width for its desktop step. The
   rest of this file is max-width only, and inverting 700 lines of cascade with
   no visual-regression harness would silently break every section below.
   ========================================================================== */
.mg-open { padding: clamp(16px, 2.4vw, 30px) 0 clamp(18px, 2.6vw, 32px); }

.mg-open-where {
  display: flex; flex-wrap: wrap; gap: 6px 18px;
  font: 600 11.5px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 14px;
}
.mg-open-where i { margin-right: 5px; }

/* line-height 1.35 rather than the 1.08 used elsewhere: Devanagari has taller
   ascenders and descenders than Latin and clips at tight leading. */
.mg-open-h1 {
  color: #fff;
  font-size: clamp(23px, 3.1vw, 40px);
  line-height: 1.35;
  margin: 0;
  max-width: 30ch;
}
.mg-open-sub { color: #a9bccb; font-size: clamp(14px, 1.4vw, 16.5px); margin: 10px 0 0; max-width: 52ch; }

/* The ledger. Numbers are derived from the honour roll, so they cannot contradict
   it. Reads as bookkeeping, and bookkeeping reads as true where a rounded
   "1000+" reads as marketing. */
.mg-ledger {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin: 16px 0 0; padding: 0;
}
.mg-chip {
  display: inline-flex; align-items: baseline; gap: 6px;
  background: rgba(255,255,255,.07);
  border: 1px solid var(--ink-line);
  border-left: 3px solid var(--brass);
  border-radius: 2px;
  padding: 7px 11px;
  font: 500 12.5px/1.2 var(--sans); color: #cfdae4;
  transition: background .18s, border-color .18s;
}
.mg-ledger:hover .mg-chip { background: rgba(255,255,255,.12); border-left-color: var(--vermilion); }
.mg-chip b { font-family: var(--serif); font-weight: 600; font-size: 17px; color: #fff; }

/* One named achiever, as text. Proof with a name costs ~46px here versus ~450px
   for a photo grid, and the fold cannot afford the grid. */
.mg-open-lead {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 4px 9px;
  margin: 16px 0 0; padding: 11px 13px;
  background: rgba(184,134,59,.1); border-left: 3px solid var(--brass);
  font-size: 13.5px; color: #cfdae4;
}
.mg-open-lead i { color: var(--brass); }
.mg-open-lead strong { color: #fff; font-family: var(--serif); font-weight: 600; font-size: 15.5px; }
.mg-open-lead span { color: var(--brass); font-weight: 600; }

.mg-open-acts { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 20px; }
.mg-open-acts a {
  font: 700 12.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  padding: 14px 20px; border-radius: 2px; transition: all .2s;
}
/* The phone is a first-class action, not a footer detail: for many parents here a
   call is the preferred way to enquire. 48px min height for a reliable tap target. */
.mg-cta-call {
  background: #fff; color: var(--ink) !important;
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 48px; text-transform: none; letter-spacing: 0; font-size: 14.5px;
}
.mg-cta-call:hover { background: var(--brass); color: var(--ink) !important; }
.mg-open-acts .mg-cta-1, .mg-open-acts .mg-cta-2 { min-height: 48px; display: inline-flex; align-items: center; }

@media (min-width: 900px) {
  .mg-open { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 40px; align-items: center; }
  .mg-open-where, .mg-open-h1, .mg-open-sub { grid-column: 1; }
  .mg-ledger    { grid-column: 2; grid-row: 1 / span 3; align-content: center; }
  .mg-open-lead { grid-column: 1 / -1; }
  .mg-open-acts { grid-column: 1 / -1; }
}

/* --- opener announcement (the hook) ------------------------------------- */
/* One dated, concrete thing — an entrance test, admissions closing. Every leader
   in this market leads with an offer rather than a tagline. Rendered only when the
   owner has something live, so the opener never depends on it. */
.mg-offer {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: clamp(14px, 1.8vw, 20px) 0 0;
  padding: 12px 14px;
  background: linear-gradient(90deg, rgba(214,55,28,.16), rgba(184,134,59,.10));
  border: 1px solid var(--vermilion);
  border-radius: 2px;
  color: #fff;
  transition: background .2s;
}
.mg-offer:not(.mg-offer--flat):hover { background: linear-gradient(90deg, rgba(214,55,28,.28), rgba(184,134,59,.16)); }
.mg-offer-tag {
  flex: none; align-self: flex-start;
  background: var(--vermilion); color: #fff;
  font: 700 10px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase;
  padding: 6px 9px; border-radius: 2px;
}
.mg-offer-body { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.mg-offer-body b { font-family: var(--serif); font-weight: 600; font-size: clamp(15px, 1.7vw, 19px); line-height: 1.3; color: #fff; }
.mg-offer-when { font-size: 13px; color: var(--brass); font-weight: 600; }
.mg-offer-more { font-size: 12.5px; color: #a9bccb; }
.mg-offer-cta {
  flex: none; background: #fff; color: var(--ink);
  font: 700 11.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  padding: 12px 15px; border-radius: 2px; min-height: 44px;
  display: inline-flex; align-items: center;
}
.mg-offer:hover .mg-offer-cta { background: var(--brass); }
@media (max-width: 620px) {
  .mg-offer-cta { width: 100%; justify-content: center; }
}

/* --- poster gallery, moved below the stats ------------------------------ */
/* Evidence-led: a rotating hero communicates roughly one slide (Notre Dame, 3.7M
   visits: 1.07% clicked any slide, 89% of those slide 1), so load-bearing proof
   must not sit behind it. Galleries do work once a user is browsing — 72% advance
   in product galleries — so the posters live here, below the proof, with edge-peek
   to signal there is more. */
.mg-gallery { background: var(--paper-2); border-top: var(--rule); border-bottom: var(--rule); padding: clamp(20px, 2.6vw, 34px) 0; }
.mg-gallery .mg-head { margin-bottom: clamp(12px, 1.4vw, 18px); }
.mg-gallery .carousel-inner { overflow: visible; }
.mg-gallery .carousel-item { transition: transform .45s ease-in-out; }
.mg-banner-img { width: 100%; height: clamp(220px, 30vw, 460px); object-fit: contain; background: #fff; border: 1px solid var(--paper-edge); }
.mg-gallery .carousel-indicators { position: static; margin: 12px 0 0; }
.mg-gallery .carousel-indicators [data-bs-target] { width: 26px; height: 4px; border: 0; background: var(--paper-edge); }
.mg-gallery .carousel-indicators .active { background: var(--vermilion); }
.mg-gallery .carousel-control-prev, .mg-gallery .carousel-control-next { width: 7%; filter: invert(1); opacity: .45; }
.mg-gallery .carousel-control-prev:hover, .mg-gallery .carousel-control-next:hover { opacity: .9; }
.mg-gallery .mg-slide-cap {
  position: static; margin-top: 8px; padding: 0;
  background: none; color: var(--text); text-align: center;
  font: 500 13px/1.4 var(--sans);
}
.mg-gallery .mg-slide-cap strong { color: var(--ink); font-family: var(--serif); font-weight: 600; }

/* --- exam coverage grid ------------------------------------------------- */
/* The print poster's logo cluster, rebuilt as markup. Dense on purpose: a long
   list of named exams is itself the argument, and this is the layout that reflows
   instead of letterboxing on a phone. */
.mg-exams { background: var(--paper); padding: clamp(22px, 2.8vw, 38px) 0; border-bottom: var(--rule); }
.mg-exam-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(196px, 1fr)); gap: 8px; }
.mg-exam {
  display: flex; align-items: flex-start; gap: 9px;
  background: #fff; border: var(--rule); border-left: 3px solid var(--brass);
  padding: 10px 11px; transition: border-color .18s, transform .18s;
}
a.mg-exam:hover { border-left-color: var(--vermilion); transform: translateY(-2px); }
.mg-exam-i { width: 15px; height: 15px; flex: none; margin-top: 2px; color: var(--brass); }
.mg-exam b { display: block; font-family: var(--serif); font-weight: 600; font-size: 14px; color: var(--ink); line-height: 1.25; }
.mg-exam small { display: block; font-size: 11.5px; color: var(--text-mute); margin-top: 2px; line-height: 1.35; }
@media (max-width: 620px) {
  .mg-exam-grid { grid-template-columns: 1fr 1fr; gap: 7px; }
  .mg-exam { padding: 8px 9px; }
  .mg-exam b { font-size: 12.5px; }
  .mg-exam small { font-size: 10.5px; }
}

/* ==========================================================================
   Three-panel opener
   --------------------------------------------------------------------------
   Replaces a ~500px band that was mostly empty. Density comes from three
   panels that each answer one question — who are you, why act now, does it
   work — rather than from a single fixed-aspect creative that cannot reflow.

   Mobile order puts the hook first (it is the action), then proof, then
   credentials. Desktop widens to three columns with the hook centre stage.
   ========================================================================== */
.mg-open3 {
  display: grid; grid-template-columns: 1fr; gap: 10px;
  padding: clamp(12px, 1.6vw, 20px) 0 clamp(16px, 2vw, 24px);
  align-items: stretch;
}
.mg-p {
  display: flex; flex-direction: column;
  background: rgba(255,255,255,.045);
  border: 1px solid var(--ink-line);
  border-radius: 2px;
  padding: 14px;
  min-width: 0;
}
.mg-p-h {
  display: flex; align-items: baseline; gap: 8px;
  font: 700 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  color: var(--brass); margin-bottom: 11px;
  padding-bottom: 8px; border-bottom: 1px solid var(--ink-line);
}
.mg-p-h b { margin-left: auto; font-family: var(--serif); font-size: 17px; color: #fff; letter-spacing: 0; }

/* ---- Panel A: credibility ---- */
.mg-p-cred .mg-cred-headline { font-family: var(--serif); font-weight: 600; font-size: clamp(16px, 1.5vw, 20px); line-height: 1.32; letter-spacing: 0; color: var(--paper); margin: 0 0 14px; text-transform: none; }
.mg-cred-line { margin: 0 0 10px; font-size: 12.5px; color: var(--brass); font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.mg-cred-line i { margin-right: 5px; }
.mg-cred-stats { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px 12px; }
.mg-cred-stats li { min-width: 0; }
.mg-cred-stats b { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(20px, 2.2vw, 27px); color: #fff; line-height: 1; }
.mg-cred-stats span { display: block; font-size: 11.5px; color: #93a6b6; margin-top: 3px; line-height: 1.3; }
.mg-cred-exams { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid var(--ink-line); font-size: 12.5px; color: #cfdae4; }
.mg-cred-exams b { font-family: var(--serif); font-size: 19px; color: var(--brass); margin-right: 3px; }
.mg-cred-exams a { color: var(--brass); font-weight: 600; margin-left: 6px; white-space: nowrap; }

/* ---- Panel B: the hook. The loudest thing on the screen, on purpose. ---- */
.mg-p-offer {
  background: linear-gradient(150deg, var(--vermilion), var(--vermilion-d));
  border-color: var(--vermilion);
  justify-content: center;
}
.mg-p-tag {
  align-self: flex-start; background: #fff; color: var(--vermilion-d);
  font: 700 10px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase;
  padding: 5px 9px; border-radius: 2px; margin-bottom: 11px;
}
.mg-p-offer-t {
  color: #fff; font-size: clamp(21px, 2.6vw, 31px); line-height: 1.22; margin: 0;
  font-family: var(--serif); font-weight: 600;
}
.mg-p-offer-when { margin: 9px 0 0; font-size: 13.5px; font-weight: 700; color: #ffe0d6; }
.mg-p-offer-more { margin: 7px 0 0; font-size: 12.5px; color: rgba(255,255,255,.9); line-height: 1.45; }
.mg-p-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 15px; }
.mg-p-acts a {
  font: 700 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
  padding: 13px 16px; border-radius: 2px; min-height: 46px;
  display: inline-flex; align-items: center; gap: 7px; transition: all .2s;
}
.mg-p-offer .mg-cta-1 { background: #fff; color: var(--vermilion-d) !important; }
.mg-p-offer .mg-cta-1:hover { background: var(--ink); color: #fff !important; }
.mg-p-offer .mg-cta-call { background: rgba(0,0,0,.28); color: #fff !important; text-transform: none; letter-spacing: 0; font-size: 14px; }
.mg-p-offer .mg-cta-call:hover { background: var(--ink); }

/* ---- Panel C: toppers with faces ---- */
.mg-p-top { background: rgba(255,255,255,.045); }
a.mg-p-top:hover { border-color: var(--brass); }
.mg-top-faces { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.mg-face { margin: 0; text-align: center; min-width: 0; }
.mg-face img {
  width: 100%; max-width: 74px; aspect-ratio: 1; height: auto;
  margin: 0 auto 5px; border-radius: 50%; object-fit: cover;
  border: 2px solid var(--brass);
}
.mg-face b { display: block; font-family: var(--serif); font-weight: 600; font-size: 14.5px; color: #fff; line-height: 1; }
.mg-face span { display: block; font-size: 10px; color: var(--brass); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; margin-top: 2px; }
.mg-face small { display: block; font-size: 10px; color: #93a6b6; margin-top: 3px; line-height: 1.25;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mg-top-ledger {
  display: flex; flex-wrap: wrap; gap: 5px 10px;
  margin-top: 11px; padding-top: 9px; border-top: 1px solid var(--ink-line);
  font-size: 11px; color: #93a6b6;
}
.mg-top-ledger b { font-family: var(--serif); font-size: 13.5px; color: #fff; margin-right: 2px; }

@media (min-width: 860px) {
  /* Hook centre stage, credentials left, proof right. */
  .mg-open3 { grid-template-columns: 0.82fr 1.15fr 1.03fr; gap: 12px; }
  .mg-p-offer { order: 0; }
  .mg-p-cred  { order: -1; }
  .mg-p       { padding: 16px; }
  .mg-top-faces { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 859px) {
  /* Hook first on a phone: it is the action. Then proof, then credentials. */
  .mg-p-offer { order: -1; }
  .mg-p-top   { order: 0; }
  .mg-p-cred  { order: 1; }
  .mg-top-faces { grid-template-columns: repeat(3, 1fr); }
  .mg-p-acts a { flex: 1 1 auto; justify-content: center; }
}

/* --- Google rating badge ------------------------------------------------- */
/* Third-party credibility, checkable in one tap. Worth more than any claim the
   site makes about itself, which is why it sits in the credibility panel rather
   than being buried in the footer. */
.mg-grate {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 9px 10px;
  background: rgba(184,134,59,.12); border-left: 3px solid var(--brass);
  transition: background .18s;
}
a.mg-grate:hover { background: rgba(184,134,59,.22); }
.mg-grate-n { font-family: var(--serif); font-weight: 600; font-size: 21px; color: #fff; line-height: 1; }
.mg-grate-s { color: var(--brass); font-size: 10.5px; letter-spacing: 1px; }
.mg-grate-s .mg-star-off { opacity: .28; }
.mg-grate-l { font-size: 11.5px; color: #cfdae4; }

/* --- life at the academy + notification panel ---------------------------- */
/* One real photograph beside a bordered notice panel. The photo supplies the
   warmth a text-only opener cannot; the notice panel is what makes an institute
   site read as official rather than promotional. */
.mg-life { background: var(--paper-2); padding: clamp(20px, 2.6vw, 34px) 0; border-bottom: var(--rule); }
.mg-life-grid { display: grid; grid-template-columns: 1fr; gap: 14px; align-items: start; }

.mg-life-photo { margin: 0; position: relative; background: var(--ink); overflow: hidden; }
.mg-life-photo img { width: 100%; height: auto; display: block; }
.mg-life-photo figcaption {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 26px 14px 11px;
  background: linear-gradient(transparent, rgba(9,17,24,.9));
  color: #fff;
}
.mg-life-photo figcaption b { display: block; font-family: var(--serif); font-weight: 600; font-size: clamp(15px, 1.7vw, 20px); }
.mg-life-photo figcaption span { display: block; font-size: 12.5px; color: #cfdae4; margin-top: 2px; }

/* Notice panel. Square corners, a hard border and a tab — the visual language of
   an official noticeboard rather than a marketing card. */
.mg-notif { border: 1px solid var(--ink); background: #fff; }
.mg-notif-tab {
  display: inline-block; margin: -1px 0 0 -1px;
  background: #fff; border: 1px solid var(--ink); border-bottom-color: #fff;
  padding: 9px 18px;
  font: 700 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  color: var(--vermilion);
}
.mg-notif-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--ink); max-height: 340px; overflow-y: auto; }
.mg-notif-list li { border-bottom: 1px solid var(--paper-edge); }
.mg-notif-list li:last-child { border-bottom: 0; }
.mg-notif-list a, .mg-notif-list > li > span {
  display: grid; grid-template-columns: 14px 1fr; gap: 3px 8px;
  padding: 12px 14px; transition: background .15s;
}
.mg-notif-list a:hover { background: var(--paper-2); }
.mg-notif-list i { color: var(--vermilion); font-size: 11px; margin-top: 4px; }
.mg-notif-t { font: 600 14px/1.4 var(--sans); color: var(--ink); }
.mg-notif-list a:hover .mg-notif-t { color: var(--vermilion); }
.mg-notif-list small { grid-column: 2; font-size: 12px; color: var(--text-mute); line-height: 1.4; }
.mg-new {
  display: inline-block; vertical-align: 2px; margin-left: 6px;
  background: var(--vermilion); color: #fff; font-style: normal;
  font: 700 8.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase;
  padding: 3px 5px; border-radius: 2px;
}

@media (min-width: 900px) {
  .mg-life-grid { grid-template-columns: 1.5fr 1fr; gap: 20px; }
}

/* --- promotional poster grid -------------------------------------------- */
/* Square designed artwork, shown all at once in a reflowing grid rather than
   rotated. A hero carousel communicates roughly one slide, and squares in a wide
   carousel letterbox on a phone; a grid avoids both problems. */
.mg-posters { background: var(--paper); }
.mg-poster-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(330px, 1fr)); gap: var(--gap); }
.mg-poster {
  margin: 0; display: block; background: #fff;
  border: var(--rule); overflow: hidden;
  transition: transform .2s, border-color .2s, box-shadow .2s;
}
a.mg-poster:hover { transform: translateY(-3px); border-color: var(--vermilion); box-shadow: var(--shadow); }
.mg-poster img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; }
.mg-poster figcaption { padding: 10px 12px 11px; border-top: 3px solid var(--brass); }
.mg-poster figcaption b { display: block; font-family: var(--serif); font-weight: 600; font-size: 14.5px; color: var(--ink); line-height: 1.25; }
.mg-poster figcaption span { display: block; font-size: 12px; color: var(--text-mute); margin-top: 3px; line-height: 1.4; }
@media (max-width: 620px) {
  .mg-poster-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .mg-poster figcaption { padding: 8px 9px 9px; }
  .mg-poster figcaption b { font-size: 12.5px; }
  .mg-poster figcaption span { display: none; }
}

/* --- Enquiry form (interest capture, no cart) ------------------------------- */
.mg-enq { display: grid; grid-template-columns: minmax(0,1fr) 420px; gap: clamp(20px, 3vw, 44px); align-items: start; padding-bottom: 12px; }
.mg-enq-intro { font-size: 16.5px; line-height: 1.65; color: var(--text); margin-bottom: 18px; }
.mg-enq-points { list-style: none; padding: 0; margin: 0 0 22px; }
.mg-enq-points li { display: flex; gap: 10px; align-items: baseline; padding: 7px 0; font-size: 15px; color: var(--text); }
.mg-enq-points i { color: var(--vermilion); font-size: 12px; }
.mg-enq-call { border-top: 1px solid var(--paper-edge); padding-top: 16px; font-size: 15px; color: var(--text-mute); }
.mg-enq-call a { font-weight: 700; color: var(--ink); }

.mg-enq-card { border: 1px solid var(--ink); background: #fff; padding: clamp(18px, 2.4vw, 28px); }
.mg-enq-card label { display: block; font: 700 12px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--ink); margin: 16px 0 7px; }
.mg-enq-card label:first-of-type { margin-top: 0; }
.mg-enq-card label span { color: var(--vermilion); }
.mg-enq-card label em { font-style: normal; text-transform: none; letter-spacing: 0; font-weight: 500; color: var(--text-mute); }
.mg-enq-card input, .mg-enq-card textarea, .mg-enq-card select {
  width: 100%; border: 1px solid var(--paper-edge); background: var(--paper);
  padding: 11px 13px; font: 400 16px/1.4 var(--sans); color: var(--ink); border-radius: 0;
}
.mg-enq-card input:focus, .mg-enq-card textarea:focus, .mg-enq-card select:focus { outline: 2px solid var(--brass); outline-offset: -2px; background: #fff; }
.mg-enq-btn {
  width: 100%; margin-top: 20px; border: 0; cursor: pointer; background: var(--vermilion); color: #fff;
  /* min-height keeps this at or above the 44px minimum tap target on a phone. */
  padding: 15px 18px; min-height: 48px; font: 700 14px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase;
}
.mg-enq-btn:hover { background: var(--ink); }
.mg-enq-note { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: var(--text-mute); }
.mg-enq-err { border: 1px solid var(--vermilion); background: #fdf2ef; padding: 12px 14px; margin-bottom: 18px; font-size: 14px; }
.mg-enq-err p { margin: 0 0 4px; }

.mg-thanks { max-width: 620px; margin: 0 auto; text-align: center; padding: 20px 0 40px; }
.mg-thanks-tick { width: 62px; height: 62px; margin: 0 auto 20px; border-radius: 50%; background: var(--vermilion); color: #fff; display: grid; place-items: center; font-size: 26px; }
.mg-thanks h2 { font-family: var(--serif); font-size: clamp(24px, 3.2vw, 32px); margin: 0 0 12px; color: var(--ink); }
.mg-thanks p { font-size: 16px; line-height: 1.65; color: var(--text); margin: 0 0 24px; }
.mg-thanks-acts { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 860px) {
  .mg-enq { grid-template-columns: 1fr; }
  /* Form first on a phone: the visitor arrived by tapping a call-to-action, so the
     thing they came to do should not sit below a page of explanation. */
  .mg-enq-card { order: -1; }
}

/* --- Registration (checkout) ------------------------------------------------ */
.mg-reg { display: grid; grid-template-columns: minmax(0,1fr) 460px; gap: clamp(20px, 3vw, 44px); align-items: start; padding-bottom: 12px; }
.mg-reg-note { margin: 18px 0 0; font-size: 14.5px; color: var(--text-mute); }
.mg-reg-note a { font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
.mg-cart-back { display: inline-block; font: 700 11.5px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--vermilion); }
.mg-cart-back:hover { text-decoration: underline; text-underline-offset: 3px; }

@media (max-width: 860px) {
  .mg-reg { grid-template-columns: 1fr; }
  /* The order summary stays above the form on a phone: it is the reason the person is
     filling anything in, and it reassures them what they are about to pay for. */
  .mg-reg-side { order: -1; }
}

/* --- 404 --------------------------------------------------------------------- */
.mg-reg-derived { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin: 0 0 4px; padding: 11px 13px; border: 1px solid var(--paper-edge); background: var(--paper); font: 600 16px/1.3 var(--sans); color: var(--ink); }
.mg-reg-derived i { color: var(--vermilion); font-size: 12px; }
.mg-reg-derived span { font: 400 13px/1.3 var(--sans); color: var(--text-mute); }
.mg-reg-change { margin-bottom: 4px; }
.mg-reg-change summary { cursor: pointer; font: 600 12.5px/1.4 var(--sans); color: var(--vermilion); padding: 6px 0; }
.mg-reg-change summary:hover { text-decoration: underline; text-underline-offset: 3px; }
.mg-reg-warn { display: flex; gap: 9px; margin: 0 0 12px; padding: 12px 14px; border: 1px solid var(--brass); background: #fdf9f1; font-size: 13.5px; line-height: 1.55; color: var(--ink); }
.mg-reg-warn i { color: var(--brass); margin-top: 3px; }

.mg-404 { max-width: 640px; padding: 8px 0 48px; }
.mg-404-lead { font-size: 16.5px; line-height: 1.65; color: var(--text); margin: 0 0 26px; }
.mg-404-links { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.mg-404-call { font-size: 15px; color: var(--text-mute); }
.mg-404-call a { font-weight: 700; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }