/*
Theme Name: Schoolcms
Author: Innermedia
Author URI: https://www.innermedia.co.uk
Description:
Version: 5.1.0
*/
:root {
	--body_colour : #000;
	--title_colour : #000;
	--link_colour : #ec3822;
	--link_colour_hover : #ec3822;
	--button_bg: #ec3822;
	--button_colour: #eb2227;
	--button_bg_hover: #000;
	--button_colour_hover: #fff;
	/* Oakhyrst Grange — Figma design tokens */
	--og-red:       #eb2227;
	--og-red-faint: rgba(235, 34, 39, 0.7);
	--og-gutter:    132px;
	--og-max:       1560px;
}
/* AOS fade-left/right hold elements translated up to 100px past the viewport
   edge until they animate, which widens the scrollable area on mobile.
   Clip horizontal overflow at the root; `clip` rather than `hidden` so no
   scroll container is created and fixed/anchored elements are unaffected. */
html, body {
	overflow-x: clip;
}
/*Content Wrapper*/
.well {
	padding:10px 15px;
	background:#eaeaea;
	border:solid 1px #ddd;
	margin:20px 0;
}
.inner-carousel .owl-nav {
	position:relative;
}
.inner-carousel .owl-nav .owl-prev{
	position:absolute;
	left:0;
	top:0;
}
.inner-carousel .owl-nav .owl-next{
	position:absolute;
	right:0;
	top:0
}
/* ---- All carousel dots — home page + inner page ---- */
.homeSchools__carousel .owl-dot,
.inner-carousel .owl-dot,
.carouselSwitch .owl-dot,
.homeNews__grid .owl-dot,
.dynamic-staff .staff.owl-carousel .owl-dot {
	background: none;
	border: none;
	padding: 0;
	cursor: pointer;
}
.homeSchools__carousel .owl-dot span,
.inner-carousel .owl-dot span,
.carouselSwitch .owl-dot span,
.homeNews__grid .owl-dot span,
.dynamic-staff .staff.owl-carousel .owl-dot span {
	display: block;
	width: 34px;
	height: 1px;
	background: rgba(143, 3, 8, 0.30);
	transition: background 0.2s;
	margin: 15px 0;
}
@media (min-width: 992px) {
	.homeSchools__carousel .owl-dot span,
	.inner-carousel .owl-dot span,
	.carouselSwitch .owl-dot span,
	.homeNews__grid .owl-dot span,
	.dynamic-staff .staff.owl-carousel .owl-dot span {
		width: 70px;
	}
}
.homeSchools__carousel .owl-dot:hover span,
.inner-carousel .owl-dot:hover span,
.carouselSwitch .owl-dot:hover span,
.homeNews__grid .owl-dot:hover span,
.dynamic-staff .staff.owl-carousel .owl-dot:hover span {
	background: rgba(235, 34, 39, 0.4);
}
.homeSchools__carousel .owl-dot.active span,
.inner-carousel .owl-dot.active span,
.carouselSwitch .owl-dot.active span,
.homeNews__grid .owl-dot.active span,
.dynamic-staff .staff.owl-carousel .owl-dot.active span {
	background: var(--og-red);
}
.breadcrumbs {
	font-size:16px;
	padding-bottom:1.25rem;
	position:relative;
	margin-bottom:1.25rem;
	margin-top: 2rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
}
.searchform label{
	display:none;
}
.searchform {
	padding-right:40px;
	padding-left:0px;
	position:relative;
	overflow:hidden;
	font-size:14px;
}
.searchform input.searchInput {
	border: 0;
	height:30px;
	width:100%;
	background:transparent;
	padding: 4px 10px;
    outline: 0;
}
.searchform .searchSubmit{
    background: transparent;
    border: 0;
    text-transform: uppercase;
    padding: 0;
    font-size: 16px;
	position:absolute;
	background-repeat:no-repeat;
	background-position:center;
	right:5px;
	top:0px;
	width:30px;
	height: 28px;
    outline: 0;
}
.body-text iframe{
	max-width:100%;
}
/*news*/
.list-item{
    overflow: hidden;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 1px solid #ddd;
}
.list-item-image{
	text-align:center;
}
.list-item-image a{
	display:block;
	padding:10px 0;
}
.list-item-text{
}
.list-item-text p.date{
	font-size:0.8em;
	margin:0;
}
.postThumb {
	margin-bottom: 20px;
	text-align: center;
}
/* News post title and body text: no left indent */
.bodyContent header h1.entry-title,
h1.entry-title {
	margin-left: 0;
}
.bodyContent .body-text p,
.bodyContent .body-text li {
	margin-left: 0;
}

/* Single post: featured image sits above the copy, full column width
   (was floated left beside it - Feedbucket #949869) */
.bodyContent header .postThumb {
	float: none;
	margin: 0 0 24px;
	text-align: left;
	max-width: 100%;
}
.bodyContent header .postThumb img {
	width: 100%;
	height: auto;
	border-radius: 6px;
}
.bodyContent header time.date {
	display: block;
	margin-bottom: 24px;
}
/*------------------------------------*\
    Header
\*------------------------------------*/
header.mainHeader {
	height:120px;
	position:relative;
}
/* ---- Header: mobile-first base ---- */
.headGroup {
	background: var(--og-red);
	transition: background 300ms;
	padding-top: 0;
	padding-bottom: 0;
	z-index: 220;
	position: fixed;
	height: 70px;
	width: 100%;
	top: 0;
	left: 0;
}
/* Mobile base: white corner shape (~24px wide × 70px tall at right edge).
   Element is 72×24px pre-rotation; after rotate(-90deg) → 24px wide × 72px tall.
   right:-24px centres shape so visual right sits at viewport edge. */
.headGroup::after {
	content: '';
	position: absolute;
	width: 72px;
	height: 24px;
	background-image: url(images/bottom-shape.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	filter: brightness(0) invert(1);
	z-index: 3;
	pointer-events: none;
	top: 22px;
	right: -26px;
	transform: rotate(-90deg);
	transition: width 300ms, height 300ms, top 300ms, opacity 300ms;
}
/* Mobile: hide original logo col — inner pages use .innerPageLogo instead */
.headerIcon { display: none; }
body.scrolled .headGroup { background: var(--og-red); }
/* Mobile: head links and topNav always white */
.head-link { color: #fff; font-size: 16px; }
/* ---- Desktop overrides (992px+) ---- */
@media (min-width: 992px) {
	.headGroup {
		background: transparent;
		padding-top: 15px;
		padding-bottom: 15px;
		height: 90px;
	}
	.headGroup::after {
		filter: none;
		width: 126px;
		height: 130px;
		top: -2px;
		right: -46px;
	}
	/* On scroll: swap to red version and shrink */
	body.scrolled .headGroup::after {
		background-image: url(images/bottom-shape-red.svg);
		width: 90px;
		height: 93px;
		top: -1.5px;
		right: -33px;
	}
	body.scrolled .headGroup { background: #fff; }
	.headerIcon { display: block; }
	.head-link { color: var(--og-red); font-size: inherit; }
	body:not(.scrolled) .head-link { color: #fff; }
}
/* When nav is open on a scrolled page: shrink #navbar::after to match scrolled headGroup size */
body.scrolled.menuopen #navbar::after {
	width: 90px;
	height: 93px;
	top: -1.5px;
	right: -33px;
}
.fixedHeader .headGroup {
}
header.mainHeader {
	height: 0;
}
/* Nav toggle: white when header transparent (all pages before scroll) */
body:not(.scrolled) .menu-toggle {
	color: #fff;
}
body:not(.scrolled) .menu-toggle .toggleIcon span,
body:not(.scrolled) .menu-toggle .toggleIcon span:before,
body:not(.scrolled) .menu-toggle .toggleIcon span:after {
	background-color: #fff;
}
body:not(.scrolled) .menu-toggle .toggleText {
	color: #fff;
}
/* Logo size: full before scroll, compact after (all pages) */
.mainLogo {
	transition: width 300ms, height 300ms, transform 300ms, opacity 0.6s ease;
}
body.scrolled .mainLogo {
	width: 50px;
	height: auto;
	margin-left:80px;
	transform: translateY(5px);
}
.socialDesktop {
	justify-content: end;
    display: flex;
}
/* ---- Header right: mobile-first ---- */
/* Mobile: full-height container so align-items-center works against full 70px navbar */
.headGroup .container-fluid,
.headGroup .row {
	height: 100%;
}
/* Mobile: override Bootstrap justify-content-between (uses !important) so headerRight sits left */
.headGroup .row {
	justify-content: flex-start !important;
}
.headerRight {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	gap: 16px;
	margin: 0;
	transition: margin 0.3s ease;
}
@media (min-width: 992px) {
	.headGroup .container-fluid,
	.headGroup .row {
		height: auto;
	}
	.headGroup .row {
		justify-content: space-between !important;
	}
	.headerRight {
		justify-content: flex-end;
		gap: 50px;
		margin-right: 70px;
		margin-bottom: 25px;
	}
	body.scrolled .headerRight {
		margin-bottom: 0;
		margin-top: 10px;
	}
}
/* Top navigation menu */
.topNav {
	display: block; /* hidden on mobile */
}
.topNav #menu-top {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 4px;
}
/* Top nav links: mobile-first (white on red header) */
.topNav #menu-top li a {
	display: block;
	padding: 6px 12px;
	font-family: quincy-cf, serif;
	font-weight: 300;
	font-size: 18px;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s, font-size 0.3s;
}
.topNav #menu-top li a:hover {
	color: rgba(255,255,255,0.75);
}
@media (min-width: 992px) {
	.topNav #menu-top li a {
		font-size: 27px;
		color: var(--og-red);
	}
	.topNav #menu-top li a:hover { color: #000; }
	body.scrolled .topNav #menu-top li a { font-size: 20px; }
	body:not(.scrolled) .topNav #menu-top li a { color: #fff; }
	body:not(.scrolled) .topNav #menu-top li a:hover { color: rgba(255,255,255,0.75); }
}
/* ---- Video button ---- */
.videoBtn {
	display: inline-flex;
	align-items: center;
	gap: 0;
	padding: 10px 24px 10px 0;
	background: var(--og-red);
	border-radius: 12px;
	border: 2px solid var(--og-red);
	overflow: hidden;
	position: relative;
	color: #fff;
	font-family: quincy-cf, serif;
	font-weight: 200;
	font-size: 34px;
	text-decoration: none;
	white-space: nowrap;
	transition: background 0.4s, color 0.4s, border-color 0.4s;
	flex-shrink: 0;
}
/* Left arrow */
.videoBtn::before {
	content: '';
	display: block;
	width: 52px;
	height: 42px;
	background-image: url(images/bottom-shape.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	background-position: center;
	transform: rotate(90deg);
	flex-shrink: 0;
	margin-right: 0px;
	margin-left: -18px;
	margin-top: 0;
	margin-bottom: 0;
	opacity: 1;
	transition: opacity 0.4s ease;
}
/* Mobile video button — desktop scaled to 75% */
@media (max-width: 767px) {
	.videoBtn {
		font-size: 18px;
		padding: 8px 18px 8px 0;
		border-radius: 9px;
	}
	.videoBtn::before {
		margin-top: -8px;
		margin-bottom: -8px;
		margin-left: -20px;
	}
}
@media (min-width: 992px) {
	.videoBtn::before {
		width: 70px;
		height: 56px;
		margin-left: -26px;
		margin-top: -10px;
		margin-bottom: -10px;
	}
}
/* Right arrow — slides out beyond right edge on hover */
.videoBtn::after {
	content: '';
	position: absolute;
	right: -70px;
	top: 50%;
	transform: translateY(-50%) rotate(90deg);
	width: 70px;
	height: 56px;
	background-image: url(images/button-shape-red-new.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	transition: right 0.4s ease;
	opacity: 0;
}
.videoBtn__text {
	display: block;
	padding: 0px;
	transition: transform 0.4s ease;
}
.videoBtn:hover .videoBtn__text {
	transform: translateX(-15px);
}
.videoBtn:hover {
	background: #fff;
	color: var(--og-red);
	border-color: var(--og-red);
	text-decoration: none;
	overflow: visible;
}
.videoBtn:hover::before {
	opacity: 0;
}
.videoBtn:hover::after {
	right: -43.5px;
	opacity: 1;
}
/* Banner-positioned button — mobile-first */
.bannerVideoBtn {
	position: absolute;
	bottom: 0px;
	left: 50%;
	transform: translateX(-50%);
	z-index: 102;
}
@media (min-width: 992px) {
	.bannerVideoBtn {
		bottom: 60px;
		left: auto;
		right: 60px;
		transform: none;
	}
}

/* Banner button — always solid red, overrides the transparent header rule */
body.home .bannerVideoBtn,
body.home:not(.scrolled) .bannerVideoBtn {
	background: var(--og-red);
	border: 1px solid var(--og-red);
}
body.home .bannerVideoBtn:hover,
body.home:not(.scrolled) .bannerVideoBtn:hover {
	background: #fff;
	border-color: var(--og-red);
	color: var(--og-red);
}
/* ---- Banner strapline — fades in over video after logo fades out ---- */
.bannerStrapline {
	position: absolute;
	inset: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	z-index: 101;
	opacity: 0;
	transition: opacity 0.8s ease;
	pointer-events: none;
}
.bannerStrapline p {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-size: 48px;
	line-height: 1.1;
	color: #fff;
	text-align: center;
	margin: 0;
	width: 100%;
	max-width: 100%;
	padding: 0 40px;
	text-shadow: 0 2px 24px rgba(0, 0, 0, 0.3);
}
.bannerStrapline em {
	font-style: italic;
}
.bannerStrapline.is-visible {
	opacity: 1;
}
@media (min-width: 768px) {
	.bannerStrapline p { font-size: 64px; } /* smaller on tablet (desktop restores 150px below) */
}
@media (min-width: 992px) {
	.bannerStrapline p { font-size: 150px; }
}
/* Logo fade — triggered by body class */
body.banner-logo-faded .mainLogo {
	opacity: 0;
	transition: opacity 0.6s ease, width 300ms, height 300ms !important;
}
/* ---- Video lightbox ---- */
.videoLightbox {
	position: fixed;
	inset: 0;
	z-index: 99999;
	display: flex;
	align-items: center;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.3s;
}
.videoLightbox.is-open {
	opacity: 1;
	pointer-events: auto;
}
.videoLightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0,0,0,0.85);
	cursor: pointer;
}
.videoLightbox__inner {
	position: relative;
	width: 90vw;
	max-width: 1100px;
	z-index: 1;
}
.videoLightbox__close {
	position: absolute;
	top: -44px;
	right: 0;
	background: none;
	border: none;
	color: #fff;
	font-size: 36px;
	line-height: 1;
	cursor: pointer;
	padding: 4px 8px;
	opacity: 0.8;
	transition: opacity 0.2s;
}
.videoLightbox__close:hover {
	opacity: 1;
}
.videoLightbox__embed {
	position: relative;
	padding-top: 56.25%;
	background: #000;
}
.videoLightbox__embed iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
/*------------------------------------*\
    Navigation
\*------------------------------------*/
.menu-toggle{
    position:relative;
	padding-right:40px;
	display:inline-block;
	cursor:pointer;
	height:30px;
    color: #fff;
}
.menu-toggle .toggleText{
	display:none;
	vertical-align:middle;
	font-size:14px;
}
.menu-toggle .toggleIcon {
	position:absolute;
	width:30px;
	height:30px;
	right:0;
	top:0px;
	transition:300ms;
}
@media (min-width:992px){
	.menu-toggle .toggleText{
		display:inline-block;
	}
}
.menu-toggle .toggleIcon span:before,
.menu-toggle .toggleIcon span:after {
	content:'';
}
.menu-toggle .toggleIcon span,
.menu-toggle .toggleIcon span:before,
.menu-toggle .toggleIcon span:after {
    width: 36px;
    height: 1px;
    background-color: var(--og-red);
    display: block;
    transition:all 300ms;
	position:absolute;
}
/* Mobile-first: scrolled hamburger white (header stays red) */
body.scrolled .menu-toggle .toggleIcon span,
body.scrolled .menu-toggle .toggleIcon span:before,
body.scrolled .menu-toggle .toggleIcon span:after {
    background-color: #fff;
}
@media (min-width: 992px) {
    /* Desktop scrolled: white header → red hamburger */
    body.scrolled .menu-toggle .toggleIcon span,
    body.scrolled .menu-toggle .toggleIcon span:before,
    body.scrolled .menu-toggle .toggleIcon span:after {
        background-color: var(--og-red);
    }
}
.menu-toggle:hover .toggleIcon span,
.menu-toggle:hover .toggleIcon span:before,
.menu-toggle:hover .toggleIcon span:after{
    background-color: var(--link_colour_hover);
}
.menu-toggle .toggleIcon span {
	top:50%;
	left:2px;
	margin-top:-.5px;
}
.menu-toggle .toggleIcon span:before {
    top: -10px;
	margin-left: -18px;
}
.menu-toggle .toggleIcon span:after {
    top: 10px;
	margin-left: -18px;
}
body.menuopen .menu-toggle .toggleIcon span {
    background-color: transparent!important;
}
body.menuopen .menu-toggle .toggleIcon span:before {
    transform: rotate(135deg);
    top: 0px;
}
body.menuopen .menu-toggle .toggleIcon span:after {
    transform: rotate(-135deg);
    top: 0px;
}
#navbar{
	position: fixed;
	right: 0;
	transition: opacity 400ms ease, visibility 400ms ease;
	background-color: var(--og-red);
	z-index: 9999;
	top: 0px;
	bottom:0;
	width: 100%;
	max-width:100%;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	display:flex;
	flex-direction:column;
}
/* Nav header row: top shortcut links + close button */
.navbarHeader {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding: 0 20px;
	height: 120px;
	flex-shrink: 0;
	gap: 4px;
}
.navbarHeader ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 4px;
}
.navbarHeader ul li a {
	display: block;
	padding: 6px 12px;
	font-family: quincy-cf, serif;
	font-size: 27px;
	font-weight: 300;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	transition: opacity 200ms;
}
.navbarHeader ul li a:hover {
	opacity: 0.75;
}
/* Close button — nudge right and down on mobile */
@media (max-width: 991px) {
	.navbarHeader { padding-right: 0px; }
	.navbarClose.menu-toggle { align-self: flex-start; margin-top: 32px; }
}
/* Close button inside nav — override generic .menu-toggle layout so it doesn't shift */
.navbarClose.menu-toggle {
	background: none;
	border: none;
	padding: 0 !important;
	padding-right: 0 !important;
	margin-left: 20px;
	cursor: pointer;
	color: #fff;
	width: 36px;
	height: 36px;
	flex-shrink: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 2;
}
.navbarClose.menu-toggle .toggleIcon {
	position: relative;
	width: 36px;
	height: 36px;
	right: auto;
	top: auto;
}
/* Hide the span — draw X directly on toggleIcon pseudo-elements */
.navbarClose.menu-toggle .toggleIcon span,
.navbarClose.menu-toggle .toggleIcon span::before,
.navbarClose.menu-toggle .toggleIcon span::after {
	display: none !important;
}
.navbarClose.menu-toggle .toggleIcon::before,
.navbarClose.menu-toggle .toggleIcon::after {
	content: '';
	position: absolute;
	width: 24px;
	height: 2px;
	background: #fff;
	top: 50%;
	left: 50%;
}
.navbarClose.menu-toggle .toggleIcon::before {
	transform: translate(-50%, -50%) rotate(45deg);
}
.navbarClose.menu-toggle .toggleIcon::after {
	transform: translate(-50%, -50%) rotate(-45deg);
}
/* Mobile nav: menu position */
@media (max-width: 991px) {
	#menu-main {
		margin-left: 32px !important;
		margin-top: 120px !important;
	}
}
/* Mobile nav fixes */
@media (max-width: 991px) {
	/* 1. Hide logo col on home only — inner pages keep the logo visible */
	body.home .headGroup .row > .col-auto:first-child { display: none; }
	/* 2. Stretch headerRight col to fill row so toggle can be pushed right */
	.headGroup .row > .col-auto:last-child { flex: 1; }
	/* Inner pages: keep first col hidden same as home — headerRight is identical */
	body:not(.home) .headGroup .row > .col-auto:first-child { display: none; }
	/* Inner page logo sits below the nav row, hidden when menu is open or scrolled */
	.innerPageLogo { padding: 8px 16px 16px; transition: opacity 0.3s ease, max-height 0.3s ease; max-height: 100px; overflow: hidden; }
	.innerPageLogo__img { width: 200px; height: auto; }
	body.menuopen .innerPageLogo,
	body.scrolled .innerPageLogo { opacity: 0; max-height: 0; padding: 0; pointer-events: none; }
	/* 3. Push toggle to the right of headerRight, leaving gap before the arrow shape */
	.headerRight .menu-toggle { margin-left: auto; margin-right: 40px; }
	/* When menu open, nudge X right and down */
	body.menuopen .headerRight .menu-toggle { margin-right: 24px; margin-top: 0px; }
	/* 4. Hide tree decoration inside open nav */
	#navbar::before { display: none !important; }
}
.navbarClose.menu-toggle:hover .toggleIcon span,
.navbarClose.menu-toggle:hover .toggleIcon span::before,
.navbarClose.menu-toggle:hover .toggleIcon span::after {
	background-color: rgba(255,255,255,0.7) !important;
}
#navbar .menu-main-container{
	padding: 0;
	overflow: hidden;
	position: relative;
	flex: 1;
}
/* Short desktop windows: the level-1 list is taller than the viewport and
   overflow:hidden made the lower items unreachable (Feedbucket #952938).
   Scroll vertically; x stays hidden so closed slide panels never peek in. */
