/*
 * Home sections after the hero (HANDOFF §4). Loaded on the front page only.
 */

/* ---------- Key figures band (HANDOFF §5.6, Figma 14:112 / 67:556) ---------- */

.key-figures {
	background: var(--color-concrete);
	padding-block: var(--space-32);
}

/* Desktop: the four figures start on the 3-column lines of the 12-column grid. */
.key-figures__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	column-gap: var(--gutter);
	margin: 0;
	padding: 0;
	list-style: none;
}

.key-figure {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: var(--space-8);
	padding-block: var(--space-32);
}

.key-figure > p {
	margin: 0;
}

/* Hairlines in the middle of the gutters, as tall as the columns. */
.key-figure + .key-figure::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: calc(var(--gutter) / -2);
	width: 1px;
	background: var(--color-concrete-mid);
	transform: translateX(-50%);
}

.key-figure__value {
	position: relative;
	white-space: nowrap;
}

.key-figure__sign {
	color: var(--color-oxide);
}

/* Turkish writes the percent sign first (%100), in the figure and in its counting copy. */
.key-figure__value:lang(tr),
.key-figure__count:lang(tr) {
	display: flex;
	align-items: baseline;
}

.key-figure__sign--percent:lang(tr) {
	order: -1;
}

.key-figure__label {
	color: var(--color-steel);
	text-wrap: balance;
}

/*
 * Count-up (figures.js): an aria-hidden copy sits over the real value, which keeps its place
 * and its text for screen readers. A registered integer property, transitioned with the motion
 * tokens, drives a CSS counter; the four start --motion-stagger apart.
 */
@property --key-figure-count {
	syntax: "<integer>";
	inherits: false;
	initial-value: 0;
}

.key-figure__value.is-counting > :not(.key-figure__count) {
	opacity: 0;
}

.key-figure__count {
	position: absolute;
	top: 0;
	left: 0;
}

.key-figure__digits {
	counter-reset: key-figure var(--key-figure-count);
	transition: --key-figure-count var(--motion-count-up) var(--ease);
	transition-delay: calc(var(--i, 0) * var(--motion-stagger));
}

.key-figure__digits::before {
	content: counter(key-figure);
}

.key-figures.is-counted .key-figure__digits {
	--key-figure-count: var(--to);
}

/* Mobile: 2 × 2, one horizontal hairline across both columns between the rows (Figma 67:556). */
@media (max-width: 767px) {
	.key-figures {
		padding-block: var(--space-48);
	}

	.key-figures__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		row-gap: var(--space-32);
	}

	.key-figure {
		padding-block: 0;
	}

	.key-figure + .key-figure::before {
		content: none;
	}

	.key-figure:nth-child(3)::before {
		content: "";
		top: calc(var(--space-32) / -2);
		bottom: auto;
		left: 0;
		width: calc(200% + var(--gutter));
		height: 1px;
		transform: translateY(-50%);
	}
}

/* ---------- H.3 Founder (HANDOFF §4, §12; Figma 14:143 / 67:565) ---------- */

.founder {
	position: relative;
	overflow: hidden;
	isolation: isolate;
}

/* Desktop: the portrait in columns 1–4, the text in columns 7–12, both from the top.
   One column below 1024, portrait first (HANDOFF §8), both at the desktop text measure. */
.founder__grid {
	position: relative;
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: var(--space-48) var(--gutter);
	align-items: start;
}

/* The owner's cut-out portrait (HANDOFF §12, item 1): black and white, straight on the graphite band,
   4:5 from the top of the photo. */
.founder__portrait {
	grid-column: 1 / span 4;
}

.founder__image {
	width: 100%;
	height: auto;
	aspect-ratio: 4 / 5;
	object-fit: cover;
	object-position: top;
}

.founder__text {
	grid-column: 7 / span 6;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-48);
}

.founder__quote {
	display: flex;
	flex-direction: column;
	gap: var(--space-48);
	margin: 0;
}

.founder__blockquote {
	margin: 0;
}

.founder__attribution {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-8);
}

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

	.founder__portrait,
	.founder__text {
		grid-column: auto;
		width: 100%;
		max-width: calc((var(--layout-content) - var(--gutter)) / 2);
	}
}

@media (max-width: 767px) {
	.founder__grid,
	.founder__text,
	.founder__quote {
		gap: var(--space-24);
	}
}

/* ---------- H.4 Businesses (HANDOFF §5.7, Figma 15:154 / 67:576) ---------- */

/* The mosaic meets Our values directly (the Vitaliko line under it went on 2026-10-12). */
.businesses {
	padding-top: var(--space-section);
}

.businesses .section-heading {
	margin-bottom: var(--space-48);
}

/* Edge to edge, no gaps: Cement 2/3 and Industrial 1/3, then three thirds. Every tile keeps its
   1440 ratio (960 × 400, 480 × 400). */
