/* ==========================================================================
   Reveg theme: main stylesheet
   Plain CSS, no framework. Tokens first, then base, layout, components.
   ========================================================================== */

/* ---------- Design tokens ---------- */
:root {
	--green-900: #12331f;
	--green-800: #1b4332;
	--green-700: #2d6a4f;
	--green-500: #40916c;
	--green-300: #74c69d;
	--green-100: #d8f3dc;
	--earth-700: #5f4a2c;
	--earth-500: #8a6d3b;
	--sand-50: #f7f5ee;
	--sand-100: #efe9db;
	--ink: #16211b;
	--ink-soft: #3d4a43;
	--line: #d8ddd4;
	--white: #ffffff;

	--font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans,
		Ubuntu, Cantarell, "Helvetica Neue", sans-serif;

	--step--1: clamp(0.9rem, 0.88rem + 0.1vw, 0.95rem);
	--step-0: clamp(1rem, 0.95rem + 0.25vw, 1.125rem);
	--step-1: clamp(1.15rem, 1.05rem + 0.5vw, 1.35rem);
	--step-2: clamp(1.3rem, 1.15rem + 0.75vw, 1.6rem);
	--step-3: clamp(1.7rem, 1.2rem + 2.4vw, 2.6rem);
	--step-4: clamp(2.25rem, 1.3rem + 4.5vw, 4rem);

	--space-s: clamp(1rem, 0.9rem + 0.5vw, 1.25rem);
	--space-m: clamp(1.5rem, 1.3rem + 1vw, 2rem);
	--space-l: clamp(3.5rem, 7vw, 5.5rem);

	--radius: 1rem;
	--radius-s: 0.65rem;
	--shadow-sm: 0 1px 2px rgba(18, 51, 31, 0.08), 0 2px 8px rgba(18, 51, 31, 0.07);
	--shadow-md: 0 6px 16px rgba(18, 51, 31, 0.14), 0 2px 6px rgba(18, 51, 31, 0.1);
	--header-h: 4.5rem;
	--container: 72rem;
}

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 1rem);
}
@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	margin: 0;
	font-family: var(--font);
	font-size: var(--step-0);
	line-height: 1.65;
	color: var(--ink);
	background: var(--sand-50);
}

img, picture, video { max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
	line-height: 1.15;
	color: var(--green-900);
	font-weight: 750;
	margin: 0 0 0.6em;
}
h1 { font-size: var(--step-4); letter-spacing: -0.02em; }
h2 { font-size: var(--step-3); letter-spacing: -0.015em; }
h3 { font-size: var(--step-2); }
p { margin: 0 0 1em; }
ul, ol { margin: 0 0 1em; padding-left: 1.25em; }
a { color: var(--green-700); text-decoration-thickness: 1.5px; text-underline-offset: 0.18em; }
a:hover { color: var(--green-800); }

:focus-visible {
	outline: 3px solid var(--green-300);
	outline-offset: 2px;
	border-radius: 4px;
}

::selection { background: var(--green-300); color: var(--green-900); }

.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;
	top: -4rem;
	left: 1rem;
	z-index: 100;
	background: var(--green-900);
	color: var(--white);
	padding: 0.7rem 1.2rem;
	border-radius: var(--radius-s);
	transition: top 0.2s ease;
}
.skip-link:focus { top: 0.75rem; color: var(--white); }

/* ---------- Layout helpers ---------- */
.container {
	width: min(100% - 2.5rem, var(--container));
	margin-inline: auto;
}
.section { padding-block: var(--space-l); }
.section--tint { background: var(--sand-100); }
.section--dark { background: var(--green-900); color: #e9f3ec; }
.section--dark h2 { color: var(--white); }
.section__header { max-width: 60ch; margin-bottom: var(--space-m); }
.section__header p { color: var(--ink-soft); }
.section--dark .section__header p { color: #cfe3d5; }

.prose { max-width: 46rem; }
.prose > * + * { margin-top: 0; }
.prose h2 { margin-top: 1.6em; }
.prose h2:first-child { margin-top: 0; }

/* Images added to page content by the content import. Natural aspect ratio, no cropping. */
.prose .reveg-figure { margin: 2rem 0; max-width: min(56rem, 100%); }
.prose .reveg-figure picture, .prose .reveg-figure img { display: block; width: 100%; height: auto; border-radius: var(--radius-s); }
.gallery-grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr)); margin: 1.5rem 0; }
.gallery-grid .reveg-figure { margin: 0; }
.lead { font-size: var(--step-1); color: var(--ink-soft); }

