@font-face {
	font-family: 'Flama Ultra Condensed';
	src: url('../fonts/FlamaUltraCondensed-Light.eot');
	src: local('Flama Ultra Condensed Light'), local('FlamaUltraCondensed-Light'),
		url('../fonts/FlamaUltraCondensed-Light.eot?#iefix')
			format('embedded-opentype'),
		url('../fonts/FlamaUltraCondensed-Light.woff2') format('woff2'),
		url('../fonts/FlamaUltraCondensed-Light.woff') format('woff'),
		url('../fonts/FlamaUltraCondensed-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Flama Ultra Condensed';
	src: url('../fonts/FlamaUltraCondensed-Medium.eot');
	src: local('Flama Ultra Condensed Medium'),
		local('FlamaUltraCondensed-Medium'),
		url('../fonts/FlamaUltraCondensed-Medium.eot?#iefix')
			format('embedded-opentype'),
		url('../fonts/FlamaUltraCondensed-Medium.woff2') format('woff2'),
		url('../fonts/FlamaUltraCondensed-Medium.woff') format('woff'),
		url('../fonts/FlamaUltraCondensed-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Flama Ultra Condensed';
	src: url('../fonts/FlamaUltraCondensed-Book.eot');
	src: local('Flama Ultra Condensed Book'), local('FlamaUltraCondensed-Book'),
		url('../fonts/FlamaUltraCondensed-Book.eot?#iefix')
			format('embedded-opentype'),
		url('../fonts/FlamaUltraCondensed-Book.woff2') format('woff2'),
		url('../fonts/FlamaUltraCondensed-Book.woff') format('woff'),
		url('../fonts/FlamaUltraCondensed-Book.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Flama Ultra Condensed';
	src: url('../fonts/FlamaUltraCondensed-Semibold.eot');
	src: local('Flama Ultra Condensed Semibold'),
		local('FlamaUltraCondensed-Semibold'),
		url('../fonts/FlamaUltraCondensed-Semibold.eot?#iefix')
			format('embedded-opentype'),
		url('../fonts/FlamaUltraCondensed-Semibold.woff2') format('woff2'),
		url('../fonts/FlamaUltraCondensed-Semibold.woff') format('woff'),
		url('../fonts/FlamaUltraCondensed-Semibold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Flama Ultra Condensed';
	src: url('../fonts/FlamaUltraCondensed-Black.eot');
	src: local('Flama Ultra Condensed Black'), local('FlamaUltraCondensed-Black'),
		url('../fonts/FlamaUltraCondensed-Black.eot?#iefix')
			format('embedded-opentype'),
		url('../fonts/FlamaUltraCondensed-Black.woff2') format('woff2'),
		url('../fonts/FlamaUltraCondensed-Black.woff') format('woff'),
		url('../fonts/FlamaUltraCondensed-Black.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Flama Ultra Condensed';
	src: url('../fonts/FlamaUltraCondensed-Bold.eot');
	src: local('Flama Ultra Condensed Bold'), local('FlamaUltraCondensed-Bold'),
		url('../fonts/FlamaUltraCondensed-Bold.eot?#iefix')
			format('embedded-opentype'),
		url('../fonts/FlamaUltraCondensed-Bold.woff2') format('woff2'),
		url('../fonts/FlamaUltraCondensed-Bold.woff') format('woff'),
		url('../fonts/FlamaUltraCondensed-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Flama Ultra Condensed';
	src: url('../fonts/FlamaUltraCondensed-Extrabold.eot');
	src: local('Flama Ultra Condensed Extrabold'),
		local('FlamaUltraCondensed-Extrabold'),
		url('../fonts/FlamaUltraCondensed-Extrabold.eot?#iefix')
			format('embedded-opentype'),
		url('../fonts/FlamaUltraCondensed-Extrabold.woff2') format('woff2'),
		url('../fonts/FlamaUltraCondensed-Extrabold.woff') format('woff'),
		url('../fonts/FlamaUltraCondensed-Extrabold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Flama';
	src: url('../fonts/Flama-Light.eot');
	src: local('Flama-Light'),
		url('../fonts/Flama-Light.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Flama-Light.woff2') format('woff2'),
		url('../fonts/Flama-Light.woff') format('woff'),
		url('../fonts/Flama-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Flama';
	src: url('../fonts/Flama-Book.eot');
	src: local('Flama-Book'),
		url('../fonts/Flama-Book.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Flama-Book.woff2') format('woff2'),
		url('../fonts/Flama-Book.woff') format('woff'),
		url('../fonts/Flama-Book.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Flama';
	src: url('../fonts/Flama-Medium.eot');
	src: local('Flama-Medium'),
		url('../fonts/Flama-Medium.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Flama-Medium.woff2') format('woff2'),
		url('../fonts/Flama-Medium.woff') format('woff'),
		url('../fonts/Flama-Medium.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}
@font-face {
	font-family: 'Flama';
	src: url('../fonts/Flama-Semibold.eot');
	src: local('Flama-Semibold'),
		url('../fonts/Flama-Semibold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Flama-Semibold.woff2') format('woff2'),
		url('../fonts/Flama-Semibold.woff') format('woff'),
		url('../fonts/Flama-Semibold.ttf') format('truetype');
	font-weight: 700;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Flama';
	src: url('../fonts/Flama-Black.eot');
	src: local('Flama-Black'),
		url('../fonts/Flama-Black.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Flama-Black.woff2') format('woff2'),
		url('../fonts/Flama-Black.woff') format('woff'),
		url('../fonts/Flama-Black.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Flama';
	src: url('../fonts/Flama-Extrabold.eot');
	src: local('Flama-Extrabold'),
		url('../fonts/Flama-Extrabold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Flama-Extrabold.woff2') format('woff2'),
		url('../fonts/Flama-Extrabold.woff') format('woff'),
		url('../fonts/Flama-Extrabold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Flama';
	src: url('../fonts/Flama-Bold.eot');
	src: local('Flama-Bold'),
		url('../fonts/Flama-Bold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/Flama-Bold.woff2') format('woff2'),
		url('../fonts/Flama-Bold.woff') format('woff'),
		url('../fonts/Flama-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Flama Condensed';
	src: url('../fonts/FlamaCondensed-Light.eot');
	src: local('Flama Condensed Light'), local('FlamaCondensed-Light'),
		url('../fonts/FlamaCondensed-Light.eot?#iefix') format('embedded-opentype'),
		url('../fonts/FlamaCondensed-Light.woff2') format('woff2'),
		url('../fonts/FlamaCondensed-Light.woff') format('woff'),
		url('../fonts/FlamaCondensed-Light.ttf') format('truetype');
	font-weight: 300;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Flama Condensed';
	src: url('../fonts/FlamaCondensed-Basic.eot');
	src: local('Flama Condensed Basic'), local('FlamaCondensed-Basic'),
		url('../fonts/FlamaCondensed-Basic.eot?#iefix') format('embedded-opentype'),
		url('../fonts/FlamaCondensed-Basic.woff2') format('woff2'),
		url('../fonts/FlamaCondensed-Basic.woff') format('woff'),
		url('../fonts/FlamaCondensed-Basic.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Flama Condensed';
	src: url('../fonts/FlamaCondensed-Medium.eot');
	src: local('Flama Condensed Medium'), local('FlamaCondensed-Medium'),
		url('../fonts/FlamaCondensed-Medium.eot?#iefix') format('embedded-opentype'),
		url('../fonts/FlamaCondensed-Medium.woff2') format('woff2'),
		url('../fonts/FlamaCondensed-Medium.woff') format('woff'),
		url('../fonts/FlamaCondensed-Medium.ttf') format('truetype');
	font-weight: 500;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Flama Condensed';
	src: url('../fonts/FlamaCondensed-Semibold.eot');
	src: local('Flama Condensed Semibold'), local('FlamaCondensed-Semibold'),
		url('../fonts/FlamaCondensed-Semibold.eot?#iefix')
			format('embedded-opentype'),
		url('../fonts/FlamaCondensed-Semibold.woff2') format('woff2'),
		url('../fonts/FlamaCondensed-Semibold.woff') format('woff'),
		url('../fonts/FlamaCondensed-Semibold.ttf') format('truetype');
	font-weight: 600;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Flama Condensed';
	src: url('../fonts/FlamaCondensed-Bold.eot');
	src: local('Flama Condensed Bold'), local('FlamaCondensed-Bold'),
		url('../fonts/FlamaCondensed-Bold.eot?#iefix') format('embedded-opentype'),
		url('../fonts/FlamaCondensed-Bold.woff2') format('woff2'),
		url('../fonts/FlamaCondensed-Bold.woff') format('woff'),
		url('../fonts/FlamaCondensed-Bold.ttf') format('truetype');
	font-weight: bold;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Flama Condensed';
	src: url('../fonts/FlamaCondensed-Extrabold.eot');
	src: local('Flama Condensed Extrabold'), local('FlamaCondensed-Extrabold'),
		url('../fonts/FlamaCondensed-Extrabold.eot?#iefix')
			format('embedded-opentype'),
		url('../fonts/FlamaCondensed-Extrabold.woff2') format('woff2'),
		url('../fonts/FlamaCondensed-Extrabold.woff') format('woff'),
		url('../fonts/FlamaCondensed-Extrabold.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

@font-face {
	font-family: 'Flama Condensed';
	src: url('../fonts/FlamaCondensed-Black.eot');
	src: local('Flama Condensed Black'), local('FlamaCondensed-Black'),
		url('../fonts/FlamaCondensed-Black.eot?#iefix') format('embedded-opentype'),
		url('../fonts/FlamaCondensed-Black.woff2') format('woff2'),
		url('../fonts/FlamaCondensed-Black.woff') format('woff'),
		url('../fonts/FlamaCondensed-Black.ttf') format('truetype');
	font-weight: 900;
	font-style: normal;
	font-display: swap;
}

/* ============================================================
   VARIABLES
   ============================================================ */

:root {
	/* Colors */
	--color-black: #000;
	--color-white: #fff;
	--color-cyan: #00aeef;
	--color-cyan-light: rgba(0, 174, 239, 0.18);
	--color-cyan-faded: rgba(0, 174, 239, 0.3);
	--color-magenta: #ec008c;
	--color-yellow: #fff200;
	--color-gray-dark: #444;
	--color-gray-mid: #b2aeac;
	--color-gray-light: #c9c9c9;
	--color-gray-off: #e9e9e9;
	--color-gray-pale: #ededed;

	/* Typography scale */
	--text-xs: 12px;
	--text-sm: 14px;
	--text-md: 16px;
	--text-18: 18px;
	--text-lg: 20px;
	--text-xl: 24px;
	--text-2xl: 32px;

	/* Overlay colors */
	--color-black-op20: rgba(0, 0, 0, 0.2);
	--color-black-op55: rgba(0, 0, 0, 0.55);
	--color-white-op12: rgba(255, 255, 255, 0.12);
	--color-white-op65: rgba(255, 255, 255, 0.65);
	--color-magenta-faded: rgba(236, 0, 140, 0.14);
	--color-cyan-tint: #c9eaf8;

	/* Fonts */
	--font-primary: 'Flama', 'Barlow', sans-serif;
	--font-condensed: 'Flama Condensed', 'Barlow Condensed', sans-serif;
	--font-ultra: 'Flama Ultra Condensed', 'Barlow Condensed', sans-serif;

	/* Spacing */
	--sp-4: 4px;
	--sp-8: 8px;
	--sp-10: 10px;
	--sp-12: 12px;
	--sp-14: 14px;
	--sp-16: 16px;
	--sp-18: 18px;
	--sp-20: 20px;
	--sp-22: 22px;
	--sp-24: 24px;
	--sp-26: 26px;
	--sp-28: 28px;
	--sp-32: 32px;
	--sp-34: 34px;
	--sp-36: 36px;
	--sp-40: 40px;
	--sp-42: 40px;
	--sp-44: 44px;
	--sp-48: 48px;
	--sp-56: 56px;
	--sp-64: 64px;
	--sp-80: 80px;
	--sp-96: 96px;
	--sp-128: 128px;
	--sp-192: 192px;

	/* Border radius */
	--radius-sm: 0;
	--radius-md: 0;
	--radius-lg: 0;

	/* Grid */
	--grid-columns: 12;
	--grid-gutter: 24px;
	--container-max: 1140px;
	--container-padding: 48px;
}

/* ============================================================
   BASE RESET
   ============================================================ */

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

html {
	font-size: 16px;
	-webkit-text-size-adjust: 100%;
}

body {
	margin: 0;
	padding: 0;
	font-family: var(--font-primary);
	font-size: 16px;
	color: var(--color-black);
	background: var(--color-white);
	line-height: 1.2;
}

img,
svg {
	display: block;
	max-width: 100%;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
	margin: 0;
}

a {
	color: inherit;
}

button {
	font-family: inherit;
}

/* ============================================================
   GRID SYSTEM
   ============================================================ */

.container {
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--container-padding);
	padding-right: var(--container-padding);
	width: 100%;
}

.row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -12px;
	margin-right: -12px;
}

[class*='col-'] {
	padding-left: 12px;
	padding-right: 12px;
	box-sizing: border-box;
}

.col-1 {
	width: 8.3333%;
}
.col-2 {
	width: 16.6667%;
}
.col-3 {
	width: 25%;
}
.col-4 {
	width: 33.3333%;
}
.col-5 {
	width: 41.6667%;
}
.col-6 {
	width: 50%;
}
.col-7 {
	width: 58.3333%;
}
.col-8 {
	width: 66.6667%;
}
.col-9 {
	width: 75%;
}
.col-10 {
	width: 83.3333%;
}
.col-11 {
	width: 91.6667%;
}
.col-12 {
	width: 100%;
}

/* ============================================================
   UTILITIES
   ============================================================ */

/* Buttons */
.btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-18);
	padding: var(--sp-10) var(--sp-24);
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	border: 2px solid transparent;
	text-decoration: none;
	cursor: pointer;
	transition: all 0.4s;
	width: max-content;
	justify-content: center;
}
.btn--full-width {
	width: 100%;
	justify-content: center;
}
.btn--magenta {
	background: var(--color-magenta);
	color: var(--color-white);
	border-color: var(--color-magenta);
}

.btn--magenta:hover {
	border-color: var(--color-cyan);
	color: var(--color-cyan);
	border-radius: 10px 0;
	background: var(--color-cyan-light);
}

.btn--outline-white {
	background: transparent;
	border-color: var(--color-white);
	color: var(--color-white);
	background: transparent;
}

.btn--outline-white:hover {
	border-color: var(--color-cyan);
	color: var(--color-cyan);
	border-radius: 10px 0;
}

.btn--outline-magenta {
	background: transparent;
	border-color: var(--color-magenta);
	color: var(--color-magenta);
}

.btn--outline-magenta:hover {
	border-color: var(--color-cyan);
	color: var(--color-cyan);
	border-radius: 10px 0;
	background: transparent;
}

.btn--outline-black {
	background: transparent;
	border-color: var(--color-black);
	color: var(--color-black);
}

.btn--outline-black:hover {
	border-color: var(--color-cyan);
	color: var(--color-cyan);
	border-radius: 10px 0;
}

.btn--sm {
	padding: var(--sp-8) var(--sp-16);
	font-size: 14px;
}

/* Chip */
.chip {
	display: inline-block;
	padding: var(--sp-4) var(--sp-10);
	border: 1px solid var(--color-black);
	font-size: 12px;
	font-weight: 700;
	text-transform: uppercase;
	background: transparent;
}

/* Screen reader only */
.sr-only {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ============================================================
   COMPONENT: SITE-HEADER
   ============================================================ */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: transparent;
}

.site-header__top-bar {
	background: var(--color-cyan);
	color: var(--color-black);
	text-align: center;
	padding: var(--sp-14) 0;
	font-size: 16px;
}

.site-header__top-bar-inner {
	overflow: hidden;
	width: 100%;
	position: relative;
}

.site-header__top-arrow {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--color-black);
	padding: var(--sp-8);
	z-index: 10;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
}

.site-header__top-arrow--prev {
	left: var(--sp-16);
}

.site-header__top-arrow--next {
	right: var(--sp-16);
}

.site-header__announcement {
	font-family: var(--font-primary);
	margin: 0;
	font-weight: 400;
}

.site-header__announcement-link {
	font-weight: 700;
	font-family: var(--font-primary);
	text-decoration: none;
}

.site-header__main {
	background: var(--color-black);
}

.site-header__main-inner {
	display: flex;
	align-items: center;
	padding: var(--sp-10) 0;
}

.site-header__logo {
	display: flex;
	align-items: center;
	text-decoration: none;
	flex-shrink: 0;
}

.site-header__nav {
	display: flex;
	gap: var(--sp-48);
	margin-left: auto;
	justify-content: center;
}

.site-header__nav-link {
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	position: relative;
	transition: all 0.4s;
}

.site-header__nav-link:hover,
.site-header__nav-link--active {
	color: var(--color-cyan);
}

.site-header__actions {
	margin-left: auto;
	flex-shrink: 0;
	margin-right: 0;
	display: flex;
	justify-content: flex-end;
}

.site-header__burger {
	display: none;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: var(--sp-8);
	flex-direction: column;
	gap: 6px;
	flex-shrink: 0;
}

.site-header__burger-bar {
	display: block;
	width: 24px;
	height: 2px;
	background: var(--color-white);
	border-radius: 1px;
	transition: transform 0.4s, opacity 0.4s;
}

/* Body scroll lock */
body.scroll-locked {
	overflow: hidden;
}

/* === MOBILE MENU PANEL === */

.site-header__overlay {
	display: none;
}

.site-header__mobile-menu {
	display: none;
	position: fixed;
	top: 0;
	right: 0;
	width: 100%;
	height: 100vh;
	background: var(--color-black);
	z-index: 300;
	flex-direction: column;
	overflow-y: auto;
	transform: translateX(100%);
	visibility: hidden;
	transition: transform 0.35s ease, visibility 0s linear 0.35s;
}

.site-header__mobile-header {
	height: var(--sp-56);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	padding-right: var(--sp-16);
	flex-shrink: 0;
}

.site-header__mobile-close {
	background: transparent;
	border: none;
	cursor: pointer;
	color: var(--color-white);
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	width: var(--sp-24);
	height: var(--sp-24);
}

.site-header__mobile-nav {
	list-style: none;
	margin: 0;
	padding: var(--sp-48) var(--sp-16) 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-48);
	flex: 1;
}

.site-header__mobile-trigger {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: var(--text-xl);
	font-weight: 700;
	text-transform: uppercase;
	text-decoration: none;
	min-height: var(--sp-24);
}

.site-header__mobile-chevron {
	color: var(--color-white);
	transition: transform 0.3s ease;
	flex-shrink: 0;
}

.site-header__mobile-item--is-open .site-header__mobile-chevron {
	transform: rotate(180deg);
}

.site-header__mobile-sub {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.35s ease;
}

.site-header__mobile-item--is-open .site-header__mobile-sub {
	max-height: 400px;
}

.site-header__mobile-sub-link {
	display: block;
	color: var(--color-gray-pale);
	font-family: var(--font-condensed);
	font-size: var(--text-18);
	font-weight: 400;
	text-decoration: none;
	padding: var(--sp-24) 0;
	border-bottom: 1px solid var(--color-magenta);
}

.site-header__mobile-sub li:first-child .site-header__mobile-sub-link {
	padding-top: 0;
}

.site-header__mobile-social {
	display: flex;
	align-items: center;
	gap: var(--sp-40);
	padding: var(--sp-64) var(--sp-16) var(--sp-48);
	margin-top: auto;
	flex-shrink: 0;
}

.site-header__mobile-social-link {
	color: var(--color-white);
	display: flex;
	align-items: center;
	justify-content: center;
	line-height: 0;
	text-decoration: none;
}

/* Menu open state — triggered by .site-header--open on <header> */
.site-header--open .site-header__mobile-menu {
	transform: translateX(0);
	visibility: visible;
	transition: transform 0.35s ease, visibility 0s linear 0s;
}

.site-header--open .site-header__overlay {
	display: block;
	position: fixed;
	inset: 0;
	background: var(--color-black-op55);
	z-index: 200;
}

.site-header__donate-icon {
	display: none;
	color: var(--color-white);
	align-items: center;
	justify-content: center;
	text-decoration: none;
	line-height: 0;
	flex-shrink: 0;
}

/* ============================================================
   MEGA MENU
   ============================================================ */

.site-header__main {
	position: relative;
}

.site-header__nav {
	position: static;
}

.nav-item {
	position: static;
	display: flex;
	align-items: center;
}

.mega-menu {
	position: absolute;
	top: 100%;
	left: 0;
	width: 100%;
	z-index: 200;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-10px);
	transition: opacity 0.28s ease, transform 0.28s ease, visibility 0s 0.28s;
	pointer-events: none;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.18);
}

.mega-menu--open {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	transition: opacity 0.28s ease, transform 0.28s ease;
	pointer-events: auto;
}

/* ---- PROGRAMS (white background) ---- */
.mega-menu--programs {
	background: var(--color-white);
	border-top: 2px solid var(--color-black);
}

.mega-menu--programs .mega-menu__inner {
	display: flex;
	align-items: stretch;
	border: 1px solid #000;
	margin: 24px 0;
}

.mega-menu__list {
	flex: 1;
	border-right: 1px solid var(--color-black);
}

.mega-menu__aside {
	width: 300px;
	flex-shrink: 0;
}

.mega-menu--programs .mega-menu__item {
	min-height: 165px;
	display: flex;
	flex-direction: column;
	gap: var(--sp-8);
	padding: var(--sp-24);
	border-bottom: 1px solid #000;
	text-decoration: none;
	color: var(--color-black);
	transition: background 0.2s ease, color 0.2s ease;
	justify-content: flex-end;
}

.mega-menu--programs .mega-menu__item:last-child {
	border-bottom: none;
}

.mega-menu--programs .mega-menu__item:hover {
	background: var(--color-gray-off);
}

.mega-menu__aside .mega-menu__item {
	height: 100%;
	border-bottom: none;
	/*background: var(--color-gray-off);*/
}

.mega-menu__aside .mega-menu__item:hover {
	background: var(--color-gray-light);
}

/* ---- ABOUT + GET INVOLVED (black background) ---- */
.mega-menu--about,
.mega-menu--get-involved {
	background: var(--color-white);
}

.mega-menu--about .mega-menu__inner,
.mega-menu--get-involved .mega-menu__inner {
	display: flex;
	align-items: stretch;
	margin: 24px 0;
}

/* Photo card */
.mega-menu__card {
	flex: 1;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	/* color: var(--color-white); */
	border-right: 1px solid rgba(255, 255, 255, 0.1);
	overflow: hidden;
	transition: background 0.22s ease;
	padding: 24px;
	border: 1px solid #000;
	border-right: none;
	max-width: 33%;
}
.mega-menu__card:last-child {
	border-right: 1px solid #000;
}

.mega-menu__card:hover {
	background: #e9e9e9;
}

.mega-menu__card-img {
	overflow: hidden;
	display: block;
	width: 100%;
	aspect-ratio: 5 / 3;
	object-fit: cover;
	border: 2px solid var(--color-black);
	border-radius: 50px 0 50px 0;
}
.mega-menu__card-img-empty {
	overflow: hidden;
	display: block;
	width: 100%;
	aspect-ratio: 6 / 3;
	object-fit: cover;
}

.mega-menu__card-img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	filter: grayscale(20%);
	transition: transform 0.4s ease, filter 0.4s ease;
}

.mega-menu__card .mega-menu__item-title {
	padding: var(--sp-16) 0 0;
}

.mega-menu__card .mega-menu__item-desc {
	padding: 0;
}

/* CTA block (GET INVOLVED right column) */
.mega-menu__cta {
	width: 33%;
	flex-shrink: 0;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 24px;
	border: 1px solid #000;
	position: relative;
	overflow: hidden;
}

.mega-menu__cta .mega-menu__item-title {
	margin-bottom: var(--sp-12);
}

.mega-menu__cta-btn {
	margin-top: var(--sp-24);
	align-self: flex-start;
}

/* Overlay — two stacked nav cards */
.mega-menu__cta-overlay {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	background-color: var(--color-white);
	opacity: 0;
	pointer-events: none;
	transform: translateY(8px);
	transition: opacity 0.25s ease, transform 0.25s ease;
	z-index: 5;
}

.mega-menu__cta-overlay--open {
	opacity: 1;
	pointer-events: auto;
	transform: translateY(0);
}

.mega-menu__cta-overlay-close {
	position: absolute;
	top: var(--sp-8);
	right: var(--sp-8);
	width: 28px;
	height: 28px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 1px solid var(--color-black);
	cursor: pointer;
	color: var(--color-black);
	transition: background-color 0.2s ease;
	z-index: 6;
}

.mega-menu__cta-overlay-close:hover {
	background-color: #e9e9e9;
	color: var(--color-white);
}

.mega-menu__cta-link {
	flex: 1;
	display: flex;
	flex-direction: column;
	text-decoration: none;
	color: inherit;
	overflow: hidden;
	transition: background-color 0.2s ease;
}

.mega-menu__cta-link:hover {
	background-color: #e9e9e9;
}

.mega-menu__cta-link + .mega-menu__cta-link {
	border-top: 1px solid var(--color-black);
}

.mega-menu__cta-link__img {
	flex: 1;
	overflow: hidden;
	min-height: 64px;
}

.mega-menu__cta-link__img img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.mega-menu__cta-link__body {
	padding: var(--sp-10) var(--sp-12) var(--sp-12);
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.mega-menu__cta-link__title {
	font-family: var(--font-ultra);
	font-size: 32px;
	font-weight: 750;
	text-transform: uppercase;
	color: var(--color-black);
	line-height: 1;
	margin: 0;
}

.mega-menu__cta-link__text {
	font-family: var(--font-primary);
	font-size: 16px;
	color: var(--color-gray-dark);
	line-height: 1.4;
	margin: 0;
}

/* Shared text elements */
.mega-menu__item-title {
	font-family: var(--font-ultra);
	font-size: 32px;
	font-weight: 750;
	line-height: 1.1;
	margin: 0;
	transition: color 0.4s ease;
}

.mega-menu__item-desc {
	font-family: var(--font-primary);
	margin: 0;
}

/* ============================================================
   COMPONENT: HERO
   ============================================================ */

.hero {
	position: sticky;
	top: 0;
	height: 100vh;
	z-index: 0;
	overflow: hidden;
	background-size: cover;
	background-position: center top;
	background-repeat: no-repeat;
	display: flex;
	align-items: flex-start;
}

.hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.45);
	z-index: 0;
}

.hero__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding-top: var(--sp-48);
	display: flex;
	flex-direction: column;
	gap: var(--sp-32);
	justify-content: flex-start;
}

.hero__eyebrow {
	font-size: 18px;
	color: var(--color-yellow);
	font-family: var(--font-primary);
	font-weight: 700;
	line-height: 1.2;
}

.hero__heading {
	display: flex;
	flex-direction: column;
	font-family: var(--font-ultra);
	font-size: 17dvw;
	font-weight: 750;
	line-height: 0.74;
	color: var(--color-white);
	text-transform: uppercase;
	margin: 0;
	letter-spacing: -0.11dvw;
}

.hero__heading-line {
	display: block;
}

.hero__bottom-row {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-40);
}

.hero__heading-last {
	white-space: nowrap;
	flex-shrink: 0;
	margin: 0;
}

.hero__aside {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding-top: 14px;
	justify-content: center;
	height: 13vw;
}

.hero--pages .hero__aside {
	display: flex;
	flex-direction: column;
	gap: 0;
	padding-top: 0;
	justify-content: flex-start;
	height: 13vw;
}

.hero__text {
	font-family: var(--font-primary);
	font-size: 1.46vw;
	color: var(--color-white);
	line-height: 120%;
	font-weight: 400;
	margin-bottom: 24px;
}

/* ============================================================
   COMPONENT: NEWS
   ============================================================ */

.news {
	padding: var(--sp-24) 0;
}

.news__header {
	margin-bottom: var(--sp-32);
	display: flex;
	align-items: center;
}
.swiper-horizontal > .swiper-scrollbar,
.swiper-scrollbar.swiper-scrollbar-horizontal {
	position: absolute;
	left: 0;
	bottom: -20px;
	top: var(--swiper-scrollbar-top, auto);
	z-index: 50;
	height: var(--swiper-scrollbar-size, 4px);
	width: 100%;
}
.news__header-row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -12px;
	margin-right: -12px;
	align-items: flex-start;
}

.news__heading {
	font-family: var(--font-ultra);
	font-size: 75px;
	font-weight: 750;
	text-transform: uppercase;
	margin: 0;
}

.news__description {
	font-family: var(--font-primary);
	font-size: 16px;
	color: var(--color-black);
	line-height: 1.2;
	margin: 0;
	max-width: 335px;
	margin-left: 22px;
}

.news__slider-wrap {
	width: 100%;
	overflow: hidden;
	padding-bottom: var(--sp-24);
}

.news-swiper {
	overflow: visible;
	width: 100%;
}

.news-swiper .swiper-slide {
	width: 55%;
	opacity: 0.25;
	transition: opacity 0.4s;
}

.news-swiper .swiper-slide-active {
	opacity: 1;
}

.news-swiper__scrollbar {
	position: relative;
	height: 4px;
	width: 100%;
	background: rgba(236, 0, 140, 0.2);
	border-radius: 0;
	margin-top: var(--sp-24);
}

.news-swiper__scrollbar .swiper-scrollbar-drag {
	background: var(--color-magenta);
	border-radius: 0;
}

/* ============================================================
   FEATURED SECTION (events.html section 2)
   ============================================================ */

.featured {
	padding: var(--sp-24) 0;
}

.featured__tabs {
	display: inline-flex;
	gap: 0;
	margin-bottom: var(--sp-32);
	border-bottom: 2px solid var(--color-black);
}

.featured__tab {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: var(--sp-12) var(--sp-32);
	font-family: var(--font-ultra);
	font-size: 18px;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	border: none;
	background: transparent;
	cursor: pointer;
	color: var(--color-black);
	position: relative;
	transition: color 0.3s ease;
}

.featured__tab::after {
	content: '';
	position: absolute;
	bottom: -2px;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--color-magenta);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.35s ease;
}

.featured__tab--active,
.featured__tab:hover {
	color: var(--color-magenta);
}

.featured__tab--active::after {
	transform: scaleX(1);
}

.featured__panels-wrap {
	position: relative;
}

.featured__panel {
	width: 100%;
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.featured__panel:not(.featured__panel--active) {
	position: absolute;
	top: 0;
	left: 0;
	opacity: 0;
	transform: translateY(16px);
	pointer-events: none;
	visibility: hidden;
	transition: opacity 0.4s ease, transform 0.4s ease, visibility 0s 0.4s;
}

.featured__panel--active {
	opacity: 1;
	transform: translateY(0);
	pointer-events: auto;
	visibility: visible;
	transition: opacity 0.4s ease, transform 0.4s ease;
}

.featured__past-heading {
	font-family: var(--font-ultra);
	font-size: var(--fs-h2);
	text-transform: uppercase;
	margin: 0;
	padding: var(--sp-48) 0 var(--sp-32);
}

.featured__past-grid {
	gap: var(--sp-24) 0;
}

.featured__news-grid {
	padding-top: var(--sp-32);
}

/* ============================================================
   COMPONENT: EVENT-CARD
   ============================================================ */

.event-card {
	border-top: 2px solid var(--color-black);
	border-bottom: 2px solid var(--color-black);
	background: var(--color-white);
	display: flex;
	flex-direction: column;
	padding: var(--sp-20);
	height: 100%;
	cursor: pointer;
	transition: all 0.4s;
}
.event-card:hover {
	background-color: rgb(0 174 239 / 10%);
}
.swiper-slide-active .event-card {
	border-left: 2px solid var(--color-black);
	border-right: 2px solid var(--color-black);
}
.event-card__label {
	display: inline-flex;
	justify-content: flex-end;
}
.event-card__media {
	margin-bottom: 24px;
	margin-top: 30px;
}
.event-card__tag {
	border: 1px solid var(--color-black);
	padding: 8px 20px;
	font-family: var(--font-primary);
	font-size: 12px;
	font-weight: 700;
	background: transparent;
}

.event-card__img {
	display: block;
	width: 100%;
	aspect-ratio: 5 / 3;
	object-fit: cover;
	border: 2px solid var(--color-black);
	border-radius: 50px 0 50px 0;
}

.event-card__title {
	font-family: var(--font-condensed);
	font-size: 32px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-black);
	margin: 0;
	text-transform: capitalize;
}

.event-card__date {
	display: block;
	color: var(--color-cyan);
	font-size: 20px;
	font-weight: 600;
	text-transform: uppercase;
	font-family: var(--font-condensed);
	letter-spacing: -0.4px;
	margin-top: 10px;
}

.event-card__text {
	font-size: 16px;
	color: var(--color-black);
	flex: 1;
	margin: 0;
	line-height: 1.3;
	margin-top: 10px;
	margin-bottom: 26px;
}

.event-card__footer {
	display: flex;
	justify-content: center;
	margin-top: auto;
}

/* ============================================================
   COMPONENT: MISSION
   ============================================================ */

.mission {
	padding: var(--sp-128) 0;
	min-height: 100vh;
	display: flex;
	align-items: center;
}

.mission__text {
	font-family: var(--font-ultra);
	font-size: 80px;
	font-weight: 750;
	line-height: 1;
	text-transform: uppercase;
	text-align: center;
	margin: auto;
	max-width: 966px;
	letter-spacing: -1.6px;
}

.mission__word {
	display: inline;
	color: rgba(0, 174, 239, 0.25);
	transition: color 0.5s ease;
}

.mission__word--revealed {
	color: rgba(0, 174, 239, 1);
}

.mission__actions {
	display: flex;
	gap: var(--sp-16);
	justify-content: center;
	margin-top: var(--sp-20);
}

/* ============================================================
   COMPONENT: BANNER
   ============================================================ */

.banner {
	position: relative;
	width: 100%;
	min-height: 623px;
	background-size: cover;
	background-position: center;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: rgba(0, 0, 0, 0.35);
	z-index: 0;
}

.banner__inner {
	position: relative;
	z-index: 1;
	width: 100%;
	padding: var(--sp-64) var(--sp-48);
	text-align: center;
}

.banner__text {
	color: var(--color-white);
	font-family: var(--font-ultra);
	font-size: 42px;
	font-weight: 750;
	text-transform: uppercase;
	margin: 0;
	letter-spacing: -1px;
}

/* ============================================================
   COMPONENT: PROGRAMS
   ============================================================ */

.programs {
	padding: var(--sp-34) 0;
	overflow: hidden;
}

.programs__intro {
	margin-bottom: var(--sp-48);
}

.programs__intro-row {
	display: flex;
	flex-wrap: wrap;
	margin-left: -12px;
	margin-right: -12px;
	align-items: flex-start;
}

.programs__persona {
	padding-left: 12px;
	padding-right: 12px;
	width: 100%;
	box-sizing: border-box;
}

.programs__description-col {
	padding-left: 12px;
	padding-right: 12px;
	width: 50%;
	box-sizing: border-box;
}

.programs__persona-prefix {
	font-family: var(--font-ultra);
	font-size: 148px;
	font-weight: 750;
	line-height: 0.9;
	text-transform: uppercase;
	color: var(--color-black);
	margin: 0;
}

.programs__persona-select {
	width: max-content;
	position: relative;
}

.programs__persona-btn {
	display: inline-flex;
	align-items: flex-end;
	gap: var(--sp-16);
	background: transparent;
	border: none;
	cursor: pointer;
	padding: 0;
	font-family: var(--font-ultra);
	font-size: 148px;
	font-weight: 750;
	line-height: 0.9;
	text-transform: uppercase;
	color: var(--color-magenta);
	position: relative;
	letter-spacing: -3px;
}

.programs__persona-btn::before {
	content: '';
	display: block;
	flex-shrink: 0;
	width: 0;
	height: 0;
	border-left: 34px solid transparent;
	border-right: 34px solid transparent;
	border-top: 32px solid var(--color-magenta);
	margin-bottom: 12px;
	transition: transform 0.3s ease;
	position: absolute;
	right: -75px;
	top: 0;
	bottom: 0;
	margin: auto;
}

.programs__persona-btn[aria-expanded='true']::before {
	transform: rotate(180deg);
}

.programs__persona-dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 10;
	background: var(--color-white);
	border: 2px solid var(--color-black);
	min-width: 840px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.programs__persona-option {
	padding: var(--sp-10) var(--sp-24);
	font-family: var(--font-ultra);
	text-transform: uppercase;
	cursor: pointer;
	line-height: 1;
	font-size: 148px;
	font-weight: 750;
	line-height: 0.9;
	color: var(--color-magenta);
	letter-spacing: -3px;
	transition: all 0.4s;
}

.programs__persona-option:hover {
	background: #ec008c25;
}

.programs__persona-option[aria-selected='true'] {
	color: var(--color-cyan);
	border-left: 10px solid;
}

.programs__persona-option[aria-selected='true']:hover {
	background: var(--color-cyan-light);
}
.programs__description {
	font-size: 16px;
	color: var(--color-black);
	line-height: 120%;
	max-width: 480px;
	margin: 0;
}

.programs__slider-wrap {
	width: 100%;
	padding-bottom: var(--sp-24);
	margin-top: var(--sp-40);
}

.programs-swiper {
	overflow: visible;
	width: 100%;
}

.programs-swiper .swiper-slide {
	transition: opacity 0.4s;
	border-top: 2px solid var(--color-black);
	border-bottom: 2px solid var(--color-black);
	border-left: 2px solid var(--color-black);
}
.programs-swiper .swiper-slide .event-card {
	border: none;
}

.programs-swiper .swiper-slide-active {
	opacity: 1;
}
.programs-swiper .swiper-slide:nth-last-child(1) {
	border-right: 2px solid var(--color-black);
}
.programs-swiper__scrollbar {
	position: relative;
	height: 4px;
	width: 100%;
	background: rgba(236, 0, 140, 0.2);
	border-radius: 0;
	margin-top: var(--sp-24);
}

.programs-swiper__scrollbar .swiper-scrollbar-drag {
	background: var(--color-magenta);
	border-radius: 0;
}

/* ============================================================
   COMPONENT: INVOLVED
   ============================================================ */

.involved {
	position: relative;
	padding: 20px 0;
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.involved__heading {
	font-family: var(--font-ultra);
	font-size: 148px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	color: var(--color-black);
	margin: 0 0 var(--sp-32);
}

/* Mobile select — hidden by default, shown at 768px */
.involved__tabs-select {
	display: none;
}

.involved__tabs {
	display: inline-flex;
	gap: 0;
	margin-bottom: var(--sp-48);
	border-right: 2px solid #000;
	flex-direction: row;
	justify-content: flex-start;
	flex-wrap: nowrap;
}

.involved__tabs--full {
	display: flex;
	width: 100%;
	border-right: 2px solid #000;
}

.involved__tabs--full .involved__tab {
	flex: 1;
	min-width: 0;
}

.involved__tab {
	display: inline-flex;
	justify-content: center;
	align-items: center;
	min-width: 200px;
	padding: 14px 39px;
	font-family: var(--font-ultra);
	font-size: 32px;
	background: transparent;
	border: 2px solid #000000;
	cursor: pointer;
	transition: background 0.4s, color 0.4s;
	color: #b2aeac;
	font-weight: 750;
	text-transform: uppercase;
	line-height: 1;
	border-right: none;
}

.involved__tab--active,
.involved__tab:hover {
	color: var(--color-white);
	border: 2px solid #000;
	background: var(--color-cyan);
	border-right: none;
}

.involved__panel {
	display: flex;
	gap: var(--sp-48);
	align-items: center;
	overflow: hidden;
}

.involved__panel--hidden {
	display: none;
}

.involved__media {
	flex: 0 0 50%;
	margin-right: 20px;
}

.involved__img {
	width: 100%;
	display: block;
	object-fit: cover;
}

.involved__content {
	flex: 1;
	display: flex;
	flex-direction: column;
	gap: 0px;
	height: 100%;
	justify-content: center;
	max-width: 570px;
}

.involved__label {
	font-family: var(--font-ultra);
	font-size: 24px;
	font-weight: 750;
	color: var(--color-cyan);
	text-transform: uppercase;
	margin-bottom: 16px;
}

.involved__text {
	font-size: 16px;
	line-height: 120%;
	color: var(--color-black);
	margin: 0;
	margin-bottom: 25px;
}

.involved__list {
	margin: 0;
	padding: 0;
	padding-left: var(--sp-20);
	list-style: disc;
}

.involved__list li {
	font-size: 16px;
	line-height: 120%;
	color: var(--color-black);
	margin-bottom: var(--sp-8);
}

/* ============================================================
   COMPONENT: SITE-FOOTER
   ============================================================ */

.site-footer {
	background: var(--color-white);
	color: var(--color-black);
}

.site-footer__main {
	padding: var(--sp-64) 0;
}

.site-footer__brand {
	display: flex;
	flex-direction: column;
	gap: var(--sp-16);
	box-sizing: border-box;
}

.site-footer__logo {
	text-decoration: none;
	display: block;
}

.site-footer__stay-label {
	font-family: var(--font-primary);
	font-size: 14px;
	color: var(--color-black);
	text-transform: uppercase;
	margin: 0;
	margin-top: 5px;
}

.site-footer__stay-text {
	font-size: 18px;
	color: var(--color-black);
	line-height: 120%;
	max-width: 348px;
	margin: 0;
	font-weight: 700;
	margin-top: 0;
}

.site-footer__form {
	display: flex;
	flex-direction: column;
	gap: var(--sp-8);
}

.site-footer__form-row {
	display: flex;
}

.site-footer__input {
	flex: 1;
	background: transparent;
	border: none;
	border-bottom: 1px solid var(--color-black);
	color: var(--color-black);
	padding: var(--sp-8) 0;
	font-size: 16px;
	outline: none;
	font-family: var(--font-primary);
}

.site-footer__input::placeholder {
	color: var(--color-black);
}

.site-footer__submit {
	background: var(--color-magenta);
	border: none;
	color: var(--color-black);
	cursor: pointer;
	padding: var(--sp-8);
	width: 40px;
	height: 40px;
	display: flex;
	align-content: center;
	align-items: center;
	justify-content: center;
	border-radius: 50%;
}
.site-footer__grid {
	display: flex;
	align-items: flex-start;
	gap: var(--sp-48);
}

.site-footer__brand-col {
	flex: 0 0 372px;
}

.site-footer__spacer {
	flex: 1;
}

.site-footer__nav-group {
	display: flex;
	flex-direction: column;
	gap: var(--sp-64);
	flex: 0 0 auto;
	min-width: 160px;
}

.site-footer__nav-col {
	display: flex;
	flex-direction: column;
}

.site-footer__nav-heading {
	font-family: var(--font-primary);
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-black);
	margin: 0 0 var(--sp-8);
}

.site-footer__nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--sp-8);
	min-height: 100px;
}

.site-footer__nav-link {
	color: var(--color-black);
	text-decoration: none;
	font-size: 16px;
}

.site-footer__nav-link:hover {
	color: var(--color-magenta);
}

.site-footer__back-top {
	font-family: var(--font-primary);
	font-size: 18px;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--color-dark);
	margin: 0 0 var(--sp-8);
	text-decoration: underline;
}

