/* Begin late-load CSS */

 /** Begin CSS Section: defaults */

 /* Begin CSS Part: Base */

 /* Begin CSS Part: Layout */

 /* Begin CSS Part: Desktop Defaults */

 /* Begin CSS Part: Tablet Defaults */

 /* Begin CSS Part: Mobile Defaults */

 /** Begin CSS Section: core */

 /* Begin CSS Part: DISABILITY */

 /* Begin CSS Part: Fonts */
/* ==========================================
   SHREWSBURY SEVERN ROTARY
   FONTS
========================================== */

/*
	Fonts are already being loaded on the page:
	Outfit and PT Serif.

	Use:
	- Outfit for clean modern UI/body text
	- PT Serif for occasional warm editorial flourishes
*/

:root {
	--rotary-font-body: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--rotary-font-heading: "Outfit", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	--rotary-font-serif: "PT Serif", Georgia, "Times New Roman", serif;

	--rotary-line-tight: 1.08;
	--rotary-line-heading: 1.15;
	--rotary-line-body: 1.65;
}

body {
	font-family: var(--rotary-font-body);
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: var(--rotary-heading);
	font-family: var(--rotary-font-heading);
	font-weight: 850;
	line-height: var(--rotary-line-heading);
	letter-spacing: -0.035em;
}

h1 {
	margin-bottom: clamp(1rem, 2vw, 1.5rem);

	font-size: clamp(2.5rem, 6vw, 5.75rem);
	line-height: 0.95;
	letter-spacing: -0.06em;
}

h2 {
	margin-bottom: clamp(1rem, 2vw, 1.35rem);

	font-size: clamp(2rem, 4vw, 3.65rem);
}

h3 {
	margin-bottom: 0.85rem;

	font-size: clamp(1.35rem, 2.4vw, 2rem);
}

h4 {
	margin-bottom: 0.75rem;

	font-size: clamp(1.1rem, 1.5vw, 1.35rem);
}

p {
	margin-bottom: 1.05rem;

	color: var(--rotary-text);
	font-size: clamp(1rem, 1.05vw, 1.08rem);
	line-height: var(--rotary-line-body);
}

.page-content p {
	max-width: 72ch;
}

.page-content.center p {
	margin-left: auto;
	margin-right: auto;
}

.page-content h2 {
	max-width: 960px;
	margin-left: auto;
	margin-right: auto;
}

.notes p {
	color: var(--rotary-blue-dark);
	font-weight: 750;
}
 /* Begin CSS Part: Buttons */
/* ==========================================
   SHREWSBURY SEVERN ROTARY
   BUTTONS
========================================== */

.button,
a.button,
button,
input[type="submit"],
input[type="button"] {
	appearance: none;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.45rem;

	min-height: 46px;
	padding: 0.78rem 1.2rem;

	background:
		linear-gradient(135deg, var(--rotary-blue), var(--rotary-blue-dark));
	color: var(--rotary-white) !important;

	border: 0;
	border-radius: 999px;

	box-shadow: 0 10px 24px rgba(11, 74, 143, 0.20);

	font-family: var(--rotary-font-body);
	font-size: 0.94rem;
	font-weight: 800;
	line-height: 1;
	text-align: center;
	text-decoration: none !important;
	letter-spacing: 0.01em;

	cursor: pointer;

	transition:
		transform var(--rotary-transition),
		box-shadow var(--rotary-transition),
		background-color var(--rotary-transition),
		color var(--rotary-transition);
}

.button:hover,
a.button:hover,
button:hover,
input[type="submit"]:hover,
input[type="button"]:hover {
	transform: translateY(-2px);
	box-shadow: 0 16px 34px rgba(11, 74, 143, 0.28);
}

.button:focus-visible,
a.button:focus-visible,
button:focus-visible,
input[type="submit"]:focus-visible,
input[type="button"]:focus-visible {
	outline: 3px solid var(--rotary-focus);
	outline-offset: 3px;
}

/* Alternate button from existing HTML classes */
.button.webcam {
	background:
		linear-gradient(135deg, var(--rotary-burgundy), var(--rotary-burgundy-dark));
	box-shadow: 0 10px 24px rgba(139, 44, 56, 0.20);
}

.button.webcam:hover {
	box-shadow: 0 16px 34px rgba(139, 44, 56, 0.28);
}

.button.weather {
	background:
		linear-gradient(135deg, var(--rotary-gold), var(--rotary-gold-dark));
	color: var(--rotary-blue-deep) !important;

	box-shadow: 0 10px 24px rgba(216, 148, 0, 0.22);
}

.button.weather:hover {
	box-shadow: 0 16px 34px rgba(216, 148, 0, 0.30);
}

.button.large,
a.button.large {
	min-height: 54px;
	padding: 0.95rem 1.45rem;

	font-size: 1rem;
}

/* Button rows */
.action-buttons p {
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	align-items: center;
	justify-content: inherit;

	margin: 0;
}
 /* Begin CSS Part: Colours */
/* ==========================================
   SHREWSBURY SEVERN ROTARY
   COLOURS
========================================== */

:root {
	/* Core Rotary palette */
	--rotary-blue: #0b4a8f;
	--rotary-blue-dark: #073462;
	--rotary-blue-deep: #041f3d;
	--rotary-blue-soft: #eaf2fb;

	--rotary-gold: #f7b731;
	--rotary-gold-dark: #d89400;
	--rotary-gold-soft: #fff5dc;

	--rotary-burgundy: #8b2c38;
	--rotary-burgundy-dark: #641f28;
	--rotary-burgundy-soft: #f7e9ec;

	/* Neutrals */
	--rotary-white: #ffffff;
	--rotary-cream: #fbf7ef;
	--rotary-page-bg: #f6f8fb;
	--rotary-soft-bg: #eef4fa;

	--rotary-text: #263645;
	--rotary-muted: #667789;
	--rotary-heading: #092f5f;

	--rotary-border: rgba(11, 74, 143, 0.16);
	--rotary-border-strong: rgba(11, 74, 143, 0.26);

	/* Surfaces */
	--rotary-surface: #ffffff;
	--rotary-surface-soft: #f9fbfd;
	--rotary-surface-blue: #0b4a8f;
	--rotary-surface-dark: #041f3d;

	/* Shadows */
	--rotary-shadow-soft: 0 14px 34px rgba(7, 52, 98, 0.08);
	--rotary-shadow-card: 0 20px 48px rgba(7, 52, 98, 0.12);
	--rotary-shadow-strong: 0 28px 70px rgba(7, 52, 98, 0.18);

	/* Focus */
	--rotary-focus: rgba(247, 183, 49, 0.72);
}


/* ==========================================
   SHREWSBURY SEVERN ROTARY
   BRAND FILL 1
========================================== */

/*
	Reusable deep Rotary brand fill.

	Use on:
	.ww-page-section.brand-fill-1
	.section-head.brand-fill-1
	any custom section/cell that needs the dark blue/gold/burgundy treatment.

	Note:
	::before is used for the grid/gloss texture.
	Do not use ::after here, so section-specific decorative shapes can still use ::after.
*/

.brand-fill-1 {
	position: relative;
	isolation: isolate;

	background:
		radial-gradient(
			circle at 12% 18%,
			rgba(247, 183, 49, 0.28),
			transparent 28%
		),
		radial-gradient(
			circle at 88% 8%,
			rgba(255,255,255,0.18),
			transparent 34%
		),
		linear-gradient(
			135deg,
			var(--rotary-blue-deep),
			var(--rotary-blue),
			var(--rotary-burgundy)
		);

	color: var(--rotary-white);

	overflow: hidden;
}

/* Generic brand texture */
.brand-fill-1::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;

	background:
		linear-gradient(90deg, rgba(255,255,255,0.08) 1px, transparent 1px),
		linear-gradient(180deg, rgba(255,255,255,0.06) 1px, transparent 1px);

	background-size: 54px 54px;

	mask-image:
		linear-gradient(
			90deg,
			transparent,
			black 16%,
			black 84%,
			transparent
		);

	opacity: 0.35;

	pointer-events: none;
}

/* Keep content above the decorative texture */
.brand-fill-1 > * {
	position: relative;
	z-index: 2;
}

/* Text defaults when brand-fill-1 is used with normal content */
.brand-fill-1 h1,
.brand-fill-1 h2,
.brand-fill-1 h3,
.brand-fill-1 h4,
.brand-fill-1 h5,
.brand-fill-1 h6 {
	color: var(--rotary-white);
}

.brand-fill-1 p,
.brand-fill-1 li {
	color: rgba(255,255,255,0.88);
}

.brand-fill-1 a:not(.button) {
	color: var(--rotary-gold);
}

/* ==========================================
   SHREWSBURY SEVERN ROTARY
   BRAND FILLS
========================================== */

/*
	Reusable section fill.
	Add to .ww-page-section when a soft warm brand backdrop is needed:

	.ww-page-section brand-fill-2
*/

.ww-page-section.brand-fill-2 {
	background:
		radial-gradient(
			circle at 12% 18%,
			rgba(247, 183, 49, 0.18),
			transparent 30%
		),
		radial-gradient(
			circle at 88% 72%,
			rgba(139, 44, 56, 0.08),
			transparent 34%
		),
		linear-gradient(
			180deg,
			var(--rotary-page-bg) 0%,
			var(--rotary-cream) 46%,
			#fff9ec 100%
		);
}

.ww-page-section.brand-fill-2::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;

	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,0.54) 0%,
			rgba(255,255,255,0) 38%,
			rgba(247,183,49,0.10) 100%
		);

	pointer-events: none;
}


 /* Begin CSS Part: Menus */

 /* Begin CSS Part: Responsive Menu */

 /* Begin CSS Part: Editor Overrides */

 /* Begin CSS Part: Specials */
/* ==========================================
   SHREWSBURY SEVERN ROTARY
   SPLIT SECTIONS
========================================== */

/*
	Usage:

	.split-sect
		> .i
			> .image-cell
			> .text-cell.fill-1 / .text-cell.fill-2

	Notes:
	- .fill-1 and .fill-2 are kept here because the current HTML uses them.
	- Brand fills can still live globally in Colours.
	- The image cells use an editorial card treatment.
	- Images keep their natural ratio so they are not heavily cropped.
*/

.split-sect {
	position: relative;
	isolation: isolate;

	width: 100%;

	background: var(--rotary-page-bg);

	overflow: hidden;
}

/* Inner split wrapper */
.split-sect > .i {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	align-items: stretch;

	width: 100%;
	min-height: clamp(560px, 58vw, 780px);
}

/* Shared cells */
.split-sect .image-cell,
.split-sect .text-cell {
	position: relative;
	min-width: 0;
}

/* ==========================================
   IMAGE CELL
========================================== */

.split-sect .image-cell {
	display: flex;
	align-items: center;
	justify-content: center;

	padding:
		clamp(2.25rem, 5.5vw, 5.5rem)
		clamp(1.25rem, 4vw, 4rem);

	background:
		radial-gradient(
			circle at 22% 18%,
			rgba(247, 183, 49, 0.18),
			transparent 30%
		),
		radial-gradient(
			circle at 82% 80%,
			rgba(11, 74, 143, 0.10),
			transparent 34%
		),
		linear-gradient(
			135deg,
			#ffffff,
			var(--rotary-blue-soft)
		);

	overflow: hidden;
}

/* Slightly warmer image stage when image sits on the right */
.split-sect .text-cell + .image-cell {
	background:
		radial-gradient(
			circle at 82% 18%,
			rgba(247, 183, 49, 0.20),
			transparent 30%
		),
		radial-gradient(
			circle at 18% 80%,
			rgba(139, 44, 56, 0.10),
			transparent 34%
		),
		linear-gradient(
			135deg,
			#fffaf0,
			var(--rotary-blue-soft)
		);
}

/* Large soft backdrop mark */
.split-sect .image-cell::before {
	content: "";
	position: absolute;
	inset: clamp(1.25rem, 4vw, 3rem);
	z-index: 1;

	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,0.74),
			rgba(255,255,255,0.26)
		);

	border: 1px solid rgba(11, 74, 143, 0.10);
	border-radius: var(--rotary-radius-xl);

	transform: rotate(-2deg);

	pointer-events: none;
}

/* Dot-grid / light texture */
.split-sect .image-cell::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;

	background-image:
		radial-gradient(rgba(11, 74, 143, 0.16) 1px, transparent 1px);
	background-size: 22px 22px;

	mask-image:
		radial-gradient(circle at 50% 50%, black 0%, transparent 68%);

	opacity: 0.20;

	pointer-events: none;
}

/* The image component becomes the designed frame */
.split-sect .image-cell > * {
	position: relative;
	z-index: 3;

	width: min(100%, 660px);
	height: auto;

	margin: 0 !important;

	border-radius: clamp(28px, 4vw, 46px);

	box-shadow:
		0 34px 90px rgba(7, 52, 98, 0.22),
		0 16px 42px rgba(7, 52, 98, 0.12),
		0 0 0 1px rgba(255,255,255,0.72) inset;

	transform: rotate(-1.6deg);

	transition:
		transform 360ms ease,
		box-shadow 360ms ease;

	overflow: visible;
}

/* Opposite tilt for right-hand images */
.split-sect .text-cell + .image-cell > * {
	transform: rotate(1.6deg);
}

.split-sect .image-cell:hover > * {
	transform: rotate(0deg) translateY(-6px);

	box-shadow:
		0 42px 104px rgba(7, 52, 98, 0.26),
		0 20px 52px rgba(7, 52, 98, 0.15),
		0 0 0 1px rgba(255,255,255,0.82) inset;
}

/* Coloured backing plate behind image */
.split-sect .image-cell > *::before {
	content: "";
	position: absolute;
	inset: auto auto -18px -18px;
	z-index: -1;

	width: 62%;
	height: 58%;

	background:
		linear-gradient(
			135deg,
			var(--rotary-gold),
			var(--rotary-burgundy)
		);

	border-radius: 30px;

	box-shadow:
		0 18px 42px rgba(139, 44, 56, 0.18);

	transform: rotate(4deg);

	pointer-events: none;
}

/* Gloss sweep over the image */
.split-sect .image-cell > *::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;

	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,0.30) 0%,
			rgba(255,255,255,0.08) 24%,
			rgba(255,255,255,0) 46%,
			rgba(255,255,255,0.10) 100%
		);

	border-radius: inherit;

	pointer-events: none;
}

/* Image paragraph wrapper */
.split-sect .image-cell p {
	position: relative;

	display: block;

	width: 100%;
	height: auto;
	margin: 0;

	padding: 10px;

	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,0.98),
			rgba(234,242,251,0.78)
		);

	border-radius: inherit;

	overflow: hidden;
}

/* Actual image */
.split-sect .image-cell img {
	display: block;

	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;

	padding: 0 !important;

	object-fit: contain;
	object-position: center;

	border-radius: calc(var(--rotary-radius-xl) - 18px);

	transform: none;

	transition:
		transform 520ms ease,
		filter 520ms ease;
}

/* Hover image movement */
.split-sect .image-cell:hover img {
	transform: scale(1.025);
	filter:
		saturate(1.06)
		contrast(1.04);
}

/* Small decorative corner chip */
.split-sect .image-cell p::after {
	content: "";
	position: absolute;
	right: 22px;
	bottom: 22px;
	z-index: 4;

	width: 58px;
	height: 58px;

	background:
		radial-gradient(
			circle,
			var(--rotary-gold) 0%,
			var(--rotary-gold) 34%,
			rgba(247,183,49,0.24) 35%,
			rgba(247,183,49,0.24) 100%
		);

	border: 6px solid rgba(255,255,255,0.88);
	border-radius: 50%;

	box-shadow:
		0 10px 24px rgba(7, 52, 98, 0.18);

	pointer-events: none;
}

/* ==========================================
   TEXT CELL
========================================== */

.split-sect .text-cell {
	display: flex;
	align-items: center;

	padding:
		clamp(3.5rem, 7vw, 7rem)
		var(--rotary-gutter);

	color: var(--rotary-white);

	overflow: hidden;
}

.split-sect .text-cell > * {
	position: relative;
	z-index: 4;

	width: min(100%, 620px);
}

/* Pull content toward the centre join, with extra breathing room */
.split-sect .right-cell {
	justify-content: flex-start;

	padding-left: clamp(3.5rem, 7vw, 7.5rem);
	padding-right: clamp(2rem, 4vw, 4rem);
}

.split-sect .left-cell {
	justify-content: flex-end;

	padding-left: clamp(2rem, 4vw, 4rem);
	padding-right: clamp(3.5rem, 7vw, 7.5rem);
}

/* ==========================================
   TEXT CELL FILLS
========================================== */

.split-sect .fill-1 {
	background:
		radial-gradient(
			circle at 16% 18%,
			rgba(247, 183, 49, 0.23),
			transparent 32%
		),
		radial-gradient(
			circle at 90% 88%,
			rgba(255,255,255,0.10),
			transparent 36%
		),
		linear-gradient(
			135deg,
			var(--rotary-blue-deep),
			var(--rotary-blue)
		);
}

.split-sect .fill-2 {
	background:
		radial-gradient(
			circle at 86% 12%,
			rgba(247, 183, 49, 0.23),
			transparent 34%
		),
		radial-gradient(
			circle at 12% 88%,
			rgba(255,255,255,0.10),
			transparent 36%
		),
		linear-gradient(
			135deg,
			var(--rotary-burgundy-dark),
			var(--rotary-burgundy)
		);
}

