/*
 * The demo kit's brand layer. Loaded last on every page (src/data/styles.ts), so it wins over the
 * template's root/local/critical/page CSS without !important. The client's colours are the
 * `:root` tokens below and root.css's --primary/--secondary (set from palette.json): the brand
 * accent (--tbGold; for H&L the green of their logo's H&L, #00f000, deepened to #2bd12f) fills buttons
 * and marks things; text on it is --tbOnAccent (their black ink, 9:1). On
 * light grounds text uses a dark green, --primary #067a18 (5.5:1). Ink is the logo's black #0a0a0a; on it the
 * phone and toppers use the logo's bright green (--tbPhone).
 */

:root {
	--tbGold: #2bd12f;
	--tbInk: #0a0a0a;
	--tbOnAccent: #0a0a0a;
	--tbPhone: #3fe03a;
	--tbPrimaryOnDark: var(--tbPhone);
	/* The CTA band's and footer's ground and its rules: the template's near-black, which suits a black or
	   near-black ink. A coloured ink sets its own (Chapman's navy: #07142c, rules #1c2b47) */
	--tbDark: #0f1110;
	--tbDarkLine: #2a2d2b;
	/* The hero photo's shade, top and middle stops. A light photo under the topper takes more
	   (Jack and Sons: 0.4 and 0.6, the gold topper was unreadable over a white house at 390) */
	--tbHeroShadeTop: 0.15;
	--tbHeroShadeMid: 0.55;
}

/* The CTA band and footer on --tbDark (root.css hard-codes #111418 and #2d2f2e on them) */
#cta-2293,
#cs-footer-2293 {
	background-color: var(--tbDark);
}
#cta-2293 {
	border-bottom-color: var(--tbDarkLine);
}
#cta-2293 .cs-wrapper {
	border-color: var(--tbDarkLine);
}
#cs-footer-2293 .cs-subscribe-group {
	border-left-color: var(--tbDarkLine);
}
#cs-footer-2293 .cs-bottom:before,
#cs-footer-2293 .cs-ul:before,
#cs-footer-2293 .cs-subscribe-group:before {
	background: var(--tbDarkLine);
}

/* Buttons: the accent with --tbOnAccent text (ink on a gold brand, white on a red one); dark with white text on hover.
   Label centred: the template's space-between pushes a lone label to the left edge whenever
   the button is wider than its text (the header's min-width, the full-width form button). */
.cs-button-solid,
#cs-navigation .cs-button-solid {
	justify-content: center;
	color: var(--tbOnAccent);
	background-color: var(--tbGold);
	box-shadow: 4px 4px 0 0 var(--tbInk);
}
.cs-button-solid .cs-icon path {
	fill: currentColor;
}
.cs-button-solid:hover,
#cs-navigation .cs-button-solid:hover {
	color: #fff;
	background-color: var(--tbInk);
	box-shadow: 4px 4px 0 0 var(--tbGold);
}
/* On the dark CTA band the hover ink would vanish into the ground: keep the gold, darken the shadow */
#cta-2293 .cs-button-solid:hover {
	color: var(--tbInk);
	background-color: #fff;
}

/* Phone number: gold on dark backgrounds (hero, CTA band, footer) */
.tb-phone {
	font-weight: 700;
	text-decoration: none;
	color: var(--tbPhone);
}
#cta-2293 .cs-link.tb-phone {
	font-weight: 700;
	color: var(--tbPhone);
}
#cta-2293 .cs-text .tb-phone {
	font-size: inherit;
	white-space: nowrap;
}
#cta-2293 .cs-topper,
#hero-2349 .cs-topper {
	color: var(--tbPrimaryOnDark);
}

/* Home H1 = topper (home.ts hero.topper: "trade · town") + title as two spans, laid out as the template's two
   separate elements were: a flex column with .cs-content's row gap, body font for the topper,
   the template's heading face for the title. */
