/* ==========================================================================
   MSA site stylesheet
   Mohawk Students' Association -- EB Media Solutions
   Companion to the Elementor page templates. Plugin widgets carry their own
   CSS; this file holds the site shell, section furniture and page sections
   built directly in Elementor.
   ========================================================================== */

:root {
	/* Primary palette */
	--msa-crimson: #C42031;
	--msa-black: #000000;
	--msa-grey: #414141;
	--msa-white: #FFFFFF;

	/* Department palette */
	--msa-teal: #00B1BA;
	--msa-blue: #264398;
	--msa-yellow: #FFD508;
	--msa-purple: #A73C96;

	/* Text-safe variants. The brand colours fail WCAG AA as type on white,
	   so anything set as text uses these. Brand values stay for fills,
	   borders and badges where contrast rules do not apply. */
	--msa-crimson-text: #A81A29;
	--msa-teal-text: #00767C;
	--msa-blue-text: #264398;
	--msa-yellow-text: #6B5800;
	--msa-purple-text: #8A2F7C;

	/* Soft tints for placeholder and panel fills */
	--msa-crimson-soft: #F7DDE0;
	--msa-teal-soft: #D2F0F2;
	--msa-blue-soft: #DCE2F3;
	--msa-yellow-soft: #FBF0C4;
	--msa-purple-soft: #F0DBEC;

	/* Surfaces */
	--msa-page: #FFFFFF;
	--msa-cream: #FAF6F2;
	--msa-ink: #1A1A1A;
	--msa-body-text: #4A4A4A;
	/* Was #8A8A85, which failed WCAG AA as type on every surface the site uses --
	   3.47:1 on white, 2.65:1 on the purple card tint, against the 4.5:1 needed.
	   #616161 clears 4.73:1 on the worst of them and is still clearly lighter than
	   --msa-body-text, so muted copy still reads as secondary. */
	--msa-muted: #616161;
	--msa-hairline: rgba(0, 0, 0, 0.09);
	--msa-field: #F4F4F2;
	--msa-neutral-soft: #F1F1EF;

	/* Type */
	--msa-display: "Bebas Neue", Impact, sans-serif;
	--msa-body: "Roboto", Arial, sans-serif;

	/* Metrics */
	--msa-width: 1240px;
	--msa-gutter: 20px;
	--msa-radius: 10px;
	--msa-pill: 999px;
	--msa-section-y: 96px;
	--msa-edge: 46px;
}

/* --------------------------------------------------------------- Shell */

.msa-container {
	width: 100%;
	max-width: var(--msa-width);
	margin-inline: auto;
	padding-inline: var(--msa-gutter);
}

.msa-section {
	position: relative;
	padding-block: var(--msa-section-y);
}

.msa-section--white {
	background: var(--msa-page);
}

.msa-section--cream {
	background: var(--msa-cream);
}

/* The first section on a page must be white.
 *
 * The interior hero rounds off its own bottom corners, so the page background
 * shows through them. Against a white section that is invisible, which is why
 * every page opens on one. Put cream first and the two corners read as white
 * notches cut out of the band below the hero.
 *
 * It only applies to the first section: further down the page, cream is fine and
 * the dome and slant helpers handle their own seams. */

.msa-section--hero {
	padding-block: 0;
}

.msa-section--crimson {
	background: var(--msa-crimson);
	color: var(--msa-white);
}

/* Curved section edges. Pure CSS rather than SVG so the stylesheet stays
   free of markup characters and the curve scales with the viewport. */
.msa-edge--dome-bottom {
	/* One longhand per corner rather than the shorthand with a slash: see the
	   note in msa-hero.css. Firefox drew the horizontal 50% as the vertical
	   radius too, turning a shallow edge into a half-height dome. */
	border-bottom-left-radius: 50% var(--msa-edge);
	border-bottom-right-radius: 50% var(--msa-edge);
	overflow: hidden;
}

.msa-edge--dome-top {
	border-top-left-radius: 50% var(--msa-edge);
	border-top-right-radius: 50% var(--msa-edge);
}

/* A domed section leaves its top corners uncovered, and the page background
   shows through as white. This paints the previous section's colour into that
   band so the curve reads as a divider rather than a gap. Apply it to the
   section ABOVE the domed one. */
.msa-edge--fill-below::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: calc(var(--msa-edge) * -1);
	height: var(--msa-edge);
	background: var(--msa-edge-fill, var(--msa-cream));
	pointer-events: none;
}

.msa-section--white.msa-edge--fill-below {
	--msa-edge-fill: var(--msa-page);
}

.msa-section--cream.msa-edge--fill-below {
	--msa-edge-fill: var(--msa-cream);
}

/* Slanted section edges.
 *
 * The other way to break up a run of blocky sections, asked for alongside the
 * curves. A shallow diagonal rather than a dome, cut with clip-path so the angle
 * scales with the viewport and no extra markup is needed.
 *
 * Unlike the dome, a slant needs no fill helper -- the cut reveals whatever sits
 * behind the section, so it reads correctly wherever a cream section is followed
 * by a white one, which is the alternation the pages already use. Putting a slant
 * between two sections of the SAME colour will show a white wedge, so don't.
 *
 * Keep them rare. Two or three across a long page reads as considered; one on
 * every section reads as an effect applied to everything.
 */
.msa-edge--slant-bottom {
	clip-path: polygon(0 0, 100% 0, 100% calc(100% - var(--msa-slant, 52px)), 0 100%);
	padding-bottom: calc(var(--msa-section-y) + var(--msa-slant, 52px));
}

.msa-edge--slant-bottom-rev {
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - var(--msa-slant, 52px)));
	padding-bottom: calc(var(--msa-section-y) + var(--msa-slant, 52px));
}

.msa-edge--slant-top {
	clip-path: polygon(0 var(--msa-slant, 52px), 100% 0, 100% 100%, 0 100%);
	padding-top: calc(var(--msa-section-y) + var(--msa-slant, 52px));
	margin-top: calc(var(--msa-slant, 52px) * -1);
}

/* A slant eats vertical space at the shallow end, and on a narrow screen that
   is a large share of the section. Shallower, so the content keeps its room. */
@media (max-width: 767px) {
	.msa-edge--slant-bottom,
	.msa-edge--slant-bottom-rev,
	.msa-edge--slant-top {
		--msa-slant: 26px;
	}
}

.msa-sr,
.msa-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Accent modifiers -- shared vocabulary with every MSA plugin. */
.msa-accent--crimson { --msa-accent: var(--msa-crimson); --msa-accent-text: var(--msa-crimson-text); --msa-accent-soft: var(--msa-crimson-soft); }
.msa-accent--teal    { --msa-accent: var(--msa-teal);    --msa-accent-text: var(--msa-teal-text);    --msa-accent-soft: var(--msa-teal-soft); }
.msa-accent--blue    { --msa-accent: var(--msa-blue);    --msa-accent-text: var(--msa-blue-text);    --msa-accent-soft: var(--msa-blue-soft); }
.msa-accent--yellow  { --msa-accent: var(--msa-yellow);  --msa-accent-text: var(--msa-yellow-text);  --msa-accent-soft: var(--msa-yellow-soft); }
.msa-accent--purple  { --msa-accent: var(--msa-purple);  --msa-accent-text: var(--msa-purple-text);  --msa-accent-soft: var(--msa-purple-soft); }

/* ---------------------------------------------------------- Typography */

.msa-eyebrow,
.msa-eyebrow-wrap p {
	margin: 0 0 10px;
	font-family: var(--msa-body);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.17em;
	text-transform: uppercase;
	color: var(--msa-accent-text, var(--msa-crimson-text));
}

.msa-eyebrow--on-dark,
.msa-section--crimson .msa-eyebrow-wrap p {
	color: rgba(255, 255, 255, 0.88);
}

.msa-heading .elementor-heading-title,
.msa-heading h2,
.msa-heading h3 {
	margin: 0;
	font-family: var(--msa-display);
	font-size: 48px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--msa-ink);
}

.msa-heading--on-dark .elementor-heading-title {
	color: var(--msa-white);
}

/* Hand-drawn underline under the section heading. Two stacked strokes with
   slightly different widths reads closer to the brushed brand mark than a
   single flat rule. */
.msa-heading--underline .elementor-heading-title {
	position: relative;
	display: inline-block;
	max-width: none;
	padding-bottom: 22px;
}

.msa-heading--underline .elementor-heading-title::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	border-radius: var(--msa-pill);
	background: var(--msa-accent, var(--msa-crimson));
	transform: rotate(-0.6deg);
}

/* The underline is drawn as the hand-drawn squiggle from the brand
   guidelines rather than a straight bar.
   It is applied as a mask over the accent colour rather than as a background
   image, so the rule still takes each section's colour -- the artwork is red,
   but only its shape is used. A single stretched wave rather than a repeated
   one, because repeating leaves a small step where the ends do not line up. */
/* The same rule under the section headings the events, people, stories and
   documents widgets render, so a heading looks the same whether the page
   template wrote it or a plugin did. The small "Coming Up" style headings are
   left alone -- a rule under those would be heavier than the heading. */
.msa-section-heading:not(.msa-section-heading--sm) {
	position: relative;
	width: fit-content;
	padding-bottom: 20px;
}

.msa-section-heading:not(.msa-section-heading--sm)::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 5px;
	border-radius: var(--msa-pill);
	background: var(--msa-accent, var(--msa-crimson));
	transform: rotate(-0.6deg);
	pointer-events: none;
}

@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {

	.msa-heading--underline .elementor-heading-title::after,
	.msa-section-heading:not(.msa-section-heading--sm)::before {
		height: 22px;
		border-radius: 0;
		-webkit-mask-image: url("assets/squiggle-red.png");
		mask-image: url("assets/squiggle-red.png");
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;
		-webkit-mask-position: left bottom;
		mask-position: left bottom;
		-webkit-mask-size: 100% 100%;
		mask-size: 100% 100%;
	}
}

/* -------------------------------------------------------------- Buttons */

.msa-btn-wrap .elementor-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: 50px;
	padding: 0 30px;
	border-radius: var(--msa-pill);
	font-family: var(--msa-display);
	font-size: 19px;
	font-weight: 400;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	line-height: 1;
	border: 1px solid transparent;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

.msa-btn-wrap--crimson .elementor-button {
	background: var(--msa-crimson);
	color: var(--msa-white);
}

.msa-btn-wrap--crimson .elementor-button:hover {
	background: #A81A29;
	color: var(--msa-white);
}

.msa-btn-wrap--ghost .elementor-button {
	background: var(--msa-white);
	color: var(--msa-ink);
}

.msa-btn-wrap--ghost .elementor-button:hover {
	background: rgba(255, 255, 255, 0.82);
}

.msa-btn-wrap--outline .elementor-button {
	background: transparent;
	border-color: rgba(0, 0, 0, 0.22);
	color: var(--msa-ink);
}

.msa-btn-wrap--outline .elementor-button:hover {
	background: var(--msa-ink);
	border-color: var(--msa-ink);
	color: var(--msa-white);
}

.msa-inline-link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding-bottom: 2px;
	border-bottom: 2px solid var(--msa-accent, var(--msa-crimson));
	font-size: 14px;
	font-weight: 700;
	color: var(--msa-ink);
	text-decoration: none;
	transition: color 0.18s ease;
}

.msa-inline-link:hover {
	color: var(--msa-crimson-text);
}

/* ------------------------------------------------- Interior page blocks */

/* The page template leaves the body unconstrained so pages can run full-width
   colour bands. Each page supplies its own sections and containers. Every
   block here is built from native Elementor widgets, so MSA staff can edit the
   copy in the panel rather than in a code block. */

.msa-page-body,
.msa-page-content {
	width: 100%;
}

.msa-section--tight {
	padding-block: 56px;
}

.msa-section--tight-top {
	padding-top: 76px;
}

.msa-section--tint {
	background: var(--msa-accent-soft, var(--msa-crimson-soft));
}

.msa-narrow {
	max-width: 820px;
}

.msa-block__intro p {
	margin: 14px 0 0;
	max-width: 62ch;
	font-size: 16px;
	line-height: 1.7;
	color: var(--msa-body-text);
}

/* -------------------------------------------------------- Anchor bar */

/* Sits astride the hero edge, then pins under the header once it scrolls
   past. Label and links share a row so the bar stays shallow -- it has to
   work as a fixed strip, where height is expensive. */
.msa-section--anchors {
	padding-block: 0;
}

