— no accordion behaviour */
.c-footer--simple .c-footer__block{border:none;padding:0;}
.c-footer--simple .c-footer__lbl{display:block;margin-bottom:1em;}
.c-footer--simple .c-footer__items--contact{margin-top:0;}
.c-footer--simple .c-footer__addr{margin:0;}
@media (max-width:991px){
/* stack, and drop the empty gutter so it does not leave a gap behind */
.c-footer--simple .c-footer__grid--simple{grid-template-columns:1fr;}
.c-footer--simple .c-grid__col[aria-hidden]{display:none;}
}
/* ==========================================================================
EMPTY / SWITCHED-OFF SECTIONS
A global roster has ONE content set, so a show/hide on it would apply to
every page. Per-page visibility therefore has to be decided by what the page
actually rendered, or by a per-page module — never by the roster itself.
Two rules, both scoped to sections that opted in with data-hide-if-empty:
1. nothing matched this page -> no [data-roster-item] -> hide the section
2. the per-page header says off -> [data-section-off] -> hide the section
Automotive with no case stories needs NO toggle: pick no cases and rule 1
removes the heading, the slider and the padding together.
========================================================================== */
[data-hide-if-empty]:not(:has([data-roster-item])){display:none;}
[data-hide-if-empty]:has([data-section-off]){display:none;}
/* ---- 00-partnerships.css ------------------------------------------- */
/* ── Partnerships ────────────────────────────────────────────────────────
Two new pieces, the rest derived:
.s-hero--plain dark, text-only hero — no reference existed, so this is
mirrored from the source and becomes the reference
.c-ptnr partner card: logo, external link, name, description
Reused as-is: .c-stat (with its count-up), .c-download for the report grid,
.c-tabstrip (given a light variant here), .c-grid--header for the headers. */
/* hero: no media column, so the grid is two text columns on a dark ground */
.s-hero--plain{min-height:0;background:var(--panel-dark);background-image:none;
padding:9em 0 12em;}
.s-hero--plain .s-hero__content{background:none;padding:0;justify-content:flex-start;}
.s-hero--plain h1{color:var(--white);}
.s-hero--plain .s-hero__lead{color:rgba(255,255,255,.75);max-width:32em;}
.s-hero--plain .c-eyebrow{background:rgba(255,255,255,.15);color:var(--white);}
.s-hero__aside{display:flex;flex-direction:column;justify-content:center;}
/* stat band: a white card straddling the hero's bottom edge — same trick as
.s-solutions__cta, pulled up over the boundary */
.c-statcard{position:relative;z-index:3;margin-top:-6em;padding:3em 2em;
background:var(--white);box-shadow:var(--shadow-md);}
.c-statcard .c-stat{padding-inline:2em;border-left:1px solid var(--color-border);}
.c-statcard .c-stat:first-child{border-left:0;}
.c-statcard .c-stat p{color:var(--color-text-muted);font-size:var(--fs-small);}
/* tabstrip, light ground: outlined pills, ink when active */
.c-tabstrip--light{display:flex;padding:0;background:none;gap:.75em;}
.c-tabstrip--light .c-tabstrip__btn{background:none;color:var(--color-text);
border:1px solid var(--color-border);font-size:var(--fs-mini);
letter-spacing:.04em;text-transform:uppercase;}
.c-tabstrip--light .c-tabstrip__btn:hover{border-color:var(--color-heading);color:var(--color-heading);}
.c-tabstrip--light .c-tabstrip__btn[aria-selected="true"]{background:var(--color-heading);
border-color:var(--color-heading);color:var(--white);}
/* partner card */
.s-ptnr__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2em;
margin-top:3em;padding-top:3em;border-top:1px solid var(--color-border);}
.s-ptnr__grid[hidden]{display:none;}
.c-ptnr{display:flex;flex-direction:column;gap:1em;padding:1.5em;
border:1px solid var(--color-border);border-radius:1em;background:var(--white);}
.c-ptnr__top{display:flex;align-items:flex-start;justify-content:space-between;gap:1em;}
.c-ptnr__logo{width:3em;height:3em;object-fit:contain;border-radius:.5em;}
.c-ptnr__link{display:inline-flex;align-items:center;gap:.25em;
font-size:var(--fs-mini);color:var(--color-text-muted);}
.c-ptnr__link:hover{color:var(--color-brand);}
.c-ptnr h3{font-size:var(--fs-lead);}
.c-ptnr p{font-size:var(--fs-small);color:var(--color-text-muted);}
/* report grid reuses .c-download */
.s-works__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:2em;margin-top:2em;}
.s-works__label{font-size:var(--fs-mini);letter-spacing:.08em;text-transform:uppercase;
color:var(--color-text-muted);padding-bottom:1em;border-bottom:1px solid var(--color-border);}
@media (max-width:991px){
.s-ptnr__grid{grid-template-columns:repeat(2,1fr);}
.s-works__grid{grid-template-columns:repeat(2,1fr);}
.c-statcard{margin-top:-3em;}
}
@media (max-width:767px){
.s-hero--plain{padding:5em 0 8em;}
.s-ptnr__grid,.s-works__grid{grid-template-columns:1fr;}
.c-statcard .c-stat{border-left:0;padding-inline:0;}
}
/* ---- 00-rings.css -------------------------------------------------- */
/* ==========================================================================
HEXAGON RING CLUSTER — one element, six baked background layers
Was six ![]()
per cluster (702 B, 6 nodes). The images were never the cost —
six unique URLs are six requests however many tags point at them — but the
markup was: 21 KB and 180 DOM nodes once 30 expert cards exist.
Opacity is baked into each asset because CSS background layers cannot carry
individual alpha. Layers are listed smallest-first: the first background
paints on TOP, matching the old z-index order (ring 1 = z-7 = smallest).
Inlined as data URIs so one shared stylesheet resolves identically offline
and on hubfs, and so the six requests disappear entirely.
Quotes are percent-encoded: an unencoded " would end the url("…") string.
The comma after data:image/svg+xml is part of the URI and is literal inside
the quotes — only commas OUTSIDE url() separate layers.
========================================================================== */
/* One knob for the whole component. Each layer still carries its own
falloff inside the SVG; this regulates the cluster as a unit so every
placement reads the same weight. Default is a 50% dark line. */
.c-rings{opacity:var(--rings-opacity,.5);
background-repeat:no-repeat;background-position:center center;
background-size:20%, 35%, 50%, 65%, 80%, 80%;
background-image:url("data:image/svg+xml,"),
url("data:image/svg+xml,"),
url("data:image/svg+xml,"),
url("data:image/svg+xml,"),
url("data:image/svg+xml,"),
url("data:image/png;base64,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");}
/* ---- 00-team.css --------------------------------------------------- */
/* ── Team ────────────────────────────────────────────────────────────────
Measured off the source:
.s-photomrq 13-column photo marquee, two tracks (546px band)
.s-expdir experts directory — 11 industry tabs, 8 cards per panel
.s-exco executive committee, 4 ring-backed cards (726px)
Tabs reuse .c-tabstrip and eventTabs(). */
.s-photomrq{overflow:hidden;}
.s-photomrq__track{display:flex;gap:1em;width:max-content;
animation:photomrq 60s linear infinite;}
.s-photomrq__track img{width:12em;height:16em;object-fit:cover;border-radius:.5em;}
@keyframes photomrq{from{transform:translateX(0);}to{transform:translateX(-50%);}}
@media (prefers-reduced-motion:reduce){.s-photomrq__track{animation:none;}}
.s-expdir__wrap{margin-top:2.5em;}
.s-expdir__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2em;padding-top:3em;}
.s-expdir__grid[hidden]{display:none;}
.s-expdir__card{display:flex;flex-direction:column;}
.s-expdir__card img{width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:1em;}
.s-expdir__card h3{margin-top:1em;font-size:var(--fs-lead);}
.s-expdir__card p{color:var(--color-text-muted);font-size:var(--fs-small);}
.s-exco__grid{display:grid;grid-template-columns:repeat(4,1fr);gap:2em;margin-top:3em;}
.s-exco__card{position:relative;overflow:hidden;padding:2em;border-radius:1em;
background:var(--panel-tint);}
.s-exco__card .c-rings-frame{position:absolute;inset:auto -4em -4em auto;z-index:0;}
.s-exco__card img{position:relative;z-index:2;width:6em;height:6em;border-radius:50%;object-fit:cover;}
.s-exco__card h3{position:relative;z-index:2;margin-top:1em;font-size:var(--fs-lead);}
.s-exco__card p{position:relative;z-index:2;color:var(--color-text-muted);font-size:var(--fs-small);}
@media (max-width:991px){
.s-expdir__grid,.s-exco__grid{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:640px){
.s-expdir__grid,.s-exco__grid{grid-template-columns:1fr;}
.s-photomrq__track img{width:8em;height:11em;}
}
/* ---- app-form.css -------------------------------------------------- */
/* ==========================================================================
MRC APPLICATION — form block
========================================================================== */
/* No block padding at all — the card sits flush under the hero so the black
band reads as one continuous field, and the embed runs straight into the
next section. */
.s-appform{padding-block:0;overflow:hidden;}
/* The "split" half of the section. --ground, not --stone-900: the source's
gray-900 leaves a visible seam against the hero's pure-black scrim, which
defeats the point of the band. */
.s-appform__band{position:absolute;inset:0 0 auto;height:16em;
background:var(--ground);z-index:0;}
/* Card. Square corners per the system; the shadow is what lifts it off the
band. No padding, no width cap: the HubSpot embed brings its own internal
spacing and measure, so anything here would double up on it. */
.s-appform__card{position:relative;z-index:1;
background:var(--white);border:1px solid var(--color-border);
box-shadow:var(--shadow-lg);}
@media (max-width:991px){
.s-appform__band{height:10em;}
}
/* ---- app-hero.css -------------------------------------------------- */
/* ==========================================================================
MRC APPLICATION — hero
Everything structural (photo bed, scrim, container padding, h1 shadow) is
inherited from .s-mrchero in styles.css. Only the deltas live here.
========================================================================== */
/* Not a cover: no viewport fold, no minimum height at all. The hero is sized
by its own content plus the top padding that clears the fixed nav.
hero-home.css sets `.c-section.s-mrchero{padding:0;min-height:100vh}` at
0-2-0 AND loads after this file, so matching its specificity loses on source
order. Chaining the modifier onto the base takes it to 0-3-0. */
.c-section.s-mrchero.s-mrchero--app{min-height:0;padding-top:15em;}
/* Plain system h1 (--fs-display). hero-home.css/zz push .s-mrchero h1 to 5em
for the cover; at 0-2-1 this outranks that regardless of file order. */
.c-section.s-mrchero--app h1{font-size:var(--fs-display);}
/* head runs side-by-side (source: m-sec-head.is-sbs) — title left, deadline
right, both sitting on the same baseline */
.s-mrchero__head{width:100%;align-items:end;}
/* ---- Breadcrumb --------------------------------------------------------- */
.s-apphero__crumb{display:flex;align-items:center;gap:1em;flex-wrap:wrap;}
/* .c-eyebrow carries a 1rem bottom margin for its usual stacked position; in a
row that margin drops it off the arrow's centreline */
.s-apphero__crumb .c-eyebrow{margin-bottom:0;}
/* arrow + current label travel as one wrap unit — see the note in the markup */
.s-apphero__crumb-tail{display:inline-flex;align-items:center;gap:1em;}
.s-apphero__crumb-arrow{width:1.25em;height:1.25em;flex:none;opacity:.7;}
/* same meta treatment as the eyebrow it follows, minus the pill */
.s-apphero__crumb-current{font-size:var(--fs-small);font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:rgba(255,255,255,.8);transition:color var(--transition);}
.s-apphero__crumb-current:hover{color:var(--white);}
/* ---- Deadline ----------------------------------------------------------- */
.s-apphero__aside{display:flex;justify-content:flex-end;align-items:flex-end;}
/* no leading CTA here, so the asymmetric padding that made room for one on the
Home hero is evened out */
.c-datebar--solo{padding:.75em 2em;}
@media (max-width:991px){
.c-section.s-mrchero.s-mrchero--app{min-height:0;padding-top:10em;}
/* zz-visual-match gives the Home hero a 10rem container top padding at this
width; here the section already carries the offset, so don't add it twice */
.c-section.s-mrchero.s-mrchero--app > .c-container{padding-top:0;}
/* .c-grid collapses to one column at this width — the pill returns to the
left edge under the title */
.s-apphero__aside{justify-content:flex-start;}
/* the stacked .c-datebar rule turns the pill into a rounded block; with a
single date there is nothing to stack, so keep it a pill */
.c-datebar--solo{flex-direction:row;align-items:center;
border-radius:var(--radius-pill);padding:.75em 2em;}
}
/* ---- event-about.css ----------------------------------------------- */
/* ==========================================================================
MRC Career Day — Section B: "About the event"
Photo bed + two columns. Layout is .c-section / .c-container--ruled /
.c-grid; the bullets are .c-checks. New here: the scrim, the agenda table
and the white form card.
========================================================================== */
.s-eventabout{padding-top:0;}
/* the photo is a face-on group shot — anchor it to the bottom so heads are not
cropped when the section grows taller than the frame */
.s-eventabout .c-section__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 100%;}
/* Three stacked layers, same idea as the source: black in from the left so the
copy column always has a dark ground, black in from top and bottom so the
section joins the beds above and below, then a flat wash over the lot.
The wash is heavier than the source's .15 — our copy column runs further
right, over the brightest part of the stage. */
.s-eventabout__scrim{position:absolute;inset:0;
background-image:
linear-gradient(90deg,#000,rgba(0,0,0,.35) 60%,rgba(0,0,0,.35) 85%,#000 99%),
linear-gradient(#000,rgba(0,0,0,.13) 68%,#000 97%),
linear-gradient(rgba(0,0,0,.35),rgba(0,0,0,.35));}
/* --ruled draws its hairline in stone-200 for white beds; on the photo that
reads as a bright line. Same rule, dark-bed tone, and a shorter run-in. */
.s-eventabout .c-container--ruled{padding-top:5em;}
.s-eventabout .c-container--ruled::before{background:rgba(255,255,255,.15);}
.s-eventabout__cols{column-gap:5em;}
/* the two content groups own their own rhythm, so heading/paragraph margins
are zeroed and `gap` does the spacing — one ladder instead of two */
.s-eventabout__head{display:flex;flex-direction:column;gap:3.5em;}
.s-eventabout__block{display:flex;flex-direction:column;gap:1.5em;}
.s-eventabout__block > *{margin-bottom:0;}
/* ---- Bullets: .c-checks, stripped of its panel ------------------------- *
The source's list is naked ticks on the photo, not the boxed panel the
component ships with, and the icon is a supplied white check rather than the
filled blue marker. */
.s-eventabout__list{gap:.75em;}
.s-eventabout__list .c-checks__item{background:transparent;border:0;padding:0;gap:1.5em;}
.s-eventabout__list .c-checks__ico{background:none;padding:0;border-radius:0;
width:1.5em;height:1.5em;margin-top:.125em;}
/* the component pins its body copy to stone-600 for light beds — on the photo
that is unreadable, so hand it back to the dark bed's text token */
.s-eventabout__list .c-checks__item p{color:var(--color-text);}
/* ---- Agenda ------------------------------------------------------------ */
.s-eventabout__agenda{display:flex;flex-direction:column;gap:.75em;padding:2em 1.5em;
background:rgba(255,255,255,.10);
-webkit-backdrop-filter:blur(1em);backdrop-filter:blur(1em);}
.s-eventabout__slot{display:flex;align-items:center;gap:1.5em;}
/* fixed-width chip so every time reads on one baseline and the descriptions
all start at the same x — a shrink-to-fit chip ragged the column */
.s-eventabout__slot dt{flex:none;width:11.5em;padding:.375em 1em;text-align:center;
font-size:var(--fs-small);line-height:1.5;color:var(--white);
background:rgba(255,255,255,.25);border:1px solid rgba(255,255,255,.35);
border-radius:var(--radius-pill);
-webkit-backdrop-filter:blur(1em);backdrop-filter:blur(1em);}
.s-eventabout__slot dd{flex:1;min-width:0;margin:0;
font-size:var(--fs-body);line-height:1.5;color:var(--white);}
/* ---- Registration column ----------------------------------------------- */
.s-eventabout__register{display:flex;flex-direction:column;gap:2.5em;}
.s-eventabout__register h3{margin-bottom:0;}
/* white card lifted off the photo, as the source's form wrapper.
Re-points the text tokens rather than overriding each element: the section
is .c-section--dark, so anything inheriting would arrive white-on-white. */
.s-eventabout__form{--color-heading:var(--black);--color-text:var(--stone-600);
background:var(--white);box-shadow:var(--shadow-lg);}
@media (max-width:991px){
.s-eventabout__cols{column-gap:2em;}
.s-eventabout__head{gap:2.5em;}
.s-eventabout .c-container--ruled{padding-top:3.5em;}
}
@media (max-width:767px){
/* the chip plus a long description will not sit side by side in a 1fr
column — stack them and let the chip shrink to its text */
.s-eventabout__slot{flex-direction:column;align-items:flex-start;gap:.5em;}
.s-eventabout__slot dt{width:auto;}
/* stacked, the row gap has to beat the .5em INSIDE a pair or the six slots
read as one twelve-line block */
.s-eventabout__agenda{padding:1.5em 1.25em;gap:1.5em;}
}
@media (max-width:640px){
.s-eventabout__list .c-checks__item{gap:1em;}
}
/* ---- event-decade.css ---------------------------------------------- */
/* ==========================================================================
MRC Career Day — Section C: "A decade of shaping Vietnam's top research
talent". A .l-slider rail of .c-card--row cards on the black bed. The cards
and the slider mechanics are the system's; only the rail width and the dark
arrows are new.
========================================================================== */
.s-eventdecade__title{margin-bottom:2rem;}
/* Short cards, so more than one slide belongs on screen. .l-slider__slide
ships at 100% for full-width cases — narrow it and the native scroll-snap
pages a rail instead of a carousel. Steps match the source's rail widths. */
.s-eventdecade .l-slider__slide{flex:0 0 40%;}
.s-eventdecade .l-slider__track{padding-block:.25em;}
/* the track stretches every slide to the tallest; the card has to fill it or
the row cards end up at different heights */
.s-eventdecade .c-card--row{width:100%;height:100%;padding:1em 2em 1em 1em;}
.s-eventdecade .c-card__media{width:10.5em;align-self:stretch;aspect-ratio:auto;min-height:6.5em;}
/* the component sizes the image with height:100%, which goes indefinite once
the frame takes its height from aspect-ratio instead of from a stretched
flex line — the thumbnail then only covered the top of a pale box. Pinning
it to the frame works whichever way the frame got its height. */
.s-eventdecade .c-card__media img{position:absolute;inset:0;}
.s-eventdecade .c-card__body{gap:.5em;}
/* arrows sit over a black bed: white fill would flare, so they take the same
frosted treatment as the rest of the page and turn solid on hover */
.s-eventdecade .l-slider__btn{background:rgba(255,255,255,.35);border-color:rgba(255,255,255,.35);
color:var(--white);-webkit-backdrop-filter:blur(.5em);backdrop-filter:blur(.5em);}
.s-eventdecade .l-slider__btn:hover{background:var(--white);border-color:var(--white);color:var(--black);}
/* the nav wrapper only earns its 2em on tablet, where the buttons drop back
into flow; on desktop they float over the rail and it would just be a gap */
.s-eventdecade .l-slider__nav{margin-top:0;}
@media (max-width:991px){
.s-eventdecade .l-slider__slide{flex:0 0 50%;}
.s-eventdecade .l-slider__nav{margin-top:2em;}
}
@media (max-width:767px){
.s-eventdecade .l-slider__slide{flex:0 0 75%;}
/* at this width the thumbnail leaves the title about 8em — stack instead */
.s-eventdecade .c-card--row{flex-direction:column;align-items:stretch;gap:1em;padding:1em;}
.s-eventdecade .c-card__media{width:100%;aspect-ratio:16/9;min-height:0;}
}
@media (max-width:640px){
.s-eventdecade .l-slider__slide{flex:0 0 100%;}
}
/* ---- event-hero.css ------------------------------------------------ */
/* ==========================================================================
MRC Career Day — Section A: nav variant + "Online Career Day" hero
Everything structural comes from .c-mrcnav / .s-mrchero / .c-datebar.
Only the genuinely new pieces live here.
========================================================================== */
/* ---- Nav: event variant ------------------------------------------------- *
The Career Day bar carries a right-hand action, so its container becomes a
two-zone row. Scoped to --event because .c-mrcnav is shared with MRC home,
where the bar is brand-only and must stay left-aligned. */
.c-mrcnav--event > .c-container{display:flex;align-items:center;justify-content:space-between;gap:2em;}
.c-mrcnav--event .c-btn{flex:none;}
/* ---- Hero breadcrumb ---------------------------------------------------- *
Replaces the home hero's single eyebrow pill: the same pill, an arrow, then
the current page. The trailing crumb borrows the eyebrow's type so the row
reads as one unit rather than a pill with a sentence stuck to it. */
.s-eventhero__crumb{display:flex;align-items:center;gap:.5em;flex-wrap:wrap;}
/* the eyebrow carries a 1rem bottom margin for stacked use — the row owns
spacing here, so zero it */
.s-eventhero__crumb .c-eyebrow{margin-bottom:0;}
.s-eventhero__crumb-arw{width:1.25em;height:1.25em;flex:none;}
.s-eventhero__crumb-here{font-size:var(--fs-small);font-weight:600;letter-spacing:.08em;
text-transform:uppercase;color:var(--white);}
/* ---- Hero action row ---------------------------------------------------- *
Unlike the home hero, the dates are NOT inside the frosted pill: the pill
holds the CTA and the event facts sit alongside it on the scrim. */
.s-eventhero__cta{display:flex;align-items:center;gap:2.5em;flex-wrap:wrap;}
/* --event: the pill wraps a single control, so the right padding drops back
to match the left instead of the home bar's long 2.5em run-out. */
.c-datebar--event{gap:0;padding-right:.75em;flex:none;}
/* ---- Event fact list ---------------------------------------------------- *
Icon + one line of component text. Shared: Section B re-uses it beside the
registration form so the event facts read identically in both places. */
.c-eventmeta{display:flex;flex-direction:column;gap:1em;}
.c-eventmeta li{display:flex;align-items:center;gap:1em;
font-size:var(--fs-body);line-height:1.5;color:var(--white);}
.c-eventmeta__ico{width:1.5em;height:1.5em;flex:none;}
/* The hero container is a flex item of .s-mrchero (column flex) carrying
margin-inline:auto. Auto margins beat align-items:stretch, so it was
shrink-wrapping its content and centring itself — the whole title + event
block sat mid-screen instead of on the gutter. width:100% restores the
stretch, which is what left-aligns it. Applies at every width; the mobile
block below only adds padding.
0-3-0 on purpose: zz-visual-match sets `.s-mrchero > .c-container` at 0-2-0
and loads after this file, so an equal-weight rule would lose. */
.c-section.s-eventhero > .c-container{width:100%;}
@media (max-width:991px){
.c-section.s-eventhero > .c-container{padding:25rem var(--gutter) 5rem;}
.s-eventhero__cta{flex-direction:column;align-items:flex-start;gap:1.5em;}
/* the shared 991 rule turns .c-datebar into a full-width rounded block;
with one button inside it that leaves a wide empty pill, so keep it
hugging its content */
.c-datebar--event{flex-direction:row;width:auto;border-radius:var(--radius-pill);padding:.75em;}
}
@media (max-width:640px){
.c-eventmeta li{align-items:flex-start;gap:.75em;}
}
/* ---- hero-home.css ------------------------------------------------- */
/* ---- MRC home hero ------------------------------------------------------ */
/* full viewport fold, everything sits on the bottom edge */
.c-section.s-mrchero{padding:0;position:relative;overflow:hidden;
min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;}
.s-mrchero__bg{position:absolute;inset:0;z-index:0;overflow:hidden;}
.s-mrchero__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 50%;}
/* transparent → solid black by 85%, over a flat 20% wash, exactly as the source */
.s-mrchero__scrim{position:absolute;inset:0;
background-image:linear-gradient(rgba(0,0,0,0),#000 85%),linear-gradient(rgba(0,0,0,.2),rgba(0,0,0,.2));}
/* keeps the standard horizontal gutters; only the bottom padding is set */
.s-mrchero > .c-container{position:relative;z-index:1;padding-block:0 5rem;}
.s-mrchero__top{display:flex;flex-direction:column;align-items:flex-start;gap:1.5em;}
/* type comes from the system: h1/h2 and the raw
. The only hero-specific bits are the drop-shadow (it sits on a photo) and the zeroed margins. */ .s-mrchero h1{margin:0;filter:drop-shadow(0 .25em 2em rgba(0,0,0,.25));} .s-mrchero__bottom{margin-top:3.5em;} .s-mrchero__bottom h2{margin:0;} .s-mrchero__bottom p{margin:0;} @media (max-width:991px){ .s-mrchero__bottom{margin-top:3.5em;} .c-datebar{flex-direction:column;align-items:flex-start;gap:1.25em; border-radius:1.5em;padding:1.25em;} } @media (max-width:640px){ .c-datebar__dates{flex-direction:column;align-items:flex-start;gap:.75em;} .c-datebar__rule{width:100%;height:1px;} } /* ========================================================================== REVEAL — progressive enhancement (content ships visible) ========================================================================== */ .js-reveal-armed{opacity:0;transform:translateY(1em);} .js-reveal-armed.is-revealed{opacity:1;transform:translateY(0); transition:opacity .6s cubic-bezier(.25,.46,.45,.94),transform .6s cubic-bezier(.25,.46,.45,.94);} @media (prefers-reduced-motion:reduce){ .js-reveal-armed{opacity:1;transform:none;} .c-ticker__item{transition:none;} } /* ---- home-batches.css ---------------------------------------------- */ /* ========================================================================== MRC home — "A decade of shaping Vietnam's top research talent" A rail of the announcement post for every MRC batch. Everything structural comes from .l-slider + .c-card--dark; the rules below only do the two things the system cannot know: how many cards fit per view, and where the arrows go. ========================================================================== */ /* Heading left, arrows right on one baseline. The nav is a child of .l-slider (ui.js scopes its [data-slide] lookup to the slider root), so it is lifted out of its default below-the-track position rather than moved in the DOM. */ .s-batches__head{display:flex;align-items:flex-end;justify-content:space-between; gap:2em;margin-bottom:3.5em;} .s-batches__head h3{margin:0;max-width:20em;} .s-batches__head .l-slider__nav{margin-top:0;flex:none;} /* the arrow pills are white-on-white by default — on this black bed they read as outlines instead, matching the source's ghost arrows */ .s-batches .l-slider__btn{background:transparent;border-color:rgba(255,255,255,.35); color:var(--white);} .s-batches .l-slider__btn:hover{background:var(--white);border-color:var(--white); color:var(--black);} /* slide width + card geometry now live in zz-visual-match.css, which mirrors the live page's compact 31em x 8.5em row card. */ /* card interior: the read link is pinned to the bottom so every card's CTA shares a baseline however long the title wraps */ .s-batches .c-card__body{gap:.75em;} .s-batches .c-card__title{margin:0;} .s-batches .c-card__tag{color:var(--blue-300);} .s-batches .c-link{margin-top:auto;padding-top:.5em;} /* the whole card is the link — lift the image rather than shadowing a dark card against a black bed, where a shadow is invisible */ .s-batches .c-card img{transition:transform var(--transition);} .s-batches a.c-card:hover img{transform:scale(1.04);} @media (max-width:991px){ .s-batches__head{flex-direction:column;align-items:flex-start;gap:1.5em; margin-bottom:2.5em;} .s-batches__head h3{max-width:none;} .s-batches .l-slider__slide{flex:0 0 calc((100% - 2em) / 2);} } @media (max-width:767px){ /* one card per view, with the next one just peeking so the rail reads as swipeable without an on-screen affordance */ .s-batches .l-slider__slide{flex:0 0 85%;} } @media (max-width:640px){ .s-batches .l-slider__slide{flex:0 0 100%;} } /* ---- home-infopack.css --------------------------------------------- */ /* ========================================================================== s-infopack — MRC home §4 "Info Pack & Events" Two 6-col columns on a tinted bed: the info-pack download panel (left) and the Career Day event card (right). Only genuinely new rules live here — layout, type and buttons all come from the system. Reused: c-section--tint · c-container · c-grid/u-col-6 · c-card · c-rings-frame · l-slider · c-btn--onDark · js-reveal ========================================================================== */ /* both columns are vertical stacks: head, then the stateful block, and the stateful block grows to the column height so the two cards align */ .s-infopack__col{display:flex;flex-direction:column;} .s-infopack__head{margin-bottom:2.5em;} .s-infopack__head h2{margin-bottom:1.5rem;} .s-infopack__head p:last-child{margin-bottom:0;} /* ---- LEFT: the info-pack panel (STATE=OPEN) ---------------------------- */ /* pale blue bed so the deck and the form read as one unit against the tint */ .s-infopack__panel{position:relative;display:flex;flex-direction:column;gap:2em; flex:1;padding:2em;background:var(--blue-100);border:1px solid var(--blue-200);} /* the rings frame is absolutely positioned inside the panel — everything else needs a stacking context or the hexagons paint over the deck and the form */ .s-infopack__panel > *:not(.c-rings-frame){position:relative;z-index:1;} .s-infopack__deck .l-slider__slide img{width:100%;height:auto; box-shadow:var(--shadow-md);} .s-infopack__deck .l-slider__nav{margin-top:0;} /* Placeholder standing in for the HubSpot embed in this offline rebuild. The dashed rule is deliberate: it must not read as finished UI. */ .s-infopack__form{background:var(--white);border:1px dashed var(--blue-300); padding:2.5em 2em;text-align:center;} .s-infopack__slot{font-size:var(--fs-small);color:var(--stone-500);margin:0;} /* ---- RIGHT: the Career Day event card ---------------------------------- */ /* Photo card. Colours are re-pointed at the token level, the way .c-section--dark does it, so the raw h3/p inside come out light without a per-element class — and a future child element inherits correctly too. */ .s-infopack__event{ --color-heading:var(--white); --color-text:rgba(255,255,255,.8); position:relative;flex:1;justify-content:flex-end;min-height:30em; background:var(--stone-900); } .s-infopack__event-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;} /* near-transparent at the top so the photo still reads, solid at the bottom where the copy sits */ .s-infopack__event-scrim{position:absolute;inset:0; background-image:linear-gradient(rgba(0,0,0,.15) 20%,rgba(0,0,0,.88));} .s-infopack__event-body{position:relative;z-index:1; display:flex;flex-direction:column;align-items:flex-start;gap:1.5em;padding:2.5em;} .s-infopack__event-body h3{margin:0;} /* ---- Event chips ------------------------------------------------------- */ /* meta rows, so --fs-small — these are captions, not reading copy */ .s-infopack__chips{display:flex;flex-direction:column;align-items:flex-start;gap:.75em;} .s-infopack__chip{display:inline-flex;align-items:center;gap:.625em; font-size:var(--fs-small);font-weight:500;line-height:1.5;color:var(--white); padding:.5em 1.25em;border-radius:var(--radius-pill); border:1px solid rgba(255,255,255,.24);background:rgba(255,255,255,.14); -webkit-backdrop-filter:blur(.5em);backdrop-filter:blur(.5em);} /* sup is left to the UA's own smaller size — no font-size declared here */ .s-infopack__chip-ico{width:1.125em;height:1.125em;flex:none;} /* ---- STATE=CLOSED message ---------------------------------------------- */ /* raw reading size (18) — it is a sentence to the visitor, not a chip */ .s-infopack__closed{max-width:26em;margin:0;} /* The card re-points --color-heading/--color-text to white, but a token only applies where a rule reads it — and this block is a plain div, so it was inheriting body's dark colour straight through. Read the token here. */ .s-infopack__event .s-infopack__closed, .s-infopack__event .s-infopack__closed p, .s-infopack__event .s-infopack__closed a{color:var(--white);} .s-infopack__event .s-infopack__closed a{text-decoration:underline;} /* ---- CTA + venue / online note ----------------------------------------- */ .s-infopack__cta{display:flex;flex-direction:column;align-items:flex-start;gap:1em;} .s-infopack__note{display:inline-flex;align-items:center;gap:.5em; font-size:var(--fs-small);color:var(--color-text);margin:0;} /* ---- Responsive --------------------------------------------------------- */ @media (max-width:991px){ /* c-grid already collapses to one column here; only the internals shrink */ .s-infopack__head{margin-bottom:2em;} .s-infopack__panel{padding:1.5em;gap:1.5em;} .s-infopack__event{min-height:26em;} .s-infopack__event-body{padding:2em;} } @media (max-width:767px){ .s-infopack__form{padding:2em 1.5em;} .s-infopack__event-body{padding:1.5em;gap:1.25em;} } @media (max-width:640px){ .s-infopack__panel{padding:1.25em;} /* the date chip wraps to two lines on a narrow screen — let it be a block so the pill hugs the text instead of overflowing the card */ .s-infopack__chip{align-items:flex-start;} .s-infopack__chip-ico{margin-top:.125em;} } /* ---- home-intro.css ------------------------------------------------ */ /* ========================================================================== MRC home — "A selective pathway for high-potential future consultants" Programme intro (left) + the application track cards (right), over the office photo the source uses as the section backdrop. ========================================================================== */ /* photo bed — same construction as the hero, but the crop is anchored to the TOP (the source's is-alg-top) so faces are not cut off as the section grows */ .s-intro{overflow:hidden;} .s-intro__bg{position:absolute;inset:0;z-index:0;overflow:hidden;} .s-intro__bg img{width:100%;height:100%;object-fit:cover;object-position:50% 0%;} /* heavy, near-flat wash: this bed carries a full column of reading copy, so it needs far more cover than the hero's bottom-weighted gradient */ .s-intro__scrim{position:absolute;inset:0; background-image:linear-gradient(90deg,#000 20%,rgba(0,0,0,.72) 100%), linear-gradient(rgba(0,0,0,.55),rgba(0,0,0,.55));} /* the one coloured phrase in the headline — the source's #FF6446 is already a brand token, so no new hex enters the system */ .s-intro__hl{color:var(--red-default);} /* ---- Track cards ------------------------------------------------------- */ .s-intro__stack{display:flex;flex-direction:column;gap:2em;} /* .c-card supplies the surface, overflow clip and hover transition; the track card only changes the axis (text beside portrait) and swaps the white fill for the dark bed's frosted panel, matching .c-nav__card. */ .s-intro__track{flex-direction:row;align-items:stretch;gap:2em; background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14); -webkit-backdrop-filter:blur(1em);backdrop-filter:blur(1em); transition:background var(--transition);} .s-intro__track .c-card__body{gap:1em;padding:2.5em;justify-content:center;} .s-intro__track h3{margin:0;} .s-intro__track p{margin:0;} /* .c-btn is inline-flex; inside the column body it would otherwise stretch to the full card width */ .s-intro__cta{align-self:flex-start;margin-top:.5em;} /* The card used to BE the anchor. It is a
now so each programme state can
point somewhere different, and the CTA stretches over the whole card to keep
the original click target. Only one CTA survives the sweep, so only one
overlay ever exists. */
.s-intro__track{position:relative;}
.s-intro__cta::after{content:"";position:absolute;inset:0;z-index:1;}
.s-intro__track:hover{background:rgba(255,255,255,.12);box-shadow:none;}
/* portrait column: a cut-out PNG, so it sits ON the panel floor rather than
filling a media box — contain + bottom anchor, never cover */
.s-intro__portrait{position:relative;flex:none;width:14em;align-self:flex-end;}
.s-intro__portrait img{width:100%;height:100%;max-height:18em;
object-fit:contain;object-position:50% 100%;}
@media (max-width:991px){
.s-intro__scrim{background-image:linear-gradient(rgba(0,0,0,.78),rgba(0,0,0,.78));}
.s-intro__portrait{width:11em;}
.s-intro__track .c-card__body{padding:2em;}
}
@media (max-width:640px){
/* stack: below this the portrait leaves the copy roughly two words a line */
.s-intro__track{flex-direction:column;gap:0;}
.s-intro__portrait{width:100%;align-self:center;}
.s-intro__portrait img{max-height:14em;}
}
/* ---- shared-faq.css ------------------------------------------------ */
/* ==========================================================================
c-faq — accordion built on native
/
No JS: the browser owns open/close, Enter/Space and the expanded state that
screen readers announce. Nothing here hides content that CSS alone cannot
bring back, so the section is complete with scripting off.
Used by s-mrcfaq (shared across all three MRC pages).
========================================================================== */
/* the source stacks title over list with a 3.5em gap */
.s-mrcfaq__title{margin-bottom:3.5rem;}
.c-faq{display:flex;flex-direction:column;gap:1em;}
.c-faq__item{
background:var(--color-surface);border:1px solid var(--color-border);
transition:background var(--transition),border-color var(--transition);
}
/* Open row is tinted but KEEPS its border — the source drops the border on the
active pane, which shifts every row below it by 2px on each toggle. */
.c-faq__item[open]{background:var(--color-page);border-color:var(--color-border-strong);}
/* ---- Question ---------------------------------------------------------- */
/* list-style + the WebKit pseudo-element both have to go, or the default
triangle sits beside our chevron. */
.c-faq__q{
display:flex;align-items:flex-start;justify-content:space-between;gap:1.5em;
padding:1.5em 2em;cursor:pointer;list-style:none;
}
.c-faq__q::-webkit-details-marker{display:none;}
.c-faq__q::marker{content:"";}
/* the whole row is the hit target, so the ring belongs on the row */
.c-faq__q:focus-visible{outline:2px solid var(--color-brand);outline-offset:-2px;}
/* h3 for the document outline, sized to --fs-cap-md as the source has it —
at --fs-cap-lg nine stacked questions read as nine section headings. */
.c-faq__q .c-faq__title{font-size:var(--fs-cap-md);line-height:1.35;font-weight:600;margin:0;}
.c-faq__item:hover .c-faq__q .c-faq__title{color:var(--color-brand);}
.c-faq__ico{
width:1.25em;height:1.25em;flex:none;margin-top:.25em;color:var(--color-text);
transition:transform var(--transition),color var(--transition);
}
.c-faq__item[open] .c-faq__ico{transform:rotate(180deg);color:var(--color-brand);}
/* ---- Answer ------------------------------------------------------------ */
/* padding-left matches the question so the answer aligns under it; the right
inset clears the chevron column. Body copy stays the raw
No JS: the browser owns open/close, Enter/Space and the expanded state that
screen readers announce. Nothing here hides content that CSS alone cannot
bring back, so the section is complete with scripting off.
Used by s-mrcfaq (shared across all three MRC pages).
========================================================================== */
/* the source stacks title over list with a 3.5em gap */
.s-mrcfaq__title{margin-bottom:3.5rem;}
.c-faq{display:flex;flex-direction:column;gap:1em;}
.c-faq__item{
background:var(--color-surface);border:1px solid var(--color-border);
transition:background var(--transition),border-color var(--transition);
}
/* Open row is tinted but KEEPS its border — the source drops the border on the
active pane, which shifts every row below it by 2px on each toggle. */
.c-faq__item[open]{background:var(--color-page);border-color:var(--color-border-strong);}
/* ---- Question ---------------------------------------------------------- */
/* list-style + the WebKit pseudo-element both have to go, or the default
triangle sits beside our chevron. */
.c-faq__q{
display:flex;align-items:flex-start;justify-content:space-between;gap:1.5em;
padding:1.5em 2em;cursor:pointer;list-style:none;
}
.c-faq__q::-webkit-details-marker{display:none;}
.c-faq__q::marker{content:"";}
/* the whole row is the hit target, so the ring belongs on the row */
.c-faq__q:focus-visible{outline:2px solid var(--color-brand);outline-offset:-2px;}
/* h3 for the document outline, sized to --fs-cap-md as the source has it —
at --fs-cap-lg nine stacked questions read as nine section headings. */
.c-faq__q .c-faq__title{font-size:var(--fs-cap-md);line-height:1.35;font-weight:600;margin:0;}
.c-faq__item:hover .c-faq__q .c-faq__title{color:var(--color-brand);}
.c-faq__ico{
width:1.25em;height:1.25em;flex:none;margin-top:.25em;color:var(--color-text);
transition:transform var(--transition),color var(--transition);
}
.c-faq__item[open] .c-faq__ico{transform:rotate(180deg);color:var(--color-brand);}
/* ---- Answer ------------------------------------------------------------ */
/* padding-left matches the question so the answer aligns under it; the right
inset clears the chevron column. Body copy stays the raw at 18px. */
.c-faq__a{display:flex;flex-direction:column;gap:1em;padding:0 4.75em 2em 2em;}
.c-faq__a p{margin:0;}
@media (max-width:767px){
.c-faq__q{padding:1.25em;gap:1em;}
.c-faq__a{padding:0 1.25em 1.25em;}
.s-mrcfaq__title{margin-bottom:2.5rem;}
}
/* ---- shared-footer.css --------------------------------------------- */
/* ==========================================================================
SHARED FOOTER — additions only. The whole component already exists in
styles.css (search FOOTER); everything below is the MRC delta.
========================================================================== */
/* The Industry footer runs four link columns (1.4/1/1/1.4). MRC has only two
blocks — the sign-up form and the contact details — so those tracks would
leave the form squeezed into a 1.4fr sliver. Two equal tracks across the
left two-thirds reproduces the source's mjx-col-2-3 / mjx-col-1-3 layout. */
.c-footer__grid--mrc{grid-template-columns:repeat(2,minmax(0,1fr));max-width:66.6%;}
@media (max-width:991px){.c-footer__grid--mrc{max-width:none;}}
@media (max-width:767px){.c-footer__grid--mrc{grid-template-columns:minmax(0,1fr);}}
/* .c-footer__col a and .c-footer__addr both set .875em, so a link inside the
address compounds to ~12px and the phone/email read smaller than the street
lines above them. Inherit instead so the block is one consistent size. */
.c-footer__addr a{font-size:inherit;}
/*
is used for the contact block (it is a real postal address);
browsers italicise it by default, which the source did not. */
.c-footer__addr{font-style:normal;}
/* ---- shared-testimonials.css --------------------------------------- */
/* ==========================================================================
s-mrcquote — MRC testimonial slider (shared by all three MRC pages)
Reuses: .l-slider (+ track/slide/btn/nav) · .c-person__photo/__band/__ptrn/
__pos/__frame/__img · .c-rings-frame + .c-rings · .c-quote__name /
.c-quote__role.
New here: the two-column card shell, the pale-blue quote bed and the two
portrait sizes the MRC layout needs (the people grid's portrait is half
this height, so those two values are overridden rather than re-declared).
========================================================================== */
/* the pattern band on this card is nearly double the people-card band, so the
portrait it sits behind grows with it — both values come from the source */
.s-mrcquote{--mrcquote-band:17.5em;--mrcquote-portrait:25em;}
/* min-height comes from the source (37em): without it a short quote collapses
the card below the 25em portrait + 17.5em band and the hexagons crop badly.
height:100% lets the track stretch every card to the tallest quote. */
.s-mrcquote__card{
display:flex;width:100%;height:100%;min-height:37em;
border:1px solid var(--color-border);background:var(--color-surface);
}
/* ---- Portrait column -------------------------------------------------- */
/* .c-person__photo already gives position:relative + bottom-aligned + clipped;
only the width and the two heights are MRC-specific. */
.s-mrcquote__portrait{flex:none;width:35%;background:var(--color-surface);}
.s-mrcquote__portrait .c-person__band{height:var(--mrcquote-band);}
.s-mrcquote__portrait .c-person__pos{height:var(--mrcquote-portrait);}
.s-mrcquote__portrait .c-person__frame{width:90%;}
/* Pink band — the fourth author's colour. The people component ships blue /
red / orange / green only, so the missing variant is added here rather than
substituting a colour the source does not use. */
.c-person__band--pink{background:var(--pink-light);}
/* ---- Quote column ------------------------------------------------------ */
.s-mrcquote__body{position:relative;
flex:1;min-width:0;display:flex;flex-direction:column;justify-content:center;
align-items:flex-start;gap:2em;padding:5em 3.5em;background:var(--blue-100);
}
/* filled disc holding the quote glyph, as the source */
.s-mrcquote__mark{
flex:none;display:flex;align-items:center;justify-content:center;
width:3.5em;height:3.5em;padding:.25em;
background:var(--blue-200);border-radius:50%;
}
.s-mrcquote__mark img{width:100%;height:100%;object-fit:contain;}
/* blockquote resets its own margin; the size is a token, not the source's 1.75em */
.s-mrcquote__text{margin:0;}
.s-mrcquote__text p{font-size:var(--fs-cap-lg);line-height:1.5;color:var(--blue-900);margin:0;}
.s-mrcquote__auth{display:flex;flex-direction:column;gap:.5em;width:100%;}
/* ---- Arrows ------------------------------------------------------------ */
/* Desktop: straddle the card's left/right edges. The nav itself is click-through
so it cannot swallow taps on the card underneath it. */
@media (min-width:992px){
.s-mrcquote .l-slider{position:relative;}
.s-mrcquote__nav{
position:absolute;inset:0 -1.5em;z-index:2;margin:0;
display:flex;align-items:center;justify-content:space-between;
pointer-events:none;
}
.s-mrcquote__nav .l-slider__btn{pointer-events:auto;}
}
/* ---- Responsive -------------------------------------------------------- */
@media (max-width:991px){
/* side by side, the 35% portrait leaves the quote an unreadable column */
.s-mrcquote__card{flex-direction:column;min-height:0;}
.s-mrcquote__portrait{width:100%;}
.s-mrcquote__body{padding:3em 2.5em;gap:1.5em;}
.s-mrcquote{--mrcquote-band:12em;--mrcquote-portrait:20em;}
}
@media (max-width:767px){
.s-mrcquote__body{padding:2em 1.5em;}
.s-mrcquote{--mrcquote-band:10em;--mrcquote-portrait:17em;}
}
@media (max-width:640px){
.s-mrcquote__mark{width:2.5em;height:2.5em;}
}
/* ---- zz-visual-match.css ------------------------------------------- */
/* ==========================================================================
VISUAL MATCH TO THE LIVE MRC PAGES
--------------------------------------------------------------------------
Loads last, so everything here is a deliberate, reviewable override of an
Industry-system default. Delete this file and the pages fall back to plain
system defaults — nothing else depends on it.
HOW THE NUMBERS WERE DERIVED
The live pages run on a 16.8px base (1.05rem); ours is 16px. So every live
value is exactly 1.05x a clean one. Dividing the measured live px by 1.05
recovers the design's real intent, and every result lands on an even number:
live 83.99 -> 80 live 42 -> 40 live 33.6 -> 32
live 29.4 -> 28 live 25.2 -> 24 live 21 -> 20 live 16.8 -> 16
We use the even value, NOT the fractional live one. Body copy stays at the
system's 18px everywhere regardless of what the live page does.
========================================================================== */
/* ---- Headings: mirror the live hierarchy on our scale ------------------- */
/* live 83.99px -> 5em. The system h1 is 3em/48px, which is right for a content
page but far too quiet for this hero. */
.s-mrchero h1{font-size:5em;}
@media (max-width:991px){ .s-mrchero h1{font-size:3.5em;} }
@media (max-width:640px){ .s-mrchero h1{font-size:2.5em;} }
/* Section h2s are live 42px -> 2.5em = --fs-title. Already correct; no rule
needed. Listed here so the absence is obviously deliberate, not an omission. */
/* live 29.4px -> 1.75em, set on the PARAGRAPH inside the blockquote. Sizing the
blockquote itself compounded with the p's own em and blew the quote up. */
.s-mrcquote__text p{font-size:1.75em;line-height:1.5;}
/* live 25.2px -> 1.5em. Same specificity as the rule above so source order,
not weight, decides — and these two never match the same element anyway. */
.s-mrcquote__body .c-quote__name{font-size:1.5em;}
/* live 18.9px -> 1.125em, i.e. the standard reading size */
.s-mrcquote__body .c-quote__role{font-size:var(--fs-lead);}
/* live 16.8px -> 1em: batch cards are compact, their titles sit at body size */
.s-batches .c-card__title{font-size:var(--fs-body);}
/* live 33.6px -> 2em */
.s-infopack__event .c-card__title,
.s-infopack__event h3{font-size:2em;margin-bottom:1.25rem;}
/* ---- Batches: compact rows, five across -------------------------------- *
Live card is 521x143 with a 176x109 thumb — a horizontal strip, not the
3-up portrait cards we had. Ours were 439px tall, which inflated the
section from 378px to 827px and left a black void under it.
521/16.8 = 31em · 143/16.8 = 8.5em · 176/16.8 = 10.5em · 109/16.8 = 6.5em */
.s-batches .l-slider__slide{flex:0 0 31em;}
.s-batches .c-card{width:100%;height:8.5em;flex-direction:row;align-items:center;
gap:1em;padding:1em 2em 1em 1em;background:var(--stone-800);overflow:hidden;}
.s-batches .c-card__media{flex:none;width:10.5em;height:6.5em;aspect-ratio:auto;}
.s-batches .c-card__media img{width:100%;height:100%;object-fit:cover;}
.s-batches .c-card__body{padding:0;gap:.25em;flex:1;min-width:0;justify-content:center;}
.s-batches .c-card__title{line-height:1.35;}
@media (max-width:991px){ .s-batches .l-slider__slide{flex:0 0 26em;} }
@media (max-width:640px){
.s-batches .l-slider__slide{flex:0 0 88%;}
.s-batches .c-card{height:auto;padding:1em;}
}
/* ---- Info Pack: the live colours, which are both already our tokens ----- *
left rgb(148,213,247) = #94D5F7 = --blue-lighter (we had the far paler --blue-100)
right rgb(244,246,247) = #F4F6F7 = --smoke (we had plain white) */
.s-infopack{background:var(--smoke);}
.s-infopack__panel{background:var(--blue-lighter);}
/* the closed-state copy is prose, not a panel: no card, no border, no shadow */
.s-infopack__panel--closed{background:none;border:none;box-shadow:none;padding:0;}
.s-infopack__panel--closed p{font-size:var(--fs-lead);}
/* live event card 588x318 -> 35em x 19em, frosted white at 25% over blur(1em) */
.s-infopack__event{background:rgba(255,255,255,.25);
-webkit-backdrop-filter:blur(1em);backdrop-filter:blur(1em);}
/* ---- Testimonial: live portrait 423x420 -> 25em square ----------------- */
/* no fixed box — the portrait sizes from its own art, as the live page does */
/* ==========================================================================
VISUAL MIRROR — pass 2, from side-by-side screenshots against the live page
========================================================================== */
/* ---- "A selective pathway" ---------------------------------------------
Three things were wrong: the photo was drowned, the track card was solid
instead of frosted, and we rendered a second card the live page hides. */
/* The live scrim is THREE stacked gradients and the middle of the frame is
only ~13% dark — that is why the stage, chart and spotlights all read.
Ours was a flat heavy wash that turned the photo into a black rectangle. */
.s-intro__scrim{
background-image:
linear-gradient(90deg, #000, rgba(0,0,0,0) 15%, rgba(0,0,0,0) 85%, #000 99%),
linear-gradient(#000, rgba(0,0,0,.13) 68%, #000 97%),
linear-gradient(rgba(0,0,0,.15), rgba(0,0,0,.15));
}
/* frosted glass, not a solid panel: rgba(255,255,255,.25) over blur(1em) */
.s-intro__track{
background:rgba(255,255,255,.25);
-webkit-backdrop-filter:blur(1em);backdrop-filter:blur(1em);
border:none;
}
/* the live "Apply now" is black on the frosted panel, not our white onDark */
.s-intro__cta{background:var(--black);border-color:var(--black);color:var(--white);}
.s-intro__cta:hover{background:var(--white);border-color:var(--white);color:var(--black);}
/* Only the Young Talent track is open for 2026 — the live page hides the
Experienced Researcher card (it is commented out in the source). Kept in the
markup so it can be switched back on for an intake that offers both. */
.s-intro__stack > .s-intro__track:nth-of-type(2){display:none;}
/* ---- "Download MRC Info Pack today" -------------------------------------
This is a full-bleed 50/50 split, NOT a padded section with a grid inside.
Live: section padding 0, left column starts at x=0 and is exactly half the
viewport (756 of 1512), running the full 795px height with no gutter. */
.c-section.s-infopack{padding:0;background:var(--smoke);}
.s-infopack > .c-container{max-width:none;padding:0;}
/* two equal full-bleed halves. The columns still carry u-col-6 from the base
12-track grid, so their `grid-column: span 6` has to be cleared or they
overflow one-per-row. */
.s-infopack .c-grid{grid-template-columns:1fr 1fr;gap:0;}
.s-infopack .c-grid__col{grid-column:auto;}
/* the LEFT COLUMN itself is the blue field — edge to edge, full height. The
blue was previously a box sitting inside a padded column, which read as a
floating panel instead of a split. */
/* was :first-child — each column now comes from its own module, so both
would match. The side is named explicitly instead. */
.s-infopack__col--pack{background:var(--blue-lighter);}
.s-infopack__col{padding:7.5em var(--gutter);display:flex;flex-direction:column;gap:2.5em;
/* the two columns come from separate modules now, so one having more content
than the other would leave the shorter one's tint ending early */
height:100%;position:relative;}
/* optional full-bleed photo behind a column. .s-infopack__event-bg was the wrong
class for this — it is positioned for the event card, not the column. */
.s-infopack__col-bg{position:absolute;inset:0;width:100%;height:100%;
object-fit:cover;z-index:0;}
.s-infopack__col > *:not(.s-infopack__col-bg):not(.c-rings-frame){position:relative;z-index:1;}
/* the panels sit inside a display:contents state wrapper, so the direct-child
rule above cannot reach them — and a positioned z-index:0 frame paints ABOVE
non-positioned content, which would put the hexagons over the form. Lift the
content elements by name instead of by position in the tree. */
.s-infopack__col .s-infopack__head,
.s-infopack__col .s-infopack__panel{position:relative;z-index:1;}
/* the pattern is column-level artwork now, not part of the slider/form panel:
.c-rings-frame is already inset:0/z-index:0, so it fills the column and
stays behind everything once the column is a positioned ancestor */
.s-infopack__panel{background:none;padding:0;}
@media (max-width:991px){
.s-infopack .c-grid{grid-template-columns:1fr;}
.s-infopack__col{padding:5em var(--gutter);}
}
/* ---- Testimonials -------------------------------------------------------
Weight and colour, not size, were the problem: the quote is regular weight
and the attribution is grey, so the block reads quietly. Ours was heavier
and darker, which made it shout. */
.s-mrcquote__body blockquote{font-weight:400;line-height:1.5;}
.s-mrcquote__body .c-quote__name{font-weight:500;color:rgb(72,72,72);}
.s-mrcquote__body .c-quote__role{color:rgb(128,128,128);}
/* ==========================================================================
MRC HERO + NAV — pass 3
========================================================================== */
/* Eyebrow: borderless tinted pill, and the icon becomes a white disc. */
.c-eyebrow--mrc,
.c-section--dark .c-eyebrow--mrc{border:none;background:rgba(225,241,253,.35);}
.c-eyebrow--mrc .c-eyebrow__ico--bare{
width:2em;height:2em;padding:.25em;border-radius:50%;background:var(--white);}
/* H1 display treatment. Needs the .s-mrchero prefix: hero-home.css already
has `.s-mrchero h1{margin:0}` at 0-1-1, which outranks a bare class and
was zeroing the margin-bottom below. */
.s-mrchero .s-mrchero__title{font-weight:600;line-height:1;margin-bottom:1.25rem;}
/* the hero CTA is a size up from the standard button */
.s-mrchero .c-btn--mrc{font-size:1.25em;}
/* ==========================================================================
PASS 4
========================================================================== */
/* ---- Ruled section tops -------------------------------------------------
Section padding-top goes to 0 and the breathing room moves onto the
container, so the hairline sits flush at the section's top edge.
.c-container--ruled already does 7.5em + a 1px line; on these dark beds the
system's stone-200 line is far too bright, so it is re-tinted. */
.s-batches, .s-intro{padding-top:0;}
.s-batches > .c-container--ruled::before,
.s-intro > .c-container--ruled::before{background:rgba(255,255,255,.15);}
/* ---- "A selective pathway" ---------------------------------------------- */
.s-intro{padding-bottom:16em;}
/* both tracks are open again — the live page hides one, but we show two here */
.s-intro__stack > .s-intro__track:nth-of-type(2){display:flex;}
.s-intro__track{padding:2em;}
.s-intro__portrait{padding-top:1.25em;}
/* ---- Info Pack left column: slider above form, one white panel ------------- */
.s-infopack__panel{display:flex;flex-direction:column;gap:0;
background:var(--white);padding:2em;}
.s-infopack__deck{position:relative;}
/* arrows centred on the slider's own left and right edges */
.s-infopack__deck .l-slider__nav{position:static;}
.s-infopack__deck .l-slider__btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
background:var(--black);border-color:var(--black);color:var(--white);}
.s-infopack__deck .l-slider__btn[data-slide="prev"]{left:.75em;}
.s-infopack__deck .l-slider__btn[data-slide="next"]{right:.75em;}
.s-infopack__deck .l-slider__btn:hover{background:var(--color-brand);border-color:var(--color-brand);}
.s-infopack__form{padding-top:2em;}
/* ---- Testimonials: arrows on the pane's left and right edges, black ------ */
.s-mrcquote .l-slider{position:relative;}
.s-mrcquote__nav{position:static;}
.s-mrcquote .l-slider__btn{position:absolute;top:50%;transform:translateY(-50%);z-index:3;
background:var(--black);border-color:var(--black);color:var(--white);}
.s-mrcquote .l-slider__btn[data-slide="prev"]{left:0;}
.s-mrcquote .l-slider__btn[data-slide="next"]{right:0;}
.s-mrcquote .l-slider__btn:hover{background:var(--color-brand);border-color:var(--color-brand);}
/* ---- FAQ: title column beside the accordion ----------------------------- */
.s-mrcfaq__title{margin:0;}
@media (max-width:991px){ .s-mrcfaq__title{margin-bottom:1.5rem;} }
/* ==========================================================================
PASS 5
========================================================================== */
/* ---- Batches ------------------------------------------------------------ */
.s-batches__head h3{max-width:none;}
.s-batches{padding-bottom:5rem;}
.s-batches > .c-container--ruled{padding-top:5rem;}
/* slider buttons are a consistent 2em across the page */
.l-slider__btn{width:2em;height:2em;}
/* ---- MRC profile / "A selective pathway" -------------------------------- *
The card is edge-to-edge: the portrait bleeds to the card's own edges and
only the copy is inset, so the padding moves off the card onto the body. */
.s-intro > .c-container--ruled{padding-top:5rem;}
.s-intro__track{padding:0;gap:0;}
.s-intro__track .c-card__body{padding:2em 0 2em 2em;}
.s-intro__portrait img{max-height:15em;}
/* the track copy sits a step below the standard reading size */
.s-intro__track .c-card__body p{font-size:var(--fs-body);}
/* ---- Info Pack ---------------------------------------------------------- */
.s-infopack__head{margin-bottom:0;}
.s-infopack__col{padding:6.5em 6.25rem;}
/* padding moves off the panel and onto each block inside it */
.s-infopack__panel{padding:0;}
.s-infopack__deck{padding:2em 2em 0;}
.s-infopack__form{padding:0;}
.s-infopack__deck .l-slider__btn{padding:.35em;}
/* ---- Testimonials ------------------------------------------------------- *
Quote block and attribution are two groups pushed to the top and bottom of
a full-height column, so the author always sits on the card's baseline. */
.s-mrcquote__portrait .c-person__pos{height:30em;}
.s-mrcquote__stack{display:flex;flex-direction:column;justify-content:space-between;
height:100%;gap:2em;}
.s-mrcquote__quote{display:flex;flex-direction:column;gap:1.5em;}
/* author name reads as plain text — the uppercase/tracking came from the
Industry .c-quote__name, which is a different context */
.s-mrcquote__auth .c-quote__name{text-transform:none;letter-spacing:normal;}
/* cross-fade between slides instead of a horizontal slide */
.s-mrcquote .l-slider__track{display:grid;overflow:visible;scroll-snap-type:none;}
.s-mrcquote .l-slider__slide{grid-area:1/1;flex:none;width:100%;
opacity:0;visibility:hidden;transition:opacity .45s ease,visibility .45s ease;}
.s-mrcquote .l-slider__slide.is-active{opacity:1;visibility:visible;}
/* ---- FAQ ---------------------------------------------------------------- */
.s-mrcfaq > .c-container--ruled{padding-top:0;}
.s-mrcfaq > .c-container{padding-top:0;}
/* hanging indent comes from the flex row in PASS 7: the number disc is a
fixed-width flex item, so wrapped lines align to the text column. */
/* caret becomes a filled white triangle inside a black disc */
.c-faq__ico{display:flex;align-items:center;justify-content:center;flex:none;
width:2em;height:2em;border-radius:50%;background:var(--black);color:var(--white);
transition:transform var(--transition);}
.c-faq__ico svg{width:1.25em;height:1.25em;}
.c-faq__item[open] .c-faq__ico{transform:rotate(180deg);}
/* ==========================================================================
PASS 6
========================================================================== */
/* ---- Info Pack ---------------------------------------------------------- */
.s-infopack__form{border:none;}
.s-infopack__deck .l-slider__btn[data-slide="prev"]{left:1em;}
.s-infopack__deck .l-slider__btn[data-slide="next"]{right:1em;}
/* ---- Testimonials ------------------------------------------------------- */
.s-mrcquote__body{padding:5em;}
/* arrows move up to the body's top-right, on the same line as the quote mark.
Both are inset by the body's own 5em padding, so they share a baseline. */
/* quote mark and arrows share one flex row; arrows pushed to the right */
.s-mrcquote__head{display:flex;align-items:center;justify-content:space-between;gap:1.5em;}
.s-mrcquote__nav{position:static;display:flex;gap:.5em;margin:0;transform:none;flex:none;}
.s-mrcquote .l-slider__btn{position:static;transform:none;
background:var(--black);border-color:var(--black);color:var(--white);}
.s-mrcquote .l-slider__btn:hover{background:var(--color-brand);border-color:var(--color-brand);}
@media (max-width:991px){ .s-mrcquote__body{padding:2.5em;} }
/* ---- FAQ ---------------------------------------------------------------- */
.c-faq__ico svg{width:1.25em;height:1.25em;}
/* open state: no border, just a soft smoke bed — as the source has it */
.c-faq__item{border:none;}
.c-faq__item[open]{background:var(--smoke);border:none;}
/* the number sits in a small black disc, a step down in size */
.c-faq__n{display:flex;align-items:center;justify-content:center;flex:none;
width:1.75em;height:1.75em;border-radius:50%;
background:var(--black);color:var(--white);
font-size:.75rem;font-weight:600;line-height:1;}
/* ==========================================================================
PASS 7
========================================================================== */
/* ---- FAQ ---------------------------------------------------------------- */
.s-mrcfaq{padding-top:0;}
/* the question is an h4 laid out as a flex row: number disc, then the text */
.c-faq__title{display:flex;gap:1.25rem;align-items:flex-start;margin:0;}
.c-faq__n{width:2.25em;height:2.25em;}
.c-faq__ico{width:1.125em;height:1.125em;}
/* the disc sizes the glyph now, so the svg must not carry its own box */
.c-faq__ico svg{width:auto;height:auto;}
/* Closed: a hairline in the same smoke as the open state's bed, so the rows
read as a stack. Open: the bed does the work, so the border comes off. */
.c-faq__item{border:1px solid var(--smoke);}
.c-faq__item[open]{border:none;}
/* ==========================================================================
PASS 8
========================================================================== */
/* ---- FAQ accordion ------------------------------------------------------ */
.c-faq__item{border:1px solid var(--smoke-2);}
.c-faq__item[open]{border-color:transparent;background:var(--smoke-1);}
.c-faq__q .c-faq__title{line-height:1.5;}
/* ---- "A selective pathway" gentle parallax ------------------------------
The bed starts blurred and slightly low, then settles as it scrolls in.
will-change keeps the filter on the compositor. */
.s-intro__bg img{will-change:transform,filter;transform:translate3d(0,0,0);}
/* ---- University logo marquee ------------------------------------------- */
.c-section.s-unis{background:var(--white);padding-top:7.5em;padding-bottom:0;}
.s-unis__head{text-align:center;margin-bottom:3.5em;}
.s-unis__head h2{margin:0 0 .5rem;}
.s-unis__head p{margin:0;color:var(--color-text-muted);}
/* University marquee: crests and wordmarks in one row.
The Industry wall tunes each logo by hand on two axes, but these 20 range
from 250x81 (VNU wordmark) to 250x376 (HUST crest) — at a fixed WIDTH the
crests tower and the wordmarks vanish. Capping HEIGHT instead makes every
mark settle to the same optical weight, whatever its shape. */
.s-unis .c-logo{padding:0 1.5em;}
.s-unis .c-logo__img{width:auto;max-width:100%;max-height:3.5em;object-fit:contain;}
/* ==========================================================================
MOBILE PASS
========================================================================== */
/* Footer blocks are native . On desktop they are plain labelled
columns — the content is forced visible and the marker hidden, so the
accordion only exists where it earns its keep. */
summary.c-footer__lbl{cursor:default;list-style:none;}
summary.c-footer__lbl::-webkit-details-marker{display:none;}
/* No CSS force-open here: modern browsers hide a closed through
::details-content { content-visibility:hidden }, which a child display
override cannot defeat. footerAccordion() in ui.js owns the open state —
so with JS off, every block stays open, which is the safe failure. */
@media (max-width:767px){
/* The label is a ruled column heading on desktop — it carries its own
border-bottom. As an accordion summary that rule doubles up with the
block's divider, leaving two lines with dead space between them, so the
label's own rule and its padding come off here. */
.c-footer__lbl{border-bottom:none;padding-bottom:0;}
summary.c-footer__lbl{cursor:pointer;display:flex;align-items:center;
justify-content:space-between;gap:1em;}
/* a chevron that turns when the block opens */
summary.c-footer__lbl::after{content:"";flex:none;width:.5em;height:.5em;margin-right:.25em;
border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(45deg);transition:transform var(--transition);}
.c-footer__block[open] > .c-footer__lbl::after{transform:rotate(-135deg);}
.c-footer__col{gap:0;}
/* Divider on the TOP of every block except the very first. "Last of the last
column" was unreliable — the five blocks sit across four columns unevenly,
so :last-child fired on the wrong ones. "First of the first column" is
deterministic, and a top rule can never leave a trailing line. */
.c-footer__block{padding-block:1.25em;border-top:1px solid var(--stone-700);border-bottom:none;}
.c-footer__col:first-child .c-footer__block:first-child{border-top:none;}
/* the grid gap would add 40px on top of each divider; the dividers are the
separation now, so the stacked columns close up into one list */
.c-footer__grid{gap:0;}
/* breathing room between the summary and its links once opened */
.c-footer__block[open] > .c-footer__items{padding-top:1.25em;}
}
/* the nav's 1fr track was over-computing and pushing the bar 7px past the
viewport; two auto tracks pinned apart cannot overflow */
@media (max-width:991px){
.c-nav--mrc > .c-container{grid-template-columns:auto auto;justify-content:space-between;}
.c-brand{min-width:0;}
}
@media (max-width:991px){
/* hero is no longer a full fold on mobile — it grows with its content */
.c-section.s-mrchero{min-height:0;}
.s-mrchero > .c-container{padding-block:10rem 5rem;}
/* the ruled tops need more contrast on the dark beds at small sizes */
.s-batches > .c-container--ruled::before,
.s-intro > .c-container--ruled::before{background:rgba(255,255,255,.28);}
.s-intro{padding-bottom:5em;}
.s-intro__track .c-card__body{padding:1.5em 1.5em 0;}
.s-infopack__col{padding:5em 1.5em;}
.c-section.s-unis{padding-top:5em;}
}
/* ==========================================================================
MOBILE PASS 2
========================================================================== */
/* the block's own gap doubled up with the items' spacing */
.c-footer__block{gap:0;}
/* "Get in touch" holds a form, address and socials — not a link list, so it is
never an accordion. No pointer, no chevron, always open. */
.c-footer__block--plain > *:not(.c-footer__lbl){display:flex;}
/* Career Day facts: date and time are two separate pills, stacked.
.s-infopack__chips is already a column, so they stack by default. */
@media (max-width:991px){
.s-infopack__deck{padding:1.5em 1.5em 0;}
.s-mrcquote__portrait .c-person__pos{height:20em;padding-top:2em;}
.s-mrcquote__body{padding:1.5em;}
.s-mrcquote__text p{font-size:1.5em;}
}
/* ==========================================================================
FINAL PASS
========================================================================== */
/* The chip is an inline-flex row with a .625em gap, so a bare in the text
became its own flex item and the gap opened either side of it — "7 th May".
Wrapping the copy in one span leaves the chip with two children: icon + text. */
.s-infopack__chip-txt{display:inline;}
/* ---- Featured blog cards: 16/9 media on every screen -------------------- */
.s-batches .c-card__media{aspect-ratio:16/9;height:auto;}
/* ---- Footer link groups ------------------------------------------------- */
.c-footer__group{margin-top:1em;}
@media (max-width:991px){
/* the date pair fills the bar rather than hugging its content */
.c-datebar__dates{width:100%;}
}
@media (max-width:767px){
/* batch cards go vertical: full-bleed 16/9 image above the copy */
.s-batches .c-card{flex-direction:column;align-items:stretch;height:auto;padding:0;}
.s-batches .c-card__media{width:100%;}
.s-batches .c-card__body{padding:1.25em;}
/* the accordion supplies its own rhythm on mobile */
.c-footer__group{margin-top:0;}
}
/* ---- Footer bottom bar alignment ---------------------------------------
--maxw is 82em, and .c-footer__bottom sets font-size:.875em — so the bar's
container resolved 82em against 14px (1148px) while the columns above
resolved it against 16px (1312px), leaving the copyright 82px inboard on
each side. Keep the container at the root em context and put the small type
on its children instead. */
.c-footer__bottom > .c-container{font-size:1rem;}
.c-footer__bottom > .c-container > *{font-size:var(--fs-small);}
/* contact column: its items sit a step below the heading */
.c-footer__items--contact{margin-top:1em;}
/* newsletter field reads as a translucent well on the black bed */
.c-footer__form input[type=email]{background:rgba(255,255,255,.14);}
/* ---- Footer: positioning line + oversize wordmark ----------------------- */
/* The line sits beside the logo and is allowed to run about two columns wide,
matching the Solutions + Industries span rather than wrapping tightly. */
.c-footer__intro{display:flex;flex-direction:column;align-items:flex-start;
gap:1em;margin-bottom:3.5em;}
/* Motto in place of the small logo. Plain text on the footer bed — no pill.
The dot is a trailing pseudo element on every item (hidden on the last one
for the static desktop row), so the mobile marquee loops without a gap in
the rhythm at the seam. Spacing lives inside the items, which keeps the
track gap at 0 — translateX(-50%) is then exactly one group wide. */
.c-footer__motto{width:100%;}
.c-footer__motto-track{display:flex;gap:0;}
.c-footer__motto-group{display:flex;flex:none;flex-wrap:wrap;gap:0;
list-style:none;margin:0;padding:0;}
.c-footer__motto-item{display:flex;align-items:center;gap:1em;padding-right:1em;
font-size:var(--fs-small);font-weight:600;letter-spacing:.06em;
text-transform:uppercase;color:var(--stone-300);white-space:nowrap;}
.c-footer__motto-item::after{content:"";flex:none;
width:.25em;height:.25em;border-radius:50%;background:var(--stone-500);}
/* Desktop: one static row, no trailing dot, duplicate group not rendered. */
.c-footer__motto-group[aria-hidden]{display:none;}
.c-footer__motto-item:last-child::after{display:none;}
/* Oversize wordmark under the groups. It is decorative, so it must never add
scroll width or intercept clicks. */
.c-footer__watermark{margin-top:0;pointer-events:none;overflow:hidden;}
/* Rise-on-scroll. reveal() arms the wrapper; we cancel its default fade/shift
and slide the wordmark up out of the wrapper's own overflow instead, so it
emerges from the bottom edge rather than just fading in. */
.c-footer__watermark.js-reveal-armed{opacity:1;transform:none;}
.c-footer__watermark.js-reveal-armed img{transform:translateY(100%);}
.c-footer__watermark.js-reveal-armed.is-revealed img{transform:translateY(0);
transition:transform .9s cubic-bezier(.25,.46,.45,.94);}
/* fades 15% at the top to fully transparent at the bottom. The mask does the
fade; opacity sets the ceiling. */
.c-footer__watermark img{display:block;width:100%;height:auto;opacity:.45;
-webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 100%);
mask-image:linear-gradient(to bottom,#000 0%,transparent 100%);}
@media (max-width:767px){
.c-footer__watermark{margin-top:0;}
/* Motto → marquee. Both groups render, nothing wraps, and every item keeps
its trailing dot so the loop reads continuously. The edge fades are the
footer bed, matching .c-logos. */
.c-footer__motto{position:relative;overflow:hidden;}
.c-footer__motto::before,.c-footer__motto::after{content:"";position:absolute;
top:0;bottom:0;width:3em;z-index:2;pointer-events:none;}
.c-footer__motto::before{left:0;background:linear-gradient(to right,#000,rgba(0,0,0,0));}
.c-footer__motto::after{right:0;background:linear-gradient(to left,#000,rgba(0,0,0,0));}
.c-footer__motto-track{width:max-content;animation:dl-marquee 18s linear infinite;}
@media (prefers-reduced-motion:reduce){.c-footer__motto-track{animation:none;}}
.c-footer__motto-group{flex-wrap:nowrap;}
.c-footer__motto-group[aria-hidden]{display:flex;}
.c-footer__motto-item:last-child::after{display:block;}
}
.s-infopack__closed p{margin:0 0 1em;}
.s-infopack__closed p:last-child{margin-bottom:0;}
/* ---- zzz-reveal.css ------------------------------------------------ */
/* REVEAL — progressive enhancement (content ships visible)
========================================================================== */
.js-reveal-armed{opacity:0;transform:translateY(1em);}
.js-reveal-armed.is-revealed{opacity:1;transform:translateY(0);
transition:opacity .6s cubic-bezier(.25,.46,.45,.94),transform .6s cubic-bezier(.25,.46,.45,.94);}
@media (prefers-reduced-motion:reduce){
.js-reveal-armed{opacity:1;transform:none;}
.c-ticker__item{transition:none;}
}
through
::details-content { content-visibility:hidden }, which a child display
override cannot defeat. footerAccordion() in ui.js owns the open state —
so with JS off, every block stays open, which is the safe failure. */
@media (max-width:767px){
/* The label is a ruled column heading on desktop — it carries its own
border-bottom. As an accordion summary that rule doubles up with the
block's divider, leaving two lines with dead space between them, so the
label's own rule and its padding come off here. */
.c-footer__lbl{border-bottom:none;padding-bottom:0;}
summary.c-footer__lbl{cursor:pointer;display:flex;align-items:center;
justify-content:space-between;gap:1em;}
/* a chevron that turns when the block opens */
summary.c-footer__lbl::after{content:"";flex:none;width:.5em;height:.5em;margin-right:.25em;
border-right:2px solid currentColor;border-bottom:2px solid currentColor;
transform:rotate(45deg);transition:transform var(--transition);}
.c-footer__block[open] > .c-footer__lbl::after{transform:rotate(-135deg);}
.c-footer__col{gap:0;}
/* Divider on the TOP of every block except the very first. "Last of the last
column" was unreliable — the five blocks sit across four columns unevenly,
so :last-child fired on the wrong ones. "First of the first column" is
deterministic, and a top rule can never leave a trailing line. */
.c-footer__block{padding-block:1.25em;border-top:1px solid var(--stone-700);border-bottom:none;}
.c-footer__col:first-child .c-footer__block:first-child{border-top:none;}
/* the grid gap would add 40px on top of each divider; the dividers are the
separation now, so the stacked columns close up into one list */
.c-footer__grid{gap:0;}
/* breathing room between the summary and its links once opened */
.c-footer__block[open] > .c-footer__items{padding-top:1.25em;}
}
/* the nav's 1fr track was over-computing and pushing the bar 7px past the
viewport; two auto tracks pinned apart cannot overflow */
@media (max-width:991px){
.c-nav--mrc > .c-container{grid-template-columns:auto auto;justify-content:space-between;}
.c-brand{min-width:0;}
}
@media (max-width:991px){
/* hero is no longer a full fold on mobile — it grows with its content */
.c-section.s-mrchero{min-height:0;}
.s-mrchero > .c-container{padding-block:10rem 5rem;}
/* the ruled tops need more contrast on the dark beds at small sizes */
.s-batches > .c-container--ruled::before,
.s-intro > .c-container--ruled::before{background:rgba(255,255,255,.28);}
.s-intro{padding-bottom:5em;}
.s-intro__track .c-card__body{padding:1.5em 1.5em 0;}
.s-infopack__col{padding:5em 1.5em;}
.c-section.s-unis{padding-top:5em;}
}
/* ==========================================================================
MOBILE PASS 2
========================================================================== */
/* the block's own gap doubled up with the items' spacing */
.c-footer__block{gap:0;}
/* "Get in touch" holds a form, address and socials — not a link list, so it is
never an accordion. No pointer, no chevron, always open. */
.c-footer__block--plain > *:not(.c-footer__lbl){display:flex;}
/* Career Day facts: date and time are two separate pills, stacked.
.s-infopack__chips is already a column, so they stack by default. */
@media (max-width:991px){
.s-infopack__deck{padding:1.5em 1.5em 0;}
.s-mrcquote__portrait .c-person__pos{height:20em;padding-top:2em;}
.s-mrcquote__body{padding:1.5em;}
.s-mrcquote__text p{font-size:1.5em;}
}
/* ==========================================================================
FINAL PASS
========================================================================== */
/* The chip is an inline-flex row with a .625em gap, so a bare in the text
became its own flex item and the gap opened either side of it — "7 th May".
Wrapping the copy in one span leaves the chip with two children: icon + text. */
.s-infopack__chip-txt{display:inline;}
/* ---- Featured blog cards: 16/9 media on every screen -------------------- */
.s-batches .c-card__media{aspect-ratio:16/9;height:auto;}
/* ---- Footer link groups ------------------------------------------------- */
.c-footer__group{margin-top:1em;}
@media (max-width:991px){
/* the date pair fills the bar rather than hugging its content */
.c-datebar__dates{width:100%;}
}
@media (max-width:767px){
/* batch cards go vertical: full-bleed 16/9 image above the copy */
.s-batches .c-card{flex-direction:column;align-items:stretch;height:auto;padding:0;}
.s-batches .c-card__media{width:100%;}
.s-batches .c-card__body{padding:1.25em;}
/* the accordion supplies its own rhythm on mobile */
.c-footer__group{margin-top:0;}
}
/* ---- Footer bottom bar alignment ---------------------------------------
--maxw is 82em, and .c-footer__bottom sets font-size:.875em — so the bar's
container resolved 82em against 14px (1148px) while the columns above
resolved it against 16px (1312px), leaving the copyright 82px inboard on
each side. Keep the container at the root em context and put the small type
on its children instead. */
.c-footer__bottom > .c-container{font-size:1rem;}
.c-footer__bottom > .c-container > *{font-size:var(--fs-small);}
/* contact column: its items sit a step below the heading */
.c-footer__items--contact{margin-top:1em;}
/* newsletter field reads as a translucent well on the black bed */
.c-footer__form input[type=email]{background:rgba(255,255,255,.14);}
/* ---- Footer: positioning line + oversize wordmark ----------------------- */
/* The line sits beside the logo and is allowed to run about two columns wide,
matching the Solutions + Industries span rather than wrapping tightly. */
.c-footer__intro{display:flex;flex-direction:column;align-items:flex-start;
gap:1em;margin-bottom:3.5em;}
/* Motto in place of the small logo. Plain text on the footer bed — no pill.
The dot is a trailing pseudo element on every item (hidden on the last one
for the static desktop row), so the mobile marquee loops without a gap in
the rhythm at the seam. Spacing lives inside the items, which keeps the
track gap at 0 — translateX(-50%) is then exactly one group wide. */
.c-footer__motto{width:100%;}
.c-footer__motto-track{display:flex;gap:0;}
.c-footer__motto-group{display:flex;flex:none;flex-wrap:wrap;gap:0;
list-style:none;margin:0;padding:0;}
.c-footer__motto-item{display:flex;align-items:center;gap:1em;padding-right:1em;
font-size:var(--fs-small);font-weight:600;letter-spacing:.06em;
text-transform:uppercase;color:var(--stone-300);white-space:nowrap;}
.c-footer__motto-item::after{content:"";flex:none;
width:.25em;height:.25em;border-radius:50%;background:var(--stone-500);}
/* Desktop: one static row, no trailing dot, duplicate group not rendered. */
.c-footer__motto-group[aria-hidden]{display:none;}
.c-footer__motto-item:last-child::after{display:none;}
/* Oversize wordmark under the groups. It is decorative, so it must never add
scroll width or intercept clicks. */
.c-footer__watermark{margin-top:0;pointer-events:none;overflow:hidden;}
/* Rise-on-scroll. reveal() arms the wrapper; we cancel its default fade/shift
and slide the wordmark up out of the wrapper's own overflow instead, so it
emerges from the bottom edge rather than just fading in. */
.c-footer__watermark.js-reveal-armed{opacity:1;transform:none;}
.c-footer__watermark.js-reveal-armed img{transform:translateY(100%);}
.c-footer__watermark.js-reveal-armed.is-revealed img{transform:translateY(0);
transition:transform .9s cubic-bezier(.25,.46,.45,.94);}
/* fades 15% at the top to fully transparent at the bottom. The mask does the
fade; opacity sets the ceiling. */
.c-footer__watermark img{display:block;width:100%;height:auto;opacity:.45;
-webkit-mask-image:linear-gradient(to bottom,#000 0%,transparent 100%);
mask-image:linear-gradient(to bottom,#000 0%,transparent 100%);}
@media (max-width:767px){
.c-footer__watermark{margin-top:0;}
/* Motto → marquee. Both groups render, nothing wraps, and every item keeps
its trailing dot so the loop reads continuously. The edge fades are the
footer bed, matching .c-logos. */
.c-footer__motto{position:relative;overflow:hidden;}
.c-footer__motto::before,.c-footer__motto::after{content:"";position:absolute;
top:0;bottom:0;width:3em;z-index:2;pointer-events:none;}
.c-footer__motto::before{left:0;background:linear-gradient(to right,#000,rgba(0,0,0,0));}
.c-footer__motto::after{right:0;background:linear-gradient(to left,#000,rgba(0,0,0,0));}
.c-footer__motto-track{width:max-content;animation:dl-marquee 18s linear infinite;}
@media (prefers-reduced-motion:reduce){.c-footer__motto-track{animation:none;}}
.c-footer__motto-group{flex-wrap:nowrap;}
.c-footer__motto-group[aria-hidden]{display:flex;}
.c-footer__motto-item:last-child::after{display:block;}
}
.s-infopack__closed p{margin:0 0 1em;}
.s-infopack__closed p:last-child{margin-bottom:0;}
/* ---- zzz-reveal.css ------------------------------------------------ */
/* REVEAL — progressive enhancement (content ships visible)
========================================================================== */
.js-reveal-armed{opacity:0;transform:translateY(1em);}
.js-reveal-armed.is-revealed{opacity:1;transform:translateY(0);
transition:opacity .6s cubic-bezier(.25,.46,.45,.94),transform .6s cubic-bezier(.25,.46,.45,.94);}
@media (prefers-reduced-motion:reduce){
.js-reveal-armed{opacity:1;transform:none;}
.c-ticker__item{transition:none;}
}