#hero-2349 .tb-hero-h1 {
	display: flex;
	flex-direction: column;
	row-gap: inherit;
	margin: 0;
	font-family: inherit;
	text-transform: none;
}
#hero-2349 .tb-hero-h1 .cs-title {
	font-family: "Boldonse", "Arial", sans-serif;
	font-size: clamp(2rem, 5.2vw, 4.25rem);
	line-height: 1.35em;
	text-transform: uppercase;
}
/* Overpass draws its middle dot right of centre; -0.1em evens the gaps either side */
#hero-2349 .tb-dot {
	position: relative;
	left: -0.1em;
}
#hero-2349 .cs-text {
	margin-bottom: 0.75rem;
}
/* The hero photo's subject kept in view, darkened a touch more. The default position suits a subject near the middle; a photo whose subject sits elsewhere sets home.ts hero.image.position (inline, wins over this) */
#hero-2349 .cs-background img {
	object-position: 55% 40%;
}
#hero-2349 .cs-background:before {
	background: linear-gradient(to bottom, rgba(0, 0, 0, var(--tbHeroShadeTop)) 0%, rgba(0, 0, 0, var(--tbHeroShadeMid)) 45%, #000 100%);
}
/* Optional hero clip (home.ts hero.video): over the photo, which stays the poster and the LCP; the
   shade takes over the photo's gradient so it covers the clip too. Fades in once playing. */
#hero-2349 .tb-hero-video,
#hero-2349 .tb-hero-shade {
	width: 100%;
	height: 100%;
	position: absolute;
	top: 0;
	left: 0;
	z-index: -2;
}
#hero-2349 .tb-hero-video {
	object-fit: cover;
	opacity: 0;
	transition: opacity 0.8s;
}
#hero-2349 .tb-hero-video.tb-playing {
	opacity: 1;
}
#hero-2349 .tb-hero-shade {
	pointer-events: none;
	background: linear-gradient(to bottom, rgba(0, 0, 0, var(--tbHeroShadeTop)) 0%, rgba(0, 0, 0, var(--tbHeroShadeMid)) 45%, #000 100%);
}
#hero-2349.tb-has-video .cs-background:before {
	display: none;
}
.tb-hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1.25rem 2.5rem;
}
.tb-hero-phone {
	text-decoration: none;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}
.tb-hero-phone-label {
	font-size: 0.875rem;
	font-weight: 700;
	line-height: 1.2em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--bodyTextColorWhite);
}
.tb-hero-phone .tb-phone {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 900;
	line-height: 1.2em;
}
#hero-2349 .cs-number {
	font-size: clamp(1.25rem, 3.2vw, 2rem);
	line-height: 1.4em;
	color: var(--primary);
}
#hero-2349 .cs-desc {
	font-weight: 700;
	color: var(--headerColor);
}
/* Hero stats beside the headline: the template's panel is width:auto, so one long caption widened it
   over the 55%-wide headline at 1440 and 1024, and at 1920 over the hero phone (Vibera, 2026-09-29). Capped to the space the headline leaves. */
@media only screen and (min-width: 48rem) {
	#hero-2349 .cs-stats {
		max-width: 40%;
	}
}
/* Hero stats on phones: one row per phrase */
@media only screen and (max-width: 47.9375rem) {
	#hero-2349 .cs-stats {
		row-gap: 0.75rem;
	}
	#hero-2349 .cs-item {
		grid-column: span 12;
		flex-direction: row;
		align-items: baseline;
		gap: 0.625rem;
	}
	#hero-2349 .cs-number {
		font-size: 1.375rem;
	}
}

/* Home service cards: Material icons at 56-64 px, not the template's 24 px */
#services-2349 .cs-icon {
	width: clamp(3.5rem, 5vw, 4rem);
	height: auto;
}
/* Service page trust cards: 40 px, not 32 (Material icons carry 2 px of padding) */
#content-page-1399 .cs-h3-icon {
	width: 2.5rem;
	flex: none;
}

/* Header: their logo is a stacked lockup (1.28:1), so it sits taller than a wide one; mobile "Call Now" dials */
#cs-navigation .tb-nav-call {
	display: none;
}
#cs-navigation .cs-logo {
	height: 3.75rem;
}
#cs-navigation .cs-logo img {
	width: auto;
	height: 100%;
	object-fit: contain;
}
/* A touch smaller on phones so the Call Now button never runs into it */
@media only screen and (max-width: 1023px) {
	#cs-navigation .cs-logo {
		height: 3.5rem;
	}
}
@media only screen and (max-width: 399px) {
	#cs-navigation .cs-logo {
		height: 3.25rem;
	}
}
/* A two-line banner title (a long service name on a phone) stays left like the one-line ones */
#banner-558 .cs-int-title {
	text-align: left;
}
/* A banner title with a 13+ letter word ("Rutherfordton, NC") and the content-page H1 ("Rutherfordton, NC" on its
   own line): scaled with the phone so the word fits from 320 px (overflow-check, 2026-10-09) */
