/* =========================================================
		   Base & Reset
		   ========================================================= */
		*,
		*::before,
		*::after {
			box-sizing: border-box;
			margin: 0;
			padding: 0;
		}

		:root {
			--color-magenta: #a1007d;
			--color-magenta-border: #9d0570;
			--color-magenta-deep: #7a0458;
			--color-navy: #1a1c2b;
			--color-navy-deep: #0f111c;
			--color-cyan: #0087ca;
			--color-yellow: #ffeb3b;
			--color-green: #8bc34a;
			--color-text: #2a2a2a;
			--color-text-muted: #6b6b6b;
			--color-white: #ffffff;
			--font-display: "Oswald", "Arial Narrow", "Impact", sans-serif;
			--font-body: "Roboto", "Helvetica Neue", Arial, sans-serif;
			--max-width: 1280px;
		}

		html {
			scroll-behavior: smooth;
		}

		body {
			font-family: var(--font-body);
			color: var(--color-text);
			line-height: 1.6;
			background: var(--color-white);
			overflow-x: hidden;
			padding-top: 110px;
		}

		@media (max-width: 1300px) {
			body {
				padding-top: 80px;
			}
		}

		body.nav-locked {
			overflow: hidden;
		}

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

		a {
			color: inherit;
			text-decoration: none;
		}

		button {
			font-family: inherit;
			cursor: pointer;
			border: none;
			background: none;
		}

		/* =========================================================
		   Header — diagonal magenta/navy gradient bar
		   ========================================================= */
		.site-header {
			background-image: linear-gradient(120deg,
				var(--color-magenta) 0vw,
				var(--color-magenta) 20vw,
				var(--color-navy) 20vw,
				var(--color-navy) 100vw);
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 100;
			transition: transform 0.3s ease;
		}

		.site-header.is-hidden {
			transform: translateY(-100%);
		}

		.nav-wrapper {
			width: 90%;
			max-width: 98%;
			margin: 0 auto;
			display: grid;
			grid-template-columns: 25% 50% 25%;
			align-items: center;
			min-height: 110px;
		}

		.nav-logo {
			display: flex;
			align-items: center;
		}

		.nav-logo img {
			width: 178px;
			height: auto;
			max-width: 100%;
		}

		.nav-menu {
			list-style: none;
			display: flex;
			justify-content: center;
			align-items: center;
			gap: 36px;
		}

		.nav-menu > li {
			position: relative;
		}

		.nav-menu > li > a {
			font-family: var(--font-display);
			color: var(--color-white);
			font-size: 18px;
			font-weight: 500;
			letter-spacing: 1.5px;
			text-transform: uppercase;
			padding: 40px 0;
			display: inline-flex;
			align-items: center;
			gap: 6px;
			transition: color 0.25s ease;
		}

		.nav-menu > li > a:hover {
			color: var(--color-magenta);
		}

		.nav-menu .has-dropdown > a::after,
		.nav-menu .menu-item-has-children > a::after {
			content: "";
			display: inline-block;
			width: 0;
			height: 0;
			border-left: 5px solid transparent;
			border-right: 5px solid transparent;
			border-top: 6px solid currentColor;
			margin-left: 6px;
			margin-top: 4px;
		}

		.nav-submenu,
		.nav-menu .sub-menu {
			list-style: none;
			position: absolute;
			top: 100%;
			left: 50%;
			transform: translate(-50%, 6px);
			min-width: 350px;
			background: var(--color-white);
			border: 1px solid var(--color-magenta-border);
			padding: 0;
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.25s ease, transform 0.25s ease, visibility 0.25s;
		}

		.nav-menu > li:hover > .nav-submenu,
		.nav-menu > li:focus-within > .nav-submenu,
		.nav-menu > li:hover > .sub-menu,
		.nav-menu > li:focus-within > .sub-menu {
			opacity: 1;
			visibility: visible;
			transform: translate(-50%, 0);
		}

		.nav-submenu a,
		.nav-menu .sub-menu a {
			display: block;
			padding: 14px 26px;
			color: #000000;
			font-family: var(--font-display);
			font-size: 20px;
			font-weight: 400;
			letter-spacing: 1.5px;
			text-transform: uppercase;
			transition: background 0.2s ease, color 0.2s ease;
		}

		.nav-submenu a:hover,
		.nav-menu .sub-menu a:hover {
			background: var(--color-magenta-border);
			color: var(--color-white);
		}

		.nav-toggle {
			display: none;
			position: relative;
			width: 32px;
			height: 24px;
			padding: 0;
			background: transparent;
			border: 0;
			cursor: pointer;
		}

		.nav-toggle-bar {
			display: block;
			position: absolute;
			left: 0;
			right: 0;
			height: 3px;
			background: var(--color-white);
			transition: transform 0.25s ease, opacity 0.2s ease, top 0.25s ease;
		}

		.nav-toggle-bar:nth-child(1) {
			top: 0;
		}

		.nav-toggle-bar:nth-child(2) {
			top: calc(50% - 1.5px);
		}

		.nav-toggle-bar:nth-child(3) {
			top: calc(100% - 3px);
		}

		.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) {
			top: calc(50% - 1.5px);
			transform: rotate(45deg);
		}

		.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) {
			opacity: 0;
		}

		.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) {
			top: calc(50% - 1.5px);
			transform: rotate(-45deg);
		}

		.nav-mobile-actions {
			display: none;
			align-items: center;
			gap: 14px;
			justify-self: end;
			grid-column: 3;
		}

		.nav-mobile-actions a {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 34px;
			height: 34px;
			color: var(--color-white);
			transition: color 0.2s ease;
		}

		.nav-mobile-actions a:hover {
			color: var(--color-magenta);
		}

		.nav-mobile-actions svg {
			width: 20px;
			height: 20px;
			fill: currentColor;
		}

		/* =========================================================
		   Hero Section — climbing wall bg + double dark overlay,
		   centered play button, bottom row with heading + CTA.
		   Mirrors Divi et_pb_section_0 layout and typography.
		   ========================================================= */
		.hero {
			position: relative;
			background: #000;
			overflow: hidden;
		}

		.hero-media {
			position: relative;
			padding: 190px 0 0;
			background-color: #000;
			overflow: hidden;
		}

		.hero-video {
			position: absolute;
			inset: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: 0;
			pointer-events: none;
		}

		.hero-media::before {
			content: "";
			position: absolute;
			inset: 0;
			background: rgba(0, 0, 0, 0.4);
			z-index: 1;
		}

		.hero-row-play {
			position: relative;
			z-index: 2;
			padding: 0 0 190px;
			text-align: center;
		}

		.hero-play {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			width: 88px;
			height: 62px;
			border-radius: 14px;
			background: rgba(20, 20, 20, 0.7);
			transition: background 0.25s ease, transform 0.25s ease;
			cursor: pointer;
		}

		.hero-play:hover,
		.hero-play:focus {
			background: rgba(161, 0, 125, 0.85);
			transform: scale(1.06);
			outline: none;
		}

		.hero-play::after {
			content: "";
			width: 0;
			height: 0;
			border-left: 22px solid var(--color-white);
			border-top: 14px solid transparent;
			border-bottom: 14px solid transparent;
			margin-left: 6px;
		}

		.hero-row-text {
			position: relative;
			z-index: 2;
			width: 100%;
			padding: 10px 6% 40px;
			display: grid;
			grid-template-columns: 1fr 1fr;
			align-items: center;
			gap: 40px;
		}

		.hero-caption {
			font-family: var(--font-body);
			color: var(--color-white);
			font-size: 26px;
			font-weight: 400;
			line-height: 1.3;
			text-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.8);
			text-align: left;
			margin: 0;
		}

		.hero-cta-column {
			display: flex;
			flex-direction: column;
			align-items: flex-end;
			gap: 8px;
			text-align: right;
		}

		.hero-connect {
			color: var(--color-white);
			font-family: Georgia, "Times New Roman", serif;
			font-size: 18px;
			font-weight: 700;
			letter-spacing: 0.5px;
			text-shadow: 0 0.1em 0.1em rgba(0, 0, 0, 0.8);
			margin: 0;
		}

		.hero-cta {
			display: inline-block;
			background: var(--color-magenta);
			color: var(--color-white);
			font-family: var(--font-body);
			font-size: 20px;
			font-weight: 700;
			letter-spacing: 1.5px;
			text-transform: uppercase;
			padding: 14px 38px;
			border: 0;
			cursor: pointer;
			transform: skewX(-14deg);
			transition: background 0.25s ease, transform 0.25s ease;
		}

		.hero-cta > span {
			display: inline-block;
			transform: skewX(14deg);
		}

		.hero-cta:hover {
			background: var(--color-magenta-deep);
			transform: skewX(-14deg) translateY(-2px);
		}

		/* =========================================================
		   Play Elevated section — teal bg, title + subtitle only
		   ========================================================= */
		.play-elevated {
			background-image: url("images/1-teal-bg.jpg");
			background-size: cover;
			background-position: center top 10%;
			background-repeat: no-repeat;
			padding: 120px 24px;
			text-align: center;
		}

		/* =========================================================
		   Where Active Learning section — CSS mirrors index.html
		   section_2 / row_3 / column_4 / column_5 / et_pb_image_1
		   ========================================================= */
		.feature-section {
			background-image: url("images/4-light-grey-bg-scaled.jpg");
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			padding: 4% 0;
		}

		/* Dual-layer heading — two real text spans stacked with an
		   offset: echo (behind) is hollow magenta-stroked letters,
		   main (front) is solid navy fill. Mirrors Divi's
		   dipi-dh-first-heading / dipi-dh-second-heading pattern.  */
		.dual-heading {
			position: relative;
			display: inline-block;
			font-family: var(--font-display);
			font-weight: 700;
			line-height: 1.05;
			text-transform: uppercase;
			letter-spacing: 1px;
			margin: 0;
		}

		.dual-heading .dh-echo,
		.dual-heading .dh-main {
			display: block;
		}

		.dual-heading .dh-echo {
			position: absolute;
			top: 5px;
			left: 0;
			width: 100%;
			color: var(--color-white);
			-webkit-text-fill-color: var(--color-white);
			-webkit-text-stroke: 1px var(--color-magenta-border);
			paint-order: stroke fill;
			pointer-events: none;
			z-index: 0;
		}

		.dual-heading .dh-main {
			position: relative;
			z-index: 1;
			color: var(--color-navy);
			-webkit-text-fill-color: var(--color-navy);
			-webkit-text-stroke: 0;
		}

		.section-title {
			font-size: clamp(40px, 5vw, 52px);
		}

		.section-subtitle {
			font-family: var(--font-body);
			font-style: italic;
			font-size: 20px;
			font-weight: 400;
			color: var(--color-navy);
			max-width: 760px;
			margin: 28px auto 0;
			line-height: 1.5;
		}

		.feature-split {
			width: 90%;
			max-width: 90%;
			margin: 0 auto;
			display: grid;
			grid-template-columns: 1fr 1fr;
			column-gap: 5.5%;
			align-items: center;
		}

		.feature-split-image {
			width: 100%;
			max-width: 100%;
			text-align: left;
			margin-left: 0;
		}

		.feature-split-image img {
			width: 100%;
			max-width: 100%;
			height: auto;
			display: block;
		}

		.feature-split-body {
			margin: auto;
		}

		.feature-split-body h2 {
			font-size: clamp(40px, 5vw, 52px);
			margin-bottom: 28px;
			line-height: 1.1;
		}

		.feature-split-body p {
			font-family: var(--font-body);
			font-style: italic;
			font-size: 15px;
			font-weight: 400;
			color: var(--color-navy);
			line-height: 1.7;
		}

		/* =========================================================
		   Programs section — purple bg, 4 cards with angular banners
		   ========================================================= */
		.programs {
			position: relative;
			padding: 0;
			background-image: url("images/2-purple-bg-scaled.jpg");
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
		}

		.programs-titles,
		.programs-bodies {
			width: 90%;
			max-width: 90%;
			margin: 0 auto;
			display: grid;
			grid-template-columns: repeat(4, 1fr);
			column-gap: 2.5%;
		}

		.programs-titles {
			padding-top: 60px;
			padding-bottom: 0;
		}

		.program-banner {
			position: relative;
			aspect-ratio: 1/1;
			background-size: cover;
			background-position: center;
			background-blend-mode: overlay;
			background-color: rgba(0, 0, 0, 0.4);
			clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
			display: flex;
			align-items: center;
			justify-content: center;
			padding: 40px 20px 20px;
		}

		.program-banner h3 {
			font-family: var(--font-display);
			color: var(--color-white);
			font-size: 30px;
			font-weight: 700;
			letter-spacing: 1.5px;
			text-transform: uppercase;
			text-align: center;
			line-height: 1.3;
			text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
		}

		.programs-bodies {
			padding-bottom: 80px;
		}

		.program-body {
			background: var(--color-white);
			padding: 28px 24px 40px;
			display: flex;
			flex-direction: column;
			align-items: center;
			text-align: center;
			box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
		}

		.program-body p {
			font-family: var(--font-body);
			color: var(--color-navy);
			font-size: 16px;
			line-height: 1.7;
			font-weight: 700;
			margin-bottom: 28px;
			min-height: 240px;
			max-width: 90%;
			padding-top: 20px;
		}

		.program-cta {
			display: inline-block;
			background: var(--color-magenta);
			color: var(--color-white);
			font-family: var(--font-body);
			font-size: 16px;
			font-weight: 700;
			letter-spacing: 1.5px;
			text-transform: uppercase;
			padding: 12px 32px;
			border: 0;
			cursor: pointer;
			transform: skewX(-14deg);
			transition: background 0.25s ease, transform 0.25s ease;
		}

		.program-cta > span {
			display: inline-block;
			transform: skewX(14deg);
		}

		.program-cta:hover {
			background: var(--color-magenta-deep);
			transform: skewX(-14deg) translateY(-2px);
		}

		/* =========================================================
		   Mobile programs slider (≤980px only)
		   ========================================================= */
		.mp-slider {
			display: none;
		}

		/* =========================================================
		   About — diagonal split, left half magenta with building,
		   right half navy with text
		   ========================================================= */
		.about {
			position: relative;
			display: grid;
			grid-template-columns: 1fr 1fr;
			background: var(--color-white);
		}

		.about-image {
			background-image: url("images/coa-xtreme-building-location.jpg");
			background-size: cover;
			background-position: center;
			min-height: 560px;
		}

		.about-body {
			background: var(--color-white);
			color: var(--color-navy);
			padding: 80px 6% 80px 8%;
			display: flex;
			flex-direction: column;
			justify-content: center;
			text-align: center;
		}

		.about-body h2 {
			font-size: clamp(32px, 3.4vw, 49px);
			line-height: 1.1;
			margin-bottom: 28px;
		}

		.about-contact {
			font-family: var(--font-body);
			font-size: 18px;
			font-weight: 600;
			color: var(--color-navy);
			line-height: 1.8;
			font-style: normal;
			margin-bottom: 24px;
		}

		.about-contact strong {
			display: inline-block;
			font-family: var(--font-body);
			font-size: 30px;
			font-weight: 700;
			line-height: 2;
			color: var(--color-navy);
		}

		.about-contact a {
			text-decoration: underline;
			text-underline-offset: 3px;
		}

		.about-contact a:hover {
			color: var(--color-magenta-border);
		}

		.about-socials {
			display: flex;
			justify-content: center;
			gap: 12px;
			margin-bottom: 36px;
		}

		.social-icon {
			width: 40px;
			height: 40px;
			border-radius: 50%;
			background: var(--color-navy);
			color: var(--color-white);
			display: flex;
			align-items: center;
			justify-content: center;
			transition: background 0.25s ease, transform 0.25s ease;
		}

		.social-icon svg {
			width: 18px;
			height: 18px;
			fill: currentColor;
		}

		.social-icon--ig svg {
			width: 22px;
			height: 22px;
		}

		.social-icon:hover {
			background: var(--color-magenta);
			transform: translateY(-2px);
		}

		.site-footer .social-icon {
			background: rgba(255, 255, 255, 0.12);
		}

		.site-footer .social-icon:hover {
			background: var(--color-magenta);
		}

		.hours-title {
			font-family: var(--font-body);
			font-size: 24px;
			font-weight: 700;
			color: var(--color-magenta-border);
			margin-bottom: 8px;
			text-align: center;
		}

		.hours-blurb {
			font-family: var(--font-body);
			color: var(--color-navy);
			font-size: 16px;
			line-height: 1.6;
			margin-bottom: 22px;
			max-width: 650px;
			margin-left: auto;
			margin-right: auto;
		}

		.hours-list {
			list-style: none;
			max-width: 420px;
			margin: 32px auto 0;
			font-family: var(--font-body);
			font-size: 16px;
			font-weight: 700;
			color: var(--color-magenta-border);
		}

		.hours-list li {
			display: flex;
			justify-content: space-between;
			align-items: baseline;
			gap: 32px;
			padding: 10px 0;
		}

		.hours-list li:last-child {
			border-bottom: none;
		}

		.hours-list .day {
			color: var(--color-magenta-border);
			font-family: var(--font-body);
			font-size: 16px;
			font-weight: 700;
			letter-spacing: 0;
			text-transform: none;
		}

		/* =========================================================
		   Footer — splash paint graphic at top, dark body below
		   ========================================================= */
		.site-footer {
			background-color: #000000;
			background-image: url("images/footer.png");
			background-size: contain;
			background-position: center top;
			background-repeat: no-repeat;
			color: var(--color-white);
			padding: 320px 24px 32px;
			position: relative;
		}

		.footer-links {
			display: flex;
			justify-content: center;
			gap: 36px;
			font-family: var(--font-body);
			font-size: 18px;
			font-weight: 400;
			line-height: 1;
			margin-top: 98px;
			margin-bottom: 18px;
		}

		.footer-links a:hover {
			color: var(--color-magenta);
		}

		.footer-contact {
			text-align: center;
			font-family: var(--font-body);
			font-size: 18px;
			line-height: 1;
			color: rgba(255, 255, 255, 0.9);
			margin-bottom: 18px;
		}

		.footer-contact a:hover {
			color: var(--color-magenta);
		}

		.footer-social {
			display: flex;
			justify-content: center;
			gap: 14px;
			margin-bottom: 26px;
		}

		.footer-copy {
			text-align: center;
			font-family: Georgia, "Times New Roman", serif;
			font-style: italic;
			font-size: 12px;
			line-height: 1.8;
			color: rgba(255, 255, 255, 0.7);
		}

		/* =========================================================
		   Responsive — tablet and mobile
		   ========================================================= */
		@media (max-width: 1080px) {
			.nav-menu {
				gap: 24px;
			}

			.nav-menu > li > a {
				font-size: 20px;
			}

			.feature-split {
				column-gap: 48px;
			}
		}

		@media (max-width: 980px) {
			.programs-titles,
			.programs-bodies {
				display: none;
			}

			.mp-slider {
				display: block;
				padding: 60px 0;
			}

			.mp-viewport {
				position: relative;
				max-width: 420px;
				margin: 0 auto;
			}

			.mp-track {
				list-style: none;
				display: flex;
				flex-wrap: nowrap;
				overflow-x: auto;
				scroll-snap-type: x mandatory;
				-webkit-overflow-scrolling: touch;
				scrollbar-width: none;
				-ms-overflow-style: none;
			}

			.mp-track::-webkit-scrollbar {
				display: none;
				width: 0;
				height: 0;
			}

			.mp-slide {
				flex: 0 0 100%;
				min-width: 100%;
				max-width: 100%;
				scroll-snap-align: start;
				scroll-snap-stop: always;
				padding: 0 56px;
				box-sizing: border-box;
			}

			.mp-card {
				display: flex;
				flex-direction: column;
			}

			.mp-banner {
				position: relative;
				aspect-ratio: 4/3;
				background-size: cover;
				background-position: center;
				background-blend-mode: overlay;
				background-color: rgba(0, 0, 0, 0.4);
				clip-path: polygon(0 0, 100% 20%, 100% 100%, 0 100%);
				display: flex;
				align-items: center;
				justify-content: center;
				padding: 40px 24px 24px;
			}

			.mp-banner h3 {
				font-family: var(--font-display);
				color: var(--color-white);
				font-size: 32px;
				font-weight: 700;
				letter-spacing: 1px;
				text-transform: uppercase;
				text-align: center;
				line-height: 1.05;
				margin: 0;
				text-shadow: 0 2px 8px rgba(0, 0, 0, 0.5);
			}

			.mp-content {
				background: var(--color-white);
				padding: 28px 24px 32px;
				display: flex;
				flex-direction: column;
				align-items: center;
				box-shadow: 0 10px 28px rgba(0, 0, 0, 0.18);
			}

			.mp-content p {
				color: var(--color-text);
				font-size: 15px;
				line-height: 1.65;
				font-weight: 600;
				margin: 0;
				text-align: center;
			}

			.mp-cta {
				display: inline-block;
				margin: 28px auto 0;
				padding: 14px 34px;
				border: 2px solid var(--color-magenta-border);
				border-radius: 30px;
				color: var(--color-magenta-border);
				font-family: var(--font-display);
				font-size: 14px;
				font-weight: 500;
				letter-spacing: 2px;
				text-transform: uppercase;
				background: transparent;
				transition: background 0.2s ease, color 0.2s ease;
			}

			.mp-cta:hover,
			.mp-cta:focus {
				background: var(--color-magenta-border);
				color: var(--color-white);
			}

			.mp-arrow {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				z-index: 5;
				width: 44px;
				height: 44px;
				display: flex;
				align-items: center;
				justify-content: center;
				color: var(--color-magenta-border);
				font-size: 48px;
				font-weight: 400;
				line-height: 1;
			}

			.mp-arrow:hover,
			.mp-arrow:focus {
				color: var(--color-magenta-deep);
				outline: none;
			}

			.mp-prev { left: 4px; }
			.mp-next { right: 4px; }

			.mp-dots {
				display: flex;
				justify-content: center;
				gap: 10px;
				margin-top: 28px;
			}

			.mp-dot {
				width: 10px;
				height: 10px;
				border-radius: 50%;
				background: rgba(255, 255, 255, 0.45);
				transition: background 0.2s ease, transform 0.2s ease;
			}

			.mp-dot.is-active {
				background: var(--color-white);
				transform: scale(1.25);
			}

			.feature-split,
			.about {
				grid-template-columns: 1fr;
				column-gap: 0;
			}

			.feature-split {
				row-gap: 30px;
			}

			.feature-split-body {
				text-align: center;
			}

			.feature-split-body h2 {
				text-align: center;
			}

			.feature-split-body p {
				text-align: center;
			}

			.about-image {
				min-height: 320px;
			}

			.about-body {
				padding: 60px 24px;
				text-align: center;
			}

			.hero-media {
				padding-top: 120px;
			}

			.hero-row-play {
				padding-bottom: 120px;
			}

			.hero-row-text {
				display: flex;
				flex-direction: column;
				align-items: center;
				gap: 18px;
				padding: 10px 24px 40px;
				text-align: center;
			}

			.hero-caption {
				font-size: 22px;
				text-align: center;
			}

			.hero-cta-column {
				align-items: center;
				text-align: center;
			}

			.site-footer {
				padding-top: 180px;
			}
		}

		@media (max-width: 1300px) {
			.site-header {
				background-image: linear-gradient(120deg,
					var(--color-magenta) 0%,
					var(--color-magenta) 55%,
					var(--color-navy) 55%,
					var(--color-navy) 100%);
			}

			.nav-wrapper {
				grid-template-columns: 1fr auto;
				min-height: 80px;
			}

			.nav-menu {
				display: none;
				position: absolute;
				top: 100%;
				left: 0;
				right: 0;
				background: var(--color-navy);
				flex-direction: column;
				align-items: flex-start;
				padding: 24px;
				gap: 18px;
				overflow-y: auto;
				z-index: 90;
			}

			.nav-menu.is-open {
				display: flex;
			}

			.nav-menu > li > a {
				padding: 10px 0;
				font-size: 18px;
			}

			.nav-submenu,
			.nav-menu .sub-menu {
				position: static;
				box-shadow: none;
				border: 0;
				background: transparent;
				min-width: 0;
				opacity: 1;
				visibility: visible;
				transform: none;
				padding: 6px 0 0 20px;
			}

			.nav-submenu a,
			.nav-menu .sub-menu a {
				color: rgba(255, 255, 255, 0.8);
				padding: 6px 0;
				font-size: 14px;
			}

			.nav-toggle {
				display: block;
			}

			.nav-mobile-actions {
				display: inline-flex;
			}

			.nav-logo img {
				width: 140px;
			}
		}

		@media (max-width: 640px) {
			.hero-media {
				padding-top: 80px;
			}

			.hero-row-play {
				padding-bottom: 80px;
			}

			.hero-row-text {
				padding: 10px 20px 30px;
				gap: 14px;
			}

			.hero-play {
				width: 72px;
				height: 52px;
				border-radius: 10px;
			}

			.hero-play::after {
				border-left: 18px solid var(--color-white);
				border-top: 11px solid transparent;
				border-bottom: 11px solid transparent;
			}

			.hero-caption {
				font-size: 20px;
			}

			.hero-connect {
				font-size: 14px;
			}

			.hero-cta {
				font-size: 16px;
				padding: 12px 28px;
			}

			.section-title,
			.feature-split-body h2 {
				font-size: 36px;
				letter-spacing: 1px;
			}

			.about-body h2 {
				font-size: 32px;
			}

			.about-contact strong {
				font-size: 24px;
			}

			.hours-title {
				font-size: 20px;
			}

			.footer-links {
				gap: 20px;
				font-size: 15px;
				margin-top: 60px;
				flex-wrap: wrap;
			}

			.footer-contact {
				font-size: 14px;
			}

			.site-footer {
				padding-top: 110px;
			}
		}

