/*
zprime company page, below the fold. Loaded only on this page, after style.css.
The photographic opening and the intro band are above it and live in
css/critical-etairia.css, inlined — do not look for them here.
*/

/*--------------------------------------------------------------
# Stats
--------------------------------------------------------------*/

/* Built on the same logic as .intro__stats on the front page: one row that stays
one row, a variable carrying the space the rules are positioned by, and a fall to
two columns only at the last breakpoint.

Two things differ, both from the design rather than from preference. The row spans
the content width instead of being centred, so the tracks are equal fractions and
not content-sized. And the rule sits on the track boundary with the figure inset
past it, rather than centred in a gap — measured off the export, where the rules
are 307px apart and every figure begins 44px after one.

The inset cannot be straight proportion, for the same reason the front page's gap
cannot: the labels floor and stop shrinking, so an inset taking its full share
would squeeze the tracks until ISO 9001 broke in two. It runs on a line to 14px at
999 — narrowing faster than the page — while above the reference the two meet at
1728 and proportion takes over. */
.etairia-stats {
	--stat-inset: max(0.5rem, min(2.5463vw, 4.1152vw - 27.11px)); /* 44px at 1728, 14px at 999, 8px floor */

	display: grid;
	grid-template-columns: repeat(5, 1fr);
	padding-inline: var(--zp-pad);
	padding-block: max(2rem, 2.8935vw); /* 50px at 1728 */
	background-color: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--condensed);
	font-weight: 700;
}

.etairia-stats__item {
	position: relative;
	min-width: 0;
}

/* Every item after the first carries the rule on its own leading edge and insets
its content past it. Top to bottom of the item, as on the front page, so the rules
all end together however many lines a label takes. */
.etairia-stats__item + .etairia-stats__item {
	padding-left: var(--stat-inset);
}

.etairia-stats__item + .etairia-stats__item::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	background-color: var(--wp--preset--color--ink);
}

/* Size and the negative tracking are the front page's own measured figures — one
set of numbers for one component, rather than two that have to be kept in step.
Held on one line: broken across two, ISO 9001 stops reading as one thing. */
.etairia-stats__value {
	margin: 0;
	font-size: max(1.5rem, 13.6px + 2.1652vw, 2.9514vw); /* 51px at 1728, 24px at 481 */
	font-stretch: 75%;
	line-height: 1;
	letter-spacing: -0.05em;
	white-space: nowrap;
}

/* Allowed to wrap, unlike the front page's: the design already breaks the longest
of these over two lines at full width. */
.etairia-stats__label {
	margin: max(0.375rem, 0.5208vw) 0 0; /* 9px at 1728 */
	font-size: max(0.75rem, 0.65rem + 0.2083vw, 0.8102vw); /* 14px at 1728, 12px at 768 */
	font-stretch: 75%;
	line-height: 1.4286; /* 20px at 14px */
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/*--------------------------------------------------------------
# Η διαδρομή μας
--------------------------------------------------------------*/

/* Padding is deliberately lopsided — 120px above, 45px below. The band that
follows is a full-bleed photograph, which needs no air between it and this. */
.etairia-diadromi {
	padding-inline: var(--zp-pad);
	padding-block: max(3rem, 6.9444vw) max(1.5rem, 2.6042vw); /* 120px / 45px at 1728 */
	background-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
}

/* Same construction as the intro's heading — family, weight and case from
theme.json, only size and leading restated, and the rule under it is its own bottom
border. This one spans the full content width, where the intro's stopped at its
column, because that is the width it is drawn at. */
.etairia-diadromi__title {
	margin: 0;
	padding-bottom: max(1.25rem, 2.0255vw); /* 35px at 1728 */
	border-bottom: 1px solid var(--wp--preset--color--ink);
	font-size: max(1.75rem, 0.65rem + 2.2917vw, 2.8935vw); /* 50px at 1728, 28px at 768 */
	line-height: 1.18;
	letter-spacing: 0.02em;
}

/* Two equal columns with the design's 94px gutter. align-items: start so the text
keeps its own height rather than stretching to the picture beside it. */
.etairia-diadromi__entry {
	display: grid;
	grid-template-columns: 1fr 1fr;
	align-items: start;
	column-gap: max(1.5rem, 5.4398vw); /* 94px at 1728 */
	margin-top: max(2rem, 4.6296vw); /* 80px at 1728 */
}

.etairia-diadromi__entry > * {
	min-width: 0;
}

/* The sides alternate. Counted by type rather than carried by a modifier class in
the markup: the section's only other child is the h2, so nth-of-type across the divs
is exactly the entry number, and the markup stays identical for all four. */
.etairia-diadromi__entry:nth-of-type(even) .etairia-diadromi__text {
	grid-column: 2;
	grid-row: 1;
}

.etairia-diadromi__entry:nth-of-type(even) .etairia-diadromi__media {
	grid-column: 1;
	grid-row: 1;
}

/* The rule caps the text column only. The picture opposite begins on the same line,
so the pair already reads as one row without a rule of its own. */
.etairia-diadromi__text {
	padding-top: max(1rem, 1.7361vw); /* 30px at 1728 */
	border-top: 1px solid var(--wp--preset--color--ink);
}

/* Black, and set in Open Sans unstretched rather than the condensed face theme.json
gives every heading. Measured: the digits advance 48px against a 69px cap, which is
96px unstretched pulled in by 0.05em — the same negative tracking the theme uses on
large figures. The condensed face would need 131px to advance that far. */
.etairia-diadromi__year {
	margin: 0;
	color: var(--wp--preset--color--ink);
	font-family: var(--wp--preset--font-family--sans);
	font-size: max(3rem, 0.6rem + 5vw, 5.5556vw); /* 96px at 1728, 48px at 768 */
	font-stretch: 100%;
	line-height: 1;
	letter-spacing: -0.05em;
	text-transform: none;
}

/* Unstretched too — 30 characters measuring 322px at 18px rules out the condensed
face, which would come to about 253. */
.etairia-diadromi__lead {
	margin: max(0.75rem, 1.2731vw) 0 0; /* 22px at 1728 */
	font-family: var(--wp--preset--font-family--sans);
	font-size: max(0.9375rem, 0.7875rem + 0.3125vw, 1.0417vw); /* 18px at 1728, 15px at 768 */
	font-weight: 700;
	font-stretch: 100%;
	line-height: 1;
	text-transform: uppercase;
}

.etairia-diadromi__body {
	margin: max(0.5rem, 0.8102vw) 0 0; /* 14px at 1728 */
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw); /* 16px at 1728, 14px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.75; /* 28px at 16px */
	letter-spacing: 0.05em;
}