#banner-558 .cs-int-title[data-long] {
	font-size: min(clamp(2.4375rem, 6.4vw, 3.5125rem), 8.5vw);
}
#content-page-1399 .cs-title {
	font-size: min(var(--headerFontSize), 8.5vw);
}
@media only screen and (max-width: 1023px) {
	#cs-navigation .cs-button-solid.tb-nav-call {
		font-size: 0.875rem;
		line-height: 2.5rem;
		min-width: 0;
		margin: 0 1rem 0 0;
		padding: 0 1rem;
		display: inline-flex;
		order: 2;
		/* a wide logo lockup squeezed "Call Now" onto two lines at 390 px (1761 Renovations) */
		white-space: nowrap;
	}
	#cs-navigation .cs-nav {
		order: 3;
	}
}
@media only screen and (max-width: 359px) {
	#cs-navigation .cs-logo {
		height: 3rem;
	}
	#cs-navigation .cs-button-solid.tb-nav-call {
		padding: 0 0.625rem;
		margin-right: 0.625rem;
	}
}
@media only screen and (min-width: 64rem) {
	#cs-navigation .cs-logo {
		height: 5.25rem;
		padding: 0.25rem 0;
	}
}

/* About block: their own line as a pull quote, a second job photo inset in the corner of the big frame */
#sbs-2348 .tb-quote {
	margin: 1.5rem 0;
	padding: 0 0 0 1.25rem;
	border-left: 4px solid var(--tbGold);
}
#sbs-2348 .tb-quote .cs-text {
	font-size: 1.125rem;
	font-weight: 700;
	margin: 0;
	color: var(--headerColor);
}
#sbs-2348 .cs-content > .cs-text + .cs-text {
	margin-top: 1rem;
}
#sbs-2348 .tb-inset {
	width: 46%;
	max-width: 20rem;
	aspect-ratio: 4 / 3;
	border: 0.375rem solid #fff;
	box-shadow: 0 0.75rem 2rem rgba(0, 0, 0, 0.25);
	display: block;
	position: absolute;
	right: 1rem;
	bottom: 1rem;
	z-index: 2;
}
/* The big photo's curtain, seam and notches (motion.css, data-motion-curtain) in the container's colour */
#sbs-2348 .cs-picture {
	--motion-ground: #F1EEEC;
}
#sbs-2348 .tb-inset {
	--motion-drift: 10%;
}
@media only screen and (min-width: 48rem) {
	#sbs-2348 .tb-inset {
		right: -2rem;
		bottom: 2rem;
	}
}
/* home.ts about.insetTop: the inset at the top right, for people in the big photo (they stand in its lower half;
   a bottom inset covered Jack and Sons' family at every width, about-fit.cjs) */
#sbs-2348 .tb-inset[data-place="top"] {
	top: 1rem;
	bottom: auto;
}
@media only screen and (min-width: 48rem) {
	#sbs-2348 .tb-inset[data-place="top"] {
		top: 2rem;
	}
}

/* Reviews: rating badge, initial avatars, gold stars */
#reviews-2354 .tb-rating {
	font-size: 1rem;
	line-height: 1.5em;
	text-decoration: none;
	margin-top: 1.25rem;
	padding: 0.5rem 1.25rem;
	background-color: #fff;
	color: var(--headerColor);
	border: 1px solid #e8e8e8;
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	transition: border-color 0.3s;
}
#reviews-2354 .tb-rating:hover {
	border-color: var(--primary);
}
/* A second source (Facebook recommendations: a count, no stars) sits beside the rating badge */
#reviews-2354 .tb-rating-row {
	display: flex;
	flex-wrap: wrap;
	justify-content: inherit;
	gap: 0 0.75rem;
}
#reviews-2354 .tb-rating-stars,
#reviews-2354 .tb-stars {
	letter-spacing: 0.05em;
	color: var(--primary);
}
#reviews-2354 .tb-initial {
	font-size: 1.375rem;
	font-weight: 700;
	text-transform: uppercase;
	color: var(--tbOnAccent);
	background-color: var(--tbGold);
	display: flex;
	justify-content: center;
	align-items: center;
}