/* ====== Safety page ====== */

.safety-hero {
	position: relative;
	width: 100%;
}

.safety-hero-banner {
	display: block;
	width: 100%;
	height: auto;
}

.safety-hero-overlay {
	position: absolute;
	top: 50%;
	left: 6%;
	transform: translateY(-50%);
	max-width: 850px;
	z-index: 2;
}

.safety-hero-title {
	font-size: clamp(18px, 2.4vw, 36px);
	margin-bottom: 16px;
	line-height: 1.05;
}

.safety-hero-overlay p {
	font-family: var(--font-body);
	font-size: clamp(12px, 1.05vw, 16px);
	line-height: 1.55;
	color: var(--color-navy);
	margin-bottom: 16px;
}

.safety-hero-overlay .safety-hero-thanks {
	color: var(--color-magenta);
	font-weight: 700;
}

.safety-rows {
	background: url("images/4-light-grey-bg-scaled.jpg") center / cover no-repeat;
}

.safety-row-section {
	padding: 80px 0;
}

.safety-row {
	width: 80%;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	column-gap: 6%;
	align-items: center;
}

.terms-row {
	width: 80%;
	margin: 0 auto;
}

.safety-row--reverse {
	grid-template-columns: 1.3fr 1fr;
}

.safety-row-body h2 {
	font-size: clamp(28px, 3.2vw, 40px);
	margin-bottom: 22px;
	line-height: 1.05;
}