/* Core's image block ships a figure margin and style.css adds another. */
.etairia-diadromi__media {
	margin: 0;
}

.etairia-diadromi__media img {
	display: block;
	width: 100%;
	height: auto;
}

/*--------------------------------------------------------------
# Narrow
--------------------------------------------------------------*/

/* One column. The placement is reset with it, so every entry reads in document
order — words, then picture. Alternating sides separates nothing once there is only
one column to sit in. */
@media (max-width: 998px) {

	.etairia-diadromi__entry {
		grid-template-columns: 1fr;
		row-gap: max(1rem, 3vw);
	}

	.etairia-diadromi__entry:nth-of-type(even) .etairia-diadromi__text,
	.etairia-diadromi__entry:nth-of-type(even) .etairia-diadromi__media {
		grid-column: 1;
		grid-row: auto;
	}
}

/* Two columns, as the front page does at this width and for the same reason: held
in one row the tracks would be narrower than ISO 9001 set on a single line.

The rules before the third and the fifth are dropped — with two columns those two
items begin a row, and a rule on a row's first item separates nothing. */
@media (max-width: 480px) {

	.etairia-stats {
		--stat-inset: 1.5rem;

		grid-template-columns: repeat(2, 1fr);
		row-gap: max(1.5rem, 5vw);
	}

	.etairia-stats__item:nth-child(odd) {
		padding-left: 0;
	}

	.etairia-stats__item:nth-child(odd)::before {
		content: none;
	}
}

/*--------------------------------------------------------------
# Όλα γίνονται εδώ
--------------------------------------------------------------*/

/* A full-bleed photograph with a plate over its foot. No padding on the band: the
picture reaches both edges, and the inset lives on the plate instead. The band takes
its height from the picture's own ratio, so nothing has to be declared twice. */
.etairia-ola {
	position: relative;
}

.etairia-ola__media {
	margin: 0;
}

.etairia-ola__media img {
	display: block;
	width: 100%;
	height: auto;
}

/* Flush to the foot of the band and inset by the page padding, so its left edge
lines up with every other section's content. 63px of padding on all four sides —
the same figure the contact form's plate uses, which makes it a design-system value
rather than a measurement that happens to land there. */
.etairia-ola__card {
	position: absolute;
	bottom: 0;
	left: var(--zp-pad);
	max-width: max(20rem, 43.9815vw); /* 760px at 1728 */
	padding: max(1.25rem, 3.6458vw); /* 63px at 1728 */
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--muted);
}

/* Family, weight and case from theme.json; only size, leading and tracking are
restated, as in every other heading on this page. No rule under this one. */
.etairia-ola__title {
	margin: 0;
	font-size: max(1.75rem, 0.65rem + 2.2917vw, 2.8935vw); /* 50px at 1728, 28px at 768 */
	line-height: 1.18;
	letter-spacing: 0.02em;
}

.etairia-ola__body {
	margin: max(1rem, 1.5625vw) 0 0; /* 27px at 1728 */
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw); /* 16px at 1728, 14px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.75; /* 28px at 16px */
	letter-spacing: 0.05em;
}

/* The picture is 3.32:1, so on a phone it is barely 110px tall while the plate is
nearer 300 — over the band it would cover the photograph and spill past it. Below the
plate instead, where it reads as a caption to it. */
@media (max-width: 998px) {

	.etairia-ola__card {
		position: static;
		max-width: none;
	}
}

/*--------------------------------------------------------------
# What we do — 01 / 02 / 03
--------------------------------------------------------------*/

/* Three equal columns with the design's 63px gutters. Shares the band below it, so
its bottom padding is the air between the two and the mosaic adds none of its own. */
.etairia-scope {
	counter-reset: scope;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
	column-gap: max(1.5rem, 3.6458vw); /* 63px at 1728 */
	padding-inline: var(--zp-pad);
	padding-block: max(3rem, 7.7546vw) max(2rem, 4.7454vw); /* 134px / 82px at 1728 */
	background-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
}

