/* =========================================================================
   Mulilo Theme — Design System
   All colours, spacing and type live as CSS custom properties below.
   Change a value once here and it updates everywhere.
   ========================================================================= */

:root {
	/* ---- Brand colours (extracted exactly from the live mulilo.com CSS) ---- */
	--color-primary:        #235b4c;   /* core brand teal-green */
	--color-primary-dark:   #1a463a;   /* hover / darker teal */
	--color-primary-light:  #e7eeec;   /* soft brand wash */
	--color-secondary:      #15312a;   /* deep teal for dark sections */
	--color-accent:         #c8d4d2;   /* muted grey-green accent */

	/* ---- Neutrals (matched to the live site) ---- */
	--color-ink:            #171717;   /* main text / headings */
	--color-body:           #3f4a47;   /* secondary text */
	--color-muted:          #7b8784;   /* captions */
	--color-line:           #dee2e6;   /* borders */
	--color-bg:             #fcfcfc;   /* warm off-white background */
	--color-bg-alt:         #f3f6f5;   /* alternating section bg */
	--color-white:          #ffffff;

	/* ---- Typography (Karla, as used across the live site) ---- */
	--font-heading: 'Karla', system-ui, -apple-system, sans-serif;
	--font-body:    'Karla', system-ui, -apple-system, sans-serif;

	--fs-xs:   0.8125rem;
	--fs-sm:   0.9375rem;
	--fs-base: 1rem;
	--fs-md:   1.125rem;
	--fs-lg:   1.375rem;
	--fs-xl:   1.875rem;
	--fs-2xl:  2.5rem;
	--fs-3xl:  3.25rem;
	--fs-hero: clamp(2.5rem, 5vw + 1rem, 4.5rem);

	/* ---- Spacing ---- */
	--space-1: 0.5rem;
	--space-2: 1rem;
	--space-3: 1.5rem;
	--space-4: 2rem;
	--space-5: 3rem;
	--space-6: 4rem;
	--space-7: 6rem;

	/* ---- Layout ---- */
	--container:    1200px;
	--container-sm: 820px;
	--radius:       14px;
	--radius-sm:    8px;
	--radius-pill:  999px;

	--shadow-sm: 0 2px 8px rgba(14, 42, 32, 0.06);
	--shadow:    0 12px 32px rgba(14, 42, 32, 0.10);
	--shadow-lg: 0 24px 60px rgba(14, 42, 32, 0.16);

	--transition: 0.25s ease;
}

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

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	font-family: var(--font-body);
	font-size: var(--fs-base);
	line-height: 1.65;
	color: var(--color-body);
	background: var(--color-bg);
	-webkit-font-smoothing: antialiased;
}

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

a { color: var(--color-primary); text-decoration: none; transition: color var(--transition); }
a:hover { color: var(--color-primary-dark); }

h1, h2, h3, h4, h5, h6 {
	font-family: var(--font-heading);
	color: var(--color-ink);
	line-height: 1.15;
	margin: 0 0 var(--space-2);
	font-weight: 700;
}
h1 { font-size: var(--fs-3xl); }
h2 { font-size: var(--fs-2xl); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

p { margin: 0 0 var(--space-2); }

ul, ol { margin: 0 0 var(--space-2); padding-left: 1.25rem; }

/* -------------------------------------------------------------------------
   Accessibility helpers
   ---------------------------------------------------------------------- */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0,0,0,0);
	white-space: nowrap; border: 0;
}
.skip-link {
	position: absolute; left: -9999px; top: 0;
	background: var(--color-secondary); color: #fff;
	padding: var(--space-1) var(--space-2); z-index: 1000;
}
.skip-link:focus { left: var(--space-2); top: var(--space-2); }

:focus-visible { outline: 3px solid var(--color-accent); outline-offset: 2px; }

/* -------------------------------------------------------------------------
   Layout helpers
   ---------------------------------------------------------------------- */
.container {
	width: 100%;
	max-width: var(--container);
	margin-inline: auto;
	padding-inline: var(--space-3);
}
.container--narrow { max-width: var(--container-sm); }

