@import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@500;600;700;800&family=Source+Sans+3:wght@400;500;600;700&display=swap');

:root {
	color-scheme: light;
	--green: #91c84b;
	--green-dark: #007275;
	--green-deep: #075457;
	--ink: #173536;
	--muted: #5c7070;
	--line: #dce9e4;
	--mist: #f3f8f5;
	--white: #fff;
	--heading: 'Montserrat', 'Century Gothic', sans-serif;
	--body: 'Source Sans 3', 'Trebuchet MS', sans-serif;
	--content: 1160px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
site-header, site-footer { display: block; }
body {
	margin: 0;
	background: var(--white);
	color: var(--ink);
	font: 400 18px/1.55 var(--body);
}
img { display: block; max-width: 100%; }
a { color: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; }

h1, h2, h3, p, figure, blockquote { margin-top: 0; }
h1, h2, h3 {
	color: var(--green-dark);
	font-family: var(--heading);
	font-weight: 700;
	line-height: 1.12;
}
h1 { margin-bottom: 24px; font-size: clamp(2.45rem, 5vw, 4.8rem); }
h2 { margin-bottom: 18px; font-size: clamp(2rem, 3.4vw, 3.1rem); }
h3 { margin-bottom: 12px; font-size: 1.2rem; }
p { margin-bottom: 18px; }

.skip-link {
	position: fixed;
	z-index: 20;
	top: 8px;
	left: 8px;
	transform: translateY(-160%);
	padding: 12px 16px;
	background: var(--green-dark);
	color: var(--white);
}
.skip-link:focus { transform: translateY(0); }

.site-header {
	position: relative;
	z-index: 10;
	display: flex;
	min-height: 88px;
	align-items: center;
	justify-content: space-between;
	padding: 12px max(28px, calc((100vw - var(--content)) / 2));
	background: var(--white);
	border-bottom: 1px solid var(--line);
}
.brand { display: inline-flex; flex: 0 0 auto; align-items: center; }
.brand img { width: 196px; height: auto; }
.site-navigation { display: flex; align-items: center; gap: clamp(18px, 3vw, 40px); }
.site-navigation > a, .nav-programs > a {
	padding: 12px 0;
	color: var(--ink);
	font-size: .96rem;
	font-weight: 600;
	text-decoration: none;
}
.site-navigation > a:hover, .nav-programs > a:hover, .site-navigation a:focus-visible { color: var(--green-dark); }
.site-navigation .culture-viva-link { display: inline-flex; align-items: center; padding: 0; }
.culture-viva-link img { width: 104px; height: 56px; object-fit: contain; }
.culture-viva-link:focus-visible { outline: 3px solid var(--green); outline-offset: 4px; }
.nav-programs { position: relative; }
.nav-program-menu {
	position: absolute;
	top: 100%;
	left: -18px;
	display: none;
	width: 310px;
	padding: 10px 18px;
	background: var(--white);
	border: 1px solid var(--line);
	border-top: 3px solid var(--green);
}
.nav-programs:hover .nav-program-menu, .nav-programs:focus-within .nav-program-menu { display: grid; }
.nav-program-group { padding: 9px 0; }
.nav-program-group + .nav-program-group { border-top: 1px solid var(--line); }
.nav-program-heading { color: var(--green-dark); font-size: .84rem; font-weight: 700; }
.nav-program-children { display: grid; padding-left: 12px; }
.nav-program-menu a {
	padding: 6px 0;
	color: var(--ink);
	font-size: .92rem;
	text-decoration: none;
}
.nav-program-menu a:hover { color: var(--green-dark); }
.menu-toggle { display: none; }

.hero {
	position: relative;
	display: grid;
	min-height: 590px;
	grid-template-columns: minmax(300px, .9fr) minmax(380px, 1.1fr);
	align-items: center;
	gap: 5vw;
	overflow: hidden;
	padding: 76px max(28px, calc((100vw - var(--content)) / 2)) 86px;
	background:
		radial-gradient(ellipse at 9% 93%, rgba(145, 200, 75, .15), transparent 29%),
		linear-gradient(120deg, #f7faf7 0%, #fff 61%);
}
.hero::before {
	position: absolute;
	right: 44%;
	bottom: -170px;
	width: 420px;
	height: 420px;
	border: 1px solid rgba(0, 114, 117, .12);
	border-radius: 50%;
	content: '';
}
.hero-copy { position: relative; z-index: 1; max-width: 600px; }
.eyebrow {
	margin-bottom: 16px;
	color: var(--green-dark);
	font-size: .82rem;
	font-weight: 700;
	letter-spacing: .08em;
	text-transform: uppercase;
}
.hero h1 { max-width: 100%; }
.hero-lead { margin-bottom: 28px; color: var(--muted); font-size: 1.25rem; }
.button {
	display: inline-flex;
	min-height: 50px;
	align-items: center;
	justify-content: center;
	gap: 14px;
	padding: 12px 19px;
	border: 1px solid transparent;
	font-size: .98rem;
	font-weight: 700;
	text-decoration: none;
	transition: background-color .18s ease, transform .18s ease;
}
.button:hover { transform: translateY(-2px); }
.button-primary { background: var(--green-dark); color: var(--white); }
.button-primary:hover { background: var(--green-deep); }
.hero-image { position: relative; z-index: 1; margin: 0; }
.hero-image img { width: 100%; height: 400px; object-fit: cover; object-position: center 35%; }
.hero-image figcaption {
	position: absolute;
	right: 0;
	bottom: 0;
	padding: 8px 13px;
	background: var(--white);
	color: var(--green-dark);
	font-size: .82rem;
	font-weight: 700;
}
.hero-note {
	position: absolute;
	right: 7%;
	bottom: 26px;
	color: var(--green-dark);
	font-family: var(--heading);
	font-size: .78rem;
	font-weight: 600;
}

.section-wrap { width: min(var(--content), calc(100% - 56px)); margin-inline: auto; }
.impact-section { padding-block: 96px 90px; }
.section-heading { max-width: 690px; margin-bottom: 38px; }
.section-heading h2 { margin-bottom: 0; }
.impact-grid { display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid var(--line); }
.impact-item {
	min-height: 132px;
	padding: 24px 26px 19px 0;
	border-bottom: 1px solid var(--line);
}
.impact-value {
	display: flex;
	align-items: baseline;
	gap: 8px;
	margin-bottom: 2px;
	color: var(--green-dark);
	font-family: var(--heading);
	font-size: 2rem;
	font-weight: 700;
	line-height: 1.15;
}
.impact-value span { font-family: var(--body); font-size: .92rem; font-weight: 600; }
.impact-item > p:last-child { margin-bottom: 0; color: var(--muted); }
.impact-featured .impact-value { color: var(--green-deep); }
.impact-note { max-width: 740px; margin: 28px 0 0 auto; color: var(--muted); }

.program-section { padding-block: 88px 94px; background: var(--mist); }
.section-heading-row { display: flex; max-width: none; align-items: end; justify-content: space-between; gap: 40px; }
.section-heading-row > p { max-width: 410px; margin: 0 0 4px; color: var(--muted); }
.program-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); border-top: 1px solid #cbded6; }
.program-link {
	display: grid;
	min-height: 88px;
	grid-template-columns: 42px 1fr 26px;
	align-items: center;
	gap: 14px;
	padding: 16px 18px 16px 0;
	border-bottom: 1px solid #cbded6;
	color: var(--ink);
	text-decoration: none;
	transition: color .18s ease, padding .18s ease;
}
.program-link:nth-child(odd) { margin-right: 34px; }
.program-link:nth-child(even) { margin-left: 34px; }
.program-link:hover { padding-left: 7px; color: var(--green-dark); }
.program-number { color: #68817c; font-size: .83rem; font-weight: 700; }
.program-name { font-family: var(--heading); font-size: 1rem; font-weight: 600; }
.program-arrow { color: var(--green-dark); font-size: 1.3rem; text-align: right; }

.closing-section { padding-block: 92px 98px; text-align: center; }
.closing-section .eyebrow { margin-bottom: 20px; }
.closing-section blockquote {
	max-width: 850px;
	margin: 0 auto 24px;
	color: var(--green-dark);
	font-family: var(--heading);
	font-size: clamp(1.7rem, 3.4vw, 2.7rem);
	font-weight: 600;
	line-height: 1.3;
}
.text-link { color: var(--green-dark); font-weight: 700; text-decoration-thickness: 1px; text-underline-offset: 4px; }
.text-link span { padding-left: 6px; }
.site-footer {
	display: flex;
	min-height: 126px;
	align-items: center;
	justify-content: space-between;
	gap: 22px;
	padding: 24px max(28px, calc((100vw - var(--content)) / 2));
	background: var(--green-deep);
	color: var(--white);
}
.footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; }
.footer-legal p { margin: 0; font-size: .9rem; }
.footer-legal a { color: var(--white); font-size: .9rem; text-underline-offset: 3px; }
.brand-footer img { width: 174px; }
.back-to-top { color: var(--white); font-size: .9rem; text-decoration: none; }

.page-hero {
	display: grid;
	min-height: 370px;
	align-items: center;
	padding: 68px max(28px, calc((100vw - var(--content)) / 2));
	background: linear-gradient(110deg, var(--mist), var(--white) 74%);
}
.page-hero-copy { max-width: 780px; }
.page-hero h1 { margin-bottom: 16px; font-size: clamp(2.3rem, 4.3vw, 4rem); }
.page-hero p:last-child { max-width: 700px; margin-bottom: 0; color: var(--muted); font-size: 1.18rem; }
.breadcrumb { margin-bottom: 20px; color: var(--muted); font-size: .9rem; }
.breadcrumb a { color: var(--green-dark); text-decoration-thickness: 1px; text-underline-offset: 3px; }
.content-section { padding-block: 72px; }
.content-section + .content-section { padding-top: 8px; }
.content-narrow { max-width: 810px; }
.content-narrow p { color: #405958; }
.content-split { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: clamp(30px, 6vw, 82px); }
.content-split img, .feature-photo { width: 100%; max-height: 520px; object-fit: cover; }
.content-split figure { margin: 0; }
.image-zoom { display: block; width: 100%; padding: 0; border: 0; background: transparent; cursor: zoom-in; }
.image-zoom:focus-visible { outline: 3px solid var(--green-dark); outline-offset: 4px; }
.content-split figcaption { margin-top: 8px; color: var(--muted); font-size: .82rem; }
.content-split h2 { font-size: clamp(1.8rem, 3vw, 2.6rem); }
.content-split-copy p { color: #405958; }
.image-lightbox {
	position: fixed;
	inset: 0;
	width: fit-content;
	height: fit-content;
	margin: auto;
	max-width: 96vw;
	max-height: 94vh;
	padding: 48px 12px 12px;
	border: 0;
	background: transparent;
	overflow: visible;
}
.image-lightbox::backdrop { background: rgb(4 28 29 / 88%); }
.image-lightbox img { display: block; width: auto; max-width: 90vw; height: auto; max-height: 84vh; margin: auto; object-fit: contain; }
.image-lightbox-close {
	position: absolute;
	top: 2px;
	right: 12px;
	min-height: 40px;
	padding: 7px 12px;
	border: 1px solid rgb(255 255 255 / 65%);
	background: var(--green-deep);
	color: var(--white);
	cursor: pointer;
}
.image-lightbox-close span { padding-left: 6px; font-size: 1.2rem; }
.stat-band { padding-block: 54px; background: var(--green-dark); color: var(--white); }
.stat-band .section-wrap { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.stat { padding-left: 18px; border-left: 2px solid var(--green); }
.stat strong { display: block; margin-bottom: 4px; color: var(--white); font-family: var(--heading); font-size: 1.8rem; }
.stat span { display: block; font-size: .92rem; }
.detail-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 36px; }
.detail-item { padding-top: 18px; border-top: 2px solid var(--green); }
.detail-item p { color: var(--muted); }
.bullet-list { padding-left: 20px; }
.bullet-list li { margin-bottom: 9px; padding-left: 4px; }
.bullet-list li::marker { color: var(--green-dark); }
.photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin: 36px 0 0; }
.photo-strip img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.culture-collage {
	grid-template-columns: repeat(6, minmax(0, 1fr));
	grid-auto-rows: clamp(120px, 17vw, 205px);
	gap: 12px;
}
.culture-collage .image-zoom { height: 100%; overflow: hidden; }
.culture-collage img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; }
.culture-collage .image-zoom:first-child { grid-column: span 3; grid-row: span 2; }
.culture-collage .image-zoom:nth-child(2), .culture-collage .image-zoom:nth-child(3) { grid-column: span 3; }
.culture-collage .image-zoom:nth-child(4) { grid-column: 1 / -1; }
.scholarship-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.scholarship-gallery .image-zoom { aspect-ratio: 4 / 3; height: 100%; overflow: hidden; }
.scholarship-gallery img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transition: transform .2s ease; }
.scholarship-gallery .image-zoom:hover img { transform: scale(1.035); }
.ecology-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ecology-gallery .image-zoom { height: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.ecology-gallery img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transition: transform .2s ease; }
.ecology-gallery .image-zoom:hover img { transform: scale(1.035); }
.navidad-gallery { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.navidad-gallery .image-zoom { height: 100%; aspect-ratio: 4 / 3; overflow: hidden; }
.navidad-gallery img { width: 100%; height: 100%; aspect-ratio: auto; object-fit: cover; transition: transform .2s ease; }
.navidad-gallery .image-zoom:hover img { transform: scale(1.035); }
.quote-band { padding-block: 56px; background: var(--mist); }
.quote-band blockquote { max-width: 870px; margin: auto; color: var(--green-dark); font-family: var(--heading); font-size: clamp(1.45rem, 2.5vw, 2.1rem); line-height: 1.35; }
.ods-row { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }
.ods-row img { width: 76px; height: 76px; }
.ods-icon { width: 76px; height: 76px; margin-bottom: 14px; }
.profile-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 24px 42px; }
.profile-list h3 { margin-bottom: 4px; }
.profile-list p { margin-bottom: 0; color: var(--muted); }
.contact-layout { display: grid; grid-template-columns: minmax(230px, .72fr) minmax(0, 1.28fr); gap: 56px; align-items: start; }
.contact-details h2 { margin-bottom: 34px; }
.contact-item { padding-top: 18px; border-top: 2px solid var(--green); }
.contact-item + .contact-item { margin-top: 28px; }
.contact-item p, .contact-item address { margin-bottom: 0; color: var(--muted); font-style: normal; }
.contact-item a { color: var(--green-dark); font-weight: 700; }
.contact-map { min-width: 0; }
.contact-map iframe { display: block; width: 100%; min-height: 460px; border: 0; }
.carousel { --carousel-visible-count: 1; --carousel-gap: 10px; max-width: 960px; margin-inline: auto; }
.carousel-viewport { width: 100%; overflow: hidden; background: var(--mist); }
.carousel-track { display: flex; gap: var(--carousel-gap); width: 100%; transition: transform .35s ease; touch-action: pan-y; }
.carousel-slide { flex: 0 0 calc((100% - (var(--carousel-visible-count) - 1) * var(--carousel-gap)) / var(--carousel-visible-count)); width: calc((100% - (var(--carousel-visible-count) - 1) * var(--carousel-gap)) / var(--carousel-visible-count)); height: clamp(250px, 58vw, 560px); margin: 0; background: #edf3ef; }
.carousel-slide .carousel-zoom { width: 100%; height: 100%; padding: 0; }
.carousel-slide img { width: 100%; height: 100%; object-fit: contain; }
.carousel-controls { display: flex; align-items: center; justify-content: center; gap: 22px; padding-top: 16px; }
.carousel-button {
	width: 46px;
	height: 46px;
	border: 1px solid var(--line);
	background: var(--white);
	color: var(--green-dark);
	font-size: 1.35rem;
	cursor: pointer;
}
.carousel-button:hover { border-color: var(--green-dark); background: var(--mist); }
.carousel-button:focus-visible { outline: 3px solid var(--green); outline-offset: 2px; }
.carousel-count { min-width: 58px; margin: 0; color: var(--muted); font-variant-numeric: tabular-nums; text-align: center; }

@media (min-width: 901px) {
	.hero h1 { font-size: clamp(2.7rem, 3.8vw, 4rem); }
	.carousel { --carousel-visible-count: 4; }
	.carousel-slide { height: auto; aspect-ratio: 4 / 3; }
	.carousel-slide img { object-fit: cover; }
}

@media (max-width: 900px) {
	.site-header { min-height: 78px; }
	.site-navigation { gap: 20px; }
	.site-navigation > a, .nav-programs > a { font-size: .9rem; }
	.hero { min-height: 0; gap: 34px; padding-block: 58px 70px; }
	.hero-image img { height: 345px; }
	.stat-band .section-wrap { grid-template-columns: repeat(2, 1fr); row-gap: 30px; }
}

@media (max-width: 700px) {
	body { font-size: 17px; }
	.site-header { min-height: 74px; padding-inline: 20px; }
	.brand img { width: 166px; }
	.menu-toggle {
		display: inline-flex;
		min-width: 48px;
		min-height: 48px;
		align-items: center;
		justify-content: center;
		gap: 8px;
		padding: 8px;
		border: 1px solid var(--line);
		background: var(--white);
		color: var(--green-dark);
		cursor: pointer;
	}
	.menu-toggle-label { font-size: .9rem; font-weight: 700; }
	.menu-toggle-icon, .menu-toggle-icon::before, .menu-toggle-icon::after {
		display: block;
		width: 17px;
		height: 2px;
		background: currentColor;
	}
	.menu-toggle-icon { position: relative; }
	.menu-toggle-icon::before, .menu-toggle-icon::after { position: absolute; left: 0; content: ''; }
	.menu-toggle-icon::before { top: -6px; }
	.menu-toggle-icon::after { top: 6px; }
	.site-navigation {
		position: absolute;
		top: 100%;
		right: 0;
		left: 0;
		display: none;
		align-items: stretch;
		gap: 0;
		padding: 8px 22px 20px;
		border-bottom: 1px solid var(--line);
		background: var(--white);
	}
	.site-navigation.is-open { display: flex; flex-direction: column; }
	.site-navigation > a, .nav-programs > a { display: block; padding: 14px 0; border-bottom: 1px solid var(--line); font-size: 1rem; }
	.site-navigation .culture-viva-link { display: flex; justify-content: flex-start; padding: 8px 0; border-bottom: 0; }
	.culture-viva-link img { width: 126px; height: 64px; }
	.nav-program-menu { position: static; display: grid; width: auto; padding: 4px 0 10px 12px; border: 0; }
	.nav-program-group { padding-block: 9px; }
	.nav-program-heading { font-size: .87rem; }
	.nav-program-menu a { padding-block: 8px; }
	.hero { grid-template-columns: 1fr; gap: 30px; padding: 52px 20px 60px; }
	.hero::before { right: -220px; bottom: 190px; }
	.hero-image img { height: auto; aspect-ratio: 4 / 3; }
	.hero-note { right: 20px; bottom: 22px; }
	.section-wrap { width: calc(100% - 40px); }
	.impact-section, .closing-section { padding-block: 68px; }
	.impact-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.impact-featured { grid-column: 1 / -1; }
	.impact-item { min-height: 116px; padding-right: 12px; }
	.impact-value { font-size: 1.65rem; }
	.impact-note { margin-top: 23px; }
	.program-section { padding-block: 66px; }
	.section-heading-row { display: block; }
	.section-heading-row > p { margin-top: 18px; }
	.program-grid { grid-template-columns: 1fr; }
	.program-link:nth-child(odd), .program-link:nth-child(even) { margin-inline: 0; }
	.program-link { min-height: 76px; grid-template-columns: 34px 1fr 22px; gap: 10px; padding-right: 4px; }
	.program-name { font-size: .94rem; }
	.site-footer { min-height: 0; flex-wrap: wrap; padding: 28px 20px; }
	.brand-footer { flex-basis: 100%; }
	.footer-legal { align-items: flex-start; flex-direction: column; gap: 6px; }
	.page-hero { min-height: 310px; padding: 52px 20px; }
	.content-section { padding-block: 52px; }
	.content-split { grid-template-columns: 1fr; gap: 26px; }
	.content-split-reverse figure { order: 2; }
	.stat-band { padding-block: 42px; }
	.stat-band .section-wrap { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
	.stat { padding-left: 11px; }
	.stat strong { font-size: 1.4rem; }
	.stat span { font-size: .84rem; }
	.detail-grid { grid-template-columns: 1fr; gap: 22px; }
	.photo-strip { grid-template-columns: repeat(2, 1fr); gap: 9px; }
	.ecology-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.navidad-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.culture-collage { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; gap: 9px; }
	.culture-collage .image-zoom { height: auto; }
	.culture-collage .image-zoom:first-child, .culture-collage .image-zoom:nth-child(4) { grid-column: 1 / -1; grid-row: auto; }
	.culture-collage .image-zoom:nth-child(2), .culture-collage .image-zoom:nth-child(3) { grid-column: auto; }
	.culture-collage .image-zoom:nth-child(n + 2) img { aspect-ratio: 4 / 3; }
	.culture-collage .image-zoom:first-child img, .culture-collage .image-zoom:nth-child(4) img { aspect-ratio: 16 / 9; }
	.profile-list { grid-template-columns: 1fr; gap: 22px; }
	.scholarship-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
	.contact-layout { grid-template-columns: 1fr; gap: 42px; }
	.contact-map iframe { min-height: 360px; }
	.ods-row img { width: 62px; height: 62px; }
	.ods-icon { width: 62px; height: 62px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
}