/*
 * Public-site chrome + landing sections + auxiliary pages.
 *
 * Layout philosophy: header is fixed, transparent at the top of the page,
 * transitions to a subtle blurred dark background after scroll. Logo is
 * deliberately small (≈ 130–165px wide). The hero is full viewport, flush
 * to the top, with an optional licensed image layer behind a soft cinematic
 * wash that fades into pure black at the bottom. All sections breathe
 * generously — `clamp()`-based padding and gaps so the page feels spacious
 * on large displays without becoming sparse on small ones. Reveals are
 * slow and calm (~800ms, premium easing).
 */


/* ===================================================================
 * HEADER — transparent overlay, scroll-aware
 * ============================================================== */

.eos-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: var(--eos-z-header);
	background: transparent;
	border: 0;
	transition:
		background-color 280ms var(--eos-easing),
		backdrop-filter  280ms var(--eos-easing),
		-webkit-backdrop-filter 280ms var(--eos-easing);
}

.eos-header.is-scrolled {
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: saturate(140%) blur(10px);
	-webkit-backdrop-filter: saturate(140%) blur(10px);
}

.eos-header__inner {
	display: flex;
	align-items: center;
	gap: var(--eos-space-5);
	max-width: var(--eos-container-wide);
	margin: 0 auto;
	padding: var(--eos-space-4) var(--eos-space-5);
	min-height: var(--eos-header-height);
}
@media (min-width: 720px) {
	.eos-header__inner {
		padding-left: var(--eos-space-7);
		padding-right: var(--eos-space-7);
	}
}
@media (min-width: 1280px) {
	.eos-header__inner {
		padding-left: var(--eos-space-8);
		padding-right: var(--eos-space-8);
	}
}


/* BRAND — sized down per spec ------------------------------------- */

.eos-brand {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	gap: var(--eos-space-3);
	color: var(--eos-text);
	text-decoration: none;
	transition: opacity var(--eos-duration-fast) var(--eos-easing);
}
.eos-brand:hover,
.eos-brand:focus {
	color: var(--eos-text);
	opacity: 0.85;
}

/* Width-constrained logo. The image scales to fit inside max-width and
   max-height while preserving its aspect ratio. */
.eos-brand__logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 125px;
	max-height: 28px;
	image-rendering: -webkit-optimize-contrast;
}
@media (min-width: 880px) {
	.eos-brand__logo {
		max-width: 160px;
		max-height: 34px;
	}
}

.eos-brand__name {
	font-family: var(--eos-font-sans);
	font-size: var(--eos-text-base);
	font-weight: var(--eos-weight-bold);
	letter-spacing: var(--eos-tracking-widest);
	color: var(--eos-text);
}

.eos-brand--customizer .custom-logo-link {
	display: inline-flex;
	align-items: center;
}
.eos-brand--customizer .custom-logo {
	display: block;
	width: auto;
	height: auto;
	max-width: 125px;
	max-height: 28px;
}
@media (min-width: 880px) {
	.eos-brand--customizer .custom-logo {
		max-width: 160px;
		max-height: 34px;
	}
}


/* PRIMARY NAV — centered between brand and CTA ------------------- */

.eos-nav-primary {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	align-items: center;
}

.eos-nav-primary__list {
	display: flex;
	align-items: center;
	gap: var(--eos-space-1);
}

.eos-nav-primary__item {
	display: inline-flex;
}

.eos-nav-primary__link {
	display: inline-flex;
	align-items: center;
	padding: var(--eos-space-2) var(--eos-space-4);
	font-family: var(--eos-font-mono);
	font-size: var(--eos-text-xs);
	font-weight: var(--eos-weight-medium);
	text-transform: uppercase;
	letter-spacing: var(--eos-tracking-wider);
	color: var(--eos-text);
	text-decoration: none;
	transition: color var(--eos-duration-fast) var(--eos-easing);
}
.eos-nav-primary__link:hover,
.eos-nav-primary__link:focus {
	color: var(--eos-accent);
}


/* PRIMARY NAV — COMPANY DROPDOWN ("trace-line tree") ------------- *
 *
 * Design intent: a controlled aerospace navigation trace, NOT a
 * decorative panel. The dropdown is built from two thin lines —
 * a vertical "spine" descending from below the Company trigger, and
 * one short horizontal "branch" per item. There is no background
 * box, no border outline, no shadow. The trigger has a chevron
 * caret that rotates 180° when the menu opens.
 *
 * Default text is 78%-opaque white so the items read clearly without
 * shouting. Hover lifts to full white and turns that item's branch
 * line orange — the orange is restrained because the text is small
 * and we never want orange-on-orange. The vertical spine and branch
 * lines use very low-opacity white so the structure reads as a
 * technical drawing, not a UI widget.
 *
 * Desktop reveal: pure CSS via :hover and :focus-within. The JS-
 * driven aria-expanded attribute also opens it for tap/Enter.
 * Mobile: rendered as inline expand/collapse driven by aria-expanded.
 * --------------------------------------------------------------- */