/* Subtle grid texture over text panels */
.split-sect .text-cell::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;

	background:
		linear-gradient(90deg, rgba(255,255,255,0.06) 1px, transparent 1px),
		linear-gradient(180deg, rgba(255,255,255,0.045) 1px, transparent 1px);
	background-size: 48px 48px;

	mask-image:
		linear-gradient(
			90deg,
			transparent,
			black 18%,
			black 82%,
			transparent
		);

	opacity: 0.42;

	pointer-events: none;
}

/* Big soft ring */
.split-sect .text-cell::after {
	content: "";
	position: absolute;
	right: -130px;
	bottom: -130px;
	z-index: 2;

	width: 340px;
	height: 340px;

	background:
		radial-gradient(
			circle,
			rgba(255,255,255,0.13),
			rgba(255,255,255,0.05) 42%,
			transparent 68%
		);

	border-radius: 50%;

	pointer-events: none;
}

/* Opposite ring position on left text cells */
.split-sect .left-cell::after {
	right: auto;
	left: -130px;
}

/* Text component gets a soft glass panel */
.split-sect .text-cell > *::before {
	content: "";
	position: absolute;
	inset:
		clamp(-2rem, -2.6vw, -1.4rem)
		clamp(-2rem, -2.6vw, -1.4rem);
	z-index: -1;

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,0.10),
			rgba(255,255,255,0.045)
		);

	border: 1px solid rgba(255,255,255,0.12);
	border-radius: var(--rotary-radius-lg);

	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.12),
		0 18px 42px rgba(0,0,0,0.06);

	backdrop-filter: blur(8px);

	pointer-events: none;
}

/* ==========================================
   TEXT STYLING
========================================== */

.split-sect .text-cell h2 {
	margin-bottom: clamp(1rem, 2.5vw, 1.5rem);

	color: var(--rotary-white);

	font-size: clamp(2.25rem, 4.8vw, 4.6rem);
	font-weight: 950;
	line-height: 0.98;
	letter-spacing: -0.066em;

	text-wrap: balance;

	text-shadow:
		0 10px 26px rgba(0,0,0,0.20),
		0 2px 8px rgba(0,0,0,0.12);
}

.split-sect .text-cell h2::after {
	content: "";
	display: block;

	width: 82px;
	height: 6px;
	margin-top: 1rem;

	background:
		linear-gradient(
			90deg,
			var(--rotary-gold),
			rgba(247, 183, 49, 0.18)
		);

	border-radius: 999px;
	box-shadow: 0 10px 26px rgba(247, 183, 49, 0.20);
}

.split-sect .text-cell p {
	max-width: 62ch;

	color: rgba(255,255,255,0.90);

	font-size: clamp(1.02rem, 1.3vw, 1.15rem);
	line-height: 1.72;
}

/* Remove editor spacer paragraphs */
.split-sect .text-cell p:empty,
.split-sect .text-cell p:has(> br:only-child) {
	display: none;
}

.split-sect .text-cell a:not(.button) {
	color: var(--rotary-gold);
	font-weight: 850;
	text-decoration-color: rgba(247, 183, 49, 0.35);
}

.split-sect .text-cell a:not(.button):hover {
	color: var(--rotary-white);
	text-decoration-color: currentColor;
}

/* Button polish inside split sections */
.split-sect .text-cell .button {
	margin-top: 0.75rem;

	background:
		linear-gradient(
			135deg,
			var(--rotary-gold),
			var(--rotary-gold-dark)
		);

	color: var(--rotary-blue-deep) !important;

	box-shadow:
		0 14px 34px rgba(0,0,0,0.18),
		0 8px 20px rgba(247, 183, 49, 0.22);
}

.split-sect .text-cell .button:hover {
	box-shadow:
		0 18px 44px rgba(0,0,0,0.22),
		0 10px 24px rgba(247, 183, 49, 0.28);
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 980px) {
	.split-sect > .i {
		grid-template-columns: 1fr;
		min-height: 0;
	}

	.split-sect .image-cell {
		min-height: clamp(360px, 64vw, 540px);

		padding:
			clamp(2rem, 8vw, 4rem)
			var(--rotary-gutter);
	}

	.split-sect .image-cell > * {
		width: min(100%, 720px);
	}

	.split-sect .text-cell,
	.split-sect .right-cell,
	.split-sect .left-cell {
		justify-content: center;

		padding:
			clamp(3.25rem, 10vw, 5rem)
			var(--rotary-gutter);
	}

	.split-sect .text-cell > * {
		width: min(100%, var(--rotary-container));
	}

	/* On mobile, keep each split reading text then image where useful */
	.split-sect .left-cell {
		order: 1;
	}

	.split-sect .left-cell + .image-cell {
		order: 2;
	}

	.split-sect .right-cell {
		order: 2;
	}

	.image-cell + .right-cell {
		order: 1;
	}

	.split-sect .text-cell > *::before {
		inset:
			clamp(-1.75rem, -4vw, -1rem)
			clamp(-1.5rem, -4vw, -1rem);
	}
}

@media (max-width: 640px) {
	.split-sect .image-cell {
		min-height: auto;
		padding:
			clamp(1.75rem, 8vw, 3rem)
			var(--rotary-gutter);
	}

	.split-sect .image-cell > * {
		border-radius: 30px;
		transform: none;
	}

	.split-sect .text-cell + .image-cell > * {
		transform: none;
	}

	.split-sect .image-cell:hover > * {
		transform: translateY(-4px);
	}

	.split-sect .image-cell p {
		padding: 7px;
	}

	.split-sect .image-cell img {
		border-radius: 23px;
	}

	.split-sect .image-cell:hover img {
		transform: scale(1.018);
	}

	.split-sect .image-cell p::after {
		width: 44px;
		height: 44px;
		right: 16px;
		bottom: 16px;

		border-width: 5px;
	}

	.split-sect .text-cell h2 {
		font-size: clamp(2rem, 10vw, 3.35rem);
		letter-spacing: -0.055em;
	}

	.split-sect .text-cell p {
		font-size: 1rem;
	}

	.split-sect .text-cell > *::before {
		inset:
			clamp(-1.35rem, -4vw, -0.85rem)
			clamp(-1rem, -4vw, -0.75rem);
		border-radius: 26px;
	}
}

@media (max-width: 440px) {
	.split-sect .image-cell > *::before {
		inset: auto auto -12px -12px;
		border-radius: 22px;
	}

	.split-sect .text-cell,
	.split-sect .right-cell,
	.split-sect .left-cell {
		padding:
			clamp(2.75rem, 11vw, 3.75rem)
			var(--rotary-gutter);
	}
}
 /* Begin CSS Part: Effects */

 /* Begin CSS Part: Site Design */
/* ==========================================
   SHREWSBURY SEVERN ROTARY
   FOOTER
========================================== */

.footer-wrapper {
	position: relative;
	isolation: isolate;

	width: 100%;

	background: var(--rotary-blue-deep);
	color: rgba(255,255,255,0.82);

	overflow: hidden;
}

.footer-wrapper::before {
	content: "";
	position: absolute;
	inset: 0;

	background:
		radial-gradient(circle at 12% 12%, rgba(247, 183, 49, 0.18), transparent 30%),
		radial-gradient(circle at 90% 8%, rgba(255,255,255,0.08), transparent 34%),
		linear-gradient(135deg, var(--rotary-blue-deep), #03162b);

	pointer-events: none;
}

.footer-wrapper::after {
	content: "";
	position: absolute;
	inset: 0;

	background:
		linear-gradient(90deg, rgba(255,255,255,0.045) 1px, transparent 1px),
		linear-gradient(180deg, rgba(255,255,255,0.035) 1px, transparent 1px);
	background-size: 52px 52px;

	opacity: 0.35;

	pointer-events: none;
}

.footer-main,
.slim-footer {
	position: relative;
	z-index: 2;

	width: min(100%, var(--rotary-container));
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--rotary-gutter);
	padding-right: var(--rotary-gutter);
}

/* Main footer columns */
.footer-main {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3rem);

	padding-top: clamp(3rem, 7vw, 5rem);
	padding-bottom: clamp(2.5rem, 6vw, 4rem);
}

.footer-main label {
	display: block;

	margin-bottom: 1rem;

	color: var(--rotary-white);

	font-size: 0.9rem;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.08em;
}

.footer-main label::after {
	content: "";
	display: block;

	width: 48px;
	height: 4px;
	margin-top: 0.75rem;

	background:
		linear-gradient(90deg, var(--rotary-gold), rgba(247, 183, 49, 0.18));

	border-radius: 999px;
}

/* Footer menus */
.footer-wrapper ul {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.5rem;

	margin: 0;
	padding: 0;

	list-style: none;
}

.footer-wrapper li {
	margin: 0;
	padding: 0;
	list-style: none;
}

.footer-wrapper a {
	color: rgba(255,255,255,0.82);
	text-decoration: none;

	transition:
		color var(--rotary-transition),
		transform var(--rotary-transition);
}

.footer-wrapper a:hover {
	color: var(--rotary-gold);
}

.footer-menus a {
	display: inline-flex;
	align-items: center;

	font-weight: 700;
	line-height: 1.3;
}

.footer-menus a::before {
	content: "";
	display: inline-block;

	width: 7px;
	height: 7px;
	margin-right: 0.6rem;

	background: var(--rotary-gold);
	border-radius: 50%;

	transform: scale(0.72);
	transition: transform var(--rotary-transition);
}

.footer-menus a:hover::before {
	transform: scale(1);
}

/* Address/contact */
.footer-address,
.footer-contact {
	color: rgba(255,255,255,0.82);
}

.company-info-part {
	color: rgba(255,255,255,0.82);
	font-size: 0.98rem;
	line-height: 1.6;
}

.company-info-part.name {
	margin-bottom: 0.45rem;

	color: var(--rotary-white);
	font-weight: 900;
}

.inline-contact {
	display: grid;
	grid-template-columns: auto 1fr;
	gap: 0.5rem;
	align-items: baseline;

	margin-bottom: 0.6rem;
}

.inline-contact label {
	margin: 0;

	color: var(--rotary-gold);

	font-size: 0.9rem;
	letter-spacing: 0;
	text-transform: none;
}

.inline-contact label::after {
	display: none;
}

.inline-contact a,
.email-contact .company-info-part {
	color: rgba(255,255,255,0.88);
	font-weight: 750;
}

/* Slim footer */
.slim-footer {
	border-top: 1px solid rgba(255,255,255,0.12);
}

.slim-footer > div {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	gap: 1rem;
	align-items: center;

	padding-top: 1.25rem;
	padding-bottom: 1.25rem;
}

.footer-copy p {
	margin: 0;

	color: rgba(255,255,255,0.68);

	font-size: 0.9rem;
	line-height: 1.4;
}

.footer-copy a {
	color: var(--rotary-white);
	font-weight: 800;
}

.footer-final-menu ul {
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 0.85rem;
}

.footer-final-menu a {
	color: rgba(255,255,255,0.68);

	font-size: 0.9rem;
	font-weight: 700;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 900px) {
	.footer-main {
		grid-template-columns: 1fr;
	}

	.slim-footer > div {
		grid-template-columns: 1fr;
		text-align: left;
	}

	.footer-final-menu ul {
		justify-content: flex-start;
	}
}

@media (max-width: 560px) {
	.footer-main {
		padding-top: clamp(2.5rem, 10vw, 3.5rem);
		padding-bottom: clamp(2rem, 8vw, 3rem);
	}

	.inline-contact {
		grid-template-columns: 1fr;
		gap: 0.2rem;
	}

	.footer-final-menu ul {
		flex-direction: column;
		align-items: flex-start;
		gap: 0.45rem;
	}
}
 /* Begin CSS Part: User Design */

 /* Begin CSS Part: Site Components */

 /* Begin CSS Part: Results */

 /* Begin CSS Part: Pages */
/* ==========================================
   SHREWSBURY SEVERN ROTARY
   PAGES / PAGE SECTIONS
========================================== */

/*
	Core section system.

	Single column:
	.ww-page-section
		> .i
			> .page-section-content
				> .i
					> .page-content

	Intro / focal content:
	.ww-page-section.intro-section

	Multi-column section:
	.ww-page-section.ww-grid.ww-grid--2
		> .i
			> .page-section-content
			> .page-section-media

	Reusable raised cell:
	.page-section-content.pop
	.page-section-media.pop

	Reusable brand backgrounds:
	.brand-fill-1 and .brand-fill-2 live in the Colours tab.
*/


/* ==========================================
   GENERIC PAGE SECTION
========================================== */

.ww-page-section {
	position: relative;
	isolation: isolate;

	width: 100%;
	padding:
		var(--rotary-section-md)
		var(--rotary-gutter);

	background: var(--rotary-page-bg);
	color: var(--rotary-text);

	overflow: hidden;
}

/* Standard inner wrapper */
.ww-page-section > .i {
	position: relative;
	z-index: 2;

	width: min(100%, var(--rotary-container));
	margin-left: auto;
	margin-right: auto;
}

/* Section cells */
.ww-page-section .page-section-content,
.ww-page-section .page-section-media {
	position: relative;
	min-width: 0;
}

/* Inner wrappers inside content/media cells */
.ww-page-section .page-section-content > .i,
.ww-page-section .page-section-media > .i {
	width: 100%;
	height: 100%;
}

/* Default written content component */
.ww-page-section .page-content {
	position: relative;

	width: 100%;
	max-width: 860px;
}

/* Centred content variant */
.ww-page-section .page-content.center {
	margin-left: auto;
	margin-right: auto;

	text-align: center;
}

/* Standard heading rhythm */
.ww-page-section .page-content h2 {
	margin-bottom: clamp(1.1rem, 2.8vw, 1.75rem);

	color: var(--rotary-blue-dark);

	font-size: clamp(2rem, 4.4vw, 4rem);
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -0.055em;

	text-wrap: balance;
}

.ww-page-section .page-content h2::after {
	content: "";
	display: block;

	width: 82px;
	height: 5px;
	margin-top: clamp(1rem, 2vw, 1.25rem);

	background:
		linear-gradient(
			90deg,
			var(--rotary-gold),
			var(--rotary-burgundy)
		);

	border-radius: 999px;
}

.ww-page-section .page-content.center h2::after {
	margin-left: auto;
	margin-right: auto;
}

/* Standard text rhythm */
.ww-page-section .page-content p {
	max-width: 72ch;
	margin-bottom: 1rem;

	color: var(--rotary-text);

	font-size: clamp(1rem, 1.18vw, 1.12rem);
	line-height: 1.72;
}

.ww-page-section .page-content.center p {
	margin-left: auto;
	margin-right: auto;
}

.ww-page-section .page-content p:last-child {
	margin-bottom: 0;
}

.ww-page-section .page-content a:not(.button) {
	color: var(--rotary-blue);
	font-weight: 800;
	text-decoration-color: rgba(11, 74, 143, 0.28);
}

.ww-page-section .page-content a:not(.button):hover {
	color: var(--rotary-burgundy);
	text-decoration-color: currentColor;
}

/* Remove empty paragraph spacing from pasted editor content */
.ww-page-section .page-content p:empty,
.ww-page-section .page-content p:has(> br:only-child) {
	display: none;
}


/* ==========================================
   GENERIC MEDIA CELL
========================================== */

.ww-page-section .page-section-media {
	border-radius: var(--rotary-radius-xl);
	overflow: hidden;
}

.ww-page-section .page-section-media img,
.ww-page-section .page-section-media video,
.ww-page-section .page-section-media iframe {
	width: 100%;
}

.ww-page-section .page-section-media img,
.ww-page-section .page-section-media video {
	height: auto;
	object-fit: cover;
}

.ww-page-section .page-section-media iframe {
	min-height: 420px;
	border: 0;
}


/* ==========================================
   GRID PAGE SECTIONS
========================================== */

/*
	Add .ww-grid to .ww-page-section when the section contains
	multiple columns, usually content + media.

	Important:
	Grid sections stretch by default so .pop panels, maps and media cells
	can match heights cleanly.
*/

.ww-page-section.ww-grid {
	position: relative;
	isolation: isolate;
}

.ww-page-section.ww-grid > .i {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: stretch;

	width: min(100%, var(--rotary-container));
	margin-left: auto;
	margin-right: auto;
}

/* Explicit two-column variant */
.ww-page-section.ww-grid--2 > .i {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	align-items: stretch;
}

/* Optional three-column variant for future use */
.ww-page-section.ww-grid--3 > .i {
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
}

/* Make direct grid cells fill the shared grid row height */
.ww-page-section.ww-grid > .i > .page-section-content,
.ww-page-section.ww-grid > .i > .page-section-media {
	height: 100%;
	min-height: 100%;
}

