/**
 * Design Sprint 2 — Premium Component System.
 *
 * Carries Sprint 1's hero language (warm ivory canvas, deep-teal ink, one
 * amber accent, generous whitespace, soft elevation, transform-only
 * motion) across the rest of the homepage: Services, Why Choose Us,
 * Statistics, Process, Testimonials, Featured Caregivers, Featured
 * Cities, FAQ and the Final CTA.
 *
 * The hero is NOT touched. `assets/css/hero-premium.css` owns
 * `.home-hero--premium` and nothing here selects it.
 *
 * Loaded on the front page and on the service/city routes — the same
 * condition `service.css` / `city.css` already use — because Service
 * Card, City Card, Feature Card and the FAQ accordion all render on
 * those routes too, and a card that looks different on /services/ than on
 * the homepage is the exact "separate blocks" failure this sprint exists
 * to remove.
 *
 * Design-system rules observed here:
 *   - No hardcoded colour. Every value is a global token, or a `color-mix`
 *     derived from one, with a `@supports` fallback to an existing token.
 *   - No duplicated spacing / radius / shadow / type scale. The few local
 *     custom properties below are *aliases* of global tokens, declared
 *     once, so a shadow or radius is still defined in exactly one place.
 *   - Mobile-first: base rules are the 360px layout, every media query is
 *     `min-width`.
 *
 * Motion: `transform` and `opacity` only, never a layout property, so no
 * section here can contribute to CLS. The scroll-reveal used by these
 * below-the-fold sections is the theme's existing `.u-fade-up` system,
 * which is correct here precisely because it is *not* the LCP region.
 */

/* ==================================================================
   0. Local aliases — one definition each, all derived from tokens
   ================================================================== */

:root {
	--premium-radius: var(--radius-xl);
	--premium-radius-sm: var(--radius-lg);
	--premium-lift: -6px;

	--premium-ring: color-mix(in srgb, var(--color-primary-900) 10%, transparent);
	--premium-ring-strong: color-mix(in srgb, var(--color-primary-500) 26%, transparent);
	--premium-surface: var(--color-background);
	--premium-surface-soft: color-mix(in srgb, var(--color-primary-50) 55%, var(--color-background));
	--premium-ink-soft: color-mix(in srgb, var(--color-text-inverse) 78%, transparent);

	--premium-shadow-soft: 0 2px 6px color-mix(in srgb, var(--color-primary-900) 6%, transparent);
	--premium-shadow-lift: 0 22px 44px color-mix(in srgb, var(--color-primary-900) 14%, transparent);
	--premium-shadow-panel: 0 30px 64px color-mix(in srgb, var(--color-primary-900) 28%, transparent);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	:root {
		--premium-ring: var(--color-border);
		--premium-ring-strong: var(--color-primary-300);
		--premium-surface-soft: var(--color-primary-50);
		--premium-ink-soft: var(--color-text-inverse);
		--premium-shadow-soft: var(--shadow-sm);
		--premium-shadow-lift: var(--shadow-card-hover);
		--premium-shadow-panel: var(--shadow-xl);
	}
}

/* ==================================================================
   1. Section heading — one rhythm for every section on the page
   ================================================================== */

.section-heading__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	margin-block-end: var(--space-3);
	color: var(--color-primary-600);
	font-size: var(--font-size-xs);
	letter-spacing: 0.14em;
}

/* The same drawn status dot the hero eyebrow uses, so the two read as one
   component at different sizes. Decorative, so it is drawn not marked up. */
.section-heading__eyebrow::before {
	content: '';
	inline-size: 0.375rem;
	block-size: 0.375rem;
	flex: 0 0 auto;
	border-radius: var(--radius-full);
	background-color: var(--color-primary-500);
}