.mosaic {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* The ratio is a minimum: a tile grows when its text needs more room, as with larger text spacing
   (WCAG 1.4.12), instead of cutting off its top. That takes a grid tile (as a flex row, Chrome and Firefox
   hold it to the ratio), overflow clip rather than hidden (a scroll container never grows), and stretch
   both ways: the other tile in its row grows with it, and Chrome doesn't widen a taller tile by the ratio. */
.tile {
	--facet: var(--facet-l);
	--focus-color: var(--color-white);
	position: relative;
	isolation: isolate;
	display: grid;
	place-self: stretch;
	aspect-ratio: 6 / 5;
	overflow: clip;
	color: var(--color-white);
	clip-path: polygon(0 0, calc(100% - var(--facet)) 0, 100% calc(var(--facet) * 0.57735), 100% 100%, 0 100%);
}

/* Row 1: the wide tile takes the row height set by its neighbour, so the two never differ by a rounding pixel. */
.tile--wide {
	grid-column: span 2;
	aspect-ratio: auto;
}

.tile picture,
.tile__image {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

.tile__image {
	object-fit: cover;
	transition: transform var(--motion-hover-duration) var(--ease);
}

/*
 * The tile fade (HANDOFF §3): graphite from the lower left, so the white labels read. When the
 * list opens a second layer fades in over it, so the fade deepens behind the company names. The
 * stops are set so every label passes WCAG AA on these photos at 375–1440 (name 3:1, count and
 * companies 4.5:1, measured under each line); re-check when a tile image changes.
 */
.tile::before,
.tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
}

.tile::before {
	background: linear-gradient(
		15deg,
		color-mix(in srgb, var(--color-graphite) 90%, transparent) 0%,
		color-mix(in srgb, var(--color-graphite) 70%, transparent) 35%,
		transparent 80%
	);
}

.tile::after {
	background: linear-gradient(
		15deg,
		color-mix(in srgb, var(--color-graphite) 85%, transparent) 0%,
		color-mix(in srgb, var(--color-graphite) 70%, transparent) 50%,
		color-mix(in srgb, var(--color-graphite) 50%, transparent) 100%
	);
	opacity: 0;
	transition: opacity var(--motion-hover-duration) var(--ease);
}

.tile__content {
	position: relative;
	z-index: 2;
	display: grid;
	align-content: end;
	justify-items: start;
	width: 100%;
	padding: var(--space-32);
}

/* The label (name and count) and the company list share one cell at the bottom of the tile: when the tile
   opens, the label fades out and the list takes its place (the owner's request of 2026-10-09). The cell is as
   tall as the taller of the two, so the tile still grows when the list needs more room. The name stays in
   the page for screen readers and heading navigation. */
.tile__label,
.tile__companies {
	grid-area: 1 / 1;
	align-self: end;
}

.tile__label {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-8);
	transition:
		opacity var(--motion-hover-duration) var(--ease),
		transform var(--motion-hover-duration) var(--ease);
}

.tile__name {
	color: var(--color-white);
}

.tile__count {
	color: var(--color-concrete-mid);
}

/* The company list: hidden (but still in the tab order) until the tile opens. */
.tile__companies {
	display: flex;
	flex-direction: column;
	opacity: 0;
	transform: translateY(var(--space-16));
	pointer-events: none;
	transition:
		opacity var(--motion-hover-duration) var(--ease),
		transform var(--motion-hover-duration) var(--ease);
}

.tile__company {
	color: var(--color-white);
	text-decoration: none;
}

a.tile__company:hover {
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}

/* The companies' logos (the owner's request of 2026-10-09; @logo in index.html), white over the tile's fade.
   Sized by area rather than height, so a wide wordmark and a square mark look equally large: a 3:1 logo is
   48 high from 1280 (40 from 1024, 32 below), others √(3 / ratio) times that, kept between 0.75 and 1.75
   times; 32 apart (16 below 1280), so the five in the Cement tile fit its height at every width. A hovered logo
   zooms as the tile's image does, in place of the underline. */
.tile__companies:has(.tile__logo) {
	gap: var(--space-32);
}

.tile__company:has(.tile__logo) {
	display: inline-flex;
	align-items: center;
	gap: var(--space-8);
}

a.tile__company:has(.tile__logo):hover {
	text-decoration: none;
}

.tile__logo {
	--logo-base: var(--space-48);
	display: block;
	width: auto;
	height: var(--logo-base);
	height: clamp(calc(var(--logo-base) * 0.75), calc(var(--logo-base) * sqrt(3 / var(--logo-ratio, 3))), calc(var(--logo-base) * 1.75));
	transform-origin: left center;
	transition: transform var(--motion-hover-duration) var(--ease);
}

a.tile__company:hover .tile__logo {
	transform: scale(var(--motion-hover-zoom));
}

@media (max-width: 1279px) {
	.tile__companies:has(.tile__logo) {
		gap: var(--space-16);
	}

	.tile__logo {
		--logo-base: calc(var(--space-32) + var(--space-8));
	}
}

