.alovesinh-card-review::after {
	content: "\201D";
	position: absolute;
	top: 8px;
	right: 24px;
	font-size: 96px;
	font-weight: var( --alv-fw-bold );
	line-height: 1;
	color: var( --alv-quote-mark, var( --alv-c-blue-grey ) );
	pointer-events: none;
}

.alovesinh-card-review-quote {
	position: relative;
	z-index: 1;
	flex: 1;
	font-size: var( --alv-fs-3 );
}

.alovesinh-card-review-reviewer {
	position: relative;
	z-index: 1;
	padding-top: 14px;
	border-top: var( --alv-bd-hairline ) solid var( --alv-card-border );
}

/* A column of its own beside the initial: the name and the note are two lines, and a long name
	in a plain row would push the note past the card edge. */
.alovesinh-card-review-reviewer-text {
	display: flex;
	flex-direction: column;
	gap: var( --alv-sp-1 );
	min-width: 0;
}

.alovesinh-card-review-name {
	font-size: var( --alv-fs-3 );
	font-weight: var( --alv-fw-bold );
	color: var( --alv-card-title );
}

.alovesinh-card-review-note {
	display: flex;
	align-items: center;
	gap: var( --alv-sp-1 );
	font-size: var( --alv-fs-2 );
	color: var( --alv-card-text );
}

.alovesinh-card-review-note svg,
.alovesinh-card-review-note i {
	width: 14px;
	height: 14px;
	font-size: 14px;
}

/* One step lighter than the shared card ink: six of these run side by side and the darker text
	turns the row into a wall of type the eye slides off. */
.alovesinh-card-icon {
	--alv-card-text: var( --alv-c-text-muted );
}

/* The line above is written on the card itself, which outranks the dark skin's value however the
	skin is reached, so on a dark block the copy stays at the light ink and all but vanishes. */
.alovesinh-dark .alovesinh-card-icon {
	--alv-card-text: var( --alv-c-text-muted-dark );
}

/* Nothing by default: three of the four blocks that use this card leave the heading on the
	card's own 12px rhythm. Named twice because the shared card resets the margin of every h3 and
	h4 it holds at 0-1-1, which a single class here loses to whatever value it carries. */
.alovesinh-card-icon-title.alovesinh-card-icon-title {
	margin: var( --alv-card-icon-title-top, 0 ) 0 var( --alv-card-icon-title-bottom, 0 );
}

/* Keyed on the tag, which is what the source design itself keys on: a block that sits these
	cards directly under its h2 sets them to h3 and opens the gap, while a block nested a level
	deeper uses h4 and keeps the card rhythm. The hooks above still let one page overrule it. */
h3.alovesinh-card-icon-title {
	--alv-card-icon-title-top: 18px;
	--alv-card-icon-title-bottom: 8px;
}

.alovesinh-card-icon-description {
	font-size: var( --alv-fs-3 );
}

/* The wash is the literal peach the source design paints, not a tint computed from the accent:
	a 12% mix of the accent lands three shades lighter and the tile stops matching its siblings. */
.alovesinh-card-icon-tone-accent {
	--alv-icon-color: var( --alv-c-accent );
	--alv-icon-bg: var( --alv-c-orange-pale );
}

/* Deep green on a pale wash, not the bright mid-green: on a white card the bright one reads as a
	status light rather than as part of the type it sits beside. The dark block below swaps both. */
.alovesinh-card-icon-tone-success {
	--alv-icon-color: var( --alv-c-green-deep );
	--alv-icon-bg: var( --alv-c-green-pale );
}

.alovesinh-card-icon-tone-neutral {
	--alv-icon-color: var( --alv-c-slate );
	--alv-icon-bg: var( --alv-c-slate-pale );
}

.alovesinh-card-icon-tone-warning {
	--alv-icon-color: var( --alv-c-warning-text );
	--alv-icon-bg: var( --alv-c-warning-pale );
}

/* The plain card is a row of icon and text with no card chrome at all, so the grid is declared
	here rather than inherited: the widget prints no card class in this mode. The icon holds one
	cell across both rows, which keeps the title and its paragraph beside it without a wrapper. */
.alovesinh-card-icon-plain {
	display: grid;
	grid-template-columns: auto 1fr;
	align-items: flex-start;
	gap: 0 var( --alv-sp-2 );
}

.alovesinh-card-icon-plain .alovesinh-icon-box {
	grid-row: span 2;
}

.alovesinh-card-icon-plain .alovesinh-card-icon-title {
	margin: 0 0 4px;
	letter-spacing: -0.005em;
}

.alovesinh-card-tile {
	gap: var( --alv-sp-3 );
	height: 100%;
	padding: 36px var( --alv-sp-4 );
	border-radius: var( --alv-r-4 );
	background: var( --alv-tile-bg );
	transition: transform var( --alv-dur-3 ) ease, box-shadow var( --alv-dur-3 ) ease;
}

.alovesinh-card-tile-title {
	letter-spacing: var( --alv-tr-tight-1 );
}

.alovesinh-card-tile:hover {
	box-shadow: var( --alv-sh-2 );
	transform: translateY( -4px );
}

