/* ==========================================================================
   /artificial-turf-cleaning-dallas/ — the turf cleaning page.
   Cloned from artificial-turf-cost-dallas.css (verified contrast) with the prefix renamed.
   Loads AFTER /assets/css/base.css (shared chrome + tokens). Every colour here
   is either a base.css token or one of the two shades the sibling pages
   (/pet-turf/, /putting-greens/) already use for panels: #121212 card,
   #191919 tile, #8ee000 bright lime, #54780A lime rule.

   Contrast measured against the panel the text actually sits on:
     #FFFFFF on #121212 ...... 18.0 : 1
     #C9CFD5 on #121212 ...... 11.0 : 1   (spec values, tile body copy)
     #9AA0A6 on #121212 ....... 7.1 : 1   (lede / secondary copy)
     #8EE000 on #121212 ...... 11.4 : 1   (lime headings, links)
     #8EE000 on #191919 ...... 10.7 : 1
     #0A0A0A on #84BD00 ....... 8.7 : 1   (dark text on the lime button;
                                           white on lime is 2.27:1 — never used)
     #54780A on #121212 ....... 3.6 : 1   (every functional boundary: the spec
                                           table frame + header rule, the
                                           spec-sheet button, the closing CTA)
     #FFFFFF on the hero ...... 7.7 : 1   (worst case: the overlay is 70% opaque
                                           #060A04, so even a pure-white pixel
                                           of the photo lands at rgb(81,84,79))

   The one exception is the 1px #262626 outline on the choose/product cards
   (1.24:1). That is decorative — the card is identified by its #121212 panel,
   not by the hairline, nothing about it is interactive, and it is the same
   treatment /pet-turf/ uses on .pt-problem__card (#1F1F1F). WCAG 1.4.11 covers
   boundaries needed to IDENTIFY a control; it does not ask for a 3:1 hairline
   around a static panel, and forcing one here would shout over the quiet dark
   surface both sibling pages are built on.
   ========================================================================== */

.cl-main {
	font-family: var(--gg-font);
	font-size: 15px;
	font-weight: 400;
	line-height: 1.6;
	color: #fff;
}
/* zero-specificity reset so the component rules below always win */
.cl-main :where(h1, h2, h3, p, figure, ul, table, caption) { margin: 0; }
.cl-main :where(ul) { padding: 0; list-style: none; }
.cl-main img { display: block; max-width: 100%; height: auto; }

/* ---------- shared bits ---------- */

.cl-shell {
	max-width: 1180px;
	margin: 0 auto;
}

.cl-section {
	margin: 96px 0;
	padding: 0 30px;
}
.cl-section--last { margin-bottom: 110px; }

/* lime pill, same shape as the sibling pages */
.cl-pill {
	display: inline-block;
	padding: 6px 18px;
	border-radius: 999px;
	background: rgba(132, 189, 0, .14);
	border: 1px solid rgba(132, 189, 0, .45);
	color: #fff;
	font-size: 12.5px;
	font-weight: 600;
	letter-spacing: .6px;
}

