/**
 * C-Persian — Homepage
 *
 * Homepage-specific sections.
 * Mobile-first.
 */


/* ==========================================================================
   Hero
   ========================================================================== */

.cp-hero {
	padding-block: 28px 64px;
}


.cp-hero__container {
	position: relative;
}


/* ==========================================================================
   Hero visual
   ========================================================================== */

.cp-hero__visual {
	position: relative;
	z-index: 1;
}


.cp-hero__figure {
	overflow: hidden;

	margin: 0;

	border-radius: 24px;

	background: var(--cp-navy);

	aspect-ratio: 4 / 3;
}


.cp-hero__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;
	object-position: center;

	border: 0;
}


/* ==========================================================================
   Hero editorial panel
   ========================================================================== */

.cp-hero__panel {
	position: relative;
	z-index: 2;

	display: grid;
	grid-template-columns: 1fr;

	gap: 16px;

	margin-block-start: 22px;

	padding: 0;

	border: 0;
	border-radius: 0;

	background: transparent;
}


.cp-hero__panel-main {
	max-width: 720px;
}


.cp-hero__eyebrow {
	margin: 0 0 10px;

	color: var(--cp-red);

	font-size: 12px;
	font-weight: 600;
	line-height: 1.8;
}


.cp-hero__title {
	margin: 0;

	max-width: 680px;

	color: var(--cp-text);

	font-size: clamp(29px, 7.2vw, 38px);
	font-weight: 750;
	line-height: 1.5;

	letter-spacing: -0.012em;
}


.cp-hero__description {
	margin: 14px 0 0;

	max-width: 600px;

	color: var(--cp-text-muted);

	font-size: 13.5px;
	font-weight: 400;
	line-height: 1.95;
}


/* ==========================================================================
   Hero actions
   ========================================================================== */

.cp-hero__panel-actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	gap: 12px 18px;
}


.cp-hero__primary-action {
	min-height: 48px;

	padding-inline: 22px;
}


.cp-hero__secondary-action {
	display: inline-flex;
	align-items: center;

	gap: 8px;

	min-height: 48px;

	color: var(--cp-text);

	font-size: 14px;
	font-weight: 700;

	text-decoration: none;

	transition:
		color var(--cp-transition),
		gap var(--cp-transition);
}


.cp-hero__secondary-action:hover {
	gap: 12px;

	color: var(--cp-red);
}


/* ==========================================================================
   Hero areas
   ========================================================================== */

.cp-hero__areas {
	display: grid;
	grid-template-columns: 1fr;

	gap: 10px;

	padding-block-start: 18px;

	border-block-start: 1px solid var(--cp-border);
}


.cp-hero__areas-label {
	color: var(--cp-text-muted);

	font-size: 11px;
	font-weight: 600;
	line-height: 1.8;
}


.cp-hero__areas-list {
	display: flex;
	flex-wrap: wrap;

	gap: 8px 18px;

	margin: 0;
	padding: 0;

	list-style: none;
}


.cp-hero__areas-list li {
	position: relative;

	color: var(--cp-text);

	font-size: 13px;
	font-weight: 600;
	line-height: 1.8;
}


.cp-hero__areas-list li:not(:last-child)::after {
	content: "·";

	margin-inline-start: 18px;

	color: var(--cp-border);
}

/* ==========================================================================
   Hero — mobile refinement
   ========================================================================== */

@media (max-width: 767px) {

	.cp-hero {
		padding-block: 22px 52px;
	}


	.cp-hero__figure {
		aspect-ratio: 4 / 3.15;

		border-radius: 22px;
	}


	.cp-hero__panel-main {
		max-width: none;
	}


	.cp-hero__eyebrow {
		margin-block-end: 8px;

		font-size: 11px;
	}


	.cp-hero__panel-actions {
		gap: 10px 16px;
	}


	.cp-hero__primary-action {
		min-height: 46px;

		padding-inline: 20px;
	}


	.cp-hero__secondary-action {
		min-height: 46px;

		font-size: 13px;
	}


	.cp-hero__areas {
		gap: 8px;

		padding-block-start: 15px;
	}


	.cp-hero__areas-label {
		font-size: 10.5px;
	}


	.cp-hero__areas-list {
		gap: 6px 12px;
	}


	.cp-hero__areas-list li {
		font-size: 12px;
	}


	.cp-hero__areas-list li:not(:last-child)::after {
		margin-inline-start: 12px;
	}

}

/* ==========================================================================
   Hero — tablet
   ========================================================================== */

@media (min-width: 768px) {

	.cp-hero {
		padding-block: 36px 82px;
	}


	.cp-hero__figure {
		aspect-ratio: 16 / 9;

		border-radius: 28px;
	}


.cp-hero__panel {
	gap: 26px;

	margin-block-start: -36px;
	margin-inline: 28px;

	padding: 30px 32px;

	border: 1px solid var(--cp-border);
	border-radius: 22px;

	background: var(--cp-surface);

	box-shadow: 0 14px 40px rgba(18, 27, 36, 0.06);
}


	.cp-hero__title {
		font-size: clamp(42px, 6vw, 58px);
	}


	.cp-hero__description {
		font-size: 15px;
	}


	.cp-hero__areas {
		grid-template-columns: auto minmax(0, 1fr);
		align-items: center;

		gap: 22px;
	}

}


/* ==========================================================================
   Hero — desktop
   ========================================================================== */