.alovesinh-card-tile .alovesinh-icon-box {
	--alv-icon-color: var( --alv-c-ink );
	--alv-icon-bg: var( --alv-c-white );
	box-shadow: var( --alv-sh-1 );
}

.alovesinh-card-tile-description {
	flex: 1;
	font-size: var( --alv-fs-3 );
	line-height: var( --alv-lh-body );
	color: var( --alv-c-text-2 );
}

.alovesinh-card-tile-link {
	display: inline-flex;
	align-items: center;
	gap: var( --alv-sp-1 );
	padding-top: 14px;
	border-top: var( --alv-bd-hairline ) dashed color-mix( in srgb, var( --alv-c-ink ) 12%, transparent );
	font-size: var( --alv-fs-3 );
	font-weight: var( --alv-fw-bold );
	color: var( --alv-c-brand-deep );
}

.alovesinh-card-tile-link svg {
	transition: transform var( --alv-dur-2 ) ease;
}

.alovesinh-card-tile-link:hover svg {
	transform: translateX( 6px );
}

/* The six tile washes are fixed brand paint, not values derived from Primary, so changing
	Primary must not shift them: mixed from it, a new Primary would turn all six tiles one hue. */
.alovesinh-card-tile-tone-one {
	--alv-tile-bg: #FBEEDC;
}

.alovesinh-card-tile-tone-two {
	--alv-tile-bg: #E6F3F0;
}

.alovesinh-card-tile-tone-three {
	--alv-tile-bg: #FAEBD7;
}

.alovesinh-card-tile-tone-four {
	--alv-tile-bg: #EFEAF6;
}

.alovesinh-card-tile-tone-five {
	--alv-tile-bg: #FAF6EC;
}

.alovesinh-card-tile-tone-six {
	--alv-tile-bg: #E5EFE5;
}

.alovesinh-card-step-step-number {
	margin-bottom: var( --alv-sp-1 );
	font-size: clamp( 72px, 8vw, 108px );
	font-weight: var( --alv-fw-extrabold );
	line-height: 1;
	letter-spacing: -0.04em;
	color: var( --alv-c-accent );
}

.alovesinh-card-step-title {
	letter-spacing: var( --alv-tr-tight-1 );
}

.alovesinh-card-step-outline .alovesinh-card-step-step-number {
	color: transparent;
	-webkit-text-stroke: 2px var( --alv-c-accent );
}

.alovesinh-card-step-description {
	max-width: 280px;
	font-size: var( --alv-fs-3 );
	line-height: var( --alv-lh-body );
	color: var( --alv-c-text-2 );
}

.alovesinh-card-guarantee {
	--alv-icon-color: var( --alv-c-brand-deep );
	--alv-icon-bg: linear-gradient( 135deg,
		color-mix( in srgb, var( --alv-c-brand ) 12%, transparent ),
		color-mix( in srgb, var( --alv-c-brand ) 4%, transparent ) );
}

.alovesinh-card-guarantee .alovesinh-icon-box {
	margin-bottom: var( --alv-sp-3 );
}

.alovesinh-card-guarantee-label {
	display: inline-block;
	margin-bottom: var( --alv-sp-2 );
	font-size: var( --alv-fs-1 );
	font-weight: var( --alv-fw-bold );
	letter-spacing: 0.1em;
	color: var( --alv-c-accent );
}

/* Named twice: the shared card resets every h4 margin at 0-1-1 and a single class loses the 6px.
	24px is the source design's own step — at the h4 default of 18px the promise reads as a label. */
.alovesinh-card-guarantee-title.alovesinh-card-guarantee-title {
	margin: 0 0 var( --alv-sp-1 );
	font-size: var( --alv-fs-5 );
	font-weight: var( --alv-fw-extrabold );
}

.alovesinh-card-guarantee-summary {
	font-size: var( --alv-fs-3 );
	font-weight: var( --alv-fw-bold );
}

.alovesinh-card-guarantee-description {
	flex: 1;
	font-size: var( --alv-fs-3 );
}

.alovesinh-card-guarantee-note {
	padding-top: 14px;
	border-top: var( --alv-bd-hairline ) solid var( --alv-card-border );
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-semibold );
	color: var( --alv-c-text-muted );
}

.alovesinh-card-guarantee-highlight {
	--alv-guarantee-accent: #FDBA74;
	--alv-card-bg:
		radial-gradient( 90% 60% at 100% 0%,
			color-mix( in srgb, var( --alv-c-brand ) 40%, transparent ) 0%, transparent 70% ),
		linear-gradient( 180deg,
			color-mix( in srgb, var( --alv-c-brand-deep ) 50%, var( --alv-c-brand-deepest ) ) 0%,
			var( --alv-c-brand-deep ) 100% );
	--alv-card-border: transparent;
	--alv-card-border-hover: transparent;
	--alv-card-title: var( --alv-c-white );
	--alv-card-text: color-mix( in srgb, var( --alv-c-white ) 85%, transparent );
	--alv-icon-color: var( --alv-c-white );
	--alv-icon-bg: color-mix( in srgb, var( --alv-c-white ) 14%, transparent );
	color: var( --alv-c-white );
	transform: scale( 1.03 );
}

