/* =========================================================================
   WELS School — main stylesheet
   Colour / shape tokens are injected as CSS variables from the Customizer
   (see inc/dynamic-css.php). Fallback values below keep the theme usable
   even before the plugin/customizer run.
   ========================================================================= */

:root {
	--wels-primary: #1f5f5b;
	--wels-primary-dark: #164542;
	--wels-accent: #e8792b;
	--wels-ink: #1e2a2a;
	--wels-muted: #5b6b6a;
	--wels-bg: #ffffff;
	--wels-alt-bg: #f4f1ea;
	--wels-header-bg: #ffffff;
	--wels-topbar-bg: #164542;
	--wels-footer-bg: #12211f;
	--wels-radius: 14px;
	--wels-btn-radius: 14px;
	--wels-base-size: 16px;
	--wels-heading-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	/*
	 * Body copy stays on the plain system font by default — even when a
	 * Google Font is configured for headings (--wels-gfont) — so paragraph
	 * text, nav, and dense data tables (faculty list, CBSE disclosure) stay
	 * easy to scan at small sizes. A display/serif face dresses up h1–h6
	 * only. inc/dynamic-css.php only ever overrides --wels-heading-font.
	 */
	--wels-body-font: "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	/*
	 * Type scale. One set of heading sizes for the whole site, so the same
	 * kind of heading is the same size on every page. Components point at
	 * these rather than each picking their own — which is how six different
	 * section-heading sizes got into the site one component at a time.
	 *
	 *   h1  page titles and banners
	 *   h2  section headings — the level most pages use
	 *   h3  sub-headings, and titles inside a band
	 *   h4  small labels
	 */
	--wels-h1: clamp(1.9rem, 4.2vw, 2.7rem);
	--wels-h2: clamp(1.5rem, 3vw, 2.05rem);
	--wels-h3: clamp(1.15rem, 2.2vw, 1.45rem);
	--wels-h4: 1.05rem;
	/*
	 * Bands. The alternating photo-and-text pattern appears in three places
	 * built at three different times — Facilities, the leadership messages,
	 * Our Founder, Transport — and each had picked its own column split,
	 * gap, photo shape and shadow. They share these now, so the pattern
	 * reads as one thing wherever it turns up.
	 *
	 * Two differences are kept on purpose: a portrait of a person stays 4:5
	 * rather than 4:3, and a full-width tinted section keeps its tint. Those
	 * are decisions; the rest was drift.
	 */
	--wels-band-media: minmax(0, 44%);
	--wels-band-gap: clamp(24px, 4vw, 52px);
	--wels-band-rhythm: clamp(32px, 5vw, 56px);
	--wels-band-ratio: 4 / 3;
	--wels-band-shadow: 0 14px 34px rgba(20, 40, 38, 0.14);
	--wels-maxw: 1180px;
	--wels-shadow: 0 6px 24px rgba(20, 40, 38, 0.10);
	--wels-shadow-sm: 0 2px 10px rgba(20, 40, 38, 0.08);
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
	margin: 0;
	font-family: var(--wels-body-font);
	font-size: var(--wels-base-size);
	line-height: 1.65;
	color: var(--wels-ink);
	background: var(--wels-bg);
	-webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--wels-primary); text-decoration: none; }
a:hover, a:focus { color: var(--wels-primary-dark); text-decoration: underline; }
h1, h2, h3, h4, h5, h6 { font-family: var(--wels-heading-font); line-height: 1.2; color: var(--wels-ink); font-weight: 700; letter-spacing: -0.01em; }

:focus-visible { outline: 3px solid var(--wels-accent); outline-offset: 2px; }

