/**
 * Single service page (build phase 3). Shares .tcc-feature-card,
 * .tcc-service-card, .tcc-faq__*, .tcc-section-heading, .tcc-testimonials__*
 * and the band classes from home.css (enqueued alongside this file — see
 * functions.php).
 */

.tcc-svc-hero {
	position: relative;
	min-height: 60vh;
	display: flex;
	align-items: flex-end;
	overflow: hidden;
	padding-top: 140px;
}
.tcc-svc-hero__bg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.tcc-svc-hero__scrim {
	position: absolute;
	inset: 0;
	background: linear-gradient( to top, rgba( 11, 31, 82, 0.88 ), rgba( 11, 31, 82, 0.35 ) );
}
.tcc-svc-hero__inner {
	position: relative;
	z-index: 1;
	padding-bottom: var( --space-3xl );
}
.tcc-svc-hero__inner h1 {
	margin: 0 0 var( --space-2xs );
	font-size: var( --text-h1-size );
	line-height: var( --text-h1-lh );
	color: var( --text-on-dark );
}
.tcc-svc-hero__inner p {
	margin: 0;
	max-width: 60ch;
	color: var( --text-on-dark-muted );
	font-size: var( --text-body-lg-size );
}

/* ---- Overview: copy + numbered features | photo + fused stat strip ---- */

