/* Hero — Homepage (dark, image, badge + expertise rail; homepage-specific, not in design-reference but restyled to its tokens) */
/* Rendered with .section--dark (issueslog.md #026) for its dark-surface text
   and button colours; the hero manages its own vertical padding on
   __content, so the section padding that class brings is reset here. */
.hero-home {
	position: relative;
	padding-block: 0;
	background: var(--ink);
	color: var(--paper);
	overflow: hidden;
	min-height: 640px;
	display: flex;
	align-items: flex-end;
}
.hero-home__media { position: absolute; inset: 0; z-index: 0; }
.hero-home__media::before {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20,20,24,0.88) 0%, rgba(20,20,24,0.74) 45%, rgba(20,20,24,0.92) 100%);
	z-index: 1;
}
.hero-home__content {
	position: relative; z-index: 2;
	width: 100%;
	padding-block: 64px var(--space-8);
}
.hero-home__eyebrow { color: var(--accent-light); }
.hero-home__grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: var(--space-8); align-items: end; }
.hero-home h1 { max-width: 20ch; }
.hero-home__badge {
	justify-self: end;
	background: var(--accent);
	color: var(--ink);
	border-radius: 999px;
	width: 96px; height: 96px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	font-family: var(--font-display); font-weight: 600;
	text-align: center; line-height: 1.1;
}
.hero-home__badge strong { font-size: 1.5rem; letter-spacing: -0.02em; }
.hero-home__badge span { font-size: 0.625rem; text-transform: uppercase; letter-spacing: 0.1em; }
.hero-home__body { max-width: 58ch; margin-top: var(--space-5); color: var(--text-body-dark); font-size: var(--fs-lead); line-height: 1.65; }
.hero-home__actions { display: flex; gap: var(--space-4); margin-top: var(--space-6); flex-wrap: wrap; }
.hero-home__expertise {
	display: flex; gap: var(--space-6); flex-wrap: wrap;
	margin-top: var(--space-8);
	padding-top: var(--space-6);
	border-top: 1px solid var(--line-dark);
}
.hero-home__expertise-item strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; }
.hero-home__expertise-item span { font-size: var(--fs-eyebrow); color: var(--muted-dark); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); }

@media (max-width: 767px) {
	.hero-home { min-height: 0; }
	.hero-home__grid { grid-template-columns: 1fr; }
	/* issueslog.md #051 — the circle used to shrink to 72px here while the
	   ~89px "CERTIFICATIONS" label didn't, so the label spilled outside it.
	   Kept at the desktop 96px, which the label fits. */
	.hero-home__badge { justify-self: start; }
	.hero-home h1 { max-width: none; }
	.hero-home__expertise { gap: var(--space-4); }
}

/* Hero — L1: dark, image, expertise rail (design-reference §07) */
/* Rendered with .section--dark-soft (issueslog.md #026); padding reset as for .hero-home. */
.hero-l1 {
	position: relative;
	padding-block: 0;
	background: var(--ink-soft);
	color: var(--paper);
	overflow: hidden;
	min-height: 420px;
	display: flex;
	align-items: flex-end;
}
.hero-l1__media { position: absolute; inset: 0; z-index: 0; }
.hero-l1__media::after {
	content: "";
	position: absolute; inset: 0;
	background: linear-gradient(180deg, rgba(20,20,24,.88) 0%, rgba(20,20,24,.74) 45%, rgba(20,20,24,.92) 100%);
}
.hero-l1__content { position: relative; z-index: 1; padding-block: 64px 48px; }
.hero-l1__content .eyebrow { color: var(--accent-light); }
.hero-l1__content h1 { max-width: 20ch; }
.hero-l1__content .lead { color: var(--text-body-dark); margin-top: var(--space-5); }