/* Larger text side */
.ww-page-section.ww-grid.content-wide > .i {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

/* Larger media side */
.ww-page-section.ww-grid.media-wide > .i {
	grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
}

/* Reverse order when needed */
.ww-page-section.ww-grid.reverse .page-section-content {
	order: 2;
}

.ww-page-section.ww-grid.reverse .page-section-media {
	order: 1;
}

/* Grid content width */
.ww-page-section.ww-grid .page-content {
	max-width: 640px;
}



/* ==========================================
   TOP FADE MODIFIER
========================================== */

/*
	Use .top-fade either on:

	1. A single section:
	.ww-page-section.top-fade

	2. A full page/content wrapper:
	.page-content-wrapper.top-fade

	This creates the soft radial glow wash from the top of the page,
	while allowing child .ww-page-section blocks to sit naturally inside it.
*/


/* ==========================================
   PAGE-WRAPPER TOP FADE
========================================== */

.page-content-wrapper.top-fade {
	position: relative;
	isolation: isolate;

	background:
		radial-gradient(
			circle at 12% 0%,
			rgba(247, 183, 49, 0.22),
			transparent 32%
		),
		radial-gradient(
			circle at 88% 2%,
			rgba(11, 74, 143, 0.14),
			transparent 34%
		),
		radial-gradient(
			circle at 50% -12%,
			rgba(255,255,255,0.92),
			transparent 36%
		),
		linear-gradient(
			180deg,
			rgba(234, 242, 251, 0.96) 0%,
			var(--rotary-page-bg) 34%,
			var(--rotary-page-bg) 100%
		);

	overflow: hidden;
}

/* Top light wash */
.page-content-wrapper.top-fade::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;

	height: clamp(220px, 28vw, 420px);

	background:
		linear-gradient(
			180deg,
			rgba(255,255,255,0.74) 0%,
			rgba(255,255,255,0.32) 36%,
			rgba(255,255,255,0) 100%
		);

	pointer-events: none;
}

/* Subtle decorative glow field */
.page-content-wrapper.top-fade::after {
	content: "";
	position: absolute;
	top: clamp(-40px, -4vw, -20px);
	left: 50%;
	z-index: 1;

	width: min(1700px, 120vw);
	height: clamp(340px, 44vw, 680px);

	background:
		radial-gradient(
			ellipse at 18% 32%,
			rgba(247, 183, 49, 0.18),
			rgba(247, 183, 49, 0.08) 30%,
			transparent 66%
		),
		radial-gradient(
			ellipse at 78% 24%,
			rgba(139, 44, 56, 0.07),
			rgba(139, 44, 56, 0.025) 34%,
			transparent 68%
		),
		radial-gradient(
			ellipse at 52% 38%,
			rgba(11, 74, 143, 0.075),
			rgba(11, 74, 143, 0.025) 36%,
			transparent 72%
		);

	transform: translateX(-50%);

	filter: blur(18px);
	opacity: 0.92;

	mask-image:
		radial-gradient(
			ellipse at center,
			black 0%,
			black 42%,
			transparent 76%
		);

	-webkit-mask-image:
		radial-gradient(
			ellipse at center,
			black 0%,
			black 42%,
			transparent 76%
		);

	pointer-events: none;
}

/* Keep page content above the glows */
.page-content-wrapper.top-fade > * {
	position: relative;
	z-index: 2;
}

/*
	When top-fade is on the page wrapper, let the wrapper provide
	the background so child sections don't block the glow.
*/
.page-content-wrapper.top-fade .ww-page-section {
	background: transparent;
}

/* If a child listing/grid section has its own radial background, soften it */
.page-content-wrapper.top-fade .listing-cards,
.page-content-wrapper.top-fade .team-grid,
.page-content-wrapper.top-fade .team-member-layout {
	background: transparent;
}


/* ==========================================
   SINGLE-SECTION TOP FADE
========================================== */

.ww-page-section.top-fade {
	background:
		radial-gradient(
			circle at 12% 0%,
			rgba(247, 183, 49, 0.18),
			transparent 32%
		),
		radial-gradient(
			circle at 88% 2%,
			rgba(11, 74, 143, 0.12),
			transparent 34%
		),
		linear-gradient(
			180deg,
			rgba(234, 242, 251, 0.92) 0%,
			var(--rotary-page-bg) 34%,
			var(--rotary-page-bg) 100%
		);
}

.ww-page-section.top-fade::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 1;

	height: clamp(100px, 16vw, 220px);

	background:
		linear-gradient(
			180deg,
			rgba(255,255,255,0.72),
			rgba(255,255,255,0)
		);

	pointer-events: none;
}

/* Blue-to-soft transition option */
.ww-page-section.top-fade.from-blue::before {
	background:
		linear-gradient(
			180deg,
			rgba(4, 31, 61, 0.12),
			rgba(255,255,255,0)
		);
}




/* ==========================================
   INTRO SECTION MODIFIER
========================================== */

/*
	Intro sections are focal written sections.
	They are usually single-column and centred.
*/

.ww-page-section.intro-section {
	padding:
		clamp(3.5rem, 8vw, 7rem)
		var(--rotary-gutter);

	background:
		radial-gradient(
			circle at 12% 18%,
			rgba(247, 183, 49, 0.16),
			transparent 30%
		),
		radial-gradient(
			circle at 88% 10%,
			rgba(11, 74, 143, 0.10),
			transparent 34%
		),
		var(--rotary-page-bg);
}

/* Intro inner wrapper */
.ww-page-section.intro-section > .i {
		width: min(100%, var(--rotary-container-narrow));
}

/* Intro content card */
.ww-page-section.intro-section .page-section-content {
	position: relative;
	z-index: 2;

	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding:
		clamp(2rem, 5vw, 4.5rem)
		clamp(1.25rem, 4vw, 4rem);

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,0.94),
			rgba(255,255,255,0.78)
		);

	border: 1px solid rgba(11, 74, 143, 0.12);
	border-radius: var(--rotary-radius-xl);

	box-shadow:
		0 28px 70px rgba(7, 52, 98, 0.12),
		0 12px 32px rgba(7, 52, 98, 0.07),
		inset 0 1px 0 rgba(255,255,255,0.72);

	backdrop-filter: blur(12px);
}

/* Intro accent */
.ww-page-section.intro-section .page-section-content::before {
	content: "";
	display: block;

	width: 92px;
	height: 6px;
	margin:
		0
		auto
		clamp(1.35rem, 3vw, 2rem);

	background:
		linear-gradient(
			90deg,
			var(--rotary-gold),
			var(--rotary-burgundy)
		);

	border-radius: 999px;
}

/* Intro text */
.ww-page-section.intro-section .page-content {
	max-width: 880px;
	margin-left: auto;
	margin-right: auto;

	text-align: center;
}

.ww-page-section.intro-section .page-content h2 {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: clamp(1.35rem, 3vw, 2rem);

	color: var(--rotary-blue-dark);

	font-size: clamp(2rem, 4.6vw, 4.2rem);
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -0.058em;

	text-wrap: balance;
}

/* The intro card already has an accent, so hide the heading underline */
.ww-page-section.intro-section .page-content h2::after {
	display: none;
}

.ww-page-section.intro-section .page-content p {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;

	color: var(--rotary-text);

	font-size: clamp(1.04rem, 1.38vw, 1.18rem);
	line-height: 1.72;
}

/* Gentle highlight on the opening paragraph */
.ww-page-section.intro-section .page-content h2 + p {
	color: var(--rotary-blue-dark);
	font-weight: 650;
}

/* Decorative glow inside intro */
.ww-page-section.intro-section .page-section-content::after {
	content: "";
	position: absolute;
	right: clamp(1rem, 4vw, 3rem);
	bottom: clamp(1rem, 4vw, 3rem);

	width: 120px;
	height: 120px;

	background:
		radial-gradient(
			circle,
			rgba(247, 183, 49, 0.20),
			transparent 64%
		);

	border-radius: 50%;

	pointer-events: none;
}


/* ==========================================
   POP MODIFIER
========================================== */

/*
	Add .pop to any target section cell when it should stand out
	from the page background.

	Example:
	.page-section-content.pop
	.page-section-media.pop
*/

.ww-page-section .pop {
	position: relative;
	isolation: isolate;

	height: 100%;
	min-height: 100%;

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,0.98),
			rgba(255,255,255,0.88)
		);

	border: 1px solid rgba(11, 74, 143, 0.12);
	border-radius: var(--rotary-radius-xl);

	box-shadow:
		0 30px 76px rgba(7, 52, 98, 0.12),
		0 12px 34px rgba(7, 52, 98, 0.07),
		inset 0 1px 0 rgba(255,255,255,0.72);

	overflow: hidden;
	backdrop-filter: blur(12px);
}

/* Soft brand glow in popped cells */
.ww-page-section .pop::before {
	content: "";
	position: absolute;
	right: -90px;
	bottom: -90px;
	z-index: 1;

	width: 230px;
	height: 230px;

	background:
		radial-gradient(
			circle,
			rgba(247, 183, 49, 0.20),
			rgba(247, 183, 49, 0.08) 42%,
			transparent 68%
		);

	border-radius: 50%;

	pointer-events: none;
}

/* Keep actual content above the glow */
.ww-page-section .pop > .i {
	position: relative;
	z-index: 2;

	width: 100%;
	height: 100%;
}

/* Content pop padding */
.ww-page-section .page-section-content.pop {
	display: flex;
	align-items: center;

	padding:
		clamp(1.75rem, 4vw, 3.25rem)
		clamp(1.35rem, 4vw, 2.75rem);
}

/* Let the content wrapper centre vertically inside the full-height panel */
.ww-page-section .page-section-content.pop > .i {
	display: flex;
	align-items: center;
}

/* Media pop padding */
.ww-page-section .page-section-media.pop {
	display: flex;

	padding: clamp(0.55rem, 1.4vw, 0.85rem);
}

/* Let media wrapper fill the whole raised panel */
.ww-page-section .page-section-media.pop > .i {
	display: flex;
	flex: 1 1 auto;

	min-height: 100%;
}

/* Content inside popped cells */
.ww-page-section .page-section-content.pop .page-content {
	width: 100%;
	max-width: 640px;
}

.ww-page-section .page-section-content.pop .button {
	margin-top: 0.35rem;
}


/* ==========================================
   MAP COMPONENT
========================================== */

.ww-page-section .map {
	position: relative;

	display: flex;
	flex: 1 1 auto;

	width: 100%;
	height: 100%;
	min-height: 100%;

	background:
		linear-gradient(
			135deg,
			var(--rotary-blue-soft),
			rgba(255,255,255,0.92)
		);

	border-radius: calc(var(--rotary-radius-xl) - 10px);

	overflow: hidden;
}

/* Map inner wrappers */
.ww-page-section .map .content,
.ww-page-section .map .content p {
	display: flex;

	width: 100%;
	height: 100%;
	min-height: 100%;

	margin: 0;
}

/* The iframe itself */
.ww-page-section .map iframe {
	display: block;
	flex: 1 1 auto;

	width: 100% !important;
	height: 100% !important;
	min-height: clamp(420px, 38vw, 560px);

	border: 0 !important;
	border-radius: calc(var(--rotary-radius-xl) - 10px);

	filter:
		saturate(0.95)
		contrast(1.04);

	transition:
		filter var(--rotary-transition),
		transform var(--rotary-transition);
}

/* Gentle hover polish */
.ww-page-section .map:hover iframe {
	filter:
		saturate(1.04)
		contrast(1.06);
}

/* Map glass edge */
.ww-page-section .map::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;

	border: 1px solid rgba(255,255,255,0.64);
	border-radius: inherit;

	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.58),
		inset 0 -40px 70px rgba(4, 31, 61, 0.10);

	pointer-events: none;
}

/* Small decorative corner glow */
.ww-page-section .map::after {
	content: "";
	position: absolute;
	right: -58px;
	bottom: -58px;
	z-index: 3;

	width: 160px;
	height: 160px;

	background:
		radial-gradient(
			circle,
			rgba(247, 183, 49, 0.28),
			transparent 66%
		);

	border-radius: 50%;

	pointer-events: none;
}


/* ==========================================
   NOTES / HIGHLIGHT BOXES
========================================== */

.ww-page-section .notes {
	position: relative;

	max-width: 780px;
	margin:
		clamp(1.5rem, 4vw, 2.35rem)
		auto
		0;

	padding:
		clamp(1.1rem, 3vw, 1.45rem)
		clamp(1rem, 3vw, 1.6rem);

	background:
		linear-gradient(
			135deg,
			var(--rotary-blue-soft),
			rgba(255,255,255,0.82)
		);

	border: 1px solid rgba(11, 74, 143, 0.16);
	border-radius: var(--rotary-radius-md);

	box-shadow:
		0 14px 34px rgba(7, 52, 98, 0.08),
		inset 0 1px 0 rgba(255,255,255,0.68);
}

.ww-page-section .notes::before {
	content: "";
	position: absolute;
	top: 1rem;
	left: 1rem;

	width: 10px;
	height: 10px;

	background: var(--rotary-gold);
	border-radius: 50%;

	box-shadow:
		16px 0 0 rgba(139, 44, 56, 0.72),
		32px 0 0 rgba(11, 74, 143, 0.72);
}

.ww-page-section .notes p {
	margin: 0;
	padding-top: 0.75rem;

	color: var(--rotary-blue-dark);

	font-size: clamp(1rem, 1.3vw, 1.12rem);
	font-weight: 800;
	line-height: 1.55;
}


/* ==========================================
   SECTION COLOUR MODIFIERS
========================================== */

/*
	Brand fills live in the Colours tab.
	These simple background helpers are kept here for plain page sections.
*/

.ww-page-section.section-soft {
	background: var(--rotary-soft-bg);
}

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

.ww-page-section.section-cream {
	background: var(--rotary-cream);
}


/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 980px) {
	.ww-page-section.ww-grid > .i,
	.ww-page-section.ww-grid--2 > .i,
	.ww-page-section.ww-grid--3 > .i,
	.ww-page-section.ww-grid.content-wide > .i,
	.ww-page-section.ww-grid.media-wide > .i {
		grid-template-columns: 1fr;
	}

	.ww-page-section.ww-grid.reverse .page-section-content,
	.ww-page-section.ww-grid.reverse .page-section-media {
		order: initial;
	}

	.ww-page-section.ww-grid .page-content,
	.ww-page-section .page-section-content.pop .page-content {
		max-width: 860px;
	}

	.ww-page-section .page-section-media iframe {
		min-height: 360px;
	}

	.ww-page-section .page-section-content.pop {
		padding:
			clamp(1.75rem, 6vw, 2.75rem)
			clamp(1.2rem, 5vw, 2rem);
	}
}

@media (max-width: 700px) {
	.ww-page-section {
		padding:
			clamp(2.5rem, 9vw, 4rem)
			var(--rotary-gutter);
	}

	.ww-page-section.intro-section {
		padding:
			clamp(2.5rem, 10vw, 4.25rem)
			var(--rotary-gutter);
	}

	.ww-page-section.intro-section .page-section-content {
		padding:
			clamp(1.75rem, 8vw, 3rem)
			clamp(1rem, 6vw, 1.5rem);

		border-radius: 30px;
	}

	.ww-page-section.intro-section .page-content h2 {
		font-size: clamp(2rem, 10vw, 3.15rem);
	}

	.ww-page-section.intro-section .page-section-content::after {
		display: none;
	}

	.ww-page-section .notes {
		border-radius: 22px;
	}
}

@media (max-width: 640px) {
	.ww-page-section .pop {
		border-radius: 30px;
	}

	.ww-page-section .page-section-media.pop {
		padding: 0.5rem;
	}

	.ww-page-section .map,
	.ww-page-section .map iframe {
		border-radius: 24px;
	}

	.ww-page-section .map iframe {
		min-height: 320px;
	}

	.ww-page-section .page-section-content.pop h2 {
		font-size: clamp(2rem, 10vw, 3.1rem);
	}
}

@media (max-width: 460px) {
	.ww-page-section .page-content h2,
	.ww-page-section.intro-section .page-content h2 {
		letter-spacing: -0.045em;
	}

	.ww-page-section .notes::before {
		display: none;
	}

	.ww-page-section .notes p {
		padding-top: 0;
	}
}
 /** Begin CSS Section: modules */

 /* Begin CSS Part: 404 */

 /* Begin CSS Part: Admin */

 /* Begin CSS Part: Auth */

 /* Begin CSS Part: Auto Pdf */

 /* Begin CSS Part: Basket */

 /* Begin CSS Part: Calendar */

 /* Begin CSS Part: Categories */
/* ==========================================
   SHREWSBURY SEVERN ROTARY
   LISTING CARDS
========================================== */

/*
	Usage:

	.ww-page-section.listing-cards
		> .i
			> .items
				> .collation-items-list
					> .collation-item.projects

	This relies on the generic .ww-page-section styling
	for outer section spacing.

	Image note:
	If the CMS source uses expand-crop/500-x-500, the supplied image
	may already be cropped before CSS receives it. This styling prevents
	any extra browser-side cropping.
*/

.listing-cards {
	position: relative;
	isolation: isolate;
}

/* Allow listing grids to breathe a little wider */
.listing-cards > .i {
	position: relative;
	z-index: 2;

	width: min(100%, var(--rotary-container-wide));
}

/* Main collection wrapper */
.listing-cards .items {
	width: 100%;
}

/* Actual card grid */
.listing-cards .collation-items-list {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: clamp(1.15rem, 2.4vw, 1.75rem);

	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

/* ==========================================
   CARD
========================================== */

.listing-cards .collation-item.projects {
	position: relative;
	isolation: isolate;

	display: flex !important;
	flex-direction: column;

	min-width: 0;
	min-height: 100%;
	margin: 0 !important;
	padding: 0 !important;

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,0.98),
			rgba(255,255,255,0.88)
		);

	border: 1px solid rgba(11, 74, 143, 0.12);
	border-radius: var(--rotary-radius-xl);

	box-shadow:
		0 24px 58px rgba(7, 52, 98, 0.10),
		0 10px 26px rgba(7, 52, 98, 0.06),
		inset 0 1px 0 rgba(255,255,255,0.72);

	overflow: hidden;
	backdrop-filter: blur(12px);

	transition:
		transform var(--rotary-transition),
		border-color var(--rotary-transition),
		box-shadow var(--rotary-transition);
}