@media (min-width: 992px) {
	#navbar .menu-main-container {
		overflow-y: auto;
		overflow-x: hidden;
	}
}
/* Replicate the top-right shape inside the navbar (white) so it shows over the red overlay. */
#navbar::after {
	content: '';
	position: absolute;
	width: 126px;
	height: 130px;
	background-image: url(images/bottom-shape.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	filter: brightness(0) invert(1);
	pointer-events: none;
	top: -2px;
	right: -50px;
	transform: rotate(-90deg);
	z-index: 100;
}
@media (min-width: 992px) {
	#navbar::after {
		right: -46px;
		z-index: 1;
	}
}
/* tree.svg decorative pseudo — anchored to #navbar, not the container */
#navbar::before {
	content: '';
	display: block;
	position: absolute;
	left: clamp(130px, 11.5vw, 200px);
	top: clamp(150px, 20vh, 200px);
	width: 93px;
	height: 96px;
	background-image: url(images/tree.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	pointer-events: none;
	z-index: 1;
}
/* In-flow flex child at the bottom of #navbar's column: always visible, never
   overlays the menu; the menu container (flex:1) scrolls instead when the
   screen is short (Feedbucket #952938). */
#navbar .navbarExtra {
	flex-shrink: 0;
	padding: 0;
	margin: 20px 0 clamp(24px, 6vh, 110px) clamp(90px, 8.5vw, 145px);
}
/* Social icons inside open nav */
#navbar .navbarExtra .socials {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: 28px;
	align-items: center;
}
#navbar .navbarExtra .socials li a {
	color: #fff;
	font-size: 22px;
	text-decoration: none;
	transition: opacity 200ms;
}
#navbar .navbarExtra .socials li a:hover {
	opacity: 0.7;
}
/* Mobile-first: keep headGroup red when menu opens; z-index 220 keeps it below #navbar (9999)
   so the white shape (navbar::after) is visible. Desktop overrides to transparent. */
body.menuopen .headGroup{
	border-bottom-color:#676767;
	background: var(--og-red) !important;
	z-index: 220;
}
@media (min-width: 992px) {
	body.menuopen .headGroup {
		background: transparent !important;
		z-index: 10000;
	}
}
/* Hide logo behind nav — keep top nav + toggle visible at exact same position */
body.menuopen .headerIcon {
	visibility: hidden;
	opacity: 0;
}
/* Hide the duplicate navbarHeader inside #navbar — headGroup handles it */
.navbarHeader {
	display: none;
}
/* Hamburger X white when menu open */
body.menuopen .menu-toggle .toggleIcon span:before,
body.menuopen .menu-toggle .toggleIcon span:after {
	background-color: #fff !important;
}
body.menuopen .menu-toggle .toggleText {
	color: #fff;
}
/* Hide top nav links when menu open on mobile */
@media (max-width: 991px) {
	body.menuopen .topNav,
	body.menuopen .head-links {
		display: none;
	}
}
/* Top nav links white when menu open */
body.menuopen .topNav #menu-top li a,
body.menuopen .head-link {
	color: #fff !important;
}
body.menuopen .topNav #menu-top li a:hover,
body.menuopen .head-link:hover {
	color: rgba(255,255,255,0.75) !important;
}
/* Hide headGroup shape when menu open */
body.menuopen .headGroup::after {
	opacity: 0;
}
/* Lift headGroup above #navbar (z-index:9999) so the X toggle stays visible */
/* position: fixed keeps it pinned when the user scrolls with the menu open on mobile */
body.menuopen .headGroup {
	position: fixed;
	z-index: 10000;
}
/* Mobile: white arrow on headGroup::before so it sits above #navbar but below the X (z-index:2) */
@media (max-width: 991px) {
	body.menuopen .headGroup::before {
		content: '';
		position: fixed;
		width: 72px;
		height: 24px;
		background-image: url(images/bottom-shape.svg);
		background-size: 100% 100%;
		background-repeat: no-repeat;
		filter: brightness(0) invert(1);
		pointer-events: none;
		top: 22px;
		right: -26px;
		transform: rotate(-90deg);
		z-index: 1;
	}
	/* Hide navbar::after on mobile — headGroup::before handles it */
	body.menuopen #navbar::after {
		display: none;
	}
}
body.menuopen #navbar{
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	z-index: 9999;
}
#menu-main{
	margin-bottom:30px;
	margin-top: clamp(180px, 25.8vh, 260px);
	margin-left: clamp(240px, 21.9vw, 380px);
	clear:both;
}
#menu-main > li{
	position: static;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
#menu-main > li > a {
	flex: 0 0 auto;
}
#menu-main li a{
	display: block;
	text-decoration:none;
	line-height: 58px;
	position:relative;
	padding: 0 10px 0 0;
	color:#fff;
	font-size: 32px;
	font-weight: 300;
}
#menu-main li a:hover{
	text-decoration:none;
	opacity:0.5
}
/* Level 2 sub-menu: slides in as a column alongside Level 1 (stays visible) */
#menu-main > li > .sub-menu {
	position: absolute;
	top: 0;
	left: 100%;                          /* off-screen right when closed */
	width: clamp(260px, 21vw, 330px);    /* ~328px at 1560px canvas */
	height: 100%;
	background: var(--og-red);
	display: block;
	overflow: visible;
	transition: left 600ms ease;
	padding: clamp(190px, 26.9vh, 270px) 0 0 0;
	border: none;
	list-style: none;
	margin: 0;
}
#menu-main > li.open > .sub-menu {
	/* Anchor to Level 1's margin-left + fixed offset — keeps consistent gap regardless of viewport.
	   Offset widened from 290px to 350px so the longest Level 1 label ("Parents' Association")
	   and its arrow clear the Level 2 column instead of overlapping it. */
	left: calc(clamp(240px, 21.9vw, 380px) + 350px);
}
/* Level 3 sub-menu: slides in alongside Level 2 */
#menu-main .sub-menu .sub-menu {
	position: absolute;
	top: 0;
	left: calc(100% + 28px);             /* natural position: right of Level 2 + gap */
	transform: translateX(100vw);        /* push off-screen when closed */
	width: clamp(200px, 18vw, 280px);
	height: 100%;
	background: var(--og-red);
	display: block;
	overflow: visible;
	transition: transform 600ms ease;
	padding: clamp(210px, 29vh, 273px) 0 0 0;
	border: none;
	list-style: none;
	margin: 0;
}
#menu-main .sub-menu li.open > .sub-menu {
	transform: translateX(0);
}
#menu-main .sub-menu li:last-child > a{
	border-bottom:none;
}
/* Level 2 items: flex layout so arrow sits inline after link text */
#menu-main .sub-menu > li {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
}
#menu-main .sub-menu > li > a {
	flex: 0 0 auto;
	font-size: 22px;
	line-height: 40px;
}
#menu-main .sub-menu .sub-menu > li > a {
	font-size: 18px;
	line-height: 40px;
}
/* Back button — hidden on desktop */
#menu-main .navBack { display: none; }
#menu-main .navBack {
	list-style: none;
	margin-bottom: 20px;
}
#menu-main .navBackBtn {
	background: none;
	border: none;
	color: #fff;
	font-family: quincy-cf, serif;
	font-size: 18px;
	font-weight: 300;
	cursor: pointer;
	padding: 8px 0;
	display: flex;
	align-items: center;
	gap: 10px;
	opacity: 0.75;
	transition: opacity 200ms;
}
#menu-main .navBackBtn:hover {
	opacity: 1;
}
#menu-main .navBackBtn::before {
	content: '';
	display: inline-block;
	width: 18px;
	height: 18px;
	background-image: url(images/bottom-shape.svg);
	background-size: contain;
	background-repeat: no-repeat;
	filter: brightness(0) invert(1);
	transform: rotate(90deg);
}
#menu-main li.menu-item-has-children > .arrow {
	display: inline-block;
	flex: 0 0 auto;
	position: relative;
	width: 24px;
	height: 24px;
	margin-left: 10px;
	cursor: pointer;
	transition: transform 300ms;
	transform: rotate(90deg);
	margin-top: 10px;
}
#menu-main li.open.menu-item-has-children > .arrow {
	transform: rotate(90deg); /* stays pointing right when open */
}
#menu-main li.menu-item-has-children > .arrow{
	background-image: url(images/bottom-shape.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	filter: brightness(0) invert(1);
	transition: transform 300ms;
}
/* ===== MOBILE: slide-in sub-menu panels ===== */
@media (max-width: 991px) {
	/* Remove container's containing-block so sub-menus anchor to #navbar (fixed = viewport).
	   overflow-y:auto lets a long level-1 menu scroll on short screens; the max-height keeps
	   the scroll area clear of the pinned social icons so they never overlap the items.
	   overflow-x stays hidden (sliding panels anchor to #navbar, so they're unaffected). */
	.menu-main-container {
		position: static !important;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		max-height: calc(100vh - clamp(120px, 20vh, 170px));
		-webkit-overflow-scrolling: touch;
	}
	/* Clip sliding panels at the navbar edge */
	#navbar { overflow: hidden; }

	/* Level 2 panel — full viewport, off-screen right when closed */
	#menu-main > li > .sub-menu {
		position: absolute;
		top: 0;
		left: 100%;
		width: 100%;
		height: 100%;
		padding: 120px 0 40px 32px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transition: left 0.35s ease;
		background: var(--og-red);
		z-index: 1;
	}
	/* Slide in */
	#menu-main > li.open > .sub-menu {
		left: 0 !important;
	}
	/* Level 3 panel — full viewport, off-screen right when closed */
	#menu-main .sub-menu .sub-menu {
		position: absolute;
		top: 0;
		left: 100%;
		width: 100%;
		height: 100%;
		transform: none;
		padding: 120px 0 40px 32px;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		transition: left 0.35s ease;
		background: var(--og-red);
		z-index: 2;
	}
	#menu-main .sub-menu li.open > .sub-menu {
		left: 0 !important;
		transform: none !important;
	}

	/* Hide non-open level 1 items when a sibling has a sub-menu open */
	#menu-main:has(> li.open) > li:not(.open) { display: none; }
	/* Hide non-open level 2 items when a sibling has a sub-menu open */
	#menu-main .sub-menu:has(> li.open) > li:not(.open) { display: none; }

	/* Floating back button — injected by JS, shown via body.submenuopen */
	.navMobileBack {
		display: none;
		position: fixed;
		top: 13px;
		left: 16px;
		z-index: 10001;
		margin: 0; /* cancel generic button margin-top so it lines up with the close (X) */
		background: none;
		border: none;
		cursor: pointer;
		padding: 8px;
		width: 44px;
		height: 44px;
		align-items: center;
		justify-content: center;
	}
	.navMobileBack span {
		display: block;
		width: 30px;
		height: 30px;
		background-image: url(images/back.svg);
		background-size: contain;
		background-repeat: no-repeat;
		background-position: center;
	}
	body.submenuopen .navMobileBack { display: flex; }

	/* Sub-menu item font sizes on mobile */
	#menu-main .sub-menu > li > a { font-size: 28px; line-height: 1.5; }
	#menu-main .sub-menu .sub-menu > li > a { font-size: 22px; line-height: 1.5; }

	/* Mobile contact item injected into #menu-main — inherits menu-item styling */
	#menu-main .navMobileContact-item a {
		display: block;
		text-decoration: none;
		color: #fff;
	}
}
/* Never show back button, mobile contact, or inner page logo on desktop */
@media (min-width: 992px) {
	.navMobileBack { display: none !important; }
	.navMobileContact { display: none !important; }
	.innerPageLogo { display: none !important; }
}

/*------------------------------------*\
    Banner
\*------------------------------------*/
#pageBanner,
.bannerWrap {
	position: relative;
	overflow:hidden;
	min-height:300px;
	max-height:680px;
}
#homeBanner {
	position: relative;
	overflow: hidden;
	min-height: 480px;
	max-height: 900px;
}
#pageBanner:before,
.bannerWrap:before {
	content:'';
	display:block;
	width:100%;
	padding-top:35.897%;
}
#homeBanner:before {
	content:'';
	display:block;
	padding-top:56.08%;
}
/* Gradient overlay + white bottom-curve (base64 URI — avoids all path and encoding issues) */
#homeBanner::after {
	content: '';
	display: block;
	position: absolute;
	inset: 0;
	background-image:
		url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAxNTYwLjUgMjA1LjQnIHByZXNlcnZlQXNwZWN0UmF0aW89J25vbmUnPjxwYXRoIGZpbGw9JyNmZmYnIGQ9J00wLDBjMCwwLDEzLDE4Miw3ODAsMTg4aDAuNWM3NjctNiw3ODAtMTg4LDc4MC0xODh2MjA1LjRIMFYweicvPjwvc3ZnPg=="),
		linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0) 55%);
	background-size: 100% 60px, 100% 100%;
	background-position: bottom center, center;
	background-repeat: no-repeat, no-repeat;
	pointer-events: none;
	z-index: 100;
}
@media (min-width: 992px) {
	#homeBanner::after {
		background-size: 100% 210px, 100% 100%;
	}
}
/* Keep slide text above overlay */
#homeBanner .slideText {
	position: relative;
	z-index: 101;
}
@media(min-width:768px){
	#homeBanner {
		max-height:900px;
	}
	#homeBanner:before {
		content:'';
		display:block;
		padding-top:56.08%;
	}
}
/*------------------------------------*\
    FOOTER
\*------------------------------------*/
/* ================================================================
   Footer CTA — "Where your future takes root"
   ================================================================ */