.section-heading__title {
	font-size: clamp(1.875rem, 1.2rem + 2.4vw, 2.75rem);
	line-height: 1.12;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.section-heading__subtitle {
	max-inline-size: 46ch;
	font-size: var(--font-size-md);
	line-height: var(--line-height-relaxed);
	text-wrap: pretty;
}

/* ==================================================================
   2. Card foundation — equal height everywhere
   ------------------------------------------------------------------
   The grids wrap each card in a `.u-fade-up` entrance div, so the grid
   item is the wrapper, not the card. Making the wrapper a flex column
   and the card fill it is what gives a row of cards one shared height
   regardless of description length.
   ================================================================== */

/* Grid items already stretch to the tallest row member; these rules make
   the wrapper a flex container so the card inside can actually fill that
   stretched box instead of hugging its own content. Scoped to the grid
   components themselves (`.service-grid`, `.city-grid`) rather than to a
   homepage section, so a service card is the same height on /services/ as
   it is on the front page. */
.home-why-us .grid > *,
.home-caregivers .grid > *,
.city-grid > li {
	display: flex;
}

.home-why-us .grid > * > .card,
.home-caregivers .grid > * > .card,
.city-grid > li > .home-cities__item {
	inline-size: 100%;
}

.testimonial-carousel__slide > .testimonial-card {
	inline-size: 100%;
}

.service-card,
.feature-card,
.caregiver-card,
.testimonial-card {
	display: flex;
	flex-direction: column;
	border-radius: var(--premium-radius);
	border-color: var(--premium-ring);
	box-shadow: var(--premium-shadow-soft);
}

.service-card > .card__body,
.feature-card > .card__body,
.caregiver-card > .card__body,
.testimonial-card > .card__body {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-4);
	padding: var(--space-6);
}

/* One hover behaviour for every card on the page: a small lift, a warmer
   ring, a deeper shadow. Transform + shadow only — nothing reflows. */
.card--interactive:hover,
.card--interactive:focus-within {
	transform: translateY(var(--premium-lift));
	border-color: var(--premium-ring-strong);
	box-shadow: var(--premium-shadow-lift);
}

/* `:focus-within` deliberately only lifts the card — it does not draw a
   second outline. The focused link or button inside already gets the
   global focus-visible ring from accessibility.css, and stacking a card
   outline on top of it reads as two competing focus indicators. */

/* Shared icon medallion. Service / City / Feature / Caregiver icons were
   four slightly different sizes and radii; they are one component now. */
.service-card__icon,
.city-card__icon,
.feature-card__icon,
.caregiver-card__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 3.25rem;
	block-size: 3.25rem;
	flex: 0 0 auto;
	border-radius: var(--premium-radius-sm);
	background-image: linear-gradient(
		145deg,
		var(--premium-surface-soft),
		var(--color-primary-100)
	);
	color: var(--color-primary-600);
	box-shadow: inset 0 0 0 1px var(--premium-ring);
}

.service-card__icon svg,
.city-card__icon svg,
.feature-card__icon svg,
.caregiver-card__icon svg {
	inline-size: 1.5rem;
	block-size: 1.5rem;
}

/* ==================================================================
   3. Services
   ================================================================== */

.service-card__content {
	display: flex;
	flex: 1 1 auto;
	flex-direction: column;
	gap: var(--space-2);
}

.service-card__title {
	margin: 0;
	font-family: var(--font-family-heading);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-snug);
	letter-spacing: -0.01em;
}

.service-card__description {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-relaxed);
}

/* `margin-block-start: auto` is what pins the CTA row to the bottom of a
   stretched card — the whole point of the equal-height work above. */
.service-card__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
	margin-block-start: auto;
	padding-block-start: var(--space-4);
	border-block-start: 1px solid var(--premium-ring);
}

.service-card__link {
	margin-block-start: 0;
	font-size: var(--font-size-sm);
}

/* Sized here rather than by inventing a global `.btn--sm` modifier, so the
   button scale stays defined in exactly one place. */
.service-card__book {
	padding: var(--space-2) var(--space-5);
	border-radius: var(--radius-md);
	font-size: var(--font-size-sm);
	line-height: 1.2;
}

/* The category badge sits above the title as a quiet label. */
.service-badge .badge,
.city-badge .badge {
	background-color: var(--premium-surface-soft);
	color: var(--color-primary-700);
	letter-spacing: 0.08em;
}

/* ==================================================================
   4. Why Choose Us — feature cards
   ================================================================== */

.feature-card__title {
	margin: 0;
	font-family: var(--font-family-heading);
	font-size: var(--font-size-lg);
	line-height: var(--line-height-snug);
	letter-spacing: -0.01em;
}

.feature-card__description {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-relaxed);
}

.feature-card__link {
	margin-block-start: auto;
	padding-block-start: var(--space-2);
	font-size: var(--font-size-sm);
}

/* On the sage `.section--alt` band the plain white card can read flat, so
   it gets a faint top edge highlight instead of a heavier shadow. */
