/* ==========================================================================
   about.css - About page only (linked from about.php's <head> region).
   - Everything is scoped under .about and prefixed ab-, so nothing leaks.
   - Fonts, heading styles and brand colors come from the site CSS; only
     tokens are redefined here (same hex values the site already uses).
   - Layout responds to the width of .about itself (container queries), so
     the same rules work in the desktop and the mobile template.
   - Icons are CSS masks (no extra requests, no <base>/<use> problems).
   ========================================================================== */

.about {
	--ab-forest: #3f5d37;
	--ab-moss: #42623a;
	--ab-leaf: #4f8b3e;
	--ab-green: #59ac40;
	--ab-yellow: #fff200;
	--ab-sand: #f5f3ee;
	--ab-line: #e2ddd0;
	--ab-ink: #4a4a4a;
	--ab-r: 10px;
	--ab-shadow: 0 6px 18px rgba(0, 0, 0, .14);
	display: grid;
	gap: 48px;
	line-height: 1.7;
	container-type: inline-size;
}
.about > * { min-width: 0; }
.about ul, .about ol { margin: 0; padding: 0; list-style: none; }
.about p { margin: 0 0 1em; }
.about p:last-child { margin-bottom: 0; }
.about img { display: block; max-width: 100%; height: auto; }
.about a:focus-visible { outline: 3px solid var(--ab-forest); outline-offset: 3px; }