.eos-nav-primary__link--menu {
	gap: var(--eos-space-2);
	background: transparent;
	border: 0;
	font: inherit;
	font-family: var(--eos-font-mono);
	font-size: var(--eos-text-xs);
	font-weight: var(--eos-weight-medium);
	letter-spacing: var(--eos-tracking-wider);
	text-transform: uppercase;
	cursor: pointer;
	color: var(--eos-text);
}
.eos-nav-primary__chev {
	display: inline-block;
	transition: transform 200ms var(--eos-easing);
}
.eos-nav-primary__item--menu:hover .eos-nav-primary__chev,
.eos-nav-primary__item--menu:focus-within .eos-nav-primary__chev,
.eos-nav-primary__link--menu[aria-expanded="true"] .eos-nav-primary__chev {
	transform: rotate(180deg);
	color: var(--eos-accent);
}

@media (min-width: 880px) {
	.eos-nav-primary__item--menu {
		position: relative;
	}
	/* Invisible bridge so the cursor can travel from trigger into the
	   tree without crossing dead space — keeps :hover alive. */
	.eos-nav-primary__item--menu::after {
		content: "";
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		height: 12px;
		pointer-events: none;
	}

	/* The submenu container is just a positioned UL — no panel. The
	   width is compact: only as wide as needed to fit the longest
	   item label. No min-width that creates dead horizontal space. */
	.eos-nav-primary__submenu {
		position: absolute;
		top: calc(100% + 10px);
		/* Anchor under the start of the trigger label so the spine
		   visually descends from "Company" itself, not from a
		   centered panel. */
		left: var(--eos-space-4);
		margin: 0;
		padding: 4px 0 4px 14px;     /* leaves room for the spine */
		list-style: none;
		background: transparent;
		border: 0;
		border-radius: 0;
		box-shadow: none;
		opacity: 0;
		pointer-events: none;
		transform: translateY(-3px);
		transition:
			opacity   200ms var(--eos-easing),
			transform 200ms var(--eos-easing);
		z-index: var(--eos-z-dropdown);
	}

	/* The vertical "spine" trace line — thin and subtle. Stops a few
	   pixels above the last item's center so the bottom branch can
	   extend cleanly. */
	.eos-nav-primary__submenu::before {
		content: "";
		position: absolute;
		top: 0;
		bottom: 14px;
		left: 0;
		width: 1px;
		background: rgba(255, 255, 255, 0.20);
	}
	/* Tiny terminator notch at the top of the spine — anchors it
	   visually to the trigger above. */
	.eos-nav-primary__submenu::after {
		content: "";
		position: absolute;
		top: -2px;
		left: -2.5px;
		width: 6px;
		height: 1px;
		background: rgba(255, 255, 255, 0.20);
	}

	.eos-nav-primary__item--menu:hover > .eos-nav-primary__submenu,
	.eos-nav-primary__item--menu:focus-within > .eos-nav-primary__submenu,
	.eos-nav-primary__link--menu[aria-expanded="true"] + .eos-nav-primary__submenu {
		opacity: 1;
		pointer-events: auto;
		transform: translateY(0);
	}

	/* Each subitem owns its own short horizontal branch line. */
	.eos-nav-primary__subitem {
		position: relative;
		display: block;
		margin: 0;
	}
	.eos-nav-primary__subitem::before {
		content: "";
		position: absolute;
		left: -14px;
		top: 50%;
		width: 11px;
		height: 1px;
		background: rgba(255, 255, 255, 0.20);
		transition: background-color 180ms var(--eos-easing);
	}
	.eos-nav-primary__subitem:hover::before,
	.eos-nav-primary__subitem:focus-within::before {
		background: var(--eos-accent);
	}

	.eos-nav-primary__sublink {
		display: block;
		padding: 6px 4px 6px 6px;
		font-family: var(--eos-font-sans);
		font-size: 0.8125rem;        /* 13 */
		font-weight: var(--eos-weight-medium);
		letter-spacing: 0;
		text-transform: none;
		color: rgba(245, 245, 242, 0.78);
		background: transparent;
		text-decoration: none;
		white-space: nowrap;
		transition:
			color     180ms var(--eos-easing),
			transform 180ms var(--eos-easing);
	}
	.eos-nav-primary__sublink:hover,
	.eos-nav-primary__sublink:focus {
		color: #FFFFFF;
		background: transparent;     /* explicitly never orange-on-orange */
		outline: none;
		transform: translateX(2px);
	}
	.eos-nav-primary__sublink:focus-visible {
		outline: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.eos-nav-primary__submenu,
	.eos-nav-primary__sublink,
	.eos-nav-primary__subitem::before,
	.eos-nav-primary__chev {
		transition: none;
	}
	.eos-nav-primary__sublink:hover,
	.eos-nav-primary__sublink:focus {
		transform: none;
	}
}


/* CTA ZONE — Access button + mobile hamburger -------------------- */

.eos-header__cta {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: var(--eos-space-3);
}

.eos-header__access {
	display: inline-flex;
	align-items: center;
	padding: var(--eos-space-2) var(--eos-space-5);
	font-family: var(--eos-font-mono);
	font-size: var(--eos-text-xs);
	font-weight: var(--eos-weight-medium);
	text-transform: uppercase;
	letter-spacing: var(--eos-tracking-wider);
	color: var(--eos-text);
	text-decoration: none;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--eos-radius-sm);
	background: transparent;
	transition:
		background-color var(--eos-duration-fast) var(--eos-easing),
		border-color     var(--eos-duration-fast) var(--eos-easing),
		color            var(--eos-duration-fast) var(--eos-easing);
}
.eos-header__access:hover,
.eos-header__access:focus {
	color: var(--eos-text);
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.7);
}