.safety-row-body p {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.75;
	color: var(--color-navy);
	margin-bottom: 14px;
}

.safety-row-body strong {
	font-weight: 700;
	color: var(--color-navy);
}

.safety-row-image img {
	width: 100%;
	height: auto;
	display: block;
}

.safety-row-image-stack {
	display: grid;
	gap: 16px;
}

.safety-row-image-stack img {
	width: 100%;
	height: auto;
	display: block;
}

.safety-list {
	list-style: disc;
	padding-left: 22px;
	margin: 6px 0 18px;
	color: var(--color-navy);
}

.safety-list li {
	font-family: var(--font-body);
	font-size: 15px;
	line-height: 1.65;
	margin-bottom: 8px;
}

/* Activity rules section */

.activity-rules {
	background-image: url("images/2-Safety-last-background-section.png");
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
	background-color: #f7e0ee;
	padding: 90px 0 110px;
}

.activity-rules-heading {
	text-align: center;
	margin-bottom: 50px;
}

.activity-rules-heading .dual-heading {
	font-size: clamp(34px, 4vw, 52px);
}

.activity-rules-grid {
	width: 90%;
	max-width: 1100px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 32px;
}

.rule-card {
	background: var(--color-white);
	padding: 44px 36px 38px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	text-align: left;
}

