/* Built from assets/css/parts/ by build-css.sh — do not edit directly. */

/* ---------- 01-fonts.css ---------- */
/* Inter, self-hosted from the theme.

   Elementor shipped 126 @font-face declarations for this one family, covering
   every weight and italic across seven unicode ranges, and pointed them at
   updates.mountroyalcollege.edu.in — a second domain on the critical path.
   It is a variable font: two files cover the whole weight range. */

@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(../fonts/inter-ucc73fwrk3iltehus_nvmrmxcp50sjia1zl7.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD;
}
@font-face{
  font-family:'Inter';
  font-style:normal;
  font-weight:100 900;
  font-display:swap;
  src:url(../fonts/inter-ucc73fwrk3iltehus_nvmrmxcp50sjia25l7suc.woff2) format('woff2');
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF;
}

/* ---------- 02-tokens.css ---------- */
/* Design tokens.

   The Elementor build was eyeballed, and the measurements say so:
     section padding   12.8 / 38.4 / 57.6 / 115.2 px   (em values, no relation)
     heading sizes     55 / 48.6 / 42 / 35 / 20        (no ratio)
     button radii      0 / 2 / 3 / 8 / 9 / 25 px       (six values, one job)
     button heights    42 / 52 / 53 px
     brand green       #5AA90F and #58A80F             (two greens, one colour)
   Four "EXPLORE ALL" buttons exist; three carry rgba(88,168,15,0) — the green
   with its alpha zeroed — plus 700-weight black text and a literal "->" typed
   into the label, so they read as text while one reads as a button.

   Everything below is derived from those numbers rather than replacing them:
   each value is the nearest step on a real scale to what the site already used,
   so nothing shifts perceptibly but everything now relates. */

:root{
  /* ---- brand ------------------------------------------------------ */
  --mrc-green:#58A80F;          /* the one green. was #5AA90F and #58A80F */
  --mrc-green-dark:#4A8F0C;     /* hover */
  --mrc-green-deep:#0d4d2b;     /* header ink */
  --mrc-green-bar:#2F5325;      /* top bar */
  --mrc-lime:#C1EE27;
  --mrc-teal:#007E83;
  --mrc-teal-card:#2c6975;      /* enquiry card gradient, top */
  --mrc-teal-card-2:#1f4e5f;    /* enquiry card gradient, bottom */
  --mrc-ink:#1f3b34;            /* nav */
  --mrc-heading:#1E1E1E;
  --mrc-body:#333;
  --mrc-muted:#737373;
  --mrc-dim:#B0B0B0;
  --mrc-footer-bg:#0E0E0E;

  /* ---- spacing: 8px base ------------------------------------------ */
  --s1:4px;   --s2:8px;   --s3:12px;  --s4:16px;
  --s5:24px;  --s6:32px;  --s7:40px;  --s8:48px;
  --s9:64px;  --s10:80px; --s11:96px; --s12:120px;

  /* ---- layout ------------------------------------------------------
     1140 centred in a 1280 viewport puts content at x=70, which is what
     the site already does. Kept exactly. */
  --container:1140px;
  --gutter:var(--s5);

  /* Page hero height. The About hero was ported at the live page's 100vh,
     which fills the screen and pushes the first real content entirely below
     the fold. 65vh keeps the photograph the dominant thing on screen while
     the section under it announces itself. */
  --hero-min:65vh;

  /* vertical rhythm between sections. was 12.8 / 38.4 / 57.6 / 115.2 */
  --section-y:var(--s10);       /* 80  — the default */
  --section-y-tight:var(--s7);  /* 40 */
  --section-y-loose:var(--s12); /* 120 — major breaks */

  /* ---- type scale: 1.25 ratio, 8px-aligned ------------------------- */
  --t-display:56px;   /* was 55   — "Why Mount Royal College?" */
  --t-h1:48px;        /* was 48.6 — hero */
  --t-h2:40px;        /* was 42   — section headings */
  --t-h3:32px;        /* was 35   — card titles */
  --t-h4:24px;
  --t-lead:20px;      /* was 20.5 */
  --t-body:16px;
  --t-sm:14px;
  --t-xs:12px;

  --lh-tight:1.1;
  --lh-heading:1.15;
  --lh-body:1.5;

  /* ---- radii: was 0/2/3/8/9/25 ------------------------------------- */
  --r-sm:8px;         /* buttons, inputs */
  --r-md:16px;        /* cards */
  --r-lg:24px;        /* large cards. was 25 */
  --r-pill:999px;

  /* ---- controls ---------------------------------------------------- */
  --btn-h:48px;       /* was 42 / 52 / 53 */
  --btn-px:var(--s5);
  --btn-fs:15px;
  --btn-fw:600;

  /* ---- motion ------------------------------------------------------ */
  --mrc-ease:cubic-bezier(.33,1,.4,1);
  --mrc-dur:.45s;

  --mrc-font:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

@media (max-width:1024px){
  :root{
    --section-y:var(--s8);        /* 48 */
    --section-y-loose:var(--s10); /* 80 */
    --t-display:44px; --t-h1:38px; --t-h2:32px; --t-h3:26px;
  }
}
@media (max-width:767px){
  :root{
    --section-y:var(--s7);        /* 40 */
    --section-y-tight:var(--s6);  /* 32 */
    --section-y-loose:var(--s8);  /* 48 */
    --gutter:var(--s4);
    --t-display:34px; --t-h1:30px; --t-h2:26px; --t-h3:22px; --t-lead:18px;
  }
}

/* ---------- 03-base.css ---------- */
/* Base. Deliberately small — this theme ships no framework and no reset library. */

/* This site is light-only. Without color-scheme the browser keeps its dark
   canvas when the OS is in dark mode, and since body, main and every section
   are transparent, that canvas shows straight through — the whole page renders
   on black. It looked like a preview-pane bug; it is a real one, and anyone
   browsing in dark mode would have hit it. */
:root{color-scheme:light;}

*,*::before,*::after{box-sizing:border-box;}
/* line-height 1.5 is load-bearing. The live site inherits it from Elementor's
   frontend stylesheet, and it cascades into the nav and the top bar — without
   it every text row is a few px short and the header measures 2px wrong. */
/* #333 is what the live site inherits everywhere from Elementor's frontend
   stylesheet. --mrc-ink is the header's nav colour and is applied there
   explicitly; using it as the body default silently recolours body copy. */
body{margin:0;background:#fff;font-family:var(--mrc-font);font-size:var(--t-body);line-height:var(--lh-body);color:var(--mrc-body);-webkit-font-smoothing:antialiased;}
img{max-width:100%;height:auto;}
a{color:inherit;}

/* SOP 4.2: the_post_thumbnail() emits width/height attributes, and per the CSS
   Sizing spec aspect-ratio is ignored when both are non-auto. Scope this to
   images NOT inside a fixed-ratio wrapper (SOP 10b) or it fights those. */
.post-body img,.entry-content img{height:auto;}

.screen-reader-text{
  position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;
  overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;
}
.skip-link:focus{
  position:fixed;top:8px;left:8px;z-index:100000;width:auto;height:auto;
  clip:auto;margin:0;padding:12px 20px;background:#fff;color:var(--mrc-green);
  font-weight:600;border-radius:6px;box-shadow:0 2px 12px rgba(0,0,0,.2);
}

/* ---------- 04-topbar.css ---------- */
/* Top bar.

   Ported from Elementor container ff73a6f + icon-lists a0d6f80 / 028db2c:
   background #2F5325, 10px padding, space-between, Inter 12/600 white, 25px
   between items, column and centred under 768px. */

.mrc-topbar{background:var(--mrc-green-bar);padding:var(--s3) var(--gutter);position:relative;z-index:99;}
.mrc-topbar-inner{
  display:flex;justify-content:space-between;align-items:stretch;
  flex-wrap:wrap;gap:0;
}
/* The item margins are 12.5px a side and the list pulls back by the same
   amount, so the row aligns flush with the container edge — matching how
   Elementor's inline icon-list is built. */
.mrc-topbar ul{list-style:none;margin:0 -12.5px;padding:0;display:flex;align-items:center;flex-wrap:wrap;}
.mrc-topbar li{display:flex;margin:0 var(--s3);padding:0;}
.mrc-topbar a{
  display:block;
  font-family:var(--mrc-font);font-size:var(--t-xs);font-weight:600;line-height:var(--lh-body);color:#fff;
  text-decoration:none;transition:color .3s;
}
.mrc-topbar a:hover{color:var(--mrc-lime);}

/* On a phone the bar carries the three section links and nothing else. The
   two numbers and the address wrapped onto their own lines and cost 78px of
   height above the fold to repeat what the helpline button and the footer
   already say. */
@media (max-width:767px){
  .mrc-topbar-inner{justify-content:center;}
  /* .mrc-topbar ul sets display:flex at (0,2,0); a bare class here scores
     (0,1,0) and loses, media query or not. Match the specificity. */
  .mrc-topbar .mrc-topbar-contacts{display:none;}
  .mrc-topbar ul{justify-content:center;}
}

/* ---------- 05-header.css ---------- */

/* ===========================================================
   MORPHING HEADER — docked solid ⇄ floating glass (scrolled)
   Scoped under #mrc-header.
   =========================================================== */
/* Wrapped in :where() so this carries zero specificity and behaves like a
   reset. As `#mrc-header *` it scored (1,0,0) and beat any component class
   rendered inside the header — the shared helpline button lost its padding and
   collapsed from 42px to 30px the moment it stopped being header-scoped. */
:where(#mrc-header *){box-sizing:border-box;margin:0;padding:0;}
/* No local custom properties here. This block used to redefine --mrc-green as
   the deep green, --mrc-ink, --mrc-ease and --mrc-dur — all names the design
   system already owns. Any component rendered inside the header then resolved
   --mrc-green to #0d4d2b instead of the brand green, which is exactly what
   happened to the helpline button when it became shared. Uses that meant the
   deep green now say --mrc-green-deep. */
#mrc-header{
  font-family:inherit;
  position:sticky;
  top:0;
  z-index:9999;
  width:100%;
}

/* -----------------------------------------------------------
   THE BAR
   Docked: full-width solid white, square corners.
   Scrolled (.mrc-float on header): inset glass pill.
   We animate max-width / radius / background / shadow / margin —
   all compositor-friendly or cheap one-shot paints.
   ----------------------------------------------------------- */
#mrc-header .mrc-bar{
  max-width:100%;
  margin:0 auto;
  padding:12px 24px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:16px;
  background:#ffffff;
  border:1px solid transparent;
  border-radius:0;
  box-shadow:0 1px 0 rgba(13,77,43,0.08);
  transition:
    max-width var(--mrc-dur) var(--mrc-ease),
    margin var(--mrc-dur) var(--mrc-ease),
    padding var(--mrc-dur) var(--mrc-ease),
    border-radius var(--mrc-dur) var(--mrc-ease),
    border-color var(--mrc-dur) var(--mrc-ease),
    background-color var(--mrc-dur) var(--mrc-ease),
    box-shadow var(--mrc-dur) var(--mrc-ease);
}

/* Scrolled: detach into a floating glass pill */
#mrc-header.mrc-float .mrc-bar{
  max-width:1240px;
  margin:0 auto;
  padding:9px 20px;
  background:rgba(255,255,255,0.55);
  -webkit-backdrop-filter:blur(16px) saturate(150%);
  backdrop-filter:blur(16px) saturate(150%);
  border-color:rgba(255,255,255,0.5);
  border-radius:18px;
  box-shadow:0 14px 34px -16px rgba(13,77,43,0.45);
}
/* The gap above the pill is the header's padding, not the bar's margin: the
   header is sticky at top:0 with no padding or border of its own, so a top
   margin on the bar collapsed straight through it and the pill sat flush
   against the top of the screen. Padding cannot collapse. */
#mrc-header.mrc-float{padding:12px 18px 0;}
#mrc-header{padding:0;transition:padding var(--mrc-dur) var(--mrc-ease);}

/* Logo */
#mrc-header .mrc-logo{display:flex;align-items:center;justify-self:start;}
#mrc-header .mrc-logo img{height:52px;width:auto;display:block;transition:height var(--mrc-dur) var(--mrc-ease);}
#mrc-header.mrc-float .mrc-logo img{height:44px;}

