/* Page-parent template — used by /services/{slug}/ parent service pages.
 * The hero is the homepage shell (hero-home.css) with service-parent variants
 * defined there. This file owns the rest of the page: WP content body, gallery,
 * locations, etc.
 */

/* Bleed dark behind the fixed nav, matching the homepage trick. */
body.page-template-page-parent {
	background-color: var(--c-dark);
}

/* ── Content / WP body + sidebar grid ────────────────────── */
.service-parent__content {
	padding: 2.5rem 1.25rem 3rem;
	background: linear-gradient(180deg, #fafaf7 0%, #f4f3ef 100%);
	position: relative;
	overflow: hidden;
}

/* Decorative pressure-washer wand SVG in the bottom-right corner —
   matches the home-cta bg-mark motif, very low opacity. */
.service-parent__content::before {
	content: "";
	position: absolute;
	bottom: -2rem;
	right: -2rem;
	width: 16rem;
	height: 16rem;
	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 200'><g fill='%23f46f0c' opacity='.06'><rect x='22' y='92' width='14' height='22' rx='3'/><path d='M36 96 L118 96 L118 86 L132 92 L132 110 L118 116 L118 106 L36 106 Z'/><path d='M68 106 L68 124 L80 130 L80 122 L74 119 L74 106 Z'/><path d='M132 92 L154 80 L162 96 L154 112 L132 110 Z'/></g></svg>");
	background-repeat: no-repeat;
	background-position: bottom right;
	background-size: contain;
	pointer-events: none;
	z-index: 0;
}

.service-parent__content > * {
	position: relative;
	z-index: 1;
}

.service-parent__content-grid {
	max-width: 1200px;
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr;
	gap: 2rem;
}

@media (min-width: 900px) {
	.service-parent__content-grid {
		grid-template-columns: minmax(0, 1fr) minmax(0, 280px);
		gap: 3rem;
		align-items: start;
	}
}

.service-parent__content-main {
	min-width: 0;
}

.service-parent__content-inner {
	color: var(--c-dark);
	font-size: 1rem;
	line-height: 1.6;
}

/* ── Sidebar ──────────────────────────────────────────────── */
.service-parent__sidebar {
	min-width: 0;
	background: var(--c-white);
	border-radius: 12px;
	padding: 1.5rem 1.25rem;
	box-shadow:
		0 1px 2px rgba(0, 0, 0, .06),
		0 8px 24px rgba(0, 0, 0, .04);
}

@media (min-width: 900px) {
	.service-parent__sidebar {
		position: sticky;
		top: 5rem;
		align-self: start;
	}
}

.service-parent__sidebar-image {
	margin: 0 0 1.25rem;
	text-align: center;
}

.service-parent__sidebar-image img,
.service-parent__mascot-img {
	max-width: 100%;
	height: auto;
	display: inline-block;
}

/* Hide the wrapper when display_service_mascot() rendered nothing (empty div). */
.service-parent__sidebar-image:empty {
	display: none;
}

/* Sidebar locations — nested accordion (country → province → cities).
   Lives inside .service-parent__sidebar which provides the white card bg. */
.sidebar-locations {
	margin: 0;
}

.sidebar-locations__heading {
	margin: 0 0 1rem;
	font-size: 1.0625rem;
	font-weight: 800;
	color: var(--c-dark);
	text-transform: capitalize;
	letter-spacing: -.005em;
}

.sidebar-locations__country + .sidebar-locations__country {
	margin-top: 1.25rem;
	border-top: 1px solid rgba(35, 31, 32, .08);
	padding-top: 1rem;
}

.sidebar-locations__country-head {
	display: flex;
	align-items: baseline;
	justify-content: space-between;
	gap: .5rem;
	margin-bottom: .5rem;
	padding-bottom: .35rem;
	border-bottom: 2px solid var(--c-orange-brand);
}

.sidebar-locations__country-name {
	font-size: .9375rem;
	font-weight: 700;
	color: var(--c-dark);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.sidebar-locations__country-count {
	font-size: .75rem;
	font-weight: 700;
	color: var(--c-orange-deep);
	letter-spacing: .02em;
}

.sidebar-locations__province {
	border-bottom: 1px solid rgba(35, 31, 32, .08);
}

.sidebar-locations__province:last-child {
	border-bottom: 0;
}

.sidebar-locations__province-summary {
	display: flex;
	align-items: center;
	gap: .5rem;
	padding: .65rem .25rem;
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: color .15s ease;
}

/* Kill default disclosure triangle (Chrome/Firefox/Safari). */
.sidebar-locations__province-summary::-webkit-details-marker { display: none; }
.sidebar-locations__province-summary::marker { content: ""; }

.sidebar-locations__province-summary:hover,
.sidebar-locations__province-summary:focus-visible {
	color: var(--c-orange-deep);
	outline: none;
}

.sidebar-locations__province-name {
	flex: 1;
	font-size: .9375rem;
	font-weight: 600;
	color: var(--c-dark);
	line-height: 1.3;
}

.sidebar-locations__province-summary:hover .sidebar-locations__province-name,
.sidebar-locations__province-summary:focus-visible .sidebar-locations__province-name {
	color: var(--c-orange-deep);
}

.sidebar-locations__province-count {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 1.5rem;
	padding: .1rem .4rem;
	background: rgba(244, 111, 12, .12);
	color: var(--c-orange-deep);
	border-radius: 999px;
	font-size: .6875rem;
	font-weight: 700;
	line-height: 1;
}

.sidebar-locations__chevron {
	color: var(--c-dark);
	opacity: .6;
	transition: transform .2s ease, opacity .15s ease;
	flex-shrink: 0;
}

.sidebar-locations__province[open] .sidebar-locations__chevron {
	transform: rotate(180deg);
}

.sidebar-locations__province-summary:hover .sidebar-locations__chevron,
.sidebar-locations__province-summary:focus-visible .sidebar-locations__chevron {
	opacity: 1;
	color: var(--c-orange-deep);
}

/* Cities list — one per line so long city names don't get truncated. */
.sidebar-locations__cities {
	margin: 0;
	padding: 0 0 .75rem .5rem;
	list-style: none;
	display: flex;
	flex-direction: column;
	gap: .15rem;
}

.sidebar-locations__cities li { margin: 0; }

.sidebar-locations__cities a {
	display: block;
	padding: .2rem .25rem;
	color: var(--c-orange-deep);
	text-decoration: none;
	font-size: .875rem;
	line-height: 1.35;
	border-radius: 4px;
	transition: background .12s ease, color .12s ease;
}

.sidebar-locations__cities a:hover,
.sidebar-locations__cities a:focus-visible {
	background: rgba(244, 111, 12, .08);
	color: var(--c-orange-brand);
	outline: none;
}

@media (prefers-reduced-motion: no-preference) {
	.sidebar-locations__province[open] .sidebar-locations__cities {
		animation: sidebar-locations-fade .2s ease-out;
	}
	@keyframes sidebar-locations-fade {
		from { opacity: 0; transform: translateY(-4px); }
		to   { opacity: 1; transform: translateY(0); }
	}
}

.service-parent__content-inner h2 {
	position: relative;
	margin-top: 2rem;
	margin-bottom: .25rem;
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 1.5rem;
	color: var(--c-dark);
	font-size: 1.5rem;
	font-weight: 700;
}

/* Orange diamond marker before each h2 — same motif as hero bullets. */
.service-parent__content-inner h2::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: .7rem;
	height: .7rem;
	background: var(--c-orange-brand);
	border-radius: 2px;
	transform: rotate(45deg);
}

/* Pull the immediately-following paragraph tight under the h2. */
.service-parent__content-inner h2 + p {
	margin-top: 0;
}

.service-parent__content-inner h3 {
	margin-top: 1.5rem;
	margin-bottom: .5rem;
	padding-bottom: 0;
	color: var(--c-dark);
	font-size: 1.25rem;
}

/* Lead paragraph — first p directly inside content-inner. */
.service-parent__content-inner > p:first-of-type {
	font-size: 1.1875rem;
	line-height: 1.7;
	color: var(--c-dark);
	font-weight: 500;
	margin: 0 0 1.5rem;
}

/* Orange brand-drop-cap on the lead paragraph. */
.service-parent__content-inner > p:first-of-type::first-letter {
	float: left;
	font-size: 3.75rem;
	line-height: .9;
	font-weight: 800;
	color: var(--c-orange-brand);
	margin: .25rem .65rem 0 0;
	padding: 0;
	font-family: inherit;
}

.service-parent__content-inner a {
	color: var(--c-orange-brand);
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 2px;
	transition: color .12s ease, text-decoration-thickness .12s ease;
}

.service-parent__content-inner a:hover,
.service-parent__content-inner a:focus-visible {
	color: var(--c-orange-deep);
	text-decoration-thickness: 2px;
}

/* Unordered lists — orange diamond marker matching hero bullets + h2. */
.service-parent__content-inner ul {
	list-style: none;
	padding-left: 1.5rem;
	margin: 1rem 0;
}

.service-parent__content-inner ul li {
	position: relative;
	padding-left: 1.25rem;
	margin-bottom: .5rem;
	line-height: 1.55;
}

.service-parent__content-inner ul li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .55em;
	width: .55rem;
	height: .55rem;
	background: var(--c-orange-brand);
	border-radius: 2px;
	transform: rotate(45deg);
}

