/* ==========================================================================
   MAIN STYLES

   All values come from the variables in tokens.css. Never hard-code a
   color, font or size here; add a token instead (and to design.md).
   Put every rule in its matching section. Never append rules to the end.

   1. Sections
   2. Typographies
   3. Navigation
   4. Buttons and Links
   5. Forms
   6. Media
   7. UI Elements
   ========================================================================== */


/* ==========================================================================
   1. SECTIONS
   Spacing comes from Bootstrap utilities on the markup (.py-5, .pt-5, .pb-5).
   Section-specific rules go here, scoped by ID: #section-{name}.
   ========================================================================== */

section {
	position: relative;
}

/* ---------- Sitewide: blueprint grid and sheet frame ----------
   design.md section 5. The grid sits on primary-bg and white-bg sections and
   lines up with the container's content edge. The crop marks are the
   container's ::before; each section sets --ct and --cb (offsets from the
   container's top and bottom). The counter numbers the eyebrows ("01 / 08");
   a template sets --sheet-total for its own page. */

main,
.site-footer {
	counter-reset: sheet;
	--content-half: 258px;
	--rule: var(--line);
	--rule-strong: var(--line-strong);
	--crop: var(--crop-mark);
	--grid-major-c: var(--grid-major);
	--grid-minor-c: var(--grid-minor);
}

@media (min-width: 768px) { main, .site-footer { --content-half: 348px; } }
@media (min-width: 992px) { main, .site-footer { --content-half: 468px; } }
@media (min-width: 1200px) { main, .site-footer { --content-half: 558px; } }
@media (min-width: 1400px) { main, .site-footer { --content-half: 648px; } }

.page-template-template-home {
	--sheet-total: "08";
}

.page-template-template-about {
	--sheet-total: "05";
}

.page-template-template-services {
	--sheet-total: "06";
}

.page-template-template-start {
	--sheet-total: "02";
}

.page-template-template-contact {
	--sheet-total: "04";
}

.page-template-template-blog {
	--sheet-total: "03";
}

.single-post {
	--sheet-total: "02";
}

.single-service {
	--sheet-total: "09";
}

.site-header,
.site-footer,
main > section.primary-bg,
main > section.white-bg {
	background-image:
		linear-gradient(var(--grid-major-c) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-major-c) 1px, transparent 1px),
		linear-gradient(var(--grid-minor-c) 1px, transparent 1px),
		linear-gradient(90deg, var(--grid-minor-c) 1px, transparent 1px);
	background-size: 120px 120px, 120px 120px, 24px 24px, 24px 24px;
	background-position:
		calc(50% - var(--content-half) + 60px) 0,
		calc(50% - var(--content-half) + 60px) 0,
		calc(50% - var(--content-half) + 12px) 0,
		calc(50% - var(--content-half) + 12px) 0;
}

@media (max-width: 575.98px) {
	.site-header,
	.site-footer,
	main > section.primary-bg,
	main > section.white-bg {
		background-position: 20px 0, 20px 0, 20px 0, 20px 0;
	}
}

/* Light sections swap the line values */
main > section.white-bg {
	--rule: var(--line-ink);
	--rule-strong: var(--line-ink-strong);
	--crop: var(--crop-mark-light);
	--grid-major-c: var(--grid-major-light);
	--grid-minor-c: var(--grid-minor-light);
}

main > section.accent-bg {
	--rule: var(--line-ink);
	--rule-strong: var(--line-ink-strong);
	--crop: var(--crop-mark-accent);
}

main > section > .container {
	position: relative;
}

main > section > .container::before {
	content: "";
	position: absolute;
	left: -12px;
	right: -12px;
	top: var(--ct, 0);
	bottom: var(--cb, 0);
	pointer-events: none;
	--c: var(--crop);
	background:
		linear-gradient(var(--c), var(--c)) 0 0 / 20px 1px no-repeat,
		linear-gradient(var(--c), var(--c)) 0 0 / 1px 20px no-repeat,
		linear-gradient(var(--c), var(--c)) 100% 0 / 20px 1px no-repeat,
		linear-gradient(var(--c), var(--c)) 100% 0 / 1px 20px no-repeat,
		linear-gradient(var(--c), var(--c)) 0 100% / 20px 1px no-repeat,
		linear-gradient(var(--c), var(--c)) 0 100% / 1px 20px no-repeat,
		linear-gradient(var(--c), var(--c)) 100% 100% / 20px 1px no-repeat,
		linear-gradient(var(--c), var(--c)) 100% 100% / 1px 20px no-repeat;
}

@media (max-width: 767.98px) {
	main > section > .container {
		--bs-gutter-x: 40px;
	}

	main > section > .container::before {
		left: 8px;
		right: 8px;
	}
}

/* ---------- Hero ----------
   Layout beyond columns (design.md section 5): from 1200px the copy sits in
   columns 1-6 and overlaps the art in columns 6-12, with the copy above.
   Below that the art stacks above the copy. */

#section-hero {
	padding-block: 48px 72px;
	overflow-x: clip;
	--ct: -40px;
	--cb: -56px;
}

#section-hero .hero-copy {
	position: relative;
	z-index: 2;
	padding-top: 24px;
}

#section-hero .hero-copy .eyebrow {
	margin-bottom: 40px;
}

/* The highlighted phrase is a <span> inside the display line. It makes its own
   stacking context so the underline can sit behind the letters. It may wrap
   (Spanish phrases are longer); the underline then spans the longest line. */
#section-hero .heading-xl span,
#section-hero .heading-lg span {
	position: relative;
	z-index: 0;
	display: inline-block;
}

/* The lemon underline draws under the highlighted phrase once the stack has
   receded. It rides up behind the bottom of the letters (negative top margin). */
#section-hero .heading-xl span::after,
#section-hero .heading-lg span::after {
	content: "";
	position: relative;
	z-index: -1;
	display: block;
	height: 0.12em;
	margin-top: -0.2em;
	background: var(--accent);
	transform: scaleX(0);
	transform-origin: left;
	animation: hero-mark var(--sig-mark-duration) var(--sig-mark-ease) var(--sig-mark-delay) forwards;
}

@keyframes hero-mark {
	to { transform: scaleX(1); }
}

#section-hero .hero-sub {
	max-width: 40ch;
	margin-top: 40px;
}

#section-hero .hero-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 32px;
	margin-top: 40px;
}

#section-hero .hero-actions .text-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

#section-hero .hero-note {
	max-width: 52ch;
	margin-top: 28px;
}

#section-hero .hero-art {
	position: relative;
}

@media (min-width: 1200px) {
	#section-hero .row {
		display: grid;
		grid-template-columns: repeat(12, minmax(0, 1fr));
	}

	#section-hero .hero-copy {
		grid-column: 1 / span 6;
		grid-row: 1;
		padding-top: 56px;
	}

	#section-hero .hero-art {
		grid-column: 6 / span 7;
		grid-row: 1;
	}

	/* On the stack heroes the copy may overlap the plates, but the display line
	   stops before the stack's vertical dimension line (which sits 20 to 43px
	   inside column 6), so the two never collide. */
	.page-template-template-home #section-hero .hero-copy > [class*="heading-"],
	.page-template-template-services #section-hero .hero-copy > [class*="heading-"] {
		max-width: calc(100% * 5 / 6);
	}
}

@media (max-width: 767.98px) {
	#section-hero {
		padding-block: 8px 48px;
		--ct: -8px;
		--cb: -32px;
	}

	#section-hero .hero-copy {
		padding-top: 8px;
	}

	#section-hero .hero-copy .eyebrow {
		margin-bottom: 28px;
	}

	#section-hero .hero-sub {
		margin-top: 28px;
	}

	#section-hero .hero-actions {
		margin-top: 32px;
	}

	#section-hero .hero-actions .btn-accent {
		width: 100%;
	}
}

/* About hero: the portrait sits in columns 8-12 and never overlaps the copy.
   Below 1200px it stacks under the copy. */
#section-hero .hero-art .figure-frame {
	max-width: 532px;
}

@media (min-width: 1200px) {
	.page-template-template-about #section-hero .hero-art {
		grid-column: 8 / span 5;
	}

	.page-template-template-contact #section-hero .hero-art {
		grid-column: 7 / span 6;
	}
}

/* Contact hero: a wider image, shown whole at its own proportions (no crop). */
.page-template-template-contact #section-hero .hero-art .figure-frame {
	max-width: none;
}

.page-template-template-contact #section-hero .hero-art .figure-frame img {
	display: block;
	height: auto;
}

@media (max-width: 1199.98px) {
	.page-template-template-about #section-hero .hero-art,
	.page-template-template-contact #section-hero .hero-art {
		margin-top: 48px;
	}
}

@media (max-width: 767.98px) {
	.page-template-template-about #section-hero .hero-art,
	.page-template-template-contact #section-hero .hero-art {
		margin-top: 40px;
	}
}

/* ---------- Trust ----------
   Readout row: one bordered strip. Any number of cells; they wrap by the
   minimum width, and the borders are drawn per cell so a wrapped row still
   closes cleanly. */

#section-trust,
#section-readout {
	padding-bottom: 96px;
	--readout-min: 240px;
}

/* The trust row sits inside the hero's sheet: no frame of its own */
#section-trust > .container::before,
#section-readout > .container::before {
	display: none;
}

#section-trust .readout,
#section-readout .readout {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(var(--readout-min), 1fr));
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line-strong);
	border-left: 1px solid var(--line-strong);
}

#section-trust .readout li,
#section-readout .readout li {
	position: relative;
	display: grid;
	align-content: start;
	gap: 6px;
	padding: 28px 28px 30px;
	border-right: 1px solid var(--line-strong);
	border-bottom: 1px solid var(--line-strong);
}

#section-trust .readout .gem,
#section-readout .readout .gem {
	position: absolute;
	top: -6px;
	left: 22px;
}

@media (max-width: 1199.98px) {
	#section-trust,
	#section-readout {
		--readout-min: 160px;
	}
}

@media (max-width: 767.98px) {
	#section-trust,
	#section-readout {
		padding-bottom: 64px;
	}

	#section-trust .readout li,
	#section-readout .readout li {
		padding: 22px 16px;
	}

	#section-trust .readout .gem,
	#section-readout .readout .gem {
		left: 16px;
	}
}

/* ---------- Services ----------
   Schedule: a spec table under group headings (REF / SERVICE / SCOPE / arrow),
   on a light sheet. */

#section-services {
	padding-block: var(--section-pad-y);
	--ct: -72px;
	--cb: -72px;
}

#section-services .eyebrow {
	margin-bottom: 40px;
}

#section-services .schedule {
	margin-top: 48px;
}

#section-services .schedule-head,
#section-services .svc-row {
	display: grid;
	grid-template-columns: 120px minmax(0, 4fr) minmax(0, 7fr) 40px;
	column-gap: 24px;
	align-items: baseline;
}

#section-services .schedule-head {
	padding: 12px 0;
	border-top: 1.5px solid var(--primary);
}

#section-services .schedule-group h3 {
	display: flex;
	align-items: center;
	gap: 14px;
	padding: 36px 0 12px;
	border-bottom: 1px solid var(--line-ink-strong);
}

/* Hub: a one-line note under each group name (price, timing, billing). */
#section-services .group-note {
	margin: 0;
	padding-top: 10px;
}

#section-services .swatch {
	flex: none;
	width: 16px;
	height: 16px;
	border: 1.5px solid var(--primary);
	transform: rotate(45deg);
}

#section-services .swatch.tone-ink { background-color: var(--primary); }
#section-services .swatch.tone-mid { background-color: var(--secondary); }
#section-services .swatch.tone-light { background-color: var(--lilac); }
#section-services .swatch.tone-lime { background-color: var(--accent); }

#section-services .schedule-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

#section-services .svc-row {
	padding-block: 20px;
	border-bottom: 1px solid var(--line-ink);
	transition: background-color var(--motion-hover) var(--motion-ease);
}

#section-services .svc-name {
	font-weight: 600;
}

#section-services .svc-scope {
	max-width: 56ch;
}

#section-services .svc-arrow {
	justify-self: end;
	transition: transform var(--motion-hover) var(--motion-ease);
}

#section-services .svc-row:hover,
#section-services .svc-row:focus-visible {
	background-color: color-mix(in srgb, var(--secondary) 6%, transparent);
}

#section-services .svc-row:hover .svc-name,
#section-services .svc-row:focus-visible .svc-name {
	text-decoration: underline;
	text-underline-offset: 4px;
}

#section-services .svc-row:hover .svc-arrow,
#section-services .svc-row:focus-visible .svc-arrow {
	transform: translateX(4px);
}

@media (max-width: 991.98px) {
	#section-services .services-art,
	#section-services .services-intro {
		margin-top: 16px;
	}
}

@media (max-width: 767.98px) {
	#section-services {
		--ct: -48px;
		--cb: -48px;
	}

	#section-services .schedule {
		margin-top: 24px;
	}

	#section-services .schedule-head {
		display: none;
	}

	#section-services .schedule-group h3 {
		padding-top: 28px;
	}

	#section-services .svc-row {
		grid-template-columns: minmax(0, 1fr) 24px;
		row-gap: 4px;
		padding-block: 18px;
	}

	#section-services .svc-ref { grid-column: 1; grid-row: 1; }
	#section-services .svc-name { grid-column: 1; grid-row: 2; }
	#section-services .svc-scope { grid-column: 1; grid-row: 3; }
	#section-services .svc-arrow { grid-column: 2; grid-row: 2; }
}


/* ---------- About: story ----------
   Light sheet: photo and intro, then a ruled table of roles
   (REF / ROLE / WHAT IT TAUGHT ME). Same table look as the services schedule. */

#section-story {
	padding-block: var(--section-pad-y);
	--ct: -72px;
	--cb: -72px;
}

#section-story .eyebrow {
	margin-bottom: 40px;
}

#section-story .figure-frame img {
	aspect-ratio: 3 / 2;
	object-fit: cover;
}

#section-story .story-text {
	max-width: 46ch;
	margin-top: 28px;
}

#section-story .schedule {
	margin-top: 48px;
}

#section-story .schedule-head,
#section-story .role-row {
	display: grid;
	grid-template-columns: 120px minmax(0, 4fr) minmax(0, 7fr);
	column-gap: 24px;
	align-items: baseline;
}

#section-story .schedule-head {
	padding: 12px 0;
	border-top: 1.5px solid var(--primary);
}

#section-story .schedule-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

#section-story .role-row {
	padding-block: 20px;
	border-bottom: 1px solid var(--line-ink);
}

#section-story .role-lesson {
	max-width: 62ch;
}

@media (max-width: 991.98px) {
	#section-story .story-intro .figure-frame {
		margin-top: 40px;
	}
}

@media (max-width: 767.98px) {
	#section-story {
		--ct: -48px;
		--cb: -48px;
	}

	#section-story .eyebrow {
		margin-bottom: 28px;
	}

	#section-story .schedule {
		margin-top: 40px;
	}

	#section-story .schedule-head {
		display: none;
	}

	#section-story .role-row {
		grid-template-columns: minmax(0, 1fr);
		row-gap: 4px;
		padding-block: 18px;
	}
}

/* ---------- About: why ----------
   Dark sheet: display line, intro and a detail photo, then a row of notes.
   The notes share one row from 992px, however many there are. The services
   hub's "start" sheet (#section-start) shares the section, eyebrow and notes rules. */

#section-why,
#section-start {
	padding-block: var(--section-pad-y);
	--ct: -72px;
	--cb: -72px;
}

