/* ==========================================================================
   Shared sections — template-parts/{cta,testimonial,insights,contact-team}.php
   Measured from the Homepage frame (130:6). Colours use the --brand* slots so
   company colour schemes carry through.
   ========================================================================== */

/* --- Small round 29px button (carousels) ------------------------------------ */
.circle-btn {
	display: grid;
	place-items: center;
	width: 29px;
	height: 29px;
	border-radius: 50%;
	border: 1px solid var(--white);
	color: var(--white);
	-webkit-backdrop-filter: blur(12px);
	backdrop-filter: blur(12px);
	transition: background-color 0.35s, color 0.35s, opacity 0.35s, border-color 0.35s;
}
.circle-btn svg { width: 12px; height: 10px; }
.circle-btn--prev svg { transform: scaleX(-1); }
.circle-btn:disabled { opacity: 0.4; cursor: default; }
@media (hover: hover) {
	.circle-btn:not(:disabled):hover { background: var(--white); color: var(--brand-deep); }
}
/* Comfortable tap target without changing the drawn size. */
.circle-btn { position: relative; }
.circle-btn::after { content: ""; position: absolute; inset: -8px; }

/* ==========================================================================
   CTA — "Let's work together" (y7008–7569: 561 band, 854x370 box)
   ========================================================================== */
.cta {
	position: relative;
	padding: calc(96 * var(--u)) 0 calc(95 * var(--u));
	overflow: hidden;
	isolation: isolate;
}
.cta__media { position: absolute; inset: 0; z-index: -1; }
.cta__media img { width: 100%; height: 100%; object-fit: cover; }
.cta__media::after { content: ""; position: absolute; inset: 0; background: rgba(8, 18, 40, 0.25); }
.cta__box {
	max-width: 854px;
	min-height: 370px;
	margin-inline: auto;
	padding: 51px 40px 70px;
	border-radius: 3px;
	background: var(--brand);
	text-align: center;
}
.cta__title { max-width: 632px; margin-inline: auto; }
.cta__text { max-width: 664px; margin: 41px auto 0; }
.cta__actions { margin-top: 53px; display: flex; justify-content: center; }

/* ==========================================================================
   Testimonial — full-bleed photo with the 537x593 card (y4800–5516)
   ========================================================================== */
.testimonial {
	position: relative;
	padding: calc(62 * var(--u)) 0 calc(61 * var(--u));
	overflow: hidden;
	isolation: isolate;
	background: var(--brand-deep);
	color: var(--white);
}
.testimonial__media { position: absolute; inset: 0; z-index: -1; overflow: hidden; }
.testimonial__img { position: absolute; inset: -6% 0; }
.testimonial__img img { width: 100%; height: 100%; object-fit: cover; object-position: var(--pos, 50% 30%); }
.testimonial__media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(90deg, rgba(8, 18, 40, 0.35) 0%, rgba(8, 18, 40, 0) 55%);
}
.testimonial__card {
	position: relative;
	display: flex;
	flex-direction: column;
	width: 537px;
	max-width: 100%;
	min-height: calc(593 * var(--u));
	padding: 29px 28px 28px;
	background: var(--brand-deep);
}
.testimonial__label { margin: 0; }
.testimonial__slides {
	display: grid;
	flex: 1;
	margin-top: 44px;
}
.testimonial__slide {
	grid-area: 1 / 1;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 40px;
	transition: opacity 0.7s var(--ease-out), transform 0.9s var(--ease-out), visibility 0s linear 0s;
}
.testimonial__slide:not(.is-active) { opacity: 0; transform: translateX(16px); visibility: hidden; transition: opacity 0.5s var(--ease-out), transform 0.7s var(--ease-out), visibility 0s linear 0.7s; }
.testimonial__quote { max-width: 464px; }
.testimonial__quote p { margin: 0; }
.testimonial__cite { display: flex; flex-direction: column; max-width: 400px; padding-right: 80px; font-size: 12px; line-height: 20px; }
.testimonial__nav { position: absolute; right: 28px; bottom: 28px; display: flex; gap: 3px; }

/* ==========================================================================
   Insights — label + intro, featured 632x324, 2x2 cards of 300|300x279
   (y5516–7008, white)
   ========================================================================== */
.insights {
	position: relative;
	padding: calc(182 * var(--u)) 0 calc(185 * var(--u));
	color: var(--ink);
	overflow: hidden;
}
.insights__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: calc(32 * var(--u));
}
.insights__head { align-self: start; }
.insights__label { color: var(--brand); font-weight: 400; }
.insights__intro { max-width: 411px; margin-top: 47px; color: var(--ink); }
.insights__link { display: block; color: inherit; cursor: pointer; }
.insights__media { aspect-ratio: 632 / 324; background: rgba(24, 48, 102, 0.06); }
.insights__media img { width: 100%; height: 100%; object-fit: cover; }
.insights__featured .insights__body { margin-top: 30px; }
.insights__meta {
	margin-bottom: 6px;
	font-size: 12px;
	line-height: 18px;
	color: var(--brand);
	opacity: 0.75;
}
.insights__title {
	font-family: var(--sans);
	font-weight: 400;
	font-size: 16px;
	line-height: 25px;
	color: var(--ink);
	transition: color 0.3s;
}
.insights__card { position: relative; margin-top: calc(52 * var(--u)); padding-top: 30px; }
.insights__rule { position: absolute; inset: 0 0 auto; border-top-color: var(--line-dark); }
.insights__link--row {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: calc(32 * var(--u));
	align-items: start;
}
.insights__link--row .insights__media { aspect-ratio: 300 / 279; }
.insights__link--row .insights__title {
	display: -webkit-box;
	-webkit-line-clamp: 6;
	-webkit-box-orient: vertical;
	overflow: hidden;
}
.insights__more { margin-top: 60px; }
@media (hover: hover) {
	.insights__link:hover .insights__title { color: var(--brand); }
}

