/* ==========================================================================
   About page — page-templates/about.php
   Figma: About Desktop 519:30167 / Tablet 519:48605 / Mobile 519:48832
   ========================================================================== */
body {
	--about-y: 96px;
	--about-muted: #65777e;
	--about-on-blue: #ccdbe0;
}
@media (max-width: 1199px) { body { --about-y: 77px; } }
@media (max-width: 767px)  { body { --about-y: 58px; } }

/* ---------- Hero (shared page-hero, About photo is a full-width 1440×607 scene) ---------- */
.page-hero--about .page-hero__media {
	top: 50%;
	right: max(0px, calc((100% - 1440px) / 2));
	width: 1440px; max-width: none;
	height: 607px; aspect-ratio: auto;
	transform: translateY(calc(-50% + .5px));
	background: var(--c-blue);
}
.page-hero--about .page-hero__img { object-position: center; }
.page-hero--about .page-hero__title { max-width: 1000px; }
.page-hero--about .page-hero__text { max-width: 680px; }
.page-hero--about .page-hero__content { max-width: 1000px; }

@media (max-width: 1199px) {
	.page-hero--about { min-height: 654px; padding-bottom: 70px; }
	/* Figma tablet: 1551×654 photo, right edge 206px past the frame */
	.page-hero--about .page-hero__media {
		top: 0; bottom: 0; right: -26.8%;
		width: auto; height: 100%; aspect-ratio: 1440 / 607;
		transform: none;
	}
	.page-hero--about .page-hero__img { object-position: right center; }
	.page-hero--about .page-hero__title { max-width: 380px; }
	.page-hero--about .page-hero__text { max-width: 451px; }
	.page-hero--about .page-hero__content { max-width: 460px; }
}

@media (max-width: 767px) {
	/* Figma mobile: photo (844×987) is the section background, parcel shows under the buttons */
	.page-hero--about { display: block; padding: 42px 0 236px; }
	.page-hero--about .page-hero__media {
		position: absolute; order: 0; margin: 0;
		top: auto; bottom: -29px; right: auto; left: calc(50% - 645px);
		width: 844px; height: 987px; aspect-ratio: auto;
	}
	.page-hero--about .page-hero__media .page-hero__img,
	.page-hero--about .page-hero__media picture:has(source) .page-hero__img { object-position: center; }
	.page-hero--about::after {
		content: ""; position: absolute; inset: 0 0 auto; height: min(703px, calc(100% - 206px)); z-index: 1; pointer-events: none;
		background: linear-gradient(180deg, rgba(49, 43, 182, .94) 0%, rgba(49, 43, 182, .86) 60%, rgba(49, 43, 182, 0) 100%);
	}
	.page-hero--about .page-hero__title { max-width: none; letter-spacing: -1.6px; }
	.page-hero--about .page-hero__text,
	.page-hero--about .page-hero__content { max-width: none; }
}

/* ---------- Shared bits ---------- */
.about-eyebrow {
	display: flex; align-items: center; gap: 10px;
	font-family: var(--ff-mono); font-weight: 400; font-size: 12px; line-height: 18px; letter-spacing: 1.5px; text-transform: uppercase;
	color: var(--c-navy);
}
.on-dark .about-eyebrow { color: var(--c-on-dark); }

.about-section { padding-block: var(--about-y); }