.rule-card-icon {
	display: flex;
	justify-content: center;
	margin-bottom: 18px;
}

.rule-card-icon-circle {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	border: 2px solid var(--color-magenta-border);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-magenta-border);
}

.rule-card--always .rule-card-icon-circle {
	border-color: #2ea84d;
	color: #2ea84d;
}

.rule-card-icon svg {
	width: 32px;
	height: 32px;
	fill: currentColor;
}

.rule-card-title {
	font-family: var(--font-display);
	font-size: 30px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-navy);
	text-align: center;
	margin-bottom: 26px;
}

.rule-group {
	margin-bottom: 20px;
}

.rule-group h4 {
	font-family: var(--font-body);
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: var(--color-navy);
	margin-bottom: 10px;
}

.rule-group ul {
	list-style: disc;
	padding-left: 20px;
	margin: 0;
}

.rule-group ul li {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-navy);
	margin-bottom: 5px;
}

@media (max-width: 980px) {
	.safety-hero-grid,
	.safety-row,
	.safety-row--reverse {
		grid-template-columns: 1fr;
		row-gap: 30px;
	}

	.safety-hero {
		display: flex;
		flex-direction: column;
	}

	.safety-hero-picture,
	.safety-hero-banner {
		display: block;
		width: 100%;
		height: auto;
	}

	.safety-hero-overlay {
		position: static;
		transform: none;
		width: 100%;
		max-width: none;
		padding: 36px 24px 44px;
		background-image: url("images/1-teal-bg.jpg");
		background-size: cover;
		background-position: center;
		background-repeat: no-repeat;
	}

	.safety-hero-title {
		font-size: clamp(20px, 5.4vw, 28px);
		margin-bottom: 14px;
		text-align: center;
		line-height: 1.45;
	}

	.safety-hero-overlay p {
		font-size: 14px;
		line-height: 1.6;
		margin-bottom: 18px;
		text-align: center;
	}

	.safety-hero-body {
		padding-bottom: 0;
	}

	.safety-hero-image {
		justify-content: center;
	}

	.safety-row--reverse .safety-row-image-stack {
		order: -1;
	}

	.activity-rules-grid {
		grid-template-columns: 1fr;
		gap: 24px;
	}
}