.site-footer__bottom {
	padding: var(--sp-24) 0;
}

.site-footer__bottom-inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.site-footer__copyright {
	font-size: 14px;
	color: var(--color-black);
	margin: 0;
}

.site-footer__legal {
	display: flex;
	gap: var(--sp-24);
	justify-content: flex-end;
}

.site-footer__legal-link {
	color: var(--color-black);
	font-size: 14px;
	text-decoration: none;
}

.site-footer__legal-link:hover {
	color: var(--color-black);
}

/* ============================================================
   SWIPER CUSTOMIZATIONS
   ============================================================ */

/* Announcement swiper */
#announcementSwiper .swiper-wrapper {
	align-items: center;
}

#announcementSwiper .swiper-slide {
	text-align: center;
}

/* News swiper container offset */
.news__slider-wrap .container {
	overflow: visible;
}

/* ============================================================
   MEDIA QUERIES — DESKTOP FIRST, max-width only
   Order: 1440 → 1200 → 992 → 768
   ============================================================ */

/* ---- 1440px ---- */
@media (max-width: 1440px) {
	/* col-xl-* */
	.col-xl-1 {
		width: 8.3333%;
	}
	.col-xl-2 {
		width: 16.6667%;
	}
	.col-xl-3 {
		width: 25%;
	}
	.col-xl-4 {
		width: 33.3333%;
	}
	.col-xl-5 {
		width: 41.6667%;
	}
	.col-xl-6 {
		width: 50%;
	}
	.col-xl-7 {
		width: 58.3333%;
	}
	.col-xl-8 {
		width: 66.6667%;
	}
	.col-xl-9 {
		width: 75%;
	}
	.col-xl-10 {
		width: 83.3333%;
	}
	.col-xl-11 {
		width: 91.6667%;
	}
	.col-xl-12 {
		width: 100%;
	}
}