.section--alt .feature-card,
.section--alt .caregiver-card {
	box-shadow:
		inset 0 1px 0 var(--color-background),
		var(--premium-shadow-soft);
}

/* ==================================================================
   5. Statistics
   ------------------------------------------------------------------
   This section sits on the deep teal band radha-premium.css sets, so
   everything here is tuned for inverse text.
   ================================================================== */

.home-statistics .statistic-block {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-1);
	padding: var(--space-4) var(--space-2);
	text-align: center;
}

.home-statistics .statistic-block__number {
	margin: 0;
	color: var(--color-text-inverse);
	font-family: var(--font-family-heading);
	font-size: clamp(2.5rem, 1.6rem + 3vw, 3.75rem);
	font-weight: var(--font-weight-medium);
	line-height: 1;
	letter-spacing: -0.03em;
	/* Tabular figures keep the counter from reflowing as it ticks up —
	   the digits stay the same width from 0 to 1500. */
	font-variant-numeric: tabular-nums;
}

.home-statistics .statistic-block__suffix {
	color: var(--color-accent-400);
	font-size: 0.6em;
	letter-spacing: 0;
}

.home-statistics .statistic-block__label {
	margin: 0;
	color: var(--color-text-inverse);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.home-statistics .statistic-block__description {
	margin: 0;
	max-inline-size: 24ch;
	color: var(--premium-ink-soft);
	font-size: var(--font-size-xs);
	line-height: var(--line-height-relaxed);
}

/* ==================================================================
   6. Process — premium step timeline
   ------------------------------------------------------------------
   Mobile: a vertical rail with stacked cards. Desktop: the existing
   horizontal connector, refined. Both are drawn with a pseudo-element,
   so the timeline costs no extra markup and no JS.
   ================================================================== */

.process-steps {
	position: relative;
	display: grid;
	/* One column below 64rem, so the vertical rail is always a straight
	   line. `.grid-cols-4`'s two-column tablet step would break it. */
	grid-template-columns: 1fr;
	gap: var(--space-4);
}

/* Mobile rail: runs through the centre of the markers. Inset at both ends
   so it starts and stops at the first and last marker, not at the edge of
   the list. */
.process-steps::before {
	content: '';
	position: absolute;
	inset-block: 2.5rem;
	inset-inline-start: calc(var(--space-5) + 1.375rem);
	inline-size: 2px;
	background-image: linear-gradient(
		to bottom,
		var(--color-primary-300),
		var(--premium-ring)
	);
	z-index: 0;
}

.process-step {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: flex-start;
	gap: var(--space-4);
	padding: var(--space-5);
	text-align: start;
	border-radius: var(--premium-radius);
	border-color: var(--premium-ring);
	box-shadow: var(--premium-shadow-soft);
}

.process-step__marker {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
}

.process-step__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	margin-block-end: 0;
	border-radius: var(--radius-full);
	background-image: var(--gradient-primary);
	color: var(--color-text-inverse);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-lg);
	font-weight: var(--font-weight-semibold);
	line-height: 1;
	box-shadow: var(--shadow-glow-primary);
}

.process-step__icon {
	position: absolute;
	inset-block-end: -0.35rem;
	inset-inline-end: -0.35rem;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.5rem;
	block-size: 1.5rem;
	border-radius: var(--radius-full);
	background-color: var(--color-accent-400);
	color: var(--color-primary-900);
}

.process-step__icon svg {
	inline-size: 0.85rem;
	block-size: 0.85rem;
}

.process-step__body {
	min-inline-size: 0;
}

.process-step__title {
	margin: 0 0 var(--space-1);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-md);
	line-height: var(--line-height-snug);
}

.process-step__description {
	margin: 0;
	color: var(--color-text-muted);
	font-size: var(--font-size-sm);
	line-height: var(--line-height-relaxed);
}

.process-steps .process-step:hover {
	transform: translateY(var(--premium-lift));
	border-color: var(--premium-ring-strong);
	box-shadow: var(--premium-shadow-lift);
}

/* ==================================================================
   7. Testimonials
   ================================================================== */

.testimonial-card {
	position: relative;
	overflow: hidden;
	block-size: 100%;
}

.testimonial-card > .card__body {
	gap: var(--space-3);
}

/* The quote mark is decorative typography, not an icon asset — no extra
   request, and it scales with the heading font. */