@media (max-width: 640px) {
	.safety-hero {
		padding: 0 0 60px;
	}

	.safety-row-section,
	.activity-rules {
		padding: 50px 0;
	}

	.rule-card {
		padding: 34px 24px 28px;
	}
}

/* ====== Programs page ====== */

.programs-rows-section {
	padding: 80px 0;
	background: url("images/4-light-grey-bg-scaled.jpg") center / cover no-repeat;
}

.programs-row {
	width: 80%;
	max-width: 1180px;
	margin: 0 auto 80px;
	display: grid;
	grid-template-columns: 1fr 1.3fr;
	column-gap: 8%;
	align-items: center;
}

.programs-row:last-child {
	margin-bottom: 0;
}

.programs-row--reverse {
	grid-template-columns: 1.3fr 1fr;
}

.programs-row-image img {
	width: 100%;
	height: auto;
	display: block;
}

.programs-row-title {
	font-family: var(--font-display);
	font-size: clamp(22px, 2.2vw, 30px);
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-navy);
	letter-spacing: 1px;
	margin-bottom: 20px;
}

.programs-row-body p {
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.7;
	color: var(--color-navy);
	margin-bottom: 14px;
}

.programs-row-cta {
	color: var(--color-magenta);
	font-style: italic;
}

.programs-row-cta a {
	color: var(--color-magenta);
	text-decoration: underline;
	font-weight: 700;
}