.cl-lime { color: #8ee000; }

.cl-h2 {
	margin-top: 18px;
	font-size: 38px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.5px;
	color: #fff;
}
.cl-h2--sm { font-size: 30px; }

.cl-lede {
	margin-top: 16px;
	max-width: 68ch;
	font-size: 16px;
	line-height: 1.65;
	color: #9AA0A6;
}

.cl-head { margin-bottom: 40px; }
.cl-head--center { text-align: center; }
.cl-head--center .cl-lede { margin-left: auto; margin-right: auto; }

/* buttons */
.cl-btn {
	display: inline-block;
	font-family: var(--gg-font);
	font-size: 14px;
	font-weight: 700;
	line-height: 1.1;
	padding: 16px 25px;
	border-radius: 8px;
	text-decoration: none;
	text-align: center;
	transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}
.cl-btn--lime { background-color: #84BD00; color: #0A0A0A; }
.cl-btn--lime:hover,
.cl-btn--lime:focus { background-color: #8ee000; color: #0A0A0A; }
.cl-btn--ghost { background-color: transparent; color: #fff; border: 1px solid #fff; }
.cl-btn--ghost:hover,
.cl-btn--ghost:focus { background-color: rgba(255, 255, 255, .12); }

/* spec-sheet button: quieter than the lime CTA, still a real 3:1 border */
.cl-btn--sheet {
	background-color: rgba(132, 189, 0, .10);
	border: 1px solid #54780A;
	color: #8ee000;
	padding: 13px 20px;
	/* the label carries the product name so it still makes sense out of
	   context; balance keeps the longest one from breaking off a lone "(PDF)" */
	text-wrap: balance;
}
.cl-btn--sheet:hover,
.cl-btn--sheet:focus { background-color: #84BD00; border-color: #84BD00; color: #0A0A0A; }

/* text links */
.cl-link {
	display: inline-block;
	font-size: 14px;
	font-weight: 700;
	color: #8ee000;
	text-decoration: none;
	border-bottom: 1px solid rgba(142, 224, 0, .45);
	padding-bottom: 1px;
	transition: border-color .3s ease, color .3s ease;
}
.cl-link:hover,
.cl-link:focus { border-bottom-color: #8ee000; }
.cl-link::after { content: ' \2192'; }

.cl-inline { color: #8ee000; text-decoration: underline; text-underline-offset: 3px; }

/* ==========================================================================
   HERO
   ========================================================================== */
.cl-hero {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 520px;
	padding: 96px 30px 88px;
	background-color: #12220F;
	background-image: url('/assets/images/bg-green.webp');
	background-position: center 62%;
	background-repeat: no-repeat;
	background-size: cover;
	overflow: hidden;
}
/* the ground the hero type is measured against: the overlay takes the photo
   down to roughly #0E1409, so #fff sits well past 12:1 anywhere on it */
.cl-hero::before {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(6, 10, 4, .82) 0%, rgba(6, 10, 4, .70) 45%, rgba(6, 10, 4, .88) 100%);
}
.cl-hero__inner {
	position: relative;
	width: 100%;
	max-width: 760px;
	text-align: center;
}
.cl-hero__title {
	margin-top: 22px;
	font-size: 56px;
	font-weight: 900;
	line-height: 1.05;
	letter-spacing: -1.5px;
	color: #fff;
}
.cl-hero__sub {
	margin: 22px auto 0;
	max-width: 620px;
	font-size: 17px;
	line-height: 1.6;
	color: #D6DBE0;
}
.cl-hero__btns {
	margin-top: 32px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
}
.cl-trustbar {
	margin-top: 34px;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 10px;
}
.cl-trustbar li {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 16px;
	border-radius: 999px;
	background: rgba(255, 255, 255, .07);
	font-size: 13px;
	font-weight: 600;
	color: #e4e7ea;
}
.cl-trustbar li::before {
	content: '';
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #8ee000;
	flex: none;
}

/* ==========================================================================
   HOW TO CHOOSE
   ========================================================================== */
.cl-choose {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.cl-choose__card {
	background-color: #121212;
	border: 1px solid #262626;
	border-radius: var(--gg-radius-lg);
	padding: 28px 28px 24px;
	display: flex;
	flex-direction: column;
}
.cl-choose__case {
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 1px;
	text-transform: uppercase;
	color: #8ee000;
}
.cl-choose__pick {
	margin-top: 10px;
	font-size: 24px;
	font-weight: 800;
	line-height: 1.2;
	color: #fff;
}
.cl-choose__note {
	margin-top: 12px;
	font-size: 15px;
	line-height: 1.65;
	color: #C9CFD5;
	flex: 1 1 auto;
}
.cl-choose__links {
	margin-top: 20px;
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
}

/* ==========================================================================
   THE RANGE — product cards + spec tables
   ========================================================================== */
.cl-product {
	display: flex;
	gap: 32px;
	/* stretch, not flex-start: the photo becomes a full-height panel beside the
	   spec table instead of a small square with dead space under it */
	align-items: stretch;
	background-color: #121212;
	border: 1px solid #262626;
	border-radius: var(--gg-radius-lg);
	padding: 28px;
	/* the header is fixed (123px desktop) / sticky (70px bar) — keep the
	   anchor jumps from the "how to choose" cards clear of it */
	scroll-margin-top: 145px;
}
.cl-product + .cl-product { margin-top: 24px; }

.cl-product__media { flex: 0 0 300px; display: flex; }
.cl-product__media img {
	width: 100%;
	height: 100%;
	min-height: 300px;
	object-fit: cover;
	border-radius: 16px;
}
.cl-product__body { flex: 1 1 auto; min-width: 0; }

.cl-product__kind {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.4px;
	text-transform: uppercase;
	color: #8ee000;
}
.cl-product__name {
	margin-top: 8px;
	font-size: 30px;
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -.4px;
	color: #fff;
}
.cl-product__desc {
	margin-top: 12px;
	max-width: 62ch;
	font-size: 15.5px;
	line-height: 1.65;
	color: #9AA0A6;
}
.cl-product__links {
	margin-top: 22px;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 14px 22px;
}

/* ---- the spec table ---- */
.cl-tablewrap {
	margin-top: 22px;
	border: 1px solid #54780A;
	border-radius: 14px;
	/* clips the zebra rows to the rounded corners */
	overflow: hidden;
	background-color: #191919;
}
.cl-spec {
	width: 100%;
	border-collapse: collapse;
	table-layout: fixed;
	font-size: 15px;
}
/* the caption repeats the product name for screen readers and for anything
   extracting the table out of the page; it is not shown twice visually */
.cl-spec__caption {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
}
.cl-spec thead th {
	background-color: #101a02;
	font-size: 12.5px;
	font-weight: 700;
	letter-spacing: 1.2px;
	text-transform: uppercase;
	text-align: left;
	color: #8ee000;
	padding: 13px 20px;
	border-bottom: 1px solid #54780A;
}
.cl-spec thead th + th { color: #fff; }
/* table-layout is fixed, so the column widths come from this first row alone */
.cl-spec thead th:first-child { width: 250px; }
.cl-spec tbody th,
.cl-spec tbody td {
	padding: 14px 20px;
	text-align: left;
	vertical-align: top;
	overflow-wrap: break-word;
}
.cl-spec tbody tr + tr th,
.cl-spec tbody tr + tr td { border-top: 1px solid rgba(247, 248, 237, .12); }
.cl-spec tbody th {
	font-weight: 500;
	color: #9AA0A6;
}
.cl-spec tbody td {
	font-weight: 700;
	color: #fff;
}
.cl-spec tbody tr:hover th { color: #C9CFD5; }

/* ==========================================================================
   WHAT THE NUMBERS MEAN
   ========================================================================== */
.cl-explain {
	background-color: #121212;
	border: 1px solid #262626;
	border-radius: var(--gg-radius-lg);
	padding: 48px 40px 44px;
}
.cl-explain .cl-head { margin-bottom: 36px; }
.cl-explain__grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 20px;
}
.cl-explain__tile {
	background-color: #191919;
	border-radius: 16px;
	padding: 24px 24px 26px;
	border-left: 3px solid #54780A;
}
.cl-explain__title {
	font-size: 19px;
	font-weight: 800;
	line-height: 1.2;
	color: #8ee000;
}
.cl-explain__body {
	margin-top: 10px;
	font-size: 15px;
	line-height: 1.65;
	color: #C9CFD5;
}

/* ==========================================================================
   CLOSING CTA
   ========================================================================== */
.cl-cta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px;
	background-color: #121212;
	border: 1px solid #54780A;
	border-radius: var(--gg-radius-lg);
	padding: 44px 40px;
}
.cl-cta__copy { flex: 1 1 420px; min-width: 0; }
.cl-cta__copy .cl-lede { max-width: 56ch; }
.cl-cta__actions {
	flex: 0 0 auto;
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
}

/* ==========================================================================
   Entrance animations (same pattern as the sibling pages)
   ========================================================================== */
@media (prefers-reduced-motion: no-preference) {
	.cl-main [data-gg-anim] { opacity: 0; transition: opacity .7s ease, transform .7s ease; }
	.cl-main [data-gg-anim="up"] { transform: translateY(28px); }
	.cl-main [data-gg-anim].gg-in { opacity: 1; transform: none; }
	/* The product cards are anchor targets for the "See the specs" links. A
	   translate on an un-revealed card shifts it 28px AFTER the browser has
	   computed the jump, landing it under the fixed header — so these fade
	   only, and scroll-margin-top can be trusted. */
	.cl-main .cl-product[data-gg-anim="up"] { transform: none; }
}

/* ==========================================================================
   Responsive
   ========================================================================== */
@media (max-width: 1024px) {
	.cl-section { margin: 76px 0; padding: 0 20px; }
	.cl-hero { padding: 72px 20px 68px; min-height: 460px; }
	.cl-hero__title { font-size: 44px; letter-spacing: -1px; }
	.cl-h2 { font-size: 32px; }
	.cl-btn { padding: 13px 20px; }
	.cl-product { gap: 24px; padding: 24px; scroll-margin-top: 90px; }
	.cl-product__media { flex-basis: 220px; }
	.cl-explain { padding: 40px 28px 36px; }
	.cl-cta { padding: 36px 28px; }
}

@media (max-width: 900px) {
	.cl-choose { grid-template-columns: 1fr; }
	.cl-explain__grid { grid-template-columns: 1fr; }
	/* the product image becomes a banner above the copy rather than a
	   squeezed column beside it */
	.cl-product { flex-direction: column; gap: 22px; }
	.cl-product__media { flex: 0 0 auto; width: 100%; }
	.cl-product__media img { aspect-ratio: 16 / 7; height: auto; min-height: 0; }
	/* labels get a proportional share again once the table has the full card
	   width to itself */
	.cl-spec thead th:first-child { width: 38%; }
}

@media (max-width: 767px) {
	.cl-main { font-size: 16px; }
	.cl-section { margin: 64px 0; }
	.cl-section--last { margin-bottom: 80px; }
	.cl-hero { min-height: 0; padding: 56px 20px 60px; }
	.cl-hero__title { font-size: 34px; letter-spacing: -.8px; }
	.cl-hero__sub { font-size: 16px; }
	.cl-hero__btns { margin-top: 26px; }
	.cl-hero__btns .cl-btn { flex: 1 1 100%; }
	.cl-h2 { font-size: 27px; }
	.cl-h2--sm { font-size: 25px; }
	.cl-head { margin-bottom: 28px; }
	.cl-choose__card { padding: 24px 20px 22px; border-radius: 18px; }
	.cl-choose__pick { font-size: 21px; }

	.cl-product { padding: 20px 18px 22px; border-radius: 18px; }
	.cl-product__media img { aspect-ratio: 16 / 9; border-radius: 12px; }
	.cl-product__name { font-size: 25px; }
	.cl-product__desc { font-size: 15px; }
	.cl-product__links { gap: 14px; }
	.cl-product__links .cl-btn--sheet { width: 100%; }

	.cl-tablewrap { margin-top: 20px; border-radius: 12px; }

	.cl-explain { padding: 32px 20px 30px; border-radius: 18px; }
	.cl-explain__tile { padding: 22px 20px; border-radius: 14px; }

	.cl-cta { padding: 32px 20px; gap: 24px; border-radius: 18px; }
	.cl-cta__actions { width: 100%; }
	.cl-cta__actions .cl-btn { flex: 1 1 100%; }
}

/* ==========================================================================
   Spec tables on a phone
   --------------------------------------------------------------------------
   Below 560px there is not enough width for two readable columns: at 390px a
   two-column split either wraps every label ("Face / weight") or squeezes the
   values into three lines. So each row becomes a stacked pair — label above
   value, both getting the full card width — while the header row stays a real,
   visible header bar. The <table>/<thead>/<th scope> markup is untouched, and
   every element carries its explicit ARIA role, so changing `display` here
   costs neither the accessibility tree nor the machine-readability that makes
   this page's specs extractable.
   ========================================================================== */
@media (max-width: 560px) {
	.cl-spec,
	.cl-spec thead,
	.cl-spec tbody,
	.cl-spec tr,
	.cl-spec tbody th,
	.cl-spec tbody td { display: block; }

	/* the header bar takes the same shape as the rows below it — the column
	   label on top, the thing it names underneath — so a product name of any
	   length lands the same way */
	.cl-spec thead tr {
		display: block;
		padding: 12px 16px 13px;
		background-color: #101a02;
		border-bottom: 1px solid #54780A;
	}
	.cl-spec thead th {
		display: block;
		width: auto;
		padding: 0;
		border-bottom: none;
	}
	.cl-spec thead th + th {
		margin-top: 3px;
		font-size: 16px;
		font-weight: 800;
		letter-spacing: -.2px;
		line-height: 1.25;
		text-transform: none;
	}

	.cl-spec tbody tr { padding: 13px 16px; }
	.cl-spec tbody tr + tr { border-top: 1px solid rgba(247, 248, 237, .12); }
	.cl-spec tbody tr + tr th,
	.cl-spec tbody tr + tr td { border-top: none; }

	.cl-spec tbody th {
		padding: 0;
		font-size: 13.5px;
		font-weight: 600;
		letter-spacing: .3px;
		color: #9AA0A6;
	}
	.cl-spec tbody td {
		padding: 2px 0 0;
		font-size: 17px;
		font-weight: 700;
		line-height: 1.35;
		color: #fff;
	}
}

/* Phones get a 768 px hero: a 660x913 portrait crop (77 KB vs the 342 KB JPG),
   below 480 px only (wider screens would upscale it). The hero is this page's
   LCP element and is preloaded in head-post with matching media queries. */
@media (max-width: 479px) { .cl-hero { background-image: url('/assets/images/bg-green-768.webp'); } }


/* FAQ — same accordion as the service pages */
.cl-faq__list { margin: 28px auto 0; max-width: 820px; }
.cl-faq__list .faq-item { margin-bottom: 10px; border: 1px solid #54780A; border-radius: 10px; overflow: hidden; background: #191919; }
.cl-faq__list h3 { font-size: inherit; margin: 0; }
.cl-faq__list .faq-button { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; background: #191919; border: none; color: #fff; font-family: var(--gg-font); font-size: 1.05rem; font-weight: 700; line-height: 1.3; text-align: left; padding: 16px 20px; cursor: pointer; }
.cl-faq__list .faq-icon { flex: none; color: #8EE000; font-size: 22px; font-weight: 600; line-height: 1; }
.cl-faq__list .faq-content { max-height: 0; overflow: hidden; transition: max-height .3s ease-out; }
.cl-faq__list .faq-body { padding: 0 20px; color: #C9CFD5; font-size: 0.95rem; line-height: 1.65; }
.cl-faq__list .faq-body.active { padding: 4px 20px 18px; }
.cl-faq__list .faq-body a { color: #8EE000; text-decoration: underline; text-underline-offset: 3px; }

/* testimonial — #FFFFFF on #121212 = 18:1; #9AA0A6 caption = 7.1:1 */
.cl-quote { margin: 28px auto 0; max-width: 820px; padding: 32px 36px; background: #121212; border: 1px solid #262626; border-left: 4px solid #84BD00; border-radius: 14px; }
.cl-quote__text { margin: 0; font-size: 1.25rem; line-height: 1.55; font-weight: 500; color: #fff; }
.cl-quote__text::before { content: "\201C"; color: #8EE000; margin-right: 2px; }
.cl-quote__text::after { content: "\201D"; color: #8EE000; margin-left: 2px; }
.cl-quote__who { margin-top: 14px; color: #9AA0A6; font-size: 0.95rem; font-weight: 600; }
.cl-source { font-size: 0.9rem; margin-top: 10px; }
.cl-after { margin-top: 26px; }

/* other areas */
.cl-areas { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 22px; margin-top: 34px; }
.cl-areas__label { color: #9AA0A6; font-weight: 700; font-size: 0.9rem; letter-spacing: .08em; text-transform: uppercase; }
.cl-areas ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 22px; }
@media (max-width: 760px) { .cl-quote { padding: 24px 22px; } .cl-quote__text { font-size: 1.1rem; } }
.cl-choose__sep { color: #9AA0A6; }
.cl-hero__title .cl-lime { white-space: nowrap; } /* H2 highlights may wrap: on phones a nowrap phrase overflowed the screen */
.cl-hero__title { text-wrap: balance; }
.cl-trustbar li { text-wrap: balance; }
@media (max-width: 767px) { .cl-choose__sep { display: none; } }

/* three-column source table: let the figure column breathe on desktop */
@media (min-width: 761px) { .cl-spec td:nth-child(2) { width: 52%; } }


/* ==========================================================================
   Turf cleaning page additions (2026-10-14)
   ========================================================================== */
.cl-main :where(dl, dd) { margin: 0; }
/* the H1 never breaks inside "Dallas–Fort Worth" (it split at the en dash on phones) */
.cl-nowrap { white-space: nowrap; }

/* the fifth "what a visit covers" tile spans both columns instead of
   sitting alone in the left one */
.cl-explain__tile--wide { grid-column: 1 / -1; }

/* how often: two schedules side by side, a cadence column and a task column.
   #8EE000 on #121212 = 11.4:1, #C9CFD5 on #121212 = 11.0:1. The lime outline
   on the second card is #54780A (3.6:1), the same rule the closing CTA uses. */
.cl-routine { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.cl-routine__card { background-color: #121212; border: 1px solid #262626; border-radius: var(--gg-radius-lg); padding: 28px 28px 8px; }
.cl-routine__card--pro { border-color: #54780A; }
.cl-routine__who { font-size: 12.5px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; color: #8ee000; }
.cl-routine__title { margin-top: 10px; font-size: 24px; font-weight: 800; line-height: 1.2; color: #fff; }
.cl-routine__list { margin-top: 18px; }
.cl-routine__row { display: grid; grid-template-columns: 112px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid rgba(247, 248, 237, .12); }
.cl-routine__when { padding-top: 2px; font-size: 12.5px; font-weight: 700; letter-spacing: .8px; text-transform: uppercase; color: #8ee000; }
.cl-routine__what { font-size: 15px; line-height: 1.6; color: #C9CFD5; }

/* areas: the shared chips, at a full 44px touch height on this page */
.cl-where { margin-top: 36px; }
.cl-where__label { margin-bottom: 14px; font-size: 13px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: #9AA0A6; }
.cl-where .gg-chip { min-height: 44px; font-size: 14px; }

@media (max-width: 900px) {
	.cl-routine { grid-template-columns: 1fr; }
}
@media (max-width: 767px) {
	.cl-routine__card { padding: 24px 20px 4px; border-radius: 18px; }
	.cl-routine__title { font-size: 21px; }
	.cl-routine__row { grid-template-columns: 1fr; gap: 4px; padding: 14px 0; }
	.cl-where { margin-top: 30px; }
}