:root {
	--brand-lime: #8DBF3F;
	--header-space: 100px;
}

html, body {
	margin: 0;
	padding: 0;
	overflow-x: clip;
}

*{
	margin: 0;
	padding: 0;
	box-sizing: border-box; /* ✅ VERY IMPORTANT FIX */
	font-family: 'Poppins', sans-serif;
	scroll-behavior: smooth;
}

/* UNIFIED SECTION SPACING — headers, CTA banner, footer, course, team
   and team-intro sections excluded; they set their own padding explicitly */
section:not(.header):not(.sub-header):not(.blog-header):not(.pitch-header-nav):not(.join-cta):not(.footer):not(.course):not(.team-section):not(.team-intro):not(.services-hero):not(.services-list):not(.gallery):not(.about-hero):not(.about-who):not(.about-stats):not(.about-mission):not(.about-vision):not(.visit-band):not(.activities-hero):not(.training-programs):not(.activities-grid):not(.recognition-band):not(.research-hero) {
	padding: 70px 0;
}

/* Header sections: no section padding — nav controls its own 12-16px gutter */
.header,
.sub-header,
.blog-header,
.pitch-header-nav {
	padding-top: 0;
	padding-bottom: 0;
}

/* HEADER */
.header {
	min-height: 100vh;
	width: 100%;
	background-image: linear-gradient(rgba(4,9,30,0.7), rgba(4,9,30,0.7)), url(images/Farmers.png);
	background-position: center;
	background-size: cover;
	position: relative;
}

nav {
	display: flex;
	padding: 14px 6%;
	justify-content: space-between;
	align-items: center;
}

/* Round header emblem — 56px desktop / 44px mobile */
nav a.logo-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 56px;
	height: 56px;
	border-radius: 50%;
	overflow: hidden;
	background: #ffffff;
	border: 1px solid rgba(255,255,255,0.7);
	box-shadow: 0 2px 8px rgba(0,0,0,0.25);
	padding: 0;
	line-height: 0;
}

nav a.logo-circle img {
	width: 100%;
	height: 100%;
	object-fit: contain;
	padding: 4px;
	display: block;
	background: #ffffff;
	border-radius: 50%;
	aspect-ratio: 1 / 1;
}

/* NAV */
.nav-links {
	flex: 1;
	text-align: right;
}

.nav-links ul li {
	list-style:none;
	display: inline-block;
	padding: 8px 12px;
}

.nav-links ul li a{
	text-decoration: none;
	font-size: 13px;
}

.nav-links ul li::after {
	content: '';
	width: 0%;
	height: 2px;
	background: #f44336;
	display: block;
	margin: auto;
	transition: 0.5s;
}

.nav-links ul li:hover::after {
	width: 100%;
}

/* HERO TEXT */
.text-box {
	width: 90%;
	max-width: 900px;
	color: #fff;
	position: absolute;
	top: 60%;
	left: 50%;
	transform: translate(-50%, -50%);
	text-align: center;
}

.text-box h1 {
	font-size: 28px;
  margin-bottom: -50px;
}

.text-box p{
	margin: 15px 0 30px;
	font-size: 15px;
}

/* BUTTON */
.hero-btn {
	display: inline-block;
	text-decoration: none;
	color: #fff;
	border: 1px solid #fff;
	padding: 12px 30px;
	font-size: 13px;
	background: transparent;
	cursor: pointer;
}

.hero-btn:hover {
	background: #f44336;
	border-color: #f44336;
}

/* MOBILE MENU */
nav .fa {
	display: none;
}

@media(max-width: 700px) {

	.text-box h1 {
		font-size: 24px;
	}

	.nav-links ul li {
		display: block;
	}

	.nav-links {
		position: fixed;
		background: #f44336;
		height: 100vh;
		width: 200px;
		top: 0;
		right: -200px;
		z-index: 2;
		transition: 0.5s;
	}

	nav .fa {
		display: block;
		color: #fff;
		margin: 10px;
		font-size: 22px;
		cursor: pointer;
	}

	.nav-links ul{
		padding: 30px;
	}

	nav {
		padding: 10px 6%;
	}

	nav a.logo-circle {
		width: 44px;
		height: 44px;
	}
}

/* COURSE */
.course {
	width: 80%;
	margin: auto;
	text-align: center;
}

.row {
	margin-top: 5%;
	display: flex;
	justify-content: space-between;
	flex-wrap: wrap;
}

.service-col {
	flex-basis: 31%;
	background: #fff3f3;
	border-radius: 10px;
	margin-bottom: 20px;
	padding: 20px;
	transition: 0.3s;
}

.service-col:hover{
	box-shadow: 0 0 20px rgba(0,0,0,0.2);
}

/* SITE */
.site {
  width: 80%;
  margin: auto;
  text-align: center;
  padding-top: 50px;
}

.site .row {
  display: flex;
  gap: 20px;
  justify-content: center;
}

.site-col {
  flex: 1;
  min-width: 250px;
  height: 320px;
  position: relative;
  overflow: hidden;
  border-radius: 12px;
}

.site-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 0.4s ease;
}

.site-col:hover img {
  transform: scale(1.08);
}
.layer {
  position: absolute;
  bottom: 0;
  background: rgba(0,0,0,0.5);
  color: white;
  width: 100%;
  text-align: center;
  padding: 10px;
}

.layer {
	position: absolute;
	top:0;
	left:0;
	width:100%;
	height:100%;
	transition: 0.5s;
}

.layer:hover {
	background: rgba(226,0,0,0.7);
}

.layer h3 {
	color:#fff;
	position:absolute;
	bottom:40%;
	left:50%;
	transform:translateX(-50%);
	opacity:0;
}

.layer:hover h3 {
	opacity:1;
}

/* CTA */
.cta {
  margin: 100px auto;
  width: 80%;
  background: linear-gradient(135deg, #414441, #6a6e6c);
  border-radius: 12px;
  text-align: center;
  padding: 70px 20px;
  overflow: hidden;
  position: relative;
  color: #fff;
}

/* ANIMATED TEXT */
.cta h1 {
  font-size: 32px;
  color: #fff;
  display: inline-block;
  white-space: nowrap;
  animation: scrollText 10s linear infinite;
  transition: background 0.3s, color 0.3s, transform 0.3s;
  padding: 10px 20px;
  border-radius: 6px;
}

/* LOOPING SCROLL ANIMATION */
@keyframes scrollText {
  0% {
    transform: translateX(100%);
  }
  100% {
    transform: translateX(-100%);
  }
}

/* PAUSE ON HOVER */
.cta h1:hover {
  animation-play-state: paused;
  background: #28a745;
  color: #fff;
  cursor: pointer;
  transform: scale(1.05);
}

/* OPTIONAL CTA BUTTON HOVER */
.cta a {
  display: inline-block;
  margin-top: 20px;
  padding: 12px 25px;
  background: #28a745;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
  transition: 0.3s;
}

.cta a:hover {
  background: #1e7e34;
}

/* BUTTON STYLE */
.hero-btn {
  display: inline-block;
  padding: 14px 30px;
  background: #198754;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  font-weight: 600;
  transition: 0.3s ease;
  position: relative;
  z-index: 2;
}

.hero-btn:hover {
  background: #145c3a;
  transform: translateY(-2px);
}

/* SUB HEADER */
.sub-header {
	height: 50vh;
	width: 100%;
	position: relative;
	background-position: center;
	background-size: cover;
}
.service-header {
	background-image: linear-gradient(rgba(4,9,30,0.7), rgba(4,9,30,0.7)),
	url("images/Inside_Solar_Plant.png");
	background-position: center;
	background-size: cover;
}


.contact-header {
	height: 50vh;
	width: 100%;
	background-image: linear-gradient(rgba(4,9,30,0.7), rgba(4,9,30,0.7)),
	url("images/contact_page_background.png");
	background-position: center;
	background-size: cover;
	position: relative;
}

.about-header {
	background-image: linear-gradient(rgba(4,9,30,0.7), rgba(4,9,30,0.7)), url("images/AgroSolar_Farmlan.png");
}

.sub-header h1 {
	color:#fff;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width:100%;
	text-align:center;
}

/* MOBILE */
@media(max-width: 700px){
	.about-intro .row {
		flex-direction: column;
	}
}


/* ================= HEADER FIX ================= */

.header-text {
  text-align: center;
  margin-top: auto;
  padding-bottom: 40px;
}
.header-text {
  font-size: 32px;
  transition: all 0.5s ease;
}

.header-text:hover {
  font-size: 38px;
  color: #f44336;
  letter-spacing: 3px;
}

.sub-header h2 {
	color:#fff;
	position:absolute;
	top:50%;
	left:50%;
	transform:translate(-50%, -50%);
	width:100%;
	text-align:center;
}
/* ================= SERVICES ================= */
.services-section {
  padding: 60px 10%;
}

.services-section h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #0a3d2c;
}

.header-text h1 {
  margin-bottom: 15px;
  color: #fff;
  font-size: 36px;
  font-weight: 700;
}

.header-text p {
  margin-top: 22px;
  color: #fff;
  font-size: 16px;
  line-height: 1.6;
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 20px;
}

.service-card {
  background: #fff;
  padding: 25px;
  border-radius: 12px;
  text-align: center;
  box-shadow: 0 5px 15px rgba(0,0,0,0.08);
  transition: 0.3s;
}

.service-card:hover {
  transform: translateY(-5px);
}

.service-card i {
  font-size: 40px;
  color: #0a3d2c;
  margin-bottom: 10px;
}

.highlight-card {
  border: 2px solid #0a3d2c;
  background: #eaf7f1;
}

.btn {
  display: inline-block;
  padding: 10px 18px;
  background: #0a3d2c;
  color: #fff;
  text-decoration: none;
  border-radius: 5px;
}

.btn:hover {
  background: #146b4f;
}

/* TRAINING */
.training-section {
	width: 80%;
	margin: auto;
	text-align: center;
}

.training-container {
	display:flex;
	align-items:center;
	gap:40px;
	margin-top:30px;
	flex-wrap:wrap;
}

.training-image img {
	width:100%;
	max-width:350px;
	border-radius:10px;
}

.training-text {
	flex:1;
	text-align:left;
}

/* CONTACT */
.contact-us {
	width: 80%;
	margin: auto;
}

.contact-us .row {
	display:flex;
	gap:40px;
	flex-wrap:wrap;
}

.contact-col {
	flex:1;
	min-width:280px;
}

/* ABOUT (ONLY ADDITIVE — DOES NOT BREAK OTHER PAGES) */
.about-intro {
	padding: 80px 20px;
	background: #f9f9f9;
	display: flex;
	justify-content: center;
}

.about-container {
	max-width: 900px;
	width: 100%;
	background:#fff;
	padding:40px;
	border-radius:12px;
	box-shadow:0 6px 20px rgba(0,0,0,0.08);
}

.about-container:hover {
	transform:translateY(-5px);
}

.about-text {
	line-height:1.8;
	color:#444;
  text-align: center;
  font-size: 20px;
}

/* TEAM */
.team-section {
	width:80%;
	margin:auto;
	text-align:center;
}

.team-container {
	display:grid;
	grid-template-columns: repeat(auto-fit, minmax(230px,1fr));
	gap:25px;
}

.team-card img {
	height:220px;
	object-fit:cover;
	object-position:top;
}

/* FOOTER */
.footer {
	text-align:center;
	padding:30px;
}

/* MOBILE GLOBAL FIX — headers, CTA banner, footer, course, team and
   team-intro sections keep their own padding, never the generic padding */
@media(max-width:700px){

	section:not(.header):not(.sub-header):not(.blog-header):not(.pitch-header-nav):not(.join-cta):not(.footer):not(.course):not(.team-section):not(.team-intro):not(.services-hero):not(.services-list):not(.gallery):not(.about-hero):not(.about-who):not(.about-stats):not(.about-mission):not(.about-vision):not(.visit-band):not(.activities-hero):not(.training-programs):not(.activities-grid):not(.recognition-band):not(.research-hero) {
		padding: 50px 15px;
	}

	.header,
	.sub-header,
	.blog-header,
	.pitch-header-nav {
		padding-top: 0;
		padding-bottom: 0;
	}

	.row,
	.training-container {
		flex-direction: column;
		text-align:center;
	}

	.course,
	.site,
	.services-section,
	.contact-us,
	.team-section {
		width: 95%;
	}

	.training-text {
		text-align:center;
	}
}
/* ================= CONTACT PAGE FIX ================= */

/* SECTION WIDTH CONTROL */
.contact-us {
	width: 80%;
	margin: auto;
	padding: 80px 0;
}

/* FLEX LAYOUT RESTORED */
.contact-us .row {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 40px;
	flex-wrap: wrap;
}

/* BOTH COLUMNS */
.contact-col {
	flex-basis: 48%;
}

/* CONTACT INFO BOXES */
.contact-col div {
	display: flex;
	align-items: center;
	margin-bottom: 25px;
	background: #fff;
	padding: 15px;
	border-radius: 10px;
	box-shadow: 0 4px 10px rgba(0,0,0,0.08);
}

.contact-col div i {
	font-size: 22px;
	color: #f44336;
	margin-right: 15px;
}

/* FORM STYLE (THIS WAS MISSING) */
.contact-col form {
	display: flex;
	flex-direction: column;
	gap: 15px;
}

/* INPUTS */
.contact-col input,
.contact-col textarea {
	width: 100%;
	padding: 12px;
	border: 1px solid #ddd;
	border-radius: 8px;
	outline: none;
	transition: 0.3s;
	font-family: 'Poppins', sans-serif;
}

/* FOCUS EFFECT */
.contact-col input:focus,
.contact-col textarea:focus {
	border-color: #f44336;
	box-shadow: 0 0 5px rgba(244,67,54,0.3);
}

/* BUTTON FIX */
.contact-col .hero-btn {
	width: fit-content;
	border: none;
	background: #f44336;
}

/* MAP FIX */
.map iframe {
	width: 100%;
	height: 450px;
	border-radius: 10px;
}

/* ================= MOBILE FIX ================= */
@media(max-width: 700px){

	.contact-us {
		width: 95%;
		padding: 60px 15px;
	}

	.contact-us .row {
		flex-direction: column;
		gap: 30px;
	}

	.contact-col {
		flex-basis: 100%;
	}

	.contact-col .hero-btn {
		width: 100%;
		text-align: center;
	}
}
/* ===== TEAM SECTION FIX ===== */

.team-section {
	width: 80%;
	margin: auto;
	text-align: center;
	padding: 70px 0;
}

.team-container {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
	gap: 25px;
	margin-top: 30px;
}

.team-card {
	background: #fff;
	border: 1px solid #eee;
	padding: 20px;
	border-radius: 12px;
	text-align: center;
	box-shadow: 0 4px 12px rgba(0,0,0,0.08);
	transition: 0.3s ease;
}

.team-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 10px 25px rgba(0,0,0,0.15);
}

.team-card img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	object-position: top;
	border-radius: 10px;
}

/* MOBILE FIX */
@media(max-width:700px){
	.team-section {
		width: 95%;
	}

	.team-container {
		grid-template-columns: 1fr;
	}
}
/* (Activities legacy section rules removed; see ACTIVITIES PAGE block below.) */
/* =========================================
   GLOBAL SAFETY FIX (DO NOT REMOVE)
========================================= */
html, body {
  overflow-x: clip;
}

/* =========================================
   HEADER FIX (ALL PAGES SAFE)
========================================= */
.sub-header {
  height: 50vh;
  width: 100%;
  position: relative;
  background-position: center;
  background-size: cover;
}

/* (Training header background removed with the old activities hero.) */

/* HEADER TEXT */
.sub-header h1 {
  color: #fff;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  text-align: center;
  z-index: 2;
}

/* NAV ALWAYS ABOVE */
nav {
  position: relative;
  z-index: 3;
}

/* =========================================
   TRAINING PAGE FIX
========================================= */

/* ============ ACTIVITIES PAGE — hero, training, grid, recognition ============ */