/* ---- 1200px ---- */
@media (max-width: 1100px) {
	:root {
		--container-padding: 32px;
	}

	/* col-lg-* */
	.col-lg-1 {
		width: 8.3333%;
	}
	.col-lg-2 {
		width: 16.6667%;
	}
	.col-lg-3 {
		width: 25%;
	}
	.col-lg-4 {
		width: 33.3333%;
	}
	.col-lg-5 {
		width: 41.6667%;
	}
	.col-lg-6 {
		width: 50%;
	}
	.col-lg-7 {
		width: 58.3333%;
	}
	.col-lg-8 {
		width: 66.6667%;
	}
	.col-lg-9 {
		width: 75%;
	}
	.col-lg-10 {
		width: 83.3333%;
	}
	.col-lg-11 {
		width: 91.6667%;
	}
	.col-lg-12 {
		width: 100%;
	}

	.hero__heading {
		font-size: 96px;
	}

	.hero__heading-last {
		font-size: 96px;
	}

	.hero__inner {
		padding-top: var(--sp-64);
	}

	.programs__persona-prefix {
		font-size: 96px;
	}

	.programs__persona-btn {
		font-size: 96px;
	}

	.involved__heading {
		font-size: 96px;
	}

	.mission__text {
		font-size: 60px;
	}

	.banner__text {
		font-size: 48px;
	}

	.news__heading {
		font-size: 32px;
	}

	.site-header__nav {
		gap: var(--sp-20);
	}

	.programs__description-col {
		width: 50%;
	}
}