.section { padding-block: var(--space-7); }
.section--alt { background: var(--color-bg-alt); }
.section--dark { background: var(--color-secondary); color: #cfe0d8; }
.section--dark h2, .section--dark h3 { color: #fff; }

.section__head { max-width: 720px; margin-bottom: var(--space-5); }
.section__head--center { margin-inline: auto; text-align: center; }

.eyebrow {
	display: inline-block;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-sm);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--color-primary);
	margin-bottom: var(--space-1);
}
.section--dark .eyebrow { color: var(--color-accent); }

.lead { font-size: var(--fs-md); color: var(--color-body); }

/* -------------------------------------------------------------------------
   Buttons
   ---------------------------------------------------------------------- */
.btn {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	font-family: var(--font-heading);
	font-weight: 600;
	font-size: var(--fs-sm);
	padding: 0.85rem 1.6rem;
	border-radius: var(--radius-pill);
	border: 2px solid transparent;
	cursor: pointer;
	transition: all var(--transition);
	line-height: 1;
}
.btn--primary { background: var(--color-primary); color: #fff; }
.btn--primary:hover { background: var(--color-primary-dark); color: #fff; transform: translateY(-2px); }
.btn--accent { background: var(--color-accent); color: var(--color-secondary); }
.btn--accent:hover { background: #b3c2bf; color: var(--color-secondary); transform: translateY(-2px); }
.btn--outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--outline:hover { background: var(--color-primary); color: #fff; }
.btn--ghost-light { background: transparent; color: #fff; border-color: rgba(255,255,255,0.6); }
.btn--ghost-light:hover { background: #fff; color: var(--color-secondary); }

/* -------------------------------------------------------------------------
   Header
   ---------------------------------------------------------------------- */
.site-header {
	position: sticky; top: 0; z-index: 100;
	background: rgba(255,255,255,0.96);
	backdrop-filter: blur(8px);
	border-bottom: 1px solid var(--color-line);
}
.site-header__inner {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	min-height: 96px;
}
.site-nav--left  { flex: 1; display: flex; justify-content: flex-start; }
.site-nav--right { flex: 1; display: flex; justify-content: flex-end; }
.site-branding { flex-shrink: 0; padding-inline: var(--space-3); }
.site-branding img,
.site-logo-mark img { height: 64px; width: auto; display: block; }

.primary-menu {
	display: flex;
	gap: clamp(1rem, 2.2vw, 2.4rem);
	list-style: none;
	margin: 0; padding: 0;
	align-items: center;
}
.primary-menu a {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 0.8rem;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--color-ink);
	padding: 0.4rem 0;
	position: relative;
}
.primary-menu a::after {
	content: ''; position: absolute; left: 0; bottom: -3px;
	width: 0; height: 2px; background: var(--color-primary);
	transition: width var(--transition);
}
.primary-menu a:hover::after,
.primary-menu .current-menu-item > a::after { width: 100%; }

/* Mobile nav (hidden on desktop) */
.mobile-nav { display: none; }

/* Sub-menus */
.primary-menu .sub-menu {
	position: absolute;
	background: #fff;
	box-shadow: var(--shadow);
	border-radius: var(--radius-sm);
	padding: var(--space-1);
	min-width: 200px;
	list-style: none;
	margin: 0;
	display: none;
}
.primary-menu li { position: relative; }
.primary-menu li:hover > .sub-menu { display: block; }
.primary-menu .sub-menu a { padding: 0.5rem var(--space-2); display: block; }

.site-header__actions { flex-shrink: 0; }

.nav-toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 44px; height: 44px;
	background: transparent;
	border: 0;
	cursor: pointer;
	padding: 0;
}
.nav-toggle__bar {
	display: block; width: 26px; height: 2px;
	background: var(--color-ink);
	transition: transform var(--transition), opacity var(--transition);
}
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* -------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------- */
.hero {
	position: relative;
	background: var(--color-bg);
	color: var(--color-ink);
	overflow: hidden;
}
.hero__inner {
	position: relative; z-index: 2;
	padding-block: clamp(var(--space-6), 11vw, 8.5rem);
	max-width: 1000px;
}
.hero__title {
	font-size: clamp(2.75rem, 6vw + 1rem, 6rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.02;
	color: var(--color-ink);
	margin-bottom: var(--space-4);
	max-width: 14ch;
}
.hero__text { font-size: var(--fs-lg); color: var(--color-body); margin-bottom: var(--space-4); max-width: 620px; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; }

/* Full-screen background-video hero (matches the live site). */
.hero--video {
	min-height: clamp(580px, 88vh, 920px);
	display: grid;
	align-items: center;
	color: #fff;
	background: var(--color-secondary);
}
.hero__video {
	position: absolute; inset: 0;
	width: 100%; height: 100%;
	object-fit: cover;
	z-index: 0;
}
.hero__overlay {
	position: absolute; inset: 0; z-index: 1;
	background: linear-gradient(180deg, rgba(11,26,20,0.40) 0%, rgba(11,26,20,0.20) 45%, rgba(11,26,20,0.60) 100%);
}
.hero--video .hero__inner { position: relative; z-index: 2; }
.hero--video .hero__title { color: #fff; }
.hero--video .hero__text { color: rgba(255,255,255,0.92); }
.hero--video .text-link { color: #fff; }
.hero--video .text-link:hover { color: var(--color-accent); }

/* Centered hero (matches live homepage) */
.hero__inner--center { margin-inline: auto; text-align: center; max-width: 940px; }
.hero__inner--center .hero__title { max-width: none; margin-inline: auto; }
.hero__inner--center .hero__text { margin-inline: auto; max-width: 760px; }
.hero__inner--center .hero__actions { justify-content: center; }
.hero__cta {
	display: inline-flex; align-items: center; gap: 0.45rem;
	font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-sm);
	letter-spacing: 0.04em;
	color: #fff; border-bottom: 2px solid rgba(255,255,255,0.85);
	padding-bottom: 4px; transition: color var(--transition), border-color var(--transition);
}
.hero__cta:hover { color: var(--color-accent); border-color: var(--color-accent); }
.hero__cta .arrow-link__icon { width: 1.05em; height: 1.05em; }

/* -------------------------------------------------------------------------
   Editorial sections (panels, big headings, arrow links)
   ---------------------------------------------------------------------- */
/* Soft grey-green panel, the signature Mulilo section background. */
.section--panel { background: var(--color-accent); }
.section--panel .eyebrow { color: var(--color-ink); }

/* Larger, tighter editorial headings inside content sections. */
.section__title {
	font-size: clamp(2.25rem, 4vw + 0.5rem, 3.75rem);
	font-weight: 800;
	letter-spacing: -0.015em;
	line-height: 1.05;
	max-width: 16ch;
}

/* Two-column editorial split: heading/body left, links right. */
.editorial {
	display: grid;
	grid-template-columns: 1.1fr 0.9fr;
	gap: var(--space-6);
	align-items: start;
}
.editorial__body { max-width: 46ch; margin-top: var(--space-3); color: var(--color-body); font-size: var(--fs-md); }

/* Arrow-link rows (Our Projects ->, Our Team ->). */
.arrow-links { display: flex; flex-direction: column; }
.arrow-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	padding: var(--space-3) 0;
	border-top: 1px solid rgba(20,32,27,0.25);
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: clamp(1.25rem, 1.6vw + 0.6rem, 1.875rem);
	color: var(--color-ink);
}
.arrow-link:last-child { border-bottom: 1px solid rgba(20,32,27,0.25); }
.arrow-link__icon {
	flex-shrink: 0;
	width: 1.4em; height: 1.4em;
	display: grid; place-items: center;
	transition: transform var(--transition);
}
.arrow-link:hover { color: var(--color-primary); }
.arrow-link:hover .arrow-link__icon { transform: translate(4px, -4px); }

/* Inline text link with arrow, used in place of buttons. */
.text-link {
	display: inline-flex; align-items: center; gap: 0.5rem;
	font-family: var(--font-heading); font-weight: 700;
	font-size: var(--fs-sm); letter-spacing: 0.04em; text-transform: uppercase;
	color: var(--color-ink);
}
.text-link .arrow-link__icon { width: 1.1em; height: 1.1em; }
.text-link:hover { color: var(--color-primary); }
.text-link:hover .arrow-link__icon { transform: translate(3px, -3px); }

/* Minimal, borderless cards (image-led, editorial). */
.project-card--plain,
.post-card--plain {
	border: 0; background: transparent; border-radius: 0; box-shadow: none;
}
.project-card--plain .project-card__media,
.post-card--plain .post-card__media { border-radius: var(--radius-sm); }
.project-card--plain:hover { transform: none; box-shadow: none; }
.project-card--plain .project-card__body { padding: var(--space-2) 0 0; }
.project-card--plain .project-card__title,
.post-card--plain .post-card__title { font-weight: 800; }
.project-card--plain:hover .project-card__title,
.post-card--plain:hover .post-card__title { color: var(--color-primary); }

/* -------------------------------------------------------------------------
   Centered page layouts + alternating media rows (Projects, etc.)
   ---------------------------------------------------------------------- */
.page-hero--center { text-align: center; }
.page-hero--center h1 { margin-inline: auto; max-width: none; }
.page-hero--center .lead { margin-inline: auto; }

/* Contact page map (matches the live site) */
.contact-map { margin-top: var(--space-3); }
.contact-map iframe { width: 100%; height: 460px; border: 0; display: block; filter: grayscale(0.2); }

/* Full-width hero image on inner pages */
.media-hero { margin-bottom: var(--space-5); }
.media-hero img { width: 100%; border-radius: var(--radius); aspect-ratio: 21 / 9; object-fit: cover; display: block; }

/* Centered intro prose */
.prose--center { max-width: 760px; margin-inline: auto; text-align: center; }
.prose--center p { font-size: var(--fs-md); color: var(--color-body); }

/* Centered section heading */
.section__head--center .section__title,
.section__head--center .lead { margin-inline: auto; }

/* Alternating large project rows */
.project-row {
	display: grid; grid-template-columns: 1fr 1fr;
	gap: var(--space-6); align-items: center;
	margin-top: var(--space-6);
}
.project-row__media img { width: 100%; border-radius: var(--radius); aspect-ratio: 4 / 3; object-fit: cover; box-shadow: var(--shadow-sm); }
.project-row--reverse .project-row__media { order: 2; }
.project-row__tag { font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-primary); }
.project-row__title { font-size: var(--fs-xl); margin: 0.35rem 0 var(--space-1); }
.project-row__text p { color: var(--color-body); }
.dev-project { max-width: 820px; margin: 0 auto var(--space-4); padding-bottom: var(--space-4); border-bottom: 1px solid var(--color-line); }
.dev-project:last-child { border-bottom: 0; margin-bottom: 0; }
.dev-project .project-row__title { margin-top: 0.3rem; }
@media (max-width: 860px) {
	.project-row { grid-template-columns: 1fr; gap: var(--space-3); }
	.project-row--reverse .project-row__media { order: 0; }
}

/* Team layout: left intro column + right 2-column member grid (round photos) */
.team-layout { display: grid; grid-template-columns: 0.85fr 1.65fr; gap: var(--space-6); align-items: start; }
.team-members { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4) var(--space-4); }
.team-member { display: flex; align-items: center; gap: var(--space-2); }
.team-member__photo { width: 112px; height: 112px; border-radius: 50%; object-fit: cover; flex-shrink: 0; background: var(--color-primary-light); }
.team-member__name { font-size: var(--fs-md); margin: 0; }
.team-member__role { font-size: var(--fs-sm); color: var(--color-muted); }
@media (max-width: 980px) { .team-layout { grid-template-columns: 1fr; gap: var(--space-4); } }
@media (max-width: 560px) { .team-members { grid-template-columns: 1fr; } }

/* DVP program tracks + accordions (Social Impact) */
.dvp-intro { text-align: center; max-width: 820px; margin-inline: auto; }
.dvp-intro .lead { margin-inline: auto; }
.reasons { list-style: none; margin: var(--space-4) auto 0; padding: 0; max-width: 900px; display: grid; gap: var(--space-3); }
.reason { display: grid; grid-template-columns: 56px 1fr; gap: var(--space-3); align-items: start; padding-bottom: var(--space-3); border-bottom: 1px solid var(--color-line); }
.reason:last-child { border-bottom: 0; padding-bottom: 0; }
.reason__num { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; background: var(--color-primary); color: #fff; font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-lg); }
.reason__title { font-size: var(--fs-lg); margin: 0 0 0.4rem; }
.reason__body p { color: var(--color-body); margin: 0; }
@media (max-width: 600px) { .reason { grid-template-columns: 40px 1fr; gap: var(--space-2); } .reason__num { width: 38px; height: 38px; font-size: var(--fs-md); } }
.track { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--space-5); align-items: start; margin-top: var(--space-5); }
.track__media img { width: 100%; border-radius: var(--radius); object-fit: cover; }
.track__icon { width: 52px; height: 52px; display: grid; place-items: center; border: 1px solid var(--color-line); border-radius: 50%; color: var(--color-primary); margin-bottom: var(--space-1); }
.track__title { font-size: var(--fs-lg); margin: 0 0 var(--space-1); }
.track__desc { color: var(--color-body); }
.accordion { border-top: 1px solid var(--color-line); }
.accordion > summary {
	list-style: none; cursor: pointer;
	display: flex; justify-content: space-between; align-items: center;
	padding: var(--space-2) 0;
	font-family: var(--font-heading); font-weight: 700; color: var(--color-ink);
}
.accordion > summary::-webkit-details-marker { display: none; }
.accordion > summary::after { content: '+'; font-size: 1.4rem; color: var(--color-primary); }
.accordion[open] > summary::after { content: '\2212'; }
.accordion__body { padding: 0 0 var(--space-2); color: var(--color-body); }
.accordion__body p { margin: 0 0 var(--space-1); }
@media (max-width: 860px) { .track { grid-template-columns: 1fr; gap: var(--space-3); } }

/* News vertical list (centered header + stacked articles) */
.news-list { max-width: 1000px; margin-inline: auto; }
.news-item { padding: var(--space-5) 0; border-top: 1px solid var(--color-line); }
.news-item:first-child { border-top: 2px solid var(--color-secondary); }
.news-item__date { font-family: var(--font-heading); font-size: var(--fs-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-muted); }
.news-item__title { font-size: clamp(1.5rem, 2vw + 0.6rem, 2rem); font-weight: 800; margin: var(--space-1) 0; }
.news-item__title a { color: var(--color-ink); }
.news-item__title a:hover { color: var(--color-primary); }
.news-item__excerpt { color: var(--color-body); max-width: 70ch; margin: 0; }

/* Contact: centered title, left form, right email card */
.contact-aside { text-align: left; }
.contact-aside__logo { width: 120px; height: auto; margin-bottom: var(--space-2); }
.contact-aside__name { font-size: var(--fs-lg); margin: 0 0 0.25rem; }
.contact-aside p { color: var(--color-body); margin: 0; }

/* Careers job list */
.job-list { border-top: 1px solid var(--color-line); }
.job-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); padding: var(--space-3) 0; border-bottom: 1px solid var(--color-line); color: var(--color-ink); }
.job-row__title { font-family: var(--font-heading); font-weight: 600; font-size: var(--fs-md); }
a.job-row:hover .job-row__title { color: var(--color-primary); }
.job-row__loc { font-size: var(--fs-sm); color: var(--color-muted); flex-shrink: 0; text-align: right; }
@media (max-width: 600px) { .job-row { flex-direction: column; align-items: flex-start; gap: 0.25rem; } .job-row__loc { text-align: left; } }

/* Report download lists (About page) */
.report-list { list-style: none; margin: 0.5rem 0 0; padding: 0; }
.report-list li { border-bottom: 1px solid var(--color-line); }
.report-list a { display: block; padding: 0.75rem 0; color: var(--color-ink); font-family: var(--font-heading); font-weight: 600; }
.report-list a:hover { color: var(--color-primary); }
.report-group__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-md); margin: 1.25rem 0 0.35rem; }
.report-bullets { list-style: disc; margin: 0 0 0.5rem; padding-left: 1.15rem; }
.report-bullets li { padding: 0.12rem 0; }
.report-bullets a { color: var(--color-ink); font-family: var(--font-heading); font-weight: 600; }
.report-bullets a:hover { color: var(--color-primary); }