/* ---------- HERO (Blog-hero pattern, classroom photo) ---------- */
.activities-hero {
  width: 100%;
  min-height: clamp(340px, 46vh, 460px);
  display: flex;
  align-items: center;
  padding-top: calc(var(--header-space) + 40px);
  padding-bottom: 56px;
  background: linear-gradient(90deg, rgba(6,53,47,0.88), rgba(6,53,47,0.5)),
    url("images/Agrosolar_training_workshop2-1400.webp") center/cover no-repeat;
  position: relative;
  color: #fff;
}

.activities-hero-inner {
  width: 100%;
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 24px;
  text-align: left;
}

.activities-hero-title {
  margin: 0;
  font-weight: 600;
  font-size: clamp(40px, 6.5vw, 80px);
  line-height: 1.1;
  letter-spacing: -0.01em;
}

/* ---------- TRAINING PROGRAMS ---------- */
.training-programs {
  background: #fff;
  padding: 96px 24px;
}

.training-programs .wrap {
  max-width: 1200px;
  margin: 0 auto;
  min-width: 0;
}

.training-programs h2 {
  margin: 0 0 40px;
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.2;
  font-weight: 600;
  color: #06352F;
  text-align: center;
}

.tp-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.tp-card {
  background: #fff;
  border: 1px solid rgba(11,61,46,0.12);
  border-radius: 20px;
  padding: 32px;
  min-width: 0;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
  .tp-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(6,53,47,0.12);
  }
}

.tp-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: rgba(141,191,63,0.2);
  color: #06352F;
  font-size: 24px;
  margin-bottom: 20px;
}

.tp-card h3 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 600;
  color: #0B3D2E;
}

.tp-card p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #3E4E48;
}

.tp-divider {
  border: 0;
  border-top: 1px solid rgba(11,61,46,0.12);
  margin: 24px 0 16px;
}

.tp-cert {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin: 0;
  font-size: 15px;
  line-height: 1.65;
  color: #3E4E48;
}

.tp-cert > i {
  color: #8DBF3F;
  margin-top: 4px;
}

.tp-cert-label {
  display: block;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #4F7F1E;
  margin-bottom: 4px;
}

/* ---------- ACTIVITIES GRID ---------- */
.activities-grid {
  background: #F5F5EF;
  padding: 96px 24px;
}

.activities-grid .wrap {
  max-width: 1200px;
  margin: 0 auto;
  min-width: 0;
  text-align: center;
}

.activities-grid h2 {
  margin: 0 0 16px;
  font-size: clamp(28px, 3.5vw, 40px);
  line-height: 1.2;
  font-weight: 600;
  color: #06352F;
}

.activities-intro {
  margin: 0 auto;
  max-width: 68ch;
  font-size: 16px;
  line-height: 1.75;
  color: #3E4E48;
}

.act-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
  margin: 32px 0 0;
}

.act-chips[hidden] {
  display: none;
}

.act-chip {
  background: transparent;
  border: 1px solid rgba(11,61,46,0.3);
  color: #0B3D2E;
  border-radius: 999px;
  padding: 10px 20px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.act-chip.is-active {
  background: #0B3D2E;
  border-color: #0B3D2E;
  color: #fff;
}

.act-chip:focus-visible {
  outline: 2px solid #0B3D2E;
  outline-offset: 3px;
}

.act-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  margin-top: 32px;
  text-align: left;
}

.act-card {
  background: #fff;
  border: 1px solid rgba(11,61,46,0.10);
  border-radius: 20px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.act-media {
  position: relative;
  padding: 12px 12px 0;
}

.act-media-btn {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  padding: 0;
  border: 0;
  border-radius: 14px;
  overflow: hidden;
  background: #0B3D2E;
  cursor: zoom-in;
}

.act-media-btn img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 100%;
  object-fit: cover;
}

.act-media-btn:focus-visible {
  outline: 2px solid #0B3D2E;
  outline-offset: 3px;
}

.act-count {
  position: absolute;
  right: 22px;
  bottom: 12px;
  background: rgba(6,53,47,0.85);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 999px;
  padding: 5px 12px;
}

.act-body {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  flex: 1;
}

.act-pill {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #0B3D2E;
  background: rgba(141,191,63,0.2);
  border-radius: 999px;
  padding: 6px 12px;
  line-height: 1.4;
}

.act-body h3 {
  margin: 0;
  font-size: 20px;
  line-height: 1.35;
  font-weight: 600;
  color: #0B3D2E;
}