/* ---------- Buttons ---------- */
.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	padding: 0.85rem 1.7rem;
	border: 2px solid transparent;
	border-radius: 999px;
	font-weight: 650;
	font-size: var(--step-0);
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: transform 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease, color 0.18s ease;
}
.btn:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); }
.btn--primary { background: var(--green-700); color: var(--white); }
.btn--primary:hover { background: var(--green-800); color: var(--white); }
.btn--light { background: var(--white); color: var(--green-900); }
.btn--light:hover { color: var(--green-900); }
.btn--outline { border-color: var(--green-700); color: var(--green-800); background: transparent; }
.btn--outline:hover { background: var(--green-700); color: var(--white); }
.btn--outline-light { border-color: rgba(255, 255, 255, 0.85); color: var(--white); background: transparent; }
.btn--outline-light:hover { background: var(--white); color: var(--green-900); }

/* ---------- Top bar ---------- */
.site-topbar {
	background: var(--green-900);
	color: var(--green-100);
	font-size: var(--step--1);
}
.site-topbar__inner {
	display: flex;
	align-items: center;
	gap: 0.9rem;
	padding-block: 0.35rem;
}
.site-topbar a { color: var(--white); text-decoration: none; }
.site-topbar a:hover { text-decoration: underline; }
.site-topbar__sep { width: 1px; height: 1em; background: rgba(255, 255, 255, 0.35); }
.site-topbar__email { margin-left: auto; }
@media (max-width: 45rem) {
	.site-topbar { display: none; }
}

/* ---------- Header and navigation ---------- */
.site-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--sand-50);
	border-bottom: 1px solid var(--line);
	transition: box-shadow 0.2s ease;
}
.site-header.is-scrolled { box-shadow: var(--shadow-sm); }
.site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: var(--header-h);
}
.site-logo { display: inline-flex; align-items: center; }
.site-logo img { height: 2.9rem; width: auto; display: block; }

.menu-toggle {
	display: inline-flex;
	align-items: center;
	gap: 0.55rem;
	background: none;
	border: 2px solid var(--green-700);
	border-radius: 999px;
	padding: 0.5rem 1rem;
	font: inherit;
	font-weight: 650;
	color: var(--green-800);
	cursor: pointer;
}
.menu-toggle__bars { display: grid; gap: 4px; }
.menu-toggle__bars span {
	display: block;
	width: 20px; height: 2px;
	background: var(--green-800);
	transition: transform 0.25s ease, opacity 0.2s ease;
}
.nav-open .menu-toggle__bars span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav-open .menu-toggle__bars span:nth-child(2) { opacity: 0; }
.nav-open .menu-toggle__bars span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

.site-nav .menu { list-style: none; margin: 0; padding: 0; }
.site-nav a, .site-nav .menu-parent {
	color: var(--ink);
	text-decoration: none;
	font-weight: 600;
}
.menu-parent { cursor: default; }
.menu-parent::after {
	content: "";
	display: inline-block;
	margin-left: 0.45em;
	width: 0.5em; height: 0.5em;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg) translateY(-2px);
}
.site-nav a:hover { color: var(--green-700); }
.site-nav .current-menu-item > a, .site-nav [aria-current="page"] { color: var(--green-700); }

/* Mobile: slide-in panel */
@media (max-width: 55.98rem) {
	.site-nav {
		position: fixed;
		inset-block: 0;
		right: 0;
		z-index: 70;
		width: min(20rem, 86vw);
		background: var(--white);
		border-left: 1px solid var(--line);
		box-shadow: var(--shadow-md);
		padding: 5rem 1.5rem 2rem;
		overflow-y: auto;
		transform: translateX(105%);
		transition: transform 0.3s ease, visibility 0.3s ease;
		visibility: hidden;
	}
	.nav-open .site-nav { transform: translateX(0); visibility: visible; }
	.nav-open::after {
		content: "";
		position: fixed;
		inset: 0;
		z-index: 60;
		background: rgba(18, 51, 31, 0.5);
	}
	body.nav-open { overflow: hidden; }
	.menu-toggle { position: relative; z-index: 80; }
	.site-nav .menu { display: grid; gap: 0.25rem; }
	.site-nav .menu a, .site-nav .menu-parent {
		display: block;
		padding: 0.65rem 0.25rem;
		font-size: 1.05rem;
	}
	.site-nav .menu-parent {
		width: 100%;
		background: none;
		border: 0;
		font: inherit;
		text-align: left;
		cursor: pointer;
	}
	.site-nav .sub-menu {
		list-style: none;
		display: none;
		margin: 0 0 0.5rem;
		padding: 0 0 0 1rem;
		border-left: 2px solid var(--sand-100);
	}
	.site-nav .sub-menu a { font-weight: 500; padding: 0.45rem 0.25rem; }
	.menu-item-has-children { margin-bottom: 0.4rem; }
	.menu-item-has-children.is-open > .sub-menu { display: block; }
}