@media (min-width: 1024px) {

	.cp-hero {
		padding-block: 42px 104px;
	}


.cp-hero__figure {
	height: 560px;

	aspect-ratio: auto;

	border-radius: 28px;
}


	.cp-hero__image {
		object-position: center;
	}


.cp-hero__panel {
	grid-template-columns:
		minmax(0, 1.45fr)
		minmax(220px, 0.55fr);

	align-items: end;

	gap: 48px;

	width: calc(100% - 96px);
	max-width: 1120px;

	margin-block-start: -64px;
	margin-inline: auto;

	padding: 38px 42px 28px;

	border: 1px solid var(--cp-border);
	border-radius: 24px;

	background: var(--cp-surface);

	box-shadow: 0 18px 48px rgba(18, 27, 36, 0.07);
}


	.cp-hero__panel-main {
		max-width: 680px;
	}


.cp-hero__title {
	max-width: 650px;

	font-size: clamp(38px, 3vw, 50px);
	line-height: 1.42;

	letter-spacing: -0.018em;
}


	.cp-hero__description {
		max-width: 600px;

		margin-block-start: 18px;

		font-size: 15px;
	}


	.cp-hero__panel-actions {
		justify-content: flex-end;
	}


	.cp-hero__areas {
		grid-column: 1 / -1;

		padding-block-start: 20px;
	}

}


/* ==========================================================================
   Hero — large desktop
   ========================================================================== */

@media (min-width: 1280px) {

.cp-hero__figure {
	height: 610px;
}


.cp-hero__panel {
	width: calc(100% - 120px);
	max-width: 1180px;

	margin-inline: auto;

	padding:
		42px
		48px
		30px;
}


.cp-hero__title {
	max-width: 680px;

	font-size: 52px;
}

}


/* ==========================================================================
   Selected work
   ========================================================================== */

.cp-work {
	padding-block: 72px 84px;
}


.cp-work__header {
	display: grid;
	grid-template-columns: 1fr;
	gap: 22px;

	margin-block-end: 34px;
}


.cp-work__heading {
	max-width: 820px;
}


.cp-work__all-link {
	display: inline-flex;
	align-items: center;

	gap: 8px;

	width: fit-content;

	color: var(--cp-text);

	font-size: 14px;
	font-weight: 700;

	text-decoration: none;

	transition:
		color var(--cp-transition),
		gap var(--cp-transition);
}


.cp-work__all-link:hover {
	gap: 12px;

	color: var(--cp-red);
}


/* ==========================================================================
   Featured work
   ========================================================================== */

.cp-work__showcase {
	display: grid;
	grid-template-columns: 1fr;

	gap: 18px;
}


.cp-work-feature {
	display: block;

	overflow: hidden;

	color: inherit;
	text-decoration: none;
}


.cp-work-feature__media {
	overflow: hidden;

	margin: 0;

	background: #eceeef;
}


.cp-work-feature__image {
	display: block;

	width: 100%;
	height: 100%;

	object-fit: cover;

	transition:
		transform 320ms ease;
}


.cp-work-feature:hover .cp-work-feature__image {
	transform: scale(1.015);
}


.cp-work-feature__content {
	padding-block-start: 16px;
}


.cp-work-feature__meta {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 16px;

	margin-block-end: 8px;
}


.cp-work-feature__number {
	color: var(--cp-text-muted);

	font-size: 11px;
	font-weight: 600;
	line-height: 1.7;
}


.cp-work-feature__service {
	color: var(--cp-red);

	font-size: 12px;
	font-weight: 700;
	line-height: 1.7;
}


.cp-work-feature__title {
	margin: 0;

	color: var(--cp-text);

	font-size: 21px;
	font-weight: 750;
	line-height: 1.6;
}


.cp-work-feature__footer {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 18px;

	margin-block-start: 10px;
}


.cp-work-feature__client {
	color: var(--cp-text-muted);

	font-size: 13px;
	font-weight: 400;
	line-height: 1.7;
}


.cp-work-feature__arrow {
	color: var(--cp-text);

	font-size: 18px;
	line-height: 1;

	transition:
		transform var(--cp-transition),
		color var(--cp-transition);
}


.cp-work-feature:hover .cp-work-feature__arrow {
	color: var(--cp-red);

	transform: translateX(-4px);
}


/* ==========================================================================
   Primary project
   ========================================================================== */

.cp-work-feature--primary .cp-work-feature__media {
	aspect-ratio: 16 / 10;

	border-radius: 24px;
}


.cp-work-feature--primary .cp-work-feature__title {
	font-size: clamp(26px, 7vw, 38px);
	line-height: 1.45;
}


/* ==========================================================================
   Secondary projects
   ========================================================================== */

.cp-work__secondary {
	display: grid;
	grid-template-columns: 1fr;

	gap: 18px;
}


.cp-work-feature--secondary .cp-work-feature__media {
	aspect-ratio: 16 / 10;

	border-radius: 20px;
}


.cp-work-feature--secondary .cp-work-feature__title {
	font-size: 19px;
}


/* ==========================================================================
   Work index
   ========================================================================== */

.cp-work__index {
	margin-block-start: 38px;

	border-block-start: 1px solid var(--cp-border);
}


.cp-work-row {
	display: grid;
	grid-template-columns:
		34px
		minmax(0, 1fr)
		auto;

	align-items: center;

	gap: 14px;

	padding-block: 18px;

	border-block-end: 1px solid var(--cp-border);

	color: inherit;
	text-decoration: none;

	transition:
		color var(--cp-transition),
		padding-inline var(--cp-transition);
}


.cp-work-row__number {
	color: var(--cp-text-muted);

	font-size: 11px;
	font-weight: 600;
	line-height: 1.7;
}


.cp-work-row__title {
	min-width: 0;

	color: var(--cp-text);

	font-size: 16px;
	font-weight: 700;
	line-height: 1.7;
}


.cp-work-row__service {
	display: none;

	color: var(--cp-text-muted);

	font-size: 12px;
	font-weight: 400;
	line-height: 1.7;
}


