/* ==========================================================================
   Maisha Mema Farm — main stylesheet
   Ported from the Next.js/Tailwind build. Organic Editorial aesthetic:
   warm earthy greens, terracotta/ochre accent, cream background, bold
   serif headlines, generous whitespace.
   ========================================================================== */

/* ---- Reset ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body, h1, h2, h3, h4, p, ul, blockquote, figure { margin: 0; }
ul { padding: 0; list-style: none; }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; background: none; border: none; cursor: pointer; padding: 0; color: inherit; }
input, textarea, select { font: inherit; }

/* ---- Design tokens ---- */
:root {
	--color-forest: #1b4332;
	--color-sage: #2d6a4f;
	--color-mint: #52b788;
	--color-green-light: #d8f3dc;
	--color-earth: #c4621d;
	--color-earth-dark: #a3521a;
	--color-sun: #f0a500;
	--color-cream: #f8f5ef;
	--color-parchment: #ede8df;
	--color-charcoal: #1c1c1c;
	--color-stone: #6b6560;
	--font-display: "Fraunces", serif;
	--font-sans: "DM Sans", sans-serif;
}

body {
	background-color: var(--color-cream);
	color: var(--color-charcoal);
	font-family: var(--font-sans);
	-webkit-font-smoothing: antialiased;
	line-height: 1.5;
}

h1, h2, h3, h4 { font-family: var(--font-display); }

::selection { background-color: var(--color-mint); color: var(--color-forest); }

