/* ==========================================================================
   Zaagmachines.eu — Over ons
   Distinct entity/trust-led art direction.
   ========================================================================== */

.about-page {
	overflow: hidden;
}

.about-text-link {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 13px;
	font-weight: 800;
	text-decoration: none;
}

.about-text-link span {
	color: var(--color-orange);
	transition: transform 180ms ease;
}


/* Hero — same visual system as Service
   ========================================================================== */

.about-hero {
	position: relative;
	min-height: min(790px, 84vh);
	overflow: hidden;
	background: #1f1f1f;
	color: #fff;
}

.about-hero::after {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			90deg,
			rgb(25 25 25 / 98%) 0%,
			rgb(25 25 25 / 91%) 38%,
			rgb(25 25 25 / 54%) 62%,
			rgb(25 25 25 / 16%) 100%
		),
		linear-gradient(180deg, transparent 72%, rgb(0 0 0 / 26%));
	content: "";
}

.about-hero::before {
	position: absolute;
	z-index: 2;
	top: -18%;
	right: 8%;
	width: 130px;
	height: 145%;
	background: rgb(245 166 35 / 7%);
	content: "";
	transform: skewX(-11deg);
	pointer-events: none;
}

.about-hero__media {
	position: absolute;
	inset: 0;
	margin: 0;
}

.about-hero__media img {
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center 48%;
	transform: scale(1.035);
}

.about-hero__container {
	position: relative;
	z-index: 3;
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(270px, 0.38fr);
	align-items: end;
	gap: clamp(52px, 8vw, 120px);
	min-height: min(790px, 84vh);
	padding-top: clamp(104px, 11vw, 154px);
	padding-bottom: clamp(82px, 9vw, 120px);
}

.about-hero__content {
	max-width: 780px;
}

.about-hero h1 {
	max-width: 10.5ch;
	margin: 0;
	color: #fff;
	font-size: clamp(56px, 6.6vw, 96px);
	line-height: 0.92;
	letter-spacing: -0.058em;
}

.about-hero__lead {
	max-width: 660px;
	margin: 28px 0 0;
	color: rgb(255 255 255 / 70%);
	font-size: 18px;
	line-height: 1.72;
}

.about-hero__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 24px;
	margin-top: 36px;
}

.about-text-link--light {
	color: #fff;
}

.about-hero__rail {
	align-self: end;
	margin: 0 0 4px;
	padding: 28px 30px 20px;
	border-top: 3px solid var(--color-orange);
	background: rgb(18 18 18 / 80%);
	box-shadow: 0 25px 60px rgb(0 0 0 / 20%);
	backdrop-filter: blur(8px);
}