/* Desktop nav (centered column) */
#mrc-header .mrc-nav{display:flex;justify-content:center;justify-self:center;min-width:0;}
#mrc-header .mrc-menu{list-style:none;display:flex;align-items:center;gap:4px;}
#mrc-header .mrc-menu>li{position:relative;}
#mrc-header .mrc-menu>li>a{
  display:flex;align-items:center;gap:6px;
  text-decoration:none;
  color:var(--mrc-ink);
  font-size:14.5px;
  font-weight:600;
  letter-spacing:.1px;
  padding:9px 12px;
  border-radius:9px;
  white-space:nowrap;
  transition:color .2s ease,background-color .2s ease;
}
#mrc-header .mrc-menu>li>a:hover{
  color:var(--mrc-green-deep);
  background:rgba(13,77,43,0.06);
}

/* Caret */
#mrc-header .mrc-caret{
  width:0;height:0;
  border-left:4px solid transparent;
  border-right:4px solid transparent;
  border-top:5px solid currentColor;
  opacity:.7;
  transition:transform .2s ease;
}
#mrc-header .mrc-has-sub:hover .mrc-caret{transform:rotate(180deg);}

/* Dropdown */
#mrc-header .mrc-sub{
  list-style:none;
  position:absolute;
  top:calc(100% + 8px);
  left:0;
  min-width:280px;
  background:#fff;
  border:1px solid rgba(13,77,43,0.08);
  border-radius:12px;
  box-shadow:0 16px 36px -12px rgba(13,77,43,0.28);
  padding:6px;
  opacity:0;visibility:hidden;
  transform:translateY(6px);
  transition:opacity .18s ease,transform .18s ease,visibility 0s linear .18s;
}
#mrc-header .mrc-has-sub::after{
  content:"";position:absolute;left:0;right:0;top:100%;height:10px;
}
#mrc-header .mrc-has-sub:hover .mrc-sub,
#mrc-header .mrc-has-sub:focus-within .mrc-sub{
  opacity:1;visibility:visible;transform:translateY(0);
  transition:opacity .18s ease,transform .18s ease,visibility 0s;
}
#mrc-header .mrc-sub li a{
  display:block;
  text-decoration:none;
  color:var(--mrc-ink);
  font-size:14px;
  font-weight:500;
  line-height:1.4;
  padding:11px 14px;
  border-radius:8px;
  transition:background-color .15s ease,color .15s ease;
}
#mrc-header .mrc-sub li a:hover{
  background:rgba(13,77,43,0.07);
  color:var(--mrc-green-deep);
}

/* CTA — compact coded button */
/* The helpline button moved to 08-components as .mrc-cta — it is used in the
   header bar, the mobile panel and the Experience section, so it cannot live
   scoped under #mrc-header. */

/* Hamburger. Declared here, not in 08-components: that file loads later and
   an unconditional display:none there beat the media query below. */
#mrc-header .mrc-burger{
  display:none;
  width:46px;height:46px;
  border:none;border-radius:12px;
  background:rgba(13,77,43,0.08);
  cursor:pointer;
  flex-direction:column;justify-content:center;align-items:center;gap:5px;
}
#mrc-header .mrc-burger span{width:22px;height:2px;background:var(--mrc-green-deep);border-radius:2px;transition:transform .25s ease,opacity .2s ease;}
#mrc-header .mrc-burger.is-open span:nth-child(1){transform:translateY(7px) rotate(45deg);}
#mrc-header .mrc-burger.is-open span:nth-child(2){opacity:0;}
#mrc-header .mrc-burger.is-open span:nth-child(3){transform:translateY(-7px) rotate(-45deg);}

/* Mobile panel */
#mrc-header .mrc-mobile{
  margin:0 auto;
  background:#fff;
  border-top:1px solid rgba(13,77,43,0.08);
  padding:8px 16px 14px;
}
#mrc-header.mrc-float .mrc-mobile{
  max-width:1240px;
  margin-top:8px;
  border:1px solid rgba(255,255,255,0.5);
  border-radius:16px;
  background:rgba(255,255,255,0.92);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  box-shadow:0 14px 34px -16px rgba(13,77,43,0.45);
}
#mrc-header .mrc-mobile-menu{list-style:none;}
#mrc-header .mrc-mobile-menu>li{border-bottom:1px solid rgba(13,77,43,0.07);}
#mrc-header .mrc-mobile-menu>li:last-child{border-bottom:none;}
#mrc-header .mrc-mobile-menu a,
#mrc-header .mrc-m-toggle{
  display:flex;align-items:center;gap:8px;width:100%;
  text-decoration:none;color:var(--mrc-ink);
  font-size:15px;font-weight:600;
  padding:14px 12px;background:none;border:none;cursor:pointer;text-align:left;
  font-family:inherit;
}
#mrc-header .mrc-m-has-sub ul{list-style:none;max-height:0;overflow:hidden;transition:max-height .3s ease;}
#mrc-header .mrc-m-has-sub.is-open ul{max-height:420px;}
#mrc-header .mrc-m-has-sub ul li a{font-size:14px;font-weight:500;padding:11px 12px 11px 26px;color:#3a5a4f;}
#mrc-header .mrc-m-has-sub.is-open .mrc-caret{transform:rotate(180deg);}
#mrc-header .mrc-m-toggle .mrc-caret{margin-left:auto;}
#mrc-header .mrc-mobile-cta{display:inline-flex;margin:10px 12px 6px;}

/* ---- Responsive: tablet / small laptop ---- */
@media (max-width:1100px){
  #mrc-header .mrc-bar{
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;padding:12px 18px;
  }
  #mrc-header.mrc-float .mrc-bar{padding:9px 16px;}
  #mrc-header .mrc-nav,
  #mrc-header .mrc-bar .mrc-cta{display:none;}
  #mrc-header .mrc-burger{display:flex;}
  #mrc-header .mrc-logo img{height:46px;}
  #mrc-header.mrc-float .mrc-logo img{height:42px;}
  #mrc-header.mrc-float{padding:10px 14px 0;}
}
/* ---- Responsive: mobile ---- */
@media (max-width:600px){
  #mrc-header .mrc-bar{padding:10px 14px;}
  #mrc-header .mrc-logo img{height:40px;}
  #mrc-header.mrc-float .mrc-logo img{height:38px;}
  #mrc-header.mrc-float{padding:10px 10px 0;}
  #mrc-header.mrc-float .mrc-bar{border-radius:14px;}
}

/* Respect reduced motion */
@media (prefers-reduced-motion:reduce){
  #mrc-header, #mrc-header .mrc-bar, #mrc-header .mrc-logo img{transition:none;}
}

/* ---------- 06-footer.css ---------- */
/* Footer.

   Values measured off the live footer at 1280px: ground #0E0E0E, column titles
   20px/600 white, body copy 11px/300 #B0B0B0, address 16px/400 #737373.
   Rendered once, not twice — see mrc_footer_columns(). */

/* flow-root matters: without a block formatting context the card's negative
   top margin collapses through the footer and drags the footer's own top edge
   up with it, so the card never actually straddles anything — it just sits at
   the top of a taller footer. */
.site-footer{background:var(--mrc-footer-bg);color:var(--mrc-dim);display:flow-root;}
.mrc-footer-inner{max-width:var(--container);margin:0 auto;padding-inline:var(--gutter);}

/* The enquiry card straddles the seam: its top half sits over the last section
   of the page, its bottom half over the footer. It takes over the teal skin the
   form used to carry on its own, so there is one card, not a card inside a card.

   --mrc-enquire-pull is half the card's height. main.js measures it and keeps
   it current on resize; the values below are the no-JS fallback, close enough
   at each breakpoint that nothing overlaps. */
:root{--mrc-enquire-pull:170px;}

/* the last section of the page gives up the space the card's top half occupies */
.site-content{padding-bottom:var(--mrc-enquire-pull);}

/* Pages that do not ask a prospective student to enquire have no card to make
   room for, so the reserved space goes back — otherwise the footer opens with
   170px of white nothing. See mrc_wants_enquiry_form(). */
body.mrc-no-enquire .site-content{padding-bottom:0;}