.footerCTA {
	position: relative;
}
/* Full-width background photo */
/* Mobile-first: 420px, 700px at 768px+ */
.footerCTA__image {
	position: relative;
	width: 100%;
	min-height: 420px;
	background-color: #222;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
	justify-content: center;
	overflow: hidden;
}
@media (min-width: 768px) {
	.footerCTA__image { min-height: 700px; }
}
/* Dark overlay so text stays legible over the photo */
.footerCTA__image::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.28);
	z-index: 1;
	pointer-events: none;
}
/* Red bottom-curve pseudo image — same path as banner white curve, red fill */
/* Height scales with viewport width to preserve the same shallow-sweep look as desktop */
.footerCTA__image::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	height: 60px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1560.5 205.4' preserveAspectRatio='none'%3E%3Cpath fill='%23eb2227' d='M0,0c0,0,13,182,780,188h0.5c767-6,780-188,780-188v205.4H0V0z'/%3E%3C/svg%3E");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	z-index: 2;
	pointer-events: none;
}
@media (min-width: 576px) {
	.footerCTA__image::after { height: 100px; }
}
@media (min-width: 768px) {
	.footerCTA__image::after { height: 150px; }
}
@media (min-width: 992px) {
	.footerCTA__image::after { height: 210px; }
}
/* Content sits above the red curve — mobile: pushed down to ~halfway */
.footerCTA__inner {
	position: relative;
	z-index: 3;
	text-align: center;
	padding: 120px 20px 80px;
	width: 100%;
}
@media (min-width: 768px) {
	.footerCTA__inner { padding: 80px 20px 120px; }
}
.footerCTA__crest {
	display: block;
	margin: 0 auto 28px;
	width: clamp(70px, 8vw, 110px);
	height: auto;
	filter: drop-shadow(0 2px 8px rgba(0,0,0,0.35));
}
/* footerCTA title — mobile-first: 36px → 74px (992px+) */
.footerCTA__title {
	font-family: quincy-cf, serif;
	font-weight: 200;
	font-size: 36px;
	line-height: 1.15;
	color: #fff;
	margin: 0 auto;
	max-width: 290px;
	text-shadow: 0 2px 10px rgba(0,0,0,0.35);
	position:relative
}
@media (min-width: 768px) {
	.footerCTA__title { max-width: none; }
}
.footerCTA__title::before {
	content: '';
	position: absolute;
	width: 48px;
	height: 49px;
	background-image: url(images/tree.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	z-index: 3;
	pointer-events: none;
	top: 0%;
    left: 50%;
    transform: translate(-50%, -120%);
}
@media (min-width: 992px) {
.footerCTA__title::before {
	width: 93px;
	height: 96px;
}
}
.footerCTA__title em {
	font-style: italic;
}
/* CTA buttons — mobile: stacked column, row at 768px+ */
.footerCTA__buttons {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 16px;
	margin-top: 40px;
}
@media (min-width: 768px) {
	.footerCTA__buttons { flex-direction: row; justify-content: center; gap: 40px; }
}
.footerCTA__buttons .outline--btn--white {
	margin-top: 0;
}
/* ================================================================ */
#footer {
	margin-top: 0;
	background: var(--og-red);
	color: #fff;
}
/* ---- Main three-column area — mobile-first ---- */
.footerMain {
	padding: 40px 0 60px;
}
/* Brand column — mobile-first */
.footerBrand {
	padding-right: 0;
	margin-bottom: 36px;
}
.footerBrandLogo {
	display: inline-block;
	margin-bottom: 14px;
	margin-left: -10px; /* nudge logo 10px to the left without resizing it */
}
.footerBrandLogo .footerLogo,
.footerBrandLogo img {
	max-height: 105px;
	width: auto;
	display: block;
}
.footerBrandName,
.footerSchoolName {
	font-family: quincy-cf, serif;
	font-weight: 400;
	font-style: normal;
	font-size: 13px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.75);
	margin: 0 0 18px;
}
/* footerTagline — mobile-first: 28px italic em at 37px → 42px / 56px (992px+) */
.footerTagline {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-size: 28px;
	line-height: 1.2;
	color: #fff;
	margin-bottom: 16px;
}
.footerTagline em {
	font-style: italic;
	font-weight: 100;
	font-size: 37px;
}
/* footerStrapline — mobile-first: 14px → 22px (992px+) */
.footerStrapline {
	font-family: quincy-cf, serif;
	font-weight: 400;
	font-style: normal;
	font-size: 14px;
	line-height: 26px;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 24px;
}
.footerDesc {
	font-family: quincy-cf, serif;
	font-weight: 200;
	font-size: 14px;
	line-height: 1.9;
	color: rgba(255, 255, 255, 0.85);
	margin-bottom: 28px;
}
.footerDesc p {
	margin: 0;
}
/* Social icons */
.footerSocial {
	display: flex;
	gap: 44px;
	align-items: center;
	margin-top: 50px;
}
.footerSocial__link,
.footerSocial a {
	color: #fff;
	font-size: 22px;
	opacity: 0.85;
	transition: opacity 0.2s;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
}
.footerSocial__link:hover,
.footerSocial a:hover {
	opacity: 1;
	color: #fff;
}
/* Contact column — mobile-first */
.footerContact {
	font-family: quincy-cf, serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
	color: rgba(255, 255, 255, 0.9);
	margin-bottom: 20px;
}
.footerContact p {
	margin: 0 0 0;
	color: rgba(255, 255, 255, 0.9);
}
.footerContact a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: color 0.2s;
}
.footerContact a:hover {
	color: #fff;
}
/* Policies / standard view links — below contact details */
.footerPolicies {
	font-family: quincy-cf, serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 28px;
	color: rgba(255, 255, 255, 0.85);
}
.footerPolicies p {
	margin: 0;
}
.footerPolicies a {
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	transition: color 0.2s;
}
.footerPolicies a:hover {
	color: #fff;
}
.footerPolicies__sep {
	margin: 0 4px;
	opacity: 0.6;
}
.footerPolicies__copy {
	margin: 8px 0 0;
	opacity: 0.45;
	font-size: 15px;
}
/* Key Links nav column */
.footerNavTitle {
	font-family: quincy-cf, serif;
	font-weight: 700;
	font-size: 20px;
	line-height: 34px;
	color: #fff;
	margin: 0 0 8px;
}
#menu-useful {
	list-style: none;
	padding: 0;
	margin: 0;
}
#menu-useful li {
	margin-bottom: 0;
}
#menu-useful li a {
	font-family: quincy-cf, serif;
	font-size: 20px;
	font-weight: 400;
	line-height: 42px;
	color: rgba(255, 255, 255, 0.85);
	text-decoration: none;
	display: block;
	transition: color 0.2s;
}
#menu-useful li a:hover {
	color: #fff;
}
/* ---- Footer lower bar — copyright only ---- */
.footerLower {
	background: rgba(0, 0, 0, 0.15);
	color: rgba(255, 255, 255, 0.5);
	padding: 10px 0;
	font-size: 12px;
	font-family: quincy-cf, serif;
}
.footerLower__copy {
	margin: 0;
	color: rgba(255, 255, 255, 0.5);
}
/* Decorative gold leaf — bleeds off right edge */
.footerMain {
	position: relative;
}
@media (min-width: 992px) {
	.footerMain { overflow: hidden; }
}
/* Push contact + nav columns down to align with strapline */
@media (min-width: 992px) {
	.footerContactCol,
	.footerNavCol {
		padding-top: 150px;
	}
	/* Restore desktop font sizes */
	.footerCTA__title { font-size: 74px; }
	.footerTagline { font-size: 42px; }
	.footerTagline em { font-size: 56px; }
	.footerStrapline { font-size: 22px; line-height: 40px; }
}
/* footerLeaf — mobile-first: 80px, larger at 768px+ */
.footerLeaf {
	position: absolute;
	bottom: 80px;
	right: 0;
	width: 80px;
	height: auto;
	opacity: 1;
	pointer-events: none;
}
@media (min-width: 992px) {
	.footerMain { padding: 60px 0 50px; }
	.footerBrand { padding-right: 20px; margin-bottom: 0; }
	.footerContact { margin-bottom: 28px; }
	.footerLeaf { width: 220px; }
}
/* Mobile + tablet (up to 991px): hide gold leaf */
@media (max-width: 991px) {
	.footerLeaf { display: none; }
}
/* Mobile + tablet footer font sizes */
@media (max-width: 991px) {
	.footerTagline { margin-bottom: 8px; }
	.footerStrapline { font-size: 18px; line-height: 1.6; margin-bottom: 0 !important; }
	.footerContact, .footerContact p, .footerContact a { font-size: 16px; line-height: 1.6; }
	.footerPoliciesCol .footerPolicies { padding-top: 24px; }
	.footerPolicies, .footerPolicies p, .footerPolicies a { font-size: 16px; line-height: 1.6; }
	.footerPolicies__copy { font-size: 16px; }
	.footerNavTitle { font-size: 16px; font-weight: bold; margin-bottom: 6px; }
	#menu-useful li a { font-size: 16px; line-height: 2.1; }
	.footerSocial { gap: 29px; margin-top: 0 !important; padding-top: 32px !important; }
	.footerSocial__link, .footerSocial a { font-size: 16px; }
	.footerMain { padding: 32px 0 40px; }
	.footerBrand { margin-bottom: 36px; }
}
/* ---- Footer awards / accreditation logos ---- */
.footerAwards {
	border-top: 1px solid rgba(255, 255, 255, 0.15);
	padding: 28px 0 40px;
}
#footer .footerAwards__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;              /* inline row */
	flex-wrap: wrap;            /* mobile: 4 per row so 8 logos stay legible */
	align-items: center;
	justify-content: center;
	gap: 16px 12px;
}
#footer .footerAwards__item {
	list-style: none;          /* no bullet marker */
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 calc(25% - 9px); /* 4 columns incl. 12px gaps */
	min-width: 0;
	max-width: 110px;          /* identical box → every logo the same size */
	height: 60px;
}
@media (min-width: 768px) {
	#footer .footerAwards__list { flex-wrap: wrap; gap: 24px 32px; }
	#footer .footerAwards__item { flex: 0 0 auto; width: 110px; }
}
#footer .footerAwards__item::marker { content: ''; }
.footerAwards__logo {
	max-width: 100%;
	max-height: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
}
@media (min-width: 992px) {
	.footerAwards { padding: 36px 0 48px; }
	#footer .footerAwards__list { gap: 28px 44px; }
	/* Round badges are height-capped - 94px read too small (Feedbucket #952960) */
	#footer .footerAwards__item { width: 150px; height: 116px; }
}
/*------------------------------------*\
    Dynamic Content
\*------------------------------------*/
.dynamicContent {
	margin-top: 30px;
	margin-bottom: 0;
}
/* A block whose template rendered nothing (e.g. an empty text block) still
   outputs its <section> wrapper - collapse it so it doesn't double the gap
   between real blocks (Feedbucket #950089) */