.cp-work-row__arrow {
	color: var(--cp-text-muted);

	font-size: 17px;
	line-height: 1;

	transition:
		transform var(--cp-transition),
		color var(--cp-transition);
}


.cp-work-row:hover {
	padding-inline: 4px;
}


.cp-work-row:hover .cp-work-row__arrow {
	color: var(--cp-red);

	transform: translateX(-4px);
}


/* ==========================================================================
   Selected work — tablet
   ========================================================================== */

@media (min-width: 768px) {

	.cp-work {
		padding-block: 88px 104px;
	}


	.cp-work__header {
		grid-template-columns:
			minmax(0, 1fr)
			auto;

		align-items: end;

		gap: 32px;

		margin-block-end: 42px;
	}


	.cp-work__all-link {
		margin-block-end: 6px;
	}


	.cp-work__showcase {
		gap: 24px;
	}


	.cp-work__secondary {
		grid-template-columns: repeat(2, minmax(0, 1fr));

		gap: 20px;
	}


	.cp-work-feature__content {
		padding-block-start: 18px;
	}


	.cp-work-feature--primary .cp-work-feature__media {
		aspect-ratio: 16 / 8.7;

		border-radius: 28px;
	}


	.cp-work-feature--secondary .cp-work-feature__media {
		border-radius: 22px;
	}


	.cp-work-feature--secondary .cp-work-feature__title {
		font-size: 21px;
	}


	.cp-work__index {
		margin-block-start: 46px;
	}


	.cp-work-row {
		grid-template-columns:
			44px
			minmax(0, 1.3fr)
			minmax(180px, 0.7fr)
			30px;

		gap: 18px;

		padding-block: 20px;
	}


	.cp-work-row__title {
		font-size: 17px;
	}


	.cp-work-row__service {
		display: block;
	}

}


/* ==========================================================================
   Selected work — desktop
   ========================================================================== */

@media (min-width: 1024px) {

	.cp-work {
		padding-block: 104px 124px;
	}


	.cp-work__header {
		margin-block-end: 50px;
	}


	.cp-work__showcase {
		grid-template-columns:
			minmax(0, 1.34fr)
			minmax(0, 0.66fr);

		align-items: start;

		gap: 28px;
	}


	.cp-work-feature--primary .cp-work-feature__media {
		height: 560px;

		aspect-ratio: auto;

		border-radius: 30px;
	}


	.cp-work-feature--primary .cp-work-feature__title {
		max-width: 760px;

		font-size: 38px;
	}


	.cp-work__secondary {
		grid-template-columns: 1fr;

		gap: 30px;
	}


	.cp-work-feature--secondary .cp-work-feature__media {
		height: 245px;

		aspect-ratio: auto;

		border-radius: 24px;
	}


	.cp-work-feature--secondary .cp-work-feature__title {
		font-size: 20px;
	}


	.cp-work-feature__content {
		padding-block-start: 18px;
	}


	.cp-work__index {
		margin-block-start: 56px;
	}


	.cp-work-row {
		grid-template-columns:
			52px
			minmax(0, 1.4fr)
			minmax(200px, 0.6fr)
			34px;

		gap: 22px;

		padding-block: 22px;
	}


	.cp-work-row__title {
		font-size: 18px;
	}


	.cp-work-row__service {
		font-size: 13px;
	}

}


/* ==========================================================================
   Selected work — large desktop
   ========================================================================== */

@media (min-width: 1280px) {

	.cp-work-feature--primary .cp-work-feature__media {
		height: 610px;
	}


	.cp-work-feature--secondary .cp-work-feature__media {
		height: 270px;
	}

}

/* ==========================================================================
   Agency statement
   ========================================================================== */

.cp-statement {
	position: relative;

	padding-block: 88px 96px;

	background: var(--cp-navy);
	color: #fff;

	overflow: hidden;
}


.cp-statement__layout {
	display: grid;
	grid-template-columns: 1fr;

	gap: 34px;
}


.cp-statement__intro {
	max-width: 760px;
}


.cp-statement__eyebrow {
	margin: 0 0 14px;

	color: var(--cp-coral);

	font-size: 12px;
	font-weight: 600;
	line-height: 1.8;
}


.cp-statement__title {
	margin: 0;

	max-width: 820px;

	color: #fff;

	font-size: clamp(32px, 8vw, 48px);
	font-weight: 750;
	line-height: 1.48;

	letter-spacing: -0.018em;
}


.cp-statement__body {
	max-width: 720px;
}


.cp-statement__lead {
	margin: 0;

	color: #fff;

	font-size: 18px;
	font-weight: 600;
	line-height: 2;
}


.cp-statement__text {
	margin: 18px 0 0;

	color: rgba(255, 255, 255, 0.68);

	font-size: 14px;
	font-weight: 400;
	line-height: 2.1;
}


.cp-statement__link {
	display: inline-flex;
	align-items: center;

	gap: 8px;

	margin-block-start: 24px;

	color: #fff;

	font-size: 14px;
	font-weight: 700;

	text-decoration: none;

	transition:
		color var(--cp-transition),
		gap var(--cp-transition);
}


.cp-statement__link:hover {
	gap: 12px;

	color: var(--cp-coral);
}


/* ==========================================================================
   Statement principles
   ========================================================================== */

.cp-statement__principles {
	display: grid;
	grid-template-columns: 1fr;

	gap: 0;

	margin-block-start: 54px;

	border-block-start: 1px solid rgba(255, 255, 255, 0.14);
}


.cp-statement-principle {
	padding-block: 24px;

	border-block-end: 1px solid rgba(255, 255, 255, 0.14);
}


.cp-statement-principle__title {
	margin: 0;

	color: #fff;

	font-size: 18px;
	font-weight: 700;
	line-height: 1.7;
}