/* Service pages: links in the article and FAQ */
#content-page-1399 li a,
#content-page-1399 p a:not(.cs-button-solid),
#faq-2294 .cs-item-p a {
	font-size: inherit;
	line-height: inherit;
	text-decoration: underline;
	color: var(--primary);
}

/* Contact page: call / email / hours / address above the form */
#contact-2251 .tb-contact-list {
	width: 100%;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
	gap: 1.25rem 1.5rem;
}
#contact-2251 .tb-contact-list li {
	list-style: none;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0.125rem;
}
#contact-2251 .tb-contact-label {
	font-size: 0.8125rem;
	font-weight: 700;
	line-height: 1.5em;
	text-transform: uppercase;
	letter-spacing: 0.1em;
	color: var(--primary);
}
#contact-2251 .tb-contact-value {
	font-size: 1.125rem;
	font-weight: 700;
	line-height: 1.4em;
	text-decoration: none;
	color: var(--headerColor);
	overflow-wrap: anywhere;
}
#contact-2251 a.tb-contact-value:hover {
	color: var(--primary);
}
#contact-2251 .tb-contact-note {
	font-size: 0.875rem;
	line-height: 1.5em;
	color: var(--bodyTextColor);
}
#contact-2251 .tb-form-note {
	font-size: 0.875rem;
	line-height: 1.5em;
	margin: -0.5rem 0 0.5rem;
	color: #585b5d;
	grid-column: span 12;
}
/* Honeypot: off-screen, not display:none (some bots skip hidden fields) */
#contact-2251 .tb-honeypot {
	width: 1px;
	height: 1px;
	overflow: hidden;
	position: absolute;
	left: -10000px;
}
#contact-2251 .cf-turnstile {
	min-height: 71px; /* what Turnstile renders (its block is 71 px at every width), so the button does not move when api.js arrives late */
	grid-column: span 12;
}
#contact-2251 .cs-submit:disabled {
	opacity: 0.7;
	cursor: wait;
}
#contact-2251 .tb-form-status {
	font-size: 1rem;
	line-height: 1.5em;
	margin: 0.5rem 0 0;
	padding: 0.75rem 1rem;
	border-left: 4px solid currentColor;
	background-color: #fff;
	grid-column: span 12;
}
#contact-2251 .tb-form-status.is-success {
	color: #1d6b34;
}
#contact-2251 .tb-form-status.is-error {
	color: #b01f18;
}

/* Footer: "Call for a Free Estimate" column in place of the template's newsletter box */
#cs-footer-2293 .tb-footer-contact .tb-phone {
	font-size: clamp(1.5rem, 3vw, 2rem);
	font-weight: 900;
	line-height: 1.2em;
}
#cs-footer-2293 .cs-logo-img {
	width: 100%;
	max-width: 10rem;
	height: auto;
}

/* Banner: dark ground like their logo, gold topper, white title, white current crumb */
#banner-558 {
	background-color: var(--tbInk);
}
#banner-558 .cs-int-topper {
	color: var(--tbPrimaryOnDark);
}
#banner-558 .cs-link {
	color: #d9d9d9;
}
#banner-558 .cs-link.cs-active {
	font-weight: 700;
	color: #fff;
}

/* Square design: sharp corners on photos and boxes the template rounded */
#gallery-1152 .cs-image,
#content-page-1399 .cs-background,
#content-page-1399 .cs-box,
#content-page-1399 .cs-item {
	border-radius: 0;
}