.testimonial-card__quote-mark {
	position: absolute;
	inset-block-start: calc(var(--space-2) * -1);
	inset-inline-end: var(--space-4);
	color: var(--premium-surface-soft);
	font-family: var(--font-family-heading);
	font-size: 7rem;
	line-height: 1;
	pointer-events: none;
	user-select: none;
}

.testimonial-card__rating {
	position: relative;
	margin-block-end: 0;
}

.testimonial-card__quote {
	position: relative;
	flex: 1 1 auto;
	margin: 0;
	color: var(--color-text);
	font-size: var(--font-size-base);
	line-height: var(--line-height-relaxed);
	text-wrap: pretty;
}

.testimonial-card__footer {
	display: flex;
	align-items: center;
	gap: var(--space-3);
	margin-block-start: auto;
	padding-block-start: var(--space-4);
	border-block-start: 1px solid var(--premium-ring);
}

/* Monogram avatar. There is no customer photo in the data, and a stock
   face would be a picture of someone who did not write the review. */
.testimonial-card__avatar {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	flex: 0 0 auto;
	border-radius: var(--radius-full);
	background-image: var(--gradient-primary);
	color: var(--color-text-inverse);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-base);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.02em;
}

.testimonial-card__author {
	margin: 0;
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	color: var(--color-heading);
}

.testimonial-card__service {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: var(--space-1) var(--space-2);
	margin-block-start: var(--space-1);
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-regular);
}

.testimonial-card__city {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	padding-inline-start: var(--space-2);
	border-inline-start: 1px solid var(--premium-ring);
	color: var(--color-primary-600);
}

.testimonial-card__city svg {
	inline-size: 0.85rem;
	block-size: 0.85rem;
	flex: 0 0 auto;
}

/* Swipe-friendly track: the next card peeks in at the edge so the row
   reads as scrollable without needing a hint label. */
.testimonial-carousel__track {
	gap: var(--space-4);
	padding-inline: var(--space-1);
	scroll-padding-inline-start: var(--space-1);
	/* Room for the card's hover lift, which would otherwise be clipped by
	   the track's own `overflow-x`. */
	padding-block: var(--space-2) var(--space-4);
}

.testimonial-carousel__slide {
	flex-basis: 86%;
	display: flex;
}

/* The dots are real buttons; at 8px they are far below WCAG 2.2's 24px
   minimum target size. Padding plus `background-clip: content-box` grows
   the hit area to 24px without changing how the dot looks. */
.testimonial-carousel__dot {
	box-sizing: content-box;
	inline-size: 0.5rem;
	block-size: 0.5rem;
	padding: var(--space-2);
	background-clip: content-box;
}

/* ==================================================================
   8. Featured Caregivers
   ================================================================== */

.caregiver-card {
	text-align: start;
}

.caregiver-card__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: var(--space-3);
}

.caregiver-card__icon {
	margin-block-end: 0;
	/* Overrides the gradient-primary medallion in home.css so the caregiver
	   icon matches the shared icon component in §2. */
	background-image: linear-gradient(
		145deg,
		var(--premium-surface-soft),
		var(--color-primary-100)
	);
	color: var(--color-primary-600);
}

.caregiver-card__verified {
	gap: var(--space-1);
	padding: var(--space-1) var(--space-3);
	text-transform: none;
	letter-spacing: 0.01em;
	white-space: nowrap;
}

.caregiver-card__verified svg,
.caregiver-card__availability svg {
	inline-size: 0.85rem;
	block-size: 0.85rem;
	flex: 0 0 auto;
}

.caregiver-card__title {
	margin: 0;
	font-family: var(--font-family-heading);
	font-size: var(--font-size-md);
	line-height: var(--line-height-snug);
}

.caregiver-card__experience {
	margin: 0;
	color: var(--color-primary-600);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
}

.caregiver-card__skills {
	justify-content: flex-start;
	gap: var(--space-2);
	margin-block-start: auto;
}

.caregiver-card__skills .chip {
	padding: var(--space-1) var(--space-3);
	border-color: var(--premium-ring);
	background-color: var(--premium-surface-soft);
	color: var(--color-primary-700);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-medium);
}

.caregiver-card__languages {
	display: flex;
	flex-wrap: wrap;
	gap: var(--space-1) var(--space-3);
	margin: 0;
	padding: 0;
	list-style: none;
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
}

.caregiver-card__languages > li + li::before {
	content: '·';
	margin-inline-end: var(--space-3);
	color: var(--color-border-strong);
}

