/* /projects/ — public styles.

   Everything is scoped under #ecoarmor, the convention assets/ecoarmor.css already
   uses. That is deliberate: the live site still runs the old pestcontrolagency child
   theme while the navy/brass redesign sits on staging, so these rules have to look
   right on either without fighting the theme's global selectors.

   Tokens are declared locally with fallbacks, so if ecoarmor.css IS present its values
   win and this file inherits the real design system for free. */

#ecoarmor.eap-public {
	--eap-deep: var(--deep, #172b3b);
	--eap-navy: var(--navy, #2e4256);
	--eap-ink: var(--ink, #263a4b);
	--eap-cream: var(--cream, #f3efe5);
	--eap-paper: var(--paper, #fbfaf6);
	--eap-brass: var(--brass-on-light, #836846);
	--eap-brass-d: var(--brass-on-dark, #c0a888);
	--eap-sage: var(--sage-on-light, #647066);
	--eap-line: #d9d3c4;

	color: var(--eap-ink);
	background: var(--eap-paper);
}

#ecoarmor.eap-public *,
#ecoarmor.eap-public *::before,
#ecoarmor.eap-public *::after { box-sizing: border-box; }

#ecoarmor .eap-wrap {
	max-width: 68rem;
	margin: 0 auto;
	padding: 0 1.25rem;
}

#ecoarmor .eap-body { max-width: 48rem; }

/* ---------- hero ---------- */

#ecoarmor .eap-hero {
	background: var(--eap-deep);
	color: var(--eap-paper);
	padding: 3rem 0 3.2rem;
}

#ecoarmor .eap-eyebrow {
	display: block;
	font: 700 .78rem/1.3 "Montserrat", system-ui, sans-serif;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--eap-brass-d);
	margin-bottom: .6rem;
}

#ecoarmor .eap-hero h1 {
	margin: 0 0 .7rem;
	font: 700 clamp(1.7rem, 4.4vw, 2.6rem)/1.15 "Montserrat", system-ui, sans-serif;
	color: var(--eap-paper);
	text-wrap: balance;
}

#ecoarmor .eap-hero .eap-lede {
	margin: 0;
	max-width: 44rem;
	font-size: 1.06rem;
	line-height: 1.6;
	opacity: .92;
}

#ecoarmor .eap-byline { margin: 0; font-size: .95rem; opacity: .9; }
#ecoarmor .eap-byline a { color: var(--eap-brass-d); }

/* ---------- filter ---------- */

#ecoarmor .eap-filter {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-end;
	gap: 1rem;
	margin: 2rem 0 2.2rem;
	padding: 1.1rem 1.2rem;
	background: var(--eap-cream);
	border-radius: .55rem;
}

#ecoarmor .eap-filter p { margin: 0; }

#ecoarmor .eap-filter label {
	display: block;
	font: 600 .82rem/1.3 "Montserrat", system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--eap-sage);
	margin-bottom: .3rem;
}

#ecoarmor .eap-filter select {
	min-height: 2.9rem;
	min-width: 13rem;
	padding: .45rem .6rem;
	font-size: max(1rem, 16px);
	color: var(--eap-ink);
	background: #fff;
	border: 1px solid var(--eap-line);
	border-radius: .35rem;
}

#ecoarmor .eap-filter button {
	min-height: 2.9rem;
	padding: .55rem 1.4rem;
	font: 700 .95rem/1 "Montserrat", system-ui, sans-serif;
	color: var(--eap-paper);
	background: var(--eap-navy);
	border: 0;
	border-radius: .35rem;
	cursor: pointer;
}

#ecoarmor .eap-filter button:hover { background: var(--eap-deep); }
#ecoarmor .eap-filter-go { display: flex; align-items: center; gap: 1rem; }
#ecoarmor .eap-filter-go a { font-size: .92rem; color: var(--eap-sage); }

/* ---------- grid ---------- */

#ecoarmor .eap-grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr));
	gap: 1.6rem;
	margin-bottom: 2.5rem;
}

#ecoarmor .eap-cardx {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--eap-line);
	border-radius: .55rem;
	overflow: hidden;
}