.programs-faq-section {
	padding: 80px 0;
	background: #f5d6f5;
	text-align: center;
}

.programs-faq-title {
	font-family: var(--font-display);
	font-size: clamp(28px, 3vw, 38px);
	font-weight: 700;
	color: var(--color-navy);
	text-transform: uppercase;
	letter-spacing: 1px;
	margin-bottom: 14px;
}

.programs-faq-subtitle {
	font-family: var(--font-body);
	color: var(--color-magenta);
	font-style: italic;
	font-weight: 600;
	width: 80%;
	margin: 0 auto 36px;
}

.programs-faq-card {
	width: 80%;
	max-width: 920px;
	margin: 0 auto;
	background: var(--color-white);
	padding: 40px 48px;
	text-align: left;
	box-shadow: 0 2px 14px rgba(0, 0, 0, 0.06);
}

.programs-faq-list dt {
	font-family: var(--font-body);
	font-weight: 700;
	color: var(--color-navy);
	font-size: 14px;
	margin-top: 18px;
	margin-bottom: 6px;
}

.programs-faq-list dt:first-child {
	margin-top: 0;
}

.programs-faq-list dd {
	margin: 0 0 14px 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text);
	border-bottom: 1px solid #eee;
	padding-bottom: 14px;
}

.programs-faq-list dd:last-of-type {
	border-bottom: 0;
}