.caregiver-card__availability {
	align-self: flex-start;
	margin: 0;
	text-transform: none;
	letter-spacing: 0.01em;
}

.caregiver-card__link {
	display: inline-flex;
	align-items: center;
	gap: var(--space-1);
	margin-block-start: auto;
	color: var(--color-brand-primary);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-semibold);
	text-decoration: none;
}

.caregiver-card__link svg {
	inline-size: 1rem;
	block-size: 1rem;
	transition: transform var(--transition-fast) var(--ease-out);
}

.caregiver-card__link:hover svg {
	transform: translateX(3px);
}

/* ==================================================================
   9. Featured Cities
   ================================================================== */

.home-cities .city-grid {
	gap: var(--space-4);
}

.home-cities__item {
	position: relative;
	overflow: hidden;
	align-items: center;
	gap: var(--space-4);
	inline-size: 100%;
	padding: var(--space-5);
	border-radius: var(--premium-radius);
	border-color: var(--premium-ring);
	box-shadow: var(--premium-shadow-soft);
	font-weight: var(--font-weight-regular);
	transition:
		transform var(--transition-base) var(--ease-standard),
		box-shadow var(--transition-base) var(--ease-standard),
		border-color var(--transition-base) var(--ease-standard);
}

/* The overlay: a teal wash that sweeps in from the leading edge on hover.
   A pseudo-element with a transform, so nothing paints until it is used
   and nothing reflows when it does. */
.home-cities__item::before {
	content: '';
	position: absolute;
	inset: 0;
	background-image: linear-gradient(
		120deg,
		var(--premium-surface-soft),
		transparent 70%
	);
	opacity: 0;
	transition: opacity var(--transition-base) var(--ease-standard);
	pointer-events: none;
}

.home-cities__item:hover,
.home-cities__item:focus-visible {
	transform: translateY(var(--premium-lift));
	border-color: var(--premium-ring-strong);
	box-shadow: var(--premium-shadow-lift);
	color: var(--color-text);
}

.home-cities__item:hover::before,
.home-cities__item:focus-visible::before {
	opacity: 1;
}

.home-cities__item-icon {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2.75rem;
	block-size: 2.75rem;
	flex: 0 0 auto;
	border-radius: var(--premium-radius-sm);
	background-color: var(--premium-surface-soft);
	box-shadow: inset 0 0 0 1px var(--premium-ring);
}

.home-cities__item-text {
	position: relative;
	flex: 1 1 auto;
	min-inline-size: 0;
	gap: 0;
	font-family: var(--font-family-heading);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
	color: var(--color-heading);
	line-height: var(--line-height-snug);
}