.msa-anchors {
	position: relative;
	z-index: 20;
	/* Set --msa-header-offset on :root to override the measured header
	   height, for layouts the script cannot work out on its own. */
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 8px 26px;
	margin-top: 30px;
	margin-bottom: 14px;
	padding: 15px 26px;
	border: 1px solid var(--msa-hairline);
	border-top: 3px solid var(--msa-accent, var(--msa-crimson));
	border-radius: var(--msa-radius);
	background: var(--msa-page);
	box-shadow: 0 14px 32px rgba(0, 0, 0, 0.07);
	transition: padding 0.18s ease, box-shadow 0.18s ease, opacity 0.15s ease;
}

.msa-anchors p {
	margin: 0;
}

.msa-anchors__label {
	flex: 0 0 auto;
	padding-right: 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--msa-muted);
}

.msa-anchors ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.msa-anchors li {
	margin: 0;
}

.msa-anchors a {
	display: inline-block;
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
	font-size: 14px;
	font-weight: 500;
	color: var(--msa-ink);
	text-decoration: none;
	transition: border-color 0.18s ease, color 0.18s ease;
}

.msa-anchors a:hover,
.msa-anchors a.is-current {
	color: var(--msa-accent-text, var(--msa-crimson-text));
	border-bottom-color: var(--msa-accent, var(--msa-crimson));
}

/* Keeps the page from jumping when the bar leaves the flow. */
.msa-anchors__spacer {
	width: 100%;
}

/* Pinned state: a full-width strip that reads as part of the header stack
   rather than a card that happens to be stuck. */
.msa-anchors.is-stuck {
	position: fixed;
	left: 0;
	right: 0;
	/* Below the header, above page content. Raise the header's own z-index
	   in Elementor if it ever ends up underneath this. */
	z-index: var(--msa-anchor-z, 500);
	margin: 0;
	padding-block: 12px;
	padding-inline: max(var(--msa-gutter), calc((100vw - var(--msa-width)) / 2 + var(--msa-gutter)));
	border: 0;
	border-bottom: 1px solid var(--msa-hairline);
	border-radius: 0;
	background: rgba(255, 255, 255, 0.94);
	backdrop-filter: blur(8px);
	-webkit-backdrop-filter: blur(8px);
	box-shadow: 0 6px 18px rgba(0, 0, 0, 0.06);
}

/* A thin accent rule along the top edge keeps the section colour present
   without the heavy 3px border the resting state uses. */
.msa-anchors.is-stuck::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 2px;
	background: var(--msa-accent, var(--msa-crimson));
}

@supports not (backdrop-filter: blur(8px)) {
	.msa-anchors.is-stuck {
		background: var(--msa-page);
	}
}

/* The mega menu covers the viewport, so a pinned on-page nav has nothing to
   do while it is open. Hiding it here rather than raising the overlay's
   z-index avoids depending on where the header's stacking context begins --
   an Elementor sticky container with its own z-index traps the overlay inside
   it, and no value on this bar would reliably lose that fight. */
body.msa-menu-open .msa-anchors.is-stuck {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}

/* Anchor targets clear the header and the pinned bar. The script keeps this
   in step with the real measured heights. */
[id="redeem"],
[id="digital"],
[id="sunflower"],
[id="tips"],
[id="faq"],
[id="included"],
[id="empower"],
[id="coverage"],
[id="stand"],
[id="efforts"],
[id="casa"],
[id="impact"],
[id="participate"],
[id="two"],
[id="resources"],
[id="student-executive-team"],
[id="staff"],
[id="values"],
[id="pillars"],
[id="history"],
[id="calendar"],
[id="suggest"],
[id="gallery"],
[id="directory"],
[id="perks"],
[id="outlets"],
[id="spaces"],
[id="supports"] {
	scroll-margin-top: var(--msa-anchor-offset, 160px);
}

html {
	scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
	html {
		scroll-behavior: auto;
	}
}

/* ----------------------------------------------------------- Copy bits */

.msa-lead p {
	margin: 0;
	font-size: 19px;
	line-height: 1.6;
	color: var(--msa-ink);
}

.msa-note p {
	margin: 22px 0 0;
	padding: 12px 0 12px 18px;
	border-left: 3px solid var(--msa-accent, var(--msa-crimson));
	font-size: 14px;
	line-height: 1.6;
	color: var(--msa-body-text);
}

.msa-note a,
.msa-block__intro a {
	color: var(--msa-crimson-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* ------------------------------------------------------ Split sections */

.msa-split {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 56px;
	align-items: center;
}

.msa-split--wide {
	grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr);
}

.msa-split--even {
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: start;
}

/* Main column with a companion card beside it. The aside is narrower and
   starts at the top, so it reads as related to the section rather than as a
   second, equal topic. */
.msa-split--aside {
	grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
	gap: 48px;
	align-items: start;
}

.msa-split__aside {
	min-width: 0;
}

.msa-split--reverse .msa-split__media {
	order: -1;
}

.msa-split__text {
	min-width: 0;
}

.msa-split__media {
	min-width: 0;
}

.msa-split__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--msa-radius);
}

/* Lifts the intro image so it overlaps the band above rather than sitting
   in a neat row with the text. */
.msa-media-slot--offset img {
	margin-top: -36px;
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.10);
}

/* Runs the image to the edge of the viewport on one side. */
.msa-split--bleed {
	gap: 64px;
}

.msa-media-slot--bleed img {
	border-radius: 0 var(--msa-radius) var(--msa-radius) 0;
}

.msa-split--reverse .msa-media-slot--bleed img {
	border-radius: var(--msa-radius) 0 0 var(--msa-radius);
}

.msa-logo-slot img {
	display: block;
	width: auto;
	max-width: 190px;
	height: auto;
}

/* ------------------------------------------------------------- Cards */

.msa-cards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 16px;
	margin-top: 26px;
	width: 100%;
}

.msa-card {
	padding: 22px 24px 24px;
	border: 1px solid var(--msa-hairline);
	border-top: 3px solid var(--msa-accent, var(--msa-crimson));
	border-radius: var(--msa-radius);
	background: var(--msa-page);
}

.msa-card__label p {
	margin: 0 0 6px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--msa-accent-text, var(--msa-crimson-text));
}

.msa-card__value .elementor-heading-title {
	margin: 0;
	font-family: var(--msa-display);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--msa-ink);
}

/* ---------------------------------------------------------- Features */

/* A grid of short "what you get" items. Sizes itself to the number of
   entries, so five reads as a deliberate 3 + 2 rather than a gap. */
.msa-features {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 18px;
	margin-top: 28px;
	width: 100%;
}

.msa-features--pair {
	grid-template-columns: repeat(2, minmax(0, 1fr));
}

.msa-feature {
	padding: 24px 24px 26px;
	border: 1px solid var(--msa-hairline);
	border-radius: var(--msa-radius);
	background: var(--msa-page);
	transition: border-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}

.msa-feature:hover {
	transform: translateY(-2px);
	border-color: var(--msa-accent, var(--msa-crimson));
	box-shadow: 0 12px 26px rgba(0, 0, 0, 0.07);
}

.msa-feature__title .elementor-heading-title {
	margin: 0 0 8px;
	font-family: var(--msa-display);
	font-size: 25px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--msa-accent-text, var(--msa-crimson-text));
}

.msa-feature__body p {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--msa-body-text);
}

/* ------------------------------------------------------- Button rows */

.msa-btn-row {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 26px;
	width: auto;
}

.msa-btn-row > .e-con-inner {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
	width: auto;
}

/* ----------------------------------------------------- Partner logos */

.msa-partner {
	flex-direction: row;
	align-items: center;
	gap: 16px;
	margin-top: 30px;
	padding-top: 22px;
	border-top: 1px solid var(--msa-hairline);
	width: 100%;
}

.msa-partner > .e-con-inner {
	flex-direction: row;
	align-items: center;
	gap: 16px;
	width: 100%;
}

.msa-partner--stacked,
.msa-partner--stacked > .e-con-inner {
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
}

.msa-partner--stacked {
	margin-top: 22px;
	padding-top: 18px;
	border-top: 1px solid rgba(0, 0, 0, 0.10);
}

.msa-partner__label p {
	margin: 0;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--msa-muted);
	white-space: nowrap;
}

/* --------------------------------------------------------------- Duo */

.msa-duo {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
	margin-top: 34px;
	align-items: start;
	width: 100%;
}

/* A small vertical offset so the two columns read as a pair rather than a
   table. Desktop only -- stacked it would just look like a gap. */
@media (min-width: 1025px) {
	.msa-duo--stagger .msa-steps--lower {
		margin-top: 52px;
	}
}

/* ------------------------------------------------------------- Steps */

.msa-steps {
	padding: 28px 28px 30px;
	border: 1px solid var(--msa-hairline);
	border-radius: var(--msa-radius);
	background: var(--msa-page);
	counter-reset: msa-step;
}

.msa-steps__title .elementor-heading-title {
	margin: 0 0 4px;
	font-family: var(--msa-display);
	font-size: 27px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--msa-ink);
}

.msa-steps__list {
	margin-top: 20px;
	width: 100%;
	gap: 0;
}

.msa-steps__item {
	position: relative;
	padding: 0 0 22px 56px;
	width: 100%;
}

.msa-steps__item:last-child {
	padding-bottom: 0;
}

/* Outlined numerals in the display face -- more graphic than a filled dot,
   and it echoes the badge treatment on event cards. */
.msa-steps__item::before {
	counter-increment: msa-step;
	content: counter(msa-step);
	position: absolute;
	top: -4px;
	left: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 38px;
	border: 2px solid var(--msa-accent, var(--msa-crimson));
	border-radius: 50%;
	font-family: var(--msa-display);
	font-size: 20px;
	line-height: 1;
	color: var(--msa-accent-text, var(--msa-crimson-text));
}

/* A hairline joining the numerals, so the sequence reads as one run. */
.msa-steps__item::after {
	content: "";
	position: absolute;
	top: 40px;
	left: 18px;
	bottom: 6px;
	width: 2px;
	background: var(--msa-hairline);
}

.msa-steps__item:last-child::after {
	display: none;
}

.msa-steps__heading .elementor-heading-title {
	margin: 0 0 5px;
	padding-top: 6px;
	font-family: var(--msa-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var(--msa-ink);
}

.msa-steps__body p {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--msa-body-text);
}

.msa-steps__body a {
	color: var(--msa-crimson-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* -------------------------------------------------------- Quick links */

/* Signposts to other pages. Card-shaped so a group of four reads as a set of
   destinations rather than a list of links. */
.msa-quicklinks {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 20px;
	margin-top: 28px;
	width: 100%;
}

.msa-quicklink {
	height: 100%;
	padding: 26px 24px 24px;
	border: 1px solid var(--msa-hairline);
	border-top: 3px solid var(--msa-accent, var(--msa-crimson));
	border-radius: var(--msa-radius);
	background: var(--msa-page);
	gap: 0;
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.msa-quicklink:hover {
	transform: translateY(-3px);
	box-shadow: 0 14px 30px rgba(0, 0, 0, 0.08);
}

.msa-quicklink__title .elementor-heading-title {
	margin: 0 0 10px;
	font-family: var(--msa-display);
	font-size: 25px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--msa-ink);
}

.msa-quicklink__body p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--msa-body-text);
}

.msa-quicklink .msa-btn-row {
	margin-top: 18px;
}

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

.msa-campus__address p {
	margin: 12px 0 0;
	font-size: 15px;
	line-height: 1.65;
	color: var(--msa-body-text);
}

.msa-campus__phone p {
	margin: 10px 0 0;
	font-size: 15px;
	font-weight: 500;
}

.msa-campus__phone a {
	color: var(--msa-accent-text, var(--msa-crimson-text));
	text-decoration: none;
	border-bottom: 1px solid currentColor;
}

.msa-campus .msa-btn-row {
	margin-top: 20px;
}

/* ------------------------------------------------ Speech bubble card */

/* Used where a named person is speaking to the reader, so it should read as
   their words rather than the organisation's. */
.msa-callout--bubble {
	position: relative;
	border-radius: 18px 18px 18px 4px;
}

.msa-callout--bubble::after {
	content: "";
	position: absolute;
	bottom: -12px;
	left: 0;
	width: 0;
	height: 0;
	border-top: 14px solid var(--msa-accent-soft, var(--msa-crimson-soft));
	border-right: 16px solid transparent;
}

.msa-bubble__person {
	width: auto;
	margin-bottom: 14px;
	gap: 0;
}

.msa-avatar-slot img {
	display: block;
	width: 84px;
	height: 84px;
	object-fit: cover;
	border-radius: 50%;
}

/* ----------------------------------------------------------- Timeline */

.msa-timeline {
	position: relative;
	margin-top: 34px;
	padding-left: 4px;
	width: 100%;
	gap: 0;
}