/* -------------------------------------------------------------------------
   Stats
   ---------------------------------------------------------------------- */
.stats {
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	gap: var(--space-3);
}
.stat { text-align: center; padding: var(--space-3); }
.stat__num {
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: var(--fs-3xl);
	color: var(--color-primary);
	line-height: 1;
}
.section--dark .stat__num { color: var(--color-accent); }
.stat__label { font-size: var(--fs-sm); color: var(--color-muted); margin-top: var(--space-1); }
.section--dark .stat__label { color: #b6cabf; }

/* -------------------------------------------------------------------------
   Feature / services grid
   ---------------------------------------------------------------------- */
.grid { display: grid; gap: var(--space-3); }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }

.card {
	background: #fff;
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	padding: var(--space-4);
	transition: transform var(--transition), box-shadow var(--transition);
	height: 100%;
}
.card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.card__icon {
	width: 56px; height: 56px;
	display: grid; place-items: center;
	border-radius: var(--radius-sm);
	background: var(--color-primary-light);
	color: var(--color-primary);
	font-size: var(--fs-lg);
	margin-bottom: var(--space-2);
}
.card__title { font-size: var(--fs-lg); margin-bottom: var(--space-1); }

/* -------------------------------------------------------------------------
   Project cards (image based)
   ---------------------------------------------------------------------- */
