/* ============================================================
	SFS Seminary — theme stylesheet
	Design source: D:\sfs-seminary-pixel screenshots (reverse-
	engineered; no coded reference existed), refined against
	supplied reference imagery pass-by-pass per page.
	Palette: deep maroon + antique gold on a warm cream ground,
	serif display type over a clean sans body.

	TABLE OF CONTENTS
	1.  Custom properties
	2.  Reset & base elements
	3.  Accessibility helpers (skip link, screen-reader text, focus)
	4.  Layout primitives (container, section, grid, eyebrow, heading)
	5.  Buttons
	6.  Topbar
	7.  Header & primary navigation
	8.  Hero
	9.  Breadcrumb
	10. Stats / impact bands
	11. Heritage & Identity (home tabs component)
	12. Rector's Message / Quick Links / CTA
	13. Latest Updates / Upcoming Events / Support panels
	14. Formation cards
	15. Daily life timetable & subjects taught
	16. Gallery
	17. About page — hero, intro, icon row, vision/mission, stats, rectorband
	18. Formation Fund page — contribute cards, bank/testimonial, CTA band
	19. Video block
	20. Footers (default, v2 five-column, home three-column)
	21. High-contrast mode
	22. Utilities
	23. Responsive breakpoints
	============================================================ */


	/* ============================================================
	   1. CUSTOM PROPERTIES
	   ============================================================ */

	:root {
		--maroon: #5c0b0e;
		--maroon-dark: #3a0608;
		--maroon-darker: #2a0405;
		--gold: #b8862f;
		--gold-light: #d9a94f;
		--cream: #f7f1e6;
		--paper: #fffdfa;
		--ink: #241a14;
		--text: #3a2f28;
		--text-muted: #756a5f;
		--border: #e6dcc9;
		--focus: #b8862f;

		--font-display: 'Cormorant Garamond', Georgia, 'Times New Roman', serif;
		--font-body: 'Source Sans 3', -apple-system, BlinkMacSystemFont, 'Segoe UI', Arial, sans-serif;

		--container: 1240px;
		--radius: 10px;
		--shadow-sm: 0 1px 3px rgba(42, 4, 5, .08);
		--shadow-md: 0 8px 24px rgba(42, 4, 5, .12);

		/* Typography scale — reused across matching content roles so the same
		kind of text (section labels, panel headings, card titles/descriptions)
		is the same size everywhere instead of one-off literal values. */
		--fs-label: 1rem;             /* eyebrows / small caps section labels */
		--fs-panel-heading: 1.5rem;   /* major panel & section headings (h3-tier) */
		--fs-card-heading: 1.22rem;   /* card/tile headings across all card components */
		--fs-card-desc: 1.06rem;      /* card/tile descriptions across all card components */
		--fs-tile-heading: 1.1rem;    /* headings inside dense 6-column icon tiles */
		--fs-tile-desc: 1rem;         /* descriptions inside dense 6-column icon tiles */
	}


	/* ============================================================
	   2. RESET & BASE ELEMENTS
	   ============================================================ */

	*, *::before, *::after { box-sizing: border-box; }

	html { scroll-behavior: smooth; font-size: 100%; }

	@media (prefers-reduced-motion: reduce) {
		html { scroll-behavior: auto; }
		*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
	}

	body {
		margin: 0;
		background: var(--cream);
		color: var(--text);
		font-family: var(--font-body);
		font-size: 1.06rem;
		line-height: 1.65;
		-webkit-font-smoothing: antialiased;
	}

	img { max-width: 100%; height: auto; display: block; }

	a { color: inherit; }

	h1, h2, h3, h4 {
		font-family: var(--font-display);
		font-weight: 700;
		color: var(--maroon);
		line-height: 1.2;
		margin: 0 0 .5em;
	}

	p { margin: 0 0 1em; }

	ul { list-style: none; margin: 0; padding: 0; }

	button { font: inherit; cursor: pointer; }


	/* ============================================================
	   3. ACCESSIBILITY HELPERS
	   ============================================================ */

	a:focus-visible, button:focus-visible, input:focus-visible {
		outline: 2px solid var(--focus);
		outline-offset: 2px;
	}

	.screen-reader-text {
		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;
		white-space: nowrap !important;
		border: 0 !important;
	}

	.skip-link {
		position: fixed;
		top: -60px;
		left: 10px;
		z-index: 999;
		background: var(--maroon);
		color: #fff;
		padding: 10px 16px;
		border-radius: 0 0 6px 6px;
		transition: top .15s ease;
	}
	.skip-link:focus { top: 0; }


	/* ============================================================
	   4. LAYOUT PRIMITIVES
	   ============================================================ */

	.sfs-container {
		width: 100%;
		max-width: var(--container);
		margin: 0 auto;
		padding: 0 24px;
	}

	.sfs-eyebrow {
		display: inline-block;
		color: var(--gold);
		font-weight: 700;
		font-size: var(--fs-label);
		letter-spacing: .08em;
		text-transform: uppercase;
		margin-bottom: .5em;
	}
	.sfs-eyebrow::after {
		content: '';
		display: block;
		width: 46px;
		height: 2px;
		background: var(--gold);
		margin-top: 8px;
	}
	.sfs-eyebrow--center::after { margin-inline: auto; }

	/* Premium serif treatment for a standalone eyebrow acting as the section's
	   only heading (e.g. Formation Fund "Ways to Contribute") — same family/
	   color as .sfs-heading instead of the small gold small-caps label. */
	.sfs-eyebrow--serif {
		color: var(--maroon);
		font-family: var(--font-display);
		font-size: 2.1rem;
		font-weight: 700;
		letter-spacing: .01em;
	}
	.sfs-eyebrow--serif::after { margin-top: 10px; }

	/* Base padding; refined for a tighter rhythm site-wide (was 56px/40px, then 28px/20px) */
	.sfs-section { padding: 22px 0; }
	.sfs-section--tight { padding-top: 16px; padding-bottom: 16px; }
	.sfs-section--alt { background: var(--paper); }
	.sfs-section-head { text-align: center; margin-bottom: 10px; }
	.sfs-section-head h2 { margin-top: 2px; font-size: 1.3rem; }

	/* Grid helpers used by Formation Fund / generic two-column layouts */
	.sfs-grid { display: grid; gap: 28px; }
	.sfs-grid--2 { grid-template-columns: 1fr 1fr; }

	/* Section heading with a decorative rule (About page). Shares --fs-panel-heading
	with .sfs-heritage__panel h3 so every "major panel/section heading" matches. */
	.sfs-heading {
		font-family: var(--font-display);
		color: var(--maroon);
		font-weight: 700;
		font-size: var(--fs-panel-heading);
		letter-spacing: .01em;
		text-transform: uppercase;
		margin: 0 0 10px;
	}
	.sfs-heading--center { text-align: center; }
	.sfs-heading__rule { display: flex; align-items: center; gap: 10px; margin: 8px 0 14px; }
	.sfs-heading__rule::before,
	.sfs-heading__rule::after { content: ''; flex: 1; max-width: 90px; height: 1px; background: var(--gold); }
	.sfs-heading--center + .sfs-heading__rule { justify-content: center; }
	.sfs-heading__rule span { width: 8px; height: 8px; border: 1px solid var(--gold); transform: rotate(45deg); flex-shrink: 0; }


	/* ============================================================
	   5. BUTTONS
	   ============================================================ */

	.sfs-btn {
		display: inline-flex;
		align-items: center;
		gap: 8px;
		padding: 11px 20px;
		border-radius: 6px;
		font-weight: 700;
		font-size: 1.05rem;
		letter-spacing: .03em;
		text-transform: uppercase;
		text-decoration: none;
		border: 1px solid transparent;
		transition: transform .12s ease, box-shadow .12s ease, opacity .12s ease;
	}
	.sfs-btn:hover { transform: translateY(-1px); box-shadow: var(--shadow-sm); }
	.sfs-btn--maroon { background: var(--maroon); color: #fff; }
	.sfs-btn--maroon:hover { background: var(--maroon-dark); }
	.sfs-btn--gold { background: var(--gold); color: #fff; }
	.sfs-btn--gold:hover { background: var(--gold-light); }
	.sfs-btn--outline { background: transparent; color: var(--maroon); border-color: var(--maroon); }
	.sfs-btn--outline-light { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .5); }
	.sfs-btn--sm { padding: 8px 16px; font-size: .95rem; }


	/* ============================================================
	   6. TOPBAR
	   ============================================================ */

	.sfs-topbar { background: var(--maroon-darker); color: #f2e6d8; font-size: 1.04rem; }
	.sfs-topbar__inner {
		display: flex;
		justify-content: space-between;
		align-items: center;
		flex-wrap: wrap;
		gap: 6px 20px;
		padding: 8px 24px;
	}
	.sfs-topbar__contact { display: flex; gap: 22px; flex-wrap: wrap; }
	.sfs-topbar__contact a { text-decoration: none; }
	.sfs-topbar__contact a:hover { color: var(--gold-light); }
	.sfs-topbar__meta { display: flex; align-items: center; gap: 18px; }
	
	.sfs-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	margin-right: 6px;
	color: var(--gold-light);
	vertical-align: middle;
}
.sfs-icon svg {display: block;}

/* Custom illustrated PNG icon set (assets/icons/) — sized via its own
   width/height attributes per call site; this just keeps it from
   stretching/overflowing whatever circular badge or inline slot it's
   dropped into, same job .sfs-icon svg does for the inline SVG set. */
.sfs-custom-icon { display: block; max-width: 100%; height: auto; object-fit: contain; }

/* Header/footer icons read as thin/light at the default 1.5 stroke — bump
   to a bolder weight for a more solid, premium appearance (same treatment
   already used for the Formation Fund "goes list" icons). */
.sfs-topbar svg,
.sfs-social a svg,
.sfs-nav__caret svg,
.sfs-search button svg,
.sfs-footer__list svg,
.sfs-footer-v2__col svg,
.sfs-home-footer__col svg {
	stroke-width: 2.1;
}
.sfs-icon-inline {display: inline-flex;}
.sfs-social {display: inline-flex;gap: 8px;}

.sfs-social a {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	background: rgba(255, 255, 255, .08);
	color: var(--gold-light);
	font-size: .85rem;
	text-decoration: none;
	transition: background .15s ease, color .15s ease;}
.sfs-social a:hover {background: var(--gold);color: var(--maroon-darker);}

/* Footer variant: rounded-square gold-bordered badges rather than filled
   circles, matching the reference's outlined icon treatment. */
.sfs-social--footer { gap: 10px; }
.sfs-social--footer a {
	width: 34px;
	height: 34px;
	border-radius: 7px;
	background: rgba(0, 0, 0, .2);
	border: 1.5px solid var(--gold);
	color: var(--gold-light);
}
.sfs-social--footer a:hover { background: var(--gold); border-color: var(--gold); color: var(--maroon-darker); }

/* ============================================================
   7. HEADER & PRIMARY NAVIGATION
   ============================================================ */

.sfs-header {
	background: #fff;
	position: relative;
	z-index: 30;
	box-shadow: var(--shadow-sm);
}


/* HEADER ROW */

.sfs-header__row {
	display: grid;
	grid-template-columns: 350px minmax(0, 1fr);
	align-items: center;
	column-gap: 38px;
	padding: 10px 24px 8px;
}


/* LOGO */

.sfs-logo {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}

.sfs-logo img {
	width: 400px;
	height: auto;
}


/* RIGHT SIDE
   Utility row + navigation
*/

.sfs-header__right {
	min-width: 0;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: 7px;
}


/* TOP UTILITY */

.sfs-header__utility {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 0;
	flex-wrap: nowrap;
	font-size: 1rem;
	white-space: nowrap;
}

.sfs-utility-btn {
	background: none;
	border: 0;
	color: var(--text);
	text-decoration: underline;
	padding: 5px 12px;
}

.sfs-font-size {
	display: inline-flex;
	border: 1px solid var(--border);
	border-radius: 5px;
	overflow: hidden;
}

.sfs-font-size button {
	background: #fff;
	border: 0;
	padding: 5px 9px;
	border-right: 1px solid var(--border);
}

.sfs-font-size button:last-child {
	border-right: 0;
}

.sfs-lang {
	color: var(--text-muted);
	padding: 0 14px;
}


/* SEARCH */

.sfs-search {
	display: flex;
	align-items: center;
	height: 38px;
	border: 1px solid var(--border);
	border-radius: 6px;
	overflow: hidden;
	margin-left: 4px;
}

.sfs-search input {
	border: 0;
	padding: 7px 11px;
	font-size: 1rem;
	width: 125px;
	height: 100%;
	background: #fff;
}

.sfs-search input:focus {
	outline: none;
}

.sfs-search button {
	width: 42px;
	height: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--cream);
	border: 0;
	color: var(--gold);
	padding: 0;
}