.cp-statement-principle__text {
	margin: 9px 0 0;

	max-width: 520px;

	color: rgba(255, 255, 255, 0.6);

	font-size: 13px;
	font-weight: 400;
	line-height: 2;
}


/* ==========================================================================
   Agency statement — tablet
   ========================================================================== */

@media (min-width: 768px) {

	.cp-statement {
		padding-block: 104px 112px;
	}


	.cp-statement__layout {
		grid-template-columns:
			minmax(0, 0.9fr)
			minmax(0, 1.1fr);

		align-items: start;

		gap: 64px;
	}


	.cp-statement__title {
		font-size: clamp(38px, 5vw, 54px);
	}


	.cp-statement__lead {
		font-size: 19px;
	}


	.cp-statement__text {
		font-size: 15px;
	}


	.cp-statement__principles {
		grid-template-columns: repeat(3, minmax(0, 1fr));

		margin-block-start: 68px;

		border-block-end: 1px solid rgba(255, 255, 255, 0.14);
	}


	.cp-statement-principle {
		padding:
			24px
			24px
			26px;

		border-block-end: 0;
	}


	.cp-statement-principle:first-child {
		padding-inline-start: 0;
	}


	.cp-statement-principle:last-child {
		padding-inline-end: 0;
	}


	.cp-statement-principle + .cp-statement-principle {
		border-inline-start: 1px solid rgba(255, 255, 255, 0.14);
	}


	.cp-statement-principle__title {
		font-size: 19px;
	}

}


/* ==========================================================================
   Agency statement — desktop
   ========================================================================== */

@media (min-width: 1024px) {

	.cp-statement {
		padding-block: 128px 132px;
	}


	.cp-statement__layout {
		grid-template-columns:
			minmax(0, 0.92fr)
			minmax(0, 1.08fr);

		gap: 96px;
	}


	.cp-statement__intro {
		max-width: 660px;
	}


	.cp-statement__title {
		max-width: 660px;

		font-size: clamp(44px, 3.7vw, 58px);
		line-height: 1.5;
	}


	.cp-statement__body {
		max-width: 660px;

		padding-block-start: 28px;
	}


	.cp-statement__lead {
		font-size: 20px;
		line-height: 2.05;
	}


	.cp-statement__text {
		margin-block-start: 20px;

		font-size: 15px;
		line-height: 2.15;
	}


	.cp-statement__principles {
		margin-block-start: 84px;
	}


	.cp-statement-principle {
		padding:
			30px
			30px
			32px;
	}


	.cp-statement-principle:first-child {
		padding-inline-start: 0;
	}


	.cp-statement-principle:last-child {
		padding-inline-end: 0;
	}


	.cp-statement-principle__title {
		font-size: 20px;
	}


	.cp-statement-principle__text {
		margin-block-start: 10px;

		font-size: 14px;
	}

}

/* ==========================================================================
   Featured services
   ========================================================================== */

.cp-services {
	padding-block: 88px 96px;

	background: var(--cp-bg);
}


.cp-services__header {
	display: grid;
	grid-template-columns: 1fr;

	gap: 20px;

	margin-block-end: 36px;
}


.cp-services__heading {
	max-width: 820px;
}


.cp-services__heading .cp-section-title {
	max-width: 800px;
}


.cp-services__heading .cp-section-description {
	max-width: 680px;
}


.cp-services__all-link {
	display: inline-flex;
	align-items: center;

	gap: 8px;

	width: fit-content;

	color: var(--cp-text);

	font-size: 14px;
	font-weight: 700;
	line-height: 1.7;

	text-decoration: none;

	transition:
		color var(--cp-transition),
		gap var(--cp-transition);
}


.cp-services__all-link:hover {
	gap: 12px;

	color: var(--cp-red);
}


/* ==========================================================================
   Service showcase
   ========================================================================== */

.cp-services__showcase {
	display: grid;
	grid-template-columns: 1fr;

	gap: 18px;
}


/* ==========================================================================
   Service feature — shared
   ========================================================================== */

.cp-service-feature {
	position: relative;

	display: flex;
	flex-direction: column;
	justify-content: space-between;

	min-width: 0;

	overflow: hidden;

	color: inherit;
	text-decoration: none;

	transition:
		transform var(--cp-transition),
		border-color var(--cp-transition),
		background-color var(--cp-transition);
}


.cp-service-feature__top {
	display: flex;
	align-items: center;
	justify-content: space-between;

	gap: 18px;
}


.cp-service-feature__eyebrow {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.8;
}


.cp-service-feature__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	flex: 0 0 auto;

	width: 38px;
	height: 38px;

	border-radius: 50%;

	font-size: 18px;
	line-height: 1;

	transition:
		transform var(--cp-transition),
		background-color var(--cp-transition),
		color var(--cp-transition);
}


.cp-service-feature__content {
	margin-block-start: auto;
}


.cp-service-feature__title {
	margin: 0;

	font-weight: 750;

	letter-spacing: -0.015em;
}


.cp-service-feature__description {
	margin: 14px 0 0;

	font-weight: 400;
}


/* ==========================================================================
   Primary service
   ========================================================================== */

.cp-service-feature--primary {
	min-height: 410px;

	padding: 28px;

	border-radius: 26px;

	background: var(--cp-burgundy);
	color: #fff;
}


.cp-service-feature--primary .cp-service-feature__eyebrow {
	color: var(--cp-coral);
}


.cp-service-feature--primary .cp-service-feature__arrow {
	border: 1px solid rgba(255, 255, 255, 0.22);

	color: #fff;
}


.cp-service-feature--primary .cp-service-feature__content {
	max-width: 720px;

	padding-block-start: 72px;
}