/* ---- 992px ---- */
@media (max-width: 992px) {
	:root {
		--container-padding: 24px;
	}

	/* col-md-* */
	.col-md-1 {
		width: 8.3333%;
	}
	.col-md-2 {
		width: 16.6667%;
	}
	.col-md-3 {
		width: 25%;
	}
	.col-md-4 {
		width: 33.3333%;
	}
	.col-md-5 {
		width: 41.6667%;
	}
	.col-md-6 {
		width: 50%;
	}
	.col-md-7 {
		width: 58.3333%;
	}
	.col-md-8 {
		width: 66.6667%;
	}
	.col-md-9 {
		width: 75%;
	}
	.col-md-10 {
		width: 83.3333%;
	}
	.col-md-11 {
		width: 91.6667%;
	}
	.col-md-12 {
		width: 100%;
	}

	.hero__heading {
		font-size: 72px;
	}

	.hero__heading-last {
		font-size: 72px;
	}

	.hero__inner {
		padding-top: var(--sp-48);
	}

	.hero__text {
		font-size: 16px;
	}

	.hero__bottom-row {
		flex-wrap: wrap;
		gap: var(--sp-24);
	}

	.programs__persona-prefix {
		font-size: 72px;
	}

	.programs__persona-btn {
		font-size: 72px;
	}

	.programs__description-col {
		width: 100%;
	}

	.involved__heading {
		font-size: 72px;
	}

	.mission__text {
		font-size: 48px;
	}

	.banner__text {
		font-size: 36px;
	}

	.site-header__nav {
		display: none;
	}

	.site-header__actions {
		display: none;
	}

	.site-header__burger {
		display: flex;
		margin-left: auto;
	}

	.site-header__mobile-menu:not([hidden]) {
		display: flex;
	}

	.involved__panel {
		flex-wrap: wrap;
	}

	.involved__media {
		flex: 0 0 100%;
	}

	.involved__media-col {
		width: 100%;
	}

	.involved__content-col {
		width: 100%;
	}

	.site-footer__brand {
		width: 100%;
	}

	.site-footer__nav {
		width: 100%;
		margin-top: var(--sp-40);
	}

	.site-footer__nav-col {
		width: 33.3333%;
		margin-bottom: var(--sp-32);
	}
}

/* ---- 768px ---- */
@media (max-width: 768px) {
	:root {
		--container-padding: 16px;
	}

	/* col-sm-* */
	.col-sm-1 {
		width: 8.3333%;
	}
	.col-sm-2 {
		width: 16.6667%;
	}
	.col-sm-3 {
		width: 25%;
	}
	.col-sm-4 {
		width: 33.3333%;
	}
	.col-sm-5 {
		width: 41.6667%;
	}
	.col-sm-6 {
		width: 50%;
	}
	.col-sm-7 {
		width: 58.3333%;
	}
	.col-sm-8 {
		width: 66.6667%;
	}
	.col-sm-9 {
		width: 75%;
	}
	.col-sm-10 {
		width: 83.3333%;
	}
	.col-sm-11 {
		width: 91.6667%;
	}
	.col-sm-12 {
		width: 100%;
	}

	.hero__heading {
		font-size: 52px;
	}

	.hero__heading-last {
		font-size: 52px;
	}

	.hero__inner {
		padding-top: var(--sp-40);
	}

	.hero__text {
		font-size: 15px;
	}

	.hero__eyebrow {
		font-size: 15px;
	}

	.programs__persona-prefix {
		font-size: 48px;
	}

	.programs__persona-btn {
		font-size: 48px;
	}

	.involved__heading {
		font-size: 48px;
	}

	.involved__tab {
		width: auto;
		min-width: 0;
		padding: var(--sp-10) var(--sp-24);
		font-size: 24px;
	}

	.involved__panel {
		flex-direction: column;
	}

	.mission__text {
		font-size: 32px;
	}

	.banner__text {
		font-size: 28px;
	}

	.news__header {
		margin-bottom: var(--sp-32);
	}

	.news__heading {
		font-size: 24px;
	}

	.news__header-row > [class*='col-'] {
		width: 100%;
	}

	.event-card__title {
		font-size: 18px;
	}

	.site-footer__nav-col {
		width: 50%;
	}

	.site-footer__bottom-inner {
		flex-direction: column;
		gap: var(--sp-16);
		align-items: flex-start;
	}

	.site-footer__legal {
		flex-wrap: wrap;
		gap: var(--sp-16);
	}
}

/* ============================================================
   PAGES — INTERIOR STYLES (merged from pages.css)
   ============================================================ */
/* ============================================================
   INTERIOR PAGES — ADDITIONAL STYLES
   Extends css/style.css only with NEW components.
   Do NOT redefine variables, resets, layout, or existing
   component styles already declared in style.css.
   ============================================================ */

/* ============================================================
   NAV — ACTIVE STATE (interior pages)
   ============================================================ */

/* ============================================================
   PARALLAX SCROLL-OVER STACKING
   All elements after the sticky hero need z-index > 0 and a solid
   background so they visually slide over the pinned hero.
   ============================================================ */

main > *:not(.hero) {
	position: relative;
	z-index: 1;
	background-color: #fff;
}

.site-footer {
	position: relative;
	z-index: 1;
}

