/*
 * Our approach, "CRM" until 2026-10-09 (HANDOFF §4 C.2–C.4, §5.11; Figma 19:210, 19:244, 19:219 / 68:1078, 68:1084,
 * 68:1088). Loaded on /our-approach/ only; the class names keep "crm". The hero is hero.css (.hero--page); Our
 * customer relations department is the split layout in theme.css.
 */

/* ---------- C.2 Our customer philosophy ---------- */

/* Since 2026-10-11 a split with the image left: the 4:5 image with Facet l in columns 1–5, the H2 and the three
   paragraphs in columns 7–12, centred against it (H2 to text 48, paragraphs 24 apart). Below 1024 one column, text
   first (HANDOFF §8), both at the split measure (628 at 1440); 24 under the H2 on mobile (Figma 68:1078). */
.philosophy__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--space-48) var(--gutter);
	align-items: center;
}

.philosophy__media {
	grid-column: 1 / span 5;
	grid-row: 1;
}

.philosophy__image {
	--facet: var(--facet-l);
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
}

.philosophy__text {
	grid-column: 7 / span 6;
	grid-row: 1;
	display: flex;
	flex-direction: column;
	gap: var(--space-48);
}

.philosophy__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

@media (max-width: 1023px) {
	.philosophy__grid {
		grid-template-columns: minmax(0, 1fr);
	}

	.philosophy__media,
	.philosophy__text {
		grid-column: auto;
		grid-row: auto;
		max-width: calc((var(--layout-content) - var(--gutter)) / 2);
	}

	.philosophy__media {
		order: 1;
		width: 100%;
	}
}

@media (max-width: 767px) {
	.philosophy__text {
		gap: var(--space-24);
	}
}

/* ---------- C.3 Customer relationship management activities ---------- */

/* The text block, then the image 64 below (48 on phones). The H2 is 7 columns at most; the paragraphs run across the
   full content width, as in Figma. */
.activities__inner {
	display: flex;
	flex-direction: column;
	gap: var(--space-64);
}

/* The H2, then the paragraphs (16 apart, as in the other sections' text blocks), 48 apart; the image 64 below. */
.activities__text {
	display: flex;
	flex-direction: column;
	gap: var(--space-48);
}

.activities__body {
	display: flex;
	flex-direction: column;
	gap: var(--space-16);
}

/* The wide image (the owner's of 2026-10-12): the full content width, 21:9 with Facet l, cropped near the top to
   keep the specialist's head; 16:9 (the whole image) on phones. */
.activities__image {
	--facet: var(--facet-l);
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 21 / 9;
	object-fit: cover;
	object-position: 50% 12%;
}

@media (max-width: 767px) {
	.activities__inner {
		gap: var(--space-48);
	}

	.activities__image {
		aspect-ratio: 16 / 9;
	}
}

/* ---------- C.4 Our customer relations department ---------- */

/* The second paragraph and the button, 32 apart. On mobile the text and the diagram stay 48 apart. */
.crm-system__cta {
	align-self: stretch;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-32);
}

@media (max-width: 767px) {
	.crm-system .split,
	.crm-system .split__text {
		gap: var(--space-48);
	}
}

/*
 * The diagram (HANDOFF §5.11, Figma 19:227), centred in columns 8–12, below the text on mobile:
 * Our companies, a 96 Cell, a 48 line, the 24 oxide CRM node with its label, another 48 line, a second
 * Cell, Our customers. The labels are text (Eyebrow, graphite); the shapes are decorative. Figma's 12 px
 * between a label and its Cell maps to 16.
 */
.crm-diagram {
	display: flex;
	flex-direction: column;
	align-items: center;
}

.crm-diagram__label:first-child {
	margin-bottom: var(--space-16);
}

.crm-diagram__label:last-child {
	margin-top: var(--space-16);
}

.crm-diagram__node {
	width: var(--space-24);
	height: var(--space-24);
	margin-bottom: var(--space-8);
	background: var(--color-oxide);
}

.crm-diagram__label--node {
	margin-bottom: var(--space-8);
}

.crm-diagram__line {
	width: 2px;
	height: var(--space-48);
	background: var(--color-graphite);
}

/* Both lines draw toward the node (line-draw) when the diagram comes into view: the upper one down from
   its Cell, the lower one up from its Cell. Transform only; none with reduced motion. */
@media (prefers-reduced-motion: no-preference) {
	.crm-diagram__line--down {
		transform-origin: center top;
	}

	.crm-diagram__line--up {
		transform-origin: center bottom;
	}

	.motion-ready .crm-diagram__line {
		transition: transform var(--motion-line-draw) var(--ease);
	}

	.motion-ready .connect:not(.is-visible) .crm-diagram__line {
		transform: scaleY(0);
	}
}