/* =====================================================================
   Top Grade Movers — pages/assisted-moves.css
   Assisted & Supported Moves (single-service.php assisted branch).
   The hero, split intro, photo + features, process (dark), stats bar and
   CTA band are all shared sections styled in components/sections.css.
   Only the hero glow modifier and the WINZ / ACC support-card grid — the
   one section unique to this page — belong here.
   ===================================================================== */

/* =========================================================
   0. HERO — soft radial glows over the shared .page-hero
   ========================================================= */
.page-hero--assisted::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		radial-gradient(circle at 18% 40%, rgba(var(--primary-rgb), .28) 0%, rgba(var(--primary-rgb), 0) 52%),
		radial-gradient(circle at 85% 85%, rgba(var(--primary-rgb), .12) 0%, rgba(var(--primary-rgb), 0) 50%);
}
/* Figma casing is verbatim ("Assisted &"); the shared .page-hero__title
   capitalizes every word, which would wrongly force "Assisted &". */
.page-hero--assisted .page-hero__title { text-transform: none; }

/* The compassion photo sits on white here rather than the shared grey. */
.photo-features--assisted { background: var(--background-color); }

/* =========================================================
   1. SUPPORT CARDS — "Two Ways We Help." (dark section)
   ========================================================= */
.support-cards {
	position: relative;
	/* Same token the Services grid uses for the design's black band. */
	background: var(--dark-bg-3);
	padding: 6.25rem 0 6.875rem;
	overflow: hidden;
}
/* Soft orange bloom bleeding off the right edge. */
.support-cards::after {
	content: "";
	position: absolute;
	top: 50%;
	right: -60px;
	width: 340px;
	height: 340px;
	transform: translateY(-50%);
	pointer-events: none;
	background: radial-gradient(circle, rgba(var(--primary-rgb), .06) 0%, rgba(var(--primary-rgb), 0) 70%);
}
.support-cards .tg-container { position: relative; z-index: 1; }

.support-cards__head { margin-bottom: 3.5rem; }
.support-cards__eyebrow {
	display: block;
	color: var(--primary-color);
	letter-spacing: .3em;
	margin-bottom: 1rem;
}
.support-cards__heading {
	font-size: clamp(2rem, 3.2vw, 3.125rem);
	font-weight: var(--font-weight-extrabold);
	letter-spacing: -.025em;
	color: var(--text-color-light);
	margin: 0;
}
.support-cards__heading i { font-style: italic; }

.support-cards__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 2.125rem;
}

.support-card {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 1.55rem;
	border: 1px solid var(--dark-border);
	border-radius: var(--radius-8);
	padding: 3.1875rem 2.9375rem;
	overflow: hidden;
}

.support-card__head { display: flex; align-items: center; gap: 1.375rem; }
.support-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 78px;
	height: 78px;
	border-radius: var(--radius-lg);
	background: rgba(var(--primary-rgb), .1);
	color: var(--primary-color);
}
.support-card__icon svg { width: 38px; height: 38px; }
.support-card__badge {
	display: inline-block;
	background: rgba(var(--primary-rgb), .1);
	color: var(--primary-color);
	font-size: .6875rem;
	font-weight: var(--font-weight-bold);
	letter-spacing: .16em;
	text-transform: uppercase;
	border-radius: var(--radius-30);
	padding: .375rem .875rem;
	margin-bottom: .5rem;
}
.support-card__title {
	font-size: 1.875rem;
	font-weight: var(--font-weight-extrabold);
	letter-spacing: -.015em;
	color: var(--text-color-light);
	margin: 0;
}

.support-card__text {
	color: rgba(var(--white-rgb), .82);
	font-size: var(--body-size);
	line-height: 1.8;
	margin: 0;
}

.support-card__list {
	list-style: none;
	width: 100%;
	margin: 0;
	padding: 1.875rem 0 0;
	border-top: 1px solid var(--dark-border);
	display: flex;
	flex-direction: column;
	gap: .875rem;
}
.support-card__point {
	display: flex;
	align-items: flex-start;
	gap: .75rem;
	color: rgba(var(--white-rgb), .82);
	font-size: .90625rem;
	line-height: 1.55;
}
.support-card__point strong {
	font-weight: var(--font-weight-bold);
	color: var(--text-color-light);
}
.support-card__check {
	display: inline-flex;
	flex-shrink: 0;
	color: var(--primary-color);
	margin-top: 1px;
}
.support-card__check svg { width: 20px; height: 20px; }

/* Both cards are the same height in the design and their CTAs share a
   baseline, so the button is pushed to the bottom regardless of how many
   lines the checklist above it wraps to. */
.support-card__cta { display: inline-flex; align-items: center; gap: .5rem; margin-top: auto; }

.support-card__num {
	position: absolute;
	top: 1.5rem;
	right: 1.875rem;
	font-size: 4rem;
	line-height: 1;
	font-weight: var(--font-weight-extrabold);
	color: rgba(var(--white-rgb), .28);
	pointer-events: none;
}

/* =========================================================
   2. RESPONSIVE
   (shared header/footer/hero/process/stats/cta breakpoints live in
   media.css / components/sections.css; these are specific to this page)
   ========================================================= */
@media (max-width: 991.98px) {
	.support-cards__row { grid-template-columns: 1fr; }
	.support-card { padding: 2.5rem 2rem; }
}

@media (max-width: 767.98px) {
	.support-cards { padding: 4rem 0 4.5rem; }
	.support-card__head { flex-wrap: wrap; gap: 1rem; }
	.support-card__title { font-size: var(--h4-size); }
	.support-card__num { font-size: 3rem; right: 1.25rem; }
	.support-card__cta { width: 100%; justify-content: center; }
}