/* MOBILE NAV TOGGLE ---------------------------------------------- */

.eos-nav-toggle {
	display: none;
	width: 40px;
	height: 40px;
	padding: 0;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 5px;
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: var(--eos-radius-sm);
}
.eos-nav-toggle__bar {
	display: block;
	width: 18px;
	height: 1.5px;
	background: var(--eos-text);
	transition:
		transform var(--eos-duration-base) var(--eos-easing),
		opacity   var(--eos-duration-fast) var(--eos-easing);
}
.eos-nav-toggle[aria-expanded="true"] .eos-nav-toggle__bar:nth-child(1) {
	transform: translateY(6.5px) rotate(45deg);
}
.eos-nav-toggle[aria-expanded="true"] .eos-nav-toggle__bar:nth-child(2) {
	opacity: 0;
}
.eos-nav-toggle[aria-expanded="true"] .eos-nav-toggle__bar:nth-child(3) {
	transform: translateY(-6.5px) rotate(-45deg);
}

@media (max-width: 879px) {
	.eos-nav-toggle {
		display: inline-flex;
	}
	.eos-nav-primary {
		flex: 0 0 auto;
	}
	.eos-nav-primary__list {
		position: fixed;
		top: var(--eos-header-height);
		left: 0;
		right: 0;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		padding: var(--eos-space-4) var(--eos-space-5);
		background: rgba(0, 0, 0, 0.92);
		backdrop-filter: saturate(140%) blur(10px);
		-webkit-backdrop-filter: saturate(140%) blur(10px);
		transform: translateY(-12px);
		opacity: 0;
		pointer-events: none;
		transition:
			opacity   var(--eos-duration-base) var(--eos-easing),
			transform var(--eos-duration-base) var(--eos-easing);
	}
	.eos-nav-primary__list--open {
		transform: translateY(0);
		opacity: 1;
		pointer-events: auto;
	}
	.eos-nav-primary__item {
		display: block;
	}
	.eos-nav-primary__link {
		padding: var(--eos-space-4) 0;
		font-size: var(--eos-text-sm);
		color: var(--eos-text);
	}

	/* Company dropdown collapses inline on mobile. The trigger stays
	   visually identical to the surrounding links; tapping it toggles
	   the submenu via aria-expanded (driven by public.js). */
	.eos-nav-primary__link--menu {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		padding: var(--eos-space-4) 0;
	}
	.eos-nav-primary__submenu {
		list-style: none;
		margin: 0;
		padding: 0 0 var(--eos-space-3) var(--eos-space-5);
		max-height: 0;
		overflow: hidden;
		opacity: 0;
		transition:
			max-height var(--eos-duration-slow) var(--eos-easing),
			opacity    var(--eos-duration-base) var(--eos-easing);
	}
	.eos-nav-primary__link--menu[aria-expanded="true"] + .eos-nav-primary__submenu {
		max-height: 360px;
		opacity: 1;
	}
	.eos-nav-primary__subitem {
		display: block;
	}
	.eos-nav-primary__sublink {
		display: block;
		padding: var(--eos-space-3) 0;
		font-family: var(--eos-font-sans);
		font-size: var(--eos-text-sm);
		font-weight: var(--eos-weight-regular);
		letter-spacing: 0;
		text-transform: none;
		color: var(--eos-text-muted);
		text-decoration: none;
	}
	.eos-nav-primary__sublink:hover,
	.eos-nav-primary__sublink:focus {
		color: var(--eos-accent);
	}
}