.cp-service-feature--primary .cp-service-feature__title {
	max-width: 720px;

	color: #fff;

	font-size: clamp(30px, 8vw, 46px);
	line-height: 1.46;
}


.cp-service-feature--primary .cp-service-feature__description {
	max-width: 600px;

	color: rgba(255, 255, 255, 0.72);

	font-size: 14px;
	line-height: 2.05;
}


.cp-service-feature--primary:hover .cp-service-feature__arrow {
	background: #fff;
	color: var(--cp-burgundy);

	transform: translateX(-3px);
}


/* ==========================================================================
   Primary service meta
   ========================================================================== */

.cp-service-feature__meta {
	display: flex;
	flex-wrap: wrap;

	gap: 8px 18px;

	margin-block-start: 30px;
	padding-block-start: 18px;

	border-block-start: 1px solid rgba(255, 255, 255, 0.16);
}


.cp-service-feature__meta span {
	color: rgba(255, 255, 255, 0.68);

	font-size: 12px;
	font-weight: 500;
	line-height: 1.8;
}


/* ==========================================================================
   Secondary services
   ========================================================================== */

.cp-services__secondary {
	display: grid;
	grid-template-columns: 1fr;

	gap: 18px;
}


.cp-service-feature--secondary {
	min-height: 260px;

	padding: 24px;

	border: 1px solid var(--cp-border);
	border-radius: 22px;

	background: var(--cp-surface);
}


.cp-service-feature--secondary .cp-service-feature__eyebrow {
	color: var(--cp-red);
}


.cp-service-feature--secondary .cp-service-feature__arrow {
	border: 1px solid var(--cp-border);

	color: var(--cp-text);
}


.cp-service-feature--secondary .cp-service-feature__content {
	padding-block-start: 54px;
}


.cp-service-feature--secondary .cp-service-feature__title {
	max-width: 420px;

	color: var(--cp-text);

	font-size: 22px;
	line-height: 1.55;
}


.cp-service-feature--secondary .cp-service-feature__description {
	max-width: 440px;

	color: var(--cp-text-muted);

	font-size: 14px;
	line-height: 2;
}


.cp-service-feature--secondary:hover {
	border-color: rgba(150, 21, 42, 0.28);
}


.cp-service-feature--secondary:hover .cp-service-feature__arrow {
	border-color: var(--cp-red);

	background: var(--cp-red);
	color: #fff;

	transform: translateX(-3px);
}


/* ==========================================================================
   Additional services index
   ========================================================================== */

.cp-services__index {
	margin-block-start: 38px;

	border-block-start: 1px solid var(--cp-border);
}


.cp-service-row {
	display: grid;
	grid-template-columns:
		minmax(0, 1fr)
		auto;

	align-items: center;

	gap: 16px;

	padding-block: 20px;

	border-block-end: 1px solid var(--cp-border);

	color: inherit;
	text-decoration: none;
}


.cp-service-row__title {
	min-width: 0;

	color: var(--cp-text);

	font-size: 17px;
	font-weight: 700;
	line-height: 1.7;

	transition: color var(--cp-transition);
}


.cp-service-row__description {
	display: none;

	color: var(--cp-text-muted);

	font-size: 13px;
	font-weight: 400;
	line-height: 1.8;
}


.cp-service-row__arrow {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	color: var(--cp-text-muted);

	font-size: 18px;
	line-height: 1;

	transition:
		color var(--cp-transition),
		transform var(--cp-transition);
}


.cp-service-row:hover .cp-service-row__title {
	color: var(--cp-red);
}


.cp-service-row:hover .cp-service-row__arrow {
	color: var(--cp-red);

	transform: translateX(-4px);
}


/* ==========================================================================
   Featured services — tablet
   ========================================================================== */

@media (min-width: 768px) {

	.cp-services {
		padding-block: 104px 112px;
	}


	.cp-services__header {
		grid-template-columns:
			minmax(0, 1fr)
			auto;

		align-items: end;

		gap: 32px;

		margin-block-end: 44px;
	}


	.cp-services__all-link {
		margin-block-end: 6px;
	}


	.cp-services__showcase {
		gap: 22px;
	}


	.cp-service-feature--primary {
		min-height: 470px;

		padding: 34px;

		border-radius: 28px;
	}


	.cp-service-feature--primary .cp-service-feature__content {
		padding-block-start: 90px;
	}


	.cp-service-feature--primary .cp-service-feature__title {
		font-size: clamp(38px, 5.5vw, 54px);
	}


	.cp-service-feature--primary .cp-service-feature__description {
		font-size: 15px;
	}


	.cp-services__secondary {
		grid-template-columns: repeat(2, minmax(0, 1fr));

		gap: 20px;
	}


	.cp-service-feature--secondary {
		min-height: 290px;

		padding: 26px;
	}


	.cp-service-feature--secondary .cp-service-feature__title {
		font-size: 23px;
	}


	.cp-services__index {
		margin-block-start: 46px;
	}


	.cp-service-row {
		grid-template-columns:
			minmax(220px, 0.9fr)
			minmax(0, 1.1fr)
			30px;

		gap: 24px;

		padding-block: 22px;
	}


	.cp-service-row__description {
		display: block;
	}

}


/* ==========================================================================
   Featured services — desktop
   ========================================================================== */