.dynamicContent:not(:has(*)) {
	display: none;
}
body:not(.home) .dynamicContent {
	margin-top: 40px;
}
@media (min-width: 992px) {
	.dynamicContent {
		margin-top: 50px;
		margin-bottom: 0;
	}
	body:not(.home) .dynamicContent {
		/* Inter-module gap on inner pages. Reduced from 180px to tighten the
		   spacing between stacked modules on content-heavy pages. Matches the
		   40px used on mobile. Specific module types with their own inner-page
		   overrides (curriculum, callout+poi) keep their larger spacing. */
		margin-top: 40px;
	}
}
/*******Dividers******/
.dividera{
	clear: both;
    width: 100%;
    height: 100px;
   position:relative;
}
.dividera:before{
	content:'';
	width:90%;
	height:1px;
	border-bottom:solid 1px #ccc;
	position:absolute;
	top:50%;
	left:5%;
}
.dividera:after{
	content:'';
	display:block;
	 background-image: url(images/cluster.svg);
    background-position: center center;
	background-size:contain;
	height:76px;
	width:76px;
	top:50%;
	left:50%;
	margin-top:-38px;
	margin-left:-38px;
    background-repeat: no-repeat;
	position:absolute;
	background-color:#fff;
}
.dividerb{
    clear: both;
    width: 100%;
    height: 130px;
    background-image: url(images/cluster.svg);
    background-position: center center;
    background-repeat: no-repeat;
	background-size:90px;
}
/*******FAQS*****/
.faqs{
}
.faqs .faq{
	border-bottom:solid 2px #fff;
}
.faq-question{
	position:relative;
	margin:0;
	padding:0.625rem 1.5rem;
    padding-right: 2em;
	background: #a2a6a9;
	color:#fff;
	cursor:pointer;
}
.faq.open .faq-question{
	background:#969696;
}
.faq-question:hover{
	background: #000;
}
.faq-question:after {
    content: '\f054';
    display: block;
    width: 1.5em;
    height: 1.5em;
    line-height: 1.5em;
	text-align:center;
    position: absolute;
    right: 5px;
    top:0.625rem;
	font-size:0.8em;
	font-weight:700;
	font-family: "Font Awesome 6 Free";
    transform: rotate(0deg);
	transition:300ms;
}
.faq.open .faq-question:after {
  transform:rotate(90deg);
}
.faqs .faq:last-child .faq-answer{
	border-bottom:solid 1px #a2a6a9;
}
.faqs .faq.open:last-child .faq-answer{
	border-color:#969696;
}
/******Staff********/
.staffMember {
	padding-bottom:15px;
	margin-bottom:20px;
	border-bottom:solid 1px #eee;
}
.staff-meta {
	margin-bottom:5px;
}
.staff-meta .meta-label {
	font-weight:700;
}
.staff-meta.featured-staff-metas .staff-meta > *{
	display:inline-block;
}
.staff-meta a.email-value{
	font-size: 0;
    color: transparent;
	display: inline-block;
    vertical-align: middle;
}
.staff-meta a.email-value:before {
    content: "send";
    font-size: 12px;
    padding: 5px 10px;
    color: #000;
    display: block;
    text-align: center;
    background-color: #eee;
    border-radius: 5px;
    text-transform: uppercase;
    pointer-events: none;
	transition:300ms;
}
.staff-meta a.email-value:hover:before{
	background-color:#ccc;
}
/*****Quotes******/
.quoteContainer .quotesTitle{
	margin:10px 0 0;
	text-align:center;
	padding:0 15px;
}
/* Mobile-first: no fixed aspect-ratio — let content dictate height */
.quoteContainer {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	background-color: #222;
	background-size: cover;
	background-position: center;
	color: #fff;
	padding-top: 60px;
	padding-bottom: 60px;
	min-height: 0;
}
.quoteContainer::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 70px;
	background-image: url(images/bottom-shape.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	z-index: 3;
	pointer-events: none;
}
/* Dark gradient over left half so quote text stays readable */
.quoteContainer::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		90deg,
		rgba(0, 0, 0, 0.6) 0%,
		rgba(0, 0, 0, 0) 40%
	);
	pointer-events: none;
	z-index: 1;
}
/* White arch at bottom — SVG pseudo image — mobile-first: 90px, 70px at 768px+ */
.quoteContainer::after {
	display:none
}
/* Quote mark, text and pager sit above the overlay */
.quoteContainer .quotesTitle,
.quoteContainer blockquote.quote-text,
.quoteContainer .quote-cite,
.quoteContainer .cycle-pager,
.quoteContainer .quoteIcon,
.quoteContainer #quotes,
.quoteContainer .singleQuote {
	position: relative;
	z-index: 2;
}
/* Large opening quote mark */
.quoteContainer .quoteIcon {
	display: block;
	width: 70px;
	height: 70px;
	border: 1.5px solid rgba(255,255,255,0.5);
	border-radius: 4px;
	margin: 0 0 24px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 48px;
	font-family: quincy-cf, serif;
	font-weight: 400;
	color: rgba(255,255,255,0.75);
	line-height: 1;
}
/* Mobile-first: 26px, 40px at 768px+ */
.quoteContainer blockquote.quote-text {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-size: 16px;
	line-height: 1.2;
	color: #fff;
	padding: 4em 1.5em 1.5em;
	margin: 0;
	max-width: 200px;
	position:relative;
	text-align: left;
	font-style: normal;
	width: 100%;
}
.quoteContainer blockquote.quote-text::before {
	content: '';
	position: absolute;
	width: 48px;
	height: 49px;
	background-image: url(images/quote.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	z-index: 3;
	pointer-events: none;
	top: 0%;
	left: 10%;
	transform: translate(0%, -50%);
}
@media (min-width: 992px) {
	.quoteContainer blockquote.quote-text::before  {
		width: 93px;
		height: 96px;
		transform: translate(-50%, -180px);
	}
}
.quoteContainer .quote-cite {
	font-family: quincy-cf, serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0;
	color: #fff;
	padding: 0 0 12px;
	text-align: center;
	font-style: normal;
}
.quoteContainer .cycle-pager {
	width: 100%;
	margin: 0;
	padding: 0 15px;
	text-align: center;
	position: relative;
	z-index: 1;
}
.quoteContainer .cycle-pager span{
	cursor:pointer;
	display:inline-block;
	margin:0 2px;
	width:15px;
	text-align:center;
	opacity:0.8;
	font-size:20px;
}
.quoteContainer .cycle-pager span.cycle-pager-active{
	opacity:1;
}
/* Home page only — tablet landscape layout */
@media (min-width: 768px) {
	body.home .quoteContainer { aspect-ratio: 16/9; min-height: unset; padding-bottom: 0; }
	body.home .quoteContainer::after { height: 70px; }
	body.home .quoteContainer blockquote.quote-text {
		font-size: 26px;
		text-align: left;
		width: 50%;
		padding: 5em 2em 2em;
		max-width: 500px;
	}
	body.home .quoteContainer .quote-cite { font-size: 20px; text-align: left; }
	body.home .quoteContainer .cycle-pager { text-align: left; }
}
/* Home page only — desktop */
@media (min-width: 992px) {
	body.home .quoteContainer::after { display: block; }
	body.home .quoteContainer blockquote.quote-text {
		font-size: 40px;
		text-align: left;
		width: 60%;
		padding: 6em 2em 2em 4em;
		max-width: 800px;
	}
	body.home .quoteContainer .quote-cite {
		font-size: 30px;
		text-align: left;
	}
	body.home .quoteContainer .cycle-pager { text-align: left; }
	body.home .quoteContainer blockquote.quote-text::before {
		width: 93px;
		height: 96px;
		top: 10%;
		left: 4em;
		transform: none;
	}
}
/****Documents******/
a.button.document-link {
	padding-right:50px;
	width:100%;
}
a.button.document-link:after {
	font-family: "Font Awesome 6 Free";
	font-weight: 900;
	content: "\f56d";
	display:block;
	position:absolute;
	top:50%;
    right: 10px;
    transform: translateY(-50%);
}
/*Callout*/
.callout {
	display:block;
	position:relative;
	transition:300ms;
	color: #fff;
	--body_colour: #fff;
	--title_colour: #fff;
	--button_colour: #fff;
    background: #969696;
	font-size:1em;
	overflow:hidden;
}
/* Callout button arrow uses the white SVG (red bg) */
.callout a.button::before {
	background-image: url(images/bottom-shape.svg);
}
.callout .calloutContent {
	position:relative;
	text-align:center;
	width: 70%;
	margin-bottom: 40px;
}
.callout .calloutTitle {
	font-size:1em;
	margin:0.5em 0;
}
.callout.hasbg .coimg {
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	position:absolute;
	top:0;
	left:0;
	right:0;
	bottom:0;
}
.callout.hasbg .coimg:after {
	content: '';
    display: block;
    width: 100%;
    bottom: 0;
    position: absolute;
    left: 0;
    height: 100%;
    background: rgba(0,0,0,0.3);
}
.callout .coimg img{
	width:100%;
	height:100%;
	object-fit:cover;
	position:absolute;
}
.callout.hasbg .calloutContent {
	padding-bottom:75px;
	padding-top:150px;
}
.callout.hastext.hasbg .calloutContent {
	padding-bottom:85px;
	padding-top:100px;
}
/***POIS****/
.row.pois {
    --bs-gutter-y: 1.5rem;
}
.poi {
	position: relative;
	display: block;
	transition:all 300ms;
    overflow: hidden;
	background:#676767;
	color:#fff;
	font-family: quincy-cf, serif;
	margin-bottom:30px;
}
.poi:hover  {
	color:#fff;
	text-decoration:none;
}
.poiImage .poiImageBG {
	position:absolute;
	width:100%;
	height:100%;
	top:0;
	left:0;
	background-size:cover;
	background-position:center;
	background-repeat:no-repeat;
	transition:300ms;
	opacity:1;
}
.poiImage .poiImageBG:after {
	content:'';
	display:block;
	width:100%;
	bottom:0;
	position:absolute;
	left:0;
	height:100%;
	background:rgba(0,0,0,0.3);
}
.poiImage .poiImageBG img{
	width:100%;
	height:100%;
	object-fit:cover;
	position:absolute;
}
.poiImage {
	background:inherit;
}
.poi:hover .poiImage .poiImageBG {
}
.poiImage:before {
	content:'';
	display:block;
	width:100%;
	padding-top:100%;
}
.textOnlyBlock .poiText {
	position:relative;
	padding:25px 15px;
}
.poi .poiTitle {
	display:inline-block;
	line-height:1.3;
	text-align:center;
}
.poi .textOnlyBlock{
}
.poi .poiTitle {
	display:block;
	font-size:20px;
	font-weight:400;
	position:relative;
	padding:10px 15px;
	text-transform:uppercase;
}
.poi .textOnlyBlock .poiTitle{
	margin:5px;
}
.textOnlyBlock {
	padding:10px 30px;
	transition:300ms;
}
.textOnlyBlock .poiText{
	display:block;
	text-align:center;
}
.poi:hover .textOnlyBlock {
	background-color:rgba(0,0,0,0.2);
	color:#fff;
	text-decoration:none;
}
.poiImage .poiText {
	padding:10px 20px;
	position:absolute;
	bottom:0;
	left:0;
	width:100%;
	bottom:15%;
	transform:translateY(50%);
	text-align:center;
	width:100%;
	transition:300ms;
}
.poiImage .poiText {
}
.poiImage .poiText .poiEx {
	max-height:0;
	overflow:hidden;
	font-size:18px;
	transition:300ms;
}
.poi:hover .poiImage .poiText {
	bottom:50%;
}
.poi:hover .poiImage .poiImageBG {
	opacity:0;
}
.poi:hover .poiImage .poiEx {
	max-height:460px;
}
.pois.homePOIs .col-xs-6 {
	padding-left:15px;
	padding-right:15px;
}
/*------------------------------------*\
    HOME DYNAMIC
\*------------------------------------*/
/* Welcome block — mobile-first padding */
.welcomeBlock {
	padding: 120px 0 0px;
	margin-bottom: 0;
	position: relative;
}
/* ---- Shared acorn decoration (all instances) ---- */
.welcomeBlock::before,
.body-text h2::before,
.dynamic-staff .sectionTitle::before,
.dynamic-poi::after {
	content: '';
	position: absolute;
	width: 48px;
	height: 49px;
	background-image: url(images/acorn.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	z-index: 3;
	pointer-events: none;
}

/* Welcome block: centred at top */
.welcomeBlock::before {
	top: 5%;
	left: 0%;
}
.welcomeBlock::after {
	display:none
}
.welcomeImage {
	position: relative;
	z-index: 1;
}
@media (min-width: 992px) {
.welcomeBlock::after {
	content: '';
	position: absolute;
	bottom: 0px;
	left: -110px;
	width: 500px;
	height: 500px;
	background-image: url(images/acorns.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: bottom left;
	pointer-events: none;
	z-index: 0;
	display: block
}
.welcomeBlock::before {
	top: 10%;
	left: 50%;
	transform: translate(-50%, 0%);
}
.welcomeBlock::before,
.body-text h2::before,
.dynamic-staff .sectionTitle::before,
.dynamic-poi::after {
	width: 93px;
	height: 96px;
}
}
/* No acorn decorator on h2s inside the page intro block (the_content),
   only on dynamic-content section headings. */
.bodyContent > .body-text h2::before {
	display: none;
}
/* With no acorn above, reclaim the large top margin that reserved space
   for it — intro h2s only. */
.bodyContent > .body-text h2 {
	margin-top: 24px;
}
@media (min-width: 992px) {
	.bodyContent > .body-text h2 {
		margin-top: 40px;
	}
}
/* When the page has no intro copy, pull the first dynamic block up under the
   H1 instead of leaving the full inter-block gap. Two routes, both covered:
   (a) PHP added .no-intro (content truly empty and intro wrapper removed);
   (b) the intro wrapper is present but its content column has no rendered
       children (empty/near-empty content). Specificity (0,4,0) beats the
       body:not(.home) .dynamicContent 180px rule without !important. */
.bodyContent.no-intro > .dynamicContent:first-of-type,
.bodyContent > .body-text:not(:has(.col-md > *)) + .dynamicContent {
	margin-top: 24px;
}
@media (min-width: 992px) {
	.bodyContent.no-intro > .dynamicContent:first-of-type,
	.bodyContent > .body-text:not(:has(.col-md > *)) + .dynamicContent {
		margin-top: 60px;
	}
}
/* Flip columns at tablet: image left, text right (text pulled left with a
   smaller gap so it isn't over-indented) */
@media (min-width: 768px) {
	.welcomeBlock .row {
		display: flex;
		align-items: flex-start;
		margin-top: 60px;
	}
	.welcomeBlock .welcomeBlockText {
		order: 2;
		padding-left: 0;
		padding-right: 0;
	}
	.welcomeBlock .col-lg-5 {
		order: 1;
	}
	/* Smaller welcome image on tablet (reset to full size at desktop below) */
	.welcomeImage {
		max-width: 300px;
		margin-left: auto;
		margin-right: auto;
	}
}
/* Desktop: wider padding */
@media (min-width: 992px) {
	.welcomeBlock .row { margin-top: 100px; }
	.welcomeBlock .welcomeBlockText { padding-left: 110px; }
}
/* Page title — mobile-first: 36px → 60px (768px+) → 92px (992px+) */
h1.home-title {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-style: italic;
	font-size: 36px;
	line-height: 1.1;
	color: var(--og-red);
	margin: 8px 0px 20px 20px
}
h1.home-title span,
h1.home-title strong {
	font-style: normal;
	font-weight: 100;
}
/* Sub-heading label — small label above section headings */
h1.home-title span {
	display: block;
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-size: 12px;
	letter-spacing: 0.6px;
	line-height: normal;
	color: var(--og-red);
	margin: 0;
	text-transform:uppercase
}
/* Body text / the_content() inside welcome — mobile-first */
.welcomeBlockText .entry-content p,
.welcomeBlockText > p {
	font-family: quincy-cf, serif;
	font-weight: 200;
	font-size: 16px;
	line-height: 26px;
	color: var(--og-red);
	margin: 0 20px 0 24px
}
/* Welcome image — organic blob shape from Figma — mobile-first */
.welcomeImage {
	overflow: hidden;
	border-radius: 50%;
	margin-left: 0px;
	margin-top: 30px;
}
.welcomeImage img {
	width: 100%;
	display: block;
	aspect-ratio: 597 / 618;
	object-fit: cover;
	transition: transform 0.5s ease;
}
.welcomeImage:hover img {
	transform: scale(1.03);
}
/* Mobile btn overrides — keep padding-left intact (arrow needs it) */
.welcomeBlock .btn,
.welcomeBlock a.button {
	font-size: 16px;
	height: 44px;
	gap: 14px;
	margin-top: 50px;
}
/* Mobile: arrow 45px smaller than desktop (95×67px vs 140×112px) */
.welcomeBlock a.button::before {
	width: 95px;
	height: 67px;
	left: -34px;
}
/* Tablet — 768px+ */
@media (min-width: 768px) {
	.welcomeBlock {
		padding: 50px 0 40px;
	}
	h1.home-title {
		font-size: 60px;
		line-height: 1.05;
	}
	h1.home-title span {
		font-size: 24px;
		letter-spacing: 1.2px;
	}
}
/* Desktop — 992px+ */
@media (min-width: 992px) {
	.welcomeBlock {
		padding: 180px 0 100px;
	}
	.welcomeImage {
		width: 600px;
		height: 600px;
		max-width: none; /* reset the tablet cap */
		margin-top: 0;
		margin-left:-40px;
		margin-right: 0;
	}
	.welcomeImage img {
		height: 618px;
	}
	h1.home-title {
		font-size: 92px;
		line-height: 1.05;
		margin: 8px 0 20px 0px;
	}
	.welcomeBlockText .entry-content p,
	.welcomeBlockText > p {
		font-size: 25px;
		line-height: 40px;
		margin: 0 0 24px 0
	}
}
@media (min-width: 768px) {
	.welcomeBlock .btn,
	.welcomeBlock a.button {
		font-size: revert;
		height: revert;
		gap: revert;
	}
	.welcomeBlock a.button::before {
		width: 140px;
		height: 112px;
		left: -52px;
	}
}
/* Home content wrapper — the_dynamic_content() output */
.homeContent {
	margin-top: 0;
	margin-bottom: 0;
}
/*------------------------------------*\
    HOME VALUES SECTION
    Template: template-parts/dynamic-values.php
\*------------------------------------*/
/* Mobile: landscape with words on right — mirrors desktop layout at small scale */
.homeValues {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	min-height: 0;
	overflow: hidden;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: center;
	justify-content: flex-end;
}
/* Light wash overlay so text stays readable */
.homeValues::before {
	content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(0,0,0,0.85) 100%);
    pointer-events: none;
}
/* Mobile: content pushed to right ~58% of section, centred within that column */
.homeValues__inner {
	position: relative;
	z-index: 1;
	text-align: center;
	padding: 16px 16px 16px 42%;
	width: 100%;
}
/* "OUR SCHOOL VALUES" small label — mobile-first: 12px → 24px (768px+) */
.homeValues__label {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-style: normal;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #fff;
	margin: 0px;
}
/* Rotator — mobile: 80px landscape, 450px at 768px+ */
.homeValues__rotator {
	position: relative;
	overflow: hidden;
	height: 80px;
	display: flex;
	align-items: center;
	justify-content: flex-start;
}
/* Each value word — mobile: centred via left:50% + translateX(-50%); desktop: 128px */
.homeValues__word {
	font-family: quincy-cf, serif;
	font-weight: 400;
	font-style: normal;
	font-size: 26px;
	color: #fff;
	line-height: 1;
	position: absolute;
	left: 50%;
	text-align: center;
	white-space: nowrap;
	width: auto;
	opacity: 0;
	transform: translateX(-50%) translateY(140%) scale(0.8);
	transition: opacity 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94),
	            transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94);
	pointer-events: none;
}
.homeValues__word.is-next {
	opacity: 0.2;
	transform: translateX(-50%) translateY(90%) scale(0.8);
}
.homeValues__word.is-active {
	opacity: 1;
	transform: translateX(-50%) translateY(0) scale(1);
	pointer-events: auto;
	font-size: 38px;
}
.homeValues__word.is-prev {
	opacity: 0.2;
	transform: translateX(-50%) translateY(-90%) scale(0.8);
}
/* Tablet: values section */
@media (min-width: 768px) {
	.homeValues { aspect-ratio: unset; min-height: 500px; justify-content: center; }
	.homeValues__inner { text-align: center; padding: 80px 20px 80px 52%; }
	.homeValues__rotator { height: 260px; justify-content: center; overflow: visible; }
	.homeValues__label { font-size: 20px; }
	/* Words: centre each word (left:50% + translateX(-50%)) so every value is
	   individually centred in the rotator, regardless of its length. */
	.homeValues__word { left: 50%; font-size: 60px; white-space: nowrap; width: auto; text-align: center;
		transform: translateX(-50%) translateY(140%) scale(0.8); }
	.homeValues__word.is-next { transform: translateX(-50%) translateY(90%) scale(0.8); }
	.homeValues__word.is-active { transform: translateX(-50%) translateY(0) scale(1); font-size: 86px; }
	.homeValues__word.is-prev { transform: translateX(-50%) translateY(-90%) scale(0.8); }
}
/* Desktop: full sizes */
@media (min-width: 992px) {
	.homeValues__inner { padding: 80px 20px 80px 30%; }
	.homeValues__rotator { height: 450px; }
	.homeValues__label { font-size: 24px; }
	.homeValues__word { font-size: 128px; }
	.homeValues__word.is-active { font-size: 180px; }
}
/*------------------------------------*\
    HOME STATS — NOT JUST NUMBERS
    Template: template-parts/dynamic-content/home/dynamic-stats.php
\*------------------------------------*/
section.dynamic-stats {
	margin-top: 0px;
}
/* Mobile-first: 60px padding, 80px at 992px+ */
.homeStats {
  	padding: 60px 0;
    background: linear-gradient(to bottom, rgba(235, 34, 39, 0.08) 75%, transparent 75%);
	position: relative;
}
/* When a stat card has an ACF link, the whole card becomes a link.
   Reset default link styling so the card/number/text keep their own look. */