.about-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 40px; margin-bottom: 48px; }
.about-head__main { display: flex; flex-direction: column; align-items: flex-start; gap: 16px; min-width: 0; max-width: 720px; }
.about-head__title {
	font-weight: 300; font-size: 48px; line-height: 51.84px; letter-spacing: -1.2px; color: var(--c-blue);
}
.on-dark .about-head__title { color: #fff; }
.about-head__text {
	flex: none; width: 440px; max-width: 100%;
	font-family: var(--ff-text); font-weight: 400; font-size: 16px; line-height: 24px; color: var(--about-muted);
}
.on-dark .about-head__text { color: var(--about-on-blue); }

/* ---------- Who we are ---------- */
.about-intro { padding-block: var(--about-y); }
.about-intro__inner { display: flex; align-items: flex-start; justify-content: space-between; gap: 80px; }
.about-intro__copy { flex: 1 1 600px; max-width: 600px; display: flex; flex-direction: column; align-items: flex-start; gap: 24px; }
.about-intro__text { display: flex; flex-direction: column; gap: 10px; font-family: var(--ff-text); font-weight: 400; font-size: 17px; line-height: 27px; color: var(--about-muted); }

.about-stats { flex: 0 1 600px; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin: 0; }
.about-stat {
	display: flex; flex-direction: column; align-items: flex-start; gap: 12px;
	padding: 28px; border-radius: 8px; background: var(--c-bg-soft);
	transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.about-stat__value { font-weight: 300; font-size: 48px; line-height: 52px; color: var(--c-blue); white-space: nowrap; }
.about-stat__label { max-width: 220px; font-family: var(--ff-text); font-weight: 400; font-size: 18px; line-height: 26px; color: var(--about-muted); }
.about-stat--blue { background: var(--c-blue); }
.about-stat--blue .about-stat__value { color: #fff; }
.about-stat--blue .about-stat__label { color: var(--about-on-blue); }

/* ---------- Card grids ---------- */
.about-cards { display: grid; gap: 24px; margin: 0; }
.about-cards--pillar,
.about-cards--feature,
.about-cards--client { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.about-cards--doc { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }

.about-card {
	display: flex; flex-direction: column; align-items: flex-start; gap: 14px;
	padding: 28px; border-radius: 8px; background: #fff;
	transition: transform .35s var(--ease-out), box-shadow .35s var(--ease-out);
}
.about-card__icon {
	display: inline-flex; align-items: center; justify-content: center; flex: none;
	width: 48px; height: 48px; border-radius: 8px;
}
.about-card__icon .tk-icon { width: 24px; height: 24px; }
.about-card__title { font-weight: 400; font-size: 20px; line-height: 1.28; color: var(--c-blue); }
.about-card__text { font-family: var(--ff-text); font-weight: 400; font-size: 14px; line-height: 21px; color: var(--about-muted); }

/* Our approach — cream pillars */
.about-card--pillar { gap: 16px; padding: 32px; border-radius: 12px; background: #fff5e9; }
.about-card--pillar .about-card__icon { background: var(--c-orange); color: #fff; }
.about-card--pillar .about-card__icon .tk-icon[width="26"] { width: 26px; height: 26px; }
.about-card--pillar .about-card__title { font-size: 28px; line-height: 1.276; }
.about-card--pillar .about-card__text { max-width: 340px; font-size: 15px; line-height: 23px; color: var(--c-navy); }
.about-card--pillar:hover { transform: translateY(-4px); box-shadow: 0 18px 40px -20px rgba(9, 6, 70, .55); }

/* Advantages — white features, small blue icon */
.about-card--feature .about-card__icon { width: 40px; height: 40px; background: var(--c-blue); color: #fff; }
.about-card--feature .about-card__icon .tk-icon { width: 20px; height: 20px; }
.about-card--feature .about-card__icon .tk-icon[width="23"] { width: 23px; height: 23px; }
.about-card--feature .about-card__text { max-width: 360px; }
.about-card--feature:hover { box-shadow: 0 12px 32px -18px rgba(49, 43, 182, .35); }

/* Licence & insurance */
.about-card--doc .about-card__icon { background: var(--c-bg-soft); color: var(--c-blue); }
.about-card--doc .about-card__title { font-size: 19px; line-height: 24px; }
.about-card--doc:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -20px rgba(49, 43, 182, .35); }

/* Who we work with */
.about-card--client { gap: 16px; padding: 32px; border-radius: 12px; background: var(--c-bg-soft); }
.about-card--client .about-card__icon { background: var(--c-orange); color: #fff; }
.about-card--client .about-card__title { font-size: 22px; line-height: 28px; }
.about-card--client .about-card__text { max-width: 340px; font-size: 15px; line-height: 23px; }
.about-card--client:hover { transform: translateY(-4px); box-shadow: 0 16px 36px -20px rgba(49, 43, 182, .35); }

@media (prefers-reduced-motion: reduce) {
	.about-card, .about-stat { transition: none; }
	.about-card:hover { transform: none; }
}

/* ---------- CTA spacing (Figma: 80 top / 96 bottom) ---------- */
.about-cta.cta-section { padding-top: 80px; padding-bottom: 96px; }

/* ---------- Tablet ---------- */
@media (max-width: 1199px) {
	.about-head { flex-direction: column; align-items: stretch; gap: 28px; margin-bottom: 36px; }
	.about-head__main { max-width: none; }
	.about-head__title { font-size: 38px; line-height: 41px; letter-spacing: -1px; }
	.about-head__text { width: auto; }

	.about-intro__inner { flex-direction: column; align-items: stretch; gap: 40px; }
	.about-intro__copy { flex: none; max-width: none; }
	.about-stats { flex: none; }
	.about-stat__label { max-width: none; }

	.about-cards--feature,
	.about-cards--doc { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.about-card--pillar .about-card__title { font-size: 22px; line-height: 28px; }
	.about-card--client .about-card__title { font-size: 20px; line-height: 26px; }
	.about-card--feature .about-card__text,
	.about-card--pillar .about-card__text,
	.about-card--client .about-card__text { max-width: none; }

	.about-cta.cta-section { padding-top: 64px; padding-bottom: 77px; }
}

/* ---------- Mobile ---------- */
@media (max-width: 767px) {
	.about-head { gap: 20px; margin-bottom: 26px; }
	.about-head__title { font-size: 30px; line-height: 32px; letter-spacing: -.8px; }

	.about-intro__inner { gap: 28px; }
	.about-stats { grid-template-columns: minmax(0, 1fr); }
	.about-stat { padding: 28px 20px; }

	.about-cards,
	.about-cards--pillar,
	.about-cards--feature,
	.about-cards--doc,
	.about-cards--client { grid-template-columns: minmax(0, 1fr); }
	.about-card { padding: 28px 20px; }
	.about-card--pillar,
	.about-card--client { padding: 24px 22px; }
	.about-card--feature .about-card__title { font-size: 18px; line-height: 23px; }

	.about-cta.cta-section { padding-top: 48px; padding-bottom: 58px; }
}