/*
 * Home - What we do.
 *
 * Read from cp-all-designer/index.html:150-202 and css/app.css:336, 390-394,
 * 1046-1176, 3030-3031, with the shared marks at 188-197, 216-240, 277-280.
 *
 * Drawn at 1440 (app.css:113): a fixed measure carries across unchanged.
 * Colour, type, padding, the sizes, the gaps and the corner arrive from the
 * Style tab and are not repeated here.
 *
 * Left behind, because nothing on this page carries it: `.sec--soft`,
 * `.sec--tint`, `.sec--dark`, `.sec--rhythm`, `.sec--flow`, `.sec--close`
 * (app.css:352-385), `.sec__head--center` (392-393) and
 * `.pb__card[data-color="red"]` (1097) — the design's three cards are blue,
 * green and navy, and the veil is a control here in any case.
 */

.custom-home-what-we-do {
	position: relative;
	display: block;
	overflow: hidden;
	box-sizing: border-box;
}

.custom-home-what-we-do__inner {
	box-sizing: border-box;
	margin: 0 auto;
	max-width: 1920px;                     /* the content cap, every band */
}

/* ------------------------------------------------------------------ */
/* The head                                                            */
/* ------------------------------------------------------------------ */

.custom-home-what-we-do__head {
	margin-left: 0;
	margin-right: 0;
	margin-top: 0;
}

.custom-home-what-we-do__eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 12px;
	margin: 0 0 22px;
	font-size: 12px;
	font-weight: 600;
	/* app.css:190 measures 1.15px; every px value here is even. */
	letter-spacing: 2px;
	text-transform: uppercase;
}

.custom-home-what-we-do__title {
	margin: 0;
	font-weight: 600;
	line-height: 1.3;
	letter-spacing: 0;
}

.custom-home-what-we-do__title em {
	position: relative;
	display: inline-block;
	font-style: normal;                    /* app.css:255-260: upright, a step larger than its line */
	font-weight: 700;
	font-size: 108%;  
}

.custom-home-what-we-do__title em::after {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	bottom: 4px;
	height: 8px;
	border-radius: 4px;                    /* app.css:238 measures 3px */
	background: currentColor;
	opacity: 0.18;
}

.custom-home-what-we-do__title strong {
	font-weight: 700;
	color: inherit;
}

.custom-home-what-we-do__description {
	margin: 22px 0 0;                      /* app.css:394 min(22, 2.4*9) */
	font-weight: 400;
	line-height: 1.7;
}

/* ------------------------------------------------------------------ */
/* The three cards                                                     */
/* ------------------------------------------------------------------ */

/* app.css:1053 — one tall track and two beside it. */
.custom-home-what-we-do__cards {
	display: grid;
	grid-template-columns: 2.7fr 1fr 1fr;
}