.act-body > p {
  margin: 0;
  font-size: 16px;
  line-height: 1.7;
  color: #3E4E48;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.act-pdf {
  margin-top: auto;
  align-self: flex-start;
  border: 1px solid #0B3D2E;
  color: #0B3D2E;
  background: transparent;
  border-radius: 999px;
  padding: 10px 18px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.act-pdf:hover {
  background: #0B3D2E;
  color: #fff;
}

.act-pdf:focus-visible {
  outline: 2px solid #0B3D2E;
  outline-offset: 3px;
}

/* Visible entry point to Student Research (non-dropdown visitors). */
.sr-promo {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: 32px;
  padding: 24px 28px;
  background: #0B3D2E;
  color: #fff;
  border-radius: 20px;
  text-decoration: none;
  text-align: left;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

@media (hover: hover) {
  .sr-promo:hover {
    transform: translateY(-4px);
    box-shadow: 0 14px 34px rgba(6,53,47,0.25);
  }
}

.sr-promo-text {
  display: grid;
  gap: 6px;
}

.sr-promo-text strong {
  font-size: 20px;
  font-weight: 600;
}

.sr-promo-text span span {
  font-size: 15px;
  color: rgba(255,255,255,0.8);
}

.sr-promo .fa-arrow-right {
  color: #8DBF3F;
  font-size: 20px;
}

.sr-promo:focus-visible {
  outline: 2px solid #0B3D2E;
  outline-offset: 3px;
}

/* ---------- RECOGNITION BAND ---------- */
.recognition-band {
  background: #06352F;
  padding: 96px 24px;
  color: #fff;
}

.recognition-inner {
  display: grid;
  grid-template-columns: 5fr 7fr;
  gap: 64px;
  align-items: center;
  max-width: 1200px;
  margin: 0 auto;
  min-width: 0;
}

.recognition-cert {
  min-width: 0;
}

.recognition-open {
  display: block;
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  padding: 0;
  border: 0;
  border-radius: 8px;
  overflow: hidden;
  background: none;
  cursor: zoom-in;
  box-shadow: 0 24px 64px rgba(0,0,0,0.45);
}

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

.recognition-open:focus-visible {
  outline: 2px solid #8DBF3F;
  outline-offset: 4px;
}

.recognition-text {
  min-width: 0;
}

.recognition-pill {
  display: inline-block;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8DBF3F;
  border: 1px solid #8DBF3F;
  border-radius: 999px;
  padding: 6px 14px;
  margin-bottom: 20px;
}

.recognition-text h2 {
  margin: 0 0 20px;
  font-family: 'Lora', Georgia, serif;
  font-weight: 600;
  font-size: clamp(30px, 3.5vw, 44px);
  line-height: 1.15;
  color: #fff;
}

.recognition-lead {
  margin: 0 0 24px;
  max-width: 60ch;
  font-size: 17px;
  line-height: 1.7;
  color: rgba(255,255,255,0.85);
}

.recognition-details {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: grid;
  gap: 12px;
  font-size: 16px;
  color: #fff;
}

.recognition-details li {
  display: flex;
  align-items: center;
  gap: 12px;
}

.recognition-details i {
  color: #8DBF3F;
  width: 20px;
  text-align: center;
}

.recognition-sign {
  margin: 0 0 28px;
  font-size: 15px;
  line-height: 1.7;
  color: rgba(255,255,255,0.75);
  max-width: 60ch;
}

.recognition-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 16px;
}

.recognition-btn {
  background: #8DBF3F;
  color: #06352F;
  border: 1px solid #8DBF3F;
  border-radius: 999px;
  padding: 13px 26px;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.recognition-btn:hover {
  background: #fff;
  border-color: #fff;
}

.recognition-btn:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.recognition-download {
  display: inline-block;
  border: 1px solid rgba(255,255,255,0.6);
  color: #fff;
  border-radius: 999px;
  padding: 13px 26px;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease;
}

.recognition-download:hover {
  background: rgba(255,255,255,0.12);
}

.recognition-download:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}

.recognition-link {
  color: #8DBF3F;
  font-size: 14px;
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.recognition-link:focus-visible {
  outline: 2px solid #8DBF3F;
  outline-offset: 3px;
}

/* ---------- ACTIVITY LIGHTBOX SIZE ---------- */
.act-dialog .gal-view {
  max-width: 92vw;
  max-height: 88vh;
}

/* ---------- ACTIVITIES RESPONSIVE ---------- */
@media (max-width: 1023px) {
  .tp-grid {
    grid-template-columns: 1fr;
  }

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

@media (max-width: 900px) {
  .training-programs,
  .activities-grid,
  .recognition-band {
    padding: 64px 24px;
  }

  .recognition-inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .recognition-lead {
    font-size: 16px;
  }
}

@media (max-width: 700px) {
  .act-grid {
    grid-template-columns: 1fr;
  }

  .tp-card {
    padding: 28px 24px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tp-card,
  .act-chip,
  .act-pdf,
  .recognition-btn,
  .recognition-download {
    transition: none;
  }

  .tp-card:hover {
    transform: none;
  }
}

/* =========================================
   MOBILE FIX (VERY IMPORTANT)
========================================= */
/* (Activities legacy section rules removed; see ACTIVITIES PAGE block above.) */


/* (Activities legacy gallery rules removed; see ACTIVITIES PAGE block above.) */

/* =========================================
   FINAL HEADER FIX (ALL PAGES)
========================================= */

.sub-header {
  height: 50vh;
  width: 100%;
  position: relative;
  background-position: center;
  background-size: cover;
}

/* INDIVIDUAL BACKGROUNDS */
.about-header {
  background-image: linear-gradient(rgba(4,9,30,0.7), rgba(4,9,30,0.7)),
  url("images/AgroSolar_Farmlan.png");
}

.services-header {
  background-image: linear-gradient(rgba(4,9,30,0.7), rgba(4,9,30,0.7)),
  url("images/Inside_Solar_Plant.png");
}

.contact-header {
  background-image: linear-gradient(rgba(4,9,30,0.7), rgba(4,9,30,0.7)),
  url("images/contact_page_background.png");
}

/* (Training header animation removed with the old activities hero.) */

/* TEXT CENTER FIX */
.sub-header h1 {
  color: #fff;
  font-size: 36px;
  font-weight: 700; /* ✅ makes bold */
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

.sub-header p {
  color: #fff;
  font-size: 16px;
  position: absolute;
  top: 60%;
  left: 50%;
  transform: translate(-50%, -50%);
  text-align: center;
}

/* NAV ABOVE BACKGROUND */
nav {
  position: relative;
  z-index: 10;
}

.header-text {
  animation: 2s ease-out forwards;
}

@keyframes slideInOnce {
  from {
    transform: translateX(-120%);
  }
  to {
    transform: translateX(0);
  }
}
/* ===== BLOG HEADER FIX ===== */
/* BLOG HERO — editorial left-aligned hero over a single dark photo */
.blog-header{
  width:100%;
  min-height:clamp(380px, 52vh, 520px);
  display:flex;
  align-items:center;
  padding-top:calc(var(--header-space) + 40px);
  padding-bottom:56px;
  background:linear-gradient(90deg, rgba(0,0,0,0.72) 0%, rgba(0,0,0,0.45) 60%, rgba(0,0,0,0.35) 100%),
  url("images/Inside_Solar_Plant.png") center/cover no-repeat;
  position:relative;
  color:#fff;
}

/* Pin the floating pill to the same top offset as the other pages */
.blog-header .glass-header{
  top:16px;
}

/* NAVBAR — in-flow so hero content is never overlapped; same gutter as other headers */
.blog-header nav{
  position:relative;
  top:auto;
  left:auto;
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:14px 6%;
}

.nav-links{
  flex:1;
  text-align:right;
}

.nav-links ul li{
  list-style:none;
  display:inline-block;
  padding:8px 12px;
}

.nav-links ul li a{
  text-decoration:none;
  font-weight:600;
}

/* BLOG CONTENT */
.blog-content{
  width:80%;
  margin:auto;
  padding:60px 0;
}

.row{
  display:flex;
  gap:30px;
  flex-wrap:wrap;
}

.blog-left{
  flex:2;
}

.blog-left img{
  width:100%;
  border-radius:10px;
}

.blog-left h2{
  margin:20px 0;
  color:#0a3d2c;
  font-weight:700;
  padding-left:10px;
  border-left:4px solid #0a3d2c;
  transition:0.3s;
}

.blog-left h2:hover{
  color:#1abc9c;
  border-left:4px solid #1abc9c;
  transform:translateX(5px);
}

.blog-left p{
  color:#444;
  line-height:1.8;
  font-size:16px;
  font-weight:500;
  text-align:justify;
  margin-bottom:15px;
}

/* SIDEBAR */
.blog-right{
  flex:1;
}

.blog-right h3{
  background:#0a3d2c;
  color:#fff;
  padding:10px;
  margin-bottom:20px;
}

.blog-right div{
  display:flex;
  justify-content:space-between;
  margin-bottom:10px;
}

/* CTA FIX */
.cta{
  width:80%;
  margin:80px auto;
  background:#0a3d2c;
  color:#fff;
  text-align:center;
  padding:40px 20px;
  border-radius:10px;
}

.cta h1{
  margin-bottom:15px;
}

/* MOBILE */
@media(max-width:768px){
  .row{
    flex-direction:column;
  }

  .nav-links{
    position:absolute;
    background:#0a3d2c;
    height:100vh;
    width:200px;
    top:0;
    right:-200px;
    text-align:left;
    padding-top:60px;
    transition:0.5s;
  }

  .nav-links ul li{
    display:block;
  }
}
/* ================= PROFILE PAGE FIX ================= */

/* HEADER BACKGROUND FOR PROFILE */
.john-header{
  background-image: linear-gradient(rgba(4,9,30,0.7), rgba(4,9,30,0.7)),
  url("images/profile-bg.jpg"); /* make sure this image exists */
  background-position: center;
  background-size: cover;
}

/* PROFILE SECTION */
.profile-section{
  width: 100%;
  padding: 80px 0;
}

/* CENTER CONTAINER */
.profile-container{
  width: 80%;
  margin: auto;

  display: flex;
  align-items: center;
  gap: 40px;
  flex-wrap: wrap;
}

/* IMAGE */
.profile-img{
  width: 250px;
  height: 250px;
  border-radius: 50%;
  object-fit: cover;
  box-shadow: 0 5px 15px rgba(0,0,0,0.2);
}

/* TEXT */
.profile-text{
  flex: 1;
  min-width: 280px;
}

.profile-text h2{
  font-size: 28px;
  margin-bottom: 15px;
  color: #0a3d2c;
}

.profile-text p{
  line-height: 1.7;
  color: #444;
}

/* MOBILE FIX */
@media(max-width:700px){
  .profile-container{
    flex-direction: column;
    text-align: center;
  }
}

/* ================= TEAM PAGE ================= */

.team-section{
  width: 80%;
  margin: auto;
  text-align: center;
  padding: 80px 0;
}

.team-title{
  font-size: 32px;
  margin-bottom: 30px;
  color: #0a3d2c;
}

.team-container{
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 30px;
}

/* CARD */
.team-card{
  background: #fff;
  padding: 20px;
  border-radius: 12px;
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
  transition: 0.3s ease;
}

.team-card:hover{
  transform: translateY(-8px);
  box-shadow: 0 12px 25px rgba(0,0,0,0.15);
}

/* IMAGE */
.team-card img{
  width: 100%;
  height: 220px;
  object-fit: cover;
  border-radius: 10px;
}

/* TEXT */
.team-card h3{
  margin-top: 15px;
  font-size: 20px;
  color: #222;
}

.team-card p{
  color: #555;
  font-size: 14px;
  margin: 10px 0;
}

/* BUTTON */
.team-btn{
  display: inline-block;
  padding: 10px 20px;
  background: #0a3d2c;
  color: #fff;
  text-decoration: none;
  border-radius: 6px;
  transition: 0.3s;
}

.team-btn:hover{
  background: #145c3a;
}

/* MOBILE */
@media(max-width:700px){
  .team-section{
    width: 95%;
  }
}

/* ================= PROFILE PAGE FIX ================= */

/* CENTER PROFILE CONTENT */
.profile-section{
  width: 100%;
  padding: 80px 0;
}

.profile-container{
  width: 75%;
  margin: auto;

  display: flex;
  align-items: center;
  gap: 50px;
  flex-wrap: wrap;
}

/* OVAL IMAGE */
.profile-img{
  width: 260px;
  height: 320px;
  border-radius: 50% / 60%;  /* oval shape */
  object-fit: cover;
  box-shadow: 0 6px 18px rgba(0,0,0,0.2);
}

/* TEXT AREA */
.profile-text{
  flex: 1;
  min-width: 300px;
}

/* NAME */
.profile-text h2{
  font-size: 28px;
  margin-bottom: 15px;
  color: #0a3d2c;
}

/* JUSTIFIED PARAGRAPH */
.profile-text p{
  text-align: justify;
  line-height: 1.8;
  color: #444;
}

/* ADD SPACE BETWEEN LINES FOR LONG TEXT */
.profile-text p::first-letter{
  font-size: 18px;
  font-weight: 600;
}

/* MOBILE FIX */
@media(max-width:700px){

  .profile-container{
    flex-direction: column;
    text-align: center;
    width: 90%;
  }

  .profile-text p{
    text-align: justify;
  }

}


/* Pitch Section */
/* =====================================================
   AGROSOLAR PITCH PRESENTATION
   ===================================================== */

.pitch-section {
    width: 90%;
    max-width: 1400px;
    margin: 80px auto;
    text-align: center;
}

.pitch-heading {
    max-width: 900px;
    margin: 0 auto 40px;
}

.pitch-heading h1 {
    font-size: 36px;
    margin-bottom: 15px;
}

.pitch-heading p {
    color: #666;
    line-height: 1.7;
}


/* ================= PRESENTATION VIEWER ================= */

.pitch-viewer {
    position: relative;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    max-width: none;
    margin-left: calc(50% - 50vw);
    background: #06352F;
    padding: 0;
    border-radius: 0;
    box-sizing: border-box;
    overflow: hidden;
}


/* ================= MAIN SLIDE ================= */

.main-slide {
    width: 100vw;
    height: 100vh;
    height: 100svh;
    margin: 0 auto;
    display: flex;
    justify-content: center;
    align-items: center;
    background: none;
    border-radius: 0;
    overflow: hidden;
}


.main-slide img {
    display: block;
    width: 100vw;
    height: 100vh;
    height: 100svh;
    max-width: none;
    max-height: none;
    object-fit: cover;
}


/* ================= OVERLAID ARROWS ================= */

.slide-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 5;
    width: 60px;
    height: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: rgba(0,0,0,0.45);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.35);
    border-radius: 50%;
    font-size: 24px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.slide-arrow:hover {
    background: rgba(0,0,0,0.65);
}

.slide-arrow:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.slide-prev {
    left: 20px;
}

.slide-next {
    right: 20px;
}


/* ================= OVERLAID COUNTER + FULLSCREEN ================= */

.slide-count {
    position: absolute;
    bottom: 18px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 5;
    background: rgba(0,0,0,0.55);
    color: #fff;
    font-weight: 500;
    font-size: 14px;
    border-radius: 999px;
    padding: 8px 18px;
    white-space: nowrap;
}

.pitch-viewer .fullscreen-container {
    position: absolute;
    top: 16px;
    right: 16px;
    z-index: 5;
    margin: 0;
    max-width: none;
    text-align: right;
}

.pitch-viewer .fullscreen-btn {
    background: rgba(0,0,0,0.55);
    color: #fff;
}

.pitch-viewer .fullscreen-btn:focus-visible {
    outline: 3px solid #fff;
    outline-offset: 2px;
}

.pitch-viewer:fullscreen .fullscreen-container {
    display: none;
}


/* ================= CONTROLS ================= */

.slide-controls {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 30px;
    margin-top: 20px;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}


.slide-controls button {
    border: none;
    padding: 12px 20px;
    background: #111;
    color: #fff;
    border-radius: 5px;
    cursor: pointer;
    font-family: "Poppins", sans-serif;
    font-weight: 500;
}


.slide-controls button:hover {
    opacity: 0.85;
}


.slide-controls button:focus-visible,
.fullscreen-btn:focus-visible,
.slide-thumbnail:focus-visible {
    outline: 2px solid #0B3D2E;
    outline-offset: 3px;
}


#slideNumber {
    color: #111;
    font-weight: 500;
}


/* ================= FULLSCREEN ================= */

.fullscreen-container {
    margin-top: 20px;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
    text-align: center;
}


.fullscreen-btn {
    border: none;
    padding: 11px 20px;
    border-radius: 5px;
    cursor: pointer;
    font-family: "Poppins", sans-serif;
    background: #111;
    color: #fff;
}


/* ================= THUMBNAILS ================= */

.thumbnails {
    display: flex;
    justify-content: center;
    gap: 12px;
    margin-top: 25px;
    overflow-x: auto;
    padding: 10px;
    max-width: 1600px;
    margin-left: auto;
    margin-right: auto;
}


.slide-thumbnail {
    width: 120px;
    height: 70px;
    object-fit: cover;
    border-radius: 5px;
    cursor: pointer;
    opacity: 0.55;
    border: 3px solid transparent;
    transition: 0.3s;
    flex-shrink: 0;
}


.slide-thumbnail:hover {
    opacity: 1;
}


.slide-thumbnail.active-thumbnail {
    opacity: 1;
    border: 3px solid #111;
}


/* ================= FULLSCREEN MODE ================= */

.pitch-viewer:fullscreen {
    background: #06352F;
    width: 100vw;
    height: 100vh;
    max-width: none;
    margin: 0;
    padding: 0;
    display: block;
}


.pitch-viewer:fullscreen .main-slide {
    width: 100vw;
    height: 100vh;
    max-width: none;
}


.pitch-viewer:fullscreen .main-slide img {
    width: 100vw;
    height: 100vh;
    max-width: none;
    max-height: none;
    object-fit: cover;
}


/* ================= MOBILE ================= */

@media (max-width: 768px) {

    .pitch-section {
        width: 95%;
        margin: 50px auto;
    }


    .pitch-heading h1 {
        font-size: 26px;
    }


    .pitch-heading p {
        font-size: 14px;
    }


    .pitch-viewer {
        height: auto;
        min-height: 0;
        background: none;
    }
    /* Fit the whole slide on screen with nothing cropped; readers
       pinch-zoom into details (allowed by the viewport meta). */
    .main-slide {
        display: block;
        height: auto;
        min-height: 0;
        overflow: visible;
    }


    .main-slide img {
        width: 100%;
        max-width: 100%;
        height: auto;
        max-height: none;
        object-fit: contain;
        touch-action: pan-x pan-y pinch-zoom;
    }

    /* Arrows stay pinned to the screen edges: only the slide scrolls
       beneath them, so they never move away. */
    .slide-arrow {
        width: 48px;
        height: 48px;
        font-size: 18px;
        z-index: 6;
    }

    .slide-prev {
        left: 10px;
    }

    .slide-next {
        right: 10px;
    }

    .slide-count {
        font-size: 12px;
        bottom: 12px;
    }


    .slide-controls {
        gap: 10px;
    }


    .slide-controls button {
        padding: 9px 12px;
        font-size: 12px;
    }


    #slideNumber {
        font-size: 12px;
    }


    .slide-thumbnail {
        width: 90px;
        height: 55px;
    }

}

/* pitch_style_Home_Page */
/* =========================================================
   AGROSOLAR PITCH PRESENTATION SECTION
   ========================================================= */

.pitch-preview {
    width: 90%;
    max-width: 1200px;
    margin: 100px auto;
    padding: 70px 60px;
    background: #f7f9f6;
    border-radius: 18px;
    box-sizing: border-box;
    overflow: hidden;
}


/* ================= PITCH HEADER ================= */

.pitch-header {
    max-width: 780px;
    margin: 0 auto 55px;
    text-align: center;
}


.pitch-label {
    display: inline-block;
    margin-bottom: 12px;
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #4f8a10;
}


.pitch-header h1 {
    font-size: 36px;
    line-height: 1.25;
    margin: 0 0 18px;
    color: #222;
}


.pitch-header p {
    font-size: 15px;
    line-height: 1.8;
    color: #666;
    margin: 0 auto;
}


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

.pitch-content {
    display: grid;
    grid-template-columns: 1.15fr 0.85fr;
    gap: 60px;
    align-items: center;
}


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

.pitch-image {
    position: relative;
}


.pitch-image-frame {
    position: relative;
    width: 100%;
    background: #111;
    border-radius: 12px;
    padding: 12px;
    box-sizing: border-box;
    box-shadow: 0 18px 40px rgba(0, 0, 0, 0.15);
    overflow: hidden;
}


.pitch-image-frame img {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 6px;
}


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

.pitch-image-overlay {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    padding: 18px 20px;

    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;

    background: rgba(0, 0, 0, 0.72);
    color: #fff;

    opacity: 0;
    transition: 0.35s;
}


.pitch-image-frame:hover .pitch-image-overlay {
    opacity: 1;
}


.pitch-image-overlay i {
    font-size: 14px;
}


.pitch-image-overlay span {
    font-size: 13px;
    font-weight: 500;
}


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

.pitch-text {
    padding: 10px 0;
}


.pitch-small-title {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 2px;
    color: #4f8a10;
}


.pitch-text h2 {
    margin: 12px 0 18px;
    font-size: 30px;
    line-height: 1.3;
    color: #222;
}


.pitch-text > p {
    font-size: 14px;
    line-height: 1.8;
    color: #666;
    margin-bottom: 28px;
}


/* ================= FEATURES ================= */

.pitch-features {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-bottom: 32px;
}


.pitch-feature {
    display: flex;
    align-items: flex-start;
    gap: 15px;
}


.pitch-feature > i {
    width: 42px;
    height: 42px;
    min-width: 42px;

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

    border-radius: 50%;
    background: #e8f2df;
    color: #4f8a10;
    font-size: 17px;
}


.pitch-feature h3 {
    margin: 0 0 4px;
    font-size: 15px;
    color: #222;
}


.pitch-feature p {
    margin: 0;
    font-size: 12px;
    line-height: 1.6;
    color: #777;
}


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

.pitch-btn {
    display: inline-flex;
    align-items: center;
    gap: 12px;

    padding: 14px 24px;

    background: #4f8a10;
    color: #fff;

    text-decoration: none;
    border-radius: 5px;

    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0.5px;

    transition: 0.3s;
}


.pitch-btn:hover {
    background: #356507;
    transform: translateY(-2px);
}


.pitch-btn i {
    transition: 0.3s;
}


.pitch-btn:hover i {
    transform: translateX(5px);
}


/* =========================================================
   PITCH SECTION - TABLET
   ========================================================= */

@media (max-width: 900px) {

    .pitch-preview {
        width: 92%;
        padding: 55px 35px;
    }


    .pitch-content {
        grid-template-columns: 1fr;
        gap: 45px;
    }


    .pitch-text {
        max-width: 700px;
        margin: auto;
        text-align: center;
    }


    .pitch-features {
        text-align: left;
    }

}


/* =========================================================
   PITCH SECTION - MOBILE
   ========================================================= */

@media (max-width: 600px) {

    .pitch-preview {
        width: 94%;
        margin: 70px auto;
        padding: 45px 20px;
        border-radius: 12px;
    }


    .pitch-header {
        margin-bottom: 35px;
    }


    .pitch-label {
        font-size: 11px;
        letter-spacing: 1.5px;
    }


    .pitch-header h1 {
        font-size: 26px;
    }


    .pitch-header p {
        font-size: 13px;
        line-height: 1.7;
    }


    .pitch-content {
        gap: 35px;
    }


    .pitch-image-frame {
        padding: 7px;
    }


    .pitch-image-overlay {
        left: 7px;
        right: 7px;
        bottom: 7px;
        padding: 12px;
    }


    .pitch-text h2 {
        font-size: 25px;
    }


    .pitch-text > p {
        font-size: 13px;
    }


    .pitch-feature {
        gap: 12px;
    }


    .pitch-feature > i {
        width: 38px;
        height: 38px;
        min-width: 38px;
        font-size: 15px;
    }


    .pitch-btn {
        width: 100%;
        justify-content: center;
        box-sizing: border-box;
    }

}


/* =====================================================
   PITCH PAGE HEADER - REDUCE HEIGHT ONLY
   ===================================================== */

.pitch-header-nav {
    min-height: 0 !important;
    height: auto !important;
}


/* Keep the navigation visible */

.pitch-header-nav nav {
    position: relative;
    z-index: 10;
}


/* Keep navigation links above the background */

.pitch-header-nav .nav-links {
    z-index: 20;
}


/* Keep the logo and menu icons visible */

.pitch-header-nav nav > a,
.pitch-header-nav nav > i {
    position: relative;
    z-index: 30;
}
/* =====================================================
   LEARN MORE ABOUT ASTIC PROJECT
   ===================================================== */

.astic-project {
    width: 90%;
    max-width: 1200px;
    margin: 90px auto;
    padding: 65px 70px;

    background: #f5f8f2;

    border-radius: 15px;

    box-sizing: border-box;
}


.astic-project-content {
    display: flex;
    align-items: center;
    justify-content: center;

    gap: 80px;
}


.astic-project-text {
    flex: 0 1 650px;
    padding-left: 35px;
}

.section-label {
    display: inline-block;

    margin-bottom: 12px;

    font-size: 12px;
    font-weight: 600;

    letter-spacing: 2px;

    color: #4f8a10;
}


.astic-project-text h1 {
    margin: 0 0 20px;

    font-size: 34px;
    line-height: 1.3;

    color: #222;
}


.astic-project-text p {
    margin-bottom: 15px;

    font-size: 14px;
    line-height: 1.8;

    color: #666;
}


.astic-project-btn {
    display: inline-flex;

    align-items: center;

    gap: 10px;

    margin-top: 18px;

    padding: 14px 22px;

    background: #4f8a10;

    color: #fff;

    text-decoration: none;

    border-radius: 5px;

    font-size: 12px;
    font-weight: 600;

    transition: 0.3s;
}


.astic-project-btn:hover {
    background: #356507;
    transform: translateY(-2px);
}


/* =====================================================
   PDF DOCUMENT ICON
   ===================================================== */

.astic-project-icon {
    width: 250px;
    min-width: 250px;

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


.document-icon {
    width: 180px;
    height: 220px;

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

    background: #ffffff;

    border-radius: 8px;

    box-shadow:
        0 15px 35px rgba(0, 0, 0, 0.12);

    position: relative;
}


.document-icon::before {
    content: "";

    position: absolute;

    top: 0;
    right: 0;

    width: 45px;
    height: 45px;

    background: #e8f0e2;

    clip-path: polygon(0 0, 100% 100%, 100% 0);
}


.document-icon i {
    font-size: 48px;

    color: #d32f2f;

    margin-bottom: 15px;
}


.document-icon span {
    text-align: center;

    font-size: 12px;

    font-weight: 600;

    line-height: 1.6;

    letter-spacing: 1px;

    color: #444;
}


/* =====================================================
   MOBILE
   ===================================================== */
@media (max-width: 700px) {

    .astic-project {
        width: 94%;
        margin: 65px auto;
        padding: 45px 25px;
    }

    .astic-project-content {
        flex-direction: column;
        gap: 40px;
        text-align: center;
    }

    .astic-project-text {
        padding-left: 0;
    }

    .astic-project-text h1 {
        font-size: 27px;
    }

    .astic-project-text p {
        font-size: 13px;
    }

    .astic-project-btn {
        justify-content: center;
        width: 100%;
        box-sizing: border-box;
    }

    .astic-project-icon {
        width: 100%;
    }

}

/* (Old activities masonry gallery removed; replaced by the data-driven grid above.) */
/* =====================================================
AGROSOLAR BLOG PAGE
===================================================== */

/* =====================================================
BLOG HEADER
===================================================== */

.blog-header nav {
position: relative;
z-index: 10;
}

/* HEADER TEXT */

/* =====================================================
FEATURED BLOG
===================================================== */

.featured-blog {
width: 90%;
max-width: 1200px;
margin: 90px auto;
}

.featured-container {
display: grid;
grid-template-columns: 1fr 1fr;
align-items: stretch;
background: #fff;
border-radius: 18px;
overflow: hidden;
box-shadow: 0 18px 50px rgba(0, 0, 0, 0.10);
}

.featured-image {
min-height: 430px;
min-width: 0;
}

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

.featured-content {
position: relative;
padding: 56px 55px;
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}

.featured-accent {
position: absolute;
top: 0;
left: 50%;
transform: translateX(-50%);
width: 72px;
height: 5px;
background: #FF7A00;
border-radius: 0 0 6px 6px;
}

.featured-meta {
margin: 0 0 14px;
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
color: #8A8A8A;
}

.blog-tag {
display: inline-block;
width: fit-content;
margin-bottom: 18px;
padding: 7px 12px;
background: #4f8a10;
color: #fff;
font-size: 10px;
font-weight: 600;
letter-spacing: 1.5px;
}

.featured-content h2 {
margin: 0 0 16px;
font-size: 32px;
line-height: 1.25;
font-weight: 700;
color: #1A1A1A;
}

.featured-divider {
display: block;
width: 64px;
height: 4px;
background: #FF7A00;
border-radius: 2px;
margin: 0 0 20px;
}

.featured-content p {
margin: 0 0 13px;
font-size: 14px;
line-height: 1.8;
color: #555;
}

.blog-btn {
display: inline-flex;
align-items: center;
gap: 10px;
width: fit-content;
margin-top: 12px;
padding: 13px 20px;
background: #FF7A00;
color: #fff;
text-decoration: none;
font-size: 11px;
font-weight: 600;
letter-spacing: 1px;
border-radius: 999px;
transition: 0.3s;
}

.blog-btn:hover {
background: #D96600;
transform: translateY(-2px);
}

.blog-btn:focus-visible,
.featured-content a:focus-visible {
outline: 2px solid #FF7A00;
outline-offset: 3px;
}

/* =====================================================
BLOG INTRODUCTION
===================================================== */

.blog-intro {
width: 90%;
max-width: 750px;
margin: 100px auto 55px;
text-align: center;
}

.section-label {
display: inline-block;
margin-bottom: 12px;
font-size: 11px;
font-weight: 600;
letter-spacing: 2px;
color: #4f8a10;
}

.blog-intro h2 {
margin: 0 0 18px;
font-size: 32px;
line-height: 1.35;
color: #222;
}

.blog-intro p {
margin: 0;
font-size: 14px;
line-height: 1.8;
color: #666;
}

/* =====================================================
BLOG ARTICLES
===================================================== */

.blog-articles {
width: 90%;
max-width: 1200px;
margin: 0 auto 100px;
}

.articles-container {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
}

/* BLOG CARD */

.blog-card {
background: #fff;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 8px 28px rgba(0, 0, 0, 0.08);
transition: 0.3s ease;
}

.blog-card:hover {
transform: translateY(-6px);
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.12);
}

/* IMAGE */

.blog-card-image {
position: relative;
height: 220px;
overflow: hidden;
}

.blog-card-image img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
transition: 0.4s ease;
}

.blog-card:hover .blog-card-image img {
transform: scale(1.05);
}

/* IMAGE TAG */

.blog-card-tag {
position: absolute;
left: 18px;
bottom: 18px;
padding: 6px 10px;
background: #4f8a10;
color: #fff;
font-size: 9px;
font-weight: 600;
letter-spacing: 1px;
}

/* CARD CONTENT */

.blog-card-content {
padding: 25px 25px 28px;
}

.article-category {
display: block;
margin-bottom: 10px;
font-size: 10px;
font-weight: 600;
letter-spacing: 1.5px;
color: #4f8a10;
}

.blog-card-content h3 {
margin: 0 0 13px;
font-size: 19px;
line-height: 1.45;
color: #222;
}

.blog-card-content p {
margin: 0 0 10px;
font-size: 13px;
line-height: 1.75;
color: #666;
}

.read-more {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 12px;
color: #4f8a10;
text-decoration: none;
font-size: 10px;
font-weight: 600;
letter-spacing: 1px;
}

.read-more:hover {
color: #356507;
}

/* =====================================================
CATEGORIES
===================================================== */

.blog-categories {
width: 100%;
padding: 85px 0;
background: #f7f9f5;
}

.categories-container {
width: 90%;
max-width: 1200px;
margin: auto;
}

.categories-heading {
max-width: 700px;
margin: 0 auto 50px;
text-align: center;
}

.categories-heading h2 {
margin: 0 0 15px;
font-size: 31px;
color: #222;
}

.categories-heading p {
margin: 0;
font-size: 14px;
line-height: 1.8;
color: #666;
}

/* CATEGORY GRID */

.category-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
}