.home-cities__item-region {
	margin-block-end: var(--space-1);
	color: var(--color-primary-600);
	font-family: var(--font-family-body);
	font-size: var(--font-size-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.home-cities__item-subtitle {
	margin-block-start: var(--space-1);
	font-family: var(--font-family-body);
	font-size: var(--font-size-xs);
}

.home-cities__item-meta {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: var(--space-2);
	flex: 0 0 auto;
}

.home-cities__item-count {
	color: var(--color-text-muted);
	font-size: var(--font-size-xs);
	white-space: nowrap;
}

.home-cities__item-arrow {
	display: inline-flex;
	color: var(--color-primary-600);
	transition: transform var(--transition-fast) var(--ease-out);
}

.home-cities__item:hover .home-cities__item-arrow {
	transform: translateX(3px);
}

/* ==================================================================
   10. FAQ — premium accordion
   ------------------------------------------------------------------
   Still a native <details>/<summary>: keyboard-operable, screen-reader
   announced and open-by-default-searchable with zero JavaScript.
   ================================================================== */

.faq__list {
	gap: var(--space-3);
}

.faq__item {
	padding: 0 var(--space-6);
	border-radius: var(--premium-radius-sm);
	border-color: var(--premium-ring);
	background-color: var(--premium-surface);
	box-shadow: var(--premium-shadow-soft);
	transition:
		border-color var(--transition-base) var(--ease-standard),
		box-shadow var(--transition-base) var(--ease-standard);
}

.faq__item:hover,
.faq__item[open] {
	border-color: var(--premium-ring-strong);
	box-shadow: var(--premium-shadow-lift);
}

/* 3.5rem minimum height puts the whole summary row well past the 24px
   WCAG 2.2 target-size minimum, and comfortably into thumb territory. */
.faq__question {
	min-block-size: 3.5rem;
	padding-block: var(--space-4);
	font-family: var(--font-family-heading);
	font-size: var(--font-size-md);
	font-weight: var(--font-weight-medium);
	line-height: var(--line-height-snug);
	color: var(--color-heading);
}

.faq__question:focus-visible {
	outline: 2px solid var(--color-focus-ring);
	outline-offset: -2px;
	border-radius: var(--radius-md);
}

.faq__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 2rem;
	block-size: 2rem;
	flex: 0 0 auto;
	border-radius: var(--radius-full);
	background-color: var(--premium-surface-soft);
}

.faq__answer {
	margin: 0;
	padding-block-end: var(--space-5);
	color: var(--color-text-muted);
	line-height: var(--line-height-relaxed);
	text-wrap: pretty;
}

/* Smooth open/close, progressively. Browsers without `::details-content`
   or `interpolate-size` simply snap open, exactly as they do today — this
   adds motion where it is free and never gates the content on it. */
@supports selector(::details-content) {
	@supports (interpolate-size: allow-keywords) {
		:root {
			interpolate-size: allow-keywords;
		}
	}

	.faq__item::details-content {
		block-size: 0;
		overflow: hidden;
		transition:
			block-size var(--transition-base) var(--ease-standard),
			content-visibility var(--transition-base) allow-discrete;
	}

	.faq__item[open]::details-content {
		block-size: auto;
	}
}

/* ==================================================================
   11. Final CTA — the conversion section
   ================================================================== */

.home-final-cta__panel {
	padding: var(--space-12) var(--space-6);
	border-radius: var(--premium-radius);
	box-shadow: var(--premium-shadow-panel);
}

/* An inner hairline gives the gradient panel a defined edge instead of
   bleeding into the ivory canvas. */
.home-final-cta__panel::after {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--color-white) 22%, transparent);
	pointer-events: none;
}

.home-final-cta__title {
	font-size: clamp(1.875rem, 1.15rem + 2.6vw, 2.75rem);
	line-height: 1.1;
	letter-spacing: -0.02em;
	text-wrap: balance;
}

.home-final-cta__subtitle {
	max-inline-size: 44ch;
	font-size: var(--font-size-md);
	line-height: var(--line-height-relaxed);
}

.home-final-cta__actions {
	margin-block-end: var(--space-3);
}

.home-final-cta__actions .btn {
	min-block-size: 3.25rem;
	padding-inline: var(--space-8);
	border-radius: var(--radius-lg);
}

.home-final-cta__actions .btn__icon {
	display: inline-flex;
	transition: transform var(--transition-fast) var(--ease-out);
}

.home-final-cta__actions .btn:hover .btn__icon {
	transform: translateX(3px);
}

/* Call / WhatsApp sit as quiet glass buttons next to the solid amber
   booking button, so the primary action stays unambiguous. */
.home-final-cta .quick-contact-buttons {
	margin-block-start: 0;
}

.home-final-cta .quick-contact-buttons__list a {
	min-block-size: 3.25rem;
	border: 1px solid color-mix(in srgb, var(--color-white) 34%, transparent);
	border-radius: var(--radius-lg);
	background-color: color-mix(in srgb, var(--color-white) 14%, transparent);
	color: var(--color-text-inverse);
}

.home-final-cta .quick-contact-buttons__list a:hover {
	background-color: color-mix(in srgb, var(--color-white) 24%, transparent);
	color: var(--color-text-inverse);
}

/* WhatsApp keeps its brand colour — it is a recognition cue, not a theme
   colour, and the theme already treats it that way elsewhere. */
.home-final-cta .quick-contact-buttons__list .cta-whatsapp a {
	border-color: transparent;
	background-color: var(--color-whatsapp);
}

.home-final-cta__trust {
	position: relative;
	z-index: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-3);
	margin: var(--space-10) 0 0;
	padding: var(--space-6) 0 0;
	border-block-start: 1px solid color-mix(in srgb, var(--color-white) 20%, transparent);
	list-style: none;
}

.home-final-cta__trust-item {
	display: inline-flex;
	align-items: center;
	gap: var(--space-2);
	color: var(--premium-ink-soft);
	font-size: var(--font-size-sm);
	font-weight: var(--font-weight-medium);
}

.home-final-cta__trust-item svg {
	inline-size: 1.05rem;
	block-size: 1.05rem;
	flex: 0 0 auto;
	color: var(--color-accent-400);
}

