/* ==========================================================================
   Uras Kauçuk — main stylesheet
   Tokens → base → layout → components → pages → motion
   ========================================================================== */

:root {
	--paper: #F3F5F4;
	--surface: #FFFFFF;
	--ink: #0C1B2E;
	--ink-soft: #44546A;
	--line: #D3DADF;
	--line-strong: #AEB9C2;
	--navy: #23317A;
	--teal: #0A6B66;
	--teal-ink: #07504C;
	--teal-wash: #DCEBE9;
	--rubber: #1A1C20;
	--pu: #C98A1C;
	--silicone: #A9D3E1;
	--danger: #B42318;
	--danger-wash: #FDECEA;

	--font: var(--wp--preset--font-family--archivo, Archivo, "Helvetica Neue", Arial, sans-serif);
	--fs-display: clamp(2.5rem, 1.15rem + 4.6vw, 5rem);
	--fs-h1: clamp(2.3rem, 1.3rem + 3.4vw, 4.25rem);
	--fs-h2: clamp(1.9rem, 1.25rem + 2.3vw, 3.25rem);
	--fs-h3: clamp(1.2rem, 1.08rem + .45vw, 1.45rem);
	--fs-lead: clamp(1.1rem, 1.02rem + .35vw, 1.3rem);
	--fs-small: .9375rem;
	--fs-xs: .8125rem;

	--gutter: clamp(16px, 4vw, 48px);
	--max: 1320px;
	--section: clamp(72px, 9vw, 136px);
	--header-h: 72px;
	--radius: 4px;
	--radius-lg: 14px;

	--ease-out: cubic-bezier(.2, .7, .2, 1);
	--ease-inout: cubic-bezier(.65, 0, .35, 1);
}

/* ---------- Base ---------- */

*, *::before, *::after { box-sizing: border-box; }

html {
	-webkit-text-size-adjust: 100%;
	text-size-adjust: 100%;
	scroll-padding-top: calc(var(--header-h) + 16px);
}

@media (prefers-reduced-motion: no-preference) {
	html { scroll-behavior: smooth; }
}