a.homeStats__card {
	text-decoration: none;
	color: inherit;
	cursor: pointer;
}
a.homeStats__card:hover,
a.homeStats__card:focus {
	text-decoration: none;
	color: inherit;
}
.homeStats::before {
	content: '';
	position: absolute;
	width: 48px;
	height: 49px;
	background-image: url(images/leaf.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	z-index: 3;
	pointer-events: none;
	top: 0%;
    left: 50%;
    transform: translate(-50%, 90%);
}
/* Mobile-first: reduced margin */
.homeStats__header {
	text-align: center;
	max-width: 90%;
	margin: 60px auto 40px;
}
.homeStats__title {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-style: italic;
	font-size: 40px;
	color: var(--og-red);
	margin: 0 0 24px;
}
.homeStats__intro {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-size: 18px;
	line-height: 26px;
	color: var(--og-red);
	margin: 0;
}

@media (min-width: 992px) { 
.homeStats__title {
	font-size: 98px;
}
.homeStats__intro {
	font-size: 40px;
	line-height: 48px;
}
.homeStats::before {
	width: 93px;
	height: 96px;
	top: 10%;
    left: 50%;
    transform: translate(-50%, 0%);
}
}

/* Mobile-first: single column, 3-col at 768px+ */
.homeStats__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 10px;
}
/* Mobile-first: landscape ratio, portrait at 768px+ */
.homeStats__card {
	position: relative;
	overflow: hidden;
	background-color: #333;
	background-size: cover;
	background-position: center;
	aspect-ratio: 3 / 4;
	border-radius: 10px;
}
/* Mobile-first: compact padding, 40px 32px at 992px+ */
.homeStats__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 24px 20px;
	background: var(--og-red-faint);
	opacity: 0;
	transition: opacity 0.8s ease;
	text-align: center;
}
.homeStats__card:hover .homeStats__overlay,
.homeStats__card:focus-within .homeStats__overlay,
.homeStats__card.is-hovered .homeStats__overlay {
	opacity: 1;
}
.homeStats__number {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-size: 30px;
	color: #fff;
	line-height: 1;
	margin: 0 0 5px;
}
.homeStats__text {
	font-family: quincy-cf, serif;
	font-weight: 200;
	font-size: 14px;
	line-height: 1.5;
	letter-spacing: 0;
	color: rgba(255, 255, 255, 0.9);
	margin: 0;
}
@media (min-width: 768px) {
	.homeStats__grid { grid-template-columns: repeat(3, 1fr); }
	.homeStats__card { aspect-ratio: 3 / 4; }
}
@media (min-width: 992px) {
	.homeStats { padding: 80px 0; }
	.homeStats__header { margin: 180px auto 60px; }
	.homeStats__overlay { padding: 40px 32px; }
	.homeStats__grid {gap: 24px}
	.homeStats__number {
	font-size: 120px;
	margin: 0 0 16px;
}
.homeStats__text {
	font-size: 32px;
}
}
/*------------------------------------*\
    HOME SCHOOLS CAROUSEL
    Template: template-parts/dynamic-content/home/dynamic-schools.php
\*------------------------------------*/
/* Mobile-first: compact padding, 180px at 992px+ */
.homeSchools {
	padding: 16px 0 16px;
	background: #fff;
	position:relative
}
.homeSchools::before {
	content: '';
	position: absolute;
	width: 48px;
	height: 49px;
	background-image: url(images/cluster.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	z-index: 3;
	pointer-events: none;
	top: 0%;
    left: 3%;
    transform: translate(0%, -90%);
}
@media (min-width: 992px) { 
	.homeSchools {
	padding: 60px 0 40px;
}
	.homeSchools::before {
	width: 93px;
	height: 96px;
	top: 0%;
    left: 50%;
    transform: translate(-50%, 0%);
}
}
/* Mobile: leaves scatter right-anchored, rising up beside the CTA link and
   flowing down to the photo's top edge, per the Figma design (Feedbucket
   #950024). The CTA (a.button, position:relative) paints above the risen
   strip, so nothing is obscured. */
.homeSchools__content::after {
    content: '';
    display: block;
    /* span the full slide width (cancel the content's 20px pad) so the
       strip runs edge-to-edge above the photo like the design */
    width: calc(100% + 20px);
    margin-left: -20px;
    height: 100px;
    background-image: url(images/leaves-mobile.svg);
    background-size: 100% 100%;
    background-repeat: no-repeat;
    background-position: center bottom;
    margin-top: -30px;
    pointer-events: none;
}
@media (min-width: 768px) {
    .homeSchools__content::after { display: none; }
}
/* Section-level leaves: hidden on mobile, shown at 768px+ */
.homeSchools::after {
  content: '';
  position: absolute;
  bottom: -110px;
  right: 0;
  width: 500px;
  height: 500px;
  background-image: url(images/leaves.svg);
  background-size: contain;
  background-repeat: no-repeat;
  background-position: bottom right;
  pointer-events: none;
  display: none;
}
@media (min-width: 768px) {
    .homeSchools::after { display: block; }
}
.homeSchools__carousel {
	position: relative;
	margin-bottom: 40px;
	padding-bottom: 30px;
	overflow: visible !important; /* OWL sets overflow:hidden which clips dots */
}
@media (min-width: 768px) {
	.homeSchools__carousel { margin-bottom: 120px; padding-bottom: 50px; }
}
.homeSchools__carousel .owl-dots {
	position: relative;
	z-index: 10;
	pointer-events: auto !important;
}
/* Mobile-first: stacked column layout */
.homeSchools__slide {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	padding-bottom: 0;
}
@media (min-width: 768px) {
	.homeSchools__slide { gap: 32px; padding-bottom: 40px; }
}
/* Mobile-first: full width; 50% at 992px+ */
.homeSchools__image {
	flex-shrink: 0;
	width: 100%;
	overflow: hidden;
	background: #fff;
	border-radius: 10px;
	height: auto;
	aspect-ratio: 1 / 1;
}

.homeSchools__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Mobile-first: text first on mobile (order: -1), resets at 768px+ */
.homeSchools__content {
	flex: 1;
	min-width: 0;
	padding-left: 20px;
	order: -1;
}
@media (min-width: 768px) {
	.homeSchools__content { order: 0; padding-left: 40px; }
}
@media (min-width: 992px) {
	.homeSchools__content { padding-left: 60px; }
}
.homeSchools__sub {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-style: normal;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--og-red);
	margin: 0px;
}
.homeSchools__title {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-style: italic;
	font-size: 36px;
	line-height: 1.1;
	color: var(--og-red);
	margin: 0 0 16px;
}
.homeSchools__text {
	font-family: quincy-cf, serif;
	font-weight: 200;
	font-size: 16px;
	line-height: 26px;
	color: var(--og-red);
	margin: 0;
	max-width: 560px;
}
@media (min-width: 768px) {
	.homeSchools__text { margin-bottom: 36px; }
}
.homeSchools__text p {
	margin: 0;
}
.homeSchools__carousel .owl-dots,
.inner-carousel .owl-dots,
.carouselSwitch .owl-dots,
.homeNews__grid .owl-dots,
.dynamic-staff .staff.owl-carousel .owl-dots {
	display: flex;
	align-items: center;
	gap: 16px;
	margin-top: -20px;
}
.video-carousel .owl-dots {
	justify-content: flex-end;
}
@media (min-width: 768px) {
	.homeSchools__slide { flex-direction: row; }
	.homeSchools__image { width: 360px; height: 300px; }
}
@media (min-width: 992px) {
	.homeSchools { padding: 180px 0 0; }
	.homeSchools__slide { gap: 100px; padding-bottom: 60px; }
	.homeSchools__image { width: 50%; height: 450px; }
	.homeSchools__sub { font-size: 24px; }
	.homeSchools__title { font-size: 92px; line-height: 1.05; margin-bottom: 28px; }
	.homeSchools__text { font-size: 25px; line-height: 1.5; }
}
/*------------------------------------*\
    END DYNAMIC CONTENT
\*------------------------------------*/
/*------------------------------------*\
    Sidebar
\*------------------------------------*/
.sidebar {
	margin-top:0px;
}
#menu-side li{
	position:relative;
	margin:5px 0;
}
#menu-side a {
	display:inline-block;
	text-decoration:none;
	padding:0.5rem 1rem;
}
#menu-side a:hover {
	text-decoration:none;
}
#menu-side > li > .sub-menu{
	margin:10px 0;
}
#menu-side .sub-menu li.current-menu-ancestor a,
#menu-side .sub-menu li.current-menu-item a{
}
#menu-side .sub-menu li.current-menu-item > a{
}
#menu-side .sub-menu li.menu-item-has-children > .arrow {
	display:block;
	width:45px;
	height:45px;
	position:absolute;
	top:0;
	right:0;
}
#menu-side .sub-menu li.menu-item-has-children > .arrow:before {
	position:absolute;
	content: '\f054';
	display: block;
	width: 11px;
	height: 27px;
	position: absolute;
	left: 12px;
	top: 10px;
	font-weight: 700;
	font-family: "Font Awesome 6 Free";
	transform: rotate(0deg);
	transition: 300ms;
}
#menu-side .sub-menu li.menu-item-has-children.open > .arrow:before {
	transform:rotate(90deg);
}
#menu-side .sub-menu li a:hover{
	color:#676767;
}
#menu-side .sub-menu .sub-menu {
	background:rgba(0,0,0,0.1);
	padding-bottom:10px;
	display:none;
}
#menu-side .sub-menu .sub-menu li{
	margin:0;
}
#menu-side .sub-menu li.open > .sub-menu {
	display:block;
}
/* Sidebar hidden on mobile, shown at 992px+ */
.side-menu-container {
	display: none;
}
@media (min-width: 992px) {
	.side-menu-container { display: block; }
}
#blognav ul {
	list-style:none;
}
.sidebarSec {
    padding:0px 15px 15px;
	margin:0 auto 10px;
}
@media (min-width:1200px){
}
/* =============================================
   HOME NEWS & EVENTS
   ============================================= */
.homeNews {
	padding: 80px 0;
	background: #fff;
}
.homeNews__sub {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-style: normal;
	font-size: 12px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: var(--og-red);
	text-align: center;
	margin: 0;
}
.homeNews__title {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-style: italic;
	font-size: 36px;
	line-height: 1.1;
	color: var(--og-red);
	text-align: center;
	margin: 0 0 30px;
}
/* Mobile + tablet: Owl Carousel; 3-col grid at 992px+ */
.homeNews__grid {
	/* fallback before Owl initialises */
	display: flex;
	flex-direction: row;
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	gap: 20px;
	padding-bottom: 16px;
}
.homeNews__grid::-webkit-scrollbar {
	display: none;
}
/* Once Owl takes over, reset the flex scroll container */
.homeNews__grid.owl-loaded {
	display: block;
	overflow-x: unset;
	scroll-snap-type: unset;
	padding-bottom: 0;
}
.homeNews__card {
	flex: 0 0 85%;
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
}
.homeNews__grid.owl-loaded .homeNews__card {
	flex: unset;
	scroll-snap-align: unset;
}
/* Owl item padding for gap between cards */
.homeNews__grid.owl-carousel .owl-item { padding: 0 10px; }
@media (min-width: 992px) {
	.homeNews__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 40px;
		overflow-x: unset;
		scroll-snap-type: unset;
		padding-bottom: 0;
	}
	.homeNews__grid.owl-loaded { display: grid; }
	.homeNews__card { flex: unset; scroll-snap-align: unset; }
	.homeNews__grid.owl-carousel .owl-item { padding: 0; }
}
.homeNews__image {
	display: block;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	margin-bottom: 24px;
	border-radius: 10px;
}
.homeNews__image img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 0.4s ease;
}
.homeNews__card:hover .homeNews__image img {
	transform: scale(1.04);
}
.homeNews__body {
	display: flex;
	flex-direction: column;
	flex: 1;
}
.homeNews__card-title {
	font-family: quincy-cf, serif;
	font-weight: 700;
	font-size: 24px;
	line-height: 1.3;
	margin: 0 0 12px;
}
.homeNews__card-title a {
	color: var(--og-red);
	text-decoration: none;
}
.homeNews__card-title a:hover {
	color: var(--og-red);
}
.homeNews__excerpt {
	font-family: quincy-cf, serif;
	font-weight: 200;
	font-size: 16px;
	line-height: 1.6;
	color: var(--og-red);
	margin: 0 0 20px;
	flex: 1;
}
.homeNews__cta {
	margin-top: auto;
	align-self: flex-start;
}
@media (min-width: 992px) {
	.homeNews__grid { grid-template-columns: repeat(3, 1fr); }
	.homeNews__sub { font-size: 24px; }
	.homeNews__title { font-size: 92px; line-height: 1.05; margin-bottom: 50px; }
	.homeNews__card-title { font-size: 36px; }
	.homeNews__excerpt { font-size: 24px; }
}

/*Animation*/
.hideme {
	opacity:0;
	top:30px;
	position:relative;
	transition:500ms;
}
.hideme.active {
	opacity:1;
	top:0;
}

/*============================================================
   INNER PAGE — Oakhyrst Grange
   All inner page block styling to match Figma design
==============================================================*/

/* ---- Banner (inner pages) ---- */
#pageBanner {
	min-height: 400px;
	max-height: 780px;
	/* Clear the fixed, opaque header on mobile/tablet so the banner top isn't
	   hidden behind it. From 992px the header is transparent and overlaps the
	   banner by design, so the offset is removed. */
	margin-top: 70px;
}
@media (min-width: 992px) {
	#pageBanner {
		margin-top: 0;
	}
}
#pageBanner:before {
	padding-top: 40%;
}
#pageBanner .bannerImage {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.page-banner .hero {
	position: absolute;
	inset: 0;
}
.page-banner .slide {
	position: absolute;
	inset: 0;
}
.page-banner .slide picture {
	display: block;
	height: 100%;
}
.page-banner .slide picture img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* ---- Body container ---- */
.body-container {
	padding-top: 40px;
	padding-bottom: 80px;
}

/* ---- Breadcrumb — mobile-first ---- */
.breadcrumbs {
	font-family: quincy-cf, serif;
	font-weight: 400;
	font-size: 12px;
	line-height: 1.8;
	color: var(--body_colour);
	padding-bottom: 12px;
	margin-top: 8px;
	margin-bottom: 16px;
}
@media (min-width: 992px) {
	.breadcrumbs {
		font-size: 16px;
		line-height: 40px;
		margin-top: 0;
		margin-bottom: 30px;
	}
}
.breadcrumbs a {
	color: var(--body_colour);
	text-decoration: none;
	transition: opacity 0.2s;
}
.breadcrumbs a:hover {
	opacity: 0.7;
}
.breadcrumbs .post,
.breadcrumbs .separator {
	color: #000;
}
/* Spacing around breadcrumb separators. The crumbs are class-less <span>s
   with the separator as a bare text node between them, so we space the
   spans rather than a (non-existent) .separator element. */
.breadcrumbs span:not(:first-child) { margin-left: 6px; }
.breadcrumbs span:not(:last-child)  { margin-right: 6px; }

/* ---- Page H1 — mobile-first ---- */
.bodyContent header h1 {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-style: italic;
	font-size: 36px;
	line-height: 1.05;
	color: var(--og-red);
	margin: 0 0 24px;
	margin-left: 20px;
}
@media (min-width: 768px) {
	.bodyContent header h1 { font-size: 60px; }
}
@media (min-width: 992px) {
	.bodyContent header h1 { font-size: 92px; margin-left: 0; }
}
.bodyContent header h1 em {
	font-style: italic;
}
/* Sub-title before main heading (if output as a span) — mobile-first */
.bodyContent header h1 span {
	display: block;
	font-style: normal;
	font-weight: 100;
	font-size: 12px;
	letter-spacing: 1.2px;
	line-height: 1.3;
	text-transform: uppercase;
	margin-bottom: 8px;
	color: var(--og-red);
}
@media (min-width: 768px) {
	.bodyContent header h1 span { font-size: 24px; }
}

/* ---- Tables ---- */
.body-text table {
	width: 100%;
	border-collapse: collapse;
	margin: 28px 0;
	font-family: quincy-cf, serif;
}
/* Mobile: column-first layout — original table hidden, .table-mobile shown */
@media (max-width: 767px) {
	.body-text table { display: none; }
	.table-mobile { display: block; margin: 28px 0; }
}
@media (min-width: 768px) {
	.table-mobile { display: none; }
}
.table-mobile__col {
	margin-bottom: 20px;
	border: 1px solid var(--og-red);
	border-radius: 6px;
	overflow: hidden;
}
.table-mobile__header {
	background: var(--og-red);
	color: #fff;
	font-family: quincy-cf, serif;
	font-weight: 400;
	font-style: italic;
	font-size: 20px;
	padding: 12px 16px;
	line-height: 1.2;
}
.table-mobile__cell {
	font-family: quincy-cf, serif;
	font-weight: 300;
	font-size: 15px;
	color: #13264d;
	padding: 10px 16px;
	border-bottom: 1px solid rgba(235,34,39,0.15);
	line-height: 1.4;
}
.table-mobile__cell:last-child { border-bottom: none; }
.table-mobile__cell:nth-child(even) {
	background: rgba(235, 34, 39, 0.05);
}
/* Row-first card internals: one __line per source cell */
.table-mobile__line {
	line-height: 1.4;
}
.table-mobile__line + .table-mobile__line {
	margin-top: 2px;
}
.table-mobile__lead {
	font-weight: 500;
	color: var(--og-red);
}
.table-mobile__label {
	font-weight: 500;
	color: var(--og-red);
}
.table-mobile__label::after {
	content: ':';
}
/* Full-width single-cell rows act as subgroup dividers */
.table-mobile__subheader {
	background: rgba(235, 34, 39, 0.12);
	color: var(--og-red);
	font-family: quincy-cf, serif;
	font-weight: 500;
	font-style: italic;
	font-size: 17px;
	padding: 10px 16px;
	line-height: 1.2;
}

/* Header cells — targets <th> with or without <thead> */
.body-text table th {
	background: #eb2227;
	color: #fff;
	padding: 17px 24px;
	text-align: left;
	font-family: quincy-cf, serif;
	font-weight: 400;
	font-style: italic;
	font-size: 32px;
	line-height: 1;
	border: 1px solid #eb2227;
	vertical-align: middle;
}

/* Body rows — skip th rows from alternating */
.body-text table tr:not(:has(th)):nth-child(even) {
	background: #fff;
}

.body-text table tr:not(:has(th)):nth-child(odd) {
	background: rgba(235, 34, 39, 0.1);
}

.body-text table tr:not(:has(th)):hover {
	background: rgba(235, 34, 39, 0.18);
	transition: background 0.2s;
}

.body-text table td {
	padding: 17px 24px;
	border: 1px solid #eb2227;
	vertical-align: middle;
	font-family: quincy-cf, serif;
	font-weight: 300;
	font-size: 20px;
	line-height: 34px;
	color: #13264d;
}

.body-text table td p {
	font-weight: 300 !important;
	font-size: 20px !important;
	line-height: 34px !important;
	color: #13264d !important;
}

/* ---- Body text in content area — mobile-first ---- */
.body-text p,
.bodyContent .body-text p {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-size: 16px;
	line-height: 1.6;
	color: #000;
	margin-bottom: 20px;
	margin-left: 24px;
	margin-right: 24px;
}
@media (min-width: 992px) {
	.body-text p,
	.bodyContent .body-text p {
		font-size: 25px;
		margin-left: 0;
	}
}

/* Inline links — red with animated underline from left on hover */
/* :not([class]) targets only plain <a> with no class; button links always have a class */
.body-text p a:not([class]) {
	color: var(--og-red);
	text-decoration: none;
	position: relative;
}

.body-text p a:not([class])::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	width: 0;
	height: 1px;
	background: var(--og-red);
	transition: width 0.3s ease;
}

.body-text p a:not([class]):hover::after {
	width: 100%;
}
/* Lists sit 10px in from the body text edge; sub-lists indent a further
   30px (Feedbucket #950092) */