/* Hero — L2: light, no image, breadcrumb + at-a-glance box + in-page nav below (design-reference §07) */
.hero-l2 { background: var(--paper); border-bottom: 1px solid var(--line-light); }
.hero-l2__inner { padding-block: 56px 44px; }
.hero-l2__grid { display: grid; grid-template-columns: 1fr 380px; gap: var(--space-8); align-items: end; }
.hero-l2__grid h1 { max-width: 18ch; }
.hero-l2__grid .lead { margin-top: var(--space-5); color: var(--text-body-light); }
.hero-l2__glance {
	background: var(--paper-soft);
	border-radius: var(--radius-inset);
	padding: 26px 28px;
	display: flex;
	flex-direction: column;
	gap: var(--space-4);
}
.hero-l2__glance-title { font-weight: 700; font-size: var(--fs-eyebrow); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--muted-light); }
.hero-l2__glance-row { display: flex; justify-content: space-between; font-size: 0.9375rem; color: var(--text-body-light); }
.hero-l2__glance-row strong { color: var(--ink); font-weight: 600; }
@media (max-width: 1023px) {
	.hero-l2__grid { grid-template-columns: 1fr; }
	.hero-l2__glance { order: -1; }
}

/* Logo strip / social proof bar */
.logo-strip {
	background: var(--paper-soft);
	border: 1px solid var(--line-light);
	border-radius: var(--radius-card);
	padding: 26px 30px;
}
.logo-strip__list {
	display: flex;
	align-items: center;
	gap: var(--space-5) var(--space-7);
	flex-wrap: wrap;
}
.logo-strip__list img { filter: grayscale(1); opacity: 0.75; max-height: 24px; width: auto; }
/* issueslog.md #052 — while real logos are deferred (§4.2 / §5.6), a client
   with no logo, or only the theme placeholder, renders its name as a
   greyscale wordmark instead of a blank stretched tile. */
.logo-strip__wordmark {
	font-family: var(--font-display);
	font-weight: 600;
	font-size: 1.0625rem;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--muted-light);
	white-space: nowrap;
}

/* Case study grid — asymmetric mosaic */
.case-study-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-template-rows: auto auto;
	gap: var(--card-gap);
}
.case-study-card {
	background: var(--paper);
	border: 1px solid var(--line-light);
	border-radius: var(--radius-card);
	overflow: hidden;
	display: flex;
	flex-direction: column;
	transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.case-study-card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(20,20,24,.10); }
.case-study-card--dark { background: var(--ink); color: var(--paper); border-color: var(--line-dark); }
.case-study-card--dark:hover { border-color: var(--line-dark); }
.case-study-card--dark h3 { color: var(--paper); }
.case-study-card--lg { grid-column: span 2; grid-row: span 2; }
.case-study-card--lg .placeholder-media { aspect-ratio: 16/10; }
.case-study-card:hover .placeholder-media img { transform: scale(1.03); }
.case-study-card__body { padding: var(--card-pad); }
.case-study-card__meta { font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--accent-deep); margin-bottom: var(--space-3); }
.case-study-card--dark .case-study-card__meta { color: var(--accent-light); }
.case-study-card h3 { font-size: var(--fs-h3); margin-bottom: var(--space-4); }
.case-study-card__metrics { display: flex; gap: var(--space-7); margin-top: auto; padding-top: var(--space-5); border-top: 1px solid var(--line-light); }
.case-study-card--dark .case-study-card__metrics { border-top-color: var(--line-dark); }
.case-study-card__metric strong { display: block; font-family: var(--font-display); font-size: 1.875rem; font-weight: 600; letter-spacing: -0.03em; }
.case-study-card__metric span { font-size: 0.8125rem; color: var(--muted-light); }
.case-study-card--dark .case-study-card__metric span { color: var(--muted-dark); }

/* Case study index row — compact table variant for the Work L1 index */
.case-study-index { background: var(--paper); border: 1px solid var(--line-light); border-radius: var(--radius-card); overflow: hidden; }
.case-study-index__row {
	display: grid;
	grid-template-columns: 56px 1fr 96px;
	gap: var(--space-4);
	align-items: center;
	padding: 22px 26px;
	border-bottom: 1px solid var(--line-light);
	transition: background var(--dur-fast) var(--ease-out);
}
.case-study-index__row:last-child { border-bottom: none; }
.case-study-index__row:hover { background: var(--paper-soft); }
.case-study-index__num { font-family: var(--font-mono); font-size: 0.8125rem; color: var(--muted-light); }
.case-study-index__title { font-family: var(--font-display); font-weight: 600; font-size: 1.0625rem; letter-spacing: -0.02em; }
.case-study-index__meta { font-size: 0.875rem; color: var(--muted-light); margin-top: 4px; }
.case-study-index__figure { font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: -0.03em; color: var(--accent-deep); text-align: right; }
.case-study-index__title, .case-study-index__meta { display: block; }
/* issueslog.md #045 — the 56px / 1fr / 96px desktop row left titles ~114px
   wide at 390px (5–6 lines). On mobile the row reflows: index number and
   headline figure share a top line, the title and meta take the full width
   below, and no column is reserved for rows without a figure. */