/* headings: keep the site's font/case, just tighten spacing and fix contrast */
.about h2 { margin: 0 0 .4em; padding: 0; }
.about h2:after {
	content: "";
	display: block;
	width: 56px;
	height: 3px;
	margin: 10px 0 16px;
	background: var(--ab-green);
}
.about h3 {
	margin: 0 0 .35em;
	padding: 0;
	color: var(--ab-forest);
	font-size: 1.375rem;
	line-height: 1.2;
}
.ab-head { max-width: 720px; margin: 0 auto 28px; text-align: center; }
.ab-head h2:after { margin-inline: auto; }
.ab-lead { font-size: 1rem; color: #222; }

/* icon badge (dark green circle, yellow glyph) */
.ab-ico {
	display: grid;
	place-items: center;
	flex: none;
	width: 52px;
	height: 52px;
	border-radius: 50%;
	background: var(--ab-moss);
}
.ab-ico:before {
	content: "";
	width: 54%;
	height: 54%;
	background: var(--ab-yellow);
	-webkit-mask: var(--i) center / contain no-repeat;
	mask: var(--i) center / contain no-repeat;
}
.ab-i-home   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M10 20v-6h4v6h5v-8h3L12 3 2 12h3v8z'/%3E%3C/svg%3E"); }
.ab-i-shield { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 1L3 5v6c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V5l-9-4zm-2 16l-4-4 1.41-1.41L10 14.17l6.59-6.59L18 9l-8 8z'/%3E%3C/svg%3E"); }
.ab-i-award  { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9.68 13.69L12 11.93l2.31 1.76-.88-2.85L15.75 9h-2.84L12 6.19 11.09 9H8.25l2.31 1.84-.88 2.85zM20 10c0-4.42-3.58-8-8-8s-8 3.58-8 8c0 2.03.76 3.87 2 5.28V23l6-2 6 2v-7.72c1.24-1.41 2-3.25 2-5.28zm-8-6c3.31 0 6 2.69 6 6s-2.69 6-6 6-6-2.69-6-6 2.69-6 6-6z'/%3E%3C/svg%3E"); }
.ab-i-star   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 17.27L18.18 21l-1.64-7.03L22 9.24l-7.19-.61L12 2 9.19 8.63 2 9.24l5.46 4.73L5.82 21z'/%3E%3C/svg%3E"); }
.ab-i-layers { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M11.99 18.54l-7.37-5.73L3 14.07l9 7 9-7-1.63-1.27-7.38 5.74zM12 16l7.36-5.73L21 9l-9-7-9 7 1.63 1.27L12 16z'/%3E%3C/svg%3E"); }
.ab-i-pin    { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z'/%3E%3C/svg%3E"); }
.ab-i-plan   { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 3h-4.18C14.4 1.84 13.3 1 12 1c-1.3 0-2.4.84-2.82 2H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V5c0-1.1-.9-2-2-2zm-7 0c.55 0 1 .45 1 1s-.45 1-1 1-1-.45-1-1 .45-1 1-1zm2 14H7v-2h7v2zm3-4H7v-2h10v2zm0-4H7V7h10v2z'/%3E%3C/svg%3E"); }
.ab-i-trophy { --i: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M19 5h-2V3H7v2H5c-1.1 0-2 .9-2 2v1c0 2.55 1.92 4.63 4.39 4.94.63 1.5 1.98 2.63 3.61 2.96V19H7v2h10v-2h-4v-3.1c1.63-.33 2.98-1.46 3.61-2.96C19.08 12.63 21 10.55 21 8V7c0-1.1-.9-2-2-2zM5 8V7h2v3.82C5.84 10.4 5 9.3 5 8zm14 0c0 1.3-.84 2.4-2 2.82V7h2v1z'/%3E%3C/svg%3E"); }

/* trust bar */
.about .ab-trust {
	display: grid;
	gap: 22px;
	padding: 16px 28px;
	background: var(--ab-sand);
	border: 1px solid var(--ab-line);
	border-radius: var(--ab-r);
}
.ab-trust li { display: flex; align-items: center; gap: 14px; line-height: 1.35; }
.ab-trust .ab-ico { width: 46px; height: 46px; }
.ab-trust strong { display: block; color: var(--ab-forest); }
.ab-trust span { display: block; color: var(--ab-ink); font-size: .8125rem; }

/* two-column text + photo blocks (intro, team, pavers) */
.ab-split { display: grid; gap: 28px; align-items: center; }
.ab-fig { margin: 0; }
.ab-fig img { width: 100%; border-radius: var(--ab-r); box-shadow: var(--ab-shadow); }
.ab-fig figcaption { margin-top: 10px; color: var(--ab-ink); font-size: .8125rem; text-align: center; }
.ab-fig--frame { max-width: 400px; justify-self: center; padding: 12px; background: var(--ab-sand); border: 1px solid var(--ab-line); border-radius: var(--ab-r); }
.ab-fig--frame img { border-radius: 6px; box-shadow: none; }

/* "why choose us" cards and process steps */
.ab-cards, .ab-steps, .ab-cols { display: grid; gap: 20px; }
.ab-card {
	padding: 26px 24px;
	background: #fff;
	border: 1px solid var(--ab-line);
	border-top: 4px solid var(--ab-green);
	border-radius: var(--ab-r);
	box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
}
.ab-card { display: grid; grid-template-columns: 52px 1fr; gap: 14px 16px; align-items: center; }
.ab-card h3 { margin: 0; }
.ab-card p { grid-column: 1 / -1; color: var(--ab-ink); font-size: .9375rem; }

.ab-panel { padding: 32px 22px; background: var(--ab-sand); border: 1px solid var(--ab-line); border-radius: var(--ab-r); }
.ab-steps { counter-reset: step; }
.ab-steps li { counter-increment: step; padding: 22px; background: #fff; border-radius: var(--ab-r); box-shadow: 0 1px 3px rgba(0, 0, 0, .08); }
.ab-steps li:before {
	content: counter(step);
	display: grid;
	place-items: center;
	width: 40px;
	height: 40px;
	margin-bottom: 14px;
	border-radius: 50%;
	background: var(--ab-moss);
	color: var(--ab-yellow);
	font: 1.5rem/1 'Londrina Solid', cursive;
}
.ab-steps p { color: var(--ab-ink); font-size: .9375rem; }

/* check list, text link, pill links */
.about .ab-checks { margin: 0 0 1.9em; }
.ab-checks li { position: relative; margin: 0 0 .55em; padding-left: 30px; }
.ab-checks li:before {
	content: "";
	position: absolute;
	left: 0;
	top: .3em;
	width: 20px;
	height: 20px;
	background: var(--ab-leaf);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-2 15l-5-5 1.41-1.41L10 14.17l7.59-7.59L19 8l-9 9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.ab-link { color: var(--ab-forest); font-weight: 700; text-decoration: underline; text-underline-offset: 3px; }
.ab-link:hover { color: #000; }

.ab-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ab-chips a {
	display: inline-flex;
	align-items: center;
	min-height: 40px;
	padding: 0 16px;
	background: #fff;
	border: 1px solid var(--ab-line);
	border-radius: 999px;
	color: var(--ab-forest);
	font-size: .875rem;
	font-weight: 700;
	line-height: 1.3;
	text-decoration: none;
}
/* alternating look: every other pill is filled, hover/focus swaps the two styles */
.ab-chips li:nth-child(even) a, .ab-chips a:hover, .ab-chips a:focus-visible { background: var(--ab-moss); border-color: var(--ab-moss); color: #fff; text-decoration: none; }
.ab-chips li:nth-child(even) a:hover, .ab-chips li:nth-child(even) a:focus-visible { background: #fff; color: var(--ab-forest); }

/* buttons (same look as the site's .a_button, bigger tap target) */
.ab-actions { display: flex; flex-wrap: wrap; gap: 12px; }
.ab-btn {
	flex: 1 1 100%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 0 26px;
	border: 2px solid #000;
	border-radius: 5px;
	background: var(--ab-yellow);
	color: #000;
	font: 1.25rem/1 'Londrina Solid', cursive;
	letter-spacing: 1.2px;
	text-align: center;
	text-decoration: none;
	text-transform: uppercase;
}
.ab-btn:hover { background: #826e54; border-color: #826e54; color: #fff; text-decoration: none; }
.ab-btn--dark { background: var(--ab-forest); border-color: var(--ab-forest); color: #fff; }
.ab-btn--dark:hover { background: #000; border-color: #000; }
.ab-btn--ghost { background: transparent; border-color: #fff; color: #fff; }
.ab-btn--ghost:hover { background: #fff; border-color: #fff; color: var(--ab-forest); }

/* closing call to action */
.ab-cta {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	display: grid;
	justify-items: center;
	gap: 18px;
	padding: 38px 24px;
	background: #0b3b07;
	border-radius: var(--ab-r);
	color: #e5e1c2;
	text-align: center;
}
/* blurred slideshow photo (already cached by the site) under a green tint */
.ab-cta:before, .ab-cta:after { content: ""; position: absolute; z-index: -1; }
.ab-cta:before {
	inset: -20px; /* hide the soft edges the blur creates */
	background: url(images/slider/slide1.webp) center / cover;
	filter: blur(6px);
}
.ab-cta:after { inset: 0; background: linear-gradient(135deg, rgba(11, 59, 7, .8), rgba(66, 98, 58, .7)); }
.ab-cta h2 { margin: 0; color: #fff; }
.ab-cta h2:after { display: none; }
.ab-cta p { max-width: 620px; }
.ab-cta .ab-actions { justify-content: center; }
.ab-cta .ab-btn--ghost:focus-visible, .ab-cta .ab-btn:focus-visible { outline-color: #fff; }
.ab-hours { font-size: .875rem; }

@media (prefers-reduced-motion: no-preference) {
	.ab-btn, .ab-chips a { transition: background-color .2s, border-color .2s, color .2s; }
}

@container (max-width: 599px) {
	.ab-cta:before { background-image: url(images/slider-mob/slide1.webp); }
}
@container (min-width: 600px) {
	.ab-split { grid-template-columns: 1fr 1fr; gap: 40px; }
	.ab-split--rev .ab-fig { order: -1; }
	.ab-trust, .ab-steps, .ab-cards, .ab-cols { grid-template-columns: repeat(2, 1fr); }
	.ab-cols { gap: 32px; }
	.ab-panel { padding: 36px 32px; }
	.ab-card { display: block; }
	.ab-card .ab-ico { margin-bottom: 16px; }
	.ab-card h3 { margin-bottom: .35em; }
	.ab-btn { flex: 0 0 auto; }
}
@container (min-width: 900px) {
	.ab-trust, .ab-steps { grid-template-columns: repeat(4, 1fr); }
	.ab-cards { grid-template-columns: repeat(3, 1fr); }
	.ab-cta { padding: 48px 40px; }
}