.programs-faq-q,
.programs-faq-a {
	color: var(--color-magenta);
	font-weight: 700;
	margin-right: 4px;
}

.programs-testimonials {
	position: relative;
	padding: 80px 0;
	background: var(--color-white);
	text-align: center;
	overflow: hidden;
}

.programs-testimonials-art {
	position: absolute;
	width: clamp(90px, 12vw, 180px);
	height: auto;
	pointer-events: none;
	z-index: 0;
}

.programs-testimonials-art--tl {
	top: 0;
	left: 0;
}

.programs-testimonials-art--br {
	bottom: 0;
	right: 0;
}

.programs-testimonials-title,
.programs-testimonials-grid,
.programs-testimonials-cta {
	position: relative;
	z-index: 1;
}

.programs-testimonials-title {
	font-family: var(--font-display);
	font-size: clamp(22px, 2.4vw, 30px);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 1px;
	color: var(--color-navy);
	margin-bottom: 36px;
}

.programs-testimonials-grid {
	width: 86%;
	max-width: 1100px;
	margin: 0 auto 36px;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 36px;
}

.programs-testimonial blockquote {
	font-style: italic;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-text);
	margin: 0 0 16px;
	quotes: none;
}

.programs-testimonial figcaption {
	font-size: 13px;
	color: var(--color-text);
}