/* ===================================================================
 * SECTION RHYTHM — clamp()-based padding so the page breathes at any
 * viewport. Tight on mobile, generous at 1440px+.
 * ============================================================== */

.eos-section {
	padding: clamp(5.5rem, 10vw, 10rem) 0;
}

/* Make the section anchor land below the fixed header — belt for the
   scroll-padding-top already on <html>. */
.eos-section[id] {
	scroll-margin-top: var(--eos-header-height);
}


/* ===================================================================
 * HERO
 *
 * Full viewport, flush to top. One primary CTA only.
 * Image layer is opt-in via the --eos-hero-image CSS variable (set by
 * inc/enqueue.php when a file exists at
 * /wp-content/uploads/2026/06/Elintra-Hero.{webp,jpg,png}).
 * ============================================================== */

.eos-main--landing {
	margin: 0;
	padding: 0;
}

.eos-section--hero {
	position: relative;
	min-height: 100vh;
	min-height: 100svh;
	display: flex;
	align-items: center;
	padding-top: calc(var(--eos-header-height) + var(--eos-space-7));
	padding-bottom: clamp(4rem, 8vw, 7rem);
	background:
		radial-gradient(ellipse 120% 55% at 50% 115%, rgba(240, 90, 40, 0.08), transparent 65%),
		radial-gradient(ellipse 80% 60% at 25% 15%, rgba(255, 255, 255, 0.025), transparent 70%),
		var(--eos-bg);
	overflow: hidden;
}

.eos-hero__media {
	position: absolute;
	inset: 0;
	background-image: var(--eos-hero-image, none);
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
	opacity: 0.7;
	z-index: 0;
	pointer-events: none;
	transform: scale(1.04);
	transition: transform 18s linear;
	will-change: transform;
}
.eos-section--hero .eos-hero__media.is-drifting {
	transform: scale(1.08);
}

/* Cinematic wash — heavy left for legibility, soft right, long fade at
   bottom so the hero dissolves into pure black instead of cutting off. */
.eos-hero__overlay {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to right,
			var(--eos-bg) 0%,
			rgba(0, 0, 0, 0.78) 28%,
			rgba(0, 0, 0, 0.42) 55%,
			rgba(0, 0, 0, 0.18) 100%),
		linear-gradient(to bottom,
			var(--eos-bg) 0%,
			transparent 14%,
			transparent 58%,
			var(--eos-bg) 100%);
	z-index: 1;
	pointer-events: none;
}

.eos-hero__content {
	position: relative;
	z-index: 2;
}
.eos-hero__content .eos-meta {
	display: block;
	margin-bottom: var(--eos-space-5);
	color: var(--eos-text-muted);
}
.eos-hero__content .eos-h-display + .eos-lead {
	margin-top: var(--eos-space-6);
	max-width: 56ch;
}

/* Statement modifier — used when the hero headline is a single short,
   declarative sentence ("Impossible is only the beginning."). Without
   this max-width the headline can stretch across ~1100px on a 1440px
   container and read like a slogan instead of a grounded statement.
   18ch wraps elegantly into two lines on wide screens while leaving
   smaller viewports untouched (clamp() handles the size already). */
.eos-hero__content .eos-h-display--statement {
	max-width: 18ch;
}

.eos-hero__cta {
	margin-top: clamp(2.5rem, 4vw, 3.5rem);
	display: flex;
	flex-wrap: wrap;
	gap: var(--eos-space-3);
}

@media (prefers-reduced-motion: reduce) {
	.eos-hero__media {
		transform: none;
		transition: none;
	}
}


/* ===================================================================
 * FOOTER — minimal, quiet, no dividers, no Access
 * ============================================================== */

.eos-footer {
	background: var(--eos-bg);
	border: 0;
	padding: var(--eos-space-6) 0 var(--eos-space-5);
}

.eos-footer__inner {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: var(--eos-space-5);
	max-width: var(--eos-container-wide);
	margin: 0 auto;
	padding: 0 var(--eos-space-5);
}
@media (min-width: 720px) {
	.eos-footer__inner {
		padding: 0 var(--eos-space-7);
	}
}
@media (min-width: 1280px) {
	.eos-footer__inner {
		padding: 0 var(--eos-space-8);
	}
}