.sfs-search button:hover {
	color: var(--gold);
}

.sfs-search button svg {
	display: block;
}


/* JOIN SFS */

.sfs-header__utility .sfs-btn--sm {
	margin-left: 12px;
	padding: 10px 20px;
	white-space: nowrap;
}


/* NAVIGATION */

.sfs-nav {
	background: transparent;
	border-top: 0;
	width: 100%;
}

.sfs-nav__list {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	flex-wrap: nowrap;
	gap: 2px;
}

.sfs-nav__list a {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 8px 11px 9px;
	text-decoration: none;
	font-size: 1.04rem;
	font-weight: 600;
	letter-spacing: .01em;
	text-transform: uppercase;
	color: var(--text);
	border-bottom: 2px solid transparent;
	white-space: nowrap;
}

.sfs-nav__list a:hover,
.sfs-nav__list a.is-current {
	color: var(--gold);
	border-bottom-color: var(--gold);
}

.sfs-nav__caret {
	display: inline-flex;
	margin-left: 4px;
	transform: rotate(90deg);
	opacity: .8;
	color: var(--gold);
	vertical-align: middle;
}


/* MOBILE MENU BUTTON */

.sfs-nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 40px;
	height: 40px;
	background: none;
	border: 1px solid var(--border);
	border-radius: 6px;
}