body {
	margin: 0;
	background: var(--paper);
	color: var(--ink);
	font-family: var(--font);
	font-size: 1.0625rem;
	line-height: 1.6;
	font-kerning: normal;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

.wp-site-blocks { padding: 0; }
.wp-site-blocks > .wp-block-template-part { display: contents; }
.wp-site-blocks > * { margin-block: 0; }

img, svg { max-width: 100%; }
img { height: auto; display: block; }

a { color: var(--teal); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { color: var(--teal-ink); }

h1, h2, h3, h4 { margin: 0; font-weight: 620; line-height: 1.08; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; }
[role="list"] { list-style: none; }

:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; border-radius: 2px; }

::selection { background: var(--teal-wash); color: var(--ink); }

.visually-hidden, .sr-defs {
	position: absolute !important;
	width: 1px; height: 1px;
	padding: 0; margin: -1px;
	overflow: hidden; clip: rect(0 0 0 0);
	white-space: nowrap; border: 0;
}

.skip-link {
	position: absolute; left: 16px; top: -100px; z-index: 100;
	background: var(--ink); color: #fff; padding: 12px 18px; border-radius: var(--radius);
	font-weight: 600; text-decoration: none;
}
.skip-link:focus { top: 12px; color: #fff; }

.icon { width: 1.25em; height: 1.25em; flex: none; }

/* ---------- Layout ---------- */

.wrap {
	width: 100%;
	max-width: calc(var(--max) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.section { padding-block: var(--section); }
.section + .section { border-top: 1px solid var(--line); }

.section-head { display: grid; gap: 20px; margin-bottom: clamp(40px, 5vw, 72px); max-width: 760px; }
.section-title {
	font-size: var(--fs-h2);
	font-stretch: 110%;
	font-weight: 620;
	letter-spacing: -.022em;
	line-height: 1.04;
}
.section-intro { color: var(--ink-soft); font-size: var(--fs-lead); line-height: 1.5; max-width: 58ch; }

.lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-soft); max-width: 58ch; }

.text-link {
	display: inline-flex; align-items: center; gap: .4em;
	min-height: 44px;
	font-weight: 600; font-stretch: 104%;
	color: var(--teal);
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .3em;
	transition: text-decoration-thickness .2s, color .2s;
}
.text-link:hover { text-decoration-thickness: 2px; }

/* ---------- Buttons ---------- */

.btn {
	--btn-bg: transparent; --btn-fg: var(--ink); --btn-bd: transparent;
	display: inline-flex; align-items: center; justify-content: center; gap: .5em;
	min-height: 48px; padding: 0 22px;
	border: 1px solid var(--btn-bd); border-radius: var(--radius);
	background: var(--btn-bg); color: var(--btn-fg);
	font: inherit; font-size: 1rem; font-weight: 600; font-stretch: 104%; line-height: 1.1;
	text-decoration: none; white-space: nowrap; cursor: pointer;
	touch-action: manipulation;
	transition: background-color .2s var(--ease-out), color .2s var(--ease-out), border-color .2s var(--ease-out), transform .15s var(--ease-out);
}
.btn:active { transform: translateY(1px); }
.btn--lg { min-height: 56px; padding: 0 28px; font-size: 1.0625rem; }
.btn--primary { --btn-bg: var(--teal); --btn-fg: #fff; }
.btn--primary:hover { --btn-bg: var(--teal-ink); color: #fff; }
.btn--ghost { --btn-bd: var(--line-strong); }
.btn--ghost:hover { --btn-bd: var(--ink); --btn-bg: var(--ink); color: #fff; }
.btn--light { --btn-bg: #fff; --btn-fg: var(--ink); }
.btn--light:hover { --btn-bg: var(--teal-wash); color: var(--ink); }
.btn[disabled], .btn[aria-busy="true"] { opacity: .7; cursor: progress; }

/* ---------- Brand ---------- */

.brand {
	--mark-dot: #fff;
	display: inline-flex; align-items: center; gap: 10px;
	color: var(--ink); text-decoration: none;
	min-height: 44px;
}
.brand:hover { color: var(--ink); }
.brand__img {
	display: block; width: auto; max-width: min(260px, 52vw);
	object-fit: contain; object-position: left center;
}
.brand__img--invert { filter: brightness(0) invert(1); }
.site-footer .brand__img { max-width: 240px; }
.brand__mark { width: 40px; height: 40px; color: var(--ink); }
.brand__mark circle { fill: var(--mark-dot); }
.brand__word {
	display: grid;
	font-size: 1.05rem; font-weight: 720; font-stretch: 122%;
	letter-spacing: .01em; line-height: 1; text-transform: uppercase;
}
.brand__sub {
	font-size: .66rem; font-weight: 520; font-stretch: 125%; letter-spacing: .3em;
	color: var(--ink-soft); margin-top: 4px;
}
.brand--light { color: #fff; --rubber: #F3F5F4; --navy: #8FB0E3; --mark-dot: var(--ink); }
.brand--light:hover { color: #fff; }
.brand--light .brand__mark { color: rgba(255, 255, 255, .6); }
.brand--light .brand__sub { color: rgba(255, 255, 255, .65); }

/* ---------- Header ---------- */

.site-header {
	position: sticky; top: 0; z-index: 50;
	height: var(--header-h);
}
.site-header::before {
	content: ""; position: absolute; inset: 0; z-index: 0;
	background: transparent; border-bottom: 1px solid transparent;
	transition: background-color .3s var(--ease-out), border-color .3s var(--ease-out);
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 0; } }

.site-header.is-scrolled::before {
	background: color-mix(in srgb, var(--paper) 88%, transparent);
	border-bottom-color: var(--line);
	-webkit-backdrop-filter: saturate(1.4) blur(14px);
	backdrop-filter: saturate(1.4) blur(14px);
}
@supports not (background: color-mix(in srgb, red 50%, blue)) {
	.site-header.is-scrolled::before { background: rgba(243, 245, 244, .94); }
}

.site-header__bar {
	position: relative; z-index: 3;
	height: 100%;
	display: flex; align-items: center; gap: 24px;
}
.site-header__bar .brand { margin-right: auto; }

.site-nav__list { display: flex; gap: 4px; list-style: none; }
.site-nav__link {
	display: inline-flex; align-items: center;
	min-height: 44px; padding: 0 12px;
	color: var(--ink); text-decoration: none;
	font-weight: 520; font-stretch: 104%;
	position: relative;
}
.site-nav__link::after {
	content: ""; position: absolute; left: 12px; right: 12px; bottom: 8px; height: 2px;
	background: var(--teal); transform: scaleX(0); transform-origin: left;
	transition: transform .35s var(--ease-out);
}
.site-nav__link:hover { color: var(--ink); }
.site-nav__link:hover::after, .site-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.site-nav__extra, .site-nav__home, .nav-scrim { display: none; }
.site-nav__link { padding: 0 10px; }
.site-nav__link::after { left: 10px; right: 10px; }
.site-nav__link[data-section-current]::after { transform: scaleX(1); }

/* Services submenu */
.has-sub { position: relative; }
.site-nav__row { display: flex; align-items: center; }
.site-nav__row .site-nav__link { padding-right: 2px; }
.site-nav__row .site-nav__link::after { right: 2px; }
.sub-toggle {
	display: inline-grid; place-items: center;
	width: 28px; height: 44px; padding: 0; margin: 0;
	border: 0; background: none; color: var(--ink-soft); cursor: pointer; border-radius: var(--radius);
}
.sub-toggle .icon { width: 16px; height: 16px; transition: transform .3s var(--ease-out); }
.sub-toggle:hover { color: var(--ink); }
.has-sub.is-open .sub-toggle .icon { transform: rotate(180deg); }
.sub {
	list-style: none;
	position: absolute; top: 100%; left: -8px; z-index: 10;
	min-width: 400px; padding: 8px;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
	box-shadow: 0 24px 48px -24px rgba(12, 27, 46, .35);
	opacity: 0; visibility: hidden; transform: translateY(6px);
	transition: opacity .2s var(--ease-out), transform .3s var(--ease-out), visibility 0s linear .3s;
}
/* Bridge the gap so the pointer can travel from the link to the panel. */
.sub::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.has-sub.is-open > .sub { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease-out), transform .3s var(--ease-out), visibility 0s; }
@media (hover: hover) and (min-width: 1280px) {
	.has-sub:hover > .sub { opacity: 1; visibility: visible; transform: none; transition: opacity .2s var(--ease-out), transform .3s var(--ease-out), visibility 0s; }
	.has-sub:hover .sub-toggle .icon { transform: rotate(180deg); }
}
.sub__link {
	display: flex; align-items: center; gap: 12px;
	min-height: 48px; padding: 8px 12px; border-radius: 10px;
	color: var(--ink); text-decoration: none; font-weight: 520; font-stretch: 102%; line-height: 1.3;
	transition: background-color .2s;
}
.sub__link:hover { background: var(--paper); color: var(--ink); }
.sub__link[aria-current="page"] { background: var(--teal-wash); color: var(--teal-ink); }
.sub__face { width: 28px; height: 28px; flex: none; transition: transform .6s var(--ease-out); }
.sub__link:hover .sub__face { transform: rotate(90deg); }
.sub__all { border-bottom: 1px solid var(--line); margin-bottom: 6px; padding-bottom: 6px; }
.sub__all .sub__link { color: var(--teal); font-weight: 600; }


.site-header__tools { display: flex; align-items: center; gap: 12px; position: relative; z-index: 3; }
.site-header__bar > .brand { position: relative; z-index: 3; }

.lang { display: inline-flex; border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 2px; }
.lang__opt {
	display: inline-grid; place-items: center;
	min-width: 40px; min-height: 40px;
	font-size: var(--fs-xs); font-weight: 650; letter-spacing: .04em;
	color: var(--ink-soft); text-decoration: none; border-radius: 2px;
	transition: background-color .2s, color .2s;
}
.lang__opt:hover { color: var(--ink); background: var(--surface); }
.lang__opt[aria-current="true"] { background: var(--ink); color: #fff; }

.menu-toggle {
	display: none;
	width: 48px; height: 48px; padding: 0;
	border: 1px solid var(--line-strong); border-radius: var(--radius);
	background: transparent; color: var(--ink); cursor: pointer;
}
.menu-toggle__box { display: grid; gap: 6px; width: 20px; margin: auto; }
.menu-toggle__box span {
	display: block; height: 2px; background: currentColor; border-radius: 1px;
	transition: transform .35s var(--ease-out);
}
.menu-toggle[aria-expanded="true"] .menu-toggle__box span:first-child { transform: translateY(4px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__box span:last-child { transform: translateY(-4px) rotate(-45deg); }

@media (max-width: 1279px) {
	.menu-toggle { display: inline-grid; background: color-mix(in srgb, var(--paper) 80%, transparent); }
	.site-header__cta { display: none; }
	.site-header.is-open .lang { visibility: hidden; }

	.nav-scrim {
		display: block;
		position: fixed; inset: 0; z-index: 1;
		background: rgba(12, 27, 46, .32);
		-webkit-backdrop-filter: blur(8px) saturate(1.2);
		backdrop-filter: blur(8px) saturate(1.2);
		opacity: 0;
		transition: opacity .45s var(--ease-out);
	}
	.nav-scrim[hidden] { display: block; pointer-events: none; }
	.site-header.is-open .nav-scrim { opacity: 1; pointer-events: auto; }

	.site-nav {
		position: fixed; top: 0; right: 0; bottom: 0; z-index: 2;
		width: min(420px, 88vw);
		display: flex; flex-direction: column; justify-content: space-between; gap: 32px;
		padding: calc(var(--header-h) + 16px) clamp(24px, 6vw, 40px) calc(32px + env(safe-area-inset-bottom));
		background: color-mix(in srgb, var(--paper) 90%, transparent);
		-webkit-backdrop-filter: blur(24px) saturate(1.5);
		backdrop-filter: blur(24px) saturate(1.5);
		border-left: 1px solid rgba(255, 255, 255, .6);
		box-shadow: -24px 0 64px -32px rgba(12, 27, 46, .45);
		overflow-y: auto; overscroll-behavior: contain;
		transform: translateX(104%);
		visibility: hidden;
		transition: transform .55s var(--ease-inout), visibility 0s linear .55s;
	}
	@supports not (background: color-mix(in srgb, red 50%, blue)) { .site-nav { background: rgba(243, 245, 244, .96); } }
	.admin-bar .site-nav { top: 46px; }
	.site-header.is-open .site-nav {
		transform: none;
		visibility: visible;
		transition: transform .55s var(--ease-inout), visibility 0s;
	}
	.site-nav__home { display: list-item; }
	.site-nav__list { flex-direction: column; gap: 0; }
	.site-nav__list > li { border-bottom: 1px solid var(--line); }
	.site-nav__link {
		width: 100%; min-height: 58px; padding: 0;
		font-size: clamp(1.4rem, 1.15rem + 1.2vw, 1.75rem); font-weight: 600; font-stretch: 112%;
		letter-spacing: -.015em;
	}
	.site-nav__link::after { display: none; }
	.site-nav__link[aria-current="page"] { color: var(--teal); }
	.site-nav__extra { display: grid; gap: 16px; }
	.site-nav__extra .btn { width: 100%; }
	.site-nav__contact {
		display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
		color: var(--ink); font-weight: 600; text-decoration: none;
	}
	.site-nav__list > li, .site-nav__extra {
		opacity: 0; transform: translateX(24px);
		transition: opacity .3s var(--ease-out), transform .5s var(--ease-out);
	}
	.site-header.is-open .site-nav__list > li, .site-header.is-open .site-nav__extra {
		opacity: 1; transform: none;
		transition-delay: calc(160ms + var(--n, 0) * 40ms);
	}
	.site-nav__list > li:nth-child(1) { --n: 0; }
	.site-nav__list > li:nth-child(2) { --n: 1; }
	.site-nav__list > li:nth-child(3) { --n: 2; }
	.site-nav__list > li:nth-child(4) { --n: 3; }
	.site-nav__list > li:nth-child(5) { --n: 4; }
	.site-nav__list > li:nth-child(6) { --n: 5; }
	.site-nav__list > li:nth-child(7) { --n: 6; }
	.site-nav__list > li:nth-child(8) { --n: 7; }
	.site-nav__extra { --n: 8; }

	/* Services submenu as an accordion inside the drawer. */
	.site-nav__row { justify-content: space-between; }
	.site-nav__row .site-nav__link { padding-right: 0; }
	.sub-toggle { width: 48px; height: 48px; border: 1px solid var(--line-strong); }
	.sub-toggle .icon { width: 20px; height: 20px; }
	.sub {
		position: static; min-width: 0; padding: 0; margin: 0;
		background: none; border: 0; border-radius: 0; box-shadow: none;
		opacity: 1; transform: none;
		max-height: 0; overflow: hidden; visibility: hidden;
		transition: max-height .45s var(--ease-inout), visibility 0s linear .45s;
	}
	.sub::before { display: none; }
	.has-sub.is-open > .sub { max-height: 40rem; visibility: visible; transition: max-height .45s var(--ease-inout), visibility 0s; }
	.sub__link { min-height: 48px; padding: 6px 4px; font-size: 1rem; }
	.sub__all { border: 0; margin: 0; padding: 0; }
	.has-sub.is-open > .sub { padding-bottom: 12px; }

}

@media (max-width: 479px) {
	.brand__word { font-size: .95rem; }
	.brand__mark { width: 36px; height: 36px; }
	.site-header__bar { gap: 12px; }
}

/* ---------- Home: hero ---------- */

.hero { padding-top: clamp(24px, 4vw, 56px); overflow: clip; }
.hero__grid {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	column-gap: clamp(16px, 2vw, 32px);
	align-items: center;
}
.hero__text { grid-column: 1 / span 6; display: grid; gap: 24px; padding-block: 24px; }
.hero__art { grid-column: 7 / span 6; display: grid; gap: 20px; }

.hero__place { color: var(--ink-soft); font-size: var(--fs-small); font-weight: 520; }
.hero__title {
	font-size: var(--fs-display);
	font-stretch: 112%;
	font-weight: 640;
	letter-spacing: -.028em;
	line-height: 1;
	max-width: 15ch;
}
.home .hero__title { font-size: clamp(2.3rem, 1.2rem + 3.3vw, 4.1rem); max-width: 17ch; }
.lang-en .home .hero__title { max-width: 19ch; }
.hero__lead { max-width: 46ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }

.hero__drawing { position: relative; aspect-ratio: 720 / 640; margin-inline: -4%; }
.rollers { width: 100%; height: 100%; display: block; overflow: visible; }
.roller { transition: opacity .35s var(--ease-out), filter .35s var(--ease-out); }
.rollers.has-focus .roller:not(.is-focus) { opacity: .28; filter: saturate(.3); }

.hero__legend {
	display: grid; grid-template-columns: repeat(auto-fit, minmax(176px, 1fr)); gap: 8px;
	list-style: none;
}
.legend-item {
	display: grid; grid-template-columns: 36px 1fr; column-gap: 10px; align-items: center;
	padding: 10px; border-radius: var(--radius);
	color: var(--ink); text-decoration: none;
	transition: background-color .2s;
}
.legend-item:hover, .legend-item:focus-visible { background: var(--surface); color: var(--ink); }
.legend-item__face { grid-row: span 2; width: 36px; height: 36px; }
.legend-item__name { font-weight: 640; font-stretch: 106%; line-height: 1.2; }
.legend-item__spec { white-space: nowrap; font-size: var(--fs-xs); color: var(--ink-soft); font-variant-numeric: tabular-nums; line-height: 1.3; }

.specline {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: clamp(32px, 5vw, 64px) 0 0; padding: 0;
	border-top: 1px solid var(--line-strong);
}
.specline > div { padding: 20px 20px 28px 0; }
.specline > div + div { padding-left: 20px; border-left: 1px solid var(--line); }
.specline dt { font-size: var(--fs-small); color: var(--ink-soft); }
.specline dd {
	margin: 6px 0 0;
	font-size: clamp(1.15rem, 1rem + .6vw, 1.5rem); font-weight: 620; font-stretch: 108%;
	font-variant-numeric: tabular-nums; letter-spacing: -.01em;
}

@media (max-width: 959px) {
	.hero__text, .hero__art { grid-column: 1 / -1; }
	.hero__art { margin-top: 8px; }
	.hero__drawing { margin-inline: 0; max-width: 620px; justify-self: center; width: 100%; }
	.specline { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.specline > div:nth-child(3) { padding-left: 0; border-left: 0; }
	.specline > div:nth-child(n+3) { border-top: 1px solid var(--line); }
}
@media (max-width: 559px) {
	.hero__legend { grid-template-columns: 1fr; gap: 0; }
	.legend-item { padding: 8px 0; }
	.hero__actions .btn { flex: 1 1 100%; }
}

/* ---------- Home: materials rows ---------- */

.mat-rows { list-style: none; border-bottom: 1px solid var(--line-strong); }
.mat-row { position: relative; }
.mat-row::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
	background: var(--line-strong); transform-origin: left;
}
.mat-row__link {
	display: grid;
	grid-template-columns: 88px minmax(0, .9fr) minmax(0, 1.3fr) minmax(0, 1fr);
	gap: clamp(16px, 2.5vw, 40px); align-items: center;
	padding: clamp(24px, 3vw, 40px) 0;
	color: var(--ink); text-decoration: none;
	transition: background-color .3s var(--ease-out), padding .4s var(--ease-out);
}
.mat-row__face { width: 88px; height: 88px; transition: transform .8s var(--ease-out); }
.mat-row__name {
	font-size: clamp(1.8rem, 1.3rem + 1.8vw, 2.75rem);
	font-weight: 620; font-stretch: 118%; letter-spacing: -.025em; line-height: 1;
}
.mat-row__desc { color: var(--ink-soft); max-width: 48ch; }
.mat-row__specs { display: grid; gap: 4px; font-size: var(--fs-small); font-variant-numeric: tabular-nums; }
.mat-row__k { display: inline-block; min-width: 7.5em; color: var(--ink-soft); }
.mat-row__link:hover { color: var(--ink); }
@media (hover: hover) {
	.mat-row__link:hover { background: var(--surface); padding-inline: 20px; }
	.mat-row__link:hover .mat-row__face { transform: rotate(120deg); }
}
@media (max-width: 899px) {
	.mat-row__link { grid-template-columns: 64px 1fr; row-gap: 12px; }
	.mat-row__face { width: 64px; height: 64px; grid-row: span 1; }
	.mat-row__desc, .mat-row__specs { grid-column: 1 / -1; }
}

/* ---------- Home: services index ---------- */

/* Heading with the "all services" link on the right. */
.section-head--row {
	max-width: none;
	display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px 40px;
}
.section-head__text { display: grid; gap: 20px; max-width: 760px; }

/* Service cards: one per service, photo on top. */
.svc-cards {
	list-style: none;
	display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 28px);
}
.svc-card { display: flex; }
.svc-card__link {
	display: flex; flex-direction: column; width: 100%;
	background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg);
	overflow: hidden; color: var(--ink); text-decoration: none;
	transition: border-color .3s var(--ease-out), box-shadow .4s var(--ease-out), transform .4s var(--ease-out);
}
.svc-card__link:hover { color: var(--ink); border-color: var(--line-strong); box-shadow: 0 24px 48px -28px rgba(12, 27, 46, .35); }
.svc-card__link:focus-visible { outline-offset: 3px; }
.svc-card__media {
	position: relative; aspect-ratio: 4 / 3; overflow: hidden;
	background: var(--line); display: grid; place-items: center;
}
.svc-card__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); }
/* No photo yet: the service's material drawing on a tinted panel, so the grid stays even. */
.svc-card__media--kaucuk { background: radial-gradient(120% 90% at 30% 20%, #3A3F47, #15171B); }
.svc-card__media--poliuretan { background: radial-gradient(120% 90% at 30% 20%, #F2CF8B, #C4831C); }
.svc-card__media--silikon { background: radial-gradient(120% 90% at 30% 20%, #EEF7FA, #9CC8D7); }
.svc-card__face { width: 38%; height: auto; filter: drop-shadow(0 18px 24px rgba(12, 27, 46, .3)); transition: transform 1.2s var(--ease-out); }
.svc-card__body { display: grid; gap: 10px; align-content: start; flex: 1; padding: clamp(18px, 2vw, 24px); }
.svc-card__title { font-size: var(--fs-h3); font-stretch: 106%; font-weight: 620; letter-spacing: -.01em; transition: color .2s; }
.svc-card__text { color: var(--ink-soft); font-size: var(--fs-small); }
.svc-card__more {
	display: inline-flex; align-items: center; gap: 6px; margin-top: auto; padding-top: 6px;
	color: var(--teal); font-weight: 600; font-size: var(--fs-small);
}
.svc-card__more .icon { width: 18px; height: 18px; transition: transform .3s var(--ease-out); }
@media (hover: hover) {
	.svc-card__link:hover .svc-card__img { transform: scale(1.05); }
	.svc-card__link:hover .svc-card__face { transform: rotate(120deg); }
	.svc-card__link:hover .svc-card__title { color: var(--teal-ink); }
	.svc-card__link:hover .svc-card__more .icon { transform: translateX(4px); }
}
@media (max-width: 1023px) { .svc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 599px) { .svc-cards { grid-template-columns: 1fr; } }

.ind::before, .step::before {
	content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
	background: var(--line-strong); transform-origin: left;
}

/* ---------- Home: process ---------- */

.process { background: var(--surface); }
.process__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); }
.process__head {
	grid-column: 1 / span 5; align-self: start;
	position: sticky; top: calc(var(--header-h) + 32px);
	display: grid; gap: 20px;
}
.process__meter { height: 2px; background: var(--line); margin-top: 16px; max-width: 360px; overflow: hidden; }
.process__meter span {
	display: block; height: 100%; background: var(--teal);
	transform: scaleX(var(--progress, 0)); transform-origin: left;
	transition: transform .5s var(--ease-out);
}
.steps { grid-column: 7 / -1; list-style: none; }
.step {
	position: relative;
	display: grid; grid-template-columns: 72px 1fr; column-gap: 20px; row-gap: 8px;
	padding: 32px 0 40px;
	transition: opacity .5s var(--ease-out);
}
.step__n {
	grid-row: span 2;
	font-size: 2.75rem; font-weight: 300; font-stretch: 125%; line-height: .9;
	font-variant-numeric: tabular-nums; color: var(--teal);
}
.step__title { font-size: var(--fs-h3); font-stretch: 106%; font-weight: 620; }
.step__text { color: var(--ink-soft); max-width: 52ch; }
.js .process.is-tracking .step { opacity: .38; }
.js .process.is-tracking .step.is-active { opacity: 1; }

@media (max-width: 959px) {
	.process__head { grid-column: 1 / -1; position: static; margin-bottom: 32px; }
	.steps { grid-column: 1 / -1; }
	.js .process.is-tracking .step { opacity: 1; }
	.process__meter { display: none; }
}
@media (max-width: 479px) {
	.step { grid-template-columns: 1fr; }
	.step__n { grid-row: auto; font-size: 2rem; margin-bottom: 4px; }
}

/* ---------- Home: industries ---------- */

.ind-grid {
	display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: clamp(20px, 2.5vw, 40px);
	list-style: none; margin-bottom: 40px;
}
.ind-grid--full { margin-bottom: 56px; }
.ind { position: relative; padding: 24px 0 36px; display: grid; gap: 8px; align-content: start; }
.ind__title { font-size: 1.2rem; font-stretch: 106%; font-weight: 620; }
.ind__text { color: var(--ink-soft); font-size: var(--fs-small); }
@media (max-width: 1023px) { .ind-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 519px) { .ind-grid { grid-template-columns: 1fr; } .ind { padding-bottom: 24px; } }

/* ---------- Home: plant ---------- */

.plant__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; align-items: start; }
.plant__text { grid-column: 1 / span 5; display: grid; gap: 20px; }
.plant__text p { color: var(--ink-soft); max-width: 50ch; }
.plant__table { grid-column: 7 / -1; }
@media (max-width: 959px) { .plant__text, .plant__table { grid-column: 1 / -1; } }

/* ---------- Tables ---------- */

.spec-table { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.spec-table th, .spec-table td { padding: 16px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.spec-table tr:first-child th, .spec-table tr:first-child td { border-top: 1px solid var(--line-strong); }
.spec-table th { font-weight: 450; color: var(--ink-soft); padding-right: 24px; }
.spec-table td { font-weight: 620; font-stretch: 104%; text-align: right; }
.spec-table thead th { font-size: var(--fs-small); font-weight: 600; color: var(--ink); border-top: 0; }

.table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); }
.table-scroll:focus-visible { outline-offset: -3px; }

.data-table { width: 100%; min-width: 640px; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.data-table caption { text-align: left; font-size: var(--fs-small); color: var(--ink-soft); padding-bottom: 16px; caption-side: top; }
.data-table th, .data-table td { padding: 14px 16px 14px 0; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.data-table thead th { font-size: var(--fs-small); font-weight: 620; border-bottom: 1px solid var(--ink); white-space: nowrap; }
.data-table tbody th { font-weight: 560; }
.data-table td { color: var(--ink-soft); }

.rate { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; color: var(--ink); }
.rate__bar { display: inline-flex; gap: 3px; }
.rate__bar i { width: 14px; height: 6px; border-radius: 1px; background: var(--line); }
.rate__bar i.on { background: var(--teal); }
.rate__txt { font-size: var(--fs-small); color: var(--ink-soft); }

/* ---------- CTA band + footer ---------- */

.cta-band { background: var(--ink); color: #fff; padding-block: clamp(64px, 8vw, 112px); }
.cta-band__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 32px; align-items: end; }
.cta-band__text { grid-column: 1 / span 8; display: grid; gap: 16px; }
.cta-band__text p { color: rgba(255, 255, 255, .78); font-size: var(--fs-lead); max-width: 52ch; }
.cta-band__title {
	font-size: var(--fs-h2); font-stretch: 110%; font-weight: 600; letter-spacing: -.02em; line-height: 1.06;
	max-width: 22ch;
}
.cta-band__actions { grid-column: 9 / -1; display: grid; gap: 16px; justify-items: start; }
.cta-band__phone {
	display: inline-flex; align-items: center; gap: 10px; min-height: 44px;
	color: #fff; font-size: 1.15rem; font-weight: 600; font-variant-numeric: tabular-nums; text-decoration: none;
}
.cta-band__phone:hover { color: var(--teal-wash); text-decoration: underline; }
@media (max-width: 899px) {
	.cta-band__text, .cta-band__actions { grid-column: 1 / -1; }
}

.site-footer { background: var(--ink); color: rgba(255, 255, 255, .78); border-top: 1px solid rgba(255, 255, 255, .12); font-size: var(--fs-small); }
.site-footer a { color: #fff; text-decoration: none; }
.site-footer a:hover { color: #fff; text-decoration: underline; }
.site-footer__grid {
	display: grid; grid-template-columns: 1.4fr 1fr 1.4fr; gap: 40px;
	padding-block: clamp(48px, 6vw, 80px);
}
.site-footer__brand { display: grid; gap: 20px; align-content: start; }
.site-footer__brand p { max-width: 36ch; }
.site-footer__heading { font-size: var(--fs-small); font-weight: 620; color: #fff; margin-bottom: 16px; }
.site-footer__col ul { list-style: none; display: grid; gap: 4px; }
.site-footer__col li a { display: inline-flex; min-height: 36px; align-items: center; }
.contact-list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: start; padding: 6px 0; }
.contact-list .icon { margin-top: 2px; color: rgba(255, 255, 255, .6); }
.site-footer__base {
	display: flex; flex-wrap: wrap; gap: 8px 32px; justify-content: space-between;
	padding-block: 24px calc(24px + env(safe-area-inset-bottom));
	border-top: 1px solid rgba(255, 255, 255, .12);
	color: rgba(255, 255, 255, .6);
}
.site-footer__base a { display: inline-flex; min-height: 32px; align-items: center; }
@media (max-width: 899px) { .site-footer__grid { grid-template-columns: 1fr 1fr; } .site-footer__brand { grid-column: 1 / -1; } }
@media (max-width: 559px) { .site-footer__grid { grid-template-columns: 1fr; } }

/* ---------- Inner pages ---------- */

.page-hero { padding-block: clamp(32px, 5vw, 72px) clamp(56px, 7vw, 104px); border-bottom: 1px solid var(--line); overflow: clip; }
.page-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); align-items: end; }
.page-hero__text { grid-column: 1 / span 8; display: grid; gap: 24px; }
.page-hero__title {
	font-size: var(--fs-h1); font-stretch: 112%; font-weight: 640; letter-spacing: -.026em; line-height: 1;
	max-width: 16ch;
}
.page-hero__art { grid-column: 10 / -1; justify-self: end; width: min(100%, 280px); }
.page-hero__face { width: 100%; height: auto; }
@media (max-width: 767px) {
	.page-hero__text { grid-column: 1 / -1; }
	.page-hero__art { display: none; }
}

.crumbs { display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-small); color: var(--ink-soft); }
.crumbs a { color: var(--ink-soft); text-decoration: none; }
.crumbs a:hover { color: var(--ink); text-decoration: underline; }

.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 32px; }
.split__side { grid-column: 1 / span 4; }
.split__main { grid-column: 6 / -1; }
.split__side--sticky { align-self: start; position: sticky; top: calc(var(--header-h) + 32px); }
@media (max-width: 959px) {
	.split__side, .split__main { grid-column: 1 / -1; }
	.split__side--sticky { position: static; }
}

.prose { display: grid; gap: 1.1em; max-width: 64ch; }
.prose p { color: var(--ink-soft); }
.prose h3 { font-size: var(--fs-h3); font-stretch: 106%; margin-top: .6em; }
.prose ul { padding-left: 1.2em; display: grid; gap: .35em; color: var(--ink-soft); }

.checklist { list-style: none; display: grid; gap: 10px; }
.checklist li { display: grid; grid-template-columns: 22px 1fr; gap: 10px; color: var(--ink-soft); }
.checklist .icon { color: var(--teal); margin-top: 3px; width: 20px; height: 20px; }

.chips { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; }
.chips--lg { gap: 8px; }
.chips--lg li { font-size: var(--fs-small); padding: 8px 14px; background: var(--surface); }
.chips li {
	padding: 4px 10px; border: 1px solid var(--line-strong); border-radius: 999px;
	font-size: var(--fs-xs); font-weight: 560; white-space: nowrap;
}

/* Materials page */
.mat-nav { position: sticky; top: var(--header-h); z-index: 20; background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.admin-bar .mat-nav { top: calc(var(--header-h) + 32px); }
.mat-nav ul { display: flex; gap: 8px; list-style: none; overflow-x: auto; padding-block: 10px; scrollbar-width: none; }
.mat-nav a {
	display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px 0 8px;
	border-radius: 999px; color: var(--ink); text-decoration: none; font-weight: 560; white-space: nowrap;
}
.mat-nav a:hover, .mat-nav a.is-current { background: var(--surface); }
.mat-nav .face { width: 28px; height: 28px; }

.mat-detail { padding-block: var(--section); border-bottom: 1px solid var(--line); }
.mat-detail__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; }
.mat-detail__head { grid-column: 1 / span 5; display: grid; gap: 20px; align-content: start; }
.mat-detail__face { width: clamp(96px, 12vw, 160px); height: auto; }
.mat-detail__name { font-size: var(--fs-h1); font-stretch: 118%; font-weight: 620; letter-spacing: -.028em; line-height: 1; }
.mat-detail__body { grid-column: 7 / -1; display: grid; gap: 32px; }
.mat-detail__body h3 { font-size: var(--fs-small); font-weight: 620; margin-bottom: 12px; }
@media (max-width: 959px) { .mat-detail__head, .mat-detail__body { grid-column: 1 / -1; } }

.faq { border-top: 1px solid var(--line-strong); max-width: 860px; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
	display: flex; justify-content: space-between; align-items: center; gap: 16px;
	min-height: 64px; padding: 16px 0; cursor: pointer; list-style: none;
	font-size: 1.15rem; font-weight: 600; font-stretch: 104%;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { transition: transform .35s var(--ease-out); color: var(--teal); }
.faq details[open] summary .icon { transform: rotate(45deg); }
.faq__body { padding: 0 0 24px; color: var(--ink-soft); max-width: 64ch; }
.faq__body p + p { margin-top: .8em; }

/* Services / industries detail lists */
.detail-list { list-style: none; }
.detail {
	display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 20px;
	padding-block: clamp(40px, 5vw, 64px); border-top: 1px solid var(--line-strong);
}
.detail:last-child { border-bottom: 1px solid var(--line-strong); }
.detail__head { grid-column: 1 / span 5; display: grid; gap: 14px; align-content: start; }
.detail__face { width: 56px; height: 56px; }
.detail__title { font-size: clamp(1.5rem, 1.2rem + 1.1vw, 2.1rem); font-stretch: 110%; font-weight: 620; letter-spacing: -.018em; }
.detail__head p { color: var(--ink-soft); max-width: 44ch; }
.detail__body { grid-column: 7 / -1; display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.detail__body h3 { font-size: var(--fs-small); font-weight: 620; margin-bottom: 12px; }
@media (max-width: 959px) { .detail__head, .detail__body { grid-column: 1 / -1; } }
@media (max-width: 599px) { .detail__body { grid-template-columns: 1fr; } }

/* About */
.timeline { list-style: none; position: relative; }
.timeline li {
	display: grid; grid-template-columns: 120px 1fr; gap: 24px;
	padding: 24px 0; border-top: 1px solid var(--line);
}
.timeline__year { font-size: 1.6rem; font-weight: 300; font-stretch: 125%; color: var(--teal); font-variant-numeric: tabular-nums; line-height: 1.1; }
.timeline h3 { font-size: var(--fs-h3); font-stretch: 106%; margin-bottom: 6px; }
.timeline p { color: var(--ink-soft); }
@media (max-width: 519px) { .timeline li { grid-template-columns: 1fr; gap: 8px; } }

.principles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 48px); list-style: none; }
.principles li { display: grid; gap: 10px; align-content: start; padding-top: 24px; border-top: 2px solid var(--ink); }
.principles h3 { font-size: var(--fs-h3); font-stretch: 106%; }
.principles p { color: var(--ink-soft); }
@media (max-width: 859px) { .principles { grid-template-columns: 1fr; } }

/* Quality */
.docs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; list-style: none; }
.docs li { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; display: grid; gap: 10px; align-content: start; }
.docs .icon { width: 28px; height: 28px; color: var(--teal); }
.docs h3 { font-size: 1.15rem; font-stretch: 106%; }
.docs p { color: var(--ink-soft); font-size: var(--fs-small); }
@media (max-width: 859px) { .docs { grid-template-columns: 1fr; } }

/* Who we work with */
.audience__list { list-style: none; }
.audience__list li {
	position: relative;
	display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.6fr); gap: 8px 32px;
	padding: 22px 0; 
}
.audience__list li::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--line-strong); transform-origin: left; }
.audience__list li:last-child { border-bottom: 1px solid var(--line-strong); }
.audience__list h3 { font-size: var(--fs-h3); font-stretch: 106%; font-weight: 620; }
.audience__list p { color: var(--ink-soft); }
@media (max-width: 599px) { .audience__list li { grid-template-columns: 1fr; } }

/* Evaluation factors (about) */
.factors { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); list-style: none; }
.factors li { background: var(--paper); padding: clamp(20px, 2.5vw, 32px); display: grid; gap: 8px; align-content: start; }
.factors h3 { font-size: 1.25rem; font-stretch: 108%; font-weight: 620; }
.factors p { color: var(--ink-soft); font-size: var(--fs-small); }
@media (max-width: 859px) { .factors { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 519px) { .factors { grid-template-columns: 1fr; } }

/* Project gallery */
.gallery { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(12px, 1.5vw, 24px); list-style: none; }
.gallery figure { margin: 0; display: grid; gap: 10px; }
.gallery img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--radius-lg); background: var(--line); }
.gallery figcaption { font-size: var(--fs-small); color: var(--ink-soft); }
.gallery__link { display: block; border-radius: var(--radius-lg); overflow: hidden; cursor: zoom-in; }
.gallery__link img { border-radius: 0; transition: transform .8s var(--ease-out); }
@media (hover: hover) { .gallery__link:hover img { transform: scale(1.04); } }
.gallery__link:focus-visible { outline-offset: 4px; }

/* Photo viewer */
.lightbox {
	width: 100vw; height: 100dvh; max-width: none; max-height: none;
	margin: 0; padding: 0; border: 0;
	background: transparent; color: #fff;
	overflow: hidden;
}
.lightbox::backdrop { background: rgba(8, 16, 28, .92); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.lightbox[open] { display: grid; place-items: center; animation: lb-in .3s var(--ease-out); }
.lightbox__figure {
	margin: 0; display: grid; gap: 12px; justify-items: center;
	max-width: min(1200px, calc(100vw - 144px)); pointer-events: none;
}
.lightbox__img {
	max-width: 100%; max-height: calc(100dvh - 160px); width: auto; height: auto;
	border-radius: 10px; object-fit: contain;
	opacity: 0; transform: scale(.98); transition: opacity .35s var(--ease-out), transform .45s var(--ease-out);
	pointer-events: auto;
}
.lightbox.is-loaded .lightbox__img { opacity: 1; transform: none; }
.lightbox__cap { font-size: var(--fs-small); color: rgba(255, 255, 255, .85); text-align: center; max-width: 64ch; }
.lightbox__count {
	position: absolute; left: 50%; bottom: calc(20px + env(safe-area-inset-bottom)); transform: translateX(-50%);
	margin: 0; font-size: var(--fs-small); color: rgba(255, 255, 255, .7); font-variant-numeric: tabular-nums;
}
.lightbox__btn {
	position: absolute; display: grid; place-items: center;
	width: 52px; height: 52px; padding: 0;
	border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%;
	background: rgba(255, 255, 255, .08); color: #fff; cursor: pointer;
	transition: background-color .2s, border-color .2s;
}
.lightbox__btn:hover { background: rgba(255, 255, 255, .18); border-color: rgba(255, 255, 255, .5); }
.lightbox__btn:focus-visible { outline-color: #fff; }
.lightbox__btn .icon { width: 22px; height: 22px; }
.lightbox__close { top: calc(16px + env(safe-area-inset-top)); right: 16px; }
.lightbox__prev { left: 16px; top: 50%; transform: translateY(-50%); }
.lightbox__next { right: 16px; top: 50%; transform: translateY(-50%); }
@keyframes lb-in { from { opacity: 0; } to { opacity: 1; } }
@media (max-width: 599px) {
	.lightbox__figure { max-width: calc(100vw - 24px); }
	.lightbox__prev, .lightbox__next { top: auto; bottom: calc(8px + env(safe-area-inset-bottom)); transform: none; width: 48px; height: 48px; }
	.lightbox__img { max-height: calc(100dvh - 180px); }
}
.js [data-reveal].gallery > li, .gallery [data-reveal] { position: relative; }
@media (max-width: 1023px) { .gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 519px) { .gallery { grid-template-columns: 1fr; } }

/* Service photo */
.detail__img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--radius-lg); margin-bottom: 8px; }

/* Service subpage */
.service__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 40px; align-items: start; }
.service__main { grid-column: 1 / span 7; display: grid; gap: clamp(40px, 5vw, 64px); }
.service__aside { grid-column: 9 / -1; display: grid; gap: 20px; position: sticky; top: calc(var(--header-h) + 32px); }
.service__img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--radius-lg); }
.service__h { font-size: var(--fs-h3); font-stretch: 106%; font-weight: 620; margin-bottom: 16px; }
.service__lists { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.send-box { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 32px); }
.send-list { list-style: none; counter-reset: send; display: grid; gap: 14px; }
.send-list li { counter-increment: send; display: grid; grid-template-columns: 32px 1fr; gap: 12px; align-items: start; color: var(--ink-soft); }
.send-list li::before {
	content: counter(send); display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
	background: var(--teal-wash); color: var(--teal-ink); font-weight: 650; font-size: var(--fs-small); font-variant-numeric: tabular-nums;
}
.contact-card--accent { background: var(--ink); border-color: var(--ink); color: #fff; }
.contact-card--accent h2 { color: rgba(0, 0, 0, .75);    }
.contact-card--accent .field__help { color: rgba(0, 0, 0, .75); }
.contact-card--accent .btn--primary { width: 100%; }
.cta-inline-phone { display: inline-flex; align-items: center; gap: 10px; min-height: 44px; color: rgba(0, 0, 0, .75);  font-weight: 600; text-decoration: none; font-variant-numeric: tabular-nums; }
.cta-inline-phone:hover { color: var(--teal-wash); text-decoration: underline; }
.svc-links { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.svc-links a {
	display: flex; align-items: center; gap: 14px; min-height: 72px; padding: 14px 18px;
	border: 1px solid var(--line); border-radius: var(--radius-lg); background: var(--surface);
	color: var(--ink); font-weight: 600; font-stretch: 104%; text-decoration: none;
	transition: border-color .2s, transform .3s var(--ease-out);
}
.svc-links a:hover { border-color: var(--teal); color: var(--ink); }
.svc-links__face { width: 40px; height: 40px; flex: none; transition: transform .8s var(--ease-out); }
@media (hover: hover) { .svc-links a:hover .svc-links__face { transform: rotate(120deg); } }
.detail__link { color: inherit; text-decoration: none; }
.detail__link:hover { color: var(--teal); }
@media (max-width: 959px) {
	.service__main, .service__aside { grid-column: 1 / -1; }
	.service__aside { position: static; }
}
@media (max-width: 599px) { .service__lists { grid-template-columns: 1fr; } }

/* Client logos */
.logos { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); }
.logos li { display: grid; place-items: center; background: var(--paper); padding: clamp(20px, 3vw, 36px); min-height: 120px; }
.logos__img { max-width: 140px; max-height: 56px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .75; transition: filter .3s, opacity .3s; }
.logos li:hover .logos__img { filter: none; opacity: 1; }
.gallery--docs img { aspect-ratio: 3 / 4; object-fit: contain; background: var(--surface); border: 1px solid var(--line); }

/* References */
.cases { list-style: none; }
.case {
	position: relative;
	display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 24px;
	padding-block: clamp(36px, 5vw, 64px);
}
.case::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 1px; background: var(--line-strong); transform-origin: left; }
.case__meta { grid-column: 1 / span 3; display: grid; gap: 6px; align-content: start; }
.case__face { width: 56px; height: 56px; margin-bottom: 10px; }
.case__sector { font-weight: 640; font-stretch: 106%; }
.case__place { color: var(--ink-soft); font-size: var(--fs-small); }
.case__body { grid-column: 4 / -1; display: grid; gap: 20px; align-content: start; }
.case__title { font-size: clamp(1.4rem, 1.15rem + 1vw, 1.9rem); font-stretch: 108%; font-weight: 620; letter-spacing: -.015em; }
.case__story { display: grid; gap: 14px; margin: 0; }
.case__story div { display: grid; grid-template-columns: 5.5rem 1fr; gap: 12px; }
.case__story dt { font-weight: 600; font-size: var(--fs-small); padding-top: 2px; }
.case__story dd { margin: 0; color: var(--ink-soft); }
.case__result { grid-column: 10 / -1; display: grid; gap: 20px; margin: 0; align-content: start; }
.case__result div { display: flex; flex-direction: column-reverse; gap: 2px; padding-left: 16px; border-left: 2px solid var(--teal); }
.case__result dd { margin: 0; font-size: clamp(1.5rem, 1.2rem + 1vw, 2rem); font-weight: 600; font-stretch: 112%; line-height: 1.1; font-variant-numeric: tabular-nums; }
.case__result dt { font-size: var(--fs-small); color: var(--ink-soft); }
@media (max-width: 959px) {
	.case__meta { grid-column: 1 / -1; grid-template-columns: auto 1fr; column-gap: 16px; align-items: center; }
	.case__face { grid-row: span 2; margin: 0; }
	.case__body, .case__result { grid-column: 1 / -1; }
	.case__result { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 479px) { .case__story div { grid-template-columns: 1fr; gap: 2px; } }

/* ---------- Contact / RFQ form ---------- */

.contact__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: clamp(16px, 2vw, 32px); row-gap: 48px; align-items: start; }
.contact__form { grid-column: 1 / span 7; }
.contact__title { margin-bottom: 32px; }
.contact__aside { grid-column: 9 / -1; display: grid; gap: 32px; position: sticky; top: calc(var(--header-h) + 32px); }
@media (max-width: 959px) { .contact__form, .contact__aside { grid-column: 1 / -1; } .contact__aside { position: static; } }