.mrc-enquire{
  position:relative;z-index:2;
  padding-inline:var(--gutter);
  margin-top:calc(var(--mrc-enquire-pull) * -1);
}
.mrc-enquire-card{
  max-width:var(--container);margin:0 auto;padding:var(--s7) var(--s8);
  background:linear-gradient(180deg,#2c6975 0%,#1f4e5f 100%);
  border-radius:var(--r-lg);
  box-shadow:0 20px 50px rgba(0,0,0,.18);
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7);align-items:center;
  color:#fff;
}
.mrc-enquire-title{margin:0 0 var(--s3);font-size:var(--t-h3);font-weight:600;line-height:var(--lh-heading);color:#fff;}
.mrc-enquire-sub{margin:0;font-size:var(--t-lead);font-weight:300;line-height:var(--lh-body);color:#fff;}
.mrc-enquire-note{margin:var(--s4) 0 0;font-size:var(--t-xs);font-weight:300;line-height:var(--lh-body);color:#fff;text-align:center;}

/* The form keeps its fields and its button, but gives up its card: the section
   card is the card now. */
.mrc-enquire-form .hgx-card{
  max-width:none;margin:0;padding:0;
  background:none;border-radius:0;box-shadow:none;
}

.mrc-footer-main{padding:0;}
.mrc-footer-main .mrc-footer-inner{
  display:flex;flex-direction:row;flex-wrap:nowrap;gap:10px;align-items:flex-start;
  /* plain 50px: the card's negative margin shortens the footer rather than
     shifting its contents, so there is nothing to add back here. */
  padding-block:var(--section-y);
}
.mrc-footer-about{flex:0 0 272px;}
.mrc-footer-col{flex:0 0 auto;}
.mrc-footer-col:last-of-type{flex:0 0 272px;}

.mrc-footer-about p{margin:var(--s4) 0 0;font-size:var(--t-xs);font-weight:300;line-height:1.4;color:var(--mrc-dim);}
.mrc-footer-logo img{max-width:193px;height:auto;}

.mrc-footer-col-title{margin:0 0 var(--s4);font-size:var(--t-lead);font-weight:600;line-height:1;color:#fff;}
.mrc-footer-col ul{list-style:none;margin:0;padding:0;}
.mrc-footer-col li{margin-bottom:var(--s3);}
.mrc-footer-col a{font-size:var(--t-body);font-weight:400;line-height:1;color:var(--mrc-dim);text-decoration:none;transition:color .2s var(--mrc-ease);}
.mrc-footer-col a:hover{color:var(--mrc-lime);}

.mrc-footer-col address{margin-top:var(--s5);font-style:normal;font-size:var(--t-body);font-weight:400;line-height:var(--lh-body);color:var(--mrc-muted);}

.mrc-footer-disclaimer{padding-block:var(--s6);}
.mrc-footer-disclaimer .mrc-footer-inner{display:block;}
.mrc-footer-disclaimer p{margin:0;font-size:var(--t-xs);font-weight:300;line-height:1.4;color:var(--mrc-dim);}

.mrc-footer-legal{padding:var(--s5) 0 var(--s6);border-top:1px solid rgba(255,255,255,.08);}
.mrc-footer-legal .mrc-footer-inner{display:flex;justify-content:space-between;align-items:center;gap:20px;flex-wrap:wrap;}
.mrc-copyright{margin:0;font-size:var(--t-xs);font-weight:300;color:var(--mrc-dim);}
.mrc-legal-links{list-style:none;display:flex;gap:var(--s5);margin:0;padding:0;flex-wrap:wrap;}
.mrc-legal-links a{font-size:var(--t-xs);color:var(--mrc-dim);text-decoration:none;}
.mrc-legal-links a:hover{color:var(--mrc-lime);}

@media (max-width:1024px){
  .mrc-footer-main .mrc-footer-inner{flex-wrap:wrap;gap:28px;}
  .mrc-footer-about,.mrc-footer-col,.mrc-footer-col:last-of-type{flex:0 0 calc(50% - 14px);}
}
@media (max-width:900px){
  .mrc-enquire-card{grid-template-columns:1fr;gap:28px;padding:36px 28px;}
  .mrc-enquire-title{font-size:28px;}
}
@media (max-width:767px){
  .mrc-footer-main .mrc-footer-inner{flex-direction:column;}
  .mrc-enquire-card{padding:32px 22px;}
  .mrc-enquire-title{font-size:24px;}
  .mrc-enquire-sub{font-size:16px;}
  .mrc-footer-about,.mrc-footer-col,.mrc-footer-col:last-of-type{flex:1 1 auto;}
  .mrc-footer-legal .mrc-footer-inner{flex-direction:column;align-items:flex-start;}
}

/* ---------- 07-hero.css ---------- */
/* Home hero carousel.
   Ported verbatim except for one rename: the hero's buttons used .mrc-cta,
   the same class as the header's helpline button, so a selector for one
   picked up the other. They are .mrc-hero-cta here. */


/* ---------- Scoped to .mrc-hero so it won't clash with the theme ---------- */
.mrc-hero{
  /* ===== TUNE THESE ===== */
  --mrc-ratio-desktop: 16 / 9;     /* desktop shape; try 21/9 for shorter banner */
  --mrc-ratio-mobile: 3 / 4;       /* mobile shape (taller); matches portrait banner */
  --mrc-min-h: 540px;              /* minimum cover height (all slides) */
  --mrc-max-h: 90vh;               /* never taller than this on big screens */
  --mrc-accent: #ffffff;           /* text + button colour */
  --mrc-pad: clamp(1.4rem, 5vw, 4.5rem); /* content padding from bottom-left */
  --mrc-fade: 700ms;               /* crossfade speed */
  --mrc-pull: 0px;                 /* set by JS: pulls hero up under the header */
  /* ====================== */

  position: relative;
  /* Edge-to-edge: break out of Elementor's padded container to full viewport width */
  width: 100vw;
  max-width: 100vw;
  margin-top: var(--mrc-pull);     /* <-- closes the gap under the header */
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
  overflow: hidden;
  background: #0b2a1c;            /* shows briefly before image loads */
  aspect-ratio: var(--mrc-ratio-desktop);
  min-height: var(--mrc-min-h);
  max-height: var(--mrc-max-h);
  font-family: inherit;          /* use Elementor's / theme font */
  isolation: isolate;
}

.mrc-viewport{ position:absolute; inset:0; }

/* Slides stacked + crossfade */
.mrc-slide{
  position:absolute; inset:0;
  opacity:0; visibility:hidden;
  transition: opacity var(--mrc-fade) ease, visibility 0s linear var(--mrc-fade);
  z-index:1;
}
.mrc-slide.is-active{
  opacity:1; visibility:visible; z-index:2;
  transition: opacity var(--mrc-fade) ease, visibility 0s;
}

.mrc-media{ position:absolute; inset:0; display:block; }
.mrc-media img{ width:100%; height:100%; object-fit:cover; object-position:center center; display:block; }

/* Gradient for text legibility (bottom-left) */
.mrc-slide::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background: linear-gradient(to top,   rgba(0,0,0,.45), rgba(0,0,0,0) 55%),
              linear-gradient(to right, rgba(0,0,0,.30), rgba(0,0,0,0) 55%);
  z-index:1;
}

/* Content bottom-left */
/* The hero image is full-bleed, but its words are not: they line up on the
   same content edge as every other section, so the left edge of the page is one
   straight line from the hero to the footer. Was a flat 72px, which put the
   hero text 102px left of everything below it. */
.mrc-content{
  position:absolute; left:0; right:0; bottom:0; z-index:2;
  width:100%;
  max-width:var(--container);
  margin-inline:auto;
  padding:var(--s9) var(--gutter);
  color: var(--mrc-accent);
}
.mrc-content > *{max-width:760px;}
.mrc-title{
  margin:0 0 .5em;
  font-size: clamp(1.8rem, 3.8vw, 3.1rem);
  font-weight:600; line-height:1.08; letter-spacing:-.01em;
  text-shadow:0 2px 18px rgba(0,0,0,.35);
}
.mrc-sub{
  margin:0 0 1.3em;
  font-size: clamp(1rem, 1.6vw, 1.3rem); font-weight:300;
  text-shadow:0 1px 12px rgba(0,0,0,.35);
}
.mrc-hero-cta{
  display:inline-block;
  padding:.85em 2.1em;
  font-size: clamp(.9rem, 1.2vw, 1.02rem); font-weight:400;
  color: var(--mrc-accent); text-decoration:none;
  border:1.5px solid var(--mrc-accent); border-radius:2px;
  background:transparent;
  transition: background-color .25s ease, color .25s ease;
}
.mrc-hero-cta:hover, .mrc-hero-cta:focus-visible{
  background: var(--mrc-accent); color:#0b2a1c;
}

/* Arrows */
.mrc-arrow{
  position:absolute; top:50%; transform:translateY(-50%); z-index:3;
  width:46px; height:46px; display:grid; place-items:center;
  background:rgba(0,0,0,.18); border:none; border-radius:50%;
  color:#fff; cursor:pointer;
  transition: background-color .25s ease;
}
.mrc-arrow:hover, .mrc-arrow:focus-visible{ background:rgba(0,0,0,.45); }
.mrc-arrow svg{ width:24px; height:24px; fill:none; stroke:currentColor;
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; }
.mrc-prev{ left:clamp(.5rem,1.5vw,1.4rem); }
.mrc-next{ right:clamp(.5rem,1.5vw,1.4rem); }

/* Dots */
.mrc-dots{
  position:absolute; left:0; right:0; bottom:clamp(.8rem,1.6vw,1.4rem);
  z-index:3; display:flex; gap:9px; justify-content:center;
}
.mrc-dots button{
  width:9px; height:9px; padding:0; border:none; border-radius:50%;
  background:rgba(255,255,255,.45); cursor:pointer; transition:all .25s ease;
}
.mrc-dots button[aria-selected="true"]{ background:#fff; width:24px; border-radius:5px; }

/* ---------- Mobile ---------- */
@media (max-width:768px){
  .mrc-hero{ aspect-ratio: var(--mrc-ratio-mobile); min-height:auto; max-height:none; }
  .mrc-content{ padding:var(--s7) var(--gutter); }
  .mrc-br{ display:none; }                 /* let the heading wrap naturally */
  .mrc-title{ font-size: clamp(1.65rem, 7vw, 2.6rem); line-height:1.14; margin-bottom:.55em; }
  .mrc-sub{ font-size: clamp(.95rem, 3.6vw, 1.25rem); margin-bottom:1.1em; }
  .mrc-hero-cta{ font-size: clamp(.85rem, 3.6vw, 1rem); padding:.8em 1.7em; }
  .mrc-arrow{ width:38px; height:38px; }
  .mrc-arrow svg{ width:20px; height:20px; }
}

/* Respect reduced-motion preferences */
@media (prefers-reduced-motion: reduce){
  .mrc-slide{ transition:none; }
}

/* ---------- 08-components.css ---------- */
/* Components. Everything on the page is built from these; a section that needs
   a one-off number is a bug in the scale, not a reason for a one-off number. */

/* ---- layout ------------------------------------------------------- */

/* 1140 of content, with a gutter only once the viewport can no longer hold it.

   max-width + padding-inline looks equivalent and is not: it caps the *border*
   box at 1140, so the content inside was 1092 and every band sat 24px in from
   where the design puts it — the token comment below claimed x=70 at 1280 while
   the page actually rendered x=94. Sizing the content box directly makes the
   number in the token the number on the screen. */
.mrc-container{
  width:min(100% - var(--gutter) * 2, var(--container));
  margin-inline:auto;
}

/* One rhythm for every band on the page. --tight and --loose are the only
   permitted deviations, so a section can never invent 57.5938px again. */
.mrc-section{padding-block:var(--section-y);}
.mrc-section--tight{padding-block:var(--section-y-tight);}
.mrc-section--loose{padding-block:var(--section-y-loose);}
.mrc-section--flush{padding-block:0;}
.mrc-section--tinted{background:#F7F9F5;}

/* heading on the left, action on the right — the News & Events / Explore
   Virtually / Testimonials pattern, which was three different layouts */
.mrc-section-head{
  display:flex;align-items:center;justify-content:space-between;
  gap:var(--s5);flex-wrap:wrap;
  margin-bottom:var(--s7);
}
.mrc-section-head--center{justify-content:center;text-align:center;}

/* ---- type --------------------------------------------------------- */

.mrc-display,.mrc-h1,.mrc-h2,.mrc-h3,.mrc-h4{
  margin:0;color:var(--mrc-heading);font-weight:600;line-height:var(--lh-heading);
}
.mrc-display{font-size:var(--t-display);line-height:var(--lh-tight);}
.mrc-h1{font-size:var(--t-h1);line-height:var(--lh-tight);}
.mrc-h2{font-size:var(--t-h2);}
.mrc-h3{font-size:var(--t-h3);}
.mrc-h4{font-size:var(--t-h4);}
.mrc-lead{margin:0;font-size:var(--t-lead);line-height:var(--lh-body);color:var(--mrc-body);font-weight:300;}
.mrc-body{margin:0;font-size:var(--t-body);line-height:var(--lh-body);color:var(--mrc-body);}

.mrc-stack > * + *{margin-top:var(--s4);}
.mrc-stack-lg > * + *{margin-top:var(--s5);}

/* ---- buttons ------------------------------------------------------
   One control, three variants. Previously: six radii, three heights, two
   greens, and three "buttons" that were transparent-background text with a
   hand-typed "->". */

.mrc-btn{
  display:inline-flex;align-items:center;justify-content:center;gap:var(--s2);
  min-height:var(--btn-h);
  padding:0 var(--btn-px);
  border:1px solid transparent;
  border-radius:var(--r-sm);
  font-family:var(--mrc-font);
  font-size:var(--btn-fs);font-weight:var(--btn-fw);line-height:1;
  letter-spacing:.01em;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .2s var(--mrc-ease),color .2s var(--mrc-ease),border-color .2s var(--mrc-ease);
}
.mrc-btn:focus-visible{outline:2px solid var(--mrc-green);outline-offset:2px;}

.mrc-btn--primary{background:var(--mrc-green);color:#fff;}
.mrc-btn--primary:hover{background:var(--mrc-green-dark);color:#fff;}

.mrc-btn--outline{background:transparent;color:var(--mrc-green);border-color:currentColor;}
.mrc-btn--outline:hover{background:var(--mrc-green);color:#fff;border-color:var(--mrc-green);}

/* on photography */
.mrc-btn--onimage{background:transparent;color:#fff;border-color:rgba(255,255,255,.8);}
.mrc-btn--onimage:hover{background:#fff;color:var(--mrc-heading);border-color:#fff;}

/* the text-with-arrow variant, deliberate this time. The arrow is drawn, not
   typed, so it aligns and does not read out as "minus greater-than". */
.mrc-btn--link{
  min-height:0;padding:0;background:none;border:0;
  color:var(--mrc-green);
  font-size:var(--t-sm);font-weight:700;text-transform:uppercase;letter-spacing:.06em;
}
.mrc-btn--link::after{
  content:"";width:18px;height:10px;flex:none;
  background:currentColor;
  -webkit-mask:var(--mrc-arrow) center/contain no-repeat;
          mask:var(--mrc-arrow) center/contain no-repeat;
  transition:transform .2s var(--mrc-ease);
}
.mrc-btn--link:hover::after{transform:translateX(4px);}
:root{
  --mrc-arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 10'%3E%3Cpath d='M0 5h15M11 1l4 4-4 4' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

.mrc-btn--sm{min-height:40px;padding:0 var(--s4);font-size:var(--t-sm);}
.mrc-btn--block{width:100%;}

/* ---- cards -------------------------------------------------------- */

.mrc-card{
  background:#fff;
  border-radius:var(--r-md);
  padding:var(--s5);
  display:flex;flex-direction:column;gap:var(--s4);
}
.mrc-card--media{padding:0;overflow:hidden;}
.mrc-card--media .mrc-card-body{padding:var(--s5);display:flex;flex-direction:column;gap:var(--s3);}
.mrc-card--lg{border-radius:var(--r-lg);}
.mrc-card--bordered{border:1px solid rgba(0,0,0,.08);}
.mrc-card--plain{background:transparent;padding:0;}

.mrc-card img{display:block;width:100%;height:auto;}
.mrc-card--media img{aspect-ratio:16/10;object-fit:cover;}

/* ---- grids -------------------------------------------------------- */

.mrc-grid{display:grid;gap:var(--s5);}
.mrc-grid--2{grid-template-columns:repeat(2,minmax(0,1fr));}
.mrc-grid--3{grid-template-columns:repeat(3,minmax(0,1fr));}
.mrc-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
.mrc-grid--split{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:var(--s9);}

@media (max-width:1024px){
  .mrc-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mrc-grid--split{grid-template-columns:minmax(0,1fr);gap:var(--s6);}
}
@media (max-width:767px){
  .mrc-grid--2,.mrc-grid--3,.mrc-grid--4{grid-template-columns:minmax(0,1fr);}
  .mrc-section-head{margin-bottom:var(--s5);}
}

/* ---- migration layer ----------------------------------------------
   Sections still rendered by Elementor carry its own eyeballed vertical
   padding — 0, 10, 12.8, 38.4, 57.6 or 115.2px depending on the section —
   so consecutive bands either collide or drift apart. Master the Art of
   Hotel Management had none above or below it at all, which is why it read
   as stuck to its neighbours.

   Zero Elementor's own block padding on the top-level container and its
   inner, then apply the one rhythm on the wrapper. !important is needed
   because post-54.css loads after main.css and matches at equal specificity.

   Each section drops this the moment it is ported. */

/* The rhythm lives on the container as a flex gap, not as padding on each
   section. Padding-per-section only works while every section actually has
   some: the first attempt zeroed a neighbour's top padding and relied on the
   previous section's bottom padding, so the moment a variant declared
   padding-block:0 the two bands collided. A gap cannot be opted out of by
   accident — only deliberately, with --flush-top. */
.site-main{display:flex;flex-direction:column;gap:var(--section-y);}

/* Deliberately butts against the band above it. The only sanctioned way to
   lose the rhythm — a section cannot do it by accident. */
.mrc-flush-top{margin-top:calc(-1 * var(--section-y));}

/* One content edge for every section.

   Measured across the pages as they were, the inner gutter was 0, 10 or 56px
   depending on the section — so nothing lined up down the left, and the logo
   carousel overflowed 3,031px to the left of its own section. Every band now
   resolves to the same 1140 box with the same gutter, which is what makes the
   left and right edges agree all the way down the page.

   The scaffold that let a not-yet-ported Elementor section render inside this
   grid is gone: every section is the theme's own now. Its rules went with it. */



/* ---- helpline button ----------------------------------------------
   Used in the header bar, the mobile panel and the Experience section.
   It was scoped `#mrc-header .mrc-cta`, so the moment the same partial was
   rendered anywhere else it lost every rule: the icon fell back to its
   intrinsic SVG size and the label rendered as an underlined link. A component
   used in three places belongs in the component layer.
   `justify-self:end` was part of the header's grid placement, not the button,
   so it stays in the header. */

.mrc-cta{
  display:inline-flex;align-items:center;gap:8px;
  text-decoration:none;
  background:var(--mrc-green);
  padding:6px 14px 6px 7px;
  border-radius:8px;
  box-shadow:0 6px 14px -8px rgba(13,77,43,0.5);
  transition:transform .2s ease,filter .2s ease;
}
.mrc-cta:hover{transform:translateY(-1px);filter:brightness(.96);}
.mrc-cta-icon{
  width:30px;height:30px;flex:0 0 auto;border-radius:50%;
  background:#fff;display:grid;place-items:center;
}
.mrc-cta-icon svg{width:16px;height:16px;fill:var(--mrc-green);}
.mrc-cta-text{display:flex;flex-direction:column;line-height:1.1;color:#fff;}
.mrc-cta-label{font-size:9.5px;font-weight:600;letter-spacing:.3px;text-transform:uppercase;opacity:.95;}
.mrc-cta-num{font-size:14px;font-weight:800;letter-spacing:.2px;}

/* The hamburger lives in 05-header.css. It sat here with display:none and
   this file is concatenated after 05, so at equal specificity it beat the
   media query that reveals it — the mobile menu had no way to open. */
#mrc-header .mrc-cta{justify-self:end;}

/* a filled button that carries the same drawn arrow as --link */
.mrc-btn--arrow::after{
  content:"";width:18px;height:10px;flex:none;
  background:currentColor;
  -webkit-mask:var(--mrc-arrow) center/contain no-repeat;
          mask:var(--mrc-arrow) center/contain no-repeat;
  transition:transform .2s var(--mrc-ease);
}
.mrc-btn--arrow:hover::after{transform:translateX(4px);}

/* ---------- 09-video.css ---------- */
/* Self-hosted video component.

   The poster carries an explicit aspect-ratio so the card reserves its space
   before the image arrives — no layout shift, and every card in a row is the
   same height, which the native player was not. */

.mrc-video{margin:0;display:flex;flex-direction:column;gap:var(--s3);}

.mrc-video-trigger{
  position:relative;display:block;width:100%;padding:0;
  aspect-ratio:var(--mrc-video-ratio, 9 / 16);
  border:0;border-radius:var(--r-md);overflow:hidden;
  background:#0E0E0E;cursor:pointer;
  isolation:isolate;
}
.mrc-video-trigger:focus-visible{outline:2px solid var(--mrc-green);outline-offset:3px;}

.mrc-video-poster{
  width:100%;height:100%;object-fit:cover;display:block;
  transition:transform .4s var(--mrc-ease);
}
.mrc-video-trigger:hover .mrc-video-poster{transform:scale(1.03);}

/* a scrim so the play button holds up over a bright frame */
.mrc-video-trigger::after{
  content:"";position:absolute;inset:0;
  background:linear-gradient(180deg,rgba(0,0,0,.05) 0%,rgba(0,0,0,.35) 100%);
  pointer-events:none;
}

.mrc-video-play{
  position:absolute;inset:0;margin:auto;z-index:1;
  width:64px;height:64px;
  display:grid;place-items:center;
  border-radius:var(--r-pill);
  background:rgba(255,255,255,.92);
  transition:transform .25s var(--mrc-ease),background-color .25s var(--mrc-ease);
}
.mrc-video-play svg{width:26px;height:26px;fill:var(--mrc-heading);margin-left:3px;}
.mrc-video-trigger:hover .mrc-video-play{transform:scale(1.08);background:#fff;}

.mrc-video-time{
  position:absolute;right:var(--s3);bottom:var(--s3);z-index:1;
  padding:2px var(--s2);border-radius:var(--r-sm);
  background:rgba(0,0,0,.65);color:#fff;
  font-size:var(--t-xs);font-weight:600;font-variant-numeric:tabular-nums;
}

.mrc-video-caption{display:flex;flex-direction:column;gap:2px;}
.mrc-video-name{font-size:var(--t-body);font-weight:600;color:var(--mrc-heading);}
.mrc-video-programme{font-size:var(--t-sm);color:var(--mrc-muted);line-height:1.4;}

/* the player, once someone has asked for it */
.mrc-video video{
  width:100%;height:100%;display:block;
  aspect-ratio:var(--mrc-video-ratio, 9 / 16);
  object-fit:cover;border-radius:var(--r-md);background:#000;
}

/* ---- lightbox ------------------------------------------------------ */

.mrc-lightbox{
  border:0;padding:0;max-width:min(1100px,92vw);max-height:90vh;width:100%;
  background:transparent;overflow:visible;
}
.mrc-lightbox::backdrop{background:rgba(0,0,0,.82);}
.mrc-lightbox video{
  width:100%;height:auto;max-height:90vh;aspect-ratio:auto;
  border-radius:var(--r-md);background:#000;
}
.mrc-lightbox-close{
  position:absolute;top:calc(-1 * var(--s7));right:0;
  width:40px;height:40px;display:grid;place-items:center;
  border:0;border-radius:var(--r-pill);
  background:rgba(255,255,255,.15);color:#fff;cursor:pointer;
  font-size:22px;line-height:1;
}
.mrc-lightbox-close:hover{background:rgba(255,255,255,.28);}
.mrc-lightbox-close:focus-visible{outline:2px solid #fff;outline-offset:2px;}

@media (prefers-reduced-motion:reduce){
  .mrc-video-poster,.mrc-video-play{transition:none;}
  .mrc-video-trigger:hover .mrc-video-poster{transform:none;}
}

/* Five portrait cards across the container, collapsing rather than shrinking
   past the point where a face is readable. */
.mrc-video-row{
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--s5);
  align-items:start;
}
@media (max-width:1024px){ .mrc-video-row{grid-template-columns:repeat(3,minmax(0,1fr));} }
@media (max-width:640px){  .mrc-video-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);} }

/* ---- Experience: full-bleed 50/50 ---------------------------------- */

.mrc-experience{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  align-items:stretch;
}
.mrc-experience-media{display:flex;}
.mrc-experience-media .mrc-video{flex:1;}
.mrc-experience-media .mrc-video-trigger{height:100%;border-radius:0;}
.mrc-experience-copy{
  background:#0F0F0F;color:#fff;
  padding:var(--s8);
  display:flex;flex-direction:column;justify-content:center;gap:var(--s4);
  align-items:flex-start;
}
.mrc-experience-copy .mrc-h2{color:#fff;}
.mrc-experience-copy .mrc-lead{color:rgba(255,255,255,.82);}

@media (max-width:767px){
  .mrc-experience{grid-template-columns:minmax(0,1fr);}
  .mrc-experience-copy{padding:var(--s6) var(--gutter);}
}

/* the lightbox holds a 16:9 frame rather than a portrait card */
.mrc-lightbox-frame{
  width:100%;aspect-ratio:16/9;border:0;display:block;
  border-radius:var(--r-md);background:#000;
}

/* A 40px heading in a 624px column overflowed rather than wrapped, so the copy
   started outside the panel. */
.mrc-experience-copy > *{max-width:100%;}
.mrc-experience-copy .mrc-h2{overflow-wrap:break-word;}

/* ---------- 10-home.css ---------- */
/* Home page sections. Everything here uses the token scale; a value that is not
   on it is a bug in the scale, not a licence for a one-off. */

/* ---- partners strip ------------------------------------------------ */

.mrc-partners{background:linear-gradient(180deg,#DFFFF5 0%,#F3F3F3 100%);}
.mrc-partners-inner{
  display:grid;grid-template-columns:minmax(0,280px) minmax(0,1fr);
  gap:var(--s7);align-items:center;
}
.mrc-partners-title{font-size:var(--t-h2);}
.mrc-accent{color:var(--mrc-green);}

.mrc-marquee{overflow:hidden;-webkit-mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);mask:linear-gradient(90deg,transparent,#000 6%,#000 94%,transparent);}
.mrc-marquee-track{
  display:flex;align-items:center;gap:var(--s9);
  list-style:none;margin:0;padding:0;width:max-content;
  animation:mrc-marquee 46s linear infinite;
}
.mrc-marquee:hover .mrc-marquee-track{animation-play-state:paused;}
.mrc-marquee-track li{flex:0 0 auto;}
/* Full colour, as the original. Greyscaling a logo wall is a common
   convention and was tried here, but it is a change to how the partners are
   presented and not one anybody asked for. */
.mrc-marquee-track img{
  width:auto;height:52px;max-width:170px;object-fit:contain;
}
@keyframes mrc-marquee{from{transform:translateX(0)}to{transform:translateX(-50%)}}

@media (prefers-reduced-motion:reduce){
  .mrc-marquee-track{animation:none;flex-wrap:wrap;width:auto;justify-content:center;gap:var(--s6);}
}
@media (max-width:900px){
  .mrc-partners-inner{grid-template-columns:minmax(0,1fr);gap:var(--s5);}
}

/* ---- programmes intro ---------------------------------------------- */

.mrc-intro-copy{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s5);}
.mrc-intro-media img{width:100%;height:auto;border-radius:var(--r-md);display:block;}

.mrc-quick-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3);}
.mrc-quick-links a{
  display:inline-flex;align-items:center;gap:var(--s2);
  color:var(--mrc-body);text-decoration:none;font-size:var(--t-body);
  transition:color .2s var(--mrc-ease);
}
.mrc-quick-links a:hover{color:var(--mrc-green);}
.mrc-quick-icon{width:20px;height:20px;flex:none;color:var(--mrc-muted);}
.mrc-quick-icon svg{width:100%;height:100%;display:block;}
.mrc-quick-links a:hover .mrc-quick-icon{color:var(--mrc-green);}

/* ---- why MRC -------------------------------------------------------- */

.mrc-why-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s5);
}
.mrc-why-item{
  background:#F7F9F5;border-radius:var(--r-md);
  padding:var(--s6) var(--s5);
  border-bottom:3px solid var(--mrc-green);
  display:flex;align-items:flex-end;min-height:190px;
}
@media (max-width:1024px){ .mrc-why-grid{grid-template-columns:repeat(2,minmax(0,1fr));} }
@media (max-width:640px){  .mrc-why-grid{grid-template-columns:minmax(0,1fr);} .mrc-why-item{min-height:0;} }

/* ---- cards with media ----------------------------------------------- */

.mrc-card-media{display:block;line-height:0;}
.mrc-card-media img{aspect-ratio:16/10;object-fit:cover;width:100%;height:auto;}
.mrc-card-link{color:inherit;text-decoration:none;}
.mrc-card-link:hover{color:var(--mrc-green);}
.mrc-card--media .mrc-card-body{gap:var(--s3);align-items:flex-start;}

/* ---- gallery -------------------------------------------------------- */

.mrc-gallery{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s3);
}
.mrc-gallery-item{display:block;border-radius:var(--r-md);overflow:hidden;line-height:0;}
.mrc-gallery-item img{
  width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;
  transition:transform .4s var(--mrc-ease);
}
.mrc-gallery-item:hover img{transform:scale(1.04);}
@media (max-width:767px){ .mrc-gallery{grid-template-columns:repeat(2,minmax(0,1fr));} }

/* ---- news feed ------------------------------------------------------ */

.mrc-news-feed #sb_instagram{padding-bottom:0 !important;}

/* ---------- 11-programme.css ---------- */
/* Programme pages.

   Built from notes/design-programme-page.md, measured off the live page rather
   than invented. The grounds and the column structure are the design; getting
   the type right is not enough on its own. */

/* ---- hero: dark teal, full bleed ------------------------------------ */

/* a photograph under a #00272D wash at 0.92 — the image reads at about 8%,
   which is why it is served at 1024 rather than 1600: nothing at that opacity
   survives to be seen, and it was the LCP element on all six programme pages */
.mrc-programme-hero{
  position:relative;isolation:isolate;
  background:#00272D;
  /* live measures 158 / 115; these are the nearest 8px multiples */
  padding-block:160px 112px;
}
.mrc-programme-hero::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:#00272D;opacity:.92;
}
.mrc-programme-hero-grid{
  display:grid;grid-template-columns:540fr 550fr;
  gap:var(--s7);align-items:center;
}
.mrc-programme-intro{display:flex;flex-direction:column;align-items:flex-start;gap:var(--s5);}

/* the programme NAME is the small line and the TAGLINE is the headline —
   inverted from what the markup order suggests */
.mrc-programme-eyebrow{
  margin:0;font-size:var(--t-lead);font-weight:600;line-height:1.2;color:#fff;
}
.mrc-programme-headline{
  margin:0;font-size:var(--t-h2);font-weight:600;line-height:1.1;color:#F4F4F4;
}
.mrc-programme-sub{
  margin:0;font-size:var(--t-lead);font-weight:600;line-height:1.35;color:#fff;
}

/* the form keeps the plugin's own card here, unlike the footer */
.mrc-programme-form{justify-self:end;width:100%;max-width:550px;}

/* ---- stats: a card wider than the container ------------------------- */

/* the card hovers across the seam rather than sitting under the hero */
.mrc-stats{padding-block:0;position:relative;z-index:2;}
/* the card itself is 1338 on the live page, so the wrap has to be wider than
   that by its own gutter */
.mrc-stats-wrap{
  max-width:calc(1338px + (2 * var(--s3)));
  margin-inline:auto;padding-inline:var(--s3);
}
.mrc-stats-row{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:var(--s5);margin:0;
  background:#fff;border-radius:11px;padding:var(--s8) var(--s6);
  box-shadow:0 18px 44px -30px rgba(0,39,45,.45);
  /* The section carries mrc-flush-top to cancel the 80px rhythm gap first;
     this then pulls the card up into the hero. Applying only the negative
     margin left it 26px BELOW the hero — the gap ate it. */
  margin-top:-44px;   /* live overlaps by 44 */
}
.mrc-stat{display:flex;flex-direction:column;gap:var(--s1);text-align:center;}
.mrc-stat-value{margin:0;font-size:38px;font-weight:600;color:var(--mrc-green);line-height:1.05;}
.mrc-stat-label{font-size:var(--t-h4);font-weight:600;color:var(--mrc-heading);}

/* ---- about + beyond, side by side ----------------------------------- */

/* live runs these two columns 571 + 559 with a 10px gap — close to touching.
   Kept, on the nearest scale step, rather than opened up to something roomier
   that would not be the design. */
.mrc-prose-grid{display:grid;grid-template-columns:571fr 559fr;gap:var(--s3);align-items:start;}
.mrc-prose-copy{padding-right:var(--s5);}
.mrc-prose-copy .mrc-h4{margin-top:var(--s6);}
.mrc-prose-copy .mrc-btn{margin-top:var(--s6);}
.mrc-prose-body{margin:var(--s4) 0 0;font-size:17px;line-height:1.65;color:#3E3E3E;}

.mrc-highlights{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s6);}
.mrc-highlights li{
  position:relative;padding-left:var(--s6);
  font-size:var(--t-body);line-height:var(--lh-body);color:var(--mrc-body);
}
.mrc-highlights li::before{
  content:"";position:absolute;left:0;top:.55em;
  width:10px;height:10px;border-radius:var(--r-pill);background:var(--mrc-green);
}

/* ---- credentials ----------------------------------------------------- */

/* Four bordered cards beside the copy — 270x221 with a 20px gap on the live
   page — not a strip underneath it. */
.mrc-cred-grid{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s5);
}
.mrc-cred-card{
  background:#fff;border:1px solid #DEDEDE;padding:30px;
  min-height:221px;
  display:flex;flex-direction:column;justify-content:space-between;gap:var(--s5);
}
.mrc-cred-icon{
  width:50px;height:50px;flex:none;display:block;
  background:var(--mrc-green);
  -webkit-mask:var(--mrc-check) center/contain no-repeat;
          mask:var(--mrc-check) center/contain no-repeat;
}
.mrc-cred-text{font-size:var(--t-h4);font-weight:600;line-height:1.25;color:var(--mrc-heading);}

/* ---- the green circled check, used by every list on the page --------- */

:root{
  --mrc-check:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a10 10 0 100 20 10 10 0 000-20zm0 1.6a8.4 8.4 0 110 16.8 8.4 8.4 0 010-16.8zm4.3 5.1l-5.6 5.6-2.9-2.9-1.1 1.1 4 4 6.7-6.7z'/%3E%3C/svg%3E");
}

.mrc-checks{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s3);}
.mrc-checks li{
  position:relative;padding-left:30px;
  font-size:var(--t-body);line-height:var(--lh-body);color:var(--mrc-body);
}
.mrc-checks li::before{
  content:"";position:absolute;left:0;top:.28em;
  width:18px;height:18px;
  background:var(--mrc-green);
  -webkit-mask:var(--mrc-check) center/contain no-repeat;
          mask:var(--mrc-check) center/contain no-repeat;
}

/* ---- all details ------------------------------------------------------ */

.mrc-checks--details{margin-top:var(--s6);gap:var(--s4);}

/* ---- curriculum, on the mint gradient -------------------------------- */

.mrc-tinted{background:linear-gradient(180deg,#DFFFF5 0%,#F3F3F3 100%);}
/* two white cards on the mint ground, each with a dotted rule under its title */
.mrc-curriculum-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s7);align-items:start;}
.mrc-curriculum-card{
  background:#fff;border:1px solid #E7E7E7;border-radius:11px;
  padding:var(--s8);
  box-shadow:0 0 50px -21px rgba(0,0,0,.18);
}
.mrc-curriculum-card h3{font-size:30px;margin-bottom:var(--s5);}
.mrc-curriculum-card h3::after{
  content:"";display:block;width:200px;margin-top:var(--s4);
  border-bottom:2px dotted #CFCFCF;
}

.mrc-why-grid--4{grid-template-columns:repeat(4,minmax(0,1fr));}
.mrc-why-grid--4 .mrc-why-item{min-height:150px;}

@media (max-width:1024px){
  .mrc-programme-hero-grid,.mrc-prose-grid{grid-template-columns:minmax(0,1fr);gap:var(--s6);}
  .mrc-programme-form{justify-self:stretch;max-width:none;}
  .mrc-prose-copy{padding-right:0;}
  .mrc-why-grid--4{grid-template-columns:repeat(2,minmax(0,1fr));}
}

@media (max-width:767px){
  .mrc-programme-hero{padding-block:var(--s9) var(--s8);}
  .mrc-curriculum-grid{grid-template-columns:minmax(0,1fr);gap:var(--s6);}
  .mrc-curriculum-card{padding:var(--s6);}
  .mrc-why-grid--4{grid-template-columns:minmax(0,1fr);}

  /* The stats card stays 2x2 on a phone. Stacking it made four tall rows of
     one number each and pushed everything below the fold; two across keeps the
     whole set readable at a glance, which is the only reason the card exists. */
  .mrc-stats-row{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:var(--s5) var(--s4);
    padding:var(--s6) var(--s4);
  }
  .mrc-stat-value{font-size:26px;}
  .mrc-stat-label{font-size:var(--t-body);}

  /* the credential cards keep their 2x2 too, just tighter */
  .mrc-cred-grid{gap:var(--s3);}
  .mrc-cred-card{padding:var(--s5);min-height:0;gap:var(--s4);}
  .mrc-cred-icon{width:38px;height:38px;}
  .mrc-cred-text{font-size:var(--t-body);}
}

@media (max-width:420px){
  .mrc-stat-value{font-size:22px;}
  .mrc-stats-row{padding:var(--s5) var(--s3);gap:var(--s4) var(--s3);}
}

/* ---------- 12-pages.css ---------- */
/* Campus and policy pages.

   These are not one layout, so the CSS is a block vocabulary rather than a
   page design: a shared hero, a prose flow, an aside, and tabs. */

/* ---- shared hero ---------------------------------------------------- */

.mrc-page-hero{
  position:relative;isolation:isolate;
  display:flex;align-items:center;
  min-height:var(--mrc-hero-min,58vh);
  padding-block:var(--s10);
  background:#00272D;
}
/* The photograph is an <img> so it can be responsive and preloaded; it sits
   behind the copy rather than on the section's own background. */
.mrc-page-hero-img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;
  object-fit:cover;object-position:center;
}
.mrc-page-hero.has-image::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,39,45,.45) 0%,rgba(0,39,45,.78) 100%);
}
.mrc-page-hero-title{
  margin:0;color:#fff;font-weight:600;line-height:1.05;
  font-size:clamp(34px, 5vw, 63px);
  max-width:16ch;
}
.mrc-policy .mrc-page-hero-title,
.mrc-page-hero--wide .mrc-page-hero-title{max-width:none;}

/* ---- prose flow ------------------------------------------------------ */

/* Element resets first, so the rhythm rules below win at equal specificity.
   With these declared after, `.mrc-block-body{margin:0}` beat
   `.mrc-prose-flow > * + *` and consecutive paragraphs collapsed to a 0 gap. */
.mrc-block-body{margin:0;font-size:17px;line-height:1.7;color:#3E3E3E;}
.mrc-block-heading{margin:0;}

/* Vertical rhythm.

   One uniform gap made a heading, its description and its bullet list read as
   one undifferentiated run. Space belongs to the relationship, not to the
   element: a heading takes a large gap ABOVE it (that is the section break) and
   a small one below (it belongs to the copy that follows). */

.mrc-prose-flow > * + *{margin-top:var(--s5);}                  /* 24 — between paragraphs */
/* blocks get room on both sides */
.mrc-prose-flow > * + .mrc-feature-card,
.mrc-prose-flow > * + .mrc-card-grid,
.mrc-prose-flow > * + .mrc-gallery,
.mrc-prose-flow > * + .mrc-media-card,
.mrc-prose-flow > * + .mrc-checks,
.mrc-prose-flow > * + .mrc-tabs,
.mrc-prose-flow > .mrc-feature-card + *,
.mrc-prose-flow > .mrc-card-grid + *,
.mrc-prose-flow > .mrc-gallery + *,
.mrc-prose-flow > .mrc-media-card + *,
.mrc-prose-flow > .mrc-checks + *{margin-top:var(--s7);}         /* 40 */

/* two lists that belong together stay together */
.mrc-prose-flow > .mrc-checks + .mrc-checks{margin-top:var(--s4);}

/* Declared last on purpose: a heading opens a section whatever precedes it.
   Placed earlier, `.mrc-checks + *` won and a heading after a list got 40. */
.mrc-prose-flow > * + .mrc-block-heading{margin-top:var(--s10);}
.mrc-prose-flow > .mrc-block-heading + .mrc-block-heading{margin-top:var(--s3);}
.mrc-prose-flow > .mrc-block-heading + *{margin-top:var(--s4);}

.mrc-prose-flow > :first-child{margin-top:0;}
.mrc-prose-flow--narrow{max-width:78ch;}


.mrc-block-figure{margin:0;}
.mrc-block-figure img{width:100%;height:auto;display:block;border-radius:var(--r-md);}
.mrc-block-figure figcaption{
  margin-top:var(--s3);font-size:var(--t-sm);color:var(--mrc-muted);line-height:1.5;
}
.mrc-block-list{gap:var(--s3);}

/* ---- body + aside ---------------------------------------------------- */

.mrc-with-aside{
  display:grid;grid-template-columns:minmax(0,1fr) 300px;
  gap:var(--s9);align-items:start;
}
.mrc-aside{position:sticky;top:calc(var(--s10) + var(--s3));}
.mrc-aside-title{
  margin:0 0 var(--s4);font-size:var(--t-h4);font-weight:800;color:#111;
}
.mrc-aside-links{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;}
.mrc-aside-links li + li{border-top:1px solid rgba(0,0,0,.08);}
.mrc-aside-links a{
  display:block;padding:var(--s3) 0;
  font-size:var(--t-body);color:var(--mrc-body);text-decoration:none;
  transition:color .2s var(--mrc-ease);
}
.mrc-aside-links a:hover{color:var(--mrc-green);}

/* ---- tabs ------------------------------------------------------------ */

/* Without the script this is a labelled stack — every panel reachable. The
   script adds .is-enhanced and only then does anything get hidden. */
.mrc-tablist{display:none;}
.mrc-tabs.is-enhanced .mrc-tablist{
  display:flex;flex-wrap:wrap;gap:var(--s2);
  margin-bottom:var(--s7);
  border-bottom:1px solid rgba(0,0,0,.1);padding-bottom:var(--s4);
}
.mrc-tab{
  appearance:none;border:1px solid transparent;background:#F2F5EF;
  padding:var(--s3) var(--s5);border-radius:var(--r-pill);
  font-family:var(--mrc-font);font-size:var(--t-sm);font-weight:600;
  color:var(--mrc-body);cursor:pointer;
  transition:background-color .2s var(--mrc-ease),color .2s var(--mrc-ease);
}
.mrc-tab:hover{background:#E6EFE0;}
.mrc-tab.is-active{background:var(--mrc-green);color:#fff;}
.mrc-tab:focus-visible{outline:2px solid var(--mrc-green);outline-offset:2px;}

.mrc-tabpanel + .mrc-tabpanel{margin-top:var(--s8);}
.mrc-tabpanel-title{margin:0 0 var(--s5);font-size:var(--t-h3);font-weight:600;color:var(--mrc-heading);}
.mrc-tabs.is-enhanced .mrc-tabpanel{display:none;margin-top:0;}
.mrc-tabs.is-enhanced .mrc-tabpanel.is-active{display:block;}
.mrc-tabs.is-enhanced .mrc-tabpanel-title{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;}

.mrc-block-gallery{margin-top:var(--s5);}

@media (max-width:1024px){
  .mrc-with-aside{grid-template-columns:minmax(0,1fr);gap:var(--s7);}
  .mrc-aside{position:static;}
}
@media (max-width:767px){
  .mrc-page-hero{padding-block:var(--s8);min-height:auto;}
  .mrc-block-body{font-size:var(--t-body);}
}

/* ---- card vocabulary -------------------------------------------------
   Measured off the live campus pages. A section heading does not sit on the
   page — it sits in a white card beside its image, and every other image is a
   card with its caption under it. Building these as bare elements is what made
   the first port read as a different site. */

/* heading left, image right, in one card — live: radius 25, 40px copy pad,
   shadow 0 0 50px -21px rgba(0,0,0,.16) */
.mrc-feature-card{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
  background:#fff;border-radius:25px;overflow:hidden;
  box-shadow:0 0 50px -21px rgba(0,0,0,.16);
}
.mrc-feature-card-copy{
  padding:var(--s7);
  display:flex;align-items:center;
}
.mrc-feature-card-copy .mrc-h2{margin:0;}
.mrc-feature-card-media{line-height:0;}
.mrc-feature-card-media img{width:100%;height:100%;object-fit:cover;display:block;}

/* an image in a card, caption under it */
.mrc-media-card{
  margin:0;background:#fff;border-radius:var(--r-md);overflow:hidden;
  box-shadow:0 0 40px -22px rgba(0,0,0,.20);
  display:flex;flex-direction:column;
}
.mrc-media-card img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;display:block;}
.mrc-media-card figcaption{
  padding:var(--s4) var(--s5) var(--s5);
  font-size:var(--t-sm);font-weight:600;line-height:1.4;color:var(--mrc-heading);
}

.mrc-card-grid{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s5);
}

/* section headings carry a green rule on the live pages */
.mrc-prose-flow .mrc-block-heading{
  padding-left:var(--s4);
  border-left:4px solid var(--mrc-green);
}

/* check lists run two across */
.mrc-checks--two{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:var(--s3) var(--s6);
}

/* ---- related links, as a floating card ------------------------------
   live: radius 22, padding 14/14/22, shadow 0 6px 24px rgba(15,23,42,.06),
   with an image on top and the circled arrow beside each link. */

.mrc-aside{
  position:sticky;top:calc(var(--s10) + var(--s3));
  background:#fff;border-radius:22px;
  padding:14px 14px 22px;
  box-shadow:0 6px 24px rgba(15,23,42,.06);
}
.mrc-aside-image{margin:0 0 var(--s5);line-height:0;}
.mrc-aside-image img{width:100%;height:auto;aspect-ratio:16/11;object-fit:cover;border-radius:16px;display:block;}
.mrc-aside-title{
  margin:0 0 var(--s4);padding-inline:var(--s2);
  font-size:var(--t-h4);font-weight:800;color:#111;
}
.mrc-aside-links{list-style:none;margin:0;padding:0 var(--s2);display:flex;flex-direction:column;gap:var(--s3);}
.mrc-aside-links li + li{border-top:0;}
.mrc-aside-links a{
  display:flex;align-items:center;gap:var(--s3);
  padding:0;font-size:var(--t-body);color:var(--mrc-body);text-decoration:none;
  transition:color .2s var(--mrc-ease);
}
.mrc-aside-links a::before{
  content:"";width:22px;height:22px;flex:none;
  background:currentColor;
  -webkit-mask:var(--mrc-arrow-circle) center/contain no-repeat;
          mask:var(--mrc-arrow-circle) center/contain no-repeat;
  color:var(--mrc-muted);
}
.mrc-aside-links a:hover{color:var(--mrc-green);}
.mrc-aside-links a:hover::before{color:var(--mrc-green);}

:root{
  /* stroked circle with a diagonal arrow, as the live widget draws it */
  --mrc-arrow-circle:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8.5 15.5 15.5 8.5'/%3E%3Cpath d='M9.5 8.5h6v6'/%3E%3C/svg%3E");
}

@media (max-width:900px){
  .mrc-feature-card{grid-template-columns:minmax(0,1fr);}
  .mrc-feature-card-copy{padding:var(--s6);}
  .mrc-feature-card-media img{aspect-ratio:16/10;height:auto;}
  .mrc-card-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
}
@media (max-width:640px){
  .mrc-card-grid{grid-template-columns:minmax(0,1fr);}
  .mrc-checks--two{grid-template-columns:minmax(0,1fr);}
}

/* ---- split hero ------------------------------------------------------
   Hostels opens with a mint gradient panel carrying the title and a
   photograph beside it, not a photograph behind it. */

.mrc-page-hero--split{
  display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  align-items:stretch;
  min-height:var(--mrc-hero-min,52vh);
  padding:0;background:none;
}
.mrc-page-hero--split .mrc-page-hero-copy{
  background:linear-gradient(37deg,#F1FFE4 0%,#FFFFFF 100%);
  display:flex;align-items:center;
  padding:var(--s10) var(--gutter);
}
.mrc-page-hero--split .mrc-page-hero-copy-inner{
  width:100%;max-width:calc(var(--container) / 2);
  margin-left:auto;padding-right:var(--s7);
}
.mrc-page-hero--split .mrc-page-hero-title{
  color:var(--mrc-heading);max-width:18ch;
  font-size:clamp(30px, 3.4vw, 46px);
}
.mrc-page-hero--split .mrc-page-hero-media{line-height:0;}
.mrc-page-hero--split .mrc-page-hero-media img{
  width:100%;height:100%;object-fit:cover;object-position:center left;display:block;
}

@media (max-width:900px){
  .mrc-page-hero--split{grid-template-columns:minmax(0,1fr);}
  .mrc-page-hero--split .mrc-page-hero-copy{padding:var(--s8) var(--gutter);}
  .mrc-page-hero--split .mrc-page-hero-copy-inner{max-width:none;padding-right:0;}
  .mrc-page-hero--split .mrc-page-hero-media img{aspect-ratio:16/10;height:auto;}
}

/* ---------- 13-content-pages.css ---------- */
/* Ordinary content pages — About first, and the shapes it establishes.

   Nothing here is About-specific by name. The split intro, the full-bleed
   message band, the media-card grid and the two-column check list are the
   four shapes the remaining pages keep reaching for. */

/* ---- section grounds -------------------------------------------------

   A section that paints its own ground closes the rhythm gap on both sides:
   the colour change is itself the separation, so the 80 of white either side
   reads as a seam the live page does not have. The band pulls itself up to
   its predecessor, and pulls its successor up to itself — two rules, so a run
   of adjacent bands still resolves to one negative margin each. Its own
   padding still carries the internal rhythm. */

/* :not(:first-child) matters. A band opening the page has no gap above it to
   close, and the negative margin pulled it up under the sticky header instead
   — the Careers title sat exactly on the header's bottom edge with none of its
   80px of padding left. */
.site-main > .mrc-band:not(:first-child),
.site-main > .mrc-band + *{margin-top:calc(-1 * var(--section-y));}

.mrc-section--mint{background:#E6FFF7;}

/* The companies band. Elementor painted this on a ::before at half opacity,
   which resolves to these two stops against white. Painted directly here so
   there is no stacking context to reason about. */
.mrc-section--mint-fade{
  background:linear-gradient(180deg,#EFFFFA 0%,#F9F9F9 100%);
}

/* ---- hero: eyebrow, and copy anchored to the bottom ------------------ */

.mrc-page-hero-eyebrow{
  margin:0 0 var(--s3);
  color:#fff;font-size:var(--t-lead);font-weight:600;line-height:1.2;
}

/* A full-height hero puts the photograph's subject in the upper two thirds,
   so the copy sits at the bottom and the wash runs transparent to solid
   downward rather than evenly across. */
/* A line under the title — an affiliation, a qualifier. Not a heading. */
.mrc-page-hero-sub{
  margin:var(--s4) 0 0;
  color:#fff;font-size:var(--t-lead);font-weight:400;line-height:1.3;
}

.mrc-page-hero--bottom{align-items:flex-end;padding-bottom:var(--s10);}
.mrc-page-hero--bottom.has-image::before{
  background:linear-gradient(180deg,rgba(0,0,0,0) 0%,rgba(0,0,0,.62) 62%,rgba(0,0,0,.82) 100%);
}
.mrc-page-hero--bottom .mrc-page-hero-title{
  font-size:clamp(64px,6.1vw,88px);
  line-height:1;
  max-width:none;
}

/* ---- split section: copy beside a photograph ------------------------- */

.mrc-figure{margin:0;line-height:0;}
.mrc-figure img{display:block;width:100%;height:auto;}

/* mrc-grid--split centres its columns. Where one column is long copy and the
   other a stack of cards, they align at the top instead. */
.mrc-grid--top{align-items:start;}

/* Prose rhythm inside a stack.

   .mrc-stack ships a flat 16 between children, and 12-pages.css then zeroes
   .mrc-block-body's margin at equal specificity from a later file — so a
   heading and its paragraphs collapsed to a 0 gap. These restate the rhythm
   for the elements that reset it, from a file that loads after both:
   16 from a heading to its body, 24 between paragraphs. */
.mrc-stack > * + .mrc-block-body{margin-top:var(--s4);}
.mrc-stack > .mrc-block-body + .mrc-block-body{margin-top:var(--s5);}

/* A subheading that opens a new passage needs to separate from the one that
   closed — 16 read as though it belonged to the paragraph above it. 40 is the
   same step the prose flow uses around a block. */
.mrc-stack > .mrc-block-body + h2,
.mrc-stack > .mrc-block-body + h3,
.mrc-stack > .mrc-block-body + h4{margin-top:var(--s7);}

.mrc-stack-cta{margin-top:var(--s5);}

/* A label above a heading, not a heading itself — live sets it at 20/300 and
   marks it h2, which is how the Courses page ended up with eighteen h2 and no
   h1. It reads as an eyebrow, so it is a paragraph that looks like one. */
.mrc-eyebrow{
  margin:0 0 var(--s3);
  font-size:var(--t-lead);font-weight:300;line-height:1.2;color:var(--mrc-body);
}
.mrc-stack > .mrc-eyebrow + *{margin-top:0;}

/* ---- the message band ------------------------------------------------
   The one section on the page that leaves the 1140 grid: a photograph fills
   the left, a near-black panel the right. The panel's inset is what gives the
   band its weight, so it scales with the viewport rather than sitting at a
   fixed 170px that would crush at 900. */

.mrc-message{
  display:grid;
  grid-template-columns:minmax(0,42fr) minmax(0,58fr);
  min-height:70vh;
  background:#020101;
}
.mrc-message-media{
  background-image:var(--mrc-message-image);
  background-size:cover;background-position:top center;
}
.mrc-message-panel{
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;
  gap:var(--s5);
  padding:clamp(var(--s10),11vw,160px);
  color:#fff;
}
.mrc-message-panel > p{margin:0;}
.mrc-message-title{color:#fff;max-width:12ch;}
.mrc-message-quote{
  margin:0;color:#fff;font-size:var(--t-lead);font-weight:300;line-height:var(--lh-body);
}

/* ---- explore: media cards -------------------------------------------- */

.mrc-explore-title{margin-bottom:var(--s7);}
.mrc-explore{list-style:none;margin:0;padding:0;align-items:stretch;}
.mrc-explore-card{
  box-shadow:0 4px 24px rgba(0,0,0,.08);
  overflow:hidden;
}
.mrc-explore-card img{aspect-ratio:4/3;object-fit:cover;}
.mrc-explore-card .mrc-card-body{
  padding:var(--s5) var(--s6) var(--s6);
  gap:var(--s3);
  flex:1;align-items:flex-start;
}
.mrc-explore-card h3{margin:0;}

/* ---- companies: heading, then two check-marked columns --------------- */

.mrc-companies{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s5);align-items:start;
}
.mrc-companies > h2{margin:0;}

/* ---- responsive ------------------------------------------------------ */

@media (max-width:1024px){
  .mrc-message{grid-template-columns:minmax(0,1fr);}
  .mrc-message-media{min-height:52vh;}
  .mrc-message-panel{padding:var(--s10) var(--gutter);}
  .mrc-message-title{max-width:none;}
  .mrc-companies{grid-template-columns:repeat(2,minmax(0,1fr));}
  .mrc-companies > h2{grid-column:1 / -1;}
}

@media (max-width:767px){
  .mrc-page-hero--bottom{padding-bottom:var(--s8);}
  .mrc-companies{grid-template-columns:minmax(0,1fr);}
  .mrc-explore-card .mrc-card-body{padding:var(--s5);}
}

/* ---- icon cards ------------------------------------------------------
   Icon, title, body, sometimes a button. Careers uses it for the four roles
   and the four benefits; live gives them a 15px radius and a shadow with no
   border, which is a different card from the bordered credential one and
   stays that way.

   Named icon-card, not feature-card: 11-programme.css already owns
   .mrc-feature-card for the campus heading-beside-image cards, and reusing
   the name silently turned these into two-column grids. */

.mrc-features{list-style:none;margin:0;padding:0;align-items:stretch;}
.mrc-icon-card{
  border-radius:var(--r-md);
  box-shadow:0 4px 24px rgba(0,0,0,.08);
  padding:var(--s6);
  gap:var(--s3);
}
/* .mrc-card img sets width:100% at (0,1,1), so a bare class here loses and the
   240px SVGs rendered at full size. Two classes wins. */
.mrc-icon-card .mrc-icon-card-icon{
  width:56px;height:56px;display:block;margin-bottom:var(--s2);
}
.mrc-icon-card h3{margin:0;}
.mrc-icon-card .mrc-block-body{margin:0;flex:1;}
.mrc-icon-card-cta{margin:var(--s4) 0 0;}

/* ---- centred sections ------------------------------------------------
   Careers ranges everything to the middle. Its own convention, kept. */

.mrc-centered{text-align:center;}
.mrc-centered .mrc-lead{max-width:70ch;margin-inline:auto;}
.mrc-centered .mrc-features,
.mrc-centered .mrc-explore{text-align:left;}
.mrc-section-head.mrc-centered{
  display:flex;flex-direction:column;align-items:center;gap:var(--s3);
  margin-bottom:var(--s7);
}

.mrc-careers-hero{background:#181818;}
.mrc-careers-hero .mrc-display,
.mrc-careers-hero .mrc-lead{color:#fff;}
.mrc-careers-hero .mrc-lead{margin-top:var(--s5);}
/* Centred under the copy, not ranged right. Live aligns it right, which
   strands it in the corner a long way from the sentence it follows. */
.mrc-careers-hero-cta{margin:var(--s7) 0 0;text-align:center;}

/* live sets a down-arrow icon on the hero button; the drawn arrow the system
   already uses, rotated, avoids pulling in Font Awesome for one glyph */
.mrc-btn--arrow-down::after{transform:rotate(90deg);}



/* Buttons closing a prose passage. */
.mrc-block-actions{
  display:flex;flex-wrap:wrap;gap:var(--s4);margin:0;
}
.mrc-prose-flow > .mrc-block-actions{margin-top:var(--s7);}

/* ---- contact -------------------------------------------------------
   The hero carries the form beside its title rather than under it, so it is
   its own section: the same dark wash as page-hero, but a two-column grid and
   no minimum height — the form decides how tall it is. */

.mrc-contact-hero{
  position:relative;isolation:isolate;
  padding-block:var(--s11);
  background:#00272D;
}

.mrc-contact-hero.has-image::before{
  content:"";position:absolute;inset:0;z-index:-1;
  background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.72) 100%);
}
.mrc-contact-hero-title{
  margin:0;color:#fff;font-weight:600;line-height:1.05;
  font-size:clamp(48px,5.6vw,80px);
}

/* ---- addresses ------------------------------------------------------
   Live renders these as a plain icon list with no links, so on a phone the
   numbers are not tappable. Here the row's type decides the icon and the link. */

.mrc-offices{align-items:start;}
.mrc-office h2{margin:0 0 var(--s5);}
.mrc-office-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s4);}
.mrc-office-row{
  position:relative;padding-left:34px;
  font-size:var(--t-body);line-height:var(--lh-body);color:var(--mrc-body);
}
.mrc-office-row a{color:inherit;text-decoration:none;}
.mrc-office-row a:hover{color:var(--mrc-green);text-decoration:underline;}
.mrc-office-row::before{
  content:"";position:absolute;left:0;top:.15em;
  width:20px;height:20px;
  background:var(--mrc-green);
  -webkit-mask:var(--mrc-office-icon) center/contain no-repeat;
          mask:var(--mrc-office-icon) center/contain no-repeat;
}
.mrc-office-row--tel{
  --mrc-office-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6.6 10.8a15.1 15.1 0 006.6 6.6l2.2-2.2a1 1 0 011-.24 11.4 11.4 0 003.6.58 1 1 0 011 1V20a1 1 0 01-1 1A17 17 0 013 4a1 1 0 011-1h3.5a1 1 0 011 1c0 1.25.2 2.46.57 3.6a1 1 0 01-.25 1z'/%3E%3C/svg%3E");
}
.mrc-office-row--email{
  --mrc-office-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M20 4H4a2 2 0 00-2 2v12a2 2 0 002 2h16a2 2 0 002-2V6a2 2 0 00-2-2zm0 4.24l-8 4.62-8-4.62V6l8 4.62L20 6z'/%3E%3C/svg%3E");
}
.mrc-office-row--place{
  --mrc-office-icon:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 1114.5 9 2.5 2.5 0 0112 11.5z'/%3E%3C/svg%3E");
}

.mrc-map{line-height:0;border-radius:var(--r-md);overflow:hidden;}
.mrc-map iframe{display:block;width:100%;height:var(--mrc-map-h,445px);border:0;}

/* The facade the map replaces itself with on click. */
.mrc-map-facade{
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:var(--s3);
  width:100%;height:var(--mrc-map-h,445px);
  padding:var(--s6);
  border:1px solid rgba(0,0,0,.1);border-radius:var(--r-md);
  background:
    repeating-linear-gradient(0deg,rgba(0,0,0,.035) 0 1px,transparent 1px 42px),
    repeating-linear-gradient(90deg,rgba(0,0,0,.035) 0 1px,transparent 1px 42px),
    #eef2ec;
  cursor:pointer;font:inherit;line-height:1.4;text-align:center;
}
.mrc-map-facade:hover{border-color:var(--mrc-green);}
.mrc-map-pin{
  width:38px;height:38px;display:block;background:var(--mrc-green);
  -webkit-mask:var(--mrc-office-icon-place) center/contain no-repeat;
          mask:var(--mrc-office-icon-place) center/contain no-repeat;
}
:root{
  --mrc-office-icon-place:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 00-7 7c0 5.25 7 13 7 13s7-7.75 7-13a7 7 0 00-7-7zm0 9.5A2.5 2.5 0 1114.5 9 2.5 2.5 0 0112 11.5z'/%3E%3C/svg%3E");
}
.mrc-map-copy{display:flex;flex-direction:column;gap:2px;}
.mrc-map-title{font-size:var(--t-body);font-weight:600;color:var(--mrc-heading);}
.mrc-map-hint{font-size:var(--t-sm);color:var(--mrc-muted);}
.mrc-map-out{
  margin-top:var(--s3);font-size:var(--t-sm);font-weight:600;
  color:var(--mrc-green);text-decoration:none;
}
.mrc-map-out:hover{text-decoration:underline;}

@media (max-width:900px){
  .mrc-contact-hero{padding-block:var(--s10);}
}

/* ---- placements ----------------------------------------------------- */

.mrc-answers{align-items:start;}
.mrc-answer{display:flex;flex-direction:column;gap:var(--s3);}
.mrc-answer .mrc-block-body{margin:0 0 var(--s3);}
.mrc-answer .mrc-video{border-radius:var(--r-md);overflow:hidden;}

.mrc-future{margin-top:0;}

/* Eight portrait cards. Four across is the widest that keeps a face readable
   at this container; below that they halve rather than shrink. */
.mrc-stories{
  list-style:none;margin:0;padding:0;
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s5);
}
.mrc-stories img{
  display:block;width:100%;height:auto;
  border-radius:var(--r-md);
  aspect-ratio:4 / 5;object-fit:cover;
}

@media (max-width:1024px){
  .mrc-stories{grid-template-columns:repeat(3,minmax(0,1fr));}
}
@media (max-width:767px){
  .mrc-stories{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s4);}
}

/* ---- approvals ------------------------------------------------------ */

.mrc-approvals-logo{margin:0;}
.mrc-approvals-logo img{display:block;width:auto;max-height:96px;}
.mrc-stack > .mrc-approvals-logo + *{margin-top:var(--s7);}

.mrc-claims{list-style:none;margin:0;padding:0;align-items:stretch;}
.mrc-stack > * + .mrc-claims{margin-top:var(--s7);}
/* The texture is a pale dotted pattern, so the type on it is the normal dark
   heading colour and the card is anchored by a green rule along the bottom —
   which is what the live card does. White type on it is invisible. */
.mrc-claim-card{
  display:flex;align-items:center;
  min-height:180px;padding:var(--s6);
  border-radius:0;
  border-bottom:5px solid var(--mrc-green);
  background-color:#F7F9F5;
  background-image:var(--mrc-claim-texture);
  background-size:cover;background-position:center;
}
.mrc-claim-card h3{margin:0;color:var(--mrc-heading);line-height:1.3;}

/* ---- the director's letter ------------------------------------------ */

.mrc-director-hero{background:#020101;}
.mrc-director-title{color:#fff;max-width:16ch;}
.mrc-director-quote{
  margin:var(--s5) 0 0;color:#fff;
  font-size:var(--t-lead);font-weight:300;line-height:var(--lh-body);
}

.mrc-portraits{display:flex;flex-direction:column;gap:var(--s5);}
.mrc-portraits figure{margin:0;line-height:0;}
.mrc-portraits img{
  display:block;width:100%;height:auto;
  border-radius:var(--r-md);
}

/* A source note inside the letter — smaller and quieter than the sentence it
   qualifies, which is what the live inline styles were reaching for. */
.mrc-block-body cite{
  font-style:italic;font-size:var(--t-xs);color:var(--mrc-muted);
}

.mrc-signature{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:var(--s4);}
.mrc-prose-flow > .mrc-signature{margin-top:var(--s7);}
.mrc-signature-name{display:block;font-weight:600;color:var(--mrc-heading);}
.mrc-signature-role{display:block;font-style:italic;color:var(--mrc-muted);}

@media (max-width:767px){
  .mrc-claim-card{min-height:0;}
  .mrc-director-title{max-width:none;}
}

/* ---- articles: listing, card, single ---------------------------------
   News & Events was seven articles nobody could reach. This is the listing,
   the card and the article page; the card is the media card with a date and
   an excerpt, so it sits in the same family as Explore and Campus. */

.mrc-listing-head{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:var(--s5);margin-bottom:var(--s7);
}
.mrc-listing-count{margin:0;color:var(--mrc-muted);font-size:var(--t-sm);}

.mrc-search{display:flex;gap:var(--s3);flex:0 1 420px;}
.mrc-search input[type="search"]{
  flex:1;min-width:0;height:var(--btn-h);
  padding:0 var(--s4);
  font:inherit;font-size:var(--t-body);color:var(--mrc-body);
  background:#fff;border:1px solid rgba(0,0,0,.14);border-radius:var(--r-sm);
}
.mrc-search input[type="search"]:focus-visible{
  outline:2px solid var(--mrc-green);outline-offset:1px;border-color:transparent;
}

.mrc-articles{list-style:none;margin:0;padding:0;align-items:stretch;}
.mrc-article-card{box-shadow:0 4px 24px rgba(0,0,0,.08);overflow:hidden;}
.mrc-article-media{display:block;line-height:0;}
.mrc-article-card img{aspect-ratio:16 / 10;object-fit:cover;}
.mrc-article-card .mrc-card-body{
  padding:var(--s5) var(--s6) var(--s6);gap:var(--s3);
  flex:1;align-items:flex-start;
}
.mrc-article-date{margin:0;font-size:var(--t-xs);letter-spacing:.4px;text-transform:uppercase;color:var(--mrc-muted);}
.mrc-article-card h3{margin:0;line-height:1.3;}
.mrc-article-card h3 a{color:inherit;text-decoration:none;}
.mrc-article-card h3 a:hover{color:var(--mrc-green);}
.mrc-article-excerpt{margin:0;flex:1;font-size:var(--t-body);line-height:var(--lh-body);color:var(--mrc-body);}

.mrc-pagination{margin-top:var(--s10);}
.mrc-pagination ul{
  list-style:none;margin:0;padding:0;
  display:flex;flex-wrap:wrap;gap:var(--s2);justify-content:center;
}
.mrc-pagination a,
.mrc-pagination span{
  display:flex;align-items:center;justify-content:center;
  min-width:44px;height:44px;padding:0 var(--s3);
  border:1px solid rgba(0,0,0,.12);border-radius:var(--r-sm);
  font-size:var(--t-sm);font-weight:600;color:var(--mrc-body);text-decoration:none;
}
.mrc-pagination a:hover{border-color:var(--mrc-green);color:var(--mrc-green);}
.mrc-pagination .current{background:var(--mrc-green);border-color:var(--mrc-green);color:#fff;}

/* ---- the article page ------------------------------------------------ */

.mrc-article-head .mrc-h1{margin:var(--s4) 0 0;max-width:24ch;}
.mrc-crumbs{display:flex;flex-wrap:wrap;gap:var(--s2);font-size:var(--t-sm);}
.mrc-crumbs a{color:var(--mrc-muted);text-decoration:none;}
.mrc-crumbs a:hover{color:var(--mrc-green);}
.mrc-crumbs a + a::before{content:"/";margin-right:var(--s2);color:var(--mrc-dim);}

.mrc-article-meta{
  display:flex;flex-wrap:wrap;gap:var(--s2);align-items:center;
  margin:var(--s4) 0 0;font-size:var(--t-sm);color:var(--mrc-muted);
}
.mrc-article-cat{color:var(--mrc-green);font-weight:600;text-decoration:none;}
.mrc-article-cat:hover{text-decoration:underline;}

.mrc-article-hero{margin-top:var(--s7);line-height:0;}
.mrc-article-hero img{
  display:block;width:100%;height:auto;
  max-height:520px;object-fit:cover;
  border-radius:var(--r-md);
}

/* the_content output — the article body is authored in the block editor, so
   the rhythm has to reach elements the prose flow was not written for */
.post-body > * + *{margin-top:var(--s5);}
.post-body > * + h2{margin-top:var(--s10);}
.post-body > * + h3{margin-top:var(--s7);}
.post-body h2{margin:0;font-size:var(--t-h3);font-weight:600;line-height:var(--lh-heading);color:var(--mrc-heading);}
.post-body h3{margin:0;font-size:var(--t-h4);font-weight:600;line-height:var(--lh-heading);color:var(--mrc-heading);}
.post-body p{margin:0;font-size:17px;line-height:1.7;color:#3E3E3E;}
.post-body a{color:var(--mrc-green);}
.post-body img{height:auto;border-radius:var(--r-md);}
.post-body ul,.post-body ol{margin:0;padding-left:1.3em;}
.post-body li + li{margin-top:var(--s3);}
.post-body blockquote{
  margin:0;padding-left:var(--s5);
  border-left:4px solid var(--mrc-green);
  font-size:var(--t-lead);font-weight:300;color:var(--mrc-heading);
}

@media (max-width:767px){
  .mrc-listing-head{flex-direction:column;align-items:stretch;}
  .mrc-search{flex:1 1 auto;}
  .mrc-article-head .mrc-h1{max-width:none;}
}

/* A job description has no aside, so its prose column keeps the reading
   measure the article body has rather than running the full container. */
.mrc-job-body{max-width:75ch;}

/* ---- the floating WhatsApp button ------------------------------------
   Was the Click to Chat plugin: 76 KB of its own CSS and JS, and the only
   thing on the site still requiring jQuery, for a link to wa.me. Same number,
   same message, same corner and offsets as the plugin's saved settings. */

.mrc-whatsapp{
  position:fixed;right:18px;bottom:15px;z-index:999;
  display:flex;align-items:center;justify-content:center;
  width:56px;height:56px;
  border-radius:50%;
  background:#25D366;
  box-shadow:0 6px 18px rgba(0,0,0,.22);
  transition:transform .2s var(--mrc-ease), box-shadow .2s var(--mrc-ease);
}
.mrc-whatsapp svg{width:34px;height:34px;fill:#fff;display:block;}
.mrc-whatsapp:hover,
.mrc-whatsapp:focus-visible{transform:scale(1.06);box-shadow:0 10px 24px rgba(0,0,0,.28);}
.mrc-whatsapp:focus-visible{outline:3px solid #fff;outline-offset:3px;}

@media (max-width:767px){
  .mrc-whatsapp{right:10px;bottom:10px;width:52px;height:52px;}
  .mrc-whatsapp svg{width:31px;height:31px;}
}
@media (prefers-reduced-motion:reduce){
  .mrc-whatsapp{transition:none;}
  .mrc-whatsapp:hover{transform:none;}
}

/* ---------- 14-forms.css ---------- */
/* Forms — the enquiry, careers and contact cards.

   Lifted out of the hgx-forms plugin, which printed it as an inline
   <style> on every page carrying a form. Here it is part of main.css, so
   it is cached with everything else and the markup has one styling home.

   Class names are unchanged: the markup they style is the same markup,
   which is what made it safe to swap the renderer underneath. */


.hgx-card {
  max-width: 580px; margin: 0 auto; padding: 36px 32px;
  background: linear-gradient(180deg, var(--mrc-teal-card) 0%, var(--mrc-teal-card-2) 100%);
  border-radius: 22px;
  font-family: -apple-system, BlinkMacSystemFont, var(--mrc-font);
  color: #fff; box-shadow: 0 20px 50px rgba(0,0,0,.18); box-sizing: border-box;
}
.hgx-card *, .hgx-card *::before, .hgx-card *::after { box-sizing: border-box; }

/* Optional eyebrow + heading shown inside the card (e.g. contact form). */
.hgx-card-head { text-align: center; margin-bottom: 8px; }
.hgx-eyebrow {
  font-size: 14px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  margin: 0 0 12px; color: #fff;
}
.hgx-headline {
  font-size: 30px; font-weight: 700; line-height: 1.15; margin: 0 0 8px; color: #fff;
}
@media (max-width: 480px) {
  .hgx-headline { font-size: 24px; }
}
.hgx-form { display: flex; flex-direction: column; gap: 18px; margin: 0; }
.hgx-form[hidden] { display: none; }
.hgx-row { display: flex; flex-direction: column; }
.hgx-row-two { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.hgx-field { display: flex; flex-direction: column; gap: 6px; }
.hgx-field > span { font-size: 15px; font-weight: 500; color: #fff; line-height: 1.2; }
.hgx-field > .hgx-hint { font-size: 12px; opacity: .7; font-weight: 400; }
.hgx-field input, .hgx-field select, .hgx-field textarea {
  width: 100%; padding: 14px 16px; background: #fff; color: #1a2a30;
  border: 1px solid transparent; border-radius: 10px; font-size: 15px; font-family: inherit;
  outline: none; transition: box-shadow .15s ease, border-color .15s ease;
}
.hgx-field textarea { resize: vertical; min-height: 90px; }
.hgx-field input::placeholder, .hgx-field textarea::placeholder { color: #9aa5ad; }
.hgx-field input:focus, .hgx-field select:focus, .hgx-field textarea:focus {
  box-shadow: 0 0 0 3px rgba(123,189,61,.35);
}
.hgx-field input:invalid:not(:placeholder-shown) { border-color: #e25555; }

.hgx-file { position: relative; }
.hgx-file input[type="file"] { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.hgx-file-box {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 14px 16px; background: #fff; color: #1a2a30;
  border: 1px dashed #b8c4cc; border-radius: 10px; font-size: 14px; cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.hgx-file:hover .hgx-file-box, .hgx-file input:focus + .hgx-file-box { border-color: #7BBD3D; background: #fafffa; }
.hgx-file-name { color: #1a2a30; opacity: .75; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hgx-file-name.has-file { opacity: 1; font-weight: 600; }
.hgx-file-btn { color: var(--mrc-teal-card-2); font-weight: 700; font-size: 14px; flex: none; }

.hgx-submit {
  margin-top: 8px; padding: 16px 20px; background: #7BBD3D; color: #fff;
  border: none; border-radius: 10px; font-size: 17px; font-weight: 700; font-family: inherit;
  cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px;
  transition: background .15s ease, transform .05s ease, opacity .15s ease;
}
.hgx-submit:hover { background: #6FAA34; }
.hgx-submit:active { transform: translateY(1px); }
.hgx-submit[disabled] { background: #5e8e3a; opacity: .85; cursor: progress; }
.hgx-submit svg { width: 20px; height: 20px; }
.hgx-spinner {
  width: 18px; height: 18px; border: 2px solid rgba(255,255,255,.4);
  border-top-color: #fff; border-radius: 50%; animation: hgx-spin .8s linear infinite;
}
@keyframes hgx-spin { to { transform: rotate(360deg); } }

.hgx-error {
  margin-top: 8px; padding: 12px 16px; background: rgba(226,85,85,.15);
  border: 1px solid #e25555; border-radius: 10px; font-size: 14px; color: #ffe2e2;
}
.hgx-success { text-align: center; padding: 28px 8px 12px; }
.hgx-success-icon {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  background: #7BBD3D; color: #fff; font-size: 36px; font-weight: 700;
  display: flex; align-items: center; justify-content: center;
}
.hgx-success h3 { margin: 0 0 8px; font-size: 22px; font-weight: 700; color: #fff; }
.hgx-success p  { margin: 0; font-size: 15px; opacity: .85; color: #fff; }

.hgx-success-files {
  list-style: none; padding: 0; margin: 18px auto 0; max-width: 360px;
  display: flex; flex-direction: column; gap: 6px; text-align: left;
}
.hgx-success-files[hidden] { display: none; }
.hgx-success-files li {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.15); border-radius: 10px;
  font-size: 13px; color: #fff;
}
.hgx-success-files .hgx-sf-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 500; }
.hgx-success-files .hgx-sf-size { font-size: 12px; opacity: .7; flex: none; }
.hgx-success-files .hgx-sf-tick { color: #b7e16a; flex: none; }

.hgx-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

@media (max-width: 480px) {
  .hgx-card { padding: 28px 22px; border-radius: 18px; }
  .hgx-row-two { grid-template-columns: 1fr; }
}