#section-why .eyebrow,
#section-start .eyebrow {
	margin-bottom: 40px;
}

#section-why .why-text {
	max-width: 46ch;
	margin-top: 28px;
}

#section-why .figure-frame img {
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

#section-why .notes,
#section-start .notes {
	display: grid;
	margin: 72px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line-strong);
}

#section-why .notes li,
#section-start .notes li {
	padding-block: 36px 24px;
}

#section-why .notes li + li,
#section-start .notes li + li {
	border-top: 1px solid var(--line-strong);
}

#section-why .notes h3,
#section-start .notes h3 {
	margin-top: 16px;
}

#section-why .notes h3 + p,
#section-start .notes h3 + p {
	margin-top: 12px;
}

/* Services hub signposts: heading and intro side by side, a link under each note. */
#section-start .notes .note-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 20px;
}

@media (max-width: 991.98px) {
	#section-start .start-head .col-lg-4 {
		margin-top: 20px;
	}
}

@media (min-width: 992px) {
	#section-why .notes,
	#section-start .notes {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}

	#section-why .notes li,
	#section-start .notes li {
		padding-inline: 32px;
	}

	#section-why .notes li:first-child,
	#section-start .notes li:first-child {
		padding-left: 0;
	}

	#section-why .notes li:last-child,
	#section-start .notes li:last-child {
		padding-right: 0;
	}

	#section-why .notes li + li,
	#section-start .notes li + li {
		border-top: 0;
		border-left: 1px solid var(--line-strong);
	}
}

@media (max-width: 991.98px) {
	#section-why .why-intro .figure-frame {
		margin-top: 40px;
	}
}

@media (max-width: 767.98px) {
	#section-why,
	#section-start {
		--ct: -48px;
		--cb: -48px;
	}

	#section-why .eyebrow,
	#section-start .eyebrow {
		margin-bottom: 28px;
	}

	#section-why .notes,
	#section-start .notes {
		margin-top: 48px;
	}
}

/* Home why: before/after speed readout between the intro and the notes. The
   "before" bar is the full width, hatched; the "after" bar is a share of it,
   chosen in steps of 10% (.bar-w-*). */
#section-why .speed {
	display: grid;
	gap: 16px;
	margin: 72px 0 0;
}

#section-why .speed-row {
	display: grid;
	grid-template-columns: 224px minmax(0, 1fr);
	align-items: center;
	gap: 16px;
}

#section-why .speed-row p {
	margin: 0;
}

#section-why .speed-bar {
	height: 44px;
}

#section-why .speed-before {
	border: 1px solid var(--line-strong);
	background: repeating-linear-gradient(135deg, var(--line-strong) 0 1px, transparent 1px 8px);
}

#section-why .speed-after {
	background: var(--accent);
}

#section-why .bar-w-10 { width: 10%; }
#section-why .bar-w-20 { width: 20%; }
#section-why .bar-w-30 { width: 30%; }
#section-why .bar-w-40 { width: 40%; }
#section-why .bar-w-50 { width: 50%; }
#section-why .bar-w-60 { width: 60%; }
#section-why .bar-w-70 { width: 70%; }
#section-why .bar-w-80 { width: 80%; }
#section-why .bar-w-90 { width: 90%; }

#section-why .speed figcaption {
	padding-left: 240px;
}

@media (max-width: 991.98px) {
	#section-why .why-intro .col-lg-5 {
		margin-top: 20px;
	}
}

@media (max-width: 767.98px) {
	#section-why .speed {
		margin-top: 48px;
	}

	#section-why .speed-row {
		grid-template-columns: minmax(0, 1fr);
		gap: 8px;
	}

	#section-why .speed figcaption {
		padding-left: 0;
	}
}

/* ---------- About: proof ----------
   Deeper dark sheet: quotes in two columns from 768px, each under a rule with
   a lemon tick. Any number of quotes. */

#section-proof {
	padding-block: var(--section-pad-y);
	--ct: -72px;
	--cb: -72px;
}

#section-proof .eyebrow {
	margin-bottom: 40px;
}

#section-proof .quotes {
	display: grid;
	gap: 48px 24px;
	margin: 64px 0 0;
	padding: 0;
	list-style: none;
}

#section-proof .quotes li {
	position: relative;
	padding-top: 32px;
	border-top: 1px solid var(--line-strong);
}

#section-proof .quotes li::before {
	content: "";
	position: absolute;
	top: -1px;
	left: 0;
	width: 56px;
	height: 3px;
	background: var(--accent);
}

#section-proof blockquote {
	margin: 0;
}

#section-proof blockquote + p {
	margin-top: 24px;
}

#section-proof .proof-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
	margin-top: 56px;
}

@media (min-width: 768px) {
	#section-proof .quotes {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 991.98px) {
	#section-proof .proof-head .col-lg-4 {
		margin-top: 20px;
	}
}

@media (max-width: 767.98px) {
	#section-proof {
		--ct: -48px;
		--cb: -48px;
	}

	#section-proof .eyebrow {
		margin-bottom: 28px;
	}

	#section-proof .quotes {
		margin-top: 40px;
	}

	#section-proof .proof-link {
		margin-top: 40px;
	}
}

/* Home proof: case study cards (any number, by minimum width), a screenshot
   frame on top, then problem / decision / result rows. Cards keep their own
   height, top-aligned. */
#section-proof .cases {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
	align-items: start;
	gap: 24px;
	margin: 64px 0 0;
	padding: 0;
	list-style: none;
}

#section-proof .case-card {
	position: relative;
	border: 1px solid var(--line-strong);
	background: var(--primary);
}

#section-proof .case-shot {
	position: relative;
	margin: 12px;
	border: 1px solid var(--line);
}

#section-proof .case-shot span {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
}

#section-proof .case-shot img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

#section-proof .case-title {
	margin: 0;
	padding: 24px 20px;
	border-top: 1px solid var(--line-strong);
}

#section-proof .case-title a {
	color: inherit;
}

#section-proof .case-title a::after {
	content: "";
	position: absolute;
	inset: 0;
}

#section-proof .case-rows {
	display: grid;
	margin: 0;
	border-top: 1px solid var(--line-strong);
}

#section-proof .case-rows > div {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 16px;
	padding: 16px 20px;
}

#section-proof .case-rows > div + div {
	border-top: 1px solid var(--line);
}

#section-proof .case-rows dt,
#section-proof .case-rows dd {
	margin: 0;
}

#section-proof .case-link {
	position: relative;
	z-index: 1;
	margin: 0;
	padding: 4px 20px 16px;
	border-top: 1px solid var(--line-strong);
}

#section-proof .case-link a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
}

@media (max-width: 767.98px) {
	#section-proof .cases {
		margin-top: 40px;
	}

	#section-proof .case-rows > div {
		grid-template-columns: minmax(0, 1fr);
		gap: 4px;
	}
}

/* ---------- About: CTA ----------
   Lemon band: copy in columns 1-7, a small outline stack in columns 8-12. */

#section-cta {
	padding-block: var(--section-pad-y);
	--ct: -72px;
	--cb: -72px;
}

#section-cta .eyebrow {
	margin-bottom: 40px;
}

#section-cta .cta-body {
	max-width: 46ch;
	margin-top: 32px;
}

#section-cta .cta-actions {
	margin-top: 40px;
}

@media (max-width: 991.98px) {
	#section-cta .cta-art {
		margin-top: 24px;
	}
}

@media (max-width: 767.98px) {
	#section-cta {
		--ct: -48px;
		--cb: -48px;
	}

	#section-cta .eyebrow {
		margin-bottom: 28px;
	}

	#section-cta .cta-body {
		margin-top: 24px;
	}

	#section-cta .cta-actions {
		margin-top: 32px;
	}

	#section-cta .cta-actions .btn-accent {
		width: 100%;
	}
}

/* ---------- Start: form ----------
   Layout beyond columns is not needed: copy in columns 1-5, the form sheet
   and quote in columns 7-12. Stacks (copy first) below 992px. The sheet is the
   same drawing frame as the other sections, with its own bordered form plate. */

#section-form {
	padding-block: 48px 72px;
	--ct: -40px;
	--cb: -56px;
}

#section-form .form-copy {
	padding-top: 56px;
}

#section-form .form-copy .eyebrow {
	margin-bottom: 40px;
}

#section-form .form-sub {
	max-width: 40ch;
	margin-top: 40px;
}

#section-form .note-box {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	max-width: 532px;
	margin-top: 40px;
	padding: 24px 28px 24px 24px;
	border: 1px dashed var(--line-strong);
}

#section-form .note-box .gem {
	margin-top: 8px;
}

#section-form .note-box p {
	margin: 0;
}

#section-form .form-email {
	margin-top: 28px;
}

#section-form .form-email a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

#section-form .form-sheet {
	padding: 40px;
	border: 1px solid var(--line-strong);
}

#section-form .form-quote {
	position: relative;
	margin: 32px 0 0;
	padding-top: 32px;
	border-top: 1px solid var(--line-strong);
}

/* The 56 x 3 lemon tick on the quote's top rule */
#section-form .form-quote::before {
	content: "";
	position: absolute;
	top: -2px;
	left: 0;
	width: 56px;
	height: 3px;
	background: var(--accent);
}

#section-form .form-quote blockquote {
	margin: 0;
}

#section-form .form-quote figcaption {
	margin-top: 20px;
}

/* Contact: the ways to reach me under the intro. Icon column, then label and value;
   every link is a 44px tap target. */
#section-form .contact-details {
	display: grid;
	gap: 24px;
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
}

#section-form .contact-details li {
	display: grid;
	grid-template-columns: 24px minmax(0, 1fr);
	gap: 16px;
	align-items: start;
}

#section-form .contact-details li > i {
	margin-top: 2px;
	font-size: 20px;
	line-height: 1;
}

#section-form .contact-details li > .gem {
	margin: 7px 0 0 4px;
}

#section-form .contact-details p {
	margin: 0;
}

#section-form .contact-details a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

#section-form .contact-details .hours {
	display: grid;
	gap: 4px;
	margin: 0;
}

#section-form .contact-details .hours > div {
	display: flex;
	gap: 16px;
}

#section-form .contact-details .hours dt {
	min-width: 6.5em;
	font-weight: inherit;
}

#section-form .contact-details .hours dd {
	margin: 0;
}

@media (max-width: 991.98px) {
	#section-form .form-side {
		margin-top: 48px;
	}
}

@media (max-width: 767.98px) {
	#section-form {
		padding-block: 8px 48px;
		--ct: -8px;
		--cb: -32px;
	}

	#section-form .form-copy {
		padding-top: 8px;
	}

	#section-form .form-copy .eyebrow {
		margin-bottom: 28px;
	}

	#section-form .form-sub,
	#section-form .note-box {
		margin-top: 28px;
	}

	#section-form .form-sheet {
		padding: 20px;
	}
}

/* ---------- Start: next ----------
   Dark sheet: display line and intro side by side, then the steps in one row
   from 992px, however many there are (the same ruled row as the About notes). */

#section-next {
	padding-block: 56px var(--section-pad-y);
	--ct: -40px;
	--cb: -72px;
}

#section-next .eyebrow {
	margin-bottom: 40px;
}

#section-next .steps {
	display: grid;
	margin: 72px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line-strong);
}

#section-next .steps li {
	padding-block: 36px 24px;
}

#section-next .steps li + li {
	border-top: 1px solid var(--line-strong);
}

#section-next .steps h3 {
	margin-top: 16px;
}

#section-next .steps h3 + p {
	margin-top: 12px;
}

@media (max-width: 991.98px) {
	#section-next .next-head .col-lg-4 {
		margin-top: 20px;
	}
}

@media (min-width: 992px) {
	#section-next .steps {
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}

	#section-next .steps li {
		padding-inline: 32px;
	}

	#section-next .steps li:first-child {
		padding-left: 0;
	}

	#section-next .steps li:last-child {
		padding-right: 0;
	}

	#section-next .steps li + li {
		border-top: 0;
		border-left: 1px solid var(--line-strong);
	}
}

@media (max-width: 767.98px) {
	#section-next {
		--ct: -48px;
		--cb: -48px;
	}

	#section-next .eyebrow {
		margin-bottom: 28px;
	}

	#section-next .steps {
		margin-top: 48px;
	}
}

/* ---------- Service: hero ----------
   Reuses the #section-hero layout. The spec sheet (stack and label/value
   rows) sits in columns 8-12 from 1200px and stacks under the copy below. */

#section-hero .crumbs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0 10px;
	margin: 0 0 24px;
	padding: 0;
	list-style: none;
}

#section-hero .crumbs li + li::before {
	content: "/";
	margin-right: 10px;
}

#section-hero .crumbs a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

#section-hero .crumbs a:hover,
#section-hero .crumbs a:focus-visible {
	color: var(--white);
}

#section-hero .crumbs .crumb-code {
	padding: 2px 8px;
	border: 1px solid var(--line-strong);
}

#section-hero .crumbs .crumb-code::before {
	display: none;
}

#section-hero .spec-sheet {
	position: relative;
	max-width: 424px;
	border: 1px solid var(--line-strong);
	background-color: var(--primary-deep);
}

#section-hero .spec-code {
	position: absolute;
	top: 16px;
	left: 16px;
	margin: 0;
}

#section-hero .spec-list {
	margin: 0;
	border-top: 1px solid var(--line-strong);
}

#section-hero .spec-list > div {
	display: grid;
	grid-template-columns: 120px minmax(0, 1fr);
	border-top: 1px solid var(--line);
}

#section-hero .spec-list > div:first-child {
	border-top: 0;
}

#section-hero .spec-list dt,
#section-hero .spec-list dd {
	margin: 0;
	padding: 14px 16px;
}

#section-hero .spec-list dt {
	border-right: 1px solid var(--line);
}

@media (min-width: 1200px) {
	.single-service #section-hero .hero-art {
		grid-column: 8 / span 5;
		align-self: center;
	}
}

@media (max-width: 1199.98px) {
	.single-service #section-hero .hero-art {
		margin-top: 48px;
	}
}

@media (max-width: 767.98px) {
	.single-service #section-hero .hero-art {
		margin-top: 40px;
	}

	#section-hero .spec-list > div {
		grid-template-columns: 104px minmax(0, 1fr);
	}
}

/* ---------- Service: self-check ----------
   Light sheet: a dark checklist panel (columns 1-5) beside the signs
   (columns 7-12). Ticking a line lights its sign. */

#section-selfcheck,
#section-pricing,
#section-plans,
#section-faq {
	padding-block: var(--section-pad-y);
	--ct: -72px;
	--cb: -72px;
}

#section-selfcheck .eyebrow,
#section-pricing .eyebrow,
#section-plans .eyebrow,
#section-faq .eyebrow {
	margin-bottom: 40px;
}

#section-selfcheck .selfcheck-body {
	margin-top: 56px;
}

#section-selfcheck .checklist {
	border: 1px solid var(--primary);
}

#section-selfcheck .checklist-label {
	margin: 0;
	padding: 16px 24px;
	border-bottom: 1px solid var(--line-strong);
}

#section-selfcheck .checklist fieldset {
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

#section-selfcheck .checklist legend {
	float: none;
	width: auto;
	margin: 0;
	padding: 20px 24px;
}

#section-selfcheck .checklist ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#section-selfcheck .checklist label {
	position: relative;
	margin: 0;
	text-transform: none;
	letter-spacing: 0;
	display: grid;
	grid-template-columns: 22px auto minmax(0, 1fr);
	align-items: start;
	gap: 14px;
	min-height: 44px;
	padding: 16px 24px;
	border-top: 1px solid var(--line);
	cursor: pointer;
}

