/**
 * HTG Service Section — styles
 *
 * Full-bleed section used on service pages (GEO/AIO Audits). Desktop values
 * are taken from the 1440 flatplan; the mobile comp (390) stacks everything.
 *
 * Structure:
 *   .htg-service-section
 *     __bg            decorative static SVG (optional)
 *     __inner         1260px content rail
 *       __header      heading col + body col (split) or stacked
 *       __items       grid | cards | definitions
 *       __closing     large serif closing line, optional rules
 */

.htg-service-section {
	/* Hairline colours flip with the theme (see dark themes below). */
	--ss-rule: var(--c-ink-10, rgba(14, 13, 11, 0.1));
	--ss-rule-strong: var(--c-ink, #0E0D0B);
	--ss-definition-rule: var(--c-ink-10, rgba(14, 13, 11, 0.1));
	position: relative;
	overflow: hidden;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding: 120px var(--container-pad-x, clamp(1rem, 4vw, 2.5rem));
	color: var(--c-ink, #0E0D0B);
}

/* --- Themes ------------------------------------------------------- */

.htg-service-section--white {
	background: var(--c-white, #FFFFFF);
	color: var(--c-ink, #0E0D0B);
}

.htg-service-section--light-grey {
	background: var(--c-cream-lo, #EFEFEF);
	color: var(--c-ink, #0E0D0B);
}

.htg-service-section--black {
	background: var(--c-ink, #0E0D0B);
	color: var(--c-white, #FFFFFF);
}

.htg-service-section--navy {
	background: var(--c-navy, #14183E);
	color: var(--c-white, #FFFFFF);
}

.htg-service-section--black,
.htg-service-section--navy {
	--ss-rule: rgba(255, 255, 255, 0.15);
	--ss-rule-strong: rgba(255, 255, 255, 0.6);
	--ss-definition-rule: rgba(255, 255, 255, 0.22);
}

/* --- Background art ------------------------------------------------ */

.htg-service-section__bg {
	position: absolute;
	inset: 0;
	z-index: 0;
	overflow: hidden;
	pointer-events: none;
}

.htg-service-section__bg img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	object-fit: cover;
}

/* Fanout 1 is composed so its origin sits just off the left edge and the
   dotted vertical line lands around 74% of the width (per the 1440 comp),
   keeping the red bar out from behind the copy. */
.htg-service-section--bg-fanout-1 .htg-service-section__bg img {
	width: 115%;
	margin-left: -15%;
}

/* --- Rail ----------------------------------------------------------- */

.htg-service-section__inner {
	position: relative;
	z-index: 2;
	max-width: 1260px;
	margin-inline: auto;
}

/* --- Header: heading + body ---------------------------------------- */

.htg-service-section--layout-split .htg-service-section__header {
	display: grid;
	grid-template-columns: minmax(0, 610px) minmax(0, 550px);
	justify-content: space-between;
	column-gap: 100px;
	align-items: start;
}

/* Large body copy (section intros) gets a wider right column. */
.htg-service-section--layout-split.htg-service-section--body-large .htg-service-section__header {
	grid-template-columns: minmax(0, 480px) minmax(0, 732px);
	column-gap: 48px;
}

/* No body / CTAs: the heading spans the rail. */
.htg-service-section--heading-only .htg-service-section__header {
	display: block;
}

/*
 * Second body column: heading + two columns of copy across the rail
 * (Who This Is For on the podcast page). Column widths from the 1440 comp.
 */
.htg-service-section--has-body2.htg-service-section--layout-split .htg-service-section__header {
	grid-template-columns: minmax(0, 330px) minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 46px;
	justify-content: stretch;
}

.htg-service-section--layout-stacked .htg-service-section__header {
	display: block;
}

/*
 * Centered: one column of copy centred in the rail, with any items grid still
 * running the full rail width. Column width matches the wide body column.
 */
.htg-service-section--layout-centered .htg-service-section__header {
	display: block;
	max-width: 732px;
	margin-inline: auto;
}

.htg-service-section--layout-centered .htg-service-section__closing {
	max-width: 732px;
	margin-inline: auto;
}

.htg-service-section--layout-centered .htg-service-section__body-col {
	margin-top: 0;
}

.htg-service-section--layout-centered .htg-service-section__heading-col:not(:empty) + .htg-service-section__body-col {
	margin-top: 44px;
}


/* Stacked copy is capped at 560px; the CTA row below it may run wider. */
.htg-service-section--layout-stacked .htg-service-section__heading-col,
.htg-service-section--layout-stacked .htg-service-section__body {
	max-width: 560px;
}

/*
 * Wide heading column: long boxed headlines keep their authored line
 * breaks (PE page). Split+body2 widens the heading column above the
 * tablet stack; stacked lifts the 560px cap on the heading only.
 */
@media (min-width: 1025px) {
	.htg-service-section--heading-wide.htg-service-section--has-body2.htg-service-section--layout-split .htg-service-section__header {
		grid-template-columns: minmax(0, 440px) minmax(0, 1fr) minmax(0, 1fr);
	}
}

.htg-service-section--heading-wide.htg-service-section--layout-stacked .htg-service-section__heading-col {
	max-width: none;
}

.htg-service-section__heading-col {
	min-width: 0;
}

.htg-service-section--heading-right .htg-service-section__heading-col {
	text-align: right;
}

.htg-service-section__eyebrow {
	margin: 0 0 20px;
	color: var(--c-red, #F02F29);
}

.htg-service-section__heading {
	margin: 0;
	font-size: clamp(38px, 3.9vw, 56px);
}

.htg-service-section__heading-note {
	max-width: 420px;
	margin-top: 28px;
	font-size: 16px;
	line-height: 28px;
	color: rgba(14, 13, 11, 0.78);
}

.htg-service-section--heading-right .htg-service-section__heading-note {
	margin-left: auto;
	text-align: left;
}

.htg-service-section--black .htg-service-section__heading-note,
.htg-service-section--navy .htg-service-section__heading-note {
	color: rgba(255, 255, 255, 0.82);
}

.htg-service-section__body-col {
	min-width: 0;
}

.htg-service-section--layout-stacked .htg-service-section__body-col {
	margin-top: 44px;
}

.htg-service-section__body {
	font-size: 16px;
	line-height: 28px;
	color: rgba(14, 13, 11, 0.78);
}

.htg-service-section--body-large .htg-service-section__body {
	font-size: 18px;
	line-height: 30px;
}

.htg-service-section--black .htg-service-section__body,
.htg-service-section--navy .htg-service-section__body {
	color: rgba(255, 255, 255, 0.86);
}

.htg-service-section__body p {
	max-width: none;
	margin: 0 0 18px;
}

.htg-service-section__body p:last-child {
	margin-bottom: 0;
}

/* --- CTAs ----------------------------------------------------------- */

.htg-service-section__ctas {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px 32px;
	margin-top: 40px;
}

.htg-service-section__cta {
	min-height: 48px;
	padding-inline: 32px;
}

/* Secondary CTA is a text link — no box, no border, no button padding. */
.htg-service-section__cta--secondary {
	min-height: 0;
	padding: 0.5em 0;
}

.htg-service-section__cta-arrow {
	display: inline-block;
	margin-left: 10px;
	transition: transform var(--dur-base, 450ms) var(--ease-out, cubic-bezier(0.16, 1, 0.3, 1));
}

.htg-service-section__cta:hover .htg-service-section__cta-arrow,
.htg-service-section__cta:focus-visible .htg-service-section__cta-arrow {
	transform: translateX(4px);
}

.htg-service-section__cta-secondary {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px 24px;
}

.htg-service-section__cta-helper {
	max-width: none;
	margin: 0;
	font-size: 16px;
	line-height: 24px;
	color: rgba(14, 13, 11, 0.78);
}

.htg-service-section--black .htg-service-section__cta-helper,
.htg-service-section--navy .htg-service-section__cta-helper {
	color: rgba(255, 255, 255, 0.9);
}

/* --- Items: shared ------------------------------------------------- */

.htg-service-section__items {
	display: grid;
	margin-top: 64px;
}

.htg-service-section__item {
	min-width: 0;
}

.htg-service-section__item-eyebrow {
	max-width: none;
	margin: 0 0 28px;
	font-family: var(--ff-mono, 'DM Mono', ui-monospace, monospace);
	font-size: 11px;
	font-weight: var(--fw-medium, 500);
	line-height: 16px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--c-red, #F02F29);
}

.htg-service-section__item-title {
	margin: 0 0 20px;
	font-family: var(--ff-serif, 'Zilla Slab', Georgia, serif);
	font-weight: var(--fw-regular, 400);
	font-size: 32px;
	line-height: 1.2;
	letter-spacing: var(--tracking-tight, -0.015em);
	color: inherit;
}

.htg-service-section__item-body {
	font-size: 15px;
	line-height: 24px;
	color: rgba(14, 13, 11, 0.7);
}

.htg-service-section--black .htg-service-section__item-body,
.htg-service-section--navy .htg-service-section__item-body {
	color: rgba(255, 255, 255, 0.82);
}

.htg-service-section__item-body p {
	max-width: none;
	margin: 0 0 12px;
}

.htg-service-section__item-body p:last-child {
	margin-bottom: 0;
}

/* --- Items: numbered grid (hairlines) ------------------------------ */

.htg-service-section__items--grid {
	gap: 0;
	border-top: 1px solid var(--ss-rule-strong);
	border-bottom: 1px solid var(--ss-rule-strong);
}

.htg-service-section__items--grid.htg-service-section__items--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.htg-service-section__items--grid.htg-service-section__items--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.htg-service-section__items--grid .htg-service-section__item {
	position: relative;
	padding: 56px 36px 60px;
}

/* Vertical hairlines between columns (pseudo, so they don't cross the row rules). */
.htg-service-section__items--grid.htg-service-section__items--cols-3 .htg-service-section__item:not(:nth-child(3n))::after,
.htg-service-section__items--grid.htg-service-section__items--cols-2 .htg-service-section__item:not(:nth-child(2n))::after {
	content: "";
	position: absolute;
	top: 20px;
	right: 0;
	bottom: 20px;
	width: 1px;
	background: var(--ss-rule);
}

/* Horizontal hairlines between rows. */
.htg-service-section__items--grid.htg-service-section__items--cols-3 .htg-service-section__item:nth-child(n+4),
.htg-service-section__items--grid.htg-service-section__items--cols-2 .htg-service-section__item:nth-child(n+3) {
	border-top: 1px solid var(--ss-rule);
}

/* --- Items: boxed cards -------------------------------------------- */

.htg-service-section__items--cards {
	gap: 40px;
	margin-top: 56px;
}

.htg-service-section__items--cards.htg-service-section__items--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.htg-service-section__items--cards.htg-service-section__items--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.htg-service-section__items--cards.htg-service-section__items--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }

.htg-service-section__items--cards.htg-service-section__items--cols-4 .htg-service-section__item {
	padding: 32px 28px 36px;
}

.htg-service-section__items--cards.htg-service-section__items--cols-4 .htg-service-section__item-title {
	font-size: 24px;
	line-height: 30px;
	margin-bottom: 14px;
}

.htg-service-section__items--cards.htg-service-section__items--cols-4 .htg-service-section__item-body {
	font-size: 14px;
	line-height: 23px;
}

@media (max-width: 1024px) and (min-width: 768px) {
	.htg-service-section__items--cards.htg-service-section__items--cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.htg-service-section__items--cards.htg-service-section__items--cols-4 {
		grid-template-columns: minmax(0, 1fr);
	}
}

.htg-service-section__items--cards .htg-service-section__item {
	display: flex;
	flex-direction: column;
	padding: 40px 40px 48px;
	background: var(--c-cream-lo, #EFEFEF);
	color: var(--c-ink, #0E0D0B);
}

.htg-service-section--light-grey .htg-service-section__items--cards .htg-service-section__item {
	background: var(--c-white, #FFFFFF);
}

.htg-service-section--black .htg-service-section__items--cards .htg-service-section__item,
.htg-service-section--navy .htg-service-section__items--cards .htg-service-section__item {
	background: rgba(255, 255, 255, 0.06);
	color: var(--c-white, #FFFFFF);
}

.htg-service-section__items.htg-service-section__items--numbers-red .htg-service-section__item-eyebrow {
	margin-bottom: 20px;
	color: var(--c-red, #E8341C);
	font-weight: var(--fw-medium, 500);
	letter-spacing: 0.1em;
}

.htg-service-section__items--cards .htg-service-section__item-eyebrow {
	margin-bottom: 88px;
	font-size: 13px;
	font-weight: var(--fw-regular, 400);
	letter-spacing: 0.06em;
	color: #7d7e7e;
}

.htg-service-section__items--cards .htg-service-section__item-title {
	margin-bottom: 24px;
	font-size: 32px;
	line-height: 42px;
}

.htg-service-section__items--cards .htg-service-section__item-body {
	font-size: 14px;
	line-height: 22px;
	color: rgba(14, 13, 11, 0.78);
}

.htg-service-section--black .htg-service-section__items--cards .htg-service-section__item-body,
.htg-service-section--navy .htg-service-section__items--cards .htg-service-section__item-body {
	color: rgba(255, 255, 255, 0.82);
}

/* --- Cards: bullet list, closing line, per-card CTA ------------------ */

.htg-service-section__item-bullets {
	display: grid;
	gap: 14px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

.htg-service-section__item-bullets li {
	position: relative;
	padding-left: 28px;
	font-size: 14px;
	line-height: 22px;
	color: rgba(14, 13, 11, 0.78);
}

.htg-service-section__item-bullets li::before {
	content: "";
	position: absolute;
	top: 8px;
	left: 4px;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: var(--c-red, #E8341C);
}

.htg-service-section__item-closing {
	margin-top: 24px;
	font-size: 14px;
	line-height: 22px;
	color: rgba(14, 13, 11, 0.78);
}

/* Push the button to the foot of the card so cards of unequal length line up. */
.htg-service-section__item-cta {
	align-self: flex-start;
	margin-top: auto;
}

/*
 * `margin-top: auto` collapses to zero on the tallest card, which has no slack
 * to absorb. Put the minimum gap on whatever element precedes the button so
 * both behaviours hold: pushed to the foot, never crowding the copy above.
 */
.htg-service-section__item > :not(.htg-service-section__item-cta):has( + .htg-service-section__item-cta ) {
	margin-bottom: 40px;
}

.htg-service-section--black .htg-service-section__items--cards .htg-service-section__item-bullets li,
.htg-service-section--navy .htg-service-section__items--cards .htg-service-section__item-bullets li,
.htg-service-section--black .htg-service-section__items--cards .htg-service-section__item-closing,
.htg-service-section--navy .htg-service-section__items--cards .htg-service-section__item-closing {
	color: rgba(255, 255, 255, 0.82);
}

/* --- Cards: per-card theme override --------------------------------- */
/* Section-theme rules above are (0,3,0); these match that and win on order. */

.htg-service-section .htg-service-section__items--cards .htg-service-section__item--theme-black {
	background: var(--c-ink, #0E0D0B);
	color: var(--c-white, #FFFFFF);
}

.htg-service-section .htg-service-section__items--cards .htg-service-section__item--theme-navy {
	background: var(--c-navy, #14183E);
	color: var(--c-white, #FFFFFF);
}

.htg-service-section .htg-service-section__items--cards .htg-service-section__item--theme-light-grey {
	background: var(--c-cream-lo, #EFEFEF);
	color: var(--c-ink, #0E0D0B);
}

.htg-service-section .htg-service-section__items--cards .htg-service-section__item--theme-white {
	background: var(--c-white, #FFFFFF);
	color: var(--c-ink, #0E0D0B);
}

.htg-service-section .htg-service-section__item--theme-black .htg-service-section__item-body,
.htg-service-section .htg-service-section__item--theme-navy .htg-service-section__item-body,
.htg-service-section .htg-service-section__item--theme-black .htg-service-section__item-bullets li,
.htg-service-section .htg-service-section__item--theme-navy .htg-service-section__item-bullets li,
.htg-service-section .htg-service-section__item--theme-black .htg-service-section__item-closing,
.htg-service-section .htg-service-section__item--theme-navy .htg-service-section__item-closing {
	color: rgba(255, 255, 255, 0.82);
}

.htg-service-section .htg-service-section__item--theme-light-grey .htg-service-section__item-body,
.htg-service-section .htg-service-section__item--theme-white .htg-service-section__item-body,
.htg-service-section .htg-service-section__item--theme-light-grey .htg-service-section__item-bullets li,
.htg-service-section .htg-service-section__item--theme-white .htg-service-section__item-bullets li,
.htg-service-section .htg-service-section__item--theme-light-grey .htg-service-section__item-closing,
.htg-service-section .htg-service-section__item--theme-white .htg-service-section__item-closing {
	color: rgba(14, 13, 11, 0.78);
}

/* --- Items: headed columns (boxed title + red dash + copy) ---------- */

.htg-service-section__items--headed {
	column-gap: 100px;
	row-gap: 56px;
	margin-top: 8px;
}

.htg-service-section__items--headed.htg-service-section__items--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.htg-service-section__items--headed.htg-service-section__items--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.htg-service-section__item-title--headed {
	margin: 0;
	font-size: clamp(30px, 2.4vw, 34px);
	line-height: 1.35;
}

.htg-service-section__item-dash {
	display: block;
	width: 60px;
	height: 2px;
	margin: 32px 0 36px;
	background: var(--c-red, #E8341C);
}

.htg-service-section__items--headed .htg-service-section__item-body {
	font-size: 16px;
	line-height: 28px;
}

/* Long-form columns: stack below the tablet breakpoint. */
@media (max-width: 1024px) {
	.htg-service-section__items--headed.htg-service-section__items--cols-2,
	.htg-service-section__items--headed.htg-service-section__items--cols-3 {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 48px;
	}
}

/* --- Items: definition columns ------------------------------------- */

.htg-service-section__items--definitions {
	column-gap: 140px;
	row-gap: 48px;
}

.htg-service-section__items--definitions.htg-service-section__items--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.htg-service-section__items--definitions.htg-service-section__items--cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

.htg-service-section__items--definitions .htg-service-section__item {
	position: relative;
}

/* Vertical rule centred in the column gap. */
.htg-service-section__items--definitions.htg-service-section__items--cols-2 .htg-service-section__item:not(:nth-child(2n))::after,
.htg-service-section__items--definitions.htg-service-section__items--cols-3 .htg-service-section__item:not(:nth-child(3n))::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	right: -70px;
	width: 1px;
	background: var(--ss-definition-rule);
}

.htg-service-section__items--definitions .htg-service-section__item-eyebrow {
	margin-bottom: 26px;
	letter-spacing: 0.14em;
}

.htg-service-section__items--definitions .htg-service-section__item-title {
	margin-bottom: 18px;
}

.htg-service-section__items--definitions .htg-service-section__item-body {
	font-size: 16px;
	line-height: 28px;
	color: rgba(14, 13, 11, 0.78);
}

.htg-service-section--black .htg-service-section__items--definitions .htg-service-section__item-body,
.htg-service-section--navy .htg-service-section__items--definitions .htg-service-section__item-body {
	color: rgba(255, 255, 255, 0.82);
}

/* --- Closing line --------------------------------------------------- */

.htg-service-section__closing {
	margin-top: 80px;
	font-family: var(--ff-serif, 'Zilla Slab', Georgia, serif);
	font-size: 32px;
	line-height: 48px;
	letter-spacing: var(--tracking-tight, -0.015em);
	color: var(--c-ink, #0E0D0B);
}

.htg-service-section--black .htg-service-section__closing,
.htg-service-section--navy .htg-service-section__closing {
	color: var(--c-white, #FFFFFF);
}

.htg-service-section__closing p {
	max-width: none;
	margin: 0 0 12px;
}

.htg-service-section__closing p:last-child {
	margin-bottom: 0;
}

.htg-service-section__items--grid + .htg-service-section__closing {
	margin-top: 60px;
}

.htg-service-section__closing--rules-top,
.htg-service-section__closing--rules-both {
	margin-top: 96px;
	padding-top: 40px;
	border-top: 1px solid var(--ss-rule);
}

.htg-service-section__closing--rules-bottom,
.htg-service-section__closing--rules-both {
	padding-bottom: 40px;
	border-bottom: 1px solid var(--ss-rule);
}

/* Closing line sitting above the items grid needs its own breathing room. */
.htg-service-section--closing-before .htg-service-section__closing {
	margin-bottom: 0;
}

.htg-service-section--closing-before .htg-service-section__items {
	margin-top: 96px;
}

@media (max-width: 767px) {
	.htg-service-section--closing-before .htg-service-section__items {
		margin-top: 56px;
	}
}

/* --- Responsive ----------------------------------------------------- */

@media (max-width: 1100px) {
	.htg-service-section--has-body2.htg-service-section--layout-split .htg-service-section__header {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 32px;
	}

	.htg-service-section--layout-split .htg-service-section__header,
	.htg-service-section--layout-split.htg-service-section--body-large .htg-service-section__header {
		grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
		column-gap: 56px;
	}

	.htg-service-section__items--definitions {
		column-gap: 80px;
	}

	.htg-service-section__items--definitions .htg-service-section__item::after {
		right: -40px;
	}
}

@media (max-width: 1024px) and (min-width: 768px) {
	.htg-service-section {
		padding-block: 88px;
	}

	.htg-service-section__items--grid.htg-service-section__items--cols-3,
	.htg-service-section__items--cards.htg-service-section__items--cols-3 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	/* Re-flow hairlines for the two-column grid. */
	.htg-service-section__items--grid.htg-service-section__items--cols-3 .htg-service-section__item::after {
		display: none;
	}

	.htg-service-section__items--grid.htg-service-section__items--cols-3 .htg-service-section__item:not(:nth-child(2n))::after {
		display: block;
	}

	.htg-service-section__items--grid.htg-service-section__items--cols-3 .htg-service-section__item {
		border-top: none;
		padding: 40px 28px 44px;
	}

	.htg-service-section__items--grid.htg-service-section__items--cols-3 .htg-service-section__item:nth-child(n+3) {
		border-top: 1px solid var(--ss-rule);
	}

	.htg-service-section__items--cards {
		gap: 24px;
	}

	/* Three cards in two columns: let the orphan third card span the row. */
	.htg-service-section__items--cards.htg-service-section__items--cols-3 .htg-service-section__item:last-child:nth-child(odd) {
		grid-column: 1 / -1;
	}

	.htg-service-section__items--cards .htg-service-section__item {
		padding: 32px 32px 40px;
	}

	.htg-service-section__items--cards .htg-service-section__item-eyebrow {
		margin-bottom: 56px;
	}

	.htg-service-section__closing {
		font-size: 28px;
		line-height: 40px;
	}
}

@media (max-width: 767px) {
	.htg-service-section {
		padding: 60px 24px;
	}

	.htg-service-section--layout-split .htg-service-section__header,
	.htg-service-section--layout-split.htg-service-section--body-large .htg-service-section__header {
		display: block;
	}

	/* The desktop right-anchored heading reads left-aligned once stacked. */
	.htg-service-section--heading-right .htg-service-section__heading-col {
		text-align: left;
	}

	.htg-service-section__heading {
		font-size: 38px;
	}

	.htg-service-section__body-col,
	.htg-service-section--layout-stacked .htg-service-section__body-col {
		margin-top: 36px;
	}

	.htg-service-section--body-large .htg-service-section__body {
		font-size: 16px;
		line-height: 28px;
	}

	.htg-service-section__ctas {
		flex-direction: column;
		align-items: stretch;
		gap: 24px;
		margin-top: 36px;
	}

	.htg-service-section__cta--primary {
		width: 100%;
	}

	.htg-service-section__cta--secondary {
		align-self: center;
	}

	.htg-service-section__cta-secondary {
		flex-direction: column;
		align-items: stretch;
		gap: 16px;
		text-align: center;
	}

	.htg-service-section__items {
		margin-top: 44px;
	}

	.htg-service-section__items--grid.htg-service-section__items--cols-3,
	.htg-service-section__items--grid.htg-service-section__items--cols-2,
	.htg-service-section__items--cards.htg-service-section__items--cols-3,
	.htg-service-section__items--cards.htg-service-section__items--cols-2,
	.htg-service-section__items--definitions.htg-service-section__items--cols-3,
	.htg-service-section__items--definitions.htg-service-section__items--cols-2 {
		grid-template-columns: 1fr;
	}

	.htg-service-section__items--grid .htg-service-section__item {
		padding: 40px 0 44px;
	}

	.htg-service-section__items--grid .htg-service-section__item::after {
		display: none !important;
	}

	/* On phones every item gets a full-strength rule above it (mobile comp). */
	.htg-service-section__items--grid .htg-service-section__item:not(:first-child) {
		border-top: 1px solid var(--ss-rule-strong);
	}

	.htg-service-section__items--grid .htg-service-section__item-eyebrow {
		margin-bottom: 24px;
	}

	.htg-service-section__items--grid .htg-service-section__item-title {
		font-size: 28px;
	}

	.htg-service-section__items--cards {
		gap: 20px;
		margin-top: 40px;
	}

	.htg-service-section__items--cards .htg-service-section__item {
		padding: 32px 24px 40px;
	}

	.htg-service-section__items--cards .htg-service-section__item-eyebrow {
		margin-bottom: 56px;
	}

	.htg-service-section__items--cards .htg-service-section__item-title {
		font-size: 28px;
		line-height: 36px;
	}

	.htg-service-section__items--definitions {
		row-gap: 0;
	}

	.htg-service-section__items--definitions .htg-service-section__item::after {
		display: none !important;
	}

	.htg-service-section__items--definitions .htg-service-section__item + .htg-service-section__item {
		margin-top: 40px;
		padding-top: 40px;
		border-top: 1px solid var(--ss-definition-rule);
	}

	.htg-service-section__items--definitions .htg-service-section__item-title {
		font-size: 28px;
	}

	.htg-service-section__closing,
	.htg-service-section__items--grid + .htg-service-section__closing {
		margin-top: 48px;
		font-size: 24px;
		line-height: 34px;
	}

	.htg-service-section__closing--rules-top,
	.htg-service-section__closing--rules-both {
		margin-top: 56px;
		padding-top: 32px;
	}

	.htg-service-section__closing--rules-bottom,
	.htg-service-section__closing--rules-both {
		padding-bottom: 32px;
	}

	/* Line-art backgrounds are a desktop composition; the mobile comp is plain. */
	.htg-service-section--bg-fanout-1 .htg-service-section__bg,
	.htg-service-section--bg-fanout-2-converge .htg-service-section__bg {
		display: none;
	}
}

/* --- Editor ---------------------------------------------------------- */

.editor-styles-wrapper .htg-service-section {
	width: 100%;
	max-width: 100%;
	margin-left: 0;
	margin-right: 0;
}


/* --- Cards: bullets / CTA on small screens -------------------------- */

@media (max-width: 767px) {
	.htg-service-section__item-bullets {
		gap: 12px;
		margin-top: 20px;
	}

	.htg-service-section__item-bullets li {
		padding-left: 24px;
	}

	.htg-service-section__item > :not(.htg-service-section__item-cta):has( + .htg-service-section__item-cta ) {
		margin-bottom: 32px;
	}

	.htg-service-section__item-cta {
		align-self: stretch;
	}
}

/* --- Compact density (PE comp) --------------------------------------
 * Opt-in per section; the default density stays exactly as shipped. */

.htg-service-section--compact {
	padding-top: 96px;
	padding-bottom: 96px;
}

.htg-service-section--compact .htg-service-section__items {
	margin-top: 48px;
}

.htg-service-section--compact .htg-service-section__items--grid .htg-service-section__item {
	padding: 36px 20px 40px;
}

.htg-service-section--compact .htg-service-section__items--grid .htg-service-section__item-title {
	font-size: 24px;
	line-height: 32px;
	margin-bottom: 16px;
}

@media (max-width: 767px) {
	.htg-service-section--compact {
		padding-top: 64px;
		padding-bottom: 64px;
	}
}