.form { display: grid; gap: 24px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 599px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 8px; align-content: start; }
.field__label { font-weight: 600; font-size: var(--fs-small); }
.field__opt { font-weight: 400; color: var(--ink-soft); }
.field__req { color: var(--danger); font-weight: 600; }
.field__help { font-size: var(--fs-xs); color: var(--ink-soft); }
.field__input {
	width: 100%; min-height: 52px; padding: 12px 14px;
	border: 1px solid var(--line-strong); border-radius: var(--radius);
	background: var(--surface); color: var(--ink);
	font: inherit; font-size: 1rem;
	transition: border-color .2s, box-shadow .2s;
}
textarea.field__input { min-height: 150px; resize: vertical; line-height: 1.5; }
select.field__input {
	appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230C1B2E' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat; background-position: right 14px center; background-size: 18px;
}
.field__input:hover { border-color: var(--ink-soft); }
.field__input:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-wash); }
.field__error { display: none; align-items: flex-start; gap: 6px; color: var(--danger); font-size: var(--fs-small); font-weight: 520; }
.field.has-error .field__input, .field.has-error .drop { border-color: var(--danger); }
.field.has-error .field__error { display: flex; }

.drop {
	position: relative; display: grid; justify-items: center; gap: 6px; text-align: center;
	padding: 28px 20px; border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg);
	background: var(--surface); color: var(--ink-soft); cursor: pointer;
	transition: border-color .2s, background-color .2s;
}
.drop:hover, .drop.is-over { border-color: var(--teal); background: var(--teal-wash); }
.drop:focus-within { border-color: var(--teal); box-shadow: 0 0 0 3px var(--teal-wash); }
.drop .icon { width: 28px; height: 28px; color: var(--teal); }
.drop__title { font-weight: 600; color: var(--ink); }
.drop input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.drop__file { font-weight: 600; color: var(--teal-ink); word-break: break-all; }