.alovesinh-card-guarantee-highlight:hover {
	transform: scale( 1.03 ) translateY( -4px );
}

/* Accent orange has nothing to sit on once the card goes deep teal, so the two accented lines
	step up to a light apricot. The value is local because no token in the book carries it — the
	source design uses it on this one card and nowhere else. */
.alovesinh-card-guarantee-highlight .alovesinh-card-guarantee-label,
.alovesinh-card-guarantee-highlight .alovesinh-card-guarantee-summary {
	color: var( --alv-guarantee-accent );
}

.alovesinh-card-guarantee-highlight .alovesinh-card-guarantee-note {
	border-top-color: color-mix( in srgb, var( --alv-c-white ) 16%, transparent );
	color: color-mix( in srgb, var( --alv-c-white ) 70%, transparent );
}

/* Only this card: its text token is white at 85%, and lifting the emphasis on the plain cards
	instead would print white on white. */
.alovesinh-card-guarantee-highlight .alovesinh-card-guarantee-description strong {
	color: var( --alv-c-white );
}

.alovesinh-card-guarantee-highlight-label {
	position: absolute;
	top: calc( -1 * var( --alv-bd-hairline ) );
	left: 50%;
	padding: 5px var( --alv-r-3 );
	border-radius: var( --alv-r-pill );
	font-size: var( --alv-fs-1 );
	font-weight: var( --alv-fw-extrabold );
	letter-spacing: 0.08em;
	white-space: nowrap;
	color: var( --alv-c-white );
	background: var( --alv-c-accent );
	box-shadow: 0 8px 16px color-mix( in srgb, var( --alv-c-accent ) 30%, transparent );
	transform: translate( -50%, -60% );
}

/* Below 980px the cards stack, and a card left at scale( 1.03 ) overlaps the one under it while
	its own edges run past the gutter. */
@media ( max-width: 980px ) {

	.alovesinh-card-guarantee-highlight {
		transform: none;
	}

	.alovesinh-card-guarantee-highlight:hover {
		transform: translateY( -4px );
	}
}

.alovesinh-card-person {
	padding-bottom: 22px;
	text-align: center;
}

.alovesinh-card-person-image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 1;
	font-size: 0;
	background: linear-gradient( 160deg, var( --alv-c-brand ) 0%, var( --alv-c-brand-deep ) 100% );
}

.alovesinh-card-person-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: radial-gradient( circle at 30% 20%,
		color-mix( in srgb, var( --alv-c-white ) 18%, transparent ), transparent 50% );
}

/* Named twice: the shared card resets the margin of every h3 and h4 it holds at one step more
	specific, so a single class here leaves the name pressed against the photograph above it. */
.alovesinh-card-person-name.alovesinh-card-person-name {
	margin: 18px 0 4px;
}

.alovesinh-card-person-job-title {
	margin-bottom: var( --alv-sp-2 );
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-semibold );
	letter-spacing: var( --alv-tr-wide-1 );
	text-transform: uppercase;
	color: var( --alv-c-brand-deep );
}

.alovesinh-card-person-stat {
	justify-content: center;
	font-size: var( --alv-fs-2 );
	color: var( --alv-c-text-muted );
}

.alovesinh-card-combo-image {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	color: var( --alv-c-brand-deep );
	background: linear-gradient( 160deg, var( --alv-c-brand-faint ), var( --alv-c-bg-warm ) );
}

.alovesinh-card-combo-image::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient( 180deg, transparent 30%, color-mix( in srgb, var( --alv-c-ink ) 10%, transparent ) 100% );
	pointer-events: none;
}

.alovesinh-card-combo-label {
	position: absolute;
	top: var( --alv-sp-2 );
	left: var( --alv-sp-2 );
	letter-spacing: var( --alv-tr-wide-1 );
	color: var( --alv-c-accent );
	background: var( --alv-c-white );
}

/* The parts space themselves with their own margins, as the source design does, so the gap the
	shared column would add lands on top of every one of them. */
.alovesinh-card-combo-body {
	--alv-column-gap: 0;

	flex: 1;
	padding: var( --alv-sp-3 );
}

/* Written from the widget root, not from the part alone: the shared card resets the margin and
	the colour of every h4 and p it holds, and that reset is one step more specific. */
.alovesinh-card-combo .alovesinh-card-combo-title {
	margin-bottom: 6px;
}

.alovesinh-card-combo .alovesinh-card-combo-description {
	flex: 1;
	margin-bottom: var( --alv-sp-2 );
	font-size: var( --alv-fs-2 );
	color: var( --alv-c-text-muted );
}

/* The card's paragraph leading is set for running copy; the price is a paragraph only because it
	is one line of text, and at 24px the looser value adds a visible step under the figure, so the
	price takes the body rung instead. */
.alovesinh-card-combo .alovesinh-card-combo-price {
	display: flex;
	align-items: baseline;
	gap: var( --alv-sp-1 );
	margin: 0 0 var( --alv-sp-2 );
	font-size: var( --alv-fs-5 );
	line-height: var( --alv-lh-body );
	font-weight: var( --alv-fw-extrabold );
	letter-spacing: var( --alv-tr-tight-1 );
	color: var( --alv-c-brand-deep );
}