/* /gallery/: every job photo in an even grid, a click opens it full size (Gallery.astro) */
#gallery-1152.tb-all .cs-content .cs-text {
	margin-top: 1rem;
}
#gallery-1152.tb-all .cs-gallery {
	max-width: 100%;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
	grid-template-rows: none;
	grid-auto-rows: auto;
}
#gallery-1152.tb-all .cs-image,
#gallery-1152.tb-all .cs-image:nth-of-type(4),
#gallery-1152.tb-all .cs-image:nth-of-type(5) {
	min-height: 0;
	aspect-ratio: 4 / 3;
	grid-column: auto;
	cursor: zoom-in;
}
#gallery-1152.tb-all .cs-image img {
	transition: transform 0.4s;
}
#gallery-1152.tb-all .cs-image:hover img,
#gallery-1152.tb-all .cs-image:focus-visible img {
	transform: scale(1.04);
}
#gallery-1152 .tb-lightbox {
	width: 100vw;
	max-width: 100vw;
	height: 100svh;
	max-height: 100svh;
	margin: 0;
	padding: 3.5rem 1rem 4.5rem;
	box-sizing: border-box;
	border: 0;
	background: rgba(10, 10, 10, 0.94);
	flex-direction: column;
	justify-content: center;
	align-items: center;
	gap: 0.75rem;
}
#gallery-1152 .tb-lightbox[open] {
	display: flex;
}
#gallery-1152 .tb-lightbox::backdrop {
	background: rgba(0, 0, 0, 0.6);
}
#gallery-1152 .tb-lightbox-img {
	max-width: 100%;
	max-height: calc(100svh - 9rem);
	object-fit: contain;
}
#gallery-1152 .tb-lightbox-caption {
	font-size: 0.9375rem;
	line-height: 1.4em;
	text-align: center;
	margin: 0;
	color: #e8e8e8;
}
#gallery-1152 .tb-lightbox-btn {
	font-size: 2rem;
	line-height: 1;
	width: 3rem;
	height: 3rem;
	border: 0;
	color: var(--tbOnAccent);
	background: var(--tbGold);
	cursor: pointer;
	position: absolute;
}
#gallery-1152 .tb-lightbox-close {
	top: 0.5rem;
	right: 0.5rem;
}
#gallery-1152 .tb-lightbox-prev,
#gallery-1152 .tb-lightbox-next {
	bottom: 0.75rem;
}
#gallery-1152 .tb-lightbox-prev {
	left: calc(50% - 3.5rem);
}
#gallery-1152 .tb-lightbox-next {
	right: calc(50% - 3.5rem);
}
@media only screen and (min-width: 64rem) {
	#gallery-1152 .tb-lightbox-prev,
	#gallery-1152 .tb-lightbox-next {
		top: 50%;
		bottom: auto;
		transform: translateY(-50%);
	}
	#gallery-1152 .tb-lightbox-prev {
		left: 1rem;
	}
	#gallery-1152 .tb-lightbox-next {
		right: 1rem;
	}
}

/* Hero text block anchored at the bottom: it ends on a line (the ::before's height) just above the
   first screen's fold, or where the template's photo height put it if that is higher, and a longer
   title or text grows it upwards into the photo instead of pushing the button off the screen (a
   three-line H1 once had to be cut to pass fold-check). The line = the template's photo height
   above + a ~26.5rem text block; margin-top keeps at least 13rem of photo under the header.
   The screen height is the one at load (--tb-vh, BaseLayout), never above 100svh: in-app browsers
   (Messenger, Instagram) resize the page as their toolbar hides, 100svh follows, and the whole hero
   jumped by the toolbar's height every time a finger changed direction. */
#hero-2349 .cs-container {
	display: grid;
	padding-top: 0;
}
#hero-2349 .cs-container::before {
	content: "";
	grid-area: 1 / 1;
	height: min(calc(clamp(350px, 58vw, 600px) + 26.5rem), calc(min(100svh, var(--tb-vh, 100svh)) - 1.25rem));
}
#hero-2349 .cs-content {
	grid-area: 1 / 1;
	align-self: end;
	margin-top: 13rem;
}

/* Hero text on the same 80rem line as the header's logo (the template let it run to the viewport edge) */
@media only screen and (min-width: 64rem) {
	/* The template's 600 px of photo above the headline put the button below a 768/900 px laptop
	   screen: the text block now ends inside the first screen (capped for tall screens), photo above it */
	#hero-2349 .cs-container {
		max-width: 80rem;
		padding-left: 1rem;
		padding-right: 1rem;
		box-sizing: border-box;
	}
	#hero-2349 .cs-container::before {
		height: clamp(37.75rem, calc(min(100svh, var(--tb-vh, 100svh)) - 1.25rem), 62.25rem);
	}
	#hero-2349 .cs-content {
		width: 60%;
	}
}