.listing-cards .collation-item.projects:hover {
	transform: translateY(-8px);

	border-color: rgba(247, 183, 49, 0.48);

	box-shadow:
		0 34px 78px rgba(7, 52, 98, 0.15),
		0 16px 38px rgba(7, 52, 98, 0.09),
		inset 0 1px 0 rgba(255,255,255,0.82);
}

/* Soft corner glow */
.listing-cards .collation-item.projects::before {
	content: "";
	position: absolute;
	right: -78px;
	bottom: -78px;
	z-index: 1;

	width: 210px;
	height: 210px;

	background:
		radial-gradient(
			circle,
			rgba(247, 183, 49, 0.22),
			rgba(247, 183, 49, 0.08) 42%,
			transparent 68%
		);

	border-radius: 50%;

	pointer-events: none;
}

/* Top sheen */
.listing-cards .collation-item.projects::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: 1;

	height: 48%;

	background:
		linear-gradient(
			180deg,
			rgba(255,255,255,0.50),
			rgba(255,255,255,0)
		);

	pointer-events: none;
}

/* Keep content above decoration */
.listing-cards .collation-item.projects > * {
	position: relative;
	z-index: 2;
}

/* ==========================================
   IMAGE
========================================== */

.listing-cards .collation-item.projects .icon {
	position: relative;

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

	width: 100% !important;
	aspect-ratio: 1 / 1;

	margin: 0 !important;
	padding: clamp(0.65rem, 1.6vw, 0.9rem) !important;

	background:
		radial-gradient(
			circle at 18% 18%,
			rgba(247, 183, 49, 0.16),
			transparent 34%
		),
		linear-gradient(
			135deg,
			rgba(255,255,255,0.96),
			var(--rotary-blue-soft)
		);

	overflow: hidden;
}

/* Soft glass edge */
.listing-cards .collation-item.projects .icon::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;

	border: 1px solid rgba(255,255,255,0.62);

	box-shadow:
		inset 0 1px 0 rgba(255,255,255,0.72),
		inset 0 -34px 60px rgba(4,31,61,0.08);

	pointer-events: none;
}

/* No chip over listing images, so the full thumbnail stays visible */
.listing-cards .collation-item.projects .icon::after {
	content: none;
	display: none;
}

.listing-cards .collation-item.projects .icon img {
	position: relative;
	z-index: 1;

	display: block;

	width: 100% !important;
	height: 100% !important;

	object-fit: contain;
	object-position: center;

	padding: 0 !important;

	border-radius: calc(var(--rotary-radius-xl) - 14px);

	transform: scale(0.98);

	transition:
		transform 520ms ease,
		filter 520ms ease;
}

.listing-cards .collation-item.projects:hover .icon img {
	transform: scale(1);
	filter:
		saturate(1.04)
		contrast(1.03);
}

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

.listing-cards .collation-item.projects .mini-content {
	position: relative;

	display: flex !important;
	flex-direction: column;
	flex: 1 1 auto;

	width: 100%;
	min-height: 0;

	padding:
		clamp(1.15rem, 2.4vw, 1.55rem)
		clamp(1rem, 2.2vw, 1.35rem)
		clamp(1.2rem, 2.4vw, 1.45rem) !important;

	text-align: left !important;
}

.listing-cards .collation-item.projects .title {
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

.listing-cards .collation-item.projects h3 {
	margin:
		0
		0
		0.85rem !important;

	color: var(--rotary-blue-dark);

	font-size: clamp(1.35rem, 2vw, 1.85rem);
	font-weight: 950;
	line-height: 1.05;
	letter-spacing: -0.045em;

	text-wrap: balance;
}

.listing-cards .collation-item.projects h3::after {
	content: "";
	display: block;

	width: 58px;
	height: 4px;
	margin-top: 0.8rem;

	background:
		linear-gradient(
			90deg,
			var(--rotary-gold),
			var(--rotary-burgundy)
		);

	border-radius: 999px;
}

/* Abstract */
.listing-cards .collation-item.projects .abstract {
	flex: 1 1 auto;

	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

.listing-cards .collation-item.projects .abstract p {
	display: -webkit-box;
	-webkit-line-clamp: 4;
	-webkit-box-orient: vertical;

	margin: 0;

	color: var(--rotary-text);

	font-size: clamp(0.98rem, 1.15vw, 1.05rem);
	line-height: 1.62;

	overflow: hidden;
}

/* Tame manual breaks / pasted spacing */
.listing-cards .collation-item.projects .abstract br {
	display: none;
}

/* ==========================================
   CARD CTA
========================================== */

.listing-cards .collation-item.projects .mini-content::after {
	content: "View details";

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

	width: fit-content;
	min-height: 42px;
	margin-top: clamp(1rem, 2vw, 1.25rem);
	padding: 0.72rem 1rem;

	background:
		linear-gradient(
			135deg,
			var(--rotary-blue),
			var(--rotary-blue-dark)
		);

	color: var(--rotary-white);

	border-radius: 999px;

	box-shadow:
		0 10px 24px rgba(11, 74, 143, 0.18);

	font-size: 0.85rem;
	font-weight: 900;
	line-height: 1;
	text-decoration: none;

	transition:
		background var(--rotary-transition),
		box-shadow var(--rotary-transition),
		transform var(--rotary-transition);
}

.listing-cards .collation-item.projects:hover .mini-content::after {
	background:
		linear-gradient(
			135deg,
			var(--rotary-gold),
			var(--rotary-gold-dark)
		);

	color: var(--rotary-blue-deep);

	box-shadow:
		0 14px 30px rgba(247, 183, 49, 0.24);

	transform: translateY(-1px);
}

/* Hide empty generated link component */
.listing-cards .collation-item.projects .link {
	display: none !important;
}

/* Full-card link */
.listing-cards .collation-item.projects .inflate,
.listing-cards .collation-item.projects .wrap.inflate {
	position: absolute !important;
	inset: 0 !important;
	z-index: 20 !important;

	display: block !important;

	color: transparent !important;
	text-indent: -9999px !important;
	overflow: hidden !important;
}

/* Focus state for keyboard users */
.listing-cards .collation-item.projects:focus-within {
	outline: 3px solid var(--rotary-focus);
	outline-offset: 4px;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 1240px) {
	.listing-cards .collation-items-list {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 980px) {
	.listing-cards .collation-items-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.listing-cards .collation-item.projects .icon {
		aspect-ratio: 1 / 1;
	}
}

@media (max-width: 640px) {
	.listing-cards .collation-items-list {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.listing-cards .collation-item.projects {
		border-radius: 30px;
	}

	.listing-cards .collation-item.projects .icon {
		aspect-ratio: 1 / 1;
	}

	.listing-cards .collation-item.projects h3 {
		font-size: clamp(1.35rem, 8vw, 1.75rem);
	}

	.listing-cards .collation-item.projects .abstract p {
		-webkit-line-clamp: 5;
	}
}

@media (max-width: 420px) {
	.listing-cards .collation-item.projects .mini-content {
		padding:
			1.1rem
			1rem
			1.25rem !important;
	}
}


/* ==========================================
   SHREWSBURY SEVERN ROTARY
   TEAM GRID
========================================== */

/*
	Usage:

	.ww-page-section.team-grid
		> .i
			> .items
				> .collation-items-list
					> .collation-item.team

	This section relies on the generic .ww-page-section styling
	for outer spacing and width.
*/

.team-grid {
	position: relative;
	isolation: isolate;

}

/* Keep section content above background details */
.team-grid > .i {
	position: relative;
	z-index: 2;
}

/* Main collection wrapper */
.team-grid .items {
	width: 100%;
}

/* Actual grid */
.team-grid .collation-items-list {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.25rem, 2.8vw, 2rem);

	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

/* ==========================================
   TEAM CARD
========================================== */

.team-grid .collation-item.team {
	position: relative;
	isolation: isolate;

	display: flex !important;
	flex-direction: column;
	align-items: center;

	min-width: 0;
	margin: 0 !important;
	padding:
		clamp(1.25rem, 3vw, 1.75rem)
		clamp(1rem, 2.6vw, 1.45rem)
		clamp(1.35rem, 3vw, 1.85rem);

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,0.98),
			rgba(255,255,255,0.88)
		);

	border: 1px solid rgba(11, 74, 143, 0.12);
	border-radius: var(--rotary-radius-xl);

	box-shadow:
		0 24px 58px rgba(7, 52, 98, 0.10),
		0 10px 26px rgba(7, 52, 98, 0.06),
		inset 0 1px 0 rgba(255,255,255,0.72);

	text-align: center;

	overflow: hidden;
	backdrop-filter: blur(12px);

	transition:
		transform var(--rotary-transition),
		border-color var(--rotary-transition),
		box-shadow var(--rotary-transition);
}

.team-grid .collation-item.team:hover {
	transform: translateY(-8px);

	border-color: rgba(247, 183, 49, 0.48);

	box-shadow:
		0 34px 78px rgba(7, 52, 98, 0.15),
		0 16px 38px rgba(7, 52, 98, 0.09),
		inset 0 1px 0 rgba(255,255,255,0.82);
}

/* Decorative card glow */
.team-grid .collation-item.team::before {
	content: "";
	position: absolute;
	right: -72px;
	bottom: -72px;
	z-index: 1;

	width: 190px;
	height: 190px;

	background:
		radial-gradient(
			circle,
			rgba(247, 183, 49, 0.22),
			rgba(247, 183, 49, 0.08) 42%,
			transparent 68%
		);

	border-radius: 50%;

	pointer-events: none;
}

/* Tiny top shine */
.team-grid .collation-item.team::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: 1;

	height: 44%;

	background:
		linear-gradient(
			180deg,
			rgba(255,255,255,0.68),
			rgba(255,255,255,0)
		);

	pointer-events: none;
}

/* Keep actual card content above decoration */
.team-grid .collation-item.team > * {
	position: relative;
	z-index: 2;
}

/* ==========================================
   PORTRAIT
========================================== */

.team-grid .collation-item.team .icon {
	position: relative;

	width: clamp(132px, 14vw, 180px);
	height: clamp(132px, 14vw, 180px);
	margin:
		0
		auto
		clamp(1.1rem, 2.4vw, 1.45rem);

	background:
		linear-gradient(
			135deg,
			var(--rotary-gold),
			var(--rotary-burgundy)
		);

	border-radius: 50%;

	box-shadow:
		0 18px 42px rgba(7, 52, 98, 0.16),
		0 0 0 8px rgba(234, 242, 251, 0.92);

	overflow: hidden;

	transition:
		transform 360ms ease,
		box-shadow 360ms ease;
}

.team-grid .collation-item.team:hover .icon {
	transform: translateY(-3px) scale(1.03);

	box-shadow:
		0 24px 54px rgba(7, 52, 98, 0.20),
		0 0 0 8px rgba(255, 245, 220, 0.98);
}

/* Subtle portrait gloss */
.team-grid .collation-item.team .icon::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 2;

	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,0.30),
			rgba(255,255,255,0.04) 44%,
			rgba(4,31,61,0.10)
		);

	border-radius: inherit;

	pointer-events: none;
}

.team-grid .collation-item.team .icon img {
	display: block;

	width: 100% !important;
	height: 100% !important;

	object-fit: cover;
	object-position: center top;

	border: 6px solid var(--rotary-white);
	border-radius: 50%;

	transform: scale(1.01);

	transition:
		transform 420ms ease,
		filter 420ms ease;
}

.team-grid .collation-item.team:hover .icon img {
	transform: scale(1.08);
	filter:
		saturate(1.04)
		contrast(1.04);
}

/* ==========================================
   TEXT
========================================== */

.team-grid .collation-item.team .title {
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

.team-grid .collation-item.team h2 {
	margin:
		0
		auto
		0.45rem;

	color: var(--rotary-blue-dark);

	font-size: clamp(1.35rem, 2.1vw, 1.85rem);
	font-weight: 950;
	line-height: 1.05;
	letter-spacing: -0.045em;

	text-wrap: balance;
}

.team-grid .collation-item.team h2::after {
	content: "";
	display: block;

	width: 54px;
	height: 4px;
	margin:
		0.75rem
		auto
		0;

	background:
		linear-gradient(
			90deg,
			var(--rotary-gold),
			var(--rotary-burgundy)
		);

	border-radius: 999px;
}

.team-grid .collation-item.team h3 {
	max-width: 24ch;
	margin:
		0.75rem
		auto
		1rem;

	color: var(--rotary-muted);

	font-size: clamp(0.98rem, 1.25vw, 1.08rem);
	font-weight: 800;
	line-height: 1.32;
	letter-spacing: -0.015em;

	text-wrap: balance;
}

/* The second content block containing role/button */
.team-grid .collation-item.team .specific-component {
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
}

/* ==========================================
   BUTTON / FOOTER
========================================== */

.team-grid .collation-item.team .component-footer {
	display: flex;
	justify-content: center;

	margin-top: auto;
	padding-top: 0.25rem;
}

.team-grid .collation-item.team .button {
	position: relative;
	z-index: 2;

	min-height: 42px;
	padding: 0.72rem 1rem;

	background:
		linear-gradient(
			135deg,
			var(--rotary-blue),
			var(--rotary-blue-dark)
		);

	color: var(--rotary-white) !important;

	border-radius: 999px;

	box-shadow: 0 10px 24px rgba(11, 74, 143, 0.18);

	font-size: 0.85rem;
	font-weight: 900;
	line-height: 1;
	text-transform: none;
	letter-spacing: 0;

	pointer-events: none;
}

/* Full-card link */
.team-grid .collation-item.team .inflate,
.team-grid .collation-item.team .wrap.inflate {
	position: absolute !important;
	inset: 0 !important;
	z-index: 20 !important;

	display: block !important;

	color: transparent !important;
	text-indent: -9999px !important;
	overflow: hidden !important;
}

/* Focus state for keyboard users */
.team-grid .collation-item.team:focus-within {
	outline: 3px solid var(--rotary-focus);
	outline-offset: 4px;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 1100px) {
	.team-grid .collation-items-list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.team-grid .collation-items-list {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.team-grid .collation-item.team {
		border-radius: 30px;
	}

	.team-grid .collation-item.team .icon {
		width: 142px;
		height: 142px;
	}
}

@media (max-width: 420px) {
	.team-grid .collation-item.team {
		padding:
			1.15rem
			1rem
			1.3rem;
	}

	.team-grid .collation-item.team h2 {
		font-size: 1.35rem;
	}
}
 /* Begin CSS Part: Checkout */

 /* Begin CSS Part: Collation */
/* ==========================================
   SHREWSBURY SEVERN ROTARY
   TEAM MEMBER LAYOUT
========================================== */

/*
	Usage:

	.ww-page-section.team-member-layout
		> .i
			> first cell: portrait / .team-icon
			> second cell: name, role, contact details, role details

	This relies on .ww-page-section for the outer section spacing.
*/

.team-member-layout {
	position: relative;
	isolation: isolate;

	background:
		radial-gradient(
			circle at 10% 12%,
			rgba(247, 183, 49, 0.14),
			transparent 30%
		),
		radial-gradient(
			circle at 92% 18%,
			rgba(11, 74, 143, 0.10),
			transparent 34%
		),
		var(--rotary-page-bg);

	overflow: hidden;
}

/* Main profile grid */
.team-member-layout > .i {
	display: grid;
	grid-template-columns: minmax(260px, 0.36fr) minmax(0, 0.64fr);
	gap: clamp(1.5rem, 4vw, 3.5rem);
	align-items: start;

	width: min(100%, var(--rotary-container));
	margin-left: auto;
	margin-right: auto;
}

/* ==========================================
   LEFT PORTRAIT PANEL
========================================== */

.team-member-layout > .i > :first-child {
	position: relative;
	isolation: isolate;

	padding:
		clamp(1.25rem, 3vw, 1.75rem);

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,0.98),
			rgba(255,255,255,0.86)
		);

	border: 1px solid rgba(11, 74, 143, 0.12);
	border-radius: var(--rotary-radius-xl);

	box-shadow:
		0 30px 76px rgba(7, 52, 98, 0.12),
		0 12px 34px rgba(7, 52, 98, 0.07),
		inset 0 1px 0 rgba(255,255,255,0.72);

	overflow: hidden;
	backdrop-filter: blur(12px);
}

/* Portrait panel glow */
.team-member-layout > .i > :first-child::before {
	content: "";
	position: absolute;
	right: -78px;
	bottom: -78px;
	z-index: 1;

	width: 210px;
	height: 210px;

	background:
		radial-gradient(
			circle,
			rgba(247, 183, 49, 0.24),
			rgba(247, 183, 49, 0.08) 42%,
			transparent 68%
		);

	border-radius: 50%;

	pointer-events: none;
}

.team-member-layout .team-icon {
	position: relative;
	z-index: 2;

	width: 100%;
	margin: 0 !important;
	padding: clamp(0.65rem, 1.8vw, 0.95rem);

	background:
		linear-gradient(
			135deg,
			var(--rotary-gold),
			var(--rotary-burgundy)
		);

	border-radius: calc(var(--rotary-radius-xl) - 10px);

	box-shadow:
		0 22px 54px rgba(7, 52, 98, 0.16);

	overflow: hidden;
}

/* Gloss over portrait */
.team-member-layout .team-icon::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;

	background:
		linear-gradient(
			135deg,
			rgba(255,255,255,0.28),
			rgba(255,255,255,0.04) 42%,
			rgba(4,31,61,0.10)
		);

	border-radius: inherit;

	pointer-events: none;
}