#ecoarmor .eap-cardx-img { display: block; line-height: 0; }

#ecoarmor .eap-cardx-img img {
	width: 100%;
	height: 11rem;
	object-fit: cover;
}

#ecoarmor .eap-cardx-body { padding: 1rem 1.1rem 1.3rem; }

#ecoarmor .eap-meta {
	margin: 0 0 .4rem;
	font: 600 .78rem/1.35 "Montserrat", system-ui, sans-serif;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--eap-brass);
}

#ecoarmor .eap-cardx h2 {
	margin: 0 0 .5rem;
	font: 700 1.14rem/1.3 "Montserrat", system-ui, sans-serif;
	text-wrap: balance;
}

#ecoarmor .eap-cardx h2 a { color: var(--eap-navy); text-decoration: none; }
#ecoarmor .eap-cardx h2 a:hover { text-decoration: underline; }
#ecoarmor .eap-cardx p { margin: 0; font-size: .95rem; color: var(--eap-ink); }

/* ---------- single ---------- */

#ecoarmor .eap-body { padding-top: 2.4rem; padding-bottom: 3rem; }
#ecoarmor .eap-body section { margin: 0 0 2.2rem; }

#ecoarmor .eap-body h2 {
	margin: 0 0 .7rem;
	font: 700 1.42rem/1.25 "Montserrat", system-ui, sans-serif;
	color: var(--eap-navy);
}

#ecoarmor .eap-body p { margin: 0 0 1rem; line-height: 1.68; }

#ecoarmor .eap-answer {
	padding: 1.15rem 1.3rem;
	margin: 0 0 2.2rem;
	background: var(--eap-cream);
	border-left: 5px solid var(--eap-brass);
	border-radius: 0 .45rem .45rem 0;
}

#ecoarmor .eap-answer p { margin: 0; font-size: 1.1rem; }

#ecoarmor .eap-panel {
	padding: 1.3rem 1.4rem;
	background: var(--eap-cream);
	border-radius: .5rem;
}

#ecoarmor .eap-panel h2 { margin-top: 0; }
#ecoarmor .eap-panel p:last-child { margin-bottom: 0; }

/* ---------- photos ---------- */

#ecoarmor .eap-photo-grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.1rem;
}

#ecoarmor .eap-photo-grid figure { margin: 0; }

#ecoarmor .eap-photo-grid img {
	width: 100%;
	height: auto;
	border-radius: .45rem;
	display: block;
}

#ecoarmor .eap-photo-grid figcaption {
	margin-top: .45rem;
	font: 600 .8rem/1.3 "Montserrat", system-ui, sans-serif;
	text-transform: uppercase;
	letter-spacing: .06em;
	color: var(--eap-sage);
}

#ecoarmor .eap-referred {
	font-size: .95rem;
	color: var(--eap-sage);
	border-top: 1px solid var(--eap-line);
	padding-top: 1rem;
}

#ecoarmor .eap-next { font-size: 1.02rem; }
#ecoarmor .eap-next a, #ecoarmor .eap-back a { color: var(--eap-navy); }

#ecoarmor .eap-back {
	margin-top: 2rem;
	padding-top: 1.2rem;
	border-top: 1px solid var(--eap-line);
	font-size: .95rem;
}

#ecoarmor .eap-empty { padding: 2.5rem 0 3.5rem; font-size: 1.05rem; }

/* ---------- focus + motion ---------- */

#ecoarmor.eap-public :focus-visible {
	outline: 3px solid var(--eap-navy);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--eap-cream);
}

#ecoarmor .eap-hero :focus-visible {
	outline-color: var(--eap-brass-d);
	box-shadow: 0 0 0 6px var(--eap-deep);
}

@media (prefers-reduced-motion: reduce) {
	#ecoarmor.eap-public *,
	#ecoarmor.eap-public *::before,
	#ecoarmor.eap-public *::after {
		animation-duration: .01ms !important;
		transition-duration: .01ms !important;
	}
}