/* About page: every Google review in a grid, no photo (Reviews.astro `all`) */
#reviews-2354.tb-all .cs-container {
	max-width: 80rem;
}
#reviews-2354.tb-all .cs-card-group {
	padding: 0;
}
#reviews-2354.tb-all .cs-item,
#reviews-2354.tb-all .cs-item:last-of-type {
	width: auto;
	max-width: none;
	height: auto;
	padding: clamp(2rem, 4vw, 2.5rem) clamp(1.5rem, 4vw, 2.5rem);
	order: 0;
	position: relative;
	left: auto;
	transform: none;
	z-index: 1;
	display: flex;
	flex-direction: column;
}
#reviews-2354.tb-all .cs-featured {
	font-size: clamp(1.25rem, 2vw, 1.5rem);
}
#reviews-2354.tb-all .cs-item-text {
	font-size: 1rem;
	margin-bottom: 2rem;
}
#reviews-2354.tb-all .cs-info {
	margin-top: auto;
}
@media only screen and (min-width: 64rem) {
	#reviews-2354.tb-all .cs-item {
		grid-column: span 4;
	}
	/* a service page with two reviews: centred, not left with an empty third column */
	#reviews-2354.tb-all .cs-item:first-child:nth-last-child(2) {
		grid-column: 3 / span 4;
	}
}
/* /reviews/: all of them in masonry columns, so a long review doesn't stretch its row */
@media only screen and (min-width: 48rem) {
	#reviews-2354.tb-wall .cs-card-group {
		display: block;
		columns: 2;
		column-gap: clamp(1rem, 2vw, 1.25rem);
	}
	#reviews-2354.tb-wall .cs-item,
	#reviews-2354.tb-wall .cs-item:last-of-type {
		margin-bottom: clamp(1rem, 2vw, 1.25rem);
		break-inside: avoid;
	}
}
@media only screen and (min-width: 64rem) {
	#reviews-2354.tb-wall .cs-card-group {
		columns: 3;
	}
}

/* About page: their three "why us" cards */
#sbs-2348 .tb-why {
	margin: 1.25rem 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
}
#sbs-2348 .tb-why li {
	font-size: var(--bodyFontSize);
	line-height: 1.5em;
	list-style: none;
	padding-left: 1.25rem;
	color: var(--bodyTextColor);
	position: relative;
}
#sbs-2348 .tb-why li:before {
	content: "";
	width: 0.5rem;
	height: 0.5rem;
	background: var(--tbGold);
	position: absolute;
	left: 0;
	top: 0.5em;
}
#sbs-2348 .tb-why strong {
	color: var(--headerColor);
}

/* Service pages: a line from one of their Google reviews */
#content-page-1399 .tb-review-quote {
	margin: 1.5rem 0;
	padding: 1.25rem 1.5rem;
	background-color: #f7f7f7;
	border-left: 4px solid var(--tbGold);
}
#content-page-1399 .tb-review-quote p {
	font-size: 1.0625rem;
	font-style: italic;
	margin: 0 0 0.5rem;
	color: var(--headerColor);
}
#content-page-1399 .tb-review-quote cite {
	font-size: 0.875rem;
	font-style: normal;
	font-weight: 700;
	color: var(--primary);
}

/* Service pages: the template brightens article links 120%, which turns the darker gold back into a
   light one that fails contrast on white */
#content-page-1399 p a,
#content-page-1399 li a {
	filter: none;
}

/* /gallery/ on phones: two photos a row, not one (45 photos in one column is a very long scroll) */
@media only screen and (max-width: 37.5rem) {
	#gallery-1152.tb-all .cs-gallery {
		grid-template-columns: repeat(2, 1fr);
		gap: 0.5rem;
	}
}

/* Service page photo badge: logo gold with dark ink, like their van decal (the icon is drawn dark
   by scripts/make-icons.mjs) */
#content-page-1399 .cs-box {
	background-color: var(--tbGold);
}
#content-page-1399 .cs-box .cs-desc {
	color: var(--tbOnAccent);
}

/* Home service photo cards: five services sit in one row of five on desktop, not four plus an orphan
   (tablet keeps the template's centred 3 + 2) */
@media only screen and (min-width: 64rem) {
	#services-2355 .cs-card-group:has(> .cs-item:nth-child(5):last-child) {
		grid-template-columns: repeat(5, 1fr);
	}
	#services-2355 .cs-card-group:has(> .cs-item:nth-child(5):last-child) .cs-item {
		grid-column: span 1;
	}
}

/* Three services: one row of three on desktop, not four columns with the right quarter empty
   (Fanta K's Cleaning) */