.team-member-layout .team-icon img {
	display: block;

	width: 100% !important;
	height: auto !important;

	aspect-ratio: 1 / 1;
	object-fit: cover;
	object-position: center top;

	background: var(--rotary-white);

	border: 8px solid rgba(255,255,255,0.92);
	border-radius: calc(var(--rotary-radius-xl) - 16px);

	box-shadow:
		0 16px 34px rgba(7, 52, 98, 0.16);
}

/* ==========================================
   RIGHT PROFILE PANEL
========================================== */

.team-member-layout > .i > :last-child {
	position: relative;
	isolation: isolate;

	padding:
		clamp(1.75rem, 4vw, 3.25rem)
		clamp(1.35rem, 4vw, 3rem);

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,0.98),
			rgba(255,255,255,0.88)
		);

	border: 1px solid rgba(11, 74, 143, 0.12);
	border-radius: var(--rotary-radius-xl);

	box-shadow:
		0 30px 76px rgba(7, 52, 98, 0.12),
		0 12px 34px rgba(7, 52, 98, 0.07),
		inset 0 1px 0 rgba(255,255,255,0.72);

	overflow: hidden;
	backdrop-filter: blur(12px);
}

/* Subtle shine */
.team-member-layout > .i > :last-child::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: 1;

	height: 38%;

	background:
		linear-gradient(
			180deg,
			rgba(255,255,255,0.62),
			rgba(255,255,255,0)
		);

	pointer-events: none;
}

/* Gold/burgundy glow */
.team-member-layout > .i > :last-child::after {
	content: "";
	position: absolute;
	right: -90px;
	bottom: -90px;
	z-index: 1;

	width: 250px;
	height: 250px;

	background:
		radial-gradient(
			circle,
			rgba(247, 183, 49, 0.20),
			rgba(247, 183, 49, 0.08) 42%,
			transparent 68%
		);

	border-radius: 50%;

	pointer-events: none;
}

/* Keep right-panel components above decoration */
.team-member-layout > .i > :last-child > * {
	position: relative;
	z-index: 2;
}

/* ==========================================
   NAME / ROLE
========================================== */

.team-member-layout .name {
	margin: 0 !important;
	padding: 0 !important;
}

.team-member-layout .name h1 {
	margin:
		0
		0
		clamp(0.75rem, 2vw, 1rem);

	color: var(--rotary-blue-dark);

	font-size: clamp(2.5rem, 6vw, 5.25rem);
	font-weight: 950;
	line-height: 0.95;
	letter-spacing: -0.07em;

	text-wrap: balance;
}

.team-member-layout .name h1::after {
	content: "";
	display: block;

	width: 92px;
	height: 6px;
	margin-top: clamp(1rem, 2vw, 1.25rem);

	background:
		linear-gradient(
			90deg,
			var(--rotary-gold),
			var(--rotary-burgundy)
		);

	border-radius: 999px;
}

/* Role badge */
.team-member-layout .detail.role {
	margin-bottom: clamp(1.1rem, 3vw, 1.65rem);
}

.team-member-layout .detail.role h3 {
	display: inline-flex;
	align-items: center;

	margin: 0;
	padding: 0.65rem 1rem;

	background:
		linear-gradient(
			135deg,
			var(--rotary-blue),
			var(--rotary-blue-dark)
		);

	color: var(--rotary-white);

	border-radius: 999px;

	box-shadow:
		0 12px 28px rgba(11, 74, 143, 0.20);

	font-size: clamp(1rem, 1.5vw, 1.18rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.01em;
}

/* ==========================================
   CONTACT DETAILS
========================================== */

.team-member-layout .detail.tel,
.team-member-layout .detail.mail {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr);
	gap: 0.45rem 0.75rem;
	align-items: baseline;

	width: min(100%, 620px);
	margin-bottom: 0.75rem;
	padding:
		0.95rem
		1rem;

	background:
		linear-gradient(
			135deg,
			var(--rotary-blue-soft),
			rgba(255,255,255,0.84)
		);

	border: 1px solid rgba(11, 74, 143, 0.13);
	border-radius: var(--rotary-radius-md);

	color: var(--rotary-blue-dark);

	box-shadow:
		0 12px 28px rgba(7, 52, 98, 0.06),
		inset 0 1px 0 rgba(255,255,255,0.70);

	font-size: clamp(1rem, 1.15vw, 1.08rem);
	font-weight: 750;
	line-height: 1.35;
}

.team-member-layout .detail label {
	margin: 0;

	color: var(--rotary-blue);

	font-size: 0.88rem;
	font-weight: 950;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.075em;
}

/* ==========================================
   ROLE DETAILS
========================================== */

.team-member-layout .role-details {
	position: relative;

	width: min(100%, 760px);
	margin-top: clamp(1.2rem, 3vw, 2rem);
	padding:
		clamp(1.25rem, 3vw, 1.75rem)
		clamp(1.15rem, 3vw, 1.65rem);

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,0.92),
			rgba(234,242,251,0.80)
		);

	border: 1px solid rgba(11, 74, 143, 0.13);
	border-radius: var(--rotary-radius-lg);

	box-shadow:
		0 16px 38px rgba(7, 52, 98, 0.07),
		inset 0 1px 0 rgba(255,255,255,0.72);
}

.team-member-layout .role-details::before {
	content: "";
	display: block;

	width: 64px;
	height: 5px;
	margin-bottom: 1rem;

	background:
		linear-gradient(
			90deg,
			var(--rotary-gold),
			var(--rotary-burgundy)
		);

	border-radius: 999px;
}

.team-member-layout .role-details p {
	max-width: 68ch;
	margin-bottom: 0.85rem;

	color: var(--rotary-text);

	font-size: clamp(1rem, 1.15vw, 1.1rem);
	line-height: 1.72;
}

.team-member-layout .role-details p:last-child {
	margin-bottom: 0;
}

/* Hide empty optional areas */
.team-member-layout .empty,
.team-member-layout .additional-role-info.empty {
	display: none !important;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 980px) {
	.team-member-layout > .i {
		grid-template-columns: 1fr;
	}

	.team-member-layout > .i > :first-child {
		width: min(100%, 420px);
		margin-left: auto;
		margin-right: auto;
	}

	.team-member-layout > .i > :last-child {
		text-align: left;
	}

	.team-member-layout .team-icon img {
		max-height: 420px;
		object-fit: cover;
	}

	.team-member-layout .role-details {
		width: 100%;
	}
}

@media (max-width: 640px) {
	.team-member-layout > .i {
		gap: 1.25rem;
	}

	.team-member-layout > .i > :first-child,
	.team-member-layout > .i > :last-child {
		border-radius: 30px;
	}

	.team-member-layout > .i > :last-child {
		padding:
			clamp(1.5rem, 7vw, 2.25rem)
			clamp(1rem, 6vw, 1.45rem);
	}

	.team-member-layout .team-icon {
		border-radius: 24px;
	}

	.team-member-layout .team-icon img {
		border-width: 6px;
		border-radius: 18px;
	}

	.team-member-layout .name h1 {
		font-size: clamp(2.35rem, 13vw, 3.65rem);
		letter-spacing: -0.055em;
	}

	.team-member-layout .detail.tel,
	.team-member-layout .detail.mail {
		grid-template-columns: 1fr;
		gap: 0.35rem;
	}

	.team-member-layout .role-details {
		border-radius: 26px;
	}
}
 /* Begin CSS Part: Collation Admin */

 /* Begin CSS Part: Cookies */


 /* Begin CSS Part: Crm */

 /* Begin CSS Part: Currency Converter */

 /* Begin CSS Part: Discount */

 /* Begin CSS Part: Email Template */

 /* Begin CSS Part: Form */

 /* Begin CSS Part: Google Analytics */

 /* Begin CSS Part: Home */

/* ==========================================
   SHREWSBURY SEVERN ROTARY
   SERVICE BLOCKS
========================================== */

.ww-page-section.service-blocks {
	position: relative;
	isolation: isolate;

	width: 100%;
	padding:
		clamp(3rem, 7vw, 6rem)
		var(--rotary-gutter);

	overflow: hidden;
}

/* Inner section wrapper */
.ww-page-section.service-blocks > .i {
	position: relative;
	z-index: 2;

	width: min(100%, var(--rotary-container));
	margin-left: auto;
	margin-right: auto;
}

/* Card collection shell */
.service-blocks .ww-card-collection {
	position: relative;
	width: 100%;
}

/* The actual card grid lives inside the collection wrapper */
.service-blocks .ww-card-collection > .i {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: clamp(1.15rem, 2.6vw, 1.9rem);

	width: 100%;
}

/* Individual cards */
.service-blocks .ww-card-collection > .i > * {
	position: relative;

	display: flex !important;
	flex-direction: column;

	width: auto !important;
	min-width: 0 !important;
	max-width: none !important;
	margin: 0 !important;
	padding: 0 !important;

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,0.98),
			rgba(255,255,255,0.88)
		);

	border: 1px solid rgba(11, 74, 143, 0.12);
	border-radius: var(--rotary-radius-lg);

	box-shadow:
		0 24px 56px rgba(7, 52, 98, 0.10),
		0 10px 24px rgba(7, 52, 98, 0.06),
		inset 0 1px 0 rgba(255,255,255,0.72);

	overflow: hidden;

	transition:
		transform var(--rotary-transition),
		box-shadow var(--rotary-transition),
		border-color var(--rotary-transition);
}

.service-blocks .ww-card-collection > .i > *:hover {
	transform: translateY(-8px);

	border-color: rgba(247, 183, 49, 0.50);

	box-shadow:
		0 34px 76px rgba(7, 52, 98, 0.15),
		0 16px 36px rgba(7, 52, 98, 0.09),
		inset 0 1px 0 rgba(255,255,255,0.82);
}

/* Image topper */
.service-blocks .component-topper {
	position: relative;

	width: 100%;
	aspect-ratio: 5 / 3;

	background: var(--rotary-blue-soft);

	overflow: hidden;
}

.service-blocks .component-topper p {
	width: 100%;
	height: 100%;
	margin: 0;
}

.service-blocks .component-topper img {
	display: block;

	width: 100% !important;
	height: 100% !important;

	object-fit: cover;
	object-position: center;

	padding: 0 !important;
	transform: scale(1.01);

	transition:
		transform 420ms ease,
		filter 420ms ease;
}

.service-blocks .ww-card-collection > .i > *:hover .component-topper img {
	transform: scale(1.07);
	filter: saturate(1.05) contrast(1.04);
}

/* Image wash */
.service-blocks .component-topper::after {
	content: "";
	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			180deg,
			rgba(4, 31, 61, 0.02) 0%,
			rgba(4, 31, 61, 0.24) 100%
		);

	pointer-events: none;
}

/* Card content */
.service-blocks .ww-card-collection > .i > * > h2,
.service-blocks .ww-card-collection > .i > * > label,
.service-blocks .ww-card-collection > .i > * > .content {
	position: relative;
	z-index: 2;

	margin-left: clamp(1.2rem, 2.6vw, 1.55rem);
	margin-right: clamp(1.2rem, 2.6vw, 1.55rem);
}

.service-blocks .ww-card-collection > .i > * > h2 {
	margin-top: clamp(1.25rem, 2.8vw, 1.65rem);
	margin-bottom: 0.45rem;

	color: var(--rotary-blue-dark);

	font-size: clamp(1.55rem, 2.5vw, 2.35rem);
	font-weight: 900;
	line-height: 1.02;
	letter-spacing: -0.055em;

	text-wrap: balance;
}

.service-blocks .ww-card-collection > .i > * > h2::after {
	content: "";
	display: block;

	width: 58px;
	height: 4px;
	margin-top: 0.7rem;

	background:
		linear-gradient(
			90deg,
			var(--rotary-gold),
			var(--rotary-burgundy)
		);

	border-radius: 999px;
}

.service-blocks .ww-card-collection > .i > * > label {
	display: block;

	margin-bottom: 1rem;

	color: var(--rotary-muted);

	font-size: 0.98rem;
	font-weight: 750;
	line-height: 1.35;
}

.service-blocks .ww-card-collection > .i > * > .content {
	margin-top: auto;
	margin-bottom: clamp(1.2rem, 2.6vw, 1.55rem);

	padding-top: 0.4rem;
}

.service-blocks .ww-card-collection > .i > * > .content p {
	margin: 0;

	color: var(--rotary-blue);

	font-size: 0.9rem;
	font-weight: 900;
	line-height: 1.2;
	text-transform: uppercase;
	letter-spacing: 0.065em;
}

.service-blocks .ww-card-collection > .i > * > .content strong {
	font-weight: 900;
}

/* Soft card glow */
.service-blocks .ww-card-collection > .i > *::before {
	content: "";
	position: absolute;
	right: -60px;
	bottom: -60px;
	z-index: 1;

	width: 155px;
	height: 155px;

	background:
		radial-gradient(
			circle,
			rgba(247, 183, 49, 0.20),
			transparent 66%
		);

	border-radius: 50%;

	pointer-events: none;
}

/* Full card link */
.service-blocks .inflate {
	position: absolute !important;
	inset: 0 !important;
	z-index: 20 !important;

	display: block !important;

	color: transparent !important;
	text-indent: -9999px !important;
	overflow: hidden !important;
}

.service-blocks .ww-card-collection > .i > *:focus-within {
	outline: 3px solid var(--rotary-focus);
	outline-offset: 4px;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 980px) {
	.service-blocks .ww-card-collection > .i {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 700px) {
	.ww-page-section.service-blocks {
		padding:
			clamp(2.5rem, 9vw, 4rem)
			var(--rotary-gutter);
	}

	.service-blocks .ww-card-collection > .i {
		grid-template-columns: 1fr;
		gap: 1.25rem;
	}

	.service-blocks .ww-card-collection > .i > * {
		border-radius: 30px;
	}

	.service-blocks .component-topper {
		aspect-ratio: 16 / 9;
	}
}

@media (max-width: 460px) {
	.service-blocks .ww-card-collection > .i > * > h2,
	.service-blocks .ww-card-collection > .i > * > label,
	.service-blocks .ww-card-collection > .i > * > .content {
		margin-left: 1.1rem;
		margin-right: 1.1rem;
	}
}







 /* Begin CSS Part: Memorial */
/* =========================================================
   SHREWSBURY SEVERN ROTARY
   TREE OF LIGHT STYLING
   Scoped version for pages using body.tol-page
========================================================= */

body.tol-page {
	--tol-blue: #15548f;
	--tol-blue-dark: #0c345e;
	--tol-blue-deep: #082848;
	--tol-gold: #f7d76a;
	--tol-gold-strong: #f5be35;
	--tol-gold-soft: #fff3bd;
	--tol-white: #ffffff;
	--tol-ice: #eaf6ff;
	--tol-text: #16324f;
	--tol-muted: #65758a;
	--tol-shadow: 0 18px 45px rgba(0,0,0,0.25);
}


/* =========================================================
   SAFE GALLERY COSMETICS ONLY
   Do not control gallery width, slide display, overflow or image sizing.
   EOS handles those mechanics.
========================================================= */

body.tol-page .gallery-tree .gallery-arrow-left,
body.tol-page .gallery-tree .gallery-arrow-right {
	z-index: 25 !important;

	width: 46px !important;
	height: 46px !important;
	border-radius: 50% !important;

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

	background: rgba(255,255,255,0.7) !important;
	color: var(--tol-blue-dark) !important;

	font-size: 26px !important;
	font-weight: 700 !important;
	line-height: 1 !important;

	box-shadow: 0 10px 28px rgba(0,0,0,0.22) !important;
	cursor: pointer !important;

	transition:
		transform 0.25s ease,
		background 0.25s ease,
		color 0.25s ease !important;
}

body.tol-page .gallery-tree .gallery-arrow-left:hover,
body.tol-page .gallery-tree .gallery-arrow-right:hover {
	background: var(--tol-gold) !important;
	color: var(--tol-blue-deep) !important;
	transform: scale(1.08) !important;
}

body.tol-page .gallery-tree .collation-item-thumbs {
	display: flex !important;
	justify-content: center !important;
	gap: 12px !important;
	margin-top: 18px !important;
	padding: 0 !important;
}

body.tol-page .gallery-tree .image-thumb {
	width: 72px !important;
	height: 72px !important;
	border-radius: 16px !important;

	overflow: hidden !important;
	border: 3px solid rgba(21,84,143,0.15) !important;
	background: var(--tol-white) !important;

	box-shadow: 0 8px 24px rgba(0,0,0,0.12) !important;
	cursor: pointer !important;

	transition:
		transform 0.25s ease,
		border-color 0.25s ease,
		box-shadow 0.25s ease !important;
}

body.tol-page .gallery-tree .image-thumb:hover {
	transform: translateY(-3px) !important;
	border-color: var(--tol-gold) !important;
	box-shadow: 0 12px 30px rgba(0,0,0,0.18) !important;
}

body.tol-page .gallery-tree .image-thumb img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover !important;
	display: block !important;
}


/* =========================================================
   MEMORIAL LEAF BASE
========================================================= */

body.tol-page .gallery-tree .memorial-leaf {
	position: absolute !important;
	z-index: 10 !important;
	box-sizing: border-box !important;

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

	border-radius: 50% !important;
	cursor: pointer !important;

	font-family: inherit !important;
	text-align: center !important;

	overflow: visible !important;

	transition:
		transform 0.22s ease,
		box-shadow 0.22s ease,
		background 0.22s ease,
		border-color 0.22s ease,
		opacity 0.22s ease !important;
}