/* The weight is stated, not left out: the row above sets extrabold for the figure, and an unset
	weight here would hand the unit that same weight instead of the body's plain text. */
.alovesinh-card-combo .alovesinh-price-unit {
	font-size: var( --alv-fs-2 );
	font-weight: 400;
	letter-spacing: 0;
	color: var( --alv-c-text-muted );
}

.alovesinh-card-combo-button {
	--alv-btn-icon: 16px;
	justify-content: center;
	width: 100%;
	padding: 11px;
}

/* flex-shrink is the load-bearing part: without it the body squeezes the frame and the ratio
	stops holding, which the source design warns about in its own comment. */
.alovesinh-card-post-image {
	position: relative;
	overflow: hidden;
	flex-shrink: 0;
	max-width: 100%;
	aspect-ratio: var( --alv-card-post-ratio, 16 / 10 );
	background: var( --alv-c-bg-light );
}

.alovesinh-card-post-body {
	display: flex;
	flex: 1;
	flex-direction: column;
	gap: var( --alv-sp-2 );
	padding: var( --alv-sp-3 );
}

.alovesinh-card-post-category {
	width: fit-content;
	color: var( --alv-c-brand-deep );
	background: color-mix( in srgb, var( --alv-c-brand ) 10%, transparent );
}

.alovesinh-card-post-title {
	font-size: 20px;
	line-height: var( --alv-lh-snug );
}

/* The whole card is the target, not the headline alone: the reader aims at the picture as often
	as at the words. */
.alovesinh-card-post:hover .alovesinh-card-post-title {
	color: var( --alv-c-brand-deep );
}

.alovesinh-card-post-link {
	color: inherit;
}

.alovesinh-card-post-meta {
	margin-top: auto;
	font-size: var( --alv-fs-2 );
	color: var( --alv-c-text-muted );
}

/* The rule belongs to the by-line: a card that carries only a date leaves the line unruled. */
.alovesinh-card-post-meta-ruled {
	padding-top: var( --alv-sp-2 );
	border-top: var( --alv-bd-hairline ) solid var( --alv-c-border );
}

.alovesinh-card-post-meta .alovesinh-initial {
	--alv-initial-size: 32px;
	--alv-initial-bg: linear-gradient( 135deg, var( --alv-c-brand ) 0%, var( --alv-c-brand-deep ) 100% );
	font-size: var( --alv-fs-2 );
}

.alovesinh-card-cert {
	align-items: flex-start;
	height: 100%;
	transition: border-color var( --alv-dur-2 ) ease, transform var( --alv-dur-2 ) ease;
}

.alovesinh-card-cert:hover {
	border-color: var( --alv-c-brand );
	transform: translateY( -2px );
}

.alovesinh-card-cert .alovesinh-icon-box {
	--alv-icon-color: var( --alv-c-brand-deep );
	--alv-icon-bg: linear-gradient( 135deg,
		color-mix( in srgb, var( --alv-c-brand ) 15%, transparent ),
		color-mix( in srgb, var( --alv-c-accent ) 8%, transparent ) );
}

.alovesinh-card-cert-title {
	margin-bottom: 3px;
}

.alovesinh-card-cert-description {
	font-size: var( --alv-fs-2 );
	line-height: var( --alv-lh-base );
	color: var( --alv-c-text-muted );
}

.alovesinh-card-service {
	--alv-service-color: var( --alv-c-brand );
	--alv-service-bg: color-mix( in srgb, var( --alv-c-brand ) 10%, transparent );
	position: relative;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --alv-sp-5 );
	overflow: hidden;
	padding: var( --alv-sp-5 );
	border: var( --alv-bd-hairline ) solid var( --alv-c-border );
	border-radius: var( --alv-r-4 );
	background: var( --alv-c-white );
	transition:
		transform var( --alv-dur-3 ) ease,
		border-color var( --alv-dur-3 ) ease,
		box-shadow var( --alv-dur-3 ) ease;
}

/* The stripe grows on hover; scaling a 4px bar from zero avoids repainting the card's own border. */
.alovesinh-card-service::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 4px;
	background: var( --alv-service-color );
	transform: scaleY( 0 );
	transform-origin: top;
	transition: transform var( --alv-dur-4 ) ease;
}

.alovesinh-card-service:hover {
	border-color: var( --alv-service-color );
	box-shadow: var( --alv-sh-2 );
	transform: translateY( -3px );
}

.alovesinh-card-service:hover::before {
	transform: scaleY( 1 );
}

.alovesinh-card-service-tone-deep {
	--alv-service-color: var( --alv-c-brand-deep );
	--alv-service-bg: color-mix( in srgb, var( --alv-c-brand-deep ) 10%, transparent );
}

.alovesinh-card-service-tone-accent {
	--alv-service-color: var( --alv-c-accent );
	--alv-service-bg: color-mix( in srgb, var( --alv-c-accent ) 10%, transparent );
}

.alovesinh-card-service-visual-cyan-white {
	--alv-service-visual: linear-gradient( 160deg, var( --alv-c-brand-soft ) 0%, var( --alv-c-white ) 100% );
}