#section-selfcheck .checklist input {
	position: absolute;
	top: 18px;
	left: 24px;
	width: 22px;
	height: 22px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

#section-selfcheck .checklist .box {
	width: 22px;
	height: 22px;
	margin-top: 2px;
	border: 1.5px solid var(--lilac);
}

#section-selfcheck .checklist input:checked + .box {
	border-color: var(--accent);
	background-color: var(--accent);
}

#section-selfcheck .checklist input:checked + .box::after {
	content: "";
	display: block;
	width: 6px;
	height: 12px;
	margin: 1px 0 0 7px;
	border: solid var(--primary);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

#section-selfcheck .checklist input:focus-visible + .box {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
}

#section-selfcheck .checklist-foot {
	margin: 0;
	padding: 16px 24px;
	border-top: 1px solid var(--line-strong);
}

#section-selfcheck .signs {
	margin: 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--rule-strong);
}

#section-selfcheck .signs li {
	border-bottom: 1px solid var(--rule);
}

#section-selfcheck .signs li.is-ticked {
	background-color: var(--lilac);
}

#section-selfcheck .signs article {
	padding: 24px 20px;
}

#section-selfcheck .signs header {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 16px;
}

#section-selfcheck .sign-tag {
	padding: 3px 8px;
	background-color: var(--accent);
}

#section-selfcheck .sign-detail {
	display: grid;
	gap: 16px 32px;
	margin: 16px 0 0;
}

#section-selfcheck .sign-detail dd {
	margin: 6px 0 0;
}

@media (min-width: 768px) {
	#section-selfcheck .sign-detail {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 991.98px) {
	#section-selfcheck .selfcheck-head .col-lg-4 {
		margin-top: 20px;
	}

	#section-selfcheck .signs {
		margin-top: 32px;
	}
}

/* ---------- Service: timeline ----------
   Dark sheet: a chart of rows over N columns. The bar, marker and milestone
   are placed with .from-N / .to-N (grid lines), so no inline styles are
   needed. Rows stack the label above the track below 992px. */

#section-timeline,
#section-process,
#section-related,
#section-posts {
	padding-block: var(--section-pad-y);
	--ct: -72px;
	--cb: -72px;
}

#section-timeline .eyebrow,
#section-process .eyebrow,
#section-related .eyebrow,
#section-posts .eyebrow {
	margin-bottom: 40px;
}

#section-timeline .gantt {
	margin: 64px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px solid var(--line-strong);
}

#section-timeline .cols-1 { --cols: 1; }
#section-timeline .cols-2 { --cols: 2; }
#section-timeline .cols-3 { --cols: 3; }
#section-timeline .cols-4 { --cols: 4; }
#section-timeline .cols-5 { --cols: 5; }
#section-timeline .cols-6 { --cols: 6; }
#section-timeline .cols-7 { --cols: 7; }
#section-timeline .cols-8 { --cols: 8; }

#section-timeline .gantt-head,
#section-timeline .gantt-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	border-bottom: 1px solid var(--line);
}

#section-timeline .gantt-head {
	padding-block: 14px;
}

#section-timeline .gantt-scale,
#section-timeline .gantt-track {
	display: grid;
	grid-template-columns: repeat(var(--cols), minmax(0, 1fr));
}

#section-timeline .gantt-scale > span {
	padding-left: 8px;
}

#section-timeline .gantt-row {
	padding-block: 20px;
	gap: 12px;
}

#section-timeline .gantt-label p {
	margin: 4px 0 0;
}

#section-timeline .gantt-label .gantt-detail {
	max-width: 52ch;
	margin-top: 10px;
}

#section-timeline .gantt-track {
	position: relative;
	align-items: center;
	min-height: 40px;
}

#section-timeline .gantt-track > * {
	grid-row: 1;
}

#section-timeline .gantt-track .cell {
	align-self: stretch;
	border-left: 1px solid var(--line);
}

#section-timeline .bar {
	align-self: center;
	height: 1rem;
	margin-inline: 4px;
	background-color: var(--accent);
}

#section-timeline .mark {
	justify-self: center;
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--accent);
}

#section-timeline .stone {
	justify-self: center;
	width: 1rem;
	height: 1rem;
	background-color: var(--accent);
	transform: rotate(45deg);
}

#section-timeline .from-1 { grid-column-start: 1; }
#section-timeline .from-2 { grid-column-start: 2; }
#section-timeline .from-3 { grid-column-start: 3; }
#section-timeline .from-4 { grid-column-start: 4; }
#section-timeline .from-5 { grid-column-start: 5; }
#section-timeline .from-6 { grid-column-start: 6; }
#section-timeline .from-7 { grid-column-start: 7; }
#section-timeline .from-8 { grid-column-start: 8; }
#section-timeline .to-1 { grid-column-end: 2; }
#section-timeline .to-2 { grid-column-end: 3; }
#section-timeline .to-3 { grid-column-end: 4; }
#section-timeline .to-4 { grid-column-end: 5; }
#section-timeline .to-5 { grid-column-end: 6; }
#section-timeline .to-6 { grid-column-end: 7; }
#section-timeline .to-7 { grid-column-end: 8; }
#section-timeline .to-8 { grid-column-end: 9; }

#section-timeline .u-short {
	display: inline;
}

#section-timeline .u-full {
	display: none;
}

#section-timeline .gantt-legend {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 32px;
	margin: 24px 0 0;
	padding: 0;
	list-style: none;
}

#section-timeline .gantt-legend li {
	display: flex;
	align-items: center;
	gap: 10px;
}

#section-timeline .key {
	display: inline-block;
	flex: none;
}

#section-timeline .key-bar {
	width: 22px;
	height: 1rem;
	background-color: var(--accent);
}

#section-timeline .key-mark {
	width: 1rem;
	height: 1rem;
	border: 2px solid var(--accent);
}

#section-timeline .key-stone {
	width: 1rem;
	height: 1rem;
	background-color: var(--accent);
	transform: rotate(45deg);
}

#section-timeline .callout,
#section-plans .callout {
	display: flex;
	align-items: flex-start;
	gap: 16px;
	margin: 40px 0 0;
	padding: 20px 24px;
	border: 1px dashed var(--rule-strong);
}

#section-timeline .callout .gem,
#section-plans .callout .gem {
	margin-top: 7px;
}

@media (min-width: 768px) {
	#section-timeline .u-short {
		display: none;
	}

	#section-timeline .u-full {
		display: inline;
	}
}

@media (min-width: 992px) {
	#section-timeline .gantt-head,
	#section-timeline .gantt-row {
		grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
		align-items: center;
		gap: 0 24px;
	}
}

@media (max-width: 991.98px) {
	#section-timeline .timeline-head .col-lg-4 {
		margin-top: 20px;
	}

	#section-timeline .gantt-head > span:first-child {
		margin-bottom: 8px;
	}
}

@media (max-width: 767.98px) {
	#section-timeline .gantt {
		margin-top: 40px;
	}
}

/* ---------- Service: process ----------
   Dark sheet: steps in a row (wrapping by minimum width), each over a small
   stack with one more plate than the step before. */

#section-process .steps {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 40px 32px;
	margin: 64px 0 0;
	padding: 0;
	list-style: none;
}

#section-process .step-art {
	display: flex;
	align-items: flex-end;
	min-height: 190px;
	margin-bottom: 24px;
	border-bottom: 1px solid var(--line-strong);
}

#section-process .step-art .stack {
	width: 100%;
}

#section-process .step-num {
	display: inline-block;
	margin: 0 0 16px;
	padding: 4px 8px;
	border: 1px solid var(--accent);
}

#section-process h3 + p {
	margin-top: 12px;
}

/* Home process: a dashed note under the steps (same box as the Start form's note). */
#section-process .note-box {
	display: flex;
	align-items: flex-start;
	gap: 14px;
	margin-top: 64px;
	padding: 24px 28px 24px 24px;
	border: 1px dashed var(--line-strong);
}

#section-process .note-box .gem {
	flex: none;
	margin-top: 8px;
}

#section-process .note-box p {
	margin: 0;
}

@media (max-width: 767.98px) {
	#section-process .note-box {
		margin-top: 40px;
	}

	#section-process .steps {
		margin-top: 40px;
	}

	#section-process .step-art {
		min-height: 150px;
	}
}

/* ---------- Service: pricing (one-off) ----------
   Light sheet: dark price card (columns 1-5), price factors (columns 7-12),
   then the payment milestones across the full width. */

#section-pricing .pricing-main {
	margin-top: 56px;
}

#section-pricing .price-card {
	padding: 32px;
}

#section-pricing .price-figure {
	margin: 16px 0 20px;
}

#section-pricing .price-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 28px;
	margin-top: 28px;
}

#section-pricing .price-actions .text-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

#section-pricing .factors-heading {
	margin: 0;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--rule-strong);
}

#section-pricing .factors {
	margin: 0;
	padding: 0;
	list-style: none;
}

#section-pricing .factors li {
	border-bottom: 1px solid var(--rule);
}

#section-pricing .factors article {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	gap: 16px;
	padding: 20px 0;
}

#section-pricing .factors p {
	margin: 0;
}

#section-pricing .factors h4 + p {
	margin-top: 6px;
}

#section-pricing .payments,
#section-plans .payments {
	margin-top: 64px;
	border: 1px solid var(--rule-strong);
}

#section-pricing .payments-head,
#section-plans .payments-head {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 0;
	padding: 16px 24px;
	border-bottom: 1px solid var(--rule);
}

#section-pricing .payments ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

#section-pricing .payments li {
	display: grid;
	grid-template-columns: 56px minmax(0, 1.2fr) minmax(0, 1fr) minmax(0, 2fr);
	align-items: center;
	gap: 8px 16px;
	padding: 20px 24px;
	border-bottom: 1px solid var(--rule);
}

#section-pricing .payments-note,
#section-plans .payments-line {
	margin: 0;
	padding: 20px 24px;
}

#section-plans .payments-line {
	display: flex;
	align-items: flex-start;
	gap: 16px;
}

#section-plans .payments-line .gem {
	margin-top: 7px;
}

@media (max-width: 991.98px) {
	#section-pricing .price-card {
		margin-bottom: 48px;
	}
}

@media (max-width: 767.98px) {
	#section-pricing .price-card {
		padding: 24px;
	}

	#section-pricing .payments {
		margin-top: 48px;
	}

	#section-pricing .payments li {
		grid-template-columns: 48px minmax(0, 1fr) auto;
	}

	#section-pricing .payments li > :nth-child(4) {
		grid-column: 2 / -1;
	}
}

/* ---------- Service: plans (ongoing) ----------
   Light sheet: plans side by side from 992px, sharing their rows with a label
   column through subgrid, so every row lines up. Below that each plan is its
   own card. plan-rows-N and plans-N carry the counts as CSS variables. */

#section-plans .plans {
	display: grid;
	gap: 24px;
	margin-top: 56px;
}

#section-plans .plans-1 { --plan-n: 1; }
#section-plans .plans-2 { --plan-n: 2; }
#section-plans .plans-3 { --plan-n: 3; }
#section-plans .plan-rows-0 { --feature-rows: 1; }
#section-plans .plan-rows-1 { --feature-rows: 1; }
#section-plans .plan-rows-2 { --feature-rows: 2; }
#section-plans .plan-rows-3 { --feature-rows: 3; }
#section-plans .plan-rows-4 { --feature-rows: 4; }
#section-plans .plan-rows-5 { --feature-rows: 5; }
#section-plans .plan-rows-6 { --feature-rows: 6; }
#section-plans .plan-rows-7 { --feature-rows: 7; }
#section-plans .plan-rows-8 { --feature-rows: 8; }
#section-plans .plan-rows-9 { --feature-rows: 9; }
#section-plans .plan-rows-10 { --feature-rows: 10; }
#section-plans .plan-rows-11 { --feature-rows: 11; }
#section-plans .plan-rows-12 { --feature-rows: 12; }
#section-plans .plan-rows-13 { --feature-rows: 13; }
#section-plans .plan-rows-14 { --feature-rows: 14; }
#section-plans .plan-rows-15 { --feature-rows: 15; }
#section-plans .plan-rows-16 { --feature-rows: 16; }

#section-plans .plan {
	border: 1px solid var(--rule-strong);
}

#section-plans .plan.is-featured {
	border-color: var(--lilac);
	background-color: var(--lilac);
}

#section-plans .plan-head {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	padding: 24px;
	border-bottom: 1px solid var(--rule);
}

#section-plans .plan-head p {
	margin: 0;
}

#section-plans .plan-badge {
	position: absolute;
	top: 0;
	right: 0;
	padding: 3px 8px;
	background-color: var(--accent);
}

#section-plans .plan-rows {
	margin: 0;
}

#section-plans .plan-rows > div {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	min-height: 52px;
	padding: 12px 24px;
	border-bottom: 1px solid var(--rule);
}

#section-plans .plan-rows dt,
#section-plans .plan-rows dd {
	margin: 0;
}

#section-plans .plan-rows dd {
	text-align: right;
}

#section-plans .plan-labels {
	display: none;
}

#section-plans .plans-lists {
	margin-top: 72px;
}

#section-plans .list-heading {
	margin: 0;
	padding-bottom: 16px;
	border-bottom: 1px solid var(--rule-strong);
}

#section-plans .plan-list {
	margin: 0;
	padding: 0;
	list-style: none;
}

#section-plans .plan-list li {
	padding-block: 18px;
	border-bottom: 1px solid var(--rule);
}

#section-plans .plan-list p {
	margin: 4px 0 0;
}

@media (min-width: 992px) {
	#section-plans .plans {
		grid-template-columns: minmax(0, 1.4fr) repeat(var(--plan-n), minmax(0, 1fr));
		grid-template-rows: auto repeat(var(--feature-rows), auto);
		gap: 0;
	}

	#section-plans .plan-labels,
	#section-plans .plan {
		display: grid;
		grid-row: 1 / span calc(var(--feature-rows) + 1);
		grid-template-rows: subgrid;
	}

	#section-plans .plan {
		border-width: 0 0 0 1px;
	}

	#section-plans .plan:last-child {
		border-right-width: 1px;
	}

	#section-plans .plan-labels-head {
		margin: 0;
		padding: 24px 0;
		border-bottom: 1px solid var(--rule);
	}

	#section-plans .plan-labels ul,
	#section-plans .plan-rows {
		display: grid;
		grid-row: 2 / span var(--feature-rows);
		grid-template-rows: subgrid;
	}

	#section-plans .plan-labels ul {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	#section-plans .plan-labels li {
		display: flex;
		align-items: center;
		padding: 12px 0;
		border-bottom: 1px solid var(--rule);
	}

	#section-plans .plan-rows dt {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	#section-plans .plan-rows > div {
		justify-content: flex-start;
	}

	#section-plans .plan-rows dd {
		text-align: left;
	}
}

@media (max-width: 991.98px) {
	#section-plans .plans-lists .col-lg-6 + .col-lg-6 {
		margin-top: 48px;
	}
}

@media (max-width: 767.98px) {
	#section-plans .plans-lists {
		margin-top: 48px;
	}

	#section-plans .payments {
		margin-top: 48px;
	}
}

/* ---------- Service: FAQ ----------
   Light sheet: display line on the left, accordion on the right. */

#section-faq .faq-body {
	row-gap: 32px;
}