.tcc-svc-overview__grid {
	display: grid;
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
	gap: var( --space-3xl );
	align-items: start;
}
.tcc-svc-overview__heading {
	margin: 0 0 var( --space-sm );
	font-size: var( --text-h3-size );
	line-height: var( --text-h3-lh );
	max-width: 20ch;
}
.tcc-svc-overview__intro {
	margin: 0 0 var( --space-md );
	color: var( --text-body );
	font-size: var( --text-body-lg-size );
	line-height: var( --text-body-lg-lh );
	max-width: 52ch;
}
.tcc-svc-featurelist {
	list-style: none;
	margin: 0;
	padding: 0;
	border: var( --elevation-hairline );
	border-radius: var( --radius-md );
	overflow: hidden;
}
.tcc-svc-featurelist__row {
	display: flex;
	gap: var( --space-sm );
	padding: var( --space-sm ) var( --space-md );
	border-top: var( --elevation-hairline );
}
.tcc-svc-featurelist__row:first-child {
	border-top: none;
}
.tcc-svc-featurelist__num {
	flex: 0 0 auto;
	font-family: var( --font-display );
	font-weight: var( --weight-bold );
	font-size: var( --text-body-size );
	/* Sits on white — gold fails contrast, brand-deep passes. */
	color: var( --color-brand-deep );
	line-height: 1.5;
}
.tcc-svc-featurelist__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}
.tcc-svc-featurelist__title {
	font-weight: var( --weight-semibold );
	color: var( --text-strong );
}
.tcc-svc-featurelist__body {
	color: var( --text-body );
	font-size: var( --text-body-size );
}
.tcc-svc-overview__photo {
	border-radius: var( --radius-md ) var( --radius-md ) 0 0;
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.tcc-svc-overview__photo img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Stat strip is fused to the photo's bottom edge, so it loses its own top
   radius and shares the photo's width — one card, not two stacked blocks. */
.tcc-svc-overview__media .tcc-svc-stats {
	border-radius: 0 0 var( --radius-md ) var( --radius-md );
	border-top: none;
}

/* ---- SEO description prose + image rail ---- */

.tcc-svc-description {
	/* Follows the (also white) overview band — a hairline keeps the two from
	   reading as one undifferentiated slab. */
	border-top: var( --elevation-hairline );
}
/* 70/30 split: prose reads as the primary column, the rail is a secondary
   photo strip filling what would otherwise be a lone block of text sitting
   in an empty page — reuses the same 3 gallery images the Gallery section
   below shows at full size, just smaller here. */
.tcc-svc-description__grid {
	display: grid;
	grid-template-columns: minmax( 0, 7fr ) minmax( 0, 3fr );
	gap: var( --space-3xl );
	align-items: start;
}
.tcc-svc-description__grid--no-rail {
	grid-template-columns: minmax( 0, 1fr );
}
.tcc-svc-description__heading {
	margin: 0 0 var( --space-md );
	font-size: var( --text-h3-size );
	line-height: var( --text-h3-lh );
	max-width: 26ch;
}
.tcc-svc-description__prose {
	max-width: 72ch;
	color: var( --text-body );
	font-size: var( --text-body-lg-size );
	line-height: var( --text-body-lg-lh );
}
.tcc-svc-description__prose > * + * {
	margin-top: var( --space-md );
}
.tcc-svc-description__prose h2:not( .tcc-svc-description__heading ) {
	font-size: var( --text-h4-size );
	line-height: var( --text-h4-lh );
	margin-top: var( --space-lg );
}
.tcc-svc-description__prose h3 {
	font-size: var( --text-h5-size );
	margin-top: var( --space-lg );
}
.tcc-svc-description__prose ul,
.tcc-svc-description__prose ol {
	padding-left: var( --space-md );
}
.tcc-svc-description__prose li + li {
	margin-top: var( --space-2xs );
}
.tcc-svc-description__prose a {
	color: var( --color-brand-deep );
	text-decoration: underline;
}
.tcc-svc-description__prose img {
	max-width: 100%;
	height: auto;
	border-radius: var( --radius-md );
}
.tcc-svc-description__rail {
	/* Grid's `align-items: start` already lines this column's top edge up
	   with the prose column's — no extra offset needed. */
	display: flex;
	flex-direction: column;
	gap: var( --space-sm );
}
.tcc-svc-description__rail-item {
	border-radius: var( --radius-md );
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.tcc-svc-description__rail-item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}
/* Below desktop the rail is hidden and this grid takes over — see the
   media query. Reuses .tcc-svc-gallery__item for the photo treatment
   (same border-radius/aspect-ratio/object-fit rules, defined further down)
   so the "shown once" set of images looks identical whichever of the two
   layouts is currently visible. */
.tcc-svc-description__mobile-gallery {
	display: none;
}

.tcc-svc-stats {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	border: var( --elevation-hairline );
	border-radius: var( --radius-md );
}
/* The 4-stat variant only ever appears in the narrow overview media column
   (Move-In / Move-Out's price tiers). `1fr` is minmax(auto, 1fr), so four
   price strings force a min-content row wider than that column and the last
   tier is pushed outside the card — 2x2 gives each tier a full-width line. */
.tcc-svc-stats--4 {
	grid-template-columns: minmax( 0, 1fr ) minmax( 0, 1fr );
}
.tcc-svc-stats--4 .tcc-svc-stats__item:nth-child( odd ) {
	border-left: none;
}
.tcc-svc-stats--4 .tcc-svc-stats__item:nth-child( n + 3 ) {
	border-top: var( --elevation-hairline );
}
.tcc-svc-stats__item {
	padding: var( --space-md );
	text-align: center;
	border-left: var( --elevation-hairline );
}
.tcc-svc-stats__item:first-child {
	border-left: none;
}
.tcc-svc-stats__value {
	display: block;
	font-family: var( --font-display );
	font-size: var( --text-h4-size );
	font-weight: var( --weight-bold );
	color: var( --text-strong );
}
.tcc-svc-stats__label {
	display: block;
	margin-top: 4px;
	color: var( --text-body );
	font-size: var( --text-body-size );
}

.tcc-svc-process__grid {
	display: grid;
	/* Step count is per-service now (up to 8), not a fixed 4 — auto-fit
	   keeps rows even (4-in-a-row still holds at this container width)
	   instead of hardcoding a column count that only fits the default. */
	grid-template-columns: repeat( auto-fit, minmax( 220px, 1fr ) );
	gap: var( --space-lg );
}
.tcc-svc-process__step {
	text-align: center;
}
/* Each step gets its own tint/ink pair, cycling through the palette
   tokens.css already reserves for exactly this ("decorative step number"
   comments on --tcc-violet/--tcc-magenta) — a fixed 4-step process, so
   nth-child is safe and simpler than a per-row PHP class. */
.tcc-svc-process__num {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0 auto var( --space-sm );
	border-radius: var( --radius-full );
	font-family: var( --font-display );
	font-size: var( --text-h6-size );
	font-weight: var( --weight-bold );
}
.tcc-svc-process__step:nth-child( 4n + 1 ) .tcc-svc-process__num {
	background: var( --tcc-tint-blue );
	color: var( --tcc-blue-info );
}
.tcc-svc-process__step:nth-child( 4n + 2 ) .tcc-svc-process__num {
	background: var( --tcc-tint-rose );
	color: var( --tcc-magenta );
}
.tcc-svc-process__step:nth-child( 4n + 3 ) .tcc-svc-process__num {
	background: var( --tcc-tint-violet );
	color: var( --tcc-violet );
}
.tcc-svc-process__step:nth-child( 4n + 4 ) .tcc-svc-process__num {
	background: var( --tcc-tint-mint );
	color: var( --tcc-green );
}
.tcc-svc-process__step h3 {
	margin: 0 0 4px;
	font-size: var( --text-h6-size );
	font-weight: var( --weight-semibold );
}
.tcc-svc-process__step p {
	margin: 0;
	color: var( --text-body );
	font-size: var( --text-body-size );
}

.tcc-svc-quote__box {
	background-color: var( --tcc-quote-blue );
	/* Subtle repeating-dot texture, CSS-only — no extra image request for
	   a purely decorative pattern. Paints as this element's own background
	   layer, always beneath its children — no stacking-context gymnastics
	   needed the way the stat band's photo overlay required. */
	background-image: radial-gradient( circle, rgba( 255, 255, 255, 0.22 ) 1.5px, transparent 1.6px );
	background-size: 20px 20px;
	border-radius: var( --radius-md );
	padding: var( --space-3xl ) var( --space-lg );
	text-align: left;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var( --space-md );
}
.tcc-svc-quote__box h2,
.tcc-svc-quote__box p {
	margin: 0;
	color: var( --text-on-dark );
}
.tcc-svc-quote__box p {
	color: var( --text-on-dark-muted );
	max-width: 50ch;
}

.tcc-svc-gallery__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --space-md );
}
.tcc-svc-gallery__item {
	border-radius: var( --radius-md );
	overflow: hidden;
	aspect-ratio: 4 / 3;
}
.tcc-svc-gallery__item img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.tcc-svc-testimonial__grid {
	display: grid;
	grid-template-columns: 1fr 300px;
	gap: var( --space-3xl );
	align-items: center;
}
.tcc-svc-testimonial__portrait {
	aspect-ratio: 1 / 1;
	border-radius: var( --radius-md );
	overflow: hidden;
}
.tcc-svc-testimonial__portrait img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center top;
}