.msa-milestone {
	position: relative;
	width: 100%;
	padding: 0 0 30px 42px;
	border-left: 2px solid var(--msa-hairline);
	gap: 0;
}

.msa-milestone:last-child {
	border-left-color: transparent;
	padding-bottom: 0;
}

.msa-milestone::before {
	content: "";
	position: absolute;
	top: 8px;
	left: -8px;
	width: 14px;
	height: 14px;
	border: 3px solid var(--msa-accent, var(--msa-crimson));
	border-radius: 50%;
	background: var(--msa-page);
}

.msa-milestone__year .elementor-heading-title {
	margin: 0;
	font-family: var(--msa-display);
	font-size: 30px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.02em;
	color: var(--msa-accent-text, var(--msa-crimson-text));
}

.msa-milestone__title .elementor-heading-title {
	margin: 6px 0 6px;
	font-family: var(--msa-body);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var(--msa-ink);
}

.msa-milestone__body p {
	margin: 0;
	max-width: 70ch;
	font-size: 15px;
	line-height: 1.65;
	color: var(--msa-body-text);
}

/* Larger lead copy inside a panel. */
.msa-panel__lead p {
	margin: 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--msa-ink);
}

/* -------------------------------------------------------- Placeholder */

/* Marks copy that is a description of what belongs here rather than the copy
   itself. Visibly unfinished on purpose -- a legal page that looks complete
   but is not is worse than an obvious gap. */
.msa-placeholder p {
	margin: 8px 0 26px;
	padding: 12px 16px;
	border: 1px dashed rgba(0, 0, 0, 0.25);
	border-radius: 6px;
	max-width: 68ch;
	font-size: 14px;
	font-style: italic;
	line-height: 1.6;
	color: var(--msa-muted);
}

/* ---------------------------------------------------------- Form card */

/* A form given its own surface, so it reads as the thing to do on the page
   rather than something appended to the copy. */
.msa-formcard {
	padding: 30px 30px 32px;
	border: 1px solid var(--msa-hairline);
	border-top: 3px solid var(--msa-accent, var(--msa-crimson));
	border-radius: 14px;
	background: var(--msa-page);
	box-shadow: 0 16px 36px rgba(0, 0, 0, 0.07);
	gap: 0;
}

.msa-formcard__title .elementor-heading-title {
	margin: 0;
	font-family: var(--msa-body);
	font-size: 20px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	text-transform: none;
	color: var(--msa-ink);
}

.msa-formcard__intro p {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.62;
	color: var(--msa-body-text);
}

/* ---------------------------------------------------------- Assurance */

/* Short guarantees, set as ticks rather than prose. Repetition is the point:
   people do not believe a promise of anonymity the first time they read it. */
.msa-assurance {
	width: auto;
	margin-top: 26px;
	gap: 0;
}

.msa-assurance__list ul {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.msa-assurance__list li {
	position: relative;
	padding-left: 26px;
	font-size: 14px;
	font-weight: 500;
	color: var(--msa-ink);
}

.msa-assurance__list li::before {
	content: "";
	position: absolute;
	top: 5px;
	left: 2px;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--msa-accent, var(--msa-crimson));
	border-bottom: 2px solid var(--msa-accent, var(--msa-crimson));
	transform: rotate(-45deg);
}

/* ------------------------------------------------ Sub-brand colour use */

/* The department colours build recognition for particular MSA offerings, so
 * they appear where the subject is that offering and nowhere else. A page
 * still takes its section's colour, which is meaningful; grids of cards no
 * longer cycle through the palette as decoration.
 */

/* Neutral card surfaces rather than a different tint per card. */
.msa-person,
.msa-person.msa-accent--crimson,
.msa-person.msa-accent--teal,
.msa-person.msa-accent--blue,
.msa-person.msa-accent--yellow,
.msa-person.msa-accent--purple {
	background: var(--msa-neutral-soft, #F1F1EF);
}

/* The role line took the department colour, which was the loudest thing on an
   otherwise neutral card. */
.msa-person__role {
	color: var(--msa-body-text);
}

/* Portraits crop from the top, so heads are not cut off. */
.msa-person__portrait img {
	object-position: center top;
}

/* Navigation and contact details are not offerings, so they take the primary
   colour rather than a department one. */
.msa-mega__column {
	border-top-color: var(--msa-crimson);
}

.msa-footer__campus {
	border-top-color: var(--msa-crimson);
}

/* ------------------------------ Supports & Activities On Campus grid */

/* The one place the client asked to keep colour, mapped to the offering each
   card points at rather than to its position. Scoped to the pages that carry
   this block, so the same grid elsewhere stays neutral. */
body.msa-page--iahs-campus .msa-quicklinks > .msa-quicklink:nth-child(1),
body.msa-page--stoney-creek-campus .msa-quicklinks > .msa-quicklink:nth-child(1),
body.msa-page--student-centre .msa-quicklinks > .msa-quicklink:nth-child(1),
body.msa-page--iahs-campus .msa-quicklinks > .msa-quicklink:nth-child(2),
body.msa-page--stoney-creek-campus .msa-quicklinks > .msa-quicklink:nth-child(2),
body.msa-page--student-centre .msa-quicklinks > .msa-quicklink:nth-child(2) {
	--msa-accent: var(--msa-teal);
	--msa-accent-text: var(--msa-teal-text);
	--msa-accent-soft: var(--msa-teal-soft);
}

body.msa-page--iahs-campus .msa-quicklinks > .msa-quicklink:nth-child(3),
body.msa-page--stoney-creek-campus .msa-quicklinks > .msa-quicklink:nth-child(3),
body.msa-page--student-centre .msa-quicklinks > .msa-quicklink:nth-child(3) {
	--msa-accent: var(--msa-purple);
	--msa-accent-text: var(--msa-purple-text);
	--msa-accent-soft: var(--msa-purple-soft);
}

body.msa-page--iahs-campus .msa-quicklinks > .msa-quicklink:nth-child(4),
body.msa-page--stoney-creek-campus .msa-quicklinks > .msa-quicklink:nth-child(4),
body.msa-page--student-centre .msa-quicklinks > .msa-quicklink:nth-child(4) {
	--msa-accent: var(--msa-yellow);
	--msa-accent-text: var(--msa-yellow-text);
	--msa-accent-soft: var(--msa-yellow-soft);
	border-top-color: var(--msa-yellow-text);
}

/* ------------------------------------------- Page-specific requests */

/* Events: the tile view is what students want first, with the month grid
   under it. Both panels are rendered already, so this is a matter of showing
   them both and putting the list on top. */
body.msa-page--events .msa-eventviews.is-enhanced .msa-eventviews__tabs {
	display: none;
}

body.msa-page--events .msa-eventviews.is-enhanced {
	display: flex;
	flex-direction: column;
}

body.msa-page--events .msa-eventviews.is-enhanced .msa-eventviews__panel {
	display: block;
}

body.msa-page--events .msa-eventviews.is-enhanced .msa-eventviews__panel[data-view-panel="list"] {
	order: 1;
}

body.msa-page--events .msa-eventviews.is-enhanced .msa-eventviews__panel[data-view-panel="calendar"] {
	order: 2;
	margin-top: 48px;
}

/* --------------------------------- Round 2: sub-brand colour removals */

/* The client asked for the department colour to come out of particular blocks
 * while the page keeps its section colour elsewhere -- the hero band and the
 * heading underlines still read as Supports.
 *
 * Each block overrides the three accent variables rather than restating every
 * property that uses them, so borders, labels, rules and tick marks all follow
 * in one go and any rule added later follows too.
 *
 * Grey rather than crimson: these are content card grids, and the round-1
 * precedent for taking colour out of cards was the neutral treatment on the
 * people cards, not a swap to red. --msa-grey is in the primary palette and
 * passes AA as type on both white and cream.
 *
 * Only the four Supports pages appear here. Jobs, Why We Exist and Where We Are
 * were named in the notes too, but their pages already resolve to crimson --
 * Jobs through its accent override and the other two through About MSA -- so
 * there is no department colour left in them to remove.
 */

/* Valid Pass Dates -- HSR Bus Pass */
body.msa-page--hsr-bus-pass .msa-cards,

/* What Is Included -- Health & Dental */
body.msa-page--health-dental .msa-features,

/* What Is Available at Each Campus -- Equipment Loans */
body.msa-page--equipment-loans .msa-trio,

/* Why Use The Personal -- Home & Auto */
body.msa-page--home-auto .msa-features {
	--msa-accent: var(--msa-grey);
	--msa-accent-text: var(--msa-grey);
	--msa-accent-soft: var(--msa-neutral-soft);
}

/* ------------------------------------------- Round 2: homepage colour */

/* "Your students' association" reads as the MSA speaking, not as a Student
   Support item, so it takes the primary red. The eyebrow carries an accent
   class in the template; overriding the variable leaves that markup alone. */
body.home .msa-supports .msa-eyebrow.msa-accent--teal {
	--msa-accent-text: var(--msa-crimson-text);
}

/* The Cellar is an MSA space rather than a department, so it comes out of the
   palette and onto the primary greys. It is the only purple item in the
   homepage accordion; if another is ever added, scope this to it by name. */
body.home .msa-accordion__item.msa-accent--purple {
	--msa-accent: var(--msa-grey);
	--msa-accent-text: var(--msa-grey);
	--msa-accent-soft: var(--msa-neutral-soft);
}

/* The cutout portraits on the homepage team, on the advocacy blue the client
   asked to try. The cards themselves stay neutral -- only the area behind the
   cutout takes the colour, which is what makes the cutout read. */
body.home .msa-team .msa-person__portrait {
	background: var(--msa-blue);
}

/* ------------------------------------------ Round 2: plugin overrides */

/* Important Documents: the extension badge comes off the row. Round 1 asked for
   a PDF thumbnail here and round 2 replaced that with removing the icon, so the
   badge goes rather than being rebuilt as a preview. */
.msa-doc__icon {
	display: none;
}

/* The land acknowledgement is the MSA's own words, so it is not set as a
   quotation. The plugin draws the marks as pseudo-elements. */
.msa-footer__land-text::before,
.msa-footer__land-text::after {
	content: none;
}

/* ---------------------------------------------------------- Form index */

/* The listing on the Forms parent page, which msa-forms fills in. Every form
   page sits under it, so the breadcrumb on a form has somewhere real to point --
   the top-level-page rule from the August 14 meeting applies here too. */
.msa-form-index {
	margin: 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.msa-form-index li {
	margin: 0;
	border-bottom: 1px solid var(--msa-hairline);
}

.msa-form-index a {
	display: block;
	padding: 16px 4px;
	font-size: 17px;
	font-weight: 500;
	color: var(--msa-ink);
	text-decoration: none;
	transition: color 0.18s ease, padding-left 0.18s ease;
}

.msa-form-index a:hover {
	color: var(--msa-accent-text, var(--msa-crimson-text));
	padding-left: 10px;
}

@media (prefers-reduced-motion: reduce) {
	.msa-form-index a {
		transition: none;
	}

	.msa-form-index a:hover {
		padding-left: 4px;
	}
}

/* ------------------------------------------------------------ Outlets */

/* A place you can visit: photo, what it is, where it is, when it is open. */
.msa-outlets {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin-top: 28px;
	width: 100%;
}

.msa-outlet {
	height: 100%;
	overflow: hidden;
	border: 1px solid var(--msa-hairline);
	border-radius: var(--msa-radius);
	background: var(--msa-page);
	gap: 0;
	padding: 0;
}

.msa-outlet__media {
	width: 100%;
	gap: 0;
}

.msa-outlet__media img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.msa-outlet__name .elementor-heading-title {
	margin: 0;
	padding: 22px 24px 0;
	font-family: var(--msa-display);
	font-size: 27px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--msa-ink);
}

.msa-outlet__body p {
	margin: 10px 0 0;
	padding: 0 24px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--msa-body-text);
}

.msa-outlet__place p {
	margin: 16px 0 0;
	padding: 0 24px;
	font-size: 13px;
	font-weight: 500;
	color: var(--msa-accent-text, var(--msa-crimson-text));
}

.msa-outlet__hours ul {
	margin: 12px 0 0;
	padding: 14px 24px 0;
	border-top: 1px solid var(--msa-hairline);
	list-style: none;
}

.msa-outlet__hours li {
	margin: 0 0 6px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--msa-body-text);
}

.msa-outlet .msa-btn-row {
	margin: 18px 24px 24px;
}

.msa-outlet__hours + .msa-btn-row {
	margin-top: 16px;
}

/* Bottom padding when a card has no button. */
.msa-outlet__hours:last-child ul {
	padding-bottom: 24px;
}

/* ------------------------------------------------------------- Spaces */

.msa-spaces {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	margin-top: 28px;
	width: 100%;
}