@media (max-width: 767.98px) {
	#section-proof,
	#section-faq {
		--ct: -48px;
		--cb: -48px;
	}
}

/* ---------- Blog: posts index and single post ----------
   The index reuses the related-reading rules (#section-posts above). Numbered
   pagination sits under it. The article is one readable column on a light sheet;
   its elements are styled here because the classic editor's content has no classes. */

#section-posts .pager {
	margin-top: 48px;
}

#section-posts .pager ul {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#section-posts .pager .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	min-height: 44px;
	padding-inline: 12px;
	color: var(--off-white);
	border: 1px solid var(--line-strong);
	transition: color var(--motion-hover), border-color var(--motion-hover);
}

#section-posts .pager a.page-numbers:hover,
#section-posts .pager a.page-numbers:focus-visible {
	color: var(--white);
	border-color: var(--accent);
}

#section-posts .pager .page-numbers.current {
	color: var(--primary);
	background: var(--accent);
	border-color: var(--accent);
}

#section-post {
	padding-block: var(--section-pad-y);
	--ct: -72px;
	--cb: -72px;
}

#section-post .post-image {
	margin: 0 0 56px;
}

#section-post .post-image img {
	aspect-ratio: 16 / 9;
	object-fit: cover;
}

#section-post .entry-content > * {
	margin-block: 0 1.4em;
}

#section-post .entry-content > :last-child {
	margin-bottom: 0;
}

#section-post .entry-content h2,
#section-post .entry-content h3,
#section-post .entry-content h4 {
	margin-top: 2.2em;
	font-family: var(--font-heading);
	color: var(--primary);
}

#section-post .entry-content h2 {
	font-size: var(--heading-sm-size);
	font-weight: var(--heading-sm-weight);
	line-height: var(--heading-sm-lh);
	letter-spacing: var(--heading-sm-ls);
}

#section-post .entry-content h3 {
	font-size: var(--card-heading-size);
	font-weight: var(--card-heading-weight);
	line-height: var(--card-heading-lh);
	letter-spacing: var(--card-heading-ls);
	color: var(--secondary);
}

#section-post .entry-content h4 {
	font-size: var(--body-size);
	font-weight: 600;
}

#section-post .entry-content h2 + *,
#section-post .entry-content h3 + *,
#section-post .entry-content h4 + * {
	margin-top: 0;
}

#section-post .entry-content a {
	color: var(--secondary);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

#section-post .entry-content a:hover,
#section-post .entry-content a:focus-visible {
	color: var(--primary);
}

#section-post .entry-content strong {
	color: var(--primary);
}

#section-post .entry-content ul,
#section-post .entry-content ol {
	padding-left: 1.4em;
}

#section-post .entry-content li + li {
	margin-top: 0.5em;
}

#section-post .entry-content blockquote {
	padding-left: 24px;
	border-left: 3px solid var(--primary);
	color: var(--primary);
}

#section-post .entry-content blockquote p {
	margin: 0;
}

#section-post .entry-content img,
#section-post .entry-content figure {
	max-width: 100%;
	height: auto;
}

#section-post .entry-content figcaption {
	margin-top: 8px;
	font-size: var(--small-size);
}

#section-post .entry-content pre,
#section-post .entry-content code {
	font-family: var(--font-mono);
	font-size: 0.9em;
}

#section-post .entry-content pre {
	overflow-x: auto;
	padding: 20px;
	color: var(--white);
	background: var(--primary);
}

.single-post #section-hero .hero-note {
	margin-top: 32px;
}

@media (min-width: 1200px) {
	.single-post #section-hero .hero-copy {
		grid-column: 1 / span 9;
	}
}

@media (max-width: 767.98px) {
	#section-post {
		--ct: -48px;
		--cb: -48px;
	}

	#section-post .post-image {
		margin-bottom: 40px;
	}
}

/* ---------- Service: related ---------- */

#section-related .related-list,
#section-posts .related-list {
	margin: 56px 0 0;
	padding: 0;
	list-style: none;
	border-top: 1px dashed var(--line-strong);
}

#section-related .related-list li,
#section-posts .related-list li {
	border-bottom: 1px dashed var(--line-strong);
}

#section-related .related-row,
#section-posts .related-row {
	display: grid;
	grid-template-columns: 160px minmax(0, 1fr) auto;
	align-items: center;
	gap: 8px 24px;
	min-height: 44px;
	padding-block: 24px;
}

#section-related .related-row h3,
#section-posts .related-row h3 {
	margin: 0;
}

#section-related .related-row:hover .related-title,
#section-posts .related-row:hover .related-title,
#section-related .related-row:focus-visible .related-title,
#section-posts .related-row:focus-visible .related-title {
	color: var(--white);
}

@media (max-width: 767.98px) {
	#section-related .related-row,
	#section-posts .related-row {
		grid-template-columns: minmax(0, 1fr);
	}

	#section-related,
	#section-posts,
	#section-timeline,
	#section-process,
	#section-selfcheck,
	#section-pricing,
	#section-plans {
		--ct: -48px;
		--cb: -48px;
	}
}


/* ---------- Case study (single-work) ----------
   Spec: design/single-work-structure.md. A dark hero, one light band (a sticky sheet-index
   rail in columns 1-3, the sheets in columns 5-12), then the lemon CTA. single-work.php adds
   .sheets-NN to the hero, the band and the CTA so the eyebrow's "01 / NN" counts only the
   sheets that are shown. */

.sheets-01 { --sheet-total: "01"; }
.sheets-02 { --sheet-total: "02"; }
.sheets-03 { --sheet-total: "03"; }
.sheets-04 { --sheet-total: "04"; }
.sheets-05 { --sheet-total: "05"; }
.sheets-06 { --sheet-total: "06"; }
.sheets-07 { --sheet-total: "07"; }
.sheets-08 { --sheet-total: "08"; }
.sheets-09 { --sheet-total: "09"; }
.sheets-10 { --sheet-total: "10"; }

/* Hero: copy in columns 1-7, the facts card in columns 9-12, the glance strip under both. */
.single-work #section-hero .crumbs {
	margin-bottom: 32px;
}

.single-work #section-hero .byline {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px 40px;
	margin-top: 40px;
}

.single-work #section-hero .byline-author {
	display: flex;
	align-items: center;
	gap: 16px;
	margin: 0;
}

.single-work #section-hero .byline-author > span:last-child > span {
	display: block;
}

.single-work #section-hero .byline-chip {
	display: grid;
	flex: none;
	place-items: center;
	width: 44px;
	height: 44px;
	border: 1px solid var(--line-strong);
}

.single-work #section-hero .byline-meta {
	margin: 0;
}

.single-work #section-hero .byline-meta:last-child {
	flex-basis: 100%;
}

.single-work #section-hero .facts-card {
	border: 1px solid var(--line-strong);
	background-color: var(--primary-deep);
}

.single-work #section-hero .facts-shot {
	position: relative;
	border-bottom: 1px solid var(--line-strong);
}

.single-work #section-hero .facts-shot span {
	position: absolute;
	top: 12px;
	left: 12px;
	z-index: 1;
	padding: 4px 8px;
	background-color: var(--primary-deep);
}

.single-work #section-hero .facts-shot img {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	object-fit: cover;
}

.single-work #section-hero .facts-list {
	margin: 0;
}

.single-work #section-hero .facts-list > div {
	display: grid;
	grid-template-columns: 112px minmax(0, 1fr);
	border-top: 1px solid var(--line-strong);
}

.single-work #section-hero .facts-list > div:first-child {
	border-top: 0;
}

.single-work #section-hero .facts-list dt,
.single-work #section-hero .facts-list dd {
	margin: 0;
	padding: 14px 16px;
}

.single-work #section-hero .facts-list dt {
	border-right: 1px solid var(--line-strong);
}

.single-work #section-hero .facts-list .text-link {
	display: inline;
}

.single-work #section-hero .facts-foot {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	margin: 0;
	padding: 12px 16px;
	border-top: 1px solid var(--line-strong);
}

.single-work #section-hero .facts-chip {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 6px 12px;
	border: 1px solid var(--accent);
}

.single-work #section-hero .glance {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 72px 0 0;
	border: 1px solid var(--line-strong);
}

.single-work #section-hero .glance > div {
	position: relative;
	padding: 28px 24px;
}

.single-work #section-hero .glance > div + div {
	border-top: 1px solid var(--line-strong);
}

.single-work #section-hero .glance > div::before {
	content: "";
	position: absolute;
	top: -6px;
	left: 24px;
	width: 10px;
	height: 10px;
	background: var(--accent);
	transform: rotate(45deg);
}

.single-work #section-hero .glance dt,
.single-work #section-hero .glance dd {
	margin: 0;
}

.single-work #section-hero .glance dd {
	margin-top: 12px;
}

.single-work #section-hero .glance dd b {
	font-size: var(--card-heading-size);
	font-weight: 400;
}

@media (min-width: 992px) {
	.single-work #section-hero .glance {
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}

	.single-work #section-hero .glance > div + div {
		border-top: 0;
		border-left: 1px solid var(--line-strong);
	}
}

@media (min-width: 1200px) {
	.single-work #section-hero .hero-copy {
		grid-column: 1 / span 7;
	}

	.single-work #section-hero .hero-art {
		grid-column: 9 / span 4;
		align-self: start;
	}

	.single-work #section-hero .glance {
		grid-column: 1 / -1;
		grid-row: 2;
	}
}

@media (max-width: 1199.98px) {
	.single-work #section-hero .hero-art {
		margin-top: 48px;
	}
}

@media (max-width: 767.98px) {
	.single-work #section-hero .hero-art {
		margin-top: 40px;
	}

	.single-work #section-hero .facts-list > div {
		grid-template-columns: 104px minmax(0, 1fr);
	}

	.single-work #section-hero .glance {
		margin-top: 48px;
	}
}

/* The light band: rail and sheets share one section, so the rail can stay sticky. */
.band {
	padding-block: var(--section-pad-y);
	--ct: -72px;
	--cb: -72px;
}

.band .rail {
	position: sticky;
	top: 24px;
}

.band .rail-label {
	margin: 0 0 12px;
}

.band .rail-list {
	margin: 0;
	padding: 0;
	list-style: none;
	border-bottom: 1px solid var(--rule);
}

.band .rail-list a {
	display: grid;
	grid-template-columns: 40px minmax(0, 1fr);
	align-items: center;
	min-height: 48px;
	padding: 10px 12px 10px 12px;
	border-top: 1px solid var(--rule);
	border-left: 3px solid transparent;
}

.band .rail-list a:hover,
.band .rail-list a:focus-visible,
.band .rail-list a.is-active {
	border-left-color: var(--accent);
}

.band .rail-list a:hover .body,
.band .rail-list a:focus-visible .body,
.band .rail-list a.is-active .body {
	color: var(--primary);
}

.band .rail-progress {
	height: 3px;
	margin-top: 24px;
	background: var(--rule);
}

.band .rail-progress span {
	display: block;
	height: 100%;
	background: var(--secondary);
	transform: scaleX(var(--progress, 0));
	transform-origin: left;
}

.band .rail-note {
	margin: 24px 0 0;
	padding-top: 16px;
	border-top: 1px dashed var(--rule-strong);
}

.band .rail-note .body {
	display: block;
}

.band .sheet + .sheet {
	margin-top: 112px;
}

.band .sheet .eyebrow {
	margin-bottom: 32px;
}

.band .sheet > .heading-md {
	margin: 0;
}

.band .sheet .sheet-lead {
	max-width: 56ch;
	margin: 24px 0 0;
}

/* Quiet proof-type chips: outlined. Measured is filled only on the results panel. */
.proof-chip {
	display: inline-block;
	padding: 4px 10px;
	border: 1px solid var(--rule-strong, var(--line-strong));
	line-height: 1.4;
	white-space: nowrap;
}

.proof-chip.is-estimated,
.proof-chip.is-pending {
	border-style: dashed;
}

/* Brief */
#brief .brief-blocks {
	display: grid;
	gap: 24px;
	margin: 48px 0 0;
	padding-top: 20px;
	border-top: 1px solid var(--rule-strong);
}

#brief .brief-blocks dt,
#brief .brief-blocks dd {
	margin: 0;
}

#brief .brief-blocks dd {
	margin-top: 12px;
}

@media (min-width: 768px) {
	#brief .brief-blocks {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

/* Found: the findings ledger */
#found .ledger {
	width: 100%;
	margin-top: 40px;
	border-top: 1px solid var(--rule-strong);
	border-collapse: collapse;
}

#found .ledger th,
#found .ledger td {
	padding: 20px 20px 20px 0;
	border-bottom: 1px solid var(--rule);
	font-weight: inherit;
	text-align: left;
	vertical-align: top;
}

#found .ledger thead th {
	padding-block: 14px;
}

#found .ledger th:first-child,
#found .ledger td:first-child {
	width: 84px;
}

#found .ledger th:nth-child(2) {
	width: 30%;
}

#found .ledger th:last-child,
#found .ledger td:last-child {
	width: 168px;
	padding-right: 0;
}

@media (max-width: 767.98px) {
	#found .ledger,
	#found .ledger tbody,
	#found .ledger tr,
	#found .ledger th,
	#found .ledger td {
		display: block;
		width: auto;
	}

	#found .ledger thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	#found .ledger tr {
		padding: 20px 0;
		border-bottom: 1px solid var(--rule);
	}

	#found .ledger th,
	#found .ledger td {
		padding: 0;
		border: 0;
	}

	#found .ledger th:first-child,
	#found .ledger td:first-child,
	#found .ledger th:last-child,
	#found .ledger td:last-child {
		width: auto;
	}

	#found .ledger th[scope="row"],
	#found .ledger td + td {
		margin-top: 8px;
	}
}

/* Decisions */
#decisions .decisions {
	display: grid;
	gap: 28px;
	margin: 48px 0 0;
	padding: 0;
	list-style: none;
}

#decisions .decision {
	border: 1px solid var(--rule-strong);
}

#decisions .decision-head {
	display: flex;
	align-items: baseline;
	gap: 16px;
	padding: 18px 24px;
	border-bottom: 1px solid var(--rule-strong);
}

#decisions .decision-head h3 {
	margin: 0;
}

#decisions .decision-body {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px 32px;
	padding: 24px;
}

#decisions .decision-body h4 {
	margin: 0 0 8px;
}

#decisions .decision-body p {
	margin: 0;
}

#decisions .options {
	margin: 0;
	padding: 0;
	list-style: none;
}

#decisions .options li {
	display: flex;
	gap: 12px;
	padding: 4px 0;
}

#decisions .option-mark {
	flex: none;
	width: 16px;
}

#decisions .option-text .small {
	margin-left: 8px;
}

@media (max-width: 767.98px) {
	#decisions .decision-body {
		gap: 20px 24px;
		padding: 20px;
	}

	#decisions .decision-head {
		flex-direction: column;
		gap: 4px;
		padding: 16px 20px;
	}

	#decisions .decision-context,
	#decisions .decision-options {
		grid-column: 1 / -1;
	}

	#decisions .option-text .small {
		display: block;
		margin-left: 0;
	}
}

/* Build: the spec list and the page-weight bars */
#build .build-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 40px;
	margin-top: 48px;
}

#build .spec-rows {
	margin: 0;
	border-top: 1px solid var(--rule-strong);
}

#build .spec-rows > div {
	display: flex;
	justify-content: space-between;
	gap: 24px;
	padding: 14px 0;
	border-bottom: 1px solid var(--rule);
}