.custom-home-what-we-do__card {
	position: relative;
	display: block;
	min-width: 0;
	overflow: hidden;
	isolation: isolate;
	color: #FFFFFF;
	text-decoration: none;
	transition: transform 500ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-home-what-we-do__card:hover {
	transform: translateY(-10px);          /* app.css:1070 */
}

.custom-home-what-we-do__card-one {
	grid-row: span 2;                      /* app.css:1065 */
}

.custom-home-what-we-do__card-two,
.custom-home-what-we-do__card-three {
	grid-column: span 2;                   /* app.css:1069 */
}

/* The media slot keeps its box and sits behind the veil. */
.custom-home-what-we-do__card-picture {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
}

.custom-home-what-we-do__card-picture > img,
.custom-home-what-we-do__card-picture > video {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
	transition: transform 1000ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-home-what-we-do__card:hover .custom-home-what-we-do__card-picture > img,
.custom-home-what-we-do__card:hover .custom-home-what-we-do__card-picture > video {
	transform: scale(1.08);                /* app.css:1072 */
}

/* app.css:1076-1086 — the tall card's veil. */
.custom-home-what-we-do__card::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(0deg,
		var(--veil, rgba(8, 16, 38, 0.95)) 0%,
		rgba(8, 16, 38, 0.66) 24%,
		rgba(8, 16, 38, 0.34) 42%,
		rgba(8, 16, 38, 0.08) 60%,
		rgba(8, 16, 38, 0) 74%);
}

/* app.css:1087-1095 — the wide cards carry more of it. */
.custom-home-what-we-do__card-two::after,
.custom-home-what-we-do__card-three::after {
	background: linear-gradient(0deg,
		var(--veil, rgba(8, 16, 38, 0.95)) 0%,
		rgba(8, 16, 38, 0.86) 30%,
		rgba(8, 16, 38, 0.62) 50%,
		rgba(8, 16, 38, 0.28) 70%,
		rgba(8, 16, 38, 0.06) 88%,
		rgba(8, 16, 38, 0) 100%);
}

/* ---- the words at the foot — app.css:1100-1113 ---- */
.custom-home-what-we-do__card-body {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	box-sizing: border-box;
	color: #FFFFFF;
}

.custom-home-what-we-do__card-title {
	max-width: calc(100% - 92px);          /* room for the corner mark */
	margin: 0 0 14px;
	font-weight: 700;
	line-height: 1.3;
	letter-spacing: 0;
	color: #FFFFFF;
	transition: margin-bottom 550ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-home-what-we-do__card:not(:hover):not(:focus-within) .custom-home-what-we-do__card-title {
	margin-bottom: 0;                      /* app.css:1126 */
}

/* app.css:1115-1122 — the words open as the card is reached. */
.custom-home-what-we-do__more {
	display: grid;
	grid-template-rows: 0fr;
	opacity: 0;
	transition: grid-template-rows 550ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            opacity 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
}

.custom-home-what-we-do__more > * {
	overflow: hidden;
	min-height: 0;
}

.custom-home-what-we-do__card:hover .custom-home-what-we-do__more,
.custom-home-what-we-do__card:focus-within .custom-home-what-we-do__more {
	grid-template-rows: 1fr;
	opacity: 1;
}

.custom-home-what-we-do__card-description {
	margin: 0 0 18px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.7;
	color: rgba(255, 255, 255, 0.96);
	max-width: none;
}

.custom-home-what-we-do__card-description:last-child,
.custom-home-what-we-do__figures:last-child {
	margin-bottom: 0;                      /* app.css:1123 */
}

/* ---- figures — app.css:1132-1136 ---- */
.custom-home-what-we-do__figures {
	display: flex;
	flex-wrap: wrap;
	gap: 8px 26px;
}

.custom-home-what-we-do__figure {
	font-size: 14px;
	font-weight: 300;
	color: rgba(255, 255, 255, 0.85);
}

.custom-home-what-we-do__figure b {
	display: block;
	font-size: 20px;
	font-weight: 700;
	color: #FFFFFF;
}

/* ---- the corner mark — app.css:1137-1150 ---- */
.custom-home-what-we-do__go {
	position: absolute;
	top: 30px;
	right: 44px;                           /* clamp(30, 3*14.4, 46) = 43.2 → even */
	z-index: 2;
	display: grid;
	place-items: center;
	width: 46px;
	height: 46px;
	border-radius: 50%;
	border-width: 2px;                     /* app.css:1142 measures 1.5px */
	border-style: solid;
	transition: background-color 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            border-color 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            color 300ms cubic-bezier(0.2, 0.8, 0.2, 1),
	            transform 300ms cubic-bezier(0.2, 0.8, 0.2, 1);
	--custom-press-ink: #FFFFFF;
	--custom-press-ground: transparent;
	--custom-press-shadow: none;
}

.custom-home-what-we-do__card:hover .custom-home-what-we-do__go {
	transform: translateX(4px);            /* app.css:1148 measures 3px */
	--custom-press-ground: #FFFFFF;
	--custom-press-edge: #FFFFFF;
}

/* ------------------------------------------------------------------ */
/* Tablet — 768px to 1024px                                            */
/* ------------------------------------------------------------------ */

/*
 * app.css changes this layout at 1200px, which falls inside the desktop tier.
 * The tiers here are the three the build states, so the design's 1200px
 * arrangement is what tablet answers with, and desktop keeps the widest one.
 * That is a decision, not a figure from the file.
 */
@media (max-width: 1024px) {
	.custom-home-what-we-do__cards {
		grid-template-columns: 1fr 1fr;    /* app.css:1157 */
	}
	.custom-home-what-we-do__card-one {
		grid-row: span 1;
		grid-column: span 2;               /* app.css:1158 */
	}
	.custom-home-what-we-do__card-two,
	.custom-home-what-we-do__card-three {
		grid-column: span 1;               /* app.css:1159 */
	}
	.custom-home-what-we-do__card-description {
		margin-bottom: 10px;               /* app.css:1161 */
	}
	.custom-home-what-we-do__description {
		line-height: 1.6;
	}
	/* app.css:903 — the author's own line breaks close up below the wide tier. */
	.custom-home-what-we-do__description br,
	.custom-home-what-we-do__card-description br {
		display: none;
	}
}

/* ------------------------------------------------------------------ */
/* Mobile — up to 767px                                                */
/* ------------------------------------------------------------------ */

@media (max-width: 767px) {
	.custom-home-what-we-do__cards {
		grid-template-columns: 1fr;        /* app.css:1166 */
	}
	.custom-home-what-we-do__card-one,
	.custom-home-what-we-do__card-two,
	.custom-home-what-we-do__card-three {
		grid-column: auto;
		grid-row: auto;
	}
	.custom-home-what-we-do__card-title {
		margin-bottom: 0;                  /* app.css:1172 */
		max-width: calc(100% - 66px);
	}
	.custom-home-what-we-do__more {
		display: none;                     /* app.css:1174 */
	}
	.custom-home-what-we-do__go {
		top: 16px;
		right: 20px;
		width: 36px;
		height: 36px;                      /* app.css:1175 */
	}
	.custom-home-what-we-do__description {
		line-height: 1.55;                 /* app.css:1176 */
	}
}

/* A pointer that cannot hover reads the words already open — app.css:1128-1131. */
@media (hover: none) and (min-width: 768px) {
	.custom-home-what-we-do__more {
		grid-template-rows: 1fr;
		opacity: 1;
	}
	.custom-home-what-we-do__card-title,
	.custom-home-what-we-do__card:not(:hover):not(:focus-within) .custom-home-what-we-do__card-title {
		margin-bottom: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.custom-home-what-we-do__card,
	.custom-home-what-we-do__card-picture > img,
	.custom-home-what-we-do__card-picture > video,
	.custom-home-what-we-do__go,
	.custom-home-what-we-do__more,
	.custom-home-what-we-do__card-title {
		transition: none;
	}
	.custom-home-what-we-do__card:hover,
	.custom-home-what-we-do__card:hover .custom-home-what-we-do__card-picture > img,
	.custom-home-what-we-do__card:hover .custom-home-what-we-do__card-picture > video,
	.custom-home-what-we-do__card:hover .custom-home-what-we-do__go {
		transform: none;
	}
}

/* ------------------------------------------------------------------ */
/* One band, one screen — desktop only                                 */
/* ------------------------------------------------------------------ */

/* app.css:336-338 (.sec) gives this band the window's height, and app.css:2830 hands it back
   at 1024 and below, where the content sets the height as it does everywhere
   else. min-height, so a band that outgrows the window takes the room it needs
   and the page scrolls rather than cutting anything off. */
@media (min-width: 1025px) {
	.custom-home-what-we-do {
		min-height: 100vh;
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	/* A flex item with auto side margins shrinks to its own content, so the
	   content box is told its width again: the whole band, up to the cap. */
	.custom-home-what-we-do > .custom-home-what-we-do__inner {
		width: 100%;
	}
}