/* ==========================================================================
   Scholars Avenue — Services page
   ========================================================================== */

.sa-page * { box-sizing: border-box; }

.sa-page {
	margin: 0;
	background: var(--sa-cream);
	color: var(--sa-ink);
	font-family: var(--sa-font-body);
	font-size: 16px;
	line-height: 1.5;
	-webkit-font-smoothing: antialiased;
	overflow-x: hidden;
}

/* :where() keeps these at zero specificity so component rules always win. */
.sa-page :where(img) { max-width: 100%; display: block; }
.sa-page :where(a) { color: inherit; text-decoration: none; }
.sa-page :where(h1, h2, h3, h4) { margin: 0; font-weight: 400; }
.sa-page :where(p) { margin: 0; }
.sa-page :where(ul) { margin: 0; padding: 0; list-style: none; }
/* figure carries a UA default of `margin: 1em 40px`, which silently widens gaps. */
.sa-page :where(figure, blockquote, dl, dd) { margin: 0; }
/* Plugin resets give svg max-width:100%, which lets them shrink to 0 inside flex rows. */
.sa-page svg { flex: none; }

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

.sa-section { padding-block: var(--sa-section-y); }

.sa-display {
	font-family: var(--sa-font-display);
	text-transform: uppercase;
	font-weight: 700;
	letter-spacing: .02em;
}

/* Long uppercase words in the display face can out-measure a phone viewport. */
.sa-hero__title,
.sa-countries__title,
.sa-services__title,
.sa-packages__title,
.sa-journey__title,
.sa-roadmap__title,
.sa-compare__title,
.sa-stories__title,
.sa-faq__title,
.sa-cta__title { overflow-wrap: break-word; }

/* Plugin stylesheets still set a global heading colour, and a direct declaration
   always beats an inherited one -- so every heading states its own colour. */
.sa-journey__title,
.sa-step__title,
.sa-cta__title,
.sa-cta__badge,
.sa-footer__heading { color: #fff; }

.sa-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 10px 4px 7px;
	background: var(--sa-white);
	border-radius: 9px;
	box-shadow: 0 0 0 1px var(--sa-border-light), var(--sa-shadow-soft);
	font-family: var(--sa-font-ui);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: -.08px;
	color: var(--sa-text-muted);
}
.sa-eyebrow::before {
	content: '';
	width: 6px; height: 6px;
	border-radius: 50%;
	background: #335CFF;
}

/* Stripping the theme's CSS also removed its screen-reader utility, so any
   .screen-reader-text a plugin prints would otherwise become visible copy. */
.sa-page .screen-reader-text,
.sa-page .sr-only,
/* Unscoped, because our own markup uses it inside parts that are not always
   rendered under .sa-page - a label that escapes here becomes visible copy. */
.sa-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* Belt and braces: these are removed at source in functions.php, but if a plugin
   update re-adds them they must not render as loose blocks under the footer. */
.sa-page #ast-scroll-top,
.sa-page .pswp:not(.pswp--open) { display: none !important; }

.sa-skip-link {
	position: absolute;
	left: -9999px;
}
.sa-skip-link:focus {
	left: 16px; top: 16px;
	z-index: 999;
	padding: 10px 16px;
	background: var(--sa-navy);
	color: #fff;
	border-radius: var(--sa-r-sm);
}

/* ----------------------------------------------------------- Transitions */
/* The .sa-reveal class is added by JS, never in the markup, so with scripting
   off (or if the script fails) every element stays visible at its resting
   state. Anything already on screen at load is revealed immediately. */
@media (prefers-reduced-motion: no-preference) {
	.sa-page .sa-reveal {
		opacity: 0;
		transform: translateY(18px);
		transition:
			opacity .6s cubic-bezier(.22, .61, .36, 1),
			transform .6s cubic-bezier(.22, .61, .36, 1);
		transition-delay: var(--sa-reveal-delay, 0ms);
		will-change: opacity, transform;
	}
	.sa-page .sa-reveal.is-visible {
		opacity: 1;
		transform: none;
		will-change: auto;
	}

	html { scroll-behavior: smooth; }
}

/* Interactive polish */
.sa-story img,
.sa-package img { transition: transform .5s cubic-bezier(.22, .61, .36, 1); }
.sa-story:hover img,
.sa-package:hover img { transform: scale(1.04); }

.sa-flag { transition: transform .25s ease, box-shadow .25s ease; }
.sa-flag:hover {
	transform: translateY(-4px);
	box-shadow: 0 10px 22px rgba(19, 38, 83, .10);
}

.sa-partners__cell img { transition: filter .3s ease, opacity .3s ease; }
.sa-partners__cell:hover img { filter: grayscale(0); opacity: 1; }

.sa-milestone { transition: transform .25s ease; }
.sa-milestone__body { transition: background-color .3s ease, color .3s ease; }
.sa-step { transition: transform .25s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease; }

/* The height is animated in JS; this just fades the copy in behind it. */
.sa-accordion__a { animation: sa-fade-in .4s ease both; }
@keyframes sa-fade-in {
	from { opacity: 0; }
	to   { opacity: 1; }
}

.sa-footer__links a { transition: color .15s ease, transform .15s ease; }
.sa-footer__links a:hover { transform: translateX(3px); }

@media (prefers-reduced-motion: reduce) {
	.sa-story img, .sa-package img,
	.sa-flag, .sa-step, .sa-milestone,
	.sa-footer__links a { transition: none; }
	.sa-accordion__a { animation: none; }
}

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

.sa-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;
	height: 56px;
	padding: 10px 14px 10px 16px;
	border: 1px solid transparent;
	border-radius: 12px;
	font-family: var(--sa-font-body);
	font-size: 18px;
	font-weight: 500;
	letter-spacing: -.11px;
	line-height: 20px;
	cursor: pointer;
	transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.sa-btn:hover { transform: translateY(-1px); }
.sa-btn svg { flex: none; }

.sa-btn--primary {
	background: #AF0012;
	color: #fff;
}
.sa-btn__arrow { opacity: .64; }
.sa-btn--primary:hover { background: #950010; box-shadow: 0 8px 20px rgba(175, 0, 18, .25); }

.sa-btn--ghost {
	background: transparent;
	border-color: var(--sa-link);
	color: var(--sa-link);
}
.sa-btn--ghost:hover { background: rgba(0, 44, 84, .05); }

.sa-btn--block { width: 100%; }

/* ---------------------------------------------------------------- Header */

.sa-header {
	position: sticky;
	top: 0;
	z-index: 60;
	padding-block: 16px;
	background: var(--sa-cream);
}

/* The design's pill is the full 1328px content width, so this container's
   gutter sits outside it rather than eating into it. */
.sa-header > .sa-container { max-width: calc(var(--sa-container) + (var(--sa-gutter) * 2)); }

.sa-header__bar {
	position: relative;
	display: flex;
	align-items: center;
	gap: 24px;
	min-height: 74px;
	padding: 8px 25px;
	background: var(--sa-white);
	border-radius: 36px;
	box-shadow: 0 2px 10px rgba(12, 38, 75, .06);
}

.sa-header__logo { flex: none; }
.sa-header__logo img { width: 84px; height: auto; }

.sa-header__nav { margin-inline: auto; }
.sa-header__menu {
	display: flex;
	align-items: center;
	gap: 32px;
}
.sa-header__menu a {
	font-family: var(--sa-font-ui);
	font-size: 14px;
	line-height: 21px;
	letter-spacing: -.14px;
	color: var(--sa-ink);
	padding-block: 7px;
	border-bottom: 1px solid transparent;
	transition: color .15s ease, border-color .15s ease;
	white-space: nowrap;
}
.sa-header__menu a:hover { color: var(--sa-red); }
/* The page you are on is marked in red -- underline and label together. */
.sa-header__menu .current-menu-item > a,
.sa-header__menu .sa-is-current > a {
	color: var(--sa-red);
	text-decoration: underline;
	text-decoration-color: var(--sa-red);
	text-underline-offset: 5px;
	text-decoration-thickness: 1px;
}

.sa-header__actions {
	display: flex;
	align-items: center;
	gap: 24px;
	flex: none;
}

.sa-header__cart {
	display: inline-flex;
	align-items: center;
	gap: 3px;
	font-family: var(--sa-font-ui);
	font-size: 14px;
	color: var(--sa-ink);
}

.sa-header__phone {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sa-font-accent);
	font-size: 16px;
	line-height: 22px;
	font-weight: 600;
	color: #000;
}
.sa-header__phone .sa-wa {
	width: 32px; height: 32px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #64B161;
	color: #fff;
}

.sa-header__toggle {
	display: none;
	width: 44px; height: 44px;
	flex: none;
	align-items: center;
	justify-content: center;
	border: 1px solid var(--sa-border);
	border-radius: 12px;
	background: #fff;
	cursor: pointer;
	color: var(--sa-navy);
}
.sa-header__toggle svg { width: 22px; height: 22px; }

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

.sa-hero {
	position: relative;
	padding-top: 56px;
	padding-bottom: 40px;
	background: var(--sa-cream);
	overflow: hidden;
}

.sa-hero__grid {
	display: grid;
	grid-template-columns: minmax(0, 626px) minmax(0, 700px);
	gap: 56px;
	align-items: center;
}

.sa-hero__title {
	font-family: var(--sa-font-display);
	font-size: 56px;
	line-height: 60px;
	font-weight: 700;
	text-transform: uppercase;
	color: #002768;
	margin-bottom: 16px;
}
.sa-hero__title .sa-accent { color: var(--sa-red); }

.sa-hero__lead {
	font-size: 20px;
	line-height: 30px;
	color: #556171;
	max-width: 626px;
}
.sa-hero__lead strong { font-weight: 700; color: #3f4a5a; }

.sa-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 23px;
	margin-top: 32px;
}

.sa-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 24px;
	margin-top: 32px;
	padding-top: 32px;
	border-top: 1px solid var(--sa-border);
	max-width: 512px;
}
.sa-stat { min-width: 140px; }
.sa-stat__value {
	font-family: var(--sa-font-display);
	font-size: 30px;
	line-height: 36px;
	color: var(--sa-navy);
}
.sa-stat__label {
	font-size: 14px;
	line-height: 20px;
	color: var(--sa-text);
	margin-top: 4px;
}

/* cqw == 1% of the video's width, so every ribbon measurement below is the
   design's pixel value divided by 700 and scales exactly with the card. */
.sa-hero__media {
	position: relative;
	container-type: inline-size;
}

/* Straight from the Figma spec: a 1100x520 box, 810px radius, rotated -8deg,
   with only its top border drawn -- that arc is the ribbon.

   The radius is clamped by the box's HEIGHT, not its width, so adding width only
   lengthens the straight middle run: the end curves and the left crescent stay
   exactly as designed. That's what --sa-ribbon-bleed does -- past the container's
   max width the ribbon keeps growing so it always runs off the right edge of the
   screen instead of stopping short and leaving its tips floating mid-page. */
.sa-hero__ribbon {
	position: absolute;
	z-index: 0;
	/* 1100/700, plus overscan past the container's half-width (1328/2 = 664px).
	   Inlined rather than held in a custom property -- a var() nested inside
	   max(calc()) resolves empty here and the overscan silently drops out. */
	width: calc(157.143cqw + max(0px, 50vw - 664px));
	height: 74.286cqw;   /*  520 / 700 */
	border-radius: 115.714cqw; /* 810 / 700 */
	border-top-style: solid;
	transform: rotate(-8deg);
	pointer-events: none;
}

.sa-hero__ribbon--red {
	left: -12.429cqw;    /* -87 / 700 */
	top: 7.714cqw;       /*  54 / 700 */
	border-top-width: 4cqw;        /* 28 / 700 */
	border-top-color: rgba(175, 29, 43, .9);
}

.sa-hero__ribbon--navy {
	left: -17cqw;        /* -119 / 700 */
	top: 14.571cqw;      /*  102 / 700 */
	border-top-width: 5.714cqw;    /* 40 / 700 */
	border-top-color: #132653;
}

.sa-hero__video {
	position: relative;
	z-index: 1;
	aspect-ratio: 700 / 402;
	border-radius: var(--sa-r-lg);
	overflow: hidden;
	background: #000;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .05), 0 25px 50px -12px rgba(0, 0, 0, .25);
}
.sa-hero__video iframe,
.sa-hero__video img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	object-fit: cover;
}
.sa-hero__video-caption {
	position: absolute;
	left: 20px; right: 20px; bottom: 16px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	font-family: var(--sa-font-ui);
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: #fff;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .6);
	pointer-events: none;
}

/* Figma: 283x70 at left 417 inside the 700px card, so its right edge sits flush
   with the video's right edge. */
.sa-rating {
	position: absolute;
	top: -24px;
	right: 0;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	background: #fff;
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-r-card);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
	z-index: 2;
}
.sa-rating__avatars { display: flex; }
.sa-rating__avatars img {
	width: 36px; height: 36px;
	border-radius: 50%;
	border: 2px solid #fff;
	object-fit: cover;
}
.sa-rating__avatars img + img { margin-left: -8px; }
.sa-rating__stars { color: #FBBF24; font-size: 12px; letter-spacing: 1px; line-height: 14px; }
.sa-rating__text {
	font-family: var(--sa-font-ui);
	font-size: 12px;
	line-height: 16px;
	color: var(--sa-text-muted);
	margin-top: 5px;
	white-space: nowrap;
}

/* ------------------------------------------------------- Partner marquee */

/* Six fixed cells (228x94) centred across the frame, each logo at the size the
   design gives it -- a uniform height flattens them and loses the hierarchy. */
.sa-partners {
	padding-block: 32px;
	background: var(--sa-cream);
	overflow: hidden;
}
/* Full-bleed: the strip runs edge to edge and the marks drift across it, so
   the wrap is no longer capped at the frame width. The mask softens both ends
   so a logo fades out rather than being chopped off at the edge. */
.sa-partners__wrap {
	width: 100%;
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 72px, #000 calc(100% - 72px), transparent 100%);
}
.sa-partners__row {
	display: flex;
	align-items: center;
	flex-wrap: nowrap;
	/* The track is its own width, not the container's, or there is nothing to
	   slide. */
	width: max-content;
	animation: sa-partners-drift 42s linear infinite;
	will-change: transform;
}
/* Half the track is one full set of logos. */
@keyframes sa-partners-drift {
	from { transform: translate3d(0, 0, 0); }
	to   { transform: translate3d(-50%, 0, 0); }
}
.sa-partners:hover .sa-partners__row { animation-play-state: paused; }

.sa-partners__cell {
	flex: 0 0 228px;
	height: 94px;
	display: grid;
	place-items: center;
}

/* Asked not to move: the strip goes back to the static centred row it was. */
@media (prefers-reduced-motion: reduce) {
	.sa-partners__wrap { -webkit-mask-image: none; mask-image: none; }
	.sa-partners__row {
		flex-wrap: wrap;
		justify-content: center;
		width: auto;
		row-gap: 8px;
		animation: none;
	}
	.sa-partners__cell { flex: 1 1 0; min-width: 120px; max-width: 228px; }
	/* The second set is only there to make the loop seamless. */
	.sa-partners__cell[aria-hidden="true"] { display: none; }
}
/* Sized off the trimmed artwork so each mark carries the optical weight it has
   in the design -- the source files have up to 60% transparent padding, which
   is why a single uniform height renders them all at roughly half size. */
.sa-partners__cell img {
	flex: none;
	max-width: none;
	object-fit: contain;
	filter: grayscale(1);
	opacity: .85;
}
/* Each value is the artwork's rendered size in Figma: the design box multiplied
   by how much of the source canvas the mark actually occupies. */
.sa-logo--dayspring { width: 94px;  height: auto; }  /* 94 box, full-bleed source */
.sa-logo--erasmus   { width: 113px; height: auto; }  /* 160 box x 106/150 content */
.sa-logo--seal      { width: 76px;  height: auto; }  /* 88 box x 126/150 content */
.sa-logo--nstp      { height: 60px; width: auto; }   /* 94 box x 96/150 content */
/* Two identical tracks, each at least a full viewport wide, both sliding exactly
   one track width -- that is what makes the loop seamless with no dead gap. */
.sa-marquee {
	display: flex;
	overflow: hidden;
	mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent);
}
.sa-marquee__track {
	display: flex;
	align-items: center;
	justify-content: space-around;
	gap: 64px;
	padding-inline: 32px;
	flex: none;
	min-width: 100%;
	animation: sa-scroll 38s linear infinite;
}
.sa-marquee:hover .sa-marquee__track { animation-play-state: paused; }

@keyframes sa-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

@media (prefers-reduced-motion: reduce) {
	.sa-marquee__track { animation: none; }
	.sa-marquee { mask-image: none; overflow-x: auto; }
	.sa-marquee__track + .sa-marquee__track { display: none; }
}

/* ------------------------------------------------------------- Countries */

.sa-countries {
	background: var(--sa-cream);
	text-align: center;
	overflow: hidden;
}
.sa-countries__title {
	font-family: var(--sa-font-display);
	font-size: 48px;
	line-height: 56px;
	letter-spacing: -.48px;
	text-transform: uppercase;
	color: var(--sa-ink-strong);
	max-width: 620px;
	margin: 12px auto 0;
}
.sa-countries__title .sa-accent { color: var(--sa-red); }

.sa-flags { margin-top: 40px; }
.sa-flags .sa-marquee__track { gap: 16px; padding-inline: 8px; animation-duration: 45s; }

.sa-flag {
	flex: none;
	width: 120px; height: 120px;
	display: grid;
	place-items: center;
	padding: 32px;
	background: #fff;
	border: 1px solid var(--sa-border-light);
	border-radius: var(--sa-r-xl);
}
.sa-flag svg, .sa-flag img { width: 56px; height: 56px; }

.sa-countries__detail {
	max-width: 528px;
	margin: 40px auto 0;
	font-family: var(--sa-font-ui);
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -.18px;
	color: var(--sa-text-muted);
}
.sa-countries__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 24px;
	font-family: var(--sa-font-ui);
	font-size: 16px;
	font-weight: 500;
	color: var(--sa-link);
}
.sa-countries__link:hover { text-decoration: underline; }

/* ======================================================= Services (dynamic) */

.sa-services { background: var(--sa-surface); }

.sa-services__grid {
	display: grid;
	grid-template-columns: minmax(0, 590px) minmax(0, 722px);
	gap: 56px;
	align-items: start;
}

.sa-services__media { position: relative; }

.sa-services__photo {
	position: relative;
	border-radius: var(--sa-r-lg);
	overflow: hidden;
	box-shadow: var(--sa-shadow-card);
	aspect-ratio: 590 / 737;
}
.sa-services__photo img {
	width: 100%; height: 100%;
	object-fit: cover;
}

.sa-services__ring {
	position: absolute;
	top: 78px; left: -48px;
	width: 96px; height: 96px;
	border: 10px solid var(--sa-red);
	border-radius: 50%;
	opacity: .25;
	pointer-events: none;
}

.sa-services__badge {
	position: absolute;
	right: 24px;
	bottom: -79px;
	width: 240px;
	padding: 24px;
	background: var(--sa-navy);
	border-radius: var(--sa-r-card);
	box-shadow: var(--sa-shadow-float);
	color: #fff;
}
.sa-services__badge-value {
	font-family: var(--sa-font-display);
	font-size: 36px;
	line-height: 40px;
}
.sa-services__badge-label {
	font-size: 14px;
	line-height: 20px;
	margin-top: 4px;
}
.sa-services__badge-rule {
	width: 48px; height: 4px;
	margin-top: 12px;
	border-radius: var(--sa-r-pill);
	background: var(--sa-red);
}

.sa-services__title {
	font-family: var(--sa-font-display);
	font-size: 36px;
	line-height: 40px;
	letter-spacing: .9px;
	text-transform: uppercase;
	color: var(--sa-navy);
}
.sa-services__sub {
	margin-top: 16px;
	font-size: 18px;
	line-height: 28px;
	color: var(--sa-text);
}

.sa-services__cards {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 16px;
	row-gap: 24px;
	margin-top: 40px;
}

.sa-service-card {
	position: relative;
	display: flex;
	flex-direction: column;
	min-height: 188px;
	padding: 24px;
	background: var(--sa-white);
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-r-card);
	transition:
		transform .18s ease,
		box-shadow .18s ease,
		background-color .25s ease,
		border-color .25s ease;
}

.sa-service-card__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 16px;
}

.sa-service-card__icon {
	width: 48px; height: 48px;
	flex: none;
	display: grid;
	place-items: center;
	border-radius: var(--sa-r-md);
	background: var(--sa-surface-alt);
	color: var(--sa-red-bright);
}
.sa-service-card__icon svg { width: 24px; height: 24px; }

.sa-service-card__num {
	font-family: var(--sa-font-num);
	font-size: 44px;
	line-height: 55px;
	font-weight: 600;
	color: rgba(94, 103, 120, .05);
	user-select: none;
}

.sa-service-card__title {
	margin-top: 13px;
	font-family: var(--sa-font-display);
	font-size: 16px;
	line-height: 24px;
	text-transform: uppercase;
	color: var(--sa-navy);
}

.sa-service-card__desc {
	margin-top: 7px;
	font-size: 14px;
	line-height: 16px;
	color: var(--sa-text);
}

/* No card is active at rest: hovering one -- and only that one -- turns it navy.
   Gated on a real pointer so touch devices never get stuck in the hover state. */
.sa-service-card__num,
.sa-service-card__title,
.sa-service-card__desc { transition: color .25s ease; }

@media (hover: hover) {
	.sa-service-card:hover {
		transform: translateY(-2px);
		background: var(--sa-navy);
		border-color: var(--sa-navy);
		box-shadow: 0 14px 30px rgba(19, 38, 83, .18);
	}
	.sa-service-card:hover .sa-service-card__num { color: rgba(255, 255, 255, .10); }
	.sa-service-card:hover .sa-service-card__title,
	.sa-service-card:hover .sa-service-card__desc { color: #fff; }
}

.sa-services__empty {
	grid-column: 1 / -1;
	padding: 24px;
	border: 1px dashed var(--sa-border);
	border-radius: var(--sa-r-card);
	color: var(--sa-text);
	font-size: 14px;
}

/* -------------------------------------------------------------- Packages */

.sa-packages { background: var(--sa-surface); text-align: center; }
.sa-packages__title {
	font-family: var(--sa-font-display);
	font-size: 36px;
	line-height: 44px;
	text-transform: uppercase;
	color: var(--sa-navy);
}
.sa-packages__sub {
	max-width: 640px;
	margin: 16px auto 0;
	font-size: 16px;
	line-height: 24px;
	color: var(--sa-text);
}

.sa-tabs {
	display: inline-flex;
	gap: 4px;
	margin-top: 32px;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--sa-border-light);
	border-radius: var(--sa-r-pill);
	box-shadow: var(--sa-shadow-soft);
	max-width: 100%;
	overflow-x: auto;
}
.sa-tab {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 0;
	border-radius: var(--sa-r-pill);
	background: transparent;
	font-family: var(--sa-font-ui);
	font-size: 15px;
	font-weight: 500;
	color: var(--sa-navy);
	cursor: pointer;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}
.sa-tab[aria-selected="true"] { background: var(--sa-navy); color: #fff; }
.sa-tab__count {
	display: inline-grid;
	place-items: center;
	min-width: 22px; height: 22px;
	padding-inline: 6px;
	border-radius: var(--sa-r-pill);
	background: var(--sa-surface-alt);
	font-size: 12px;
	font-weight: 600;
	color: var(--sa-navy);
}
.sa-tab[aria-selected="true"] .sa-tab__count { background: var(--sa-red); color: #fff; }

/* ------------------------------------------------- Splide package slider */
/* Grid puts the controls on one row under the track: dots left, arrows right.
   `visibility: visible` overrides Splide's own hidden-until-mounted rule so the
   products still show if the script fails. */
.sa-packages__slider {
	display: grid;
	grid-template-columns: 1fr auto;
	grid-template-areas:
		"track track"
		"dots  arrows";
	row-gap: 32px;
	margin-top: 40px;
	visibility: visible;
	text-align: left;
}
.sa-packages__slider .splide__track { grid-area: track; }
.sa-packages__slider .splide__slide { height: auto; }
/* Two cards to a slide. The gap matches the carousel's own 24px so the grid
   reads as one four-by-two block rather than two rows that happen to line up. */
.sa-packages__stack {
	display: flex;
	flex-direction: column;
	gap: 24px;
}

.sa-packages__slider .sa-arrows {
	grid-area: arrows;
	justify-self: end;
	display: flex;
	gap: 12px;
}
.sa-packages__slider .sa-arrow { width: 44px; height: 44px; }
.sa-packages__slider .sa-arrow svg { width: 18px; height: 18px; }

/* The package arrows are red at rest. Hover is left exactly as it is on every
   other carousel - navy fill, white chevron - so the two states still read as
   one control rather than two unrelated buttons. Not scoped to a page: this
   slider appears on About, Services and Success Stories, and the three should
   not disagree about what their arrows look like. */
.sa-packages__slider .sa-arrow {
	border-color: var(--sa-red);
	background: var(--sa-red);
	color: #FFFFFF;
}
.sa-packages__slider .sa-arrow[disabled]:hover {
	background: var(--sa-red);
	color: #FFFFFF;
}

.sa-packages__slider .sa-dots {
	grid-area: dots;
	justify-self: start;
	align-self: center;
	display: flex;
	gap: 8px;
	margin: 0;
	padding: 0;
}
.sa-packages__slider .sa-dots li { display: block; line-height: 0; }
.sa-packages__slider .sa-dot { display: block; margin: 0; }
.sa-packages__slider .sa-dot.is-active { width: 28px; background: var(--sa-red); }

/* The artwork covers the card and slides right on hover, uncovering the detail
   panel beneath it. Both layers are the same size, so nothing reflows. */
.sa-package {
	position: relative;
	display: block;
	aspect-ratio: 1 / 1;
	border-radius: var(--sa-r-card);
	overflow: hidden;
	box-shadow: 0 6px 18px rgba(19, 38, 83, .10);
	background: var(--sa-navy);
	transition: box-shadow .25s ease;
}
.sa-package:hover { box-shadow: 0 16px 34px rgba(19, 38, 83, .20); }

.sa-package__media {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	background: var(--sa-surface-alt);
	transition: transform .55s cubic-bezier(.65, 0, .35, 1);
	will-change: transform;
}
.sa-package__media img { width: 100%; height: 100%; object-fit: cover; }

/* Hover-to-slide is the desktop interaction, so it is gated on width as well as
   on hover: a narrowed desktop window is someone looking at the mobile layout,
   and there the card should flip from the cart button like it does on a phone.
   The two modes are mutually exclusive -- see the matching query below. */
@media (hover: hover) and (min-width: 901px) {
	.sa-package:hover .sa-package__media,
	.sa-package:focus-within .sa-package__media { transform: translateX(100%); }
}

/* ---- detail panel underneath ---- */
.sa-package__info {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	padding: 24px;
	background: var(--sa-navy);
	color: #fff;
	text-align: left;
}

.sa-package__name {
	font-family: var(--sa-font-display);
	font-size: 17px;
	line-height: 24px;
	text-transform: uppercase;
	color: #fff;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sa-package__points {
	display: grid;
	gap: 10px;
	margin-top: 18px;
	min-height: 0;
	overflow: hidden;
}
.sa-package__points li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: 14px;
	line-height: 20px;
	color: rgba(255, 255, 255, .86);
}
.sa-package__points svg {
	width: 16px;
	height: 16px;
	margin-top: 2px;
	color: var(--sa-red-bright);
}

.sa-package__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 18px;
	border-top: 1px solid rgba(255, 255, 255, .18);
}
.sa-package__price {
	font-family: var(--sa-font-display);
	font-size: 26px;
	line-height: 1.1;
	color: #fff;
	font-variant-numeric: tabular-nums;
}
.sa-package__price del { font-size: 15px; opacity: .6; margin-right: 6px; }
.sa-package__price ins { text-decoration: none; }

.sa-package__buy {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	flex: none;
	height: 42px;
	padding-inline: 16px;
	border-radius: var(--sa-r-sm);
	background: var(--sa-red);
	color: #fff;
	font-size: 14px;
	font-weight: 500;
	white-space: nowrap;
	transition: background-color .15s ease, transform .15s ease;
}
.sa-package__buy:hover { background: #8E1724; transform: translateY(-1px); }

/* ---- mobile: cart button flips the card ----
   Hover does not exist on touch, so the artwork cannot slide aside there. The
   card keeps its designed look -- artwork only -- and the cart button in the
   corner turns it over to the detail side. Hidden above 900px on pointer
   devices, where the hover slide takes over instead. */
.sa-package__cart,
.sa-package__back {
	position: absolute;
	z-index: 4;
	display: none;
	place-items: center;
	padding: 0;
	border: 0;
	cursor: pointer;
	transition: opacity .25s ease, transform .25s ease, background-color .15s ease;
}
.sa-package__cart {
	right: 14px;
	bottom: 14px;
	width: 48px;
	height: 48px;
	border-radius: 50%;
	background: var(--sa-red);
	color: #fff;
	box-shadow: 0 6px 16px rgba(175, 29, 43, .38);
}
.sa-package__cart svg { width: 22px; height: 22px; }
.sa-package__cart:active { transform: scale(.94); }

.sa-package__back {
	right: 12px;
	top: 12px;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .16);
	color: #fff;
}
.sa-package__back svg { width: 16px; height: 16px; }
.sa-package__back:active { transform: scale(.92); }

@media (hover: none), (max-width: 900px) {
	.sa-package,
	.sa-package:hover {
		perspective: 1200px;
		overflow: visible;
		background: transparent;
		/* The card itself is now just a stage; the shadow belongs to each face.
		   Left on, it would draw a rectangle behind the turning card, and on
		   touch :hover sticks after a tap. */
		box-shadow: none;
	}
	.sa-package:hover img { transform: none; }

	/* The two faces turn independently -- no wrapper element, so the hover
	   layout above keeps working exactly as it does now. */
	.sa-package__media,
	.sa-package__info {
		position: absolute;
		inset: 0;
		border-radius: var(--sa-r-card);
		overflow: hidden;
		-webkit-backface-visibility: hidden;
		backface-visibility: hidden;
		box-shadow: 0 6px 18px rgba(19, 38, 83, .10);
		transition: transform .6s cubic-bezier(.4, 0, .2, 1);
	}
	.sa-package__media { transform: rotateY(0deg); }
	.sa-package__info { transform: rotateY(180deg); }
	.sa-package.is-flipped .sa-package__media { transform: rotateY(-180deg); }
	.sa-package.is-flipped .sa-package__info { transform: rotateY(0deg); }

	.sa-package__cart,
	.sa-package__back { display: grid; }

	/* Only the face in front takes taps. */
	.sa-package.is-flipped .sa-package__cart,
	.sa-package:not(.is-flipped) .sa-package__back {
		opacity: 0;
		transform: scale(.8);
		pointer-events: none;
	}

	/* One subtle nudge as the section arrives, to show the button is live.
	   services.js adds the class and drops it again on animationend, so the
	   fill state never sticks and never fights the flip transform. */
	.sa-package__cart.is-cued {
		animation: sa-cart-cue .72s cubic-bezier(.34, 1.3, .64, 1) backwards;
		animation-delay: var(--sa-cue-delay, 0ms);
	}
}

@keyframes sa-cart-cue {
	0%   { opacity: 0; transform: translateX(18px) scale(.82); }
	62%  { opacity: 1; transform: translateX(-4px) scale(1.06); }
	100% { opacity: 1; transform: translateX(0) scale(1); }
}

@media (prefers-reduced-motion: reduce) {
	.sa-package__media { transition: none; }
	.sa-package__info { transition: none; }
	.sa-package__cart.is-cued { animation: none; }
}

.sa-packages__panel[hidden] { display: none; }

.sa-packages__controls {
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin-top: 32px;
}
.sa-dots { display: flex; gap: 8px; }
.sa-dot {
	width: 8px; height: 8px;
	padding: 0;
	border: 0;
	border-radius: var(--sa-r-pill);
	background: #D9DCE2;
	cursor: pointer;
	transition: width .2s ease, background-color .2s ease;
}
.sa-dot[aria-current="true"] { width: 28px; background: var(--sa-red); }

.sa-arrows { display: flex; gap: 12px; }
.sa-arrow {
	width: 44px; height: 44px;
	display: grid;
	place-items: center;
	border: 1px solid var(--sa-border);
	border-radius: 50%;
	background: #fff;
	color: var(--sa-navy);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.sa-arrow:hover { background: var(--sa-navy); color: #fff; }
.sa-arrow[disabled] { opacity: .4; cursor: default; }
.sa-arrow[disabled]:hover { background: #fff; color: var(--sa-navy); }

/* --------------------------------------------------------------- Journey */

.sa-journey {
	position: relative;
	background: var(--sa-navy);
	color: #fff;
	text-align: center;
	overflow: hidden;
}
/* Figma: a 1281x598 box, 660px radius, bottom border only (24px crimson at 40%),
   rotated +10deg -- the sweep across the lower left. Measured in cqw (value/1440)
   and anchored to the section's bottom so it holds at any width or height. */
.sa-journey { container-type: inline-size; }
.sa-journey::after {
	content: '';
	position: absolute;
	z-index: 0;
	left: -11.306cqw;      /* -162.8 / 1440 */
	bottom: 2.521cqw;      /*   36.3 / 1440 */
	width: 88.986cqw;      /* 1281.4 / 1440 */
	height: 41.528cqw;     /*    598 / 1440 */
	border-bottom: 1.667cqw solid rgba(175, 29, 43, .4); /* 24 / 1440 */
	border-radius: 45.833cqw;                            /* 660 / 1440 */
	transform: rotate(10deg);
	pointer-events: none;
}
/* Keep the heading above the sweep. */
.sa-journey > .sa-container { position: relative; z-index: 1; }
.sa-journey__title {
	font-family: var(--sa-font-display);
	font-size: 36px;
	line-height: 44px;
	text-transform: uppercase;
}
.sa-journey__sub {
	max-width: 680px;
	margin: 12px auto 0;
	font-size: 16px;
	line-height: 24px;
	color: rgba(255, 255, 255, .72);
}
.sa-journey__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	margin-top: 48px;
	text-align: left;
}
.sa-step {
	padding: 24px;
	border: 1px solid rgba(255, 255, 255, .14);
	border-radius: var(--sa-r-card);
	background: rgba(255, 255, 255, .04);
}
.sa-step__num {
	font-family: var(--sa-font-num);
	font-size: 44px;
	line-height: 55px;
	font-weight: 600;
	color: rgba(255, 255, 255, .14);
}
.sa-step__title {
	margin-top: 12px;
	font-family: var(--sa-font-display);
	font-size: 18px;
	line-height: 26px;
	text-transform: uppercase;
}
.sa-step__desc {
	margin-top: 10px;
	font-size: 14px;
	line-height: 20px;
	color: rgba(255, 255, 255, .72);
}
/* All four rest in the dark style; hover lifts one card to white. */
.sa-step__num,
.sa-step__title,
.sa-step__desc { transition: color .25s ease; }

@media (hover: hover) {
	.sa-step:hover {
		transform: translateY(-3px);
		background: #fff;
		border-color: #fff;
		box-shadow: 0 18px 40px rgba(0, 0, 0, .28);
	}
	.sa-step:hover .sa-step__num { color: var(--sa-red); }
	.sa-step:hover .sa-step__title { color: var(--sa-navy); }
	.sa-step:hover .sa-step__desc { color: var(--sa-text); }
}

/* --------------------------------------------------------------- Roadmap */

.sa-roadmap { background: #fff; border-bottom: 1px solid var(--sa-border); }
.sa-roadmap__head {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
}
.sa-roadmap__title {
	font-family: var(--sa-font-display);
	font-size: 36px;
	line-height: 44px;
	text-transform: uppercase;
	color: var(--sa-navy);
}
.sa-roadmap__sub {
	margin-top: 10px;
	font-size: 16px;
	line-height: 24px;
	color: var(--sa-text);
}

.sa-toggle {
	display: inline-flex;
	gap: 4px;
	padding: 6px;
	background: #fff;
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-r-pill);
}
.sa-toggle button {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 10px 18px;
	border: 0;
	border-radius: var(--sa-r-pill);
	background: transparent;
	font-family: var(--sa-font-ui);
	font-size: 15px;
	font-weight: 500;
	color: var(--sa-navy);
	cursor: pointer;
}
.sa-toggle button[aria-selected="true"] { background: var(--sa-red); color: #fff; }

.sa-timeline {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 32px;
	margin-top: 48px;
}
.sa-milestone { position: relative; padding-top: 56px; }
.sa-milestone::before {
	content: '';
	position: absolute;
	top: 17px; left: 0; right: 0;
	height: 1px;
	background: var(--sa-border);
}
.sa-milestone:last-child::before { right: 50%; }
.sa-milestone:first-child::before { left: 50%; }
.sa-milestone__dot {
	position: absolute;
	top: 0; left: 0;
	width: 36px; height: 36px;
	display: grid;
	place-items: center;
	border: 1px solid var(--sa-border);
	border-radius: 50%;
	background: #fff;
	font-family: var(--sa-font-ui);
	font-size: 14px;
	color: var(--sa-text);
	z-index: 1;
}
/* Nothing is active at rest. Pointer devices highlight on hover; touch devices
   keep the tap-to-activate behaviour the section copy promises. */
.sa-milestone__dot { transition: background-color .25s ease, border-color .25s ease, color .25s ease; }
.sa-milestone__when,
.sa-milestone__title,
.sa-milestone__desc { transition: color .25s ease; }

.sa-milestone.is-active .sa-milestone__dot {
	background: var(--sa-red);
	border-color: var(--sa-red);
	color: #fff;
}
@media (hover: hover) {
	.sa-milestone:hover .sa-milestone__dot {
		background: var(--sa-red);
		border-color: var(--sa-red);
		color: #fff;
	}
}
/* Every milestone gets the same box so the active card can't shift or overlap
   its neighbours; the 16px overhang each side exactly fills the 32px grid gap. */
.sa-milestone__body {
	padding: 16px;
	margin-inline: -16px;
	border-radius: var(--sa-r-card);
}
.sa-milestone.is-active .sa-milestone__body {
	background: var(--sa-navy);
	color: #fff;
}
@media (hover: hover) {
	.sa-milestone:hover .sa-milestone__body {
		background: var(--sa-navy);
		color: #fff;
	}
}
.sa-milestone__when {
	font-family: var(--sa-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--sa-red);
}
.sa-milestone.is-active .sa-milestone__when { color: #FF8A95; }
@media (hover: hover) { .sa-milestone:hover .sa-milestone__when { color: #FF8A95; } }
.sa-milestone__title {
	margin-top: 8px;
	font-family: var(--sa-font-display);
	font-size: 18px;
	line-height: 24px;
	text-transform: uppercase;
	color: var(--sa-navy);
}
.sa-milestone.is-active .sa-milestone__title { color: #fff; }
@media (hover: hover) { .sa-milestone:hover .sa-milestone__title { color: #fff; } }
.sa-milestone__desc {
	margin-top: 8px;
	font-size: 14px;
	line-height: 20px;
	color: var(--sa-text);
}
.sa-milestone.is-active .sa-milestone__desc { color: rgba(255, 255, 255, .8); }
@media (hover: hover) { .sa-milestone:hover .sa-milestone__desc { color: rgba(255, 255, 255, .8); } }

/* ------------------------------------------------------------ Comparison */

.sa-compare { background: var(--sa-cream); text-align: center; }
.sa-compare__title {
	font-family: var(--sa-font-display);
	font-size: 36px;
	line-height: 44px;
	text-transform: uppercase;
	color: var(--sa-navy);
}
.sa-compare__sub {
	max-width: 700px;
	margin: 12px auto 0;
	font-size: 16px;
	line-height: 24px;
	color: var(--sa-text);
}
.sa-compare__wrap {
	margin-top: 48px;
	overflow-x: auto;
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-r-lg);
	background: #fff;
}
.sa-compare table {
	width: 100%;
	min-width: 720px;
	border-collapse: collapse;
	text-align: left;
}
.sa-compare th, .sa-compare td {
	padding: 20px 24px;
	border-bottom: 1px solid var(--sa-border);
	font-size: 14px;
}
.sa-compare thead th {
	font-family: var(--sa-font-ui);
	font-weight: 500;
	color: var(--sa-text);
	background: #fff;
}
.sa-compare tbody td:first-child {
	font-weight: 600;
	color: var(--sa-navy);
}
.sa-compare .sa-col-center { text-align: center; width: 150px; }
.sa-compare .sa-col-brand {
	background: #F7F9FC;
	text-align: center;
	width: 160px;
}
.sa-compare thead .sa-col-brand {
	position: relative;
	background: var(--sa-navy);
	color: #fff;
	font-family: var(--sa-font-display);
	font-size: 12px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	border-top-right-radius: var(--sa-r-lg);
}
/* Figma: a 160x4 crimson bar flush across the top of the brand header cell,
   following the table's rounded top-right corner. */
.sa-compare thead .sa-col-brand::before {
	content: '';
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 4px;
	background: var(--sa-red);
	border-top-right-radius: var(--sa-r-lg);
}
.sa-compare tbody tr:last-child td { border-bottom: 0; }

/* Row hover uses the page's cream. The brand column carries its own background,
   so it needs the colour too or the highlight would stop dead at that column. */
.sa-compare tbody tr,
.sa-compare tbody td { transition: background-color .2s ease, color .2s ease; }

@media (hover: hover) {
	.sa-compare tbody tr:hover,
	.sa-compare tbody tr:hover .sa-col-brand { background: var(--sa-cream); }
	.sa-compare tbody tr:hover td:first-child { color: var(--sa-navy); }
}

.sa-mark {
	display: inline-grid;
	place-items: center;
	width: 24px; height: 24px;
	border-radius: 50%;
	font-size: 13px;
	line-height: 1;
}
.sa-mark--no { background: #F0F0F0; color: #A3A3A3; }
.sa-mark--partial { background: #FEF3C7; color: #F59E0B; }
.sa-mark--yes-muted { background: #E6EAF2; color: var(--sa-navy); }
.sa-mark--yes { background: var(--sa-red); color: #fff; }

/* --------------------------------------------------------------- Stories */

.sa-stories { background: #fff; text-align: center; }
.sa-stories__title {
	font-family: var(--sa-font-display);
	font-size: 36px;
	line-height: 44px;
	text-transform: uppercase;
	color: var(--sa-ink-strong);
}
/* Figma: two rows of four 480x600 cards with a 12px gap, each row 1956px wide so
   it runs past the 1440 frame, and the second row shifted 180px left. Expressed
   in vw (480/1440 = 33.333) so the whole arrangement scales with the viewport. */
.sa-stories__rows {
	display: grid;
	row-gap: 14px;
	margin-top: 48px;
	overflow: hidden;
}

/* Each row holds two identical tracks and slides one full track width, so the
   second copy is always arriving as the first leaves -- a seamless loop with no
   endpoint or reset. Row 2 runs in reverse, so the rows pass in opposite
   directions. The negative delay starts it mid-cycle, preserving the staggered
   offset the design has at rest. */
.sa-stories__row {
	display: flex;
	width: max-content;
}
.sa-stories__track {
	display: flex;
	gap: 0.833vw;             /* 12 / 1440 */
	padding-right: 0.833vw;   /* keeps the gap across the join between copies */
	flex: none;
	animation: sa-stories-scroll 48s linear infinite;
}
.sa-stories__row--2 .sa-stories__track {
	animation-direction: reverse;
	animation-delay: -24s;
}

@keyframes sa-stories-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

/* Hovering a row pauses just that row, and it resumes from where it stopped. */
.sa-stories__row:hover .sa-stories__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
	.sa-stories__track { animation: none; }
	.sa-stories__track + .sa-stories__track { display: none; }
}

/* Five posters across rather than the design's three. At a third of the
   viewport each card stood 600px tall on a 1440 screen, which is most of a
   laptop's height for a band that is only passing through - and only three
   certificates were ever on show. A fifth of the viewport puts five across at
   360 tall, keeping the design's 480:600 proportion. */
.sa-story {
	flex: 0 0 20vw;    /* 288 at 1440, against the design's 480 */
	overflow: hidden;
	aspect-ratio: 480 / 600;
	background: var(--sa-surface-alt);
}
.sa-story img { width: 100%; height: 100%; object-fit: cover; }

.sa-stories__video {
	position: relative;
	max-width: 896px;
	margin: 48px auto 0;
	aspect-ratio: 896 / 490;
	border-radius: var(--sa-r-lg);
	overflow: hidden;
	box-shadow: var(--sa-shadow-card);
	background: #000;
}
.sa-stories__video iframe,
.sa-stories__video img {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	border: 0;
	object-fit: cover;
}

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

.sa-faq { background: var(--sa-cream); }
.sa-faq__grid {
	display: grid;
	grid-template-columns: minmax(0, 480px) minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}
.sa-faq__title {
	font-family: var(--sa-font-display);
	font-size: 36px;
	line-height: 44px;
	text-transform: uppercase;
	color: var(--sa-navy);
}
.sa-faq__sub {
	margin-top: 16px;
	font-size: 16px;
	line-height: 24px;
	color: var(--sa-text);
}
.sa-faq__cta {
	margin-top: 32px;
	padding: 24px;
	background: #fff;
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-r-card);
}
.sa-faq__cta-row { display: flex; align-items: center; gap: 12px; }
.sa-faq__cta-icon {
	width: 40px; height: 40px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: #FCE8EA;
	color: var(--sa-red);
	flex: none;
}
.sa-faq__cta-title { font-weight: 600; color: var(--sa-navy); font-size: 15px; }
.sa-faq__cta-note { font-size: 13px; color: var(--sa-text); margin-top: 2px; }
.sa-faq__cta .sa-btn { margin-top: 20px; height: 48px; border-radius: var(--sa-r-pill); background: var(--sa-red); }
.sa-faq__cta .sa-btn:hover { background: #951825; }

.sa-faq__list { display: grid; gap: 16px; }
.sa-accordion {
	background: #fff;
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-r-card);
	overflow: hidden;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.sa-accordion[open] { border-color: #F3C3C9; box-shadow: 0 6px 18px rgba(175, 29, 43, .07); }
.sa-accordion__q {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 20px 24px;
	font-weight: 600;
	font-size: 15px;
	color: var(--sa-navy);
	cursor: pointer;
	list-style: none;
}
.sa-accordion__q::-webkit-details-marker { display: none; }
.sa-accordion__q svg { flex: none; transition: transform .2s ease; }
.sa-accordion[open] .sa-accordion__q svg { transform: rotate(180deg); }
.sa-accordion__a {
	padding: 0 24px 20px;
	font-size: 14px;
	line-height: 22px;
	color: var(--sa-text);
}

/* ------------------------------------------------------------------- CTA */

.sa-cta { padding-block: 0 var(--sa-section-y); background: var(--sa-cream); }
.sa-cta__box {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 656px);
	gap: 48px;
	align-items: center;
	padding: 56px;
	border-radius: var(--sa-r-xl);
	background: var(--sa-navy);
	overflow: hidden;
	color: #fff;
}
.sa-cta__bg {
	position: absolute;
	inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	opacity: .10;
	pointer-events: none;
}
.sa-cta__inner { position: relative; z-index: 1; }
.sa-cta__badge {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: var(--sa-r-pill);
	background: var(--sa-red);
	font-family: var(--sa-font-display);
	font-size: 12px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
}
.sa-cta__title {
	margin-top: 20px;
	font-family: var(--sa-font-display);
	font-size: 36px;
	line-height: 44px;
	text-transform: uppercase;
}
.sa-cta__text {
	margin-top: 16px;
	max-width: 480px;
	font-size: 16px;
	line-height: 24px;
	color: rgba(255, 255, 255, .78);
}
.sa-cta__list { margin-top: 24px; display: grid; gap: 12px; }
.sa-cta__list li {
	display: flex;
	align-items: center;
	gap: 10px;
	font-size: 14px;
	color: rgba(255, 255, 255, .9);
}
.sa-cta__list svg { color: var(--sa-red-bright); flex: none; }

.sa-cta__form {
	position: relative;
	z-index: 1;
	padding: 32px;
	background: #fff;
	border-radius: var(--sa-r-lg);
	color: var(--sa-navy);
}
.sa-cta__form-title {
	font-family: var(--sa-font-display);
	font-size: 20px;
	line-height: 28px;
	text-transform: uppercase;
	color: var(--sa-navy);
}
.sa-field { margin-top: 20px; }
.sa-field label {
	display: block;
	margin-bottom: 8px;
	font-size: 14px;
	font-weight: 500;
	color: var(--sa-navy);
}
.sa-field input,
.sa-field select {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-r-sm);
	font-family: var(--sa-font-body);
	font-size: 15px;
	color: var(--sa-navy);
	background: #fff;
}
.sa-field input:focus,
.sa-field select:focus {
	outline: 2px solid rgba(175, 29, 43, .35);
	outline-offset: 1px;
	border-color: var(--sa-red);
}
.sa-cta__form .sa-btn { margin-top: 24px; background: #E08A94; border-radius: var(--sa-r-sm); }
.sa-cta__form .sa-btn:hover { background: var(--sa-red); }

/* --------------------------------------------------- WPForms (booking form) */
/* WPForms' own stylesheet is stripped along with everything else, so the plugin's
   markup is styled here to match the designed fields above. */

.sa-cta__form .wpforms-container { margin: 0; }
.sa-cta__form .wpforms-field-container { display: grid; gap: 20px; }

.sa-cta__form .wpforms-field {
	display: flex;
	flex-direction: column;
	padding: 0;
	margin: 0;
}

.sa-cta__form .wpforms-field-label {
	display: block;
	margin: 0 0 8px;
	font-family: var(--sa-font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--sa-navy);
}
.sa-cta__form .wpforms-required-label { color: var(--sa-red); }

.sa-cta__form .wpforms-field input[type="text"],
.sa-cta__form .wpforms-field input[type="email"],
.sa-cta__form .wpforms-field select {
	width: 100%;
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-r-sm);
	background: #fff;
	font-family: var(--sa-font-body);
	font-size: 15px;
	line-height: 48px;
	color: var(--sa-navy);
	appearance: none;
}
.sa-cta__form .wpforms-field select {
	/* chevron, since appearance:none drops the native one */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%235E6778' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	padding-right: 40px;
}
.sa-cta__form .wpforms-field input::placeholder { color: #9AA3B2; }

.sa-cta__form .wpforms-field input:focus,
.sa-cta__form .wpforms-field select:focus {
	outline: 2px solid rgba(175, 29, 43, .35);
	outline-offset: 1px;
	border-color: var(--sa-red);
}

.sa-cta__form .wpforms-field input.wpforms-error,
.sa-cta__form .wpforms-field select.wpforms-error { border-color: var(--sa-red); }

.sa-cta__form label.wpforms-error {
	margin-top: 6px;
	font-size: 13px;
	line-height: 18px;
	color: var(--sa-red);
}

.sa-cta__form .wpforms-submit-container { margin-top: 24px; padding: 0; }
.sa-cta__form button.wpforms-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 52px;
	border: 0;
	border-radius: var(--sa-r-sm);
	background: var(--sa-red);
	color: #fff;
	font-family: var(--sa-font-body);
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	transition: background-color .15s ease;
}
.sa-cta__form button.wpforms-submit:hover { background: #8E1724; }
.sa-cta__form button.wpforms-submit[disabled] { opacity: .6; cursor: default; }

.sa-cta__form .wpforms-submit-spinner { margin-left: 8px; }

.sa-cta__form .wpforms-confirmation-container-full,
.sa-cta__form .wpforms-confirmation-container {
	margin: 0;
	padding: 20px;
	border: 1px solid #BFE3C8;
	border-radius: var(--sa-r-sm);
	background: #F1F9F3;
	color: #1C6B33;
	font-size: 15px;
	line-height: 22px;
}
.sa-cta__form .wpforms-confirmation-container p:last-child { margin-bottom: 0; }

.sa-cta__form .wpforms-error-container {
	margin-bottom: 16px;
	padding: 14px 16px;
	border: 1px solid #F3C3C9;
	border-radius: var(--sa-r-sm);
	background: #FDF2F3;
	color: var(--sa-red);
	font-size: 14px;
}

/* ============================================================ HOME: Hero ==
   Figma y0-940. Copy left in a 626 column, 809x809 artwork bleeding off the
   right edge. Heading is Avec 56/60 in navy with the middle line in red. */

/* Figma: one 1441x800 image spanning the whole hero, copy over its pale left
   half, header floating on top. The artwork carries its own light area for the
   text, so no panel is needed -- only a soft scrim for narrow screens, where
   the cover-crop pushes that light area out of frame. */
.sa-hhero { padding-block: 40px 0; }
.sa-hhero__grid {
	display: grid;
	grid-template-columns: minmax(0, 626fr) minmax(0, 700fr);
	align-items: center;
	gap: 32px;
}

.sa-hhero__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}
/* The <picture> is only there to choose the file; it must not become a box of
   its own, or the image inside loses the frame it sizes against. */
.sa-hhero__bg picture { display: contents; }
.sa-hhero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	/* Keep the student and the globe in frame as the crop tightens. */
	object-position: 72% center;
	display: block;
}
/* Fades the artwork into the page colour on the left so the copy stays
   readable once the crop eats into the pale area. */
.sa-hhero__bg::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		var(--sa-cream) 0%,
		rgba(252, 251, 247, .92) 22%,
		rgba(252, 251, 247, .45) 42%,
		rgba(252, 251, 247, 0) 60%
	);
}
.sa-hhero__title {
	font-family: var(--sa-font-display);
	font-size: 56px;
	line-height: 60px;
	color: #002768;
}
.sa-hhero__title .sa-accent { color: var(--sa-red); }

.sa-hhero__lead {
	margin-top: 16px;
	max-width: 626px;
	font-family: var(--sa-font-ui);
	font-size: 20px;
	line-height: 30px;
	color: #556171;
}

.sa-hhero__actions { display: flex; align-items: center; gap: 23px; margin-top: 32px; }
.sa-hhero__actions .sa-btn { flex: none; padding-inline: 20px; }

/* The outline button in the design is navy, not the Services ghost grey. */
.sa-btn--outline {
	border: 1px solid #002C54;
	background: transparent;
	color: #002C54;
	transition: background-color .15s ease, color .15s ease;
}
.sa-btn--outline:hover { background: #002C54; color: #fff; }

.sa-hhero__media { position: relative; }
.sa-hhero__media img {
	display: block;
	width: 100%;
	max-width: 809px;
	height: auto;
	margin-left: auto;
}
.sa-hhero__media--empty {
	aspect-ratio: 1 / 1;
	max-width: 809px;
	margin-left: auto;
	border-radius: 50%;
	background: #E6E8EE;
}

/* ---- Home only: the artwork runs to the viewport edge and up behind the
   header, which floats over it as a white pill. Figma puts the 809x809 image
   at left 631, top 0 -- i.e. flush to the top-right of a 1440 frame -- with
   the header bar at top 27. Services keeps its solid header bar. ---- */
.sa-home {
	/* 16 padding + the 100px pill + 16 padding. Measured, not assumed: the pill
	   is 100 tall once its own padding is counted, not its 74px min-height. */
	--sa-header-h: 132px;
	/* The landing page carries more sections than any other, and at 96 top and
	   bottom the gaps between them read as empty rather than as breathing room.
	   Scoped here so the pages already signed off keep their spacing. */
	--sa-section-y: 72px;
	/* The accreditation strip under the hero: 32px padding, a 94px logo cell,
	   32px padding. Measured the same at every width, because the marquee
	   cells are a fixed size. The hero subtracts it so the two share one
	   screenful - change the strip's padding or cell height and this follows. */
	--sa-strip-h: 158px;
}
.sa-home .sa-header { background: transparent; }

.sa-home .sa-hhero {
	position: relative;
	margin-top: calc(-1 * var(--sa-header-h));
	padding-top: var(--sa-header-h);
	padding-bottom: 0;
	/* One screenful shared with the strip beneath it, whatever the screen.
	   Measured off the window rather than set to a number: a fixed 1080 ran off
	   the bottom of a 1366x768 laptop and made people scroll to reach the
	   buttons. The hero is pulled up under the header, so subtracting the strip
	   from 100vh lands the strip's foot exactly on the fold. min-height, not
	   height, so a very short window grows rather than clipping the copy.
	   The tablet and phone breakpoints further down still override it. */
	min-height: calc(100vh - var(--sa-strip-h));
	display: flex;
	align-items: center;
	isolation: isolate;
}
/* Copy above the artwork and its scrim. */
.sa-home .sa-hhero__copy { position: relative; z-index: 1; }
.sa-home .sa-hhero > .sa-container { position: relative; z-index: 1; width: 100%; }

/* Figma starts the hero copy at x56, which is the container's BOX edge rather
   than its content edge -- the 24px gutter would otherwise push it to 80. */
@media (min-width: 1101px) {
	.sa-home .sa-hhero > .sa-container { padding-inline: 0; }
}

/* One column now -- the artwork is the background, not a grid cell. */
.sa-home .sa-hhero__grid {
	grid-template-columns: minmax(0, 626px);
	gap: 0;
}

/* Tablet: the crop tightens, so lean harder on the scrim and give the copy a
   little more room before it reaches the student. */
@media (max-width: 1100px) {
	/* The same shared screenful as the desktop rule. A landscape tablet is
	   1024x768, where the plain 620px cap left the strip 10px past the fold. */
	.sa-home .sa-hhero { min-height: min(620px, 72vw, calc(100vh - var(--sa-strip-h))); }
	.sa-home .sa-hhero__grid { grid-template-columns: minmax(0, 60%); }
	.sa-hhero__bg img { object-position: 78% center; }
	.sa-hhero__bg::after {
		background: linear-gradient(
			90deg,
			var(--sa-cream) 0%,
			rgba(252, 251, 247, .95) 34%,
			rgba(252, 251, 247, .6) 55%,
			rgba(252, 251, 247, 0) 75%
		);
	}
}

/* Phone: there is no width left to hold copy over artwork, so the image goes
   back to being a full-bleed banner with the text beneath it on plain cream --
   the arrangement that already reads well at this size. */
@media (max-width: 760px) {
	/* Headline first, then the picture. With the artwork on top the staged
	   entrance opened into an empty frame at the top of the screen and the
	   words arrived underneath it, which is the opposite of what it should
	   read like. The three wrappers step out of the layout so the headline,
	   the lead, the artwork and the buttons become siblings of the section and
	   can simply be ordered. */
	.sa-home .sa-hhero {
		display: flex;
		flex-direction: column;
		/* The desktop rule centres its items; as a column that shrink-wraps
		   each row to its own content and pulls the buttons into the middle. */
		align-items: stretch;
		min-height: 0;
		margin-top: 0;
		padding-top: 24px;
	}
	.sa-home .sa-hhero > .sa-container,
	.sa-home .sa-hhero__grid,
	.sa-home .sa-hhero__copy { display: contents; }

	.sa-home .sa-hhero__title   { order: 1; }
	.sa-home .sa-hhero__lead    { order: 2; }
	.sa-home .sa-hhero__bg      { order: 3; }
	.sa-home .sa-hhero__actions { order: 4; }

	/* The side gutter came from .sa-container, which is no longer a box. The
	   artwork keeps running full-bleed, as it did before. */
	.sa-home .sa-hhero__title,
	.sa-home .sa-hhero__lead,
	.sa-home .sa-hhero__actions { padding-inline: var(--sa-gutter); }

	.sa-home .sa-header { background: var(--sa-cream); }

	.sa-hhero__bg {
		/* Already a direct child of the full-width section, so it needs no
		   negative margin to bleed -- adding one would push past the viewport
		   and bring back the horizontal scrollbar. */
		position: relative;
		inset: auto;
		/* The phone artwork's own 1875 x 2188. It is a composition - the
		   swoosh, the globe and the student are placed against each other -
		   so a landscape frame would have cropped the picture apart rather
		   than reframed it. Matching the source means cover never crops. */
		aspect-ratio: 1875 / 2188;
		margin-top: 28px;
	}
	.sa-hhero__bg::after { display: none; }
	.sa-hhero__bg img { object-position: center; }
}

/* ----------------------------------------- HOME: mobile hero entrance --
   Staged on purpose: headline and supporting text, then the artwork, then the
   two buttons, then the strip below. Driven by keyframes with fill-mode
   `both` rather than by script -- the delay holds the opening frame, so
   nothing flashes before it starts and nothing can be left stranded
   invisible if the JS fails to run.

   The artwork only fades; it sits in the flow on mobile, so moving it would
   shove the copy beneath it around mid-animation. The zoom goes on the image
   inside, where the frame's overflow clips it and the layout cannot shift. */
@keyframes sa-hero-rise {
	from { opacity: 0; transform: translateY(26px); }
	to   { opacity: 1; transform: none; }
}
@keyframes sa-hero-fade {
	from { opacity: 0; }
	to   { opacity: 1; }
}
@keyframes sa-hero-zoom {
	from { transform: scale(1.06); }
	to   { transform: none; }
}

/* Runs at every width, not just phones. Scoped to max-width:760 it simply did
   not fire on a tablet-width preview, which reads as "nothing happened" -- and
   the sequence suits the desktop hero just as well.

   Held until the script says go. A CSS animation starts counting the moment
   its element is rendered, which is well before a phone has painted anything;
   measured on a 390px viewport the whole 1.6s sequence had already finished
   8ms after DOMContentLoaded, so nobody ever saw it. The hold is gated on
   .sa-js, set by an inline script in the head, so a visitor whose script never
   runs gets the old behaviour rather than a blank hero. */
.sa-js .sa-home .sa-hhero__title,
.sa-js .sa-home .sa-hhero__lead,
.sa-js .sa-home .sa-hhero__actions,
.sa-js .sa-home .sa-hhero__bg,
.sa-js .sa-home .sa-hhero__bg img,
.sa-js .sa-home .sa-partners {
	animation-play-state: paused;
}
.sa-js .sa-home.is-hero-ready .sa-hhero__title,
.sa-js .sa-home.is-hero-ready .sa-hhero__lead,
.sa-js .sa-home.is-hero-ready .sa-hhero__actions,
.sa-js .sa-home.is-hero-ready .sa-hhero__bg,
.sa-js .sa-home.is-hero-ready .sa-hhero__bg img,
.sa-js .sa-home.is-hero-ready .sa-partners {
	animation-play-state: running;
}

@media (prefers-reduced-motion: no-preference) {
	.sa-home .sa-hhero__title,
	.sa-home .sa-hhero__lead,
	.sa-home .sa-hhero__actions {
		animation: sa-hero-rise .65s cubic-bezier(.22, .61, .36, 1) both;
	}
	.sa-home .sa-hhero__title   { animation-delay: 80ms; }
	.sa-home .sa-hhero__lead    { animation-delay: 200ms; }

	.sa-home .sa-hhero__bg      { animation: sa-hero-fade .75s ease both; animation-delay: 430ms; }
	.sa-home .sa-hhero__bg img  { animation: sa-hero-zoom .9s cubic-bezier(.22, .61, .36, 1) both; animation-delay: 430ms; }

	.sa-home .sa-hhero__actions { animation-delay: 760ms; }

	/* The strip under the hero closes the sequence. */
	.sa-home .sa-partners {
		animation: sa-hero-rise .6s cubic-bezier(.22, .61, .36, 1) both;
		animation-delay: 1040ms;
	}

	/* The generic scroll-reveal also targets the copy wrapper, and on a phone
	   it is on screen at load, so it would fade the whole block at once and
	   double up with the staged children. Hand the hero over to the sequence. */
	.sa-page .sa-hhero__copy.sa-reveal {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* The design desaturates the accreditation strip on this page. */
.sa-partners--muted img { mix-blend-mode: luminosity; }

@media (max-width: 1100px) {
	.sa-hhero__grid { grid-template-columns: 1fr; }
	.sa-hhero__media { order: -1; max-width: 520px; margin-inline: auto; }
}
@media (max-width: 640px) {
	.sa-hhero__title { font-size: 34px; line-height: 40px; }
	.sa-hhero__lead { font-size: 17px; line-height: 27px; }
	.sa-hhero__actions { flex-direction: column; align-items: stretch; gap: 12px; }
	.sa-hhero__actions .sa-btn { width: 100%; }
}

/* ======================================================== HOME: Carousels ==
   One component for Latest Opportunities, List Of Internships and Helpful
   Resources (Figma y1755, y5018, y5929). Coverflow: the centred slide is full
   size, its neighbours shrink and fade. */

.sa-feed { background: var(--sa-cream); }
.sa-feed__title {
	font-family: var(--sa-font-display);
	font-size: 48px;
	line-height: 56px;
	letter-spacing: -.01em;
	color: var(--sa-ink-strong);
}
.sa-feed__title .sa-accent { color: var(--sa-red); }
/* On the landing page these headings sit over centred carousels, and the
   Scholarship Stories one above them is centred already - left-aligned they
   were the odd ones out. Scoped to Home so Find and Advertise keep theirs. */
.sa-home .sa-feed__title { text-align: center; }

.sa-feed__stage { margin-top: 40px; background: #fff; padding-block: 32px; }
.sa-feed__slider { position: relative; }

/* Figma geometry. The neighbours are NOT a scaled-down centre card -- they are
   their own size with their own crop and type:
     centre  794 x 390.6 image (2.03:1), title Inter 600 21.7/26
     side    354 x 223.5 image (1.58:1), title Inter 700 17.36/26, art at 48%
   So the slide box stays 794 wide and the card inside it is sized instead,
   hugging whichever edge faces the centre. That lands the left neighbour at
   about -53 and the right at 1139, against the design's -49 and 1145, and the
   text renders at its true size rather than a scaled-down approximation. */
.sa-feed__slider .splide__slide {
	display: flex;
	align-items: center;
	opacity: .9;
	transition: opacity .45s ease;
	/* Hold the tallest state. Splide sizes the track from its tallest slide, so
	   while the cards are mid-resize the track collapsed by ~52px and yanked
	   the "View All" button up and back down with it. Height here is the active
	   card: media (W x 391/794) + 17 gap + 26 title + 17 gap + 36 button. */
	min-height: calc(var(--sa-feed-w) * .4924 + 100px);
}
.sa-feed__slider .splide__slide.sa-is-active { opacity: 1; }

/* The card is ALWAYS centred in its slide box, so growing 354 -> 794 expands
   evenly either side of its own middle. It used to hug the inner edge with an
   auto margin, which anchored the growth to that edge and made the image
   appear to unfold out of the left rather than open from the centre.
   The hug position is now a translate instead, which animates alongside the
   width, so the card slides in and opens from the middle at the same time.
   shift = (slide width - card width) / 2, i.e. W x (1 - .446) / 2. */
.sa-feed__slider {
	--sa-feed-w: 794px;
	--sa-feed-ratio: .446;
	--sa-feed-shift: calc(var(--sa-feed-w) * (1 - var(--sa-feed-ratio)) / 2);
}

.sa-feed-card {
	width: 100%;
	margin-inline: auto;
	transform: translateX(0);
	transition:
		width .5s cubic-bezier(.4, 0, .2, 1),
		transform .5s cubic-bezier(.4, 0, .2, 1);
}
/* 354/794 from the design, kept as a ratio so the neighbours track the centre
   card at every breakpoint instead of sticking at one pixel width. */
.sa-feed__slider .splide__slide:not(.sa-is-active) .sa-feed-card {
	width: calc(var(--sa-feed-ratio) * 100%);
}
.sa-feed__slider .splide__slide.sa-is-prev .sa-feed-card { transform: translateX(var(--sa-feed-shift)); }
.sa-feed__slider .splide__slide.sa-is-next .sa-feed-card { transform: translateX(calc(-1 * var(--sa-feed-shift))); }
.sa-feed__slider .splide__slide.sa-is-active .sa-feed-card { transform: translateX(0); }

@media (max-width: 1280px) { .sa-feed__slider { --sa-feed-w: 620px; } }
@media (max-width: 900px) { .sa-feed__slider { --sa-feed-w: 480px; } }
@media (max-width: 640px) {
	/* One card at a time down here: no shrink, no shift, nothing to animate --
	   and so nothing that can change the track height either. */
	.sa-feed__slider { --sa-feed-ratio: 1; --sa-feed-shift: 0px; }
	.sa-feed__slider .splide__slide { min-height: 0; }
}

.sa-feed__slider .splide__slide:not(.sa-is-active) .sa-feed-card__media {
	aspect-ratio: 354 / 223.5;
	opacity: .48;
	box-shadow: none;
}
.sa-feed__slider .splide__slide:not(.sa-is-active) .sa-feed-card__title {
	font-size: 17px;
	letter-spacing: -.011em;
	opacity: .8;
	/* Figma gives the neighbours two lines (53px tall) against the centre
	   card's one. */
	-webkit-line-clamp: 2;
	height: 52px;
	/* Weight deliberately stays 600. The design marks the neighbours 700, but
	   Inter loads as static instances, so 600 <-> 700 swaps the whole font face
	   in one frame -- the text visibly jumps. Size and spacing carry the
	   difference instead, and those interpolate. */
}
.sa-feed__slider .splide__slide:not(.sa-is-active) .sa-feed-card__more { opacity: .8; }

.sa-feed-card { display: flex; flex-direction: column; gap: 17px; }
.sa-feed-card__media {
	display: block;
	aspect-ratio: 794 / 391;
	border-radius: 26px;
	overflow: hidden;
	background: #F7F7F7;
	/* The crop differs between the centre card and its neighbours, so the
	   ratio is eased too -- otherwise the image height snaps at the moment
	   the active class moves. The shadow is eased for the same reason: it was
	   switching on in a single frame, which read as the image popping. */
	transition:
		aspect-ratio .5s cubic-bezier(.4, 0, .2, 1),
		box-shadow .5s cubic-bezier(.4, 0, .2, 1),
		opacity .45s ease;
	box-shadow: 0 43px 43px -22px rgba(23, 23, 23, .06),
	            0 11px 11px -5px rgba(23, 23, 23, .06),
	            0 7px 7px -3px rgba(23, 23, 23, .04);
}
.sa-feed-card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sa-feed-card__title {
	font-family: var(--sa-font-ui);
	font-size: 20px;
	line-height: 26px;
	font-weight: 600;
	letter-spacing: -.48px;
	color: var(--sa-ink);
	/* The height is an animated value rather than a consequence of the text.
	   While the card grows from 354 to 794 the title re-wraps, and if the box
	   followed the content the line count would drop mid-flight and jolt the
	   card. Driving height per state keeps the motion smooth AND lets the
	   centre card sit on one line, which is what Figma shows -- reserving two
	   lines for it left a gap under the title. */
	display: -webkit-box;
	-webkit-line-clamp: 1;
	-webkit-box-orient: vertical;
	overflow: hidden;
	height: 26px;
	transition:
		height .5s cubic-bezier(.4, 0, .2, 1),
		font-size .5s cubic-bezier(.4, 0, .2, 1),
		letter-spacing .5s cubic-bezier(.4, 0, .2, 1),
		opacity .45s ease;
}
.sa-feed-card__title a { color: inherit; }
.sa-feed-card__title a:hover { color: var(--sa-red); }

.sa-feed-card__more {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	align-self: flex-start;
	padding: 9px 13px;
	border: 1px solid #E5E5E5;
	border-radius: 9px;
	font-size: 13px;
	font-weight: 500;
	letter-spacing: -.13px;
	color: var(--sa-ink);
	transition: opacity .45s ease, border-color .15s ease, color .15s ease;
}
.sa-feed-card__more:hover { border-color: var(--sa-red); color: var(--sa-red); }

/* Square 32px arrows sitting over the stage, per the design. */
.sa-feed__arrows { position: static; }
/* Both carousels on Home use this one arrow. A 32px white square on a white
   page was easy to miss, so it is a red disc half again as large. */
.sa-feed__arrow {
	position: absolute;
	top: 38%;
	z-index: 3;
	display: grid;
	place-items: center;
	width: 52px;
	height: 52px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--sa-red);
	color: #fff;
	/* Splide dims its own arrows; ours are meant to be seen. */
	opacity: 1;
	box-shadow: 0 10px 24px -8px rgba(169, 25, 40, .55);
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease, box-shadow .15s ease;
}
.sa-feed__arrow svg { width: 24px; height: 24px; }
.sa-feed__arrow:hover {
	background: var(--sa-red-bright);
	color: #fff;
	transform: scale(1.06);
	box-shadow: 0 14px 30px -10px rgba(169, 25, 40, .7);
}
.sa-feed__arrow:disabled { opacity: .4; box-shadow: none; }
@media (prefers-reduced-motion: reduce) {
	.sa-feed__arrow:hover { transform: none; }
}
.splide__arrow--prev.sa-feed__arrow { left: 20px; }
.splide__arrow--next.sa-feed__arrow { right: 40px; }

.sa-feed__foot { margin-top: 40px; text-align: center; }

@media (max-width: 640px) {
	.sa-feed__title { font-size: 26px; line-height: 34px; }
	.sa-feed__slider .splide__slide { opacity: 1; transform: none; }
	.splide__arrow--prev.sa-feed__arrow { left: 8px; }
	.splide__arrow--next.sa-feed__arrow { right: 8px; }
}

/* ===================================================== HOME: Destinations ==
   Figma y2626. Same flag marquee as the Services page, but the tiles here are
   120px rounded squares with a hairline border rather than circles. */

.sa-dest { background: var(--sa-cream); text-align: center; }
.sa-dest__title {
	font-family: var(--sa-font-display);
	font-size: 48px;
	line-height: 56px;
	letter-spacing: -.01em;
	font-weight: 700;
	color: var(--sa-ink-strong);
}
.sa-dest__title .sa-accent { color: var(--sa-red); }

.sa-dest__flags { margin-top: 40px; }
.sa-dest__tile {
	display: grid;
	place-items: center;
	flex: none;
	width: 120px;
	height: 120px;
	padding: 32px;
	border: 1px solid #EBEBEB;
	border-radius: 32px;
	background: #fff;
}
.sa-dest__tile svg,
.sa-dest__tile img { width: 56px; height: 56px; }

.sa-dest__detail {
	max-width: 528px;
	margin: 40px auto 0;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -.011em;
	color: #5C5C5C;
}
.sa-dest__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	margin-top: 24px;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	letter-spacing: -.011em;
	color: #002C54;
}
.sa-dest__link:hover { color: var(--sa-red); }

@media (max-width: 640px) {
	.sa-dest__title { font-size: 26px; line-height: 34px; }
	.sa-dest__tile { width: 88px; height: 88px; padding: 20px; border-radius: 24px; }
	.sa-dest__tile svg, .sa-dest__tile img { width: 44px; height: 44px; }
}

/* ===================================================== HOME: Track record ==
   Figma y3217. Copy column beside a six-cell strip of progress rings. */

.sa-track { background: var(--sa-cream); }
.sa-track__box {
	display: grid;
	grid-template-columns: minmax(0, 280fr) minmax(0, 766fr);
	gap: 72px;
	align-items: start;
	padding: 56px 32px;
	border-radius: var(--sa-r-lg);
	background: #fff;
}

.sa-track__title {
	font-family: var(--sa-font-display);
	font-size: 30px;
	line-height: 36px;
	letter-spacing: .75px;
	color: #111;
}
.sa-track__accent { color: #D3202A; }

.sa-track__lead {
	margin-top: 12px;
	font-size: 14px;
	line-height: 23px;
	color: #5B5F6B;
}
.sa-track__cta {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 24px;
	padding: 10px 20px;
	border-radius: 6px;
	background: #D3202A;
	color: #fff;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	transition: background-color .15s ease;
}
.sa-track__cta:hover { background: #8E1724; }

.sa-track__label {
	font-size: 11px;
	line-height: 16px;
	font-weight: 600;
	letter-spacing: .55px;
	color: #5B5F6B;
}

.sa-track__list {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	margin-top: 8px;
	border: 1px solid #E6E3DC;
	border-radius: 16px;
	background: rgba(250, 248, 244, .6);
	overflow: hidden;
}
.sa-track__item {
	padding: 20px 13px;
	text-align: center;
	border-left: 1px solid #E6E3DC;
}
.sa-track__item:first-child { border-left: 0; }

.sa-ring { position: relative; width: 64px; margin: 0 auto; }
/* Direct child only. As `.sa-ring svg` this also caught the flag nested inside
   .sa-ring__flag and turned every flag on its side -- Germany's bands ran
   vertically, France's horizontally. The rotation belongs to the progress arc
   alone, so its stroke starts at twelve o'clock.
   display:block matters too: as an inline element the svg sits on a text
   baseline, and the descender space made the ring box 64x71, so the flag
   holder came out 44x51 and the flag could never be centred. */
.sa-ring > svg { display: block; width: 64px; height: 64px; transform: rotate(-90deg); }
.sa-ring__track,
.sa-ring__bar { fill: none; stroke-width: 3; }
.sa-ring__track { stroke: #ECE9E2; }
.sa-ring__bar {
	stroke: var(--sa-ring-colour, #D3202A);
	stroke-linecap: round;
	/* 2 * pi * r, r = 30.5 */
	stroke-dasharray: 191.64;
	stroke-dashoffset: 191.64;
	transition: stroke-dashoffset 1.4s cubic-bezier(.22, .61, .36, 1);
}
.sa-ring.is-visible .sa-ring__bar { stroke-dashoffset: var(--sa-ring-offset, 0); }

.sa-ring__flag {
	position: absolute;
	inset: 10px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	overflow: hidden;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
}
/* The flag fills the circular holder edge to edge. preserveAspectRatio
   "slice" on the SVG does the covering, so no object-fit is involved and the
   artwork can't sit off-centre inside the ring. */
.sa-ring__flag svg,
.sa-ring__flag img { display: block; width: 100%; height: 100%; }

.sa-track__pct {
	margin-top: 12px;
	font-family: var(--sa-font-display);
	font-size: 20px;
	line-height: 20px;
	color: #111;
}
.sa-track__sign { color: #D3202A; }
.sa-track__country {
	margin-top: 8px;
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: #111;
}
.sa-track__note {
	margin-top: 4px;
	font-size: 12px;
	line-height: 16px;
	color: #5B5F6B;
}

@media (max-width: 1100px) {
	.sa-track__box { grid-template-columns: 1fr; gap: 40px; }
	.sa-track__list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sa-track__item:nth-child(3n + 1) { border-left: 0; }
	.sa-track__item:nth-child(n + 4) { border-top: 1px solid #E6E3DC; }
}
@media (max-width: 640px) {
	.sa-track__box { padding: 32px 20px; }
	.sa-track__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sa-track__item:nth-child(3n + 1) { border-left: 1px solid #E6E3DC; }
	.sa-track__item:nth-child(odd) { border-left: 0; }
	.sa-track__item:nth-child(n + 3) { border-top: 1px solid #E6E3DC; }
}

/* ================================================== HOME: What students say ==
   Figma y3655. A row of five portrait cards with a glass "Play video" pill. */

.sa-says { background: var(--sa-cream); text-align: center; }
.sa-says__title {
	font-family: var(--sa-font-display);
	font-size: 48px;
	line-height: 56px;
	letter-spacing: -.01em;
	color: var(--sa-ink-strong);
}
.sa-says__title .sa-accent { color: var(--sa-red); }

/* Two rows, opposite directions, seamless. Each row carries the same track
   twice; one full -100% translation lands the duplicate exactly where the
   original began, so there is no jump at the wrap. Hovering a row pauses it
   and it resumes from the same place, because only the play state changes. */
.sa-says__rows { display: grid; gap: 16px; margin-top: 53px; }

.sa-says__row { display: flex; overflow: hidden; }

.sa-says__track {
	display: flex;
	flex: none;
	gap: 16px;
	padding-right: 16px;
	animation: sa-says-scroll 60s linear infinite;
}
.sa-says__row--2 .sa-says__track {
	animation-direction: reverse;
	/* Negative delay starts the second row mid-cycle so the rows never line up. */
	animation-delay: -30s;
}

@keyframes sa-says-scroll {
	from { transform: translateX(0); }
	to   { transform: translateX(-100%); }
}

.sa-says__row:hover .sa-says__track,
.sa-says__row:focus-within .sa-says__track { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
	.sa-says__track { animation: none; }
	.sa-says__row { overflow-x: auto; }
}

/* ---- testimonial card ---- */
.sa-quote {
	position: relative;
	flex: none;
	display: flex;
	flex-direction: column;
	width: 360px;
	padding: 20px;
	border: 1px solid #ECE9E2;
	border-radius: 14px;
	background: #fff;
	text-align: left;
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.sa-quote:hover { transform: translateY(-3px); box-shadow: 0 14px 28px rgba(19, 38, 83, .12); }

.sa-quote--dark {
	border-color: #1B2F5C;
	background: var(--sa-navy);
}

.sa-quote__stars { display: flex; gap: 3px; color: #F5B301; }
.sa-quote__stars svg { width: 14px; height: 14px; }

/* The decorative closing quote, bled into the top-right corner. */
.sa-quote__mark {
	position: absolute;
	top: 2px;
	right: 14px;
	font-family: Georgia, 'Times New Roman', serif;
	font-size: 64px;
	line-height: 1;
	color: #F3C3C9;
	opacity: .55;
	pointer-events: none;
	user-select: none;
}
.sa-quote--dark .sa-quote__mark { color: #AF1D2B; opacity: .5; }

.sa-quote__text {
	margin: 12px 0 0;
	padding: 0;
	border: 0;
	font-size: 14px;
	line-height: 21px;
	color: #3F4654;
}
.sa-quote--dark .sa-quote__text { color: rgba(255, 255, 255, .88); }

.sa-quote__person {
	display: flex;
	align-items: center;
	gap: 10px;
	margin-top: 16px;
	padding-top: 14px;
	border-top: 1px solid #ECE9E2;
}
.sa-quote--dark .sa-quote__person { border-top-color: rgba(255, 255, 255, .16); }

.sa-quote__avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--sa-navy);
	font-size: 12px;
	font-weight: 600;
	letter-spacing: .02em;
	color: #fff;
}
.sa-quote--dark .sa-quote__avatar { background: var(--sa-red); }

.sa-quote__who { display: grid; gap: 2px; min-width: 0; }

.sa-quote__name {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 13px;
	line-height: 18px;
	font-weight: 600;
	color: #111;
}
.sa-quote--dark .sa-quote__name { color: #fff; }
.sa-quote__tick { flex: none; width: 13px; height: 13px; color: var(--sa-red); }

.sa-quote__meta {
	display: flex;
	align-items: center;
	gap: 5px;
	font-size: 11px;
	line-height: 16px;
	color: #6B7280;
}
.sa-quote--dark .sa-quote__meta { color: rgba(255, 255, 255, .62); }

.sa-mflag {
	flex: none;
	width: 15px;
	height: 11px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .08);
}

.sa-says__foot { margin-top: 40px; }

@media (max-width: 640px) {
	.sa-says__title { font-size: 26px; line-height: 34px; }
	.sa-says__rows { margin-top: 32px; }
	.sa-says__card { width: 60vw; }
}

/* ======================================================== HOME: Advisory ==
   Figma y4428. Four steps on a rule. No card is active on load -- the dark
   treatment follows the pointer, matching the Services journey behaviour. */

.sa-advisory { background: #FAF8F5; text-align: center; }
.sa-advisory__title {
	font-family: var(--sa-font-display);
	font-size: 36px;
	line-height: 40px;
	letter-spacing: -.9px;
	text-transform: uppercase;
	color: #0E1B39;
}
.sa-advisory__sub {
	max-width: 430px;
	margin: 12px auto 0;
	font-size: 16px;
	line-height: 24px;
	color: #5E6678;
}

.sa-advisory__timeline {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 32px;
	margin-top: 64px;
	text-align: left;
}
/* The rule runs behind the dots. */
.sa-advisory__timeline::before {
	content: "";
	position: absolute;
	left: 0; right: 0;
	top: 27px;
	height: 2px;
	background: #E2DCD5;
}

.sa-advisory__step { position: relative; display: flex; flex-direction: column; gap: 24px; }

.sa-advisory__dot {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border: 4px solid #FAF8F5;
	border-radius: 50%;
	background: #0E214E;
	font-family: var(--sa-font-display);
	font-size: 14px;
	line-height: 20px;
	color: #FAF8F5;
	box-shadow: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -4px rgba(0, 0, 0, .1);
	transition: background-color .25s ease;
}

.sa-advisory__card {
	flex: 1;
	padding: 24px;
	border: 1px solid #E2DCD5;
	border-radius: 18px;
	background: #fff;
	transition: background-color .25s ease, border-color .25s ease, transform .25s ease;
}
.sa-advisory__step-title {
	font-family: var(--sa-font-display);
	font-size: 16px;
	line-height: 24px;
	color: #0E1B39;
	transition: color .25s ease;
}
.sa-advisory__step-desc {
	margin-top: 7px;
	font-size: 14px;
	line-height: 21px;
	color: #5E6678;
	transition: color .25s ease;
}

@media (hover: hover) {
	.sa-advisory__step:hover .sa-advisory__dot { background: #AA1824; }
	.sa-advisory__step:hover .sa-advisory__card {
		background: #0E1B39;
		border-color: #0E1B39;
		transform: translateY(-4px);
	}
	.sa-advisory__step:hover .sa-advisory__step-title,
	.sa-advisory__step:hover .sa-advisory__step-desc { color: #fff; }
}
/* Touch: the tapped step takes the dark treatment instead. */
.sa-advisory__step.is-active .sa-advisory__dot { background: #AA1824; }
.sa-advisory__step.is-active .sa-advisory__card { background: #0E1B39; border-color: #0E1B39; }
.sa-advisory__step.is-active .sa-advisory__step-title,
.sa-advisory__step.is-active .sa-advisory__step-desc { color: #fff; }

@media (max-width: 1100px) {
	.sa-advisory__timeline { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 40px; }
	.sa-advisory__timeline::before { display: none; }
}
@media (max-width: 640px) {
	.sa-advisory__title { font-size: 26px; line-height: 32px; }
	.sa-advisory__timeline { grid-template-columns: 1fr; gap: 24px; margin-top: 40px; }
}

/* ========================================== HOME: Scholarship stories reel ==
   Figma y6840. Wide centred slide with a gradient caption, neighbours peeking. */

.sa-reel { background: #fff; text-align: center; }
.sa-reel__title {
	font-family: var(--sa-font-display);
	font-size: 48px;
	line-height: 56px;
	letter-spacing: -.01em;
	color: var(--sa-ink-strong);
}
.sa-reel__title .sa-accent { color: var(--sa-red); }

.sa-reel__stage { margin-top: 40px; }
.sa-reel__slider { position: relative; }
/* Figma y6840. The neighbours sit BEHIND the centre slide, not beside it:
   centre 896x470 spanning 272-1168, left neighbour 788x413.6 spanning 177-966,
   right neighbour 474-1262 -- a ~694px overlap leaving a ~95px sliver showing.

   Splide keeps a normal positive layout (a negative gap destroyed its loop
   maths) and the overlap is a transform. A neighbour's natural centre sits one
   full step away, at W + gap; the design wants it 0.1652 x W from the centre
   card, so the shift is 0.8348 x W + gap. Scale is 788/896 = .88. */
.sa-reel__slider {
	--sa-reel-w: 896px;
	--sa-reel-gap: 24px;
	--sa-reel-shift: calc(.8348 * var(--sa-reel-w) + var(--sa-reel-gap));
}
/* The transform goes on the CARD, never on .splide__slide. Splide measures
   slide width with getBoundingClientRect(), which is transform-aware, so
   scaling the slide itself made it centre on 788 instead of 896 and threw the
   whole reel 54px off. Transforming the child leaves its measurement clean. */
.sa-reel__card {
	transform: scale(.88);
	transition: transform .5s cubic-bezier(.4, 0, .2, 1);
	will-change: transform;
}
.sa-reel__slider .splide__slide.sa-is-prev .sa-reel__card { transform: translateX(var(--sa-reel-shift)) scale(.88); }
.sa-reel__slider .splide__slide.sa-is-next .sa-reel__card { transform: translateX(calc(-1 * var(--sa-reel-shift))) scale(.88); }
.sa-reel__slider .splide__slide.sa-is-active { z-index: 2; }
.sa-reel__slider .splide__slide.sa-is-active .sa-reel__card { transform: none; }
/* Anything further out is hidden behind the three on show. */
.sa-reel__slider .splide__slide:not(.sa-is-active):not(.sa-is-prev):not(.sa-is-next) { opacity: 0; }

@media (max-width: 1280px) {
	.sa-reel__slider { --sa-reel-w: 700px; }
}
@media (max-width: 900px) {
	.sa-reel__slider { --sa-reel-w: 540px; --sa-reel-gap: 16px; }
}
@media (max-width: 640px) {
	/* Too narrow for the overlap to read: one card at a time. */
	.sa-reel__card,
	.sa-reel__slider .splide__slide.sa-is-prev .sa-reel__card,
	.sa-reel__slider .splide__slide.sa-is-next .sa-reel__card { transform: none; }
	.sa-reel__slider .splide__slide { opacity: .5; }
	.sa-reel__slider .splide__slide.sa-is-active { opacity: 1; }
}
/* Swipe/drag is the primary interaction here, so show the right affordance. */
.sa-reel__slider .splide__track { cursor: grab; }
.sa-reel__slider .splide__track.is-dragging { cursor: grabbing; }
.sa-reel__slider .splide__slide:not(.sa-is-active) .sa-reel__caption { opacity: 0; }
.sa-reel__caption { transition: opacity .35s ease; }

.sa-reel__card {
	position: relative;
	display: block;
	aspect-ratio: 896 / 470;
	border-radius: 8px;
	overflow: hidden;
	background: #0E1B39;
}
.sa-reel__card img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sa-reel__caption {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 32px;
	text-align: left;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 40%, rgba(0, 0, 0, .88) 100%);
}
/* Both are clamped: these are post titles and excerpts of any length, and the
   caption sits inside a fixed-ratio card, so unclamped text climbs out of the
   gradient and ends up unreadable on the photo. */
.sa-reel__name {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 33px;
	line-height: 1.2;
	color: #fff;
}
/* Three lines, not two: the clamp was what cut the summary short, so raising
   the word count alone would have changed nothing on screen. */
.sa-reel__sub {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 6px;
	font-size: 16px;
	line-height: 26px;
	color: rgba(255, 255, 255, .88);
}

/* Arrows sit outside the centre card, vertically centred on it. */
.sa-reel__arrows { position: static; }
.sa-reel__slider .sa-feed__arrow { top: 50%; transform: translateY(-50%); }
.sa-reel__slider .splide__arrow--prev.sa-feed__arrow { left: 0; }
.sa-reel__slider .splide__arrow--next.sa-feed__arrow { right: 0; }

/* The caption type has to come down with the card. The slide is a fixed
   896:470, so at 700 and 540 wide the card is 367 and 283 tall, and at phone
   width only ~176 -- a 33px name wrapped to two lines simply did not fit. */
@media (max-width: 1280px) {
	.sa-reel__name { font-size: 26px; }
	.sa-reel__sub { font-size: 15px; line-height: 22px; }
	.sa-reel__caption { padding: 24px; }
}

@media (max-width: 900px) {
	.sa-reel__name { font-size: 21px; }
	.sa-reel__sub { font-size: 13px; line-height: 19px; margin-top: 4px; -webkit-line-clamp: 2; }
	.sa-reel__caption { padding: 18px; }
}

@media (max-width: 640px) {
	.sa-reel__title { font-size: 26px; line-height: 34px; }
	.sa-reel__name { font-size: 16px; line-height: 1.25; }
	.sa-reel__sub { font-size: 11px; line-height: 15px; margin-top: 2px; -webkit-line-clamp: 2; }
	.sa-reel__caption {
		padding: 12px 14px;
		/* The dark has to start higher up a 176px card, or the name lands on
		   the photo instead of on the gradient. */
		background: linear-gradient(180deg, rgba(0, 0, 0, 0) 12%, rgba(0, 0, 0, .92) 100%);
	}
}

/* ====================================================== HOME: Newsletter ==
   Figma y7635. Navy card with a red ambient glow and a pill-shaped form. */

/* Figma leaves 85px of page colour between the white stories block and this
   banner, and 97px below it. With no top padding the cream band came to just
   18px and the banner read as stuck to the section above. */
.sa-newsletter { padding-block: 64px 112px; background: var(--sa-cream); }

@media (max-width: 1024px) { .sa-newsletter { padding-block: 48px 72px; } }
@media (max-width: 640px) { .sa-newsletter { padding-block: 28px 44px; } }
.sa-newsletter__box {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 104px;
	padding: 48px;
	border-radius: 24px;
	background: var(--sa-navy-deep);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
	overflow: hidden;
	isolation: isolate;
}
.sa-newsletter__glow {
	position: absolute;
	right: -40px;
	bottom: -40px;
	z-index: -1;
	width: 384px;
	height: 384px;
	border-radius: 50%;
	background: rgba(193, 18, 31, .2);
	filter: blur(32px);
	pointer-events: none;
}

.sa-newsletter__intro { display: flex; align-items: center; gap: 24px; }
.sa-newsletter__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 64px;
	height: 64px;
	border: 1px solid rgba(255, 255, 255, .2);
	border-radius: 16px;
	background: #fff;
	color: #C1121F;
}

.sa-newsletter__title {
	font-family: var(--sa-font-display);
	font-size: 30px;
	line-height: 36px;
	letter-spacing: -.75px;
	color: #fff;
}
.sa-newsletter__sub {
	margin-top: 4px;
	max-width: 448px;
	font-size: 12px;
	line-height: 16px;
	color: #CBD5E1;
}

/* WPForms renders the field and the button as separate blocks; these rules
   flatten that into the single pill the design shows. Selectors are kept to
   the plugin's stable container classes. */
.sa-newsletter__form { flex: none; width: 448px; max-width: 100%; }
.sa-newsletter__form .wpforms-container,
.sa-newsletter__form .wpforms-form { margin: 0; padding: 0; }

.sa-newsletter__form .wpforms-form {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 6px;
	border-radius: 9999px;
	background: #fff;
	box-shadow: inset 0 2px 4px rgba(0, 0, 0, .05);
}
.sa-newsletter__form .wpforms-field-container { flex: 1; min-width: 0; }
.sa-newsletter__form .wpforms-field { padding: 0; }
.sa-newsletter__form .wpforms-field-label,
.sa-newsletter__form .wpforms-field-sublabel { display: none; }
.sa-newsletter__form .wpforms-submit-container { flex: none; padding: 0; margin: 0; }

/* type="email" on purpose: the form also carries two 1x1 honeypot text inputs
   for spam, and a broader selector sizes those up as well. */
.sa-newsletter__form input[type="email"],
.sa-newsletter__input {
	width: 100%;
	min-width: 0;
	padding: 10px 20px 11px;
	border: 0;
	background: transparent;
	font-family: var(--sa-font-ui);
	font-size: 12px;
	line-height: 14px;
	color: var(--sa-ink);
}

/* Validation + confirmation, which WPForms injects at runtime. */
.sa-newsletter__form .wpforms-error {
	margin-top: 6px;
	padding-left: 20px;
	font-size: 11px;
	line-height: 14px;
	color: #FFD5D9;
}
.sa-newsletter__form input.wpforms-error { box-shadow: none; }
.sa-newsletter__form .wpforms-confirmation-container,
.sa-newsletter__form .wpforms-confirmation-container-full {
	margin: 0;
	padding: 14px 20px;
	border: 0;
	border-radius: 9999px;
	background: #fff;
	color: var(--sa-navy-deep);
	font-size: 13px;
	line-height: 18px;
}
.sa-newsletter__form .wpforms-confirmation-container p:last-child { margin: 0; }
.sa-newsletter__input::placeholder { color: #94A3B8; }
.sa-newsletter__input:focus { outline: 2px solid #C1121F; outline-offset: 2px; border-radius: 9999px; }

.sa-newsletter__form button[type="submit"],
.sa-newsletter__btn {
	flex: none;
	padding: 12px 28px;
	border: 0;
	border-radius: 9999px;
	background: #C1121F;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
	font-family: var(--sa-font-ui);
	font-size: 12px;
	line-height: 16px;
	font-weight: 700;
	letter-spacing: .6px;
	text-transform: capitalize;
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease;
}
.sa-newsletter__form button[type="submit"]:hover,
.sa-newsletter__btn:hover { background: #8E1724; transform: translateY(-1px); }

@media (max-width: 1100px) {
	.sa-newsletter__box { flex-direction: column; align-items: stretch; gap: 32px; }
	.sa-newsletter__form { width: 100%; }
}
@media (max-width: 640px) {
	.sa-newsletter__box { padding: 28px 20px; }
	.sa-newsletter__intro { flex-direction: column; align-items: flex-start; gap: 16px; }
	.sa-newsletter__title { font-size: 24px; line-height: 30px; }
}

/* ------------------------------------------- HOME: mobile vertical rhythm --
   The section padding is already halved by the token. These are the internal
   margins that sit on top of it -- a CTA with 40px beneath it, then two lots
   of section padding, put ~150px of nothing between a button and the next
   heading on a phone. */
@media (max-width: 640px) {
	.sa-feed__stage,
	.sa-feed__foot,
	.sa-says__foot,
	.sa-reel__stage,
	.sa-dest__flags,
	.sa-dest__detail { margin-top: 24px; }

	.sa-feed__stage { padding-block: 24px; }
	.sa-says__rows { margin-top: 24px; }
	.sa-advisory__timeline { margin-top: 28px; }
	.sa-dest__link { margin-top: 16px; }
	.sa-track__box { padding: 28px 20px; gap: 28px; }
}

/* ======================================================= HOME: Guidance ==
   Figma Home y988 (7316:19434). Centred title, then image beside a copy
   column with the red CTA. Buttons, container and section rhythm are the
   shared Services tokens -- only the layout here is new. */

.sa-guidance { background: #FAFAFA; }

.sa-guidance__title {
	font-family: var(--sa-font-display);
	font-size: 48px;
	line-height: 56px;
	letter-spacing: -.01em;
	text-align: center;
	color: var(--sa-ink-strong);
}
.sa-guidance__title .sa-accent { color: var(--sa-red); }

.sa-guidance__grid {
	display: grid;
	grid-template-columns: minmax(0, 673fr) minmax(0, 494fr);
	align-items: center;
	gap: 48px;
	margin-top: 60px;
}

.sa-guidance__media {
	border-radius: var(--sa-r-xl);
	overflow: hidden;
	/* Matches the artwork (653x376) rather than the Figma frame (673x411). The
	   exported file was letterboxed - black bars top and bottom - to fit the
	   frame ratio; those are cropped out of the file now, so sizing the card to
	   the frame instead would make object-fit: cover shave the sides and clip
	   the "WE ARE EXPERT SCHOLARS" lockup. */
	aspect-ratio: 653 / 376;
}
.sa-guidance__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* The artwork is a call to action, so the card is the link. */
.sa-guidance__art {
	display: block;
	width: 100%;
	height: 100%;
	transition: transform .35s cubic-bezier(.22, .61, .36, 1);
}
.sa-guidance__art:hover { transform: scale(1.02); }
.sa-guidance__art:focus-visible { outline: 3px solid var(--sa-red); outline-offset: 3px; }
@media (prefers-reduced-motion: reduce) {
	.sa-guidance__art, .sa-guidance__art:hover { transition: none; transform: none; }
}
/* Placeholder while the artwork is still to be exported from Figma. */
.sa-guidance__media--empty { background: #E6E8EE; }

.sa-guidance__heading {
	font-family: var(--sa-font-display);
	font-size: 40px;
	line-height: 46px;
	letter-spacing: -.01em;
	color: var(--sa-ink-strong);
}
.sa-guidance__heading .sa-accent { color: var(--sa-red); }

.sa-guidance__lead {
	margin-top: 12px;
	font-size: 16px;
	line-height: 24px;
	letter-spacing: -.011em;
	color: #5C5C5C;
}

.sa-guidance__cta { width: 100%; margin-top: 40px; }

@media (max-width: 1100px) {
	.sa-guidance__grid { grid-template-columns: 1fr; gap: 32px; }
	.sa-guidance__media { max-width: 673px; margin-inline: auto; }
}

@media (max-width: 640px) {
	.sa-guidance__title { font-size: 26px; line-height: 34px; }
	.sa-guidance__heading { font-size: 24px; line-height: 32px; }
	.sa-guidance__grid { margin-top: 32px; }
	.sa-guidance__cta { margin-top: 28px; }
}

/* ================================================= PACKAGE DETAIL PAGE ==
   Figma "Package generic details". Three blocks: the product hero with its
   breadcrumb, the tabbed "About this service" panel, and Related Packages --
   which reuses the Services package card, since the design shows the same
   artwork cards with one of them simply hovered. */

.sa-pd { padding: 56px 0 64px; }

/* ---- breadcrumb ---- */
.sa-pd__crumbs ol {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 6px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.sa-pd__crumbs li {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sa-font-ui);
	font-size: 12px;
	line-height: 16px;
	color: #5B6475;
}
/* Chevron between items, drawn rather than shipped as an icon. */
.sa-pd__crumbs li:not(:last-child)::after {
	content: "";
	width: 12px;
	height: 12px;
	flex: none;
	border-top: 1px solid #5B6475;
	border-right: 1px solid #5B6475;
	transform: rotate(45deg) scale(.5);
}
.sa-pd__crumbs a { color: inherit; }
.sa-pd__crumbs a:hover { color: var(--sa-red); }
.sa-pd__crumbs li[aria-current] { color: #0B1F5C; }

/* ---- hero ---- */
.sa-pd__grid {
	display: grid;
	grid-template-columns: minmax(0, 569fr) minmax(0, 570fr);
	gap: 93px; /* 1232 - 569 - 570 */
	align-items: start;
	margin-top: 32px;
}

.sa-pd__media {
	margin: 0;
	border-radius: 24px;
	overflow: hidden;
	background: var(--sa-surface-alt, #F3F4F7);
	aspect-ratio: 1 / 1;
}
.sa-pd__media img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sa-pd__eyebrow {
	font-family: var(--sa-font-ui);
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	color: #C8102E;
}
.sa-pd__title {
	margin-top: 12px;
	font-family: var(--sa-font-display);
	font-size: 36px;
	line-height: 40px;
	text-transform: uppercase;
	color: #0B1F5C;
}
.sa-pd__price {
	margin-top: 20px;
	font-family: var(--sa-font-ui);
	font-size: 30px;
	line-height: 36px;
	font-weight: 600;
	color: #111827;
}
.sa-pd__price del { font-size: 20px; opacity: .55; margin-right: 8px; font-weight: 400; }
.sa-pd__price ins { text-decoration: none; }

.sa-pd__lead {
	margin-top: 20px;
	font-family: var(--sa-font-ui);
	font-size: 16px;
	line-height: 26px;
	color: #5B6475;
}

.sa-pd__points {
	display: grid;
	gap: 12px;
	margin-top: 24px;
	padding: 0 0 20px;
	list-style: none;
}
.sa-pd__points li {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-family: var(--sa-font-ui);
	font-size: 14px;
	line-height: 20px;
	color: #111827;
}
.sa-pd__points svg { width: 16px; height: 16px; margin-top: 2px; color: #C8102E; }

/* ---- quantity + add to basket ---- */
.sa-pd__buy {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	margin-top: 12px;
	padding-top: 32px;
	border-top: 1px solid #E6E8EE;
}

.sa-qty {
	display: flex;
	align-items: center;
	flex: none;
	width: 114px;
	height: 48px;
	border: 1px solid #E6E8EE;
	border-radius: 9999px;
	background: #fff;
	overflow: hidden;
}
.sa-qty__btn {
	display: grid;
	place-items: center;
	width: 40px;
	align-self: stretch;
	padding: 0;
	border: 0;
	background: none;
	color: #0B1F5C;
	cursor: pointer;
	transition: background-color .15s ease;
}
.sa-qty__btn:hover { background: #F6F7FA; }
.sa-qty__btn svg { width: 16px; height: 16px; }
.sa-qty__btn:first-child { color: #B8BDC9; }

.sa-qty__input {
	width: 34px;
	flex: none;
	border: 0;
	background: none;
	text-align: center;
	font-family: var(--sa-font-ui);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: #0B1F5C;
	-moz-appearance: textfield;
	appearance: textfield;
}
.sa-qty__input::-webkit-outer-spin-button,
.sa-qty__input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }
.sa-qty__input:focus { outline: 2px solid #C8102E; outline-offset: 2px; border-radius: 6px; }

.sa-pd__add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-width: 220px;
	height: 48px;
	padding-inline: 28px;
	border: 0;
	border-radius: 9999px;
	background: #C8102E;
	font-family: var(--sa-font-ui);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease;
}
.sa-pd__add svg { width: 16px; height: 16px; }
.sa-pd__add:hover { background: #8E1724; transform: translateY(-1px); }

.sa-pd__oos {
	margin-top: 12px;
	padding-top: 32px;
	border-top: 1px solid #E6E8EE;
	font-size: 14px;
	color: #5B6475;
}

/* ---- about this service ---- */
.sa-about { padding: 80px 0; background: #F6F7FA; }
.sa-about__title {
	font-family: var(--sa-font-display);
	font-size: 30px;
	line-height: 36px;
	text-align: center;
	text-transform: uppercase;
	color: #0B1F5C;
}

.sa-about__tabs {
	display: flex;
	justify-content: center;
	gap: 4px;
	margin-top: 40px;
	border-bottom: 1px solid #E6E8EE;
	overflow-x: auto;
	scrollbar-width: none;
}
.sa-about__tabs::-webkit-scrollbar { display: none; }

.sa-about__tab {
	position: relative;
	flex: none;
	padding: 8px 16px 16px;
	border: 0;
	background: none;
	font-family: var(--sa-font-ui);
	font-size: 14px;
	line-height: 20px;
	font-weight: 400;
	color: #5B6475;
	cursor: pointer;
	white-space: nowrap;
	transition: color .15s ease;
}
.sa-about__tab::after {
	content: "";
	position: absolute;
	left: 0; right: 0; bottom: -1px;
	height: 2px;
	background: #C8102E;
	opacity: 0;
	transition: opacity .2s ease;
}
.sa-about__tab[aria-selected="true"] { font-weight: 600; color: #0B1F5C; }
.sa-about__tab[aria-selected="true"]::after { opacity: 1; }
.sa-about__tab:hover { color: #0B1F5C; }

.sa-about__panel {
	max-width: 768px;
	margin: 40px auto 0;
	padding: 40px;
	border-radius: 24px;
	background: #fff;
}
.sa-about__panel[hidden] { display: none; }
.sa-about__panel p {
	font-family: var(--sa-font-ui);
	font-size: 16px;
	line-height: 26px;
	color: #5B6475;
}
.sa-about__panel p + p { margin-top: 20px; }
.sa-about__panel ul,
.sa-about__panel ol { margin: 20px 0 0; padding-left: 20px; color: #5B6475; font-size: 16px; line-height: 26px; }

/* ---- related packages ---- */
.sa-related { background: var(--sa-cream); }
.sa-related__title {
	font-family: var(--sa-font-display);
	font-size: 36px;
	line-height: 40px;
	letter-spacing: .9px;
	text-transform: uppercase;
	text-align: center;
	color: #132653;
	margin-bottom: 40px;
}
.sa-related__slider .sa-arrow { width: 44px; height: 44px; border-color: #DADEE7; }

/* WooCommerce Payments injects a hidden Stripe iframe that carries an inline
   width:calc(100% + 8px) and sits at left -4, pushing the document 4px past the
   viewport and giving every product page a horizontal scrollbar. Clamping the
   wrapper is not enough -- the iframe itself has to be clamped, and the wrapper
   clips whatever is left. Neither is visible, so nothing is lost. */
.__PrivateStripeElement { max-width: 100%; overflow: hidden; }
.__PrivateStripeElement iframe { max-width: 100%; }

@media (max-width: 1100px) {
	.sa-pd__grid { grid-template-columns: 1fr; gap: 32px; }
	.sa-pd__media { max-width: 569px; }
	.sa-about { padding: 56px 0; }
}

@media (max-width: 640px) {
	.sa-pd { padding: 28px 0 40px; }
	.sa-pd__grid { margin-top: 20px; }
	.sa-pd__title { font-size: 26px; line-height: 32px; }
	.sa-pd__price { font-size: 24px; line-height: 30px; }
	.sa-about { padding: 40px 0; }
	.sa-about__title { font-size: 24px; line-height: 30px; }
	.sa-about__tabs { justify-content: flex-start; margin-top: 24px; }
	.sa-about__panel { margin-top: 24px; padding: 24px; border-radius: 18px; }
	.sa-related__title { font-size: 24px; line-height: 30px; margin-bottom: 24px; }
	.sa-pd__buy { padding-top: 24px; }
	.sa-pd__add { flex: 1; min-width: 0; }
}

/* ---------------------------------------------------------------- Footer */

.sa-footer {
	position: relative;
	background: var(--sa-navy-deep);
	color: #fff;
	padding-top: var(--sa-section-y);
	overflow: hidden;
}
.sa-footer__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
	gap: 48px;
}
.sa-footer__logo img { width: 120px; height: auto; }
.sa-footer__about {
	margin-top: 24px;
	max-width: 360px;
	font-size: 15px;
	line-height: 24px;
	color: rgba(255, 255, 255, .64);
}
.sa-footer__heading {
	font-family: var(--sa-font-display);
	font-size: 14px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #fff;
	margin-bottom: 20px;
}
.sa-footer__links { display: grid; gap: 14px; }
.sa-footer__links a {
	font-size: 15px;
	color: rgba(255, 255, 255, .72);
	transition: color .15s ease;
}
.sa-footer__links a:hover { color: #fff; }

.sa-footer__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	margin-top: 48px;
	padding-block: 24px 32px;
	border-top: 1px solid rgba(255, 255, 255, .12);
}
.sa-footer__social { display: flex; gap: 16px; }
.sa-footer__social a { color: rgba(255, 255, 255, .72); }
.sa-footer__social a:hover { color: #fff; }
.sa-footer__copy { font-size: 14px; color: rgba(255, 255, 255, .6); }

/* Figma: 131px Avec, -3.41 tracking, #F7F7F7 at 5%, sitting clear of the footer
   edge. It was pulled down by a negative margin and cropped by the footer's
   overflow, which is why the letters looked welded to the bottom.
   Figma's 131px assumes Avec; in the fallback face the word runs ~5% wider than
   the viewport and the footer's overflow clipped the S and the E. 8.25vw clears
   it in the fallback, and services.js then measures the real glyphs and sizes
   the word to the gutter -- up to --sa-wordmark-max, so it lands on the Figma
   131px once Avec is installed and still fits whatever face loads today. */
.sa-footer__wordmark {
	display: block;
	width: 100%;
	--sa-wordmark-max: 9.097vw; /* the Figma size: 131 / 1440 */
	padding-inline: 2vw;
	padding-bottom: 1.25vw;    /* ~18px clear at 1440 */
	font-family: var(--sa-font-display);
	font-size: 8.25vw;         /* fits in the fallback face, before JS measures */
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	letter-spacing: -.026em;   /* -3.41 / 131 */
	color: rgba(247, 247, 247, .05);
	user-select: none;
	pointer-events: none;
	white-space: nowrap;
}

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

@media (max-width: 1280px) {
	.sa-hero__grid,
	.sa-services__grid { gap: 40px; }
	.sa-hero__title { font-size: 48px; line-height: 54px; }
	.sa-package { flex-basis: calc((100% - 48px) / 3); }
}

@media (max-width: 1100px) {
	.sa-header__menu { gap: 20px; }
	.sa-header__actions { gap: 14px; }
	.sa-hero__grid { grid-template-columns: 1fr; }
	.sa-services__grid { grid-template-columns: 1fr; }
	.sa-services__media { max-width: 590px; margin-inline: auto; }
	.sa-services__badge { bottom: -48px; }
	.sa-journey__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sa-timeline { grid-template-columns: repeat(3, minmax(0, 1fr)); row-gap: 40px; }
	.sa-faq__grid { grid-template-columns: 1fr; gap: 40px; }
	.sa-cta__box { grid-template-columns: 1fr; padding: 40px; }
	.sa-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 40px; }
}

@media (max-width: 900px) {
	.sa-header__toggle { display: inline-flex; }
	.sa-header__nav {
		position: absolute;
		top: calc(100% + 10px);
		left: 0; right: 0;
		display: none;
		padding: 16px;
		background: #fff;
		border-radius: var(--sa-r-lg);
		box-shadow: 0 18px 40px rgba(12, 38, 75, .14);
	}
	.sa-header__nav.is-open { display: block; }
	.sa-header__menu { flex-direction: column; align-items: flex-start; gap: 4px; }
	.sa-header__menu a { display: block; width: 100%; padding: 12px 8px; font-size: 16px; }
	/* Logo left, WhatsApp + menu button right -- without this they all pack left. */
	.sa-header__bar {
		gap: 10px;
		min-height: 64px;
		padding: 8px 14px;
	}
	.sa-header__logo { margin-right: auto; }
	.sa-header__actions { order: 2; gap: 10px; }
	.sa-header__toggle { order: 3; }
	.sa-header__cart { display: none; }
	/* Keep the WhatsApp icon as the tap target; the number itself is too wide here. */
	.sa-header__phone-num { display: none; }
	.sa-header__logo img { width: 58px; }

	.sa-stories__track { gap: 8px; padding-right: 8px; }
	.sa-story { flex-basis: 48vw; }
	.sa-package { flex-basis: calc((100% - 24px) / 2); }
	.sa-countries__title { font-size: 36px; line-height: 44px; }
}

@media (max-width: 640px) {
	.sa-hero { padding-top: 32px; }
	.sa-hero__title { font-size: 34px; line-height: 40px; }
	.sa-hero__lead { font-size: 17px; line-height: 27px; }
	.sa-btn { height: 50px; font-size: 16px; width: 100%; }
	.sa-hero__actions { gap: 12px; }
	.sa-hero__stats { gap: 20px; }
	.sa-stat { min-width: calc(50% - 10px); }
	/* Overlapping the card hides the video's own title at this size, so the
	   badge sits above it instead. */
	.sa-hero__media { display: flex; flex-direction: column; }
	.sa-rating {
		position: static;
		order: -1;
		margin-bottom: 12px;
		padding: 10px;
		gap: 8px;
		width: fit-content;
	}
	.sa-rating__avatars img { width: 28px; height: 28px; }

	.sa-services__cards { grid-template-columns: 1fr; }
	.sa-services__title,
	.sa-packages__title,
	.sa-journey__title,
	.sa-roadmap__title,
	.sa-compare__title,
	.sa-stories__title,
	.sa-faq__title,
	.sa-cta__title { font-size: 26px; line-height: 34px; }
	.sa-services__badge { position: static; width: 100%; margin-top: 16px; }

	.sa-journey__grid { grid-template-columns: 1fr; gap: 16px; }
	.sa-timeline { grid-template-columns: 1fr; gap: 32px; }
	.sa-milestone { padding-top: 0; padding-left: 52px; }
	.sa-milestone::before { display: none; }
	.sa-milestone__dot { top: 0; left: 0; }

	.sa-story { flex-basis: 70vw; }
	.sa-package { flex-basis: 100%; }
	.sa-footer__grid { grid-template-columns: 1fr; gap: 32px; }
	.sa-cta__box, .sa-cta__form { padding: 24px; }
	.sa-flag { width: 92px; height: 92px; padding: 22px; }
	.sa-flag svg, .sa-flag img { width: 44px; height: 44px; }
}

/* ========================================================== BASKET DRAWER ==
   Figma "Basket". A 448px white panel pinned to the right edge over a navy
   scrim, with its own scrolling list between a fixed head and foot. The whole
   panel is a flex column so the list takes the leftover height at any viewport
   rather than being given a fixed 666px as the Figma frame does. */

.sa-basket {
	position: fixed;
	top: 0;
	left: 0;
	/* Viewport units, not inset:0. A fixed element's containing block is the
	   initial containing block, and the hidden Stripe iframes WooCommerce
	   Payments injects on a product page stretch that to 970x2100 on a 390x844
	   phone. inset:0 inherited those numbers, which put the panel off-screen to
	   the right and pushed its Subtotal/Checkout footer ~1100px below the fold. */
	width: 100vw;
	height: 100vh;
	height: 100dvh;
	/* Above the floating third-party widgets. The Buy Me a Coffee button and its
	   tooltip sit at z-index 9999 in the bottom-right corner - exactly where this
	   panel's Checkout button lands - and a hit test showed them swallowing the
	   click. The Hustle popup sits at 999991, so this clears both. */
	z-index: 1000000;
}
.sa-basket[hidden] { display: none; }

.sa-basket__overlay {
	position: absolute;
	inset: 0;
	background: rgba(5, 14, 46, .4);
	opacity: 0;
	transition: opacity .3s ease;
}

.sa-basket__dialog {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	display: flex;
	flex-direction: column;
	width: 448px;
	/* vw, not %. On a product page WooCommerce Payments injects hidden Stripe
	   iframes that are min-width:100% !important, which stretches the fixed
	   containing block well past the screen (970px on a 390px phone). A
	   percentage width then resolved against that and pushed the panel's
	   contents off the left edge; 100vw tracks the real viewport. */
	max-width: 100vw;
	background: #fff;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
	transform: translateX(100%);
	transition: transform .32s cubic-bezier(.4, 0, .2, 1);
}

.sa-basket.sa-is-open .sa-basket__overlay { opacity: 1; }
.sa-basket.sa-is-open .sa-basket__dialog { transform: translateX(0); }

@media (prefers-reduced-motion: reduce) {
	.sa-basket__overlay,
	.sa-basket__dialog { transition: none; }
}

/* -- head ---------------------------------------------------------------- */

.sa-basket__head {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex: none;
	padding: 20px 24px;
	border-bottom: 1px solid #E6E8EE;
}

.sa-basket__title {
	margin: 0;
	font-family: var(--sa-font-display);
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: .7px;
	text-transform: uppercase;
	color: #0B1F5C;
}

.sa-basket__close {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: none;
	color: #0B1F5C;
	cursor: pointer;
	transition: background-color .15s ease;
}
.sa-basket__close:hover { background: #F6F7FA; }

/* -- list ---------------------------------------------------------------- */

.sa-basket__list {
	flex: 1 1 auto;
	min-height: 0;
	overflow-y: auto;
	padding: 0 24px;
	overscroll-behavior: contain;
}

.sa-basket__empty {
	margin: 0;
	padding: 48px 0;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #5B6475;
	text-align: center;
}

.sa-basket__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px 0;
}
.sa-basket__item + .sa-basket__item { border-top: 1px solid #E6E8EE; }

.sa-basket__thumb {
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 12px;
	overflow: hidden;
	background: #F6F7FA;
}
.sa-basket__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sa-basket__body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1 1 auto;
	min-width: 0;
}

.sa-basket__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 12px;
}

.sa-basket__naming {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sa-basket__eyebrow {
	font-family: var(--sa-font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	color: #5B6475;
}

.sa-basket__name {
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 19px;
	color: #0B1F5C;
}

.sa-basket__price {
	flex: none;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: #111827;
	white-space: nowrap;
}
.sa-basket__price del { opacity: .5; font-weight: 400; margin-right: 4px; }
.sa-basket__price ins { text-decoration: none; }

.sa-basket__controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 12px;
}

/* The product page stepper at the basket's smaller size. The minus goes pale
   only when it is actually disabled, rather than always, as it does there. */
.sa-qty--sm { height: 40px; }
.sa-qty--sm .sa-qty__btn:first-child { color: #0B1F5C; }
.sa-qty--sm .sa-qty__btn:disabled { color: #E6E8EE; cursor: default; }
.sa-qty--sm .sa-qty__btn:disabled:hover { background: none; }

.sa-qty__value {
	width: 32px;
	flex: none;
	text-align: center;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: #0B1F5C;
}

.sa-basket__remove {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	height: 24px;
	padding: 4px 8px;
	border: 0;
	border-radius: 9999px;
	background: none;
	font-family: var(--sa-font-body);
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	color: #5B6475;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.sa-basket__remove:hover { background: #FDECEE; color: #C8102E; }

/* -- foot ---------------------------------------------------------------- */

.sa-basket__foot {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex: none;
	padding: 20px 24px;
	border-top: 1px solid #E6E8EE;
}

.sa-basket__subtotal {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
}

.sa-basket__subtotal-label {
	font-family: var(--sa-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #5B6475;
}

.sa-basket__subtotal-value {
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 20px;
	line-height: 28px;
	color: #111827;
}

.sa-basket__note {
	margin: 0;
	font-family: var(--sa-font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	color: #5B6475;
}

.sa-basket__actions {
	display: flex;
	gap: 12px;
	padding-top: 16px;
}

.sa-basket__view,
.sa-basket__checkout {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	flex: 1 1 0;
	height: 48px;
	border-radius: 9999px;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	text-decoration: none;
	transition: background-color .15s ease, color .15s ease;
}

.sa-basket__view {
	border: 1px solid #0B1F5C;
	color: #0B1F5C;
}
.sa-basket__view:hover { background: #0B1F5C; color: #fff; }

.sa-basket__checkout {
	background: #C8102E;
	color: #fff;
}
.sa-basket__checkout:hover { background: #A60D26; }

/* While the panel is refreshing, dim it rather than letting rows jump. */
.sa-basket.sa-is-busy .sa-basket__list,
.sa-basket.sa-is-busy .sa-basket__foot { opacity: .55; pointer-events: none; }

@media (max-width: 480px) {
	.sa-basket__dialog { width: 100vw; }
	.sa-basket__head,
	.sa-basket__foot { padding: 16px 20px; }
	.sa-basket__list { padding: 0 20px; }
}

/* -- add to basket ------------------------------------------------------- */
/* Add to cart is handled in place: the basket slides in rather than the page
   navigating away. These cover the moment between the press and the panel
   filling, so the button never looks like it did nothing. */

.sa-is-adding {
	pointer-events: none;
	opacity: .72;
}

.sa-basket__error {
	margin: 0;
	padding: 12px 24px;
	background: #FDECEE;
	font-family: var(--sa-font-body);
	font-weight: 500;
	font-size: 13px;
	line-height: 18px;
	color: #8E0B20;
}

/* ============================================================ BASKET PAGE ==
   Figma "Basket". Continue-browsing link and a three-step progress rail, the
   title, then the lines beside a sticky Order Summary card. Rows share the
   drawer's stepper and Remove control; only the scale differs. */

.sa-cart { padding: 40px 0 80px; }

.sa-cart__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 32px;
	flex-wrap: wrap;
}

.sa-cart__back {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #5B6475;
	text-decoration: none;
	transition: color .15s ease;
}
.sa-cart__back:hover { color: #0B1F5C; }

/* -- progress rail ------------------------------------------------------- */

.sa-steps {
	display: flex;
	align-items: center;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.sa-steps__item {
	display: flex;
	align-items: center;
	gap: 12px;
}

.sa-steps__num {
	display: grid;
	place-items: center;
	flex: none;
	width: 24px;
	height: 24px;
	border-radius: 9999px;
	background: #E7EBF5;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 11px;
	line-height: 16px;
	color: #5B6475;
}

.sa-steps__label {
	font-family: var(--sa-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #5B6475;
	white-space: nowrap;
}

.sa-steps__item.is-current .sa-steps__num { background: #C8102E; color: #fff; }
.sa-steps__item.is-current .sa-steps__label { font-weight: 600; color: #0B1F5C; }

.sa-steps__rule {
	flex: none;
	width: 40px;
	height: 1px;
	background: #E6E8EE;
}

/* -- heading and layout -------------------------------------------------- */

.sa-cart__title {
	margin: 32px 0 0;
	font-family: var(--sa-font-display);
	font-weight: 400;
	font-size: 36px;
	line-height: 40px;
	text-transform: uppercase;
	color: #0B1F5C;
}

.sa-cart__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 380px;
	align-items: start;
	gap: 56px;
	margin-top: 40px;
}

.sa-cart__count {
	margin: 0 0 8px;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #5B6475;
}

.sa-cart__list {
	border-top: 1px solid #E6E8EE;
	border-bottom: 1px solid #E6E8EE;
}

/* -- a line -------------------------------------------------------------- */

.sa-cart__item {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 24px 0;
}
.sa-cart__item + .sa-cart__item { border-top: 1px solid #E6E8EE; }

.sa-cart__thumb {
	flex: none;
	width: 112px;
	height: 112px;
	border-radius: 12px;
	overflow: hidden;
	background: #F6F7FA;
}
.sa-cart__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sa-cart__body {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	flex: 1 1 auto;
	min-width: 0;
	min-height: 112px;
}

.sa-cart__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
}

.sa-cart__naming {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.sa-cart__eyebrow {
	font-family: var(--sa-font-body);
	font-size: 12px;
	line-height: 16px;
	color: #5B6475;
}

.sa-cart__name {
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 16px;
	line-height: 22px;
	color: #0B1F5C;
}

.sa-cart__unit {
	padding-top: 2px;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #5B6475;
}
.sa-cart__unit .woocommerce-Price-amount { color: inherit; }

.sa-cart__price {
	flex: none;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: #111827;
	white-space: nowrap;
}

.sa-cart__controls {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-top: 12px;
}

.sa-cart__empty {
	padding: 64px 0;
	text-align: center;
	font-family: var(--sa-font-body);
	color: #5B6475;
}
.sa-cart__empty p { margin: 0 0 16px; font-size: 16px; line-height: 26px; }
.sa-cart__empty-link {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	height: 48px;
	padding: 0 28px;
	border-radius: 9999px;
	background: #C8102E;
	font-weight: 600;
	font-size: 14px;
	color: #fff;
	text-decoration: none;
}

/* -- order summary ------------------------------------------------------- */

.sa-summary {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 20px;
	padding: 32px;
	border-radius: 24px;
	background: #F6F7FA;
}

.sa-summary__title {
	margin: 0;
	font-family: var(--sa-font-display);
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: .7px;
	text-transform: uppercase;
	color: #0B1F5C;
}

.sa-summary__rows {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin: 0;
	padding-top: 28px;
	border-top: 1px solid #E6E8EE;
}

.sa-summary__row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
}
.sa-summary__row dt,
.sa-summary__row dd {
	margin: 0;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
}
.sa-summary__row dt { color: #5B6475; }
.sa-summary__row dd { color: #111827; text-align: right; }

.sa-summary__total {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 24px;
	padding-top: 16px;
	border-top: 1px solid #E6E8EE;
}

.sa-summary__total-label {
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: #0B1F5C;
}

.sa-summary__total-value {
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 24px;
	line-height: 32px;
	color: #111827;
}

.sa-summary__checkout {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 6px;
	height: 52px;
	border-radius: 9999px;
	background: #C8102E;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: #fff;
	text-decoration: none;
	transition: background-color .15s ease;
}
.sa-summary__checkout:hover { background: #A60D26; }
.sa-summary__checkout.is-disabled { background: #D7DAE3; pointer-events: none; }

.sa-summary__secure {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: var(--sa-font-body);
	font-size: 12px;
	line-height: 16px;
	color: #5B6475;
}
.sa-summary__secure svg { flex: none; color: #0B1F5C; }

/* While a row is updating, dim rather than let the list jump. */
.sa-cart.sa-is-busy .sa-cart__list,
.sa-cart.sa-is-busy .sa-summary { opacity: .55; pointer-events: none; }

/* -- narrower ------------------------------------------------------------ */

@media (max-width: 1024px) {
	.sa-cart__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.sa-summary { position: static; }
	.sa-steps__label { display: none; }
	.sa-steps__item.is-current .sa-steps__label { display: block; }
}

@media (max-width: 640px) {
	.sa-cart { padding: 24px 0 56px; }
	.sa-cart__title { font-size: 26px; line-height: 32px; margin-top: 24px; }
	.sa-cart__grid { margin-top: 24px; }
	.sa-cart__thumb { width: 80px; height: 80px; }
	.sa-cart__body { min-height: 80px; }
	.sa-cart__top { flex-direction: column; gap: 4px; }
	.sa-cart__name { font-size: 15px; line-height: 20px; }
	.sa-cart__controls { padding-top: 16px; }
	.sa-summary { padding: 24px; }
	.sa-cart__bar { gap: 16px; }
}

/* ============================================== CHECKOUT & CONFIRMATION ==
   Figma "Checkout" and "Order confirmed". Both reuse the basket page's rail,
   title and Order Summary card, so only what differs is defined here. */

.sa-steps__item.is-done .sa-steps__num { background: #0B1F5C; color: #fff; }
.sa-steps__item.is-done .sa-steps__label { color: #5B6475; }
.sa-checkout .sa-steps__item.is-current .sa-steps__label { color: #0B1F5C; }

.sa-checkout__col { display: flex; flex-direction: column; gap: 48px; min-width: 0; }
.sa-checkout__aside { min-width: 0; }

/* -- fieldsets ----------------------------------------------------------- */

.sa-field-set { margin: 0; padding: 0; border: 0; }
.sa-field-set legend {
	padding: 0;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 18px;
	line-height: 28px;
	color: #0B1F5C;
}
.sa-field-set__hint {
	margin: 0;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #5B6475;
}

.sa-fields {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 20px;
}
.sa-fields .sa-col-6 { grid-column: span 1; }
.sa-fields .sa-col-12,
.sa-fields .form-row-wide { grid-column: 1 / -1; }

.sa-fields .form-row { margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.sa-fields label {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	font-family: var(--sa-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: #0B1F5C;
}
.sa-fields label .required { color: #C8102E; text-decoration: none; }
.sa-optional {
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	color: #5B6475;
}

.sa-fields input[type="text"],
.sa-fields input[type="email"],
.sa-fields input[type="tel"],
.sa-fields select,
.sa-fields textarea,
.sa-fields .select2-container .select2-selection--single {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 16px;
	border: 1px solid #E6E8EE;
	border-radius: 12px;
	background: #fff;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #111827;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.sa-fields textarea { height: 106px; padding: 14px 16px; resize: vertical; }

.sa-fields input::placeholder,
.sa-fields textarea::placeholder { color: rgba(91, 100, 117, .7); }

.sa-fields input:focus,
.sa-fields select:focus,
.sa-fields textarea:focus {
	outline: none;
	border-color: #0B1F5C;
	box-shadow: 0 0 0 3px rgba(11, 31, 92, .12);
}

.sa-fields .woocommerce-invalid input,
.sa-fields .woocommerce-invalid select { border-color: #C8102E; }

/* Select2 is WooCommerce's country picker; make it wear the same box. */
.sa-fields .select2-container .select2-selection--single {
	display: flex;
	align-items: center;
}
.sa-fields .select2-container--default .select2-selection--single .select2-selection__rendered {
	padding: 0;
	line-height: 20px;
	color: #111827;
}
.sa-fields .select2-container--default .select2-selection--single .select2-selection__arrow { top: 50%; right: 12px; transform: translateY(-50%); }

/* -- payment methods ----------------------------------------------------- */

.sa-field-set--payment .sa-pay { margin-top: 24px; }

.sa-pay__methods {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

/* display:contents dissolves the <li> so the gateway's label and its
   payment_box become grid items in their own right. Without it the box with
   the card fields is trapped in a one-third column and Stripe's form is
   squeezed into it. The radio is taken out of flow so it claims no cell. */
.sa-pay__methods > li.wc_payment_method { display: contents; }

.sa-pay__methods > li.wc_payment_method > input[type="radio"] {
	position: absolute;
	width: 1px;
	height: 1px;
	opacity: 0;
	pointer-events: none;
}

/* The gateway label becomes the card. Row 1 holds every method, row 2 the
   fields of whichever is selected - without pinning the rows the chosen
   gateway's box lands between two cards and breaks the row, because the DOM
   order is label, box, label, box. */
.sa-pay__methods > li.wc_payment_method > label {
	grid-row: 1;
	/* The dot below is absolute, and display:contents on the <li> leaves it no
	   positioned parent nearer than the page - it was being drawn somewhere
	   else entirely, so the tiles had no dot at all. */
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
	min-height: 120px;
	padding: 16px;
	border: 1px solid #E6E8EE;
	border-radius: 16px;
	background: #fff;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: #0B1F5C;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.sa-pay__methods > li.wc_payment_method > label:hover { border-color: #C3CAD9; }

/* The radio itself is hidden, so the dot is drawn on the label. */
.sa-pay__methods > li.wc_payment_method > label::after {
	content: '';
	position: absolute;
	top: 18px;
	right: 16px;
	width: 16px;
	height: 16px;
	border: 2px solid #E6E8EE;
	border-radius: 9999px;
	background: #fff;
	transition: border-color .15s ease, border-width .15s ease;
}

.sa-pay__methods > li.wc_payment_method > input[type="radio"]:checked + label {
	border-color: #0B1F5C;
	background: #F3F5FB;
}
.sa-pay__methods > li.wc_payment_method > input[type="radio"]:checked + label::after {
	border-width: 5px;
	border-color: #0B1F5C;
}
.sa-pay__methods > li.wc_payment_method > input[type="radio"]:focus-visible + label {
	box-shadow: 0 0 0 3px rgba(11, 31, 92, .18);
}

.sa-pay__methods > li.wc_payment_method > label img {
	max-height: 20px;
	width: auto;
	margin: 0;
}
.sa-pay__methods > li.wc_payment_method > label .payment-methods--logos {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
	margin-top: auto;
}
.sa-pay__methods > li.wc_payment_method > label .payment-methods--logos > div {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 4px;
}

/* The selected gateway's own fields take the whole row under the three cards. */
.sa-pay__methods > li.wc_payment_method > .payment_box {
	grid-row: 2;
	grid-column: 1 / -1;
	margin: 0;
	padding: 20px;
	border: 1px solid #E6E8EE;
	border-radius: 16px;
	background: #fff;
	font-family: var(--sa-font-body);
	font-weight: 400;
	font-size: 12px;
	line-height: 16px;
	color: #5B6475;
}
.sa-pay__methods .payment_box::before,
.sa-pay__methods .payment_box::after { display: none; }
.sa-pay__methods .payment_box p { margin: 0; font-size: 13px; line-height: 20px; }
.sa-pay__methods .payment_box fieldset { margin: 0; padding: 0; border: 0; }

/* Stripe's hosted card fields, dressed to match the design's boxes. Only the
   wrapper is ours - the inputs themselves live in Stripe's iframe. */
.sa-pay .wcpay-card-mount,
.sa-pay .wc-stripe-elements-field,
.sa-pay .wcpay-upe-element {
	box-sizing: border-box;
	min-height: 48px;
	padding: 13px 16px;
	border: 1px solid #E6E8EE;
	border-radius: 12px;
	background: #fff;
}

/* -- order summary on checkout ------------------------------------------- */

.sa-summary--checkout { position: sticky; top: 24px; }

.sa-summary__items {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin: 0;
	padding: 4px 0 0;
	list-style: none;
}

.sa-mini { display: flex; align-items: center; gap: 12px; }

.sa-mini__thumb {
	position: relative;
	flex: none;
	width: 56px;
	height: 56px;
	border-radius: 12px;
	background: #fff;
}
.sa-mini__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 12px; }

.sa-mini__qty {
	position: absolute;
	top: -6px;
	right: -6px;
	display: grid;
	place-items: center;
	min-width: 20px;
	height: 20px;
	padding: 0 6px;
	border-radius: 9999px;
	background: #0B1F5C;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 11px;
	line-height: 16px;
	color: #fff;
}

.sa-mini__name {
	flex: 1 1 auto;
	min-width: 0;
	font-family: var(--sa-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 19px;
	color: #0B1F5C;
}

.sa-mini__price {
	flex: none;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #111827;
	white-space: nowrap;
}

.sa-is-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* -- terms + pay --------------------------------------------------------- */

.sa-pay__confirm { display: flex; flex-direction: column; gap: 20px; margin: 0; padding: 4px 0 0; }

.sa-check {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #5B6475;
	cursor: pointer;
}
/* A flex item will not shrink below the width of its longest unbreakable run,
   which on a 390px screen pushed this line 15px past the edge and gave the
   whole checkout a horizontal scrollbar. min-width lets it shrink and wrap at
   the spaces it already has.

   Not `overflow-wrap: anywhere`: that one also rewrites the item's min-content
   width to a single character, so the flex item collapsed to the width of one
   letter and the sentence came out as a vertical column. `break-word` leaves
   the intrinsic width alone and only breaks a word that genuinely cannot fit. */
.sa-check > span {
	flex: 1 1 auto;
	min-width: 0;
	overflow-wrap: break-word;
}
.sa-check input {
	flex: none;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	border-radius: 2.5px;
	accent-color: #0B1F5C;
	cursor: pointer;
}
.sa-check a { color: #0B1F5C; text-decoration: underline; }

.sa-pay__button {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	/* The lock is a background, not an inline SVG: WooCommerce rewrites this
	   button's contents with .text() on every payment-method change, so any
	   child element would be discarded. */
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16' fill='none' stroke='%23fff' stroke-width='1.333' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2.67' y='6.67' width='10.66' height='7.33' rx='1.5'/%3E%3Cpath d='M5.33 6.67V4.67a2.67 2.67 0 0 1 5.34 0v2'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: calc(50% - 4.2em) 50%;
	width: 100%;
	height: 48px;
	padding: 0 20px;
	border: 0;
	border-radius: 9999px;
	background: #C8102E;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease;
}
.sa-pay__button:hover { background: #A60D26; }
.sa-pay__button:disabled { background: #D7DAE3; cursor: default; }
.sa-pay__button .woocommerce-Price-amount { color: inherit; }

/* -- order confirmed ----------------------------------------------------- */

.sa-confirmed__col { display: flex; flex-direction: column; gap: 24px; min-width: 0; }
.sa-confirmed__aside { display: flex; flex-direction: column; gap: 24px; min-width: 0; }

.sa-receipt {
	padding: 32px;
	border-radius: 24px;
	background: #11244F;
	color: #FCFAF8;
}

.sa-receipt__status {
	margin: 0 0 12px;
	font-family: var(--sa-font-body);
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: #6EE7B7;
}

.sa-receipt__head { display: flex; align-items: center; gap: 18px; }

.sa-receipt__tick {
	display: grid;
	place-items: center;
	flex: none;
	width: 64px;
	height: 64px;
	border-radius: 9999px;
	background: #10B981;
	color: #fff;
	box-shadow: 0 0 0 8px rgba(52, 211, 153, .3);
}

.sa-receipt__title {
	margin: 0;
	font-family: var(--sa-font-body);
	font-weight: 400;
	font-size: 24px;
	line-height: 32px;
	color: #FCFAF8;
}

.sa-receipt__sent {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: 6px;
	margin: 6px 0 0;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: rgba(252, 250, 248, .7);
}
.sa-receipt__sent strong { font-weight: 400; color: #FCFAF8; }

.sa-receipt__facts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 1px;
	margin: 32px 0 0;
	border-radius: 18px;
	overflow: hidden;
	background: rgba(252, 250, 248, .1);
}
.sa-receipt__fact { padding: 16px; background: rgba(17, 36, 79, .8); }
.sa-receipt__fact dt {
	margin: 0 0 4px;
	font-family: var(--sa-font-body);
	font-size: 11px;
	line-height: 16px;
	letter-spacing: .55px;
	text-transform: uppercase;
	color: rgba(252, 250, 248, .55);
}
.sa-receipt__fact dd {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #FCFAF8;
}
.sa-receipt__fact dd .woocommerce-Price-amount { color: inherit; }

.sa-receipt__copy {
	display: grid;
	place-items: center;
	flex: none;
	width: 22px;
	height: 22px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: rgba(252, 250, 248, .12);
	color: #FCFAF8;
	cursor: pointer;
	transition: background-color .15s ease;
}
.sa-receipt__copy:hover { background: rgba(252, 250, 248, .24); }
.sa-receipt__copy.is-copied { background: #10B981; }

/* -- what happens next --------------------------------------------------- */

.sa-next,
.sa-recap {
	padding: 32px;
	border: 1px solid #E6E1DB;
	border-radius: 24px;
	background: #fff;
}

.sa-next__title,
.sa-recap__title {
	margin: 0;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 18px;
	line-height: 28px;
	color: #101F41;
}

.sa-next__lead {
	margin: 4px 0 0;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #5C657A;
}

.sa-next__list {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}

.sa-next__step { display: flex; align-items: flex-start; gap: 16px; }

.sa-next__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border: 1px solid #E6E1DB;
	border-radius: 9999px;
	background: #FCFAF8;
	color: #5C657A;
}
.sa-next__step.is-done .sa-next__icon { border-color: transparent; background: #11244F; color: #FCFAF8; }
.sa-next__step.is-active .sa-next__icon { border-color: transparent; background: #A91928; color: #fff; }

.sa-next__body { flex: 1 1 auto; min-width: 0; }

.sa-next__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
}
.sa-next__row h3 {
	margin: 0;
	font-family: var(--sa-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: #101F41;
}
.sa-next__step:not(.is-done):not(.is-active) .sa-next__row h3 { color: rgba(16, 31, 65, .7); }

.sa-next__body p {
	margin: 4px 0 0;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 23px;
	color: #5C657A;
}

.sa-tag {
	flex: none;
	padding: 2px 10px;
	border-radius: 9999px;
	background: #F3F1EC;
	font-family: var(--sa-font-body);
	font-size: 11px;
	line-height: 16px;
	color: #5C657A;
	white-space: nowrap;
}
.sa-tag--red { background: #FAEBEC; color: #8E1521; }

/* -- details + payment recap --------------------------------------------- */

.sa-recap {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 32px;
}
.sa-recap__half { min-width: 0; }
.sa-recap__title {
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	letter-spacing: .7px;
	text-transform: uppercase;
}

.sa-recap__list { display: flex; flex-direction: column; gap: 16px; margin: 20px 0 0; }
.sa-recap__list > div { min-width: 0; }
.sa-recap__list dt {
	margin: 0 0 2px;
	font-family: var(--sa-font-body);
	font-size: 12px;
	line-height: 16px;
	color: #5C657A;
}
.sa-recap__list dd {
	margin: 0;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #101F41;
	overflow-wrap: anywhere;
}
.sa-recap__status.is-paid { color: #059669; }
.sa-recap__txn { font-size: 12px; line-height: 16px; }

/* -- summary extras on the confirmation ---------------------------------- */

.sa-summary__browse {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 8px;
	height: 48px;
	border-radius: 9999px;
	background: #FCFAF8;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #101F41;
	text-decoration: none;
	transition: background-color .15s ease;
}
.sa-summary__browse:hover { background: #fff; }

.sa-help {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 24px;
	border: 1px solid #E6E1DB;
	border-radius: 24px;
	background: #fff;
}
.sa-help__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 9999px;
	background: rgba(16, 185, 129, .1);
	color: #059669;
}
.sa-help__title {
	margin: 0;
	font-family: var(--sa-font-body);
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #101F41;
}
.sa-help__text {
	margin: 4px 0 0;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #5C657A;
}
.sa-help__text strong { font-weight: 400; font-size: 12px; color: #101F41; }
.sa-help__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 12px;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #A91928;
	text-decoration: none;
}
.sa-help__link:hover { text-decoration: underline; }

/* -- narrower ------------------------------------------------------------ */

@media (max-width: 1024px) {
	.sa-checkout__col { gap: 32px; }
	.sa-summary--checkout { position: static; }
	/* One column, so the cards stack in DOM order. The row pinning that keeps
	   them side by side on desktop would otherwise crush them all into row 1. */
	.sa-pay__methods { grid-template-columns: minmax(0, 1fr); }
	.sa-pay__methods > li.wc_payment_method > label,
	.sa-pay__methods > li.wc_payment_method > .payment_box { grid-row: auto; }
	.sa-receipt__facts { grid-template-columns: minmax(0, 1fr); }
	.sa-recap { grid-template-columns: minmax(0, 1fr); gap: 24px; }
}

@media (max-width: 640px) {
	.sa-fields { grid-template-columns: minmax(0, 1fr); }
	.sa-fields .sa-col-6 { grid-column: 1 / -1; }
	.sa-receipt,
	.sa-next,
	.sa-recap { padding: 24px; }
	.sa-receipt__head { flex-direction: column; align-items: flex-start; gap: 12px; }
	.sa-receipt__title { font-size: 20px; line-height: 28px; }
	.sa-next__row { flex-direction: column; align-items: flex-start; gap: 4px; }
}

/* =============================================================== CONTACT ==
   Figma "Contact us". Navy hero with a red sweep at its foot, four contact
   cards straddling that edge, the enquiry form beside the office column, and
   the Services FAQ block reused verbatim. */

/* The navy runs up behind the floating header pill, as the design shows -
   the hero is pulled up by the header's height and gets it back as padding,
   so the copy keeps its position while the background extends to the top.
   The header's own cream band has to go transparent too, or it paints over
   the navy it is supposed to be floating on (same as the Home hero). */
.sa-contact-page { --sa-header-h: 132px; }
.sa-contact-page .sa-header { background: transparent; }

.sa-chero {
	position: relative;
	overflow: hidden;
	background: #11244F;
	margin-top: calc(-1 * var(--sa-header-h));
	padding: calc(var(--sa-header-h) + 120px) 0 150px;
}

/* The blurred red bloom in the top-right corner. */
.sa-chero__glow {
	position: absolute;
	top: -95px;
	right: -160px;
	width: 480px;
	height: 480px;
	border-radius: 9999px;
	background: rgba(169, 25, 40, .3);
	filter: blur(32px);
	pointer-events: none;
}

.sa-chero__inner {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 448px);
	align-items: end;
	gap: 48px;
}

.sa-chero__title {
	margin: 0;
	font-family: var(--sa-font-display);
	font-weight: 400;
	font-size: 60px;
	line-height: 60px;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: #FCFAF8;
}
.sa-chero__title .sa-accent { color: #ED2224; }

.sa-chero__lead {
	margin: 0 0 8px;
	font-family: var(--sa-font-ui);
	font-size: 18px;
	line-height: 28px;
	color: rgba(252, 250, 248, .7);
}

.sa-chero__wave {
	position: absolute;
	left: 0;
	right: 0;
	bottom: -1px;
	width: 100%;
	height: 56px;
	display: block;
}

/* -- the four ways to reach us ------------------------------------------- */

.sa-ways { margin-top: -96px; position: relative; z-index: 2; }

.sa-ways__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
}

.sa-way {
	display: flex;
	flex-direction: column;
	min-height: 247px;
	padding: 24px;
	border: 1px solid #E6E1DB;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease, background-color .2s ease, border-color .2s ease;
}

/* The navy treatment is the hover state, not a fixed one on the first card.
   :focus-within carries it too, so it reads the same when tabbed to. */
.sa-way:hover,
.sa-way:focus-visible,
.sa-way:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 28px 34px -6px rgba(0, 0, 0, .16);
	background: #11244F;
	border-color: rgba(252, 250, 248, .18);
}

.sa-way__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
}

.sa-way__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 18px;
	background: #ED2224;
	color: #fff;
}

.sa-way__arrow { color: #5C657A; transition: transform .2s ease; }
.sa-way:hover .sa-way__arrow { transform: translate(3px, -3px); }
.sa-way:hover .sa-way__arrow, .sa-way:focus-within .sa-way__arrow { color: rgba(252, 250, 248, .6); }

.sa-way__title {
	margin-top: 20px;
	font-family: var(--sa-font-display);
	font-weight: 400;
	font-size: 16px;
	line-height: 24px;
	color: #101F41;
}
.sa-way:hover .sa-way__title, .sa-way:focus-within .sa-way__title { color: #fff; }

.sa-way__desc {
	margin-top: 4px;
	font-family: var(--sa-font-body);
	font-size: 12px;
	line-height: 16px;
	color: #5C657A;
}
.sa-way:hover .sa-way__desc, .sa-way:focus-within .sa-way__desc { color: rgba(255, 255, 255, .75); }

.sa-way__value {
	margin-top: 16px;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 14px;
	line-height: 20px;
	color: #101F41;
	overflow-wrap: anywhere;
}
.sa-way:hover .sa-way__value, .sa-way:focus-within .sa-way__value { color: #fff; }

.sa-way__cta {
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid #E6E1DB;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: #A91928;
}
.sa-way:hover .sa-way__cta, .sa-way:focus-within .sa-way__cta { border-top-color: rgba(252, 250, 248, .25); color: #FDA4AF; }

/* -- form + aside -------------------------------------------------------- */

.sa-ask__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 501px);
	align-items: start;
	gap: 48px;
}

.sa-ask__title {
	margin: 0;
	font-family: var(--sa-font-display);
	font-weight: 400;
	font-size: 36px;
	line-height: 40px;
	letter-spacing: .36px;
	text-transform: uppercase;
	color: #101F41;
}

.sa-ask__lead {
	margin: 16px 0 0;
	font-family: var(--sa-font-body);
	font-size: 16px;
	line-height: 26px;
	color: #5C657A;
}

.sa-contact__card {
	margin-top: 32px;
	padding: 33px;
	border: 1px solid #E6E1DB;
	border-radius: 32px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
}

/* -- WPForms, dressed to the design -------------------------------------- */

.sa-contact__card .wpforms-field-container {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}
.sa-contact__card .wpforms-field { margin: 0; padding: 0; }
.sa-contact__card .wpforms-field.sa-full,
.sa-contact__card .wpforms-field-textarea,
.sa-contact__card .wpforms-field-checkbox { grid-column: 1 / -1; }

.sa-contact__card .wpforms-field-label {
	display: block;
	margin: 0 0 8px;
	font-family: var(--sa-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 14px;
	color: #101F41;
}
.sa-contact__card .wpforms-required-label { color: #A91928; }

.sa-contact__card .wpforms-field-sublabel {
	margin-top: 6px;
	font-family: var(--sa-font-body);
	font-size: 12px;
	line-height: 16px;
	color: #5C657A;
}

.sa-contact__card input[type="text"],
.sa-contact__card input[type="email"],
.sa-contact__card input[type="tel"],
.sa-contact__card select,
.sa-contact__card textarea {
	box-sizing: border-box;
	width: 100%;
	height: 44px;
	padding: 0 13px;
	border: 1px solid #E2DCD5;
	border-radius: 8px;
	background: #FCFAF8;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #101F41;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.sa-contact__card textarea { height: 118px; min-height: 60px; padding: 11px 13px; resize: vertical; }

.sa-contact__card input::placeholder,
.sa-contact__card textarea::placeholder { color: #5C657A; }

.sa-contact__card input:focus,
.sa-contact__card select:focus,
.sa-contact__card textarea:focus {
	outline: none;
	border-color: #A91928;
	box-shadow: 0 0 0 3px rgba(169, 25, 40, .12);
}

.sa-contact__card .wpforms-field-limit-text {
	margin-top: 6px;
	font-family: var(--sa-font-body);
	font-size: 11px;
	line-height: 16px;
	color: #5C657A;
	text-align: right;
}

/* The newsletter opt-in reads as a sentence, not a form row. */
.sa-contact__card .wpforms-field-checkbox .wpforms-field-label { display: none; }
.sa-contact__card .wpforms-field-checkbox ul { margin: 0; padding: 0; list-style: none; }
.sa-contact__card .wpforms-field-checkbox li { display: flex; align-items: flex-start; gap: 12px; }
.sa-contact__card .wpforms-field-checkbox input[type="checkbox"] {
	flex: none;
	width: 16px;
	height: 16px;
	margin: 2px 0 0;
	border-radius: 6px;
	accent-color: #A91928;
}
.sa-contact__card .wpforms-field-checkbox label {
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 19px;
	color: #5C657A;
}

.sa-contact__card .wpforms-submit-container { margin-top: 24px; padding: 0; }

.sa-contact__card button[type="submit"] {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 16px;
	height: 48px;
	padding: 0 40px;
	border: 0;
	border-radius: 9999px;
	background: #A91928;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
	font-family: var(--sa-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease;
}
.sa-contact__card button[type="submit"]:hover { background: #8E1521; }

.sa-contact__card .wpforms-error {
	margin-top: 6px;
	font-family: var(--sa-font-body);
	font-size: 12px;
	line-height: 16px;
	color: #A91928;
}
.sa-contact__card .wpforms-confirmation-container-full {
	margin: 0;
	padding: 20px;
	border: 1px solid #10B981;
	border-radius: 16px;
	background: rgba(16, 185, 129, .08);
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 22px;
	color: #101F41;
}

/* -- aside --------------------------------------------------------------- */

.sa-ask__aside { display: flex; flex-direction: column; gap: 24px; }

.sa-office {
	position: relative;
	overflow: hidden;
	padding: 28px;
	border-radius: 32px;
	background: #11244F;
	color: #FCFAF8;
}
.sa-office__blob {
	position: absolute;
	right: -80px;
	bottom: -80px;
	width: 224px;
	height: 224px;
	border-radius: 9999px;
	background: #A91928;
}
.sa-office__ring {
	position: absolute;
	right: 96px;
	bottom: -24px;
	width: 112px;
	height: 112px;
	border: 18px solid rgba(252, 250, 248, .1);
	border-radius: 9999px;
}

.sa-office__eyebrow,
.sa-hours__eyebrow,
.sa-follow__eyebrow {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: .12px;
	text-transform: uppercase;
}
.sa-office__eyebrow { color: #FCFAF8; }
.sa-office__eyebrow svg { color: #FDA4AF; }
.sa-hours__eyebrow { color: #101F41; }
.sa-hours__eyebrow svg { color: #A91928; }
.sa-follow__eyebrow { color: #101F41; }

.sa-office__address {
	position: relative;
	z-index: 1;
	margin: 15px 0 0;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 18px;
	line-height: 25px;
	color: #FCFAF8;
}

.sa-office__link {
	position: relative;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	margin-top: 20px;
	padding: 8px 16px;
	border-radius: 9999px;
	background: #FCFAF8;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 12px;
	line-height: 16px;
	color: #11244F;
	text-decoration: none;
}
.sa-office__link:hover { background: #fff; }

.sa-hours,
.sa-follow {
	padding: 28px;
	border: 1px solid #E6E1DB;
	border-radius: 32px;
	background: #fff;
}

.sa-hours__list { margin: 16px 0 0; padding: 0; list-style: none; }
.sa-hours__list li {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	padding: 12px 0;
}
.sa-hours__list li + li { border-top: 1px solid #E6E1DB; }

.sa-hours__day {
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #5C657A;
}
.sa-hours__time {
	font-family: var(--sa-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: #101F41;
}
.sa-hours__time.is-closed { color: #A91928; }

.sa-follow__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
	margin-top: 16px;
}

.sa-follow__item {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	border: 1px solid #E6E1DB;
	border-radius: 18px;
	text-decoration: none;
	transition: border-color .15s ease, background-color .15s ease;
}
.sa-follow__item:hover { border-color: #C3CAD9; background: #FCFAF8; }

.sa-follow__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border-radius: 9999px;
	background: #EAEEF5;
	color: #11244F;
}

.sa-follow__text { display: flex; flex-direction: column; min-width: 0; }
.sa-follow__name {
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 12px;
	line-height: 16px;
	color: #101F41;
}
.sa-follow__meta {
	font-family: var(--sa-font-body);
	font-size: 11px;
	line-height: 16px;
	color: #5C657A;
	overflow-wrap: anywhere;
}

/* -- narrower ------------------------------------------------------------ */

@media (max-width: 1100px) {
	.sa-chero__inner { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 24px; }
	.sa-ways__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sa-ask__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 640px) {
	.sa-contact-page { --sa-header-h: 106px; }
	.sa-chero { padding: calc(var(--sa-header-h) + 48px) 0 110px; }
	.sa-chero__title { font-size: 36px; line-height: 40px; }
	.sa-chero__lead { font-size: 16px; line-height: 26px; }
	.sa-ways { margin-top: -72px; }
	.sa-ways__grid { grid-template-columns: minmax(0, 1fr); }
	.sa-way { min-height: 0; }
	.sa-ask__title { font-size: 26px; line-height: 32px; }
	.sa-contact__card { padding: 20px; border-radius: 24px; }
	.sa-contact__card .wpforms-field-container { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.sa-office,
	.sa-hours,
	.sa-follow { padding: 20px; border-radius: 24px; }
	.sa-follow__grid { grid-template-columns: minmax(0, 1fr); }
	.sa-contact__card button[type="submit"] { width: 100%; }
}

/* ================================================================= BLOGS ==
   Figma "Blogs". Navy hero carrying the search, the featured article and the
   trending panel; then the filterable grid on cream and the newsletter band. */

.sa-blogs-page { --sa-header-h: 132px; }
.sa-blogs-page .sa-header { background: transparent; }

.sa-bhero {
	position: relative;
	overflow: hidden;
	background: #11244F;
	margin-top: calc(-1 * var(--sa-header-h));
	padding: calc(var(--sa-header-h) + 56px) 0 72px;
}

.sa-bhero__glow {
	position: absolute;
	top: -95px;
	right: -160px;
	width: 480px;
	height: 480px;
	border-radius: 9999px;
	background: rgba(169, 25, 40, .3);
	filter: blur(32px);
	pointer-events: none;
}

.sa-bhero .sa-container { position: relative; z-index: 1; }

.sa-bhero__top {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 48px;
	flex-wrap: wrap;
}

.sa-bhero__title {
	margin: 0;
	font-family: var(--sa-font-display);
	font-weight: 400;
	font-size: 48px;
	line-height: 48px;
	letter-spacing: .48px;
	text-transform: uppercase;
	color: #FCFAF8;
}
.sa-bhero__title .sa-accent { color: #ED2224; display: block; }

.sa-bhero__lead {
	max-width: 622px;
	margin: 16px 0 0;
	font-family: var(--sa-font-body);
	font-size: 18px;
	line-height: 28px;
	color: rgba(252, 250, 248, .7);
}

/* -- search -------------------------------------------------------------- */

.sa-bsearch {
	position: relative;
	display: flex;
	align-items: center;
	flex: none;
	width: 384px;
	max-width: 100%;
	height: 48px;
	border-radius: 9999px;
	background: #fff;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}
.sa-bsearch svg { position: absolute; left: 16px; color: #5C657A; pointer-events: none; }
.sa-bsearch input {
	width: 100%;
	height: 100%;
	padding: 0 20px 0 44px;
	border: 0;
	border-radius: 9999px;
	background: none;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #101F41;
}
.sa-bsearch input::placeholder { color: #5C657A; }
.sa-bsearch input:focus { outline: 2px solid #ED2224; outline-offset: 2px; }
.sa-bsearch input::-webkit-search-cancel-button { cursor: pointer; }

/* -- featured + trending ------------------------------------------------- */

/* stretch, not start: the design has the featured card and the trending panel
   finishing on the same line, so the card takes whatever height the four
   trending items come to. */
.sa-bhero__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 433px);
	align-items: stretch;
	gap: 24px;
	margin-top: 24px;
}

.sa-feature {
	position: relative;
	display: block;
	/* Height comes from the trending panel beside it, which is what makes the
	   two columns end level the way the design does. The artwork is a 2:1
	   banner and this box is taller, so cover crops its sides - the headline is
	   repeated in the overlay, so nothing is lost but part of the picture. */
	height: 100%;
	min-height: 420px;
	border-radius: 32px;
	overflow: hidden;
	text-decoration: none;
	isolation: isolate;
}
.sa-feature__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.4, 0, .2, 1);
}
.sa-feature:hover .sa-feature__img { transform: scale(1.04); }

.sa-feature__chips {
	position: absolute;
	top: 20px;
	left: 20px;
	z-index: 2;
	display: flex;
	gap: 8px;
}

.sa-chip {
	display: inline-flex;
	align-items: center;
	padding: 4px 12px;
	border-radius: 9999px;
	font-family: var(--sa-font-body);
	font-size: 10px;
	line-height: 15px;
	letter-spacing: .5px;
	text-transform: uppercase;
	white-space: nowrap;
}
.sa-chip--red { background: #A91928; font-weight: 700; color: #fff; }
.sa-chip--glass {
	background: rgba(252, 250, 248, .15);
	backdrop-filter: blur(4px);
	font-weight: 600;
	color: #FCFAF8;
}

.sa-feature__body {
	position: absolute;
	inset: auto 0 0 0;
	z-index: 1;
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 32px;
	/* Deeper than the Figma two-stop fade. These banners carry their own
	   headline, so a light fade left two sets of words fighting; this holds the
	   lower half solid enough for the overlaid title to win while the artwork
	   still reads across the top. */
	background: linear-gradient(180deg, rgba(19, 38, 83, 0) 0%, rgba(19, 38, 83, .82) 42%, #132653 100%);
}

.sa-feature__title {
	font-family: var(--sa-font-body);
	font-weight: 400;
	font-size: 30px;
	line-height: 36px;
	color: #FCFAF8;
}

.sa-feature__excerpt {
	max-width: 576px;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: rgba(252, 250, 248, .75);
}

.sa-feature__foot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding-top: 8px;
}

.sa-feature__author { display: flex; align-items: center; gap: 12px; min-width: 0; }
.sa-feature__avatar {
	flex: none;
	width: 36px;
	height: 36px;
	border: 2px solid rgba(252, 250, 248, .3);
	border-radius: 9999px;
}
.sa-feature__author > span { display: flex; flex-direction: column; min-width: 0; }
.sa-feature__name {
	font-family: var(--sa-font-ui);
	font-weight: 600;
	font-size: 12px;
	line-height: 15px;
	color: #FCFAF8;
}
.sa-feature__date {
	font-family: var(--sa-font-body);
	font-size: 12px;
	line-height: 15px;
	color: rgba(252, 250, 248, .6);
}

.sa-feature__go {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 9999px;
	background: #FCFAF8;
	color: #11244F;
	transition: transform .2s ease;
}
.sa-feature:hover .sa-feature__go { transform: translateX(4px); }

/* -- trending ------------------------------------------------------------ */

.sa-trending {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 24px;
	border: 1px solid rgba(252, 250, 248, .1);
	border-radius: 32px;
	background: rgba(252, 250, 248, .04);
	backdrop-filter: blur(4px);
}

.sa-trending__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: .12px;
	text-transform: uppercase;
	color: #FCFAF8;
}
.sa-trending__head svg { color: #FB7185; }

.sa-trending__list { margin: 0; padding: 0; list-style: none; }
.sa-trending__list li + li { border-top: 1px solid rgba(252, 250, 248, .1); }

.sa-trend {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	padding: 16px 0;
	text-decoration: none;
}

.sa-trend__num {
	flex: none;
	font-family: var(--sa-font-display);
	font-weight: 400;
	font-size: 24px;
	line-height: 32px;
	letter-spacing: .24px;
	color: rgba(252, 250, 248, .25);
	transition: color .2s ease;
}
.sa-trend:hover .sa-trend__num { color: rgba(252, 250, 248, .6); }

.sa-trend__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.sa-trend__cat {
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 10px;
	line-height: 15px;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: #FDA4AF;
}

.sa-trend__title {
	font-family: var(--sa-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 19px;
	color: #FCFAF8;
	/* Two lines, so one long headline can't stretch the panel. */
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sa-trend__time {
	display: flex;
	align-items: center;
	gap: 4px;
	padding-top: 1.5px;
	font-family: var(--sa-font-body);
	font-size: 11px;
	line-height: 16px;
	color: rgba(252, 250, 248, .5);
}

/* -- filter bar ---------------------------------------------------------- */

.sa-archive { padding: 56px 0 72px; }

/* One row, as the design has it: pills on the left, count and sort on the
   right. The pills scroll sideways rather than wrapping, so adding a category
   can never push the sort control onto a second line. */
.sa-archive__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 24px;
	padding-bottom: 24px;
	border-bottom: 1px solid #E6E1DB;
	flex-wrap: nowrap;
}

.sa-pills {
	display: flex;
	flex-wrap: nowrap;
	gap: 8px;
	min-width: 0;
	overflow-x: auto;
	scrollbar-width: none;
	/* A little room so a focus ring isn't clipped by the scroll container. */
	padding: 2px;
	margin: -2px;
}
.sa-pills::-webkit-scrollbar { display: none; }
.sa-pill { flex: none; white-space: nowrap; }

.sa-pill {
	padding: 8px 16px;
	border: 1px solid #E6E1DB;
	border-radius: 9999px;
	background: #fff;
	font-family: var(--sa-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: rgba(16, 31, 65, .75);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.sa-pill:hover { border-color: #11244F; color: #11244F; }
.sa-pill.is-active { background: #11244F; border-color: #11244F; color: #FCFAF8; }

.sa-archive__tools { display: flex; align-items: center; gap: 12px; flex: none; }

.sa-archive__count {
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #5C657A;
	white-space: nowrap;
}

.sa-select {
	height: 40px;
	padding: 0 12px;
	border: 1px solid #E2DCD5;
	border-radius: 9999px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #101F41;
	cursor: pointer;
}

/* -- grid ---------------------------------------------------------------- */

.sa-posts {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 24px;
	margin-top: 40px;
	transition: opacity .2s ease;
}
.sa-posts.is-busy { opacity: .45; pointer-events: none; }

.sa-post {
	display: flex;
	flex-direction: column;
	border: 1px solid #E6E1DB;
	border-radius: 18px;
	background: #fff;
	overflow: hidden;
	text-decoration: none;
	transition: transform .2s ease, box-shadow .2s ease;
}
.sa-post:hover { transform: translateY(-4px); box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1); }

.sa-post__media {
	position: relative;
	display: block;
	aspect-ratio: 387 / 182;
	background: #EAEEF5;
	overflow: hidden;
}
.sa-post__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sa-post__media--empty { display: block; width: 100%; height: 100%; }

.sa-post__chip {
	position: absolute;
	top: 12px;
	left: 12px;
	padding: 4px 10px;
	border-radius: 9999px;
	background: rgba(17, 36, 79, .85);
	backdrop-filter: blur(4px);
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 10px;
	line-height: 15px;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: #FCFAF8;
}

.sa-post__body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 20px; }

.sa-post__title {
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 16px;
	line-height: 22px;
	color: #101F41;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sa-post__excerpt {
	margin-top: 8px;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 23px;
	color: #5C657A;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}

.sa-post__meta {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid #E6E1DB;
}
.sa-post__meta { margin-top: 20px; }

.sa-post__meta-item {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--sa-font-ui);
	font-size: 12px;
	line-height: 16px;
	color: #5C657A;
}

.sa-posts__empty {
	margin: 48px 0 0;
	font-family: var(--sa-font-body);
	font-size: 16px;
	line-height: 26px;
	color: #5C657A;
	text-align: center;
}

/* -- load more ----------------------------------------------------------- */

.sa-archive__more {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	margin-top: 48px;
}

.sa-more {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	gap: 12px;
	height: 48px;
	padding: 0 32px;
	border: 0;
	border-radius: 9999px;
	background: #A91928;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
	font-family: var(--sa-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease;
}
.sa-more:hover { background: #8E1521; }
.sa-more[disabled] { opacity: .6; cursor: default; }

.sa-archive__showing {
	font-family: var(--sa-font-body);
	font-size: 12px;
	line-height: 16px;
	color: #5C657A;
}

/* -- newsletter band ----------------------------------------------------- */

.sa-deadline-wrap { padding-top: 0; }

.sa-deadline {
	position: relative;
	overflow: hidden;
	display: grid;
	grid-template-columns: minmax(0, 568px) minmax(0, 568px);
	align-items: center;
	gap: 32px;
	padding: 48px 56px;
	border-radius: 32px;
	background: #A91928;
}

.sa-deadline__blob {
	position: absolute;
	left: calc(50% + 96px);
	bottom: -79px;
	width: 192px;
	height: 192px;
	border-radius: 9999px;
	background: rgba(17, 36, 79, .3);
	filter: blur(20px);
	pointer-events: none;
}

.sa-deadline__copy { position: relative; z-index: 1; min-width: 0; }

.sa-deadline__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: rgba(255, 255, 255, .15);
	color: #fff;
}

.sa-deadline__title {
	margin: 9px 0 0;
	font-family: var(--sa-font-display);
	font-weight: 400;
	font-size: 30px;
	line-height: 36px;
	letter-spacing: .3px;
	text-transform: uppercase;
	color: #fff;
}

.sa-deadline__lead {
	max-width: 416px;
	margin: 8px 0 0;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 23px;
	color: rgba(255, 255, 255, .85);
}

.sa-deadline__form { position: relative; z-index: 1; min-width: 0; }

.sa-deadline__note {
	margin: 12px 0 0;
	padding-left: 20px;
	font-family: var(--sa-font-body);
	font-size: 12px;
	line-height: 16px;
	color: rgba(255, 255, 255, .7);
}

/* WPForms, dressed as the design's pill + button pair. */
.sa-deadline__form .wpforms-field-container { margin: 0; }
.sa-deadline__form .wpforms-form { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-start; }
.sa-deadline__form .wpforms-field-container { flex: 1 1 300px; min-width: 0; }
.sa-deadline__form .wpforms-field { margin: 0; padding: 0; }
.sa-deadline__form .wpforms-field-label { display: none; }

.sa-deadline__form input[type="email"] {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	padding: 0 20px;
	border: 0;
	border-radius: 9999px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #101F41;
}
.sa-deadline__form input[type="email"]::placeholder { color: #5C657A; }
.sa-deadline__form input[type="email"]:focus { outline: 2px solid #11244F; outline-offset: 2px; }

.sa-deadline__form .wpforms-submit-container { flex: none; margin: 0; padding: 0; }

.sa-deadline__form button[type="submit"] {
	height: 48px;
	padding: 0 28px;
	border: 0;
	border-radius: 9999px;
	background: #11244F;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
	font-family: var(--sa-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: #FCFAF8;
	cursor: pointer;
	transition: background-color .15s ease;
}
.sa-deadline__form button[type="submit"]:hover { background: #0B1733; }

.sa-deadline__form .wpforms-error {
	flex: 1 1 100%;
	margin: 0;
	font-family: var(--sa-font-body);
	font-size: 12px;
	line-height: 16px;
	color: #FFE4E6;
}
.sa-deadline__form .wpforms-confirmation-container-full {
	margin: 0;
	padding: 16px 20px;
	border: 1px solid rgba(255, 255, 255, .35);
	border-radius: 16px;
	background: rgba(255, 255, 255, .12);
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 22px;
	color: #fff;
}

/* -- narrower ------------------------------------------------------------ */

@media (max-width: 1100px) {
	.sa-bhero__grid { grid-template-columns: minmax(0, 1fr); }
	.sa-feature { min-height: 420px; }
	.sa-posts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sa-deadline { grid-template-columns: minmax(0, 1fr); padding: 40px; }
	.sa-deadline__blob { left: auto; right: -60px; }
}

@media (max-width: 640px) {
	.sa-blogs-page { --sa-header-h: 106px; }
	.sa-bhero { padding: calc(var(--sa-header-h) + 32px) 0 48px; }
	.sa-bhero__title { font-size: 32px; line-height: 36px; }
	.sa-bhero__lead { font-size: 16px; line-height: 26px; }
	.sa-bsearch { width: 100%; }
	/* Below ~720px a true 2:1 card is too short to hold the overlay text, so
	   here the floor wins and the artwork does get cropped; the headline is
	   repeated in the overlay, so nothing is lost but the picture. */
	.sa-feature { aspect-ratio: auto; min-height: 360px; border-radius: 24px; }
	.sa-feature__body { padding: 20px; }
	.sa-feature__title { font-size: 20px; line-height: 27px; }
	.sa-trending { padding: 20px; border-radius: 24px; }
	.sa-archive { padding: 32px 0 48px; }
	.sa-posts { grid-template-columns: minmax(0, 1fr); margin-top: 24px; }
	.sa-archive__bar { gap: 16px; }
	.sa-archive__tools { width: 100%; justify-content: space-between; }
	.sa-deadline { padding: 28px 24px; border-radius: 24px; }
	.sa-deadline__title { font-size: 24px; line-height: 30px; }
	/* align-items:flex-start is right for the desktop row, but once the form
	   turns into a column that same value is the cross axis and shrinks the
	   email field to its content width. */
	.sa-deadline__form .wpforms-form { flex-direction: column; align-items: stretch; }
	.sa-deadline__form .wpforms-submit-container,
	.sa-deadline__form button[type="submit"] { width: 100%; }
	.sa-deadline__note { padding-left: 0; }
}

/* ========================================================= TOUCH TARGETS ==
   On a phone every one of these is a finger, not a cursor. The text keeps its
   size; only the hit area grows, with the surrounding gap trimmed so the
   sections don't visibly stretch. 44px is the figure Apple and Google both
   publish as the smallest comfortable target. */

@media (max-width: 900px) {

	/* Footer navigation - the densest set of links on the site. */
	.sa-footer__links { gap: 0; }
	.sa-footer__links a {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	.sa-footer__social { gap: 4px; }
	.sa-footer__social a {
		display: grid;
		place-items: center;
		min-width: 44px;
		min-height: 44px;
	}

	/* Section links that sit on their own line. */
	.sa-dest__link,
	.sa-countries__link,
	.sa-cart__back,
	.sa-office__link,
	.sa-help__link,
	.sa-summary__browse {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	/* Breadcrumbs: padding rather than min-height, so the row stays compact
	   but each crumb is still reachable. */
	.sa-pd__crumbs a,
	.sa-pd__crumbs li { min-height: 36px; }
	.sa-pd__crumbs a {
		display: inline-flex;
		align-items: center;
		padding-block: 8px;
	}

	/* The package card's "back" control is a 27px dot in the design. */
	.sa-package__back,
	.sa-package__cart {
		min-width: 44px;
		min-height: 44px;
	}

	/* Blog meta and trending rows are already tall; the article links in the
	   sidebar lists are the small ones. */
	.sa-trend { min-height: 48px; }

	/* Card titles: padding grows the hit area, the matching negative margin
	   takes the space back, so the card layout is untouched. */
	.sa-feed-card__title a,
	.sa-package__name a,
	.sa-post__title a {
		display: inline-block;
		padding-block: 12px;
		margin-block: -12px;
	}

	/* Header WhatsApp icon and the carousel arrows are 32px squares. */
	.sa-header__phone,
	.splide__arrow,
	.sa-arrow {
		min-width: 44px;
		min-height: 44px;
	}

	/* Intake toggle sits at 39px. */
	.sa-toggle button { min-height: 44px; }

	/* AddToAny's share row, which the plugin renders at 32px. */
	.a2a_kit .a2a_button_facebook,
	.a2a_kit .a2a_button_x,
	.a2a_kit .a2a_button_whatsapp,
	.a2a_kit .a2a_button_pinterest {
		display: flex;
		align-items: center;
		min-height: 44px;
	}

	/* Links inline in body copy keep their size on purpose - padding them out
	   would space the sentences they sit in. */
}

/* =========================================================== BLOG DETAIL ==
   Figma "Blog Detail page". Navy hero, the article image straddling its lower
   edge, then the body beside a sticky sidebar. The body is the editor's own
   HTML, so .sa-article styles the elements WordPress produces rather than a
   fixed structure. */

.sa-article-page { --sa-header-h: 132px; }
.sa-article-page .sa-header { background: transparent; }

.sa-ahero {
	position: relative;
	overflow: hidden;
	background: #11244F;
	margin-top: calc(-1 * var(--sa-header-h));
	padding: calc(var(--sa-header-h) + 56px) 0 200px;
}

.sa-ahero__glow {
	position: absolute;
	top: -160px;
	right: -160px;
	width: 480px;
	height: 480px;
	border-radius: 9999px;
	background: rgba(169, 25, 40, .3);
	filter: blur(32px);
	pointer-events: none;
}

.sa-ahero__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	text-align: center;
}

.sa-ahero .sa-chip--red { text-decoration: none; }

.sa-ahero__title {
	max-width: 818px;
	margin: 0;
	font-family: var(--sa-font-body);
	font-weight: 400;
	font-size: 44px;
	line-height: 51px;
	letter-spacing: -1.1px;
	color: #FCFAF8;
}

.sa-ahero__lead {
	max-width: 672px;
	margin: 0;
	font-family: var(--sa-font-body);
	font-size: 18px;
	line-height: 28px;
	color: rgba(252, 250, 248, .7);
}

.sa-ahero__by {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 32px;
	margin-top: 12px;
}

.sa-ahero__author { display: flex; align-items: center; gap: 12px; }

.sa-ahero__avatar {
	flex: none;
	width: 44px;
	height: 44px;
	border: 2px solid rgba(252, 250, 248, .25);
	border-radius: 9999px;
}
.sa-ahero__author > span { display: flex; flex-direction: column; text-align: left; }

.sa-ahero__name {
	font-family: var(--sa-font-display);
	font-weight: 400;
	font-size: 14px;
	line-height: 20px;
	color: #FCFAF8;
}
.sa-ahero__role {
	font-family: var(--sa-font-ui);
	font-size: 12px;
	line-height: 16px;
	color: rgba(252, 250, 248, .6);
}

.sa-ahero__meta { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }

.sa-ameta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sa-font-ui);
	font-size: 12px;
	line-height: 16px;
	color: rgba(252, 250, 248, .65);
}

/* -- hero artwork, pulled up over the navy ------------------------------- */

.sa-ashot { margin-top: -160px; position: relative; z-index: 2; }

.sa-ashot__frame {
	max-width: 960px;
	margin: 0 auto;
	border-radius: 32px;
	overflow: hidden;
	/* The design's 4px cream ring plus a deep drop. */
	box-shadow: 0 0 0 4px #FCFAF8, 0 25px 50px -12px rgba(0, 0, 0, .25);
	background: #EAEEF5;
}
.sa-ashot__frame img { width: 100%; height: auto; display: block; }

/* -- fact strip + share -------------------------------------------------- */

.sa-astrip { padding: 24px 0 0; }

.sa-astrip__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 16px;
	max-width: 960px;
	margin: 0 auto;
	flex-wrap: wrap;
}

.sa-facts {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: 12px;
	flex: 1 1 400px;
	margin: 0;
}

.sa-fact {
	display: flex;
	flex-direction: column;
	gap: 2px;
	padding: 12px 16px;
	border: 1px solid #E6E1DB;
	border-radius: 18px;
	background: #fff;
}
.sa-fact dt {
	margin: 0;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 10px;
	line-height: 15px;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: #5C657A;
}
.sa-fact dd {
	margin: 0;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #101F41;
}

.sa-share { display: flex; align-items: center; gap: 8px; flex: none; }

.sa-share__label {
	padding-right: 4px;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 11px;
	line-height: 16px;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: #5C657A;
}

.sa-share__btn {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	padding: 0;
	border: 1px solid #E6E1DB;
	border-radius: 9999px;
	background: #fff;
	color: #AF1D2B;
	cursor: pointer;
	transition: border-color .15s ease, background-color .15s ease;
}
.sa-share__btn:hover { border-color: #AF1D2B; background: #FAEBEC; }
.sa-share__btn.is-copied { background: #10B981; border-color: #10B981; color: #fff; }
.sa-share--foot .sa-share__btn { color: rgba(16, 31, 65, .7); }

/* -- body + sidebar ------------------------------------------------------ */

.sa-awrap { padding: 64px 0 80px; }

.sa-awrap__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 300px);
	align-items: start;
	gap: 56px;
	max-width: 1088px;
	margin: 0 auto;
}

/* -- the article body ---------------------------------------------------- */
/* Everything here targets plain HTML, because that is what the editor
   produces: headings, paragraphs, lists, tables, quotes and images. */

.sa-article { min-width: 0; }

.sa-article > * + * { margin-top: 24px; }

.sa-article p {
	font-family: var(--sa-font-body);
	font-size: 17px;
	line-height: 32px;
	color: rgba(16, 31, 65, .8);
}

.sa-article h2 {
	margin-top: 48px;
	font-family: var(--sa-font-display);
	font-weight: 400;
	font-size: 24px;
	line-height: 32px;
	letter-spacing: .24px;
	text-transform: uppercase;
	color: #101F41;
	/* Clears the sticky header when the contents list jumps here. */
	scroll-margin-top: 120px;
}

.sa-article h3 {
	margin-top: 32px;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 18px;
	line-height: 28px;
	color: #101F41;
	scroll-margin-top: 120px;
}

.sa-article h4 {
	margin-top: 24px;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 16px;
	line-height: 26px;
	color: #101F41;
}

/* h5 and h6 are left at the browser's defaults otherwise, which is 13px and
   10.7px - Rank Math's FAQ block builds its questions out of h6, so without
   this the questions came out smaller than the answers. */
.sa-article h5,
.sa-article h6 {
	margin-top: 24px;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 18px;
	line-height: 28px;
	color: #101F41;
}

/* -- Rank Math FAQ block ------------------------------------------------- */

.sa-article .rank-math-list { display: flex; flex-direction: column; gap: 24px; }
.sa-article .rank-math-list-item { margin: 0; }

.sa-article .rank-math-question {
	margin: 0 0 8px;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 18px;
	line-height: 28px;
	color: #101F41;
}

.sa-article .rank-math-answer,
.sa-article .rank-math-answer p {
	margin: 0;
	font-family: var(--sa-font-body);
	font-size: 17px;
	line-height: 32px;
	color: rgba(16, 31, 65, .8);
}
.sa-article .rank-math-answer p + p { margin-top: 12px; }

.sa-article a {
	color: #A91928;
	text-decoration: underline;
	text-underline-offset: 2px;
}
.sa-article a:hover { text-decoration-thickness: 2px; }

.sa-article strong, .sa-article b { font-weight: 600; color: #101F41; }

.sa-article ul,
.sa-article ol {
	display: flex;
	flex-direction: column;
	gap: 12px;
	margin-left: 0;
	padding-left: 0;
	list-style: none;
}

.sa-article ul > li,
.sa-article ol > li {
	position: relative;
	padding-left: 18px;
	font-family: var(--sa-font-body);
	font-size: 17px;
	line-height: 28px;
	color: rgba(16, 31, 65, .8);
}

/* The design's small red dot rather than a browser bullet. */
.sa-article ul > li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 11px;
	width: 6px;
	height: 6px;
	border-radius: 9999px;
	background: #A91928;
}

.sa-article ol { counter-reset: sa-ol; }
.sa-article ol > li { padding-left: 28px; counter-increment: sa-ol; }
.sa-article ol > li::before {
	content: counter(sa-ol) '.';
	position: absolute;
	left: 0;
	top: 0;
	font-weight: 600;
	color: #A91928;
}

/* ---------------------------------------- "step by step" numbered timeline */
/* Built by JS from a run of numbered H3s, so it has to beat the generic
   .sa-article ol rules above - hence the repeated class in the selectors.
   Named sa-howto, not sa-step: the Home page's "How it works" cards already
   own .sa-step and bring a white hover card with them. */
.sa-article ol.sa-howto {
	display: flex;
	flex-direction: column;
	gap: 24px;
	margin: 32px 0 32px 16px;
	padding: 0 0 0 32px;
	border-left: 2px dashed #E6E1DB;
	counter-reset: none;
	list-style: none;
}

.sa-article ol.sa-howto > li.sa-howto__item {
	position: relative;
	/* The generic article-list rule pads li by 24px top and bottom; the gap
	   between steps is the list's own, so zero all of it. */
	padding: 0;
	margin: 0;
	counter-increment: none;
	font-size: inherit;
	line-height: inherit;
	color: inherit;
}
/* The circle replaces the counter the generic ol rule would draw. */
.sa-article ol.sa-howto > li.sa-howto__item::before { content: none; }

.sa-howto__num {
	position: absolute;
	left: -49px;
	/* Centred on the 24px title line rather than hung from the box top. */
	top: -4px;
	display: grid;
	place-items: center;
	width: 32px;
	height: 32px;
	border-radius: 9999px;
	background: #11244F;
	font-family: var(--sa-font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: #FCFAF8;
	/* Punches a hole in the dashed line so the circle reads as a node on it. */
	box-shadow: 0 0 0 4px #FCFAF8;
}

.sa-howto__body > :first-child { margin-top: 0; }
.sa-howto__body > :last-child { margin-bottom: 0; }

.sa-article .sa-howto__body h3 {
	margin: 0;
	font-family: var(--sa-font-body);
	font-size: 16px;
	line-height: 24px;
	font-weight: 600;
	color: #101F41;
}

.sa-article .sa-howto__body p {
	margin: 6px 0 0;
	font-size: 15px;
	line-height: 28px;
	color: rgba(16, 31, 65, .72);
}

/* Narrow screens: the circle has to pull in or it hangs off the page. */
@media (max-width: 600px) {
	.sa-article ol.sa-howto {
		margin-left: 14px;
		padding-left: 24px;
		gap: 20px;
	}
	.sa-howto__num {
		left: -38px;
		top: -2px;
		width: 28px;
		height: 28px;
		font-size: 12px;
	}
}

.sa-article blockquote {
	margin: 32px 0;
	padding: 28px;
	border-radius: 18px;
	background: #11244F;
}
.sa-article blockquote p {
	font-size: 18px;
	line-height: 29px;
	color: #FCFAF8;
}
.sa-article blockquote p + p { margin-top: 12px; }
.sa-article blockquote cite {
	display: block;
	margin-top: 4px;
	font-family: var(--sa-font-body);
	font-style: normal;
	font-size: 14px;
	line-height: 20px;
	color: rgba(252, 250, 248, .65);
}

.sa-article img,
.sa-article iframe,
.sa-article video { max-width: 100%; height: auto; border-radius: 18px; }

.sa-article figure { margin: 32px 0; }
.sa-article figcaption {
	margin-top: 12px;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #5C657A;
	text-align: center;
}

/* Tables: the design's navy header on a bordered card. They scroll sideways
   on a phone rather than squeezing the columns to nothing. */
/* The rounded card lives on the scroll wrapper: a collapsed table can't clip
   its own corners, and the wrapper is what actually scrolls. */
.sa-article .sa-table-scroll {
	overflow-x: auto;
	border: 1px solid #E6E1DB;
	border-radius: 18px;
	background: #fff;
	-webkit-overflow-scrolling: touch;
}

.sa-article table {
	width: 100%;
	border-collapse: collapse;
	background: #fff;
	font-family: var(--sa-font-body);
}
.sa-article .sa-table-scroll table { min-width: 640px; }

/* Navy sits on the cells, not on thead, so it survives whatever structure the
   editor produced. */
.sa-article thead,
.sa-article th { background: #11244F; }
.sa-article th {
	padding: 14px 16px;
	font-weight: 600;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: #FCFAF8;
	text-align: left;
	vertical-align: middle;
}
/* Editors bold the header labels, and the generic strong/b rule above paints
   them navy - invisible against the navy header bar. */
.sa-article th a,
.sa-article th strong,
.sa-article th b,
.sa-article th em,
.sa-article th span { color: inherit; }

.sa-article td {
	padding: 14px 16px;
	font-size: 14px;
	line-height: 20px;
	color: rgba(16, 31, 65, .8);
	border-top: 1px solid #E6E1DB;
	vertical-align: middle;
}
.sa-article tbody tr:nth-child(even) { background: rgba(243, 241, 236, .4); }
.sa-article tbody tr:first-child td { border-top: 0; }
.sa-article td:first-child { font-weight: 600; color: #101F41; }
.sa-article td.sa-is-free { font-weight: 600; color: #059669; }

/* A caption under the table reads as a footnote, inside the card. */
.sa-article table caption {
	caption-side: bottom;
	padding: 12px 16px;
	border-top: 1px solid #E6E1DB;
	font-size: 12px;
	line-height: 16px;
	color: #5C657A;
	text-align: left;
}

.sa-article hr { margin: 40px 0; border: 0; border-top: 1px solid #E6E1DB; }

.sa-article code {
	padding: 2px 6px;
	border-radius: 6px;
	background: #F3F1EC;
	font-size: .9em;
}

/* -- tags, share, vote, bio ---------------------------------------------- */

.sa-afoot {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-top: 56px;
	padding: 24px 0;
	border-top: 1px solid #E6E1DB;
	border-bottom: 1px solid #E6E1DB;
	flex-wrap: wrap;
}

.sa-afoot__tags { display: flex; flex-wrap: wrap; gap: 8px; }

.sa-tagpill {
	padding: 4px 12px;
	border-radius: 9999px;
	background: #EAEEF5;
	font-family: var(--sa-font-body);
	font-weight: 500;
	font-size: 12px;
	line-height: 16px;
	color: #122349;
	text-decoration: none;
}
.sa-tagpill:hover { background: #DDE4F0; }

.sa-vote {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-top: 32px;
	padding: 20px 24px;
	border-radius: 18px;
	background: rgba(243, 241, 236, .6);
	flex-wrap: wrap;
}

.sa-vote__q {
	font-family: var(--sa-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: #101F41;
}

.sa-vote__btns { display: flex; gap: 8px; }

.sa-vote__btn {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border: 1px solid #E6E1DB;
	border-radius: 9999px;
	background: #fff;
	font-family: var(--sa-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: rgba(16, 31, 65, .75);
	cursor: pointer;
	transition: border-color .15s ease, color .15s ease;
}
.sa-vote__btn:hover { border-color: #A91928; color: #A91928; }
.sa-vote__btn[disabled] { opacity: .55; cursor: default; }

.sa-vote__thanks {
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #059669;
}

.sa-bio {
	display: flex;
	align-items: flex-start;
	gap: 20px;
	margin-top: 32px;
	padding: 32px;
	border: 1px solid #E6E1DB;
	border-radius: 24px;
	background: #fff;
}

.sa-bio__avatar { flex: none; width: 80px; height: 80px; border-radius: 18px; }
.sa-bio__body { flex: 1 1 auto; min-width: 0; }

.sa-bio__eyebrow {
	margin: 0;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 11px;
	line-height: 16px;
	letter-spacing: 1.1px;
	text-transform: uppercase;
	color: #A91928;
}

.sa-bio__row {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 20px;
	margin-top: 4px;
}

.sa-bio__name {
	margin: 0;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 18px;
	line-height: 28px;
	color: #101F41;
}
.sa-bio__role {
	margin: 0;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #5C657A;
}

.sa-bio__link {
	display: grid;
	place-items: center;
	flex: none;
	width: 36px;
	height: 36px;
	border: 1px solid #E6E1DB;
	border-radius: 9999px;
	color: rgba(16, 31, 65, .7);
}
.sa-bio__link:hover { border-color: #A91928; color: #A91928; }

.sa-bio__text {
	margin: 8px 0 0;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 23px;
	color: #5C657A;
}

/* -- sidebar ------------------------------------------------------------- */

.sa-aside {
	position: sticky;
	top: 24px;
	display: flex;
	flex-direction: column;
	gap: 24px;
	min-width: 0;
}

.sa-toc,
.sa-pop {
	padding: 24px;
	border: 1px solid #E6E1DB;
	border-radius: 24px;
	background: #fff;
}

.sa-toc__head,
.sa-pop__head {
	display: flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 16px;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: .12px;
	text-transform: uppercase;
	color: #101F41;
}
.sa-toc__head svg,
.sa-pop__head svg { color: #A91928; }

.sa-toc__list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-left: 1px solid #E6E1DB;
}
.sa-toc__list a {
	display: block;
	padding: 6px 0 6px 16px;
	border-left: 2px solid transparent;
	margin-left: -1px;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 19px;
	color: #5C657A;
	text-decoration: none;
	transition: color .15s ease, border-color .15s ease;
}
.sa-toc__list a:hover { color: #101F41; }
.sa-toc__list a.is-current {
	border-left-color: #A91928;
	font-weight: 600;
	color: #A91928;
}

/* -- book a session card ------------------------------------------------- */

.sa-expert {
	position: relative;
	overflow: hidden;
	padding: 24px;
	border-radius: 24px;
	background: #11244F;
}
.sa-expert__blob {
	position: absolute;
	right: -64px;
	bottom: -64px;
	width: 176px;
	height: 176px;
	border-radius: 9999px;
	background: #A91928;
}
.sa-expert__icon,
.sa-expert__title,
.sa-expert__text,
.sa-expert__btn { position: relative; z-index: 1; }

.sa-expert__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 14px;
	background: rgba(252, 250, 248, .1);
	color: #FDA4AF;
}

.sa-expert__title {
	margin: 9px 0 0;
	font-family: var(--sa-font-body);
	font-weight: 600;
	font-size: 18px;
	line-height: 22px;
	letter-spacing: .18px;
	text-transform: uppercase;
	color: #FCFAF8;
}

.sa-expert__text {
	margin: 8px 0 0;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 23px;
	color: rgba(252, 250, 248, .7);
}

.sa-expert__btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin-top: 13px;
	padding: 8px 20px;
	border-radius: 9999px;
	background: #A91928;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1);
	font-family: var(--sa-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 20px;
	color: #fff;
	text-decoration: none;
	transition: background-color .15s ease;
}
.sa-expert__btn:hover { background: #8E1521; }

/* -- popular posts ------------------------------------------------------- */

.sa-pop__list { display: flex; flex-direction: column; gap: 16px; margin: 0; padding: 0; list-style: none; }

.sa-pop__item { display: flex; align-items: flex-start; gap: 12px; text-decoration: none; }

.sa-pop__thumb {
	flex: none;
	width: 80px;
	height: 64px;
	border-radius: 14px;
	overflow: hidden;
	background: #EAEEF5;
}
.sa-pop__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

.sa-pop__body { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

.sa-pop__title {
	font-family: var(--sa-font-body);
	font-weight: 500;
	font-size: 14px;
	line-height: 19px;
	color: #101F41;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sa-pop__item:hover .sa-pop__title { color: #A91928; }

.sa-pop__date {
	font-family: var(--sa-font-body);
	font-size: 11px;
	line-height: 16px;
	color: #5C657A;
}

/* -- narrower ------------------------------------------------------------ */

@media (max-width: 1024px) {
	.sa-awrap__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.sa-aside { position: static; }
	.sa-ahero { padding-bottom: 160px; }
	.sa-ashot { margin-top: -130px; }
}

@media (max-width: 640px) {
	.sa-article-page { --sa-header-h: 106px; }
	.sa-ahero { padding: calc(var(--sa-header-h) + 32px) 0 120px; }
	.sa-ahero__title { font-size: 28px; line-height: 36px; letter-spacing: -.5px; }
	.sa-ahero__lead { font-size: 16px; line-height: 26px; }
	.sa-ahero__by { gap: 16px; }
	.sa-ashot { margin-top: -96px; }
	.sa-ashot__frame { border-radius: 20px; }
	.sa-astrip__row { flex-direction: column; align-items: stretch; }
	.sa-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sa-share { justify-content: flex-start; flex-wrap: wrap; }
	.sa-awrap { padding: 40px 0 56px; }
	.sa-article p,
	.sa-article ul > li,
	.sa-article ol > li { font-size: 16px; line-height: 28px; }
	.sa-article h2 { font-size: 20px; line-height: 28px; margin-top: 36px; }
	.sa-article blockquote { padding: 20px; }
	.sa-afoot { flex-direction: column; align-items: flex-start; }
	.sa-vote { flex-direction: column; align-items: flex-start; }
	.sa-bio { flex-direction: column; padding: 24px; }
	.sa-toc,
	.sa-pop,
	.sa-expert { padding: 20px; border-radius: 20px; }
}


/* ==========================================================================
   Success Stories (Figma "Success Stories", 1440 x 9327)
   Shared blocks - countries, packages, FAQ, CTA - keep their own styles above.
   ========================================================================== */

.sa-success-page { background: var(--sa-cream); }

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

.sa-ss-hero {
	position: relative;
	overflow: hidden;
	/* No bottom padding: in Figma the stats bar's lower edge and the top of the
	   "Our students study at" strip meet at the same y, and that strip brings
	   its own 28px of breathing room. */
	padding-block: 72px 0;
	background: var(--sa-cream);
}

/* The design's red arc sweeping behind the headline. Drawn rather than
   exported so it scales with the viewport instead of pixelating. */
/* The two sweeps span the whole hero and run off both edges. */
.sa-ss-hero__swoosh {
	position: absolute;
	z-index: 0;
	inset: 0;
	width: 100%;
	height: 100%;
	overflow: visible;
	pointer-events: none;
}

/* Hero content sits above the arc; the stats bar must not be crossed by it. */
.sa-ss-hero > .sa-container { position: relative; z-index: 1; }

.sa-ss-hero__grid {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
	gap: 48px;
	align-items: center;
	min-height: 460px;
}
.sa-ss-hero__grid.sa-is-solo { grid-template-columns: minmax(0, 1fr); }

.sa-ss-hero__title {
	font-family: var(--sa-font-display);
	font-size: clamp(34px, 5vw, 60px);
	line-height: 1.05;
	color: #002768;
	margin-bottom: 24px;
}
.sa-ss-hero__title .sa-accent { color: var(--sa-red); }

.sa-ss-hero__lead {
	max-width: 30em;
	font-size: clamp(16px, 1.7vw, 24px);
	line-height: 1.3;
	color: #556171;
}

/* The three cards fan out behind one another, as in the design. */
.sa-ss-hero__stack {
	position: relative;
	display: flex;
	justify-content: flex-end;
	align-items: center;
	gap: 12px;
	min-height: 440px;
}

.sa-ss-card {
	position: relative;
	display: block;
	flex: none;
	overflow: hidden;
	border-radius: 24px;
	background: var(--sa-navy);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}
.sa-ss-card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.sa-ss-card--lead { width: 232px; height: 420px; z-index: 2; }
.sa-ss-card--side { width: 150px; height: 380px; opacity: .96; }

/* One gradient shared by every card and video tile on the page. */
.sa-ss-card__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, var(--sa-navy) 8%, rgba(19, 38, 83, .3) 58%, rgba(19, 38, 83, 0) 100%);
	pointer-events: none;
}

.sa-ss-card__play {
	position: absolute;
	top: 20px;
	right: 20px;
	width: 44px;
	height: 44px;
	display: grid;
	place-items: center;
	border-radius: 9999px;
	background: var(--sa-red);
	color: #fff;
	box-shadow: 0 0 0 8px rgba(255, 255, 255, .2);
}
.sa-ss-card__play svg { width: 16px; height: 16px; }
.sa-ss-card--lead .sa-ss-card__play {
	top: 50%;
	right: 50%;
	width: 72px;
	height: 72px;
	transform: translate(50%, -50%);
}
.sa-ss-card--lead .sa-ss-card__play svg { width: 28px; height: 28px; }

.sa-ss-card__body {
	position: absolute;
	inset: auto 0 0 0;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	padding: 24px;
}

.sa-ss-card__chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 4px 12px;
	border-radius: 9999px;
	background: rgba(255, 255, 255, .15);
	backdrop-filter: blur(4px);
	font-family: var(--sa-font-ui);
	font-size: 12px;
	line-height: 16px;
	color: #fff;
}
.sa-ss-card__chip .sa-mflag { width: 16px; height: 12px; border-radius: 3px; }

.sa-ss-card__title {
	font-family: var(--sa-font-display);
	font-size: 14px;
	line-height: 20px;
	font-weight: 700;
	text-transform: uppercase;
	color: #fff;
}
.sa-ss-card--lead .sa-ss-card__title { font-size: 18px; line-height: 24px; }

/* ------------------------------------------------------------- Stats bar */

.sa-ss-stats {
	position: relative;
	display: grid;
	/* Content-sized columns pushed apart, so the first sits on the left padding
	   and the last reaches the right one - Figma has them 397px apart across
	   the 1368 bar, which even 1fr columns do not reproduce. */
	grid-template-columns: repeat(4, auto);
	justify-content: space-between;
	gap: 24px;
	margin-top: 32px;
	padding: 33px;
	border: 1px solid var(--sa-border);
	border-radius: 24px;
	background: rgba(255, 255, 255, .8);
	backdrop-filter: blur(4px);

	/* Figma puts this bar at 1368px - wider than the container it sits in - so
	   it steps outside its parent's gutter and centres on the page instead. */
	left: 50%;
	transform: translateX(-50%);
	width: min(1368px, calc(100vw - 40px));
	max-width: none;
}

.sa-ss-stat__value {
	font-family: var(--sa-font-display);
	font-size: 36px;
	line-height: 40px;
	color: var(--sa-navy);
}
.sa-ss-stat__label {
	margin-top: 2px;
	font-size: 14px;
	line-height: 20px;
	color: var(--sa-text);
}

/* -------------------------------------------------- Our students study at */

.sa-ss-unis { padding-block: 28px 32px; background: #FCFAF8; }

.sa-ss-unis__eyebrow {
	margin-bottom: 18px;
	font-family: var(--sa-font-display);
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 3px;
	text-transform: uppercase;
	text-align: center;
	color: var(--sa-text);
}

/* flex-start, not the shared space-around, which spreads a short row across the
   full width and leaves gaps the size of the pills themselves.
   padding-inline must be 0: it sits inside the track, so at the seam between
   the two tracks it doubles and the loop shows a gap twice the size. The space
   between items comes from one gap, declared on the track and on the row. */
.sa-ss-unis__strip { gap: 16px; }
.sa-ss-unis__strip .sa-marquee__track {
	gap: 16px;
	padding-inline: 0;
	justify-content: flex-start;
	animation-duration: 55s;
}

.sa-ss-uni {
	flex: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 8px 16px;
	border: 1px solid var(--sa-border);
	border-radius: 9999px;
	background: #fff;
	font-size: 14px;
	line-height: 20px;
	font-weight: 500;
	white-space: nowrap;
	color: var(--sa-navy);
}
.sa-ss-uni svg { color: var(--sa-red); }

/* ------------------------------------------------------------ Review wall */

.sa-ss-loved {
	position: relative;
	overflow: hidden;
	padding-block: 72px;
	background: var(--sa-navy);
}

.sa-ss-loved__head {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-bottom: 40px;
}

.sa-ss-loved__title {
	font-family: var(--sa-font-display);
	font-size: clamp(28px, 3.4vw, 48px);
	line-height: 1.1;
	letter-spacing: .9px;
	text-transform: uppercase;
	color: #fff;
}

.sa-ss-rating {
	display: flex;
	align-items: center;
	gap: 16px;
	padding: 16px 24px;
	border: 1px solid var(--sa-border);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
}
.sa-ss-rating__score {
	font-family: var(--sa-font-display);
	font-size: 36px;
	line-height: 40px;
	color: var(--sa-navy);
}
.sa-ss-rating__stars { display: flex; gap: 2px; color: #FBBF24; }
.sa-ss-rating__note {
	margin-top: 4px;
	font-size: 12px;
	line-height: 16px;
	color: var(--sa-text);
}

.sa-ss-wall + .sa-ss-wall { margin-top: 12px; }
/* flex-start, not the shared space-around: a short track would otherwise spread
   its items across the width and leave gaps the size of the images. */
.sa-ss-wall .sa-marquee__track {
	gap: 12px;
	padding-inline: 6px;
	justify-content: flex-start;
	animation-duration: 90s;
}
/* The second row runs the other way, so the two walls never look mirrored. */
.sa-ss-wall--back .sa-marquee__track { animation-direction: reverse; }

.sa-ss-shot {
	flex: none;
	display: block;
	width: 230px;
	overflow: hidden;
	border-radius: 12px;
	background: #fff;
}
.sa-ss-shot img { width: 100%; height: auto; }

/* --------------------------------------------------------- Student videos */

.sa-ss-videos { background: var(--sa-cream); }

.sa-ss-videos__title,
.sa-ss-posters__title,
.sa-ss-why__title,
.sa-ss-team__title {
	font-family: var(--sa-font-display);
	font-size: clamp(26px, 3.2vw, 48px);
	line-height: 1.15;
	letter-spacing: .9px;
	text-transform: uppercase;
	text-align: center;
	color: var(--sa-ink-strong);
}

/* A continuous marquee, like the countries strip: two identical tracks, no side
   padding so the seam gap matches the item gap, and it pauses on hover. */
.sa-ss-videos__strip { gap: 16px; margin-top: 40px; }
.sa-ss-videos__strip .sa-marquee__track {
	gap: 16px;
	padding-inline: 0;
	justify-content: flex-start;
	animation-duration: 70s;
}

.sa-ss-video {
	position: relative;
	flex: none;
	width: 300px;
	height: 400px;
	overflow: hidden;
	border-radius: 24px;
	background: var(--sa-navy);
}
.sa-ss-video img { width: 100%; height: 100%; object-fit: cover; }

/* ----------------------------------------------------- Scholarship posters */

.sa-ss-posters { overflow: hidden; background: #fff; }
.sa-ss-posters__title { margin-bottom: 40px; }
.sa-ss-wall--poster .sa-marquee__track { animation-duration: 110s; }
/* A fixed frame, because what the team uploads varies from square avatars to
   wide banners and a ragged row reads as broken. */
.sa-ss-wall--poster .sa-ss-shot {
	width: 300px;
	height: 200px;
	border: 1px solid var(--sa-border-light);
	border-radius: 16px;
}
.sa-ss-wall--poster .sa-ss-shot img { height: 100%; object-fit: cover; }

/* ----------------------------------------------------------- Why choose us */

.sa-ss-why { background: var(--sa-cream); }
.sa-ss-why__sub {
	max-width: 48em;
	margin: 16px auto 0;
	font-size: 18px;
	line-height: 28px;
	text-align: center;
	color: var(--sa-text);
}

/* Figma lays this out as a 2 x 3 bento: the photo panel spans two rows on the
   left, four tiles fill the right. */
.sa-ss-bento {
	display: grid;
	grid-template-columns: minmax(0, 692fr) minmax(0, 346fr) minmax(0, 346fr);
	grid-template-rows: auto auto auto;
	gap: 16px;
	margin-top: 48px;
}

.sa-ss-bento__hero {
	position: relative;
	grid-column: 1;
	grid-row: 1 / 3;
	min-height: 440px;
	overflow: hidden;
	border-radius: 24px;
	background: var(--sa-navy);
}
.sa-ss-bento__hero img { width: 100%; height: 100%; object-fit: cover; }
.sa-ss-bento__hero-body {
	position: absolute;
	inset: auto 0 0 0;
	padding: 32px;
	color: #fff;
}
.sa-ss-bento__figure {
	font-family: var(--sa-font-display);
	font-size: 60px;
	line-height: 60px;
}
.sa-ss-bento__hero-body p {
	margin-top: 8px;
	font-size: 18px;
	line-height: 28px;
	color: rgba(255, 255, 255, .85);
}

.sa-ss-tile {
	padding: 28px;
	border: 1px solid var(--sa-border);
	border-radius: 24px;
	background: #fff;
}
.sa-ss-tile--1 { grid-column: 2 / 4; grid-row: 1; }
.sa-ss-tile--2 { grid-column: 2; grid-row: 2; }
.sa-ss-tile--3 { grid-column: 3; grid-row: 2; }
.sa-ss-tile--4 { grid-column: 1; grid-row: 3; }
.sa-ss-tile--5 { grid-column: 2 / 4; grid-row: 3; }

.sa-ss-tile__icon {
	display: grid;
	place-items: center;
	width: 48px;
	height: 48px;
	border-radius: 18px;
	background: var(--sa-navy);
	color: #fff;
}
.sa-ss-tile__title {
	margin-top: 16px;
	font-family: var(--sa-font-display);
	font-size: 14px;
	line-height: 20px;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--sa-navy);
}
.sa-ss-tile__desc {
	margin-top: 6px;
	font-size: 13px;
	line-height: 21px;
	color: var(--sa-text);
}

.sa-ss-tile--red {
	background: var(--sa-red);
	border-color: var(--sa-red);
}
.sa-ss-tile--red .sa-ss-tile__icon { background: rgba(255, 255, 255, .15); }
.sa-ss-tile--red .sa-ss-tile__title { color: #fff; }
.sa-ss-tile--red .sa-ss-tile__desc { color: rgba(255, 255, 255, .8); }

/* ---------------------------------------------------------------- Advisors */

.sa-ss-team { background: #F3F4F7; }
.sa-ss-team__sub {
	max-width: 48em;
	margin: 16px auto 0;
	font-size: 18px;
	line-height: 28px;
	text-align: center;
	color: var(--sa-text);
}

.sa-ss-team__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 24px;
	margin-top: 56px;
}

.sa-ss-person {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 24px 24px 18px;
	border: 1px solid var(--sa-border);
	border-radius: 24px;
	background: #fff;
	text-align: center;
}
/* The pale wash behind the portrait, from the design. */
.sa-ss-person::before {
	content: '';
	position: absolute;
	inset: 1px 1px auto 1px;
	height: 96px;
	border-radius: 23px 23px 0 0;
	background: linear-gradient(180deg, var(--sa-blue-light) 0%, rgba(233, 237, 247, 0) 100%);
}

.sa-ss-person__photo {
	position: relative;
	width: 96px;
	height: 96px;
	border-radius: 9999px;
	overflow: hidden;
	box-shadow: 0 0 0 4px #fff, 0 0 0 6px transparent;
	outline: 2px dashed rgba(175, 29, 43, .5);
	outline-offset: 6px;
}
.sa-ss-person__photo img { width: 100%; height: 100%; object-fit: cover; }

.sa-ss-person__name {
	position: relative;
	margin-top: 16px;
	font-family: var(--sa-font-display);
	font-size: 16px;
	line-height: 24px;
	color: var(--sa-navy);
}
.sa-ss-person__role {
	margin-top: 4px;
	font-size: 14px;
	line-height: 20px;
	color: var(--sa-red);
}
.sa-ss-person__flags { display: flex; gap: 6px; margin-top: 12px; }
.sa-ss-person__flags .sa-mflag {
	width: 24px;
	height: 16px;
	border-radius: 4px;
	box-shadow: 0 0 0 1px rgba(0, 0, 0, .1);
}
.sa-ss-person__bio {
	margin-top: 12px;
	font-family: var(--sa-font-ui);
	font-size: 14px;
	line-height: 21px;
	letter-spacing: -.03em;
	color: var(--sa-text);
}
.sa-ss-person__foot {
	width: 100%;
	margin-top: auto;
	padding-top: 16px;
	border-top: 1px solid var(--sa-border);
}
.sa-ss-person__count {
	font-family: var(--sa-font-display);
	font-size: 24px;
	line-height: 28px;
	color: var(--sa-navy);
}
.sa-ss-person__count-label { font-size: 14px; line-height: 16px; color: var(--sa-text); }

/* The navy treatment used to be pinned to the third card; it is a hover and
   focus state now, so those rules live with the rest of the hover block. */

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

@media (max-width: 1100px) {
	.sa-ss-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sa-ss-bento__hero { grid-column: 1 / 3; grid-row: 1; min-height: 320px; }
	.sa-ss-tile--1, .sa-ss-tile--2, .sa-ss-tile--3,
	.sa-ss-tile--4, .sa-ss-tile--5 { grid-column: auto; grid-row: auto; }
}

@media (max-width: 900px) {
	.sa-ss-hero { padding-block: 48px 36px; }
	.sa-ss-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 32px; min-height: 0; }
	.sa-ss-hero__stack { justify-content: flex-start; min-height: 0; }
	.sa-ss-hero__swoosh { display: none; }
	.sa-ss-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 24px; }
	.sa-ss-loved__head { flex-direction: column; align-items: flex-start; }
}

@media (max-width: 640px) {
	.sa-ss-hero__stack { gap: 8px; overflow-x: auto; padding-bottom: 8px; }
	.sa-ss-card--lead { width: 200px; height: 320px; }
	.sa-ss-card--side { width: 132px; height: 300px; }
	.sa-ss-card--lead .sa-ss-card__play { width: 56px; height: 56px; }
	/* Two per row on a phone: four stacked made the bar needlessly tall. */
	.sa-ss-stats {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		justify-content: stretch;
		gap: 20px 16px;
		padding: 24px 20px;
	}
	.sa-ss-stat__value { font-size: 28px; line-height: 32px; }
	.sa-ss-stat__label { font-size: 13px; line-height: 18px; }
	.sa-ss-shot { width: 180px; }
	.sa-ss-wall--poster .sa-ss-shot { width: 220px; }
	.sa-ss-video { width: 240px; height: 330px; }
	.sa-ss-bento { grid-template-columns: minmax(0, 1fr); }
	.sa-ss-bento__hero { grid-column: 1; }
}


/* ======================================================= Hero reel gallery */
/* One card expanded, the rest slim; the row is clipped by the viewport edge so
   the last card is only part-visible, and it slides so the open card always
   sits flush left. Widths and position animate together. */

.sa-ss-reel {
	--sa-reel-slim: 112px;
	--sa-reel-wide: 320px;
	--sa-reel-gap: 12px;
	--sa-reel-h: 440px;

	position: relative;
	/* Bleeds past the container to the viewport edge - the crop is the design. */
	margin-right: calc(50% - 50vw);
	overflow: hidden;
}

.sa-ss-reel__track {
	display: flex;
	gap: var(--sa-reel-gap);
	margin: 0;
	padding: 0;
	list-style: none;
	transform: translateX(calc(-1 * var(--sa-reel-shift, 0px)));
	transition: transform .55s cubic-bezier(.65, 0, .35, 1);
}

.sa-ss-reel__item {
	flex: none;
	width: var(--sa-reel-slim);
	height: var(--sa-reel-h);
	transition: width .55s cubic-bezier(.65, 0, .35, 1);
}
.sa-ss-reel__item.is-active { width: var(--sa-reel-wide); }

.sa-ss-reel__card {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 24px;
	overflow: hidden;
	background: var(--sa-navy);
	cursor: pointer;
	text-align: left;
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}
.sa-ss-reel__card img { width: 100%; height: 100%; object-fit: cover; }
.sa-ss-reel__card:focus-visible { outline: 3px solid var(--sa-red); outline-offset: 3px; }

/* The eyebrow and the full-size title belong to the open card only. */
.sa-ss-reel__eyebrow {
	position: absolute;
	top: 16px;
	left: 16px;
	padding: 4px 10px;
	border-radius: 9999px;
	background: rgba(255, 255, 255, .15);
	backdrop-filter: blur(4px);
	font-family: var(--sa-font-ui);
	font-size: 11px;
	line-height: 14px;
	letter-spacing: .06em;
	text-transform: uppercase;
	color: #fff;
	opacity: 0;
	transition: opacity .3s ease;
}
.sa-ss-reel__item.is-active .sa-ss-reel__eyebrow { opacity: 1; }

.sa-ss-reel__chip {
	position: absolute;
	top: 16px;
	right: 16px;
	opacity: 0;
	transition: opacity .3s ease;
}
.sa-ss-reel__item.is-active .sa-ss-reel__chip { opacity: 1; }

/* Slim cards carry a small play badge in the corner; the open one centres it. */
.sa-ss-reel__card .sa-ss-card__play {
	top: 16px;
	right: 16px;
	width: 36px;
	height: 36px;
	box-shadow: 0 0 0 6px rgba(255, 255, 255, .18);
	transition: width .35s ease, height .35s ease, top .45s ease, right .45s ease, transform .45s ease;
}
.sa-ss-reel__item.is-active .sa-ss-card__play {
	top: 50%;
	right: 50%;
	width: 72px;
	height: 72px;
	transform: translate(50%, -50%);
	box-shadow: 0 0 0 8px rgba(255, 255, 255, .2);
}
.sa-ss-reel__item.is-active .sa-ss-card__play svg { width: 26px; height: 26px; }
/* With a country chip present the slim badge would collide with it. */
.sa-ss-reel__item:not(.is-active) .sa-ss-reel__chip { display: none; }

.sa-ss-reel__card .sa-ss-card__body { padding: 20px 16px; }
.sa-ss-reel__card .sa-ss-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;
	overflow: hidden;
	font-size: 13px;
	line-height: 18px;
	transition: font-size .35s ease, line-height .35s ease;
}
.sa-ss-reel__item.is-active .sa-ss-card__title { font-size: 22px; line-height: 28px; }

/* The plain link only matters when the script has not run. */
.sa-ss-reel__fallback { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.no-js .sa-ss-reel__fallback { position: static; width: auto; height: auto; clip-path: none; }

/* The inline player that replaces the artwork once a card is played. */
.sa-ss-reel__frame { position: absolute; inset: 0; z-index: 3; border: 0; width: 100%; height: 100%; }

@media (prefers-reduced-motion: reduce) {
	.sa-ss-reel__track,
	.sa-ss-reel__item,
	.sa-ss-reel__card .sa-ss-card__play,
	.sa-ss-reel__card .sa-ss-card__title { transition: none; }
}

/* ============================================ Shared-block spacing fixes */

/* The CTA belongs on its own centred line under the intro, not inline with the
   category tabs. */
.sa-packages__cta {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin: 24px auto 8px;
}
.sa-packages__title ~ .sa-packages__cta { margin-inline: auto; }
.sa-packages .sa-packages__cta { display: flex; width: max-content; }

/* The design's first card is drawn open only to illustrate the hover state, so
   it is left closed here like every other card. */

/* The editor-only note where the review wall has no screenshots yet. */
.sa-ss-loved__todo {
	margin-bottom: 24px;
	padding: 12px 16px;
	border: 1px dashed rgba(255, 255, 255, .35);
	border-radius: 12px;
	font-size: 14px;
	color: rgba(255, 255, 255, .8);
}

/* Review and poster walls: no side padding on the track, or the seam between
   the two copies shows a gap twice the item gap and the loop reads as a reset. */
.sa-ss-wall { gap: 12px; }
.sa-ss-wall .sa-marquee__track { padding-inline: 0; }


/* ================================================ Advisor cards: hover state */
/* The lift is a transform, never margin or height, so a raised card cannot
   push its neighbours around. The Book button and the LinkedIn icon are in the
   markup at all times and only fade in, so the card height never jumps. */

.sa-ss-person {
	z-index: 0;
	transition: transform .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.sa-ss-person:hover,
.sa-ss-person:focus-visible,
.sa-ss-person:focus-within {
	z-index: 1;
	transform: translateY(-10px) scale(1.03);
	background: var(--sa-navy);
	border-color: var(--sa-navy);
	box-shadow: 0 24px 48px rgba(19, 38, 83, .28);
	outline: none;
}
.sa-ss-person:hover::before,
.sa-ss-person:focus-visible::before,
.sa-ss-person:focus-within::before { opacity: 0; }

.sa-ss-person::before { transition: opacity .3s ease; }

.sa-ss-person__name,
.sa-ss-person__bio,
.sa-ss-person__count,
.sa-ss-person__count-label { transition: color .3s ease; }

.sa-ss-person:hover .sa-ss-person__name,
.sa-ss-person:focus-within .sa-ss-person__name,
.sa-ss-person:hover .sa-ss-person__count,
.sa-ss-person:focus-within .sa-ss-person__count { color: #fff; }

.sa-ss-person:hover .sa-ss-person__bio,
.sa-ss-person:focus-within .sa-ss-person__bio,
.sa-ss-person:hover .sa-ss-person__count-label,
.sa-ss-person:focus-within .sa-ss-person__count-label { color: rgba(255, 255, 255, .85); }

/* The role stays red on both grounds, but the darker navy needs the brighter
   red to stay legible. */
.sa-ss-person:hover .sa-ss-person__role,
.sa-ss-person:focus-within .sa-ss-person__role { color: var(--sa-red-bright); }

.sa-ss-person__foot { transition: border-color .3s ease; }
.sa-ss-person:hover .sa-ss-person__foot,
.sa-ss-person:focus-within .sa-ss-person__foot { border-top-color: rgba(218, 222, 231, .2); }

/* The white ring round the portrait has to follow the card colour. */
.sa-ss-person__photo { transition: box-shadow .3s ease; }
.sa-ss-person:hover .sa-ss-person__photo,
.sa-ss-person:focus-within .sa-ss-person__photo { box-shadow: 0 0 0 4px var(--sa-navy); }

.sa-ss-person__monogram {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	background: var(--sa-blue-light);
	font-family: var(--sa-font-display);
	font-size: 28px;
	color: var(--sa-navy);
}

/* ---- the actions ---- */

.sa-ss-person__actions {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	width: 100%;
	/* Just enough to clear the stat: the strip is reserved in the default state
	   so the card cannot change height, and any more reads as dead space. */
	margin-top: 8px;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity .3s ease, transform .3s ease;
	/* Hidden from pointer and keyboard until the card is open, so a Tab pass
	   does not stop on a control nobody can see. */
	visibility: hidden;
}
.sa-ss-person:hover .sa-ss-person__actions,
.sa-ss-person:focus-visible .sa-ss-person__actions,
.sa-ss-person:focus-within .sa-ss-person__actions {
	opacity: 1;
	visibility: visible;
	transform: none;
}

.sa-ss-person__book {
	display: inline-flex;
	align-items: center;
	padding: 8px 20px;
	border-radius: 9999px;
	background: var(--sa-red);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	text-transform: capitalize;
	color: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
}
.sa-ss-person__book:hover { background: #8E1522; }

.sa-ss-person__in { display: inline-flex; color: rgba(255, 255, 255, .8); }
.sa-ss-person__in:hover { color: #fff; }

/* The footer is the card's own block, so the actions sit under the stat. */
.sa-ss-person__foot { display: flex; flex-direction: column; align-items: center; }

@media (prefers-reduced-motion: reduce) {
	.sa-ss-person,
	.sa-ss-person__actions { transition: none; }
	.sa-ss-person:hover,
	.sa-ss-person:focus-within { transform: none; }
}

/* No hover on touch: show the actions and keep the cards flat. */
@media (hover: none) {
	.sa-ss-person__actions { opacity: 1; visibility: visible; transform: none; }
	.sa-ss-person:hover { transform: none; }
}


/* ================================ Product tabs: needs & payment instructions */
/* Both panels are editor HTML, so the design is drawn from the ordinary tags a
   writer produces - a list, a table, a paragraph - rather than from markup the
   editor would have to remember to add. */

.sa-about__panel > :first-child { margin-top: 0; }
.sa-about__panel > :last-child { margin-bottom: 0; }

.sa-about__panel p {
	margin: 0 0 16px;
	font-size: 15px;
	line-height: 26px;
	color: var(--sa-text);
}
.sa-about__panel a { color: var(--sa-red); text-decoration: underline; text-underline-offset: 2px; }

.sa-about__panel h3 {
	margin: 32px 0 8px;
	font-family: var(--sa-font-display);
	font-size: 16px;
	line-height: 24px;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--sa-navy);
}
.sa-about__panel > h3:first-child { margin-top: 0; }

/* ---- "What we need from you": the numbered discs ---- */

.sa-about__panel ol {
	display: flex;
	flex-direction: column;
	gap: 14px;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: sa-need;
}

.sa-about__panel ol > li {
	position: relative;
	counter-increment: sa-need;
	padding-left: 44px;
	min-height: 28px;
	display: flex;
	align-items: center;
	font-size: 15px;
	line-height: 24px;
	color: var(--sa-text);
}

.sa-about__panel ol > li::before {
	content: counter(sa-need);
	position: absolute;
	left: 0;
	top: 0;
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 9999px;
	background: var(--sa-navy);
	font-family: var(--sa-font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 1;
	color: #fff;
}

/* ---- tables an editor writes, e.g. the description's package breakdown ---- */
/* These hold prose, so they wrap and scroll; only the payment tab's two-column
   bank list gets the fixed right-aligned treatment below. */

.sa-about__panel table {
	width: 100%;
	margin: 0 0 16px;
	border-collapse: collapse;
	table-layout: fixed;
}

.sa-about__panel th,
.sa-about__panel td {
	padding: 12px 14px;
	font-size: 14px;
	line-height: 22px;
	color: var(--sa-text);
	vertical-align: top;
	text-align: left;
	overflow-wrap: anywhere;
	border-bottom: 1px solid var(--sa-border);
}
.sa-about__panel th {
	font-weight: 600;
	color: var(--sa-navy);
	background: rgba(243, 244, 247, .7);
}
.sa-about__panel tbody tr:last-child td { border-bottom: 0; }

/* ---- "Payment instructions": the bank rows ---- */

.sa-about__panel--payment table { table-layout: auto; margin-bottom: 8px; }

.sa-about__panel--payment td {
	padding: 12px 0;
	line-height: 20px;
	vertical-align: middle;
}
/* The value sits right, beside its copy button. */
.sa-about__panel--payment td:last-child {
	text-align: right;
	font-weight: 600;
	color: var(--sa-navy);
	white-space: nowrap;
}

.sa-copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	margin-left: 10px;
	padding: 0;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: var(--sa-text);
	cursor: pointer;
	vertical-align: middle;
	transition: background-color .2s ease, color .2s ease;
}
.sa-copy:hover { background: rgba(19, 38, 83, .07); color: var(--sa-navy); }
.sa-copy:focus-visible { outline: 2px solid var(--sa-red); outline-offset: 2px; }
.sa-copy.is-done { color: #059669; }
.sa-copy svg { width: 15px; height: 15px; }

/* ---- the exchange-rate note ---- */

.sa-about__panel .sa-note {
	margin-top: 16px;
	padding: 12px 16px;
	border: 1px solid rgba(175, 29, 43, .25);
	border-radius: 12px;
	background: rgba(175, 29, 43, .06);
	font-size: 14px;
	line-height: 22px;
	color: var(--sa-navy);
}
.sa-about__panel .sa-note strong { color: var(--sa-red); }

@media (max-width: 600px) {
	/* Long IBANs cannot share a line with their label on a phone. */
	.sa-about__panel tbody tr { display: flex; flex-direction: column; gap: 2px; padding: 10px 0; }
	.sa-about__panel td { padding: 0; }
	.sa-about__panel td:last-child { text-align: left; white-space: normal; word-break: break-all; }
	.sa-copy { margin-left: 6px; }
}


/* ==================== Corrections taken from the Figma CSS dump (node 1:2665)
   Values here replace earlier ones that were read off screenshots. */

/* The pill sits 27px below the top of the page, not 16. */
.sa-success-page .sa-header { padding-block: 27px 16px; }

/* Hero reel: the design's cards are 343x628 open and 157x621 slim - far taller
   and wider than the sizes I had estimated from the screenshot. */
.sa-ss-reel {
	--sa-reel-slim: 157px;
	--sa-reel-wide: 343px;
	--sa-reel-gap: 12px;
	--sa-reel-h: 628px;
}
.sa-ss-reel__item.is-active .sa-ss-card__title { font-size: 30px; line-height: 36px; }
.sa-ss-reel__item.is-active .sa-ss-card__play { width: 80px; height: 80px; }
.sa-ss-reel__card .sa-ss-card__play { width: 44px; height: 44px; }
/* Slim cards set their headline in Orbitron, per the dump. */
.sa-ss-reel__item:not(.is-active) .sa-ss-card__title {
	font-family: var(--sa-font-num);
	font-weight: 700;
	font-size: 14px;
	line-height: 20px;
}

/* "Our students study at": pills are 42px tall with 10px/20px padding. I had
   shrunk these to 38px from a screenshot; the dump says otherwise. */
.sa-ss-uni {
	height: 42px;
	padding: 10px 20px;
	gap: 10px;
}

/* The review screenshots are a fixed 230.61 x 409.6 frame. */
.sa-ss-wall .sa-ss-shot { width: 231px; height: 410px; }
.sa-ss-wall .sa-ss-shot img { height: 100%; object-fit: cover; }

/* Two headings on this page are NOT the uppercase navy treatment the rest of
   the site uses: the dump gives Avec 48/56, -0.01em, #171717, sentence case. */
.sa-ss-videos__title,
.sa-countries__title {
	font-size: clamp(30px, 3.4vw, 48px);
	line-height: 1.17;
	letter-spacing: -.01em;
	text-transform: none;
	color: var(--sa-ink-strong);
}

/* "View All Services" is a 294x56 rounded rectangle in #AF0012, not a pill.
   Two classes, because the earlier rule sets width: max-content and would
   otherwise win on specificity. */
.sa-packages .sa-packages__cta {
	width: 294px;
	max-width: 100%;
	height: 56px;
	padding: 10px 14px 10px 16px;
	border-radius: 12px;
	background: #AF0012;
	font-family: var(--sa-font-body);
	font-size: 18px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: -.006em;
	color: #fff;
}
.sa-packages__cta:hover { background: #8E000F; }

@media (max-width: 900px) {
	.sa-ss-reel { --sa-reel-h: 460px; --sa-reel-wide: 280px; --sa-reel-slim: 120px; }
	.sa-ss-wall .sa-ss-shot { width: 170px; height: 302px; }
}

/* ------------------------- self-hosted clips in the reel and the video strip */
.sa-ss-reel__video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	background: var(--sa-navy);
}
/* Once it is playing the overlay furniture would sit on top of the controls. */
.sa-ss-reel__card.is-playing .sa-ss-card__veil,
.sa-ss-reel__card.is-playing .sa-ss-card__play,
.sa-ss-reel__card.is-playing .sa-ss-card__body,
.sa-ss-reel__card.is-playing .sa-ss-reel__eyebrow,
.sa-ss-reel__card.is-playing .sa-ss-reel__chip,
.sa-ss-video.is-playing .sa-ss-card__veil,
.sa-ss-video.is-playing .sa-ss-card__play,
.sa-ss-video.is-playing .sa-ss-card__body { opacity: 0; pointer-events: none; }
.sa-ss-video.is-playing video { object-fit: contain; background: #000; }
/* A playing clip must not be dragged away by the marquee. */
.sa-marquee:has(.sa-ss-video.is-playing) .sa-marquee__track { animation-play-state: paused; }
/* ------------------------------- marquee seam + stat suffix (design review) */

/* min-width:100% stretches a track whose items do not fill the width, and the
   leftover space shows as a blank stretch every time the loop comes round.
   These three rows hug their content instead, and their item lists are padded
   out so one track is always wider than the viewport. */
.sa-ss-unis__strip .sa-marquee__track,
.sa-ss-videos__strip .sa-marquee__track,
.sa-ss-wall .sa-marquee__track { min-width: 0; }

/* The + and the % are red; the number stays navy. */
.sa-ss-stat__sym { color: var(--sa-red); }
/* ============================================= Bento tiles: hover and focus */
/* Same rules as the advisor cards: navy on hover, lift with transform only so
   no neighbour moves, and the identical state on keyboard focus. */

.sa-ss-tile,
.sa-ss-bento__hero {
	transition: transform .3s ease, background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
	outline: none;
}

.sa-ss-tile:hover,
.sa-ss-tile:focus-visible,
.sa-ss-bento__hero:hover,
.sa-ss-bento__hero:focus-visible {
	transform: translateY(-8px) scale(1.015);
	box-shadow: 0 24px 48px rgba(19, 38, 83, .22);
	z-index: 1;
}

/* The plain white tiles turn navy; their text has to come with them. */
.sa-ss-tile:not(.sa-ss-tile--red):hover,
.sa-ss-tile:not(.sa-ss-tile--red):focus-visible {
	background: var(--sa-navy);
	border-color: var(--sa-navy);
}
.sa-ss-tile__title,
.sa-ss-tile__desc { transition: color .3s ease; }

.sa-ss-tile:not(.sa-ss-tile--red):hover .sa-ss-tile__title,
.sa-ss-tile:not(.sa-ss-tile--red):focus-visible .sa-ss-tile__title { color: #fff; }
.sa-ss-tile:not(.sa-ss-tile--red):hover .sa-ss-tile__desc,
.sa-ss-tile:not(.sa-ss-tile--red):focus-visible .sa-ss-tile__desc { color: rgba(255, 255, 255, .8); }

/* A navy icon chip on a navy card would vanish, so it takes the red tile's
   translucent treatment while hovered. */
.sa-ss-tile__icon { transition: background-color .3s ease; }
.sa-ss-tile:not(.sa-ss-tile--red):hover .sa-ss-tile__icon,
.sa-ss-tile:not(.sa-ss-tile--red):focus-visible .sa-ss-tile__icon { background: rgba(255, 255, 255, .15); }

/* The red tile and the photo panel are already dark, so they only lift. */

@media (prefers-reduced-motion: reduce) {
	.sa-ss-tile, .sa-ss-bento__hero { transition: background-color .3s ease, color .3s ease; }
	.sa-ss-tile:hover, .sa-ss-tile:focus-visible,
	.sa-ss-bento__hero:hover, .sa-ss-bento__hero:focus-visible { transform: none; }
}

/* No hover on touch: leave the tiles flat rather than sticking on tap. */
@media (hover: none) {
	.sa-ss-tile:hover, .sa-ss-bento__hero:hover { transform: none; box-shadow: none; }
	.sa-ss-tile:not(.sa-ss-tile--red):hover { background: #fff; border-color: var(--sa-border); }
	.sa-ss-tile:not(.sa-ss-tile--red):hover .sa-ss-tile__title { color: var(--sa-navy); }
	.sa-ss-tile:not(.sa-ss-tile--red):hover .sa-ss-tile__desc { color: var(--sa-text); }
	.sa-ss-tile:not(.sa-ss-tile--red):hover .sa-ss-tile__icon { background: var(--sa-navy); }
}
/* The count in the review-wall heading is red. The brighter red is the one the
   design uses on navy - the darker brand red loses too much contrast there. */
.sa-ss-loved__count { color: var(--sa-red-bright); }

/* ==========================================================================
   Careers (Figma: Careers, 1440 x 4669)
   ========================================================================== */

/* The hero, the timeline and the event reel all sit on a 1368px content width
   - 36px in from each edge of the 1440 canvas - which is wider than the 1328
   the header pill uses. That is what the design asks for, so those blocks get
   their own wrapper rather than bending --sa-container for one page. */
.sa-cr-wrap {
	width: 100%;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 36px;
}
@media (max-width: 1024px) {
	.sa-cr-wrap { padding-inline: var(--sa-gutter); }
}

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

.sa-cr-hero {
	position: relative;
	/* Clips the sweeps' horizontal bleed - they are drawn well past both edges
	   so the curve keeps its shape at any width - without clipping the band
	   itself, which sits inside the hero. */
	overflow: hidden;
	padding-block: 30px 72px;
	background: var(--sa-cream);
}

/* Two sweeps, red over navy. preserveAspectRatio="none" stretches the band to
   the page width while vector-effect holds the strokes at the 14/12px the
   design specifies, and overflow:visible lets the lower curve hang past the
   viewBox at the left edge. The band is pinned to the bottom of the hero, so
   its height alone fixes where the lines cross.

   z-index 0 keeps them behind the photo strip, as in the design: the lines
   disappear under the cards and come out the other side rather than being
   drawn across the photographs. */
.sa-cr-hero__swoosh {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 0;
	width: 100%;
	height: 180px;
	overflow: visible;
	pointer-events: none;
}

.sa-cr-hero__grid {
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: minmax(0, 594fr) minmax(0, 726fr);
	gap: 48px;
	align-items: center;
	min-height: 510px;
}
.sa-cr-hero__grid.sa-is-solo { grid-template-columns: minmax(0, 1fr); }

.sa-cr-hero__copy {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 24px;
}

.sa-cr-hero__title {
	font-size: 60px;
	line-height: 60px;
	letter-spacing: 1.5px;
	color: var(--sa-navy);
	overflow-wrap: break-word;
}
.sa-cr-hero__title .sa-accent { color: var(--sa-red); }

.sa-cr-hero__lead {
	max-width: 512px;
	font-size: 18px;
	line-height: 28px;
	color: var(--sa-text);
}

.sa-cr-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 23px;
}

.sa-cr-hero__stats {
	display: flex;
	flex-wrap: wrap;
	gap: 40px;
	margin: 0;
	padding-top: 24px;
}
.sa-cr-stat__value {
	margin: 0;
	font-size: 24px;
	line-height: 32px;
	letter-spacing: .01em;
	color: var(--sa-navy);
}
.sa-cr-stat__label {
	margin: 0;
	font-size: 12px;
	line-height: 16px;
	color: var(--sa-text);
}

/* --------------------------------------------------------- Hero photo fan */

/* One card open, the rest slim, all hanging from the same baseline. Figma
   staggers them - every second card is 40px shorter - which is what gives the
   row its fanned look rather than reading as four equal tiles.

   The open card grows to fill whatever the slim ones leave, so with the four
   photographs the design ships the row comes out at exactly its Figma widths.
   Add more and the row outgrows its column: it then keeps the open card at its
   full width, overflows, and the track slides so the open card sits flush left
   - clamped so the row never scrolls past its own end and leaves a hole. */
.sa-cr-fan {
	--sa-fan-slim: 100px;
	--sa-fan-wide: 402px;
	--sa-fan-gap: 8px;
	--sa-fan-tall: 460px;
	--sa-fan-short: 420px;

	position: relative;
	z-index: 1;
	overflow: hidden;
}

.sa-cr-fan__track {
	display: flex;
	align-items: flex-end;
	gap: var(--sa-fan-gap);
	height: var(--sa-fan-tall);
	margin: 0;
	padding: 0;
	list-style: none;
	transform: translateX(calc(-1 * var(--sa-fan-shift, 0px)));
	transition: transform .55s cubic-bezier(.65, 0, .35, 1);
}

.sa-cr-fan__item {
	flex: 0 1 var(--sa-fan-slim);
	min-width: 0;
	height: var(--sa-fan-tall);
	transition:
		flex-basis .55s cubic-bezier(.65, 0, .35, 1),
		flex-grow .55s cubic-bezier(.65, 0, .35, 1),
		min-width .55s cubic-bezier(.65, 0, .35, 1);
}
.sa-cr-fan__item:nth-child(even) { height: var(--sa-fan-short); }
.sa-cr-fan__item.is-active {
	flex-grow: 1;
	flex-basis: var(--sa-fan-wide);
	min-width: var(--sa-fan-wide);
}

.sa-cr-fan__card {
	position: relative;
	display: block;
	width: 100%;
	height: 100%;
	padding: 0;
	border: 0;
	border-radius: 28px;
	overflow: hidden;
	background: var(--sa-navy);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
	cursor: pointer;
}
.sa-cr-fan__card img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.sa-cr-fan__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(19, 38, 83, .9) 0%, rgba(19, 38, 83, .2) 50%, rgba(19, 38, 83, 0) 100%);
	opacity: .6;
	transition: opacity .3s ease;
}
.sa-cr-fan__item.is-active .sa-cr-fan__veil { opacity: 1; }

/* Only the open card is wide enough to carry its label; on a 100px sliver the
   word would be clipped to two letters. */
.sa-cr-fan__label {
	position: absolute;
	left: 20px;
	right: 16px;
	bottom: 20px;
	font-family: var(--sa-font-num);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: 1.4px;
	text-align: left;
	text-transform: uppercase;
	white-space: nowrap;
	color: #fff;
	opacity: 0;
	transition: opacity .25s ease;
}
.sa-cr-fan__item.is-active .sa-cr-fan__label { opacity: 1; }

/* ------------------------------------------------------------- Open roles */

.sa-cr-roles {
	padding-block: var(--sa-section-y);
	background: #FAF8F5;
}
.sa-cr-roles__wrap {
	width: 100%;
	max-width: 1024px;
	margin-inline: auto;
	padding-inline: 16px;
}
@media (max-width: 1080px) {
	.sa-cr-roles__wrap { padding-inline: var(--sa-gutter); }
}

.sa-cr-head {
	max-width: 768px;
	margin-inline: auto;
	text-align: center;
}
.sa-cr-head--left {
	max-width: none;
	margin-inline: 0;
	text-align: left;
}
.sa-cr-head__title {
	font-size: 36px;
	line-height: 40px;
	letter-spacing: .9px;
	color: var(--sa-navy);
	overflow-wrap: break-word;
}
.sa-cr-head__sub {
	margin-top: 16px;
	font-family: var(--sa-font-ui);
	font-size: 18px;
	line-height: 28px;
	color: var(--sa-text);
}

.sa-cr-filters {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px 24px;
	margin-top: 40px;
}

.sa-cr-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}
.sa-cr-chip {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	height: 38px;
	padding: 8px 16px;
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-r-pill);
	background: #fff;
	font-family: var(--sa-font-ui);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: var(--sa-text);
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.sa-cr-chip:hover { border-color: #BFC6D4; }
.sa-cr-chip.is-active {
	background: var(--sa-navy);
	border-color: var(--sa-navy);
	color: #fff;
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -2px rgba(0, 0, 0, .1);
}
.sa-cr-chip__count {
	min-width: 20px;
	padding-inline: 6px;
	border-radius: var(--sa-r-pill);
	background: #F3F1ED;
	font-size: 10px;
	font-weight: 700;
	line-height: 20px;
	text-align: center;
	color: var(--sa-text);
}
.sa-cr-chip.is-active .sa-cr-chip__count { background: var(--sa-red); color: #fff; }

.sa-cr-search {
	position: relative;
	width: 256px;
	max-width: 100%;
}
.sa-cr-search > svg {
	position: absolute;
	left: 14px;
	top: 50%;
	transform: translateY(-50%);
	color: var(--sa-text);
	pointer-events: none;
}
.sa-cr-search input {
	width: 100%;
	height: 36px;
	padding: 0 16px 0 41px;
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-r-pill);
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 16px;
	color: var(--sa-ink);
	-webkit-appearance: none;
	appearance: none;
}
.sa-cr-search input::placeholder { color: var(--sa-text); opacity: 1; }
.sa-cr-search input:focus-visible { outline: 2px solid rgba(19, 38, 83, .35); outline-offset: 1px; }
/* Chrome draws its own clear button over the pill. */
.sa-cr-search input::-webkit-search-cancel-button { -webkit-appearance: none; }

.sa-cr-roles__list {
	display: grid;
	gap: 12px;
	margin-top: 32px;
}

/* The role cards reuse the FAQ accordion so they inherit its height animation;
   everything below re-dresses it to the Careers design. */
.sa-cr-role { border-radius: 24px; }
.sa-cr-role[hidden] { display: none; }
.sa-cr-role[open] {
	border-color: rgba(175, 29, 43, .4);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}

.sa-cr-role__head {
	align-items: center;
	gap: 16px;
	padding: 24px;
	font-size: inherit;
	font-weight: 400;
}
.sa-cr-role__id {
	display: flex;
	flex-direction: column;
	gap: 6px;
	min-width: 0;
}
.sa-cr-role__title {
	font-family: var(--sa-font-display);
	font-size: 18px;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--sa-navy);
}
.sa-cr-role__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px 16px;
}

.sa-cr-tag {
	padding: 2px 10px;
	border-radius: var(--sa-r-pill);
	background: rgba(19, 38, 83, .08);
	font-family: var(--sa-font-body);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	color: var(--sa-navy);
}
.sa-cr-tag--internship { background: rgba(14, 165, 233, .1); color: #0369A1; }
.sa-cr-tag--full-time  { background: rgba(175, 29, 43, .1); color: var(--sa-red); }
.sa-cr-tag--part-time  { background: rgba(245, 158, 11, .1); color: #B45309; }
.sa-cr-tag--volunteer  { background: rgba(16, 185, 129, .1); color: #047857; }

.sa-cr-fact {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	line-height: 16px;
	color: var(--sa-text);
}

/* The shared accordion rule rotates every svg inside the summary, which would
   stand the location pin and the clock on their heads too. */
.sa-cr-role[open] .sa-cr-role__head svg { transform: none; }
.sa-cr-role__chevron {
	color: var(--sa-text);
	transition: transform .2s ease, color .2s ease;
}
.sa-cr-role[open] .sa-cr-role__head .sa-cr-role__chevron {
	transform: rotate(180deg);
	color: var(--sa-red);
}

.sa-cr-role__body {
	display: grid;
	gap: 24px;
	padding: 20px 24px 24px;
	border-top: 1px solid var(--sa-border);
}
.sa-cr-role__summary {
	font-size: 16px;
	line-height: 24px;
	color: var(--sa-text);
}
.sa-cr-role__cols {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}
.sa-cr-role__sub {
	font-family: var(--sa-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: var(--sa-navy);
}
.sa-cr-role__list {
	display: grid;
	gap: 8px;
	margin-top: 12px;
}
.sa-cr-role__list li {
	position: relative;
	padding-left: 16px;
	font-size: 14px;
	line-height: 20px;
	color: var(--sa-text);
}
.sa-cr-role__list li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 7px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--sa-red);
}

.sa-cr-role__foot { display: flex; justify-content: flex-end; }
.sa-cr-apply {
	display: inline-flex;
	align-items: center;
	gap: 16px;
	height: 36px;
	padding: 8px 16px;
	border-radius: var(--sa-r-pill);
	background: var(--sa-red);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: #fff;
	transition: background-color .15s ease, transform .15s ease;
}
.sa-cr-apply:hover { background: #951825; transform: translateY(-1px); }

.sa-cr-roles__empty {
	margin-top: 24px;
	font-size: 15px;
	line-height: 24px;
	text-align: center;
	color: var(--sa-text);
}

/* ------------------------------------------------------ Application panel */

/* Replaces the Elementor popup the old page used: same six fields, same
   inbox, but drawn by this page's own stylesheet since the template loads no
   Elementor. */
.sa-cr-modal {
	position: fixed;
	inset: 0;
	/* Above the basket drawer (1000000) and the floating widgets, which sit at
	   9999 and would otherwise cover the submit button on a phone. The script
	   hides them for the duration as well, since a third-party widget can
	   raise its own stacking at any time. */
	z-index: 1000001;
	display: grid;
	place-items: center;
	padding: 24px;
	overflow-y: auto;
	overscroll-behavior: contain;
}
.sa-cr-modal[hidden] { display: none; }

.sa-cr-modal__veil {
	position: absolute;
	inset: 0;
	background: rgba(12, 38, 75, .55);
	backdrop-filter: blur(2px);
	animation: sa-fade-in .2s ease both;
}

.sa-cr-modal__box {
	position: relative;
	width: min(560px, 100%);
	max-height: calc(100vh - 48px);
	padding: 32px;
	overflow-y: auto;
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .35);
	animation: sa-modal-rise .28s cubic-bezier(.22, .61, .36, 1) both;
}
@keyframes sa-modal-rise {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: none; }
}

.sa-cr-modal__x {
	position: absolute;
	top: 18px;
	right: 18px;
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid var(--sa-border);
	border-radius: 50%;
	background: #fff;
	color: var(--sa-navy);
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.sa-cr-modal__x:hover { background: var(--sa-navy); color: #fff; }
/* Keeps the 36px circle the design wants while giving a thumb 44px to find. */
.sa-cr-modal__x::after {
	content: '';
	position: absolute;
	inset: -4px;
}

.sa-cr-modal__title {
	padding-right: 44px;
	font-size: 24px;
	line-height: 32px;
	letter-spacing: .6px;
	color: var(--sa-navy);
}
.sa-cr-modal__role {
	margin-top: 6px;
	font-family: var(--sa-font-ui);
	font-size: 14px;
	line-height: 20px;
	font-weight: 600;
	color: var(--sa-red);
}
.sa-cr-modal__role:empty { display: none; }

.sa-cr-form { display: grid; gap: 16px; margin-top: 24px; }
.sa-cr-form__row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sa-cr-form__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

.sa-cr-field { display: grid; gap: 6px; }
.sa-cr-field > span {
	font-family: var(--sa-font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	color: var(--sa-navy);
}
.sa-cr-field abbr { border: 0; text-decoration: none; color: var(--sa-red); }
.sa-cr-field small { font-size: 12px; line-height: 16px; color: var(--sa-text); }

.sa-cr-field input,
.sa-cr-field textarea {
	width: 100%;
	padding: 11px 14px;
	border: 1px solid var(--sa-border);
	border-radius: 10px;
	background: #fff;
	font-family: var(--sa-font-body);
	font-size: 15px;
	line-height: 22px;
	color: var(--sa-ink);
}
.sa-cr-field textarea { resize: vertical; min-height: 84px; }
.sa-cr-field input:focus-visible,
.sa-cr-field textarea:focus-visible {
	outline: 2px solid rgba(19, 38, 83, .35);
	outline-offset: 1px;
	border-color: var(--sa-navy);
}
.sa-cr-field input[type="file"] { padding: 9px 12px; font-size: 14px; }
.sa-cr-field input[type="file"]::file-selector-button {
	margin-right: 12px;
	padding: 6px 12px;
	border: 1px solid var(--sa-border);
	border-radius: var(--sa-r-pill);
	background: var(--sa-surface-alt);
	font-family: var(--sa-font-body);
	font-size: 13px;
	color: var(--sa-navy);
	cursor: pointer;
}
.sa-cr-field.is-wrong input,
.sa-cr-field.is-wrong textarea { border-color: var(--sa-red); }

.sa-cr-form__send {
	justify-content: center;
	height: 48px;
	margin-top: 4px;
	border: 0;
	font-size: 15px;
	cursor: pointer;
}
.sa-cr-form__send[disabled] { opacity: .6; cursor: default; transform: none; }

.sa-cr-form__says {
	font-size: 14px;
	line-height: 20px;
	color: var(--sa-text);
}
.sa-cr-form__says:empty { display: none; }
.sa-cr-form__says.is-wrong { color: var(--sa-red); }
.sa-cr-form__says.is-done { color: #047857; font-weight: 500; }

@media (max-width: 560px) {
	.sa-cr-modal { padding: 12px; }
	.sa-cr-modal__box { padding: 24px 20px; max-height: calc(100vh - 24px); }
	.sa-cr-form__row { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------- Benefits */

.sa-cr-why {
	padding-block: var(--sa-section-y);
	background: var(--sa-cream);
}
.sa-cr-why__grid {
	display: grid;
	grid-template-columns: minmax(0, 722fr) minmax(0, 590fr);
	gap: 56px;
	align-items: stretch;
}
.sa-cr-why__col {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.sa-cr-perks {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.sa-cr-perk {
	display: flex;
	flex-direction: column;
	min-height: 177px;
	padding: 20px;
	border: 1px solid var(--sa-border);
	border-radius: 18px;
	background: #fff;
	transition: background-color .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.sa-cr-perk:focus-visible { outline: 2px solid var(--sa-navy); outline-offset: 2px; }

.sa-cr-perk__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: rgba(175, 29, 43, .1);
	color: var(--sa-red);
	transition: background-color .3s ease, color .3s ease, transform .3s ease;
}
.sa-cr-perk__title {
	margin-top: 16px;
	font-family: var(--sa-font-display);
	font-size: 16px;
	font-weight: 700;
	line-height: 24px;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: var(--sa-navy);
	transition: color .3s ease;
}
.sa-cr-perk__desc {
	margin-top: 6px;
	font-family: var(--sa-font-ui);
	font-size: 14px;
	line-height: 17px;
	color: var(--sa-text);
	transition: color .3s ease;
}

/* The card the panel is currently showing. The icon tilts, which is the one
   place in the design where a chip is off-axis. */
.sa-cr-perk.is-active {
	background: var(--sa-navy);
	border-color: var(--sa-navy);
	box-shadow: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 8px 10px -6px rgba(0, 0, 0, .1);
}
.sa-cr-perk.is-active .sa-cr-perk__icon {
	background: var(--sa-red);
	color: #fff;
	transform: rotate(-8deg);
}
.sa-cr-perk.is-active .sa-cr-perk__title { color: #fff; }
.sa-cr-perk.is-active .sa-cr-perk__desc { color: rgba(255, 255, 255, .7); }

.sa-cr-panel {
	position: relative;
	min-height: 560px;
	overflow: hidden;
	border-radius: 32px;
	background: var(--sa-navy);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}
.sa-cr-panel img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .3s ease;
}
/* Held while the next photo decodes, so the swap never shows a half-drawn
   image or a flash of the navy backing. */
.sa-cr-panel.is-swapping img { opacity: 0; }
.sa-cr-panel__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(19, 38, 83, .9) 0%, rgba(19, 38, 83, 0) 50%, rgba(19, 38, 83, 0) 100%);
}
.sa-cr-panel__caption {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	padding: 32px;
	font-size: 24px;
	line-height: 32px;
	letter-spacing: .01em;
	color: #fff;
}

/* --------------------------------------------------------- Hiring timeline */

.sa-cr-process {
	padding-block: var(--sa-section-y);
	background: var(--sa-navy);
}
.sa-cr-process__title {
	max-width: 768px;
	margin-inline: auto;
	font-size: 36px;
	line-height: 40px;
	letter-spacing: .9px;
	text-align: center;
	color: #fff;
	overflow-wrap: break-word;
}

.sa-cr-steps {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin: 64px 0 0;
	padding: 0;
	list-style: none;
}
/* The rail runs from the centre of the first badge to the right edge of the
   row, as in the design; each badge punches a hole in it with its own ring.
   It is a grid item, so it is taken out of flow to sit behind the columns. */
.sa-cr-steps__rail {
	position: absolute;
	left: 28px;
	right: 28px;
	top: 27px;
	height: 2px;
	background: var(--sa-red);
}

/* The rail draws itself left to right, then the steps land on it one after
   another (the stagger is set by the reveal script). The shared .sa-reveal
   treatment would slide it down instead, so it states its own. */
.sa-page .sa-cr-steps__rail.sa-reveal {
	opacity: 1;
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform .7s cubic-bezier(.22, .61, .36, 1);
}
.sa-page .sa-cr-steps__rail.sa-reveal.is-visible { transform: scaleX(1); }

.sa-cr-step { position: relative; }
.sa-cr-step__badge {
	position: relative;
	z-index: 1;
	display: grid;
	place-items: center;
	width: 56px;
	height: 56px;
	border-radius: 18px;
	background: #fff;
	color: var(--sa-navy);
	box-shadow:
		0 0 0 8px var(--sa-navy),
		0 20px 25px -5px rgba(0, 0, 0, .1),
		0 8px 10px -6px rgba(0, 0, 0, .1);
}
.sa-cr-step__when {
	display: block;
	margin-top: 15px;
	font-family: var(--sa-font-ui);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--sa-red-bright);
}
.sa-cr-step__title {
	margin-top: 24px;
	font-family: var(--sa-font-display);
	font-size: 18px;
	font-weight: 700;
	line-height: 28px;
	letter-spacing: .02em;
	text-transform: uppercase;
	color: #fff;
}
.sa-cr-step__desc {
	margin-top: 8px;
	font-size: 14px;
	line-height: 23px;
	color: rgba(255, 255, 255, .65);
}

/* ---------------------------------------------------------- Event carousel */

.sa-cr-life {
	/* Figma: resting card 364 tall, the open one 376 - the difference is small
	   on purpose, the open card is told apart by its width and its colour. */
	--sa-slide-h: 364px;
	--sa-slide-tall: 376px;

	padding-block: var(--sa-section-y);
	background: var(--sa-cream);
}
.sa-cr-life__title {
	font-size: 36px;
	line-height: 40px;
	letter-spacing: .9px;
	color: var(--sa-navy);
	overflow-wrap: break-word;
}

.sa-cr-reel { margin-top: 40px; }

/* Figma: every card hangs from the same top edge, the centre one is 12px
   deeper, and the whole region is 401px tall. Fixing the track height means
   the section cannot breathe as each slide takes its turn in the middle - the
   card grows downwards on its own, and nothing below it moves. */
.sa-cr-reel .splide__list { align-items: flex-start; }
.sa-cr-reel .splide__track {
	height: calc(var(--sa-slide-tall) + 80px);
	padding: 24px 0 56px;
}

.sa-cr-slide { position: relative; }
.sa-cr-slide.sa-is-active { z-index: 2; }

/* At rest a slide is inset inside its box, drained of colour and washed out
   against the cream; the centre one spreads into the inset, comes back to full
   colour and picks up the drop shadow. Figma gets the same wash with a white
   saturation blend at 60% opacity. The insets are what set the gaps: 62px
   between two resting cards, 16px either side of the open one. */
.sa-cr-slide__figure {
	position: relative;
	height: var(--sa-slide-h);
	margin-inline: 31px;
	overflow: hidden;
	border-radius: 32px;
	background: var(--sa-blue-light);
	/* Figma blends 40% white over the photo in saturation mode and drops the
	   whole card to 60% - muted and recessive, but the picture is still
	   readable. Flattening it to grey went too far. */
	filter: saturate(.2);
	opacity: .55;
	transition:
		height .45s cubic-bezier(.22, .61, .36, 1),
		margin .45s cubic-bezier(.22, .61, .36, 1),
		filter .45s ease,
		opacity .45s ease,
		box-shadow .45s ease;
}
.sa-cr-slide.sa-is-active .sa-cr-slide__figure {
	height: var(--sa-slide-tall);
	margin-inline: -15px;
	filter: none;
	opacity: 1;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}
/* The card is wide and the event photographs are mostly upright, so a centred
   crop takes the floor and leaves the heads out of frame. Biasing the window
   upwards keeps the people in it. */
.sa-cr-slide__figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 25%;
}
.sa-cr-slide__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(19, 38, 83, .85) 0%, rgba(19, 38, 83, 0) 50%, rgba(19, 38, 83, 0) 100%);
}
.sa-cr-slide__caption {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	opacity: 0;
	transition: opacity .3s ease;
}
.sa-cr-slide.sa-is-active .sa-cr-slide__caption { opacity: 1; }
.sa-cr-slide__text {
	font-family: var(--sa-font-ui);
	font-size: 16px;
	font-weight: 600;
	line-height: 24px;
	color: #fff;
}
.sa-cr-slide__num {
	flex: none;
	font-family: var(--sa-font-num);
	font-size: 12px;
	line-height: 16px;
	color: rgba(255, 255, 255, .6);
}

.sa-cr-reel__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	margin-top: 32px;
}
.sa-cr-reel__bar .sa-dots { gap: 12px; }
.sa-cr-reel__bar .sa-dot { position: relative; background: rgba(19, 38, 83, .2); }
.sa-cr-reel__bar .sa-dot[aria-current="true"] { width: 32px; background: var(--sa-red); }

/* The dot stays the 8px the design draws; what the finger has to find is 44px
   deep and reaches half way into the gap on each side, so neighbouring
   targets meet without overlapping. */
.sa-cr-reel__bar .sa-dot::after {
	content: '';
	position: absolute;
	top: -18px;
	bottom: -18px;
	left: -6px;
	right: -6px;
}

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

@media (max-width: 1280px) {
	.sa-cr-hero__title { font-size: 52px; line-height: 54px; }
	/* --sa-fan-wide is a floor, not a width: the open card grows past it to fill
	   the row. It has to come down with the column, or it becomes wider than
	   the row and pushes the slim cards off the side. */
	.sa-cr-fan {
		--sa-fan-slim: 84px;
		--sa-fan-wide: 340px;
		--sa-fan-tall: 420px;
		--sa-fan-short: 384px;
	}
	.sa-cr-why__grid { gap: 32px; }
	.sa-cr-panel { min-height: 480px; }
}

@media (max-width: 1024px) {
	.sa-cr-hero { padding-block: 24px 56px; }
	.sa-cr-hero__grid {
		grid-template-columns: minmax(0, 1fr);
		gap: 40px;
		min-height: 0;
	}
	.sa-cr-hero__title { font-size: 46px; line-height: 48px; }
	.sa-cr-hero__swoosh { height: 130px; }

	/* Stacked, the strip would otherwise take the full column and stretch the
	   open card into a letterbox; capped, it keeps roughly the upright shape
	   the design gives it. */
	.sa-cr-fan {
		--sa-fan-slim: 76px;
		--sa-fan-wide: 300px;
		--sa-fan-tall: 360px;
		--sa-fan-short: 328px;

		max-width: 620px;
	}

	.sa-cr-why__grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.sa-cr-panel { min-height: 380px; }
	.sa-cr-panel__caption { padding: 24px; font-size: 20px; line-height: 28px; }

	.sa-cr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 48px 24px; }
	.sa-cr-steps__rail { display: none; }

	.sa-cr-life { --sa-slide-h: 300px; --sa-slide-tall: 312px; }
	.sa-cr-slide__figure { margin-inline: 22px; }
	.sa-cr-slide.sa-is-active .sa-cr-slide__figure { margin-inline: -11px; }
	.sa-cr-reel .splide__track { height: calc(var(--sa-slide-tall) + 64px); padding: 20px 0 44px; }
}

@media (max-width: 760px) {
	.sa-cr-hero__title { font-size: 38px; line-height: 40px; letter-spacing: 1px; }
	.sa-cr-hero__lead { font-size: 16px; line-height: 26px; }
	.sa-cr-hero__actions { gap: 12px; width: 100%; }
	.sa-cr-hero__actions .sa-btn { flex: 1 1 200px; height: 50px; font-size: 16px; }
	.sa-cr-hero__stats { gap: 24px 28px; }

	.sa-cr-fan {
		--sa-fan-slim: 54px;
		--sa-fan-gap: 6px;
		--sa-fan-wide: 140px;
		--sa-fan-tall: 300px;
		--sa-fan-short: 274px;
	}
	.sa-cr-fan__card { border-radius: 20px; }
	.sa-cr-fan__label { left: 14px; right: 12px; bottom: 14px; font-size: 12px; letter-spacing: 1px; }

	.sa-cr-head__title,
	.sa-cr-life__title,
	.sa-cr-process__title { font-size: 28px; line-height: 32px; }
	.sa-cr-head__sub { font-size: 16px; line-height: 26px; }

	.sa-cr-filters { gap: 16px; }
	.sa-cr-search { width: 100%; }
	.sa-cr-search input { height: 44px; }
	/* A little taller than the design's 38px: this is a thumb, not a cursor. */
	.sa-cr-chip { height: 42px; }
	.sa-cr-chip__count { font-size: 11px; }

	.sa-cr-role__head { padding: 18px; gap: 12px; }
	.sa-cr-role__body { padding: 16px 18px 20px; gap: 20px; }
	.sa-cr-role__cols { grid-template-columns: minmax(0, 1fr); gap: 20px; }
	.sa-cr-role__foot { justify-content: stretch; }
	.sa-cr-apply { width: 100%; justify-content: center; height: 44px; }

	.sa-cr-perks { grid-template-columns: minmax(0, 1fr); }
	.sa-cr-perk { min-height: 0; }

	/* The rail turns vertical and the badge moves into the gutter beside the
	   copy, so the sequence still reads as one line of travel. */
	/* Stacked, the rail turns vertical. It is drawn per step rather than as one
	   run down the column, because the last step's copy is taller than its
	   badge and a single rail would carry on past it into empty space. */
	.sa-cr-steps { grid-template-columns: minmax(0, 1fr); gap: 28px; margin-top: 40px; }
	.sa-cr-steps__rail { display: none; }
	.sa-cr-step:not(:last-child)::before {
		content: '';
		position: absolute;
		left: 27px;
		top: 64px;
		bottom: -20px;
		width: 2px;
		background: var(--sa-red);
	}
	.sa-cr-step { padding-left: 76px; min-height: 56px; }
	.sa-cr-step__badge { position: absolute; left: 0; top: 0; }
	.sa-cr-step__when { margin-top: 0; }
	.sa-cr-step__title { margin-top: 6px; font-size: 17px; line-height: 24px; }

	.sa-cr-life { --sa-slide-h: 230px; --sa-slide-tall: 242px; }
	.sa-cr-slide__figure { margin-inline: 10px; border-radius: 24px; }
	.sa-cr-slide.sa-is-active .sa-cr-slide__figure { margin-inline: -4px; }
	.sa-cr-reel .splide__track { height: calc(var(--sa-slide-tall) + 48px); padding: 14px 0 34px; }
	.sa-cr-slide__caption { left: 16px; right: 16px; bottom: 14px; gap: 12px; }
	.sa-cr-slide__text { font-size: 14px; line-height: 20px; }
	.sa-cr-reel__bar { margin-top: 20px; }
}

@media (prefers-reduced-motion: reduce) {
	.sa-cr-fan__item,
	.sa-cr-fan__veil,
	.sa-cr-fan__label,
	.sa-cr-perk,
	.sa-cr-perk__icon,
	.sa-cr-panel img,
	.sa-cr-slide__figure,
	.sa-cr-slide__caption { transition: none; }
}

/* No hover on touch: the fan and the benefit cards are driven by tap instead,
   so nothing should stick to the finger on the way past. */
@media (hover: none) {
	.sa-cr-apply:hover { transform: none; }
	.sa-cr-chip:hover { border-color: var(--sa-border); }
}

/* ==========================================================================
   Find Scholarships (Figma: "Find Scholarships" 1:3810, 1440 x 8737)
   --------------------------------------------------------------------------
   Only the hero and the opportunity listing live here. Everything else on the
   page is a shared block that already has its styles elsewhere in this file.
   ========================================================================== */

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

.sa-fhero {
	position: relative;
	overflow: hidden;
	min-height: 770px;
	padding-block: 150px 120px;
	background: var(--sa-cream);
}

/* Figma: the photograph starts at x 604.8 of 1440 - 42% - and a left-to-right
   cream gradient carries it out from under the copy. */
.sa-fhero__bg {
	position: absolute;
	inset: 0 0 0 42%;
	z-index: 0;
}
/* The source is a wide 16:9 frame dropped into a near-square box, so most of
   the crop comes off the sides; biasing right keeps the graduate in it. */
.sa-fhero__bg img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 58% center;
}
.sa-fhero__fade {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #FAF8F5 0%, rgba(250, 248, 245, .4) 50%, rgba(250, 248, 245, 0) 100%);
}

/* The band's height tracks the viewport width, so the sweep keeps its angle
   instead of being stretched flat. At 1440 this is the design's 160px exactly;
   either side of that both axes scale together and the curve holds its shape.
   The cap stops the band eating the hero on an ultra-wide screen, where the
   hero's own height does not grow to match. */
.sa-fhero__swoosh {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
	height: clamp(132px, 11.111vw, 224px);
	overflow: visible;
	pointer-events: none;
}

.sa-fhero__inner {
	position: relative;
	z-index: 1;
}

.sa-fhero__title {
	max-width: 626px;
	font-family: var(--sa-font-display);
	font-size: 56px;
	font-weight: 700;
	line-height: 60px;
	color: #002768;
	overflow-wrap: break-word;
}
.sa-fhero__title .sa-accent { color: #AA1824; }

.sa-fhero__lead {
	max-width: 626px;
	margin-top: 16px;
	font-size: 20px;
	line-height: 30px;
	color: #556171;
}

.sa-fhero__points {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}
.sa-fhero__points li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--sa-font-ui);
	font-size: 14px;
	line-height: 20px;
	color: #5E6678;
}
.sa-fhero__points svg { color: var(--sa-red); }

/* ---------------------------------------------------------- The search bar */

.sa-fsearch {
	width: 100%;
	max-width: 896px;
	margin-top: 40px;
	padding: 20px 12px 12px;
	border: 1px solid rgba(226, 220, 213, .7);
	border-radius: 18px;
	background: rgba(255, 255, 255, .95);
	backdrop-filter: blur(12px);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}

/* Figma: four controls then the button, the keyword field 1.4x the others. */
.sa-fsearch__row {
	display: grid;
	grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
	gap: 8px;
}

.sa-fsearch__field {
	position: relative;
	display: block;
	min-width: 0;
}
.sa-fsearch__field > svg {
	position: absolute;
	left: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: #5E6678;
	pointer-events: none;
}

.sa-fsearch__field input,
.sa-fsearch__field select {
	width: 100%;
	height: 48px;
	padding: 8px 12px;
	border: 0;
	border-radius: 8px;
	background: rgba(239, 236, 230, .6);
	font-family: var(--sa-font-ui);
	font-size: 14px;
	line-height: 20px;
	color: #0E1B39;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}
.sa-fsearch__field input {
	padding-left: 36px;
	cursor: text;
}
.sa-fsearch__field input::placeholder { color: #5E6678; opacity: 1; }
.sa-fsearch__field input::-webkit-search-cancel-button { -webkit-appearance: none; }

/* The native arrow is drawn here so the control keeps the design's weight. */
.sa-fsearch__field select {
	padding-right: 34px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E1B39' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
}
.sa-fsearch__field input:focus-visible,
.sa-fsearch__field select:focus-visible {
	outline: 2px solid rgba(14, 27, 57, .35);
	outline-offset: 1px;
}

.sa-fsearch__go {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	height: 48px;
	padding: 8px 24px;
	border: 0;
	border-radius: 14px;
	background: #AA1824;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
	font-family: var(--sa-font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease, transform .15s ease;
}
.sa-fsearch__go:hover { background: #8E131E; transform: translateY(-1px); }

.sa-fsearch__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 8px 16px;
	padding: 12px 8px 4px;
}
.sa-fsearch__count {
	font-family: var(--sa-font-ui);
	font-size: 12px;
	line-height: 16px;
	color: #5E6678;
}
.sa-fsearch__count strong { font-weight: 600; color: #0E1B39; }

/* The label stays the design's 12px; the box around it is given enough height
   to be worth aiming at, with the extra taken back as a negative margin so
   nothing below it moves. */
.sa-fsearch__reset {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	min-height: 44px;
	margin-block: -10px;
	padding: 4px 8px;
	border: 0;
	background: none;
	font-family: var(--sa-font-body);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	color: #AA1824;
	cursor: pointer;
}
.sa-fsearch__reset:hover { text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------- The figures bar */

/* Figma: a 1400 x 164 box carrying the diagonal, with a 4px lip around a
   translucent panel. The cells are separated by 1px gaps rather than borders,
   so what shows between them is the gradient underneath. */
.sa-statbar {
	padding-block: 0 var(--sa-section-y);
	background: #FAFAFA;
}

.sa-statbar__box {
	padding: 4px;
	border-radius: 24px;
	background: linear-gradient(135deg, #11244F 0%, #11244F 50%, #AF1D2B 100%);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}

.sa-statbar__inner {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	border-radius: 21.6px;
	overflow: hidden;
}

/* The wash sits on the cells, not on the panel, so the 1px gaps between them
   are hairlines of the bare gradient - which is the only thing dividing the
   figures in the design. */
.sa-statbar__cell {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 8px;
	padding: 40px 24px;
	background: rgba(255, 255, 255, .1);
}

.sa-statbar__value {
	font-family: var(--sa-font-display);
	font-size: 48px;
	font-weight: 700;
	line-height: 48px;
	letter-spacing: .01em;
	text-align: center;
	color: #fff;
}

.sa-statbar__label {
	font-family: var(--sa-font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	letter-spacing: 1.4px;
	text-align: center;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .75);
}

@media (max-width: 1024px) {
	.sa-statbar__inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sa-statbar__cell { padding: 30px 18px; }
	.sa-statbar__value { font-size: 40px; line-height: 44px; }
}

@media (max-width: 560px) {
	.sa-statbar__box { border-radius: 18px; }
	.sa-statbar__inner { border-radius: 15px; }
	.sa-statbar__cell { padding: 22px 12px; }
	.sa-statbar__value { font-size: 30px; line-height: 34px; }
	.sa-statbar__label { font-size: 11px; letter-spacing: 1px; }
}

/* ------------------------------------------------------ The listing header */

.sa-find {
	padding-block: 30px 60px;
	background: var(--sa-cream);
}

.sa-find__title {
	font-family: var(--sa-font-display);
	font-size: 48px;
	font-weight: 700;
	line-height: 56px;
	letter-spacing: -.01em;
	text-transform: uppercase;
	color: #0E1B39;
	overflow-wrap: break-word;
}
.sa-find__sub {
	margin-top: 12px;
	font-size: 16px;
	line-height: 24px;
	color: #5E6678;
}

.sa-find__bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-top: 40px;
}

/* The pills live in one rounded rail; on a narrow screen the rail scrolls
   sideways rather than wrapping, which is what keeps it reading as a rail. */
.sa-find__tabs {
	display: flex;
	gap: 4px;
	max-width: 100%;
	padding: 4px;
	overflow-x: auto;
	border: 1px solid #E2DCD5;
	border-radius: var(--sa-r-pill);
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
	scrollbar-width: none;
}
.sa-find__tabs::-webkit-scrollbar { display: none; }

.sa-find__tab {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	flex: none;
	height: 36px;
	padding: 9.5px 16px;
	border: 0;
	border-radius: var(--sa-r-pill);
	background: none;
	font-family: var(--sa-font-body);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	white-space: nowrap;
	color: #5E6678;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.sa-find__tab:hover { background: rgba(239, 236, 230, .7); }
.sa-find__tab.is-active { background: #AA1824; color: #fff; }

.sa-find__tab-n {
	font-size: 12px;
	line-height: 16px;
	opacity: .7;
}

.sa-find__tools {
	display: flex;
	align-items: center;
	gap: 8px;
}

.sa-find__sort select {
	width: 176px;
	height: 40px;
	padding: 8px 34px 8px 12px;
	border: 1px solid #E2DCD5;
	border-radius: var(--sa-r-pill);
	background: #fff;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230E1B39' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' opacity='.5'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 12px center;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	text-align: center;
	color: #0E1B39;
	-webkit-appearance: none;
	appearance: none;
	cursor: pointer;
}

.sa-find__views {
	display: flex;
	gap: 0;
	padding: 4px;
	border: 1px solid #E2DCD5;
	border-radius: var(--sa-r-pill);
	background: #fff;
}
.sa-find__view {
	display: grid;
	place-items: center;
	padding: 8px;
	border: 0;
	border-radius: var(--sa-r-pill);
	background: none;
	color: #5E6678;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease;
}
.sa-find__view.is-active { background: #0E214E; color: #fff; }

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

.sa-find__grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 24px;
	margin-top: 40px;
	transition: opacity .2s ease;
}
.sa-find__grid[aria-busy="true"] { opacity: .45; }

.sa-find-card {
	position: relative;
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border: 1px solid rgba(226, 220, 213, .7);
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
	transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease;
}
.sa-find-card:hover {
	transform: translateY(-3px);
	border-color: rgba(175, 29, 43, .35);
	box-shadow: 0 16px 28px -12px rgba(14, 33, 78, .22);
}

.sa-find-card__media {
	position: relative;
	display: block;
	height: 156px;
	overflow: hidden;
	background: var(--sa-blue-light);
}
.sa-find-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.sa-find-card:hover .sa-find-card__media img { transform: scale(1.05); }

.sa-find-card__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(14, 33, 78, .8) 0%, rgba(14, 33, 78, .1) 50%, rgba(14, 33, 78, 0) 100%);
}

.sa-find-card__where {
	position: absolute;
	left: 12px;
	bottom: 12px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sa-font-body);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	color: #fff;
}
.sa-find-card__where .sa-mflag {
	width: 16px;
	height: 12px;
	border-radius: 2px;
	box-shadow: 0 0 0 1px rgba(255, 255, 255, .5);
}

.sa-find-card__body {
	display: flex;
	flex-direction: column;
	flex: 1;
	padding: 20px;
}

.sa-find-card__title {
	font-family: var(--sa-font-display);
	font-size: 15px;
	font-weight: 700;
	line-height: 20.63px;
	letter-spacing: .01em;
	color: #0E1B39;
}
/* Two lines, so every card in a row keeps the same shape. */
.sa-find-card__title a {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.sa-find-card__title a:hover { color: var(--sa-red); }

/* The title is the card's one real link, and on a one-line headline that is a
   21px strip to aim at. This spreads its hit area over the whole card, which
   is where people tap anyway. */
.sa-find-card__title a::after {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 1;
}
.sa-find-card__title a:focus-visible::after {
	outline: 2px solid var(--sa-navy);
	outline-offset: -3px;
	border-radius: 18px;
}

.sa-find-card__desc {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	margin-top: 8px;
	font-size: 14px;
	line-height: 20px;
	color: #5E6678;
}

.sa-find-card__foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin-top: auto;
	padding-top: 20px;
}
.sa-find-card__date {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 12px;
	line-height: 16px;
	color: #5E6678;
}
.sa-find-card__more {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	color: #AA1824;
}

.sa-find__empty {
	grid-column: 1 / -1;
	padding: 48px 24px;
	border: 1px dashed var(--sa-border);
	border-radius: 18px;
	font-size: 15px;
	line-height: 24px;
	text-align: center;
	color: var(--sa-text);
}

.sa-find__foot {
	display: flex;
	justify-content: center;
	padding-top: 8px;
	margin-top: 32px;
}
.sa-find__more { min-width: 294px; border: 1px solid rgba(255, 255, 255, .12); }
.sa-find__more[hidden] { display: none; }
.sa-find__more[disabled] { opacity: .6; cursor: default; transform: none; }

/* --------------------------------------------------------------- List view */

/* The same cards laid on their side: the picture becomes a fixed-width panel
   and the body spreads out beside it. */
.sa-find__grid.is-list { grid-template-columns: minmax(0, 1fr); gap: 12px; }
.sa-find__grid.is-list .sa-find-card { flex-direction: row; }
.sa-find__grid.is-list .sa-find-card__media { flex: none; width: 260px; height: auto; min-height: 148px; }
.sa-find__grid.is-list .sa-find-card__body { padding: 20px 24px; }
.sa-find__grid.is-list .sa-find-card__title a { -webkit-line-clamp: 1; }
.sa-find__grid.is-list .sa-find-card__desc { -webkit-line-clamp: 2; max-width: 80ch; }
.sa-find__grid.is-list .sa-find-card__foot { padding-top: 14px; }

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

@media (max-width: 1280px) {
	.sa-fhero { min-height: 0; padding-block: 130px 96px; }
	.sa-fhero__title { font-size: 48px; line-height: 54px; }
	.sa-find__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
	.sa-fhero { padding-block: 110px 84px; }
	.sa-fhero__bg { inset: 0 0 0 30%; }
	.sa-fhero__title { font-size: 42px; line-height: 48px; }
	.sa-fhero__lead { font-size: 18px; line-height: 28px; }

	.sa-fsearch__row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sa-fsearch__field--text { grid-column: 1 / -1; }
	.sa-fsearch__go { grid-column: 1 / -1; }

	.sa-find__title { font-size: 36px; line-height: 42px; }
	.sa-find__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }

	/* A tablet is a touch device: the layout toggle needs a thumb's worth. */
	.sa-find__view { padding: 12px; }
	.sa-find__sort select { height: 44px; }
}

@media (max-width: 760px) {
	.sa-fhero { padding-block: 92px 64px; }
	/* The photograph stops carrying the hero on a phone: it sits behind the
	   whole width at low contrast so the copy stays readable. */
	.sa-fhero__bg { inset: 0; opacity: .5; }
	.sa-fhero__fade { background: linear-gradient(0deg, #FAF8F5 10%, rgba(250, 248, 245, .75) 60%, rgba(250, 248, 245, .6) 100%); }
	.sa-fhero__swoosh { height: 120px; }

	.sa-fhero__title { font-size: 34px; line-height: 38px; }
	.sa-fhero__lead { font-size: 16px; line-height: 26px; }
	.sa-fhero__points { gap: 8px 16px; }

	.sa-fsearch { margin-top: 28px; padding: 14px 10px 10px; }
	.sa-fsearch__row { grid-template-columns: minmax(0, 1fr); }
	.sa-fsearch__go { height: 48px; }

	.sa-find { padding-block: 24px 48px; }
	.sa-find__title { font-size: 28px; line-height: 34px; }
	.sa-find__bar { gap: 12px; margin-top: 28px; }
	.sa-find__tools { width: 100%; justify-content: space-between; }
	.sa-find__sort select { width: 100%; max-width: 240px; height: 44px; }
	.sa-find__view { padding: 10px; }

	.sa-find__grid { grid-template-columns: minmax(0, 1fr); gap: 16px; margin-top: 24px; }
	.sa-find__more { min-width: 0; width: 100%; }

	/* Side-by-side cards do not survive a phone; the list view falls back to
	   the stacked one rather than squeezing a 260px panel in. */
	.sa-find__grid.is-list .sa-find-card { flex-direction: column; }
	.sa-find__grid.is-list .sa-find-card__media { width: auto; height: 156px; min-height: 0; }
	.sa-find__grid.is-list .sa-find-card__body { padding: 20px; }
	.sa-find__grid.is-list .sa-find-card__title a { -webkit-line-clamp: 2; }
}

@media (prefers-reduced-motion: reduce) {
	.sa-find-card,
	.sa-find-card__media img,
	.sa-find__grid,
	.sa-fsearch__go { transition: none; }
	.sa-find-card:hover { transform: none; }
	.sa-find-card:hover .sa-find-card__media img { transform: none; }
}

@media (hover: none) {
	.sa-find-card:hover { transform: none; }
	.sa-fsearch__go:hover { transform: none; }
}

/* ==========================================================================
   About us (Figma "About us" 1:991)
   --------------------------------------------------------------------------
   Seven blocks live here. The packages carousel, the booking panel, the
   header and the footer are shared components and are styled elsewhere.
   ========================================================================== */

/* The two fixed bands the hero shares the first screenful with: the sticky
   header above it and the navy "our scholars study in" strip below. The strip
   is its 20px padding twice over a 25px flag row. Both are measured, and the
   hero subtracts them, so changing either one carries through on its own. */
.sa-about-page {
	--sa-header-h: 132px;
	--sa-strip-h: 65px;
}

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

/* The design's hero is an 1440 x 832 band with the navy strip below it, so
   every length here is the Figma value over 1440 and the whole block scales
   from that one ratio. */
.sa-abhero {
	position: relative;
	overflow: hidden;
	/* The photograph's panel. Everything that has to sit on the picture is
	   measured from this, so the cards travel with it instead of drifting onto
	   the cream once the panel stops growing. */
	--sa-panel: min(54.028%, 778px);
	/* One unit is 1% of the design's 1440 frame, taken from whichever screen
	   dimension is the binding one. Every vertical length in this hero was a
	   share of 1440 already, so they all read the unit instead and scale as one
	   block.

	   The design's hero is 832 tall with the 132 header above it and the 65
	   navy flag strip below, so its natural screen is 1440 x 1029. On that
	   shape - and on any screen that is wide for its height, 1920x1080
	   included - the width term wins and these are the untouched Figma values.
	   On a shorter laptop the height term wins, the hero scales down whole, and
	   the strip's foot stays on the fold instead of hanging below it: the same
	   thing the home hero does with its logo strip, which this follows. */
	--u: min(1vw, calc((100vh - var(--sa-header-h) - var(--sa-strip-h)) / 57.778));
	min-height: min(832px, calc(57.778 * var(--u)));
	padding-block: clamp(72px, calc(12.917 * var(--u)), 186px) clamp(32px, calc(5.278 * var(--u)), 76px);
	background: var(--sa-cream);
}

/* The photograph holds the right 54% and a cream gradient carries it out from
   under the copy.

   The Figma frame carries a 224px bottom-left radius, but its clip-content is
   off - the exported photograph runs square to the floor and the sweeps are
   what shape that corner. Honouring the radius here cut a large cream bite out
   of the picture that the design does not have, so it is deliberately absent. */
/* The artwork is the design's finished 778 x 897 panel, with its left fade and
   its 224px bottom-left corner already in the pixels. object-fit: cover was
   scaling it to whatever width the panel happened to be - 1.25x and 290px of
   crop on an 1800 screen - which blew the people up and ate the corner. So the
   panel never grows past the artwork's own width and the picture is never
   scaled up: beyond 1440 it simply sits against the right edge, where its own
   cream fade meets the cream page and the join does not show. */
.sa-abhero__bg {
	position: absolute;
	top: 0;
	bottom: 0;
	right: 0;
	left: auto;
	z-index: 0;
	width: var(--sa-panel);
}
.sa-abhero__bg img {
	display: block;
	width: 100%;
	height: auto;
	/* Pinned to the top: the strip the design tucks behind the country bar is
	   what runs past the floor of the hero. */
	object-fit: contain;
	object-position: right top;
}
/* The cream fade is already in the artwork, so only the navy floor the design
   lays over the foot of the picture is drawn here. */
.sa-abhero__fade {
	position: absolute;
	inset: 0;
	background: linear-gradient(0deg, rgba(17, 36, 79, .5) 0%, rgba(17, 36, 79, 0) 50%, rgba(17, 36, 79, 0) 100%);
}

.sa-abhero__swoosh {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
	/* The design's band is 160 tall on a 1440 frame. As strokes it had to keep
	   growing past that or the curve flattened, but as filled wedges the extra
	   height turns straight into navy, so it stops at the design value. */
	height: clamp(120px, 11.111vw, 160px);
	overflow: visible;
	pointer-events: none;
}

.sa-abhero__inner {
	position: relative;
	z-index: 2;
	/* The design sets the copy 72px in; the shared 1328px container plus its
	   24px gutter puts it at 80. Sixteen more pixels of box lands it on the
	   design mark without touching .sa-container anywhere else. */
	max-width: 1344px;
}
.sa-abhero__copy { max-width: 584px; }

.sa-abhero__title {
	font-size: clamp(30px, calc(3.889 * var(--u)), 56px);
	line-height: 1.0714;
	font-weight: 500;
	font-stretch: 125%;
	letter-spacing: .5px;
	color: #002768;
	overflow-wrap: break-word;
}
.sa-abhero__title .sa-accent { color: var(--sa-red); }

.sa-abhero__lead {
	max-width: 567px;
	margin-top: clamp(8px, calc(1.111 * var(--u)), 16px);
	font-size: clamp(14px, calc(1.25 * var(--u)), 18px);
	line-height: 1.4444;
	color: #556171;
}
.sa-abhero__lead--two { margin-top: clamp(8px, calc(1.111 * var(--u)), 16px); }

.sa-abhero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 23px;
	margin-top: clamp(12px, calc(1.667 * var(--u)), 24px);
}
.sa-abhero__actions .sa-btn {
	height: clamp(44px, calc(3.889 * var(--u)), 56px);
	padding: 10px 14px 10px 16px;
	gap: 2px;
	border-radius: 12px;
	font-size: 18px;
	line-height: 20px;
	letter-spacing: -.006em;
}
.sa-abhero__actions .sa-btn--primary { min-width: 224px; }
.sa-abhero__actions .sa-btn__arrow { width: 24px; height: 24px; opacity: .64; }

.sa-abhero__watch {
	min-width: 242px;
	gap: 4px;
	padding: 10px 14px;
	border: 1px solid #002C54;
	background: transparent;
	font-weight: 700;
	color: #002C54;
	box-shadow: none;
}
.sa-abhero__watch svg { flex: none; }
.sa-abhero__watch:hover { background: rgba(0, 44, 84, .06); }

.sa-abhero__proof {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: clamp(12px, calc(1.667 * var(--u)), 24px);
	padding-top: clamp(8px, calc(1.111 * var(--u)), 16px);
}

/* Overlapping discs, each lifted over the one before it, closed by the count. */
.sa-abhero__faces { display: flex; }
.sa-abhero__faces > span {
	width: clamp(32px, calc(2.778 * var(--u)), 40px);
	height: clamp(32px, calc(2.778 * var(--u)), 40px);
	margin-right: -12px;
	border: 2px solid var(--sa-cream);
	border-radius: 9999px;
	overflow: hidden;
	background: var(--sa-blue-light);
}
.sa-abhero__faces > span:last-child { margin-right: 0; }
.sa-abhero__faces img { width: 100%; height: 100%; object-fit: cover; }
/* The count disc is navy in the design. .sa-abhero__more sets that colour
   further down, but one class cannot beat the two above it, so the pale blue
   that stands in behind a photograph while it loads was winning and the disc
   was coming out light blue with near-invisible text. */
.sa-abhero__faces > .sa-abhero__more { background: #11244F; }
.sa-abhero__more {
	display: grid;
	place-items: center;
	flex: none;
	background: #11244F;
	font-family: var(--sa-font-display);
	font-size: 10px;
	line-height: 15px;
	color: var(--sa-cream);
}

.sa-abhero__stars {
	display: flex;
	align-items: center;
	gap: 2px;
	color: #F59E0B;
}
.sa-abhero__stars strong {
	margin-left: 4px;
	font-family: var(--sa-font-display);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	color: #101F41;
}
.sa-abhero__from {
	font-family: var(--sa-font-body);
	font-size: 12px;
	line-height: 16px;
	color: #5C657A;
}

/* ---------------------------------------------------- The cards on the photo */

/* The design parks both cards in a 584 x 570 box whose top-left is (744, 120)
   on the 1440 frame, so the box is placed as a share of the section and the
   cards keep their own corners inside it. */
.sa-abhero__cards {
	position: absolute;
	/* Measured off the photograph's panel rather than the viewport: 112 in
	   from its right edge and 584 wide on the design's 778, so the pair stays
	   on the picture once the panel stops growing. */
	left: auto;
	right: calc(var(--sa-panel) * 0.14396);
	width: calc(var(--sa-panel) * 0.75064);
	/* Clamped, not raw vw: the hero stops growing at 832 but the sweep does
	   not, so an unclamped box kept sliding the webinar card down until it
	   landed on the wedge - 34px into it at 2560. */
	top: clamp(56px, calc(8.333 * var(--u)), 120px);
	z-index: 2;
	height: clamp(300px, calc(39.583 * var(--u)), 570px);
	pointer-events: none;
}

/* The two cards drift, slowly and out of step with each other, so the hero has
   a little life without anything appearing to move on purpose. Opposite
   directions and uneven periods (3.6s against 4.7s) keep them from ever settling
   into a shared rhythm. */
@keyframes sa-float-a {
	0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
	50%  { transform: translate3d(-6px, -16px, 0) rotate(-.6deg); }
	100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}
/* This one rises rather than sinks: the webinar card sits closest to the red
   sweep, and on a 2560 screen a downward drift closed that gap to 15px. */
@keyframes sa-float-b {
	0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
	50%  { transform: translate3d(5px, -14px, 0) rotate(.5deg); }
	100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

.sa-abhero__win {
	position: absolute;
	top: 32px;
	right: 0;
	animation: sa-float-a 3.6s ease-in-out infinite;
	will-change: transform;
	display: flex;
	flex-direction: column;
	gap: 12px;
	width: 256px;
	padding: 16px;
	border: 1px solid rgba(230, 225, 219, .6);
	border-radius: 18px;
	background: rgba(255, 255, 255, .95);
	backdrop-filter: blur(4px);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}
.sa-abhero__win-row {
	display: flex;
	align-items: center;
	gap: 12px;
}
.sa-abhero__win-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 37px;
	height: 40px;
	border-radius: 14px;
	background: #FAEBEC;
	color: #A91928;
}
.sa-abhero__win-body { display: flex; flex-direction: column; min-width: 0; flex: 1 1 auto; }
/* Both lines stay on one line - the design sizes the card for exactly that,
   and a wrap pushes it 12px past its 92px. The detail line only fits because
   the design sets it in Roboto; in Inter the same string runs 149px against
   137px of column and had to be clipped. */
.sa-abhero__win-body strong,
.sa-abhero__win-body span {
	white-space: nowrap;
}
.sa-abhero__win-body strong {
	font-family: var(--sa-font-display);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	color: #101F41;
}
.sa-abhero__win-body span {
	font-family: var(--sa-font-body);
	font-size: 12px;
	line-height: 16px;
	color: #5C657A;
}
.sa-abhero__win-flag { flex: none; }
.sa-abhero__win-flag .sa-mflag { width: 24px; height: 16px; border-radius: 6px; }

/* The progress rail that closes the card. */
.sa-abhero__win-bar {
	display: block;
	height: 6px;
	border-radius: 9999px;
	background: #F3F1EC;
	overflow: hidden;
}
.sa-abhero__win-bar span {
	display: block;
	width: 100%;
	height: 100%;
	border-radius: 9999px;
	background: #A91928;
}

.sa-abhero__webinar {
	position: absolute;
	left: 40px;
	bottom: 0;
	animation: sa-float-b 4.7s ease-in-out infinite;
	animation-delay: -1.3s;
	will-change: transform;
	display: flex;
	flex-direction: column;
	gap: 8px;
	width: 240px;
	padding: 16px;
	border-radius: 18px;
	background: #11244F;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}
.sa-abhero__webinar-label {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--sa-font-body);
	font-size: 12px;
	line-height: 16px;
	color: rgba(252, 250, 248, .7);
}
.sa-abhero__webinar-label svg { flex: none; color: #FDA4AF; }
.sa-abhero__webinar strong {
	font-family: var(--sa-font-display);
	font-size: 14px;
	font-weight: 400;
	line-height: 19px;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: var(--sa-cream);
}
.sa-abhero__when {
	font-family: var(--sa-font-body);
	font-size: 12px;
	line-height: 16px;
	color: rgba(252, 250, 248, .6);
}

/* ------------------------------------------- "Our scholars study in" strip */

.sa-studyin { background: #11244F; }
.sa-studyin__row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 12px 16px;
	padding: 20px 32px;
}
.sa-studyin__label {
	flex: none;
	font-family: var(--sa-font-ui);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: rgba(252, 250, 248, .6);
}
.sa-studyin__flags {
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}
/* Each country is a pill with a circular flag, not a bare swatch. */
.sa-studyin__flags li {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	min-height: 25px;
	padding: 4px 10px 4px 4px;
	border-radius: 9999px;
	background: rgba(252, 250, 248, .05);
	box-shadow: 0 0 0 1px rgba(252, 250, 248, .1);
	font-family: var(--sa-font-display);
	font-size: 11px;
	font-weight: 400;
	line-height: 16px;
	color: rgba(252, 250, 248, .8);
}
.sa-studyin__flags .sa-cflag {
	flex: none;
	width: 16px;
	height: 16px;
	border-radius: 9999px;
	overflow: hidden;
}

/* ---------------------------------------------------------- The figures bar */

.sa-afacts { padding-block: 28px 0; background: var(--sa-cream); }
.sa-afacts__box {
	display: grid;
	/* Four equal columns left a wide blank after the last figure, because each
	   label is far shorter than its quarter. The design spreads them instead:
	   the first sits on the left corner and the last on the right. */
	grid-template-columns: repeat(4, max-content);
	justify-content: space-between;
	gap: 24px;
	padding: 28px 40px;
	border: 1px solid var(--sa-border-light);
	border-radius: 16px;
	background: #fff;
	box-shadow: 0 10px 30px -18px rgba(14, 33, 78, .3);
}
.sa-afact__value {
	font-size: 34px;
	line-height: 42px;
	letter-spacing: .01em;
	color: var(--sa-navy);
}
.sa-afact__sym { color: var(--sa-red); }
.sa-afact__label {
	margin-top: 2px;
	font-family: var(--sa-font-ui);
	font-size: 13px;
	line-height: 18px;
	color: var(--sa-text);
}

/* --------------------------------------------------------------- Welcome */

.sa-welcome { background: var(--sa-cream); }
.sa-welcome__grid {
	display: grid;
	grid-template-columns: minmax(0, 560fr) minmax(0, 640fr);
	gap: 56px;
	align-items: start;
}

.sa-welcome__media {
	position: relative;
	border-radius: 20px;
	/* The artwork carries its own rounded corners on transparency, so a panel
	   colour behind it would show through them as four light wedges. */
	background: transparent;
}
/* The artwork is the design's finished 576 x 539 panel. A fixed height with
   object-fit: cover was cropping 104px off it, so it keeps its own ratio. */
.sa-welcome__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 20px;
}

.sa-welcome__where {
	position: absolute;
	top: 14px;
	left: 14px;
	display: inline-flex;
	align-items: center;
	gap: 5px;
	padding: 5px 10px;
	border-radius: var(--sa-r-pill);
	background: rgba(255, 255, 255, .92);
	font-family: var(--sa-font-ui);
	font-size: 11px;
	font-weight: 500;
	line-height: 14px;
	color: var(--sa-navy);
}

/* Hangs off the bottom-right corner of the picture, as in the design. */
.sa-welcome__badge {
	position: absolute;
	right: -10px;
	bottom: -26px;
	width: 232px;
	padding: 18px 20px;
	border-radius: 14px;
	background: var(--sa-red);
	box-shadow: 0 18px 32px -16px rgba(175, 29, 43, .6);
	color: #fff;
}
.sa-welcome__badge-value { font-size: 30px; line-height: 34px; }
.sa-welcome__badge p {
	margin-top: 4px;
	font-family: var(--sa-font-ui);
	font-size: 11px;
	line-height: 15px;
	color: rgba(255, 255, 255, .85);
}

.sa-welcome__title {
	font-size: 32px;
	line-height: 40px;
	letter-spacing: .5px;
	color: var(--sa-navy);
}
.sa-welcome__title .sa-accent { color: var(--sa-red); }

.sa-welcome__copy > p {
	margin-top: 16px;
	font-size: 14px;
	line-height: 23px;
	color: var(--sa-text);
}

/* Two columns of dated entries, each hung off a red rule. */
.sa-welcome__time {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px 32px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}
.sa-welcome__time li {
	padding-left: 14px;
	border-left: 2px solid var(--sa-red);
}
.sa-welcome__year {
	font-family: var(--sa-font-body);
	font-size: 13px;
	font-weight: 700;
	line-height: 18px;
	color: var(--sa-red);
}
.sa-welcome__time h3 {
	margin-top: 2px;
	font-family: var(--sa-font-body);
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	color: var(--sa-navy);
}
.sa-welcome__time p {
	margin-top: 4px;
	font-family: var(--sa-font-ui);
	font-size: 11px;
	line-height: 16px;
	color: var(--sa-text);
}

/* ------------------------------------------------------- What we stand for */

.sa-values {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-top: 64px;
}

.sa-value {
	display: flex;
	flex-direction: column;
	min-height: 168px;
	padding: 18px 20px 20px;
	border: 1px solid var(--sa-border);
	border-radius: 14px;
	background: #fff;
	transition: transform .25s ease, box-shadow .25s ease, background-color .25s ease, border-color .25s ease;
}
.sa-value:hover {
	transform: translateY(-3px);
	box-shadow: 0 16px 28px -16px rgba(14, 33, 78, .25);
}
.sa-value__icon,
.sa-value__num,
.sa-value__title,
.sa-value__text { transition: background-color .25s ease, color .25s ease; }

.sa-value__top {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 12px;
}
.sa-value__icon {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	border-radius: 11px;
	background: var(--sa-navy);
	color: #fff;
}
.sa-value__num {
	font-family: var(--sa-font-num);
	font-size: 28px;
	font-weight: 600;
	line-height: 1;
	color: rgba(94, 103, 120, .18);
}

.sa-value__title {
	margin-top: 16px;
	font-family: var(--sa-font-display);
	font-size: 14px;
	font-weight: 700;
	line-height: 20px;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: var(--sa-navy);
}
.sa-value__text {
	margin-top: 8px;
	font-family: var(--sa-font-ui);
	font-size: 12px;
	line-height: 18px;
	color: var(--sa-text);
}

/* The navy card with the red chip is purely a hover state - no card carries it
   at rest, so nothing looks stuck on. */
.sa-value:hover {
	border-color: var(--sa-navy);
	background: var(--sa-navy);
}
.sa-value:hover .sa-value__icon { background: var(--sa-red); }
.sa-value:hover .sa-value__num { color: rgba(255, 255, 255, .18); }
.sa-value:hover .sa-value__title { color: #fff; }
.sa-value:hover .sa-value__text { color: rgba(255, 255, 255, .78); }

/* --------------------------------------------------------------- Founder */

/* Figma frame: a 1280 container, 56px under the heading block, then a
   1216 x 615 card with a 32px radius. The portrait holds 528.3 of that width
   and the copy column starts at 569.3. */
.sa-founder { background: #F4F5F9; }

.sa-founder__eyebrow {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-family: var(--sa-font-ui);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: #A91928;
}
.sa-founder__eyebrow span {
	width: 24px;
	height: 1px;
	background: #A91928;
}

.sa-founder__title {
	margin-top: 16px;
	font-size: 36px;
	line-height: 40px;
	font-weight: 500;
	font-stretch: 125%;
	letter-spacing: .36px;
	text-align: center;
	color: #101F41;
}

.sa-founder__card {
	display: grid;
	/* 528.3 : 686.7 of the 1216 card. */
	grid-template-columns: minmax(0, 5283fr) minmax(0, 6867fr);
	gap: 0;
	/* The design's container is 1280 with 32px of side padding, so the card is
	   1216 - 32px narrower on each side than the shared container gives. */
	max-width: 1216px;
	margin-inline: auto;
	margin-top: 56px;
	overflow: hidden;
	border: 1px solid #E6E1DB;
	border-radius: 32px;
	background: #fff;
	box-shadow: 0 24px 50px -26px rgba(14, 33, 78, .35);
}

.sa-founder__media {
	position: relative;
	min-height: 380px;
	background: #11244F;
}
/* 288px disc, 80px outside the panel's bottom-left corner, behind the photo. */
.sa-founder__disc {
	position: absolute;
	left: -80px;
	bottom: -80px;
	z-index: 0;
	width: 288px;
	height: 288px;
	border-radius: 9999px;
	background: rgba(169, 25, 40, .8);
}
.sa-founder__media img {
	position: relative;
	z-index: 1;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}
.sa-founder__veil {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	height: 160px;
	background: linear-gradient(0deg, #11244F 0%, rgba(17, 36, 79, .7) 50%, rgba(17, 36, 79, 0) 100%);
}
.sa-founder__who {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 3;
	padding: 80px 24px 24px;
}
.sa-founder__who h3 {
	font-size: 24px;
	line-height: 32px;
	font-weight: 600;
	font-stretch: 125%;
	letter-spacing: .24px;
	text-transform: uppercase;
	color: #FCFAF8;
}
.sa-founder__who p {
	margin-top: 4px;
	font-family: var(--sa-font-ui);
	font-size: 14px;
	line-height: 20px;
	color: rgba(252, 250, 248, .75);
}

.sa-founder__body { padding: 46px 48px 36px 40px; }
.sa-founder__mark { display: block; width: 40px; height: 40px; color: rgba(169, 25, 40, .3); }
.sa-founder__mark svg { width: 40px; height: 40px; }

.sa-founder__quote {
	margin: 14px 0 0;
	font-size: 20px;
	line-height: 28px;
	font-weight: 400;
	letter-spacing: .2px;
	text-transform: none;
	color: #101F41;
}
.sa-founder__para {
	margin-top: 16px;
	font-family: var(--sa-font-body);
	font-size: 16px;
	line-height: 24px;
	color: #5C657A;
}

/* Three equal filled pills, two lines of label each. */
.sa-founder__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}
.sa-founder__badges li {
	display: flex;
	flex: 1 1 160px;
	align-items: center;
	gap: 8px;
	min-height: 56px;
	padding: 12px;
	border: 0;
	border-radius: 14px;
	background: rgba(234, 238, 245, .7);
	font-family: var(--sa-font-body);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	color: #122349;
}
.sa-founder__badges svg { flex: none; color: #A91928; }

.sa-founder__connect {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 12px;
	margin-top: 20px;
	padding-top: 24px;
	border-top: 1px solid #E6E1DB;
}
.sa-founder__connect > span {
	font-family: var(--sa-font-display);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: #5C657A;
}
.sa-founder__social {
	display: grid;
	place-items: center;
	width: 36px;
	height: 36px;
	border: 1px solid #E6E1DB;
	border-radius: 9999px;
	background: transparent;
	color: #AF1D2B;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
/* The fill is a hover state only - none of them sits filled at rest. */
.sa-founder__social:hover { background: #112249; border-color: #112249; color: #fff; }

/* ------------------------------------------------------------------ Team */

/* Figma frame: a #11244F band with 112px/80px padding, a 1280 container, and
   a five-up grid of 227.2 x 302.92 cards with 20px gutters. */
.sa-team {
	position: relative;
	overflow: hidden;
	padding-block: 112px;
	background: #11244F;
}
/* The blurred red bloom off the top-right corner. */
.sa-team::after {
	content: '';
	position: absolute;
	right: -128px;
	top: -128px;
	width: 384px;
	height: 384px;
	border-radius: 9999px;
	background: rgba(169, 25, 40, .25);
	filter: blur(32px);
	pointer-events: none;
}

/* The word sits behind everything at the top, barely there. */
.sa-team__mark {
	position: absolute;
	top: 24px;
	left: 0;
	right: 0;
	font-family: var(--sa-font-display);
	font-size: clamp(96px, 16vw, 230px);
	font-weight: 900;
	font-stretch: 125%;
	line-height: 1;
	letter-spacing: .01em;
	text-align: center;
	text-transform: uppercase;
	white-space: nowrap;
	color: rgba(252, 250, 248, .03);
	pointer-events: none;
	user-select: none;
}

/* The design insets the head and the grid 32px inside the 1280 container, so
   the five cards come out at the design's 227.2 x 302.92. */
.sa-team__head,
.sa-team__grid {
	max-width: 1216px;
	margin-inline: auto;
}

.sa-team__head {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 24px;
	padding-top: 64px;
}

.sa-team__title {
	font-size: 48px;
	line-height: 56px;
	font-weight: 400;
	letter-spacing: .48px;
	text-transform: uppercase;
	color: #FCFAF8;
}
.sa-team__title .sa-accent { color: var(--sa-red-bright); }
.sa-team__sub {
	max-width: 534px;
	margin-top: 16px;
	padding-top: 4px;
	font-family: var(--sa-font-body);
	font-size: 16px;
	line-height: 26px;
	color: rgba(252, 250, 248, .7);
}

.sa-team__nums {
	display: flex;
	align-items: center;
	gap: 24px;
}
.sa-team__num {
	font-size: 30px;
	line-height: 36px;
	font-weight: 400;
	letter-spacing: .3px;
	color: #FCFAF8;
}
.sa-team__num-label {
	font-family: var(--sa-font-body);
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: rgba(252, 250, 248, .6);
}
/* The hairline between the two figures. */
.sa-team__rule {
	width: 1px;
	height: 40px;
	background: rgba(252, 250, 248, .15);
}
/* Overlapping discs, like the hero's faces. */
.sa-team__flags { display: flex; }
.sa-team__flags .sa-cflag {
	flex: none;
	width: 28px;
	height: 28px;
	margin-right: -12px;
	border: 2px solid rgba(255, 255, 255, .1);
	border-radius: 9999px;
	overflow: hidden;
	background: #11244F;
}
.sa-team__flags .sa-cflag:last-child { margin-right: 0; }

.sa-team__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	grid-auto-rows: 1fr;
	gap: 20px;
	margin-top: 56px;
}

/* The photograph is the card - it fills the whole tile and the copy sits on
   top of it, rather than sitting in a panel under a cropped picture. */
.sa-person {
	position: relative;
	display: block;
	aspect-ratio: 227.2 / 302.92;
	overflow: hidden;
	border-radius: 28px;
	background: #11244F;
	box-shadow:
		0 0 0 1px rgba(252, 250, 248, .1),
		0 10px 15px -3px rgba(0, 0, 0, .1),
		0 4px 6px -4px rgba(0, 0, 0, .1);
}

/* ------------------------------------------------- The card flips on hover */

/* Two faces on a turning plane. The front is the tile as it always was; the
   back is the same photograph read through a heavier wash, with the bio, the
   institutions and the LinkedIn mark on it (Figma "Our team card overlay").

   The radius, the fill and the shadow move off the article and onto each face.
   They have to: overflow: hidden on the article flattens the 3D space in
   Safari and the back face comes through the front as a mirror image. The
   article keeps only the box the two faces turn inside. */
.sa-person__flip {
	position: absolute;
	inset: 0;
}
.sa-person--flip {
	overflow: visible;
	background: none;
	box-shadow: none;
	/* Shallow enough that the turn reads as a card and not a door swinging
	   towards you - the tiles are only ~250px wide. */
	perspective: 1400px;
}
.sa-person--flip .sa-person__flip {
	transform-style: preserve-3d;
	transition: transform .72s cubic-bezier(.22, .61, .36, 1);
}
.sa-person--flip:hover .sa-person__flip,
.sa-person--flip:focus-within .sa-person__flip,
.sa-person--flip.is-flipped .sa-person__flip { transform: rotateY(180deg); }

.sa-person__face {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.sa-person--flip .sa-person__face {
	border-radius: 28px;
	background: #11244F;
	box-shadow:
		0 0 0 1px rgba(252, 250, 248, .1),
		0 10px 15px -3px rgba(0, 0, 0, .1),
		0 4px 6px -4px rgba(0, 0, 0, .1);
	backface-visibility: hidden;
	-webkit-backface-visibility: hidden;
}
.sa-person--flip .sa-person__face--back { transform: rotateY(180deg); }

/* The back is unreachable until it faces the viewer, so a stray hover on the
   turned-away side cannot take a click meant for the card underneath. */
.sa-person--flip .sa-person__face--back { pointer-events: none; }
.sa-person--flip:hover .sa-person__face--back,
.sa-person--flip:focus-within .sa-person__face--back,
.sa-person--flip.is-flipped .sa-person__face--back { pointer-events: auto; }

/* Someone who has asked for less movement still gets the back of the card -
   it carries the bio, which is content - but it arrives rather than turns. */
@media (prefers-reduced-motion: reduce) {
	.sa-person--flip .sa-person__flip { transition: none; }
}

.sa-person__photo {
	position: absolute;
	inset: 0;
	overflow: hidden;
}
.sa-person__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.sa-person:hover .sa-person__photo img { transform: scale(1.05); }
/* The flip is the hover now; a picture creeping outwards underneath it only
   makes the turn look unsteady. */
.sa-person--flip:hover .sa-person__photo img { transform: none; }

.sa-person__monogram {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	font-family: var(--sa-font-display);
	font-size: 34px;
	font-weight: 700;
	color: rgba(255, 255, 255, .35);
}

/* The design starts the wash 142px down a 303px card - 47%. */
.sa-person__veil {
	position: absolute;
	left: 0;
	right: 0;
	top: 47%;
	bottom: 0;
	background: linear-gradient(0deg, #11244F 0%, rgba(17, 36, 79, .3) 50%, rgba(17, 36, 79, 0) 100%);
}

.sa-person__tag {
	position: absolute;
	top: 16px;
	left: 16px;
	z-index: 2;
	padding: 4px 10px;
	border-radius: 9999px;
	font-family: var(--sa-font-ui);
	font-size: 10px;
	font-weight: 700;
	line-height: 15px;
	letter-spacing: .5px;
	text-transform: uppercase;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px -1px rgba(0, 0, 0, .1);
}
.sa-person__tag--leadership { background: #A91928; color: #FFFFFF; }
.sa-person__tag--advisory { background: #FCFAF8; color: #11244F; }
.sa-person__tag--community { background: #FBBF24; color: #11244F; }

/* The back carries the same wash over the whole tile rather than the lower
   half: the design runs a tall gradient rectangle past the top of the card so
   that it is solid navy at the foot and a little over half strength at the
   head, which is what makes four lines of bio legible over a photograph
   without hiding the person behind it. */
.sa-person__veil--back {
	top: 0;
	background: linear-gradient(0deg, #11244F 0%, rgba(17, 36, 79, .86) 38%, rgba(17, 36, 79, .58) 100%);
}

/* The mark sits opposite the group pill. The design draws it as a bare 20x21
   outline, so the padding here is hit area rather than anything you can see -
   20px of icon is below the 24px a finger can reliably land on. */
.sa-person__in {
	position: absolute;
	top: 8px;
	right: 10px;
	z-index: 3;
	display: grid;
	place-items: center;
	padding: 8px;
	color: #FCFAF8;
	transition: opacity .2s ease, transform .2s ease;
}
.sa-person__in:hover { opacity: .75; transform: translateY(-1px); }
.sa-person__in:focus-visible { outline: 2px solid #FCFAF8; outline-offset: 2px; border-radius: 8px; }

/* Where they studied, at the height the design parks them - just under the
   pill and clear of the bio. The pair is capped rather than placed one by one:
   the logos arrive at eight different aspect ratios and the design's own
   sizes are simply each mark at its natural scale, so one box that fits any
   of them keeps the row even without a rule per institution. */
.sa-person__logos {
	position: absolute;
	left: 20px;
	right: 20px;
	top: 19%;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: 14px;
}
.sa-person__logo {
	width: auto;
	height: auto;
	max-width: 72px;
	max-height: 56px;
	object-fit: contain;
}

.sa-person__body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 2;
	margin-top: 0;
	padding: 20px;
}
.sa-person__name {
	font-size: 16px;
	line-height: 20px;
	font-weight: 600;
	font-stretch: 125%;
	letter-spacing: .16px;
	text-transform: uppercase;
	color: #FCFAF8;
}
.sa-person__role {
	margin-top: 4px;
	font-family: var(--sa-font-ui);
	font-size: 12px;
	font-weight: 500;
	line-height: 16px;
	color: #FDA4AF;
}

/* The design sets the bio immediately above the name, so it rides in the same
   block and the two stay a fixed distance apart however many lines it runs to. */
.sa-person__bio {
	margin-bottom: 12px;
	font-family: var(--sa-font-ui);
	font-size: 12px;
	line-height: 16px;
	letter-spacing: -.14px;
	color: #FFFFFF;
}

/* The invitation that closes the grid. */
.sa-person--join {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	padding: 24px;
	background: #A91928;
}
/* A thick ring and a smaller disc off the right edge. */
.sa-person--join::before,
.sa-person--join::after {
	content: '';
	position: absolute;
	border-radius: 9999px;
	pointer-events: none;
}
.sa-person--join::before {
	right: -64px;
	bottom: -64px;
	width: 192px;
	height: 192px;
	border: 30px solid rgba(255, 255, 255, .15);
}
.sa-person--join::after {
	right: -24px;
	top: 40px;
	width: 80px;
	height: 80px;
	background: rgba(255, 255, 255, .1);
}
.sa-person__join-icon {
	position: relative;
	z-index: 2;
	display: grid;
	place-items: center;
	flex: none;
	width: 48px;
	height: 48px;
	border-radius: 18px;
	background: rgba(255, 255, 255, .15);
	color: #fff;
}
.sa-person--join h3 {
	position: relative;
	z-index: 2;
	margin-top: 0;
	font-size: 24px;
	line-height: 30px;
	font-weight: 400;
	letter-spacing: .24px;
	text-transform: uppercase;
	color: #fff;
}
.sa-person--join p {
	position: relative;
	z-index: 2;
	margin-top: 11px;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 23px;
	color: rgba(255, 255, 255, .85);
}
.sa-person__join {
	position: relative;
	z-index: 2;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	align-self: flex-start;
	margin-top: 13px;
	padding: 10px 20px;
	border-radius: 9999px;
	background: #FCFAF8;
	font-family: var(--sa-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: #A91928;
	transition: transform .15s ease;
}
.sa-person__join:hover { transform: translateX(2px); }

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

@media (max-width: 1280px) {
	.sa-abhero__title { font-size: 38px; line-height: 46px; }
	.sa-team__grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
	.sa-team__mark { font-size: 110px; }
	.sa-founder__card { grid-template-columns: minmax(0, 280fr) minmax(0, 720fr); }
	.sa-founder__body { padding: 30px 32px; }
}

@media (max-width: 1024px) {
	/* Below the design's own frame the two cards stop being able to sit on
	   their Figma coordinates without landing on the copy, so they come out of
	   the photograph and run as a row under it. */
	.sa-abhero { min-height: 0; padding-block: 110px 110px; }
	/* Below the design's frame the panel goes back to filling whatever is left
	   of the row, and the picture covers it again - the artwork's own 778 is
	   no longer the right size for it. */
	.sa-abhero__bg { left: 38%; right: 0; width: auto; }
	.sa-abhero__bg img { height: 100%; object-fit: cover; object-position: center top; }
	.sa-abhero__copy { max-width: none; }
	.sa-abhero__cards {
		position: static;
		display: flex;
		flex-wrap: wrap;
		/* Each card keeps its own height; stretching makes the offer card 137px
		   tall with its progress rail stranded in the middle. */
		align-items: flex-start;
		gap: 16px;
		width: auto;
		height: auto;
		max-height: none;
		margin: 32px auto 0;
		padding-inline: var(--sa-gutter, 24px);
		max-width: 1280px;
	}
	.sa-abhero__win,
	.sa-abhero__webinar { position: static; }

	.sa-afacts__box { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; padding: 24px 28px; }

	.sa-welcome__grid { grid-template-columns: minmax(0, 1fr); gap: 56px; }
	.sa-welcome__badge { right: 16px; }
	.sa-values { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 48px; }

	.sa-founder__card { grid-template-columns: minmax(0, 1fr); }
	/* Stacked, nothing was holding the photograph's height, so a square
	   portrait grew to the full width of the card - 976 x 976 on a 1024
	   screen. Cropping it to a full-width band instead went the other way and
	   cut the face, so it keeps roughly the portrait it has on the desktop
	   and sits centred above the text. */
	.sa-founder__media {
		min-height: 0;
		width: min(340px, 100%);
		height: 420px;
		margin: 22px auto 0;
		border-radius: 16px;
		overflow: hidden;
	}

	.sa-team__head { flex-direction: column; align-items: flex-start; }
	.sa-team__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.sa-team__mark { font-size: 84px; }

	/* The design sets these at 9-10px. That is fine on a desk and not on a
	   tablet or phone held at arm's length, so they come up from here down -
	   a 768 iPad is a touch device too, not a small laptop. */
	.sa-person__tag { font-size: 10px; line-height: 14px; padding: 3px 9px; }
	.sa-person__role { font-size: 11px; line-height: 15px; }
	.sa-team__num-label { font-size: 11px; }
}

@media (max-width: 760px) {
	.sa-abhero { min-height: 0; padding-block: 96px 80px; }
	/* The photograph stops carrying the hero: it sits behind the whole width,
	   faded, so the copy stays readable. */
	.sa-abhero__bg { left: 0; right: 0; width: auto; opacity: .45; }
	.sa-abhero__fade { background: linear-gradient(0deg, #FCFBF7 12%, rgba(252, 251, 247, .8) 55%, rgba(252, 251, 247, .65) 100%); }
	.sa-abhero__swoosh { height: 110px; }
	.sa-abhero__title { font-size: 30px; line-height: 36px; }
	.sa-abhero__lead { font-size: 14px; line-height: 22px; }
	.sa-abhero__actions { gap: 10px; }
	.sa-abhero__actions .sa-btn { flex: 1 1 180px; height: 48px; font-size: 15px; min-width: 0; }
	.sa-abhero__proof { gap: 12px; padding-top: 8px; }
	.sa-abhero__faces > span { width: 32px; height: 32px; margin-right: -10px; }
	.sa-abhero__cards { display: grid; gap: 10px; margin-top: 24px; }
	.sa-abhero__win,
	.sa-abhero__webinar { width: auto; max-width: none; }

	.sa-studyin__row { padding: 14px 20px; }
	.sa-studyin__flags { justify-content: flex-start; gap: 8px; }
	.sa-studyin__label { letter-spacing: 1.6px; }

	.sa-afacts__box { padding: 20px; gap: 16px; }
	.sa-afact__value { font-size: 26px; line-height: 32px; }
	.sa-afact__label { font-size: 12px; }

	.sa-welcome__media img { height: auto; }
	.sa-welcome__badge { position: static; width: auto; margin-top: 14px; }
	.sa-welcome__title { font-size: 26px; line-height: 32px; }
	.sa-welcome__time { grid-template-columns: minmax(0, 1fr); gap: 16px; }
	.sa-values { grid-template-columns: minmax(0, 1fr); gap: 12px; }
	.sa-value { min-height: 0; }

	.sa-founder__title { font-size: 24px; line-height: 30px; }
	.sa-founder__media { height: 400px; }
	.sa-founder__body { padding: 24px 20px; }
	.sa-founder__quote { font-size: 15px; line-height: 24px; }

	.sa-team__mark { font-size: 54px; top: -4px; }
	.sa-team__title { font-size: 25px; line-height: 32px; }
	.sa-team__nums { gap: 20px; flex-wrap: wrap; }
	.sa-team__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
	.sa-person__photo { height: 160px; }
	/* The invitation spans both columns here, and a card that wide kept its
	   227 x 303 ratio - 693px tall at 560, against 339 for the faces beside
	   it. grid-auto-rows: 1fr then handed that height to every row, so each
	   row of people sat above 350px of empty navy. It has no photograph to
	   keep in proportion, so at this width it is as tall as its own words. */
	.sa-person--join { grid-column: 1 / -1; aspect-ratio: auto; }
	.sa-person--join h3 br { display: none; }

	/* Two columns from here down, and the back of the tile is a whole
	   paragraph, so it tightens up: smaller type, less padding, and a smaller
	   pair of marks higher up the card. */
	.sa-person__face--back .sa-person__body { padding: 14px; }
	.sa-person__bio { margin-bottom: 8px; font-size: 11px; line-height: 15px; }
	.sa-person__logos { top: 16%; left: 14px; right: 14px; gap: 10px; }
	.sa-person__logo { max-width: 60px; max-height: 40px; }
}

/* Below this the two columns put the tile at about 169 x 225 and there is no
   room left: measured at 390 the body ran 14px past the foot of the card and
   the institutions sat across the first two lines of the bio. The marks go
   rather than the words - they are the reason the card turns over. */
@media (max-width: 520px) {
	.sa-person__logos { display: none; }
}

@media (prefers-reduced-motion: reduce) {
	.sa-value,
	.sa-person__photo img,
	.sa-person__join,
	.sa-founder__social { transition: none; }
	.sa-value:hover { transform: none; }
	.sa-person:hover .sa-person__photo img { transform: none; }
	.sa-person__join:hover { transform: none; }

	/* The hero cards come to rest for anyone who asks for less movement. */
	.sa-abhero__win,
	.sa-abhero__webinar {
		animation: none;
		transform: none;
		will-change: auto;
	}
}

@media (hover: none) {
	.sa-value:hover { transform: none; box-shadow: none; }
	.sa-person__join:hover { transform: none; }
}

/* ------------------------------------------------- The booking panel (About) */

/* One navy block: the copy and the fields share the left half, the photograph
   bleeds in from the right behind a wash. No white card. */
.sa-book { padding-block: 0 96px; background: var(--sa-cream); }
.sa-book__box {
	position: relative;
	overflow: hidden;
	border-radius: 28px;
	background: #11244F;
	box-shadow: 0 24px 50px -26px rgba(14, 33, 78, .45);
}
.sa-book__bg {
	position: absolute;
	right: 0;
	top: 0;
	width: 58%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}
/* Navy from the left so the copy always has something to sit on. */
.sa-book__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, #11244F 0%, #11244F 42%, rgba(17, 36, 79, .72) 58%, rgba(17, 36, 79, .35) 100%);
}

.sa-book__inner {
	position: relative;
	z-index: 1;
	max-width: 560px;
	padding: 56px 48px;
}

.sa-book__eyebrow {
	font-family: var(--sa-font-ui);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 3px;
	text-transform: uppercase;
	color: rgba(252, 250, 248, .7);
}
.sa-book__title {
	margin-top: 14px;
	font-size: 40px;
	line-height: 46px;
	letter-spacing: .4px;
	text-transform: uppercase;
	color: #FCFAF8;
}
.sa-book__title .sa-accent { color: var(--sa-red-bright); }
.sa-book__text {
	max-width: 420px;
	margin-top: 14px;
	font-family: var(--sa-font-body);
	font-size: 15px;
	line-height: 24px;
	color: rgba(252, 250, 248, .75);
}

.sa-book__form { margin-top: 26px; }
.sa-book__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}
.sa-book__row + .sa-book__row { margin-top: 12px; }

.sa-book__field { position: relative; display: block; }
.sa-book__field input,
.sa-book__field select {
	width: 100%;
	height: 44px;
	padding: 0 14px;
	border: 1px solid rgba(252, 250, 248, .18);
	border-radius: 10px;
	background: rgba(252, 250, 248, .08);
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 44px;
	color: #FCFAF8;
	transition: border-color .15s ease, background-color .15s ease;
}
.sa-book__field input::placeholder { color: rgba(252, 250, 248, .55); }
.sa-book__field input:focus,
.sa-book__field select:focus {
	outline: none;
	border-color: rgba(252, 250, 248, .55);
	background: rgba(252, 250, 248, .14);
}
.sa-book__field--select select {
	appearance: none;
	padding-right: 36px;
	cursor: pointer;
}
/* The native list is drawn by the OS, so its rows need their own colours. */
.sa-book__field--select option { background: #11244F; color: #FCFAF8; }
.sa-book__field--select svg {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(252, 250, 248, .7);
	pointer-events: none;
}

.sa-book__submit {
	height: 44px;
	padding: 0 20px;
	border: 0;
	border-radius: 10px;
	background: var(--sa-red);
	font-family: var(--sa-font-body);
	font-size: 14px;
	font-weight: 600;
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease;
}
.sa-book__submit:hover { background: var(--sa-red-bright); }
.sa-book__submit[disabled] { opacity: .6; cursor: default; }

.sa-book__says {
	margin-top: 12px;
	font-family: var(--sa-font-body);
	font-size: 13px;
	line-height: 20px;
	color: #9AE6B4;
}
.sa-book__says--bad { color: #FDA4AF; }
.sa-book__says:empty { margin-top: 0; }

/* Off-screen, not display:none - a hidden field a bot can still find. */
.sa-book__trap {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
}

.sa-book__notes {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 24px;
	margin: 22px 0 0;
	padding: 0;
	list-style: none;
}
.sa-book__notes li {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-family: var(--sa-font-body);
	font-size: 13px;
	line-height: 18px;
	color: rgba(252, 250, 248, .7);
}
.sa-book__notes svg { flex: none; color: rgba(252, 250, 248, .55); }

@media (max-width: 1024px) {
	.sa-book__inner { max-width: none; padding: 44px 36px; }
	.sa-book__bg { width: 100%; opacity: .35; }
	.sa-book__veil { background: linear-gradient(90deg, #11244F 0%, rgba(17, 36, 79, .9) 100%); }
	.sa-book__title { font-size: 34px; line-height: 40px; }
	.sa-book__text { max-width: none; }
}

@media (max-width: 760px) {
	.sa-book { padding-bottom: 64px; }
	.sa-book__inner { padding: 32px 22px; }
	.sa-book__title { font-size: 26px; line-height: 32px; }
	.sa-book__row { grid-template-columns: minmax(0, 1fr); }
	.sa-book__notes { gap: 10px; }
}

/* =========================================================================
   Advertise with us
   Figma frame is 1440 wide; the hero band is 798 tall and every section
   inside sits on the 1280 container with 112px gutters.
   ====================================================================== */

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

/* The frame starts the navy at the very top of the page and floats the header
   pill inside it, so the hero is pulled up under a transparent header - the
   same arrangement Home uses. Its own 229px of top padding then lands the copy
   exactly where the frame puts it. */
.sa-page--advertise { --sa-header-h: 132px; }
/* The bar loses its tall logo below 1024, so the pill is 106 there, not 132.
   Measured: pulling the hero up by the desktop figure lifted its top 26px off
   the top of the window. */
@media (max-width: 1023px) {
	.sa-page--advertise { --sa-header-h: 106px; }
}
.sa-page--advertise .sa-header { background: transparent; }

.sa-adhero {
	position: relative;
	overflow: hidden;
	margin-top: calc(-1 * var(--sa-header-h, 132px));
	min-height: min(798px, 55.42vw);
	/* Symmetric, because the frame simply centres both columns in the 798 band
	   - the copy's 229 and the mock's 135 are just where their own heights put
	   them. Lopsided padding pushed the band to 888. */
	padding-block: clamp(104px, 9.44vw, 136px);
	background: #11244F;
}
/* The red bloom off the top-right corner and the faint ring at the left. */
.sa-adhero__bloom {
	position: absolute;
	left: 73.33%;
	top: -160px;
	width: 544px;
	height: 544px;
	border-radius: 9999px;
	background: rgba(169, 25, 40, .3);
	filter: blur(32px);
	pointer-events: none;
}
.sa-adhero__ring {
	position: absolute;
	left: -128px;
	top: 414px;
	width: 384px;
	height: 384px;
	border: 60px solid rgba(252, 250, 248, .04);
	border-radius: 9999px;
	pointer-events: none;
}
.sa-adhero__swoosh {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	width: 100%;
	height: clamp(72px, 6.667vw, 110px);
	pointer-events: none;
}

.sa-adhero__inner {
	position: relative;
	z-index: 2;
	display: grid;
	grid-template-columns: minmax(0, 688fr) minmax(0, 448fr);
	gap: 40px;
	align-items: center;
}

.sa-adhero__title {
	max-width: 688px;
	font-size: clamp(34px, 3.333vw, 48px);
	line-height: 1;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: #FCFAF8;
}
.sa-adhero__title .sa-accent { color: #ED2224; }

.sa-adhero__lead {
	max-width: 512px;
	margin-top: 24px;
	font-family: var(--sa-font-body);
	font-size: clamp(15px, 1.25vw, 18px);
	line-height: 1.5556;
	color: rgba(252, 250, 248, .75);
}

.sa-adhero__actions { margin-top: 24px; }
.sa-adhero__actions .sa-btn {
	height: 56px;
	min-width: 224px;
	padding: 10px 14px 10px 16px;
	gap: 2px;
	border: 1px solid rgba(255, 255, 255, .12);
	border-radius: 12px;
	background: #AF0012;
	font-size: 18px;
	line-height: 20px;
	letter-spacing: -.006em;
}
.sa-adhero__actions .sa-btn__arrow { width: 24px; height: 24px; opacity: .64; }

/* ------------------------------------------------- The sample advert card */

/* The design tilts the whole mock-up a degree and a half clockwise, which is
   what stops it reading as a flat screenshot pasted onto the hero. */
.sa-admock {
	position: relative;
	/* Measured: the card already sits at 130 against the frame's 135, and the
	   copy at 230 against its 229 - the geometry matches. The gap under the
	   header only looks tight because our pill is 100 tall and ends at 116,
	   where the frame's is 74 and ends at 101. That pill is shared with every
	   other page, so the card is nudged instead, which puts the gap back at
	   the frame's 34px. */
	transform: translateY(20px) rotate(1.5deg);
}

.sa-admock__card {
	border-radius: 24px;
	overflow: hidden;
	background: #fff;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25), 0 0 0 1px rgba(252, 250, 248, .1);
}
.sa-admock__head {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
}
.sa-admock__avatar {
	display: grid;
	place-items: center;
	flex: none;
	width: 37px;
	height: 37px;
	border-radius: 9999px;
	background: #11244F;
	font-family: var(--sa-font-display);
	font-size: 10px;
	line-height: 15px;
	letter-spacing: .01em;
	color: #FCFAF8;
}
.sa-admock__who { display: flex; flex-direction: column; min-width: 0; }
.sa-admock__who strong {
	font-family: var(--sa-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: #101F41;
}
.sa-admock__who span {
	font-family: var(--sa-font-body);
	font-size: 11px;
	line-height: 13.75px;
	color: #5C657A;
}

/* The frame gives the photograph 351.43px; at 240 the whole card read as a
   smaller advert than the design shows. */
.sa-admock__shot { height: 351px; overflow: hidden; background: #EAEEF5; }
.sa-admock__shot img { width: 100%; height: 100%; object-fit: cover; }

.sa-admock__bar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 16px;
	background: #F3F1EC;
}
.sa-admock__link { display: flex; flex-direction: column; min-width: 0; }
.sa-admock__link span {
	font-family: var(--sa-font-body);
	font-size: 11px;
	line-height: 16.5px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #5C657A;
}
.sa-admock__link strong {
	font-family: var(--sa-font-body);
	font-size: 14px;
	font-weight: 600;
	line-height: 20px;
	color: #101F41;
}
.sa-admock__apply {
	flex: none;
	padding: 5px 12px;
	border-radius: 8px;
	background: #A91928;
	font-family: var(--sa-font-body);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	color: #fff;
}

.sa-admock__stats {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 11px 16px 12px;
}
.sa-admock__stats span {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--sa-font-display);
	font-size: 12px;
	line-height: 16px;
	color: #5C657A;
}

/* The two figures that overlap the card, each drifting on its own clock so
   the pair never settles into a shared beat. */
@keyframes sa-adfloat-a {
	0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
	50%  { transform: translate3d(-5px, -14px, 0) rotate(-.5deg); }
	100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}
@keyframes sa-adfloat-b {
	0%   { transform: translate3d(0, 0, 0) rotate(0deg); }
	50%  { transform: translate3d(4px, -12px, 0) rotate(.45deg); }
	100% { transform: translate3d(0, 0, 0) rotate(0deg); }
}

.sa-admock__reach {
	position: absolute;
	left: -11%;
	/* Clear of the account row: at 43px, as the frame exports it, the badge
	   lands on "Sponsored - Your University" and hides it. */
	top: 78px;
	display: flex;
	flex-direction: column;
	gap: 4px;
	width: 180px;
	padding: 16px;
	border-radius: 18px;
	background: #A91928;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
	animation: sa-adfloat-a 3.8s ease-in-out infinite;
	will-change: transform;
}
.sa-admock__reach span {
	font-family: var(--sa-font-body);
	font-size: 11px;
	line-height: 16.5px;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .75);
}
.sa-admock__reach strong {
	font-size: 24px;
	font-weight: 400;
	line-height: 32px;
	letter-spacing: .01em;
	color: #fff;
}

.sa-admock__ctr {
	position: absolute;
	left: 62%;
	bottom: -36px;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px;
	border-radius: 18px;
	background: #fff;
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
	animation: sa-adfloat-b 5.1s ease-in-out infinite;
	animation-delay: -1.4s;
	will-change: transform;
}
.sa-admock__ctr-icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 14px;
	background: #FAEBEC;
	color: #A91928;
}
.sa-admock__ctr-body { display: flex; flex-direction: column; gap: 4px; }
.sa-admock__ctr-body strong {
	font-size: 18px;
	font-weight: 400;
	line-height: 18px;
	letter-spacing: .01em;
	color: #101F41;
}
.sa-admock__ctr-body span {
	font-family: var(--sa-font-body);
	font-size: 11px;
	line-height: 16.5px;
	white-space: nowrap;
	color: #5C657A;
}

/* ---------------------------------------------------------- Who you reach */

.sa-adwho { background: var(--sa-cream); }
/* The frame runs the photograph 0..709 and the copy 60..709, so the two
   columns finish level with each other and the copy is simply inset from the
   top. Stretching the row is what keeps them balanced whatever the copy ends
   up measuring. */
.sa-adwho__grid {
	display: grid;
	grid-template-columns: minmax(0, 576fr) minmax(0, 576fr);
	gap: 64px;
	align-items: stretch;
}
.sa-adwho__copy { padding-top: 60px; }

.sa-adwho__title {
	font-size: clamp(26px, 2.5vw, 36px);
	line-height: 1.1111;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: #101F41;
}
.sa-adwho__lead {
	margin-top: 16px;
	font-family: var(--sa-font-ui);
	font-size: 16px;
	line-height: 26px;
	color: #5C657A;
}

.sa-adtraits {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 16px;
	margin-top: 40px;
}
.sa-adtrait {
	padding: 21px;
	border: 1px solid var(--sa-border-light);
	border-radius: 18px;
	background: #fff;
	transition: background-color .25s ease, border-color .25s ease;
}
.sa-adtrait__title,
.sa-adtrait__text { transition: color .25s ease; }
/* The navy card is a hover state, not a resting one - nothing is lit until
   the pointer picks a card. */
.sa-adtrait:hover { border-color: #11244F; background: #11244F; }
.sa-adtrait__icon {
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	border-radius: 14px;
	background: #EAEEF5;
	color: #11244F;
	transition: background-color .25s ease, color .25s ease;
}
.sa-adtrait:hover .sa-adtrait__icon { background: #AF1D2B; color: #fff; }
.sa-adtrait__title {
	margin-top: 10px;
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	letter-spacing: -.02em;
	color: #101F41;
}
.sa-adtrait__text {
	margin-top: 4px;
	font-family: var(--sa-font-ui);
	font-size: 14px;
	line-height: 20px;
	letter-spacing: -.01em;
	color: #5C657A;
}
.sa-adtrait:hover .sa-adtrait__title,
.sa-adtrait:hover .sa-adtrait__text { color: #fff; }

/* The photograph and the bars that sit on its foot. */
.sa-adwho__media {
	position: relative;
	height: 100%;
	min-height: 520px;
	border-radius: 32px;
	overflow: hidden;
	background: var(--sa-blue-light);
}
/* Taken out of flow on purpose. Left in it, the photograph contributed its own
   intrinsic height to the grid row - 789 against the 692 the copy needed - so
   the row stretched and the cards ended ~97px short of the picture. Absolute,
   it fills whatever height the copy settles on and the two columns finish
   level at every width. */
.sa-adwho__media img {
	position: absolute;
	inset: 0;
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Two layers: the frame's gradient up from the foot, and a flat navy wash over
   the whole picture. Without the wash the warm original reads orange against a
   page that is otherwise navy and cream. */
.sa-adwho__veil {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(0deg, rgba(19, 38, 83, .9) 0%, rgba(19, 38, 83, 0) 50%, rgba(19, 38, 83, 0) 100%),
		rgba(19, 38, 83, .38);
}

.sa-adsnap {
	position: absolute;
	left: 24px;
	right: 24px;
	bottom: 24px;
	padding: 20px;
	border: 1px solid rgba(230, 225, 219, .6);
	border-radius: 18px;
	background: rgba(255, 255, 255, .95);
	backdrop-filter: blur(4px);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, .25);
}
.sa-adsnap__title {
	font-size: 12px;
	font-weight: 400;
	line-height: 16px;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: #101F41;
}
.sa-adsnap__list {
	display: grid;
	gap: 12px;
	margin: 16px 0 0;
	padding: 0;
	list-style: none;
}
.sa-adsnap__row {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: 12px;
	font-family: var(--sa-font-body);
	font-size: 12px;
	line-height: 16px;
	color: #5C657A;
}
.sa-adsnap__row strong { font-weight: 600; color: #101F41; }
.sa-adsnap__bar {
	display: block;
	height: 6px;
	margin-top: 4px;
	border-radius: 9999px;
	background: #F3F1EC;
	overflow: hidden;
}
.sa-adsnap__bar span {
	display: block;
	height: 100%;
	border-radius: 9999px;
	background: #A91928;
	transition: width 1.1s cubic-bezier(.22, .61, .36, 1);
}
@media (prefers-reduced-motion: reduce) {
	.sa-adsnap__bar span { transition: none; }
}

/* ----------------------------------------------------------------- Reach */

.sa-adreach { padding-block: 0 var(--sa-section-y); background: var(--sa-cream); }
.sa-adreach__box {
	position: relative;
	overflow: hidden;
	max-width: 1280px;
	margin-inline: auto;
	padding: 80px 56px 64px;
	border-radius: 32px;
	background: #11244F;
}
.sa-adreach__ring {
	position: absolute;
	right: -64px;
	top: -80px;
	width: 288px;
	height: 288px;
	border: 40px solid rgba(169, 25, 40, .3);
	border-radius: 9999px;
	pointer-events: none;
}
.sa-adreach__bloom {
	position: absolute;
	left: 33%;
	bottom: -40px;
	width: 224px;
	height: 224px;
	border-radius: 9999px;
	background: rgba(169, 25, 40, .2);
	filter: blur(32px);
	pointer-events: none;
}

.sa-adreach__head {
	position: relative;
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	justify-content: space-between;
	gap: 16px 40px;
}
.sa-adreach__title {
	font-size: clamp(24px, 2.083vw, 30px);
	line-height: 1.2;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: #FCFAF8;
}
.sa-adreach__note {
	max-width: 420px;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: rgba(252, 250, 248, .65);
}

.sa-adreach__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 16px;
	margin-top: 40px;
}
.sa-admetric {
	padding: 24px;
	border: 1px solid rgba(252, 250, 248, .1);
	border-radius: 18px;
	background: rgba(252, 250, 248, .04);
	backdrop-filter: blur(4px);
	transition: background-color .25s ease;
}
.sa-admetric__icon,
.sa-admetric__value,
.sa-admetric__label { transition: background-color .25s ease, color .25s ease; }
/* Same again: the white card follows the pointer rather than sitting fixed. */
.sa-admetric:hover { background: #fff; }
.sa-admetric__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}
.sa-admetric__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 9999px;
	background: #FCFAF8;
	color: #11244F;
}
.sa-admetric:hover .sa-admetric__icon { background: #AF1D2B; color: #fff; }
.sa-admetric__value {
	margin-top: 20px;
	font-size: clamp(28px, 2.5vw, 36px);
	line-height: 1.1111;
	letter-spacing: .01em;
	color: #FCFAF8;
}
.sa-admetric:hover .sa-admetric__value { color: #11244F; }
.sa-admetric__label {
	margin-top: 4px;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: rgba(252, 250, 248, .65);
}
.sa-admetric:hover .sa-admetric__label { color: #5E6778; }

/* ---------------------------------------------------------- Why advertise */

.sa-adwhy { background: var(--sa-cream); }
.sa-adwhy__head { max-width: 768px; margin-inline: auto; text-align: center; }
.sa-adwhy__title {
	font-size: clamp(26px, 2.5vw, 36px);
	line-height: 1.1111;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: #101F41;
}
.sa-adwhy__lead {
	margin-top: 16px;
	font-family: var(--sa-font-ui);
	font-size: 16px;
	line-height: 26px;
	color: #5C657A;
}

/* One bordered row; the 1px gaps are the dividers. */
.sa-adbenefits {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 1px;
	max-width: 1216px;
	margin: 48px auto 0;
	border: 1px solid var(--sa-border-light);
	border-radius: 24px;
	background: var(--sa-border-light);
	overflow: hidden;
}
.sa-adbenefit { padding: 28px; background: #fff; }
.sa-adbenefit__icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 14px;
	background: #A91928;
	color: #fff;
}
.sa-adbenefit__title {
	margin-top: 14px;
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: #101F41;
}
.sa-adbenefit__text {
	margin-top: 6px;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 22.75px;
	color: #5C657A;
}

/* ------------------------------------------------------------ Get a quote */

.sa-adquote { padding-block: 0 var(--sa-section-y); background: var(--sa-cream); }
.sa-adquote__box {
	display: grid;
	grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
	max-width: 1280px;
	margin-inline: auto;
	overflow: hidden;
	border: 1px solid var(--sa-border-light);
	border-radius: 32px;
	background: #fff;
}

.sa-adquote__aside {
	position: relative;
	overflow: hidden;
	padding: 40px;
	background: #11244F;
}
.sa-adquote__disc {
	position: absolute;
	left: 62%;
	bottom: -120px;
	width: 288px;
	height: 288px;
	border-radius: 9999px;
	background: #A91928;
	pointer-events: none;
}
.sa-adquote__ring {
	position: absolute;
	left: 50%;
	bottom: -40px;
	width: 160px;
	height: 160px;
	border: 24px solid rgba(252, 250, 248, .1);
	border-radius: 9999px;
	pointer-events: none;
}
.sa-adquote__eyebrow {
	position: relative;
	font-family: var(--sa-font-ui);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: .25em;
	text-transform: uppercase;
	color: #FDA4AF;
}
.sa-adquote__title {
	position: relative;
	margin-top: 12px;
	font-size: clamp(24px, 2.083vw, 30px);
	line-height: 1.2;
	font-weight: 500;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: #FCFAF8;
}
.sa-adquote__lead {
	position: relative;
	margin-top: 12px;
	font-family: var(--sa-font-ui);
	font-size: 14px;
	line-height: 22.75px;
	color: rgba(252, 250, 248, .7);
}
.sa-adquote__list {
	position: relative;
	display: grid;
	gap: 20px;
	margin: 28px 0 0;
	padding: 0;
	list-style: none;
}
.sa-adquote__list li { display: flex; align-items: center; gap: 12px; }
.sa-adquote__icon {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border-radius: 9999px;
	background: rgba(252, 250, 248, .1);
	color: #FCFAF8;
}
.sa-adquote__pair { display: flex; flex-direction: column; min-width: 0; }
.sa-adquote__pair span {
	font-family: var(--sa-font-ui);
	font-size: 12px;
	line-height: 16px;
	color: rgba(252, 250, 248, .6);
}
.sa-adquote__pair strong {
	font-family: var(--sa-font-ui);
	font-size: 14px;
	font-weight: 400;
	line-height: 20px;
	word-break: break-word;
	color: #FCFAF8;
}

/* ----------------------------------------------------------- The form */

.sa-adquote__panel { padding: 40px 40px 56px; }
.sa-adform { display: grid; gap: 24px; }
.sa-adform__grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 20px;
}

.sa-adfield { display: grid; gap: 8px; }
.sa-adfield__label {
	display: flex;
	align-items: center;
	gap: 6px;
	font-family: var(--sa-font-ui);
	font-size: 14px;
	font-weight: 500;
	line-height: 14px;
	color: #101F41;
}
.sa-adfield__label em {
	font-family: var(--sa-font-ui);
	font-size: 12px;
	font-style: normal;
	font-weight: 400;
	line-height: 16px;
	color: #5C657A;
}
.sa-adfield input,
.sa-adfield select,
.sa-adfield textarea {
	width: 100%;
	padding: 12px 13px;
	border: 1px solid #E2DCD5;
	border-radius: 8px;
	background: #FCFAF8;
	box-shadow: 0 1px 2px -1px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .1);
	font-family: var(--sa-font-ui);
	font-size: 14px;
	line-height: 20px;
	color: #101F41;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.sa-adfield input { height: 44px; padding-block: 0; }
.sa-adfield textarea { min-height: 98px; resize: vertical; }
.sa-adfield input::placeholder,
.sa-adfield textarea::placeholder { color: #5C657A; }
.sa-adfield input:focus,
.sa-adfield select:focus,
.sa-adfield textarea:focus {
	outline: none;
	border-color: #A91928;
	box-shadow: 0 0 0 3px rgba(169, 25, 40, .12);
}

.sa-adfield__select { position: relative; display: block; }
.sa-adfield__select select {
	appearance: none;
	height: 44px;
	padding-right: 38px;
	cursor: pointer;
}
.sa-adfield__select svg {
	position: absolute;
	right: 12px;
	top: 50%;
	transform: translateY(-50%);
	opacity: .5;
	pointer-events: none;
}

.sa-adform__formats { margin: 0; padding: 0; border: 0; }
.sa-adpills { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.sa-adpill { cursor: pointer; }
/* The box itself is off-screen; the pill is the control. */
.sa-adpill input {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
}
.sa-adpill span {
	display: inline-flex;
	align-items: center;
	padding: 6px 14px;
	border: 1px solid var(--sa-border-light);
	border-radius: 9999px;
	background: #FCFAF8;
	font-family: var(--sa-font-ui);
	font-size: 14px;
	line-height: 20px;
	color: rgba(16, 31, 65, .75);
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.sa-adpill:hover span { border-color: #A91928; color: #A91928; }
.sa-adpill input:checked + span {
	border-color: #A91928;
	background: #A91928;
	color: #fff;
}
.sa-adpill input:focus-visible + span { outline: 2px solid #A91928; outline-offset: 2px; }

.sa-adform__foot {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
}
.sa-adform__submit {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	height: 48px;
	padding: 0 40px;
	border: 0;
	border-radius: 9999px;
	background: #A91928;
	box-shadow: 0 1px 2px -1px rgba(0, 0, 0, .1), 0 1px 3px rgba(0, 0, 0, .1);
	font-family: var(--sa-font-ui);
	font-size: 14px;
	font-weight: 500;
	line-height: 20px;
	color: #fff;
	cursor: pointer;
	transition: background-color .15s ease;
}
.sa-adform__submit:hover { background: var(--sa-red-bright); }
.sa-adform__submit[disabled] { opacity: .6; cursor: default; }
.sa-adform__says {
	font-family: var(--sa-font-ui);
	font-size: 13px;
	line-height: 20px;
	color: #137A4F;
}
.sa-adform__says--bad { color: #A91928; }

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

@media (prefers-reduced-motion: reduce) {
	.sa-admock__reach,
	.sa-admock__ctr {
		animation: none;
		transform: none;
		will-change: auto;
	}
	.sa-adtrait,
	.sa-admetric,
	.sa-adtrait__icon,
	.sa-admetric__icon { transition: none; }
}

@media (max-width: 1280px) {
	.sa-adhero__inner { grid-template-columns: minmax(0, 1fr); gap: 56px; }
	.sa-admock { max-width: 460px; }
	.sa-admock__reach { left: 0; }
	.sa-admock__ctr { left: auto; right: 0; }
	.sa-adwho__grid { gap: 40px; }
	.sa-adreach__box { padding: 56px 36px 48px; }
	.sa-adreach__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.sa-adbenefits { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 1024px) {
	.sa-adhero { min-height: 0; padding-block: 120px 100px; }
	.sa-adwho__grid { grid-template-columns: minmax(0, 1fr); }
	.sa-adwho__copy { padding-top: 0; }
	.sa-adwho__media { min-height: 420px; }
	.sa-adquote__box { grid-template-columns: minmax(0, 1fr); }
	.sa-adquote__aside { padding: 36px 32px 72px; }
	.sa-adquote__panel { padding: 32px 32px 40px; }
}

@media (max-width: 760px) {
	.sa-adhero { padding-block: 96px 72px; }
	.sa-adhero__actions .sa-btn { width: 100%; min-width: 0; }
	/* Stacked, the two figures have nowhere to overlap from, so they take a
	   place in the column instead - the reach figure above the advert and the
	   click-through one below it, the way they sit around it on a desk. The
	   tilt comes off too: on a narrow screen it only costs edge clearance. */
	.sa-admock {
		display: flex;
		flex-direction: column;
		gap: 12px;
		max-width: none;
		margin-top: 24px;
		transform: none;
	}
	.sa-admock__reach,
	.sa-admock__ctr {
		position: static;
		width: auto;
		margin: 0;
		/* In flow they would drift into their neighbours. */
		animation: none;
		transform: none;
	}
	.sa-admock__reach { order: -1; }
	.sa-admock__card { order: 0; }
	.sa-admock__ctr { order: 1; }
	.sa-admock__ctr-body span { white-space: normal; }
	.sa-adtraits { grid-template-columns: minmax(0, 1fr); }
	.sa-adsnap { left: 12px; right: 12px; bottom: 12px; padding: 16px; }
	.sa-adreach__box { padding: 40px 20px 32px; border-radius: 24px; }
	.sa-adreach__grid { grid-template-columns: minmax(0, 1fr); }
	.sa-adbenefits { grid-template-columns: minmax(0, 1fr); }
	.sa-adquote__aside { padding: 28px 20px 64px; }
	.sa-adquote__panel { padding: 24px 20px 32px; }
	.sa-adform__grid { grid-template-columns: minmax(0, 1fr); }
	.sa-adform__submit { width: 100%; justify-content: center; padding: 0 20px; }
}
/* ================================================================= LEGAL ==
   Terms, privacy, refunds - the prose pages. There is no Figma frame for
   these, so nothing here is transcribed from a design; it is assembled out of
   the language the rest of the site already speaks. The navy hero and its red
   glow are the Blogs hero, the body is the cream page, the headings are the
   display face in uppercase and the pull-out at the foot is the navy panel
   used on About. The one new idea is the contents list, which a page of nine
   numbered clauses needs and no other page on the site has. */

.sa-legal-page { --sa-header-h: 132px; }
.sa-legal-page .sa-header { background: transparent; }

.sa-lhero {
	position: relative;
	overflow: hidden;
	background: #11244F;
	margin-top: calc(-1 * var(--sa-header-h));
	padding: calc(var(--sa-header-h) + 52px) 0 60px;
}
.sa-lhero__glow {
	position: absolute;
	top: -120px;
	right: -150px;
	width: 440px;
	height: 440px;
	border-radius: 9999px;
	background: rgba(169, 25, 40, .3);
	filter: blur(32px);
	pointer-events: none;
}
.sa-lhero__inner { position: relative; z-index: 1; }

.sa-lhero__kicker {
	margin: 0 0 14px;
	font-family: var(--sa-font-ui);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: rgba(252, 250, 248, .55);
}
.sa-lhero__title {
	margin: 0;
	font-family: var(--sa-font-display);
	font-weight: 400;
	font-size: clamp(30px, 3.33vw, 48px);
	line-height: 1.08;
	letter-spacing: .48px;
	text-transform: uppercase;
	color: #FCFAF8;
}
/* A date is not a credential, so it is set like a caption rather than a badge
   - but it is the first thing anyone checks on a terms page, so it stays
   above the fold instead of at the foot of the document. */
.sa-lhero__stamp {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 22px 0 0;
	font-family: var(--sa-font-ui);
	font-size: 13px;
	line-height: 18px;
	color: rgba(252, 250, 248, .6);
}
.sa-lhero__stamp svg { flex: none; opacity: .8; }

.sa-legal {
	background: var(--sa-cream);
	padding: 72px 0 96px;
}
.sa-legal__row {
	display: grid;
	grid-template-columns: 252px minmax(0, 1fr);
	gap: 64px;
	align-items: start;
}

/* The aside is the sticky element, not the nav inside it: a sticky box has to
   be a grid item whose own height is its content, and the grid stretches its
   items by default. */
.sa-legal__aside {
	position: sticky;
	top: calc(var(--sa-header-h) + 20px);
}
.sa-legal__toc {
	border-left: 2px solid rgba(0, 39, 104, .1);
	padding-left: 18px;
}
.sa-legal__toc-title {
	margin: 0 0 12px;
	font-family: var(--sa-font-ui);
	font-size: 11px;
	font-weight: 600;
	line-height: 15px;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: rgba(0, 39, 104, .45);
}
.sa-legal__toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
}
.sa-legal__toc a {
	display: block;
	padding: 7px 0;
	font-family: var(--sa-font-ui);
	font-size: 13.5px;
	line-height: 19px;
	color: #556171;
	text-decoration: none;
	transition: color .2s ease;
}
.sa-legal__toc a:hover { color: var(--sa-red); }
/* The line the reader is standing in. The marker sits in the 18px of padding
   between the rule and the text, so turning it on moves nothing. */
.sa-legal__toc a.is-here {
	position: relative;
	font-weight: 600;
	color: #002768;
}
.sa-legal__toc a.is-here::before {
	content: "";
	position: absolute;
	left: -20px;
	top: 7px;
	bottom: 7px;
	width: 2px;
	border-radius: 2px;
	background: var(--sa-red);
}

.sa-legal__doc {
	max-width: 768px;
	font-family: var(--sa-font-body);
	font-size: 16px;
	line-height: 28px;
	color: #556171;
}
.sa-legal__doc h2 {
	margin: 44px 0 14px;
	font-family: var(--sa-font-display);
	font-weight: 500;
	font-size: 22px;
	line-height: 28px;
	letter-spacing: .22px;
	text-transform: uppercase;
	color: #002768;
	/* Clears the sticky header when a contents link jumps here. */
	scroll-margin-top: calc(var(--sa-header-h) + 24px);
}
.sa-legal__doc h2:first-child { margin-top: 0; }
.sa-legal__doc p { margin: 0 0 18px; }
.sa-legal__doc > *:last-child { margin-bottom: 0; }

/* The opening paragraph, set larger because it is the summary the rest of the
   page elaborates on. */
.sa-legal__intro {
	margin-bottom: 28px;
	font-size: 19px;
	line-height: 31px;
	color: #002768;
}

/* The markers are drawn rather than left to the browser: a list in the middle
   of a policy needs the same red the rest of the page uses, and the numbered
   lists on Privacy are steps, so their numbers are set as counters in a disc
   instead of hanging off the left edge. */
.sa-legal__doc ul,
.sa-legal__doc ol {
	margin: 0 0 20px;
	padding: 0;
	list-style: none;
}
.sa-legal__doc li {
	position: relative;
	margin-bottom: 10px;
	padding-left: 30px;
}
.sa-legal__doc ul > li::before {
	content: "";
	position: absolute;
	left: 7px;
	top: 11px;
	width: 6px;
	height: 6px;
	border-radius: 9999px;
	background: var(--sa-red);
}
.sa-legal__doc ol { counter-reset: sa-legal-n; }
.sa-legal__doc ol > li { counter-increment: sa-legal-n; margin-bottom: 14px; }
.sa-legal__doc ol > li::before {
	content: counter(sa-legal-n);
	position: absolute;
	left: 0;
	top: 4px;
	display: grid;
	place-items: center;
	width: 20px;
	height: 20px;
	border-radius: 9999px;
	background: rgba(169, 25, 40, .1);
	font-family: var(--sa-font-ui);
	font-size: 11px;
	font-weight: 700;
	line-height: 20px;
	color: var(--sa-red);
}
/* The line break after a list item's opening words is the writer setting that
   phrase as a label; it reads as one if it is given the room to. */
.sa-legal__doc li br { content: ""; display: block; margin-bottom: 2px; }

.sa-legal__doc blockquote {
	margin: 0 0 20px;
	padding: 16px 20px;
	border-left: 3px solid var(--sa-red);
	border-radius: 0 14px 14px 0;
	background: rgba(0, 39, 104, .04);
	color: #002768;
}
.sa-legal__doc blockquote p:last-child { margin-bottom: 0; }
.sa-legal__doc strong { font-weight: 600; color: #002768; }
/* Links in the prose, not the button at the foot - that one carries its own
   colour and would otherwise be a red label underlined on a red fill. */
.sa-legal__doc a:not(.sa-btn) {
	color: var(--sa-red);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.sa-legal__ask {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 28px;
	flex-wrap: wrap;
	margin-top: 64px;
	padding: 28px 32px;
	border-radius: 24px;
	background: #11244F;
	color: rgba(252, 250, 248, .7);
}
.sa-legal__ask p { margin: 8px 0 0; font-size: 15px; line-height: 24px; max-width: 460px; }
/* Scoped through the panel on purpose. This heading sits inside .sa-legal__doc,
   so the plain `.sa-legal__doc h2` rule above outranks a lone class and was
   setting it 22px navy - navy text on the navy panel. */
.sa-legal__ask .sa-legal__ask-title {
	margin: 0;
	font-family: var(--sa-font-display);
	font-weight: 500;
	font-size: 20px;
	line-height: 26px;
	text-transform: uppercase;
	color: #FCFAF8;
}
.sa-legal__ask .sa-btn { flex: none; }

@media (max-width: 1100px) {
	/* The contents list stops being a margin and becomes a card above the
	   document - sticky in a single column would park it over the prose. */
	.sa-legal__row { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.sa-legal__aside { position: static; }
	.sa-legal__toc {
		border-left: 0;
		padding: 20px 22px;
		border-radius: 18px;
		background: rgba(0, 39, 104, .04);
	}
	.sa-legal__toc ol {
		display: grid;
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0 24px;
	}
	.sa-legal__toc a.is-here::before { display: none; }
}

@media (max-width: 760px) {
	.sa-lhero { padding: calc(var(--sa-header-h) + 28px) 0 40px; }
	.sa-legal { padding: 40px 0 64px; }
	.sa-legal__doc { font-size: 15px; line-height: 26px; }
	.sa-legal__doc h2 { margin-top: 34px; font-size: 19px; line-height: 25px; }
	.sa-legal__intro { font-size: 17px; line-height: 28px; }
	.sa-legal__toc ol { grid-template-columns: minmax(0, 1fr); }
	.sa-legal__ask { margin-top: 44px; padding: 24px 22px; }
	.sa-legal__ask .sa-btn { width: 100%; justify-content: center; }
}
/* ----------------------------------------- About: the discovery-call panel */

/* Figma "Section" at 8199 on the About frame. One navy block at 20px from
   each edge of the 1440 frame - wider than the container the rest of the page
   sits in, which is the design's own choice and what makes it read as the
   close of the page rather than one more row of it. */
.sa-plan { padding-block: var(--sa-section-y, 72px) 96px; }
.sa-plan__wrap {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 20px;
}
.sa-plan__box {
	position: relative;
	overflow: hidden;
	min-height: 514px;
	border-radius: 32px;
	background: #132653;
	isolation: isolate;
}

/* The design's layer sits at 0.2, but that is Figma's own compositing: taken
   literally under a 69%-to-41% navy wash it leaves six per cent of a
   photograph, which is a flat navy panel. Matched to what the design actually
   renders instead - the students read through the centre and fade out under
   the heading, which is the whole point of a left-to-right wash. */
.sa-plan__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .35;
}
/* Left to right rather than top to bottom: the copy is on the left, so that
   is the end that needs the most cover. */
.sa-plan__veil {
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(19, 38, 83, .69) 0%, rgba(19, 38, 83, .6555) 50%, rgba(19, 38, 83, .414) 100%);
}
/* A 384px circle hung off the corner so only its lower-left quarter shows.
   It is a 40px ring, not a disc - the fill would read as a second panel. */
.sa-plan__ring {
	position: absolute;
	top: -128px;
	right: -128px;
	width: 384px;
	height: 384px;
	border: 40px solid rgba(175, 29, 43, .4);
	border-radius: 9999px;
	pointer-events: none;
}

.sa-plan__inner {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	gap: 40px;
	/* 32 rather than the design's 56: the white card is 452 tall against a
	   514 panel, so it reaches past a 56px band. Holding the card's own
	   height and taking the difference out of the padding lands the panel on
	   514 and the copy within a pixel of where the design puts it. */
	padding: 32px 56px;
	min-height: 514px;
}

.sa-plan__copy {
	flex: 1 1 auto;
	max-width: 748px;
}

.sa-plan__pill {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	margin: 0;
	padding: 6px 17px;
	border-radius: 9999px;
	background: #AF1D2B;
	/* Avec, in caps - the design gives this line the display family the
	   headings use, not the body UI font. */
	font-family: var(--sa-font-display);
	font-size: 12px;
	line-height: 16px;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: #FFFFFF;
}
.sa-plan__pill svg { flex: none; }

.sa-plan__title {
	margin: 24px 0 0;
	font-family: var(--sa-font-display);
	font-weight: 400;
	font-size: clamp(26px, 2.5vw, 36px);
	line-height: 1.111;
	text-transform: uppercase;
	color: #FFFFFF;
}

.sa-plan__lead {
	max-width: 448px;
	margin: 16px 0 0;
	font-family: var(--sa-font-body);
	font-size: 16px;
	line-height: 24px;
	color: rgba(255, 255, 255, .75);
}

.sa-plan__list {
	margin: 32px 0 0;
	padding: 0;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.sa-plan__list li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: rgba(255, 255, 255, .85);
}
.sa-plan__list svg { flex: none; color: #AF1D2B; }

/* The card carries its own height; the panel's padding is sized around it. */
.sa-plan__card {
	flex: none;
	width: 500px;
	min-height: 452px;
	padding: 48px 40px 40px;
	border-radius: 24px;
	background: #FFFFFF;
	box-shadow: 0 24px 60px -24px rgba(10, 20, 45, .55);
	text-align: center;
}

.sa-plan__icon {
	display: grid;
	place-items: center;
	width: 80px;
	height: 80px;
	margin: 0 auto;
	border-radius: 9999px;
	background: rgba(211, 32, 42, .1);
	color: #14213D;
}

/* Held to the design's 364 rather than the card's full 420. It is what breaks
   the line after "your", and the two-line title is what fills the card to its
   452 - at full width it sat on one line and left a band of empty card under
   the footnote. */
.sa-plan__card-title {
	max-width: 364px;
	margin: 29px auto 0;
	font-family: var(--sa-font-display);
	font-weight: 400;
	font-size: 26px;
	line-height: 32px;
	letter-spacing: .6px;
	text-transform: uppercase;
	color: #14213D;
}
.sa-plan__card-text {
	max-width: 348px;
	margin: 9px auto 0;
	font-family: var(--sa-font-ui);
	font-size: 16px;
	line-height: 24px;
	color: #5B5F6B;
}

.sa-plan__go {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	height: 60px;
	margin-top: 30px;
	border-radius: 16px;
	background: #D3202A;
	font-family: var(--sa-font-ui);
	font-size: 20px;
	font-weight: 900;
	line-height: 28px;
	color: #FFFFFF;
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease;
}
.sa-plan__go:hover { background: #B81B24; transform: translateY(-1px); }
.sa-plan__go svg { flex: none; }

.sa-plan__note {
	margin: 24px 0 0;
	font-family: var(--sa-font-ui);
	font-size: 14px;
	line-height: 20px;
	color: #5B5F6B;
}

@media (max-width: 1100px) {
	/* The card stops being a column and becomes the row beneath the copy;
	   below this width 500px of card leaves the promises nowhere to sit. */
	.sa-plan__inner {
		flex-direction: column;
		align-items: stretch;
		padding: 40px;
		min-height: 0;
	}
	.sa-plan__box { min-height: 0; }
	.sa-plan__copy { max-width: none; }
	.sa-plan__lead { max-width: none; }
	.sa-plan__card { width: auto; min-height: 0; }
	.sa-plan__ring { width: 280px; height: 280px; top: -96px; right: -96px; border-width: 32px; }
}

@media (max-width: 760px) {
	.sa-plan { padding-block: 40px 56px; }
	.sa-plan__wrap { padding-inline: var(--sa-gutter); }
	.sa-plan__box { border-radius: 24px; }
	.sa-plan__inner { padding: 28px 22px; gap: 28px; }
	.sa-plan__title { margin-top: 18px; }
	.sa-plan__list { margin-top: 24px; }
	.sa-plan__card { padding: 32px 22px 28px; border-radius: 20px; }
	.sa-plan__icon { width: 64px; height: 64px; }
	.sa-plan__icon svg { width: 34px; height: 34px; }
	.sa-plan__card-title { margin-top: 20px; font-size: 22px; line-height: 28px; }
	.sa-plan__card-text { margin-top: 10px; font-size: 15px; }
	.sa-plan__go { height: 54px; font-size: 17px; }
	.sa-plan__go svg { width: 20px; height: 20px; }
	.sa-plan__note { margin-top: 18px; font-size: 13px; }
}
/* ------------------------------------------------- Services: page spacing */

/* The page ships with the global 96px, which puts 192px between every pair of
   sections - on a page of ten that is a screenful and a half of cream spent on
   nothing. Matched to the home page's 72px, which the client signed off on. */
.sa-services-page { --sa-section-y: 72px; }
/* The one gap on the page that does not match the rest. The logo strip above
   carries 94px cells around 48px logos, so it already ends on ~55px of its own
   clear space; a full 72px on top of that measured 178px between the last logo
   and the heading, against ~145 everywhere else. Trimmed to bring it into
   line, rather than shortening the strip - the home hero subtracts that
   strip's 158px height to fit itself on one screen. */
.sa-services-page .sa-partners + .sa-section { padding-top: 56px; }
/* The whole package tile opens the product, so it should look like it does. */
.sa-package.is-clickable { cursor: pointer; }
/* ================================================= SCHOLARSHIP RECIPIENTS ==
   No Figma frame for this one either. The hero is the Blogs hero, the cards
   are the site's cream tile, the pull-outs are the navy panel from About. The
   recipients are posts, so the grid grows on its own. */

.sa-recip-page { --sa-header-h: 132px; }
.sa-recip-page .sa-header { background: transparent; }

.sa-rhero {
	position: relative;
	overflow: hidden;
	background: #11244F;
	margin-top: calc(-1 * var(--sa-header-h));
	padding: calc(var(--sa-header-h) + 56px) 0 64px;
}
.sa-rhero__glow {
	position: absolute;
	top: -130px;
	right: -150px;
	width: 460px;
	height: 460px;
	border-radius: 9999px;
	background: rgba(169, 25, 40, .3);
	filter: blur(32px);
	pointer-events: none;
}
.sa-rhero__inner { position: relative; z-index: 1; }

.sa-rhero__kicker {
	margin: 0 0 14px;
	font-family: var(--sa-font-ui);
	font-size: 12px;
	font-weight: 600;
	line-height: 16px;
	letter-spacing: 2.4px;
	text-transform: uppercase;
	color: rgba(252, 250, 248, .55);
}
.sa-rhero__title {
	margin: 0;
	font-family: var(--sa-font-display);
	font-weight: 400;
	font-size: clamp(30px, 3.33vw, 48px);
	line-height: 1.08;
	letter-spacing: .48px;
	text-transform: uppercase;
	color: #FCFAF8;
}
.sa-rhero__lead {
	max-width: 720px;
	margin: 20px 0 0;
	font-family: var(--sa-font-body);
	font-size: 18px;
	line-height: 28px;
	color: rgba(252, 250, 248, .72);
}
.sa-rhero__lead a { color: #FCFAF8; text-decoration: underline; text-underline-offset: 3px; }
.sa-rhero__count {
	display: inline-block;
	margin: 24px 0 0;
	padding: 7px 16px;
	border-radius: 9999px;
	background: rgba(252, 250, 248, .1);
	font-family: var(--sa-font-ui);
	font-size: 13px;
	line-height: 18px;
	color: rgba(252, 250, 248, .8);
}
.sa-rhero__count strong { color: #FCFAF8; }

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

.sa-recip { background: var(--sa-cream); }
.sa-recip__title,
.sa-recip-why__title {
	margin: 0 0 40px;
	font-family: var(--sa-font-display);
	font-weight: 400;
	font-size: clamp(24px, 2.5vw, 36px);
	line-height: 1.2;
	text-transform: uppercase;
	color: #002768;
}

.sa-recip__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 24px;
}

/* A portrait over the copy, the way the team tiles read, but on cream and
   with the words below the picture rather than over it - these are stories to
   read, not faces to recognise. */
.sa-recip-card {
	display: flex;
	flex-direction: column;
	overflow: hidden;
	border-radius: 20px;
	background: #FFFFFF;
	box-shadow: 0 0 0 1px rgba(0, 39, 104, .06), 0 10px 24px -14px rgba(10, 20, 45, .3);
	transition: transform .25s ease, box-shadow .25s ease;
}
.sa-recip-card:hover {
	transform: translateY(-3px);
	box-shadow: 0 0 0 1px rgba(0, 39, 104, .08), 0 18px 36px -16px rgba(10, 20, 45, .4);
}

.sa-recip-card__media {
	display: block;
	aspect-ratio: 1 / 1;
	overflow: hidden;
	background: var(--sa-blue-light);
}
.sa-recip-card__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
	transition: transform .5s cubic-bezier(.22, .61, .36, 1);
}
.sa-recip-card:hover .sa-recip-card__media img { transform: scale(1.04); }
.sa-recip-card__monogram {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	font-family: var(--sa-font-display);
	font-size: 48px;
	color: rgba(0, 39, 104, .3);
}

.sa-recip-card__body {
	display: flex;
	flex-direction: column;
	flex: 1 1 auto;
	padding: 20px 20px 22px;
}
.sa-recip-card__name {
	margin: 0;
	font-size: 17px;
	line-height: 22px;
	font-weight: 600;
	font-stretch: 125%;
	letter-spacing: .17px;
	text-transform: uppercase;
	color: #002768;
}
.sa-recip-card__name a { color: inherit; text-decoration: none; }
.sa-recip-card__name a:hover { color: var(--sa-red); }
.sa-recip-card__text {
	flex: 1 1 auto;
	margin: 10px 0 0;
	font-family: var(--sa-font-ui);
	font-size: 14px;
	line-height: 21px;
	color: #556171;
}
.sa-recip-card__more {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: 16px;
	font-family: var(--sa-font-ui);
	font-size: 13px;
	font-weight: 600;
	color: var(--sa-red);
	transition: gap .2s ease;
}
.sa-recip-card:hover .sa-recip-card__more { gap: 10px; }

/* ------------------------------------------------ Why, and the finder list */

.sa-recip-why { background: var(--sa-cream); padding-top: 0; }
.sa-recip-why__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) 320px;
	gap: 56px;
	align-items: start;
}
.sa-recip-why__copy p {
	margin: 0 0 16px;
	font-family: var(--sa-font-body);
	font-size: 16px;
	line-height: 27px;
	color: #556171;
}
.sa-recip-why__copy p:last-child { margin-bottom: 0; }

.sa-recip-find {
	padding: 24px;
	border-radius: 20px;
	background: rgba(0, 39, 104, .04);
}
.sa-recip-find__title {
	margin: 0 0 14px;
	font-family: var(--sa-font-ui);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 1.8px;
	text-transform: uppercase;
	color: rgba(0, 39, 104, .45);
}
.sa-recip-find__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 12px;
	background: #FFFFFF;
	font-family: var(--sa-font-ui);
	font-size: 14px;
	line-height: 20px;
	color: #002768;
	text-decoration: none;
	transition: background-color .2s ease, color .2s ease;
}
.sa-recip-find__link + .sa-recip-find__link { margin-top: 10px; }
.sa-recip-find__link svg { flex: none; color: var(--sa-red); }
.sa-recip-find__link:hover { background: #11244F; color: #FCFAF8; }
.sa-recip-find__link:hover svg { color: #FCFAF8; }

/* ---------------------------------------------------------------- Social */

.sa-recip-social { background: var(--sa-cream); padding-bottom: var(--sa-section-y); }
.sa-recip-social__row {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	flex-wrap: wrap;
	padding: 32px 36px;
	border-radius: 24px;
	background: #11244F;
	color: rgba(252, 250, 248, .72);
}
.sa-recip-social__title {
	margin: 0;
	font-family: var(--sa-font-display);
	font-weight: 400;
	font-size: 24px;
	line-height: 30px;
	text-transform: uppercase;
	color: #FCFAF8;
}
.sa-recip-social__row p { margin: 8px 0 0; font-size: 15px; line-height: 23px; }

.sa-recip-social__links { display: flex; gap: 12px; flex-wrap: wrap; }
.sa-recip-social__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 11px 18px;
	border-radius: 9999px;
	background: rgba(252, 250, 248, .1);
	font-family: var(--sa-font-ui);
	font-size: 14px;
	font-weight: 600;
	color: #FCFAF8;
	text-decoration: none;
	transition: background-color .2s ease, transform .2s ease;
}
.sa-recip-social__link:hover { background: var(--sa-red); transform: translateY(-1px); }

@media (max-width: 1100px) {
	.sa-recip-why__row { grid-template-columns: minmax(0, 1fr); gap: 32px; }
}

@media (max-width: 760px) {
	.sa-rhero { padding: calc(var(--sa-header-h) + 28px) 0 44px; }
	.sa-rhero__lead { font-size: 16px; line-height: 26px; }
	.sa-recip__grid { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; }
	.sa-recip-card__body { padding: 14px 14px 16px; }
	.sa-recip-card__name { font-size: 15px; line-height: 20px; }
	.sa-recip-card__text { font-size: 13px; line-height: 19px; }
	.sa-recip-social__row { padding: 24px 22px; }
	.sa-recip-social__link { flex: 1 1 auto; justify-content: center; }
}
/* ------------------------------------------- Checkout: the card fields box */

/* WooPayments does not style Stripe's fields with CSS - it cannot, they live
   inside an iframe. It reads the computed style of a hidden probe element it
   drops into the checkout form, matching `.woocommerce-checkout .form-row
   input.input-text` and `... label`, and sends what it finds to Stripe as the
   appearance object. Our inputs carry our own classes, so the probe matched
   nothing, picked up the browser default, and the card row came back as three
   thin grey boxes that looked nothing like the fields above it. These rules
   exist to be found by that probe. */
/* Read from the minified plugin, so these are the real names: on this
   checkout it probes `#billing_first_name`, and where a theme has no
   `.woocommerce-billing-fields__field-wrapper` - ours has none - it falls back
   to appending a bare `<p class="form-row"><input type="text"></p>` to
   `form.checkout` and reading that. Both are covered below, so it cannot
   matter which branch it takes or where in the form the probe lands. */
/* Typed selectors only. A bare `.form-row input` also matched the terms
   checkbox, handed it width:100% and height:48px, and a 316px checkbox left
   the sentence beside it no room at all - it came out one letter per line. */
.sa-checkout-page form.checkout input[type="text"],
.sa-checkout-page form.checkout input[type="email"],
.sa-checkout-page form.checkout input[type="tel"],
.sa-checkout-page .woocommerce-checkout .form-row input[type="text"],
.sa-checkout-page .woocommerce-checkout .form-row input:not([type]),
.sa-checkout-page .woocommerce-checkout .form-row input.input-text,
.sa-checkout-page .woocommerce-checkout .form-row select {
	box-sizing: border-box;
	width: 100%;
	height: 48px;
	/* 13 + 20 line-height + 13 + 2 borders = the same 48px these fields were
	   already, so nothing moves here. It is written as padding rather than
	   left to the height because padding is what Stripe copies: it cannot set
	   a height on its own fields, so with `0 16px` the card row came out tight
	   against the top and bottom of its box. */
	padding: 13px 16px;
	border: 1px solid #E6E8EE;
	border-radius: 12px;
	background: #fff;
	font-family: var(--sa-font-body);
	font-size: 14px;
	line-height: 20px;
	color: #111827;
}
.sa-checkout-page .woocommerce-checkout .form-row input.input-text:focus {
	border-color: var(--sa-navy);
	box-shadow: 0 0 0 3px rgba(19, 38, 83, .12);
	outline: none;
}
.sa-checkout-page .woocommerce-checkout .form-row label {
	font-family: var(--sa-font-ui);
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	color: #111827;
}

/* The frame around Stripe's fields is ours, and it was a bare bordered strip.
   Same card as the rest of the checkout. */
/* Stripe lays the card out in two rows - number, then expiry and CVC - once
   the element is under about 600px. Capping the box rather than the element
   keeps the card hugging the fields instead of leaving a third of it empty. */
.sa-pay .payment_box.payment_method_woocommerce_payments {
	max-width: 560px;
	padding: 20px;
	border-radius: 16px;
	background: #fff;
	border: 1px solid #E6E8EE;
}

/* ------------------------------------------ Checkout: bank transfer details */

/* The numbers themselves come from WooCommerce's own bank-account settings;
   this only dresses them. One card per account, because the store has more
   than one. */
.sa-bacs {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 12px;
	margin-top: 14px;
}
.sa-bacs__card {
	padding: 16px 18px;
	border-radius: 14px;
	border: 1px solid rgba(0, 39, 104, .1);
	background: #fff;
}
.sa-bacs__bank {
	margin: 0 0 10px;
	font-family: var(--sa-font-ui);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	color: var(--sa-red);
}
.sa-bacs__rows { margin: 0; }
.sa-bacs__rows > div {
	display: flex;
	justify-content: space-between;
	align-items: baseline;
	gap: 14px;
	padding: 5px 0;
}
.sa-bacs__rows > div + div { border-top: 1px solid rgba(0, 39, 104, .06); }
.sa-bacs__rows dt {
	flex: none;
	font-family: var(--sa-font-ui);
	font-size: 12px;
	line-height: 18px;
	color: #667085;
}
.sa-bacs__rows dd {
	margin: 0;
	font-family: var(--sa-font-ui);
	font-size: 13px;
	font-weight: 600;
	line-height: 18px;
	color: #111827;
	/* Account numbers and IBANs are read off the screen and typed into a
	   banking app, so they are set in a face where 0 and O cannot be swapped. */
	font-variant-numeric: tabular-nums;
	word-break: break-all;
	text-align: right;
}
/* The supplied advert picture replaces the drawn card. It carries its own
   rounded corners and soft edge, so the frame that used to be drawn around
   the card is not repeated here. */
.sa-admock--image { display: block; }
.sa-admock__pic {
	display: block;
	width: 100%;
	height: auto;
	max-width: 580px;
}
/* The × on an order line. Held at low contrast until the row is hovered, so
   it is there when wanted without turning the summary into a row of buttons. */
.sa-mini { position: relative; }
.sa-mini__remove {
	flex: none;
	display: grid;
	place-items: center;
	width: 22px;
	height: 22px;
	margin-left: 4px;
	padding: 0;
	border: 0;
	border-radius: 9999px;
	background: transparent;
	color: #98A2B3;
	cursor: pointer;
	opacity: .55;
	transition: opacity .15s ease, background-color .15s ease, color .15s ease;
}
.sa-mini:hover .sa-mini__remove,
.sa-mini__remove:focus-visible { opacity: 1; }
.sa-mini__remove:hover { background: rgba(200, 16, 46, .1); color: var(--sa-red); }
.sa-mini__remove:focus-visible { outline: 2px solid var(--sa-red); outline-offset: 2px; }
.sa-mini__remove[disabled] { cursor: default; }
.sa-mini.is-going { opacity: .45; }

/* Select2 hides the real <select> through its own stylesheet, which these
   templates strip - so the country picker was drawn twice, once as select2's
   box and once as the native select underneath it. */
.sa-page select.select2-hidden-accessible {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	margin: -1px !important;
	padding: 0 !important;
	border: 0 !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}
/* The message a form leaves behind once it has been sent. */
.sa-form-done {
	padding: 18px 20px;
	border-radius: 14px;
	border: 1px solid rgba(0, 39, 104, .1);
	background: rgba(0, 39, 104, .04);
	font-family: var(--sa-font-ui);
	font-size: 15px;
	line-height: 24px;
	color: #002768;
}
/* ------------------------- Advertise: the badges against the supplied image */

/* The advert is now one picture, and that picture carries a transparent
   margin of its own - roughly 45px of soft edge all round. The badges were
   placed against the drawn card, which had no such margin, so measured against
   the image box they drifted off it: the click-through figure ended up sitting
   entirely below the advert instead of overlapping its lower right corner the
   way the design has it. These put them back on the card. */
.sa-admock--image .sa-admock__ctr {
	left: 58%;
	right: auto;
	bottom: 6%;
}
.sa-admock--image .sa-admock__reach {
	left: -9%;
	top: 13%;
}

@media (max-width: 1280px) {
	.sa-admock--image .sa-admock__ctr { left: 54%; right: auto; }
	.sa-admock--image .sa-admock__reach { left: -6%; }
}

/* Mobile keeps the desktop arrangement rather than stacking. The badges were
   dropped into the column because the drawn card was too small to carry them;
   the picture is full width here, so they overlap it as they do everywhere
   else - one off the top left, one off the bottom right. */
@media (max-width: 760px) {
	.sa-admock--image {
		display: block;
		max-width: 100%;
		margin-top: 8px;
	}
	.sa-admock--image .sa-admock__reach,
	.sa-admock--image .sa-admock__ctr {
		position: absolute;
		margin: 0;
	}
	.sa-admock--image .sa-admock__reach {
		left: -4%;
		top: 10%;
		width: 148px;
		padding: 12px 14px;
	}
	.sa-admock--image .sa-admock__reach strong { font-size: 20px; line-height: 26px; }
	.sa-admock--image .sa-admock__ctr {
		left: auto;
		right: -4%;
		bottom: 4%;
		gap: 10px;
		padding: 12px 14px;
	}
	.sa-admock--image .sa-admock__ctr-body strong { font-size: 18px; line-height: 24px; }
	.sa-admock--image .sa-admock__ctr-body span { font-size: 11px; line-height: 15px; }
	.sa-admock--image .sa-admock__ctr-icon { width: 34px; height: 34px; }
}
/* ------------------------------------- Checkout: the on-site PayPal button */

/* PayPal's own button is the action while PayPal is selected, so ours gets out
   of the way. The terms tick and the secure note stay - only the button goes. */
.sa-pay-is-paypal .sa-pay__button { display: none; }

/* 844px of yellow is wider than anything else on the form. */
#sa-payment-slot .ppc-button-wrapper,
#sa-payment-slot [id^="ppc-button"] {
	max-width: 560px;
	margin-top: 18px;
}

/* Until the terms are accepted the button is visibly not ready. PayPal opens
   its own window the moment it is clicked, and our terms check does not run
   until the order is created - which would be after the money had moved. */
.sa-pay-blocked #sa-payment-slot .ppc-button-wrapper {
	position: relative;
	opacity: .45;
	pointer-events: none;
}

/* The reason, in words, beside the button that will not respond. */
.sa-ppcp-hint {
	max-width: 560px;
	margin: 10px 0 0;
	font-family: var(--sa-font-ui);
	font-size: 13px;
	line-height: 20px;
	color: var(--sa-red);
}
.sa-ppcp-hint__link {
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	text-underline-offset: 3px;
	cursor: pointer;
}

/* A short pulse on the tick box when the hint points at it, so it is obvious
   which box is meant once the page has scrolled there. */
.sa-terms-nudge {
	border-radius: 10px;
	animation: sa-terms-nudge 1.8s ease-out 1;
}
@keyframes sa-terms-nudge {
	0%, 100% { box-shadow: 0 0 0 0 rgba(200, 16, 46, 0); }
	20%, 60% { box-shadow: 0 0 0 4px rgba(200, 16, 46, .18); }
}
@media (prefers-reduced-motion: reduce) {
	.sa-terms-nudge { animation: none; box-shadow: 0 0 0 3px rgba(200, 16, 46, .2); }
}
/* ------------------------------------------ Forms: the hidden spam fields */

/* WPForms adds two decoy fields to catch bots. One of them carries its own
   inline hiding styles; the other relies on the plugin's stylesheet, which
   these templates strip, so it stayed in the layout as a 1px-wide field and
   took a column away from the real ones.

   The marker is the pair of attributes the plugin puts on a decoy - hidden
   from assistive technology and taken out of the tab order. A real field
   never carries those, so no genuine field can be caught by this. */
/* Scoped through #sa-main on purpose. WPForms hides these with an inline
   <style> block of its own - `#wpforms-<form>-field_<n>-container { display:
   inline !important }` - and an id selector outranks any number of classes,
   so a class-based rule lost even with !important. Inline <style> also
   survives the foreign-stylesheet strip, which is why its half-hidden state
   reached the page at all. One id on our side settles it. */
#sa-main .wpforms-field:has(> input[aria-hidden="true"][tabindex="-1"]) {
	display: none !important;
}
/* For anything that does not understand :has(), at least take the input and
   its label out of the flow so they cannot be seen or focused. */
.sa-page .wpforms-field > input[aria-hidden="true"][tabindex="-1"],
.sa-page .wpforms-field > label[aria-hidden="true"] {
	position: absolute !important;
	width: 1px !important;
	height: 1px !important;
	padding: 0 !important;
	margin: -1px !important;
	overflow: hidden !important;
	clip: rect(0 0 0 0) !important;
	clip-path: inset(50%) !important;
	white-space: nowrap !important;
}
/* ------------------------------- About: the team cards on a narrow phone */

/* Two columns on a 360px screen make the tile about 154 x 205, and on a 320
   it is 134 x 179. Measured there, the back of the card ran 5px past its foot
   at 360 and 81px past it at 320 - the bio simply had nowhere left to go.
   The number of lines is capped to what the card can actually hold, worked
   back from its height: padding, name, role and the gap between them are
   fixed, so whatever is left is the bio's. */
@media (max-width: 420px) {
	.sa-person__bio {
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 5;
		line-clamp: 5;
		overflow: hidden;
	}
}
@media (max-width: 360px) {
	.sa-person__bio { -webkit-line-clamp: 4; line-clamp: 4; }
	.sa-person__face--back .sa-person__body { padding: 12px; }
	.sa-person__name { font-size: 14px; line-height: 18px; }
}

/* The photograph is only 160px tall on a phone while the card is taller, so
   the name lands across the join - and on a bright picture it was being read
   against sunlight. The wash starts higher and holds more of its colour
   behind the words. */
@media (max-width: 760px) {
	.sa-person__veil {
		top: 34%;
		background: linear-gradient(0deg, #11244F 0%, rgba(17, 36, 79, .82) 46%, rgba(17, 36, 79, 0) 100%);
	}
}
/* PayPal's mark on its tile, sitting where Card's brand logos sit. */
.sa-pay__methods .sa-pay__logo {
	display: block;
	width: auto;
	max-width: 82px;
	height: 20px;
	margin-top: auto;
	object-fit: contain;
	object-position: left center;
}
/* The logo used to be drawn on the tile's ::after, which is where the radio
   dot lives - PayPal's tile ended up with a mark pinned in the dot's place and
   no dot at all. It is a real <img> in the payment-method template now, so
   .sa-pay__logo above is all the styling it needs. */

/* The processing fee line in the Order Summary, and the note on each tile. */
.sa-summary__row--fee dt,
.sa-summary__row--fee dd { color: #5B6475; }
.sa-pay__fee {
	display: block;
	margin: 8px 0 0;
	font-family: var(--sa-font-ui);
	font-size: 12px;
	line-height: 17px;
	color: #667085;
}
/* Inside a tile the label's own 12px gap already spaces it, and the tile's
   600 weight would make the note read as a second heading. */
.sa-pay__methods .sa-pay__fee {
	margin: -4px 0 0;
	max-width: 22ch;
	font-weight: 500;
	font-size: 11.5px;
	line-height: 16px;
}
/* ------------------------------------------------------------------------
   About hero photo (client feedback 2026-10-17)
   Desktop: the hero is shorter than the 897px artwork, so pinning it to the
   top left the people under the swoosh. Anchor it low instead and zoom in a
   touch, so the students sit up in the visible part of the panel.
   Phone: the faded backdrop hid the people; show the photograph as a real
   picture above the headline.
   ------------------------------------------------------------------------ */
@media (min-width: 1025px) {
	.sa-abhero__bg { overflow: hidden; }
	.sa-abhero__bg img {
		height: 100%;
		object-fit: cover;
		object-position: right 82%;
		transform: scale(1.08);
		transform-origin: right 35%;
	}
}
/* Phone: the faded backdrop is dropped and the photograph is shown in full
   colour between the description and the buttons (.sa-abhero__photo-m). */
.sa-abhero__photo-m { display: none; }
@media (max-width: 760px) {
	/* The header is in the page flow on phones, so the hero needs no room for it. */
	.sa-abhero { padding-top: 24px; }
	.sa-abhero__bg { display: none; }
	.sa-abhero__photo-m {
		display: block;
		height: 300px;
		margin: 16px 0 22px;
		border-radius: 20px;
		overflow: hidden;
		box-shadow: 0 18px 40px -18px rgba(17, 36, 79, .45);
	}
	.sa-abhero__photo-m img {
		display: block;
		width: 100%;
		height: 100%;
		object-fit: cover;
		object-position: 62% 78%;
	}
}