@media (min-width: 1024px) {

	.cp-services {
		padding-block: 124px 132px;
	}


	.cp-services__header {
		margin-block-end: 52px;
	}


	.cp-services__showcase {
		grid-template-columns:
			minmax(0, 1.18fr)
			minmax(0, 0.82fr);

		align-items: stretch;

		gap: 24px;
	}


	.cp-service-feature--primary {
		min-height: 610px;

		padding: 42px;

		border-radius: 30px;
	}


	.cp-service-feature--primary .cp-service-feature__content {
		max-width: 700px;

		padding-block-start: 120px;
	}


	.cp-service-feature--primary .cp-service-feature__title {
		max-width: 700px;

		font-size: clamp(46px, 3.8vw, 60px);
		line-height: 1.48;
	}


	.cp-service-feature--primary .cp-service-feature__description {
		max-width: 580px;

		font-size: 15px;
	}


	.cp-service-feature__meta {
		margin-block-start: 36px;
		padding-block-start: 20px;
	}


	.cp-services__secondary {
		grid-template-columns: 1fr;

		grid-template-rows: repeat(2, minmax(0, 1fr));

		gap: 24px;
	}


	.cp-service-feature--secondary {
		min-height: 0;

		padding: 30px;

		border-radius: 24px;
	}


	.cp-service-feature--secondary .cp-service-feature__content {
		padding-block-start: 48px;
	}


	.cp-service-feature--secondary .cp-service-feature__title {
		max-width: 460px;

		font-size: 25px;
	}


	.cp-service-feature--secondary .cp-service-feature__description {
		font-size: 14px;
	}


	.cp-services__index {
		margin-block-start: 56px;
	}


	.cp-service-row {
		grid-template-columns:
			minmax(260px, 0.82fr)
			minmax(0, 1.18fr)
			34px;

		gap: 32px;

		padding-block: 24px;
	}


	.cp-service-row__title {
		font-size: 18px;
	}


	.cp-service-row__description {
		font-size: 13px;
	}

}


/* ==========================================================================
   Featured services — large desktop
   ========================================================================== */

@media (min-width: 1280px) {

	.cp-service-feature--primary {
		min-height: 650px;

		padding: 46px;
	}


	.cp-service-feature--primary .cp-service-feature__title {
		font-size: 62px;
	}


	.cp-service-feature--secondary {
		padding: 32px;
	}

}

/* ==========================================================================
   Process
   ========================================================================== */

.cp-process {
	padding-block: 96px 104px;

	background: var(--cp-surface);
}


.cp-process__layout {
	display: grid;
	grid-template-columns: 1fr;

	gap: 42px;
}


.cp-process__header {
	max-width: 760px;
}


.cp-process__header .cp-section-title {
	max-width: 760px;

	margin-block-end: 0;
}


.cp-process__header .cp-section-description {
	max-width: 660px;

	margin-block-start: 18px;
}


.cp-process__contact-link {
	display: inline-flex;
	align-items: center;

	gap: 8px;

	margin-block-start: 24px;

	color: var(--cp-text);

	font-size: 14px;
	font-weight: 700;

	text-decoration: none;

	transition:
		color var(--cp-transition),
		gap var(--cp-transition);
}


.cp-process__contact-link:hover {
	gap: 12px;

	color: var(--cp-red);
}


/* ==========================================================================
   Process steps
   ========================================================================== */

.cp-process__steps {
	display: grid;
	grid-template-columns: 1fr;

	border-block-start: 1px solid var(--cp-border);
}


.cp-process-step {
	display: grid;
	grid-template-columns: 1fr;

	gap: 10px;

	padding-block: 26px;

	border-block-end: 1px solid var(--cp-border);
}


.cp-process-step__label {
	margin: 0;

	color: var(--cp-red);

	font-size: 12px;
	font-weight: 700;
	line-height: 1.8;
}


.cp-process-step__title {
	margin: 0;

	max-width: 620px;

	color: var(--cp-text);

	font-size: 21px;
	font-weight: 700;
	line-height: 1.65;
}


.cp-process-step__text {
	margin: 0;

	max-width: 680px;

	color: var(--cp-text-muted);

	font-size: 14px;
	font-weight: 400;
	line-height: 2;
}


/* ==========================================================================
   Process — tablet
   ========================================================================== */

@media (min-width: 768px) {

	.cp-process {
		padding-block: 112px 120px;
	}


	.cp-process__layout {
		grid-template-columns:
			minmax(0, 0.92fr)
			minmax(0, 1.08fr);

		align-items: start;

		gap: 70px;
	}


	.cp-process__header {
		position: sticky;

		top: 120px;
	}


	.cp-process__steps {
		border-block-start: 0;
	}


	.cp-process-step {
		padding-block: 30px;

		border-block-start: 1px solid var(--cp-border);
	}


	.cp-process-step:last-child {
		border-block-end: 1px solid var(--cp-border);
	}


	.cp-process-step__title {
		font-size: 22px;
	}


	.cp-process-step__text {
		font-size: 15px;
	}

}


/* ==========================================================================
   Process — desktop
   ========================================================================== */

@media (min-width: 1024px) {

	.cp-process {
		padding-block: 132px 140px;
	}


	.cp-process__layout {
		grid-template-columns:
			minmax(0, 0.86fr)
			minmax(0, 1.14fr);

		gap: 100px;
	}


	.cp-process__header {
		max-width: 620px;

		top: 132px;
	}


	.cp-process__header .cp-section-title {
		max-width: 620px;
	}


	.cp-process__steps {
		max-width: 760px;
	}


	.cp-process-step {
		grid-template-columns:
			110px
			minmax(0, 1fr);

		column-gap: 28px;
		row-gap: 8px;

		padding-block: 34px;
	}


	.cp-process-step__label {
		grid-row: 1 / span 2;

		padding-block-start: 4px;
	}


	.cp-process-step__title {
		font-size: 23px;
	}


	.cp-process-step__text {
		max-width: 620px;

		font-size: 15px;
		line-height: 2.05;
	}

}

/* ==========================================================================
   Latest articles
   ========================================================================== */

.cp-articles {
	padding-block: 92px 100px;

	background: var(--cp-surface);
}