body.tol-page .gallery-tree .memorial-leaf::before,
body.tol-page .gallery-tree .memorial-leaf::after {
	content: "" !important;
	position: absolute !important;
	inset: 0 !important;
	border-radius: 50% !important;
	pointer-events: none !important;
}

body.tol-page .gallery-tree .memorial-leaf .leaf-name {
	position: relative !important;
	z-index: 2 !important;
	max-width: 92% !important;
	padding: 0 4px !important;

	color: var(--tol-blue-deep) !important;
	font-size: clamp(8px, 0.7vw, 12px) !important;
	font-weight: 700 !important;
	line-height: 1.05 !important;
	letter-spacing: -0.02em !important;

	overflow: hidden !important;
	text-overflow: ellipsis !important;
	display: -webkit-box !important;
	-webkit-line-clamp: 2 !important;
	-webkit-box-orient: vertical !important;
}


/* =========================================================
   AVAILABLE LEAF STATE
========================================================= */

body.tol-page .gallery-tree .memorial-leaf.available {
	background: radial-gradient(circle at 35% 30%,
		rgba(255,255,255,0.28),
		rgba(255,255,255,0.08) 48%,
		rgba(247,215,106,0.1) 100%
	) !important;

	border: 2px solid rgba(255,255,255,0.72) !important;

	box-shadow:
		0 0 0 1px rgba(247,215,106,0.25),
		0 0 20px rgba(255,255,255,0.2),
		inset 0 0 14px rgba(255,255,255,0.22) !important;

	opacity: 0.86 !important;
}

body.tol-page .gallery-tree .memorial-leaf.available::before {
	border: 1px dashed rgba(247,215,106,0.75) !important;
	transform: scale(1.12) !important;
	opacity: 0 !important;
	transition:
		opacity 0.22s ease,
		transform 0.22s ease !important;
}

body.tol-page .gallery-tree .memorial-leaf.available::after {
	background: radial-gradient(circle,
		rgba(247,215,106,0.36) 0%,
		rgba(247,215,106,0.08) 42%,
		rgba(247,215,106,0) 70%
	) !important;
	opacity: 0 !important;
	transform: scale(1.2) !important;
	transition: opacity 0.22s ease !important;
}

body.tol-page .gallery-tree .memorial-leaf.available:hover,
body.tol-page .gallery-tree .memorial-leaf.available:focus-visible {
	transform: scale(1.12) !important;
	opacity: 1 !important;

	border-color: var(--tol-gold-soft) !important;

	background: radial-gradient(circle at 35% 30%,
		rgba(255,255,255,0.62),
		rgba(247,215,106,0.28) 54%,
		rgba(247,215,106,0.14) 100%
	) !important;

	box-shadow:
		0 0 0 3px rgba(247,215,106,0.28),
		0 0 28px rgba(247,215,106,0.7),
		inset 0 0 14px rgba(255,255,255,0.4) !important;
}

body.tol-page .gallery-tree .memorial-leaf.available:hover::before,
body.tol-page .gallery-tree .memorial-leaf.available:focus-visible::before {
	opacity: 1 !important;
	transform: scale(1.24) !important;
}

body.tol-page .gallery-tree .memorial-leaf.available:hover::after,
body.tol-page .gallery-tree .memorial-leaf.available:focus-visible::after {
	opacity: 1 !important;
}

body.tol-page .gallery-tree .memorial-leaf.available .leaf-name,
body.tol-page .gallery-tree .memorial-leaf.available .leaf-content {
	display: none !important;
}

@keyframes tolAvailablePulse {
	0%, 100% {
		box-shadow:
			0 0 0 1px rgba(247,215,106,0.25),
			0 0 18px rgba(255,255,255,0.2),
			inset 0 0 14px rgba(255,255,255,0.22);
	}

	50% {
		box-shadow:
			0 0 0 3px rgba(247,215,106,0.18),
			0 0 26px rgba(247,215,106,0.38),
			inset 0 0 16px rgba(255,255,255,0.32);
	}
}

body.tol-page .gallery-tree .memorial-leaf.available.initialised {
	animation: tolAvailablePulse 3.8s ease-in-out infinite !important;
}


/* =========================================================
   TAKEN LEAF STATE
========================================================= */

body.tol-page .gallery-tree .memorial-leaf.taken {
	background: radial-gradient(circle at 35% 28%,
		#ffffff 0%,
		#fff4bf 32%,
		#f4cc54 68%,
		#dba42b 100%
	) !important;

	border: 2px solid rgba(255,255,255,0.95) !important;

	box-shadow:
		0 0 0 2px rgba(247,215,106,0.3),
		0 0 22px rgba(247,215,106,0.72),
		inset 0 0 12px rgba(255,255,255,0.72),
		inset -6px -8px 16px rgba(116,77,0,0.18) !important;

	opacity: 1 !important;
	overflow: visible !important;
}

/* Soft outer glow */
body.tol-page .gallery-tree .memorial-leaf.taken::before {
	inset: -5px !important;
	border: 1px solid rgba(247,215,106,0.55) !important;
	box-shadow: 0 0 18px rgba(247,215,106,0.35) !important;
}

/* Bauble shine */
body.tol-page .gallery-tree .memorial-leaf.taken::after {
	background: radial-gradient(circle at 30% 24%,
		rgba(255,255,255,0.8) 0%,
		rgba(255,255,255,0.2) 22%,
		rgba(255,255,255,0) 48%
	) !important;
	opacity: 0.85 !important;
}

/* Show full name as a one-line label on the bauble.
   This intentionally allows the label to extend beyond the small bauble. */
body.tol-page .gallery-tree .memorial-leaf.taken > .leaf-name {
	position: absolute !important;
	left: 50% !important;
	top: 50% !important;
	z-index: 6 !important;

	display: block !important;
	width: max-content !important;
	min-width: max-content !important;
	max-width: none !important;

	padding: 2px 6px !important;
	margin: 0 !important;

	transform: translate(-50%, -50%) !important;

	color: var(--tol-blue-deep) !important;
	background: rgba(255,255,255,0.88) !important;
	border: 1px solid rgba(255,255,255,0.9) !important;
	border-radius: 999px !important;

	font-size: clamp(7px, 0.58vw, 12px) !important;
	font-weight: 900 !important;
	line-height: 1 !important;
	letter-spacing: -0.03em !important;
	text-align: center !important;
	text-shadow: 0 1px 1px rgba(255,255,255,0.85) !important;

	white-space: nowrap !important;
	overflow: visible !important;
	text-overflow: clip !important;

	-webkit-line-clamp: unset !important;
	-webkit-box-orient: unset !important;

	box-shadow:
		0 2px 8px rgba(8,40,72,0.18),
		0 0 10px rgba(247,215,106,0.35) !important;

	pointer-events: none !important;
}

body.tol-page .gallery-tree .memorial-leaf.taken:hover,
body.tol-page .gallery-tree .memorial-leaf.taken:focus-visible,
body.tol-page .gallery-tree .memorial-leaf.taken:active {
	z-index: 999 !important;
	transform: scale(1.14) !important;

	box-shadow:
		0 0 0 4px rgba(255,255,255,0.2),
		0 0 34px rgba(247,215,106,0.95),
		inset 0 0 14px rgba(255,255,255,0.86),
		inset -6px -8px 16px rgba(116,77,0,0.18) !important;
}

body.tol-page .gallery-tree .memorial-leaf.taken:hover > .leaf-name,
body.tol-page .gallery-tree .memorial-leaf.taken:focus-visible > .leaf-name,
body.tol-page .gallery-tree .memorial-leaf.taken:active > .leaf-name {
	background: rgba(255,255,255,0.96) !important;
	box-shadow:
		0 4px 14px rgba(8,40,72,0.24),
		0 0 16px rgba(247,215,106,0.58) !important;
}


/* =========================================================
   TREE OF LIGHT TOOLTIP / HOVER DEDICATION
   jQuery UI creates this dynamically on hover and appends it to body.
========================================================= */

body.tol-page .ui-tooltip,
body.tol-page .ui-tooltip.ui-widget,
body.tol-page .ui-tooltip.ui-widget-content,
html body.tol-page div.ui-tooltip.ui-widget.ui-widget-content {
	position: absolute !important;
	z-index: 999999 !important;

	width: min(380px, 84vw) !important;
	max-width: 380px !important;
	min-width: 260px !important;

	padding: 0 !important;
	border: 0 !important;
	border-radius: 22px !important;

	background: transparent !important;
	box-shadow: none !important;

	color: var(--tol-text) !important;
	font-family: inherit !important;

	pointer-events: none !important;
}

body.tol-page .ui-tooltip .ui-tooltip-content,
html body.tol-page div.ui-tooltip.ui-widget .ui-tooltip-content {
	position: relative !important;

	width: 100% !important;
	max-width: 100% !important;

	padding: 20px !important;
	border-radius: 22px !important;

	background:
		radial-gradient(circle at 15% 0%, rgba(247,215,106,0.24), transparent 38%),
		linear-gradient(180deg, rgba(255,255,255,0.99), rgba(245,250,255,0.99)) !important;

	color: var(--tol-text) !important;

	border: 1px solid rgba(21,84,143,0.14) !important;

	box-shadow:
		0 24px 58px rgba(0,0,0,0.34),
		0 0 0 1px rgba(255,255,255,0.55) inset !important;

	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.5 !important;
	text-align: center !important;
	white-space: normal !important;

	box-sizing: border-box !important;
	overflow: visible !important;
}

body.tol-page .ui-tooltip .ui-tooltip-content::before {
	content: "" !important;
	position: absolute !important;
	left: 50% !important;
	bottom: -9px !important;
	transform: translateX(-50%) rotate(45deg) !important;

	width: 18px !important;
	height: 18px !important;

	background: rgba(245,250,255,0.99) !important;
	border-right: 1px solid rgba(21,84,143,0.14) !important;
	border-bottom: 1px solid rgba(21,84,143,0.14) !important;
}

/* In case EOS injects an extra wrapper div inside the tooltip */
body.tol-page .ui-tooltip .ui-tooltip-content > div {
	display: block !important;
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
	color: inherit !important;
	font: inherit !important;
	text-align: center !important;
	box-sizing: border-box !important;
}


/* =========================================================
   TOOLTIP DEDICATION NAME
   Full-width block so it never shares the line with image/text.
========================================================= */

body.tol-page .ui-tooltip .leaf-name,
body.tol-page .ui-tooltip .ui-tooltip-content .leaf-name,
html body.tol-page div.ui-tooltip.ui-widget .ui-tooltip-content .leaf-name {
	display: block !important;

	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;

	margin: 0 0 15px !important;
	padding: 10px 15px !important;

	color: var(--tol-blue-deep) !important;

	background:
		linear-gradient(135deg, rgba(247,215,106,0.95), rgba(255,243,189,0.95)) !important;

	border: 1px solid rgba(219,164,43,0.42) !important;
	border-radius: 14px !important;

	font-size: 19px !important;
	font-weight: 900 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.03em !important;
	text-shadow: 0 1px 1px rgba(255,255,255,0.7) !important;

	text-align: center !important;
	white-space: normal !important;

	overflow: visible !important;
	text-overflow: unset !important;
	-webkit-line-clamp: unset !important;
	-webkit-box-orient: unset !important;

	float: none !important;
	clear: both !important;
}


/* =========================================================
   TOOLTIP DEDICATION IMAGE
   Forced square image so the hover bauble is a true circle.
========================================================= */

body.tol-page .ui-tooltip img,
body.tol-page .ui-tooltip .ui-tooltip-content img,
body.tol-page .ui-tooltip .ui-tooltip-content img[style],
html body.tol-page div.ui-tooltip.ui-widget.ui-widget-content .ui-tooltip-content img[style] {
	display: block !important;

	width: 144px !important;
	height: 144px !important;

	min-width: 144px !important;
	min-height: 144px !important;
	max-width: 144px !important;
	max-height: 144px !important;

	aspect-ratio: 1 / 1 !important;
	object-fit: cover !important;
	object-position: center center !important;

	margin: 0 auto 15px !important;
	padding: 0 !important;

	border-radius: 50% !important;
	border: 6px solid var(--tol-white) !important;

	background: #f5f8fb !important;

	box-shadow:
		0 0 0 2px rgba(247,215,106,0.85),
		0 14px 34px rgba(0,0,0,0.24) !important;

	float: none !important;
	clear: both !important;
	transform: none !important;
	vertical-align: middle !important;
}

body.tol-page .ui-tooltip br {
	display: none !important;
}

body.tol-page .ui-tooltip p,
body.tol-page .ui-tooltip div {
	box-sizing: border-box !important;
}


/* =========================================================
   POPUP / CLAIM LEAF DIALOG
========================================================= */

body.tol-page .ui-widget-overlay {
	position: fixed !important;
	inset: 0 !important;

	background: rgba(8,40,72,0.72) !important;
	backdrop-filter: blur(4px) !important;

	z-index: 9998 !important;
}

body.tol-page .ui-dialog.ui-widget.ui-widget-content {
	position: fixed !important;
	top: 50% !important;
	left: 50% !important;
	transform: translate(-50%, -50%) !important;

	width: min(92vw, 540px) !important;
	max-width: 540px !important;
	min-width: 0 !important;
	height: auto !important;

	padding: 0 !important;
	border: 0 !important;
	border-radius: 24px !important;
	overflow: hidden !important;

	background: var(--tol-white) !important;
	color: var(--tol-text) !important;

	box-shadow: var(--tol-shadow) !important;

	font-family: inherit !important;
	z-index: 9999 !important;
}

body.tol-page .ui-dialog .ui-dialog-titlebar {
	position: relative !important;
	min-height: 62px !important;

	padding: 18px 64px 16px 24px !important;
	border: 0 !important;
	border-radius: 0 !important;

	background:
		radial-gradient(circle at 16% 30%, rgba(247,215,106,0.35), transparent 30%),
		linear-gradient(135deg, var(--tol-blue-dark), var(--tol-blue)) !important;

	color: var(--tol-white) !important;
}

body.tol-page .ui-dialog .ui-dialog-titlebar::before {
	content: "Add your dedication" !important;
	display: block !important;

	color: var(--tol-white) !important;

	font-size: 22px !important;
	font-weight: 800 !important;
	line-height: 1.15 !important;
	letter-spacing: -0.03em !important;
}

body.tol-page .ui-dialog .ui-dialog-titlebar::after {
	content: "Choose a decoration, add your message, then continue to donation." !important;
	display: block !important;
	margin-top: 5px !important;

	color: rgba(255,255,255,0.82) !important;

	font-size: 13px !important;
	font-weight: 500 !important;
	line-height: 1.35 !important;
}

body.tol-page .ui-dialog .ui-dialog-title {
	display: none !important;
}

body.tol-page .ui-dialog .ui-dialog-titlebar-close {
	position: absolute !important;
	top: 16px !important;
	right: 18px !important;

	width: 36px !important;
	height: 36px !important;
	margin: 0 !important;
	padding: 0 !important;

	border: 1px solid rgba(255,255,255,0.45) !important;
	border-radius: 50% !important;

	background: rgba(255,255,255,0.12) !important;
	color: var(--tol-white) !important;

	text-indent: -9999px !important;
	overflow: hidden !important;
	cursor: pointer !important;

	transition:
		background 0.2s ease,
		transform 0.2s ease !important;
}

body.tol-page .ui-dialog .ui-dialog-titlebar-close::before {
	content: "×" !important;
	position: absolute !important;
	inset: 0 !important;

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

	text-indent: 0 !important;
	color: var(--tol-white) !important;

	font-size: 28px !important;
	font-weight: 300 !important;
	line-height: 1 !important;
}

body.tol-page .ui-dialog .ui-dialog-titlebar-close:hover {
	background: rgba(255,255,255,0.24) !important;
	transform: rotate(4deg) scale(1.06) !important;
}

body.tol-page .ui-dialog .ui-button-icon,
body.tol-page .ui-dialog .ui-button-icon-space,
body.tol-page .ui-dialog .ui-icon {
	display: none !important;
}

