/* ===================================================================
   About page — template-about.php
   Section bands: projects/detail-king/figma-data/about-spec.md
   =================================================================== */

.about-who,
.about-story,
.about-approach__inner {
	padding-block: calc(150 * var(--sp));
}

/* ─────────────── Who We Are (y 833…1695, light) ─────────────── */
.about-who__copy .section-heading__title { font-size: calc(40 * var(--fs)); } /* measured off the export, no utility class lands here */
.about-who__copy p { color: var(--text-muted-dark); }
.about-who__copy p + p { margin-block-start: 22px; }

/* ─────────────── Our Story (y 1695…2789.6, dark) ─────────────── */
.about-story { position: relative; overflow: hidden; }
.about-story__watermark {
	position: absolute;
	z-index: 0;
	inset-inline-start: -40px;
	inset-block-end: 20px;
	font-size: calc(320 * var(--fs));
}
.about-story__copy p { color: var(--text-white-65); }
.about-story__copy p + p { margin-block-start: 22px; }
/* Gold-tinted frame side sits on the grid's first column here (mirrored vs
   Who We Are / Our Approach), which .dk-split's column order already gives
   for free since the photo is first in this section's markup. */

/* ─────────────── Equipment (y 2789.6…3723.4, light) ─────────────── */
.about-equip { position: relative; overflow: hidden; padding-block: calc(150 * var(--sp)); }
.about-equip__watermark {
	position: absolute;
	z-index: 0;
	inset-inline-start: -40px;
	top: 50%;
	transform: translateY(-50%);
	font-size: calc(320 * var(--fs));
}
.about-equip__inner {
	position: relative;
	z-index: 1;
	max-width: 1630px; /* 1550 inner container + 40px inset each side, per the comp */
	margin-inline: auto;
	padding-inline: 40px;
}
.about-equip .section-heading__text { max-width: 740px; margin-inline: auto; }
.about-equip__row {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	margin-block-start: calc(60 * var(--sp));
}
.about-equip__card {
	flex: 1 1 240px;
	padding: calc(45 * var(--sp)) 39px;
	border: 1px solid rgba(11, 11, 12, .1);
}
.about-equip__icon {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 70px;
	height: 70px;
	border-radius: var(--radius-md);
	margin-block-end: 14px;
}
/* The cropped export PNG already contains its own dark badge — no CSS
   background/colour needed, just the box size. */
.about-equip__icon--img {
	display: block;
	object-fit: cover;
}
.about-equip__icon:not(.about-equip__icon--img) {
	background: var(--bg-dark);
	color: var(--gold-primary);
}
.about-equip__card-title {
	font: 400 32px/1 var(--font-display);
	letter-spacing: .03em;
	color: var(--text-dark);
	margin-block-end: 8px;
}
.about-equip__card-text { color: var(--text-muted); }

/* ─────────────── Our Approach (y 3723.4…4931.7, beige) ─────────────── */
.about-approach__copy p { color: var(--text-muted-dark); }
.about-approach__copy p + p { margin-block-start: 22px; }
.about-approach__steps {
	display: flex;
	flex-wrap: wrap;
	gap: 26px;
	max-width: 1630px;
	margin: calc(60 * var(--sp)) auto 0;
	padding-inline: 40px;
}
.about-approach__step {
	flex: 1 1 220px;
	padding: calc(45 * var(--sp)) 37px;
	border: 1px solid rgba(11, 11, 12, .1);
}
/* Outlined-numeral pattern, same stroke mechanism as .dk-watermark but at
   card scale — doesn't exist anywhere else on the site yet. */
.dk-step__num {
	display: block;
	font: 400 calc(64 * var(--fs))/1 var(--font-display);
	color: transparent;
	-webkit-text-stroke: 1.5px rgba(201, 161, 74, .55);
	margin-block-end: 10px;
}
.about-approach__step-title {
	font: 400 30px/1 var(--font-display);
	letter-spacing: .03em;
	color: var(--text-dark);
	margin-block-end: 8px;
}
.about-approach__step-text { color: var(--text-muted); }

/* ─────────────── Stats (y 4931.7…5420.4, dark) ─────────────── */
.about-stats { padding-block: calc(110 * var(--sp)); }
/* The comp draws a full-width top rule above the row (128:152
   "HorizontalBorder") with 48px of breathing room before each number —
   .dk-stats--craft alone doesn't have either, they're specific to this
   section's own wrapper. */
.about-stats__row { border-block-start: 1px solid var(--line-white-12); }
.about-stats__row .dk-stats__item { padding-block-start: calc(48 * var(--sp)); }
/* Measured off the export: About's numerals land at ~92px, not the
   homepage craft-stats' already-corrected 100px — a different comp value,
   not the same one re-measured. */
.about-stats__row .dk-stats__value { font-size: calc(92 * var(--fs)); font-family: var(--font-display); font-weight: 400; }

/* ─────────────── CTA (y 5420.4…6021) ─────────────── */
.about-cta { padding-block: calc(110 * var(--sp)); }

/* ---------------------------------------------------------------
   Responsive — collapse in order, media above copy already comes free
   from .dk-split's single-column fallback; these tune the rest.
   --------------------------------------------------------------- */
@media (max-width: 991.98px) {
	.about-who, .about-story, .about-approach__inner { padding-block: calc(90 * var(--sp)); }
	.about-equip { padding-block: calc(90 * var(--sp)); }
	.page-banner__title { font-size: calc(64 * var(--fs)); }
	.dk-cta__title { font-size: calc(54 * var(--fs)); }
	.about-story__watermark, .about-equip__watermark { font-size: calc(180 * var(--fs)); }
}

@media (max-width: 575.98px) {
	.about-equip__row, .about-approach__steps { flex-direction: column; }
	.page-banner { padding-block: calc(160 * var(--sp)) calc(40 * var(--sp)); }
	.page-banner__title { font-size: calc(46 * var(--fs)); }
	.dk-cta { padding: calc(50 * var(--sp)) 24px; }
	.dk-cta__title { font-size: calc(40 * var(--fs)); }
}