.category-item {
padding: 30px 25px;
background: #fff;
text-align: center;
border-radius: 8px;
transition: 0.3s ease;
}

.category-item:hover {
transform: translateY(-4px);
box-shadow: 0 10px 25px rgba(0, 0, 0, 0.08);
}

.category-item i {
margin-bottom: 15px;
font-size: 28px;
color: #4f8a10;
}

.category-item h3 {
margin: 0 0 10px;
font-size: 17px;
color: #222;
}

.category-item p {
margin: 0;
font-size: 12px;
line-height: 1.7;
color: #666;
}

/* =====================================================
BLOG CTA
===================================================== */

.blog-cta {
text-align: center;
}

.blog-cta p {
margin: 0 auto 25px;
color: #666;
font-size: 14px;
}

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

@media (max-width: 900px) {

.featured-container {
    grid-template-columns: 1fr;
}

.featured-image {
    min-height: 350px;
    order: -1;
}

.featured-content {
    padding: 44px 40px 40px;
}

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

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

}

@media (max-width: 700px) {

.featured-blog {
    width: 92%;
    margin: 65px auto;
}

.featured-image {
    min-height: 270px;
}

.featured-content {
    padding: 30px 25px;
}

.featured-content h2 {
    font-size: 25px;
}

.featured-content p {
    font-size: 13px;
}

.blog-intro {
    width: 92%;
    margin: 70px auto 40px;
}

.blog-intro h2 {
    font-size: 26px;
}

.blog-articles {
    width: 92%;
    margin-bottom: 70px;
}

.articles-container {
    grid-template-columns: 1fr;
    gap: 25px;
}

.blog-card-image {
    height: 230px;
}

.blog-categories {
    padding: 65px 0;
}

.category-grid {
    grid-template-columns: 1fr;
}

}

/* =========================================================
   CORE FOCUS
========================================================= */

.core-focus {

    width: 90%;

    max-width: 1200px;

    margin: auto;

    padding: 85px 0;

    background: #ffffff;

}


/* CORE GRID
   DESKTOP = 4 COLUMNS × 2 ROWS
*/

.core-focus-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    grid-template-rows:
        repeat(2, 1fr);

    gap: 18px;

}


/* CORE CARD */

.core-card {

    min-height: 205px;

    padding: 25px 18px;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

    text-align: center;

    background:
        linear-gradient(
            145deg,
            #ffffff,
            #f5fbf3
        );

    border: 1px solid var(--border-green);

    border-radius: 15px;

    transition: 0.3s ease;

}


.core-card:hover {

    transform: translateY(-7px);

    border-color: #a8d3a6;

    box-shadow:
        0 12px 30px rgba(0, 80, 40, 0.12);

}


/* CORE ICON */

.core-icon {

    width: 70px;

    height: 70px;

    border-radius: 50%;

    display: flex;

    align-items: center;

    justify-content: center;

    color: #ffffff;

    font-size: 28px;

    margin-bottom: 15px;

    box-shadow:
        0 5px 12px rgba(0, 0, 0, 0.08);

}


.core-card h3 {

    max-width: 220px;

    color: #183f29;

    font-size: 13px;

    line-height: 1.5;

    font-weight: 600;

}


/* CORE ICON COLOURS */

.solar-icon {

    background: #66b91f;

}


.cold-icon {

    background: #158fd0;

}


.food-icon {

    background: #f1bd17;

}


.recycle-icon {

    background: #087d42;

}


.chemistry-icon {

    background: #66358e;

}


.tech-icon {

    background: #f07f2e;

}


.research-icon {

    background: #168d8a;

}


.collaboration-icon {

    background: #17629b;

}


/* =========================================================
   ASTIC MOTTO
========================================================= */

.astic-motto {

    width: 90%;

    max-width: 1200px;

    margin: 0 auto 75px;

    padding: 20px 30px;

    background:
        linear-gradient(
            135deg,
            #075d30,
            #087c3f
        );

    border-radius: 25px;

    box-shadow:
        0 12px 35px rgba(0, 80, 40, 0.16);

}


/* MOTTO CONTAINER */

.motto-container {

    min-height: 135px;

    display: grid;

    grid-template-columns: 130px 1fr 130px;

    align-items: center;

    gap: 20px;

}


/* LEAF IMAGES */

.motto-image {

    display: flex;

    align-items: center;

    justify-content: center;

}


.motto-image img {

    width: 95px;

    height: 95px;

    object-fit: contain;

}


/* RIGHT LEAF */

.motto-image:last-child img {

    transform: scaleX(-1);

}


/* MOTTO CONTENT */

.motto-content {

    text-align: center;

    color: #ffffff;

}


.motto-label {

    display: block;

    font-size: 11px;

    font-weight: 700;

    letter-spacing: 3px;

    margin-bottom: 5px;

    color: #dcebd4;

}


.motto-content h2 {

    display: flex;

    justify-content: center;

    align-items: center;

    flex-wrap: wrap;

    gap: 13px;

    font-size: clamp(26px, 4vw, 42px);

    line-height: 1.1;

    margin-bottom: 8px;

    font-style: italic;

}


.motto-content h2 span {

    color: #ffffff;

    font-weight: 700;

}


.motto-content h2 span:nth-of-type(2) {

    color: #f5bd18;

}


.motto-content h2 strong {

    color: #a8cf42;

    font-size: 28px;

}


.motto-content p {

    font-size: 11px;

    letter-spacing: 0.5px;

    color: #ffffff;

}


/* =========================================================
   PARTNERS
========================================================= */

.partners {

    width: 90%;

    max-width: 1200px;

    margin: auto;

    padding: 0 0 85px;

}


/* PARTNER GRID */

.partners-grid {

    display: grid;

    grid-template-columns:
        repeat(4, 1fr);

    gap: 20px;

}


/* PARTNER CARD */

.partner-card {

    min-height: 245px;

    padding: 25px 15px;

    display: flex;

    flex-direction: column;

    justify-content: center;

    align-items: center;

    text-align: center;

    background: #ffffff;

    border: 1px solid var(--border-green);

    border-radius: 17px;

    transition: 0.3s ease;

}


.partner-card:hover {

    transform: translateY(-7px);

    box-shadow: var(--shadow);

}


/* PARTNER IMAGE */

.partner-image {

    width: 125px;

    height: 110px;

    display: flex;

    align-items: center;

    justify-content: center;

    margin-bottom: 15px;

}


.partner-image img {

    max-width: 115px;

    max-height: 100px;

    width: auto;

    height: auto;

    object-fit: contain;

}


/* PARTNER TEXT */

.partner-card h3 {

    color: var(--dark-green);

    font-size: 14px;

    line-height: 1.4;

    margin-bottom: 4px;

}


.partner-card p {

    color: var(--text-grey);

    font-size: 11px;

}


/* Container is now transparent and takes up zero unnecessary space */
.animation-container {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 80px 20px; /* Increased padding slightly to accommodate the larger text size */
    background: transparent; /* Background removed completely */
    overflow: hidden; 
    width: 100%;
    box-sizing: border-box;
    position: relative;
}

/* The target paragraph tag styling - now larger and pure white */
.animated-text {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    font-size: 3.2rem; /* Increased from 2.5rem to make it a little bigger */
    font-weight: bold;
    text-align: center;
    line-height: 1.5;
    color: #ffffff; /* Explicit pure white text color */
    margin: 0; 
    white-space: nowrap; 
    position: absolute; 
    left: 50%;
    
    /* Smooth 14-second back-and-forth movement */
    animation: scrollAndZoom 14s cubic-bezier(0.25, 1, 0.5, 1) infinite alternate;
}

/* Highlights for emphasis on the second line */
.animated-text span {
    font-size: 2.2rem; /* Increased from 1.8rem to match the main text scale */
    font-weight: normal;
    color: #a7f3d0; /* A soft, premium light-green tint matching an Agro/Solar aesthetic against white text */
    display: block; 
    margin-top: 10px;
}

/* Keyframes combining absolute left positioning and transforms for accurate centering */
@keyframes scrollAndZoom {
    0% {
        transform: translate(-100vw, -50%) scale(0.8); 
        opacity: 0;
    }
    35% {
        transform: translate(-50%, -50%) scale(1); 
        opacity: 1;
    }
    65% {
        transform: translate(-50%, -50%) scale(1.08); 
        opacity: 1;
    }
    100% {
        transform: translate(100vw, -50%) scale(0.8); 
        opacity: 0;
    }
}
/* --- TEAM & STUDENT SECTION FIXES --- */

/* --- PROFESSIONAL 4x2 GRID CONFIGURATION --- */

.team-container {
    display: grid;
    /* Creates 4 identical columns of equal width */
    grid-template-columns: repeat(4, 1fr); 
    gap: 30px; 
    padding: 30px 0;
    width: 100%;
    max-width: 1200px; 
    margin: 0 auto; 
    box-sizing: border-box;
}

.team-card {
    background: #ffffff;
    border-radius: 10px;
    padding: 25px 20px; 
    text-align: center;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.05);
    box-sizing: border-box;
    
    display: flex;
    flex-direction: column;
    
    /* FIX: Absolute height constraint forces every card to be identical */
    height: 450px; 
}

/* Forces all internal images to scale uniformly */
.team-card img {
    width: 150px !important;
    height: 150px !important;
    border-radius: 50%;
    object-fit: cover;
    object-position: center 25%;
    margin: 0 auto 15px auto;
    display: block;
    background-color: #e2e8f0;
}

/* OPTIONAL STYLE POLISH: Centers the 3 cards on the second row */
@media (min-width: 993px) {
    /* Shifts the 5th card (Dr. Sunday Ekpo) to start slightly inward */
    .team-container .team-card:nth-child(5) {
        grid-column-start: 1; /* Adjusts alignment to start on the lower row */
    }
}

/* --- MOBILE RESPONSIVENESS (Splits the 4x2 automatically on smaller devices) --- */
@media (max-width: 992px) {
    .team-container {
        grid-template-columns: repeat(2, 1fr); /* 2 columns on tablets */
    }
}

@media (max-width: 600px) {
    .team-container {
        grid-template-columns: 1fr; /* 1 column on mobile phones */
        gap: 20px;
    }
}

/* =====================================================
   GLOBAL RESPONSIVE LAYER — tablet + mobile (all pages)
   No color / font-family / hero-image changes.
   ===================================================== */
img, video, iframe {
    max-width: 100%;
}

/* ---------- TABLET (701–992px) ---------- */
@media (max-width: 992px) {
    .core-focus-grid,
    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .motto-container {
        grid-template-columns: 90px 1fr 90px;
        gap: 12px;
    }

    .animated-text {
        font-size: 2.2rem;
    }

    .animated-text span {
        font-size: 1.5rem;
    }

    .nav-links ul li {
        padding: 8px 8px;
    }
}