/* =========================================================================
   EVIDENCE BLOCK — injected into service, city and city×service pages.

   Deliberately NOT scoped under #ecoarmor: this block renders inside the
   normal page content of the live pestcontrolagency theme, which has no
   #ecoarmor wrapper. Every selector is prefixed .eap-evidence instead, and
   every property it sets is one it fully controls, so it cannot leak into
   the surrounding page or be silently restyled by it.
   ========================================================================= */

.eap-evidence {
	--eape-deep: #172b3b;
	--eape-navy: #2e4256;
	--eape-ink: #263a4b;
	--eape-cream: #f3efe5;
	--eape-brass: #836846;
	--eape-sage: #647066;
	--eape-line: #d9d3c4;

	margin: 3rem 0 1rem;
	padding: 2rem 0 0;
	border-top: 3px solid var(--eape-cream);
	color: var(--eape-ink);
	font-family: "Source Sans 3", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
}

.eap-evidence *,
.eap-evidence *::before,
.eap-evidence *::after { box-sizing: border-box; }

.eap-evidence .eap-evidence-h {
	margin: 0 0 .35rem;
	font-family: "Montserrat", system-ui, sans-serif;
	font-weight: 700;
	font-size: clamp(1.3rem, 2.6vw, 1.7rem);
	line-height: 1.2;
	color: var(--eape-navy);
	text-wrap: balance;
}

.eap-evidence .eap-evidence-sub {
	margin: 0 0 1.5rem;
	font-size: .98rem;
	line-height: 1.6;
	color: var(--eape-sage);
	max-width: 44rem;
}

.eap-evidence .eap-evidence-grid {
	display: grid;
	/* auto-FILL, not auto-fit. auto-fit collapses the empty tracks, so a single
	   project stretched to the full content width with a squashed letterbox image —
	   which is the normal case for a long time yet. auto-fill keeps the track, so one
	   card looks like one card. Matches the archive grid above. */
	grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
	gap: 1.4rem;
	margin: 0 0 1.4rem;
}

.eap-evidence .eap-evidence-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--eape-line);
	border-radius: .5rem;
	overflow: hidden;
}

.eap-evidence .eap-evidence-img { display: block; line-height: 0; }

.eap-evidence .eap-evidence-img img {
	width: 100%;
	height: 9.5rem;
	object-fit: cover;
	display: block;
	margin: 0;
}

.eap-evidence .eap-evidence-body { padding: .9rem 1rem 1.1rem; }

.eap-evidence .eap-evidence-meta {
	margin: 0 0 .35rem;
	font-family: "Montserrat", system-ui, sans-serif;
	font-weight: 600;
	font-size: .74rem;
	line-height: 1.35;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: var(--eape-brass);
}

.eap-evidence .eap-evidence-card h3 {
	margin: 0 0 .45rem;
	font-family: "Montserrat", system-ui, sans-serif;
	font-weight: 700;
	font-size: 1.05rem;
	line-height: 1.3;
	text-wrap: balance;
}

.eap-evidence .eap-evidence-card h3 a {
	color: var(--eape-navy);
	text-decoration: none;
}

.eap-evidence .eap-evidence-card h3 a:hover { text-decoration: underline; }

.eap-evidence .eap-evidence-card p {
	margin: 0;
	font-size: .93rem;
	line-height: 1.55;
	color: var(--eape-ink);
}

.eap-evidence .eap-evidence-more {
	margin: 0;
	font-size: .97rem;
}

.eap-evidence .eap-evidence-more a {
	color: var(--eape-navy);
	font-weight: 600;
}

.eap-evidence :focus-visible {
	outline: 3px solid var(--eape-navy);
	outline-offset: 2px;
	box-shadow: 0 0 0 6px var(--eape-cream);
}

/* Status note: shown only when work was NOT completed on the day, so the page cannot
   imply otherwise however the write-up is worded. Deliberately plain, not a warning
   badge — it is a fact about the visit, not a caveat. */
#ecoarmor .eap-status-note {
	margin: 0 0 1.6rem;
	padding: .85rem 1rem;
	background: var(--eap-cream);
	border-left: 4px solid var(--eap-sage);
	border-radius: 0 .4rem .4rem 0;
	font-size: .97rem;
	color: var(--eap-ink);
}