@media (max-width: 1023px) {
	.tile__companies:has(.tile__logo) {
		gap: var(--space-16);
	}

	.tile__logo {
		--logo-base: var(--space-32);
	}
}

/* Open: hover (mouse), focus inside (keyboard), or .is-open (first tap, tiles.js). */
.tile:is(:focus-within, .is-open)::after {
	opacity: 1;
}

.tile:is(:focus-within, .is-open) .tile__image {
	transform: scale(var(--motion-hover-zoom));
}

.tile:is(:focus-within, .is-open) .tile__companies {
	opacity: 1;
	transform: none;
	pointer-events: auto;
}

.tile:is(:focus-within, .is-open) .tile__label {
	opacity: 0;
	transform: translateY(calc(var(--space-16) * -1));
}

@media (hover: hover) {
	.tile:hover::after {
		opacity: 1;
	}

	.tile:hover .tile__image {
		transform: scale(var(--motion-hover-zoom));
	}

	.tile:hover .tile__companies {
		opacity: 1;
		transform: none;
		pointer-events: auto;
	}

	.tile:hover .tile__label {
		opacity: 0;
		transform: translateY(calc(var(--space-16) * -1));
	}
}

@media (prefers-reduced-motion: reduce) {
	.tile .tile__image {
		transform: none !important;
	}
}

/* Tablet: Cement full width, then the other four 2 × 2. */
@media (max-width: 1023px) {
	.mosaic {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}

	.tile--wide {
		grid-column: 1 / -1;
		aspect-ratio: 12 / 5;
	}
}

/* Mobile: one column of 375 × 300 tiles, 8 apart, full bleed. */
@media (max-width: 767px) {
	.mosaic {
		grid-template-columns: minmax(0, 1fr);
		gap: var(--space-8);
	}

	.tile,
	.tile--wide {
		grid-column: auto;
		aspect-ratio: 5 / 4;
	}
}

/* ---------- H.5 Our values (HANDOFF §4, §5.8; Figma 15:227 / 67:595) ---------- */

/* Option C (the owner's choice of 2026-10-11): on concrete, the heading, then the three statements three across
   (one column below 1024, at the text measure); then a graphite band with the six pillars in one row (3 × 2
   below 1024, 2 × 3 on phones) and the strategy paragraph centred under them. */
.values__intro .container {
	display: flex;
	flex-direction: column;
	gap: var(--space-48);
}

.values__statements {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: var(--space-24) var(--gutter);
}

.values__statement {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: var(--space-16);
}

.values__band .container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-64);
}

.pillars {
	display: grid;
	grid-template-columns: repeat(6, minmax(0, 1fr));
	gap: var(--space-32) var(--gutter);
	width: 100%;
}

.pillar {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--space-16);
	text-align: center;
}

.pillar__cell {
	flex: none;
}

/* White, not the band's concrete-mid eyebrows: the labels are the band's content. */
.values__band .pillar__label {
	color: var(--color-white);
	text-wrap: balance;
}

.values__strategy {
	max-width: calc((var(--layout-content) + var(--gutter)) * 8 / 12 - var(--gutter));
	text-align: center;
}

@media (max-width: 1023px) {
	.values__statements {
		grid-template-columns: minmax(0, 1fr);
		max-width: calc((var(--layout-content) - var(--gutter)) / 2);
	}

	.pillars {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}
}

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

	.pillars {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ---------- H.6 Our approach teaser, "CRM" until 2026-10-09 (HANDOFF §4, Figma 15:262 / 67:620) ---------- */

/* A slim band: 96 above and below on desktop, 72 on mobile (the section padding, capped at 96). */
.crm-teaser {
	padding-block: min(var(--space-96), var(--space-section));
}

.crm-teaser__inner {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	gap: var(--space-48);
}

@media (max-width: 767px) {
	.crm-teaser__inner {
		flex-direction: column;
		align-items: flex-start;
		gap: var(--space-24);
	}
}

/* ---------- H.7 Value cards (HANDOFF §5.9, Figma 15:270 / 67:624) ---------- */

/* 4 in a row, equal height, from 1280; 2 × 2 below that; one column on mobile, 16 apart (the gutter). Four
   in a row below 1280 leave a card 148–200 px for its text: too narrow for the longest headings (Turkish
   Sürdürülebilirlik, Greek Διαφορετικότητα ran up to the card's border at 1024). */
.value-cards__list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--gutter);
}

/* The text spans the card's width, so a word too long for it (larger text spacing) breaks at the card's
   padding (body, overflow-wrap) instead of running on under the next card. */
.value-card {
	display: flex;
	flex-direction: column;
	gap: var(--space-24);
}

.value-card__icon {
	display: block;
	line-height: 0;
}

@media (max-width: 1279px) {
	.value-cards__list {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

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