.about-hero__rail > p {
	margin: 0 0 18px;
	color: rgb(255 255 255 / 48%);
	font-size: 10px;
	font-weight: 850;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.about-hero__rail ol {
	margin: 0;
	padding: 0;
	list-style: none;
}

.about-hero__rail li {
	display: grid;
	grid-template-columns: 38px 1fr;
	align-items: center;
	min-height: 54px;
	border-top: 1px solid rgb(255 255 255 / 12%);
}

.about-hero__rail span {
	color: var(--color-orange);
	font-size: 10px;
	font-weight: 850;
}

.about-hero__rail strong {
	color: #fff;
	font-size: 14px;
	line-height: 1.3;
}


/* Origin / parent company
   ========================================================================== */

.about-origin {
	padding: clamp(90px, 9vw, 140px) 0;
	background: #202020;
	color: #fff;
}

.about-origin__grid {
	display: grid;
	grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
	gap: clamp(70px, 10vw, 150px);
	align-items: start;
}

.about-origin__statement h2 {
	max-width: 760px;
	margin: 0;
	color: #fff;
	font-size: clamp(44px, 5vw, 72px);
	line-height: 0.96;
	letter-spacing: -0.055em;
}

.about-origin__content > p {
	max-width: 650px;
	margin: 0;
	color: rgb(255 255 255 / 62%);
	font-size: 16px;
	line-height: 1.78;
}

.about-origin__facts {
	margin-top: 38px;
	border-top: 1px solid rgb(255 255 255 / 14%);
}

.about-origin__facts > div {
	display: grid;
	grid-template-columns: minmax(130px, 0.6fr) 1.4fr;
	gap: 24px;
	align-items: center;
	min-height: 70px;
	border-bottom: 1px solid rgb(255 255 255 / 14%);
}

.about-origin__facts span {
	color: rgb(255 255 255 / 44%);
	font-size: 9px;
	font-weight: 850;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.about-origin__facts strong,
.about-origin__facts a {
	color: #fff;
	font-size: 14px;
	font-weight: 800;
}

.about-origin__facts a {
	text-decoration-color: var(--color-orange);
	text-underline-offset: 5px;
}


/* Specialized focus
   ========================================================================== */

.about-focus {
	padding: clamp(100px, 11vw, 170px) 0;
	background: #fff;
}

.about-focus__header {
	display: grid;
	grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.62fr);
	align-items: end;
	gap: clamp(60px, 9vw, 130px);
	margin-bottom: 58px;
}

.about-focus__header h2 {
	max-width: 800px;
	margin: 0;
	font-size: clamp(44px, 5.2vw, 74px);
	line-height: 0.96;
	letter-spacing: -0.055em;
}

.about-focus__header > p {
	margin: 0;
	padding-top: 26px;
	border-top: 1px solid var(--color-border-strong);
	color: var(--color-text-muted);
	font-size: 16px;
	line-height: 1.75;
}

.about-focus__composition {
	position: relative;
	min-height: 760px;
}

.about-focus__primary {
	position: absolute;
	inset: 0 34% 9% 0;
	margin: 0;
	overflow: hidden;
	background: #ddd;
	box-shadow: 0 30px 70px rgb(0 0 0 / 11%);
}

.about-focus__primary img,
.about-focus__detail img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.about-focus__primary img {
	object-position: center;
}

.about-focus__detail {
	position: absolute;
	z-index: 2;
	right: 27%;
	bottom: 0;
	width: 27%;
	height: 38%;
	margin: 0;
	overflow: hidden;
	border: 8px solid #fff;
	background: #ddd;
	box-shadow: 0 22px 50px rgb(0 0 0 / 17%);
}

.about-focus__levels {
	position: absolute;
	z-index: 3;
	top: 36px;
	right: 0;
	width: 33%;
	background: #202020;
	color: #fff;
	box-shadow: 0 24px 55px rgb(0 0 0 / 18%);
}

.about-focus__levels > div {
	display: grid;
	grid-template-columns: 48px 1fr;
	align-items: center;
	min-height: 64px;
	padding: 0 22px;
	border-bottom: 1px solid rgb(255 255 255 / 12%);
}

.about-focus__levels span {
	color: var(--color-orange);
	font-size: 9px;
	font-weight: 850;
}

.about-focus__levels strong {
	font-size: 14px;
}

.about-focus__panel {
	position: absolute;
	z-index: 4;
	right: 0;
	bottom: 44px;
	width: 37%;
	padding: 36px;
	border-top: 3px solid var(--color-orange);
	background: #fff;
	box-shadow: 0 28px 65px rgb(0 0 0 / 13%);
}

.about-focus__panel h3 {
	margin: 0;
	font-size: clamp(34px, 3.2vw, 50px);
	line-height: 0.98;
	letter-spacing: -0.05em;
}

.about-focus__panel > p:not(.eyebrow) {
	margin: 18px 0 24px;
	color: var(--color-text-muted);
	font-size: 14px;
	line-height: 1.7;
}


/* Physical presence
   ========================================================================== */

.about-presence {
	padding: clamp(92px, 9vw, 142px) 0;
	background: #f2f2f1;
}

.about-presence__top {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(300px, 0.62fr);
	gap: clamp(60px, 9vw, 130px);
	align-items: end;
	margin-bottom: 46px;
}

.about-presence__top h2 {
	margin: 0;
	font-size: clamp(44px, 5vw, 70px);
	line-height: 0.98;
	letter-spacing: -0.055em;
}

.about-presence__top > p {
	margin: 0;
	padding-top: 24px;
	border-top: 1px solid var(--color-border-strong);
	color: var(--color-text-muted);
	font-size: 15px;
	line-height: 1.72;
}

.about-presence__locations {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr)) minmax(260px, 0.72fr);
	border-top: 1px solid var(--color-border-strong);
	border-left: 1px solid var(--color-border-strong);
	background: #fff;
	box-shadow: 0 20px 55px rgb(0 0 0 / 6%);
}

.about-presence__locations > * {
	min-height: 260px;
	padding: 30px;
	border-right: 1px solid var(--color-border-strong);
	border-bottom: 1px solid var(--color-border-strong);
}