/* Desktop: inline menu with dropdowns */
@media (min-width: 56rem) {
	.menu-toggle { display: none; }
	.site-nav { position: static; }
	.site-nav .menu { display: flex; align-items: center; gap: 0.25rem; }
	.site-nav .menu > li { position: relative; }
	.site-nav .menu a, .site-nav .menu-parent {
		display: inline-flex;
		align-items: center;
		padding: 0.55rem 0.75rem;
		border-radius: 0.5rem;
		font-size: 0.98rem;
		background: none;
		border: 0;
		font: inherit;
		text-align: left;
		cursor: pointer;
	}
	.site-nav .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 40;
		min-width: 15rem;
		background: var(--white);
		border: 1px solid var(--line);
		border-radius: 0.75rem;
		box-shadow: var(--shadow-md);
		padding: 0.5rem;
		visibility: hidden;
		opacity: 0;
		transform: translateY(0.5rem);
		pointer-events: none;
		transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s ease 0.18s;
	}
	.menu-item-has-children:hover > .sub-menu,
	.menu-item-has-children:focus-within > .sub-menu,
	.menu-item-has-children.is-open > .sub-menu {
		visibility: visible;
		opacity: 1;
		transform: translateY(0.25rem);
		pointer-events: auto;
		transition-delay: 0s;
	}
	.site-nav .sub-menu a { display: block; padding: 0.5rem 0.75rem; font-weight: 500; }
	.site-nav .sub-menu a:hover { background: var(--sand-100); }
}

/* ---------- Hero ---------- */
.hero {
	position: relative;
	display: grid;
	align-items: end;
	overflow: hidden;
	color: var(--white);
	background: var(--green-900);
}
.hero--full { min-height: 100vh; min-height: 100svh; }
.hero--compact { min-height: clamp(22rem, 62vh, 42rem); min-height: clamp(22rem, 62svh, 42rem); align-items: center; }
.hero__media, .hero__scrim { position: absolute; inset: 0; }
.hero__media picture, .hero__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.hero__media img { object-position: var(--hero-pos, 50% 50%); }
/* Scrim contrast reasoning: the gradient is darkest behind the text column
   and fades across the photo so foliage stays visible on the far side of
   the text. White hero text plus the text shadow below keeps at least 3:1
   contrast for large text and 4.5:1 for body text over bright foliage and
   sky. The light bottom layer only lifts the scroll cue. With no photo the
   .hero green-900 background still shows a dark green banner. */
.hero__scrim {
	background: linear-gradient(100deg, rgba(18, 51, 31, 0.62) 0%, rgba(18, 51, 31, 0.34) 45%, rgba(18, 51, 31, 0.12) 100%),
		linear-gradient(0deg, rgba(18, 51, 31, 0.24) 0%, rgba(18, 51, 31, 0) 25%);
}
.hero--compact .hero__scrim {
	background: linear-gradient(100deg, rgba(18, 51, 31, 0.58) 0%, rgba(18, 51, 31, 0.30) 50%, rgba(18, 51, 31, 0.10) 100%);
	position: absolute;
}
/* On narrow screens the text spans the full width, so the scrim becomes a
   flat 0.62 alpha everywhere: over a worst case near white photo that still
   gives about 4.2:1 for white body text, and the text shadow covers the
   remainder. Real photos are darker, so contrast is higher in practice. */