.msa-space {
	height: 100%;
	padding: 24px 24px 22px;
	border: 1px solid var(--msa-hairline);
	border-left: 3px solid var(--msa-accent, var(--msa-crimson));
	border-radius: var(--msa-radius);
	background: var(--msa-page);
	gap: 0;
}

.msa-space__name .elementor-heading-title {
	margin: 0 0 8px;
	font-family: var(--msa-display);
	font-size: 24px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--msa-ink);
}

.msa-space__body p {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--msa-body-text);
}

.msa-space__place p {
	margin: 14px 0 0;
	font-size: 13px;
	font-weight: 500;
	color: var(--msa-muted);
}

.msa-space .msa-btn-row {
	margin-top: 16px;
}

/* A callout that spans a full section rather than a column. */
.msa-callout--wide {
	margin-top: 26px;
	width: 100%;
}

/* --------------------------------------------------- Embeds and media */

/* Third-party embeds -- BambooHR job listings, and anything similar later.
   Given room to breathe and a floor so an empty embed does not collapse. */
.msa-embed-wrap {
	margin-top: 26px;
}

.msa-embed {
	min-height: 120px;
}

.msa-video {
	margin-bottom: 8px;
}

.msa-video .elementor-wrapper {
	border-radius: var(--msa-radius);
	overflow: hidden;
}

.msa-gallery {
	margin-top: 28px;
}

.msa-gallery .gallery-item img {
	border-radius: var(--msa-radius);
}

.msa-form {
	margin-top: 24px;
}

/* A three-up variant, for sections with three destinations rather than four. */
.msa-quicklinks--trio {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* ------------------------------------------------------ Gravity Forms */

/* Gravity Forms 3.x ships the Orbital theme, which exposes its design as CSS
   custom properties. Setting those does most of the work and survives plugin
   updates far better than overriding its selectors. The explicit rules below
   cover the parts that matter most, for any version where those variables are
   named differently. */

.gform_wrapper {
	--gf-color-primary: var(--msa-crimson);
	--gf-color-primary-rgb: 196, 32, 49;
	--gf-color-primary-contrast: #FFFFFF;
	--gf-color-primary-darker: var(--msa-crimson-text);
	--gf-color-primary-lighter: #D84453;

	--gf-color-out-ctrl-light-darker: var(--msa-hairline);
	--gf-color-out-ctrl-dark: var(--msa-body-text);

	--gf-ctrl-radius: 10px;
	--gf-ctrl-btn-radius: var(--msa-pill);
	--gf-ctrl-border-color: var(--msa-hairline);
	--gf-ctrl-bg-color: var(--msa-page);

	--gf-font-family-base: var(--msa-body);
	--gf-font-size-primary: 15px;

	--gf-label-color-primary: var(--msa-ink);

	font-family: var(--msa-body);
}

/* Labels and help text */

.gform_wrapper .gfield_label {
	margin-bottom: 7px;
	font-family: var(--msa-body);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.4;
	color: var(--msa-ink);
}

.gform_wrapper .gfield_required {
	color: var(--msa-crimson-text);
}

.gform_wrapper .gfield_description {
	padding-top: 6px;
	font-size: 13px;
	line-height: 1.55;
	color: var(--msa-muted);
}

/* Fields */

.gform_wrapper .gfield input[type="text"],
.gform_wrapper .gfield input[type="email"],
.gform_wrapper .gfield input[type="tel"],
.gform_wrapper .gfield input[type="url"],
.gform_wrapper .gfield input[type="number"],
.gform_wrapper .gfield input[type="password"],
.gform_wrapper .gfield select,
.gform_wrapper .gfield textarea {
	width: 100%;
	padding: 12px 16px;
	border: 1px solid var(--msa-hairline);
	border-radius: 10px;
	background: var(--msa-page);
	font-family: var(--msa-body);
	font-size: 15px;
	line-height: 1.5;
	color: var(--msa-ink);
	box-shadow: none;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.gform_wrapper .gfield textarea {
	min-height: 150px;
	resize: vertical;
}

.gform_wrapper .gfield select {
	height: auto;
	min-height: 48px;
	appearance: none;
	-webkit-appearance: none;
	padding-right: 42px;
	/* Chevron drawn rather than loaded, so there is no asset to lose. */
	background-image:
		linear-gradient(45deg, transparent 50%, var(--msa-body-text) 50%),
		linear-gradient(135deg, var(--msa-body-text) 50%, transparent 50%);
	background-position:
		calc(100% - 21px) calc(50% + 2px),
		calc(100% - 16px) calc(50% + 2px);
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.gform_wrapper .gfield input:focus,
.gform_wrapper .gfield select:focus,
.gform_wrapper .gfield textarea:focus {
	outline: none;
	border-color: var(--msa-accent, var(--msa-crimson));
	box-shadow: 0 0 0 3px var(--msa-accent-soft, var(--msa-crimson-soft));
}

.gform_wrapper .gfield input::placeholder,
.gform_wrapper .gfield textarea::placeholder {
	color: var(--msa-muted);
	opacity: 1;
}

/* Radios and checkboxes */

.gform_wrapper .gfield input[type="radio"],
.gform_wrapper .gfield input[type="checkbox"] {
	accent-color: var(--msa-accent, var(--msa-crimson));
	width: 18px;
	height: 18px;
}

.gform_wrapper .gfield_radio label,
.gform_wrapper .gfield_checkbox label {
	font-size: 15px;
	color: var(--msa-body-text);
}

/* Submit button.
   Matched to the site's own buttons rather than left as a form control: dark
   pill, crimson on hover, display face.

   Gravity Forms 2.7 ships the "orbital" theme, which paints the button from its
   own custom properties -- the background comes out of --gf-ctrl-btn-bg-color-primary,
   by way of a --gf-local-bg-color it sets on the button itself. Fighting those
   selectors is a losing game across GF updates, so the tokens are set instead and
   GF's own rules do the painting. The token block is declared on
   .gform_wrapper.gform-theme so it outweighs GF's own .gform-theme--framework.

   The rules below it still carry the things GF has no token for: uppercase,
   letter-spacing, and the flex centring. */

.gform_wrapper.gform-theme {
	--gf-ctrl-btn-bg-color-primary: var(--msa-ink);
	--gf-ctrl-btn-bg-color-hover-primary: var(--msa-crimson);
	--gf-ctrl-btn-bg-color-focus-primary: var(--msa-ink);
	--gf-ctrl-btn-bg-color-disabled-primary: var(--msa-ink);

	--gf-ctrl-btn-color-primary: var(--msa-white);
	--gf-ctrl-btn-color-hover-primary: var(--msa-white);
	--gf-ctrl-btn-color-focus-primary: var(--msa-white);

	--gf-ctrl-btn-border-color-primary: transparent;
	--gf-ctrl-btn-border-color-hover-primary: transparent;

	--gf-ctrl-btn-font-family: var(--msa-display);
	--gf-ctrl-btn-font-size: 19px;
	--gf-ctrl-btn-font-weight: 400;

	--gf-ctrl-btn-radius: var(--msa-pill);
	--gf-ctrl-btn-shadow: none;
	--gf-ctrl-btn-shadow-hover: none;
	--gf-ctrl-btn-shadow-focus: none;
}

/*
 * Size, spacing and case have to be declared on the button rather than the
 * wrapper: GF sets those tokens again on the button's own size variant, so a
 * wrapper-level value loses. The colour and typeface tokens above have no such
 * per-button rule, which is why they belong at wrapper level. The class is
 * repeated to clear GF's variant selector.
 */
.gform_wrapper .gform_button.gform_button,
.gform_wrapper button.gform_button.gform_button,
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_page_footer input[type="submit"] {
	--gf-ctrl-btn-font-size: 19px;
	--gf-ctrl-btn-size: 48px;
	--gf-ctrl-btn-padding-x: 30px;
	--gf-ctrl-btn-text-transform: uppercase;
	--gf-ctrl-btn-letter-spacing: 0.08em;
}

.gform_wrapper .gform_footer {
	margin-top: 26px;
	padding: 0;
}

.gform_wrapper .gform_button.gform_button,
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_page_footer input[type="submit"],
.gform_wrapper button.gform_button.gform_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: auto;
	min-height: 48px;
	padding: 0 30px;
	border: 0;
	border-radius: var(--msa-pill);
	background: var(--msa-ink);
	font-family: var(--msa-display);
	font-size: 19px;
	font-weight: 400;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1;
	color: var(--msa-white);
	cursor: pointer;
	box-shadow: none;
	transition: background-color 0.2s ease;
}

.gform_wrapper .gform_button.gform_button:hover,
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_page_footer input[type="submit"]:hover,
.gform_wrapper button.gform_button.gform_button:hover {
	background: var(--msa-crimson);
	color: var(--msa-white);
}

.gform_wrapper .gform_button:focus-visible,
.gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.gform_wrapper button.gform_button:focus-visible {
	outline: 2px solid var(--msa-crimson);
	outline-offset: 3px;
}

/* Validation */

.gform_wrapper .gform_validation_errors {
	margin-bottom: 22px;
	padding: 16px 20px;
	border: 1px solid var(--msa-crimson);
	border-radius: var(--msa-radius);
	background: var(--msa-crimson-soft);
	box-shadow: none;
}

.gform_wrapper .gform_validation_errors h2,
.gform_wrapper .gform_validation_errors > h2.gform_submission_error {
	margin: 0;
	font-family: var(--msa-body);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--msa-crimson-text);
}

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
	border-color: var(--msa-crimson);
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	margin-top: 8px;
	padding: 8px 12px;
	border: 0;
	border-left: 3px solid var(--msa-crimson);
	border-radius: 0;
	background: transparent;
	font-size: 13px;
	line-height: 1.5;
	color: var(--msa-crimson-text);
}

/* Confirmation */

.gform_confirmation_message {
	padding: 20px 24px;
	border: 1px solid var(--msa-hairline);
	border-left: 4px solid var(--msa-accent, var(--msa-crimson));
	border-radius: var(--msa-radius);
	background: var(--msa-page);
	font-size: 15px;
	line-height: 1.65;
	color: var(--msa-body-text);
}

/* Inside a form card the panel is already white, so the fields take the
   tinted background to stay distinguishable from it. */
