@layer components {
	.contact-hero__title {
		max-inline-size: 18ch;
	}
	.contact-hero__stats {
		display: flex;
		gap: 26px;
		flex-wrap: wrap;
		border-block-start: 1px solid oklch(100% 0 0 / 16%);
		padding-block-start: 20px;
		margin-block-start: 4px;

		span {
			display: grid;
			gap: 4px;
		}
	}
	.contact-hero__stat-figure {
		font-family: var(--disp);
		font-weight: 800;
		font-size: 26px;
		letter-spacing: -0.02em;
	}
	.contact-hero__stat-label {
		font-size: 13px;
		color: oklch(100% 0 0 / 55%);
	}

	.contact-doors {
		background: var(--card);
		border-block-end: 1px solid var(--line);
	}
	.contact-doors__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);

		@media (width <= 767px) {
			grid-template-columns: 1fr;
		}
	}
	.contact-door {
		padding: 30px 32px;
		border-inline-end: 1px solid var(--line-2);
		display: grid;
		gap: 8px;
		color: var(--ink);

		&:last-child {
			border-inline-end: none;
		}
		&:hover {
			background: var(--paper);
			color: var(--ink);
		}
		@media (width <= 767px) {
			border-inline-end: none;
			border-block-end: 1px solid var(--line-2);
		}
	}
	.contact-door__label {
		font-weight: 700;
		font-size: 11px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--ink-3);

		&.contact-door__label--signal {
			color: var(--signal);
		}
	}
	.contact-door__value {
		font-family: var(--disp);
		font-weight: 800;
		font-size: 30px;
		letter-spacing: -0.025em;
	}
	.contact-door__note {
		font-size: 14.5px;
		color: var(--ink-2);
	}

	/* Quote-request form band */
	.contact-form-band {
		display: grid;
		grid-template-columns: minmax(420px, 0.82fr) minmax(520px, 1.18fr);

		@media (width <= 1023px) {
			grid-template-columns: 1fr;
		}
	}
	.contact-form-band__grid {
		display: contents;
	}
	.contact-form-band__aside {
		background: var(--paper);
		padding: 60px 48px 60px 40px;
		display: grid;
		gap: 26px;
		align-content: start;
		border-inline-end: 1px solid var(--line);

		@media (width <= 767px) {
			padding: 40px 20px;
		}
	}
	.contact-form-band__title {
		font-size: 40px;
		line-height: 1.03;
	}
	.next-steps {
		display: grid;
	}
	.next-steps__row {
		border-block-start: 1px solid var(--line);
		padding: 20px 0;
		display: grid;
		grid-template-columns: 44px 1fr;
		gap: 16px;
		align-items: start;

		&.next-steps__row--last {
			border-block-end: 1px solid var(--line);
		}
	}
	.next-steps__num {
		font-family: var(--disp);
		font-weight: 800;
		font-size: 18px;
		color: var(--signal);
	}
	.next-steps__body {
		display: grid;
		gap: 5px;
	}
	.next-steps__title {
		font-weight: 700;
		font-size: 16.5px;
		color: var(--ink);
	}
	.next-steps__desc {
		font-size: 14.5px;
		line-height: 1.6;
		color: var(--ink-2);
	}
	.call-instead {
		background: var(--void);
		color: var(--on-dark);
		padding: 24px;
		display: grid;
		gap: 10px;
	}
	.call-instead__kicker {
		font-weight: 700;
		font-size: 11px;
		letter-spacing: 0.14em;
		text-transform: uppercase;
		color: var(--signal-l);
	}
	.call-instead__desc {
		font-size: 15.5px;
		line-height: 1.6;
		color: oklch(100% 0 0 / 78%);
	}
	.call-instead__phone {
		font-family: var(--disp);
		font-weight: 800;
		font-size: 26px;
		letter-spacing: -0.02em;
		color: var(--on-dark);
		margin-block-start: 4px;

		&:hover {
			color: var(--signal-l);
		}
	}

	.contact-form-band__form-wrap {
		background: var(--void);
		padding: 52px 40px;
		display: grid;
		align-content: start;

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

		@media (width <= 480px) {
			grid-template-columns: 1fr;
		}
	}
	.quote-form__footer {
		display: flex;
		gap: 16px;
		align-items: center;
		flex-wrap: wrap;
		border-block-start: 1px solid oklch(100% 0 0 / 16%);
		padding-block-start: 20px;
	}
	.quote-form__footer .quote-band__fine-print {
		max-inline-size: 34ch;
	}

	.form-sent {
		display: grid;
		gap: 20px;
		align-content: center;
		min-block-size: 400px;
		color: var(--on-dark);
	}
	.form-sent__check {
		inline-size: 56px;
		block-size: 56px;
		background: var(--signal);
		display: grid;
		place-items: center;
		font-family: var(--disp);
		font-weight: 800;
		font-size: 26px;
		color: var(--on-dark);
	}
	.form-sent__title {
		font-family: var(--disp);
		font-weight: 800;
		font-size: 40px;
		line-height: 1.03;
		letter-spacing: -0.03em;
		margin: 0;
	}
	.form-sent__desc {
		margin: 0;
		font-size: 17.5px;
		line-height: 1.6;
		color: oklch(100% 0 0 / 75%);
		max-inline-size: 44ch;
	}
	.form-sent .btn--outline-on-dark {
		justify-self: start;
	}

	/* Coverage band */
	.coverage-band {
		background: var(--card);
		border-block-start: 1px solid var(--line);
	}
	.coverage-band__grid {
		display: grid;
		grid-template-columns: minmax(400px, 0.9fr) minmax(440px, 1.1fr);

		@media (width <= 1023px) {
			grid-template-columns: 1fr;
		}
	}
	.coverage-band__media {
		background: var(--plate);
		min-block-size: 380px;
		border-inline-end: 1px solid var(--line);
	}
	.coverage-band__body {
		padding: 60px 0 60px 40px;
		display: grid;
		gap: 26px;
		align-content: start;

		@media (width <= 1023px) {
			padding: 40px 0;
		}
	}
	.coverage-band__title {
		font-size: 36px;
		line-height: 1.04;
	}
	.coverage-band__desc {
		margin: 0;
		font-size: 16.5px;
		line-height: 1.6;
		color: var(--ink-2);
		max-inline-size: 46ch;
	}
	.coverage-table {
		display: grid;
		gap: 1px;
		background: var(--line);
		border: 1px solid var(--line);
	}
	.coverage-table__row {
		background: var(--card);
		padding: 18px 20px;
		display: grid;
		grid-template-columns: 160px 1fr;
		gap: 16px;
		align-items: baseline;

		@media (width <= 600px) {
			grid-template-columns: 1fr;
			gap: 4px;
		}
		span:first-child {
			font-weight: 700;
			font-size: 11px;
			letter-spacing: 0.1em;
			text-transform: uppercase;
			color: var(--ink-3);
		}
		span:last-child {
			font-size: 15.5px;
			color: var(--ink);
		}
	}
	.coverage-band__ctas {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 14px;
	}
	.coverage-band__cta {
		block-size: 56px;

		@media (width <= 480px) {
			grid-column: span 2;
		}
	}

	/* FAQ */
	.contact-faq {
		background: var(--paper);
		border-block-start: 1px solid var(--line);
		padding-block: 76px;
	}
	.contact-faq__grid {
		display: grid;
		grid-template-columns: minmax(280px, 0.7fr) minmax(460px, 1.6fr);
		gap: 64px;

		@media (width <= 1023px) {
			grid-template-columns: 1fr;
			gap: 32px;
		}
	}
	.contact-faq__item--first {
		border-block-start: 1px solid var(--line);
	}
}