.body-text ul {
	list-style: none;
	padding-left: 0;
	margin: 0 0 50px 10px;
}
.body-text ul ul {
	margin: 20px 0 0 10px;
}
/* Text+image block: list uses the same after-space as a paragraph (20px) */
.dynamic-text_image .body-text ul {
	margin-bottom: 20px;
}
.body-text li,
.bodyContent .body-text li {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-size: 16px;
	line-height: 1.6;
	color: #000;
	list-style: none;
	padding-left: 34px;
	position: relative;
	margin-bottom: 8px;
}
@media (min-width: 992px) {
	.body-text li,
	.bodyContent .body-text li {
		font-size: 25px;
	}
}
.body-text ul li::before {
	content: '';
	position: absolute;
	left: 0;
	top: 2px;
	width: 20px;
	height: 40px;
	background-image: url(images/bullet.svg);
	background-size: contain;
	background-repeat: no-repeat;
}
/* Nested bullets carry a smaller diamond - with no marker they read as
   floating indented lines (Feedbucket #949984). Box keeps the svg's 1:2
   ratio so it fills like the top-level marker; top offset centres its ink
   on the first text line the same way (Feedbucket #950092). */
.body-text ul li ul li::before {
	width: 12px;
	height: 24px;
	top: 10px;
	left: 10px;
}
/* Mobile line boxes are ~26px vs desktop's 40px, so the markers tuned for
   desktop sat visibly low - lift them at <992px only. (The sub-list indent
   is now 10px at all widths, so no separate mobile indent.) */
@media (max-width: 991.98px) {
	.body-text ul li::before {
		top: -8px;
	}
	.body-text ul li ul li::before {
		top: 4px;
	}
}
/* Sub-bullet text 15px closer to its marker (44px original - 15) */
.body-text ul li ul li {
	padding-left: 29px;
}

/* ---- Headings inside body-text / dynamic content — mobile-first ---- */
/* Weight 200 below 992px: the 100 weight at 36px renders hairline strokes
   (dashes nearly invisible, Feedbucket #950074); desktop keeps 100. */
.bodyContent h2,
.body-text h2 {
	font-family: quincy-cf, serif;
	font-weight: 200;
	font-style: italic;
	font-size: 36px;
	line-height: 1.05;
	color: var(--og-red);
	margin: 80px 0 30px;
	position: relative;
}
@media (min-width: 992px) {
	.bodyContent h2,
	.body-text h2 {
		font-weight: 100;
	}
}
/* Heading indent is coupled to the acorn: only headings that carry the acorn
   decorator (::before) get their text indented so it clears the acorn. This is
   the same selector set that applies the acorn (see "Shared acorn decoration").
   Headings without an acorn — schools, POI, FAQ, documents — stay flush left. */
.body-text h2,
.dynamic-staff .sectionTitle,
.dynamic-poi .sectionTitle {
	padding-left: 24px;
}
@media (min-width: 992px) {
	.body-text h2,
	.dynamic-staff .sectionTitle,
	.dynamic-poi .sectionTitle {
		padding-left: 40px;
	}
}
/* Where the acorn is suppressed, drop the indent too (intro copy + text+image),
   but keep the heading aligned with the 24px-indented mobile paragraphs —
   flush-left h2s sat left of their own copy at <992px (Feedbucket #950052). */
.bodyContent > .body-text h2,
.dynamic-text_image .body-text h2 {
	padding-left: 0;
	margin-left: 24px;
	margin-right: 24px;
}
@media (min-width: 992px) {
	.bodyContent > .body-text h2,
	.dynamic-text_image .body-text h2 {
		margin-left: 0;
		margin-right: 0;
	}
}
/* Plain text block: shift the whole heading left by its own indent so the text
   sits flush with the block edge and the acorn drops into the left margin
   (pseudo + text both move left together). */
.dynamic-text .body-text h2 {
	margin-left: 0;
}
@media (min-width: 992px) {
	.dynamic-text .body-text h2 {
		margin-left: -40px;
	}
}
@media (min-width: 992px) {
	.bodyContent h2,
	.body-text h2 {
		font-size: 54px;
		margin-top: 130px;
		margin-left: 0;
	}
}
/* H2 headings: above-left — sit at h2 left edge, clear above */
.body-text h2::before,
.dynamic-staff .sectionTitle::before {
	top: 0;
	left: 0;
	transform: translate(0, -120%);
}
.bodyContent h3,
.body-text h3 {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-style: italic;
	font-size: 28px;
	line-height: 1.1;
	color: var(--og-red);
	margin: 24px 0 24px;
	margin-left: 20px;
}
@media (min-width: 992px) {
	.bodyContent h3,
	.body-text h3 {
		font-size: 44px;
		margin-left: 0;
	}
}

/* ---- Arrow / CTA button (used inside the_content) — plain a.button style ---- */
.body-text a.button,
.bodyContent a.button {
	color: var(--og-red);
	text-decoration: none;
	font-family: quincy-cf, serif;
	font-weight: 200;
	border: none;
	background: none;
	margin-top: 50px;
}

/* ---- Section title (dynamic content h2 labels) — mobile-first ---- */
.dynamicContent .sectionTitle,
.dynamicContent > h2 {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-style: italic;
	font-size: 36px;
	line-height: 1.05;
	color: var(--og-red);
	margin: 0 0 20px;
}
@media (min-width: 992px) {
	.dynamicContent .sectionTitle,
	.dynamicContent > h2 {
		font-size: 70px;
	}
}

/* Acorn decorator on staff section heading */
.dynamic-staff .sectionTitle {
	position: relative;
}

.dynamicContent .sectionTitle,
.dynamicContent > h3 {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-style: italic;
	font-size: 28px;
	line-height: 1.05;
	color: var(--og-red);
	margin: 0 0 40px;
}
@media (min-width: 992px) {
	.dynamicContent .sectionTitle,
	.dynamicContent > h3 {
		font-size: 54px;
	}
}

/* Sub-label above section title — mobile-first */
.dynamicContent .sectionSubTitle,
.dynamicContent .sub-title {
	display: block;
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-size: 16px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--og-red);
	margin-bottom: 4px;
}
@media (min-width: 992px) {
	.dynamicContent .sectionSubTitle,
	.dynamicContent .sub-title {
		font-size: 24px;
	}
}

/* ---- Dynamic section spacing — mobile-first ---- */
.dynamic-carousel  { margin-top: 48px; }
.dynamic-text      { margin-top: 48px; padding-bottom: 48px; }
/* Consecutive text+image blocks keep the original inter-block spacing (generic
   .dynamicContent margin: 40px mobile / 180px desktop) — this room is needed for
   the leaves decorator that overhangs the block's bottom-right corner. */
.dynamic-text_image + .dynamic-text_image { margin-top: 0; }
.dynamic-faq       { margin-top: 40px; }
.dynamic-quote     { margin-top: 0; padding: 0; }
.dynamic-documents { margin-top: 24px; }
.dynamic-curriculum { margin-top: 24px; }
.dynamic-staff     { margin-top: 48px; }
@media (min-width: 992px) {
	.dynamic-carousel  { margin-top: 120px; }
	.dynamic-text      { margin-top: 150px; padding-bottom: 0; }
	.dynamic-faq       { margin-top: 60px; }
	.dynamic-documents { margin-top: 40px; }
	.dynamic-curriculum { margin-top: 40px; }
	.dynamic-staff     { margin-top: 0; }
}

/* Extra top spacing for the curriculum block on inner pages.
   Needs body:not(.home) .dynamicContent.dynamic-curriculum (0-3-0) to
   out-specify body:not(.home) .dynamicContent (0-2-0), which otherwise
   forces 180px and kills the .dynamic-curriculum rule above. */
body:not(.home) .dynamicContent.dynamic-curriculum { margin-top: 60px; }
@media (min-width: 992px) {
	body:not(.home) .dynamicContent.dynamic-curriculum { margin-top: 220px; }
}

/* Tighter spacing for stacked download blocks on inner pages.
   The theme intends .dynamic-documents at 40px desktop (see rule above), but
   body:not(.home) .dynamicContent (0-2-0) forces 180px and clobbers it. Bump
   specificity to body:not(.home) .dynamicContent.dynamic-documents (0-3-0) so
   the intended 40px wins wherever download blocks are stacked down a page.
   Desktop only — mobile spacing is already tight. */
@media (min-width: 992px) {
	body:not(.home) .dynamicContent.dynamic-documents { margin-top: 40px; }
}

/* Text+image blocks keep the original 180px inter-block spacing on inner pages.
   The leaves decorator overhangs ~60px below each block, so it needs that room —
   the site-wide 40px reduction would crowd it. Specificity (0-3-1) beats the
   generic body:not(.home) .dynamicContent (0-2-1). Desktop only. */
@media (min-width: 992px) {
	body:not(.home) .dynamicContent.dynamic-text_image { margin-top: 180px; }
}

/* ---- Gallery carousel ---- */
/* Image carousels: square images, no bottom shape (video/external-link
   carousels keep their own bottom shape via their own selectors). */
.dynamic-carousel .inner-carousel .item img {
	width: 100%;
	aspect-ratio: 1/1;
	object-fit: cover;
	display: block;
	border-radius: 14px;
}
@media (min-width: 992px) {
	.dynamic-carousel .inner-carousel .owl-nav {
		display: none !important;
	}
}

/* ---- External-link / logo carousel ---- */
/* Logos vary in aspect ratio, so give each slide a uniform height, cap the
   logo height and centre it both ways — consistent size, vertically centred. */
.dynamic-external_link_carousel .inner-carousel .item {
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 160px;
}
.dynamic-external_link_carousel .inner-carousel .item a.image {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
}
.dynamic-external_link_carousel .inner-carousel .item img {
	width: auto;
	height: auto;
	max-width: 100%;
	max-height: 110px;
	object-fit: contain;
}

/* ---- Text + Image blocks ---- */
.dynamic-text_image {
	padding: 0;
	position: relative;
	z-index: 1; /* allows ::after overflow to paint above sibling sections */
	/* no overflow:hidden — cluster decorator must be able to float above the block */
}
/* Leaves — decorative, extends below section boundary so it sits between sections */
.dynamic-text_image::after {
    content: '';
    position: absolute;
    bottom: -60px;
    right: -100px;
    width: 420px;
    height: 420px;
    background-image: url(images/leaves.svg);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: bottom right;
    pointer-events: none;
    z-index: 2;
}

/* Leaves hidden on mobile; shown on desktop (except right-image blocks).
   NB: previously also excluded :first-of-type, but that matches the first
   <div> sibling (not the first text+image block), so it fired inconsistently
   depending on DOM position. Removed so left-image blocks always get leaves. */
.dynamic-text_image::after {
    display: none;
}
@media (min-width: 992px) {
    .dynamic-text_image::after {
        display: block;
    }
    .dynamic-text_image:has(.col-image.order-lg-2)::after {
        display: none;
    }
    /* The 60px downward bleed always lands on a following section (the
       inter-block gap is only 40px) - keep the leaves inside the section
       whenever any block follows (Feedbucket #949938 callout, #949951 faq) */
    .dynamic-text_image:has(+ .dynamicContent)::after {
        bottom: 20px;
    }
}
/* Cluster decorator — centred horizontally, floats above the block top edge */
.dynamic-text_image::before {
	content: '';
	position: absolute;
	width: 48px;
	height: 49px;
	background-image: url("images/cluster.svg");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	z-index: 3;
	pointer-events: none;
	top: 0;
	left: 50%;
	transform: translate(-50%, -60px);
}
@media (min-width: 992px) {
	.dynamic-text_image::before {
		width: 93px;
		height: 96px;
		transform: translate(-50%, -120px);
	}
}
/* Only the first image-text block gets the cluster */
.dynamic-text_image ~ .dynamic-text_image::before {
	display: none;
}
/* The cluster floats 60px (mobile) / 120px (desktop) above the block, but the
   inter-block gap is 40px - when the cluster-carrying (first) text_image sits
   directly under another dynamic block, give it room (Feedbucket #950067). */
.dynamicContent + .dynamic-text_image:not(.dynamic-text_image ~ .dynamic-text_image) {
	margin-top: 100px;
}
@media (min-width: 992px) {
	.dynamicContent + .dynamic-text_image:not(.dynamic-text_image ~ .dynamic-text_image) {
		margin-top: 160px;
	}
}
/* Same clearance after the page intro on mobile - the crest floated to
   within a few px of the intro copy (Feedbucket #950069). Desktop intros
   already end well clear of the -120px float. */
@media (max-width: 991px) {
	.bodyContent > .body-text + .dynamic-text_image {
		margin-top: 100px;
	}
}
/* First image-text block: leave room below the floating cluster before content */
.dynamic-text_image { padding-top: 30px; }
.dynamic-text_image ~ .dynamic-text_image { padding-top: 0; }
@media (min-width: 992px) {
	.dynamic-text_image { padding-top: 60px; }
	.dynamic-text_image ~ .dynamic-text_image { padding-top: 0; }
}

.dynamic-text_image .row {
	align-items: stretch;
	--bs-gutter-x: 0;
	min-height: 360px;
}
/* Image column — fills full row height, ~11px rounded corners to match Figma */
.dynamic-text_image .col-image {
	padding: 0;
	position: relative;
	overflow: hidden;
	border-radius: 11px;
}
.dynamic-text_image .col-image img {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	border-radius: 10px;
}
/* Text column — mobile-first: compact padding, 70px 80px at 992px+ */
.dynamic-text_image .col-lg-6:not(.col-image) {
	padding: 50px 30px 30px 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
}
/* Image col — mobile: needs explicit height since img is position:absolute */
.dynamic-text_image .col-image {
	min-height: 300px;
	border-radius: 11px 11px 0 0;
}
/* Image is a fixed 4:3 per Figma (752×564) — must NOT stretch to match the
   text column height (which crops the landscape photo into a tall portrait).
   aspect-ratio gives the absolutely-positioned <img> a 4:3 box; align-self
   stops the flex row from stretching it. */
.dynamic-text_image .col-image {
	aspect-ratio: 4 / 3;
	align-self: flex-start;
	min-height: 0;
	height: auto;
}
/* Text on the left (image-right layout) — no left padding */
.dynamic-text_image .col-lg-6.order-lg-1:not(.col-image) {
	padding-left: 0;
}
/* Tablet: reduce the text column's left gap (reset to 80px at desktop below) */
@media (min-width: 768px) {
	.dynamic-text_image .col-lg-6:not(.col-image) { padding-left: 0; }
}
@media (min-width: 992px) {
	.dynamic-text_image .col-lg-6:not(.col-image) { padding: 0 80px 40px; }
	.dynamic-text_image .col-image { min-height: 0; border-radius: 0; }
}
/* H2 override for image-text blocks — mobile-first */
.dynamic-text_image .body-text h2 {
	font-size: 22px;
	line-height: 1.04;
	margin: 4px 0 16px;
}
/* Suppress acorn decorator on h2 inside image-text blocks (not in Figma) */
.dynamic-text_image .body-text h2::before {
	display: none;
}
/* Body paragraphs — mobile-first */
.dynamic-text_image .body-text p {
	font-family: quincy-cf, serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.6;
	color: #000;
}
/* Sub-label — mobile-first */
.dynamic-text_image .body-text > p:first-child,
.dynamic-text_image .body-text > p:first-child strong,
.dynamic-text_image .body-text .sub-heading {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-size: 12px;
	text-transform: uppercase;
	letter-spacing: 1.5px;
	line-height: 1.3;
	color: var(--og-red);
	margin-bottom: 6px;
	font-style: normal;
}
/* Main heading — mobile-first */
.dynamic-text_image .body-text > p:nth-child(2) {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-style: italic;
	font-size: 22px;
	line-height: 1.2;
	margin-bottom: 12px;
}
/* Desktop: restore full sizes */
@media (min-width: 992px) {
	.dynamic-text_image .body-text h2 {
		font-size: 54px;
		margin: 4px 0 20px;
	}
	.dynamic-text_image .body-text > p:nth-child(2) {
		font-size: 54px;
		line-height: 1.05;
		margin-bottom: 16px;
	}
	.dynamic-text_image .body-text p {
		font-size: 25px;
		line-height: 40px;
	}
	.dynamic-text_image .body-text > p:first-child,
	.dynamic-text_image .body-text > p:first-child strong,
	.dynamic-text_image .body-text .sub-heading {
		font-size: 24px;
	}
}
/* When a text+image block uses a real <h2> as its heading, the paragraph
   that follows must NOT inherit the large "heading paragraph" style
   (p:nth-child(2)) — keep it as normal body text. */
.dynamic-text_image .body-text:has(h2) > p:nth-child(2) {
	font-family: quincy-cf, serif;
	font-weight: 400;
	font-style: normal;
	font-size: 16px;
	line-height: 1.6;
	margin-bottom: 16px;
}
@media (min-width: 992px) {
	.dynamic-text_image .body-text:has(h2) > p:nth-child(2) {
		font-size: 25px;
		line-height: 40px;
	}
}