@supports not (color: color-mix(in srgb, red 50%, transparent)) {
	.home-final-cta .quick-contact-buttons__list a {
		border-color: var(--color-white);
		background-color: transparent;
	}

	.home-final-cta__trust {
		border-block-start-color: var(--color-white);
	}
}

/* ==================================================================
   12. Breakpoints
   ================================================================== */

/* ---- 30rem: two-up chips and a roomier card ---- */
@media (min-width: 30rem) {
	.service-card > .card__body,
	.feature-card > .card__body,
	.caregiver-card > .card__body,
	.testimonial-card > .card__body {
		padding: var(--space-6) var(--space-6) var(--space-5);
	}

	.testimonial-carousel__slide {
		flex-basis: 78%;
	}

	.home-final-cta__trust {
		flex-direction: row;
		flex-wrap: wrap;
		justify-content: center;
		gap: var(--space-4) var(--space-8);
	}
}

/* ---- 48rem: statistics divide, CTA buttons share a row ---- */
@media (min-width: 48rem) {
	/* A hairline in the middle of the grid gutter (gutter is --space-6, so
	   half of it is --space-3) turns four numbers into one aligned set. */
	.home-statistics .grid > * + * .statistic-block::before {
		content: '';
		position: absolute;
		inset-block: var(--space-2);
		inset-inline-start: calc(var(--space-3) * -1);
		inline-size: 1px;
		background-color: color-mix(in srgb, var(--color-white) 18%, transparent);
	}

	.home-final-cta__panel {
		padding: var(--space-16) var(--space-10);
	}

	/* Booking button and the Call / WhatsApp pair on one centred line. The
	   panel is already `text-align: center`, so making both blocks
	   inline-level is enough — no wrapper element required. */
	.home-final-cta__actions,
	.home-final-cta .quick-contact-buttons {
		display: inline-flex;
		vertical-align: middle;
		margin-block-end: 0;
	}

	.home-final-cta .quick-contact-buttons {
		margin-inline-start: var(--space-3);
	}

	.testimonial-carousel__slide {
		flex-basis: calc(50% - var(--space-2));
	}
}

/* ---- 64rem: the desktop process timeline ---- */
@media (min-width: 64rem) {
	.process-steps {
		/* `auto-fit` rather than a fixed four, so a three- or five-step
		   process laid out in the Section Manager still fills the row. */
		grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
		gap: var(--space-6);
	}

	/* The rail turns horizontal and runs through the marker row. */
	.process-steps::before {
		inset-block: auto;
		inset-block-start: 3.375rem;
		inset-inline: 12.5%;
		inline-size: auto;
		block-size: 2px;
		background-image: linear-gradient(
			to right,
			transparent,
			var(--color-primary-300) 15%,
			var(--color-primary-300) 85%,
			transparent
		);
	}

	.process-step {
		flex-direction: column;
		align-items: center;
		gap: var(--space-4);
		padding: var(--space-8) var(--space-5);
		text-align: center;
	}

	.testimonial-carousel__slide {
		flex-basis: calc(33.333% - var(--space-3));
	}

	.service-card > .card__body,
	.feature-card > .card__body,
	.caregiver-card > .card__body,
	.testimonial-card > .card__body {
		padding: var(--space-8);
	}

	.home-cities__item {
		padding: var(--space-6);
	}
}

/* ---- 80rem: the widest layout gets more air, not more columns ---- */
@media (min-width: 80rem) {
	.home-final-cta__panel {
		padding: var(--space-20) var(--space-16);
	}
}

/* ==================================================================
   13. Motion and contrast safeguards
   ================================================================== */

@media (prefers-reduced-motion: reduce) {
	.card--interactive:hover,
	.card--interactive:focus-within,
	.process-steps .process-step:hover,
	.home-cities__item:hover,
	.home-cities__item:focus-visible {
		transform: none;
	}

	.faq__item::details-content {
		transition: none;
	}

	.testimonial-carousel__track {
		scroll-behavior: auto;
	}
}

@media (forced-colors: active) {
	.service-card,
	.feature-card,
	.caregiver-card,
	.testimonial-card,
	.process-step,
	.home-cities__item,
	.faq__item {
		border: 1px solid CanvasText;
	}

	.testimonial-card__quote-mark,
	.home-cities__item::before,
	.home-final-cta__panel::after {
		display: none;
	}
}