.about-presence__locations article > span {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 38px;
	height: 28px;
	margin-bottom: 54px;
	background: var(--color-orange);
	color: #202020;
	font-size: 10px;
	font-weight: 900;
}

.about-presence__locations h3 {
	margin: 0 0 16px;
	font-size: 24px;
}

.about-presence__locations address {
	color: var(--color-text-muted);
	font-size: 14px;
	font-style: normal;
	line-height: 1.7;
}

.about-presence__contact {
	display: flex;
	align-items: flex-start;
	justify-content: flex-end;
	flex-direction: column;
	background: #202020;
	color: #fff;
}

.about-presence__contact p {
	margin: 0 0 22px;
	color: var(--color-orange);
	font-size: 9px;
	font-weight: 850;
	letter-spacing: 0.12em;
	text-transform: uppercase;
}

.about-presence__contact a {
	display: inline-block;
	margin-top: 8px;
	color: #fff;
	font-size: 14px;
	font-weight: 800;
	text-decoration-color: var(--color-orange);
	text-underline-offset: 5px;
}


/* Support
   ========================================================================== */

.about-support {
	padding: clamp(100px, 10vw, 150px) 0;
	background: #fff;
}

.about-support__grid {
	display: grid;
	grid-template-columns: minmax(0, 1.05fr) minmax(360px, 0.95fr);
	align-items: center;
	gap: clamp(70px, 9vw, 130px);
}

.about-support__media {
	min-height: 560px;
	overflow: hidden;
	box-shadow: 0 28px 65px rgb(0 0 0 / 11%);
}

.about-support__media img {
	width: 100%;
	height: 100%;
	min-height: 560px;
	object-fit: cover;
}

.about-support__content h2 {
	margin: 0;
	font-size: clamp(44px, 5vw, 70px);
	line-height: 0.98;
	letter-spacing: -0.055em;
}

.about-support__content > p:not(.eyebrow) {
	margin: 22px 0 30px;
	color: var(--color-text-muted);
	font-size: 16px;
	line-height: 1.75;
}


/* Closing
   ========================================================================== */

.about-closing {
	padding: 0 0 clamp(95px, 10vw, 145px);
	background: #fff;
}

.about-closing__inner {
	position: relative;
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: center;
	gap: 60px;
	overflow: hidden;
	padding: clamp(46px, 6vw, 76px);
	border-left: 4px solid var(--color-orange);
	background: #202020;
	color: #fff;
	box-shadow: 0 28px 70px rgb(0 0 0 / 12%);
}

.about-closing__inner::after {
	position: absolute;
	top: -40%;
	right: 9%;
	width: 130px;
	height: 190%;
	background: rgb(245 166 35 / 8%);
	content: "";
	transform: skewX(-12deg);
}

.about-closing__inner > * {
	position: relative;
	z-index: 2;
}

.about-closing h2 {
	max-width: 780px;
	margin: 0;
	color: #fff;
	font-size: clamp(40px, 4.8vw, 66px);
	line-height: 0.98;
	letter-spacing: -0.052em;
}

.about-closing p:not(.eyebrow) {
	max-width: 620px;
	margin: 20px 0 0;
	color: rgb(255 255 255 / 62%);
}


/* Responsive
   ========================================================================== */

@media (hover: hover) and (pointer: fine) {
	.about-text-link:hover span {
		transform: translateX(4px);
	}
}

@media (max-width: 64rem) {
	.about-hero__container,
	.about-origin__grid,
	.about-focus__header,
	.about-presence__top,
	.about-support__grid,
	.about-closing__inner {
		grid-template-columns: 1fr;
	}

	.about-hero__rail {
		max-width: 460px;
	}

	.about-origin__grid,
	.about-support__grid {
		gap: 46px;
	}

	.about-focus__composition {
		min-height: 920px;
	}

	.about-focus__primary {
		inset: 0 15% 38% 0;
	}

	.about-focus__detail {
		right: 0;
		bottom: 29%;
		width: 38%;
		height: 30%;
	}

	.about-focus__levels {
		top: auto;
		right: auto;
		bottom: 0;
		left: 0;
		width: 46%;
	}

	.about-focus__panel {
		right: 0;
		bottom: 0;
		width: 51%;
	}

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

	.about-presence__contact {
		grid-column: 1 / -1;
		min-height: 190px;
	}
}