/* ============================================================
   HERO MODIFIERS (inner pages)
   ============================================================ */
.hero--pages {
	height: 100vh;
	position: sticky;
	background-color: var(--color-black);
}
.hero__bg {
	position: absolute;
	left: 0;
	bottom: 0;
	width: 100%;
	height: 60%;

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

	z-index: 0;
}

.hero__bg::after {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--color-black-op20);
	z-index: 0;
}
/* ============================================================
   HERO — PROGRAM TEMPLATE
   ============================================================ */

.hero--program {
	height: 100vh;
	align-items: center;
	background-color: var(--color-black);
}

.hero--program .hero__inner {
	padding-top: 0;
	justify-content: center;
}

.hero-program__left {
	display: flex;
	flex-direction: column;
	gap: var(--sp-24);
}

.hero-program__tags {
	display: flex;
	gap: var(--sp-8);
	flex-wrap: wrap;
}

.hero-program__heading {
	font-family: var(--font-ultra);
	font-size: 8vw;
	line-height: 0.9;
	color: var(--color-white);
	text-transform: uppercase;
	margin: 0;
	letter-spacing: -0.02em;
}

.hero-program__desc {
	font-size: var(--text-md);
	color: var(--color-white);
	line-height: 1.5;
	max-width: 480px;
	opacity: 0.85;
}

.hero-program__actions {
	display: flex;
	gap: var(--sp-12);
	align-items: center;
	flex-wrap: wrap;
}

.hero-program__stats {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-12);
	align-self: center;
}

.hero-program__stat {
	border: 2px solid var(--color-cyan);
	padding: var(--sp-16);
	display: flex;
	flex-direction: column;
	gap: var(--sp-8);
}

.hero-program__stat-label {
	font-family: var(--font-primary);
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--color-cyan);
	text-transform: uppercase;
	letter-spacing: 0.1em;
}

.hero-program__stat-value {
	font-size: var(--text-sm);
	color: var(--color-white);
	line-height: 1.4;
	font-family: var(--font-primary);
}

/* ============================================================
   INSTRUCTOR BLOCK
   ============================================================ */

.instructor {
	background-color: var(--color-black);
	padding-block: var(--sp-64);
}

.instructor__media {
	overflow: hidden;
	filter: grayscale(100%);
}

.instructor__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.instructor__content {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding-left: var(--sp-48);
}

.instructor__name {
	font-family: var(--font-ultra);
	font-size: 5vw;
	line-height: 0.9;
	color: var(--color-white);
	text-transform: uppercase;
	margin: 0 0 var(--sp-8);
}

.instructor__role {
	font-family: var(--font-primary);
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--color-cyan);
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: var(--sp-24);
}

.instructor__text {
	color: var(--color-white);
	font-size: var(--text-md);
	line-height: 1.6;
	opacity: 0.85;
	margin-bottom: var(--sp-16);
}

.instructor__email {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-8);
	color: var(--color-cyan);
	font-family: var(--font-primary);
	font-size: var(--text-sm);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	text-decoration: none;
	border-bottom: 1px solid var(--color-cyan);
	padding-bottom: 2px;
	width: fit-content;
}

.instructor__email:hover {
	color: var(--color-white);
	border-color: var(--color-white);
}

/* ============================================================
   ANNOUNCEMENT TICKER
   ============================================================ */
.ticker {
	background-color: var(--color-white);
	border-top: 2px solid var(--color-cyan);
	border-bottom: 2px solid var(--color-cyan);
	overflow: hidden;
	padding-block: var(--sp-14);
	white-space: nowrap;
}

.ticker__track {
	display: inline-flex;
	gap: var(--sp-32);
	animation: ticker-scroll 28s linear infinite;
	will-change: transform;
}

.ticker:hover .ticker__track {
	animation-play-state: paused;
}

.ticker__item {
	font-family: var(--font-primary);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--color-cyan);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	flex-shrink: 0;
}

.ticker__sep {
	color: var(--color-cyan);
	opacity: 0.4;
	flex-shrink: 0;
	font-weight: 700;
}

@keyframes ticker-scroll {
	from {
		transform: translateX(0);
	}
	to {
		transform: translateX(-50%);
	}
}

/* ============================================================
   CAMPS CATALOGUE
   ============================================================ */
.camps-catalogue {
	padding-block: var(--sp-48);
}

.camps-catalogue__header {
	align-items: flex-start;
	margin-bottom: var(--sp-48);
}

.camps-catalogue__heading {
	font-family: var(--font-ultra);
	font-size: 148px;
	font-weight: 850;
	line-height: 0.88;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.camps-catalogue__filters {
	display: flex;
	align-items: flex-end;
	gap: var(--sp-16);
	flex-wrap: wrap;
	justify-content: flex-end;
}

.camp-filter {
	position: relative;
}
.camps-catalogue__reset {
	font-size: 12px;
	border-radius: 2px;
	min-width: 120px;
}
.camps-catalogue__filter-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-8);
	padding: var(--sp-8) var(--sp-12);
	font-family: var(--font-condensed);
	font-size: var(--text-xl);
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--color-magenta);
	border-bottom: 2px solid var(--color-magenta);
	transition: color 0.4s ease, border-color 0.4s ease;
	background: transparent;
	border-top: none;
	border-left: none;
	border-right: none;
	cursor: pointer;
}
.flex-center {
	align-items: center;
}
.flex-bottom {
	align-items: end;
}
.camps-catalogue__filter-btn:hover,
.camps-catalogue__filter-btn[aria-expanded='true'] {
	color: var(--color-black);
	border-color: var(--color-black);
}

.camp-filter__dropdown {
	position: absolute;
	top: calc(100% + 4px);
	left: 0;
	z-index: 20;
	background: var(--color-white);
	border: 2px solid var(--color-magenta);
	min-width: 150px;
	list-style: none;
	margin: 0;
	padding: var(--sp-4) 0;
}

.camp-filter__option {
	padding: var(--sp-8) var(--sp-16);
	font-family: var(--font-primary);
	font-size: 16px;
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--color-magenta);
	cursor: pointer;
	transition: background 0.4s;
	text-align: right;
}

.camp-filter__option:hover {
	background: rgba(236, 0, 140, 0.12);
}

.camp-filter__option[aria-selected='true'] {
	color: var(--color-magenta);
	font-weight: 900;
}

/* ── Checkbox filter variant ── */
.camp-filter--checkbox .camp-filter__option {
	display: flex;
	align-items: center;
	gap: var(--sp-8);
	text-align: left;
}

.camp-filter__checkbox-box {
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	border: 2px solid var(--color-magenta);
	display: flex;
	align-items: center;
	justify-content: center;
	background: transparent;
}

.camp-filter__checkbox-box svg {
	display: none;
}

.camp-filter--checkbox
	.camp-filter__option[aria-selected='true']
	.camp-filter__checkbox-box
	svg {
	display: block;
}

.camps-catalogue__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-left: 1px solid var(--color-black);
	border-top: 1px solid var(--color-black);
}

.camps-catalogue__load-more {
	display: flex;
	justify-content: center;
	margin-top: var(--sp-48);
}

/* ============================================================
   CAMP CARD
   ============================================================ */
.camp-card {
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--color-black);
	border-bottom: 1px solid var(--color-black);
	background-color: var(--color-white);
	transition: all 0.4s;
}

.camp-card:nth-child(odd) {
	background-color: var(--color-gray-off);
}

.camp-card:hover {
	background-color: rgba(0, 174, 239, 0.1);
}
.camp-card:nth-child(odd):hover {
	background-color: rgba(236, 0, 140, 0.1);
}
.camp-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sp-16) var(--sp-20);
	min-height: var(--sp-48);
}

.camp-card__free {
	font-family: var(--font-primary);
	font-size: var(--text-sm);
	font-weight: 750;
	color: var(--color-black);
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.camp-card__chip {
	font-family: var(--font-primary);
	font-size: var(--text-xs);
	font-weight: 550;
	color: var(--color-black);
	border: 1.5px solid var(--color-black);
	padding: var(--sp-4) var(--sp-10);
	text-transform: capitalize;
	letter-spacing: -0.01em;
}

.camp-card__media {
	aspect-ratio: 4 / 3;
}

.camp-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-10);
	padding: var(--sp-24);
	flex: 1;
}

.camp-card__title {
	font-family: var(--font-condensed);
	font-size: var(--text-2xl);
	font-weight: 700;
	line-height: 1.1;
	text-transform: capitalize;
	color: var(--color-black);
	margin: 0;
}

.camp-card__date {
	display: block;
	font-family: var(--font-condensed);
	font-size: var(--text-lg);
	font-weight: 600;
	color: var(--color-cyan);
	text-transform: uppercase;
	letter-spacing: -0.4px;
}

.camp-card__text {
	font-size: var(--text-md);
	color: var(--color-black);
	flex: 1;
	margin: 0;
	line-height: 1.3;
}

.camp-card .btn {
	width: 100%;
	justify-content: center;
	margin-top: auto;
}

/* ============================================================
   GALLERY MOSAIC
   ============================================================ */
.gallery-mosaic {
	overflow: hidden;
}

.gallery-mosaic__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-auto-rows: 14rem;
	gap: var(--sp-4);
}

.gallery-mosaic__item {
	overflow: hidden;
	background-color: var(--color-gray-light);
	margin: 0;
}

.gallery-mosaic__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.5s ease;
}

.gallery-mosaic__item:hover .gallery-mosaic__img {
	transform: scale(1.05);
}

/* Mobile: item 3 spans full width */
.gallery-mosaic__item--3 {
	grid-column: span 2;
}

/* ============================================================
   CAMP SCHEDULE
   ============================================================ */
.schedule {
	padding-block: var(--sp-48);
}

.schedule__heading {
	font-family: var(--font-ultra);
	font-size: 80px;
	font-weight: 850;
	line-height: 0.9;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin-bottom: 128px;
}

/* Reuse .involved__tabs pattern — same visual tabs */
.schedule__tabs {
	display: flex;
	margin-bottom: var(--sp-40);
	border: 2px solid var(--color-black);
	border-radius: var(--radius-sm);
	overflow: hidden;
	width: fit-content;
}

.schedule__tab {
	padding: var(--sp-10) var(--sp-40);
	font-family: var(--font-condensed);
	font-size: 32px;
	font-weight: 600;
	letter-spacing: -0.01em;
	text-transform: uppercase;
	color: var(--color-gray-mid);
	background-color: transparent;
	transition: background-color 0.4s ease, color 0.4s ease;
	border-right: 2px solid #000;
	cursor: pointer;
}

.schedule__tab--active {
	background-color: var(--color-cyan);
	color: var(--color-white);
}

.schedule__tab:not(.schedule__tab--active):hover {
	background-color: var(--color-cyan);
	color: var(--color-white);
}

.schedule__panel--hidden {
	display: none;
}

.schedule__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: var(--sp-16);
}

.schedule-card {
	display: flex;
	flex-direction: column;
	gap: var(--sp-10);
	padding: var(--sp-24);
	border: 1px solid var(--color-black);
	border-radius: 25px 0;
	min-height: 172px;
}

.schedule-card__time {
	font-family: var(--font-condensed);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--color-cyan);
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.schedule-card__text {
}

/* ============================================================
   FAQ
   ============================================================ */
section#faq.faq {
	padding-block: var(--sp-64);
	background-color: var(--color-black);
}

.faq__heading {
	font-family: var(--font-ultra);
	font-size: 148px;
	font-weight: 850;
	line-height: 0.88;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--color-yellow);
	margin-bottom: var(--sp-48);
}

.faq__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: 0;
}

.faq__col {
	display: flex;
	flex-direction: column;
}

.faq__item {
	padding-block: var(--sp-24);
	border-bottom: 1px solid #fff200;
}

.faq__question {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: var(--sp-16);
	width: 100%;
	text-align: left;
	font-family: var(--font-primary);
	font-size: var(--text-md);
	font-weight: 750;
	color: var(--color-white);
	line-height: 1.35;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
}

.faq__question-icon {
	flex-shrink: 0;
	width: 10px;
	height: 5px;
	color: var(--color-white);
	transition: transform 0.4s ease;
	margin-top: 0.1em;
}

.faq__item--open .faq__question-icon {
	transform: rotate(0deg);
}

.faq__item:not(.faq__item--open) .faq__question-icon {
	transform: rotate(180deg);
}

.faq__answer {
	font-size: var(--text-md);
	font-weight: 400;
	color: var(--color-white);
	line-height: 120%;
	overflow: hidden;
	max-height: 0;
	margin-top: 0;
	transition: max-height 0.35s ease, margin-top 0.35s ease;
}

.faq__item--open .faq__answer {
	max-height: 600px;
	margin-top: var(--sp-16);
}

.faq__answer a {
	color: var(--color-cyan);
	text-decoration: underline;
}

.faq__load-more {
	display: flex;
	justify-content: flex-start;
	margin-top: var(--sp-40);
}

/* ============================================================
   CAMPS FILTER DRAWER (mobile-only side panel)
   ============================================================ */
.camps-filter-drawer {
	display: none;
	position: fixed;
	inset: 0;
	z-index: 400;
}