.project-card {
	border-radius: var(--radius);
	overflow: hidden;
	background: #fff;
	border: 1px solid var(--color-line);
	display: flex; flex-direction: column;
	transition: transform var(--transition), box-shadow var(--transition);
}
.project-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.project-card__media { aspect-ratio: 3 / 2; overflow: hidden; background: var(--color-primary-light); }
.project-card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.project-card:hover .project-card__media img { transform: scale(1.05); }
.project-card__body { padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-1); flex: 1; }
.project-card__tag {
	font-size: var(--fs-xs);
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: var(--color-primary);
}
.project-card__title { font-size: var(--fs-md); margin: 0; }
.project-card__meta { font-size: var(--fs-sm); color: var(--color-muted); margin-top: auto; }

/* -------------------------------------------------------------------------
   Team cards
   ---------------------------------------------------------------------- */
.team-card { text-align: center; }
.team-card__photo {
	width: 100%; aspect-ratio: 1; border-radius: var(--radius);
	object-fit: cover; margin-bottom: var(--space-2);
	background: var(--color-primary-light);
}
.team-card__name { font-size: var(--fs-md); margin: 0; }
.team-card__role { font-size: var(--fs-sm); color: var(--color-muted); }

/* -------------------------------------------------------------------------
   Split / about section
   ---------------------------------------------------------------------- */