/* ---------- MOBILE (≤700px) ---------- */
@media (max-width: 700px) {
    /* Unified slide-in menu panel for every header */
    .nav-links {
        position: fixed;
        top: 0;
        right: -220px;
        height: 100vh;
        width: 200px;
        max-width: 72vw;
        text-align: left;
        padding-top: 60px;
        z-index: 1000;
        transition: right 0.4s ease;
    }

    .nav-links ul li {
        display: block;
    }

    /* Hero */
    .header {
        min-height: 100svh;
    }

    .text-box {
        width: 92%;
        top: 58%;
        padding: 0 15px;
        box-sizing: border-box;
    }

    .text-box h1 {
        font-size: 22px !important;
        line-height: 1.35;
        margin-bottom: 0;
    }

    .text-box p {
        font-size: 13px;
    }

    .hero-btn {
        padding: 12px 22px;
        font-size: 13px;
        max-width: 100%;
        box-sizing: border-box;
    }

    /* Sub-page headers */
    .sub-header,
    .blog-header {
        height: auto;
        min-height: 42vh;
    }

    .sub-header h1,
    .sub-header h2 {
        font-size: 26px;
        width: calc(100% - 30px);
        padding: 0 15px;
        box-sizing: border-box;
    }

    .sub-header p {
        font-size: 13px;
        width: calc(100% - 30px);
        padding: 0 15px;
        box-sizing: border-box;
    }

    /* Scrolling headline (about page) — static on small screens to avoid overflow */
    .animation-container {
        padding: 60px 15px;
        min-height: 220px;
    }

    .animated-text {
        font-size: 1.5rem;
        white-space: normal;
        width: 92%;
    }

    .animated-text span {
        font-size: 1.1rem;
    }

    /* Marquee CTA — wrap instead of scrolling off-canvas */
    .cta {
        width: 92%;
        margin: 60px auto;
        padding: 45px 18px;
    }

    .cta h1 {
        white-space: normal;
        font-size: 22px;
        animation: none;
        display: block;
    }

    /* Grids stack to one column */
    .core-focus-grid,
    .partners-grid {
        grid-template-columns: 1fr;
    }

    .motto-container {
        grid-template-columns: 1fr;
        gap: 8px;
    }

    .motto-image img {
        width: 64px;
        height: 64px;
    }

    .site-col {
        height: 260px;
    }

    .team-card {
        height: auto;
        min-height: 0;
    }

    .map iframe {
        height: 300px;
    }
}

/* =====================================================
   FLOATING GLASS NAVBAR (all pages)
   Layout + styling only. No content changes.
   ===================================================== */
.glass-header {
    --nav-bg: rgba(255,255,255,0.10);
    --nav-border: rgba(255,255,255,0.14);
    --nav-text: #fff;
    --nav-hover: #FF9F1C;
    --nav-shadow: 0 8px 32px rgba(0,0,0,0.25);
    color: #fff;
    position: fixed;
    top: 16px;
    left: 50%;
    transform: translateX(-50%);
    width: min(1200px, calc(100% - 32px));
    height: 68px;
    padding: 0 24px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    box-sizing: border-box;
    background: var(--nav-bg);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    border: 1px solid var(--nav-border);
    box-shadow: var(--nav-shadow);
    z-index: 1000;
    transition: background-color 250ms ease, border-color 250ms ease, box-shadow 250ms ease, color 250ms ease;
}

.glass-header.nav-light {
    --nav-bg: rgba(245,245,239,0.88);
    --nav-border: rgba(11,61,46,0.10);
    --nav-text: #0B3D2E;
    --nav-hover: #C96A00;
    --nav-shadow: 0 8px 28px rgba(11,61,46,0.12);
    color: #0B3D2E;
}

/* Brand: round logo + ASTIC wordmark, one home link */
.glass-header .brand {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    flex-shrink: 0;
    line-height: 1;
}

.glass-header .logo-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 50%;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    padding: 0;
    line-height: 0;
}

.glass-header .logo-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    display: block;
    background: #ffffff;
    border-radius: 50%;
    aspect-ratio: 1 / 1;
}

.glass-header .wordmark {
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.12em;
    white-space: nowrap;
    background: linear-gradient(90deg, #FF9F1C 0%, #7ED957 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.glass-header.nav-light .wordmark {
    background: linear-gradient(90deg, #E07B00, #3F8F2A);
    -webkit-background-clip: text;
    background-clip: text;
}

/* Inner nav row (right side of the bar) */
.glass-header .glass-nav {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 0;
    margin: 0;
    min-width: 0;
}

.glass-header .nav-links {
    flex: none;
    text-align: right;
    padding: 0;
    margin: 0;
}

.glass-header .nav-links ul {
    display: flex;
    align-items: center;
    gap: 28px;
    margin: 0;
    padding: 0;
}

.glass-header .nav-links ul li {
    list-style: none;
    display: block;
    padding: 0;
    margin: 0;
}

.glass-header .nav-links ul li::after {
    display: none;
}

.glass-header .nav-links ul li a {
    color: var(--nav-text);
    text-decoration: none;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    white-space: nowrap;
    padding: 6px 0;
    border-bottom: 2px solid transparent;
    transition: color 250ms ease, border-color 250ms ease;
}

.glass-header .nav-links ul li a:hover {
    color: var(--nav-hover);
}

.glass-header .nav-links ul li a.active {
    border-bottom-color: var(--nav-hover);
}

/* ---------- ACTIVITIES SUBMENU (desktop dropdown) ---------- */
.glass-header .nav-links ul li.has-sub {
    position: relative;
    display: flex;
    align-items: center;
    gap: 2px;
}

.sub-toggle {
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    border-radius: 8px;
    padding: 0;
    color: var(--nav-text);
    cursor: pointer;
}

.sub-toggle .fa {
    font-size: 12px;
    line-height: 1;
    transition: transform 150ms ease;
}

.has-sub.open > .sub-toggle .fa {
    transform: rotate(180deg);
}

.sub-toggle:focus-visible {
    outline: 2px solid var(--nav-hover);
    outline-offset: 2px;
}

/* Invisible hover bridge so the panel survives the 10px gap.
   Rendered only while hovered/open so it never steals page clicks. */
.has-sub:hover::after,
.has-sub.open::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 10px;
}

.submenu {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    min-width: 220px;
    padding: 8px;
    border-radius: 14px;
    background: var(--nav-bg);
    border: 1px solid var(--nav-border);
    box-shadow: var(--nav-shadow);
    backdrop-filter: blur(16px) saturate(140%);
    -webkit-backdrop-filter: blur(16px) saturate(140%);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity 150ms ease, transform 150ms ease, visibility 150ms;
    z-index: 1001;
}

.glass-header .nav-links .submenu ul {
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
}

.glass-header .nav-links .submenu a {
    display: block;
    font-size: 14px;
    font-weight: 500;
    padding: 12px 14px;
    border-bottom: 0;
    border-radius: 10px;
    white-space: nowrap;
}

.glass-header .nav-links .submenu a:hover,
.glass-header .nav-links .submenu a:focus-visible {
    background: rgba(141,191,63,0.18);
}

.glass-header.nav-light .submenu a:hover,
.glass-header.nav-light .submenu a:focus-visible {
    color: #4F7F1E;
}

.glass-header .nav-links .submenu a.active {
    border-bottom: 0;
    color: #8DBF3F;
}

.glass-header.nav-light .submenu a.active {
    color: #4F7F1E;
}

.has-sub.open > .submenu {
    opacity: 1;
    visibility: visible;
    transform: none;
}

@media (hover: hover) {
    .has-sub:hover > .submenu {
        opacity: 1;
        visibility: visible;
        transform: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .sub-toggle .fa,
    .submenu {
        transition: none;
    }

    .submenu,
    .has-sub.open > .submenu {
        transform: none;
    }
}

/* ---------- FIT: tighten gaps (never the font size) ---------- */
@media (max-width: 1150px) {
    .glass-header .nav-links ul {
        gap: 16px;
    }
}

.glass-header .brand:focus-visible,
.glass-header .nav-links ul li a:focus-visible,
.glass-header .glass-nav .fa-bars:focus-visible,
.glass-header .nav-links .fa-times:focus-visible,
.glass-header .nav-links .fa-xmark:focus-visible {
    outline: 2px solid var(--nav-hover);
    outline-offset: 3px;
}

/* Hamburger lives inside the bar; desktop never shows it */
.glass-header .glass-nav .fa-bars,
.glass-header .glass-nav .fa-xmark,
.glass-header .glass-nav .fa-times {
    display: none;
    color: var(--nav-text);
}

/* Reserve space where the old in-flow nav gave the section its height */
.pitch-header-nav {
    min-height: 84px;
}

/* ---------- TABLET: tighten so links never wrap ---------- */
@media (max-width: 992px) {
    .glass-header {
        padding: 0 16px;
    }

    .glass-header .wordmark {
        font-size: 19px;
    }

    .glass-header .nav-links ul {
        gap: 12px;
    }

    .glass-header .nav-links ul li a {
        font-size: 13px;
    }
}

/* ---------- MOBILE (<768px): hamburger + glass dropdown ---------- */
@media (max-width: 767px) {
    .glass-header {
        padding: 0 16px;
    }

    .glass-header .glass-nav .fa-bars {
        display: block;
        color: var(--nav-text);
        font-size: 22px;
        cursor: pointer;
        margin: 0;
    }

    .glass-header .nav-links {
        position: fixed;
        top: 92px;
        left: 50%;
        right: auto;
        transform: translate(-50%, -8px);
        width: min(420px, calc(100% - 32px));
        height: auto;
        padding: 12px;
        border-radius: 16px;
        background: var(--nav-bg);
        backdrop-filter: blur(16px) saturate(140%);
        -webkit-backdrop-filter: blur(16px) saturate(140%);
        border: 1px solid var(--nav-border);
        box-shadow: var(--nav-shadow);
        box-sizing: border-box;
        text-align: center;
        opacity: 0;
        visibility: hidden;
        transition: opacity 180ms ease, transform 180ms ease, visibility 180ms;
    }

    .glass-header .nav-links.open {
        opacity: 1;
        visibility: visible;
        transform: translate(-50%, 0);
    }

    .glass-header .nav-links ul {
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
    }

    .glass-header .nav-links ul li a {
        display: block;
        padding: 12px 10px;
        border-bottom: none;
    }

    .glass-header .nav-links ul li a.active {
        color: var(--nav-hover);
        border-bottom: none;
    }

    .glass-header .nav-links .fa-times,
    .glass-header .nav-links .fa-xmark {
        display: block;
        color: var(--nav-text);
        font-size: 22px;
        cursor: pointer;
        margin: 4px 4px 4px auto;
    }
}

@media (prefers-reduced-motion: reduce) {
    .glass-header,
    .glass-header .nav-links ul li a {
        transition: none;
    }
}

/* =====================================================
   PARTNERS LOGO MARQUEE (index page)
   Pure-CSS right-to-left loop. Layout only.
   ===================================================== */
.partners-marquee {
    overflow: hidden;
    -webkit-mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
    mask-image: linear-gradient(to right, transparent 0, #000 8%, #000 92%, transparent 100%);
}

.partners-marquee:focus {
    outline: none;
}

.partners-marquee:focus-visible {
    outline: 2px solid #7ED957;
    outline-offset: 4px;
}

.partners-track {
    display: flex;
    width: max-content;
    will-change: transform;
    animation: partners-scroll 30s linear infinite;
}

.partners-half {
    display: flex;
}

/* Fixed-width items with trailing margin (no flex gap) so that
   translateX(-50%) lands exactly on the second half: seamless loop. */
.partners-marquee .partner-card {
    flex: 0 0 220px;
    width: 220px;
    margin-right: 64px;
}

/* Identical logo boxes: every logo contained, never stretched/cropped */
.partners-marquee .partner-image {
    width: 100%;
    height: 90px;
}

.partners-marquee .partner-image img {
    width: 100%;
    height: 100%;
    max-width: none;
    max-height: none;
    object-fit: contain;
}

/* Blend solid-white logo boxes into the white cards */
.partners-marquee .partner-image img[src*="Manchester"],
.partners-marquee .partner-image img[src*="TISG"] {
    mix-blend-mode: multiply;
}

/* Names stay inside the fixed item width */
.partners-marquee .partner-card h3 {
    max-width: 100%;
    overflow-wrap: break-word;
}

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

/* Pause while hovered or while anything inside has keyboard focus */
.partners-marquee:hover .partners-track,
.partners-marquee:focus-within .partners-track {
    animation-play-state: paused;
}

/* Pause / resume control: plain text-style button, left aligned */
.marquee-toggle {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 18px 0 0;
    padding: 6px 0;
    background: none;
    border: none;
    cursor: pointer;
    font-family: monospace;
    font-size: 12px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: #777;
}

.marquee-toggle:hover {
    color: #444;
}

.marquee-toggle:focus-visible {
    outline: 2px solid #7ED957;
    outline-offset: 3px;
}

.marquee-toggle .toggle-icon {
    display: inline-block;
    flex-shrink: 0;
}

.marquee-toggle .toggle-icon[hidden] {
    display: none;
}

.marquee-toggle .icon-pause {
    width: 10px;
    height: 12px;
    box-sizing: border-box;
    border-left: 3px solid currentColor;
    border-right: 3px solid currentColor;
}

.marquee-toggle .icon-play {
    width: 0;
    height: 0;
    border-left: 10px solid currentColor;
    border-top: 7px solid transparent;
    border-bottom: 7px solid transparent;
}

/* ---------- MOBILE: smaller items, same loop feel ---------- */
@media (max-width: 700px) {
    .partners-marquee .partner-card {
        flex-basis: 170px;
        width: 170px;
        margin-right: 40px;
        min-height: 0;
        padding: 20px 12px;
    }

    .partners-marquee .partner-image {
        height: 70px;
    }

    .partners-marquee .partner-card h3 {
        font-size: 12px;
    }

    .partners-marquee .partner-card p {
        font-size: 10px;
    }
}

/* ---------- REDUCED MOTION: static, horizontally scrollable row ---------- */
@media (prefers-reduced-motion: reduce) {
    .partners-track {
        animation: none;
    }

    .partners-marquee {
        overflow-x: auto;
        -webkit-mask-image: none;
        mask-image: none;
    }
}

/* =====================================================
   JOIN CTA BANNER (above footer)
   Full-width photo background, centered heading + button.
   ===================================================== */
section.join-cta {
    position: relative;
    width: 100%;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    display: block;
    text-align: center;
    overflow: hidden;
    background-color: #101815;
    line-height: 0;
}

/* Photo is in-flow and sets the section height, so it always
   spans end to end with no crop and no empty bands at any width */
.join-cta-bg {
    position: static;
    display: block;
    line-height: 0;
}

.join-cta-bg img {
    width: 100%;
    height: auto;
    display: block;
}

section.join-cta::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(rgba(0,0,0,0.55), rgba(0,0,0,0.55));
}

/* 60px bottom fade so the photo meets the green without a harsh line.
   Absolute overlay only: adds zero height to the layout. */
section.join-cta::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 60px;
    z-index: 1;
    pointer-events: none;
    background: linear-gradient(transparent, rgba(0,0,0,0.35));
}

.join-cta-inner {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 32px;
    max-width: 100%;
    padding: 24px;
    box-sizing: border-box;
    line-height: 1.2;
}

.join-cta-inner h2 {
    margin: 0;
    max-width: 900px;
    color: #fff;
    font-size: clamp(28px, 4vw, 48px);
    font-weight: 500;
    line-height: 1.2;
    text-shadow: 0 2px 12px rgba(0,0,0,0.4);
}

.join-cta-btn {
    display: inline-block;
    padding: 14px 28px;
    color: #fff;
    font-size: 14px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    text-decoration: none;
    border: 1px solid #fff;
    border-radius: 6px;
    background: rgba(255,255,255,0.08);
    transition: background-color 180ms ease, color 180ms ease;
}

.join-cta-btn:hover,
.join-cta-btn:focus {
    background: #fff;
    color: #111;
}

.join-cta-btn:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 3px;
}