/* Slim navy bar, icon left + text right — a CTA-adjacent banner, not
   another full section, which is why its padding is deliberately tighter
   than the sections around it (see the spacing block near the end of this
   file). */
.tcc-svc-guarantee__box {
	background: var( --color-hero-bg );
	border-radius: var( --radius-md );
	padding: var( --space-md ) var( --space-lg );
	display: flex;
	align-items: center;
	gap: var( --space-md );
	text-align: left;
}
.tcc-svc-guarantee__icon {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	border-radius: var( --radius-full );
	background: var( --color-primary );
	color: var( --color-primary-contrast );
}
.tcc-svc-guarantee__icon svg,
.tcc-svc-guarantee__icon [data-lucide] {
	width: 24px;
	height: 24px;
}
.tcc-svc-guarantee__text h2 {
	margin: 0 0 var( --space-3xs );
	font-size: var( --text-h5-size );
	color: var( --text-on-dark );
}
.tcc-svc-guarantee__text p {
	margin: 0;
	color: var( --text-on-dark-muted );
}

.tcc-svc-related__grid {
	display: grid;
	grid-template-columns: repeat( 3, 1fr );
	gap: var( --space-lg );
}

@media ( max-width: 991px ) {
	.tcc-svc-overview__grid {
		grid-template-columns: 1fr;
		gap: var( --space-lg );
	}
	.tcc-svc-description__grid {
		grid-template-columns: 1fr;
		gap: var( --space-lg );
	}
	/* Side rail only fits next to a full-width prose column; below desktop
	   the description grid is already single-column (rule above), so swap
	   the rail out for a plain grid sitting below the text instead of
	   trying to reflow the same flex list sideways. */
	.tcc-svc-description__rail {
		display: none;
	}
	.tcc-svc-description__mobile-gallery {
		display: grid;
		grid-template-columns: repeat( 3, 1fr );
		gap: var( --space-md );
		margin-top: var( --space-lg );
	}
	.tcc-svc-process__grid,
	.tcc-svc-gallery__grid,
	.tcc-svc-related__grid {
		grid-template-columns: 1fr 1fr;
	}
	.tcc-svc-stats,
	.tcc-svc-stats--4 {
		grid-template-columns: 1fr 1fr;
	}
	.tcc-svc-stats__item:nth-child(odd) {
		border-left: none;
	}
	.tcc-svc-testimonial__grid {
		grid-template-columns: 1fr;
	}
	.tcc-svc-testimonial__portrait {
		max-width: 240px;
	}
}
@media ( max-width: 640px ) {
	.tcc-svc-process__grid,
	.tcc-svc-gallery__grid,
	.tcc-svc-related__grid,
	.tcc-svc-stats,
	.tcc-svc-stats--4,
	.tcc-svc-description__mobile-gallery {
		grid-template-columns: 1fr;
	}
	.tcc-svc-stats__item {
		border-left: none;
		border-top: var( --elevation-hairline );
	}
	.tcc-svc-stats__item:first-child {
		border-top: none;
	}
	.tcc-svc-guarantee__box {
		flex-direction: column;
		align-items: flex-start;
		text-align: left;
	}
}