.msa-formcard .gform_wrapper .gfield input[type="text"],
.msa-formcard .gform_wrapper .gfield input[type="email"],
.msa-formcard .gform_wrapper .gfield select,
.msa-formcard .gform_wrapper .gfield textarea {
	background: var(--msa-field, #F4F4F2);
}

@media (prefers-reduced-motion: reduce) {
	.gform_wrapper .gfield input,
	.gform_wrapper .gfield select,
	.gform_wrapper .gfield textarea,
	.gform_wrapper .gform_button,
	.gform_wrapper .gform_footer input[type="submit"] {
		transition: none;
	}
}

/* -------------------------------------------------- Hero backgrounds */

/* The doodle pattern on the interior hero.
 *
 * The artwork is used as a mask rather than as a picture. The doodles are drawn
 * as black line art, and only their shape is taken -- the colour comes from this
 * rule. That is what lets one file work on all five section colours, and it is
 * why a sixth colour would need no new artwork.
 *
 * Each section gets its own set, drawn from its own subjects: a stethoscope and a
 * calculator on Supports, a megaphone on Advocacy, balloons on Clubs. The geometry
 * is shared, so a set is just a list of eight images and nothing else changes.
 *
 * On placement: hero content sits bottom-left, so the pattern covers the top band
 * across the full width and then the right-hand side, which is the space that is
 * actually free. Several marks are positioned past an edge on purpose -- they
 * crop, which reads as a pattern carrying on beyond the hero rather than a row of
 * stickers arranged inside it.
 */

@supports (mask-image: linear-gradient(#000, #000)) or (-webkit-mask-image: linear-gradient(#000, #000)) {

	/* ------------------------------------------- The mechanism */

	.msa-ihero--bg-fill::after,
	.msa-ihero--bg-dark::after,
	.msa-ihero--bg-crimson::after {
		content: "";
		position: absolute;
		inset: 0;
		pointer-events: none;
		z-index: 0;
		background-color: rgba(255, 255, 255, var(--hero-doodle-alpha, 0.17));

		/* Eight slots, shared by every set: a run across the top, then down the
		   right. The last one crops off the bottom edge. */
		--hero-sizes:
			280px auto, 120px auto, 85px auto, 110px auto,
			80px auto, 110px auto, 90px auto, 140px auto;

		--hero-spots:
			right -70px top -90px,
			left 30px top -34px,
			left 230px top 18px,
			left 430px top -20px,
			left 640px top 30px,
			right 250px top 44px,
			right 150px top 150px,
			right 60px bottom -30px;

		-webkit-mask-image: var(--hero-marks);
		mask-image: var(--hero-marks);

		/* One value covers every layer -- the list repeats to fit. */
		-webkit-mask-repeat: no-repeat;
		mask-repeat: no-repeat;

		-webkit-mask-size: var(--hero-sizes);
		mask-size: var(--hero-sizes);

		-webkit-mask-position: var(--hero-spots);
		mask-position: var(--hero-spots);
	}

	/* Over a photograph the pattern would fight the image, and the scrim is
	   already separating the text from it. */
	.msa-ihero--bg-image::after {
		display: none;
	}

	/* ------------------------------------------------- The sets */

	/* The accent class sits on the hero itself, not just the body, so a widget
	   with its accent overridden takes the matching set rather than the one its
	   page would otherwise give it. */

	/* About MSA, Get Involved, Jobs, the Student Centre: the MSA itself, its
	   people and its places. */
	.msa-ihero--bg-fill.msa-accent--crimson::after,
	.msa-ihero--bg-dark.msa-accent--crimson::after,
	.msa-ihero--bg-crimson::after {
		--hero-marks:
			url("assets/hero-msa-doodle.png"),
			url("assets/hero-heart.png"),
			url("assets/hero-speech-bubble.png"),
			url("assets/hero-crown.png"),
			url("assets/hero-clouds.png"),
			url("assets/hero-where-we-are-push-pin-location.png"),
			url("assets/hero-where-we-are-location-marker.png"),
			url("assets/hero-msa-banner.png");
	}

	/* Advocacy: voice, ideas and the business of governing. */
	.msa-ihero--bg-fill.msa-accent--blue::after,
	.msa-ihero--bg-dark.msa-accent--blue::after {
		--hero-marks:
			url("assets/hero-advocacy-megaphone.png"),
			url("assets/hero-amm-banner.png"),
			url("assets/hero-lightbulb-idea.png"),
			url("assets/hero-paper-airplane.png"),
			url("assets/hero-lightning-bolt.png"),
			url("assets/hero-peace-symbol.png"),
			url("assets/hero-pencil-drawing-doodle.png"),
			url("assets/hero-textbook-reading.png");
	}

	/* Supports: one mark for each thing the section actually offers. */
	.msa-ihero--bg-fill.msa-accent--teal::after,
	.msa-ihero--bg-dark.msa-accent--teal::after {
		--hero-marks:
			url("assets/hero-health-dental-stethoscope.png"),
			url("assets/hero-equipment-loan-calculator.png"),
			url("assets/hero-health-dental-tooth-dentist.png"),
			url("assets/hero-legal-counselling-gavel.png"),
			url("assets/hero-grad-photos-graduation-cap.png"),
			url("assets/hero-equipment-loan-safety-glasses.png"),
			url("assets/hero-textbook-reading.png"),
			url("assets/hero-grad-photos-camera.png");
	}

	/* Clubs & Communities, the one page yellow is kept for. */
	.msa-ihero--bg-fill.msa-accent--yellow::after,
	.msa-ihero--bg-dark.msa-accent--yellow::after {
		--hero-marks:
			url("assets/hero-event-balloons-fun.png"),
			url("assets/hero-flowers.png"),
			url("assets/hero-event-music-notes.png"),
			url("assets/hero-confetti-doodle.png"),
			url("assets/hero-heart.png"),
			url("assets/hero-peace-symbol.png"),
			url("assets/hero-pencil-drawing-doodle.png"),
			url("assets/hero-speech-bubble.png");
	}

	/* Events. The Cellar and Brewed Awakenings would also land on purple, but
	   both currently redirect to the Student Centre, so this set is events only.
	   If those pages come back, they want their own coffee and beer marks. */
	.msa-ihero--bg-fill.msa-accent--purple::after,
	.msa-ihero--bg-dark.msa-accent--purple::after {
		--hero-marks:
			url("assets/hero-event-calendar-to-do.png"),
			url("assets/hero-event-music-notes.png"),
			url("assets/hero-confetti-doodle.png"),
			url("assets/hero-event-party-popper-fun.png"),
			url("assets/hero-lightning-bolt.png"),
			url("assets/hero-crown.png"),
			url("assets/hero-event-balloons-fun.png"),
			url("assets/hero-event-speaker-music.png");
	}

	/* The olive is the lightest of the five fills, so the pattern needs a little
	   more presence there to read at all. */
	.msa-ihero--bg-fill.msa-accent--yellow::after {
		--hero-doodle-alpha: 0.22;
	}

	/* --------------------------------------------- Narrower screens */

	/* Compact heroes carry as much content in far less height -- a profile shows a
	   role and pronouns under the title -- so the top band is not free and the
	   pattern keeps to the right. Five marks rather than eight, and the geometry
	   is all that changes: each set still supplies its own images, and the extras
	   are simply positioned off the canvas. */
	.msa-ihero--sm::after,
	.msa-ihero--sm.msa-ihero--bg-fill::after {
		--hero-sizes:
			240px auto, 0 0, 0 0, 0 0,
			0 0, 110px auto, 90px auto, 130px auto;

		--hero-spots:
			right -58px top -70px,
			-9999px -9999px,
			-9999px -9999px,
			-9999px -9999px,
			-9999px -9999px,
			right 235px top 40px,
			right 140px top 130px,
			right 54px bottom -26px;
	}

	@media (max-width: 1199px) {
		/* Less width to play with, so the marks along the middle of the top band
		   come out rather than crowding in toward the title. */
		.msa-ihero--bg-fill::after,
		.msa-ihero--bg-dark::after,
		.msa-ihero--bg-crimson::after,
		.msa-ihero--sm::after {
			--hero-sizes:
				230px auto, 100px auto, 0 0, 0 0,
				0 0, 95px auto, 80px auto, 115px auto;

			--hero-spots:
				right -60px top -80px,
				left 24px top -30px,
				-9999px -9999px,
				-9999px -9999px,
				-9999px -9999px,
				right 200px top 40px,
				right 120px top 132px,
				right 44px bottom -28px;
		}
	}

	@media (max-width: 767px) {
		/* Two marks, both cropping off an edge, well clear of the title. */
		.msa-ihero--bg-fill::after,
		.msa-ihero--bg-dark::after,
		.msa-ihero--bg-crimson::after,
		.msa-ihero--sm::after {
			--hero-doodle-alpha: 0.15;

			--hero-sizes:
				180px auto, 78px auto, 0 0, 0 0,
				0 0, 0 0, 0 0, 0 0;

			--hero-spots:
				right -54px top -58px,
				left 18px top -20px,
				-9999px -9999px,
				-9999px -9999px,
				-9999px -9999px,
				-9999px -9999px,
				-9999px -9999px,
				-9999px -9999px;
		}

		.msa-ihero--bg-fill.msa-accent--yellow::after {
			--hero-doodle-alpha: 0.19;
		}
	}
}

/* ------------------------------------------------------------ Doodles */

/* Hand-drawn accents from the brand guidelines.
 *
 * These attach to something -- a heading's words, or a button -- rather than
 * floating at coordinates measured from a section. That is the whole design:
 * a doodle positioned against a box that always exists cannot end up on top of
 * text or stranded in empty space, and it keeps pointing at the right thing
 * when the content around it changes.
 *
 * The anchor is always the text box itself, not the column it sits in, so a
 * mark placed to the right of a heading sits beside the last word rather than
 * out at the edge of the layout.
 *
 * Two ways in:
 *
 *   1. The utility below. Add classes to a heading or button widget in
 *      Elementor under Advanced > CSS Classes, e.g.
 *      "msa-mark msa-mark--sparkle msa-mark--right".
 *
 *   2. The homepage attachments further down, wired up here so the page
 *      templates do not have to change.
 *
 * Image paths are relative, so they resolve against wherever this stylesheet
 * lives -- the EB Custom CSS File plugin keeps both in the same folder. That
 * keeps them working on the staging subdirectory and after the move to the
 * live domain, with no path to update.
 */

/* ------------------------------------------------------ The mechanism */

/* One class covers headings and buttons: a heading widget contains
   .elementor-heading-title and a button widget contains .elementor-button, so
   whichever is present is the one that matches. */

.msa-mark .elementor-heading-title,
.msa-mark .elementor-button {
	position: relative;
}

/* Shrink a heading to its text so a mark beside it lands next to the words. */
.msa-mark .elementor-heading-title {
	display: inline-block;
}

.msa-mark .elementor-heading-title::before,
.msa-mark .elementor-button::after {
	content: "";
	position: absolute;
	display: none;
	width: var(--mark-w, 92px);
	aspect-ratio: var(--mark-ratio, 1);
	background-image: var(--mark-img);
	background-repeat: no-repeat;
	background-position: center;
	background-size: contain;
	pointer-events: none;
	opacity: var(--mark-opacity, 1);
	transform: rotate(var(--mark-rotate, 0deg));
	z-index: 1;
}

/* Below 1100px a mark beside a heading has nowhere to go without crowding the
   text, so they are left out rather than squeezed in. */
@media (min-width: 1100px) {
	.msa-mark .elementor-heading-title::before,
	.msa-mark .elementor-button::after {
		display: block;
	}
}

/* --------------------------------------------------------- Which one */

.msa-mark--accent-marks      { --mark-img: url("assets/accent-marks.png");      --mark-ratio: 1.08; }
.msa-mark--arrow-curve-red   { --mark-img: url("assets/arrow-curve-red.png");   --mark-ratio: 0.95; }
.msa-mark--arrow-loop-down   { --mark-img: url("assets/arrow-loop-down.png");   --mark-ratio: 1.07; }
.msa-mark--arrow-loop-right  { --mark-img: url("assets/arrow-loop-right.png");  --mark-ratio: 1.18; }
.msa-mark--arrow-swoosh-up   { --mark-img: url("assets/arrow-swoosh-up.png");   --mark-ratio: 1.07; }
.msa-mark--burst-confetti    { --mark-img: url("assets/burst-confetti.png");    --mark-ratio: 0.87; }
.msa-mark--calendar          { --mark-img: url("assets/calendar.png");          --mark-ratio: 0.89; }
.msa-mark--circle-scribble   { --mark-img: url("assets/circle-scribble.png");   --mark-ratio: 1.04; }
.msa-mark--crown             { --mark-img: url("assets/crown.png");             --mark-ratio: 0.99; }
.msa-mark--heart-red         { --mark-img: url("assets/heart-red.png");         --mark-ratio: 1.03; }
.msa-mark--megaphone         { --mark-img: url("assets/megaphone.png");         --mark-ratio: 0.97; }
.msa-mark--rays-teal         { --mark-img: url("assets/rays-teal.png");         --mark-ratio: 1.12; }
.msa-mark--rays-yellow       { --mark-img: url("assets/rays-yellow.png");       --mark-ratio: 1.22; }
.msa-mark--sparkle           { --mark-img: url("assets/sparkle.png");           --mark-ratio: 0.93; }
.msa-mark--speech-bubble-red { --mark-img: url("assets/speech-bubble-red.png"); --mark-ratio: 0.84; }
.msa-mark--speech-bubbles    { --mark-img: url("assets/speech-bubbles.png");    --mark-ratio: 1.18; }
.msa-mark--squiggle-red      { --mark-img: url("assets/squiggle-red.png");      --mark-ratio: 3.24; --mark-w: 150px; }

/* ------------------------------------------------------------- Where */

/* All four are measured from the edges of the anchor, so they stay attached
   however long the heading or button label turns out to be. */

.msa-mark--right .elementor-heading-title::before,
.msa-mark--right .elementor-button::after {
	left: var(--mark-end-x, 100%);
	top: var(--mark-end-y, 50%);
	margin-left: var(--mark-gap, 18px);
	transform: translateY(-50%) rotate(var(--mark-rotate, 0deg));
}

.msa-mark--left .elementor-heading-title::before,
.msa-mark--left .elementor-button::after {
	right: calc(100% + var(--mark-gap, 18px));
	top: 50%;
	margin-top: calc(var(--mark-w, 92px) / var(--mark-ratio, 1) / -2);
}

.msa-mark--above .elementor-heading-title::before,
.msa-mark--above .elementor-button::after {
	bottom: calc(100% + var(--mark-gap, 10px));
	right: var(--mark-x, -30px);
}

.msa-mark--below .elementor-heading-title::before,
.msa-mark--below .elementor-button::after {
	top: calc(100% + var(--mark-gap, 6px));
	left: var(--mark-x, 0px);
}

/* Sizes, for when the default is wrong. */

.msa-mark--sm { --mark-w: 62px; }
.msa-mark--lg { --mark-w: 130px; }

/* ------------------------------------------------ Homepage attachments */

/* Each of these hangs off a heading that is rendered by the page or by one of
   the MSA plugins, so every one has something to hold onto.
   To move a mark, change its --mark-gap or --mark-x. To swap it, change the
   image. To remove it, delete its block. */

@media (min-width: 1100px) {

	/* "Here To Support You" -- an arrow off the end of the heading, aimed at
	   the accordion beside it. The underline already uses ::after on this
	   heading, so the mark uses ::before. */
	body.home .msa-supports .msa-heading--underline .elementor-heading-title::before {
		content: "";
		position: absolute;
		display: block;
		left: var(--mark-end-x, 100%);
		top: var(--mark-end-y, 50%);
		margin-left: 26px;
		transform: translateY(-50%);
		width: 104px;
		aspect-ratio: 1.18;
		background: url("assets/arrow-loop-right.png") no-repeat center / contain;
		pointer-events: none;
		z-index: 1;
	}

	/* The section headings below are rendered by the events, people and
	   stories plugins, which all use .msa-section-heading. Shrinking the
	   heading to its text keeps each mark beside the words. */
	body.home .msa-section-heading::after {
		content: "";
		position: absolute;
		display: block;
		pointer-events: none;
		background-repeat: no-repeat;
		background-position: center;
		background-size: contain;
		z-index: 1;
	}

	/* Upcoming Events: yellow rays above the end of the heading. */
	body.home .msa-section--cream:not(.msa-edge--fill-below) .msa-section-heading::after {
		bottom: calc(100% + 2px);
		right: -46px;
		width: 66px;
		aspect-ratio: 1.22;
		background-image: url("assets/rays-yellow.png");
	}

	/* Student Executive Team: a sparkle off the end of the heading. */
	body.home .msa-section--white:not(.msa-supports) .msa-section-heading::after {
		left: var(--mark-end-x, 100%);
		top: var(--mark-end-y, 50%);
		margin-left: 22px;
		transform: translateY(-50%);
		width: 82px;
		aspect-ratio: 0.93;
		background-image: url("assets/sparkle.png");
	}

	/* Student Stories: the heading takes the shared squiggle rule like every
	   other section heading, so this mark sits beside the words instead. */
	body.home .msa-edge--fill-below .msa-section-heading::after {
		left: var(--mark-end-x, 100%);
		top: var(--mark-end-y, 50%);
		margin-left: 22px;
		transform: translateY(-50%);
		width: 72px;
		aspect-ratio: 1.03;
		background-image: url("assets/heart-red.png");
	}

	/* Help Us Improve: the megaphone is the one doodle drawn light enough to
	   read on crimson. */
	body.home .msa-feedback .msa-heading--underline .elementor-heading-title::before {
		content: "";
		position: absolute;
		display: block;
		left: var(--mark-end-x, 100%);
		top: var(--mark-end-y, 50%);
		margin-left: 24px;
		transform: translateY(-50%);
		width: 78px;
		aspect-ratio: 0.97;
		background: url("assets/megaphone.png") no-repeat center / contain;
		pointer-events: none;
		z-index: 1;
	}

	/* ---------------------------------------- Rules, not placements */

	/* These hang off structures rather than pages, so a doodle turns up
	   wherever that structure is used. Adding the block to a new page brings
	   the doodle with it, and no page needs its own rule. */

	/* Every interior page and every detail page opens with this heading, so a
	   mark here is the one doodle that carries across the whole site. Yellow
	   is the only part of the palette that reads on all five section fills --
	   teal on teal or crimson on crimson would disappear. */
	.msa-ihero__title {
		position: relative;
		display: inline-block;

		/* Declared here rather than on the pseudo-element so the measuring
		   script can read them too -- it needs the size and the lift to work out
		   how far the mark reaches, and one source of truth beats two. */
		--ihero-mark-w: 1.12em;
		--ihero-mark-lift: 0.8em;
		--ihero-mark-gap: 2px;
	}

	/* The rays are turned into the corner of the last word rather than set
	 * beside it, so they read as coming out of the text -- a small crown off
	 * the top right rather than a separate sunburst parked next to it.
	 *
	 * Two knobs, and nothing else needs touching to adjust it:
	 *   --ihero-mark-lift  how far above the line the rays sit
	 *   --ihero-mark-gap   how close in they tuck
	 *
	 * The lift is in em, so it tracks the title as it shrinks down the
	 * breakpoints instead of drifting away from smaller headings. The script
	 * measuring --mark-end-y gives the middle of the last line, which is what
	 * the lift is measured up from. */
	.msa-ihero__title::after {
		content: "";
		position: absolute;
		display: block;

		left: var(--mark-end-x, 100%);
		top: var(--mark-end-y, 50%);
		margin-left: var(--ihero-mark-gap);
		/* Sized in em as well, so it keeps its proportion to the heading across
		   the whole clamp(34px, 4vw, 56px) range rather than looking oversized
		   on the smaller titles. */
		width: var(--ihero-mark-w);
		aspect-ratio: 1.22;
		transform: translateY(calc(-50% - var(--ihero-mark-lift))) rotate(45deg);
		background: url("assets/rays-yellow.png") no-repeat center / contain;
		pointer-events: none;
		z-index: 1;
	}

	/* A wrapped heading whose line above runs past the end of the last one
	 * leaves no clear air for the mark to hang in, and with line-height 1
	 * there is no leading to hide in either -- so it would sit on the text.
	 * The script measuring the text end works this out and sets the class.
	 *
	 * The answer is to keep the mark inside the last line box: no lift, and
	 * small enough that the corners of the turned square stay under the
	 * baseline of the line above. It stays angled, so it still reads as the
	 * same flourish, just tucked in rather than hanging off the corner. */
	.msa-ihero__title.msa-mark-crowded {
		--ihero-mark-w: 0.76em;
		--ihero-mark-lift: 0px;
		--ihero-mark-gap: 8px;
	}

	/* --------------------------------------------- Homepage extras */

	/* The button under the Here To Support You copy. */
	body.home .msa-supports__intro .msa-btn-wrap .elementor-button {
		position: relative;
	}

	body.home .msa-supports__intro .msa-btn-wrap .elementor-button::after {
		content: "";
		position: absolute;
		display: block;
		left: calc(100% + 18px);
		top: -24px;
		width: 76px;
		aspect-ratio: 1.08;
		background: url("assets/accent-marks.png") no-repeat center / contain;
		pointer-events: none;
		z-index: 1;
	}

	/* ------------------------------------------------ Across the site */

	/* These hang off classes that recur on nearly every interior page, so the
	   doodles carry through the site rather than stopping at the homepage. */

	/* The crimson "get in touch" band at the foot of every interior page.
	   Speech bubbles suit what the section is for, and they are drawn light
	   enough to read on crimson -- most of the set would disappear. */
	.msa-help__text .msa-heading--on-dark .elementor-heading-title {
		position: relative;
		display: inline-block;
	}

	.msa-help__text .msa-heading--on-dark .elementor-heading-title::after {
		content: "";
		position: absolute;
		display: block;
		left: var(--mark-end-x, 100%);
		top: var(--mark-end-y, 50%);
		margin-left: 22px;
		transform: translateY(-50%);
		width: 76px;
		aspect-ratio: 1.18;
		background: url("assets/speech-bubbles.png") no-repeat center / contain;
		pointer-events: none;
		z-index: 1;
	}

}

/* Printing a decorative doodle wastes ink and adds nothing. */
@media print {
	.msa-mark .elementor-heading-title::before,
	.msa-mark .elementor-button::after,
	body.home .msa-section-heading::after,
	body.home .msa-heading--underline .elementor-heading-title::before {
		display: none !important;
	}
}

/* --------------------------------------------------- Seasonal hiding */

/* A section that is written and ready but not currently true -- election
   results out of season, dates that go live in October. Remove this class in
   Advanced > CSS Classes to publish it. Deliberately a class rather than
   deleted content, so nobody has to rebuild the section next year. */
.msa-hidden {
	display: none !important;
}

/* ------------------------------------------------------------- Panels */

/* A plain bordered block, for content that is a peer of another block rather
   than a note attached to it. */
.msa-panel {
	height: 100%;
	padding: 28px 28px 26px;
	border: 1px solid var(--msa-hairline);
	border-top: 3px solid var(--msa-accent, var(--msa-crimson));
	border-radius: var(--msa-radius);
	background: var(--msa-page);
	gap: 0;
}

.msa-panel__title .elementor-heading-title {
	margin: 0 0 12px;
	font-family: var(--msa-display);
	font-size: 27px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--msa-ink);
}

.msa-panel p {
	font-size: 15px;
	line-height: 1.68;
	color: var(--msa-body-text);
}

/* ---------------------------------------------------------- Date card */

.msa-date-card {
	display: inline-flex;
	margin: 22px 0 0;
	padding: 20px 28px 22px;
	border-radius: var(--msa-radius);
	background: var(--msa-accent-soft, var(--msa-crimson-soft));
	border-left: 4px solid var(--msa-accent, var(--msa-crimson));
	width: auto;
	gap: 0;
}

.msa-date-card__label p {
	margin: 0 0 4px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--msa-accent-text, var(--msa-crimson-text));
}