#build .spec-rows dt,
#build .spec-rows dd {
	margin: 0;
}

#build .spec-rows dd {
	text-align: right;
}

#build .weight {
	padding-top: 16px;
	border-top: 1px solid var(--rule-strong);
}

#build .weight > p {
	margin: 0 0 20px;
}

#build .weight-row + .weight-row {
	margin-top: 16px;
}

#build .weight-row p {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	margin: 0 0 8px;
}

#build .weight-bar {
	display: block;
	height: 12px;
}

#build .weight-bar.is-before {
	border: 1px solid var(--lilac);
	background: repeating-linear-gradient(135deg, var(--lilac) 0 3px, transparent 3px 7px);
}

#build .weight-bar.is-after {
	border: 1px solid var(--primary);
	background: var(--accent);
}

#build .weight-bar.w-005 { width: 5%; }
#build .weight-bar.w-010 { width: 10%; }
#build .weight-bar.w-015 { width: 15%; }
#build .weight-bar.w-020 { width: 20%; }
#build .weight-bar.w-025 { width: 25%; }
#build .weight-bar.w-030 { width: 30%; }
#build .weight-bar.w-035 { width: 35%; }
#build .weight-bar.w-040 { width: 40%; }
#build .weight-bar.w-045 { width: 45%; }
#build .weight-bar.w-050 { width: 50%; }
#build .weight-bar.w-055 { width: 55%; }
#build .weight-bar.w-060 { width: 60%; }
#build .weight-bar.w-065 { width: 65%; }
#build .weight-bar.w-070 { width: 70%; }
#build .weight-bar.w-075 { width: 75%; }
#build .weight-bar.w-080 { width: 80%; }
#build .weight-bar.w-085 { width: 85%; }
#build .weight-bar.w-090 { width: 90%; }
#build .weight-bar.w-095 { width: 95%; }
#build .weight-bar.w-100 { width: 100%; }

@media (min-width: 768px) {
	#build .build-grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 28px;
	}
}

/* Results: the night panel */
#results .results-panel {
	margin-top: 48px;
	background-color: var(--primary-deep);
}

#results .panel-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 4px 16px;
	margin: 0;
	padding: 16px 24px;
	border-bottom: 1px solid var(--line-strong);
}

#results .claims {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}

#results .claims li {
	padding: 24px;
	border-bottom: 1px solid var(--line-strong);
}

#results .claims h3 {
	margin: 0 0 12px;
}

#results .claims .figures {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 16px;
	margin: 0 0 12px;
}

#results .claims s {
	text-decoration: line-through;
}

#results .claims b {
	font-weight: inherit;
}

#results .claims .source {
	margin: 0;
}

#results .claims .source a {
	color: var(--accent);
	text-decoration: underline;
}

#results .method {
	margin: 0;
	padding: 24px;
}

#results .proof-chip {
	color: var(--tertiary);
}

#results .proof-chip.is-measured {
	border-color: var(--accent);
	background-color: var(--accent);
	color: var(--primary);
}

#results .proof-chip.is-client-reported {
	color: var(--off-white);
}

#results .is-pending .pending-note {
	padding: 40px;
}

#results .is-pending .pending-note p {
	margin: 0 0 16px;
}

#results .is-pending .pending-note p:last-child {
	max-width: 52ch;
	margin-bottom: 0;
}

#results .is-pending .pending-claims ul {
	margin: 0;
	padding: 0;
	list-style: none;
}

#results .is-pending .pending-claims li {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	padding: 18px 24px;
	border-top: 1px solid var(--line-strong);
}

#results .is-pending .pending-claims .panel-head {
	border-top: 1px solid var(--line-strong);
	border-bottom: 0;
}

@media (min-width: 768px) {
	#results .claims {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	#results .claims li:nth-child(odd) {
		border-right: 1px solid var(--line-strong);
	}
}

@media (max-width: 767.98px) {
	#results .is-pending .pending-note {
		padding: 24px;
	}
}

/* Words */
#words .words {
	display: flex;
	align-items: flex-start;
	gap: 32px;
	margin: 0;
}

#words .words-photo {
	flex: none;
	width: 96px;
	border: 1px solid var(--rule-strong);
}

#words .words-photo img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

#words blockquote {
	margin: 0;
}

#words blockquote p {
	margin: 0;
}

#words figcaption {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 4px 12px;
	margin-top: 20px;
}

#words figcaption .text-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

@media (max-width: 575.98px) {
	#words .words {
		flex-direction: column;
		gap: 20px;
	}
}

/* Redo: a note box (dashed, with a gem) */
#redo .note-box {
	display: flex;
	gap: 20px;
	padding: 24px;
	border: 1px dashed var(--rule-strong);
}

#redo .note-box .gem {
	margin-top: 8px;
}

#redo .note-box p {
	margin: 0;
	font-weight: 500;
}

#redo .note-box ul {
	margin: 16px 0 0;
	padding-left: 20px;
}

#redo .note-box li + li {
	margin-top: 8px;
}

/* Author box (unnumbered) */
#author .author-box {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 24px;
	padding: 24px;
	border: 1px solid var(--rule-strong);
}

#author .author-box > .gem {
	position: absolute;
	top: -6px;
	left: 24px;
	width: 10px;
	height: 10px;
}

#author .author-portrait {
	align-self: start;
	width: 120px;
	margin: 0;
	border: 1px solid var(--rule-strong);
}

#author .author-portrait img {
	display: block;
	width: 100%;
	aspect-ratio: 1;
	object-fit: cover;
}

#author .author-text h2 {
	margin: 0 0 12px;
}

#author .author-text p {
	margin: 0 0 16px;
}

#author .author-chips {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0;
	padding: 0;
	list-style: none;
}

#author .author-chips li {
	padding: 8px 12px;
	border: 1px solid var(--rule-strong);
}

#author .author-stamps dl {
	margin: 0;
}

#author .author-stamps dl > div {
	display: flex;
	justify-content: space-between;
	gap: 16px;
	padding: 8px 0;
	border-bottom: 1px dashed var(--rule-strong);
}

#author .author-stamps dt,
#author .author-stamps dd {
	margin: 0;
}

#author .author-stamps p {
	margin: 16px 0 0;
}

#author .author-stamps .text-link {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

@media (min-width: 768px) {
	#author .author-box {
		grid-template-columns: 120px minmax(0, 1fr);
		gap: 24px 32px;
		padding: 32px;
	}

	#author .author-stamps {
		grid-column: 1 / -1;
	}
}

@media (min-width: 1400px) {
	#author .author-box {
		grid-template-columns: 120px minmax(0, 1fr) 272px;
	}

	#author .author-stamps {
		grid-column: auto;
	}
}

@media (max-width: 991.98px) {
	.band {
		--ct: -48px;
		--cb: -48px;
	}
}

@media (max-width: 767.98px) {
	.band .sheet + .sheet {
		margin-top: 72px;
	}

	.band .sheet .eyebrow {
		margin-bottom: 24px;
	}
}

/* ==========================================================================
   2. TYPOGRAPHIES
   Classes set the look; tags only set structure. No class sets a color:
   the final look is always .text-style + .color.
   ========================================================================== */

/* Base */
body {
	font-family: var(--font-body);
	font-size: var(--body-size);
	font-weight: var(--body-weight);
	line-height: var(--body-lh);
	color: var(--off-white);
	background-color: var(--primary);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* Neutral reset: heading tags carry no look of their own */
h1, h2, h3, h4, h5, h6 {
	margin: 0;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	color: inherit;
}

p {
	margin: 0;
}

/* Spacing between stacked text blocks (WYSIWYG output, etc.) */
p + p,
ul + p,
ol + p,
p + ul,
p + ol {
	margin-top: 1em;
}

/* Text styles */
.heading-xl,
.heading-lg,
.heading-md,
.heading-sm,
.card-heading {
	font-family: var(--font-heading);
}

.heading-xl {
	font-size: var(--heading-xl-size);
	font-weight: var(--heading-xl-weight);
	line-height: var(--heading-xl-lh);
	letter-spacing: var(--heading-xl-ls);
}

.heading-lg {
	font-size: var(--heading-lg-size);
	font-weight: var(--heading-lg-weight);
	line-height: var(--heading-lg-lh);
	letter-spacing: var(--heading-lg-ls);
}

.heading-md {
	font-size: var(--heading-md-size);
	font-weight: var(--heading-md-weight);
	line-height: var(--heading-md-lh);
	letter-spacing: var(--heading-md-ls);
	text-wrap: balance;
}

.heading-sm {
	font-size: var(--heading-sm-size);
	font-weight: var(--heading-sm-weight);
	line-height: var(--heading-sm-lh);
	letter-spacing: var(--heading-sm-ls);
}

.card-heading {
	font-size: var(--card-heading-size);
	font-weight: var(--card-heading-weight);
	line-height: var(--card-heading-lh);
	letter-spacing: var(--card-heading-ls);
}

.subheading {
	font-family: var(--font-body);
	font-size: var(--subheading-size);
	font-weight: var(--subheading-weight);
	line-height: var(--subheading-lh);
	letter-spacing: var(--subheading-ls);
}

.body {
	font-family: var(--font-body);
	font-size: var(--body-size);
	font-weight: var(--body-weight);
	line-height: var(--body-lh);
	letter-spacing: var(--body-ls);
}

/* Eyebrow: usually the section's SEO heading tag. It carries the sheet number
   box ("01 / 08") and a hairline rule running to the edge. */
.eyebrow {
	counter-increment: sheet;
	display: flex;
	align-items: center;
	gap: 14px;
	font-family: var(--font-mono);
	font-size: var(--eyebrow-size);
	font-weight: var(--eyebrow-weight);
	line-height: var(--eyebrow-lh);
	letter-spacing: var(--eyebrow-ls);
}

.eyebrow::before {
	content: counter(sheet, decimal-leading-zero) " / " var(--sheet-total, "00");
	content: counter(sheet, decimal-leading-zero) " / " var(--sheet-total, "00") / "";
	flex: none;
	padding: 5px 9px;
	border: 1px solid currentColor;
	letter-spacing: 0.04em;
}

.eyebrow::after {
	content: "";
	flex: 1;
	min-width: 24px;
	height: 1px;
	background: var(--rule-strong);
}

@media (max-width: 767.98px) {
	.eyebrow {
		flex-wrap: wrap;
		gap: 10px;
	}

	.eyebrow::after {
		display: none;
	}
}

.small {
	font-family: var(--font-body);
	font-size: var(--small-size);
	font-weight: var(--small-weight);
	line-height: var(--small-lh);
	letter-spacing: var(--small-ls);
}

/* Modifier: combine with any text style, e.g. "eyebrow caps" */
.caps {
	text-transform: uppercase;
	letter-spacing: var(--caps-ls);
}

/* Modifier: the mono family for labels, refs, meta and callouts, e.g. "small mono" */
.mono {
	font-family: var(--font-mono);
}

/* Hero: the large benefit line is a <span>; keep it on its own line */
span.heading-xl,
span.heading-lg {
	display: block;
}


/* ==========================================================================
   3. NAVIGATION
   Header, primary menu (DG_Nav_Walker), dropdowns, mobile menu.
   Bootstrap navbar/dropdown/offcanvas are re-themed through their CSS vars.
   ========================================================================== */

.navbar {
	--bs-navbar-padding-y: 28px;
	--bs-navbar-color: var(--white);
	--bs-navbar-hover-color: var(--white);
	--bs-navbar-active-color: var(--white);
	--bs-navbar-nav-link-padding-x: 0;
	--bs-navbar-toggler-border-color: transparent;
	--bs-navbar-toggler-focus-width: 0;
}

.site-logo,
.custom-logo-link {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	min-height: 44px;
	font-family: var(--font-heading);
	font-weight: 500;
	font-size: 1.125rem;
	letter-spacing: -0.01em;
}

.custom-logo {
	width: auto;
	max-height: 44px;
}

.navbar-nav .nav-link {
	display: flex;
	align-items: center;
	min-height: 44px;
	font-weight: 600;
}

@media (min-width: 992px) {
	.navbar-nav {
		gap: 30px;
	}
}

.navbar-nav .nav-link:hover,
.navbar-nav .nav-link:focus-visible,
.navbar-nav .nav-link.active {
	text-decoration: underline;
	text-underline-offset: var(--text-link-offset);
	text-decoration-thickness: var(--text-link-thickness);
}

.navbar-toggler {
	min-width: 44px;
	min-height: 44px;
	font-size: 1.75rem;
	line-height: 1;
}

.dropdown-menu {
	--bs-dropdown-bg: var(--primary-deep);
	--bs-dropdown-color: var(--white);
	--bs-dropdown-border-color: var(--line-strong);
	--bs-dropdown-border-radius: var(--radius);
	--bs-dropdown-link-color: var(--white);
	--bs-dropdown-link-hover-color: var(--accent);
	--bs-dropdown-link-hover-bg: transparent;
	--bs-dropdown-link-active-color: var(--accent);
	--bs-dropdown-link-active-bg: transparent;
	box-shadow: var(--shadow);
}

.dropdown-item {
	display: flex;
	align-items: center;
	min-height: 44px;
}

.offcanvas {
	--bs-offcanvas-bg: var(--primary);
	--bs-offcanvas-color: var(--white);
}

.btn-close {
	filter: invert(1);
}

@media (min-width: 992px) {
	.navbar .offcanvas {
		background-color: transparent;
	}
}

/* ---------- Services menu ----------
   The Services item is a link plus a toggle button that opens a panel of the
   services grouped by Build / Grow / Care, each with an icon and a short line.
   Desktop: a full-container panel under the header, opened on hover (mouse) or
   with the toggle (keyboard, touch); Esc closes it. Mobile: the panel sits in the
   menu, under its row. */

.nav-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 32px;
	min-height: 44px;
	padding: 0;
	font-size: 0.75rem;
	color: var(--white);
	background: none;
	border: 0;
	transition: color var(--motion-hover);
}

.nav-toggle i {
	transition: transform var(--motion-hover) var(--motion-ease);
}

.nav-toggle[aria-expanded="true"] i {
	transform: rotate(180deg);
}

.nav-toggle:hover,
.nav-toggle:focus-visible {
	color: var(--accent);
}

.mega-swatch {
	display: inline-block;
	width: 10px;
	height: 10px;
	margin-right: 10px;
}

.mega-swatch.s0 { background-color: var(--secondary); }
.mega-swatch.s1 { background-color: var(--lilac); }
.mega-swatch.s2 { background-color: var(--accent); }

.mega ul {
	display: grid;
	gap: 4px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.mega-group-name {
	margin: 0 0 16px;
}

.mega-link {
	display: grid;
	grid-template-columns: 44px minmax(0, 1fr) auto;
	align-items: center;
	gap: 14px;
	min-height: 44px;
	padding: 10px;
	color: var(--white);
	border: 1px solid transparent;
	transition: border-color var(--motion-hover), background-color var(--motion-hover);
}

.mega-link:not(:has(.mega-icon)) {
	grid-template-columns: minmax(0, 1fr) auto;
}

.mega-icon {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	font-size: 1.25rem;
	color: var(--accent);
	border: 1px solid var(--line-strong);
	transition: color var(--motion-hover), background-color var(--motion-hover), border-color var(--motion-hover);
}

.mega-name {
	display: block;
	font-weight: 600;
}

.mega-desc {
	display: block;
	margin-top: 2px;
}

.mega-arrow {
	color: var(--accent);
	opacity: 0;
	transform: translateX(-6px);
	transition: opacity var(--motion-hover), transform var(--motion-hover) var(--motion-ease);
}

.mega-link:hover,
.mega-link:focus-visible,
.mega-link[aria-current="page"] {
	border-color: var(--line-strong);
	background-color: var(--primary-soft);
}

.mega-link:hover .mega-icon,
.mega-link:focus-visible .mega-icon {
	color: var(--primary);
	background-color: var(--accent);
	border-color: var(--accent);
}

.mega-link:hover .mega-arrow,
.mega-link:focus-visible .mega-arrow {
	opacity: 1;
	transform: none;
}

.mega-link[aria-current="page"] .mega-icon {
	border-color: var(--accent);
}

.mega-all {
	display: flex;
	margin: 0;
}

.mega-all a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	min-height: 44px;
}