/* ---- Keyframes (ported verbatim from globals.css) ---- */
@keyframes kenburns {
	0%   { transform: scale(1)    translate(0,    0); }
	50%  { transform: scale(1.08) translate(-1%,  0.5%); }
	100% { transform: scale(1.05) translate(1%,  -0.5%); }
}
@keyframes slideProgress {
	from { width: 0%; }
	to   { width: 100%; }
}
@keyframes fadeUp {
	from { opacity: 0; transform: translateY(14px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* ---- Layout helpers ---- */
.content-wrap { max-width: 72rem; margin-inline: auto; }
.section-pad { padding-inline: 2rem; }
.section { position: relative; }
.section--cream { background: var(--color-cream); }
.section--forest { background: var(--color-forest); }
.section--parchment { background: var(--color-parchment); }
.section--charcoal { background: var(--color-charcoal); }

.section-head { display: flex; flex-direction: column; gap: 1.5rem; margin-bottom: 3rem; }
.section-head__note { color: var(--color-stone); font-size: 1rem; max-width: 24rem; line-height: 1.6; }
.section-head__note--light { color: rgba(255,255,255,.6); }

.grid { display: grid; gap: 1rem; }
.grid--3 { grid-template-columns: repeat(1, 1fr); gap: 1.25rem; }
.grid--4 { grid-template-columns: repeat(1, 1fr); }

.prose { color: var(--color-charcoal); line-height: 1.7; max-width: 42rem; }

/* ---- Typography scale ---- */
.eyebrow {
	display: inline-block;
	font-size: .75rem;
	font-weight: 600;
	letter-spacing: .12em;
	text-transform: uppercase;
	margin-bottom: 1rem;
}
.eyebrow--earth { color: var(--color-earth); }
.eyebrow--mint { color: var(--color-mint); }
.eyebrow--mint-outline {
	color: var(--color-mint);
	background: rgba(82,183,136,.2);
	border: 1px solid rgba(82,183,136,.4);
	padding: .25rem .9rem;
	border-radius: 9999px;
	margin-bottom: 1.25rem;
}

.h1 { font-size: 2.5rem; font-weight: 800; line-height: 1.15; color: #fff; }
.h1 em { font-style: normal; }
.h2 { font-size: 2.25rem; font-weight: 700; line-height: 1.2; margin-bottom: 1.5rem; }
.h2 em { font-style: italic; }
.h3 { font-size: 1.5rem; font-weight: 700; }
.h3 em { font-style: italic; }

.body-text { color: #4a4a4a; font-size: 1rem; line-height: 1.7; margin-bottom: 1.25rem; max-width: 32rem; }
.lede { color: rgba(255,255,255,.75); font-size: 1.05rem; line-height: 1.6; max-width: 32rem; }

/* ---- Buttons ---- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: .5rem;
	font-weight: 600;
	font-size: .875rem;
	padding: .9rem 1.75rem;
	min-height: 44px;
	border-radius: 9999px;
	transition: background-color .2s ease, color .2s ease;
	white-space: nowrap;
}
.btn--earth { background: var(--color-earth); color: #fff; }
.btn--earth:hover { background: var(--color-earth-dark); }
.btn--forest { background: var(--color-forest); color: #fff; }
.btn--forest:hover { background: var(--color-sage); }
.btn--white { background: #fff; color: var(--color-earth); font-weight: 700; }
.btn--white:hover { background: var(--color-cream); }
.btn--ghost {
	background: rgba(255,255,255,.15);
	border: 1px solid rgba(255,255,255,.3);
	color: #fff;
	backdrop-filter: blur(4px);
}
.btn--ghost:hover { background: rgba(255,255,255,.25); }

/* ==========================================================================
   Site header
   ========================================================================== */
.site-header {
	position: fixed;
	inset-inline: 0;
	top: 0;
	z-index: 50;
	background: transparent;
	transition: background-color .3s ease, box-shadow .3s ease;
}
.site-header[data-scrolled="true"],
.site-header[data-menu-open="true"] {
	background: var(--color-forest);
	box-shadow: 0 4px 20px rgba(0,0,0,.2);
}
.site-header__inner {
	max-width: 80rem;
	margin-inline: auto;
	padding: 1rem 1.5rem;
	display: flex;
	align-items: center;
	justify-content: space-between;
}
.site-header__brand { display: flex; align-items: center; gap: .75rem; }
.site-header__logo {
	position: relative;
	width: 4rem;
	height: 4rem;
	border-radius: 9999px;
	overflow: hidden;
	flex-shrink: 0;
	box-shadow: 0 8px 20px rgba(0,0,0,.3);
	outline: 2px solid var(--color-mint);
	outline-offset: 2px;
}
.site-header__logo img { width: 100%; height: 100%; object-fit: cover; }
.site-header__brand-text { display: flex; flex-direction: column; line-height: 1.1; gap: .2rem; }
.site-header__brand-name {
	color: #fff;
	font-family: var(--font-display);
	font-weight: 900;
	font-size: 1.7rem;
	letter-spacing: -.01em;
	text-shadow: 0 2px 12px rgba(0,0,0,.5);
}
.site-header__brand-sub { color: var(--color-mint); font-size: .7rem; font-weight: 600; letter-spacing: .15em; text-transform: uppercase; }
.site-header__links { display: none; align-items: center; gap: 2rem; }
.site-header__links a { color: rgba(255,255,255,.8); font-size: .9rem; font-weight: 500; transition: color .2s ease; }
.site-header__links a:hover { color: #fff; }
.site-header__actions { display: flex; align-items: center; gap: 1rem; }
.site-header__cta { display: none; }
.site-header__burger { display: flex; flex-direction: column; gap: 6px; padding: .5rem; }
.site-header__burger span { display: block; width: 24px; height: 2px; background: #fff; transition: transform .3s ease, opacity .3s ease; }
.site-header__burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg) translate(6px, 6px); }
.site-header__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.site-header__burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg) translate(6px, -6px); }

.site-header__mobile { display: none; background: var(--color-forest); border-top: 1px solid rgba(255,255,255,.1); padding: 1rem 1.5rem 1.5rem; }
.site-header__mobile.is-open { display: block; }
.site-header__mobile ul { display: flex; flex-direction: column; gap: 1rem; }
.site-header__mobile a { color: rgba(255,255,255,.8); font-size: 1rem; font-weight: 500; display: block; padding: .25rem 0; }
.site-header__mobile-cta { padding-top: .5rem; }

/* ==========================================================================
   Hero
   ========================================================================== */
.hero {
	position: relative;
	min-height: 100vh;
	display: grid;
	grid-template-columns: 1fr;
	gap: .25rem;
	background: var(--color-forest);
}
.hero__main { position: relative; min-height: 60vh; overflow: hidden; }
.hero__slide {
	position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
	opacity: 0; transition: opacity 1s ease-in-out;
}
.hero__slide.is-active { opacity: 1; animation: kenburns 12s infinite alternate; }
.hero__overlay {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(to top, rgba(0,0,0,.8), rgba(0,0,0,.25) 55%, transparent);
}
.hero__dots { position: absolute; top: 1.5rem; right: 1.5rem; z-index: 2; display: flex; gap: .5rem; }
.hero__dot { width: 8px; height: 8px; border-radius: 9999px; background: rgba(255,255,255,.4); transition: all .3s ease; }
.hero__dot:hover { background: rgba(255,255,255,.7); }
.hero__dot.is-active { background: #fff; width: 24px; }
.hero__text { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; justify-content: flex-end; padding: 2rem; }
.hero__text .hero__title,
.hero__text .hero__lede,
.hero__text .eyebrow { max-width: 34rem; }
.hero__title {
	color: #fff; font-size: 2.5rem; font-weight: 700; line-height: 1.15; margin-bottom: 1.25rem;
	text-shadow: 0 4px 24px rgba(0,0,0,.4);
}
.hero__title em { font-style: normal; color: var(--color-sun); }
.hero__lede { color: rgba(255,255,255,.75); font-size: 1rem; margin-bottom: 2rem; line-height: 1.6; }
.hero__cta-row { display: flex; flex-wrap: wrap; gap: .75rem; }

.hero__panel { position: relative; overflow: hidden; min-height: 35vh; }
.hero__panel img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hero__panel-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.6), transparent); }
.hero__panel-text { position: absolute; bottom: 0; left: 0; padding: 1.25rem; }
.hero__panel-text .eyebrow { display: block; margin-bottom: .25rem; }
.hero__panel-text p { color: #fff; font-size: .9rem; font-weight: 500; line-height: 1.4; }
.hero__panel--irrigation { min-height: 25vh; }

.hero__panel--cta {
	background: var(--color-earth);
	padding: 1.5rem;
	display: flex; flex-direction: column; justify-content: space-between;
	min-height: 20vh;
}
.hero__panel-kicker { color: rgba(255,255,255,.6); font-size: .75rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; display: block; margin-bottom: .75rem; }
.hero__panel-heading { color: #fff; font-family: var(--font-display); font-size: 1.15rem; font-weight: 700; line-height: 1.35; }
.hero__panel-link { display: inline-flex; align-items: center; gap: .5rem; color: #fff; font-weight: 600; font-size: .875rem; margin-top: 1rem; }
.hero__panel-arrow { transition: transform .2s ease; }
.hero__panel-link:hover .hero__panel-arrow { transform: translateX(4px); }

.hero__tagline {
	background: var(--color-forest);
	padding: .75rem 2rem;
	display: flex; align-items: center; justify-content: space-between;
}
.hero__tagline span:first-child { color: var(--color-mint); font-size: .75rem; font-weight: 500; letter-spacing: .05em; }
.hero__tagline-scroll { display: none; color: rgba(255,255,255,.4); font-size: .75rem; }

/* ==========================================================================
   Cards
   ========================================================================== */
.card {
	background: #fff;
	border: 1px solid var(--color-parchment);
	border-radius: 1rem;
	padding: 1.5rem;
	transition: box-shadow .2s ease, transform .2s ease;
}
.card:hover { box-shadow: 0 10px 30px rgba(0,0,0,.08); transform: translateY(-2px); }
.card__icon { font-size: 1.875rem; display: block; margin-bottom: .75rem; }
.card__icon--lg { font-size: 2.25rem; margin-bottom: 1rem; }
.card__title { color: var(--color-forest); font-weight: 700; font-size: 1.125rem; margin-bottom: .5rem; }
.card__desc { color: var(--color-stone); font-size: .875rem; line-height: 1.6; }
.card--ghost { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.1); }
.card--ghost:hover { background: rgba(255,255,255,.1); }
.card--ghost .card__desc--light { color: rgba(255,255,255,.55); }
.card--white-shadow { border-radius: 1rem; }
.card--white-shadow:hover { box-shadow: 0 16px 36px rgba(0,0,0,.12); transform: translateY(-4px); }

/* ==========================================================================
   Split (story / media) layouts
   ========================================================================== */
.split { display: grid; grid-template-columns: 1fr; min-height: 50vh; }
.split__text { display: flex; flex-direction: column; justify-content: center; padding: 3.5rem 2rem; }
.split__text--forest { background: var(--color-forest); }
.split__media { position: relative; min-height: 50vh; overflow: hidden; }
.split__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.split__media--plain { min-height: 400px; }
.split__media-stat {
	position: absolute; bottom: 2rem; left: 2rem;
	background: var(--color-forest); color: #fff;
	padding: 1rem 1.5rem; border-radius: .75rem;
}
.split__media-stat-value { font-family: var(--font-display); font-size: 1.875rem; font-weight: 700; }
.split__media-stat-label { color: var(--color-mint); font-size: .875rem; }

.mission-vision { display: grid; grid-template-columns: 1fr; gap: .25rem; }
.mission-vision__panel { padding: 3.5rem 2.5rem; }
.mission-vision__panel--forest { background: var(--color-forest); }
.mission-vision__panel--forest p { color: #fff; font-size: 1.25rem; font-weight: 500; line-height: 1.6; font-family: var(--font-display); }
.mission-vision__panel--parchment { background: var(--color-parchment); }
.mission-vision__panel--parchment p { color: var(--color-forest); font-size: 1.25rem; font-weight: 500; line-height: 1.6; font-family: var(--font-display); }

/* ==========================================================================
   Pillar cards (What We Do)
   ========================================================================== */
.pillar-card { position: relative; overflow: hidden; border-radius: 1rem; background: var(--color-sage); transition: background-color .3s ease; }
.pillar-card:hover { background: rgba(45,106,79,.8); }
.pillar-card__media { position: relative; height: 12rem; overflow: hidden; }
.pillar-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.pillar-card:hover .pillar-card__media img { transform: scale(1.05); }
.pillar-card__media-fade { position: absolute; inset: 0; background: linear-gradient(to top, var(--color-sage), transparent); }
.pillar-card__icon { position: absolute; top: 1rem; left: 1rem; font-size: 1.5rem; }
.pillar-card__body { padding: 1.25rem; }
.pillar-card__body h3 { color: #fff; font-weight: 700; font-size: 1rem; margin-bottom: .5rem; }
.pillar-card__body p { color: rgba(255,255,255,.6); font-size: .875rem; line-height: 1.6; }

/* ==========================================================================
   Full-bleed hero (Model Farm / Climate)
   ========================================================================== */
.full-bleed-hero { position: relative; height: 60vh; overflow: hidden; }
.full-bleed-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.full-bleed-hero__overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(27,67,50,.9), rgba(27,67,50,.5) 60%, transparent); }
.full-bleed-hero__overlay--charcoal { background: linear-gradient(to bottom, rgba(28,28,28,.6), var(--color-charcoal)); }
.full-bleed-hero__text { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 2rem; max-width: 44rem; }
.full-bleed-hero--centered { height: 55vh; }
.full-bleed-hero__text--centered { align-items: center; text-align: center; max-width: none; }
.full-bleed-hero__text--centered .h1 { max-width: 48rem; }

/* ==========================================================================
   Journey steps (Model Farm)
   ========================================================================== */
.journey-steps { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; }
.journey-step { position: relative; text-align: center; }
.journey-step__number {
	width: 4rem; height: 4rem; border-radius: 9999px;
	background: var(--color-forest); color: #fff;
	display: flex; align-items: center; justify-content: center;
	margin: 0 auto 1rem; font-family: var(--font-display); font-weight: 700; font-size: 1.125rem;
}
.journey-step__label { color: var(--color-forest); font-weight: 700; font-size: 1.25rem; margin-bottom: .5rem; }
.journey-step__desc { color: var(--color-stone); font-size: .875rem; line-height: 1.6; }

.check-list { display: flex; flex-direction: column; gap: 1rem; }
.check-list li { display: flex; align-items: flex-start; gap: .75rem; }
.check-list__bullet {
	flex-shrink: 0; width: 1.25rem; height: 1.25rem; border-radius: 9999px;
	background: var(--color-mint); display: flex; align-items: center; justify-content: center;
	margin-top: .1rem;
}
.check-list li span:last-child { color: rgba(255,255,255,.8); font-size: 1rem; }

/* ==========================================================================
   Climate quote banner
   ========================================================================== */
.quote-banner { background: var(--color-earth); padding: 3rem 2rem; text-align: center; }
.quote-banner p { color: #fff; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; max-width: 48rem; margin: 0 auto; line-height: 1.4; }
.quote-banner span { color: rgba(255,255,255,.7); font-size: .875rem; margin-top: 1rem; display: block; }

/* ==========================================================================
   Family Wellbeing
   ========================================================================== */
.wellbeing-grid { display: grid; grid-template-columns: 1fr; gap: .25rem; padding-inline: 2rem; padding-bottom: .25rem; }
.wellbeing-grid__hero { position: relative; height: 350px; border-radius: 1rem; overflow: hidden; }
.wellbeing-grid__hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wellbeing-grid__hero-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,.5), transparent); }
.wellbeing-grid__hero blockquote { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem; }
.wellbeing-grid__hero blockquote p { color: #fff; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; line-height: 1.4; }
.wellbeing-grid__panel { background: var(--color-forest); border-radius: 1rem; padding: 2rem; display: flex; flex-direction: column; justify-content: center; }
.wellbeing-grid__panel h3 { color: #fff; font-weight: 700; font-size: 1.25rem; margin-bottom: 1.5rem; }
.wellbeing-grid__panel ul { display: flex; flex-direction: column; gap: 1rem; }
.wellbeing-grid__panel li { display: flex; align-items: center; gap: .75rem; color: rgba(255,255,255,.8); font-size: .875rem; }
.wellbeing-grid__icon { font-size: 1.25rem; }

.wellbeing-strip { position: relative; height: 10rem; border-radius: 1rem; overflow: hidden; padding-inline: 2rem; margin-inline: -2rem; }
.wellbeing-strip img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.wellbeing-strip__overlay { position: absolute; inset: 0; background: rgba(27,67,50,.6); display: flex; align-items: center; justify-content: center; }
.wellbeing-strip__overlay p { color: #fff; text-align: center; font-family: var(--font-display); font-size: 1.125rem; font-weight: 700; padding: 0 1rem; }

/* ==========================================================================
   Programme cards (Learning Centre)
   ========================================================================== */
.program-card { background: rgba(255,255,255,.08); border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; padding: 1.5rem; transition: background-color .2s ease; }
.program-card:hover { background: rgba(255,255,255,.15); }
.program-card__top { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 1rem; }
.program-card__icon { font-size: 1.875rem; }
.program-card__duration { background: rgba(196,98,29,.2); color: var(--color-sun); font-size: .75rem; font-weight: 600; padding: .25rem .75rem; border-radius: 9999px; }
.program-card h4 { color: #fff; font-weight: 700; font-size: 1rem; margin-bottom: .5rem; }
.program-card p { color: rgba(255,255,255,.55); font-size: .875rem; line-height: 1.6; }

/* ==========================================================================
   Value Addition
   ========================================================================== */
.value-journey { display: flex; flex-direction: column; gap: 1rem; }
.value-journey__step { flex: 1; position: relative; }

.showcase-grid { display: grid; grid-template-columns: 1fr; gap: .25rem; }
.showcase-grid__image { position: relative; height: 16rem; border-radius: 1rem; overflow: hidden; }
.showcase-grid__image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.showcase-grid__image-overlay { position: absolute; inset: 0; background: linear-gradient(to right, rgba(27,67,50,.6), transparent); display: flex; align-items: flex-end; padding: 2rem; }
.showcase-grid__kicker { color: rgba(255,255,255,.7); font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; }
.showcase-grid__heading { color: #fff; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; }
.showcase-grid__panel {
	position: relative; height: 16rem; border-radius: 1rem; overflow: hidden;
	background: var(--color-earth); padding: 2rem; display: flex; flex-direction: column; justify-content: space-between;
}
.showcase-grid__quote { color: #fff; font-family: var(--font-display); font-size: 1.5rem; font-weight: 700; line-height: 1.4; margin-bottom: 1rem; }
.showcase-grid__rule { width: 2.5rem; height: 4px; background: rgba(255,255,255,.4); border-radius: 4px; }

/* ==========================================================================
   Impact Dashboard
   ========================================================================== */
.stats-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; }
.stat-card { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: 1rem; padding: 1.75rem; text-align: center; transition: background-color .2s ease; }
.stat-card:hover { background: rgba(255,255,255,.08); }
.stat-card__icon { font-size: 1.875rem; display: block; margin-bottom: 1rem; }
.stat-card__value { color: #fff; font-family: var(--font-display); font-size: 2.5rem; font-weight: 700; margin-bottom: .5rem; }
.stat-card__label { color: rgba(255,255,255,.5); font-size: .875rem; font-weight: 500; }
.stats-note { color: rgba(255,255,255,.3); font-size: .75rem; text-align: center; margin-top: 2.5rem; }

/* ==========================================================================
   Partner With Us
   ========================================================================== */
.cta-banner { background: var(--color-earth); border-radius: 1.5rem; padding: 3rem 2.5rem; text-align: center; }
.cta-banner h3 { color: #fff; font-size: 1.875rem; font-weight: 700; margin-bottom: 1rem; }
.cta-banner p { color: rgba(255,255,255,.7); font-size: 1rem; margin-bottom: 2rem; max-width: 28rem; margin-inline: auto; }

/* ==========================================================================
   Contact
   ========================================================================== */
.contact-grid { display: grid; grid-template-columns: 1fr; gap: 3rem; }
.info-card { background: #fff; border: 1px solid var(--color-parchment); border-radius: 1rem; padding: 1.5rem; margin-bottom: 1.25rem; }
.info-card h3 { color: var(--color-forest); font-weight: 700; font-size: 1rem; margin-bottom: .75rem; display: flex; align-items: center; gap: .5rem; }
.info-card p { color: #4a4a4a; font-size: .875rem; line-height: 1.6; }
.info-card--forest { background: var(--color-forest); border: none; }
.info-card--forest h3 { color: #fff; }
.info-card--forest ul { display: flex; flex-direction: column; gap: .5rem; color: rgba(255,255,255,.7); font-size: .875rem; }
.social-link { display: inline-flex; align-items: center; gap: .5rem; color: var(--color-sage); font-weight: 500; font-size: .875rem; transition: color .2s ease; }
.social-link:hover { color: var(--color-forest); }

.contact-form-wrap { background: #fff; border: 1px solid var(--color-parchment); border-radius: 1.5rem; padding: 2rem; }
.contact-form { display: flex; flex-direction: column; gap: 1.25rem; }
.contact-form h3 { color: var(--color-forest); font-size: 1.5rem; font-weight: 700; margin-bottom: .5rem; }
.contact-form label { display: flex; flex-direction: column; gap: .5rem; }
.contact-form label span { color: #4a4a4a; font-size: .75rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; }
.contact-form input,
.contact-form select,
.contact-form textarea {
	border: 1px solid var(--color-parchment); border-radius: .75rem; padding: .75rem 1rem;
	font-size: .875rem; color: var(--color-charcoal); background: #fff; width: 100%;
	transition: border-color .15s ease, box-shadow .15s ease;
}
.contact-form input::placeholder, .contact-form textarea::placeholder { color: #b0aba5; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus {
	outline: none; border-color: var(--color-mint); box-shadow: 0 0 0 3px rgba(82,183,136,.2);
}
.contact-form textarea { resize: none; }
.contact-form__error { color: #b3261e; font-size: .8rem; }
.contact-form-success { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 3rem 0; }
.contact-form-success span { font-size: 3.5rem; display: block; margin-bottom: 1.25rem; }
.contact-form-success h3 { color: var(--color-forest); font-size: 1.5rem; font-weight: 700; margin-bottom: .75rem; }
.contact-form-success p { color: var(--color-stone); font-size: .875rem; }

/* ==========================================================================
   Footer
   ========================================================================== */
.site-footer { background: var(--color-forest); }
.site-footer__ticker { background: var(--color-sage); padding: 1rem 0; overflow: hidden; }
.site-footer__ticker-track { display: flex; gap: 4rem; white-space: nowrap; width: max-content; }
.site-footer__ticker-track span { color: rgba(255,255,255,.6); font-size: .875rem; font-weight: 500; flex-shrink: 0; }
.site-footer__main { padding: 4rem 2rem; }
.site-footer__grid { display: grid; grid-template-columns: 1fr; gap: 2.5rem; margin-bottom: 3.5rem; }
.site-footer__logo-row { display: flex; align-items: center; gap: .75rem; margin-bottom: 1.25rem; }
.site-footer__logo { position: relative; width: 3.5rem; height: 3.5rem; border-radius: 9999px; overflow: hidden; background: #fff; flex-shrink: 0; }
.site-footer__logo img { width: 100%; height: 100%; object-fit: cover; }
.site-footer__brand-name { display: block; color: #fff; font-family: var(--font-display); font-weight: 700; font-size: 1.25rem; letter-spacing: -.01em; }
.site-footer__brand-sub { display: block; color: var(--color-mint); font-size: .75rem; font-weight: 500; letter-spacing: .12em; text-transform: uppercase; margin-top: .25rem; }
.site-footer__desc { color: rgba(255,255,255,.5); font-size: .875rem; line-height: 1.6; margin-bottom: 1.5rem; max-width: 20rem; }
.site-footer__fb-btn { display: inline-flex; align-items: center; gap: .5rem; background: rgba(255,255,255,.1); color: #fff; font-size: .75rem; font-weight: 600; padding: .6rem 1rem; border-radius: 9999px; transition: background-color .2s ease; }
.site-footer__fb-btn:hover { background: rgba(255,255,255,.2); }
.site-footer__col h4 { color: #fff; font-weight: 600; font-size: .75rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: 1rem; }
.site-footer__col ul { display: flex; flex-direction: column; gap: .75rem; }
.site-footer__col a { color: rgba(255,255,255,.5); font-size: .875rem; transition: color .2s ease; }
.site-footer__col a:hover { color: #fff; }
.site-footer__bottom { border-top: 1px solid rgba(255,255,255,.1); padding-top: 2rem; display: flex; flex-direction: column; align-items: center; gap: 1rem; text-align: center; }
.site-footer__bottom p:first-child { color: rgba(255,255,255,.3); font-size: .75rem; }
.site-footer__bottom p:last-child { color: rgba(255,255,255,.2); font-size: .75rem; }

/* ==========================================================================
   Responsive — Tailwind's md (768px) / lg (1024px) equivalents
   ========================================================================== */
@media (min-width: 640px) {
	.grid--3 { grid-template-columns: repeat(2, 1fr); }
	.stats-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (min-width: 768px) {
	.section-pad { padding-inline: 4rem; }
	.site-header__links, .site-header__cta { display: flex; }
	.site-header__burger, .site-header__mobile { display: none; }
	.hero { grid-template-columns: repeat(3, 1fr); grid-template-rows: 55vh 25vh 20vh; }
	.hero__main { grid-column: span 2; grid-row: span 3; min-height: 0; }
	.hero__text { padding: 3.5rem; }
	.hero__title { font-size: 3.75rem; }
	.hero__panel { min-height: 0; }
	.hero__panel--irrigation { min-height: 0; }
	.hero__panel--cta { min-height: 0; padding: 1.75rem; }
	.hero__tagline { grid-column: span 3; }
	.hero__tagline-scroll { display: block; }
	.split--story, .split { grid-template-columns: 1fr; }
	.mission-vision { grid-template-columns: repeat(2, 1fr); }
	.grid--4 { grid-template-columns: repeat(2, 1fr); }
	.wellbeing-grid { grid-template-columns: 1fr; }
	.wellbeing-strip { margin-inline: 0; }
	.value-journey { flex-direction: row; }
	.contact-grid { gap: 3rem; }
	.section-head { flex-direction: row; align-items: flex-end; justify-content: space-between; }
	.journey-steps { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1024px) {
	.split, .split--story { grid-template-columns: repeat(2, 1fr); }
	.split__media, .split__media--plain { min-height: 0; }
	.grid--3 { grid-template-columns: repeat(3, 1fr); }
	.grid--4 { grid-template-columns: repeat(4, 1fr); }
	.wellbeing-grid { grid-template-columns: repeat(3, 1fr); }
	.wellbeing-grid__hero { grid-column: span 2; height: 450px; }
	.contact-grid { grid-template-columns: repeat(2, 1fr); }
	.showcase-grid { grid-template-columns: repeat(3, 1fr); }
	.showcase-grid__image { grid-column: span 2; }
}

@media (min-width: 1280px) {
	.site-footer__grid { grid-template-columns: 2fr repeat(4, 1fr); }
}