.msa-date-card__value .elementor-heading-title {
	margin: 0;
	font-family: var(--msa-display);
	font-size: 38px;
	font-weight: 400;
	line-height: 1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--msa-ink);
}

/* ----------------------------------------------------------- Fineprint */

.msa-fineprint p {
	margin: 18px 0 0;
	max-width: 76ch;
	font-size: 13px;
	line-height: 1.6;
	color: var(--msa-muted);
}

.msa-fineprint a {
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* A single-column tip list, for use inside a card or narrow column. */
.msa-tips--single ul {
	grid-template-columns: 1fr;
	gap: 12px;
}

/* Small section subheading, below the main heading level. */
.msa-heading--xs .elementor-heading-title {
	margin: 30px 0 0;
	font-family: var(--msa-body);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var(--msa-ink);
}

/* ---------------------------------------------------------- Services */

/* A list of things a service covers. Two lines each -- the area and what it
   means -- rather than a flat run of checkmarks, which is hard to scan when
   there are ten of them. */
.msa-services {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2px 40px;
	margin-top: 26px;
	width: 100%;
}

.msa-service {
	position: relative;
	padding: 16px 0 16px 30px;
	border-bottom: 1px solid var(--msa-hairline);
	gap: 0;
	width: 100%;
}

.msa-service::before {
	content: "";
	position: absolute;
	top: 24px;
	left: 2px;
	width: 12px;
	height: 7px;
	border-left: 2px solid var(--msa-accent, var(--msa-crimson));
	border-bottom: 2px solid var(--msa-accent, var(--msa-crimson));
	transform: rotate(-45deg);
}

.msa-service__title .elementor-heading-title {
	margin: 0 0 3px;
	font-family: var(--msa-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var(--msa-ink);
}

.msa-service__body p {
	margin: 0;
	font-size: 14px;
	line-height: 1.55;
	color: var(--msa-body-text);
}

/* ------------------------------------------------------------- Trio */

.msa-trio {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 22px;
	margin-top: 30px;
	width: 100%;
}

.msa-campus__items ul {
	margin: 18px 0 0;
	padding: 0;
	list-style: none;
}

.msa-campus__items li {
	position: relative;
	margin: 0 0 9px;
	padding-left: 20px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--msa-body-text);
}

.msa-campus__items li::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 2px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--msa-accent, var(--msa-crimson));
}

/* ------------------------------------------------- Campus programmes */

/* A campus and the programmes that run there. Used where the same service
   works differently at each site. */
.msa-campus {
	padding: 28px 28px 22px;
	border: 1px solid var(--msa-hairline);
	border-top: 3px solid var(--msa-accent, var(--msa-crimson));
	border-radius: var(--msa-radius);
	background: var(--msa-page);
	height: 100%;
	gap: 0;
}

.msa-campus__name .elementor-heading-title {
	margin: 0;
	font-family: var(--msa-display);
	font-size: 28px;
	font-weight: 400;
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--msa-ink);
}

.msa-campus__room p {
	margin: 4px 0 0;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--msa-accent-text, var(--msa-crimson-text));
}

.msa-program {
	width: 100%;
	margin-top: 24px;
	padding-top: 22px;
	border-top: 1px solid var(--msa-hairline);
	gap: 0;
}

.msa-program__title .elementor-heading-title {
	margin: 0 0 8px;
	font-family: var(--msa-body);
	font-size: 17px;
	font-weight: 700;
	line-height: 1.35;
	letter-spacing: 0;
	text-transform: none;
	color: var(--msa-ink);
}

.msa-program__body p {
	margin: 0;
	font-size: 14px;
	line-height: 1.65;
	color: var(--msa-body-text);
}