@media (max-width: 40rem) {
	.hero__scrim, .hero--compact .hero__scrim {
		background: rgba(18, 51, 31, 0.68);
	}
}
.hero__content {
	position: relative;
	padding-block: clamp(5rem, 12vh, 8rem) clamp(4rem, 10vh, 6rem);
	max-width: 46rem;
}
.hero--compact .hero__content { padding-block: clamp(3rem, 8vh, 5rem); }
.hero__title, .hero__tagline, .hero__intro { text-shadow: 0 1px 3px rgba(0, 0, 0, 0.45); }
.hero__tagline {
	text-transform: uppercase;
	letter-spacing: 0.14em;
	font-size: var(--step--1);
	font-weight: 650;
	color: var(--green-300);
	margin-bottom: 0.8rem;
}
.hero__title { color: var(--white); margin-bottom: 0.4em; }
.hero__intro { font-size: var(--step-1); max-width: 38ch; color: #eef6f0; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 0.8rem; margin-top: 1.6rem; }
.hero__scrollcue {
	position: absolute;
	left: 50%;
	bottom: 1.4rem;
	width: 1.6rem; height: 1.6rem;
	border-right: 3px solid rgba(255, 255, 255, 0.8);
	border-bottom: 3px solid rgba(255, 255, 255, 0.8);
	transform: translateX(-50%) rotate(45deg);
	animation: cue 2.2s ease-in-out infinite;
}
@keyframes cue {
	0%, 100% { transform: translateX(-50%) rotate(45deg) translate(0, 0); opacity: 0.9; }
	50% { transform: translateX(-50%) rotate(45deg) translate(6px, 6px); opacity: 0.5; }
}

/* Scroll-driven parallax on the full hero where supported */
@supports (animation-timeline: scroll()) {
	@media (prefers-reduced-motion: no-preference) {
		.hero--full .hero__media img {
			will-change: transform;
			animation: hero-drift linear both;
			animation-timeline: scroll(root block);
			animation-range: 0 100svh;
		}
	}
}
/* Parallax maths: the image keeps its centre origin, so scale(1.14) grows
   it past the frame by half of 0.14, that is 7 percent of its height, on
   every side. translateY(6%) then moves it down by at most 6 percent of its
   height, which stays inside the 7 percent overscan, so no empty strip can
   appear at the top of the hero. */
@keyframes hero-drift {
	to { transform: translateY(6%) scale(1.14); }
}

/* ---------- Chips, ticks, pills ---------- */
.chips {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	padding: 0;
	margin-top: 1.2rem;
}
.chips__item {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 999px;
	padding: 0.35rem 0.95rem;
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--ink-soft);
}

.ticks { list-style: none; padding: 0; }
.ticks li { position: relative; padding-left: 1.7rem; margin-bottom: 0.45rem; }
.ticks li::before {
	content: "\2713";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--green-700);
	font-weight: 700;
}

.pill-row {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
	padding: 0;
	margin: 0;
}
.pill {
	display: inline-block;
	padding: 0.65rem 1.25rem;
	border: 1.5px solid rgba(255, 255, 255, 0.4);
	border-radius: 999px;
	color: var(--white);
	text-decoration: none;
	font-weight: 600;
	transition: background-color 0.18s ease, color 0.18s ease, transform 0.18s ease;
}
.pill:hover { background: var(--white); color: var(--green-900); transform: translateY(-2px); }