@media only screen and (min-width: 64rem) {
	#services-2355 .cs-card-group:has(> .cs-item:nth-child(3):last-child) .cs-item {
		grid-column: span 4;
	}
}

/* Six services: two rows of three on desktop, not four plus an orphan pair; nine: three rows of three,
   not two rows of four plus one card alone (Chapman's, 2026-10-01) */
@media only screen and (min-width: 64rem) {
	#services-2355 .cs-card-group:has(> .cs-item:nth-child(6):last-child) .cs-item,
	#services-2355 .cs-card-group:has(> .cs-item:nth-child(9):last-child) .cs-item {
		grid-column: span 4;
	}
}
/* Seven cards (from the Lithuanian kit's Sinix, 2026-10-01): rows of four with the last three centred. A 24-column grid
   gives the same card width (six columns and five gaps = three and two) and can start the fifth card half a card in.
   On a 600-767 px tablet (two a row) the seventh card sits centred under the others. */
@media only screen and (min-width: 64rem) {
	#services-2355 .cs-card-group:has(> .cs-item:nth-child(7):last-child) {
		grid-template-columns: repeat(24, 1fr);
	}
	#services-2355 .cs-card-group:has(> .cs-item:nth-child(7):last-child) .cs-item {
		grid-column: span 6;
	}
	#services-2355 .cs-card-group:has(> .cs-item:nth-child(7):last-child) .cs-item:nth-child(5) {
		grid-column: 4 / span 6;
	}
}
@media only screen and (min-width: 600px) and (max-width: 47.9375rem) {
	#services-2355 .cs-card-group .cs-item:nth-child(7):last-child {
		grid-column: 4 / span 6;
	}
}

/* Service-page article button: services.css hard-codes the template's #f7ba0c on this id selector,
   which outranks the brand rule above (it only matched while the brand was gold) */
#content-page-1399 .cs-button-solid {
	color: var(--tbOnAccent);
	background-color: var(--tbGold);
	box-shadow: 4px 4px 0 0 var(--tbInk);
}
#content-page-1399 .cs-button-solid:hover {
	color: #fff;
	background-color: var(--tbInk);
	box-shadow: 4px 4px 0 0 var(--tbGold);
}

/* FAQ: the template widens its container to 90rem at 1300px+, flush with the viewport edge while
   every other section sits in 80rem; and its cream grounds were tinted for a gold brand */
#faq-2294 {
	background-color: #f7f4ef;
}
#faq-2294 .cs-faq-item {
	background-color: #fff;
}
#faq-2294 .cs-faq-item.active,
#faq-2294 .cs-faq-item.active .cs-button {
	background-color: #fdf0ea;
}
@media only screen and (min-width: 81.25rem) {
	#faq-2294 .cs-container {
		max-width: 80rem;
	}
}

/* Home service photo cards: the template's 1.2em is too tight for Boldonse, so a title that wraps
   ("LOCAL & RESIDENTIAL / MOVES") runs its two lines into each other; 1.5em like the template's .cs-title */
#services-2355 .cs-h3 {
	line-height: 1.5em;
}

/* A wide logo (width/height >= 4, set by Header/Footer as data-shape="wide"): sized by width on
   phones so the Call Now button keeps its room, a little taller on desktop (Marks Electric, 6.2:1) */
@media only screen and (max-width: 1023px) {
	#cs-navigation .cs-logo[data-shape="wide"] {
		height: auto;
		width: calc(100vw - 12.5rem);
		max-width: 17rem;
	}
	#cs-navigation .cs-logo[data-shape="wide"] img {
		width: 100%;
		height: auto;
	}
}
@media only screen and (min-width: 64rem) {
	#cs-navigation .cs-logo[data-shape="wide"] {
		height: 4rem;
		padding: 0.5rem 0;
	}
}
#cs-footer-2293 .cs-logo-img[data-shape="wide"] {
	max-width: 17rem;
}

/* About block: who said the pull quote (a Google review). */
.tb-quote-by {
	display: block;
	margin-top: 0.5rem;
	font-size: 0.875rem;
	font-style: normal;
	opacity: 0.8;
}

/* Service pages: their own photos inside the article (images.ts fig(), slot-photos.json `service-<slug>-in<N>`),
   floated right and left on desktop like goldenislesfencing.com's service pages, full width on phones (from Roof
   Bros, 2026-10-01). The template's article column is a flex column, where floats do nothing: with a figure in it,
   flow-root makes it a block that still contains its floats (an article without one keeps the template's layout).
   Portrait clip stills are capped in height and cropped to fit. */