/* ---------------------------------------------------------- Callouts */

.msa-callout {
	height: 100%;
	padding: 28px 30px 30px;
	border-radius: var(--msa-radius);
}

.msa-callout--tint {
	background: var(--msa-accent-soft, var(--msa-crimson-soft));
}

.msa-callout--outline {
	background: var(--msa-page);
	border: 1px solid var(--msa-hairline);
	border-left: 4px solid var(--msa-accent, var(--msa-crimson));
}

/* Sits alongside a main column, so it carries a label to say who it is for
   and a slightly heavier edge to separate it from the body copy. */
.msa-callout--flag {
	border-top: 3px solid var(--msa-accent, var(--msa-crimson));
}

.msa-callout__eyebrow p {
	margin: 0 0 8px;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--msa-accent-text, var(--msa-crimson-text));
}

.msa-callout--flag .msa-callout__title .elementor-heading-title {
	font-size: 23px;
}

.msa-callout__title .elementor-heading-title {
	margin: 0 0 10px;
	font-family: var(--msa-display);
	font-size: 26px;
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--msa-ink);
}

.msa-callout__body p {
	margin: 0 0 12px;
	max-width: 62ch;
	font-size: 15px;
	line-height: 1.68;
	color: var(--msa-body-text);
}

.msa-callout__body p:last-child {
	margin-bottom: 0;
}

.msa-callout__body a {
	color: var(--msa-crimson-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.msa-callout__actions {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
	margin-top: 20px;
	width: auto;
}

.msa-callout__actions > .e-con-inner {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
	width: auto;
}

/* ------------------------------------------------------------- Tips */

.msa-tips ul {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px 36px;
	margin: 26px 0 0;
	padding: 0;
	list-style: none;
}

.msa-tips li {
	position: relative;
	margin: 0;
	padding-left: 30px;
	font-size: 15px;
	line-height: 1.68;
	color: var(--msa-body-text);
}

.msa-tips li::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 4px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--msa-accent, var(--msa-crimson));
}