.alovesinh-card-service-visual-cyan-warm {
	--alv-service-visual: linear-gradient( 160deg, var( --alv-c-brand-soft ) 0%, var( --alv-c-bg-warm ) 100% );
}

.alovesinh-card-service-visual-teal-white {
	--alv-service-visual: linear-gradient( 160deg, var( --alv-c-teal-faint ) 0%, var( --alv-c-white ) 100% );
}

.alovesinh-card-service-visual-teal-warm {
	--alv-service-visual: linear-gradient( 160deg, var( --alv-c-brand-pale ) 0%, var( --alv-c-bg-warm ) 100% );
}

.alovesinh-card-service-visual-mist-warm {
	--alv-service-visual: linear-gradient( 160deg, var( --alv-c-teal-faint ) 0%, var( --alv-c-bg-warm ) 100% );
}

.alovesinh-card-service-visual-peach-white {
	--alv-service-visual: linear-gradient( 160deg, var( --alv-c-peach-pale ) 0%, var( --alv-c-white ) 100% );
}

.alovesinh-card-service-visual-peach-warm {
	--alv-service-visual: linear-gradient( 160deg, var( --alv-c-orange-pale ) 0%, var( --alv-c-bg-warm ) 100% );
}

/* One order swap serves the mirrored rows of block 14 instead of a second rule set.
	The order goes on both children, not a negative order on the image alone, so the pair keeps its
	intended sequence when the row collapses to a single column. */
.alovesinh-card-service-reversed .alovesinh-card-service-content {
	order: 2;
}

.alovesinh-card-service-reversed .alovesinh-card-service-image {
	order: 1;
}

.alovesinh-card-service-content {
	min-width: 0;
}

/* Wider and looser than the badge the rest of the page uses: this one carries a service name in
	capitals, which needs more room around it than a two-word eyebrow. */
.alovesinh-card-service-label {
	--alv-badge-text: var( --alv-service-color );
	--alv-badge-bg: var( --alv-service-bg );

	gap: var( --alv-sp-2 );
	margin-bottom: var( --alv-sp-2 );
	padding: 6px 14px;
	letter-spacing: 0.14em;
}

.alovesinh-card-service-title {
	margin: 0 0 var( --alv-sp-1 );
	font-size: clamp( 24px, 2.6vw, 32px );
	font-weight: var( --alv-fw-extrabold );
	letter-spacing: var( --alv-tr-tight-1 );
	color: var( --alv-c-ink );
}

.alovesinh-card-service-summary {
	margin: 0 0 var( --alv-sp-3 );
	font-size: var( --alv-fs-3 );
	font-style: italic;
	font-weight: var( --alv-fw-semibold );
	color: var( --alv-service-color );
}

.alovesinh-card-service-description {
	margin: 0 0 var( --alv-sp-3 );
	font-size: var( --alv-fs-3 );
	line-height: var( --alv-lh-relaxed );
	color: var( --alv-c-text-2 );
}

.alovesinh-card-service-list {
	display: grid;
	gap: var( --alv-sp-2 );
	margin: 0 0 var( --alv-sp-3 );
	padding: 0;
	list-style: none;
}

.alovesinh-card-service-list li {
	position: relative;
	padding-left: 28px;
	font-size: var( --alv-fs-3 );
	line-height: var( --alv-lh-copy );
	color: var( --alv-c-text-2 );
}

.alovesinh-card-service-list li svg {
	position: absolute;
	top: 5px;
	left: 0;
	width: 18px;
	height: 18px;
	padding: 4px;
	border-radius: var( --alv-r-circle );
	color: var( --alv-service-color );
	background: var( --alv-service-bg );
}

.alovesinh-card-service-list li strong {
	margin-right: 8px;
	font-weight: var( --alv-fw-bold );
	color: var( --alv-c-ink );
}

.alovesinh-card-service-description em {
	padding: 0 2px;
	font-style: normal;
	font-weight: var( --alv-fw-bold );
	color: var( --alv-c-ink );
	background: linear-gradient( 180deg, transparent 60%, var( --alv-service-bg ) 60% );
}

.alovesinh-card-service-actions {
	justify-content: space-between;
	gap: var( --alv-sp-3 );
	padding-top: var( --alv-sp-3 );
	border-top: var( --alv-bd-hairline ) dashed var( --alv-c-border );
}

.alovesinh-card-service-price-group {
	display: flex;
	align-items: baseline;
	gap: var( --alv-sp-1 );
}

.alovesinh-card-service-price-label {
	font-size: var( --alv-fs-1 );
	font-weight: var( --alv-fw-semibold );
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --alv-c-text-muted );
}

.alovesinh-card-service .alovesinh-price-price {
	font-size: var( --alv-fs-5 );
	font-weight: var( --alv-fw-extrabold );
	letter-spacing: var( --alv-tr-tight-2 );
	color: var( --alv-c-ink );
}

.alovesinh-card-service .alovesinh-price-unit {
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-semibold );
	letter-spacing: 0;
	color: var( --alv-c-text-muted );
}