@media (max-width: 48rem) {
	.about-origin,
	.about-focus,
	.about-presence,
	.about-support {
		padding: 64px 0;
	}

	.about-hero,
	.about-hero__container {
		min-height: 720px;
	}

	.about-hero::after {
		background:
			linear-gradient(
				180deg,
				rgb(25 25 25 / 30%) 0%,
				rgb(25 25 25 / 82%) 48%,
				rgb(25 25 25 / 98%) 100%
			);
	}

	.about-hero__media img {
		object-position: 58% center;
	}

	.about-hero__container {
		grid-template-columns: 1fr;
		align-items: end;
		gap: 28px;
		padding-top: 245px;
		padding-bottom: 52px;
	}

	.about-hero h1 {
		max-width: 11ch;
		font-size: clamp(43px, 12.5vw, 59px);
	}

	.about-hero__lead {
		margin-top: 20px;
		font-size: 15px;
	}

	.about-hero__actions {
		align-items: stretch;
		flex-direction: column;
		gap: 16px;
		margin-top: 28px;
	}

	.about-hero__actions .button {
		width: 100%;
	}

	.about-hero__rail {
		width: 100%;
		max-width: none;
		padding: 22px 20px 16px;
	}

	.about-hero__rail li {
		min-height: 48px;
	}

	.about-hero__rail strong {
		font-size: 12px;
	}

	.about-origin__statement h2,
	.about-focus__header h2,
	.about-presence__top h2,
	.about-support__content h2 {
		font-size: 35px;
	}

	.about-origin__facts > div {
		grid-template-columns: 1fr;
		gap: 5px;
		padding: 16px 0;
	}

	.about-focus__header,
	.about-presence__top {
		gap: 20px;
		margin-bottom: 32px;
	}

	.about-focus__composition {
		min-height: 760px;
	}

	.about-focus__primary {
		inset: 0 0 49% 0;
	}

	.about-focus__detail {
		right: 0;
		bottom: 39%;
		width: 48%;
		height: 24%;
		border-width: 6px;
	}

	.about-focus__levels {
		bottom: 0;
		width: 42%;
	}

	.about-focus__levels > div {
		grid-template-columns: 32px 1fr;
		padding: 0 14px;
	}

	.about-focus__levels strong {
		font-size: 11px;
	}

	.about-focus__panel {
		bottom: 0;
		width: 58%;
		padding: 24px 20px;
	}

	.about-focus__panel h3 {
		font-size: 29px;
	}

	.about-presence__locations {
		grid-template-columns: 1fr;
	}

	.about-presence__contact {
		grid-column: auto;
		min-height: 190px;
	}

	.about-support__media,
	.about-support__media img {
		min-height: 390px;
	}

	.about-closing {
		padding-bottom: 64px;
	}

	.about-closing__inner {
		padding: 34px 24px;
	}

	.about-closing h2 {
		font-size: 34px;
	}

	.about-closing .button {
		width: 100%;
	}
}

@media (prefers-reduced-motion: reduce) {
	.about-text-link span {
		transition: none;
	}
}


/* Final NL location semantics */
.about-presence__type {
	margin: 0 0 8px;
	color: var(--color-orange-dark);
	font-size: 9px;
	font-weight: 850;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

.about-presence__note {
	max-width: 330px;
	margin: 18px 0 0;
	color: var(--color-text-muted);
	font-size: 12px;
	line-height: 1.6;
}

.about-presence__showroom {
	position: relative;
}

.about-presence__showroom::after {
	position: absolute;
	top: 0;
	right: 0;
	width: 34px;
	height: 3px;
	background: var(--color-orange);
	content: "";
}

.about-presence__showroom .about-text-link {
	margin-top: 18px;
}


/* V1.3.0 mobile final */
@media (max-width: 48rem) {
    .about-hero__container,
    .about-hero__content,
    .about-hero__rail {
        min-width: 0;
    }

    .about-hero h1 {
        max-width: 100%;
        font-size: clamp(34px, 9.4vw, 44px);
        line-height: 0.98;
        letter-spacing: -0.045em;
        hyphens: auto;
        overflow-wrap: break-word;
    }

    .about-hero__media img {
        object-position: 52% center;
    }

    .about-origin__statement h2,
    .about-focus__header h2,
    .about-presence__top h2,
    .about-support__content h2,
    .about-closing h2 {
        max-width: 100%;
        font-size: clamp(29px, 8vw, 35px);
        hyphens: auto;
        overflow-wrap: break-word;
    }
}