@media (min-width: 992px) {
	.navbar > .container {
		position: relative;
	}

	.navbar-nav .has-mega {
		position: static;
		display: flex;
		align-items: center;
	}

	/* Hidden with visibility and opacity (not display) so it can fade; the
	   transparent top padding keeps the hover alive across the gap. */
	.dropdown-menu.mega {
		position: absolute;
		top: 100%;
		right: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
		left: calc(var(--bs-gutter-x, 1.5rem) * 0.5);
		z-index: 1000;
		display: block;
		margin: 0;
		padding: 16px 0 0;
		background: transparent;
		border: 0;
		visibility: hidden;
		opacity: 0;
		pointer-events: none;
		transform: translateY(8px);
		transition: opacity var(--motion-hover) var(--motion-ease), transform var(--motion-hover) var(--motion-ease), visibility 0s linear var(--motion-hover);
	}

	.dropdown-menu.mega.show {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transform: none;
		transition-delay: 0s;
	}

	.mega-inner {
		position: relative;
		padding: 32px 32px 12px;
		background: var(--primary-deep);
		border: 1px solid var(--line-strong);
	}

	/* The 56 x 3 lemon tick on the panel's top rule, as on the quotes */
	.mega-inner::before {
		content: "";
		position: absolute;
		top: -1px;
		left: -1px;
		width: 56px;
		height: 3px;
		background: var(--accent);
	}

	.mega-groups {
		display: grid;
		grid-auto-flow: column;
		grid-auto-columns: minmax(0, 1fr);
	}

	.mega-group {
		padding-inline: 24px;
	}

	.mega-group:first-child {
		padding-left: 0;
	}

	.mega-group:last-child {
		padding-right: 0;
	}

	.mega-group + .mega-group {
		border-left: 1px solid var(--line);
	}

	.mega-all {
		justify-content: flex-end;
		margin-top: 20px;
		padding-top: 8px;
		border-top: 1px solid var(--line);
	}

	.has-mega .nav-toggle {
		margin-left: 2px;
	}
}

@media (min-width: 992px) and (hover: hover) {
	.has-mega:hover > .dropdown-menu.mega {
		visibility: visible;
		opacity: 1;
		pointer-events: auto;
		transform: none;
		transition-delay: 0s;
	}

	.has-mega:hover > .nav-toggle i {
		transform: rotate(180deg);
	}
}

/* ---------- Mobile menu ----------
   Full-screen panel. It does not slide: three stacked plates (lemon, soft ink,
   ink), each with a slanted left edge, are revealed with a clip-path from the
   right, one after the other, so the edges read as layers like the stack in the
   designs. The links and contact lines rise in once the plates are in. The
   offcanvas element itself keeps a long transition-duration only so Bootstrap
   waits for the plates before it hides the menu. Plates and menu are hidden
   from 992px up, where the menu is the inline header nav. */

.menu-plate,
.menu-foot {
	display: none;
}

@media (max-width: 991.98px) {
	.navbar .offcanvas.offcanvas-end {
		--bs-offcanvas-width: 100%;
		--bs-offcanvas-bg: transparent;
		overflow: hidden;
		border: 0;
		transform: none;
		transition-duration: calc(var(--motion-duration) * 1.6);
	}

	.menu-plate {
		position: absolute;
		inset: 0;
		z-index: 0;
		display: block;
		pointer-events: none;
		clip-path: polygon(100% 0, 100% 0, 100% 100%, 100% 100%);
		transition: clip-path calc(var(--motion-duration) * 0.85) var(--motion-ease);
	}

	.menu-plate-1 { background-color: var(--accent); }
	.menu-plate-2 { background-color: var(--primary-soft); transition-delay: calc(var(--motion-stagger) * 1ms); }
	.menu-plate-3 { background-color: var(--primary); transition-delay: calc(var(--motion-stagger) * 2ms); }

	.offcanvas.showing .menu-plate-1,
	.offcanvas.show:not(.hiding) .menu-plate-1 {
		clip-path: polygon(7% 0, 100% 0, 100% 100%, 0 100%);
	}

	.offcanvas.showing .menu-plate-2,
	.offcanvas.show:not(.hiding) .menu-plate-2 {
		clip-path: polygon(calc(7% + 7px) 0, 100% 0, 100% 100%, 7px 100%);
	}

	.offcanvas.showing .menu-plate-3,
	.offcanvas.show:not(.hiding) .menu-plate-3 {
		clip-path: polygon(calc(7% + 14px) 0, 100% 0, 100% 100%, 14px 100%);
	}

	/* Closing: the top plate leaves first. */
	.offcanvas.hiding .menu-plate {
		transition-duration: calc(var(--motion-duration) * 0.6);
	}

	.offcanvas.hiding .menu-plate-3 { transition-delay: 0s; }
	.offcanvas.hiding .menu-plate-2 { transition-delay: calc(var(--motion-stagger) * 0.6ms); }
	.offcanvas.hiding .menu-plate-1 { transition-delay: calc(var(--motion-stagger) * 1.2ms); }

	.navbar .offcanvas-header,
	.navbar .offcanvas-body {
		position: relative;
		z-index: 1;
		padding-left: calc(7% + 14px + 22px);
		padding-right: 24px;
	}

	.navbar .offcanvas-header {
		justify-content: flex-end;
		padding-block: 16px 8px;
	}

	.navbar .btn-close {
		width: 44px;
		height: 44px;
		margin: 0;
		padding: 0;
		background-position: center;
		background-size: 18px;
		border: 1px solid var(--line-strong);
		opacity: 1;
		transition: border-color var(--motion-hover), background-color var(--motion-hover);
	}

	.navbar .btn-close:hover,
	.navbar .btn-close:focus-visible {
		border-color: var(--accent);
		background-color: var(--primary-soft);
	}

	.navbar .offcanvas-body {
		display: flex;
		flex-direction: column;
		padding-block: 8px 40px;
	}

	/* The links: big, numbered, ruled. */
	.navbar-nav {
		gap: 0;
		counter-reset: menu;
		border-top: 1px solid var(--line-strong);
	}

	.navbar-nav > li {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		counter-increment: menu;
		border-bottom: 1px solid var(--line-strong);
	}

	.navbar-nav > li > .nav-link {
		flex: 1 1 0;
		gap: 16px;
		min-height: 72px;
		padding-block: 12px;
		font-family: var(--font-heading);
		font-size: var(--heading-sm-size);
		font-weight: 500;
		line-height: 1;
		letter-spacing: var(--heading-sm-ls);
		text-decoration: none;
		transition: color var(--motion-hover);
	}

	.navbar-nav > li > .nav-link::before {
		content: counter(menu, decimal-leading-zero);
		align-self: flex-start;
		margin-top: 20px;
		font-family: var(--font-mono);
		font-size: 0.75rem;
		font-weight: 400;
		letter-spacing: 0.02em;
		color: var(--accent);
	}

	.navbar-nav > li > .nav-link:hover,
	.navbar-nav > li > .nav-link:focus-visible,
	.navbar-nav > li > .nav-link.active {
		color: var(--accent);
		text-decoration: none;
	}

	/* The language switcher is small, unnumbered and unruled. */
	.navbar-nav > li.lang-item {
		border-bottom: 0;
		counter-increment: none;
	}

	.navbar-nav > li.lang-item > .nav-link {
		min-height: 56px;
		font-family: var(--font-mono);
		font-size: 0.875rem;
		font-weight: 400;
		letter-spacing: 0.06em;
		text-transform: uppercase;
	}

	.navbar-nav > li.lang-item > .nav-link::before {
		content: none;
	}

	.has-mega .nav-toggle {
		width: 56px;
		min-height: 72px;
		font-size: 1rem;
		border-left: 1px solid var(--line);
	}

	/* The panel opens in place, under its row (Bootstrap shows and hides it). */
	.dropdown-menu.mega {
		position: static;
		flex: 0 0 100%;
		margin: 0;
		padding: 0;
		background: transparent;
		border: 0;
	}

	.mega-inner {
		padding: 4px 0 16px;
	}

	.mega-groups {
		display: grid;
		gap: 24px;
	}

	.mega-group-name {
		margin-bottom: 8px;
	}

	.mega-link {
		margin-left: -10px;
	}

	.mega-arrow {
		display: none;
	}

	.mega-all {
		margin-top: 8px;
	}

	.menu-foot {
		display: grid;
		gap: 4px;
		margin-top: auto;
		padding-top: 40px;
	}

	.menu-foot p {
		margin: 0 0 8px;
	}

	.menu-foot a {
		display: inline-flex;
		align-items: center;
		min-height: 44px;
	}

	/* Content enters after the plates, one row after another. */
	.navbar-nav > li,
	.menu-foot {
		opacity: 0;
		transform: translateY(var(--motion-distance));
		transition: opacity var(--motion-duration) var(--motion-ease), transform var(--motion-duration) var(--motion-ease);
	}

	.offcanvas.showing .navbar-nav > li,
	.offcanvas.show:not(.hiding) .navbar-nav > li,
	.offcanvas.showing .menu-foot,
	.offcanvas.show:not(.hiding) .menu-foot {
		opacity: 1;
		transform: none;
		transition-delay: calc(var(--motion-duration) * 0.45);
	}

	.offcanvas.showing .navbar-nav > li:nth-child(2),
	.offcanvas.show:not(.hiding) .navbar-nav > li:nth-child(2) { transition-delay: calc(var(--motion-duration) * 0.45 + var(--motion-stagger) * 1ms); }

	.offcanvas.showing .navbar-nav > li:nth-child(3),
	.offcanvas.show:not(.hiding) .navbar-nav > li:nth-child(3) { transition-delay: calc(var(--motion-duration) * 0.45 + var(--motion-stagger) * 2ms); }

	.offcanvas.showing .navbar-nav > li:nth-child(4),
	.offcanvas.show:not(.hiding) .navbar-nav > li:nth-child(4) { transition-delay: calc(var(--motion-duration) * 0.45 + var(--motion-stagger) * 3ms); }

	.offcanvas.showing .navbar-nav > li:nth-child(5),
	.offcanvas.show:not(.hiding) .navbar-nav > li:nth-child(5) { transition-delay: calc(var(--motion-duration) * 0.45 + var(--motion-stagger) * 4ms); }

	.offcanvas.showing .menu-foot,
	.offcanvas.show:not(.hiding) .menu-foot { transition-delay: calc(var(--motion-duration) * 0.45 + var(--motion-stagger) * 5ms); }

	.offcanvas.hiding .navbar-nav > li,
	.offcanvas.hiding .menu-foot {
		transition-duration: calc(var(--motion-duration) * 0.35);
		transition-delay: 0s;
	}
}

@media (max-width: 991.98px) and (prefers-reduced-motion: reduce) {
	.navbar .offcanvas.offcanvas-end {
		transition-duration: 0s;
	}

	.menu-plate,
	.navbar-nav > li,
	.menu-foot {
		transition: none !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	.dropdown-menu.mega,
	.nav-toggle i,
	.mega-link,
	.mega-icon,
	.mega-arrow {
		transition: none;
	}
}

/* The header button is the small size: 16px, 11px / 26px padding */
.site-header .btn-accent {
	padding: 11px 26px;
	font-size: 1rem;
}

@media (max-width: 767.98px) {
	.site-logo,
	.custom-logo-link {
		font-size: 0.875rem;
		gap: 10px;
		white-space: nowrap;
	}

	.site-header .btn-accent {
		padding: 11px 20px;
		font-size: 0.9375rem;
		white-space: nowrap;
	}

	.navbar {
		--bs-navbar-padding-y: 16px;
	}
}

/* ---------- Footer ----------
   A bordered title block, two cells across and two down: wordmark and links
   on the first row, copyright and build note on the second. Stacked on mobile. */

.site-footer {
	padding-block: 72px 56px;
}

.site-footer .footer-sheet {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	border: 1px solid var(--line-strong);
}

.site-footer .footer-sheet > * {
	margin: 0;
	padding: 24px;
}

.site-footer .footer-brand,
.site-footer .footer-copy {
	border-right: 1px solid var(--line-strong);
}

.site-footer .footer-brand,
.site-footer .footer-nav {
	border-bottom: 1px solid var(--line-strong);
}

.site-footer .footer-brand {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 8px;
}

.site-footer .footer-logo {
	width: auto;
	max-height: 44px;
}

.site-footer .footer-text {
	margin: 0;
}

.site-footer .footer-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0 30px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.site-footer .footer-links .nav-link {
	display: flex;
	align-items: center;
	min-height: 44px;
	padding: 0;
	font-weight: 600;
	color: var(--white);
}

.site-footer .footer-links .nav-link:hover,
.site-footer .footer-links .nav-link:focus-visible,
.site-footer .footer-links .nav-link.active {
	color: var(--white);
	text-decoration: underline;
	text-underline-offset: var(--text-link-offset);
	text-decoration-thickness: var(--text-link-thickness);
}

.site-footer .footer-nav {
	display: flex;
	align-items: center;
	justify-content: flex-end;
}

.site-footer .footer-copy,
.site-footer .footer-note {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	min-height: 60px;
}

.site-footer .footer-note {
	justify-content: flex-end;
	text-align: right;
}

.site-footer .footer-contact a {
	text-decoration: underline;
	text-underline-offset: var(--text-link-offset);
	text-decoration-thickness: var(--text-link-thickness);
}

.site-footer .footer-contact a:hover,
.site-footer .footer-contact a:focus-visible {
	color: var(--white);
}

.site-footer a:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}

@media (max-width: 767.98px) {
	.site-footer {
		padding-block: 48px 40px;
	}

	.site-footer .footer-sheet {
		grid-template-columns: minmax(0, 1fr);
	}

	.site-footer .footer-brand,
	.site-footer .footer-nav,
	.site-footer .footer-copy {
		border-right: 0;
		border-bottom: 1px solid var(--line-strong);
	}

	.site-footer .footer-links {
		justify-content: flex-start;
		gap: 0 24px;
	}

	.site-footer .footer-nav {
		justify-content: flex-start;
	}

	.site-footer .footer-note {
		justify-content: flex-start;
		text-align: left;
	}
}

/* Slim footer (Start page): a rule, the copyright left and the privacy link right */
.site-footer-slim {
	padding-block: 24px 40px;
}

.site-footer-slim .footer-bar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 0 24px;
	border-top: 1px solid var(--line-strong);
}

.site-footer-slim .footer-bar p {
	display: flex;
	align-items: center;
	min-height: 60px;
	margin: 0;
}

.site-footer-slim .footer-bar a {
	display: inline-flex;
	align-items: center;
	min-height: 44px;
}

.site-footer-slim .footer-bar a:hover,
.site-footer-slim .footer-bar a:focus-visible {
	color: var(--white);
}