.eos-footer__copy {
	justify-self: start;
	font-family: var(--eos-font-mono);
	font-size: var(--eos-text-xs);
	font-weight: var(--eos-weight-medium);
	letter-spacing: var(--eos-tracking-wider);
	text-transform: uppercase;
	color: var(--eos-text-muted);
}

.eos-footer__nav {
	justify-self: center;
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: var(--eos-space-6);
}
.eos-footer__nav a {
	font-family: var(--eos-font-mono);
	font-size: var(--eos-text-xs);
	font-weight: var(--eos-weight-medium);
	letter-spacing: var(--eos-tracking-wider);
	text-transform: uppercase;
	color: var(--eos-text-muted);
	text-decoration: none;
	transition: color var(--eos-duration-fast) var(--eos-easing);
}
.eos-footer__nav a:hover,
.eos-footer__nav a:focus {
	color: var(--eos-text);
}

.eos-footer__right {
	justify-self: end;
}

@media (max-width: 720px) {
	.eos-footer__inner {
		grid-template-columns: 1fr;
		gap: var(--eos-space-4);
		text-align: center;
	}
	.eos-footer__copy { justify-self: center; order: 2; }
	.eos-footer__nav { order: 1; gap: var(--eos-space-4) var(--eos-space-5); }
	.eos-footer__right { display: none; }
}


/* ===================================================================
 * AUXILIARY PUBLIC PAGES NEED TOP PADDING TO CLEAR THE FIXED HEADER
 * ============================================================== */

.eos-main--public {
	padding-top: var(--eos-header-height);
}

.eos-article {
	padding: var(--eos-space-8) 0;
}
.eos-article__header {
	margin-bottom: var(--eos-space-6);
}
.eos-article__header .eos-meta {
	display: block;
	margin-bottom: var(--eos-space-2);
}
.eos-article__body p {
	margin-bottom: var(--eos-space-4);
	line-height: var(--eos-leading-relaxed);
	color: var(--eos-text);
}
.eos-article__body h2,
.eos-article__body h3 {
	margin: var(--eos-space-6) 0 var(--eos-space-3);
}


/* ===================================================================
 * SECTION HEAD — shared pattern, generous bottom margin
 * ============================================================== */

.eos-section__head {
	margin-bottom: clamp(3rem, 6vw, 6rem);
	max-width: 820px;
}
.eos-section__head .eos-meta {
	display: block;
	margin-bottom: var(--eos-space-4);
}
.eos-section__head .eos-h-section {
	font-size: clamp(1.75rem, 3.2vw, 2.875rem);
	line-height: 1.15;
}
.eos-section__intro {
	margin-top: var(--eos-space-5);
	font-size: clamp(1.0625rem, 1.4vw, 1.25rem);
	line-height: var(--eos-leading-relaxed);
	color: var(--eos-text-muted);
	max-width: 62ch;
}


/* ===================================================================
 * WHAT WE DO — three disciplines, no numbering, no icons, more air
 * ============================================================== */

.eos-section--what {
	padding-bottom: clamp(5rem, 9vw, 8rem);
}

.eos-what {
	display: grid;
	gap: clamp(3rem, 6vw, 5rem);
	grid-template-columns: 1fr;
}
@media (min-width: 880px) {
	.eos-what {
		grid-template-columns: repeat(3, 1fr);
		gap: clamp(2.5rem, 5vw, 5rem);
	}
}
.eos-what__item {
	position: relative;
	padding-top: var(--eos-space-5);
}
.eos-what__item::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	width: 40px;
	height: 1px;
	background: var(--eos-accent);
}
.eos-what__item h3 {
	font-family: var(--eos-font-sans);
	font-size: clamp(1.5rem, 2vw, 1.875rem);
	font-weight: var(--eos-weight-semibold);
	line-height: 1.2;
	margin-bottom: var(--eos-space-4);
	color: var(--eos-text);
}
.eos-what__item p {
	color: var(--eos-text-muted);
	font-size: var(--eos-text-base);
	line-height: var(--eos-leading-relaxed);
	max-width: 42ch;
}


/* ===================================================================
 * COMPANY — atmospheric, philosophical core
 *
 * Uses --eos-section-image (set by JS lazy loader from
 * data-eos-lazy-image) as a soft, masked image band. Falls back to
 * pure black if no image was uploaded — never broken.
 * ============================================================== */