.etairia-scope__item {
	min-width: 0;
	padding-top: max(1rem, 1.8519vw); /* 32px at 1728 */
	border-top: 1px solid var(--wp--preset--color--ink);
}

/* The ordinals are generated rather than written. They are position markers, not
content — nothing in the markup to keep in sequence, and a fourth column would
number itself. decimal-leading-zero is what gives 01 rather than 1.

Drawn in #a1a1a1, which is 1.83:1 on this background and fails by a wide margin, so
it takes muted like the intro's labels did. That makes it the same colour as the
title below it; the hierarchy is carried by size instead. */
.etairia-scope__item::before {
	counter-increment: scope;
	content: counter(scope, decimal-leading-zero);
	display: block;
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.75rem, 0.65rem + 0.2083vw, 0.8102vw); /* 14px at 1728, 12px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1;
	letter-spacing: 0.05em;
}

/* Open Sans unstretched — 27 characters measuring 307px at 18px is 0.63em each,
which is the unstretched face; the condensed one would come to about 228. */
.etairia-scope__title {
	margin: max(0.75rem, 1.2731vw) 0 0; /* 22px at 1728 */
	font-family: var(--wp--preset--font-family--sans);
	font-size: max(0.9375rem, 0.7875rem + 0.3125vw, 1.0417vw); /* 18px at 1728, 15px at 768 */
	font-weight: 700;
	font-stretch: 100%;
	line-height: 1;
	letter-spacing: normal;
	text-transform: uppercase;
}

.etairia-scope__body {
	margin: max(0.5rem, 0.6366vw) 0 0; /* 11px at 1728 */
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw); /* 16px at 1728, 14px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.75; /* 28px at 16px */
	letter-spacing: 0.05em;
}

/*--------------------------------------------------------------
# Mosaic
--------------------------------------------------------------*/

/* Two structures that share no grid: the top is 878 : 625 with a 34px gutter, the
bottom is three equal 496s with 24px ones. No track count divides both, so the bottom
three live in their own row spanning the full width and the other three place
directly — one wrapper rather than two.

No top padding: the section above it carries the air between them, and both sit on
the same field so the join is invisible. */
.etairia-mosaic {
	display: grid;
	grid-template-columns: 878fr 625fr;
	column-gap: max(1rem, 1.9676vw); /* 34px at 1728 */
	row-gap: max(0.75rem, 1.3889vw); /* 24px at 1728 */
	padding-inline: var(--zp-pad);
	padding-block: 0 max(3rem, 7.2338vw); /* 125px at 1728 */
	background-color: var(--wp--preset--color--border);
}

.etairia-mosaic > *,
.etairia-mosaic__row > * {
	margin: 0;
	min-width: 0;
}

/* Spans both rows of the stack beside it. No ratio of its own: filling the area the
two side images define makes the heights agree exactly rather than to within a pixel. */
.etairia-mosaic__wide {
	grid-column: 1;
	grid-row: 1 / span 2;
}

.etairia-mosaic__wide img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* 625 x 281 as drawn. These two set the row heights, and 281 + 24 + 281 = 586 against
the wide image's own 585 — which is how we know the reading is right. */
.etairia-mosaic__side {
	grid-column: 2;
	aspect-ratio: 625 / 281;
}

.etairia-mosaic__row {
	display: grid;
	grid-column: 1 / -1;
	grid-template-columns: repeat(3, 1fr);
	gap: max(0.75rem, 1.3889vw); /* 24px at 1728 */
}

.etairia-mosaic__cell {
	aspect-ratio: 3 / 2; /* 496 x 331 as drawn */
}

/* Every slot is a fixed shape and the sources are 1.83:1, so all of them crop. */
.etairia-mosaic__side img,
.etairia-mosaic__cell img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*--------------------------------------------------------------
# Narrow — scope and mosaic
--------------------------------------------------------------*/

@media (max-width: 998px) {

	/* Three columns leave about 277px each here and keep shrinking; stacked, each
	item keeps its own rule and reads as its own block. */
	.etairia-scope {
		grid-template-columns: 1fr;
		row-gap: max(1.5rem, 5vw);
	}

	/* The mosaic's two structures both collapse to one column. The wide image stops
	spanning, since there is no stack beside it to span. */
	.etairia-mosaic {
		grid-template-columns: 1fr;
	}

	.etairia-mosaic__wide {
		grid-row: auto;
		aspect-ratio: 3 / 2;
	}

	.etairia-mosaic__side {
		grid-column: 1;
	}

	.etairia-mosaic__row {
		grid-template-columns: 1fr;
	}
}

/*--------------------------------------------------------------
# Πιστοποιημένη ποιότητα
--------------------------------------------------------------*/

/* 601 : 840 of the content row with the same 95px gutter the intro band uses — two
independently measured sections landing on it makes 95 the design's gutter rather
than a coincidence. Three children, no fourth wrapper: the link places itself in the
second column below the cards. */
.etairia-cert {
	display: grid;
	grid-template-columns: 601fr 840fr;
	align-items: start;
	column-gap: max(1.5rem, 5.4977vw); /* 95px at 1728 */
	padding-inline: var(--zp-pad);
	padding-block: max(3rem, 6.9444vw); /* 120px at 1728 */
	background-color: var(--wp--preset--color--surface-alt);
	color: var(--wp--preset--color--muted);
}

