/* Shared dark intro band used by Services/About/Contact-style inner pages
   (simpler than the Homepage hero — no stat row, one media slot). */
@layer components {
	.page-hero {
		background: var(--void);
		color: var(--on-dark);
	}
	.page-hero__hatch {
		block-size: 10px;
		background: var(--hatch);
	}
	.page-hero__grid {
		display: grid;
		grid-template-columns: minmax(480px, 1.2fr) minmax(360px, 0.8fr);
		gap: 40px;
		align-items: center;

		@media (width <= 767px) {
			grid-template-columns: 1fr;
		}
	}
	.page-hero__content {
		padding-block: 64px 60px;
		display: grid;
		gap: 24px;

		@media (width <= 767px) {
			padding-block: 40px;
		}
	}
	.page-hero__crumb {
		display: flex;
		gap: 12px;
		align-items: center;
		font-weight: 500;
		font-size: 12.5px;
		color: oklch(100% 0 0 / 50%);

		a {
			color: oklch(100% 0 0 / 50%);

			&:hover {
				color: var(--on-dark);
			}
		}
		span:last-child {
			color: var(--on-dark);
		}
	}
	.page-hero__title {
		color: var(--on-dark);
		max-inline-size: 20ch;
	}
	.page-hero__kicker {
		font-weight: 600;
		font-size: 11.5px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: oklch(100% 0 0 / 55%);
	}
	.page-hero__lead {
		color: oklch(100% 0 0 / 72%);
		max-inline-size: 56ch;
	}
	.page-hero__ctas {
		display: flex;
		gap: 12px;
		flex-wrap: wrap;
	}
	.page-hero__media {
		background: var(--plate-d);
		display: grid;
		place-items: center;
		position: relative;
		border-inline-start: 1px solid oklch(100% 0 0 / 10%);
		min-block-size: 420px;

		@media (width <= 767px) {
			min-block-size: 260px;
		}
	}

	/* Quote-request band (Services + Contact) */
	.quote-band {
		background: var(--signal);
		color: var(--on-dark);
	}
	.quote-band__grid {
		display: grid;
		grid-template-columns: minmax(320px, 1fr) minmax(420px, 1fr);
		gap: 0;

		@media (width <= 1023px) {
			grid-template-columns: 1fr;
		}
	}
	.quote-band__pitch {
		padding: 72px 56px 72px 40px;
		display: grid;
		gap: 20px;
		align-content: center;

		@media (width <= 767px) {
			padding: 48px 20px;
		}
	}
	.quote-band__kicker {
		font-weight: 700;
		font-size: 11.5px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: oklch(100% 0 0 / 78%);
	}
	.quote-band__desc {
		margin: 0;
		font-size: 17.5px;
		line-height: 1.6;
		color: oklch(100% 0 0 / 92%);
		max-inline-size: 44ch;
	}
	.quote-band__points {
		display: grid;
		gap: 10px;
		border-block-start: 1px solid oklch(100% 0 0 / 30%);
		padding-block-start: 20px;
		margin-block-start: 6px;
		font-size: 15px;
		color: oklch(100% 0 0 / 92%);
	}
	.quote-band__form {
		padding: 56px 40px;
		background: var(--void);
		display: grid;
		gap: 16px;
		align-content: center;

		@media (width <= 767px) {
			padding: 40px 20px;
		}
	}
	.quote-band__row {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px;

		@media (width <= 480px) {
			grid-template-columns: 1fr;
		}
	}
	.quote-band__chips {
		display: flex;
		gap: 8px;
		flex-wrap: wrap;
	}
	.quote-chip {
		border: 1px solid oklch(100% 0 0 / 30%);
		color: var(--on-dark);
		font-weight: 600;
		font-size: 13.5px;
		padding: 10px 14px;
		cursor: pointer;
		position: relative;

		&:has(input:checked) {
			border-color: var(--signal);
			background: var(--signal);
		}
		&:hover {
			border-color: var(--on-dark);
		}
		input {
			position: absolute;
			opacity: 0;
			inline-size: 1px;
			block-size: 1px;
		}
	}
	.quote-band__submit:hover {
		background: var(--signal-l);
	}
	.quote-band__fine-print {
		font-size: 13px;
		line-height: 1.5;
		color: oklch(100% 0 0 / 55%);
	}

	/* Closing CTA hatch band — About, Advice (+ later Services/FAQ) */
	.closing-cta {
		background: var(--void);
		color: var(--on-dark);
		display: grid;
		grid-template-columns: 10px 1fr;
	}
	.closing-cta__hatch {
		background: var(--hatch);
	}
	.closing-cta__row {
		padding-block: 58px;
		display: flex;
		justify-content: space-between;
		gap: 40px;
		align-items: center;
		flex-wrap: wrap;
	}
	.closing-cta__text {
		display: grid;
		gap: 12px;
		max-inline-size: 56ch;

		p {
			margin: 0;
			font-size: 16.5px;
			line-height: 1.6;
			color: oklch(100% 0 0 / 70%);
		}
	}

	/* FAQ intro column — Contact + Advice quick-answers (+ later FAQ page) */
	.faq-intro {
		display: grid;
		gap: 16px;
		align-content: start;
	}

	/* FAQ list item — Services + Contact (+ later FAQ page) teasers */
	.faq-item {
		border-block-start: 1px solid var(--line);
		padding-block: 24px;
		display: grid;
		gap: 8px;

		&:last-child {
			border-block-end: 1px solid var(--line);
		}
	}
	.faq-item__q {
		font-family: var(--disp);
		font-weight: 700;
		font-size: 19px;
		letter-spacing: -0.02em;
		color: var(--ink);
	}
	.faq-item__a {
		font-size: 15.5px;
		line-height: 1.6;
		color: var(--ink-2);
	}
}