.eos-section--company {
	position: relative;
	padding: clamp(7rem, 13vw, 12rem) 0;
}
/* Satellite/earth atmospheric layer — biased to the right so the
   left side stays clean for the headline/body. The image is sourced
   from /wp-content/uploads/2026/06/Elintra-Company.{webp,jpg,png}
   via eos_resolve_marketing_image_url('Company') and lazy-loaded by
   public.js. Falls back to pure black if no file is present — never
   broken. */
.eos-section--company::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--eos-section-image, none);
	background-size: cover;
	background-position: center right;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 900ms var(--eos-easing);
	pointer-events: none;
}
.eos-section--company.eos-section--has-image::before {
	opacity: 0.42;
}
/* Gradient mask: strong left-to-right wash so the headline area sits
   on near-black; satellite/earth visible but subdued on the right.
   Top + bottom fade ensures the section dissolves into pure black at
   both edges — no hard rectangle. */
.eos-section--company::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom,
			var(--eos-bg) 0%,
			transparent 16%,
			transparent 84%,
			var(--eos-bg) 100%),
		linear-gradient(to right,
			rgba(0, 0, 0, 0.85) 0%,
			rgba(0, 0, 0, 0.65) 35%,
			rgba(0, 0, 0, 0.30) 70%,
			rgba(0, 0, 0, 0.05) 100%);
	pointer-events: none;
}
.eos-section--company > .eos-container {
	position: relative;
	z-index: 1;
}

.eos-section--company .eos-section__head .eos-h-section,
.eos-section--company .eos-why .eos-h-section {
	font-size: clamp(2rem, 4vw, 3.25rem);
}

.eos-why {
	display: grid;
	gap: clamp(2rem, 4vw, 4rem);
	grid-template-columns: 1fr;
}
@media (min-width: 1024px) {
	.eos-why {
		grid-template-columns: 1fr 1.7fr;
		gap: clamp(3rem, 6vw, 6rem);
		align-items: start;
	}
}
.eos-why__head .eos-meta {
	display: block;
	margin-bottom: var(--eos-space-4);
}
.eos-why__body p {
	font-size: clamp(1.0625rem, 1.5vw, 1.25rem);
	line-height: var(--eos-leading-relaxed);
	color: var(--eos-text);
	max-width: 60ch;
}
.eos-why__body p + p {
	margin-top: var(--eos-space-6);
}


/* ===================================================================
 * CAPABILITIES — three grouped lists + Standards Alignment row
 *
 * Same lazy-image pattern as Company — atmospheric backdrop opt-in.
 * ============================================================== */

.eos-section--capabilities {
	position: relative;
}
.eos-section--capabilities::before {
	content: "";
	position: absolute;
	inset: 0;
	background-image: var(--eos-section-image, none);
	background-size: cover;
	background-position: right center;
	background-repeat: no-repeat;
	opacity: 0;
	transition: opacity 900ms var(--eos-easing);
	pointer-events: none;
}
.eos-section--capabilities.eos-section--has-image::before {
	opacity: 0.14;
}
.eos-section--capabilities::after {
	content: "";
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, var(--eos-bg) 0%, transparent 22%, transparent 78%, var(--eos-bg) 100%);
	pointer-events: none;
}
.eos-section--capabilities > .eos-container {
	position: relative;
	z-index: 1;
}

.eos-caps {
	display: grid;
	gap: clamp(2.5rem, 5vw, 4.5rem);
	grid-template-columns: 1fr;
}
@media (min-width: 720px) {
	.eos-caps {
		grid-template-columns: 1fr 1fr;
		gap: clamp(2.5rem, 4vw, 4rem) clamp(3rem, 5vw, 5rem);
	}
}
@media (min-width: 1100px) {
	.eos-caps {
		grid-template-columns: repeat(3, 1fr);
		gap: clamp(2.5rem, 4vw, 4.5rem) clamp(3rem, 5vw, 5rem);
	}
}
.eos-caps__group h3 {
	font-family: var(--eos-font-sans);
	font-size: var(--eos-text-lg);
	font-weight: var(--eos-weight-semibold);
	letter-spacing: var(--eos-tracking-normal);
	margin-bottom: var(--eos-space-5);
	padding-bottom: var(--eos-space-4);
	border-bottom: 1px solid var(--eos-border);
	color: var(--eos-text);
}
.eos-caps__list {
	margin: 0;
	padding: 0;
	list-style: none;
}
.eos-caps__list li {
	display: flex;
	align-items: baseline;
	gap: var(--eos-space-3);
	padding: var(--eos-space-3) 0;
	color: var(--eos-text);
	font-size: var(--eos-text-base);
	line-height: var(--eos-leading-relaxed);
}
.eos-caps__list li::before {
	content: "—";
	color: var(--eos-text-subtle);
	flex: 0 0 auto;
}