body.tol-page .ui-dialog .ui-dialog-content {
	width: auto !important;
	height: auto !important;
	max-height: min(78vh, 760px) !important;

	padding: 0 !important;
	overflow-y: auto !important;

	background: linear-gradient(180deg, #ffffff, #f7fbff) !important;
	color: var(--tol-text) !important;
}


/* =========================================================
   CLAIM FORM CONTENT
========================================================= */

body.tol-page .claim-leaf {
	padding: 24px !important;
	text-align: left !important;

	color: var(--tol-text) !important;
	font-family: inherit !important;
}

body.tol-page .claim-leaf,
body.tol-page .claim-leaf * {
	box-sizing: border-box !important;
}

body.tol-page .claim-leaf > div {
	margin: 0 0 18px !important;
}

body.tol-page .claim-leaf label,
body.tol-page .claim-leaf .label,
body.tol-page .claim-leaf .option-label {
	display: block !important;
	margin: 0 0 7px !important;

	color: var(--tol-blue-dark) !important;

	font-size: 14px !important;
	font-weight: 800 !important;
	line-height: 1.35 !important;
}

body.tol-page .claim-leaf .product-option {
	margin: 0 0 17px !important;
	padding: 0 !important;
}

body.tol-page .claim-leaf .content {
	width: 100% !important;
}

body.tol-page .claim-leaf input[type="text"],
body.tol-page .claim-leaf input[type="email"],
body.tol-page .claim-leaf input[type="tel"],
body.tol-page .claim-leaf input[type="number"],
body.tol-page .claim-leaf select,
body.tol-page .claim-leaf textarea {
	display: block !important;

	width: 100% !important;
	max-width: 100% !important;
	min-height: 46px !important;

	margin: 0 !important;
	padding: 12px 14px !important;

	border: 1px solid rgba(21,84,143,0.22) !important;
	border-radius: 12px !important;

	background: var(--tol-white) !important;
	color: var(--tol-text) !important;

	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.4 !important;

	box-shadow: inset 0 1px 3px rgba(0,0,0,0.04) !important;
	outline: none !important;

	transition:
		border-color 0.2s ease,
		box-shadow 0.2s ease,
		background 0.2s ease !important;
}

body.tol-page .claim-leaf textarea {
	min-height: 118px !important;
	resize: vertical !important;
}

body.tol-page .claim-leaf input[type="text"]:focus,
body.tol-page .claim-leaf input[type="email"]:focus,
body.tol-page .claim-leaf input[type="tel"]:focus,
body.tol-page .claim-leaf input[type="number"]:focus,
body.tol-page .claim-leaf select:focus,
body.tol-page .claim-leaf textarea:focus {
	border-color: var(--tol-blue) !important;
	background: #ffffff !important;

	box-shadow:
		0 0 0 3px rgba(21,84,143,0.12),
		inset 0 1px 3px rgba(0,0,0,0.04) !important;
}

body.tol-page .claim-leaf select {
	appearance: none !important;

	background-image:
		linear-gradient(45deg, transparent 50%, var(--tol-blue-dark) 50%),
		linear-gradient(135deg, var(--tol-blue-dark) 50%, transparent 50%) !important;
	background-position:
		calc(100% - 19px) 50%,
		calc(100% - 13px) 50% !important;
	background-size: 6px 6px, 6px 6px !important;
	background-repeat: no-repeat !important;

	padding-right: 42px !important;
}

body.tol-page .claim-leaf .checkbox-options {
	display: flex !important;
	flex-direction: column !important;
	gap: 8px !important;
}

body.tol-page .claim-leaf .checkbox {
	display: flex !important;
	align-items: center !important;
	gap: 10px !important;

	padding: 12px 14px !important;
	border-radius: 12px !important;

	background: rgba(21,84,143,0.06) !important;
	border: 1px solid rgba(21,84,143,0.12) !important;
}

body.tol-page .claim-leaf input[type="checkbox"] {
	width: 20px !important;
	height: 20px !important;
	margin: 0 !important;

	accent-color: var(--tol-blue) !important;
	cursor: pointer !important;
}

body.tol-page .claim-leaf .checkbox-label {
	margin: 0 !important;

	color: var(--tol-text) !important;

	font-size: 14px !important;
	font-weight: 650 !important;

	cursor: pointer !important;
}


/* =========================================================
   UPLOAD IMAGE AREA
========================================================= */

body.tol-page .claim-leaf .async-upload.button,
body.tol-page .claim-leaf a.async-upload.button {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 8px !important;

	width: 100% !important;
	min-height: 48px !important;

	margin: 0 0 12px !important;
	padding: 12px 18px !important;

	border: 2px dashed rgba(21,84,143,0.28) !important;
	border-radius: 14px !important;

	background: rgba(21,84,143,0.055) !important;
	color: var(--tol-blue-dark) !important;

	font-size: 15px !important;
	font-weight: 800 !important;
	text-decoration: none !important;

	box-shadow: none !important;
	cursor: pointer !important;

	transition:
		background 0.2s ease,
		border-color 0.2s ease,
		transform 0.2s ease !important;
}

body.tol-page .claim-leaf .async-upload.button::before {
	content: "＋" !important;

	font-size: 20px !important;
	font-weight: 600 !important;
	line-height: 1 !important;
}

body.tol-page .claim-leaf .async-upload.button:hover {
	background: rgba(247,215,106,0.18) !important;
	border-color: var(--tol-gold) !important;
	transform: translateY(-1px) !important;
}

body.tol-page .claim-leaf .auto-appended-async-upload input[type="file"],
body.tol-page .claim-leaf input[type="file"] {
	display: none !important;
}

body.tol-page .claim-leaf .progress-bar {
	position: relative !important;

	width: 100% !important;
	height: 8px !important;

	margin: 8px 0 12px !important;

	border-radius: 999px !important;
	background: rgba(21,84,143,0.12) !important;

	overflow: hidden !important;
}

body.tol-page .claim-leaf .progress-bar * {
	display: block !important;
	height: 100% !important;
	border-radius: 999px !important;
	background: var(--tol-gold) !important;
}

body.tol-page .claim-leaf .image-frame {
	margin: 10px auto 14px !important;
	border-radius: 16px !important;
	background:
		linear-gradient(135deg, rgba(21,84,143,0.08), rgba(247,215,106,0.12)) !important;
	border: 1px solid rgba(21,84,143,0.12) !important;
}

/* Keep EOS image/crop preview visible */
body.tol-page .claim-leaf .image-frame *,
body.tol-page .claim-leaf .image-frame img,
body.tol-page .claim-leaf .image-frame canvas,
body.tol-page .claim-leaf .image-frame picture,
body.tol-page .claim-leaf .image-frame .cropper-container,
body.tol-page .claim-leaf .image-frame .cropper-wrap-box,
body.tol-page .claim-leaf .image-frame .cropper-canvas {
	visibility: visible !important;
	opacity: 1 !important;
}

body.tol-page .claim-leaf .image-frame img {
	border-radius: 12px !important;
}

body.tol-page .claim-leaf .image-frame[style*="background-image"] {
	background-size: contain !important;
	background-position: center center !important;
	background-repeat: no-repeat !important;
}


/* =========================================================
   CLAIM FORM BUTTONS
========================================================= */

body.tol-page .claim-leaf a.button,
body.tol-page .claim-leaf .button,
body.tol-page .claim-leaf a.cancel,
body.tol-page .claim-leaf a.submit-claim {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	min-height: 48px !important;
	padding: 12px 20px !important;

	border-radius: 999px !important;
	border: 0 !important;

	font-family: inherit !important;
	font-size: 15px !important;
	font-weight: 800 !important;
	line-height: 1.2 !important;
	text-decoration: none !important;
	text-align: center !important;

	box-shadow: none !important;
	cursor: pointer !important;

	transition:
		transform 0.2s ease,
		box-shadow 0.2s ease,
		background 0.2s ease,
		color 0.2s ease !important;
}

body.tol-page .claim-leaf a.cancel {
	width: calc(40% - 6px) !important;
	margin-right: 8px !important;

	background: rgba(21,84,143,0.08) !important;
	color: var(--tol-blue-dark) !important;
}

body.tol-page .claim-leaf a.submit-claim {
	width: calc(60% - 6px) !important;

	background:
		linear-gradient(135deg, var(--tol-gold), var(--tol-gold-strong)) !important;

	color: var(--tol-blue-deep) !important;

	box-shadow: 0 10px 26px rgba(247,190,62,0.34) !important;
}

body.tol-page .claim-leaf a.cancel:hover,
body.tol-page .claim-leaf a.submit-claim:hover {
	transform: translateY(-2px) !important;
}

body.tol-page .claim-leaf a.cancel:hover {
	background: rgba(21,84,143,0.14) !important;
}

body.tol-page .claim-leaf a.submit-claim:hover {
	box-shadow: 0 14px 34px rgba(247,190,62,0.45) !important;
}


/* =========================================================
   RESPONSIVE
========================================================= */

@media (max-width: 900px) {
	body.tol-page .gallery-tree .gallery-arrow-left,
	body.tol-page .gallery-tree .gallery-arrow-right {
		width: 40px !important;
		height: 40px !important;
		font-size: 22px !important;
	}

	body.tol-page .gallery-tree .image-thumb {
		width: 58px !important;
		height: 58px !important;
		border-radius: 13px !important;
	}

	body.tol-page .gallery-tree .memorial-leaf.taken > .leaf-name {
		font-size: 8px !important;
		padding: 2px 5px !important;
	}

	body.tol-page .ui-tooltip,
	body.tol-page .ui-tooltip.ui-widget,
	body.tol-page .ui-tooltip.ui-widget-content {
		width: min(340px, 84vw) !important;
		min-width: 230px !important;
	}

	body.tol-page .ui-tooltip .ui-tooltip-content img,
	body.tol-page .ui-tooltip .ui-tooltip-content img[style] {
		width: 128px !important;
		height: 128px !important;
		min-width: 128px !important;
		min-height: 128px !important;
		max-width: 128px !important;
		max-height: 128px !important;
	}
}

@media (max-width: 640px) {
	body.tol-page .gallery-tree .collation-item-thumbs {
		gap: 8px !important;
		margin-top: 12px !important;
	}

	body.tol-page .gallery-tree .image-thumb {
		width: 48px !important;
		height: 48px !important;
	}

	body.tol-page .gallery-tree .memorial-leaf.available,
	body.tol-page .gallery-tree .memorial-leaf.taken {
		border-width: 1px !important;
	}

	body.tol-page .gallery-tree .memorial-leaf .leaf-name {
		font-size: 8px !important;
	}

	body.tol-page .gallery-tree .memorial-leaf.taken > .leaf-name {
		font-size: 7px !important;
		padding: 2px 4px !important;
	}

	body.tol-page .ui-tooltip,
	body.tol-page .ui-tooltip.ui-widget,
	body.tol-page .ui-tooltip.ui-widget-content {
		width: min(300px, 88vw) !important;
		min-width: 220px !important;
	}

	body.tol-page .ui-tooltip .ui-tooltip-content {
		padding: 16px !important;
	}

	body.tol-page .ui-tooltip .ui-tooltip-content .leaf-name {
		font-size: 16px !important;
		padding: 8px 12px !important;
	}

	body.tol-page .ui-tooltip .ui-tooltip-content img,
	body.tol-page .ui-tooltip .ui-tooltip-content img[style] {
		width: 110px !important;
		height: 110px !important;
		min-width: 110px !important;
		min-height: 110px !important;
		max-width: 110px !important;
		max-height: 110px !important;
	}

	body.tol-page .ui-dialog.ui-widget.ui-widget-content {
		width: calc(100vw - 24px) !important;
		max-height: calc(100vh - 24px) !important;
		border-radius: 20px !important;
	}

	body.tol-page .ui-dialog .ui-dialog-titlebar {
		padding: 16px 58px 14px 18px !important;
	}

	body.tol-page .ui-dialog .ui-dialog-titlebar::before {
		font-size: 20px !important;
	}

	body.tol-page .ui-dialog .ui-dialog-titlebar::after {
		font-size: 12px !important;
	}

	body.tol-page .claim-leaf {
		padding: 18px !important;
	}

	body.tol-page .claim-leaf .image-frame {
		min-height: 220px !important;
	}

	body.tol-page .claim-leaf a.cancel,
	body.tol-page .claim-leaf a.submit-claim {
		width: 100% !important;
		margin-right: 0 !important;
		margin-bottom: 10px !important;
	}

	body.tol-page .claim-leaf a.submit-claim {
		margin-bottom: 0 !important;
	}
}


/* =========================================================
   REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
	body.tol-page .gallery-tree .memorial-leaf,
	body.tol-page .gallery-tree .memorial-leaf::before,
	body.tol-page .gallery-tree .memorial-leaf::after,
	body.tol-page .gallery-tree .gallery-arrow-left,
	body.tol-page .gallery-tree .gallery-arrow-right,
	body.tol-page .claim-leaf *,
	body.tol-page .ui-dialog *,
	body.tol-page .ui-tooltip * {
		animation: none !important;
		transition: none !important;
	}
}




.gallery-image .image-title {
  display: block;
  font-size: 20px;
  line-height: 20px;
  background-color: #0c4b8e;
  color: #fff;
  padding: 12px;
}
 /* Begin CSS Part: Multi User */

 /* Begin CSS Part: News Letter */

 /* Begin CSS Part: Order Manager */

 /* Begin CSS Part: Orders */

 /* Begin CSS Part: Payment Gateway */

 /* Begin CSS Part: Qanda */

 /* Begin CSS Part: Redirect */

 /* Begin CSS Part: Review */

 /* Begin CSS Part: Scroller */
/* ==========================================
   SHREWSBURY SEVERN ROTARY
   SPOTLIGHT PROJECTS / SCROLLER
========================================== */

.spot-light-section {
	position: relative;
	isolation: isolate;

	padding: 0 0 var(--rotary-section-md);

	background:
		radial-gradient(circle at 14% 48%, rgba(247, 183, 49, 0.12), transparent 30%),
		linear-gradient(180deg, var(--rotary-page-bg) 0%, var(--rotary-soft-bg) 100%);

	overflow: hidden;
}

/* ==========================================
   SECTION HEAD
========================================== */

/*
	Background styling is now handled by .brand-fill-1 in Colours.
	This section only controls the section-head layout and the curved base.
*/

.section-head {
	position: relative;
	isolation: isolate;

	width: 100%;
	padding:
		clamp(3rem, 7vw, 6rem)
		var(--rotary-gutter)
		clamp(4.5rem, 8vw, 7rem);

	color: var(--rotary-white);

	overflow: hidden;
}

/* Specific curve for spotlight-style section heads */
.section-head::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -62px;
	z-index: 2;

	width: min(780px, 80vw);
	height: 124px;

	background: var(--rotary-soft-bg);

	border-radius: 50% 50% 0 0;

	transform: translateX(-50%);

	pointer-events: none;
}

.section-head > * {
	position: relative;
	z-index: 3;

	width: min(100%, 980px);
	margin-left: auto;
	margin-right: auto;

	text-align: center;
}

.section-head .component-topper {
	display: flex;
	justify-content: center;

	margin-bottom: clamp(1rem, 3vw, 1.5rem);
}

.section-head .component-topper p {
	margin: 0;
}

.section-head .component-topper img {
	width: clamp(74px, 10vw, 108px) !important;
	height: clamp(74px, 10vw, 108px) !important;

	padding: 0.7rem;

	background: rgba(255,255,255,0.14);
	border: 1px solid rgba(255,255,255,0.25);
	border-radius: 999px;

	box-shadow:
		0 14px 34px rgba(0,0,0,0.18),
		inset 0 0 0 1px rgba(255,255,255,0.08);

	object-fit: contain;
	backdrop-filter: blur(10px);
}

.section-head h2 {
	max-width: 900px;
	margin-left: auto;
	margin-right: auto;
	margin-bottom: clamp(1rem, 2vw, 1.25rem);

	color: var(--rotary-white);

	font-size: clamp(2.1rem, 5vw, 4.9rem);
	font-weight: 900;
	line-height: 1;
	letter-spacing: -0.06em;

	text-wrap: balance;

	text-shadow:
		0 10px 28px rgba(0,0,0,0.22),
		0 2px 8px rgba(0,0,0,0.16);
}

.section-head p {
	max-width: 760px;
	margin-left: auto;
	margin-right: auto;

	color: rgba(255,255,255,0.88);

	font-size: clamp(1.05rem, 1.5vw, 1.22rem);
	font-weight: 500;
	line-height: 1.65;
}

/* ==========================================
   SCROLLER SHELL
========================================== */

.scroller-container {
	position: relative;
	z-index: 4;

	width: min(100%, var(--rotary-container));
	margin:
		clamp(-3rem, -4vw, -2rem)
		auto
		0;

	padding: 0 var(--rotary-gutter);
}

.content-scroller {
	position: relative;
	isolation: isolate;

	width: 100%;

	margin: 0 !important;
	padding:
		clamp(1.35rem, 3vw, 2rem)
		clamp(1.25rem, 3vw, 1.8rem)
		clamp(4rem, 7vw, 4.75rem) !important;

	background:
		linear-gradient(145deg, rgba(255,255,255,0.97), rgba(255,255,255,0.86));

	border: 1px solid rgba(11, 74, 143, 0.12);
	border-radius: var(--rotary-radius-xl);

	box-shadow:
		0 34px 88px rgba(7, 52, 98, 0.14),
		0 16px 42px rgba(7, 52, 98, 0.08),
		inset 0 1px 0 rgba(255,255,255,0.74);

	overflow: visible !important;
	backdrop-filter: blur(12px);
}

/* Soft top shine */
.content-scroller::before {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: -1;

	height: 42%;

	background:
		linear-gradient(180deg, rgba(255,255,255,0.66), transparent);

	border-radius: inherit;

	pointer-events: none;
}

/* ==========================================
   EOS HEIGHT FIX
========================================== */

/*
	EOS fade scrollers stack slide-groups with relative positioning
	and negative top values. This forces each slide-group to sit in
	the same visual plane while leaving room for card lift/shadow.
*/

.content-scroller .slide-container {
	position: relative !important;

	width: 100% !important;
	height: clamp(360px, 30vw, 410px) !important;
	min-height: clamp(360px, 30vw, 410px) !important;

	margin: 0 !important;
	padding: clamp(0.7rem, 1.6vw, 1rem) !important;

	overflow: visible !important;
}

.content-scroller .slide-group {
	position: absolute !important;
	inset: 0 !important;
	top: 0 !important;
	left: 0 !important;

	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	gap: clamp(1rem, 2vw, 1.5rem) !important;
	align-items: start !important;

	width: 100% !important;
	height: auto !important;
	min-height: 0 !important;

	margin: 0 !important;
	padding: clamp(0.7rem, 1.6vw, 1rem) !important;

	overflow: visible !important;
}

/* Let EOS opacity/z-index decide which group is live */
.content-scroller .slide-group[style*="opacity: 0"] {
	pointer-events: none !important;
}

/* ==========================================
   PROJECT CARDS
========================================== */