/* The frosted 86px "Read Article" circle that follows the pointer. */
.read-cursor {
	position: absolute;
	left: 0;
	top: 0;
	z-index: 5;
	width: 86px;
	height: 86px;
	margin: -43px 0 0 -43px;
	pointer-events: none;
	transform: translate3d(var(--x, 0px), var(--y, 0px), 0);
	will-change: transform;
}
.read-cursor > span {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	background: rgba(24, 48, 102, 0.5);
	-webkit-backdrop-filter: blur(24px);
	backdrop-filter: blur(24px);
	color: var(--white);
	font-size: 12px;
	line-height: 25px;
	white-space: nowrap;
	opacity: 0;
	transform: scale(0.3);
	transition: opacity 0.35s var(--ease-out), transform 0.55s var(--ease-out);
}
.read-cursor.is-on > span { opacity: 1; transform: none; }
@media (hover: none), (pointer: coarse) { .read-cursor { display: none; } }

/* ==========================================================================
   Contact + team (y7569–8370): cards and details left, photo on the right
   ========================================================================== */
.contact-team {
	position: relative;
	padding: calc(87 * var(--u)) 0 calc(55 * var(--u));
	overflow: hidden;
}
.contact-team__media {
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(50% + 36 * var(--u));
	right: 0;
	overflow: hidden;
	background: var(--brand-deep);
}
.contact-team__img { position: absolute; inset: -5% 0; }
.contact-team__img img { width: 100%; height: 100%; object-fit: cover; }
.contact-team__main { width: calc(632 * var(--u) + 0px); min-width: 0; max-width: 632px; }
.contact-team__cards {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-auto-rows: 1fr; /* both rows share the tallest card's height */
	gap: calc(32 * var(--u));
}
.contact-team__cards:focus-visible { outline: 2px solid var(--brand-tint); outline-offset: 6px; }
.person-card {
	display: flex;
	flex-direction: column;
	min-height: 308px;
	border-radius: 3px;
	overflow: hidden;
	background: var(--brand-deep);
}
.person-card__photo { height: 125px; overflow: hidden; background: rgba(255, 255, 255, 0.06); }
.person-card__photo img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 6%; filter: grayscale(1); transition: transform 1.2s var(--ease-out), filter 0.8s; }
@media (hover: hover) {
	.person-card:hover .person-card__photo img { transform: scale(1.05); filter: grayscale(0.6); }
}
.person-card__body { display: flex; flex-direction: column; flex: 1; padding: 19px 16px 16px; }
/* Cards show name and title only (client, 15 Oct 2026), so the portrait grows
   into the height the blurb and button used to take; the card keeps its
   footprint beside the "Meet the whole team" cell. */
.contact-team .person-card__photo { position: relative; flex: 1 1 auto; min-height: 125px; }
.contact-team .person-card__photo img, .contact-team .person-card__monogram { position: absolute; inset: 0; }
.contact-team .person-card__body { flex: 0 0 auto; }
.person-card__name { font-size: 14px; line-height: 18px; }
.person-card__name strong { display: block; font-weight: 700; }
.person-card__name span { display: block; font-size: 12px; line-height: 18px; }
.person-card__text { margin-top: 16px; font-size: 12px; line-height: 15px; font-weight: 300; max-width: 157px; }
.person-card__actions { display: flex; align-items: center; gap: 13px; margin-top: auto; padding-top: 20px; }
.person-card__actions .btn { min-width: 124px; }
.person-card__in { display: block; width: 20px; height: 20px; color: var(--brand-accent); transition: transform 0.4s var(--ease-out); }
.person-card__in svg { width: 20px; height: 20px; }
@media (hover: hover) { .person-card__in:hover { transform: translateY(-2px); } }

/* Initials until a portrait exists (never a grey box). */
.person-card__monogram {
	display: grid;
	place-items: center;
	height: 100%;
	font-family: var(--serif);
	font-size: 40px;
	letter-spacing: 0.04em;
	color: var(--brand-tint);
	background: linear-gradient(160deg, rgba(255, 255, 255, 0.08), rgba(255, 255, 255, 0.02));
}