.check { display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start; font-size: var(--fs-small); color: var(--ink-soft); cursor: pointer; }
.check input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--teal); cursor: pointer; }

.hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Contact Form 7: map its markup onto the form styles above. */
.uras-cf7 .wpcf7-form-control-wrap { display: block; }
.uras-cf7 .drop .wpcf7-form-control-wrap { position: static; }
.uras-cf7 .field__input.wpcf7-not-valid,
.uras-cf7 .drop:has(.wpcf7-not-valid) { border-color: var(--danger); }
.uras-cf7 .wpcf7-not-valid-tip {
	display: block; margin-top: 8px;
	color: var(--danger); font-size: var(--fs-small); font-weight: 520;
}
.uras-cf7 .drop .wpcf7-not-valid-tip { position: relative; z-index: 1; }
.uras-cf7 .wpcf7-acceptance .wpcf7-list-item { display: block; margin: 0; }
.uras-cf7 .wpcf7-acceptance label {
	display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start;
	font-size: var(--fs-small); color: var(--ink-soft); cursor: pointer;
}
.uras-cf7 .wpcf7-acceptance input { width: 22px; height: 22px; margin: 1px 0 0; accent-color: var(--teal); cursor: pointer; }
.uras-cf7 input.wpcf7-submit { font-family: inherit; -webkit-appearance: none; appearance: none; min-width: 240px; }
.uras-cf7 .form__submit { position: relative; }
.uras-cf7 .wpcf7-spinner { margin: 0; background-color: var(--teal); }
.uras-cf7.submitting input.wpcf7-submit { opacity: .7; cursor: progress; }
.uras-cf7 .wpcf7-response-output {
	margin: 0 !important; padding: 16px 20px !important;
	border: 0 !important; border-radius: var(--radius-lg);
	background: var(--danger-wash); color: var(--danger); font-weight: 520;
}
.uras-cf7.sent .wpcf7-response-output { background: var(--teal-wash); color: var(--teal-ink); }
.uras-cf7.init .wpcf7-response-output, .uras-cf7 .wpcf7-response-output:empty { display: none; }