/* Ordered lists — numeric markers tinted brand orange. */
.service-parent__content-inner ol {
	padding-left: 1.5rem;
	margin: 1rem 0;
}

.service-parent__content-inner ol li {
	margin-bottom: .5rem;
	line-height: 1.55;
}

.service-parent__content-inner ol li::marker {
	color: var(--c-orange-brand);
	font-weight: 700;
}

/* Images — soft rounding + subtle drop shadow. */
.service-parent__content-inner img {
	max-width: 100%;
	height: auto;
	border-radius: 10px;
	box-shadow:
		0 4px 16px rgba(0, 0, 0, .08),
		0 1px 3px rgba(0, 0, 0, .04);
	margin: 1rem 0;
}

/* Gallery images keep the slick.js mask — no shadow. */
.service-parent__gallery img {
	box-shadow: none;
	border-radius: 6px;
	margin: 0;
}

/* ── Dryer-vent video container ───────────────────────────── */
.service-parent__content .video-container {
	max-width: 900px;
	margin: 1.5rem auto;
}

.service-parent__content .video-container iframe {
	width: 100%;
	max-width: 100%;
	aspect-ratio: 16 / 9;
	height: auto;
	border: 0;
	border-radius: 8px;
}

/* ── Gallery container (preserves existing #landing + img markup) ── */
.service-parent__gallery {
	max-width: 900px;
	margin: 2rem auto;
}