.camps-filter-drawer--open {
	display: block;
}

.camps-filter-drawer__overlay {
	position: absolute;
	inset: 0;
	background: var(--color-black-op55);
}

.camps-filter-drawer__panel {
	position: absolute;
	top: 0;
	left: 0;
	width: 85%;
	max-width: 340px;
	height: 100%;
	background: var(--color-white);
	overflow-y: auto;
	display: flex;
	flex-direction: column;
	transform: translateX(-100%);
	visibility: hidden;
	transition: transform 0.35s ease, visibility 0s linear 0.35s;
}

.camps-filter-drawer--open .camps-filter-drawer__panel {
	transform: translateX(0);
	visibility: visible;
	transition: transform 0.35s ease, visibility 0s linear 0s;
}

.camps-filter-drawer__header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sp-24) var(--sp-16);
	border-bottom: 1px solid var(--color-black);
	flex-shrink: 0;
}

.camps-filter-drawer__title {
	font-family: var(--font-ultra);
	font-size: 48px;
	font-weight: 850;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--color-black);
}

.camps-filter-drawer__close {
	background: transparent;
	border: none;
	cursor: pointer;
	padding: var(--sp-8);
	display: flex;
	align-items: center;
	justify-content: center;
	color: var(--color-black);
	line-height: 0;
	flex-shrink: 0;
}

.camps-filter-drawer__body {
	flex: 1;
	padding: 0 var(--sp-16);
}

.camps-filter-drawer__section {
	border-bottom: 1px solid var(--color-black);
}

.camps-filter-drawer__section-btn {
	display: flex;
	align-items: center;
	justify-content: space-between;
	width: 100%;
	padding: var(--sp-16) 0;
	font-family: var(--font-condensed);
	font-size: var(--text-18);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--color-black);
	background: transparent;
	border: none;
	cursor: pointer;
}

.camps-filter-drawer__chevron {
	color: var(--color-black);
	transition: transform 0.3s ease;
	flex-shrink: 0;
}

.camps-filter-drawer__section--open .camps-filter-drawer__chevron {
	transform: rotate(180deg);
}

.camps-filter-drawer__options {
	list-style: none;
	margin: 0;
	padding: 0;
	max-height: 0;
	overflow: hidden;
	transition: max-height 0.3s ease;
}

.camps-filter-drawer__section--open .camps-filter-drawer__options {
	max-height: 300px;
}

.camps-filter-drawer__option {
	font-family: var(--font-primary);
	font-size: var(--text-sm);
	font-weight: 400;
	color: var(--color-black);
	padding: var(--sp-8) 0;
	cursor: pointer;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

/* Mobile-only filter button in catalogue header (hidden on desktop) */
.camps-catalogue__mobile-filter-btn {
	display: none;
}

/* Mobile-only count text (hidden on desktop) */
.camps-catalogue__count {
	display: none;
}

/* ============================================================
   RESOURCES
   ============================================================ */
.resources {
	padding-block: var(--sp-64);
}

.resources__heading {
	font-family: var(--font-ultra);
	font-size: 148px;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	color: var(--color-black);
	margin: 0 0 var(--sp-32);
}

.resources__media {
	overflow: hidden;
	aspect-ratio: 4 / 5;
}

.resources__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	display: block;
}

.resources__content {
	padding-top: var(--sp-16);
}

.resources__tabs {
	display: flex;
	gap: 0;
	margin-bottom: var(--sp-48);
}

.resources__tab {
	flex: 1;
	display: inline-flex;
	justify-content: center;
	align-items: center;
	padding: var(--sp-14) var(--sp-12);
	font-family: var(--font-ultra);
	font-size: var(--text-lg);
	font-weight: 750;
	text-transform: uppercase;
	background: transparent;
	border: 2px solid var(--color-black);
	cursor: pointer;
	color: var(--color-gray-mid);
	transition: background 0.4s, color 0.4s;
}

.resources__tab--active,
.resources__tab:hover {
	color: var(--color-black);
	border: 2px solid var(--color-black);
	background: var(--color-cyan);
}

.resources__panel--hidden {
	display: none;
}

.resources__panel-heading {
	font-family: var(--font-primary);
	font-size: var(--text-md);
	font-weight: 750;
	color: var(--color-black);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin-bottom: var(--sp-16);
}

.resources__panel-intro {
	margin-bottom: var(--sp-24);
	max-width: 60ch;
}

.resources__subheading {
	font-family: var(--font-primary);
	font-size: var(--text-sm);
	font-weight: 750;
	color: var(--color-black);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin-bottom: var(--sp-16);
}

.resources__list {
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: var(--sp-16);
	padding: 0;
}

.resources__list li {
	padding-left: var(--sp-20);
	position: relative;
}

.resources__list li::before {
	content: '—';
	position: absolute;
	left: 0;
	color: var(--color-cyan);
	font-weight: 700;
}

.resources__list a {
	color: var(--color-cyan);
	text-decoration: underline;
	font-weight: 550;
}

/* ============================================================
   SPY HOP WAY (Column Organizer)
   ============================================================ */
.spy-hop-way {
	padding-block: var(--sp-64);
	background-color: var(--color-white);
}

.spy-hop-way__header {
	margin-bottom: var(--sp-96);
	align-items: flex-end;
}

.spy-hop-way__heading {
	font-family: var(--font-ultra);
	font-size: 112px;
	font-weight: 850;
	line-height: 0.88;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.spy-hop-way__desc {
	max-width: 38ch;
	align-self: end;
	display: flex;
	justify-content: flex-end;
	width: 100%;
	margin-right: 0;
	margin-left: auto;
}

.spy-hop-way__cols {
	display: grid;
	grid-template-columns: repeat(5, 1fr);
	border: 1px solid var(--color-black);
}

.spy-hop-way__col {
	display: flex;
	flex-direction: column;
	border-right: 1px solid var(--color-black);
}

.spy-hop-way__col:last-child {
	border-right: none;
}

.spy-hop-way__col_content {
	flex: 1;
	padding: var(--sp-12);
	min-height: 200px;
}

.spy-hop-way__col_title {
	font-family: var(--font-condensed);
	letter-spacing: -0.01em;
	margin-bottom: var(--sp-10);
	color: #000;
	font-size: 36px;
	font-style: normal;
	font-weight: 750;
	line-height: 90%;
	text-transform: uppercase;
}

.spy-hop-way__col_text {
}

.spy-hop-way__col_btn {
	display: flex;
	align-items: center;
	justify-content: flex-start;
	width: 100%;
	padding: 11px var(--sp-16);
	background-color: var(--color-magenta);
	color: var(--color-white);
	transition: opacity 0.4s ease;
	border: none;
	border-top: 1px solid #000;
	cursor: pointer;
}

.spy-hop-way__col_btn:hover {
	opacity: 0.85;
}

.spy-hop-way__col_icon {
	width: 32px;
	height: 32px;
	transition: transform 0.4s ease;
}

.spy-hop-way__col_-open .spy-hop-way__col_icon {
	transform: rotate(180deg);
}

/* ============================================================
   PROGRAM CARD (In-House Programs)
   ============================================================ */
.program-card {
	display: flex;
	flex-direction: column;
	border: 1.5px solid var(--color-black);
	background-color: var(--color-white);
}

.program-card__top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: var(--sp-16) var(--sp-20);
	border-bottom: 1.5px solid var(--color-black);
}

.program-card__free {
	font-family: var(--font-primary);
	font-size: var(--text-sm);
	font-weight: 750;
	color: var(--color-black);
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.program-card__chip {
	font-family: var(--font-primary);
	font-size: var(--text-xs);
	font-weight: 550;
	color: var(--color-black);
	border: 1.5px solid var(--color-black);
	padding: var(--sp-4) var(--sp-10);
	text-transform: capitalize;
	letter-spacing: -0.01em;
}

.program-card__media {
	aspect-ratio: 4 / 3;
	overflow: hidden;
	background-color: var(--color-gray-light);
	border-bottom: 1.5px solid var(--color-black);
}

.program-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.program-card:hover .program-card__img {
	transform: scale(1.04);
}

.program-card__body {
	display: flex;
	flex-direction: column;
	gap: var(--sp-10);
	padding: var(--sp-20);
	flex: 1;
}

.program-card__title {
	font-family: var(--font-condensed);
	font-size: var(--text-xl);
	font-weight: 700;
	line-height: 1.1;
}

.program-card__date {
	font-family: var(--font-primary);
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--color-cyan);
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.program-card__text {
	flex: 1;
}

/* ============================================================
   PAGE HEADER (white intro section with large heading + features)
   Used on Community Programs, Blog Template
   ============================================================ */
.place-youth {
	padding-block: 96px;
	background-size: cover;
	background-position: center;
	position: relative;
	overflow: hidden;
}

.place-youth__heading {
	font-family: var(--font-ultra);
	font-size: 148px;
	font-weight: 850;
	line-height: 0.88;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	max-width: 19ch;
	margin-bottom: 152px;
}

.place-youth__features {
	display: flex;
	flex-direction: row;
	gap: var(--sp-48);
	padding-left: 12px;
	padding-right: 12px;
	align-items: flex-start;
	margin-right: auto;
}

.place-youth__feature-label {
	margin-bottom: var(--sp-8);
}

.place-youth__feature-value {
	font-family: var(--font-condensed);
	font-size: 24px;
	font-weight: 700;
	color: var(--color-cyan);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	line-height: 1.15;
}

.place-youth__actions {
	display: flex;
	gap: var(--sp-16);
	flex-wrap: wrap;
	align-items: center;
	padding-left: 12px;
	padding-right: 12px;
}

/* ============================================================
   INFO BLOCK (split content: heading + image + text)
   ============================================================ */
.info-block {
	padding-block: var(--sp-64);
}

.info-block__heading {
	font-family: var(--font-ultra);
	font-size: 148px;
	font-weight: 700;
	line-height: 0.88;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin-bottom: var(--sp-56);
}

.info-block__body {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-32);
	align-items: start;
}

.info-block [class*='col-'] {
	display: flex;
	flex-direction: column;
}

.info-block__media {
	overflow: hidden;
	background-color: var(--color-gray-light);
	flex: 1;
	min-height: 320px;
}

.info-block__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.info-block__content {
	display: flex;
	flex-direction: column;
	gap: var(--sp-16);
	margin-left: 28px;
}

.info-block__label {
	font-family: var(--font-ultra);
	color: var(--color-cyan);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	font-size: 24px;
	font-style: normal;
	font-weight: 750;
	line-height: 120%;
}

.info-block__text {
}

.info-block__actions {
	display: flex;
	gap: var(--sp-16);
	flex-wrap: wrap;
	margin-top: var(--sp-16);
}

/* ============================================================
   FEATURED CARDS (horizontal slider reusing news-card pattern)
   ============================================================ */
.featured {
	padding-block: var(--sp-64);
}

.featured__header {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: var(--sp-24);
	margin-bottom: var(--sp-32);
}

.featured__heading {
	font-family: var(--font-ultra);
	font-size: 96px;
	font-weight: 850;
	line-height: 0.88;
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.featured__desc {
	max-width: 38ch;
}

.featured__filters {
	display: flex;
	gap: var(--sp-10);
	flex-wrap: wrap;
	align-items: center;
}

.featured__chip-btn {
	padding: var(--sp-8) var(--sp-16);
	font-family: var(--font-primary);
	font-size: var(--text-xs);
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--color-black);
	background-color: var(--color-white);
	border: 1.5px solid var(--color-black);
	transition: background-color 0.4s ease, color 0.4s ease;
}

.featured__chip-btn--active,
.featured__chip-btn:hover {
	background-color: var(--color-black);
	color: var(--color-white);
}

.featured__track-wrap {
	overflow: hidden;
}

.featured__track {
	display: flex;
	gap: var(--sp-24);
	overflow-x: auto;
	scroll-snap-type: x mandatory;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	padding-bottom: var(--sp-8);
}

.featured__track::-webkit-scrollbar {
	display: none;
}

.featured-card {
	flex: 0 0 min(85vw, 380px);
	scroll-snap-align: start;
	display: flex;
	flex-direction: column;
	border: 1.5px solid var(--color-black);
	background-color: var(--color-white);
}

.featured-card__media {
	aspect-ratio: 16 / 9;
	overflow: hidden;
	background-color: var(--color-gray-light);
	border-bottom: 1.5px solid var(--color-black);
}

.featured-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
	transition: transform 0.4s ease;
}

.featured-card:hover .featured-card__img {
	transform: scale(1.04);
}

.featured-card__body {
	padding: var(--sp-20);
	display: flex;
	flex-direction: column;
	gap: var(--sp-10);
	flex: 1;
}