/* ---------- MOBILE: compact overlay content over the full photo ---------- */
@media (max-width: 700px) {
    section.join-cta {
        aspect-ratio: auto;
        min-height: 0;
        padding: 0;
    }

    .join-cta-inner {
        gap: 16px;
        padding: 16px;
    }

    .join-cta-inner h2 {
        font-size: clamp(20px, 5.5vw, 28px);
    }

    .join-cta-btn {
        padding: 11px 22px;
        font-size: 13px;
    }
}

/* =====================================================
   DARK FOOTER WITH WAVY GREEN TOP EDGE
   Layout + styling only.
   ===================================================== */
section.footer {
    padding: 0;
    background: #050505;
    color: #fff;
    text-align: left;
    overflow: hidden;
}

.footer-wave {
    display: block;
    width: 100%;
    height: 60px;
    margin: 0;
    padding: 0;
    line-height: 0;
    background: transparent;
}

.footer-wave path {
    fill: var(--brand-lime);
}

.footer-inner {
    max-width: 1200px;
    margin: -1px auto 0;
    padding: 64px 24px 40px;
    box-sizing: border-box;
}

.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    gap: 48px;
    align-items: start;
}

/* Brand column */
.footer-brand-link {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    line-height: 1;
}

.footer-brand .logo-circle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    overflow: hidden;
    background: #ffffff;
    border: 1px solid rgba(255,255,255,0.7);
    box-shadow: 0 2px 8px rgba(0,0,0,0.25);
    line-height: 0;
}

.footer-brand .logo-circle img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 4px;
    display: block;
    background: #ffffff;
    border-radius: 50%;
}

.footer-brand .wordmark {
    font-weight: 800;
    font-size: 22px;
    letter-spacing: 0.12em;
    white-space: nowrap;
    background: linear-gradient(90deg, #FF9F1C 0%, #7ED957 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.footer-brand p {
    margin: 16px 0 0;
    max-width: 420px;
    color: #fff;
    font-size: 15px;
    line-height: 1.6;
}

/* Link columns */
.footer-links h4,
.footer-social h4 {
    margin: 0 0 16px;
    color: #fff;
    font-size: 16px;
    font-weight: 600;
}

.footer-links ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.footer-links ul li a {
    color: rgba(255,255,255,0.8);
    font-size: 14px;
    text-decoration: none;
    transition: color 150ms ease;
}

.footer-links ul li a:hover,
.footer-links ul li a:focus-visible {
    color: #8DBF3F;
}

.footer-links ul li a:focus-visible {
    outline: 2px solid #8DBF3F;
    outline-offset: 3px;
}

/* Social icons */
.footer-social .social-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.footer-social .social-row a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: #fff;
    color: #000;
    font-size: 16px;
    text-decoration: none;
    transition: background-color 150ms ease;
}

.footer-social .social-row a:hover,
.footer-social .social-row a:focus-visible {
    background: #8DBF3F;
}

.footer-social .social-row a:focus-visible {
    outline: 2px solid #8DBF3F;
    outline-offset: 3px;
}

/* Bottom bar */
.footer-bottom {
    margin-top: 40px;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 20px;
    text-align: center;
}

.footer-bottom p {
    margin: 0;
    color: rgba(255,255,255,0.8);
    font-size: 14px;
}

/* ---------- TABLET: 2 columns ---------- */
@media (max-width: 992px) {
    .footer-grid {
        grid-template-columns: 1fr 1fr;
    }
}

/* ---------- MOBILE: 1 column, left aligned ---------- */
@media (max-width: 700px) {
    .footer-wave {
        height: 40px !important;
    }

    section.footer {
        padding: 0;
    }

    .footer-inner {
        padding: 48px 20px 32px;
    }

    .footer-grid {
        grid-template-columns: 1fr;
        gap: 32px;
    }
}

/* =====================================================
   MISSION / VISION / SUPPORT BENTO CARDS (home)
   ===================================================== */
section.course {
    width: 100%;
    margin: 0;
    padding: 64px 0;
    background: #F5F5EF;
}

.mvs-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 24px;
    align-items: stretch;
}

.mvs-card {
    --card: #FFFFFF;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    border-radius: 24px;
    padding: 32px 32px 88px;
    text-align: left;
    transition: transform 200ms ease, box-shadow 200ms ease;
}

.mvs-card:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 32px rgba(6,53,47,0.12);
}

.mvs-mission {
    --card: #FFFFFF;
    background: #FFFFFF;
    color: #4B5B55;
}

.mvs-mission h3 {
    color: #0B3D2E;
}

.mvs-vision {
    --card: var(--brand-lime);
    background: var(--brand-lime);
    color: #0B3D2E;
}

.mvs-vision h3 {
    color: #0B3D2E;
}

.mvs-support {
    --card: #06352F;
    background: #06352F;
    color: rgba(255,255,255,0.8);
}

.mvs-support h3 {
    color: #FFFFFF;
}

.mvs-icon {
    width: 40px;
    height: 40px;
    margin-bottom: 40px;
    flex-shrink: 0;
}

.mvs-mission .mvs-icon,
.mvs-vision .mvs-icon {
    color: #0B3D2E;
}

.mvs-support .mvs-icon {
    color: #B5F07C;
}

.mvs-card h3 {
    margin: 0 0 12px;
    font-size: 24px;
    font-weight: 600;
    line-height: 1.25;
}

.mvs-card p {
    margin: 0;
    font-size: 15px;
    line-height: 1.6;
}

/* Decorative concentric rings, Vision card only, clipped by corners */
.mvs-vision::after {
    content: "";
    position: absolute;
    right: -80px;
    bottom: -80px;
    width: 240px;
    height: 240px;
    border-radius: 50%;
    z-index: 0;
    background:
        radial-gradient(circle, transparent 64px, rgba(11,61,46,0.25) 65px, rgba(11,61,46,0.25) 66px, transparent 67px),
        radial-gradient(circle, transparent 92px, rgba(11,61,46,0.25) 93px, rgba(11,61,46,0.25) 94px, transparent 95px);
}

.mvs-vision .mvs-icon,
.mvs-vision h3,
.mvs-vision p {
    position: relative;
    z-index: 1;
}

/* Bottom-left cut-out notch in the section background colour */
.mvs-notch {
    position: absolute;
    left: 0;
    bottom: 0;
    width: 150px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #F5F5EF;
    border-top-right-radius: 20px;
}

/* Concave corners where the notch meets the card edges */
.mvs-notch::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 0 0, var(--card) 20px, transparent 21px);
}

.mvs-notch::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    width: 20px;
    height: 20px;
    background: radial-gradient(circle at 100% 100%, var(--card) 20px, transparent 21px);
}

.mvs-btn {
    display: inline-flex;
    align-items: center;
    height: 40px;
    padding: 0 18px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 500;
    white-space: nowrap;
    text-decoration: none;
    transition: transform 200ms ease, filter 200ms ease;
}

.mvs-mission .mvs-btn {
    background: #FFFFFF;
    color: #0B3D2E;
    box-shadow: 0 2px 10px rgba(6,53,47,0.12);
}

.mvs-vision .mvs-btn {
    background: var(--brand-lime);
    color: #0B3D2E;
    border: 1px solid rgba(11,61,46,0.25);
}

.mvs-support .mvs-btn {
    background: #06352F;
    color: #FFFFFF;
}

/* Textless pill that keeps the notch background exactly as before */
.mvs-pill {
    display: inline-block;
    height: 40px;
    width: 114px;
    border-radius: 999px;
}

.mvs-mission .mvs-pill {
    background: #FFFFFF;
    box-shadow: 0 2px 10px rgba(6,53,47,0.12);
}

.mvs-vision .mvs-pill {
    background: var(--brand-lime);
    border: 1px solid rgba(11,61,46,0.25);
}

.mvs-support .mvs-pill {
    background: #06352F;
}

.mvs-btn:hover {
    transform: translateY(-2px);
    filter: brightness(1.06);
}

.mvs-support .mvs-btn:hover {
    filter: brightness(1.3);
}

.mvs-btn:focus-visible {
    outline: 2px solid #0B3D2E;
    outline-offset: 3px;
}

.mvs-support .mvs-btn:focus-visible {
    outline-color: #B5F07C;
}

/* ---------- TABLET + MOBILE: single column ---------- */
@media (max-width: 1024px) {
    .mvs-grid {
        grid-template-columns: 1fr;
        gap: 20px;
    }
}

@media (max-width: 700px) {
    section.course {
        padding: 48px 0;
    }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    .mvs-card,
    .mvs-btn {
        transition: none;
    }

    .mvs-card:hover,
    .mvs-btn:hover {
        transform: none;
    }
}

/* =====================================================
   TEAM / LEADERSHIP EDITORIAL GRID (about + team pages)
   ===================================================== */
section.team-section {
    width: 100%;
    margin: 0;
    padding: 80px 24px;
    box-sizing: border-box;
    background: #06352F;
    text-align: left;
}

.team-section h2,
.team-section .team-title {
    max-width: 1200px;
    margin: 0 auto 32px;
    color: #FFFFFF;
    font-size: 30px;
    font-weight: 600;
    line-height: 1.25;
    text-align: left;
}

.team-section .team-title-center {
    text-align: center;
}

.team-section .team-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: stretch;
    gap: 24px;
    max-width: 1200px;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    box-sizing: border-box;
}

.team-section .team-card {
    flex: 1 1 300px;
    width: 100%;
    max-width: 384px;
    min-width: 0;
    height: auto;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background: rgba(255,255,255,0.06);
    border: none;
    border-radius: 20px;
    box-shadow: none;
    padding: 24px;
    margin: 0;
    box-sizing: border-box;
    text-align: left;
    transition: transform 200ms ease, background-color 200ms ease;
}

.team-section .team-card:hover {
    transform: translateY(-4px);
    background: rgba(255,255,255,0.10);
    box-shadow: none;
}

/* Rounded-square photo, identical treatment for every portrait */
.team-section .lead-photo {
    position: relative;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 14px;
    overflow: hidden;
    background: #E4E2DB;
    margin: 0 0 20px;
}

.team-section .lead-photo img {
    position: absolute;
    inset: 0;
    width: 100% !important;
    height: 100% !important;
    margin: 0;
    border-radius: 0;
    object-fit: cover;
    object-position: center 20%;
    filter: saturate(0.9) contrast(1.02);
    background: #E4E2DB;
}

.team-section .lead-photo img[src="#"] {
    display: none;
}

.team-section .team-card h3 {
    margin: 0 0 6px;
    color: #FFFFFF;
    font-size: 20px;
    font-weight: 600;
    line-height: 1.25;
}

.team-section .lead-role {
    margin: 0;
    color: rgba(255,255,255,0.7);
    font-family: 'Lora', Georgia, serif;
    font-size: 18px;
    font-weight: 400;
    line-height: 1.4;
}

.team-section .lead-org {
    margin: 2px 0 0;
    color: rgba(255,255,255,0.7);
    font-size: 14px;
    line-height: 1.5;
}

.team-section .lead-qual {
    margin: 2px 0 0;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    line-height: 1.5;
}

.team-section .lead-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: auto;
    padding-top: 20px;
    color: rgba(255,255,255,0.8);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 150ms ease;
}

.team-section .lead-link span {
    display: inline-block;
    transition: transform 150ms ease;
}

.team-section .lead-link:hover {
    color: #8DBF3F;
}

.team-section .lead-link:hover span {
    transform: translateX(4px);
}

.team-section .lead-link:focus-visible {
    outline: 2px solid #8DBF3F;
    outline-offset: 3px;
}

/* ---------- TABLET + MOBILE ---------- */
@media (max-width: 700px) {
    section.team-section {
        padding: 64px 20px;
    }
}

/* ---------- TOUCH: no lift effect ---------- */
@media (hover: none) {
    .team-section .team-card:hover {
        transform: none;
        background: rgba(255,255,255,0.06);
    }
}

/* ---------- REDUCED MOTION ---------- */
@media (prefers-reduced-motion: reduce) {
    .team-section .team-card,
    .team-section .lead-link,
    .team-section .lead-link span {
        transition: none;
    }

    .team-section .team-card:hover,
    .team-section .lead-link:hover span {
        transform: none;
    }
}

/* =====================================================
   ABOUT + TEAM HEADERS: photo removed, plain surface.
   Overlay text switches from white to dark greens.
   ===================================================== */
.sub-header.about-header {
    background-image: none;
    background-color: transparent;
}

.about-header .animated-text {
    color: #0B3D2E;
}

.about-header .animated-text span {
    color: #3F8F2A;
}

section.sub-header.about-header h1 {
    color: #0B3D2E;
}

/* =====================================================
   TEAM INTRO SPLIT HEADER (about page)
   Cream block directly above the team grid.
   ===================================================== */
.team-intro {
    background: #F5F5EF;
}

.team-intro-grid {
    max-width: 1200px;
    margin: 0 auto;
    padding: 128px 24px 48px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 48px;
    align-items: start;
}

.team-intro-grid h2 {
    margin: 0;
    font-family: 'Lora', Georgia, serif;
    font-size: 56px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: -0.01em;
    color: #0B3D2E;
}

.team-intro-text p {
    margin: 0;
    max-width: 60ch;
    text-align: left;
    font-weight: 400;
    font-size: 18px;
    line-height: 1.65;
    color: #5B6B65;
}

.team-intro-text .team-label {
    display: block;
    margin-top: 16px;
    text-align: right;
    text-transform: uppercase;
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.12em;
    color: rgba(11,61,46,0.7);
}

/* Pull the grid up: no band between header block and photos.
   The adjacent grid heading is hidden as the intro heading replaces it. */
.team-intro + section.team-section {
    margin-top: 0;
    padding-top: 32px;
}

.team-intro + section.team-section > h2:first-child {
    display: none;
}

/* ---------- BELOW 900PX: single column ---------- */
@media (max-width: 900px) {
    .team-intro-grid {
        grid-template-columns: 1fr;
        gap: 20px;
        padding-top: 112px;
    }

    .team-intro-grid h2 {
        font-size: 36px;
    }

    .team-intro-text p {
        font-size: 16px;
    }
}

/* =====================================================
   MEMBER PROFILE SPLIT LAYOUT (profile pages)
   Dark page, sticky portrait left, bio right.
   ===================================================== */
body.member-page {
    background: #06352F;
}

.member {
    background: #06352F;
}

.member-wrap {
    max-width: 1200px;
    margin: 0 auto;
    padding: 140px 24px 96px;
    box-sizing: border-box;
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 64px;
    align-items: start;
}

.member-photo {
    position: sticky;
    top: 120px;
    width: 100%;
    aspect-ratio: 1 / 1;
    border-radius: 16px;
    overflow: hidden;
    background: #E4E2DB;
    margin: 0;
    box-shadow: none;
}

.member-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center 20%;
    display: block;
}

.member-photo--placeholder {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 64px;
    font-weight: 600;
    color: rgba(11,61,46,0.4);
}

.member-kicker {
    margin: 0 0 12px;
    color: rgba(255,255,255,0.7);
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.14em;
    text-transform: uppercase;
}

.member-body h1 {
    margin: 0;
    color: #FFFFFF;
    font-size: 44px;
    font-weight: 600;
    line-height: 1.1;
    text-align: left;
}

.member-role {
    margin: 12px 0 0;
    color: rgba(255,255,255,0.7);
    font-family: 'Lora', Georgia, serif;
    font-size: 24px;
    font-weight: 400;
    line-height: 1.4;
}

.member-qual {
    margin: 6px 0 0;
    color: rgba(255,255,255,0.7);
    font-size: 15px;
    line-height: 1.5;
}

.member-rule {
    border: none;
    border-top: 1px solid rgba(255,255,255,0.15);
    margin: 32px 0;
}