.etairia-cert > * {
	min-width: 0;
}

/* The rule is the heading's own bottom border, so it ends where the column ends. */
.etairia-cert__title {
	margin: 0;
	padding-bottom: max(1.25rem, 2.0255vw); /* 35px at 1728 */
	border-bottom: 1px solid var(--wp--preset--color--ink);
	font-size: max(1.75rem, 0.65rem + 2.2917vw, 2.8935vw); /* 50px at 1728, 28px at 768 */
	line-height: 1.18; /* 59px at 50px */
	letter-spacing: 0.02em;
}

.etairia-cert__lead {
	margin: max(1.25rem, 2.0255vw) 0 0; /* 35px at 1728 */
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw); /* 16px at 1728, 14px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.75; /* 28px at 16px */
	letter-spacing: 0.05em;
}

/* Two by two. Rows size themselves, so both cards in a row match the taller of the
pair — which is why the second row is 208 where the first is 180. */
.etairia-cert__cards {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: max(0.75rem, 1.3889vw); /* 24px at 1728 */
	row-gap: max(1rem, 1.5046vw); /* 26px at 1728 */
}

/* 44px on all four sides. The card's height falls out of it rather than being set:
44 + 18 title + 18 + 56 body + 44 comes to the 180 measured, and the same figures
give 208 for the three-line card. Nothing here declares a height. */
.etairia-cert__card {
	padding: max(1rem, 2.5463vw); /* 44px at 1728 */
	background-color: var(--wp--preset--color--base);
}

.etairia-cert__card-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: max(0.9375rem, 0.7875rem + 0.3125vw, 1.0417vw); /* 18px at 1728, 15px at 768 */
	font-weight: 700;
	font-stretch: 100%;
	line-height: 1;
	letter-spacing: normal;
	text-transform: uppercase;
}

.etairia-cert__card-body {
	margin: max(0.75rem, 1.0417vw) 0 0; /* 18px at 1728 */
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw); /* 16px at 1728, 14px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.75; /* 28px at 16px */
	letter-spacing: 0.05em;
}

/* Second column, below the cards — placed rather than wrapped, so it lines up with
their left edge for free. */
.etairia-cert__more {
	grid-column: 2;
	margin: max(1.5rem, 2.7778vw) 0 0; /* 48px at 1728 */
}

/* Same construction as ΟΔΗΓΙΕΣ ΠΡΟΣΒΑΣΗΣ on the contact page, down to the shared
arrow and the 6px nudge the design system specifies for these. */
.etairia-cert__more a {
	display: inline-flex;
	align-items: center;
	gap: max(1rem, 2.3148vw); /* 40px at 1728 */
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: max(0.9375rem, 0.7875rem + 0.3125vw, 1.0417vw); /* 18px at 1728 */
	font-weight: 700;
	font-stretch: 100%;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

.etairia-cert__more a::after {
	content: "";
	flex: none;
	width: max(2rem, 2.8935vw); /* 50px at 1728 */
	aspect-ratio: 75 / 42;
	background-color: currentcolor;
	mask-image: var(--zp-arrow);
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	transition: transform var(--zp-motion);
}

.etairia-cert__more a:hover::after,
.etairia-cert__more a:focus-visible::after {
	transform: translateX(max(6px, 0.3472vw));
}

/*--------------------------------------------------------------
# Narrow — certification
--------------------------------------------------------------*/

@media (max-width: 998px) {

	/* One column. The link is no longer placed into a second track, so its column
	assignment has to go with it or it lands in a track that does not exist. */
	.etairia-cert {
		grid-template-columns: 1fr;
		row-gap: max(1.5rem, 5vw);
	}

	.etairia-cert__more {
		grid-column: 1;
	}
}

@media (max-width: 479px) {

	/* Two cards side by side leave about 150px each once the 44px padding is taken
	off both edges, which is narrower than "Σήμανση CE (EN 14351-1)" can set. */
	.etairia-cert__cards {
		grid-template-columns: 1fr;
	}
}

/*--------------------------------------------------------------
# ALUMIL
--------------------------------------------------------------*/

/* The one section on this page that is not symmetrically inset: the photograph runs
off the right edge, so there is padding on the left and none on the right. The tracks
and the gutter close on the page exactly — 100 padding + 770 text + 95 gutter + 763
picture = 1728 — and that 95 is the third independent appearance of the same gutter,
after the intro band and the certification one.

Vertical padding sits on the text column rather than the section, so the picture
spans the full height as drawn instead of being inset from it. */
.etairia-alumil {
	display: grid;
	grid-template-columns: 770fr 763fr;
	column-gap: max(1.5rem, 5.4977vw); /* 95px at 1728 */
	padding-left: var(--zp-pad);
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--muted);
}

.etairia-alumil > * {
	min-width: 0;
}

.etairia-alumil__text {
	padding-block: max(2.5rem, 5.5556vw); /* 96px at 1728 */
}

/* 200px is the logo's own width, and it is an SVG, so this is a display size rather
than a resolution decision. */
.etairia-alumil__logo {
	width: max(7.5rem, 11.574vw); /* 200px at 1728 */
	margin: 0;
}

.etairia-alumil__logo img {
	display: block;
	width: 100%;
	height: auto;
}

