/* Centritek About — public-facing styles
 *
 * Owns the full /about page body (hero → community involvement) as one
 * controlled section, INCLUDING the hero (decision D4 — unlike Rentals/
 * Sales, which kept the page's pre-existing hero). Selectors are prefixed
 * `.ct-about` to clear Elementor's heading/button kit; loaded only when the
 * About widget renders (wp_enqueue_style in render(), same scoping
 * mechanism as services.css / rentals.css / sales.css).
 *
 * Tokens mirror services.css / rentals.css / sales.css / showroom.css:
 *   orange #F56A22 (hover #d44a1c) · ink #1a1a1a · muted #74787c
 *   border #ededed · surface tint #f6f6f6 · heading font Space Grotesk
 *
 * The About mock does not use the 48×3px keyline title treatment seen on
 * Rentals' Why-Rent blocks — headings here are two-tone accented only, per
 * spec §"Working rules".
 */

.ct-about {
	color: #1a1a1a;
}

.ct-about *,
.ct-about *::before,
.ct-about *::after {
	box-sizing: border-box;
}

/* No horizontal padding — the page's container system (Vektor + Elementor)
 * owns the side gutter so it isn't doubled. max-width is kept as a safety
 * cap that re-centers content if the Elementor container is ever set to
 * Full Width. */
.ct-about__inner {
	max-width: 1200px;
	margin: 0 auto;
}

/* Scoped under .ct-about (0,2,0) so the accent color beats Elementor's
 * text-kit color rules on headings, paragraphs, and spans. */
.ct-about .ct-about__accent {
	color: #F56A22;
}

/* ---------- Shared headings / copy ---------- */

.ct-about .ct-about__h1 {
	font-family: var(--heading-font, "Space Grotesk"), system-ui, sans-serif;
	font-weight: 900;
	font-size: 46px;
	line-height: 1;
	letter-spacing: normal;
	color: #333;
	margin: 0 0 18px;
	text-transform: uppercase;
}

/* Hero heading is short ("get to know us") — cap the width so it wraps to
 * two lines ("GET TO" / "KNOW US") like the mock, instead of running wide
 * on one line at desktop widths. */
.ct-about .ct-about__hero-heading {
	max-width: 460px;
}

.ct-about .ct-about__h2 {
	font-family: var(--heading-font, "Space Grotesk"), system-ui, sans-serif;
	font-weight: 900;
	font-size: 46px; /* matches the site's heading size (same as H1) */
	line-height: 1;
	letter-spacing: normal;
	color: #333;
	margin: 0 0 18px;
	text-transform: uppercase;
}

/* Lead/body are scoped (0,2,0) so their margins beat theme/kit paragraph
 * rules — same reason as the other rebuilt pages. */
.ct-about .ct-about__lead {
	font-family: "IBM Plex Sans", system-ui, sans-serif;
	font-size: 24px;
	font-weight: 300;
	line-height: 36px;
	color: #333;
	margin: 0;
	max-width: 1040px;
}

.ct-about .ct-about__body {
	font-family: "IBM Plex Sans", system-ui, sans-serif;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.65;
	color: #333;
	margin: 0;
	max-width: 900px;
}

/* ---------- Image placeholder (no media set) ---------- */

.ct-about__media--empty {
	display: block;
	width: 100%;
	height: 100%;
	background: repeating-linear-gradient(
		135deg,
		#2a2f33 0,
		#2a2f33 12px,
		#202428 12px,
		#202428 24px
	);
}

/* ---------- Hero ---------- */

.ct-about__hero {
	padding: 64px 0 40px;
}

/* ---------- Full-bleed band backgrounds ----------
 *
 * Band sections sit inside the theme/Elementor container, so their
 * background used to stop at the container edge — the same edge the text
 * starts at, which pinned copy against the seam. The box-shadow spread
 * paints the band color out to the viewport edges while the content stays
 * exactly where it is (in normal flow, same margins as every other
 * section); clip-path re-clips the bleed so it never affects layout or
 * scrollbars. */
.ct-about__trio,
.ct-about__values-band,
.ct-about__community {
	box-shadow: 0 0 0 100vmax #f6f6f6;
	clip-path: inset(0 -100vmax);
}