@media (max-width: 767px) {
	.case-study-index__row {
		grid-template-columns: 1fr auto;
		gap: var(--space-2) var(--space-4);
		padding: 20px;
	}
	.case-study-index__num { grid-column: 1; grid-row: 1; }
	.case-study-index__figure { grid-column: 2; grid-row: 1; }
	.case-study-index__body { grid-column: 1 / -1; grid-row: 2; }
}

@media (max-width: 1023px) {
	.case-study-grid { grid-template-columns: repeat(2, 1fr); }
	.case-study-card--lg { grid-column: span 2; grid-row: auto; }
}
@media (max-width: 767px) {
	.case-study-grid { grid-template-columns: 1fr; }
	.case-study-card--lg { grid-column: span 1; }
}

/* Stat band */
.stat-band { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-7); }
.stat-band__item strong { display: block; font-family: var(--font-display); font-size: 2.875rem; font-weight: 600; letter-spacing: -0.045em; }
.stat-band__item span { font-size: 0.875rem; color: var(--text-body-light); margin-top: var(--space-2); display: block; }
.section--dark .stat-band__item span, .section--dark-soft .stat-band__item span { color: var(--text-body-dark); }
@media (max-width: 767px) {
	.stat-band { grid-template-columns: repeat(2, 1fr); gap: var(--space-6); }
}

/* Numbered method / process — dark section staple */
.process-list { display: flex; flex-direction: column; }
.process-step { padding-block: 22px; border-top: 1px solid var(--line-dark); }
.section:not(.section--dark):not(.section--dark-soft) .process-step { border-top-color: var(--line-light); }
.process-step:last-child { border-bottom: 1px solid var(--line-dark); }
.section:not(.section--dark):not(.section--dark-soft) .process-step:last-child { border-bottom-color: var(--line-light); }
.process-step__index { display: block; font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent); margin-bottom: var(--space-2); }
/* a11y audit: --accent on --paper is 3.52:1, below the 4.5:1 AA minimum for
   this 12px mono numeral when the process module's theme control is set to
   light — the dark-section value (--accent, 5.21:1 against --ink) was fine,
   but there was no light-section override at all, unlike __title/__desc
   right below. */
.section:not(.section--dark):not(.section--dark-soft) .process-step__index { color: var(--accent-deep); }
.process-step__title { display: block; font-family: var(--font-display); font-size: 1.5rem; font-weight: 600; letter-spacing: -0.025em; color: var(--accent-light); }
.section:not(.section--dark):not(.section--dark-soft) .process-step__title { color: var(--ink); }
.process-step__desc { margin: var(--space-2) 0 0; color: var(--muted-dark); max-width: 62ch; }
.section:not(.section--dark):not(.section--dark-soft) .process-step__desc { color: var(--text-body-light); }

@media (max-width: 767px) {
	.process-step { padding-block: var(--space-5); }
}

/* Platform panel — tabbed, left categories / right capability grid */
.platforms-matrix { display: grid; grid-template-columns: 200px 1fr; border: 1px solid var(--line-light); border-radius: var(--radius-card); overflow: hidden; background: var(--paper); }
.platforms-matrix__tabs { background: var(--paper-soft); border-right: 1px solid var(--line-light); display: flex; flex-direction: column; }
.platforms-matrix__tab {
	text-align: left; background: none; border: none; cursor: pointer;
	padding: 18px 22px;
	font-family: var(--font-body); font-size: 1rem; font-weight: 500; color: var(--text-body-light);
	border-left: 3px solid transparent;
}
.platforms-matrix__tab[aria-selected="true"] { background: var(--paper); color: var(--ink); font-family: var(--font-display); font-weight: 600; border-left-color: var(--accent); }
.platforms-matrix__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; padding: 26px 28px; }
.platforms-matrix__cell {
	border: 1px solid var(--line-light);
	border-radius: var(--radius-sm);
	padding: 16px;
	font-size: 0.9375rem;
	font-weight: 500;
}
.platforms-matrix__panel { display: none; }
.platforms-matrix__panel.is-active { display: block; }
.platforms-matrix__cta { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: center; gap: var(--space-5); background: var(--paper-soft); border-radius: var(--radius-sm); padding: var(--space-5); margin-top: var(--space-2); flex-wrap: wrap; }