.etairia-alumil__title {
	margin: max(1.5rem, 2.5463vw) 0 0; /* 44px at 1728 */
	font-size: max(1.75rem, 0.65rem + 2.2917vw, 2.8935vw); /* 50px at 1728, 28px at 768 */
	line-height: 1.18; /* 59px at 50px */
	letter-spacing: 0.02em;
}

/* First paragraph clears the heading by 34, the second follows the first by 20 —
both measured, and the difference is the design's, not an accident. */
.etairia-alumil__body {
	margin: max(0.75rem, 1.1574vw) 0 0; /* 20px at 1728 */
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw); /* 16px at 1728, 14px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.75; /* 28px at 16px */
	letter-spacing: 0.05em;
}

.etairia-alumil__title + .etairia-alumil__body {
	margin-top: max(1.25rem, 1.9676vw); /* 34px at 1728 */
}

.etairia-alumil__more {
	margin: max(1.5rem, 2.5463vw) 0 0; /* 44px at 1728 */
}

/* Same construction as the certification link and ΟΔΗΓΙΕΣ ΠΡΟΣΒΑΣΗΣ — shared arrow,
shared 6px nudge. */
.etairia-alumil__more a {
	display: inline-flex;
	align-items: center;
	gap: max(1rem, 2.3148vw); /* 40px at 1728 */
	color: var(--wp--preset--color--muted);
	font-family: var(--wp--preset--font-family--sans);
	font-size: max(0.9375rem, 0.7875rem + 0.3125vw, 1.0417vw); /* 18px at 1728 */
	font-weight: 700;
	font-stretch: 100%;
	line-height: 1;
	text-decoration: none;
	text-transform: uppercase;
}

.etairia-alumil__more a::after {
	content: "";
	flex: none;
	width: max(2rem, 2.8935vw); /* 50px at 1728 */
	aspect-ratio: 75 / 42;
	background-color: currentcolor;
	mask-image: var(--zp-arrow);
	mask-position: center;
	mask-size: contain;
	mask-repeat: no-repeat;
	transition: transform var(--zp-motion);
}

.etairia-alumil__more a:hover::after,
.etairia-alumil__more a:focus-visible::after {
	transform: translateX(max(6px, 0.3472vw));
}

/* Fills the row rather than carrying a ratio: at the reference the picture is 678
tall and the text column comes to 668, so pinning a ratio would have the two fight
over ten pixels at every width. Letting the text set the height and the picture cover
it keeps them agreeing at all of them. */
.etairia-alumil__media {
	margin: 0;
}

.etairia-alumil__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/*--------------------------------------------------------------
# Narrow — ALUMIL
--------------------------------------------------------------*/

/* One column, and the right-hand padding comes back: with the picture below the text
rather than beside it, bleeding off one edge only would look like a mistake. */
@media (max-width: 998px) {

	.etairia-alumil {
		grid-template-columns: 1fr;
		padding-inline: var(--zp-pad);
	}

	.etairia-alumil__text {
		padding-block: max(1.5rem, 5vw) max(2.5rem, 8vw);
	}

	/* Out past the section padding so it still reaches both edges, and back to its
	own ratio now that there is no text column setting the height.

	order, not a change of markup: the picture leads visually while the document still
	reads words first, which is the better order for anyone not looking at it. */
	.etairia-alumil__media {
		order: -1;
		width: calc(100% + var(--zp-pad) * 2);
		margin-inline: calc(var(--zp-pad) * -1);
	}

	.etairia-alumil__media img {
		height: auto;
	}
}

/*--------------------------------------------------------------
# Από τη συμβουλή μέχρι τη συντήρηση
--------------------------------------------------------------*/

/* Three columns with the design's 43px gutters. The heading and the lead span all
three rather than sitting in a wrapper of their own, so the section is the grid and
the six steps flow straight into it. */
.etairia-steps {
	counter-reset: step;
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	align-items: start;
	column-gap: max(1rem, 2.4884vw); /* 43px at 1728 */
	row-gap: max(1.5rem, 2.3727vw); /* 41px at 1728 */
	padding-inline: var(--zp-pad);
	padding-block: max(3rem, 6.9444vw); /* 120px at 1728 */
	background-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
}

.etairia-steps > * {
	min-width: 0;
}

.etairia-steps__title {
	grid-column: 1 / -1;
	margin: 0;
	padding-bottom: max(1.25rem, 2.0255vw); /* 35px at 1728 */
	border-bottom: 1px solid var(--wp--preset--color--ink);
	font-size: max(1.75rem, 0.65rem + 2.2917vw, 2.8935vw); /* 50px at 1728, 28px at 768 */
	line-height: 1.18; /* 59px at 50px */
	letter-spacing: 0.02em;
}

/* Spans the row but keeps the design's measure, so it breaks over three lines as
drawn rather than running the full 1528. */
.etairia-steps__lead {
	grid-column: 1 / -1;
	max-width: max(20rem, 41.088vw); /* 710px at 1728 */
	margin: max(1.25rem, 2.0255vw) 0 max(2rem, 3.5301vw); /* 35px above, 61px below */
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw); /* 16px at 1728, 14px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.75; /* 28px at 16px */
	letter-spacing: 0.05em;
}

/* Square, as the design annotates them, so the six read as one set however each
photograph is framed. */
.etairia-steps__media {
	margin: 0;
	aspect-ratio: 1;
}