.cp-articles__header {
	display: grid;
	grid-template-columns: 1fr;

	gap: 20px;

	margin-block-end: 38px;
}


.cp-articles__heading {
	max-width: 820px;
}


.cp-articles__heading .cp-section-title {
	max-width: 800px;
}


.cp-articles__heading .cp-section-description {
	max-width: 680px;
}


.cp-articles__all-link {
	display: inline-flex;
	align-items: center;

	gap: 8px;

	width: fit-content;

	color: var(--cp-text);

	font-size: 14px;
	font-weight: 700;
	line-height: 1.7;

	text-decoration: none;

	transition:
		color var(--cp-transition),
		gap var(--cp-transition);
}


.cp-articles__all-link:hover {
	gap: 12px;

	color: var(--cp-red);
}


/* ==========================================================================
   Articles layout
   ========================================================================== */

.cp-articles__layout {
	display: grid;
	grid-template-columns: 1fr;

	gap: 22px;
}


/* ==========================================================================
   Featured article
   ========================================================================== */

.cp-article-feature {
	min-width: 0;
}


.cp-article-feature__link {
	display: block;

	color: inherit;
	text-decoration: none;
}


.cp-article-feature__media {
	overflow: hidden;

	aspect-ratio: 16 / 10;

	border-radius: 24px;

	background: #eceeef;
}


.cp-article-feature__image,
.cp-article-feature__placeholder {
	display: block;

	width: 100%;
	height: 100%;
}


.cp-article-feature__image {
	object-fit: cover;

	transition: transform 320ms ease;
}


.cp-article-feature__placeholder {
	background:
		linear-gradient(
			135deg,
			rgba(28, 50, 72, 0.08),
			rgba(28, 50, 72, 0.02)
		),
		#eef0f1;
}


.cp-article-feature:hover .cp-article-feature__image {
	transform: scale(1.015);
}


.cp-article-feature__content {
	padding-block-start: 18px;
}


.cp-article-feature__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	gap: 8px 14px;

	margin-block-end: 10px;
}


.cp-article-feature__category {
	color: var(--cp-red);

	font-size: 12px;
	font-weight: 700;
	line-height: 1.7;
}


.cp-article-feature__date {
	color: var(--cp-text-muted);

	font-size: 12px;
	font-weight: 400;
	line-height: 1.7;
}


.cp-article-feature__title {
	margin: 0;

	max-width: 760px;

	color: var(--cp-text);

	font-size: clamp(25px, 6.5vw, 38px);
	font-weight: 750;
	line-height: 1.55;

	letter-spacing: -0.015em;
}


.cp-article-feature__excerpt {
	margin: 14px 0 0;

	max-width: 700px;

	color: var(--cp-text-muted);

	font-size: 14px;
	font-weight: 400;
	line-height: 2;
}


.cp-article-feature__read {
	display: inline-flex;
	align-items: center;

	gap: 8px;

	margin-block-start: 18px;

	color: var(--cp-text);

	font-size: 13px;
	font-weight: 700;
	line-height: 1.7;

	transition:
		color var(--cp-transition),
		gap var(--cp-transition);
}


.cp-article-feature:hover .cp-article-feature__read {
	gap: 12px;

	color: var(--cp-red);
}


/* ==========================================================================
   Secondary articles
   ========================================================================== */

.cp-articles__secondary {
	display: grid;
	grid-template-columns: 1fr;

	border-block-start: 1px solid var(--cp-border);
}


.cp-article-row {
	border-block-end: 1px solid var(--cp-border);
}


.cp-article-row__link {
	display: grid;
	grid-template-columns:
		112px
		minmax(0, 1fr);

	align-items: center;

	gap: 16px;

	padding-block: 18px;

	color: inherit;
	text-decoration: none;
}


.cp-article-row__media {
	overflow: hidden;

	aspect-ratio: 1 / 1;

	border-radius: 16px;

	background: #eceeef;
}


.cp-article-row__image,
.cp-article-row__placeholder {
	display: block;

	width: 100%;
	height: 100%;
}


.cp-article-row__image {
	object-fit: cover;

	transition: transform 260ms ease;
}


.cp-article-row__placeholder {
	background:
		linear-gradient(
			135deg,
			rgba(28, 50, 72, 0.08),
			rgba(28, 50, 72, 0.02)
		),
		#eef0f1;
}


.cp-article-row:hover .cp-article-row__image {
	transform: scale(1.02);
}


.cp-article-row__content {
	position: relative;

	min-width: 0;

	padding-inline-end: 28px;
}


.cp-article-row__meta {
	display: flex;
	flex-wrap: wrap;
	align-items: center;

	gap: 6px 12px;

	margin-block-end: 6px;
}


.cp-article-row__category {
	color: var(--cp-red);

	font-size: 11px;
	font-weight: 700;
	line-height: 1.7;
}


.cp-article-row__date {
	color: var(--cp-text-muted);

	font-size: 11px;
	font-weight: 400;
	line-height: 1.7;
}


.cp-article-row__title {
	margin: 0;

	color: var(--cp-text);

	font-size: 16px;
	font-weight: 700;
	line-height: 1.75;
}


.cp-article-row__arrow {
	position: absolute;

	inset-inline-end: 0;
	inset-block-end: 0;

	color: var(--cp-text-muted);

	font-size: 17px;
	line-height: 1;

	transition:
		color var(--cp-transition),
		transform var(--cp-transition);
}


.cp-article-row:hover .cp-article-row__arrow {
	color: var(--cp-red);

	transform: translateX(-4px);
}


/* ==========================================================================
   Empty state
   ========================================================================== */

.cp-articles__empty {
	margin: 0;

	color: var(--cp-text-muted);

	font-size: 15px;
	line-height: 2;
}


/* ==========================================================================
   Latest articles — tablet
   ========================================================================== */