/* ---------- Cards ---------- */
.cards {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1.25rem;
	grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
}
.card {
	background: var(--white);
	border-radius: var(--radius);
	overflow: hidden;
	box-shadow: var(--shadow-sm);
	transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.card:hover, .card:focus-within { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.card__link {
	display: flex;
	flex-direction: column;
	height: 100%;
	color: inherit;
	text-decoration: none;
}
.card__media { display: block; background: var(--sand-100); aspect-ratio: 4 / 3; overflow: hidden; }
.card__media picture, .card__media img { display: block; width: 100%; height: 100%; object-fit: cover; }
.card__body { display: grid; gap: 0.45rem; padding: 1.1rem 1.25rem 1.35rem; }
.card__title { font-weight: 700; font-size: 1.08rem; color: var(--green-900); }
.card__more { color: var(--green-700); font-weight: 600; font-size: 0.95rem; }
.card__more::after { content: " \2192"; }

/* ---------- Split bands ---------- */
.band__inner { display: grid; gap: var(--space-m); align-items: center; }
.band__media picture, .band__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
	box-shadow: var(--shadow-md);
}
@media (min-width: 56rem) {
	.band__inner { grid-template-columns: 1fr 1fr; gap: 3.5rem; }
	.band__inner--flip .band__media { order: 2; }
}

/* Bleed bands: on wide screens the photo runs to the viewport edge on the
   media side with no radius or shadow, while the body column stays aligned
   with the page container. The media column stretches to the row height
   with a min height so the photo keeps real presence; object-fit cover is
   acceptable here because these bands are decorative. On narrow screens the
   photo stacks full width at its natural aspect ratio, still edge to edge
   with no radius. */
.band--bleed .band__media picture, .band--bleed .band__media img {
	border-radius: 0;
	box-shadow: none;
}
.band--bleed .band__body { padding-inline: 1.25rem; }
@media (min-width: 56rem) {
	.band--bleed .band__inner { grid-template-columns: 1fr 1fr; gap: 0; align-items: stretch; }
	.band--bleed .band__media { position: relative; min-height: clamp(24rem, 62vh, 40rem); }
	.band--bleed .band__media picture { position: absolute; inset: 0; }
	.band--bleed .band__media img { height: 100%; object-fit: cover; }
	.band--bleed .band__body {
		align-self: center;
		padding-block: var(--space-m);
		padding-left: 3.5rem;
		padding-right: max(1.25rem, calc(50vw - var(--container) / 2));
	}
	.band--bleed .band__inner--flip .band__media { order: 2; }
	.band--bleed .band__inner--flip .band__body {
		padding-left: max(1.25rem, calc(50vw - var(--container) / 2));
		padding-right: 3.5rem;
	}
}

/* ---------- Branch cards ---------- */
.branch-grid {
	display: grid;
	gap: 1.5rem;
	margin-top: var(--space-m);
}
@media (min-width: 48rem) {
	.branch-grid { grid-template-columns: 1fr 1fr; }
}
.branch-card {
	background: var(--white);
	border-radius: var(--radius);
	padding: 1.75rem;
	box-shadow: var(--shadow-sm);
}
.branch-card__title { color: var(--green-800); }
.branch-card__list { margin: 0 0 1.25rem; }
.branch-card__row {
	display: grid;
	gap: 0.1rem;
	padding-block: 0.45rem;
	border-bottom: 1px solid var(--sand-100);
}
.branch-card__row:last-child { border-bottom: 0; }
.branch-card__row dt {
	font-size: 0.8rem;
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink-soft);
}
.branch-card__row dd { margin: 0; }
.branch-card__map { margin-top: 1.25rem; }
.branch-card__map iframe {
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
	border-radius: var(--radius-s);
	display: block;
}