/* Standards Alignment — single compact line, no table */
.eos-standards-align {
	margin-top: clamp(3rem, 6vw, 5rem);
	padding-top: clamp(2rem, 3vw, 2.5rem);
	border-top: 1px solid var(--eos-border);
}
.eos-standards-align .eos-meta {
	display: block;
	margin-bottom: var(--eos-space-3);
}
.eos-standards-align__list {
	font-family: var(--eos-font-mono);
	font-size: var(--eos-text-xs);
	letter-spacing: var(--eos-tracking-wide);
	color: var(--eos-text);
	line-height: 1.8;
}
.eos-standards-align__list span {
	white-space: nowrap;
}
.eos-standards-align__list span + span::before {
	content: " | ";
	margin: 0 var(--eos-space-2);
	color: var(--eos-text-subtle);
	font-weight: var(--eos-weight-regular);
}


/* ===================================================================
 * NEXT STEP — three compact link cards
 *
 * Subtle outline, slight lift on hover, accent arrow on hover. No
 * bulky horizontal bars, no table feel.
 * ============================================================== */

.eos-section--next {
	padding-top: clamp(5rem, 9vw, 8rem);
	padding-bottom: clamp(7rem, 11vw, 10rem);
}

.eos-next-cards {
	display: grid;
	gap: 0;
	grid-template-columns: 1fr;
	margin-top: clamp(2.5rem, 5vw, 4rem);
	border-top: 1px solid var(--eos-border);
}
@media (min-width: 720px) {
	.eos-next-cards {
		grid-template-columns: repeat(3, 1fr);
	}
}

/*
 * Refined Next Step rows — no boxes, no heavy outlines. Each row is a thin
 * hairline-separated block, mostly air. Hover lifts a faint background wash
 * and slides the arrow. Visually quiet, premium, not a contact table.
 */
.eos-next-card {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: var(--eos-space-2);
	padding: clamp(1.75rem, 3vw, 2.5rem) clamp(1rem, 2vw, 1.5rem) clamp(1.75rem, 3vw, 2.5rem) 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--eos-border);
	border-radius: 0;
	color: var(--eos-text);
	text-decoration: none;
	transition:
		background-color var(--eos-duration-base) var(--eos-easing),
		padding-left var(--eos-duration-base) var(--eos-easing);
}
@media (min-width: 720px) {
	.eos-next-card {
		padding: clamp(2rem, 3.5vw, 2.75rem) clamp(1.25rem, 2vw, 1.75rem);
		border-bottom: 0;
		border-right: 1px solid var(--eos-border);
	}
	.eos-next-card:last-child {
		border-right: 0;
	}
}
.eos-next-card:hover,
.eos-next-card:focus {
	color: var(--eos-text);
	background: rgba(255, 255, 255, 0.018);
	padding-left: var(--eos-space-4);
}
@media (min-width: 720px) {
	.eos-next-card:hover,
	.eos-next-card:focus {
		padding-left: clamp(1.5rem, 2.5vw, 2rem);
	}
}
.eos-next-card__label {
	font-family: var(--eos-font-sans);
	font-size: var(--eos-text-base);
	font-weight: var(--eos-weight-semibold);
	letter-spacing: -0.005em;
	line-height: 1.3;
	color: var(--eos-text);
}
.eos-next-card__email {
	font-family: var(--eos-font-mono);
	font-size: var(--eos-text-xs);
	text-transform: none;
	letter-spacing: 0.01em;
	color: var(--eos-text-muted);
}
.eos-next-card__arrow {
	position: absolute;
	top: 50%;
	right: var(--eos-space-3);
	transform: translateY(-50%);
	font-family: var(--eos-font-sans);
	font-size: var(--eos-text-base);
	line-height: 1;
	color: var(--eos-text-subtle);
	opacity: 0.6;
	transition:
		color var(--eos-duration-fast) var(--eos-easing),
		opacity var(--eos-duration-fast) var(--eos-easing),
		transform var(--eos-duration-base) var(--eos-easing);
}
.eos-next-card:hover .eos-next-card__arrow,
.eos-next-card:focus .eos-next-card__arrow {
	color: var(--eos-accent);
	opacity: 1;
	transform: translateY(-50%) translateX(4px);
}


/* ===================================================================
 * BUTTONS — primary CTA (filled accent) + ghost (outlined)
 *
 * The primary button is the most-seen Elintra surface element. Tuned
 * per spec: confident weight, refined proportions, near-black text on
 * orange so the label never disappears into the fill, restrained
 * letter-spacing (0.06em — present but never decorative), subtle
 * lift on hover.
 * ============================================================== */