@media (min-width: 768px) {

	.cp-articles {
		padding-block: 108px 116px;
	}


	.cp-articles__header {
		grid-template-columns:
			minmax(0, 1fr)
			auto;

		align-items: end;

		gap: 32px;

		margin-block-end: 46px;
	}


	.cp-articles__all-link {
		margin-block-end: 6px;
	}


	.cp-articles__layout {
		grid-template-columns:
			minmax(0, 1.16fr)
			minmax(0, 0.84fr);

		align-items: start;

		gap: 28px;
	}


	.cp-article-feature__media {
		aspect-ratio: 16 / 10;

		border-radius: 26px;
	}


	.cp-article-feature__title {
		font-size: clamp(30px, 4.3vw, 42px);
	}


	.cp-article-feature__excerpt {
		font-size: 15px;
	}


	.cp-articles__secondary {
		border-block-start: 0;
	}


	.cp-article-row:first-child {
		border-block-start: 1px solid var(--cp-border);
	}


	.cp-article-row__link {
		grid-template-columns:
			138px
			minmax(0, 1fr);

		gap: 18px;

		padding-block: 20px;
	}


	.cp-article-row__media {
		border-radius: 18px;
	}


	.cp-article-row__title {
		font-size: 17px;
	}

}


/* ==========================================================================
   Latest articles — desktop
   ========================================================================== */

@media (min-width: 1024px) {

	.cp-articles {
		padding-block: 128px 136px;
	}


	.cp-articles__header {
		margin-block-end: 54px;
	}


	.cp-articles__layout {
		grid-template-columns:
			minmax(0, 1.28fr)
			minmax(320px, 0.72fr);

		gap: 40px;
	}


	.cp-article-feature__media {
		height: 500px;

		aspect-ratio: auto;

		border-radius: 28px;
	}


	.cp-article-feature__content {
		padding-block-start: 22px;
	}


	.cp-article-feature__title {
		max-width: 780px;

		font-size: 42px;
		line-height: 1.55;
	}


	.cp-article-feature__excerpt {
		max-width: 720px;

		font-size: 15px;
		line-height: 2.05;
	}


	.cp-article-row__link {
		grid-template-columns:
			150px
			minmax(0, 1fr);

		gap: 20px;

		padding-block: 24px;
	}


	.cp-article-row__title {
		font-size: 18px;
	}


	.cp-article-row__meta {
		margin-block-end: 8px;
	}

}


/* ==========================================================================
   Latest articles — large desktop
   ========================================================================== */

@media (min-width: 1280px) {

	.cp-article-feature__media {
		height: 540px;
	}


	.cp-article-row__link {
		grid-template-columns:
			164px
			minmax(0, 1fr);
	}

}

/* ==========================================================================
   Final CTA
   ========================================================================== */

.cp-final-cta {
	padding-block: 64px;

	background: var(--cp-bg);
}


.cp-final-cta__panel {
	display: grid;
	grid-template-columns: 1fr;

	gap: 28px;

	padding: 28px;

	border-radius: var(--cp-radius-xl);

	background: var(--cp-burgundy);
	color: #fff;
}


.cp-final-cta__content {
	max-width: 760px;
}


.cp-final-cta__eyebrow {
	margin: 0 0 12px;

	color: var(--cp-coral);

	font-size: 13px;
	font-weight: 800;
	line-height: 1.7;
}


.cp-final-cta__title {
	margin: 0;

	color: #fff;

	font-size: clamp(30px, 8vw, 52px);
	font-weight: 800;
	line-height: 1.35;
	letter-spacing: -0.025em;
}


.cp-final-cta__description {
	margin: 18px 0 0;

	max-width: 700px;

	color: rgba(255, 255, 255, 0.74);

	font-size: 15px;
	line-height: 2;
}


.cp-final-cta__actions {
	display: flex;
	flex-direction: column;
	align-items: stretch;

	gap: 12px;
}


.cp-final-cta__primary {
	width: 100%;

	background: #fff;
	color: var(--cp-burgundy);

	border-color: #fff;
}


.cp-final-cta__primary:hover {
	background: var(--cp-coral);
	color: var(--cp-burgundy);

	border-color: var(--cp-coral);
}


.cp-final-cta__secondary {
	display: inline-flex;
	align-items: center;
	justify-content: center;

	gap: 8px;

	min-height: 48px;

	color: #fff;

	font-size: 14px;
	font-weight: 800;

	transition:
		color var(--cp-transition),
		gap var(--cp-transition);
}


.cp-final-cta__secondary:hover {
	gap: 12px;

	color: var(--cp-coral);
}

/* ==========================================================================
   Remaining sections — tablet
   ========================================================================== */

@media (min-width: 768px) {

	/* Latest articles */

	/* Final CTA */

	.cp-final-cta {
		padding-block: 80px;
	}


	.cp-final-cta__panel {
		padding: 40px;
	}


	.cp-final-cta__description {
		font-size: 16px;
	}


	.cp-final-cta__actions {
		flex-direction: row;
		align-items: center;
	}


	.cp-final-cta__primary {
		width: auto;
	}

}


/* ==========================================================================
   Remaining sections — desktop
   ========================================================================== */

@media (min-width: 1024px) {

	/* Latest articles */


	/* Final CTA */

	.cp-final-cta {
		padding-block: 96px;
	}


	.cp-final-cta__panel {
		grid-template-columns:
			minmax(0, 1.25fr)
			minmax(260px, 0.75fr);

		align-items: end;

		gap: 64px;

		padding: 56px;
	}


	.cp-final-cta__title {
		font-size: clamp(44px, 4vw, 60px);
	}


	.cp-final-cta__actions {
		justify-content: flex-end;
	}

}