.programs-testimonial figcaption strong {
	color: var(--color-navy);
	font-weight: 700;
}

.programs-testimonials-cta {
	display: inline-block;
	background: var(--color-white);
	color: var(--color-magenta);
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	padding: 12px 36px;
	border: 2px solid var(--color-magenta);
	cursor: pointer;
	transform: skewX(-14deg);
	transition: background 0.25s ease, color 0.25s ease, transform 0.25s ease;
}

.programs-testimonials-cta > span {
	display: inline-block;
	transform: skewX(14deg);
}

.programs-testimonials-cta:hover,
.programs-testimonials-cta:focus {
	background: var(--color-magenta);
	color: var(--color-white);
	transform: skewX(-14deg) translateY(-2px);
}

@media (max-width: 980px) {
	.programs-row,
	.programs-row--reverse {
		grid-template-columns: 1fr;
		row-gap: 24px;
		margin-bottom: 50px;
	}

	.programs-row--reverse .programs-row-image {
		order: -1;
	}

	.programs-testimonials-grid {
		grid-template-columns: 1fr;
		gap: 28px;
	}

	.programs-faq-card {
		padding: 28px 22px;
	}
}

/* ====== Video modal ====== */

.video-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	display: none;
	align-items: center;
	justify-content: center;
	padding: 24px;
}

.video-modal.is-open {
	display: flex;
}

.video-modal-backdrop {
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.85);
	cursor: pointer;
}

.video-modal-dialog {
	position: relative;
	width: 100%;
	max-width: 1100px;
	aspect-ratio: 16 / 9;
}

.video-modal-frame-wrap {
	position: absolute;
	inset: 0;
	background: #000000;
}

.video-modal-frame {
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.video-modal-close {
	position: absolute;
	top: -44px;
	right: 0;
	background: transparent;
	border: 0;
	color: var(--color-white);
	font-size: 36px;
	line-height: 1;
	padding: 0 6px;
	cursor: pointer;
	transition: color 0.2s ease;
}

.video-modal-close:hover,
.video-modal-close:focus {
	color: var(--color-magenta);
}

body.video-modal-open {
	overflow: hidden;
}