.etairia-steps__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The ordinal is generated on the name rather than written into the markup, so the
six cannot fall out of sequence — and it carries the gap from the picture, since the
number and the title are one block with nothing between them. */
.etairia-steps__name {
	margin: max(1rem, 1.5046vw) 0 0; /* 26px at 1728 */
	font-family: var(--wp--preset--font-family--sans);
	font-size: max(0.9375rem, 0.7875rem + 0.3125vw, 1.0417vw); /* 18px at 1728, 15px at 768 */
	font-weight: 700;
	font-stretch: 100%;
	line-height: 1;
	letter-spacing: normal;
	text-transform: uppercase;
}

/* Drawn in #a1a1a1, which is 1.83:1 on this field. It survives here where the same
grey had to be dropped elsewhere, because at 40px bold this is large text and the
threshold is 3:1 rather than 4.5 — faint clears it at 3.51 and stays lighter than the
title beneath, which is the whole point of it. */
.etairia-steps__name::before {
	counter-increment: step;
	content: counter(step, decimal-leading-zero);
	display: block;
	margin-bottom: max(0.25rem, 0.4051vw); /* 7px at 1728 */
	color: var(--wp--preset--color--faint);
	font-size: max(1.5rem, 2.3148vw); /* 40px at 1728 */
	line-height: 1;
	letter-spacing: -0.02em;
}

.etairia-steps__body {
	margin: max(0.75rem, 1.0417vw) 0 0; /* 18px at 1728 */
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw); /* 16px at 1728, 14px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.75; /* 28px at 16px */
	letter-spacing: 0.05em;
}

/*--------------------------------------------------------------
# Narrow — steps
--------------------------------------------------------------*/

@media (max-width: 998px) {

	/* Two across. Six divides evenly by two, so nothing is left short — the reason
	the stats row could not do this with five. */
	.etairia-steps {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 479px) {

	.etairia-steps {
		grid-template-columns: 1fr;
	}
}

/*--------------------------------------------------------------
# Τέσσερις κανόνες που δεν παραβιάζουμε
--------------------------------------------------------------*/

/* The only dark band below the fold, and the same composition as the hero:
photograph, a scrim, white words over it. The scrim is not a layer here — the
section's own background is the scrim, and the picture lies over it at low
opacity, which is what the export measures. Its greys run 55–92 against a
photograph whose own range is the full 0–255, so 12% of the picture reaches the
page and 88% is this colour. One declaration instead of a pseudo-element, and if
the picture never loads the fallback is the scrim itself.

That fixed 12% also fixes the contrast floor. However bright the photograph, the
lightest the field can go is 12% of white over #3e4346, which is #555a5c — where
white is 6.7:1 and the body grey 4.7:1. Both pass whatever picture is set.

The section is the grid, as in the steps band above: the heading spans the row and
the four rules place directly, with no wrapper between. Four equal tracks with the
design's 45px gutters — (1536 − 3 × 45) ÷ 4 puts each column on the 350.25
measured off the export, and the hairlines land on the track boundaries exactly. */
.etairia-kanones {
	/* Every hairline elsewhere on the page is black on a light field. Here it has
	to be white on a dark one, and at full strength it would be far heavier than
	drawn: the export puts both the divider and the column rules at about a fifth
	of white. Declared once, inherited by the two rules that draw it. */
	--zp-hairline: rgb(255 255 255 / 20%);

	position: relative;
	isolation: isolate;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: start;
	column-gap: max(1.5rem, 2.6042vw); /* 45px at 1728 */
	row-gap: max(2rem, 3.7037vw); /* 64px at 1728 */
	padding-inline: var(--zp-pad);
	padding-block: max(2.5rem, 5.787vw); /* 100px at 1728 */
	background-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

.etairia-kanones > * {
	min-width: 0;
}

/* Out of flow, so it takes no track. The negative layer puts it under the words
but still over the section's own background — the layering the hero documents. */
.etairia-kanones__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: 0;
}

.etairia-kanones__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: .8;
}

/* Family, weight and case from theme.json as everywhere else on this page; only
size, leading and tracking restated. The rule under it is the heading's own bottom
border, and it spans the row because it is drawn the full content width. 34px of
clearance rather than the 35 the other headings here use — measured, and the
design's own figure. */
.etairia-kanones__title {
	grid-column: 1 / -1;
	margin: 0;
	padding-bottom: max(1.25rem, 1.9676vw); /* 34px at 1728 */
	border-bottom: 1px solid var(--zp-hairline);
	font-size: max(1.75rem, 0.65rem + 2.2917vw, 2.8935vw); /* 50px at 1728, 28px at 768 */
	line-height: 1.18; /* 59px at 50px */
	letter-spacing: 0.02em;
}

/* The dividers between the columns are each item's own right edge, which costs
neither an element nor a pseudo-element and stretches to the row height for free,
so all four end together however many lines a rule takes — as the stats row does.
The design stops them at a fixed 149px, which matches no column's content and
reads as a leftover from an earlier draft of the copy. The last one would sit on
the outer edge, separating nothing. */
.etairia-kanones__item {
	border-right: 1px solid var(--zp-hairline);
}

.etairia-kanones__item:last-child {
	border-right: 0;
}