.service-parent__gallery #landing img {
	max-width: 100%;
	height: auto;
	border-radius: 6px;
	margin-bottom: .75rem;
}

/* ── Mobile ───────────────────────────────────────────────── */
@media (max-width: 480px) {
	.service-parent__content { padding: 1.75rem 1rem 2rem; }
}

/* ── Service FAQ section ──────────────────────────────────────── */
.service-faq {
	padding: 4rem 1.25rem;
	background: var(--c-white);
}

.service-faq__container {
	max-width: 880px;
	margin: 0 auto;
}

.service-faq__eyebrow {
	margin: 0 0 .5rem;
	font-size: .8125rem;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: .12em;
	color: var(--c-orange-brand);
}

.service-faq__heading {
	margin: 0 0 2rem;
	font-size: 2rem;
	font-weight: 800;
	line-height: 1.2;
	color: var(--c-dark);
	letter-spacing: -.01em;
}

.service-faq__heading-accent {
	color: var(--c-orange-brand);
}

.service-faq__list {
	border-top: 1px solid rgba(35, 31, 32, .1);
}

.service-faq__item {
	border-bottom: 1px solid rgba(35, 31, 32, .1);
}

.service-faq__question {
	display: flex;
	align-items: center;
	gap: 1rem;
	padding: 1.1rem .25rem;
	cursor: pointer;
	list-style: none;
	user-select: none;
	transition: color .15s ease;
}