.eos-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 42px;
	padding: 0 1.5rem;          /* 0 24px */
	font-family: var(--eos-font-sans);
	font-size: 0.8125rem;       /* 13 */
	font-weight: 700;
	letter-spacing: 0.05em;
	text-transform: uppercase;
	color: #050505;             /* near-black — readable on orange */
	background: var(--eos-accent);
	border: 1px solid var(--eos-accent);
	border-radius: var(--eos-radius-sm);
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--eos-duration-fast) var(--eos-easing),
		border-color     var(--eos-duration-fast) var(--eos-easing),
		color            var(--eos-duration-fast) var(--eos-easing),
		transform        var(--eos-duration-fast) var(--eos-easing);
}
.eos-button:hover,
.eos-button:focus {
	color: #050505;
	background: var(--eos-accent-hover);
	border-color: var(--eos-accent-hover);
	transform: translateY(-1px);
	outline: none;
}
.eos-button:active {
	background: var(--eos-accent-press);
	border-color: var(--eos-accent-press);
	transform: translateY(0);
}
.eos-button:focus-visible {
	box-shadow: 0 0 0 3px rgba(240, 90, 40, 0.35);
}

@media (prefers-reduced-motion: reduce) {
	.eos-button,
	.eos-button:hover,
	.eos-button:focus,
	.eos-button:active {
		transform: none;
		transition: none;
	}
}

.eos-button--ghost {
	color: var(--eos-text);
	background: transparent;
	border: 1px solid rgba(255, 255, 255, 0.35);
}
.eos-button--ghost:hover,
.eos-button--ghost:focus {
	color: var(--eos-text);
	background: rgba(255, 255, 255, 0.08);
	border-color: rgba(255, 255, 255, 0.7);
	transform: none;
}


/* ===================================================================
 * AUXILIARY PUBLIC PAGES (Shop, Careers, Suppliers, Legal)
 * ============================================================== */

.eos-page {
	padding: clamp(4rem, 7vw, 6rem) 0 clamp(6rem, 10vw, 9rem);
}
.eos-page__head {
	margin-bottom: clamp(2.5rem, 5vw, 4.5rem);
}
.eos-page__head .eos-meta {
	display: block;
	margin-bottom: var(--eos-space-4);
}
.eos-page__body p {
	margin-bottom: var(--eos-space-4);
	font-size: var(--eos-text-lg);
	line-height: var(--eos-leading-relaxed);
	color: var(--eos-text);
	max-width: 64ch;
}
.eos-page__body p + p {
	margin-top: var(--eos-space-4);
}
.eos-page__body .eos-page__secondary {
	margin-top: var(--eos-space-6);
	font-size: 0.9375rem;
	color: var(--eos-text-muted);
}
.eos-page__body h2 {
	font-family: var(--eos-font-sans);
	font-size: var(--eos-text-xl);
	font-weight: var(--eos-weight-semibold);
	margin: var(--eos-space-7) 0 var(--eos-space-3);
}
.eos-page__body h3 {
	font-family: var(--eos-font-sans);
	font-size: var(--eos-text-lg);
	font-weight: var(--eos-weight-semibold);
	margin: var(--eos-space-6) 0 var(--eos-space-3);
}
.eos-page__body ul {
	margin: var(--eos-space-4) 0;
	padding: 0;
	list-style: none;
}
.eos-page__body ul li {
	display: flex;
	gap: var(--eos-space-3);
	padding: var(--eos-space-2) 0;
	color: var(--eos-text);
	line-height: var(--eos-leading-relaxed);
}
.eos-page__body ul li::before {
	content: "—";
	color: var(--eos-text-subtle);
	flex: 0 0 auto;
}


/* ===================================================================
 * REVEAL ANIMATION — luxurious 800ms ease for sections entering view
 * ============================================================== */

[data-eos-fade] {
	opacity: 0;
	transform: translateY(18px);
	transition:
		opacity   800ms cubic-bezier(0.16, 1, 0.3, 1),
		transform 800ms cubic-bezier(0.16, 1, 0.3, 1);
	will-change: opacity, transform;
}
[data-eos-fade].is-in-view {
	opacity: 1;
	transform: translateY(0);
}
@media (prefers-reduced-motion: reduce) {
	[data-eos-fade] {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.eos-header {
		transition: none;
	}
	.eos-section--company::before,
	.eos-section--capabilities::before {
		transition: none;
	}
}