/* Open Sans unstretched and untracked, against the condensed face theme.json
gives every heading — the same override the scope and step names carry. Leading is
27 against 18, where those two sit at 1: this one wraps to two lines and is drawn
with real leading between them. */
.etairia-kanones__name {
	margin: 0;
	font-family: var(--wp--preset--font-family--sans);
	font-size: max(0.9375rem, 0.7875rem + 0.3125vw, 1.0417vw); /* 18px at 1728, 15px at 768 */
	font-stretch: 100%;
	line-height: 1.5; /* 27px at 18px */
	letter-spacing: normal;
}

/* #d9d9d9 rather than white, which is the design's own hierarchy — the name is
the brighter of the two and size alone does not carry it on a field this dark. The
palette holds that grey under a slug named for borders; it is the colour the
design asks for, whatever the slug is called. */
.etairia-kanones__body {
	margin: max(0.5rem, 0.6366vw) 0 0; /* 11px at 1728 */
	color: var(--wp--preset--color--border);
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw); /* 16px at 1728, 14px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.75; /* 28px at 16px */
	letter-spacing: 0.05em;
}

/*--------------------------------------------------------------
# Narrow — τέσσερις κανόνες
--------------------------------------------------------------*/

/* Two across. Four divides evenly, so no row is left short. Held in one row the
tracks would be about 205px, which ΚΑΤΑΣΚΕΥΑΖΟΥΜΕ, cannot set on a line.

The rules on the even items now end a row rather than divide one. nth-of-type
counts among the divs, and the four items are the only divs here. */
@media (max-width: 998px) {

	.etairia-kanones {
		grid-template-columns: repeat(2, 1fr);
	}

	.etairia-kanones__item:nth-of-type(even) {
		border-right: 0;
	}
}

@media (max-width: 479px) {

	.etairia-kanones {
		grid-template-columns: 1fr;
	}

	.etairia-kanones__item {
		border-right: 0;
	}
}

/*--------------------------------------------------------------
# Οι άνθρωποι πίσω από τα κουφώματα
--------------------------------------------------------------*/

/* Four portrait slots on the page field, with the heading and the lead spanning
them — the steps band's construction, so the section is the grid and nothing here
is wrapped for the sake of being wrapped.

The gutter is the design's 24px, and it closes the row exactly: four 366px slots
and three gutters come to 1536, which is the content width. That makes 366 a
derived figure rather than a measured one, so the tracks are plain fractions and
only the gutter is declared.

65px of padding above against 120 below. The band overhead is a full-bleed
photograph and needs no air between it and this, the same reason the διαδρομή
band is lopsided; below, the drawn space is 167 but 47 of it belongs to a note
about the photography being unshot, which is an instruction to us and not copy. */
.etairia-anthropoi {
	--portrait-gutter: max(0.75rem, 1.3889vw); /* 24px at 1728 */

	display: grid;
	grid-template-columns: repeat(4, 1fr);
	align-items: start;
	column-gap: var(--portrait-gutter);
	padding-inline: var(--zp-pad);
	padding-block: max(2rem, 3.7616vw) max(3rem, 6.9444vw); /* 65px / 120px at 1728 */
	background-color: var(--wp--preset--color--border);
	color: var(--wp--preset--color--muted);
}

.etairia-anthropoi > * {
	min-width: 0;
}

/* No row-gap on the grid. The two vertical gaps here are different figures and
both belong to the lead, which is the only thing between the heading and the
slots; a single gap could not be either of them. It comes back below 998, where
the slots wrap and there are rows to separate. */
.etairia-anthropoi__title {
	grid-column: 1 / -1;
	margin: 0;
	padding-bottom: max(1.25rem, 1.9676vw); /* 34px at 1728 */
	border-bottom: 1px solid var(--wp--preset--color--ink);
	font-size: max(1.75rem, 0.65rem + 2.2917vw, 2.8935vw); /* 50px at 1728, 28px at 768 */
	line-height: 1.18; /* 59px at 50px */
	letter-spacing: 0.02em;
}

/* The measure is two slots and the gutter between them — 756px at the reference,
which is where the drawn lines break. Written as the grid rather than as 756 so it
stays true if the gutter ever moves: half the row, less half a gutter. */
.etairia-anthropoi__lead {
	grid-column: 1 / -1;
	max-width: calc(50% - var(--portrait-gutter) / 2);
	margin: max(1.25rem, 1.9676vw) 0 max(2rem, 3.7037vw); /* 34px above, 64px below */
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw); /* 16px at 1728, 14px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.75; /* 28px at 16px */
	letter-spacing: 0.05em;
}

/* 4:5 as the design annotates them, so the four read as one set however each
portrait is framed — and so the slots hold their shape while they are still empty. */
.etairia-anthropoi__media {
	margin: 0;
	aspect-ratio: 4 / 5;
}

.etairia-anthropoi__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* The empty state, and only the empty state. There is no team photography yet, so
each slot is a Group block standing in for an Image block — and this rule is bound
to the div that block prints. Swap one for a picture and the placeholder styling
stops matching on its own, because an Image block prints a figure. Nothing to
remember, nothing to clean up later. */
div.etairia-anthropoi__media {
	border: 1px solid var(--wp--preset--color--ink);
	background-color: var(--wp--preset--color--surface-alt);
}

/*--------------------------------------------------------------
# Narrow — οι άνθρωποι
--------------------------------------------------------------*/