.msa-tips a {
	color: var(--msa-crimson-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* --------------------------------------------------------------- FAQ */

/* Elementor's accordion, restyled. Kept native so each question stays an
   editable field in the panel, but its own furniture is replaced: the icon is
   drawn here rather than loaded from Font Awesome, and the content is indented
   to line up with the question above it instead of sitting to its left. */

.msa-faq .elementor-accordion {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin-top: 26px;
}

.msa-faq .elementor-accordion-item {
	border: 1px solid var(--msa-hairline) !important;
	border-radius: var(--msa-radius);
	background: var(--msa-page);
	overflow: hidden;
	transition: border-color 0.18s ease, box-shadow 0.18s ease;
}

.msa-faq .elementor-accordion-item:hover {
	border-color: rgba(0, 0, 0, 0.18) !important;
}

/* Fallback for browsers without :has() -- the state still reads correctly,
   just without the accent border on the open item. */
.msa-faq .elementor-accordion-item:has(.elementor-active) {
	border-color: var(--msa-accent, var(--msa-crimson)) !important;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.05);
}

/* The question */

.msa-faq .elementor-tab-title {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 18px 68px 18px 24px;
	border: 0 !important;
	background: transparent;
	font-family: var(--msa-body);
	font-size: 16px;
	font-weight: 700;
	line-height: 1.45;
	color: var(--msa-ink);
	transition: color 0.18s ease;
}

.msa-faq .elementor-tab-title a,
.msa-faq .elementor-accordion-title {
	color: inherit;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	text-decoration: none;
}

.msa-faq .elementor-tab-title:hover {
	color: var(--msa-accent-text, var(--msa-crimson-text));
}

.msa-faq .elementor-tab-title.elementor-active {
	color: var(--msa-accent-text, var(--msa-crimson-text));
}

/* The marker.
   Elementor's own plus and minus glyphs are heavy and sit off the text's
   centre line. The icon container is reused as a circle and the bars are drawn
   here, which also lets it fill with the section colour when open -- the same
   treatment the homepage accordion uses. */

.msa-faq .elementor-tab-title .elementor-accordion-icon {
	position: absolute;
	top: 50%;
	right: 22px;
	left: auto;
	transform: translateY(-50%);
	box-sizing: border-box;
	display: block;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	min-width: 30px;
	min-height: 30px;
	aspect-ratio: 1 / 1;
	margin: 0;
	padding: 0;
	border: 1px solid var(--msa-hairline);
	border-radius: 50%;
	background: transparent;
	font-size: 0;
	line-height: 0;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.msa-faq .elementor-accordion-icon span,
.msa-faq .elementor-accordion-icon i,
.msa-faq .elementor-accordion-icon svg {
	display: none !important;
}

.msa-faq .elementor-accordion-icon::before,
.msa-faq .elementor-accordion-icon::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 12px;
	height: 2px;
	background: var(--msa-accent-text, var(--msa-crimson-text));
	transform: translate(-50%, -50%);
	transition: transform 0.2s ease, background-color 0.2s ease;
}

.msa-faq .elementor-accordion-icon::after {
	transform: translate(-50%, -50%) rotate(90deg);
}

.msa-faq .elementor-tab-title:hover .elementor-accordion-icon {
	border-color: var(--msa-accent, var(--msa-crimson));
}

.msa-faq .elementor-tab-title.elementor-active .elementor-accordion-icon {
	background: var(--msa-accent, var(--msa-crimson));
	border-color: var(--msa-accent, var(--msa-crimson));
}

.msa-faq .elementor-tab-title.elementor-active .elementor-accordion-icon::before,
.msa-faq .elementor-tab-title.elementor-active .elementor-accordion-icon::after {
	background: var(--msa-white);
}

/* Open: the vertical bar rotates flat, leaving a minus. */
.msa-faq .elementor-tab-title.elementor-active .elementor-accordion-icon::after {
	transform: translate(-50%, -50%) rotate(0deg);
}

/* Yellow needs dark bars to stay visible once the circle fills. */
.msa-accent--yellow .msa-faq .elementor-tab-title.elementor-active .elementor-accordion-icon::before,
.msa-accent--yellow .msa-faq .elementor-tab-title.elementor-active .elementor-accordion-icon::after {
	background: var(--msa-ink);
}

/* The answer.
   Left padding matches the question, so the two line up. */

.msa-faq .elementor-tab-content {
	padding: 0 40px 22px 24px;
	border: 0 !important;
	background: transparent;
}

.msa-faq .elementor-tab-content p {
	margin: 0 0 14px;
	max-width: 70ch;
	font-size: 15px;
	line-height: 1.68;
	color: var(--msa-body-text);
}

.msa-faq .elementor-tab-content p:last-child {
	margin-bottom: 0;
}

.msa-faq .elementor-tab-content a {
	color: var(--msa-crimson-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.msa-faq .elementor-tab-content ul,
.msa-faq .elementor-tab-content ol {
	margin: 0 0 14px;
	padding-left: 4px;
	max-width: 70ch;
	list-style: none;
}

.msa-faq .elementor-tab-content ol {
	counter-reset: msa-faq-step;
}

.msa-faq .elementor-tab-content li {
	position: relative;
	margin-bottom: 8px;
	padding-left: 24px;
	font-size: 15px;
	line-height: 1.62;
	color: var(--msa-body-text);
}

.msa-faq .elementor-tab-content ul li::before {
	content: "";
	position: absolute;
	top: 9px;
	left: 2px;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--msa-accent, var(--msa-crimson));
}

.msa-faq .elementor-tab-content ol li::before {
	counter-increment: msa-faq-step;
	content: counter(msa-faq-step) ".";
	position: absolute;
	top: 0;
	left: 0;
	font-weight: 700;
	color: var(--msa-accent-text, var(--msa-crimson-text));
}

/* A list followed by more copy needs the gap put back. */
.msa-faq .elementor-tab-content ul + p,
.msa-faq .elementor-tab-content ol + p {
	margin-top: 14px;
}

.msa-faq .elementor-tab-title:focus-visible {
	outline: 2px solid var(--msa-crimson);
	outline-offset: -2px;
}

/* A lighter accordion, for a single disclosure inside a card rather than a
   list of questions. */
.msa-faq--compact .elementor-accordion {
	gap: 0;
	margin-top: 14px;
}

.msa-faq--compact .elementor-accordion-item,
.msa-faq--compact .elementor-accordion-item:hover,
.msa-faq--compact .elementor-accordion-item:has(.elementor-active) {
	border: 0 !important;
	border-radius: 0;
	background: transparent;
	box-shadow: none;
}

.msa-faq--compact .elementor-tab-title {
	padding: 8px 34px 8px 0;
	font-size: 14px;
	color: var(--msa-accent-text, var(--msa-crimson-text));
}

.msa-faq--compact .elementor-tab-title .elementor-accordion-icon {
	right: 0;
	width: 22px;
	height: 22px;
	min-width: 22px;
	min-height: 22px;
	border-color: transparent;
}

.msa-faq--compact .elementor-accordion-icon::before,
.msa-faq--compact .elementor-accordion-icon::after {
	width: 10px;
}

.msa-faq--compact .elementor-tab-title.elementor-active .elementor-accordion-icon {
	background: transparent;
	border-color: transparent;
}

.msa-faq--compact .elementor-tab-title.elementor-active .elementor-accordion-icon::before,
.msa-faq--compact .elementor-tab-title.elementor-active .elementor-accordion-icon::after {
	background: var(--msa-accent-text, var(--msa-crimson-text));
}

.msa-faq--compact .elementor-tab-content {
	padding: 0 0 10px;
}

.msa-faq--compact .elementor-tab-content p {
	font-size: 14px;
}

@media (max-width: 767px) {
	.msa-faq .elementor-tab-title {
		padding: 16px 58px 16px 18px;
		font-size: 15px;
	}

	.msa-faq .elementor-accordion-icon {
		right: 16px;
	}

	.msa-faq .elementor-tab-content {
		padding: 0 20px 20px 18px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.msa-faq .elementor-accordion-item,
	.msa-faq .elementor-tab-title,
	.msa-faq .elementor-accordion-icon,
	.msa-faq .elementor-accordion-icon::before,
	.msa-faq .elementor-accordion-icon::after {
		transition: none;
	}
}

/* ---------------------------------------------------------- Help band */

.msa-help {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
	gap: 32px 48px;
	align-items: center;
}

.msa-help__body p {
	margin: 12px 0 0;
	max-width: 52ch;
	font-size: 16px;
	line-height: 1.65;
	color: rgba(255, 255, 255, 0.92);
}

.msa-help__actions {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: flex-end;
	width: auto;
}

.msa-help__actions > .e-con-inner {
	flex-direction: row;
	flex-wrap: wrap;
	gap: 12px;
	justify-content: flex-end;
	width: auto;
}

.msa-btn-wrap--dark .elementor-button {
	background: var(--msa-ink);
	color: var(--msa-white);
}

.msa-btn-wrap--dark .elementor-button:hover {
	background: var(--msa-crimson);
	color: var(--msa-white);
}

.msa-btn-wrap--outline-light .elementor-button {
	background: transparent;
	border-color: rgba(255, 255, 255, 0.6);
	color: var(--msa-white);
}

.msa-btn-wrap--outline-light .elementor-button:hover {
	background: rgba(255, 255, 255, 0.14);
	border-color: var(--msa-white);
	color: var(--msa-white);
}

/* ---------------------------------------------------------- Responsive */

@media (max-width: 1024px) {
	.msa-split,
	.msa-split--wide,
	.msa-split--aside {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.msa-split--reverse .msa-split__media {
		order: 0;
	}

	.msa-media-slot--offset img {
		margin-top: 0;
	}

	.msa-media-slot--bleed img,
	.msa-split--reverse .msa-media-slot--bleed img {
		border-radius: var(--msa-radius);
	}

	.msa-duo {
		grid-template-columns: 1fr;
	}

	.msa-features {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.msa-trio,
	.msa-outlets {
		grid-template-columns: 1fr;
	}

	.msa-spaces {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.msa-quicklinks,
	.msa-quicklinks--trio {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.msa-help {
		grid-template-columns: 1fr;
	}

	.msa-help__actions,
	.msa-help__actions > .e-con-inner {
		justify-content: flex-start;
	}
}

@media (max-width: 767px) {
	.msa-cards {
		grid-template-columns: 1fr;
	}

	.msa-tips ul {
		grid-template-columns: 1fr;
	}

	.msa-features,
	.msa-features--pair,
	.msa-services,
	.msa-quicklinks,
	.msa-quicklinks--trio,
	.msa-spaces {
		grid-template-columns: 1fr;
	}

	.msa-milestone {
		padding-left: 30px;
	}

	.msa-partner,
	.msa-partner > .e-con-inner {
		flex-wrap: wrap;
	}

	.msa-anchors {
		margin-top: 22px;
		padding: 14px 18px;
		gap: 6px 18px;
	}

	.msa-anchors__label {
		flex: 1 0 100%;
		padding-right: 0;
	}

	.msa-anchors ul {
		gap: 4px 18px;
	}

	.msa-anchors.is-stuck {
		padding-block: 10px;
	}

	.msa-anchors.is-stuck .msa-anchors__label {
		display: none;
	}

	.msa-lead p {
		font-size: 17px;
	}

	.msa-callout,
	.msa-steps {
		padding: 22px 20px 24px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.msa-anchors a,
	.msa-feature,
	.msa-quicklink {
		transition: none;
	}

	.msa-feature:hover,
	.msa-quicklink:hover {
		transform: none;
	}
}

/* --------------------------------------------------- Detail templates */

/* The interior hero brings its own padding, so its section must not add more. */
.msa-section--flush {
	padding-block: 0;
}

.msa-detail {
	display: grid;
	gap: 48px;
	align-items: start;
}

.msa-detail--with-aside {
	grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr);
}

.msa-detail--portrait {
	grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
}

.msa-detail--narrow {
	grid-template-columns: minmax(0, 1fr);
	max-width: 760px;
}

.msa-detail__aside {
	position: sticky;
	top: 118px;
}

.msa-detail__portrait img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--msa-radius);
}

.msa-detail__meta {
	margin-top: 22px;
}

/* The profile's role, pronouns and term now open the text column rather than
   sitting under the portrait, so the reader has them without scrolling. As the
   first thing in the column it needs no top margin, and a rule beneath it keeps
   it from reading as the first paragraph of the bio. */
.msa-detail__meta--lead {
	margin-top: 0;
	margin-bottom: 28px;
	padding-bottom: 24px;
	border-bottom: 1px solid var(--msa-hairline);
}

.msa-detail__share-row {
	margin-top: 36px;
	padding-top: 24px;
	border-top: 1px solid var(--msa-hairline);
}

/* The featured image, in the right-hand column beside the copy.
 *
 * Events and posts share this. The hero on both is a coloured band with the
 * doodle pattern rather than the photo, so this is the one place the image
 * appears, sitting alongside the text the way the client asked for on events and
 * then for the blog.
 *
 * A square rather than the 16:9 used elsewhere: it fills the aside's width
 * without leaving the share row stranded a long way down the page. Uploads are
 * 16:9 per the agreed spec, so the crop takes the sides -- subjects need to be
 * centred, as agreed in the meeting. */
.msa-detail__tile {
	margin-bottom: 26px;
}

.msa-detail__tile img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
	border-radius: var(--msa-radius);
}

/* Nothing uploaded yet: an empty featured-image widget would otherwise leave a
   gap at the top of the column. */
.msa-detail__tile:empty,
.msa-detail__tile .elementor-widget-container:empty {
	display: none;
	margin-bottom: 0;
}

/* Stacked, the aside falls after the copy, which would drop the image below the
   text it belongs beside. Dissolving the aside's box lets its children take their
   own places in the single column, so the image leads and the share row stays at
   the end.
 *
 * Keyed on the aside actually holding an image rather than on the post type, so
 * it covers events and posts alike and leaves the club and profile asides -- which
 * carry details that read better below the copy -- exactly where they are. */
@media (max-width: 1024px) {
	.msa-detail--with-aside .msa-detail__aside:has(.msa-detail__tile) {
		display: contents;
	}

	.msa-detail__tile {
		order: -1;
		margin-bottom: 0;
	}

	.msa-detail--with-aside .msa-detail__main {
		order: 0;
	}

	.msa-detail__share,
	.msa-detail__share-row {
		order: 1;
	}
}

.msa-heading--sm .elementor-heading-title {
	font-size: 34px;
	margin-bottom: 24px;
}

/* Body copy inside detail pages. Measure is capped so long articles stay
   readable rather than running the full container width. */
.msa-prose {
	font-size: 16px;
	line-height: 1.72;
	color: var(--msa-body-text);
}

.msa-prose p,
.msa-prose ul,
.msa-prose ol {
	max-width: 68ch;
	margin: 0 0 20px;
}

.msa-prose h2,
.msa-prose h3 {
	margin: 36px 0 14px;
	font-family: var(--msa-display);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--msa-ink);
}

.msa-prose h2 {
	font-size: 32px;
}

.msa-prose h3 {
	font-size: 25px;
}

.msa-prose h4 {
	margin: 30px 0 10px;
	font-size: 17px;
	font-weight: 700;
	color: var(--msa-ink);
}

.msa-prose a {
	color: var(--msa-crimson-text);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.msa-prose ul,
.msa-prose ol {
	padding-left: 22px;
}

.msa-prose li {
	margin-bottom: 8px;
}

.msa-prose img {
	max-width: 100%;
	height: auto;
	border-radius: var(--msa-radius);
}

.msa-prose blockquote {
	margin: 28px 0;
	padding: 4px 0 4px 22px;
	border-left: 3px solid var(--msa-crimson);
	font-size: 18px;
	line-height: 1.6;
	color: var(--msa-ink);
}

@media (max-width: 1024px) {
	.msa-detail {
		gap: 36px;
	}

	.msa-detail--with-aside,
	.msa-detail--portrait {
		grid-template-columns: minmax(0, 1fr);
	}

	.msa-detail__aside {
		position: static;
	}

	.msa-detail--portrait .msa-detail__portrait img {
		max-width: 320px;
	}
}

@media (max-width: 767px) {
	.msa-heading--sm .elementor-heading-title {
		font-size: 28px;
	}

	.msa-prose h2 {
		font-size: 26px;
	}

	.msa-prose h3 {
		font-size: 21px;
	}
}

/* ------------------------------------------------------------ Supports */

.msa-supports__grid {
	display: grid;
	grid-template-columns: 0.86fr 1.14fr;
	gap: 56px;
	align-items: start;
}

.msa-supports__body p {
	margin: 22px 0 0;
	max-width: 42ch;
	font-size: 15px;
	line-height: 1.72;
	color: var(--msa-body-text);
}

.msa-supports__intro .msa-btn-wrap {
	margin-top: 28px;
}

.msa-accordion {
	display: flex;
	flex-direction: column;
	gap: 12px;
}

.msa-accordion__item {
	border: 1px solid var(--msa-hairline);
	border-radius: var(--msa-radius);
	background: var(--msa-white);
	overflow: hidden;
	transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.msa-accordion__item[open] {
	border-color: var(--msa-accent, var(--msa-crimson));
	box-shadow: 0 10px 26px rgba(0, 0, 0, 0.06);
}

.msa-accordion__summary {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 18px 20px;
	cursor: pointer;
	list-style: none;
}

.msa-accordion__summary::-webkit-details-marker {
	display: none;
}

.msa-accordion__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 42px;
	height: 42px;
	border-radius: 10px;
	background: var(--msa-accent-soft, var(--msa-crimson-soft));
	border: 1px solid var(--msa-accent, var(--msa-crimson));
}

/* The true brand value rather than the darkened text-safe variant, which read as
   a muted version of the colour. These are decorative glyphs beside a text label
   rather than type or meaningful graphics, so the contrast floor that forced the
   darker variants elsewhere does not apply here. */
.msa-accordion__icon svg {
	width: 22px;
	height: 22px;
	fill: none;
	stroke: var(--msa-accent, var(--msa-crimson));
	stroke-width: 1.7;
	stroke-linecap: round;
	stroke-linejoin: round;
}

.msa-accordion__labels {
	display: flex;
	flex-direction: column;
	gap: 3px;
	flex: 1 1 auto;
	min-width: 0;
}

.msa-accordion__eyebrow {
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.15em;
	text-transform: uppercase;
	color: var(--msa-accent-text, var(--msa-crimson-text));
}

.msa-accordion__title {
	font-family: var(--msa-display);
	font-size: 25px;
	line-height: 1.05;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	color: var(--msa-ink);
}

.msa-accordion__chevron {
	position: relative;
	flex: 0 0 auto;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	transition: background-color 0.2s ease;
}

.msa-accordion__chevron::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 9px;
	height: 9px;
	margin: -6px 0 0 -5px;
	border-right: 2px solid var(--msa-ink);
	border-bottom: 2px solid var(--msa-ink);
	transform: rotate(45deg);
	transition: transform 0.2s ease, border-color 0.2s ease;
}

.msa-accordion__item[open] .msa-accordion__chevron {
	background: var(--msa-accent, var(--msa-crimson));
}

.msa-accordion__item[open] .msa-accordion__chevron::before {
	margin-top: -2px;
	border-color: var(--msa-white);
	transform: rotate(-135deg);
}

.msa-accordion__panel {
	padding: 0 20px 20px 78px;
}

.msa-accordion__panel p {
	margin: 0 0 14px;
	font-size: 14px;
	line-height: 1.65;
	color: var(--msa-body-text);
}

/* ------------------------------------------------------------ Feedback */

.msa-feedback {
	color: var(--msa-white);
}

.msa-feedback__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 56px;
	align-items: start;
}

.msa-feedback__body p {
	margin: 20px 0 0;
	max-width: 46ch;
	font-size: 15px;
	line-height: 1.72;
	color: rgba(255, 255, 255, 0.92);
}

.msa-inperson-wrap {
	margin-top: 30px;
}

.msa-inperson {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	max-width: 460px;
	padding: 18px 22px;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--msa-radius);
}

.msa-inperson p {
	margin: 0;
	font-size: 13px;
	line-height: 1.6;
	color: rgba(255, 255, 255, 0.92);
}

.msa-inperson p + p {
	margin-top: 5px;
}

.msa-inperson__icon {
	flex: 0 0 auto;
	width: 18px;
	height: 18px;
	margin-top: 2px;
	border: 2px solid var(--msa-white);
	border-radius: 50% 50% 50% 2px;
	transform: rotate(-45deg);
}

.msa-feedback__card {
	padding: 30px 30px 32px;
	border-radius: 14px;
	background: var(--msa-white);
	color: var(--msa-body-text);
}

.msa-feedback__card-title .elementor-heading-title {
	margin: 0;
	font-family: var(--msa-body);
	font-size: 19px;
	font-weight: 700;
	line-height: 1.3;
	text-transform: none;
	letter-spacing: 0;
	color: var(--msa-ink);
}

.msa-feedback__card-body p {
	margin: 10px 0 0;
	font-size: 14px;
	line-height: 1.62;
	color: var(--msa-body-text);
}

.msa-feedback__form {
	margin-top: 18px;
}

.msa-feedback__assurance {
	display: flex;
	align-items: center;
	gap: 9px;
	margin: 16px 0 0;
	font-size: 12px;
	color: var(--msa-muted);
}

.msa-feedback__lock {
	flex: 0 0 auto;
	width: 13px;
	height: 11px;
	border: 2px solid var(--msa-muted);
	border-radius: 2px;
	position: relative;
}

.msa-feedback__lock::before {
	content: "";
	position: absolute;
	left: 50%;
	top: -7px;
	width: 9px;
	height: 8px;
	margin-left: -4.5px;
	border: 2px solid var(--msa-muted);
	border-bottom: 0;
	border-radius: 5px 5px 0 0;
}

/* --------------------------------------------------------------- Focus */

.msa-section a:focus-visible,
.msa-section button:focus-visible,
.msa-section summary:focus-visible,
.msa-section input:focus-visible {
	outline: 2px solid var(--msa-crimson);
	outline-offset: 3px;
}

.msa-section--crimson a:focus-visible,
.msa-section--crimson summary:focus-visible {
	outline-color: var(--msa-white);
}

/* ---------------------------------------------------------- Responsive */

@media (max-width: 1024px) {
	:root {
		--msa-section-y: 72px;
		--msa-edge: 34px;
	}

	.msa-heading .elementor-heading-title,
	.msa-heading h2 {
		font-size: 40px;
	}

	.msa-supports__grid,
	.msa-feedback__grid {
		grid-template-columns: 1fr;
		gap: 36px;
	}

}

@media (max-width: 767px) {
	:root {
		--msa-section-y: 56px;
		--msa-edge: 24px;
	}

	.msa-heading .elementor-heading-title,
	.msa-heading h2 {
		font-size: 34px;
	}

	.msa-accordion__panel {
		padding-left: 20px;
	}

	.msa-feedback__card {
		padding: 24px 22px 26px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.msa-btn-wrap .elementor-button,
	.msa-inline-link,
	.msa-accordion__item,
	.msa-accordion__chevron {
		transition: none;
	}
}