/*
 * issueslog.md #005 — tabs on desktop, accordion on mobile (§16). The
 * accordion is a second markup structure (see module-platforms-matrix.php),
 * so exactly one of the two shows per breakpoint rather than the tab strip
 * merely reflowing.
 */
.platforms-matrix-accordion { display: none; }
@media (max-width: 767px) {
	.platforms-matrix { display: none; }
	.platforms-matrix-accordion { display: block; }
	.platforms-matrix-accordion .platforms-matrix__grid { grid-template-columns: 1fr; padding: var(--space-4) 0 var(--space-5); }
}

/* Testimonials */
.testimonial-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--card-gap); }
/* Card border and attribution colour previously hardcoded to the dark-surface
   tokens (--line-dark, --muted-dark) regardless of which surface the card
   actually sits on. On a light/.section (the common case — see e.g. the
   testimonial on a case-study single) this rendered a near-black border
   against white and a 3.04:1 attribution text colour (axe-core
   color-contrast, below the 4.5:1 AA minimum for body text). Defaults now
   match the light-surface tokens used everywhere else in the component
   library, with the dark-surface values applied only inside
   .section--dark/.section--dark-soft, mirroring .contact-details__label's
   existing pattern. */
.testimonial-card { padding: var(--card-pad); border: 1px solid var(--line-light); border-radius: var(--radius-card); }
.testimonial-card blockquote { margin: 0 0 var(--space-5); font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; letter-spacing: -0.01em; }
.testimonial-card__attribution { display: flex; align-items: center; gap: var(--space-3); }
.testimonial-card__avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--accent); flex-shrink: 0; }
.testimonial-card__attribution strong { display: block; font-size: 0.9375rem; }
.testimonial-card__attribution span { font-size: var(--fs-eyebrow); color: var(--muted-light); }
.section--dark .testimonial-card, .section--dark-soft .testimonial-card { border-color: var(--line-dark); }
.section--dark .testimonial-card__attribution span, .section--dark-soft .testimonial-card__attribution span { color: var(--muted-dark); }
@media (max-width: 767px) { .testimonial-grid { grid-template-columns: 1fr; } }

/* Service card — numbered index + capability tags */
.service-card {
	background: var(--paper);
	border: 1px solid var(--line-light);
	border-radius: var(--radius-card);
	padding: var(--card-pad);
	display: flex;
	flex-direction: column;
	gap: var(--space-3);
	height: 100%;
	transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out);
}
.service-card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(20,20,24,.10); }
.service-card__head { display: flex; align-items: baseline; justify-content: space-between; }
.service-card__index { font-family: var(--font-mono); font-size: 0.75rem; color: var(--accent-deep); }
.service-card__count { font-family: var(--font-body); font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--muted-light); }
.service-card h3 { font-size: 1.5rem; letter-spacing: -0.025em; }
.service-card__tags { margin-top: auto; padding-top: var(--space-5); border-top: 1px solid var(--line-light); display: flex; flex-wrap: wrap; gap: var(--space-2); }
.service-card__tag { font-size: 0.8125rem; color: var(--text-body-light); background: var(--paper-soft); padding: 9px 12px; border-radius: var(--radius-pill); }

/* Sector card — image-led */
.sector-card { background: var(--paper-soft); border-radius: var(--radius-card); overflow: hidden; height: 100%; transition: transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.sector-card:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(20,20,24,.10); }
.sector-card .placeholder-media { height: 180px; aspect-ratio: auto; }
.sector-card__body { padding: 26px 28px 30px; }
.sector-card__meta { font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--accent-deep); }
.sector-card h3 { font-size: 1.375rem; letter-spacing: -0.025em; margin-top: var(--space-3); }
.sector-card p { margin-top: 10px; margin-bottom: 0; }