/* ---------- Service / Rental / Sales trio ---------- */

.ct-about__trio {
	background: #f6f6f6;
	padding: 56px 0;
}

.ct-about__trio-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 40px;
}

.ct-about__trio-item {
	display: flex;
	flex-direction: column;
}

/* Equal-size images across all three columns, cropped consistently. */
.ct-about__trio-media {
	position: relative;
	aspect-ratio: 4 / 3;
	background: #202428;
	overflow: hidden;
}

.ct-about .ct-about__trio-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	display: block;
}

/* Block subheadings — not the page-level H1/H2 size; ALL CAPS via CSS,
 * source stays lowercase per site convention. */
.ct-about .ct-about__trio-title {
	font-family: var(--heading-font, "Space Grotesk"), system-ui, sans-serif;
	font-weight: 900;
	font-size: 24px;
	line-height: 1.2;
	letter-spacing: normal;
	color: #1a1a1a;
	margin: 20px 0 0;
	text-transform: uppercase;
}

.ct-about .ct-about__trio-body {
	font-family: "IBM Plex Sans", system-ui, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.6;
	color: #333;
	margin: 12px 0 0;
}

/* ---------- Our Story ---------- */

.ct-about__story {
	padding: 56px 0;
}

.ct-about__story .ct-about__body {
	margin-bottom: 32px;
}

/* Full-bleed wide photo with a bottom-right caption chip. */
.ct-about__story-media {
	position: relative;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	aspect-ratio: 16 / 6;
	max-height: 520px;
	background: #202428;
	overflow: hidden;
}

.ct-about .ct-about__story-img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center center;
	display: block;
}

.ct-about .ct-about__story-caption {
	position: absolute;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	padding: 6px 10px;
	font-family: var(--e-global-typography-accent-font-family, "IBM Plex Mono"), monospace;
	font-size: 11px;
	font-weight: 500;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	background: rgba(0, 0, 0, 0.55);
}

/* ---------- Our Mission / Who We Serve (shared tint band) ---------- */

.ct-about__values-band {
	background: #f6f6f6;
	padding: 56px 0;
}

.ct-about__values-block + .ct-about__values-block {
	margin-top: 48px;
}

/* ---------- What We Believe (dark photo band) ---------- */

/* Same full-bleed treatment as the tint bands above: the dark base color
 * bleeds via box-shadow, and the photo/overlay are widened to 100vw and
 * re-centered so the whole band runs edge-to-edge while the copy keeps the
 * container's text margins. clip-path (not overflow:hidden, which would
 * clip the widened photo) bounds the bleed. */
.ct-about__believe {
	position: relative;
	padding: 64px 0;
	background: #1a1a1a;
	box-shadow: 0 0 0 100vmax #1a1a1a;
	clip-path: inset(0 -100vmax);
}

.ct-about .ct-about__believe-img {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	height: 100%;
	transform: translateX(-50%);
	object-fit: cover;
	object-position: center center;
	display: block;
}

/* Dark overlay for text contrast over the background photo. */
.ct-about__believe-overlay {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: rgba(10, 10, 10, 0.62);
}

.ct-about__believe-inner {
	position: relative;
	z-index: 2;
}

.ct-about .ct-about__believe-heading {
	color: #fff;
}

.ct-about .ct-about__believe-body {
	font-family: "IBM Plex Sans", system-ui, sans-serif;
	font-size: 18px;
	font-weight: 300;
	line-height: 1.65;
	color: #fff;
	margin: 0 0 40px;
	max-width: 720px;
}

.ct-about__believe-values {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 320px));
	gap: 28px 64px;
}

.ct-about__believe-value {
	display: flex;
	align-items: center;
	gap: 16px;
}

/* Elementor ICONS control output — a Font Awesome <i> (or inline <svg>)
 * inside the wrapper span; sized and colored white for the dark band. */
.ct-about .ct-about__believe-icon {
	width: 32px;
	height: 32px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	color: #fff;
	font-size: 26px;
	line-height: 1;
}

.ct-about .ct-about__believe-icon svg {
	width: 26px;
	height: 26px;
}

/* Some Font Awesome glyphs set fill on an inner path/g rather than (or
 * in addition to) the root svg, which blocks plain inheritance from a
 * single svg-level rule — force every painted node to the icon's color. */