.form__submit { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.form__submit .btn { min-width: 220px; }
.form__note { font-size: var(--fs-small); color: var(--ink-soft); }

.notice { display: grid; grid-template-columns: 28px 1fr; gap: 12px; padding: 20px; border-radius: var(--radius-lg); }
.notice .icon { width: 24px; height: 24px; }
.notice--ok { background: var(--teal-wash); color: var(--teal-ink); }
.notice--err { background: var(--danger-wash); color: var(--danger); }
.notice strong { display: block; color: var(--ink); margin-bottom: 2px; }
.notice[hidden] { display: none; }
.notice--err { margin-bottom: 24px; }

.contact-card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: clamp(20px, 3vw, 32px); display: grid; gap: 20px; }
.contact-card h2 { font-size: 1.35rem; font-stretch: 108%; }
.contact-card ul { list-style: none; display: grid; gap: 14px; }
.contact-card li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; color: var(--ink-soft); }
.contact-card li a { color: var(--ink); font-weight: 600; text-decoration: none; }
.contact-card li a:hover { text-decoration: underline; }
.contact-card .icon { color: var(--teal); margin-top: 2px; }

.kvkk { font-size: var(--fs-small); color: var(--ink-soft); display: grid; gap: .8em; max-width: 72ch; }

/* Generic pages rendered from post content */
.prose-page { padding: clamp(40px, 6vw, 88px) var(--gutter) var(--section); }
.prose-page .wp-block-post-title { font-size: var(--fs-h1); font-stretch: 112%; letter-spacing: -.025em; margin-bottom: 32px; }