/* The button takes the row's own colour rather than the shared accent: seven rows sit one under
	the other and a single accent on all of them loses the tone each row is built around. */
.alovesinh-card-service .alovesinh-card-service-button {
	color: var( --alv-c-white );
	background: var( --alv-service-color );
}

.alovesinh-card-service .alovesinh-card-service-button:hover {
	transform: translateX( 2px );
}

/* The arrow reads as punctuation after the words rather than as a button icon, so it keeps the
	measure the shared drawing gives it instead of being stretched to the button's icon size. */
.alovesinh-card-service-button svg {
	width: auto;
	height: auto;
}

.alovesinh-card-service-image {
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	overflow: hidden;
	min-height: 380px;
	border-radius: var( --alv-r-3 );
	font-size: 0;
	background: var( --alv-service-visual );
	box-shadow: inset 0 0 0 1px color-mix( in srgb, var( --alv-c-ink ) 4%, transparent );
}

/* A scrim, not a tint on the photograph: the floating label sits at the bottom edge and needs a
	dark footing whatever picture the buyer uploads. */
.alovesinh-card-service-image::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	background: linear-gradient( 180deg, transparent 0%,
		color-mix( in srgb, var( --alv-c-ink ) 5%, transparent ) 60%,
		color-mix( in srgb, var( --alv-c-ink ) 30%, transparent ) 100% );
	pointer-events: none;
}

.alovesinh-card-service-image-label {
	position: absolute;
	bottom: 18px;
	left: 18px;
	z-index: 2;
	display: flex;
	align-items: center;
	gap: var( --alv-sp-1 );
	padding: var( --alv-sp-1 ) var( --alv-sp-2 );
	border-radius: var( --alv-r-pill );
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-bold );
	color: var( --alv-c-ink );
	background: var( --alv-c-white );
	box-shadow: var( --alv-sh-1 );
}

.alovesinh-card-service-image-label::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: var( --alv-r-circle );
	background: var( --alv-service-color );
}

/* Fixed rows, not the card's own flex: the description takes the slack so the chip row and the
	foot line sit on the same baseline across the row however long the wording runs. */
.alovesinh-card-persona {
	--alv-icon-color: var( --alv-persona-color );
	--alv-icon-bg: var( --alv-persona-bg );

	display: grid;
	grid-template-rows: auto auto 1fr auto auto;
	overflow: hidden;
	min-height: 380px;
	text-align: left;
}

/* Only the picker answers a press, so only its cards promise one to the pointer. */
.alovesinh-persona-picker .alovesinh-card-persona {
	cursor: pointer;
}

.alovesinh-card-persona-brand {
	--alv-persona-color: var( --alv-c-brand );
	--alv-persona-bg: color-mix( in srgb, var( --alv-c-brand ) 10%, transparent );
	--alv-persona-glow: color-mix( in srgb, var( --alv-c-brand ) 18%, transparent );
}

.alovesinh-card-persona-accent {
	--alv-persona-color: var( --alv-c-accent );
	--alv-persona-bg: color-mix( in srgb, var( --alv-c-accent ) 10%, transparent );
	--alv-persona-glow: color-mix( in srgb, var( --alv-c-accent ) 18%, transparent );
}

.alovesinh-card-persona-deep {
	--alv-persona-color: var( --alv-c-brand-deep );
	--alv-persona-bg: color-mix( in srgb, var( --alv-c-brand-deep ) 10%, transparent );
	--alv-persona-glow: color-mix( in srgb, var( --alv-c-brand-deep ) 18%, transparent );
}

.alovesinh-card-persona::before {
	content: "";
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	height: 3px;
	background: var( --alv-persona-color );
	transform: scaleX( 0 );
	transform-origin: left;
	transition: transform var( --alv-dur-4 ) ease;
}

.alovesinh-card-persona::after {
	content: "";
	position: absolute;
	inset: auto -20% -30% auto;
	width: 60%;
	aspect-ratio: 1;
	border-radius: var( --alv-r-circle );
	background: radial-gradient( circle, var( --alv-persona-glow ) 0%, transparent 70% );
	opacity: 0;
	transition: opacity var( --alv-dur-4 ) ease;
	pointer-events: none;
}

.alovesinh-persona-picker .alovesinh-card-persona:hover,
.alovesinh-card-persona[aria-pressed="true"] {
	--alv-persona-shift: 3px;

	border-color: var( --alv-persona-color );
	box-shadow: var( --alv-sh-2 );
	transform: translateY( -4px );
}

.alovesinh-persona-picker .alovesinh-card-persona:hover::before,
.alovesinh-card-persona[aria-pressed="true"]::before {
	transform: scaleX( 1 );
}

.alovesinh-persona-picker .alovesinh-card-persona:hover::after,
.alovesinh-card-persona[aria-pressed="true"]::after {
	opacity: 1;
}

/* Every part of the card sits above the glow, which is the card's own last child and would
	otherwise wash the wording out as it fades in. */
.alovesinh-card-persona-icon,
.alovesinh-card-persona-title,
.alovesinh-card-persona-description,
.alovesinh-card-persona-chips,
.alovesinh-card-persona-cta {
	position: relative;
	z-index: 1;
}