#content-page-1399 .cs-content:has(.tb-inline-photo) {
	display: flow-root;
}
#content-page-1399 .tb-inline-photo {
	width: 100%;
	margin: 0.5rem 0 1.5rem;
}
#content-page-1399 .tb-inline-photo img {
	display: block;
	width: 100%;
	height: auto;
	max-height: 26rem;
	object-fit: cover;
}
#content-page-1399 .tb-inline-photo figcaption {
	margin-top: 0.5rem;
	font-size: 0.875rem;
	line-height: 1.4em;
	color: var(--bodyTextColor);
}
@media only screen and (min-width: 48rem) {
	#content-page-1399 .tb-inline-photo {
		width: 46%;
	}
	#content-page-1399 .tb-inline-photo--right {
		float: right;
		margin: 0.375rem 0 1rem 1.5rem;
	}
	#content-page-1399 .tb-inline-photo--left {
		float: left;
		margin: 0.375rem 1.5rem 1rem 0;
	}
}

/* Service pages: a long article has 5-6 H2 sections; at the template's 2rem in the display face they outweighed
   the page's H1 on phones (Roof Bros). Each heading clears a photo floated beside the section above. */
#content-page-1399 .cs-content h2 {
	font-size: clamp(1.5rem, 3.2vw, 2rem);
	line-height: 1.3em;
	clear: both;
}

/* tb-demo-fixes:start (2026-10-04, one block in every demo; a re-run replaces it).
   Service-page article H2/H3 one step below the H1 at every width: the template's fixed 2rem H2 (32 px) outweighed the
   31 px H1 on phones and ran to 4 lines in the 1024 px column. Now 20 px up to ~1024 px, 28 px at 1440, H3 one step below.
   And links iPhone Safari makes by itself (a phone number, email or address in plain text) keep the text's look instead of
   Safari's blue; BaseLayout's format-detection meta stops most of them. */
#content-page-1399 .cs-content h2 {
	font-size: clamp(1.25rem, 1.95vw, 1.75rem);
	line-height: 1.3em;
}
#content-page-1399 .cs-content h3 {
	font-size: clamp(1.0625rem, 1.5vw, 1.375rem);
	line-height: 1.3em;
}
a[x-apple-data-detectors] {
	color: inherit !important;
	font: inherit !important;
	text-decoration: none !important;
}
/* tb-demo-fixes:end */

/* /privacy-policy/: one readable column of headed sections */
#tb-legal {
	padding: var(--sectionPadding);
}
#tb-legal .cs-container {
	width: 100%;
	max-width: 46rem;
	margin: auto;
}
#tb-legal h2 {
	font-size: clamp(1.25rem, 3vw, 1.5rem);
	line-height: 1.3em;
	margin: 2.5rem 0 0.75rem;
	color: var(--headerColor);
}
#tb-legal p {
	font-size: var(--bodyFontSize);
	line-height: 1.6em;
	margin: 0 0 1rem;
	color: var(--bodyTextColor);
}
#tb-legal .tb-legal-updated {
	font-size: 0.875rem;
	margin: 0;
}
#tb-legal a {
	text-decoration: underline;
	color: var(--primary);
	overflow-wrap: anywhere;
}

/* The privacy link under the contact form and in the footer's bottom line */
#contact-2251 .tb-form-note a {
	color: inherit;
	text-decoration: underline;
}
#tb-legal a[href^="tel:"] {
	white-space: nowrap;
}
#cs-footer-2293 .tb-privacy {
	text-decoration: underline;
	opacity: 1;
}

/* Banner breadcrumbs on small phones: "Home — Services — Hydroseeding" ran past 320 px */
@media only screen and (max-width: 25rem) {
	#banner-558 .cs-breadcrumbs {
		flex-wrap: wrap;
		justify-content: flex-start;
		row-gap: 0.5rem;
	}
	#banner-558 .cs-link:after {
		width: 1rem;
		margin: 0 0.625rem;
	}
}

/* Home service cards: a last row of two (10 services) sits centred, not left */
@media only screen and (min-width: 64rem) {
	#services-2355 .cs-item:nth-child(4n + 1):nth-last-child(2) {
		grid-column: 4 / span 3;
	}
}