.screen-reader-text {
	position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.wels-skip-link:focus {
	position: fixed; left: 12px; top: 12px; z-index: 1000; width: auto; height: auto;
	clip: auto; padding: 10px 16px; background: #fff; color: var(--wels-primary); border-radius: 8px;
}

.wels-container { max-width: var(--wels-maxw); margin: 0 auto; padding-left: 20px; padding-right: 20px; }

/* ---------- Buttons ---------- */
.wels-btn {
	display: inline-flex; align-items: center; justify-content: center; gap: 8px;
	padding: 12px 22px; border-radius: var(--wels-btn-radius); border: 2px solid transparent;
	font-weight: 600; font-size: 0.95rem; line-height: 1; cursor: pointer;
	text-decoration: none; transition: transform .15s ease, background .15s ease, color .15s ease, box-shadow .15s ease;
}
.wels-btn:hover, .wels-btn:focus { text-decoration: none; transform: translateY(-1px); }
.wels-btn-primary { background: var(--wels-primary); color: #fff; }
.wels-btn-primary:hover, .wels-btn-primary:focus { background: var(--wels-primary-dark); color: #fff; }
.wels-btn-accent { background: var(--wels-accent); color: var(--wels-accent-ink, #fff); }
.wels-btn-accent:hover, .wels-btn-accent:focus { filter: brightness(0.93); color: var(--wels-accent-ink, #fff); }
.wels-btn-outline { background: transparent; color: var(--wels-primary); border-color: var(--wels-primary); }
.wels-btn-outline:hover, .wels-btn-outline:focus { background: var(--wels-primary); color: #fff; }
.wels-btn-ghost { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4); }
.wels-btn-ghost:hover, .wels-btn-ghost:focus { background: rgba(255,255,255,.25); color: #fff; }
.wels-btn-link { background: none; border: 0; color: var(--wels-primary); padding: 6px 2px; font-weight: 600; }
.wels-btn-link:hover, .wels-btn-link:focus { text-decoration: underline; }
.wels-btn-sm { padding: 8px 14px; font-size: 0.85rem; }
.wels-link { font-weight: 600; }

/* ---------- Sections ---------- */
.wels-section { padding: clamp(44px, 7vw, 84px) 0; background: var(--wels-bg); position: relative; }
/* Explicit alternating backgrounds (order-independent) */
.wels-journey, .wels-facilities, .wels-kg, .wels-faculty, .wels-notices, .wels-downloads, .wels-contact { background: var(--wels-alt-bg); }
.wels-stats, .wels-payfee { background: var(--wels-primary); }
.wels-section-head { max-width: 720px; margin: 0 auto clamp(28px, 4vw, 48px); text-align: center; }
.wels-section-title { font-size: var(--wels-h2); margin: 0 0 .3em; position: relative; }
.wels-section-title::after { content: ""; display: block; width: 56px; height: 4px; background: var(--wels-accent); border-radius: 3px; margin: 14px auto 0; }
.wels-section-sub { color: var(--wels-muted); margin: 0; font-size: 1.05rem; }
.wels-section-cta { text-align: center; margin-top: clamp(24px, 4vw, 40px); }

/* ---------- Top bar ---------- */
/* The ink colour is worked out from the bar's own background — see
   inc/dynamic-css.php — so a white bar gets purple text and a dark one
   white, without either being hardcoded here. */
.wels-topbar {
	background: var(--wels-topbar-bg);
	color: var(--wels-topbar-ink, #fff);
	font-size: 0.85rem;
	border-bottom: 1px solid color-mix(in srgb, var(--wels-topbar-ink, #fff) 14%, transparent);
}
.wels-topbar a { color: inherit; }
.wels-topbar a:hover { color: inherit; opacity: .72; text-decoration: none; }
.wels-topbar-inner { display: flex; flex-wrap: wrap; gap: 4px 22px; align-items: center; justify-content: space-between; padding-top: 8px; padding-bottom: 8px; }
/* Equal side groups are what centre the middle one. */
.wels-topbar-left { flex: 1 1 0; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 22px; }
/*
 * Nothing but the pill lives here, so this group is exactly as wide as the
 * pill and lands dead centre of the bar, under the crest. The phone number
 * sits over in the right-hand group beside the social icons.
 */
.wels-topbar-centre {
	flex: 0 0 auto;
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px;
}
.wels-topbar-phone { white-space: nowrap; }
.wels-topbar-email { display: inline-flex; align-items: center; gap: 6px; }
/* One icon, then each number as its own dialable link. */
.wels-topbar-phone { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.wels-topbar-sep { opacity: .5; font-weight: 400; }
.wels-topbar-icon { width: 16px; height: 16px; flex: 0 0 16px; }
.wels-topbar-right { flex: 1 1 0; list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px 20px; align-items: center; justify-content: flex-end; }
.wels-topbar-right li { display: inline-flex; align-items: center; gap: 6px; }
.wels-topbar-right .dashicons { font-size: 16px; width: 16px; height: 16px; }
.wels-topbar-aff { font-weight: 600; letter-spacing: .02em; }
.wels-topbar-link a { opacity: .85; }
.wels-topbar-social { display: inline-flex; }
.wels-topbar-social .wels-social-row { gap: 8px; }
.wels-topbar-social .wels-social {
	width: 24px; height: 24px;
	background: color-mix(in srgb, var(--wels-topbar-ink, #fff) 13%, transparent);
	color: var(--wels-topbar-ink, #fff);
}
.wels-topbar-social .wels-social svg { width: 14px; height: 14px; }
.wels-topbar-social .wels-social:hover, .wels-topbar-social .wels-social:focus {
	background: color-mix(in srgb, var(--wels-topbar-ink, #fff) 24%, transparent);
	color: var(--wels-topbar-ink, #fff);
	opacity: 1;
}

/* ---------- Header (two-tier: brand strip + nav bar) ---------- */
.wels-site-header { background: var(--wels-header-bg); position: sticky; top: 0; z-index: 200; box-shadow: 0 1px 0 rgba(20,40,38,.08); transition: box-shadow .25s ease; }
.wels-site-header.is-shrunk { box-shadow: var(--wels-shadow); }

.wels-header-inner { display: flex; align-items: center; gap: 20px 28px; padding-top: 16px; padding-bottom: 16px; transition: padding .25s ease; }
.wels-site-header.is-shrunk .wels-header-inner { padding-top: 9px; padding-bottom: 9px; }

.wels-branding { display: flex; align-items: center; gap: 14px; min-width: 0; }
.wels-branding .custom-logo-link { display: inline-flex; flex: 0 0 auto; line-height: 0; }
.wels-branding .custom-logo { width: auto; height: 60px; max-width: 260px; object-fit: contain; transition: height .25s ease; }
.wels-site-header.is-shrunk .wels-branding .custom-logo { height: 44px; }
.wels-branding-text { display: flex; flex-direction: column; min-width: 0; }
.wels-site-name { font-family: var(--wels-heading-font); font-weight: 700; font-size: clamp(1.05rem, 2.4vw, 1.35rem); color: var(--wels-ink); letter-spacing: -0.01em; line-height: 1.15; }
a.wels-site-name:hover { text-decoration: none; color: var(--wels-primary); }
.wels-site-sub { font-size: 0.8rem; color: var(--wels-muted); }

.wels-header-right { display: flex; align-items: center; gap: 12px; flex: 0 0 auto; }
.wels-branding { margin-right: auto; }

/* ---- Header layout: two rows (stacked) ---- */
.wels-header-stacked .wels-header-inner { flex-wrap: wrap; }
.wels-header-stacked .wels-branding { margin-right: auto; }
.wels-header-stacked .wels-primary-nav {
	order: 3; flex-basis: 100%;
	margin: 12px -20px -16px; padding: 0 20px;
	border-top: 1px solid rgba(20,40,38,.08);
}
.wels-header-stacked.is-shrunk .wels-primary-nav { margin-top: 6px; margin-bottom: -9px; }
.wels-header-stacked .wels-primary-nav { justify-content: flex-start; }
.wels-header-stacked.wels-nav-center .wels-primary-nav { justify-content: center; }
.wels-header-stacked.wels-nav-right  .wels-primary-nav { justify-content: flex-end; }

/* ---- Header layout: single row (inline) ---- */
.wels-header-inline .wels-primary-nav { margin-left: auto; }
.wels-header-inline .wels-header-right { margin-left: 0; }
.wels-header-inline .wels-menu > .wels-menu-item > a { padding: 12px 14px; }

.wels-site-header.is-shrunk .wels-menu > .wels-menu-item > a { padding-top: 11px; padding-bottom: 11px; }
.wels-primary-nav { display: flex; }
.wels-menu { list-style: none; margin: 0; padding: 0; display: flex; align-items: stretch; flex-wrap: wrap; gap: 0; }
.wels-menu > .wels-menu-item > a { padding: 15px 16px; }
.wels-menu a {
	display: flex; align-items: center; gap: 6px; padding: 12px 16px;
	color: var(--wels-ink); font-weight: 600; font-size: 0.94rem; border-radius: 8px;
	position: relative; transition: color .18s ease, background .18s ease;
}
.wels-menu > .wels-menu-item > a::after {
	content: ""; position: absolute; left: 16px; right: 16px; bottom: 6px; height: 2px;
	background: var(--wels-accent); border-radius: 2px; transform: scaleX(0); transform-origin: left;
	transition: transform .22s ease;
}
.wels-menu > .wels-menu-item > a:hover::after,
.wels-menu > .wels-menu-item.current-menu-item > a::after,
.wels-menu > .wels-menu-item.current-menu-ancestor > a::after { transform: scaleX(1); }
.wels-menu a:hover, .wels-menu .current-menu-item > a, .wels-menu .current-menu-ancestor > a { color: var(--wels-primary); text-decoration: none; }
.wels-menu-item { position: relative; }
.wels-sub-menu {
	list-style: none; margin: 0; padding: 8px; position: absolute; left: 0; top: 100%;
	min-width: 230px; background: #fff; border-radius: 12px; box-shadow: var(--wels-shadow);
	opacity: 0; visibility: hidden; transform: translateY(10px); transition: opacity .2s ease, transform .2s ease, visibility .2s; z-index: 50;
	border: 1px solid rgba(20,40,38,.06);
}
.wels-sub-menu .wels-sub-menu { left: 100%; top: -9px; }
.wels-menu-item:hover > .wels-sub-menu, .wels-menu-item:focus-within > .wels-sub-menu { opacity: 1; visibility: visible; transform: translateY(0); }
.wels-sub-menu a { padding: 10px 12px; font-weight: 500; border-radius: 7px; }
.wels-sub-menu a:hover { background: rgba(31,95,91,.08); }
.wels-submenu-toggle { display: none; }

.wels-caret { display: inline-block; width: 7px; height: 7px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); margin-top: -3px; opacity: .6; }

.wels-header-actions { display: flex; align-items: center; gap: 10px; }
.wels-header-actions-header .wels-btn { padding: 9px 16px; font-size: 0.85rem; }
.wels-header-actions-mobile { flex-direction: column; align-items: stretch; margin-top: 20px; }
.wels-header-actions-mobile .wels-btn { width: 100%; }

/* ---------- Mobile nav toggle ---------- */
.wels-nav-toggle {
	display: none; width: 44px; height: 44px; border: 0; background: transparent; cursor: pointer;
	position: relative; border-radius: 8px; margin-left: auto;
}
.wels-nav-toggle-bar, .wels-nav-toggle-bar::before, .wels-nav-toggle-bar::after {
	content: ""; position: absolute; left: 10px; width: 24px; height: 2px; background: var(--wels-ink); transition: .2s ease;
}
.wels-nav-toggle-bar { top: 21px; }
.wels-nav-toggle-bar::before { top: -7px; }
.wels-nav-toggle-bar::after { top: 7px; }
body.wels-nav-open .wels-nav-toggle-bar { background: transparent; }
body.wels-nav-open .wels-nav-toggle-bar::before { top: 0; transform: rotate(45deg); }
body.wels-nav-open .wels-nav-toggle-bar::after { top: 0; transform: rotate(-45deg); }

/* ---------- Mobile off-canvas ---------- */
.wels-mobile-nav { position: fixed; inset: 0; z-index: 300; visibility: hidden; }
.wels-mobile-nav.is-open { visibility: visible; }
.wels-mobile-nav-overlay { position: absolute; inset: 0; background: rgba(10,20,19,.5); opacity: 0; transition: opacity .25s ease; }
.wels-mobile-nav.is-open .wels-mobile-nav-overlay { opacity: 1; }
.wels-mobile-nav-panel {
	position: absolute; top: 0; right: 0; height: 100%; width: min(86vw, 360px);
	background: #fff; padding: 64px 22px 40px; overflow-y: auto;
	transform: translateX(100%); transition: transform .28s ease; box-shadow: -12px 0 40px rgba(0,0,0,.18);
	z-index: 1;
}
.wels-mobile-nav.is-open .wels-mobile-nav-panel { transform: translateX(0); }
.wels-mobile-close { position: absolute; top: 14px; right: 16px; width: 40px; height: 40px; border: 0; background: #f1f1f1; border-radius: 50%; font-size: 24px; line-height: 1; cursor: pointer; }
.wels-menu-mobile { flex-direction: column; align-items: stretch; gap: 0; }
.wels-menu-mobile .wels-menu-item { border-bottom: 1px solid #eee; }
.wels-menu-mobile a { padding: 14px 6px; font-size: 1rem; }
.wels-menu-mobile .wels-sub-menu {
	position: static; opacity: 1; visibility: visible; transform: none; box-shadow: none;
	padding: 0 0 8px 16px; min-width: 0; display: none;
}
.wels-menu-mobile .wels-menu-item.is-expanded > .wels-sub-menu { display: block; }
.wels-menu-mobile .wels-submenu-toggle {
	display: block; position: absolute; right: 0; top: 6px; width: 40px; height: 40px;
	background: transparent; border: 0; cursor: pointer; color: var(--wels-ink);
}
.wels-menu-mobile .wels-menu-item.is-expanded > .wels-submenu-toggle .wels-caret { transform: rotate(-135deg); margin-top: 2px; }

/* ---------- Hero slider ---------- */
.wels-hero { position: relative; overflow: hidden; background: #0c1a19; }
.wels-hero-track { position: relative; height: clamp(360px, 60vh, 620px); }
.wels-slide {
	position: absolute; inset: 0; background-size: cover; background-position: center;
	opacity: 0; transition: opacity .7s ease; display: flex; align-items: flex-end;
}
.wels-slide.is-active { opacity: 1; }
.wels-slide::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,18,17,0) 30%, rgba(8,18,17,.72) 100%); }
.wels-slide-caption { position: relative; z-index: 2; width: 100%; padding-bottom: clamp(44px, 7vw, 84px); color: #fff; }
.wels-slide-caption h2 { color: #fff; font-size: clamp(1.7rem, 4.6vw, 3.1rem); margin: 0 0 .35em; max-width: 20ch; text-shadow: 0 2px 24px rgba(0,0,0,.4); line-height: 1.12; }
.wels-slide-caption p { font-size: clamp(1rem, 2vw, 1.28rem); max-width: 48ch; margin: 0 0 1.3em; opacity: 0; transform: translateY(16px); transition: opacity .6s ease .35s, transform .6s ease .35s; }
.wels-slide-caption .wels-btn { opacity: 0; transform: translateY(16px); transition: opacity .6s ease .5s, transform .6s ease .5s; }
.wels-slide.is-active .wels-slide-caption p,
.wels-slide.is-active .wels-slide-caption .wels-btn { opacity: 1; transform: none; }

/* Headline word-by-word reveal */
.wels-slide-caption h2 .wels-word {
	display: inline-block; opacity: 0; transform: translateY(28px) rotate(1.5deg);
	transition: opacity .5s cubic-bezier(.2,.7,.2,1), transform .5s cubic-bezier(.2,.7,.2,1);
}
.wels-slide.is-active .wels-slide-caption h2 .wels-word { opacity: 1; transform: none; }

/* Autoplay progress bar */
.wels-hero-progress { position: absolute; left: 0; right: 0; bottom: 0; height: 3px; background: rgba(255,255,255,.18); z-index: 3; }
.wels-hero-progress-bar { display: block; height: 100%; background: var(--wels-accent); transform: scaleX(0); transform-origin: left; }
.wels-hero-progress-bar.is-running { animation: wels-hero-progress var(--wels-hero-int, 6000ms) linear forwards; }
.wels-hero.is-paused .wels-hero-progress-bar.is-running { animation-play-state: paused; }
@keyframes wels-hero-progress { from { transform: scaleX(0); } to { transform: scaleX(1); } }

/* Curved divider where the hero meets the page */
.wels-hero::after {
	content: ""; position: absolute; left: -4%; right: -4%; bottom: -1px; height: 54px; z-index: 4;
	background: var(--wels-bg);
	border-radius: 50% 50% 0 0 / 100% 100% 0 0;
	pointer-events: none;
}
.wels-hero-nav {
	position: absolute; top: 50%; transform: translateY(-50%); z-index: 3;
	width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgba(255,255,255,.22);
	color: #fff; font-size: 26px; line-height: 1; cursor: pointer; backdrop-filter: blur(3px);
}
.wels-hero-nav:hover { background: rgba(255,255,255,.4); }
.wels-hero-prev { left: 16px; }
.wels-hero-next { right: 16px; }
.wels-hero-dots { position: absolute; left: 0; right: 0; bottom: 14px; z-index: 3; display: flex; justify-content: center; gap: 8px; }
.wels-hero-dot { width: 10px; height: 10px; border-radius: 50%; border: 0; background: rgba(255,255,255,.45); cursor: pointer; padding: 0; }
.wels-hero-dot.is-active { background: #fff; width: 26px; border-radius: 6px; }

/* ---------- Hero: split-panel layout ----------
   Selected per site in Customize > School Website Design > Header & Layout.
   The plugin's slider markup is unchanged; only its arrangement differs, so
   two schools built on this theme do not arrive with the same front page.
   The coloured panel is the slide's own ::after, re-shaped from a bottom
   scrim into a side panel. The crest badge is added by inc/dynamic-css.php,
   but only when the site actually has a logo. */
body.wels-hero-split .wels-hero { background: var(--wels-primary-dark); }
body.wels-hero-split .wels-hero-track { height: clamp(400px, 62vh, 600px); }
body.wels-hero-split .wels-slide { align-items: stretch; background-position: 74% center; }
body.wels-hero-split .wels-slide::after {
	right: auto; width: 46%;
	background: linear-gradient(165deg, var(--wels-primary) 0%, var(--wels-primary-dark) 100%);
}
body.wels-hero-split .wels-slide-caption {
	width: 46%; display: flex; align-items: center;
	padding: clamp(28px, 4vw, 52px) 0;
}
body.wels-hero-split .wels-slide-caption .wels-container {
	max-width: none; width: 100%;
	padding-left: clamp(26px, 4.4vw, 62px); padding-right: clamp(22px, 3vw, 44px);
}
body.wels-hero-split .wels-slide-caption h2 { font-size: clamp(1.45rem, 2.7vw, 2.2rem); max-width: 15ch; }
body.wels-hero-split .wels-slide-caption p { font-size: clamp(.94rem, 1.1vw, 1.06rem); max-width: 32ch; }
/* A soft arc on the panel edge, echoing the curve the full-width hero uses. */
body.wels-hero-split .wels-hero::after { display: none; }
body.wels-hero-split .wels-hero-prev { left: calc(46% + 16px); }

@media (max-width: 900px) {
	/* Photo on top, panel as a band beneath it — still nothing like a
	   full-bleed banner, and the caption stays readable on a phone. */
	body.wels-hero-split .wels-hero-track { height: clamp(500px, 84vh, 640px); }
	body.wels-hero-split .wels-slide { background-position: center 22%; }
	body.wels-hero-split .wels-slide::after {
		width: 100%; top: auto; height: 60%;
		background: linear-gradient(180deg, rgba(0,0,0,0) 0%, var(--wels-primary-dark) 24%);
	}
	body.wels-hero-split .wels-slide-caption {
		width: 100%; align-items: flex-end; padding-bottom: clamp(28px, 6vw, 48px);
	}
	body.wels-hero-split .wels-slide-caption h2 { max-width: 22ch; }
	body.wels-hero-split .wels-slide-caption p { max-width: 44ch; }
	body.wels-hero-split .wels-hero-prev { left: 16px; }
}

/* ---------- Hero: panel layout (no photograph) ----------
   For schools whose photographs are few or poor. The page opens on colour,
   type and facts instead of a picture, with a quick-links row across the foot
   of the hero. Markup comes from inc/hero-panel.php. */
.wels-heropanel {
	background: linear-gradient(150deg, var(--wels-primary) 0%, var(--wels-primary-dark) 100%);
	padding: clamp(34px, 5vw, 58px) 0 0; position: relative;
}
/* The slider's white curved foot is meant to meet the page background. Here
   the coloured panel follows it instead, so the curve would cut a white
   crescent between the photograph and the panel. Drop it. */
body.wels-hero-panel .wels-hero::after { display: none; }
body.wels-hero-panel .wels-hero + .wels-heropanel { padding-top: clamp(30px, 4vw, 50px); }
.wels-heropanel-in { display: grid; grid-template-columns: minmax(0,1fr) clamp(180px, 20vw, 260px); gap: clamp(24px, 4vw, 52px); align-items: center; }
.wels-hp-eyebrow {
	font-size: .72rem; letter-spacing: .15em; text-transform: uppercase;
	color: var(--wels-accent-light); font-weight: 700; margin: 0 0 14px;
}
.wels-hp-title {
	font-family: var(--wels-heading-font); color: #fff; margin: 0 0 16px;
	font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.12; max-width: 18ch;
}
.wels-hp-lede { color: rgba(255,255,255,.82); margin: 0 0 24px; line-height: 1.65; max-width: 50ch; font-size: clamp(.98rem, 1.2vw, 1.08rem); }
.wels-hp-btns { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: clamp(24px, 3vw, 34px); }
.wels-btn-gold { background: var(--wels-accent-light); color: var(--wels-primary-dark); border: 0; font-weight: 700; }
.wels-btn-gold:hover, .wels-btn-gold:focus { background: #fff; color: var(--wels-primary-dark); }
.wels-btn-ondark { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,.45); }
.wels-btn-ondark:hover, .wels-btn-ondark:focus { background: rgba(255,255,255,.12); color: #fff; }
.wels-hp-facts {
	display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 22px;
	border-top: 1px solid rgba(255,255,255,.2); margin: 0; padding: 20px 0 clamp(26px, 3vw, 38px);
}
.wels-hp-facts dt { font-size: .68rem; letter-spacing: .13em; text-transform: uppercase; color: rgba(255,255,255,.58); margin-bottom: 6px; }
.wels-hp-facts dd { margin: 0; color: #fff; font-weight: 600; font-size: .96rem; line-height: 1.35; }
.wels-heropanel-crest img { display: block; width: 100%; height: auto; }

/* Quick links across the foot of the hero, overlapping the section below. */
.wels-quicklinks {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px;
	background: var(--wels-primary-dark); border-radius: calc(var(--wels-radius) + 4px);
	padding: 12px; margin-bottom: -38px; position: relative; z-index: 3;
	box-shadow: 0 14px 36px rgba(0,0,0,.22);
}
.wels-quicklinks a {
	display: block; padding: 14px 16px; border-radius: var(--wels-radius);
	background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.15);
	text-decoration: none;
}
.wels-quicklinks a:hover, .wels-quicklinks a:focus { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.32); }
.wels-quicklinks b { display: block; color: #fff; font-size: .88rem; line-height: 1.3; margin-bottom: 4px; font-weight: 700; }
.wels-quicklinks i { font-style: normal; color: rgba(255,255,255,.62); font-size: .78rem; }

/* Welcome + At a glance */
.wels-welcome { background: var(--wels-alt-bg); }
body.wels-hero-panel .wels-welcome { padding-top: clamp(72px, 8vw, 96px); }
.wels-welcome-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: clamp(30px, 4vw, 56px); align-items: start; }
.wels-kicker { font-size: .72rem; letter-spacing: .15em; text-transform: uppercase; color: var(--wels-accent); font-weight: 700; margin: 0 0 12px; }
.wels-welcome-title { font-family: var(--wels-heading-font); font-size: var(--wels-h2); color: var(--wels-ink); margin: 0 0 16px; line-height: 1.2; }
.wels-welcome-text { color: var(--wels-muted); line-height: 1.75; }
.wels-welcome-more { display: inline-block; margin-top: 8px; font-weight: 700; }
.wels-glance { background: var(--wels-primary); border-radius: calc(var(--wels-radius) + 3px); padding: clamp(20px, 2.4vw, 28px); }
.wels-glance h3 { font-family: var(--wels-heading-font); color: #fff; margin: 0 0 16px; font-size: 1.14rem; }
.wels-glance dl { margin: 0; display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px 16px; }
.wels-glance dt { color: rgba(255,255,255,.66); font-size: .86rem; }
.wels-glance dd { margin: 0; color: #fff; font-weight: 700; font-size: .9rem; text-align: right; }

@media (max-width: 880px) {
	.wels-heropanel-in { grid-template-columns: 1fr; }
	.wels-heropanel-crest { order: -1; width: 96px; }
	.wels-hp-facts { grid-template-columns: 1fr; gap: 16px; }
	.wels-quicklinks { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); }
	.wels-welcome-grid { grid-template-columns: 1fr; }
	.wels-glance dd { text-align: left; }
	.wels-glance dl { grid-template-columns: 1fr; gap: 4px 0; }
	.wels-glance dt { margin-top: 10px; }
}

/* ---------- CBSE disclosure link in the top bar ----------
   functions.php puts the Mandatory Public Disclosure page first among the
   top-bar links, so the first one gets the accent pill. It stays visible on
   phones, where the other top-bar links are hidden — an inspector may well
   be looking at this on a handset.

   Note the selector: the disclosure link is the FIRST .wels-topbar-link, but
   it is not the first <li> in the bar (email and phone come before it), so
   :first-of-type would not match. Styling every .wels-topbar-link and then
   reverting each later sibling gives "first of this class" in plain CSS. */
.wels-topbar-link a {
	background: var(--wels-accent); color: var(--wels-accent-ink, #fff); font-weight: 700; opacity: 1;
	padding: 4px 12px; border-radius: 4px; letter-spacing: .01em;
}
.wels-topbar-link a:hover,
.wels-topbar-link a:focus { background: var(--wels-accent); color: var(--wels-accent-ink, #fff); opacity: 1; filter: brightness(1.08); }
.wels-topbar-link ~ .wels-topbar-link a,
.wels-topbar-link ~ .wels-topbar-link a:hover,
.wels-topbar-link ~ .wels-topbar-link a:focus {
	background: none; color: rgba(255,255,255,.92); font-weight: inherit; opacity: .85;
	padding: 0; border-radius: 0; filter: none;
}

/* ---------- About ---------- */
.wels-about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(28px, 5vw, 64px); align-items: center; }
.wels-about-media img { border-radius: var(--wels-radius); box-shadow: var(--wels-shadow); width: 100%; object-fit: cover; }
.wels-about .wels-section-head { text-align: left; margin: 0 0 20px; }
.wels-about .wels-section-title::after { margin-left: 0; }
.wels-about-text { color: var(--wels-muted); font-size: 1.05rem; }

/* ---------- Statistics band ---------- */
.wels-stats { background: var(--wels-primary); color: #fff; padding: clamp(32px, 4vw, 52px) 0; }
.wels-stats-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 28px 20px;
	text-align: center;
}
.wels-stat { display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.wels-stat + .wels-stat::before {
	content: ""; position: absolute; left: -10px; top: 12%; bottom: 12%; width: 1px; background: rgba(255,255,255,.22);
}
.wels-stat-icon img { width: 40px; height: 40px; object-fit: contain; filter: brightness(0) invert(1); opacity: .9; margin-bottom: 4px; }
.wels-stat-number { font-family: var(--wels-heading-font); font-weight: 800; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1; display: inline-flex; align-items: baseline; gap: 2px; }
.wels-stat-affix { font-size: .6em; font-weight: 700; opacity: .85; }
.wels-stat-label { font-size: .95rem; opacity: .9; letter-spacing: .01em; }

.wels-kg-intro { text-align: center; max-width: 640px; margin: -18px auto 28px; color: var(--wels-muted); font-size: 1.05rem; }
.wels-kg-grid-preview { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.wels-kg-grid-preview .wels-kg-card { text-align: center; }
.wels-kg-grid-preview .wels-kg-card .wels-card-media img { height: 150px; }
.wels-kg-grid-preview .wels-kg-card .wels-card-title { margin: 14px 16px 18px; font-size: 1rem; }

/* ---------- Our Journey — timeline ---------- */
.wels-journey { background: var(--wels-alt-bg); }
.wels-timeline { list-style: none; margin: 0 auto; padding: 8px 0; position: relative; max-width: 960px; }

/* Centre line + scroll-fill */
.wels-tl-line {
	position: absolute; left: 50%; top: 0; bottom: 0; width: 3px; transform: translateX(-50%);
	background: rgba(20,40,38,.12); border-radius: 3px;
}
.wels-tl-progress {
	position: absolute; left: 0; top: 0; width: 100%; height: 0; border-radius: 3px;
	background: linear-gradient(var(--wels-primary), var(--wels-accent));
	transition: height .12s linear;
}

.wels-tl-item { position: relative; width: 50%; padding: 16px 44px 34px; box-sizing: border-box; }
.wels-tl-item.is-left  { left: 0;   text-align: right; }
.wels-tl-item.is-right { left: 50%; text-align: left; }

/* Marker on the line */
.wels-tl-dot {
	position: absolute; top: 30px; width: 18px; height: 18px; border-radius: 50%; z-index: 2;
	background: var(--wels-accent); border: 4px solid var(--wels-alt-bg);
	box-shadow: 0 0 0 2px var(--wels-accent);
}
.wels-tl-item.is-left  .wels-tl-dot { right: -9px; }
.wels-tl-item.is-right .wels-tl-dot { left: -9px; }

.wels-tl-card {
	background: #fff; border-radius: var(--wels-radius); box-shadow: var(--wels-shadow-sm);
	padding: 22px 24px; display: inline-block; text-align: left; max-width: 420px;
	border: 1px solid rgba(20,40,38,.06); position: relative; overflow: hidden;
}
/* Large faint year watermark */
.wels-tl-ghost {
	position: absolute; top: -14px; right: 14px; font-family: var(--wels-heading-font);
	font-weight: 800; font-size: 4.2rem; line-height: 1; color: var(--wels-primary);
	opacity: .06; pointer-events: none; letter-spacing: -.02em;
}
.wels-tl-year { position: relative; display: inline-block; font-weight: 800; color: var(--wels-primary); font-size: .8rem; letter-spacing: .06em; margin-bottom: 6px; text-transform: uppercase; }
.wels-tl-year::after { content: ""; display: block; width: 26px; height: 3px; background: var(--wels-accent); border-radius: 2px; margin-top: 6px; }
.wels-tl-item.is-left .wels-tl-year::after { margin-left: auto; }
.wels-tl-title { font-size: 1.14rem; margin: 0 0 8px; }
.wels-tl-media { margin: 12px 0; border-radius: 10px; overflow: hidden; }
.wels-tl-media img { width: 100%; height: 170px; object-fit: cover; display: block; }
.wels-tl-text { color: var(--wels-muted); font-size: .95rem; }

/* Slide-in from alternating sides (JS opts in via .wels-tl-anim) */
.wels-timeline.wels-tl-anim .wels-tl-card { opacity: 0; transition: opacity .55s ease, transform .55s cubic-bezier(.2,.8,.2,1); }
.wels-timeline.wels-tl-anim .wels-tl-item.is-left  .wels-tl-card { transform: translateX(28px); }
.wels-timeline.wels-tl-anim .wels-tl-item.is-right .wels-tl-card { transform: translateX(-28px); }
.wels-timeline.wels-tl-anim .wels-tl-item.is-in .wels-tl-card { opacity: 1; transform: none; }
.wels-timeline.wels-tl-anim .wels-tl-item .wels-tl-dot { transition: transform .3s ease; }
.wels-timeline.wels-tl-anim .wels-tl-item.is-in .wels-tl-dot { transform: scale(1.15); }

/* ---------- Card grid (academics / facilities / activities / kindergarten) ---------- */
.wels-card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: clamp(18px, 3vw, 30px); }
.wels-card {
	background: var(--wels-bg); border: 1px solid rgba(20,40,38,.08); border-radius: var(--wels-radius);
	overflow: hidden; display: flex; flex-direction: column; box-shadow: var(--wels-shadow-sm);
	transition: transform .18s ease, box-shadow .18s ease; color: var(--wels-ink);
}
a.wels-card:hover, a.wels-card:focus { transform: translateY(-4px); box-shadow: var(--wels-shadow); text-decoration: none; }
.wels-card-media img { width: 100%; height: 190px; object-fit: cover; }
.wels-card-icon { padding: 22px 22px 0; }
.wels-card-title { font-size: 1.12rem; margin: 18px 20px 8px; }
.wels-card-text { margin: 0 20px 20px; color: var(--wels-muted); font-size: 0.95rem; }
.wels-alt-bg .wels-card, .wels-journey .wels-card, .wels-facilities .wels-card, .wels-kg .wels-card { background: #fff; }

/* ---------- Leadership ---------- */
.wels-leader-grid {
	display: flex; flex-wrap: wrap; justify-content: center; align-items: stretch;
	gap: clamp(20px, 3vw, 32px);
}
.wels-leader-card {
	flex: 1 1 300px; max-width: 380px;
	display: flex; flex-direction: column;
	background: #fff; border-radius: var(--wels-radius); box-shadow: var(--wels-shadow-sm);
	padding: 26px; text-align: center; border: 1px solid rgba(20,40,38,.07);
}
.wels-leader-body { display: flex; flex-direction: column; flex: 1; }
.wels-leader-card .wels-leader-more { align-self: center; margin-top: auto; }
/* exactly 2 cards: give them a comfortable width, centred side by side */
.wels-leader-grid:has(.wels-leader-card:nth-child(2):last-child) .wels-leader-card { flex-basis: 340px; max-width: 420px; }
.wels-leader-photo {
	width: 128px; height: 128px; margin: 0 auto 16px; border-radius: 50%; overflow: hidden;
	background: var(--wels-alt-bg); display: flex; align-items: center; justify-content: center;
	border: 4px solid rgba(31,95,91,.14);
}
.wels-leader-photo img { width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.wels-leader-initials { font-size: 2.6rem; font-weight: 700; color: var(--wels-primary); }
.wels-leader-name { font-size: 1.15rem; margin: 0 0 2px; }
.wels-leader-role { color: var(--wels-accent); font-weight: 600; font-size: 0.9rem; text-transform: uppercase; letter-spacing: .04em; margin: 0 0 12px; }
.wels-leader-short { color: var(--wels-muted); font-size: 0.96rem; margin: 0 0 12px; }

/* ---------- Faculty table ---------- */
.wels-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; border: 1px solid rgba(20,40,38,.12); border-radius: var(--wels-radius); }
.wels-table { width: 100%; border-collapse: collapse; min-width: 560px; background: #fff; }
.wels-table th, .wels-table td { padding: 13px 16px; text-align: left; border-bottom: 1px solid rgba(20,40,38,.1); font-size: 0.95rem; }
.wels-table thead th { background: var(--wels-primary); color: #fff; font-weight: 600; white-space: nowrap; }
.wels-table tbody tr:nth-child(even) { background: var(--wels-alt-bg); }
.wels-table tbody tr:last-child td { border-bottom: 0; }

/* ---------- Faculty photographs ----------
   The column only exists when at least one member of staff has a photograph,
   so these rules simply never apply on a school that has none. Anyone without
   a picture gets their initial rather than a gap, which keeps the column from
   looking broken while photographs are still being collected. */
.wels-faculty-table.has-photos { min-width: 640px; }
.wels-fac-photo { width: 64px; padding-right: 0 !important; }
.wels-fac-photo img,
.wels-fac-initial {
	display: block; width: 44px; height: 44px; border-radius: 50%;
	object-fit: cover; object-position: center top;
}
.wels-fac-initial {
	display: grid; place-items: center;
	background: var(--wels-alt-bg); color: var(--wels-primary);
	font-family: var(--wels-heading-font); font-weight: 700; font-size: 1.05rem;
	border: 1px solid rgba(20,40,38,.12);
}

/* ---------- Achievements ----------
   A card is built from whatever the school has filled in: the photograph, the
   category chip, the name/class/year line and the description are each
   optional, so a bare "Won the district kabaddi final" still reads as a
   finished card rather than an empty frame. */
/* align-items:start, so a card with one line of text stays one line tall
   instead of stretching to match the tallest card in its row and leaving a
   white void. Most achievements are a single sentence. */
.wels-ach-grid {
	display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
	gap: clamp(18px, 2.6vw, 26px); align-items: start;
}
.wels-ach-card {
	display: flex; flex-direction: column;
	background: #fff; border: 1px solid rgba(20,40,38,.1); border-radius: var(--wels-radius);
	box-shadow: var(--wels-shadow-sm); overflow: hidden;
}
.wels-ach-photo { flex: 0 0 auto; background: var(--wels-alt-bg); aspect-ratio: 4/3; }
.wels-ach-photo img { width: 100%; height: 100%; object-fit: cover; object-position: center top; display: block; }
/* Only drawn when the set has at least one real photograph, so the initial
   keeps the row aligned rather than announcing a missing picture. */
.wels-ach-photo.is-initial {
	display: grid; place-items: center;
	background: var(--wels-primary); color: #fff;
	font-family: var(--wels-heading-font); font-weight: 700; font-size: 3rem; line-height: 1;
}
.wels-ach-body { padding: 18px 20px 22px; display: flex; flex-direction: column; gap: 8px; }
.wels-ach-cat {
	align-self: flex-start; background: var(--wels-alt-bg); color: var(--wels-accent);
	font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	padding: 4px 10px; border-radius: 999px;
}
.wels-ach-title { margin: 0; font-size: 1.08rem; line-height: 1.35; color: var(--wels-ink); }
.wels-ach-who { margin: 0; font-weight: 600; color: var(--wels-primary); font-size: .94rem; }
.wels-ach-text { color: var(--wels-muted); font-size: .92rem; }
.wels-ach-text p { margin: 0; }
.wels-ach-group + .wels-ach-group { margin-top: clamp(32px, 5vw, 52px); }
.wels-ach-group-title {
	font-size: clamp(1.2rem, 2.4vw, 1.5rem); color: var(--wels-primary);
	margin: 0 0 18px; padding-bottom: 10px; border-bottom: 2px solid var(--wels-accent);
}

/* ---------- Committees ---------- */
.wels-committee-block + .wels-committee-block { margin-top: clamp(28px, 4vw, 44px); }
.wels-committee-name { font-size: clamp(1.1rem, 2.2vw, 1.35rem); color: var(--wels-primary); margin: 0 0 14px; }
.wels-committee-table { min-width: 520px; }
.wels-committee-table th:first-child, .wels-committee-table td:first-child { width: 68px; }
.wels-committee-table th:nth-child(2), .wels-committee-table td:nth-child(2) { width: 34%; }

/* ---------- Gallery ---------- */
.wels-gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 16px; }

/* Homepage mosaic: first tile is a 2×2 feature on wider screens. */
.wels-gallery-mosaic { grid-auto-rows: 1fr; }
.wels-gallery-mosaic .wels-gallery-item { aspect-ratio: 4 / 3; width: 100%; min-width: 0; }
@media (min-width: 900px) {
	.wels-gallery-mosaic { grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(0, 1fr); }
	.wels-gallery-mosaic .wels-gallery-item { aspect-ratio: auto; }
	.wels-gallery-mosaic .wels-gallery-item.is-featured { grid-column: span 2; grid-row: span 2; }
}

.wels-gallery-item {
	position: relative; display: flex; flex-direction: column;
	border-radius: var(--wels-radius); overflow: hidden; background: var(--wels-alt-bg);
	box-shadow: var(--wels-shadow-sm); transition: transform .2s ease, box-shadow .2s ease;
	min-height: 190px; text-decoration: none;
}
.wels-gallery-grid:not(.wels-gallery-mosaic) .wels-gallery-item { aspect-ratio: 4 / 3.35; }
.wels-gallery-item:hover, .wels-gallery-item:focus-visible { transform: translateY(-4px); box-shadow: var(--wels-shadow); text-decoration: none; }
.wels-gallery-media { position: relative; flex: 1; overflow: hidden; display: block; min-height: 0; }
.wels-gallery-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .45s ease; }
.wels-gallery-item:hover .wels-gallery-media img, .wels-gallery-item:focus-visible .wels-gallery-media img { transform: scale(1.06); }
.wels-gallery-media::after {
	content: ""; position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(12,26,25,0) 45%, rgba(12,26,25,.35) 100%);
	opacity: 0; transition: opacity .25s ease;
}
.wels-gallery-item:hover .wels-gallery-media::after, .wels-gallery-item:focus-visible .wels-gallery-media::after { opacity: 1; }

.wels-gallery-overlay {
	position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
	color: #fff; opacity: 0; transform: scale(.8); transition: opacity .25s ease, transform .25s ease;
}
.wels-gallery-overlay svg { background: rgba(255,255,255,.18); border: 2px solid rgba(255,255,255,.7); border-radius: 50%; padding: 12px; backdrop-filter: blur(2px); }
.wels-gallery-item:hover .wels-gallery-overlay, .wels-gallery-item:focus-visible .wels-gallery-overlay { opacity: 1; transform: scale(1); }

.wels-gallery-count {
	position: absolute; top: 10px; right: 10px; display: inline-flex; align-items: center; gap: 4px;
	padding: 4px 9px; border-radius: 999px; background: rgba(12,26,25,.62); color: #fff;
	font-size: 0.78rem; font-weight: 700; line-height: 1; backdrop-filter: blur(2px);
}
.wels-gallery-count .dashicons { font-size: 14px; width: 14px; height: 14px; }

.wels-gallery-tag {
	position: absolute; top: 10px; left: 10px; max-width: calc(100% - 70px);
	padding: 4px 10px; border-radius: 999px; background: rgba(255,255,255,.92); color: var(--wels-primary-dark);
	font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; line-height: 1.3;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.wels-gallery-info {
	flex: 0 0 auto; height: 3rem; padding: 0 15px; background: var(--wels-bg);
	display: flex; align-items: center;
	border-top: 3px solid var(--wels-accent);
}
.wels-gallery-title {
	font-family: var(--wels-heading-font); font-weight: 700; font-size: 0.98rem; color: var(--wels-ink);
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
}
.wels-gallery-mosaic .wels-gallery-item.is-featured .wels-gallery-info { height: 3.4rem; }
.wels-gallery-mosaic .wels-gallery-item.is-featured .wels-gallery-title { font-size: 1.2rem; }

.wels-gallery-filter { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 26px; }
.wels-gallery-filter button { padding: 9px 18px; border: 1px solid rgba(20,40,38,.16); background: var(--wels-bg); border-radius: 999px; cursor: pointer; font-weight: 600; font-size: 0.88rem; color: var(--wels-ink); transition: .15s ease; }
.wels-gallery-filter button:hover { border-color: var(--wels-primary); color: var(--wels-primary); }
.wels-gallery-filter button.is-active { background: var(--wels-primary); color: #fff; border-color: var(--wels-primary); }
.wels-gallery-item.is-hidden { display: none; }

@media (max-width: 560px) {
	.wels-gallery-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
	.wels-gallery-item { min-height: 150px; }
	.wels-gallery-mosaic .wels-gallery-item.is-featured { grid-column: span 2; }
}

/* ---------- Notices (auto scroller) ---------- */
.wels-notice-viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.wels-notice-viewport::-webkit-scrollbar { display: none; }
.wels-notice-track { list-style: none; margin: 0; padding: 4px; display: flex; gap: 20px; }
.wels-notice-card {
	flex: 0 0 calc((100% - 40px) / 3); background: #fff; border-radius: var(--wels-radius);
	box-shadow: var(--wels-shadow-sm); padding: 22px; border-top: 4px solid var(--wels-accent);
	display: flex; flex-direction: column; min-height: 190px;
}
.wels-notice-date { font-size: 0.8rem; color: var(--wels-muted); font-weight: 600; }
.wels-notice-title { font-size: 1.05rem; margin: 6px 0 8px; }
.wels-notice-text { color: var(--wels-muted); font-size: 0.92rem; margin: 0 0 14px; overflow-wrap: anywhere; }
.wels-notice-actions { margin-top: auto; display: flex; flex-wrap: wrap; gap: 14px; }

/* ---------- Testimonials (auto scroller) ---------- */
.wels-tm-viewport { overflow-x: auto; overflow-y: hidden; scrollbar-width: none; -ms-overflow-style: none; }
.wels-tm-viewport::-webkit-scrollbar { display: none; }
.wels-tm-track { list-style: none; margin: 0; padding: 4px; display: flex; gap: 22px; }
.wels-tm-card { flex: 0 0 min(420px, 82vw); background: #fff; border-radius: var(--wels-radius); box-shadow: var(--wels-shadow-sm); padding: 28px; }
.wels-tm-quote { font-size: 1.05rem; font-style: italic; color: var(--wels-ink); margin: 0 0 18px; position: relative; padding-top: 14px; }
.wels-tm-quote::before { content: "\201C"; position: absolute; top: -14px; left: -4px; font-size: 3rem; color: var(--wels-accent); font-family: Georgia, serif; line-height: 1; }
.wels-tm-person { display: flex; align-items: center; gap: 12px; }
.wels-tm-avatar img { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; }
.wels-tm-person strong { display: block; }
.wels-tm-person em { font-style: normal; color: var(--wels-muted); font-size: 0.88rem; }

/* ---------- Downloads ---------- */
.wels-download-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; max-width: 860px; margin-inline: auto; }
.wels-download-item {
	display: flex; align-items: center; justify-content: space-between; gap: 16px;
	background: #fff; border: 1px solid rgba(20,40,38,.1); border-radius: var(--wels-radius); padding: 16px 20px;
}
.wels-download-meta { display: flex; align-items: center; gap: 14px; }
.wels-download-meta .dashicons { color: var(--wels-primary); font-size: 26px; width: 26px; height: 26px; }
.wels-download-meta em { display: block; font-style: normal; color: var(--wels-muted); font-size: 0.85rem; }
.wels-badge-pending { font-size: 0.8rem; font-weight: 600; color: #b42318; background: #fdecec; padding: 5px 10px; border-radius: 6px; }

/* ---------- Admissions / Pay Fee ---------- */
.wels-admissions-inner { text-align: center; max-width: 760px; margin: 0 auto; }
.wels-admissions-inner .wels-section-title::after { margin-inline: auto; }
.wels-admissions-text { color: var(--wels-muted); font-size: 1.05rem; margin-bottom: 22px; }
.wels-admissions-btn { margin: 4px 8px; }
.wels-payfee { background: var(--wels-primary); }
.wels-payfee .wels-section-title, .wels-payfee p { color: #fff; }
.wels-payfee-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.wels-payfee-inner h2 { margin: 0 0 6px; }
.wels-payfee-inner p { margin: 0; opacity: .9; }

/* ---------- Contact ---------- */
.wels-contact-grid { display: grid; grid-template-columns: 1fr 1.1fr; gap: clamp(28px, 5vw, 56px); align-items: start; }
.wels-contact .wels-section-head { text-align: left; margin: 0 0 20px; }
.wels-contact .wels-section-title::after { margin-left: 0; }
.wels-contact-list { list-style: none; margin: 0 0 22px; padding: 0; display: grid; gap: 14px; }
.wels-contact-list li { display: flex; gap: 12px; align-items: flex-start; color: var(--wels-muted); }
.wels-contact-list .dashicons { color: var(--wels-primary); flex: 0 0 auto; }
.wels-contact-map { border-radius: var(--wels-radius); overflow: hidden; box-shadow: var(--wels-shadow-sm); aspect-ratio: 4/3; background: var(--wels-alt-bg); }
.wels-contact-map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* ---------- Social ---------- */
.wels-social-row { display: flex; gap: 10px; }
.wels-social {
	width: 38px; height: 38px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
	background: rgba(31,95,91,.1); color: var(--wels-primary); transition: .15s ease;
}
.wels-social:hover, .wels-social:focus { background: var(--wels-primary); color: #fff; }
.wels-site-footer .wels-social { background: rgba(255,255,255,.1); color: #fff; }
.wels-site-footer .wels-social:hover, .wels-site-footer .wels-social:focus { background: var(--wels-accent); color: #fff; }

/* ---------- Footer ---------- */
.wels-site-footer { background: var(--wels-footer-bg); color: rgba(255,255,255,.78); margin-top: 0; }
.wels-site-footer a { color: rgba(255,255,255,.82); }
.wels-site-footer a:hover { color: #fff; }
.wels-footer-grid {
	/* Four columns: who the school is, two of links, how to reach them.
	   Proportions follow the reference — identity and contact get the room,
	   the link columns are narrow because a list of five words needs no
	   more. */
	display: grid;
	/* Ratios, not percentages: percentage tracks are measured against the
	   full width and then shrink once the gaps are taken out, which landed
	   all four columns at roughly the same size. fr divides what is left
	   after the gaps, so 29/21/21/29 actually comes out as 29/21/21/29. */
	grid-template-columns: 2.9fr 2.1fr 2.1fr 2.9fr;
	gap: 40px clamp(28px, 4vw, 64px);
	padding: clamp(40px, 5vw, 72px) 20px clamp(28px, 3.5vw, 44px);
}
/* The optional extra widget area is a fifth thing in a four-column grid, so
   it takes a row of its own underneath rather than squeezing the four. */
.wels-footer-extra { grid-column: 1 / -1; }
.wels-footer-title { color: #fff; font-size: 1rem; margin: 0 0 14px; letter-spacing: .01em; }
.wels-footer-name { font-weight: 700; color: #fff; font-size: 1.1rem; margin: 10px 0 4px; }
.wels-footer-tagline { font-size: 0.9rem; margin: 0 0 16px; max-width: 34ch; }
.wels-footer-logo .custom-logo { height: 52px; width: auto; margin-bottom: 4px; }
.wels-footer-links ul, .wels-footer-menu { list-style: none; margin: 0; padding: 0; }
/* Two tidy columns so the list never elongates the footer */
.wels-footer-menu li { margin: 0; }
.wels-footer-menu a { display: inline-block; padding: 3px 0; font-size: 0.92rem; }
.wels-footer-menu a:hover { padding-left: 4px; transition: padding .15s ease; }
.wels-footer-contact ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 0.92rem; }
.wels-footer-about .wels-social-row { margin-top: 16px; }
/* ---------- Footer, four-column ---------- */
.wels-footer-brand { display: flex; align-items: center; gap: 14px; margin-bottom: 16px; }
.wels-footer-logo { flex: 0 0 auto; }
.wels-footer-logo img { display: block; width: auto; max-height: 54px; }
.wels-footer-name {
	margin: 0; font-family: var(--wels-heading-font); font-weight: 700;
	font-size: 1.02rem; line-height: 1.25; letter-spacing: .01em;
}
.wels-footer-tagline { margin: 0; max-width: 34ch; line-height: 1.7; }

.wels-footer-title {
	font-size: 1.06rem; margin: 0 0 18px; font-weight: 700;
	letter-spacing: .01em;
}
/* One link per line. A leftover rule from the old wide Quick Links column
   was setting this to two columns, which is why the footer links were
   running in pairs — stated explicitly here so it cannot drift back. */
.wels-footer-menu {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 11px;
}
.wels-footer-menu a { text-decoration: none; }
.wels-footer-menu a:hover, .wels-footer-menu a:focus-visible { text-decoration: underline; }

.wels-footer-contact-list { list-style: none; margin: 0 0 20px; padding: 0; display: grid; gap: 16px; }
.wels-footer-contact-list li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 12px; align-items: start; }
.wels-footer-contact-list a { text-decoration: none; }
.wels-footer-contact-list a:hover, .wels-footer-contact-list a:focus-visible { text-decoration: underline; }
.wels-footer-ico { display: block; width: 18px; margin-top: 2px; }
.wels-footer-ico svg { width: 18px; height: 18px; fill: currentColor; display: block; opacity: .85; }
.wels-footer-addr { line-height: 1.6; }

.wels-footer-legal { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 14px; }
.wels-footer-legal li + li::before { content: "|"; opacity: .4; margin-right: 14px; }
.wels-footer-legal a { text-decoration: none; }
.wels-footer-legal a:hover, .wels-footer-legal a:focus-visible { text-decoration: underline; }

@media (max-width: 1024px) {
	/* Two and two, rather than four squeezed columns. */
	.wels-footer-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 620px) {
	.wels-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
	.wels-footer-tagline { max-width: none; }
	.wels-footer-legal { justify-content: flex-start; }
}

.wels-footer-bottom { border-top: 1px solid rgba(255,255,255,.12); }
.wels-footer-bottom-inner { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; align-items: center; padding-top: 16px; padding-bottom: 16px; font-size: 0.85rem; }
.wels-footer-bottom-right { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.wels-credit { margin: 0; }
.wels-staff-login { opacity: .8; }

/* ---------- Back to top ---------- */
.wels-back-to-top {
	position: fixed; right: 20px; bottom: 20px; z-index: 250; width: 46px; height: 46px;
	border: 0; border-radius: 50%; background: var(--wels-primary); color: #fff; font-size: 20px;
	cursor: pointer; box-shadow: var(--wels-shadow); opacity: 0; transform: translateY(12px);
	transition: opacity .2s ease, transform .2s ease;
}
.wels-back-to-top.is-visible { opacity: 1; transform: translateY(0); }
.wels-back-to-top:hover { background: var(--wels-primary-dark); }

/* ---------- Modal (leadership read more) ---------- */
.wels-modal, .wels-lightbox { position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center; }
.wels-modal[hidden], .wels-lightbox[hidden] { display: none; }
.wels-modal-overlay { position: absolute; inset: 0; background: rgba(10,20,19,.6); }
.wels-modal-panel {
	position: relative; z-index: 2; background: #fff; border-radius: var(--wels-radius); max-width: 720px;
	width: calc(100% - 32px); max-height: 88vh; overflow-y: auto; padding: 32px; box-shadow: var(--wels-shadow);
}
.wels-modal-close, .wels-lightbox-close {
	position: absolute; top: 12px; right: 14px; width: 40px; height: 40px; border: 0; border-radius: 50%;
	background: #f0f0f0; font-size: 24px; line-height: 1; cursor: pointer; z-index: 5;
}
.wels-modal-body { display: grid; grid-template-columns: 180px 1fr; gap: 24px; align-items: start; }
.wels-modal-photo img { width: 180px; height: 220px; object-fit: cover; object-position: top center; border-radius: var(--wels-radius); }
.wels-modal-role { color: var(--wels-accent); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; font-size: 0.85rem; margin: 0 0 14px; }

/* ---------- Lightbox ---------- */
.wels-lightbox { background: rgba(6,12,11,.92); }
.wels-lightbox-figure { margin: 0; max-width: 92vw; max-height: 82vh; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.wels-lightbox-figure img { max-width: 92vw; max-height: 74vh; width: auto; height: auto; border-radius: 8px; }
.wels-lightbox-figure figcaption { color: rgba(255,255,255,.85); font-size: 0.9rem; text-align: center; }
.wels-lightbox-prev, .wels-lightbox-next {
	position: absolute; top: 50%; transform: translateY(-50%); width: 54px; height: 54px; border: 0;
	border-radius: 50%; background: rgba(255,255,255,.16); color: #fff; font-size: 30px; cursor: pointer;
}
.wels-lightbox-prev { left: 14px; } .wels-lightbox-next { right: 14px; }
.wels-lightbox-prev:hover, .wels-lightbox-next:hover { background: rgba(255,255,255,.32); }

/* ---------- Admission pop-up ---------- */
.wels-popup-panel { padding: 0; max-width: 480px; overflow: hidden; border-radius: var(--wels-radius); }
.wels-popup-panel .wels-modal-close { background: rgba(255,255,255,.9); }
.wels-popup-link, .wels-popup-img { display: block; width: 100%; height: auto; }
.wels-lightbox-counter { position: absolute; top: 16px; left: 0; right: 0; text-align: center; color: rgba(255,255,255,.8); font-size: 0.85rem; }

/* ---------- Pages ---------- */
.wels-page-header { background: var(--wels-alt-bg); padding: clamp(30px, 5vw, 56px) 0; border-bottom: 1px solid rgba(20,40,38,.08); }
.wels-page-title { font-size: clamp(1.7rem, 3.6vw, 2.5rem); margin: 0; }
.wels-page-body { padding-top: clamp(30px, 5vw, 56px); padding-bottom: clamp(40px, 6vw, 72px); }
.wels-page-body h2 { margin-top: 1.6em; }

/* ---------- Type scale, applied ----------
   Headings written in the editor (About Us, Mission & Vision, General
   Regulations, Transport) had no size rule at all and fell back to the
   browser's default, which is why those pages never quite matched the ones
   built from components. They are on the scale now. */
.wels-page-body h2,
.wels-page-body .wp-block-heading { font-size: var(--wels-h2); }
.wels-page-body h3 { font-size: var(--wels-h3); margin-top: 1.4em; }
.wels-page-body h4 { font-size: var(--wels-h4); }
.wels-single-thumb { margin: 0 0 24px; border-radius: var(--wels-radius); overflow: hidden; }
.wels-single-meta { color: var(--wels-muted); font-size: 0.9rem; }
.wels-eyebrow { text-transform: uppercase; letter-spacing: .06em; font-size: 0.8rem; font-weight: 700; color: var(--wels-accent); margin: 0 0 6px; }

.wels-notice-page-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.wels-notice-row {
	display: grid; grid-template-columns: 130px 1fr auto; gap: 16px; align-items: center;
	background: #fff; border: 1px solid rgba(20,40,38,.1); border-radius: var(--wels-radius); padding: 16px 20px;
}
.wels-notice-row time { color: var(--wels-muted); font-size: 0.85rem; font-weight: 600; }
.wels-notice-row p { margin: 4px 0 0; color: var(--wels-muted); font-size: 0.9rem; }

.wels-post-list { display: grid; gap: 22px; }
.wels-post-card { display: grid; grid-template-columns: 260px 1fr; gap: 22px; background: #fff; border: 1px solid rgba(20,40,38,.1); border-radius: var(--wels-radius); overflow: hidden; }
.wels-post-thumb img { height: 100%; object-fit: cover; }
.wels-post-body { padding: 22px 24px; }
.wels-post-title { margin: 0 0 6px; font-size: 1.25rem; }

/* ---------- Search / comments ---------- */
.wels-search-form { display: flex; gap: 8px; margin: 16px 0; }
.wels-search-field { flex: 1; padding: 12px 14px; border: 1px solid rgba(20,40,38,.2); border-radius: var(--wels-btn-radius); font-size: 1rem; }
.wels-comments { margin-top: 40px; }
.wels-comment-list { list-style: none; padding: 0; }
.wels-comment-list ol { list-style: none; }

/* ---------- Utilities ---------- */
.wels-page-full .wels-page-body { max-width: var(--wels-maxw); margin: 0 auto; }

/* =========================================================================
   Responsive
   ========================================================================= */
@media (max-width: 1080px) {
	/* Below this the desktop menu is replaced by the mobile off-canvas menu */
	.wels-primary-nav { display: none; }
	.wels-nav-toggle { display: block; }
	.wels-header-stacked .wels-header-inner { flex-wrap: nowrap; }
	.wels-header-inner { justify-content: space-between; }
	.wels-notice-card { flex-basis: calc((100% - 20px) / 2); }
}

@media (max-width: 640px) {
	.wels-header-actions-header { display: none; }
}

@media (max-width: 780px) {
	/* Tree collapses to a single trunk on the left, branches to the right */
	.wels-timeline { max-width: 560px; }
	.wels-tl-line { left: 9px; transform: none; }
	.wels-tl-item, .wels-tl-item.is-left, .wels-tl-item.is-right {
		width: 100%; left: 0; text-align: left; padding: 8px 0 30px 34px;
	}
	.wels-tl-item.is-left .wels-tl-dot, .wels-tl-item.is-right .wels-tl-dot { left: 1px; right: auto; }
	.wels-tl-item.is-left .wels-tl-year::after { margin-left: 0; }
	.wels-timeline.wels-tl-anim .wels-tl-item.is-left .wels-tl-card,
	.wels-timeline.wels-tl-anim .wels-tl-item.is-right .wels-tl-card { transform: translateX(20px); }
	.wels-tl-card { max-width: none; }
}

@media (max-width: 900px) {
	.wels-about-grid, .wels-contact-grid { grid-template-columns: 1fr; }
	.wels-about-media { order: -1; }
	.wels-post-card { grid-template-columns: 1fr; }
	.wels-post-thumb img { max-height: 220px; width: 100%; }
	.wels-modal-body { grid-template-columns: 1fr; text-align: center; }
	.wels-modal-photo img { margin: 0 auto; }
}

@media (max-width: 680px) {
	/* Keep the disclosure pill (the first one); hide any others. */
	.wels-topbar-link { display: inline-flex; }
	.wels-topbar-link ~ .wels-topbar-link { display: none; }
	.wels-topbar-inner { justify-content: center; }
	.wels-topbar-left { display: none; }
	.wels-topbar-centre { flex: 1 1 auto; justify-content: center; }
	.wels-topbar-right { flex: 1 1 auto; margin: 0 auto; justify-content: center; }
	.wels-notice-card { flex-basis: 86vw; }
	.wels-tm-card { flex-basis: 86vw; }
	.wels-footer-bottom-inner { justify-content: center; text-align: center; }
	.wels-notice-row { grid-template-columns: 1fr; }
	.wels-payfee-inner { flex-direction: column; text-align: center; }
	.wels-download-item { flex-direction: column; align-items: flex-start; }
}

/* =========================================================================
   Motion — scroll reveal + hero Ken Burns
   ========================================================================= */
/* Only elements the script has "armed" (below the fold) start hidden, so a
   slow or blocked script can never leave content invisible. */
.wels-js .wels-reveal.is-armed {
	opacity: 0; transform: translateY(24px);
	transition: opacity .65s cubic-bezier(.2,.7,.2,1), transform .65s cubic-bezier(.2,.7,.2,1);
}
.wels-js .wels-reveal.is-armed.is-in { opacity: 1; transform: none; }

/* Hero: subtle slow zoom on the active slide's image layer */
.wels-slide::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background-image: inherit; background-size: cover; background-position: center;
	transform: scale(1.001);
}
.wels-slide::after { z-index: 1; }
.wels-slide-caption { z-index: 2; }
.wels-slide.is-active::before { animation: wels-kenburns 9s ease-out both; }
@keyframes wels-kenburns { from { transform: scale(1.02); } to { transform: scale(1.11); } }

/* Buttons get a soft press feedback */
.wels-btn:active { transform: translateY(0) scale(.98); }

/* Card media zoom already handled; add a gentle shadow grow on card hover */
.wels-card:hover { box-shadow: var(--wels-shadow); }

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
	.wels-slide { transition: none; }
	.wels-js .wels-reveal.is-armed { opacity: 1 !important; transform: none !important; }
	.wels-slide.is-active::before { animation: none; }
}

/* =========================================================================
   Style presets — structural differences beyond colour/font/shape.
   Colour, heading font, radius and button shape come from the preset via
   CSS variables (inc/dynamic-css.php). These blocks handle card treatment,
   hero caption and section-title styling per preset.
   ========================================================================= */

/* ---- Classic: framed cards, formal hero, centred title rule ---- */
.wels-preset-classic .wels-card { box-shadow: none; border: 1px solid rgba(20,40,38,.16); }
.wels-preset-classic .wels-card:hover { box-shadow: 0 4px 18px rgba(20,40,38,.10); }
.wels-preset-classic .wels-tl-card,
.wels-preset-classic .wels-leader-card,
.wels-preset-classic .wels-notice-card,
.wels-preset-classic .wels-tm-card { box-shadow: none; border: 1px solid rgba(20,40,38,.16); }
.wels-preset-classic .wels-section-title { letter-spacing: 0; }
.wels-preset-classic .wels-section-title::after { width: 44px; height: 2px; }
.wels-preset-classic .wels-slide-caption h2 { border-top: 2px solid rgba(255,255,255,.5); padding-top: .35em; display: inline-block; }
.wels-preset-classic .wels-btn { text-transform: uppercase; letter-spacing: .04em; font-size: .85rem; }

/* ---- Warm: soft pillowy cards, centred hero caption ---- */
.wels-preset-warm .wels-card,
.wels-preset-warm .wels-tl-card,
.wels-preset-warm .wels-leader-card,
.wels-preset-warm .wels-notice-card,
.wels-preset-warm .wels-tm-card { border: 0; box-shadow: 0 14px 34px rgba(80,50,30,.12); }
.wels-preset-warm .wels-card:hover { box-shadow: 0 20px 44px rgba(80,50,30,.18); }
.wels-preset-warm .wels-section-title::after { width: 64px; height: 5px; }
.wels-preset-warm .wels-slide-caption { text-align: center; }
.wels-preset-warm .wels-slide-caption h2,
.wels-preset-warm .wels-slide-caption p { margin-left: auto; margin-right: auto; }
.wels-preset-warm .wels-hero-progress-bar { height: 4px; }

/* ---- Editorial: minimal cards, hero caption bar, hard-left title bar ---- */
.wels-preset-editorial .wels-card,
.wels-preset-editorial .wels-tl-card,
.wels-preset-editorial .wels-leader-card,
.wels-preset-editorial .wels-notice-card,
.wels-preset-editorial .wels-tm-card {
	border: 0; border-top: 3px solid var(--wels-ink); box-shadow: none; border-radius: 0;
}
.wels-preset-editorial .wels-card-title,
.wels-preset-editorial .wels-tl-title { font-size: 1.22rem; letter-spacing: -.01em; }
.wels-preset-editorial .wels-section-title { text-align: left; }
.wels-preset-editorial .wels-section-head { text-align: left; max-width: none; }
.wels-preset-editorial .wels-section-title::after { margin-left: 0; width: 40px; height: 5px; background: var(--wels-accent); }
.wels-preset-editorial .wels-section-sub { max-width: 60ch; }
.wels-preset-editorial .wels-slide { align-items: stretch; }
.wels-preset-editorial .wels-slide-caption {
	align-self: flex-end; background: rgba(20,20,20,.82); padding-top: clamp(24px,4vw,44px);
}
.wels-preset-editorial .wels-slide::after { display: none; }
.wels-preset-editorial .wels-slide-caption h2 { font-size: clamp(1.9rem, 5vw, 3.4rem); }
.wels-preset-editorial .wels-btn { text-transform: uppercase; letter-spacing: .05em; font-size: .82rem; }

/* ---------- Floating WhatsApp button ---------- */
.wels-whatsapp-float {
	position: fixed; right: 20px; bottom: 80px; z-index: 250; width: 52px; height: 52px;
	border-radius: 50%; background: #25D366; display: flex; align-items: center; justify-content: center;
	box-shadow: var(--wels-shadow); transition: transform .15s ease, background .15s ease, opacity .15s ease;
	/*
	 * A fixed button of any reasonable tap-target size will, at some
	 * scroll position, sit over whatever text happens to be underneath
	 * it — true of every "click to WhatsApp" bubble on the web, not
	 * something layout alone can fully rule out. Keeping it just under
	 * full opacity means anything it does overlap stays legible instead
	 * of being flatly hidden, while it's still unmistakably a bright
	 * green WhatsApp button.
	 */
	opacity: .92;
}
.wels-whatsapp-float:hover,
.wels-whatsapp-float:focus-visible { background: #1ebe5a; transform: scale(1.06); opacity: 1; }
.wels-whatsapp-float svg { width: 28px; height: 28px; fill: #fff; }
@media (max-width: 600px) {
	/* Right-aligned with the back-to-top button below it, instead of sitting closer to the edge. */
	.wels-whatsapp-float { right: 16px; bottom: 70px; width: 44px; height: 44px; }
	.wels-whatsapp-float svg { width: 22px; height: 22px; }
}

/* ------------------------------------------------------------------ *
 * Slide background video
 *
 * Sits above the slide's still image and below the gradient, so the
 * caption stays readable either way. It starts invisible and fades in
 * once it is actually playing — if the script decides not to load it
 * (narrow screen, reduced motion, data saver) the image simply stays,
 * and nothing about the slide looks unfinished.
 * ------------------------------------------------------------------ */
.wels-slide-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0;
	transition: opacity .8s ease;
	pointer-events: none;
}
.wels-slide-video.is-playing { opacity: 1; }

/* ------------------------------------------------------------------ *
 * Quick Links
 * ------------------------------------------------------------------ */
.wels-ql-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 14px;
	grid-template-columns: repeat(auto-fit, minmax(148px, 1fr));
}
.wels-ql-card {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 8px;
	/* Comfortably past the 44px a fingertip needs, in both directions. */
	min-height: 124px;
	height: 100%;
	padding: 20px 14px;
	text-align: center;
	color: var(--wels-ink);
	background: var(--wels-bg);
	border: 1px solid rgba(20, 40, 38, .10);
	border-radius: var(--wels-radius);
	box-shadow: var(--wels-shadow-sm);
	transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.wels-ql-card:hover,
.wels-ql-card:focus-visible {
	transform: translateY(-3px);
	border-color: var(--wels-primary);
	box-shadow: var(--wels-shadow);
	color: var(--wels-primary);
}
.wels-ql-card:focus-visible {
	outline: 2px solid var(--wels-primary);
	outline-offset: 3px;
}
.wels-ql-figure {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	color: var(--wels-primary);
}
.wels-ql-figure img {
	width: 100%;
	height: 100%;
	object-fit: contain;
}
.wels-ql-icon { width: 30px; height: 30px; }
.wels-ql-label { font-weight: 600; line-height: 1.25; }
.wels-ql-note {
	font-size: .82rem;
	line-height: 1.3;
	color: var(--wels-muted);
}
.wels-ql-card:hover .wels-ql-note,
.wels-ql-card:focus-visible .wels-ql-note { color: inherit; }

@media (prefers-reduced-motion: reduce) {
	.wels-ql-card { transition: none; }
	.wels-ql-card:hover,
	.wels-ql-card:focus-visible { transform: none; }
}

@media (max-width: 480px) {
	.wels-ql-grid { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
	.wels-ql-card { min-height: 112px; padding: 16px 10px; }
}

/* ---------------------------------------------------------------------------
 * Pillars band
 *
 * Equal columns, centred, with a hairline between them rather than cards —
 * the band should read as one statement, not four boxes. It falls to two
 * columns on a tablet and one on a phone, and the dividers go with it.
 * ------------------------------------------------------------------------ */
.wels-pillars { background: var(--wels-alt-bg); }
.wels-pillar-grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 28px 0;
	grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
}
.wels-pillar {
	text-align: center;
	padding: 4px 24px;
	min-width: 0;
	border-left: 1px solid rgba(30, 42, 42, 0.12);
}
.wels-pillar:first-child { border-left: 0; }
.wels-pillar-figure {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin-bottom: 12px;
	color: var(--wels-primary);
}
.wels-pillar-icon { width: 40px; height: 40px; }
.wels-pillar-title {
	margin: 0 0 6px;
	font-size: 1.05rem;
	font-weight: 700;
	letter-spacing: .04em;
	text-transform: uppercase;
	color: var(--wels-ink);
}
.wels-pillar-text {
	margin: 0;
	font-size: .92rem;
	line-height: 1.5;
	color: var(--wels-muted);
}

@media (max-width: 860px) {
	.wels-pillar-grid { grid-template-columns: repeat(2, 1fr); gap: 26px 0; }
	/* With two per row, only the right-hand one of each pair keeps a rule. */
	.wels-pillar { border-left: 0; }
	.wels-pillar:nth-child(2n) { border-left: 1px solid rgba(30, 42, 42, 0.12); }
}
@media (max-width: 520px) {
	.wels-pillar-grid { grid-template-columns: 1fr; gap: 22px 0; }
	.wels-pillar,
	.wels-pillar:nth-child(2n) { border-left: 0; padding: 0 8px; }
}

/* ---------------------------------------------------------------------------
 * Parent portal
 *
 * A single quiet band: what the portal is on the left, the way in on the
 * right. Same shape as the Pay Fee band so the two sit together without
 * arguing.
 * ------------------------------------------------------------------------ */
.wels-portal { background: var(--wels-primary); color: #fff; }
.wels-portal-inner {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 20px 32px;
}
.wels-portal-copy { min-width: 0; flex: 1 1 320px; }
.wels-portal .wels-section-title { color: #fff; margin: 0 0 8px; }
.wels-portal-text { margin: 0; color: rgba(255, 255, 255, 0.86); max-width: 56ch; }
.wels-portal-links {
	list-style: none;
	margin: 12px 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 8px 20px;
}
.wels-portal-links a {
	color: #fff;
	font-size: .9rem;
	text-decoration: underline;
	text-underline-offset: 3px;
	overflow-wrap: anywhere;
}
.wels-portal-links a:hover,
.wels-portal-links a:focus-visible { text-decoration-thickness: 2px; }
.wels-portal-action { flex: 0 0 auto; }

@media (max-width: 600px) {
	.wels-portal-inner { display: block; }
	.wels-portal-action { margin-top: 18px; }
	.wels-portal-btn { display: block; text-align: center; }
}

/* ===========================================================================
 * Crest header layout
 *
 * A coloured bar with the menu split either side of the school crest, which
 * hangs below the bar's lower edge. The crest is absolutely centred rather
 * than being a flex child, so an odd number of menu items cannot drag it off
 * centre; the spacer the walker inserts keeps the links clear of it.
 *
 * Below 1080px there is not enough room to split a menu around a crest, so
 * the layout falls back to crest-left / hamburger-right and the whole menu
 * moves into the off-canvas panel.
 * ======================================================================== */
.wels-header-crest {
	background: var(--wels-primary);
	color: #fff;
	/* The crest hangs past the bar; nothing may clip it. */
	overflow: visible;
}
.wels-header-crest .wels-header-inner {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 74px;
	/* The bar's height comes from the links inside it, not from padding —
	   otherwise the crest cannot hang below its edge, it just makes the bar
	   taller. */
	padding-top: 0;
	padding-bottom: 0;
	gap: 0;
}
/*
 * Two equal columns that meet at the centre of the bar. Because they are
 * equal, the join is always the centre line, and that is where the crest is,
 * whatever the labels say. Each column then holds its links clear of the
 * crest with a little padding at the join.
 */
.wels-header-crest .wels-nav-half {
	flex: 1 1 0;
	min-width: 0;
}
/*
 * The nav is itself a flex container, so the list inside it shrinks to the
 * width of its own links. It has to fill its half before flex-end on one
 * side and flex-start on the other mean anything — otherwise both halves
 * simply sit at their left edge and the bar is lopsided.
 */
.wels-header-crest .wels-nav-half .wels-menu {
	flex: 1 1 auto;
	min-width: 0;
}
.wels-header-crest .wels-nav-left .wels-menu {
	justify-content: flex-end;
	padding-right: 104px;
}
.wels-header-crest .wels-nav-right .wels-menu {
	justify-content: flex-start;
	padding-left: 104px;
}
.wels-header-crest .wels-menu {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: nowrap;
	gap: 26px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.wels-header-crest .wels-menu > .wels-menu-item > a {
	color: #fff;
	font-weight: 600;
	padding: 23px 0;
	display: inline-block;
	white-space: nowrap;
}
/*
 * The theme's underline is inset 16px either side and sits 6px off the
 * bottom, which suits a link with horizontal padding on a white bar. Here
 * the links have none, so it is pulled in under the word itself and lifted
 * clear of the bar's edge — otherwise it reads as a stray mark floating
 * below the bar rather than as an underline.
 */
.wels-header-crest .wels-menu > .wels-menu-item > a::after {
	left: 0;
	right: 0;
	bottom: 15px;
}

/* ---------------------------------------------------------------------------
 * Plain dropdowns in the crest bar
 *
 * Same spacing and colour as the panel, so the two kinds of menu read as
 * one system rather than two. The card starts flush under its own item and
 * has enough padding that the first link is not jammed against the corner.
 * ------------------------------------------------------------------------ */
.wels-header-crest .wels-menu > .wels-menu-item > .wels-sub-menu {
	padding: 22px 26px;
	min-width: 264px;
	border-radius: 10px;
	border: 0;
	box-shadow: 0 26px 54px rgba(43, 31, 48, .22), 0 2px 6px rgba(43, 31, 48, .08);
}
.wels-header-crest .wels-menu > .wels-menu-item > .wels-sub-menu > li + li {
	margin-top: 16px;
}
.wels-header-crest .wels-menu > .wels-menu-item > .wels-sub-menu a {
	display: block;
	padding: 0;
	border-radius: 0;
	font-size: 1rem;
	line-height: 1.35;
	font-weight: 500;
	color: var(--wels-primary);
}
.wels-header-crest .wels-menu > .wels-menu-item > .wels-sub-menu a {
	padding: 8px 12px;
	margin: -8px -12px;
	border-radius: 8px;
	transition: background .16s ease, box-shadow .16s ease, color .16s ease;
}
.wels-header-crest .wels-menu > .wels-menu-item > .wels-sub-menu a:hover {
	text-decoration: none;
	color: var(--wels-primary-dark);
	background: #f4edf7;
	box-shadow: 0 6px 16px rgba(43, 31, 48, .14);
}
.wels-header-crest .wels-menu > .wels-menu-item > .wels-sub-menu a:focus-visible {
	background: none;
	text-decoration: none;
	color: var(--wels-primary-dark);
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}
.wels-header-crest .wels-submenu-toggle { color: #fff; }

/* The space the crest occupies. */
.wels-header-crest .wels-crest {
	position: absolute;
	left: 50%;
	top: 8px;
	transform: translateX(-50%);
	z-index: 3;
	display: block;
	line-height: 0;
}
.wels-crest-img {
	display: block;
	width: auto;
	height: 94px;
	max-width: 172px;
	object-fit: contain;
	/* The overhang: the crest drops below the bar and casts a soft shadow so
	   it reads as sitting in front of it rather than punched through it. */
	filter: drop-shadow(0 6px 10px rgba(0, 0, 0, 0.28));
}
.wels-crest-fallback {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: #fff;
	color: var(--wels-primary);
	font-weight: 800;
	font-size: 1.4rem;
	letter-spacing: .04em;
	line-height: 1;
}
.wels-header-crest .wels-header-right {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	display: flex;
	align-items: center;
	gap: 10px;
}

/* ---------------------------------------------------------------------------
 * Mega panel
 * ------------------------------------------------------------------------ */
/*
 * Only a panel is positioned against the whole bar — it has to span it.
 * An ordinary dropdown stays anchored to its own menu item, or it opens
 * under whichever item happens to be first in the row.
 */
.wels-header-crest .wels-menu-item { position: relative; }
.wels-header-crest .wels-menu-item.wels-has-mega { position: static; }

.wels-mega {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	background: #fff;
	color: var(--wels-ink);
	box-shadow: 0 26px 54px rgba(43, 31, 48, .22), 0 2px 6px rgba(43, 31, 48, .08);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-6px);
	transition: opacity .16s ease, transform .16s ease, visibility .16s;
	/* Belt and braces: a closed panel is not a surface you can point at. */
	pointer-events: none;
	z-index: 40;
}
.wels-has-mega:hover > .wels-mega,
.wels-has-mega:focus-within > .wels-mega,
.wels-has-mega.is-open > .wels-mega {
	opacity: 1;
	visibility: visible;
	transform: none;
	pointer-events: auto;
}
/*
 * Spacing measured off the reference panel rather than guessed: about 44px
 * of air above the headings, 26px from a heading to its first link, and
 * 19px between links. A panel is briefly a page of its own — it should
 * breathe like one, not read like a squashed dropdown.
 */
.wels-mega-inner {
	display: flex;
	/*
	 * Stretch, not flex-start: the photograph then matches the height of
	 * the columns beside it instead of hanging below them and leaving the
	 * left half of the panel looking empty.
	 */
	align-items: stretch;
	gap: 56px;
	/*
	 * Horizontal padding matters as much as vertical here. Writing it as
	 * "44px 0 46px" silently zeroed the container's own side padding, so the
	 * headings sat hard against the panel's left edge and the photograph
	 * against its right.
	 */
	padding: 44px 44px 46px;
}
/*
 * The two lists inside a panel are still .wels-sub-menu, so the ordinary
 * dropdown rules apply to them — absolutely positioned, invisible until
 * hovered, on their own white card. Inside a panel none of that is wanted:
 * the panel itself is the card, and its columns are simply laid out in it.
 */
.wels-mega .wels-mega-cols,
.wels-mega .wels-mega-list {
	position: static;
	opacity: 1;
	/*
	 * inherit, never visible. The panel above these is visibility:hidden
	 * until it opens; forcing its children visible puts them back in the
	 * hit-testing tree, so the closed panel still catches the mouse right
	 * across the page and opens itself.
	 */
	visibility: inherit;
	transform: none;
	transition: none;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	min-width: 0;
	padding: 0;
	top: auto;
	left: auto;
}
.wels-mega .wels-mega-list a {
	/*
	 * Must match the negative margin on .wels-mega-list a exactly. The two
	 * cancel out, so the hover chip can sit around the words while the words
	 * themselves stay flush with the column heading above them.
	 */
	padding: 8px 12px;
	border-radius: 8px;
	font-weight: 500;
}
/*
 * This sits at the same specificity as the reset above, so the hover chip
 * survives. It has to carry the tint and the shadow itself — a lower-
 * specificity rule elsewhere would be overridden and the panel would hover
 * differently from the plain dropdowns.
 */
.wels-mega .wels-mega-list a:hover {
	background: #f4edf7;
	box-shadow: 0 6px 16px rgba(43, 31, 48, .14);
	color: var(--wels-primary-dark);
}

.wels-mega-cols {
	display: flex;
	flex-wrap: wrap;
	gap: 36px 60px;
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	list-style: none;
	min-width: 0;
}
/*
 * Columns are as wide as their own labels, not equal slices of the panel.
 * An equal-width grid stretches three short lists across the whole width
 * and puts the leftover space between them, which reads as a gap rather
 * than as columns.
 */
/*
 * Equal columns, but capped. Sized purely to their labels they bunch up on
 * the left and leave a void before the picture; given the whole width each
 * they drift so far apart they stop reading as a group. 220px is wide
 * enough for the longest label here and narrow enough to stay a column.
 */
.wels-mega-col { min-width: 0; flex: 1 1 0; max-width: 220px; }
.wels-mega-heading {
	display: block;
	margin-bottom: 26px;
	font-weight: 700;
	font-size: 1.16rem;
	line-height: 1.3;
	color: var(--wels-ink);
	text-decoration: none;
}
a.wels-mega-heading:hover { color: var(--wels-primary-dark); }
a.wels-mega-heading:focus-visible {
	color: var(--wels-primary-dark);
	outline: 2px solid currentColor;
	outline-offset: 3px;
}
.wels-mega-list { list-style: none; margin: 0; padding: 0; }
.wels-mega-list > li + li { margin-top: 19px; }
.wels-mega-list a {
	/* The school's own colour, the way the reference uses its navy: the
	   links read as links without an underline sitting there. */
	color: var(--wels-primary);
	text-decoration: none;
	font-size: 1rem;
	line-height: 1.35;
	overflow-wrap: anywhere;
}
/*
 * Hover deepens the colour rather than underlining. An underline appearing
 * under the cursor in a menu is restless — the whole list twitches as the
 * pointer crosses it. Keyboard focus still gets a ring, because colour on
 * its own is not enough to show where the focus is.
 */
/*
 * The negative margin cancels the padding, so the tinted chip appears
 * around the words on hover without any of them shifting position.
 */
.wels-mega-list a {
	margin: -8px -12px;
	transition: background .16s ease, box-shadow .16s ease, color .16s ease;
}
.wels-mega-list a:hover {
	color: var(--wels-primary-dark);
	background: #f4edf7;
	box-shadow: 0 6px 16px rgba(43, 31, 48, .14);
}
.wels-mega-list a:focus-visible {
	color: var(--wels-primary-dark);
	outline: 2px solid currentColor;
	outline-offset: 3px;
	border-radius: 2px;
}
.wels-mega-figure {
	flex: 0 0 400px;
	max-width: 400px;
	min-height: 210px;
	margin-left: auto;
	line-height: 0;
}
.wels-mega-figure img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	border-radius: 8px;
}

@media (max-width: 1280px) {
	.wels-mega-figure { flex-basis: 300px; max-width: 300px; }
}
@media (max-width: 1080px) {
	.wels-mega-figure { display: none; }
}

/* ---------------------------------------------------------------------------
 * Narrow screens: no split menu, no panels — the off-canvas menu takes over.
 * ------------------------------------------------------------------------ */
@media (max-width: 1080px) {
	.wels-header-crest .wels-header-inner {
		justify-content: flex-start;
		min-height: 62px;
	}
	.wels-header-crest .wels-primary-nav,
	.wels-header-crest .wels-nav-half { display: none; }
	/* The crest stays centred and overhanging here too. */
	.wels-crest-img { height: 72px; max-width: 128px; }
	.wels-crest-fallback { width: 56px; height: 56px; font-size: 1.05rem; }
}

/* In the off-canvas panel a panel is just a nested list — the toggle button
   the walker prints opens and closes it. */
.wels-mobile-nav .wels-mega {
	position: static;
	opacity: 1;
	visibility: visible;
	transform: none;
	box-shadow: none;
	background: transparent;
	pointer-events: auto;
}
.wels-mobile-nav .wels-mega-inner { display: block; padding: 0; }
.wels-mobile-nav .wels-mega-cols { display: block; }
.wels-mobile-nav .wels-mega-col + .wels-mega-col { margin-top: 14px; }
.wels-mobile-nav .wels-mega-figure { display: none; }

@media (prefers-reduced-motion: reduce) {
	.wels-mega,
	.wels-mega-list a,
	.wels-header-crest .wels-menu > .wels-menu-item > .wels-sub-menu a { transition: none; }
}

/* ---------------------------------------------------------------------------
 * When the split menu will not fit
 *
 * The crest layout only works while both halves of the menu have room. Add
 * enough items, or long enough labels, and the last one slides under the
 * action buttons pinned to the right of the bar. Rather than letting that
 * happen silently, main.js measures the bar and sets this class, which hands
 * the whole menu to the off-canvas panel — the same thing that happens on a
 * narrow screen. Nothing is ever hidden or overlapped; the school just sees
 * the hamburger appear and knows the menu has outgrown the bar.
 * ------------------------------------------------------------------------ */
.wels-header-crest.is-nav-collapsed .wels-nav-half { display: none; }
.wels-header-crest.is-nav-collapsed .wels-nav-toggle { display: block; }
/*
 * The crest does not move. Whatever the menu is doing, it stays centred and
 * overhanging — it is the fixed point of this header, not a flexible item
 * that gets pushed aside when something else needs room.
 */
.wels-header-crest.is-nav-collapsed .wels-header-inner { justify-content: flex-start; }
.wels-header-crest .wels-nav-toggle-bar,
.wels-header-crest .wels-nav-toggle-bar::before,
.wels-header-crest .wels-nav-toggle-bar::after { background: #fff; }

/* ===========================================================================
 * Activities, in full
 *
 * One activity per row, photograph and words swapping sides down the page.
 * The swap is done with grid column placement rather than row-reverse, so
 * the reading order in the markup stays title-then-text whichever side the
 * picture is on — a screen reader hears the same thing on every row.
 * ======================================================================== */
.wels-activities-full { background: var(--wels-bg); }

.wels-act-lead { max-width: 760px; margin-bottom: 44px; }
.wels-act-eyebrow {
	margin: 0 0 10px;
	font-size: .78rem;
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: var(--wels-muted);
}
.wels-act-heading {
	margin: 0 0 14px;
	font-size: var(--wels-h2);
	line-height: 1.22;
	color: var(--wels-ink);
}
.wels-act-intro { margin: 0; color: var(--wels-muted); line-height: 1.65; }

.wels-act-rows { display: flex; flex-direction: column; }

.wels-act-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center;
	gap: 40px;
	padding: 34px 0;
	border-top: 1px solid rgba(43, 31, 48, .09);
}
.wels-act-row:first-child { border-top: 0; }

.wels-act-media { grid-column: 1; grid-row: 1; line-height: 0; }
.wels-act-body { grid-column: 2; grid-row: 1; min-width: 0; }
.wels-act-row.is-flipped .wels-act-media { grid-column: 2; }
.wels-act-row.is-flipped .wels-act-body { grid-column: 1; }

.wels-act-media img {
	width: 100%;
	height: auto;
	aspect-ratio: 3 / 2;
	object-fit: cover;
	border-radius: 6px;
	box-shadow: 0 10px 26px rgba(43, 31, 48, .12);
}

.wels-act-head { display: flex; align-items: center; gap: 14px; margin-bottom: 8px; }
.wels-act-badge {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wels-primary) 10%, transparent);
	color: var(--wels-primary);
}
.wels-act-icon { width: 24px; height: 24px; }
.wels-act-title {
	margin: 0;
	font-size: 1.42rem;
	line-height: 1.2;
	color: var(--wels-primary);
}
.wels-act-tagline {
	margin: 0 0 12px;
	/* The accent darkened until it is readable as text — see inc/dynamic-css.php. */
	color: var(--wels-accent-text, #8b6f00);
	font-size: .98rem;
}
.wels-act-text { color: var(--wels-muted); line-height: 1.7; }
.wels-act-text p { margin: 0 0 12px; }
.wels-act-text p:last-child { margin-bottom: 0; }

.wels-act-points { list-style: none; margin: 14px 0 0; padding: 0; }
.wels-act-points li {
	position: relative;
	padding-left: 18px;
	margin-bottom: 7px;
	color: var(--wels-muted);
	font-size: .95rem;
}
.wels-act-points li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--wels-accent);
}

.wels-act-btn {
	margin-top: 20px;
	background: var(--wels-primary);
	color: #fff;
	display: inline-flex;
	align-items: center;
	gap: 10px;
}
.wels-act-btn:hover,
.wels-act-btn:focus-visible { background: var(--wels-primary-dark); color: #fff; }
.wels-act-arrow { transition: transform .16s ease; }
.wels-act-btn:hover .wels-act-arrow { transform: translateX(3px); }

@media (max-width: 860px) {
	/* Stack, and put the picture above the words on every row — alternating
	   sides means nothing in a single column, and a photo that sometimes
	   comes after its own heading reads as a mistake. */
	.wels-act-row {
		grid-template-columns: 1fr;
		gap: 20px;
		padding: 28px 0;
	}
	.wels-act-media,
	.wels-act-row.is-flipped .wels-act-media { grid-column: 1; grid-row: 1; }
	.wels-act-body,
	.wels-act-row.is-flipped .wels-act-body { grid-column: 1; grid-row: 2; }
	.wels-act-title { font-size: 1.24rem; }
}

@media (prefers-reduced-motion: reduce) {
	.wels-act-arrow { transition: none; }
	.wels-act-btn:hover .wels-act-arrow { transform: none; }
}

/* A homepage section that shows only the first few, and a way to the rest. */
.wels-card-more { margin: 34px 0 0; text-align: center; }
.wels-card-more .wels-btn {
	display: inline-flex;
	align-items: center;
	gap: 10px;
}

/* ===========================================================================
 * Interior page banner
 *
 * The page's name over a photograph, with the trail home underneath. Every
 * page that is not the homepage opens with this, so the site holds together
 * rather than each page starting from a blank sheet.
 *
 * The wash over the photograph is not decoration: white text on an
 * unpredictable photograph is unreadable, and the school will change this
 * picture without asking anyone. The gradient guarantees the contrast
 * whatever they choose.
 * ======================================================================== */
.wels-page-banner {
	position: relative;
	background: var(--wels-primary);
	background-size: cover;
	background-position: center;
	color: #fff;
	padding: 68px 0 60px;
	text-align: center;
	overflow: hidden;
}
.wels-page-banner.has-photo::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		180deg,
		color-mix(in srgb, var(--wels-primary-dark) 78%, transparent) 0%,
		color-mix(in srgb, var(--wels-primary-dark) 62%, transparent) 100%
	);
}
/* No photograph: the crest, large and very faint, instead of repeating one
   campus picture across every page that has none. Decorative only — the
   crest is already in the header with the school's name beside it, so this
   copy is hidden from screen readers by being a background. */
.wels-page-banner:not(.has-photo)::after {
	content: "";
	position: absolute;
	top: 50%; right: clamp(-40px, -2vw, 0px);
	transform: translateY(-50%);
	width: clamp(220px, 34vw, 420px);
	aspect-ratio: 1;
	background-image: var(--wels-crest, none);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: .10;
	pointer-events: none;
}
@media (max-width: 720px) {
	.wels-page-banner:not(.has-photo)::after { opacity: .07; right: -60px; }
}

.wels-page-banner-inner { position: relative; }

.wels-page-banner-title {
	margin: 0;
	color: #fff;
	font-size: clamp(1.8rem, 4.4vw, 2.9rem);
	line-height: 1.16;
	letter-spacing: .01em;
	text-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
.wels-page-banner-title::after {
	content: "";
	display: block;
	width: 58px;
	height: 3px;
	margin: 16px auto 0;
	border-radius: 2px;
	background: var(--wels-accent);
}
.wels-page-banner-sub {
	margin: 16px auto 0;
	max-width: 62ch;
	color: rgba(255, 255, 255, .92);
	font-size: 1.02rem;
	line-height: 1.6;
	text-shadow: 0 1px 8px rgba(0, 0, 0, .3);
}

/* ---------------------------------------------------------------------------
 * Breadcrumb
 * ------------------------------------------------------------------------ */
.wels-crumbs { margin-top: 20px; }
.wels-crumbs ol {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 6px 10px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: .88rem;
}
.wels-crumbs li { display: inline-flex; align-items: center; gap: 10px; }
.wels-crumbs li + li::before {
	content: "/";
	opacity: .55;
}
.wels-crumbs a { color: rgba(255, 255, 255, .88); text-decoration: none; }
.wels-crumbs a:hover,
.wels-crumbs a:focus-visible { color: #fff; text-decoration: underline; text-underline-offset: 3px; }
.wels-crumbs [aria-current="page"] { color: #fff; font-weight: 600; }

/* The page body no longer needs to open with its own top margin — the
   banner has already given the page a head. */
.wels-page-banner + .wels-page-body,
.wels-page-banner + .wels-container { padding-top: 46px; }

@media (max-width: 680px) {
	.wels-page-banner { padding: 46px 0 40px; }
	.wels-page-banner-sub { font-size: .95rem; }
	.wels-crumbs ol { font-size: .82rem; }
}

/* A school-supplied icon sits in the same circle as the built-in one, and
   is contained rather than cropped — a logo or a crest must not lose its
   edges to a square fill. */
.wels-act-icon-img {
	width: 26px;
	height: 26px;
	object-fit: contain;
	display: block;
}


/* ---------- Admission process ----------
   A numbered list that still reads as a list when the CSS never arrives:
   it is a real <ol>, the marker is suppressed and the number redrawn, so the
   order survives a stylesheet failure, a screen reader and a printout.
   The icon is optional and sits beside the number rather than instead of it,
   because the number is the part a parent is actually using. */
.wels-adm-subhead {
	font-size: clamp(1.15rem, 2vw, 1.4rem); margin: 0 0 18px;
}
.wels-adm-steps {
	list-style: none; margin: 0 0 clamp(32px, 4vw, 48px); padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: clamp(16px, 2.2vw, 24px);
}
.wels-adm-step {
	display: flex; flex-direction: column; gap: 12px;
	background: #fff; border: 1px solid rgba(20,40,38,.1); border-radius: var(--wels-radius);
	box-shadow: var(--wels-shadow-sm); padding: 22px 22px 24px;
}
.wels-step-mark { display: flex; align-items: center; gap: 10px; }
.wels-step-num {
	display: grid; place-items: center; flex: 0 0 auto;
	width: 38px; height: 38px; border-radius: 50%;
	background: var(--wels-primary); color: #fff;
	font-family: var(--wels-heading-font); font-weight: 700; font-size: 1.05rem; line-height: 1;
}
.wels-step-glyph { display: inline-flex; color: var(--wels-accent-text, var(--wels-accent)); }
.wels-step-icon { width: 24px; height: 24px; }
.wels-step-icon-img { width: 28px; height: 28px; object-fit: contain; display: block; }
.wels-step-title { font-size: 1.05rem; margin: 0; }
.wels-step-when {
	align-self: flex-start; margin: -4px 0 0;
	background: var(--wels-alt-bg); color: var(--wels-accent-text, var(--wels-primary));
	font-size: .72rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
	padding: 4px 10px; border-radius: 999px;
}
.wels-step-text { margin: 0; color: var(--wels-muted); font-size: 0.95rem; }

/* The documents list. Two columns once there is room, because six short
   lines down one side of a wide screen looks like an oversight. */
.wels-adm-docs {
	background: var(--wels-alt-bg); border-radius: var(--wels-radius);
	padding: clamp(22px, 3vw, 32px);
}
.wels-adm-docs .wels-adm-subhead { margin-bottom: 14px; }
.wels-adm-doclist {
	margin: 0; padding: 0; list-style: none;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 10px 28px;
}
.wels-adm-doclist li {
	position: relative; padding-left: 28px; line-height: 1.5;
}
.wels-adm-doclist li::before {
	content: ""; position: absolute; left: 4px; top: .45em;
	width: 11px; height: 6px; border-left: 2px solid var(--wels-accent);
	border-bottom: 2px solid var(--wels-accent); transform: rotate(-45deg);
}
.wels-adm-foot {
	display: flex; flex-wrap: wrap; align-items: center; gap: 16px 22px;
	margin-top: clamp(24px, 3vw, 34px);
}
.wels-adm-note { margin: 0; color: var(--wels-muted); font-size: 0.95rem; flex: 1 1 260px; }


/* ---------- Fee table ----------
   The class column is a <th scope="row">, so a screen reader reading across
   "Admission Fee: 5,000" still says which class it belongs to. Amounts are
   tabular-nums and right-aligned, which is the only way a column of money
   can be compared down the page. */
.wels-fee-block { margin: 0 0 clamp(24px, 3vw, 36px); }
.wels-fee-heading { font-size: var(--wels-h2); margin: 0 0 6px; }
.wels-fee-effective {
	margin: 0 0 18px; color: var(--wels-accent-text, var(--wels-primary));
	font-weight: 600; font-size: 0.95rem;
}
.wels-fee-table th[scope="row"] { font-weight: 600; color: var(--wels-ink); }
.wels-fee-class { white-space: nowrap; }
.wels-fee-rownote {
	display: block; font-weight: 400; font-size: 0.82rem; color: var(--wels-muted);
	white-space: normal;
}
.wels-fee-amt {
	text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.wels-fee-table thead th:not(:first-child):not(:nth-child(2)) { text-align: right; }
.wels-fee-blank { color: var(--wels-muted); }
.wels-fee-pending {
	background: var(--wels-alt-bg); border-radius: var(--wels-radius);
	padding: clamp(20px, 3vw, 28px); margin: 0; color: var(--wels-muted);
}
.wels-fee-note {
	margin-top: 16px; color: var(--wels-muted); font-size: 0.92rem;
}
.wels-fee-note p { margin: 0 0 6px; }
.wels-fee-note p:last-child { margin-bottom: 0; }

/* ---------- Card icon, while the photograph is still being collected ----------
   A tinted band the same height as the top of a photographed card, so a grid
   that mixes the two does not step up and down. When the photograph arrives
   it simply replaces this, and nothing else about the card changes. */
.wels-card-icon-svg {
	padding: 0; display: grid; place-items: center;
	height: 190px; background: var(--wels-alt-bg);
	border-bottom: 1px solid rgba(20,40,38,.08);
}
.wels-card-glyph {
	width: 54px; height: 54px; color: var(--wels-primary); opacity: .85;
}
.wels-facilities-full .wels-card-icon-svg { height: 150px; }
.wels-facilities-full .wels-card-glyph { width: 46px; height: 46px; }





/* ---------- Interior page with a section sidebar ----------
   A 3:1 split: the page's own content on the left, a short vertical menu on
   the right. The sidebar is optional at every level — no menu assigned, no
   aside in the markup, and the main column takes the full width. */
.wels-withside {
	display: grid; grid-template-columns: minmax(0, 3fr) minmax(220px, 1fr);
	gap: clamp(28px, 4vw, 56px); align-items: start;
}
.wels-withside.has-no-side { grid-template-columns: minmax(0, 1fr); }

.wels-sidenav {
	position: sticky; top: 96px;
	background: var(--wels-alt-bg); border-radius: var(--wels-radius);
	padding: 10px;
}
.wels-sidenav-list { list-style: none; margin: 0; padding: 0; }
.wels-sidenav-list li + li { border-top: 1px solid rgba(20,40,38,.09); }
.wels-sidenav-list a {
	display: block; padding: 13px 16px; border-radius: 9px;
	color: var(--wels-ink); font-weight: 600; font-size: 0.95rem;
	text-decoration: none; transition: background .16s ease, color .16s ease;
}
.wels-sidenav-list a:hover,
.wels-sidenav-list a:focus-visible {
	background: rgba(20,40,38,.07); color: var(--wels-primary); text-decoration: none;
}
/* WordPress marks the page you are on, so nothing here is maintained by hand. */
.wels-sidenav-list .current-menu-item > a,
.wels-sidenav-list .current_page_item > a,
.wels-sidenav-list .current-menu-ancestor > a {
	background: var(--wels-primary); color: #fff;
}
.wels-sidenav-list .current-menu-item > a:hover,
.wels-sidenav-list .current_page_item > a:hover {
	background: var(--wels-primary-dark, var(--wels-primary)); color: #fff;
}

/* ---------- A facility, stacked ---------- */
.wels-fblocks-heading { font-size: clamp(1.5rem, 3vw, 2.1rem); margin: 0 0 8px; }
.wels-fblock-group { margin: 0 0 clamp(32px, 4vw, 48px); }
.wels-fblock-grouptitle {
	font-size: var(--wels-h3); margin: 0 0 8px;
	text-transform: uppercase; letter-spacing: .04em;
}
.wels-fblock-groupintro { margin: 0 0 20px; color: var(--wels-muted); line-height: 1.65; }
.wels-fblock-stack { display: flex; flex-direction: column; gap: 14px; }

/* One column by default. The media column is added by PHP, which knows
   whether there is anything to put in it — rather than by :has(), which
   would leave older browsers with a 104px hole down the side. */
.wels-fblock {
	display: grid; grid-template-columns: minmax(0, 1fr); gap: 20px;
	align-items: center;
	background: #fff; border: 1px solid rgba(20,40,38,.1);
	border-radius: var(--wels-radius); box-shadow: var(--wels-shadow-sm);
	padding: 18px 22px;
}
.wels-fblock.has-media { grid-template-columns: 104px minmax(0, 1fr); }
.wels-fblock:not(.has-media) .wels-fblock-media { display: none; }

.wels-fblock-media { display: grid; place-items: center; }
.wels-fblock-img {
	width: 104px; height: 78px; object-fit: cover; border-radius: 10px; display: block;
}
.wels-fblock-iconimg { width: 56px; height: 56px; object-fit: contain; display: block; }
.wels-fblock-glyph {
	display: grid; place-items: center;
	width: 72px; height: 72px; border-radius: 50%;
	background: var(--wels-alt-bg); color: var(--wels-primary);
}
.wels-fblock-svg { width: 34px; height: 34px; }
.wels-fblock-title { font-size: 1.1rem; margin: 0 0 6px; }
.wels-fblock-text { margin: 0; color: var(--wels-muted); font-size: 0.95rem; line-height: 1.6; }

/* ---------- School timings ---------- */
.wels-timings { margin: clamp(32px, 4vw, 48px) 0 0; }
.wels-timings-title { font-size: clamp(1.2rem, 2.4vw, 1.6rem); margin: 0 0 14px; }
.wels-timings-table th[scope="row"] { font-weight: 600; color: var(--wels-ink); }
.wels-timings-note { margin: 14px 0 0; color: var(--wels-muted); font-size: 0.92rem; }

@media (max-width: 900px) {
	.wels-withside { grid-template-columns: minmax(0, 1fr); }
	/* The menu goes under the content on a phone: somebody who has opened
	   this page is here for the page, not for the way out of it. */
	.wels-withside-side { order: 2; }
	.wels-sidenav { position: static; }
}
@media (max-width: 560px) {
	.wels-fblock { grid-template-columns: minmax(0, 1fr); gap: 14px; }
	.wels-fblock-media { justify-items: start; place-items: center start; }
}


/* ---------- A facility, as an accordion row ----------
   The icon stays on the summary, so a closed list still reads as a list of
   places rather than a stack of grey bars. The open panel carries the colour
   because one open panel is the thing the eye should land on. */
/* ---------- A group: the list on one side, its picture on the other ----------
   The first group has its list on the left; every group after it swaps. The
   swap is done with grid columns, not by reordering the source, so the list
   always comes first for a keyboard and a screen reader however the band is
   drawn.

   The picture keeps a 4:3 shape rather than stretching to the height of the
   list. Left to stretch, a group of eight items dragged its photograph into a
   tall crop and towered over a group of five. */
.wels-fgrp { margin: 0 0 var(--wels-band-rhythm); }
.wels-fgrp:last-child { margin-bottom: 0; }
.wels-fgrp-lead { max-width: 900px; margin: 0 0 clamp(16px, 2.4vw, 24px); }

.wels-fgrp-row {
	display: grid;
	/* Content first, photograph second — and swapped when flipped. The
	   split is asymmetric now: a list of facilities wants more room than
	   the photograph beside it, and the same split is used by every band. */
	grid-template-columns: minmax(0, 1fr) var(--wels-band-media);
	gap: var(--wels-band-gap); align-items: start;
}
.wels-fgrp.is-flipped .wels-fgrp-row {
	grid-template-columns: var(--wels-band-media) minmax(0, 1fr);
}
.wels-facx-list { grid-row: 1; grid-column: 1; }
.wels-fgrp-photo { grid-row: 1; grid-column: 2; position: relative; aspect-ratio: var(--wels-band-ratio); }
.wels-fgrp.is-flipped .wels-facx-list  { grid-column: 2; }
.wels-fgrp.is-flipped .wels-fgrp-photo { grid-column: 1; }

/* Taken out of flow and pinned to its cell: an image left in flow has to
   negotiate a height with a parent whose height comes from the row, and it
   loses — it collapses to a sliver. */
.wels-fgrp-photo-img {
	position: absolute; inset: 0; display: block;
	width: 100%; height: 100%;
	object-fit: cover; border-radius: var(--wels-radius);
	box-shadow: var(--wels-band-shadow);
}

/* No picture yet: the list takes the whole width. Stacked down one column a
   long list makes its band tower over the others, so it runs in columns
   instead. grid-column matters here — the base rule puts the list in column
   1, but on a one-column row an explicit column 2 would conjure an implicit
   second column and squeeze the list into a third of the width. */
.wels-fgrp.has-no-photo .wels-fgrp-row { grid-template-columns: 1fr; }
.wels-fgrp.has-no-photo .wels-facx-list {
	grid-column: 1;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
	gap: 8px 24px; align-content: start;
}
.wels-fgrp.has-no-photo .wels-facx { align-self: start; }

@media (max-width: 860px) {
	.wels-fgrp-row { grid-template-columns: 1fr; }
	.wels-facx-list,
	.wels-fgrp.is-flipped .wels-facx-list { grid-row: 2; grid-column: 1; }
	.wels-fgrp-photo,
	.wels-fgrp.is-flipped .wels-fgrp-photo { grid-row: 1; grid-column: 1; aspect-ratio: 16 / 10; }
}
.wels-facx-list { display: flex; flex-direction: column; gap: 8px; }
.wels-facx { border-radius: 10px; overflow: hidden; }
.wels-facx-summary {
	display: flex; align-items: center; gap: 14px;
	padding: 13px 18px; cursor: pointer; list-style: none;
	background: var(--wels-alt-bg); color: var(--wels-ink);
	font-family: var(--wels-heading-font); font-weight: 700; font-size: 1rem;
	transition: background .18s ease, color .18s ease;
}
.wels-facx-summary::-webkit-details-marker { display: none; }
.wels-facx-summary:hover { background: rgba(20,40,38,.08); }
.wels-facx[open] .wels-facx-summary { background: var(--wels-primary); color: #fff; }
.wels-facx[open] .wels-facx-summary:hover { background: var(--wels-primary-dark, var(--wels-primary)); }
.wels-facx-summary:focus-visible { outline: 3px solid var(--wels-accent); outline-offset: -3px; }

.wels-facx-name { flex: 1 1 auto; }
.wels-facx-icon { display: inline-flex; flex: 0 0 auto; color: currentColor; }
.wels-facx-svg { width: 22px; height: 22px; }
.wels-facx-iconimg { width: 24px; height: 24px; object-fit: contain; display: block; }

/* Drawn rather than typed, so it never picks up a font's idea of a minus. */
.wels-facx-sign { position: relative; flex: 0 0 auto; width: 14px; height: 14px; }
.wels-facx-sign::before,
.wels-facx-sign::after {
	content: ""; position: absolute; left: 0; top: 6px;
	width: 14px; height: 2px; border-radius: 2px; background: currentColor;
	transition: transform .18s ease, opacity .18s ease;
}
.wels-facx-sign::after { transform: rotate(90deg); }
.wels-facx[open] .wels-facx-sign::after { transform: rotate(0deg); opacity: 0; }

.wels-facx-body {
	background: var(--wels-primary); color: #fff;
	padding: 0 18px 16px 52px; font-size: 0.95rem; line-height: 1.65;
}
.wels-facx-body p { margin: 0; }

@media (prefers-reduced-motion: reduce) {
	.wels-facx-summary, .wels-facx-sign::before, .wels-facx-sign::after { transition: none; }
}
@media (max-width: 560px) {
	.wels-facx-body { padding-left: 18px; }
}


/* ---------- Card row that slides sideways ----------
   Built as a scroll container with snap points, which means it is draggable,
   swipeable, keyboard-scrollable and works with no JavaScript at all. The
   arrows and dots are added by the script on top; losing the script costs
   the controls, never the cards. */
.wels-card-grid.is-carousel {
	display: flex; gap: clamp(18px, 3vw, 30px);
	overflow-x: auto; overflow-y: hidden;
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	scroll-padding-left: 2px;
	/* Room for the card shadow, which a scroll container would otherwise clip. */
	padding: 4px 4px 14px;
	margin: -4px -4px -14px;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
}
.wels-card-grid.is-carousel::-webkit-scrollbar { display: none; }
.wels-card-grid.is-carousel > .wels-card {
	flex: 0 0 clamp(260px, 30%, 360px);
	scroll-snap-align: start;
}
.wels-card-grid.is-carousel:focus-visible { outline: 3px solid var(--wels-accent); outline-offset: 4px; }

/* The strip of controls under the row. Added by the script, so it is never
   in the markup when it would do nothing. */
.wels-carousel-nav {
	display: flex; align-items: center; justify-content: center; gap: 14px;
	margin-top: 18px;
}
.wels-carousel-btn {
	display: grid; place-items: center; flex: 0 0 auto;
	width: 42px; height: 42px; border-radius: 50%;
	border: 1px solid rgba(20,40,38,.16); background: #fff; color: var(--wels-primary);
	cursor: pointer; transition: background .16s ease, color .16s ease, opacity .16s ease;
}
.wels-carousel-btn:hover:not(:disabled) { background: var(--wels-primary); color: #fff; }
.wels-carousel-btn:disabled { opacity: .35; cursor: default; }
.wels-carousel-btn svg { width: 18px; height: 18px; }
/* One arrow drawn once, flipped for the other direction. */
.wels-carousel-next svg { transform: rotate(180deg); }
.wels-carousel-dots { display: flex; gap: 8px; }
.wels-carousel-dot {
	width: 9px; height: 9px; padding: 0; border: 0; border-radius: 50%;
	background: rgba(20,40,38,.22); cursor: pointer;
	transition: background .16s ease, transform .16s ease;
}
.wels-carousel-dot[aria-current="true"] { background: var(--wels-primary); transform: scale(1.25); }
.wels-carousel-dot:focus-visible,
.wels-carousel-btn:focus-visible { outline: 3px solid var(--wels-accent); outline-offset: 3px; }

@media (prefers-reduced-motion: reduce) {
	.wels-card-grid.is-carousel { scroll-behavior: auto; }
	.wels-carousel-dot { transition: none; }
}


/* ---------- Facilities on the homepage: collage + classification ----------
   Photographs on one side, the groups listed on the other in a card that
   overlaps them. The overlap is decoration: it is done with a negative
   margin that only applies once there is room for it, so on a narrow screen
   the two simply stack with nothing sitting on top of anything. */
.wels-fachome { background: var(--wels-alt-bg); overflow: hidden; }
.wels-fachome-inner {
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: center; gap: 0;
}
.wels-fachome-inner.has-no-photos { grid-template-columns: minmax(0, 1fr); }

/* The mosaic: one tall photograph beside a stack of smaller ones. With two
   or three the grid collapses gracefully rather than leaving holes. */
.wels-fachome-collage {
	display: grid; gap: 10px;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: 150px;
}
.wels-fachome-collage[data-count="1"] { grid-template-columns: 1fr; grid-auto-rows: 420px; }
.wels-fachome-collage[data-count="2"] { grid-auto-rows: 260px; }
.wels-fachome-collage[data-count="3"] > .wels-fachome-shot:first-child,
.wels-fachome-collage[data-count="4"] > .wels-fachome-shot:first-child { grid-row: span 2; }

.wels-fachome-shot {
	margin: 0; overflow: hidden; border-radius: var(--wels-radius);
	background: rgba(20,40,38,.06);
}
.wels-fachome-img { width: 100%; height: 100%; object-fit: cover; display: block; }

.wels-fachome-card {
	background: #fff; border-radius: var(--wels-radius);
	box-shadow: 0 18px 50px rgba(20,40,38,.13);
	padding: clamp(26px, 3.4vw, 44px);
	margin-left: -60px; position: relative; z-index: 2;
}
.wels-fachome-inner.has-no-photos .wels-fachome-card { margin-left: 0; }

.wels-fachome-title {
	font-size: clamp(1.5rem, 3vw, 2.15rem); margin: 0 0 12px;
	text-transform: uppercase; letter-spacing: .03em;
}
.wels-fachome-intro { margin: 0 0 24px; color: var(--wels-muted); line-height: 1.7; }

.wels-fachome-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 20px; }
.wels-fachome-item { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; }
/* No icon set: the row loses the column rather than keeping an empty one. */
.wels-fachome-item:only-child,
.wels-fachome-item > .wels-fachome-body:first-child { grid-column: 1 / -1; }
.wels-fachome-icon { display: grid; place-items: center; color: var(--wels-primary); padding-top: 2px; }
.wels-fachome-svg { width: 30px; height: 30px; }
.wels-fachome-name { font-size: 1.02rem; margin: 0 0 5px; }
.wels-fachome-text { margin: 0; color: var(--wels-muted); font-size: 0.92rem; line-height: 1.6; }
.wels-fachome-more { margin: 26px 0 0; }

@media (max-width: 980px) {
	.wels-fachome-inner { grid-template-columns: minmax(0, 1fr); gap: 0; }
	.wels-fachome-card { margin: -40px 16px 0; }
	.wels-fachome-collage { grid-auto-rows: 130px; }
	.wels-fachome-collage[data-count="1"] { grid-auto-rows: 240px; }
}
@media (max-width: 560px) {
	.wels-fachome-card { margin: -24px 0 0; }
	.wels-fachome-item { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; }
	.wels-fachome-svg { width: 26px; height: 26px; }
}

.wels-fachome-iconimg { width: 34px; height: 34px; object-fit: contain; display: block; }


/* ---------- Apply / Admission strip ----------
   A thin band directly under the hero. A parent arriving in admission season
   wants one of these three and should not scroll past a welcome message to
   find it. Drops to one per line on a phone rather than shrinking the tap
   targets. */
.wels-applynow { background: var(--wels-primary); color: #fff; }
.wels-applynow-list {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; align-items: stretch;
}
.wels-applynow-item { flex: 1 1 200px; display: flex; }
.wels-applynow-item + .wels-applynow-item { border-left: 1px solid rgba(255,255,255,.18); }
.wels-applynow-link {
	flex: 1 1 auto; display: flex; align-items: center; justify-content: center; gap: 10px;
	padding: 18px 22px; color: #fff; text-decoration: none;
	font-family: var(--wels-heading-font); font-weight: 700; font-size: .98rem;
	letter-spacing: .02em; transition: background .16s ease;
}
.wels-applynow-link:hover,
.wels-applynow-link:focus-visible { background: rgba(255,255,255,.12); color: #fff; text-decoration: none; }
.wels-applynow-link:focus-visible { outline: 3px solid var(--wels-accent); outline-offset: -3px; }
.wels-applynow .wels-act-arrow { transition: transform .16s ease; }
.wels-applynow-link:hover .wels-act-arrow { transform: translateX(3px); }

@media (max-width: 600px) {
	.wels-applynow-item { flex: 1 1 100%; }
	.wels-applynow-item + .wels-applynow-item {
		border-left: 0; border-top: 1px solid rgba(255,255,255,.18);
	}
}

/* ---------- Accreditations & affiliations ----------
   The one block a parent checks rather than reads, so the logos are large and
   the heading is small. Logos are set in a row that wraps, greyed back a
   little so a mixed bag of source images sits together, and brought to full
   colour on hover. */
.wels-accreds { padding-top: clamp(34px, 4vw, 52px); padding-bottom: clamp(34px, 4vw, 52px); }
.wels-accreds-title {
	font-size: clamp(1rem, 1.8vw, 1.15rem); margin: 0 0 24px; text-align: center;
	text-transform: uppercase; letter-spacing: .08em; color: var(--wels-muted); font-weight: 700;
}
.wels-accreds-row {
	list-style: none; margin: 0; padding: 0;
	display: flex; flex-wrap: wrap; justify-content: center;
	gap: clamp(24px, 4vw, 56px);
}
.wels-accred { display: flex; }
.wels-accred-inner {
	display: flex; flex-direction: column; align-items: center; gap: 8px;
	text-decoration: none; color: var(--wels-ink);
}
a.wels-accred-inner:hover { text-decoration: none; }
.wels-accred-logo {
	max-width: 160px; max-height: 76px; width: auto; height: auto; display: block;
	filter: grayscale(1); opacity: .75;
	transition: filter .18s ease, opacity .18s ease;
}
a.wels-accred-inner:hover .wels-accred-logo,
a.wels-accred-inner:focus-visible .wels-accred-logo { filter: none; opacity: 1; }
.wels-accred-name {
	font-family: var(--wels-heading-font); font-weight: 700; font-size: 1.05rem;
	color: var(--wels-primary);
}
.wels-accred-note { font-size: .8rem; color: var(--wels-muted); }
a.wels-accred-inner:focus-visible { outline: 3px solid var(--wels-accent); outline-offset: 4px; border-radius: 6px; }

@media (prefers-reduced-motion: reduce) {
	.wels-accred-logo, .wels-applynow-link, .wels-applynow .wels-act-arrow { transition: none; }
}


/* ---------- About Us with no photograph ----------
   The two-column grid reserved half the width for a picture that was not
   there, so the welcome sat in the left column looking like a mistake. With
   no picture it becomes a single centred column, held to a comfortable
   reading width rather than running the full container. */
.wels-about-grid.is-centred { grid-template-columns: minmax(0, 1fr); }
.wels-about-grid.is-centred .wels-about-body {
	max-width: 860px; margin-inline: auto; text-align: center;
}
/* The section head is capped at 720px. Inside an 860px body with no auto
   margin it sat flush left, putting "About Us" 70px left of the crest above
   it — close enough to look like a mistake rather than a choice. */
.wels-about-grid.is-centred .wels-section-head { text-align: center; margin-inline: auto; }
.wels-about-grid.is-centred .wels-section-title::after {
	margin-left: auto; margin-right: auto;
}
.wels-about-grid.is-centred .wels-about-text { margin-bottom: 26px; }


/* ---------- About Us: sub-heading, closing line and feature tiles ---------- */
/* This carries the school's own message, not a label, so it is set as a line
   worth reading rather than a small caps eyebrow. */
.wels-about-subhead {
	margin: -4px auto 20px; max-width: 30em;
	font-family: var(--wels-heading-font); font-weight: 700;
	font-size: clamp(1.05rem, 2vw, 1.3rem); line-height: 1.45;
	color: var(--wels-primary);
}
.wels-about-closing {
	margin: 20px 0 0; font-family: var(--wels-heading-font); font-weight: 700;
	font-size: clamp(1rem, 1.7vw, 1.12rem); color: var(--wels-primary); line-height: 1.5;
}
.wels-aboutfeat { margin-top: clamp(34px, 4.5vw, 56px); }
.wels-aboutfeat-title {
	text-align: center; margin: 0 0 26px;
	font-size: clamp(1.15rem, 2.2vw, 1.5rem);
}
.wels-aboutfeat-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
	gap: clamp(18px, 2.6vw, 30px);
}
.wels-aboutfeat-item {
	text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px;
	background: #fff; border: 1px solid rgba(20,40,38,.1); border-radius: var(--wels-radius);
	box-shadow: var(--wels-shadow-sm); padding: 26px 20px 28px;
}
.wels-aboutfeat-icon {
	display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
	background: var(--wels-alt-bg); color: var(--wels-primary);
}
.wels-aboutfeat-svg { width: 28px; height: 28px; }
.wels-aboutfeat-name { margin: 0; font-size: 1.02rem; }
.wels-aboutfeat-text { margin: 0; color: var(--wels-muted); font-size: .92rem; line-height: 1.6; }


/* ---------- Message from the Principal ----------
   One message, portrait beside it. The caret only exists while the script is
   typing; it is added and removed by the script, so a page that never runs it
   shows a plain paragraph with nothing blinking at the end of it. */
.wels-principal { background: var(--wels-alt-bg); }
.wels-principal-inner {
	display: grid; grid-template-columns: var(--wels-band-media) minmax(0, 1fr);
	gap: var(--wels-band-gap);
	/* Top, not centre: beside a message of any length the portrait then sits
	   level with the name it belongs to, instead of drifting down the band. */
	align-items: start;
}
.wels-principal-inner.has-no-photo { grid-template-columns: minmax(0, 1fr); }
.wels-principal-photo { position: relative; aspect-ratio: 4 / 5; }
.wels-principal-photo img {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: top center;
	border-radius: var(--wels-radius); display: block;
	box-shadow: var(--wels-band-shadow);
}
.wels-principal-eyebrow {
	margin: 0 0 6px; font-family: var(--wels-heading-font); font-weight: 700;
	text-transform: uppercase; letter-spacing: .08em; font-size: .78rem;
	color: var(--wels-accent-text, var(--wels-primary));
}
.wels-principal-name { font-size: var(--wels-h2); margin: 0 0 16px; }
.wels-principal-text {
	color: var(--wels-muted); font-size: 1.02rem; line-height: 1.75;
	/* The message is one text node so it can be typed out; the blank lines
	   between its paragraphs are what this honours. */
	white-space: pre-line;
	/* A comfortable measure. Long lines are what make a long message look
	   like a wall of text. */
	max-width: 62ch;
	/* No reserved height here: the script measures the real message and
	   holds that exact space while it types, then lets go. A guess in CSS
	   is either a gap under a short message or a jump under a long one. */
}
.wels-principal-caret {
	display: inline-block; width: 2px; height: 1.05em; vertical-align: -0.18em;
	margin-left: 2px; background: var(--wels-primary);
	animation: wels-blink 1s steps(1) infinite;
}
@keyframes wels-blink { 50% { opacity: 0; } }
.wels-principal-more { margin: 22px 0 0; }

/* Mirrored band. The portrait moves to the right-hand column, and the tint
   comes off, so a run of messages alternates on both counts. */
.wels-principal-flip .wels-principal-inner {
	grid-template-columns: minmax(0, 1fr) var(--wels-band-media);
}
.wels-principal-flip .wels-principal-photo { order: 2; }
.wels-principal-flip .wels-principal-inner.has-no-photo {
	grid-template-columns: minmax(0, 1fr);
}
.wels-principal-plain { background: transparent; }

/* ---------- Vacancies ---------- */
.wels-vac-list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(18px, 2.4vw, 26px); }
.wels-vac > article {
	background: #fff;
	border: 1px solid rgba(20, 40, 38, .10);
	border-left: 4px solid var(--wels-primary);
	border-radius: var(--wels-radius);
	padding: clamp(18px, 2.4vw, 28px);
}
.wels-vac-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 16px; margin-bottom: 10px; }
.wels-vac-title { margin: 0; font-size: var(--wels-h3); }
.wels-vac-tags { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.wels-vac-tag {
	display: inline-block; padding: 3px 10px; border-radius: 999px;
	background: var(--wels-alt-bg); color: var(--wels-muted);
	font-size: .78rem; font-weight: 600;
}
.wels-vac-body { margin: 0 0 14px; color: var(--wels-muted); }

.wels-vac-facts {
	margin: 0 0 14px; display: grid; gap: 10px 26px;
	grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
}
.wels-vac-facts div { margin: 0; }
.wels-vac-facts dt {
	font-family: var(--wels-heading-font); font-weight: 700;
	text-transform: uppercase; letter-spacing: .07em;
	font-size: .72rem; color: var(--wels-muted); margin: 0 0 2px;
}
.wels-vac-facts dd { margin: 0; }

.wels-vac-perks { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.wels-vac-perks li {
	padding: 4px 12px; border-radius: 999px;
	background: color-mix(in srgb, var(--wels-primary) 10%, transparent);
	color: var(--wels-primary); font-size: .82rem; font-weight: 600;
}
.wels-vac-walkin {
	margin: 0 0 14px; padding: 12px 14px;
	background: var(--wels-alt-bg); border-radius: 10px; line-height: 1.6;
}
.wels-vac-apply { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin: 0; }
.wels-vac-contact { color: var(--wels-muted); font-size: .92rem; }
.wels-vac-none { color: var(--wels-muted); max-width: 60ch; }

/* ---------- School tour video ----------
   A still with a play button until somebody presses it; the script puts the
   real player in afterwards. Sized by aspect-ratio so nothing shifts when
   the iframe replaces the image. */
.wels-tour { background: var(--wels-alt-bg); }
.wels-tour-inner { max-width: 960px; }
.wels-tour-head { text-align: center; margin: 0 0 clamp(24px, 3.5vw, 40px); }
.wels-tour-eyebrow {
	margin: 0 0 10px;
	font-family: var(--wels-heading-font); font-weight: 700;
	text-transform: uppercase; letter-spacing: .12em; font-size: .78rem;
	color: var(--wels-primary);
}
.wels-tour-title { margin: 0; font-size: var(--wels-h2); font-weight: 400; line-height: 1.24; }
.wels-tour-text { margin: 12px auto 0; max-width: 60ch; color: var(--wels-muted); }

.wels-tour-frame {
	position: relative; aspect-ratio: 16 / 9;
	border-radius: var(--wels-radius); overflow: hidden;
	background: #000;
	box-shadow: var(--wels-band-shadow);
}
.wels-tour-poster {
	position: absolute; inset: 0;
	width: 100%; height: 100%; object-fit: cover; display: block;
}
.wels-tour-frame iframe {
	position: absolute; inset: 0; width: 100%; height: 100%; border: 0;
}
/* The button is the whole frame, so the still is clickable without a second
   element over it stealing the pointer. */
.wels-tour-play {
	position: absolute; inset: 0;
	display: grid; place-items: center;
	width: 100%; height: 100%;
	background: rgba(12, 20, 20, .28);
	border: 0; padding: 0; cursor: pointer;
	transition: background .25s ease;
}
.wels-tour-play:hover { background: rgba(12, 20, 20, .14); }
.wels-tour-play:focus-visible { outline: 3px solid #fff; outline-offset: -6px; }
.wels-tour-play-ring {
	display: grid; place-items: center;
	width: clamp(64px, 8vw, 88px); aspect-ratio: 1; border-radius: 50%;
	background: var(--wels-primary);
	box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
	transition: transform .25s ease;
}
.wels-tour-play:hover .wels-tour-play-ring,
.wels-tour-play:focus-visible .wels-tour-play-ring { transform: scale(1.08); }
.wels-tour-play-ring svg {
	width: 38%; height: 38%; fill: #fff;
	/* The triangle's own empty left edge makes it look off-centre. */
	margin-left: 8%;
}
.wels-tour-fallback { text-align: center; margin: 16px 0 0; }

@media (prefers-reduced-motion: reduce) {
	.wels-tour-play, .wels-tour-play-ring { transition: none; }
	.wels-tour-play:hover .wels-tour-play-ring { transform: none; }
}

/* ---------- News & Events ----------
   Three cards, equal height whatever the titles do, on the site's own
   tokens: the same radius, the same shadow, the same heading scale. The
   container is narrower than the page so the band has air around it. */
.wels-updates-inner { max-width: 1080px; }
.wels-updates-head { text-align: center; margin: 0 0 clamp(30px, 4vw, 48px); }
.wels-updates-eyebrow {
	margin: 0 0 10px;
	font-family: var(--wels-heading-font); font-weight: 700;
	text-transform: uppercase; letter-spacing: .12em; font-size: .78rem;
	color: var(--wels-primary);
}
.wels-updates-title {
	margin: 0 auto; max-width: 20ch;
	font-size: var(--wels-h2); font-weight: 400; line-height: 1.24;
	letter-spacing: .01em;
}

.wels-updates-grid {
	list-style: none; margin: 0; padding: 0;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(20px, 2.6vw, 30px);
}
/* The card is the grid item; the article inside it is the full-height box,
   so three cards of different lengths still line up at top and bottom. */
.wels-update-card { display: flex; }
.wels-update-card > article {
	display: flex; flex-direction: column; width: 100%;
	background: #fff;
	border: 1px solid rgba(20, 40, 38, .10);
	border-radius: var(--wels-radius);
	overflow: hidden;
	transition: transform .25s ease, box-shadow .25s ease;
}
.wels-update-card > article:hover,
.wels-update-card:focus-within > article {
	transform: translateY(-4px);
	box-shadow: var(--wels-band-shadow);
}

.wels-update-media { aspect-ratio: 16 / 10; overflow: hidden; }
.wels-update-media img {
	width: 100%; height: 100%; object-fit: cover; display: block;
	transition: transform .5s ease;
}
.wels-update-card > article:hover .wels-update-media img,
.wels-update-card:focus-within .wels-update-media img { transform: scale(1.05); }

.wels-update-body {
	display: flex; flex-direction: column; flex: 1;
	padding: clamp(16px, 1.8vw, 22px);
}
.wels-update-meta {
	display: flex; flex-wrap: wrap; gap: 6px 18px;
	margin: 0 0 10px; font-size: .8rem; color: var(--wels-muted);
}
.wels-update-metaitem { display: inline-flex; align-items: center; gap: 6px; }
.wels-update-metaitem svg { width: 14px; height: 14px; fill: currentColor; opacity: .7; flex: 0 0 auto; }

.wels-update-title { margin: 0 0 8px; font-size: 1.08rem; line-height: 1.35; }
.wels-update-title a { text-decoration: none; color: inherit; }
.wels-update-title a:hover { color: var(--wels-primary); }
/* Held to three lines so a long title cannot push its card's button out of
   line with the two beside it. */
.wels-update-title a,
.wels-update-excerpt {
	display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden;
}
.wels-update-title a { -webkit-line-clamp: 3; }
.wels-update-excerpt {
	-webkit-line-clamp: 3;
	margin: 0 0 16px; color: var(--wels-muted); font-size: .92rem; line-height: 1.6;
}
/* Pushed to the bottom of the card, so every button sits on one line. */
.wels-update-more { margin: auto 0 0; }
.wels-btn-sm { padding: 7px 18px; font-size: .84rem; border-radius: 999px; }

.wels-updates-all { text-align: center; margin: clamp(26px, 3.5vw, 40px) 0 0; }
.wels-updates-all a {
	font-family: var(--wels-heading-font); font-weight: 700; font-size: .95rem;
	text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 3px;
}
.wels-updates-all a:hover { color: var(--wels-primary); }

@media (max-width: 980px) {
	.wels-updates-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.wels-updates-grid { grid-template-columns: minmax(0, 1fr); }
	.wels-updates-title { max-width: none; }
}
@media (prefers-reduced-motion: reduce) {
	.wels-update-card > article,
	.wels-update-media img { transition: none; }
	.wels-update-card > article:hover { transform: none; }
	.wels-update-card > article:hover .wels-update-media img { transform: none; }
}

/* ---------- Mandatory Public Disclosure ----------
   The page comes from the plugin with a palette and a type scale of its own
   — its own greys, its own borders, a 1.15rem section heading — so it read
   as a different website. Pointed at the site's tokens here rather than by
   editing the plugin, which keeps the approved CBSE layout in the plugin's
   hands where it belongs. `body` only to win on specificity, since the
   plugin's own stylesheet may load after the theme's. */
body .welsd-wrap {
	--welsd-text: var(--wels-ink);
	--welsd-accent: var(--wels-primary);
	--welsd-border: rgba(20, 40, 38, .14);
	--welsd-head: var(--wels-alt-bg);
}
body .welsd-section-title { font-size: var(--wels-h3); }
body .welsd-result-title { font-size: 1rem; }
body .welsd-intro,
body .welsd-updated { color: var(--wels-muted); }
body .welsd-table-scroll { border-radius: var(--wels-radius); }
body .welsd-view-btn { border-radius: var(--wels-btn-radius); }
/* The banner supplies the title now, so the template's own heading is gone;
   this catches the shortcode used on any other page. */
body .welsd-title { font-size: var(--wels-h2); }

/* ---------- Content bands ----------
   The alternating photo-and-text pattern, as a block anybody can add in the
   editor: insert a Media & Text block, and tick "Show media on right" on the
   next one so the page zig-zags. Written out in full rather than leaning on
   the core block stylesheet, which the theme does not load. */
.wp-block-media-text {
	display: grid;
	grid-template-columns: var(--wels-band-media) minmax(0, 1fr);
	gap: var(--wels-band-gap);
	align-items: start;
	margin: 0 0 var(--wels-band-rhythm);
}
.wp-block-media-text.has-media-on-the-right {
	grid-template-columns: minmax(0, 1fr) var(--wels-band-media);
}
.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 2; }
/* Given a shape rather than left at whatever the file happens to be, so a
   portrait phone snap and a landscape one make the same band. */
.wp-block-media-text__media { margin: 0; aspect-ratio: var(--wels-band-ratio); }
.wp-block-media-text__media img {
	width: 100%; height: 100%; display: block;
	object-fit: cover;
	border-radius: var(--wels-radius);
	box-shadow: var(--wels-band-shadow);
}
.wp-block-media-text__content > *:first-child { margin-top: 0; }
.wp-block-media-text__content > *:last-child { margin-bottom: 0; }

@media (max-width: 820px) {
	.wp-block-media-text,
	.wp-block-media-text.has-media-on-the-right { grid-template-columns: minmax(0, 1fr); }
	/* One column: the photograph leads, whichever side it takes when wide. */
	.wp-block-media-text.has-media-on-the-right .wp-block-media-text__media { order: 0; }
}

/* A tribute, not a message. Restrained on purpose: a portrait, a rule, the
   words. The photograph is a small studio print from the prospectus, so it
   gets a plain frame rather than being blown up to look like a hero. */
.wels-tribute .wels-principal-photo img {
	object-position: center;
	box-shadow: 0 10px 28px rgba(20,40,38,.14);
}
.wels-tribute .wels-principal-name { margin-bottom: 4px; }
.wels-tribute .wels-principal-role {
	margin: 0 0 18px; padding-bottom: 16px;
	font-family: var(--wels-heading-font);
	letter-spacing: .06em; text-transform: uppercase;
	font-size: .8rem; color: var(--wels-muted);
	border-bottom: 1px solid rgba(0,0,0,.12);
	max-width: 62ch;
}

@media (max-width: 820px) {
	.wels-principal-inner,
	.wels-principal-flip .wels-principal-inner { grid-template-columns: minmax(0, 1fr); }
	.wels-principal-photo { max-width: 260px; aspect-ratio: 1 / 1; }
	/* One column: the portrait leads, whichever side it takes on a wide
	   screen. Mirroring only makes sense when there are two columns. */
	.wels-principal-flip .wels-principal-photo { order: 0; }
}
@media (prefers-reduced-motion: reduce) {
	.wels-principal-caret { display: none; }
}