.service-faq__question::-webkit-details-marker { display: none; }
.service-faq__question::marker { content: ""; }

.service-faq__question:hover,
.service-faq__question:focus-visible {
	color: var(--c-orange-deep);
	outline: none;
}
.service-faq__question:focus-visible {
	outline: 2px solid var(--c-orange-brand);
	outline-offset: 2px;
	border-radius: 4px;
}

.service-faq__question-text {
	flex: 1;
	font-size: 1.0625rem;
	font-weight: 600;
	line-height: 1.4;
	color: var(--c-dark);
}

.service-faq__question:hover .service-faq__question-text,
.service-faq__question:focus-visible .service-faq__question-text {
	color: var(--c-orange-deep);
}

.service-faq__chevron {
	flex-shrink: 0;
	color: var(--c-dark);
	opacity: .55;
	transition: transform .2s ease, opacity .15s ease, color .15s ease;
}

.service-faq__item[open] .service-faq__chevron {
	transform: rotate(180deg);
	opacity: 1;
	color: var(--c-orange-brand);
}

.service-faq__question:hover .service-faq__chevron,
.service-faq__question:focus-visible .service-faq__chevron {
	opacity: 1;
	color: var(--c-orange-deep);
}

.service-faq__answer {
	padding: 0 .25rem 1.25rem;
	color: rgba(35, 31, 32, .85);
}

.service-faq__answer p {
	margin: 0;
	font-size: 1rem;
	line-height: 1.6;
}

@media (prefers-reduced-motion: no-preference) {
	.service-faq__item[open] .service-faq__answer {
		animation: service-faq-fade .2s ease-out;
	}
	@keyframes service-faq-fade {
		from { opacity: 0; transform: translateY(-4px); }
		to   { opacity: 1; transform: translateY(0); }
	}
}

@media (max-width: 600px) {
	.service-faq { padding: 2.5rem 1rem 3rem; }
	.service-faq__heading { font-size: 1.5rem; }
}

/* ── Franchisee × Service page additions (task_0077) ────────────────────
 * Only the elements that diverge from the parent service-page template:
 * NAP card, "We also serve" sister-city list, related-services grid,
 * and the per-franchisee hero phone CTA (re-enabled for this template
 * since the phone is unique-per-page rather than a CallTrak DNI string). */

/* Match the page-parent dark-nav-bleed trick on franchisee templates too.
   The body class WP applies is page-id-{N}; we can't gate by template name
   the same way since this template is auto-routed. Use the data-page hook. */
body:has(.hero[data-page="franchisee-service"]) {
	background-color: var(--c-dark);
}

/* Per-franchisee phone CTA inside the hero white card. */
.hero[data-page="franchisee-service"] .hero-service-phone {
	margin: .75rem 0 0;
	font-size: 1.0625rem;
	color: var(--c-dark);
}
.hero[data-page="franchisee-service"] .hero-service-phone a {
	color: var(--c-orange-deep);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 3px;
	transition: color .15s ease;
}
.hero[data-page="franchisee-service"] .hero-service-phone a:hover,
.hero[data-page="franchisee-service"] .hero-service-phone a:focus-visible {
	color: var(--c-orange-brand);
}