/* Card grid item — generic fallback (also used by module-card-grid.php when no numbered/image treatment applies) */
.info-card { padding: var(--card-pad); border: 1px solid var(--line-light); border-radius: var(--radius-card); background: var(--paper); height: 100%; display: block; transition: border-color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), box-shadow var(--dur-fast) var(--ease-out); }
.info-card:hover { border-color: var(--ink); transform: translateY(-2px); box-shadow: 0 6px 20px rgba(20,20,24,.10); }
/* issueslog.md #044 — non-link cards (no URL) don't get the link hover lift. */
.info-card--static:hover { border-color: var(--line-light); transform: none; box-shadow: none; }
.info-card h3 { font-size: 1.375rem; letter-spacing: -0.025em; margin-bottom: var(--space-3); }
.info-card p { color: var(--text-body-light); margin-bottom: 0; }

/* Partnerships */
.partnerships { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); flex-wrap: wrap; }
.partnerships__badges { display: flex; gap: var(--space-6); flex-wrap: wrap; }
.partnerships__badge { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); font-size: var(--fs-eyebrow); text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--muted-light); }
.partnerships__badge-mark { width: 56px; height: 56px; border-radius: var(--radius-sm); background: var(--paper-soft); }

/* Insights / blog teaser */
.insights-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--card-gap); }
.insight-card__meta { font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--accent-deep); margin: var(--space-4) 0 var(--space-2); }
.insight-card h3 { font-size: 1.375rem; letter-spacing: -0.025em; }
@media (max-width: 1023px) { .insights-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .insights-grid { grid-template-columns: 1fr; } }

/* CTA block */
.cta-block { text-align: center; max-width: 720px; margin-inline: auto; }
.cta-block h2 { margin-bottom: var(--space-5); }
.cta-block__actions { display: flex; justify-content: center; gap: var(--space-4); margin-top: var(--space-6); flex-wrap: wrap; }

/* Text + visual split — 50/50, reversible. Class names match what
   module-text-visual-split.php actually emits: __media / __body, and an
   --image-left / --image-right modifier (default) rather than a generic
   "reversed" flag. */
.text-visual-split { background: var(--paper); border: 1px solid var(--line-light); border-radius: var(--radius-card); overflow: hidden; display: grid; grid-template-columns: 1fr 1fr; align-items: center; }
.text-visual-split--image-left .text-visual-split__media { order: -1; }
.text-visual-split__body { padding: var(--card-pad); }
.text-visual-split__body h2 { font-size: 1.75rem; line-height: 1.15; letter-spacing: -0.03em; }
.text-visual-split__body p, .text-visual-split__copy p { margin-top: 14px; max-width: 46ch; }
.text-visual-split__copy p:first-child { margin-top: 0; }
.text-visual-split__media { min-height: 230px; height: 100%; }
.text-visual-split__media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 767px) {
	.text-visual-split { grid-template-columns: 1fr; }
	.text-visual-split--image-left .text-visual-split__media { order: 0; }
}

/* Related content — service → sector → work internal linking block */
.related-content { background: var(--paper-soft); border-radius: var(--radius-card); padding: 34px 36px; }
.related-content__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-5); margin-bottom: var(--space-6); flex-wrap: wrap; }
.related-content__group { background: var(--paper); border-radius: var(--radius-inset); padding: 22px 24px; }
.related-content__group-title { font-size: var(--fs-eyebrow); font-weight: 700; text-transform: uppercase; letter-spacing: var(--tracking-eyebrow); color: var(--muted-light); margin-bottom: var(--space-3); }
.related-content__group ul { display: flex; flex-direction: column; gap: 9px; }
.related-content__group a { font-weight: 500; font-size: 1rem; }
.related-content__group a:hover { color: var(--accent-deep); }