/* ---------- CTA band ---------- */
.cta-band {
	background: linear-gradient(120deg, var(--green-800), var(--green-900));
	color: var(--white);
	padding-block: clamp(3rem, 6vw, 4.5rem);
}
.cta-band__inner { text-align: center; max-width: 46rem; margin-inline: auto; }
.cta-band__title { color: var(--white); }
.cta-band__text { color: #dcefe3; font-size: var(--step-1); }
.cta-band__actions {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 0.8rem;
	margin-top: 1.6rem;
}

/* ---------- Forms ---------- */
.reveg-form { display: grid; gap: 1rem; max-width: 40rem; }
.reveg-form-row { margin: 0; }
.reveg-form label { display: block; font-weight: 600; margin-bottom: 0.35rem; }
.reveg-form input, .reveg-form textarea {
	width: 100%;
	padding: 0.8rem 1rem;
	border: 1.5px solid #c3cfc7;
	border-radius: var(--radius-s);
	font: inherit;
	color: var(--ink);
	background: var(--white);
}
.reveg-form input:focus, .reveg-form textarea:focus {
	border-color: var(--green-500);
	outline: 3px solid var(--green-300);
	outline-offset: 1px;
}
.reveg-hp {
	position: absolute !important;
	left: -100vw;
	width: 1px; height: 1px;
	overflow: hidden;
}
.reveg-form-privacy { font-size: var(--step--1); color: var(--ink-soft); margin: 0; }
.reveg-form-actions { margin: 0; }
.reveg-form-status {
	padding: 0.9rem 1.1rem;
	border-radius: var(--radius-s);
	border: 1.5px solid;
	margin: 0;
}
.reveg-form-status.is-success { background: #e7f6ec; border-color: var(--green-700); color: #173f2c; }
.reveg-form-status.is-error { background: #fdecea; border-color: #c0392b; color: #6b1d12; }

.search-form { display: flex; gap: 0.5rem; max-width: 32rem; margin-block: 1rem; }
.search-form__field {
	flex: 1;
	padding: 0.8rem 1rem;
	border: 1.5px solid #c3cfc7;
	border-radius: var(--radius-s);
	font: inherit;
}

/* ---------- FAQ ---------- */
.faq { margin-top: 2rem; }
.faq__items { display: grid; gap: 0.75rem; }
.faq__item {
	background: var(--white);
	border: 1px solid var(--line);
	border-radius: 0.75rem;
}
.faq__question {
	cursor: pointer;
	padding: 1rem 2.75rem 1rem 1.25rem;
	font-weight: 600;
	list-style: none;
	position: relative;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question::after {
	content: "+";
	position: absolute;
	right: 1.1rem;
	top: 50%;
	transform: translateY(-50%);
	font-size: 1.4rem;
	color: var(--green-700);
	transition: transform 0.2s ease;
}
.faq__item[open] .faq__question::after { transform: translateY(-50%) rotate(45deg); }
.faq__answer { padding: 0 1.25rem 1.1rem; color: var(--ink-soft); }
.faq__answer p { margin: 0; }

/* ---------- Breadcrumbs ---------- */
.breadcrumbs { padding-top: 1rem; font-size: var(--step--1); }
.breadcrumbs__list {
	list-style: none;
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin: 0;
	padding: 0;
}
.breadcrumbs__list li + li::before { content: "/"; margin-right: 0.5rem; color: #8a988f; }

/* ---------- Content photo and post list ---------- */
/* Content photos sit outside the prose column so they can run wider than
   the text, but never wider than 64rem or their own natural pixel width
   (the natural cap comes from an inline max-width on the figure). */
.content-photo { margin: 2.5rem auto; max-width: min(72rem, 100%); }
.content-photo picture, .content-photo img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: var(--radius);
}
.post-list { list-style: none; padding: 0; display: grid; gap: 1rem; }
.post-list__date { color: var(--ink-soft); font-size: var(--step--1); display: block; }

.page-numbers {
	display: inline-block;
	padding: 0.45rem 0.85rem;
	border: 1px solid var(--line);
	border-radius: var(--radius-s);
	text-decoration: none;
	margin-right: 0.35rem;
}
.page-numbers.current { background: var(--green-700); color: var(--white); border-color: var(--green-700); }

/* ---------- Footer ---------- */
.site-footer { background: var(--green-900); color: var(--green-100); margin-top: var(--space-l); }
.site-footer__grid {
	display: grid;
	gap: 2rem;
	padding-block: 3rem;
}
@media (min-width: 56rem) {
	.site-footer__grid { grid-template-columns: 1.3fr 1fr 1fr 1fr; }
}
.site-footer__heading {
	color: var(--green-300);
	font-size: 0.85rem;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	margin-bottom: 0.8rem;
}
.site-footer a { color: var(--white); text-decoration: none; }
.site-footer a:hover { text-decoration: underline; }
.site-footer__logo {
	display: inline-block;
	background: transparent;
	padding: 0;
	margin-bottom: 1rem;
}
.site-footer__logo img { display: block; max-width: 150px; height: auto; }
.site-footer__nav .menu { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; }
.site-footer__branch { font-style: normal; }
.site-footer__bar { border-top: 1px solid rgba(255, 255, 255, 0.16); }
.site-footer__bar-inner {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 0.5rem 1.5rem;
	padding-block: 1rem;
	font-size: var(--step--1);
}
.site-footer__bar p { margin: 0; }
.site-footer__links { display: flex; flex-wrap: wrap; gap: 1rem; }

/* ---------- Sticky mobile call bar ---------- */
.call-bar {
	position: fixed;
	inset-inline: 0;
	bottom: 0;
	z-index: 60;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.5rem;
	background: rgba(18, 51, 31, 0.96);
	padding: 0.55rem 0.55rem calc(0.55rem + env(safe-area-inset-bottom, 0));
}
.call-bar__btn {
	display: grid;
	gap: 0.05rem;
	text-align: center;
	background: var(--green-700);
	color: var(--white);
	text-decoration: none;
	border-radius: 0.75rem;
	padding: 0.55rem 0.3rem;
}
.call-bar__btn:hover { background: var(--green-500); color: var(--white); }
.call-bar__label { font-size: 0.78rem; opacity: 0.9; }
.call-bar__number { font-weight: 700; font-size: 1.02rem; }
@media (min-width: 48rem) {
	.call-bar { display: none; }
}
@media (max-width: 47.98rem) {
	body { padding-bottom: 4.6rem; }
}

/* ---------- Reveal on scroll ---------- */
/* Elements start visible (no-JS friendly). JS adds .reveal-armed to enable
   the hidden start state, then .is-visible when they enter the viewport. */
.reveal-armed {
	opacity: 0;
	transform: translateY(26px);
	transition: opacity 0.7s ease, transform 0.7s ease;
}
.reveal-armed.is-visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
	}
	.reveal-armed { opacity: 1; transform: none; }
	.hero__scrollcue { animation: none; }
}