@layer components {
	/* Hero */
	.hero {
		background: var(--void);
		color: var(--on-dark);
		position: relative;
	}
	.hero__hatch {
		block-size: 10px;
		background: var(--hatch);
	}
	.hero__grid {
		max-inline-size: var(--container-max);
		margin-inline: auto;
		display: grid;
		grid-template-columns: minmax(460px, 1.15fr) minmax(400px, 0.85fr);

		@media (width <= 767px) {
			grid-template-columns: 1fr;
		}
	}
	.hero__content {
		padding: 80px 56px 72px var(--container-pad);
		display: grid;
		gap: 28px;
		align-content: center;

		@media (width <= 767px) {
			padding: 48px var(--container-pad-mobile);
		}
	}
	.hero__title {
		color: var(--on-dark);
	}
	.hero__lead {
		margin: 0;
		color: oklch(100% 0 0 / 72%);
	}
	.hero__ctas {
		display: flex;
		gap: 12px;
		flex-wrap: wrap;

		@media (width <= 767px) {
			display: grid;
		}
	}
	.hero__stats {
		display: grid;
		grid-template-columns: repeat(3, auto);
		justify-content: start;
		column-gap: 56px;
		border-block-start: 1px solid oklch(100% 0 0 / 15%);
		padding-block-start: 24px;

		@media (width <= 767px) {
			grid-template-columns: repeat(3, 1fr);
			column-gap: 0;
			padding-block-start: 0;
			margin-block-start: 4px;
		}
	}
	.hero__stat {
		display: grid;
		gap: 4px;

		@media (width <= 767px) {
			padding: 18px 12px 0;
			border-inline-end: 1px solid oklch(100% 0 0 / 12%);

			&:last-child {
				border-inline-end: none;
			}
		}
	}
	.hero__stat-figure {
		font-family: var(--disp);
		font-weight: 800;
		font-size: 38px;
		line-height: 1;
		letter-spacing: -0.03em;

		@media (width <= 767px) {
			font-size: 26px;
		}
	}
	.hero__stat-label {
		font-size: 13.5px;
		color: oklch(100% 0 0 / 55%);

		@media (width <= 767px) {
			font-size: 11.5px;
		}
	}
	.hero__media {
		min-block-size: 600px;
		position: relative;
		overflow: hidden;
		border-inline-start: 1px solid oklch(100% 0 0 / 10%);

		@media (width <= 767px) {
			min-block-size: 320px;
		}
	}
	.hero__img {
		inline-size: 100%;
		block-size: 100%;
		object-fit: cover;
	}
	/* On the dark hero/flagship/field-assessment bands, solid buttons hover to the
	   lighter --signal-l accent rather than --signal-d — scoped by ground rather than
	   a `.btn--solid-on-dark` class threaded through every dark-band button. */
	@scope (.hero, .ai-flagship, .field-band) {
		.btn.btn--solid:hover {
			background: var(--signal-l);
			color: var(--on-dark);
		}
	}

	/* Clients strip */
	.clients {
		background: var(--card);
		border-block-end: 1px solid var(--line);
	}
	.clients__row {
		padding-block: 26px;
		display: flex;
		align-items: center;
		gap: 36px;
		flex-wrap: wrap;
	}
	.clients__label {
		font-weight: 700;
		font-size: 11.5px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--ink-3);
		flex: none;
	}
	.clients__list {
		display: flex;
		gap: 16px;
		flex-wrap: wrap;
		align-items: center;
	}
	.clients__logo {
		inline-size: 148px;
		block-size: 48px;
		border: 1px solid var(--line);

		.plate__label {
			font-size: 10px;
			padding-inline: 10px;
		}
	}
	.clients__note {
		font-weight: 600;
		font-size: 10.5px;
		letter-spacing: 0.06em;
		color: var(--amber);
		flex: none;
	}

	.product-card__image {
		aspect-ratio: 4 / 3;
		background: var(--card);
		border-block-end: 1px solid var(--line-2);

		img {
			inline-size: 100%;
			block-size: 100%;
			object-fit: contain;
			padding: 16px;
		}
	}
	.product-card__body {
		padding: 22px;
		display: grid;
		gap: 10px;
	}
	.product-card__num {
		font-weight: 700;
		font-size: 10.5px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--ink-3);
	}
	.product-card__desc {
		font-size: 14.5px;
		line-height: 1.55;
		color: var(--ink-2);
	}
	.product-card__price {
		font-weight: 700;
		font-size: 13px;
		color: var(--signal);
		letter-spacing: 0.02em;
		border-block-start: 1px solid var(--line-2);
		padding-block-start: 12px;

		&.product-card__price--quote {
			font-weight: 600;
			color: var(--ink-3);
		}
	}

	/* AI flagship panel */
	.ai-flagship {
		margin-block-start: 20px;
		background: var(--void);
		color: var(--on-dark);
		display: grid;
		grid-template-columns: minmax(320px, 0.95fr) minmax(360px, 1.05fr);

		@media (width <= 1023px) {
			grid-template-columns: 1fr;
		}
	}
	.ai-flagship__media {
		position: relative;
		min-block-size: 340px;
		overflow: hidden;
		border-inline-end: 1px solid oklch(100% 0 0 / 10%);

		img {
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;
			object-position: 90% 50%;
		}

		.hatch-top {
			position: absolute;
			inset-block-start: 0;
			inset-inline: 0;
			block-size: 6px;
			background: var(--hatch);
		}
	}
	.ai-flagship__body {
		padding: 48px 44px;
		display: grid;
		gap: 20px;
		align-content: center;

		@media (width <= 767px) {
			padding: 32px 20px;
		}
	}
	.ai-flagship__kicker {
		display: flex;
		gap: 12px;
		align-items: center;
	}
	.ai-flagship__kicker-label {
		font-weight: 700;
		font-size: 11.5px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: oklch(100% 0 0 / 60%);
	}
	.ai-flagship__title {
		font-family: var(--disp);
		font-weight: 800;
		font-size: clamp(1.75rem, 1.522rem + 1.14cqi, 2.625rem);
		line-height: 1.02;
		letter-spacing: -0.03em;
		margin: 0;
		text-wrap: pretty;
	}
	.ai-flagship__desc {
		margin: 0;
		font-size: 17px;
		line-height: 1.6;
		color: oklch(100% 0 0 / 72%);
		max-inline-size: 50ch;
	}
	.ai-flagship__steps {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1px;
		background: oklch(100% 0 0 / 15%);
		border: 1px solid oklch(100% 0 0 / 15%);
	}
	.ai-flagship__step {
		background: var(--void);
		padding: 16px 14px;
		display: grid;
		gap: 6px;
		font-size: 14px;
	}
	.ai-flagship__step-num {
		font-weight: 700;
		font-size: 10px;
		letter-spacing: 0.1em;
		color: oklch(100% 0 0 / 45%);

		&.ai-flagship__step-num--signal {
			color: var(--signal-l);
		}
	}
	.ai-flagship__ctas {
		display: flex;
		gap: 16px;
		align-items: center;
		flex-wrap: wrap;
	}

	/* Services index */
	.services-index {
		background: var(--card);
		border-block: 1px solid var(--line);
		padding-block: 88px;
	}
	.services-index__grid {
		display: grid;
		grid-template-columns: minmax(300px, 0.8fr) minmax(460px, 1.7fr);
		gap: 64px;

		@media (width <= 1023px) {
			grid-template-columns: 1fr;
			gap: 32px;
		}
	}
	.services-index__intro {
		display: grid;
		gap: 18px;
		align-content: start;
	}
	.services-index__title {
		font-size: 44px;
		line-height: 1.04;
	}
	.services-index__desc {
		margin: 0;
		font-size: 17px;
		line-height: 1.6;
		color: var(--ink-2);
		max-inline-size: 38ch;
	}
	.services-index__list {
		display: grid;

		a.service-row:last-child {
			border-block-end: 1px solid var(--line);
		}
	}
	.service-row {
		display: grid;
		grid-template-columns: 80px 1fr auto;
		gap: 24px;
		align-items: center;
		padding: 26px 8px;
		border-block-start: 1px solid var(--line);
		color: var(--ink);

		&:hover {
			background: var(--paper);
			color: var(--ink);
		}
	}
	.service-row__num {
		font-family: var(--disp);
		font-weight: 800;
		font-size: 34px;
		line-height: 1;
		color: var(--line);
		letter-spacing: -0.03em;
	}
	.service-row__body {
		display: grid;
		gap: 5px;
	}
	.service-row__title {
		font-family: var(--disp);
		font-weight: 700;
		font-size: 22px;
		letter-spacing: -0.02em;
	}
	.service-row__desc {
		font-size: 14.5px;
		line-height: 1.5;
		color: var(--ink-2);
	}
	.service-row__arrow {
		color: var(--signal);
		font-size: 20px;
	}

	/* Field assessment band */
	.field-band {
		background: var(--void);
		color: var(--on-dark);
	}
	.field-band__hatch {
		block-size: 10px;
		background: var(--hatch);
	}
	.field-band__grid {
		display: grid;
		grid-template-columns: minmax(360px, 1fr) minmax(320px, 0.85fr);
		gap: 56px;

		@media (width <= 767px) {
			grid-template-columns: 1fr;
			gap: 0;
		}
	}
	.field-band__content {
		padding-block: 76px;
		display: grid;
		gap: 24px;
		align-content: center;

		@media (width <= 767px) {
			padding-block: 48px;
		}
	}
	.field-band__title {
		max-inline-size: 24ch;
	}
	.field-band__desc {
		margin: 0;
		font-size: 18px;
		line-height: 1.6;
		color: oklch(100% 0 0 / 72%);
		max-inline-size: 52ch;
	}
	.field-band__steps {
		display: flex;
		flex-wrap: wrap;
		gap: 28px;
		border-block-start: 1px solid oklch(100% 0 0 / 15%);
		padding-block-start: 22px;
		margin-block-start: 4px;
	}
	.field-band__step {
		display: grid;
		gap: 4px;
		font-size: 13.5px;
		line-height: 1.4;
		color: oklch(100% 0 0 / 72%);
		max-inline-size: 20ch;
	}
	.field-band__step-num {
		font-weight: 700;
		font-size: 10.5px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--signal-l);
	}
	.field-band__media {
		position: relative;
		overflow: hidden;
		min-block-size: 360px;
		border-inline-start: 1px solid oklch(100% 0 0 / 10%);

		img {
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;
		}

		@media (width <= 767px) {
			min-block-size: 240px;
			border-inline-start: none;
		}
	}

	/* Reminder band */
	.reminder-band {
		background: var(--signal);
		color: var(--on-dark);
	}
	.reminder-band__grid {
		display: grid;
		grid-template-columns: minmax(320px, 1.15fr) minmax(340px, 0.85fr);
		gap: 56px;

		@media (width <= 767px) {
			grid-template-columns: 1fr;
		}
	}
	.reminder-band__content {
		padding-block: 72px;
		display: grid;
		gap: 20px;
		align-content: center;

		@media (width <= 767px) {
			padding-block: 40px;
		}
	}
	.reminder-band__kicker {
		font-weight: 700;
		font-size: 11.5px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: oklch(100% 0 0 / 78%);
	}
	.reminder-band__title {
		font-size: 52px;
		line-height: 1;

		@media (width <= 767px) {
			font-size: 32px;
		}
	}
	.reminder-band__desc {
		margin: 0;
		font-size: 18px;
		line-height: 1.6;
		color: oklch(100% 0 0 / 92%);
		max-inline-size: 44ch;
	}
	.reminder-band__note {
		margin: 0;
		font-weight: 500;
		font-size: 13px;
		line-height: 1.6;
		color: oklch(100% 0 0 / 72%);
	}
	.reminder-band__form {
		padding: 56px 40px;
		background: var(--void);
		display: grid;
		gap: 16px;
		align-content: center;

		@media (width <= 767px) {
			padding: 40px 20px;
		}

		.field input {
			block-size: 54px;
			font-size: 16px;
		}
		.btn {
			block-size: 54px;
			font-size: 16px;
			margin-block-start: 4px;
		}
	}
	.reminder-band__fine-print {
		font-size: 13px;
		line-height: 1.5;
		color: oklch(100% 0 0 / 55%);
	}

	/* Split cards (home-use / about) */
	.split-cards {
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		gap: 20px;

		@media (width <= 1023px) {
			grid-template-columns: 1fr;
		}
	}
	.split-card {
		display: grid;
		grid-template-columns: 220px 1fr;

		@media (width <= 767px) {
			grid-template-columns: 1fr;
		}
	}
	.split-card__media {
		overflow: hidden;
		border-inline-end: 1px solid var(--line-2);

		img {
			inline-size: 100%;
			block-size: 100%;
			object-fit: cover;
		}

		@media (width <= 767px) {
			min-block-size: 160px;
			border-inline-end: none;
			border-block-end: 1px solid var(--line-2);
		}
	}
	.split-card__body {
		padding: 34px;
		display: grid;
		gap: 12px;
		align-content: center;
	}
	.split-card__eyebrow {
		font-weight: 700;
		font-size: 11px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--ink-3);
	}
	.split-card__title {
		font-family: var(--disp);
		font-weight: 700;
		font-size: 30px;
		line-height: 1.06;
		letter-spacing: -0.03em;
		margin: 0;
	}
	.split-card__desc {
		margin: 0;
		font-size: 15px;
		line-height: 1.55;
		color: var(--ink-2);
	}
	.split-card__link {
		font-weight: 700;
		font-size: 15px;
		color: var(--signal);
	}

	/* Reviews */
	.reviews {
		background: var(--card);
		border-block: 1px solid var(--line);
		padding-block: 80px;
	}
	.reviews__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 20px;

		@container (width <= 700px) {
			grid-template-columns: 1fr;
		}
	}
	.review-card {
		border: 1px solid var(--line);
		padding: 28px;
		display: grid;
		gap: 16px;
		align-content: start;

		&.review-card--dark {
			background: var(--void);
			color: var(--on-dark);
			gap: 14px;
			align-content: center;
			border-color: var(--void);
		}
	}
	.review-card__dash {
		inline-size: 28px;
		block-size: 3px;
		background: var(--signal);
	}
	.review-card__quote {
		margin: 0;
		font-size: 15.5px;
		line-height: 1.6;
		color: var(--ink-2);
	}
	.review-card__author {
		font-weight: 700;
		font-size: 14px;
		color: var(--ink);
		border-block-start: 1px solid var(--line-2);
		padding-block-start: 14px;
	}
	.review-card__kicker {
		font-weight: 700;
		font-size: 11px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: oklch(100% 0 0 / 55%);
	}
	.review-card__highlight {
		font-family: var(--disp);
		font-weight: 700;
		font-size: 20px;
		line-height: 1.4;
		letter-spacing: -0.02em;
	}
}