/* Sidebar NAP card */
.service-parent__sidebar-nap {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(35, 31, 32, .08);
}
.service-parent__sidebar-nap-heading {
	margin: 0 0 .5rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--c-dark);
}
.service-parent__sidebar-nap-address {
	font-style: normal;
	font-size: .9375rem;
	line-height: 1.5;
	color: var(--c-dark);
	margin: 0 0 .75rem;
}
.service-parent__sidebar-nap-hours {
	margin: 0 0 .5rem;
	font-size: .875rem;
	line-height: 1.5;
	color: var(--c-dark);
}
.service-parent__sidebar-nap-hours strong { font-weight: 700; }
.service-parent__sidebar-nap-email {
	margin: 0 0 .75rem;
	font-size: .9375rem;
}
.service-parent__sidebar-nap-email a {
	color: var(--c-orange-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.service-parent__sidebar-nap-social {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	gap: .5rem;
	flex-wrap: wrap;
}
.service-parent__sidebar-nap-social a {
	color: var(--c-dark);
	font-size: .8125rem;
	text-decoration: none;
	padding: .35rem .65rem;
	border: 1px solid rgba(35, 31, 32, .15);
	border-radius: 6px;
	transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.service-parent__sidebar-nap-social a:hover,
.service-parent__sidebar-nap-social a:focus-visible {
	background: var(--c-orange-brand);
	color: var(--c-white);
	border-color: var(--c-orange-brand);
}

/* Section wrappers — sister-cities "We also serve" and "More services in
   {City}" both render as compact vertical text-link stacks. Shared style. */
.service-parent__sidebar-area,
.service-parent__sidebar-related {
	margin-top: 1.25rem;
	padding-top: 1.25rem;
	border-top: 1px solid rgba(35, 31, 32, .08);
}
.service-parent__sidebar-area-heading,
.service-parent__sidebar-related-heading {
	margin: 0 0 .5rem;
	font-size: 1rem;
	font-weight: 700;
	color: var(--c-dark);
}
.service-parent__sidebar-area-list,
.service-parent__sidebar-related-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: .1rem;
}
.service-parent__sidebar-area-list li,
.service-parent__sidebar-related-list li { margin: 0; }
.service-parent__sidebar-area-list a,
.service-parent__sidebar-related-list a {
	display: block;
	padding: .35rem .25rem;
	font-size: .875rem;
	line-height: 1.4;
	color: var(--c-orange-deep);
	text-decoration: none;
	border-radius: 4px;
	transition: background .15s ease, color .15s ease;
}
.service-parent__sidebar-area-list a:hover,
.service-parent__sidebar-area-list a:focus-visible,
.service-parent__sidebar-related-list a:hover,
.service-parent__sidebar-related-list a:focus-visible {
	background: rgba(244, 111, 12, .08);
	color: var(--c-orange-brand);
}

/* ── Reviews carousel re-skin (overrides the plugin's inline styles).
 *    Owner: too heavy by default — white section background, compact
 *    circular controls anchored bottom-right, brand-consistent type.
 *    Plugin output lives in tc_show_reviews() (location-admin plugin,
 *    read-only); all polish here is CSS overrides. */
.reviews-carousel {
	background: var(--c-white);
	padding: 4rem 0;
}
.reviews-carousel .container.bg-light {
	background: var(--c-white) !important; /* fight Bootstrap util's !important */
	box-shadow: none !important;
	border: 0 !important;
	padding: 2rem !important;
}
.reviews-carousel .container.rounded { border-radius: 0 !important; }
.reviews-carousel .container.shadow-sm { box-shadow: none !important; }
@media (min-width: 992px) {
	.reviews-carousel .container.bg-light { padding: 3rem 4rem !important; }
}

.reviews-carousel h2 {
	color: var(--c-dark);
	font-size: 1.25rem;
	font-weight: 700;
	margin: 0 0 .5rem;
}
.reviews-carousel .display-4 {
	font-size: 3rem;
	font-weight: 800;
	color: var(--c-orange-brand);
	line-height: 1;
}
.reviews-carousel .text-muted,
.reviews-carousel .text-muted.small,
.reviews-carousel small.text-muted {
	color: rgba(35, 31, 32, .6) !important;
}
.reviews-carousel h6 {
	color: var(--c-dark);
	font-size: 1rem;
	font-weight: 700;
	margin: 0;
}

@media (min-width: 992px) {
	.reviews-carousel .border-end-lg {
		border-right: 1px dotted rgba(35, 31, 32, .15) !important;
	}
}

.reviews-carousel .btn-outline-dark {
	border: 2px solid var(--c-dark);
	color: var(--c-dark);
	background: transparent;
	border-radius: 6px;
	padding: .5rem 1rem;
	font-size: .875rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: .04em;
	transition: background .15s ease, color .15s ease;
}
.reviews-carousel .btn-outline-dark:hover,
.reviews-carousel .btn-outline-dark:focus-visible {
	background: var(--c-dark);
	color: var(--c-white);
}

.reviews-carousel .review-text {
	color: var(--c-dark);
	font-size: 1rem;
	line-height: 1.6;
	font-style: italic;
	margin: 0 0 1rem;
}
.reviews-carousel .text-warning { color: var(--c-orange-brand) !important; }

/* Compact 40px circular controls at the bottom-right of the carousel area
   (replaces Bootstrap's full-height transparent overlay arrows). */
.reviews-carousel .carousel-control-prev,
.reviews-carousel .carousel-control-next {
	width: 40px;
	height: 40px;
	top: auto;
	bottom: 1rem;
	background: var(--c-dark);
	border-radius: 999px;
	opacity: 1;
	transition: background .15s ease, transform .15s ease;
}
.reviews-carousel .carousel-control-prev {
	left: auto;
	right: 4.5rem;
}
.reviews-carousel .carousel-control-next {
	right: 1rem;
}
.reviews-carousel .carousel-control-prev:hover,
.reviews-carousel .carousel-control-next:hover,
.reviews-carousel .carousel-control-prev:focus-visible,
.reviews-carousel .carousel-control-next:focus-visible {
	background: var(--c-orange-brand);
	transform: translateY(-1px);
}
.reviews-carousel .carousel-control-prev-icon,
.reviews-carousel .carousel-control-next-icon {
	width: 18px;
	height: 18px;
	background-color: transparent !important; /* kill the plugin's bg-dark on inner span */
	border-radius: 0;
}
@media (max-width: 767.98px) {
	.reviews-carousel .carousel-control-prev,
	.reviews-carousel .carousel-control-next { display: none; }
}


/* ── Franchisee CPT hero — task_0084 / restructured in 0085 ──── */

.franchisee-cpt-hero__owner {
	display: flex;
	align-items: center;
	gap: .85rem;
	margin: .5rem 0 1rem;
}

.franchisee-cpt-hero__headshot {
	width: 64px;
	height: 64px;
	border-radius: 50%;
	object-fit: cover;
	object-position: center top;
	border: 2px solid var(--c-orange-brand);
	box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
	flex-shrink: 0;
}

.franchisee-cpt-hero__subtitle {
	margin: 0;
	font-size: .9375rem;
	color: rgba(35, 31, 32, .7);
	font-weight: 500;
	line-height: 1.4;
}

@media (max-width: 600px) {
	.franchisee-cpt-hero__headshot {
		width: 56px;
		height: 56px;
	}
}

/* Breadcrumb non-link items darker on the white hero card — task_0085 */
.hero[data-page="franchisee-cpt"] .breadcrumbs,
.hero[data-page="franchisee-cpt"] .breadcrumbs li,
.hero[data-page="franchisee-cpt"] .breadcrumbs .separator,
.hero[data-page="franchisee-cpt"] .breadcrumbs .item-current,
.hero[data-page="franchisee-cpt"] .breadcrumbs .bread-current {
	color: var(--c-dark);
}

.hero[data-page="franchisee-cpt"] .breadcrumbs .bread-current {
	font-weight: 700;
}

.hero[data-page="franchisee-cpt"] .breadcrumbs a {
	color: var(--c-orange-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
}
.hero[data-page="franchisee-cpt"] .breadcrumbs a:hover,
.hero[data-page="franchisee-cpt"] .breadcrumbs a:focus-visible {
	color: var(--c-orange-brand);
}

/* Single-column content grid on franchisee CPT (sidebar dropped) — task_0085 */
.service-parent__content--single .service-parent__content-grid {
	grid-template-columns: 1fr;
	max-width: 880px;
	margin: 0 auto;
}

/* Services offered list inside hero left card */
.franchisee-cpt-services {
	margin: 1rem 0;
}

.franchisee-cpt-services__heading {
	margin: 0 0 .5rem;
	font-size: .9375rem;
	font-weight: 700;
	color: var(--c-dark);
	text-transform: uppercase;
	letter-spacing: .04em;
}

.franchisee-cpt-services__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: .25rem .75rem;
}

@media (max-width: 600px) {
	.franchisee-cpt-services__list {
		grid-template-columns: 1fr;
	}
}

.franchisee-cpt-services__list li {
	position: relative;
	padding-left: 1.25rem;
	line-height: 1.5;
}

.franchisee-cpt-services__list li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .5em;
	width: .55rem;
	height: .55rem;
	background: var(--c-orange-brand);
	border-radius: 2px;
	transform: rotate(45deg);
}

.franchisee-cpt-services__list a {
	color: var(--c-dark);
	text-decoration: none;
	font-size: .9375rem;
	font-weight: 500;
	transition: color 120ms ease;
}

.franchisee-cpt-services__list a:hover,
.franchisee-cpt-services__list a:focus-visible {
	color: var(--c-orange-deep);
	text-decoration: underline;
}

/* ── Franchisee CPT — services-with-descriptions card grid — task_0085 ── */

.franchisee-cpt-services-grid {
	margin: 3rem 0 0;
	padding: 2rem 0 0;
	border-top: 1px solid rgba(35, 31, 32, .08);
}

.franchisee-cpt-services-grid__heading {
	margin: 0 0 1.5rem;
	font-size: 1.75rem;
	font-weight: 800;
	color: var(--c-dark);
}

.franchisee-cpt-services-grid__list {
	display: grid;
	grid-template-columns: 1fr;
	gap: 1rem;
}

@media (min-width: 600px) {
	.franchisee-cpt-services-grid__list {
		grid-template-columns: 1fr 1fr;
		gap: 1.25rem;
	}
}

@media (min-width: 1024px) {
	.franchisee-cpt-services-grid__list {
		grid-template-columns: repeat(3, 1fr);
	}
}

.franchisee-cpt-services-grid__card {
	background: var(--c-white);
	border: 1px solid rgba(35, 31, 32, .08);
	border-radius: 10px;
	padding: 1.5rem 1.25rem;
	transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}

.franchisee-cpt-services-grid__card:hover {
	transform: translateY(-2px);
	border-color: var(--c-orange-brand);
	box-shadow: 0 8px 20px rgba(0, 0, 0, .06);
}

.franchisee-cpt-services-grid__card-title {
	margin: 0 0 .5rem;
	font-size: 1.125rem;
	font-weight: 700;
	color: var(--c-dark);
}

.franchisee-cpt-services-grid__card-excerpt {
	margin: 0 0 .75rem;
	font-size: .9375rem;
	line-height: 1.5;
	color: rgba(35, 31, 32, .75);
}

.franchisee-cpt-services-grid__card-link {
	display: inline-block;
	font-weight: 700;
	font-size: .9375rem;
	color: var(--c-orange-deep);
	text-decoration: underline;
	text-underline-offset: 2px;
	text-decoration-color: rgba(244, 111, 12, .35);
	transition: color 120ms ease, text-decoration-color 120ms ease;
}

.franchisee-cpt-services-grid__card-link:hover,
.franchisee-cpt-services-grid__card-link:focus-visible {
	color: var(--c-orange-brand);
	text-decoration-color: var(--c-orange-brand);
}

@media (prefers-reduced-motion: reduce) {
	.franchisee-cpt-services-grid__card,
	.franchisee-cpt-services-grid__card:hover {
		transition: none;
		transform: none;
	}
}