@layer components {
	.about-hero__content {
		padding-block: 56px 58px;
		display: grid;
		gap: 20px;
	}
	.about-hero__title {
		font-size: clamp(2.25rem, 1.807rem + 2.21cqi, 3.875rem);
		max-inline-size: none;
	}
	.about-hero__stats {
		display: grid;
		grid-template-columns: repeat(4, auto);
		gap: 34px;
		justify-content: start;
		margin-block-start: 14px;
		border-block-start: 1px solid oklch(100% 0 0 / 14%);
		padding-block-start: 22px;

		@media (width <= 767px) {
			grid-template-columns: repeat(2, 1fr);
			gap: 14px;
		}
	}
	.about-hero__stat {
		display: grid;
		gap: 4px;
	}
	.about-hero__stat-figure {
		font-family: var(--disp);
		font-weight: 800;
		font-size: 32px;
		letter-spacing: -0.03em;
	}
	.about-hero__stat-label {
		font-size: 12.5px;
		color: oklch(100% 0 0 / 55%);
	}
	.about-hero__media {
		border-inline-start: 1px solid oklch(100% 0 0 / 14%);
	}
	.about-hero__media-caption {
		position: absolute;
		inset-block-end: 0;
		inset-inline: 0;
		background: oklch(15.82% 0.0072 258.37 / 82%);
		padding: 14px 20px;
		font-size: 13px;
		color: oklch(100% 0 0 / 70%);
		border-block-start: 1px solid oklch(100% 0 0 / 14%);
	}

	.about-story {
		background: var(--card);
		border-block-end: 1px solid var(--line);
		padding-block: 66px;
	}
	.about-story__grid {
		display: grid;
		grid-template-columns: minmax(380px, 1fr) minmax(420px, 1.05fr);
		gap: 54px;
		align-items: start;

		@media (width <= 1023px) {
			grid-template-columns: 1fr;
		}
	}
	.about-story__text {
		display: grid;
		gap: 16px;
	}
	.about-story__p {
		margin: 0;
		font-size: 16.5px;
		line-height: 1.7;
		color: var(--ink-2);
		max-inline-size: 54ch;
	}
	.about-story__ctas {
		display: flex;
		gap: 12px;
		flex-wrap: wrap;
		margin-block-start: 6px;
	}
	.about-story__aside {
		display: grid;
		gap: 20px;
	}
	.about-story__photo {
		aspect-ratio: 4 / 3;
	}
	.pull-quote {
		border-inline-start: 3px solid var(--signal);
		padding: 6px 0 6px 22px;
		margin: 0;
		display: grid;
		gap: 10px;

		p {
			margin: 0;
			font-family: var(--mark);
			font-weight: 700;
			font-size: 22px;
			line-height: 1.4;
			color: var(--ink);
			text-wrap: pretty;
		}
		cite {
			font-style: normal;
			font-weight: 600;
			font-size: 12.5px;
			letter-spacing: 0.06em;
			text-transform: uppercase;
			color: var(--ink-3);
		}
	}

	.about-timeline {
		background: var(--paper);
		padding-block: 70px;
	}
	.about-timeline__note {
		font-weight: 600;
		font-size: 13.5px;
		color: var(--ink-2);
		max-inline-size: 40ch;
	}
	.timeline-grid {
		display: grid;
		grid-template-columns: repeat(5, 1fr);
		gap: 1px;
		background: var(--line);
		border: 1px solid var(--line);

		@media (width <= 1023px) {
			grid-template-columns: repeat(2, 1fr);
		}
		@media (width <= 480px) {
			grid-template-columns: 1fr;
		}
	}
	.timeline-entry {
		background: var(--card);
		padding: 26px 22px 28px;
		display: grid;
		gap: 11px;
		align-content: start;
	}
	.timeline-entry__year {
		font-family: var(--disp);
		font-weight: 800;
		font-size: 26px;
		letter-spacing: -0.03em;
		color: var(--signal);
	}
	.timeline-entry__rule {
		block-size: 3px;
		background: var(--void);
		inline-size: 30px;
	}
	.timeline-entry__title {
		font-family: var(--disp);
		font-weight: 700;
		font-size: 19px;
		line-height: 1.2;
		letter-spacing: -0.02em;
		margin: 0;
		color: var(--ink);
	}
	.timeline-entry__body {
		margin: 0;
		font-size: 14.5px;
		line-height: 1.6;
		color: var(--ink-2);
	}

	.about-principles {
		background: var(--void);
		color: var(--on-dark);
		padding-block: 70px;
	}
	.about-principles__grid {
		display: grid;
		grid-template-columns: minmax(340px, 0.85fr) minmax(460px, 1.15fr);
		gap: 52px;
		align-items: start;

		@media (width <= 1023px) {
			grid-template-columns: 1fr;
		}
	}
	.about-principles__intro {
		display: grid;
		gap: 16px;
		align-content: start;
	}
	.about-principles__desc {
		margin: 0;
		font-size: 16.5px;
		line-height: 1.65;
		color: oklch(100% 0 0 / 70%);
		max-inline-size: 46ch;
	}
	.principle-grid {
		display: grid;
		grid-template-columns: 1fr 1fr;
		gap: 1px;
		background: oklch(100% 0 0 / 14%);
		border: 1px solid oklch(100% 0 0 / 14%);

		@media (width <= 600px) {
			grid-template-columns: 1fr;
		}
	}
	.principle-card {
		background: var(--void);
		padding: 26px 24px;
		display: grid;
		gap: 9px;
		align-content: start;
	}
	.principle-card__num {
		font-weight: 700;
		font-size: 10.5px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--signal-l);
	}
	.principle-card__title {
		font-family: var(--disp);
		font-weight: 700;
		font-size: 21px;
		line-height: 1.18;
		letter-spacing: -0.02em;
	}
	.principle-card__body {
		font-size: 14.5px;
		line-height: 1.6;
		color: oklch(100% 0 0 / 68%);
	}

	.about-team {
		background: var(--card);
		border-block-end: 1px solid var(--line);
		padding-block: 66px;
	}
	.team-grid {
		display: grid;
		grid-template-columns: repeat(4, 1fr);
		gap: 20px;

		@media (width <= 1023px) {
			grid-template-columns: repeat(2, 1fr);
		}
	}
	.team-card {
		border: 1px solid var(--line);
		display: grid;
	}
	.team-card__photo {
		aspect-ratio: 3 / 4;
		border-block-end: 1px solid var(--line-2);
	}
	.team-card__body {
		padding: 20px;
		display: grid;
		gap: 6px;
	}
	.team-card__name {
		font-family: var(--disp);
		font-weight: 700;
		font-size: 19px;
		letter-spacing: -0.02em;
		color: var(--ink);
	}
	.team-card__role {
		font-weight: 600;
		font-size: 12px;
		letter-spacing: 0.08em;
		text-transform: uppercase;
		color: var(--signal);
	}
	.team-card__note {
		font-size: 14px;
		line-height: 1.55;
		color: var(--ink-2);
	}

	.about-trust {
		background: var(--paper);
		padding-block: 66px;
	}
	.about-trust__grid {
		display: grid;
		grid-template-columns: minmax(420px, 1fr) minmax(400px, 0.9fr);
		gap: 44px;
		align-items: start;

		@media (width <= 1023px) {
			grid-template-columns: 1fr;
		}
	}
	.licence-panel {
		background: var(--card);
		border: 1px solid var(--line);
	}
	.licence-panel__head {
		padding: 16px 22px;
		border-block-end: 1px solid var(--line);
		font-weight: 700;
		font-size: 11.5px;
		letter-spacing: 0.12em;
		text-transform: uppercase;
		color: var(--ink);
	}
	.licence-panel__row {
		padding: 15px 22px;
		border-block-end: 1px solid var(--line-2);
		display: grid;
		grid-template-columns: 1fr auto;
		gap: 20px;
		align-items: baseline;

		span:first-child {
			font-size: 15px;
			color: var(--ink);
		}
		span:last-child {
			font-weight: 600;
			font-size: 13.5px;
			color: var(--ink-3);
			text-align: end;
			white-space: nowrap;
		}
	}
	.licence-panel__note {
		padding: 18px 22px;
		font-size: 13px;
		line-height: 1.6;
		color: var(--ink-3);
	}
	.clients-panel {
		display: grid;
		gap: 18px;
		align-content: start;
	}
	.clients-panel__title {
		font-size: 30px;
		line-height: 1.08;
	}
	.clients-panel__grid {
		display: grid;
		grid-template-columns: repeat(3, 1fr);
		gap: 1px;
		background: var(--line);
		border: 1px solid var(--line);
	}
	.clients-panel__tile {
		background: var(--card);
		aspect-ratio: 5 / 3;
		display: grid;
		place-items: center;
		text-align: center;
		padding-inline: 10px;

		span {
			font-weight: 600;
			font-size: 10px;
			letter-spacing: 0.1em;
			text-transform: uppercase;
			color: var(--ink-3);
			line-height: 1.7;
		}
	}
	.clients-panel__note {
		font-size: 13px;
		line-height: 1.6;
		color: var(--ink-3);
	}

	.closing-cta__actions {
		display: grid;
		gap: 12px;
		justify-items: start;
	}
	.closing-cta__phone {
		font-family: var(--disp);
		font-weight: 800;
		font-size: 26px;
		letter-spacing: -0.02em;
		color: var(--on-dark);

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