.content-scroller .slide {
	position: relative !important;

	display: flex !important;
	flex-direction: column !important;

	width: auto !important;
	min-width: 0 !important;
	height: auto !important;
	min-height: 0 !important;

	margin: 0 !important;
	padding: 0 !important;

	background: var(--rotary-white);

	border: 1px solid rgba(11, 74, 143, 0.11);
	border-radius: var(--rotary-radius-lg);

	box-shadow:
		0 24px 54px rgba(7, 52, 98, 0.10),
		0 10px 24px rgba(7, 52, 98, 0.07),
		0 2px 6px rgba(7, 52, 98, 0.05);

	overflow: hidden;

	transition:
		transform var(--rotary-transition),
		box-shadow var(--rotary-transition),
		border-color var(--rotary-transition);
}

.content-scroller .slide:hover {
	transform: translateY(-8px);

	border-color: rgba(247, 183, 49, 0.48);
	box-shadow:
		0 34px 74px rgba(7, 52, 98, 0.16),
		0 16px 34px rgba(7, 52, 98, 0.10),
		0 4px 10px rgba(7, 52, 98, 0.07);
}

/* Image area */
.content-scroller .icon {
	position: relative;

	width: 100% !important;
	height: auto !important;
	aspect-ratio: 16 / 9;

	background: var(--rotary-blue-soft);

	overflow: hidden;
}

.content-scroller .icon img {
	width: 100% !important;
	height: 100% !important;

	object-fit: cover;
	object-position: center;

	transform: scale(1.01);

	transition:
		transform 420ms ease,
		filter 420ms ease;
}

.content-scroller .slide:hover .icon img {
	transform: scale(1.07);
	filter: saturate(1.05) contrast(1.04);
}

/* Subtle image wash */
.content-scroller .icon::after {
	content: "";
	position: absolute;
	inset: 0;

	background:
		linear-gradient(
			180deg,
			rgba(4,31,61,0.02) 0%,
			rgba(4,31,61,0.14) 100%
		);

	pointer-events: none;
}

/* Content area */
.content-scroller .mini-content {
	position: relative;

	display: block !important;

	min-height: 0 !important;
	padding:
		clamp(1rem, 2.4vw, 1.35rem)
		clamp(1rem, 2.4vw, 1.35rem)
		0.25rem !important;

	text-align: left !important;
}

.content-scroller .mini-content::before {
	content: "";
	display: block;

	width: 54px;
	height: 4px;
	margin-bottom: 0.85rem;

	background:
		linear-gradient(90deg, var(--rotary-gold), var(--rotary-burgundy));

	border-radius: 999px;
}

.content-scroller .title {
	width: 100% !important;
	margin: 0 !important;
	padding: 0 !important;
}

.content-scroller h3 {
	margin: 0 !important;

	color: var(--rotary-blue-dark);

	font-size: clamp(1.18rem, 1.8vw, 1.55rem);
	font-weight: 900;
	line-height: 1.12;
	letter-spacing: -0.035em;

	text-wrap: balance;
}

/* Card CTA text */
.content-scroller .slide::after {
	content: "View project";

	display: inline-flex;
	align-items: center;

	width: fit-content;
	margin:
		0.75rem
		clamp(1rem, 2.4vw, 1.35rem)
		clamp(1.1rem, 2.4vw, 1.35rem);

	color: var(--rotary-blue);

	font-size: 0.84rem;
	font-weight: 900;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: 0.07em;
}

.content-scroller .slide:focus-within {
	outline: 3px solid var(--rotary-focus);
	outline-offset: 4px;
}

/* Keep overlay links clickable but invisible */
.content-scroller .inflate,
.content-scroller .wrap.inflate {
	position: absolute !important;
	inset: 0 !important;
	z-index: 20 !important;

	display: block !important;

	color: transparent !important;
	text-indent: -9999px !important;
	overflow: hidden !important;
}

/* ==========================================
   ARROWS
========================================== */

.content-scroller .scroll-prev,
.content-scroller .scroll-next {
	position: absolute !important;
	top: 50% !important;
	z-index: 30 !important;

	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 54px !important;
	height: 54px !important;
	min-height: 54px !important;
	margin: 0 !important;
	padding: 0 !important;

	background:
		linear-gradient(135deg, var(--rotary-blue), var(--rotary-blue-dark)) !important;

	color: transparent !important;

	border: 2px solid rgba(255,255,255,0.88) !important;
	border-radius: 999px !important;

	box-shadow:
		0 16px 34px rgba(7, 52, 98, 0.24),
		0 6px 14px rgba(7, 52, 98, 0.14) !important;

	transform: translateY(-50%) !important;

	overflow: hidden !important;
}

.content-scroller .scroll-prev {
	left: -27px !important;
}

.content-scroller .scroll-next {
	right: -27px !important;
}

.content-scroller .scroll-prev::before,
.content-scroller .scroll-next::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;

	width: 12px;
	height: 12px;

	border-top: 3px solid var(--rotary-white);
	border-right: 3px solid var(--rotary-white);

	transform-origin: center;
}

.content-scroller .scroll-prev::before {
	transform: translate(-36%, -50%) rotate(-135deg);
}

.content-scroller .scroll-next::before {
	transform: translate(-64%, -50%) rotate(45deg);
}

.content-scroller .scroll-prev:hover,
.content-scroller .scroll-next:hover {
	background:
		linear-gradient(135deg, var(--rotary-gold), var(--rotary-gold-dark)) !important;

	transform: translateY(-50%) scale(1.04) !important;
}

/* ==========================================
   PAGER
========================================== */

.content-scroller .scroller-pager {
	position: absolute !important;
	left: 50% !important;
	bottom: clamp(1.1rem, 3vw, 1.35rem) !important;
	z-index: 35 !important;

	display: block !important;

	width: auto !important;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;

	transform: translateX(-50%) !important;
}

.content-scroller .sp-links {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	gap: 0.5rem !important;

	margin: 0 !important;
	padding: 0.4rem !important;

	background: rgba(11, 74, 143, 0.08);
	border: 1px solid rgba(11, 74, 143, 0.10);
	border-radius: 999px;
}

.content-scroller .sp-link {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;

	width: 34px !important;
	height: 34px !important;
	margin: 0 !important;
	padding: 0 !important;

	background: var(--rotary-white);
	color: var(--rotary-blue-dark);

	border-radius: 999px;

	font-size: 0.85rem;
	font-weight: 900;
	line-height: 1;

	cursor: pointer;

	transition:
		background-color var(--rotary-transition),
		color var(--rotary-transition),
		transform var(--rotary-transition);
}

.content-scroller .sp-link:hover,
.content-scroller .sp-link.active {
	background: var(--rotary-blue);
	color: var(--rotary-white);

	transform: translateY(-1px);
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 980px) {
	.content-scroller .slide-container {
		height: clamp(620px, 74vw, 720px) !important;
		min-height: clamp(620px, 74vw, 720px) !important;
	}

	.content-scroller .slide-group {
		grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
	}

	.content-scroller .scroll-prev {
		left: -12px !important;
	}

	.content-scroller .scroll-next {
		right: -12px !important;
	}
}

@media (max-width: 700px) {
	.spot-light-section {
		padding-bottom: clamp(2rem, 8vw, 3rem);
	}

	.section-head {
		padding:
			clamp(2.5rem, 10vw, 4rem)
			var(--rotary-gutter)
			clamp(4rem, 12vw, 5rem);
	}

	.section-head::after {
		bottom: -72px;
		height: 110px;
	}

	.scroller-container {
		margin-top: clamp(-2rem, -5vw, -1rem);
	}

	.content-scroller {
		padding:
			1rem
			1rem
			4rem !important;

		border-radius: 30px;
	}

	.content-scroller .slide-container {
		height: clamp(840px, 168vw, 1000px) !important;
		min-height: clamp(840px, 168vw, 1000px) !important;
		padding: 0.75rem !important;
	}

	.content-scroller .slide-group {
		grid-template-columns: 1fr !important;
		gap: 1rem !important;
		padding: 0.75rem !important;
	}

	.content-scroller .scroll-prev,
	.content-scroller .scroll-next {
		top: auto !important;
		bottom: 1.05rem !important;

		width: 44px !important;
		height: 44px !important;
		min-height: 44px !important;

		transform: none !important;
	}

	.content-scroller .scroll-prev {
		left: 1rem !important;
	}

	.content-scroller .scroll-next {
		right: 1rem !important;
	}

	.content-scroller .scroll-prev:hover,
	.content-scroller .scroll-next:hover {
		transform: scale(1.04) !important;
	}

	.content-scroller .scroller-pager {
		bottom: 1.18rem !important;
	}
}

@media (max-width: 440px) {
	.content-scroller .slide-container {
		height: clamp(780px, 165vw, 940px) !important;
		min-height: clamp(780px, 165vw, 940px) !important;
	}

	.content-scroller h3 {
		font-size: 1.18rem;
	}
}
 /* Begin CSS Part: Search */

 /* Begin CSS Part: Search Results */

 /* Begin CSS Part: Seo */

 /* Begin CSS Part: Shipping */

 /* Begin CSS Part: Snippets */

 /* Begin CSS Part: Social Media */

 /* Begin CSS Part: Sub Layout */
/* ==========================================
   SHREWSBURY SEVERN ROTARY
   SERVICE ICONS
========================================== */

/*
	Usage:

	.service-icons-container
		> .icon-grid
			> div
				> individual icon cards

	This section is designed as a dark navigation band with light cards,
	so the existing burgundy/red icons have a cleaner background.
*/

.service-icons-container {
	position: relative;
	isolation: isolate;

	width: 100%;
	padding:
		clamp(3rem, 7vw, 6rem)
		var(--rotary-gutter);

	background:
		radial-gradient(
			circle at 12% 18%,
			rgba(247, 183, 49, 0.22),
			transparent 30%
		),
		radial-gradient(
			circle at 88% 72%,
			rgba(139, 44, 56, 0.16),
			transparent 34%
		),
		linear-gradient(
			135deg,
			var(--rotary-blue-deep),
			var(--rotary-blue-dark),
			var(--rotary-blue)
		);

	overflow: hidden;
}

/* Subtle grid texture */
.service-icons-container::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;

	background:
		linear-gradient(90deg, rgba(255,255,255,0.055) 1px, transparent 1px),
		linear-gradient(180deg, rgba(255,255,255,0.045) 1px, transparent 1px);
	background-size: 54px 54px;

	mask-image:
		linear-gradient(
			90deg,
			transparent,
			black 12%,
			black 88%,
			transparent
		);

	opacity: 0.42;

	pointer-events: none;
}

/* Soft golden wash */
.service-icons-container::after {
	content: "";
	position: absolute;
	left: 50%;
	bottom: -180px;
	z-index: 1;

	width: min(980px, 90vw);
	height: 340px;

	background:
		radial-gradient(
			ellipse,
			rgba(247, 183, 49, 0.18),
			rgba(247, 183, 49, 0.06) 38%,
			transparent 70%
		);

	transform: translateX(-50%);

	pointer-events: none;
}

.icon-grid {
	position: relative;
	z-index: 2;

	width: min(100%, var(--rotary-container-wide));
	margin-left: auto;
	margin-right: auto;
}

/* Inner icon grid wrapper */
.icon-grid > div {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: clamp(0.85rem, 1.8vw, 1.25rem);

	width: 100%;
}

/* ==========================================
   ICON CARDS
========================================== */

.icon-grid > div > * {
	position: relative;
	isolation: isolate;

	display: flex !important;
	flex-direction: column;
	align-items: center;
	justify-content: center;

	min-width: 0;
	min-height: clamp(170px, 13vw, 205px);
	margin: 0 !important;
	padding:
		clamp(1rem, 2vw, 1.35rem)
		clamp(0.85rem, 1.6vw, 1.15rem);

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,0.98),
			rgba(255,255,255,0.88)
		);

	border: 1px solid rgba(255,255,255,0.54);
	border-radius: var(--rotary-radius-lg);

	box-shadow:
		0 22px 52px rgba(0,0,0,0.16),
		0 10px 24px rgba(0,0,0,0.10),
		inset 0 1px 0 rgba(255,255,255,0.78);

	text-align: center;

	overflow: hidden;
	backdrop-filter: blur(12px);

	transition:
		transform var(--rotary-transition),
		border-color var(--rotary-transition),
		box-shadow var(--rotary-transition),
		background var(--rotary-transition);
}

.icon-grid > div > *:hover {
	transform: translateY(-8px);

	border-color: rgba(247, 183, 49, 0.70);

	background:
		linear-gradient(
			145deg,
			rgba(255,255,255,1),
			rgba(255,245,220,0.92)
		);

	box-shadow:
		0 32px 72px rgba(0,0,0,0.22),
		0 16px 36px rgba(0,0,0,0.13),
		inset 0 1px 0 rgba(255,255,255,0.86);
}

/* Warm glow inside each card */
.icon-grid > div > *::before {
	content: "";
	position: absolute;
	right: -56px;
	bottom: -56px;
	z-index: 1;

	width: 150px;
	height: 150px;

	background:
		radial-gradient(
			circle,
			rgba(247, 183, 49, 0.28),
			rgba(247, 183, 49, 0.10) 42%,
			transparent 68%
		);

	border-radius: 50%;

	pointer-events: none;
}

/* Fine top sheen */
.icon-grid > div > *::after {
	content: "";
	position: absolute;
	inset: 0 0 auto;
	z-index: 1;

	height: 48%;

	background:
		linear-gradient(
			180deg,
			rgba(255,255,255,0.72),
			rgba(255,255,255,0)
		);

	pointer-events: none;
}

/* Keep actual content above decoration */
.icon-grid > div > * > * {
	position: relative;
	z-index: 2;
}

/* ==========================================
   ICON MEDALLION
========================================== */

.icon-grid .component-topper {
	position: relative;
	z-index: 2;

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

	width: clamp(82px, 7vw, 108px);
	height: clamp(82px, 7vw, 108px);
	margin:
		0
		auto
		clamp(0.75rem, 1.7vw, 1rem);

	background:
		radial-gradient(
			circle at 32% 24%,
			rgba(255,255,255,0.95),
			rgba(255,245,220,0.84) 52%,
			rgba(247,183,49,0.20) 100%
		);

	border: 1px solid rgba(247, 183, 49, 0.36);
	border-radius: 50%;

	box-shadow:
		0 14px 34px rgba(7, 52, 98, 0.13),
		inset 0 1px 0 rgba(255,255,255,0.86);

	transition:
		transform var(--rotary-transition),
		box-shadow var(--rotary-transition),
		border-color var(--rotary-transition);
}

.icon-grid > div > *:hover .component-topper {
	transform: translateY(-3px) scale(1.04);

	border-color: rgba(139, 44, 56, 0.28);

	box-shadow:
		0 18px 44px rgba(7, 52, 98, 0.17),
		inset 0 1px 0 rgba(255,255,255,0.92);
}

.icon-grid .component-topper p {
	display: flex;
	align-items: center;
	justify-content: center;

	width: 100%;
	height: 100%;
	margin: 0;
}

/* Icon image */
.icon-grid img {
	display: block;

	width: clamp(46px, 4.6vw, 66px) !important;
	height: clamp(46px, 4.6vw, 66px) !important;

	object-fit: contain;

	filter:
		drop-shadow(0 7px 12px rgba(7, 52, 98, 0.16));

	transition:
		transform var(--rotary-transition),
		filter var(--rotary-transition);
}

.icon-grid > div > *:hover img {
	transform: scale(1.06);

	filter:
		drop-shadow(0 9px 16px rgba(7, 52, 98, 0.18));
}

/* ==========================================
   ICON TITLE
========================================== */

.icon-grid h4 {
	position: relative;
	z-index: 2;

	margin: 0;

	color: var(--rotary-blue-dark);

	font-size: clamp(0.98rem, 1.25vw, 1.14rem);
	font-weight: 950;
	line-height: 1.14;
	letter-spacing: -0.025em;

	text-wrap: balance;
}

/* Small title accent */
.icon-grid h4::after {
	content: "";
	display: block;

	width: 38px;
	height: 3px;
	margin:
		0.65rem
		auto
		0;

	background:
		linear-gradient(
			90deg,
			var(--rotary-gold),
			var(--rotary-burgundy)
		);

	border-radius: 999px;

	opacity: 0.82;
}

/* Full-card links */
.icon-grid .inflate {
	position: absolute !important;
	inset: 0 !important;
	z-index: 20 !important;

	display: block !important;

	color: transparent !important;
	text-indent: -9999px !important;
	overflow: hidden !important;
}

/* Focus state for full-card links */
.icon-grid > div > *:focus-within {
	outline: 3px solid var(--rotary-focus);
	outline-offset: 4px;
}

/* ==========================================
   RESPONSIVE
========================================== */

@media (max-width: 1180px) {
	.icon-grid > div {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

@media (max-width: 680px) {
	.service-icons-container {
		padding:
			clamp(2.25rem, 8vw, 3.5rem)
			var(--rotary-gutter);
	}

	.icon-grid > div {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 0.9rem;
	}

	.icon-grid > div > * {
		min-height: 155px;
		border-radius: 26px;
	}

	.icon-grid .component-topper {
		width: 82px;
		height: 82px;
	}

	.icon-grid img {
		width: 48px !important;
		height: 48px !important;
	}
}

@media (max-width: 420px) {
	.icon-grid > div {
		grid-template-columns: 1fr;
	}

	.icon-grid > div > * {
		min-height: 145px;
	}
}
 /* Begin CSS Part: System Manager */

 /* Begin CSS Part: User */

 /* Begin CSS Part: Warning */