.ct-about .ct-about__believe-icon svg,
.ct-about .ct-about__believe-icon svg path,
.ct-about .ct-about__believe-icon svg g {
	fill: currentColor !important;
}

.ct-about .ct-about__believe-label {
	font-family: var(--heading-font, "Space Grotesk"), system-ui, sans-serif;
	font-weight: 700;
	font-size: 20px;
	letter-spacing: normal;
	text-transform: uppercase;
	color: #fff;
}

/* ---------- Who Is Behind (team) ---------- */

.ct-about__team {
	padding: 56px 0;
}

.ct-about__team-list {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 48px;
}

/* Photo left, bio right; stacks on mobile (see responsive block). */
.ct-about__team-member {
	display: grid;
	grid-template-columns: 300px 1fr;
	gap: 40px;
	align-items: start;
}

.ct-about__team-photo-wrap {
	display: flex;
	flex-direction: column;
}

.ct-about .ct-about__team-photo {
	width: 100%;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	display: block;
	background: #202428;
}

.ct-about__team-photo-wrap .ct-about__media--empty {
	aspect-ratio: 4 / 5;
}

/* Name + title standardized as real text elements beneath the photo for
 * BOTH team members — never baked into the photo (decision D2). */
.ct-about .ct-about__team-name {
	font-family: var(--heading-font, "Space Grotesk"), system-ui, sans-serif;
	font-weight: 700;
	font-size: 22px;
	color: #F56A22;
	margin: 16px 0 0;
	text-transform: uppercase; /* source stays "Chris Gatewood", per site convention */
}

.ct-about .ct-about__team-title {
	font-family: "IBM Plex Sans", system-ui, sans-serif;
	font-weight: 400;
	font-size: 16px;
	color: #74787c;
	margin: 4px 0 0;
}

.ct-about__team-bio {
	display: flex;
	flex-direction: column;
	gap: 16px;
}

.ct-about .ct-about__team-bio-p {
	font-family: "IBM Plex Sans", system-ui, sans-serif;
	font-size: 17px;
	font-weight: 400;
	line-height: 1.65;
	color: #333;
	margin: 0;
}

/* ---------- Community Involvement ---------- */

.ct-about__community {
	background: #f6f6f6;
	padding: 56px 0 72px;
}

/* ---------- Responsive ---------- */

@media (max-width: 980px) {
	.ct-about .ct-about__h1 { font-size: 34px; }
	.ct-about .ct-about__h2 { font-size: 34px; }
	.ct-about .ct-about__hero-heading { max-width: 360px; }
	.ct-about__hero { padding: 44px 0 32px; }

	/* 3-col → single column. */
	.ct-about__trio-list { grid-template-columns: 1fr; gap: 32px; }

	.ct-about__believe-values { grid-template-columns: 1fr 1fr; gap: 24px 32px; }

	.ct-about__team-member { grid-template-columns: 220px 1fr; gap: 28px; }
}

@media (max-width: 640px) {
	/* Smaller body/lead type for narrow screens. Scoped to match the base
	 * rules' (0,2,0) specificity, or they'd lose the cascade. */
	.ct-about .ct-about__lead { font-size: 18px; line-height: 1.55; }
	.ct-about .ct-about__body,
	.ct-about .ct-about__believe-body { font-size: 16px; line-height: 1.6; }

	.ct-about .ct-about__hero-heading { max-width: 100%; }

	/* Tighter vertical rhythm. */
	.ct-about__hero { padding: 36px 0 28px; }
	.ct-about__trio { padding: 40px 0; }
	.ct-about__story { padding: 40px 0; }
	.ct-about__values-band { padding: 40px 0; }
	.ct-about__believe { padding: 44px 0; }
	.ct-about__team { padding: 40px 0; }
	.ct-about__community { padding: 40px 0 48px; }

	.ct-about__story-media { aspect-ratio: 4 / 3; max-height: none; }

	/* Team: stack photo above bio. */
	.ct-about__team-member { grid-template-columns: 1fr; }
	.ct-about__team-photo-wrap { max-width: 260px; }

	/* Belief values: single column stacked on very small screens. */
	.ct-about__believe-values { grid-template-columns: 1fr; }
}