@media (max-width: 998px) {

	/* Two across, as the steps band does at this width — four divides evenly, so
	no row is left short. */
	.etairia-anthropoi {
		grid-template-columns: repeat(2, 1fr);
		row-gap: var(--portrait-gutter);
	}

	/* The measure was two slots of four; two of two is the whole row, so it goes.
	The margin gives up what the row-gap now contributes, leaving the drawn 64
	between the lead and the first row of portraits. */
	.etairia-anthropoi__lead {
		max-width: none;
		margin-bottom: max(1.5rem, 2.3148vw); /* 40px at 1728, plus the 24px gap */
	}
}

@media (max-width: 479px) {

	.etairia-anthropoi {
		grid-template-columns: 1fr;
	}
}

/*--------------------------------------------------------------
# Θέλετε προσφορά για το δικό σας έργο;
--------------------------------------------------------------*/

/* The closing band, and the second photograph on this page carried by opacity
rather than by a scrim layer. Measured: the greys run 21 to 97 with the picture's
own hue intact — a beige wall reading 190,180,168 arrives as 76,72,67 — which is
the photograph at four tenths over black, and nothing else. So the section's own
background is the scrim again, and if the picture never loads the words stay white
on black.

Four tenths bounds the contrast too. The lightest the field can go is 0.4 × white,
which is #666, where white is 5.5:1 whatever photograph is set.

Everything centres. No grid: five children stacked, each carrying its own gap, and
the band's height falls out of them — 104 + content + 104 comes to the 480 drawn,
which is also the picture's own height, so nothing has to declare a ratio. */
.etairia-cta {
	position: relative;
	isolation: isolate;
	padding-inline: var(--zp-pad);
	padding-block: max(2.5rem, 6.0185vw); /* 104px at 1728 */
	background-color: var(--wp--preset--color--ink);
	color: var(--wp--preset--color--base);
	text-align: center;
}

.etairia-cta__media {
	position: absolute;
	inset: 0;
	z-index: -1;
	margin: 0;
}

.etairia-cta__media img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	opacity: 0.4;
}

/* 58px, which is this page's one heading outside the 50 every section title uses —
measured against the ΤΕΣΣΕΡΙΣ ΚΑΝΟΝΕΣ heading in the same export, where a known 50
reads 37 and this reads 43. */
.etairia-cta__title {
	margin: 0;
	font-size: max(1.75rem, 0.7rem + 2.7083vw, 3.3565vw); /* 58px at 1728, 32px at 768 */
	line-height: 1.18;
	letter-spacing: 0.02em;
}

/* White, where the design dims it to about #e2e2e2. That grey is 4.2:1 against the
brightest this field can go and fails AA at 16px, so it takes the nearest passing
value — the same substitution the design's #a1a1a1 greys took elsewhere. Nothing is
lost: the hierarchy here is 58 against 16, which no tint was carrying. */
.etairia-cta__lead {
	margin: max(0.5rem, 0.6944vw) 0 0; /* 12px at 1728 */
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.875rem, 0.775rem + 0.2083vw, 0.9259vw); /* 16px at 1728, 14px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.75; /* 28px at 16px */
	letter-spacing: 0.05em;
}

/* Core's buttons row is already a flex container that wraps; it only needs
centring and the design's gap, which is the 44px measured between the plate's
right edge and the first letter beside it. gap rather than column-gap so the two
still clear each other once they wrap on a phone. */
.etairia-cta__actions {
	justify-content: center;
	gap: max(1.5rem, 2.5463vw); /* 44px at 1728 */
	margin: max(1.5rem, 2.4884vw) 0 0; /* 43px at 1728 */
}

/* theme.json dresses every button dark-on-light at 20px with 18/32 padding. This
one is the inverse and smaller: a white plate 324 x 65.5, whose size is entirely
its label's 14px plus 26 and 44 of padding, so no dimension is declared here. */
.etairia-cta__quote .wp-block-button__link {
	padding: max(1rem, 1.5046vw) max(1.5rem, 2.5463vw); /* 26px / 44px at 1728 */
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: max(0.75rem, 0.65rem + 0.2083vw, 0.8102vw); /* 14px at 1728, 12px at 768 */
}

.etairia-cta__quote .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--border);
}

/* Drawn as plain words, not a second plate. It stays a Button block so the pair
edits as one thing and shares the row; the plate is what comes off. */
.etairia-cta__erga .wp-block-button__link {
	padding: 0;
	background-color: transparent;
	color: inherit;
	font-size: max(0.75rem, 0.65rem + 0.2083vw, 0.8102vw); /* 14px at 1728, 12px at 768 */
}

.etairia-cta__erga .wp-block-button__link:hover {
	background-color: transparent;
	text-decoration: underline;
}

.etairia-cta__phone {
	margin: max(1.25rem, 2.0255vw) 0 0; /* 35px at 1728 */
	font-family: var(--wp--preset--font-family--condensed);
	font-size: max(0.75rem, 0.65rem + 0.2083vw, 0.8102vw); /* 14px at 1728, 12px at 768 */
	font-weight: 700;
	font-stretch: 75%;
	line-height: 1.4;
	letter-spacing: 0.05em;
	text-transform: uppercase;
}

/* theme.json colours every link `contrast` and dims it to `muted` on hover. Both
are near-black, and this one sits on black. The underline stays: it is the only
thing marking the number as dialable. */
.etairia-cta__phone a,
.etairia-cta__phone a:hover {
	color: inherit;
}