/* ---- Callout blocks ---- */
/* Solid-colour callout (no background image) */
.callout:not(.hasbg).hastext {
	background: var(--og-red);
	color: #fff;
	padding: 80px 0;
	text-align: center;
}
.callout:not(.hasbg).hastext::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 70px;
	background-image: url(images/bottom-shape.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	z-index: 3;
	pointer-events: none;
}
.callout:not(.hasbg) .calloutTitle h3,
.callout:not(.hasbg) .calloutTitle .h2 {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-style: normal;
	font-size: 22px;
	line-height: 1.1;
	color: #fff;
	margin: 0 0 20px;
}
@media (min-width: 992px) {
	.callout:not(.hasbg) .calloutTitle h3,
	.callout:not(.hasbg) .calloutTitle .h2 {
		font-size: 74px;
	}
}
.callout:not(.hasbg) .calloutTitle h3 span,
.callout:not(.hasbg) .calloutTitle .h2 span {
	display: block;
	font-style: normal;
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	margin-bottom: 6px;
}
.callout:not(.hasbg) .calloutText,
.callout:not(.hasbg) .calloutText p {
	font-family: quincy-cf, serif;
	font-weight: 200;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255,255,255,0.9);
	max-width: 740px;
	margin: 0 auto 24px;
}
@media (min-width: 992px) {
	.callout:not(.hasbg) .calloutText,
	.callout:not(.hasbg) .calloutText p {
		font-size: 22px;
	}
}
/* Image-background callout */
.callout.hasbg {
	min-height: 600px;
	color: #fff;
	background-color: #222;
}
.callout.hasbg::after {
	content: '';
	position: absolute;
	/* 1px overdraw past the section edge: at fractional zoom the photo's
	   bottom row peeked out along the cut-out and read as a border line
	   (Feedbucket #950047 rework) */
	bottom: -1px;
	left: -1px;
	right: -1px;
	width: auto;
	height: 72px;
	background-image: url(images/bottom-shape.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	z-index: 3;
	pointer-events: none;
}
.callout.hasbg .calloutTitle h3,
.callout.hasbg .calloutTitle .h2 {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-style: italic;
	font-size: 22px;
	line-height: 1.1;
	color: #fff;
	margin: 0 0 20px;
}
@media (min-width: 992px) {
	.callout.hasbg .calloutTitle h3,
	.callout.hasbg .calloutTitle .h2 {
		font-size: 74px;
	}
}
.callout.hasbg .calloutTitle h3 span,
.callout.hasbg .calloutTitle .h2 span {
	display: block;
	font-style: normal;
	font-size: 22px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	margin-bottom: 6px;
}
.callout.hasbg .calloutText,
.callout.hasbg .calloutText p {
	font-family: quincy-cf, serif;
	font-weight: 200;
	font-size: 16px;
	line-height: 1.6;
	color: rgba(255,255,255,0.9);
	max-width: 740px;
	margin: 0 auto 24px;
}
@media (min-width: 992px) {
	.callout.hasbg .calloutText,
	.callout.hasbg .calloutText p {
		font-size: 22px;
	}
}

/* ---- Quote block (inner page only — white bg, red text) ---- */
body:not(.home) .dynamic-quote {
	padding: 80px 0;
}
body:not(.home) .quoteContainer {
	background: #fff;
	color: var(--og-red);
	min-height: 0;
	padding: 0;
	overflow: visible;
}
/* Remove dark overlay and white arch on inner pages */
body:not(.home) .quoteContainer::before {
	background: none;
	content: none;
}
body:not(.home) .quoteContainer::after {
	display: none;
}
/* Quotes icon: recolour to red on inner pages */
body:not(.home) .quoteContainer .quoteIcon {
	border-color: var(--og-red);
	color: var(--og-red);
	margin: 0 auto 32px;
}
/* Quote text on inner pages — mobile-first */
body:not(.home) .quoteContainer blockquote.quote-text {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-style: normal;
	font-size: 18px;
	line-height: 1.2;
	color: var(--og-red);
	text-align: center;
	padding: 80px 24px 0;
	max-width: 950px;
	margin: 0 auto;
}
/* Red quote mark centred above text on inner pages */
body:not(.home) .quoteContainer blockquote.quote-text::before {
	display: block;
	background-image: url(images/quote-red.svg);
	top: 0;
	left: 50%;
	transform: translateX(-50%);
}
/* Cite / attribution on inner pages — mobile-first */
body:not(.home) .quoteContainer .quote-cite,
body:not(.home) .quoteContainer cite.quote-cite {
	font-family: quincy-cf, serif;
	font-weight: 500;
	font-size: 16px;
	line-height: 1.3;
	color: var(--og-red);
	text-align: center;
	font-style: normal;
	padding: 20px 0 0;
	display: block;
}
@media (min-width: 768px) {
	body:not(.home) .dynamic-quote { padding: 48px 0; }
	body:not(.home) .quoteContainer blockquote.quote-text {
		font-size: 20px;
		padding: 70px 40px 0;
		max-width: 680px;
	}
	body:not(.home) .quoteContainer .quote-cite,
	body:not(.home) .quoteContainer cite.quote-cite {
		font-size: 16px;
	}
}
@media (min-width: 992px) {
	body:not(.home) .dynamic-quote { padding: 80px 0; }
	body:not(.home) .quoteContainer blockquote.quote-text {
		font-size: 40px;
		padding: 150px 0 0;
		width: 100%;
		max-width: 1100px;
	}
	body:not(.home) .quoteContainer .quote-cite,
	body:not(.home) .quoteContainer cite.quote-cite {
		font-size: 30px;
	}
}

/* ---- FAQ accordion ---- */
.dynamic-faq .sectionTitle {
	margin-bottom: 24px;
}
/* h3.faq-question: red background bar with white text */
/* Higher specificity (.faqs + h3 + .faq-question = 0,2,1) beats .bodyContent h3 (0,1,1) */
.faqs h3.faq-question {
	background: var(--og-red);
	border: none;
	border-radius: 0;
	color: #fff !important;
	font-family: quincy-cf, serif;
	font-weight: 200;
	font-style: normal;
	font-size: 24px;
	line-height: 1.4;
	padding: 14px 48px 14px 24px;
	margin: 0;
	display: flex;
	align-items: center;
	width: 100%;
	cursor: pointer;
	position: relative;
	transition: background 0.2s ease;
}
/* No left arrow image on FAQ items */
.faqs h3.faq-question::before {
	display: none;
}
.faqs h3.faq-question span {
	display: block;
	color: #fff !important;
}
/* Right arrow icon — faq-arrow.svg, rotates when open */
.faqs h3.faq-question:after {
	content: '';
	display: block;
	width: 11px;
	height: 21px;
	background-image: url(images/faq-arrow.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%) rotate(0deg);
	transition: transform 0.3s ease;
	font-family: unset;
	font-size: unset;
	line-height: unset;
}
.faqs .faq.open h3.faq-question:after {
	transform: translateY(-50%) rotate(180deg);
}
.faqs .faq.open h3.faq-question {
	background: rgba(235, 34, 39, 0.50);
	color: #fff;
	opacity: 1;
}
.faqs h3.faq-question:hover {
	background: rgba(235, 34, 39, 0.5);
	color: #fff;
	padding-left: 24px;
	opacity: 1;
}
.faqs .faq {
	border-bottom: none;
	margin-bottom: 10px;
}
.faq-answer.accordionContent {
	padding: 20px 24px 30px;
	background: rgba(235, 34, 39, 0.50);
	margin-bottom: 10px;
}
.faqs .faq-answer p {
	font-family: quincy-cf, serif;
	font-weight: 200;
	font-size: 16px;
	line-height: 1.6;
	color: #fff !important;
	margin: 0;
	padding: 0;
	margin-left: 0;
	margin-bottom: 20px;
}
.faqs .faq-answer ul li {
	color:#fff
}
@media (min-width: 992px) {
	.faqs .faq-answer p {
		font-size: 20px;
		padding: 0 50px;
	}
}

/* Outline buttons added in the FAQ text editor are plain <a> with no inner
   <span>, so the footer button's "text slides left on hover" (a span
   translateX(-15px)) can't apply. Replicate that 15px leftward shift via padding
   (keeps the box and arrows in place), so the FAQ button hovers like the footer. */
.faq-answer a.outline--btn--white,
.faq-answer a.outline--btn--red {
	transition: padding 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		background 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		color 0.45s cubic-bezier(0.22, 1, 0.36, 1),
		opacity 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Mobile base padding is 6px 14px 6px 22px → shift text 15px left */
.faq-answer a.outline--btn--white:hover,
.faq-answer a.outline--btn--red:hover {
	padding-left: 7px;
	padding-right: 29px;
}
/* Desktop base padding is 12px 28px 12px 50px → shift text 15px left */
@media (min-width: 768px) {
	.faq-answer a.outline--btn--white:hover,
	.faq-answer a.outline--btn--red:hover {
		padding-left: 35px;
		padding-right: 43px;
	}
}

/* Web Links block reuses the document-link style (see "Downloads / Documents"
   below, where a.sn_web_link.button is added to the selectors) — only the icon
   differs (chain.svg instead of download.svg). */
.web_links .sn_web_link_container {
	margin-bottom: 12px;
}
/* The web links block wraps its row in an extra Bootstrap .container that the
   documents block doesn't, indenting the links ~12px. Neutralise it so web
   links sit flush-left, aligned with the documents and other content. */
.dynamic-web_links .section_main_content > .container {
	max-width: none;
	width: 100%;
	padding-left: 0;
	padding-right: 0;
	margin-left: 0;
	margin-right: 0;
}

/* ---- Downloads / Documents ---- */
.documents .sectionTitle {
	margin-bottom: 20px;
}
.document {
	margin-bottom: 12px;
}
a.button.document-link,
a.sn_web_link.button {
	display: flex;
	align-items: center;
	gap: 12px;
	font-family: quincy-cf, serif;
	font-weight: 200;
	font-size: 20px;
	line-height: 1.4;
	color: #fff;
	background: var(--og-red);
	border: none;
	padding: 8px 48px 8px 24px;
	text-decoration: none;
	width: 100%;
	max-width: 100%;
	transition: background 0.2s;
	position: relative;
	margin-bottom: 6px;
	margin-top: 6px;
}
/* No left arrow image on document/web links */
a.button.document-link::before,
a.sn_web_link.button::before {
	display: none;
}
a.button.document-link:after,
a.sn_web_link.button::after {
	content: '';
	display: block;
	width: 12px;
	height: 15px;
	background-image: url(images/download.svg);
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	position: absolute;
	right: 16px;
	top: 50%;
	transform: translateY(-50%);
	font-family: unset;
	font-size: unset;
}
/* Web links use the chain icon instead of the download icon */
a.sn_web_link.button::after {
	width: 18px;
	height: 18px;
	background-image: url(images/chain.svg);
	filter: brightness(0) invert(1);
}
a.button.document-link:hover,
a.sn_web_link.button:hover {
	background: rgba(235, 34, 39, 0.5);
	color: #fff;
	opacity: 1;
}

/* ---- Video Block ---- */
.video-block {
	margin: 0 auto;
}
.video-block::after {
	content: '';
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	width: 100%;
	height: 70px;
	background-image: url(images/bottom-shape.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	z-index: 3;
	pointer-events: none;
}
/* Grid stacking: image and overlay share the same cell — no absolute positioning needed */
.video-block__poster {
	display: grid;
	grid-template-columns: 1fr;
	border-radius: 0;
	text-decoration: none;
	background: #111;
	overflow: hidden;
}
.video-block__img,
.video-block__overlay {
	grid-column: 1;
	grid-row: 1;
}
.video-block__img {
	display: block;
	width: 100%;
	height: auto;
	min-height: 220px;
	object-fit: cover;
	align-self: stretch;
}
/* Overlay sits on top of the image in the same grid cell */
.video-block__overlay {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: start;
	gap: 16px;
	padding: 32px 24px 48px;
	background: linear-gradient(to bottom,
		rgba(0,0,0,0.4) 0%,
		rgba(0,0,0,0.05) 45%,
		rgba(0,0,0,0.4) 100%);
}
/* Title over image */
.video-block__title {
	font-family: quincy-cf, serif;
    font-weight: 100;
    font-style: normal;
    font-size: 42px;
    color: #fff;
    text-align: center;
    margin: 0;
    text-transform: uppercase;
    letter-spacing: 0.05em;
	padding-top: 200px;
}
/* Red circle play button */
.video-block__play {
	width: 140px;
	height: 140px;
	background: url(images/play-icon.svg) center / contain no-repeat;
	flex-shrink: 0;
	transition: transform 0.25s, opacity 0.25s;
	position: absolute;
    bottom: 120px;
}
.video-block__poster:hover .video-block__play {
	transform: scale(1.1);
	opacity: 0.85;
}

/* ---- Video carousel: landscape 16:9 cards ---- */
/* Carousel items use fixed aspect-ratio and scaled-down text/play button */
.video-carousel .video-block {
	position: relative;
}
/* No wave shape on carousel cards — only on standalone full-width video block */
.video-carousel .video-block::after {
	display: none;
}
.video-carousel .video-block__poster {
	aspect-ratio: 16 / 9;
	position: relative;
}
.video-carousel .video-block__img {
	min-height: unset;
	height: 100%;
	width: 100%;
	object-fit: cover;
}
/* Overlay covers the poster exactly; title and play are positioned by % of
   the poster height so the layout holds at every breakpoint. */
.video-carousel .video-block__overlay {
	position: absolute;
	inset: 0;
	padding: 16px;
}
.video-carousel .video-block__title {
	font-size: 20px;
	position: absolute;
	top: 22%;
	left: 0;
	right: 0;
	margin: 0;
	padding-top: 0;
}
.video-carousel .video-block__play {
	position: absolute;
	top: 55%;
	left: 0;
	right: 0;
	margin: 0 auto;
	bottom: auto;
	width: 60px;
	height: 60px;
}
@media (min-width: 768px) {
	.video-carousel .video-block__title { font-size: 26px; }
	.video-carousel .video-block__play  { width: 80px; height: 80px; }
}
@media (min-width: 992px) {
	.video-carousel .video-block__title { font-size: 42px; }
	.video-carousel .video-block__play  { width: 139px; height: 139px; }
}

/* ---- Staff section ---- */
.staff .staffMember {
	padding-bottom: 40px;
	margin-bottom: 40px;
	border-bottom: 1px solid rgba(235,34,39,0.15);
}
.staff .staffMember:last-child {
	border-bottom: none;
}
.staff .staffMember img {
	width: 414px;
	height: 450px;
	object-fit: cover;
	border-radius: 10px;
	flex-shrink: 0;
}
/* Staff members: mobile-first stacked layout */
.dynamic-staff .staff .staffMember .row {
	flex-direction: column;
}
.dynamic-staff .staff .staffMember .standard-staff-image {
	width: 100%;
	max-width: 100%;
	flex: none;
	padding: 0;
}
.dynamic-staff .staff .staffMember img {
	width: 100%;
	height: 260px;
	border-radius: 10px 10px 0 0;
	object-position: center top; /* portraits: crop from the bottom, keep heads (Feedbucket #950061) */
}
.dynamic-staff .staff .staffMember .standard-staff-text {
	width: 100%;
	flex: none;
	padding: 20px 16px;
}
/* Stacked list on mobile (the one-at-a-time carousel was removed per design,
   Feedbucket #950058) - keep the divider rhythm between members. */
.dynamic-staff .staff .staffMember {
	border-bottom: 1px solid rgba(235,34,39,0.15);
	margin-bottom: 32px;
	padding-bottom: 32px;
}
.dynamic-staff .staff .staffMember h3 {
	font-size: 28px;
}
.dynamic-staff .staff .staffMember .staff-position {
	font-size: 12px;
}
.dynamic-staff .staff .staff-biog p {
	font-size: 16px;
}
/* Desktop: restore side-by-side layout */
@media (min-width: 992px) {
	.dynamic-staff .staff .staffMember .row { flex-direction: row; }
	.dynamic-staff .staff .staffMember .standard-staff-image {
		width: auto;
		max-width: none;
		flex: none;
		padding: 0 15px;
	}
	.dynamic-staff .staff .staffMember img {
		width: 414px;
		height: 450px;
		border-radius: 10px;
	}
	.dynamic-staff .staff .staffMember .standard-staff-text {
		width: auto;
		flex: 1;
		padding-left: 32px;
	}
	.dynamic-staff .staff .staffMember {
		border-bottom: 1px solid rgba(235,34,39,0.15);
		margin-bottom: 40px;
		padding-bottom: 40px;
	}
	.dynamic-staff .staff .staffMember h3 { font-size: 54px; }
	.dynamic-staff .staff .staffMember .staff-position { font-size: 24px; }
	.dynamic-staff .staff .staff-biog p { font-size: 25px; }
}
/* Position label — small uppercase red above name */
.staff .staffMember .staff-position {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-size: 24px;
	text-transform: uppercase;
	letter-spacing: 2px;
	color: var(--og-red);
	margin: 0 0 6px;
}
/* Name */
.staff .staffMember h3 {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-style: italic;
	font-size: 54px;
	color: var(--og-red);
	line-height: 1.1;
	margin: 0 0 10px;
}
.staff .staffMember .standard-staff-text {
	padding-left: 32px;
}
/* Qualifications / Email meta */
.staff .staff-meta {
	font-family: quincy-cf, serif;
	font-size: 15px;
	color: #555;
	margin-bottom: 12px;
}
.staff .staff-meta .meta-label {
	font-weight: 600;
	display: inline;
}
.staff .staff-meta .meta-value {
	font-weight: 200;
	display: inline;
	margin-left: 4px;
}
/* Bio excerpt text */
.staff .staff-biog p {
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-size: 25px;
	line-height: 1.65;
	color: #222;
	margin: 0 0 16px;
}

/* ---- POI / CTA section wrapper — full-width background ---- */
.dynamic-poi {
	position: relative;
	isolation: isolate;
	padding: 40px 0;
}
@media (min-width: 992px) {
	.dynamic-poi { padding: 80px 0; }
}

/* Extra breathing room above a POI block that follows a callout on mobile
   (the acorn + red tint bleed upward and eat into the default 40px gap).
   Desktop keeps the existing 180px inter-block spacing. */
body:not(.home) .dynamic-callout + .dynamic-poi {
	margin-top: 100px;
}
@media (min-width: 992px) {
	body:not(.home) .dynamic-callout + .dynamic-poi {
		margin-top: 180px;
	}
}

/* A text block sitting directly above a POI needs breathing room after it —
   the POI's acorn/tint bleeds upward, and needs room above it. Give every POI
   block a larger top gap on inner pages (covers POIs after intro text, a text
   block, downloads, etc.). The callout+poi rule above matches these values. */
body:not(.home) .dynamicContent.dynamic-poi {
	margin-top: 100px;
}
@media (min-width: 992px) {
	body:not(.home) .dynamicContent.dynamic-poi {
		margin-top: 180px;
	}
}

/* Pseudo-element bleeds to full viewport width regardless of container.
   Upward bleed is a FIXED 60px, not a % of section height - a proportional
   bleed on a tall POI overlapped the section above it (about-us callout,
   Feedbucket #950047). The 100px/180px POI top margins below always clear it. */
.dynamic-poi::before {
	content: '';
	position: absolute;
	top: -60px;
	left: 50%;
	width: 100vw;
	height: 90%;
    background: rgba(235, 34, 39, 0.08);
    z-index: -1;
    transform: translateX(-50%);
}

/* POI section acorn: sits at the section's left edge so it lines up with the
   h2 acorns on every other section (no leftward straddle). This also keeps it
   clear of the .wrapper (overflow:hidden) clip on mobile. */
.dynamic-poi::after {
	top: 0;
	left: 0;
	transform: translate(0, -51%);
}

/* ---- POI / CTA cards ---- */
a.poi { text-decoration: none; }

.poi {
	display: flex;
	flex-direction: column;
	background: #111; /* dark bg for image POIs; overridden to red for poi--text */
	border-radius: 14px;
	color: #fff;
	transition: transform 0.3s;
	width: 100%; /* ensures padding-top % on children resolves against column width */
	height: 100%;
	/* No overflow: hidden — button arrow needs to slide out beyond button edge */
}

.poi:hover { transform: translateY(-4px); }

/* Image POI — clip any background bleed below the image */
.poi.poi--image {
	overflow: hidden;
	background: transparent;
}

/* ---- Image POI ---- */
.poi .poiImageWrap {
	position: relative;
	overflow: hidden;
	border-radius: 14px;
	padding-top: 121%; /* Figma: 306×369px */
}

.poi .poi__img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Gradient overlay — dark navy from bottom, matching Figma */
.poi__overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	align-items: center;
	padding: 20px 24px 28px;
	background: linear-gradient(to top, rgba(11,29,38,0.88) 0%, rgba(11,29,38,0) 55%);
}

/* ---- Text-only POI (poi--text): red block ---- */
.poi.poi--text {
	background: var(--og-red);
	aspect-ratio: 414.804 / 500.204; /* Figma: 414.804 × 500.204 */
}

.poi.poi--text .poiText {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 64px 28px 32px;
	border-radius: 14px;
}

/* Title: bold, centered, not italic — matches Figma "CTA heading title here" */
.poi.poi--text .poiTitle {
	font-family: quincy-cf, serif;
	font-weight: 500;
	font-style: normal;
	font-size: 40px;
	color: #fff;
	text-transform: none;
	margin: 0 0 20px;
	padding: 0;
	text-align: center;
	display: block;
	line-height: 1.05;
}

/* Body text: centered, regular weight */
.poi.poi--text .poiEx {
	font-family: quincy-cf, serif;
	font-size: 25px;
	font-weight: 400;
	line-height: 1.6;
	color: rgba(255,255,255,0.9);
	text-align: center;
	margin-bottom: 0;
}

/* Outline button inside POI */
.poi__btn {
	display: inline-flex;
	align-items: center;
	padding: 12px 28px 12px 38px;
	border-radius: 12px;
	border: 1px solid #fff;
	font-family: quincy-cf, serif;
	font-weight: 300;
	font-size: 20px;
	color: #fff;
	white-space: nowrap;
	position: relative;
	overflow: hidden;
	transition: opacity 0.4s;
	cursor: pointer;
}

/* Center button in text-only POI */
.poi.poi--text .poi__btn {
	align-self: center;
	margin-top: auto; /* pin button to the bottom of the card */
}

/* Left arrow — partially visible, fades out on hover */
.poi__btn::before {
	content: '';
	position: absolute;
	left: -26px;
	top: 50%;
	width: 70px;
	height: 56px;
	background-image: url(images/bottom-shape.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	transform: translateY(-50%) rotate(90deg);
	opacity: 1;
	transition: opacity 0.4s ease;
}

/* Right arrow — slides in from right on hover */
.poi__btn::after {
	content: '';
	position: absolute;
	right: -70px;
	top: 50%;
	width: 70px;
	height: 56px;
	background-image: url(images/bottom-shape.svg);
	background-size: 100% 100%;
	background-repeat: no-repeat;
	transform: translateY(-50%) rotate(90deg);
	opacity: 0;
	transition: right 0.4s ease, opacity 0.4s ease;
}

.poi__btn > span {
	display: block;
	transition: transform 0.4s ease;
}

/* Hover — triggered from parent POI card */
.poi:hover .poi__btn {
	opacity: 0.5;
	overflow: visible;
}
.poi:hover .poi__btn > span {
	transform: translateX(-15px);
}
.poi:hover .poi__btn::before {
	opacity: 0;
}
.poi:hover .poi__btn::after {
	right: -44px;
	opacity: 1;
}

/* Equal-height POI columns */
.row.pois .col,
.row.pois [class*="col-"] {
	display: flex;
}

/* ---- Curriculum template — mobile-first ---- */
.dynamic-curriculum .body-text {
	padding: 0;
}
/* Mobile sizes as base */
.subject-tile .cover .title {
	font-size: 28px !important;
}
.subject-tile .cover .button-wrap {
	height: 36px !important;
	width: 36px !important;
}
.subject-tile .cover .button-wrap .toggle-subject:before {
	font-size: 16px !important;
}
.dynamic-curriculum .body-text p,
.dynamic-curriculum .body-text li,
.subject-block .subjContent p,
.subject-block .subjContent li,
.subject-block .subjContent h3 {
	margin-left: 0 !important;
}
/* Desktop: restore curriculum.css sizes */
@media (min-width: 992px) {
	.subject-tile .cover .title { font-size: 44px !important; }
	.subject-tile .cover .button-wrap { height: 52px !important; width: 52px !important; }
	.subject-tile .cover .button-wrap .toggle-subject:before { font-size: 25px !important; }
}

/* ---- Section label before sectionTitle ---- */
.dynamicContent small.sectionLabel,
.dynamicContent .sectionLabel {
	display: block;
	font-family: quincy-cf, serif;
	font-weight: 100;
	font-size: 20px;
	text-transform: uppercase;
	letter-spacing: 1.2px;
	color: var(--og-red);
	margin-bottom: 4px;
}

/* ---- Owl Carousel: no arrows, styled dots ---- */
.owl-nav,
.owl-prev,
.owl-next {
	display: none !important;
}

/*============================================================
   END INNER PAGE
==============================================================*/

/*------------------------------------*\
    MOBILE GLOBAL OVERRIDES
    (typography.css is read-only — overrides go here)
\*------------------------------------*/

/* ---- Outline buttons: smaller on mobile ---- */
a.outline--btn--white,
a.outline--btn--red {
	font-size: 13px;
	padding: 6px 14px 6px 22px;
	border-radius: 6px;
	margin-top: 12px;
}
a.outline--btn--white::before,
a.outline--btn--red::before {
	width: 36px;
	height: 29px;
	left: -14px;
}
a.outline--btn--white::after,
a.outline--btn--red::after {
	width: 36px;
	height: 29px;
	right: -36px;
}
a.outline--btn--white:hover::after,
a.outline--btn--red:hover::after {
	right: -22px;
}
@media (min-width: 768px) {
	a.outline--btn--white,
	a.outline--btn--red {
		font-size: 24px;
		padding: 12px 28px 12px 50px;
		border-radius: 12px;
		margin-top: 30px;
	}
	a.outline--btn--white::before,
	a.outline--btn--red::before {
		width: 70px;
		height: 56px;
		left: -26px;
	}
	a.outline--btn--white::after,
	a.outline--btn--red::after {
		width: 70px;
		height: 56px;
		right: -70px;
	}
	a.outline--btn--white:hover::after,
	a.outline--btn--red:hover::after {
		right: -44px;
	}
}

/* ---- Arrow button (a.button): smaller font + arrow on mobile only ---- */
a.button::before {
	width: 95px;
	height: 67px;
	left: -34px;
}
a.button {
	font-size: 16px;
	padding-left: 50px;
}
@media (min-width: 768px) {
	a.button::before {
		width: 140px;
		height: 112px;
		left: -52px;
	}
	a.button {
		font-size: 24px;
		padding-left: 80px;
	}
}

/* ===== Inner page typography: now mobile-first — all sizes set at base or min-width: 992px ===== */

/* ---- Staff single page: back button ---- */
.staff-back-btn {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	font-family: quincy-cf, serif;
	font-weight: 200;
	font-size: 18px;
	color: var(--og-red);
	text-decoration: none;
	margin-bottom: 32px;
	transition: opacity 0.2s;
}
.staff-back-btn:hover {
	opacity: 0.7;
	color: var(--og-red);
}
.staff-back-btn__arrow {
	display: inline-block;
	width: 32px;
	height: 32px;
	border: 1px solid var(--og-red);
	border-radius: 50%;
	position: relative;
	flex-shrink: 0;
}
.staff-back-btn__arrow::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-30%, -50%) rotate(-45deg);
	width: 9px;
	height: 9px;
	border-top: 1px solid var(--og-red);
	border-left: 1px solid var(--og-red);
}

/* ---- Hide search widget in news archive sidebar ---- */
#blognav .widget_search,
#blognav .wp-block-search,
#blognav .wp-block-search__button-outside,
.sidebar .widget_search,
.sidebar .wp-block-search {
	display: none;
}

/* ===== Header search: click-to-open (matches Weston Green pattern) ===== */
.searchToggle {
	display: inline-block;
	vertical-align: middle;
	position: relative;
	width: 26px;
	height: auto;
	min-height: 26px;
	/* mobile-first: nudge the icon clear of the head links, toward the right */
	margin-left: 24px;
}
@media (min-width: 992px) {
	.searchToggle {
		/* pull in against the .headerRight 50px flex gap on either side */
		margin-left: -25px;
		margin-right: -25px;
	}
}
/* Hide the header search while the mobile menu is open — not needed in the
   menu, and it clashed with the back arrow / close button. */
@media (max-width: 991px) {
	body.menuopen .searchToggle {
		display: none;
	}
}
.searchToggle .search-form-holder {
	position: absolute;
	right: 0;
	top: 50%;
	transform: translateY(-50%);
	z-index: 11;
}
.searchToggle .searchform {
	width: 26px;
	height: 26px;
	position: absolute;
	right: 10px;
	top: -13px;
	padding: 0;
	overflow: visible;
	transition: width 400ms ease;
	z-index: -1;
}
/* input hidden until opened */
.searchToggle .searchform input.searchInput {
	display: none;
}
.searchToggle .searchform.openSearch {
	width: 240px;
	height: auto;
	z-index: 9;
}
.searchToggle .searchform.openSearch input.searchInput {
	display: block;
	position: absolute;
	right: 0;
	top: 34px;
	width: 240px;
	height: 40px;
	padding: 6px 44px 6px 14px;
	background: #fff;
	color: #000;
	border: 1px solid var(--og-red);
	border-radius: 2px;
	font-size: 14px;
	box-shadow: 0 6px 20px rgba(0,0,0,.15);
}
.searchToggle .searchform.openSearch input.searchInput:focus {
	outline: 0;
}
/* the FA magnifying glass is the toggle button */
.searchToggle .searchform .searchSubmit {
	position: absolute;
	right: 0;
	top: 0;
	width: 26px;
	height: 26px;
	background: transparent;
	border: 0;
	padding: 0;
	font-size: 18px;
	line-height: 26px;
	color: #fff;
	cursor: pointer;
	margin-top:0;
	transition: color 0.2s;
}
/* Red once the page is scrolled (desktop header turns white), matching the
   head links. Kept to 992px+ because the mobile scrolled header is red. */
@media (min-width: 992px) {
	body.scrolled .searchToggle .searchform .searchSubmit {
		color: var(--og-red);
	}
}
/* White while the menu is open (icon sits over the dark open-menu header),
   overriding the scrolled-red state above. */
body.menuopen .searchToggle .searchform .searchSubmit {
	color: #fff;
}
.searchToggle .searchform.openSearch .searchSubmit {
	top: 34px;
	right: 12px;
	height: 40px;
	line-height: 40px;
	color: var(--og-red);
}
.searchToggle .searchform .searchSubmit:hover {
	color: var(--og-red);
}

/*------------------------------------*\
    High Visibility (accessibility) mode
    Toggled by the footer "High Visibility" / "Standard View" links.
    Adds .highvis to <html>; this block restyles the site for maximum
    contrast: solid black background, white text, yellow links, no
    background photos or decorative overlays, and strong focus outlines.
\*------------------------------------*/
html.highvis,
html.highvis body {
	background: #000 !important;
	color: #fff !important;
}
/* Kill background photos / gradients / decorative pseudo layers (incl. inline styles) */
html.highvis [style*="background-image"],
html.highvis .homeBanner,
html.highvis .homeValues,
html.highvis .footerCTA__image,
html.highvis .dynamic-poi,
html.highvis .homeStats,
html.highvis .callout,
html.highvis .homeStats__card {
	background-image: none !important;
	background-color: #000 !important;
}
html.highvis .homeValues::before,
html.highvis .footerCTA__image::before,
html.highvis .footerCTA__image::after,
html.highvis .homeStats::before,
html.highvis .banner__shape,
html.highvis .footerLeaf,
html.highvis .homeValues__word.is-next,
html.highvis .homeValues__word.is-prev {
	display: none !important;
	opacity: 0 !important;
}
/* Text — force high-contrast white */
html.highvis h1, html.highvis h2, html.highvis h3, html.highvis h4,
html.highvis h5, html.highvis h6, html.highvis p, html.highvis li,
html.highvis span, html.highvis div, html.highvis label, html.highvis strong,
html.highvis em, html.highvis td, html.highvis th, html.highvis blockquote,
html.highvis figcaption, html.highvis .sectionTitle, html.highvis .h2 {
	color: #fff !important;
	text-shadow: none !important;
}
/* Links — yellow + underlined; inverse on hover/focus */
html.highvis a,
html.highvis a * {
	color: #ff0 !important;
	text-decoration: underline !important;
}
html.highvis a:hover,
html.highvis a:focus,
html.highvis a:hover *,
html.highvis a:focus * {
	color: #000 !important;
	background: #ff0 !important;
}
/* Buttons / form fields — outlined, high contrast */
html.highvis .button,
html.highvis a.button,
html.highvis .outline--btn--white,
html.highvis .outline--btn--red,
html.highvis a.sn_web_link.button,
html.highvis a.button.document-link,
html.highvis button,
html.highvis input,
html.highvis select,
html.highvis textarea {
	background: #000 !important;
	color: #ff0 !important;
	border: 2px solid #ff0 !important;
	filter: none !important;
}
html.highvis .button::before,
html.highvis .button::after,
html.highvis .outline--btn--white::before,
html.highvis .outline--btn--white::after {
	display: none !important;
}
/* Strong, always-visible focus outline for keyboard users */
html.highvis :focus {
	outline: 3px solid #ff0 !important;
	outline-offset: 2px !important;
}
/* Keep real content images visible but framed for clarity */
html.highvis .footerAwards__logo,
html.highvis .inner-carousel img {
	background: #fff !important;
	padding: 4px !important;
}

div.wpforms-container-full .wpforms-confirmation-container-full,
div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) {
    background: #eb2227 !important;
    border: 1px solid #eb2227 !important;
    color: #fff !important;
}
/* The message <p> inherits black from .body-text p - force it white too
   (Feedbucket #949931) */