.member-bio p {
    margin: 0 0 1.25em;
    max-width: 68ch;
    color: rgba(255,255,255,0.88);
    font-size: 17px;
    line-height: 1.75;
    text-align: left;
    hyphens: manual;
}

.member-nav {
    margin-top: 56px;
    border-top: 1px solid rgba(255,255,255,0.15);
    padding-top: 24px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
}

.member-nav-prev,
.member-nav-next {
    flex: 1 1 0;
    min-width: 0;
}

.member-nav-prev {
    justify-content: flex-start;
}

.member-nav-next {
    justify-content: flex-end;
    text-align: right;
}

.member-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: rgba(255,255,255,0.8);
    font-size: 12px;
    font-weight: 500;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    text-decoration: none;
    transition: color 150ms ease;
}

.member-nav-link span {
    display: inline-block;
    transition: transform 150ms ease;
}

.member-nav-link:hover {
    color: #8DBF3F;
}

.member-nav-prev:hover span {
    transform: translateX(-4px);
}

.member-nav-next:hover span {
    transform: translateX(4px);
}

.member-nav-link:focus-visible {
    outline: 2px solid #8DBF3F;
    outline-offset: 3px;
}

/* ---------- BELOW 900PX: single column, portrait first ---------- */
@media (max-width: 900px) {
    .member-wrap {
        grid-template-columns: 1fr;
        gap: 32px;
        padding-top: 112px;
    }

    .member-photo {
        position: static;
        max-width: 480px;
    }

    .member-body h1 {
        font-size: 32px;
    }
}

/* ============ SERVICES — editorial dark list ============ */
.services-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
}

.services-hero {
    background: #06352F;
    padding-top: 144px;
    padding-bottom: 48px;
    text-align: center;
}

.services-heading {
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    text-transform: uppercase;
    font-size: clamp(56px, 11vw, 160px);
    line-height: 0.95;
    color: #F5F5EF;
    margin: 0;
}

.services-tagline {
    font-size: 17px;
    line-height: 1.6;
    color: rgba(245,245,239,0.75);
    max-width: 560px;
    margin: 20px auto 0;
}

.services-list {
    background: #06352F;
    padding-top: 0;
    padding-bottom: 96px;
}

.svc-stack {
    display: block;
    padding-bottom: 80px;
}

.svc-card {
    position: sticky;
    top: calc(var(--header-space) + 16px + var(--i) * 20px);
    z-index: calc(var(--i) + 1);
    transform-origin: top center;
    background: #0B3D2E;
    border: 1px solid rgba(245,245,239,0.28);
    box-shadow: 0 -12px 32px rgba(0,0,0,0.25);
    border-radius: 24px;
    padding: 40px;
    margin-bottom: 40px;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 48px;
    align-items: end;
    transition: border-color 200ms ease;
}

.svc-card:last-child {
    margin-bottom: 0;
}

.svc-card:hover {
    border-color: rgba(245,245,239,0.6);
}

.svc-label {
    font-size: 13px;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: rgba(245,245,239,0.8);
    margin: 0 0 20px;
}

.svc-title {
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    font-size: clamp(36px, 4.5vw, 64px);
    line-height: 1.0;
    color: #F5F5EF;
    margin: 0 0 24px;
}

.svc-desc {
    font-size: 16px;
    line-height: 1.65;
    color: rgba(245,245,239,0.85);
    max-width: 44ch;
    margin: 0;
}

.svc-tags {
    list-style: none;
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin: 28px 0 0;
    padding: 0;
}

.svc-tags li {
    border: 1px solid rgba(245,245,239,0.4);
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 14px;
    font-family: 'Lora', Georgia, serif;
    color: #F5F5EF;
}

.svc-num {
    font-family: 'Lora', Georgia, serif;
    font-size: 48px;
    color: #F5F5EF;
    text-align: right;
    margin: 0 0 24px;
}

.svc-photo {
    width: 100%;
    aspect-ratio: 16/10;
    object-fit: cover;
    border-radius: 16px;
    display: block;
}

.svc-cta {
    display: inline-block;
    margin-top: 28px;
    border: 1px solid #8DBF3F;
    color: #8DBF3F;
    border-radius: 8px;
    padding: 6px 14px;
    font-size: 14px;
    font-family: 'Lora', Georgia, serif;
    text-decoration: none;
    transition: background-color 200ms ease, color 200ms ease;
}

.svc-cta:hover {
    background: #8DBF3F;
    color: #06352F;
}

/* ---------- BELOW 900PX: single column, photo below text, no stacking ---------- */
@media (max-width: 900px) {
    .svc-card {
        position: static;
        animation: none;
        grid-template-columns: 1fr;
        gap: 32px;
        padding: 24px;
        margin-bottom: 20px;
    }
}

/* Short viewports (desktop): tighten padding so a pinned card never
   exceeds calc(100vh - var(--header-space) - 120px) */
@media (min-width: 901px) and (max-height: 760px) {
    .svc-card {
        padding: 28px;
        gap: 32px;
    }
    .svc-num {
        font-size: 36px;
        margin-bottom: 16px;
    }
}

/* Depth effect on covered cards (progressive enhancement: no support = plain stack) */
@supports (animation-timeline: view()) {
    .svc-card {
        animation: svc-cover linear both;
        animation-timeline: view();
        animation-range: exit-crossing 0% exit-crossing 100%;
    }
    @keyframes svc-cover {
        to {
            transform: scale(0.96);
            filter: brightness(0.85);
        }
    }
    /* Stacking is disabled below 900px and for reduced motion (see below):
       never scale/dim there either. */
    @media (max-width: 900px) {
        .svc-card {
            animation: none;
        }
    }
    @media (prefers-reduced-motion: reduce) {
        .svc-card {
            animation: none;
        }
    }
}

@media (prefers-reduced-motion: reduce) {
    .svc-card,
    .svc-cta {
        transition: none;
    }
    .svc-card {
        position: static;
        animation: none;
    }
}

/* ============ GALLERY (landing page mosaic + lightbox) ============ */
.gallery {
    background: #fff;
    padding: 96px 24px;
    scroll-margin-top: calc(var(--header-space) + 16px);
}

.gallery-inner {
    max-width: 1200px;
    margin: 0 auto;
}

.gallery-title {
    text-align: center;
    font-size: 32px;
    font-weight: 700;
    color: #222;
    margin: 0 0 40px;
}

.gal-grid {
    display: grid;
    grid-template-columns: 5fr 7fr;
    gap: 24px;
    align-items: start;
}

.gal-left,
.gal-right {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.gal-smalls {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px;
}

.gal-tile {
    position: relative;
    display: block;
    width: 100%;
    min-width: 0;
    padding: 0;
    border: 0;
    border-radius: 8px;
    overflow: hidden;
    background: #e8e8e8;
    cursor: pointer;
}

.gal-a { aspect-ratio: 4 / 5; }
.gal-small { aspect-ratio: 4 / 3; }
.gal-wide { aspect-ratio: 16 / 7; }

.gal-tile img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
    transition: transform 250ms ease;
}

.gal-pos-25 img { object-position: center 25%; }
.gal-pos-30 img { object-position: center 30%; }
.gal-pos-40 img { object-position: center 40%; }

.gal-tile::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(6, 53, 47, 0.25);
    opacity: 0;
    transition: opacity 250ms ease;
    pointer-events: none;
}

@media (hover: hover) {
    .gal-tile:hover img {
        transform: scale(1.04);
    }
    .gal-tile:hover::after {
        opacity: 1;
    }
}

.gal-tile:focus-visible {
    outline: 2px solid #8DBF3F;
    outline-offset: 3px;
}

.gal-tile:focus-visible::after {
    opacity: 1;
}

/* ---------- TABLET + MOBILE: flatten groups into one grid ---------- */
@media (max-width: 1023px) {
    .gal-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }
    .gal-left,
    .gal-right,
    .gal-smalls {
        display: contents;
    }
    .gal-tile {
        aspect-ratio: 4 / 3;
    }
}

@media (max-width: 639px) {
    .gallery {
        padding: 64px 24px;
    }
    .gal-grid {
        gap: 8px;
    }
    .gal-small {
        aspect-ratio: 1 / 1;
    }
    .gal-a,
    .gal-wide {
        grid-column: span 2;
    }
}

/* ---------- LIGHTBOX ---------- */
.gal-dialog {
    border: 0;
    padding: 0;
    background: transparent;
    width: 100vw;
    height: 100vh;
    max-width: 100vw;
    max-height: 100vh;
}

.gal-dialog::backdrop {
    background: rgba(0, 0, 0, 0.9);
}

.gal-dialog-inner {
    position: relative;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.gal-figure {
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 94vw;
}

.gal-view {
    max-width: 90vw;
    max-height: 78vh;
    object-fit: contain;
    display: block;
}

.gal-video {
    max-width: 90vw;
    max-height: 78vh;
}

.gal-view[hidden],
.gal-video[hidden] {
    display: none;
}

.gal-cap {
    color: #fff;
    font-size: 15px;
    line-height: 1.5;
    text-align: center;
    max-width: 640px;
    margin-top: 16px;
}

.gal-count {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.85);
    font-size: 14px;
    margin: 0;
}

.gal-btn {
    position: absolute;
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.4);
    background: rgba(255, 255, 255, 0.1);
    color: #fff;
    font-size: 18px;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 200ms ease;
    z-index: 2;
}

.gal-btn:hover {
    background: rgba(255, 255, 255, 0.28);
}

.gal-btn:focus-visible {
    outline: 2px solid #8DBF3F;
    outline-offset: 3px;
}

.gal-close { top: 20px; right: 20px; }
.gal-prev { left: 20px; top: 50%; transform: translateY(-50%); }
.gal-next { right: 20px; top: 50%; transform: translateY(-50%); }

body.gal-lock {
    overflow: hidden;
}

@media (prefers-reduced-motion: reduce) {
    .gal-tile img,
    .gal-tile::after,
    .gal-btn {
        transition: none;
    }
    .gal-tile:hover img {
        transform: none;
    }
}

/* ============ MOBILE DRAWER NAVIGATION (<=768px) ============
   The drawer + backdrop live as direct children of <body>,
   siblings of the header (never inside it: the header's
   backdrop-filter would trap a fixed panel inside its box).
   Desktop header is untouched: everything below only applies
   at max-width 768px. */
.menu-btn {
    display: none;
}

#mobile-menu,
.menu-backdrop {
    display: none;
}

body.menu-open {
    overflow: hidden;
}

@media (max-width: 768px) {
    /* Retire the old in-header dropdown panel entirely. */
    .glass-header .nav-links {
        display: none;
    }

    /* Hamburger opener (lives in the header pill). */
    .menu-btn {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        background: none;
        border: 0;
        cursor: pointer;
        color: var(--nav-text);
    }

    .menu-btn .fa-bars {
        font-size: 22px;
        line-height: 1;
    }

    .menu-btn:focus-visible {
        outline: 2px solid var(--nav-hover);
        outline-offset: 2px;
    }

    /* Backdrop scrim. */
    .menu-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        background: rgba(0, 0, 0, 0.55);
        z-index: 999;
        opacity: 0;
        visibility: hidden;
        transition: opacity 250ms ease, visibility 0s linear 250ms;
    }

    body.menu-open .menu-backdrop {
        opacity: 1;
        visibility: visible;
        transition: opacity 250ms ease;
    }

    /* Drawer panel: always dark, hardcoded (never inherits nav vars). */
    #mobile-menu {
        display: block;
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        width: min(88vw, 400px);
        height: 100vh;
        height: 100dvh;
        z-index: 1000;
        overflow-y: auto;
        background: #06352F;
        box-shadow: -16px 0 48px rgba(0, 0, 0, 0.35);
        transform: translateX(100%);
        visibility: hidden;
        transition: transform 300ms cubic-bezier(0.22, 0.8, 0.3, 1),
            visibility 0s linear 300ms;
    }

    body.menu-open #mobile-menu {
        transform: translateX(0);
        visibility: visible;
        transition: transform 300ms cubic-bezier(0.22, 0.8, 0.3, 1),
            visibility 0s;
    }

    .drawer-head {
        height: 76px;
        padding: 0 20px;
        background: #04281F;
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
    }

    .drawer-brand {
        display: inline-flex;
        align-items: center;
        gap: 10px;
        text-decoration: none;
    }

    .drawer-brand .logo-circle {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex-shrink: 0;
        width: 44px;
        height: 44px;
        border-radius: 50%;
        overflow: hidden;
        background: #ffffff;
        border: 1px solid rgba(255, 255, 255, 0.7);
        line-height: 0;
    }

    .drawer-brand .logo-circle img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        padding: 4px;
        display: block;
        background: #ffffff;
        border-radius: 50%;
        aspect-ratio: 1 / 1;
    }

    .drawer-wordmark {
        font-weight: 800;
        font-size: 20px;
        letter-spacing: 0.12em;
        white-space: nowrap;
        background: linear-gradient(90deg, #FF9F1C 0%, #7ED957 100%);
        -webkit-background-clip: text;
        background-clip: text;
        color: transparent;
    }

    .drawer-close {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0;
        background: none;
        border: 0;
        cursor: pointer;
        color: #ffffff;
        font-size: 28px;
        line-height: 1;
    }

    .drawer-close:focus-visible {
        outline: 2px solid #8DBF3F;
        outline-offset: 2px;
    }

    .drawer-links {
        list-style: none;
        margin: 0;
        padding: 16px 24px 32px;
    }

    .drawer-links li + li {
        border-top: 1px solid rgba(255, 255, 255, 0.1);
    }

    .drawer-link {
        display: block;
        padding: 16px 0 16px 12px;
        min-height: 48px;
        font-size: 16px;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.04em;
        color: #FFFFFF;
        text-decoration: none;
        opacity: 0;
        transform: translateY(8px);
    }

    body.menu-open .drawer-link {
        opacity: 1;
        transform: none;
        transition: opacity 250ms ease, transform 250ms ease, color 150ms ease;
        transition-delay: calc(var(--j, 0) * 40ms);
    }

    .drawer-link:hover,
    .drawer-link:active {
        color: #8DBF3F;
    }

    .drawer-link:focus-visible {
        outline: 2px solid #8DBF3F;
        outline-offset: 2px;
        color: #8DBF3F;
    }

    .drawer-link.current {
        color: #8DBF3F;
        box-shadow: inset 3px 0 0 #8DBF3F;
    }

    /* ACTIVITIES accordion group: label stays a link, chevron toggles. */
    .drawer-group-row {
        display: flex;
        align-items: stretch;
    }

    .drawer-group-row > .drawer-link {
        flex: 1;
        min-width: 0;
    }

    .drawer-toggle {
        flex: none;
        width: 44px;
        min-width: 44px;
        min-height: 48px;
        align-self: stretch;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        background: none;
        border: 0;
        padding: 0;
        color: #FFFFFF;
        cursor: pointer;
    }

    .drawer-toggle .fa {
        font-size: 14px;
        line-height: 1;
        transition: transform 200ms ease;
    }

    .drawer-group.open > .drawer-group-row > .drawer-toggle .fa {
        transform: rotate(180deg);
    }

    .drawer-toggle:focus-visible {
        outline: 2px solid #8DBF3F;
        outline-offset: -2px;
    }

    /* Sliding panel: pushes later links down; hidden = out of
       keyboard/screen-reader reach, not merely invisible. */
    .drawer-panel {
        display: grid;
        grid-template-rows: 0fr;
        visibility: hidden;
        transition: grid-template-rows 250ms ease, visibility 250ms;
    }

    .drawer-panel[hidden] {
        display: none;
    }

    .drawer-group.open > .drawer-panel {
        grid-template-rows: 1fr;
        visibility: visible;
    }

    .drawer-panel > ul {
        overflow: hidden;
        min-height: 0;
        margin: 0;
        padding: 6px;
        list-style: none;
        background: #04281F;
        border-radius: 12px;
    }

    .drawer-sub-link.drawer-link {
        margin: 0;
        padding: 14px 14px 14px 20px;
        border-left: 2px solid rgba(255, 255, 255, 0.2);
        min-height: 48px;
        font-size: 15px;
        font-weight: 500;
        text-transform: none;
        letter-spacing: 0.02em;
        color: rgba(255, 255, 255, 0.85);
    }

    .drawer-sub-link.drawer-link.current {
        color: #8DBF3F;
    }
}