.featured-card__date {
	font-family: var(--font-primary);
	font-size: var(--text-xs);
	font-weight: 700;
	color: var(--color-cyan);
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.featured-card__title {
	font-family: var(--font-condensed);
	font-size: var(--text-xl);
	font-weight: 700;
	line-height: 1.1;
}

.featured-card__text {
	flex: 1;
}

/* ============================================================
   TOGGLE NAVIGATOR (EVENTS / NEWS)
   ============================================================ */
.toggle-nav {
	display: grid;
	grid-template-columns: 1fr 1fr;
	border-bottom: 2px solid var(--color-gray-light);
}

.toggle-nav__btn {
	padding-block: var(--sp-20);
	font-family: var(--font-primary);
	font-size: var(--text-sm);
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	text-align: center;
	background-color: var(--color-white);
	color: var(--color-gray-mid);
	border: none;
	transition: background-color 0.4s ease, color 0.4s ease;
}

.toggle-nav__btn--active {
	background-color: var(--color-cyan);
	color: var(--color-white);
}

.toggle-nav__btn:hover:not(.toggle-nav__btn--active) {
	background-color: var(--color-gray-light);
	color: var(--color-black);
}

/* ============================================================
   TEAM GRID
   ============================================================ */
.team-grid {
	padding-block: var(--sp-64);
}

.team-grid__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 0;
	border-top: 1.5px solid var(--color-black);
	border-left: 1.5px solid var(--color-black);
}

.team-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding: var(--sp-32);
	border-right: 1.5px solid var(--color-black);
	border-bottom: 1.5px solid var(--color-black);
	background-color: var(--color-white);
	overflow: hidden;
}

.team-card:nth-child(odd) {
	background-color: var(--color-gray-off);
}
.team-card__header {
	margin-bottom: var(--sp-24);
	display: flex;
	gap: 10px;
	align-items: flex-end;
}
.team-card__name {
	font-family: var(--font-ultra);
	font-size: 32px;
	font-style: normal;
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

.team-card__pronouns {
	margin-top: var(--sp-4);
	text-transform: capitalize;
	line-height: 23px;
}

.team-card__media {
	aspect-ratio: 7 / 4;
	overflow: hidden;
	background-color: var(--color-gray-light);
	border: 1.5px solid var(--color-black);
	border-radius: 50px 0 50px 0;
	margin-bottom: var(--sp-16);
}

.team-card__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.team-card__role {
	letter-spacing: -0.01em;
	margin-bottom: var(--sp-16);
	font-weight: 700;
	line-height: 120%;
}

.team-card__expand {
	display: flex;
	align-items: center;
	gap: var(--sp-8);
	width: 100%;
	padding: var(--sp-12) var(--sp-16);
	font-family: var(--font-primary);
	font-size: var(--text-xs);
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-black);
	background: none;
	border: 1.5px solid var(--color-black);
	cursor: pointer;
	margin-top: auto;
}

.team-card__expand svg {
	margin-left: auto;
	transition: transform 0.3s ease;
}

.team-card--expanded .team-card__expand svg {
	transform: rotate(180deg);
}

.team-card__bio {
	position: absolute;
	inset: 0;
	padding: var(--sp-32);
	background-color: var(--color-white);
	display: flex;
	flex-direction: column;
	justify-content: center;
	pointer-events: none;
	transform: translateY(100%);
	transition: transform 0.35s ease;
}

.team-card--expanded .team-card__bio {
	transform: translateY(0);
	pointer-events: auto;
}

.team-card__bio-text {
	font-size: var(--text-sm);
	line-height: 120%;
	color: var(--color-black);
}

.team-card__close {
	display: flex;
	align-items: center;
	gap: var(--sp-8);
	width: 100%;
	padding: var(--sp-12) var(--sp-16);
	font-family: var(--font-primary);
	font-size: var(--text-xs);
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--color-black);
	background: none;
	border: 1.5px solid var(--color-black);
	cursor: pointer;
	margin-top: var(--sp-24);
}

.team-card__close svg {
	margin-left: auto;
}

/* ============================================================
   BOARD LIST (Board of Directors / Advisory Board)
   ============================================================ */
.board-list {
	padding-block: var(--sp-64);
	background-color: var(--color-white);
}

.board-list__heading {
	font-family: var(--font-ultra);
	font-size: 128px;
	font-weight: 850;
	line-height: 0.88;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin-bottom: var(--sp-192);
}

.board-list__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-32) var(--sp-24);
}

.board-list__name {
	font-family: var(--font-condensed);
	font-weight: 700;
	color: var(--color-cyan);
	text-decoration: none;
	transition: color 0.4s ease;
	font-size: 24px;
	font-style: normal;
	font-weight: 700;
	line-height: 90%;
	text-transform: capitalize;
}
.events-upcoming {
	width: 100%;
}
.board-list__role {
	margin-top: var(--sp-12);
}

/* ============================================================
   LOCATION & HOURS (Contact page)
   ============================================================ */
.location-hours {
	padding-block: var(--sp-48);
}

.location-hours__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-32);
}

.location-hours__col_label {
	font-family: var(--font-primary);
	font-size: var(--text-md);
	font-weight: 750;
	margin-bottom: var(--sp-16);
}

.location-hours__address {
}

.location-hours__table {
	border-collapse: collapse;
	width: 100%;
	display: flex;
	gap: 10px;
	flex-direction: column;
}

/* ============================================================
   CONTACT INFO (Get in Touch section)
   ============================================================ */
.contact-info {
	padding-block: var(--sp-64);
}

.contact-info__header {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--sp-16);
	margin-bottom: var(--sp-48);
}

.contact-info__heading {
	font-family: var(--font-ultra);
	font-size: 96px;
	font-weight: 850;
	line-height: 0.88;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	color: var(--color-cyan);
}

.contact-info__policies-link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-8);
	font-family: var(--font-primary);
	font-size: var(--text-sm);
	font-weight: 750;
	color: var(--color-black);
	text-transform: uppercase;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: color 0.4s ease;
}

.contact-info__policies-link:hover {
	color: var(--color-magenta);
}

.contact-info__grid {
	display: grid;
	grid-template-columns: 1fr;
	gap: var(--sp-40);
}

.contact-info__dept-label {
	font-family: var(--font-primary);
	font-size: var(--text-md);
	font-weight: 750;
	margin-bottom: var(--sp-16);
}

.contact-info__email {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-8);
	padding: var(--sp-8) var(--sp-20);
	background-color: var(--color-magenta);
	color: var(--color-white);
	font-family: var(--font-primary);
	font-size: var(--text-xs);
	font-weight: 750;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	text-decoration: none;
	transition: opacity 0.4s ease;
}

.contact-info__email:hover {
	opacity: 0.85;
}

.contact-info__phone {
	display: block;
	margin-top: var(--sp-10);
	text-decoration: none;
}

/* ============================================================
   TEXT BANNER (narrow full-bleed dark photo + centered text)
   ============================================================ */
.text-banner {
	position: relative;
	min-height: 10rem;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	background-color: var(--color-black);
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}

.text-banner::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--color-black-op55);
}

.text-banner__inner {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--sp-24);
	text-align: center;
	padding: var(--sp-32);
}

.text-banner__text {
	position: relative;
	z-index: 1;
	text-align: center;
	font-family: var(--font-primary);
	font-size: var(--text-lg);
	font-weight: 750;
	color: var(--color-white);
	text-transform: uppercase;
	letter-spacing: 0.12em;
	padding: var(--sp-24);
}

/* ============================================================
   EVENT DETAILS (Blog single — Header and Features layout)
   ============================================================ */

.event-details {
	padding-block: var(--sp-64);
	background-color: var(--color-white);
}

.event-details__body {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--sp-48);
	align-items: center;
	margin-bottom: var(--sp-48);
}

.event-details__heading {
	font-family: var(--font-ultra);
	font-size: 9vw;
	line-height: 0.88;
	text-transform: uppercase;
	color: var(--color-black);
	margin: 0;
}

.event-details__features {
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
	gap: var(--sp-12);
	aspect-ratio: 1.2 / 1;
}

.event-details__feature {
	border-radius: 12px;
	overflow: hidden;
	background-color: var(--color-cyan-tint);
}

.event-details__feature img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.event-details__feature:nth-child(1) {
	grid-column: 1;
	grid-row: 1;
}

.event-details__feature:nth-child(2) {
	grid-column: 2;
	grid-row: 1;
}

.event-details__feature:nth-child(3) {
	grid-column: 2;
	grid-row: 2;
}

.event-details__meta {
	display: flex;
	gap: var(--sp-64);
	flex-wrap: wrap;
	border-top: 1px solid var(--color-gray-light);
	padding-top: var(--sp-24);
}

.event-details__meta-item {
	display: flex;
	flex-direction: column;
	gap: var(--sp-4);
}

.event-details__meta-label {
	font-family: var(--font-primary);
	font-size: var(--text-sm);
	color: var(--color-gray-dark);
}

.event-details__meta-value {
	font-family: var(--font-condensed);
	font-size: var(--text-sm);
	font-weight: 700;
	color: var(--color-cyan);
	text-transform: uppercase;
	letter-spacing: 0.04em;
}

/* ============================================================
   ARTICLE HEADER (Blog template — metadata + intro)
   ============================================================ */
.article-header {
	padding-block: var(--sp-48) var(--sp-64);
	border-bottom: 1px solid var(--color-gray-light);
}

.article-header__meta {
	display: flex;
	flex-wrap: wrap;
	gap: var(--sp-16);
	align-items: center;
	margin-bottom: var(--sp-24);
}

.article-header__tag {
	font-family: var(--font-primary);
	font-size: var(--text-xs);
	font-weight: 650;
	color: var(--color-white);
	background-color: var(--color-magenta);
	padding: var(--sp-4) var(--sp-10);
	text-transform: uppercase;
	letter-spacing: -0.01em;
}

.article-header__date {
	letter-spacing: -0.01em;
}

.article-header__heading {
	font-family: var(--font-ultra);
	font-size: 96px;
	font-weight: 850;
	line-height: 0.9;
	text-transform: uppercase;
	letter-spacing: -0.01em;
	margin-bottom: var(--sp-32);
	max-width: 22ch;
}

.article-header__media {
	aspect-ratio: 16 / 7;
	overflow: hidden;
	background-color: var(--color-gray-light);
}

.article-header__img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

.article-header__caption {
	margin-top: var(--sp-10);
}

/* ============================================================
   ARTICLE BODY (Blog template — prose sections)
   ============================================================ */
.article-body {
	padding-block: var(--sp-48);
	max-width: 72ch;
}

.article-body + .article-body {
	padding-top: 0;
}

.article-body__heading {
	font-family: var(--font-condensed);
	font-size: var(--text-2xl);
	font-weight: 700;
	line-height: 1.1;
	margin-bottom: var(--sp-20);
}

.article-body__text {
	margin-bottom: var(--sp-20);
}

.article-body__text + .article-body__text {
	margin-top: calc(-1 * var(--sp-8));
}

.article-body__pull-quote {
	font-family: var(--font-condensed);
	font-size: var(--text-xl);
	font-weight: 700;
	color: var(--color-cyan);
	line-height: 1.2;
	border-left: 4px solid var(--color-cyan);
	padding-left: var(--sp-24);
	margin-block: var(--sp-32);
}

/* ============================================================
   INFO BLOCK — MODIFIERS
   ============================================================ */
.info-block--shaded {
	background-color: var(--color-gray-off);
}

.info-block__content--full {
	max-width: none;
}

/* ============================================================
   RESPONSIVE DEFAULTS (desktop-first: these are the default wide-screen layouts)
   ============================================================ */
.info-block__body {
	grid-template-columns: 1fr 1fr;
}

.info-block__body--reverse .info-block__media {
	order: 2;
}

.place-youth__features {
	flex-direction: row;
	gap: var(--sp-48);
}

.board-list__grid {
	grid-template-columns: repeat(5, 1fr);
}

.location-hours__grid {
	grid-template-columns: 1fr 2fr;
}

.contact-info__grid {
	grid-template-columns: repeat(5, 1fr);
}

.faq__grid {
	grid-template-columns: repeat(2, 1fr);
	gap: var(--sp-32);
}

.gallery-mosaic__grid {
	grid-template-columns: 1fr 1fr 1fr 1fr;
	grid-template-rows: 26rem 26rem;
	gap: var(--sp-4);
}

.gallery-mosaic__item--1 {
	grid-column: 1;
	grid-row: 1 / 3;
}

.gallery-mosaic__item--2 {
	grid-column: 2 / 4;
	grid-row: 1;
}

.gallery-mosaic__item--3 {
	grid-column: 4;
	grid-row: 1 / 3;
}

.gallery-mosaic__item--4 {
	grid-column: 2;
	grid-row: 2;
}

.gallery-mosaic__item--5 {
	display: block;
	grid-column: 3;
	grid-row: 2;
}

.resources__grid {
	grid-template-columns: 1fr 1fr;
	min-height: 36rem;
}

.resources__media {
	min-height: unset;
}

.resources__content {
	padding: var(--sp-40) var(--sp-48);
	overflow-y: auto;
	max-height: 50rem;
}

/* ============================================================
   RESPONSIVE — max-width: 1440px
   ============================================================ */
@media (max-width: 1440px) {
}

/* ============================================================
   RESPONSIVE — max-width: 1200px
   ============================================================ */
@media (max-width: 1200px) {
}

/* ============================================================
   RESPONSIVE — max-width: 992px
   ============================================================ */