/* Two lines held open from the start: a one-line title next to a two-line one would drop the
	rows below it out of step across the grid. */
.alovesinh-card-persona .alovesinh-card-persona-title {
	min-height: calc( 1.25em * 2 );
	font-size: var( --alv-fs-4 );
	font-weight: var( --alv-fw-extrabold );
	line-height: 1.25;
	letter-spacing: var( --alv-tr-tight-1 );
	color: var( --alv-card-title );
}

.alovesinh-card-persona .alovesinh-card-persona-description {
	font-size: var( --alv-fs-3 );
	line-height: var( --alv-lh-body );
	color: var( --alv-c-text-2 );
}

.alovesinh-card-persona-chips {
	display: flex;
	flex-wrap: wrap;
	align-content: flex-start;
	gap: var( --alv-sp-1 );
	min-height: 60px;
}

.alovesinh-card-persona-chip {
	padding: 4px 9px;
	border-radius: var( --alv-r-1 );
	font-size: var( --alv-fs-1 );
	font-weight: var( --alv-fw-semibold );
	letter-spacing: 0.02em;
	color: var( --alv-persona-color );
	background: var( --alv-persona-bg );
}

.alovesinh-card-persona-cta {
	display: flex;
	align-items: center;
	gap: var( --alv-sp-1 );
	padding-top: 8px;
	border-top: var( --alv-bd-hairline ) dashed var( --alv-c-border );
	font-size: var( --alv-fs-2 );
	font-weight: var( --alv-fw-bold );
	color: var( --alv-persona-color );
}

.alovesinh-card-persona-cta-arrow {
	transform: translateX( var( --alv-persona-shift, 0 ) );
	transition: transform var( --alv-dur-2 ) ease;
}

@media ( max-width: 560px ) {

	.alovesinh-card-persona {
		min-height: auto;
	}
}

/* 820px, not the shared 980: the row holds a 380px picture beside a paragraph, a feature list and
	a price line, and it is that combination — not the page frame — that runs out of room first. */
@media ( max-width: 820px ) {

	.alovesinh-card-service {
		grid-template-columns: 1fr;
		gap: var( --alv-sp-3 );
		padding: var( --alv-sp-4 );
	}

	/* The picture stops reserving 380px of height once it is no longer beside the text, or a short
		row leaves a band of empty gradient under the photograph. */
	.alovesinh-card-service-image {
		aspect-ratio: 16 / 10;
		min-height: auto;
	}

	.alovesinh-card-service-reversed .alovesinh-card-service-image {
		order: 0;
	}

	.alovesinh-card-service-actions {
		flex-direction: column;
		align-items: flex-start;
		gap: var( --alv-sp-2 );
	}
}

.alovesinh-post-grid-compact {
	--alv-card-post-ratio: 16 / 9;
}

/* The source design parts a section head from the steps by 48. Here the head carries that 48 and
	the container adds its gap on top, so the head gives back the gap the container writes — read
	from the container itself, because pages set that gap to different figures. */
.alv-w-section-head:has( + .alv-w-card-process ) .alovesinh-section-head {
	margin-bottom: calc( var( --alv-sp-5 ) - var( --row-gap, var( --alv-sp-4 ) ) );
}

/* Held to the grid measure although each step is a widget of its own rather than a cell of a grid:
	left at the section's full width the picture gains 6px of column, and a 4:3 frame turns that
	into 4px of height on every step. */
.alovesinh-card-process {
	max-width: var( --alv-w-grid );
	margin-inline: auto;
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var( --alv-sp-5 );
}

.alovesinh-card-process-reversed .alovesinh-card-process-frame {
	order: 2;
}

.alovesinh-card-process-frame {
	position: relative;
	overflow: hidden;
	aspect-ratio: 4 / 3;
	border-radius: var( --alv-r-3 );
	background: var( --alv-process-frame,
		linear-gradient( 160deg, var( --alv-c-brand-pale ) 0%, var( --alv-c-bg-warm ) 100% ) );
}

.alovesinh-card-process-frame svg {
	display: block;
	width: 100%;
	height: 100%;
}

/* Nearly opaque, not a tint: the label sits over whatever the illustration puts under it, and a
	see-through chip loses its wording on the pale part of the drawing. */
.alovesinh-card-process-frame-label {
	position: absolute;
	right: 14px;
	bottom: 14px;
	padding: 5px var( --alv-sp-2 );
	border-radius: var( --alv-r-pill );
	font-size: var( --alv-fs-1 );
	font-weight: var( --alv-fw-bold );
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var( --alv-c-brand-deep );
	background: color-mix( in srgb, var( --alv-c-white ) 88%, transparent );
	box-shadow: var( --alv-sh-1 );
}

.alovesinh-card-process-body {
	min-width: 0;
}

.alovesinh-card-process-head {
	gap: 14px;
	margin-bottom: var( --alv-sp-2 );
}