.sfs-nav-toggle span {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--maroon);
	margin: 0 auto;
}

	/* ============================================================
	   8. HERO
	   ============================================================ */

	.sfs-hero { position: relative; color: #fff; overflow: hidden; }
	.sfs-hero__media { position: relative; min-height: 330px; display: flex; align-items: center; background-size: cover; background-position: center 45%; background-repeat: no-repeat; }
	.sfs-hero__media::before {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, rgba(20, 4, 4, .82) 0%, rgba(20, 4, 4, .48) 48%, rgba(20, 4, 4, .12) 100%);
	}

	/* Content column. `left: 80px` is legacy from an earlier layout pass —
	still active (nothing later resets it) and currently shifts the hero
	copy right of the container edge; flag before touching. */
	.sfs-hero__inner {
		position: relative;
		z-index: 1;
		left: 80px;
		max-width: var(--container);
		width: 100%;
		padding: 40px 0 48px;
	}

	.sfs-hero__eyebrow {
		display: block;
		margin-bottom: 8px;
		color: var(--gold-light);
		font-weight: 700;
		letter-spacing: .08em;
		text-transform: uppercase;
		font-size: 1.01rem;
	}

	.sfs-hero h1 {
		max-width: 570px;
		margin: 0 0 10px;
		color: #fff;
		font-family: var(--font-display);
		font-weight: 700;
		font-size: clamp(2.4rem, 5vw, 4rem);
		line-height: .98;
		text-transform: uppercase;
	}
	.sfs-hero h1 span { display: block; white-space: nowrap; }

	.sfs-hero p { max-width: 470px; margin: 0; color: #fff; font-size: 1.15rem; line-height: 1.5; }

	.sfs-hero__actions { display: flex; gap: 12px; margin-top: 16px; flex-wrap: wrap; }
	.sfs-hero__actions .sfs-btn { min-height: 40px; padding: 10px 17px; font-size: .94rem; }

	/* Page hero variant (About / Formation Fund): light background, no overlay dimming */
	.sfs-hero--page .sfs-hero__media { min-height: 300px; background-color: var(--cream); }
	.sfs-hero--page .sfs-hero__media::before {
		background: linear-gradient(90deg, rgba(247, 241, 230, .94) 0%, rgba(247, 241, 230, .55) 60%, rgba(247, 241, 230, .1) 100%);
	}
	.sfs-hero--page h1 { color: var(--maroon); font-size: clamp(2rem, 4.5vw, 3.2rem); }
	.sfs-hero--page p { color: var(--text); }
	.sfs-hero--page .sfs-hero__quote { font-family: var(--font-display); font-style: italic; color: var(--gold); font-size: 1.33rem; margin-bottom: .3em; }
	.sfs-hero--page .sfs-hero__cite { display: block; color: var(--text-muted); font-size: 1.1rem; margin-bottom: 1em; }


	/* ============================================================
	   9. BREADCRUMB
	   ============================================================ */

	.sfs-breadcrumb { background: var(--maroon-dark); color: #f0dfc8; }
	.sfs-breadcrumb ul { display: flex; gap: 8px; padding: 12px 0; font-size: 1.1rem; }
	.sfs-breadcrumb a { text-decoration: none; color: #f0dfc8; }
	.sfs-breadcrumb a:hover { color: var(--gold-light); }
	.sfs-breadcrumb li:not(:last-child)::after { content: '›'; margin-left: 8px; opacity: .6; }


	/* ============================================================
	   10. STATS / IMPACT BANDS
	   ============================================================ */

	/* Light stat strip that floats over the home hero */
	.sfs-stats {
		position: relative;
		z-index: 5;
		margin: -42px auto 0;
		max-width: var(--container);
		padding: 0;
		background: var(--paper);
		border: 1px solid rgba(80, 20, 15, .08);
		border-radius: 9px;
		box-shadow: 0 8px 25px rgba(40, 15, 5, .13);
	}
	/* Column widths follow content length instead of a blind 1fr split:
	   "Since / 1967 / Ettumanoor" is the shortest entry, so it gives up
	   width to the three columns whose descriptions are long enough to
	   wrap (Missionaries.../Countries.../Students...). */
	.sfs-stats__grid { display: grid; grid-template-columns: .75fr 1.1fr 1.1fr 1.05fr 1fr; }
	/* align-items: flex-start (not center) — every item's text block starts
	   at the same top edge regardless of whether its own content is 2 or 3
	   lines tall, instead of each column centering independently. */
	.sfs-stat { min-height: 88px; display: flex; align-items: flex-start; gap: 10px; padding: 12px 16px; border-right: 1px solid var(--border); }
	.sfs-stat:last-child { border-right: 0; }
	.sfs-stat__icon { flex: 0 0 90px; width: 90px; height: 90px; display: flex; align-items: center; justify-content: center; color: var(--gold); }
	.sfs-stat__icon .sfs-custom-icon { width: 80px; height: 80px; max-width: none; object-fit: contain; }
	.sfs-stat__icon svg { color: var(--gold); }
	.sfs-stat__label { color: var(--gold); font-size: .75rem; font-weight: 700; text-transform: uppercase; }
	.sfs-stat__value { color: var(--ink); font-family: var(--font-body); font-size: 1.33rem; font-weight: 700; line-height: 1.05; }
	.sfs-stat__desc { color: var(--text-muted); font-size: .8rem; line-height: 1.3; }

	/* Maroon stat strip with circular badges (About page) */
	.sfs-stats-v2 { display: grid; grid-template-columns: 1.15fr .9625fr .9625fr .9625fr .9625fr; overflow: hidden; background: var(--maroon); border-radius: 8px; box-shadow: var(--shadow-md); }
	.sfs-stats-v2__item { min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 10px; padding: 18px 14px; border-right: 1px solid rgba(255, 255, 255, .2); }
	.sfs-stats-v2__item:last-child { border-right: 0; }
	.sfs-stats-v2__badge { width: 104px; height: 104px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; color: var(--gold-light); }
	.sfs-stats-v2__badge .sfs-custom-icon { width: 80px; height: 80px; max-width: none; object-fit: contain; }
	.sfs-stats-v2__label { display: block; color: var(--gold-light); font-size: .8rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }
	.sfs-stats-v2__value { display: block; color: #fff; font-family: var(--font-body); font-size: 1.39rem; font-weight: 700; line-height: 1.15; }
	.sfs-stats-v2__desc { display: block; color: #eadbc8; font-size: .88rem; line-height: 1.35; }


/* ============================================================
   11. HERITAGE & IDENTITY (home tabs component)
   ============================================================ */

/* Left nav column is wide enough for "OUR HERITAGE & IDENTITY" on one line;
   right content column takes the remaining space. */
.sfs-heritage {
	display: grid;
	grid-template-columns: 372px minmax(0, 1fr);
	gap: 24px;
	align-items: stretch;
}

/* Both columns share the same visual height. */
.sfs-heritage__tabs,
.sfs-heritage__panels {
	height: 100%;
	box-sizing: border-box;
}


/* ============================================================
   LEFT HERITAGE NAVIGATION
   ============================================================ */

.sfs-heritage__tabs {
	display: flex;
	flex-direction: column;

	background: var(--paper);
	border: 1px solid var(--border);
	border-radius: 8px;
	overflow: hidden;
	position: relative;
	box-shadow: 0 4px 14px rgba(40, 15, 5, .08);

	--heritage-tab-pad-x: 16px;
	--heritage-badge-size: 54px;
}
.sfs-heritage__tab-badge {
    position: relative;
    z-index: 2;
}

/* Section title */

.sfs-heritage__tabs-title {
	margin: 0;
	padding: 16px 18px 10px;
	font-weight: 700;
	color: var(--maroon);
	font-size: var(--fs-label);
	letter-spacing: .03em;
	text-transform: uppercase;
	white-space: nowrap;
}

.sfs-heritage__tabs-title strong {
	color: var(--text);
}


/* ============================================================
   HERITAGE TABS
   ============================================================ */

/* All six tabs share the available height equally (matching the content
   panel's height), via flex distribution rather than a fixed px value.
   `overflow: hidden` is the safety net: text is sized/wrapped to fit this
   budget in practice (see strong/span below), but if it ever doesn't, it
   clips inside its own tab instead of spilling into the next one. */
.sfs-heritage__tab {
	display: flex;
	align-items: center;
	gap: 10px;

	width: 100%;

	/* KEY: distribute available height equally */
	flex: 1 1 0;
	min-height: 0;
	overflow: hidden;

	box-sizing: border-box;
	text-align: left;
	background: none;
	border: 0;
	border-top: 1px solid var(--border);
	padding: 10px var(--heritage-tab-pad-x);
	color: var(--text);
	position: relative;
}

.sfs-heritage__tab > * {
	min-width: 0;
}


/* Tab title — one line; the wider card (372px) keeps every label,
   including "Seminary's Heavenly Patron", from needing to wrap. */

.sfs-heritage__tab strong {
	display: block;
	overflow: hidden;
	white-space: nowrap;
	text-overflow: ellipsis;
	font-family: var(--font-display);
	font-size: .93rem;
	line-height: 1.25;
}


/* Tab description — capped at two lines so the longest copy (Patron's)
   still fits the shared tab height without pushing into the next tab. */

.sfs-heritage__tab-text span {
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
	color: var(--text-muted);
	font-size: .76rem;
	line-height: 1.28;
}


/* Active tab */

.sfs-heritage__tab.is-active {
	background: var(--maroon);
	color: #fff;

	clip-path: polygon(
		0 0,
		calc(100% - 14px) 0,
		100% 50%,
		calc(100% - 14px) 100%,
		0 100%
	);
}

.sfs-heritage__tab.is-active span {
	color: #f0dfc8;
}


/* ============================================================
   TAB ICON BADGE
   ============================================================ */

.sfs-heritage__tab-badge {
	flex: 0 0 var(--heritage-badge-size);

	width: var(--heritage-badge-size);
	height: var(--heritage-badge-size);

	min-width: var(--heritage-badge-size);
	max-width: var(--heritage-badge-size);

	box-sizing: border-box;
	color: var(--gold);

	display: flex;
	align-items: center;
	justify-content: center;

	position: relative;
	z-index: 1;
}

/* A smaller ring than the badge's own box (not edge-to-edge) — inset so
   every tab's circle reads as the same tight size regardless of that tab's
   own icon size (26px SVG glyphs vs 80px custom icons). */
.sfs-heritage__tab-badge::after {
	content: '';
	position: absolute;
	inset: 4px;
	border: 1.5px solid var(--gold);
	border-radius: 50%;
	pointer-events: none;
}

.sfs-heritage__tab-badge svg {
	display: block;
}


/* Active tab badge */

.sfs-heritage__tab.is-active .sfs-heritage__tab-badge {
	color: #fff;
}
.sfs-heritage__tab.is-active .sfs-heritage__tab-badge::after {
	border-color: #fff;
}


/* ============================================================
   TAB CONTENT
   ============================================================ */

.sfs-heritage__tab-text {
	flex: 1;
	min-width: 0;
}


/* Chevron */

.sfs-heritage__tab-chevron {
	flex: 0 0 auto;
	margin-left: auto;
	opacity: 0;
	display: flex;
	align-items: center;
}

.sfs-heritage__tab-chevron svg {
	display: block;
}

.sfs-heritage__tab.is-active .sfs-heritage__tab-chevron {
	opacity: 1;
}

	/* Content panels: image + copy states, one visible at a time. All six share
	the same min-height (sized for the longest state, MSFS) so the two
	columns align top and bottom regardless of which tab is active. */
	.sfs-heritage__panel { display: none; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; position: relative; overflow: hidden; }
	.sfs-heritage__panel.is-active { display: grid; grid-template-columns: 1fr 1.3fr 1fr; grid-auto-rows: 1fr; align-content: stretch; gap: 22px; align-items: center; min-height: 520px; }
	/* Grid items default to min-width:auto, so a track can be forced wider
	   than its share by its content's own min-content size (a portrait image's
	   intrinsic dimensions, an unbreakable word) — the standard fix is to
	   zero that floor on the items themselves so tracks honor 1fr/gap sizing. */
	.sfs-heritage__panel.is-active > * { min-width: 0; }
	.sfs-heritage__panel img.sfs-heritage__portrait { border-radius: 8px; }
	.sfs-heritage__panel .sfs-eyebrow { margin-bottom: .2em; }
	.sfs-heritage__panel h3 { font-size: var(--fs-panel-heading); }
	.sfs-heritage__panel p,
	.sfs-heritage__body p { font-size: 1.05rem; line-height: 1.6; }

	/* Portrait/illustration imagery: stretches to the full row height (the
	   panel is a grid row min-height:520px) so photos fill the card edge to
	   edge instead of sitting at a fixed height with dead space around them. */
	.sfs-heritage__panel img.sfs-heritage__portrait,
	.sfs-heritage__portrait-wrap img.sfs-heritage__portrait {
		width: 100%;
		height: 100%;
		aspect-ratio: auto;
		align-self: stretch;
		object-fit: cover;
		object-position: center 22%;
		border-radius: 8px;
		box-shadow: var(--shadow-sm);
	}

	/* Portrait-wrap (MSFS / Diocese): the wrap is the actual grid item and
	   holds a caption above the photo, so the WRAP stretches to the row
	   height and the image fills whatever space is left after the caption. */
	.sfs-heritage__portrait-wrap {
		display: flex;
		flex-direction: column;
		height: 100%;
		align-self: stretch;
	}
	.sfs-heritage__portrait-wrap img.sfs-heritage__portrait {
		flex: 1;
		min-height: 0;
		height: auto;
		aspect-ratio: auto;
	}

	/* Mermier's third column: a plain div (not .portrait-wrap) holding the
	   illustration image plus a caption/glyph below it — same stretch idea. */
	.sfs-heritage__panel[data-panel="mermier"] > div:last-child {
		display: flex;
		flex-direction: column;
		height: 100%;
		align-self: stretch;
	}
	.sfs-heritage__panel[data-panel="mermier"] > div:last-child img.sfs-heritage__portrait {
		flex: 1;
		min-height: 0;
		height: auto;
		aspect-ratio: auto;
	}

	.sfs-heritage__panel[data-panel="patron"] .sfs-eyebrow--serif {
		font-size: 1.5rem;
		white-space: nowrap;
	}

	.sfs-heritage__panel[data-panel="mermier"] h3 {
		font-size: 1.7rem;
		text-transform: uppercase;
	}

	.sfs-heritage__ornament { width: 70px; height: 1px; background: var(--gold); margin: 6px 0 16px; position: relative; }
	.sfs-heritage__ornament::after { content: '❖'; position: absolute; left: 30px; top: -8px; color: var(--gold); font-size: .9rem; background: var(--paper); padding: 0 4px; }

	.sfs-heritage__quote { border-left: 3px solid var(--gold); padding: 14px 18px 14px 40px; background: var(--cream); font-style: italic; color: var(--maroon-dark); margin-top: 14px; position: relative; }
	.sfs-heritage__quote::before { content: '\201C'; font-family: var(--font-display); font-size: 2.2rem; color: var(--gold); position: absolute; left: 10px; top: -6px; font-style: normal; line-height: 1; }
	.sfs-heritage__quote cite { display: block; font-style: normal; color: var(--text-muted); font-size: 1.04rem; margin-top: 4px; }

	/* Trailing "illustration" treatment for portrait/building imagery */
	.sfs-heritage__illustration { filter: sepia(.55) saturate(1.4) brightness(1.04); border-radius: 8px; }
	.sfs-heritage__illustration-caption { font-family: var(--font-display); font-style: italic; color: var(--gold); text-align: center; margin-top: 10px; font-size: 1.23rem; }
	.sfs-heritage__illustration-glyph { text-align: center; color: var(--maroon); margin-top: 8px; opacity: .7; }

	.sfs-heritage__caption { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
	.sfs-heritage__caption .sfs-icon-row__badge { width: 80px; height: 80px; margin-bottom: 0; }
	.sfs-heritage__caption strong { font-family: var(--font-display); color: var(--maroon); font-size: var(--fs-card-heading); text-transform: uppercase; letter-spacing: .02em; }

	/* Faded background photo — currently used by the "Our History" state only
	   (Vision & Mission uses its own right-side portrait image instead). The
	   position/fade/tone values here are History's actual final look; kept
	   as one rule instead of a base + per-panel override pair. */
	.sfs-heritage__panel[data-panel="history"],
	.sfs-heritage__panel[data-panel="vision"] { position: relative; }
	.sfs-heritage__bg-image {
		position: absolute;
		z-index: 1;
		top: 0;
		right: 0;
		bottom: 0;
		left: 25%;
		background-size: cover;
		background-position: right center;
		opacity: .42;
		filter: sepia(.5) saturate(.85);
		-webkit-mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 18%, rgba(0, 0, 0, .65) 40%, #000 65%);
		mask-image: linear-gradient(90deg, transparent 0%, rgba(0, 0, 0, .18) 18%, rgba(0, 0, 0, .65) 40%, #000 65%);
	}
	.sfs-heritage__body { position: relative; z-index: 1; }

	/* Our History: compact composition — smaller heading/timeline, centered
	   CTA, and a background photo that stays concentrated on the right edge
	   instead of covering roughly half the panel. Height is min-height only
	   (no competing explicit height) since it's the sole size constraint.
	   Body needs z-index:2 here (base is 1) to sit above this state's own
	   bg-image, which itself sits at z-index:1. */
	.sfs-heritage__panel[data-panel="history"].is-active { min-height: 420px; padding: 16px 26px 14px; align-items: start; }
	.sfs-heritage__panel[data-panel="history"] .sfs-heritage__body { z-index: 2; }
	.sfs-heritage__panel[data-panel="history"] .sfs-eyebrow--serif { font-size: 1.3rem; margin-bottom: 4px; }
	.sfs-heritage__panel[data-panel="history"] h3 { font-size: 1.45rem; line-height: 1.2; margin-bottom: 4px; font-weight: 700; }
	.sfs-heritage__panel[data-panel="history"] .sfs-btn { display: flex; width: fit-content; margin: 0 auto; }

	/* Timeline sizing for this state: narrower descriptions, bigger dots, a
	   single non-wrapping row, and a connector line spanning only the first-
	   to-last icon centers (100%/12 in from each edge of the 6 equal columns). */
	.sfs-heritage__panel[data-panel="history"] .sfs-timeline { flex-wrap: nowrap; width: 100%; gap: 0; margin: 0 0 12px; }
	.sfs-heritage__panel[data-panel="history"] .sfs-timeline::before { top: 22px; left: calc(100% / 12); right: calc(100% / 12); }
	.sfs-heritage__panel[data-panel="history"] .sfs-timeline__item { min-width: 0; }
	.sfs-heritage__panel[data-panel="history"] .sfs-timeline__dot { width: 44px; height: 44px; margin: 0 auto 10px; border-width: 2px; }
	.sfs-heritage__panel[data-panel="history"] .sfs-timeline__year { font-size: 1.05rem; line-height: 1.2; margin-bottom: 5px; }
	.sfs-heritage__panel[data-panel="history"] .sfs-timeline__desc { max-width: 100px; margin: 0 auto; font-size: .82rem; line-height: 1.4; color: var(--text); }

	/* Timeline sizing for this state: narrower descriptions, bigger dots,
	   line spanning only the first-to-last icon centers (100%/12 in from
	   each edge of the 6 equal-width columns), and a darker desc color so
	   the card reads as filled rather than faint. */
	.sfs-heritage__panel[data-panel="history"] .sfs-timeline { margin: 0 0 12px; position: relative; }
	.sfs-heritage__panel[data-panel="history"] .sfs-timeline::before { top: 22px; left: calc(100% / 12); right: calc(100% / 12); }
	.sfs-heritage__panel[data-panel="history"] .sfs-timeline__dot { width: 44px; height: 44px; margin: 0 auto 10px; border-width: 2px; }
	.sfs-heritage__panel[data-panel="history"] .sfs-timeline__desc { max-width: 100px; margin: 0 auto; color: var(--text); }


	/* Our History: horizontal timeline */
	.sfs-timeline { display: flex; justify-content: space-between; gap: 8px; text-align: center; margin: 14px 0 18px; flex-wrap: wrap; position: relative; }
	.sfs-timeline::before { content: ''; position: absolute; top: 17px; left: 5%; right: 5%; height: 1px; background: var(--border); z-index: 0; }
	.sfs-timeline__item { flex: 1; min-width: 90px; position: relative; z-index: 1; }
	.sfs-timeline__dot { width: 34px; height: 34px; border-radius: 50%; border: 2px solid var(--gold); display: flex; align-items: center; justify-content: center; margin: 0 auto 6px; background: var(--paper); color: var(--gold); }
	.sfs-timeline__item.is-active .sfs-timeline__dot { background: var(--maroon); border-color: var(--maroon); color: #fff; }
	.sfs-timeline__year { font-weight: 700; color: var(--maroon); font-family: var(--font-body); font-size: 1.12rem; }
	.sfs-timeline__item.is-active .sfs-timeline__year { color: var(--maroon-dark); }
	.sfs-timeline__desc { font-size: .86rem; color: var(--text-muted); line-height: 1.35; }

	/* Vision & Mission: editorial split with a divider ornament */
	.sfs-vismis-split { display: grid; grid-template-columns: 1fr 1px 1.35fr; gap: 20px; align-items: start; }
	.sfs-vismis-split > div:first-child,
	.sfs-vismis-split > div:last-child { margin-top: 14px; }
	.sfs-vismis-split__divider { width: 1px; height: 110px; background: var(--border); align-self: stretch; position: relative; }
	.sfs-vismis-split__divider::after { content: '❖'; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: var(--gold); background: var(--paper); font-size: 1.04rem; padding: 6px 0; }
	.sfs-vismis-split__label { display: block; margin-bottom: 8px; color: var(--gold); font-weight: 700; font-size: var(--fs-label); letter-spacing: .08em; text-transform: uppercase; }
	.sfs-vismis-split__icon { width: 68px; height: 68px; display: flex; align-items: center; justify-content: center; margin-bottom: 8px; color: var(--maroon); }
	.sfs-vismis-split__icon--lg { width: 92px; height: 92px; margin-bottom: 0; flex: 0 0 auto; }
	.sfs-vismis-split__icon--lg .sfs-custom-icon { width: 80px; height: 80px; max-width: none; object-fit: contain; }
	.sfs-vismis-split__intro { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; }
	.sfs-vismis-split__intro p { margin: 0; font-size: 1rem; }
	.sfs-vismis-split__lede { max-width: 280px; font-family: var(--font-display); font-size: 1.45rem; font-weight: 700;line-height: 1.45; }

	/* Anchor the text column near the top instead of the shared center-alignment
	   (kept for the portrait states), which left it floating with large empty
	   gaps above/below. The right-side portrait still stretches full height. */
	.sfs-heritage__panel[data-panel="vision"].is-active { align-items: start; padding-top: 34px; }
	.sfs-heritage__panel[data-panel="vision"] h3 { margin-bottom: .35em; }
	.sfs-heritage__panel[data-panel="vision"] img.sfs-heritage__portrait { height: 100%; min-height: 100%; align-self: stretch; }

	.sfs-goes-list { margin: 12px 0 0; }
	.sfs-goes-list li { position: relative; padding: 4px 0 4px 24px; font-size: 1rem; }
	.sfs-goes-list li::before { content: '✓'; position: absolute; left: 0; color: var(--gold); font-weight: 700; }

	/* MSFS: small inline stat row */
	.sfs-mini-stats { display: flex; flex-wrap: wrap; gap: 20px; margin: 16px 0 20px; }
	.sfs-mini-stats__item { display: flex; align-items: center; gap: 8px; }
	.sfs-mini-stats__item .sfs-icon-inline { color: var(--gold); }
	.sfs-mini-stats__item strong { display: block; font-family: var(--font-display); color: var(--maroon); font-size: 1rem; line-height: 1.1; }
	.sfs-mini-stats__item span { display: block; font-size: .94rem; color: var(--text-muted); }

	

	/* ============================================================
	   12. RECTOR'S MESSAGE / QUICK LINKS / CTA
	   ============================================================ */

	/* Home page: Rector / Quick Links / Prayer card */
	.sfs-triband { display: grid; grid-template-columns: 1.7fr .8fr .85fr; gap: 14px; align-items: stretch; }
	/* Image occupies roughly half the card so the Rector's portrait reads as a
	major element, not a side thumbnail — bleeds to the card edges. */
	.sfs-rector { display: grid; grid-template-columns: 1fr 1.05fr; align-items: stretch; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
	.sfs-rector img { width: 100%; height: 100%; min-height: 320px; object-fit: cover; object-position: center 20%; border-radius: 0; }
	.sfs-rector > div { padding: 22px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
	.sfs-rector blockquote { margin: 5px 0 10px; font-family: var(--font-display); font-style: italic; font-size: .88rem; line-height: 1.5; }
	.sfs-rector cite { display: block; font-style: normal; font-weight: 700; color: var(--maroon); }
	.sfs-rector cite span { display: block; font-weight: 400; color: var(--text-muted); font-size: 1.04rem; }
	.sfs-rector .sfs-btn { min-width: 200px; }

	.sfs-quicklinks { background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; }
	.sfs-quicklinks li a { display: flex; align-items: center; gap: 10px; min-height: 30px; padding: 6px 0; border-bottom: 1px solid var(--border); text-decoration: none; font-size: .85rem; }
	.sfs-quicklinks li a svg:last-child { margin-left: auto; color: var(--text-muted); flex-shrink: 0; }
	.sfs-quicklinks .sfs-icon-inline { color: var(--gold); flex-shrink: 0; }
	.sfs-quicklinks li:last-child a { border-bottom: 0; }

	.sfs-prayer-card {background-position: center;background-size: cover;background-repeat: no-repeat;border-radius: var(--radius);color: #fff;padding: 22px;display: flex;flex-direction: column;justify-content: center;gap: 14px;min-height: 320px;width: 100%;overflow: hidden;}
	.sfs-prayer-card p {max-width: 260px;margin: 0;font-family: var(--font-display);font-style: italic;font-size: 1.35rem;line-height: 1.35;}
	.sfs-prayer-card cite {display: block;font-style: normal;color: #e9d9c4;font-size: 1rem;margin-bottom: 12px;}

	/* About page: Rector / Quick Links / Vocation CTA.
	   `align-items: stretch` on the grid (default here, kept explicit)
	   equalizes all three card heights to the tallest one automatically —
	   no fixed/min-height needed on the cards themselves. */
	.sfs-rectorband { display: grid; grid-template-columns: 1.8fr 1fr 1.15fr; gap: 16px; align-items: stretch; }
	.sfs-rectorband__rector,
	.sfs-rectorband__links { background: var(--paper); border: 1px solid var(--border); border-radius: 9px; }
	.sfs-rectorband__rector { display: flex; gap: 18px; padding: 18px; }
	.sfs-rectorband__rector img { width: 220px; height: 100%; flex-shrink: 0; object-fit: cover; border-radius: 10px; }
	.sfs-rectorband__quote-icon { margin-bottom: 6px; color: var(--gold); }
	.sfs-rectorband__rector blockquote { margin: 0 0 12px; color: var(--text); font-family: var(--font-display); font-style: italic; font-weight: 500; font-size: 1.01rem; line-height: 1.5; }
	.sfs-rectorband__signature { margin: 0; color: var(--maroon); font-family: var(--font-display); font-size: 1rem; font-style: italic; }
	.sfs-rectorband__rector cite { display: block; margin-bottom: 14px; color: var(--text-muted); font-size: .9rem; }
	/* Read Full Message: compact, not a full-width block button. min-width
	   (not a fixed width) plus white-space:nowrap keeps "Read Full Message →"
	   on one line — a fixed width let the label wrap once the button's own
	   sm/maroon overrides changed its available inner space. */
	.sfs-rectorband__rector .sfs-btn { width: auto; min-width: 235px; max-width: 100%; height: 44px; padding: 0 20px; justify-content: center; white-space: nowrap; }

	.sfs-rectorband__links { padding: 16px; }
	.sfs-rectorband__links li a { position: relative; display: flex; align-items: center; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--border); color: var(--text); text-decoration: none; font-size: .99rem; }
	.sfs-rectorband__links li:last-child a { border-bottom: 0; }
	.sfs-rectorband__links li a .sfs-icon-inline { color: var(--gold); }
	.sfs-rectorband__links li a svg:last-child { margin-left: auto; color: var(--text-muted); }

	.sfs-rectorband__cta {
		position: relative;
		isolation: isolate;
		display: flex;
		flex-direction: column;
		/* align-items: flex-start (not the flex-column default of
		   `stretch`) is what keeps the heading/paragraph/button sized to
		   their own content instead of stretching to the card's full
		   width — this is the fix for the oversized CTA button. */
		align-items: flex-start;
		justify-content: center;
		overflow: hidden;
		padding: 20px;
		border-radius: 9px;
		color: #fff;
		background-size: cover;
		background-position: center;
	}
	.sfs-rectorband__cta::before { content: ''; position: absolute; inset: 0; z-index: 0; background: linear-gradient(0deg, rgba(20, 4, 4, .85), rgba(20, 4, 4, .45)); }
	.sfs-rectorband__cta > * { position: relative; z-index: 1; }
	.sfs-rectorband__cta h3 { color: var(--gold-light); font-size: 1.22rem; }
	.sfs-rectorband__cta p { color: #f0e3d0; font-size: .99rem; line-height: 1.5; margin-bottom: 18px; }
	/* Vocation Enquiry: compact, not a full-width block button. */
	.sfs-rectorband__cta .sfs-btn { width: 265px; max-width: 100%; height: 48px; padding: 0 22px; justify-content: center; }


	/* ============================================================
	   13. LATEST UPDATES / UPCOMING EVENTS / SUPPORT PANELS
	   ============================================================ */

	.sfs-triple { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
	.sfs-panel { background: var(--paper); border: 1px solid var(--border); border-radius: 8px; padding: 13px; }
	.sfs-home-panels .sfs-triple { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: stretch; }
	.sfs-home-panels .sfs-panel { min-width: 0; min-height: 300px; padding: 15px; border-radius: 8px; box-shadow: var(--shadow-sm); }
	.sfs-panel__head { display: flex; justify-content: space-between; align-items: baseline; gap: 18px; margin-bottom: 10px; }
	.sfs-panel__head h3 { margin: 0; font-size: .99rem; color: var(--maroon); }
	.sfs-home-panels .sfs-panel__head h3,
	.sfs-panel--support h3 { font-family: var(--font-display); font-size: .95rem; font-weight: 700; letter-spacing: 0; text-transform: uppercase; }
	.sfs-panel__head a { font-size: .78rem; color: var(--gold); text-decoration: none; font-weight: 700; white-space: nowrap; }
	.sfs-home-panels .sfs-panel__head a { color: var(--maroon); font-size: .72rem; text-transform: uppercase; }
	.sfs-home-panels .sfs-btn--sm { padding: 9px 16px; font-size: .82rem; }

	.sfs-update-list li { display: flex; gap: 12px; min-height: 58px; padding: 8px 0; border-bottom: 1px solid var(--border); }
	.sfs-update-list li:last-child { border-bottom: 0; }
	.sfs-update-list img { width: 78px; height: 52px; border-radius: 5px; object-fit: cover; flex-shrink: 0; }
	.sfs-update-list li > div,
	.sfs-event-list li > div:last-child { min-width: 0; padding-top: 1px; }
	.sfs-update-list strong,
	.sfs-event-list strong { font-size: .88rem; line-height: 1.25; display: block; color: var(--ink); }
	.sfs-update-list time,
	.sfs-event-list span { display: block; margin-top: 5px; font-size: .78rem; line-height: 1.3; color: var(--text-muted); }

	.sfs-event-list li { display: flex; gap: 14px; min-height: 58px; padding: 7px 0; border-bottom: 1px solid var(--border); }
	.sfs-event-list li:last-child { border-bottom: 0; }
	.sfs-event-date { width: 58px; height: 54px; background: var(--cream); border: 1px solid var(--border); border-radius: 6px; text-align: center; padding: 6px 4px; flex: 0 0 58px; }
	.sfs-event-date .month { display: block; font-size: .77rem; line-height: 1; color: var(--text); font-weight: 700; text-transform: uppercase; }
	.sfs-event-date .day { display: block; margin-top: 4px; font-size: 1.15rem; line-height: 1; font-weight: 700; color: var(--ink); }

	.sfs-panel--support { position: relative; overflow: hidden; display: flex; align-items: stretch; background: var(--paper); color: var(--text); }
	.sfs-panel--support::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--paper) 0%, var(--paper) 43%, rgba(255, 253, 250, .86) 55%, rgba(255, 253, 250, .16) 72%, rgba(255, 253, 250, 0) 100%); }
	.sfs-panel--support__content { position: relative; z-index: 2; width: 58%; display: flex; flex-direction: column; align-items: flex-start; }
	.sfs-panel--support h3 { margin: 0 0 38px; color: var(--maroon); }
	.sfs-panel--support p { max-width: 270px; margin: 0; font-size: 1rem; line-height: 1.55; color: var(--text); }
	.sfs-panel--support .sfs-btn { margin-top: auto; white-space: nowrap; }
	.sfs-panel--support img {
    position: absolute;
    top: -1px;
    right: -1px;
    bottom: -1px;
    width: 58%;
    height: calc(100% + 2px);
    z-index: 0;
    object-fit: cover;
    object-position: right center;
    border-radius: 0 8px 8px 0;
}

	/* ============================================================
	   14. FORMATION CARDS
	   ============================================================ */

	/* Equal width/height cards with the image pinned to the top and the
	Explore link pinned to the same baseline regardless of description length. */
	.sfs-cards-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; }
	.sfs-card { display: flex; flex-direction: column; background: var(--paper); border: 1px solid var(--border); border-radius: 7px; overflow: hidden; }
	.sfs-card__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; }
	.sfs-card__media img { width: 100%; height: 100%; object-fit: cover; }
	.sfs-card__icon { position: absolute; bottom: -18px; left: 12px; width: 46px; height: 46px; border-radius: 50%; background: var(--maroon); color: var(--gold-light); display: flex; align-items: center; justify-content: center; font-size: 1.17rem; }
	.sfs-card__body { flex: 1; display: flex; flex-direction: column; padding: 20px 14px 14px; text-align: center; }
	.sfs-card__body h3 { margin-bottom: 3px; font-size: var(--fs-card-heading); }
	.sfs-card__body p { margin-bottom: .8em; font-size: var(--fs-card-desc); line-height: 1.4; }
	.sfs-card__link { margin-top: auto; padding-top: 6px; font-size: .95rem; font-weight: 700; color: var(--maroon); text-decoration: none; }


	/* ============================================================
	   15. DAILY LIFE TIMETABLE & SUBJECTS TAUGHT
	   ============================================================ */

	.sfs-split { display: grid; grid-template-columns: 1fr 1.35fr; gap: 14px; }

	.sfs-timetable-v2 { display: flex; gap: 12px; align-items: flex-start; }
	.sfs-timetable-v2__clock {
		flex: 0 0 58px;
		width: 58px;
		height: 58px;
		border-radius: 50%;
		border: 2px solid var(--gold);
		display: flex;
		align-items: center;
		justify-content: center;
		color: var(--gold);
		background: var(--cream);
	}
	.sfs-timetable-v2__clock svg { width: 32px; height: 32px; }
	.sfs-timetable-v2__list { flex: 1; }

	.sfs-timetable { display: grid; grid-template-columns: 1fr 1fr; column-gap: 18px; }
	.sfs-timetable li { display: flex; justify-content: space-between; gap: 8px; padding: 3px 0; font-size: .78rem; border-bottom: 1px dashed var(--border); }
	.sfs-timetable time { display: inline-block; min-width: 62px; color: var(--maroon); font-weight: 700; font-size: .73rem; }

	.sfs-subjects { display: grid; grid-template-columns: repeat(4, 1fr); }
	.sfs-subject { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 8px; border-right: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: .79rem; }
	.sfs-subject .sfs-icon-inline { color: var(--gold); display: inline-flex; flex-shrink: 0; }


	/* ============================================================
	   16. GALLERY
	   ============================================================ */

	/* Split header: centered eyebrow/title with an actions link pinned to the
	   right edge instead of stacked/centered below the heading (Gallery). */
	.sfs-section-head--split {
		display: grid;
		grid-template-columns: 1fr auto 1fr;
		align-items: center;
		gap: 16px;
	}
	.sfs-section-head--split .sfs-section-head__heading { grid-column: 2; }
	.sfs-section-head--split .sfs-section-head__actions {
		grid-column: 3;
		justify-self: end;
		align-self: center;
		margin-top: 0;
	}

	.sfs-section-head__actions { margin-top: 12px; }

	.sfs-section-head__link {
		display: inline-flex;
		align-items: center;
		gap: 6px;
		color: var(--maroon);
		font-weight: 600;
		font-size: .88rem;
		letter-spacing: .06em;
		text-transform: uppercase;
		text-decoration: none;
		white-space: nowrap;
	}
	.sfs-section-head__link:hover { color: var(--gold); }
	.sfs-feature-media { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; }
	.sfs-feature-media__item { margin: 0; min-width: 0; }
	.sfs-feature-media__item img { display: block; width: 100%; height: 250px; object-fit: cover; border-radius: var(--radius); box-shadow: var(--shadow-sm); }

	/* ============================================================
	   17. ABOUT PAGE — hero, intro, heritage row, vision/mission, stats
	   ============================================================ */

	.sfs-about-hero { position: relative; display: grid; grid-template-columns: 38% 62%; min-height: 310px; background: var(--cream); overflow: hidden; }
	.sfs-about-hero__content {position: relative;z-index: 2;display: flex;flex-direction: column;justify-content: flex-start;padding: 32px 24px 32px clamp(32px, 5vw, 72px);}
	.sfs-about-hero__content h1 { margin: 0; color: var(--maroon); font-family: var(--font-display); font-size: clamp(2rem, 3.5vw, 3rem); line-height: 1.05; }
	.sfs-about-hero__tagline { margin: 14px 0 8px; color: var(--gold); font-family: var(--font-display); font-size: 1.22rem; font-style: italic; }
	.sfs-about-hero__content > p:last-child { max-width: 440px; margin: 0; color: var(--text); font-size: 1.19rem; line-height: 1.65; }

	.sfs-about-hero__media { position: relative; min-height: 310px; overflow: hidden; }
	.sfs-about-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
	.sfs-about-hero__media::after {
		content: '';
		position: absolute;
		inset: 0;
		background: linear-gradient(90deg, var(--cream) 0%, rgba(247, 241, 230, .85) 8%, rgba(247, 241, 230, .25) 30%, transparent 55%);
	}

	.sfs-intro-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 32px; align-items: center; }
	.sfs-intro-grid > div:first-child { padding-right: 10px; }
	.sfs-intro-grid .sfs-video { position: relative; overflow: hidden; border-radius: 10px; box-shadow: var(--shadow-md); }
	.sfs-intro-grid .sfs-video img { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

	/* Heritage & Identity / What We Offer: bordered icon row */
	.sfs-icon-row { display: grid; grid-template-columns: repeat(6, 1fr); background: var(--paper); border: 1px solid var(--border); border-radius: 9px; overflow: hidden; box-shadow: var(--shadow-sm); }
	/* Heritage & Identity row only: the Patron card's title is longer than
	   the other five, so give that one column more room instead of letting
	   it wrap tighter than its neighbors. */
	.sfs-icon-row--heritage { grid-template-columns: 1fr 1fr 1.35fr 1fr 1fr 1fr; }
	.sfs-icon-row__item { min-width: 0; min-height: 145px; padding: 16px 10px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; text-align: center; border-right: 1px solid var(--border); }
	.sfs-icon-row__item:last-child { border-right: 0; }
	.sfs-icon-row__badge { width: 80px; height: 80px; margin-bottom: 10px; display: flex; align-items: center; justify-content: center; color: var(--gold); overflow: hidden; }
	.sfs-icon-row__badge img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
	.sfs-icon-row__item strong { display: block; margin-bottom: 4px; color: var(--maroon); font-family: var(--font-display); font-size: var(--fs-tile-heading); line-height: 1.2; }
	.sfs-icon-row__item span { display: block; max-width: 150px; color: var(--text-muted); font-size: var(--fs-tile-desc); line-height: 1.4; }

	/* Our Vision / Our Mission: integrated image + content cards */
	.sfs-vismis-v2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
	.sfs-vismis-v2__card { min-height: 205px; display: flex; overflow: hidden; background: var(--paper); border: 1px solid var(--border); border-radius: 9px; box-shadow: var(--shadow-sm); }
	.sfs-vismis-v2__card--reverse { flex-direction: row-reverse; }
	.sfs-vismis-v2__media { position: relative; flex: 0 0 43%; }
	.sfs-vismis-v2__media img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; }
	.sfs-vismis-v2__card:not(.sfs-vismis-v2__card--reverse) .sfs-vismis-v2__media img { object-position: left center; }
	.sfs-vismis-v2__media::after { content: ''; position: absolute; inset: 0; }
	.sfs-vismis-v2__card:not(.sfs-vismis-v2__card--reverse) .sfs-vismis-v2__media::after { background: linear-gradient(90deg, transparent 45%, var(--paper) 100%); }
	.sfs-vismis-v2__card--reverse .sfs-vismis-v2__media::after { background: linear-gradient(270deg, transparent 45%, var(--paper) 100%); }
	.sfs-vismis-v2__body { flex: 1; padding: 18px; display: flex; flex-direction: column; justify-content: center; }
	.sfs-vismis-v2__icon { width: 100px; height: 100px; margin-bottom: 8px; display: flex; align-items: center; justify-content: center; color: var(--gold-light); }
	.sfs-vismis-v2__icon .sfs-custom-icon { width: 80px; height: 80px; object-fit: contain; }
	.sfs-vismis-v2__body h3 { margin-bottom: 7px; color: var(--maroon); font-size: var(--fs-card-heading); }
	.sfs-vismis-v2__body p { margin: 0; color: var(--text-muted); font-size: var(--fs-card-desc); line-height: 1.55; }


	/* ============================================================
	   18. FORMATION FUND PAGE — contribute cards, bank/testimonial, CTA
	   ============================================================ */

	/* Generic icon grid, reused by "Our Heritage & Identity" (early build) and "Your Gift Makes an Impact" */
	.sfs-icon-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
	.sfs-icon-grid--6 { grid-template-columns: repeat(6, 1fr); }
	/* Same responsive collapse as --6, for the 5-item "Your Gift Makes an
	   Impact" grid — was previously forced via an inline style that (being
	   higher-priority than any of these breakpoint rules) blocked every one
	   of them and left it stuck at 5 columns down to phone widths. */
	.sfs-icon-grid--5 { grid-template-columns: repeat(5, 1fr); }
	.sfs-icon-item { display: flex; align-items: center; gap: 10px; text-align: left; }
	.sfs-icon-item__glyph { width: 56px; height: 56px; margin: 0; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--gold); overflow: hidden; }
	.sfs-icon-item__glyph img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
	.sfs-icon-item__content { min-width: 0; }
	.sfs-icon-item strong { display: block; font-family: var(--font-display); font-size: var(--fs-tile-heading); color: var(--maroon); }
	.sfs-icon-item span { display: block; font-size: var(--fs-tile-desc); color: var(--text-muted); }

	.sfs-contribute { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
	.sfs-contribute__card { display: flex; align-items: flex-start; gap: 14px; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 22px; text-align: left; }
	.sfs-contribute__icon { flex: 0 0 auto; font-size: 1.6rem; color: var(--gold); margin-bottom: 0; }
	.sfs-contribute__content { min-width: 0; }
	.sfs-contribute__card h3 { font-size: var(--fs-card-heading); }
	.sfs-contribute__card p { font-size: var(--fs-card-desc); color: var(--text-muted); }

	.sfs-bank dl { display: grid; grid-template-columns: auto 1fr; gap: 6px 12px; font-size: 1.1rem; }
	.sfs-bank dt { color: var(--text-muted); }
	.sfs-bank dd { margin: 0; font-weight: 600; }

	.sfs-testimonial { position: relative; border-radius: var(--radius); overflow: hidden; min-height: 220px; background-color: var(--paper); background-size: cover; background-position: right center; color: var(--text); }
	.sfs-testimonial::before { content: ''; position: absolute; inset: 0; z-index: 1; background: linear-gradient(90deg, var(--paper) 0%, var(--paper) 42%, rgba(255, 253, 250, .85) 58%, rgba(255, 253, 250, .15) 76%, rgba(255, 253, 250, 0) 100%); }
	.sfs-testimonial__quote-icon { position: relative; z-index: 2; margin: 20px 0 0 20px; color: var(--gold); }
	.sfs-testimonial blockquote { position: relative; z-index: 2; max-width: 76%; padding: 6px 20px 20px; margin: 0; font-family: var(--font-display); font-style: italic; color: var(--text); }
	.sfs-testimonial blockquote cite { display: block; margin-top: 10px; font-style: normal; font-size: .8rem; color: var(--text-muted); }

	.sfs-cta-band { display: flex; align-items: center; justify-content: space-between; gap: 20px; background: var(--paper); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px 28px; flex-wrap: wrap; }
	.sfs-cta-band__lede { display: flex; align-items: center; gap: 16px; }
	.sfs-cta-band__icon { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; width: 46px; height: 46px; color: var(--gold); }
	.sfs-cta-band__icon svg { width: 42px; height: 42px; }
	.sfs-cta-band__copy h3 { margin: 0 0 .2em; }
	.sfs-cta-band__copy p { margin: 0; }
	.sfs-cta-band__thanks { font-family: var(--font-display); font-style: italic; color: var(--gold); margin: 10px 0 0; }

	/* Equal-height Bank Details / Testimonial cards (Formation Fund only) */
	.sfs-fund-page .sfs-triple { align-items: stretch; }
	.sfs-fund-page .sfs-bank,
	.sfs-fund-page .sfs-testimonial-panel { display: flex; flex-direction: column; min-height: 100%; }
	.sfs-fund-page .sfs-testimonial-panel .sfs-testimonial { flex: 1 1 auto; min-height: 0; margin: 0 -14px -14px 0; border-radius: 6px 6px 8px 6px; }

	/* Formation Fund page: scoped density reduction — affects only markup inside .sfs-fund-page */
	.sfs-hero--fund.sfs-hero--page .sfs-hero__media { min-height: 250px; }
	.sfs-hero--fund.sfs-hero--page h1 { font-size: clamp(1.75rem, 3.6vw, 2.55rem); }
	.sfs-hero--fund.sfs-hero--page .sfs-hero__quote { font-size: 1.22rem; }
	.sfs-hero--fund.sfs-hero--page .sfs-hero__cite { font-size: .92rem; margin-bottom: .75em; }
	.sfs-hero--fund.sfs-hero--page .sfs-hero__inner > p:not(.sfs-hero__quote) { font-size: .9rem; line-height: 1.55; }

	.sfs-fund-page .sfs-section { padding: 18px 0; }
	.sfs-fund-page .sfs-section--tight { padding-top: 14px; padding-bottom: 14px; }
	.sfs-fund-page .sfs-breadcrumb ul { padding: 10px 0; font-size: .92rem; }
	.sfs-fund-page .sfs-breadcrumb li:not(:last-child)::after { content: none; }
	.sfs-fund-page .sfs-breadcrumb li:not(:last-child) { display: flex; align-items: center; gap: 8px; }
	.sfs-fund-page .sfs-breadcrumb__sep { display: inline-flex; align-items: center; opacity: .6; color: #f0dfc8; }
	.sfs-fund-page .sfs-breadcrumb__sep svg { width: 13px; height: 13px; }
	.sfs-fund-page .sfs-eyebrow:not(.sfs-eyebrow--serif) { font-size: .76rem; }
	.sfs-fund-page .sfs-fund-intro p { font-size: .94rem; line-height: 1.6; }
	.sfs-fund-page .sfs-fund-intro .sfs-heritage__quote { font-size: .84rem; padding: 10px 14px 10px 30px; margin-top: 8px; }
	.sfs-fund-page .sfs-fund-intro .sfs-heritage__quote::before { font-size: 1.5rem; top: -4px; left: 6px; }
	.sfs-fund-page .sfs-fund-intro .sfs-heritage__quote cite { font-size: .78rem; }

	/* Balance the video card height with the text column instead of a fixed aspect-ratio */
	.sfs-fund-page .sfs-fund-intro { align-items: stretch; }
	.sfs-fund-page .sfs-fund-intro > :first-child {padding-top: 34px;}
	.sfs-fund-page .sfs-fund-video { height: 100%; min-height: 260px; max-height: 460px; }
	.sfs-fund-page .sfs-fund-video img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
	.sfs-fund-page .sfs-contribute { gap: 22px; }
	.sfs-fund-page .sfs-contribute__card { min-height: 200px; padding: 18px; gap: 14px; }
	.sfs-fund-page .sfs-contribute__icon { display: inline-flex; margin-bottom: 0; }
	.sfs-fund-page .sfs-contribute__icon svg { width: 66px; height: 66px; }
	.sfs-fund-page .sfs-contribute__content { max-width: 170px; }

	.sfs-fund-page .sfs-contribute__icon .sfs-custom-icon {
		width: 80px;
		height: 80px;
		object-fit: contain;
	}
	.sfs-fund-page .sfs-contribute__card h3 { font-size: .92rem; margin: 0 0 .3em; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
	.sfs-fund-page .sfs-contribute__card p { font-size: .85rem; }
	.sfs-fund-page .sfs-contribute__card .sfs-btn { font-size: .72rem; padding: 8px 12px; }
	.sfs-fund-page .sfs-contribute__card .sfs-btn svg { width: 14px; height: 14px; }
	.sfs-fund-page .sfs-icon-grid { padding: 28px 18px; gap: 20px; }
	.sfs-fund-page .sfs-icon-item { gap: 14px; }
	.sfs-fund-page .sfs-icon-item__glyph { width: 100px; height: 100px; margin: 0; }
	.sfs-fund-page .sfs-icon-item__glyph svg { width: 30px; height: 30px; }
	.sfs-fund-page .sfs-icon-item__glyph .sfs-custom-icon { width: 80px; height: 80px; object-fit: contain; }
	.sfs-fund-page .sfs-icon-item strong { font-size: 1rem; }
	.sfs-fund-page .sfs-icon-item span { font-size: .88rem; }
	.sfs-fund-page .sfs-panel { padding: 14px; }
	.sfs-fund-page .sfs-panel h3 { font-size: .96rem; margin-bottom: .45em; }
	/* Testimonial heading only: minimal bottom margin so the flex-grown photo
	   below reclaims that space and reaches as close to the card's full
	   height as the heading allows. */
	.sfs-fund-page .sfs-testimonial-panel h3 { margin-bottom: 4px; }
	.sfs-fund-page .sfs-bank dl { font-size: .88rem; gap: 4px 10px; flex: 1 1 auto; }
	.sfs-fund-page .sfs-fund-note { display: flex; align-items: flex-start; gap: 6px; font-size: .74rem; color: var(--text-muted); margin-top: 10px; }
	.sfs-fund-page .sfs-fund-note svg { flex: 0 0 auto; margin-top: 2px; color: var(--gold); }
	.sfs-fund-page .sfs-goes-list--icons { margin-top: 8px; }
	.sfs-fund-page .sfs-goes-list--icons li { display: flex; align-items: center; gap: 10px; font-size: .86rem; padding: 3px 0; }
	.sfs-fund-page .sfs-goes-list--icons li::before { content: none; }
	.sfs-fund-page .sfs-goes-list__icon-badge { display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 24px; height: 24px; border: 1px solid var(--maroon); border-radius: 50%; color: var(--maroon); }
	.sfs-fund-page .sfs-goes-list__icon-badge svg { width: 12px; height: 12px; stroke-width: 2.4; }
	.sfs-panel--goes {
    position: relative;
    overflow: hidden;
    isolation: isolate;
}

	.sfs-panel--goes__bg {
    position: absolute;
    z-index: 0;
    right: -8px;
    bottom: -8px;
    width: 220px;
    height: auto;
    opacity: .4;
    pointer-events: none;

    -webkit-mask-image: linear-gradient(
        135deg,
        transparent 5%,
        rgba(0,0,0,.35) 30%,
        #000 55%
    );
    mask-image: linear-gradient(
        135deg,
        transparent 5%,
        rgba(0,0,0,.35) 30%,
        #000 55%
    );
}

	.sfs-panel--goes > h3,
	.sfs-panel--goes > .sfs-goes-list {
    position: relative;
    z-index: 1;
}
	.sfs-fund-page .sfs-testimonial__quote-icon { margin: 14px 0 0 14px; }
	.sfs-fund-page .sfs-testimonial blockquote { padding: 4px 14px 14px; font-size: .84rem; }
	.sfs-fund-page .sfs-testimonial blockquote cite { font-size: .74rem; }
	.sfs-fund-page .sfs-cta-band {
    padding: 16px 28px;
    gap: 24px;
}
	.sfs-fund-page .sfs-cta-band__icon { width: 100px; height: 100px; flex: 0 0 100px; }
	.sfs-fund-page .sfs-cta-band__icon .sfs-custom-icon { width: 80px; height: 80px; object-fit: contain; }
	.sfs-fund-page .sfs-cta-band__action { margin-right: 38px; }
	.sfs-fund-page .sfs-cta-band h3 { font-size: 1.05rem; }
	.sfs-fund-page .sfs-cta-band__copy p { font-size: .86rem; }
	.sfs-fund-page .sfs-cta-band__thanks { font-size: .88rem; margin-top: 8px; }
	.sfs-fund-page .sfs-cta-band .sfs-btn { font-size: .82rem; padding: 10px 18px; }


	/* ============================================================
	   19. VIDEO BLOCK
	   ============================================================ */

	.sfs-video { position: relative; border-radius: var(--radius); overflow: hidden; }
	.sfs-video img { width: 100%; aspect-ratio: 16/10; object-fit: cover; }
	.sfs-video__play {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 66px;
		height: 66px;
		border-radius: 50%;
		background: rgba(255, 255, 255, .92);
		color: var(--maroon);
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 1.5rem;
		border: 0;
	}

/* ============================================================
   20. FOOTERS
   ============================================================ */


/* ============================================================
   DEFAULT 4-COLUMN FOOTER
   ============================================================ */

.sfs-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	color: #f2e6d8;

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.sfs-footer::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(
			90deg,
			rgba(20, 4, 4, .72) 0%,
			rgba(20, 4, 4, .64) 50%,
			rgba(20, 4, 4, .58) 100%
		);
}

.sfs-footer__grid {
	position: relative;
	z-index: 1;

	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: 22px;
	padding: 40px 24px 24px;
}

.sfs-footer__col {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.sfs-footer__col h3 {
	color: var(--gold-light);
	font-size: 1.1rem;
	text-transform: uppercase;
	letter-spacing: .06em;
	margin-bottom: .8em;
}

.sfs-footer__col p {
	color: #e6d7c4;
	font-size: 1.15rem;
}

.sfs-footer__lede {
	font-family: var(--font-display);
	font-size: 1.33rem;
	color: #fff;
	font-style: italic;
}

.sfs-footer__list li {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	padding: 4px 0;
	font-size: 1.1rem;
}

.sfs-footer__list li .sfs-icon {
	margin-top: 2px;
}

.sfs-footer__list a {
	text-decoration: none;
}

.sfs-footer__list a:hover {
	color: var(--gold-light);
}

.sfs-footer__col .sfs-btn {
	margin-top: auto;
	align-self: flex-start;
	background: var(--gold);
	border-color: var(--gold);
	color: var(--maroon-darker);
}

.sfs-footer__col .sfs-btn:hover {
	background: var(--gold-light);
	border-color: var(--gold-light);
	color: var(--maroon-darker);
}

.sfs-footer__bottom {
	position: relative;
	z-index: 1;
	border-top: 1px solid rgba(255, 255, 255, .15);
	background: var(--maroon-darker);
}

.sfs-footer__bottom-inner {
	display: flex;
	justify-content: space-between;
	align-items: center;
	flex-wrap: wrap;
	gap: 10px;
	padding: 12px 24px;
	font-size: 1.01rem;
	color: #d9c8b3;
}

.sfs-footer__legal {
	display: flex;
	gap: 16px;
	flex-wrap: wrap;
}

.sfs-footer__legal a {
	text-decoration: none;
	color: #d9c8b3;
}

.sfs-footer__legal a:hover {
	color: var(--gold-light);
}


/* ============================================================
   FIVE-COLUMN FOOTER — PHOTO BACKGROUND
   ============================================================ */

.sfs-footer-v2 {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	color: #f2e6d8;

	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}


/* Dark overlay while keeping the background image visible */
.sfs-footer-v2::before {
	content: '';

	position: absolute;
	inset: 0;

	z-index: 0;

	background:
		linear-gradient(
			90deg,
			rgba(20, 4, 4, .72) 0%,
			rgba(20, 4, 4, .64) 50%,
			rgba(20, 4, 4, .58) 100%
		);
}


/* ============================================================
   FIVE-COLUMN GRID
   ============================================================ */

.sfs-footer-v2__grid {
	position: relative;
	z-index: 1;

	display: grid;

	grid-template-columns:
		1fr
		1.12fr
		1fr
		1fr
		1fr;

	gap: 0;

	padding: 24px 24px 18px;
}


/* ============================================================
   FOOTER COLUMNS
   ============================================================ */

.sfs-footer-v2__col {
	min-width: 0;

	display: flex;
	flex-direction: column;

	padding: 0 22px;

	border-right: 1px solid rgba(255, 255, 255, .18);
}

.sfs-footer-v2__col:first-child {
	padding-left: 26px;
}

.sfs-footer-v2__col:last-child {
	padding-right: 26px;
	border-right: 0;
}


/* ============================================================
   COLUMN HEADINGS
   ============================================================ */

.sfs-footer-v2__col h3 {
	display: flex;
	align-items: center;

	gap: 8px;

	margin: 0 0 14px;

	color: var(--gold-light);

	font-family: var(--font-display);

	font-size: 1rem;

	font-weight: 700;

	line-height: 1.2;

	letter-spacing: .045em;

	text-transform: uppercase;
}


/* Heading icons */

.sfs-footer-v2__col h3 svg,
.sfs-footer-v2__col h3 .sfs-icon {
	flex: 0 0 auto;

	width: 18px;
	height: 18px;

	color: var(--gold-light);
}


/* ============================================================
   FOOTER BODY TEXT
   ============================================================ */

.sfs-footer-v2__col p {
	margin: 0 0 10px;

	color: #f0e4d6;

	font-size: 1rem;

	line-height: 1.5;
}


/* Prayer quotation */

.sfs-footer-v2__col .sfs-footer__lede {
	margin-bottom: 12px;

	color: #fff;

	font-family: var(--font-display);

	font-size: 1.08rem;

	font-style: italic;

	line-height: 1.5;
}

.sfs-footer-v2__cite {
	margin: 0 0 10px;
	color: #e1d1c0;
	font-family: var(--font-body);
	font-size: .82rem;
}


/* ============================================================
   FOOTER LISTS
   ============================================================ */

.sfs-footer-v2__col ul {
	margin: 0;
	padding: 0;

	list-style: none;
}

.sfs-footer-v2__col ul li {
	display: flex;
	align-items: flex-start;

	gap: 8px;

	padding: 3px 0;

	color: #eee0d0;

	font-size: .97rem;

	line-height: 1.45;
}

.sfs-footer-v2__col ul li svg,
.sfs-footer-v2__col ul li .sfs-icon {
	flex: 0 0 auto;

	width: 15px;
	height: 15px;

	margin-top: 2px;

	color: var(--gold-light);
}


/* Footer links */

.sfs-footer-v2__col a {
	text-decoration: none;
	color: inherit;
}

.sfs-footer-v2__col a:hover {
	color: var(--gold-light);
}


/* ============================================================
   FOOTER CTA BUTTONS
   ============================================================ */

.sfs-footer-v2__col .sfs-btn {
	display: inline-flex;

	align-items: center;
	justify-content: center;

	min-height: 44px;

	padding: 0 18px;

	margin-top: auto;
	align-self: flex-start;

	border: 1px solid var(--gold);

	border-radius: 5px;

	background: var(--gold);

	color: var(--maroon-darker);

	font-size: .86rem;

	font-weight: 700;

	line-height: 1;

	letter-spacing: .015em;

	text-transform: uppercase;

	white-space: nowrap;

	transition:
		background-color .2s ease,
		color .2s ease,
		transform .2s ease;
}

.sfs-footer-v2__col .sfs-btn:hover {
	background: var(--gold-light);
	border-color: var(--gold-light);

	color: var(--maroon-darker);

	transform: translateY(-1px);
}


/* ============================================================
   SOCIAL MEDIA BUTTONS
   ============================================================ */

.sfs-footer-v2 .sfs-social {
	display: flex;

	align-items: center;

	gap: 10px;

	margin-top: 14px;
}

.sfs-footer-v2 .sfs-social a {
	display: flex;

	align-items: center;
	justify-content: center;

	width: 46px;
	height: 46px;

	box-sizing: border-box;

	border: 1px solid var(--gold-light);

	border-radius: 6px;

	background: rgba(20, 4, 4, .35);

	color: var(--gold-light);

	transition:
		background-color .2s ease,
		color .2s ease,
		transform .2s ease;
}

.sfs-footer-v2 .sfs-social a svg {
	width: 18px;
	height: 18px;
}

.sfs-footer-v2 .sfs-social a:hover {
	background: var(--gold-light);

	color: var(--maroon-darker);

	transform: translateY(-2px);
}


/* ============================================================
   APP STORE BADGES
   ============================================================ */

.sfs-store-badges {
	display: flex;

	flex-direction: column;

	align-items: flex-start;

	gap: 7px;

	margin-top: 12px;
}

.sfs-store-badge {
	display: inline-flex;

	align-items: center;

	gap: 8px;

	width: 164px;
	height: 43px;

	box-sizing: border-box;

	padding: 0 10px;

	background: #000;

	border: 1px solid rgba(255, 255, 255, .65);

	border-radius: 7px;

	text-decoration: none;

	color: #fff;

	white-space: nowrap;

	transition:
		transform .15s ease,
		background-color .15s ease;
}

.sfs-store-badge:hover {
	background: #111;

	transform: translateY(-1px);
}

.sfs-store-badge svg {
	flex: 0 0 auto;

	width: 23px;
	height: 23px;
}

.sfs-store-badge span {
	display: flex;

	flex-direction: column;

	min-width: 0;

	line-height: 1.05;

	text-align: left;

	white-space: nowrap;
}

.sfs-store-badge small {
	font-size: .53rem;

	line-height: 1;

	letter-spacing: .01em;

	color: #fff;

	white-space: nowrap;
}

.sfs-store-badge strong {
	font-family: var(--font-body);

	font-size: .86rem;

	font-weight: 600;

	line-height: 1;

	letter-spacing: 0;

	color: #fff;

	white-space: nowrap;
}


/* ============================================================
   FORMATION FUND
   ============================================================ */

.sfs-footer-v2__col:last-child p {
	max-width: 225px;
}


/* ============================================================
   BOTTOM COPYRIGHT BAR
   ============================================================ */

.sfs-footer-v2__bottom {
	position: relative;
	z-index: 1;

	border-top: 1px solid rgba(255, 255, 255, .14);

	background: var(--maroon-darker);
}

.sfs-footer-v2__bottom-inner {
	display: flex;

	justify-content: space-between;
	align-items: center;

	flex-wrap: wrap;

	gap: 16px;

	padding: 14px 24px;

	font-size: .91rem;

	color: #e1d1c0;
}

.sfs-footer-v2__bottom-inner > * {
	margin: 0;
}


/* ============================================================
   LEGAL LINKS
   ============================================================ */

.sfs-footer-v2__legal {
	display: flex;

	align-items: center;

	gap: 0;

	flex-wrap: wrap;

	margin: 0;
	padding: 0;

	list-style: none;
}

.sfs-footer-v2__legal li {
	display: flex;

	align-items: center;

	gap: 12px;
}

.sfs-footer-v2__legal li:not(:last-child)::after {
	content: '|';

	margin: 0 12px;

	color: rgba(225, 209, 192, .55);
}

.sfs-footer-v2__legal a {
	text-decoration: none;

	color: #e1d1c0;
}

.sfs-footer-v2__legal a:hover {
	color: var(--gold-light);
}


/* ============================================================
   FORMATION FUND PAGE FOOTER (5-col variant of FOOTER-V2, scoped
   to .sfs-footer-v2--fund so it never touches the About-page footer)
   ============================================================ */

.sfs-footer-v2--fund .sfs-footer-v2__grid {
	grid-template-columns: 1fr 1.3fr .95fr 1fr;
	align-items: stretch;
	padding: 24px 24px 18px;
}

.sfs-footer-v2--fund .sfs-footer-v2__col h3 {
	font-size: .88rem;
	margin-bottom: 10px;
	letter-spacing: .04em;
}

.sfs-footer-v2--fund .sfs-footer-v2__col p {
	font-size: .84rem;
	line-height: 1.45;
	margin-bottom: 8px;
}

.sfs-footer-v2--fund .sfs-footer-v2__col ul li {
	font-size: .82rem;
	padding: 2px 0;
}

.sfs-footer-v2--fund .sfs-footer-v2__col .sfs-btn {
	min-height: 38px;
	padding: 0 14px;
	font-size: .78rem;
}

.sfs-footer-v2--fund .sfs-footer-v2__col .sfs-btn svg {
	width: 12px;
	height: 12px;
}

.sfs-footer-v2--fund .sfs-social {
	margin-top: 10px;
}

.sfs-footer-v2--fund .sfs-social a {
	width: 40px;
	height: 40px;
}

.sfs-footer-v2--fund .sfs-social a svg {
	width: 16px;
	height: 16px;
}

.sfs-footer-v2--fund .sfs-store-badges {
	margin-top: 8px;
}

.sfs-footer-v2--fund .sfs-store-badge {
	width: 156px;
	height: 40px;
}

.sfs-footer-v2--fund .sfs-store-badge strong {
	font-size: .8rem;
}

.sfs-footer-v2--fund .sfs-footer-v2__bottom-inner {
	padding: 14px 24px;
	font-size: .82rem;
}

.sfs-footer-v2--fund .sfs-footer-v2__links {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0 12px;
}


/* ============================================================
   HOME PAGE FOOTER
   ============================================================ */

.sfs-home-footer {
	position: relative;
	isolation: isolate;
	overflow: hidden;

	background: var(--maroon-darker);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;

	color: #f2e6d8;
}

.sfs-home-footer::before {
	content: '';
	position: absolute;
	inset: 0;
	z-index: 0;
	background:
		linear-gradient(
			90deg,
			rgba(20, 4, 4, .72) 0%,
			rgba(20, 4, 4, .64) 50%,
			rgba(20, 4, 4, .58) 100%
		);
}

.sfs-home-footer__grid {
	position: relative;
	z-index: 1;

	display: grid;

	grid-template-columns:
		1fr
		1.2fr
		1fr;
}

.sfs-home-footer__col {
	display: flex;
	flex-direction: column;
	padding: 20px 20px;
}

.sfs-home-footer__col h3 {
	display: flex;

	align-items: center;

	gap: 8px;

	color: var(--gold-light);

	font-size: .9rem;

	text-transform: uppercase;

	letter-spacing: .06em;

	margin-bottom: .9em;
}

.sfs-home-footer__col p,
.sfs-home-footer__col ul li {
	font-size: .92rem;
}

.sfs-home-footer__col p {
	color: #e6d7c4;
}

.sfs-home-footer__col .sfs-footer__lede {
	font-size: 1.45rem;
	margin-bottom: 8px;
}

.sfs-home-footer__col .sfs-btn {
	margin-top: auto;
	align-self: flex-start;
	background: var(--gold);
	border-color: var(--gold);
	color: var(--maroon-darker);
}

.sfs-home-footer__col .sfs-btn:hover {
	background: var(--gold-light);
	border-color: var(--gold-light);
	color: var(--maroon-darker);
}

.sfs-home-footer__col ul li {
	display: flex;

	align-items: center;

	gap: 8px;

	padding: 5px 0;
}

.sfs-home-footer__col a {
	text-decoration: none;

	color: inherit;
}

.sfs-home-footer__col a:hover {
	color: var(--gold-light);
}
/* Align email icon and address on the same line */
.sfs-home-footer__col:first-child li a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}

.sfs-home-footer__col:first-child li a .sfs-icon {
    flex: 0 0 auto;
}

/* Slightly pull the Visit Us column left */
.sfs-home-footer__col:first-child {
    padding-left: 40px;
}
.sfs-home-footer__col:nth-child(2) > p:not(.sfs-footer__lede) {
    max-width: 420px;
    line-height: 1.5;
}

/* ============================================================
   HOME FOOTER BOTTOM
   ============================================================ */

.sfs-home-footer__bottom {
	position: relative;
	z-index: 1;

	border-top: 1px solid rgba(255, 255, 255, .15);
	background: var(--maroon-darker);

	text-align: center;

	padding: 14px 24px;

	font-size: .8rem;

	color: #d9c8b3;
}

/* ============================================================
   RESPONSIVE — TABLET
   ============================================================ */

@media (max-width: 1100px) {

	.sfs-footer-v2__grid {
		grid-template-columns:
			1fr
			1fr
			1fr;

		row-gap: 30px;
	}

	.sfs-footer-v2__col:nth-child(3) {border-right: 0;}

	.sfs-footer-v2__col:nth-child(4),
	.sfs-footer-v2__col:nth-child(5) {padding-top: 20px;}}

/* RESPONSIVE — MOBILE */

@media (max-width: 700px) {

	.sfs-footer-v2__grid {grid-template-columns: 1fr;padding: 32px 20px 24px;}

	.sfs-footer-v2__col,
	.sfs-footer-v2__col:first-child,
	.sfs-footer-v2__col:last-child {padding: 0 0 24px;border-right: 0;border-bottom: 1px solid rgba(255, 255, 255, .15);}
	.sfs-footer-v2__col:last-child {padding-bottom: 0;border-bottom: 0;}
	.sfs-footer-v2__bottom-inner {flex-direction: column;align-items: flex-start;padding: 14px 20px;}
	.sfs-store-badge {width: 164px;}}

	/* ============================================================
	   21. HIGH-CONTRAST MODE
	   ============================================================ */

	body.sfs-high-contrast { background: #fff; color: #000; }
	body.sfs-high-contrast a { text-decoration: underline; }
	body.sfs-high-contrast .sfs-hero__media::before { background: rgba(0, 0, 0, .78) !important; }
	body.sfs-high-contrast .sfs-hero p,
	body.sfs-high-contrast .sfs-hero__eyebrow { color: #fff; }


	/* ============================================================
	   22. UTILITIES
	   ============================================================ */

	.sfs-flow > * + * { margin-top: 1em; }
	.sfs-text-center { text-align: center; }
	.sfs-mt-lg { margin-top: 32px; }

	/* Numeric values inside a component whose "value" slot is otherwise
	   display/serif-styled by default (mini-stats, impact tiles) but
	   sometimes holds text ("Countless", "Quality") that should stay serif —
	   applied only to the actual numeric instances rather than the class.
	   !important: a single-purpose utility that must win over the more
	   specific component "value slot" rules (class + element) it overrides. */
	.sfs-num { font-family: var(--font-body) !important; }


	/* ============================================================
	   23. RESPONSIVE BREAKPOINTS (largest to smallest)
	   ============================================================ */

	/* Wide desktop: pin the container/hero/stats to a narrower reference width */
	@media (min-width: 1100px) {
		.sfs-container { width: calc(100% - 90px); max-width: none; margin-left: 45px; margin-right: 45px; padding-left: 0; padding-right: 0; }
		.sfs-hero__media { min-height: 335px; }
		.sfs-hero__inner { max-width: 640px; margin-left: 0; padding-left: 0; padding-right: 0; }
		.sfs-stats { width: calc(100% - 90px); max-width: none; margin-left: 45px; margin-right: 45px; }
	}

	@media (max-width: 1200px) {
		.sfs-contribute,
		.sfs-icon-grid--6,
		.sfs-icon-grid--5 { grid-template-columns: repeat(3, 1fr); }
	}

	@media (max-width: 1024px) {

	/* The 80px legacy left-offset (see .sfs-hero__inner) only has room to
	   breathe on wide desktop; below this it pushes hero text past the
	   right edge with no scrollbar to reveal it — genuinely clipped, not
	   just visually tight. Reset to 0 for tablet and phone; desktop keeps
	   the existing offset untouched. */
	.sfs-hero__inner { left: 0; }

	/* Header switches back to a simple mobile row */

	.sfs-header__row {display: flex;flex-wrap: nowrap;justify-content: space-between;align-items: center;}
	.sfs-header__right {display: none;}
	.sfs-header__utility {display: none;}
	.sfs-nav-toggle {display: flex;}
	.sfs-nav {display: none;background: #fff;}
	.sfs-nav.is-open {display: block;}
	/* .sfs-nav is nested inside .sfs-header__right, which is display:none on
	   mobile — without this, toggling .is-open on the nav itself does nothing
	   visible, since a display:none ancestor still collapses its box to
	   nothing regardless of any descendant's own display value. */
	.sfs-header__right:has(.sfs-nav.is-open) {display: block;}
	/* Without this, the open nav is still sized as a shrink-to-fit flex item
	   (only as wide as the leftover space next to the logo/toggle in the
	   nowrap header row) instead of a proper full-width mobile dropdown. */
	.sfs-nav.is-open {position: absolute; top: 100%; left: 0; right: 0; width: 100%; max-height: calc(100vh - 100%); overflow-y: auto; box-shadow: var(--shadow-md); z-index: 20;}
	.sfs-nav__list {flex-direction: column;align-items: stretch;}
	.sfs-nav__list a {justify-content: flex-start;padding: 12px 0;border-bottom: 1px solid var(--border);}


	/* KEEP EVERYTHING BELOW THIS EXACTLY AS IT IS */

	.sfs-heritage__panel.is-active {grid-template-columns: 1fr 1fr;min-height: 0;}
	.sfs-heritage__panel.is-active img:last-child,
	.sfs-heritage__panel.is-active .sfs-heritage__portrait-wrap:last-child {display: none;}
	.sfs-heritage__bg-image {display: none;}
	.sfs-grid--2 {grid-template-columns: 1fr;}
	.sfs-fund-page .sfs-fund-video { height: auto; min-height: 0; max-height: none; }
	.sfs-fund-page .sfs-fund-video img { height: auto; aspect-ratio: 16/10; }

		.sfs-about-hero { flex-direction: column; }
		.sfs-about-hero__content { flex: none; max-width: 100%; padding: 40px 24px; }
		.sfs-about-hero__media { min-height: 280px; }
		.sfs-about-hero__media::after { background: linear-gradient(0deg, var(--cream) 0%, rgba(247, 241, 230, 0) 30%); }
		.sfs-intro-grid { grid-template-columns: 1fr; }
		.sfs-icon-row { flex-wrap: wrap; }
		.sfs-icon-row__item { flex: 1 1 33.33%; border-bottom: 1px solid var(--border); }
		.sfs-vismis-v2 { grid-template-columns: 1fr; }
		.sfs-stats-v2 { flex-wrap: wrap; }
		.sfs-stats-v2__item { flex: 1 1 50%; border-bottom: 1px solid rgba(255, 255, 255, .18); }
		.sfs-rectorband { grid-template-columns: 1fr; }
		/* Two columns now wrap onto separate rows, so a right-hand divider
		   would either dangle mid-row or fight the wrap; switch to a
		   bottom rule and let the last item in each row keep its border
		   (nth-child(2n) column is on the row edge, no border needed). */
		.sfs-footer-v2__grid,
		.sfs-footer-v2--fund .sfs-footer-v2__grid { grid-template-columns: repeat(2, 1fr); row-gap: 28px; }
		.sfs-footer-v2__col { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .16); padding: 0 22px 20px; }
		.sfs-footer-v2__col:nth-child(odd) { padding-left: 0; }
		.sfs-footer-v2__col:nth-child(even) { padding-right: 0; }
		.sfs-footer-v2__col:last-child { border-bottom: 0; }

		.sfs-home-footer__grid { grid-template-columns: 1fr 1fr; }
	}

	@media (max-width: 900px) {
		.sfs-hero__media { min-height: 360px; }
		.sfs-stats__grid { grid-template-columns: repeat(3, 1fr); }
		.sfs-stat { border-bottom: 1px solid var(--border); }

		.sfs-heritage { grid-template-columns: 1fr; }
		.sfs-heritage__tabs { display: grid; grid-template-columns: repeat(2, 1fr); }
		.sfs-heritage__tabs-title { grid-column: 1 / -1; }

		.sfs-triband,
		.sfs-triple,
		.sfs-split { grid-template-columns: 1fr; }
		.sfs-home-panels .sfs-triple { grid-template-columns: repeat(2, minmax(0, 1fr)); }
		.sfs-home-panels .sfs-panel--support { grid-column: 1 / -1; }
		.sfs-cards-4 { grid-template-columns: repeat(2, 1fr); }
		.sfs-feature-media { grid-template-columns: repeat(2, minmax(0, 1fr)); }

		.sfs-about-hero { grid-template-columns: 1fr; }
		.sfs-about-hero__content { padding: 40px 24px; }
		.sfs-about-hero__media { min-height: 260px; }
		.sfs-icon-row { grid-template-columns: repeat(3, 1fr); }
		.sfs-vismis-v2,
		.sfs-rectorband { grid-template-columns: 1fr; }
		.sfs-stats-v2 { grid-template-columns: repeat(2, 1fr); }
	}

	@media (max-width: 820px) {
		.sfs-contribute,
		.sfs-icon-grid--6,
		.sfs-icon-grid--5 { grid-template-columns: repeat(2, 1fr); }
		.sfs-footer__grid { grid-template-columns: repeat(2, 1fr); }
	}

	@media (max-width: 640px) {
		.sfs-topbar__contact li:nth-child(3) { display: none; }
		.sfs-cta-band { flex-direction: column; align-items: flex-start; }

		.sfs-vismis-split { grid-template-columns: 1fr; }
		.sfs-vismis-split__divider { display: none; }

		.sfs-section-head--split { grid-template-columns: 1fr; text-align: center; }
		.sfs-section-head--split .sfs-section-head__heading,
		.sfs-section-head--split .sfs-section-head__actions { grid-column: 1; justify-self: center; }
		.sfs-section-head--split .sfs-section-head__actions { margin-top: 10px; }

		.sfs-timeline { flex-direction: column; align-items: stretch; gap: 18px; position: relative; }
		.sfs-timeline::before { top: 20px; bottom: 20px; left: 19px; right: auto; width: 1px; height: auto; }
		.sfs-timeline__item { display: flex; align-items: flex-start; gap: 14px; text-align: left; min-width: 0; }
		.sfs-timeline__dot { margin: 0; flex-shrink: 0; }

		.sfs-icon-row__item { flex: 1 1 50%; }
		.sfs-vismis-v2__card,
		.sfs-vismis-v2__card--reverse { flex-direction: column; }
		.sfs-vismis-v2__media { flex: none; height: 200px; }
		.sfs-vismis-v2__card:not(.sfs-vismis-v2__card--reverse) .sfs-vismis-v2__media::after { background: linear-gradient(0deg, transparent 60%, var(--paper) 100%); }
		.sfs-vismis-v2__card--reverse .sfs-vismis-v2__media::after { background: linear-gradient(0deg, transparent 60%, var(--paper) 100%); }
		.sfs-rectorband__rector { flex-direction: column; }
		.sfs-rectorband__rector img { width: 100%; height: 200px; }
		.sfs-footer-v2__grid,
		.sfs-footer-v2--fund .sfs-footer-v2__grid { grid-template-columns: 1fr; row-gap: 24px; }
		.sfs-footer-v2__col { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .16); padding: 0 0 20px; }
		.sfs-footer-v2__col:last-child { border-bottom: 0; }

		.sfs-home-footer__grid { grid-template-columns: 1fr; }
		.sfs-timetable-v2 { flex-direction: column; align-items: center; text-align: center; }
	}

	@media (max-width: 600px) {
		.sfs-hero__media { min-height: 430px; }
		/* The 80px legacy left-offset (see .sfs-hero__inner) pushes the hero
		   text off the right edge on narrow phones with no scrollbar to
		   reveal it — genuinely clipped, not just visually tight. Reset to 0
		   here only; desktop keeps its existing offset untouched. */
		.sfs-hero__inner { padding: 45px 20px 70px; }
		.sfs-hero h1 { font-size: 2.35rem; }
		.sfs-hero p { font-size: 1.1rem; }

		.sfs-stats { margin-top: -35px; }
		/* Single column here (not 2): the icons are now sized to match the
		   card icons site-wide (90px), which no longer fits two stat items
		   side by side at phone widths without cramping/overflowing. */
		.sfs-stats__grid { grid-template-columns: 1fr; }
		.sfs-stat { border-right: 0; border-bottom: 1px solid var(--border); }
		.sfs-stat:last-child { border-bottom: 0; }

		.sfs-heritage__tabs { grid-template-columns: 1fr; }
		.sfs-heritage__panel { min-height: 420px; }

		.sfs-cards-4 { grid-template-columns: 1fr 1fr; }
		.sfs-timetable { grid-template-columns: 1fr; }
		.sfs-subjects { grid-template-columns: 1fr 1fr; }
		.sfs-home-panels .sfs-triple { grid-template-columns: 1fr; }
		.sfs-home-panels .sfs-panel { min-height: 0; }
		.sfs-home-panels .sfs-panel--support { grid-column: auto; min-height: 300px; }
		.sfs-panel--support__content { width: 68%; }
		.sfs-panel--support p { max-width: 235px; font-size: .95rem; }
		.sfs-panel--support img { width: 62%; }
		.sfs-feature-media { grid-template-columns: 1fr; }

		.sfs-icon-row { grid-template-columns: repeat(2, 1fr); }
		.sfs-icon-row__item { border-right: 1px solid var(--border); }
		.sfs-icon-row__item:nth-child(even) { border-right: 0; }
		.sfs-intro-grid { grid-template-columns: 1fr; gap: 25px; }
		.sfs-stats-v2 { grid-template-columns: 1fr; }
		.sfs-stats-v2__item { border-right: 0; border-bottom: 1px solid rgba(255, 255, 255, .2); }
		.sfs-stats-v2__item:last-child { border-bottom: 0; }
		.sfs-rectorband { grid-template-columns: 1fr; }

		.sfs-home-footer__grid { grid-template-columns: 1fr; }
	}

	@media (max-width: 480px) {
		.sfs-cards-4,
		.sfs-contribute,
		.sfs-icon-grid--6,
		.sfs-icon-grid--5,
		.sfs-footer__grid { grid-template-columns: 1fr; }
		.sfs-rector { grid-template-columns: 1fr; text-align: center; }
		.sfs-rector img { width: 100%; min-height: 220px; }
		.sfs-rector > div { align-items: center; }
		.sfs-header__row { flex-wrap: wrap; }
		.sfs-logo img { width: 170px; }
		.sfs-update-list img { width: 68px; height: 46px; }
		.sfs-panel--support__content { width: 72%; }
		.sfs-panel--support h3 { margin-bottom: 28px; }
		.sfs-panel--support .sfs-btn--sm { padding: 8px 12px; font-size: .72rem; }
		.sfs-panel--support img { width: 68%; }

		.sfs-icon-row__item { flex: 1 1 100%; border-right: 0; border-bottom: 1px solid var(--border); }
		.sfs-stats-v2__item { flex: 1 1 100%; border-right: 0; }
	}

.sfs-footer__address {line-height: 1.5;}