/* Sixth cell: the way to the full team, same footprint as a person card. */
.contact-team .person-card.person-card--team { background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.24); transition: background-color 0.4s var(--ease-out), box-shadow 0.4s var(--ease-out); }
.person-card__team { position: relative; display: flex; flex-direction: column; flex: 1; padding: 19px 16px 16px; color: inherit; }
.person-card__eyebrow { font-size: 12px; line-height: 18px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brand-tint); }
.person-card__team-title { margin-top: 14px; max-width: 157px; font-family: var(--serif); font-size: 24px; line-height: 30px; }
.person-card__badge { margin-top: auto; align-self: flex-start; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); transition: transform 0.5s var(--ease-out), box-shadow 0.4s; }
@media (hover: hover) {
	.contact-team .person-card.person-card--team:hover { background: rgba(255, 255, 255, 0.06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
	.person-card--team:hover .person-card__badge { transform: translateX(6px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.7); }
}
.person-card__team:focus-visible { outline: 2px solid var(--brand-tint); outline-offset: -4px; }

.contact-team__details {
	display: grid;
	grid-template-columns: 300px 300px;
	column-gap: 37px;
	row-gap: 44px;
	margin-top: calc(106 * var(--u));
}
.contact-detail { max-width: 300px; }
.contact-detail:nth-child(3) { grid-column: 1 / -1; max-width: none; }
.contact-detail__title { font-family: var(--sans); font-weight: 400; font-size: 18px; line-height: 25px; }
.contact-detail__text { font-size: 12px; line-height: 25px; }
.contact-detail__link {
	display: inline-block;
	margin-top: 25px;
	font-size: 12px;
	line-height: 25px;
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color 0.3s, text-decoration-color 0.3s;
}
@media (hover: hover) { .contact-detail__link:hover { color: var(--brand-tint); } }
.contact-team--compact { padding-bottom: calc(87 * var(--u)); }

/* ==========================================================================
   Tablet / phone
   ========================================================================== */
@media (max-width: 1023px) {
	.cta { padding: 64px 0; }
	.cta__box { min-height: 0; padding: 48px 32px 56px; }
	.cta__text { margin-top: 28px; }
	.cta__actions { margin-top: 36px; }

	.testimonial { padding: 0 0 48px; background: var(--brand-deep); }
	.testimonial__media { position: relative; height: 62vw; max-height: 520px; }
	.testimonial__media::after { background: linear-gradient(180deg, rgba(20, 39, 73, 0) 55%, var(--brand-deep) 100%); }
	.testimonial__card { width: auto; min-height: 0; margin-top: -72px; padding: 28px 24px 24px; }
	.testimonial__slides { margin-top: 28px; }
	.testimonial__nav { position: static; margin-top: 24px; }

	.insights { padding: 96px 0; }
	.insights__grid { grid-template-columns: 1fr; }
	.insights__head { margin-bottom: 40px; }
	.insights__intro { margin-top: 24px; max-width: 520px; }
	.insights__card { margin-top: 40px; padding-top: 28px; }

}
/* The 189px cards need the full 1296 row; below 1280 the photo moves on top. */
@media (max-width: 1279px) {
	.contact-team { padding: 0 0 64px; }
	.contact-team__media { position: relative; left: auto; height: 46vw; max-height: 520px; margin-bottom: 56px; }
	.contact-team__main { width: auto; max-width: none; }
	.contact-team__cards { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
	.contact-team__details { grid-template-columns: 1fr 1fr 1fr; column-gap: 24px; margin-top: 64px; }
	.contact-detail:nth-child(3) { grid-column: auto; }
	.person-card__photo { height: 180px; }
	.person-card__text { max-width: none; }
}
@media (max-width: 1023px) {
	.contact-team { padding-bottom: 56px; }
	.contact-team__media { height: 64vw; max-height: 480px; margin-bottom: 48px; }
	.contact-team__cards { gap: 16px; }
	.person-card__photo { height: 140px; }
	.contact-team__details { grid-template-columns: 1fr 1fr; margin-top: 56px; }
	.contact-detail:nth-child(3) { grid-column: 1 / -1; }
}
@media (max-width: 599px) {
	.cta__box { padding: 40px 20px 44px; }

	.insights__link--row { grid-template-columns: 1.2fr 1fr; column-gap: 16px; }
	.insights__link--row .insights__media { aspect-ratio: 1; }

	/* Phones: a swipeable strip of full-size cards, the next one peeking in. */
	.contact-team__cards {
		display: grid;
		grid-template-columns: none;
		grid-auto-flow: column;
		grid-auto-columns: min(236px, 68vw);
		grid-auto-rows: auto;
		gap: 12px;
		margin-inline: calc(-1 * var(--gutter));
		padding: 0 var(--gutter) 6px;
		overflow-x: auto;
		overscroll-behavior-x: contain;
		scroll-snap-type: x mandatory;
		scroll-padding-inline: var(--gutter);
		scrollbar-width: none;
	}
	.contact-team__cards::-webkit-scrollbar { display: none; }
	.contact-team__cards > li { scroll-snap-align: start; }
	.person-card { min-height: 316px; }
	.person-card__photo { height: 168px; }
	.person-card__text { max-width: none; }
	.contact-team__details { grid-template-columns: 1fr; row-gap: 28px; }
	.contact-detail__link { margin-top: 8px; }
}