.not-found { padding-block: var(--section); }
.not-found .page-hero__title { margin-bottom: 20px; }

/* ==========================================================================
   Motion
   Hidden initial states apply only when JS runs (html.js) and the visitor
   has not asked for reduced motion. Everything is visible without JS.
   ========================================================================== */

@media (prefers-reduced-motion: no-preference) {

	/* Headline: words rise from behind a mask. */
	.js [data-split] .w { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .08em; margin-bottom: -.08em; }
	.js [data-split] .w__i { display: inline-block; transform: translateY(105%); transition: transform .9s var(--ease-out); transition-delay: calc(var(--wi) * 45ms + 80ms); }
	.js.is-ready [data-split] .w__i { transform: none; }

	.js .hero__place, .js .hero__lead, .js .hero__actions, .js .hero__legend, .js .page-hero__lead, .js .crumbs {
		opacity: 0; transform: translateY(10px);
		transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
	}
	.js .hero__place, .js .crumbs { transition-delay: 0s; }
	.js .hero__lead, .js .page-hero__lead { transition-delay: .45s; }
	.js .hero__actions { transition-delay: .6s; }
	.js .hero__legend { transition-delay: 2.1s; }
	.js.is-ready :is(.hero__place, .hero__lead, .hero__actions, .hero__legend, .page-hero__lead, .crumbs) { opacity: 1; transform: none; }

	/* Rollers: the coating runs along each steel core, then the end face appears. */
	.js .roller__coat { transform: scaleX(0); transform-box: fill-box; transform-origin: left center; }
	.js .roller__face { opacity: 0; }
	.js .roller { opacity: 0; transform: translate(-24px, 16px); transition: opacity .6s var(--ease-out), transform .9s var(--ease-out), filter .35s var(--ease-out); transition-delay: calc(var(--i) * 120ms + 200ms); }
	.js.is-ready .roller { opacity: 1; transform: none; }
	.js.is-ready .rollers.has-focus .roller:not(.is-focus) { opacity: .28; transition-delay: 0s; }
	.js.is-ready .roller__coat { animation: coat 1.25s var(--ease-inout) forwards; animation-delay: calc(var(--i) * 260ms + 700ms); }
	.js.is-ready .roller__face { animation: fade .6s var(--ease-out) forwards; animation-delay: calc(var(--i) * 260ms + 1.75s); }
	.js.is-ready .roller__sheen { animation: sheen 9s ease-in-out infinite; animation-delay: calc(var(--i) * 1.4s + 3s); }

	/* Page hero face turns into place once. */
	.js .page-hero__face { opacity: 0; transform: rotate(-80deg) scale(.92); transition: opacity 1s var(--ease-out) .2s, transform 1.6s var(--ease-out) .2s; }
	.js.is-ready .page-hero__face { opacity: 1; transform: none; }

	/* Rules draw left to right as lists enter, like a coating pass. */
	.js [data-reveal]::before { transform: scaleX(0); transition: transform 1s var(--ease-inout); transition-delay: calc(var(--d, 0) * 90ms); }
	.js [data-reveal] > * { opacity: 0; transform: translateY(8px); transition: opacity .7s var(--ease-out), transform .7s var(--ease-out); transition-delay: calc(var(--d, 0) * 90ms + 250ms); }
	.js [data-reveal].is-in::before { transform: none; }
	.js [data-reveal].is-in > * { opacity: 1; transform: none; }

	.js .specline { border-top-color: transparent; background: linear-gradient(var(--line-strong), var(--line-strong)) top left / 0 1px no-repeat; transition: background-size 1.4s var(--ease-inout) 1.2s; }
	.js.is-ready .specline { background-size: 100% 1px; }

	.js.is-settled .roller { transition-delay: 0s; }
}

@keyframes coat { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes sheen { 0%, 100% { opacity: .22; } 50% { opacity: .08; } }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

@media print {
	.site-header, .cta-band, .site-footer, .hero__art, .page-hero__art { display: none !important; }
	body { background: #fff; }
}