.split {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--space-6);
	align-items: center;
}
.split__media img { border-radius: var(--radius); box-shadow: var(--shadow); }

/* -------------------------------------------------------------------------
   CTA band
   ---------------------------------------------------------------------- */
.cta-band {
	background: linear-gradient(120deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
	color: #fff;
	border-radius: var(--radius);
	padding: var(--space-6);
	text-align: center;
}
.cta-band h2 { color: #fff; }
.cta-band p { color: #e3f1ea; max-width: 560px; margin-inline: auto; }
.cta-band .btn { margin-top: var(--space-3); }

/* -------------------------------------------------------------------------
   Posts / news
   ---------------------------------------------------------------------- */
.post-card { display: flex; flex-direction: column; gap: var(--space-1); }
.post-card__media { aspect-ratio: 16 / 9; border-radius: var(--radius); overflow: hidden; margin-bottom: var(--space-1); background: var(--color-bg-alt); }
.post-card__media img { width: 100%; height: 100%; object-fit: cover; }
.post-card__date { font-size: var(--fs-xs); color: var(--color-muted); text-transform: uppercase; letter-spacing: 0.05em; }
.post-card__title { font-size: var(--fs-md); margin: 0; }

.entry-content { max-width: var(--container-sm); margin-inline: auto; }
.entry-content > * + * { margin-top: var(--space-2); }
.entry-content h2, .entry-content h3 { margin-top: var(--space-4); }
.entry-content img { border-radius: var(--radius-sm); }
.entry-content blockquote {
	border-left: 4px solid var(--color-primary);
	padding-left: var(--space-3);
	margin: var(--space-3) 0;
	font-size: var(--fs-md);
	color: var(--color-ink);
}

.page-hero {
	background: var(--color-bg);
	padding-block: clamp(var(--space-6), 9vw, 7rem) var(--space-5);
}
.page-hero h1 {
	font-size: clamp(2.5rem, 5vw + 0.5rem, 4.5rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	line-height: 1.04;
	margin-bottom: var(--space-2);
	max-width: 18ch;
}
.page-hero .lead { font-size: var(--fs-lg); color: var(--color-body); max-width: 60ch; margin: 0; }
.page-hero--panel { background: var(--color-accent); }
.page-hero .breadcrumb { font-size: var(--fs-sm); color: var(--color-muted); }

/* Generic editorial content blocks used on inner pages. */
.prose { max-width: 62ch; }
.prose p { font-size: var(--fs-md); color: var(--color-body); }
.split-text { display: grid; grid-template-columns: 0.8fr 1.2fr; gap: var(--space-6); align-items: start; }
.split-text .eyebrow { margin-top: 0.5rem; }
@media (max-width: 860px) { .split-text { grid-template-columns: 1fr; gap: var(--space-3); } }

/* -------------------------------------------------------------------------
   Forms
   ---------------------------------------------------------------------- */
.form-field { margin-bottom: var(--space-2); }
.form-field label { display: block; font-weight: 600; margin-bottom: 0.35rem; color: var(--color-ink); font-size: var(--fs-sm); }
.form-field input,
.form-field textarea,
.form-field select {
	width: 100%;
	padding: 0.85rem 1rem;
	border: 1px solid var(--color-line);
	border-radius: var(--radius-sm);
	font: inherit;
	color: var(--color-ink);
	background: #fff;
	transition: border-color var(--transition);
}
.form-field input:focus,
.form-field textarea:focus { border-color: var(--color-primary); outline: none; }
.form-note { font-size: var(--fs-sm); color: var(--color-muted); }

/* -------------------------------------------------------------------------
   Pagination
   ---------------------------------------------------------------------- */
.pagination { display: flex; gap: var(--space-1); justify-content: center; margin-top: var(--space-5); }
.pagination .page-numbers {
	display: inline-grid; place-items: center;
	min-width: 44px; height: 44px; padding: 0 0.5rem;
	border-radius: var(--radius-sm);
	border: 1px solid var(--color-line);
	color: var(--color-ink);
	font-family: var(--font-heading); font-weight: 600;
}
.pagination .page-numbers.current { background: var(--color-primary); color: #fff; border-color: var(--color-primary); }
.pagination .page-numbers:hover { border-color: var(--color-primary); }

/* -------------------------------------------------------------------------
   Footer
   ---------------------------------------------------------------------- */
/* Light grey-green footer (#c8d4d2), matching the live site. */
.site-footer { background: var(--color-accent); color: var(--color-body); }
.site-footer__top {
	display: grid;
	grid-template-columns: 1fr 1fr 1fr;
	gap: var(--space-4);
	padding-block: var(--space-6) var(--space-4);
	align-items: start;
}
.footer-widget__title {
	color: var(--color-ink);
	font-family: var(--font-heading);
	font-weight: 700; font-size: 0.8rem;
	letter-spacing: 0.08em; text-transform: uppercase;
	margin-bottom: var(--space-2);
}
.footer-lines { color: var(--color-body); line-height: 2; margin: 0; }
.footer-lines a { color: var(--color-body); }
.footer-lines a:hover { color: var(--color-primary); }

/* Center brand column */
.site-footer__col--brand { text-align: center; }
.site-footer__wordmark { height: 64px; width: auto; display: inline-block; margin-bottom: var(--space-1); }
.site-footer__cip { color: var(--color-primary); font-size: var(--fs-sm); margin: 0; }

/* Right connect column */
.site-footer__col--connect { text-align: right; }
.site-footer__col--connect a { display: block; color: var(--color-body); line-height: 2; }
.site-footer__col--connect a:hover { color: var(--color-primary); }

/* Divider + centered boilerplate + privacy */
.site-footer__divider { border-top: 1px solid rgba(20,32,27,0.18); }
.site-footer__boiler { text-align: center; padding-block: var(--space-4); }
.site-footer__boiler p { max-width: 760px; margin-inline: auto; color: var(--color-body); }
.site-footer__legal-center { text-align: center; padding-bottom: var(--space-5); }
.site-footer__legal-center a { color: var(--color-ink); font-family: var(--font-heading); font-weight: 700; font-size: var(--fs-sm); }
.site-footer__legal-center a:hover { color: var(--color-primary); }

/* -------------------------------------------------------------------------
   Utilities
   ---------------------------------------------------------------------- */
.text-center { text-align: center; }
.mt-3 { margin-top: var(--space-3); }
/* Reveal-on-scroll only hides content when JS is active (progressive enhancement),
   so the hero and all copy stay visible if JS is slow or disabled. */
.js .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; }
.js .reveal.is-visible { opacity: 1; transform: none; }

/* When Elementor builds the page, remove the theme's default main padding so
   the builder controls spacing. */
.elementor-built .site-main { padding: 0; }

/* -------------------------------------------------------------------------
   Responsive
   ---------------------------------------------------------------------- */
@media (max-width: 1024px) {
	.grid--4 { grid-template-columns: repeat(2, 1fr); }
	.stats { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 960px) {
	.nav-toggle { display: flex; }
	.site-nav--left, .site-nav--right { display: none; }
	.site-header__inner { min-height: 76px; justify-content: space-between; }
	.site-branding { flex: 1; display: flex; }
	.site-branding img, .site-logo-mark img { height: 48px; }
	.mobile-nav {
		display: block;
		position: fixed;
		inset: 76px 0 auto 0;
		background: #fff;
		border-bottom: 1px solid var(--color-line);
		box-shadow: var(--shadow);
		max-height: 0;
		overflow: hidden;
		transition: max-height var(--transition);
	}
	.mobile-nav.is-open { max-height: 85vh; overflow-y: auto; }
	.mobile-menu {
		list-style: none; margin: 0;
		padding: var(--space-2) var(--space-3);
		display: flex; flex-direction: column;
	}
	.mobile-menu li { border-bottom: 1px solid var(--color-line); }
	.mobile-menu a {
		display: block; padding: var(--space-2) 0;
		font-family: var(--font-heading); font-weight: 700;
		font-size: 0.85rem; letter-spacing: 0.05em; text-transform: uppercase;
		color: var(--color-ink);
	}
	.editorial { grid-template-columns: 1fr; gap: var(--space-4); }
	.split { grid-template-columns: 1fr; gap: var(--space-4); }
	.grid--3 { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 600px) {
	:root { --space-7: 3.5rem; --space-6: 2.5rem; }
	.grid--2, .grid--3, .grid--4 { grid-template-columns: 1fr; }
	.stats { grid-template-columns: 1fr 1fr; }
	.site-footer__top { grid-template-columns: 1fr; gap: var(--space-4); text-align: center; }
	.site-footer__col--connect { text-align: center; }
	.cta-band { padding: var(--space-4); }
	h1 { font-size: var(--fs-2xl); }
	h2 { font-size: var(--fs-xl); }
}

@media (prefers-reduced-motion: reduce) {
	* { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
	.reveal { opacity: 1; transform: none; }
}