/* ==========================================================================
   4. BUTTONS AND LINKS
   .btn-accent, .btn-outline, .text-link. Bootstrap's .btn classes are not
   loaded and never used.
   ========================================================================== */

a {
	color: inherit;
	text-decoration: none;
	transition: color var(--transition);
}

a:focus-visible,
summary:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 4px;
}

main > section.white-bg a:focus-visible,
main > section.accent-bg a:focus-visible {
	outline-color: var(--primary);
}

/* Both buttons are parallelograms. The clip-path would cut a real border or
   outline, so the outline button's border and the focus ring are drawn on
   skewed pseudo-elements instead. No press scale. */
.btn-accent,
.btn-outline,
.ff-btn-next,
.ff-btn-prev,
form [type="submit"] {
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	min-height: var(--btn-min-height);
	padding: var(--btn-padding-y) var(--btn-padding-x);
	font-family: var(--font-body);
	font-size: var(--btn-font-size);
	font-weight: var(--btn-font-weight);
	line-height: 1.2;
	text-align: center;
	text-decoration: none;
	border: 0;
	border-radius: var(--btn-radius);
	cursor: pointer;
	clip-path: polygon(var(--btn-slant) 0, 100% 0, calc(100% - var(--btn-slant)) 100%, 0 100%);
	transition: background-color var(--motion-hover) var(--motion-ease), color var(--motion-hover) var(--motion-ease);
}

.btn-accent,
.ff-btn-next,
form [type="submit"] {
	background-color: var(--btn-accent-bg);
	color: var(--btn-accent-text);
}

.btn-accent:hover,
.btn-accent:focus-visible,
.ff-btn-next:hover,
.ff-btn-next:focus-visible,
form [type="submit"]:hover,
form [type="submit"]:focus-visible {
	background-color: var(--btn-accent-hover-bg);
	color: var(--btn-accent-hover-text);
}

.btn-outline,
.ff-btn-prev {
	background-color: transparent;
	color: var(--btn-outline-color);
}

.btn-outline::before,
.ff-btn-prev::before {
	content: "";
	position: absolute;
	inset: 0 8px;
	border: var(--btn-border-width) solid currentColor;
	transform: skewX(-13deg);
	pointer-events: none;
}

.btn-outline:hover,
.btn-outline:focus-visible,
.ff-btn-prev:hover,
.ff-btn-prev:focus-visible {
	background-color: var(--btn-outline-hover-bg);
	color: var(--btn-outline-hover-text);
}

/* Inside the clip, so it is never cut off */
.btn-accent:focus-visible::after,
.btn-outline:focus-visible::after,
.ff-btn-next:focus-visible::after,
.ff-btn-prev:focus-visible::after {
	content: "";
	position: absolute;
	inset: 5px 13px;
	border: 2px solid currentColor;
	transform: skewX(-13deg);
	pointer-events: none;
}

.btn-accent:focus-visible,
.btn-outline:focus-visible,
.ff-btn-next:focus-visible,
.ff-btn-prev:focus-visible {
	outline: 0;
}

/* On light and accent sections the outline button flips to primary */
main > section.white-bg .btn-outline,
main > section.accent-bg .btn-outline {
	color: var(--primary);
}

main > section.white-bg .btn-outline:hover,
main > section.white-bg .btn-outline:focus-visible,
main > section.accent-bg .btn-outline:hover,
main > section.accent-bg .btn-outline:focus-visible {
	background-color: var(--primary);
	color: var(--accent);
}

/* On the accent band the primary button inverts */
main > section.accent-bg .btn-accent {
	background-color: var(--primary);
	color: var(--accent);
}

main > section.accent-bg .btn-accent:hover,
main > section.accent-bg .btn-accent:focus-visible {
	background-color: var(--primary-soft);
	color: var(--accent);
}

.text-link {
	font-weight: var(--text-link-weight);
	text-decoration: var(--text-link-decoration);
	text-underline-offset: var(--text-link-offset);
	text-decoration-thickness: var(--text-link-thickness);
}

.text-link:hover,
.text-link:focus-visible {
	text-decoration-thickness: 2px;
}

/* Links inside running copy (field copy can only hold a plain <a href>, so the
   look comes from the container): the text-link look, so they never read as
   plain text. On light sheets they take the secondary color. */
main p a[href] {
	font-weight: var(--text-link-weight);
	text-decoration: var(--text-link-decoration);
	text-underline-offset: var(--text-link-offset);
	text-decoration-thickness: var(--text-link-thickness);
}

main > section.white-bg p a[href] {
	color: var(--secondary);
}

main p a[href]:hover,
main p a[href]:focus-visible {
	text-decoration-thickness: 2px;
}

main > section.white-bg p a[href]:hover,
main > section.white-bg p a[href]:focus-visible {
	color: var(--primary);
}


/* ==========================================================================
   5. FORMS
   Generic form elements. The site's form plugin is named in design.md; its
   own stylesheet is disabled in tools/cleanup.php and its markup is styled
   here, after the generic rules, under a comment naming the plugin.
   Inputs are at least 48px tall with 16px text, so iOS doesn't zoom in.
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
input[type="number"],
input[type="date"],
input[type="search"],
select,
textarea {
	display: block;
	width: 100%;
	min-height: var(--input-height);
	padding: var(--input-padding-y) var(--input-padding-x);
	font-family: var(--font-body);
	font-size: max(16px, var(--body-size));
	line-height: 1.4;
	color: var(--input-text);
	background-color: var(--input-bg);
	border: 1px solid var(--input-border);
	border-radius: var(--input-radius);
	transition: border-color var(--transition);
}

input::placeholder,
textarea::placeholder {
	color: var(--off-white);
}

input:focus,
select:focus,
textarea:focus {
	outline: 2px solid var(--input-focus-border);
	outline-offset: 2px;
	border-color: var(--input-focus-border);
}

textarea {
	min-height: 8rem;
	resize: vertical;
}

label {
	display: block;
	margin-bottom: 8px;
	font-family: var(--font-mono);
	font-size: var(--small-size);
	font-weight: 400;
	letter-spacing: var(--small-ls);
	text-transform: uppercase;
	color: var(--off-white);
}

/* Invalid fields, whatever plugin marks them */
[aria-invalid="true"] {
	border-color: var(--form-error);
}

/* Plugin-specific markup for this site goes below. */

/* ---------- Fluent Forms Pro ----------
   The Start form (design/forms.md). Fields are spaced by the plugin's own
   wrappers; grouped looks come from the container classes set per field in the
   builder: .chips (checkbox or radio options as a two-column set of chips) and
   .chips-sub (a group label such as Build / Grow / Care, in mono, not caps). */

.fluentform .ff-el-group {
	margin-bottom: 28px;
}

.fluentform .ff-el-input--label label {
	margin-bottom: 8px;
}

/* Required marker: an asterisk after the label */
.fluentform .ff-el-is-required.asterisk-right label::after {
	content: " *";
	color: var(--form-error);
}

.fluentform .ff-el-help-message {
	margin: -2px 0 10px;
	font-size: var(--small-size);
	line-height: var(--small-lh);
	color: var(--off-white);
}

/* Two fields side by side from 576px (the plugin's grouped container) */
.fluentform .ff-t-container {
	display: flex;
	flex-wrap: wrap;
	gap: 0 24px;
}

.fluentform .ff-t-cell {
	flex: 1 1 220px;
	min-width: 0;
}

/* Errors sit under the field, in the error color */
.fluentform .ff-el-is-error .ff-el-form-control {
	border-color: var(--form-error);
}

.fluentform .error,
.fluentform .text-danger {
	margin-top: 8px;
	font-size: var(--small-size);
	line-height: var(--small-lh);
	color: var(--form-error);
}

.fluentform .ff-message-success {
	padding: 24px;
	font-size: var(--small-size);
	color: var(--form-success);
	border: 1px solid var(--form-success);
}

/* Steps: three ruled tabs. The finished and current steps carry the lemon rule. */
.fluentform .ff-step-header {
	margin-bottom: 40px;
}

.fluentform .ff-el-progress {
	display: none;
}

.fluentform .ff-step-titles {
	display: flex;
	gap: 24px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.fluentform .ff-step-titles li {
	flex: 1 1 0;
	min-width: 0;
	padding-bottom: 14px;
	font-family: var(--font-mono);
	font-size: var(--small-size);
	line-height: var(--small-lh);
	letter-spacing: var(--small-ls);
	text-transform: uppercase;
	color: var(--off-white);
	border-bottom: 3px solid var(--line-strong);
}

.fluentform .ff-step-titles li.ff_active,
.fluentform .ff-step-titles li.ff_completed {
	border-bottom-color: var(--accent);
}

.fluentform .ff-step-titles li.ff_active {
	color: var(--accent);
}

.fluentform .ff-step-titles li.ff_completed {
	color: var(--white);
}

/* The step's title (a section break field) */
.fluentform .ff-el-section-title {
	margin: 0 0 28px;
	font-family: var(--font-heading);
	font-size: var(--card-heading-size);
	font-weight: var(--card-heading-weight);
	line-height: var(--card-heading-lh);
	letter-spacing: var(--card-heading-ls);
	color: var(--tertiary);
}

.fluentform .step-nav {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 16px;
	margin-top: 32px;
}

.fluentform .step-nav .ff-el-group,
.fluentform .ff_submit_btn_wrapper {
	margin: 0;
}

/* Chips: the real input stays in the DOM at opacity 0, over the whole chip, so it
   stays focusable and screen readers still announce it. */
.fluentform .chips .ff-el-input--content {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 12px;
}

.fluentform .chips .ff-el-form-check {
	margin: 0;
}

.fluentform .chips .ff-el-form-check-label {
	position: relative;
	display: flex;
	align-items: center;
	min-height: 52px;
	margin: 0;
	padding: 12px 16px;
	font-family: var(--font-body);
	font-size: max(16px, var(--body-size));
	letter-spacing: 0;
	text-transform: none;
	color: var(--off-white);
	background: var(--input-bg);
	border: 1px solid var(--input-border);
	cursor: pointer;
	transition: border-color var(--transition), background-color var(--transition), color var(--transition);
}

.fluentform .chips .ff-el-form-check-label:hover,
.fluentform .chips .ff-el-form-check-label:has(input:focus-visible) {
	border-color: var(--accent);
}

.fluentform .chips .ff-el-form-check-label:has(input:focus-visible) {
	outline: 2px solid var(--accent);
	outline-offset: 2px;
}

.fluentform .chips .ff-el-form-check-label:has(input:checked) {
	color: var(--white);
	background: var(--primary-soft);
	border-color: var(--accent);
}

.fluentform .chips .ff-el-form-check-label input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	min-height: 0;
	margin: 0;
	opacity: 0;
	cursor: pointer;
}

.fluentform .chips .ff-el-form-check-label span {
	position: relative;
	padding-left: 34px;
}

/* The marker: a square for checkboxes, a diamond for radios */
.fluentform .chips .ff-el-form-check-label span::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 20px;
	height: 20px;
	border: 1.5px solid var(--input-border);
	transform: translateY(-50%);
}

.fluentform .chips input[type="radio"] + span::before {
	width: 15px;
	height: 15px;
	left: 3px;
	transform: translateY(-50%) rotate(45deg);
}

.fluentform .chips input:checked + span::before {
	border-color: var(--accent);
}

.fluentform .chips input[type="checkbox"]:checked + span::before {
	background: var(--accent);
}