/* ---------------------------------------------------------------------
 * Section rhythm — scoped tighter than the sitewide --space-section
 * (175px desktop). That token is shared with the homepage's band classes,
 * so it can't be turned down globally without re-litigating homepage
 * spacing; scoping to the service template lets this page's 9 stacked
 * sections read as one continuous page instead of 9 separated slabs.
 * ------------------------------------------------------------------- */

body.single-tcc_service .tcc-svc-overview,
body.single-tcc_service .tcc-svc-description,
body.single-tcc_service .tcc-svc-process,
body.single-tcc_service .tcc-svc-quote,
body.single-tcc_service .tcc-svc-gallery,
body.single-tcc_service .tcc-svc-testimonial,
body.single-tcc_service .tcc-faq,
body.single-tcc_service .tcc-svc-related {
	padding: var( --space-3xl ) 0; /* 96px, vs the sitewide 175px */
}
body.single-tcc_service .tcc-svc-guarantee {
	padding: var( --space-lg ) 0; /* the guarantee bar is a slim CTA banner, not a full section */
}
@media ( max-width: 991px ) {
	body.single-tcc_service .tcc-svc-overview,
	body.single-tcc_service .tcc-svc-description,
	body.single-tcc_service .tcc-svc-process,
	body.single-tcc_service .tcc-svc-quote,
	body.single-tcc_service .tcc-svc-gallery,
	body.single-tcc_service .tcc-svc-testimonial,
	body.single-tcc_service .tcc-faq,
	body.single-tcc_service .tcc-svc-related {
		padding: var( --space-xl ) 0; /* 56px */
	}
}
@media ( max-width: 640px ) {
	body.single-tcc_service .tcc-svc-overview,
	body.single-tcc_service .tcc-svc-description,
	body.single-tcc_service .tcc-svc-process,
	body.single-tcc_service .tcc-svc-quote,
	body.single-tcc_service .tcc-svc-gallery,
	body.single-tcc_service .tcc-svc-testimonial,
	body.single-tcc_service .tcc-faq,
	body.single-tcc_service .tcc-svc-related {
		padding: var( --space-lg ) 0; /* 40px */
	}
}