@media (prefers-reduced-motion: reduce) {
    #mobile-menu,
    .menu-backdrop,
    .drawer-link,
    .drawer-panel,
    .drawer-toggle .fa {
        transition: none;
    }

    .drawer-link {
        opacity: 1;
        transform: none;
    }
}

/* ============ BLOG HERO — editorial left-aligned hero ============ */
.blog-hero-inner {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: left;
}

.blog-hero-title {
    margin: 0;
    font-weight: 600;
    font-size: clamp(40px, 6.5vw, 84px);
    line-height: 1.1;
    letter-spacing: -0.01em;
}

.blog-hl-green { color: #A8E07A; }
.blog-hl-orange { color: #FF9F1C; }
.blog-hl-white { color: #ffffff; }

.blog-hero-sub {
    margin: 20px 0 0;
    font-size: 18px;
    line-height: 1.6;
    color: rgba(255, 255, 255, 0.85);
    max-width: 56ch;
}

.blog-hero-rule {
    border: 0;
    border-top: 1px solid rgba(255, 255, 255, 0.6);
    width: min(800px, 100%);
    margin: 32px 0 0;
}

.blog-crumb-nav {
    margin-top: 20px;
}

.blog-crumb {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    font-size: 16px;
    font-weight: 500;
    color: #ffffff;
}

.blog-crumb a {
    color: #ffffff;
    text-decoration: none;
}

.blog-crumb a:hover {
    color: #A8E07A;
}

.blog-crumb a:focus-visible {
    outline: 2px solid #A8E07A;
    outline-offset: 3px;
}

/* ---------- BELOW 768PX ---------- */
@media (max-width: 768px) {
    .blog-header {
        min-height: 340px;
        padding-top: calc(var(--header-space) + 24px);
    }

    .blog-hero-sub {
        font-size: 16px;
    }
}

/* ============ ABOUT PAGE — hero, who, stats, mission, vision ============ */
.about-wrap {
    max-width: 1100px;
    margin: 0 auto;
}

/* ---------- HERO ---------- */
.about-hero {
    background: linear-gradient(90deg, rgba(6, 53, 47, 0.88), rgba(6, 53, 47, 0.55)),
        url("assets/about-hero-1400.webp") center/cover no-repeat;
    min-height: clamp(320px, 45vh, 440px);
    display: flex;
    align-items: center;
    padding-top: calc(var(--header-space) + 40px);
    padding-bottom: 56px;
}

.about-hero-inner {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    padding: 0 24px;
    text-align: left;
}

.about-hero-title {
    margin: 0;
    font-weight: 600;
    font-size: clamp(40px, 6vw, 72px);
    line-height: 1.1;
    color: #ffffff;
}

.about-crumb-nav {
    margin-top: 16px;
}

.about-crumb {
    list-style: none;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 0;
    padding: 0;
    font-size: 16px;
    color: #ffffff;
}

.about-crumb a {
    color: #ffffff;
    text-decoration: none;
}

.about-crumb a:hover {
    color: #8DBF3F;
}

.about-crumb a:focus-visible {
    outline: 2px solid #8DBF3F;
    outline-offset: 3px;
}

.about-crumb-sep {
    opacity: 0.6;
}

/* ---------- SHARED ---------- */
.about-eyebrow {
    font-size: 13px;
    letter-spacing: 0.1em;
    font-weight: 600;
    text-transform: uppercase;
    color: #E07B00;
    margin: 0 0 20px;
}

.about-eyebrow-lime {
    color: #8DBF3F;
}

.about-h2 {
    font-size: 32px;
    font-weight: 700;
    color: #3E4E48;
    margin: 0 0 20px;
}

.about-h2-light {
    color: #ffffff;
}

.about-body {
    font-size: 17px;
    line-height: 1.7;
    color: #3E4E48;
    margin: 0;
}

.about-body-light {
    color: rgba(255, 255, 255, 0.9);
}

.about-cols {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 56px;
    align-items: center;
}

.about-photo {
    min-width: 0;
}

.about-photo img {
    width: 100%;
    object-fit: cover;
    border-radius: 20px;
    display: block;
}

/* ---------- WHO WE ARE ---------- */
.about-who {
    background: #ffffff;
    padding: 96px 24px;
}

.about-who .about-wrap {
    max-width: 1200px;
}

.about-who-grid {
    display: grid;
    grid-template-columns: 7fr 5fr;
    gap: 56px;
    align-items: center;
}

.about-who-text {
    min-width: 0;
}

.about-who .about-eyebrow {
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.14em;
}

.about-who .about-eyebrow::before {
    content: "";
    display: block;
    width: 40px;
    height: 3px;
    background: #8DBF3F;
    margin-bottom: 16px;
}

.about-who .lead {
    font-family: 'Lora', Georgia, serif;
    font-weight: 400;
    font-size: clamp(24px, 2.4vw, 32px);
    line-height: 1.35;
    letter-spacing: -0.005em;
    text-align: left;
    color: #0B3D2E;
    margin: 0 0 24px;
}

.about-who .body {
    font-size: clamp(18px, 1.5vw, 20px);
    line-height: 1.75;
    color: #3E4E48;
    text-align: justify;
    text-align-last: left;
    hyphens: auto;
    -webkit-hyphens: auto;
    word-spacing: -0.02em;
    overflow-wrap: break-word;
    border-left: 3px solid #8DBF3F;
    padding-left: 24px;
    max-width: 62ch;
    margin: 0;
}

.hl-lime {
    background: linear-gradient(transparent 62%, rgba(141, 191, 63, 0.35) 62%);
}

.hl-strong {
    font-weight: 600;
    color: #0B3D2E;
}

.about-who-photo {
    min-width: 0;
}

.about-who-photo img {
    width: 100%;
    aspect-ratio: 4 / 5;
    max-height: 620px;
    object-fit: cover;
    object-position: center 20%;
    border-radius: 20px;
    display: block;
}

.about-mission .about-photo img {
    aspect-ratio: 4 / 5;
}

.about-vision .about-photo img {
    aspect-ratio: 1 / 1;
}

/* ---------- STATS BAND ---------- */
.about-stats {
    background: linear-gradient(rgba(6, 53, 47, 0.92), rgba(6, 53, 47, 0.92)),
        url("assets/about-stats-1400.webp") center/cover no-repeat;
    padding: 96px 24px;
}

.about-stats-grid {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

.about-stats-grid li {
    text-align: center;
    padding: 8px 32px;
    border-left: 1px solid rgba(255, 255, 255, 0.25);
}

.about-stats-grid li:first-child {
    border-left: 0;
}

.stat-num {
    display: block;
    font-size: 36px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.1;
}

.stat-label {
    display: block;
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    margin-top: 8px;
}

.stat-desc {
    display: block;
    font-size: 15px;
    color: rgba(255, 255, 255, 0.8);
    margin-top: 6px;
    line-height: 1.5;
}

/* ---------- MISSION ---------- */
.about-mission {
    background: #ffffff;
    padding: 96px 24px;
}

/* ---------- VISION ---------- */
.about-vision {
    background: #06352F;
    padding: 96px 24px;
}

.about-checks {
    list-style: none;
    margin: 32px 0 0;
    padding: 0;
    display: grid;
    gap: 20px;
}

.about-checks li {
    display: flex;
    align-items: flex-start;
    gap: 14px;
}

.check-dot {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: #8DBF3F;
    color: #06352F;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 14px;
}

.check-title {
    font-size: 17px;
    font-weight: 600;
    color: #ffffff;
    line-height: 1.5;
    padding-top: 2px;
}

.about-support {
    font-size: 15px;
    line-height: 1.7;
    color: rgba(255, 255, 255, 0.85);
    margin: 32px 0 0;
    max-width: 56ch;
}

/* ---------- BELOW 900PX: single column ---------- */
@media (max-width: 900px) {
    .about-who,
    .about-stats,
    .about-mission,
    .about-vision {
        padding: 64px 24px;
    }

    .about-who-grid,
    .about-cols {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .about-who-photo {
        order: -1;
    }

    .about-who .body {
        text-align: left;
        font-size: 17px;
    }

    .about-body {
        font-size: 16px;
    }

    .about-stats-grid {
        grid-template-columns: 1fr 1fr;
        gap: 40px 16px;
    }

    .about-stats-grid li {
        border-left: 0;
        padding: 0 8px;
    }
}

/* ============ UPCOMING VISIT BAND (blog page) ============ */
.visit-band{background:#06352F;color:#fff;padding:64px 24px;
  scroll-margin-top:calc(var(--header-space,96px) + 16px)}
.visit-inner{max-width:1200px;margin:0 auto;display:grid;
  grid-template-columns:1fr 1fr;gap:56px;align-items:center}
.visit-text,
.visit-flyer{min-width:0}
.visit-label{display:inline-block;font-size:12px;font-weight:600;
  letter-spacing:.12em;text-transform:uppercase;color:#8DBF3F;
  border:1px solid #8DBF3F;border-radius:999px;padding:6px 14px;
  margin-bottom:16px}
.visit-band h2{font-size:clamp(28px,3.5vw,44px);line-height:1.15;
  font-weight:600;color:#fff;margin:0 0 24px}
.visit-details{list-style:none;margin:0 0 24px;padding:0;
  display:grid;gap:12px;font-size:17px}
.visit-details li{display:flex;align-items:center;gap:12px}
.visit-details i{color:#8DBF3F;width:20px;text-align:center}
.visit-hosts{font-size:15px;line-height:1.6;color:rgba(255,255,255,.8);
  margin:0 0 12px;max-width:52ch}
.visit-btn{margin-top:12px;background:transparent;color:#8DBF3F;
  border:1px solid #8DBF3F;border-radius:999px;padding:12px 24px;
  font-family:inherit;font-size:14px;font-weight:600;line-height:1;letter-spacing:.06em;
  text-transform:uppercase;cursor:pointer;transition:background .2s,color .2s}
.visit-btn:hover,.visit-btn:focus-visible{background:#8DBF3F;color:#06352F}
.flyer-open{display:block;width:100%;padding:0;border:1px solid
  rgba(245,245,239,.25);border-radius:16px;overflow:hidden;
  background:none;cursor:zoom-in;
  box-shadow:0 16px 48px rgba(0,0,0,.35)}
.flyer-open img{display:block;width:100%;height:auto;max-width:100%}
.visit-band :focus-visible{outline:2px solid #8DBF3F;outline-offset:3px}
.visit-dialog .gal-view{max-width:92vw;max-height:88vh;object-fit:contain}
@media (max-width:900px){
  .visit-band{padding:48px 20px}
  .visit-inner{grid-template-columns:1fr;gap:32px}}
@media (prefers-reduced-motion:reduce){.visit-btn{transition:none}}

/* ============ STUDENT RESEARCH — featured video hero ============ */
.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
    border: 0;
}

.research-hero {
    background: #fff;
    padding: calc(var(--header-space, 96px) + 56px) 24px 96px;
}

.research-hero-inner {
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 64px;
    align-items: start;
}

.research-hero-inner.is-wide {
    grid-template-columns: 5fr 7fr;
}

.research-text {
    min-width: 0;
}

.research-tag {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: #4F7F1E;
    border: 1px solid rgba(79,127,30,0.4);
    border-radius: 999px;
    padding: 6px 14px;
    margin-bottom: 20px;
}

.research-title {
    margin: 0 0 20px;
    font-family: 'Lora', Georgia, serif;
    font-weight: 500;
    font-size: clamp(34px, 4vw, 56px);
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: #0B3D2E;
}

.research-accent {
    font-style: italic;
    color: #0B3D2E;
    background: linear-gradient(transparent 62%, rgba(141,191,63,0.35) 62%);
}

.research-summary {
    margin: 0 0 20px;
    max-width: 52ch;
    font-size: 17px;
    line-height: 1.7;
    color: #3E4E48;
}

.research-byline {
    margin: 0 0 28px;
    font-size: 14px;
    line-height: 1.6;
    color: #8A8A8A;
}

.research-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
}

.research-sound {
    background: #0B3D2E;
    color: #fff;
    border: 1px solid #0B3D2E;
    border-radius: 999px;
    padding: 14px 26px;
    min-height: 48px;
    font-family: inherit;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: 0.02em;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.research-sound:hover {
    background: #06352F;
}

.research-sound:focus-visible {
    outline: 2px solid #0B3D2E;
    outline-offset: 3px;
}

/* ---------- video card ---------- */
.research-media {
    min-width: 0;
    display: flex;
    justify-content: center;
    align-self: start;
    margin-top: 0;
}

.research-card {
    position: relative;
    width: 100%;
    max-width: 440px;
    border-radius: 24px;
    overflow: hidden;
    background: #06352F;
    box-shadow: 0 24px 64px rgba(6,53,47,0.25);
    isolation: isolate;
}

.research-card.is-portrait {
    aspect-ratio: 3 / 4;
}

.research-card.is-landscape {
    aspect-ratio: 16 / 9;
    max-width: 720px;
}

.research-poster,
.research-video,
.research-embed {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    display: block;
    border: 0;
}

.research-poster {
    object-fit: cover;
    z-index: 1;
}

.research-video {
    object-fit: contain;
    background: #06352F;
    z-index: 2;
}

.research-video[aria-hidden="true"] {
    pointer-events: none;
}

.research-card.is-playing .research-poster {
    display: none;
}

.research-shade {
    position: absolute;
    inset: 0;
    z-index: 3;
    pointer-events: none;
    background: linear-gradient(to top, rgba(0,0,0,0.65), transparent 30%);
}

.research-open {
    position: absolute;
    inset: 0;
    z-index: 5;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
}

.research-play {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 88px;
    height: 88px;
    border-radius: 50%;
    background: #F5F5EF;
    box-shadow: 0 12px 32px rgba(0,0,0,0.35);
}

.research-triangle {
    width: 0;
    height: 0;
    margin-left: 6px;
    border-top: 14px solid transparent;
    border-bottom: 14px solid transparent;
    border-left: 22px solid #06352F;
}

.research-open:focus-visible {
    outline: 3px solid #8DBF3F;
    outline-offset: -3px;
}

.research-hint {
    position: absolute;
    right: 14px;
    bottom: 14px;
    z-index: 6;
    background: rgba(0,0,0,0.65);
    color: #fff;
    border: 0;
    font-family: inherit;
    font-size: 12px;
    font-weight: 600;
    border-radius: 999px;
    padding: 8px 14px;
    cursor: pointer;
}

.research-hint:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.research-pause {
    position: absolute;
    left: 14px;
    bottom: 14px;
    z-index: 7;
    background: rgba(0,0,0,0.65);
    color: #fff;
    border: 1px solid rgba(255,255,255,0.4);
    border-radius: 999px;
    padding: 10px 18px;
    min-height: 44px;
    font-family: inherit;
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
}

.research-pause:focus-visible {
    outline: 2px solid #fff;
    outline-offset: 2px;
}

.research-card.is-playing .research-open {
    display: none;
}

.research-video::cue {
    color: #fff;
    background: rgba(0,0,0,0.7);
    font-size: 15px;
}

@media (max-width: 900px) {
    .research-hero {
        padding: calc(var(--header-space, 96px) + 24px) 24px 64px;
    }

    .research-hero-inner,
    .research-hero-inner.is-wide {
        grid-template-columns: 1fr;
        gap: 40px;
    }

    .research-media {
        order: -1;
        margin-top: 0;
    }

    .research-card.is-portrait {
        max-width: 420px;
    }

    .research-title {
        font-size: clamp(30px, 7vw, 44px);
    }
}

@media (prefers-reduced-motion: reduce) {
    .research-sound,
    .research-details {
        transition: none;
    }
}