@media (max-width: 992px) {
	.board-list__grid {
		grid-template-columns: repeat(3, 1fr);
	}
	.contact-info__grid {
		grid-template-columns: repeat(3, 1fr);
	}

	.spy-hop-way__cols {
		grid-template-columns: repeat(3, 1fr);
	}
	.spy-hop-way__col:nth-child(3n) {
		border-right: none;
	}
	.spy-hop-way__col:nth-child(n + 4) {
		border-top: 1.5px solid var(--color-black);
	}

	.team-grid__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.gallery-mosaic__grid {
		grid-template-columns: 1fr 2fr 1fr;
		grid-template-rows: 22rem 22rem;
	}
	.gallery-mosaic__item--1 {
		grid-column: 1;
		grid-row: 1 / 3;
	}
	.gallery-mosaic__item--2 {
		grid-column: 2 / 4;
		grid-row: 1;
	}
	.gallery-mosaic__item--3 {
		grid-column: 2;
		grid-row: 2;
	}
	.gallery-mosaic__item--4 {
		grid-column: 3;
		grid-row: 2;
	}
	.gallery-mosaic__item--5 {
		display: none;
	}

	.schedule__heading {
		font-size: 64px;
	}
	.spy-hop-way__heading {
		font-size: 64px;
	}
	.info-block__heading {
		font-size: 64px;
	}
	.faq__heading {
		font-size: 72px;
	}
	.board-list__heading {
		font-size: 72px;
	}
	.place-youth__heading {
		font-size: 72px;
	}
	.featured__heading {
		font-size: 48px;
	}
	.contact-info__heading {
		font-size: 48px;
	}
	.article-header__heading {
		font-size: 48px;
	}

	.resources__heading {
		font-size: 72px;
	}
}

/* ============================================================
   RESPONSIVE — max-width: 768px
   ============================================================ */
@media (max-width: 768px) {
	.info-block__body {
		grid-template-columns: 1fr;
	}
	.info-block__body--reverse .info-block__media {
		order: unset;
	}

	.place-youth__features {
		flex-direction: column;
		gap: var(--sp-24);
	}

	.board-list__grid {
		grid-template-columns: 1fr;
	}
	.location-hours__grid {
		grid-template-columns: 1fr;
	}
	.contact-info__grid {
		grid-template-columns: 1fr;
	}
	.faq__grid {
		grid-template-columns: 1fr;
	}

	.spy-hop-way__cols {
		grid-template-columns: 1fr;
	}
	.spy-hop-way__col {
		border-right: none;
		border-bottom: 1.5px solid var(--color-black);
	}
	.spy-hop-way__col:nth-child(3n) {
		border-right: none;
	}
	.spy-hop-way__col:nth-child(n + 4) {
		border-top: none;
	}
	.spy-hop-way__col:last-child {
		border-bottom: none;
	}

	.schedule__cards {
		grid-template-columns: 1fr;
	}
	.team-grid__grid {
		grid-template-columns: 1fr;
	}

	.camps-catalogue__grid {
		grid-template-columns: 1fr;
	}

	.gallery-mosaic__grid {
		grid-template-columns: 1fr 1fr;
		grid-template-rows: auto;
		grid-auto-rows: 14rem;
	}
	.gallery-mosaic__item--1,
	.gallery-mosaic__item--2,
	.gallery-mosaic__item--3,
	.gallery-mosaic__item--4 {
		grid-column: unset;
		grid-row: unset;
	}
	.gallery-mosaic__item--3 {
		grid-column: span 2;
	}
	.gallery-mosaic__item--5 {
		display: none;
	}

	.resources__grid {
		grid-template-columns: 1fr;
	}
	.resources__content {
		padding: var(--sp-24);
		max-height: none;
		overflow-y: visible;
	}

	.schedule__heading {
		font-size: 48px;
	}
	.spy-hop-way__heading {
		font-size: 48px;
	}
	.info-block__heading {
		font-size: 48px;
	}
	.faq__heading {
		font-size: 48px;
	}
	.board-list__heading {
		font-size: 48px;
	}
	.place-youth__heading {
		font-size: 48px;
	}
	.featured__heading {
		font-size: 48px;
	}
	.contact-info__heading {
		font-size: 48px;
	}
	.article-header__heading {
		font-size: 40px;
	}
	.camps-catalogue__heading {
		font-size: 48px;
	}
	.resources__heading {
		font-size: 48px;
	}

	.hero-program__heading {
		font-size: 13vw;
	}

	.hero-program__stats {
		grid-template-columns: 1fr 1fr;
	}

	.instructor__name {
		font-size: 10vw;
	}

	.instructor__content {
		padding-left: 0;
		padding-top: var(--sp-32);
	}

	.event-details__body {
		grid-template-columns: 1fr;
	}

	.event-details__heading {
		font-size: 18vw;
	}

	.event-details__meta {
		gap: var(--sp-32);
	}

	/* === HEADER — 768px === */

	/* Reduce container padding site-wide */
	.container {
		padding-left: var(--sp-16);
		padding-right: var(--sp-16);
	}

	/* Grid — sm column helper: hide column on mobile */
	.col-sm-0 {
		display: none;
	}

	/* Top bar: Figma 16px padding, 14px font (from 16px desktop) */
	.site-header__top-bar {
		padding: var(--sp-16) 0;
		font-size: var(--text-sm);
	}

	/* Main nav: 16px padding → 56px total height (matches Figma) */
	.site-header__main-inner {
		padding: var(--sp-16) 0;
	}

	/* Remove col gutters inside the header flex row */
	.site-header__main-inner > [class*="col-"] {
		flex: 0 0 auto;
		width: auto;
		padding-left: 0;
		padding-right: 0;
	}

	/* Push right-side column (icons) to far right */
	.site-header__main-inner > [class*="col-"]:last-child {
		display: flex;
		align-items: center;
		gap: var(--sp-16);
		margin-left: auto;
	}

	/* Constrain logo to Figma mobile size (64px) */
	.site-header__logo-img {
		width: var(--sp-64);
	}

	/* Hide desktop nav links and donate button */
	.site-header__nav {
		display: none;
	}
	.site-header__actions {
		display: none;
	}

	/* Show mobile donate icon and burger */
	.site-header__donate-icon {
		display: flex;
	}
	.site-header__burger {
		display: flex;
	}

	/* Mobile menu panel — visible on mobile only */
	.site-header__mobile-menu {
		display: flex;
	}

	/* === GLOBAL — 768px === */
	.btn {
		min-height: 44px;
	}
	/* Hide news spacer col on mobile */
	.news__header .col-1 {
		display: none;
	}

	/* === HERO — 768px === */
	.hero {
		height: 540px;
		min-height: 0;
	}
	.hero__inner {
		padding-top: var(--sp-32);
		gap: var(--sp-24);
	}
	.hero__eyebrow {
		font-size: var(--text-md);
	}
	.hero__heading {
		font-size: 72px;
		letter-spacing: -1px;
	}
	.hero__bottom-row {
		flex-direction: column;
		gap: var(--sp-24);
		align-items: flex-start;
	}
	.hero__aside {
		height: auto;
		padding-top: 0;
	}
	.hero__text {
		font-size: var(--text-sm);
	}

	/* === NEWS — 768px === */
	.news {
		padding: var(--sp-48) 0;
	}
	.news__header {
		flex-direction: column;
		gap: var(--sp-24);
		margin-bottom: var(--sp-24);
	}
	.news__heading {
		font-size: 48px;
	}
	.news__description {
		font-size: var(--text-sm);
		margin-left: 0;
		max-width: 100%;
	}
	.news-swiper .swiper-slide {
		width: 85%;
	}

	/* === MISSION — 768px === */
	.mission {
		padding: var(--sp-48) 0;
		min-height: 0;
	}
	.mission .container {
		padding-left: var(--sp-48);
		padding-right: var(--sp-48);
	}
	.mission__text {
		font-size: 32px;
		letter-spacing: -0.5px;
	}
	.mission__actions {
		flex-wrap: wrap;
	}

	/* === BANNER — 768px === */
	.banner {
		min-height: 500px;
	}
	.banner__text {
		font-size: 32px;
	}

	/* === PROGRAMS — 768px === */
	.programs {
		padding: var(--sp-48) 0;
	}
	.programs__intro {
		flex-direction: column;
		gap: var(--sp-24);
		margin-bottom: var(--sp-24);
	}
	.programs__persona-prefix {
		font-size: 48px;
		line-height: 0.9;
	}
	.programs__persona-btn {
		font-size: 48px;
		line-height: 0.9;
		letter-spacing: -1px;
	}
	.programs__persona-btn::before {
		border-left-width: 14px;
		border-right-width: 14px;
		border-top-width: 13px;
		right: -30px;
	}
	.programs__persona-dropdown {
		min-width: 100%;
		left: 0;
	}
	.programs__persona-option {
		font-size: 48px;
		letter-spacing: -1px;
		padding: var(--sp-8) var(--sp-16);
	}
	.programs__description {
		font-size: var(--text-sm);
	}
	.programs-swiper .swiper-slide {
		width: 80%;
	}

	/* === INVOLVED — 768px === */
	.involved {
		background-image: none !important;
		padding: var(--sp-48) 0;
	}
	.involved__heading {
		font-size: 48px;
		line-height: 0.9;
		margin-bottom: var(--sp-24);
	}
	/* Hide tab buttons, show select on mobile */
	.involved__tabs {
		display: none;
	}
	.involved__tabs-select {
		display: block;
		width: 100%;
		margin-bottom: var(--sp-24);
		background-color: var(--color-white);
		border: 2px solid var(--color-black);
		color: var(--color-black);
		font-family: var(--font-ultra);
		font-size: var(--text-xl);
		font-weight: 750;
		text-transform: uppercase;
		padding: var(--sp-8) var(--sp-16);
		min-height: 44px;
		cursor: pointer;
	}
	.involved__panel .row {
		flex-direction: column-reverse;
		gap: 0;
	}
	.involved__media {
		flex: 0 0 auto;
		width: 100%;
		height: 354px;
		margin-right: 0;
		overflow: hidden;
	}
	.involved__img {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	.involved__content {
		padding: var(--sp-32) 0;
		max-width: 100%;
	}
	.involved__label {
		font-size: var(--text-xl);
	}
	.involved__text {
		font-size: var(--text-sm);
	}
	.involved__content .btn {
		width: 100%;
		justify-content: center;
	}

	/* === FOOTER — 768px === */
	.site-footer__main {
		padding: var(--sp-24) 0;
	}
	.site-footer__grid {
		flex-direction: column;
		gap: var(--sp-32);
	}
	.site-footer__brand-col {
		flex: 0 0 auto;
		width: 100%;
	}
	.site-footer__spacer {
		display: none;
	}
	.site-footer__nav-group {
		flex-direction: row;
		gap: var(--sp-24);
		width: 100%;
	}
	.site-footer__nav-col {
		flex: 1;
		min-width: 0;
	}
	.site-footer__nav-heading {
		font-size: var(--text-md);
	}
	.site-footer__nav-link {
		font-size: var(--text-sm);
	}
	.site-footer__stay-text {
		font-size: var(--text-md);
	}
	.site-footer__bottom-inner {
		flex-direction: column;
		gap: var(--sp-8);
		align-items: flex-start;
	}

	/* === HERO — PAGES VARIANT — 768px === */
	.hero--pages {
		height: 540px;
	}

	/* === TICKER — 768px === */
	.ticker {
		padding-block: var(--sp-12);
	}
	.ticker__item {
		font-size: var(--text-18);
	}

	/* === CAMPS CATALOGUE HEADER — 768px === */
	.camps-catalogue__header .row {
		flex-direction: row;
		align-items: center;
		gap: 0;
	}
	.camps-catalogue__header [class*='col-'] {
		width: auto;
		flex: 0 0 auto;
	}
	.camps-catalogue__header [class*='col-']:first-child {
		flex: 1;
		min-width: 0;
	}
	.camps-catalogue__filters {
		display: none;
	}
	.camps-catalogue__mobile-filter-btn {
		display: inline-flex;
		align-items: center;
		gap: var(--sp-8);
		padding: var(--sp-8) var(--sp-16);
		background: var(--color-magenta);
		color: var(--color-white);
		font-family: var(--font-condensed);
		font-size: var(--text-sm);
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: -0.01em;
		border: none;
		cursor: pointer;
		min-height: 44px;
	}
	.camps-catalogue__count {
		display: block;
		font-family: var(--font-primary);
		font-size: var(--text-sm);
		color: #b5b5b5;
		margin-top: var(--sp-8);
		margin-bottom: var(--sp-16);
	}
	.camps-catalogue__load-more .btn {
		width: 100%;
		justify-content: center;
	}

	/* === SCHEDULE — 768px === */
	.schedule__heading {
		margin-bottom: var(--sp-48);
	}
	.schedule__tabs {
		width: 100%;
	}
	.schedule__tab {
		flex: 1;
		font-size: var(--text-xl);
		padding: var(--sp-10) var(--sp-16);
	}

	/* === FAQ — 768px === */
	section#faq.faq {
		padding-block: var(--sp-48);
	}
	.faq__grid {
		gap: 0;
	}
}