.fluentform .chips input[type="checkbox"]:checked + span::after {
	content: "";
	position: absolute;
	top: calc(50% - 6px);
	left: 7px;
	width: 5px;
	height: 10px;
	border: solid var(--primary);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.fluentform .chips input[type="radio"]:checked + span::before {
	background: var(--accent);
	box-shadow: inset 0 0 0 3px var(--primary-soft);
}

/* A group label such as Build / Grow / Care */
.fluentform .chips-sub .ff-el-input--label label {
	font-size: var(--small-size);
	letter-spacing: 0;
	text-transform: none;
	color: var(--white);
}

.fluentform .chips-sub {
	margin-bottom: 20px;
}

@media (max-width: 575.98px) {
	.fluentform .chips .ff-el-input--content {
		grid-template-columns: minmax(0, 1fr);
	}

	.fluentform .ff-step-titles {
		gap: 12px;
	}

	/* Full-width buttons, the main one first */
	.fluentform .step-nav {
		flex-direction: column-reverse;
		align-items: stretch;
	}

	.fluentform .step-nav .ff-btn {
		width: 100%;
	}
}


/* ==========================================================================
   6. MEDIA
   Images, icons, video.
   ========================================================================== */

img,
svg,
video {
	max-width: 100%;
	height: auto;
}

img {
	display: block;
}

/* Framed photo: a hairline border and an optional mono caption */
.figure-frame {
	margin: 0;
}

.figure-frame img {
	width: 100%;
	border: 1px solid var(--rule-strong);
}

.figure-frame figcaption {
	margin-top: 16px;
}

.bi {
	display: inline-block;
	line-height: 1;
}

/* ---------- Isometric stack (includes/part-iso-stack.php) ----------
   CSS 3D plates: a zero-size .iso wrapper is tipped with rotateX(60deg)
   rotateZ(-45deg) and each plate rises by k * --gap. The projected plate is
   a diamond 1.4142 * --s wide and 0.7071 * --s tall, and a plate k steps up
   sits k * --gap * 0.866 higher on screen. Everything below follows from
   those numbers, so a stack works for 2 to 6 plates.

   A variant sets its own size and anchor:
     --s      plate edge          --gap   rise between plates
     --cx     centre, from left   --pad   space above the top plate
     --below  space under the base plate (room for dimension lines)
   Callouts (.lab), dimension lines (.dim) and the legend are decorative. */

.stack {
	--rise: calc((var(--n) - 1) * var(--gap) * 0.866);
	--cy: calc(var(--rise) + var(--s) * 0.3536 + var(--pad));
	--h: calc(var(--cy) + var(--s) * 0.3536 + var(--below));
	--c: var(--plate-light);
	position: relative;
	height: var(--h);
}

.n-2 { --n: 2; }
.n-3 { --n: 3; }
.n-4 { --n: 4; }
.n-5 { --n: 5; }
.n-6 { --n: 6; }

.k0 { --k: 0; }
.k1 { --k: 1; }
.k2 { --k: 2; }
.k3 { --k: 3; }
.k4 { --k: 4; }
.k5 { --k: 5; }

.stack .iso {
	position: absolute;
	left: var(--cx);
	top: var(--cy);
	width: 0;
	height: 0;
	transform-style: preserve-3d;
	transform: rotateX(60deg) rotateZ(-45deg);
}

.stack .plate {
	--c: var(--plate-light);
	--grid: 24px;
	position: absolute;
	left: calc(var(--s) / -2);
	top: calc(var(--s) / -2);
	width: var(--s);
	height: var(--s);
	transform: translateZ(calc(var(--k) * var(--gap)));
	animation: stack-explode var(--sig-explode-duration) var(--sig-explode-ease) var(--sig-explode-delay) both;
	background:
		linear-gradient(rgba(var(--c), 0.15) 1px, transparent 1px) 0 -1px / var(--grid) var(--grid),
		linear-gradient(90deg, rgba(var(--c), 0.15) 1px, transparent 1px) -1px 0 / var(--grid) var(--grid),
		rgba(var(--c), 0.05);
	box-shadow: inset 0 0 0 1.5px rgba(var(--c), 0.9);
}

@keyframes stack-explode {
	from { transform: translateZ(calc(var(--k) * var(--gap) * 0.1)); }
}

.stack .tone-ink { --c: var(--plate-ink); }
.stack .tone-mid { --c: var(--plate-mid); }
.stack .tone-light { --c: var(--plate-light); }

.stack .tone-lime {
	--c: var(--plate-lime);
	background-color: rgba(var(--c), 0.1);
	box-shadow: inset 0 0 0 2px rgba(var(--c), 0.95);
}

/* Callouts: dotted leader, optional numbered circle, label */
.stack .lab {
	position: absolute;
	left: calc(var(--cx) + var(--s) * 0.7071 + 6px);
	top: calc(var(--cy) - var(--k) * var(--gap) * 0.866);
	display: flex;
	align-items: center;
	gap: 10px;
	width: max-content;
	transform: translateY(-50%);
	font-family: var(--font-mono);
	font-size: var(--small-size);
	line-height: 1.35;
	letter-spacing: 0.01em;
	color: var(--white);
	animation: stack-label var(--sig-label-duration) ease var(--sig-label-delay) both;
}

.stack .lab::before {
	content: "";
	flex: none;
	width: 40px;
	height: 5px;
	background:
		radial-gradient(circle, var(--lilac) 2px, transparent 2.5px) 0 50% / 5px 5px no-repeat,
		linear-gradient(var(--off-white), var(--off-white)) 0 50% / 100% 1px no-repeat;
}

.stack .lab i {
	flex: none;
	display: grid;
	place-items: center;
	width: 30px;
	height: 30px;
	border: 1px solid var(--lilac);
	border-radius: 50%;
	font-style: normal;
	font-size: 13px;
	color: var(--lilac);
}

.stack .lab-top i {
	border-color: var(--accent);
	color: var(--accent);
}

.stack .lab span {
	max-width: 170px;
}

@keyframes stack-label {
	from { opacity: 0; transform: translate(-8px, -50%); }
}

/* Dimension lines: a vertical one down the layers, a horizontal one under the base */
.stack .dim {
	--d: var(--dim-line);
	position: absolute;
	color: var(--off-white);
	animation: stack-dim 0.6s ease var(--sig-dim-delay) both;
}

@keyframes stack-dim {
	from { opacity: 0; }
}

.stack .dim-v,
.stack .dim-h {
	--tick: linear-gradient(90deg, var(--d) 0 4px, transparent 4px 7px);
}

.stack .dim-v::before,
.stack .dim-v::after,
.stack .dim-h::before,
.stack .dim-h::after {
	content: "";
	position: absolute;
	width: 13px;
	height: 1px;
	background: var(--white);
	transform: rotate(-45deg);
}

.stack .dim-v {
	left: calc(var(--cx) - var(--s) * 0.7071 - 52px);
	top: calc(var(--cy) - var(--rise));
	width: 46px;
	height: var(--rise);
	background:
		linear-gradient(var(--d), var(--d)) 10px 0 / 1px 100% no-repeat,
		var(--tick) 0 0 / 100% 1px repeat-x,
		var(--tick) 0 100% / 100% 1px repeat-x;
}

.stack .dim-v::before { left: 4px; top: 0; }
.stack .dim-v::after { left: 4px; bottom: 0; }

.stack .dim-v b {
	position: absolute;
	left: 10px;
	top: 50%;
	padding: 4px 8px;
	background: var(--primary);
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.04em;
	white-space: nowrap;
	transform: translate(-50%, -50%) rotate(-90deg);
}

.stack .dim-h {
	left: calc(var(--cx) - var(--s) * 0.7071);
	top: calc(var(--cy) + var(--s) * 0.3536 + 36px);
	width: calc(var(--s) * 1.4142);
	height: 1px;
	background: var(--d);
}

.stack .dim-h::before { left: -6px; top: 0; }
.stack .dim-h::after { right: -6px; top: 0; }

.stack .dim-h b {
	position: absolute;
	left: 50%;
	top: 0;
	padding: 0 10px;
	background: var(--primary);
	font-family: var(--font-mono);
	font-size: 13px;
	font-weight: 400;
	letter-spacing: 0.04em;
	transform: translate(-50%, -50%);
}

.stack .dim-h i {
	position: absolute;
	top: -30px;
	width: 1px;
	height: 38px;
	background: linear-gradient(var(--d) 0 4px, transparent 4px 7px) 0 0 / 1px 7px repeat-y;
}

.stack .dim-h i:first-of-type { left: 0; }
.stack .dim-h i:last-of-type { right: 0; }

/* Variant: hero (dark sheet). Large from 1400px, medium from 1200px, then
   stacked above the copy (tablet), then the 390px phone version. */
.stack-hero {
	--s: 290px;
	--gap: 104px;
	--cx: 300px;
	--pad: 98px;
	--below: 48px;
	animation: stack-recede var(--sig-recede-duration) ease var(--sig-recede-delay) forwards;
}

@keyframes stack-recede {
	to { filter: saturate(0.8) brightness(0.8); }
}

@media (max-width: 1399.98px) {
	.stack-hero {
		--s: 230px;
		--gap: 84px;
		--cx: 235px;
		--pad: 70px;
	}

	.stack-hero .lab span {
		max-width: 130px;
	}
}

@media (max-width: 1199.98px) {
	.stack-hero {
		--s: 240px;
		--gap: 84px;
		--cx: 280px;
		--pad: 24px;
	}

	.stack-hero .lab span {
		max-width: 170px;
	}
}

@media (max-width: 767.98px) {
	.stack-hero {
		--s: 180px;
		--gap: 58px;
		--cx: 52%;
		--pad: 4px;
		--below: 18px;
	}

	.stack-hero .lab {
		left: calc(var(--cx) + var(--s) * 0.7071 + 2px);
	}

	.stack-hero .lab::before {
		width: 16px;
	}

	.stack-hero .lab span {
		display: none;
	}

	.stack-hero .lab i {
		width: 26px;
		height: 26px;
	}

	.stack-hero .dim-v {
		left: calc(var(--cx) - var(--s) * 0.7071 - 34px);
		width: 30px;
	}

	.stack-hero .dim-v b {
		display: none;
	}

	.stack-hero .dim-h {
		top: calc(var(--cy) + var(--s) * 0.3536 + 24px);
	}

	.stack-hero .dim-h i {
		top: -18px;
		height: 24px;
	}
}

/* Variant: services (light sheet, labelled with the group names) */
.stack-services {
	--s: 190px;
	--gap: 78px;
	--cx: 150px;
	--pad: 18px;
	--below: 13px;
}

.stack-services .plate {
	--grid: 20px;
	background:
		linear-gradient(rgba(var(--c), 0.12) 1px, transparent 1px) 0 -1px / var(--grid) var(--grid),
		linear-gradient(90deg, rgba(var(--c), 0.12) 1px, transparent 1px) -1px 0 / var(--grid) var(--grid),
		rgba(var(--c), 0.04);
	box-shadow: inset 0 0 0 1.5px rgba(var(--c), 0.85);
}

.stack-services .tone-ink { --c: var(--plate-ink-lt); }
.stack-services .tone-mid { --c: var(--plate-mid-lt); }
.stack-services .tone-light { --c: var(--plate-mid-lt); }

.stack-services .tone-lime {
	--c: var(--plate-lime-lt);
	background-color: rgba(var(--plate-lime), 0.35);
	box-shadow: inset 0 0 0 2px rgba(var(--c), 0.95);
}

.stack-services .lab {
	font-family: var(--font-heading);
	font-size: var(--card-heading-size);
	font-weight: var(--card-heading-weight);
	letter-spacing: var(--card-heading-ls);
	color: var(--secondary);
}

.stack-services .lab::before {
	background:
		radial-gradient(circle, var(--secondary) 2px, transparent 2.5px) 0 50% / 5px 5px no-repeat,
		linear-gradient(var(--line-ink-strong), var(--line-ink-strong)) 0 50% / 100% 1px no-repeat;
}

@media (max-width: 767.98px) {
	.stack-services {
		--s: 150px;
		--gap: 62px;
		--cx: 120px;
		--pad: 16px;
		--below: 11px;
	}

	.stack-services .lab::before {
		width: 24px;
	}
}

/* Variant: cta (lemon band, plain outlines in primary, filled top plate) */
.stack-cta {
	--s: 240px;
	--gap: 84px;
	--cx: 50%;
	--pad: 8px;
	--below: 8px;
}

.stack-cta .plate {
	--grid: 20px;
	animation: none;
	background: none;
	box-shadow: inset 0 0 0 1.5px rgba(var(--plate-ink-lt), 0.85);
}

.stack-cta .tone-lime {
	background:
		linear-gradient(rgba(var(--plate-lime), 0.25) 1px, transparent 1px) 0 -1px / var(--grid) var(--grid),
		linear-gradient(90deg, rgba(var(--plate-lime), 0.25) 1px, transparent 1px) -1px 0 / var(--grid) var(--grid),
		var(--primary-soft);
	box-shadow: inset 0 0 0 2px var(--primary);
}

@media (max-width: 1199.98px) {
	.stack-cta {
		--s: 190px;
		--gap: 66px;
	}
}

/* Variant: spec (service hero spec sheet, dark, unlabelled, no entry animation) */
.stack-spec {
	--s: 200px;
	--gap: 58px;
	--cx: 50%;
	--pad: 40px;
	--below: 24px;
}

.stack-spec .plate {
	animation: none;
}

@media (max-width: 767.98px) {
	.stack-spec {
		--s: 160px;
		--gap: 46px;
	}
}

/* Variant: step (service process, small and unlabelled, one plate more per step) */
.stack-step {
	--s: 120px;
	--gap: 26px;
	--cx: 50%;
	--pad: 6px;
	--below: 10px;
}

.stack-step .plate {
	animation: none;
}

/* Mobile key: the hero callouts become a numbered list under the stack */
.legend {
	display: none;
	margin: 0;
	padding: 0;
	list-style: none;
}

@media (max-width: 767.98px) {
	.legend {
		display: grid;
		gap: 10px;
		margin: 28px 0 32px;
	}

	.legend li {
		display: grid;
		grid-template-columns: 26px minmax(0, 1fr);
		gap: 12px;
		align-items: center;
	}

	.legend i {
		display: grid;
		place-items: center;
		width: 26px;
		height: 26px;
		border: 1px solid var(--lilac);
		border-radius: 50%;
		font-style: normal;
		font-size: 13px;
		color: var(--lilac);
	}

	.legend li:first-child i {
		border-color: var(--accent);
		color: var(--accent);
	}
}


/* ==========================================================================
   7. UI ELEMENTS
   Cards, accordion, carousel, motion, and anything that doesn't fit above.
   ========================================================================== */

/* ---------- Motion: entry animations ----------
   Elements marked data-reveal (see assets/js/motion.js). They're only hidden
   once motion.js adds .motion-ready, so without JS everything shows. */

.motion-ready [data-reveal] {
	opacity: 0;
	transition:
		opacity var(--motion-duration) var(--motion-ease) var(--reveal-delay, 0ms),
		transform var(--motion-duration) var(--motion-ease) var(--reveal-delay, 0ms);
}

.motion-ready [data-reveal="up"],
.motion-ready [data-reveal=""] { transform: translateY(var(--motion-distance)); }
.motion-ready [data-reveal="down"] { transform: translateY(calc(var(--motion-distance) * -1)); }
.motion-ready [data-reveal="left"] { transform: translateX(var(--motion-distance)); }
.motion-ready [data-reveal="right"] { transform: translateX(calc(var(--motion-distance) * -1)); }
.motion-ready [data-reveal="zoom"] { transform: scale(0.96); }

.motion-ready [data-reveal].is-revealed {
	opacity: 1;
	transform: none;
}

/* ---------- Motion: interactions ---------- */

/* Cards and other clickable blocks rise slightly on hover */
.hover-lift {
	transition: transform var(--motion-hover) var(--motion-ease), box-shadow var(--motion-hover) var(--motion-ease);
}

.hover-lift:hover,
.hover-lift:focus-within {
	transform: translateY(var(--hover-lift));
	box-shadow: var(--shadow);
}

/* ---------- Gem: the lemon diamond bullet ---------- */
.gem {
	display: inline-block;
	flex: none;
	width: 12px;
	height: 12px;
	background: var(--accent);
	transform: rotate(45deg);
}

main > section.white-bg .gem {
	background: var(--secondary);
}

main > section.accent-bg .gem {
	background: var(--primary);
}

/* ---------- Motion: reduced motion ----------
   Visitors who ask for less motion get none: no entries, no lifts, no
   smooth scrolling, and transitions become instant. The hero stack and the
   underline show their end state at once. */
@media (prefers-reduced-motion: reduce) {
	.stack,
	.stack .plate,
	.stack .lab,
	.stack .dim,
	#section-hero .heading-xl span::after,
	#section-hero .heading-lg span::after {
		animation: none;
	}

	.stack-hero {
		filter: saturate(0.8) brightness(0.8);
	}

	#section-hero .heading-xl span::after,
	#section-hero .heading-lg span::after {
		transform: none;
	}

	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}

	.hover-lift:hover,
	.hover-lift:focus-within {
		transform: none;
	}
}

.accordion {
	--bs-accordion-bg: transparent;
	--bs-accordion-color: var(--primary);
	--bs-accordion-border-color: var(--off-white);
	--bs-accordion-border-radius: var(--radius);
	--bs-accordion-inner-border-radius: var(--radius);
	--bs-accordion-btn-color: var(--primary);
	--bs-accordion-btn-bg: transparent;
	--bs-accordion-active-color: var(--primary);
	--bs-accordion-active-bg: transparent;
	--bs-accordion-btn-focus-box-shadow: none;
}

.accordion-button {
	font-family: var(--font-heading);
	font-weight: var(--card-heading-weight);
}

/* Service FAQ: numbered rows on a light sheet, a square +/- toggle on the right */
#section-faq .accordion {
	--bs-accordion-border-color: var(--rule);
	--bs-accordion-btn-icon: none;
	--bs-accordion-btn-active-icon: none;
	--bs-accordion-btn-padding-y: 22px;
	--bs-accordion-btn-padding-x: 0;
	--bs-accordion-body-padding-x: 0;
	border-top: 1px solid var(--rule-strong);
}

#section-faq .accordion-item {
	border-width: 0 0 1px;
	background-color: transparent;
}

#section-faq .accordion-button {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr) 28px;
	align-items: center;
	gap: 16px;
	min-height: 44px;
	font-size: var(--card-heading-size);
	line-height: var(--card-heading-lh);
	letter-spacing: var(--card-heading-ls);
	color: var(--secondary);
	box-shadow: none;
}

#section-faq .accordion-button::after {
	content: "+";
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	margin: 0;
	border: 1px solid var(--secondary);
	font-family: var(--font-mono);
	font-size: 18px;
	line-height: 1;
	background: none;
	transform: none;
}

#section-faq .accordion-button:not(.collapsed)::after {
	content: "\2212";
	border-color: var(--accent);
	background-color: var(--accent);
	color: var(--primary);
}

#section-faq .accordion-button:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 4px;
}

#section-faq .accordion-body {
	padding-block: 0 24px;
	padding-left: 72px;
}

@media (max-width: 767.98px) {
	#section-faq .accordion-button {
		grid-template-columns: 40px minmax(0, 1fr) 28px;
		gap: 12px;
	}

	#section-faq .accordion-body {
		padding-left: 52px;
	}
}

.carousel-indicators [data-bs-target] {
	background-color: var(--accent);
}