/* FAQ / accordion */
.accordion-item { border-bottom: 1px solid var(--line-light); }
.accordion-item__trigger {
	width: 100%; display: flex; justify-content: space-between; align-items: center; gap: var(--space-5);
	background: none; border: none; text-align: left; cursor: pointer;
	padding: 22px 0; font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; color: inherit;
}
.accordion-item__panel { overflow: hidden; max-height: 0; transition: max-height var(--dur-base) var(--ease-out); }
.accordion-item__panel[data-open="true"] { max-height: 800px; }
.accordion-item__panel-inner { padding-bottom: var(--space-5); color: var(--text-body-light); max-width: 60ch; }
.accordion-item__icon { font-size: 1.25rem; color: var(--muted-light); flex-shrink: 0; }
.accordion-item__trigger[aria-expanded="true"] .accordion-item__icon { color: var(--accent); }

/* Form — contact and campaign landing pages */
.form-block { background: var(--paper); border: 1px solid var(--line-light); border-radius: var(--radius-card); padding: var(--card-pad); }
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); }
.form-field { display: flex; flex-direction: column; gap: var(--space-2); }
.form-field--full { grid-column: 1 / -1; }
.form-field label { font-weight: 600; font-size: 0.875rem; color: var(--text-body-light); }
.form-field input, .form-field select, .form-field textarea {
	border: 1px solid var(--line-light);
	border-radius: var(--radius-sm);
	padding: 16px 18px;
	font-family: var(--font-body);
	font-size: 1rem;
	color: var(--ink);
	background: var(--paper);
}
.form-field textarea { min-height: 120px; resize: vertical; }
.form-field input:focus, .form-field select:focus, .form-field textarea:focus {
	/* a11y audit: this used to set `outline: none` with only a 1.5px border
	   change as a replacement — too easy to miss and not a visible-focus
	   equivalent. Keep the border tweak as reinforcement but let the global
	   `:focus-visible` ring (base.css) show as the real indicator. */
	border: 1.5px solid var(--accent);
}
/* Errors beyond colour alone (WCAG 1.4.1): a heavier border (shape, not
   just colour) plus an explicit icon + bold weight on the message text —
   never colour as the only cue. */
.form-field--error input,
.form-field--error select,
.form-field--error textarea,
.form-field input[aria-invalid="true"],
.form-field select[aria-invalid="true"],
.form-field textarea[aria-invalid="true"] { border-color: var(--accent-deep); border-width: 2px; color: var(--ink); }
.form-field__error {
	display: flex;
	align-items: center;
	gap: 6px;
	font-size: 0.8125rem;
	font-weight: 700;
	color: var(--accent-deep);
}
.form-field__error::before {
	content: "!";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	background: var(--accent-deep);
	color: var(--paper);
	font-size: 0.6875rem;
	font-weight: 700;
	line-height: 1;
}
/* Required marker beyond colour: an explicit "(required)" word for screen
   readers plus a visible asterisk, not colour alone. Ready for when a form
   module uses `.form-field--required` on a live field. */
.form-field--required label::after {
	content: " *";
	color: var(--accent-deep);
	font-weight: 700;
}
.form-footer { grid-column: 1 / -1; display: flex; align-items: center; justify-content: space-between; gap: var(--space-5); flex-wrap: wrap; }
.form-footer__note { font-size: 0.875rem; color: var(--muted-light); max-width: 52ch; margin: 0; }
@media (max-width: 767px) {
	.form-grid { grid-template-columns: 1fr; }
	.form-field--full { grid-column: 1; }
}

/* Site artwork in heroes (wp-seed/seed-art.php): the art is already dark and
 * fades out behind the headline, so a light left-weighted veil keeps text
 * contrast without hiding the diagram. Photographs keep the heavy overlay. */
.hero--art .hero-home__media::before,
.hero--art .hero-l1__media::before,
.hero--art .hero-l1__media::after {
	background: linear-gradient(90deg, rgba(14,14,17,0.82) 0%, rgba(14,14,17,0.45) 45%, rgba(14,14,17,0.12) 100%);
}
.hero--art .hero-home__media::after { display: none; }
/* L1 hero text is a centred column, so its art lives in the right quarter. */
.hero--art .hero-l1__media { background-position: right center !important; }
@media (max-width: 767px) {
	.hero--art .hero-home__media::before,
	.hero--art .hero-l1__media::before,
	.hero--art .hero-l1__media::after { background: rgba(14,14,17,0.78); }
}