div.wpforms-container-full .wpforms-confirmation-container-full p,
div[submit-success] > .wpforms-confirmation-container-full:not(.wpforms-redirection-message) p {
    color: #fff !important;
}

/* WP password-protected form: house-styled field + red submit; the submit
   rendered as the browser default blue (Feedbucket #950084) */
.post-password-form input[type="password"] {
	border: 1px solid rgba(235, 34, 39, 0.4);
	border-radius: 6px;
	padding: 10px 14px;
	font-family: quincy-cf, serif;
	font-size: 16px;
	color: #000;
	background: #fff;
}
/* Under 400px the inline label/field/button wrapped raggedly - centred
   stacked layout there only; wider screens keep the inline form. */
@media (max-width: 399.98px) {
	.post-password-form {
		max-width: 420px;
		margin: 48px auto;
		text-align: center;
	}
	.post-password-form label {
		display: block;
		width: 100%;
	}
	.post-password-form input[type="password"] {
		display: block;
		width: 100%;
		margin-top: 8px;
	}
	.post-password-form input[type="submit"] {
		margin-top: 16px;
	}
}
.post-password-form input[type="submit"] {
	-webkit-appearance: none;
	appearance: none;
	background: var(--og-red);
	color: #fff;
	border: none;
	border-radius: 6px;
	padding: 10px 22px;
	font-family: quincy-cf, serif;
	font-size: 16px;
	cursor: pointer;
	transition: background 300ms;
}
.post-password-form input[type="submit"]:hover {
	background: #c8161b;
}

/* Archive pagination (the_posts_pagination): larger type, breathing room
   before the Recent Posts sidebar that stacks below it */
.navigation.pagination {
	margin: 8px 0 48px;
}
.navigation.pagination .nav-links {
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: quincy-cf, serif;
	font-size: 20px;
}
.navigation.pagination .page-numbers.current {
	font-weight: 500;
	color: var(--og-red);
}
@media (min-width: 992px) {
	.navigation.pagination .nav-links {
		font-size: 24px;
	}
}