.alovesinh-card-process-number {
	flex-shrink: 0;
	width: 52px;
	height: 52px;
	border-radius: var( --alv-r-3 );
	font-size: 20px;
	font-weight: var( --alv-fw-extrabold );
	letter-spacing: var( --alv-tr-tight-2 );
	color: var( --alv-c-white );
	background: linear-gradient( 135deg, var( --alv-c-brand ) 0%, var( --alv-c-brand-deep ) 100% );
	box-shadow: 0 10px 22px color-mix( in srgb, var( --alv-c-brand ) 32%, transparent );
}

.alovesinh-card-process-title {
	font-size: clamp( 19px, 2vw, 26px );
	font-weight: var( --alv-fw-extrabold );
	letter-spacing: var( --alv-tr-tight-1 );
}

/* Named twice: the shared card sets the margin, the line height and the colour of every p it
	holds at one step more specific, and a single class here changes none of the three. */
.alovesinh-card-process-summary.alovesinh-card-process-summary {
	margin: 0 0 18px;
	line-height: var( --alv-lh-loose );
	color: var( --alv-c-text-2 );
}

.alovesinh-card-process-work-label {
	display: block;
	margin-bottom: 10px;
	font-size: var( --alv-fs-1 );
	font-weight: var( --alv-fw-bold );
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var( --alv-c-text-muted );
}

.alovesinh-card-process-list {
	display: flex;
	flex-direction: column;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.alovesinh-card-process-list li {
	display: flex;
	align-items: flex-start;
	gap: 10px;
	font-size: var( --alv-fs-3 );
	line-height: var( --alv-lh-body );
	color: var( --alv-c-text-2 );
}

.alovesinh-card-process-list li svg {
	flex-shrink: 0;
	width: 20px;
	height: 20px;
	margin-top: 1px;
	padding: 4px;
	border-radius: var( --alv-r-circle );
	color: var( --alv-c-brand-deep );
	background: color-mix( in srgb, var( --alv-c-brand ) 10%, transparent );
}

@media ( max-width: 980px ) {

	.alovesinh-card-process {
		grid-template-columns: minmax( 0, 1fr );
		gap: 24px;
	}

	/* The drawing stops being half the card and becomes a banner over the text, so it is capped
		rather than left to run the full width of a stacked card. */
	.alovesinh-card-process-frame {
		width: 100%;
		max-width: 520px;
		aspect-ratio: 16 / 11;
	}

	.alovesinh-card-process-reversed .alovesinh-card-process-frame {
		order: 0;
	}
}

@media ( max-width: 560px ) {

	.alovesinh-card-process {
		--alv-card-pad: 18px;
	}

	.alovesinh-card-process-head {
		gap: var( --alv-sp-2 );
	}

	.alovesinh-card-process-number {
		width: 44px;
		height: 44px;
		font-size: 17px;
	}

	.alovesinh-card-process-summary.alovesinh-card-process-summary {
		margin-bottom: 16px;
		font-size: var( --alv-fs-3 );
	}
}

/* The three icon tones are picked for a white card. On the dark block the same brand teal and
	green sink into the background, so each tone steps up to its light sibling while the tinted
	disc behind it holds the original hue. */
.alovesinh-dark .alovesinh-card-icon .alovesinh-icon-box {
	--alv-icon-color: var( --alv-c-brand-light );
	--alv-icon-bg: color-mix( in srgb, var( --alv-c-brand ) 15%, transparent );
}

.alovesinh-dark .alovesinh-card-icon-tone-accent .alovesinh-icon-box {
	--alv-icon-color: var( --alv-c-orange-soft );
	--alv-icon-bg: color-mix( in srgb, var( --alv-c-accent ) 15%, transparent );
}

.alovesinh-dark .alovesinh-card-icon-tone-success .alovesinh-icon-box {
	--alv-icon-color: var( --alv-c-success-light );
	--alv-icon-bg: color-mix( in srgb, var( --alv-c-success ) 15%, transparent );
}

.alovesinh-dark .alovesinh-card-icon-description {
	line-height: var( --alv-lh-loose );
}

.alovesinh-dark .alovesinh-card-review {
	--alv-quote-mark: color-mix( in srgb, var( --alv-c-white ) 5%, transparent );
}

/* The rule above the author is a hair lighter than the card's own edge: on a dark card the two
	would otherwise merge and the quote would run straight into the name. */
.alovesinh-dark .alovesinh-card-review-reviewer {
	border-top-color: color-mix( in srgb, var( --alv-c-white ) 8%, transparent );
}

.alovesinh-dark .alovesinh-card-service {
	border-color: var( --alv-card-border );
	background: var( --alv-card-bg );
}

.alovesinh-dark .alovesinh-card-service-title {
	color: var( --alv-c-white );
}

.alovesinh-ly-do-tin-tuong .alovesinh-card-icon-title {
	line-height: var( --alv-lh-tight );
}

.alovesinh-ly-do-tin-tuong .alovesinh-card-icon-description strong {
	font-weight: var( --alv-fw-bold );
	color: var( --alv-c-on-dark );
}

.alovesinh-loi-hua-alo-ve-sinh .alovesinh-card-icon-description {
	line-height: var( --alv-lh-body );
	color: var( --alv-c-text-2 );
}

.alovesinh-bao-hanh-vang .alovesinh-card-icon-description {
	line-height: var( --alv-lh-body );
}